/* 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(1.25rem,3vw,2.25rem); display:flex; flex-direction:column; gap:1.1rem}
  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}

  /* ── Hero offer band: the Data Innovation Partnership Program ─────────── */
  /* The one drenched surface on the page, and the one idea it must carry:
     "BKeeper Premium. Free for life." Its colours are SCOPED tokens so the
     band re-skins in one place. If the brand colours below are ever withdrawn,
     the tested fallback is a pure inversion of the existing palette (--band:
     var(--ink); --band-ink, --mark-bg, --cta-bg: var(--paper); --mark-ink,
     --cta-ink, --ribbon-bg, --ticket-accent: var(--ink); --ribbon-ink:
     var(--paper)) — no new colour, and it flips correctly in dark mode. It was
     rendered and reviewed alongside this one on 2026-11-04. */
  /* BKeeper's OWN logo colours, approved for this band by the operator
     2026-11-04 (chosen over a monochrome inversion of the existing palette,
     which shipped nothing new but read quieter). These are an EXPANSION of the
     landing sheet's single-accent system, and they are deliberately scoped:
     they live on the public marketing surface only. The authenticated app must
     NOT adopt them — its --accent is overridden per tenant at runtime
     (DESIGN.md "White-label constraint"), and BKeeper's brand colours there
     would fight every firm's own.

     Contrast, computed against the WCAG formula, not eyeballed:
       #ffffff on teal #007860 ............ 5.4:1   AA body text
       #e3f2ec (band-muted) on teal ....... 4.9:1   AA body text
       #0a0a0a on lime #c0f000 ............ 14.8:1
     Lime is NEVER a text colour on white (≈1.3:1); it is only ever a fill
     under dark text, or a mark on a dark surface. */
  :root{--brand-lime:#c0f000; --brand-teal:#007860}

  .offer-band{
    --band:var(--brand-teal);
    --band-ink:#ffffff;
    --band-muted:#e3f2ec;
    --band-line:rgba(255,255,255,.36);
    --mark-bg:var(--brand-lime);
    --mark-ink:#0a0a0a;
    --cta-bg:var(--brand-lime);
    --cta-ink:#0a0a0a;
    --ribbon-bg:var(--brand-lime);
    --ribbon-ink:#0a0a0a;
    --ticket-accent:var(--brand-teal);

    background:var(--band); color:var(--band-ink);
    border-radius:32px;                     /* DESIGN.md: the hero band radius */
    padding:clamp(1.5rem,4.5vw,3.25rem);
    display:grid; grid-template-columns:minmax(0,1fr);
    gap:clamp(1.25rem,2.6vw,1.9rem);
  }
  /* Desktop: the headline takes the band's full width (it is the point), and
     the supporting copy sits beside the ticket underneath it. */
  @media (min-width:56rem){
    .offer-band{
      grid-template-columns:minmax(0,1fr) minmax(0,20.5rem);
      grid-template-areas:"badge badge" "title title" "copy ticket";
      column-gap:clamp(2rem,4vw,3.25rem);
      align-items:start;
    }
    .offer-badge{grid-area:badge}
    .offer-title{grid-area:title}
    .offer-copy{grid-area:copy}
    .ticket{grid-area:ticket}
  }

  /* Sentence case at a readable size — the programme's name used to be a
     tiny tracked mono label, which is why nobody saw it. */
  .offer-badge{
    margin:0; justify-self:start;
    display:inline-flex; flex-wrap:wrap; align-items:center; gap:.35rem .6rem;
    border:1px solid var(--band-line); border-radius:9999px;
    padding:.4rem .45rem .4rem .95rem;
    font-size:.875rem; font-weight:600; letter-spacing:-.005em; line-height:1.3;
  }
  .offer-badge-limited{
    background:var(--mark-bg); color:var(--mark-ink);
    border-radius:9999px; padding:.18rem .65rem; font-size:.8125rem;
  }

  .offer-title{
    margin:0; max-width:none; color:var(--band-ink);
    font-size:clamp(2.1rem,7.2vw,4.75rem);
    font-weight:700; letter-spacing:-.04em; line-height:1.12;
  }
  /* The highlighted line. Padding plus an equal negative margin keeps its text
     flush with the line above; box-decoration-break repeats the marker on each
     line if French or a narrow phone wraps it. */
  .offer-title .mark{
    background:var(--mark-bg); color:var(--mark-ink);
    padding:0 .16em .05em; margin-left:-.16em; border-radius:.14em;
    -webkit-box-decoration-break:clone; box-decoration-break:clone;
  }

  .offer-copy{display:flex; flex-direction:column; gap:1.5rem}
  /* The trust line lives INSIDE the band, under the actions: centring the
     copy against the taller ticket floated it ~110px below its headline, and
     leaving it top-aligned left dead space that this line fills with
     something a bookkeeper actually checks first. */
  .offer-copy .hero-note{margin:0; color:var(--band-muted); font-size:.8125rem; text-wrap:pretty}
  .offer-stand{
    margin:0; max-width:34rem; color:var(--band-muted);
    font-size:clamp(1.0625rem,1.7vw,1.25rem); line-height:1.55;
    letter-spacing:-.011em; text-wrap:pretty;
  }
  .offer-band .hero-actions{margin-top:0}
  /* On the band the primary pill INVERTS rather than staying black: a black
     pill on a black band is invisible. Same shape and weight as .btn-primary;
     only the fill follows the surface it sits on. */
  .btn-offer{background:var(--cta-bg); border-color:var(--cta-bg); color:var(--cta-ink); font-weight:600}
  .btn-offer:hover{background:var(--cta-bg); opacity:.88}
  /* The secondary action is a LINK, not a second pill: two pills of equal
     weight made the eye choose, and on a narrow column the second one wrapped
     under the first. The arrow is a pseudo-element because I18N.apply()
     replaces textContent and would delete a child glyph. */
  .offer-link{
    color:var(--band-ink); font-weight:500; font-size:.9375rem;
    text-decoration:underline; text-decoration-color:var(--band-line);
    text-decoration-thickness:1px; text-underline-offset:.3em;
  }
  .offer-link::after{content:" \2192"}
  .offer-link:hover{text-decoration-color:var(--band-ink)}

  /* The ticket is a PLAN CARD on purpose — the same object as the packages in
     #pricing — with the real list price struck through, so "free" reads as a
     value rather than a slogan. */
  .ticket{
    background:var(--paper); color:var(--ink);
    border-radius:24px;                     /* DESIGN.md: featured panel radius */
    padding:1.5rem 1.5rem 1.35rem;
    display:flex; flex-direction:column; gap:.85rem;
  }
  .ticket-ribbon{
    align-self:flex-start; background:var(--ribbon-bg); color:var(--ribbon-ink);
    border-radius:9999px; padding:.22rem .75rem;
    font-size:.75rem; font-weight:600; letter-spacing:.01em;
  }
  .ticket-name{margin:0; font-weight:600; font-size:1.125rem; letter-spacing:-.016em}
  .ticket-price{margin:0; display:flex; flex-direction:column; gap:.2rem; font-variant-numeric:tabular-nums}
  .ticket-was{
    position:relative; align-self:flex-start; text-decoration:none;
    color:var(--stone); font-size:1rem;
  }
  .ticket-was::after{
    content:""; position:absolute; left:-.12em; right:-.12em; top:54%;
    height:2px; background:var(--ticket-accent); transform-origin:left center;
  }
  .ticket-now{display:flex; align-items:baseline; gap:.55rem}
  .ticket-amt{font-size:clamp(3rem,6vw,3.75rem); font-weight:700; letter-spacing:-.04em; line-height:1}
  .ticket-per{font-size:1.0625rem; font-weight:600; color:var(--ink)}
  .ticket-list{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.5rem}
  .ticket-list li{position:relative; padding-left:1.2rem; font-size:.9375rem; line-height:1.45; text-wrap:pretty}
  .ticket-list li::before{
    content:"+"; position:absolute; left:0; top:0; color:var(--ticket-accent);
    font-family:"DM Mono",ui-monospace,monospace; font-weight:500; font-size:.875rem; line-height:1.65;
  }
  /* In dark mode the ticket itself turns dark (--paper), where teal marks
     measure only ~3.5:1. Lime on that surface is ~14:1 and is already one of
     the two approved brand colours, so the marks switch to it there. Same
     three-block pattern as the palette tokens at the top of this file. */
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .offer-band{--ticket-accent:var(--brand-lime)}
  }
  :root[data-theme="dark"] .offer-band{--ticket-accent:var(--brand-lime)}
  .ticket-fine{
    margin:0; padding-top:.75rem; border-top:1px solid var(--hairline-2);
    font-size:.8125rem; color:var(--stone); text-wrap:pretty;
  }

  /* One deliberate moment: the old price is struck through as the page loads.
     No delay and no fill-mode, so the line's RESTING state is drawn — a
     renderer that never runs the animation (a paused tab, a crawler, reduced
     motion) still shows the price struck, never a bare "$2,900 a month" under
     a heading that says free. */
  @media (prefers-reduced-motion:no-preference){
    .ticket-was::after{animation:ticket-strike .7s cubic-bezier(.22,1,.36,1)}
  }
  @keyframes ticket-strike{from{transform:scaleX(0)}}

  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
  }

  /* Narrow screens. The nav — three links plus the language switcher that
     site-i18n.js injects — is ~395px of pills beside a ~145px logo, so on a
     390px phone it forced every public page ~45px wider than the screen
     (measured: scrollWidth 435 on a 390 viewport). Wrap the bar, tighten the
     pills, and stop pinning a two-row bar to the top of a phone. CSS ONLY: the
     nav's markup must not change, because the switcher is inserted into it by
     reference and restructuring it silently removes French. */
  @media (max-width:40rem){
    .topbar{position:static}
    .topbar .inner{flex-wrap:wrap; row-gap:.65rem}
    .topbar nav{width:100%; flex-wrap:wrap; gap:.35rem}
    .topbar nav .btn{padding:.42rem .8rem; font-size:.8125rem}
    .wordmark .logo{height:34px}
  }

  /* ── 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}

  /* ── Accounting software: two tiers, and the difference is the point ─── */
  .vendors{
    margin-top:2.25rem; padding-top:1.4rem; border-top:1px solid var(--hairline);
    display:flex; flex-direction:column; gap:1.25rem;
  }
  .vendors h3{margin:0; font-size:1rem; font-weight:600; letter-spacing:-.012em}
  .vendor-tier{display:grid; gap:.6rem}
  @media (min-width:48rem){
    .vendor-tier{grid-template-columns:14rem 1fr; gap:0 3rem; align-items:baseline}
  }
  .vendor-tier-label{
    margin:0; font-family:"DM Mono",ui-monospace,monospace; font-size:.6875rem;
    color:var(--stone); font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  }
  .vendor-tier-label--today{color:var(--ok)}
  .vendor-list{margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:.45rem}
  .vendor-list li{
    max-width:100%; padding:.3rem .75rem; border:1px solid var(--hairline);
    border-radius:1rem; font-size:.875rem; line-height:1.35; color:var(--slate);
  }
  /* The first tier carries the weight: ink text, a filled wash and a dot, so
     "connects" and "supported" never read as one undifferentiated list. */
  .vendor-list--today li{
    display:inline-flex; align-items:center; gap:.45rem;
    border-color:var(--ok); background:var(--ok-wash); color:var(--ink); font-weight:500;
  }
  .vendor-list--today li::before{
    content:""; flex:none; width:.45rem; height:.45rem; border-radius:50%; background:var(--ok);
  }

  /* ── 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)}