/* ==========================================================================
   expeer — the midnight instrument, in Expeer's colours.

   This overlay used to rebuild the platform build's landing page one-for-one:
   round 18–24px planes, alternating charcoal and white-smoke bands, 600-weight
   headings, pill buttons. It has been re-cut against a different reference —
   the Linear style guide in brands/expeer/DESIGN (1).md — while keeping every
   colour this brand owns.

   What the reference brings, and what it replaces:

     Darkness as a substrate, not a theme.  One ground (#09090b) with three
     surfaces above it (#0f1011, #161718, #23252a) and no light band anywhere.
     The white-smoke bands are gone: they existed because the platform build
     alternates, and every one of them needed its own accent re-declared to
     stay legible. A band is now a surface change, not a scheme change.

     Geometry instead of shadow.  Hairline borders (#23252a, #383b3f) and a
     1px inset ring do the separating. There are no shadows here and there
     were none before; the difference is that elevation is now stated in one
     token pair rather than implied.

     Three radii and no more.  12px planes, 6px controls, 9999px pills, 4px
     badges. The 18/20/24px vocabulary is gone.

     A low weight band.  400 / 510 / 590, and nothing heavier. Display type is
     tracked to -0.022em, which is not optional at 40px and above.

     One chromatic element per view.  Linear spends that on acid lime; this
     brand spends it on #00B5DD — the gradient's middle stop, the same accent
     it always had. Everything else is grey.

   What is kept from the brand, unchanged in kind:

     The first screen.  The charcoal ground, the radial gradient cycling
     #0039B1 -> #00B5DD -> #00C7B3 on its 20s timer, the drifting particle
     field and the gradient-clipped headline are the thing anyone recognises
     as Expeer. They are here in full. The arrangement under them is new: the
     headline, the sub and the calculator are one centred column, so the one
     control the page exists to get pressed is on the page's axis rather than
     in a right-hand track.

     The instrument below it.  The rate board, the readings, the flow, the
     chips, the tally, the wizard and the order panel are the base's, wearing
     these tokens.

   This is still a deliberate departure from docs/DESIGN.md, which forbids
   ambient decoration and gradients outright, and the departure is still
   bounded to the first screen of a public page. It is argued in
   brands/expeer/DESIGN.md. Do not read it as permission to gradient a button.

   Everything is scoped under body.ex, which the brand's layout override sets
   on every non-admin page. /admin renders without it and keeps the base
   daylight instrument exactly: the operator's tool is not brand surface.

   Raw CSS served after the compiled app.css; unlayered, so it wins over the
   base's @layer rules. The .ex prefix is scoping, not weight. There is no
   `--spacing()` and no `@theme` available in this file — Tailwind never sees
   it — so every figure is written out.

   Content-Security-Policy here is `style-src 'self'; script-src 'self'`.
   No rule may be moved into a style attribute and no behaviour into an
   inline script; both are silently dropped.
   ========================================================================== */

/* Inter, vendored under /static/fonts (SIL OFL, see fonts/README.txt), latin
   and cyrillic: the site serves en, ru and uk and the face has to speak all
   three. It is also the reference's own typeface, so the stand-in it was for
   Borna is now the specified face rather than an approximation of one. */
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  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: "Inter";
  src: url("/static/fonts/inter-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  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: "Inter";
  src: url("/static/fonts/inter-cyrillic.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-cyrillic-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}

/* The gradient's travelling stop. Registered so it can be animated at all: a
   custom property is a string to the animation engine until @property gives
   it a type, and an unregistered one simply jumps between keyframes. Where
   @property is unsupported the initial value stands and the hero keeps a
   static blue glow, which is the same picture without the drift. */
@property --ex-glow {
  syntax: "<color>";
  inherits: false;
  initial-value: #0039b1;
}

/* --------------------------------------------------------------------------
   Tokens. Set on body.ex so they beat the base's :root values inside the page
   while leaving the unbranded admin alone.

   Declared in full rather than leaning on the base's dark block, because that
   block is behind `prefers-color-scheme: dark`. Expeer is dark whatever the
   visitor's OS says, and a half-applied ramp would put the base's *light*
   status colours on a charcoal ground.
   -------------------------------------------------------------------------- */

body.ex {
  color-scheme: dark;

  /* The surface progression, four steps, and the whole of this system's
     elevation vocabulary. The reference names them Void / Carbon / Obsidian /
     Graphite; the first is this brand's own Rich Charcoal (#09090B) rather
     than the reference's #08090a, because it is the colour the guidelines
     name and the two are indistinguishable at any size.

     Measured against the ground: ink 19.9:1, ink-2 13.6:1, ink-3 6.1:1 — and
     19.1 / 13.0 / 5.9 on the card, which is the pairing the base's own notes
     warn is the one that fails first. */
  --color-paper: #09090b;
  --color-surface: #0f1011;
  --color-surface-2: #161718;
  --color-ink: #ffffff;
  --color-ink-2: #d0d6e0;
  --color-ink-3: #8a8f98;

  /* Hairlines. Elevation here is a border and a token change, never a shadow:
     rule is the structural edge, rule-strong the section separator. */
  --color-rule: #23252a;
  --color-rule-strong: #383b3f;
  /* Control boundaries. The reference draws its own at #23252a, which is
     1.3:1 and would fail WCAG 1.4.11 on every field on this site; these sit
     between its Ash and Fog instead and hold 3.9:1 on the ground, 3.8:1 on
     the card and 3.5:1 on the hero card over the brightest part of the
     gradient. A form nobody can find the edges of is not a quiet form. */
  --color-control: #6b6f78;
  --color-control-hover: #8a8f98;

  --color-input: #0e0e11;
  --color-input-sunk: #0b0b0d;

  /* The one chromatic element in the system. The reference spends it on acid
     lime; this brand spends it on the gradient's middle stop — not on either
     end, because the deep stop is unreadable as a small mark on charcoal and
     the far stop sits close enough to --color-ok that a completed exchange
     and the brand accent would be the same colour, which is the one thing the
     base's status doctrine will not have. 8.2:1 for a charcoal label on it. */
  --color-signal: #00b5dd;
  --color-signal-ink: #09090b;
  --color-signal-wash: rgb(0 181 221 / 0.14);

  /* Status keeps the semantic four, lifted for a dark ground. */
  --color-ok: #4ade80;
  --color-ok-wash: rgb(74 222 128 / 0.13);
  --color-warn: #fbbf24;
  --color-warn-wash: rgb(251 191 36 / 0.13);
  --color-bad: #f87171;
  --color-bad-wash: rgb(248 113 113 / 0.14);
  --color-busy: #7dd3fc;
  --color-busy-wash: rgb(125 211 252 / 0.14);

  /* The graph paper, off. Left alone, body.ex takes whichever --grid-line the
     visitor's OS scheme handed :root — a dark line on a charcoal page for a
     light-mode machine, i.e. nothing, and a visible grid for a dark-mode one.
     Two visitors, two pages, and neither of them this one: the reference
     treats darkness as a substrate rather than as a surface with a texture on
     it, and the only place the grid ever read at all was the 32px of ground
     between the header and the hero, where it showed as a stripe. */
  --grid-line: transparent;

  /* Three radii and no more: 12px planes, 6px controls, 9999px pills. The
     4px badge is stated where badges are drawn. This replaces the 18/20/24px
     round vocabulary the overlay carried before, and it is the single largest
     reason this page reads as precision-machined rather than as soft. */
  --radius-plane: 12px;
  --radius-control: 6px;
  --radius-pill: 9999px;
  --radius-badge: 4px;

  /* Elevation, such as it is: a 1px inset ring in the hairline colour. Used
     where a plane needs an edge that does not add to its box. */
  --ex-ring: inset 0 0 0 1px var(--color-rule);

  /* The three stops, named once so the field script can read them off the
     sheet instead of carrying its own copy. */
  --ex-deep: #0039b1;
  --ex-mid: #00b5dd;
  --ex-far: #00c7b3;
  --ex-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* The reference's type ladder in place of the base's. The base ramp is
     sized for an operator surface — 14.4px body, 12.5px labels — and the
     reference reads at 15–16px with a 13px caption. Re-declaring the tokens
     moves every component at once rather than restating a size per block. */
  --text-2xs: 0.6875rem; /* 11 — micro */
  --text-xs: 0.75rem; /* 12 — label */
  --text-sm: 0.8125rem; /* 13 — caption */
  --text-base: 0.9375rem; /* 15 — body */
  --text-lg: 1.0625rem; /* 17 — body large */
  --text-xl: 1.25rem; /* 20 — body emphasis */
  --text-2xl: 1.5rem; /* 24 — heading */
  --text-3xl: 2rem; /* 32 — subheading */

  font-family: "Inter", var(--font-sans);
  /* The alternate glyphs the reference names: single-storey a, the ss03 set
     and the slashed zero. Harmless where the vendored face does not carry
     them — the default forms stand. */
  font-feature-settings:
    "cv01" 1,
    "ss03" 1,
    "zero" 1;
  letter-spacing: -0.011em;
  /* The bleed sections are wider than the viewport by whatever a classic
     scrollbar takes. Clipped rather than hidden: `hidden` would make this the
     scroll container and break `position: sticky` inside it. */
  overflow-x: clip;
}

/* --------------------------------------------------------------------------
   Type: one grotesk voice; mono only where digits have to align.

   The base sets everything structural in --font-mono, which resolves to
   whatever the visitor's OS ships. Expeer is not a monospaced brand — but a
   figure someone is about to check against their wallet still needs tabular
   digits, so the mono stays exactly where it is earning something. The
   reference draws the same line and calls the mono side Berkeley Mono.
   -------------------------------------------------------------------------- */

.ex h1,
.ex h2,
.ex h3,
.ex .section-title,
.ex .brand,
.ex .label,
.ex .xfield-label,
.ex .stat-label,
.ex .flow-meta,
.ex .flow-actor,
.ex .flow-time,
.ex .statement,
.ex .tally dt,
.ex .btn,
.ex button:not([class]),
.ex .nav a,
.ex .footer-group h2,
.ex .badge,
.ex .notice,
.ex .input,
.ex select,
.ex .hint,
.ex .muted,
.ex .lede {
  font-family: "Inter", var(--font-sans);
}

/* The complete figure family, kept in the mono. A rate, an address and a
   reference are read character by character and compared against something
   else on screen; a proportional face makes that harder for no gain. */
.ex .num,
.ex .code,
.ex .pair,
.ex .xfield-amount,
.ex .stat-value,
.ex .deal-amount,
.ex .address,
.ex .tx,
.ex .countdown-clock {
  font-family: var(--font-mono);
}

/* The weight band: 400, 510, 590 and nothing heavier. The reference caps at
   590 deliberately, and a 700 heading is the first thing that makes a system
   built on hairlines and tight tracking read as a different system. Every 600
   this overlay used to set is now 510. */
.ex h1,
.ex h2,
.ex h3 {
  font-weight: 510;
  letter-spacing: -0.018em;
}
.ex h1 {
  letter-spacing: -0.022em;
}
.ex .brand,
.ex strong,
.ex b {
  font-weight: 590;
}

/* The base's micro-label. Kept as a label — tracked, uppercase, small — and
   not promoted to a headline, because what it marks is where a run of content
   starts and not what the page is about.

   The base draws a 16x2px accent tick in front of it, which is the instrument's
   way of marking where a run begins. It goes here: this system marks structure
   with hairlines and spends its one chromatic move on the action, and a blue
   dash in front of every label on every page is that colour spent nine times
   for decoration. The word is the label. */
.ex .section-title {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  font-weight: 510;
  color: var(--color-ink-3);
}
.ex .section-title::before {
  content: none;
}

.ex .lede,
.ex .statement {
  color: var(--color-ink-2);
}

/* --------------------------------------------------------------------------
   Full-bleed bands

   The layout puts every page inside `main.wrap`, a 70rem column. Three things
   here are wider than that column by design: the hero, the surface bands, and
   the about page's screenshot. This is the one measurement that breaks out of
   it, and body.ex's overflow-x: clip is what makes it safe.
   -------------------------------------------------------------------------- */

.ex .ex-bleed {
  margin-inline: calc(50% - 50vw);
}

/* 72rem, not the base's 70rem. One measure for the whole brand: the header, the
   page column, the hero, the bands and the footer all land on the same two
   edges, and a section that bleeds is the only thing that ever leaves them.
   Stated on `.wrap` rather than on `main` alone, or the logotype and the nav
   would sit two rem inside the hero heading below them. */
.ex .wrap {
  max-inline-size: 72rem;
}
.ex .ex-hero-inner,
.ex .ex-band-inner {
  max-inline-size: 72rem;
  margin-inline: auto;
  padding-inline: 24px;
}

/* --------------------------------------------------------------------------
   The AML strip

   Every deposit here is screened, and a reader who finds that out after
   sending has found out too late. One of the three places the gradient is
   allowed, and the only one that carries type on it — at the one width where
   a gradient is not decorating a control.
   -------------------------------------------------------------------------- */

.ex .ex-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-block-end: 24px;
  padding: 10px 16px;
  border-radius: var(--radius-control);
  background-image: linear-gradient(to right, var(--ex-far), var(--ex-mid));
  color: #09090b;
  font-size: var(--text-sm);
  line-height: 1.5;
}
.ex .ex-banner .icon {
  flex: none;
  inline-size: 16px;
  block-size: 16px;
}
.ex .ex-banner a {
  color: #09090b;
  font-weight: 590;
  text-decoration-color: rgb(9 9 11 / 0.5);
}
.ex .ex-banner a:hover {
  color: #09090b;
  text-decoration-color: #09090b;
}

/* --------------------------------------------------------------------------
   The hero — the reproduced part

   One centred column: headline, description, calculator, standing note. The
   split arrangement this overlay carried before put the calculator in a
   right-hand track, which meant the page's one control was off the axis
   everything else on the page is composed around. Centred, the first thing
   read and the thing to be pressed are the same column.
   -------------------------------------------------------------------------- */

/* The hero starts where the header ends. `main.wrap` pads 32px off the top of
   every page, which for a full-bleed first screen is a strip of bare ground
   under a translucent sticky header — the one place the page's ground is ever
   seen on its own, and it read as a seam. Only on the page that opens with the
   hero; every other page keeps the base's top padding. */
.ex main.wrap:has(> .ex-hero:first-child) {
  padding-block-start: 0;
}

.ex .ex-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 72px;
  /* The platform's own gradient, coordinates and all: a very large radial
     anchored off the top edge, charcoal for the first half of its run so the
     colour only arrives at the corners. */
  background-image: radial-gradient(
    125% 125% at 50% 0%,
    #09090b 50%,
    var(--ex-glow)
  );
  animation: ex-glow 20s ease-in-out infinite alternate;
}
@keyframes ex-glow {
  0% {
    --ex-glow: #0039b1;
  }
  50% {
    --ex-glow: #00b5dd;
  }
  100% {
    --ex-glow: #00c7b3;
  }
}

/* There is no floor fade. One was tried — 160px of transparent-to-ground over
   the gradient's brightest corner, on the reasoning that the hero met the next
   section on a hard horizontal cut. It read as a black bar laid across the
   bottom of the screen, which is a worse seam than the one it was hiding, and
   it dimmed the particles exactly where they are densest. The gradient runs to
   the hero's own edge and the section below it changes ground; that is the
   separation. */

/* The field. It is drawn by expeer.js and does not exist without it: with the
   script blocked this is an empty canvas of zero consequence, and the hero is
   the gradient alone — which is still the hero. */
.ex .ex-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  inline-size: 100%;
  block-size: 100%;
  display: block;
  pointer-events: none;
}

.ex .ex-hero-inner {
  position: relative;
  z-index: 1;
  display: block;
  text-align: start;
}

/* The clipped headline. `color: transparent` behind a support test, because
   without background-clip the same rule is an invisible h1 — the page's first
   and largest failure mode.

   Left, and small. The reference's own first screen sets a two-line headline
   at around 40px with the description immediately under it at body size, and
   spends the space it saves on the product rather than on the sentence about
   it. The 64–72px display step exists in that system for a page with nothing
   under the fold; this one has a calculator under the fold. */
.ex .ex-display {
  max-inline-size: 22ch;
  margin-block: 0;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.1;
  font-weight: 510;
  letter-spacing: -0.022em;
  text-wrap: balance;
  text-align: start;
  color: var(--color-ink);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .ex .ex-display {
    background-image: linear-gradient(to bottom right, #ffffff, #a1a1aa);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.ex .ex-hero-sub {
  max-inline-size: 46ch;
  margin-block: 12px 0;
  color: var(--color-ink-3);
  font-size: var(--text-base);
  line-height: 1.6;
  letter-spacing: -0.01em;
  text-align: start;
}

/* The calculator. It is the reason the page exists, so it sits above the fold
   and inside the gradient rather than below it — and on the page's centre line,
   under copy that is left where the reference leaves it. That is the same
   composition the reference's own hero uses: the sentence in the top-left
   corner, the thing being sold centred underneath it.

   The full measure, not a card's. It was capped at 30rem on the reasoning that
   a form is not read as one instrument when it is stretched — but this form is
   the page's subject rather than a step in a flow, and at 30rem inside a 72rem
   hero it read as a widget dropped into an empty screen. Full width it is the
   product shot the reference puts here. */
.ex .ex-hero-card {
  inline-size: 100%;
  margin-block-start: 48px;
  text-align: start;
}
.ex .ex-hero-card #wizard {
  max-inline-size: none;
  margin: 0;
}
/* Legible over a moving gradient without being lifted off it. 0.94 rather
   than a lighter wash because the control borders inside have to keep their
   3:1 against whatever the gradient is doing behind them; at 0.86 the brightest
   part of the cycle took them to 2.6:1. */
.ex .ex-hero-card .panel {
  background: rgb(15 16 17 / 0.94);
  backdrop-filter: blur(8px);
}
.ex .ex-hero-card .notice {
  margin-block-end: 16px;
}

/* The standing note. What applies to every exchange — screened, floating,
   confirmation-bound — stated under the calculator rather than folded into a
   disclosure. It is the terms the rate is quoted under, and a reader who has
   to open something to find that out can also close the page without having.

   It reads as an aside and not as more hero copy: caption size, in the muted
   floor, on the same centre line. There is nothing to click, so there is
   nothing here that hovers, focuses or transitions. */
.ex .ex-terms {
  margin-block-start: 32px;
  max-inline-size: 64ch;
  text-align: start;
}
.ex .ex-terms-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  font-weight: 510;
}
.ex .ex-terms-title .icon {
  flex: none;
  inline-size: 15px;
  block-size: 15px;
  color: var(--color-signal);
}
.ex .ex-terms p + p {
  margin-block: 8px 0;
  color: var(--color-ink-3);
  font-size: var(--text-sm);
  line-height: 1.6;
}

@media (max-width: 48rem) {
  .ex .ex-hero {
    padding-block: 32px 48px;
  }
  .ex .ex-display {
    max-inline-size: 22ch;
  }
  .ex .ex-hero-sub {
    font-size: var(--text-base);
  }
  .ex .ex-hero-card {
    margin-block-start: 28px;
  }
}

/* --------------------------------------------------------------------------
   The live rates

   The board itself is the base's and stays the base's — rows, hairlines,
   polling and all. What this section adds is two things: position, pulled up
   against the hero instead of sitting a section gap down among the marketing
   bands where the page's one piece of moving data was reading as another
   claim; and a dot that says the feed is being read.

   The dot is the one thing on this page that moves because something is true,
   which is what the base's motion doctrine asks of anything that moves at all.
   It stops when the board goes stale, because a heartbeat over figures nobody
   has refreshed is the animation lying.
   -------------------------------------------------------------------------- */

.ex main > .ex-rates {
  margin-block-start: 40px;
}
.ex .ex-rates-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ex .ex-live {
  flex: none;
  inline-size: 7px;
  block-size: 7px;
  border-radius: var(--radius-pill);
  background: var(--color-signal);
  animation: ex-pulse 2.4s ease-in-out infinite;
}
@keyframes ex-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
.ex .ex-rates:has(.board[data-stale]) .ex-live {
  background: var(--color-warn);
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .ex .ex-live {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Rhythm

   The reference states one figure for this and it is 96px. The base separates
   top-level blocks by --gap-block, which is 32px — the right figure for an
   operator surface where the blocks are tables and panels with their own
   headings inside them, and not the right one here, where a section is
   announced by a 40px heading and 32px puts that heading closer to the
   previous section's last line than to its own content.

   Two rules, and they are the whole system: a fixed gap between top-level
   blocks, and a fixed gap between a section's heading block and its content.
   Nothing sets its own margins on top of these; if a block needs more air it
   is because one of these two numbers is wrong.

   Stated on every top-level child rather than on `.section`, because half of
   these pages' blocks are not sections: the process list is a bare `ol.flow`,
   the figures are a `div.stats`, the principles a `div.cards`, the about
   page's lead a `p.statement`.
   -------------------------------------------------------------------------- */

.ex main > * + * {
  margin-block-start: 96px;
}

/* A page heading and what it titles are one block, not two subjects. The 96px
   is the distance between two subjects; stacked on the heading's own bottom
   margin it opens the sign-in page, the legal pages and the dashboard with a
   title and then a void. The introducing line is closer still — it is part of
   the heading. */
.ex main > h1 + * {
  margin-block-start: 40px;
}
.ex main > h1 + .lede {
  margin-block-start: 0;
}

/* The bands set their own ground and butt against their neighbours — see the
   note on .ex-band. Their padding is what separates them, and the block above
   one has to give up its own trailing gap or the ground shows through as a
   bar across the page. */
.ex main > .ex-band {
  margin-block: 0;
}
.ex main > *:has(+ .ex-band) {
  margin-block-end: 0;
}

/* The heading block. Whether a section has an eyebrow, a heading and a sub or
   only a heading, its content starts the same distance below — which is why
   this is stated on the content rather than as a bottom margin on whichever
   element happens to come last. */
.ex .ex-bento,
.ex .ex-claims,
.ex .ex-figures,
.ex .ex-posts,
.ex .ex-channels,
.ex .ex-listings {
  margin-block-start: 48px;
}

@media (max-width: 48rem) {
  .ex main > * + * {
    margin-block-start: 64px;
  }
  .ex main > h1 + .lede {
    margin-block-start: 0;
  }
  .ex .ex-bento,
  .ex .ex-claims,
  .ex .ex-figures,
  .ex .ex-posts,
  .ex .ex-channels,
  .ex .ex-listings {
    margin-block-start: 32px;
  }
}

/* --------------------------------------------------------------------------
   Page heads — every public page that is not the landing page
   -------------------------------------------------------------------------- */

/* Left, like the hero and like every heading under it. A centred page title
   over left-aligned content is two systems on one page, and the reference
   composes everything off the left edge. */
.ex .ex-page-head {
  padding-block: 24px 0;
  text-align: start;
}
/* A page head and the first thing under it are one block. The 96px section gap
   is the distance between two subjects; between a title and the content it
   titles it stacks on the head's own trailing air and leaves a page that opens
   with a heading and then a void. */
.ex main > .ex-page-head + * {
  margin-block-start: 48px;
}

/* --------------------------------------------------------------------------
   The section head — the reference's own two-column heading block

   Every section on the reference's page announces itself the same way: a short
   heading on the left, its explanation in a second column beside it, both left
   aligned, and the section's content full width underneath. It is the single
   most recognisable thing about that layout after the darkness, and it is what
   this overlay's centred heading-over-centred-sub was not.

   The two are wrapped in `.ex-section-head` rather than styled as loose
   siblings. The alternative was a grid on `.section` with every child placed by
   selector, which breaks the moment a section grows a fourth kind of child —
   and these sections hold bentos, claim lists, chip walls and buttons.

   .ex-heading stays distinct from .section-title: the micro-label marks a run
   of content inside a page, and this announces a band. Both exist on the
   landing page and they are not interchangeable.

   The heading is no longer clipped out of a gradient. The reference is explicit
   that gradients belong to the hero floor and nowhere else, and a page with
   eight gradient-filled headings on it spends its one chromatic move eight
   times. The hero's h1 keeps the treatment because it is the brand's signature
   and there is exactly one of it.
   -------------------------------------------------------------------------- */

.ex .ex-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 4px 64px;
  margin-block-end: 48px;
}
/* The heading holds the first column; the sub is auto-placed into the second
   and lands on the head's first row, so the two start on the same line. An
   eyebrow, where there is one, sits above the heading in the same column. */
.ex .ex-section-head > .ex-eyebrow,
.ex .ex-section-head > .ex-heading {
  grid-column: 1;
}
.ex .ex-section-head > .ex-sub {
  grid-column: 2;
}

.ex .ex-heading {
  max-inline-size: 20ch;
  margin: 0;
  border: 0;
  padding: 0;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.15;
  font-weight: 510;
  letter-spacing: -0.022em;
  text-align: start;
  text-wrap: balance;
  color: var(--color-ink);
}
.ex .ex-sub {
  max-inline-size: 46ch;
  margin: 0;
  text-align: start;
  color: var(--color-ink-3);
  font-size: var(--text-base);
  line-height: 1.6;
}

/* The eyebrow is a pill, not a coloured line of type. The reference's badge:
   a 5%-white fill, muted ink, pill radius, 12px. It was gradient-clipped text
   and is the second thing the three-places rule was quietly leaking into. */
.ex .ex-eyebrow {
  display: block;
  inline-size: fit-content;
  margin-block-end: 12px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.05);
  font-size: var(--text-xs);
  font-weight: 510;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-2);
}

/* One column below the width where two half-columns stop being columns: at
   this size the heading and its explanation are 20ch and 46ch fighting over
   the same 340px, and the sub wraps to nine lines. */
@media (max-width: 60rem) {
  .ex .ex-section-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-block-end: 32px;
  }
  .ex .ex-section-head > .ex-sub {
    grid-column: 1;
  }
  .ex .ex-heading {
    max-inline-size: 24ch;
  }
}

/* --------------------------------------------------------------------------
   The band

   A change of surface, not a change of scheme. It used to be #fafafa with a
   full token block behind it and its own re-declared accent, because the
   platform build alternates light and dark down the page; the reference does
   not alternate at all, and every light band was a second place the signal
   had to be legal in. One step up the surface ladder and two hairlines is
   enough to say "this is a different run of content".
   -------------------------------------------------------------------------- */

.ex .ex-band {
  --color-paper: #0f1011;
  --color-surface: #161718;
  --color-surface-2: #1d1f21;

  /* No margin. A band is a change of ground, and the change is the separator;
     a margin around it leaves a strip of the page's own ground showing above
     and below, which reads as a bar rather than as space. The band's own
     padding is what gives it room. */
  margin-block: 0;
  padding-block: 96px;
  border-block: 1px solid var(--color-rule);
  background: var(--color-paper);
  color: var(--color-ink);
}
/* .section's own trailing gap would reintroduce the strip under the band. */
.ex .ex-band {
  margin-block-end: 0;
}
.ex .ex-band .ex-heading,
.ex .ex-band h2,
.ex .ex-band h3 {
  color: var(--color-ink);
}

/* --------------------------------------------------------------------------
   The bento

   Three claims on an asymmetric grid: two short cells stacked beside one
   full-height one. Below 60rem it is one column, in source order, because a
   bento that reflows into three equal boxes is just a list that took the long
   way round.
   -------------------------------------------------------------------------- */

.ex .ex-bento {
  display: grid;
  gap: 16px;
}
/* Placement is explicit. Left to auto-flow, the two short cells would fill the
   first row across and push the full-height cell onto a row of its own — two
   above and one below, which is not this layout. Naming each cell's track says
   what the design is instead of hoping the algorithm agrees. */
@media (min-width: 60rem) {
  .ex .ex-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* The row height is stated rather than left to the pictures. An image at
       inline-size 100% takes its height from its own aspect ratio, and the
       fees artwork is a portrait one: given half the band it drew itself six
       hundred pixels tall and every cell grew to match, which is three screens
       of bento for three sentences. */
    grid-template-rows: repeat(2, 340px);
  }
  .ex .ex-cell-short-top {
    grid-column: 1;
    grid-row: 1;
  }
  .ex .ex-cell-short-bottom {
    grid-column: 1;
    grid-row: 2;
  }
  .ex .ex-cell-tall {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}
.ex .ex-cell {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-plane);
  background: var(--color-surface);
  transition: border-color 180ms var(--ex-ease);
}
.ex .ex-cell:hover {
  border-color: var(--color-rule-strong);
}
.ex .ex-cell-copy {
  padding: 24px 24px 12px;
}
.ex .ex-cell-copy h3 {
  margin-block-end: 8px;
  font-size: var(--text-xl);
  font-weight: 510;
  letter-spacing: -0.012em;
  color: var(--color-ink);
}
.ex .ex-cell-copy p {
  max-inline-size: 42ch;
  color: var(--color-ink-3);
  font-size: var(--text-sm);
  line-height: 1.6;
}
/* The artwork is shown whole. `cover` was here and it is the wrong fit for
   these: they are drawn illustrations with a subject in the middle, not
   photographs with slack at the edges, and in the two short cells — which are
   twice as wide as they are tall once the copy has taken its share — cover was
   magnifying them until the curve left the top of the chart and the shield lost
   both its sides.

   `contain` is safe here only because the row height is stated. Given a free
   height, contain sizes the box to the picture and the band grows to whatever
   the tallest artwork wants, which is what made this section a screen and a
   half tall the first time. Inside a definite row it does what it says. */
.ex .ex-cell-art {
  box-sizing: border-box;
  inline-size: 100%;
  flex: 1;
  min-block-size: 0;
  margin-block-start: 16px;
  padding: 0 24px 24px;
  object-fit: contain;
  /* Standing on the cell's floor rather than floating in the middle of the
     space left over: the chart has a baseline and the fees artwork has a hand
     that belongs under the word. */
  object-position: center bottom;
}
/* The shield is the exception — a centred emblem rather than a scene standing
   on a bottom edge. */
.ex .ex-cell-short-bottom .ex-cell-art {
  object-position: center;
}

/* --------------------------------------------------------------------------
   Claims — an icon plate, a title and a line, three or four across

   The base's `.cards` is a panel per item. This is the flatter treatment: no
   plane at all, just the plate carrying the weight.
   -------------------------------------------------------------------------- */

.ex .ex-claims {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.ex .ex-claim dt {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block-end: 12px;
  font-weight: 510;
  font-size: var(--text-lg);
  letter-spacing: -0.012em;
  color: var(--color-ink);
}
.ex .ex-claim dd {
  margin: 0;
  color: var(--color-ink-3);
  line-height: 1.65;
  font-size: var(--text-sm);
}
/* A 5%-white plate with a hairline, not a filled ink block: the reference
   keeps its chrome neutral and spends the one filled colour on the action. */
.ex .ex-plate {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 36px;
  block-size: 36px;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-control);
  background: rgb(255 255 255 / 0.04);
  color: var(--color-ink);
  transition:
    border-color 180ms var(--ex-ease),
    color 180ms var(--ex-ease);
}
.ex .ex-plate .icon {
  inline-size: 18px;
  block-size: 18px;
}
.ex .ex-claim:hover .ex-plate {
  border-color: var(--color-control);
  color: var(--color-signal);
}

/* --------------------------------------------------------------------------
   Figures — a picture with its explanation, in a bordered card
   -------------------------------------------------------------------------- */

.ex .ex-figures {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
.ex .ex-figures-pair {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
}
.ex .ex-figure {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  overflow: hidden;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-plane);
  background: var(--color-surface);
  transition: border-color 180ms var(--ex-ease);
}
.ex .ex-figure:hover {
  border-color: var(--color-rule-strong);
}
.ex .ex-figure-copy {
  padding: 24px 24px 0;
}
.ex .ex-figure-copy h3 {
  margin-block-end: 8px;
  font-size: var(--text-lg);
  font-weight: 510;
  letter-spacing: -0.012em;
  color: var(--color-ink);
}
.ex .ex-figure-copy p {
  color: var(--color-ink-3);
  font-size: var(--text-sm);
  line-height: 1.65;
}
/* The artwork is a diagram at its own intrinsic size, not a photograph to be
   filled with. Left at `inline-size: 100%` the squarest of them — the clock,
   132x131 — scaled to the full width of its card and took the same height with
   it. Capped and centred instead, so a wide card gives it room rather than
   magnification. */
.ex .ex-figure img {
  display: block;
  inline-size: auto;
  max-inline-size: 100%;
  block-size: auto;
  max-block-size: 220px;
  margin-inline: auto;
  padding: 0 24px 24px;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   Blog cards
   -------------------------------------------------------------------------- */

.ex .ex-posts {
  display: grid;
  gap: 40px 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  padding-block-start: 48px;
  border-block-start: 1px solid var(--color-rule);
}
.ex .ex-post-shot {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-plane);
}
.ex .ex-post-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block: 16px 8px;
  font-size: var(--text-xs);
  color: var(--color-ink-3);
}
/* The reference's badge: 5% white, 4px, muted ink, 12px regular. Not a pill —
   pills are for chips and controls, badges are for metadata. */
.ex .ex-tag {
  padding: 1px 6px;
  border-radius: var(--radius-badge);
  background: rgb(255 255 255 / 0.05);
  color: var(--color-ink-3);
  font-weight: 400;
}
.ex .ex-post h3 {
  font-size: var(--text-lg);
  font-weight: 510;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--color-ink);
  margin-block-end: 8px;
}
.ex .ex-post h3 a {
  text-decoration: none;
  color: inherit;
}
.ex .ex-post h3 a:hover {
  color: var(--color-signal);
}
.ex .ex-post p {
  color: var(--color-ink-3);
  font-size: var(--text-sm);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Community channels — whole-card links
   -------------------------------------------------------------------------- */

.ex .ex-channels {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.ex .ex-channel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-plane);
  background: var(--color-surface);
  text-decoration: none;
  transition: border-color 180ms var(--ex-ease);
}
.ex .ex-channel:hover,
.ex .ex-channel:focus-visible {
  border-color: var(--color-control);
  color: inherit;
}
.ex .ex-channel-name {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 510;
  letter-spacing: -0.011em;
  color: var(--color-ink);
}
.ex .ex-channel-mark {
  inline-size: 22px;
  block-size: 22px;
}
.ex .ex-channel-body {
  color: var(--color-ink-3);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.ex .ex-channel-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-block-start: 4px;
  font-size: var(--text-sm);
  font-weight: 510;
  color: var(--color-signal);
}
.ex .ex-channel-action .icon {
  inline-size: 14px;
  block-size: 14px;
  transition: translate 180ms var(--ex-ease);
}
.ex .ex-channel:hover .ex-channel-action .icon {
  translate: 3px 0;
}

/* --------------------------------------------------------------------------
   Listed on — the aggregator and partner logos

   Greyed and dimmed at rest, full colour on hover and on focus. The reference
   runs its customer strip as neutral grey marks at uniform size with no card
   behind them, which is the treatment this row already had: eight logos in
   eight brand colours is the loudest thing on a charcoal page and none of it
   is this brand's.

   Sized by height, not width. These files are a mix of PNG and SVG at eight
   different aspect ratios, and matching their widths would draw a wordmark and
   a square badge at wildly different visual weights.
   -------------------------------------------------------------------------- */

/* Left, not centred. Its heading is one of the base's left-aligned micro-
   labels and the ticker wall directly above it runs left; a centred row under
   a left label reads as a third alignment nobody chose. */
.ex .ex-listings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 24px 48px;
  list-style: none;
  padding: 0;
}
.ex .ex-listings a {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.ex .ex-listings img {
  display: block;
  block-size: 24px;
  inline-size: auto;
  max-inline-size: 148px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.55;
  transition:
    filter 180ms var(--ex-ease),
    opacity 180ms var(--ex-ease);
}
.ex .ex-listings a:hover img,
.ex .ex-listings a:focus-visible img {
  filter: none;
  opacity: 1;
}

/* A logo drawn in solid black. Greyscale leaves it black, and black on
   charcoal is not a subtle logo — it is an empty space where a logo should be.
   Inverted to white instead, at rest and on hover both: a mark with no colour
   in it has nothing to restore, so hover answers with opacity alone. Which
   files these are is a measured fact carried by the catalogue, not something
   this sheet can work out. */
.ex .ex-listings .ex-ink-dark img {
  filter: invert(1);
}
.ex .ex-listings .ex-ink-dark a:hover img,
.ex .ex-listings .ex-ink-dark a:focus-visible img {
  filter: invert(1);
  opacity: 1;
}

/* A mark that is part solid black and part brand colour. Monerica's flag is
   black stripes on transparent beside the Monero orange, and neither of the
   two treatments above fits it: greyscale leaves the stripes invisible on
   charcoal, and inverting turns the orange cyan — which is not a quieter
   logo, it is a different one. It gets a light plate instead, so the black has
   ground to end on and the colour stays the colour it is. */
.ex .ex-listings .ex-ink-plate img {
  box-sizing: content-box;
  padding: 4px 7px;
  border-radius: var(--radius-badge);
  background: #e5e5e6;
}

@media (prefers-reduced-motion: reduce) {
  .ex .ex-listings img {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Closing bands

   There is no lozenge any more. `.ex-cta-glow` put a blurred gradient behind
   the closing headline on the about, how-it-works and affiliates pages — the
   hero's floor effect at the other end of the page. Three of those on a site
   with one hero is not a signature, it is a habit, and a 90px blur behind a
   heading is decoration doing a job the heading already does. The gradient is
   the hero's; see the Two-Places Rule in DESIGN.md.
   -------------------------------------------------------------------------- */

.ex .ex-cta {
  position: relative;
  text-align: start;
  padding-block: 24px;
}
/* The button is the section's content, so it takes the same gap under the head
   that a bento or a claim row does — set here because it is a bare <p> and the
   content list cannot name every one of those. */
.ex .ex-cta .ex-section-head {
  margin-block-end: 32px;
}
.ex .ex-cta-aside {
  margin-inline-start: 16px;
  font-size: var(--text-sm);
  color: var(--color-ink-3);
}

/* --------------------------------------------------------------------------
   Chrome
   -------------------------------------------------------------------------- */

/* No hairline under the chrome. The base rules a 1px line along the header's
   bottom edge because on a daylight instrument the glass alone is not a
   boundary; here it is. The header's material is 85% of the page's own ground
   under a 12px blur, which separates by density rather than by geometry — and
   on the landing page that line was drawn straight across the top of the
   gradient, which is the one edge in this brand worth not cutting.

   The phone sheet is untouched and keeps its own closing hairline (`.nav`'s
   border-block-end): an open menu is a panel, and a panel ends somewhere. */
.ex .site-header {
  border-bottom: 0;
}

/* The logotype ships in two inks. This brand's chrome is charcoal on every
   scheme, including when the operator forces data-theme="light", so the
   light-ink file is the only one ever shown and the base's four-way swap is
   overridden flat. Two rules are enough: this sheet is unlayered and the
   base's are inside @layer components, so specificity does not enter into
   it — the cascade decides on layer order first. */
.ex .brand-logo .logo-light {
  display: none;
}
.ex .brand-logo .logo-dark {
  display: inline;
}

/* Pure typographic nav: 13px regular in the secondary ink, no fill, no border.
   The base underlines the current page with the accent; here the accent is the
   colour of the word itself. */
.ex .nav a,
.ex .nav button {
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--color-ink-2);
}
.ex .nav a:hover,
.ex .nav button:hover {
  color: var(--color-ink);
}
.ex .nav a[aria-current="page"] {
  color: var(--color-signal);
}
/* One filled control in the chrome, and it is the one that starts an account.
   A white pill, which the reference makes the second-highest-contrast element
   after the accent button — and flat, never gradient. */
.ex .nav a[href="/signup"] {
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  border-bottom: 0;
  background: var(--color-ink);
  color: #09090b;
  font-weight: 510;
}
.ex .nav a[href="/signup"]:hover {
  background: #e5e5e6;
  color: #09090b;
}

/* The action. The base draws it as an uppercase mono control at the tracking
   an instrument wants; the reference draws a 6px rectangle with 14px Inter at
   510 and no case change, and it is the only filled chromatic thing on the
   page. Both agree on the colour. */
.ex .btn,
.ex button:not([class]):not(.nav *) {
  padding: 10px 16px;
  border-radius: var(--radius-control);
  font-size: var(--text-base);
  font-weight: 510;
  letter-spacing: -0.011em;
  text-transform: none;
}
.ex .btn-secondary {
  border-color: var(--color-rule-strong);
  color: var(--color-ink-2);
}
.ex .btn-secondary:hover {
  border-color: var(--color-control);
  color: var(--color-ink);
  background: rgb(255 255 255 / 0.04);
}

/* Hover is a stated colour, not a filter. The base lightens every button with
   `filter: brightness(1.08)`, which is the right default for a sheet that does
   not know what colour it is lightening; this one does. Mixed toward white in
   oklab the signal gets lighter without getting paler, which is what brightness
   on a saturated cyan does not do. */
.ex .btn:not(.btn-secondary):hover,
.ex button:not([class]):not(.nav *):hover {
  filter: none;
  background: color-mix(in oklab, var(--color-signal) 86%, #ffffff);
  border-color: color-mix(in oklab, var(--color-signal) 86%, #ffffff);
  color: var(--color-signal-ink);
}

/* --------------------------------------------------------------------------
   The wizard's terminal control

   Everything above it on that card is a choice; this is the one thing that
   commits them, and until this release it was drawn at exactly the size of the
   "swap the pair" control — a 120px pill sitting against the left edge under
   two consent checkboxes, with the rest of the card's width empty beside it.
   The measure is the argument: a control that closes a form takes the form's
   full width, so where it ends is where the form ends.

   It answers a press with colour and a pixel of travel. Not with a glow, not
   with a lift, and not with a gradient — this is the one filled chromatic
   thing on the page and the Two-Places Rule is what keeps it that.
   -------------------------------------------------------------------------- */

.ex #place-order-submit {
  inline-size: 100%;
  min-block-size: 46px;
  margin-block-start: 4px;
  padding: 12px 20px;
  font-weight: 590;
  transition:
    background 160ms var(--ex-ease),
    border-color 160ms var(--ex-ease),
    color 160ms var(--ex-ease),
    translate 90ms var(--ex-ease);
}
.ex #place-order-submit:active {
  transform: none;
  translate: 0 1px;
}

/* Nothing to commit yet — no amount typed, or no quote back for the one that
   was. The base answers with half opacity, which on a saturated fill reads as
   a washed-out version of the same button and invites the press anyway. This
   is the card's neutral instead: the control is visibly there, visibly not
   armed, and the moment a quote lands it fills. ink-3 on this plate is 5.6:1,
   so "not yet" is still legible rather than merely faint.

   It stays `aria-disabled`, never `disabled` — wizard.js is explicit about
   why, and the styling follows that decision rather than reopening it. */
.ex #place-order-submit[aria-disabled="true"],
.ex #place-order-submit[aria-disabled="true"]:hover {
  opacity: 1;
  background: rgb(255 255 255 / 0.05);
  border-color: var(--color-rule);
  color: var(--color-ink-3);
  cursor: not-allowed;
}

/* In flight. wizard.js sets aria-busy alongside aria-disabled, so this has to
   come after the block above and undo it: an exchange being opened is the one
   moment this button most needs to look like the thing that is happening. The
   base's reasoning, kept — it holds its weight and takes the pulsing dot the
   status badges use for anything in flight. */
.ex #place-order-submit[aria-busy="true"],
.ex #place-order-submit[aria-busy="true"]:hover {
  background: var(--color-signal);
  border-color: var(--color-signal);
  color: var(--color-signal-ink);
  opacity: 0.8;
  cursor: progress;
}

/* --------------------------------------------------------------------------
   The rate-mode switch

   Two tabs under the two amount planes: whether the quote floats or is held.
   The base draws it as a 12px-radius track with 6px-radius options inside a
   2px gutter — two radii that were never struck from the same centre, so the
   inner corners sit inside the outer ones unevenly — on `--color-surface-2`
   over `--color-surface`, which is #161718 on #0f1011. On the hero card, where
   this switch actually lives, that track and its selected tab differ by about
   two percent of luminance: the control reads as two words with no state on
   them at all, and which mode is on is the second most consequential fact on
   the card after the figure.

   Concentric pills fix the geometry for free — a pill inside a pill nests
   correctly at any gutter — and they mark the switch out from the two 12px
   planes above it as a different kind of thing, which it is. The state is
   contrast, not colour: the accent is spent on the control that commits, and a
   segment that is merely current has no business wearing it.
   -------------------------------------------------------------------------- */

.ex .xflow {
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
  border-color: var(--color-rule);
  background: rgb(255 255 255 / 0.04);
}
.ex .xflow-option {
  display: inline-flex;
  align-items: center;
  min-block-size: 26px;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 510;
  letter-spacing: -0.005em;
  color: var(--color-ink-3);
  white-space: nowrap;
  transition:
    background 160ms var(--ex-ease),
    box-shadow 160ms var(--ex-ease),
    color 160ms var(--ex-ease);
}
.ex .xflow-option:hover {
  color: var(--color-ink-2);
  background: rgb(255 255 255 / 0.04);
}
/* The selected tab is the one raised surface in the switch: a 10%-white plate,
   a hairline struck at rule-strong so it has an edge of its own against the
   track, and the full ink. The inset ring is the same one-token elevation the
   rest of this sheet uses — geometry, not shadow. */
.ex .xflow-option:has(:checked),
.ex .xflow-option:has(:checked):hover {
  background: rgb(255 255 255 / 0.1);
  box-shadow: inset 0 0 0 1px var(--color-rule-strong);
  color: var(--color-ink);
  font-weight: 590;
}
.ex .xflow-option:has(:focus-visible) {
  outline: 2px solid var(--color-signal);
  outline-offset: 2px;
}
/* Offered but not available for this pair — the note underneath says why, so
   this only has to read as unavailable and not as broken. */
.ex .xflow-option:has(:disabled),
.ex .xflow-option:has(:disabled):hover {
  background: none;
  color: var(--color-ink-3);
  opacity: 0.45;
}
.ex .xflow-hint {
  margin-block-start: 8px;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-ink-3);
}

@media (prefers-reduced-motion: reduce) {
  .ex #place-order-submit,
  .ex .xflow-option {
    transition: none;
  }
}

/* The plane. The base draws registration marks at opposing corners, as on a
   technical drawing — the instrument's own signature, and the one piece of
   ornament this reference has no room for. Cards here are a hairline and a
   12px radius, and nothing else. */
.ex .panel {
  border-radius: var(--radius-plane);
  background: var(--color-surface);
  border-color: var(--color-rule);
}
.ex .panel::before,
.ex .panel::after {
  content: none;
}

/* Fields sit on a barely-there fill rather than on the page's own ground, so
   the form reads as one instrument on the card instead of as holes cut in it.
   Focus keeps the accent: the reference brightens the border to its body ink,
   which says "active" less clearly than the one colour on the page that means
   "this is the thing you are doing". */
.ex .input,
.ex input:not([class]):not([type="checkbox"]):not([type="hidden"]),
.ex select:not([class]),
.ex textarea:not([class]) {
  border-radius: var(--radius-control);
  background: rgb(255 255 255 / 0.02);
  border-color: var(--color-control);
  font-size: var(--text-base);
}
.ex .input:focus,
.ex input:not([class]):focus,
.ex select:not([class]):focus,
.ex textarea:not([class]):focus {
  border-color: var(--color-signal);
  background: rgb(255 255 255 / 0.04);
}

.ex .label {
  font-size: var(--text-xs);
  font-weight: 510;
  letter-spacing: 0.08em;
  color: var(--color-ink-3);
}

.ex .badge {
  border-radius: var(--radius-badge);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
}

.ex .notice {
  border-radius: var(--radius-control);
  font-size: var(--text-sm);
}

.ex .address {
  border-radius: var(--radius-control);
  border-color: var(--color-rule-strong);
}

/* Chips are pills, in the reference's own recipe: a 5%-white fill, muted ink,
   no border at rest. The base draws them as hairline rectangles. */
.ex .chips li {
  border-radius: var(--radius-pill);
  border-color: transparent;
  background: rgb(255 255 255 / 0.05);
  color: var(--color-ink-2);
  font-weight: 400;
  letter-spacing: 0;
}
.ex .chips li:hover {
  border-color: var(--color-rule-strong);
  color: var(--color-ink);
}
.ex .chips .chips-more,
.ex .chips li:has(.chips-more) {
  background: none;
  border-color: transparent;
}

/* Trust badges. Sized by height so three marks at three aspect ratios carry
   the same visual weight, and left at full colour: a greyed trust badge is a
   trust badge nobody believes. They sit above the social row because one is
   evidence and the other is an invitation. */
.ex .ex-badges ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  list-style: none;
  padding: 0;
  margin-block: 32px 0;
}
.ex .ex-badges a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  color: var(--color-ink-2);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 510;
  transition: color 180ms var(--ex-ease);
}
.ex .ex-badges a:hover,
.ex .ex-badges a:focus-visible {
  color: var(--color-ink);
}
.ex .ex-badges img {
  display: block;
  block-size: 22px;
  inline-size: auto;
}
/* The BestChange tile is a two-tone square whose right half is #171717 — all
   but invisible against a #09090b footer. The plate is what gives that half an
   edge to end on; the other two are self-contained marks and get none.

   Keyed on the badge rather than on :first-child, because each badge renders
   only when the panel holds a URL for it: with BestChange unset, :first-child
   was putting a white plate behind Trustpilot's star. */
.ex .ex-badges .ex-badge-bestchange img {
  box-sizing: content-box;
  padding: 3px;
  border-radius: var(--radius-badge);
  background: #e5e5e6;
}
@media (prefers-reduced-motion: reduce) {
  .ex .ex-badges a {
    transition: none;
  }
}

.ex .ex-social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
  padding: 0;
  margin-block: 20px 0;
}
.ex .ex-social a {
  font-size: var(--text-sm);
  color: var(--color-ink-3);
  text-decoration: none;
}
.ex .ex-social a:hover {
  color: var(--color-signal);
}

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

   Four selectors and nothing else. Content is never staged: no element is
   absent until it is scrolled to, nothing fades up, and nothing that is being
   read slides into position. What arrives is the section band, the card and
   the row — by opacity and a two-pixel lift, over a third of a second.

   The closed state lives behind .ex-reveal, which expeer.js adds only when it
   is going to open it again. With scripting off, or under reduced motion, none
   of this applies at all and the page is simply the page.
   -------------------------------------------------------------------------- */

.ex .ex-reveal .ex-cell,
.ex .ex-reveal .ex-figure,
.ex .ex-reveal .ex-claim,
.ex .ex-reveal .ex-post {
  animation: ex-arrive 460ms var(--ex-ease) both;
  animation-delay: var(--ex-delay, 0ms);
}
/* The stagger, as a ramp rather than a value the script writes onto each
   element. It has to stop climbing: a group of nine at 70ms each would take
   two thirds of a second to finish, which stops reading as arrival and starts
   reading as a page still loading. Sixth and later share the fifth's delay. */
.ex .ex-reveal > :nth-child(2) {
  --ex-delay: 70ms;
}
.ex .ex-reveal > :nth-child(3) {
  --ex-delay: 140ms;
}
.ex .ex-reveal > :nth-child(4) {
  --ex-delay: 210ms;
}
.ex .ex-reveal > :nth-child(n + 5) {
  --ex-delay: 280ms;
}
@keyframes ex-arrive {
  from {
    opacity: 0;
    translate: 0 8px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion

   "Reduced" must never mean "hidden". The script does not add .ex-reveal at
   all under the preference, and this is the second guard, for a preference
   that changes after load: every closed state is cancelled rather than left
   closed. The gradient holds its initial stop instead of disappearing, because
   a still gradient is the same page at rest and no gradient is a different one.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ex .ex-hero {
    animation: none;
  }
  .ex .ex-reveal .ex-cell,
  .ex .ex-reveal .ex-figure,
  .ex .ex-reveal .ex-claim,
  .ex .ex-reveal .ex-post {
    animation: none;
    opacity: 1;
    translate: none;
  }
  .ex .ex-plate,
  .ex .ex-cell,
  .ex .ex-figure,
  .ex .ex-channel,
  .ex .ex-channel-action .icon {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 48rem) {
  .ex .ex-band {
    padding-block: 64px;
  }
  .ex .ex-cell-copy {
    padding: 20px 20px 8px;
  }
  .ex .ex-posts {
    padding-block-start: 32px;
  }
}