/* ═══════════════════════════════════════════════════════════════════════
       SELF-HOSTED JETBRAINS MONO — the app's font. The WHOLE page is mono.
       No Google Fonts, no CDN, no Inter, no system-sans for display text.
       ═══════════════════════════════════════════════════════════════════════ */
    @font-face {
      font-family: 'JetBrains Mono';
      font-style: normal; font-weight: 400; font-display: swap;
      src: url('/static/fonts/jetbrains-mono-400.woff2') format('woff2');
    }
    @font-face {
      font-family: 'JetBrains Mono';
      font-style: normal; font-weight: 500; font-display: swap;
      src: url('/static/fonts/jetbrains-mono-500.woff2') format('woff2');
    }
    @font-face {
      font-family: 'JetBrains Mono';
      font-style: normal; font-weight: 600; font-display: swap;
      src: url('/static/fonts/jetbrains-mono-600.woff2') format('woff2');
    }
    @font-face {
      font-family: 'JetBrains Mono';
      font-style: normal; font-weight: 700; font-display: swap;
      src: url('/static/fonts/jetbrains-mono-700.woff2') format('woff2');
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

    /* ═══════════════════════════════════════════════════════════════════════
       PORCELAIN THEME — warm off-white surfaces, obsidian ink, green + amber
       as STATUS/ACCENT only. Never blue.
       ═══════════════════════════════════════════════════════════════════════ */
    :root {
      /* PORCELAIN — exact tokens from native CBTheme.porcelain
         (native/CrewbriefOS/CrewbriefOS/Theme/CBTheme.swift). Page chrome
         keeps these so the website and the in-phone app share one palette. */
      --bg:        #F4F4F1;   /* CBTheme.porcelain.bg */
      --bg-warm:   #FAFAF7;   /* lifted surface / raised page cards */
      --bg-sink:   #EEEEEA;   /* CBTheme.porcelain.ringTrack — recessed band */
      --bg-card:   #FFFFFF;   /* CBTheme.porcelain.cardElevated */
      --ink:       #17191B;   /* CBTheme.porcelain.textPrimary (obsidian ink) */
      --ink-2:     #4A5056;   /* CBTheme.porcelain.textSecondary */
      --ink-3:     #7A8087;   /* CBTheme.porcelain.textTertiary */
      --ink-4:     #808A94;   /* CBTheme.porcelain.textMuted (darkened from #9BA1A6 for AA legibility) */
      --line:      #E8E8E3;   /* CBTheme.porcelain.hairline */
      --line-md:   #DEDED8;
      --green:     #0E8F52;   /* CBTheme.porcelain.green */
      --green-deep:#0B7644;
      --green-dim: rgba(14,143,82,0.10);
      --amber:     #B97A0A;   /* CBTheme.porcelain.amber */
      --amber-bright:#B97A0A;
      --amber-dim: rgba(185,122,10,0.12);
      --red:       #D8504A;   /* CBTheme.porcelain.red */
      /* NEVER blue — native maps blue/indigo to neutral greys (de-blued). */
      --violet:    #7A8087;
      --chip:      #F6F6F3;   /* CBTheme.porcelain.chipFill */
      --mono:      'JetBrains Mono', ui-monospace, monospace;
      --shadow-sm: 0 1px 2px rgba(21,21,26,0.04), 0 1px 3px rgba(21,21,26,0.05);
      --shadow-md: 0 2px 6px rgba(21,21,26,0.05), 0 8px 24px rgba(21,21,26,0.07);
      --shadow-lg: 0 12px 36px rgba(21,21,26,0.10), 0 40px 80px rgba(21,21,26,0.10);
    }

    /* overflow-x: clip (NOT hidden) on html — `hidden` on body breaks
       position:fixed on iOS Safari once the page scrolls, which un-stuck the
       CTA bar when the sections were added. `clip` contains overflow without
       creating a scroll container, so fixed stays fixed. */
    html { scroll-behavior: smooth; overflow-x: clip; background: var(--bg); }
    body {
      font-family: var(--mono);
      background: var(--bg);
      color: var(--ink-2);
      -webkit-font-smoothing: antialiased;
      line-height: 1.6;
      overflow-x: clip;
      min-height: 100dvh;
      display: flex; flex-direction: column;
    }
    a { color: inherit; }
    ::selection { background: rgba(31,157,87,0.16); }

    /* Soft warm wash behind the page — premium depth without color. */
    body::before {
      content: '';
      position: fixed; inset: 0; z-index: -2;
      background:
        radial-gradient(120% 60% at 50% -8%, #FBFBF8 0%, rgba(251,251,248,0) 60%),
        radial-gradient(90% 50% at 90% 0%, rgba(31,157,87,0.04) 0%, rgba(31,157,87,0) 55%);
      pointer-events: none;
    }
    /* Living warm-mesh aura — slow drift, transform-only, killed under reduced-motion. */
    .hero-aura {
      position: fixed; inset: -20% -10% auto -10%; height: 92vh; z-index: -1;
      pointer-events: none; opacity: 0.9;
      background:
        radial-gradient(38% 42% at 22% 28%, rgba(31,157,87,0.10) 0%, rgba(31,157,87,0) 70%),
        radial-gradient(34% 40% at 80% 16%, rgba(201,130,27,0.085) 0%, rgba(201,130,27,0) 70%),
        radial-gradient(50% 44% at 60% 70%, rgba(124,91,214,0.05) 0%, rgba(124,91,214,0) 72%);
      filter: blur(8px);
      will-change: transform;
      animation: aura-drift 26s ease-in-out infinite alternate;
    }
    @keyframes aura-drift {
      0%   { transform: translate3d(-2%, -1%, 0) scale(1.02); }
      50%  { transform: translate3d(3%, 2%, 0) scale(1.06); }
      100% { transform: translate3d(-1%, 3%, 0) scale(1.03); }
    }

    /* ── MINIMAL HEADER ──────────────────────────────────── */
    header.top {
      position: sticky; top: 0; z-index: 200;
      background: rgba(244,244,239,0.82);
      backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px);
      border-bottom: 1px solid var(--line);
    }
    .top-inner {
      max-width: 1180px; margin: 0 auto;
      padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
      height: 60px; display: flex; align-items: center; justify-content: space-between;
    }
    .top-logo { display: inline-flex; align-items: center; text-decoration: none; }
    .top-logo img { height: 30px; width: auto; display: block; }
    .top-cta {
      font-family: var(--mono);
      font-size: 13px; font-weight: 600; letter-spacing: -0.005em;
      padding: 11px 20px; border-radius: 10px;
      background: var(--ink); color: #FAFAF7;
      text-decoration: none;
      box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, var(--shadow-sm);
      transition: transform 180ms cubic-bezier(.2,.8,.2,1), box-shadow 180ms ease, background 180ms ease;
      position: relative; overflow: hidden;
    }
    .top-cta:hover { background: #000; transform: translateY(-1px); box-shadow: var(--shadow-md); }
    .top-cta:active { transform: translateY(0); }

    /* ── MAIN STAGE — the phone is the whole page, vertically centred so the
       entire device + its shadow-box CTA fit one viewport with no page scroll. */
    main {
      flex: 1 0 auto;
      max-width: 1180px; margin: 0 auto; width: 100%;
      padding: max(18px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
               max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
      display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
      min-height: 100vh;
      min-height: 100svh;   /* match the phone height so sections start right after it */
    }
    @keyframes hero-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

    /* ── CTA button shared style (used inside the shadow-box) ─ */
    .btn-primary {
      font-family: var(--mono);
      font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
      padding: 14px 26px; border-radius: 13px;
      background: var(--ink); color: #FAFAF7;
      text-decoration: none;
      display: inline-flex; align-items: center; justify-content: center; gap: 10px;
      box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, var(--shadow-md);
      transition: transform 180ms cubic-bezier(.2,.8,.2,1), box-shadow 180ms ease, background 180ms ease;
      position: relative; overflow: hidden;
    }
    .btn-primary .btn-arrow { transition: transform 220ms cubic-bezier(.2,.8,.2,1); transform: translateX(0); }
    .btn-primary:hover { background: #000; box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, var(--shadow-lg); transform: translateY(-1px); }
    .btn-primary:hover .btn-arrow { transform: translateX(4px); }
    .btn-primary:active { transform: translateY(0); }
    /* Sheen sweep across the primary CTA on hover (clipped, GPU-only). */
    .btn-primary::after, .top-cta::after {
      content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
      background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.20) 50%, transparent 100%);
      transform: skewX(-18deg); pointer-events: none;
      transition: left 620ms cubic-bezier(.2,.8,.2,1);
    }
    .btn-primary:hover::after, .top-cta:hover::after { left: 130%; }

    .cta-fine {
      font-size: 12px; font-weight: 500; letter-spacing: 0.01em;
      color: var(--ink-3); line-height: 1.6; max-width: 520px;
    }
    .cta-fine strong { color: var(--ink); font-weight: 600; }

    /* ── TRUST LINE ──────────────────────────────────────── */
    .trust {
      margin-top: 26px; text-align: center;
      font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em;
      color: var(--ink-3);
      display: inline-flex; align-items: center; gap: 9px; justify-content: center;
    }
    .trust::before {
      content: ''; width: 6px; height: 6px; border-radius: 50%;
      background: var(--green); box-shadow: 0 0 0 4px rgba(31,157,87,0.12); flex-shrink: 0;
    }
    .trust strong { color: var(--ink); font-weight: 600; }

    /* ── MINIMAL FOOTER ──────────────────────────────────── */
    footer {
      flex-shrink: 0;
      border-top: 1px solid var(--line);
      padding: 22px max(22px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
    }
    .footer-inner {
      max-width: 1180px; margin: 0 auto;
      display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 18px;
      font-size: 11px; font-weight: 500; letter-spacing: 0.04em; color: var(--ink-3);
    }
    .footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
    .footer-links a { text-decoration: none; color: var(--ink-3); transition: color .15s; }
    .footer-links a:hover { color: var(--ink); }
    @media (max-width: 480px) { .footer-inner { justify-content: center; text-align: center; } }

    /* ═══════════════════════════════════════════════════════════════════════
       PHONE STAGE — lifted UNCHANGED from index_v2 so it stays navigable.
       Mode toggle (Home / Layover) + bottom-nav pane switching all live here.
       ═══════════════════════════════════════════════════════════════════════ */
    /* ── OCCUPATION GATE — on load the dashboard is darkened and the eye is
       drawn to the profile buttons (pilot pre-highlighted, since most visitors
       are pilots). Tapping confirms the profile (verifies who they are), fades
       the dashboard in, and reveals the trial CTA. Choice → onboarding. ─────── */
    .occ-pills { display: flex; gap: 9px; flex-direction: column; }
    .occ-pill { font-family: var(--mono); font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em; padding: 14px 18px; width: 100%; border-radius: 13px; border: 1px solid var(--line-md); background: var(--bg-card); color: var(--ink); cursor: pointer; transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 120ms ease, box-shadow 160ms ease; white-space: nowrap; box-shadow: var(--shadow-sm); }
    .occ-pill:hover { border-color: var(--ink-3); }
    .occ-pill.active { background: var(--ink); color: #FAFAF7; border-color: var(--ink); box-shadow: var(--shadow-md); }
    .occ-pill:active { transform: scale(0.98); }

    /* Dashboard darkened+blurred until a profile is confirmed; clears on tap. */
    .pm-viewport { transition: filter 0.6s cubic-bezier(.2,.8,.2,1); }
    .pm-viewport.gated { filter: blur(9px) saturate(0.6) brightness(0.44); pointer-events: none; }
    @media (prefers-reduced-motion: reduce) { .pm-viewport { transition: none; } }
    /* Visible keyboard focus everywhere (a11y). */
    :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
    /* Small phones: let the env line + hero headline wrap instead of clipping. */
    @media (max-width: 360px) { .nv-hero-headline { white-space: normal; } .nv-envline { font-size: 9.5px; letter-spacing: 0; } }
    /* Occupation-tailored content uses data-occ-for; non-default (travel/pro)
       variants carry inline display:none so the pilot default paints with no
       flash, and JS swaps inline display on selection (preserves grid/flex). */

    .hero-stage {
      width: 100%; margin: 0 auto;
      display: flex; flex-direction: column; align-items: center;
      position: relative;
    }
    .pm-mode-rail { text-align: center; margin-bottom: 18px; }
    .pm-mode-hint {
      font-family: var(--mono); font-size: 10px; letter-spacing: 0.10em;
      text-transform: uppercase; font-weight: 500;
      color: var(--ink-4); margin: 10px 0 0;
      pointer-events: none; animation: pm-hint-glow 2.6s ease-in-out infinite;
    }
    .pm-mode-hint.faded { opacity: 0; transition: opacity 240ms ease; }
    @keyframes pm-hint-glow { 0%,100%{opacity:0.4;} 50%{opacity:0.8;} }
    @media (prefers-reduced-motion: reduce) { .pm-mode-hint { animation: none; opacity: 0.55; } }

    .pm-stage { display: flex; justify-content: center; position: relative; }
    /* Entrance lift */
    .pm-frame.enter { animation: pm-enter 700ms cubic-bezier(.2,.8,.2,1) both; }
    @keyframes pm-enter { from { opacity: 0; transform: translateY(26px) scale(.985); } to { opacity: 1; transform: none; } }
    @media (prefers-reduced-motion: reduce) { .pm-frame.enter { animation: none; } }

    /* Gentle continuous float on the phone frame. */
    @keyframes pm-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
    .pm-frame.floating { animation: pm-float 6.5s ease-in-out infinite; }
    @media (prefers-reduced-motion: reduce) { .pm-frame.floating { animation: none; } }

    /* ── PHONE FRAME — iPhone 17 Pro Max proportions (≈1320×2868 → 1:2.172).
       Width is the smaller of a desktop cap, the mobile viewport, OR what the
       viewport HEIGHT allows (so the whole device + shadow-box fit one screen
       with no page scroll). aspect-ratio derives the height. */
    .pm-frame {
      /* Maximise screen real-estate (founder 2026-06-16): fill the width and
         nearly the full small-viewport height, deliberately breaking strict
         iPhone proportions. The sticky CTA bar (fixed to the browser bottom) is
         allowed to overlap the phone's lower edge. First height line = no-svh
         fallback. */
      width: min(480px, 98vw);
      /* Height flows with content (no fixed height) so the phone is part of the
         page scroll — one continuous drag goes phone → sections, no nested-scroll
         trap (founder 2026-06-16). The viewport carries the one-screen floor. */
      background: #08080A;            /* near-black bezel */
      border: none;
      border-radius: 50px;           /* fixed radius → even concentric corners */
      box-shadow:
        0 0 0 1px rgba(255,255,255,0.05) inset,
        var(--shadow-lg);
      position: relative; padding: 8px; overflow: hidden;  /* even thin black bezel all around */
    }
    /* Dynamic Island — compact (founder 2026-06-16: smaller). */
    .pm-frame::before {
      content: ''; position: absolute;
      top: 13px; left: 50%; transform: translateX(-50%);
      width: 78px; height: 20px; background: #000; border-radius: 11px; z-index: 12;
    }
    /* Home indicator pill */
    .pm-frame::after {
      content: ''; position: absolute;
      bottom: 10px; left: 50%; transform: translateX(-50%);
      width: 128px; height: 4px; background: rgba(21,21,26,0.28); border-radius: 3px;
      z-index: 12; pointer-events: none;
    }

    .pm-viewport {
      width: 100%; height: auto;
      min-height: calc(100svh - 30px);  /* fills ≥1 screen; grows with content */
      border-radius: 44px;            /* = frame radius (52) − bezel (8): concentric */
      background: var(--bg);          /* PORCELAIN inside the phone */
      color: var(--ink-2);
      overflow: visible;              /* no inner scroll — page scroll flows through */
      padding: 32px 0 0; position: relative;   /* greeting sits higher (founder 2026-06-16) */
    }
    .pm-viewport::-webkit-scrollbar { display: none; }

    .pm-screen {
      padding: 6px 16px 4px;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       NATIVE-FAITHFUL IN-PHONE CLASSES — a literal HTML/CSS recreation of the
       SwiftUI dashboard (HomeView.swift / HeroCard.swift / DataTile.swift /
       OpTile.swift / RecoveryRing.swift). Flat hairline cards on porcelain,
       JetBrains Mono everywhere, green/amber status accents, NEVER blue.
       Class names kept on the `.pm-*` namespace the pane JS already uses.
       ═══════════════════════════════════════════════════════════════════════ */

    /* cbCard — DataTile/OpTile/HeroCard surface: flat white, hairline, soft
       porcelain shadow (CBTheme.porcelain.shadow1/shadow2). */
    .nv-card {
      background: var(--bg-card);
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: 0 1px 1px rgba(20,22,25,0.05), 0 10px 14px rgba(20,22,25,0.05);
    }

    /* HomeView.header — greeting (jbMono 20/700) + env line (jbMono 11.5/500). */
    .nv-greeting { font-family: var(--mono); font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; line-height: 1.15; }
    .nv-greeting .accent { color: var(--green); }
    .nv-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
    .nv-ghost-row { display: flex; gap: 7px; flex-shrink: 0; padding-top: 1px; }
    .nv-ghost { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg-card); color: var(--ink-3); display: flex; align-items: center; justify-content: center; }
    .nv-ghost svg { width: 15px; height: 15px; }
    .nv-envline { font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--ink-4); letter-spacing: 0.03em; margin-top: 5px; line-height: 1.4; white-space: nowrap; }
    .nv-envline .g { color: var(--green); }
    .nv-envline .a { color: var(--amber); }
    .nv-envline .t { color: var(--ink-3); }

    /* HeroCard — readiness verdict. Glow = status color (radial, top-right). */
    .nv-hero {
      position: relative; overflow: hidden;
      padding: 13px; border-radius: 18px; margin-top: 9px;
      background:
        radial-gradient(260px 240px at 82% 10%, rgba(14,143,82,0.10), transparent 70%),
        var(--bg-card);
      border: 1px solid var(--line);
      box-shadow: 0 1px 1px rgba(20,22,25,0.05), 0 10px 14px rgba(20,22,25,0.05);
    }
    .nv-hero.amber { background: radial-gradient(260px 240px at 82% 10%, rgba(185,122,10,0.10), transparent 70%), var(--bg-card); }
    .nv-hero-top { display: flex; align-items: center; gap: 16px; }
    /* RecoveryRing — 88pt, 7pt stroke, score over READY, status color. */
    .nv-ring { width: 84px; height: 84px; flex-shrink: 0; position: relative; }
    .nv-ring svg { display: block; transform: rotate(-90deg); }
    .nv-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
    .nv-ring-score { font-family: var(--mono); font-size: 26px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
    .nv-ring-ready { font-family: var(--mono); font-size: 8.5px; font-weight: 600; color: var(--ink-4); letter-spacing: 0.22em; }
    .nv-eyebrow { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
    .nv-hero-headline { font-family: var(--mono); font-size: 13.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.025em; line-height: 1.3; margin-top: 6px; white-space: nowrap; }
    .nv-hero-proj { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.08em; margin-top: 8px; }

    /* TODAY'S MOVES block */
    .nv-moves-hr { height: 1px; background: var(--line); margin-top: 8px; }
    .nv-moves-cap { display: flex; align-items: center; gap: 5px; margin-top: 7px; }
    .nv-moves-cap .nv-eyebrow { color: var(--ink-3); font-size: 9px; }
    .nv-moves-cap .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
    .nv-move { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
    .nv-move-domain { font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--ink-3); letter-spacing: 0.12em; }
    .nv-move-dir { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; margin-left: auto; text-align: right; }
    .nv-move-dir.green { color: var(--green); }
    .nv-move-dir.amber { color: var(--amber); }
    .nv-move-chev { color: var(--ink-4); font-family: var(--mono); font-size: 11px; }

    /* NextDutyStrip — REPORT/DEPARTURE clocks + route. */
    .nv-duty { margin-top: 8px; padding: 12px 14px; }
    .nv-duty-top { display: flex; align-items: center; gap: 10px; }
    .nv-duty-icon { color: var(--ink-3); flex-shrink: 0; }
    .nv-duty-icon svg { width: 16px; height: 16px; display: block; }
    .nv-duty-flight { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
    .nv-duty-route { font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--ink-3); letter-spacing: 0.06em; margin-top: 2px; }
    .nv-duty-clocks { margin-left: auto; text-align: right; }
    .nv-duty-day { font-family: var(--mono); font-size: 8.5px; font-weight: 600; color: var(--ink-4); letter-spacing: 0.14em; }
    .nv-duty-z { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink); }
    .nv-duty-rep { font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
    .nv-duty-chev { color: var(--ink-4); font-family: var(--mono); font-size: 12px; align-self: center; }

    /* SectionHeader — BODY / OPERATIONS / LIFE. */
    .nv-section { font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--ink-3); letter-spacing: 0.18em; text-transform: uppercase; margin: 12px 0 7px; }

    /* DataTile row (BODY / LIFE) — icon + eyebrow, value(20/700)+unit, sub, footer. */
    .nv-tilerow { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
    .nv-tile { padding: 12px; border-radius: 16px; }
    .nv-tile-head { display: flex; align-items: center; gap: 6px; }
    .nv-tile-head svg { width: 13px; height: 13px; color: var(--ink-3); flex-shrink: 0; }
    .nv-tile-head .ic-green { color: var(--green); }
    .nv-tile-head .ic-amber { color: var(--amber); }
    .nv-tile-head .ic-red { color: var(--red); }
    .nv-tile-label { font-family: var(--mono); font-size: 9px; font-weight: 600; color: var(--ink-4); letter-spacing: 0.10em; }
    .nv-tile-val { display: flex; align-items: baseline; gap: 3px; margin-top: 10px; }
    .nv-tile-num { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -0.03em; line-height: 1; }
    .nv-tile-num.green { color: var(--green); } .nv-tile-num.amber { color: var(--amber); } .nv-tile-num.red { color: var(--red); }
    .nv-tile-unit { font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--ink-4); }
    .nv-tile-sub { font-family: var(--mono); font-size: 8.5px; font-weight: 500; color: var(--ink-4); letter-spacing: 0.06em; margin-top: 5px; text-transform: uppercase; }
    .nv-tile-sub.green { color: var(--green); } .nv-tile-sub.amber { color: var(--amber); } .nv-tile-sub.red { color: var(--red); }
    .nv-prog { height: 3px; background: var(--bg-sink); border-radius: 2px; overflow: hidden; margin-top: 7px; }
    .nv-prog > span { display: block; height: 100%; background: var(--green); border-radius: 2px; }
    .nv-prog > span.amber { background: var(--amber); }
    .nv-spark { display: block; width: 100%; height: 9px; margin-top: 6px; }

    /* ModuleGrid (OPERATIONS) — OpTile 4-col grid, icon over mono label. */
    .nv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
    .nv-op { padding: 11px 4px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; }
    .nv-op svg { width: 18px; height: 18px; color: var(--ink-2); }
    .nv-op-label { font-family: var(--mono); font-size: 9px; font-weight: 600; color: var(--ink-4); letter-spacing: 0.10em; }
    .nv-op-dot { position: absolute; top: 9px; right: 9px; width: 10px; height: 10px; border-radius: 50%; }
    .nv-op-dot.amber { background: var(--amber); } .nv-op-dot.red { background: var(--red); }

    /* System footer — lock + AES-128 ENCRYPTED, green. */
    .nv-footer { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 16px 0 4px; }
    .nv-footer svg { width: 10px; height: 10px; color: var(--green); }
    .nv-footer span { font-family: var(--mono); font-size: 9px; font-weight: 600; color: var(--green); letter-spacing: 0.14em; }

    /* Generic native list row (Health/Ops/Finance/Tasks/Settings panes). */
    .nv-list { padding: 4px 14px; }
    .nv-row { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
    .nv-row:first-child { border-top: 0; }
    .nv-row-ic { width: 16px; color: var(--ink-3); flex-shrink: 0; display: flex; }
    .nv-row-ic svg { width: 15px; height: 15px; }
    .nv-row-main { flex: 1; min-width: 0; }
    .nv-row-title { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
    .nv-row-sub { font-family: var(--mono); font-size: 9px; font-weight: 500; color: var(--ink-4); letter-spacing: 0.06em; margin-top: 2px; text-transform: uppercase; }
    .nv-row-val { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; text-align: right; }
    .nv-row-val.green { color: var(--green); } .nv-row-val.amber { color: var(--amber); } .nv-row-val.red { color: var(--red); } .nv-row-val.muted { color: var(--ink-4); }
    .nv-chev { color: var(--ink-4); font-family: var(--mono); font-size: 13px; }

    /* Big hero number block (Recovery / Finance / preflight countdown panes). */
    .nv-bighero { padding: 16px; border-radius: 18px; margin-bottom: 12px; }
    .nv-bighero-cap { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
    .nv-bighero-num { font-family: var(--mono); font-size: 38px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin-top: 8px; color: var(--ink); }
    .nv-bighero-num.green { color: var(--green); } .nv-bighero-num.amber { color: var(--amber); }
    .nv-bighero-sub { font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--ink-3); letter-spacing: 0.04em; margin-top: 6px; }

    /* Stat pair (Recovery vitals / Health macros). */
    .nv-stat2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .nv-stat3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

    /* Progress bar row (macros / budgets / goals). */
    .nv-barrow { padding: 11px 0; border-top: 1px solid var(--line); }
    .nv-barrow:first-child { border-top: 0; }
    .nv-barhead { display: flex; justify-content: space-between; align-items: baseline; }
    .nv-barhead .l { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink); }
    .nv-barhead .v { font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--ink-3); }
    .nv-bar { height: 4px; background: var(--bg-sink); border-radius: 3px; overflow: hidden; margin-top: 6px; }
    .nv-bar > span { display: block; height: 100%; background: var(--green); border-radius: 3px; }
    .nv-bar > span.amber { background: var(--amber); }

    /* Pills (status chips). */
    .nv-pillrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
    .nv-pill { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-md); color: var(--ink-3); background: var(--chip); }
    .nv-pill.green { color: var(--green); border-color: rgba(14,143,82,0.28); background: var(--green-dim); }
    .nv-pill.amber { color: var(--amber); border-color: rgba(185,122,10,0.28); background: var(--amber-dim); }

    /* Checkbox todo row. */
    .nv-todo { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); }
    .nv-todo:first-child { border-top: 0; }
    .nv-cb { width: 16px; height: 16px; border-radius: 5px; border: 1px solid var(--line-md); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; }
    .nv-todo.done .nv-cb { background: var(--green); border-color: var(--green); }
    .nv-todo-txt { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink); flex: 1; }
    .nv-todo.done .nv-todo-txt { color: var(--ink-4); text-decoration: line-through; }
    .nv-due { font-family: var(--mono); font-size: 9px; font-weight: 600; color: var(--ink-4); letter-spacing: 0.06em; }
    .nv-due.red { color: var(--red); }

    /* Scroll hint pill */
    .pm-scroll-hint {
      display: none;   /* phone flows in the page now; no inner-scroll hint needed */
      position: absolute; bottom: 76px; right: 14px;
      font-family: var(--mono); font-size: 9px; font-weight: 600; color: var(--ink-2);
      background: rgba(255,255,255,0.92); border: 1px solid var(--line-md);
      padding: 5px 9px; border-radius: 999px; letter-spacing: 0.04em;
      pointer-events: none; transition: opacity .5s ease;
      animation: pm-hint-bob 2.4s ease-in-out infinite; z-index: 11;
      box-shadow: var(--shadow-sm);
    }
    .pm-scroll-hint.faded { opacity: 0; }
    @keyframes pm-hint-bob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(3px);} }
    @media (prefers-reduced-motion: reduce) { .pm-scroll-hint { animation: none; } }

    /* Panes */
    .pm-pane { display: none; opacity: 0; transition: opacity 120ms ease; }
    .pm-pane.active { display: block; opacity: 1; }
    @media (prefers-reduced-motion: reduce) { .pm-pane { transition: none; } }

    /* ═══════════════════════════════════════════════════════════════════════
       NATIVE NAVIGATION MODEL — the Swift app has NO bottom tab bar. It is one
       NavigationStack + a scrolling HomeView; tapping a tile PUSHES a detail
       view. We replicate that: tappable Home elements push a detail pane (slide
       in from the right) with a back chevron header — exactly like iOS.
       ═══════════════════════════════════════════════════════════════════════ */
    .pm-pane > *:last-child { padding-bottom: 92px; }  /* clears the taller sticky bar (pills + CTA) */
    [data-push] { cursor: pointer; transition: transform 140ms cubic-bezier(.2,.8,.2,1); }
    [data-push]:active { transform: scale(0.985); }

    /* Detail-pane back header (replicates the NavigationStack back button). */
    .nv-back {
      position: sticky; top: 0; z-index: 8;
      display: flex; align-items: center; gap: 8px;
      padding: 10px 4px 10px; margin: -2px 0 2px;
      background: linear-gradient(to bottom, var(--bg) 70%, rgba(244,244,241,0));
      font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--green);
      letter-spacing: 0.01em; cursor: pointer; -webkit-user-select: none; user-select: none;
    }
    .nv-back svg { width: 16px; height: 16px; }
    .nv-back:active { opacity: 0.6; }

    /* ═══════════════════════════════════════════════════════════════════════
       STICKY CTA BAR — the trial hook + CTA, fixed to the BOTTOM of the browser
       viewport (founder 2026-06-16: "attach it to the bottom of Safari, sticky
       on scroll; it can cover the bottom of the phone some — maximise real
       estate"). Frosted, always visible, sits above everything.
       ═══════════════════════════════════════════════════════════════════════ */
    .cb-ctabar {
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 400;
      display: flex; flex-direction: column; gap: 9px;
      padding: 9px max(16px, env(safe-area-inset-right))
               calc(9px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
      background: #FBFBFB;            /* sampled from Safari's light toolbar = #FBFBFB (founder 2026-06-16) */
      border-top: 1px solid #ECECEE;
      box-shadow: 0 -8px 24px rgba(20,22,25,0.05);
      animation: cta-rise 640ms cubic-bezier(.2,.8,.2,1) both; animation-delay: 280ms;
    }
    .cb-ctabar-select { display: flex; flex-direction: column; gap: 9px; transition: opacity 0.4s ease; }
    .cb-ctabar-select.hide { opacity: 0; pointer-events: none; }
    .cb-ctabar-prompt { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); text-align: center; }
    .cb-ctabar-main { display: flex; align-items: center; gap: 12px; transition: opacity 0.45s ease; }
    @keyframes cta-rise { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }
    .cb-ctabar-text { flex: 1 1 auto; min-width: 0; text-align: left; }
    .cb-ctabar-k { font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--ink); }
    .cb-ctabar-k b { color: var(--green); font-weight: 700; }
    .cb-ctabar-s { font-family: var(--mono); font-size: 9.5px; font-weight: 500; color: var(--ink-3); letter-spacing: 0.02em; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cb-ctabar-s strong { color: var(--ink); font-weight: 700; }
    .cb-ctabar .btn-primary { flex-shrink: 0; padding: 13px 22px; font-size: 14px; border-radius: 12px; }
    @media (prefers-reduced-motion: reduce) { .cb-ctabar { animation: none; } }
    @media (min-width: 560px) {
      .cb-ctabar-main { justify-content: center; gap: 22px; }
      .cb-ctabar-text { flex: 0 1 auto; }
    }


    /* ═══════════════════════════════════════════════════════════════════════
       RESPONSIVE — phone stays the hero at every width. Desktop centres it
       generously without stretching; tablet + mobile single column.
       ═══════════════════════════════════════════════════════════════════════ */
    @media (min-width: 900px) { main { padding-top: 40px; } }
    @media (max-width: 600px) { main { padding-top: 14px; } }

    @media (prefers-reduced-motion: reduce) {
      .hero-aura { animation: none; }
      .tagline, .tagsub { animation: none; opacity: 1; transform: none; }
      .btn-primary::after, .top-cta::after { display: none; }
    }

    /* ═══════════════════════════════════════════════════════════════════════
       BELOW-THE-FOLD SECTIONS (founder 2026-06-16): the page continues past the
       phone — explanatory sections repurposed from the prior index, restyled in
       porcelain + JetBrains Mono. The sticky CTA bar persists over all of them;
       trust line + footer live at the true bottom.
       ═══════════════════════════════════════════════════════════════════════ */
    .cbx { padding: 46px max(20px, env(safe-area-inset-right)) 46px max(20px, env(safe-area-inset-left)); border-top: 1px solid var(--line); }
    .cbx:first-of-type { padding-top: 40px; }

    /* Modern scroll-reveal (IntersectionObserver-driven) — sections + cards
       fade/rise in as they enter view (founder 2026-06-16: latest animation tech). */
    .cbx-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s cubic-bezier(.2,.8,.2,1), transform 0.7s cubic-bezier(.2,.8,.2,1); will-change: opacity, transform; }
    .cbx-reveal.in { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) { .cbx-reveal { opacity: 1; transform: none; transition: none; } }
    .cbx:nth-of-type(even) { background: var(--bg-warm); }
    .cbx-wrap { max-width: 820px; margin: 0 auto; }
    .cbx-eyebrow { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--green); text-align: center; }
    .cbx-title { font-family: var(--mono); font-size: clamp(21px, 4.6vw, 31px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.16; color: var(--ink); text-align: center; margin: 12px auto 0; max-width: 20ch; }
    .cbx-sub { font-family: var(--mono); font-size: 12.5px; font-weight: 500; line-height: 1.65; color: var(--ink-3); text-align: center; margin: 14px auto 0; max-width: 60ch; }

    /* Stack ("12 apps replaced") */
    .cbx-stack { background: var(--bg-card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-md); padding: 6px 18px; max-width: 460px; margin: 30px auto 0; }
    .cbx-stack ul { list-style: none; }
    .cbx-stack li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12px; }
    .cbx-stack li:first-child { border-top: 0; }
    .cbx-stack .cat { color: var(--ink-2); }
    .cbx-stack .price { color: var(--ink-4); white-space: nowrap; }
    .cbx-tot { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-md); font-family: var(--mono); font-weight: 700; font-size: 13px; }
    .cbx-tot.old .cat { color: var(--ink-3); } .cbx-tot.old .price { color: var(--ink-3); text-decoration: line-through; }
    .cbx-tot.new .cat, .cbx-tot.new .price { color: var(--green); }
    .cbx-savings { font-family: var(--mono); text-align: center; font-size: 12px; color: var(--ink-3); margin-top: 16px; line-height: 1.5; }
    .cbx-savings b { color: var(--ink); font-weight: 700; }
    .cbx-fine { font-family: var(--mono); text-align: center; font-size: 10px; color: var(--ink-4); margin: 16px auto 0; max-width: 56ch; line-height: 1.5; }

    /* Card grid (pillars / personas / steps) */
    .cbx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 13px; margin-top: 30px; }
    .cbx-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 17px; }
    .cbx-card .tag { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); }
    .cbx-card h3 { font-family: var(--mono); font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin: 8px 0 6px; line-height: 1.3; }
    .cbx-card p { font-family: var(--mono); font-size: 11.5px; font-weight: 500; line-height: 1.55; color: var(--ink-3); }
    .cbx-card .name { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }

    /* Pricing card */
    .cbx-price { background: var(--bg-card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-md); padding: 28px 22px; max-width: 420px; margin: 30px auto 0; text-align: center; }
    .cbx-price-amt { font-family: var(--mono); font-size: 44px; font-weight: 700; letter-spacing: -0.04em; color: var(--ink); line-height: 1; }
    .cbx-price-amt span { font-size: 13px; color: var(--ink-4); font-weight: 600; letter-spacing: 0; }
    .cbx-price-alt { font-family: var(--mono); font-size: 12px; color: var(--green); font-weight: 700; margin-top: 6px; }
    .cbx-price ul { list-style: none; text-align: left; margin: 20px 0 0; }
    .cbx-price li { font-family: var(--mono); font-size: 12px; color: var(--ink-2); padding: 9px 0 9px 24px; position: relative; border-top: 1px solid var(--line); line-height: 1.4; }
    .cbx-price li:first-child { border-top: 0; }
    .cbx-price li::before { content: '✓'; position: absolute; left: 1px; color: var(--green); font-weight: 700; }
    .cbx-price li strong { color: var(--ink); font-weight: 700; }
    .cbx-price .btn-primary { margin-top: 20px; width: 100%; }

    /* Founder note */
    .cbx-founder { max-width: 600px; margin: 26px auto 0; }
    .cbx-founder p { font-family: var(--mono); font-size: 13px; line-height: 1.7; color: var(--ink-2); margin-top: 14px; }
    .cbx-founder p:first-child { margin-top: 0; }
    .cbx-founder strong { color: var(--ink); font-weight: 700; }
    .cbx-founder .sig { font-size: 12px; font-weight: 600; color: var(--ink-3); margin-top: 18px; }

    /* FAQ */
    .cbx-faq { max-width: 620px; margin: 26px auto 0; }
    .cbx-faq details { border-top: 1px solid var(--line); }
    .cbx-faq details:last-child { border-bottom: 1px solid var(--line); }
    .cbx-faq summary { cursor: pointer; padding: 16px 0; font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 14px; align-items: center; }
    .cbx-faq summary::-webkit-details-marker { display: none; }
    .cbx-faq summary::after { content: '+'; color: var(--ink-4); font-weight: 700; flex-shrink: 0; }
    .cbx-faq details[open] summary::after { content: '\2212'; }
    .cbx-faq .ans { font-family: var(--mono); font-size: 12px; line-height: 1.65; color: var(--ink-3); padding: 0 0 16px; }
    .cbx-faq a { color: var(--green); }

    /* Contact form (quick, mailto-backed) */
    .cb-contact { max-width: 460px; margin: 26px auto 0; display: flex; flex-direction: column; gap: 10px; }
    .cb-field { font-family: var(--mono); font-size: 13px; color: var(--ink); background: var(--bg-card); border: 1px solid var(--line-md); border-radius: 12px; padding: 13px 14px; width: 100%; box-shadow: var(--shadow-sm); transition: border-color .15s; resize: vertical; }
    .cb-field::placeholder { color: var(--ink-4); }
    .cb-field:focus { outline: none; border-color: var(--green); }
    .cb-contact .btn-primary { width: 100%; justify-content: center; }
    .cb-contact-or { font-family: var(--mono); font-size: 11px; color: var(--ink-4); text-align: center; margin-top: 4px; }
    .cb-contact-or a { color: var(--green); }

    /* App band (right under the phone) + final CTA */
    .cbx-appband { text-align: center; }
    .cbx-final { text-align: center; }
    .cbx-final .btn-primary { margin-top: 22px; font-size: 16px; padding: 16px 30px; }
    .cbx-final .trust { display: inline-flex; margin-top: 26px; }

    /* Footer clears the persistent sticky CTA bar at the true bottom. */
    footer { padding-bottom: calc(118px + env(safe-area-inset-bottom)); }

    /* ── START-FREE STEP — Start free smoothly expands to a fullscreen porcelain
       step: airline (pilot) / occupation (everyone else). Choice → onboarding. */
    .cb-signup {
      position: fixed; inset: 0; z-index: 600;
      background: var(--bg); display: flex; flex-direction: column;
      transform: translateY(100%); visibility: hidden;
      transition: transform 0.5s cubic-bezier(.2,.8,.2,1), opacity 0.3s ease, visibility 0s linear 0.5s;
      overflow-y: auto; -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;   /* no rubber-band revealing dark canvas behind */
    }
    .cb-signup.open { transform: none; visibility: visible; transition: transform 0.5s cubic-bezier(.2,.8,.2,1); }
    .cb-signup.leaving { opacity: 0; }   /* gentle fade before navigating on selection */
    .cb-signup-top { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 560px; margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) 20px 4px; }
    .cb-signup-back { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink-3); cursor: pointer; padding: 6px 0; }
    .cb-signup-back svg { width: 16px; height: 16px; }
    .cb-signup-back:active { opacity: 0.6; }
    .cb-signup-step { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-4); }
    .cb-signup-body { flex: 1 0 auto; width: 100%; max-width: 560px; margin: 0 auto; padding: 16px 20px 24px; display: flex; flex-direction: column; }
    /* Auth phase fills the body so the consent + button group at the bottom. */
    #su-auth { flex: 1 0 auto; display: flex; flex-direction: column; }
    .cb-reassure { list-style: none; margin: 20px 0 0; padding: 0; }
    .cb-reassure li { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); line-height: 1.5; padding: 10px 0 10px 26px; position: relative; border-top: 1px solid var(--line); }
    .cb-reassure li:first-child { border-top: 0; }
    .cb-reassure li::before { content: '✓'; position: absolute; left: 2px; color: var(--green); font-weight: 700; }
    .cb-auth-bottom { margin-top: auto; padding-top: 18px; }
    #su-creds { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }
    .cb-creds-label { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
    .cb-creds-label span { color: var(--ink-4); font-weight: 500; text-transform: none; letter-spacing: 0; }
    .cb-creds-note { font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); line-height: 1.5; margin-top: 2px; }

    /* Install steps — icon + text, so they're scannable before the iOS share
       sheet covers the page. */
    .cb-istep { display: flex; align-items: flex-start; gap: 12px; padding: 13px 2px; border-top: 1px solid var(--line); }
    .cb-istep:first-child { border-top: 0; }
    .cb-istep-ic { flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; background: var(--chip); border: 1px solid var(--line-md); display: flex; align-items: center; justify-content: center; color: var(--ink); }
    .cb-istep-ic svg { width: 18px; height: 18px; }
    .cb-istep-tx { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); line-height: 1.45; padding-top: 5px; }
    .cb-istep-tx b { color: var(--ink); font-weight: 700; }
    .cb-install-note { font-family: var(--mono); font-size: 11px; color: var(--amber); background: var(--amber-dim); border: 1px solid rgba(185,122,10,0.25); border-radius: 10px; padding: 11px 13px; margin-top: 14px; line-height: 1.55; }
    .cb-signup-eyebrow { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); }
    .cb-signup-title { font-family: var(--mono); font-size: clamp(23px, 5.4vw, 31px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.14; color: var(--ink); margin-top: 10px; }
    .cb-signup-sub { font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--ink-3); margin-top: 10px; line-height: 1.5; }
    /* Clean radio-style list — fits a long carrier list without crowding. */
    .cb-signup-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
    .cb-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--ink); padding: 14px 16px; border: 1px solid var(--line-md); border-radius: 13px; background: var(--bg-card); cursor: pointer; box-shadow: var(--shadow-sm); transition: border-color .15s, background .15s, transform .12s; }
    .cb-opt::after { content: ''; flex-shrink: 0; width: 19px; height: 19px; border-radius: 50%; border: 1.5px solid var(--line-md); transition: border-color .15s, background .15s, box-shadow .15s; }
    .cb-opt:hover { border-color: var(--ink-3); }
    .cb-opt.sel { border-color: var(--green); background: var(--green-dim); }
    .cb-opt.sel::after { border-color: var(--green); background: var(--green); box-shadow: inset 0 0 0 3.5px var(--bg-card); }
    .cb-opt:active { transform: scale(.99); }
    .cb-list-hdr { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); padding: 12px 4px 4px; }
    .cb-list-hdr:first-child { padding-top: 2px; }
    .cb-consent { display: flex; align-items: flex-start; gap: 11px; margin-top: 22px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); line-height: 1.5; cursor: pointer; }
    .cb-consent input { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--green); margin-top: 1px; }
    .cb-consent a { color: var(--green); }
    .cb-auth-err { font-family: var(--mono); font-size: 12px; color: var(--red); margin-top: 16px; min-height: 16px; line-height: 1.5; }
    .cb-auth-err a { color: var(--green); font-weight: 700; }
    .btn-primary.busy { opacity: 0.55; pointer-events: none; }
    .cb-signup-foot { position: sticky; bottom: 0; width: 100%; max-width: 560px; margin: 0 auto; padding: 12px 20px calc(18px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) 72%, rgba(244,244,241,0)); }
    .cb-signup-foot .btn-primary { width: 100%; transition: opacity 0.2s ease; }
    /* Only an explicitly-disabled button (Face ID until consent) grays out. */
    .cb-signup-foot .btn-primary[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
    body.cb-signup-lock { overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════════════════
   PWA APP SHELL — added for the new modular post-signup app (/app/).
   Everything above is lifted verbatim from the landing design system so the
   marketing demo and the real product share ONE component library + palette.
   Below: shell layout, bottom-nav, modal/sheet shell (z≥9600), coach marks,
   offline eyebrow, and the OBSIDIAN dark theme. Never blue.
   ═══════════════════════════════════════════════════════════════════════════ */

/* OBSIDIAN — dark theme. Tokens mirror native CBTheme.obsidian intent
   (near-black surfaces, paper ink, same green/amber/red status accents,
   blue de-blued to neutral grey). Applied via <html data-theme="obsidian">. */
html[data-theme="obsidian"] {
  --bg:        #0C0D0E;
  --bg-warm:   #141618;
  --bg-sink:   #1B1E20;
  --bg-card:   #161819;
  --ink:       #F1F2F0;
  --ink-2:     #C2C7CB;
  --ink-3:     #8A9197;
  --ink-4:     #5E656B;
  --line:      #24282B;
  --line-md:   #2E3337;
  --green:     #2BBA72;
  --green-deep:#1F9A5C;
  --green-dim: rgba(43,186,114,0.14);
  --amber:     #D6962B;
  --amber-bright:#D6962B;
  --amber-dim: rgba(214,150,43,0.16);
  --red:       #E0635D;
  --violet:    #8A9197;
  --chip:      #1C1F21;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md: 0 2px 6px rgba(0,0,0,0.40), 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 12px 36px rgba(0,0,0,0.55), 0 40px 80px rgba(0,0,0,0.55);
}

/* ── App shell scroller ─────────────────────────────────────────────────── */
html.cb-app, html.cb-app body { height: 100%; background: var(--bg); }
.cb-app body { display: block; overflow: hidden; }
#cb-app-root {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  background: var(--bg);
}
#cb-scroll {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: max(14px, env(safe-area-inset-top)) 14px
           calc(24px + env(safe-area-inset-bottom)) 14px;
}
#cb-view { max-width: 540px; margin: 0 auto; width: 100%; }
.cb-mod-pad { padding-bottom: 8px; }

/* ── Top back-bar — NO bottom tab bar ────────────────────────────────────── */
/* Native fidelity: HOME is the launcher (the tile grid IS the navigation, like
   the SwiftUI HomeView). Drilling into a module pushes a screen with a back
   chevron → HOME. The Swift app has no bottom tab bar, so neither does this. */
#cb-topbar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  height: 48px; padding-left: max(8px, env(safe-area-inset-left)); padding-right: 12px;
  padding-top: env(safe-area-inset-top);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--line);
}
#cb-topbar[hidden] { display: none; }
.cb-back {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 0; background: none; cursor: pointer;
  color: var(--ink); border-radius: 10px;
}
.cb-back:active { background: var(--chip); }
.cb-back svg { width: 22px; height: 22px; }
.cb-topbar-title { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; color: var(--ink-2); }

/* ── Modal / bottom-sheet shell (z ≥9600; nested ≥9700) ─────────────────── */
.cb-scrim {
  position: fixed; inset: 0; z-index: 9600;
  background: rgba(10,11,12,0.46);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity 180ms ease;
}
.cb-scrim.nested { z-index: 9700; }
.cb-scrim.show { opacity: 1; }
.cb-sheet {
  width: 100%; max-width: 540px;
  background: var(--bg-card); color: var(--ink);
  border-radius: 22px 22px 0 0;
  border: 1px solid var(--line); border-bottom: 0;
  box-shadow: var(--shadow-lg);
  padding: 18px 18px calc(20px + env(safe-area-inset-bottom));
  max-height: 88vh; overflow-y: auto;
  transform: translateY(14px); transition: transform 220ms cubic-bezier(.2,.8,.2,1);
}
.cb-scrim.show .cb-sheet { transform: none; }
.cb-sheet-grip { width: 38px; height: 4px; border-radius: 3px; background: var(--line-md); margin: 0 auto 14px; }
.cb-sheet-title { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
/* Centered dialog variant (confirm/alert) */
.cb-scrim.center { align-items: center; }
.cb-scrim.center .cb-sheet { border-radius: 20px; border-bottom: 1px solid var(--line); max-width: 420px; margin: 0 16px; }
.cb-btn {
  font-family: var(--mono); font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em;
  padding: 13px 18px; border-radius: 13px; border: 1px solid var(--line-md);
  background: var(--bg-card); color: var(--ink); cursor: pointer; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.cb-btn.primary { background: var(--ink); color: var(--bg-card); border-color: var(--ink); }
.cb-btn.danger  { color: var(--red); border-color: rgba(216,80,74,0.35); }
.cb-btn.ghost   { background: none; }
.cb-btn:active  { transform: scale(0.985); }
/* font-size 16px: prevents iOS Safari auto-zoom-on-focus (anything <16px zooms
   and shifts the layout). Never use maximum-scale — it kills accessibility zoom. */
.cb-field { font-family: var(--mono); font-size: 16px; width: 100%; padding: 12px 13px; border-radius: 12px; border: 1px solid var(--line-md); background: var(--bg); color: var(--ink); margin-bottom: 12px; }
.cb-field:focus { outline: none; border-color: var(--ink-3); }

/* ── Offline eyebrow ─────────────────────────────────────────────────────── */
.cb-eyebrow {
  font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--amber);
  display: flex; align-items: center; gap: 6px; padding: 6px 2px 2px;
}
.cb-eyebrow::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--amber); }
.cb-eyebrow.live { color: var(--ink-4); }
.cb-eyebrow.live::before { background: var(--green); }

/* ── First-run coach mark ────────────────────────────────────────────────── */
.cb-coach-scrim { position: fixed; inset: 0; z-index: 9750; background: rgba(10,11,12,0.62); display: flex; align-items: center; justify-content: center; padding: 28px; opacity: 0; transition: opacity 200ms ease; }
.cb-coach-scrim.show { opacity: 1; }
.cb-coach { max-width: 360px; background: var(--bg-card); color: var(--ink); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-lg); padding: 22px 20px; }
.cb-coach h4 { font-family: var(--mono); font-size: 14px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; }
.cb-coach p { font-size: 12.5px; line-height: 1.6; color: var(--ink-2); margin-bottom: 8px; }
.cb-coach .cb-btn { margin-top: 10px; }
.cb-help-fab { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--ink-4); cursor: pointer; }

/* ── Loading + empty states ──────────────────────────────────────────────── */
.cb-skel { background: linear-gradient(100deg, var(--bg-sink) 30%, var(--bg-warm) 50%, var(--bg-sink) 70%); background-size: 200% 100%; animation: cb-shimmer 1.2s linear infinite; border-radius: 12px; }
@keyframes cb-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.cb-empty { font-family: var(--mono); font-size: 11.5px; color: var(--ink-4); text-align: center; padding: 26px 14px; letter-spacing: 0.04em; }
@media (prefers-reduced-motion: reduce) { .cb-skel { animation: none; } .cb-scrim, .cb-sheet, .cb-coach-scrim { transition: none; } }

/* ── ASK CrewBrief (chat) — cb-joe-* (these were styled NOWHERE; the assistant
   rendered unstyled in the PWA too). Bubble-less assistant, right user bubbles. */
.cb-joe-scroll { display: flex; flex-direction: column; gap: 14px; padding: 4px 0 8px; }
.cb-joe-turn { display: flex; flex-direction: column; max-width: 100%; }
.cb-joe-turn.user { align-items: flex-end; }
.cb-joe-turn.asst { align-items: flex-start; }
.cb-joe-stamp { font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: 0.12em; color: var(--ink-4); margin-bottom: 5px; }
.cb-joe-userbub { background: var(--ink); color: var(--bg-card); border-radius: 16px 16px 4px 16px; padding: 10px 13px; font-family: var(--mono); font-size: 13px; line-height: 1.5; max-width: 84%; }
.cb-joe-asst-body { color: var(--ink); font-family: var(--mono); font-size: 13.5px; line-height: 1.6; max-width: 96%; }
.cb-joe-asst-body p { margin: 0 0 8px; } .cb-joe-asst-body p:last-child { margin-bottom: 0; }
.cb-joe-caret { color: var(--green); font-weight: 700; animation: cb-blink 1s steps(1) infinite; }
@keyframes cb-blink { 50% { opacity: 0; } }
.cb-joe-toolrow { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.cb-joe-toolchip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); background: var(--chip); border: 1px solid var(--line-md); border-radius: 999px; padding: 4px 9px; }
.cb-joe-toolic { display: inline-flex; color: var(--green); } .cb-joe-toolic svg { width: 11px; height: 11px; }
.cb-joe-chiprow { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.cb-joe-chip { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--mono); border: 1px solid var(--line-md); background: var(--bg-card); border-radius: 999px; padding: 6px 11px; cursor: pointer; }
.cb-joe-chip-label { font-size: 8.5px; font-weight: 600; letter-spacing: 0.1em; color: var(--ink-4); text-transform: uppercase; }
.cb-joe-chip-val { font-size: 11px; font-weight: 700; color: var(--ink); }
.cb-joe-composer { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-md); border-radius: 14px; padding: 6px 6px 6px 14px; background: var(--bg-card); margin-top: 8px; }
.cb-joe-input { flex: 1; border: 0; outline: none; background: none; font-family: var(--mono); font-size: 16px; color: var(--ink); resize: none; }
.cb-joe-send { width: 34px; height: 34px; flex-shrink: 0; border: 0; border-radius: 10px; background: var(--ink); color: var(--bg-card); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cb-joe-send svg { width: 16px; height: 16px; }
.cb-joe-tts { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--ink-4); background: none; border: 0; cursor: pointer; padding: 4px 2px; margin-top: 6px; text-transform: uppercase; }
.cb-joe-tts[disabled] { opacity: 0.4; }
.cb-joe-tts-ic { display: inline-flex; } .cb-joe-tts-ic svg { width: 13px; height: 13px; }

/* ── Finance swipe-pager page (cb-fin-page) — styled nowhere before. ───────── */
.cb-fin-page { display: block; }
.cb-fin-pager { display: block; }
.cb-fin-dots { display: flex; gap: 6px; justify-content: center; padding: 10px 0 4px; }
.cb-fin-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-md); }
.cb-fin-dot.active { background: var(--green); }
/* Finance sub-tab strip — equal-width cells so labels never collide regardless of
   length (BILLS vs TRANSACTIONS). Active = ink + green underline; rest muted.
   Mono/uppercase per the design system. Color = STATUS only (green underline). */
.cb-fin-tabs { display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch;
  gap: 2px; margin: 2px 0 12px; border-bottom: 1px solid var(--line); }
.cb-fin-tab { appearance: none; background: none; border: none; cursor: pointer;
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-4); padding: 8px 1px 9px; line-height: 1.15;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s; }
.cb-fin-tab.active { color: var(--ink); border-bottom-color: var(--green); }
@media (max-width: 360px) { .cb-fin-tab { font-size: 9px; letter-spacing: 0.02em; } }
/* small inline info link (replaces the old big "how EOY is projected" button).
   Muted text + a small ⓘ glyph; tap → explainer sheet. Never blue. */
.cb-fin-infolink { display: inline-flex; align-items: center; gap: 5px; appearance: none;
  background: none; border: none; padding: 2px 0; cursor: pointer; font-family: var(--mono);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-3); }
.cb-fin-infolink:active { color: var(--ink-2); }
.cb-fin-infodot { display: inline-flex; color: var(--ink-4); }
.cb-fin-infodot svg { width: 13px; height: 13px; }
/* heading + trailing info link on one baseline row */
.cb-fin-headrow { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin: 14px 0 6px; }
.cb-fin-headrow .nv-section { flex: 0 0 auto; }
/* tap-to-edit chevron affordance on a logged paycheck row */
.cb-fin-chev { display: inline-flex; align-items: center; color: var(--ink-4); margin-left: 6px; flex: 0 0 auto; }
.cb-fin-chev svg { width: 15px; height: 15px; }
/* "EST" marker — gross figure was estimated server-side from deductions (honesty
   doctrine: never present an estimate as a verbatim figure). Muted, never blue. */
.cb-est-tag { display: inline-block; font-family: var(--mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.08em; color: var(--amber); border: 1px solid var(--line-md); border-radius: 3px;
  padding: 0 3px; margin-left: 2px; vertical-align: middle; text-transform: uppercase; }
/* "AUTO" hint — this transaction's category was auto-assigned (Plaid/import), not
   hand-picked by the user. Informational, NOT a status: muted ink, never a color. */
.cb-auto-tag { display: inline-block; font-family: var(--mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.08em; color: var(--ink-4); border: 1px solid var(--line-md); border-radius: 3px;
  padding: 0 3px; margin-left: 5px; vertical-align: middle; text-transform: uppercase; }
/* tap-to-recategorize chevron on a transaction row (reuses the paycheck-chev sizing). */
.cb-tx-chev { display: inline-flex; align-items: center; color: var(--ink-4); margin-left: 6px; flex: 0 0 auto; }
.cb-tx-chev svg { width: 15px; height: 15px; }

/* ── Finance · Connect-a-bank (Plaid) ─────────────────────────────────────
   Not-connected prompt, connected-institution rows, connecting spinner, and
   error/reconnect states. Color = STATUS only (green=linked, amber=needs
   reauth/connecting, red=error). The Plaid Link modal itself is Plaid's own
   chrome — these classes only style CrewBrief's surrounding surface. */
.cb-bank-prompt { font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  color: var(--ink-3); line-height: 1.5; letter-spacing: 0.005em; margin: 2px 0 12px; }
.cb-bank-item { display: flex; align-items: center; gap: 10px; padding: 11px 0;
  border-bottom: 1px solid var(--line); }
.cb-bank-item:last-of-type { border-bottom: none; }
.cb-bank-ic { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 7px; background: var(--bg-sink);
  color: var(--ink-3); }
.cb-bank-ic svg { width: 17px; height: 17px; }
.cb-bank-main { flex: 1 1 auto; min-width: 0; }
.cb-bank-name { font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  color: var(--ink); letter-spacing: -0.005em; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.cb-bank-sub { font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-4); margin-top: 2px; }
.cb-bank-sub.green { color: var(--green); }
.cb-bank-sub.amber { color: var(--amber); }
.cb-bank-sub.red { color: var(--red); }
/* tiny status dot before the synced/needs-reauth label */
.cb-bank-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  margin-right: 5px; vertical-align: middle; background: var(--line-md); }
.cb-bank-dot.green { background: var(--green); }
.cb-bank-dot.amber { background: var(--amber); }
.cb-bank-dot.red { background: var(--red); }
/* per-item trailing action (reconnect / refresh) — small ghost text button */
.cb-bank-act { appearance: none; background: none; border: none; cursor: pointer;
  flex: 0 0 auto; font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3);
  border: 1px solid var(--line-md); border-radius: 5px; padding: 5px 8px; }
.cb-bank-act:active { color: var(--ink); }
.cb-bank-act.amber { color: var(--amber); border-color: var(--amber); }
/* inline connecting spinner (no color → neutral motion only) */
.cb-bank-spin { display: inline-block; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--line-md); border-top-color: var(--ink-2);
  animation: cb-bank-spin 0.7s linear infinite; vertical-align: middle; }
@keyframes cb-bank-spin { to { transform: rotate(360deg); } }
.cb-bank-err { font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  color: var(--red); letter-spacing: 0.01em; margin: 6px 0 2px; line-height: 1.4; }

/* ── tasks module (cb-task-*) ─────────────────────────────────────────── */
.cb-task-row { transition: transform 0.12s ease, opacity 0.12s ease; touch-action: pan-y; }
.cb-task-subpanel { margin-bottom: 6px; }
.cb-task-trigrow { margin-bottom: 8px; }

/* ── brief module: personal-TRIP face — itinerary + trip-brief (cb-trip-*) ──
   The brief renders a TRIP face on OFF days / personal travel (a personal
   itinerary exists), reusing the layover grammar MINUS aviation. Re-homed here
   from the travel module (flight-SEARCH and trip-ITINERARY are different jobs).
   Color = STATUS only (tokens). All-mono. Absent renders nothing. */
.cb-trip-daygroup { margin-top: 14px; }
.cb-trip-dayhead { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; color: var(--ink-3); text-transform: uppercase; margin: 0 0 6px 2px; display: flex; align-items: baseline; gap: 8px; }
.cb-trip-dayhead .wk { font-weight: 500; color: var(--ink-4); letter-spacing: 0.06em; }
.cb-trip-item { margin-top: 8px; padding: 12px 14px; }
.cb-trip-cat { font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.12em; color: var(--ink-4); text-transform: uppercase; }
.cb-trip-flightno { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.cb-trip-route { font-family: var(--mono); font-size: 14px; font-weight: 700; letter-spacing: 0.02em; color: var(--ink); }
.cb-trip-time { font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--ink-2); letter-spacing: 0.03em; margin-top: 3px; }
.cb-trip-line { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; }
.cb-trip-sub { font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--ink-4); letter-spacing: 0.02em; margin-top: 2px; }
.cb-trip-icon { display: flex; color: var(--ink-3); flex-shrink: 0; }
.cb-trip-icon svg { width: 17px; height: 17px; }
.cb-trip-clock { font-family: var(--mono); font-size: 26px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.cb-trip-clock-sub { font-family: var(--mono); font-size: 9.5px; font-weight: 500; color: var(--ink-3); letter-spacing: 0.08em; margin-top: 5px; }
.cb-trip-phase2 { font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: 0.1em; color: var(--ink-4); text-transform: uppercase; }

/* ── Finance · investment holdings table (Yahoo-Finance-style) ────────────── */
.cb-hold-table { display: block; font-family: var(--mono); }
.cb-hold-row { display: grid; grid-template-columns: 52px 1fr 62px 40px 70px 42px; gap: 6px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 11.5px; }
.cb-hold-row:last-child { border-bottom: none; }
.cb-hold-head { font-size: 9px; letter-spacing: 0.1em; color: var(--ink-4); border-bottom: 1px solid var(--line-md); padding-bottom: 6px; }
.cb-hold-tk { font-weight: 700; color: var(--ink); }
.cb-hold-nm { color: var(--ink-3); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-hold-pr { text-align: right; color: var(--ink-2); }
.cb-hold-pc { text-align: right; color: var(--ink-2); }
.cb-hold-vl { text-align: right; color: var(--green); }
.cb-hold-er { text-align: right; color: var(--ink-3); }
.cb-hold-stale { display: inline-block; margin-left: 4px; font-size: 8.5px; letter-spacing: 0.06em; color: var(--ink-4); text-transform: uppercase; }
.cb-hold-edit .cb-hold-in { margin-bottom: 0; }
.cb-hold-edit .cb-hold-in:first-child { flex: 0 0 78px; }
.cb-hold-del { flex: 0 0 38px; padding: 10px 0; }