/* ============================================================
   AL AI — styles.css (v3 cinematic rebuild, 2026-08-27)
   Dark-only. 21-token system. No new hex outside the token blocks
   below. Type is Helvetica Neue (system font, see below) + the
   self-hosted IBM Plex Mono for labels/data.
   ============================================================ */

/* ---- fonts ----
   Helvetica Neue carries both the display voice and running text, everywhere, at the
   user's explicit request. It is a commercial Monotype typeface — there is no license
   that permits vendoring/self-hosting the actual font files here (unlike IBM Plex Mono
   below, which is OFL and committed with its license file), so every font-family stack
   in this file names it first with no @font-face backing it: the browser resolves
   'Helvetica Neue' against the real, locally-installed font on macOS/iOS (which ship
   it) and falls through to Helvetica/Arial/sans-serif everywhere else. No file to
   fetch, nothing to preload — visitors on non-Apple platforms see a system sans-serif
   close to it, not byte-identical to it. That tradeoff was chosen knowingly over
   shipping unlicensed font binaries. */
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }

/* ============================================================
   SODIUM & GRAPHITE — the design system.

   Two deliberate departures from what was here before:

   1. The ground is warm graphite, not #000. On an OLED phone pure black crushes to
      true black and 1px borders disappear entirely, so every card lost its edge on
      exactly the devices this site is read on.
   2. There is one light source, overhead. The previous system put an omnidirectional
      violet glow on nine elements plus two full-page radial washes, which is why the
      page read flat despite the effort in it: light coming from everywhere at once
      reads as light coming from nowhere, so nothing has material or weight.

   Contrast is not asserted here — tools/check-contrast.mjs proves every ink/signal
   token against every ground it can sit on, and verify.sh runs it.
   ============================================================ */

:root {
    /* ---- grounds: one page base, three elevations ---- */
    --ground-0: #0B0A09;   /* page */
    --ground-1: #121110;   /* alternating section band */
    --ground-2: #1A1917;   /* cards, flush surfaces */
    --ground-3: #232120;   /* raised — earned by exactly two elements */

    /* ---- ink ---- */
    --ink-hi:   #F5F1EA;   /* headlines and emphasis — warm bone, not white */
    --ink-body: #D9D4CC;   /* running prose */
    --ink-mid:  #A39D94;   /* secondary */
    --ink-low:  #8F887E;   /* labels — the lightest value that still clears AA on ground-3 */

    /* ---- signal ---- */
    --signal:      #5A9DE8;  /* Steel family, hue 212. 8.44:1 on ground-0, 5.67:1 on ground-3 */
    --signal-hot:  #8FC3FF;
    --signal-deep: #223852;
    --cool:        #6FE3D2;  /* machine register only: live data, diagram strokes */
    --on-signal:   var(--ground-0); /* ink that sits on bright signal fills */

    /* ---- hero-net canvas: read at runtime by js/main.js, re-read on themechange ---- */
    --hero-edge-hi:   rgba(90, 157, 232, 0.20);
    --hero-edge-lo:   rgba(245, 241, 234, 0.10);
    --hero-node-hi:   rgba(90, 157, 232, 0.90);
    --hero-node-lo:   rgba(245, 241, 234, 0.55);
    --hero-label-hi:  rgba(90, 157, 232, 0.85);
    --hero-label-lo:  rgba(245, 241, 234, 0.38);

    /* ---- edges and elevation: one overhead source ---- */
    --hairline: rgba(245, 241, 234, 0.09);
    --edge-lit: rgba(245, 241, 234, 0.14);
    --elev-raised:   0 1px 0 0 var(--edge-lit) inset, 0 24px 60px -28px rgba(0, 0, 0, 0.95);
    --elev-flush:    0 1px 0 0 var(--edge-lit) inset;
    --elev-recessed: inset 0 2px 6px -2px rgba(0, 0, 0, 0.7);

    --r-sm: 10px;
    --r-lg: 18px;

    /* ---- motion ---- */
    --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --dur-micro: 120ms;
    --dur-state: 240ms;
    --dur-enter: 520ms;
    --transition: all var(--dur-enter) var(--ease-out-expo);

    /* ---- semantic names used throughout the stylesheet ---- */
    --bg: var(--ground-0);
    --nav-bg: rgba(11, 10, 9, 0.80);
    --nav-bg-solid: rgba(11, 10, 9, 0.92);
    --nav-bg-fill: rgba(11, 10, 9, 0.97);
    --surface: var(--ground-2);
    --section-alt: var(--ground-1);
    --book-bg: var(--ground-1);
    --footer-bg: transparent;
    --ink: var(--ink-hi);
    --muted: var(--ink-mid);
    --line: var(--hairline);
    --track: var(--ground-3);
    --accent: var(--signal);
    --accent-deep: var(--signal-deep);
    --card-hover: var(--signal);
    --accent-line: rgba(90, 157, 232, 0.35);
    --glass: rgba(245, 241, 234, 0.045);

    /* ---- legacy aliases ---- */
    --black: var(--ground-0);
    --white: var(--ink-hi);
    --grey: var(--ink-mid);
    --card-bg: var(--ground-2);
    --border: var(--hairline);
    --electric: #487CB8;   /* FILL tier — carries --on-signal ink at 4.57:1. Never text. */
    --deep-violet: var(--signal-deep);
}

/* Light theme — a second identity, not an inversion: warm paper ground, graphite ink,
   the same Steel blue kept as the brand signal. Two-tier signal: deep #173457 for text
   (9.42:1 worst on paper grounds, gated by tools/check-contrast.mjs), and the shared
   #487CB8 fill for large areas that carry dark ink (4.57:1). The logo itself is a third
   value, #4576AD — see assets/brand/README.md; it clears the 3:1 graphics floor on BOTH
   grounds (4.19/4.19), which is what a mark needs and what neither text tier can do.
   Cool likewise: #0E7268 text / #6FE3D2 machine-register
   only. Dark is the no-attribute default; this block sits after :root so its concrete
   values win wherever it overrides. Every theme-visible token is overridden here on
   purpose — a token left out is a dark value bleeding through. */
:root[data-theme="light"] {
    --ground-0: #F5F1EA;
    --ground-1: #ECE7DE;
    --ground-2: #FBF9F5;
    --ground-3: #E4DED3;
    --ink-hi:   #14120F;
    --ink-body: #26221C;
    --ink-mid:  #5C564C;
    --ink-low:  #665F53;
    --signal:      #173457;
    --signal-hot:  #265080;
    --signal-deep: #112133;
    --cool:        #0C6B61;
    --on-signal:   #0B0A09;
    --hero-edge-hi:   rgba(23, 52, 87, 0.32);
    --hero-edge-lo:   rgba(20, 18, 15, 0.16);
    --hero-node-hi:   rgba(23, 52, 87, 0.95);
    --hero-node-lo:   rgba(20, 18, 15, 0.60);
    --hero-label-hi:  rgba(17, 33, 51, 0.90);
    --hero-label-lo:  rgba(20, 18, 15, 0.55);
    --hairline: rgba(20, 18, 15, 0.14);
    --edge-lit: rgba(20, 18, 15, 0.26);
    --elev-raised:   0 1px 0 0 var(--edge-lit) inset, 0 24px 60px -28px rgba(20, 18, 15, 0.40);
    --elev-flush:    0 1px 0 0 var(--edge-lit) inset;
    --elev-recessed: inset 0 2px 6px -2px rgba(20, 18, 15, 0.22);
    --bg: var(--ground-0);
    --nav-bg: rgba(245, 241, 234, 0.80);
    --nav-bg-solid: rgba(245, 241, 234, 0.92);
    --nav-bg-fill: rgba(245, 241, 234, 0.97);
    --surface: var(--ground-2);
    --section-alt: var(--ground-1);
    --book-bg: var(--ground-1);
    --footer-bg: transparent;
    --ink: var(--ink-hi);
    --muted: var(--ink-mid);
    --line: var(--hairline);
    --track: var(--ground-3);
    --accent: var(--signal);
    --accent-deep: var(--signal-deep);
    --card-hover: var(--signal);
    --accent-line: rgba(23, 52, 87, 0.30);
    --glass: rgba(20, 18, 15, 0.045);
    --black: var(--ground-0);
    --white: var(--ink-hi);
    --grey: var(--ink-mid);
    --card-bg: var(--ground-2);
    --border: var(--hairline);
    --electric: #487CB8;   /* same fill in both themes: the brand constant */
    --deep-violet: var(--signal-deep);
}

/* --- Theme system: toggle, crossfade, light-mode surface overrides ---
   js/theme.js wires the controls and dispatches `themechange`; the pre-paint script in
   <head> applies the stored choice before first paint. Dark = no data-theme attribute. */

/* Grain reads as paper texture in light — a touch stronger than dark's film grain. */
[data-theme="light"] body::after { opacity: 0.05; }

/* Booking scrim: near-black glass in dark, soft graphite in light. */
[data-theme="light"] .booking-overlay { background: rgba(20, 18, 15, 0.55); }

/* One 300ms color-only crossfade on theme switch; skipped under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
    html.theme-fade,
    html.theme-fade *,
    html.theme-fade *::before,
    html.theme-fade *::after {
        transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease, box-shadow 300ms ease, fill 300ms ease, stroke 300ms ease !important;
    }
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: transparent;
    color: var(--grey);
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
    padding: 0;
}
.theme-toggle:hover { color: var(--white); border-color: var(--edge-lit); background: var(--glass); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
/* The icon shows the action: sun while dark (switch to light), moon while light. */
.theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }
/* Placement in the nav: between the hamburger and the links. The auto margin pushes it
   right on desktop; on mobile it sits beside the hamburger (its margin zeroed in the
   768px block, the hamburger takes the auto margin instead). */
#nav .theme-toggle { margin-left: auto; margin-right: 1.5rem; }


* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    background-color: var(--black);
    color: var(--white);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 1.6;
    font-synthesis-weight: none;
    overflow-x: hidden;
}

body.modal-open { overflow: hidden; }

/* Film grain. One composited layer, never animated, no network request — the SVG is
   inline. Gives the flat grounds a surface without adding gradients everywhere. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 3px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-200%);
    background: var(--electric);
    color: var(--on-signal);
    padding: 0.75rem 1.25rem;
    z-index: 200;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}
.skip-link:focus { transform: translateY(0); }

/* --- Components --- */

.container {
    max-width: 1320px;
    margin: 0 auto;
    padding-inline: max(1.5rem, env(safe-area-inset-left), env(safe-area-inset-right));
}

.btn {
    padding: 14px 28px;
    border-radius: var(--r-sm);
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: var(--transition);
    cursor: pointer;
    font-size: 0.95rem;
    font-family: inherit;
    border: none;
}
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.btn-primary {
    background: var(--electric);
    color: var(--on-signal);
    box-shadow: var(--elev-flush);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--elev-raised); }
.btn-secondary {
    background: transparent;
    color: var(--white);
    border: 1px solid var(--border);
}
.btn-secondary:hover { border-color: var(--grey); background: var(--glass); }

.mono {
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .08em;
}

/* --- Navigation --- */

#nav {
    padding: 2rem 0;
    padding-top: calc(2rem + env(safe-area-inset-top, 0px));
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 100;
    background: var(--nav-bg);
    backdrop-filter: blur(10px);
}
#nav.scrolled { background: var(--nav-bg-solid); border-bottom: 1px solid var(--border); }
#nav.open { background: var(--nav-bg-fill); }

.nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.logo {
    display: inline-flex;
    align-items: center;
    gap: 0.62rem;
    min-height: 44px;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 1.2rem;
    color: var(--white);
    text-decoration: none;
}
/* The mark's neutral half must flip with the ground — charcoal on paper, bone on ink — or it
   disappears into one of them. --ink is exactly that token, so it inherits for free. */
.logo-mark { height: 1.32em; width: auto; display: block; flex: none; }
.logo-mark .lm-a { fill: #4576AD; }
.logo-mark .lm-b { fill: var(--ink); }
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 6px;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--white); }
#nav ul { display: flex; list-style: none; gap: 2.5rem; }
#nav ul li a {
    color: var(--grey);
    text-decoration: none;
    font-size: 0.85rem;
    transition: var(--transition);
}
#nav ul li a:hover { color: var(--white); }
#nav ul li a.nav-book {
    background: var(--electric);
    color: var(--on-signal);
    padding: 8px 18px;
    border-radius: 999px;
    font-weight: 600;
}
#nav ul li a.nav-book:hover { background: var(--white); }

#nav-menu { display: flex; align-items: center; }
#nav-menu > li { display: flex; align-items: center; }

/* --- Hero --- */

.hero {
    padding-top: 180px;
    padding-bottom: 110px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hero::after {
    content: '';
    position: absolute;
    bottom: -150px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 300px;
    background: radial-gradient(circle, var(--signal-deep) 0%, transparent 70%);
    opacity: 0.16;
    filter: blur(70px);
    pointer-events: none;
}
#hero-net {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Sits behind a 7rem display headline — at full strength its node labels compete
       with the words. Wave 4 replaces this canvas outright. */
    opacity: 0.4;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, transparent 35%, #000 78%);
}
.hero .container { position: relative; z-index: 1; }
.hero-kicker {
    color: var(--grey);
    font-size: 0.7rem;
    text-transform: uppercase;
    margin-bottom: 2rem;
}
h1 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(3rem, 1.4rem + 8vw, 7rem);
    line-height: 0.94;
    margin-bottom: 1.75rem;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--ink-hi);
}
.hero-sub {
    color: var(--grey);
    font-size: 1.2rem;
    max-width: 620px;
    margin: 0 auto 2.5rem;
    line-height: 1.7;
}
.hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
.hero-base {
    margin-top: 3rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    color: var(--grey);
    line-height: 1.5;
}

/* --- Sections --- */

.section { padding: 100px 0; }
.section-alt { background: var(--section-alt); padding: 100px 0; }
.section-title {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 1.6rem + 2vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-wrap: balance;
    color: var(--ink-hi);
    margin-bottom: 4rem;
}
.section-head {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    gap: 0 3rem;
    margin: 0 0 4rem;
    align-items: start;
}
.section-head .eyebrow { grid-column: 1; margin-top: 0.6rem; }
.section-head .section-title,
.section-head .section-sub { grid-column: 2; max-width: 62ch; }
.eyebrow {
    display: block;
    color: var(--signal);
    font-size: 0.68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}
.section-head .section-title { margin-bottom: 1.25rem; }
.section-sub { color: var(--ink-mid); font-size: 1.05rem; line-height: 1.7; margin: 0; text-wrap: pretty; }
.section-cta { margin-top: 3.5rem; }

.step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    padding: 3px 10px;
    margin-bottom: 1rem;
    border: 1px solid var(--accent-line);
    border-radius: 999px;
    color: var(--signal);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
}

/* --- S2: pain grid + freeze --- */

.pain-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.pain-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    text-align: center;
    background: var(--glass);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 1.75rem 1.25rem;
    transition: var(--transition);
}
.pain-card:hover { border-color: var(--card-hover); transform: translateY(-4px); }
.pain-n {
    font-size: 0.7rem;
    line-height: 1;
    color: var(--signal);
    letter-spacing: .1em;
    flex: 0 0 auto;
}
.pain-text { font-size: 0.95rem; color: var(--ink-body); line-height: 1.55; }
.freeze-block {
    text-align: center;
    margin-top: 4rem;
    padding-top: 3.5rem;
    border-top: 1px solid var(--hairline);
}
.freeze-line {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 3.5vw, 2.3rem);
    letter-spacing: -0.5px;
    margin-bottom: 1.75rem;
}

/* --- S3: opportunity finder --- */

.finder-panel {
    max-width: 760px;
    margin: 0 auto;
    background: var(--ground-3);
    border: 1px solid var(--edge-lit);
    border-radius: var(--r-lg);
    padding: 2.5rem;
    box-shadow: var(--elev-raised);
}
.finder-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.9rem;
}
#finder-input,
#biz-desc {
    width: 100%;
    background: var(--track);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--ink);
    font-family: inherit;
    font-size: 0.98rem;
    line-height: 1.6;
    padding: 1rem 1.2rem;
    resize: vertical;
    transition: var(--transition);
}
#finder-input::placeholder,
#biz-desc::placeholder,
#bottleneck::placeholder,
#biz-email::placeholder { color: var(--muted); opacity: 0.75; }
#finder-input:focus,
#biz-desc:focus,
#bottleneck:focus,
#biz-email:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px rgba(90, 157, 232, 0.28); }
.is-error { border-color: var(--card-hover) !important; animation: shake 0.4s ease; }
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}
.finder-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
}
.finder-loading { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.finder-load-line {
    display: block;
    font-size: 0.75rem;
    color: var(--muted);
    line-height: 2;
    animation: pulse-line 1.4s ease-in-out infinite;
}
.finder-load-line::before { content: '▸ '; color: var(--signal); }
@keyframes pulse-line { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
.finder-results { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.finder-results-title {
    font-size: 1.05rem;
    letter-spacing: -0.2px;
    margin-bottom: 1.25rem;
    color: var(--ink);
}
.finder-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem;
}
.finder-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 1.1rem 1.2rem;
    transition: var(--transition);
}
.finder-item:hover { border-color: var(--card-hover); transform: translateY(-3px); }
.finder-num { display: block; font-size: 0.65rem; color: var(--signal); margin-bottom: 0.5rem; }
.finder-item h4 { font-size: 0.85rem; letter-spacing: .05em; margin-bottom: 0.45rem; }
.finder-item p { font-size: 0.8rem; color: var(--muted); line-height: 1.6; }
.finder-note { margin-top: 1rem; font-size: 0.68rem; color: var(--muted); }
.finder-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--hairline);
    font-size: 0.95rem;
    color: var(--ink);
}

/* --- S4: before/after transform --- */

.t-board-wrap { width: 100%; }
.t-board {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2.5rem;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.5rem 2rem;
}
.t-col { display: flex; flex-direction: column; }
.t-col-label {
    font-size: 0.65rem;
    color: var(--muted);
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}
.t-col.t-before .t-col-label { text-align: left; }
.t-col.t-after .t-col-label { text-align: right; }
.t-chain { display: flex; flex-direction: column; gap: 0.55rem; }
.t-before .t-chain { align-items: flex-start; }
.t-after .t-chain { align-items: flex-end; }
.t-node {
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.68rem;
    letter-spacing: .06em;
    color: var(--muted);
    background: var(--track);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.45rem 0.8rem;
    white-space: nowrap;
    transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.5s ease, color 0.5s ease;
}
.t-before .t-node.is-dim { opacity: 0.28; transform: translateX(-8px); }
.t-after .t-node { opacity: 0; transform: translateX(14px); }
.t-after .t-node.is-lit { opacity: 1; transform: none; }
.t-node.t-emph { border-color: var(--accent-line); color: var(--ink); background: var(--glass); }
.t-core {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--elev-flush);
    transition: var(--transition);
}
.t-core-name { font-size: 1.25rem; font-weight: 700; letter-spacing: 1px; }
.t-core-sub { font-size: 0.55rem; color: var(--muted); text-transform: uppercase; }
.t-core.is-live {
    border-color: var(--signal);
    box-shadow: var(--elev-raised);
    transform: scale(1.04);
}
.t-core.is-live .t-core-name { color: var(--ink); }

/* --- S5: build blocks --- */

.build-list { display: grid; gap: 1.25rem; }
/* Explicit areas, not auto-placement: with 4 un-spanned children (index/title/
   diagram/desc), a 3-col desktop grid and a 2-col tablet grid auto-place them into
   different cells — at 2 columns, build-desc silently lands in the 56px index column
   and wraps one word per line. Naming the areas once here keeps every breakpoint's
   grid-template-columns/-areas pair the only thing that has to change together. */
.build-block {
    display: grid;
    grid-template-columns: 70px 1fr 300px;
    grid-template-areas: "index title desc" "index diagram desc";
    gap: 2.25rem;
    align-items: center;
    background: var(--glass);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 2.25rem 2.75rem;
    transition: var(--transition);
}
.build-block:hover { border-color: var(--card-hover); }
.build-index { grid-area: index; font-size: 0.8rem; color: var(--signal); }
.build-name { grid-area: title; font-size: 1.5rem; letter-spacing: -0.3px; margin-bottom: 0.6rem; }
/* the gap is a real space in the markup now, so parsers read "BUILD AI WORKFLOWS" and not
   "BUILDAI WORKFLOWS"; this only tops it up to the width the margin used to carry alone */
.build-name-accent { color: var(--muted); font-weight: 500; margin-left: 0.2rem; }
.build-desc { grid-area: desc; color: var(--muted); font-size: 0.95rem; line-height: 1.7; max-width: 34rem; }
.build-diagram { grid-area: diagram; }
.build-diagram svg { display: block; width: 100%; max-width: 300px; height: auto; }
.build-diagram .dg-node { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.build-diagram .dg-node-accent { fill: var(--accent); stroke: var(--accent); }
.build-diagram .dg-line { stroke: var(--accent-line); stroke-width: 1; fill: none; }
.build-diagram .dg-line-dash { stroke: var(--accent-line); stroke-width: 1; fill: none; stroke-dasharray: 4 4; }
.build-diagram .dg-text { fill: var(--muted); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 8px; letter-spacing: .08em; text-anchor: middle; }
/* Labels that sit BESIDE their node rather than above/below it. Without this they inherit
   text-anchor:middle and get dragged back on top of the node they are labelling. */
.build-diagram .dg-text-start { text-anchor: start; }
.build-diagram .dg-rect { fill: var(--glass); stroke: var(--line); stroke-width: 1; }
.build-diagram .dg-dot { fill: var(--accent); }

/* --- the lead-magnet rung under the finder results --- */

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.finder-magnet {
    margin-top: 1.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--hairline);
}
.finder-magnet h4 { font-size: 1.05rem; color: var(--ink-hi); margin-bottom: 0.5rem; }
.finder-magnet > p { color: var(--ink-mid); font-size: 0.95rem; line-height: 1.65; margin-bottom: 1.1rem; }
.magnet-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.magnet-row input {
    flex: 1 1 16rem;
    min-height: 44px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--ink-hi);
    background: var(--ground-1);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 0.7rem 0.9rem;
}
.magnet-row input:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px rgba(90, 157, 232, 0.28); }
.magnet-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 0.9rem;
    color: var(--ink-mid);
    font-size: 0.85rem;
    line-height: 1.5;
    cursor: pointer;
}
.magnet-consent input { margin-top: 0.15rem; accent-color: var(--signal); min-width: 16px; min-height: 16px; }
.magnet-note { margin-top: 0.9rem; color: var(--ink-mid); font-size: 0.85rem; line-height: 1.55; }
.magnet-print {
    margin-top: 0.75rem;
    background: none;
    border: 0;
    padding: 0.75rem 0;
    min-height: 44px;
    color: var(--signal);
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- hero promise + honest-fit panel --- */

.hero-promise {
    max-width: 46rem;
    margin: 1.5rem auto 0;
    color: var(--ink-mid);
    font-size: 0.95rem;
    line-height: 1.7;
    text-wrap: pretty;
}
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.fit-col {
    background: var(--glass);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 2rem 1.75rem;
    box-shadow: var(--elev-flush);
}
.fit-col h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.05rem;
    color: var(--ink-hi);
    margin-bottom: 1.25rem;
}
.fit-mark {
    font-size: 0.7rem;
    letter-spacing: .1em;
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
}
.fit-yes .fit-mark { color: var(--signal); }
.fit-no .fit-mark { color: var(--ink-low); }
.fit-col ul { list-style: none; display: grid; gap: 0.9rem; }
.fit-col li {
    color: var(--ink-mid);
    font-size: 0.95rem;
    line-height: 1.65;
    padding-left: 1.1rem;
    position: relative;
}
.fit-col li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 5px;
    height: 1px;
    background: var(--ink-low);
}
.fit-yes li::before { background: var(--signal); }

/* --- S6: architecture diagram + how we work --- */

.arch-diagram {
    background: var(--glass);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 2.5rem;
    margin-bottom: 4.5rem;
    overflow-x: auto;
}
.arch-diagram svg { display: block; width: 100%; min-width: 720px; height: auto; }
/* Below 720px the wide SVG is swapped for .arch-steps — see the responsive block. */
.arch-steps { display: none; list-style: none; margin: 0 0 4.5rem; padding: 0; }
.arch-steps li {
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    gap: 0.15rem 0.9rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--hairline);
}
.arch-steps li:last-child { border-bottom: 0; }
.arch-step-n { grid-row: 1 / span 2; font-size: 0.75rem; color: var(--signal); padding-top: 0.15rem; }
.arch-steps b { font-size: 1rem; color: var(--ink-hi); font-weight: 600; }
.arch-steps span:last-child { font-size: 0.95rem; color: var(--ink-mid); line-height: 1.6; }
.arch-node rect { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.arch-node text { fill: var(--ink); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .05em; text-anchor: middle; }
.arch-node .arch-sub { fill: var(--muted); font-size: 9px; font-weight: 400; letter-spacing: .08em; }
.arch-node-accent rect { stroke: var(--accent-line); fill: var(--track); }
.arch-node-human rect { stroke: var(--accent); }
.arch-line { stroke: var(--accent-line); stroke-width: 1.2; fill: none; }
.arch-caption { fill: var(--muted); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .08em; }
.hw-title { font-size: 1.5rem; letter-spacing: -0.3px; margin-bottom: 2.25rem; }

.roadmap { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; }
.roadmap-stage {
    padding: 1.75rem 1.5rem;
    background: var(--glass);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
.roadmap-stage h3 { font-size: 1rem; letter-spacing: .08em; margin-bottom: 0.75rem; }
.roadmap-stage p { font-size: 0.82rem; color: var(--muted); }
.roadmap-stage .step-badge { margin-bottom: 0.75rem; }

/* --- S7: local / private AI --- */

.fleet-section { padding: 100px 0; }
.local-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 0.7rem;
    row-gap: 0.7rem;
    margin: 0 auto 3.5rem;
    max-width: 900px;
}
.local-chip {
    display: inline-block;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--track);
    color: var(--muted);
    font-size: 0.65rem;
    white-space: nowrap;
}
.local-chip-accent { border-color: var(--accent-line); color: var(--ink); background: var(--glass); }
.local-chip-lock { border-color: var(--accent-line); color: var(--signal); }
.local-arrow { color: var(--muted); font-size: 0.85rem; line-height: 1; }
.local-trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin: 3.5rem 0 2.5rem;
}
.local-mode {
    background: var(--glass);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.75rem;
    transition: var(--transition);
}
.local-mode:hover { border-color: var(--card-hover); transform: translateY(-4px); }
.local-mode h3 { font-size: 0.95rem; letter-spacing: .06em; margin-bottom: 0.6rem; }
.local-mode p { color: var(--muted); font-size: 0.85rem; line-height: 1.65; }
.local-trust {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 3rem;
}

/* fleet3d stats row overrides (JS-rendered rows in fleet3d.js) */
.fleet-stats .stats-name { font-size: 1.25rem; letter-spacing: -0.2px; color: var(--ink); margin: 0; }
.fleet-stats .stats-role {
    display: block;
    margin-top: 0.3rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.fleet-stats .spec-grid { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
.fleet-stats .spec { background: var(--glass); padding: 0.6rem 0.7rem; }
.fleet-stats .spec small {
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6rem;
    letter-spacing: .1em;
}
.fleet-stats .spec b { font-size: 0.82rem; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }

/* --- S8: founder story --- */

.story-grid {
    display: grid;
    gap: 4rem;
    align-items: start;
    max-width: 62ch;
}
.story-copy p {
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.85;
    margin-top: 1.4rem;
}
.story-copy p:first-child { color: var(--ink); }
.story-copy p strong { color: var(--ink); font-weight: 600; }
.story-sign { margin-top: 3rem; color: var(--muted); font-size: 0.95rem; }

/* stinger (shared stacked-mono pattern) */
.stinger {
    max-width: 46rem;
    margin: 2rem 0;
    padding-left: 1.25rem;
    border-left: 1px solid var(--hairline);
}
.stinger-line { display: block; line-height: 1.7; font-size: 0.95rem; color: var(--ink); }

/* --- S9: built in mumbai / global --- */

.mumbai-card {
    background: var(--glass);
    border: 1px solid var(--accent-line);
    border-radius: var(--r-lg);
    padding: 2.5rem;
}
.mumbai-card h3 { font-size: 1.35rem; letter-spacing: -0.3px; margin-bottom: 0.75rem; }
.mumbai-card p { color: var(--muted); font-size: 0.98rem; line-height: 1.7; margin-bottom: 1.5rem; }
.mumbai-chips { display: flex; gap: 0.9rem; flex-wrap: wrap; }
.mumbai-chip {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--track);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.75rem 1.25rem;
    min-height: 44px;
    cursor: pointer;
    transition: var(--transition);
}
.mumbai-chip:hover { border-color: var(--card-hover); transform: translateY(-2px); }
.mumbai-chip-accent { border-color: var(--accent-line); background: var(--glass); }

/* --- FAQ --- */

.faq-list { max-width: 46rem; margin: 0 auto; display: grid; gap: 0.75rem; }
.faq-item {
    background: var(--glass);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    transition: var(--transition);
}
.faq-item[open] { border-color: var(--accent-line); }
.faq-item summary {
    padding: 1.25rem 1.5rem;
    min-height: 44px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    color: var(--ink);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
    content: "+";
    font-family: ui-monospace, SFMono, monospace;
    color: var(--accent);
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.3s ease;
}
.faq-item[open] summary::before { transform: rotate(45deg); }
.faq-item p { margin: 0; padding: 0 1.5rem 1.25rem; color: var(--ink-mid); font-size: 1rem; line-height: 1.75; }

/* --- S10: final CTA + on-page calendar --- */

.book-section {
    padding: 110px 0;
    text-align: center;
    background: var(--book-bg);
    border-top: 1px solid var(--border);
}
.book-note {
    font-size: 0.72rem;
    letter-spacing: 1px;
    color: var(--grey);
    margin-top: 1.25rem;
}
.final-cta .btn { margin-bottom: 0.5rem; }
.final-cal { margin-top: 4.5rem; text-align: left; }

.cal-embed {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.cal-embed iframe {
    display: block;
    width: 100%;
    height: clamp(420px, 65dvh, 680px);
    border: 0;
    background: var(--surface);
}

/* --- Footer --- */

.footer { padding: 80px 0 40px; background: var(--footer-bg); border-top: 1px solid var(--border); }
.footer-overline {
    display: block;
    color: var(--signal);
    font-size: 0.7rem;
    letter-spacing: .4em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}
.footer-title {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: clamp(2.4rem, 6vw, 3.75rem);
    line-height: 1.08;
    letter-spacing: -1px;
    margin-bottom: 1.5rem;
}
.footer > .container > p { color: var(--grey); font-size: 0.95rem; margin: 0 0 1rem; }
.footer-legal { margin-top: 4rem !important; font-size: 0.8rem; }
/* The theme toggle here is a <button>, not an <a>: it performs an action, and js/theme.js
   stamps aria-pressed on every [data-theme-toggle] — which is invalid on role=link. It is
   styled to sit inline with the neighbouring links rather than look like a form control. */
.footer-legal a,
.footer-legal .footer-toggle { color: var(--signal); text-decoration: none; display: inline-block; padding: 0.75rem 0; min-height: 44px; }
.footer-legal a:hover,
.footer-legal .footer-toggle:hover { color: var(--white); }
.footer-legal .footer-toggle { background: none; border: 0; font: inherit; cursor: pointer; }

/* --- Booking modal --- */

.booking-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.booking-overlay[hidden] { display: none; }
.booking-modal {
    position: relative;
    width: 100%;
    max-width: 680px;
    max-height: 92dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--ground-3);
    border: 1px solid var(--edge-lit);
    border-radius: var(--r-lg);
    padding: 2.75rem;
    box-shadow: var(--elev-raised);
}
.booking-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition);
}
.booking-close:hover { color: var(--white); border-color: var(--grey); }
.booking-progress {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 2.25rem;
}
.booking-pstep {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    transition: var(--transition);
}
.booking-pstep i { font-style: normal; }
.booking-pstep.is-current { border-color: var(--signal); color: var(--signal); box-shadow: var(--elev-flush); }
.booking-pstep.is-done { background: var(--accent); border-color: var(--accent); color: var(--black); }
.booking-plink { width: 2.2rem; height: 1px; background: var(--line); }
.booking-step h3 { font-size: 1.5rem; letter-spacing: -0.3px; margin-bottom: 0.75rem; }
.booking-sub { color: var(--muted); font-size: 0.95rem; line-height: 1.7; margin-bottom: 1.5rem; }
.booking-q { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.9rem; }
.topic-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.75rem;
}
.topic-chip {
    font-family: inherit;
    font-size: 0.8rem;
    color: var(--muted);
    background: var(--track);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.75rem 1.25rem;
    min-height: 44px;
    cursor: pointer;
    transition: var(--transition);
}
.topic-chip:hover { color: var(--white); border-color: var(--card-hover); }
.topic-chip.is-selected {
    color: var(--black);
    background: var(--accent);
    border-color: var(--accent);
}
.booking-bottleneck {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.55rem;
}
.booking-optional { font-weight: 400; color: var(--muted); font-size: 0.65rem; }
#bottleneck,
#biz-email {
    width: 100%;
    background: var(--track);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    font-family: inherit;
    font-size: 0.92rem;
    padding: 0.85rem 1rem;
    transition: var(--transition);
}
.booking-step [data-step="1"] #bottleneck { margin-bottom: 1.75rem; }
#biz-desc { margin-bottom: 1.5rem; }
#biz-email { margin-bottom: 1.75rem; }
.cal-embed-modal { margin-bottom: 1.25rem; }
.cal-embed-modal iframe { height: clamp(320px, 50dvh, 460px); }
.booking-step-foot { text-align: center; }
.booking-done-note {
    margin-top: 1.25rem;
    font-size: 0.75rem;
    color: var(--signal);
    text-align: center;
}

/* --- Responsive --- */

/* 1024px, not 768px, is the nav's collapse point: a 5-item row plus a padded pill CTA
   never fit gracefully below ~1024px, and iPad portrait (768-834px) sits squarely in
   what used to be the dead zone between the old 768px hamburger threshold and this
   1024px content breakpoint — the full desktop nav wrapped "AL AI" onto two lines and
   crammed every link there instead of collapsing. One breakpoint for both. */
@media (max-width: 1024px) {
    .roadmap { grid-template-columns: repeat(3, 1fr); }
    .build-block {
        grid-template-columns: 56px 1fr;
        grid-template-areas: "index title" "index diagram" "index desc";
    }
    .build-diagram svg { max-width: 340px; margin: 0 auto; }
    .pain-grid { grid-template-columns: repeat(2, 1fr); }
    .local-trio { grid-template-columns: 1fr; gap: 0.9rem; }
    .nav-toggle { display: flex; position: relative; z-index: 201; margin-left: auto; }
    #nav .theme-toggle { margin-left: 0; margin-right: 0; }
    #nav.open {  min-height: 100dvh; border-bottom: 0; }
    #nav.open .nav-inner { flex-wrap: wrap; padding-bottom: 2rem; }
    body.menu-open { overflow: hidden; }
    /* #nav ul (line 357) is an ID+type selector (0,1,0,1) and beats a bare #nav-menu
       (0,1,0,0) regardless of source order, since #nav-menu *is* that ul — without the
       #nav parent here this rule silently lost the cascade and the menu never collapsed. */
    #nav #nav-menu { display: none; }
    /* Needs the same #nav prefix as the rule above (0,2,1,1 vs 0,2,0,1) or the closed-state
       rule wins here too and the opened menu never actually shows. */
    #nav #nav-menu.open {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        text-align: center;
        width: 100%;
        margin-top: 3rem;
    }
    #nav #nav-menu.open li a { font-size: 1.1rem; }
}

/* The architecture SVG is 1000 viewBox units wide and pinned to min-width:720px, so it
   forces horizontal scroll inside its own box long before the viewport reaches 720px
   (measured: 110px of overflow at 740px, 82px at 768px — iPad Mini portrait). Swap to the
   .arch-steps text version as soon as the SVG stops fitting, not at 720. */
@media (max-width: 900px) {
    .arch-diagram { display: none; }
    .arch-steps { display: block; }
}

@media (max-width: 768px) {
    .hero { padding-top: 120px; }
}

@media (max-width: 720px) {
    /* ---- mobile legibility pass ----
       The pre-existing @media blocks only changed layout; desktop type sizes as small as
       0.55rem survived onto a 390px screen. Everything below is measured, not guessed. */

    /* The wide architecture SVG showed 34% of itself at 6.5-9.4px inside a 246px window,
       with no affordance telling anyone to scroll. Swap in the same seven stages as text. */
    /* .arch-diagram / .arch-steps swap lives in the ≤900 block — the SVG's own
       min-width:720px means it overflows well before 720px of viewport. */

    /* Element opacity composited the BEFORE nodes to 1.71:1 — all ten steps of "from ten
       manual steps to one AI layer" were invisible on every phone. Dim with colour, which
       keeps the intent and the contrast. */
    .t-before .t-node,
    .t-before .t-node.is-dim { opacity: 1; color: var(--ink-low); border-color: var(--hairline); transform: none; }

    /* Below 16px iOS zooms on focus and never zooms back, pushing the modal's Send button
       off-screen mid-booking. These four are the whole lead-capture path. */
    #finder-input, #biz-desc, #bottleneck, #biz-email { font-size: 16px; }

    /* Floor for anything carrying meaning. */
    .eyebrow, .hero-base, .hero-kicker, .book-note, .booking-optional, .finder-note,
    .finder-num, .finder-label, .t-core-sub, .t-col-label, .local-chip, .stats-updated,
    .footer-overline, .mumbai-chip, .topic-chip, .footer-legal, .fit-mark { font-size: 0.8rem; }
    .pain-text, .local-mode p, .roadmap-stage p, .build-desc { font-size: 0.95rem; }
    .t-node { font-size: 0.85rem; }

    /* Section heads stack; the two-column grid needs the width it does not have here. */
    .section-head { grid-template-columns: 1fr; gap: 0; }
    .section-head .eyebrow,
    .section-head .section-title,
    .section-head .section-sub { grid-column: 1; }

    /* vh changes as the iOS address bar collapses, which reflows mid-scroll. */
    .booking-modal { max-height: 92dvh; }
    .booking-overlay { padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); }

    .pain-grid { grid-template-columns: 1fr; }
    .pain-card { flex-direction: row; justify-content: flex-start; text-align: left; gap: 1rem; }
    .finder-panel { padding: 1.75rem 1.5rem; }
    .finder-grid { grid-template-columns: 1fr; }
    .finder-cta { flex-direction: column; align-items: flex-start; }
    /* transform: static stacked state (no scroll choreography on small screens) */
    .t-board { grid-template-columns: 1fr; gap: 2rem; padding: 1rem; }
    .t-col.t-before .t-col-label,
    .t-col.t-after .t-col-label { text-align: center; }
    .t-before .t-chain,
    .t-after .t-chain { align-items: center; }
    /* opacity dimming handled above with colour instead — element opacity composited
       these ten nodes to 1.71:1 and made the whole BEFORE argument invisible on phones */
    .t-after .t-node { opacity: 1; transform: none; }
    .t-core { margin: 0 auto; }
    .build-block {
        grid-template-columns: 1fr;
        grid-template-areas: "index" "title" "diagram" "desc";
        gap: 1.25rem; padding: 1.75rem 1.5rem;
    }
    /* The ≤1024 block centres the diagram, which is right while it shares a row with the
       56px index column. Once the card stacks, everything else is left-aligned and a
       centred diagram reads as a misalignment. */
    .build-diagram svg { margin: 0; }
    /* Wrapped horizontally, the chips break into ragged rows and leave arrows stranded at
       row ends pointing at nothing. One chip per row with the arrows turned to point down
       keeps the chain readable. */
    .local-flow { flex-direction: column; row-gap: 0.5rem; }
    .local-arrow { transform: rotate(90deg); }
    .roadmap { grid-template-columns: 1fr; gap: 1rem; }
    .fit-grid { grid-template-columns: 1fr; }
    .story-grid { grid-template-columns: 1fr; gap: 3rem; }
    .booking-modal { padding: 2rem 1.5rem; }
    .cal-embed iframe { height: clamp(380px, 60dvh, 560px); }
    .cal-embed-modal iframe { height: clamp(280px, 48dvh, 400px); }
}

/* --- P3 motion: hero load-in + scroll reveal (unchanged machinery) --- */

@keyframes hero-rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}
html.js .hero .container > * {
    opacity: 0;
    animation: hero-rise .35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
html.js .hero .container > *:nth-child(2) { animation-delay: 80ms; }
html.js .hero .container > *:nth-child(3) { animation-delay: 160ms; }
html.js .hero .container > *:nth-child(4) { animation-delay: 240ms; }
html.js .hero .container > *:nth-child(5) { animation-delay: 320ms; }

html.js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition-property: opacity, transform;
    transition-duration: .6s, .6s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--reveal-delay, 0ms);
}
html.js .reveal.is-revealed { opacity: 1; transform: none; }
html.js .reveal.is-settled {
    transition: var(--transition);
    transition-delay: 0ms;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
    html { scroll-behavior: auto; }
    html.js .hero .container > * { opacity: 1; transform: none; }
    html.js .reveal,
    html.js .reveal.is-settled { opacity: 1; transform: none; transition: none; }
    .t-after .t-node { opacity: 1; transform: none; }
    .t-before .t-node.is-dim { opacity: 1; transform: none; }
    .t-core.is-live { transform: none; }
}

/* ---------------------------------------------------------------
   PRINT — the magnet offers "print it now as a PDF", so the printed
   page has to be the map itself, not a screenshot of a dark website.
   --------------------------------------------------------------- */
@media print {
    :root { --ink-hi: #111; --ink-body: #222; --ink-mid: #444; --signal: #173457; }
    body { background: #fff !important; color: #111 !important; }
    body::after { display: none !important; }
    nav, .hero, .booking-overlay, .fleet-section, .book-section, .footer,
    #familiar, #transform, #build, #fit, #architecture, #story, #global, #faq,
    .finder-panel > .finder-label, #finder-input, .finder-foot, .finder-loading,
    .finder-magnet, .finder-cta, .section-cta { display: none !important; }
    #finder, .finder-panel, .finder-results { display: block !important; padding: 0; margin: 0; border: 0; box-shadow: none; background: #fff !important; }
    .finder-results-title { font-size: 18pt; color: #111 !important; margin-bottom: 12pt; }
    .finder-grid { display: block !important; }
    .finder-item {
        page-break-inside: avoid;
        border: 1px solid #ccc !important;
        background: #fff !important;
        margin-bottom: 8pt;
        padding: 10pt;
    }
    .finder-item h4 { color: #111 !important; font-size: 11pt; }
    .finder-item p { color: #333 !important; font-size: 10pt; }
    .finder-num { color: #173457 !important; }
    .finder-results::after {
        content: 'Prepared by AL AI · Mumbai · aazzel.com';
        display: block;
        margin-top: 16pt;
        padding-top: 8pt;
        border-top: 1px solid #ccc;
        font-size: 9pt;
        color: #666;
    }
}

/* --- long-form prose (privacy, and the guide pages Wave 6 adds) --- */
.prose { max-width: 62ch; }
.prose h2 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--ink-hi);
    margin: 2.5rem 0 0.75rem;
}
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--ink-body); font-size: 1rem; line-height: 1.75; margin-bottom: 1rem; text-wrap: pretty; }
.prose strong { color: var(--ink-hi); }
.booking-consent { color: var(--ink-mid); font-size: 0.85rem; line-height: 1.55; margin: 0.75rem 0 1rem; }
.booking-consent a { color: var(--signal); }

/* ---------------------------------------------------------------
   Sub-page furniture: breadcrumbs, comparison tables, numbered
   question lists, footer link mesh.
   --------------------------------------------------------------- */

.crumbs { padding: 120px 0 0; }
.crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    max-width: 1320px;
    margin: 0 auto;
    padding-inline: max(1.5rem, env(safe-area-inset-left));
    font-size: 0.8rem;
    color: var(--ink-low);
}
.crumbs li + li::before { content: '/'; margin-right: 0.5rem; color: var(--ink-low); }
.crumbs a { color: var(--ink-mid); text-decoration: none; display: inline-block; padding: 0.35rem 0; min-height: 24px; }
.crumbs a:hover { color: var(--signal); }
.crumbs [aria-current] { color: var(--ink-hi); }
/* The nav is fixed, so a sub-page's first element has to clear it. Scoped to pages that
   have breadcrumbs — the homepage's hero owns its own top padding. */
main > .container { padding-block: 100px; }
.crumbs + .container { padding-block: 1.5rem 100px; }

/* comparison table — the most-cited structure in AI answers, and the fastest way for a
   buyer to see where an option genuinely does not fit */
.table-wrap { overflow-x: auto; margin: 0 0 2.5rem; }
.cmp {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-size: 0.95rem;
}
.cmp caption {
    text-align: left;
    color: var(--ink-low);
    font-size: 0.8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding-bottom: 0.9rem;
}
.cmp th, .cmp td {
    text-align: left;
    vertical-align: top;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--hairline);
}
.cmp thead th { color: var(--ink-hi); font-weight: 600; border-bottom-color: var(--edge-lit); }
.cmp tbody th { color: var(--ink-hi); font-weight: 600; }
.cmp td { color: var(--ink-mid); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }

.qlist { list-style: none; counter-reset: q; display: grid; gap: 1.4rem; margin-bottom: 2rem; }
.qlist li { counter-increment: q; padding-left: 2.6rem; position: relative; }
.qlist li::before {
    content: counter(q, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0.15em;
    font: 500 0.8rem/1 'IBM Plex Mono', ui-monospace, monospace;
    color: var(--signal);
}
.qlist b { display: block; color: var(--ink-hi); font-size: 1.02rem; margin-bottom: 0.3rem; }
.qlist span { display: block; color: var(--ink-mid); font-size: 0.95rem; line-height: 1.65; }
.qlist .q-hard { border-left: 2px solid var(--signal); padding-left: 0.8rem; }

.page-updated { display: block; margin-top: 1.5rem; color: var(--ink-low); font-size: 0.8rem; }

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.4rem;
    margin: 2rem 0 0;
    font-size: 0.9rem;
}
.footer-links a { color: var(--ink-mid); text-decoration: none; display: inline-block; padding: 0.4rem 0; min-height: 24px; }
.footer-links a:hover { color: var(--signal); }

@media (max-width: 720px) {
    .crumbs { padding-top: 96px; }
    main > .container { padding-block: 64px; }
    .crumbs + .container { padding-block: 1.75rem 64px; }
}

/* Related-links row: a navigation cluster, not prose — so unlike inline links it gets
   a real target size. */
.prose h2 + p a[href^="/"] { display: inline-block; padding: 0.4rem 0; min-height: 24px; }