:root {
    --navy: #1F2348;
    --navy-bg: radial-gradient(100% 100% at bottom right, #260133, #1F2348);
    --blue-bg: radial-gradient(100% 100% at bottom right, #265DD7, #0582CA);
    --green: #21BCA5;
    /* Status tokens, lifted from nimiq.blog so the two sites agree on what
       proven vs qualified looks like. */
    --ok: #21BCA5;   --ok-bg: rgba(33,188,165,.13);
    --warn: #FC8702; --warn-bg: rgba(252,135,2,.13);
    --ease: cubic-bezier(0.25, 0, 0, 1);
  }

  * { box-sizing: border-box; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  }

  body {
    margin: 0;
    background: #F8F8F8;
    color: var(--navy);
    font-family: 'Mulish', 'Muli', system-ui, sans-serif !important;
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2 { text-wrap: balance; margin: 0; letter-spacing: 0; font-weight: 700; }
  h1 { font-size: clamp(34px, 6.5vw, 56px); line-height: 1.1; }
  h2 { font-size: clamp(24px, 3.6vw, 32px); line-height: 1.2; }
  p { margin: 0; text-wrap: pretty; }

  .wrap { max-width: 800px; margin: 0 auto; padding: 0 24px; }

  /* header, the nimiq.blog lockup pattern */
  .site-head { padding: 0 0 40px; text-align: center; }
  .lockup { display: inline-flex; align-items: center; gap: 16px; }
  .lockup svg { width: 72px; height: auto; display: block; }
  .lockup .word { font-size: 40px; font-weight: 700; letter-spacing: .08em; color: var(--navy); }

  /* hero, the nimiq.com centred pattern */
  /* One centred group: logo, nav, headline, CTA. The nav sits above the headline, it is
     not pinned to the viewport's top edge. Pinning it was the mistake, because it forced
     the leftover height to open as a gap between the nav and the headline. */
  .hero {
    background: #fff; color: var(--navy);
    /* 100dvh. svh fits on load then lets the next section show through once the toolbars
       retract; vh covers but extends BEHIND the browser's bottom bar, so on a phone about
       280px of the box is not visible and centring lands lopsided, wide at the top and
       tight at the bottom. dvh tracks the height actually on screen, so the content centres
       in what you can see and the hero still covers when the toolbars move.
       vh is the fallback for anything without dvh. */
    min-height: 100vh;
    min-height: 100dvh;
    padding: 48px 0;
    display: flex; flex-direction: column; justify-content: center;
  }
  .hero .inner {
    text-align: center; padding: 0;
    display: flex; flex-direction: column; align-items: center;
  }
  .hero h1 { margin: 0 auto 20px; max-width: 19ch; }
  .hero .lede {
    font-size: clamp(17px, 2.1vw, 20px); color: rgba(31,35,72,.6);
    max-width: 46ch; margin: 0 auto 32px;
  }
  .cta {
    display: inline-flex; align-items: center; gap: 8px; justify-content: center;
    background-image: var(--blue-bg); color: #fff;
    font-weight: 700; font-size: 17px; text-decoration: none;
    padding: 16px 40px; border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  }
  .cta:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,.2); }
  .cta:active { transform: translateY(1px); box-shadow: 0 3px 5px rgba(0,0,0,.2); }
  .cta:focus-visible { outline: 2px solid #0CA6FE; outline-offset: 3px; }
  /* Constrained and balanced: unbroken it runs the full column at 390px and
     breaks wherever it lands, which reads as edge-to-edge. */
  .cta-note {
    margin: 16px auto 0; max-width: 34ch; text-wrap: balance;
    font-size: 14px; color: rgba(31,35,72,.5);
  }

  /* screens */
  .screens { padding: 80px 0; background: #FAFAFA; }
  .shots { display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; margin-top: 48px; }
  .shot { width: 264px; margin: 0; }
  .shot img {
    width: 100%; height: auto; display: block;
    border-radius: 12px; box-shadow: 0 8px 56px rgba(0,0,0,.111);
  }
  .shot figcaption { margin-top: 16px; font-size: 15px; color: rgba(31,35,72,.5); text-align: center; }
  .shot .frame {
    aspect-ratio: 390 / 844; border-radius: 12px; background: #EDEDED;
    display: flex; align-items: center; justify-content: center;
    color: rgba(31,35,72,.4); font-size: 14px; text-align: center; padding: 24px;
  }

  /* proof */
  .proof { background-image: var(--navy-bg); color: #fff; padding: 80px 0; text-align: center; }
  .proof h2 { margin-bottom: 16px; }
  .proof > .wrap > p { color: rgba(255,255,255,.6); max-width: 52ch; margin: 0 auto; }

  .ledger { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .ledger li {
    background: #fff; border-radius: 8px; padding: 24px;
    display: grid; gap: 8px 24px; text-align: left;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: 'amt when blk' 'route route route' 'note note note';
    align-items: baseline;
  }
  @media (max-width: 620px) {
    .ledger li { grid-template-columns: 1fr auto; grid-template-areas: 'amt when' 'route route' 'blk blk' 'note note'; }
  }
  .ledger .amt { grid-area: amt; font-size: 20px; font-weight: 700; color: var(--navy); text-decoration: none; }
  .ledger .when { grid-area: when; font-size: 14px; color: rgba(31,35,72,.45); }
  .ledger .blk { grid-area: blk; font-family: 'Fira Mono', monospace; font-size: 13px; color: #0071C3; text-decoration: none; white-space: nowrap; }
  .ledger .route { grid-area: route; font-family: 'Fira Mono', monospace; font-size: 13px; color: rgba(31,35,72,.6); }
  .ledger .route a { color: #0071C3; text-decoration: none; font-weight: 700; }
  .ledger .note { grid-area: note; font-size: 15px; color: rgba(31,35,72,.6); }
  .ledger a:hover { color: var(--navy); }
  .ledger a:focus-visible { outline: 2px solid #0CA6FE; outline-offset: 3px; }

  footer { background-image: var(--navy-bg); color: rgba(255,255,255,.6); padding: 48px 0; font-size: 14px; text-align: center; }

  /* ---------- shared page chrome added for how/ and test/ ---------- */
  /* White strip. It used to be #1a1d3d on the navy hero, which on a phone read as a
     slightly-off rectangle rather than a notice. */
  /* "Public alpha" as a grey section label, the shape nimiq.com uses for THE APPS
     and TRUSTED BY. It lives INSIDE the header group rather than as a strip above
     it: as a sibling it sat on the body's #F8F8F8 while everything below it is
     white, which drew a seam across the top of the page, and its gap stacked on
     top of the hero's own centring slack. Inside the group it just spaces off the
     lockup. Grey keeps the page's one saturated element the CTA. */
  .alpha {
    margin: 0 0 24px; padding: 0;
    color: #6E707E; text-align: center;
    font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  }

  .nav { display: flex; gap: 24px; justify-content: center; margin-top: 24px; font-size: 15px; }

  .nav a { color: rgba(31,35,72,.6); text-decoration: none; font-weight: 700; }
  .nav a:hover { color: var(--navy); }
  .nav a[aria-current] { color: var(--navy); }
  .nav a:focus-visible { outline: 2px solid #0CA6FE; outline-offset: 3px; }

  /* article pages */
  .page-head { background: #fff; color: var(--navy); padding: 32px 0 48px; text-align: center; }
  .page-head h1 { font-size: clamp(30px, 5vw, 44px); margin: 32px auto 16px; max-width: 20ch; }
  .page-head .sub { color: rgba(31,35,72,.6); max-width: 52ch; margin: 0 auto; }

  article { padding: 48px 0 96px; background: #FAFAFA; }
  article h2 { margin: 48px 0 16px; }
  article h2:first-child { margin-top: 0; }
  article h3 { font-size: 19px; font-weight: 700; margin: 32px 0 8px; }
  article p { max-width: 640px; margin-bottom: 16px; color: rgba(31,35,72,.75); }
  article ol, article ul { max-width: 640px; margin: 0 0 16px; padding-left: 24px; color: rgba(31,35,72,.75); }
  article li { margin-bottom: 8px; }
  article strong { color: var(--navy); }
  article a { color: var(--navy); font-weight: 700; text-decoration: none; }
  article a:hover { color: #0582CA; }
  article a:focus-visible { outline: 2px solid #0CA6FE; outline-offset: 3px; }

  .callout { background: #fff; border-radius: 8px; padding: 32px 24px; margin: 32px 0; max-width: 640px; }
  .callout p:last-child { margin-bottom: 0; }

  /* Roadmap on a light band with white cards, the nimiq.kids pattern. It was navy
     before, which put three dark sections in a row. */
  .band { background: #FAFAFA; padding: 80px 0; }
  .band-white { background: #fff; padding: 80px 0; }
  .eyebrow {
    font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    color: #6E707E; margin: 0 0 12px;
  }
  .roadmap { list-style: none; padding: 0; margin: 32px 0 0; display: flex; flex-direction: column; gap: 24px; }
  .roadmap li { background: #fff; border: 1px solid rgba(31,35,72,.12); border-radius: 8px; padding: 24px; text-align: left; }
  /* Status chips, the pattern nimiq.blog ships (chip ok / chip warn). The
     background is a ~12% tint and the TEXT stays navy; only the icon takes the
     colour. That is what keeps this a status alert, the one pill nimiq-ui
     allows, rather than the coloured eyebrow rule 17 bans. A row with no
     modifier is the neutral "not built yet" state. */
  .chip {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    color: var(--navy); font-size: 13px; font-weight: 700; line-height: 1.3;
    padding: 5px 12px; border-radius: 500px;
    background: rgba(31,35,72,.06);
  }
  .chip svg { width: 12px; height: 12px; flex: 0 0 auto; }
  .chip.ok { background: var(--ok-bg); }
  .chip.ok svg { color: var(--ok); }
  .chip.warn { background: var(--warn-bg); }
  .chip.warn svg { color: var(--warn); }
  .roadmap .chip { margin-bottom: 12px; }
  .roadmap h3 { font-size: 19px; font-weight: 700; margin: 0 0 8px; color: var(--navy); }
  .roadmap p { color: rgba(31,35,72,.6); font-size: 16px; margin: 0; max-width: 62ch; }

  /* Steps, the condensed version of /test/ that lives on the home page */
  .steps-list { list-style: none; counter-reset: st; padding: 0; margin: 32px 0 0;
    display: flex; flex-direction: column; gap: 20px; text-align: left; }
  .steps-list li { counter-increment: st; display: grid; grid-template-columns: 32px 1fr; gap: 16px; align-items: start; }
  .steps-list li::before {
    content: counter(st); font-family: 'Fira Mono', monospace; font-size: 13px; font-weight: 600;
    color: var(--navy); border: 1px solid rgba(31,35,72,.12); border-radius: 6px;
    height: 32px; display: flex; align-items: center; justify-content: center; background: #fff;
  }
  .steps-list b { display: block; color: var(--navy); }
  .steps-list span { color: rgba(31,35,72,.6); font-size: 16px; }


  /* every link on the page gets a brand colour; an unstyled one renders browser blue */
  footer a { color: #fff; font-weight: 700; text-decoration: none; }
  footer a:hover { color: var(--green); }
  footer a:focus-visible { outline: 2px solid #0CA6FE; outline-offset: 3px; }
  .alpha a { color: inherit; font-weight: 700; text-decoration: none; }
  .hero .nav a { color: rgba(31,35,72,.6); }
  .hero .nav a:hover { color: var(--navy); }
  .page-head a { color: inherit; }

  /* ---- Added for nimiq.tech: the download page and the ledger footnote ---- */

  /* Provenance line under the on-chain ledger. The four transfers were sent
     between iPhones; the Android build has not reproduced them yet, and the page
     must not let a reader assume otherwise. */

  /* The download block. A white 1px-bordered card, the same card shape the
     roadmap uses, so the page has one card idiom rather than two. */
  .dl {
    background: #fff; border: 1px solid rgba(31,35,72,.12); border-radius: 8px;
    padding: 32px 24px; margin: 0 0 48px; text-align: center;
  }
  .dl-plat {
    font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    color: #6E707E; margin: 0 0 24px;
  }
  .dl-meta { margin-top: 16px; font-size: 14px; color: rgba(31,35,72,.5); }

  /* Secondary CTA: same shape, no brand gradient, so the Android button stays the
     one obvious action on the page. */
  .cta-quiet {
    background-image: none; background-color: #fff; color: var(--navy);
    border: 1px solid rgba(31,35,72,.2); box-shadow: none;
  }
  .cta-quiet:hover { box-shadow: 0 8px 24px rgba(0,0,0,.1); }

  /* Hashes. Fira Mono per the brand rule that every number is monospaced, and
     wrapping is forced because a 64-char digest must stay readable at 390px. */
  .hash {
    background: var(--navy); color: #fff; border-radius: 6px;
    padding: 12px 16px; margin: 0 0 8px; max-width: 640px;
    overflow-x: auto; font-size: 13px;
  }
  /* pre-wrap, not pre: at 390px the apksigner line is wider than the box, and a
     clipped command reads as broken. Wrapping inserts no characters, so copying
     still yields the original single line. */
  .hash code { font-family: 'Fira Mono', ui-monospace, monospace; white-space: pre-wrap; }
  .hash-val {
    font-family: 'Fira Mono', ui-monospace, monospace;
    font-size: 13px; line-height: 1.7; word-break: break-all;
    color: rgba(31,35,72,.75); max-width: 640px; margin-bottom: 24px;
  }
  .hash-val code { font-family: inherit; }

  /* Permission table. Scrolls inside itself rather than pushing the page wide. */
  .perms {
    width: 100%; max-width: 640px; border-collapse: collapse;
    margin: 24px 0 16px; font-size: 15px; text-align: left;
  }
  .perms th, .perms td {
    border-bottom: 1px solid rgba(31,35,72,.12);
    padding: 12px 12px 12px 0; vertical-align: top;
  }
  .perms th { font-weight: 700; color: var(--navy); font-size: 13px;
    letter-spacing: 1px; text-transform: uppercase; }
  .perms td { color: rgba(31,35,72,.75); }
  .perms td:first-child { width: 42%; }
  .perms code {
    font-family: 'Fira Mono', ui-monospace, monospace; font-size: 12.5px;
    color: var(--navy); word-break: break-word;
  }
  .perms-note { font-size: 15px; color: rgba(31,35,72,.6); max-width: 640px; }

  @media (max-width: 560px) {
    .perms, .perms tbody, .perms tr, .perms td { display: block; width: 100%; }
    .perms thead { display: none; }
    .perms tr { border-bottom: 1px solid rgba(31,35,72,.12); padding: 12px 0; }
    .perms td { border: 0; padding: 2px 0; }
    .perms td:first-child { width: 100%; }
  }

  /* The before/after pair earns more width than the generic .shot: the whole
     point of it is a small grey status line ("mesh offline / mesh meshed"), and
     at 264px that line is unreadable, which loses the comparison entirely. */
  .shots--pair .shot { width: 330px; max-width: 100%; }
  @media (max-width: 760px) {
    .shots--pair .shot { width: 100%; max-width: 340px; }
  }

  /* Two download buttons side by side. They wrap to a column on narrow screens
     rather than shrinking, because a pill CTA that loses its padding stops
     reading as a button. */
  .cta-row {
    display: flex; gap: 16px; justify-content: center;
    flex-wrap: wrap; align-items: center;
  }
  @media (max-width: 460px) {
    .cta-row { flex-direction: column; }
    .cta-row .cta { width: 100%; max-width: 320px; }
  }

  /* Android and iPhone as two equal cards. iPhone is the constrained one, so it
     gets the quiet button rather than a smaller card: the limitation belongs in
     the copy, not in the layout. */
  .dl-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    margin: 0 0 48px; max-width: 640px;
  }
  .dl-grid .dl { margin: 0; }
  .dl-grid .cta { padding: 16px 24px; font-size: 16px; }
  @media (max-width: 620px) {
    .dl-grid { grid-template-columns: 1fr; }
  }

  /* The hero's "Install on iPhone" jumps here. Without a scroll margin the card
     lands flush against the viewport's top edge, which reads as a broken jump
     rather than a deliberate one. */
  .dl-grid .dl[id] { scroll-margin-top: 24px; }

  /* ---- Support dialog ---------------------------------------------------- */
  /* A real <dialog>, so Escape, focus trapping and inertness come from the
     platform instead of being reimplemented badly. */
  .sup {
    border: 0; border-radius: 12px; padding: 32px 28px 28px;
    width: min(440px, calc(100vw - 32px)); max-width: none;
    background: #fff; color: var(--navy);
    box-shadow: 0 8px 56px rgba(0,0,0,.18);
  }
  .sup::backdrop { background: rgba(31,35,72,.6); }   /* navy, never black: rule 11 */
  .sup:focus { outline: 0; }
  .sup h2 { font-size: 24px; margin: 0 0 16px; }
  .sup p { margin: 0 0 12px; color: rgba(31,35,72,.75); font-size: 16px; }
  .sup-x {
    position: absolute; top: 14px; right: 14px;
    border: 0; background: none; padding: 6px; cursor: pointer;
    color: rgba(31,35,72,.4); line-height: 0;
  }
  .sup-x:hover { color: var(--navy); }

  /* One row, matching the blog's .lb-form. The field and the button sit side by
     side at every width; stacking them turned the pair into two large ovals. */
  .sup-form { display: flex; align-items: center; gap: 8px; margin-top: 24px; }
  .sup-amt-wrap { position: relative; display: block; flex: 1 1 auto; }
  .sup-amt {
    width: 100%; font: inherit; font-size: 15px; font-weight: 700; color: var(--navy);
    background: var(--page, #f8f8f8); border: 0; border-radius: 500px;
    box-shadow: inset 0 0 0 2px rgba(31,35,72,.1);
    padding: 8px 48px 8px 16px;
  }
  /* ⚠ An input's focus is the inset ring DEEPENING, nothing more. A :focus-visible
     outline here stacks a second ring outside the first and renders as concentric
     ovals. The blog hit this exact bug and its CSS carries the same warning; do
     not "restore the focus ring" on this field. Navy, not light blue, so the
     machinery stays two-colour. */
  .sup-amt:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--navy); }
  .sup-amt.bad { box-shadow: inset 0 0 0 2px #D94432; }
  .sup-unit {
    position: absolute; top: 50%; right: 16px; transform: translateY(-50%);
    font-size: 13px; font-weight: 700; color: #6E707E; pointer-events: none;
  }
  .sup-usd {
    font-size: 13px; font-weight: 700; color: #6E707E;
    white-space: nowrap; align-self: center;
  }
  .sup-usd:empty { display: none; }
  .sup-send {
    flex: none; font: inherit; font-size: 14px; font-weight: 700;
    border: 0; border-radius: 500px; cursor: pointer; white-space: nowrap;
    padding: 9px 18px;
    background-image: var(--blue-bg); color: #fff;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  }
  .sup-send:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.15); }
  .sup-send:active:not(:disabled) { transform: translateY(1px); }
  .sup-send:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
  .sup-send:disabled { opacity: .55; cursor: default; }
  .sup-note { margin: 16px 0 0; font-size: 14px; color: rgba(31,35,72,.5); min-height: 20px; }
  .sup-note:empty { min-height: 0; }

  /* Closing ask at the end of a long read. A plain bold link, not a third pill:
     the page already has one filled CTA and this must not compete with it. */
  .sup-tail {
    margin-top: 48px; padding-top: 24px;
    border-top: 1px solid rgba(31,35,72,.12);
    max-width: 640px;
  }

  /* ⚠ THE hidden ATTRIBUTE LOSES TO A DISPLAY RULE. .sup-amt-wrap carries
     display:block, so [hidden] alone leaves it on screen. The blog's CSS records
     this same bug biting three times. */
  .sup-form [hidden] { display: none !important; }
  /* Step one is a single button and nothing else, so it gets the full width. */
  .sup-form:not(.is-connected) .sup-send { flex: 1 1 auto; padding: 13px 28px; font-size: 16px; }