:root {
        /* Segmara tokens — UI UX Pro Max (trust) + Taste Skill + brand board */
        --sg-paper:#f4f6f4; --sg-paper-2:#eef1ee; --sg-card:#fbfcfa; --sg-ink:#121815; --sg-ink-soft:#2a322e;
        --sg-muted:#5c665f; --sg-line:#d5ddd6; --sg-line-strong:#b8c3ba;
        --sg-accent:#1a6b3c; --sg-accent-hover:#155832; --sg-accent-soft:#e7f3eb; --sg-accent-line:#c5dfce;
        --sg-max:72rem; --sg-radius:10px; --sg-radius-sm:6px; --sg-radius-lg:14px;
        --sg-ease:cubic-bezier(.16,1,.3,1); --sg-dur:180ms;
        --sg-shadow-sm:0 1px 2px color-mix(in srgb, var(--sg-ink) 6%, transparent);
        --sg-shadow:0 10px 30px color-mix(in srgb, var(--sg-ink) 8%, transparent);
        --sg-font:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Aptos,"Helvetica Neue",Arial,sans-serif;
        --sg-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
        /* legacy aliases used across stylesheet */
        --ink:var(--sg-ink); --muted:var(--sg-muted); --blue:var(--sg-accent); --blue-dark:var(--sg-accent-hover);
        --line:var(--sg-line); --paper:var(--sg-paper); --card:var(--sg-card); --soft:var(--sg-paper-2);
        --max:var(--sg-max); --font:var(--sg-font); --mono:var(--sg-mono);
      }
      * { box-sizing:border-box; }
      html { scroll-behavior:smooth; }
      body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--font); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:clip; }

      a, button, .btn, [role="button"], input[type="submit"], summary { cursor:pointer; }
      a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
        outline:2px solid color-mix(in srgb, var(--sg-accent) 55%, transparent); outline-offset:2px;
      }
      a, button, .btn { transition: color var(--sg-dur) var(--sg-ease), background var(--sg-dur) var(--sg-ease), border-color var(--sg-dur) var(--sg-ease), box-shadow var(--sg-dur) var(--sg-ease), transform var(--sg-dur) var(--sg-ease); }
      button:active, .btn:active, input[type="submit"]:active { transform:scale(.985); }

      @media (prefers-reduced-motion:reduce) {
        html { scroll-behavior:auto; }
        *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
      }
      [id] { scroll-margin-top:92px; }
      main { margin:0 auto; max-width:var(--max); padding:44px 24px 72px; }
      h1 { font-size:clamp(34px,6vw,58px); font-weight:650; letter-spacing:0; line-height:1.04; margin:0 0 10px; text-align:center; }
      h2 { font-size:clamp(26px,4vw,38px); font-weight:650; letter-spacing:0; line-height:1.08; margin:0; }
      p { color:var(--muted); line-height:1.5; }
      .top { align-items:center; display:grid; gap:18px; grid-template-columns:1fr auto 1fr; margin:0 auto 46px; min-height:44px; }
      .brand { align-items:center; color:inherit; display:inline-flex; font-family:ui-rounded,"IBM Plex Sans",Aptos,"Helvetica Neue",Arial,sans-serif; font-size:15px; font-weight:780; gap:8px; justify-self:start; letter-spacing:-.035em; text-decoration:none; text-transform:lowercase; white-space:nowrap; }
      .brand-mark { align-items:center; background:transparent; border:0; color:inherit; display:inline-flex; flex:0 0 auto; height:26px; justify-content:center; width:26px; }
      .brand-mark img { display:block; height:100%; width:100%; }
      form { background:var(--card); border:1px solid rgba(0,0,0,.05); border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.06); display:grid; gap:16px; margin-top:28px; padding:24px; }
      label { color:var(--muted); display:grid; font-size:11px; font-weight:650; gap:7px; letter-spacing:.04em; text-transform:uppercase; }
      input, select { background:#fff; border:1px solid var(--line); border-radius:8px; font-family:inherit;font-size:16px;line-height:1.4; min-height:44px; padding:10px 12px; text-transform:none; width:100%; }
      input:focus, select:focus { border-color:var(--blue); box-shadow:0 0 0 4px rgba(26,107,60,.14); outline:none; }
      button, .btn { align-items:center; background:var(--blue); border:1px solid var(--blue); border-radius:999px; color:#fff; cursor:pointer; display:inline-flex; font-size:14px; font-weight:600; justify-content:center; min-height:44px; padding:9px 18px; text-decoration:none; white-space:nowrap; }
      button:hover, .btn:hover { background:var(--blue-dark); border-color:var(--blue-dark); color:#fff; }
      .btn.secondary, .top a.btn.secondary { color:var(--blue); font-size:14px; }
      .btn.secondary:hover, .top a:hover { background:transparent; border-color:transparent; color:var(--blue-dark); }
      .top a.btn.secondary { background:transparent; border:0; min-height:44px; padding:11px 14px; text-decoration:none; }
      .btn.secondary { background:transparent; border:0; min-height:44px; padding:11px 18px; text-decoration:none; }
      .hero-start { margin:18px 0 6px; }
      .hero-start-cta { font-size:17px; font-weight:700; min-height:54px; padding:15px 40px; width:100%; max-width:420px; }
      .hero-start-note { color:#6b7770; font-size:13px; margin:10px 0 0; max-width:470px; }
      .error { background:#fff; border:1px solid #f0b3b3; border-radius:8px; color:#7c1d1d; font-size:14px; padding:12px 14px; }
      table { border-collapse:collapse; margin-top:16px; width:100%; }
      th, td { border-bottom:1px solid var(--line); padding:11px 8px; text-align:left; vertical-align:middle; }
      th { color:var(--muted); font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; }
      .symbol { color:var(--muted); font-family:var(--mono); font-size:12px; }
      .qty { max-width:76px; }
      .user-bar { align-items:center; display:flex; gap:14px; justify-content:flex-end; }
      .user-bar span { color:var(--muted); font-size:13px; }
      .subnav { align-items:center; display:flex; gap:22px; justify-content:center; }
      .navlink { color:var(--muted); font-size:14px; font-weight:500; padding:0; text-decoration:none; white-space:nowrap; }
      .navlink.active { color:var(--ink); }
      .navlink:hover { color:var(--ink); }
      .empty { background:var(--card); border:1px solid rgba(0,0,0,.06); border-radius:8px; color:var(--muted); margin-top:24px; padding:24px; text-align:center; }
      .status { color:var(--muted); font-family:var(--mono); font-size:11px; }
      .pick { color:var(--muted); font-family:var(--mono); font-size:12px; margin:8px 0 0; text-align:center; }
      .pick span { color:var(--ink); }
      .hint { color:var(--muted); font-size:14px; margin-top:6px; text-align:center; }
      label .hint { display:block; font-weight:400; letter-spacing:0; line-height:1.35; margin-top:2px; text-align:left; text-transform:none; }
      .hint a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
      .auth-methods { display:grid; gap:10px; margin-top:18px; }
      .auth-oauth { display:grid; gap:10px; margin:0; }
      .auth-alt { margin:0; }
      .auth-or { color:var(--muted); font-size:12px; margin:12px 0 0; text-align:center; }
      .auth-page { background:#f5f6f1; color:#101513; }
      .auth-page p { color:#66706b; }
      .auth-page .top { margin-bottom:38px; }
      .auth-page .brand-mark { background:transparent; border-color:transparent; color:inherit; }
      .auth-page .btn { background:#1a6b3c; border-color:#1a6b3c; color:#f7faf7; border-radius:10px; }
      .auth-page .btn:hover { background:#155832; border-color:#155832; color:#f7faf7; }
      .auth-page .top a.btn.secondary { background:transparent; border-color:transparent; color:#102018; }
      .auth-page .top a.btn.secondary:hover { color:#1a6b3c; }
      .auth-main { max-width:1180px; padding:32px 32px 72px; }
      .auth-main .top { grid-template-columns:1fr auto; }
      .auth-shell { align-items:start; display:grid; gap:36px; grid-template-columns:minmax(0,1fr) minmax(360px,440px); }
      .auth-copy { padding-top:28px; }
      .auth-kicker { color:#1a6b3c; font-family:var(--mono); font-size:11px; letter-spacing:.06em; margin:0 0 18px; text-transform:uppercase; }
      .auth-copy h1 { color:#101513; font-size:clamp(44px,5.8vw,72px); line-height:1.03; margin:0; max-width:720px; text-align:left; }
      .auth-copy h1 .accent { color:#1a6b3c; }
      .auth-copy .hint { color:#4f5b55; font-size:18px; line-height:1.52; margin:18px 0 0; max-width:640px; text-align:left; }
      .tracker-proof { display:grid; gap:10px; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:22px; max-width:620px; }
      .tracker-proof div { background:#f8faf9; border:1px solid #dce4da; border-radius:8px; padding:14px 14px 13px; }
      .tracker-proof strong { color:#101513; display:block; font-family:var(--mono); font-size:17px; line-height:1; }
      .tracker-proof span { color:#66706b; display:block; font-size:12px; line-height:1.25; margin-top:7px; }
      .auth-mini-list { border-top:1px solid #dce4da; display:grid; gap:12px; margin-top:30px; max-width:560px; padding-top:20px; }
      .auth-mini-row { align-items:start; display:flex; gap:12px; }
      .auth-mini-row:before { background:#c8d2ca; content:""; flex:0 0 auto; height:1px; margin-top:10px; width:18px; }
      .auth-mini-dot { background:#1a6b3c; border-radius:999px; box-shadow:0 0 0 6px rgba(31,122,69,.08); flex:0 0 auto; height:8px; width:8px; }
      .auth-mini-row span { color:#66706b; font-size:14px; line-height:1.4; }
      .tracker-preview { background:#fff; border:1px solid #dce4da; border-radius:8px; box-shadow:0 18px 46px rgba(16,32,24,.06); margin-top:24px; max-width:620px; overflow:hidden; }
      .tracker-preview-head { align-items:center; border-bottom:1px solid #e5ebe3; display:flex; justify-content:space-between; gap:14px; padding:14px 16px; }
      .tracker-preview-head strong { color:#101513; font-size:13px; line-height:1.3; }
      .tracker-preview-head span { color:#1a6b3c; font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; }
      .tracker-preview-row { align-items:center; display:grid; gap:12px; grid-template-columns:minmax(0,1fr) auto; padding:13px 16px; }
      .tracker-preview-row + .tracker-preview-row { border-top:1px solid #eef2ed; }
      .tracker-preview-row b { color:#101513; display:block; font-size:14px; line-height:1.25; }
      .tracker-preview-row small { color:#5a655e; display:block; font-size:12px; line-height:1.35; margin-top:3px; }
      .tracker-preview-price { color:#101513; font-family:var(--mono); font-size:12px; font-weight:760; white-space:nowrap; }
      .auth-card { background:#fff; border:1px solid #dde2db; border-radius:8px; box-shadow:0 24px 70px rgba(16,32,24,.08); padding:24px; }
      .auth-card h2 { color:#101513; font-size:28px; margin:0 0 6px; text-align:left; }
      .auth-card > .hint { margin:0 0 18px; text-align:left; }
      .auth-card form { border:0; box-shadow:none; margin-top:18px; padding:0; }
      .auth-card label { color:#5a655e; }
      .auth-card input, .auth-card select { border-color:#d6ded5; }
      .auth-card input:focus, .auth-card select:focus { border-color:#1a6b3c; box-shadow:0 0 0 4px rgba(31,122,69,.12); }
      .auth-card button[type="submit"] { background:#1a6b3c; border-color:#1a6b3c; border-radius:10px; width:100%; }
      .auth-card button[type="submit"]:hover { background:#155832; border-color:#155832; }
      .tracker-card-benefits { background:#f8faf7; border:1px solid #dce7dc; border-radius:8px; display:grid; gap:9px; margin:14px 0 2px; padding:12px; }
      .tracker-card-benefit { display:grid; gap:2px; grid-template-columns:auto minmax(0,1fr); }
      .tracker-card-benefit:before { background:#1a6b3c; border-radius:999px; content:""; height:6px; margin-top:7px; width:6px; }
      .tracker-card-benefit b { color:#102018; display:block; font-size:13px; line-height:1.22; }
      .tracker-card-benefit small { color:#66706b; display:block; font-size:12px; line-height:1.32; }
      .tracker-form-promise { background:#f8faf7; border:1px solid #dce7dc; border-radius:8px; color:#102018; font-size:13px; font-weight:720; line-height:1.35; margin:0 0 10px; padding:10px 12px; }
      .tracker-form-promise span { color:#1a6b3c; }
      .tracker-intent-assist { background:transparent; border:0; color:#1a6b3c; cursor:pointer; display:inline-flex; font:inherit;font-size:16px; font-size:13px; font-weight:820; justify-self:center; margin:0 auto; min-height:0; padding:2px 0; text-align:center; text-decoration:underline; text-underline-offset:3px; width:auto; }
      .tracker-intent-assist:hover { background:transparent; color:#065f46; }
      .tracker-intent-assist small { display:none; }
      .tracker-form-note { color:#66706b; font-size:12px; line-height:1.38; margin:-4px 0 0; text-align:center; }
      .tracker-privacy-row { align-items:center; color:#526058; display:flex; flex-wrap:wrap; font-size:11px; gap:8px; justify-content:center; line-height:1.3; margin-top:2px; }
      .tracker-privacy-row span { align-items:center; background:#f3f7f1; border:1px solid #dce7dc; border-radius:999px; display:inline-flex; min-height:24px; padding:4px 8px; }
      .auth-card .order-btn, .auth-card .btn.secondary { background:#fff; border:1px solid #cfd8d0; color:#102018; min-height:44px; padding:10px 16px; }
      .auth-card .order-btn:hover, .auth-card .btn.secondary:hover { background:#edf5ef; border-color:#9bb5a3; color:#102018; }
      .auth-card .order-btn:focus-visible, .auth-card .btn.secondary:focus-visible { box-shadow:0 0 0 4px rgba(31,122,69,.55); outline:none; }
      .buyer-intent-form { border:0; box-shadow:none; display:grid; gap:12px; margin-top:16px; padding:0; }
      .buyer-intent-form label { color:#5a655e; }
      .buyer-intent-form select { border-color:#d6ded5; min-height:44px; }
      .buyer-intent-form button[type="submit"] { background:#1a6b3c; border-color:#1a6b3c; border-radius:10px; width:100%; }
      .buyer-intent-note { color:#66706b; font-size:12px; line-height:1.4; margin:2px 0 0; text-align:center; }
      .auth-page .auth-card .auth-alt .btn.secondary,
      .auth-page .auth-card .auth-alt .btn.secondary:visited { background:#fff; border:1px solid #aebbb1; color:#102018; font-weight:720; min-height:46px; width:100%; }
      .auth-page .auth-card .auth-alt .btn.secondary:hover,
      .auth-page .auth-card .auth-alt .btn.secondary:focus { background:#edf5ef; border-color:#8fa99a; color:#102018; }
      .auth-page .auth-card .auth-alt .btn.secondary:focus-visible { box-shadow:0 0 0 4px rgba(31,122,69,.55); outline:none; }
      .auth-page .auth-card .auth-alt .btn.secondary:disabled { background:#f4f7f2; border-color:#d9e1d8; color:#455149; cursor:not-allowed; opacity:1; }
      .passkey-note { color:#5f6b64; font-size:12px; line-height:1.4; margin:8px 0 0; text-align:center; }
      .auth-card .auth-or { align-items:center; display:grid; gap:10px; grid-template-columns:1fr auto 1fr; margin:16px 0 0; }
      .auth-card .auth-or:before, .auth-card .auth-or:after { background:#e4e9e3; content:""; height:1px; }
      .tracker-mobile-card { display:none; }
      .google-identity-wrap { display:grid; min-height:44px; place-items:center; width:100%; }
      .google-identity-wrap > div { max-width:100%; }
      .auth-track-first { background:#eef6ef; border:1px solid #cfe0d3; border-radius:8px; display:grid; gap:12px; margin-top:24px; max-width:560px; padding:16px; }
      .auth-track-first strong { color:#102018; display:block; font-size:15px; line-height:1.25; }
      .auth-track-first span { color:#56635c; display:block; font-size:14px; line-height:1.4; }
      .auth-track-first .btn { align-items:center; align-self:start; display:inline-flex; min-height:44px; padding:10px 16px; width:auto; }
      .auth-track-first form { align-items:end; background:transparent; border:0; box-shadow:none; display:grid; gap:10px; grid-template-columns:minmax(190px,1fr) auto; margin:0; padding:0; }
      .auth-track-first label { color:#526058; display:grid; font-size:12px; font-weight:760; gap:6px; line-height:1.3; margin:0; }
      .auth-track-first input[type="email"] { background:#fff; border:1px solid #b8cfbe; border-radius:7px; color:#101513; font:inherit;font-size:16px; min-height:44px; padding:0 12px; width:100%; }
      .auth-track-first input[type="email"]:focus { border-color:#1a6b3c; box-shadow:0 0 0 4px rgba(31,122,69,.12); outline:none; }
      .auth-track-first button[type="submit"] { background:#1a6b3c; border:1px solid #1a6b3c; border-radius:10px; color:#f7faf7; font:inherit;font-size:16px; font-weight:780; min-height:44px; padding:0 14px; white-space:nowrap; }
      .auth-switch { color:#5f6b64; font-size:14px; line-height:1.4; margin:14px 0 0; text-align:center; }
      .auth-switch a { color:#155832; font-weight:750; text-decoration:none; }
      .auth-switch a:hover { text-decoration:underline; }
      .auth-disclosure { border-top:1px solid #e4e9e3; color:#5f6b64; font-size:12px; line-height:1.45; margin:18px 0 0; padding-top:14px; }
      /* v2 market shell (2026-07-12): dark serif institutional band */
      .market-hero { background: radial-gradient(120% 100% at 50% -20%, rgba(38,84,58,.5), transparent 62%), linear-gradient(160deg, #0f1b15 0%, #13211a 55%, #101513 100%); border:1px solid #1e2c24; border-radius:18px; margin:0 auto 32px; max-width:100%; padding:52px 32px 48px; text-align:center; }
      .book-home .market-hero h1 { font-family:"IBM Plex Serif", Georgia, serif; font-weight:600; letter-spacing:-.015em; color:#f4f6f4; }
      .book-home .market-hero .hint { color:#b9c6bd; }
      .book-home .section-head h2, .book-home .how-steps h2, .book-home .split-section h2 { font-family:"IBM Plex Serif", Georgia, serif; font-weight:600; letter-spacing:-.01em; }
      @media (max-width:760px) { .market-hero { border-radius:14px; padding:34px 18px 30px; } }
      .market-hero .hint { margin-left:auto; margin-right:auto; max-width:560px; }
      .market-tracker-form { align-items:end; background:#fff; border:1px solid #dde7dd; border-radius:8px; box-shadow:0 18px 48px rgba(16,32,24,.08); display:grid; gap:10px; grid-template-columns:minmax(220px,1fr) auto; margin:0 auto 26px; max-width:760px; padding:12px; }
      .market-tracker-form label { color:#4f5b54; display:grid; font-size:12px; font-weight:760; gap:6px; line-height:1.3; margin:0; }
      .market-tracker-form input[type="email"] { border:1px solid #cfd8d0; border-radius:7px; color:#101513; font:inherit;font-size:16px; min-height:46px; padding:0 13px; width:100%; }
      .market-tracker-form input[type="email"]:focus { border-color:#1a6b3c; box-shadow:0 0 0 4px rgba(31,122,69,.12); outline:none; }
      .market-tracker-form button[type="submit"] { background:#1a6b3c; border:1px solid #1a6b3c; border-radius:10px; color:#f7faf7; font:inherit;font-size:16px; font-weight:820; min-height:46px; padding:0 18px; white-space:nowrap; }
      .market-tracker-form p { color:#66706b; font-size:12px; grid-column:1 / -1; line-height:1.35; margin:0; text-align:center; }
      .market-grid { display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:26px; }
      .market-grid + .market-summary { margin-top:24px; }
      .market-card { background:var(--card); border:1px solid rgba(0,0,0,.05); border-radius:8px; box-shadow:0 18px 45px rgba(0,0,0,.05); display:grid; gap:18px; min-height:260px; padding:24px; }
      .market-card.highlight { box-shadow:0 20px 55px rgba(26,107,60,.14); outline:2px solid rgba(26,107,60,.18); }
      .market-summary { background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:8px; display:grid; gap:16px; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0 auto 26px; max-width:980px; padding:20px; }
      .market-summary div + div { border-left:1px solid var(--line); padding-left:16px; }
      .market-summary strong { color:var(--ink); display:block; font-size:18px; line-height:1.2; }
      .market-summary span { color:var(--muted); display:block; font-size:13px; line-height:1.4; margin-top:7px; }
      .post-signup-review { align-items:center; background:#f4fbf6; border:1px solid #c9decf; border-radius:8px; display:grid; gap:18px; grid-template-columns:minmax(0,1fr) auto; margin:0 auto 26px; max-width:980px; padding:20px; }
      .post-signup-review h2 { color:#101513; font-size:24px; line-height:1.1; text-align:left; }
      .post-signup-review p { font-size:14px; line-height:1.45; margin:7px 0 0; }
      .post-signup-review form { background:transparent; border:0; box-shadow:none; margin:0; padding:0; }
      .post-signup-review button { background:#102018; border-color:#102018; min-width:210px; }
      .post-signup-review button:hover { background:#155832; border-color:#155832; }
      .success-actions { display:grid; gap:10px; margin-top:18px; }
      .success-actions .btn { justify-content:center; width:100%; }
      .success-note { background:#f8faf9; border:1px solid #dce4da; border-radius:8px; color:#4f5b54; font-size:13px; line-height:1.5; margin-top:18px; padding:12px 14px; }
      .success-list { display:grid; gap:12px; margin-top:22px; max-width:620px; }
      .success-list div { border-top:1px solid #dce4da; padding-top:12px; }
      .success-list b { color:#101513; display:block; font-size:15px; margin-bottom:4px; }
      .success-list span { color:#66706b; font-size:13px; line-height:1.45; }
      .asset-plate { background:#f5f5f7; border:1px solid rgba(0,0,0,.04); border-radius:8px; display:flex; justify-content:space-between; min-height:92px; padding:18px; }
      .asset-plate strong { align-self:flex-end; color:var(--ink); font-family:var(--mono); font-size:18px; }
      .asset-plate span { color:var(--muted); font-size:12px; font-weight:650; letter-spacing:.05em; text-transform:uppercase; }
      .asset-top { align-items:start; display:flex; justify-content:space-between; gap:16px; }
      .asset-symbol { color:var(--muted); font-family:var(--mono); font-size:12px; letter-spacing:.04em; }
      .asset-price { font-family:var(--mono); font-size:17px; font-weight:650; }
      .asset-name { font-size:32px; font-weight:650; letter-spacing:0; line-height:1.05; margin:0; }
      .asset-sector { color:var(--muted); font-size:14px; margin:6px 0 0; }
      .order-form { box-shadow:none; margin-top:auto; padding:0; border:0; border-radius:0; background:transparent; display:grid; gap:12px; }
      .order-row { align-items:end; display:grid; gap:10px; grid-template-columns:90px 1fr auto; }
      .total { color:var(--muted); font-family:var(--mono); font-size:13px; min-width:72px; }
      .order-btn { background:#fff; border:1px solid var(--line); color:var(--ink); font-size:14px; text-decoration:none; }
      .order-btn:hover { background:var(--soft); border-color:#bfc0c5; color:var(--ink); }
      .auth-methods .btn, .auth-methods .order-btn { width:100%; }
      body.book-home { background:#fff; color:#101513; }
      body.book-home p { color:#4f5b55; }
      .book-main { max-width:1280px; padding:32px 32px 80px; }
      .book-home .top { margin-bottom:52px; }
      .book-home .brand { font-size:17px; }
      .book-home .brand-mark { background:transparent; border-color:transparent; color:inherit; }
      .book-home .btn { background:#102018; border-color:#102018; color:#fff; }
      .book-home .btn:hover { background:#1b3528; border-color:#1b3528; color:#fff; }
      .book-home .btn.secondary { background:#fff; border-color:#cfd8d0; color:#102018; }
      .book-home .btn.secondary:hover { background:#edf5ef; border-color:#b8c9bd; color:#102018; }
      .book-home .top a.btn.secondary { background:transparent; border-color:transparent; color:#102018; }
      .book-home .home-top { background:rgba(255,255,255,.94); backdrop-filter:saturate(180%) blur(12px); -webkit-backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid #e1e5e0; display:grid; gap:28px; grid-template-columns:auto minmax(0,1fr) auto; margin:-32px -32px 52px; min-height:72px; padding:14px 32px; position:sticky; top:0; z-index:30; }
      .book-home .home-top .brand { font-size:26px; font-weight:820; gap:9px; letter-spacing:-.045em; }
      .book-home .home-top .brand-mark { background:transparent; border:0; color:inherit; height:26px; width:26px; }
      .book-home .home-top .subnav { gap:28px; justify-content:center; min-width:0; }
      .book-home .home-top .navlink { color:#5c6660; font-size:15px; font-weight:600; padding:6px 0; transition:color .15s ease; }
      .book-home .home-top .navlink:hover { color:#102018; }
      .book-home .home-top .user-bar { gap:18px; }
      .book-home .home-top .login-link { color:#141a17; font-size:16px; font-weight:650; text-decoration:none; white-space:nowrap; }
      .book-home .home-top .login-link:hover { color:#1a6b3c; }
      .book-home .home-top .header-cta { background:#1a6b3c; border-color:#1a6b3c; font-size:16px; font-weight:760; min-height:52px; padding:0 26px; }
      .book-home .home-top .header-cta:hover { background:#155832; border-color:#155832; }
      .breadcrumb { color:#8a948d; display:flex; flex-wrap:wrap; font-family:var(--mono); font-size:12px; gap:9px; letter-spacing:.08em; margin-bottom:20px; text-transform:uppercase; }
      .breadcrumb span:last-child { color:#1a6b3c; }
      .book-kicker { color:#1a6b3c; font-family:var(--mono); font-size:11px; letter-spacing:.08em; margin:0 0 14px; text-transform:uppercase; }
      .mobile-break { display:none; }
      .book-hero { align-items:center; display:grid; gap:52px; grid-template-columns:minmax(0,1fr) minmax(420px,.68fr); margin-bottom:34px; }
      .book-hero h1 { color:#101513; font-size:clamp(42px,4.8vw,66px); font-weight:760; letter-spacing:0; line-height:1.04; margin:0; max-width:760px; text-align:left; }
      .book-copy { color:#4f5b55; font-size:19px; line-height:1.5; margin:20px 0 0; max-width:680px; }
      .hero-actions { align-items:center; display:flex; flex-wrap:wrap; gap:14px; justify-content:flex-start; margin-top:26px; }
      .hero-actions .btn.secondary { align-items:center; background:#fff; border:1px solid #cfd8d0; border-radius:999px; color:#102018; display:inline-flex; min-height:44px; padding:0 18px; text-decoration:none; }
      .hero-actions .btn.secondary:hover { background:#edf5ef; border-color:#b8c9bd; color:#102018; }
      .hero-proof { color:#66706b; font-size:13px; line-height:1.35; margin-top:12px; max-width:520px; }
      .book-preview { background:#f8faf9; border:1px solid #dbe3dd; border-radius:12px; box-shadow:0 18px 55px rgba(16,32,24,.08); color:#101513; min-height:360px; overflow:hidden; padding:24px; position:relative; }
      .preview-top { align-items:center; display:flex; justify-content:space-between; gap:16px; margin-bottom:16px; }
      .preview-top span { color:#66706b; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
      .preview-dot { animation:none; background:var(--sg-accent,#1a6b3c); border-radius:999px; box-shadow:none; flex:0 0 auto; height:8px; width:8px; }
      /* previewPulse removed - Impeccable dark-glow ban */
      .preview-account { align-items:center; border-bottom:1px solid #d9dfd8; display:grid; gap:12px; grid-template-columns:1fr auto; margin-bottom:0; padding:6px 0 16px; }
      .preview-account strong { color:#101513; display:block; font-size:22px; line-height:1.05; }
      .preview-account span { color:#66706b; display:block; font-size:13px; margin-top:5px; }
      .preview-account em { background:#fff7da; border:1px solid #e9d188; border-radius:999px; color:#6a4b00; font-family:var(--mono); font-size:10px; font-style:normal; padding:7px 9px; text-transform:uppercase; white-space:nowrap; }
      .preview-stats { border-bottom:1px solid #d9dfd8; display:grid; gap:0; grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:3px; }
      .preview-stat { padding:14px 12px 14px 0; }
      .preview-stat + .preview-stat { border-left:1px solid #d9dfd8; padding-left:14px; }
      .preview-stat strong { color:#101513; display:block; font-size:18px; line-height:1; }
      .preview-stat span { color:#66706b; display:block; font-size:11px; line-height:1.25; margin-top:7px; }
      .preview-card { background:transparent; border:0; color:#101513; display:grid; gap:0; padding:0; }
      .preview-row { align-items:center; border-bottom:1px solid #d9dfd8; display:grid; gap:12px; grid-template-columns:38px minmax(0,1fr) auto; padding:16px 0; }
      .preview-row:last-child { border-bottom:0; padding-bottom:0; }
      .preview-row strong { color:#101513; display:block; font-size:17px; line-height:1.12; }
      .preview-row span { color:#66706b; display:block; font-size:13px; margin-top:4px; }
      .preview-price { color:#101513; font-family:var(--mono); font-size:12px; font-style:normal; font-weight:760; text-align:right; white-space:nowrap; }
      .preview-chip { background:#e9f5ec; border:1px solid #cfe3d4; border-radius:999px; color:#1a6b3c; font-family:var(--mono); font-size:10px; padding:7px 9px; text-transform:uppercase; white-space:nowrap; }
      .company-icon { align-items:center; background:#e9f5ec; border:1px solid #cfe3d4; border-radius:10px; color:#1a6b3c; display:inline-flex; flex:0 0 auto; height:36px; justify-content:center; width:36px; }
      .company-icon svg { height:18px; width:18px; }
      .company-icon.logo { background:#fff; color:#101513; overflow:hidden; padding:7px; }
      .company-icon.logo img { display:block; height:100%; max-width:100%; object-fit:contain; width:100%; }
      .book-proof { background:#f7f8f7; border:1px solid #e0e3e1; border-radius:12px; display:grid; gap:32px; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); margin:0 0 76px; padding:34px; }
      .book-proof h2 { color:#101513; font-size:clamp(28px,3vw,40px); font-weight:650; line-height:1.08; max-width:520px; text-align:left; }
      .proof-grid { display:grid; gap:18px; grid-template-columns:repeat(3,minmax(0,1fr)); }
      .proof-item { border-left:1px solid #d2d8d2; padding-left:18px; }
      .proof-value { color:#101513; display:block; font-size:36px; font-weight:650; line-height:1; }
      .proof-label { color:#66706b; display:block; font-size:14px; line-height:1.35; margin-top:10px; }
      .book-section { margin:0 0 76px; }
      .book-section.compact { margin-bottom:54px; }
      .content-grid { align-items:stretch; display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:22px; }
      .content-card { background:#fff; border:1px solid #dde2db; border-radius:12px; display:flex; flex-direction:column; min-height:172px; padding:22px; }
      .content-card.accent { background:#f2faf5; border-color:#b8dcc6; box-shadow:inset 3px 0 0 #1a6b3c; }
      .content-card.accent p, .content-card.accent .card-index { color:#4f6b5a; }
      .card-index { color:#1a6b3c; display:block; font-family:var(--mono); font-size:11px; letter-spacing:.08em; margin-bottom:22px; text-transform:uppercase; }
      .content-card h3 { color:inherit; font-size:22px; line-height:1.12; margin:0; }
      .content-card p { color:#66706b; font-size:14px; line-height:1.45; margin:10px 0 0; }
      .answer-grid { display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:22px; }
      .answer-card { background:#f8faf9; border:1px solid #dde2db; border-radius:12px; min-height:160px; padding:22px; }
      .answer-card strong { color:#101513; display:block; font-size:20px; line-height:1.14; }
      .answer-card p { color:#5b665f; font-size:14px; line-height:1.48; margin:10px 0 0; }
      .split-section { align-items:start; background:#f1f2f5; border:1px solid #e0e3e1; border-radius:8px; display:grid; gap:28px; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); padding:34px; }
      .split-section h2 { color:#101513; font-size:clamp(28px,3vw,40px); max-width:480px; text-align:left; }
      .review-list { display:grid; gap:0; }
      .review-line { align-items:start; border-bottom:1px solid #d4dbd3; display:grid; gap:18px; grid-template-columns:150px 1fr; padding:17px 0; }
      .review-line:first-child { padding-top:0; }
      .review-line:last-child { border-bottom:0; padding-bottom:0; }
      .review-line strong { color:#101513; font-size:16px; line-height:1.3; }
      .review-line span { color:#66706b; font-size:14px; line-height:1.45; }
      .site-footer { align-items:center; border-top:1px solid #dfe5df; color:#5f6b64; display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; margin-top:52px; padding-top:22px; }
      .site-footer span, .site-footer a { color:#66706b; font-size:13px; text-decoration:none; }
      .site-footer a:hover { color:#102018; text-decoration:underline; text-underline-offset:3px; }
      .footer-links { display:flex; flex-wrap:wrap; gap:16px; }
      .section-head { align-items:flex-start; display:flex; gap:22px; justify-content:space-between; margin-top:0; }
      .section-head h2 { color:var(--sg-ink,#121815); font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem); font-weight:700; letter-spacing:-0.022em; text-align:left; }
      .section-head p { margin:8px 0 0; max-width:620px; }
      .book-pill { background:#e9f5ec; border:1px solid #cfe3d4; color:#1a6b3c; font-family:var(--mono); font-size:10px; padding:7px 9px; text-transform:uppercase; white-space:nowrap; }
      .market-layout { display:grid; gap:18px; grid-template-columns:280px minmax(0,1fr); margin-top:20px; }
      .filter-panel, .listing-card { background:var(--sg-card,#fbfcfb); border:1px solid var(--sg-line,#d5ddd6); border-radius:var(--sg-radius-lg,14px); }
      .filter-panel { align-self:start; max-height:calc(100vh - 110px); overflow-y:auto; padding:22px; position:sticky; top:96px; }
      .filter-head { align-items:center; display:flex; justify-content:space-between; gap:12px; margin-bottom:14px; }
      .filter-panel h3 { font-size:22px; line-height:1.1; margin:0; }
      .filter-clear { color:#1a6b3c; font-family:var(--mono); font-size:10px; text-decoration:none; text-transform:uppercase; }
      .filter-group { border-top:1px solid #e4e9e3; padding:14px 0 0; }
      .filter-group + .filter-group { margin-top:14px; }
      .filter-title { color:#5a655e; font-family:var(--mono); font-size:11px; letter-spacing:.08em; margin-bottom:10px; text-transform:uppercase; }
      .filter-line { align-items:center; display:flex; justify-content:space-between; gap:10px; font-size:16px; padding:8px 0; }
      .filter-line span:last-child { color:#5f6b64; font-family:var(--mono); font-size:12px; }
      .listing-toolbar { align-items:center; display:flex; gap:12px; justify-content:space-between; margin-bottom:12px; }
      .listing-toolbar span:first-child { color:#101513; font-size:22px; font-weight:760; }
      .sort-select { background:#fff; border:1px solid #d6ded5; border-radius:8px; color:#102018; font-size:16px; min-height:44px; padding:0 34px 0 12px; }
      .listing-list { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(min(100%,480px),1fr)); }
      .listing-card { color:#101513; display:block; padding:0; text-decoration:none; transition:border-color .2s ease, box-shadow .2s ease; }
      .listing-card:hover { border-color:#b9c8bc; box-shadow:0 10px 28px rgba(16,32,24,.07); }
      .listing-card:focus-visible { box-shadow:0 0 0 3px rgba(26,107,60,.6); outline:none; }
      .listing-inner { align-items:center; display:grid; gap:20px; grid-template-columns:minmax(260px,1fr) minmax(470px,1.35fr); padding:20px; }
      .listing-copy { align-items:center; display:grid; gap:14px; grid-template-columns:46px 1fr; }
      .listing-title { color:var(--sg-ink,#121815); display:block; font-size:clamp(1.15rem,1.05rem + 0.4vw,1.35rem); font-weight:700; letter-spacing:-0.02em; line-height:1.15; }
      .listing-data-link { color:#1a6b3c; font-size:13px; font-weight:600; letter-spacing:.01em; text-decoration:none; }
      .listing-data-link:hover, .listing-data-link:focus-visible { text-decoration:underline; }
      .listing-sub { color:#66706b; font-size:14px; line-height:1.35; margin-top:6px; }
      .listing-metrics { display:grid; gap:12px; grid-template-columns:repeat(4,minmax(0,1fr)); }
      .metric-label { color:#5a655e; display:block; font-family:var(--mono); font-size:10px; letter-spacing:.06em; line-height:1.2; text-transform:uppercase; }
      .metric-value { color:#101513; display:block; font-size:15px; font-weight:720; line-height:1.25; margin-top:7px; }
      .listing-action { align-items:center; border-top:1px solid #e4e9e3; display:flex; gap:14px; justify-content:space-between; padding:14px 20px 16px; }
      .listing-action span { color:#66706b; font-size:13px; line-height:1.35; }
      .listing-action strong { align-items:center; background:#e9f5ec; border:1px solid #cfe3d4; border-radius:999px; color:#1a6b3c; display:inline-flex; flex:0 0 auto; font-size:13px; font-weight:760; justify-content:center; min-height:34px; padding:0 13px; }
      .listing-card:hover .listing-action strong { background:#102018; border-color:#102018; color:#fff; }
      .company-listing .listing-inner { grid-template-columns:minmax(260px,1fr) minmax(190px,.42fr); }
      .listing-priceblock { display:grid; gap:6px; justify-items:end; text-align:right; }
      .listing-price { color:#101513; display:block; font-size:18px; font-weight:760; line-height:1.15; }
      .listing-remaining { color:#66706b; display:block; font-size:12px; line-height:1.2; }
      .company-row em { color:#101513; font-style:normal; font-weight:760; white-space:nowrap; }
      /* segmara market card layout v3 (2026-07-29) */
      .listing-list > article.company-listing {
        align-content:start;
        align-items:start;
        display:grid;
        gap:12px 20px;
        grid-template-areas:"copy price" "action action" "boundary boundary";
        grid-template-columns:minmax(0,1fr) auto;
        padding:20px;
      }
      .listing-list > article.company-listing > .listing-copy {
        align-items:start;
        display:grid;
        gap:4px;
        grid-area:copy;
        grid-template-columns:minmax(0,1fr);
        min-width:0;
      }
      .listing-list > article.company-listing > .listing-copy > span {
        color:#66706b;
        font-size:14px;
        line-height:1.4;
        min-width:0;
      }
      .listing-list > article.company-listing > .listing-price {
        grid-area:price;
        justify-self:end;
        margin-top:2px;
        white-space:nowrap;
      }
      .listing-list > article.company-listing > .review-entry {
        grid-area:action;
        justify-self:start;
      }
      .listing-list > article.company-listing > .review-boundary {
        color:#66706b;
        font-size:13px;
        grid-area:boundary;
        line-height:1.45;
        margin:0;
      }
      @media (max-width:520px) {
        .listing-list > article.company-listing {
          gap:10px;
          grid-template-areas:"copy" "price" "action" "boundary";
          grid-template-columns:minmax(0,1fr);
          padding:18px;
        }
        .listing-list > article.company-listing > .listing-price {
          justify-self:start;
          margin-top:0;
        }
        .listing-list > article.company-listing > .review-entry {
          justify-self:stretch;
          width:100%;
        }
      }
      .quiet-note { color:#66706b; font-size:13px; line-height:1.45; margin:24px auto 0; max-width:820px; text-align:center; }
      .fine-print { color:#5f6b64; font-size:12px; line-height:1.45; margin:20px auto 0; max-width:820px; text-align:center; }
      .checkout-main { max-width:1120px; }
      .checkout-layout { align-items:start; display:grid; gap:26px; grid-template-columns:minmax(0,.92fr) minmax(360px,.62fr); }
      .checkout-copy h1 { text-align:left; }
      .lede { color:#424245; font-size:20px; line-height:1.42; margin:14px 0 0; }
      .panel-card, .notice-card, .next-step { background:#fff; border:1px solid rgba(0,0,0,.05); border-radius:8px; box-shadow:0 18px 45px rgba(0,0,0,.045); padding:22px; }
      .panel-card { margin-top:24px; }
      .notice-card { margin-top:16px; }
      .panel-card p, .notice-card p, .next-step p { margin:8px 0 0; }
      .checkout-notes { display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:20px; }
      .checkout-notes article { background:#fff; border:1px solid rgba(0,0,0,.05); border-radius:8px; padding:18px; }
      .checkout-notes strong { color:var(--ink); display:block; font-size:16px; font-weight:650; line-height:1.2; }
      .checkout-notes span { color:var(--muted); display:block; font-size:13px; line-height:1.45; margin-top:8px; }
      .steps { display:grid; gap:12px; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:20px; }
      .steps article { background:#fff; border:1px solid rgba(0,0,0,.05); border-radius:8px; min-height:124px; padding:18px; }
      .steps strong, .panel-card strong, .notice-card strong, .next-step strong { color:var(--ink); display:block; font-size:16px; font-weight:650; }
      .steps span { color:var(--muted); display:block; font-size:13px; line-height:1.45; margin-top:8px; }
      .form-help { background:var(--soft); border:1px solid rgba(0,0,0,.05); border-radius:8px; color:var(--muted); font-size:13px; line-height:1.45; margin:0; padding:12px; text-align:left; }
      .checkout-form h2 { font-size:28px; }
      .amount-chips { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 4px; }
      .amount-chip { background:#fff; border:1px solid var(--line); border-radius:999px; color:var(--ink); cursor:pointer; font:inherit;font-size:16px; font-size:14px; font-weight:700; min-height:44px; padding:10px 18px; }
      .amount-chip:hover { border-color:#1a6b3c; }
      .amount-chip.active { background:var(--sg-accent,#1a6b3c); border-color:var(--sg-accent,#1a6b3c); color:#f7faf7; }
      .checkout-optional { border:1px solid var(--line); border-radius:8px; padding:10px 12px; }
      .checkout-optional summary { color:var(--muted); cursor:pointer; font-size:13px; font-weight:700; }
      .checkout-optional label { margin-top:10px; }
      .check { align-items:start; display:flex; gap:10px; letter-spacing:0; text-transform:none; }
      .check input { flex:0 0 auto; height:18px; margin-top:2px; min-height:0; width:18px; }
      .check span { color:var(--muted); font-size:12px; font-weight:500; line-height:1.35; }
      .fine { border-top:1px solid var(--line); color:var(--muted); font-size:12px; line-height:1.45; margin:0; padding-top:12px; }
      .result-main { max-width:720px; text-align:center; }
      .result-main h1 { text-align:center; }
      .result-main .panel-card { text-align:left; }
      .workspace-header { margin:0 auto 28px; max-width:840px; text-align:center; }
      .workspace-header h1 { margin-bottom:8px; }
      .workspace-grid { display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr)); margin:26px 0; }
      .workspace-card { background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:8px; padding:20px; }
      .workspace-card strong { color:var(--ink); display:block; font-size:18px; line-height:1.2; }
      .workspace-card span { color:var(--muted); display:block; font-size:13px; line-height:1.4; margin-top:8px; }
      .dashboard-grid { display:grid; gap:14px; grid-template-columns:repeat(4,minmax(0,1fr)); margin:26px 0; }
      .dash-card, .dashboard-section { background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:8px; box-shadow:0 18px 45px rgba(0,0,0,.04); }
      .dash-card { padding:18px; }
      .dash-card span, .dash-card em { color:var(--muted); display:block; font-size:12px; line-height:1.35; }
      .dash-card strong { color:var(--ink); display:block; font-size:24px; line-height:1.1; margin:8px 0; }
      .dash-card em { font-style:normal; }
      .dashboard-section { margin-top:22px; overflow-x:auto; padding:20px; }
      .dashboard-section h2 { font-size:24px; text-align:left; }
      .dashboard-note { color:var(--muted); font-size:12px; line-height:1.45; margin:12px 0 0; }
      .value-cell { font-family:var(--mono); white-space:nowrap; }
      .listing-card .order-form { border-top:1px solid #e4e9e3; padding:16px 20px 18px; }
      @media (max-width:760px) {
        html, body.book-home { max-width:100vw; overflow-x:hidden; width:100%; }
        main { padding:32px 18px 56px; }
        h1 { font-size:44px; }
        .top { grid-template-columns:1fr auto; gap:12px; margin-bottom:34px; }
        .subnav { grid-column:1 / -1; grid-row:2; justify-content:flex-start; overflow-x:auto; padding-bottom:2px; }
        .user-bar { justify-content:flex-end; }
        .market-grid { grid-template-columns:1fr; }
        .market-tracker-form { align-items:stretch; grid-template-columns:1fr; margin-bottom:20px; max-width:100%; padding:12px; }
        .market-tracker-form button[type="submit"] { white-space:normal; width:100%; }
        .market-card { min-height:230px; padding:22px; }
        .asset-name { font-size:30px; }
        .order-row { grid-template-columns:82px 1fr; }
        .order-row .order-btn { grid-column:1 / -1; width:100%; }
        .book-main { box-sizing:border-box; margin:0; max-width:100vw; min-width:0; overflow:hidden; padding:22px 14px 54px; width:100vw; }
        .book-main * { min-width:0; }
        .book-home .top { grid-template-columns:1fr; }
        .book-home .home-top { gap:14px; grid-template-columns:1fr auto; margin:-22px -14px 34px; min-height:0; padding:14px 14px; position:sticky; top:0; }
        .book-home .home-top .brand { font-size:21px; }
        .book-home .home-top .brand-mark { height:22px; width:22px; }
        .book-home .subnav { grid-column:auto; grid-row:auto; justify-content:flex-start; }
        .book-home .home-top .subnav { flex-wrap:wrap; gap:10px 18px; grid-column:1 / -1; justify-content:flex-start; overflow:visible; padding-bottom:2px; }
        .book-home .home-top .navlink { font-size:15px; }
        .book-home .user-bar { flex-wrap:wrap; justify-content:flex-start; }
        .book-home .home-top .user-bar { gap:12px; }
        .book-home .user-bar .btn { font-size:13px; min-height:44px; padding:10px 14px; }
        .book-home .home-top .header-cta { font-size:14px; min-height:44px; padding:0 18px; }
        .breadcrumb { margin-bottom:14px; }
        .book-hero { gap:24px; grid-template-columns:minmax(0,1fr); margin-bottom:42px; max-width:100%; overflow:hidden; }
        .book-hero h1 { font-size:36px; max-width:100%; overflow-wrap:anywhere; }
        .mobile-break { display:block; }
        .book-copy { font-size:17px; max-width:calc(100vw - 28px); overflow-wrap:anywhere; }
        .book-preview { min-height:0; padding:16px; }
        .preview-stats { grid-template-columns:1fr; }
        .preview-stat { padding:12px 0; }
        .preview-stat + .preview-stat { border-left:0; border-top:1px solid #d9dfd8; padding-left:0; }
        .preview-card { padding:0; }
        .preview-row { align-items:start; gap:10px; grid-template-columns:36px minmax(0,1fr); max-width:100%; }
        .preview-row strong { font-size:16px; }
        .preview-row span { font-size:12px; }
        .company-row em { font-size:11px; grid-column:2; justify-self:start; margin-top:4px; max-width:100%; overflow-wrap:anywhere; text-align:left; white-space:normal; }
        .preview-chip { font-size:9px; grid-column:2; justify-self:start; margin-top:4px; }
        .book-proof { gap:24px; grid-template-columns:1fr; margin-bottom:42px; padding:22px; }
        .proof-grid { grid-template-columns:1fr; }
        .proof-item { border-left:0; border-top:1px solid #d2d8d2; padding:16px 0 0; }
        .book-section { margin-bottom:42px; }
        .content-grid, .answer-grid, .split-section { grid-template-columns:1fr; }
        .split-section { padding:22px; }
        .review-line { grid-template-columns:1fr; gap:7px; }
        .site-footer { align-items:flex-start; flex-direction:column; }
        .section-head { align-items:flex-start; flex-direction:column; gap:12px; margin-top:34px; }
        .market-layout { grid-template-columns:1fr; }
        .market-summary { grid-template-columns:1fr; }
        .market-summary div + div { border-left:0; border-top:1px solid var(--line); padding:16px 0 0; }
        .post-signup-review { align-items:start; grid-template-columns:1fr; padding:18px; }
        .post-signup-review button { width:100%; }
        .filter-panel { display:none; }
        .listing-card { grid-template-columns:1fr; }
        .listing-inner, .company-listing .listing-inner { gap:14px; grid-template-columns:1fr; }
        .listing-copy { grid-template-columns:42px 1fr; }
        .listing-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
        .listing-priceblock { justify-items:start; text-align:left; }
        .listing-action { align-items:flex-start; flex-direction:column; }
        .hero-actions { gap:14px; }
        .auth-main { padding:22px 14px 54px; }
        .auth-shell { gap:22px; grid-template-columns:1fr; }
        .auth-copy { padding-top:0; }
        .auth-copy h1 { font-size:40px; line-height:1.02; text-align:left; }
        .auth-copy .hint { font-size:15px; line-height:1.42; margin-top:12px; }
        .auth-track-first { margin-top:18px; padding:14px; }
        .auth-track-first .btn { justify-content:center; width:100%; }
        .auth-track-first form { align-items:stretch; grid-template-columns:1fr; }
        .auth-track-first button[type="submit"] { width:100%; white-space:normal; }
        .tracker-proof { gap:6px; grid-template-columns:repeat(3,minmax(0,1fr)); }
        .tracker-proof div { padding:10px 9px; }
        .tracker-proof strong { font-size:15px; }
        .tracker-proof span { font-size:11px; }
        .auth-mini-list { margin-top:22px; }
        .tracker-preview { display:none; }
        .tracker-preview-row { grid-template-columns:1fr; }
        .tracker-preview-price { white-space:normal; }
        .auth-card { padding:20px; }
        .auth-copy h1 { font-size:30px; line-height:1.05; }
        .auth-copy .hint { font-size:14px; line-height:1.4; margin-top:8px; }
        .auth-copy { display:flex; flex-direction:column; }
        .tracker-mobile-card { display:block; order:-1; margin-top:0; margin-bottom:8px; padding:16px; }
        .tracker-mobile-card h2 { font-size:20px; line-height:1.12; }
        .tracker-mobile-card > .hint { font-size:13px; line-height:1.4; margin-bottom:10px; }
        .tracker-mobile-card form { margin-top:8px; }
        .tracker-mobile-card button[type="submit"] { min-height:50px; font-size:16px; }
        /* tracker-mobile-tighten-v6-2 */
        .tracker-mobile-card > h2 { display:none; }
        .tracker-mobile-card > .hint { display:none; }
        .tracker-mobile-card { padding:14px; margin-bottom:6px; }
        .tracker-mobile-card form { margin-top:0; gap:12px; }
        .tracker-mobile-card button[type="submit"] { min-height:52px; font-size:17px; font-weight:750; width:100%; }
        .tracker-mobile-card input[name="email"] { min-height:50px; font-size:17px; }
        .tracker-mobile-card .tracker-form-promise { margin:0 0 4px; font-size:14px; }
        .tracker-mobile-card .auth-disclosure { display:none; }
        .tracker-mobile-card .tracker-card-benefits { display:none; }
        .tracker-mobile-card .auth-switch { margin-top:10px; }
        .tracker-mobile-card .auth-disclosure { font-size:11px; line-height:1.4; margin-top:12px; padding-top:12px; }
        .tracker-desktop-card { display:none; }
        .tracker-proof { order:2; margin-top:12px; }
        .auth-mini-list { order:3; }
        .tracker-sticky-cta { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40; padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background:rgba(245,246,241,.96); border-top:1px solid #dce4da; box-shadow:0 -8px 24px rgba(16,32,24,.08); backdrop-filter:blur(8px); }
        .tracker-sticky-cta a { align-items:center; background:#102018; border-radius:999px; color:#fff; display:flex; font-size:15px; font-weight:700; justify-content:center; min-height:48px; text-decoration:none; width:100%; }
        body.auth-page { padding-bottom:76px; }
        .product-grid { grid-template-columns:1fr; }
        .product-card, .product-card.featured { grid-column:auto; min-height:300px; padding:28px 22px; }
        .product-card, .product-card.featured { padding:0; }
        .product-cover { min-height:76px; padding:16px; }
        .featured .product-cover { min-height:84px; }
        .product-body { padding:22px; }
        .checkout-layout, .steps, .checkout-notes { grid-template-columns:1fr; }
        .checkout-copy h1 { text-align:center; }
        .lede { font-size:18px; text-align:center; }
        .checkout-notes { gap:8px; margin-top:16px; }
        .checkout-notes article { padding:14px 16px; }
        .checkout-copy .panel-card { display:none; }
        .workspace-grid { grid-template-columns:1fr; }
        .dashboard-grid { grid-template-columns:1fr; }
        .dashboard-section { padding:16px; }
      }

      .how-steps { margin: 28px 0 36px; }
      .how-steps h2 { font-size: clamp(22px, 3vw, 30px); margin: 0 0 16px; text-align: left; }
      .how-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
      .how-grid article { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
      .how-grid span { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--blue); margin-bottom: 8px; }
      .how-grid strong, .how-grid h3 { display: block; font-size: 16px; font-weight: 700; margin: 0 0 6px; color: var(--ink); }
      .how-grid p { margin: 0; font-size: 14px; color: var(--muted); }
      @media (max-width: 800px) { .how-grid { grid-template-columns: 1fr; } }


      /* === ux-delight-v1: motion + tactile (respects reduced-motion) === */
      :root {
        --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
        --rise: 14px;
      }
      @media (prefers-reduced-motion: no-preference) {
        body.ux-ready main > *:not(script) {
          animation: ux-fade-rise .55s var(--ease-out) both;
        }
        body.ux-ready main > *:nth-child(1) { animation-delay: .02s; }
        body.ux-ready main > *:nth-child(2) { animation-delay: .06s; }
        body.ux-ready main > *:nth-child(3) { animation-delay: .1s; }
        body.ux-ready main > *:nth-child(4) { animation-delay: .14s; }
        body.ux-ready main > *:nth-child(5) { animation-delay: .18s; }
        @keyframes ux-fade-rise {
          from { opacity: 0; transform: translate3d(0, var(--rise), 0); }
          to { opacity: 1; transform: translate3d(0, 0, 0); }
        }
        .btn, button.btn, a.btn {
          transition: transform .18s var(--ease-out), background .18s var(--ease-out),
            border-color .18s var(--ease-out), box-shadow .22s var(--ease-out), filter .18s var(--ease-out);
          will-change: transform;
        }
        .btn:hover, button.btn:hover, a.btn:hover {
          transform: translateY(-1px);
          box-shadow: 0 8px 22px rgba(0, 79, 159, .18);
        }
        .btn:active, button.btn:active, a.btn:active {
          transform: translateY(0) scale(.98);
          box-shadow: 0 2px 8px rgba(0, 79, 159, .12);
        }
        .share-card, .market-card, .panel-card, .virtual-card, .dash-card, article.card {
          transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), border-color .2s ease;
        }
        .share-card:hover, .market-card:hover, .panel-card:hover, .virtual-card:hover, .dash-card:hover {
          transform: translateY(-2px);
          box-shadow: 0 12px 32px rgba(29, 29, 31, .08);
        }
        input, select, textarea {
          transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
        }
        input:focus, select:focus, textarea:focus {
          outline: none;
          border-color: var(--blue);
          box-shadow: 0 0 0 3px rgba(26, 107, 60, .16);
        }
        .purchase-hero {
          animation: ux-pop .55s var(--ease-out) both;
        }
        @keyframes ux-pop {
          0% { opacity: 0; transform: scale(.96) translateY(8px); }
          100% { opacity: 1; transform: scale(1) translateY(0); }
        }
        .amount-chip {
          transition: transform .16s var(--ease-out), background .18s ease, border-color .18s ease, color .18s ease;
          will-change: transform;
        }
        .amount-chip:active { transform: scale(.94); }
        .amount-chip.active { animation: ux-chip-pop .34s var(--ease-out); }
        @keyframes ux-chip-pop {
          0% { transform: scale(.92); }
          55% { transform: scale(1.08); }
          100% { transform: scale(1); }
        }
        .ux-confetti { pointer-events: none; position: fixed; inset: 0; overflow: hidden; z-index: 60; }
        .ux-confetti i {
          position: absolute; top: -14px; width: 8px; height: 12px; border-radius: 2px;
          animation: ux-confetti-fall linear both;
        }
        @keyframes ux-confetti-fall {
          0% { transform: translate3d(0, -4vh, 0) rotate(0deg); opacity: 0; }
          8% { opacity: .95; }
          100% { transform: translate3d(var(--drift, 0px), 104vh, 0) rotate(var(--spin, 540deg)); opacity: 0; }
        }
        .ux-success-badge { display: block; margin: 4px auto 12px; }
        .ux-success-badge circle {
          stroke-dasharray: 166; stroke-dashoffset: 166;
          animation: ux-draw .55s var(--ease-out) .15s forwards;
        }
        .ux-success-badge path {
          stroke-dasharray: 48; stroke-dashoffset: 48;
          animation: ux-draw .34s var(--ease-out) .6s forwards;
        }
        @keyframes ux-draw { to { stroke-dashoffset: 0; } }
        .top a, .brand {
          transition: opacity .15s ease, color .15s ease;
        }
        .top a:hover { opacity: .78; }
      }
      .btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible {
        outline: 2px solid var(--blue);
        outline-offset: 2px;
      }
      .ux-sound-toggle {
        position: fixed; right: 14px; bottom: 14px; z-index: 40;
        border: 1px solid var(--line); background: var(--card); color: var(--muted);
        border-radius: 999px; min-height: 36px; padding: 8px 12px; font-size: 12px;
        font-weight: 600; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.06);
      }
      .ux-sound-toggle[data-on="1"] { color: var(--blue); border-color: rgba(26,107,60,.35); }

      /* --- segmara brand lock v1 (2026-07-11) --- */
      /* One system on every page: green primary, radius 10 controls / 14 cards */
      .ux-sound-toggle { display: none !important; }
      .ux-sound-toggle[data-on="1"] { display: inline-flex !important; align-items: center; }
      body.book-home .btn { background: #1a6b3c; border-color: #1a6b3c; color: #f7faf7; border-radius: 10px; font-weight: 650; }
      body.book-home .btn:hover { background: #155832; border-color: #155832; color: #f7faf7; }
      body.book-home .btn.secondary { background: #fff; border-color: #d3ddd5; color: #101513; }
      body.book-home .btn.secondary:hover { border-color: #1a6b3c; color: #1a6b3c; background: #fff; }
      .amount-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
      .amount-chip { border-radius: 10px; min-height: 44px; padding: 0; width: 100%; text-align: center; font-weight: 650; }
      .checkout-notes { grid-template-columns: 1fr; }
      .market-tracker-form { grid-template-columns: 1fr; border-radius: 14px; box-shadow: 0 1px 2px rgba(18,24,21,.05), 0 12px 32px rgba(18,24,21,.06); padding: 20px 22px; }
      .market-tracker-form p { text-align: left; }
      @media (max-width: 760px) {
        .book-home .home-top .brand { grid-row: 1; grid-column: 1; }
        .book-home .home-top .user-bar { grid-row: 1; grid-column: 2; justify-content: flex-end; }
        .book-home .home-top .subnav { grid-row: 2; grid-column: 1 / -1; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0; }
        .book-home .home-top .subnav::-webkit-scrollbar { display: none; }
        /* Auth-first mobile nav keeps both Log in and Sign up visible. */
      }
      @media (max-width: 480px) {
        .amount-chips { grid-template-columns: repeat(2, 1fr); }
      }

    
      /* segmara-price-overflow-fix-v1 — le label de prix porte une date depuis le 2026-08-08,
         il ne peut plus tenir en nowrap sur une carte etroite. */
      .listing-price {
        white-space: normal !important;
        overflow-wrap: break-word;
        hyphens: none;
      }
      .listing-list > article.company-listing {
        grid-template-columns: minmax(11rem, 1fr) minmax(0, auto);
      }
      .listing-list > article.company-listing > .listing-price {
        white-space: normal !important;
        min-width: 0;
        text-wrap: balance;
      }
      .listing-title {
        overflow-wrap: normal;
        word-break: keep-all;
      }
      /* segmara-inner-overflow-fix-v1 — les cartes du market connecte portent .listing-inner
         (copy + priceblock) et un formulaire; la grille deux colonnes les comprime a ~196px
         et le prix passe sous le badge Details. Une seule colonne pour ces cartes. */
      .listing-list > article.company-listing:has(.listing-inner),
      .listing-list > article.company-listing:has(.order-form) {
        grid-template-areas: none;
        grid-template-columns: minmax(0, 1fr);
      }
      .listing-inner {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 12px 20px;
        justify-content: space-between;
        min-width: 0;
        width: 100%;
      }
      .listing-inner > .listing-copy { flex: 1 1 16rem; min-width: 0; }
      .listing-inner > .listing-priceblock { flex: 0 1 auto; min-width: 0; }
      .listing-action { flex-wrap: wrap; min-width: 0; }
      .order-form { width: 100%; }
      .listing-head, .listing-priceblock, .listing-copy, .order-form {
        min-width: 0;
      }
      /* segmara-cta-overhaul-v1 — la ligne de preuve remplace le trio de tuiles sur /market
         (le widget de solde de /top-up garde .market-summary), et le bloc "How company
         review works" recoit enfin un style: il n'en avait aucun. */
      .proof-line {
        color: var(--muted);
        font-size: 14px;
        line-height: 1.5;
        margin: 0 auto 26px;
        max-width: 760px;
        text-align: center;
      }
      .review-process {
        margin: 40px auto;
        max-width: 640px;
      }
      .review-process h2 {
        margin-bottom: 20px;
        text-align: center;
      }
      .review-process dl {
        display: grid;
        gap: 16px;
        margin: 0;
      }
      .review-process dl > div {
        border-top: 1px solid var(--line);
        display: grid;
        gap: 3px 14px;
        grid-template-columns: 140px minmax(0, 1fr);
        padding-top: 16px;
      }
      .review-process dl > div:first-child {
        border-top: 0;
        padding-top: 0;
      }
      .review-process dt {
        color: var(--ink);
        font-size: 15px;
        font-weight: 760;
        margin: 0;
      }
      .review-process dd {
        color: var(--muted);
        font-size: 14px;
        line-height: 1.5;
        margin: 0;
      }
      @media (max-width: 600px) {
        .review-process dl > div {
          grid-template-columns: 1fr;
          gap: 4px;
        }
      }


/* ---- segmara v8 design layer ---- */
/* ============================================================================
   Segmara v8 design layer
   Loaded AFTER the page's inline <style>, so it wins the cascade at equal
   specificity. Nothing here touches markup, routes, form field names, or the
   data-review-* tracking attributes.

   Design read: redesign-overhaul of a private-markets research landing for
   retail investors sizing pre-IPO names. Trust-first editorial-financial
   language on the existing forest-green brand.
   Dials: DESIGN_VARIANCE 6 / MOTION_INTENSITY 4 / VISUAL_DENSITY 4.
   (Trust-first finance caps variance and motion; redesign-overhaul adds +2/+2.)

   Locks:
     - one accent: forest green, used identically in every section
     - one radius system: 6px interactive, 14px containers, 999px pills
     - one theme: light, locked (see the dark-mode note below)
     - type: IBM Plex Serif 600 display / Plex Sans 400-600 UI / Plex Mono
       400-500 numerals. Only weights actually loaded from Google Fonts are
       referenced, so nothing is faux-bolded.
   ========================================================================= */

:root {
  color-scheme: light;

  --v8-paper:      #f4f6f3;
  --v8-paper-2:    #eaeee9;
  --v8-surface:    #ffffff;
  --v8-surface-2:  #fafbf9;

  --v8-ink:        #0f1512;
  --v8-ink-2:      #2b332e;
  --v8-muted:      #5d6862;
  --v8-faint:      #8a938d;

  --v8-line:       #dde3dd;
  --v8-line-2:     #c7d0c8;

  --v8-accent:     #14603a;
  --v8-accent-2:   #0f4a2d;
  --v8-accent-ink: #ffffff;
  --v8-accent-wash:#e6f0e9;

  --v8-deep:       #0c1a13;
  --v8-deep-2:     #14291d;
  --v8-on-deep:    #f2f6f2;
  --v8-on-deep-mut:#9db0a4;

  --v8-r-int:   6px;
  --v8-r-box:   14px;
  --v8-r-pill:  999px;

  --v8-max:      74rem;
  --v8-gutter:   clamp(18px, 4vw, 44px);

  --v8-ease:     cubic-bezier(.2, .8, .2, 1);
  --v8-fast:     150ms;
  --v8-slow:     420ms;

  --v8-sans:  "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --v8-serif: "IBM Plex Serif", "Iowan Old Style", Georgia, serif;
  --v8-mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --v8-shadow-1: 0 1px 2px rgba(15, 21, 18, .05);
  --v8-shadow-2: 0 18px 48px -24px rgba(12, 26, 19, .35);
}

/* Dark mode deliberately NOT shipped. The homepage carries ~1000 lines of
   inline CSS with hardcoded light surfaces (#fff, rgba(255,255,255,.94)) that a
   token layer cannot reach. A token-only dark mode renders a broken hybrid:
   light chrome, dark text. Locking light is the honest choice until the inline
   block is tokenised. */

/* --------------------------------------------------------------------------
   1. Base
   ----------------------------------------------------------------------- */

body.book-home,
body {
  background: var(--v8-paper);
  color: var(--v8-ink);
  font-family: var(--v8-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.book-main,
main.book-main {
  overflow-x: clip;
  max-width: var(--v8-max);
  padding-inline: var(--v8-gutter);
}

/* Numerals never jitter between rows. */
.v8-num,
body.book-home .listing-price,
.preview-price,
body.book-home .v2-statband strong,
.symbol,
.qty,
code, kbd, samp {
  font-family: var(--v8-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
}

h1, h2, h3 {
  color: var(--v8-ink);
  text-wrap: balance;
}

body.book-home .book-hero h1,
h1 {
  font-family: var(--v8-serif);
  font-weight: 600;
  font-size: clamp(2.55rem, 5.6vw, 4.6rem);
  line-height: .97;
  letter-spacing: -.025em;
  margin: 0;
}

h2 {
  font-family: var(--v8-sans);
  font-weight: 600;
  font-size: clamp(1.6rem, 2.8vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0 0 .5rem;
}

p { color: var(--v8-ink-2); max-width: 68ch; }

a { color: inherit; }

::selection { background: var(--v8-accent); color: var(--v8-accent-ink); }

:where(a, button, .btn, input, select, summary):focus-visible {
  outline: 2px solid var(--v8-accent);
  outline-offset: 3px;
  border-radius: var(--v8-r-int);
}

/* --------------------------------------------------------------------------
   2. Header. One line at desktop, 68px tall.
   ----------------------------------------------------------------------- */

.top.home-top,
.top {
  align-items: center;
  background: color-mix(in srgb, var(--v8-paper) 88%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--v8-line);
  border-radius: 0;
  box-shadow: none;
  gap: clamp(16px, 3vw, 40px);
  margin: 0;
  min-height: 68px;
  padding: 0 var(--v8-gutter);
  position: sticky;
  top: 0;
  z-index: 40;
}

.top .brand,
.brand {
  font-family: var(--v8-serif);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--v8-ink);
  text-decoration: none;
}

.subnav { gap: clamp(10px, 1.6vw, 26px); }

.navlink {
  color: var(--v8-muted);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  padding: 6px 2px;
  position: relative;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--v8-fast) var(--v8-ease);
}

.navlink::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--v8-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--v8-fast) var(--v8-ease);
}

.navlink:hover { color: var(--v8-ink); }
.navlink:hover::after,
.navlink.active::after { transform: scaleX(1); }

.login-link {
  color: var(--v8-ink-2);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
}
.login-link:hover { color: var(--v8-accent); }

/* --------------------------------------------------------------------------
   3. Buttons. One shape system, WCAG AA text contrast on every variant.
   ----------------------------------------------------------------------- */

.btn,
button,
input[type="submit"] {
  border-radius: var(--v8-r-int);
  font-family: var(--v8-sans);
  font-weight: 600;
  letter-spacing: -.008em;
  transition:
    transform var(--v8-fast) var(--v8-ease),
    background-color var(--v8-fast) var(--v8-ease),
    border-color var(--v8-fast) var(--v8-ease),
    box-shadow var(--v8-fast) var(--v8-ease);
  white-space: nowrap;
}

.btn,
.header-cta,
button[type="submit"] {
  background: var(--v8-accent);
  border: 1px solid var(--v8-accent);
  color: var(--v8-accent-ink);
}

.btn:hover,
.header-cta:hover,
button[type="submit"]:hover {
  background: var(--v8-accent-2);
  border-color: var(--v8-accent-2);
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--v8-accent) 70%, transparent);
}

.btn:active,
button:active { transform: translateY(1px); }

.btn.secondary,
.top a.btn.secondary {
  background: var(--v8-surface);
  border: 1px solid var(--v8-line-2);
  color: var(--v8-ink);
}
.btn.secondary:hover,
.top a.btn.secondary:hover {
  background: var(--v8-surface-2);
  border-color: var(--v8-accent);
  color: var(--v8-ink);
}

.header-cta { padding: 9px 18px; font-size: 14.5px; }

.quiet-link {
  color: var(--v8-ink-2);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--v8-line-2);
  padding-bottom: 2px;
  transition: border-color var(--v8-fast) var(--v8-ease), color var(--v8-fast) var(--v8-ease);
}
.quiet-link:hover { color: var(--v8-accent); border-color: var(--v8-accent); }

/* --------------------------------------------------------------------------
   4. Hero. Was a dark rectangle floating inside a light page with white
      gutters, which read as a container bug. Now it bleeds edge to edge and
      the content keeps the page's measure.
   ----------------------------------------------------------------------- */

body.book-home .book-hero {
  background:
    radial-gradient(120% 90% at 8% 0%, var(--v8-deep-2) 0%, transparent 62%),
    linear-gradient(168deg, var(--v8-deep) 0%, #0a1710 58%, var(--v8-deep) 100%);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--v8-on-deep);
  border-radius: var(--v8-r-box) var(--v8-r-box) 0 0;
  margin-bottom: 0;
  padding: clamp(56px, 8vh, 96px) clamp(28px, 4vw, 60px);
  position: relative;
  overflow: hidden;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

/* Hairline horizon so the dark band ends on an edge, not a fade. */
.book-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--v8-accent) 60%, transparent), transparent);
}

body.book-home .book-hero h1 { color: #ffffff; max-width: 15ch; }

body.book-home .book-hero .book-copy,
body.book-home .book-hero p {
  color: var(--v8-on-deep-mut);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  margin: 1.15rem 0 0;
  max-width: 46ch;
}

body.book-home .book-hero .hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: clamp(24px, 3.5vh, 38px);
}

body.book-home .book-hero .btn { padding: 12px 22px; font-size: 15.5px; }

body.book-home .book-hero .btn.secondary {
  background: transparent;
  border-color: color-mix(in srgb, #ffffff 34%, transparent);
  color: #ffffff;
}
body.book-home .book-hero .btn.secondary:hover {
  background: color-mix(in srgb, #ffffff 10%, transparent);
  border-color: #ffffff;
  color: #ffffff;
}

body.book-home .book-hero .quiet-link {
  color: var(--v8-on-deep-mut);
  border-color: color-mix(in srgb, #ffffff 26%, transparent);
}
body.book-home .book-hero .quiet-link:hover { color: #ffffff; border-color: #ffffff; }

/* --------------------------------------------------------------------------
   5. Featured panel inside the hero.
   ----------------------------------------------------------------------- */

body.book-home .book-preview {
  background: color-mix(in srgb, #ffffff 5%, transparent);
  border: 1px solid color-mix(in srgb, #ffffff 12%, transparent);
  border-radius: var(--v8-r-box);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent), 0 30px 70px -40px #000;
  padding: clamp(18px, 2vw, 26px);
}

body.book-home .book-preview .preview-top span {
  color: var(--v8-on-deep-mut);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body.book-home .book-preview .preview-account strong {
  color: #ffffff;
  display: block;
  font-family: var(--v8-serif);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -.015em;
}
body.book-home .book-preview .preview-account span {
  color: var(--v8-on-deep-mut);
  font-size: 13.5px;
}

body.book-home .book-preview .preview-row,
body.book-home .book-preview .company-row {
  align-items: center;
  border-top: 1px solid color-mix(in srgb, #ffffff 10%, transparent);
  gap: 14px;
  padding: 13px 0;
  transition: background-color var(--v8-fast) var(--v8-ease);
}
body.book-home .book-preview .preview-row:first-of-type { border-top: 0; }
body.book-home .book-preview .preview-row:hover {
  background: color-mix(in srgb, #ffffff 4%, transparent);
}

body.book-home .book-preview .company-icon,
body.book-home .book-preview .logo {
  background: color-mix(in srgb, #ffffff 92%, transparent);
  border-radius: 8px;
  flex: 0 0 auto;
}

body.book-home .book-preview .preview-price {
  color: color-mix(in srgb, var(--v8-accent-2) 82%, #ffffff);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   6. Logo strip. Was clipped hard at both edges. Now it fades.
   ----------------------------------------------------------------------- */

body.book-home .v2-logo-strip {
  background: var(--v8-surface);
  border: 1px solid var(--v8-line);
  border-top: 0;
  border-radius: 0 0 var(--v8-r-box) var(--v8-r-box);
  margin-top: 0;
  padding-block: 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.v2-logo-item {
  color: var(--v8-muted);
  font-size: 13.5px;
  font-weight: 500;
  gap: 8px;
  opacity: .78;
  transition: opacity var(--v8-fast) var(--v8-ease);
}
.v2-logo-item:hover { opacity: 1; }
.v2-logo-item em {
  color: var(--v8-faint);
  font-family: var(--v8-mono);
  font-size: 10.5px;
  font-style: normal;
  letter-spacing: .08em;
}

.v2-logo-note {
  color: var(--v8-faint);
  font-size: 12px;
  margin: 14px auto 0;
  text-align: center;
}

/* --------------------------------------------------------------------------
   7. Stat band. Was three identical bordered cards. Now a hairline row with
      asymmetric columns and display numerals.
   ----------------------------------------------------------------------- */

body.book-home .v2-statband {
  background: none;
  border: 0;
  border-block: 1px solid var(--v8-line);
  border-radius: 0;
  display: grid;
  gap: 0;
  grid-template-columns: 1.05fr 1.35fr 1fr;
  margin-block: clamp(48px, 7vh, 84px);
  padding: 0;
}

body.book-home .v2-statband > div {
  background: none;
  border: 0;
  border-left: 1px solid var(--v8-line);
  border-radius: 0;
  box-shadow: none;
  padding: clamp(26px, 3.4vw, 40px) clamp(18px, 2.4vw, 34px);
}
body.book-home .v2-statband > div:first-child { border-left: 0; padding-left: 0; }

body.book-home .v2-statband strong {
  color: var(--v8-ink);
  display: block;
  font-size: clamp(2.4rem, 4.4vw, 3.5rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1;
}

body.book-home .v2-statband span {
  color: var(--v8-muted);
  display: block;
  font-size: 14px;
  line-height: 1.45;
  margin-top: 12px;
  max-width: 30ch;
}

/* --------------------------------------------------------------------------
   8. Review process. Was a definition list with a hairline under every row.
      Now a stepped two-column read with sparse rules.
   ----------------------------------------------------------------------- */

.review-process {
  margin-block: clamp(48px, 7vh, 88px);
}

.review-process h2 {
  margin-bottom: clamp(24px, 3vh, 38px);
  max-width: 18ch;
  text-align: left;
}

.review-process dl {
  border-top: 1px solid var(--v8-line);
  display: grid;
  gap: 0;
  margin: 0;
}

body.book-home .review-process dl > div {
  align-items: start;
  border-top: 0;
  border-bottom: 0;
  display: grid;
  gap: clamp(12px, 3vw, 40px);
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  padding: clamp(20px, 2.6vh, 28px) 0;
  position: relative;
}

body.book-home .review-process dl > div + div { border-top: 1px solid var(--v8-line); }

body.book-home .review-process dt {
  color: var(--v8-ink);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -.015em;
}

body.book-home .review-process dd {
  color: var(--v8-muted);
  font-size: 15.5px;
  margin: 0;
  max-width: 58ch;
}

/* --------------------------------------------------------------------------
   9. Tracker. The one conversion surface on the page, so it gets the only
      elevated container.
   ----------------------------------------------------------------------- */

body.book-home .tracker-product {
  background: var(--v8-surface);
  border: 1px solid var(--v8-line);
  border-radius: var(--v8-r-box);
  box-shadow: var(--v8-shadow-2);
  margin-block: clamp(48px, 7vh, 88px);
  padding: clamp(28px, 4vw, 52px);
  position: relative;
  overflow: hidden;
}

.tracker-product::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--v8-accent), color-mix(in srgb, var(--v8-accent) 30%, transparent));
}

body.book-home .tracker-product h2 { margin-bottom: .35rem; }
body.book-home .tracker-product > p { color: var(--v8-muted); font-size: 15.5px; }

.homepage-tracker-form,
body.book-home .tracker-product form {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin-top: clamp(20px, 3vh, 30px);
  max-width: 42rem;
  padding: 0;
}

.homepage-tracker-form label,
body.book-home .tracker-product label {
  color: var(--v8-ink-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.homepage-tracker-form input,
body.book-home .tracker-product input[type="email"] {
  background: var(--v8-surface-2);
  border: 1px solid var(--v8-line-2);
  border-radius: var(--v8-r-int);
  color: var(--v8-ink);
  font-size: 16px;
  min-height: 50px;
  padding: 0 14px;
}

.homepage-tracker-form input::placeholder,
body.book-home .tracker-product input::placeholder { color: var(--v8-faint); }

.homepage-tracker-form input:focus,
body.book-home .tracker-product input:focus {
  background: var(--v8-surface);
  border-color: var(--v8-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--v8-accent) 16%, transparent);
  outline: none;
}

.homepage-tracker-form button[type="submit"],
body.book-home .tracker-product button[type="submit"] {
  background: var(--v8-accent);
  border: 1px solid var(--v8-accent);
  border-radius: var(--v8-r-int);
  color: var(--v8-accent-ink);
  font-size: 15.5px;
  min-height: 50px;
  padding: 0 26px;
}
.homepage-tracker-form button[type="submit"]:hover,
body.book-home .tracker-product button[type="submit"]:hover {
  background: var(--v8-accent-2);
  border-color: var(--v8-accent-2);
}

body.book-home .tracker-product > p:last-of-type,
.homepage-tracker-form p {
  color: var(--v8-faint);
  font-size: 12.5px;
  text-align: left;
}

/* --------------------------------------------------------------------------
   10. Listings. Was twelve identical shadowed cards with a wrapping price and
       the same disclaimer repeated twelve times. Now the price is the anchor,
       the boilerplate recedes, and the grid breathes.
   ----------------------------------------------------------------------- */

.book-section { margin-block: clamp(48px, 7vh, 88px); }

body.book-home .section-head {
  align-items: end;
  border-bottom: 1px solid var(--v8-line);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: clamp(22px, 3vh, 32px);
  padding-bottom: clamp(14px, 2vh, 20px);
}
body.book-home .section-head h2 { margin-bottom: .25rem; }
body.book-home .section-head p { color: var(--v8-muted); font-size: 14.5px; margin: 0; }

.filter-clear {
  color: var(--v8-accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
.filter-clear:hover { text-decoration: underline; text-underline-offset: 4px; }

body.book-home .listing-list {
  display: grid;
  gap: clamp(12px, 1.4vw, 18px);
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}

body.book-home .listing-card {
  align-content: start;
  background: var(--v8-surface);
  border: 1px solid var(--v8-line);
  border-radius: var(--v8-r-box);
  box-shadow: none;
  display: grid;
  gap: 0;
  padding: clamp(18px, 1.8vw, 22px);
  position: relative;
  transition:
    border-color var(--v8-fast) var(--v8-ease),
    box-shadow var(--v8-slow) var(--v8-ease),
    transform var(--v8-slow) var(--v8-ease);
}

.listing-card:hover {
  border-color: var(--v8-line-2);
  box-shadow: var(--v8-shadow-2);
  transform: translateY(-2px);
}

.listing-copy { display: grid; gap: 4px; }

body.book-home .listing-title {
  color: var(--v8-ink);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.2;
}

.listing-copy > span {
  color: var(--v8-faint);
  font-size: 12px;
  letter-spacing: .01em;
}

.listing-data-link {
  color: var(--v8-accent);
  font-size: 13px;
  font-weight: 500;
  justify-self: start;
  margin-top: 2px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--v8-fast) var(--v8-ease);
}
.listing-data-link:hover { border-color: currentColor; }

/* The price gets its own full-width line, so it stops wrapping to three. */
body.book-home .listing-price {
  border-top: 1px solid var(--v8-line);
  color: var(--v8-ink);
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.01em;
  margin-top: 14px;
  padding-top: 12px;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.listing-price::-webkit-scrollbar { display: none; }

body.book-home .listing-card .btn.review-entry {
  font-size: 14px;
  justify-self: stretch;
  margin-top: 14px;
  padding: 10px 16px;
  text-align: center;
}

/* Repeated twelve times. Kept for compliance, demoted visually. */
body.book-home .review-boundary {
  border: 0;
  color: var(--v8-faint);
  font-size: 11.5px;
  line-height: 1.4;
  margin: 10px 0 0;
  max-width: none;
}

/* --------------------------------------------------------------------------
   11. Fine print and footer.
   ----------------------------------------------------------------------- */

.fine-print,
.quiet-note {
  color: var(--v8-faint);
  font-size: 12.5px;
  line-height: 1.55;
  margin-inline: auto;
  max-width: 74ch;
  text-align: center;
}

body.book-home .site-footer {
  align-items: center;
  border-top: 1px solid var(--v8-line);
  color: var(--v8-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  justify-content: space-between;
  margin-top: clamp(40px, 6vh, 72px);
  padding-block: clamp(26px, 4vh, 40px);
}

body.book-home .site-footer > span {
  font-family: var(--v8-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--v8-ink);
}

.footer-links { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.footer-links a {
  color: var(--v8-muted);
  font-size: 13.5px;
  text-decoration: none;
  transition: color var(--v8-fast) var(--v8-ease);
}
.footer-links a:hover { color: var(--v8-accent); }

/* --------------------------------------------------------------------------
   12. Motion. MOTION_INTENSITY 4.
       Each animation earns its place: section reveals give reading hierarchy
       as content enters, the hero entrance orders the first read, and button
       or card transforms are pure feedback. No scroll listeners, no JS: this
       is CSS scroll-driven animation, so it degrades to static on browsers
       that lack it.
   ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  @keyframes v8-rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
  }

  .book-hero > div > * {
    animation: v8-rise 640ms var(--v8-ease) backwards;
  }
  .book-hero > div > h1              { animation-delay:  40ms; }
  .book-hero > div > .book-copy      { animation-delay: 140ms; }
  .book-hero > div > .hero-actions   { animation-delay: 240ms; }
  .book-preview                      { animation: v8-rise 760ms var(--v8-ease) 180ms backwards; }

  /* Scroll-driven reveals were removed after inspecting the rendered page:
     with `animation: ... both` on a view() timeline, every section that the
     timeline did not resolve stayed at opacity 0. Twelve company cards and a
     whole section rendered blank. An animation that can hide content is worse
     than no animation, so motion now stops at the hero entrance plus hover
     and press feedback. */
}

@media (prefers-reduced-motion: reduce) {
  .book-hero > div > *,
  .book-preview,
  .v2-statband > div,
  .review-process dl > div,
  .tracker-product,
  .section-head,
  .listing-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .listing-card:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   13. Responsive. Every multi-column block states its own collapse.
   ----------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .book-hero { grid-template-columns: 1fr; }
  .book-preview { margin-top: clamp(28px, 4vh, 44px); }
}

@media (max-width: 760px) {
  body { font-size: 16px; }

  .top.home-top { min-height: 60px; padding-inline: 16px; }
  .subnav { display: none; }

  .book-hero {
    padding-block: clamp(48px, 8vh, 72px);
    text-align: left;
  }
  .book-hero h1 { font-size: clamp(2.2rem, 10vw, 3rem); max-width: none; }
  .book-hero .hero-actions > .btn { flex: 1 1 auto; text-align: center; }

  .v2-statband { grid-template-columns: 1fr; }
  .v2-statband > div {
    border-left: 0;
    border-top: 1px solid var(--v8-line);
    padding-inline: 0;
  }
  .v2-statband > div:first-child { border-top: 0; }
  .v2-statband span { max-width: none; }

  .review-process dl > div { grid-template-columns: 1fr; gap: 6px; }

  .listing-list { grid-template-columns: 1fr; }

  .site-footer { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   14. Print
   ----------------------------------------------------------------------- */

@media print {
  .top, .site-footer, .v2-logo-strip { display: none; }
  .book-hero { background: none; color: #000; }
  .book-hero h1 { color: #000; }
  .listing-card { break-inside: avoid; border-color: #999; }
}


/* --------------------------------------------------------------------------
   15. Corrections found by inspecting the rendered page
   ----------------------------------------------------------------------- */

/* The hero kept a negative inline margin from the old stylesheet, so it sat
   32px left of the header and the two edges never lined up. */
body.book-home .book-hero {
  margin-inline: 0;
  margin-bottom: 0;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, .78fr);
  padding-block: clamp(48px, 7vh, 78px);
}

/* Two lines, never three. A 3-line hero headline is a font-size error. */
body.book-home .book-hero h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.5rem);
  line-height: 1.02;
  max-width: 13ch;
}

body.book-home .book-hero .book-copy { max-width: 42ch; }

/* Header and hero are one masthead block: same width, no overlap, no gap. */
body.book-home .top.home-top {
  border-radius: var(--v8-r-box) var(--v8-r-box) 0 0;
  margin-bottom: 0;
}
body.book-home .book-hero { border-radius: 0; }

/* Featured rows: the sector label was wrapping and shoving the price into the
   middle of the row. Keep each row on one line. */
body.book-home .book-preview .preview-row,
body.book-home .book-preview .company-row {
  display: flex;
  flex-wrap: nowrap;
}
body.book-home .book-preview .company-row > div,
body.book-home .book-preview .company-row > span:not(.company-icon):not(.preview-price) {
  min-width: 0;
  flex: 1 1 auto;
}
body.book-home .book-preview .company-row span:not(.company-icon):not(.preview-price) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.book-home .book-preview .preview-price {
  flex: 0 0 auto;
  margin-left: auto;
  text-align: right;
}

/* Logo marquee was starting off-canvas on the left. */
body.book-home .v2-logo-strip {
  overflow: hidden;
  position: relative;
}
body.book-home .v2-logo-strip .v2-logo-track {
  padding-inline: clamp(20px, 3vw, 40px);
}

/* The price line kept losing to a more specific inline rule. */
body.book-home .listing-card .listing-price,
body.book-home .company-listing .listing-price {
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

/* Prices were being clipped mid-string ("as of June" with the year cut off).
   Truncated financial data is worse than small financial data. */
body.book-home .book-hero {
  grid-template-columns: minmax(0, .96fr) minmax(352px, .88fr);
}
body.book-home .book-preview .preview-price {
  font-size: 11.5px;
  letter-spacing: -.015em;
  white-space: nowrap;
  flex: 0 0 auto;
}
body.book-home .book-preview .company-row > div,
body.book-home .book-preview .company-row > span:not(.company-icon):not(.preview-price) {
  flex: 1 1 auto;
  min-width: 0;
}
body.book-home .book-preview .preview-row { gap: 10px; }
body.book-home .book-preview .company-icon { width: 34px; height: 34px; }

/* The price cannot be forced onto one line: the server stylesheet carries a
   `white-space: normal !important` guard. So give it room instead of fighting
   it. The card drops to the single-column stack the stylesheet already defines
   for narrow viewports, which reads better anyway: name, then price, then the
   call to action. */
body.book-home .listing-list > article.company-listing {
  grid-template-areas: "copy" "price" "action" "boundary";
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
body.book-home .listing-list > article.company-listing > .listing-price {
  font-size: 12.5px;
  justify-self: start;
  text-align: left;
  width: 100%;
}
body.book-home .listing-list > article.company-listing > .listing-copy { gap: 4px; }

/* --------------------------------------------------------------------------
   16. Contrast and alignment corrections
   ----------------------------------------------------------------------- */

/* Prices in the hero panel were rendering dim green on near-black, well under
   WCAG AA. Financial figures are the one thing on this page that must never be
   hard to read. */
body.book-home .book-preview .preview-price {
  color: #d9e8dd;
  font-weight: 500;
  opacity: 1;
}
body.book-home .book-preview .company-row strong,
body.book-home .book-preview .company-row b { color: #ffffff; }
body.book-home .book-preview .company-row span:not(.company-icon):not(.preview-price) {
  color: #a9bcb0;
}

/* The process section sat in its own narrow centred column while every other
   section started at the page gutter, so it read as misaligned. */
body.book-home .review-process {
  margin-inline: 0;
  max-width: none;
  text-align: left;
}
body.book-home .review-process h2 { margin-inline: 0; }
body.book-home .review-process dl { max-width: 60rem; }

/* The tracker is the page's only conversion surface. Give the field and the
   button the width of the card instead of stranding them on the left. */
body.book-home .tracker-product form { max-width: none; }
body.book-home .tracker-product form > label { max-width: 34rem; }
body.book-home .tracker-product button[type="submit"] {
  justify-self: start;
  max-width: 34rem;
  width: 100%;
}

/* First marquee slot was rendering as an empty tile. */
body.book-home .v2-logo-strip .v2-logo-item img[src=""],
body.book-home .v2-logo-strip .v2-logo-item img:not([src]) { display: none; }

/* --------------------------------------------------------------------------
   17. Responsive, restated at the specificity the later rules created
   The earlier breakpoints used bare `.book-hero`, which lost to the
   `body.book-home .book-hero` rules added below them. At 390px the second
   column kept its 352px minimum, the headline column collapsed to a few pixels
   and the h1 rendered one character per line.
   ----------------------------------------------------------------------- */

@media (max-width: 1024px) {
  body.book-home .book-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(24px, 4vh, 40px);
  }
  body.book-home .book-preview { margin-top: 0; }
}

@media (max-width: 760px) {
  body.book-home .book-hero {
    grid-template-columns: minmax(0, 1fr);
    padding: clamp(36px, 6vh, 56px) 20px;
  }
  body.book-home .book-hero h1 {
    font-size: clamp(1.9rem, 8.4vw, 2.5rem);
    line-height: 1.06;
    max-width: none;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
  body.book-home .book-hero .book-copy { max-width: none; }
  body.book-home .book-hero .hero-actions { gap: 10px 14px; }

  body.book-home .book-preview { min-width: 0; }
  body.book-home .book-preview .company-row { gap: 8px; }
  body.book-home .book-preview .preview-price { font-size: 10.5px; }

  body.book-home .v2-statband { grid-template-columns: minmax(0, 1fr); }
  body.book-home .v2-statband > div {
    border-left: 0;
    border-top: 1px solid var(--v8-line);
    padding-inline: 0;
  }
  body.book-home .v2-statband > div:first-child { border-top: 0; }

  body.book-home .review-process dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  body.book-home .listing-list { grid-template-columns: minmax(0, 1fr); }
  body.book-home .tracker-product { padding: 24px 20px; }
  body.book-home .tracker-product form > label,
  body.book-home .tracker-product button[type="submit"] { max-width: none; }
  body.book-home .site-footer { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 420px) {
  body.book-home .book-hero h1 { font-size: clamp(1.75rem, 8vw, 2.1rem); }
  body.book-home .book-hero .hero-actions > .btn { flex: 1 1 44%; text-align: center; }
}

/* Sector labels were truncating to "Arti..." and "Biot..." on phones, which
   looks like a rendering fault. Below 760px the company name and the price
   carry the row on their own. */
@media (max-width: 760px) {
  body.book-home .book-preview .company-row span:not(.company-icon):not(.preview-price) {
    display: none;
  }
  body.book-home .book-preview .company-row strong { white-space: nowrap; }
  body.book-home .book-preview .preview-row { padding-block: 11px; }
}

/* Nav links measured 3.50:1 against the header, under the 4.5:1 WCAG AA floor
   for text this size. */
body.book-home .navlink,
.top .navlink { color: var(--v8-ink-2); }
body.book-home .v2-logo-item,
body.book-home .v2-logo-note { color: var(--v8-muted); }

/* --------------------------------------------------------------------------
   18. Editorial templates: company pages, blog, FAQ, glossary
   These pages are where search traffic lands, and they were the weakest
   surface: content sat in a narrow left column with the right half of a
   1440px screen empty, the h1 ran ~90px over two lines, and the indicative
   mark (the one thing the query asks for) was pushed ~1250px down behind two
   stacked calls to action.
   Scoped to `body > main` so it cannot touch the app pages, which use
   `main.book-main` or `main.review-main`.
   ----------------------------------------------------------------------- */

body > main:not(.book-main):not(.review-main) {
  margin-inline: auto;
  max-width: 68rem;
  padding-inline: clamp(20px, 4vw, 40px);
}

body > main:not(.book-main):not(.review-main) > header h1 {
  font-family: var(--v8-serif);
  font-size: clamp(2rem, 3.8vw, 3.1rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.025em;
  margin: 0 0 .5rem;
  max-width: 22ch;
}

body > main:not(.book-main):not(.review-main) > header .post-meta {
  color: var(--v8-faint);
  font-size: 13px;
  margin: 0 0 1.15rem;
}

body > main:not(.book-main):not(.review-main) > header .lede {
  color: var(--v8-ink-2);
  font-size: clamp(1.02rem, 1.25vw, 1.15rem);
  line-height: 1.6;
  max-width: 68ch;
}

/* The button and the email form were stacked, reading as two competing calls
   to action. One compact block, so the page's real content starts sooner. */
body > main:not(.book-main):not(.review-main) > header .cta {
  align-items: center;
  background: var(--v8-accent);
  border: 1px solid var(--v8-accent);
  border-radius: var(--v8-r-int);
  color: var(--v8-accent-ink);
  display: inline-flex;
  font-weight: 600;
  margin-top: 1.2rem;
  padding: 11px 20px;
  text-decoration: none;
  white-space: nowrap;
}
body > main:not(.book-main):not(.review-main) > header .cta:hover {
  background: var(--v8-accent-2);
  border-color: var(--v8-accent-2);
}

body > main:not(.book-main):not(.review-main) > header .review-tracker-form {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: .9rem;
  max-width: 46rem;
}
body > main:not(.book-main):not(.review-main) > header .review-tracker-form input[type="email"] {
  flex: 1 1 17rem;
  min-width: 0;
}

body > main:not(.book-main):not(.review-main) > nav {
  border-bottom: 1px solid var(--v8-line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: clamp(22px, 3.2vh, 36px);
  padding-bottom: 14px;
}
body > main:not(.book-main):not(.review-main) > nav a {
  color: var(--v8-muted);
  font-size: 14px;
  text-decoration: none;
}
body > main:not(.book-main):not(.review-main) > nav a:hover { color: var(--v8-accent); }
body > main:not(.book-main):not(.review-main) > nav .ed-brand {
  color: var(--v8-ink);
  font-family: var(--v8-serif);
  font-size: 1.1rem;
  font-weight: 600;
  margin-right: 6px;
}

@media (max-width: 640px) {
  body > main:not(.book-main):not(.review-main) > header h1 {
    font-size: clamp(1.7rem, 7.5vw, 2.2rem);
    max-width: none;
  }
  body > main:not(.book-main):not(.review-main) > header .cta {
    justify-content: center;
    width: 100%;
  }
}

/* The generic h1 clamp was sized for the homepage's 4-word headline; on
   /pre-ipo-tracker it pushed a longer title to three lines at desktop. The
   homepage keeps its own larger rule. */
h1 { font-size: clamp(1.95rem, 4.2vw, 3.35rem); }
body.book-home .book-hero h1 { font-size: clamp(2.1rem, 4.2vw, 3.5rem); }

/* --------------------------------------------------------------------------
   19. The answer block on company and blog pages
   The number the visitor searched for, stated once, above the fold, in the
   shape an AI engine can quote. The as-of date sits next to the figure on
   purpose: if the mark is two months old the reader sees that immediately.
   ----------------------------------------------------------------------- */

.topic-answer {
  background: var(--v8-surface);
  border: 1px solid var(--v8-line);
  border-left: 3px solid var(--v8-accent);
  border-radius: var(--v8-r-box);
  display: grid;
  gap: 0;
  margin: clamp(20px, 3vh, 30px) 0 0;
  max-width: 34rem;
  padding: clamp(18px, 2.4vw, 24px) clamp(20px, 2.6vw, 28px);
}

.topic-answer .answer-lead {
  color: var(--v8-muted);
  font-size: 14px;
  line-height: 1.45;
  margin: 0 0 10px;
  max-width: 44ch;
}

.topic-answer .answer-figure {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.topic-answer .answer-figure strong {
  color: var(--v8-ink);
  font-family: var(--v8-mono);
  font-size: clamp(2rem, 4.2vw, 2.9rem);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1;
}
.topic-answer .answer-figure span {
  color: var(--v8-muted);
  font-size: 14px;
}

.topic-answer .answer-asof {
  color: var(--v8-muted);
  font-size: 13.5px;
  margin: 8px 0 0;
}
.topic-answer .answer-asof time { color: var(--v8-ink-2); font-weight: 500; }

.topic-answer .answer-meta {
  border-top: 1px solid var(--v8-line);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
  margin-top: 14px;
  padding-top: 12px;
}
.topic-answer .answer-meta span {
  color: var(--v8-ink-2);
  display: grid;
  font-size: 14px;
  gap: 2px;
}
.topic-answer .answer-meta dfn {
  color: var(--v8-faint);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.topic-answer .answer-note {
  color: var(--v8-faint);
  font-size: 12px;
  line-height: 1.45;
  margin: 12px 0 0;
  max-width: 46ch;
}

@media (max-width: 640px) {
  .topic-answer { max-width: none; }
}

/* --------------------------------------------------------------------------
   20. /market
   The hero centred a 74px headline over a centred subtitle while every other
   block on the page is left-aligned, and the dark panel left a large dead
   band underneath. Aligned with the homepage masthead instead.
   ----------------------------------------------------------------------- */

.market-hero {
  align-content: center;
  border-radius: var(--v8-r-box);
  display: grid;
  padding: clamp(40px, 6vh, 68px) clamp(28px, 4vw, 56px);
  text-align: left;
}

.market-hero h1 {
  color: #ffffff;
  font-family: var(--v8-serif);
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.02;
  margin: 0;
  max-width: 16ch;
  text-align: left;
}

.market-hero .hint {
  color: var(--v8-on-deep-mut);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.55;
  margin: 1rem 0 0;
  max-width: 52ch;
  text-align: left;
}

.proof-line {
  color: var(--v8-muted);
  font-size: 14.5px;
  line-height: 1.55;
  margin: clamp(20px, 3vh, 30px) 0 0;
  max-width: 78ch;
  text-align: left;
}

@media (max-width: 640px) {
  .market-hero { padding: 32px 20px; }
  .market-hero h1 { font-size: clamp(1.8rem, 8vw, 2.3rem); max-width: none; }
  .market-hero .hint { max-width: none; }
}

/* --------------------------------------------------------------------------
   18. Hero panel rows: name and price collided on phones (2026-08-23)
   The price label carries " · as of <date>" since 2026-08-08, which is wide
   enough that the flex row squeezed the name block to ~39px. The name kept
   `white-space: nowrap`, so it overflowed its own box and painted on top of
   the price. The only figure that matters on this page was unreadable on
   every phone. Below 760px the row becomes a 2-line grid under the logo.
   ----------------------------------------------------------------------- */
@media (max-width: 760px) {
  body.book-home .book-preview .preview-row.company-row {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 2px;
    align-items: center;
  }
  body.book-home .book-preview .preview-row.company-row > .company-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  body.book-home .book-preview .preview-row.company-row > div {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }
  body.book-home .book-preview .preview-row.company-row > .preview-price {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    margin-inline: 0;
    text-align: left;
    white-space: normal;
    font-size: 12px;
    line-height: 1.35;
  }
}