/* ==========================================================================
   Algonix Trade — site styles
   Ported from the Claude Design canvas (.design-src/Algonix Trade.dc.html).

   Tokens first, then the section-context layer, then layout primitives,
   components, and responsive rules.

   Polarity note: this design is light, and runs three grounds rather than two.
   The page base is a pale lilac (#F3F1FF), an alternate ground is plain white,
   and a third is the deep ink (#15123A) used for the assets section, the
   closing panel, the login aside and the footer. Ink is a full polarity flip,
   not a darker step: it carries its own foreground set.

   The contextual-variable layer below is what makes that work. Components read
   `--ground` / `--fg` / `--accent` and never the raw palette, so the same card
   renders correctly on lilac, on white and on ink without knowing which it is
   on. Changing or adding a ground is a change to that block alone.
   ========================================================================== */

/* === GENERATED by build/fonts.mjs — do not edit by hand === */
/* Self-hosted so no request reaches Google before the visitor has consented.
   See build/fonts.mjs for why, and public/assets/fonts/OFL.txt for the licence.
   Regenerate with: node build/fonts.mjs */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/bricolage-grotesque-var-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: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/bricolage-grotesque-var-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: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/instrument-sans-var-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: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/instrument-sans-var-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: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/space-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: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/space-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: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/space-mono-700-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: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/space-mono-700-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;
}
/* === END GENERATED === */

:root {
  /* --- Raw palette: grounds -------------------------------------------
     Three, not two. `--k-ink*` is a genuine second polarity rather than a
     darker step of the first, so it carries its own foreground set below. */
  --k-bg:       #F3F1FF;  /* page base - pale lilac */
  --k-bg-alt:   #FFFFFF;  /* alternate section ground, and the ticker strip */
  --k-cell:     #FFFFFF;  /* raised card on either light ground */
  --k-input:    #F3F1FF;  /* input well - recessed against a white card */

  --k-ink:      #15123A;  /* ink ground: dark sections, panels, footer */
  --k-ink-cell: #1E1A4D;  /* raised card on ink */
  --k-ink-tile: #2A2660;  /* filled tile / inactive step marker on ink */

  --k-line:     #E3E0F7;  /* card and section rules */
  --k-line-2:   #EBE8FF;  /* interior rules inside a card (market rows) */
  --k-line-3:   #DAD6F4;  /* input borders - must read against --k-cell */
  --k-line-4:   #E3E0F7;  /* form-card border */
  --k-ink-line: #2A2660;  /* rules on the ink ground */
  --k-ink-line-2: #3A3577; /* tag borders on the ink ground */

  /* --- Raw palette: foreground on the light grounds --------------------- */
  --k-fg:       #15123A;
  --k-fg-2:     #221E52;
  --k-fg-3:     #332E68;
  --k-muted:    #4B4870;
  --k-muted-2:  #565377;
  --k-muted-3:  #6D6A92;
  --k-muted-4:  #8A87AE;
  --k-muted-5:  #A9A6C8;
  --k-muted-6:  #B5B2D2;

  /* --- Raw palette: foreground on the ink ground ------------------------ */
  --k-ink-fg:    #F3F1FF;
  --k-ink-body:  #B9B5E0;
  --k-ink-muted: #8F8BBE;
  --k-ink-faint: #6A66A0;

  /* --- Brand ----------------------------------------------------------
     Violet carries the actions. Lime is the secondary accent and only ever
     appears on ink, where it has the contrast to be a button ground; lime on
     a light ground fails contrast badly, so it is not offered there. */
  --violet:       #4F3DF5;
  --violet-hi:    #3626C9;  /* hover - darker, because the ground is light */
  --violet-on:    #FFFFFF;  /* text on a violet button - 6.6:1 */
  --violet-line:  #CFC8FB;  /* border of a violet-tinted panel */
  --violet-tint:  #EBE8FF;  /* ground of a violet-tinted panel */
  --violet-tint-2: #E2DEFF; /* avatar tile */
  --violet-edge:  #C3BAF9;  /* card border on hover */

  --lime:      #D4FF4F;
  --lime-hi:   #E6FF85;
  --lime-on:   #15123A;     /* text on a lime button - 12.4:1 */

  /* --- Market direction -----------------------------------------------
     Neither direction is the brand accent here: violet is an action colour,
     so borrowing it for "up" would make a rising market look clickable. */
  --up:       #1F9D5B;
  --down:     #D6483B;
  --up-bg:    #E3F7EC;
  --down-bg:  #FDE8E5;
  --up-ink:   #4ADE9A;      /* the same two, lifted to read on ink */
  --down-ink: #FF8A78;

  /* --- Type -----------------------------------------------------------
     Three families. `--serif` is kept as a name so the component layer does
     not have to change; it points at the display face, which is a grotesque
     and not a serif. */
  --sans:    "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: "Bricolage Grotesque", "Instrument Sans", Helvetica, Arial, sans-serif;
  --serif:   "Bricolage Grotesque", "Instrument Sans", Helvetica, Arial, sans-serif;
  --mono:    "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Metrics -------------------------------------------------------- */
  --wrap:     1240px;
  --gutter:   24px;
  --header-h: 68px;
  --ticker-h: 40px;
  --chrome-h: 108px;  /* header + ticker */

  /* Heavily round-cornered: pills for anything interactive, large radii on
     cards and panels. */
  --radius:     24px;   /* cards and panels */
  --radius-sm:  14px;   /* inputs, small tiles */
  --radius-lg:  32px;   /* the two form cards, and the footer panel */
  --radius-btn: 999px;  /* buttons and nav pills */
}

/* --------------------------------------------------------------------------
   Section context

   Every ground defines the same variable names. Components below reference
   only these, never the raw palette, so they stay correct wherever they land.
   -------------------------------------------------------------------------- */

:root,
.ctx-lilac {
  --ground:     var(--k-bg);
  --cell:       var(--k-cell);
  --cell-tint:  var(--k-cell);
  --input-bg:   var(--k-input);
  --fg:         var(--k-fg);
  --fg-hi:      var(--k-fg);
  --fg-body:    var(--k-muted);
  --fg-muted:   var(--k-muted-3);
  --fg-faint:   var(--k-muted-4);
  --fg-faintest: var(--k-muted-5);
  --rule:       var(--k-line);
  --rule-soft:  var(--k-line-2);
  --rule-input: var(--k-line-3);
  --accent:     var(--violet);
  --accent-hi:  var(--violet-hi);
  --accent-line: var(--violet-line);
  --dir-up:     var(--up);
  --dir-down:   var(--down);
  --dir-up-bg:  var(--up-bg);
  --dir-down-bg: var(--down-bg);

  --btn-bg:       var(--violet);
  --btn-fg:       var(--violet-on);
  --btn-bg-hover: var(--violet-hi);
  --btn-fg-hover: var(--violet-on);
}

/* The white ground. Only the ground and the input well move: on white, lilac
   reads as the recessed colour, the inverse of its role on the base ground.
   `.ctx-cream` keeps its name from the sibling sites so the component layer
   did not have to be rewritten. */
.ctx-cream,
.section--light,
.form-card,
.login__form {
  --ground:     var(--k-bg-alt);
  --cell:       var(--k-cell);
  --cell-tint:  var(--k-bg);
  --input-bg:   var(--k-input);
  --fg:         var(--k-fg);
  --fg-hi:      var(--k-fg);
  --fg-body:    var(--k-muted);
  --fg-muted:   var(--k-muted-3);
  --fg-faint:   var(--k-muted-4);
  --fg-faintest: var(--k-muted-5);
  --rule:       var(--k-line);
  --rule-soft:  var(--k-line-2);
  --rule-input: var(--k-line-3);
  --accent:     var(--violet);
  --accent-hi:  var(--violet-hi);
  --accent-line: var(--violet-line);
  --dir-up:     var(--up);
  --dir-down:   var(--down);
  --dir-up-bg:  var(--up-bg);
  --dir-down-bg: var(--down-bg);

  --btn-bg:       var(--violet);
  --btn-fg:       var(--violet-on);
  --btn-bg-hover: var(--violet-hi);
  --btn-fg-hover: var(--violet-on);
}

/* The ink ground - a full polarity flip. Every foreground, rule and direction
   colour is replaced, and the button goes lime: violet on ink is the one
   pairing in this palette without the contrast to be a button ground.
   `.ctx-sand` / `.section--sand` keep their sibling-site names; here they are
   the dark ground. */
.ctx-ink,
.ctx-sand,
.section--sand,
.footer,
.cta-panel,
.login__aside {
  --ground:     var(--k-ink);
  --cell:       var(--k-ink-cell);
  --cell-tint:  var(--k-ink-cell);
  --input-bg:   var(--k-ink-cell);
  --fg:         var(--k-ink-fg);
  --fg-hi:      var(--k-ink-fg);
  --fg-body:    var(--k-ink-body);
  --fg-muted:   var(--k-ink-body);
  --fg-faint:   var(--k-ink-muted);
  --fg-faintest: var(--k-ink-faint);
  --rule:       var(--k-ink-line);
  --rule-soft:  var(--k-ink-line);
  --rule-input: var(--k-ink-line-2);
  --accent:     var(--lime);
  --accent-hi:  var(--lime-hi);
  --accent-line: var(--k-ink-line-2);
  --dir-up:     var(--up-ink);
  --dir-down:   var(--down-ink);
  --dir-up-bg:  var(--k-ink-cell);
  --dir-down-bg: var(--k-ink-cell);

  --btn-bg:       var(--lime);
  --btn-fg:       var(--lime-on);
  --btn-bg-hover: var(--lime-hi);
  --btn-fg-hover: var(--lime-on);
}

/* The two form cards sit ON a ground rather than being one, so they take the
   card colour. */
.form-card,
.login__form {
  --ground: var(--k-cell);
}

/* --------------------------------------------------------------------------
   Palette aliases

   The component layer below was written against the sibling sites' raw token
   names. Rather than rename several hundred usages - a large diff with no
   behavioural meaning, and an easy place to miss one - the old names are
   pointed at this design's palette here.

   The `--d-*` ("dark") names now resolve to the INK palette, because that is
   what they always meant: the components asking for the dark ground and its
   light foreground are exactly the footer, the closing panel and the login
   aside. The `--c-*` ("cream") names resolve to the white ground.
   -------------------------------------------------------------------------- */

:root {
  --d-bg:       var(--k-ink);
  --d-bg-2:     var(--k-ink-cell);
  --d-panel:    var(--k-ink-cell);
  --d-line:     var(--k-ink-line);
  --d-line-2:   var(--k-ink-line);
  --d-line-3:   var(--k-ink-line-2);
  --d-fg:       var(--k-ink-fg);
  --d-fg-hi:    var(--k-ink-fg);
  --d-fg-2:     var(--k-ink-body);
  --d-muted:    var(--k-ink-body);
  --d-muted-2:  var(--k-ink-body);
  --d-muted-3:  var(--k-ink-muted);
  --d-muted-4:  var(--k-ink-faint);

  --c-bg:       var(--k-bg-alt);
  --c-cell:     var(--k-cell);
  --c-fg:       var(--k-fg);

  --gold:        var(--violet);
  --gold-hi:     var(--violet-hi);
  --gold-dk-2:   var(--violet-hi);
  --gold-tint:   var(--violet-tint);
  --gold-tint-d: var(--violet-tint);

  /* The sibling sites' accent was a cyan called `--teal`. Same role here. */
  --teal:        var(--violet);
  --teal-hi:     var(--violet-hi);
  --teal-deep:   var(--violet-on);
  --teal-line:   var(--violet-line);
  --teal-tint:   var(--violet-tint);
  --teal-tint-2: var(--violet-tint-2);
  --teal-edge:   var(--violet-edge);
  --blue:        var(--violet-hi);

  --up-l:       var(--up);
  --down-l:     var(--down);
}


/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--k-bg);
  color: var(--k-fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); }

img { max-width: 100%; display: block; }

h1, h2, h3 { text-wrap: balance; font-family: var(--serif); font-weight: 600; }
p { text-wrap: pretty; }

::selection { background: var(--lime); color: var(--lime-on); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--violet);
  color: var(--violet-on);
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
}
.skip-link:focus { left: 0; color: var(--violet-on); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.page { min-height: 100vh; display: flex; flex-direction: column; background: var(--k-bg); }
.main { flex: 1; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.wrap--narrow { max-width: 920px; }
.wrap--legal  { max-width: 800px; }

/* Sections carry their own ground and context. */
.section { background: var(--ground); color: var(--fg); }
.section--light { background: var(--ground); color: var(--fg); }
.section--sand  { background: var(--ground); color: var(--fg); }
.section--top-rule { border-top: 1px solid var(--k-line); }

.section__body { padding-top: 84px; padding-bottom: 84px; }

.kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.kicker--quiet { color: var(--fg-faintest); }

/* The hero states the category, so the design gives it a bordered pill with a
   live dot rather than the bare mono line the section kickers use. The dot is
   decorative and carries no text, so it is a pseudo-element. */
.kicker--badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--teal-line);
  background: var(--teal-tint);
  padding: 7px 13px;
  border-radius: var(--radius-btn);
  letter-spacing: 0.12em;
  margin-bottom: 30px;
}
.kicker--badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--teal);
  flex: none;
  animation: bxpulse 2s ease-in-out infinite;
}
@keyframes bxpulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.2; }
}

/* --------------------------------------------------------------------------
   Ambient glow

   A single soft radial behind the hero and the closing panel. Purely
   decorative: it is a pseudo-element on the section, sits behind everything
   at z-index 0, and takes pointer-events: none so it can never intercept a
   click on the form it sits behind.
   -------------------------------------------------------------------------- */

.section--glow { position: relative; overflow: hidden; }
.section--glow > * { position: relative; z-index: 1; }
.section--glow::before {
  content: "";
  position: absolute;
  top: -240px;
  left: 50%;
  width: 1100px;
  height: 620px;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at center,
    rgba(79, 61, 245, 0.10),
    rgba(212, 255, 79, 0.10) 45%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}
/* The closing panel's glow rises from below and leads with the blue. */
.section--glow-bottom::before {
  top: auto;
  bottom: -300px;
  width: 1000px;
  height: 600px;
  background: radial-gradient(
    ellipse at center,
    rgba(212, 255, 79, 0.16),
    rgba(79, 61, 245, 0.06) 45%,
    transparent 70%
  );
}

.split { display: grid; gap: 68px; align-items: start; }
.split--hero    { grid-template-columns: minmax(0, 1fr) 452px; gap: 72px; }
.split--markets { grid-template-columns: 0.9fr 1.1fr; }
.split--steps   { grid-template-columns: 0.8fr 1.2fr; }
.split--derisk  { grid-template-columns: 0.85fr 1.15fr; }
.split--faq     { grid-template-columns: 0.7fr 1.3fr; }
.split--cta     { grid-template-columns: minmax(0, 1fr) 452px; gap: 72px; align-items: center; }
.split--contact { grid-template-columns: 1fr 1.1fr; gap: 84px; }

.sticky-col { position: sticky; top: 98px; }

/* Gapped cards. The sibling sites drew a hairline grid by letting a rule
   colour show through 1px gaps; this design gives every card its own border
   and radius and separates them with real space. */
.grid-cells {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.grid-cells > * {
  background: var(--cell);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: border-color 120ms ease;
}
.grid-cells > *:hover { border-color: var(--teal-edge); }

/* Stacked cards — the same treatment in one column. */
.stack-cells { display: flex; flex-direction: column; gap: 10px; }
.stack-cells > * {
  background: var(--cell);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   Typography scale
   -------------------------------------------------------------------------- */

.h-hero {
  font-family: var(--serif);
  /* Fluid rather than fixed: at 72px this headline is two words per line on a
     laptop and four on a phone, and the design sets a floor of 38px. */
  font-size: clamp(38px, 5.2vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.042em;
  font-weight: 600;
  margin: 0 0 26px;
  color: var(--fg-hi);
}
.h-page {
  font-family: var(--serif);
  font-size: clamp(36px, 4.6vw, 58px);
  line-height: 1.0;
  letter-spacing: -0.04em;
  font-weight: 600;
  margin: 0 0 30px;
  max-width: 16em;
  color: var(--fg-hi);
}
.h-section {
  font-family: var(--serif);
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
  margin: 0;
  color: var(--fg-hi);
}
.h-section--sm { font-size: clamp(29px, 3.2vw, 42px); line-height: 1.03; }
.h-section--xs { font-size: clamp(28px, 3.1vw, 42px); line-height: 1.03; }
.h-section--closing {
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.0;
  letter-spacing: -0.04em;
  margin-bottom: 20px;
}
.h-card {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--fg);
}
.h-sub {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
  color: var(--fg-hi);
}

.lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--fg-muted);
  margin: 0 0 40px;
  max-width: 30em;
}
.lede--lg { font-size: 20px; max-width: 38em; margin-bottom: 52px; }

.body-copy {
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg-muted);
  margin: 0 0 30px;
}
.body-copy--lg { font-size: 17px; }
.body-copy--tight { margin-bottom: 20px; }

.intro-copy {
  font-size: 17px;
  line-height: 1.65;
  color: var(--fg-muted);
  margin: 0;
}

.mono-note { font-family: var(--mono); font-size: 12px; color: var(--fg-faint); }
.mono-note--faint { font-size: 11px; color: var(--fg-faintest); }

.measure-sm { max-width: 34em; }
.measure-md { max-width: 36em; }
.measure-lg { max-width: 38em; }

.mb-52 { margin-bottom: 54px; }
.mb-56 { margin-bottom: 58px; }

/* --------------------------------------------------------------------------
   Buttons

   One primary button whose colours come from the section context, so it flips
   automatically between gold-on-dark and near-black-on-cream.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  padding: 14px 24px;
  border: 0;
  border-radius: var(--radius-btn);
  cursor: pointer;
  background: var(--btn-bg);
  color: var(--btn-fg);
  transition: background-color 120ms ease, color 120ms ease;
}
.btn:hover { background: var(--btn-bg-hover); color: var(--btn-fg-hover); }
.btn--block { display: block; width: 100%; padding: 15px; }
.btn--sm { font-size: 14px; padding: 10px 18px; border-radius: var(--radius-btn); }
.btn--wide { padding-left: 32px; padding-right: 32px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.link-quiet {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: transparent;
  color: var(--k-fg);
  padding: 14px var(--gutter) 0;
}
.header__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 10px 0 22px;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 32px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--k-line);
  border-radius: var(--radius-btn);
  box-shadow: 0 8px 30px rgba(21, 18, 58, 0.06);
}

/* Wordmark: a rounded teal-to-blue tile carrying the bitcoin glyph, then the
   name with the X in teal. The glyph is a ::after rather than markup so the
   templates stay free of a decorative character that a screen reader would
   otherwise announce. */
.brand { display: flex; align-items: center; gap: 11px; color: var(--k-fg); }
.brand:hover { color: var(--k-fg); }
.brand__mark {
  width: 30px; height: 30px;
  border-radius: 10px;
  background: var(--k-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.brand__mark::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 3px solid var(--lime);
}

.brand__name {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.brand__name em { font-style: normal; color: var(--teal); }

/* Nav items are pill-shaped hover targets in this design, so the gap closes
   right up and the padding does the separating. */
.nav { display: flex; gap: 8px; margin-left: auto; align-items: center; }
.nav__link {
  font-size: 14px;
  color: var(--k-muted);
  padding: 8px 12px;
  border-radius: var(--radius-btn);
}
.nav__link:hover, .nav__link[aria-current="page"] {
  color: var(--k-fg);
  background: var(--k-bg);
}

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--k-line);
  border-radius: var(--radius-btn);
  padding: 9px 11px;
  cursor: pointer;
  color: var(--k-fg);
}
.nav-toggle__bar { display: block; width: 18px; height: 2px; background: currentColor; }
.nav-toggle__bar + .nav-toggle__bar { margin-top: 4px; }

/* --------------------------------------------------------------------------
   Ticker — site-wide, directly beneath the header
   -------------------------------------------------------------------------- */

.ticker {
  overflow: hidden;
  background: var(--k-bg-alt);
  border-bottom: 1px solid var(--k-line);
}
.ticker__track { display: flex; width: max-content; }
/* Animation starts only once JS has cloned the strip, so the -50% loop always
   lands on an identical frame. Without JS the strip simply sits still. */
.ticker__track[data-cloned="true"] { animation: ttick 44s linear infinite; }
.ticker__item {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 11px 24px;
  font-family: var(--mono);
  font-size: 11px;
  white-space: nowrap;
}
.ticker__sym   { color: var(--k-fg-3); font-weight: 500; }
.ticker__price { color: var(--k-muted-4); }
.ticker__chg--up   { color: var(--up); }
.ticker__chg--down { color: var(--down); }

@keyframes ttick {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero__body { padding: 92px var(--gutter) 88px; }

/* Numbered rule-separated list under the hero lede. */
/* Three fact tiles under the hero copy. A list rather than three <div>s
   because they are one enumerable set, and a screen reader announcing "list,
   3 items" is the correct summary of what they are. */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 620px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.stat-card {
  background: var(--cell);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 20px 20px 22px;
}
.stat-card__label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 10px;
}
.stat-card__value { display: block; font-size: 17px; font-weight: 500; color: var(--fg); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

/* The hero form card is a raised card on the section ground rather than an
   inverted island — its inputs recess to the page base so the well reads as
   below the card rather than above it. */
.form-card {
  background: var(--ground);
  color: var(--fg);
  border: 1px solid var(--k-line-4);
  border-radius: var(--radius-lg);
  overflow: hidden;
  scroll-margin-top: 94px;
}
.form-card__head {
  padding: 26px 30px 22px;
  border-bottom: 1px solid var(--rule);
}
.form-card__title {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0 0 4px;
  color: var(--fg);
}
.form-card__sub { font-size: 14px; color: var(--k-muted-3); margin: 0; }
.form-card__body { padding: 26px 30px 30px; }

.field { margin-bottom: 16px; }
.field--last { margin-bottom: 24px; }

.field__label {
  display: block;
  font-size: 13px;
  color: var(--fg-muted);
  margin-bottom: 8px;
}

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--rule-input);
  border-radius: var(--radius-sm);
  font-family: var(--sans);
  font-size: 15px;
  color: var(--fg);
  padding: 12px 13px;
  outline: none;
  transition: border-color 120ms ease;
}
.field__textarea { resize: vertical; }
.field__input:focus,
.field__select:focus,
.field__textarea:focus { border-color: var(--teal); }
.field__input[aria-invalid="true"] { border-color: var(--dir-down); }
.field__input::placeholder { color: var(--fg-faintest); }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.field-row .field { margin-bottom: 0; }

/* Inline per-field validation message */
.field__msg {
  display: none;
  font-size: 13px;
  line-height: 1.45;
  margin-top: 7px;
}
.field__msg[data-state="checking"] { display: block; color: var(--fg-faint); }
.field__msg[data-state="ok"]       { display: block; color: var(--dir-up); }
.field__msg[data-state="warn"]     { display: block; color: var(--accent); }
.field__msg[data-state="error"]    { display: block; color: var(--dir-down); }

.field__msg button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* Honeypot — off-screen for people, inviting to naive bots */
.hp-field {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note { font-size: 12px; line-height: 1.55; color: var(--fg-faint); margin: 16px 0 0; }
.form-note a { text-decoration: underline; text-underline-offset: 2px; }

.form-status { display: none; margin-top: 14px; }
.form-status[data-state="ok"] {
  display: block;
  background: var(--teal-tint);
  border: 1px solid var(--teal-line);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--teal-hi);
}
.form-status[data-state="error"] {
  display: block;
  background: var(--down-bg);
  border: 1px solid #F5C4BC;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--down);
}

.turnstile-slot:not(:empty) { margin-bottom: 18px; }

/* The closing-CTA panel carries `.form-dark` from the sibling sites. Every
   ground is dark here, so the status colours above already apply and no
   override is needed — the class is kept as a hook, not a restyle. */

/* --------------------------------------------------------------------------
   Market table
   -------------------------------------------------------------------------- */

.market-table {
  border: 1px solid var(--rule);
  background: var(--cell);
  border-radius: var(--radius);
  overflow: hidden;
}
.market-row {
  display: grid;
  grid-template-columns:
    minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 0.85fr)
    minmax(0, 0.95fr) minmax(0, 1.5fr);
  /* Every column after the first is right-aligned, so without a gap a long
     value sits flush against the one before it. English never showed this —
     "News-driven" leaves room — but German ("Nachrichtengetrieben") fills the
     profile column and collided with the volume figure. */
  column-gap: 16px;
  padding: 18px 26px;
  border-bottom: 1px solid var(--rule-soft);
  align-items: baseline;
}
.market-row:last-of-type { border-bottom: 0; }
.market-row--head {
  padding: 14px 26px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.market-row__pair { display: flex; align-items: baseline; gap: 12px; }
.market-row__sym  { font-family: var(--mono); font-size: 15px; font-weight: 500; }
.market-row__name { font-size: 13px; color: var(--fg-faint); }
.market-row__num { text-align: right; font-family: var(--mono); font-size: 14px; }
.market-row__num--vol  { color: var(--k-muted-2); }
/* The profile column is prose, not a figure, so it keeps the sans. It is also
   the only column whose content is a translated phrase rather than a number,
   and German compounds it into single unbreakable words — "Nachrichten-
   getrieben" is 20 characters with nowhere to wrap. The column is sized for
   that, and `overflow-wrap` is the backstop for whatever the next locale
   brings. */
.market-row__tag {
  text-align: right;
  font-size: 13px;
  color: var(--k-muted-2);
  overflow-wrap: anywhere;
}
.market-row__num--up   { color: var(--dir-up); }
.market-row__num--down { color: var(--dir-down); }
.market-table__foot {
  padding: 14px 26px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--fg-faintest);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Content cells
   -------------------------------------------------------------------------- */

.benefit {
  padding: 30px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 42px;
}
.benefit__no {
  font-family: var(--display);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--accent);
  margin: 0;
}
/* The heading and body are the second flex child, so the 42px gap sits between
   the numeral and the text rather than between every element. */
.benefit__no + .h-card { margin-top: auto; }
.benefit__body { font-size: 15px; line-height: 1.62; color: var(--fg-body); margin: 0; }

/* "How to get started" stacks the number above the title rather than beside
   it: inside a card the side-by-side arrangement leaves the number stranded
   in its own column of whitespace. */
.step { padding: 34px 30px 38px; border-radius: var(--radius); }
.step__no {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lime-on);
  background: var(--lime);
  padding: 6px 11px;
  border-radius: var(--radius-btn);
  display: inline-block;
  margin: 0 0 26px;
}
.step__title {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0 0 10px;
  color: var(--fg);
}
.step__body { font-size: 15px; line-height: 1.62; color: var(--fg-body); margin: 0; max-width: 40em; }

/* The risk-management list keeps the number beside the title — those rows run
   full width, so the column costs nothing and the numbers read as a sequence. */
.step--tight {
  padding: 26px 30px 28px;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 22px;
  align-items: center;
}
/* The risk list numbers its items with the same large display numeral as the
   benefit cards, not with the lime chip the "get started" steps use. The chip
   reads as a stage marker in a sequence you follow; these five are a set you
   apply, and the design distinguishes them that way. */
.step--tight .step__no {
  font-family: var(--display);
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--accent);
  background: none;
  padding: 0;
  border-radius: 0;
  margin: 0;
}
.step--tight .step__title { font-size: 19px; margin-bottom: 8px; }

/* Two columns of cards on the ink ground. The card is a wrapping flex row of
   three children — head, tag, body — so the pair and its tag share the first
   line and the prose takes a full row beneath, without the template having to
   nest anything. */
.asset {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  padding: 26px 26px 28px;
}
.asset__head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
}
.asset__sym {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.asset__name { font-size: 14px; color: var(--fg-faint); }
.asset__tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent-line);
  padding: 5px 9px;
  border-radius: var(--radius-btn);
  white-space: nowrap;
  flex: none;
  margin: 0;
}
.asset__body { flex: 1 0 100%; margin-top: 6px; }

/* The assets list is the one stack that runs two-up. */
.section--sand .stack-cells {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.asset__body { font-size: 15px; line-height: 1.6; color: var(--fg-body); margin: 0; }

.banner-cta {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--lime);
  border-radius: 22px;
  padding: 26px 32px;
}
.banner-cta__text {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--lime-on);
  margin: 0;
}
/* The banner is lime whatever ground it sits on, so its button and link are
   pinned to the ink pair rather than inheriting the section's accent — violet
   on lime is the one combination in this palette that fails to carry. */
.banner-cta .btn {
  padding: 14px 26px;
  white-space: nowrap;
  background: var(--k-ink);
  color: var(--k-ink-fg);
}
.banner-cta .btn:hover { background: var(--violet); color: var(--violet-on); }

.center-cta { margin-top: 40px; text-align: center; }

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */

.testimonials { overflow: hidden; }
.testimonials__head {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 92px var(--gutter) 44px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.marquee { padding-bottom: 52px; }
.marquee__track {
  display: flex;
  gap: 24px;
  width: max-content;
  padding: 0 var(--gutter);
}
.marquee__track[data-cloned="true"] { animation: tscroll 70s linear infinite; }
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

@keyframes tscroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.quote {
  margin: 0;
  width: 392px;
  flex: none;
  background: var(--cell);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.quote__text {
  margin: 0;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.012em;
  color: var(--k-fg-2);
}
.quote__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--rule);
  padding-top: 20px;
}
.quote__avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--teal-tint-2);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  flex: none;
}
.quote__name { font-size: 14px; font-weight: 500; }
.quote__role { font-size: 13px; color: var(--fg-faint); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq {
  background: var(--cell);
  border: 1px solid var(--rule);
  border-radius: 20px;
  overflow: hidden;
}
.faq__q {
  display: flex;
  gap: 20px;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  padding: 22px 26px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.faq__mark { font-family: var(--mono); font-size: 16px; color: var(--accent); line-height: 1; flex: none; }
.faq__a { display: none; }
.faq__q[aria-expanded="true"] + .faq__a { display: block; }
.faq__a p {
  font-size: 16px;
  line-height: 1.68;
  color: var(--fg-muted);
  margin: 0;
  padding: 0 60px 24px 26px;
  max-width: 46em;
}

/* --------------------------------------------------------------------------
   Closing CTA panel
   -------------------------------------------------------------------------- */

.cta-panel {
  background: var(--cell-tint);
  border: 1px solid var(--k-line-4);
  border-radius: var(--radius);
  padding: 30px;
}
/* Not a kicker despite the name: in the closing panel this line is the
   panel's title, so it takes the heading treatment, not the mono all-caps
   one the kickers elsewhere use. */
.cta-panel__kicker {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--fg);
  margin: 0 0 4px;
}
.cta-panel__sub { font-size: 14px; color: var(--k-muted-3); margin: 0 0 24px; }

/* --------------------------------------------------------------------------
   About page
   -------------------------------------------------------------------------- */

.about__body { padding: 92px var(--gutter) 108px; }
.value { padding: 28px 26px; }
.value h3 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  color: var(--fg);
}
.value p { font-size: 15px; line-height: 1.65; color: var(--fg-muted); margin: 0; }

.placeholder-box {
  border: 1px dashed var(--rule-input);
  background: var(--k-bg-alt);
  border-radius: var(--radius);
  padding: 60px 24px;
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-faintest);
}

/* --------------------------------------------------------------------------
   Login page
   -------------------------------------------------------------------------- */

/* The sticky header and the ticker strip beneath it both sit above this
   split, so the viewport allowance has to cover the pair. */
/* Two panels rather than two half-screens: the design insets them from the
   page edge and rounds them, so neither runs to the viewport edge. */
.login {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 40px var(--gutter) 96px;
  align-items: stretch;
}
.login__form {
  background: var(--ground);
  color: var(--fg);
  border: 1px solid var(--k-line);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 32px;
}
.login__inner { width: 100%; max-width: 380px; }
.login__title {
  font-family: var(--serif);
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 0 0 8px;
}
.login__sub { font-size: 15px; color: var(--fg-muted); margin: 0 0 34px; }
.login__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
}
.login__check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fg-muted); }
.login__foot { font-size: 14px; color: var(--fg-muted); margin: 26px 0 0; text-align: center; }
.login__aside {
  display: flex;
  align-items: center;
  padding: 64px 56px;
  background: var(--ground);
  color: var(--fg);
  border-radius: var(--radius-lg);
}
.login__aside-inner { max-width: 30em; }
.login__aside h2 {
  font-family: var(--serif);
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 0 0 20px;
  color: var(--d-fg-hi);
}
.login__aside p { font-size: 16px; line-height: 1.65; color: var(--d-muted); margin: 0 0 30px; }
.security-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Pill chips on the ink panel, per the design. Each sits on the raised ink
   cell colour, so the chip reads without needing a dash to mark where an item
   starts. */
.security-list li {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.35;
  color: var(--fg-body);
  background: var(--cell);
  padding: 10px 14px;
  border-radius: var(--radius-btn);
}

/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */

.contact__body { padding: 92px var(--gutter) 108px; }
.contact-details { display: flex; flex-direction: column; gap: 26px; margin: 0; }
.contact-details dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 7px;
}
.contact-details dd { font-size: 16px; margin: 0; }
.contact-form {
  background: var(--cell);
  border: 1px solid var(--rule);
  border-radius: 28px;
  padding: 38px;
}

/* --------------------------------------------------------------------------
   Legal pages
   -------------------------------------------------------------------------- */

.legal__body { padding: 92px var(--gutter) 108px; }
.legal__title {
  font-family: var(--serif);
  font-size: 52px;
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin: 0 0 14px;
}
.legal__meta { font-family: var(--mono); font-size: 12px; color: var(--fg-faintest); margin: 0 0 52px; }
.legal-section { margin-bottom: 36px; }
.legal-section h2 {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.legal-section p { font-size: 16px; line-height: 1.75; color: var(--fg-muted); margin: 0; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  color: var(--k-ink-body);
  background: var(--k-ink);
  border-radius: var(--radius-lg);
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px;
}
.footer__cols {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 56px var(--gutter) 40px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 44px;
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
  color: var(--k-ink-fg);
}
.footer__brand:hover { color: var(--k-ink-fg); }
.footer__mark {
  width: 28px; height: 28px;
  border-radius: 9px;
  background: var(--k-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.footer__mark::after {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 3px solid var(--violet);
}

.footer__name {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--k-ink-fg);
}
.footer__name em { font-style: normal; color: var(--lime); }
.footer__blurb { font-size: 14px; line-height: 1.65; margin: 0; max-width: 26em; }
.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__heading {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--d-muted-3);
  margin-bottom: 3px;
}
.footer__col a { font-size: 14px; color: var(--d-muted); }
.footer__col a:hover { color: var(--d-fg); }
.footer__legal { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter) 48px; }
.footer__disclaimer {
  font-size: 12px;
  line-height: 1.65;
  color: var(--d-muted-3);
  margin: 0 0 20px;
  border-top: 1px solid var(--d-line);
  padding-top: 26px;
}
.footer__copy { font-family: var(--mono); font-size: 11px; color: var(--d-muted-4); }

/* The footer is an inset panel, so it needs breathing room on three sides
   that a full-bleed band did not. */
.page > .footer { margin: 0 var(--gutter) var(--gutter); max-width: calc(var(--wrap) - 0px); }

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.notfound { padding: 120px var(--gutter); text-align: center; }
.notfound__code {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}
.notfound .lede { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Breakpoints follow the design canvas: 1180px collapses the two-column
   splits, 980px steps the card grids down, 720px is the phone layout.

   The heading sizes are NOT restated here. They are `clamp()` in the type
   scale, so a fixed size at a breakpoint would override the fluid curve and
   reintroduce the jump the clamp exists to remove. */

@media (max-width: 1180px) {
  .split--hero,
  .split--markets,
  .split--steps,
  .split--derisk,
  .split--faq,
  .split--cta,
  .split--contact {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .sticky-col { position: static; }
  /* Centred rather than left-aligned: at one column a 452px form hugging the
     left edge of a full-width section reads as a layout error. */
  .split--hero .form-card,
  .split--cta .cta-panel { max-width: 560px; width: 100%; margin: 0 auto; }
}

@media (max-width: 980px) {
  .grid-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The asset rows lose their fixed symbol/profile columns and stack. */
  .asset { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .asset__tag { order: 3; }
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 32px; }
  .login { grid-template-columns: 1fr; }
  .login__aside { padding: 48px 32px; }
}

@media (max-width: 720px) {
  :root { --gutter: 20px; }

  .nav-toggle { display: block; }
  .header__inner { gap: 16px; }
  .nav {
    display: none;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    background: var(--k-bg);
    border-bottom: 1px solid var(--k-line);
    padding: 8px var(--gutter) 20px;
  }
  .nav[data-open="true"] { display: flex; }
  .nav__link {
    padding: 14px 0;
    border-bottom: 1px solid var(--k-line);
    border-radius: var(--radius-btn);
    font-size: 16px;
  }
  /* The pill hover would look like a selected state on a stacked list. */
  .nav__link:hover, .nav__link[aria-current="page"] { background: none; }
  .nav .btn { margin-top: 16px; }

  .legal__title { font-size: 34px; }
  .login__title { font-size: 32px; }
  .lede { font-size: 17px; }
  .lede--lg { font-size: 18px; }
  .banner-cta__text { font-size: 19px; }
  .quote__text { font-size: 16px; }

  .hero__body { padding: 56px var(--gutter); }
  .section__body { padding-top: 56px; padding-bottom: 56px; }
  .about__body, .contact__body, .legal__body { padding: 56px var(--gutter) 72px; }
  .testimonials__head { padding: 56px var(--gutter) 32px; }
  .notfound { padding: 72px var(--gutter); }

  .grid-cells { grid-template-columns: minmax(0, 1fr); }
  .stat-cards { grid-template-columns: minmax(0, 1fr); }
  .footer__cols { grid-template-columns: 1fr; }

  .field-row { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
  .field-row .field { margin-bottom: 16px; }

  .form-card__head { padding: 20px 20px 18px; }
  .form-card__body { padding: 22px 20px 24px; }
  .cta-panel { padding: 24px 20px; }
  .contact-form { padding: 24px 20px; }

  /* Volume and profile are the two columns a phone can afford to lose: the
     pair, the price and the 24h move are what the table is for. */
  .market-row, .market-row--head {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 0.9fr);
    padding-left: 16px;
    padding-right: 16px;
  }
  .market-row > :nth-child(n+4), .market-row--head > :nth-child(n+4) { display: none; }
  .market-row__name { display: none; }
  .market-table__foot { padding-left: 16px; padding-right: 16px; }

  .quote { width: 300px; padding: 26px 22px; }
  .faq__q { padding: 20px; }
  .faq__a p { padding: 0 20px 20px; }
  .banner-cta { flex-direction: column; align-items: flex-start; }
  .banner-cta .btn { width: 100%; }
  .step { padding: 28px 22px 30px; }
  .step--tight { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 22px; }
  .step--tight .step__no { padding-top: 0; }
  .asset { padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker__track, .marquee__track { animation: none; }
  .kicker--badge::before { animation: none; }
  .marquee { overflow-x: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

@media print {
  .header, .footer, .ticker, .marquee, .form-card, .cta-panel { display: none; }
}

/* --------------------------------------------------------------------------
   Country + phone fields

   The country select used to be a 92px column beside the number, showing the
   dial code alone ("+27") with the country name hidden in an aria-label. That
   is unusable for a sighted visitor — nobody knows their own dial code — and
   it broke type-ahead, since the option text began with "+". It is now a
   full-width field of its own, labelled, listing "South Africa +27".
   -------------------------------------------------------------------------- */

.field__select {
  /* Leave room for the native dropdown arrow at every width. */
  padding-right: 32px;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* The option list is painted by the OS, not the page, so it does not inherit
   the section context. Set both halves explicitly or a dark-ground select
   renders light text on a light list in some browsers. */
.field__select option { background: var(--c-cell); color: var(--c-fg); }
.form-dark .field__select option { background: var(--d-panel); color: var(--d-fg); }

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */

.breadcrumb { margin: 0 0 24px; }
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faintest);
}
.breadcrumb li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--rule);
}
.breadcrumb a { color: var(--fg-faint); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb [aria-current="page"] { color: var(--fg); }

/* --------------------------------------------------------------------------
   Long-form content
   -------------------------------------------------------------------------- */

.prose { margin-bottom: 48px; }
.prose:last-child { margin-bottom: 0; }
.prose p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--fg-muted);
  margin: 0 0 18px;
  max-width: 40em;
}
.prose p:last-child { margin-bottom: 0; }
.prose .h-sub { margin-top: 0; }

.prose-list {
  margin: 0 0 32px;
  padding-left: 22px;
  max-width: 40em;
}
.prose-list li {
  font-size: 16px;
  line-height: 1.75;
  color: var(--fg-muted);
  margin-bottom: 10px;
  padding-left: 4px;
}
.prose-list li::marker { color: var(--accent); }

/* Inline links inside body copy need to read as links, not as decoration. */
.prose a,
.prose-list a,
.body-copy a,
.step__body a,
.value p a,
.form-note a,
.banner-cta__text a {
  color: var(--lime-on);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.prose a:hover,
.prose-list a:hover,
.body-copy a:hover,
.step__body a:hover,
.value p a:hover,
.banner-cta__text a:hover { color: var(--violet-hi); }

.login .breadcrumb { margin-bottom: 20px; }

/* --------------------------------------------------------------------------
   Footer language links

   Plain anchors, not a <select> — they work with JavaScript disabled and give
   every locale a crawlable inbound link.
   -------------------------------------------------------------------------- */

.lang-links {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter) 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
}
.lang-links__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--d-muted-3);
}
.lang-links__list { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.lang-links__link {
  font-size: 14px;
  color: var(--d-muted);
  /* 44px minimum touch target, extended without visual bulk. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: var(--radius-btn);
}
.lang-links__link:hover { color: var(--d-fg); background: var(--d-panel); }
.lang-links__link--current {
  color: var(--d-fg);
  background: var(--d-panel);
  cursor: default;
}

/* --------------------------------------------------------------------------
   Mobile conversion fixes

   iOS zooms the viewport whenever a focused input is under 16px and never
   zooms back out, which on a four-field form means the visitor fights the
   layout at exactly the moment they are converting.
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .field__input,
  .field__select,
  .field__textarea {
    font-size: 16px;
    min-height: 48px;
  }

  /* Every interactive control clears the 44x44 guideline. */
  .nav-toggle { padding: 12px 13px; min-width: 44px; min-height: 44px; }
  .faq__q { padding-top: 20px; padding-bottom: 20px; min-height: 56px; }
  .btn { min-height: 48px; }
  .login__check input[type="checkbox"] { width: 20px; height: 20px; }
}

/* A register CTA inside the first viewport on a phone. The header button sits
   inside the collapsed nav, so on mobile there was no visible call to action
   above the fold at all. */
.hero-cta-mobile { display: none; }

@media (max-width: 720px) {
  .hero-cta-mobile { display: block; margin: 0 0 28px; }
  .hero-cta-mobile .btn { width: 100%; }
  .split--hero { gap: 32px; }
  .lang-links { padding-bottom: 4px; }
}

/* --------------------------------------------------------------------------
   Cookie consent

   Revealed by site.js only when no choice has been recorded. Both buttons are
   real buttons of equal weight — a prominent "Accept" beside a hidden or
   greyed-out "Decline" is a dark pattern, and consent obtained that way is not
   freely given.
   -------------------------------------------------------------------------- */

/* A compact card in the bottom-left, not a full-width bar — it should sit
   beside the page rather than barricade it. */
.consent {
  position: fixed;
  left: var(--gutter);
  bottom: var(--gutter);
  z-index: 60;
  width: 380px;
  max-width: calc(100vw - (var(--gutter) * 2));
  padding: 20px 22px 18px;
  background: var(--d-panel);
  border: 1px solid var(--d-line-3);
  color: var(--d-fg);
  box-shadow: 0 12px 32px rgba(21, 18, 58, 0.22);
}
.consent[hidden] { display: none; }

.consent__close {
  position: absolute;
  top: 8px;
  right: 8px;
  /* 32px box around a 12px glyph — small on the page, still a real target. */
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 999px;
  color: var(--d-muted-3);
  cursor: pointer;
  transition: color 120ms ease;
}
.consent__close:hover { color: var(--d-fg); }

.consent__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--d-muted);
  margin: 0 24px 16px 0; /* clears the close button */
}
.consent__text a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.consent__text a:hover { color: var(--gold-hi); }

.consent__actions { display: flex; gap: 10px; }
.consent__actions .btn { flex: 1; }

/* Decline carries the same size and weight as Accept — a prominent Accept
   beside a faint Decline is a dark pattern, and consent collected that way is
   not freely given. */
.consent__decline {
  background: transparent;
  color: var(--d-fg);
  border: 1px solid var(--d-line-3);
}
.consent__decline:hover { background: transparent; color: var(--gold); border-color: var(--gold); }

@media (max-width: 720px) {
  .consent {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   Company identity (footer)

   Legal name, registered office, company number and regulatory status. This is
   an <address> element, so it is deliberately not italicised.
   -------------------------------------------------------------------------- */

.company {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--d-muted);
  border-top: 1px solid var(--d-line);
  padding-top: 24px;
  margin-bottom: 18px;
}
.company__name { font-weight: 500; color: var(--d-fg); }

/* The disclaimer sits directly below and already has its own rule; drop its
   duplicate border so the two blocks read as one legal footer. */
.company + .footer__disclaimer { border-top: 0; padding-top: 0; }

/* --------------------------------------------------------------------------
   Mobile hardening

   Four classes of phone problem the breakpoints above do not cover: a stray
   wide element scrolling the whole page sideways, the notch and home
   indicator on modern iPhones, tap targets in the footer, and the 360-400px
   screens that are still a large share of Android traffic.
   -------------------------------------------------------------------------- */

/* A single over-wide child — a long unbroken string, a table, a marquee mid
   animation — otherwise scrolls the entire document sideways and the visitor
   has no way to tell which element did it.

   `clip`, not `hidden`. `overflow: hidden` makes the element a scroll
   container, which would break `position: sticky` on .header; `clip` does not
   create one, so the header keeps sticking to the viewport. */
html {
  overflow-x: clip;
}

/* The default translucent-blue tap flash reads as a rendering fault on a dark
   ground. Suppressed here and replaced by the :active states below, so taps
   still acknowledge themselves. */
a, button, [role="button"], summary, label, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
}

/* Removes the ~300ms click delay older mobile engines hold for a possible
   double-tap zoom. Only on controls — the page itself stays pinch-zoomable,
   which `user-scalable=no` would have taken away. */
a, button, [role="button"], .btn, summary {
  touch-action: manipulation;
}

/* Touch has no hover, so a tap on a primary control would otherwise give no
   feedback at all between press and page change. */
@media (hover: none) {
  .btn:active { opacity: 0.82; }
  .nav__link:active,
  .footer__col a:active,
  .lang-links__link:active { color: var(--d-fg); }
}

/* Long words in the translated locales — German compounds especially — set
   the minimum content width of a card and force the sideways scroll that
   `overflow-x: clip` would then silently hide. Break them instead. */
h1, h2, h3, .lede, .quote__text, .faq__q, .btn {
  overflow-wrap: break-word;
}

/* The fixed cookie card sits in the home-indicator strip on a notched iPhone,
   where the system gesture area swallows taps on the buttons. */
@supports (padding: max(0px)) {
  .consent {
    bottom: max(var(--gutter), env(safe-area-inset-bottom));
    left: max(var(--gutter), env(safe-area-inset-left));
  }
}

/* Landscape on a notched phone puts the gutter under the sensor housing. */
@media (orientation: landscape) {
  @supports (padding: max(0px)) {
    .header__inner,
    .hero__body,
    .section__body,
    .footer__cols,
    .footer__legal {
      padding-left: max(var(--gutter), env(safe-area-inset-left));
      padding-right: max(var(--gutter), env(safe-area-inset-right));
    }
  }
}

@media (max-width: 980px) {
  /* The footer navigation columns were the last place on the site with tap
     targets under the 44px guideline — 14px links on a 12px gap. Padding the
     link and closing the gap keeps the footer the same height while making
     each target reachable. */
  .footer__col { gap: 2px; }
  .footer__col a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (max-width: 720px) {
  @supports (padding: max(0px)) {
    .consent {
      bottom: max(12px, env(safe-area-inset-bottom));
      left: max(12px, env(safe-area-inset-left));
      right: max(12px, env(safe-area-inset-right));
    }
  }
}

/* --------------------------------------------------------------------------
   Small phones (<= 420px)

   iPhone SE and the 360px Android baseline. The 720px layout fits but runs
   out of horizontal room in three places: the market table, the testimonial
   cards, and any button carrying a long translated label.
   -------------------------------------------------------------------------- */

@media (max-width: 420px) {
  :root { --gutter: 16px; }

  .hero__body { padding-top: 44px; padding-bottom: 44px; }
  .section__body { padding-top: 44px; padding-bottom: 44px; }
  .about__body, .contact__body, .legal__body { padding-top: 44px; padding-bottom: 56px; }
  .testimonials__head { padding-top: 44px; padding-bottom: 24px; }
  .notfound { padding-top: 56px; padding-bottom: 56px; }

  /* Was a fixed 300px card in a horizontal scroller. On a 360px screen that
     left no visible edge of the next quote, so the strip did not read as
     scrollable. */
  .quote {
    width: min(288px, calc(100vw - 72px));
    padding: 22px 18px;
  }

  /* Three columns in ~328px of content width. The numbers are monospaced, so
     a point off each keeps the 24h change on one line at BTC's price. */
  .market-row, .market-row--head {
    padding-left: 12px;
    padding-right: 12px;
  }
  .market-row__sym { font-size: 14px; }
  .market-row__num { font-size: 13px; }
  .market-table__foot { padding-left: 12px; padding-right: 12px; }

  /* The form is the conversion path; it gets the room back that the reduced
     gutter frees up rather than spending it on card padding. */
  .form-card__head { padding: 18px 16px 16px; }
  .form-card__body { padding: 20px 16px 22px; }
  .cta-panel { padding: 22px 16px; }
  .contact-form { padding: 22px 16px; }

  /* "Kostenlos registrieren" and "Zarejestruj się za darmo" overflow a
     24px-padded button at this width. */
  .btn { padding-left: 18px; padding-right: 18px; }

  .step { padding: 24px 18px 26px; }
  .step--tight { padding: 18px; }
  .asset { padding: 18px; }
  .faq__q { padding-left: 16px; padding-right: 16px; }
  .faq__a p { padding-left: 16px; padding-right: 16px; }
  .breadcrumb ol { font-size: 10px; gap: 6px; }
  .consent { padding: 16px 18px 14px; }
}

/* --------------------------------------------------------------------------
   /ok — the post-registration completion page

   Its job is to be read, not admired: the visitor has just handed over their
   details and is about to be phoned. So the hierarchy is heavier than the rest
   of the site — a large title, a rule, then a short shouted line — and the
   measure is kept narrow enough to actually read.
   -------------------------------------------------------------------------- */

.ok__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(34px, 6vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0 0 28px;
  max-width: 18ch;
}

.ok__rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0 0 32px;
}

/* The "You MUST read this now" line. An h2 for document order, sized between
   the title and the body so it reads as an instruction rather than a section. */
.ok__shout {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(22px, 3.2vw, 28px);
  line-height: 1.25;
  color: var(--accent);
  margin: 0 0 24px;
}

.ok__section { margin-top: 44px; }
.ok__section .h-sub { margin-bottom: 16px; }

.ok__cta { margin: 40px 0 28px; }

/* The design highlights a clause mid-sentence. A yellow marker pen belongs on
   white paper; on this ground it becomes a tinted panel in the accent, which
   carries the same emphasis without fighting the palette. `color` is set
   explicitly because the UA default for <mark> is black on yellow. */
.ok mark,
mark {
  background: var(--teal-tint);
  color: var(--accent);
  padding: 0.1em 0.3em;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

@media (max-width: 720px) {
  .ok__title { max-width: none; }
  .ok__section { margin-top: 36px; }
  .ok__cta { margin: 32px 0 24px; }
  /* The button is the whole point of the page on a phone. */
  .ok__cta .btn { display: block; width: 100%; }
}

/* --------------------------------------------------------------------------
   Legal pages: notice, contents, clause lists

   The terms and privacy pages carry template wording that has not been through
   legal review. That fact used to sit in the same grey mono line as the
   version number, where it read as metadata. It is the most important sentence
   on the page, so it is now a bordered callout above the contents — a reader
   deciding whether to trust the clauses should not have to notice it.
   -------------------------------------------------------------------------- */

.legal-notice {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  background: var(--cell);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  margin: 0 0 44px;
}
.legal-notice p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--fg-muted);
}
.legal-notice a { color: var(--accent); text-decoration: underline; }

/* Nineteen clauses is past the length where a reader can scan headings, so the
   page gets a contents list. Numbered because the clauses are numbered by
   position — the anchors are #s1..#sN and survive rewording and translation. */
.legal-toc {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 22px 0 24px;
  margin: 0 0 48px;
}
.legal-toc__title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin: 0 0 14px;
}
.legal-toc ol {
  margin: 0;
  padding: 0 0 0 1.2em;
  columns: 2;
  column-gap: 40px;
}
.legal-toc li {
  margin-bottom: 7px;
  font-size: 14px;
  line-height: 1.5;
  break-inside: avoid;
}
.legal-toc a { color: var(--fg-muted); text-decoration: none; }
.legal-toc a:hover { color: var(--accent); text-decoration: underline; }

/* Anchored clauses: give the scroll target room to clear the sticky header. */
.legal-section { scroll-margin-top: calc(var(--header-h) + 20px); }

.legal-list {
  margin: 14px 0 0;
  padding-left: 1.25em;
  list-style: disc;
}
.legal-list li {
  font-size: 16px;
  line-height: 1.75;
  color: var(--fg-muted);
  margin-bottom: 9px;
}
.legal-list li strong { color: var(--fg); font-weight: 600; }
.legal-list a { color: var(--accent); text-decoration: underline; }
.legal-section p a { color: var(--accent); text-decoration: underline; }

@media (max-width: 720px) {
  /* Two columns of clause titles is unreadable on a phone. */
  .legal-toc ol { columns: 1; }
  .legal-notice { padding: 16px 16px; }
  .legal-list li, .legal-section p { font-size: 15px; }
}