/* Taxifo marketing site.
 *
 * Hand-written CSS, no build step and no framework — the site is a brochure and
 * the product is a SPA, and there is no reason for them to share a toolchain.
 * Nothing is loaded from a third party: no web fonts, no analytics, no CDN. A
 * page about somebody's accounting records should not be phoning anywhere.
 *
 * ---------------------------------------------------------------------------
 * EVERY ANIMATION HERE IS PURE CSS, AND THAT IS NOT A STYLE CHOICE.
 * ---------------------------------------------------------------------------
 * The vhost sends `default-src 'none'` with NO script-src at all, and the
 * deploy filter does not even rsync .js — so a scroll-reveal library, or an
 * inline <script>, is not "discouraged" here, it simply does not run. Reveals
 * therefore use `animation-timeline: view()`, which the browser drives itself.
 *
 * The important consequence: every revealed element is styled VISIBLE by
 * default, and the animation is applied only inside
 * `@supports (animation-timeline: view())`. Do it the other way round — start
 * at opacity 0 and animate up — and any browser without scroll-driven
 * animations shows a blank page. That failure mode is total and silent, which
 * is exactly why the fallback is the visible state.
 *
 * Palette from the apps' asset catalogue (OakPrimary, OakSecondary,
 * OakBackground) so the site and the product look like one product.
 */

:root {
    --primary: #16386E;
    --primary-lift: #1D4B93;
    --secondary: #2F6FB5;
    --accent: #6C4BAF;
    --accent-warm: #E8833A;

    --bg: #F7F9FC;
    --bg-raised: #FFFFFF;
    --bg-band: #EFF4FB;
    --ink: #16233A;
    --ink-soft: #45566F;
    --muted: #5A6B85;
    --line: #DCE5F0;

    --radius: 16px;
    --radius-lg: 26px;
    --shadow-sm: 0 1px 2px rgb(22 35 58 / .06), 0 4px 12px rgb(22 35 58 / .05);
    --shadow-md: 0 2px 4px rgb(22 35 58 / .05), 0 12px 32px rgb(22 35 58 / .09);
    --shadow-lg: 0 8px 24px rgb(22 35 58 / .10), 0 32px 64px rgb(22 35 58 / .14);

    --wrap: 1140px;
    --pad: clamp(20px, 5vw, 40px);

    /* System stack only. Noto Sans Devanagari is named so a Hindi or Marathi
       word in body copy renders properly instead of falling back to tofu. */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, "Noto Sans", "Noto Sans Devanagari", sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary: #7EABF6;
        --primary-lift: #9CC0FA;
        --secondary: #A6C8F5;
        --accent: #B79BEE;
        --accent-warm: #F0A461;

        --bg: #0D1017;
        --bg-raised: #151A23;
        --bg-band: #121722;
        --ink: #E8EDF5;
        --ink-soft: #C3CEDF;
        --muted: #9AA8BF;
        --line: #263041;

        --shadow-sm: 0 1px 2px rgb(0 0 0 / .4);
        --shadow-md: 0 12px 32px rgb(0 0 0 / .45);
        --shadow-lg: 0 32px 64px rgb(0 0 0 / .55);
    }
}

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    /* The sticky header would otherwise cover the heading of whatever section
       an in-page link jumps to. */
    scroll-padding-top: 84px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    /* The aurora blobs are positioned beyond the viewport edge on purpose; this
       stops them widening the document. A horizontal scrollbar on a phone was a
       real bug here once, caused by a grid track floor wider than the screen. */
    overflow-x: hidden;
}

h1, h2, h3 {
    line-height: 1.12;
    letter-spacing: -0.022em;
    margin: 0;
    text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
img, svg { max-width: 100%; }

a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }

:focus-visible {
    outline: 3px solid var(--secondary);
    outline-offset: 3px;
    border-radius: 6px;
}

.skip {
    position: absolute;
    left: -9999px;
    top: 8px;
    background: var(--bg-raised);
    color: var(--ink);
    padding: 12px 18px;
    border-radius: 10px;
    z-index: 100;
    box-shadow: var(--shadow-md);
}
.skip:focus { left: 12px; }

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--pad);
}
.wrap-narrow { max-width: 780px; }

/* ===================================================================== *
 * Reveal on scroll — see the header note about why this is @supports-gated
 * ===================================================================== */

.reveal { opacity: 1; }

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .reveal {
            animation: rise linear both;
            animation-timeline: view();
            /* Both ends are inside the `entry` phase, and that is load-bearing
               rather than stylistic. `entry` runs from the element beginning to
               enter the viewport to it being fully inside; a range that ends in
               `cover` instead can need more scrolling than the page HAS, so the
               last section or two would sit permanently half-transparent with
               no way for the reader to finish them. Ending at entry 70% means
               the reveal is always complete by the time the element is fully
               on screen, on any page length. */
            animation-range: entry 0% entry 70%;
        }
    }
}

@keyframes rise {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: none; }
}

/* Stagger inside a grid, so cards arrive one after another rather than as a
   block. Delay cannot be used with a scroll timeline — it is not time-based —
   so the offset goes into the range instead. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .pain-grid > :nth-child(2),
        .feature-grid > :nth-child(2),
        .feature-grid > :nth-child(5),
        .steps > :nth-child(2) { animation-range: entry 10% entry 80%; }

        .pain-grid > :nth-child(3),
        .feature-grid > :nth-child(3),
        .feature-grid > :nth-child(6),
        .steps > :nth-child(3) { animation-range: entry 20% entry 90%; }
    }
}

/* ===================================================================== *
 * Header
 * ===================================================================== */

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    /* Sharpens as the page scrolls; without the timeline it simply stays in its
       resting state, which is the correct-looking one. */
    transition: border-color .25s ease;
}

@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        .topbar {
            animation: bar-solid linear both;
            animation-timeline: scroll();
            animation-range: 0 120px;
        }
    }
}

@keyframes bar-solid {
    to { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }
}

.topbar-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 68px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--primary);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.brand-mark { display: inline-flex; }
.brand-word { font-size: 1.2rem; color: var(--ink); }

.topnav {
    display: none;
    margin-inline-start: auto;
    gap: 4px;
}
.topnav a {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: .95rem;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 9px;
    transition: background-color .18s ease, color .18s ease;
}
.topnav a:hover { background: var(--bg-band); color: var(--ink); }

@media (min-width: 900px) { .topnav { display: flex; } }

.topbar .btn-sm { margin-inline-start: auto; }
@media (min-width: 900px) { .topbar .btn-sm { margin-inline-start: 8px; } }

/* ===================================================================== *
 * Buttons
 * ===================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .18s cubic-bezier(.3, .8, .4, 1),
                box-shadow .18s ease,
                background-color .18s ease;
}
.btn-sm { padding: 9px 17px; font-size: .93rem; }
.btn-lg { padding: 15px 27px; font-size: 1.03rem; }

.btn-primary {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 1px 2px rgb(22 56 110 / .3), 0 8px 22px rgb(22 56 110 / .22);
}
.btn-primary:hover { background: var(--primary-lift); transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0); }

@media (prefers-color-scheme: dark) {
    .btn-primary { color: #0D1017; box-shadow: 0 8px 22px rgb(0 0 0 / .5); }
}

.btn-ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--line);
}
.btn-ghost:hover { background: var(--bg-raised); transform: translateY(-2px); }

.btn-invert {
    background: #fff;
    color: var(--primary);
    box-shadow: 0 10px 30px rgb(0 0 0 / .22);
}
.btn-invert:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgb(0 0 0 / .28); }
@media (prefers-color-scheme: dark) { .btn-invert { background: #E8EDF5; color: #0D1017; } }

.btn-arrow { transition: transform .2s cubic-bezier(.3, .8, .4, 1); }
.btn:hover .btn-arrow { transform: translateX(4px); }

/* ===================================================================== *
 * Hero
 * ===================================================================== */

.hero {
    position: relative;
    padding-block: clamp(56px, 9vw, 104px) clamp(64px, 10vw, 120px);
    overflow: hidden;
}

.aurora {
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 130%;
    z-index: 0;
    pointer-events: none;
    filter: blur(72px);
    opacity: .5;
}
@media (prefers-color-scheme: dark) { .aurora { opacity: .32; } }

.blob {
    position: absolute;
    border-radius: 50%;
    /* Percentages of the blurred container, so they scale with the viewport
       rather than needing breakpoints. */
    width: 46%;
    aspect-ratio: 1;
}
.blob-a { background: var(--secondary); top: 4%;  left: -4%; }
.blob-b { background: var(--accent);    top: 26%; right: -6%; width: 40%; }
.blob-c { background: var(--accent-warm); bottom: 4%; left: 34%; width: 32%; opacity: .65; }

@media (prefers-reduced-motion: no-preference) {
    .blob-a { animation: drift-a 20s ease-in-out infinite alternate; }
    .blob-b { animation: drift-b 26s ease-in-out infinite alternate; }
    .blob-c { animation: drift-c 23s ease-in-out infinite alternate; }
}

@keyframes drift-a { to { transform: translate3d(8%, 6%, 0) scale(1.14); } }
@keyframes drift-b { to { transform: translate3d(-9%, 10%, 0) scale(.88); } }
@keyframes drift-c { to { transform: translate3d(6%, -8%, 0) scale(1.2); } }

.hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(40px, 6vw, 64px);
    align-items: center;
}
@media (min-width: 980px) {
    .hero-grid { grid-template-columns: 1.05fr .95fr; }
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 20px;
    padding: 7px 15px 7px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-raised) 70%, transparent);
    font-size: .87rem;
    font-weight: 600;
    color: var(--ink-soft);
}
.dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #2BA84A;
    box-shadow: 0 0 0 0 rgb(43 168 74 / .55);
}
@media (prefers-reduced-motion: no-preference) {
    .dot { animation: pulse 2.4s ease-out infinite; }
}
@keyframes pulse {
    70%  { box-shadow: 0 0 0 9px rgb(43 168 74 / 0); }
    100% { box-shadow: 0 0 0 0 rgb(43 168 74 / 0); }
}

.hero h1 {
    font-size: clamp(2.35rem, 6.4vw, 4rem);
    font-weight: 800;
    margin-bottom: 22px;
}

/* The highlight sweeps in behind the words.
 *
 * Painted as a background on the span, NOT an absolutely positioned
 * pseudo-element. The pseudo-element version needed `white-space: nowrap` to
 * keep the underline in one piece, and that is what broke small screens: a
 * nowrap phrase overflows its parent's box WITHOUT widening it, so the text
 * visibly spilled past the viewport while every box-measuring check reported
 * the layout as clean. `box-decoration-break: clone` gets a correct highlight
 * on each line instead, so the phrase is free to wrap.
 */
.hl {
    color: var(--primary);
    background-image: linear-gradient(90deg,
        color-mix(in srgb, var(--secondary) 34%, transparent),
        color-mix(in srgb, var(--accent) 28%, transparent));
    background-repeat: no-repeat;
    background-position: 0 92%;
    background-size: 100% .32em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding-inline: .06em;
    border-radius: 4px;
}
@media (prefers-reduced-motion: no-preference) {
    .hl { animation: sweep 1s .5s cubic-bezier(.2, .8, .3, 1) both; }
}
@keyframes sweep {
    from { background-size: 0% .32em; }
    to   { background-size: 100% .32em; }
}

.lede {
    font-size: clamp(1.06rem, 1.9vw, 1.22rem);
    color: var(--ink-soft);
    max-width: 34em;
    margin-bottom: 32px;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }

.trust {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    font-size: .93rem;
    color: var(--muted);
}
.trust li { display: flex; align-items: center; gap: 8px; }
.trust li::before {
    content: "✓";
    color: #2BA84A;
    font-weight: 700;
}

/* ===================================================================== *
 * The CSS phone
 * ===================================================================== */

.hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    /* Room for the floating cards, which overhang the phone on both sides. */
    padding-block: 12px;
    padding-inline: clamp(0px, 4vw, 34px);
}

.phone {
    position: relative;
    width: min(300px, 78vw);
    background: linear-gradient(160deg, #2A3550, #131A28);
    border-radius: 42px;
    padding: 11px;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgb(255 255 255 / .08) inset;
}
@media (prefers-reduced-motion: no-preference) {
    .phone { animation: hover-phone 7s ease-in-out infinite alternate; }
}
@keyframes hover-phone { to { transform: translateY(-14px); } }

.phone-notch {
    position: absolute;
    top: 11px; left: 50%;
    transform: translateX(-50%);
    width: 42%; height: 22px;
    background: #131A28;
    border-radius: 0 0 14px 14px;
    z-index: 2;
}

.phone-screen {
    background: var(--bg-raised);
    border-radius: 32px;
    padding: 34px 16px 16px;
    display: grid;
    gap: 11px;
    overflow: hidden;
}

.ph-head { display: flex; align-items: center; justify-content: space-between; }
.ph-title { font-weight: 700; font-size: .98rem; }
.ph-chip {
    font-size: .68rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-warm) 18%, transparent);
    color: var(--accent-warm);
}

.ph-field {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 8px 11px;
    display: grid;
    gap: 2px;
}
.ph-label { font-size: .64rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }

/* The typing effect. A fixed-width clip animated in steps, with a caret drawn
   as a right border so there is no extra element to keep in sync. */
.ph-typed { display: flex; }
.ph-type-text {
    font-size: .86rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    border-right: 2px solid var(--primary);
    width: 100%;
}
@media (prefers-reduced-motion: no-preference) {
    .ph-type-text {
        width: 0;
        animation: typing 3s steps(21) infinite alternate,
                   caret .8s step-end infinite;
    }
}
@keyframes typing { from { width: 0; } 55%, to { width: 100%; } }
@keyframes caret { 50% { border-right-color: transparent; } }

.ph-suggests { display: grid; gap: 5px; }
.ph-sug {
    font-size: .74rem;
    padding: 6px 10px;
    border-radius: 9px;
    background: var(--bg-band);
    color: var(--ink-soft);
}
.ph-sug-1 {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
    font-weight: 600;
}

.ph-rows { display: grid; gap: 5px; }
.ph-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: .78rem;
    padding: 7px 10px;
    border-radius: 9px;
    background: var(--bg-band);
}
.ph-row span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }

@media (prefers-reduced-motion: no-preference) {
    .ph-row-1 { animation: pop-in 6s ease-out infinite; }
    .ph-row-2 { animation: pop-in 6s .6s ease-out infinite; }
}
@keyframes pop-in {
    0%, 8%   { opacity: 0; transform: translateY(8px) scale(.97); }
    18%, 92% { opacity: 1; transform: none; }
    100%     { opacity: 1; }
}

.ph-total { display: grid; gap: 3px; padding-top: 4px; border-top: 1px dashed var(--line); }
.ph-line {
    display: flex;
    justify-content: space-between;
    font-size: .74rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.ph-line-big { font-size: .95rem; font-weight: 800; color: var(--ink); padding-top: 2px; }

.ph-cta {
    margin-top: 2px;
    text-align: center;
    background: var(--primary);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    padding: 10px;
    border-radius: 12px;
}
@media (prefers-color-scheme: dark) { .ph-cta { color: #0D1017; } }

.float-card {
    position: absolute;
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    padding: 11px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .8rem;
    line-height: 1.3;
}
.float-card strong { display: block; font-size: .86rem; }
.float-card small { color: var(--muted); font-size: .73rem; }

/* Pushed to the column edges so they OVERHANG the phone rather than sit on it.
   Placed over the screen they covered the "New bill" header — the one bit of
   the mock that says what you are looking at. */
.float-card-a { top: 4%;  left: 0; max-width: 15rem; }
.float-card-b { bottom: 0; right: 0; text-align: right; display: block; }

/* Below the two-column breakpoint the cards would sit on top of the phone
   screen and cover the content they are meant to complement. */
@media (max-width: 560px) { .float-card { display: none; } }

.fc-tick {
    width: 26px; height: 26px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #2BA84A;
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
}

@media (prefers-reduced-motion: no-preference) {
    .float-card-a { animation: hover-card 5.5s ease-in-out infinite alternate; }
    .float-card-b { animation: hover-card 6.5s .7s ease-in-out infinite alternate; }
}
@keyframes hover-card { to { transform: translateY(-11px); } }

/* ===================================================================== *
 * Bands
 * ===================================================================== */

.band { padding-block: clamp(60px, 9vw, 108px); }
.band-alt { background: var(--bg-band); }

.section-title {
    font-size: clamp(1.85rem, 4.2vw, 2.75rem);
    font-weight: 800;
    margin-bottom: 14px;
}
.section-lede {
    font-size: clamp(1.02rem, 1.7vw, 1.14rem);
    color: var(--ink-soft);
    max-width: 46ch;
    margin-bottom: 44px;
}

/* ------------------------------------------------- problem */

.pain-grid {
    display: grid;
    /* min() on the track floor, NOT a bare 360px. A bare floor wider than the
       viewport forces the whole document to scroll sideways on a phone —
       exactly the bug this site shipped with once. */
    grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.pain {
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px 24px;
    box-shadow: var(--shadow-sm);
    transition: transform .22s cubic-bezier(.3,.8,.4,1), box-shadow .22s ease;
}
.pain:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pain-emoji { font-size: 1.9rem; display: block; margin-bottom: 12px; }
.pain h3 { font-size: 1.16rem; margin-bottom: 8px; }
.pain p { color: var(--ink-soft); font-size: .97rem; }

.pain-punch {
    font-size: clamp(1.1rem, 2.3vw, 1.4rem);
    text-align: center;
    max-width: 30ch;
    margin-inline: auto;
    color: var(--ink);
}
.pain-punch strong { color: var(--primary); }

/* ------------------------------------------------- steps */

.steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 22px;
    counter-reset: step;
}
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }

.step {
    position: relative;
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 30px 26px 28px;
    box-shadow: var(--shadow-sm);
}
.step-no {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border-radius: 13px;
    background: linear-gradient(140deg, var(--primary), var(--accent));
    color: #fff;
    font-weight: 800;
    font-size: 1.08rem;
    margin-bottom: 16px;
    box-shadow: 0 6px 16px rgb(22 56 110 / .25);
}
.step h3 { font-size: 1.2rem; margin-bottom: 9px; }
.step p { color: var(--ink-soft); font-size: .98rem; }

/* ------------------------------------------------- features */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
    gap: 20px;
}

.feature {
    position: relative;
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px 26px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .22s cubic-bezier(.3,.8,.4,1), box-shadow .22s ease;
}
.feature::before {
    /* A gradient edge that wipes in on hover — cheap, and it gives the grid
       some life without another asset. */
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--primary), var(--accent));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .28s cubic-bezier(.3,.8,.4,1);
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.feature:hover::before { transform: scaleY(1); }

.feat-icon {
    font-size: 1.6rem;
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    border-radius: 14px;
    background: var(--bg-band);
    margin-bottom: 15px;
}
.feature h3 { font-size: 1.13rem; margin-bottom: 9px; }
.feature p { color: var(--ink-soft); font-size: .96rem; }

/* ------------------------------------------------- for CAs */

.band-dark {
    background:
        radial-gradient(1000px 460px at 12% -10%, rgb(108 75 175 / .45), transparent 60%),
        linear-gradient(150deg, #14213D 0%, #0E1830 60%, #101B34 100%);
    color: #E8EDF5;
}

.accountant-grid {
    display: grid;
    gap: clamp(36px, 5vw, 60px);
    align-items: center;
}
@media (min-width: 940px) { .accountant-grid { grid-template-columns: 1fr 1fr; } }

.eyebrow-light {
    background: rgb(255 255 255 / .08);
    border-color: rgb(255 255 255 / .16);
    color: #D6E1F2;
}
.section-title-light { color: #fff; }
.section-lede-light { color: #B9C7DD; }

.tick-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 13px;
}
.tick-list li {
    position: relative;
    padding-left: 32px;
    color: #C9D5E8;
    font-size: .99rem;
}
.tick-list li::before {
    content: "✓";
    position: absolute;
    left: 0; top: 1px;
    width: 21px; height: 21px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgb(126 171 246 / .18);
    color: #7EABF6;
    font-size: .72rem;
    font-weight: 700;
}

.panel-mock {
    background: #0B1220;
    border: 1px solid rgb(255 255 255 / .1);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 30px 70px rgb(0 0 0 / .5);
}
.pm-bar {
    display: flex;
    gap: 7px;
    padding: 13px 16px;
    background: rgb(255 255 255 / .04);
    border-bottom: 1px solid rgb(255 255 255 / .07);
}
.pm-bar span { width: 11px; height: 11px; border-radius: 50%; background: rgb(255 255 255 / .18); }
.pm-body { padding: 16px; display: grid; gap: 3px; }
.pm-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 11px;
    border-radius: 9px;
    font-size: .87rem;
    color: #D3DEEF;
}
.pm-row span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.pm-row:nth-child(even) { background: rgb(255 255 255 / .035); }
.pm-head {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #7C8CA6;
    background: none !important;
}
.pm-muted { color: #6F7F98; }

.pm-bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 96px;
    margin-top: 14px;
    padding: 0 11px;
}
.pm-bars span {
    flex: 1;
    height: var(--h);
    border-radius: 6px 6px 3px 3px;
    background: linear-gradient(180deg, #7EABF6, #3C6FC4);
    transform-origin: bottom;
}
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .pm-bars span {
            animation: grow-bar linear both;
            animation-timeline: view();
            animation-range: entry 10% entry 90%;
        }
    }
}
@keyframes grow-bar { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ------------------------------------------------- faq */

.faq { display: grid; gap: 12px; }

.faq details {
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 4px 22px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s ease;
}
.faq details[open] { box-shadow: var(--shadow-md); }

.faq summary {
    cursor: pointer;
    font-weight: 650;
    font-size: 1.03rem;
    padding: 17px 34px 17px 0;
    list-style: none;
    position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 50%;
    width: 9px; height: 9px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: translateY(-70%) rotate(45deg);
    transition: transform .22s cubic-bezier(.3,.8,.4,1);
}
.faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }

.faq details p {
    color: var(--ink-soft);
    font-size: .98rem;
    padding-bottom: 20px;
    max-width: 62ch;
}
@media (prefers-reduced-motion: no-preference) {
    .faq details[open] p { animation: fade-down .28s ease both; }
}
@keyframes fade-down { from { opacity: 0; transform: translateY(-6px); } }

/* ------------------------------------------------- closer */

.closer {
    padding-block: clamp(66px, 10vw, 120px);
    background:
        radial-gradient(760px 380px at 80% 0%, rgb(108 75 175 / .5), transparent 62%),
        linear-gradient(140deg, var(--primary) 0%, #12305F 55%, #0F2450 100%);
    background-color: var(--primary);
    color: #fff;
    text-align: center;
}
.closer-inner { display: grid; justify-items: center; gap: 18px; }
.closer h2 {
    font-size: clamp(1.8rem, 4.4vw, 2.9rem);
    font-weight: 800;
    max-width: 18ch;
}
.closer p { color: rgb(255 255 255 / .84); max-width: 44ch; }
.closer-small { font-size: .88rem; color: rgb(255 255 255 / .62) !important; }

/* ------------------------------------------------- footer */

.footer {
    background: var(--bg-raised);
    border-top: 1px solid var(--line);
    padding-block: 44px 22px;
}
.footer-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 28px 40px;
    justify-content: space-between;
    padding-bottom: 26px;
}
.footer-brand { max-width: 34ch; }
.brand-footer { margin-bottom: 10px; }
.footer-note { color: var(--muted); font-size: .92rem; }

.footer-links { display: flex; flex-wrap: wrap; gap: 10px 24px; align-self: center; }
.footer-links a {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: .93rem;
    font-weight: 500;
}
.footer-links a:hover { color: var(--primary); text-decoration: underline; }

.footer-base {
    border-top: 1px solid var(--line);
    padding-top: 18px;
    color: var(--muted);
}

/* ===================================================================== *
 * Reduced motion — one blanket stop.
 *
 * Individual rules are already gated, but this catches anything added later
 * that forgets to be. Someone who has asked their operating system for less
 * movement should not have to rely on every future edit remembering.
 * ===================================================================== */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}