/*
 * Visual system, taken from the design draft the owner approved on 2026-08-28.
 *
 * Tokens are copied from the draft's own source, not sampled from a
 * screenshot: --navy, --ink, --text, --amber, --cyan are the values declared
 * in its :root. Typefaces are the draft's: Inter for prose, JetBrains Mono for
 * labels, numbers and anything that reads as machine output.
 *
 * This replaces the earlier neutral placeholder stylesheet. It encodes a
 * design decision; the structure-only version is commit 138dd13.
 */

:root {
  --navy: #0a1b2f;
  --navy-deep: #081522;
  --ink: #141414;
  --ink-soft: #1a1a1a;
  --text: #e0e0e0;
  --muted: #94a3b8;
  --muted-2: #64748b;
  --amber: #ffb400;
  --cyan: #00a8e8;
  --line: #334155;
  --line-soft: #1e293b;

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /*
   * Two measurements the layout needs to agree on in more than one place.
   * The gutter is fluid, so anything that must line up with the container
   * edge — the header's scrolling nav, for one — reads it from here instead
   * of hard-coding a value that stops matching below 640px.
   */
  --wrap-pad: clamp(1.25rem, 4vw, 2rem);
  --header-h: 4.5rem;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--navy);
}

body {
  margin: 0;
  background: var(--navy);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------- layout ---------- */

.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}

.band {
  padding: clamp(3.5rem, 8vw, 6rem) 0;
  border-top: 1px solid var(--line-soft);
}

/* the header is sticky, so anchored sections must clear it */
section[id], main[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

.band--ink { background: var(--ink); }
.band--deep { background: var(--navy-deep); }

/* ---------- type ---------- */

h1, h2, h3 {
  margin: 0;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.4rem, 5.6vw, 4.25rem);
  font-weight: 700;
  line-height: 1.03;
}

.h1-b { color: var(--amber); }

h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
}

h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: 1.125rem;
  color: var(--muted);
  max-width: 36rem;
  margin-top: 1.75rem;
}

.note {
  color: var(--muted);
  max-width: 46rem;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 1.5rem;
}

.eyebrow .sep { color: var(--muted-2); }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(10, 27, 47, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-soft);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: var(--header-h);
}

/*
 * The wordmark file carries uneven padding: its ink occupies 699 x 60 of a
 * 716 x 112 image, so a height set on the <img> is about twice the height the
 * letters actually get. 1.625rem of image puts the cap height at roughly 14px,
 * which is what a logotype wants beside 13px mono nav labels. Size this by the
 * ink, not by the box.
 */
.brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}

.brand img {
  display: block;
  height: 1.625rem;
  width: auto;
}

.site-header nav ul {
  display: flex;
  gap: 2.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.site-header nav a,
.site-header nav .nav-pending {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}

/*
 * "New to HFT" names a page that does not exist yet. It is set as text rather
 * than as a link, so the nav can promise the section without the promise
 * leading anywhere. Dimmer than its neighbours, because it is not yet clickable.
 */
.site-header nav .nav-pending { color: var(--muted-2); cursor: default; }

.nav-contact { display: none; }

/*
 * A deliberately plain header action. It uses the exact same two colour
 * tokens as .btn instead of a nearby yellow or a white label, so the header
 * cannot introduce a second visual identity. The wordmark above remains the
 * supplied raster asset.
 */
.header-contact {
  flex: 0 0 auto;
  padding: 0.62rem 0.82rem;
  background: var(--amber);
  color: var(--navy);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.header-contact:hover,
.header-contact:focus-visible {
  background: var(--amber);
  color: var(--navy);
}

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

.hero {
  position: relative;
  padding: 0;
  overflow: hidden;
}

/*
 * The reference's hero box: 650px tall, 96px of vertical padding, centred.
 * The padding is fluid downward — at the reference width it is the reference's
 * 96px, on a phone it is 48px. All of the hero's vertical space lives on this
 * rule; .hero itself keeps padding 0, because a second source of padding here
 * once doubled the gap above the headline on small screens.
 */
.hero .wrap {
  position: relative;
  min-height: 650px;
  padding-top: clamp(3rem, 9vw, 6rem);
  padding-bottom: clamp(3rem, 9vw, 6rem);
  display: flex;
  align-items: center;
}

/*
 * The background grid, copied from the reference's own stylesheet rather than
 * matched by eye: 32px cells, rgba(224,224,224,.055), and drawn on the
 * container — not across the viewport. That last part is why the reference has
 * plain ground down both outer edges and squares only in the middle. Do not
 * make this full-bleed.
 */
.hero .wrap {
  background-image:
    linear-gradient(rgba(224, 224, 224, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224, 224, 224, 0.055) 1px, transparent 1px);
  background-size: 32px 32px;
}

/*
 * The bracket frames the figure's top-right corner from outside it, as in the
 * reference. Anchored to the figure itself rather than to the section, so it
 * cannot drift onto the card at another width.
 */
.hero-figure { position: relative; }

.corner {
  position: absolute;
  z-index: 0;
  top: -1.5rem;
  right: -1.5rem;
  width: 8rem;
  height: 8rem;
  border-top: 1px solid var(--amber);
  border-right: 1px solid var(--amber);
  pointer-events: none;
}

/* ---------- call to action ---------- */

.cta-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--amber);
  color: var(--navy);
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 1rem 1.5rem;
  border: 0;
  text-decoration: none;
}

.btn span { transition: transform 160ms ease; }

.btn:focus-visible span { transform: translateX(0.3rem); }

/* ---------- grids and cards ---------- */

.grid {
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  margin-top: 3rem;
}

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

.grid > .cell {
  background: var(--navy);
  padding: clamp(1.25rem, 4vw, 2rem);
}

.band--ink .grid > .cell { background: var(--ink-soft); }
.band--deep .grid > .cell { background: var(--navy-deep); }

.cell-label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 1.25rem;
}

.cell h3 { margin-bottom: 0.75rem; }
.cell p { color: var(--muted); font-size: 0.9375rem; }

/* ---------- fit: invited on the left, turned away on the right ---------- */
/*
 * Two blocks that answered the same reader question — "is this about me?" —
 * and used to stand as consecutive screens. Column order is content, not
 * layout: the invitation comes first, the refusal second. When the columns
 * stack, source order puts the invitation on top, which is the same statement
 * made vertically.
 */

/*
 * No shared surface behind the two columns. The 1px-gap-over-a-background
 * trick that draws the other grids on this page draws a frame around both
 * columns and fills the one that is meant to be quiet: with the right column
 * set to transparent, what showed through was --line-soft, which is lighter
 * than the band, so the column being played down came out looking raised.
 * The columns are told apart by weight now, not by a grid.
 */
.fit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

.fit-col { background: var(--navy); padding: clamp(1.5rem, 4vw, 2.5rem); }

.band--ink .fit-col { background: var(--ink-soft); }
.band--deep .fit-col { background: var(--navy-deep); }

/* column heads, not section heads: a step down from h2 */
.fit-col h2 { font-size: clamp(1.15rem, 2.2vw, 1.45rem); }
.fit-col .pairs { margin-top: 1.5rem; }
.fit-col .pairs .pair:first-child { border-top: 0; padding-top: 0; }

/* ---------- definition pairs, no numbering ---------- */

.pairs { margin-top: 3rem; }

.pairs .pair {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line-soft);
}

.pairs .pair:first-child { border-top: 1px solid var(--line-soft); }

.pairs dt {
  color: #fff;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.pairs dd {
  margin: 0;
  color: var(--muted);
}

/* ---------- plain list ---------- */

.plain {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
}

.plain li {
  position: relative;
  padding: 0 0 1.25rem 2rem;
  color: var(--muted);
  max-width: 46rem;
}

.plain li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65rem;
  width: 0.5rem;
  height: 1px;
  background: var(--amber);
}

.plain li b {
  color: #fff;
  font-weight: 600;
}

/* ---------- staged work ---------- */

.stage {
  margin-top: 3.5rem;
  padding-left: 2rem;
  border-left: 1px solid var(--line);
}

.stage-n {
  font-family: var(--mono);
  font-size: 2rem;
  font-weight: 700;
  color: var(--amber);
  line-height: 1;
  margin-bottom: 0.75rem;
}

.stage p { color: var(--muted); max-width: 42rem; }
.stage h3 { margin-bottom: 0.9rem; font-size: 1.2rem; }

/* ---------- faq ---------- */

.faq { margin-top: 3rem; }

.faq .qa {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line-soft);
}

.faq dt {
  color: #fff;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.faq dd { margin: 0; color: var(--muted); }

/* ---------- statement ---------- */

.statement {
  margin-top: 2.5rem;
  font-size: 1.125rem;
  color: var(--text);
  max-width: 44rem;
}

.statement strong {
  color: var(--amber);
  font-weight: 600;
}

/* ---------- service map ---------- */

.service-note {
  max-width: 48rem;
  margin: 2rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-soft);
  color: var(--text);
  font-weight: 500;
}

/*
 * The selected service map is an assembled set of independent modules. The
 * amber couplers are intentionally open and have no arrows: a client can take
 * one service or assemble the relevant ones, rather than pass a fixed funnel.
 * Its near-black surface stays distinct from the colder Full system block
 * that follows it.
 */
#services { background: var(--ink); }

.service-coupled {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 3rem;
  padding: 2rem 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.service-coupled::before {
  position: absolute;
  right: 0;
  bottom: 1.1rem;
  left: 0;
  border-top: 1px solid var(--line-soft);
  content: '';
}

.service-coupled__module {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  min-height: 17.5rem;
  flex-direction: column;
  padding: 1.25rem;
  border: 1px solid var(--line);
  background: var(--ink);
  transition: border-color 160ms ease, background-color 160ms ease;
}

.service-coupled__module:focus-within { border-color: var(--amber); background: var(--ink-soft); }
.service-coupled__module .cell-label { margin-bottom: 1rem; color: var(--muted-2); }
.service-coupled__module:first-child .cell-label { color: var(--amber); }
.service-coupled__module h3 { margin-bottom: 0.75rem; }
.service-coupled__module > p:not(.cell-label):not(.more) { color: var(--muted); font-size: 0.9375rem; }
.service-coupled__module .more { margin-top: auto; padding-top: 1.5rem; }

.service-coupled__module:not(:last-child)::after {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: -1.15rem;
  width: 1.3rem;
  height: 0.7rem;
  border-top: 1px solid var(--amber);
  border-bottom: 1px solid var(--amber);
  background: var(--ink);
  content: '';
}

/* ---------- selected full-system chassis ---------- */

/*
 * A cold blue-graphite field deliberately separates this systems view from
 * the near-black services block above it. The two side scenarios are entry
 * points into one shared definition, not consecutive steps in a funnel.
 */
.band--system {
  --system-panel: #0b141d;
  --system-line: #526b7e;
  --system-line-soft: #31485a;
  background: #101a24;
}

.full-system-chassis {
  display: grid;
  grid-template-columns: minmax(13rem, 0.85fr) minmax(20rem, 1.35fr) minmax(13rem, 0.85fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: stretch;
  min-height: 23rem;
  margin-top: clamp(2.25rem, 5vw, 3.5rem);
  padding: 1.25rem 0;
  border-top: 1px solid var(--system-line);
  border-bottom: 1px solid var(--system-line);
}

.full-system-chassis__scenario {
  position: relative;
  align-self: stretch;
  padding: 2rem 1.25rem;
}

.full-system-chassis__scenario .cell-label {
  margin-bottom: 0.85rem;
  color: var(--muted);
}

.full-system-chassis__scenario h3 { margin-bottom: 0.75rem; }

.full-system-chassis__scenario > p:not(.cell-label) {
  color: var(--muted);
  font-size: 0.875rem;
}

.full-system-chassis__scenario--new { border-right: 1px solid var(--system-line); }

.full-system-chassis__scenario--new::after {
  position: absolute;
  top: 1.25rem;
  right: -0.85rem;
  bottom: 1.25rem;
  width: 0.65rem;
  border-top: 1px solid var(--amber);
  border-right: 1px solid var(--amber);
  border-bottom: 1px solid var(--amber);
  content: '';
}

.full-system-chassis__scenario--existing {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid var(--system-line);
}

.full-system-chassis__scenario--existing .cell-label { color: var(--amber); }

.full-system-chassis__scenario--existing::before {
  position: absolute;
  top: 50%;
  left: -1.45rem;
  width: 1.45rem;
  border-top: 1px solid var(--amber);
  content: '';
}

.full-system-chassis__core {
  display: grid;
  grid-template-rows: 2.3rem repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--system-line);
  background: var(--system-panel);
}

.full-system-chassis__core > p {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 0.85rem;
  border-bottom: 1px solid var(--system-line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.53rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.full-system-chassis__core > span {
  display: flex;
  align-items: center;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--system-line-soft);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.full-system-chassis__core > span:last-child { border-bottom: 0; }
.full-system-chassis__core > span:nth-child(3) { color: var(--amber); }

/* ---------- selected alpha research chambers ---------- */

/*
 * Alpha is a bounded research service, not a signal terminal. The two upper
 * fields name the research question and its conditions; the lower pair keeps
 * the modelled comparison separate from any performance claim or pipeline.
 */
#alpha-research {
  --alpha-panel: #0b1a2a;
  --alpha-panel-soft: #0d2136;
  --alpha-line: #35536e;
  --alpha-line-soft: #223d56;
  background: #0a1c30;
}

.alpha-research-chambers {
  overflow: hidden;
  margin-top: 3rem;
  border: 1px solid var(--alpha-line);
  background: var(--alpha-panel);
}

.alpha-research-chambers__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.alpha-research-chambers__fact {
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
}

.alpha-research-chambers__fact + .alpha-research-chambers__fact { border-left: 1px solid var(--alpha-line); }

.alpha-research-chambers__fact > p,
.alpha-research-chambers__comparison-label,
.alpha-research-chambers__branch > p {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.alpha-research-chambers__fact > p { margin: 0 0 1rem; color: var(--muted); }

.alpha-research-chambers__fact h3 {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.alpha-research-chambers__fact > span {
  display: block;
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 0.83rem;
  line-height: 1.6;
}

.alpha-research-chambers__handoff {
  margin: 0;
  padding: 1.15rem clamp(1.25rem, 3vw, 2rem);
  border-top: 1px solid var(--alpha-line);
  border-bottom: 1px solid var(--alpha-line);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.55;
}

.alpha-research-chambers__comparison {
  margin: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: #091a2b;
}

.alpha-research-chambers__comparison-label { margin: 0 0 0.75rem; color: var(--cyan); }

.alpha-research-chambers__comparison h3 {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.alpha-research-chambers__branches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.alpha-research-chambers__branch {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--alpha-line-soft);
  background: var(--alpha-panel-soft);
}

.alpha-research-chambers__branch > p { margin: 0 0 0.8rem; color: var(--muted); font-size: 0.57rem; }

.alpha-research-chambers__test-setup {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: center;
}

.alpha-research-chambers__test-setup > span {
  position: relative;
  display: grid;
  min-height: 2.5rem;
  place-items: center;
  padding: 0.45rem;
  border: 1px solid var(--alpha-line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-align: center;
  text-transform: uppercase;
}

.alpha-research-chambers__test-setup > span:not(:last-child)::after {
  position: absolute;
  top: 50%;
  right: -1rem;
  width: 1rem;
  border-top: 1px solid var(--alpha-line);
  content: '';
}

.alpha-research-chambers__test-node--forecast { border-color: var(--cyan) !important; color: var(--cyan) !important; }
.alpha-research-chambers__test-node--empty { border-style: dashed !important; color: var(--muted) !important; }

.alpha-research-chambers__comparison-copy {
  max-width: 44rem;
  margin: 1.4rem 0 0.7rem;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.55;
}

.alpha-research-chambers__comparison-boundary {
  max-width: 44rem;
  margin: 0;
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.5;
}

/* ---------- selected strategy evaluation ledger ---------- */

/*
 * Strategy is a decision surface: a forecast and an existing rule set are
 * equally valid ways in. The highlighted lower record is a boundary, not a
 * third product or a subsequent delivery step.
 */
.band--strategy {
  --strategy-panel: #10161d;
  --strategy-panel-soft: #151e27;
  --strategy-line: #596977;
  background: #121921;
}

.strategy-ledger {
  overflow: hidden;
  margin-top: 3rem;
  border: 1px solid var(--strategy-line);
  background: var(--strategy-panel);
}

.strategy-ledger__row {
  display: grid;
  grid-template-columns: minmax(10rem, 0.34fr) minmax(15rem, 0.9fr) minmax(14rem, 0.9fr);
  column-gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: 1.5rem clamp(1.25rem, 3vw, 2rem);
  border-bottom: 1px solid var(--strategy-line);
}

.strategy-ledger__row:last-child { border-bottom: 0; }

.strategy-ledger__row > p {
  grid-row: 1 / span 2;
  margin: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.61rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.strategy-ledger__row h3 {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.strategy-ledger__row > span {
  display: block;
  margin-top: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.6;
}

.strategy-ledger__row--boundary {
  border-left: 3px solid var(--amber);
  background: var(--strategy-panel-soft);
}

.strategy-ledger__row--boundary > p { color: var(--amber); }

/*
 * Risk is a scoped research board, not a generic control product. Its three
 * terms are areas that may be examined, never live values, alerts or limits.
 * The boundary has equal visual presence so the block cannot read as a risk
 * platform advert.
 */
.band--risk {
  --risk-panel: #0f1719;
  --risk-panel-soft: #172126;
  --risk-line: #546b73;
  background: #11191c;
}

#risk .risk-specimen-board {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(15rem, 0.8fr);
  grid-template-areas:
    'scope boundary'
    'marks boundary';
  overflow: hidden;
  min-height: 21rem;
  margin-top: 3rem;
  border: 1px solid var(--risk-line);
  background: var(--risk-line);
}

#risk .risk-specimen-board__scope,
#risk .risk-specimen-board__marks,
#risk .risk-specimen-board__boundary {
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--risk-panel);
}

#risk .risk-specimen-board__scope { grid-area: scope; }

#risk .risk-specimen-board__marks {
  grid-area: marks;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: flex-end;
  border-top: 1px solid var(--risk-line);
  background: var(--risk-panel-soft);
}

#risk .risk-specimen-board__marks > span {
  display: block;
  padding: 0.65rem 0.55rem;
  border: 1px solid var(--risk-line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.57rem;
  letter-spacing: 0.09em;
  line-height: 1.35;
  text-align: left;
  text-transform: uppercase;
}

#risk .risk-specimen-board__boundary {
  grid-area: boundary;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 2px solid var(--amber);
}

#risk .risk-specimen-board article > p {
  margin: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.61rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#risk .risk-specimen-board article h3 {
  margin: 0.85rem 0 0;
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

#risk .risk-specimen-board article > span {
  display: block;
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.6;
}

#risk .risk-specimen-board__boundary > p { color: var(--amber); }

/*
 * Production is two possible places to begin work. The two records are not a
 * deployment plan or an implementation sequence; the lower treatment merely
 * holds the explicit boundary against a generic platform or latency promise.
 */
.band--production {
  --production-panel: #1e1a14;
  --production-panel-soft: #17140f;
  --production-line: #655a45;
  background: #191612;
}

#production .production-constraint-register {
  overflow: hidden;
  margin-top: 3rem;
  border: 1px solid var(--production-line);
  background: var(--production-panel);
}

#production .production-constraint-register__row {
  display: grid;
  grid-template-columns: minmax(11rem, 0.32fr) minmax(15rem, 0.88fr) minmax(14rem, 0.8fr);
  column-gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: clamp(1.25rem, 3vw, 2rem);
  border-bottom: 1px solid var(--production-line);
}

#production .production-constraint-register__row:last-child { border-bottom: 0; }
#production .production-constraint-register__row > p { grid-row: 1 / span 2; }
#production .production-constraint-register__row--new { background: var(--production-panel-soft); }

#production .production-constraint-register article > p {
  margin: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.61rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#production .production-constraint-register article h3 {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

#production .production-constraint-register article > span {
  display: block;
  margin-top: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.6;
}

#production .production-constraint-register__row--new > p { color: var(--amber); }

/*
 * Boundaries close the commercial scope after the four services. These remain
 * four exclusions, not four offers: no controls, indicators or links make the
 * counter-modules read as a second service catalogue.
 */
.band--boundaries {
  --boundaries-panel: #14171b;
  --boundaries-panel-soft: #1c2025;
  --boundaries-line: #525b65;
  background: #181b20;
}

#boundaries .boundaries-four-plates {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  min-height: 19rem;
  margin-top: 3rem;
  border-top: 1px solid var(--boundaries-line);
  border-bottom: 1px solid var(--boundaries-line);
  background: var(--boundaries-line);
}

#boundaries .boundaries-four-plates article {
  min-width: 0;
  padding: clamp(1.1rem, 2.5vw, 1.65rem);
  background: var(--boundaries-panel);
}

#boundaries .boundaries-four-plates article:nth-child(even) {
  background: var(--boundaries-panel-soft);
}

#boundaries .boundaries-four-plates article h3 {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

#boundaries .boundaries-four-plates article > span {
  display: block;
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.6;
}

#boundaries .boundaries-four-plates__plate--methods { border-top: 2px solid var(--amber); }

/* ---------- footer ---------- */

.site-footer {
  background: var(--ink);
  border-top: 1px solid var(--line-soft);
  padding: 4rem 0 3rem;
  font-size: 0.875rem;
  color: var(--muted-2);
}

.site-footer p { max-width: 52rem; }

.footer-meta {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ---------- undecided values ---------- */

/* inside the amber button the amber-on-amber placeholder is invisible */
.btn .placeholder {
  color: var(--navy);
  border-color: rgba(10, 27, 47, 0.55);
}

.placeholder {
  font-family: var(--mono);
  font-size: 0.9em;
  color: var(--amber);
  border: 1px dashed var(--amber);
  padding: 0.05em 0.35em;
  white-space: nowrap;
}

/* ---------- utilities ---------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

a { color: var(--amber); }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* ---------- data panels ---------- */
/*
 * Charts carry only measurements we have actually taken. The design draft's
 * hero panel and chart cards are built on invented figures; none of those
 * numbers appear here.
 *
 * Encoding: one measure, so one hue. Amber is the value under discussion,
 * slate the reference it is compared against — not two identities, so no
 * legend. Every value is direct-labelled and also stated in the prose beside
 * the chart, so nothing is carried by colour alone. Contrast against the panel
 * surface #081522: amber 10.3:1, slate 7.2:1.
 */

.panel {
  /* <figure> carries a browser default margin of 1em 40px; unreset, the panel
     lost 80px of its column and its own labels wrapped. */
  margin: 0;
  border: 1px solid var(--line);
  background: var(--navy-deep);
  padding: clamp(1rem, 3vw, 1.25rem);
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line-soft);
  /* without this the right-hand tag ("Illustration") was pushed out of the
     panel and clipped: 118px of it were off the edge at 375px */
  flex-wrap: wrap;
}

.panel-head .live { color: var(--cyan); }

.panel-foot {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line-soft);
}

.panel-foot div {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.panel-foot b {
  display: block;
  margin-top: 0.35rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.panel-foot b.hi { color: var(--amber); }

.chart { display: block; width: 100%; height: auto; margin-top: 1rem; }
.chart .grid-line { stroke: var(--line-soft); stroke-width: 1; }
.chart .axis-text {
  font-family: var(--mono);
  font-size: 9px;
  fill: var(--muted-2);
  letter-spacing: 0.08em;
}
.chart .value-text {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  fill: var(--text);
  font-variant-numeric: tabular-nums;
}
.chart .bar-hi { fill: var(--amber); }
.chart .bar-ref { fill: var(--muted); }
.chart .schema-a { fill: var(--muted-2); }
.chart .schema-b { fill: var(--cyan); }
.chart .schema-c { fill: var(--amber); }
.chart .withheld {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  fill: var(--muted-2);
}
.chart .withheld-box {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

/*
 * The heading shares the row with the figure, so it gets a smaller ceiling
 * than a full-width h1 would. At the previous size it broke into six lines in
 * its column and read as a wall rather than as two sentences.
 */
.hero-cols h1 {
  max-width: 16ch;
  font-size: clamp(2.15rem, 3.5vw, 3.35rem);
}
.hero-cols .lead { font-size: 1.0625rem; max-width: 40rem; }

/* hero: text left, measurement panel right. The ratio is the reference's. */
.hero-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(19rem, 0.84fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
  width: 100%;
}

/* ---------- selected hero system frame ---------- */

.hero-panel--layers { padding: clamp(1rem, 3vw, 1.25rem); }

.hero-system-layers {
  position: relative;
  display: grid;
  min-height: 19.5rem;
  margin-top: 1rem;
  padding: 1.25rem 1rem 0.9rem 2.15rem;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--navy);
}

.hero-system-layers::before {
  position: absolute;
  top: 1.25rem;
  bottom: 0.9rem;
  left: 1rem;
  width: 0.65rem;
  border-top: 1px solid var(--amber);
  border-bottom: 1px solid var(--amber);
  border-left: 1px solid var(--amber);
  content: '';
}

.hero-system-layers > div {
  display: grid;
  grid-template-columns: minmax(5rem, 0.8fr) minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
  border-bottom: 1px solid var(--line-soft);
}

.hero-system-layers > div:first-child { border-top: 1px solid var(--line-soft); }

.hero-system-layers strong { color: var(--text); font-size: 0.83rem; font-weight: 600; }
.hero-system-layers small { color: var(--muted); font-size: 0.68rem; }

.hero-system-layers__note {
  margin: 0.8rem 0 0;
  color: var(--muted-2);
  font-family: var(--mono);
  font-size: 0.57rem;
  letter-spacing: 0.07em;
  line-height: 1.45;
  text-transform: uppercase;
}

/* ---------- pipeline, on the New to HFT page ---------- */
/*
 * The strip of six tiles left the landing on 2026-08-30 with the block it
 * belonged to. On its new page the chain is not a decorative strip: it is the
 * thing the page exists to explain, so each step carries the sentence that was
 * a tooltip before. Numbers and labels stayed, the icons did not — they were
 * decoration, and nothing graphic on this site is decoration.
 */

/*
 * Мера описания — та же, что у всех слотов на странице: 42rem, около 85 знаков
 * в строке.
 *
 * Ширину держит сам список, а не потолок на ячейке. Ячейка описания при полной
 * колонке выходила 816px, то есть 110 знаков в строке, — на странице получались
 * две разные меры текста без причины (замечание ревью 30.08). Ограничить одну
 * ячейку значило бы оставить дыру внутри ряда, а расширять колонку названия до
 * 23rem — держать пустоту под словом «Order book».
 *
 * Поэтому потолок стоит на списке: 4.5rem номера + 14rem названия + два зазора
 * по 2rem + 42rem описания = 64.5rem. Ряды кончаются там же, где кончается
 * описание, и линейки между ними — тоже.
 */
.chain {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  max-width: 64.5rem;
  border-top: 1px solid var(--line-soft);
}

.chain li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 14rem) minmax(0, 1fr);
  gap: 0 2rem;
  align-items: baseline;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line-soft);
}

.chain .n {
  font-family: var(--mono);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--muted-2);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.chain .label {
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}

.chain p { color: var(--muted); margin: 0; }

/* the root of the offer, and the only step the page marks */
.chain .is-alpha .n,
.chain .is-alpha .label { color: var(--amber); }

.chain .is-alpha {
  background: rgba(255, 180, 0, 0.05);
  box-shadow: inset 3px 0 0 var(--amber);
  padding-left: 1.25rem;
  margin-left: -1.25rem;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
}

.section-head .aside {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.6;
  text-align: right;
  color: var(--muted-2);
  max-width: 20rem;
  margin: 0;
}

/* ---------- schematic chart lines ---------- */
/*
 * The hero figure is a schematic, labelled as one in its header: it shows what
 * the system produces, not a measurement. No values are plotted and no axis
 * carries numbers, so there is nothing here that could be read as a result.
 *
 * Two identities, so amber and cyan sit outside the dark lightness band the
 * validator wants (L 0.82 and 0.69 against 0.48-0.67). They are kept because
 * they are the brand accents and because identity is carried twice over
 * anyway: each line is direct-labelled and a legend repeats both.
 */

.chart .line-observed {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/*
 * Solid, and thinner than the mid line. The prediction is a dense 240-point
 * series; a dashed stroke turned it into noise and the mid price disappeared
 * underneath it.
 */
.chart .line-predicted {
  fill: none;
  stroke: var(--amber);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}

.chart .now-line { stroke: var(--muted-2); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .label-observed { fill: var(--cyan); }
.chart .label-predicted { fill: var(--amber); }

.legend-row {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.legend-row span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.legend-row i {
  width: 14px;
  height: 2px;
  background: currentColor;
  display: inline-block;
}

.legend-row .k-observed { color: var(--cyan); }
.legend-row .k-predicted { color: var(--amber); }

/* ---------- chart tooltips ---------- */
/*
 * Every figure on the page explains itself on hover and on keyboard focus.
 * The explanatory sentences are microcopy for the diagrams, not page copy;
 * they still need the content side's sign-off.
 */

.hot { cursor: help; outline: none; }

/*
 * Hovering brightens the group it is on and dims the rest. Never set opacity
 * to 1 here: marks like the horizon band are deliberately faint, and forcing
 * them opaque swallows the chart underneath.
 *
 * The dimming lives under a hover guard. On a touch screen a tap leaves a
 * sticky :hover behind, so the unguarded version dimmed the whole figure to
 * 40 per cent and left it that way. Touch gets .is-open instead, set by the
 * page when a tooltip is opened by tapping.
 */
.hot { transition: filter 120ms ease, opacity 120ms ease; }
.hot:focus-visible,
.hot.is-open { filter: brightness(1.35); }
.hot:focus-visible { outline: 1px dashed var(--amber); outline-offset: 2px; }

/*
 * Anchored in fixed coordinates the page computes. It is clamped to the
 * viewport on both axes and flips above its anchor when there is no room
 * below; on a narrow screen it stops floating and becomes a sheet across the
 * bottom instead. The old version offset the pointer by +16 and clamped to
 * innerWidth - 380, which is negative on any phone.
 */
.tip {
  position: fixed;
  z-index: 60;
  max-width: min(22rem, calc(100vw - 1rem));
  background: var(--ink);
  border: 1px solid var(--line);
  padding: 0.8rem 0.95rem;
  pointer-events: none;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.tip b {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 0.4rem;
}

.tip span {
  display: block;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text);
}

.hint {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-top: 0.85rem;
}

.hero-panel {
  position: relative;
  z-index: 1;
  padding: clamp(1rem, 3.5vw, 1.75rem);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.14);
}
.hero-panel .chart { margin-top: 1.5rem; }

/* day-timeline explanation used in the evidence section */
.chart .day-band { fill: var(--line-soft); }
.chart .day-hit { fill: var(--amber); }
.chart .day-hit-ref { fill: var(--muted); }
.chart .row-label {
  font-family: var(--mono);
  font-size: 9px;
  fill: var(--muted);
  letter-spacing: 0.08em;
}

/*
 * A caveat that must travel with a figure. Quiet: it is a condition on the
 * number, not a heading — set as sentence text, not as a mono label, because
 * in a narrow card the uppercase mono version wrapped to three lines and read
 * louder than the chart it qualifies.
 */
.caveat {
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--muted-2);
}

/*
 * The fold schematic is the object of its section, so it takes the whole
 * content column. It used to be capped at 34rem for a reason that no longer
 * applies: an SVG scales its own type with its box, and at full width the 9px
 * labels in a 320-unit viewBox rendered at 30px and shouted. The cap fixed the
 * type and left 664px of the column empty beside the figure.
 *
 * The schematic is now built out of boxes instead, so its labels are ordinary
 * HTML text at a fixed size and the geometry is free to be as wide as the
 * column. Proportions are the ones the SVG had: 104 · 26 · 44 · 26 · 104 with
 * a 4-unit gap, out of 320.
 */
.panel--fold { margin-top: 3rem; }

.fold-axis,
.fold-note {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 1.25rem 0 0.6rem;
}

.fold-note { margin: 0.6rem 0 0; }

.fold-strip {
  display: grid;
  grid-template-columns: 104fr 26fr 44fr 26fr 104fr;
  gap: 4px;
}

.fold-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(3.25rem, 5vw, 4.5rem);
  border-radius: 3px;
  outline: none;
}

.fold-label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
}

.fold-seg--train { background: var(--muted-2); }
.fold-seg--validate { background: var(--cyan); }
.fold-seg--test { background: var(--amber); }

/*
 * The embargo gap has to be visibly a gap, not a fourth colour. The SVG
 * version filled its hatch pattern with var(--surface-2), and no such token
 * exists in this system: the declaration was invalid, the backing painted
 * black, and the two embargo blocks read as holes rather than as hatching.
 */
.fold-seg--embargo {
  background-color: var(--navy);
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 3px,
    var(--muted-2) 3px 4.5px
  );
  border: 1px solid var(--line);
}

.fold-seg--embargo .fold-label { color: var(--text); }

/* ---------- rules under the schematic, two columns ---------- */

.rules { margin-top: 2.5rem; }

.rules .rule {
  display: grid;
  grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  gap: 0 3rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line-soft);
}

.rules .rule:first-child { border-top: 1px solid var(--line-soft); }

.rules dt {
  color: #fff;
  font-weight: 600;
}

.rules dd { margin: 0; color: var(--muted); }

/*
 * A way on to another page that is not a call to action. The only button on
 * the site is the email one; everything else that leads somewhere is text.
 */
.more {
  margin-top: 2rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.more a { text-decoration: none; border-bottom: 1px solid currentcolor; }
.more a::after { content: '\00a0\2192'; }  /* a plain space in content collapses */


/*
 * The evidence cells hold figures, not prose, so they fold on a different
 * measure from the text grids. An SVG scales its own type with its box, and at
 * three columns in a 900px window each cell was 213px wide — the 9px labels in
 * a 300-unit viewBox rendered at 6.4px. The floor here keeps a figure cell wide
 * enough to read; the ceiling on the chart stops the same labels reaching 19px
 * when a cell goes full width. Between them the labels stay in 9-12.5px.
 */
#evidence .grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}

#evidence .chart { max-width: 26rem; }

/* ---------- plot grid inside a figure ---------- */
/*
 * The reference draws a grid inside the plot, not just an axis line or two.
 * It is what makes the panel read as an instrument rather than as a picture.
 */
.chart .plot-grid line { stroke: var(--line-soft); stroke-width: 1; }
.chart .plot-frame { fill: none; stroke: var(--line-soft); stroke-width: 1; }

/*
 * Three columns while three fit. Below that they fold rather than squeeze:
 * at 375px the fixed three-column version gave each cell 17px and broke
 * "Not reported" onto three lines of one word each.
 */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
}

.stat-row div {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.stat-row b {
  display: block;
  margin-top: 0.5rem;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.stat-row b.hi { color: var(--amber); }
.stat-row b.cy { color: var(--cyan); }

/* ---------- hero plot, geometry copied from the reference ---------- */
/*
 * The reference stretches its plot with preserveAspectRatio="none" at a fixed
 * height and puts NO text inside the svg — non-uniform scaling would distort
 * it. Labels therefore live in HTML beside the figure, not in the drawing.
 */
.chart--stretch {
  display: block;
  width: 100%;
  height: clamp(9rem, 26vw, 14rem);
  margin-top: 1.75rem;
}

.plot-grid-path { stroke: #24384b; stroke-width: 1; fill: none; }

.chart-legend {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin-top: 1.25rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.chart-legend .k-observed { color: var(--cyan); }
.chart-legend .k-predicted { color: var(--amber); }

/* the reference gives this band a hairline on both edges, not just the top */
.band--edged { border-bottom: 1px solid var(--line-soft); }


/* ---------- fit: weight, not symmetry ---------- */
/*
 * The two columns used to be identical boxes, and a reader could not tell
 * which one was about them. They are not the same kind of statement: the left
 * is the address of the page, the right is a filter. So the left keeps the
 * panel and gets an accent mark per item with its text in the reading colour,
 * and the right drops the surface entirely and sits in grey.
 */

.fit-col--no {
  background: transparent;
  padding: clamp(1.5rem, 4vw, 2.5rem) 0 0;
}

.band--ink .fit-col--no,
.band--deep .fit-col--no { background: transparent; }

.fit-col h3 {
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.fit-col--no h3 { color: var(--muted); }
.fit-col--no .pairs dt { color: var(--muted); font-weight: 500; }
.fit-col--no .pairs dd { color: var(--muted-2); }

.fit-col--yes .pairs dd { color: var(--text); }

.pairs--marked .pair { position: relative; padding-left: 1.5rem; }

.pairs--marked .pair::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.9rem;
  width: 0.6rem;
  height: 2px;
  background: var(--amber);
}

/* ---------- ways in: what crosses the boundary ---------- */
/*
 * One schematic per card, same shape in all three, so the three ways in can be
 * compared at a glance rather than read in sequence. It also gives the third
 * card its weight: two lines of text against six, but the strongest diagram of
 * the three — nothing crosses at all.
 *
 * Built out of boxes rather than SVG for the same reason as the fold: the
 * labels are words, and words should not scale with the box that holds them.
 */

.grid > .cell { display: flex; flex-direction: column; }

.flow {
  display: grid;
  grid-template-columns: auto minmax(2.5rem, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1.75rem;
}

.flow-node {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 0.5rem 0.6rem;
  line-height: 1.35;
}

.flow-node i {
  display: block;
  font-style: normal;
  color: var(--cyan);
}

.flow-node--us { border-style: dashed; }

.flow-link {
  position: relative;
  height: 1px;
  background: var(--line);
}

.flow-link b {
  position: absolute;
  left: 50%;
  bottom: 0.4rem;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
  white-space: nowrap;
}

/* the crossing that does not happen: the line is broken, in amber */
.flow--blocked .flow-link {
  background: linear-gradient(
    90deg,
    var(--line-soft) 0 42%,
    transparent 42% 58%,
    var(--line-soft) 58% 100%
  );
}

.flow--blocked .flow-link::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -0.4rem;
  width: 2px;
  height: 0.8rem;
  background: var(--amber);
  transform: translateX(-50%);
}

.flow--blocked .flow-link b { color: var(--amber); }

/* ---------- staged work: the row, and the decision between rows ---------- */
/*
 * The row is number · title · meta. The meta column is a list, so the price
 * field slots in beside the time one when there is a price to state; nothing
 * about the row has to be re-cut for it. It is empty on stages 02 and 03
 * because the copy names no duration there, and an invented one is worse than
 * a gap.
 */

/*
 * Номер, название и поле идут одной строкой и в одном потоке.
 *
 * Сеткой из трёх колонок поле уезжало к правому краю: текст ступени кончался
 * на 840px, поле начиналось на 1078 — 240px пустоты между ними, и поле
 * читалось отдельной колонкой, а не частью ряда. У ступеней 02 и 03 поля нет
 * вовсе, и пустая колонка держала под них место, которого не просили.
 * Замер ревьюера 30.08.
 *
 * Flex вместо сетки: поле встаёт сразу за названием, отсутствие поля ничего
 * не оставляет за собой, а поле цены, когда оно появится, просто добавится
 * следующим элементом списка.
 */
.stage-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
}

.stage-head h3 { margin-right: 0.25rem; }

.stage-n { margin-bottom: 0; }

.stage-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
}

.stage-meta li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  border: 1px solid var(--line-soft);
  padding: 0.2rem 0.6rem;
}

.stage-meta .k {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.stage-meta .v {
  font-size: 0.875rem;
  color: var(--text);
}

.stage-body { margin-top: 1.25rem; }
.stage-body > p:first-child { margin-top: 0; }

/*
 * Between two stages there is a person deciding, not an arrow. The fork has
 * two outcomes drawn: one continues, one ends. No text inside the drawing, so
 * it does not scale its own labels.
 */
/*
 * Развилка — стык между двумя ступенями, а не значок при одной. Поэтому она
 * идёт через весь ряд: глиф, подпись и линия до правого края. Ревьюер 30.08
 * прочитал прежний мелкий глиф сбоку как повторяющийся элемент, стоящий не
 * везде; стыков между тремя ступенями ровно два, и в этом виде это видно.
 */
.gate {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 0 1rem;
  margin: 2.25rem 0 0;
  padding-left: 2rem;
}

.gate-rule { height: 1px; background: var(--line-soft); }

.gate-fork { width: 1.5rem; height: 2.25rem; flex: none; overflow: visible; }
.gate-fork path { fill: none; stroke-width: 1.5; }
.gate-fork .gate-trunk,
.gate-fork .gate-stop { stroke: var(--muted-2); }
.gate-fork .gate-go { stroke: var(--amber); }

.gate-text {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}

/* ---------- an aside the reader opens ---------- */

.more-inline { margin-top: 1rem; }

.more-inline summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  list-style: none;
}

.more-inline summary::-webkit-details-marker { display: none; }
.more-inline summary::before { content: '+ '; color: var(--amber); }
.more-inline[open] summary::before { content: '\2212 '; }
.more-inline summary:focus-visible { outline: 1px dashed var(--amber); outline-offset: 3px; }
.more-inline > p { margin-top: 1rem; }

/* ---------- the one line of a block that is the block ---------- */

.dictum {
  margin: 2.5rem 0 0;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 30rem;
  border-left: 2px solid var(--amber);
  padding-left: 1.5rem;
}

/*
 * The four remaining boundaries are set small under it, in two columns: one
 * column of four ran to 46rem and left 39% of the row empty.
 */
.plain--cols {
  columns: 2;
  column-gap: 4rem;
  max-width: none;
}

.plain--cols li {
  break-inside: avoid;
  max-width: none;
  font-size: 0.9375rem;
}

/* the dash markers were 8x1px and invisible; they are a mark or they are not */
.plain li::before { width: 0.875rem; height: 2px; top: 0.6rem; }

/* ---------- principal ---------- */

.who {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.who-main .lead { max-width: 40rem; }

/* the portrait, when there is a name to put under it, goes above this list */
.who-side {
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
}

/* ---------- inner pages ---------- */

/* the band's own bottom padding is dropped, not zeroed: the lead was sitting
   flush against the next band's edge */
.page-head { padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.5rem, 5vw, 3.5rem); }
.page-head h1 { font-size: clamp(2rem, 4.4vw, 3.25rem); }
.page-head .lead { max-width: 42rem; }

/*
 * Lists whose section heading is set for screen readers only. The heading
 * takes no height, so the list's own top margin — sized to clear a heading —
 * opened about 150px of nothing under the band edge.
 */
.visually-hidden + .faq,
.visually-hidden + .rules,
.visually-hidden + .panel { margin-top: 0; }

.back {
  margin-top: 3rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.back a { text-decoration: none; border-bottom: 1px solid currentcolor; }
.back a::before { content: '\2190\00a0'; }

/*
 * A slot for copy that has been commissioned and not yet written. It reserves
 * the space the layout was designed around and states the budget it was
 * designed for, so the text can be written to the page rather than the page
 * stretched around the text.
 */
.copy-slot {
  border: 1px dashed var(--line);
  padding: 1.25rem;
  margin-top: 1.5rem;
  color: var(--muted-2);
  /*
   * The measure, not the column. A slot the full width of the content column
   * is 1134px, which is about 153 characters a line — unreadable, and the
   * budget written against it would have been wrong by half. The width of the
   * block is carried by its schematic; the prose keeps a reading measure, and
   * the copy that replaces the placeholder keeps it too.
   */
  max-width: 42rem;
}

/* внутри ряда цепочки: без коробки во всю колонку и без потолка в 42rem —
   мера там задана самой колонкой описания, и бюджет посчитан по ней */
/* поля по горизонтали те же, что у обычного слота, иначе мера разъезжается на
   пару знаков; по вертикали теснее, потому что слот стоит внутри ряда */
.copy-slot--row {
  max-width: none;
  margin-top: 0;
  padding: 0.6rem 1.25rem;
}

.copy-slot::after {
  content: attr(data-budget);
  display: block;
  margin-top: 0.75rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* ---------- horizon schematic: two rulers over one stretch ---------- */

.chart .mark-row line { stroke: var(--muted); stroke-width: 1; }
.chart .mark-row--even line { stroke: var(--muted-2); }
/*
 * Подложка обоих отрезков нейтральная, как полоса train в схеме фолда, а
 * янтарь стоит в полную силу тонкой полосой поверх.
 *
 * Было: fill янтарём при opacity 0.16. Поверх --navy это композитится в
 * rgb(49, 52, 39) — оливково-болотный, единственный цвет вне палитры на всём
 * сайте. Разбавленный акцент перестаёт быть акцентом и становится новым
 * оттенком: у янтаря вся сила в том, что он один.
 */
.chart .span-ref { fill: var(--muted-2); opacity: 0.14; }
.chart .span-edge { fill: var(--amber); }

/* a figure and the text about it, side by side */
.split {
  display: grid;
  grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  margin-top: 2.5rem;
}

.split .copy-slot { margin-top: 0; }

/* ---------- glossary ---------- */

.glossary {
  margin-top: 2.5rem;
  border-top: 1px solid var(--line-soft);
}

.glossary .term {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 0 2.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line-soft);
}

.glossary dt {
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--amber);
}

.glossary dd { margin: 0; color: var(--muted); }


/* ============================================================
 * RESPONSIVE
 *
 * Every breakpoint in the file lives below this line, in descending order.
 * Nothing that is not a media query goes here.
 *
 * The rule exists because of a bug worth remembering. The breakpoints used to
 * be scattered through the file, and one base rule — `.hero-cols` restating
 * the reference's column ratio — sat *below* `@media (max-width: 980px)`. By
 * source order it won at every width, so the hero never stacked: on a 375px
 * screen its panel was 139px wide and the figure inside it 82px. Nothing in
 * the markup was wrong and no override was missing; the cascade just read the
 * file in order. Keeping the overrides last makes that class of mistake
 * impossible to write by accident.
 *
 * The switches, and what each one is for:
 *   1100  the hero's two columns stop being comfortable
 *   1040  the principal's two columns stack; the boundaries list drops to one
 *    980  the hero stacks
 *    900  the section aside stops being right-aligned; the rules stop being two
 *         columns; the chain drops its label column
 *    820  paired cells become one column
 *    640  phone: the sticky header compacts, indents shrink
 *    560  the tooltip becomes a bottom sheet (this value is also in index.vue)
 *    440  the fold segments are too narrow to hold their own labels
 *    400  the tightest screens: placeholders may wrap
 * ============================================================ */

/* The four detailed services read as one numbered catalogue on wide screens. */
@media (min-width: 981px) {
  #alpha-research > .wrap,
  #strategy-work > .wrap,
  #risk > .wrap,
  #production > .wrap {
    display: grid;
    grid-template-columns: minmax(7.5rem, 0.18fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 5rem);
  }

  #alpha-research > .wrap > .eyebrow,
  #strategy-work > .wrap > .eyebrow,
  #risk > .wrap > .eyebrow,
  #production > .wrap > .eyebrow {
    grid-column: 1;
    grid-row: 1 / span 6;
    align-self: start;
    margin-top: 0.55rem;
    margin-bottom: 0;
  }

  #alpha-research > .wrap > h2,
  #alpha-research > .wrap > .lead,
  #alpha-research > .wrap > .alpha-research-chambers,
  #strategy-work > .wrap > h2,
  #strategy-work > .wrap > .lead,
  #strategy-work > .wrap > .strategy-ledger,
  #risk > .wrap > h2,
  #risk > .wrap > .lead,
  #risk > .wrap > .risk-specimen-board,
  #production > .wrap > h2,
  #production > .wrap > .lead,
  #production > .wrap > .production-constraint-register {
    grid-column: 2;
  }
}

@media (max-width: 1100px) {
  .hero-cols { gap: 2rem; }
}

@media (max-width: 1040px) {
  /* the research list goes under the text rather than beside it */
  .who { grid-template-columns: minmax(0, 1fr); }
  .plain--cols { columns: 1; }
}

@media (max-width: 980px) {
  /* stacked, so the figure gets the full column and the headline its own line */
  .hero-cols { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .hero .wrap { min-height: 0; align-items: flex-start; }
  .hero-cols h1 { font-size: clamp(2rem, 5.2vw, 3rem); }
  .hero-cols .lead { max-width: 46rem; }
  .corner { top: -1rem; right: -1rem; width: 6rem; height: 6rem; }

  .service-coupled { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-coupled__module:nth-child(2)::after { display: none; }
  .service-coupled__module:nth-child(n + 3) { margin-top: 0.7rem; }

}

@media (max-width: 940px) {
  .full-system-chassis {
    grid-template-columns: minmax(12rem, 0.8fr) minmax(15rem, 1.2fr);
    min-height: 0;
  }
  .full-system-chassis__scenario--existing {
    grid-column: 1 / -1;
    border-top: 1px solid var(--system-line);
    border-left: 0;
  }
  .full-system-chassis__scenario--existing::before { display: none; }
}

@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .section-head { gap: 1.5rem; }
  .section-head .aside { text-align: left; max-width: none; }

  /* term over description, rather than a 24rem column squeezing both */
  .rules .rule { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
  .glossary .term { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }

  .chain li { grid-template-columns: 3rem minmax(0, 1fr); gap: 0 1.25rem; }
  .chain .label { grid-column: 2; }
  .chain p { grid-column: 2; margin-top: 0.5rem; }
}

@media (max-width: 820px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .fit { grid-template-columns: minmax(0, 1fr); }
  #services .grid > .cell { min-height: 0; }
}

@media (max-width: 740px) {
  .strategy-ledger__row { display: block; }
  .strategy-ledger__row > p { margin-bottom: 0.85rem; }
  .strategy-ledger__row > span { margin-top: 0.75rem; }
}

@media (max-width: 940px) {
  #production .production-constraint-register__row {
    grid-template-columns: minmax(10rem, 0.34fr) minmax(0, 1fr);
  }

  #production .production-constraint-register__row > span {
    grid-column: 2;
    margin-top: 0.75rem;
  }
}

@media (max-width: 700px) {
  #production .production-constraint-register__row { display: block; }
  #production .production-constraint-register__row > p { margin-bottom: 0.85rem; }
  #production .production-constraint-register__row > span { margin-top: 0.75rem; }
}

@media (max-width: 940px) {
  #boundaries .boundaries-four-plates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  #boundaries .boundaries-four-plates { grid-template-columns: 1fr; min-height: 0; }
}

@media (max-width: 700px) {
  #risk .risk-specimen-board { display: block; min-height: 0; }

  #risk .risk-specimen-board__scope,
  #risk .risk-specimen-board__marks,
  #risk .risk-specimen-board__boundary {
    border: 0;
    border-bottom: 1px solid var(--risk-line);
  }
}

@media (max-width: 640px) {
  :root { --header-h: 3.75rem; }

  /*
   * The header stays one row. Stacking it put the nav under the brand and made
   * the sticky bar 156px tall — a quarter of a phone screen, held there for
   * the whole scroll. Instead the nav scrolls sideways under a fade, and the
   * bar keeps the height that scroll-margin-top is calculated from.
   */
  .site-header .wrap { gap: 1rem; }
  .brand img { height: 1.375rem; }
  .header-contact { display: none; }
  .nav-contact { display: list-item; }
  .site-header nav {
    overflow-x: auto;
    scrollbar-width: none;
    margin-right: calc(-1 * var(--wrap-pad));
    padding-right: var(--wrap-pad);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.75rem), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 1.75rem), transparent);
  }
  .site-header nav::-webkit-scrollbar { display: none; }
  .site-header nav ul { flex-wrap: nowrap; gap: 1.5rem; }
  .site-header nav a { white-space: nowrap; }

  .stage { margin-top: 2.5rem; padding-left: 1.25rem; }
  .stage-n { font-size: 1.6rem; }
  .stage-head { gap: 0.5rem 1rem; }
  .gate { padding-left: 1.25rem; }
  .dictum { padding-left: 1rem; }
  .plain li { padding-left: 1.5rem; }
  .grid, .pairs, .faq, .plain { margin-top: 2rem; }
  .lead { font-size: 1rem; margin-top: 1.25rem; }
  .statement { font-size: 1.0625rem; }
  .corner { display: none; }
  .hero-system-layers { min-height: 17rem; padding-right: 0.7rem; padding-left: 1.75rem; }
  .hero-system-layers > div { grid-template-columns: 4.7rem minmax(0, 1fr); }
  .hero-system-layers small { font-size: 0.59rem; }

  .service-coupled { grid-template-columns: 1fr; gap: 0; margin-top: 2rem; padding: 0; border: 0; }
  .service-coupled::before { display: none; }
  .service-coupled__module,
  .service-coupled__module:nth-child(n + 3) { min-height: 0; margin-top: 0; padding: 1.2rem 1.2rem 1.2rem 2.4rem; border: 0; border-bottom: 1px solid var(--line-soft); }
  .service-coupled__module:first-child { border-top: 1px solid var(--line-soft); }
  .service-coupled__module:not(:last-child)::after { top: auto; right: auto; bottom: -0.38rem; left: 1.2rem; width: 0.7rem; height: 0.7rem; border: 1px solid var(--amber); background: var(--ink); }
  .service-coupled__module .more { margin-top: 1rem; padding-top: 0; }

  .full-system-chassis { display: flex; min-height: 0; flex-direction: column; gap: 0; margin-top: 2rem; padding: 0; border: 0; }
  .full-system-chassis__scenario { width: 100%; padding: 1.4rem 0; border: 0; border-bottom: 1px solid var(--system-line); }
  .full-system-chassis__scenario--new::after { display: none; }
  .full-system-chassis__scenario--existing::before { display: none; }
  .full-system-chassis__core { width: 100%; min-height: 16rem; order: 2; margin: 1.25rem 0; }
  .full-system-chassis__scenario--new { order: 1; }
  .full-system-chassis__scenario--existing { order: 3; }

  .alpha-research-chambers { margin-top: 2rem; }
  .alpha-research-chambers__facts,
  .alpha-research-chambers__branches { grid-template-columns: 1fr; }
  .alpha-research-chambers__fact + .alpha-research-chambers__fact { border-top: 1px solid var(--alpha-line); border-left: 0; }
  .alpha-research-chambers__test-setup { grid-template-columns: 1fr; gap: 0.5rem; }
  .alpha-research-chambers__test-setup > span:not(:last-child)::after { display: none; }

  /* two keys side by side left one of them hanging 57px off the panel */
  .chart-legend { flex-direction: column; gap: 0.4rem; }
  .panel-foot { gap: 1rem; }
}

@media (max-width: 440px) {
  /*
   * At this width the embargo segments are 26/320 of about 340px — 28px, and
   * "Embargo" cannot be set inside them at any size worth reading. The labels
   * move under the strip as a legend; the hatching still says which blocks
   * they name.
   */
  .fold-seg .fold-label { display: none; }
  .fold-seg { height: 2.75rem; }
  .fold-note { color: var(--muted); }
}

@media (max-width: 400px) {
  /* nowrap keeps a placeholder readable as one token, but ⟨LINK: plain-language
     page⟩ is wider than the screen at this size, so here it may break */
  .placeholder { white-space: normal; }
}

/*
 * Hover effects, for pointers that can hover. Everything here has a
 * keyboard-focus equivalent above, and the page adds .is-open on tap, so
 * nothing in this block is the only way to reach a state.
 */
@media (hover: hover) and (pointer: fine) {
  .site-header nav a:hover { color: var(--amber); }
  .hot:hover { filter: brightness(1.35); }
  .chart:hover .hot:not(:hover) { opacity: 0.4; }
  #services .grid > .cell:hover {
    background: #0d243d;
    box-shadow: inset 0 0 0 1px rgba(0, 168, 232, 0.4);
  }
  #services .grid > .cell:hover .more a { color: var(--text); }
  .btn:hover span { transform: translateX(0.3rem); }
}

/* the hint under each figure names the gesture the reader actually has */
.hint .on-touch { display: none; }

@media (hover: none) {
  .hint .on-hover { display: none; }
  .hint .on-touch { display: inline; }
}

/*
 * The tooltip as a bottom sheet. Below this width a floating box either covers
 * the figure it explains or runs off the edge; anchored to the bottom it does
 * neither, and it lands in the same place every time.
 */
@media (max-width: 560px) {
  .tip.tip--sheet {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    max-width: none;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: 0.9rem var(--wrap-pad) calc(0.9rem + env(safe-area-inset-bottom, 0px));
  }
}