/* Perps Discovery — the page's own layout, on the StrikeSimple landing surface.
   Everything it reads is a variable from vendor/strikesimple-design/landing.css (the design
   system's dist/css/landing.css). The pixel literals left are the landing's own — 12px labels,
   0.06em nav tracking, the 64px top bar, 92px wire-grid cells — and each one says where it
   comes from. The type is the landing's roles: Title Case titles over capital labels, 300
   leads, 500 labels, tabular figures for every number that lines up. */

/* The hidden attribute wins over any display a class sets. */
[hidden] { display: none !important; }

/* The page is a column so a short view still puts the footer at the window's foot. */
body { min-height: 100vh; display: flex; flex-direction: column; }
main, .pd-view:not([hidden]) { flex: 1; display: flex; flex-direction: column; }

/* ── Top bar ─────────────────────────────────────────────────────────────────── */
/* The landing's phone top bar (docs/components/landing/rail.md): a sticky 64px bar in
   --surface-card over a --border rule, the wordmark at sm. Here it carries the three tabs too,
   labelled in the nav-label role (12px medium capitals at 0.06em), the current one marked by a
   2px --blue-500 bottom rule as the drawer marks its active cell. */
.pd-topbar {
  position: sticky; top: 0; z-index: 30;
  height: 64px; /* literal: the landing's top bar height */
  display: flex; align-items: center; gap: 40px;
  padding: 0 40px; /* literal: the landing's 40px gutter (--lp-section-padding's sides) */
  background: var(--surface-card);
  border-bottom: 1px solid var(--border);
}
.pd-brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; flex: none; border-radius: var(--radius-sm); }
.pd-brand:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 3px; }
.pd-brand-product {
  padding-left: 14px; border-left: 1px solid var(--border);
  font: var(--weight-medium) 14px/var(--leading-snug) var(--lp-font); /* literal 14px: the landing's label size */
  color: var(--gray-600);
  white-space: nowrap;
}
.pd-nav { position: relative; display: flex; align-items: stretch; gap: 28px; height: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pd-nav::-webkit-scrollbar { display: none; }
.pd-nav-item {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  border-top: 2px solid transparent; border-bottom: 2px solid transparent;
  font: var(--weight-medium) 12px/var(--leading-snug) var(--lp-font); /* literal 12px: the nav-label role */
  letter-spacing: 0.06em; /* literal: the nav-label tracking, no --tracking-* token is 0.06em */
  text-transform: uppercase;
  color: var(--gray-600);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.pd-nav-item[aria-current="page"] { color: var(--gray-900); border-bottom-color: var(--blue-500); }
.pd-nav-item:focus-visible { outline: 2px solid var(--blue-500); outline-offset: -2px; }
@media (hover: hover) {
  a.pd-nav-item:hover { color: var(--gray-900); }
}
/* "Coming soon": not a link, a step quieter, with the roadmap's tag beside it. */
.pd-nav-item--soon { cursor: default; color: var(--gray-600); }
.pd-soon-tag {
  padding: 3px 7px; border-radius: var(--lp-pill);
  background: var(--lp-rm-light-tag-bg); color: var(--lp-rm-light-tag-text);
  font: var(--weight-medium) 10px/1 var(--lp-font); /* literal 10px/1: the tag role (.lp-tag-label) */
  letter-spacing: 0.05em; /* literal: the tag role's tracking */
}

/* ── Hero ────────────────────────────────────────────────────────────────────── */
/* The landing's light hero: the gray-100 page under a wire grid, a kicker over a 700 Title Case
   headline whose keywords take the accent, and light leads. */
.pd-hero { position: relative; overflow: hidden; background: var(--bg-page); padding: 96px 40px 72px; } /* literal: the hero's own inset, the section padding with more air on top */
.pd-hero--short { flex: 1; } /* a placeholder view's one section fills the window down to the footer */
.pd-hero-inner { position: relative; z-index: 1; max-width: var(--lp-showcase-max-width); margin: 0 auto; }
.pd-hero .lp-section-head { max-width: 820px; } /* literal: the hero headline's measure (02-landing.md §3, "Measures") */
.pd-hero-title { margin: 20px 0 0; text-wrap: balance; }
.pd-hero .lp-lead { max-width: 620px; }

/* The wire grid (docs/components/landing/wire-grid.md) as a static field: square ~92px cells in
   --gray-300 at 0.7, and the --blue-400 copy shown only under a 220px spotlight that follows the
   pointer (src/main.js writes --spot-x / --spot-y / --spot-on). */
.pd-grid-field, .pd-grid-field::after {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--gray-300) 1px, transparent 1px),
    linear-gradient(to bottom, var(--gray-300) 1px, transparent 1px);
  background-size: 92px 92px; /* literal: GridField's cell */
  background-position: center center;
}
.pd-grid-field { opacity: 0.7; -webkit-mask-image: radial-gradient(ellipse 80% 90% at 70% 40%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 80% 90% at 70% 40%, #000 30%, transparent 100%); } /* #000: mask alpha, not a colour — the grid fades out toward the edges */
.pd-grid-field::after {
  content: "";
  background-image:
    linear-gradient(to right, var(--blue-400) 1px, transparent 1px),
    linear-gradient(to bottom, var(--blue-400) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(circle 220px at var(--spot-x, 50%) var(--spot-y, 50%), #000 50%, transparent 100%);
  mask-image: radial-gradient(circle 220px at var(--spot-x, 50%) var(--spot-y, 50%), #000 50%, transparent 100%);
  opacity: var(--spot-on, 0);
  transition: opacity var(--dur-slow) var(--ease-out);
}

/* ── The board ───────────────────────────────────────────────────────────────── */
/* The dark section the chart lives on: --lp-bg-dark, the ground the landing's payoff chart is
   drawn for, so the chart reads its translucent-white inks unchanged.
   The three bands each have a colour, an ordered risk scale: 1σ the foundation's danger red
   (--oxblood-500), 2σ the sun amber (--sun-500), 3σ teal (--teal-500) — green, the safest, but a
   blue-leaning green, because a pure green beside the red is one hue to a red-green colour-blind
   reader (the data-viz validator measured oxblood ↔ sage at ΔE 5.6 under deuteranopia, under the
   floor of 8; oxblood / sun / teal clears it at 11.1, with every pair at least 3:1 on the ground).
   They are never the only cue: every line, pill, key and column also says 1σ, 2σ or 3σ. */
.pd-board {
  --z1: var(--oxblood-500);
  --z2: var(--sun-500);
  --z3: var(--teal-500);
  background: var(--lp-bg-dark); color: var(--gray-400); padding: 0 40px 28px; /* literal: the section's 40px sides */
  /* The chart section is one screen under the 64px top bar: scrolled to (or linked as #chart), the
     asset picker, the band switch, the title row, the whole chart and its readout are all in view. */
  min-height: calc(100vh - 64px); scroll-margin-top: 64px; /* literal 64px: the top bar */
}
.pd-board > * { max-width: var(--lp-showcase-max-width); margin-inline: auto; }
.pd-z1 { --zc: var(--z1); }
.pd-z2 { --zc: var(--z2); }
.pd-z3 { --zc: var(--z3); }

/* The controls, above the one asset they scope (the filters rule), in one row: the asset, then the
   band. Each label sits beside its pills to keep the row one pill tall. */
.pd-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 18px 0 16px; border-bottom: 1px solid var(--lp-hairline-dark); }
.pd-control { display: flex; align-items: center; gap: 12px; }
.pd-control-label {
  font: var(--weight-medium) 12px/var(--leading-snug) var(--lp-font); /* literal 12px: the kicker role */
  letter-spacing: 0.01em; text-transform: uppercase;
  color: var(--blue-300);
}
/* A switch: pills with the chosen one filled (docs/components/landing/button.md, .lp-variant), at
   the showcase pill's 36px so the row stays compact. */
.pd-switch { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-board .pd-switch .lp-btn { height: var(--lp-media-cta-height); padding: 0 12px; gap: 6px; } /* literal 12px: a pill holding a glyph and a ticker, tighter than the 16px showcase pill */
.pd-pill-sub { font-weight: var(--weight-regular); opacity: 0.72; font-variant-numeric: tabular-nums; }

/* An asset's glyph in its disc, as the demo draws it beside an event (docs/components/app/
   underlying-glyphs.md): a near-black disc with a hairline ring, so every mark — Circle's blue
   included — reads on a filled cobalt pill as on the dark ground. */
.pd-glyph {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 20px; height: 20px; border-radius: var(--radius-pill); /* literal 20px: the 13px glyph + 7, the demo's disc */
  background: var(--gray-950); box-shadow: 0 0 0 1px var(--lp-border-strong); color: var(--gray-400);
}
.pd-glyph svg { display: block; }

/* The band pills: a key dot in the band's colour on each; the chosen one filled with it, its ink
   the darker or the lighter by contrast (the system's rule for text on a fill): white on the red
   (4.8:1), near-black on the amber (6.9:1) and the teal (5.7:1). */
.pd-key { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--zc); flex: none; } /* literal 8px: a key dot */
.pd-sigma-btn[aria-pressed="true"] { background: var(--zc); border-color: var(--zc); color: var(--gray-950); }
.pd-sigma-btn.pd-z1[aria-pressed="true"] { color: var(--white); }
.pd-sigma-btn[aria-pressed="true"] .pd-key { background: currentColor; }
@media (hover: hover) {
  .pd-sigma-btn[aria-pressed="true"]:hover { background: var(--zc); border-color: var(--zc); filter: brightness(1.08); }
}

.pd-status {
  margin: 0 0 8px;
  font: var(--weight-regular) 12px/var(--leading-snug) var(--lp-font); /* literal 12px: the page's meta size */
  letter-spacing: 0.01em; color: var(--gray-500);
  font-variant-numeric: tabular-nums;
}
.pd-status.is-error { color: var(--gray-300); }

/* The asset: a title row (glyph, name, ticker, the Long / Short switch; price and vol at the far
   end), four numbers at rest, then the chart and its readout beside the table of every holding
   period — structure from rules and space, no box (the landing's way). */
.pd-asset { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; }
.pd-asset.is-stale { opacity: 0.6; transition: opacity var(--dur-base) var(--ease-out); }
.pd-asset-head { display: flex; align-items: center; gap: 12px 32px; padding-bottom: 12px; border-bottom: 1px solid var(--lp-hairline-dark); }
.pd-asset-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.pd-asset-name {
  margin: 0; display: flex; align-items: center; gap: 12px; color: var(--gray-100);
  font: var(--weight-medium) clamp(24px, 2.3vw, 34px)/1.1 var(--lp-font); letter-spacing: -0.01em; /* the open item label's size */
}
.pd-asset-glyph .pd-glyph { width: 34px; height: 34px; } /* literal 34px: a 22px glyph in the same disc, beside the title */
.pd-card-symbol {
  font: var(--weight-medium) 12px/var(--leading-snug) var(--lp-font); /* literal 12px: the label size */
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-500); align-self: flex-end; padding-bottom: 4px;
}
/* Long / Short beside the title: green and red, the market's own pair (up is long the underlying),
   ink by contrast — near-black on the green (5.7:1), white on the red (4.8:1). */
.pd-side--long[aria-pressed="true"] { background: var(--sage-500); border-color: var(--sage-500); color: var(--gray-950); }
.pd-side--short[aria-pressed="true"] { background: var(--oxblood-500); border-color: var(--oxblood-500); color: var(--white); }
@media (hover: hover) {
  .pd-side--long[aria-pressed="true"]:hover { background: var(--sage-500); border-color: var(--sage-500); filter: brightness(1.08); }
  .pd-side--short[aria-pressed="true"]:hover { background: var(--oxblood-500); border-color: var(--oxblood-500); filter: brightness(1.08); }
}
.pd-card-quote { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; font-variant-numeric: tabular-nums; padding-left: 28px; border-left: 1px solid var(--lp-hairline-dark); }
.pd-card-spot { font: var(--weight-medium) 14px/var(--leading-snug) var(--lp-font); color: var(--gray-100); } /* literal 14px: the label size */
.pd-card-iv { font: var(--weight-regular) 12px/var(--leading-snug) var(--lp-font); color: var(--gray-500); } /* literal 12px: the meta size */

/* Four numbers shown at rest, so the chart's values never need a hover: in the title row, label
   over value, between the switch and the price. */
.pd-stats { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, auto)); justify-content: end; gap: 28px; margin: 0; }
.pd-stat { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.pd-stat dt {
  font: var(--weight-medium) 11px/var(--leading-snug) var(--lp-font); /* literal 11px: --text-2xs at the landing's pixel sizes */
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray-500);
}
/* What † means, under the numbers, where the table that explains it is folded away. */
.pd-stats-note { margin: -4px 0 0; font: var(--weight-regular) 12px/var(--leading-snug) var(--lp-font); color: var(--gray-500); display: none; } /* literal 12px: the meta size */
.pd-stat dd {
  margin: 0; font: var(--weight-medium) clamp(20px, 1.8vw, 26px)/1.1 var(--lp-font); /* literal clamp: between the item label and its open size */
  letter-spacing: -0.01em; color: var(--gray-100); font-variant-numeric: tabular-nums;
}

/* The chart and its readout on the left; the table on the right, as tall as they are and
   scrolling inside that height, so it never pushes the page past one screen. */
.pd-asset-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: stretch; } /* literal 300px: the table's column, room for four short columns */
.pd-asset-chart { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pd-asset-table { position: relative; min-height: 0; }
.pd-asset-table .pd-table { position: absolute; inset: 0; overflow: auto; }

/* ── The chart ───────────────────────────────────────────────────────────────── */
/* The landing's payoff chart inks (components/landing/payoff.css), on the same ground: the axis
   --lp-payoff-axis, labels in gray-500 haloed in the ground; each band's line in its colour. Its
   height takes what one screen leaves once the top bar, the controls, the title row and the readout
   are placed (about 330px of them, measured at 1440×789, 1440×800, 1470×835, 1512×860 and 1280×720,
   the readout at its longest), between 280px and 560px. */
.pd-chart { position: relative; height: clamp(280px, calc(100vh - 330px), 560px); cursor: crosshair; border-radius: var(--radius-sm); touch-action: pan-y; } /* literal: see above */
.pd-chart:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 3px; }
.pd-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pd-grid { stroke: var(--lp-payoff-axis); stroke-width: 1; }
/* 1×: the line where a perp holds exactly its own collateral, in white so it is found at a glance. */
.pd-one { stroke: var(--white); stroke-width: 1; }
.pd-tick {
  font: var(--weight-regular) 11px var(--lp-font); /* literal 11px: the tick size, the type scale's floor on this page */
  letter-spacing: 0.01em; fill: var(--gray-500); font-variant-numeric: tabular-nums;
  paint-order: stroke; stroke: var(--lp-bg-dark); stroke-width: 3px; stroke-linejoin: round;
}
.pd-tick--one { fill: var(--white); }
.pd-end { fill: var(--gray-500); font-weight: var(--weight-medium); }
.pd-end.is-on { fill: var(--gray-100); }
.pd-end-key { stroke: var(--zc); stroke-width: 2; stroke-linecap: round; }
.pd-wash { fill: var(--zc); fill-opacity: 0.06; stroke: none; }
.pd-curve { fill: none; stroke: var(--zc); stroke-width: 1.5; stroke-opacity: 0.35; stroke-linecap: round; stroke-linejoin: round; }
.pd-curve.is-on { stroke-width: 2.5; stroke-opacity: 1; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--zc) 55%, transparent)); }
/* A new band, side or asset draws its line in, as the landing's payoff line draws in on a new variant. */
.pd-curve.is-drawing { stroke-dasharray: 1; animation: pd-draw 0.9s var(--ease-out) both; }
.pd-wash.is-drawing { animation: pd-fade 0.6s var(--ease-out) 0.3s both; }
@keyframes pd-draw { from { stroke-dashoffset: 1; } }
@keyframes pd-fade { from { opacity: 0; } }
/* Past the last listed expiry the vol is held flat, not quoted: the lines go dashed in the landing
   payoff chart's 5 4 dash (its "today" curve, the line that is a model rather than a fact), and the
   stretch is hatched in the payoff chart's strike ink, --lp-payoff-strike. Not the roadmap's
   coming-soon hatch (--lp-rm-dark-soon-hatch): at 0.07 alpha it all but vanishes on a chart this
   size, and this zone has to be seen. The edge is a dotted hairline so it reads as a boundary, not
   as one more gridline. */
.pd-curve--flat { stroke-dasharray: 5 4; }
.pd-curve--flat.is-fading { animation: pd-fade 0.6s var(--ease-out) 0.6s both; }
.pd-beyond { stroke: none; }
.pd-hatch { stroke: var(--lp-payoff-strike); stroke-width: 1; }
.pd-beyond-edge { stroke: var(--lp-payoff-axis); stroke-width: 1; stroke-dasharray: 2 3; }
.pd-beyond-label { fill: var(--gray-500); }
.pd-cross { stroke: var(--lp-payoff-zero); stroke-width: 1; }
.pd-dot { fill: var(--zc); stroke: var(--lp-bg-dark); stroke-width: 2; }
.pd-dot--off { fill-opacity: 0.5; }

/* The readout, UNDER the chart, never over it: what the crosshair marks, the sentence first and
   its numbers strong, then the wipe-out price and the vol, and the three bands at that hold keyed
   in their colours. It holds its height so the page does not jump as it changes. */
.pd-readout {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 6px 28px;
  min-height: 90px; padding-top: 10px; border-top: 1px solid var(--lp-hairline-dark); /* literal 90px: the readout at its longest (the flat-vol note wraps its third line), so hovering never grows it */
  font: var(--weight-regular) 13px/1.45 var(--lp-font); color: var(--gray-400); /* literal 13px: --text-sm at the landing's pixel sizes */
}
.pd-readout-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pd-readout-caption {
  font: var(--weight-medium) 10.5px/1.3 var(--lp-font); /* literal 10.5px: the caption role */
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--blue-300);
}
/* σ is a symbol, not a letter to capitalise: uppercase would set it as Σ. */
.pd-sigma { text-transform: none; }
.pd-readout-sentence { margin: 0; font-size: 15px; color: var(--gray-300); } /* literal 15px: the base size */
.pd-readout-sentence strong { color: var(--gray-100); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.pd-readout-meta { margin: 0; font-size: 12px; color: var(--gray-500); font-variant-numeric: tabular-nums; } /* literal 12px: the meta size */
.pd-readout-bands { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: auto auto auto auto; justify-content: start; align-items: center; gap: 2px 10px; font-variant-numeric: tabular-nums; }
.pd-readout-band { display: contents; }
.pd-readout-key { width: 14px; height: 0; border-top: 2px solid var(--zc); opacity: 0.55; } /* literal 2px: the line's stroke */
.pd-readout-band.is-on .pd-readout-key { opacity: 1; border-top-width: 3px; }
.pd-readout-z, .pd-readout-p { color: var(--gray-500); }
.pd-readout-l { text-align: right; color: var(--gray-300); }
.pd-readout-band.is-on .pd-readout-z, .pd-readout-band.is-on .pd-readout-l { color: var(--gray-100); font-weight: var(--weight-medium); }

/* The table view: every holding period at every band, for a reader who cannot hover. */
.pd-table summary {
  cursor: pointer; width: fit-content; border-radius: var(--radius-sm);
  font: var(--weight-medium) 12px/var(--leading-snug) var(--lp-font); /* literal 12px: the label size */
  letter-spacing: 0.01em; color: var(--gray-500);
}
.pd-table summary:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 3px; }
@media (hover: hover) { .pd-table summary:hover { color: var(--gray-300); } }
.pd-table table { width: 100%; margin-top: 8px; border-collapse: collapse; font: var(--weight-regular) 12px/1.45 var(--lp-font); font-variant-numeric: tabular-nums; } /* literal 12px: the meta size */
.pd-table th, .pd-table td { padding: 2px 0; text-align: right; border-bottom: 1px solid var(--lp-hairline-dark-soft); }
.pd-table th:first-child, .pd-table td:first-child { text-align: left; }
.pd-table thead th:first-child, .pd-table tbody td:first-child { white-space: nowrap; } /* the hold's name on one line; not the footnote, which must wrap */
.pd-table thead th { position: sticky; top: 0; background: var(--lp-bg-dark); }
.pd-table th { font-weight: var(--weight-medium); color: var(--gray-500); white-space: nowrap; }
.pd-th-key { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: var(--radius-pill); background: var(--zc); vertical-align: 1px; } /* literal 6px: a small key dot */
.pd-table td { color: var(--gray-400); }
.pd-table td.is-on, .pd-table th.is-on { color: var(--gray-100); }
.pd-table tr.is-flat td { color: var(--gray-500); }
.pd-table tr.is-flat td.is-on { color: var(--gray-300); }
.pd-table .pd-table-note { padding-top: 8px; border-bottom: none; text-align: left; white-space: normal; color: var(--gray-500); }

.pd-card-empty { margin: 0; padding: 72px 0; text-align: center; font: var(--weight-regular) 14px/var(--leading-normal) var(--lp-font); color: var(--gray-500); } /* literal 14px: the body size */

.pd-board-foot { margin-top: 18px; }
.pd-board-note {
  margin: 0; max-width: 820px;
  font: 300 14px/var(--leading-normal) var(--lp-font); /* literal 300: the lead weight, no token is 300 */
  letter-spacing: 0.01em; color: var(--gray-500);
}

/* ── Method ──────────────────────────────────────────────────────────────────── */
/* A light section after a dark one opens on a --border rule (02-landing.md §2). The steps run down
   the page, one per row: the step's name, what it does, and its formula. */
.pd-method { background: var(--bg-page); border-top: 1px solid var(--border); padding: 80px 40px; } /* literal: the section's inset with more air */
.pd-method-inner { max-width: var(--lp-showcase-max-width); margin-inline: auto; }
.pd-steps { list-style: none; padding: 0; margin: 48px 0 0; display: flex; flex-direction: column; counter-reset: pd-step; }
.pd-step {
  display: grid; grid-template-columns: 260px minmax(0, 1fr) minmax(0, 360px); align-items: start; gap: 12px 40px; /* literal 260px / 360px: the name's and the formula's columns */
  padding: 24px 0; border-top: 1px solid var(--border); counter-increment: pd-step;
}
.pd-step:last-child { border-bottom: 1px solid var(--border); }
.pd-step-name {
  font: var(--weight-medium) 14px/1.3 var(--lp-font); /* literal 14px/1.3: the step-name role */
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-900);
}
.pd-step .pd-step-name::before { content: counter(pd-step, decimal-leading-zero) "  "; white-space: pre; color: var(--blue-600); }
.pd-step-text { margin: 0; max-width: 620px; font: 300 15px/var(--leading-normal) var(--lp-font); letter-spacing: 0.01em; color: var(--text-muted); } /* literal 300 15px: the lead weight at the base size */
.pd-formula {
  display: block; padding: 12px 14px;
  background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  font: var(--weight-regular) 13px/1.6 var(--font-data); /* literal 13px: --text-sm in pixels */
  color: var(--gray-900); white-space: nowrap; overflow-x: auto; /* a formula never breaks mid-expression; it scrolls in its box on a narrow screen */
}
.pd-caveats { margin-top: 48px; }
.pd-caveats ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 40px; }
.pd-caveats li { font: 300 15px/var(--leading-normal) var(--lp-font); letter-spacing: 0.01em; color: var(--text-muted); } /* literal 300 15px: the lead weight */
.pd-caveats strong { font-weight: var(--weight-medium); color: var(--gray-900); }

/* ── Footer ──────────────────────────────────────────────────────────────────── */
.pd-footer { padding: 28px 40px; } /* literal: a one-row footer, the landing's sides */
.pd-footer-bottom { margin-top: 0; padding-top: 0; border-top: none; }

/* ── Breakpoints (literal queries, named after the landing's --bp-* tokens) ──── */
/* Under 1360px wide the asset pills tighten so the asset and band switches keep one row. */
@media (max-width: 1360px) {
  .pd-board .pd-control:first-child .pd-switch .lp-btn { padding: 0 9px; } /* literal: 3px a side less than the 12px pill */
  .pd-controls { column-gap: 20px; }
}
/* --bp-split-stack (1080px): the table goes under the chart, folded; a method step stacks its
   formula under its text. */
@media (max-width: 1080px) {
  .pd-asset-head { flex-wrap: wrap; }
  .pd-stats { order: 3; flex-basis: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: stretch; }
  .pd-card-quote { flex-direction: row; align-items: baseline; gap: 12px; padding-left: 0; border-left: 0; text-align: left; }
  .pd-asset-body { grid-template-columns: minmax(0, 1fr); }
  .pd-asset-table .pd-table { position: static; overflow: visible; max-width: 560px; }
  .pd-step { grid-template-columns: 220px minmax(0, 1fr); }
  .pd-step .pd-formula { grid-column: 2; }
  .pd-chart { height: clamp(280px, 52vh, 440px); } /* literal: the window share for a stacked layout */
  .pd-stats-note:not([hidden]) { display: block; }
}
/* --bp-mobile (860px): the section's phone inset, 16px sides. */
@media (max-width: 860px) {
  .pd-topbar { padding: 0 16px; gap: 20px; }
  .pd-nav { gap: 20px; }
  .pd-hero { padding: 56px 16px 48px; }
  .pd-board { padding: 0 16px 28px; }
  .pd-method { padding: 56px 16px; }
  .pd-footer { padding: 24px 16px; }
  .pd-caveats ul { grid-template-columns: minmax(0, 1fr); }
  .pd-hero-title { font-size: clamp(30px, 9.4vw, 40px); } /* the .lp-hero-title--mobile role's size */
  .pd-control { flex-direction: column; align-items: flex-start; gap: 8px; }
}
/* --bp-phone (600px): one column everywhere; the product name gives the bar back to the tabs. */
@media (max-width: 600px) {
  .pd-brand-product { display: none; }
  /* The tabs scroll sideways inside the bar; the fade says there is more. #000: mask alpha. */
  .pd-nav { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
  .pd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-chart { height: 320px; } /* literal: a phone-height chart */
  .pd-readout { grid-template-columns: minmax(0, 1fr); }
  .pd-step { grid-template-columns: minmax(0, 1fr); }
  .pd-step .pd-formula { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .pd-curve.is-drawing, .pd-wash.is-drawing, .pd-curve--flat.is-fading { animation: none; }
  .pd-nav-item, .pd-grid-field::after, .pd-asset.is-stale { transition: none; }
}