/* pricing.html's stylesheet. It was the page's <style> until the Content-Security-Policy's
   style-src (app/vercel.json) refused inline styles; the rules are unchanged. */
/* Matches the app (2026-09-28 cleanup): the app's own self-hosted faces and
   tokens, same pattern as home.html. No Sora, no Inter, no Google Fonts. */
@font-face{font-family:'Archivo'; font-style:normal; font-weight:600 700; font-stretch:112.5%; font-display:swap;
  src:url('/fonts/archivo-sx-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Archivo'; font-style:normal; font-weight:600 700; font-stretch:112.5%; font-display:swap;
  src:url('/fonts/archivo-sx-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Public Sans'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('/fonts/public-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Public Sans'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('/fonts/public-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/fonts/plex-mono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/fonts/plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/fonts/plex-mono-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/fonts/plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* Tokens read from the app's own dark palette; dark is the default, light an
   override under prefers-color-scheme. One radius, 3px, for everything that
   is not a circle. */
:root{
  color-scheme:dark;
  --paper:#09111B; --paper-2:#101A25; --paper-3:#152030;
  --ink:#E5EEF5; --ink-soft:#A0B2C5; --line:rgba(160,190,225,.12); --line-strong:rgba(160,190,225,.22);
  --blue:#1B8BD0; --blue-text:#70C0EB;
  --amber-text:#E6B84D; --green-text:#8FD8AF; --seg-on-blue:#09111B;
  --font-display:'Archivo', system-ui, sans-serif;
  --font-body:'Public Sans', system-ui, -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --r:3px;
}
@media (prefers-color-scheme: light){
  :root{
    color-scheme:light;
    --paper:#EEF2F6; --paper-2:#FBFCFD; --paper-3:#E7EDF3;
    --ink:#0E213A; --ink-soft:#485A70; --line:rgba(14,33,58,.12); --line-strong:rgba(14,33,58,.22);
    --blue:#007CBC; --blue-text:#00649A;
    --amber-text:#7A5F0A; --green-text:#1E6B45; --seg-on-blue:#FFFFFF;
  }
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--paper); color:var(--ink); font-family:var(--font-body); font-size:15px; line-height:1.55;}
a{color:var(--blue-text); text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{width:min(1120px,100%); margin:0 auto; padding:0 22px;}
.nav{position:sticky; top:0; z-index:20; background:var(--paper); border-bottom:1px solid var(--line);}
.nav-in{display:flex; align-items:center; gap:22px; height:60px;}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink); flex-shrink:0;}
.brand img{width:28px; height:28px;}
.brand b{font-family:var(--font-display); font-weight:700; letter-spacing:.16em; font-size:14px;}
.nav-links{display:flex; gap:18px; margin-left:8px;}
.nav-links a{color:var(--ink-soft); font-size:13.5px;}
.nav-links a:hover{color:var(--ink);}
.nav .cta{margin-left:auto;}
/* The other language (the French or English twin of this page), on every width: a short code
   under 561px, where the nav has no room for the word. */
.nav-links a.nav-lang{color:var(--ink);}
.nav-lang .lang-short{display:none;}
/* Hover changes colour only: no lift, no shadow. */
.btn{display:inline-block; padding:11px 20px; border-radius:var(--r); font-weight:600; font-size:14px; border:1px solid var(--line-strong); color:var(--ink); background:var(--paper-2);}
.btn:hover{background:var(--paper-3);}
.btn.primary{background:var(--blue); border-color:var(--blue); color:var(--seg-on-blue);}
.btn.primary:hover{background:var(--blue-text); border-color:var(--blue-text);}
.btn.small{padding:8px 14px; font-size:13px; white-space:nowrap;}

header.head{padding:64px 0 8px; text-align:center;}
h1{font-family:var(--font-display); font-size:clamp(30px,4.4vw,44px); line-height:1.12; font-weight:700; letter-spacing:-.02em; margin:10px 0 12px;}
.sub{color:var(--ink-soft); max-width:58ch; margin:0 auto;}

section{padding:40px 0 70px;}
.tier{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r); padding:22px; display:flex; flex-direction:column;}
.tier:hover{border-color:var(--line-strong);}
.tier h3{font-family:var(--font-display); font-size:18px; line-height:1.2; font-weight:600; letter-spacing:-.01em;}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.price{font-family:var(--font-display); font-size:28px; font-weight:700; margin:8px 0 2px;}
.price small{font-size:13px; font-weight:400; color:var(--ink-soft);}
/* The yearly price as text a crawler reads (the JSON-LD Offers live on this page); hidden while the toggle shows yearly. */
.tier .yearly{font-size:12.5px; color:var(--ink-soft); margin:0 0 2px;}
section:has(#pay-toggle [data-interval="year"].is-on) .tier .yearly{display:none;}
.tier ul{list-style:none; display:flex; flex-direction:column; gap:7px; flex:1;}
/* Plain disc bullets, soft ink. */
.tier li{font-size:13.5px; color:var(--ink-soft); padding-left:16px; position:relative;}
.tier li::before{content:'\2022'; position:absolute; left:0; color:var(--ink-soft);}


/* THREE PLANS AND THE TRIAL, AS FOUR CARDS (0150). Every price is in the
   markup (data-month / data-year), which is what a reader with no JavaScript
   and every crawler sees; the toggle only swaps which of the two is shown. */
.paytoggle{display:flex; justify-content:center; gap:8px; margin:0 0 18px;}
.paytoggle .save{margin-left:8px; font-size:12.5px; color:var(--green-text);}
.paytoggle .opt.is-on .save{color:inherit;}
.opt{padding:10px 16px; border-radius:var(--r); border:1px solid var(--line-strong); background:var(--paper);
  color:var(--ink); font:inherit; font-size:14px; cursor:pointer; text-align:left;}
.opt:hover{background:var(--paper-3);}
.opt.is-on{border-color:var(--blue); background:var(--paper-3); color:var(--blue-text);}
.plans{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; align-items:stretch;}
/* The Lite plans (0214): a heading and a line over a row of three, a card to each plan above. Declared before
   the two breakpoints below so they still win. */
.lite-head{margin:48px 0 6px; text-align:center; font-family:var(--font-display); font-size:22px; line-height:1.2; font-weight:600; letter-spacing:-.01em;}
.lite-sub{margin:0 auto 18px; text-align:center;}
.lite-plans{grid-template-columns:repeat(3, minmax(0, 1fr));}
.tier.is-pick{border-color:var(--blue);}
.tier .per{display:block; font-family:var(--font-body); font-size:13px; font-weight:400; color:var(--ink-soft);}
.tier .saving{min-height:20px; font-size:13px; color:var(--green-text); margin-bottom:8px;}
.fineprint{margin-top:26px; text-align:center; color:var(--ink-soft); font-size:13px; max-width:66ch; margin-left:auto; margin-right:auto;}

footer{border-top:1px solid var(--line); padding:30px 0 40px;}
.foot{display:flex; gap:20px; flex-wrap:wrap; align-items:center; color:var(--ink-soft); font-size:13px;}
.foot .spacer{margin-left:auto;}

@media (max-width:1000px){ .plans{grid-template-columns:repeat(2, minmax(0, 1fr));} }
@media (max-width:560px){
  .plans{grid-template-columns:1fr;}
  .nav-in{gap:10px;}
  .nav-links{gap:10px; margin-left:0;}
  .nav-links a{font-size:12.5px; white-space:nowrap;}
  .nav .btn.small{padding:7px 12px; font-size:12.5px;}
  .nav-lang .lang-long{display:none;}
  .nav-lang .lang-short{display:inline;}
  .nav .cta{min-width:0;}
  .nav .cta .btn{white-space:normal; text-align:center; line-height:1.2;}
}
/* Narrow phones: under 420px the nav takes the 16px gutter and tighter gaps; under 400px the logo stays
   and its wordmark goes. From 560px down the language link (EN or FR) takes room the button had, so the
   button may shrink and its words wrap onto a second line where they do not fit beside the links (the
   French "Rejoindre la liste d'attente" on most phones, the English one under about 340px); the nav
   never scrolls sideways. */
@media (max-width:419px){
  .nav-in.wrap{padding-left:16px; padding-right:16px; gap:8px;}
  .nav-links{gap:10px;}
  .nav .cta .btn{padding-left:10px; padding-right:10px;}
}
@media (max-width:399px){ .nav .brand b{display:none;} }