:root{
    --bg:#14120D; --bg-top:#191509; --bg-bottom:#100E0A; --bg-glow:#1B170C;
    --surface:#1E1B14; --hairline:rgba(255,255,255,.07);
    --ink1:#F0EDE4; --ink2:#ABA694; --ink3:#7D7869;
    --gold:#E0B84C; --gold-dim:rgba(224,184,76,.14);
    --positive:#5BBE7F; --positive-dim:rgba(91,190,127,.14);
    --negative:#E07856; --negative-dim:rgba(224,120,86,.14);
    --warning:#E0A33E; --warning-dim:rgba(224,163,62,.14);
    --goal:#C9D45E; --goal-dim:rgba(201,212,94,.14);
    --c1:#1D95C9; --c2:#B38C2A; --c3:#8672E8; --c4:#16997B; --c5:#3E86DC; --c6:#C75CA6;
    --serif: ui-serif, "New York", Georgia, serif;
    --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif;
    --gutter: 40px;
    --measure: 1200px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth; scroll-padding-top:96px}
  body{
    margin:0; background:var(--bg); color:var(--ink1);
    font-family:var(--sans); font-size:17px; line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  /* Panorama backdrop: vertical base ramp + horizon + two gold light pools,
     ported from Design/Screenshots/src/*.svg (base 191509 -> 14120D @42% -> 100E0A). */
  .backdrop{position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(120% 46% at 50% 0%, #1F1A0E 0%, rgba(20,18,13,0) 70%),
      linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 42%, var(--bg-bottom) 100%);
  }
  /* the panorama's two gold light pools, carried onto the page */
  .pool{position:absolute; z-index:0; pointer-events:none; width:min(1200px, 96vw); aspect-ratio:1.4/1;
    transform:translate(-50%,-50%);
    background:radial-gradient(closest-side, rgba(224,184,76,.13), rgba(224,184,76,0));
  }
  /* Pool positions were inline styles in the prototype; the CSP forbids those. */
  .pool-a{left:28%; top:16%}
  .pool-b{left:74%; top:72%}
  a{color:inherit}
  h1,h2,h3{font-family:var(--serif); font-weight:600; letter-spacing:-.02em; margin:0}
  p{margin:0}
  .wrap{max-width:var(--measure); margin:0 auto; padding:0 var(--gutter); position:relative; z-index:1}

  .kicker{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold)}
  .microlabel{font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3)}
  .money{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}
  .chip{display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:4px 10px;
    font-size:13px; font-weight:600; line-height:1.35;}
  .chip.gold{color:var(--gold); background:var(--gold-dim)}
  .chip.pos{color:var(--positive); background:var(--positive-dim)}
  .chip.neg{color:var(--negative); background:var(--negative-dim)}
  .chip.warn{color:var(--warning); background:var(--warning-dim)}
  .chip.goal{color:var(--goal); background:var(--goal-dim)}
  .card{background:var(--surface); border:1px solid var(--hairline); border-radius:16px}

  /* ---------- nav ---------- */
  header.nav{position:sticky; top:0; z-index:40; border-bottom:1px solid transparent; transition:background .2s linear, border-color .2s linear}
  header.nav.stuck{background:rgba(20,18,13,.86); backdrop-filter:blur(14px); border-bottom-color:var(--hairline)}
  .nav-in{max-width:var(--measure); margin:0 auto; padding:14px var(--gutter); display:flex; align-items:center; gap:28px}
  .brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--serif); font-size:19px; font-weight:600; letter-spacing:.01em}
  .mark{width:30px; height:30px; flex:none; display:block}
  nav.links{display:flex; gap:24px; margin-left:auto}
  nav.links a{text-decoration:none; color:var(--ink2); font-size:15px; padding:6px 0; border-bottom:1px solid transparent}
  nav.links a:hover{color:var(--ink1)}
  nav.links a.active{color:var(--gold); border-bottom-color:var(--gold)}

  /* ---------- App Store call to action ----------
     Interim treatment. Apple's badge is trademarked artwork that must be used
     as supplied, so this is deliberately NOT a redrawn approximation of it:
     it is a plain Gilt button that reads as ours. When the official SVG lands
     in assets/, swap the <span> for an <img> and drop .badge's own painting.
     The prototype carried a hand-drawn Apple glyph; that is exactly what the
     marketing guidelines forbid, so it is gone. */
  .badge{display:inline-flex; align-items:center; gap:10px; text-decoration:none;
    background:var(--gold); border:1px solid var(--gold); border-radius:10px;
    padding:11px 20px; color:var(--bg); font-weight:600; font-size:16px; letter-spacing:-.01em}
  /* Brightness filter rather than a lighter hex: keeps the stylesheet to the
     Gilt palette exactly, so the color audit stays a simple grep. */
  .badge:hover{filter:brightness(1.08)}
  .badge.sm{padding:7px 14px; font-size:14px}
  /* Apple's App Store badge. Deliberately shares nothing with .badge: their
     guidelines forbid altering the artwork, so no background, no border, no
     brightness filter on hover. height + width:auto renders the native
     2.9916:1 exactly, so the lockup is never stretched; the width/height
     attributes in the markup only reserve layout. 44px clears Apple's 40px
     web minimum. The focus ring sits outside the image and alters nothing. */
  .appstore{display:inline-flex; border-radius:8px}
  .appstore img{display:block; height:44px; width:auto}
  .appstore:focus-visible{outline:2px solid var(--gold); outline-offset:4px}
  .ghostbtn{display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--ink1);
    border:1px solid var(--hairline); border-radius:999px; padding:10px 18px; font-size:15px; background:transparent}
  .ghostbtn:hover{border-color:rgba(224,184,76,.4); color:var(--gold)}

  /* ---------- rail ---------- */
  #railwrap{position:relative}
  #railsvg{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; overflow:visible}
  /* rail anchor points: one per section, positioned as a share of the section box
     so the generated curve follows the alternating media column. */
  .node{position:absolute; width:1px; height:1px; pointer-events:none}
  .hero .node{left:74%; top:82%}
  .chapter .node{left:74%; top:50%}
  .chapter.flip .node{left:26%}
  .privacy .node{left:74%; top:56%}
  .cta .node{left:50%; top:84%}
  .traveler{fill:var(--gold)}

  /* ---------- hero ---------- */
  .hero{padding:72px 0 40px; position:relative}
  .hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
  .hero h1{font-size:76px; line-height:1.02; margin:18px 0 0; max-width:11ch}
  .tagline{font-size:21px; color:var(--ink2); margin-top:18px}
  .hero-cta{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:30px}
  .hero-fine{margin-top:16px; color:var(--ink3); font-size:14px}
  .hero-media{position:relative; display:flex; justify-content:center}

  /* ---------- screenshot tile ---------- */
  /* The capture fills the tile edge to edge at its native 1320:2868, status
     bar included. The gold hairline across the top is the panorama rail's
     echo on each device, kept from the prototype. */
  .shot{position:relative; width:100%; max-width:300px; aspect-ratio:1320/2868; border-radius:30px;
    background:linear-gradient(180deg, var(--surface), var(--bg)); border:1px solid rgba(255,255,255,.12);
    display:flex; align-items:center; justify-content:center; overflow:hidden}
  .shot::before{content:""; position:absolute; z-index:1; top:0; left:12%; right:12%; height:2px;
    background:linear-gradient(90deg, rgba(224,184,76,0), rgba(224,184,76,.7), rgba(224,184,76,0))}
  .shot img{display:block; width:100%; height:100%; object-fit:cover; border-radius:29px}
  .shot.wide{max-width:230px}
  /* Second tile in a pair drops to the row's baseline. Was an inline
     style="align-self:flex-end" in the prototype; the CSP forbids those. */
  .shot.offset{align-self:flex-end}

  /* ---------- trust row ---------- */
  .trust{padding:44px 0 12px}
  .trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline)}
  .trust-cell{padding:22px 24px; border-left:1px solid var(--hairline)}
  .trust-cell:first-child{border-left:0; padding-left:0}
  .trust-cell h4{margin:0 0 4px; font-family:var(--serif); font-size:20px; font-weight:600}
  .trust-cell p{color:var(--ink3); font-size:14px}

  /* ---------- chapters ---------- */
  .chapter{position:relative; padding:96px 0}
  .ch-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
  .chapter.flip .ch-media{order:-1}
  .ch-copy h2{font-size:46px; line-height:1.08; margin:14px 0 0; max-width:14ch}
  .ch-copy p.body{color:var(--ink2); margin-top:18px; max-width:46ch}
  .chiprow{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}
  .ch-media{display:flex; justify-content:center}

  /* ---------- rollover demo ---------- */
  .demo{margin-top:26px; padding:18px; max-width:470px}
  .demo-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--hairline)}
  .demo-head .m{font-family:var(--serif); font-size:17px}
  .demo-tb{text-align:right}
  .demo-tb .v{font-family:var(--serif); font-size:28px; font-variant-numeric:tabular-nums}
  .env{display:grid; grid-template-columns:1fr auto; gap:6px 12px; padding:12px 0; border-bottom:1px solid var(--hairline)}
  .env:last-of-type{border-bottom:0}
  .env .n{font-size:15px}
  .env .a{font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; text-align:right}
  .env .sub{grid-column:1/2; font-size:13px; color:var(--ink3); font-variant-numeric:tabular-nums}
  .env .st{grid-column:2/3; text-align:right}
  .demo-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; flex-wrap:wrap}
  .demo-actions{display:flex; gap:8px}
  .demo-note{font-size:13px; color:var(--ink3); max-width:30ch}
  button.act{font:inherit; font-size:14px; font-weight:600; color:var(--gold); background:var(--gold-dim);
    border:1px solid rgba(224,184,76,.28); border-radius:999px; padding:8px 16px; cursor:pointer}
  button.act:hover{background:rgba(224,184,76,.2)}
  button.act.quiet{color:var(--ink2); background:transparent; border-color:var(--hairline)}

  /* ---------- report legend ---------- */
  .legend{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}
  .lg{display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--ink2);
    border:1px solid var(--hairline); border-radius:999px; padding:5px 12px}
  .dot{width:9px; height:9px; border-radius:50%; flex:none}
  /* Chart slot colors, assigned by rank and never cycled. The fixed order is
     the colorblind-safety mechanism, same as Gilt.chartSeries in the app.
     Class-based because the CSP blocks inline style attributes. */
  .dot.c1{background:var(--c1)}
  .dot.c2{background:var(--c2)}
  .dot.c3{background:var(--c3)}
  .dot.c4{background:var(--c4)}
  .dot.c5{background:var(--c5)}
  .dot.c6{background:var(--c6)}
  .dot.other{background:var(--ink3)}
  .shotrow{display:flex; gap:14px; justify-content:center; width:100%}

  /* ---------- privacy ---------- */
  .privacy{padding:110px 0; position:relative}
  .privacy-in{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
  .privacy h2{font-size:52px; line-height:1.06}
  .privacy p.body{color:var(--ink2); margin-top:20px; max-width:46ch}
  .proof{padding:6px 22px}
  .proof .row{display:flex; align-items:flex-start; gap:14px; padding:18px 0; border-bottom:1px solid var(--hairline)}
  .proof .row:last-child{border-bottom:0}
  .proof .bullet{width:10px; height:10px; border-radius:50%; background:var(--gold); margin-top:8px; flex:none}
  .proof .row b{font-weight:600}
  .proof .row span{color:var(--ink2)}
  .markbig{width:132px; height:132px; display:block; margin:0 auto 26px}

  /* ---------- cta ---------- */
  .cta{padding:96px 0 104px; text-align:center; position:relative}
  .cta h2{font-size:60px; line-height:1.04}
  .cta p{color:var(--ink2); margin-top:18px; font-size:19px}
  .cta-actions{margin-top:30px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap}
  .cta-fine{margin-top:18px; color:var(--ink3); font-size:14px}

  /* ---------- faq ---------- */
  .faq{padding:20px 0 96px}
  .faq h2{font-size:38px; margin-bottom:26px}
  .qa{border-top:1px solid var(--hairline)}
  .qa:last-of-type{border-bottom:1px solid var(--hairline)}
  .qa button{all:unset; display:flex; align-items:center; justify-content:space-between; gap:20px;
    width:100%; padding:20px 0; cursor:pointer; font-size:19px; font-family:var(--serif); font-weight:600}
  .qa button:hover{color:var(--gold)}
  .qa button:focus-visible{outline:2px solid var(--gold); outline-offset:4px}
  .qa .plus{width:18px; height:18px; flex:none; position:relative}
  .qa .plus::before,.qa .plus::after{content:""; position:absolute; background:var(--gold); border-radius:1px}
  .qa .plus::before{left:0; right:0; top:8px; height:2px}
  .qa .plus::after{top:0; bottom:0; left:8px; width:2px; transition:transform .18s ease}
  .qa[data-open="true"] .plus::after{transform:scaleY(0)}
  .qa .ans{max-height:0; overflow:hidden; transition:max-height .22s ease}
  .qa .ans p{color:var(--ink2); padding:0 20% 22px 0; max-width:62ch}

  /* ---------- footer ---------- */
  footer.site{border-top:1px solid var(--hairline); padding:44px 0 60px; position:relative; z-index:1}
  .foot-grid{display:flex; gap:40px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap}
  .foot-links{display:flex; gap:26px; flex-wrap:wrap}
  .foot-links a{color:var(--ink2); text-decoration:none; font-size:15px}
  .foot-links a:hover{color:var(--gold)}
  .credit{margin-top:26px; color:var(--ink3); font-size:13px; max-width:64ch; line-height:1.7}

  /* ---------- reveal ---------- */
  .rv{opacity:0; transition:opacity .5s ease}
  .rv.in{opacity:1}

  /* ---------- document pages (/privacy, /support) ----------
     A reading column rather than the landing page's furniture. Same tokens,
     but the spacing is its own: the landing page never runs more than three
     sentences together, and prose at that density needs looser leading, a
     shorter measure, and a clear size difference between the gap that
     separates sections and the gap that separates paragraphs. */
  .doc{position:relative; z-index:1; padding:72px 0 104px; max-width:68ch}
  .doc .kicker{display:block; margin-bottom:14px}
  .doc h1{font-size:52px; line-height:1.06}
  /* Section gaps are deliberately much larger than the heading-to-body gap
     below them, so a heading reads as belonging to what follows it. */
  .doc h2{font-size:26px; margin:76px 0 0}
  .doc h3{font-size:19px; margin:46px 0 0; color:var(--ink1)}
  .doc h2 + p, .doc h2 + ul, .doc h3 + p{margin-top:16px}
  .doc p{color:var(--ink2); margin-top:22px; line-height:1.75}
  .doc ul{margin:22px 0 0; padding-left:22px; color:var(--ink2)}
  .doc li{margin-top:12px; line-height:1.75; padding-left:4px}
  .doc li::marker{color:var(--gold)}
  .doc strong{color:var(--ink1); font-weight:600}
  .doc a{color:var(--gold); text-decoration:underline; text-underline-offset:3px}
  .doc a:hover{color:var(--ink1)}
  /* Scoped under .doc so they outrank `.doc p`, which would otherwise win on
     specificity and take back the margin and the color. */
  .doc .doc-meta{margin-top:16px; color:var(--ink3); font-size:14px}
  .doc .doc-lead{margin-top:30px; font-size:20px; line-height:1.7; color:var(--ink1)}
  /* Email split across two spans so a naive address scraper misses it.
     Both halves are plain text; the real address lives in the href. */
  .mailto .at::before{content:"@"}
  .doc .doc-back{margin-top:64px; padding-top:28px; border-top:1px solid var(--hairline); font-size:15px}

  @media (max-width:1000px){
    :root{--gutter:24px}
    .hero h1{font-size:56px}
    .hero-grid,.ch-grid,.privacy-in{grid-template-columns:1fr; gap:36px}
    .chapter.flip .ch-media{order:0}
    .trust-grid{grid-template-columns:1fr 1fr}
    .trust-cell{border-left:1px solid var(--hairline); border-top:1px solid var(--hairline); padding-left:24px}
    .trust-cell:nth-child(-n+2){border-top:0}
    .trust-cell:nth-child(odd){border-left:0; padding-left:0}
    .cta h2{font-size:42px}
    .privacy h2{font-size:38px}
    .ch-copy h2{font-size:34px}
    .doc h1{font-size:40px}
    .qa .ans p{padding-right:0}
  }
  @media (max-width:760px){
    body{font-size:16px}
    nav.links{display:none}
    .nav-in{gap:14px}
    .hero{padding:40px 0 24px}
    .hero h1{font-size:44px; max-width:none}
    .chapter{padding:64px 0}
    .privacy,.cta{padding:64px 0}
    .cta h2{font-size:36px}
    .doc{padding:48px 0 72px}
    .doc h1{font-size:34px}
    .doc h2{font-size:23px; margin-top:56px}
    .doc h3{margin-top:36px}
    .doc p, .doc ul{margin-top:18px}
    .doc .doc-lead{font-size:18px}
    /* the rail becomes a straight line down the left gutter */
    #railwrap .wrap{padding-left:54px}
    #railwrap .node{left:20px}
    .shot{max-width:250px}
    .shotrow{flex-direction:column; align-items:center}
  }
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    .rv{opacity:1; transition:none}
    .qa .ans{transition:none}
    .qa .plus::after{transition:none}
  }