/* tempo-waitlist-steps — the block's colours (blocks/tempo-waitlist-steps), the values
   Matt's 7 Oct spec names. Declared on :host so they live in the block's shadow root;
   the site's --sds-* tokens (ink, blue, grays, type) inherit in beside them. Bundled
   ahead of block.css by publish-block.mjs (block.json "css"). */
:host {
  --twl-surface: #fff;
  --twl-on-ink: #fff;
  --twl-ink: #0f141b;
  --twl-ink-hover: #2a313c;
  --twl-tempo-navy: #002755;
  --twl-line: #dee3eb;
  --twl-line-soft: #eef1f5;
  --twl-control-line: #cdd3dd;
  --twl-control-line-hover: #9aa3b2;
  --twl-muted-ink: #5b6474;
  --twl-fill-soft: #f3f5f8;
  --twl-blue-soft: #e7effc;
  --twl-mint-soft: #d4efe3;
  --twl-green-ink: #0b6b43;
  --twl-error: #c4320a;
  --twl-focus-ring: rgba(15, 94, 230, 0.16);
  --twl-focus-ring-strong: rgba(15, 94, 230, 0.32);
  --twl-card-shadow: rgba(15, 23, 42, 0.04);
  --twl-wash-a: #edf2fd;
  --twl-wash-b: #edf4fa;
  --twl-wash-c: #e7f5ee;
}

/* The Tempo agent mark (src/scenes/tempo-mark.js) - four circles, the logo at rest, in Tempo's
   navy - and its five animated states, ported from the Tempo motion system's engine
   (github.com/mattcabaj/tempo-AgentAnimations, index.html v0.2). Every value is a function of
   the scene clock --ti-t, so a held step, the reduced-motion still and the motion audit all see
   the frame the clock says. Geometry is the engine's 1000 x 1000 artboard: a circle's cx, cy
   and r are set in its user units.

   Each live mark carries --a (start) and --b (end, for a continuous state); --tau is seconds
   into the state, --tm seconds into its loop. As in the exports, an intro eases the logo into
   the loop's first frame, the loop runs from there, and the outro eases whatever frame it is
   on back into the logo (so a state can end mid-cycle). A circle's pose is --X, --Y, --R;
   --rx/--ry are its rest (the logo). eio is the engine's ease-in-out cubic, written out where
   it is used:
     eio(x) = 4 min(x,.5)^3 + .5 - (2 - 2 max(x,.5))^3 / 2                                       */
.sk-tm { display: inline-block; flex: none; vertical-align: middle; color: var(--ui-tempo); }
.sk-tm circle, .sk-tm path { fill: currentColor; }
/* a live mark below 48px: the logo's true outline over the circles while the mark is at rest
   (--rest, set by each state below); still, where the maths is missing */
.sk-tm__rest { opacity: 1; }
.sk-tm--live > svg > g { opacity: 0; }
/* the live mark: a slot the size the old mark took, the engine's canvas centred on it and let
   out over its edges so the loops have room */
.sk-tm--live { position: relative; width: var(--s); height: var(--s); }
.sk-tm--live > svg { position: absolute; left: 50%; top: 50%; width: calc(var(--s) * 1.9); height: calc(var(--s) * 1.9);
  transform: translate(-50%, -50%); overflow: visible; }
.sk-tm circle:nth-child(1) { --rx: 473.50; --ry: 390.03; }
.sk-tm circle:nth-child(2) { --rx: 443.98; --ry: 532.59; }
.sk-tm circle:nth-child(3) { --rx: 582.51; --ry: 577.38; }
.sk-tm circle:nth-child(4) { --rx: 648.90; --ry: 413.37; }

/* where the maths is missing, the circles keep their attributes: the logo, still */
@supports (width: calc(mod(3, 2) * exp(0) * pow(1, 2) * cos(0deg) * 1px)) {
  .sk-tm--live { --tau: max(0, var(--ti-t) - var(--a)); --rest: 0; }
  .sk-tm--live .sk-tm__rest { opacity: var(--rest); }
  .sk-tm--live > svg > g { opacity: calc(1 - var(--rest)); }
  .sk-tm--live circle { cx: calc(var(--X) * 1px); cy: calc(var(--Y) * 1px); r: calc(var(--R) * 1px); }

  /* --- Thinking: a Newton's cradle. Four balls hang in a row (pivot 297.5 above, string
     232.5); an end ball swings out and back each .55 s, the ends taking turns. The intro eases
     the logo into the row, the outro eases the row back into the logo (thinking-intro/-outro;
     the loop is exported a frame in, 1/30 s, so it starts there too). --------------------- */
  .sk-tm--think { --w: clamp(0, var(--tau) / .9, 1); --wo: clamp(0, (var(--ti-t) - var(--b) + .8) / .8, 1);
    --k: calc((4 * pow(min(var(--w), .5), 3) + .5 - pow(2 - 2 * max(var(--w), .5), 3) / 2)
      * (1 - (4 * pow(min(var(--wo), .5), 3) + .5 - pow(2 - 2 * max(var(--wo), .5), 3) / 2)));
    --tm: calc(max(0, var(--tau) - .9) + .0333);
    --sw: calc(sin(mod(var(--tm), .55) / .55 * 180deg) * .6);
    --isr: clamp(0, (mod(var(--tm), 1.1) - .55) * 1000, 1);
    --rest: clamp(0, 1 - var(--k) * 50, 1); }
  .sk-tm--think circle { --mx: calc(var(--bx) + 232.5 * sin(var(--ai) * 1rad)); --my: calc(297.5 + 232.5 * cos(var(--ai) * 1rad));
    --X: calc(var(--rx) + (var(--mx) - var(--rx)) * var(--k)); --Y: calc(var(--ry) + (var(--my) - var(--ry)) * var(--k));
    --R: calc(75 - 7.5 * var(--k)); }
  .sk-tm--think circle:nth-child(1) { --bx: 279.5; --ai: calc(var(--sw) * (var(--isr) - 1)); }
  .sk-tm--think circle:nth-child(2) { --bx: 426.5; --ai: 0; }
  .sk-tm--think circle:nth-child(3) { --bx: 573.5; --ai: 0; }
  .sk-tm--think circle:nth-child(4) { --bx: 720.5; --ai: calc(var(--sw) * var(--isr)); }

  /* --- Tool use: the orbital chain. One lobe anchors the centre; the next orbits it once per
     6 s, the next orbits that twice the other way, and the node orbits the last three times; the
     anchor leans toward the moving mass with a faint wobble. Eased in and out of the logo. -- */
  .sk-tm--tool { --w: clamp(0, var(--tau) / .567, 1); --wo: clamp(0, (var(--ti-t) - var(--b) + .7) / .7, 1);
    --k: calc((4 * pow(min(var(--w), .5), 3) + .5 - pow(2 - 2 * max(var(--w), .5), 3) / 2)
      * (1 - (4 * pow(min(var(--wo), .5), 3) + .5 - pow(2 - 2 * max(var(--wo), .5), 3) / 2)));
    --tm: max(0, var(--tau) - .567); --th: calc(var(--tm) * 60deg);
    --kbx: calc(500 + 135 * cos(var(--th))); --kby: calc(500 + 135 * sin(var(--th)));
    --kcx: calc(var(--kbx) + 117 * cos(var(--th) * 2)); --kcy: calc(var(--kby) - 117 * sin(var(--th) * 2));
    --kdx: calc(var(--kcx) + 112.5 * cos(var(--th) * 3)); --kdy: calc(var(--kcy) + 112.5 * sin(var(--th) * 3));
    --kax: calc(500 + .06 * ((var(--kbx) + var(--kcx) + var(--kdx)) / 3 - 500) + 4.5 * sin(var(--tm) * 1.7rad));
    --kay: calc(500 + .06 * ((var(--kby) + var(--kcy) + var(--kdy)) / 3 - 500) + 4.5 * cos(var(--tm) * 1.3rad));
    --rest: clamp(0, 1 - var(--k) * 50, 1); }
  .sk-tm--tool circle { --X: calc(var(--rx) + (var(--mx) - var(--rx)) * var(--k)); --Y: calc(var(--ry) + (var(--my) - var(--ry)) * var(--k));
    --R: calc(75 + (var(--mr) - 75) * var(--k)); }
  .sk-tm--tool circle:nth-child(1) { --mx: var(--kax); --my: var(--kay); --mr: 54; }
  .sk-tm--tool circle:nth-child(2) { --mx: var(--kbx); --my: var(--kby); --mr: 54; }
  .sk-tm--tool circle:nth-child(3) { --mx: var(--kcx); --my: var(--kcy); --mr: 54; }
  .sk-tm--tool circle:nth-child(4) { --mx: var(--kdx); --my: var(--kdy); --mr: 43.5; }

  /* --- Waiting: the relay. The mark opens, the node and the bottom-right lobe arc round each
     other through a half turn and trade places while the other two lobes breathe outward, then
     it closes on the logo; 3 s a cycle, beginning and ending at rest. ----------------------- */
  .sk-tm--wait { --p: calc(mod(var(--tau), 3) / 3); --sep: pow(sin(var(--p) * 180deg), 1.25);
    --rot: calc((4 * pow(min(var(--p), .5), 3) + .5 - pow(2 - 2 * max(var(--p), .5), 3) / 2) * 180deg);
    --rr: calc(88.47 - 19.47 * var(--sep));
    --wmx: calc(615.705 + 74.88 * var(--sep)); --wmy: calc(495.375 - 4.27 * var(--sep));
    --wvx: calc((0.37522 * cos(var(--rot)) + 0.92694 * sin(var(--rot))) * var(--rr));
    --wvy: calc((0.37522 * sin(var(--rot)) - 0.92694 * cos(var(--rot))) * var(--rr));
    --rest: max(clamp(0, (var(--a) - var(--ti-t)) * 30, 1), clamp(0, (var(--ti-t) - var(--b)) * 30, 1)); }
  .sk-tm--wait circle { --R: 75; }
  .sk-tm--wait circle:nth-child(1) { --X: calc(473.50 - 8.44 * var(--sep)); --Y: calc(390.03 - 35 * var(--sep)); }
  .sk-tm--wait circle:nth-child(2) { --X: calc(443.98 - 31.22 * var(--sep)); --Y: calc(532.59 + 17.92 * var(--sep)); }
  .sk-tm--wait circle:nth-child(3) { --X: calc(var(--wmx) - var(--wvx)); --Y: calc(var(--wmy) - var(--wvy)); }
  .sk-tm--wait circle:nth-child(4) { --X: calc(var(--wmx) + var(--wvx)); --Y: calc(var(--wmy) + var(--wvy)); }

  /* --- Reveal: from a single point, four forms rise onto a ring (bowing toward a figure 8,
     nearer ones larger), make one decelerating turn together and spiral into the logo. ---- */
  .sk-tm--reveal { --p: clamp(0, var(--tau) / 2.8, 1);
    --e: calc(4 * pow(min(var(--p), .5), 3) + .5 - pow(2 - 2 * max(var(--p), .5), 3) / 2);
    --g: clamp(0, var(--p) / .5, 1); --grow: calc(4 * pow(min(var(--g), .5), 3) + .5 - pow(2 - 2 * max(var(--g), .5), 3) / 2);
    --q2: clamp(0, (var(--p) - .5) / .5, 1); --set: calc(4 * pow(min(var(--q2), .5), 3) + .5 - pow(2 - 2 * max(var(--q2), .5), 3) / 2);
    --spin: calc((1 - pow(1 - var(--p), 3)) * 360deg);
    --spark: calc(1 - pow(1 - clamp(0, var(--tau) / .42, 1), 3));
    --ring: calc(177 * var(--grow));
    --rest: clamp(0, (var(--p) - .97) / .03, 1); }
  .sk-tm--reveal circle { --ang: calc(var(--q) * 90deg + var(--spin));
    --ux: cos(var(--ang)); --uy: calc(sin(var(--ang)) * (.28 + 1.152 * cos(var(--ang))));
    --X: calc(500 + var(--ux) * var(--ring) + (var(--rx) - 500 - var(--ux) * var(--ring)) * var(--set));
    --Y: calc(500 + var(--uy) * var(--ring) + (var(--ry) - 500 - var(--uy) * var(--ring)) * var(--set));
    --R: calc((69 + 6 * var(--e)) * (.55 + .45 * var(--spark)) * (1 + .4 * sin(var(--ang)) * (1 - var(--set)))); }
  .sk-tm--reveal circle:nth-child(1) { --q: 0; }
  .sk-tm--reveal circle:nth-child(2) { --q: 1; }
  .sk-tm--reveal circle:nth-child(3) { --q: 2; }
  .sk-tm--reveal circle:nth-child(4) { --q: 3; }

  /* --- Complete: a pulse circles the mark twice, eight beats speeding up while the cluster
     winds round, then the last beat lands on the node - it swells, the whole mark pops and
     spins once, upright on the logo. (The engine's wrapped Gaussian over the pulse's angle is
     written as exp(k (cos d - 1)), the same bump without an atan2.) ----------------------- */
  .sk-tm--done { --p: clamp(0, var(--tau) / 2.8, 1);
    --th: calc((.18 * pow(clamp(0, var(--p) / .62, 1), 2) + .82 * (1 - pow(1 - clamp(0, (var(--p) - .58) / .42, 1), 3))) * 360deg);
    --u: clamp(0, var(--p) / .6, 1); --phi: calc(-30.19deg + 1080deg * pow(var(--u), 2.2)); --spd: pow(var(--u), 1.2);
    --amp: calc(clamp(0, var(--p) / .05, 1) * (1 - clamp(0, (var(--p) - .56) / .08, 1)));
    --vs: pow(sin(clamp(0, (var(--p) - .58) / .42, 1) * 180deg), 2);
    --rest: clamp(0, 1 - min(var(--p), 1 - var(--p)) * 60, 1); }
  .sk-tm--done circle {
    --X: calc(537.222 + var(--vx) * cos(var(--th)) - var(--vy) * sin(var(--th)));
    --Y: calc(478.342 + var(--vx) * sin(var(--th)) + var(--vy) * cos(var(--th)));
    --prox: calc(exp(3.556 * (cos(var(--phi) - var(--a0) - var(--th)) - 1)) * var(--amp));
    --R: calc(75 * (1 + (.14 + .45 * var(--spd)) * var(--prox)) * (1 + var(--pop) * var(--vs)) * (1 + .14 * var(--vs))); }
  .sk-tm--done circle:nth-child(1) { --vx: -63.72; --vy: -88.31; --a0: -103.55deg; --pop: 0; }
  .sk-tm--done circle:nth-child(2) { --vx: -93.24; --vy: 54.25; --a0: 149.81deg; --pop: 0; }
  .sk-tm--done circle:nth-child(3) { --vx: 45.29; --vy: 99.04; --a0: 43.16deg; --pop: 0; }
  .sk-tm--done circle:nth-child(4) { --vx: 111.68; --vy: -64.97; --a0: -30.19deg; --pop: .5; }
}

/* tempo-waitlist-steps — the block's own stylesheet, inside its shadow root.
   Ported from the site's native waitlist-steps section (skedulo-marketing-website
   WaitlistSteps.module.css, Matt's 7 Oct spec): same class names, same values. The
   site's --sds-* tokens and its @font-face fonts inherit into the shadow tree; the
   Tempo mark is the kit's own (src/scenes/tempo-mark.css, bundled ahead of this). */

:host {
  display: block;
  --ui-tempo: var(--twl-tempo-navy);
  color: var(--sds-ink, var(--twl-ink));
  font-family: var(--sds-body, var(--font-secondary, system-ui, sans-serif));
}
*, *::before, *::after { box-sizing: border-box; }
button, input, select { font-family: inherit; }
a { color: inherit; }

.inner {
  margin: 0 auto;
  max-width: 1216px;
}

/* the heading on the ground: eyebrow (ebook-eyebrow), h1 (display-48), lede (18px, ink lead) */
.eyebrow {
  color: var(--sds-ink);
  font-family: var(--sds-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.88px;
  line-height: 12px;
  margin: 0;
  text-transform: uppercase;
}
.grouped {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: var(--sds-space-heading-lede, 16px);
  width: 100%;
}
.h1 {
  color: var(--sds-ink);
  font-family: var(--sds-display);
  font-size: 48px;
  font-weight: 500;
  letter-spacing: -0.48px;
  line-height: 1.1;
  margin: 0;
  overflow-wrap: break-word;
}
.lede {
  color: var(--sds-gray-600);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  max-width: 720px;
}
.lede strong { color: var(--sds-ink); font-weight: 500; }
@media (max-width: 767px) {
  .h1 { font-size: 36px; letter-spacing: -0.36px; }
}

/* the kit mark in the request card's header: a 29px slot */
.markSlot { display: inline-flex; flex: none; height: 29px; width: 29px; align-items: center; justify-content: center; }


.ground {
  background: linear-gradient(115deg, var(--twl-wash-a) 0%, var(--twl-wash-b) 42%, var(--twl-wash-c) 100%);
}

.inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 56px 64px 96px;
  width: 100%;
}

.head {
  display: flex;
  flex-direction: column;
  gap: var(--sds-space-heading-eyebrow, 16px);
  scroll-margin-top: 96px; /* clear of the site's sticky header when the success view scrolls in */
}
/* the success view's eyebrow: a solid green tick and "Request received" */
.eyebrow.success {
  align-items: center;
  color: var(--twl-green-ink);
  display: inline-flex;
  gap: 8px;
}
.eyebrow.success .tick { flex: none; height: 16px; width: 16px; }
.eyebrow.success .tick circle { fill: var(--twl-green-ink); }
.eyebrow.success .tick path { fill: none; stroke: var(--twl-on-ink); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.h1:focus { outline: none; }

.cards {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 24px;
  align-items: stretch;
}

.card {
  background: var(--twl-surface);
  border: 1px solid var(--twl-line);
  border-radius: 12px;
  box-shadow: 0 1px 2px var(--twl-card-shadow);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.formCard {
  padding: 36px 40px 40px;
  gap: 32px;
}

/* ── Step body + motion ── */

.stepBody {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  animation: stepIn 300ms cubic-bezier(0, 0, 0.2, 1) both;
}

.stepBody[data-direction='back'] {
  animation-name: stepBack;
}

@keyframes stepIn {
  from {
    opacity: 0;
    transform: translateX(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes stepBack {
  from {
    opacity: 0;
    transform: translateX(-14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stepBody,
  .stepBody[data-direction='back'] {
    animation: none;
  }
}

.stepCount {
  color: var(--sds-gray-500);
  font-family: var(--sds-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  margin: 0;
  text-transform: uppercase;
}

.stepTitle {
  color: var(--sds-ink);
  font-family: var(--sds-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.28px;
  line-height: 1.2;
  margin: 0;
}

.stepLine {
  color: var(--sds-gray-600);
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 16px;
}

.fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pair {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.labelRow {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.label {
  color: var(--sds-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  padding: 0;
}

.tag {
  background: var(--twl-blue-soft);
  border-radius: 4px;
  color: var(--sds-blue);
  font-family: var(--sds-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  line-height: 16px;
  padding: 0 6px;
  text-transform: uppercase;
  white-space: nowrap;
}

.input {
  background: var(--twl-surface);
  border: 1px solid var(--twl-control-line);
  border-radius: 6px;
  color: var(--sds-ink);
  font: inherit;
  font-size: 16px;
  height: 44px;
  padding: 0 12px;
  scroll-margin-bottom: 160px;
  width: 100%;
}

.input::placeholder {
  color: var(--sds-gray-400);
}

.input:focus {
  border-color: var(--sds-blue);
  box-shadow: 0 0 0 3px var(--twl-focus-ring);
  outline: none;
}

.input[aria-invalid='true'] {
  border-color: var(--twl-error);
}

.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--twl-muted-ink) 50%), linear-gradient(135deg, var(--twl-muted-ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
  padding-right: 36px;
}

.error {
  color: var(--twl-error);
  font-size: 14px;
  line-height: 20px;
  margin: 0;
}

.note {
  color: var(--sds-gray-600);
  font-size: 14px;
  line-height: 20px;
  margin: 0;
}

/* ── Chips (native radio groups) ── */

.chipGroup {
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.scale {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.chip {
  position: relative;
}

.chipInput {
  height: 1px;
  margin: 0;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.chipLabel {
  align-items: center;
  background: var(--twl-surface);
  border: 1px solid var(--twl-control-line);
  border-radius: 6px;
  color: var(--sds-ink);
  cursor: pointer;
  display: flex;
  font-size: 14px;
  height: 40px;
  justify-content: center;
  line-height: 1;
  padding: 0 14px;
  position: relative;
  scroll-margin-bottom: 160px;
  white-space: nowrap;
}

.chipLabel:hover {
  border-color: var(--twl-control-line-hover);
}

.chipInput:checked + .chipLabel {
  background: var(--twl-fill-soft);
  border-color: var(--sds-ink);
}

.chipInput:focus-visible + .chipLabel {
  box-shadow: 0 0 0 3px var(--twl-focus-ring);
  border-color: var(--sds-blue);
}

.corners {
  display: none;
  inset: 3px;
  pointer-events: none;
  position: absolute;
}

.chipInput:checked + .chipLabel .corners {
  display: block;
}

.corners > span {
  background: var(--sds-ink);
  height: 3px;
  position: absolute;
  width: 3px;
}

.corners > span:nth-child(1) {
  left: 0;
  top: 0;
}
.corners > span:nth-child(2) {
  right: 0;
  top: 0;
}
.corners > span:nth-child(3) {
  bottom: 0;
  left: 0;
}
.corners > span:nth-child(4) {
  bottom: 0;
  right: 0;
}

/* ── Foot + buttons ── */

.foot {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.primary,
.back,
.secondary {
  align-items: center;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  height: 44px;
  justify-content: center;
  padding: 0 20px;
  text-decoration: none;
}

.primary {
  background: var(--sds-ink);
  border: 1px solid var(--sds-ink);
  color: var(--twl-on-ink);
}

.primary:hover {
  background: var(--twl-ink-hover);
}

.back,
.secondary {
  background: var(--twl-surface);
  border: 1px solid var(--twl-control-line);
  color: var(--sds-ink);
}

.back:hover,
.secondary:hover {
  border-color: var(--twl-control-line-hover);
}

.primary:disabled,
.back:disabled,
.secondary:disabled {
  cursor: default;
  opacity: 0.6;
}

.primary:focus-visible,
.back:focus-visible,
.secondary:focus-visible {
  box-shadow: 0 0 0 3px var(--twl-focus-ring-strong);
  outline: none;
}

.secondary {
  align-self: flex-start;
  margin-top: 8px;
}

.disclaimer {
  color: var(--sds-gray-600);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

.disclaimer a {
  color: inherit;
  text-decoration: underline;
}

.formError {
  color: var(--twl-error);
  font-size: 14px;
  line-height: 20px;
  margin: 0;
}

.turnstile {
  min-height: 65px;
}

/* product-news consent: one optional box on the last step, unticked by default */
.consent {
  align-items: flex-start;
  color: var(--sds-ink);
  cursor: pointer;
  display: flex;
  font-size: 14px;
  gap: 10px;
  line-height: 20px;
  min-height: 24px;
  padding: 2px 0;
}

.consentBox {
  accent-color: var(--sds-ink);
  cursor: pointer;
  flex-shrink: 0;
  height: 20px;
  margin: 0;
  width: 20px;
}

.consentBox:focus-visible {
  border-radius: 3px;
  box-shadow: 0 0 0 3px var(--twl-focus-ring-strong);
  outline: none;
}

/* ── The Tempo request card ── */

.tempoCard {
  overflow: hidden;
}

.tabStrip {
  align-items: stretch;
  background: var(--twl-fill-soft);
  border-bottom: 1px solid var(--twl-line);
  display: flex;
  justify-content: space-between;
  padding: 8px 12px 0;
}

.tab {
  align-items: center;
  background: var(--twl-surface);
  border: 1px solid var(--twl-line);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  color: var(--sds-ink);
  display: inline-flex;
  font-size: 13px;
  font-weight: 500;
  gap: 8px;
  margin-bottom: -1px;
  padding: 8px 12px;
}

.liveDot {
  background: var(--sds-blue);
  border-radius: 50%;
  height: 6px;
  width: 6px;
}

.ref {
  align-self: center;
  color: var(--sds-gray-500);
  font-family: var(--sds-mono);
  font-size: 12px;
  padding-bottom: 8px;
}

.tempoBody {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
}

.tempoHeader {
  align-items: flex-start;
  display: flex;
  gap: 12px;
}

.tempoTitles {
  flex: 1;
  min-width: 0;
}

.tempoTitle {
  color: var(--sds-ink);
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  margin: 0;
}

.tempoStamp {
  color: var(--sds-gray-500);
  font-size: 13px;
  line-height: 18px;
  margin: 0;
}

.statusChip {
  border-radius: 4px;
  font-family: var(--sds-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  line-height: 20px;
  padding: 0 8px;
  text-transform: uppercase;
  white-space: nowrap;
}

.statusChip[data-tone='blue'] {
  background: var(--twl-blue-soft);
  color: var(--sds-blue);
}

.statusChip[data-tone='gray'] {
  background: var(--twl-fill-soft);
  color: var(--twl-muted-ink);
}

.statusChip[data-tone='green'] {
  background: var(--twl-mint-soft);
  color: var(--twl-green-ink);
}

.checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.checklist li {
  align-items: center;
  color: var(--sds-gray-600);
  display: flex;
  font-size: 14px;
  gap: 10px;
}

.checklist li[data-state='current'],
.checklist li[data-state='done'] {
  color: var(--sds-ink);
}

.checkIcon {
  border: 1.5px solid var(--twl-control-line);
  border-radius: 50%;
  flex: none;
  height: 16px;
  position: relative;
  width: 16px;
}

.checklist li[data-state='current'] .checkIcon {
  border-color: var(--sds-blue);
}

.checklist li[data-state='current'] .checkIcon::after {
  background: var(--sds-blue);
  border-radius: 50%;
  content: '';
  inset: 3px;
  position: absolute;
}

.checklist li[data-state='done'] .checkIcon {
  background: var(--sds-blue);
  border-color: var(--sds-blue);
}

.checklist li[data-state='done'] .checkIcon::after {
  border: solid var(--twl-surface);
  border-width: 0 1.5px 1.5px 0;
  content: '';
  height: 7px;
  left: 4.5px;
  position: absolute;
  top: 2px;
  transform: rotate(45deg);
  width: 4px;
}

.knowsHeading {
  color: var(--sds-gray-500);
  font-family: var(--sds-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  margin: 0;
  text-transform: uppercase;
}

.knows {
  display: flex;
  flex-direction: column;
  margin: -8px 0 0;
}

.knowsRow {
  align-items: center;
  border-bottom: 1px solid var(--twl-line-soft);
  border-radius: 4px;
  display: grid;
  font-size: 13px;
  gap: 12px;
  grid-template-columns: 112px minmax(0, 1fr);
  min-height: 34px;
  padding: 6px 6px;
  transition: background-color 1s cubic-bezier(0, 0, 0.2, 1);
}

.knowsRow[data-flash] {
  background-color: var(--twl-blue-soft);
  transition: none;
}

.knowsRow dt {
  color: var(--sds-gray-500);
}

.knowsRow dd {
  color: var(--sds-ink);
  margin: 0;
  overflow-wrap: anywhere;
}

.skeleton {
  background: var(--twl-line-soft);
  border-radius: 3px;
  display: block;
  height: 10px;
  width: 60%;
}

.tempoLine {
  border-top: 1px solid var(--twl-line);
  color: var(--sds-ink);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  min-height: 84px;
  padding: 20px 24px;
}

/* ── Thank-you ── */

.nextEyebrow {
  color: var(--sds-ink);
  font-family: var(--sds-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.88px;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.slashes {
  color: var(--sds-blue);
}

.nextList {
  color: var(--sds-ink);
  display: flex;
  flex-direction: column;
  font-size: 16px;
  gap: 8px;
  line-height: 1.5;
  margin: 0 0 24px;
  padding-left: 20px;
}

/* ── Utilities ── */

.srOnly {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.honeypot {
  height: 0;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  width: 0;
}

/* ── Tablet: one column; the Tempo card only on the thank-you ── */

@media (max-width: 1023px) {
  .cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .desktopOnly {
    display: none;
  }
  .inner {
    padding: 48px 32px 80px;
  }
}

/* ── Phone: card padding 20; the step's buttons in a sticky bar ── */

@media (max-width: 767px) {
  .inner {
    padding: 40px 16px 64px;
  }
  .formCard {
    padding: 20px;
  }
  .pair {
    grid-template-columns: 1fr;
  }
  .scale {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .chipLabel {
    white-space: normal;
    text-align: center;
  }
  form.formCard .foot {
    background: var(--twl-surface);
    border-top: 1px solid var(--twl-line);
    bottom: 0;
    margin: 0 -20px -20px;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    position: sticky;
    z-index: 2;
  }
  .actions > * {
    flex: 1;
  }
  /* the success card's two links carry long labels ("See Tempo in Home services"): full width, stacked */
  div.formCard .actions {
    flex-direction: column;
  }
  div.formCard .actions > * {
    flex: none;
    width: 100%;
  }
  .stepTitle {
    font-size: 24px;
  }
}

/* The snapshot carries both bands (block.js renderSnapshot); the page's own mode picks one. */
.snapForm, .snapThanks { display: contents; }
.snapThanks { display: none; }
:host([data-props*='"mode":"thank-you"']) .snapForm { display: none; }
:host([data-props*='"mode":"thank-you"']) .snapThanks { display: contents; }

/* a redraw inside a step holds still; only a step change slides in (block.js renderForm) */
.stepBody[data-still] { animation: none; }