:root{color-scheme:light}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found]){display:none!important}

  :root{
    --bg:#0a1f3a;
    --bg-2:#0d2445;
    --surface:#0f2b52;
    --surface-2:#153a6b;
    --accent:#2e6fb0;
    --accent-2:#5fa3d9;
    --gold:#cda247;
    --gold-2:#e8c876;
    --ink:#eef3fa;
    --ink-muted:#a6bcda;
    --ink-faint:#7690b5;
    --line:rgba(150,185,225,0.16);
    --cream:#f4ecd8;
    --serif:'Alegreya', 'PT Serif', Georgia, serif;
    --sans:'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    --mono:'IBM Plex Mono', 'Consolas', monospace;
  }

  *{box-sizing:border-box;}
  html{background:var(--bg);}
  body{
    margin:0;
    font-family:var(--sans);
    background:
      radial-gradient(1100px 640px at 12% -8%, rgba(46,111,176,0.30), transparent 60%),
      radial-gradient(900px 560px at 108% 6%, rgba(205,162,71,0.10), transparent 55%),
      radial-gradient(1000px 700px at 50% 115%, rgba(46,111,176,0.16), transparent 60%),
      linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 45%, var(--bg) 100%);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    position:relative;
  }

  /* ---------- ambient backdrop glow: a slow, barely-there drift so the
     page feels alive without ever competing with the content ---------- */
  .ambient-glow{
    position:fixed; inset:-20%; pointer-events:none; z-index:-1;
    background:
      radial-gradient(640px 640px at 26% 20%, rgba(205,162,71,0.10), transparent 60%),
      radial-gradient(560px 560px at 78% 66%, rgba(46,111,176,0.12), transparent 60%);
  }
  @media (prefers-reduced-motion: no-preference){
    .ambient-glow{ animation: driftGlow 46s ease-in-out infinite alternate; }
    @keyframes driftGlow{
      0%{ transform:translate(0,0) scale(1); }
      100%{ transform:translate(3%,4%) scale(1.04); }
    }
    .fade-up{ animation: fadeUp .9s cubic-bezier(.2,.7,.3,1) both; }
    .fade-up.d1{ animation-delay:.08s; }
    .fade-up.d2{ animation-delay:.18s; }
    .fade-up.d3{ animation-delay:.28s; }
    @keyframes fadeUp{
      from{ opacity:0; transform:translateY(14px); }
      to{ opacity:1; transform:translateY(0); }
    }
  }

  h1,h2,h3{ font-family:var(--serif); font-weight:700; margin:0; text-wrap:balance; }
  p{ margin:0; }
  figure{ margin:0; }

  .shell{ position:relative; max-width:1040px; margin:0 auto; padding:0 28px; }

  /* ---------- ledger rail: a running vertical thread down the page, an
     accounting-margin device that ties each section together as one
     continuous "account" ---------- */
  .ledger-rail{
    position:absolute; left:28px; top:0; bottom:0; width:1px;
    background:linear-gradient(180deg, transparent 0%, var(--line) 6%, var(--line) 94%, transparent 100%);
    display:none;
  }
  @media (min-width:900px){
    .ledger-rail{ display:block; left:calc(50% - 520px + 12px); }
  }
  /* running balance: the rail fills gold as you read down the page,
     like a ledger total being tallied */
  .ledger-rail-fill{
    position:absolute; top:0; left:0; width:100%; height:0%;
    background:linear-gradient(180deg, var(--gold), var(--gold-2));
    box-shadow:0 0 8px 1px rgba(205,162,71,0.45);
  }
  .ledger-rail-marker{
    position:absolute; left:50%; top:0%; transform:translate(-50%,-50%);
    width:9px; height:9px; border-radius:50%; background:var(--gold-2);
    box-shadow:0 0 0 5px rgba(232,200,118,0.16), 0 0 14px 2px rgba(232,200,118,0.6);
  }
  .entry-mark{
    position:relative;
  }
  .entry-mark::before{
    content:'';
    position:absolute; left:-16px; top:8px;
    width:9px; height:9px; border-radius:50%;
    background:var(--gold); box-shadow:0 0 0 4px rgba(205,162,71,0.16);
  }
  @media (max-width:899px){ .entry-mark::before{ display:none; } }

  /* ---------- per-section watermark: a faint line-art glyph naming the
     block's subject, low enough to read as texture, not content ---------- */
  .block-watermark{
    position:absolute; top:4px; right:-8px; width:168px; height:168px;
    color:var(--gold); opacity:0.055; pointer-events:none; z-index:0;
  }
  .block-watermark svg{ width:100%; height:100%; display:block; }
  @media (max-width:899px){ .block-watermark{ display:none; } }
  .block-head, section.block figure.diagram, section.block .stat-row,
  section.block .feat-grid, section.block .ledger{ position:relative; z-index:1; }

  /* ---------- hero ---------- */
  .hero{ padding:88px 0 56px; text-align:center; }
  .logo-halo{ position:relative; width:112px; margin:0 auto 30px; }
  .logo-halo::before{
    content:''; position:absolute; inset:-34px; border-radius:50%;
    background:radial-gradient(circle, rgba(205,162,71,0.38), rgba(46,111,176,0.14) 55%, transparent 72%);
    filter:blur(20px); z-index:-1;
  }
  .logo-mark{
    width:112px; height:112px; object-fit:cover; display:block; margin:0;
    border-radius:26px; transition:transform .5s cubic-bezier(.2,.7,.3,1);
    box-shadow:0 18px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(205,162,71,0.35), 0 0 46px -6px rgba(46,111,176,0.55);
  }
  .logo-mark:hover{ transform:scale(1.045) rotate(-1deg); }
  .eyebrow{
    display:inline-flex; align-items:center; gap:9px;
    font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--gold-2); font-weight:500;
    padding:8px 16px; border-radius:999px;
    border:1px solid rgba(205,162,71,0.35); background:rgba(205,162,71,0.07);
    margin-bottom:28px;
  }
  .eyebrow .dot{ width:5px; height:5px; border-radius:50%; background:var(--gold-2); box-shadow:0 0 8px 2px rgba(232,200,118,0.65); }

  h1.headline{
    font-size:clamp(34px, 5.4vw, 58px);
    line-height:1.08;
    letter-spacing:-0.01em;
    max-width:760px; margin:0 auto 22px;
    background:linear-gradient(180deg, #ffffff 0%, var(--ink) 55%, var(--accent-2) 150%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  h1.headline em{
    font-style:italic;
    background:linear-gradient(90deg, var(--gold-2), var(--gold));
    -webkit-background-clip:text; background-clip:text; color:transparent;
    filter:drop-shadow(0 0 22px rgba(232,200,118,0.35));
  }
  p.lede{
    max-width:600px; margin:0 auto; font-size:17px; line-height:1.7; color:var(--ink-muted);
  }
  p.lede strong{ color:var(--ink); font-weight:600; }
  p.salutation{
    font-family:var(--serif); font-style:italic; color:var(--gold-2);
    font-size:clamp(26px, 3.6vw, 34px); margin-bottom:20px; letter-spacing:.01em;
  }
  .ornament{ display:flex; justify-content:center; margin:0 0 26px; }
  .ornament svg{ display:block; }

  /* ---------- timeline ---------- */
  .timeline-wrap{ margin:56px auto 0; max-width:760px; }
  .timeline-svg{ width:100%; height:auto; display:block; }
  .timeline-caption{
    text-align:center; margin-top:14px; font-size:13px; color:var(--ink-faint);
    font-family:var(--mono); letter-spacing:.02em;
  }

  /* ---------- sections ---------- */
  section.block{ padding:64px 0; border-top:1px solid var(--line); }
  section.block:first-of-type{ border-top:none; }

  .block-head{ max-width:600px; margin-bottom:36px; }
  .kicker{
    font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--accent-2); font-weight:500; margin-bottom:12px; display:block;
  }
  h2.block-title{ font-size:clamp(24px, 3.2vw, 32px); color:var(--ink); margin-bottom:14px; }
  p.block-lede{ font-size:15.5px; line-height:1.75; color:var(--ink-muted); max-width:640px; }
  p.block-lede + p.block-lede{ margin-top:12px; }
  p.block-lede strong{ color:var(--ink); font-weight:600; }

  figure.diagram{
    margin-top:8px; padding:28px 8px 8px;
    overflow-x:auto;
  }
  figure.diagram svg{ display:block; margin:0 auto; max-width:100%; height:auto; }
  figcaption.diagram-caption{
    text-align:center; font-size:12.5px; color:var(--ink-faint); margin-top:14px;
    font-family:var(--mono);
  }

  .diag-text{ font-family:var(--sans); }
  .diag-label{ font-size:12.5px; font-weight:600; }
  .diag-sub{ font-size:10.5px; }
  .diag-mono{ font-family:var(--mono); font-size:11px; }

  /* stat tiles */
  .stat-row{ display:flex; flex-wrap:wrap; gap:16px; margin-top:28px; }
  .stat-tile{
    flex:1 1 180px;
    background:linear-gradient(160deg, var(--surface), var(--surface-2));
    border:1px solid var(--line); border-radius:14px;
    padding:22px 22px 20px;
    transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  .stat-tile:hover{
    transform:translateY(-3px);
    border-color:rgba(205,162,71,0.4);
    box-shadow:0 16px 32px -14px rgba(0,0,0,0.55), 0 0 0 1px rgba(205,162,71,0.12);
  }
  .stat-tile .num{
    font-family:var(--mono); font-variant-numeric:tabular-nums;
    font-size:30px; font-weight:600; color:var(--gold-2); display:block; margin-bottom:6px;
  }
  .stat-tile .label{ font-size:13px; color:var(--ink-muted); line-height:1.5; }

  /* feature grid (reports section) */
  .feat-grid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px;
    overflow:hidden; margin-top:28px;
  }
  .feat-cell{
    background:var(--surface); padding:22px 22px;
    transition:background .25s ease;
  }
  .feat-cell:hover{ background:var(--surface-2); }
  .feat-cell .feat-title{
    font-family:var(--serif); font-weight:700; font-size:16.5px; color:var(--ink); margin-bottom:8px;
  }
  .feat-cell .feat-desc{ font-size:13.5px; line-height:1.6; color:var(--ink-muted); }

  /* pricing ledger */
  .ledger{
    margin-top:30px; border:1px solid var(--line); border-radius:14px; overflow:hidden;
    background:var(--surface);
  }
  .ledger-row{
    display:grid; grid-template-columns:1fr auto; gap:20px;
    padding:20px 24px; border-bottom:1px solid var(--line); align-items:baseline;
    transition:background .2s ease;
  }
  .ledger-row:last-child{ border-bottom:none; }
  .ledger-row.head{ background:var(--surface-2); }
  .ledger-row:not(.head):hover{ background:rgba(255,255,255,0.025); }
  .ledger-row .item-name{ font-size:14.5px; color:var(--ink); font-weight:500; }
  .ledger-row .item-note{ font-size:12.5px; color:var(--ink-faint); margin-top:4px; }
  .ledger-row .item-value{
    font-family:var(--mono); font-size:14px; color:var(--gold-2); white-space:nowrap;
    font-variant-numeric:tabular-nums;
  }
  .ledger-row.head .item-name, .ledger-row.head .item-value{
    font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--ink-faint); font-weight:500;
  }
  .badge-optional{
    display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px;
    font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
    background:rgba(205,162,71,0.14); color:var(--gold-2); border:1px solid rgba(205,162,71,0.3);
  }

  /* closing */
  .closing{ padding:72px 0 96px; text-align:center; }
  .closing .sign{
    font-family:var(--serif); font-style:italic; font-size:20px; color:var(--ink);
    margin-bottom:6px;
  }
  .closing .date{
    font-family:var(--mono); font-size:12.5px; color:var(--ink-faint); letter-spacing:.04em;
  }
  .closing .rule{
    width:64px; height:2px; background:var(--gold); margin:26px auto 26px; border-radius:2px;
  }

  @media (max-width:640px){
    .shell{ padding:0 20px; }
    section.block{ padding:48px 0; }
    .hero{ padding:64px 0 40px; }
  }

  /* ---------- linen grain: a faint paper texture over the whole page,
     so the surface reads as stock, not screen-flat gradient ---------- */
  .grain-overlay{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    opacity:.05; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:220px 220px;
  }

  /* ---------- letterhead frame: the hero reads as stationery — a
     bordered card with cut-corner ticks, like a printed form ---------- */
  .letterhead{
    position:relative; margin:0 auto; padding:48px 36px 40px;
    border:1px solid rgba(205,162,71,0.3); border-radius:4px;
    background:linear-gradient(180deg, rgba(205,162,71,0.05), transparent 40%);
  }
  .letterhead::before, .letterhead::after,
  .letterhead .lh-corner-bl, .letterhead .lh-corner-br{
    content:''; position:absolute; width:22px; height:22px;
    border-color:var(--gold); border-style:solid; opacity:.75;
  }
  .letterhead::before{ top:-1px; left:-1px; border-width:2px 0 0 2px; }
  .letterhead::after{ top:-1px; right:-1px; border-width:2px 2px 0 0; }
  .letterhead .lh-corner-bl{ bottom:-1px; left:-1px; border-width:0 0 2px 2px; }
  .letterhead .lh-corner-br{ bottom:-1px; right:-1px; border-width:0 2px 2px 0; }
  @media (max-width:640px){ .letterhead{ padding:36px 20px 30px; } }

  /* ---------- section numeral: a classic ledger-book chapter mark,
     same device as the ledger rail running down the page ---------- */
  .block-head{ display:flex; gap:18px; align-items:flex-start; }
  .entry-no{
    flex:0 0 auto; font-family:var(--serif); font-style:italic; font-weight:700;
    font-size:16px; line-height:1; color:var(--gold-2);
    border:1px solid rgba(205,162,71,0.45); border-radius:7px;
    padding:7px 11px; margin-top:1px; min-width:16px; text-align:center;
    background:rgba(205,162,71,0.07);
  }
  @media (max-width:520px){ .entry-no{ font-size:14px; padding:5px 8px; } }

  /* ---------- "you are here" pulse on the timeline's current node ---------- */
  .pulse-ring{ transform-origin:70px 46px; }
  @media (prefers-reduced-motion: no-preference){
    .pulse-ring{ animation: pulseRing 2.6s ease-out infinite; }
    @keyframes pulseRing{
      0%{ opacity:.55; transform:scale(0.3); }
      70%{ opacity:0; transform:scale(2.6); }
      100%{ opacity:0; transform:scale(2.6); }
    }
  }

  /* ---------- feature icons ---------- */
  .feat-cell{ display:flex; flex-direction:column; gap:10px; }
  .feat-icon{ width:26px; height:26px; color:var(--gold-2); opacity:.9; }
  .feat-icon svg{ width:100%; height:100%; display:block; }

  /* ---------- closing seal: a stamped monogram, as an official
     accounting letter would carry a company seal ---------- */
  .seal{ width:92px; height:92px; margin:0 auto 22px; color:var(--gold-2); opacity:.92; }
  .seal svg{ width:100%; height:100%; display:block; }
  .seal-ring-text{ font-family:var(--mono); font-size:6.6px; letter-spacing:.14em; fill:var(--gold-2); }

  @media print{
    @page{ size:A4; margin:14mm 12mm; }
    html, body{ background:var(--bg) !important; }
    *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; color-adjust:exact !important; }
    .grain-overlay, .ambient-glow{ display:none !important; }
    .ledger-rail{ display:none !important; }
    .fade-up{ animation:none !important; opacity:1 !important; transform:none !important; }
    .pulse-ring{ animation:none !important; opacity:0 !important; }
    section.block, .stat-tile, .feat-cell, .ledger-row, .letterhead, footer.closing, figure.diagram{
      break-inside:avoid;
    }
    section.block{ padding:34px 0; }
  }

.fsd-return-link { position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 28px;background:rgba(10,31,58,0.92);color:#f4ecd8;text-decoration:none;font:500 13px/1.3 'IBM Plex Sans',system-ui,sans-serif;border-bottom:1px solid rgba(205,162,71,0.28); }
.fsd-return-label { color:#e8c876;letter-spacing:.12em;text-transform:uppercase;font-size:11px; }
figure.fsd-small-gap { margin-top:12px; }
p.block-lede.fsd-large-gap, p.block-lede + p.fsd-large-gap { margin-top:20px; }
.fsd-diagram-title { font-family:var(--serif);font-weight:700;font-size:17px;fill:currentColor }
