/* ---------------------------------------------------------------------------
   The public website.

   Same palette, type and instincts as the sign-in page, because a visitor who
   clicks through must not feel handed to a different company. Everything here
   is one file: fifty pages sharing one 12 KB stylesheet beats fifty pages each
   waiting on their own.

   MOTION IS OPT-OUT, NOT OPT-IN. Every transition in here is inside a
   `prefers-reduced-motion: no-preference` block or degrades to opacity 1. The
   reveal machinery sets `.is-in` from script; if script never runs, content is
   visible by default. A page that needs JavaScript to show its words is broken.
   --------------------------------------------------------------------------- */

:root {
  --ink: #10161B;
  --ledger: #0D4A38;
  --ledger-deep: #07301F;
  --sprout: #3FA37A;
  --sprout-bright: #57C795;
  --bone: #FBFAF7;
  --paper: #F3F1EA;
  --rule: #D8DDD6;
  --muted: #7A857F;
  --muted-strong: #43504C;
  --sand: #E8E2D4;
  /* WARMTH, because green-and-black over fifty pages reads as one long page.
     These are accents only: they tint a section, an eyebrow or a card edge, and
     never the type -- contrast on this palette is what keeps it readable. */
  --amber: #C97A28;
  --amber-soft: #FBF2E4;
  --clay: #B4513B;
  --clay-soft: #FBEDE9;
  --sky: #2F6F8F;
  --sky-soft: #EAF2F6;
  --plum: #6B4C7A;
  --plum-soft: #F3EDF6;
  --sans: Archivo, ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --wrap: 1120px;
  --r: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--bone); color: var(--ink);
  font: 16.5px/1.65 var(--sans); -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { letter-spacing: -.022em; text-wrap: balance; margin: 0 0 .45em; }
h1 { font-size: clamp(34px, 6.4vw, 66px); font-weight: 800; line-height: 1.04; }
h2 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; line-height: 1.12; }
h3 { font-size: 19px; font-weight: 700; line-height: 1.25; }
p { margin: 0 0 1.1em; }
a { color: inherit; }

.eyebrow {
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--sprout); margin: 0 0 14px;
}
.lede { font-size: clamp(17px, 2vw, 21px); color: var(--muted-strong); max-width: 62ch; }
.fine { font-size: 13.5px; color: var(--muted); }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* --- header ---------------------------------------------------------------- */

header#top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 22px;
  padding: 14px 24px; background: color-mix(in srgb, var(--bone) 86%, transparent);
  backdrop-filter: blur(12px) saturate(1.3);
  border-bottom: 1px solid transparent; transition: border-color .25s, background .25s;
}
header#top.stuck { border-bottom-color: var(--rule); }
body.has-hero header#top {
  background: transparent; backdrop-filter: none; color: var(--bone);
  position: absolute; left: 0; right: 0;
}
body.has-hero header#top.stuck {
  position: fixed; background: color-mix(in srgb, var(--ledger-deep) 92%, transparent);
  backdrop-filter: blur(12px); border-bottom-color: rgba(255,255,255,.12);
}
.mark { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none;
         color: var(--ink); }
/* currentColor, which is the whole reason this is inline and not an <img>. */
.mark__ant { display: block; color: inherit; }
.wordmark {
  font-size: 19px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: inherit;
}
/* On the hero the bar sits over a dark photograph of a scene, so BOTH halves of
   the mark are bone and the whole bar gets a scrim: white type on a moving
   green background is legible until an ant walks behind it. */
body.has-hero .mark,
body.has-hero header#top { color: var(--bone); }
body.has-hero header#top::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(4,24,16,.55), rgba(4,24,16,0));
}
body.has-hero header#top.stuck::before { background: none; }
#nav { display: flex; gap: 4px; margin-left: auto; }
#nav a {
  text-decoration: none; font-size: 14.5px; font-weight: 500; padding: 8px 12px;
  border-radius: 9px; opacity: .82; white-space: nowrap;
}
#nav a:hover, #nav a.on { opacity: 1; background: rgba(16,22,27,.06); }
body.has-hero #nav a:hover, body.has-hero #nav a.on { background: rgba(255,255,255,.12); }
.head-cta { display: flex; gap: 8px; align-items: center; }
/* The phone-menu duplicates are hidden on a wide screen, where the buttons
   beside the nav carry them instead. */
.nav--phone { display: none !important; }
#burger { display: none; }
.burger__word { font: 500 14px/1 var(--sans); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 500 14.5px/1 var(--sans); text-decoration: none; cursor: pointer;
  padding: 12px 18px; border-radius: 10px; border: 1px solid transparent;
  white-space: nowrap; transition: transform .18s, background .18s, border-color .18s, box-shadow .18s;
}
.btn--ink { background: var(--ink); color: var(--bone); }
.btn--sprout { background: var(--sprout); color: #04150E; font-weight: 600; }
.btn--ghost { border-color: rgba(255,255,255,.35); color: var(--bone); }
.btn--quiet { border-color: var(--rule); }
body.has-hero .btn--quiet { border-color: rgba(255,255,255,.3); color: var(--bone); }
body.has-hero .btn--ink { background: var(--bone); color: var(--ink); }
.btn:hover { transform: translateY(-1px); }
.btn--sprout:hover { background: var(--sprout-bright); box-shadow: 0 8px 26px -10px rgba(63,163,122,.8); }
.btn:active { transform: translateY(0); }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* --- hero ------------------------------------------------------------------ */

.hero {
  /* The bottom third belongs to the scene: the walking lane, and the prompt
     bubble that forge.js places between the text and that lane. */
  position: relative; min-height: min(94vh, 880px); display: flex; align-items: flex-start;
  background: radial-gradient(120% 120% at 20% 0%, #0F5B44 0%, var(--ledger) 42%, var(--ledger-deep) 100%);
  color: var(--bone); overflow: hidden; padding: 148px 0 240px;
}
#forge { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero__in { position: relative; z-index: 2; }
.hero h1 { max-width: 17ch; }
.hero .lede { color: rgba(251,250,247,.78); max-width: 46ch; }
.hero__grad {
  position: absolute; inset: auto 0 0 0; height: 180px; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--ledger-deep) 70%, transparent));
}
.hero__scroll {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 3;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(251,250,247,.5);
}
.ticker {
  position: relative; z-index: 2; margin-top: 34px; display: flex; gap: 10px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
  color: rgba(251,250,247,.62); flex-wrap: wrap;
}
.ticker span { padding: 5px 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; }

/* --- sections -------------------------------------------------------------- */

.sec { padding: clamp(56px, 8vw, 104px) 0; }
.sec--bone { background: var(--bone); }
.sec--paper { background: var(--paper); border-block: 1px solid var(--rule); }
.sec--ledger { background: var(--ledger-deep); color: var(--bone); }
.sec--ledger .lede { color: rgba(251,250,247,.76); }
.sec--ledger .eyebrow { color: var(--sprout-bright); }
.sec--wide .wrap { max-width: 1280px; }
main.wide { display: block; }

.grid { display: grid; gap: 18px; margin-top: 34px; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--1 { grid-template-columns: 1fr; }

.card {
  background: #fff; border: 1px solid var(--rule); border-radius: var(--r);
  padding: 24px 22px; transition: transform .22s, box-shadow .22s, border-color .22s;
}
.card h3 { margin-bottom: .35em; }
.card p { margin: 0; color: var(--muted-strong); font-size: 15.5px; }
.card__note {
  margin-top: 12px !important; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .04em; color: var(--muted) !important;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -28px rgba(16,22,27,.5); border-color: #C7CEC5; }
.sec--ledger .card { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.13); }
.sec--ledger .card p { color: rgba(251,250,247,.72); }

.tile {
  display: block; position: relative; text-decoration: none; background: #fff;
  border: 1px solid var(--rule); border-radius: var(--r); padding: 22px;
  transition: transform .2s, box-shadow .2s;
}
.tile h3 { margin-bottom: .3em; }
.tile p { margin: 0; color: var(--muted); font-size: 14.5px; }
.tile__go { position: absolute; right: 18px; bottom: 16px; color: var(--sprout); opacity: 0; transition: opacity .2s, transform .2s; }
.tile:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -28px rgba(16,22,27,.45); }
.tile:hover .tile__go { opacity: 1; transform: translateX(3px); }

.steps { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 4px; }
.step { display: flex; gap: 20px; padding: 22px 0; border-top: 1px solid var(--rule); }
.step:last-child { border-bottom: 1px solid var(--rule); }
.step__n {
  font-family: var(--mono); font-size: 12px; color: var(--sprout); flex: none;
  padding-top: 5px; letter-spacing: .1em;
}
.step h3 { margin-bottom: .3em; }
.step p { margin: 0; color: var(--muted-strong); max-width: 68ch; }

.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; }
.pill {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; padding: 6px 11px;
  border: 1px solid var(--rule); border-radius: 999px; color: var(--muted-strong);
  background: #fff;
}

.faqs { margin-top: 30px; border-top: 1px solid var(--rule); }
.faq { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; padding: 18px 34px 18px 0; font-weight: 600; position: relative;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 6px; top: 15px; font-size: 20px;
  color: var(--sprout); font-weight: 400;
}
.faq[open] summary::after { content: '\2013'; }
.faq__a { padding: 0 40px 18px 0; color: var(--muted-strong); max-width: 74ch; }
.faq__a p { margin: 0; }

.prose { max-width: 68ch; font-size: 17.5px; }
.prose h2 { font-size: clamp(23px, 2.6vw, 30px); margin-top: 1.9em; }
.prose h3 { font-size: 19.5px; margin-top: 1.6em; }
.prose ul { padding-left: 1.15em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .5em; }
.prose blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--sprout);
  font-size: 19px; color: var(--muted-strong);
}
.prose code, .mono { font-family: var(--mono); font-size: .88em; }

.postmeta {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 18px;
}
.pagehead { padding: clamp(70px, 11vw, 128px) 0 clamp(18px, 2.5vw, 30px); background: var(--bone); }
/* The same wrap as every section, so the left edge of a page title lines up with
   the left edge of the content under it. A narrower centred column here looked
   deliberate on its own and visibly misaligned the moment you scrolled. */
.pagehead h1 { max-width: 22ch; }
.pagehead .lede { max-width: 58ch; }
.backlink { text-decoration: none; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.backlink:hover { color: var(--ink); }

.cta .wrap { text-align: center; max-width: 720px; }
.cta .lede { margin-inline: auto; }
.cta .row { justify-content: center; margin-top: 26px; }
.cta .fine { color: rgba(251,250,247,.55); margin-top: 18px; }

.note {
  border: 1px solid var(--rule); border-left: 3px solid var(--sprout);
  background: #fff; border-radius: 10px; padding: 18px 20px; margin: 26px 0;
}
.note p:last-child { margin: 0; }
.note strong { font-weight: 700; }

table.plain { width: 100%; border-collapse: collapse; margin: 30px 0 0; font-size: 15.5px; }
table.plain th, table.plain td { text-align: left; padding: 13px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.plain th { font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); font-weight: 500; }
table.plain td:first-child { font-weight: 600; }

#siteFooter { padding: 0 24px 18px; }

/* --- reveal ---------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(14px); }
  .js .reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity .62s cubic-bezier(.22,.61,.36,1) var(--d, 0ms),
                transform .62s cubic-bezier(.22,.61,.36,1) var(--d, 0ms);
  }
}

/* --- phone ----------------------------------------------------------------- */

/* THE HEADER RUNS OUT OF ROOM BEFORE THE PAGE DOES. Six nav links beside three
   buttons overflowed between 861 and 1100px — "Request access" was clipped off
   the right edge — so the navigation collapses into the burger at 1100 while the
   phone layout rules below stay at 860, where they belong. */
/* 1080, measured rather than guessed: at 1100 the row fits with room to spare
   and at 1000 "Request access" is clipped off the right edge. Shorter nav labels
   bought about 90px of that, and the burger now says "Menu" — an unlabelled icon
   is a menu people do not find, which is what was reported. */
@media (max-width: 1080px) {
  #nav {
    position: fixed; inset: 0 0 auto; top: 0; padding: 84px 24px 28px;
    flex-direction: column; gap: 2px; background: var(--ledger-deep); color: var(--bone);
    transform: translateY(-100%); transition: transform .34s cubic-bezier(.4,0,.2,1);
    margin: 0; z-index: 30;
  }
  #nav.open { transform: none; }
  #nav a { font-size: 19px; padding: 12px 4px; opacity: .9; }
  .head-cta { margin-left: auto; }
  /* Only the language menu and the primary button stay in the bar; Sign in and
     Referrals move into the slide-down menu with the rest of the navigation. */
  .head-cta__wide { display: none; }
  #nav .nav--phone {
    display: block !important;
    border-top: 1px solid rgba(255,255,255,.14);
    margin-top: 10px; padding-top: 16px;
  }
  #nav .nav--phone + .nav--phone { border-top: 0; margin-top: 0; padding-top: 12px; }
  #nav .nav--cta {
    background: var(--sprout); color: #04150E; font-weight: 600;
    border-radius: 10px; padding: 13px 16px; margin-top: 14px; opacity: 1;
    text-align: center; max-width: 260px;
  }
  #burger {
    display: flex; align-items: center; gap: 8px; z-index: 50;
    background: none; border: 1px solid var(--rule); border-radius: 10px;
    padding: 9px 12px; cursor: pointer; color: inherit; font: 500 14px/1 var(--sans);
  }
  body.has-hero #burger { border-color: rgba(255,255,255,.3); }
  .burger__bars { display: flex; flex-direction: column; gap: 4px; width: 16px; }
  .burger__bars span { display: block; height: 2px; background: currentColor; border-radius: 2px;
    transition: transform .28s, opacity .2s; }
  .burger__word { display: inline; }
  #burger[aria-expanded="true"] { color: var(--bone); border-color: rgba(255,255,255,.35); }
  #burger[aria-expanded="true"] .burger__bars span:first-child { transform: translateY(3px) rotate(45deg); }
  #burger[aria-expanded="true"] .burger__bars span:last-child { transform: translateY(-3px) rotate(-45deg); }
  /* NO BACKDROP-FILTER WHERE FIXED PANELS LIVE. A filtered element becomes the
     containing block for its fixed-position descendants, and both the menu and
     the language dropdown are fixed children of this header. Keeping the blur
     here is a standing trap: it would place them against a 66px header instead
     of the viewport. It is only decoration, and only on the wide layout now. */
  header#top, body.has-hero header#top.stuck { backdrop-filter: none; }
  #langMenu { position: fixed; left: 12px; right: 12px; top: 68px; width: auto; }
}

@media (max-width: 860px) {
  #langBtn { padding: 10px 11px; font-size: 13px; }
  .hero { min-height: 100vh; padding: 92px 0 20px; }
  @supports (min-height: 100dvh) { .hero { min-height: 100dvh; } }
  .hero h1 { max-width: 100%; }
  .ticker { margin-top: 24px; }
  .step { gap: 14px; }
}


/* On the narrowest screens the ticker wraps to two rows, which pushed the phone
   in the hero scene past the fold and cut it in half. The same six words appear
   in the section immediately below, so this loses nothing. */
@media (max-width: 420px) {
  /* Reclaim the hero's bottom band on a small phone, so the colony and the
     device are big enough to read. Both of these say something said again
     immediately below the fold, and the phone is the argument. */
  .hero .fine { display: none; }
  .hero .btn { padding: 12px 14px; font-size: 14px; }
}

@media (max-width: 520px) {
  .ticker { display: none; }
  /* It landed across the phone's bottom edge. The hero is obviously scrollable
     on a phone; this label is for a desktop screen that ends at the fold. */
  .hero__scroll { display: none; }
}


/* --- colour, so fifty pages are not one page ------------------------------- */

.sec--sand  { background: var(--sand); border-block: 1px solid #DCD4C2; }
.sec--amber { background: var(--amber-soft); border-block: 1px solid #F0E0C6; }
.sec--sky   { background: var(--sky-soft); border-block: 1px solid #D8E6EE; }
.sec--clay  { background: var(--clay-soft); border-block: 1px solid #F2DAD3; }
.sec--plum  { background: var(--plum-soft); border-block: 1px solid #E6DAEC; }
/* A soft wash behind a page title, in that page's own accent. Top-anchored and
   fading out, so the type sits on near-white and contrast never moves. */
.pagehead { position: relative; }
.pagehead::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 100%; z-index: 0;
  pointer-events: none; opacity: .55;
}
.pagehead > .wrap { position: relative; z-index: 1; }
.pagehead--amber::before { background: linear-gradient(to bottom, var(--amber-soft), transparent 78%); }
.pagehead--sky::before   { background: linear-gradient(to bottom, var(--sky-soft), transparent 78%); }
.pagehead--clay::before  { background: linear-gradient(to bottom, var(--clay-soft), transparent 78%); }
.pagehead--plum::before  { background: linear-gradient(to bottom, var(--plum-soft), transparent 78%); }
.pagehead--sand::before  { background: linear-gradient(to bottom, var(--sand), transparent 78%); }
.pagehead--paper::before { background: linear-gradient(to bottom, var(--paper), transparent 78%); }

.sec--amber .eyebrow { color: var(--amber); }
.sec--sky   .eyebrow { color: var(--sky); }
.sec--clay  .eyebrow { color: var(--clay); }
.sec--plum  .eyebrow { color: var(--plum); }

/* Cards in a grid take accents in rotation, so a row of three is not three
   identical boxes. Top edge only: a coloured border all the way round starts
   competing with the type inside it. */
.grid .card { position: relative; overflow: hidden; }
.grid .card::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--sprout); opacity: .85;
}
.grid .card:nth-child(3n+2)::before { background: var(--amber); }
.grid .card:nth-child(3n)::before   { background: var(--sky); }
.grid .card:nth-child(5n)::before   { background: var(--clay); }
.grid .card:nth-child(7n)::before   { background: var(--plum); }

/* --- the aurora: a slow shift on dark sections ----------------------------- */

.sec--ledger { position: relative; overflow: hidden; }
.sec--ledger > .wrap { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .sec--ledger::after {
    content: ''; position: absolute; inset: -40% -10%; z-index: 0; pointer-events: none;
    background:
      radial-gradient(38% 44% at 22% 30%, rgba(63,163,122,.30), transparent 70%),
      radial-gradient(34% 40% at 78% 62%, rgba(47,111,143,.26), transparent 70%),
      radial-gradient(30% 36% at 55% 85%, rgba(201,122,40,.16), transparent 70%);
    animation: drift 34s ease-in-out infinite alternate;
    will-change: transform;
  }
  @keyframes drift {
    from { transform: translate3d(-3%, -2%, 0) scale(1); }
    to   { transform: translate3d(4%, 3%, 0) scale(1.12); }
  }
}

/* --- the animated divider strip ------------------------------------------- */

.divider { padding: 0; margin: 0; line-height: 0; background: var(--bone); }
.divider--paper { background: var(--paper); }
.divider--ledger { background: var(--ledger-deep); }
canvas.trail { display: block; width: 100%; height: 62px; }
/* Taller on a phone, not shorter: it is the only moving thing on an interior
   page there, and 52px of it read as a smudge. */
@media (max-width: 520px) { canvas.trail { height: 68px; } }

/* --- counters and price cards --------------------------------------------- */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
         gap: 18px; margin-top: 34px; }
.stat { border-left: 3px solid var(--sprout); padding: 4px 0 4px 16px; }
.stat:nth-child(2) { border-color: var(--amber); }
.stat:nth-child(3) { border-color: var(--sky); }
.stat:nth-child(4) { border-color: var(--clay); }
.stat__n { font-size: clamp(28px, 4vw, 42px); font-weight: 800; letter-spacing: -.02em;
           line-height: 1; display: block; }
.stat__l { font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
           text-transform: uppercase; color: var(--muted); margin-top: 8px; display: block; }

.card--price { text-align: left; }
.price { font-size: clamp(26px, 3.4vw, 34px); font-weight: 800; letter-spacing: -.02em;
         margin: 0 0 2px; }
.tag--pick { font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
             text-transform: uppercase; background: var(--amber-soft); color: var(--amber);
             padding: 3px 7px; border-radius: 999px; vertical-align: middle; }

/* --- a little life on the small stuff ------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .btn--sprout { background-image: linear-gradient(100deg, var(--sprout), var(--sprout-bright) 50%, var(--sprout));
                 background-size: 220% 100%; background-position: 0% 0%;
                 transition: background-position .5s ease, transform .18s, box-shadow .18s; }
  .btn--sprout:hover { background-position: 100% 0%; }
  .pill { transition: transform .18s, border-color .18s, background .18s; }
  .pill:hover { transform: translateY(-2px); border-color: var(--sprout); background: #F4FAF6; }
  .tile:hover h3 { color: var(--ledger); }
  .step { transition: background .2s; }
  .step:hover { background: linear-gradient(90deg, rgba(63,163,122,.06), transparent 60%); }
}


/* --- the language menu ----------------------------------------------------- */

#langWrap { position: relative; }
#langBtn {
  font: 500 14px/1 var(--sans); cursor: pointer; color: inherit;
  background: none; border: 1px solid var(--rule); border-radius: 10px;
  padding: 11px 13px; display: flex; align-items: center; gap: 7px; white-space: nowrap;
}
#langBtn span[aria-hidden] { font-size: 15px; }
.lang__word { white-space: nowrap; }
#langBtn.has-choice { border-color: var(--sprout); }
body.has-hero #langBtn { border-color: rgba(255,255,255,.3); }
#langBtn:hover { border-color: var(--sprout); }

#langMenu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  width: min(92vw, 420px); background: #fff; color: var(--ink);
  border: 1px solid var(--rule); border-radius: 14px; padding: 16px;
  box-shadow: 0 24px 60px -24px rgba(16,22,27,.45);
}
.lang__note { font-size: 12.5px; line-height: 1.5; color: var(--muted-strong); margin: 0 0 12px; }
.lang__again {
  font: 600 13px/1 var(--sans); cursor: pointer; margin: 0 0 12px;
  background: var(--sprout); color: #04150E; border: 0; border-radius: 8px; padding: 9px 12px;
}
.lang__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 6px; }
.lang__pick {
  font: 500 15px/1.25 var(--sans); text-align: left; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: 9px; padding: 8px 9px;
  color: var(--ink); display: block;
}
.lang__pick small { display: block; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.lang__pick:hover { background: #F4FAF6; border-color: var(--rule); }
.lang__pick--en { border-color: var(--rule); }
.lang__soon { font-size: 14px; color: var(--muted); padding: 8px 9px; display: block; opacity: .6; }

@media (max-width: 860px) {
  /* The menu stays; the two buttons beside it are what give way on a phone. */
  #langBtn { padding: 10px 11px; font-size: 13px; }
  #langMenu { position: fixed; left: 12px; right: 12px; top: 68px; width: auto; }
}

/* --- the footer ------------------------------------------------------------
   Navigation, not disclosure: footer.js still mounts below this and still reads
   /api/business, because naming the seller is a legal requirement and belongs to
   the record the invoices use rather than to a marketing template. */

.foot { background: var(--ledger-deep); color: var(--bone); padding: clamp(48px, 7vw, 76px) 0 40px; }
.foot__top { display: grid; grid-template-columns: minmax(240px, 300px) 1fr; gap: clamp(28px, 5vw, 64px); }
.foot__pitch p { color: rgba(251,250,247,.72); font-size: 15px; max-width: 34ch; }
.foot__mark { font-size: 22px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
              color: var(--bone); margin: 0 0 14px; }
.foot__pitch .row { margin-top: 20px; }
.foot__pitch .fine a { color: rgba(251,250,247,.7); }
.foot__pitch .fine a:hover { color: var(--bone); }

/* Its own width, and a COUNT rather than auto-fit. The footer inherited the
   1120px reading wrap, which left 708px for the links — enough for exactly three
   columns, so the seventh group sat alone on a row of its own looking like a
   mistake. Four is deliberate: seven groups read as 4 + 3. */
.foot .wrap { max-width: 1320px; }
.foot__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 24px; }
.foot__col h3 {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sprout-bright); margin: 0 0 12px;
}
.foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.foot__col a {
  color: rgba(251,250,247,.76); text-decoration: none; font-size: 14px; line-height: 1.35;
  display: inline-block;
}
.foot__col a:hover { color: var(--bone); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1100px) {
  .foot__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .foot__top { grid-template-columns: 1fr; }
  .foot__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 18px; }
}
@media (max-width: 520px) {
  .foot { padding-top: 40px; }
  .foot__cols { grid-template-columns: repeat(2, 1fr); }
  .foot__col a { font-size: 13.5px; }
}


/* --- the phone header, which ran out of room --------------------------------
   At 390px the row was logo + Language + Request access + Menu, and MENU WAS
   PUSHED OFF THE RIGHT EDGE — so on a phone there was no visible way into the
   navigation at all. The language button loses its word (the glyph and the
   aria-label carry it) and the gap tightens, which buys back about 80px and
   puts Menu back on screen. Reported, not noticed: every header screenshot
   before this was taken wide. */
@media (max-width: 620px) {
  header#top { gap: 12px; padding-inline: 16px; }
  .lang__word { display: none; }
  #langBtn { padding: 9px 11px; }
  .head-cta { gap: 6px; }
  .head-cta .btn--ink { padding: 11px 13px; font-size: 13.5px; }
  #burger { padding: 9px 10px; }
}
@media (max-width: 380px) {
  /* Below this the primary button gives way, because a Menu nobody can reach is
     worse than a CTA one tap further away — and Request access is a link inside
     the menu, which is what makes this safe. */
  .head-cta .btn--ink { display: none; }
}