/* ============ tokens: light "warm paper" is the base ============ */
:root{
  color-scheme: light;
  --bg:#f7f5f0;
  --surface:#efece5;
  --surface-low:#faf8f4;
  --surface-high:#e8e4db;
  --surface-highest:#ddd8cd;
  --ink:#1c1a17;
  --ink-2:#45423b;
  --ink-3:#6a665d;
  --mint:#6bfb9a;
  --on-mint:#003919;
  --mint-surface:#126f36;
  --on-mint-surface:#dcfce7;
  --amber:#ffc640;
  --on-amber:#402d00;
  --accent-ink:#126f36;
  --amber-ink:#8a5406;
  --line:#c3bdb0;
  --line-2:#cec9bd;
  --track:#ddd8cd;
  --error-ink:#ba1a1a;
  --error-mark:#ba1a1a;
  --shadow:rgba(28,26,23,.16);
  --nav-veil:rgba(247,245,240,.8);
  --show-light:block;
  --show-dark:none;
  --logo-ring:transparent;
}
.launch-only{ display:none !important; }
.android-launch .launch-only{ display:revert !important; }
.android-launch .prelaunch-only{ display:none !important; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#0f1720;
    --surface:#172029;
    --surface-low:#131c25;
    --surface-high:#1e2932;
    --surface-highest:#27333d;
    --ink:#e4e1eb;
    --ink-2:#bfcbd0;
    --ink-3:#93a1ab;
    --mint:#6bfb9a;
    --on-mint:#003919;
    --mint-surface:#143a28;
    --on-mint-surface:#dcfce7;
    --amber:#ffc640;
    --on-amber:#402d00;
    --accent-ink:#6bfb9a;
    --amber-ink:#ffc640;
    --line:#2c3a45;
    --line-2:#3b4a52;
    --track:#5b6e7b;
    --error-ink:#ffb4ab;
    --error-mark:#e5484d;
    --shadow:rgba(0,0,0,.5);
    --nav-veil:rgba(15,23,32,.75);
    --show-light:none;
    --show-dark:block;
    --logo-ring:#ffffff;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0f1720;
  --surface:#172029;
  --surface-low:#131c25;
  --surface-high:#1e2932;
  --surface-highest:#27333d;
  --ink:#e4e1eb;
  --ink-2:#bfcbd0;
  --ink-3:#93a1ab;
  --mint:#6bfb9a;
  --on-mint:#003919;
  --mint-surface:#143a28;
  --on-mint-surface:#dcfce7;
  --amber:#ffc640;
  --on-amber:#402d00;
  --accent-ink:#6bfb9a;
  --amber-ink:#ffc640;
  --line:#2c3a45;
  --line-2:#3b4a52;
  --track:#5b6e7b;
  --error-ink:#ffb4ab;
  --error-mark:#e5484d;
  --shadow:rgba(0,0,0,.5);
  --nav-veil:rgba(15,23,32,.75);
  --show-light:none;
  --show-dark:block;
  --logo-ring:#ffffff;
}

/* ============ base ============ */
*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ margin:0; text-wrap:balance; }
p,ul,ol,blockquote,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--mint); color:var(--on-mint); }
:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:2px; border-radius:4px; }
#main:focus{ outline:none; }

.wrap{ width:min(1120px, 100% - 40px); margin-inline:auto; }
.tnum{ font-variant-numeric:tabular-nums; }
.label-caps{
  font-size:12px; line-height:16px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase;
}

.skip{
  position:absolute; left:16px; top:-48px; z-index:100;
  background:var(--surface-low); color:var(--ink);
  border:1px solid var(--line); border-radius:10px;
  padding:10px 16px; text-decoration:none; font-size:14px; font-weight:500;
}
.skip:focus{ top:12px; }

/* ============ buttons ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-weight:600; font-size:15px; line-height:1;
  padding:13px 22px; border-radius:12px;
  border:1px solid transparent; background:none;
  text-decoration:none; cursor:pointer;
  transition:background-color .25s ease, border-color .25s ease,
             box-shadow .45s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1);
}
.btn-mint{ background:var(--mint); color:var(--on-mint); }
.btn-mint:hover{ box-shadow:0 8px 22px -8px var(--shadow); transform:translateY(-1px); }
.btn-ghost{
  border-color:var(--accent-ink); color:var(--accent-ink);
}
.btn-ghost:hover{ background:var(--surface); background:color-mix(in srgb, var(--accent-ink) 9%, transparent); }
.btn-quiet{
  border-color:var(--line); color:var(--ink-2); font-weight:500; font-size:14px;
  padding:10px 16px;
}
.btn-quiet:hover{ border-color:var(--line-2); color:var(--ink); background:var(--surface); }

/* ============ nav ============ */
.nav{
  position:sticky; top:0; z-index:40;
  border-bottom:1px solid var(--line);
  background:var(--bg);
  background:var(--nav-veil);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
.nav-in{ display:flex; align-items:center; gap:8px; height:64px; }
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:600; font-size:16px; letter-spacing:-.01em;
  color:var(--ink); text-decoration:none; margin-right:auto;
}
.brand svg{ display:block; }
.nav-links{ display:flex; align-items:center; gap:2px; }
.nav-links a{
  position:relative; color:var(--ink-2); text-decoration:none;
  font-size:14.5px; font-weight:500; padding:9px 13px; border-radius:8px;
  transition:color .2s ease;
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a[aria-current="page"]{ color:var(--ink); }
.nav-links a[aria-current="page"]::after{
  content:""; position:absolute; left:13px; right:13px; bottom:1px; height:2px;
  border-radius:1px; background:var(--accent-ink);
}
.btn-nav{ padding:10px 16px; font-size:14px; margin-left:10px; }
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; flex:none;
  border:1px solid var(--line); border-radius:10px;
  background:none; color:var(--ink-2); cursor:pointer; margin-left:8px;
  transition:color .2s ease, border-color .2s ease;
}
.theme-toggle:hover{ color:var(--ink); border-color:var(--line-2); }
.theme-toggle .tt-sun{ display:var(--show-dark); }
.theme-toggle .tt-moon{ display:var(--show-light); }
.lang-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; min-width:36px; padding:0 10px; flex:none;
  border:1px solid var(--line); border-radius:10px;
  background:none; color:var(--ink-2); cursor:pointer; margin-left:8px;
  font-size:13px; font-weight:600; letter-spacing:.04em;
  transition:color .2s ease, border-color .2s ease;
}
.lang-btn:hover{ color:var(--ink); border-color:var(--line-2); }
/* language visibility: without JS (no .lang-fr on root) English shows */
:root:not(.lang-fr) .i18n-fr{ display:none !important; }
.lang-fr .i18n-en{ display:none !important; }
@media (max-width: 430px){
  .brand-name{ display:none; }
  .nav-links a{ padding:9px 7px; font-size:13.5px; }
  .btn-nav{ padding:9px 12px; margin-left:4px; }
  .theme-toggle{ width:32px; height:32px; margin-left:4px; }
  .lang-btn{ height:32px; padding:0 8px; margin-left:4px; }
}

/* ============ sections ============ */
.sec{ padding:76px 0; }
.sec--rule{ border-top:1px solid var(--line); }
.sec-head{ display:flex; flex-direction:column; gap:12px; margin-bottom:44px; max-width:46rem; }
.sec-head .eyebrow{ color:var(--ink-3); }
.sec-head h2{
  font-size:clamp(1.65rem, 1.35rem + 1.2vw, 2rem);
  line-height:1.2; font-weight:700; letter-spacing:-.015em;
}
.sec-head .lede{ color:var(--ink-2); font-size:16.5px; line-height:1.6; }

/* ============ hero ============ */
.hero{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:56px; align-items:center; padding:84px 0 76px;
}
.hero-copy{ display:flex; flex-direction:column; gap:24px; }
.hero h1{
  font-size:clamp(2.375rem, 1.55rem + 3vw, 3rem);
  line-height:1.15; font-weight:700; letter-spacing:-.02em;
}
.hero .sub{ font-size:18px; line-height:28px; color:var(--ink-2); max-width:33rem; }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; }
.hero .fine{ font-size:13.5px; color:var(--ink-3); }
@media (max-width: 940px){
  .hero{ grid-template-columns:1fr; gap:48px; padding:56px 0 56px; }
}

/* ============ the phone (hard-coded dusk, always) ============ */
.phone-wrap{ display:flex; justify-content:center; }
.phone{
  width:300px; max-width:100%;
  background:#05080c; border:1px solid #27333d; border-radius:44px;
  padding:12px;
  box-shadow:0 30px 70px -24px var(--shadow), 0 6px 20px -8px var(--shadow);
}
.phone-shot{ display:block; width:100%; height:auto; border-radius:33px; }
.phone-screen{
  background:#0f1720; border-radius:33px;
  min-height:560px; padding:16px 20px 22px;
  display:flex; flex-direction:column;
}
.phone-cam{
  width:10px; height:10px; border-radius:50%;
  background:#05080c; border:1px solid #1e2932;
  margin:2px auto 14px;
}
.phone-status{
  display:flex; justify-content:space-between;
  color:#93a1ab; font-size:11.5px; font-weight:500;
}
.phone-horizon{ margin:64px auto 22px; display:block; }
.phone-state{ color:#ffc640; text-align:center; }
.phone-line1{
  color:#e4e1eb; font-size:16.5px; line-height:24px; font-weight:500;
  text-align:center; margin-top:14px;
}
.phone-line2{ color:#bfcbd0; font-size:14px; line-height:21px; text-align:center; margin-top:6px; }
.phone-actions{ margin-top:auto; display:flex; flex-direction:column; gap:10px; }
.pbtn-primary{
  background:#6bfb9a; color:#003919;
  border-radius:14px; padding:14px 12px;
  font-weight:600; font-size:14.5px; line-height:1.25; text-align:center;
}
.pbtn-secondary{
  border:1px solid #3b4a52; color:#e4e1eb;
  border-radius:14px; padding:12px;
  font-weight:500; font-size:13.5px; line-height:1.25; text-align:center;
}
.phone-fare{ color:#93a1ab; font-size:12px; text-align:center; margin-top:12px; }

/* ============ how it works ============ */
.steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.step{ border-top:2px solid var(--line-2); padding-top:18px; display:flex; flex-direction:column; gap:8px; }
.step-num{ font-weight:700; font-size:14px; color:var(--accent-ink); font-variant-numeric:tabular-nums; }
.step h3{ font-size:17px; font-weight:600; letter-spacing:-.005em; }
.step p{ font-size:15px; line-height:23px; color:var(--ink-2); }
@media (max-width: 820px){ .steps{ grid-template-columns:1fr; gap:22px; } }

/* ============ the ladder ============ */
.ladder-grid{
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:40px; align-items:stretch;
}
.panel{
  background:var(--surface); border:1px solid var(--line);
  border-radius:20px; padding:28px;
}
.fare-btn{ width:100%; font-size:16px; padding:15px 20px; border-width:1.5px; }
.next-fare{ font-size:13.5px; color:var(--ink-3); margin-top:12px; text-align:center; }
.ledger{ margin-top:22px; border-top:1px solid var(--line-2); }
.ledger ul{ max-height:200px; overflow-y:auto; }
.ledger-row{
  display:flex; justify-content:space-between; gap:16px;
  padding:10px 2px; border-bottom:1px dashed var(--line-2);
  font-size:14.5px; color:var(--ink-2);
}
.ledger-row .amt{ color:var(--ink); font-weight:500; }
.ledger-empty{ font-size:14px; color:var(--ink-3); padding:12px 2px; }
.ledger-total{
  display:flex; justify-content:space-between; align-items:baseline;
  padding-top:16px; font-weight:600; font-size:15px;
}
.ledger-total .amt{ font-size:20px; font-weight:700; }
.ladder-note{ min-height:22px; margin-top:14px; font-size:14px; line-height:22px; }
.note-amber{ color:var(--amber-ink); }
.note-mint{ color:var(--accent-ink); }
.ladder-controls{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.ladder-aside{ display:flex; flex-direction:column; gap:20px; }
.ladder-aside .fare-card{ flex:1; display:flex; flex-direction:column; }
.ladder-aside .fare-doublerule + .dl{ margin-top:auto; }
.ladder-aside .fare-foot{ margin-top:auto; padding-top:12px; }
.gauge-card{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:28px 28px 24px; }
.gauge-fig{ position:relative; width:232px; max-width:100%; }
.gauge-fig svg{ display:block; width:100%; height:auto; }
.gauge-num{
  position:absolute; left:0; right:0; bottom:4px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.gauge-num .big{ font-size:34px; line-height:1.1; font-weight:500; }
.gauge-num .of{ font-size:13.5px; color:var(--ink-3); }
.gauge-caption{ font-size:13.5px; color:var(--ink-3); margin-top:4px; }
.gauge-arc{ stroke-dashoffset:40; }
.fare-facts{ display:flex; flex-direction:column; gap:12px; }
.fare-facts li{ font-size:14.5px; line-height:22px; color:var(--ink-2); padding-left:18px; position:relative; }
.fare-facts li::before{
  content:""; position:absolute; left:2px; top:9px;
  width:8px; height:2px; border-radius:1px; background:var(--accent-ink);
}
.fare-facts .price{ color:var(--amber-ink); font-weight:600; }
.shot-fig{ margin:0; display:flex; flex-direction:column; align-items:center; gap:10px; }
.shot-fig .shot{
  display:block; width:min(250px,100%); height:auto;
  border:1px solid var(--line); border-radius:20px;
  box-shadow:0 12px 28px -14px var(--shadow);
}
.shot-fig .shot-light{ display:var(--show-light); }
.shot-fig .shot-dark{ display:var(--show-dark); }

/* dot leaders + printed fare tables, ported from the timetable concept */
.dl{ display:flex; align-items:baseline; gap:10px; }
.dl-t{ min-width:0; }
.dl-l{ flex:1; min-width:20px; overflow:hidden; white-space:nowrap; color:var(--ink-3); }
.dl-l::after{
  content:"· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·";
  font-size:13px; letter-spacing:.2em;
}
.dl-p{ font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }
.fare-card{
  background:var(--surface-low); border:1px solid var(--line);
  border-radius:16px; padding:26px 26px 18px; width:100%;
}
.fare-head{ text-align:center; }
.fare-head svg{ margin:0 auto; display:block; }
.fare-brand{ margin-top:10px; font-size:13px; line-height:16px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); }
.fare-sub{ margin-top:4px; font-size:11px; line-height:16px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.fare-doublerule{ margin:16px 0 8px; height:4px; border-top:2px solid var(--ink); border-bottom:1px solid var(--ink); }
.fare-card .dl{ font-size:15.5px; line-height:32px; }
.fare-card .dl-t{ font-weight:500; }
.fare-foot{ margin-top:10px; padding-top:10px; border-top:1px solid var(--line); font-size:12.5px; line-height:18px; color:var(--ink-3); text-align:center; }
.fares2{ display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width: 760px){ .fares2{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.tier{ background:var(--surface-low); border:1px solid var(--line); border-radius:16px; padding:26px 26px 20px; }
.tier-name{ font-size:12px; line-height:16px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.tier-name.free{ color:var(--accent-ink); }
.tier-name.plus{ color:var(--amber-ink); }
.tier-price{ font-size:32px; line-height:40px; font-weight:500; margin-top:8px; font-variant-numeric:tabular-nums; }
.tier-per{ font-size:14px; line-height:20px; color:var(--ink-3); font-weight:400; }
.tier-doublerule{ margin:16px 0 8px; height:4px; border-top:2px solid var(--ink); border-bottom:1px solid var(--ink); }
.tier .dl{ font-size:15px; line-height:32px; }
.tier-promise{ margin:2px 0 12px; font-size:15.5px; line-height:23px; font-weight:600; }
.tier-foot{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line); font-size:13px; line-height:20px; color:var(--ink-3); }
.shot-fig figcaption{ font-size:13.5px; color:var(--ink-3); text-align:center; }
.shots-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
@media (max-width: 1020px){ .shots-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; } }
@media (max-width: 620px){ .shots-grid{ grid-template-columns:1fr; } }
@media (max-width: 940px){ .ladder-grid{ grid-template-columns:1fr; } }

/* ============ bento ============ */
.bento{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; }
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:22px; display:flex; flex-direction:column; gap:8px;
  transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s cubic-bezier(.22,1,.36,1);
}
.card:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -10px var(--shadow); }
.card p.card-tag{ font-size:12.5px; font-weight:500; color:var(--accent-ink); }
.card h3{ font-size:16.5px; font-weight:600; letter-spacing:-.005em; }
.card p{ font-size:14.5px; line-height:22px; color:var(--ink-2); }
.card--wide{ background:var(--surface-high); }
.s2{ grid-column:span 2; } .s3{ grid-column:span 3; } .s4{ grid-column:span 4; }
@media (max-width: 950px){
  .bento > *{ grid-column:span 3; }
  .bento .s4{ grid-column:span 6; }
}
@media (max-width: 620px){ .bento > *{ grid-column:span 6; } }

/* ============ privacy band ============ */
.privacy-band{ background:var(--surface); color:var(--ink); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.privacy-band .band-in{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:40px; padding:64px 0; align-items:start;
}
.privacy-band h2{
  font-size:clamp(1.5rem, 1.25rem + 1vw, 1.85rem);
  line-height:1.2; font-weight:700; letter-spacing:-.015em;
}
.privacy-band p{ font-size:16.5px; line-height:27px; }
.privacy-band a{ color:var(--accent-ink); font-weight:600; text-underline-offset:3px; }
.band-link{ margin-top:18px; font-size:15.5px; }
@media (max-width: 820px){ .privacy-band .band-in{ grid-template-columns:1fr; gap:20px; padding:52px 0; } }

/* ============ pricing ============ */
.pricing{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:stretch; }
.price-card{
  border:1px solid var(--line); border-radius:20px; background:var(--surface);
  padding:28px; display:flex; flex-direction:column; gap:14px;
  transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s cubic-bezier(.22,1,.36,1);
}
.price-card:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -10px var(--shadow); }
.price-card.free{ border:1.5px solid var(--accent-ink); background:var(--surface-low); }
.plan-name{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.plan-name h3{ font-size:18px; font-weight:600; }
.plan-tag{ font-size:12.5px; font-weight:600; color:var(--accent-ink); }
.plan-price{ font-size:32px; line-height:40px; font-weight:500; }
.plan-price .per{ font-size:14px; color:var(--ink-3); font-weight:400; }
.plan-list li{
  font-size:14.5px; line-height:22px; color:var(--ink-2); padding:9px 0;
}
.plan-list li + li{ border-top:1px solid var(--line-2); }
.pricing-note{ margin-top:22px; font-size:15.5px; font-weight:500; color:var(--ink); max-width:46rem; }
.pricing-note-2{ margin-top:8px; font-size:14px; color:var(--ink-3); max-width:46rem; }
@media (max-width: 760px){ .pricing{ grid-template-columns:1fr; } }

/* ============ blog previews / index ============ */
.posts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.post-card{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:24px; display:flex; flex-direction:column; gap:10px;
  text-decoration:none; color:inherit;
  transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s cubic-bezier(.22,1,.36,1);
}
.post-card:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -10px var(--shadow); }
.post-card time{ font-size:13px; color:var(--ink-3); }
.post-card h3{ font-size:17px; font-weight:600; line-height:1.35; letter-spacing:-.005em; }
.post-card p{ font-size:14.5px; line-height:22px; color:var(--ink-2); }
.post-card .more{ margin-top:auto; padding-top:8px; font-size:14px; font-weight:500; color:var(--accent-ink); }
@media (max-width: 900px){ .posts{ grid-template-columns:1fr; } }

.page-head{ padding:64px 0 8px; display:flex; flex-direction:column; gap:12px; max-width:46rem; }
.page-head h1{ font-size:clamp(1.9rem, 1.5rem + 1.6vw, 2.5rem); line-height:1.15; font-weight:700; letter-spacing:-.018em; }
.page-head .lede{ color:var(--ink-2); font-size:16.5px; }
.index-list{ padding:32px 0 84px; }
.index-row{
  display:grid; grid-template-columns:140px minmax(0,1fr); gap:28px;
  padding:28px 0; border-top:1px solid var(--line);
  text-decoration:none; color:inherit;
}
.index-row:last-child{ border-bottom:1px solid var(--line); }
.index-row time{ font-size:14px; color:var(--ink-3); padding-top:3px; }
.index-row h2{ font-size:20px; font-weight:600; line-height:1.3; letter-spacing:-.008em; transition:color .2s ease; }
.index-row:hover h2{ color:var(--accent-ink); }
.index-row p{ margin-top:8px; font-size:15px; line-height:23px; color:var(--ink-2); max-width:60ch; }
@media (max-width: 560px){ .index-row{ grid-template-columns:1fr; gap:6px; } }

/* ============ articles / prose ============ */
.article{ padding:64px 0 84px; }
.crumb{ font-size:14px; color:var(--ink-3); display:flex; gap:8px; align-items:center; }
.crumb a{ color:var(--ink-2); text-decoration:none; font-weight:500; }
.crumb a:hover{ color:var(--accent-ink); }
.article h1{
  font-size:clamp(1.9rem, 1.45rem + 1.8vw, 2.55rem);
  line-height:1.15; font-weight:700; letter-spacing:-.018em;
  margin:14px 0 30px; max-width:24ch;
}
.prose{ max-width:65ch; font-variant-numeric:tabular-nums; }
.prose p{ margin:0 0 1.3em; font-size:17px; line-height:1.66; }
.prose h2{ font-size:22px; font-weight:600; letter-spacing:-.008em; margin:1.9em 0 .8em; }
.prose h3{ font-size:18px; font-weight:600; margin:1.7em 0 .7em; }
.prose ul{ list-style:disc; padding-left:1.3em; margin:0 0 1.3em; }
.prose ul li{ margin:.4em 0; font-size:16.5px; line-height:1.6; }
.prose a{ color:var(--accent-ink); text-underline-offset:3px; }
.prose code{
  font-family:Inter,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:.92em; font-weight:500;
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:6px; padding:1px 6px;
}
.prose hr{ border:0; border-top:1px solid var(--line); margin:2.4em 0; }
.prose .endnote{ color:var(--ink-3); font-style:italic; font-size:15.5px; line-height:1.6; }
.board-quote{
  background:var(--surface-low); border:1px solid var(--line); border-radius:16px;
  padding:22px 26px; margin:1.7em 0;
}
.board-quote .board-state{ color:var(--amber-ink); margin-bottom:10px; }
.board-quote p{ margin:0; font-size:16.5px; line-height:1.55; }
.board-quote p + p{ margin-top:2px; color:var(--ink-2); }

/* ============ privacy page ============ */
.governs{
  border:1px solid var(--line); border-left:3px solid var(--amber-ink);
  border-radius:10px; background:var(--surface-low);
  padding:14px 18px; margin:26px 0 6px;
  font-size:14.5px; line-height:22px; color:var(--ink-2); max-width:65ch;
}
.policy-updated{ font-size:14.5px; color:var(--ink-3); }

/* ============ get the app ============ */
.get-card{
  background:var(--surface); border:1px solid var(--line); border-radius:24px;
  max-width:640px; margin-inline:auto; padding:44px 36px;
  display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center;
}
.get-card h2{ font-size:clamp(1.5rem, 1.3rem + 1vw, 1.85rem); font-weight:700; letter-spacing:-.015em; }
.get-card p{ color:var(--ink-2); font-size:16px; line-height:25px; max-width:42ch; }
.get-card .fine{ font-size:13.5px; color:var(--ink-3); }
.notes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:44px; }
.note h3{ font-size:14.5px; font-weight:600; margin-bottom:6px; }
.note p{ font-size:13.5px; line-height:20px; color:var(--ink-3); }
@media (max-width: 760px){ .notes{ grid-template-columns:1fr; gap:18px; } }

/* ============ footer ============ */
.footer{ border-top:1px solid var(--line); padding:40px 0 48px; }
.footer-in{ display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between; }
.footer-brand{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-3); }
.footer-links{ display:flex; flex-wrap:wrap; gap:20px; font-size:14px; }
.footer-links a{ color:var(--ink-2); text-decoration:none; font-weight:500; }
.footer-links a:hover{ color:var(--ink); }
.footer-status{ margin-top:18px; font-size:13.5px; color:var(--ink-3); }

/* ============ motion ============ */
@media (prefers-reduced-motion: no-preference){
  .js .phone{ animation:rise .9s cubic-bezier(.22,1,.36,1) .15s both; }
  @keyframes rise{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:none; } }
  .js .reveal{
    opacity:0; transform:translateY(18px);
    transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  }
  .js .reveal.in{ opacity:1; transform:none; }
  .js .gauge-arc{
    stroke-dashoffset:100;
    transition:stroke-dashoffset 1.2s cubic-bezier(.22,1,.36,1) .15s;
  }
  .js .gauge-fig.seen .gauge-arc{ stroke-dashoffset:40; }
  @keyframes lrow{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
  .js .ledger-row{ animation:lrow .5s cubic-bezier(.22,1,.36,1) both; }
}

[hidden]{ display:none; }

/* ============ generated blog pages ============ */
.article-lede{ max-width:60ch; font-size:19px; line-height:1.55; color:var(--ink-2); margin:-14px 0 30px; }
.prose ol{ list-style:decimal; padding-left:1.4em; margin:0 0 1.3em; }
.prose ol li{ margin:.45em 0; font-size:16.5px; line-height:1.6; }
.prose blockquote{
  margin:1.7em 0; padding:2px 0 2px 20px; border-left:3px solid var(--line);
  color:var(--ink-2); font-size:17px; line-height:1.6;
}
.prose blockquote p{ margin:0; font-size:inherit; }
.prose h2{ scroll-margin-top:80px; }
.prose h3{ scroll-margin-top:80px; }
.prose strong{ font-weight:600; }
.table-scroll{ overflow-x:auto; margin:1.7em 0; }
.prose table{ border-collapse:collapse; width:100%; min-width:34rem; font-size:15.5px; }
.prose th,.prose td{ text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
.prose th{ font-weight:600; border-bottom:2px solid var(--line-2); white-space:nowrap; }
.prose tbody tr:last-child td{ border-bottom:0; }
.toc{
  max-width:65ch; margin:0 0 34px; padding:18px 22px;
  background:var(--surface-low); border:1px solid var(--line); border-radius:14px;
}
.toc .label-caps{ color:var(--ink-3); margin-bottom:8px; }
.toc ul{ display:flex; flex-direction:column; gap:6px; }
.toc a{ color:var(--ink-2); text-decoration:none; font-size:15px; line-height:1.45; }
.toc a:hover{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px; }
.faq{ max-width:65ch; margin:52px 0 0; padding-top:36px; border-top:1px solid var(--line); }
.faq h2{ font-size:22px; font-weight:600; letter-spacing:-.008em; margin-bottom:8px; }
.faq-item{ padding:18px 0; border-bottom:1px solid var(--line-2); }
.faq-item:last-child{ border-bottom:0; }
.faq-item h3{ font-size:17px; font-weight:600; margin-bottom:7px; }
.faq-item p{ font-size:16px; line-height:1.6; color:var(--ink-2); max-width:60ch; }
.cta{
  max-width:65ch; margin:56px 0 0; padding:28px 30px;
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
}
.cta .label-caps{ color:var(--ink-3); }
.cta h2{ font-size:20px; font-weight:600; line-height:1.35; letter-spacing:-.008em; margin:10px 0 12px; }
.cta p{ font-size:16px; line-height:1.6; color:var(--ink-2); margin:0; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:20px !important; }
.cta-status{ font-size:13.5px; color:var(--ink-3); }
.related{ max-width:min(1120px,100%); margin:64px 0 0; padding-top:32px; border-top:1px solid var(--line); }
.related .label-caps{ color:var(--ink-3); margin-bottom:18px; }
.related .posts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.nav .lang-btn{ text-decoration:none; display:inline-flex; align-items:center; }
.notfound{ padding:120px 0 140px; max-width:46rem; }
.notfound h1{ font-size:clamp(1.9rem,1.5rem + 1.6vw,2.5rem); line-height:1.15; font-weight:700; letter-spacing:-.018em; margin-bottom:14px; }
.notfound p{ color:var(--ink-2); font-size:17px; line-height:1.6; margin-bottom:24px; }
@media (max-width:560px){
  .cta{ padding:22px 20px; }
  .toc{ padding:16px 18px; }
}

/* ---- mobile overflow fix ----
   The dot-leader rows (.dl) carry a very long nowrap string in ::after. As
   grid/flex items their automatic minimum size is that string's width, so the
   pricing tiers and the ladder panel forced the page ~1200px wide on a phone
   and the whole document scrolled sideways. Grid and flex children here are
   allowed to shrink instead; the leader is clipped by its own overflow:hidden,
   which is what it was always for. Mobile-first indexing makes this a ranking
   issue, not only a comfort one. */
.fares2 > *, .tier, .dl, .ladder-grid > *, .panel, .ledger ul{ min-width:0; }
.dl-l{ flex:1 1 20px; min-width:20px; }

/* ---- narrow nav ----
   "Get the app" wrapped onto three lines on a phone, which stretched the bar
   and left the button filling it edge to edge. The label never wraps now, and
   below 620px the two links the nav can afford to lose go: Home, because the
   logo beside it already goes there, and Privacy, which is in the footer of
   every page. French labels run longer than the English ones -- and
   "Confidentialite" is the longest thing in the bar -- so both languages have
   to be measured, not just the one we happen to be reading in. The French
   bar needs the compact treatment up to 565px; the breakpoint sits at 620 so
   it is not resting on the measurement. */
.btn-nav{ white-space:nowrap; }
@media (max-width: 700px){
  .nav .brand-name{ display:none; }
}
@media (max-width: 620px){
  .nav-in{ gap:6px; }
  .nav-links a:first-child, .nav-links a:nth-child(3){ display:none; }
  .nav-links a{ padding:8px 8px; font-size:14px; }
  .btn-nav{ padding:9px 12px; font-size:13.5px; margin-left:2px; }
  .lang-btn{ padding:0 9px; margin-left:0; }
  .theme-toggle{ margin-left:0; }
}
@media (max-width: 380px){
  .nav-in{ gap:4px; }
  .nav-links a{ padding:8px 6px; }
  .btn-nav{ padding:9px 10px; margin-left:0; }
  .lang-btn{ padding:0 7px; }
}