/* Common Story — shared styling for every page on the site.
   Kept in one external file rather than inline in each page so that a strict
   Content-Security-Policy can forbid inline styles. */

/* Typefaces are served from this site, not from a font CDN. The privacy notice
   says in three languages that the site loads nothing from other companies,
   and the CSP is default-src 'none'; linking fonts.googleapis.com would make
   the first untrue and be blocked by the second.

   Google publishes each family already sliced by script, so these are its
   latin and latin-ext files with its own unicode-range: Romanian and Hungarian
   diacritics are in latin-ext, and Cyrillic, Greek and Vietnamese never load.
   Fraunces is variable, so one file covers every weight it is used at.
   All three are OFL; the licences sit beside them in /fonts/. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/fonts/fraunces-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:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/fonts/fraunces-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:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/atkinson-hyperlegible-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:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/atkinson-hyperlegible-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:'Atkinson Hyperlegible';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/atkinson-hyperlegible-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}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/atkinson-hyperlegible-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:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/jetbrains-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:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/jetbrains-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}

:root {
  /* The accent keeps the name --clay through the refresh so every rule that
     already used it, on the manual and the privacy notice, rethemes with it. */
  --clay: #B8462A;
  --clay-deep: #8F3520;
  --ground: #F5EFE3;
  --paper: #FFFDF8;
  --ink: #1E2621;
  --ink-soft: #3A443E;
  --ink-faint: #56605A;
  --rule: #D9CFBD;
  --moss: #3F5E3A;      /* eyebrows and the "above the line" bars */
  --sand: #E9E1D0;      /* the one tinted panel */
  --apricot: #F2C9A8;   /* links on the dark sections */
  --sans: 'Atkinson Hyperlegible', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: 'Fraunces', "Iowan Old Style", Charter, Georgia, "Times New Roman", serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --clay: #E0714E;
    --clay-deep: #F2C9A8;
    --ground: #161A17;
    --paper: #1E2621;
    --ink: #EDE7DA;
    --ink-soft: #C3BDB0;
    --ink-faint: #949B92;
    --rule: #33403A;
    --moss: #9DBE92;
    --sand: #232B26;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
}

.wrap { max-width: 40rem; margin: 0 auto; padding: 0 1.4rem; }

h1, h2, h3 { font-family: var(--serif); }
.label, .lang, nav.toc, table, .foot, .stamp, .backlink { font-family: var(--sans); }

/* The way back, at the top of every page except the homepage. Every page did
   already link home, but from the footer or the middle of a sentence, which is
   no help to someone who has just landed and wants out. */
.backlink { font-size: .8rem; margin: 0 0 1.1rem; }
.backlink a {
  color: var(--ink-faint);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.backlink a:hover, .backlink a:focus-visible {
  color: var(--clay);
  border-bottom-color: var(--clay);
}

/* On the three link-landing pages the brand name itself is the way home, so
   the anchor has to disappear into the label it sits in. */
.label a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.label a:hover, .label a:focus-visible { border-bottom-color: currentColor; }

/* The mark, set beside the label it belongs to.
   Drawn as a mask rather than an <img>, because an image loads the SVG as its
   own document where currentColor has nothing to inherit from — it fell back to
   black and the mark rendered as a dark blob on the dark palette. As a mask the
   shape comes from the file and the colour from this rule, so one file is clay
   on the light palette and the lighter clay on the dark one.
   It is decorative: the wordmark beside it already says the name. */
.label { display: flex; align-items: center; gap: .6rem; }
.label a { display: flex; align-items: center; gap: .6rem; }
.mark {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: block;
  background-color: currentColor;
  -webkit-mask: url("/logo.svg") center / contain no-repeat;
  mask: url("/logo.svg") center / contain no-repeat;
}

h1 {
  font-size: clamp(2rem, 6.5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin: 0 0 .5rem;
  text-wrap: balance;
}

h2 {
  font-size: 1.22rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  margin: 2.5rem 0 .4rem;
  text-wrap: balance;
}

h3 { font-size: 1rem; font-weight: 650; margin: 1.6rem 0 .3rem; }

p { margin: 0 0 1rem; }
a { color: var(--clay); }
ul { padding-left: 1.1rem; }
li { margin-bottom: .5rem; }
code { font-family: var(--mono); font-size: .9em; }

header.masthead {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 3.2rem 0 2.4rem;
}

.label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 600;
  color: var(--clay);
  margin: 0 0 .6rem;
}

.lede { font-size: 1.12rem; color: var(--ink-soft); max-width: 34rem; margin: .8rem 0 0; }
.stamp { font-size: .78rem; color: var(--ink-faint); margin-top: 1rem; }

.lang { font-size: .8rem; margin: 1.4rem 0 0; color: var(--ink-faint); }
.lang a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--rule); }
.lang a:hover, .lang a:focus-visible { border-bottom-color: var(--clay); color: var(--clay); }
.lang strong { color: var(--ink); font-weight: 600; }

main { padding: 2.3rem 0 4rem; }

.note {
  background: var(--paper);
  border-left: 3px solid var(--clay);
  padding: 1rem 1.2rem;
  margin: 1.6rem 0;
}
.note p { margin: 0; font-size: .96rem; }

.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 1.1rem 1.3rem;
  margin: 0 0 1.6rem;
}
.card p { margin: 0; font-size: .96rem; }

.tbl-scroll { overflow-x: auto; margin: 1rem 0 1.6rem; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th {
  text-align: left;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-soft);
  font-weight: 600;
  padding: 0 1rem .5rem 0;
  border-bottom: 1px solid var(--ink);
  white-space: nowrap;
}
td { padding: .6rem 1rem .6rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }

footer.colophon {
  border-top: 1px solid var(--rule);
  padding: 1.4rem 0 3rem;
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--ink-faint);
}
footer.colophon a { color: var(--ink-soft); }

/* Centred single-message pages: the fallbacks for someone without the app. */
body.centred { display: flex; min-height: 100vh; align-items: center; }
body.centred .wrap { max-width: 30rem; padding-top: 2.5rem; padding-bottom: 2.5rem; width: 100%; }
body.centred h1 { font-size: 1.85rem; overflow-wrap: anywhere; }
.sub { color: var(--ink-soft); margin: 0 0 1.6rem; font-size: 1rem; }
.foot { font-size: .82rem; color: var(--ink-faint); margin-top: 2rem; }

/* Manual-specific */
.part-head { border-top: 2px solid var(--ink); padding-top: .7rem; margin: 2.6rem 0 1.3rem; }
.part-head h2 { margin: 0; }
nav.toc { background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; padding: 1.2rem 1.4rem; margin: 0 0 2.4rem; }
nav.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 1.6rem; }
nav.toc li { counter-increment: toc; }
nav.toc a { display: block; padding: .32rem 0; font-size: .87rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; }
nav.toc a::before { content: counter(toc, decimal-leading-zero); color: var(--clay); font-variant-numeric: tabular-nums; margin-right: .6rem; font-size: .78rem; }
nav.toc a:hover, nav.toc a:focus-visible { border-bottom-color: var(--clay); }

.step { display: grid; grid-template-columns: 2.1rem 1fr; gap: 0 .9rem; margin: 0 0 1.4rem; }
.step-n { font-family: var(--sans); font-variant-numeric: tabular-nums; font-size: .8rem; font-weight: 650; color: var(--clay); border-top: 2px solid var(--clay); padding-top: .28rem; }
.step > div > p:last-child { margin-bottom: 0; }

.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 4px; margin: 0 0 1.5rem; overflow: hidden; }
.pair > div { background: var(--paper); padding: 1.1rem 1.2rem; }
.pair h3 { color: var(--clay); font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 .5rem; }
.pair p { font-size: .94rem; margin-bottom: .5rem; }
.pair p:last-child { margin-bottom: 0; }

.critical { background: #F6DBCE; border-left-color: var(--clay-deep); }
@media (prefers-color-scheme: dark) { .critical { background: #3A2118; } }

dl.faq { margin: 0; }
dl.faq dt { font-family: var(--sans); font-weight: 650; font-size: .97rem; margin: 1.2rem 0 .3rem; }
dl.faq dd { margin: 0; color: var(--ink-soft); font-size: .97rem; }

figure.shot { margin: 0 0 1.7rem; }
.shot-row { display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap; }
/* A phone screenshot. The dashed edge stays visible as a frame, and doubles as
   a placeholder if the image has not been uploaded yet. */
.frame { border: 1.5px dashed var(--clay); border-radius: 18px; background: var(--paper); max-width: 210px; padding: 6px; min-height: 4rem; }
.frame img { width: 100%; height: auto; display: block; border-radius: 13px; }
.frame span { font-family: var(--sans); font-size: .74rem; line-height: 1.45; color: var(--ink-faint); }
.frame-cap { font-family: var(--sans); font-size: .82rem; color: var(--ink-soft); flex: 1; min-width: 200px; }
.frame-cap b { color: var(--clay); font-weight: 650; display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: .3rem; }


/* ---------------------------------------------------------------------------
   Getting the app
   --------------------------------------------------------------------------- */
.get {
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper);
  padding: 1.4rem 1.4rem 1.2rem;
  margin: 0 0 1.6rem;
}
.get-row { display: flex; gap: 1.6rem; align-items: flex-start; flex-wrap: wrap; }
.get-main { flex: 1; min-width: 210px; }

.btn {
  display: inline-block;
  background: var(--clay);
  color: var(--paper);
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 650;
  text-decoration: none;
  padding: .7rem 1.2rem;
  border-radius: 4px;
  border: 1px solid var(--clay);
}
.btn:hover, .btn:focus-visible { background: var(--clay-deep); border-color: var(--clay-deep); }
/* In dark mode --clay-deep is the pale tint, so the label has to flip with it. */
@media (prefers-color-scheme: dark) {
  .btn:hover, .btn:focus-visible { color: var(--ground); }
}
:root[data-theme="light"] .btn:hover, :root[data-theme="light"] .btn:focus-visible { color: var(--paper); }
:root[data-theme="dark"] .btn:hover, :root[data-theme="dark"] .btn:focus-visible { color: var(--ground); }

.btn-note { font-family: var(--sans); font-size: .78rem; color: var(--ink-faint); margin: .6rem 0 0; }

/* The QR keeps a white field whatever the page theme is doing. A code rendered
   in the dark palette looks tidier and scans worse, and this one exists to be
   photographed off someone else's screen. */
/* figure carries a 40px default side margin in browsers, which indents the code
   on a phone and opens a gap beside the text on a wide screen. */
.qr { text-align: center; flex: 0 0 auto; margin: 0 auto; }
.qr img {
  display: block;
  width: 132px;
  height: 132px;
  background: #FFFFFF;
  border-radius: 4px;
  border: 1px solid var(--rule);
}
.qr figcaption {
  font-family: var(--sans);
  font-size: .72rem;
  color: var(--ink-faint);
  margin: .5rem 0 0;
  max-width: 132px;
}

/* Release details for anyone who wants to check what they downloaded. */
.release { margin: 1.2rem 0 0; border-top: 1px solid var(--rule); padding-top: .9rem; }
.release dl { margin: 0; font-size: .8rem; font-family: var(--sans); }
.release dt { color: var(--ink-faint); margin-top: .55rem; }
.release dd {
  margin: .15rem 0 0;
  color: var(--ink-soft);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .74rem;
  word-break: break-all;
}

/* ============================================================ homepage
   The refreshed homepage only. The other language homepages still use the
   classes above and pick up the new palette through the tokens, so nothing
   here may redefine anything they rely on. Every rule is prefixed hp-. */

.hp { --pad: clamp(20px, 5vw, 96px); }
.hp-wrap { max-width: 1440px; margin-inline: auto; padding-inline: var(--pad); }

.hp .eyebrow {
  font-family: var(--sans);
  font-size: clamp(13px, 1.1vw, 14px);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--moss);
  margin: 0;
}
.hp h2 { font-size: clamp(34px, 3.6vw, 52px); line-height: 1.08; letter-spacing: -.01em; font-weight: 600; margin: 0; }
.hp h3 { font-size: clamp(21px, 1.9vw, 28px); line-height: 1.2; font-weight: 600; margin: 0; }
.hp p { margin: 0; }
.hp .lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.6; color: var(--ink-soft); }
.hp .txt { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; color: var(--ink-soft); }
.hp .fine { font-size: 15px; color: var(--ink-faint); }
.hp .mono { font-family: var(--mono); }

/* A strip for whoever arrived by tapping a payment link without the app. */
.hp-banner { background: var(--ink); color: var(--ground); font-size: 15px; padding: 12px var(--pad); text-align: center; }
.hp-banner a { color: var(--apricot); font-weight: 700; }

.hp-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px; }
.hp-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; border: 0; }
.hp-brand span { font-family: var(--serif); font-size: clamp(20px, 2vw, 24px); font-weight: 700; color: var(--ink); }
.hp-brand .mark { width: 34px; height: 34px; color: var(--clay); }
.hp-menu { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px); font-size: 17px; }
.hp-menu a { text-decoration: none; border-bottom: 1px solid transparent; }
.hp-menu a:hover, .hp-menu a:focus-visible { border-bottom-color: currentColor; }

/* Pill buttons. The dark one is the quiet action, the accent one the loud. */
.hp-pill, .hp-pill-dark, .hp-pill-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 26px; border-radius: 999px; text-decoration: none;
  font-size: 17px; font-weight: 700; border: 1.5px solid transparent;
}
.hp-pill { background: var(--clay); color: #FFFDF8; }
.hp-pill:hover, .hp-pill:focus-visible { background: var(--clay-deep); color: #FFFDF8; }
.hp-pill-dark { background: var(--ink); color: var(--ground); padding: 12px 22px; font-size: 16px; }
.hp-pill-dark:hover, .hp-pill-dark:focus-visible { background: var(--clay); color: #FFFDF8; }
.hp-pill-ghost { border-color: var(--ink); color: var(--ink); }
.hp-pill-ghost:hover, .hp-pill-ghost:focus-visible { border-color: var(--clay); color: var(--clay); }
.hp-pill svg, .hp-pill-dark svg { flex: 0 0 auto; }

.hp-hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 5vw, 72px); align-items: center; padding-block: clamp(36px, 5vw, 72px) clamp(64px, 8vw, 120px); }
.hp-hero h1 { font-size: clamp(40px, 5.3vw, 76px); line-height: 1.02; font-weight: 600; letter-spacing: -.02em; margin: 0; }
.hp-hero-col { display: flex; flex-direction: column; gap: clamp(20px, 2.2vw, 32px); }
.hp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

/* The sample ledger. Presentational, so it is a list of plain rows rather than
   a table: there is no data here to read down a column. */
.hp-ledger {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 20px;
  padding: clamp(22px, 2.6vw, 36px); max-width: 520px; width: 100%;
  box-shadow: 0 30px 60px -30px rgba(30, 38, 33, .35);
}
@media (min-width: 901px) { .hp-ledger { transform: rotate(-1.5deg); } }
.hp-ledger-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.hp-ledger-head b { font-family: var(--serif); font-size: clamp(20px, 1.9vw, 26px); font-weight: 600; }
.hp-ledger ul { list-style: none; margin: 0; padding: 0; }
.hp-ledger li { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px dashed var(--rule); }
.hp-who-is { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #1E2621; }
.hp-ledger-what { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.hp-ledger-what span { font-size: clamp(15px, 1.3vw, 18px); }
.hp-ledger-what small { font-size: 14px; color: var(--ink-faint); }
.hp-ledger-amt { font-family: var(--serif); font-size: clamp(20px, 1.8vw, 24px); font-weight: 600; }
.hp-ledger-sum { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; }
.hp-ledger-sum b { font-family: var(--serif); font-size: clamp(24px, 2.2vw, 30px); font-weight: 700; color: var(--clay); }

.hp-band { background: var(--paper); border-block: 1px solid var(--rule); padding-block: clamp(56px, 8vw, 120px); }
.hp-split { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 4vw, 80px); align-items: end; }
.hp-say { font-family: var(--serif); font-size: clamp(26px, 3vw, 44px); line-height: 1.22; font-weight: 400; margin: 0; }

.hp-sec { padding-block: clamp(56px, 8vw, 120px); display: flex; flex-direction: column; gap: clamp(28px, 4vw, 64px); }
.hp-head { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.hp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); }
.hp-card { background: var(--paper); border: 1px solid var(--rule); border-radius: 20px; padding: clamp(24px, 2.8vw, 40px); display: flex; flex-direction: column; gap: 16px; }
.hp-card b { font-family: var(--serif); font-size: clamp(40px, 4.4vw, 64px); font-weight: 700; line-height: 1; color: var(--clay); }

.hp-panel { background: var(--sand); border-radius: 28px; padding: clamp(28px, 5vw, 88px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 80px); align-items: center; }

/* The zero-sum picture: bars above and below one hard line. Every figure is
   also written out underneath, so nothing depends on reading the bars. */
.hp-chart { background: var(--paper); border-radius: 20px; padding: clamp(22px, 2.6vw, 40px); }
.hp-chart-up, .hp-chart-dn { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); height: clamp(100px, 11vw, 160px); }
.hp-chart-up { align-items: end; }
.hp-chart-dn { align-items: start; }
.hp-chart-up i { background: var(--moss); border-radius: 10px 10px 0 0; display: block; }
.hp-chart-dn i { background: var(--clay); border-radius: 0 0 10px 10px; display: block; }
.hp-chart-zero { height: 3px; background: var(--ink); }
.hp-chart-key { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); padding-top: 14px; font-size: 14px; text-align: center; }
.hp-chart-note { text-align: center; font-size: 14px; color: var(--ink-faint); margin: 16px 0 0; }

.hp-four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.hp-four > div { border-top: 3px solid var(--ink); padding-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.hp-four h3 { font-size: clamp(20px, 1.7vw, 24px); }

.hp-left { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 4vw, 64px); }
.hp-left-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 40px) clamp(16px, 2vw, 32px); }
.hp-left-grid > div { display: flex; flex-direction: column; gap: 8px; }
.hp-left-grid h3 { font-size: clamp(19px, 1.6vw, 22px); }
.hp-left-grid svg { color: var(--moss); }

/* The dark section keeps its own colours whatever the scheme: it is a block of
   ink by design, not a surface that follows the theme. */
.hp-get { background: #1E2621; color: #F5EFE3; padding-block: clamp(56px, 8vw, 120px); }
.hp-get .eyebrow { color: #B9CDA9; }
.hp-get h2 { color: #F5EFE3; }
.hp-get .lead, .hp-get .txt { color: #D8D2C4; }
.hp-get .fine { color: #B8B2A4; }
.hp-get a { color: #F2C9A8; }
.hp-get .hp-pill { color: #FFFDF8; }
.hp-get-grid { display: grid; grid-template-columns: 7fr 4fr; gap: clamp(28px, 4vw, 72px); align-items: center; }
.hp-get-col { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 28px); }
.hp-qr { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hp-qr img { width: min(240px, 60vw); height: auto; background: #FFFDF8; border-radius: 20px; padding: 16px; }

.hp-verify { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(24px, 4vw, 64px); padding-block: clamp(48px, 6vw, 96px); }
.hp-verify-col { display: flex; flex-direction: column; gap: 20px; }
.hp-fp { display: flex; flex-direction: column; gap: 8px; }
.hp-fp b { font-size: 15px; }
.hp-fp span { font-family: var(--mono); font-size: clamp(12px, 1vw, 14px); background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; padding: 13px 15px; word-break: break-all; }

.hp-foot { border-top: 1px solid var(--rule); padding-block: clamp(32px, 4vw, 56px); display: flex; flex-direction: column; gap: 20px; }
.hp-foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: center; }
.hp-foot-top b { font-family: var(--serif); font-size: 22px; font-weight: 700; }
.hp-foot-links { display: flex; flex-wrap: wrap; gap: 24px; font-size: 16px; }
.hp-langs { display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 16px; color: var(--ink-faint); }
.hp-langs strong { color: var(--ink); }

@media (max-width: 1100px) {
  .hp-cards, .hp-four, .hp-left-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-split, .hp-left, .hp-get-grid, .hp-verify { grid-template-columns: 1fr; }
  .hp-split { align-items: start; }
}
@media (max-width: 900px) {
  .hp-hero, .hp-panel { grid-template-columns: 1fr; }
  .hp-cta .hp-pill, .hp-cta .hp-pill-ghost { flex: 1 1 100%; }
}
@media (max-width: 620px) {
  .hp-cards, .hp-four, .hp-left-grid { grid-template-columns: 1fr; }
  .hp-menu { gap: 14px; font-size: 16px; }
}

/* Underlines appear on hover, as elsewhere on the site; keep the focus ring
   visible for anyone moving through with a keyboard. */
.hp a:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; border-radius: 4px; }

/* The values that would naturally have been inline attributes. They cannot be:
   the CSP is style-src 'self' with no 'unsafe-inline', which is the whole
   reason this stylesheet exists as a separate file. Written as nth-child rules
   so the markup carries no presentation at all. */
.hp-ledger li:nth-child(1) .hp-who-is { background: #F2C9A8; }
.hp-ledger li:nth-child(2) .hp-who-is { background: #C9D8BE; }
.hp-ledger li:nth-child(3) .hp-who-is { background: #E3D3EC; }
.hp-ledger li:nth-child(4) .hp-who-is { background: #CFE0E8; }

.hp-chart-up i:nth-child(1) { height: 80%; }
.hp-chart-up i:nth-child(2) { height: 30%; }
.hp-chart-dn i:nth-child(3) { height: 40%; }
.hp-chart-dn i:nth-child(4) { height: 70%; }

.hp-pad-b { padding-bottom: clamp(56px, 8vw, 120px); }
.hp-no-top { padding-top: 0; }
.hp-measure { max-width: 760px; }

/* .btn-note is the hook tools/stamp-release.py finds the version by, so the
   class is kept rather than renamed. Its inherited colour is meant for a pale
   page, and was nearly unreadable on the dark panel. */
.hp-get .btn-note { color: #B8B2A4; font-size: 15px; margin: 0; }

/* On a narrow screen the row of links plus the pill is wider than the phone,
   which made the whole page scroll sideways. The design puts them behind a
   hamburger; wrapping onto a second row does the same job without asking for
   JavaScript on an otherwise static page, and keeps every link reachable. */
@media (max-width: 720px) {
  .hp-nav { flex-wrap: wrap; row-gap: 12px; }
  .hp-menu { width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: 12px 18px; }
  .hp-menu .hp-pill-dark { margin-left: auto; }
}

/* Longer languages than English push the ledger's header apart: Romanian
   wrapped "saptamana aceasta" across two lines mid-phrase. Let the row break
   between the two instead of inside the label. */
.hp-ledger-head { flex-wrap: wrap; row-gap: 4px; }
.hp-ledger-head .fine { white-space: nowrap; }

/* Manual and privacy notice chrome. The bodies keep their own document design;
   only the way in and the way out are shared with the homepage. */
.docbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 1.1rem; }
.docbar .backlink { margin: 0; }
.docbar .hp-pill-dark { font-size: 15px; padding: 10px 18px; }

.docget { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin: 0 0 2rem; font-size: 1rem; color: var(--ink-soft); }
.docget .hp-pill { font-size: 16px; padding: 14px 24px; }