/* ==========================================================================
   CASE STUDY - 4-point system throughout (see base.css)
   ========================================================================== */

/* Dot texture used on every tone surface */
.dots { position: relative; isolation: isolate; }
.dots::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(color-mix(in srgb, var(--tk) 10%, transparent) 1px, transparent 1px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(72% 64% at 50% 40%, #000, transparent);
  mask-image: radial-gradient(72% 64% at 50% 40%, #000, transparent);
  pointer-events: none;
}
.dots > * { position: relative; z-index: 1; }

/* ---------- Hero ---------- */
.case-hero { padding-top: calc(var(--nav-h) + 96px); }

.case-hero__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.case-hero__eyebrow .dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.56; }
.case-hero__eyebrow .name { color: var(--ink); }
.case-hero__mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 12px; background: var(--t); color: color-mix(in srgb, var(--a) 60%, #fff); }
.case-hero__mark svg { width: 16px; height: 16px; }

.case-hero__title { max-width: 880px; margin-top: 20px; }
.case-hero__title em { color: var(--a); }
.case-hero__summary { max-width: 640px; margin-top: 24px; color: var(--ink-2); }
.case-hero__kind { margin-top: 12px; }

.case-hero__media { position: relative; margin-top: 64px; aspect-ratio: 16 / 9; border-radius: 32px; overflow: hidden; isolation: isolate; }

@media (width < 1024px) {
  .case-hero { padding-top: calc(var(--nav-h) + 64px); }
  .case-hero__media { margin-top: 48px; }
  /* A wide spec sheet shrinks past reading here, so covers that ship a square
     cut (via <picture>) switch the frame to match it. */
  .case-hero__media:has(picture) { aspect-ratio: 1 / 1; }
}
@media (width < 640px) {
  .case-hero { padding-top: calc(var(--nav-h) + 48px); }
  .case-hero__media { aspect-ratio: 1 / 1; border-radius: 20px; }
}

/* ---------- Meta ---------- */
.case-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-block: 32px; border-bottom: 1px solid var(--line); }
.case-meta div { display: flex; flex-direction: column; gap: 4px; }
.case-meta dd { font-size: var(--fs-small); line-height: var(--lh-small); }
@media (width < 768px) { .case-meta { grid-template-columns: 1fr 1fr; row-gap: 28px; } }

/* ---------- TL;DR ---------- */
.tldr { padding-top: 96px; }
.tldr__card { padding: 48px; border-radius: 28px; background: var(--ts); }
.tldr__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }

.tldr__skip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 1000px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); font-size: var(--fs-label); line-height: 20px; font-weight: 500; transition: box-shadow 200ms ease, scale var(--t-fast) var(--ease-out); }
.tldr__skip:active { scale: 0.96; }
.tldr__skip svg { width: 16px; height: 16px; rotate: 90deg; transition: translate 320ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .tldr__skip:hover { box-shadow: inset 0 0 0 1px var(--line), var(--shadow-s); }
  .tldr__skip:hover svg { translate: 0 4px; }
}

.tldr__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 40px; }
.tldr__item::before { content: ""; display: block; width: 24px; height: 4px; margin-bottom: 16px; border-radius: 4px; background: var(--a); }
.tldr__item h3 { display: flex; align-items: center; gap: 8px; }
.tldr__item p { margin-top: 8px; font-size: var(--fs-body); line-height: var(--lh-body); }
.tldr__item:last-child p { color: var(--a); font-weight: 500; }

@media (width < 1024px) {
  .tldr { padding-top: 72px; }
  .tldr__card { padding: 32px; }
  .tldr__grid { grid-template-columns: 1fr; gap: 0; }
  .tldr__item + .tldr__item { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
}
@media (width < 640px) {
  .tldr { padding-top: 56px; }
  .tldr__card { padding: 24px; border-radius: 20px; }
}

/* ---------- Body layout ---------- */
.case-body { display: grid; grid-template-columns: 192px minmax(0, 1fr); gap: 96px; padding-top: 120px; }

.toc__inner { position: sticky; top: calc(var(--nav-h) + 40px); }
.toc__title { display: block; margin-bottom: 16px; }
.toc__list { position: relative; display: grid; }
.toc__list::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.toc__indicator { position: absolute; left: 0; top: 0; width: 2px; height: 36px; margin-left: -1px; border-radius: 2px; background: var(--a); transition: transform 480ms var(--ease-out), height 480ms var(--ease-out); }
.toc__link { display: flex; align-items: center; gap: 12px; height: 36px; padding-left: 16px; font-size: var(--fs-label); line-height: 20px; color: var(--ink-3); transition: color 240ms ease, translate 320ms var(--ease-out); }
.toc__link .t-micro { color: inherit; opacity: 0.76; }
.toc__link.is-active { color: var(--ink); translate: 4px 0; }
@media (hover: hover) and (pointer: fine) { .toc__link:hover { color: var(--ink); } }
.toc__meta { display: grid; gap: 4px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); font-size: var(--fs-label); line-height: 20px; }

@media (width < 1024px) {
  .case-body { grid-template-columns: minmax(0, 1fr); padding-top: 96px; }
  .toc { display: none; }
}

/* ---------- Sections ---------- */
.csec { scroll-margin-top: calc(var(--nav-h) + 24px); }
.csec + .csec { margin-top: 160px; }
.csec__head { margin-bottom: 40px; }
.csec__label { display: flex; align-items: center; gap: 12px; }
.csec__label .t-micro { display: inline-grid; place-items: center; height: 24px; padding: 0 8px; border-radius: 1000px; background: var(--ts); color: var(--a); }
.csec__title { max-width: 720px; margin-top: 16px; }
.csec__title em { color: var(--a); }
.csec__blocks { display: grid; gap: 40px; }

@media (width < 1024px) { .csec + .csec { margin-top: 120px; } }
@media (width < 640px) { .csec + .csec { margin-top: 96px; } .csec__blocks { gap: 32px; } }

/* ---------- Blocks ---------- */
.b-text { max-width: 640px; }
.b-lead { color: var(--ink); }
.b-p { color: var(--ink-2); }
.b-p strong, .b-lead strong { color: var(--ink); font-weight: 500; }

.b-methods { display: flex; flex-wrap: wrap; gap: 12px 32px; font-size: var(--fs-small); line-height: 24px; color: var(--ink-2); }
.b-methods li { display: flex; align-items: center; gap: 12px; }
.b-methods li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--a); }

.b-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border-top: 1px solid var(--line); }
.b-stat { padding: 24px 24px 4px 0; }
.b-stat + .b-stat { padding-left: 24px; border-left: 1px solid var(--line); }
.b-stat__value { display: block; font-size: 40px; line-height: 44px; font-weight: 500; letter-spacing: -0.04em; }
.b-stat__label { display: block; max-width: 240px; margin-top: 8px; font-size: var(--fs-small); line-height: 24px; color: var(--ink-2); }
.b-stats--large .b-stat__value { font-size: 64px; line-height: 64px; color: var(--a); }
@media (width < 1024px) { .b-stats--large .b-stat__value { font-size: 48px; line-height: 52px; } }
@media (width < 640px) {
  .b-stat + .b-stat { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .b-stat__value { font-size: 32px; line-height: 36px; }
}

.b-insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 16px; }
.b-insight { display: flex; flex-direction: column; padding: 24px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); transition: translate 480ms var(--ease-out), box-shadow 480ms ease; }
.b-insight .t-micro { color: var(--a); }
.b-insight h3 { margin-top: 20px; }
.b-insight p { margin-top: 8px; font-size: var(--fs-small); line-height: 24px; color: var(--ink-2); }
.b-insight blockquote { margin-top: auto; padding-top: 20px; font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 20px; line-height: 28px; letter-spacing: -0.012em; color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .b-insight:hover { translate: 0 -4px; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-m); }
}

.b-decisions__note { margin-bottom: 16px; font-size: var(--fs-small); line-height: 24px; color: var(--ink-2); }
.b-decisions__note b { color: var(--ink); font-weight: 500; }
.b-decisions__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.b-option { position: relative; padding: 24px; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); }
.b-option h3 { padding-right: 88px; font-size: var(--fs-body); line-height: 24px; font-weight: 500; letter-spacing: -0.016em; color: var(--ink); }
.b-option p { margin-top: 8px; font-size: var(--fs-small); line-height: 24px; }
.b-option__tag { position: absolute; top: 20px; right: 20px; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 12px; border-radius: 1000px; background: var(--well); color: var(--ink-3); font-size: 12px; line-height: 16px; font-weight: 500; }
.b-option__tag svg { width: 12px; height: 12px; }
.b-option.is-chosen { background: var(--ts); box-shadow: inset 0 0 0 2px var(--a); }
.b-option.is-chosen .b-option__tag { background: var(--a); color: #fff; }
/* Narrower cards: the tag sits above the title so titles get the full width */
@media (width < 1024px) {
  .b-option__tag { position: static; margin-bottom: 12px; }
  .b-option h3 { padding-right: 0; }
}

.b-callout { max-width: none; display: grid; grid-template-columns: 4px 1fr; gap: 20px; padding: 24px; border-radius: 20px; background: var(--well); }
.b-callout__bar { border-radius: 4px; background: var(--a); }
.b-callout p { margin-top: 4px; }

.b-quote { position: relative; max-width: 720px; padding-top: 48px; }
.b-quote::before { content: "\201C"; position: absolute; top: 0; left: -4px; font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 96px; line-height: 96px; color: var(--a); opacity: 0.4; }
.b-quote blockquote { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 32px; line-height: 40px; letter-spacing: -0.012em; }
.b-quote figcaption { margin-top: 16px; }
@media (width < 640px) { .b-quote blockquote { font-size: 24px; line-height: 32px; } }

.b-list { border-top: 1px solid var(--line); counter-reset: b-list; }
.b-list li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); counter-increment: b-list; }
.b-list li::before { content: counter(b-list, decimal-leading-zero); padding-top: 4px; font-family: var(--font-mono); font-size: 12px; line-height: 20px; color: var(--a); }

/* Screens */
.b-screens { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 24px; padding: 56px 48px; border-radius: 32px; background: var(--t); }
.b-screen { display: flex; flex-direction: column; align-items: center; }
.b-screen__frame { width: min(100%, 260px); transition: translate 640ms var(--ease-out); }
.b-screen__frame img { width: 100%; border-radius: 32px; }
.b-screen__frame img.shot--flat { border-radius: 28px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 32px 64px -32px rgba(0, 0, 0, 0.64); }

/* Real screens: device mockups carry their own frame; flat exports get a rounded edge */
.shot { display: block; width: 100%; height: auto; }
.shot--flat { border-radius: 28px; }
.b-screen figcaption { max-width: 240px; margin-top: 20px; font-size: var(--fs-label); line-height: 20px; text-align: center; color: var(--tk); opacity: 0.84; }
@media (hover: hover) and (pointer: fine) {
  .b-screen:hover .b-screen__frame { translate: 0 -8px; }
}
@media (width < 1024px) { .b-screens { padding: 40px 32px; } }
@media (width < 768px) {
  .b-screens { grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); border-radius: 0; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .b-screens::-webkit-scrollbar { display: none; }
  .b-screen { scroll-snap-align: start; }
}

/* Figure */
.b-figure__frame { position: relative; border-radius: 32px; overflow: hidden; background: var(--t); }
.b-figure__frame img { width: 100%; height: auto; }

/* Spec sheets (tokens, components) are typeset at 912px. Below that, scroll them
   sideways instead of scaling the labels down to nothing. */
.b-figure--sheet { min-width: 0; }
.b-figure--sheet .b-figure__frame { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.b-figure--sheet .b-figure__frame img { display: block; }
@media (width < 912px) {
  .b-figure--sheet .b-figure__frame img { width: 912px; max-width: none; }
}
.b-caption { margin-top: 12px; font-size: var(--fs-label); line-height: 20px; color: var(--ink-3); }

/* Compare slider */
.b-compare__stage { position: relative; display: grid; place-items: center; padding: 56px; border-radius: 32px; background: var(--t); overflow: hidden; user-select: none; }
.b-compare__pair { --pos: 50%; position: relative; width: min(272px, 72%); touch-action: pan-y; }
.b-compare__layer img { width: 100%; }
.b-compare__layer--after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.b-compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; pointer-events: none; z-index: 3; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); }
.b-compare__knob { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; gap: 0; width: 40px; height: 40px; translate: -50% -50%; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: var(--shadow-l); transition: scale 200ms var(--ease-out); }
.b-compare__knob svg { width: 12px; height: 12px; }
.b-compare__stage.is-dragging .b-compare__knob { scale: 1.12; }
.b-compare__label { position: absolute; top: 16px; z-index: 4; padding: 4px 12px; border-radius: 1000px; background: rgba(255, 255, 255, 0.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: var(--fs-label); line-height: 20px; font-weight: 500; }
.b-compare__label--before { left: 16px; }
.b-compare__label--after { right: 16px; }
.b-compare__range { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.b-compare__range:focus-visible + .b-compare__handle .b-compare__knob { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (width < 640px) { .b-compare__stage { padding: 48px 24px; } }

/* Flow */
.b-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 16px; counter-reset: flow; }
.b-flow__step { position: relative; padding: 20px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); counter-increment: flow; }
.b-flow__step::before { content: counter(flow); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--a); color: #fff; font-family: var(--font-mono); font-size: 12px; line-height: 16px; }
.b-flow__step h3 { margin-top: 24px; font-size: var(--fs-body); line-height: 24px; font-weight: 500; letter-spacing: -0.016em; }
.b-flow__step p { margin-top: 4px; font-size: var(--fs-label); line-height: 20px; color: var(--ink-2); }
.b-flow__step:not(:last-child)::after { content: ""; position: absolute; top: 36px; left: 60px; right: 16px; height: 1px; background: repeating-linear-gradient(90deg, var(--line) 0 4px, transparent 4px 8px); }

/* ---------- Next project ---------- */
.next { padding-top: var(--section); }
.next__link { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: stretch; min-height: 400px; border-radius: 32px; background: var(--t); color: var(--tk); overflow: hidden; }
.next__text { display: flex; flex-direction: column; padding: 48px; }
.next__text .t-label { color: inherit; opacity: 0.72; }
.next__title { margin-top: auto; }
.next__headline { max-width: 400px; margin-top: 12px; opacity: 0.8; }
.next__cta { align-self: flex-start; margin-top: 32px; background: var(--tk); color: var(--t); }
.next__cta .i-arrow { transition: transform 480ms var(--ease-out); }
.next__media { position: relative; margin: 12px 12px 12px 0; border-radius: 20px; overflow: hidden; }
.next__media .cover { transition: scale 1120ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .next__link:hover .next__media .cover { scale: 1.04; }
  .next__link:hover .next__cta { background: var(--accent); color: #fff; }
  .next__link:hover .next__cta .i-arrow { transform: translateX(4px); }
}
@media (width < 768px) {
  .next__link { grid-template-columns: 1fr; border-radius: 24px; }
  .next__text { padding: 24px; }
  .next__media { order: -1; aspect-ratio: 4 / 3; margin: 8px 8px 0; }
  .next__title { margin-top: 28px; }
}

/* ---------- Mobile contents ---------- */
.toc-fab { position: fixed; white-space: nowrap; left: 50%; bottom: 16px; z-index: 90; display: none; align-items: center; gap: 12px; height: 48px; padding: 0 8px 0 16px; border-radius: 1000px; background: var(--ink); color: #fff; font-size: var(--fs-label); line-height: 20px; box-shadow: var(--shadow-l); translate: -50% calc(100% + 32px); transition: translate 480ms var(--ease-drawer), scale var(--t-fast) var(--ease-out); }
.toc-fab.is-visible { translate: -50% 0; }
.toc-fab:active { scale: 0.96; }
.toc-fab__current { display: inline-grid; place-items: center; height: 32px; padding: 0 12px; border-radius: 1000px; background: rgba(255, 255, 255, 0.14); font-weight: 500; }

.toc-sheet { position: fixed; inset: auto 8px 8px; z-index: 95; padding: 8px 8px 12px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-l); transform: translateY(calc(100% + 24px)); transition: transform 480ms var(--ease-drawer); }
.toc-sheet.is-open { transform: none; }
.toc-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 12px; }
.toc-sheet__close { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; }
.toc-sheet__close svg { width: 16px; height: 16px; }
.toc-sheet a { display: flex; align-items: center; gap: 16px; padding: 12px; border-radius: 12px; font-size: 20px; line-height: 28px; letter-spacing: -0.02em; }
.toc-sheet a.is-active { background: var(--well); }
.toc-scrim { position: fixed; inset: 0; z-index: 94; background: rgba(15, 15, 15, 0.24); opacity: 0; visibility: hidden; transition: opacity 320ms ease, visibility 0ms linear 320ms; }
.toc-scrim.is-open { opacity: 1; visibility: visible; transition: opacity 320ms ease; }

@media (width < 1024px) { .toc-fab { display: inline-flex; } }

/* ==========================================================================
   INTERACTIVE BLOCKS - calculator, hotspots, variants, timeline, poll, states
   ========================================================================== */

/* ---------- Shared ---------- */
.b-head { display: grid; gap: 12px; }
.b-head__title { max-width: 440px; }
.b-head__title em { color: var(--a); }
.b-head__lede { max-width: 400px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); }

.b-eyebrow { display: inline-flex; align-items: center; gap: 12px; color: var(--a); }
.b-eyebrow__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.b-eyebrow__dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; animation: b-live 2000ms var(--ease-out) infinite; }
@keyframes b-live { 0% { opacity: 0.48; scale: 1; } 100% { opacity: 0; scale: 3; } }

/* Segmented control with a sliding pill */
.b-seg { position: relative; display: inline-flex; max-width: 100%; padding: 4px; border-radius: 1000px; background: var(--well); isolation: isolate; overflow-x: auto; scrollbar-width: none; }
.b-seg::-webkit-scrollbar { display: none; }
.b-seg__opt { position: relative; z-index: 1; display: inline-flex; align-items: baseline; justify-content: center; gap: 4px; flex: 1 0 auto; min-width: 48px; height: 40px; padding: 8px 16px; border-radius: 1000px; font-size: var(--fs-label); line-height: 24px; font-weight: 500; white-space: nowrap; color: var(--ink-2); transition: color 240ms ease, scale var(--t-fast) var(--ease-out); }
.b-seg__opt small { font-size: 12px; line-height: 16px; font-weight: 400; opacity: 0.72; }
.b-seg__opt.is-on { color: var(--ink); }
.b-seg__opt:active { scale: 0.96; }
.b-seg__opt::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--a); transform: scaleX(0); transform-origin: left; opacity: 0; }
.is-auto .b-seg__opt.is-on::after { opacity: 0.64; animation: b-progress var(--dur, 4000ms) linear forwards; }
.is-auto.is-paused .b-seg__opt.is-on::after { animation-play-state: paused; }
@keyframes b-progress { to { transform: scaleX(1); } }
.b-seg__pill { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 1000px; background: var(--surface); box-shadow: var(--shadow-s); }
.b-seg.is-ready .b-seg__pill { transition: transform 480ms var(--ease-out), width 480ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .b-seg__opt:not(.is-on):hover { color: var(--ink); } }

.b-seg--tone { background: color-mix(in srgb, var(--tk) 8%, transparent); }
.b-seg--tone .b-seg__opt { color: color-mix(in srgb, var(--tk) 64%, transparent); }
.b-seg--tone .b-seg__opt.is-on { color: var(--t); }
.b-seg--tone .b-seg__pill { background: var(--tk); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .b-seg--tone .b-seg__opt:not(.is-on):hover { color: var(--tk); } }

/* Range input */
.b-range { --pp: 0.5; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 32px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.b-range:focus-visible { outline: none; }
.b-range::-webkit-slider-runnable-track { height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--a) calc(14px + (100% - 28px) * var(--pp)), var(--well-2) 0); }
.b-range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(15, 15, 15, 0.08), 0 4px 12px -4px rgba(15, 15, 15, 0.32); transition: scale 200ms var(--ease-out), box-shadow 240ms ease; }
.b-range::-moz-range-track { height: 8px; border-radius: 8px; background: var(--well-2); }
.b-range::-moz-range-progress { height: 8px; border-radius: 8px; background: var(--a); }
.b-range::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(15, 15, 15, 0.08), 0 4px 12px -4px rgba(15, 15, 15, 0.32); transition: scale 200ms var(--ease-out); }
.b-range:active::-webkit-slider-thumb { scale: 1.12; }
.b-range:active::-moz-range-thumb { scale: 1.12; }
.b-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--a) 32%, transparent), 0 4px 12px -4px rgba(15, 15, 15, 0.32); }
.b-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--a) 32%, transparent), 0 4px 12px -4px rgba(15, 15, 15, 0.32); }
.b-range.is-hint::-webkit-slider-thumb { animation: b-hint 1600ms var(--ease-out) infinite; }
.b-range.is-hint::-moz-range-thumb { animation: b-hint 1600ms var(--ease-out) infinite; }
@keyframes b-hint {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--a) 40%, transparent), 0 4px 12px -4px rgba(15, 15, 15, 0.32); }
  100% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--a) 0%, transparent), 0 4px 12px -4px rgba(15, 15, 15, 0.32); }
}

/* Content swap */
.b-variants__note, .b-variants__result, .b-time__swap, .b-states__copy { transition: opacity 320ms ease, translate 560ms var(--ease-out); }
.is-out { opacity: 0; translate: 0 8px; transition-duration: 200ms; }

/* ---------- Calculator ---------- */
.b-calc__stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 16px; border-radius: 32px; background: var(--ts); }
.b-calc__controls { display: flex; flex-direction: column; gap: 32px; padding: 24px 24px 32px; }
.b-field { display: grid; gap: 8px; }
.b-field__top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.b-field__label { font-size: var(--fs-label); line-height: 20px; color: var(--ink-2); }
.b-field__value { font-size: 32px; line-height: 40px; font-weight: 500; letter-spacing: -0.04em; color: var(--ink); }
.b-field__scale { display: flex; justify-content: space-between; margin-top: -4px; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.b-field .b-seg { justify-self: start; }

.b-calc__out { display: flex; flex-direction: column; padding: 24px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-m); }
.b-calc__rows { display: grid; }
.b-calc__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-inline: -12px; padding: 16px 12px; border-radius: 12px; }
.b-calc__row + .b-calc__row { box-shadow: inset 0 1px 0 var(--line); }
.b-calc__row dt { display: flex; align-items: center; gap: 12px; min-width: 0; }
.b-calc__row dt > span { display: grid; }
.b-calc__label { font-size: var(--fs-body); line-height: 24px; }
.b-calc__sub { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.b-calc__sub:empty { display: none; }
.b-calc__row dd { font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; }
.b-calc__row.is-strong dd { font-size: 32px; line-height: 40px; letter-spacing: -0.04em; color: var(--a); }
.b-calc__row.is-warn .b-calc__sub { width: max-content; margin-top: 4px; padding: 2px 8px; border-radius: 1000px; background: rgba(194, 98, 26, 0.12); color: #A8521A; font-weight: 500; }
.b-calc__row.is-flash { animation: b-flash 1600ms var(--ease-out); }
@keyframes b-flash { 0%, 100% { background: transparent; } 20%, 56% { background: rgba(194, 98, 26, 0.1); } }
.b-calc__note { margin-top: auto; padding-top: 16px; font-size: var(--fs-label); line-height: 20px; color: var(--ink-2); }
.b-calc__note:empty { display: none; }
.b-calc__note em { color: var(--ink); }

.b-swatch { flex: none; width: 12px; height: 12px; border-radius: 50%; }
.b-swatch--band { background: color-mix(in srgb, var(--a) 32%, transparent); }
.b-swatch--line { background: var(--a); }
.b-swatch--dash { box-shadow: inset 0 0 0 2px var(--ink-3); }
.b-swatch--base { background: var(--well-2); }

.b-chart { margin-bottom: 8px; }
.b-chart__plot { position: relative; aspect-ratio: 2 / 1; }
.b-chart svg { width: 100%; height: 100%; overflow: visible; }
.b-chart path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.b-chart .b-chart__band { fill: color-mix(in srgb, var(--a) 16%, transparent); }
.b-chart .b-chart__line { stroke: var(--a); stroke-width: 2px; }
.b-chart .b-chart__bad { stroke: var(--ink-3); stroke-width: 2px; stroke-dasharray: 4 4; }
.b-chart .b-chart__base { stroke: var(--well-2); stroke-width: 2px; }
.b-chart .b-chart__goal { stroke: var(--ink); stroke-opacity: 0.32; stroke-width: 1px; stroke-dasharray: 2 4; }
.b-chart__goal-label { position: absolute; left: 0; padding-bottom: 4px; translate: 0 -100%; font-size: 12px; line-height: 16px; color: var(--ink-2); }
.b-chart__dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--a); box-shadow: 0 0 0 4px color-mix(in srgb, var(--a) 24%, transparent); }
.b-chart__axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--ink-3); }

@media (width < 900px) {
  .b-calc__stage { grid-template-columns: minmax(0, 1fr); }
}
@media (width < 640px) {
  .b-calc__stage { padding: 8px; border-radius: 24px; }
  .b-calc__controls { gap: 28px; padding: 20px 12px 24px; }
  .b-calc__out { padding: 20px 16px; }
  .b-calc__row.is-strong dd { font-size: 28px; line-height: 36px; }
}

/* ---------- Hotspots ---------- */
.b-spots__stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 296px); align-items: center; gap: 56px; padding: 56px; border-radius: 32px; background: var(--t); color: var(--tk); }
.b-spots .b-eyebrow { color: color-mix(in srgb, var(--a) 56%, #fff); }
.b-spots .b-head__lede { color: color-mix(in srgb, var(--tk) 64%, transparent); }
.b-spots__side { display: grid; gap: 28px; }
.b-spots__list { display: grid; gap: 4px; margin-inline: -12px; }
.b-spots__item { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 16px; width: 100%; padding: 12px; border-radius: 16px; text-align: left; color: color-mix(in srgb, var(--tk) 56%, transparent); transition: background 320ms ease, color 320ms ease; }
.b-spots__item.is-on { background: color-mix(in srgb, var(--tk) 8%, transparent); color: var(--tk); }
.b-spots__num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tk) 24%, transparent); font-family: var(--font-mono); font-size: 12px; line-height: 16px; transition: background 320ms ease, color 320ms ease, box-shadow 320ms ease; }
.b-spots__item.is-on .b-spots__num { background: var(--a); color: #fff; box-shadow: none; }
.b-spots__copy { display: grid; min-width: 0; }
.b-spots__title { padding-top: 4px; font-size: var(--fs-body); line-height: 24px; font-weight: 500; letter-spacing: -0.016em; }
.b-spots__clip { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 480ms var(--ease-out); }
.b-spots__item.is-on .b-spots__clip { grid-template-rows: 1fr; }
.b-spots__text { min-height: 0; overflow: hidden; font-size: var(--fs-label); line-height: 20px; opacity: 0.8; }
.b-spots__text::before { content: ""; display: block; height: 4px; }
@media (hover: hover) and (pointer: fine) { .b-spots__item:not(.is-on):hover { color: color-mix(in srgb, var(--tk) 84%, transparent); } }

.b-spots__device { justify-self: center; width: 100%; }
.b-spots__screen { position: relative; }
/* Image hotspots: clip the spotlight to the phone's rounded outline */
.b-spots__frame { position: relative; overflow: hidden; border-radius: 13% / 6.4%; }
.b-spots__frame:has(.shot--flat) { border-radius: 28px; }
.b-spots__pin { position: absolute; z-index: 30; display: grid; place-items: center; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: var(--tk); color: var(--t); font-family: var(--font-mono); font-size: 12px; line-height: 16px; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.48); transition: background 240ms ease, color 240ms ease, scale 400ms var(--ease-spring); }
.b-spots__pin.is-on { background: var(--a); color: #fff; scale: 1.16; }
.b-spots__pin.is-on::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--a); z-index: -1; animation: b-live 1600ms var(--ease-out) infinite; }
.b-spots__ring { position: absolute; z-index: 20; border-radius: 12px; pointer-events: none; opacity: 0; box-shadow: 0 0 0 2px var(--a), 0 0 0 1000px rgba(8, 8, 10, 0.36); }
.b-spots.is-ready .b-spots__ring { opacity: 1; transition: left 560ms var(--ease-out), top 560ms var(--ease-out), width 560ms var(--ease-out), height 560ms var(--ease-out), opacity 480ms ease; }

@media (width < 900px) {
  .b-spots__stage { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 40px 32px; }
  .b-spots__device { order: -1; width: min(100%, 272px); }
}
@media (width < 640px) {
  .b-spots__stage { padding: 32px 16px 16px; border-radius: 24px; }
  .b-spots__side { gap: 20px; }
  .b-spots__list { margin-inline: 0; }
  .b-spots__device { width: min(100%, 240px); }
  .b-spots__pin { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
}

/* ---------- Variants (copy test) ---------- */
.b-variants__stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 272px); align-items: center; gap: 56px; padding: 56px; border-radius: 32px; background: var(--t); color: var(--tk); }
.b-variants .b-eyebrow { color: color-mix(in srgb, var(--a) 56%, #fff); }
.b-variants .b-head__lede { color: color-mix(in srgb, var(--tk) 64%, transparent); }
.b-variants__side { display: grid; gap: 32px; }

/* Every version at once: key, notification title, score and a bar */
.b-variants__metric { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid color-mix(in srgb, var(--tk) 12%, transparent); font-size: 12px; line-height: 16px; color: color-mix(in srgb, var(--tk) 56%, transparent); }
.b-variants__list { display: grid; gap: 4px; margin: 8px -12px 0; }
.b-variants__row { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; width: 100%; padding: 12px; border-radius: 16px; text-align: left; color: color-mix(in srgb, var(--tk) 56%, transparent); overflow: hidden; transition: background 320ms ease, color 320ms ease; }
.b-variants__row.is-on { background: color-mix(in srgb, var(--tk) 8%, transparent); color: var(--tk); }
.b-variants__key { grid-row: 1 / span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tk) 24%, transparent); font-family: var(--font-mono); font-size: 12px; line-height: 16px; transition: background 320ms ease, color 320ms ease, box-shadow 320ms ease; }
.b-variants__row.is-on .b-variants__key { background: var(--tk); color: var(--t); box-shadow: none; }
.b-variants__row.is-chosen.is-on .b-variants__key { background: var(--a); color: #fff; }
.b-variants__rtitle { font-size: var(--fs-body); line-height: 24px; font-weight: 500; letter-spacing: -0.016em; }
.b-variants__score { grid-column: 3; grid-row: 1 / span 2; font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -0.03em; }
.b-variants__score small { font-size: 14px; letter-spacing: 0; opacity: 0.56; }
.b-variants__bar { grid-column: 2; display: block; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--tk) 12%, transparent); overflow: hidden; }
.b-variants__bar i { display: block; width: var(--v); height: 100%; border-radius: inherit; background: color-mix(in srgb, var(--tk) 40%, transparent); transition: width 960ms var(--ease-out), background 320ms ease; }
.motion .b-variants:not(.is-in) .b-variants__bar i { width: 0; }
.b-variants__row.is-on .b-variants__bar i { background: var(--tk); }
.b-variants__row.is-chosen .b-variants__bar i { background: var(--a); }
.b-variants__row::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px; background: var(--a); transform: scaleX(0); transform-origin: left; opacity: 0; }
.is-auto .b-variants__row.is-on::after { opacity: 0.64; animation: b-progress var(--dur, 4000ms) linear forwards; }
.is-auto.is-paused .b-variants__row.is-on::after { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) { .b-variants__row:not(.is-on):hover { color: color-mix(in srgb, var(--tk) 84%, transparent); } }

.b-variants__result { display: grid; justify-items: start; align-content: start; gap: 12px; min-height: 128px; }
.b-variants__verdict { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 1000px; background: color-mix(in srgb, var(--tk) 10%, transparent); font-size: 12px; line-height: 16px; font-weight: 500; }
.b-variants__verdict.is-chosen { background: var(--a); color: #fff; }
.b-variants__verdict svg { width: 12px; height: 12px; }
.b-variants__quote { max-width: 440px; font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 28px; line-height: 36px; letter-spacing: -0.012em; }

/* The phone: the same iPhone frame as every mockup, with an iOS lock screen
   inside. --pt is one iOS point (the screen is 390 points wide). */
.b-variants__device { position: relative; justify-self: center; width: 100%; aspect-ratio: 543 / 1118; container-type: inline-size; }
.b-variants__frame { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; filter: drop-shadow(0 32px 40px rgba(0, 0, 0, 0.4)); }
.b-variants__screen {
  --pt: calc(91.16cqw / 390);
  position: absolute; left: 4.42%; top: 1.88%; width: 91.16%; height: 96.33%;
  display: flex; flex-direction: column; align-items: center;
  border-radius: 14.55% / 6.69%;
  background: radial-gradient(96% 48% at 50% 108%, color-mix(in srgb, var(--a) 56%, transparent), transparent 72%), linear-gradient(180deg, color-mix(in srgb, var(--t) 64%, #000) 0%, var(--t) 72%);
  color: #fff;
  overflow: hidden;
}
.b-variants__lockicon { width: calc(var(--pt) * 14); margin-top: calc(var(--pt) * 68); opacity: 0.88; }
.b-variants__lockicon svg { width: 100%; height: auto; }
.b-variants__date { margin-top: calc(var(--pt) * 8); font-size: calc(var(--pt) * 19); line-height: 1.2; font-weight: 600; opacity: 0.88; }
.b-variants__time { font-size: calc(var(--pt) * 92); line-height: 1; font-weight: 600; letter-spacing: -0.04em; }
.b-variants__stack { width: calc(100% - var(--pt) * 24); margin-top: auto; }
.b-variants__note { position: relative; z-index: 1; display: grid; grid-template-columns: calc(var(--pt) * 38) minmax(0, 1fr); align-items: center; gap: calc(var(--pt) * 10); padding: calc(var(--pt) * 12); border-radius: calc(var(--pt) * 22); background: rgba(246, 246, 244, 0.86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #111; text-align: left; }
.b-variants__icon { display: grid; place-items: center; width: calc(var(--pt) * 38); height: calc(var(--pt) * 38); border-radius: calc(var(--pt) * 9); background: var(--a); color: #fff; }
.b-variants__icon svg { width: 55%; height: 55%; }
.b-variants__msg { display: grid; min-width: 0; }
.b-variants__top { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--pt) * 8); }
.b-variants__ntitle { overflow: hidden; font-size: calc(var(--pt) * 15); line-height: 1.34; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.b-variants__when { flex: none; font-size: calc(var(--pt) * 13); line-height: 1.34; color: rgba(0, 0, 0, 0.44); }
.b-variants__nbody { font-size: calc(var(--pt) * 15); line-height: 1.34; color: rgba(0, 0, 0, 0.72); }
.b-variants__peek { display: block; width: calc(100% - var(--pt) * 24); height: calc(var(--pt) * 12); margin: 0 auto; border-radius: 0 0 calc(var(--pt) * 16) calc(var(--pt) * 16); background: rgba(246, 246, 244, 0.36); }
.b-variants__note:not(.is-out) { transition: opacity 320ms ease, translate 640ms var(--ease-spring); }
.b-variants__note.is-out { translate: 0 calc(var(--pt) * 24); }
.b-variants__dock { display: flex; justify-content: space-between; width: 100%; margin-top: calc(var(--pt) * 40); padding-inline: calc(var(--pt) * 46); }
.b-variants__dock i { display: grid; place-items: center; width: calc(var(--pt) * 50); height: calc(var(--pt) * 50); border-radius: 50%; background: rgba(0, 0, 0, 0.32); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.b-variants__dock svg { width: 40%; height: 40%; }
.b-variants__home { width: calc(var(--pt) * 134); height: calc(var(--pt) * 5); margin: calc(var(--pt) * 20) 0 calc(var(--pt) * 8); border-radius: 1000px; background: #fff; }

@media (width < 900px) {
  .b-variants__stage { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 40px 32px; }
  .b-variants__device { order: -1; width: min(100%, 272px); }
}
@media (width < 640px) {
  .b-variants__stage { padding: 32px 16px 16px; border-radius: 24px; }
  .b-variants__side { gap: 24px; }
  .b-variants__device { width: min(100%, 240px); }
  .b-variants__rtitle { font-size: var(--fs-label); line-height: 20px; }
  .b-variants__score { font-size: 20px; line-height: 28px; }
  .b-variants__quote { font-size: 24px; line-height: 32px; }
}

/* ---------- Timeline ---------- */
.b-time__stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); grid-template-rows: auto 1fr; gap: 32px 56px; padding: 48px; border-radius: 32px; background: var(--ts); }
.b-time__card { --tone: var(--positive); grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; min-height: 360px; padding: 24px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-m); }
.b-time__card[data-tone="warn"] { --tone: #C2621A; }
.b-time__card[data-tone="alert"] { --tone: var(--danger); }
.b-time__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.b-time__day { font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-3); }
.b-time__status { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 1000px; background: color-mix(in srgb, var(--tone) 12%, transparent); color: var(--tone); font-size: 12px; line-height: 16px; font-weight: 500; transition: color 320ms ease, background 320ms ease; }
.b-time__title { display: block; margin-top: 20px; font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 500; letter-spacing: -0.024em; }
.b-time__text { margin-top: 8px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); }
.b-time__fee { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line); font-size: var(--fs-label); line-height: 20px; color: var(--ink-2); }
.b-time__fee b { font-size: 32px; line-height: 40px; font-weight: 500; letter-spacing: -0.04em; color: var(--ink); }
.b-time__promise { display: flex; align-items: center; gap: 8px; margin: 16px -8px -8px; padding: 8px 12px; border-radius: 12px; background: var(--ts); font-size: var(--fs-label); line-height: 20px; font-weight: 500; }
.b-time__promise svg { flex: none; width: 16px; height: 16px; color: var(--a); }

.b-time__track { grid-column: 1; align-self: end; position: relative; padding-bottom: 40px; }
.b-time__stops { position: absolute; inset: 32px 0 0; pointer-events: none; }
.b-time__stop { position: absolute; top: 0; left: calc(14px + (100% - 28px) * var(--s)); width: 2px; height: 8px; margin-left: -1px; border-radius: 2px; background: var(--well-2); transition: background 320ms ease; }
.b-time__stop.is-past { background: var(--a); }
.b-time__stop em { position: absolute; top: 12px; left: 50%; translate: -50% 0; font-style: normal; font-size: 12px; line-height: 16px; white-space: nowrap; color: var(--ink-3); transition: color 320ms ease; }
.b-time__stop:first-child em { left: 0; translate: -14px 0; }
.b-time__stop:last-child em { left: auto; right: 0; translate: 14px 0; }
.b-time__stop.is-on em { color: var(--ink); font-weight: 500; }

@media (width < 900px) {
  .b-time__stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding: 32px; }
  .b-time__card { grid-column: auto; grid-row: auto; min-height: 320px; }
  .b-time__track { grid-column: auto; order: 2; }
}
@media (width < 640px) {
  .b-time__stage { gap: 24px; padding: 24px 16px 16px; border-radius: 24px; }
  .b-time__card { min-height: 336px; padding: 20px; }
}

/* ---------- Poll ---------- */
.b-poll__card { padding: 32px; border-radius: 28px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.b-poll__q { max-width: 560px; margin-top: 16px; }
.b-poll__q em { color: var(--a); }
.b-poll__opts { display: grid; gap: 8px; margin-top: 24px; }
.b-poll__opt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 16px 20px; border-radius: 16px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); text-align: left; overflow: hidden; isolation: isolate; transition: box-shadow 240ms ease, scale var(--t-fast) var(--ease-out); }
.b-poll__opt:active { scale: 0.98; }
.b-poll__bar { position: absolute; inset: 0 auto 0 0; z-index: -1; width: 0; background: var(--well); transition: width 960ms var(--ease-out); }
.is-answered .b-poll__bar { width: var(--v); transition-delay: calc(var(--i) * 80ms); }
.b-poll__opt.is-picked { box-shadow: inset 0 0 0 2px var(--a); }
.b-poll__opt.is-picked .b-poll__bar { background: color-mix(in srgb, var(--a) 16%, transparent); }
.b-poll__label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-body); line-height: 24px; font-weight: 500; }
.b-poll__tick { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--a); color: #fff; opacity: 0; scale: 0.4; transition: opacity 240ms ease, scale 480ms var(--ease-spring); }
.b-poll__tick svg { width: 12px; height: 12px; }
.is-answered .b-poll__tick { opacity: 1; scale: 1; transition-delay: 480ms; }
.b-poll__pct { font-size: var(--fs-body); line-height: 24px; font-weight: 500; opacity: 0; translate: 8px 0; transition: opacity 320ms ease, translate 480ms var(--ease-out); }
.is-answered .b-poll__pct { opacity: 1; translate: 0 0; }
.b-poll__reveal { margin-top: 16px; padding: 16px 20px; border-radius: 16px; background: var(--ts); font-size: var(--fs-body); line-height: var(--lh-body); }
.b-poll__reveal em { color: var(--a); }
.b-poll__reveal.is-new { animation: b-rise 560ms var(--ease-out); }
@keyframes b-rise { from { opacity: 0; translate: 0 8px; } }
.b-poll__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 16px; font-size: 12px; line-height: 16px; color: var(--ink-3); }
.is-answered .b-poll__hint { visibility: hidden; }
@media (hover: hover) and (pointer: fine) { .b-poll__opt:not(.is-picked):hover { box-shadow: inset 0 0 0 1px var(--ink-3); } }
@media (width < 640px) {
  .b-poll__card { padding: 24px 16px 20px; border-radius: 24px; }
  .b-poll__opt { padding: 16px; }
}

/* ---------- States ---------- */
.b-states__stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 272px); align-items: center; gap: 56px; padding: 56px; border-radius: 32px; background: var(--t); color: var(--tk); }
.b-states .b-eyebrow { color: color-mix(in srgb, var(--a) 56%, #fff); }
.b-states__side { display: grid; gap: 32px; justify-items: start; }
.b-states__copy { max-width: 400px; min-height: 120px; }
.b-states__title { display: block; font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 500; letter-spacing: -0.024em; }
.b-states__text { margin-top: 8px; font-size: var(--fs-body); line-height: var(--lh-body); color: color-mix(in srgb, var(--tk) 72%, transparent); }
.b-states__device { display: grid; width: 100%; }
.b-states__screen { grid-area: 1 / 1; opacity: 0; translate: 0 24px; scale: 0.96; pointer-events: none; transition: opacity 400ms ease, translate 720ms var(--ease-out), scale 720ms var(--ease-out); }
.b-states__screen.is-before { translate: 0 -24px; }
.b-states__screen.is-on { opacity: 1; translate: 0 0; scale: 1; }

@media (width < 900px) {
  .b-states__stage { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 40px 32px; }
  .b-states__device { order: 2; justify-self: center; width: min(100%, 272px); }
}
@media (width < 640px) {
  .b-states__stage { padding: 32px 16px; border-radius: 24px; }
  .b-states__side { gap: 24px; }
  .b-states__side .b-seg { justify-self: stretch; }
  .b-states__device { width: min(100%, 240px); }
}

/* ---------- Modes: real components, re-themed live from the tokens ---------- */
.b-modes { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.b-modes__side { display: grid; gap: 24px; align-content: start; }
.b-modes__copy { min-height: 84px; }
.b-modes__copy b { display: block; font-size: 20px; line-height: 28px; letter-spacing: -0.02em; }
.b-modes__copy p { margin-top: 6px; font-size: var(--fs-small); line-height: 24px; color: var(--ink-2); }
.b-modes__canvas {
  --m-canvas: #efefef; --m-surface: #fff; --m-text: #0e0e0c; --m-text2: #6b6a64; --m-text3: #a3a29b;
  --m-border: rgba(14, 14, 12, 0.08); --m-accent: #1f9d6a; --m-soft: #e2f2ea; --m-on: #fff;
  padding: 28px; border-radius: 28px; background: var(--m-canvas);
  transition: background 420ms var(--ease-out);
}
.b-modes__tag { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: 0.08em; color: var(--m-text3); transition: color 420ms var(--ease-out); }
.b-modes__tag i { width: 10px; height: 10px; border-radius: 50%; background: var(--m-accent); transition: background 420ms var(--ease-out); }
.b-modes__surface { padding: 28px; border-radius: 20px; background: var(--m-surface); box-shadow: inset 0 0 0 1px var(--m-border); transition: background 420ms var(--ease-out), box-shadow 420ms var(--ease-out); }
.b-modes__amount { font-size: 44px; line-height: 1.1; font-weight: 500; letter-spacing: -0.03em; color: var(--m-text); font-variant-numeric: tabular-nums; transition: color 420ms var(--ease-out); }
.b-modes__amount span { color: var(--m-text3); transition: color 420ms var(--ease-out); }
.b-modes__cap { margin-top: 10px; font-size: 15px; line-height: 20px; color: var(--m-text2); transition: color 420ms var(--ease-out); }
.b-modes__rule { height: 1px; margin: 22px 0; background: var(--m-border); transition: background 420ms var(--ease-out); }
.b-modes__row { display: flex; align-items: center; gap: 14px; }
.b-modes__av { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--m-soft); transition: background 420ms var(--ease-out); }
.b-modes__who { display: grid; gap: 2px; margin-right: auto; min-width: 0; }
.b-modes__who b { font-size: 16px; line-height: 22px; color: var(--m-text); transition: color 420ms var(--ease-out); }
.b-modes__who span { font-size: 13px; line-height: 18px; color: var(--m-text2); transition: color 420ms var(--ease-out); }
.b-modes__amt { font-size: 17px; font-weight: 500; color: var(--m-text); font-variant-numeric: tabular-nums; transition: color 420ms var(--ease-out); }
.b-modes__foot { display: flex; align-items: center; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.b-modes__btn { padding: 13px 22px; border-radius: 999px; background: var(--m-accent); color: var(--m-on); font-size: 15px; line-height: 20px; font-weight: 600; transition: background 420ms var(--ease-out), color 420ms var(--ease-out); }
.b-modes__pill { padding: 9px 16px; border-radius: 999px; background: var(--m-soft); color: var(--m-accent); font-size: 13px; line-height: 18px; font-weight: 500; transition: background 420ms var(--ease-out), color 420ms var(--ease-out); }
@media (width < 900px) {
  .b-modes { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .b-modes__copy { min-height: 0; }
}

/* ---------- Type ramp: real specimens, not a screenshot ---------- */
.b-ramp { --u: 1px; }
.b-ramp__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; margin-top: 32px; }
.b-ramp__kicker { font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.b-ramp__col ul { display: grid; gap: 28px; margin-top: 24px; }
.b-ramp__row { display: grid; gap: 8px; min-width: 0; }
.b-ramp__meta { display: flex; flex-wrap: wrap; gap: 10px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.04em; color: var(--ink-3); }
.b-ramp__meta i { font-style: normal; opacity: 0.72; }
.b-ramp__spec { display: block; font-size: calc(var(--s) * var(--u)); font-weight: var(--w); line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.b-ramp__spec em { font-style: normal; color: var(--ink-3); }
.b-ramp__spec--serif { font-family: var(--font-serif); letter-spacing: 0; }
.b-ramp__spec--mono { font-family: var(--font-mono); letter-spacing: 0; }
.b-ramp__note { margin-top: 36px; padding: 24px 28px; border-radius: 16px; background: var(--well); }
.b-ramp__note b { font-size: 17px; line-height: 24px; }
.b-ramp__note p { margin-top: 8px; font-size: var(--fs-small); line-height: 24px; color: var(--ink-2); }
@media (width < 1024px) { .b-ramp { --u: 0.74px; } }
@media (width < 760px) { .b-ramp { --u: 0.56px; } .b-ramp__cols { grid-template-columns: minmax(0, 1fr); gap: 40px; } }