/* ===========================================================================
   Smart Rent Collection — landing page styles (2026 redesign)
   ---------------------------------------------------------------------------
   Design language for this pass:
     * Deep-ink aurora hero with light beams, a film-grain overlay and a
       masked headline rise
     * One family throughout (Inter): hierarchy from weight, size and the
       two-tone teal accent phrase
     * Abstract geometry system: concentric orbit arcs behind every section
       heading, blueprint dot-grid + ring motifs on tinted sections
     * Floating frosted pill navigation with a scrollspy underline
     * Pill buttons with a circular teal icon chip that rotates on hover
     * Glassy split-pill eyebrow badges
     * Glow-ring card hovers, bento security grid with one dark feature card
     * Audience marquee, traffic-light screenshot chrome, scroll-driven
       screenshot un-tilt (progressive, @supports-gated)
     * Dark CTA band and a teal-washed footer with an oversized wordmark

   Companion to the Tailwind CDN build: Tailwind handles layout (grid, flex,
   spacing, responsive); this file owns the tokens, type scale and components.

   Sections
     1. Design tokens
     2. Base + typography
     3. Page frame + sections + motifs
     4. Hero (aurora, grain, masked headline, chips)
     5. Navigation (pill nav, scrollspy, mobile panel)
     6. Badges (glass split pill)
     7. Buttons
     8. Cards, tiles, panels
     9. Integrations strip + marquee
    10. Steps (connector line, ghost numerals)
    11. Numbered benefit list
    12. Bento security grid
    13. FAQ accordion (smooth open)
    14. Product screenshot frames
    15. Forms
    16. Dark CTA band
    17. Footer + wordmark
    18. Motion + reveal system
    19. Accessibility
    20. Responsive
    21. Print
   ========================================================================= */

/* ── 1. Design tokens ───────────────────────────────────────────────────── */
:root {
    --ink:        #01485c;   /* headings, buttons, primary text      */
    --ink-deep:   #012b38;   /* darkest ground (hero / CTA band)     */
    --ink-2:      #2c5a68;   /* body copy                            */
    --ink-3:      #5b7d89;   /* secondary / meta                     */
    --teal:       #05b5b5;   /* accent — chips, icon blocks, numbers */
    --teal-dark:  #039a9a;   /* accent hover                         */
    --teal-ink:   #00807f;   /* accent text at small sizes (AA)      */
    --aqua:       #7fe0dc;   /* light accent on dark grounds         */
    --panel:      #eef4f8;   /* soft panels                          */
    --tile:       #e2f3fb;   /* rounded icon tiles                   */
    --page:       #fcfdff;   /* page surface                         */
    --line:       #e2eaef;   /* hairlines                            */
    --line-soft:  #edf3f6;
    --danger:     #c0392b;
    --star:       #f5a623;

    --radius:      18px;
    --radius-lg:   24px;
    --radius-pill: 999px;
    --shell:       1240px;   /* grows on wide screens — see below   */
    --nav-h:       88px;     /* strip padding + pill; hero offset below */

    --ease-out:  cubic-bezier(.19, 1, .22, 1);
    --shadow-card: 0 10px 30px -22px rgb(1 72 92 / .25);

    /* Self-contained film grain (SVG turbulence, tiled). Decorative only. */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── 2. Base + typography ───────────────────────────────────────────────── */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--page); }
[id] { scroll-margin-top: 120px; }   /* clear the floating nav */

body {
    margin: 0;
    background: var(--page);
    color: var(--ink-2);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                 Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; color: var(--ink); }
p { margin: 0; }

/* Display scale — one family (Inter), a tight, confident sans with only mild
   negative tracking. Hierarchy comes from weight and size, not a second face. */
.d1 { font-size: clamp(2.7rem, 5.4vw, 4.7rem); line-height: 1.05; letter-spacing: -.028em; font-weight: 700; }
.d2 { font-size: clamp(1.95rem, 3.4vw, 3rem);  line-height: 1.12; letter-spacing: -.02em;  font-weight: 700; }
.d3 { font-size: clamp(1.7rem, 2.8vw, 2.5rem); line-height: 1.14; letter-spacing: -.018em; font-weight: 700; }
.h-card { font-size: 1.125rem; line-height: 1.35; letter-spacing: -.01em;  font-weight: 600; }
.h-row  { font-size: 1.375rem; line-height: 1.3;  letter-spacing: -.012em; font-weight: 600; }

/* The teal phrase that leads a heading — same family, two-tone colour only. */
.accent { color: var(--teal); }

.lead {
    font-size: clamp(1rem, 1.15vw, 1.0625rem);
    line-height: 1.75;
    color: var(--ink-2);
}

.text-muted { color: var(--ink-3); }
.text-meta  { color: var(--ink-3); font-size: .8125rem; }
.teal-ink   { color: var(--teal-ink); }

/* Brand-colored text selection, page-wide. */
::selection { background: var(--teal); color: #fff; }

/* ── 3. Page frame + sections + motifs ──────────────────────────────────── */
.frame {
    width: 100%;
    background: var(--page);
}

.shell {
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: 28px;
}
/* Scale the container up on larger displays. Without this the page keeps a
   1240px column on a 2560px monitor and reads as a narrow strip. */
@media (min-width: 1600px) { :root { --shell: 1400px; } }
@media (min-width: 1920px) { :root { --shell: 1560px; } }

.section { padding-block: clamp(3.5rem, 7vw, 6.75rem); }
.section-tight { padding-block: clamp(2.5rem, 4.5vw, 4rem); }

/* Lighter tint for mid-page sections: the page alternates plain and tinted
   sections so the eye gets a rhythm instead of one continuous white scroll. */
.section-tint {
    background: var(--panel);
    border-block: 1px solid var(--line-soft);
}
.section-tint .teal-ink { color: #00726f; }  /* AA on the tinted ground */
/* Cards sit on a tinted ground here, so drop the card's own top-down tint. */
.section-tint .card-soft { background: #fff; }

/* Abstract background motif for tinted sections: blueprint dot-grid over a
   hairline grid, three crisp concentric rings anchored to one corner, and a
   soft teal bloom. Purely presentational (pseudo-elements, clipped). The ring
   corner and the fade direction flip on `.has-motif-left` so repeating
   sections never read as the same stamp twice. */
.has-motif {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    --ring-x: 104%;
    --ring-y: -12%;
    --motif-mask: linear-gradient(180deg, #000, transparent 72%);
}
.has-motif-left {
    --ring-x: -4%;
    --ring-y: 112%;
    --motif-mask: linear-gradient(0deg, #000, transparent 72%);
}
.has-motif > * { position: relative; z-index: 1; }
.has-motif::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        radial-gradient(circle 30rem at var(--ring-x) var(--ring-y),
            transparent 61%, rgb(5 181 181 / .16) 61.5%, rgb(5 181 181 / .16) 62.3%, transparent 62.9%),
        radial-gradient(circle 30rem at var(--ring-x) var(--ring-y),
            transparent 78%, rgb(5 181 181 / .11) 78.5%, rgb(5 181 181 / .11) 79.3%, transparent 79.9%),
        radial-gradient(circle 30rem at var(--ring-x) var(--ring-y),
            transparent 95%, rgb(5 181 181 / .08) 95.5%, rgb(5 181 181 / .08) 96.3%, transparent 96.9%),
        radial-gradient(rgb(1 72 92 / .08) 1px, transparent 1.4px),
        linear-gradient(to right, rgb(1 72 92 / .04) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(1 72 92 / .04) 1px, transparent 1px);
    background-size: auto, auto, auto, 34px 34px, 68px 68px, 68px 68px;
    -webkit-mask-image: var(--motif-mask);
    mask-image: var(--motif-mask);
    pointer-events: none;
}
.has-motif::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: -18%;
    right: -12%;
    width: 46rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(5 181 181 / .14), transparent 68%);
    filter: blur(38px);
    pointer-events: none;
}
.has-motif-left::after { right: auto; left: -14%; top: auto; bottom: -22%; }

/* Centred section header rhythm: badge, heading, measured lead. Behind every
   header sits a set of faint orbit arcs — the page's recurring abstract mark,
   echoing the hero ring. Crisp ring gradients, masked to the upper arc only
   so they frame the badge without running through the heading. */
.sec-head {
    position: relative;
    text-align: center;
    max-width: 46rem;
    margin-inline: auto;
}
.sec-head::before {
    content: "";
    position: absolute;
    top: -5.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: min(34rem, 92vw);
    aspect-ratio: 1;
    border-radius: 50%;
    z-index: -1;
    background:
        radial-gradient(closest-side, transparent 56%,
            rgb(5 181 181 / .14) 56.5%, rgb(5 181 181 / .14) 57.2%, transparent 57.8%),
        radial-gradient(closest-side, transparent 72%,
            rgb(5 181 181 / .1) 72.5%, rgb(5 181 181 / .1) 73.2%, transparent 73.8%),
        radial-gradient(closest-side, transparent 88%,
            rgb(5 181 181 / .07) 88.5%, rgb(5 181 181 / .07) 89.2%, transparent 89.8%);
    -webkit-mask-image: linear-gradient(180deg, #000 26%, transparent 60%);
    mask-image: linear-gradient(180deg, #000 26%, transparent 60%);
    pointer-events: none;
}
.section-dark .sec-head::before {
    background:
        radial-gradient(closest-side, transparent 56%,
            rgb(255 255 255 / .13) 56.5%, rgb(255 255 255 / .13) 57.2%, transparent 57.8%),
        radial-gradient(closest-side, transparent 72%,
            rgb(255 255 255 / .09) 72.5%, rgb(255 255 255 / .09) 73.2%, transparent 73.8%),
        radial-gradient(closest-side, transparent 88%,
            rgb(255 255 255 / .06) 88.5%, rgb(255 255 255 / .06) 89.2%, transparent 89.8%);
}
.sec-head .lead { margin-inline: auto; }
.sec-head-wide { max-width: 54rem; }

/* Hairline rule between major sections. */
.divide-top { border-top: 1px solid var(--line); }

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }

/* ── 4. Hero ─────────────────────────────────────────────────────────────── */
/* Dark-first aurora hero: deep ink with drifting teal light and a film-grain
   overlay, handing over to the light body — mirrored by the dark CTA band at
   the close. Every layer is decorative (pseudo-elements / aria-hidden). */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(56% 70% at 78% -10%, rgb(5 181 181 / .32), transparent 60%),
        radial-gradient(44% 60% at 12% 8%, rgb(5 181 181 / .18), transparent 62%),
        radial-gradient(70% 44% at 50% 108%, rgb(5 181 181 / .16), transparent 64%),
        linear-gradient(168deg, var(--ink-deep), var(--ink) 48%, #013a4b 78%, #012f3d);
    border-bottom: 1px solid rgb(255 255 255 / .08);
}
/* Grain overlay — gives the gradients a premium, printed texture. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--grain);
    opacity: .05;
    pointer-events: none;
}
.hero-content { position: relative; z-index: 1; }

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Hairline grid, masked radially so it is densest behind the headline. */
.hero-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgb(255 255 255 / .055) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(255 255 255 / .055) 1px, transparent 1px);
    background-size: 68px 68px;
    -webkit-mask-image: radial-gradient(80% 66% at 50% 24%, #000 22%, transparent 78%);
    mask-image: radial-gradient(80% 66% at 50% 24%, #000 22%, transparent 78%);
}

/* Warm spotlight directly behind the headline. */
.hero-bg::after {
    content: "";
    position: absolute;
    top: -14%;
    left: 50%;
    width: min(74rem, 130%);
    aspect-ratio: 2 / 1;
    transform: translateX(-50%);
    background: radial-gradient(50% 50% at 50% 50%,
                rgb(5 181 181 / .3), rgb(5 181 181 / .12) 45%, transparent 72%);
    filter: blur(28px);
}

/* Twin off-axis aurora blooms — low-opacity, heavily blurred ambient light. */
.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(58px);
}
.hero-orb-a {
    top: -2rem;
    left: -9rem;
    width: 36rem;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgb(5 181 181 / .42), transparent 68%);
}
.hero-orb-b {
    top: 1rem;
    right: -9rem;
    width: 34rem;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgb(5 181 181 / .24), transparent 68%);
}

/* Diagonal light beams: two soft shafts angled across the aurora, breathing
   slowly. Blurred gradients only — they read as stage light, not shapes. */
.hero-beam {
    position: absolute;
    top: -22%;
    height: 140%;
    filter: blur(26px);
    pointer-events: none;
}
.hero-beam-a {
    left: 6%;
    width: 28rem;
    transform: rotate(24deg);
    background: linear-gradient(180deg, transparent 4%,
                rgb(5 181 181 / .18) 32%, rgb(127 224 220 / .1) 56%, transparent 86%);
    animation: beam-breathe 14s ease-in-out infinite alternate;
}
.hero-beam-b {
    right: 10%;
    width: 20rem;
    transform: rotate(-18deg);
    background: linear-gradient(180deg, transparent 6%,
                rgb(5 181 181 / .13) 36%, rgb(127 224 220 / .07) 58%, transparent 88%);
    animation: beam-breathe 19s ease-in-out infinite alternate-reverse;
}
@keyframes beam-breathe { from { opacity: .65; } to { opacity: 1; } }

/* Wide concentric ring behind the headline block. Lower half masked out. */
.hero-ring {
    position: absolute;
    top: -24rem;
    left: 50%;
    width: 68rem;
    aspect-ratio: 1;
    transform: translateX(-50%);
    border-radius: 50%;
    background:
        radial-gradient(closest-side, transparent 76%,
            rgb(5 181 181 / .45) 77%, rgb(5 181 181 / .45) 78.4%, transparent 79.4%),
        radial-gradient(closest-side, transparent 61%,
            rgb(5 181 181 / .24) 62%, rgb(5 181 181 / .24) 63%, transparent 64%);
    -webkit-mask-image: linear-gradient(180deg, #000 34%, transparent 62%);
    mask-image: linear-gradient(180deg, #000 34%, transparent 62%);
}

/* Light-on-dark palette for hero content. */
.hero h1 { color: #fff; }
.hero .lead { color: rgb(255 255 255 / .82); }
.hero .text-meta { color: rgb(255 255 255 / .7); }
.hero .check-mark { color: var(--aqua); }
.hero h1 .accent { color: var(--aqua); }

/* Masked headline rise: each line is clipped by its wrapper and slides up on
   load. CSS-only, so `.no-js` needs no fallback; the reduced-motion block
   collapses the duration and `forwards` lands it on the final state. The small
   padding/negative-margin pair keeps italic descenders from being clipped. */
.line {
    display: block;
    overflow: hidden;
    padding-block: .1em;
    margin-block: -.1em;
}
.line-in {
    display: inline-block;
    transform: translateY(115%);
    animation: line-rise 1s var(--ease-out) forwards;
}
.line:nth-child(2) .line-in { animation-delay: .14s; }
@keyframes line-rise { to { transform: none; } }

/* Hero entrance: the rest of the content fades up with a short stagger. */
@keyframes hero-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}
.hero-content > * {
    animation: hero-rise .7s var(--ease-out) backwards;
}
.hero-content > .badge   { animation-delay: .05s; }
.hero-content > h1       { animation-delay: .1s; }
.hero-content > .lead    { animation-delay: .3s; }
.hero-content > div      { animation-delay: .4s; }
.hero-content > ul       { animation-delay: .5s; }

/* The hero's trust row: keep icon and label side by side inside the flex row. */
.trust-list > li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

/* Floating UI chips over the hero screenshot — decorative echoes of real
   product states, aria-hidden and pointer-transparent. Hidden below lg. */
.shot-anchor {
    position: relative;
    max-width: 62rem;   /* MUST match the `.shot` cap in §14 */
    margin-inline: auto;
}
.float-chip {
    position: absolute;
    z-index: 2;
    display: none;
    align-items: center;
    gap: 9px;
    padding: 11px 16px;
    background: rgb(255 255 255 / .9);
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
    backdrop-filter: blur(10px) saturate(1.3);
    border: 1px solid rgb(255 255 255 / .65);
    border-radius: 14px;
    box-shadow: 0 18px 40px -18px rgb(1 72 92 / .45);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ink);
    pointer-events: none;
    white-space: nowrap;
}
@media (min-width: 1024px) {
    .float-chip { display: inline-flex; }
}
.float-chip .check-mark { width: 1.15em; height: 1.15em; }
.float-chip small {
    display: block;
    font-size: .6875rem;
    font-weight: 500;
    color: var(--ink-3);
    line-height: 1.35;
}
.chip-a { top: -16px; right: -12px; animation: chip-float 7s ease-in-out infinite alternate; }
.chip-b { top: 34%; left: -14px; animation: chip-float 8.5s ease-in-out infinite alternate-reverse; }
@keyframes chip-float { to { transform: translateY(-9px); } }

/* Scroll-driven un-tilt: the hero screenshot starts leaning back in 3D
   perspective and straightens as it scrolls into view. Progressive — browsers
   without scroll-driven animations simply show the flat frame. Animating the
   anchor (not `.shot`) keeps the fill-mode from eating the shot's own hover
   lift, and carries the floating chips through the same motion. */
@supports (animation-timeline: view()) {
    .shot-anchor {
        transform-origin: 50% 100%;
        animation: shot-untilt linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 42%;
    }
    @keyframes shot-untilt {
        from { transform: perspective(1100px) rotateX(16deg) scale(.94); opacity: .55; }
        to   { transform: none; opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
        .shot-anchor { animation: none; }
    }
}

/* The screenshot aura reads as the hero's main light source. */
.hero .aura::before {
    inset: 12% -8% -18% -8%;
    background: radial-gradient(60% 60% at 50% 55%, rgb(5 181 181 / .55), transparent 70%);
}

/* Tighten the decoration on small screens. */
@media (max-width: 640px) {
    .hero-orb-a { width: 20rem; top: -6rem; left: -7rem; }
    .hero-orb-b { width: 18rem; right: -8rem; }
    .hero-beam-a { width: 14rem; left: -4%; }
    .hero-beam-b { width: 10rem; right: -6%; }
    .hero-ring  { top: -16rem; width: 40rem; }
    .hero-bg::before { background-size: 52px 52px; }
}

/* ── 5. Navigation ──────────────────────────────────────────────────────── */
/* Floating frosted pill, inset from the top. No backing strip: it would paint
   a white band over the dark hero. */
.site-nav {
    /* Fixed, not sticky: the bar takes no layout space, so the dark hero
       starts at the document's very first pixel and paints edge-to-edge
       behind the transparent strip — no white sliver can appear above or
       beside the pill at any zoom level or font metric. The hero clears the
       bar with `--nav-h` top padding (see its inline padding-top). */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    padding: 16px 28px 0;
    background: transparent;
    pointer-events: none;   /* the strip is passthrough; the pill re-enables */
}
.site-nav > * { pointer-events: auto; }
.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: var(--shell);
    margin-inline: auto;
    padding: 10px 10px 10px 20px;
    background: #fff;   /* solid fallback where backdrop-filter is missing */
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    box-shadow: 0 6px 24px -14px rgb(1 72 92 / .18);
    transition: box-shadow .3s ease;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .nav-inner {
        background: rgb(255 255 255 / .78);
        -webkit-backdrop-filter: blur(16px) saturate(1.5);
        backdrop-filter: blur(16px) saturate(1.5);
    }
}
.site-nav.is-scrolled .nav-inner { box-shadow: 0 12px 32px -14px rgb(1 72 92 / .3); }

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--ink);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.02em;
    text-decoration: none;
}

.nav-links { display: none; gap: 26px; }
/* MUST match Tailwind's `lg` (1024px), where the hamburger (`lg:hidden`) and
   the desktop actions (`lg:flex`) swap over, and the matchMedia query in
   js/main.js. Any mismatch leaves a width with no navigation at all. */
@media (min-width: 1024px) { .nav-links { display: flex; } }
.nav-links a,
.text-link {
    color: var(--ink);
    font-size: .9375rem;
    font-weight: 500;
    text-decoration: none;
}
.nav-links a:hover, .text-link:hover { color: var(--teal-ink); }

/* Scrollspy underline: grows from the centre on hover, and stays lit on the
   link for the section currently in view (JS toggles `.is-active`). */
.nav-links a {
    position: relative;
    padding: 6px 1px;
}
.nav-links a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--teal);
    transform: translateX(-50%);
    transition: width .25s var(--ease-out);
}
.nav-links a:hover::after,
.nav-links a.is-active::after { width: 100%; }
.nav-links a.is-active { color: var(--teal-ink); }

/* Mobile panel: a dropped card under the pill. */
#mobile-nav > nav {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    margin-top: 10px;
    box-shadow: 0 24px 60px -30px rgb(1 72 92 / .45);
    animation: panel-drop .3s var(--ease-out) both;
}
@keyframes panel-drop {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}

/* ── 6. Badges (glass split pill) ───────────────────────────────────────── */
/* Gradient teal chip + quiet label in one rounded pill. On dark grounds the
   pill goes glassy. */
.badge {
    display: inline-flex;
    align-items: stretch;
    background: rgb(255 255 255 / .8);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    overflow: hidden;
    box-shadow: 0 2px 12px -6px rgb(1 72 92 / .16);
}
.badge > b {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 15px;
    background: linear-gradient(120deg, var(--teal), #08c9c2);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.badge > span {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    color: var(--ink-2);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .02em;
    white-space: nowrap;
}
/* Four-point mark in the badge's teal chip. Sized in `em` so it tracks the
   badge font-size, including the smaller mobile variant. */
.badge-mark {
    width: 1.2em;
    height: 1.2em;
    flex: none;
}
/* Glass variant on dark grounds. */
.hero .badge,
.section-dark .badge {
    background: rgb(255 255 255 / .07);
    border-color: rgb(255 255 255 / .18);
    box-shadow: none;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.hero .badge > span,
.section-dark .badge > span { color: rgb(255 255 255 / .85); }

/* Inline confirmation check. `flex:none` keeps it from squashing in rows. */
.check-mark {
    width: 1.05em;
    height: 1.05em;
    flex: none;
    color: var(--teal-ink);
    vertical-align: -.16em;
}

/* ── 7. Buttons ─────────────────────────────────────────────────────────── */
/* Pill with a circular teal icon chip. On hover the pill lifts and the chip
   rotates its ↗ arrow toward → — one small, consistent micro-interaction. */
.button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 6px 6px 6px 22px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--ink), #026075);
    color: #fff;
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease,
                background-color .2s ease, border-color .2s ease, color .2s ease;
}
.button > span:first-child { padding-block: 8px; }
.button > .btn-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-left: 16px;
    border-radius: 50%;
    background: var(--teal);
    color: #fff;
    font-size: .9375rem;
    flex: none;
    transition: transform .35s var(--ease-out), background-color .2s ease;
}
.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -14px rgb(1 72 92 / .55);
}
.button:hover > .btn-icon {
    transform: rotate(45deg);   /* ↗ becomes → */
    background: var(--teal-dark);
}

/* Sheen sweep on the primary — one shot per hover, never reversed. */
.button:not(.ghost)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -45%;
    width: 35%;
    background: linear-gradient(105deg, transparent, rgb(255 255 255 / .28), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
}
.button:not(.ghost):hover::after { animation: btn-sheen .7s ease; }
@keyframes btn-sheen { to { transform: skewX(-20deg) translateX(520%); } }

/* Outlined variant. */
.button.ghost {
    padding: 12px 22px;
    background: rgb(255 255 255 / .92);
    color: var(--ink);
    border-color: var(--line);
}
.button.ghost:hover {
    border-color: var(--teal);
    color: var(--teal-ink);
    box-shadow: 0 10px 24px -16px rgb(1 72 92 / .3);
}
.button.ghost > .btn-icon {
    width: auto;
    height: auto;
    margin-left: 12px;
    border-radius: 0;
    background: none;
    color: var(--teal);
}
.button.ghost:hover > .btn-icon { transform: translateX(3px); }

/* Hero variants: the primary becomes a white pill (the ink default would
   vanish on this ground) and the ghost goes glassy. */
.hero .button:not(.ghost) { background: #fff; color: var(--ink); }
.hero .button:not(.ghost):hover { background: #f2fbfa; }
.hero .button.ghost {
    background: rgb(255 255 255 / .06);
    color: #fff;
    border-color: rgb(255 255 255 / .3);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.hero .button.ghost:hover { border-color: var(--aqua); color: var(--aqua); }
.hero .button.ghost > .btn-icon { color: var(--aqua); }

/* Full-width form submit keeps the icon chip pinned right. */
.button.block { display: flex; justify-content: space-between; width: 100%; }

.button[disabled] { opacity: .6; cursor: progress; }

/* ── 8. Cards, tiles, panels ────────────────────────────────────────────── */
.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
}
/* Soft card with a faint top-down tint. */
.card-soft {
    background: linear-gradient(#fff, #f7fbfd);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow-card);
}
/* Hover: physical lift plus a teal glow ring, and the icon tile answers with
   a small pop so the card feels like one object responding. */
.card-hover {
    transition: border-color .25s ease, box-shadow .3s ease, transform .3s var(--ease-out);
}
.card-hover:hover {
    transform: translateY(-5px);
    border-color: rgb(5 181 181 / .45);
    box-shadow: 0 20px 44px -24px rgb(1 72 92 / .35),
                0 0 0 4px rgb(5 181 181 / .07);
}

/* Rounded pale-blue icon tile. */
.tile {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(140deg, var(--tile), #d5f0f4);
    color: var(--ink);
    flex: none;
    transition: transform .3s var(--ease-out);
}
.tile-teal {
    background: linear-gradient(140deg, var(--teal), #08c9c2);
    color: #fff;
}
.card-hover:hover .tile { transform: translateY(-2px) scale(1.07); }

/* Flat soft panel (notes, guardrail explainer). */
.panel {
    background: var(--panel);
    border-radius: var(--radius);
    padding: 22px 26px;
}

/* Dashed block marking a proof point that needs client sign-off. */
.placeholder {
    padding: 20px 24px;
    border: 1px dashed #b6c9d2;
    border-radius: var(--radius);
    background: var(--page);
    color: var(--ink-3);
    font-size: .875rem;
}

/* Star row for testimonials. */
.stars { color: var(--star); letter-spacing: 3px; font-size: 1rem; }

/* ── 9. Integrations strip + marquee ────────────────────────────────────── */
.src-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 14px;
    max-width: 980px;
    margin-inline: auto;
    padding: 0;
    list-style: none;
}
.src-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-color: var(--line);
    box-shadow: 0 12px 28px -20px rgb(1 72 92 / .3);
}
.src-tile { width: 42px; height: 42px; border-radius: 12px; }
.src-logo { width: 24px; height: 24px; object-fit: contain; }
.src-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.src-name {
    color: var(--ink);
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: -.01em;
}
.src-kind { color: var(--ink-3); font-size: .75rem; line-height: 1.4; }

/* Audience marquee: the four labels drift in an infinite, edge-faded loop.
   The second group is an aria-hidden duplicate; `translateX(-50%)` of the
   track is seamless because both groups are identical, including the trailing
   gap carried as padding. Pauses on hover; reduced-motion stops it (§19). */
.src-who {
    max-width: 980px;
    margin-inline: auto;
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
    padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
    border-top: 1px solid var(--line);
    text-align: center;
}
.marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 28s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee-group {
    display: flex;
    align-items: center;
    gap: clamp(3rem, 7vw, 5.5rem);
    padding-right: clamp(3rem, 7vw, 5.5rem);
}
.who-item {
    display: flex;
    flex-direction: column;
    line-height: 1.45;
    text-align: left;
    white-space: nowrap;
}
.who-over {
    color: var(--ink-3);
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .1em;
}
.who-item > b {
    color: var(--ink);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
}
.src-disclaimer { margin-top: 18px; }

/* ── 10. Steps (how it works) ───────────────────────────────────────────── */
/* Dashed connector line running behind the four cards at badge height —
   visible only in the gaps, so the sequence reads as one linked flow. The
   cards themselves are positioned (`.step-card`), so they paint above it. */
@media (min-width: 1280px) {
    .steps { position: relative; }
    .steps::before {
        content: "";
        position: absolute;
        top: 47px;
        left: 5%;
        right: 5%;
        height: 2px;
        background-image: linear-gradient(90deg, var(--teal) 0 8px, transparent 8px 16px);
        background-size: 16px 2px;
        opacity: .35;
        pointer-events: none;
    }
}

/* Each step card carries an oversized ghost numeral plus a quarter-arc. The
   digit comes from an inline `--n` custom property, so the number is not
   duplicated in the DOM — the watermark is decorative only. */
.step-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--radius);
    transition: border-color .25s ease, box-shadow .3s ease, transform .3s var(--ease-out);
}
.step-card > * { position: relative; z-index: 1; }

.step-card::before {
    content: var(--n, "");
    position: absolute;
    z-index: 0;
    top: -.12em;
    right: .04em;
    font-size: 5.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--ink);
    opacity: .07;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

.step-card::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: -2.75rem;
    right: -2.75rem;
    width: 8rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(closest-side, transparent 62%,
                rgb(5 181 181 / .16) 63%, rgb(5 181 181 / .16) 72%, transparent 73%);
    pointer-events: none;
}

.step-badge { box-shadow: 0 8px 18px -10px rgb(5 181 181 / .65); }

.step-card::before,
.step-card::after { transition: opacity .25s ease, transform .25s ease; }
.step-card:hover::before { opacity: .085; transform: translateY(2px); }
.step-card:hover::after  { transform: scale(1.06); }

@media (max-width: 1279px) {
    .step-card::before { font-size: 4.75rem; }
}

/* ── 11. Numbered benefit list ──────────────────────────────────────────── */
/* First row active (teal serif number + underline); the rest promote their
   number on hover. Every row stays fully readable — six equally relevant
   benefits must not depend on hover to be legible. */
.num-list { display: grid; }
.num-list > * {
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
}
.num-list h3 {
    display: flex;
    gap: 10px;
    font-size: 1.3125rem;
    font-weight: 600;
    letter-spacing: -.012em;
    color: var(--ink);
}
/* `--teal-ink` rather than the brighter `--teal`, which measures 2.3:1
   against these light grounds. */
.num-list h3 > i {
    color: var(--teal-ink);
    font-style: normal;
    font-weight: 700;
}
.num-list p { margin-top: 8px; color: var(--ink-2); font-size: .9375rem; line-height: 1.65; }

.num-list > * + * h3 > i { color: var(--ink-3); transition: color .2s ease; }
.num-list > * + *:hover h3 > i { color: var(--teal-ink); }

/* The active row carries a short underline. */
.num-list > *:first-child { position: relative; }
.num-list > *:first-child::after {
    content: "";
    position: absolute;
    left: 0; bottom: -1px;
    width: 136px; height: 2px;
    background: var(--ink);
}

/* ── 12. Bento security grid ────────────────────────────────────────────── */
/* Varied card widths break the uniform block; one dark feature card anchors
   the composition. Mobile stays a simple stack. */
.bento-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .bento-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) {
    .bento-grid { grid-template-columns: repeat(6, 1fr); }
    .bento-grid > * { grid-column: span 2; }
    .bento-grid > .bento-wide { grid-column: span 3; }
}
/* Selector list carries the extra specificity needed to beat
   `.section-tint .card-soft { background:#fff }` — without it the dark card
   renders white and its white text disappears. */
.bento-dark,
.section-tint .card-soft.bento-dark {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(80% 100% at 100% 0%, rgb(5 181 181 / .3), transparent 60%),
        linear-gradient(135deg, var(--ink), #0a5a70);
    border-color: transparent;
}
.bento-dark h3 { color: #fff; }
.bento-dark p { color: rgb(255 255 255 / .82); }
.bento-dark .tile { background: rgb(255 255 255 / .16); color: #fff; }
.bento-dark.card-hover:hover { border-color: transparent; }

/* ── 13. FAQ accordion ──────────────────────────────────────────────────── */
.faq { display: grid; gap: 12px; }
.faq details {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 8px 24px;
    transition: border-color .25s ease, box-shadow .3s ease;
}
.faq details[open] {
    border-color: rgb(5 181 181 / .4);
    box-shadow: 0 16px 40px -28px rgb(1 72 92 / .35);
}
.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-block: 14px;
    color: var(--ink);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.01em;
    cursor: pointer;
    list-style: none;
    transition: color .2s ease;
}
.faq summary:hover { color: var(--teal-ink); }
.faq summary::-webkit-details-marker { display: none; }
/* + indicator in a circular chip; rotates to × …no — to + at 45°, reading as
   "close". Driven purely by the open state. */
.faq summary::after {
    content: "+";
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--panel);
    color: var(--ink);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
    flex: none;
    transition: transform .3s var(--ease-out), background-color .2s ease, color .2s ease;
}
.faq details[open] summary::after {
    content: "+";
    transform: rotate(45deg);
    background: var(--teal);
    color: #fff;
}
.faq details > div {
    padding-bottom: 18px;
    color: var(--ink-2);
    font-size: .9375rem;
    line-height: 1.7;
}
.faq details[open] > div { animation: faq-open .32s ease both; }
@keyframes faq-open {
    from { opacity: 0; transform: translateY(-6px); }
}
/* Smooth height animation where the platform supports it (interpolate-size +
   ::details-content). Everywhere else the fade above stands alone. */
@supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .faq details::details-content {
        block-size: 0;
        overflow: clip;
        transition: block-size .4s var(--ease-out), content-visibility .4s allow-discrete;
    }
    .faq details[open]::details-content { block-size: auto; }
}

/* ── 14. Product screenshot frames ──────────────────────────────────────── */
.shot {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 40px 80px -50px rgb(1 72 92 / .45);
    /* Cap the frame instead of letting it fill `.shell` — on wide monitors the
       1760px source shots would otherwise dominate their sections. */
    max-width: 62rem;
    margin-inline: auto;
    transition: box-shadow .3s ease, transform .3s var(--ease-out);
}
.shot:hover {
    transform: translateY(-4px);
    box-shadow: 0 48px 90px -48px rgb(1 72 92 / .55);
}
.shot img { display: block; width: 100%; height: auto; }
/* Browser chrome bar with macOS traffic lights. */
.shot-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px;
    background: linear-gradient(#fbfdfe, #f2f7fa);
    border-bottom: 1px solid var(--line);
}
.shot-dot { width: 10px; height: 10px; border-radius: 50%; }
.shot-dot:nth-child(1) { background: #ff5f57; }
.shot-dot:nth-child(2) { background: #febc2e; }
.shot-dot:nth-child(3) { background: #28c840; }
.shot-cap { margin-left: 6px; font-size: .8125rem; font-weight: 500; color: var(--ink-3); }
.shot-note {
    padding: 13px 18px;
    border-top: 1px solid var(--line);
    font-size: .8125rem;
    color: var(--ink-3);
}

/* Teal aura behind the hero screenshot. */
.aura { position: relative; }
.aura::before {
    content: "";
    position: absolute;
    inset: 22% -6% -14% -6%;
    background: radial-gradient(60% 60% at 50% 60%, rgb(5 181 181 / .5), transparent 72%);
    filter: blur(52px);
    z-index: -1;
    animation: aura-pulse 9s ease-in-out infinite alternate;
}
@keyframes aura-pulse { from { opacity: .72; } to { opacity: 1; } }

/* ── 15. Forms ──────────────────────────────────────────────────────────── */
.field-label { display: block; font-size: .875rem; font-weight: 600; color: var(--ink); }
.field {
    width: 100%;
    margin-top: 7px;
    padding: 13px 16px;
    border: 1px solid #d7e3ea;
    border-radius: 13px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: .9375rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.field:hover { border-color: #b9cdd7; }
.field:focus-visible {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 4px rgb(5 181 181 / .14);
}
/* Error styling keys off aria-invalid so visuals and semantics stay in sync. */
.field[aria-invalid="true"] { border-color: var(--danger); background: #fdf4f3; }
.field-error { margin-top: 7px; font-size: .8125rem; font-weight: 600; color: var(--danger); }

/* ── 16. Dark CTA band ──────────────────────────────────────────────────── */
/* Sits between the light FAQ and light footer so the close of the page gets
   one deliberate moment of contrast, mirroring the hero. */
.section-dark {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(58% 90% at 82% 0%, rgb(5 181 181 / .28), transparent 62%),
        radial-gradient(50% 80% at 8% 100%, rgb(5 181 181 / .16), transparent 60%),
        linear-gradient(160deg, #013a4b, var(--ink) 55%, var(--ink-deep));
    border-bottom: 1px solid rgb(255 255 255 / .08);
}
/* Faint knocked-out grid, two crisp corner rings, and the same film grain as
   the hero — the dark band closes the page with the hero's own geometry. */
.section-dark::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        radial-gradient(circle 26rem at 88% -8%,
            transparent 70%, rgb(255 255 255 / .1) 70.5%, rgb(255 255 255 / .1) 71.3%, transparent 71.9%),
        radial-gradient(circle 26rem at 88% -8%,
            transparent 88%, rgb(255 255 255 / .07) 88.5%, rgb(255 255 255 / .07) 89.3%, transparent 89.9%),
        linear-gradient(to right, rgb(255 255 255 / .045) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(255 255 255 / .045) 1px, transparent 1px);
    background-size: auto, auto, 68px 68px, 68px 68px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%);
    mask-image: linear-gradient(180deg, #000, transparent 75%);
    pointer-events: none;
}
.section-dark::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--grain);
    opacity: .05;
    pointer-events: none;
}
.section-dark > * { position: relative; z-index: 1; }
.section-dark h2 { color: #fff; }
.section-dark h2 .accent { color: var(--aqua); }
.section-dark .lead { color: rgb(255 255 255 / .78); }
.section-dark .text-link.teal-ink { color: var(--aqua); }
.section-dark .card {
    border-color: transparent;
    box-shadow: 0 34px 90px -34px rgb(0 0 0 / .55);
}

/* ── 17. Footer + wordmark ──────────────────────────────────────────────── */
/* Dark professional close: the footer continues the CTA band's ink gradient,
   so the page ends the way it opened — deep ink with teal light. A hairline
   separates the two bands; a soft teal bloom rises behind the wordmark. */
.site-footer {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(180deg, var(--ink-deep), #013243 60%, #01384a);
    border-top: 1px solid rgb(255 255 255 / .1);
    color: rgb(255 255 255 / .72);
}
/* Soft teal bloom behind the wordmark — depth without the loud wash. */
.site-footer::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -46%;
    transform: translateX(-50%);
    width: 90rem;
    aspect-ratio: 2 / 1;
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, rgb(5 181 181 / .28), transparent 70%);
    filter: blur(46px);
    pointer-events: none;
    z-index: 0;
}
/* The same film grain as the hero and CTA band. */
.site-footer::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--grain);
    opacity: .05;
    pointer-events: none;
}
.footer-inner { position: relative; z-index: 1; }

/* Column headings: quiet uppercase labels. */
.footer-head {
    color: rgb(255 255 255 / .55);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* Footer link + meta palette. Links brighten to aqua on hover. */
.site-footer .text-link { color: rgb(255 255 255 / .68); }
.site-footer .text-link:hover { color: var(--aqua); }
.site-footer .text-meta { color: rgb(255 255 255 / .45); }

/* The brand logo is drawn in ink for light grounds; knock it out to white
   here so it stays legible on the dark footer. */
.site-footer .brand img { filter: brightness(0) invert(1); opacity: .95; }

/* Bottom bar hairline. */
.footer-bottom { border-top: 1px solid rgb(255 255 255 / .1); }

/* Oversized wordmark bleeding off the bottom edge — a quiet watermark now,
   fading into the ink rather than sitting on a bright wash. */
.wordmark {
    position: relative;
    z-index: 1;
    margin: 30px 0 -3.2vw;
    font-size: clamp(3rem, 12.2vw, 12rem);
    font-weight: 700;
    line-height: .82;
    letter-spacing: -.02em;
    text-align: center;
    white-space: nowrap;
    user-select: none;
    color: rgb(255 255 255 / .1);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .wordmark {
        background: linear-gradient(180deg, rgb(255 255 255 / .18), rgb(255 255 255 / .03));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
}

/* Glass social buttons on the dark ground. */
.social {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgb(255 255 255 / .08);
    border: 1px solid rgb(255 255 255 / .18);
    color: #fff;
    text-decoration: none;
    flex: none;
    transition: background-color .2s ease, border-color .2s ease,
                transform .25s var(--ease-out);
}
.social:hover {
    background: var(--teal-dark);
    border-color: transparent;
    transform: translateY(-2px);
}

/* ── 18. Motion + reveal system ─────────────────────────────────────────── */
/* Additive: JS adds .is-in. `.no-js` keeps everything visible if JS fails.
   `data-rv` picks the entrance direction; default is a blur-softened rise. */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(6px);
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out),
                filter .7s var(--ease-out);
}
.reveal[data-rv="left"]  { transform: translateX(-28px); }
.reveal[data-rv="right"] { transform: translateX(28px); }
.reveal[data-rv="scale"] { transform: scale(.93); }
.reveal.is-in { opacity: 1; transform: none; filter: none; }
.no-js .reveal { opacity: 1; transform: none; filter: none; }

/* Scroll progress — thin teal line above the nav. JS drives `scaleX`;
   without JS the bar is hidden entirely. */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 60;
    background: linear-gradient(90deg, var(--teal), var(--aqua));
    transform-origin: 0 50%;
    transform: scaleX(0);
    pointer-events: none;
}
.no-js .scroll-progress { display: none; }

/* Accent phrases in display headings get a slow tonal shimmer. Colours are
   the existing teal family only; the 9s period keeps it ambient. Static
   gradient text when animations are disabled. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    h1 .accent, h2 .accent {
        background-image: linear-gradient(90deg,
            var(--teal) 0%, var(--teal-dark) 30%, var(--teal) 55%,
            var(--teal-ink) 80%, var(--teal) 100%);
        background-size: 220% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        animation: accent-sheen 9s linear infinite;
    }
    /* Brighter stops so the accent carries on dark grounds. */
    .hero h1 .accent,
    .section-dark h2 .accent {
        background-image: linear-gradient(90deg,
            var(--aqua) 0%, var(--teal) 30%, var(--aqua) 55%,
            var(--teal) 80%, var(--aqua) 100%);
    }
}
@keyframes accent-sheen { to { background-position: -220% 0; } }

/* Hero ambience: the orbs drift slowly. Long periods keep it subliminal. */
.hero-orb-a { animation: orb-a 16s ease-in-out infinite alternate; }
.hero-orb-b { animation: orb-b 21s ease-in-out infinite alternate; }
@keyframes orb-a { to { transform: translate(26px, 18px) scale(1.06); } }
@keyframes orb-b { to { transform: translate(-24px, 14px) scale(1.05); } }

@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin .8s linear infinite; }

/* ── 19. Accessibility ──────────────────────────────────────────────────── */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--teal);
    outline-offset: 2px;
    border-radius: 8px;
}

.skip { position: absolute; left: -9999px; }
.skip:focus {
    left: 1rem; top: .75rem; z-index: 100;
    padding: .6rem 1rem;
    background: #fff;
    border: 2px solid var(--teal);
    border-radius: 10px;
}

summary { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
    /* Timeline-driven and looping animations aren't neutralised by a duration
       override — stop them outright. */
    .marquee-track { animation: none; }
    .step-card::before,
    .step-card::after { transition: none; }
    .step-card:hover::before { transform: none; }
    .step-card:hover::after  { transform: none; }
}

/* ── 20. Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    /* No hover on touch, so give every benefit row its full accent number. */
    .num-list > * + * h3 > i { color: var(--teal-ink); }
}

@media (max-width: 700px) {
    :root { --nav-h: 76px; }
    .site-nav { padding: 12px 16px 0; }
    .shell { padding-inline: 18px; }
    /* Keep the split pill on one line; shrink instead of wrapping. */
    .badge { max-width: 100%; }
    .badge > b { padding: 7px 11px; font-size: .625rem; }
    .badge > span { padding: 7px 11px; font-size: .6875rem; min-width: 0; white-space: normal; line-height: 1.35; }
    .card, .card-soft { padding: 20px; }
    .panel { padding: 18px 20px; }
    .faq details { padding: 6px 18px; }
    .num-list > *:first-child::after { width: 96px; }
    .button { font-size: .875rem; }
    .button > .btn-icon { width: 32px; height: 32px; margin-left: 12px; }
}

/* ── 21. Print ──────────────────────────────────────────────────────────── */
@media print {
    .site-nav, .skip, .wordmark, .scroll-progress, .float-chip, .marquee { display: none; }
    .shot { box-shadow: none; }
    .site-footer::before, .site-footer::after { display: none; }
    /* Browsers drop backgrounds when printing; the dark sections' light text
       would otherwise land white-on-white on paper. */
    .hero, .section-dark, .bento-dark, .site-footer { background: none; }
    .hero h1, .section-dark h2, .bento-dark h3, .footer-head { color: var(--ink); }
    .hero .sim-brief .h-card { color: var(--ink); }
    .hero .sim-brief p { color: var(--ink-2); }
    .hero .sim-brief > .card-soft { background: #fff; border-color: var(--line); }
    .hero .lead, .hero .text-meta,
    .section-dark .lead, .bento-dark p { color: var(--ink-2); }
    .site-footer { color: var(--ink-2); }
    .site-footer .text-link { color: var(--ink); }
    .site-footer .text-meta { color: var(--ink-3); }
    .site-footer .brand img { filter: none; }
    .hero h1 .accent, h1 .accent, h2 .accent {
        background: none;
        color: var(--teal-ink);
        -webkit-text-fill-color: currentColor;
    }
    .line-in { transform: none; animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   22. VOICE AGENT SIMULATION  (index.html #simulation)
   ---------------------------------------------------------------------------
   A four-step guided mock: phone entry → dialing → live lease workspace
   → call result. Every class here is scoped to the simulation page and reuses
   the tokens above, so the palette/radius stay in one place.

   MOCK NOTICE: this is a demonstration surface. No call is placed, and the
   lease, ledger, and conversation shown are synthetic fixtures — see the
   SIM_FIXTURE block in js/simulation.js.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Step rail ──────────────────────────────────────────────────────────── */
/* Horizontal progress for the four simulation steps. The <ol> carries
   aria-label; each item's state is conveyed by aria-current plus text, not
   colour alone (WCAG 1.4.1). */
/* Sticks under the fixed nav so progress stays visible through all four
   steps — the walkthrough is taller than one viewport. */
.sim-rail {
    position: sticky;
    top: calc(var(--nav-h) - 18px);
    z-index: 20;
    margin-inline: -18px;
    padding: 10px 18px;
    background: rgb(252 253 255 / .88);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    align-items: center;
    justify-content: center;
    list-style: none;
    padding: 0;
}
.sim-rail li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 15px 8px 9px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: #fff;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ink-3);
    transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.sim-rail li > i {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 50%;
    background: var(--panel);
    color: var(--ink-3);
    font-size: .6875rem;
    font-style: normal;
    font-weight: 700;
}
.sim-rail li[data-state="done"] { color: var(--teal-ink); border-color: #bfe9e7; }
.sim-rail li[data-state="done"] > i { background: var(--teal); color: #fff; }
.sim-rail li[aria-current="step"] {
    color: var(--ink);
    border-color: var(--teal);
    background: #f2fbfb;
    box-shadow: 0 0 0 3px rgb(5 181 181 / .12);
}
.sim-rail li[aria-current="step"] > i { background: var(--ink); color: #fff; }

/* The rail already provides the visual gap above each step, so the step
   sections don't need their own full top padding on top of it. */
.sim-step { padding-top: clamp(1rem, 2vw, 1.75rem); }

/* ── Step panels ────────────────────────────────────────────────────────── */
/* Only one step is in the DOM flow at a time; the rest carry [hidden].
   Toggled via el.hidden in js/simulation.js, never inline display. */
.sim-step[hidden] { display: none; }
.sim-step {
    animation: sim-step-in .45s var(--ease-out) both;
}
@keyframes sim-step-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

/* ── Step 1 brief ───────────────────────────────────────────────────────── */
/* The three "what the walkthrough covers" cards sit in one row under the
   form, icon beside text, so step 1 stays about one screen tall instead of a
   stacked column that outran the form. */
.sim-brief {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 720px) {
    .sim-brief { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sim-brief > .card-soft { display: flex; gap: 14px; align-items: flex-start; padding: 18px; min-width: 0; }
.sim-brief .tile { width: 40px; height: 40px; border-radius: 12px; }
.sim-brief .tile svg { width: 18px; height: 18px; }
.sim-brief .h-card { font-size: 1rem; }
.sim-brief p { line-height: 1.6; color: var(--ink-2); }
/* In the hero the row sits on the dark aurora ground, so the cards go glassy
   and the text inverts; the teal icon tile already reads well on dark. */
.hero .sim-brief { text-align: left; }
.hero .sim-brief > .card-soft {
    background: rgb(255 255 255 / .07);
    border-color: rgb(255 255 255 / .16);
    box-shadow: none;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.hero .sim-brief .h-card { color: #fff; }
.hero .sim-brief p { color: rgb(255 255 255 / .78); }

/* ── Dialer / call state ────────────────────────────────────────────────── */
.sim-dialer {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 4px;
}
/* Concentric pulse rings behind the handset while the call connects. */
.sim-pulse {
    position: relative;
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: var(--teal);
    color: #fff;
    box-shadow: 0 18px 40px -18px rgb(5 181 181 / .8);
}
.sim-pulse::before,
.sim-pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--teal);
    animation: sim-ping 2.2s var(--ease-out) infinite;
}
.sim-pulse::after { animation-delay: 1.1s; }
@keyframes sim-ping {
    from { opacity: .7; transform: scale(1); }
    to   { opacity: 0;  transform: scale(2.1); }
}
.sim-pulse svg { width: 42px; height: 42px; }
/* Connected state: rings stop, colour shifts to ink so "live" reads as calm. */
.sim-pulse[data-state="live"] { background: var(--ink); box-shadow: 0 18px 40px -18px rgb(1 72 92 / .7); }
.sim-pulse[data-state="live"]::before,
.sim-pulse[data-state="live"]::after { animation: none; opacity: 0; }

/* Monospaced elapsed-call timer — tabular figures stop the width jitter. */
.sim-timer {
    font-variant-numeric: tabular-nums;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ink);
}

/* ── Workspace layout ───────────────────────────────────────────────────── */
/* Lease profile (left) beside the live transcript (right). Stacks under
   1100px so the transcript is never squeezed into an unreadable column. */
.sim-workspace {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr);
}
/* A grid column's default `auto` floor is its min-content width, so a wide
   child (the two-column responsible-party block, the ledger's min-width) can
   push the whole column past the viewport instead of shrinking. The workspace
   guards its own tracks with minmax(0, …); its immediate child grids need the
   same floor, or the page scrolls sideways on narrow screens. */
.sim-workspace > .grid { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.sim-workspace > .grid > * { min-width: 0; }
@media (min-width: 1100px) {
    .sim-workspace { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; }
    .sim-sticky { position: sticky; top: calc(var(--nav-h) + 12px); }
}

/* ── Lease profile header ───────────────────────────────────────────────── */
.sim-avatar {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex: none;
    border-radius: 15px;
    background: linear-gradient(150deg, var(--teal), var(--ink));
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: .02em;
}

/* Status pills. Semantic variants, each paired with a text label in markup. */
.sim-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--ink-2);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.sim-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: currentColor;
}
.sim-pill.is-live    { background: #eafaf9; border-color: #bfe9e7; color: #00726f; }
.sim-pill.is-warn    { background: #fff6e8; border-color: #f6ddb4; color: #8a5a08; }
.sim-pill.is-danger  { background: #fdf1ef; border-color: #f3ccc6; color: #9c2f22; }
.sim-pill.is-neutral { background: var(--panel); border-color: var(--line); color: var(--ink-2); }
/* The live dot breathes only while the call is connected. */
.sim-pill.is-live::before { animation: sim-blink 1.6s ease-in-out infinite; }
@keyframes sim-blink { 50% { opacity: .25; } }

/* ── Stat strip ─────────────────────────────────────────────────────────── */
.sim-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.sim-stat { background: #fff; padding: 14px 16px; }
.sim-stat dt { font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.sim-stat dd { margin: 5px 0 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -.015em; color: var(--ink); font-variant-numeric: tabular-nums; }
.sim-stat dd small { display: block; font-size: .75rem; font-weight: 500; color: var(--ink-3); letter-spacing: 0; margin-top: 2px; }
.sim-stat.is-due dd { color: var(--danger); }

/* ── Ledger table ───────────────────────────────────────────────────────── */
/* Wrapped in .scroll-x by the markup so narrow viewports scroll the table,
   not the page (README: no horizontal page scroll at any breakpoint). */
.sim-table { width: 100%; border-collapse: collapse; font-size: .8125rem; min-width: 460px; }
.sim-table caption { text-align: left; padding-bottom: 10px; font-size: .8125rem; color: var(--ink-3); }
.sim-table th, .sim-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line-soft); }
.sim-table thead th {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.sim-table tbody tr:last-child td { border-bottom: 0; }
.sim-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sim-table .charge { color: var(--ink); }
.sim-table .credit { color: #00726f; }
.sim-table tfoot td {
    border-top: 1px solid var(--line);
    border-bottom: 0;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* ── Transcript ─────────────────────────────────────────────────────────── */
.sim-transcript {
    display: grid;
    gap: 12px;
    max-height: 460px;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    overscroll-behavior: contain;
}
/* The post-call recap holds the whole conversation, and a real call can run
   to dozens of turns. Unbounded, it stretched step 4 (and its sticky column)
   to several screens with the closing note and buttons pushed off the end —
   so it scrolls inside a viewport-sized box instead. The subtraction leaves
   room for the nav, the dispute panel above the card, and the card header. */
.sim-transcript.is-full {
    max-height: clamp(22rem, calc(100vh - var(--nav-h) - 16rem), 52rem);
}
.sim-turn { display: flex; gap: 10px; align-items: flex-start; animation: sim-turn-in .4s var(--ease-out) both; }
@keyframes sim-turn-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.sim-turn > i {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 10px;
    font-size: .625rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .03em;
}
.sim-bubble {
    padding: 11px 14px;
    border-radius: 14px;
    font-size: .875rem;
    line-height: 1.6;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;   /* a pasted link or long token must wrap, not widen the column */
}
.sim-turn[data-who="agent"] > i { background: var(--tile); color: var(--teal-ink); }
.sim-turn[data-who="agent"] .sim-bubble { background: var(--panel); color: var(--ink-2); border-top-left-radius: 5px; }
.sim-turn[data-who="tenant"] { flex-direction: row-reverse; }
.sim-turn[data-who="tenant"] > i { background: var(--ink); color: #fff; }
.sim-turn[data-who="tenant"] .sim-bubble { background: #fff; border: 1px solid var(--line); color: var(--ink); border-top-right-radius: 5px; }
.sim-turn .sim-who { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; }
.sim-turn[data-who="tenant"] .sim-bubble { text-align: left; }

/* Three-dot "agent is speaking" indicator. */
.sim-typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.sim-typing span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ink-3);
    animation: sim-dot 1.2s ease-in-out infinite;
}
.sim-typing span:nth-child(2) { animation-delay: .18s; }
.sim-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes sim-dot { 0%, 60%, 100% { opacity: .28; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* ── Pending collections list ───────────────────────────────────────────── */
.sim-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.sim-list > li {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
}
.sim-list .sim-amt { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }

/* ── Result screen ──────────────────────────────────────────────────────── */
.sim-outcome {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: var(--radius);
    background: linear-gradient(140deg, #f2fbfb, #fff);
    border: 1px solid #bfe9e7;
}
.sim-outcome .tile { flex: none; }
/* Key/value grid for the extracted call facts. */
.sim-kv { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.sim-kv > div { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between; align-items: baseline; background: #fff; padding: 13px 16px; }
.sim-kv dt { font-size: .8125rem; color: var(--ink-3); font-weight: 500; }
.sim-kv dd { margin: 0; font-size: .875rem; font-weight: 600; color: var(--ink); text-align: right; }

/* Horizontal confidence/score meter. Value is always printed as text beside
   the bar, so the meter is never the sole carrier of meaning. */
.sim-meter { height: 7px; border-radius: 99px; background: var(--panel); overflow: hidden; }
.sim-meter > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--teal), var(--aqua)); }

/* ── Account console header ─────────────────────────────────────────────── */
/* The operator-style banner that opens the live account view: status chip,
   lease identity, contact line, advisory toggles, record actions, and the
   position pager. Mirrors the workspace an agent-supervising manager sees. */
.sim-console {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    overflow: hidden;
}
.sim-console-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px 20px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
}
/* Identity block grows; the action clusters keep their natural width. */
.sim-console-id { flex: 1 1 15rem; min-width: 0; }
.sim-console-id h2,
.sim-console-id h3 { font-size: 1.25rem; letter-spacing: -.015em; margin-top: 6px; }
.sim-console-addr { margin: 2px 0 0; font-size: .8125rem; color: var(--ink-3); }
.sim-console-who { margin: 6px 0 0; font-size: .8125rem; color: var(--ink-2); }
.sim-console-who b { color: var(--ink); }

/* Status chip. `is-notice` is the amber "Active — Notice Given" lease state. */
.sim-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid #f6ddb4;
    background: #fff8ec;
    color: #8a5a08;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}
.sim-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* Advisory toggles (payment extension, legal notice). Read-only in this mock:
   they are rendered disabled so the demo never implies a live control. */
.sim-toggles {
    display: grid;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--page);
    flex: 0 1 auto;
}
.sim-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ink-2);
}
.sim-toggle > span { display: inline-flex; align-items: center; gap: 7px; }
.sim-toggle svg { width: 15px; height: 15px; color: var(--ink-3); flex: none; }
/* Switch is a decorative representation of a real control, so it is inert. */
.sim-switch {
    width: 38px;
    height: 21px;
    flex: none;
    border-radius: var(--radius-pill);
    background: var(--panel);
    border: 1px solid var(--line);
    position: relative;
}
.sim-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgb(1 72 92 / .3);
    transition: transform .2s var(--ease-out);
}
.sim-switch[data-on="true"] { background: var(--teal); border-color: var(--teal); }
.sim-switch[data-on="true"]::after { transform: translateX(17px); }

/* Compact record actions (View in PW / Ledger / Notes / Schedule call). */
.sim-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sim-act {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border-radius: 10px;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: #fff;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: default;
}
.sim-act svg { width: 14px; height: 14px; flex: none; }
.sim-act.is-quiet { background: #fff; color: var(--ink); border-color: var(--line); }
.sim-act.is-warn  { background: #fff8ec; color: #8a5a08; border-color: #f6ddb4; }
.sim-act.is-teal  { background: var(--teal); border-color: var(--teal); color: #fff; }

/* Position pager — "1 of 10" queue navigation. Inert in the mock. */
.sim-pager { display: inline-flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--ink-3); }
.sim-pager b { color: var(--ink); font-variant-numeric: tabular-nums; }
.sim-pager span[data-nav] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    font-weight: 600;
    color: var(--ink-3);
}

/* ── Metric strip ───────────────────────────────────────────────────────── */
/* Five equal-weight columns of the account's position, divided by hairlines
   (1px gaps over a --line ground). Collapses to fewer columns as space
   narrows rather than shrinking any column below readability. */
.sim-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 248px), 1fr));
    gap: 1px;
    background: var(--line);
    margin: 0;
}
.sim-metric { background: #fff; padding: 15px 18px; min-width: 0; }
.sim-metric > h3 {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-3);
}
/* Label/value rows inside a metric column. */
.sim-metric dl { display: grid; gap: 7px; margin: 12px 0 0; }
.sim-metric dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sim-metric dt { font-size: .8125rem; color: var(--ink-2); }
.sim-metric dd { margin: 0; font-size: .8125rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
/* Aging rows deepen in colour as the bucket ages — never colour alone: the
   bucket name carries the meaning. */
.sim-metric dd.age-1 { color: #b9741a; }
.sim-metric dd.age-2 { color: #a85a18; }
.sim-metric dd.age-3 { color: #9c2f22; }
.sim-metric dd.age-4 { color: var(--danger); }

/* Stacked caption/value pairs (Exposure, Recovery position, Next move).
   Each .sim-fact is a self-contained dt/dd unit, so the grid tracks are laid
   on .sim-fact — never on the <dl>, which would make every dt and dd its own
   grid item and sit the label beside its value. */
.sim-facts { display: grid; gap: 14px; margin-top: 12px; }
.sim-facts > .sim-fact { min-width: 0; }
/* Two facts side by side once there is room; stacked below ~150px per column
   so a long value ("Contact for payment plan") wraps instead of clipping. */
.sim-facts.is-split { grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr)); gap: 12px 14px; }
.sim-fact > dt,
.sim-cap {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.sim-fact > dd { margin: 4px 0 0; font-size: .875rem; font-weight: 600; color: var(--ink); line-height: 1.45; }
.sim-fact > dd small { display: block; font-size: .75rem; font-weight: 500; color: var(--ink-3); margin-top: 2px; }
.sim-fact > dd.is-xl { font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sim-fact > dd.is-due { color: var(--danger); }
/* Hairline between the paired facts, drawn only while they actually share a
   row. A viewport media query can't know that — the pair wraps on the column's
   own width — so this is a container query on the metric column. Without a
   container the rule simply never applies and the facts stack cleanly, which
   is the correct fallback. */
.sim-metric { container-type: inline-size; }
@container (min-width: 300px) {
    .sim-facts.is-split > .sim-fact + .sim-fact {
        border-left: 1px solid var(--line-soft);
        padding-left: 14px;
    }
}

/* ── Step tracker ───────────────────────────────────────────────────────── */
/* The three review stages beneath the console. State is carried by
   data-state plus the visually-hidden text in each item, not by colour. */
.sim-track {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 4px;
    list-style: none;
    margin: 0;
    padding: 14px 18px;
    border-top: 1px solid var(--line);
    background: var(--page);
}
.sim-track > li { display: inline-flex; align-items: center; gap: 10px; font-size: .875rem; font-weight: 600; color: var(--ink-3); }
.sim-track > li > i {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink-3);
    font-size: .6875rem;
    font-style: normal;
    font-weight: 700;
}
.sim-track > li[data-state="done"] { color: var(--ink-2); }
.sim-track > li[data-state="done"] > i { background: var(--teal); border-color: var(--teal); color: #fff; }
.sim-track > li[data-state="active"] { color: var(--ink); }
.sim-track > li[data-state="active"] > i { background: var(--ink); border-color: var(--ink); color: #fff; }
/* Connector rule between stages; hidden once the row wraps. */
.sim-track .sim-track-rule { flex: 1 1 30px; min-width: 20px; height: 1px; background: var(--line); }

/* ── Review panel (right rail of the live view) ─────────────────────────── */
.sim-review-head { font-size: .625rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.sim-empty {
    display: grid;
    place-items: center;
    text-align: center;
    gap: 6px;
    padding: 26px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}
.sim-empty b { font-size: .9375rem; color: var(--ink); }
.sim-empty p { margin: 0; font-size: .8125rem; color: var(--ink-3); line-height: 1.6; max-width: 30ch; }

/* Verified-identity marker on the responsible-party card. */
.sim-verified {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: #eafaf9;
    border: 1px solid #bfe9e7;
    color: #00726f;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}
.sim-verified svg { width: 13px; height: 13px; flex: none; }

/* ── Result: outcome banner + resolution grid ───────────────────────────── */
/* Two-column band on the result screen: headline outcome left, the hard
   numbers right, so the commitment reads before the detail. */
.sim-result-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.sim-result-figs { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.sim-result-figs > div { min-width: 7rem; }
.sim-result-figs dt { font-size: .625rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.sim-result-figs dd { margin: 3px 0 0; font-size: 1.125rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.015em; }
.sim-result-figs dd small { display: block; font-size: .75rem; font-weight: 500; color: var(--ink-3); letter-spacing: 0; margin-top: 1px; }

/* Post-call state applied to the console after the call ends: the header
   stays, the numbers update, and a resolution row is appended. */
.sim-delta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: #eafaf9;
    border: 1px solid #bfe9e7;
    color: #00726f;
    font-size: .6875rem;
    font-weight: 700;
    white-space: nowrap;
    vertical-align: middle;
}
.sim-delta.is-flat { background: var(--panel); border-color: var(--line); color: var(--ink-3); }

/* Timeline of what the call changed on the record. */
.sim-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.sim-timeline > li {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 12px;
    padding-bottom: 16px;
    position: relative;
}
.sim-timeline > li:last-child { padding-bottom: 0; }
/* Connector line runs between the markers, stopping at the last item. */
.sim-timeline > li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 26px;
    bottom: 4px;
    width: 1px;
    background: var(--line);
}
.sim-timeline .sim-tl-mark {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #eafaf9;
    border: 1px solid #bfe9e7;
    color: #00726f;
    position: relative;
    z-index: 1;
}
.sim-timeline .sim-tl-mark svg { width: 13px; height: 13px; }
.sim-timeline b { display: block; font-size: .875rem; color: var(--ink); }
.sim-timeline p { margin: 3px 0 0; font-size: .8125rem; color: var(--ink-2); line-height: 1.6; }
.sim-timeline .sim-tl-when { font-size: .75rem; color: var(--ink-3); font-weight: 600; }

/* Quoted commitment lifted verbatim from the transcript. */
.sim-quote {
    margin: 0;
    padding: 14px 16px;
    border-left: 3px solid var(--teal);
    border-radius: 0 12px 12px 0;
    background: var(--panel);
    font-size: .875rem;
    line-height: 1.65;
    color: var(--ink-2);
}
.sim-quote footer { margin-top: 7px; font-size: .75rem; color: var(--ink-3); font-weight: 600; }

/* ── Mock banner ────────────────────────────────────────────────────────── */
/* Load-bearing: this page must never read as a live product surface. */
.sim-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 13px 16px;
    border-radius: 13px;
    border: 1px dashed #c6d7e0;
    background: #f7fafc;
    color: var(--ink-2);
    font-size: .8125rem;
    line-height: 1.6;
}
.sim-note svg { width: 17px; height: 17px; flex: none; color: var(--ink-3); margin-top: 1px; }

/* ── Reduced motion ─────────────────────────────────────────────────────── */
/* The looping/entrance animations here aren't neutralised by the global
   duration override, so stop them outright. */
@media (prefers-reduced-motion: reduce) {
    .sim-step { animation: none; }
    .sim-turn { animation: none; }
    .sim-pulse::before, .sim-pulse::after { animation: none; opacity: 0; }
    .sim-pill.is-live::before { animation: none; }
    .sim-typing span { animation: none; opacity: .6; }
}

/* ── Print ──────────────────────────────────────────────────────────────── */
@media print {
    .sim-rail, .sim-note, .sim-actions, .sim-pager { display: none; }
    .sim-transcript, .sim-transcript.is-full { max-height: none; overflow: visible; }
    .sim-console, .sim-metrics { break-inside: avoid; }
}

/* ── Simulation teaser on the dark landing-page band ────────────────────── */
/* .num-list is built for light grounds (ink headings, hairline rules); these
   overrides re-tune it for .section-dark without touching the base component. */
.section-dark .num-list > * { border-bottom-color: rgb(255 255 255 / .12); }
.section-dark .num-list h3 { color: #fff; }
.section-dark .num-list p { color: rgb(255 255 255 / .72); }
.section-dark .num-list h3 > i { color: var(--aqua); }
.section-dark .num-list > * + * h3 > i { color: rgb(255 255 255 / .5); }
.section-dark .num-list > * + *:hover h3 > i { color: var(--aqua); }
.section-dark .num-list > *:first-child::after { background: var(--aqua); }
.section-dark .text-meta { color: rgb(255 255 255 / .62); }

/* ── intl-tel-input integration ─────────────────────────────────────────────
   The library wraps the <input> in its own container and injects a country
   button. These rules make that wrapper behave like a normal `.field` so the
   phone input matches every other control on the page — without editing the
   library's own stylesheet, which is loaded from a CDN. */
.iti { display: block; width: 100%; }
.iti__tel-input,
.iti input[type="tel"] { width: 100%; }

/* The library's country button sits inside our bordered field, so the button
   itself must not draw a second border or background. */
.iti__country-container { padding: 1px; }
.iti__selected-country { background: transparent; border-radius: 12px 0 0 12px; }
.iti__selected-country:hover,
.iti__selected-country:focus { background: rgb(5 181 181 / .07); }

/* Dropdown: match the page's card styling rather than the library default. */
.iti__dropdown-content {
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 18px 44px -24px rgb(1 72 92 / .4);
    background: #fff;
    /* Keeps the browser from dark-theming any control inside the panel — the
       panel itself is always light, so its contents must be too. */
    color-scheme: light;
    color: var(--ink);
}
/* The dropdown is a light panel in every theme, so the search box inside it
   must be too. Left unstyled, a browser in dark mode paints the input dark
   (~#3b3b3b) while the inherited text stays dark ink — unreadable. `color-scheme`
   stops the UA theming it at all; the explicit colours are the belt-and-braces. */
.iti__search-input {
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    padding: 11px 14px;
    font-size: .875rem;
    color-scheme: light;
    background-color: #fff;
    color: var(--ink);
}
.iti__search-input::placeholder { color: var(--ink-3); opacity: 1; }
.iti__search-input:focus {
    outline: none;
    background-color: #fff;
    color: var(--ink);
}
.iti__country { padding: 9px 14px; font-size: .875rem; }
.iti__country.iti__highlight { background: var(--panel); }
.iti__dial-code { color: var(--ink-3); }

/* The separate dial code is rendered inside the field, so give the text room. */
.iti--separate-dial-code .iti__tel-input { padding-left: 6px; }

/* Error state must reach the wrapper, not just the inner input. */
.field[aria-invalid="true"] + .iti,
.iti:has(.field[aria-invalid="true"]) { border-color: var(--danger); }

/* Refusal state in the pre-call check list — the gate that actually blocked
   the call (see showRefusal in js/simulation.js). */
.text-danger { color: var(--danger); font-weight: 600; }