/* Public landing page. Scoped under .marketing so none of this leaks into the signed-in app,
   which is plain Bootstrap. */

.marketing {
    --ink: #0f172a;
    --muted: #475569;
    --line: #e2e8f0;
    --brand: #0f766e;
    --brand-dark: #115e59;
    color: var(--ink);
    background: #fff;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

/* Excludes buttons and the brand lockup deliberately. A bare `.marketing a` scores 0-1-1, which beats
   `.mk-btn-primary` at 0-1-0 — so the primary button rendered brand-green text on a brand-green
   background and only became readable on hover, where `:hover` added enough specificity to win. */
.marketing a:not(.mk-btn):not(.mk-brand) { color: var(--brand); }

/* ---- Nav ---------------------------------------------------------------- */

.mk-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 68rem;
    margin: 0 auto;
    padding: 1.1rem 1.5rem;
}

.mk-brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; }
.mk-logo { width: 40px; height: 40px; }
.mk-logo-sm { width: 26px; height: 26px; opacity: .8; }

.mk-wordmark {
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
}

.mk-nav-actions { display: flex; align-items: center; gap: .5rem; }

.mk-link {
    text-decoration: none;
    color: var(--muted);
    font-weight: 500;
    padding: .5rem .75rem;
    border-radius: .5rem;
}
.mk-link:hover { color: var(--ink); background: #f1f5f9; }

/* ---- Buttons ------------------------------------------------------------ */

.mk-btn {
    display: inline-block;
    text-decoration: none;
    font-weight: 600;
    border-radius: .6rem;
    padding: .55rem 1.1rem;
    border: 1px solid transparent;
    transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
.mk-btn:active { transform: translateY(1px); }
.mk-btn-lg { padding: .8rem 1.7rem; font-size: 1.03rem; }

/* Colors stated on both the base and hover rules so neither depends on cascade order. */
.mk-btn-primary,
.mk-btn-primary:link,
.mk-btn-primary:visited { background: var(--brand); color: #fff; }
.mk-btn-primary:hover,
.mk-btn-primary:focus { background: var(--brand-dark); color: #fff; }

/* Outlined in the brand color, not the hairline --line grey. Against white, a #e2e8f0 border is
   almost invisible and the control reads as stray text rather than something clickable. Brand border
   plus brand text pairs with the filled primary without competing with it, and clears WCAG AA on
   white (teal-700 ≈ 5.4:1). */
.mk-btn-ghost,
.mk-btn-ghost:link,
.mk-btn-ghost:visited {
    background: #fff;
    color: var(--brand);
    border-color: var(--brand);
    box-shadow: inset 0 0 0 1px var(--brand);   /* reads as ~2px without shifting layout */
}
.mk-btn-ghost:hover,
.mk-btn-ghost:focus {
    background: #f0fdfa;
    color: var(--brand-dark);
    border-color: var(--brand-dark);
    box-shadow: inset 0 0 0 1px var(--brand-dark);
}

/* ---- Hero --------------------------------------------------------------- */

.mk-hero {
    max-width: 68rem;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 3rem;
    align-items: center;
}

.mk-eyebrow {
    text-transform: uppercase;
    letter-spacing: .085em;
    font-size: .74rem;
    font-weight: 700;
    color: var(--brand);
    margin: 0 0 .8rem;
}

.mk-h1 {
    font-size: clamp(2.1rem, 4.6vw, 3.15rem);
    line-height: 1.12;
    letter-spacing: -.025em;
    font-weight: 800;
    margin: 0 0 1.1rem;
}

.mk-lead { font-size: 1.1rem; color: var(--muted); margin: 0 0 1.9rem; max-width: 34rem; }

.mk-cta { display: flex; gap: .7rem; flex-wrap: wrap; }
.mk-cta-center { justify-content: center; }

.mk-trust {
    margin: 2rem 0 0;
    font-size: .9rem;
    color: var(--muted);
    max-width: 32rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
}
.mk-trust strong { color: var(--ink); }

.mk-hero-art { display: flex; justify-content: center; }
.mk-art { width: 100%; max-width: 33rem; height: auto; }

/* ---- Sections ----------------------------------------------------------- */

.mk-h2 {
    font-size: clamp(1.45rem, 2.5vw, 1.95rem);
    letter-spacing: -.02em;
    font-weight: 750;
    margin: 0 0 1.6rem;
    text-align: center;
}

.mk-h3 { font-size: 1.06rem; font-weight: 700; margin: .85rem 0 .4rem; }
.mk-h4 { font-size: .98rem; font-weight: 700; margin: 0 0 .35rem; }

.mk-who { max-width: 68rem; margin: 0 auto; padding: 3rem 1.5rem; border-top: 1px solid var(--line); }

.mk-who-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem 1.6rem;
}

.mk-who-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    color: var(--ink);
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .45rem 1.05rem;
}

.mk-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--brand); }

.mk-steps {
    max-width: 68rem;
    margin: 0 auto;
    padding: 1rem 1.5rem 3.5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.mk-step p { color: var(--muted); margin: 0; font-size: .95rem; }

.mk-step-n {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .95rem;
}

.mk-assure { background: #f8fafc; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.mk-assure > .mk-h2 { padding-top: 3rem; }

.mk-assure-grid {
    max-width: 76rem;
    margin: 0 auto;
    padding: 0 1.5rem 3.2rem;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.4rem;
}

.mk-assure-item p { color: var(--muted); font-size: .9rem; margin: 0; }

/* ---- Bank strip --------------------------------------------------------- */

.mk-banks { max-width: 68rem; margin: 0 auto; padding: 3.2rem 1.5rem; }

.mk-banks-sub {
    text-align: center;
    color: var(--muted);
    font-size: .93rem;
    margin: -1rem 0 2rem;
}

/* Marquee. The viewport clips; the track holds the logo list twice and slides left by exactly half
   its width, so the second copy lands where the first began and the loop is seamless. Masked at both
   edges so logos fade rather than being chopped off mid-glyph. */
.mk-marquee {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding: .4rem 0;
    /* Masked at both edges so tiles fade out rather than being sliced mid-logo. Applied to the
       wrapper, not each row, so both rows fade on the same line. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.mk-marquee-row { overflow: hidden; }

/* Half a tile (8.5rem width + .7rem margins = 9.2rem) shifts the lower row into a brick pattern.
   The track is far wider than the viewport, so nothing shows through on the right. */
.mk-marquee-row-offset { padding-left: 4.6rem; }

.mk-marquee-track {
    display: flex;
    width: max-content;
    animation: mk-scroll 64s linear infinite;
}

/* Slow on purpose: this is background texture, not something to read. */
@keyframes mk-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Lets someone stop a logo to actually look at it. */
.mk-marquee:hover .mk-marquee-track { animation-play-state: paused; }

/* 8.5rem tiles across a 68rem container puts eight in view at a time. */
.mk-marquee-item {
    flex: 0 0 auto;
    width: 8.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .9rem .5rem;
    margin: 0 .35rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: .7rem;
    transition: box-shadow .15s ease, transform .15s ease;
}

.mk-marquee-item:hover {
    box-shadow: 0 4px 14px rgba(15, 23, 42, .1);
    transform: translateY(-2px);
}

/* Sources vary from 48px favicons to 152px marks; a fixed box with contain keeps the row even. */
.mk-bank-logo {
    width: 2.6rem;
    height: 2.6rem;
    object-fit: contain;
    display: block;
}

.mk-bank-name {
    font-size: .71rem;
    font-weight: 650;
    line-height: 1.2;
    color: #334155;
    text-align: center;
}

/* Motion is decorative here, so honour the preference completely rather than merely slowing it. */
@media (prefers-reduced-motion: reduce) {
    .mk-marquee-track { animation: none; }
    .mk-marquee-row { overflow-x: auto; }
    .mk-marquee-row-offset { padding-left: 0; }   /* no stagger when it can't scroll */
    .mk-marquee {
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* ---- Final CTA + footer ------------------------------------------------- */

.mk-final { text-align: center; padding: 3.5rem 1.5rem; }

.mk-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 1.8rem 1.5rem 2.6rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .84rem;
    text-align: center;
    flex-wrap: wrap;
}

/* ---- Request access form ------------------------------------------------ */

.mk-request { max-width: 34rem; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }

.mk-h1-sm { font-size: clamp(1.7rem, 3.4vw, 2.2rem); }

.mk-form { display: flex; flex-direction: column; margin-top: 1.8rem; }

.mk-label {
    font-size: .85rem;
    font-weight: 650;
    margin: 1rem 0 .35rem;
    color: var(--ink);
}

.mk-optional { font-weight: 400; color: #94a3b8; }

.mk-input {
    font: inherit;
    font-size: .95rem;
    padding: .6rem .75rem;
    border: 1px solid var(--line);
    border-radius: .5rem;
    background: #fff;
    color: var(--ink);
    width: 100%;
}

.mk-input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .13);
}

textarea.mk-input { resize: vertical; }

.mk-form-submit { margin-top: 1.6rem; align-self: flex-start; }

.mk-fineprint { font-size: .82rem; color: var(--muted); margin: .9rem 0 0; }

.mk-alert {
    margin-top: 1.2rem;
    padding: .7rem .9rem;
    border-radius: .5rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-size: .9rem;
}

/* ---- Responsive --------------------------------------------------------- */

@media (max-width: 900px) {
    .mk-hero { grid-template-columns: 1fr; gap: 2rem; padding-top: 1.5rem; }
    .mk-hero-art { order: -1; }
    .mk-art { max-width: 26rem; }
    .mk-steps { grid-template-columns: 1fr; gap: 1.6rem; }
    .mk-assure-grid { grid-template-columns: repeat(2, 1fr); }
    /* Narrower tiles keep a sensible number in view without speeding the scroll up. The offset is
       half the tile plus its margins, so it has to track the width or the stagger stops lining up. */
    .mk-marquee-item { width: 7rem; }
    .mk-marquee-row-offset { padding-left: 3.85rem; }
}

@media (max-width: 560px) {
    .mk-assure-grid { grid-template-columns: 1fr; }
    .mk-marquee-item { width: 6.2rem; padding: .7rem .4rem; }
    .mk-marquee-row-offset { padding-left: 3.45rem; }
    .mk-bank-logo { width: 2.1rem; height: 2.1rem; }
    .mk-cta { flex-direction: column; align-items: stretch; }
    .mk-btn { text-align: center; }
    .mk-nav { padding: .9rem 1rem; }
    .mk-wordmark { font-size: 1.05rem; }
}