/* StockLens site.
   Art direction: apple.com as the owner's reference. White and #f5f5f7 grounds,
   near-black type, centred headlines at weight 600 with tight tracking, short
   grey subheads, pill buttons, text links with a chevron, big image-led
   sections, small grey footnotes. Nothing of Apple's is used: no Apple marks,
   wording or assets, and the accent is graphite: the site is black, grey and white.

   The home page opens on a film of a meadow, from the owner's reference frame,
   and hands off into the white page below it. */

:root {
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #78787d;
  --white: #ffffff;
  --grey: #f5f5f7;
  --line: #d2d2d7;
  --accent: #17191d;
  --accent-lift: #3a3f46;
  --radius-xl: 28px;
  --shell: 1120px;
  --shell-wide: 1320px;
  --gutter: clamp(22px, 5vw, 48px);
  --nav-h: 48px;
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* numbers use Geist too, with tabular figures (type.css), not a monospace face */
  --mono: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.5;
  letter-spacing: -0.01em; -webkit-font-smoothing: antialiased;
  /* clip, not hidden: `hidden` makes body a scroll container, which stops
     position:sticky working anywhere inside it (it broke the scroll story).
     `clip` stops the sideways scroll without creating that container. */
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ---------- type ---------- */
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; }
.t-hero { font-size: clamp(44px, 7.4vw, 92px); line-height: 1.04; letter-spacing: -0.022em; }
/* Four rungs, each with a job: the hero, the two or three statements the
   product rests on, the section headings, and the supporting ones. They were
   effectively two rungs before, so everything of any importance looked the
   same weight. Tracking tightens as the size grows, which is what keeps a
   large Geist setting from looking loose. */
.t-0 { font-size: clamp(36px, 5.9vw, 76px); line-height: 1.02; letter-spacing: -0.032em; }
.t-1 { font-size: clamp(30px, 3.9vw, 52px); line-height: 1.07; letter-spacing: -0.024em; }
.t-2 { font-size: clamp(23px, 2.5vw, 34px); line-height: 1.12; letter-spacing: -0.018em; }
.sub { font-size: clamp(16.5px, 1.32vw, 19.5px); line-height: 1.5; color: var(--ink-2); font-weight: 400; letter-spacing: -0.006em; max-width: 46ch; }
.eyebrow { font-size: 15px; font-weight: 600; color: var(--accent); }
.note { font-size: 12.5px; line-height: 1.6; color: var(--ink-3); letter-spacing: .004em; max-width: 68ch; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.center { text-align: center; }
.measure { max-width: 46ch; margin-inline: auto; }

/* ---------- layout ---------- */
.shell { width: min(100% - var(--gutter) * 2, var(--shell)); margin-inline: auto; }
.shell-wide { width: min(100% - var(--gutter) * 2, var(--shell-wide)); margin-inline: auto; }
/* Argument sets at a reading measure, not at grid width. Having only the two
   grid widths is why every block on the page started at the same left edge. */
.shell-read { width: min(100% - var(--gutter) * 2, 820px); margin-inline: auto; }
section { position: relative; }
/* One number for every section is what made the page feel mechanically
   spaced. Three now, assigned by what the section is for: a statement gets
   room around it, a supporting section gets less, and a section that belongs
   with the one above it closes the gap instead of restating it. */
.band { padding-block: clamp(72px, 8.5vw, 128px); }
.band-air { padding-block: clamp(104px, 13.5vw, 208px); }
.band-quiet { padding-block: clamp(56px, 6vw, 92px); }
.band-join { padding-top: clamp(30px, 3.2vw, 52px); }
.band-grey { background: var(--grey); }
.stack { display: grid; gap: 18px; }
.stack-sm { display: grid; gap: 10px; }
.nav { width: min(100% - var(--gutter) * 2, var(--shell-wide)); margin-inline: auto; height: var(--nav-h); display: flex; align-items: center; gap: 30px; }
.brand { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.brand img { width: 20px; height: 20px; }
/* White ink on transparency: it reads as itself over the dark bands, and is
   turned black anywhere it sits on a light one. invert(1) is exact on a flat
   white mark, and transitions with the bar as it crosses a band edge. */
.wordmark-lockup img, .brand img, .rail-brand img { transition: filter .2s ease; }
.topbar.on-light .wordmark-lockup img,
footer .brand img,
.rail-brand img { filter: invert(1); }
.nav-links { display: flex; gap: 28px; font-size: 12.5px; opacity: .85; }
.nav-links a:hover { opacity: .55; }
.link-accent .chev { transition: transform .18s ease; }
.link-accent:hover .chev { transform: translateX(2px); }
.btn { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill, 999px); padding: 12px 23px; font-size: 17px; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .18s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-lift); }
.btn-outline { border: 1px solid var(--accent); color: var(--accent); }
.btn-outline:hover { background: rgba(23,25,29,.06); }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

.tile-tick.off { color: var(--ink-3); font-size: 13px; }

/* the frame the camera draws on a recognised object */
.frame { position: absolute; inset: 16% 14%; border: 2px solid rgba(255,255,255,.92); border-radius: 6px; box-shadow: 0 0 0 1px rgba(23,25,29,.3), 0 10px 40px -12px rgba(0,0,0,.45); opacity: 0; transform: scale(1.04); }
.tile.in .frame { opacity: 1; transform: none; border-color: var(--accent-lift); transition: opacity .6s ease .3s, transform .7s cubic-bezier(.2,.7,.2,1) .3s; }

/* ---------- the camera demonstration ---------- */
.shot { position: relative; overflow: hidden; border-radius: var(--radius-xl); background: #ebebef; }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot .frame { opacity: 0; }
.shot.scanning .frame { opacity: 1; transform: none; border-color: rgba(255,255,255,.92); transition: opacity .5s ease, border-color .4s ease; }
.shot.locked .frame { opacity: 1; transform: none; border-color: var(--accent-lift); transition: opacity .5s ease, border-color .4s ease; }
.scan { position: absolute; inset: 16% 14%; z-index: 2; overflow: hidden; border-radius: 6px; opacity: 0; }
.shot.scanning .scan { opacity: 1; }
.scan::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30%; background: linear-gradient(180deg, rgba(58,63,70,0), rgba(58,63,70,.3)); border-bottom: 2px solid rgba(255,255,255,.9); animation: sweep 2s cubic-bezier(.45,0,.4,1) infinite; }
@keyframes sweep { 0% { transform: translateY(-30%); } 100% { transform: translateY(330%); } }
.card {
  position: absolute; z-index: 4; left: 50%; translate: -50% 0; bottom: 18px;
  width: min(86%, 360px); background: rgba(255,255,255,.84); backdrop-filter: saturate(180%) blur(20px);
  border-radius: 20px; padding: 14px 16px;
  box-shadow: 0 20px 50px -24px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .55s cubic-bezier(.2,.7,.2,1);
}
.card.show { opacity: 1; transform: none; }
.pill { font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: var(--r-pill, 999px); background: var(--accent); color: #fff; }
.pill.dark { background: var(--ink); color: #fff; }
.card-px { font-family: var(--mono); font-size: 15px; }
.step { padding: clamp(24px, 3.4vw, 46px) 0; border-top: 1px solid var(--line); opacity: .38; transition: opacity .45s ease; }
.step.active { opacity: 1; }
.step-n { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.step h3 { font-size: clamp(28px, 3.6vw, 46px); letter-spacing: -0.02em; margin: 10px 0 8px; }
.step p { margin: 0; color: var(--ink-2); font-size: clamp(16px, 1.3vw, 18px); max-width: 40ch; }
.pane { border-radius: var(--radius-xl); padding: clamp(26px, 3vw, 46px); background: var(--white); min-height: clamp(240px, 26vw, 360px); display: flex; flex-direction: column; justify-content: space-between; }
.pane h3 { font-size: 15px; font-weight: 600; }
.list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; counter-reset: s; }
.list li { display: flex; gap: 13px; align-items: baseline; font-size: clamp(16px, 1.4vw, 19px); color: var(--ink-2); }
.list li::before { counter-increment: s; content: counter(s, decimal-leading-zero); font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.pane-new .list { gap: 2px; }
.pane-new .list li { color: #fff; font-size: clamp(26px, 3.2vw, 44px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; }
.pane-new .list li::before { color: rgba(255,255,255,.6); }

/* ---------- facts and verdict ---------- */

/* ---------- footer ---------- */
footer { background: var(--grey); padding-block: 38px; }
.foot-top { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.foot-links { display: flex; gap: 22px; font-size: 12px; color: var(--ink-2); flex-wrap: wrap; }

/* ---------- reveal ---------- */
.rise { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.rise.in { opacity: 1; transform: none; }
/* a cascade: each child of a [data-stagger] block arrives a beat after the last */
[data-stagger] > * {
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
[data-stagger].in > * { opacity: 1; transform: none; }
.rise-2 { transition-delay: .09s; }

/* ---------- mobile ---------- */
@media (max-width: 860px) {
  body { font-size: 16px; }
  .nav-links { display: none; }
  .hero { height: 92svh; }
  .hero-copy { padding-top: 38px; }
  .hero-copy .sub { max-width: 22ch; }
  .tiles, .tiles-3, .compare { grid-template-columns: minmax(0, 1fr); }
  .step-sticky { position: static; }
  .step { opacity: 1; padding: 20px 0; }
  .card { width: min(92%, 340px); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .rise, .tile { opacity: 1; transform: none; }
}

/* =========================================================================
   Narrative scenes, glass controls, and the radius scale.
   Every visual below is drawn in the browser: no photographs, no generated
   imagery. Added after the owner asked for animated visuals that show the
   product's story in motion.
   ========================================================================= */

:root {
  /* one radius scale, medium: controls sit under cards, cards under scenes */
  --r-chip: 10px;
  --r-btn: 12px;
  --r-card: 16px;
  --r-pill: 999px;
}

/* ---------- frosted glass controls ---------- */
.btn {
  border-radius: var(--r-btn);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  border: 1px solid rgba(255,255,255,.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 10px 26px -18px rgba(13,14,16,.6);
  transition: transform .22s cubic-bezier(.2,.7,.2,1), background .22s ease, box-shadow .22s ease, backdrop-filter .22s ease, filter .22s ease;
}
.btn:hover {
  transform: scale(1.035) translateY(-1px);
  filter: brightness(1.07);
  backdrop-filter: blur(9px) saturate(185%);
  -webkit-backdrop-filter: blur(9px) saturate(185%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 16px 34px -18px rgba(13,14,16,.55);
}
.btn:active { transform: scale(.995); }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-lift); border-color: var(--accent-lift); }
.btn-outline { background: #fff; color: var(--accent); border-color: rgba(23,25,29,.22); }
.btn-outline:hover { background: rgba(255,255,255,.72); }

/* ---------- contract address slot ---------- */
.ca {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em;
  padding: 6px 11px; border-radius: var(--r-chip);
  background: rgba(255,255,255,.5); border: 1px solid rgba(0,0,0,.09);
  backdrop-filter: blur(14px) saturate(160%); color: var(--ink-2);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ca:hover { background: rgba(255,255,255,.8); color: var(--ink); }
.ca b { font-weight: 500; color: var(--ink-3); }
.ca-copy { opacity: .55; }
.ca.is-copied .ca-copy { opacity: 1; color: var(--accent); }
.foot-ca { background: rgba(255,255,255,.7); }
[data-state="0"] .scene-object { transform: translateY(6px) scale(.97); }
[data-state="1"] .scene-object { transform: translateY(3px) scale(.99); }
[data-state="2"] .scene-object, [data-state="3"] .scene-object { transform: translateY(0) scale(1); }
[data-state="3"] .scene-object { color: var(--accent); }
[data-state="0"] .scene-grid { opacity: .1; }
[data-state="1"] .scene-reticle, [data-state="2"] .scene-reticle, [data-state="3"] .scene-reticle { opacity: 1; transform: none; }
[data-state="2"] .scene-reticle, [data-state="3"] .scene-reticle { color: var(--accent); }
[data-state="1"] .scene-beam, [data-state="1"] .scene-beam-edge { opacity: 1; animation: beam 1.6s cubic-bezier(.45,0,.4,1) infinite; }
@keyframes beam { 0% { transform: translateY(-8px); } 100% { transform: translateY(40px); } }
.chip {
  border-radius: var(--r-chip); padding: 9px 11px;
  background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.7);
  backdrop-filter: blur(16px) saturate(170%); -webkit-backdrop-filter: blur(16px) saturate(170%);
  box-shadow: 0 10px 26px -20px rgba(13,14,16,.7);
  opacity: 0; transform: translateY(10px) scale(.99);
  transition: opacity .45s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}

[data-state="2"] [data-chip="brand"], [data-state="3"] [data-chip="brand"],
[data-state="2"] [data-chip="company"], [data-state="3"] [data-chip="company"],
[data-state="2"] [data-chip="isin"], [data-state="3"] [data-chip="isin"],
[data-state="3"] [data-chip="market"] { opacity: 1; transform: none; }
[data-chip="company"] { transition-delay: .08s; }
[data-chip="isin"] { transition-delay: .16s; }

/* ---------- the five steps collapsing into two ---------- */
.collapse { display: grid; gap: 9px; margin-top: 22px; }

/* ---------- radius alignment across the older blocks ---------- */
.tile, .pane, .shot { border-radius: var(--r-card); }
.nav-wrap .btn { box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }

@media (max-width: 860px) {
  .scene-lg .scene-stage { aspect-ratio: 6 / 5; }
  .scene-chips { left: 10px; right: 10px; bottom: 10px; }
}

/* =========================================================================
   The resolution set in type.
   Replaces the drawn scenes: line art in a grid read as clipart.
   ========================================================================= */

/* ---------- resolution in type ---------- */
.resolve { margin-top: 14px; }
.res { display: grid; gap: 12px; }
.res-line.on { opacity: 1; transform: none; }
.res-v { font-size: clamp(19px, 1.9vw, 24px); font-weight: 600; letter-spacing: -0.018em; }
.res-line[data-final] .res-v { color: var(--accent); font-family: var(--mono); font-weight: 500; letter-spacing: 0; }
.resolve[data-done="1"] .res-state { color: var(--ink-3); }

.resolve-lg .res { gap: 18px; }
.resolve-lg .res-v { font-size: clamp(26px, 3.4vw, 44px); letter-spacing: -0.025em; }

/* the tile is now type only, so it needs its own breathing room */
.tile { background: var(--white); border: 1px solid rgba(0,0,0,.07); }
.tile-obj { font-size: clamp(20px, 1.9vw, 25px); }

@media (max-width: 860px) {
  .res-k { min-width: 72px; }
  .resolve-lg .res-k { min-width: 92px; }
}

/* the tile already names the object in its title, so the first line is dropped */
.tile .res-line[data-i="0"] { display: none; }
.tile .resolve { margin-top: 18px; }

/* =========================================================================
   Hero layout, matched to the owner's two reference frames.
   Controls float over the film rather than sitting in a bar: a round button
   and the wordmark at top left, a glass pill group at top right. The headline
   sits bottom left in two lines, the second in a high-contrast italic serif.
   A short paragraph and a pill CTA sit bottom right. Two dark glass cards
   arrive over the film as the shot pushes forward.
   ========================================================================= */

.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: clamp(14px, 1.6vw, 22px) clamp(16px, 2.4vw, 30px);
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
/* The bar is not a bar: the controls float, so body text slid under an opaque
   pill and was cut off mid-line. This softens what passes beneath. A blur and
   not a tint, because the bands behind alternate near-black and near-white and
   one tint would be wrong over one of them. */
.topbar::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: calc(100% + 12px);
  z-index: -1; pointer-events: none;
  backdrop-filter: blur(11px); -webkit-backdrop-filter: blur(11px);
  -webkit-mask-image: linear-gradient(180deg, #000 0 44%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0 44%, transparent 100%);
  opacity: 0; transition: opacity .25s ease;
}
.topbar.is-scrolled::before { opacity: 1; }
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 10px; }

.icon-btn {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border-radius: 50%; color: #fff;
  background: rgba(21,22,24,.42); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform .22s cubic-bezier(.2,.7,.2,1), background .22s ease, backdrop-filter .22s ease;
}
.icon-btn svg { width: 18px; height: 18px; }
/* Hidden until there is a top to return to, so the bar opens on the mark
   alone. Stated as :not(.is-deep) rather than a paired visible rule, because a
   visible rule carrying transform would outrank the hover scale below. */
.topbar .icon-btn { transition: opacity .3s ease, transform .3s cubic-bezier(.2,.7,.2,1); }
.topbar:not(.is-deep) .icon-btn { opacity: 0; pointer-events: none; transform: scale(.9); }
.icon-btn:hover { transform: scale(1.06); background: rgba(21,22,24,.56); backdrop-filter: blur(10px) saturate(190%); }
.icon-grid { background: rgba(255,255,255,.9); color: var(--ink); border-color: rgba(255,255,255,.7); }
.icon-grid:hover { background: #fff; }

.wordmark-lockup { display: flex; align-items: center; gap: 9px; color: #fff; font-size: clamp(16px, 1.4vw, 19px); font-weight: 600; letter-spacing: -0.02em; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.wordmark-lockup img { width: 22px; height: 22px; }
.topbar .ca { height: 40px; border-radius: var(--r-pill, 999px); background: rgba(255,255,255,.66); border-color: rgba(255,255,255,.72); color: var(--ink-2); }

/* =========================================================================
   Measured against the two reference frames (866x642 design box).
   Percentages below are the measured ones: gutter 2.1%, right column at
   70.1% with width 27.6%, headline 6.6% of width with the italic serif set
   at 1.15em of the roman, nav tray white at 9%, cards white at 13%.
   ========================================================================= */

.topbar { padding: 0.94% 2.2% 0 0.81%; align-items: flex-start; }
.topbar-left { gap: 8px; align-items: center; height: 40px; }
.topbar-right { gap: 8px; align-items: center; height: 40px; margin-top: 0.6%; }

/* the one opaque dark element in the design */
.icon-btn { width: clamp(34px, 4.6vw, 52px); height: clamp(34px, 4.6vw, 52px); background: #303030; border: 0; color: #c4c4c4; backdrop-filter: none; box-shadow: none; }
.icon-btn:hover { background: #3c3c3c; backdrop-filter: none; }
.icon-btn svg { width: 45%; height: 45%; stroke-width: 1.7; }
.icon-grid { background: #fff; color: #1d1d1f; width: clamp(30px, 3.5vw, 40px); height: clamp(30px, 3.5vw, 40px); }
.icon-grid:hover { background: #fff; }

.wordmark-lockup { gap: 8px; letter-spacing: -0.01em; font-weight: 500; align-items: baseline; }
.wordmark-lockup img { width: clamp(18px, 2.1vw, 24px); height: clamp(18px, 2.1vw, 24px); align-self: center; }

/* the tray reads as blur, not as white: a constant lift over any backdrop */
.pill-tray {
  display: flex; align-items: center; gap: 3px; height: clamp(30px, 3.5vw, 40px);
  padding: 0 4px; border-radius: var(--r-pill, 999px);
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: none;
}
.pill-tray a { padding: 0 12px; height: 76%; display: inline-flex; align-items: center; border-radius: var(--r-pill, 999px); font-size: clamp(11px, 1.15vw, 14px); font-weight: 500; color: rgba(255,255,255,.88); transition: background .2s ease, color .2s ease; }
.pill-tray a:hover { color: #fff; background: rgba(255,255,255,.14); }
.pill-tray a.is-current { background: #fff; color: #1d1d1f; }

/* The bar's white pills carry the same frosted glass as .btn (user, 2026-09-23),
   which they were the last controls on the site not to have. The white base stays
   high enough to read as a white pill over the dark opening screen; the blur only
   shows itself once the bar is over the page's own content. On hover the blur
   drops and the fill firms up, which is how brightness reads on a white ground. */
.pill-white {
  display: inline-flex; align-items: center; height: clamp(30px, 3.5vw, 40px); padding: 0 15px;
  border-radius: var(--r-pill, 999px); color: #1d1d1f;
  background: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.55);
  backdrop-filter: blur(18px) saturate(175%); -webkit-backdrop-filter: blur(18px) saturate(175%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 10px 26px -20px rgba(13,14,16,.55);
  font-size: clamp(11px, 1.15vw, 14px); font-weight: 500;
  transition: transform .22s cubic-bezier(.2,.7,.2,1), background .22s ease, backdrop-filter .22s ease, box-shadow .22s ease;
}
.pill-white:hover {
  transform: scale(1.035);
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(10px) saturate(190%); -webkit-backdrop-filter: blur(10px) saturate(190%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 16px 32px -20px rgba(13,14,16,.5);
}
.topbar .ca {
  background: rgba(255,255,255,.82); color: #1d1d1f; border: 1px solid rgba(255,255,255,.55);
  height: clamp(30px, 3.5vw, 40px);
}
.topbar .ca b { color: #86868b; }

/* ---------- the rule, stated in real figures ---------- */
/* Stacked, this left a third of the row empty beside the heading at every
   width above about 1100px. Set as two columns the heading and its lede share
   a baseline and the block reads as one composed unit. */
.rule-head { max-width: 58ch; }
.rule-head .sub { margin-top: clamp(12px, 1.2vw, 18px); }
@media (min-width: 1000px) {
  .head-split {
    max-width: none;
    display: grid; grid-template-columns: minmax(0, max-content) minmax(280px, 40ch);
    /* baseline, not end: the heading is one line and the note is three, so
       aligning their boxes at the bottom pushed the heading 89px below the
       line the note starts on and the pair read as a mistake. */
    gap: clamp(30px, 3.6vw, 56px); align-items: baseline; justify-content: start;
  }
  .head-split .sub { margin-top: 0; max-width: none; }
}
.tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(30px, 3.6vw, 54px); }
.tier { padding: clamp(20px, 2.2vw, 32px); border-radius: var(--r-card); background: var(--grey); display: grid; gap: 10px; align-content: start; }
.tier-k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; color: var(--ink-3); }
.tier:first-child { background: var(--accent); }
.tier:first-child .tier-k { color: rgba(255,255,255,.72); }
.tier:first-child p { color: #fff; }
.tier p { margin: 0; font-size: clamp(13.5px, 1.2vw, 16px); line-height: 1.5; color: var(--ink-2); }

.chain { margin-top: clamp(14px, 1.6vw, 22px); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.chain-k { padding: 13px 20px; background: var(--grey); font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.chain-row { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 15px 20px; border-top: 1px solid var(--line); }
.chain-row span { font-size: 13.5px; color: var(--ink-3); }
.chain-row b { font-weight: 500; font-size: clamp(15px, 1.4vw, 18px); letter-spacing: -0.015em; }
.chain-row b.mono { font-family: var(--mono); font-weight: 400; font-size: clamp(12.5px, 1.2vw, 15px); letter-spacing: 0; }

/* ---------- the refusal, as the log records it ---------- */
.refuse { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 552px); gap: clamp(28px, 4.5vw, 74px); align-items: center; }
.screen { margin: 0; }
.screen-wide img { display: block; width: 100%; max-width: 546px; height: auto; }

/* The one full-bleed moment on the page. Above 1100px the capture leaves the
   container and is cropped by the viewport, which is what stops this section
   reading as the stock text-beside-picture arrangement. The text keeps a
   reading measure so the two are different shapes, not two equal columns. */
#nomarket { overflow-x: clip; }
@media (min-width: 1100px) {
  .refuse {
    grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
    gap: clamp(48px, 6vw, 104px);
    align-items: start;
    /* Reaching the viewport edge exactly would mean doing arithmetic with
       100vw, which includes the scrollbar and produced a 48px horizontal
       scroll. Overshooting and clipping at the section is exact by
       construction. clip, never hidden: hidden on an ancestor kills the
       sticky story stage further up the page. */
    margin-right: calc(var(--gutter) * -1 - 6vw);
  }
  .refuse > .stack { padding-top: clamp(6px, 1.4vw, 26px); }
  .refuse .screen-wide { margin-right: 0; }
  .refuse .screen-wide img {
    max-width: none; width: 100%;
    border-radius: 20px 0 0 20px;
  }
}

@media (max-width: 860px) {
  .tiers { grid-template-columns: minmax(0, 1fr); }
  .refuse { grid-template-columns: minmax(0, 1fr); }
}