/* 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);
}

/* The way to reach a person instead of signing up (an email to info@tech911.co). Quieter than both
   buttons above it and on a row of its own, so it never competes with Sign up. */
.mk-cta-ask { margin-top: .75rem; }

.mk-btn-quiet,
.mk-btn-quiet:link,
.mk-btn-quiet:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    background: #f1f5f9;
    color: var(--ink);
    border-color: var(--line);
}
.mk-btn-quiet:hover,
.mk-btn-quiet:focus { background: #e2e8f0; color: var(--ink); border-color: #cbd5e1; }

.mk-btn-quiet svg {
    flex: none;
    width: 1.15em;
    height: 1.15em;
    fill: none;
    stroke: var(--brand);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

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

/* The copy centred over the product, which gets the full width below it: a screenshot squeezed into half
   a column is too small to show anything. */
.mk-hero {
    max-width: 68rem;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
}

.mk-hero-copy { max-width: 52rem; margin: 0 auto; text-align: center; }

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

/* balance: lines of even length rather than a last word left on a line of its own. */
.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;
    text-wrap: balance;
}

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

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

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

/* ---- Product showcase --------------------------------------------------- */

/* The Transactions page in a browser window, and the client's own view on a phone in front of it.
   isolation keeps the glow's negative z-index inside this block; without it the glow would sit behind
   .marketing's white background and never show. */
.mk-showcase {
    position: relative;
    isolation: isolate;
    max-width: 64rem;
    margin: 3.2rem auto 0;
}

.mk-showcase::before {
    content: "";
    position: absolute;
    inset: -10% -14% -14%;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(15, 118, 110, .16), rgba(15, 118, 110, 0));
}

.mk-window {
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d5dee8;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .06), 0 30px 64px -24px rgba(15, 23, 42, .38);
}

.mk-window-bar {
    display: flex;
    align-items: center;
    gap: .42rem;
    height: 2.3rem;
    padding: 0 .95rem;
    background: #f1f5f9;
    border-bottom: 1px solid var(--line);
}

.mk-window-dot { flex: none; width: .66rem; height: .66rem; border-radius: 50%; background: #cbd5e1; }

/* Centred on the bar rather than on the space the dots leave, which is what the eye compares it with. */
.mk-window-url {
    min-width: 0;
    margin: 0 auto;
    transform: translateX(-1.6rem);
    padding: .14rem 1rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: .78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mk-window img,
.mk-phone img,
.mk-frame img { display: block; width: 100%; height: auto; }

.mk-phone {
    position: absolute;
    left: -3rem;
    bottom: -2.6rem;
    width: 15rem;
    margin: 0;
    padding: .5rem;
    border-radius: 2.4rem;
    background: #0b1220;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 30px 60px -18px rgba(15, 23, 42, .55);
}

.mk-phone img { border-radius: 1.95rem; }

/* ---- The 30-second spot ------------------------------------------------- */

/* tech911.co's video band, behaving the same way. On a screen 16:10 or wider the band is a full-height
   window onto a video pinned to the viewport, so it scrolls past like page background; clip-path, not
   overflow, is what clips a position:fixed child. Narrower than that it is a plain 16:9 band, so none of
   the video's text is cropped. Playback is wwwroot/js/vidband.js. */
.mk-vidband { position: relative; height: 100vh; height: 100svh; clip-path: inset(0); background: #05171b; }
.mk-vidband video {
    position: fixed;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
@media (max-aspect-ratio: 16/10) {
    .mk-vidband { height: auto; aspect-ratio: 16 / 9; clip-path: none; }
    .mk-vidband video { position: absolute; }
}

/* Sound is opt-in: browsers only autoplay muted video, so this button is the one way to hear it. The
   [hidden] rule is stated because display:inline-flex would otherwise beat the attribute: the button
   must stay hidden for the visitors who only ever get the poster. */
.mk-vidsound {
    position: absolute;
    right: 22px;
    bottom: 22px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: rgba(4, 30, 33, .62);
    backdrop-filter: blur(4px);
    transition: background .15s ease;
}
.mk-vidsound[hidden], .mk-vidsound [hidden] { display: none; }
.mk-vidsound:hover { background: rgba(4, 30, 33, .88); }
.mk-vidsound:focus-visible { outline: 3px solid #2dd4bf; outline-offset: 3px; }
.mk-vidsound svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mk-vidsound svg path:first-child { fill: currentColor; stroke: none; }

/* ---- A closer look ------------------------------------------------------ */

.mk-tour { max-width: 76rem; margin: 0 auto; padding: 4.2rem 1.5rem 1rem; }
.mk-tour > .mk-h2 { margin-bottom: 3.2rem; }

.mk-feature {
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    gap: 3.5rem;
    align-items: center;
    margin: 0 0 4.5rem;
}

/* Alternating sides, so the eye zigzags down the page rather than reading a single column. The columns
   swap too: order moves the copy, but the wide column is still the first one. */
.mk-feature-flip { grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); }
.mk-feature-flip .mk-feature-copy { order: 2; }

.mk-feature-h {
    font-size: clamp(1.35rem, 2.3vw, 1.72rem);
    line-height: 1.2;
    letter-spacing: -.02em;
    font-weight: 750;
    margin: 0 0 .75rem;
}

.mk-feature-copy p:not(.mk-eyebrow) { color: var(--muted); margin: 0; font-size: 1.02rem; }

/* Never wider than the screenshot itself (--w, its CSS width), so a narrow one is not blown up past its
   pixels. */
.mk-frame {
    justify-self: center;
    width: 100%;
    max-width: var(--w, none);
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d5dee8;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .05), 0 24px 52px -26px rgba(15, 23, 42, .4);
}

/* ---- 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.
   Wider than tall on purpose: roughly half these brands are square marks and the rest are wordmarks,
   and a wordmark like Citibank or PNC is about 3.8:1. Constrained to a square, contain would scale
   those to the width and leave the lettering around 11px tall, which is unreadable. Height still
   caps at 2.6rem, so every square mark renders exactly as it did before and the row stays even. */
.mk-bank-logo {
    width: 5.5rem;
    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; }

/* 16px, not the .95rem it was. iOS Safari zooms the page when a focused field's text is smaller,
   and this class outranks app.css's element selectors for phones, so the request-access form's untyped
   inputs and its textarea rendered at 15.2px and zoomed. Everywhere rather than only on phones: the
   difference on a desktop is not one anybody will see, and one size cannot drift. */
.mk-input {
    font: inherit;
    font-size: 16px;
    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 --------------------------------------------------------- */

/* Pulled in before it can run off the left edge, which overflow-x on .marketing would crop. */
@media (max-width: 1200px) {
    .mk-phone { left: -1rem; width: 12.5rem; }
}

@media (max-width: 900px) {
    .mk-hero { padding-top: 1.5rem; }
    .mk-showcase { margin-top: 2.4rem; }
    .mk-phone { left: -.5rem; bottom: -1.8rem; width: 9.5rem; padding: .32rem; border-radius: 1.55rem; }
    .mk-phone img { border-radius: 1.25rem; }
    .mk-feature, .mk-feature-flip { grid-template-columns: 1fr; gap: 1.6rem; margin-bottom: 3.2rem; }
    .mk-feature-flip .mk-feature-copy { order: 0; }
    .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-window-bar { height: 1.7rem; padding: 0 .7rem; gap: .32rem; }
    .mk-window-dot { width: .5rem; height: .5rem; }
    .mk-window-url { display: none; }
    /* On the right at this size: on the left it would cover the window's sidebar, the one part that
       says which app this is. */
    .mk-phone { left: auto; right: -.4rem; bottom: -1.5rem; width: 7.4rem; padding: .25rem; border-radius: 1.2rem; }
    .mk-phone img { border-radius: .98rem; }
    .mk-vidsound { right: 14px; bottom: 14px; padding: 9px 13px; font-size: 13px; }
    .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: 4.4rem; height: 2.1rem; }
    .mk-cta { flex-direction: column; align-items: stretch; }
    .mk-btn { text-align: center; }
    /* Its label takes two lines on a phone: even ones, not a last word on its own. */
    .mk-btn-quiet { padding-left: 1rem; padding-right: 1rem; text-wrap: balance; }
    .mk-nav { padding: .9rem 1rem; }
    .mk-wordmark { font-size: 1.05rem; }
}