/* ==========================================================================
   Speed.ai v2: the page (every section below the hero)
   Loads after shared/base.css. The field engine draws one fixed canvas behind
   all of this; each section owns its own legibility (scrims) and its own static
   formation for when WebGL isn't running (html:not(.has-field)).

   1. ground, canvas, grid      6. labels projected onto the bars
   2. type                      7. static formations (SVG materials)
   3. shared bits               8. sections, top to bottom
   4. sections and scenes       9. video dialog
   5. scrims                   10. breakpoints, static and reduced motion
   ========================================================================== */

/* ---------- 1. ground, canvas, grid ---------- */
:root {
  --vh: 1vh;
  --col-gap: 24px;
  --sec-pad: clamp(96px, 11vw, 160px);
  --scrim-0: rgba(5, 5, 6, 0);
  --scrim-1: rgba(5, 5, 6, .42);
  --scrim-2: rgba(5, 5, 6, .8);
  --scrim-3: rgba(5, 5, 6, .92);
  --label-ground: rgba(5, 5, 6, .8);
}
@supports (height: 1svh) { :root { --vh: 1svh; } }

html, body { background: var(--carbon-0); }
html { scroll-padding-top: var(--masthead-h); }

/* the engine's one canvas: fixed, full viewport, behind everything */
.field-canvas { position: fixed; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
html:not(.has-field) .field-canvas { visibility: hidden; }
main, .footer { position: relative; z-index: 1; }
/* soft grounds and glows may bleed past the gutter; never into a sideways scroll
   (clip, not hidden: no scroll container, so sticky and fixed labels are unaffected) */
main { overflow-x: clip; }
.fb-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }

/* ---------- 2. type ---------- */
.h2 {
  font-size: var(--fs-h2);
  font-weight: 360;
  letter-spacing: -.042em;
  line-height: 1.04;
  text-wrap: balance;
}
.product {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 20px;
  font-size: .9375rem; font-weight: 450; letter-spacing: -.01em; line-height: 1.3;
  color: var(--snow);
}
.product sup { font-size: .7em; vertical-align: .5em; font-weight: 350; }
.scene__copy .lede, .head .lede, .h2 + .lede { margin-top: 24px; }
.body { margin-top: 20px; max-width: 32em; font-size: 1.0625rem; font-weight: 300; line-height: 1.65; color: var(--mist); }
.fine { margin-top: 16px; font-size: .875rem; font-weight: 350; line-height: 1.5; color: var(--mist); }
.nowrap { white-space: nowrap; }
.source { margin-top: 20px; font-size: .8125rem; line-height: 1.5; color: var(--mist); }
.source a, .security__badge a, .footer__concept a { text-decoration: underline; text-decoration-color: rgba(245, 245, 244, .35); text-underline-offset: 3px; transition: text-decoration-color 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .source a:hover, .security__badge a:hover, .footer__concept a:hover { text-decoration-color: currentColor; } }

/* ---------- 3. shared bits ---------- */
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.ctas--centre { justify-content: center; }

/* the hero's quiet stats row: hairline, light numeral, small label */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); }
.stats > li, .stats > div { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line-dark-2); }
.stats__n { font-size: 1.75rem; font-weight: 300; letter-spacing: -.035em; line-height: 1; color: var(--snow); }
.stats__l { font-size: .8125rem; font-weight: 350; line-height: 1.4; color: var(--mist); max-width: 15em; text-wrap: balance; }
.stats--facts > div { flex-direction: column-reverse; justify-content: flex-end; gap: 10px; }
.stats--facts .stats__n { font-size: clamp(2rem, 3.2vw, 2.75rem); }
.stats--facts .stats__l { font-size: .875rem; max-width: 17em; }

/* the "Illustration" tag, as on the hero's label */
.stage__tag {
  justify-self: start;
  padding: 2px 8px;
  border-radius: 999px; border: 1px solid var(--line-dark-2);
  background: rgba(5, 5, 6, .6);
  font-size: .6875rem; font-weight: 400; line-height: 1.4; color: var(--mist);
  white-space: nowrap;
}

/* a key: a small bar swatch, then the words */
.key { display: inline-flex; align-items: center; gap: 8px; font-size: .8125rem; line-height: 1.4; color: var(--mist); }
.key::before, .flabel__flag::before {
  content: ""; flex: none;
  width: 9px; height: 14px;
  background: var(--tone, var(--mist-2));
  clip-path: polygon(41.7% 0, 100% 0, 58.3% 100%, 0 100%);   /* the logo's lean: 15 degrees over 9 x 14 */
}
[data-tone="y"] { --tone: var(--hl); }
[data-tone="y2"] { --tone: rgba(255, 242, 0, .66); }
[data-tone="w"] { --tone: var(--snow); }
[data-tone="g"] { --tone: #4A4C53; }
[data-tone="g2"] { --tone: #7A7D86; }
[data-tone="r"] { --tone: var(--lost); }
.key--unit::before { display: none; }

/* ---------- 4. sections and scenes ---------- */
.sec { position: relative; }
[id] { scroll-margin-top: var(--masthead-h); }

/* a formation scene: copy in the left five columns, the formation's space in the right seven */
.scene {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: center;
  min-height: calc(var(--vh) * 100);
  padding-block: 112px;
}
.scene__copy { grid-column: 1 / span 5; grid-row: 1; position: relative; }
.scene .stage { grid-column: 6 / span 7; grid-row: 1; }
.scene--mirror .scene__copy { grid-column: 8 / span 5; }
.scene--mirror .scene__copy::before { inset: -40px -24px -40px -56px; }
.scene--mirror .stage { grid-column: 1 / span 7; }

.head { max-width: 46rem; }
.head--split { max-width: none; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
.head--split .h2 { grid-column: 1 / span 6; }
.head--split .lede { grid-column: 8 / span 5; margin-top: 0; }

/* ---------- 5. scrims: gradients, never boxes ----------
   Desktop: a wash from the copy's side that is gone by the formation's columns.
   Phones: the copy carries its own soft dark ground (no edges). */
.scene-sec::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, var(--scrim-3) 0%, var(--scrim-2) 26%, var(--scrim-1) 42%, var(--scrim-0) 56%);
}
.rescue::before, .marketing::before { background: linear-gradient(270deg, var(--scrim-3) 0%, var(--scrim-2) 26%, var(--scrim-1) 42%, var(--scrim-0) 56%); }
.coaching::before, .tbi::before, .how::before {
  background: linear-gradient(180deg, var(--scrim-2) 0%, var(--scrim-1) 34%, var(--scrim-0) 60%);
}
/* the close: the logo stands clear at the top; the ground darkens under the words below it */
.close::before { background: linear-gradient(0deg, var(--scrim-2) 0%, var(--scrim-1) 30%, var(--scrim-0) 52%); }
.iris::before { background: linear-gradient(90deg, var(--scrim-3) 0%, var(--scrim-2) 26%, var(--scrim-1) 44%, rgba(5, 5, 6, .18) 70%, var(--scrim-1) 100%); }
.pricing::before { background: linear-gradient(90deg, var(--scrim-3) 0%, var(--scrim-2) 30%, var(--scrim-1) 46%, rgba(5, 5, 6, .12) 64%); }
.scene__copy::before {
  content: ""; position: absolute; inset: -40px -56px; z-index: -1; pointer-events: none;
  border-radius: 48px;
  background: rgba(5, 5, 6, .55);
  filter: blur(36px);
}

/* ---------- 6. labels projected onto the bars ----------
   With the engine (html.has-field): fixed to the viewport, at the bar the engine
   projects (--x, --y in px), faded by --vis. Without it: pinned in % to the static
   formation (see fb:pins at the end), the same look. Phones: a legend, in flow. */
.flabels { margin: 0; padding: 0; list-style: none; }
.stage__fig { position: relative; }
.flabel {
  --len: 56px; --w: 248px;
  position: absolute; left: 0; top: 0;
  width: 0; height: 0;
  pointer-events: none;
}
html.has-field .is-live .flabel {
  position: fixed; z-index: 5;
  transform: translate3d(var(--x, -9999px), var(--y, -9999px), 0);
  opacity: var(--vis, 0);
  will-change: transform, opacity;
}
.flabel__dot {
  position: absolute; left: -3px; top: -3px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--snow);
  box-shadow: 0 0 0 3px rgba(5, 5, 6, .55);
}
.flabel__leader {
  position: absolute; left: -.5px; bottom: 0;
  width: 1px; height: var(--len);
  background: linear-gradient(to top, rgba(245, 245, 244, .9), rgba(245, 245, 244, .4));
  transform-origin: 50% 100%;
  transform: rotate(15deg);   /* the logo's angle */
}
.flabel__text {
  position: absolute;
  left: calc(var(--len) * .2588 + 10px);
  bottom: calc(var(--len) * .9659 - 16px);
  width: max-content; max-width: var(--w);
  display: grid; justify-items: start; gap: 2px;
}
/* a soft dark ground behind the words, no edges: the field stays visible around it */
.flabel__text::before {
  content: ""; position: absolute; inset: -10px -18px -10px -14px; z-index: -1;
  border-radius: 24px;
  background: var(--label-ground);
  filter: blur(16px);
}
.flabel__title { display: inline-flex; align-items: baseline; flex-wrap: wrap; column-gap: 8px; font-size: .9375rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.35; color: var(--snow); }
.flabel__body { font-size: .875rem; font-weight: 350; line-height: 1.4; color: var(--snow); text-wrap: pretty; }
.flabel__meta { font-size: .8125rem; font-weight: 350; line-height: 1.4; color: var(--mist); }
.flabel__meta--miss { color: var(--lost); }
.flabel__n { font-size: 1.75rem; font-weight: 300; letter-spacing: -.035em; line-height: 1; color: var(--snow); }

/* text to the left of the leader: authored (.flabel--left, both modes) or set by the engine (.is-flipped) */
html.has-field .is-live .flabel.is-flipped .flabel__text,
.flabel--left .flabel__text { left: auto; right: calc(var(--len) * -.2588 + 10px); justify-items: end; text-align: right; }

/* a value hanging under its point (agent scores, the 6 PM tick) */
.flabel--value .flabel__text { left: 0; bottom: auto; top: 0; transform: translateX(-50%); justify-items: center; text-align: center; gap: 4px; }
.flabel--tick .flabel__text::before { display: none; }
/* a count to the left of its row (channels) */
.flabel--count .flabel__text { left: auto; right: 0; bottom: auto; top: 0; transform: translateY(-50%); justify-items: end; text-align: right; gap: 4px; }
.flabel--count .flabel__n { font-size: 2rem; }
/* words stacked over a short leader (criteria, tbi) */
.flabel--stack .flabel__text, .flabel--phrase .flabel__text {
  left: calc(var(--len) * .2588 - 4px);
  bottom: calc(var(--len) * .9659 + 8px);
  --w: 128px;
}
.flabel--stack .flabel__title { font-size: .875rem; font-weight: 450; line-height: 1.3; text-wrap: balance; }
.flabel--phrase { --len: 32px; }
.flabel--phrase .flabel__text { --w: 176px; gap: 8px; left: calc(var(--len) * .2588); transform: translateX(-50%); justify-items: center; text-align: center; }
/* a label hanging below the floor (the call that fell below your criteria) */
.flabel--below .flabel__leader { bottom: auto; top: 0; transform-origin: 50% 0; background: linear-gradient(to bottom, rgba(245, 245, 244, .7), rgba(245, 245, 244, .25)); }
.flabel--below .flabel__text { bottom: auto; top: calc(var(--len) * .9659 - 6px); left: calc(var(--len) * -.2588 + 10px); }
.flabel--note { --w: 280px; }
.flabel--note .flabel__body { font-size: .9375rem; line-height: 1.45; }
.flabel--quiet .flabel__title, .flabel--quiet .flabel__body { color: var(--mist); }

/* case quality, as in the rescue queue */
.q { display: inline-block; padding: 0 7px; border-radius: 999px; border: 1px solid var(--line-dark-2); font-size: .6875rem; font-weight: 450; line-height: 1.55; letter-spacing: 0; color: var(--mist); white-space: nowrap; }
.q--high { color: var(--hl); border-color: rgba(255, 242, 0, .42); }
.q--mid { color: rgba(255, 242, 0, .78); border-color: rgba(255, 242, 0, .24); }

/* what Speed.ai flagged: a small yellow bar, then the words */
.flabel__flag { display: inline-flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 450; line-height: 1.35; color: var(--snow); }
.flabel__flag::before { --tone: var(--hl); width: 8px; height: 12px; }

/* the highlighter: a stroke with its ends cut at the logo's 15 degrees, drawn left to right,
   over only the words Speed.ai flagged inside the caller's sentence */
.tbi-q { quotes: "“" "”"; font-size: .9375rem; font-weight: 350; line-height: 1.75; letter-spacing: -.005em; color: var(--snow); text-wrap: balance; }
.hl {
  color: var(--ink);
  background-color: transparent;
  background-image: linear-gradient(105deg, transparent .2em, var(--hl) .2em, var(--hl) calc(100% - .2em), transparent calc(100% - .2em));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: .06em .3em;
  margin: 0 -.22em;   /* the stroke reaches into the spaces either side; the words don't move */
}
.js .flabel--phrase .flabel__flag { opacity: .38; transition: opacity 320ms var(--ease-out) 240ms; }
.js .flabel--phrase.is-lit .flabel__flag { opacity: 1; }
.js .hl { background-size: 0% 100%; color: var(--snow); }
.js .hl.is-on { background-size: 100% 100%; color: var(--ink); transition: background-size 640ms var(--ease-out), color 200ms linear 200ms; }

/* ---------- the stage: the formation's space ---------- */
.stage {
  position: relative; margin: 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px;
}
.stage > * { grid-column: 1 / -1; }
.stage__tag { grid-column: 1; grid-row: 1; }
.stage__title { grid-column: 2; grid-row: 1; font-size: .8125rem; font-weight: 400; line-height: 1.4; color: var(--mist); }
.stage__fig { margin-top: 24px; }
.stage__key { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 24px; }
.stage__cap { margin-top: 20px; font-size: .875rem; color: var(--mist); }
.stage__note { display: grid; gap: 4px; max-width: 30rem; margin-top: 28px; padding-left: 16px; border-left: 1px solid var(--line-dark-2); font-size: .9375rem; font-weight: 350; line-height: 1.5; color: var(--snow); }
.stage__note-h { font-size: .8125rem; color: var(--mist); }

/* ---------- 7. static formations (shown only without the engine) ---------- */
.formation-fallback { display: block; width: 100%; height: auto; overflow: visible; }
html.has-field .is-live .formation-fallback { visibility: hidden; }

/* materials travel as custom properties, so they reach into <use> clones:
   --f the front face, --s the shaded side, --t the lit top edge */
.fb .m-g  { --f: url(#fb-g);  --s: #0D0E10; --t: #4A4D55; }
.fb .m-g2 { --f: url(#fb-g2); --s: #141518; --t: #868993; }
.fb .m-w  { --f: url(#fb-w);  --s: #77787C; --t: #FFFFFF; }
.fb .m-y  { --f: url(#fb-y);  --s: #8F8700; --t: #FFFA9E; }
/* single-shape bars (the year field, the hero field, the logo) take the front material */
.fb use.m-g, .fb use.m-g2, .fb use.m-w, .fb use.m-y, .fb .m-y > .f:not([style]) { fill: var(--f); }
.fb .glow { filter: drop-shadow(0 0 9px rgba(255, 242, 0, .42)); }
.fb .m-y.dim { opacity: .72; }
.fb .m-w.faint { opacity: .5; }
.fb .cap { fill: var(--lost); }
.fb .ring { fill: none; stroke: var(--hl); stroke-width: 1.2; opacity: .62; }
.fb .floor { fill: none; stroke: rgba(255, 255, 255, .09); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fb .ghost { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.fb .tick { stroke: var(--mist-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fb .beam { fill: url(#fb-beam); opacity: .26; }
.fb .rf { opacity: .1; }
.fb .rf.m-y { fill: var(--hl); opacity: .13; }
.fb .rf.m-w { fill: #E6E6E3; }
.fb .rf.m-g { fill: #3A3C42; }
.fb .rf.m-g2 { fill: #6A6D76; }
.fb .rf-g { opacity: .16; }
/* TBI: each call ignites as its phrase is caught (lit by default without JS) */
.js .fb--tbi .tbi-bar .on { opacity: 0; transition: opacity 520ms var(--ease-out); }
.js .fb--tbi .tbi-bar.is-lit .on { opacity: 1; }

/* ==========================================================================
   8. sections, top to bottom
   ========================================================================== */

/* ---------- the hero: assets/css/hero.css ---------- */

/* ---------- 1. firms ---------- */
.firms { padding-block: 80px 120px; }
html.aside-stats .firms { padding-top: 104px; }
.firms::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 5, 6, .5), rgba(5, 5, 6, .82)); }
.firms__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; }
.firms__title { grid-column: 1 / span 3; max-width: 14em; font-size: 1.0625rem; font-weight: 350; letter-spacing: -.01em; line-height: 1.45; color: var(--mist); text-wrap: balance; }
.firms__logos { grid-column: 5 / span 8; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px var(--col-gap); align-items: center; }
.firms__logos img { height: var(--h, 28px); width: auto; max-width: 100%; opacity: .66; }
/* the three figures, down from the hero (2026-11-11): the first row of the strip, at display size */
.firms__stats { grid-column: 1 / -1; margin-bottom: 96px; }
.firms__stats > li { gap: 14px; padding-top: 24px; }
.firms__stats .stats__n { font-size: clamp(2.5rem, 4.6vw, 4.25rem); font-weight: 300; letter-spacing: -.045em; }
.firms__stats .stats__l { font-size: .9375rem; max-width: 17em; }
html.aside-stats .firms__stats { display: none; }
/* on paper (?theme=light): an opaque paper ground over the field; the white logo files turn to ink */
html .sec.firms.on-paper { background: var(--paper); }      /* over hero.css's ground for this strip */
.firms.on-paper::before { display: none; }
.firms.on-paper .firms__title { color: var(--graphite); }
.firms.on-paper .firms__stats > li { border-top-color: rgba(10, 10, 11, .16); }
.firms.on-paper .firms__stats .stats__n { color: #0A0A0B; }
.firms.on-paper .firms__stats .stats__l { color: var(--graphite); }
.firms.on-paper .firms__logos img { filter: brightness(0); opacity: .62; }

/* ---------- 2. the problem ---------- */
.problem .scene { grid-template-rows: auto auto auto; row-gap: 0; padding-block: 128px 144px; }
.problem .scene__copy { align-self: center; }
.stage--grid100 .stage__fig { width: min(100% - 232px, calc(var(--vh) * 64 * .8667)); }   /* room on the right for its labels */
.stage--grid100 .stage__tag, .stage--grid100 .stage__title { grid-row: 1; }
.stage--grid100 { padding-left: clamp(0px, 3vw, 48px); }
.problem__foot { grid-column: 1 / -1; grid-row: 2; margin-top: 80px; }
.problem__outlier { grid-column: 1 / span 7; grid-row: 3; margin-top: 112px; }
/* the one that matters, once more: its yellow bar leads the paragraph that names it */
.problem__outlier::before {
  content: ""; display: block; width: 20px; height: 34px; margin-bottom: 28px;
  background: var(--hl); clip-path: polygon(45.6% 0, 100% 0, 54.4% 100%, 0 100%);
  box-shadow: 0 0 18px rgba(255, 242, 0, .4);
}
.problem__outlier p { font-size: clamp(1.375rem, 2.1vw, 1.875rem); font-weight: 300; letter-spacing: -.025em; line-height: 1.35; color: var(--snow); text-wrap: pretty; }

/* ---------- platform intro ---------- */
.platform__intro { padding-top: var(--sec-pad); }
.platform__intro .h2 { max-width: 15em; }
.platform__intro .lede { margin-top: 24px; }
.rescue .scene { min-height: calc(var(--vh) * 84); padding-top: 48px; }

/* ---------- 3-6. the four modules ---------- */
.stage--queue .stage__fig { padding-right: 4%; }
.stage--criteria .stage__fig { width: 100%; }
.stage--criteria .flabel--stack .flabel__text { --w: 124px; }
.stage--channels .stage__fig { width: min(100%, 660px); }
.stage--channels { padding-left: 2%; }

/* centred: the copy over the formation, both on the page's axis */
.scene--centre { align-content: center; row-gap: 48px; }
.scene--centre .scene__copy { grid-column: 3 / span 8; text-align: center; }
.scene--centre .scene__copy .product { justify-content: center; }
.scene--centre .scene__copy .h2 { max-width: 14em; margin-inline: auto; }
.scene--centre .scene__copy .body { max-width: 36em; margin-inline: auto; }
.scene--centre .stage { grid-column: 1 / -1; grid-row: 2; grid-template-columns: 1fr auto auto 1fr; }
.scene--centre .stage__tag { grid-column: 2; }
.scene--centre .stage__title { grid-column: 3; }
.scene--centre .stage__fig { grid-row: 1; margin-top: 0; }
.scene--centre .stage__tag, .scene--centre .stage__title { grid-row: 2; margin-top: 16px; }
.stage--agents .stage__fig { width: min(100%, 1120px); margin: 8px auto 0; }

/* ---------- 7. TBI spotting: a scroll-bound build, pinned ---------- */
.tbi { min-height: calc(var(--vh) * 190); }
.tbi__pin { position: sticky; top: 0; min-height: calc(var(--vh) * 100); display: flex; align-items: center; }
.tbi__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; padding-block: 104px 80px; }
.tbi__copy { grid-column: 1 / span 6; position: relative; }
.tbi__side { grid-column: 8 / span 5; position: relative; }
.tbi__side .body { margin-top: 0; font-size: 1rem; }
.stage--tbi { grid-column: 1 / -1; margin-top: 56px; }
.stage--tbi .stage__fig { margin-top: 16px; }
/* without the engine, the five phrases sit under their five calls, one column each */
@media (min-width: 641px) {
  :is(html:not(.has-field), [data-formation]:not(.is-live)) .flabels--tbi { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 24px; }
  :is(html:not(.has-field), [data-formation]:not(.is-live)) .flabels--tbi .flabel { position: static; width: auto; height: auto; }
  :is(html:not(.has-field), [data-formation]:not(.is-live)) .flabels--tbi .flabel__dot, :is(html:not(.has-field), [data-formation]:not(.is-live)) .flabels--tbi .flabel__leader, :is(html:not(.has-field), [data-formation]:not(.is-live)) .flabels--tbi .flabel__text::before { display: none; }
  :is(html:not(.has-field), [data-formation]:not(.is-live)) .flabels--tbi .flabel__text { position: static; transform: none; width: auto; max-width: none; justify-items: center; gap: 12px; padding: 0 12px; text-align: center; }
}
@media (min-width: 641px) and (max-width: 1080px) {
  :is(html:not(.has-field), [data-formation]:not(.is-live)) .flabels--tbi .flabel__text { padding: 0 4px; }
  :is(html:not(.has-field), [data-formation]:not(.is-live)) .flabels--tbi .tbi-q { font-size: .8125rem; }
  :is(html:not(.has-field), [data-formation]:not(.is-live)) .flabels--tbi .flabel__flag { font-size: .75rem; }
}

/* ---------- 8. Ask Iris ---------- */
.mcp { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line-dark); }
.mcp__h { font-size: .9375rem; font-weight: 450; color: var(--snow); }
.mcp .body { margin-top: 8px; font-size: 1rem; }
.stage--iris { align-self: center; padding-left: 4%; }
.stage--iris .stage__fig { margin-top: 8px; }
.ask { margin-top: 28px; max-width: 36rem; }
.ask__q { display: grid; gap: 6px; font-size: 1.3125rem; font-weight: 350; letter-spacing: -.02em; line-height: 1.35; color: var(--snow); }
.ask__you { font-size: .8125rem; font-weight: 350; letter-spacing: 0; color: var(--mist); }
.ask__a { margin-top: 16px; display: grid; gap: 8px; font-size: 1rem; font-weight: 300; line-height: 1.6; color: var(--snow); }
.ask__a p:not(.ask__cite) { max-width: 34em; }
.ask__cite { font-size: .8125rem; color: var(--mist); }
.ask__more { margin-top: 28px; }
.ask__try { font-size: .8125rem; color: var(--mist); }
.ask__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ask__chips button {
  min-height: 36px; padding: 7px 14px;
  border-radius: 18px; border: 1px solid var(--line-dark-2);
  font-size: .8125rem; font-weight: 350; line-height: 1.4; text-align: left; color: var(--mist);
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out), background-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.ask__chips button:active { transform: scale(.97); }
.ask__chips button[aria-pressed="true"] { color: var(--snow); border-color: rgba(245, 245, 244, .5); background: rgba(245, 245, 244, .06); }
@media (hover: hover) and (pointer: fine) { .ask__chips button:hover { color: var(--snow); border-color: rgba(245, 245, 244, .34); } }
html:not(.js) .ask__more { display: none; }
.is-updating { animation: num-in 220ms var(--ease-out); }
@keyframes num-in { from { opacity: .25; filter: blur(2px); } to { opacity: 1; filter: none; } }

/* one question at a time: its bars and its labels */
.stage__fig[data-q="0"] [data-iris-q]:not([data-iris-q="0"]),
.stage__fig[data-q="1"] [data-iris-q]:not([data-iris-q="1"]),
.stage__fig[data-q="2"] [data-iris-q]:not([data-iris-q="2"]) { display: none; }

/* ---------- 9. proof: carbon at 85%, the dim field faintly behind ---------- */
.proof { padding-block: var(--sec-pad); background: rgba(10, 10, 11, .85); }
.films { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap); margin-top: 64px; }
.film { display: grid; align-content: start; gap: 4px; }
.film__img { position: relative; display: block; aspect-ratio: 5 / 6; margin-bottom: 16px; border-radius: var(--radius); overflow: hidden; background: var(--carbon-2); transition: transform 160ms var(--ease-out); }
.film__img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.62) contrast(1.04) brightness(.9); transition: filter 420ms var(--ease-out), transform 700ms var(--ease-out); }
/* one grade for four different shoots: a cool, low veil from the bottom */
.film__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5, 5, 6, .55), rgba(5, 5, 6, 0) 45%); pointer-events: none; }
.film__play {
  position: absolute; left: 12px; bottom: 12px; z-index: 1;
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 13px 0 11px;
  border-radius: 999px; background: rgba(5, 5, 6, .72);
  font-size: .8125rem; font-weight: 450; color: var(--snow);
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out);
}
.film__play svg { width: 11px; height: 11px; }
.film__out { font-size: 1.25rem; font-weight: 400; letter-spacing: -.025em; line-height: 1.2; color: var(--snow); text-wrap: balance; }
.film__firm { font-size: .875rem; color: var(--mist); }
.film:active .film__img { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) {
  .film:hover .film__img img { filter: none; transform: scale(1.03); }
  .film:hover .film__play { background: var(--snow); color: var(--ink); }
}

.quotes { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 48px; margin-top: 120px; padding-top: 48px; border-top: 1px solid var(--line-dark); }
.quote { grid-column: span 3; display: grid; align-content: space-between; gap: 32px; }
.quote--lead { grid-column: 1 / span 6; padding-right: 8%; }
.quote blockquote p { font-size: 1.0625rem; font-weight: 300; line-height: 1.6; color: var(--snow); text-wrap: pretty; }
.quote--lead blockquote p { font-size: clamp(1.375rem, 2vw, 1.75rem); letter-spacing: -.025em; line-height: 1.35; }
.quote figcaption { display: flex; align-items: center; gap: 12px; font-size: .8125rem; line-height: 1.45; color: var(--mist); }
.quote figcaption img { width: 40px; height: 40px; flex: none; border-radius: 50%; filter: saturate(.7); box-shadow: 0 0 0 1px var(--line-dark-2); }
.quote figcaption strong { display: block; font-weight: 450; color: var(--snow); }

/* ---------- 10. how it works ---------- */
.how { padding-block: var(--sec-pad); }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap); margin-top: 80px; counter-reset: none; }
.steps li { position: relative; padding-top: 20px; border-top: 1px solid var(--line-dark-2); }
.steps__n { display: block; margin-bottom: 48px; font-size: .8125rem; color: var(--mist); }
.steps h3 { font-size: 1.5rem; font-weight: 400; letter-spacing: -.03em; line-height: 1.2; }
.steps p { margin-top: 12px; max-width: 22em; font-size: .9375rem; font-weight: 300; line-height: 1.6; color: var(--mist); }
.how__strip { margin-top: 40px; }
html.has-field .is-live .how__strip { display: none; }
.stack { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); margin-top: 128px; }
.stack__title { grid-column: 1 / span 3; font-size: 1.0625rem; font-weight: 400; letter-spacing: -.01em; color: var(--snow); }
.stack__list { grid-column: 4 / span 9; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); }
.stack__list li { padding: 11px 0; border-bottom: 1px solid var(--line-dark); font-size: .9375rem; font-weight: 300; color: var(--mist); }
.stack__api { grid-column: 4 / span 9; margin-top: 20px; font-size: .9375rem; color: var(--snow); }

/* ---------- 11. security ---------- */
.security { padding-block: var(--sec-pad); background: linear-gradient(180deg, rgba(5, 5, 6, .55), rgba(5, 5, 6, .82) 30%, rgba(5, 5, 6, .82) 70%, rgba(5, 5, 6, .55)); }
.security__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.security__copy { grid-column: 1 / span 5; position: sticky; top: calc(var(--masthead-h) + 48px); }
.security__badge { display: flex; align-items: center; gap: 20px; margin-top: 40px; max-width: 24rem; font-size: .875rem; line-height: 1.5; color: var(--mist); }
.security__badge img { width: 76px; flex: none; }
.security__list { grid-column: 7 / span 6; }
.security__list > div { display: grid; gap: 8px; padding: 28px 0; border-top: 1px solid var(--line-dark-2); }
.security__list > div:last-child { border-bottom: 1px solid var(--line-dark-2); }
.security__list dt { font-size: 1.3125rem; font-weight: 400; letter-spacing: -.02em; line-height: 1.3; color: var(--snow); }
.security__list dd { max-width: 30em; font-size: 1rem; font-weight: 300; line-height: 1.6; color: var(--mist); }

/* ---------- 12. pricing and the calculator ---------- */
.pricing { padding-block: var(--sec-pad); }
.calc-scene { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; min-height: calc(var(--vh) * 80); margin-top: 72px; }
.calc { grid-column: 1 / span 5; position: relative; }
.calc::before { content: ""; position: absolute; inset: -40px -56px; z-index: -1; border-radius: 48px; background: rgba(5, 5, 6, .55); filter: blur(36px); pointer-events: none; }
.calc__title { font-size: 1.3125rem; font-weight: 400; letter-spacing: -.02em; color: var(--snow); }
.calc__field { display: grid; grid-template-columns: 1fr auto; align-items: baseline; row-gap: 10px; margin-top: 28px; }
.calc__field label { font-size: .9375rem; font-weight: 350; color: var(--mist); }
.calc__field output { font-size: 1.0625rem; font-weight: 400; letter-spacing: -.01em; color: var(--snow); }
.calc__field input { grid-column: 1 / -1; }
.calc__result { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line-dark-2); }
.calc__label { font-size: .875rem; color: var(--mist); }
.calc__big { margin-top: 8px; font-size: clamp(2.75rem, 5vw, 4.25rem); font-weight: 300; letter-spacing: -.045em; line-height: 1; color: var(--snow); }
.calc__big.tnum > .d { width: .6em; }
.calc__sub { margin-top: 14px; font-size: 1rem; font-weight: 300; color: var(--snow); }
.calc__fine { margin-top: 10px; font-size: .8125rem; color: var(--mist); }

/* range: a hairline track that fills in snow, a small upright bar for a thumb */
.calc input[type="range"] { --fill: 9%; -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; }
.calc input[type="range"]::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(to right, var(--snow) var(--fill), rgba(255, 255, 255, .18) var(--fill)); }
.calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 24px; margin-top: -11px; border-radius: 3px; background: var(--snow); box-shadow: 0 0 0 4px rgba(5, 5, 6, .9); transition: transform 160ms var(--ease-out); }
.calc input[type="range"]:active::-webkit-slider-thumb { transform: scaleY(1.12); }
.calc input[type="range"]::-moz-range-track { height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .18); }
.calc input[type="range"]::-moz-range-progress { height: 2px; border-radius: 2px; background: var(--snow); }
.calc input[type="range"]::-moz-range-thumb { width: 10px; height: 24px; border: 0; border-radius: 3px; background: var(--snow); box-shadow: 0 0 0 4px rgba(5, 5, 6, .9); }
.calc input[type="range"]:focus-visible { outline: none; }
.calc input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(5, 5, 6, .9), 0 0 0 6px var(--hl); }
.calc input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(5, 5, 6, .9), 0 0 0 6px var(--hl); }

.stage--year { grid-column: 7 / span 6; }
.stage--year .stage__fig { margin-top: 72px; }   /* room above the field for its rescued label */
.fb--year use { transition: transform 420ms var(--ease-out); }
.fb--year use.m-y { transform: translateY(-4px); }

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 72px; border-top: 1px solid var(--line-dark-2); border-bottom: 1px solid var(--line-dark-2); }
.plan { display: flex; flex-direction: column; padding: 40px 32px 40px; }
.plan + .plan { border-left: 1px solid var(--line-dark); }
.plan:first-child { padding-left: 0; }
.plan:last-child { padding-right: 0; }
.plan--pro { background: linear-gradient(180deg, rgba(245, 245, 244, .045), rgba(245, 245, 244, 0) 70%); }
.plan__name { display: flex; align-items: center; gap: 12px; font-size: 1.3125rem; font-weight: 400; letter-spacing: -.02em; }
.plan__tag { padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line-dark-2); font-size: .6875rem; font-weight: 400; line-height: 1.4; letter-spacing: 0; color: var(--mist); }
.plan__for { margin-top: 4px; font-size: .875rem; color: var(--mist); }
.plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.plan__price strong { font-size: clamp(2.5rem, 3.6vw, 3.25rem); font-weight: 300; letter-spacing: -.045em; line-height: 1; color: var(--snow); }
.plan__price span { font-size: .875rem; color: var(--mist); }
.plan__list { display: grid; gap: 12px; margin-top: 32px; margin-bottom: 40px; }
.plan__list li { position: relative; padding-left: 22px; font-size: .9375rem; font-weight: 300; line-height: 1.5; color: var(--snow); }
.plan__list li::before { content: ""; position: absolute; left: 1px; top: .5em; width: 7px; height: 11px; background: var(--mist-2); clip-path: polygon(42% 0, 100% 0, 58% 100%, 0 100%); }
.plan .btn { margin-top: auto; }
.plan__note { max-width: 22em; margin-top: 12px; font-size: .8125rem; line-height: 1.45; color: var(--mist); }
/* the plans share rows (name, for, price, list, button, note), so lists and buttons line up */
@supports (grid-template-rows: subgrid) {
  .plans { grid-template-rows: repeat(6, auto); }
  .plan { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
  .plan .btn { margin-top: 0; align-self: end; }
}

/* ---------- 13. FAQ: solid carbon, for reading ---------- */
.faq { padding-block: var(--sec-pad); background: var(--carbon); }
.faq__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.faq__title { grid-column: 1 / span 4; max-width: 8em; }
.faq__list { grid-column: 6 / span 7; }
.faq__list details { border-top: 1px solid var(--line-dark-2); }
.faq__list details:last-child { border-bottom: 1px solid var(--line-dark-2); }
.faq__list summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 24px 0;
  list-style: none; cursor: pointer;
  font-size: 1.1875rem; font-weight: 400; letter-spacing: -.02em; line-height: 1.4; color: var(--snow);
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary svg { flex: none; width: 16px; height: 16px; margin-top: 5px; color: var(--mist); transition: transform 260ms var(--ease-in-out); }
.faq__list details[open] summary svg { transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) { .faq__list summary:hover svg { color: var(--snow); } }
.faq__a { overflow: hidden; }
.faq__a p { max-width: 38em; padding-bottom: 28px; font-size: 1rem; font-weight: 300; line-height: 1.65; color: var(--mist); }

/* ---------- 14. close: the three logo bars, and the bookend line ---------- */
.close__in { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(var(--vh) * 100); padding-block: 120px; text-align: center; }
.stage--logo { display: block; width: clamp(180px, 20vw, 280px); }
.stage--logo .stage__fig { margin: 0; }
.close__title { max-width: 12.5em; margin-top: 56px; font-size: clamp(2.5rem, 5.4vw, 5rem); font-weight: 360; letter-spacing: -.048em; line-height: 1; text-wrap: balance; }
.close__title .rise-line-mask { display: block; padding: 0 .06em .12em; margin: 0 -.06em -.12em; overflow: hidden; }
.close__title .rise-line { display: block; }
.close__lede { margin: 28px auto 0; max-width: 32em; }
.close .fine { margin-top: 18px; }

/* ---------- 15. footer: solid carbon ---------- */
.footer { padding-block: 96px 40px; background: var(--carbon); border-top: 1px solid var(--line-dark); }
.footer__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 48px; }
.footer__brand { grid-column: 1 / span 4; display: grid; justify-items: start; align-content: start; gap: 16px; }
.footer__logo { color: var(--snow); }
.footer__logo svg { width: 148px; height: auto; aspect-ratio: 857 / 82.5; }
.footer__brand p { max-width: 18em; font-size: .9375rem; font-weight: 300; color: var(--mist); }
.footer__soc { width: 52px; margin-top: 8px; }
.footer__cols { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 32px; }
.footer__cols h2 { font-size: .875rem; font-weight: 450; color: var(--snow); }
.footer__cols ul { display: grid; gap: 10px; margin-top: 16px; }
.footer__cols a { font-size: .875rem; font-weight: 300; color: var(--mist); transition: color 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .footer__cols a:hover, .footer__legal a:hover { color: var(--snow); } }
.footer__concept { margin-top: 72px; padding: 24px 0; border-top: 1px solid var(--line-dark); }
.footer__concept p { max-width: 62em; font-size: .8125rem; font-weight: 300; line-height: 1.65; color: var(--mist); }
.footer__concept strong { font-weight: 500; color: var(--snow); }
.footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 1px solid var(--line-dark); font-size: .8125rem; color: var(--mist); }
.footer__legal ul { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer__legal a { transition: color 160ms var(--ease-out); }

/* ==========================================================================
   9. the video dialog
   ========================================================================== */
.video { width: min(1120px, calc(100vw - 32px)); max-width: none; max-height: none; padding: 0; border: 0; background: transparent; color: var(--snow); overflow: visible; }
.video::backdrop { background: rgba(5, 5, 6, .88); }
.video__frame { aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.video__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.video__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; }
.video__bar p { font-size: .9375rem; color: var(--mist); }
.video__close { min-height: 40px; padding: 0 16px; border-radius: var(--radius); border: 1px solid var(--line-dark-2); font-size: .9375rem; font-weight: 450; transition: border-color 160ms var(--ease-out), transform 160ms var(--ease-out); }
.video__close:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .video__close:hover { border-color: var(--snow); } }
.video[open] { animation: video-in 360ms var(--ease-drawer); }
.video[open]::backdrop { animation: fade-in 300ms var(--ease-out); }
.video.is-leaving { animation: video-out 260ms cubic-bezier(.4, 0, .2, 1) forwards; }
.video.is-leaving::backdrop { animation: fade-out 260ms cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes video-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes video-out { to { opacity: 0; transform: translateY(12px) scale(.985); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

/* ==========================================================================
   10. breakpoints
   ========================================================================== */
@media (max-width: 1280px) {
  .stats__n { font-size: 1.5rem; }
  .firms__title { grid-column: 1 / span 4; }
  .firms__logos { grid-column: 5 / span 8; }
}

/* tablet and below: copy first, then the formation's space */
@media (max-width: 1080px) {
  .scene { align-content: center; row-gap: 48px; padding-block: 96px; }
  .scene__copy, .scene--mirror .scene__copy, .scene--centre .scene__copy { grid-column: 1 / span 10; grid-row: 1; }
  .scene .stage, .scene--mirror .stage, .scene--centre .stage { grid-column: 1 / -1; grid-row: 2; }
  .scene--centre .scene__copy { text-align: left; }
  .scene--centre .scene__copy .product { justify-content: flex-start; }
  .scene--centre .scene__copy .h2, .scene--centre .scene__copy .body { margin-inline: 0; }
  .scene--centre .stage { grid-template-columns: auto minmax(0, 1fr); }
  .scene--centre .stage__tag { grid-column: 1; }
  .scene--centre .stage__title { grid-column: 2; }
  .stage--grid100 { padding-left: 0; }
  .stage--grid100 .stage__fig { width: min(100%, 460px); }
  .stage--criteria .stage__fig { width: calc(100% - 40px); }
  .stage--criteria .flabel--stack .flabel__text { --w: 104px; }
  .flabel--note { --w: 236px; }
  .stage--agents .stage__fig { margin-top: 112px; }   /* the coaching note rises above Agent K. */
  .problem .scene { row-gap: 48px; }
  .problem__foot { grid-row: 3; margin-top: 32px; }
  .problem__outlier { grid-column: 1 / span 11; grid-row: 4; margin-top: 72px; }
  .stage--criteria .stage__fig { margin-left: 0; }
  .scene-sec::before, .rescue::before, .marketing::before, .iris::before, .pricing::before {
    background: linear-gradient(180deg, var(--scrim-2) 0%, var(--scrim-1) 40%, var(--scrim-0) 70%);
  }
  .firms__in { row-gap: 40px; }
  .firms__title { grid-column: 1 / -1; }
  .firms__logos { grid-column: 1 / -1; }
  .tbi__copy { grid-column: 1 / span 10; }
  .tbi__side { grid-column: 1 / span 10; margin-top: 24px; }
  .stage--iris { padding-left: 0; }
  .head--split .h2 { grid-column: 1 / span 10; }
  .head--split .lede { grid-column: 1 / span 10; margin-top: 24px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .how__strip { display: none; }
  .stack__title { grid-column: 1 / -1; }
  .stack__list, .stack__api { grid-column: 1 / -1; }
  .stack__list { margin-top: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .security__copy { grid-column: 1 / span 10; position: static; }
  .security__list { grid-column: 1 / -1; margin-top: 56px; }
  .calc-scene { row-gap: 56px; }
  .calc { grid-column: 1 / span 10; }
  .stage--year { grid-column: 1 / -1; }
  .plans { grid-template-columns: 1fr; border-bottom: 0; }
  .plan, .plan:first-child, .plan:last-child { padding: 40px 0; }
  .plans { grid-template-rows: none; }
  .plan { display: flex; grid-row: auto; }
  .plan + .plan { border-left: 0; border-top: 1px solid var(--line-dark-2); }
  .plan--pro { background: none; }
  .faq__title { grid-column: 1 / -1; max-width: none; }
  .faq__list { grid-column: 1 / -1; margin-top: 40px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__cols { grid-column: 1 / -1; }
  .quote--lead { grid-column: 1 / -1; padding-right: 0; }
  .quote { grid-column: span 6; }
  .films { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
}

/* phones: labels become a legend in flow, under the formation */
@media (max-width: 640px) {
  :root { --col-gap: 16px; }
  .scene { padding-block: 80px; row-gap: 32px; }
  .scene__copy::before, .calc::before { inset: -32px -24px; filter: blur(28px); background: rgba(5, 5, 6, .72); }
  .h2 { font-size: clamp(2rem, 8.6vw, 2.5rem); }
  .body { font-size: 1rem; }

  .stage { column-gap: 10px; }
  html.has-field .is-live .stage__fig .formation-fallback { height: calc(var(--vh) * 62); }
  .flabels { display: grid; gap: 14px; margin-top: 24px; }
  :is(html:not(.has-field), [data-formation]:not(.is-live)) .flabel, html .flabel:not(.flabel--pin) {
    position: static; width: auto; height: auto; transform: none; opacity: 1;
  }
  :is(html:not(.has-field), [data-formation]:not(.is-live)) .flabel .flabel__dot, :is(html:not(.has-field), [data-formation]:not(.is-live)) .flabel .flabel__leader,
  html .flabel:not(.flabel--pin) .flabel__dot, html .flabel:not(.flabel--pin) .flabel__leader { display: none; }
  :is(html:not(.has-field), [data-formation]:not(.is-live)) .flabel .flabel__text, html .flabel:not(.flabel--pin) .flabel__text {
    position: static; transform: none; width: auto; max-width: none;
    grid-template-columns: 10px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; justify-items: start; text-align: left;
  }
  :is(html:not(.has-field), [data-formation]:not(.is-live)) .flabel .flabel__text > *, html .flabel:not(.flabel--pin) .flabel__text > * { grid-column: 2; }
  :is(html:not(.has-field), [data-formation]:not(.is-live)) .flabel .flabel__text::before, html .flabel:not(.flabel--pin) .flabel__text::before {
    position: static; inset: auto; grid-column: 1; grid-row: 1 / span 3; align-self: start;
    width: 9px; height: 14px; margin-top: 4px; border-radius: 0; filter: none;
    background: var(--tone, var(--mist-2));
    clip-path: polygon(41.7% 0, 100% 0, 58.3% 100%, 0 100%);
  }
  .flabel--value .flabel__n, .flabel--count .flabel__n { font-size: 1.25rem; }
  .flabel--value .flabel__text, .flabel--count .flabel__text { display: flex; align-items: baseline; gap: 10px; }
  html .flabel--tick { display: none; }
  .flabels--row, .flabels--tbi { grid-template-columns: 1fr; }
  /* the three agent columns are a small group on a wide floor: frame the group, not the floor */
  .stage--agents .stage__fig { overflow: hidden; }
  :is(html:not(.has-field), [data-formation]:not(.is-live)) .stage--agents .formation-fallback { width: 210%; max-width: none; margin-left: -57%; }
  .stage--year .stage__fig { margin-top: 24px; }

  .ctas .btn { flex: 1 1 auto; }

  .stats { grid-template-columns: 1fr; }
  .stats > li, .stats > div { flex-direction: row; align-items: baseline; gap: 16px; padding: 14px 0; }
  .stats > li:last-child, .stats > div:last-child { border-bottom: 1px solid var(--line-dark-2); }
  .stats__n { flex: none; width: 5.6rem; font-size: 1.5rem; }
  .stats__l { max-width: none; }
  .stats--facts > div { flex-direction: row-reverse; justify-content: flex-end; }
  .stats--facts .stats__n { width: 7.6rem; font-size: 1.625rem; }

  .firms { padding-block: 72px 80px; }
  .firms__stats { margin-bottom: 56px; }
  .firms__stats > li { gap: 16px; padding: 16px 0; }
  .firms__stats .stats__n { width: 7.2rem; font-size: 2rem; }
  .firms__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; }
  .firms__logos img { height: calc(var(--h, 28px) * .82); }
  .platform__intro { padding-top: 112px; }

  .tbi { min-height: 0; }
  .tbi__pin { position: static; min-height: 0; }
  .tbi__in { padding-block: 80px; }
  .stage--tbi { margin-top: 40px; }

  .films { gap: 32px 16px; }
  .film__out { font-size: 1.0625rem; }
  .quotes { margin-top: 80px; }
  .quote, .quote--lead { grid-column: 1 / -1; }
  .steps { grid-template-columns: 1fr; row-gap: 40px; }
  .steps__n { margin-bottom: 20px; }
  .stack { margin-top: 88px; }
  .stack__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .security__list dt { font-size: 1.1875rem; }
  .calc-scene { margin-top: 48px; }
  .plan__price strong { font-size: 2.5rem; }
  .faq__list summary { font-size: 1.0625rem; padding: 20px 0; }
  .close__in { padding-block: 96px; }
  .close__title { margin-top: 40px; }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__legal { flex-direction: column; align-items: flex-start; }
}

/* ---------- static and reduced motion: everything in its final place ---------- */
html.is-static .tbi, html:not(.js) .tbi { min-height: 0; }
html.is-static .tbi__pin, html:not(.js) .tbi__pin { position: static; min-height: calc(var(--vh) * 100); }
html.is-static .hl { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .fb--year use { transition: none; }
  .film__img img, .faq__list summary svg { transition: none; }
  .video[open], .video.is-leaving { animation-name: fade-in; }
  .video.is-leaving { animation-name: fade-out; }
}


/* fb:pins (generated: where each label lands on its static formation) */
:is(html:not(.has-field), [data-formation]:not(.is-live)) [data-field-anchor="grid100:signed"] { left: 78.8%; top: 13.7%; }
:is(html:not(.has-field), [data-formation]:not(.is-live)) [data-field-anchor="grid100:one"] { left: 78.8%; top: 50.2%; }
:is(html:not(.has-field), [data-formation]:not(.is-live)) [data-field-anchor="queue:3"] { left: 56.2%; top: 74%; }
:is(html:not(.has-field), [data-formation]:not(.is-live)) [data-field-anchor="queue:2"] { left: 50.9%; top: 56.7%; }
:is(html:not(.has-field), [data-formation]:not(.is-live)) [data-field-anchor="queue:1"] { left: 40.1%; top: 46.8%; }
:is(html:not(.has-field), [data-formation]:not(.is-live)) [data-field-anchor="queue:0"] { left: 21.7%; top: 32%; }
:is(html:not(.has-field), [data-formation]:not(.is-live)) [data-field-anchor="criteria:0"] { left: 15.7%; top: 37.6%; }
:is(html:not(.has-field), [data-formation]:not(.is-live)) [data-field-anchor="criteria:1"] { left: 35.2%; top: 37.6%; }
:is(html:not(.has-field), [data-formation]:not(.is-live)) [data-field-anchor="criteria:2"] { left: 48.8%; top: 75.2%; }
:is(html:not(.has-field), [data-formation]:not(.is-live)) [data-field-anchor="criteria:3"] { left: 68.2%; top: 75.2%; }
:is(html:not(.has-field), [data-formation]:not(.is-live)) [data-field-anchor="criteria:4"] { left: 87.6%; top: 75.2%; }
:is(html:not(.has-field), [data-formation]:not(.is-live)) [data-field-anchor="agents:m"] { left: 40.8%; top: 83.7%; }
:is(html:not(.has-field), [data-formation]:not(.is-live)) [data-field-anchor="agents:r"] { left: 49%; top: 83.7%; }
:is(html:not(.has-field), [data-formation]:not(.is-live)) [data-field-anchor="agents:k-score"] { left: 57.2%; top: 83.7%; }
:is(html:not(.has-field), [data-formation]:not(.is-live)) [data-field-anchor="agents:k"] { left: 61.3%; top: 33.3%; }
:is(html:not(.has-field), [data-formation]:not(.is-live)) [data-field-anchor="channels:lsa"] { left: 15.3%; top: 16.7%; }
:is(html:not(.has-field), [data-formation]:not(.is-live)) [data-field-anchor="channels:tv"] { left: 15.3%; top: 48.2%; }
:is(html:not(.has-field), [data-formation]:not(.is-live)) [data-field-anchor="channels:billboards"] { left: 15.3%; top: 79.7%; }
:is(html:not(.has-field), [data-formation]:not(.is-live)) [data-field-anchor="tbi:0"] { left: 12%; top: 16.7%; }
:is(html:not(.has-field), [data-formation]:not(.is-live)) [data-field-anchor="tbi:1"] { left: 32%; top: 16.7%; }
:is(html:not(.has-field), [data-formation]:not(.is-live)) [data-field-anchor="tbi:2"] { left: 52%; top: 16.7%; }
:is(html:not(.has-field), [data-formation]:not(.is-live)) [data-field-anchor="tbi:3"] { left: 72%; top: 16.7%; }
:is(html:not(.has-field), [data-formation]:not(.is-live)) [data-field-anchor="tbi:4"] { left: 92%; top: 16.7%; }
:is(html:not(.has-field), [data-formation]:not(.is-live)) [data-field-anchor="iris:6pm"] { left: 59.2%; top: 86%; }
:is(html:not(.has-field), [data-formation]:not(.is-live)) [data-field-anchor="iris:k"] { left: 82%; top: 41.3%; }
:is(html:not(.has-field), [data-formation]:not(.is-live)) [data-field-anchor="iris:lead-0"] { left: 34.5%; top: 28.7%; }
:is(html:not(.has-field), [data-formation]:not(.is-live)) [data-field-anchor="iris:lead-1"] { left: 53.9%; top: 28.7%; }
:is(html:not(.has-field), [data-formation]:not(.is-live)) [data-field-anchor="iris:lead-2"] { left: 73.4%; top: 28.7%; }
:is(html:not(.has-field), [data-formation]:not(.is-live)) [data-field-anchor="iris:business"] { left: 42.3%; top: 18.7%; }
:is(html:not(.has-field), [data-formation]:not(.is-live)) [data-field-anchor="iris:after"] { left: 62.5%; top: 48.7%; }
:is(html:not(.has-field), [data-formation]:not(.is-live)) [data-field-anchor="year:rescued"] { left: 61.2%; top: 4.1%; }
/* /fb:pins */

/* ==========================================================================
   4. WHY PLAINTIFF FIRMS CHOOSE SPEED.AI (speed.ai's section and words)
   Six product panels on the 12-column grid: 6+3+3, then 3+3+6. Each panel
   carries one small illustration in the bar language (a bar is a call), then
   speed.ai's name and line. Yellow is only the caught case; red is only the
   missed question. Each panel plays once as it arrives (transitions live on
   the revealed state, so arming never animates backwards); nothing loops.
   ========================================================================== */
.why {
  /* every colour in this section is a token, so the paper version at the end only swaps tokens */
  --w-rgb: 255, 255, 255;               /* hairlines and soft marks, as rgba(var(--w-rgb), a) */
  --w-fg: var(--snow); --w-fg2: var(--mist); --w-fg3: var(--mist-2);
  --w-rule: var(--line-dark); --w-rule2: var(--line-dark-2);
  --w-card: linear-gradient(180deg, #151517 0%, #0C0C0E 100%);
  --w-edge: linear-gradient(180deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .05) 42%, rgba(255, 255, 255, .08) 100%);
  --w-card-shadow: 0 0 0 rgba(0, 0, 0, 0);
  --w-tick0: #2E3035; --w-tick1: #5F626A; --w-off: #303237;
  --w-caught: var(--hl); --w-caught-glow: 0 0 20px var(--hl-glow), 0 0 5px rgba(255, 242, 0, .55);
  --w-read: 2.4;                        /* how a bar flashes as the scan reads it */
  --w-mx: #34363C;
  --w-num: linear-gradient(180deg, #FFFFFF 28%, #8C8F98 118%);
  --w-toast-shadow: 0 16px 36px rgba(0, 0, 0, .45);
  --w-lost-line: rgba(255, 107, 91, .75);
  --w-y: .1; --w-v: .13; --w-r: .055;   /* tint strengths: yellow, violet, red */
  padding-block: clamp(96px, 11vw, 168px);
  background: radial-gradient(64% 46% at 50% 52%, rgba(255, 255, 255, .032), rgba(255, 255, 255, 0) 72%), var(--carbon);
}
.why__title { max-width: 11em; }
.why__lead { color: var(--w-fg2); }
.why__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-top: clamp(48px, 5.6vw, 80px); }

.wcard {
  --bar: #45474E;
  position: relative; isolation: isolate;
  grid-column: span 3;
  display: flex; flex-direction: column;
  min-height: 392px;
  border-radius: 20px;
  /* light falls from the top; --tint adds a faint colour only where it means something;
     the 1px edge is its own gradient, brightest at the top */
  --tint: radial-gradient(90% 60% at 50% -8%, rgba(255, 255, 255, .075), rgba(255, 255, 255, 0) 70%);
  border: 1px solid transparent;
  background:
    var(--tint) padding-box,
    var(--w-card) padding-box,
    var(--w-edge) border-box;
  box-shadow: var(--w-card-shadow);
  overflow: hidden;
}
.wcard--wide { grid-column: span 6; }
/* a soft light follows the pointer across the panels, and catches their edges */
.wcard::before, .wcard::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity 320ms var(--ease-out); }
.wcard::before { background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--w-rgb), .05), transparent 62%); }
.wcard::after {
  inset: -1px; padding: 1px;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--w-rgb), .42), transparent 62%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
@media (hover: hover) and (pointer: fine) {
  .why__grid:hover .wcard::after { opacity: 1; }
  .wcard:hover::before { opacity: 1; }
}

.wcard__fig { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; min-height: 236px; padding: 28px 28px 0; }
.wcard__tag { position: absolute; top: 20px; left: 20px; }
/* panels with a tag keep their illustration clear of it */
.wcard--rescue .wcard__fig, .wcard--coach .wcard__fig { padding-top: 60px; }
.wcard__text { position: relative; padding: 24px 28px 28px; }
.wcard__name { font-size: 1.25rem; font-weight: 450; letter-spacing: -.022em; line-height: 1.25; color: var(--w-fg); text-wrap: balance; }
.wcard__name sup { font-size: .55em; font-weight: 350; vertical-align: .85em; margin-left: .05em; }
.wcard__desc { margin-top: 6px; font-size: .9375rem; font-weight: 350; line-height: 1.5; color: var(--w-fg2); text-wrap: balance; }

/* tints: yellow pools under the rescued case, the badge lends its violet, the missed question a little warmth */
.wcard--rescue { --tint: radial-gradient(46% 52% at 20% 74%, rgba(255, 242, 0, var(--w-y)), rgba(255, 242, 0, 0) 72%), radial-gradient(90% 60% at 50% -8%, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 70%); }
.wcard--soc { --tint: radial-gradient(70% 58% at 50% 36%, rgba(112, 92, 214, var(--w-v)), rgba(112, 92, 214, 0) 72%), radial-gradient(90% 60% at 50% -8%, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 70%); }
.wcard--coach { --tint: radial-gradient(44% 50% at 38% 66%, rgba(255, 107, 91, var(--w-r)), rgba(255, 107, 91, 0) 72%), radial-gradient(90% 60% at 50% -8%, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 70%); }
.wcard--live { --tint: radial-gradient(56% 50% at 50% 40%, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 72%); }
.wcard--baa { --tint: radial-gradient(80% 60% at 78% -6%, rgba(255, 255, 255, .075), rgba(255, 255, 255, 0) 70%); }
.wcard--calls { --tint: radial-gradient(80% 60% at 22% -6%, rgba(255, 255, 255, .075), rgba(255, 255, 255, 0) 70%); }

/* the two product cards (the alert, the coaching note) */
.alert, .note {
  position: relative; z-index: 1;
  max-width: 304px; padding: 13px 16px 14px;
  border-radius: 12px;
  background: rgba(27, 27, 30, .94);
  box-shadow: inset 0 0 0 1px var(--line-dark-2), var(--w-toast-shadow);
}
.alert__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .75rem; line-height: 1.4; color: var(--mist); white-space: nowrap; }
.alert__product, .note__product { display: inline-flex; align-items: center; gap: 8px; font-weight: 450; color: var(--snow); }
.alert__product sup { font-size: .7em; vertical-align: .5em; margin-left: 1px; }
.alert__product::before, .note__product::before {
  content: ""; width: 8px; height: 12px; background: var(--hl);
  clip-path: polygon(40.2% 0, 100% 0, 59.8% 100%, 0 100%);
}
.note__product::before { background: var(--lost); }
.alert__title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 8px; font-size: .9375rem; font-weight: 450; letter-spacing: -.01em; line-height: 1.35; color: var(--snow); }
.alert__body { margin-top: 2px; font-size: .8125rem; line-height: 1.45; color: var(--mist); }

/* 1. Lead Rescue: the scan crosses a line of calls; the lost one lights, rises, and raises an alert */
.alert { margin-left: 64px; }
.lr__leader { position: relative; display: block; width: 1px; height: 26px; transform: skewX(-15deg); transform-origin: bottom; }
.lr__leader { margin-left: 115px; background: linear-gradient(to top, var(--w-caught), rgba(255, 255, 255, .3)); }
.lr__bars {
  display: flex; align-items: flex-end; gap: 17px; height: 60px;
  border-bottom: 1px solid var(--w-rule2);
  -webkit-mask-image: linear-gradient(90deg, #000 52%, transparent 98%); mask-image: linear-gradient(90deg, #000 52%, transparent 98%);
}
.lr__bars i { flex: none; width: 7px; height: 40px; border-radius: 1px; background-color: var(--bar); transform: skewX(-15deg); transform-origin: bottom left; }
.lr__bars i.is-caught { height: 60px; background-color: var(--w-caught); box-shadow: var(--w-caught-glow); }
.lr__scan {
  position: absolute; left: 0; bottom: 0; width: 120px; height: 104px;
  background: linear-gradient(90deg, rgba(var(--w-rgb), 0), rgba(var(--w-rgb), .09) 82%, rgba(var(--w-rgb), .6));
  transform: translateX(-160px) skewX(-15deg); transform-origin: bottom left;
  opacity: 0; pointer-events: none;
}

/* 2. 5M+: a wall of calls behind the figure */
.wcard--calls .wcard__fig { padding-bottom: 4px; }
.mx { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .55) 44%, transparent 76%); mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .55) 44%, transparent 76%); }
.mx pattern path { fill: var(--w-mx); }
.mx__signed { fill: var(--w-fg); }
.wnum { position: relative; font-size: clamp(4.25rem, 6.2vw, 5.75rem); font-weight: 300; letter-spacing: -.055em; line-height: .86; color: var(--w-fg); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .wnum { padding: .06em .08em .04em 0; background: var(--w-num); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
}

/* 3. SOC 2: the real badge, in a seal of fine rings */
.wcard--soc .wcard__fig { align-items: center; justify-content: center; padding-bottom: 0; }
.rings { position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; margin: -118px 0 0 -130px; fill: none; stroke-width: 1; }
.rings circle { stroke: rgba(var(--w-rgb), .13); transform: rotate(-90deg); transform-origin: center; }
.rings circle:nth-child(2) { stroke: rgba(var(--w-rgb), .08); }
.rings circle:nth-child(3) { stroke: rgba(var(--w-rgb), .05); }
.soc { position: relative; width: 88px; height: auto; margin-top: 24px; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .55)); }

/* 4. BAA: three signed agreements, one per plan; the front one shows its signature */
.docs { position: relative; height: 232px; }
.doc {
  position: absolute; height: 150px;
  border-radius: 10px;
  background: linear-gradient(180deg, #212125 0%, #19191C 100%);
  box-shadow: inset 0 0 0 1px var(--w-rule2), inset 0 1px 0 rgba(var(--w-rgb), .06), 0 -10px 24px rgba(0, 0, 0, .35);
}
.doc--3 { left: 28px; right: 0; top: 0; background: linear-gradient(180deg, #19191C 0%, #141416 100%); }
.doc--2 { left: 14px; right: 14px; top: 26px; background: linear-gradient(180deg, #1D1D20 0%, #161619 100%); }
.doc--1 { left: 0; right: 28px; top: 52px; height: auto; bottom: 0; box-shadow: inset 0 0 0 1px var(--w-rule2), inset 0 1px 0 rgba(var(--w-rgb), .07), 0 -10px 24px rgba(0, 0, 0, .35), 0 16px 32px rgba(0, 0, 0, .4); }
.doc__tab { display: flex; align-items: center; justify-content: space-between; height: 26px; padding: 2px 10px 0 12px; font-size: .6875rem; line-height: 1; color: var(--w-fg2); }
.doc--1 .doc__tab { color: var(--w-fg); }
.ckm { flex: none; width: 13px; height: 13px; fill: none; stroke: var(--w-fg); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ckm circle { stroke: rgba(var(--w-rgb), .3); }
.doc__title { padding: 8px 12px 0; font-size: .875rem; font-weight: 450; letter-spacing: -.012em; line-height: 1.3; color: var(--w-fg); text-wrap: balance; }
.doc__lines { display: grid; gap: 6px; padding: 12px 12px 0; }
.doc__lines i { height: 3px; border-radius: 2px; background: rgba(var(--w-rgb), .09); }
.doc__lines i:nth-child(2) { width: 88%; }
.doc__lines i:nth-child(3) { width: 56%; }
.doc__sign { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; font-size: .6875rem; line-height: 1.4; color: var(--w-fg2); }
.doc__sig { flex: 1; min-width: 0; height: 30px; border-bottom: 1px solid var(--w-rule2); overflow: visible; fill: none; stroke: var(--w-fg); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }

/* 5. Live in 24-48 hours: a 48-hour dial; the second day is the go-live window */
.wcard--live .wcard__fig { align-items: center; justify-content: center; padding-top: 20px; }
.dial { position: relative; width: min(100%, 224px); aspect-ratio: 1; }
.dial svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dial line { stroke: var(--w-tick0); stroke-width: 2.5; }
.dial line.a { stroke: var(--w-tick1); }
.dial line.b { stroke: var(--w-fg); }
.dial__in { fill: none; stroke: var(--w-rule); }
.dial__arc { fill: none; stroke: var(--w-fg); stroke-width: 1; stroke-linecap: round; }
.dial text { font-size: 9.5px; fill: var(--w-fg3); text-anchor: middle; dominant-baseline: middle; }
.dial__c { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; }
.dial__n { font-size: 2rem; font-weight: 300; letter-spacing: -.045em; line-height: 1; color: var(--w-fg); white-space: nowrap; }
.dial__u { margin-top: 5px; font-size: .75rem; line-height: 1.3; color: var(--w-fg2); }

/* 6. Coaching: the scorecard is the reporting; the note on the lowest score is the coaching */
.wcard__cap { position: absolute; top: 22px; left: 104px; font-size: .75rem; line-height: 1.4; color: var(--w-fg2); }
.score { display: grid; }
.score__row { display: grid; grid-template-columns: 68px minmax(0, 1fr) 34px; align-items: center; column-gap: 16px; padding-block: 11px; border-top: 1px solid var(--w-rule); }
.score__who { font-size: .875rem; line-height: 1.3; color: var(--w-fg); white-space: nowrap; }
.score__bar { display: flex; align-items: flex-end; justify-content: space-between; height: 16px; padding-right: 5px; }
.score__bar i { flex: none; width: 3px; height: 16px; border-radius: 1px; background-color: var(--w-off); transform: skewX(-15deg); transform-origin: bottom left; }
.score__bar i[class] { background-color: var(--w-fg); }
.score__n { font-size: 1.25rem; font-weight: 300; letter-spacing: -.03em; line-height: 1; color: var(--w-fg); text-align: right; font-variant-numeric: tabular-nums; }
.score__row.is-flag .score__who { display: inline-flex; align-items: center; gap: 7px; }
.note { margin: 2px 0 6px 84px; max-width: 348px; }
/* the elbow from Agent K.'s row down to the note */
.note::before { content: ""; position: absolute; left: -58px; top: -6px; width: 50px; height: calc(50% + 6px); border: solid var(--w-lost-line); border-width: 0 0 1px 1px; border-radius: 0 0 0 8px; }

/* ----- the reveal: armed by JS, played once per panel ----- */
.why.is-armed .wcard:not(.is-in) .lr__bars i.is-caught { height: 40px; background-color: var(--bar); box-shadow: none; }
.why.is-armed .wcard:not(.is-in) .lr__leader { transform: skewX(-15deg) scaleY(0); }
.why.is-armed .wcard:not(.is-in) :is(.alert, .note) { opacity: 0; transform: translateY(8px); }
.why.is-armed .wcard:not(.is-in) .wnum { opacity: 0; transform: translateY(14px); }
.why.is-armed .wcard:not(.is-in) .mx { opacity: 0; }
.why.is-armed .wcard:not(.is-in) .rings circle { stroke-dasharray: 1; stroke-dashoffset: 1; }
.why.is-armed .wcard:not(.is-in) .soc { opacity: 0; transform: scale(.94); }
.why.is-armed .wcard:not(.is-in) .score__row { opacity: 0; transform: translateY(8px); }
.why.is-armed .wcard:not(.is-in) .doc { opacity: 0; transform: translateY(16px); }
.why.is-armed .wcard:not(.is-in) .doc__sig path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.why.is-armed .wcard:not(.is-in) .dial line { stroke: var(--w-tick0); }
.why.is-armed .wcard:not(.is-in) .dial__arc { stroke-dasharray: 1; stroke-dashoffset: 1; }
.why.is-armed .wcard:not(.is-in) .dial__c { opacity: 0; transform: translateY(6px); }
.why.is-armed .wcard:not(.is-in) .score__bar i[class] { background-color: var(--w-off); }
.why.is-armed .wcard:not(.is-in) .note::before { opacity: 0; }
.why.is-armed .wcard:not(.is-in) .ck { stroke-dasharray: 1; stroke-dashoffset: 1; }

@keyframes lr-scan { 0% { transform: translateX(-160px) skewX(-15deg); opacity: 0; } 8%, 88% { opacity: 1; } 100% { transform: translateX(760px) skewX(-15deg); opacity: 0; } }
@keyframes lr-read { 0%, 100% { filter: none; } 30% { filter: brightness(var(--w-read)); } }
.wcard.is-in .lr__scan { animation: lr-scan 1500ms linear 150ms 1 both; }
.wcard.is-in .lr__bars i { animation: lr-read 520ms var(--ease-out) calc(var(--i) * 39ms + 260ms) 1; }
.wcard.is-in .lr__bars i.is-caught { transition: height 800ms var(--ease-out) 430ms, background-color 260ms var(--ease-out) 430ms, box-shadow 800ms var(--ease-out) 430ms; }
.wcard.is-in .lr__leader { transition: transform 420ms var(--ease-out) 900ms; }
.wcard.is-in .alert { transition: opacity 420ms var(--ease-out) 1120ms, transform 700ms var(--ease-out) 1120ms; }
.wcard.is-in .score__row { transition: opacity 420ms var(--ease-out) calc(var(--i) * 120ms), transform 700ms var(--ease-out) calc(var(--i) * 120ms); }
.wcard.is-in .score__bar i[class] { transition: background-color 160ms linear calc(var(--i) * 120ms + var(--t) * 16ms + 150ms); }
.wcard.is-in .note { transition: opacity 420ms var(--ease-out) 1150ms, transform 700ms var(--ease-out) 1150ms; }
.wcard.is-in .note::before { transition: opacity 400ms var(--ease-out) 1000ms; }
.wcard.is-in .wnum { transition: opacity 500ms var(--ease-out) 120ms, transform 900ms var(--ease-out) 120ms; }
.wcard.is-in .mx { transition: opacity 1200ms var(--ease-out); }
.wcard.is-in .rings circle { transition: stroke-dashoffset 1100ms var(--ease-out); }
.wcard.is-in .rings circle:nth-child(2) { transition-delay: 120ms; }
.wcard.is-in .rings circle:nth-child(3) { transition-delay: 240ms; }
.wcard.is-in .soc { transition: opacity 500ms var(--ease-out) 200ms, transform 900ms var(--ease-out) 200ms; }
.wcard.is-in .doc { transition: opacity 460ms var(--ease-out) calc(var(--i) * 130ms), transform 800ms var(--ease-out) calc(var(--i) * 130ms); }
.wcard.is-in .doc__sig path { transition: stroke-dashoffset 900ms var(--ease-in-out) 700ms; }
.wcard.is-in .dial line { transition: stroke 160ms linear calc(var(--i) * 24ms + 150ms); }
.wcard.is-in .dial__arc { transition: stroke-dashoffset 580ms linear 730ms; }
.wcard.is-in .dial__c { transition: opacity 500ms var(--ease-out) 350ms, transform 800ms var(--ease-out) 350ms; }
.wcard.is-in .ck { transition: stroke-dashoffset 600ms var(--ease-out) calc(var(--i, 0) * 130ms + 420ms); }

@media (max-width: 1080px) {
  .why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wcard { grid-column: span 1; min-height: 360px; }
  .wcard--wide { grid-column: span 2; }
}
@media (max-width: 640px) {
  .why__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .wcard, .wcard--wide { grid-column: auto; min-height: 0; }
  .wcard__fig { min-height: 216px; padding: 24px 20px 0; }
  .wcard__text { padding: 20px 20px 24px; }
  .wcard__name { font-size: 1.1875rem; }
  .alert { margin-left: 56px; }
  .note { margin-left: 40px; }
  .note::before { left: -30px; width: 20px; }
  .score__row { grid-template-columns: 62px minmax(0, 1fr) 30px; column-gap: 12px; }
  .score__bar i { width: 2px; }
  .wcard__cap { left: 100px; }
  .wcard--soc .wcard__fig { min-height: 240px; }
}

/* ----- on paper (client, 2026-11-10: "make this light"; second pass the same day: "change the
   cards styling a bit not looking good in light"). The tokens change, and the panel is rebuilt
   for a light ground: a white frame with a crisp edge, and the illustration in an inset well
   one tone below the page, so the drawings have a ground to sit on. On paper, yellow is a
   highlighter: the caught call is an ink bar on a yellow mark. White things (the agreement
   sheets) and dark things (the two product toasts) both stand out of the well.
   ?why=dark shows the dark version. ----- */
.why.on-paper {
  --w-rgb: 10, 10, 11;
  --w-fg: var(--ink); --w-fg2: var(--graphite); --w-fg3: #77777D;
  --w-rule: rgba(10, 10, 11, .1); --w-rule2: rgba(10, 10, 11, .2);
  --w-card: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
  --w-edge: linear-gradient(180deg, rgba(10, 10, 11, .12) 0%, rgba(10, 10, 11, .16) 100%);
  --w-card-shadow: 0 1px 1px rgba(10, 10, 11, .03), 0 3px 6px -2px rgba(10, 10, 11, .05), 0 14px 28px -18px rgba(10, 10, 11, .16);
  --w-tick0: #D3D3CD; --w-tick1: #9C9C96; --w-off: #D3D3CD;
  --w-caught: var(--ink); --w-caught-glow: 0 0 0 6px var(--hl);
  --w-read: .58;
  --w-mx: #D1D1CB;
  --w-num: linear-gradient(180deg, #0A0A0B 30%, #55555C 130%);
  --w-toast-shadow: 0 12px 26px rgba(10, 10, 11, .26);
  --w-lost-line: rgba(224, 72, 56, .9);
  background: var(--paper);
}
.why.on-paper .why__lead { color: #77777D; }
.why.on-paper .why__grid { gap: 14px; }
/* the frame: no tints on it; they move into the well */
.why.on-paper .wcard { --bar: #BEBEB8; --tint: linear-gradient(transparent, transparent); --well: linear-gradient(transparent, transparent); border-radius: 22px; }
.why.on-paper .wcard::before { display: none; }
.why.on-paper .wcard__fig {
  margin: 8px 8px 0; padding: 20px; border-radius: 15px; overflow: hidden;
  background: var(--well), linear-gradient(180deg, #F3F3F0 0%, #EAEAE6 100%);
  box-shadow: inset 0 0 0 1px rgba(10, 10, 11, .05), inset 0 1px 2px rgba(10, 10, 11, .05);
}
.why.on-paper .wcard--rescue .wcard__fig, .why.on-paper .wcard--coach .wcard__fig { padding-top: 54px; }
.why.on-paper .wcard--calls .wcard__fig { padding-bottom: 14px; }
.why.on-paper .wcard--rescue { --well: radial-gradient(24% 56% at 19% 104%, rgba(255, 242, 0, .42), rgba(255, 242, 0, 0) 72%); }
.why.on-paper .wcard--soc { --well: radial-gradient(58% 62% at 50% 50%, rgba(112, 92, 214, .16), rgba(112, 92, 214, 0) 72%); }
.why.on-paper .wcard__tag { top: 14px; left: 14px; }
.why.on-paper .wcard__cap { top: 16px; left: 98px; }
.why.on-paper .wcard__text { padding: 20px 28px 26px; }
.why.on-paper .wcard__name { font-weight: 500; }
.why.on-paper .stage__tag { border-color: rgba(10, 10, 11, .14); background: #FFFFFF; color: var(--graphite); }
.why.on-paper .lr__bars { border-bottom-color: rgba(10, 10, 11, .22); }
.why.on-paper .rings { margin-top: -130px; }
.why.on-paper .soc { margin-top: 0; filter: drop-shadow(0 12px 18px rgba(60, 40, 140, .28)); }
/* the agreements are white sheets: the lightest things in the well */
.why.on-paper .docs { height: 216px; }
.why.on-paper .doc { background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(10, 10, 11, .13), 0 -6px 14px rgba(10, 10, 11, .04); }
.why.on-paper .doc--3 { background: #F7F7F5; }
.why.on-paper .doc--2 { background: #FBFBFA; }
.why.on-paper .doc--1 { box-shadow: inset 0 0 0 1px rgba(10, 10, 11, .14), 0 -6px 14px rgba(10, 10, 11, .04), 0 14px 26px -8px rgba(10, 10, 11, .16); }
.why.on-paper .dial__in { fill: rgba(255, 255, 255, .7); }
@media (max-width: 640px) {
  .why.on-paper .why__grid { gap: 12px; }
  .why.on-paper .wcard__fig { margin: 6px 6px 0; padding: 16px; }
  .why.on-paper .wcard--rescue .wcard__fig, .why.on-paper .wcard--coach .wcard__fig { padding-top: 50px; }
  .why.on-paper .wcard__text { padding: 18px 22px 22px; }
  .why.on-paper .wcard__tag { top: 12px; left: 12px; }
  .why.on-paper .wcard__cap { top: 14px; left: 96px; }
}

/*leaks:start*/
/* ==========================================================================
   5. FIVE LEAKS (speed.ai's section and words)
   One console: five tabs across the top, then speed.ai's copy on the left and
   one product illustration on the right. Each illustration plays once when its
   tab opens (and can be replayed); nothing loops. The DOM holds every
   illustration in its final state, so no-JS and ?static show the finished
   picture. Yellow is only what Speed.ai caught; red is only the missed question.
   ========================================================================== */
.leaks { padding-block: clamp(96px, 11vw, 168px); background: radial-gradient(48% 34% at 78% 62%, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 72%), var(--carbon); }
.leaks__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
.leaks__kicker { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: .9375rem; font-weight: 450; letter-spacing: -.01em; line-height: 1.3; color: var(--snow); }
.leaks__kicker::before, .lk-bar__t::before, .lk-checks li::before, .oq__flags li::before, .rq__title::before, .iq__who::before, .ch__insight .note__product::before {
  content: ""; flex: none; width: 8px; height: 13px; background: var(--mist-2);
  clip-path: polygon(41.7% 0, 100% 0, 58.3% 100%, 0 100%);
}
.leaks__title { grid-column: 1 / span 7; max-width: 12em; }
.leaks__dim { color: var(--mist); }
.leaks__head .leaks__lede { grid-column: 9 / -1; margin-top: 0; padding-bottom: .3em; }

/* ----- the console ----- */
.lk {
  position: relative; margin-top: clamp(48px, 5.6vw, 80px);
  border-radius: 24px; border: 1px solid transparent;
  background:
    linear-gradient(180deg, #131315 0%, #0B0B0D 100%) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .05) 42%, rgba(255, 255, 255, .08) 100%) border-box;
  overflow: hidden;
}
.lk-tabs { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0)); }
.lk-tab { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 0 24px; text-align: left; color: var(--mist); transition: color 220ms var(--ease-out); }
.lk-tab + .lk-tab { box-shadow: -1px 0 0 var(--line-dark); }
.lk-tab__n { font-size: .75rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--mist-2); transition: color 220ms var(--ease-out); }
.lk-tab__l { font-size: 1rem; font-weight: 400; letter-spacing: -.012em; line-height: 1.2; white-space: nowrap; }
.lk-tab[aria-selected="true"] { color: var(--snow); }
.lk-tab[aria-selected="true"] .lk-tab__n { color: var(--mist); }
.lk-tab:focus-visible { outline-offset: -5px; border-radius: 12px; }
@media (hover: hover) and (pointer: fine) { .lk-tab:hover { color: var(--snow); } }
/* the lit tab: a soft light that slides under the labels, with a bright line at its foot */
.lk-tabs__ind {
  position: absolute; left: 0; top: 0; bottom: 0; width: var(--iw, 20%);
  transform: translateX(var(--ix, 0px));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .075));
  box-shadow: inset 0 -1px 0 var(--snow);
  pointer-events: none;
}
.lk.is-ready .lk-tabs__ind { transition: transform 520ms var(--ease-out), width 520ms var(--ease-out); }

.lk-panels { display: grid; border-top: 1px solid var(--line-dark); }
.lk-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-width: 0; }
html.js .lk-panel { grid-area: 1 / 1; visibility: hidden; opacity: 0; }
html.js .lk-panel.is-active { visibility: visible; opacity: 1; transition: opacity 420ms var(--ease-out); }
html.js .lk-panel:not(.is-active) .lk-copy { transform: translateY(10px); }
html.js .lk-panel.is-active .lk-copy { transition: transform 700ms var(--ease-out); }
html:not(.js) .lk-tabs { display: none; }
html:not(.js) .lk-panels { border-top: 0; }
html:not(.js) .lk-panel + .lk-panel { border-top: 1px solid var(--line-dark); }

/* speed.ai's copy */
.lk-copy { display: flex; flex-direction: column; min-width: 0; padding: clamp(28px, 3.6vw, 48px); }
.lk-copy__h { font-size: clamp(1.625rem, 2.5vw, 2.125rem); font-weight: 360; letter-spacing: -.036em; line-height: 1.1; color: var(--snow); text-wrap: pretty; }
.lk-checks { display: grid; gap: 14px; margin-top: 28px; }
.lk-checks li { position: relative; padding-left: 24px; font-size: 1rem; font-weight: 350; line-height: 1.5; color: #C6C6CC; text-wrap: pretty; }
.lk-checks li::before { position: absolute; left: 1px; top: .36em; background: var(--snow); }
.lk-checks sup { font-size: .6em; vertical-align: .6em; }
.lk-foot { margin-top: auto; padding-top: 40px; }
.lk-stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding-top: 22px; border-top: 1px solid var(--line-dark); }
.lk-stat__n { font-size: 2.5rem; font-weight: 300; letter-spacing: -.045em; line-height: 1; color: var(--snow); white-space: nowrap; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .lk-stat__n { padding: .04em .06em .06em 0; background: linear-gradient(180deg, #FFFFFF 30%, #8C8F98 120%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
}
.lk-stat__l { font-size: .9375rem; line-height: 1.4; color: var(--mist); }
.lk-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 24px; }
.lk-cta__fine { font-size: .8125rem; line-height: 1.4; color: var(--mist); }

/* the stage: one illustration per leak */
.lk-stage {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 560px; margin: 0;
  padding: 22px clamp(20px, 2.8vw, 36px) clamp(24px, 2.8vw, 36px);
  border-left: 1px solid var(--line-dark);
  background: var(--tint, linear-gradient(transparent, transparent)), radial-gradient(90% 56% at 50% -6%, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 70%), #09090B;
}
.lk-stage--calls { --tint: radial-gradient(46% 40% at 22% 78%, rgba(255, 242, 0, .05), rgba(255, 242, 0, 0) 72%); }
.lk-stage--leads { --tint: radial-gradient(52% 40% at 16% 34%, rgba(255, 242, 0, .07), rgba(255, 242, 0, 0) 72%); }
.lk-stage--coach { --tint: radial-gradient(46% 40% at 70% 56%, rgba(255, 107, 91, .055), rgba(255, 107, 91, 0) 72%); }
.lk-stage--ads { --tint: radial-gradient(52% 38% at 30% 84%, rgba(255, 242, 0, .045), rgba(255, 242, 0, 0) 72%); }
.lk-stage--iris { --tint: radial-gradient(60% 44% at 50% 52%, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 72%); }
.lk-bar { display: flex; align-items: center; gap: 10px; min-height: 32px; }
.lk-bar__t { display: flex; align-items: center; gap: 9px; margin-right: auto; font-size: .8125rem; font-weight: 450; line-height: 1.4; color: var(--snow); white-space: nowrap; }
.lk-bar__t sup { font-size: .7em; vertical-align: .5em; margin-left: 1px; }
.lk-bar__t::before { width: 7px; height: 11px; background: var(--snow); }
.lk-replay { display: grid; place-items: center; width: 32px; height: 32px; margin-right: -4px; border-radius: 999px; border: 1px solid var(--line-dark-2); color: var(--mist); transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out), transform 160ms var(--ease-out); }
.lk-replay svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lk-replay:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .lk-replay:hover { color: var(--snow); border-color: rgba(255, 255, 255, .34); } }
html.is-static .lk-replay, html:not(.js) .lk-replay { display: none; }
.lk-fig { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding-top: 28px; }
.lk-fig.is-reset, .lk-fig.is-reset * { transition: none !important; }
/* a bar is a call: every tick in these drawings leans with the logo */
.lk-fig i { flex: none; display: block; border-radius: 1px; background-color: var(--lk-off, #2A2C31); transform: skewX(-15deg); transform-origin: bottom left; }
.lk-ck { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--hl); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lk-ck path { stroke-dasharray: 1; }
.lk-card { padding: 13px 16px 14px; border-radius: 12px; background: rgba(27, 27, 30, .94); box-shadow: inset 0 0 0 1px var(--line-dark-2), 0 16px 36px rgba(0, 0, 0, .45); }
.lk-card .alert__body { margin-top: 4px; }

/* 1. Missed calls: the overnight queue. A scan reads every call; three are flagged as it passes */
.lk-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; }
.lk-top__c { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.lk-top__n { min-width: 1.16em; font-size: 3rem; font-weight: 300; letter-spacing: -.045em; line-height: .9; color: var(--snow); font-variant-numeric: tabular-nums; }
.lk-top__l { font-size: .875rem; line-height: 1.3; color: var(--mist); }
.lk-top__s { display: inline-flex; align-items: center; gap: 7px; font-size: .875rem; line-height: 1.3; color: var(--snow); font-variant-numeric: tabular-nums; white-space: nowrap; }
.oq__lane { position: relative; height: 128px; margin-top: 30px; border-bottom: 1px solid var(--line-dark-2); overflow: hidden; }
.oq__bars { display: flex; align-items: flex-end; justify-content: space-between; height: 100%; padding-right: 36px; }
.oq__bars i { width: 5px; height: calc(var(--h) * 1%); }
.oq__bars i.is-read { background-color: #5F626A; transition: background-color 240ms linear; }
.oq__bars i.is-flag.is-read { background-color: var(--hl); box-shadow: 0 0 16px var(--hl-glow), 0 0 4px rgba(255, 242, 0, .5); }
.oq__scan {
  position: absolute; top: 0; bottom: 0; left: calc((100% - 41px) * var(--p, 1) + 5px); width: 120px; margin-left: -120px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .08) 82%, rgba(255, 255, 255, .55));
  transform: skewX(-15deg); transform-origin: bottom right; opacity: 0; pointer-events: none;
}
.oq__hours { position: relative; height: 18px; margin-top: 8px; }
.oq__hours li { position: absolute; left: calc((100% - 41px) * var(--x)); top: 0; font-size: .6875rem; line-height: 1.4; color: var(--mist-2); white-space: nowrap; }
.oq__flags { margin-top: 20px; border-bottom: 1px solid var(--line-dark); }
.oq__flags li { display: grid; grid-template-columns: 9px 76px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding-block: 11px; border-top: 1px solid var(--line-dark); font-size: .875rem; line-height: 1.4; }
.oq__flags li::before { background: var(--hl); }
.oq__time { color: var(--mist); font-variant-numeric: tabular-nums; white-space: nowrap; }
.oq__what { color: var(--snow); }
.oq__flags li:not(.is-on) > *, .oq__flags li:not(.is-on)::before { opacity: 0; }
.oq__flags li:not(.is-on) > * { transform: translateY(6px); }
.oq__flags li.is-on > * { transition: opacity 380ms var(--ease-out), transform 620ms var(--ease-out); }
.oq__flags li.is-on::before { transition: opacity 380ms var(--ease-out); }

/* 2. Lost leads: the rescue queue. A new alert lands, its value fills, it rises to the top, and it's called back */
.rq__cols, .rq__row { display: grid; grid-template-columns: minmax(0, 1fr) 124px 100px; column-gap: 20px; align-items: center; }
.rq__cols { margin-top: 30px; padding: 0 0 10px 16px; border-bottom: 1px solid var(--line-dark-2); font-size: .6875rem; line-height: 1.4; color: var(--mist-2); }
.rq__list { position: relative; overflow: hidden; }
.rq__row { position: relative; height: 92px; padding-left: 1px; border-bottom: 1px solid var(--line-dark); }
.rq__title::before { background: rgba(255, 242, 0, .55); }
.rq__row--new { z-index: 1; background: linear-gradient(90deg, rgba(255, 242, 0, .075), rgba(255, 242, 0, 0) 64%), #0E0E10; }
.rq__row--new .rq__title::before { background: var(--hl); }
.rq__main { min-width: 0; }
.rq__title { display: flex; align-items: center; gap: 8px; font-size: .9375rem; font-weight: 450; letter-spacing: -.01em; line-height: 1.45; color: var(--snow); }
.rq__title > span:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rq__title .q { flex: none; }
.rq__body { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-top: 1px; padding-left: 16px; overflow: hidden; font-size: .8125rem; line-height: 1.45; color: var(--mist); }
.rq__meter { display: flex; align-items: flex-end; justify-content: space-between; height: 16px; padding-right: 5px; }
.rq__meter i { width: 3px; height: 16px; }
.rq__meter i.on { background-color: #7A7D86; }
.rq__row--new .rq__meter i.on { background-color: var(--hl); }
.rq__row--new.is-empty .rq__meter i.on { background-color: #2A2C31; }
.rq__row--new:not(.is-empty) .rq__meter i.on { transition: background-color 140ms linear calc(var(--t) * 26ms); }
.rq__act { justify-self: end; display: inline-grid; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line-dark-2); font-size: .8125rem; font-weight: 450; line-height: 1; color: var(--mist); white-space: nowrap; }
.rq__act > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.rq__row--new .rq__act { color: var(--hl); background-color: rgba(255, 242, 0, .07); box-shadow: inset 0 0 0 1px rgba(255, 242, 0, .42); }
.rq__row--new .rq__call { opacity: 0; }
.rq__row--new.is-pending .rq__act { color: var(--snow); background-color: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.rq__row--new.is-pending .rq__call { opacity: 1; }
.rq__row--new.is-pending .rq__done { opacity: 0; }
.rq__row--new:not(.is-pending) .rq__act { transition: color 260ms var(--ease-out), background-color 260ms var(--ease-out), box-shadow 260ms var(--ease-out); }
.rq__row--new:not(.is-pending) .rq__act > span { transition: opacity 200ms var(--ease-out); }

/* 3. Coaching gaps: one call, played to the exact moment the question was skipped */
.cr__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.cr__who { font-size: .9375rem; font-weight: 450; line-height: 1.4; color: var(--snow); }
.cr__who span { display: block; font-size: .8125rem; font-weight: 350; color: var(--mist); }
.cr__time { font-size: 3rem; font-weight: 300; letter-spacing: -.045em; line-height: .9; color: var(--snow); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cr__time small { margin-left: 8px; font-size: .875rem; font-weight: 350; letter-spacing: 0; color: var(--mist-2); }
.cr__wave { position: relative; display: flex; align-items: center; justify-content: space-between; height: 96px; margin-top: 26px; padding-inline: 13px; }
.cr__wave i { width: 3px; height: calc(var(--h) * 1%); transform-origin: center; }
.cr__wave i.is-played { background-color: #7A7D86; transition: background-color 200ms linear; }
.cr__wave i.is-miss.is-played { background-color: var(--lost); box-shadow: 0 0 14px rgba(255, 107, 91, .45); }
.cr__ph { position: absolute; top: -8px; bottom: -8px; left: calc(13px + (100% - 29px) * var(--p, .7042) + 1px); width: 1px; background: var(--snow); transform: skewX(-15deg); opacity: 0; }
.cr__lead { position: absolute; left: calc(13px + (100% - 29px) * .7042 - 11px); top: calc(100% + 3px); width: 1px; height: 19px; background: rgba(255, 107, 91, .75); transform-origin: top; }
.cr__note { position: relative; width: min(100%, 420px); margin: 22px 0 0 auto; }
.cr__weeks { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line-dark); }
.cr__weeks p { font-size: .8125rem; line-height: 1.4; color: var(--mist); }
.cr__cols { display: flex; align-items: flex-end; gap: 9px; height: 40px; padding-right: 11px; }
.cr__cols i { width: 6px; height: calc(var(--h) * 1%); background-color: #5F626A; }
.cr__cols i:last-child { background-color: var(--snow); }
.cr.is-pre .cr__cols i { height: 0; }
.cr:not(.is-pre) .cr__cols i { transition: height 640ms var(--ease-out) calc(var(--t) * 80ms); }

/* 4. Ad waste: the same three channels, first by call volume, then by the cases they signed */
.ch__seg { position: relative; align-self: flex-start; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line-dark); font-size: .8125rem; line-height: 1; }
.ch__seg > span:not(.ch__thumb) { position: relative; padding: 8px 14px; text-align: center; white-space: nowrap; color: var(--mist); transition: color 300ms var(--ease-out); }
.ch__thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 7px; background: #2B2B30; box-shadow: inset 0 0 0 1px var(--line-dark-2), 0 2px 6px rgba(0, 0, 0, .4); transform: translateX(100%); transition: transform 520ms var(--ease-out); }
.ch.is-vol .ch__thumb, .ch.is-zero .ch__thumb { transform: none; }
.ch:not(.is-vol):not(.is-zero) .ch__seg > span:last-child, .ch.is-vol .ch__seg > span:nth-child(2), .ch.is-zero .ch__seg > span:nth-child(2) { color: var(--snow); }
.ch__rows { margin-top: 26px; border-bottom: 1px solid var(--line-dark); }
.ch__row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 40px; align-items: center; column-gap: 16px; padding-block: 16px; border-top: 1px solid var(--line-dark); }
.ch__name { font-size: .875rem; line-height: 1.3; color: var(--snow); white-space: nowrap; }
.ch__lane { display: flex; align-items: flex-end; justify-content: space-between; height: 22px; padding-right: 7px; }
.ch__lane i { width: 4px; height: 22px; transition: background-color 180ms linear calc(var(--t) * 11ms); }
.ch.is-vol .ch__lane i.v { background-color: #6B6E76; }
.ch:not(.is-vol):not(.is-zero) .ch__lane i.s { background-color: var(--snow); }
.ch__n { font-size: 1.5rem; font-weight: 300; letter-spacing: -.03em; line-height: 1; color: var(--snow); text-align: right; font-variant-numeric: tabular-nums; transition: opacity 300ms var(--ease-out); }
.ch.is-vol .ch__n, .ch.is-zero .ch__n { opacity: 0; }
.ch__insight { margin-top: 24px; }
.ch__insight .note__product::before { background: var(--hl); }

/* 5. Blind spots: a question typed to Ask Iris, and the answer with the calls it counted */
.iq { justify-content: flex-start; gap: 0; }
.iq__q { align-self: flex-end; max-width: 88%; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: #222226; box-shadow: inset 0 0 0 1px var(--line-dark-2); font-size: .9375rem; line-height: 1.4; color: var(--snow); }
.iq__a { margin-top: 20px; padding-bottom: 28px; }
.iq__who { display: flex; align-items: center; gap: 9px; font-size: .8125rem; font-weight: 450; line-height: 1.4; color: var(--snow); }
.iq__who::before { width: 7px; height: 11px; background: var(--snow); }
.iq__text { margin-top: 8px; font-size: .9375rem; font-weight: 350; line-height: 1.55; color: #D2D2D6; }
.iq__chart { margin-top: 16px; }
.iq__row:last-child { border-bottom: 1px solid var(--line-dark); }
.iq__row { display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; align-items: center; column-gap: 14px; padding-block: 11px; border-top: 1px solid var(--line-dark); font-size: .875rem; line-height: 1.3; }
.iq__name { color: var(--snow); white-space: nowrap; }
.iq__lane { display: flex; align-items: flex-end; gap: 4px; height: 16px; }
.iq__lane i { width: 3px; height: 16px; background-color: #5F626A; }
.iq__lane i.x { background-color: var(--lost); }
.iq.is-unlit .iq__lane i { background-color: #2A2C31; }
.iq:not(.is-unlit) .iq__lane i { transition: background-color 160ms linear calc(var(--t) * 14ms); }
.iq__n { color: var(--mist); font-variant-numeric: tabular-nums; white-space: nowrap; }
.iq__cite { margin-top: 12px; font-size: .75rem; line-height: 1.4; color: var(--mist-2); }
.iq__input { display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 9px 0 16px; border-radius: 13px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px var(--line-dark-2); font-size: .9375rem; line-height: 1; }
.iq__next { display: grid; gap: 8px; margin-top: auto; padding-bottom: 12px; }
.iq__next li { padding: 9px 14px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8125rem; line-height: 1.4; color: var(--mist); }
.iq__field { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; color: var(--snow); }
.iq__ph { color: var(--mist-2); }
.iq.is-typing .iq__ph { display: none; }
.iq.is-typing .iq__typed::after { content: ""; display: inline-block; width: 1px; height: 1.1em; margin-left: 2px; vertical-align: -.2em; background: var(--snow); }
.iq__send { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--snow); color: var(--ink); }
.iq__send svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

@keyframes lk-in { from { opacity: 0; } }
@media (max-width: 1080px) {
  .leaks__title { grid-column: 1 / -1; }
  .leaks__head .leaks__lede { grid-column: 1 / -1; margin-top: 24px; padding-bottom: 0; }
  .lk-tab { padding: 0 16px; gap: 9px; min-height: 60px; }
  .lk-tab__l { font-size: .9375rem; }
  /* stacked: each leak takes its own height, so only the open one is laid out */
  .lk-panel { grid-template-columns: minmax(0, 1fr); }
  html.js .lk-panel:not(.is-active) { display: none; }
  html.js .lk-panel.is-active { animation: lk-in 420ms var(--ease-out); }
  .lk-foot { padding-top: 32px; }
  .lk-stage { min-height: 0; border-left: 0; border-top: 1px solid var(--line-dark); }
  .lk-fig { flex: none; width: 100%; max-width: 680px; margin-inline: auto; padding-top: 24px; }
}
@media (max-width: 760px) {
  /* the tabs become a rail that scrolls sideways; the lit tab is brought into view */
  .lk-tabs { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .lk-tabs::-webkit-scrollbar { display: none; }
  .lk-tab { flex: none; padding: 0 18px; min-height: 56px; }
}
@media (max-width: 640px) {
  .lk { border-radius: 20px; }
  .lk-copy { padding: 28px 20px; }
  .lk-copy__h { font-size: 1.5rem; }
  .lk-stat__n { font-size: 2.125rem; }
  .lk-cta .btn { width: 100%; white-space: normal; text-align: center; min-height: 52px; padding-block: 12px; line-height: 1.2; }
  .lk-cta__fine { width: 100%; text-align: center; }
  .lk-stage { padding: 18px 20px 24px; }
  .lk-top__n, .cr__time { font-size: 2.375rem; }
  .oq__lane { height: 104px; margin-top: 24px; }
  .oq__bars i { width: 3px; }
  .oq__bars { padding-right: 30px; }
  .oq__scan { left: calc((100% - 33px) * var(--p, 1) + 3px); width: 80px; margin-left: -80px; }
  .oq__hours li { left: calc((100% - 33px) * var(--x)); }
  .oq__flags li { grid-template-columns: 9px 66px minmax(0, 1fr) auto; column-gap: 9px; font-size: .8125rem; }
  .rq__cols { display: none; }
  .rq__list { margin-top: 22px; border-top: 1px solid var(--line-dark-2); }
  .rq__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main main" "val act"; align-content: center; row-gap: 10px; height: 126px; }
  .rq__main { grid-area: main; }
  .rq__val { grid-area: val; max-width: 150px; padding-left: 16px; }
  .rq__act { grid-area: act; }
  .cr__wave { height: 80px; padding-inline: 11px; }
  .cr__wave i { width: 2px; }
  .cr__wave i:nth-child(even) { display: none; }
  .cr__ph { left: calc(11px + (100% - 24px) * var(--p, .7042) + 1px); }
  .cr__lead { left: calc(11px + (100% - 24px) * .7042 - 9px); }
  .ch__row { grid-template-columns: minmax(0, 1fr) 36px; grid-template-areas: "name name" "lane n"; row-gap: 8px; padding-block: 13px; }
  .ch__name { grid-area: name; }
  .ch__lane { grid-area: lane; }
  .ch__lane i { width: 3px; }
  .ch__n { grid-area: n; }
  .iq__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name n" "lane lane"; row-gap: 8px; }
  .iq__name { grid-area: name; }
  .iq__n { grid-area: n; }
  .iq__lane { grid-area: lane; }
  .iq__lane i { width: 2px; }
  .iq__next li { white-space: normal; }
}
@media (max-width: 359px) {
  .ch__seg > span:not(.ch__thumb) { padding-inline: 10px; }
  .iq__lane { gap: 3px; }
}

/* ----- on paper (?theme=light shows the whole page light; leaks.js adds .on-paper). The dark
   tokens are remapped to their paper equivalents, so every rule above follows; what is left below
   are the surfaces. It takes the light recipe from the Why section: a white console, each
   illustration in an inset warm-grey well. On paper yellow is a highlighter: a caught call is an
   ink bar on a yellow mark. The two product notes and your question to Iris stay dark. ----- */
.leaks.on-paper {
  --snow: #0A0A0B; --mist: #55555C; --mist-2: #77777D; --lost: #E04838;
  --line-dark: rgba(10, 10, 11, .1); --line-dark-2: rgba(10, 10, 11, .2);
  --lk-off: #D3D3CD;
  background: var(--paper); color: var(--ink);
}
.leaks.on-paper .leaks__dim { color: #77777D; }
.leaks.on-paper .leaks__kicker::before { background: #9C9C96; }
.leaks.on-paper .lk {
  background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(180deg, rgba(10, 10, 11, .12) 0%, rgba(10, 10, 11, .16) 100%) border-box;
  box-shadow: 0 1px 1px rgba(10, 10, 11, .03), 0 3px 6px -2px rgba(10, 10, 11, .05), 0 18px 36px -22px rgba(10, 10, 11, .18);
}
.leaks.on-paper .lk-tabs { background: none; }
.leaks.on-paper .lk-tabs__ind { background: linear-gradient(180deg, rgba(10, 10, 11, 0), rgba(10, 10, 11, .05)); }
.leaks.on-paper .lk-checks li { color: #2B2B2F; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .leaks.on-paper .lk-stat__n { background-image: linear-gradient(180deg, #0A0A0B 30%, #55555C 130%); }
}
.leaks.on-paper .lk-stage {
  margin: 8px 8px 8px 0; border-left: 0; border-radius: 16px;
  background: var(--tint, linear-gradient(transparent, transparent)), linear-gradient(180deg, #F3F3F0 0%, #EAEAE6 100%);
  box-shadow: inset 0 0 0 1px rgba(10, 10, 11, .05), inset 0 1px 2px rgba(10, 10, 11, .05);
}
.leaks.on-paper .lk-stage--calls { --tint: radial-gradient(46% 40% at 22% 78%, rgba(255, 242, 0, .3), rgba(255, 242, 0, 0) 72%); }
.leaks.on-paper .lk-stage--leads { --tint: radial-gradient(52% 40% at 16% 34%, rgba(255, 242, 0, .32), rgba(255, 242, 0, 0) 72%); }
.leaks.on-paper .lk-stage--coach { --tint: radial-gradient(46% 40% at 70% 56%, rgba(224, 72, 56, .1), rgba(224, 72, 56, 0) 72%); }
.leaks.on-paper .lk-stage--ads { --tint: radial-gradient(52% 38% at 30% 84%, rgba(255, 242, 0, .26), rgba(255, 242, 0, 0) 72%); }
.leaks.on-paper .lk-stage--iris { --tint: radial-gradient(60% 44% at 50% 52%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 72%); }
.leaks.on-paper .lk-replay { background: #FFFFFF; }
.leaks.on-paper .stage__tag { border-color: rgba(10, 10, 11, .14); background: #FFFFFF; color: var(--graphite); }
@media (hover: hover) and (pointer: fine) { .leaks.on-paper .lk-replay:hover { border-color: rgba(10, 10, 11, .45); } }
.leaks.on-paper .lk-ck { stroke: var(--ink); }
.leaks.on-paper .q--high { border-color: transparent; background: var(--hl); color: var(--ink); }
.leaks.on-paper .q--mid { border-color: rgba(10, 10, 11, .2); background: rgba(255, 242, 0, .3); color: #2B2B2F; }
/* the product notes stay dark, as the toasts in the Why section do */
.leaks.on-paper .lk-card {
  --snow: #F5F5F4; --mist: #A1A1A8; --mist-2: #75757D; --lost: #FF6B5B;
  --line-dark: rgba(255, 255, 255, .09); --line-dark-2: rgba(255, 255, 255, .16);
  background: #17171A; box-shadow: 0 12px 26px rgba(10, 10, 11, .26);
}
/* 1. missed calls */
.leaks.on-paper .oq__bars i.is-read { background-color: #9C9C96; }
.leaks.on-paper .oq__bars i.is-flag.is-read { background-color: var(--ink); box-shadow: 0 0 0 3px var(--hl); }
.leaks.on-paper .oq__scan { background: linear-gradient(90deg, rgba(10, 10, 11, 0), rgba(10, 10, 11, .05) 82%, rgba(10, 10, 11, .4)); }
.leaks.on-paper .oq__flags li::before, .leaks.on-paper .rq__row--new .rq__title::before {
  clip-path: none; width: 4px; height: 12px; background: var(--ink); transform: skewX(-15deg); box-shadow: 0 0 0 3px var(--hl);
}
.leaks.on-paper .oq__flags li::before { justify-self: center; }
/* 2. lost leads */
.leaks.on-paper .rq__title::before { background: #9C9C96; }
.leaks.on-paper .rq__row--new .rq__title::before { margin-inline: 4px 0; background: var(--ink); }
.leaks.on-paper .rq__row--new { background: linear-gradient(90deg, rgba(255, 242, 0, .34), rgba(255, 242, 0, 0) 64%), #FBFBF9; }
.leaks.on-paper .rq__meter i.on { background-color: #8C8C86; }
.leaks.on-paper .rq__row--new .rq__meter i.on { background-color: var(--ink); }
.leaks.on-paper .rq__row--new.is-empty .rq__meter i.on { background-color: #D3D3CD; }
.leaks.on-paper .rq__row--new .rq__act { color: var(--ink); background-color: var(--hl); box-shadow: none; }
.leaks.on-paper .rq__row--new.is-pending .rq__act { color: var(--ink); background-color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(10, 10, 11, .3); }
/* 3. coaching gaps */
.leaks.on-paper .cr__wave i.is-played { background-color: #77777D; }
.leaks.on-paper .cr__wave i.is-miss.is-played { background-color: var(--lost); box-shadow: 0 0 12px rgba(224, 72, 56, .3); }
.leaks.on-paper .cr__lead { background: rgba(224, 72, 56, .9); }
.leaks.on-paper .cr__cols i { background-color: #9C9C96; }
.leaks.on-paper .cr__cols i:last-child { background-color: var(--ink); }
/* 4. ad waste */
.leaks.on-paper .ch__seg { background: rgba(10, 10, 11, .05); }
.leaks.on-paper .ch__thumb { background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(10, 10, 11, .1), 0 1px 3px rgba(10, 10, 11, .12); }
.leaks.on-paper .ch.is-vol .ch__lane i.v { background-color: #8C8C86; }
.leaks.on-paper .ch:not(.is-vol):not(.is-zero) .ch__lane i.s { background-color: var(--ink); }
/* 5. blind spots */
.leaks.on-paper .iq__q { background: #17171A; box-shadow: 0 10px 22px -10px rgba(10, 10, 11, .42); color: #F5F5F4; }
.leaks.on-paper .iq__text { color: #2B2B2F; }
.leaks.on-paper .iq__lane i { background-color: #B2B2AC; }
.leaks.on-paper .iq__lane i.x { background-color: var(--lost); }
.leaks.on-paper .iq.is-unlit .iq__lane i { background-color: #D6D6D0; }
.leaks.on-paper .iq__input { background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(10, 10, 11, .14), 0 1px 2px rgba(10, 10, 11, .04); }
.leaks.on-paper .iq__next li { background: rgba(255, 255, 255, .55); }
.leaks.on-paper .iq__send { color: #F5F5F4; }
@media (max-width: 1080px) {
  .leaks.on-paper .lk-stage { margin: 0 8px 8px; border-top: 0; }
}
/*leaks:end*/

/*iris:start*/
/* ==========================================================================
   6. INTRODUCING ASK IRIS (speed.ai's section and words)
   Iris is a character: an eye whose iris is drawn from call bars (canvas, 2D).
   She wakes as the section arrives, greets you in her own words (from
   speed.ai's product screen), looks at the pointer, blinks, and when asked a
   question narrows, reads the rings of calls, and lights the calls she found.
   The DOM holds the finished conversation, so no-JS and ?static show the
   answer. Yellow is only what Iris found; red is only the missed question.
   ========================================================================== */
.askiris { padding-block: clamp(96px, 11vw, 168px); background: radial-gradient(46% 40% at 24% 54%, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 72%), var(--carbon-0); }
.askiris__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
.askiris__kicker { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: .9375rem; font-weight: 450; letter-spacing: -.01em; line-height: 1.3; color: var(--snow); }
.askiris__kicker::before, .ix-bar__t::before, .ix-who::before, .ix-topics li::before, .ix-chip::before, .ix-res__t::before {
  content: ""; flex: none; width: 8px; height: 13px; background: var(--mist-2);
  clip-path: polygon(41.7% 0, 100% 0, 58.3% 100%, 0 100%);
}
.askiris__new { padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line-dark-2); font-size: .75rem; font-weight: 400; line-height: 1.4; color: var(--mist); }
.askiris__title { grid-column: 1 / span 7; }
.askiris__dim { color: var(--mist); }
.askiris__head .askiris__lede { grid-column: 9 / -1; margin-top: 0; padding-bottom: .3em; }

/* ----- the stage: Iris on the left, the ask console on the right ----- */
.ix {
  position: relative; display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 13fr);
  margin-top: clamp(48px, 5.6vw, 80px);
  border-radius: 28px; border: 1px solid transparent;
  background:
    radial-gradient(44% 50% at 23% 32%, rgba(255, 255, 255, .065), rgba(255, 255, 255, 0) 72%) padding-box,
    linear-gradient(180deg, #111113 0%, #070708 100%) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .05) 42%, rgba(255, 255, 255, .08) 100%) border-box;
  overflow: hidden;
}
.ix-self { position: relative; z-index: 0; display: flex; flex-direction: column; padding: 16px 44px 40px; }
.ix-eye { position: relative; align-self: center; width: min(100%, 416px); aspect-ratio: 1; }
.ix-eye__c { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* the field of calls around her: a second canvas under the eye, wider than it, fading out */
.ix-eye__bg {
  position: absolute; z-index: -1; top: 50%; left: 50%; display: block; width: 210%; max-width: none; height: 210%; transform: translate(-50%, -50%); pointer-events: none;
  /* fades out in a circle, and again under the eye so it never runs behind her words */
  -webkit-mask-image: radial-gradient(closest-side, #000 44%, transparent 100%), linear-gradient(#000 0 64%, transparent 75%);
  mask-image: radial-gradient(closest-side, #000 44%, transparent 100%), linear-gradient(#000 0 64%, transparent 75%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
/* without JS the canvas is empty: a plain ring of bars and a pupil stand in */
html:not(.js) .ix-eye::before {
  content: ""; position: absolute; inset: 8%; border-radius: 50%;
  background: radial-gradient(circle, #030304 0 27%, rgba(255, 255, 255, .3) 27.4% 27.9%, transparent 28.3%), repeating-conic-gradient(rgba(255, 255, 255, .55) 0 1.1deg, transparent 1.1deg 3.75deg);
  -webkit-mask-image: radial-gradient(circle, #000 0 68%, transparent 68.5%); mask-image: radial-gradient(circle, #000 0 68%, transparent 68.5%);
}
.ix-status { display: flex; align-items: center; gap: 10px; margin-top: 0; font-size: .8125rem; line-height: 1.4; color: var(--mist); }
.ix-who { display: inline-flex; align-items: center; gap: 9px; font-weight: 450; color: var(--snow); }
.ix-who::before { width: 7px; height: 11px; background: var(--snow); }
.ix-status__s { padding-left: 10px; border-left: 1px solid var(--line-dark-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ix-hello { margin-top: 14px; }
.ix-hello__hi { font-size: clamp(1.375rem, 1.85vw, 1.625rem); font-weight: 400; letter-spacing: -.028em; line-height: 1.22; color: var(--snow); text-wrap: balance; }
.ix-hello__p { margin-top: 12px; max-width: 34em; font-size: 1rem; font-weight: 300; line-height: 1.6; color: var(--mist); text-wrap: pretty; }
.ix-topics { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-dark); }
.ix-topics__h { font-size: .8125rem; line-height: 1.4; color: var(--mist); }
.ix-topics ul { display: flex; flex-wrap: wrap; gap: 7px 22px; margin-top: 10px; font-size: .875rem; line-height: 1.35; color: var(--snow); }
.ix-topics li { display: flex; align-items: baseline; gap: 9px; }
.ix-topics li::before { width: 6px; height: 10px; transform: translateY(1px); }

.ix-ask {
  position: relative; z-index: 1; display: flex; flex-direction: column; margin: 12px 12px 12px 0; padding: 20px 24px 24px;
  border-radius: 18px;
  background: linear-gradient(180deg, #151517 0%, #0D0D0F 100%);
  box-shadow: inset 0 0 0 1px var(--line-dark), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.ix-bar { display: flex; align-items: center; gap: 10px; min-height: 32px; }
.ix-bar__t { display: flex; align-items: center; gap: 9px; margin-right: auto; font-size: .8125rem; font-weight: 450; line-height: 1.4; color: var(--snow); white-space: nowrap; }
.ix-bar__t::before { width: 7px; height: 11px; background: var(--snow); }
.ix-pause { display: grid; place-items: center; width: 32px; height: 32px; margin-right: -4px; border-radius: 999px; border: 1px solid var(--line-dark-2); color: var(--mist); transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out), transform 160ms var(--ease-out); }
.ix-pause svg { width: 12px; height: 12px; fill: currentColor; }
.ix-pause .play, .ix-pause[aria-pressed="true"] .hold { display: none; }
.ix-pause[aria-pressed="true"] .play { display: block; }
.ix-pause:active { transform: scale(.94); }
html.is-static .ix-pause, .ix-pause[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .ix-pause:hover { color: var(--snow); border-color: rgba(245, 245, 244, .4); } }

/* the thread: your question, then her answer */
.ix-thread { display: flex; flex-direction: column; flex: 1; margin-top: 20px; }
.ix-q { align-self: flex-end; max-width: 88%; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: #222226; box-shadow: inset 0 0 0 1px var(--line-dark-2); font-size: .9375rem; line-height: 1.4; color: var(--snow); }
.ix-answers { position: relative; display: grid; margin-top: 18px; }
.ix-ans { grid-area: 1 / 1; visibility: hidden; }
.ix-ans.is-active { visibility: visible; }
.ix-text { margin-top: 8px; max-width: 37em; font-size: 1rem; font-weight: 350; line-height: 1.55; color: #D2D2D6; text-wrap: pretty; }
.ix-rows { margin-top: 16px; }
.ix-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; column-gap: 14px; padding-block: 11px; border-top: 1px solid var(--line-dark); font-size: .875rem; line-height: 1.3; }
.ix-row:last-child { border-bottom: 1px solid var(--line-dark); }
.ix-row__name { color: var(--snow); white-space: nowrap; }
.ix-lane { display: flex; align-items: flex-end; gap: 4px; height: 16px; }
.ix-lane i { flex: none; width: 3px; height: 16px; border-radius: 1px; background-color: #5F626A; transform: skewX(-15deg); }
.ix-lane i.x { background-color: var(--lost); }
.ix-lane i.s { background-color: var(--snow); }
.ix-row__n { color: var(--mist); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ix-cite { margin-top: 12px; font-size: .75rem; line-height: 1.4; color: var(--mist-2); }
/* a week of leads: one leaning bar a day */
.ix-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: 16px; border-bottom: 1px solid var(--line-dark-2); }
.ix-day { display: grid; grid-template-rows: auto 64px; justify-items: center; row-gap: 6px; font-size: .75rem; line-height: 1.3; color: var(--mist); font-variant-numeric: tabular-nums; }
.ix-day__b { align-self: end; width: 12px; height: calc(var(--h) * 1%); border-radius: 1px; background: #4A4C53; transform: skewX(-15deg); transform-origin: bottom left; }
.ix-day.is-top { color: var(--snow); }
.ix-day.is-top .ix-day__b { background: var(--snow); }
.ix-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: 7px; font-size: .75rem; line-height: 1.3; color: var(--mist-2); text-align: center; }
.ix-days .is-top { color: var(--snow); }
/* the rescues still waiting on a call */
.ix-row.ix-res { grid-template-columns: minmax(0, 1fr) auto; }
.ix-res__t { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; font-weight: 450; color: var(--snow); }
.ix-res__t::before { width: 7px; height: 11px; background: var(--hl); }
.ix-res__b { display: block; margin-top: 2px; padding-left: 16px; font-size: .8125rem; color: var(--mist); }
.ix-badge { padding: 1px 8px; border-radius: 999px; border: 1px solid rgba(255, 242, 0, .55); font-size: .6875rem; font-weight: 450; line-height: 1.45; color: var(--hl); }
/* "Iris is reading": three bars, while she thinks */
.ix-thinking { grid-area: 1 / 1; display: flex; align-items: center; gap: 12px; align-self: start; visibility: hidden; opacity: 0; }
.ix-thinking__b { display: flex; align-items: flex-end; gap: 4px; height: 12px; }
.ix-thinking__b i { width: 3px; height: 12px; border-radius: 1px; background: var(--mist-2); transform: skewX(-15deg); }
.ix-thread.is-thinking .ix-thinking { visibility: visible; opacity: 1; transition: opacity 240ms var(--ease-out); }
.ix-thread.is-thinking .ix-thinking__b i { animation: ix-think 720ms var(--ease-in-out) calc(var(--i) * 120ms) 3; }
@keyframes ix-think { 0%, 100% { background: var(--mist-2); transform: skewX(-15deg) scaleY(1); } 40% { background: var(--snow); transform: skewX(-15deg) scaleY(1.35); } }

/* starter questions and the input */
.ix-try { margin-top: 20px; font-size: .8125rem; line-height: 1.4; color: var(--mist); }
.ix-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.ix-chip {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 9px 14px;
  border-radius: 11px; box-shadow: inset 0 0 0 1px var(--line-dark);
  text-align: left; font-size: .875rem; line-height: 1.35; color: var(--mist);
  transition: color 200ms var(--ease-out), box-shadow 200ms var(--ease-out), background-color 200ms var(--ease-out), transform 160ms var(--ease-out);
}
.ix-chip::before { width: 6px; height: 10px; transition: background-color 200ms var(--ease-out); }
.ix-chip:active { transform: scale(.985); }
.ix-chip[aria-pressed="true"] { color: var(--snow); background-color: rgba(245, 245, 244, .05); box-shadow: inset 0 0 0 1px rgba(245, 245, 244, .42); }
.ix-chip[aria-pressed="true"]::before { background: var(--snow); }
@media (hover: hover) and (pointer: fine) { .ix-chip:hover { color: var(--snow); box-shadow: inset 0 0 0 1px rgba(245, 245, 244, .3); } }
.ix-input { display: flex; align-items: center; gap: 12px; height: 52px; margin-top: 12px; padding: 0 10px 0 16px; border-radius: 13px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px var(--line-dark-2); font-size: .9375rem; line-height: 1; }
.ix-input__f { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; color: var(--snow); }
.ix-input__ph { color: var(--mist-2); }
.ix-input.is-typing .ix-input__ph { display: none; }
.ix-input.is-typing .ix-input__typed::after { content: ""; display: inline-block; width: 1px; height: 1.1em; margin-left: 2px; vertical-align: -.2em; background: var(--snow); }
.ix-input__send { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--snow); color: var(--ink); }
.ix-input__send svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ----- the reveal: armed by JS; transitions live on the revealed state ----- */
.ix.is-armed:not(.is-awake) :is(.ix-status, .ix-topics) { opacity: 0; }
.ix.is-armed:not(.is-awake) .ix-hello .w { opacity: 0; }
.ix.is-awake .ix-status { transition: opacity 600ms var(--ease-out) 500ms; }
.ix.is-awake .ix-hello .w { transition: opacity 560ms var(--ease-out) calc(var(--w) * 24ms + 750ms); }
.ix.is-awake .ix-topics { transition: opacity 700ms var(--ease-out) 2000ms; }
.ix.is-armed .ix-q:not(.is-in) { opacity: 0; transform: translateY(10px); }
.ix-q.is-in { transition: opacity 320ms var(--ease-out), transform 560ms var(--ease-out); }
.ix-thread.is-out :is(.ix-q, .ix-ans) { opacity: 0; transition: opacity 180ms linear; }
.ix.is-armed .ix-ans:not(.is-in) :is(.ix-who, .ix-cite, .ix-week, .ix-days, .ix-text .w) { opacity: 0; }
.ix.is-armed .ix-ans:not(.is-in) .ix-row { opacity: 0; transform: translateY(8px); }
.ix.is-armed .ix-ans:not(.is-in) .ix-lane i { background-color: #2A2C31; }
.ix.is-armed .ix-ans:not(.is-in) .ix-day__b { transform: skewX(-15deg) scaleY(0); }
.ix-ans.is-in .ix-who { transition: opacity 320ms var(--ease-out); }
.ix-ans.is-in .ix-text .w { transition: opacity 380ms var(--ease-out) calc(var(--w) * 18ms + 90ms); }
.ix-ans.is-in .ix-row { transition: opacity 420ms var(--ease-out) calc(var(--i) * 110ms + 520ms), transform 700ms var(--ease-out) calc(var(--i) * 110ms + 520ms); }
.ix-ans.is-in .ix-lane i { transition: background-color 160ms linear calc(var(--i) * 110ms + var(--t) * 13ms + 700ms); }
.ix-ans.is-in :is(.ix-week, .ix-days) { transition: opacity 420ms var(--ease-out) 520ms; }
.ix-ans.is-in .ix-day__b { transition: transform 760ms var(--ease-out) calc(var(--i) * 55ms + 600ms); }
.ix-ans.is-in .ix-cite { transition: opacity 500ms var(--ease-out) 1250ms; }

/* ----- what it is built on, and the offer ----- */
.askiris__foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 40px; align-items: start; margin-top: clamp(40px, 4.4vw, 64px); }
.askiris__how { grid-column: 1 / span 4; font-size: 1.0625rem; font-weight: 300; line-height: 1.6; color: var(--mist); text-wrap: pretty; }
.askiris__how q { color: var(--snow); font-style: normal; quotes: "\201C" "\201D"; }
.askiris__built { grid-column: 6 / span 4; }
.askiris__built-l, .askiris__built-t { font-size: .875rem; font-weight: 350; line-height: 1.5; color: var(--mist); text-wrap: pretty; }
.askiris__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; margin: 12px 0 16px; padding-block: 16px; border-block: 1px solid var(--line-dark); }
.askiris__stat-n { display: block; font-size: clamp(1.875rem, 2.6vw, 2.5rem); font-weight: 300; letter-spacing: -.045em; line-height: 1; color: var(--snow); white-space: nowrap; }
.askiris__stat-l { display: block; margin-top: 8px; font-size: .875rem; line-height: 1.4; color: var(--mist); }
.askiris__offer { grid-column: 10 / -1; }
.askiris__free { font-size: 1.0625rem; font-weight: 400; letter-spacing: -.012em; line-height: 1.45; color: var(--snow); text-wrap: balance; }
.askiris__cta { display: grid; justify-items: start; gap: 10px; margin-top: 20px; }
.askiris__fine { font-size: .8125rem; line-height: 1.4; color: var(--mist); }

@media (max-width: 1180px) {
  .ix-self { padding-inline: 32px; }
  .ix-row { grid-template-columns: 84px minmax(0, 1fr) auto; }
  .askiris__how { grid-column: 1 / span 6; }
  .askiris__built { grid-column: 7 / -1; }
  .askiris__offer { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding-top: 28px; border-top: 1px solid var(--line-dark); }
  .askiris__cta { margin-top: 0; }
}
@media (max-width: 1080px) {
  .askiris__title, .askiris__head .askiris__lede { grid-column: 1 / -1; }
  .askiris__head .askiris__lede { margin-top: 24px; padding-bottom: 0; }
  .ix { grid-template-columns: minmax(0, 1fr); }
  .ix-self { display: grid; grid-template-columns: 232px minmax(0, 1fr); column-gap: 32px; align-items: start; padding: 28px 32px 32px; }
  .ix-eye { grid-row: 1 / span 4; width: 100%; }
  .ix-eye__bg { width: 150%; height: 150%; }
  .ix-status { margin-top: 20px; }
  .ix-ask { margin: 0 12px 12px; }
}
@media (max-width: 760px) {
  .ix { border-radius: 22px; }
  .ix-self { display: flex; padding: 16px 24px 28px; }
  .ix-eye { width: min(100%, 264px); }
  .ix-eye__bg { width: 210%; height: 210%; }
  .ix-status { margin-top: 4px; }
  .ix-ask { margin: 0 8px 8px; padding: 16px 16px 16px; border-radius: 15px; }
  .ix-chips { grid-template-columns: minmax(0, 1fr); }
  .ix-q { max-width: 94%; }
  .ix-row:not(.ix-res) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name n" "lane lane"; row-gap: 8px; }
  .ix-row:not(.ix-res) .ix-row__name { grid-area: name; }
  .ix-row:not(.ix-res) .ix-row__n { grid-area: n; }
  .ix-lane { grid-area: lane; }
  .ix-row.ix-res { align-items: start; column-gap: 12px; }
  .ix-row.ix-res .ix-row__n { font-size: .8125rem; line-height: 1.5; }
  .askiris__how, .askiris__built { grid-column: 1 / -1; }
  .askiris__foot { row-gap: 32px; }
}
@media (max-width: 420px) {
  .ix-self { padding-inline: 20px; }
  .ix-lane { gap: 3px; }
  .ix-lane i { width: 2px; }
  .ix-day__b { width: 9px; }
  .askiris__stats { column-gap: 16px; }
}

/* ----- on paper: a variant (client, 2026-11-10: "make this section in light bg as a variant").
   The markup carries .on-paper (the client chose light, 2026-11-10); ?iris=dark removes it. The section's dark tokens are
   remapped to their paper equivalents here, so every rule above follows, and what is left below are
   the surfaces. The stage takes the light panel recipe from the Why section: a white frame, with
   Iris and the console each in an inset warm-grey well. The eye itself stays dark (the canvas
   redraws its rings in ink, and a found call is an ink bar on a yellow mark); your question stays a
   dark bubble, as the product toasts do. ----- */
.askiris.on-paper {
  --snow: #0A0A0B; --mist: #55555C; --mist-2: #77777D;
  --line-dark: rgba(10, 10, 11, .1); --line-dark-2: rgba(10, 10, 11, .2);
  --ix-well: linear-gradient(180deg, #F3F3F0 0%, #EAEAE6 100%);
  --ix-well-edge: inset 0 0 0 1px rgba(10, 10, 11, .05), inset 0 1px 2px rgba(10, 10, 11, .05);
  --eye: 416px;
  background: var(--paper);
}
.askiris.on-paper .askiris__new { background: #FFFFFF; }
.askiris.on-paper .ix {
  border-radius: 24px;
  background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(180deg, rgba(10, 10, 11, .12) 0%, rgba(10, 10, 11, .16) 100%) border-box;
  box-shadow: 0 1px 1px rgba(10, 10, 11, .03), 0 3px 6px -2px rgba(10, 10, 11, .05), 0 18px 36px -22px rgba(10, 10, 11, .18);
}
.askiris.on-paper .ix-self { padding: 8px 0 36px 8px; }
.askiris.on-paper .ix-eye { align-self: stretch; width: auto; aspect-ratio: auto; height: calc(var(--eye) + 20px); border-radius: 16px; background: var(--ix-well); box-shadow: var(--ix-well-edge); overflow: hidden; }
.askiris.on-paper .ix-eye__c { inset: auto; top: 50%; left: 50%; width: min(100%, var(--eye)); height: auto; aspect-ratio: 1; transform: translate(-50%, -50%); }
.askiris.on-paper .ix .ix-eye__bg { z-index: 0; top: 0; left: 0; width: 100%; height: 100%; transform: none; -webkit-mask-image: none; mask-image: none; }
html:not(.js) .askiris.on-paper .ix-eye::before { inset: 14% 22%; background: radial-gradient(circle, #030304 0 27%, transparent 27.4%), repeating-conic-gradient(rgba(10, 10, 11, .6) 0 1.1deg, transparent 1.1deg 3.75deg); }
.askiris.on-paper :is(.ix-status, .ix-hello, .ix-topics) { margin-inline: 36px 28px; }
.askiris.on-paper .ix-status { margin-top: 24px; }
.askiris.on-paper .ix-ask { margin: 8px; border-radius: 16px; background: var(--ix-well); box-shadow: var(--ix-well-edge); }
.askiris.on-paper .stage__tag { border-color: rgba(10, 10, 11, .14); background: #FFFFFF; color: var(--graphite); }
.askiris.on-paper .ix-pause { background: #FFFFFF; }
.askiris.on-paper .ix-q { background: #17171A; box-shadow: 0 10px 22px -10px rgba(10, 10, 11, .42); color: #F5F5F4; }
.askiris.on-paper .ix-text { color: #2B2B2F; }
.askiris.on-paper .ix-lane i { background-color: #B2B2AC; }
.askiris.on-paper .ix-lane i.x { background-color: #E04838; }
.askiris.on-paper .ix-lane i.s { background-color: var(--ink); }
.askiris.on-paper .ix.is-armed .ix-ans:not(.is-in) .ix-lane i { background-color: #D6D6D0; }
.askiris.on-paper .ix-day__b { background: #BBBBB5; }
.askiris.on-paper .ix-day.is-top .ix-day__b { background: var(--ink); }
.askiris.on-paper .ix-res__t::before { clip-path: none; width: 4px; height: 12px; margin-inline: 4px 3px; background: var(--ink); transform: skewX(-15deg); box-shadow: 0 0 0 3px var(--hl); }
.askiris.on-paper .ix-badge { border-color: transparent; background: var(--hl); color: var(--ink); }
.askiris.on-paper .ix-chip { background-color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(10, 10, 11, .1), 0 1px 2px rgba(10, 10, 11, .04); }
.askiris.on-paper .ix-chip[aria-pressed="true"] { background-color: #FFFFFF; box-shadow: inset 0 0 0 1.5px var(--ink), 0 1px 2px rgba(10, 10, 11, .04); }
.askiris.on-paper .ix-input { background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(10, 10, 11, .14), 0 1px 2px rgba(10, 10, 11, .04); }
.askiris.on-paper .ix-input__send { background: var(--ink); color: #F5F5F4; }
@media (hover: hover) and (pointer: fine) {
  .askiris.on-paper .ix-chip:not([aria-pressed="true"]):hover { box-shadow: inset 0 0 0 1px rgba(10, 10, 11, .36), 0 1px 2px rgba(10, 10, 11, .04); }
  .askiris.on-paper .ix-pause:hover { border-color: rgba(10, 10, 11, .45); }
}
@media (max-width: 1080px) {
  .askiris.on-paper { --eye: 300px; }
  .askiris.on-paper .ix-self { display: flex; padding: 8px 8px 28px; }
  .askiris.on-paper :is(.ix-status, .ix-hello, .ix-topics) { margin-inline: 24px; }
  .askiris.on-paper .ix-ask { margin: 0 8px 8px; }
}
@media (max-width: 760px) {
  .askiris.on-paper { --eye: 264px; }
  .askiris.on-paper .ix-self { padding: 8px 8px 24px; }
  .askiris.on-paper :is(.ix-status, .ix-hello, .ix-topics) { margin-inline: 16px; }
  .askiris.on-paper .ix-status { margin-top: 20px; }
}
/*iris:end*/

/*how:start*/
/* ==========================================================================
   7. HOW SPEED.AI WORKS (speed.ai's section and words)
   Their four cards, as one instrument: a single frame whose well holds one
   line of calls, read left to right, with the four steps written under it.
   Connect: the calls start arriving. Analyze: each one is read and scored.
   Alert: one is caught. Improve: the scores climb and more sign.
   It plays once as it arrives; the DOM holds the finished picture, so no-JS
   and ?static show it.

   The client chose the cards on the dark ground (2026-11-10). One markup, four layouts
   (1181px and up), two grounds; the others stay for comparison behind ?how= and ?howbg=light.
     [data-v="c"]  cards        four separate cards, the line running behind them (chosen)
     [data-v="a"]  one line     one frame, one well, four columns
     [data-v="b"]  stepper      the steps down the left, one large stage on the right
     [data-v="d"]  rail         no frame: the line of calls as a rule, large numerals
     .is-dark      the dark ground (chosen); the base tokens are the light one
   Below 1181px every layout becomes the four cards, two across, then one.
   Yellow is only the caught call; red is only the missed question.
   ========================================================================== */
.hiw {
  --hw-well: 272px; --hw-floor: 26px; --ld: 24; --s: 1; --dwell: 3400ms;
  --h-rgb: 10, 10, 11;                 /* hairlines and leaders, as rgba(var(--h-rgb), a) */
  --h-fg: var(--ink); --h-fg2: var(--graphite); --h-fg3: #77777D; --h-mark: #9C9C96;
  --h-frame: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
  --h-frame-light: linear-gradient(transparent, transparent);      /* light falling on a card from above */
  --h-frame-rim: linear-gradient(180deg, rgba(10, 10, 11, .12) 0%, rgba(10, 10, 11, .16) 100%);   /* a card's 1px edge */
  --h-frame-ring: 0 0 0 1px rgba(10, 10, 11, .13);                 /* the same edge, for the one-frame layouts */
  --h-frame-edge: 0 1px 1px rgba(10, 10, 11, .03), 0 3px 6px -2px rgba(10, 10, 11, .05), 0 14px 28px -18px rgba(10, 10, 11, .16);
  --h-ta: 7; --h-ty: .3; --h-tr: .05;                              /* tint strengths in the wells: light, yellow, red */
  --h-bar-shade: rgba(255, 255, 255, 0);
  --h-toast: linear-gradient(180deg, rgba(40, 40, 44, .97) 0%, rgba(23, 23, 26, .97) 100%);
  --h-well: linear-gradient(180deg, #F3F3F0 0%, #EAEAE6 100%);
  --h-well-edge: inset 0 0 0 1px rgba(10, 10, 11, .05), inset 0 1px 2px rgba(10, 10, 11, .05);
  --h-bar0: #C2C2BC; --h-bar1: #94948E; --h-bar2: var(--ink);
  --h-caught: var(--ink); --h-caught-mark: 0 0 0 5px var(--hl); --h-caught-off: 0 0 0 0 rgba(255, 242, 0, 0);
  --h-glow: .42;
  --h-card: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%); --h-card-fg: var(--ink); --h-card-fg2: #2B2B2F; --h-card-fg3: #77777D;
  --h-card-edge: inset 0 0 0 1px rgba(10, 10, 11, .1), 0 1px 2px rgba(10, 10, 11, .05), 0 12px 22px -12px rgba(10, 10, 11, .22);
  --h-miss: #C2382A; --h-miss-mark: #E04838;
  --h-speed: #131315; --h-speed-edge: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 12px 24px -10px rgba(10, 10, 11, .5);
  --h-toast-edge: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 14px 28px -10px rgba(10, 10, 11, .42);
  --h-chip: #FFFFFF; --h-chip-line: rgba(10, 10, 11, .14);
  --h-scan: rgba(255, 255, 255, .86); --h-scan-line: rgba(10, 10, 11, .4);
  padding-block: clamp(96px, 11vw, 168px);
}
.hiw.is-dark {
  --h-rgb: 255, 255, 255;
  --h-fg: var(--snow); --h-fg2: var(--mist); --h-fg3: #8A8A92; --h-mark: var(--mist-2);
  --h-frame: linear-gradient(180deg, #17171A 0%, #0C0C0E 100%);
  --h-frame-light: radial-gradient(92% 58% at 50% -10%, rgba(255, 255, 255, .085), rgba(255, 255, 255, 0) 70%);
  --h-frame-rim: linear-gradient(180deg, rgba(255, 255, 255, .19) 0%, rgba(255, 255, 255, .05) 42%, rgba(255, 255, 255, .09) 100%);
  --h-frame-ring: 0 0 0 1px rgba(255, 255, 255, .09);
  --h-frame-edge: 0 26px 48px -34px rgba(0, 0, 0, .9);
  --h-ta: 1; --h-ty: .13; --h-tr: .075;
  --h-bar-shade: rgba(5, 5, 6, .5);
  --h-well: linear-gradient(180deg, #060607 0%, #09090B 100%);
  --h-well-edge: inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 2px 8px rgba(0, 0, 0, .7);
  --h-bar0: #303238; --h-bar1: #5F626A; --h-bar2: var(--snow);
  --h-caught: var(--hl); --h-caught-mark: 0 0 20px var(--hl-glow), 0 0 5px rgba(255, 242, 0, .55); --h-caught-off: 0 0 0 rgba(255, 242, 0, 0), 0 0 0 rgba(255, 242, 0, 0);
  --h-glow: .15;
  --h-card: linear-gradient(180deg, rgba(42, 42, 46, .96) 0%, rgba(24, 24, 27, .96) 100%); --h-card-fg: var(--snow); --h-card-fg2: #DADADD; --h-card-fg3: var(--mist);
  --h-card-edge: inset 0 0 0 1px rgba(255, 255, 255, .13), 0 16px 32px -12px rgba(0, 0, 0, .7);
  --h-miss: var(--lost); --h-miss-mark: var(--lost);
  --h-speed: #000000; --h-speed-edge: inset 0 0 0 1px rgba(255, 255, 255, .24), 0 14px 28px -10px rgba(0, 0, 0, .8);
  --h-toast-edge: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 16px 36px -10px rgba(0, 0, 0, .7);
  --h-chip: rgba(5, 5, 6, .6); --h-chip-line: var(--line-dark-2);
  --h-scan: rgba(255, 255, 255, .11); --h-scan-line: rgba(255, 255, 255, .6);
  background: radial-gradient(56% 44% at 50% 58%, rgba(255, 255, 255, .034), rgba(255, 255, 255, 0) 72%), var(--carbon);
  color: var(--snow);
}
.hiw__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
.hiw__kicker { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: .9375rem; font-weight: 450; letter-spacing: -.01em; line-height: 1.3; color: var(--h-fg); }
.hiw__kicker::before, .hw-n::before {
  content: ""; flex: none; width: 8px; height: 13px; background: var(--h-mark);
  clip-path: polygon(41.7% 0, 100% 0, 58.3% 100%, 0 100%);
}
.hiw__title { grid-column: 1 / span 7; }
.hiw__dim { color: var(--h-fg3); }
.hiw__head .hiw__lede { grid-column: 9 / -1; margin-top: 0; padding-bottom: .3em; }

/* ----- the frame, and the one well inside it ----- */
.hw { position: relative; margin-top: clamp(48px, 5.6vw, 80px); padding: 8px; border-radius: 22px; background: var(--h-frame-light), var(--h-frame); box-shadow: var(--h-frame-ring), var(--h-frame-edge); }
.hw__well { position: absolute; z-index: 0; inset: 8px 8px auto; height: var(--hw-well); border-radius: 15px; overflow: hidden; background: var(--h-well); box-shadow: var(--h-well-edge); pointer-events: none; }
/* the scan: a band of light with a thin leading line, leaning like the calls */
.hw__scan { position: absolute; left: 0; bottom: var(--hw-floor); width: 100%; height: calc(64px * var(--s) + 44px); opacity: 0; will-change: transform; }
.hw__scan i {
  position: absolute; inset: 0; transform: skewX(-15deg); transform-origin: bottom right;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) calc(100% - 180px), var(--h-scan) calc(100% - 1.5px), var(--h-scan-line) calc(100% - 1.5px));
  -webkit-mask-image: linear-gradient(to top, #000 46%, transparent); mask-image: linear-gradient(to top, #000 46%, transparent);
}
.hw-replay {
  position: absolute; z-index: 3; top: 22px; right: 22px; display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 999px; border: 1px solid var(--h-chip-line); background: var(--h-chip); color: var(--h-fg2);
  transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out), transform 160ms var(--ease-out);
}
.hw-replay svg { grid-area: 1 / 1; width: 13px; height: 13px; }
.hw-replay__hold, .hw-replay.is-hold .hw-replay__again { display: none; }
.hw-replay.is-hold .hw-replay__hold { display: block; width: 11px; height: 11px; }
.hw-replay:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .hw-replay:hover { color: var(--h-fg); border-color: rgba(var(--h-rgb), .45); } }
html.is-static .hw-replay, html:not(.js) .hw-replay, .hw-replay[hidden] { display: none; }

.hw__steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hw-step { position: relative; display: flex; flex-direction: column; min-width: 0; }
.hw-step--connect { --d0: 900ms; }   /* the calls start once Speed.ai is connected */

/* ----- one station: something stands on the line of calls, joined to one call by a leader -----
   --lk  which call (of 24) the leader stands on      --lh  that call's height      --s  the calls' scale
   The lengths below are in the station's own width (cqw), so they hold at any size. */
.hw-fig {
  position: relative; container-type: inline-size; height: var(--hw-well);
  --x: calc((var(--lk) + .5) / 24 * 100cqw + var(--lh) * var(--s) * .268px);   /* the top of that call */
  --xt: calc(var(--x) + var(--ld) * .268px);                                    /* the top of its leader */
  --yb: calc(var(--hw-floor) + var(--lh) * var(--s) * 1px + 5px);               /* the foot of the leader, above the floor */
  --ul: clamp(20px, calc(var(--xt) - var(--off, 132px)), max(20px, calc(100cqw - var(--ur, 312px))));
  --a: calc(var(--d0, 0ms) + var(--lk) * var(--bt, 40ms));                      /* when the scan reaches that call */
  --tint: linear-gradient(transparent, transparent);                           /* a card's own light, in its well */
}
.hw-up { position: absolute; left: var(--ul); bottom: calc(var(--yb) + var(--ld) * 1px); display: flex; flex-direction: column; align-items: flex-start; width: min(292px, calc(100cqw - 40px)); }
.hw-lead {
  position: absolute; left: var(--x); bottom: var(--yb); width: 1px; height: calc(var(--ld) * 1px);
  background: linear-gradient(to top, rgba(var(--h-rgb), .62), rgba(var(--h-rgb), .2));
  transform: skewX(-15deg); transform-origin: bottom;
}
.hw-flag { display: none; }
.hw-go { display: none; }

/* the line of calls */
.hw-bars {
  position: absolute; left: 0; right: 0; bottom: var(--hw-floor);
  display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); align-items: end; height: calc(64px * var(--s));
  border-bottom: 1px solid rgba(var(--h-rgb), .2);
}
.hw-bars i { position: relative; justify-self: center; width: calc(3.2px + 1.8px * var(--s)); height: calc(var(--h) * var(--s) * 1px); border-radius: 1px; background-color: var(--h-bar0); transform: skewX(-15deg); transform-origin: bottom left; }
.hw-bars i { background-image: linear-gradient(to top, var(--h-bar-shade), rgba(5, 5, 6, 0) 78%); }
.hw-bars i.r { background-color: var(--h-bar1); }
.hw-bars i.s { background-color: var(--h-bar2); }
.hw-bars i.is-caught { z-index: 1; background-color: var(--h-caught); box-shadow: var(--h-caught-mark); }
.hw-glow {
  position: absolute; left: calc(var(--x) - var(--lh) * var(--s) * .268px - 92px); bottom: calc(var(--hw-floor) + 1px); width: 184px; height: calc(92px + 40px * var(--s));
  background: radial-gradient(50% 86% at 50% 100%, rgba(255, 242, 0, var(--h-glow)), rgba(255, 242, 0, 0) 72%);
}

/* things that stand on the line */
.hw-card { width: 100%; padding: 11px 14px 12px; border-radius: 12px; background: var(--h-card); box-shadow: var(--h-card-edge); }
.hw-card__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: .75rem; line-height: 1.4; color: var(--h-card-fg3); white-space: nowrap; }
.hw-card__h span:first-child { font-weight: 450; color: var(--h-card-fg); }
.hw-chks { display: grid; gap: 6px; margin-top: 9px; }
.hw-chk { display: flex; align-items: center; gap: 8px; font-size: .8125rem; line-height: 1.35; color: var(--h-card-fg2); }
.hw-chk__r { margin-left: auto; padding-left: 8px; font-size: .75rem; color: var(--h-card-fg3); }
.hw-chk.is-miss .hw-chk__r { font-weight: 450; color: var(--h-miss); }
.hw-ck { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--h-card-fg); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.hw-ck circle { stroke: rgba(var(--h-rgb), .28); }
.hw-ck--x { stroke: var(--h-miss-mark); }
.hw-ck--x circle { stroke: var(--h-miss-mark); stroke-opacity: .45; }

/* a soft light in each card's well, placed where its subject is; colour only where it means
   something (yellow under the caught call, a trace of red by the missed question) */
.hw-step--connect .hw-fig { --tint: radial-gradient(74% 64% at 20% 30%, rgba(255, 255, 255, calc(.075 * var(--h-ta))), rgba(255, 255, 255, 0) 72%); }
.hw-step--analyze .hw-fig { --tint: radial-gradient(44% 40% at 88% 54%, rgba(255, 107, 91, var(--h-tr)), rgba(255, 107, 91, 0) 72%), radial-gradient(70% 56% at 46% 26%, rgba(255, 255, 255, calc(.06 * var(--h-ta))), rgba(255, 255, 255, 0) 72%); }
.hw-step--alert .hw-fig { --tint: radial-gradient(78% 74% at 40% 112%, rgba(255, 242, 0, var(--h-ty)), rgba(255, 242, 0, 0) 70%); }
.hw-step--improve .hw-fig { --tint: radial-gradient(76% 72% at 86% 106%, rgba(255, 255, 255, calc(.11 * var(--h-ta))), rgba(255, 255, 255, 0) 72%); }

/* 1. Connect: your phone system, then Speed.ai under it, then the calls.
   Each leader's length is set so the four things share one top line. */
.hw-step--connect .hw-fig { --off: 42px; --ld: 67; }
.hw-step--analyze .hw-fig { --ld: 45; }
.hw-step--alert .hw-fig { --ld: 46; }
.hw-step--improve .hw-fig { --ld: 20; }
.hw-conn { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.hw-node {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 15px 0 12px;
  border-radius: 11px; background: var(--h-card); box-shadow: var(--h-card-edge);
  font-size: .8125rem; font-weight: 450; letter-spacing: -.005em; line-height: 1; color: var(--h-card-fg); white-space: nowrap;
}
.hw-ico { flex: none; width: 14px; height: 14px; color: var(--h-card-fg3); }
.hw-node--speed { height: 40px; padding: 0 16px 0 13px; background: var(--h-speed); box-shadow: var(--h-speed-edge); color: #F5F5F4; }
.hw-node--speed svg { flex: none; width: 23px; height: 14px; }
.hw-join { position: relative; align-self: stretch; height: 28px; }
.hw-join__l { position: absolute; top: 0; left: calc(var(--xt) + 68 * .268px - var(--ul)); width: 1px; height: 100%; background: rgba(var(--h-rgb), .42); transform: skewX(-15deg); transform-origin: top; }
.hw-ok { position: absolute; top: 50%; left: calc(var(--xt) + 68 * .268px - var(--ul) + 12px); display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; line-height: 1; color: var(--h-fg2); white-space: nowrap; transform: translateY(-50%); }
.hw-ok .hw-ck { width: 13px; height: 13px; stroke: var(--h-fg); }
.hw-step--connect .hw-lead { left: var(--xt); background: linear-gradient(to bottom, rgba(var(--h-rgb), .42), rgba(var(--h-rgb), .62)); transform-origin: top; }

/* 3. Alert: the product's own toast is dark on either ground */
.hw-toast { width: 100%; max-width: none; margin-left: 0; background: var(--h-toast); box-shadow: var(--h-toast-edge); }
.hw-step--alert .hw-lead { background: linear-gradient(to top, var(--h-caught), rgba(var(--h-rgb), .3)); }

/* 4. Improve: the scorecard */
.hw-score__n { display: flex; align-items: baseline; gap: 10px; margin-top: 7px; }
.hw-score__n .face-display { font-size: 2.5rem; font-weight: 300; letter-spacing: -.05em; line-height: .95; font-variant-numeric: tabular-nums; color: var(--h-card-fg); }
.hw-score__d { font-size: .75rem; line-height: 1.3; color: var(--h-card-fg3); }
.hw-score .hw-chks { margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(var(--h-rgb), .08); }

/* ----- the four steps, written under the well ----- */
.hw-text { position: relative; flex: 1; padding: 26px 24px 22px; }
.hw-step + .hw-step .hw-text::before { content: ""; position: absolute; left: 0; top: 26px; bottom: 16px; width: 1px; background: rgba(var(--h-rgb), .1); }
.hw-n { display: flex; align-items: center; gap: 9px; font-size: .8125rem; font-weight: 450; line-height: 1; font-variant-numeric: tabular-nums; color: var(--h-fg3); }
.hw-n::before { width: 7px; height: 12px; background: var(--h-fg); }
.hw-name { margin-top: 16px; font-size: 1.375rem; font-weight: 450; letter-spacing: -.026em; line-height: 1.2; color: var(--h-fg); }
.hw-desc { margin-top: 8px; max-width: 24em; font-size: .9375rem; font-weight: 350; line-height: 1.5; color: var(--h-fg2); text-wrap: pretty; }

/* ----- motion: armed by JS, then each station answers. Transitions live on the
   revealed state only, so arming never plays backwards. ----- */
.hw.is-armed .hw-step:not(.is-in) .hw-bars i { opacity: 0; transform: skewX(-15deg) scaleY(.3); }
.hw.is-armed .hw-step:not(.is-in) .hw-bars i.is-caught { height: calc(34px * var(--s)); background-color: var(--h-bar1); box-shadow: var(--h-caught-off); }
.hw.is-armed .hw-step:not(.is-in) :is(.hw-lead, .hw-join__l) { transform: skewX(-15deg) scaleY(0); }
.hw.is-armed .hw-step:not(.is-in) :is(.hw-card, .hw-toast, .hw-node--speed) { opacity: 0; transform: translateY(8px); }
.hw.is-armed .hw-step:not(.is-in) .hw-chk { opacity: 0; transform: translateY(4px); }
.hw.is-armed .hw-step:not(.is-in) .hw-ck :is(circle, path) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.hw.is-armed .hw-step:not(.is-in) :is(.hw-ok, .hw-glow, .hw-score__d, .hw-flag) { opacity: 0; }
.hw.is-armed .hw-step:not(.is-in) .hw-text { opacity: .42; }
.hw.is-armed .hw-step:not(.is-in) .hw-n::before { background: var(--h-bar0); }

.hw-step.is-in .hw-bars i {
  --bd: calc(var(--d0, 0ms) + var(--k) * var(--bt, 40ms));
  transition: opacity 260ms var(--ease-out) var(--bd), transform 560ms var(--ease-out) var(--bd);
}
.hw-step.is-in .hw-bars i.is-caught {
  transition: opacity 260ms var(--ease-out) var(--bd), transform 560ms var(--ease-out) var(--bd),
    height 700ms var(--ease-out) calc(var(--bd) + 300ms), background-color 240ms var(--ease-out) calc(var(--bd) + 300ms), box-shadow 600ms var(--ease-out) calc(var(--bd) + 300ms);
}
.hw-step.is-in .hw-glow { transition: opacity 900ms var(--ease-out) calc(var(--a) + 300ms); }
.hw-step.is-in .hw-lead { transition: transform 320ms var(--ease-out) calc(var(--a) + var(--ls, 160ms)); }
.hw-step.is-in :is(.hw-card, .hw-toast) { transition: opacity 420ms var(--ease-out) calc(var(--a) + var(--cs, 360ms)), transform 640ms var(--ease-out) calc(var(--a) + var(--cs, 360ms)); }
.hw-step.is-in .hw-flag { transition: opacity 420ms var(--ease-out) calc(var(--a) + var(--cs, 360ms)); }
.hw-step.is-in .hw-chk { --rd: calc(var(--a) + var(--rs, 620ms) + var(--i, 0) * 170ms); transition: opacity 320ms var(--ease-out) var(--rd), transform 480ms var(--ease-out) var(--rd); }
.hw-step.is-in .hw-chk .hw-ck :is(circle, path) { transition: stroke-dashoffset 520ms var(--ease-out) calc(var(--rd) + 90ms); }
.hw-step.is-in .hw-score__d { transition: opacity 420ms var(--ease-out) calc(var(--a) + 1250ms); }
.hw-step.is-in .hw-text { transition: opacity 600ms var(--ease-out); }
.hw-step--alert .hw-fig { --ls: 560ms; --cs: 780ms; }
.hw-step--improve .hw-fig { --rs: 1400ms; }
.hw-step--connect.is-in .hw-join__l { transition: transform 280ms var(--ease-out) 80ms; }
.hw-step--connect.is-in .hw-node--speed { transition: opacity 400ms var(--ease-out) 300ms, transform 600ms var(--ease-out) 300ms; }
.hw-step--connect.is-in .hw-ok { transition: opacity 320ms var(--ease-out) 520ms; }
.hw-step--connect.is-in .hw-ok .hw-ck :is(circle, path) { transition: stroke-dashoffset 520ms var(--ease-out) 560ms; }
.hw-step--connect.is-in .hw-lead { transition: transform 260ms var(--ease-out) 640ms; }
.hw-step--connect.is-in .hw-flag { transition: opacity 320ms var(--ease-out) 520ms; }
.hw.is-reset, .hw.is-reset *, .hw.is-reset *::before, .hw.is-reset *::after { transition: none !important; animation: none !important; }

/* ----- the other three layouts (1181px and up) ----- */
@media (min-width: 1181px) {
  /* b. stepper: the steps down the left, one large stage on the right. It walks through the
     four once (pause button), and a step can be picked at any time. */
  .hiw[data-v="b"] { --hw-well: 472px; --hw-floor: 56px; --s: 1.8; }
  .hiw[data-v="b"] .hw__well { inset: 8px 8px 8px auto; width: calc((100% - 16px) * 7 / 12); height: auto; }
  .hiw[data-v="b"] .hw__steps { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); min-height: var(--hw-well); }
  .hiw[data-v="b"] .hw-step { display: contents; }
  .hiw[data-v="b"] .hw-fig { grid-column: 6 / -1; grid-row: 1 / -1; height: auto; --ur: 400px; visibility: hidden; opacity: 0; }
  .hiw[data-v="b"] .hw-step.is-on .hw-fig { visibility: visible; opacity: 1; transition: opacity 320ms var(--ease-out); }
  .hiw[data-v="b"] .hw-up { transform: scale(1.3); transform-origin: calc(var(--xt) - var(--ul)) 100%; }
  .hiw[data-v="b"] .hw-step--connect .hw-fig { --ld: 84; }
  .hiw[data-v="b"] .hw-step--analyze .hw-fig { --ld: 64; }
  .hiw[data-v="b"] .hw-step--alert .hw-fig { --ld: 60; }
  .hiw[data-v="b"] .hw-step--improve .hw-fig { --ld: 44; }
  .hiw[data-v="b"] .hw-text { grid-column: 1 / 6; display: grid; grid-template-columns: 52px minmax(0, 1fr); align-content: center; padding: 20px 44px 20px 56px; opacity: .5; transition: opacity 320ms var(--ease-out); }
  .hiw[data-v="b"] .hw-step.is-on .hw-text, .hiw[data-v="b"] .hw.is-armed .hw-step.is-on .hw-text { opacity: 1; }
  .hiw[data-v="b"] .hw.is-armed .hw-step:not(.is-on) .hw-text { opacity: .5; }
  .hiw[data-v="b"] .hw-n { grid-row: 1 / span 2; align-self: start; padding-top: .55em; }
  .hiw[data-v="b"] .hw-n::before { display: none; }
  .hiw[data-v="b"] .hw-name { margin-top: 0; font-size: 1.5rem; }
  .hiw[data-v="b"] .hw-desc { grid-column: 2; }
  /* the progress rail: one segment a step; the lit one fills while its step is on stage */
  .hiw[data-v="b"] .hw-step .hw-text::before, .hiw[data-v="b"] .hw-text::after { content: ""; position: absolute; left: 26px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: rgba(var(--h-rgb), .1); }
  .hiw[data-v="b"] .hw-step:first-child .hw-text::before, .hiw[data-v="b"] .hw-step:first-child .hw-text::after { top: 26px; }
  .hiw[data-v="b"] .hw-step:last-child .hw-text::before, .hiw[data-v="b"] .hw-step:last-child .hw-text::after { bottom: 26px; }
  .hiw[data-v="b"] .hw-text::after { background: var(--h-fg); transform: scaleY(0); transform-origin: top; }
  .hiw[data-v="b"] .hw-step.is-on .hw-text::after, .hiw[data-v="b"] .hw-step:has(~ .hw-step.is-on) .hw-text::after { transform: scaleY(1); }
  .hiw[data-v="b"] .hw.is-auto .hw-step.is-on .hw-text::after { animation: hw-fill var(--dwell) linear both; }
  .hiw[data-v="b"] .hw-go { display: block; position: absolute; inset: 0; border-radius: 14px; }
  .hiw[data-v="b"] .hw-step:first-child .hw-go { border-top-left-radius: 20px; }
  .hiw[data-v="b"] .hw-step:last-child .hw-go { border-bottom-left-radius: 20px; }
  .hiw[data-v="b"] .hw-go:focus-visible { outline-offset: -4px; }
  .hiw[data-v="b"]:not(.is-dark) .hw-go:focus-visible { outline-color: var(--ink); }

  /* c. cards: four separate cards (the Why recipe); the line of calls runs on behind them */
  .hiw[data-v="c"] .hw { padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .hiw[data-v="c"] .hw__well { display: none; }
  .hiw[data-v="c"] .hw__steps { gap: 14px; }
  .hiw[data-v="c"] .hw-step { padding: 7px 7px 0; border: 1px solid transparent; border-radius: 22px; background: var(--h-frame-light) padding-box, var(--h-frame) padding-box, var(--h-frame-rim) border-box; box-shadow: var(--h-frame-edge); transition: transform 320ms var(--ease-out); }
  .hiw[data-v="c"] .hw-fig { border-radius: 15px; overflow: hidden; background: var(--tint), var(--h-well); box-shadow: var(--h-well-edge); }
  .hiw[data-v="c"] .hw-step + .hw-step .hw-text::before { display: none; }
  .hiw[data-v="c"] .hw-step + .hw-step::before { content: ""; position: absolute; z-index: 1; left: -23px; top: calc(7px + var(--hw-well) - var(--hw-floor) - 1px); width: 30px; height: 1px; background: rgba(var(--h-rgb), .2); }
  .hiw[data-v="c"] .hw-text { padding: 22px 20px 26px; }
  .hiw[data-v="c"] .hw-replay { top: -44px; right: 0; }

  /* d. rail: no frame. The line of calls is the rule; small labels stand on it; large numerals under it */
  .hiw[data-v="d"] { --hw-well: 160px; --hw-floor: 0px; --s: 1.5; }
  .hiw[data-v="d"] .hw { padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .hiw[data-v="d"] .hw__well { inset: 0 0 auto; border-radius: 0; background: none; box-shadow: none; }
  .hiw[data-v="d"] .hw-replay { top: -4px; right: 0; }
  .hiw[data-v="d"] .hw-up { display: none; }
  .hiw[data-v="d"] .hw-fig { --ld: 26; }
  .hiw[data-v="d"] .hw-step--connect .hw-lead { left: var(--x); background: linear-gradient(to top, rgba(var(--h-rgb), .62), rgba(var(--h-rgb), .2)); transform-origin: bottom; }
  .hiw[data-v="d"] .hw-flag {
    position: absolute; left: calc(var(--xt) - 9px); bottom: calc(var(--yb) + var(--ld) * 1px + 6px); display: flex; align-items: center; gap: 8px;
    font-size: .875rem; font-weight: 450; letter-spacing: -.01em; line-height: 1.2; color: var(--h-fg); white-space: nowrap;
  }
  .hiw[data-v="d"] .hw-flag::before { content: ""; flex: none; width: 7px; height: 12px; background: var(--h-fg); clip-path: polygon(41.7% 0, 100% 0, 58.3% 100%, 0 100%); }
  .hiw[data-v="d"]:not(.is-dark) .hw-step--alert .hw-flag::before { clip-path: none; width: 4px; margin-inline: 4px 3px; transform: skewX(-15deg); box-shadow: 0 0 0 3px var(--hl); }
  .hiw[data-v="d"].is-dark .hw-step--alert .hw-flag::before { background: var(--hl); }
  .hiw[data-v="d"] .hw-step--improve .hw-flag { left: auto; right: calc(100cqw - var(--xt) - 9px); flex-direction: row-reverse; }
  .hiw[data-v="d"] .hw-text { padding: 34px 28px 0; }
  .hiw[data-v="d"] .hw-step:first-child .hw-text { padding-left: 0; }
  .hiw[data-v="d"] .hw-step + .hw-step .hw-text::before { top: 0; bottom: 0; }
  .hiw[data-v="d"] .hw-n { font-family: var(--font-display); font-size: 3.5rem; font-weight: 300; letter-spacing: -.055em; line-height: .9; color: var(--h-fg); }
  .hiw[data-v="d"] .hw-n::before { display: none; }
  .hiw[data-v="d"] .hw-name { margin-top: 26px; font-size: 1.5rem; }
}
@keyframes hw-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (hover: hover) and (pointer: fine) and (min-width: 1181px) {
  .hiw[data-v="c"] .hw-step:hover { transform: translateY(-3px); }
}

/* ----- narrower: the head stacks; then every layout becomes four cards ----- */
@media (max-width: 1080px) {
  .hiw__title, .hiw__head .hiw__lede { grid-column: 1 / -1; }
  .hiw__head .hiw__lede { margin-top: 24px; padding-bottom: 0; }
}
@media (max-width: 1180px) {
  .hw { padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .hw__well, .hw-replay { display: none; }
  .hw__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .hw-step { padding: 7px 7px 0; border: 1px solid transparent; border-radius: 22px; background: var(--h-frame-light) padding-box, var(--h-frame) padding-box, var(--h-frame-rim) border-box; box-shadow: var(--h-frame-edge); }
  .hw-fig { border-radius: 15px; overflow: hidden; background: var(--tint), var(--h-well); box-shadow: var(--h-well-edge); }
  .hw-step + .hw-step .hw-text::before { display: none; }
  .hw-text { padding: 20px 20px 24px; }
}
@media (max-width: 680px) {
  .hiw { --hw-well: 256px; }
  .hw__steps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hw-text { padding: 18px 16px 22px; }
  .hw-name { margin-top: 14px; font-size: 1.25rem; }
}
/*how:end*/

/*int:start*/
/* ==========================================================================
   8. WORKS WITH YOUR CURRENT SYSTEM (speed.ai's section and words)
   The 23 logos speed.ai shows, in its order, as one list that can be laid out three
   ways (the client chose the board on light; the section's [data-k] says which is showing):
     wall     a hairline grid of cells beside the heading (what the other two
              fall back to: no JS, no motion, narrower screens)
     marquee  three rows of chips moving across the page; they stop under the
              pointer, and there is a pause button (it never stops by itself)
     board    a switchboard, 1280px and up (the default): the platforms sit on
              routed lines that land on ports on Speed.ai; a call comes in from each
              platform once, and again from any platform you point at
   .is-dark is the dark ground: every colour is a token, so it only swaps tokens.
   The logo files are white; on paper CSS turns them to ink.
   ========================================================================== */
.intg {
  --i-rgb: 10, 10, 11;
  --i-fg: var(--ink); --i-fg2: var(--graphite); --i-fg3: #77777D;
  --i-frame-ring: 0 0 0 1px rgba(10, 10, 11, .13);
  --i-frame-edge: 0 1px 1px rgba(10, 10, 11, .03), 0 3px 6px -2px rgba(10, 10, 11, .05), 0 14px 28px -18px rgba(10, 10, 11, .16);
  --i-frame: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
  --i-line: #E4E4E0;
  --i-cell: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
  --i-cell-on: linear-gradient(180deg, #F7F7F4 0%, #F1F1ED 100%);
  --i-top: linear-gradient(transparent, transparent);
  --i-spot: rgba(10, 10, 11, .05);
  --i-well: linear-gradient(180deg, #F3F3F0 0%, #EAEAE6 100%);
  --i-well-edge: inset 0 0 0 1px rgba(10, 10, 11, .05), inset 0 1px 2px rgba(10, 10, 11, .05);
  --i-well-light: radial-gradient(46% 70% at 50% 50%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 72%);
  --i-chip: linear-gradient(180deg, #FFFFFF 0%, #FAFAF8 100%);
  --i-chip-edge: inset 0 0 0 1px rgba(10, 10, 11, .1), 0 1px 2px rgba(10, 10, 11, .05), 0 10px 20px -12px rgba(10, 10, 11, .2);
  --i-chip-on: inset 0 0 0 1px rgba(10, 10, 11, .34), 0 1px 2px rgba(10, 10, 11, .05), 0 14px 24px -12px rgba(10, 10, 11, .26);
  --i-logo: brightness(0); --i-logo-o: .8;
  --i-hub: linear-gradient(180deg, #1D1D20 0%, #0F0F11 100%); --i-hub-solid: #151517;
  --i-hub-edge: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .1), 0 2px 4px rgba(10, 10, 11, .2), 0 22px 36px -16px rgba(10, 10, 11, .55);
  --i-wire: rgba(10, 10, 11, .24); --i-more: #EEEEEA;
  --i-btn: #FFFFFF; --i-btn-line: rgba(10, 10, 11, .14);
  padding-block: clamp(96px, 11vw, 168px);
}
.intg.is-dark {
  --i-rgb: 255, 255, 255;
  --i-fg: var(--snow); --i-fg2: var(--mist); --i-fg3: #8A8A92;
  --i-frame-ring: 0 0 0 1px rgba(255, 255, 255, .1);
  --i-frame-edge: 0 26px 48px -34px rgba(0, 0, 0, .9);
  --i-frame: linear-gradient(180deg, #17171A 0%, #0C0C0E 100%);
  --i-line: #202023;
  --i-cell: linear-gradient(180deg, #111113 0%, #0D0D0F 100%);
  --i-cell-on: linear-gradient(180deg, #1A1A1D 0%, #131315 100%);
  --i-top: radial-gradient(80% 40% at 50% -6%, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 72%);
  --i-spot: rgba(255, 255, 255, .06);
  --i-well: linear-gradient(180deg, #060607 0%, #09090B 100%);
  --i-well-edge: inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 2px 8px rgba(0, 0, 0, .7);
  --i-well-light: radial-gradient(46% 70% at 50% 50%, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 72%);
  --i-chip: linear-gradient(180deg, rgba(42, 42, 46, .96) 0%, rgba(24, 24, 27, .96) 100%);
  --i-chip-edge: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 16px 30px -14px rgba(0, 0, 0, .7);
  --i-chip-on: inset 0 0 0 1px rgba(255, 255, 255, .4), 0 16px 30px -14px rgba(0, 0, 0, .7);
  --i-logo: none; --i-logo-o: .86;
  --i-hub: linear-gradient(180deg, #0C0C0E 0%, #000000 100%); --i-hub-solid: #050506;
  --i-hub-edge: inset 0 0 0 1px rgba(255, 255, 255, .24), 0 16px 32px -10px rgba(0, 0, 0, .8);
  --i-wire: rgba(255, 255, 255, .22); --i-more: #09090B;
  --i-btn: rgba(5, 5, 6, .6); --i-btn-line: var(--line-dark-2);
  background: radial-gradient(56% 44% at 60% 54%, rgba(255, 255, 255, .034), rgba(255, 255, 255, 0) 72%), var(--carbon);
  color: var(--snow);
}
.intg__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
.intg__title { grid-column: 1 / span 7; }
.intg__dim { color: var(--i-fg3); }
.intg__head .intg__lede { grid-column: 8 / -1; margin-top: 0; padding-bottom: .3em; }
.ig { position: relative; margin-top: clamp(48px, 5.6vw, 80px); }
.ig-wires, .ig-hub, .ig-rows { display: none; }
.ig-list img { display: block; width: auto; height: var(--h); max-width: none; filter: var(--i-logo); opacity: var(--i-logo-o); transition: opacity 240ms var(--ease-out); }
.ig-more { display: block; max-width: 10.5em; font-size: .8125rem; font-weight: 400; line-height: 1.4; color: var(--i-fg3); text-align: center; text-wrap: balance; }

.ig-pause {
  position: absolute; z-index: 4; top: -52px; right: max(var(--gutter), calc(50vw - var(--wrap) / 2)); display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 999px; border: 1px solid var(--i-btn-line); background: var(--i-btn); color: var(--i-fg2);
  transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out), transform 160ms var(--ease-out);
}
.ig-pause[hidden] { display: none; }
.ig-pause svg { grid-area: 1 / 1; width: 11px; height: 11px; }
.ig-pause .play, .ig-pause[aria-pressed="true"] .hold { display: none; }
.ig-pause[aria-pressed="true"] .play { display: block; }
.ig-pause:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .ig-pause:hover { color: var(--i-fg); border-color: rgba(var(--i-rgb), .45); } }

/* ----- a. wall: the heading on the left, a hairline grid of cells on the right ----- */
.intg[data-k="wall"] .ig { border-radius: 22px; overflow: hidden; background: var(--i-line); box-shadow: var(--i-frame-ring), var(--i-frame-edge); isolation: isolate; }
.intg[data-k="wall"] .ig::before, .intg[data-k="wall"] .ig::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.intg[data-k="wall"] .ig::before { background: var(--i-top); }
/* a soft light follows the pointer across the wall */
.intg[data-k="wall"] .ig::after { background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), var(--i-spot), rgba(var(--i-rgb), 0) 66%); opacity: 0; transition: opacity 320ms var(--ease-out); }
.intg[data-k="wall"] .ig-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; }
.intg[data-k="wall"] .ig-it { position: relative; display: grid; place-items: center; height: 112px; padding: 0 12px; background: var(--i-cell); }
.intg[data-k="wall"] .ig-it::before { content: ""; position: absolute; inset: 0; background: var(--i-cell-on); opacity: 0; transition: opacity 260ms var(--ease-out); }
.intg[data-k="wall"] .ig-chip { position: relative; display: grid; place-items: center; }
@media (hover: hover) and (pointer: fine) {
  .intg[data-k="wall"] .ig:hover::after { opacity: 1; }
  .intg[data-k="wall"] .ig-it:hover::before { opacity: 1; }
  .intg[data-k="wall"] .ig-it:hover img { opacity: 1; }
}
@media (min-width: 1081px) {
  .intg[data-k="wall"] .intg__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  .intg[data-k="wall"] .intg__head { grid-column: 1 / span 4; display: block; position: sticky; top: calc(var(--masthead-h, 72px) + 40px); }
  .intg[data-k="wall"] .intg__title { max-width: 7.4em; }
  .intg[data-k="wall"] .intg__head .intg__lede { margin-top: 24px; max-width: 21em; padding-bottom: 0; }
  .intg[data-k="wall"] .ig { grid-column: 5 / -1; margin-top: 0; }
}

/* ----- b. marquee: three rows of chips crossing the whole page ----- */
.intg[data-k="marquee"] .ig { width: 100vw; margin-left: calc(50% - 50vw); }
.intg[data-k="marquee"] .ig-list { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.intg[data-k="marquee"] .ig-rows {
  display: grid; gap: 14px; padding-block: 8px 28px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.ig-track { display: flex; width: max-content; animation: ig-run var(--dur, 60s) linear infinite; will-change: transform; }
.ig-row:nth-child(2) .ig-track { animation-direction: reverse; }
.ig-rows .ig-chip {
  flex: none; display: grid; place-items: center; height: 84px; min-width: 204px; margin-right: 14px; padding: 0 38px;
  border-radius: 16px; background: var(--i-chip); box-shadow: var(--i-chip-edge);
}
.ig-rows .ig-chip img { display: block; width: auto; height: calc(var(--h) * 1.08); max-width: none; filter: var(--i-logo); opacity: var(--i-logo-o); }
.ig.is-held .ig-track { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) { .ig-rows:hover .ig-track { animation-play-state: paused; } }
@keyframes ig-run { to { transform: translateX(calc(-100% / 3)); } }

/* ----- c. board: the platforms on routed lines that land on Speed.ai's ports -----
   Sizes follow the frame's own width (cqw), so nothing collides between 1280 and the widest wrap. */
.intg[data-k="board"] .ig {
  container-type: inline-size; padding: 8px; border-radius: 22px; background: var(--i-frame); box-shadow: var(--i-frame-ring), var(--i-frame-edge); isolation: isolate;
  --hw: clamp(220px, 19cqw, 260px);   /* Speed.ai's width */
}
.intg[data-k="board"] .ig::before { content: ""; position: absolute; inset: 8px; z-index: 0; border-radius: 15px; background: var(--i-well-light), var(--i-well); box-shadow: var(--i-well-edge); }
.intg[data-k="board"] .ig-wires { display: block; position: absolute; z-index: 1; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); overflow: visible; pointer-events: none; }
.ig-wire { fill: none; stroke: var(--i-wire); stroke-width: 1.25; stroke-dasharray: 1; }
.ig-trace { fill: none; stroke: var(--i-fg); stroke-width: 1.25; opacity: 0; transition: opacity 320ms var(--ease-out); }
.ig-trace.is-on { opacity: .6; transition-duration: 140ms; }
.ig-pulse { fill: none; stroke: var(--i-fg); stroke-width: 2.5; stroke-linecap: round; }
/* three platforms, the room the lines need to turn in (66px each side of Speed.ai), three platforms */
.intg[data-k="board"] .ig-list {
  position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) calc(var(--hw) + 108px) repeat(3, minmax(0, 1fr)); column-gap: 12px;
  grid-auto-rows: clamp(80px, 6.75cqw, 92px); padding: 26px 20px;
}
.intg[data-k="board"] .ig-it { display: grid; align-items: center; }
.intg[data-k="board"] .ig-it:nth-child(6n+1) { grid-column: 1; }
.intg[data-k="board"] .ig-it:nth-child(6n+2) { grid-column: 2; }
.intg[data-k="board"] .ig-it:nth-child(6n+3) { grid-column: 3; }
.intg[data-k="board"] .ig-it:nth-child(6n+4) { grid-column: 5; }
.intg[data-k="board"] .ig-it:nth-child(6n+5) { grid-column: 6; }
.intg[data-k="board"] .ig-it:nth-child(6n+6) { grid-column: 7; }
.intg[data-k="board"] .ig-it:nth-child(-n+6) { grid-row: 1; }
.intg[data-k="board"] .ig-it:nth-child(n+7):nth-child(-n+12) { grid-row: 2; }
.intg[data-k="board"] .ig-it:nth-child(n+13):nth-child(-n+18) { grid-row: 3; }
.intg[data-k="board"] .ig-it:nth-child(n+19) { grid-row: 4; }
/* every platform gets the same plate, so the columns hold on both edges */
.intg[data-k="board"] .ig-chip {
  display: grid; place-items: center; width: 100%; height: clamp(56px, 4.75cqw, 64px); padding: 0 10px; border-radius: 14px;
  background: var(--i-chip); box-shadow: var(--i-chip-edge); transition: box-shadow 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.intg[data-k="board"] .ig-list img { height: calc(var(--n) * clamp(.7px, (100cqw - 430px) / 1040, .9px)); max-width: 100%; object-fit: contain; }
.intg[data-k="board"] .ig-it--more .ig-chip { background: var(--i-more); box-shadow: inset 0 0 0 1px rgba(var(--i-rgb), .16); }
.intg[data-k="board"] .ig-more { max-width: 9.5em; font-size: .75rem; line-height: 1.35; }
@media (hover: hover) and (pointer: fine) {
  .intg[data-k="board"] .ig-it:not(.ig-it--more):hover .ig-chip { box-shadow: var(--i-chip-on); transform: translateY(-2px); }
  .intg[data-k="board"] .ig-it:hover img { opacity: 1; }
}
/* Speed.ai: the real logo, as in the masthead */
.intg[data-k="board"] .ig-hub {
  position: absolute; z-index: 3; left: 50%; top: 50%; display: grid; place-items: center; width: var(--hw); height: 108px; margin: 0; padding: 0 27px;
  border-radius: 20px; background: var(--i-hub); box-shadow: var(--i-hub-edge); color: #F5F5F4; transform: translate(-50%, -50%);
}
.ig-hub svg { display: block; width: 100%; height: auto; }
/* the ports the lines land on: a dot just inside Speed.ai's edge, which lights as a call lands */
.ig-port { position: absolute; top: calc(50% + var(--y) * 1px - 2.5px); width: 5px; height: 5px; border-radius: 50%; background: #F5F5F4; opacity: .42; }
.ig-port[data-s="0"] { left: 7px; }
.ig-port[data-s="1"] { right: 7px; }
.ig-port.is-hit { animation: ig-port 620ms var(--ease-out) 1; }
@keyframes ig-port { from { opacity: 1; transform: scale(1.7); } to { opacity: .42; transform: scale(1); } }
.ig-hub::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 1px rgba(var(--i-rgb), .5); opacity: 0; pointer-events: none; }
.ig-hub.is-hit::after { animation: ig-hit 620ms var(--ease-out) 1; }
@keyframes ig-hit { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.1, 1.2); } }

/* ----- motion: armed by JS, played once as the section arrives ----- */
.ig.is-armed:not(.is-in) .ig-it { opacity: 0; transform: translateY(8px); }
.ig.is-armed:not(.is-in) .ig-rows { opacity: 0; transform: translateY(14px); }
.ig.is-armed:not(.is-in) .ig-wire { stroke-dashoffset: 1; }
.intg[data-k="board"] .ig.is-armed:not(.is-in) .ig-hub { opacity: 0; transform: translate(-50%, -50%) scale(.94); }
.ig.is-in .ig-it { transition: opacity 420ms var(--ease-out) calc(var(--i) * 26ms), transform 640ms var(--ease-out) calc(var(--i) * 26ms); }
.ig.is-in .ig-rows { transition: opacity 600ms var(--ease-out), transform 900ms var(--ease-out); }
.ig.is-in .ig-wire { transition: stroke-dashoffset 1100ms var(--ease-in-out) calc(var(--w, 0) * 60ms + 200ms); }
.intg[data-k="board"] .ig.is-in .ig-hub { transition: opacity 420ms var(--ease-out) 120ms, transform 640ms var(--ease-out) 120ms; }
.ig.is-reset, .ig.is-reset * { transition: none !important; }

/* ----- narrower ----- */
@media (max-width: 1080px) {
  .intg__title, .intg__head .intg__lede { grid-column: 1 / -1; }
  .intg__head .intg__lede { margin-top: 24px; padding-bottom: 0; }
}
@media (max-width: 760px) {
  .intg[data-k="wall"] .ig-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .intg[data-k="wall"] .ig-it { height: 92px; }
  .intg[data-k="wall"] .ig-list img { height: calc(var(--h) * .78); }
  .ig-rows .ig-chip { height: 68px; min-width: 150px; margin-right: 10px; padding: 0 26px; border-radius: 14px; }
  .ig-rows .ig-chip img { height: calc(var(--h) * .84); }
  .intg[data-k="marquee"] .ig-rows { gap: 10px; }
}
@media (max-width: 460px) {
  .intg[data-k="wall"] .ig-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intg[data-k="wall"] .ig-it { height: 84px; }
  .intg[data-k="wall"] .ig-list img { height: calc(var(--h) * .82); }
}
/*int:end*/

/*plat:start*/
/* ==========================================================================
   9. THE PLATFORM: EVERY FEATURE PAYS FOR ITSELF (speed.ai's section and words)
   Their four cards, each with a small piece of the product drawn in its well:
     rescue    the rescue queue, ranked by estimated case value, the top call raised
     coaching  one call's recording with a note pinned to the exact moment
     marketing signed cases by channel, one bar a case
     views     a personal view with filters, and the notification it sends
   Dark ground (it follows the light integrations section). Two wide cards and two
   narrow ones, crossed over; one column below 1081px.
   Everything in the wells is illustrative and follows the one lead the page has used
   since the Why section. Yellow is only a call Speed.ai caught; red only the missed
   question. Each card plays once as it arrives; the markup holds the finished picture.
   ========================================================================== */
.feat {
  --p-fg: var(--snow); --p-fg2: var(--mist); --p-fg3: #8A8A92; --p-mark: var(--mist-2);
  --p-ui: #DADADD; --p-ui2: #9A9AA2; --p-white: #F5F5F4;
  --p-frame: linear-gradient(180deg, #17171A 0%, #0C0C0E 100%);
  --p-frame-light: radial-gradient(92% 58% at 50% -10%, rgba(255, 255, 255, .085), rgba(255, 255, 255, 0) 70%);
  --p-frame-rim: linear-gradient(180deg, rgba(255, 255, 255, .19) 0%, rgba(255, 255, 255, .05) 42%, rgba(255, 255, 255, .09) 100%);
  --p-frame-edge: 0 26px 48px -34px rgba(0, 0, 0, .9);
  --p-well: linear-gradient(180deg, #060607 0%, #09090B 100%);
  --p-well-edge: inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 2px 8px rgba(0, 0, 0, .7);
  --p-panel: linear-gradient(180deg, rgba(31, 31, 35, .97) 0%, rgba(18, 18, 21, .97) 100%);
  --p-panel-edge: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .05), 0 20px 40px -16px rgba(0, 0, 0, .8);
  --p-raise: linear-gradient(180deg, rgba(52, 52, 57, .98) 0%, rgba(32, 32, 36, .98) 100%);
  --p-raise-edge: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 34px -12px rgba(0, 0, 0, .85);
  --p-line: rgba(255, 255, 255, .08);
  --p-off: #3A3B42;                 /* a quiet mark: a day, or the part of a call not yet played */
  --p-on-white: #0A0A0B; --p-played: #B4B4BA; --p-line2: rgba(255, 255, 255, .14); --p-chip-line: rgba(255, 255, 255, .18); --p-dash: rgba(255, 255, 255, .3);
  --p-bar: linear-gradient(to top, rgba(245, 245, 244, .5), #F5F5F4 76%);
  --p-spot: rgba(255, 255, 255, .05); --p-fade: #09090B; --p-fade-0: rgba(9, 9, 11, 0); --p-lost-0: rgba(255, 107, 91, .3);
  --p-caught: var(--hl); --p-caught-top: 0 0 16px var(--hl-glow), 0 0 4px rgba(255, 242, 0, .5);
  --p-high-line: rgba(255, 242, 0, .34); --p-high-bg: rgba(255, 242, 0, .08); --p-high-fg: var(--hl);
  padding-block: clamp(96px, 11vw, 168px);
  background: radial-gradient(56% 44% at 42% 56%, rgba(255, 255, 255, .034), rgba(255, 255, 255, 0) 72%), var(--carbon);
  color: var(--snow);
}
.feat__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
.feat__kicker { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: .9375rem; font-weight: 450; letter-spacing: -.01em; line-height: 1.3; color: var(--p-fg); }
.feat__kicker::before, .pf-name::before {
  content: ""; flex: none; width: 8px; height: 13px; background: var(--p-mark);
  clip-path: polygon(41.7% 0, 100% 0, 58.3% 100%, 0 100%);
}
.feat__title { grid-column: 1 / span 7; }
.feat__dim { color: var(--p-fg3); }
.feat__head .feat__lede { grid-column: 8 / -1; margin-top: 0; padding-bottom: .3em; color: var(--p-fg2); }

/* ----- the four cards ----- */
.pf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; margin-top: clamp(48px, 5.6vw, 80px); }
.pf-card {
  position: relative; grid-column: span 5; display: flex; flex-direction: column; min-width: 0; padding: 8px; border-radius: 22px; border: 1px solid transparent;
  background: var(--p-frame-light) padding-box, var(--p-frame) padding-box, var(--p-frame-rim) border-box; box-shadow: var(--p-frame-edge);
}
.pf-card--rescue, .pf-card--views { grid-column: span 7; }
/* a soft light follows the pointer over a card */
.pf-card::after { content: ""; position: absolute; inset: 0; z-index: 6; border-radius: inherit; background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%), var(--p-spot), rgba(255, 255, 255, 0) 66%); opacity: 0; pointer-events: none; transition: opacity 360ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .pf-card:hover::after { opacity: 1; } }
.pf-well { position: relative; height: 316px; border-radius: 14px; overflow: hidden; container-type: inline-size; background: var(--tint, linear-gradient(transparent, transparent)), var(--p-well); }
.pf-well::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; box-shadow: var(--p-well-edge); pointer-events: none; }
/* what runs past the foot of a well fades into it */
.pf-fade { position: absolute; z-index: 4; inset: auto 0 0; height: 60px; background: linear-gradient(to top, var(--p-fade) 6%, var(--p-fade-0)); pointer-events: none; }
.pf-text { padding: 24px 20px 26px; }
.pf-name { display: flex; align-items: baseline; gap: 10px; font-size: 1.375rem; font-weight: 450; letter-spacing: -.026em; line-height: 1.2; color: var(--p-fg); }
.pf-name sup { margin-left: 1px; font-size: .5em; line-height: 1; vertical-align: .8em; }
.pf-desc { margin-top: 10px; max-width: 33em; font-size: 1rem; font-weight: 350; line-height: 1.5; color: var(--p-fg2); text-wrap: pretty; }
.pf-desc strong { font-weight: 450; color: var(--p-fg); }

/* a soft light in each well, where its subject is; colour only where it means something */
.pf-card--rescue .pf-well { --tint: radial-gradient(58% 62% at 18% 34%, rgba(255, 242, 0, .1), rgba(255, 242, 0, 0) 72%); }
.pf-card--coaching .pf-well { --tint: radial-gradient(46% 44% at 78% 70%, rgba(255, 107, 91, .07), rgba(255, 107, 91, 0) 72%), radial-gradient(70% 56% at 30% 10%, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 72%); }
.pf-card--marketing .pf-well { --tint: radial-gradient(72% 60% at 34% 22%, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 72%); }
.pf-card--views .pf-well { --tint: radial-gradient(60% 64% at 82% 16%, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 72%); }

/* ----- the pieces of product drawn in the wells ----- */
.pf-panel { position: absolute; z-index: 1; border-radius: 14px; background: var(--p-panel); box-shadow: var(--p-panel-edge); font-size: .8125rem; line-height: 1.35; color: var(--p-ui); }
.pf-panel__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 13px 16px 12px; border-bottom: 1px solid var(--p-line); font-size: .75rem; line-height: 1.4; color: var(--p-fg3); white-space: nowrap; }
.pf-panel__h b { font-weight: 450; color: var(--p-fg); }
.pf-note { position: absolute; z-index: 3; padding: 12px 14px 13px; border-radius: 12px; background: var(--p-raise); box-shadow: var(--p-raise-edge); font-size: .8125rem; line-height: 1.4; color: var(--p-ui); }
.pf-note__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 5px; font-size: .75rem; color: var(--p-fg3); white-space: nowrap; }
.pf-note__h b { font-weight: 450; color: var(--p-fg); }

/* 1. Lead Rescue: the queue. The call at the top is raised out of the list. */
.pf-queue { top: 30px; left: 0; right: 0; width: min(584px, 100% - 64px); margin-inline: auto; }
.pf-q { padding: 0 0 4px; }
.pf-q__row { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; align-items: center; column-gap: 14px; padding: 11px 16px 12px; border-top: 1px solid var(--p-line); }
.pf-q__row.is-top { margin: 10px -14px 6px; padding: 13px 14px 14px 30px; border-top: 0; border-radius: 12px; background: var(--p-raise); box-shadow: var(--p-raise-edge); }
.pf-q__row.is-top + .pf-q__row { border-top: 0; }
.pf-q__bar { justify-self: center; align-self: end; width: 5px; height: calc(var(--h) * 1px); margin-bottom: 3px; border-radius: 1px; background: var(--p-caught); opacity: var(--o, 1); transform: skewX(-15deg); transform-origin: bottom left; }
.pf-q__row.is-top .pf-q__bar { box-shadow: var(--p-caught-top); }
.pf-q__row.is-off .pf-q__bar { background: var(--p-off); }
.pf-q__t { display: grid; gap: 2px; min-width: 0; }
.pf-q__title { display: flex; align-items: center; gap: 8px; font-weight: 450; color: var(--p-fg); white-space: nowrap; }
.pf-q__body { font-size: .75rem; color: var(--p-ui2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-q__meta { font-size: .75rem; color: var(--p-fg3); white-space: nowrap; }
.pf-q__go { padding: 6px 12px; border-radius: 999px; background: var(--p-white); font-size: .75rem; font-weight: 500; line-height: 1.3; color: var(--p-on-white); white-space: nowrap; }
.pf-val { flex: none; padding: 1px 7px 2px; border-radius: 999px; border: 1px solid var(--p-chip-line); font-size: .6875rem; font-style: normal; font-weight: 450; line-height: 1.35; color: var(--p-ui); }
.pf-val--high { border-color: var(--p-high-line); background: var(--p-high-bg); color: var(--p-high-fg); }
.pf-val--off { color: var(--p-fg3); }
.pf-q__row:nth-child(3) { opacity: .86; }
.pf-q__row:nth-child(4) { opacity: .62; }

/* 2. Agent coaching: one call's recording, and the note pinned to the moment */
.pf-call { top: 30px; left: 28px; right: 28px; }
.pf-wave { position: relative; height: 84px; margin: 18px 16px 0; }
.pf-wave__ticks { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); align-items: center; height: 100%; }
.pf-wave__ticks i { justify-self: center; width: 2px; height: calc(var(--h) * 1%); border-radius: 1px; background: var(--p-off); }
.pf-wave__ticks i.p { background: var(--p-played); }
/* the moment: a line through the recording, running down to its note */
.pf-wave__at { position: absolute; z-index: 2; top: -8px; left: calc(var(--at) * 100%); width: 1px; height: calc(100% + 58px); background: linear-gradient(to bottom, var(--lost) 62%, var(--p-lost-0)); }
.pf-wave__at::before { content: ""; position: absolute; top: -3px; left: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--lost); }
.pf-wave__ax { display: flex; justify-content: space-between; margin: 0; padding: 8px 16px 13px; font-size: .6875rem; color: var(--p-fg3); font-variant-numeric: tabular-nums; }
.pf-coach { right: 28px; bottom: 26px; width: min(280px, 100% - 56px); }
.pf-coach .pf-note__h span { color: var(--lost); font-variant-numeric: tabular-nums; }

/* 3. Marketing analysis: one bar for every signed case, channel by channel */
.pf-chan { inset: 30px 28px auto; }
.pf-ch__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; row-gap: 7px; padding: 10px 16px 13px; }
.pf-ch__row + .pf-ch__row { border-top: 1px solid var(--p-line); }
.pf-ch__l { color: var(--p-ui); }
.pf-ch__n { font-size: 1.25rem; font-weight: 300; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--p-fg); }
.pf-ch__bars { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(38, minmax(0, 1fr)); height: 22px; padding-right: 8px; border-bottom: 1px solid var(--p-line2); }
.pf-ch__bars i { width: 4px; max-width: 62%; height: 100%; border-radius: 1px; background: var(--p-bar); transform: skewX(-15deg); transform-origin: bottom left; }

/* 4. Custom views: whose view it is, its filters, the number it watches, and the notification */
.pf-view { inset: 30px 28px -30px; }
.pf-tabs { display: flex; gap: 4px; margin: 0; padding: 10px 12px 0; border-bottom: 1px solid var(--p-line); overflow: hidden; white-space: nowrap; }
.pf-tabs span { position: relative; padding: 5px 10px 12px; font-size: .75rem; color: var(--p-fg3); }
.pf-tabs .is-on { font-weight: 450; color: var(--p-fg); }
.pf-tabs .is-on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 1px; background: var(--p-white); }
.pf-filters { display: flex; gap: 6px; margin: 0; padding: 12px 16px 0; overflow: hidden; white-space: nowrap; }
.pf-filters span { flex: none; padding: 4px 10px 5px; border-radius: 999px; border: 1px solid var(--p-chip-line); font-size: .75rem; line-height: 1.3; color: var(--p-ui); }
.pf-filters .pf-filters__add { border-style: dashed; color: var(--p-fg3); }
.pf-days { padding: 18px 16px 0; }
.pf-days__l { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; font-size: .75rem; color: var(--p-fg3); white-space: nowrap; }
.pf-days__l b { font-size: .8125rem; font-weight: 450; color: var(--p-fg); }
.pf-days__cols { position: relative; display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); align-items: end; height: 116px; padding-left: 68px; }
.pf-days__cols i { justify-self: center; width: 44%; max-width: 14px; height: calc(var(--h) * 1%); border-radius: 3px 3px 0 0; background: var(--p-off); transform-origin: bottom; }
.pf-days__cols i.is-today { background: var(--p-white); }
.pf-days__limit { position: absolute; left: 0; right: 0; bottom: calc(var(--at) * 1%); border-top: 1px dashed var(--p-dash); }
.pf-days__limit { left: 68px; }
.pf-days__limit span { position: absolute; right: 100%; top: -6px; margin-right: 10px; font-size: .6875rem; line-height: 1; color: var(--p-ui2); white-space: nowrap; }
.pf-toast { top: 46px; right: 16px; width: min(264px, 100% - 56px); }
.pf-toast .pf-note__h b { display: inline-flex; align-items: center; gap: 7px; }
.pf-toast .pf-note__h b::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--p-white); }

/* ----- on paper (?theme=light shows the whole page light; plat.js adds .on-paper). Only tokens
   change. The light recipe from the Why section: white cards, each drawing in a warm-grey well,
   the product's panels white. On paper yellow is a highlighter: a caught call is an ink bar on a
   yellow mark. The coaching note and the notification stay dark, as the product toasts do. ----- */
.feat.on-paper {
  --lost: #E04838;
  --p-fg: var(--ink); --p-fg2: var(--graphite); --p-fg3: #77777D; --p-mark: #9C9C96;
  --p-ui: #2B2B2F; --p-ui2: #66666C; --p-white: #0A0A0B; --p-on-white: #F5F5F4;
  --p-frame: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
  --p-frame-light: linear-gradient(transparent, transparent);
  --p-frame-rim: linear-gradient(180deg, rgba(10, 10, 11, .12) 0%, rgba(10, 10, 11, .16) 100%);
  --p-frame-edge: 0 1px 1px rgba(10, 10, 11, .03), 0 3px 6px -2px rgba(10, 10, 11, .05), 0 14px 28px -18px rgba(10, 10, 11, .16);
  --p-well: linear-gradient(180deg, #F3F3F0 0%, #EAEAE6 100%);
  --p-well-edge: inset 0 0 0 1px rgba(10, 10, 11, .05), inset 0 1px 2px rgba(10, 10, 11, .05);
  --p-panel: linear-gradient(180deg, #FFFFFF 0%, #FDFDFC 100%);
  --p-panel-edge: inset 0 0 0 1px rgba(10, 10, 11, .08), 0 1px 2px rgba(10, 10, 11, .05), 0 18px 32px -18px rgba(10, 10, 11, .24);
  --p-raise: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
  --p-raise-edge: inset 0 0 0 1px rgba(10, 10, 11, .14), 0 2px 4px rgba(10, 10, 11, .05), 0 16px 28px -12px rgba(10, 10, 11, .3);
  --p-line: rgba(10, 10, 11, .08); --p-line2: rgba(10, 10, 11, .2); --p-chip-line: rgba(10, 10, 11, .18); --p-dash: rgba(10, 10, 11, .34);
  --p-off: #D3D3CD; --p-played: #77777D;
  --p-bar: linear-gradient(to top, rgba(10, 10, 11, .5), #0A0A0B 76%);
  --p-spot: rgba(255, 255, 255, 0); --p-fade: #EAEAE6; --p-fade-0: rgba(234, 234, 230, 0); --p-lost-0: rgba(224, 72, 56, .3);
  --p-caught: var(--ink); --p-caught-top: 0 0 0 3px var(--hl);
  --p-high-line: transparent; --p-high-bg: var(--hl); --p-high-fg: var(--ink);
  background: var(--paper); color: var(--ink);
}
.feat.on-paper .pf-card--rescue .pf-well { --tint: radial-gradient(58% 62% at 18% 34%, rgba(255, 242, 0, .34), rgba(255, 242, 0, 0) 72%); }
.feat.on-paper .pf-card--coaching .pf-well { --tint: radial-gradient(46% 44% at 78% 70%, rgba(224, 72, 56, .1), rgba(224, 72, 56, 0) 72%), radial-gradient(70% 56% at 30% 10%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 72%); }
.feat.on-paper .pf-card--marketing .pf-well { --tint: radial-gradient(72% 60% at 34% 22%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 72%); }
.feat.on-paper .pf-card--views .pf-well { --tint: radial-gradient(60% 64% at 82% 16%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 72%); }
.feat.on-paper .pf-note {
  --lost: #FF6B5B; --p-fg: #F5F5F4; --p-fg3: #A1A1A8; --p-ui: #DADADD; --p-white: #F5F5F4;
  background: linear-gradient(180deg, #232327 0%, #151517 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 14px 28px -10px rgba(10, 10, 11, .45);
}

/* narrow wells (a phone, or a small tablet column) */
@container (max-width: 500px) {
  .pf-opt, .pf-q__meta, .pf-filters { display: none; }
  .pf-queue { width: calc(100% - 44px); }
  .pf-q__row { column-gap: 11px; padding-inline: 13px; }
  .pf-q__row.is-top { margin-inline: -10px; padding: 12px 11px 13px 23px; }
  .pf-call, .pf-chan { left: 18px; right: 18px; }
  .pf-chan { top: 20px; }
  .pf-wave__ax { visibility: hidden; }
  .pf-coach { right: 18px; width: min(280px, 100% - 36px); }
  .pf-view { inset: 30px 18px -30px; }
  .pf-days__cols { padding-left: 62px; }
  .pf-days__limit { left: 62px; }
  .pf-toast { top: 84px; right: 30px; width: calc(100% - 60px); }
  .pf-days { padding-top: 104px; }
  .pf-days__cols { height: 84px; }
}

/* ----- motion: each card is armed by JS and plays once as it arrives ----- */
.pf-card.is-armed:not(.is-in) .pf-panel, .pf-card.is-armed:not(.is-in) .pf-note { opacity: 0; transform: translateY(12px); }
.pf-card.is-armed:not(.is-in) .pf-q__row { opacity: 0; transform: translateY(8px); }
.pf-card.is-armed:not(.is-in) .pf-q__bar { transform: skewX(-15deg) scaleY(0); }
.pf-card.is-armed:not(.is-in) .pf-wave__ticks { clip-path: inset(0 100% 0 0); }
.pf-card.is-armed:not(.is-in) .pf-wave__at { opacity: 0; }
.pf-card.is-armed:not(.is-in) .pf-ch__bars i { opacity: 0; transform: skewX(-15deg) scaleY(.2); }
.pf-card.is-armed:not(.is-in) .pf-ch__n { opacity: 0; }
.pf-card.is-armed:not(.is-in) .pf-days__cols i { transform: scaleY(0); }
.pf-card.is-armed:not(.is-in) .pf-days__limit { opacity: 0; }
.pf-card.is-in .pf-panel { transition: opacity 520ms var(--ease-out), transform 820ms var(--ease-out); }
.pf-card.is-in .pf-note { transition: opacity 420ms var(--ease-out) 1250ms, transform 640ms var(--ease-out) 1250ms; }
.pf-card.is-in .pf-q__row { transition: opacity 420ms var(--ease-out) calc(260ms + var(--i) * 120ms), transform 640ms var(--ease-out) calc(260ms + var(--i) * 120ms); }
.pf-card.is-in .pf-q__bar { transition: transform 620ms var(--ease-out) calc(460ms + var(--i) * 120ms); }
.pf-card.is-in .pf-wave__ticks { clip-path: inset(0 0 0 0); transition: clip-path 1100ms var(--ease-in-out) 260ms; }
.pf-card.is-in .pf-wave__at { transition: opacity 320ms var(--ease-out) 1050ms; }
.pf-card.is-in .pf-ch__bars i { transition: opacity 260ms var(--ease-out) calc(320ms + var(--r) * 180ms + var(--k) * 20ms), transform 420ms var(--ease-out) calc(320ms + var(--r) * 180ms + var(--k) * 20ms); }
.pf-card.is-in .pf-ch__n { transition: opacity 420ms var(--ease-out) calc(520ms + var(--r) * 180ms); }
.pf-card.is-in .pf-days__cols i { transition: transform 560ms var(--ease-out) calc(320ms + var(--k) * 42ms); }
.pf-card.is-in .pf-days__limit { transition: opacity 420ms var(--ease-out) 900ms; }

/* ----- narrower ----- */
@media (max-width: 1080px) {
  .feat__title, .feat__head .feat__lede { grid-column: 1 / -1; }
  .feat__head .feat__lede { margin-top: 24px; padding-bottom: 0; }
  .pf-card, .pf-card--rescue, .pf-card--views { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .pf { gap: 14px; }
  .pf-well { height: 300px; }
  .pf-text { padding: 20px 14px 22px; }
  .pf-name { font-size: 1.25rem; }
}
/*plat:end*/

/*proof:start*/
/* ==========================================================================
   10. PROOF: FIRMS ARE ALREADY CASHING RESCUED FEES (speed.ai's section and words)
   Their three written reviews, then their four client video testimonials.
   Light ground by default (it follows the dark platform section); .is-dark is the
   dark ground (?proof=dark, or ?theme=dark for the whole page). Every colour is a
   token, so .is-dark only swaps tokens.
   The reviews are speed.ai's, word for word. The films are a slider: one film in
   the middle of the container with its whole thumbnail showing, its neighbours
   smaller and dimmer either side, fading out at the container's edges. Without JS
   they are a plain grid.
   Each film opens in the page's video dialog (Vimeo loads only when asked for).
   Stars are ink, not yellow: yellow still means only a call Speed.ai caught.
   ========================================================================== */
.prf {
  --r-rgb: 10, 10, 11;
  --r-fg: var(--ink); --r-fg2: var(--graphite); --r-fg3: #77777D; --r-mark: #9C9C96;
  --r-card: linear-gradient(180deg, #FFFFFF 0%, #FBFBF9 100%);
  --r-card-light: linear-gradient(transparent, transparent);
  --r-card-rim: linear-gradient(180deg, rgba(10, 10, 11, .11) 0%, rgba(10, 10, 11, .16) 100%);
  --r-card-edge: 0 1px 1px rgba(10, 10, 11, .03), 0 3px 6px -2px rgba(10, 10, 11, .05), 0 14px 28px -18px rgba(10, 10, 11, .16);
  --r-card-on: 0 1px 1px rgba(10, 10, 11, .03), 0 8px 16px -6px rgba(10, 10, 11, .1), 0 34px 56px -26px rgba(10, 10, 11, .34);
  --r-line: rgba(10, 10, 11, .1);
  --r-well: #0B0B0C;
  --r-face-ring: 0 0 0 1px rgba(10, 10, 11, .1);
  --r-btn: #FFFFFF; --r-btn-line: rgba(10, 10, 11, .16);
  padding-block: clamp(96px, 11vw, 168px);
}
.prf.is-dark {
  --r-rgb: 255, 255, 255;
  --r-fg: var(--snow); --r-fg2: var(--mist); --r-fg3: #8A8A92; --r-mark: var(--mist-2);
  --r-card: linear-gradient(180deg, #17171A 0%, #0C0C0E 100%);
  --r-card-light: radial-gradient(92% 58% at 50% -10%, rgba(255, 255, 255, .085), rgba(255, 255, 255, 0) 70%);
  --r-card-rim: linear-gradient(180deg, rgba(255, 255, 255, .19) 0%, rgba(255, 255, 255, .05) 42%, rgba(255, 255, 255, .09) 100%);
  --r-card-edge: 0 26px 48px -34px rgba(0, 0, 0, .9);
  --r-card-on: 0 40px 70px -30px rgba(0, 0, 0, 1);
  --r-line: rgba(255, 255, 255, .09);
  --r-face-ring: 0 0 0 1px rgba(255, 255, 255, .16);
  --r-btn: rgba(5, 5, 6, .6); --r-btn-line: var(--line-dark-2);
  background: radial-gradient(56% 44% at 58% 46%, rgba(255, 255, 255, .034), rgba(255, 255, 255, 0) 72%), var(--carbon);
  color: var(--snow);
}
.prf__kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: .9375rem; font-weight: 450; letter-spacing: -.01em; line-height: 1.3; color: var(--r-fg); }
.prf__kicker::before, .prf__sub::before {
  content: ""; flex: none; width: 8px; height: 13px; background: var(--r-mark);
  clip-path: polygon(41.7% 0, 100% 0, 58.3% 100%, 0 100%);
}
.prf__title { max-width: 15em; }
.prf__dim { color: var(--r-fg3); }

/* ----- the shared card: a 1px rim, a soft gradient, a quiet shadow ----- */
.rv, .pv {
  position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 22px; border: 1px solid transparent;
  background: var(--r-card-light) padding-box, var(--r-card) padding-box, var(--r-card-rim) border-box; box-shadow: var(--r-card-edge);
}
/* cards in a row stand the same height */
.prf__rv > li, .pv-it { display: flex; min-width: 0; }
.prf__rv > li > *, .pv-it > * { flex: 1 1 auto; }

/* ----- three written reviews ----- */
.prf__rv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(48px, 5.6vw, 80px); }
.rv { margin: 0; padding: 28px 28px 24px; }
.rv__stars { display: flex; align-items: center; gap: 10px; font-size: .8125rem; line-height: 1; color: var(--r-fg3); font-variant-numeric: tabular-nums; }
.rv__stars span:first-child { font-size: .875rem; letter-spacing: 2.5px; color: var(--r-fg); }
.rv blockquote { margin: 0; padding-bottom: 28px; }
.rv__title { margin-top: 20px; font-size: 1.375rem; font-weight: 450; letter-spacing: -.026em; line-height: 1.25; color: var(--r-fg); text-wrap: balance; }
.rv__body { margin-top: 12px; font-size: 1rem; font-weight: 350; line-height: 1.55; color: var(--r-fg2); text-wrap: pretty; }
.rv__by { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--r-line); font-size: .8125rem; line-height: 1.4; color: var(--r-fg3); }
.rv__by img { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: var(--r-face-ring); }
.rv__by strong { display: block; font-size: .9375rem; font-weight: 450; letter-spacing: -.01em; color: var(--r-fg); }

/* ----- four client video testimonials: the cards (a plain grid until the slider is live) ----- */
.prf__sub { display: flex; align-items: center; gap: 10px; margin-top: clamp(56px, 6vw, 88px); font-size: .9375rem; font-weight: 450; letter-spacing: -.01em; line-height: 1.3; color: var(--r-fg); }
.prf__sub::after { content: ""; flex: 1; height: 1px; margin-left: 10px; background: var(--r-line); }
.pvs { margin-top: 28px; }
.prf__pv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pv { padding: 8px; color: inherit; text-decoration: none; transition: box-shadow 420ms var(--ease-out); }
.pv__img { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--r-well); }
.pv__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.pv__img::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); pointer-events: none; }
.pv__play {
  position: absolute; z-index: 1; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 16px 0 14px;
  border-radius: 999px; background: rgba(255, 255, 255, .96); box-shadow: 0 8px 20px -8px rgba(5, 5, 6, .7);
  font-size: .875rem; font-weight: 450; letter-spacing: -.005em; line-height: 1; color: #0A0A0B;
  transition: background-color 220ms var(--ease-out), color 220ms var(--ease-out), opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
}
.pv__play svg { width: 11px; height: 11px; }
/* no caption under the film: the thumbnail already carries the firm and the result (client,
   2026-11-11). The link keeps both as its name for screen readers. */
.pv:focus-visible { outline: 2px solid var(--r-fg); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .pv-it:not(.is-near) .pv:hover { box-shadow: var(--r-card-on); }
  .pv-it:not(.is-near) .pv:hover .pv__img img { transform: scale(1.025); }
  .pv-it:not(.is-near) .pv:hover .pv__play { background: #0A0A0B; color: #F5F5F4; }
}

/* ----- the slider (proof.js adds .is-live): every film sits in one cell and is moved by --d,
   its place relative to the one showing (-1 left, 0 showing, 1 right; beyond that, out of sight) ----- */
/* it stays inside the container: the neighbours keep their full colour next to the film showing
   and fade out over the outer part of the room beside it (--fade). The padding leaves the
   shadows room inside the clip. */
.pvs.is-live .prf__pv {
  --w: min(720px, 100% - 176px);
  --fade: calc(max(88px, (100% - 720px) / 2) * .62);
  grid-template-columns: minmax(0, 1fr); gap: 0; justify-items: center; touch-action: pan-y; -webkit-user-select: none; user-select: none;
  margin-block: -24px -72px; padding-block: 24px 72px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
}
.pvs.is-live .pv-it {
  --gap: 24px;
  grid-area: 1 / 1; width: var(--w); opacity: var(--op, 1);
  transform: translateX(calc(var(--d, 0) * (100% + var(--gap)) + var(--dx, 0px))) scale(var(--sc, 1)); transform-origin: var(--o, center) center;
  transition: transform 760ms cubic-bezier(.32, .72, 0, 1), opacity 460ms var(--ease-out);
}
.pvs.is-live .pv-it.is-near { --sc: .84; --op: .8; cursor: pointer; }
.pvs.is-live .pv-it.is-near[data-side="l"] { --o: right; }
.pvs.is-live .pv-it.is-near[data-side="r"] { --o: left; }
.pvs.is-live .pv-it.is-far { --sc: .84; --op: 0; pointer-events: none; }
.pvs.is-live .pv-it.is-jump, .pvs.is-drag .pv-it { transition: none; }
.pvs.is-live .pv-it.is-on .pv { box-shadow: var(--r-card-on); }
.pvs.is-live .pv-it:not(.is-on) .pv__play { opacity: 0; transform: translateY(6px); }
@media (hover: hover) and (pointer: fine) { .pvs.is-live .pv-it.is-near:hover { --op: 1; } }
html.is-static .pvs.is-live .pv-it { transition-duration: 1ms; }

/* its controls: back, one leaning bar a film, forward */
.pvs__nav { position: relative; z-index: 1; display: none; align-items: center; justify-content: center; gap: 18px; margin-top: 28px; }   /* above the slider's shadow room */
.pvs.is-live .pvs__nav { display: flex; }
.pvs__btn {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--r-btn-line); background: var(--r-btn); color: var(--r-fg);
  transition: border-color 180ms var(--ease-out), transform 160ms var(--ease-out);
}
.pvs__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pvs__btn:active { transform: scale(.94); }
.pvs__dots { display: flex; align-items: flex-end; gap: 2px; margin: 0; padding: 0 6px; list-style: none; }
.pvs__dots button { position: relative; display: block; width: 22px; height: 32px; }
.pvs__dots button::before {
  content: ""; position: absolute; left: 8px; bottom: 5px; width: 5px; height: 14px; border-radius: 1px; background: rgba(var(--r-rgb), .22);
  transform: skewX(-15deg); transform-origin: bottom left; transition: height 320ms var(--ease-out), background-color 320ms var(--ease-out);
}
.pvs__dots button[aria-current="true"]::before { height: 22px; background: var(--r-fg); }
@media (hover: hover) and (pointer: fine) {
  .pvs__btn:hover { border-color: rgba(var(--r-rgb), .5); }
  .pvs__dots button:not([aria-current="true"]):hover::before { background: rgba(var(--r-rgb), .5); }
}

/* ----- motion: armed by JS, each row rises once as it arrives ----- */
.prf-row.is-armed:not(.is-in) > * { opacity: 0; transform: translateY(14px); }
.prf-row.is-in > * { transition: opacity 520ms var(--ease-out) calc(var(--i) * 90ms), transform 820ms var(--ease-out) calc(var(--i) * 90ms); }

/* ----- narrower ----- */
@media (max-width: 1080px) {
  .prf__rv { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .rv { padding: 24px 24px 22px; }
  .rv blockquote { padding-bottom: 22px; }
  .rv__body { max-width: 38em; }
}
@media (max-width: 760px) {
  .prf__pv { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pvs.is-live .prf__pv { --w: calc(100% - 84px); --fade: 20px; }
  .pvs.is-live .pv-it { --gap: 10px; }
  .pv { padding: 6px; border-radius: 18px; }
  .pv__img { border-radius: 12px; }
  .pv__play { left: 10px; bottom: 10px; height: 32px; padding: 0 13px 0 11px; font-size: .8125rem; }
  .pvs__nav { margin-top: 22px; }
}
@media (max-width: 520px) {
  .rv { padding: 22px 20px 20px; }
  .rv__title { font-size: 1.25rem; }
}
/*proof:end*/

/*roi:start*/
/* ==========================================================================
   11. TURN MISSED OPPORTUNITIES INTO SIGNED CASES (speed.ai's calculator and words)
   One card: your firm's three numbers on the left, the estimate in a well on the
   right. The arithmetic is speed.ai's own (roi.js). Under the figure, 100 leaning
   bars stand for every 100 qualified leads: the ones you sign today, the ones lost,
   and the share of the lost ones the calculator counts as rescued. It moves only
   when you move a slider.
   Dark ground by default (it follows the light proof section); .on-paper is the
   light one (?roi=light, or ?theme=light for the whole page). Every colour is a
   token, so .on-paper only swaps tokens.
   Yellow is the rescued leads and the one primary button, nothing else.
   ========================================================================== */
.roi {
  --c-rgb: 255, 255, 255;
  --c-fg: var(--snow); --c-fg2: var(--mist); --c-fg3: #8A8A92; --c-mark: var(--mist-2);
  --c-ground: #111113;
  --c-frame: linear-gradient(180deg, #17171A 0%, #0C0C0E 100%);
  --c-frame-light: radial-gradient(70% 58% at 22% -10%, rgba(255, 255, 255, .075), rgba(255, 255, 255, 0) 70%);
  --c-frame-rim: linear-gradient(180deg, rgba(255, 255, 255, .19) 0%, rgba(255, 255, 255, .05) 42%, rgba(255, 255, 255, .09) 100%);
  --c-frame-edge: 0 26px 48px -34px rgba(0, 0, 0, .9);
  --c-well: linear-gradient(180deg, #060607 0%, #09090B 100%);
  --c-well-edge: inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 2px 8px rgba(0, 0, 0, .7);
  --c-well-tint: radial-gradient(62% 70% at 12% 100%, rgba(255, 242, 0, .1), rgba(255, 242, 0, 0) 72%), radial-gradient(70% 60% at 84% -6%, rgba(255, 255, 255, .055), rgba(255, 255, 255, 0) 72%);
  --c-line: rgba(255, 255, 255, .08);
  --c-track: rgba(255, 255, 255, .16); --c-fill: var(--snow);
  --c-thumb: linear-gradient(180deg, #FFFFFF 0%, #D9D9DD 100%); --c-thumb-edge: 0 1px 2px rgba(0, 0, 0, .6), 0 6px 14px -4px rgba(0, 0, 0, .8);
  --c-num: linear-gradient(180deg, #FFFFFF 30%, #8C8F98 125%);
  --c-signed: #B4B4BA; --c-lost: #34353B; --c-saved: var(--hl); --c-saved-band: transparent; --c-saved-glow: 0 0 12px var(--hl-glow);
  padding-block: clamp(96px, 11vw, 168px);
  background: radial-gradient(52% 40% at 70% 58%, rgba(255, 255, 255, .032), rgba(255, 255, 255, 0) 72%), var(--carbon);
  color: var(--snow);
}
.roi.on-paper {
  --c-rgb: 10, 10, 11;
  --c-fg: var(--ink); --c-fg2: var(--graphite); --c-fg3: #77777D; --c-mark: #9C9C96;
  --c-ground: #FFFFFF;
  --c-frame: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
  --c-frame-light: linear-gradient(transparent, transparent);
  --c-frame-rim: linear-gradient(180deg, rgba(10, 10, 11, .12) 0%, rgba(10, 10, 11, .16) 100%);
  --c-frame-edge: 0 1px 1px rgba(10, 10, 11, .03), 0 3px 6px -2px rgba(10, 10, 11, .05), 0 18px 36px -22px rgba(10, 10, 11, .18);
  --c-well: linear-gradient(180deg, #F3F3F0 0%, #EAEAE6 100%);
  --c-well-edge: inset 0 0 0 1px rgba(10, 10, 11, .05), inset 0 1px 2px rgba(10, 10, 11, .05);
  --c-well-tint: radial-gradient(62% 70% at 12% 100%, rgba(255, 242, 0, .34), rgba(255, 242, 0, 0) 72%), radial-gradient(70% 60% at 84% -6%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 72%);
  --c-line: rgba(10, 10, 11, .1);
  --c-track: rgba(10, 10, 11, .16); --c-fill: var(--ink);
  --c-thumb: linear-gradient(180deg, #232327 0%, #0A0A0B 100%); --c-thumb-edge: 0 1px 2px rgba(10, 10, 11, .2), 0 6px 12px -4px rgba(10, 10, 11, .4);
  --c-num: linear-gradient(180deg, #0A0A0B 30%, #55555C 130%);
  --c-signed: #8C8C86; --c-lost: #D3D3CD; --c-saved: var(--ink); --c-saved-band: var(--hl); --c-saved-glow: 0 0 0 0 transparent;
  background: var(--paper); color: var(--ink);
}
.roi__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
.roi__kicker { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: .9375rem; font-weight: 450; letter-spacing: -.01em; line-height: 1.3; color: var(--c-fg); }
.roi__kicker::before {
  content: ""; flex: none; width: 8px; height: 13px; background: var(--c-mark);
  clip-path: polygon(41.7% 0, 100% 0, 58.3% 100%, 0 100%);
}
.roi__title { grid-column: 1 / span 7; max-width: 12em; }
.roi__dim { color: var(--c-fg3); }
.roi__head .roi__lede { grid-column: 8 / -1; margin-top: 0; padding-bottom: .3em; color: var(--c-fg2); }

/* ----- the card: your numbers, then the estimate in its well ----- */
.rc {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: clamp(48px, 5.6vw, 80px); padding: 8px;
  border-radius: 22px; border: 1px solid transparent;
  background: var(--c-frame-light) padding-box, var(--c-frame) padding-box, var(--c-frame-rim) border-box; box-shadow: var(--c-frame-edge);
}

/* your firm's numbers: three sliders */
.rc-in { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); padding: 8px clamp(20px, 2.8vw, 40px); }
.rc-f { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; align-content: center; column-gap: 16px; padding-block: 26px 22px; }
.rc-f + .rc-f { border-top: 1px solid var(--c-line); }
.rc-f label { font-size: 1rem; font-weight: 450; letter-spacing: -.012em; line-height: 1.3; color: var(--c-fg); }
.rc-f output { font-size: 1.75rem; font-weight: 300; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--c-fg); white-space: nowrap; }
.rc-f__ends { grid-column: 1 / -1; display: flex; justify-content: space-between; margin: 0; font-size: .75rem; line-height: 1.3; font-variant-numeric: tabular-nums; color: var(--c-fg3); }
/* the slider: a hairline track, filled up to a thumb that leans like the logo's bars.
   --f is how far along it is (0 to 1); roi.js keeps it in step. */
.rc-f input[type="range"] {
  --tw: 12px;
  grid-column: 1 / -1; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 40px; margin: 6px 0 0; padding: 0;
  background: transparent; cursor: pointer; touch-action: pan-y; outline: 2px solid transparent; outline-offset: 2px; border-radius: 6px;
}
.rc-f input[type="range"]::-webkit-slider-runnable-track {
  height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, var(--c-fill) calc((100% - var(--tw)) * var(--f, 0) + var(--tw) / 2), var(--c-track) 0);
}
.rc-f input[type="range"]::-moz-range-track {
  height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, var(--c-fill) calc((100% - var(--tw)) * var(--f, 0) + var(--tw) / 2), var(--c-track) 0);
}
.rc-f input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: var(--tw); height: 26px; margin-top: -12px; border: 0; border-radius: 2px;
  background: var(--c-thumb); box-shadow: 0 0 0 4px var(--c-ground), var(--c-thumb-edge); transform: skewX(-15deg);
  transition: transform 160ms var(--ease-out);
}
.rc-f input[type="range"]::-moz-range-thumb {
  width: var(--tw); height: 26px; border: 0; border-radius: 2px;
  background: var(--c-thumb); box-shadow: 0 0 0 4px var(--c-ground), var(--c-thumb-edge); transform: skewX(-15deg);
  transition: transform 160ms var(--ease-out);
}
.rc-f input[type="range"]:active::-webkit-slider-thumb { transform: skewX(-15deg) scale(1.1); }
.rc-f input[type="range"]:active::-moz-range-thumb { transform: skewX(-15deg) scale(1.1); }
/* keyboard focus is a ring round the thumb (the input's own outline shows only in forced colours) */
.rc-f input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--c-ground), 0 0 0 5px var(--c-fg); }
.rc-f input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--c-ground), 0 0 0 5px var(--c-fg); }
@media (hover: hover) and (pointer: fine) {
  .rc-f input[type="range"]:hover::-webkit-slider-thumb { transform: skewX(-15deg) scale(1.1); }
  .rc-f input[type="range"]:hover::-moz-range-thumb { transform: skewX(-15deg) scale(1.1); }
}

/* the estimate */
.rc-out {
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: clamp(28px, 3.4vw, 48px); border-radius: 15px; container-type: inline-size;
  background: var(--c-well-tint), var(--c-well); box-shadow: var(--c-well-edge);
}
.rc-out__l { font-size: .9375rem; font-weight: 450; letter-spacing: -.01em; line-height: 1.3; color: var(--c-fg); }
.rc-out__n { margin-top: 18px; font-size: clamp(2.5rem, 13cqw, 5.5rem); font-weight: 300; letter-spacing: -.055em; line-height: .95; font-variant-numeric: tabular-nums; color: var(--c-fg); white-space: nowrap; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .rc-out__n { padding: .04em .06em .08em 0; background: var(--c-num); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
}
.rc-out__s { margin-top: 12px; max-width: 30em; font-size: 1.0625rem; font-weight: 350; line-height: 1.5; color: var(--c-fg2); text-wrap: pretty; }
.rc-out__s b { font-weight: 450; color: var(--c-fg); font-variant-numeric: tabular-nums; }

/* every 100 qualified leads, one bar each: signed, rescued, lost */
.rc-strip { margin-top: clamp(28px, 3.4vw, 44px); padding-top: 20px; border-top: 1px solid var(--c-line); }
.rc-strip__h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; font-size: .8125rem; line-height: 1.4; color: var(--c-fg3); }
.rc-strip__h > span:first-child { font-weight: 450; color: var(--c-fg); }
.rc-key { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.rc-key span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.rc-key span::before { content: ""; flex: none; width: 4px; height: 11px; border-radius: 1px; background: var(--c-signed); transform: skewX(-15deg); }
.rc-key .is-saved::before { background: var(--c-saved); box-shadow: 0 0 0 3px var(--c-saved-band), var(--c-saved-glow); }
.rc-key .is-lost::before { background: var(--c-lost); }
.rc-bars { display: grid; grid-template-columns: repeat(100, minmax(0, 1fr)); row-gap: 8px; margin-top: 16px; }
.rc-bars i { display: block; height: 30px; }
.rc-bars i::before {
  content: ""; display: block; width: 3px; max-width: 58%; height: 100%; margin-inline: auto; border-radius: 1px; background: var(--c-lost);
  transform: skewX(-15deg); transform-origin: bottom left; transition: background-color 160ms linear;
}
.rc-bars i[data-s="s"]::before { background: var(--c-signed); }
.rc-bars i[data-s="r"] { background: var(--c-saved-band); }
.rc-bars i[data-s="r"]::before { background: var(--c-saved); box-shadow: var(--c-saved-glow); }

.rc-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: auto; padding-top: clamp(28px, 3.4vw, 44px); }
.rc-cta__fine { font-size: .8125rem; line-height: 1.4; color: var(--c-fg2); }
.rc-fine { margin-top: 18px; font-size: .75rem; line-height: 1.5; color: var(--c-fg3); }
.rc-fine sup { font-size: .7em; vertical-align: .5em; }

/* ----- motion: armed by JS, the card rises once as it arrives and its bars stand up ----- */
.rc.is-armed:not(.is-in) { opacity: 0; transform: translateY(14px); }
.rc.is-in { transition: opacity 520ms var(--ease-out), transform 820ms var(--ease-out); }
.rc.is-armed:not(.is-in) .rc-bars i::before { transform: skewX(-15deg) scaleY(.15); opacity: 0; }
.rc.is-in .rc-bars i::before { transition: background-color 160ms linear, opacity 260ms var(--ease-out) calc(360ms + var(--k) * 7ms), transform 520ms var(--ease-out) calc(360ms + var(--k) * 7ms); }

/* ----- narrower ----- */
@media (max-width: 1080px) {
  .roi__title, .roi__head .roi__lede { grid-column: 1 / -1; }
  .roi__head .roi__lede { margin-top: 24px; padding-bottom: 0; }
  .rc { grid-template-columns: minmax(0, 1fr); }
  .rc-in { grid-template-rows: none; padding: 4px clamp(16px, 3vw, 32px) 12px; }
  .rc-f { padding-block: 24px 18px; }
}
@media (max-width: 640px) {
  .rc-in { padding-inline: 14px; }
  .rc-f output { font-size: 1.5rem; }
  .rc-out { padding: 24px 20px 26px; }
  .rc-out__s { font-size: 1rem; }
  .rc-bars { grid-template-columns: repeat(50, minmax(0, 1fr)); }
  .rc-bars i { height: 22px; }
  .rc-cta .btn { width: 100%; white-space: normal; text-align: center; min-height: 52px; padding-block: 12px; line-height: 1.2; }
  .rc-cta__fine { width: 100%; text-align: center; }
}
/*roi:end*/

/*pricing:start*/
/* ==========================================================================
   12. PRICING (speed.ai's three plans and words)
   Three cards on one grid, their parts lined up across the row (subgrid): a well
   with the plan's name, price and a strip of bars for its call-analysis allowance
   (one bar is 100 minutes a month), then the feature list, then the button.
   Pro is the raised card: dark on the light ground, lifted on the dark one, and
   it holds the one primary (yellow) button. Nothing else here is yellow.
   Light ground by default (it follows the dark calculator); .is-dark is the dark
   ground (?pricing=dark, or ?theme=dark). Every colour is a token.
   ========================================================================== */
.tiers {
  --l-fg: var(--ink); --l-fg2: var(--graphite); --l-fg3: #77777D; --l-mark: #9C9C96;
  --l-card: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
  --l-card-light: linear-gradient(transparent, transparent);
  --l-card-rim: linear-gradient(180deg, rgba(10, 10, 11, .12) 0%, rgba(10, 10, 11, .16) 100%);
  --l-card-edge: 0 1px 1px rgba(10, 10, 11, .03), 0 3px 6px -2px rgba(10, 10, 11, .05), 0 14px 28px -18px rgba(10, 10, 11, .16);
  --l-well: linear-gradient(180deg, #F3F3F0 0%, #EAEAE6 100%);
  --l-well-edge: inset 0 0 0 1px rgba(10, 10, 11, .05), inset 0 1px 2px rgba(10, 10, 11, .05);
  --l-well-light: radial-gradient(80% 70% at 86% -10%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 72%);
  --l-line: rgba(10, 10, 11, .1);
  --l-num: linear-gradient(180deg, #0A0A0B 30%, #55555C 130%);
  --l-bar: #0A0A0B; --l-bar-off: #D3D3CD;
  --l-btn: #0A0A0B; --l-btn-fg: #F5F5F4; --l-btn-line: transparent; --l-btn-hover: #26262A;
  --l-tag: #FFFFFF; --l-tag-line: rgba(10, 10, 11, .14);
  padding-block: clamp(96px, 11vw, 168px);
}
.tiers.is-dark, .tiers .pl-card--pro {
  --l-fg: var(--snow); --l-fg2: var(--mist); --l-fg3: #8A8A92; --l-mark: var(--mist-2);
  --l-card: linear-gradient(180deg, #17171A 0%, #0C0C0E 100%);
  --l-card-light: radial-gradient(92% 58% at 50% -10%, rgba(255, 255, 255, .085), rgba(255, 255, 255, 0) 70%);
  --l-card-rim: linear-gradient(180deg, rgba(255, 255, 255, .19) 0%, rgba(255, 255, 255, .05) 42%, rgba(255, 255, 255, .09) 100%);
  --l-card-edge: 0 26px 48px -34px rgba(0, 0, 0, .9);
  --l-well: linear-gradient(180deg, #060607 0%, #09090B 100%);
  --l-well-edge: inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 2px 8px rgba(0, 0, 0, .7);
  --l-well-light: radial-gradient(80% 70% at 86% -10%, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 72%);
  --l-line: rgba(255, 255, 255, .09);
  --l-num: linear-gradient(180deg, #FFFFFF 30%, #8C8F98 125%);
  --l-bar: #F5F5F4; --l-bar-off: #34353B;
  --l-btn: rgba(255, 255, 255, .06); --l-btn-fg: #F5F5F4; --l-btn-line: rgba(255, 255, 255, .2); --l-btn-hover: rgba(255, 255, 255, .12);
  --l-tag: rgba(255, 255, 255, .06); --l-tag-line: rgba(255, 255, 255, .2);
}
.tiers.is-dark { background: radial-gradient(56% 44% at 50% 52%, rgba(255, 255, 255, .034), rgba(255, 255, 255, 0) 72%), var(--carbon); color: var(--snow); }
/* Pro, the raised card: on paper it is the dark one, with a deeper shadow; on the dark ground it is lifted a tone */
.tiers .pl-card--pro {
  --l-card: linear-gradient(180deg, #1D1D21 0%, #0E0E10 100%);
  --l-card-edge: 0 2px 4px rgba(10, 10, 11, .2), 0 30px 50px -26px rgba(10, 10, 11, .55);
}
.tiers.is-dark .pl-card--pro {
  --l-card: linear-gradient(180deg, #26262B 0%, #151518 100%);
  --l-card-light: radial-gradient(92% 58% at 50% -10%, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 70%);
  --l-card-rim: linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .1) 42%, rgba(255, 255, 255, .16) 100%);
  --l-card-edge: 0 36px 60px -34px rgba(0, 0, 0, 1);
}
.tiers__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
.tiers__kicker { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: .9375rem; font-weight: 450; letter-spacing: -.01em; line-height: 1.3; color: var(--l-fg); }
.tiers__kicker::before, .pl-list li::before, .pl-tag::before {
  content: ""; flex: none; width: 8px; height: 13px; background: var(--l-mark);
  clip-path: polygon(41.7% 0, 100% 0, 58.3% 100%, 0 100%);
}
.tiers__title { grid-column: 1 / span 8; max-width: 15em; }
.tiers__dim { color: var(--l-fg3); }
.tiers__head .tiers__lede { grid-column: 9 / -1; margin-top: 0; padding-bottom: .3em; color: var(--l-fg2); }

/* ----- the three plans: one grid, each card's three parts on shared rows ----- */
.pl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr auto; column-gap: 20px; margin-top: clamp(48px, 5.6vw, 80px); }
.pl-card {
  grid-row: span 3; display: grid; grid-template-rows: subgrid; row-gap: 0; min-width: 0; padding: 8px; border-radius: 22px; border: 1px solid transparent;
  background: var(--l-card-light) padding-box, var(--l-card) padding-box, var(--l-card-rim) border-box; box-shadow: var(--l-card-edge); color: var(--l-fg);
}
.pl-well { display: flex; flex-direction: column; min-width: 0; padding: 24px 24px 22px; border-radius: 15px; background: var(--l-well-light), var(--l-well); box-shadow: var(--l-well-edge); }
.pl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; }
.pl-name { font-size: 1.375rem; font-weight: 450; letter-spacing: -.026em; line-height: 1.2; color: var(--l-fg); }
.pl-tag { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 5px 9px; border-radius: 999px; background: var(--l-tag); box-shadow: inset 0 0 0 1px var(--l-tag-line); font-size: .75rem; font-weight: 450; line-height: 1.3; color: var(--l-fg); white-space: nowrap; }
.pl-tag::before { width: 6px; height: 10px; background: var(--l-fg); }
.pl-for { margin-top: 6px; font-size: .9375rem; line-height: 1.45; color: var(--l-fg2); }
.pl-price { display: flex; align-items: baseline; gap: 10px; margin-top: 34px; }
.pl-price__n { font-size: clamp(2.75rem, 4.4vw, 3.75rem); font-weight: 300; letter-spacing: -.055em; line-height: .95; font-variant-numeric: tabular-nums; color: var(--l-fg); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .pl-price__n { padding: .04em .06em .08em 0; background: var(--l-num); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
}
.pl-price__per { font-size: .9375rem; line-height: 1.3; color: var(--l-fg3); }
.pl-note { min-height: 2.9em; margin-top: 8px; font-size: .8125rem; line-height: 1.45; color: var(--l-fg2); text-wrap: balance; }
/* the allowance: one bar is 100 minutes of call analysis a month */
.pl-min { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--l-line); }
.pl-min__bars { display: grid; grid-template-columns: repeat(50, minmax(0, 1fr)); height: 22px; }
.pl-min__bars i { width: 3px; max-width: 58%; height: 100%; margin-inline: auto; border-radius: 1px; background: var(--l-bar-off); transform: skewX(-15deg); transform-origin: bottom left; }
.pl-min__bars i.on { background: var(--l-bar); }
/* unlimited: the bars run on past the edge */
.pl-card--enterprise .pl-min__bars { -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent); mask-image: linear-gradient(90deg, #000 62%, transparent); }
.pl-min__l { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: .75rem; line-height: 1.4; color: var(--l-fg3); }
.pl-min__l span:last-child { font-weight: 450; color: var(--l-fg); white-space: nowrap; font-variant-numeric: tabular-nums; }

.pl-list { display: grid; align-content: start; gap: 12px; padding: 26px 20px 4px; }
.pl-list li { position: relative; padding-left: 22px; font-size: .9375rem; font-weight: 350; line-height: 1.45; color: var(--l-fg2); text-wrap: pretty; }
.pl-list li::before { position: absolute; left: 1px; top: .3em; width: 7px; height: 12px; background: var(--l-fg); }
.pl-list li:first-child { font-weight: 450; color: var(--l-fg); }
.pl-cta { display: grid; justify-items: center; gap: 10px; padding: 26px 12px 16px; }
.pl-cta .btn { width: 100%; }
.pl-btn { background: var(--l-btn); color: var(--l-btn-fg); box-shadow: inset 0 0 0 1px var(--l-btn-line); }
@media (hover: hover) and (pointer: fine) { .pl-btn:hover { background: var(--l-btn-hover); } }
.pl-cta__fine { font-size: .8125rem; line-height: 1.4; color: var(--l-fg3); }
/* the plan without the small print keeps its button on the same line as the others */
.pl-cta:not(:has(.pl-cta__fine))::after { content: ""; height: 1.1375rem; }

/* ----- motion: armed by JS, the cards rise once as they arrive and each allowance fills ----- */
.pl.is-armed:not(.is-in) > li { opacity: 0; transform: translateY(14px); }
.pl.is-in > li { transition: opacity 520ms var(--ease-out) calc(var(--i) * 90ms), transform 820ms var(--ease-out) calc(var(--i) * 90ms); }
.pl.is-armed:not(.is-in) .pl-min__bars i.on { background: var(--l-bar-off); }
.pl.is-in .pl-min__bars i.on { transition: background-color 200ms linear calc(480ms + var(--i) * 90ms + var(--k) * 14ms); }

/* ----- narrower ----- */
@media (max-width: 1279px) {
  .pl-for { min-height: 2.9em; }
}
@media (max-width: 1080px) {
  .tiers__title, .tiers__head .tiers__lede { grid-column: 1 / -1; }
  .tiers__head .tiers__lede { margin-top: 24px; padding-bottom: 0; }
}
@media (max-width: 960px) {
  .pl { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 14px; max-width: 560px; }
  .pl-card { grid-row: auto; grid-template-rows: none; }
  .pl-for, .pl-note { min-height: 0; }
  .pl-note:empty { display: none; }
  .pl-min { margin-top: 26px; }
  .pl-cta:not(:has(.pl-cta__fine))::after { display: none; }
}
@media (max-width: 520px) {
  .pl-well { padding: 20px 18px 18px; }
  .pl-list { padding: 22px 14px 2px; }
  .pl-min__bars i { width: 2px; }
}
/*pricing:end*/

/*faq:start*/
/* ==========================================================================
   13. FAQ (speed.ai's nine questions and answers)
   The heading on the left stays in view while the list scrolls past it. The list is
   one card; each question is a row, and the open one sits in a well with its answer.
   Native <details>: it works without JS. With JS (faq.js) an answer opens and closes
   with its height. Dark ground by default (it follows the light pricing section);
   .on-paper is the light one (?faq=light, or ?theme=light). Every colour is a token.
   No yellow here: nothing in this section is a caught call or the primary button.
   ========================================================================== */
.faqs {
  --q-rgb: 255, 255, 255;
  --q-fg: var(--snow); --q-fg2: #C6C6CC; --q-fg3: #8A8A92; --q-mark: var(--mist-2);
  --q-card: linear-gradient(180deg, #17171A 0%, #0C0C0E 100%);
  --q-card-light: radial-gradient(92% 30% at 50% -4%, rgba(255, 255, 255, .075), rgba(255, 255, 255, 0) 70%);
  --q-card-rim: linear-gradient(180deg, rgba(255, 255, 255, .19) 0%, rgba(255, 255, 255, .05) 42%, rgba(255, 255, 255, .09) 100%);
  --q-card-edge: 0 26px 48px -34px rgba(0, 0, 0, .9);
  --q-well: linear-gradient(180deg, #060607 0%, #09090B 100%);
  --q-well-edge: inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 2px 8px rgba(0, 0, 0, .7);
  --q-line: rgba(255, 255, 255, .08);
  --q-hover: rgba(255, 255, 255, .03);
  --q-x: rgba(255, 255, 255, .06); --q-x-line: rgba(255, 255, 255, .16);
  padding-block: clamp(96px, 11vw, 168px);
  background: radial-gradient(48% 36% at 22% 40%, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 72%), var(--carbon);
  color: var(--snow);
}
.faqs.on-paper {
  --q-rgb: 10, 10, 11;
  --q-fg: var(--ink); --q-fg2: #2B2B2F; --q-fg3: #77777D; --q-mark: #9C9C96;
  --q-card: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
  --q-card-light: linear-gradient(transparent, transparent);
  --q-card-rim: linear-gradient(180deg, rgba(10, 10, 11, .12) 0%, rgba(10, 10, 11, .16) 100%);
  --q-card-edge: 0 1px 1px rgba(10, 10, 11, .03), 0 3px 6px -2px rgba(10, 10, 11, .05), 0 18px 36px -22px rgba(10, 10, 11, .18);
  --q-well: linear-gradient(180deg, #F3F3F0 0%, #EAEAE6 100%);
  --q-well-edge: inset 0 0 0 1px rgba(10, 10, 11, .05), inset 0 1px 2px rgba(10, 10, 11, .05);
  --q-line: rgba(10, 10, 11, .1);
  --q-hover: rgba(10, 10, 11, .025);
  --q-x: #FFFFFF; --q-x-line: rgba(10, 10, 11, .16);
  background: var(--paper); color: var(--ink);
}
.faqs__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.faqs__head { grid-column: 1 / span 4; position: sticky; top: calc(var(--masthead-h, 72px) + 40px); }
.faqs__kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: .9375rem; font-weight: 450; letter-spacing: -.01em; line-height: 1.3; color: var(--q-fg); }
.faqs__kicker::before {
  content: ""; flex: none; width: 8px; height: 13px; background: var(--q-mark);
  clip-path: polygon(41.7% 0, 100% 0, 58.3% 100%, 0 100%);
}
.faqs__title { max-width: 7em; }
.faqs__dim { color: var(--q-fg3); }

/* ----- the list: one card, a row a question ----- */
.fq {
  grid-column: 5 / -1; padding: 8px; border-radius: 22px; border: 1px solid transparent;
  background: var(--q-card-light) padding-box, var(--q-card) padding-box, var(--q-card-rim) border-box; box-shadow: var(--q-card-edge);
}
.fq-it { position: relative; border-radius: 15px; }
/* a hairline between rows, dropped beside the open one */
.fq-it + .fq-it::before { content: ""; position: absolute; inset: 0 20px auto; height: 1px; background: var(--q-line); transition: opacity 200ms var(--ease-out); }
.fq-it[open]::before, .fq-it[open] + .fq-it::before { opacity: 0; }
.fq-it[open] { background: var(--q-well); box-shadow: var(--q-well-edge); }
.fq-it summary { display: grid; grid-template-columns: 34px minmax(0, 1fr) 32px; align-items: center; column-gap: 12px; min-height: 76px; padding: 16px 20px; border-radius: 15px; cursor: pointer; list-style: none; transition: background-color 180ms var(--ease-out); }
.fq-it summary::-webkit-details-marker { display: none; }
.fq-it summary:focus-visible { outline: 2px solid var(--q-fg); outline-offset: -4px; }
.fq-n { font-size: .75rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--q-fg3); }
.fq-q { font-size: 1.1875rem; font-weight: 450; letter-spacing: -.02em; line-height: 1.3; color: var(--q-fg); text-wrap: pretty; }
/* the sign: a plus whose upright lies down when the answer is open */
.fq-x { position: relative; width: 32px; height: 32px; border-radius: 999px; background: var(--q-x); box-shadow: inset 0 0 0 1px var(--q-x-line); transition: box-shadow 180ms var(--ease-out); }
.fq-x::before, .fq-x::after { content: ""; position: absolute; top: 50%; left: 50%; width: 11px; height: 1.5px; margin: -.75px 0 0 -5.5px; border-radius: 1px; background: var(--q-fg); transition: transform 320ms var(--ease-out); }
.fq-x::after { transform: rotate(90deg); }
.fq-it[open] .fq-x::after { transform: rotate(0deg); }
.fq-it.is-closing .fq-x::after { transform: rotate(90deg); }
@media (hover: hover) and (pointer: fine) {
  .fq-it:not([open]) summary:hover { background: var(--q-hover); }
  .fq-it summary:hover .fq-x { box-shadow: inset 0 0 0 1px rgba(var(--q-rgb), .45); }
}
.fq-a { overflow: hidden; }
.fq-a p { max-width: 44em; padding: 0 64px 26px 66px; font-size: 1.0625rem; font-weight: 350; line-height: 1.6; color: var(--q-fg2); text-wrap: pretty; }
.fq-a sup { font-size: .6em; vertical-align: .6em; }

/* ----- motion: armed by JS, the list rises once as it arrives ----- */
.fq.is-armed:not(.is-in) { opacity: 0; transform: translateY(14px); }
.fq.is-in { transition: opacity 520ms var(--ease-out), transform 820ms var(--ease-out); }

/* ----- narrower ----- */
@media (max-width: 1080px) {
  .faqs__head { grid-column: 1 / -1; position: static; }
  .faqs__title { max-width: none; }
  .fq { grid-column: 1 / -1; margin-top: clamp(40px, 5.6vw, 64px); }
}
@media (max-width: 640px) {
  .fq { padding: 6px; border-radius: 20px; }
  .fq-it summary { grid-template-columns: minmax(0, 1fr) 32px; min-height: 68px; padding: 16px 14px; }
  .fq-n { display: none; }
  .fq-q { font-size: 1.0625rem; }
  .fq-it + .fq-it::before { inset-inline: 14px; }
  .fq-a p { padding: 0 14px 22px; font-size: 1rem; }
}
/*faq:end*/

/*security:start*/
/* ==========================================================================
   14. SECURITY: BUILT TO PROTECT PRIVILEGED DATA (speed.ai's section and words)
   Their four points as cards, each with a small drawing in its well:
     soc  the SOC 2 Type II badge (speed.ai's own image) on quiet rings
     enc  a call, a transcript and a record, each masked and locked
     baa  the agreement, with the privilege clause marked
     env  three separate environments; the one in the middle is yours
   Light ground by default (it follows the dark FAQ); .is-dark is the dark ground
   (?security=dark, or ?theme=dark). Every colour is a token, so .is-dark only
   swaps tokens. No yellow: nothing here is a caught call or the primary button.
   ========================================================================== */
.trust {
  --t-rgb: 10, 10, 11;
  --t-fg: var(--ink); --t-fg2: var(--graphite); --t-fg3: #77777D; --t-mark: #9C9C96;
  --t-card: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
  --t-card-light: linear-gradient(transparent, transparent);
  --t-card-rim: linear-gradient(180deg, rgba(10, 10, 11, .12) 0%, rgba(10, 10, 11, .16) 100%);
  --t-card-edge: 0 1px 1px rgba(10, 10, 11, .03), 0 3px 6px -2px rgba(10, 10, 11, .05), 0 14px 28px -18px rgba(10, 10, 11, .16);
  --t-well: linear-gradient(180deg, #F3F3F0 0%, #EAEAE6 100%);
  --t-well-edge: inset 0 0 0 1px rgba(10, 10, 11, .05), inset 0 1px 2px rgba(10, 10, 11, .05);
  --t-well-light: radial-gradient(70% 70% at 50% 0%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 72%);
  --t-panel: linear-gradient(180deg, #FFFFFF 0%, #FDFDFC 100%);
  --t-panel-edge: inset 0 0 0 1px rgba(10, 10, 11, .08), 0 1px 2px rgba(10, 10, 11, .05), 0 18px 32px -18px rgba(10, 10, 11, .24);
  --t-line: rgba(10, 10, 11, .09);
  --t-ui: #2B2B2F; --t-off: #D9D9D3; --t-on: #0A0A0B; --t-dot: #8C8C86;
  --t-ring: rgba(10, 10, 11, .09); --t-clause: rgba(10, 10, 11, .05);
  --t-badge: drop-shadow(0 12px 18px rgba(60, 40, 140, .28));
  padding-block: clamp(96px, 11vw, 168px);
}
.trust.is-dark {
  --t-rgb: 255, 255, 255;
  --t-fg: var(--snow); --t-fg2: var(--mist); --t-fg3: #8A8A92; --t-mark: var(--mist-2);
  --t-card: linear-gradient(180deg, #17171A 0%, #0C0C0E 100%);
  --t-card-light: radial-gradient(92% 58% at 50% -10%, rgba(255, 255, 255, .085), rgba(255, 255, 255, 0) 70%);
  --t-card-rim: linear-gradient(180deg, rgba(255, 255, 255, .19) 0%, rgba(255, 255, 255, .05) 42%, rgba(255, 255, 255, .09) 100%);
  --t-card-edge: 0 26px 48px -34px rgba(0, 0, 0, .9);
  --t-well: linear-gradient(180deg, #060607 0%, #09090B 100%);
  --t-well-edge: inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 2px 8px rgba(0, 0, 0, .7);
  --t-well-light: radial-gradient(70% 70% at 50% 0%, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 72%);
  --t-panel: linear-gradient(180deg, rgba(31, 31, 35, .97) 0%, rgba(18, 18, 21, .97) 100%);
  --t-panel-edge: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .05), 0 20px 40px -16px rgba(0, 0, 0, .8);
  --t-line: rgba(255, 255, 255, .08);
  --t-ui: #DADADD; --t-off: #34353B; --t-on: #F5F5F4; --t-dot: #7A7D86;
  --t-ring: rgba(255, 255, 255, .08); --t-clause: rgba(255, 255, 255, .07);
  --t-badge: drop-shadow(0 14px 22px rgba(0, 0, 0, .6));
  background: radial-gradient(56% 44% at 60% 56%, rgba(255, 255, 255, .034), rgba(255, 255, 255, 0) 72%), var(--carbon);
  color: var(--snow);
}
.trust__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
.trust__kicker { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: .9375rem; font-weight: 450; letter-spacing: -.01em; line-height: 1.3; color: var(--t-fg); }
.trust__kicker::before, .ts-name::before, .ts-sheet__c::before {
  content: ""; flex: none; width: 8px; height: 13px; background: var(--t-mark);
  clip-path: polygon(41.7% 0, 100% 0, 58.3% 100%, 0 100%);
}
.trust__title { grid-column: 1 / span 7; max-width: 11em; }
.trust__dim { color: var(--t-fg3); }
.trust__side { grid-column: 8 / -1; padding-bottom: .3em; }
.trust__side .trust__lede { margin-top: 0; color: var(--t-fg2); }
.trust__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding-bottom: 3px; border-bottom: 1px solid rgba(var(--t-rgb), .3); font-size: 1rem; font-weight: 450; letter-spacing: -.01em; line-height: 1.3; color: var(--t-fg); text-decoration: none; transition: border-color 180ms var(--ease-out); }
.trust__link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .trust__link:hover { border-color: var(--t-fg); }
  .trust__link:hover svg { transform: translateX(3px); }
}

/* ----- the four cards ----- */
.ts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: clamp(48px, 5.6vw, 80px); }
.ts-card {
  display: flex; flex-direction: column; min-width: 0; padding: 8px; border-radius: 22px; border: 1px solid transparent;
  background: var(--t-card-light) padding-box, var(--t-card) padding-box, var(--t-card-rim) border-box; box-shadow: var(--t-card-edge);
}
.ts-well { position: relative; height: 216px; border-radius: 15px; overflow: hidden; background: var(--t-well-light), var(--t-well); }
.ts-well::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; box-shadow: var(--t-well-edge); pointer-events: none; }
.ts-text { padding: 22px 16px 24px; }
.ts-name { display: flex; align-items: baseline; gap: 10px; font-size: 1.25rem; font-weight: 450; letter-spacing: -.024em; line-height: 1.2; color: var(--t-fg); }
.ts-desc { margin-top: 10px; font-size: .9375rem; font-weight: 350; line-height: 1.5; color: var(--t-fg2); text-wrap: pretty; }
.ts-panel { background: var(--t-panel); box-shadow: var(--t-panel-edge); font-size: .75rem; line-height: 1.35; color: var(--t-ui); }
.ts-lock { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--t-fg); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ts-lock rect { fill: var(--t-fg); stroke: none; }

/* 1. the badge on quiet rings */
.ts-rings { position: absolute; left: 50%; top: 50%; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 37px, var(--t-ring) 37px 38px); -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 68%); mask-image: radial-gradient(circle, #000 30%, transparent 68%); }
.ts-badge { position: absolute; left: 50%; top: 50%; width: 104px; height: auto; transform: translate(-50%, -50%); filter: var(--t-badge); }

/* 2. a call, a transcript and a record, each masked and locked */
.ts-enc { position: absolute; inset: 26px 20px auto; border-radius: 13px; }
.ts-enc__h { display: flex; gap: 6px; padding: 11px 13px 10px; border-bottom: 1px solid var(--t-line); }
.ts-enc__h span { padding: 2px 9px 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(var(--t-rgb), .16); font-size: .6875rem; line-height: 1.35; color: var(--t-ui); white-space: nowrap; }
.ts-enc li { display: grid; grid-template-columns: 62px minmax(0, 1fr) 14px; align-items: center; column-gap: 10px; padding: 10px 13px; }
.ts-enc li + li { border-top: 1px solid var(--t-line); }
.ts-enc li > span { font-weight: 450; color: var(--t-fg); }
.ts-enc li > i { height: 8px; background: radial-gradient(circle at 3px 50%, var(--t-dot) 0 1.6px, transparent 2.1px) 0 50% / 8px 8px repeat-x; }

/* 3. the agreement, its privilege clause marked; the sheet runs past the foot of the well */
.ts-sheet { position: absolute; inset: 26px 28px -24px; padding: 16px 16px 0; border-radius: 10px 10px 0 0; }
.ts-sheet__t { margin-bottom: 14px; font-size: .75rem; font-weight: 500; letter-spacing: -.005em; color: var(--t-fg); }
.ts-sheet i { display: block; height: 5px; margin-top: 8px; border-radius: 3px; background: var(--t-off); }
.ts-sheet i.s { width: 62%; }
.ts-sheet__c { display: flex; align-items: center; gap: 8px; margin: 12px -8px 4px; padding: 7px 8px; border-radius: 7px; background: var(--t-clause); font-size: .6875rem; font-weight: 450; line-height: 1.3; color: var(--t-fg); }
.ts-sheet__c::before { width: 6px; height: 10px; background: var(--t-fg); }

/* 4. three environments, each its own; yours is the one in the middle */
.ts-envs { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; }
.ts-env { flex: none; width: 150px; height: 112px; padding: 12px 12px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(var(--t-rgb), .12); display: flex; flex-direction: column; justify-content: flex-end; }
.ts-env.is-you { height: 140px; box-shadow: var(--t-panel-edge); }
.ts-env p { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: auto; font-size: .75rem; font-weight: 450; color: var(--t-fg); }
.ts-env__bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; height: 46px; }
.ts-env__bars i { width: 3px; height: calc(var(--h) * 1%); margin-inline: auto; border-radius: 1px; background: var(--t-off); transform: skewX(-15deg); transform-origin: bottom left; }
.ts-env.is-you .ts-env__bars { height: 56px; }
.ts-env.is-you .ts-env__bars i { background: var(--t-on); }

/* ----- motion: armed by JS, the cards rise once as they arrive ----- */
.ts.is-armed:not(.is-in) > li { opacity: 0; transform: translateY(14px); }
.ts.is-in > li { transition: opacity 520ms var(--ease-out) calc(var(--i) * 80ms), transform 820ms var(--ease-out) calc(var(--i) * 80ms); }

/* ----- narrower ----- */
@media (max-width: 1280px) {
  .ts { gap: 16px; }
  .ts-enc { inset-inline: 14px; }
  .ts-sheet { inset-inline: 20px; }
}
@media (max-width: 1080px) {
  .trust__title, .trust__side { grid-column: 1 / -1; }
  .trust__side { margin-top: 24px; padding-bottom: 0; }
  .ts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ts-enc { inset-inline: 28px; }
  .ts-sheet { inset-inline: 44px; }
}
@media (max-width: 640px) {
  .ts { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ts-well { height: 204px; }
  .ts-text { padding: 20px 14px 22px; }
  .ts-enc { inset-inline: 20px; }
  .ts-sheet { inset-inline: 36px; }
}
/*security:end*/

/*close:start*/
/* ==========================================================================
   15. THE CLOSE: RESCUE LOST REVENUE WITH SPEED.AI (speed.ai's band and final words)
   Their four outcomes as a still band, then their closing heading at display size
   with their sentence and button beside it. Along the foot, a field of leaning bars
   runs into the footer: a bar is a call, the yellow ones are rescued. It closes the
   page the way the hero opens it, without WebGL.
   Dark ground by default (it follows the light security section and leads into the
   dark footer); .on-paper is the light one (?close=light, or ?theme=light).
   Yellow: the rescued bars, the rescued figure, the primary button.
   ========================================================================== */
.fin {
  --f-rgb: 255, 255, 255;
  --f-fg: var(--snow); --f-fg2: var(--mist); --f-fg3: #8A8A92; --f-mark: var(--mist-2);
  --f-line: rgba(255, 255, 255, .1);
  --f-bar: #26272C; --f-bar-m: #55585F; --f-saved: var(--hl); --f-saved-mark: 0 0 18px var(--hl-glow), 0 0 4px rgba(255, 242, 0, .5);
  --f-fig: var(--hl); --f-fig-mark: transparent;
  --f-glow: radial-gradient(60% 90% at 78% 100%, rgba(255, 242, 0, .07), rgba(255, 242, 0, 0) 70%);
  position: relative; overflow: hidden; padding-block: clamp(56px, 6vw, 88px) 0;
  background: var(--f-glow), radial-gradient(50% 44% at 26% 30%, rgba(255, 255, 255, .034), rgba(255, 255, 255, 0) 72%), var(--carbon);
  color: var(--snow);
}
.fin.on-paper {
  --f-rgb: 10, 10, 11;
  --f-fg: var(--ink); --f-fg2: var(--graphite); --f-fg3: #77777D; --f-mark: #9C9C96;
  --f-line: rgba(10, 10, 11, .12);
  --f-bar: #D9D9D3; --f-bar-m: #A8A8A2; --f-saved: var(--ink); --f-saved-mark: 0 0 0 3px var(--hl);
  --f-fig: var(--ink); --f-fig-mark: var(--hl);
  --f-glow: radial-gradient(60% 90% at 78% 100%, rgba(255, 242, 0, .3), rgba(255, 242, 0, 0) 70%);
  background: var(--f-glow), var(--paper); color: var(--ink);
}
/* speed.ai's four outcomes, set still */
.fin__band { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 36px; padding-bottom: 22px; border-bottom: 1px solid var(--f-line); }
.fin__band li { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 450; letter-spacing: -.012em; line-height: 1.3; color: var(--f-fg); white-space: nowrap; }
.fin__band li::before {
  content: ""; flex: none; width: 8px; height: 13px; background: var(--f-mark);
  clip-path: polygon(41.7% 0, 100% 0, 58.3% 100%, 0 100%);
}
.fin__main { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; margin-top: clamp(64px, 8vw, 128px); }
.fin__title { grid-column: 1 / span 8; font-size: clamp(3rem, 7.2vw, 6.75rem); font-weight: 360; letter-spacing: -.052em; line-height: .96; color: var(--f-fg); text-wrap: balance; }
.fin__dim { display: block; color: var(--f-fg3); }
.fin__side { grid-column: 9 / -1; padding-bottom: .5em; }
.fin__lede { font-size: 1.1875rem; font-weight: 300; line-height: 1.5; color: var(--f-fg2); text-wrap: pretty; }
.fin__lede strong { padding: 0 .16em; border-radius: 3px; background: var(--f-fig-mark); font-weight: 450; font-variant-numeric: tabular-nums; color: var(--f-fig); white-space: nowrap; }
.fin__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 28px; }
.fin__cta .btn { gap: 10px; min-height: 56px; padding-inline: 26px; font-size: 1.0625rem; }
.fin__cta .btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .fin__cta .btn:hover svg { transform: translateX(3px); } }
.fin__fine { font-size: .8125rem; line-height: 1.4; color: var(--f-fg2); }

/* the field along the foot: one bar a call, taller towards the right */
.fin__bars { display: grid; grid-template-columns: repeat(120, minmax(0, 1fr)); align-items: end; height: clamp(120px, 15vw, 232px); margin-top: clamp(56px, 7vw, 104px); padding-inline: max(8px, 1.2vw); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.fin__bars i { width: 5px; max-width: 46%; height: calc(var(--h) * 1%); margin-inline: auto; border-radius: 1px 1px 0 0; background: var(--f-bar); transform: skewX(-15deg); transform-origin: bottom left; }
.fin__bars i.m { background: var(--f-bar-m); }
.fin__bars i.r { background: var(--f-saved); box-shadow: var(--f-saved-mark); }

/* ----- motion: armed by JS, the words rise once and the field stands up ----- */
.fin.is-armed:not(.is-in) :is(.fin__band, .fin__title, .fin__side) { opacity: 0; transform: translateY(14px); }
.fin.is-in :is(.fin__band, .fin__title, .fin__side) { transition: opacity 520ms var(--ease-out) var(--d, 0ms), transform 820ms var(--ease-out) var(--d, 0ms); }
.fin.is-in .fin__title { --d: 90ms; }
.fin.is-in .fin__side { --d: 180ms; }
.fin.is-armed:not(.is-in) .fin__bars i { transform: skewX(-15deg) scaleY(0); }
.fin.is-in .fin__bars i { transition: transform 720ms var(--ease-out) calc(160ms + var(--k) * 6ms); }

/* ----- narrower ----- */
@media (max-width: 1080px) {
  .fin__title, .fin__side { grid-column: 1 / -1; }
  .fin__side { max-width: 34em; margin-top: 32px; padding-bottom: 0; }
}
@media (max-width: 760px) {
  .fin__band { gap: 10px 24px; }
  .fin__band li { font-size: .9375rem; }
  .fin__bars { grid-template-columns: repeat(60, minmax(0, 1fr)); }
  .fin__bars i:nth-child(even) { display: none; }
  .fin__bars i { width: 4px; }
}
@media (max-width: 520px) {
  .fin__cta .btn { width: 100%; white-space: normal; text-align: center; }
  .fin__fine { width: 100%; text-align: center; }
}

/* ==========================================================================
   THE CLOSE, THREE VARIANTS (?close=a|b|c; close.js sets data-v). The words are
   the same in all three. With no flag, the version above shows.
   ========================================================================== */
.fin__field, .fin__mark, .fin__lead, .fin__num, .fin__lede--b { display: none; }
.fin__field { height: clamp(230px, 31vw, 460px); margin-top: clamp(24px, 3vw, 48px); }

/* ----- a, d, e, f: the field is live (a canvas, close.js). The words stay as they are.
   a  a skyline along the foot; d  the field in depth, to a horizon; e  a wave about a centre
   line; f  a wall of calls under a lens. A missed call the pointer passes is rescued. ----- */
.fin:is([data-v="a"], [data-v="d"], [data-v="e"], [data-v="f"], [data-v="j"], [data-v="k"], [data-v="l"]) .fin__bars { display: none; }
.fin:is([data-v="a"], [data-v="d"], [data-v="e"], [data-v="f"], [data-v="j"], [data-v="k"], [data-v="l"]) .fin__main { margin-top: clamp(56px, 6.4vw, 104px); }
.fin[data-v="d"] .fin__field { height: clamp(260px, 37vw, 560px); margin-top: 0; }
.fin[data-v="e"] .fin__field { height: clamp(200px, 28vw, 420px); margin-block: clamp(28px, 3.4vw, 56px) clamp(36px, 4.4vw, 72px); }
.fin:is([data-v="a"], [data-v="d"], [data-v="e"], [data-v="f"], [data-v="j"], [data-v="k"], [data-v="l"]) .fin__field {
  display: block; width: 100%; touch-action: pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* ----- b: the figure at display size, built of leaning bars; yellow sweeps across it once ----- */
.fin { --f-n0: #2A2B30; --f-n1: var(--hl); --f-n-glow: drop-shadow(0 0 34px rgba(255, 242, 0, .16)); --f-n-band: transparent; }
.fin.on-paper { --f-n0: #CFCFC8; --f-n1: var(--ink); --f-n-glow: none; --f-n-band: var(--hl); }
.fin[data-v="b"] { padding-bottom: clamp(48px, 5vw, 80px); }
.fin[data-v="b"] .fin__bars, .fin[data-v="b"] .fin__lede:not(.fin__lede--b) { display: none; }
.fin[data-v="b"] .fin__main { container-type: inline-size; align-items: start; margin-top: clamp(56px, 6vw, 96px); }
.fin[data-v="b"] .fin__title { grid-column: 1 / -1; font-size: clamp(2.5rem, 4.6vw, 4.5rem); letter-spacing: -.045em; line-height: 1; }
.fin[data-v="b"] .fin__lead { display: block; grid-column: 1 / -1; margin-top: clamp(48px, 6vw, 96px); font-size: clamp(1.0625rem, 1.5vw, 1.375rem); font-weight: 300; line-height: 1.4; color: var(--f-fg2); }
.fin[data-v="b"] .fin__num {
  display: block; grid-column: 1 / -1; position: relative; width: max-content; margin: .05em 0 0 -.035em;
  font-size: 23.4cqw; font-weight: 600; letter-spacing: -.05em; line-height: .88; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fin__num-0, .fin__num-1 > span {
  --sb: max(.0135em, 2.5px); --sg: max(.008em, 1.5px); display: block; padding-right: .06em;
  background: repeating-linear-gradient(105deg, var(--n) 0 var(--sb), transparent var(--sb) calc(var(--sb) + var(--sg)));
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.fin__num-0 { --n: var(--f-n0); }
.fin__num-1 { position: absolute; inset: 0; filter: var(--f-n-glow); }
.fin__num-1 > span { --n: var(--f-n1); -webkit-mask-image: linear-gradient(180deg, #000 38%, rgba(0, 0, 0, .5)); mask-image: linear-gradient(180deg, #000 38%, rgba(0, 0, 0, .5)); }
.fin.on-paper .fin__num-1 > span { -webkit-mask-image: none; mask-image: none; }
.fin__num-1::before { content: ""; position: absolute; inset: 56% -.4% 9% 1.4%; border-radius: 4px; background: var(--f-n-band); }
.fin__num-1 > span, .fin__num-1::before { clip-path: polygon(0 0, 107% 0, 100% 100%, 0 100%); }
.fin__num-1 > span { position: relative; }
.fin[data-v="b"] .fin__side { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 48px; max-width: none; margin-top: clamp(18px, 2.2vw, 34px); padding-bottom: 0; }
.fin[data-v="b"] .fin__lede--b { display: block; font-size: clamp(1.0625rem, 1.5vw, 1.375rem); color: var(--f-fg2); }
.fin[data-v="b"] .fin__cta { margin-top: 0; }
.fin.is-armed:not(.is-in) .fin__lead { opacity: 0; transform: translateY(14px); }
.fin.is-in .fin__lead { transition: opacity 520ms var(--ease-out) 140ms, transform 820ms var(--ease-out) 140ms; }
.fin.is-armed:not(.is-lit) :is(.fin__num-1 > span, .fin__num-1::before) { clip-path: polygon(0 0, 0 0, -7% 100%, 0 100%); }
.fin.is-lit :is(.fin__num-1 > span, .fin__num-1::before) { transition: clip-path 1500ms var(--ease-in-out) 120ms; }

/* ----- c: one yellow panel, with the three bars of the logo in ink at poster size ----- */
.fin[data-v="c"] { padding-bottom: clamp(16px, 2vw, 28px); }
.fin[data-v="c"] .fin__bars { display: none; }
.fin[data-v="c"] .fin__panel {
  --f-fg: var(--ink); --f-fg2: rgba(10, 10, 11, .78); --f-fg3: rgba(10, 10, 11, .5); --f-mark: var(--ink); --f-line: rgba(10, 10, 11, .18);
  --f-fig: var(--hl); --f-fig-mark: var(--ink);
  position: relative; isolation: isolate; overflow: hidden; border-radius: 28px;
  padding: clamp(22px, 2.8vw, 40px) clamp(22px, 3.6vw, 56px) clamp(36px, 5vw, 80px);
  background: radial-gradient(560px circle at var(--mx, 22%) var(--my, 0%), rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 70%), linear-gradient(140deg, #FFF868 0%, #FFF200 44%, #F3E200 100%);
  color: var(--ink);
}
.fin[data-v="c"] .fin__main { align-items: start; margin-top: clamp(56px, 7vw, 120px); }
.fin[data-v="c"] .fin__title { grid-column: 1 / span 8; font-size: clamp(2.75rem, 6vw, 6rem); }
.fin[data-v="c"] .fin__side { grid-column: 1 / span 6; margin-top: clamp(28px, 3vw, 44px); padding-bottom: 0; }
.fin[data-v="c"] .fin__lede { font-weight: 400; }
.fin[data-v="c"] .fin__lede strong { padding: .04em .3em; }
.fin[data-v="c"] .fin__cta .btn, .fin[data-v="c"] .fin__cta .btn:active { background: var(--ink); color: var(--snow); }
@media (hover: hover) and (pointer: fine) { .fin[data-v="c"] .fin__cta .btn:hover { background: #242428; } }
.fin[data-v="c"] .fin__mark { display: block; position: absolute; z-index: -1; top: -12%; bottom: -12%; right: 4%; width: 31%; }
.fin__mark i { position: absolute; top: 0; bottom: 0; left: calc(var(--n) * 36%); width: 25%; background: linear-gradient(180deg, #2A2A2E, var(--ink) 55%); transform: skewX(-15deg); }
.fin__mark i:nth-child(1) { --n: 0; } .fin__mark i:nth-child(2) { --n: 1; } .fin__mark i:nth-child(3) { --n: 2; }
.fin[data-v="c"].is-armed:not(.is-in) .fin__panel { opacity: 0; transform: translateY(28px) scale(.985); }
.fin[data-v="c"].is-in .fin__panel { transition: opacity 600ms var(--ease-out), transform 900ms var(--ease-out); }
.fin[data-v="c"].is-armed:not(.is-in) .fin__mark i { transform: skewX(-15deg) translateY(104%); }
.fin[data-v="c"].is-in .fin__mark i { transition: transform 1000ms var(--ease-out) calc(220ms + var(--n) * 110ms); }

@media (max-width: 1080px) {
  .fin[data-v="c"] .fin__title, .fin[data-v="c"] .fin__side { grid-column: 1 / -1; }
  .fin[data-v="c"] .fin__panel { padding-bottom: clamp(190px, 30vw, 300px); }
  .fin[data-v="c"] .fin__mark { top: auto; bottom: -40px; right: 2%; width: min(62%, 420px); height: clamp(190px, 30vw, 300px); }
}
@media (max-width: 760px) {
  .fin[data-v="b"] .fin__lede--b { flex: 1 1 100%; }
  .fin[data-v="c"] .fin__panel { border-radius: 22px; }
}

/* ==========================================================================
   THE WORDMARK (was ?close=g). Client, 2026-11-11: "use option f and option g in footer
   but reduce the reflections to just 2". It closes the footer: speed.ai's wordmark at
   full width with two outlined echoes trailing up the lean. The footer is always dark,
   so there is one set of colours. (h and i were removed.)
   ========================================================================== */
.fin__logo {
  --f-wm-line: rgba(255, 255, 255, .5); --f-wm-0: #F5F5F4; --f-wm-1: #303137; --f-wm-bar: var(--hl); --f-wm-edge: transparent; --f-wm-glow: drop-shadow(0 0 1.4cqw rgba(255, 242, 0, .4)); --sp: 1;
  display: block; container-type: inline-size; margin-top: clamp(40px, 5vw, 80px); padding-inline: max(16px, 2.4vw);
}
.fin__logo-in { position: relative; padding-top: 9cqw; }
.fin__wm-defs { position: absolute; }
.fin__wm { display: block; width: 100%; height: auto; aspect-ratio: 857 / 82.5; overflow: visible; }
.fin__wm--echo {
  position: absolute; left: 0; bottom: 0; fill: none; stroke: var(--f-wm-line); stroke-width: .8;
  opacity: calc(.6 - var(--e) * .105);
  transform: translate(calc(var(--e) * var(--sp) * 1.02cqw), calc(var(--e) * var(--sp) * -3.8cqw));
}
.fin__wm--solid { position: relative; }
.fin__wm-l { fill: url(#fin-sheen); }
.fin__wm-b { fill: var(--f-wm-bar); stroke: var(--f-wm-edge); stroke-width: 3; paint-order: stroke; filter: var(--f-wm-glow); }
.fin__sheen-0 { stop-color: var(--f-wm-0); }
.fin__sheen-1 { stop-color: var(--f-wm-1); }
.fin__logo.is-armed:not(.is-lit) .fin__wm--solid { opacity: 0; transform: translateY(22%); }
.fin__logo.is-armed:not(.is-lit) .fin__wm--echo { opacity: 0; }
.fin__logo.is-lit .fin__wm--solid { transition: opacity 600ms var(--ease-out), transform 1000ms var(--ease-out); }
.fin__logo.is-lit .fin__wm--echo { transition: opacity 700ms var(--ease-out) calc(260ms + var(--e) * 70ms); }
@media (max-width: 760px) { .fin__wm--echo { stroke-width: 1.8; } .fin__wm-b { stroke-width: 5; } }

/* ==========================================================================
   THE CLOSE, FOURTH ROUND (?close=j|k|l). Canvas scenes with physics and light
   (close.js); the words stay as they are.
   ========================================================================== */
/* ----- j: light speed, behind the words ----- */
.fin[data-v="j"] { padding-bottom: clamp(104px, 13vw, 200px); }
.fin[data-v="j"] .wrap { position: relative; z-index: 1; }
.fin[data-v="j"] .fin__field {
  position: absolute; inset: 0; z-index: 0; height: 100%; margin: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 88%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 88%, transparent);
}
/* ----- k: liquid along the foot ----- */
.fin[data-v="k"] .fin__field { height: clamp(240px, 30vw, 440px); margin-top: 0; -webkit-mask-image: none; mask-image: none; }
/* ----- l: eclipse ----- */
.fin[data-v="l"] .fin__field { height: clamp(250px, 33vw, 500px); margin-top: 0; -webkit-mask-image: linear-gradient(180deg, transparent, #000 34%); mask-image: linear-gradient(180deg, transparent, #000 34%); }
/*close:end*/

/* ---------- review: one section at a time ----------
   Sections not yet approved are hidden (shown with ?all). 3D is opt-in per section
   ([data-3d]); the director marks the sections it drives .is-live, and every rule that
   used to assume one global field is scoped to them, so the rest keep their drawings. */
html:not(.review-all) [data-pending] { display: none !important; }