/* Shared by the landing, register and purchase pages. Tokens mirror
   frontend/src/index.css :root — DESIGN.md's stark-white canvas, hairline
   separation, one deep-blue accent, black-pill primary action. */
/* Tokens mirror frontend/src/index.css :root — DESIGN.md's stark-white
     canvas, hairline separation, one deep-blue accent. Complete light palette
     on bare :root so the un-stamped (system) state always resolves. */
  :root {
    --paper:#ffffff; --surface:#f7f8fa; --ink:#0a0a0a; --slate:#45515e;
    --steel:#5f5f5f; --stone:#6e727a; --hairline:#e5e7eb; --hairline-2:#eaecf0;
    --accent:#1d4ed8; --accent-ink:#1d4ed8; --accent-wash:#eff4ff;
    --ok:#0f7b4f; --ok-wash:#eaf6f0; --measure:34rem;
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --paper:#0d0f13; --surface:#14171d; --ink:#f0f2f5; --slate:#b3bcc8;
      --steel:#9aa3b0; --stone:#8b93a1; --hairline:#242932; --hairline-2:#1d222a;
      --accent:#6f9dff; --accent-ink:#8fb4ff; --accent-wash:#141c2b;
      --ok:#4ade9a; --ok-wash:#10241a;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --paper:#0d0f13; --surface:#14171d; --ink:#f0f2f5; --slate:#b3bcc8;
    --steel:#9aa3b0; --stone:#8b93a1; --hairline:#242932; --hairline-2:#1d222a;
    --accent:#6f9dff; --accent-ink:#8fb4ff; --accent-wash:#141c2b;
    --ok:#4ade9a; --ok-wash:#10241a;
    color-scheme: dark;
  }

  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%}

  .label{
    font-family:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:.6875rem; font-weight:500; letter-spacing:.15em;
    text-transform:uppercase; color:var(--stone);
  }

  /* ── Top bar ─────────────────────────────────────────────────────────── */
  .topbar{
    border-bottom:1px solid var(--hairline);
    position:sticky; top:0; background:var(--paper); z-index:20;
  }
  .topbar .inner{
    max-width:62rem; margin:0 auto; padding:.9rem clamp(1.25rem,4vw,2.5rem);
    display:flex; align-items:center; gap:1rem; justify-content:space-between;
  }
  /* The logo swaps with the palette using the SAME three-block pattern as the
     tokens above: bare :root is the light case, the media query is guarded so
     an explicit light choice still wins, and [data-theme="dark"] wins both
     ways. A <picture> with a media source would download one file instead of
     two, but it follows prefers-color-scheme ONLY — it would show the wrong
     mark the day this site gains a theme toggle. 13 KB is the cheaper risk. */
  .wordmark{display:inline-flex; align-items:center; line-height:0}
  .wordmark .logo{height:42px; width:auto; display:block}
  .wordmark .logo-dark{display:none}
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .wordmark .logo-light{display:none}
    :root:not([data-theme="light"]) .wordmark .logo-dark{display:block}
  }
  :root[data-theme="dark"] .wordmark .logo-light{display:none}
  :root[data-theme="dark"] .wordmark .logo-dark{display:block}
  .topbar nav{display:flex; align-items:center; gap:.4rem}

  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:9999px; border:1px solid var(--hairline);
    background:var(--paper); color:var(--ink);
    padding:.5rem 1.05rem; font:inherit; font-size:.875rem; font-weight:500;
    text-decoration:none; cursor:pointer; white-space:nowrap;
    transition:background .15s ease,border-color .15s ease;
  }
  .btn:hover{background:var(--surface)}
  /* DESIGN.md: primary action is a black pill on every tenant, never brand. */
  .btn-primary{background:var(--ink); border-color:var(--ink); color:var(--paper)}
  .btn-primary:hover{background:var(--ink); opacity:.86}
  .btn-lg{padding:.75rem 1.5rem; font-size:.9375rem}
  .btn:disabled{opacity:.55; cursor:not-allowed}

  main{max-width:62rem; margin:0 auto; padding:0 clamp(1.25rem,4vw,2.5rem)}
  section{padding:clamp(3rem,7vw,4.75rem) 0; border-bottom:1px solid var(--hairline-2)}
  section:last-of-type{border-bottom:0}

  /* ── Hero ────────────────────────────────────────────────────────────── */
  .hero{padding-top:clamp(2.75rem,6vw,4.25rem); display:flex; flex-direction:column; gap:1.5rem}
  h1{
    margin:0; font-size:clamp(2.2rem,6vw,3.5rem); font-weight:600;
    letter-spacing:-.035em; line-height:1.05; text-wrap:balance; max-width:19ch;
  }
  h1 .quiet{color:var(--stone)}
  .standfirst{
    margin:0; max-width:var(--measure); color:var(--slate);
    font-size:clamp(1.0625rem,2.2vw,1.3125rem); line-height:1.5;
    letter-spacing:-.011em; text-wrap:pretty;
  }
  .hero-actions{display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; margin-top:.35rem}
  .hero-note{color:var(--stone); font-size:.875rem}

  /* ── Section headings ────────────────────────────────────────────────── */
  h2{
    margin:0 0 1.25rem; font-size:clamp(1.5rem,3.2vw,2rem); font-weight:600;
    letter-spacing:-.026em; line-height:1.15; text-wrap:balance;
  }
  .lede{margin:0 0 2rem; max-width:var(--measure); color:var(--slate); text-wrap:pretty}

  /* ── How it works: a real sequence, so numbering earns its place ─────── */
  .steps{display:grid; gap:0; grid-template-columns:1fr}
  @media (min-width:48rem){.steps{grid-template-columns:1fr 1fr; gap:0 3rem}}
  .step{
    padding:1.4rem 0; border-top:1px solid var(--hairline);
    display:flex; flex-direction:column; gap:.4rem;
  }
  .step .n{
    font-family:"DM Mono",ui-monospace,monospace; font-size:.6875rem;
    color:var(--accent-ink); font-weight:500; letter-spacing:.12em;
    text-transform:uppercase;
  }
  .step h3{margin:0; font-size:1rem; font-weight:600; letter-spacing:-.012em}
  .step p{margin:0; font-size:.9375rem; color:var(--slate); line-height:1.55; text-wrap:pretty}

  /* ── The boundary: what we do / never do ─────────────────────────────── */
  .ledger{display:grid; grid-template-columns:1fr; gap:1.75rem}
  @media (min-width:46rem){
    .ledger{grid-template-columns:1fr 1fr; gap:0}
    .ledger .col+.col{border-left:1px solid var(--accent); padding-left:2.25rem}
    .ledger .col:first-child{padding-right:2.25rem}
  }
  .col{display:flex; flex-direction:column; gap:.9rem}
  .col h3{margin:0; font-size:1rem; font-weight:600; letter-spacing:-.012em}
  .col ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.65rem}
  .col li{position:relative; padding-left:1.15rem; font-size:.9375rem; line-height:1.5; text-wrap:pretty}
  .col li::before{
    position:absolute; left:0; top:0; font-family:"DM Mono",ui-monospace,monospace;
    font-size:.8125rem; line-height:1.72;
  }
  .col--does li::before{content:"+"; color:var(--accent-ink)}
  .col--never li::before{content:"\2013"; color:var(--stone)}
  .col--never li{color:var(--slate)}

  /* ── Pricing ─────────────────────────────────────────────────────────── */
  .plans{display:grid; grid-template-columns:1fr; gap:1rem}
  @media (min-width:52rem){.plans{grid-template-columns:repeat(3,1fr)}}
  .plan{
    border:1px solid var(--hairline); border-radius:16px; padding:1.5rem;
    display:flex; flex-direction:column; gap:1rem; background:var(--paper);
  }
  /* Only the recommended plan is lifted — border/fill spent by role, not stamped. */
  .plan--featured{border-color:var(--accent); background:var(--accent-wash)}
  .plan-head{display:flex; flex-direction:column; gap:.3rem}
  .plan-name{font-weight:600; font-size:1.0625rem; letter-spacing:-.014em}
  .price{display:flex; align-items:baseline; gap:.3rem; font-variant-numeric:tabular-nums}
  .price .amt{font-size:2.1rem; font-weight:600; letter-spacing:-.035em; line-height:1}
  .price .per{font-size:.8125rem; color:var(--stone)}
  .plan-margin{
    font-size:.8125rem; color:var(--slate); border-top:1px solid var(--hairline-2);
    padding-top:.75rem;
  }
  .plan-margin b{color:var(--ink); font-weight:600}
  .plan ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.5rem; flex:1}
  .plan li{position:relative; padding-left:1.15rem; font-size:.875rem; line-height:1.45; color:var(--slate)}
  .plan li::before{
    content:"+"; position:absolute; left:0; top:0; color:var(--accent-ink);
    font-family:"DM Mono",ui-monospace,monospace; font-size:.8125rem; line-height:1.6;
  }
  .plan .inherits{color:var(--stone); font-style:normal}
  .badge{
    align-self:flex-start; border-radius:9999px; padding:.15rem .6rem;
    font-size:.6875rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
    background:var(--accent); color:#fff;
  }
  .pricing-note{margin:1.5rem 0 0; font-size:.875rem; color:var(--stone); max-width:44rem; text-wrap:pretty}

  .included{
    margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--hairline);
    display:flex; flex-direction:column; gap:.75rem;
  }
  @media (min-width:52rem){.plans{grid-template-columns:repeat(4,1fr)}}

  /* ── Sign-up form ────────────────────────────────────────────────────── */
  .signup-grid{display:grid; grid-template-columns:1fr; gap:2rem}
  @media (min-width:52rem){.signup-grid{grid-template-columns:1fr 1fr; gap:3rem}}
  form{display:flex; flex-direction:column; gap:.9rem}
  .field{display:flex; flex-direction:column; gap:.3rem}
  .field label{font-size:.8125rem; font-weight:500; color:var(--slate)}
  .req{color:var(--accent-ink)}
  input,select{
    font:inherit; font-size:.9375rem; padding:.6rem .75rem; border-radius:8px;
    border:1px solid var(--hairline); background:var(--paper); color:var(--ink);
    width:100%;
  }
  input:focus,select:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
  .row{display:grid; grid-template-columns:1fr 1fr; gap:.75rem}
  .err{color:#b42318; font-size:.8125rem; min-height:0}
  :root:not([data-theme="light"]) .err{color:#ff8a7a}
  @media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .err{color:#b42318}}
  .quote{
    border:1px solid var(--hairline); border-radius:12px; background:var(--surface);
    padding:1.15rem 1.25rem; display:flex; flex-direction:column; gap:.5rem;
  }
  .quote-row{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; font-size:.9375rem}
  .quote-total{
    border-top:1px solid var(--hairline); padding-top:.6rem; margin-top:.15rem;
    font-weight:600; font-size:1.0625rem;
  }
  .quote-total .n{font-variant-numeric:tabular-nums}
  .quote-fine{font-size:.8125rem; color:var(--stone); text-wrap:pretty}
  .form-status{font-size:.875rem; color:var(--slate); min-height:1.2em; text-wrap:pretty}
  .form-status.ok{color:var(--ok)}

  /* ── Footer ──────────────────────────────────────────────────────────── */
  footer{
    border-top:1px solid var(--hairline); margin-top:1rem;
    padding:2rem clamp(1.25rem,4vw,2.5rem) 3rem;
  }
  footer .inner{
    max-width:62rem; margin:0 auto; display:flex; flex-wrap:wrap;
    gap:.6rem 1.5rem; align-items:baseline; justify-content:space-between;
  }
  a{color:var(--accent-ink); text-underline-offset:.2em}
  :focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}
  @media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* Language switcher. Deliberately NOT another plain pill: it sat fourth in a
   row of four identical buttons, so a visitor who did not already know the
   site was bilingual had no reason to look at it — which is how a French page
   came to be reported as "no French at all". Accent-bordered and globe-marked,
   because the globe is the one cue that reads without knowing either language. */
.btn-lang{
  border-color:var(--accent); color:var(--accent-ink); font-weight:500;
}
.btn-lang:hover{background:var(--accent-wash)}