/* ==========================================================================
   Build Remote — /continue  (free course offer)

   Rides on styles.css, the same stylesheet index.html uses, so the nav,
   hero, buttons, stat cards, FAQ and footer are the same components rather
   than lookalikes. Everything below is only what this page adds on top:
   the announcement strip, value stack, step list, comparison, "why free"
   panel, proof counters and the demo booking calendar.

   Tokens come from styles.css, then are overridden at the foot of this file.
   See the LOOK AND FEEL PASS block for the values actually in force.
   ========================================================================== */

:root {
  --c-line: var(--gray-200);
  --c-soft: var(--gray-50);
}
/* --- announcement strip --------------------------------------------------- */

.c-strip {
  background: var(--blue-50);
  border-bottom: 1px solid var(--blue-100);
  font-size: 13.5px;
  color: var(--dark-700);
}
.c-strip-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 11px 20px; text-align: center; flex-wrap: wrap;
}
.c-strip strong { color: var(--blue-dark); font-weight: 600; }
.c-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--blue); flex: none;
  animation: c-blip 2.6s infinite;
}
@keyframes c-blip { 0%,100% { opacity: 1; }
50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .c-dot { animation: none; } }
/* --- generic section padding for pages without index's bespoke sections ---- */

.c-section { padding: clamp(60px, 7.5vw, 100px) 0; }
/* .hero already carries 64px bottom padding plus the social-proof margin,
   so the section straight after it must not stack a full pad on top. */
.hero + .c-section { padding-top: clamp(22px, 3vw, 40px); }
.c-section-soft { background: var(--c-soft); }
.c-section-dark { background: var(--dark); color: #fff; }
.c-head {
  max-width: 720px; margin: 0 auto clamp(32px, 4.5vw, 52px);
  text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center;
}
.c-head h2 { margin: 0; }
.c-head p { margin: 0; color: var(--dark-500); font-size: 16.5px; line-height: 1.65; }
.c-head-left { text-align: left; align-items: flex-start; margin-left: 0; }
.c-section-dark .c-head p { color: var(--dark-400); }
.c-section-dark h2, .c-section-dark h3 { color: #fff; }
/* --- value stack ----------------------------------------------------------- */

.c-stack {
  max-width: 780px; margin: 0 auto;
  background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow);
}
.c-stack-row {
  display: grid; grid-template-columns: 1fr max-content; gap: 16px; align-items: baseline;
  padding: 16px 22px; border-bottom: 1px solid var(--c-line);
  cursor: pointer; transition: background var(--transition);
}
.c-stack-row:hover { background: var(--c-soft); }
.c-stack-row[data-static] { cursor: default; }
.c-stack-row[data-static]:hover { background: transparent; }
.c-stack-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.c-stack-item strong {
  font-size: 15px; font-weight: 600; color: var(--dark);
  display: flex; align-items: center; gap: 9px;
}
.c-stack-item > span { font-size: 13.5px; color: var(--dark-500); line-height: 1.55; }
.c-caret { color: var(--blue); font-size: 13px; transition: transform var(--transition); display: inline-block; }
.c-stack-row.is-open .c-caret { transform: rotate(90deg); }
.c-tag {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
  color: var(--blue-dark); background: var(--blue-50); border: 1px solid var(--blue-100);
  padding: 4px 10px; border-radius: var(--radius-pill); white-space: nowrap;
}
.c-tag-out { color: var(--dark-400); background: var(--gray-100); border-color: var(--c-line); }
.c-stack-more {
  grid-column: 1 / -1; display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 280ms cubic-bezier(.4,0,.2,1);
}
.c-stack-row.is-open .c-stack-more { grid-template-rows: 1fr; }
.c-stack-more > div { overflow: hidden; }
.c-stack-more p {
  font-size: 13.5px; color: var(--dark-700); line-height: 1.75;
  padding-top: 13px; margin: 13px 0 0; border-top: 1px solid var(--c-line);
}
@media (prefers-reduced-motion: reduce) { .c-stack-more { transition: none; } }
.c-stack-total {
  display: grid; grid-template-columns: 1fr max-content; gap: 16px; align-items: center;
  padding: 18px 22px; border-bottom: 1px solid var(--c-line);
}
.c-stack-total span { font-size: 14.5px; color: var(--dark-500); }
.c-stack-total b { font-size: 17px; font-weight: 600; color: var(--dark-700); }
.c-stack-final {
  background: var(--dark); border-bottom: 0;
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}
.c-stack-final span { color: rgba(255,255,255,.7); }
.c-stack-final b { color: #fff; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
/* --- numbered steps -------------------------------------------------------- */

.c-steps { display: flex; flex-direction: column; gap: 6px; max-width: 780px; margin: 0 auto; }
.c-step {
  display: grid; grid-template-columns: 46px 1fr; gap: 18px; align-items: start;
  padding: 16px; border-radius: var(--radius); border: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition);
}
.c-step.is-interactive { cursor: pointer; }
.c-step.is-interactive:hover { background: var(--c-soft); }
.c-step[aria-selected="true"] { background: var(--blue-50); border-color: var(--blue-100); }
.c-step-n {
  width: 46px; height: 46px; border-radius: var(--radius);
  background: var(--dark); color: #fff; display: grid; place-items: center;
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.c-step[aria-selected="true"] .c-step-n { background: var(--blue); }
.c-step-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.c-step-body strong { font-size: 15.5px; font-weight: 700; color: var(--dark); }
.c-step-body p { font-size: 14px; color: var(--dark-500); line-height: 1.6; margin: 0; }
.c-step-detail {
  max-width: 780px; margin: 20px auto 0;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  padding: 26px 28px; display: flex; flex-direction: column; gap: 11px;
}
.c-step-detail h3 { font-size: 19px; font-weight: 700; margin: 0; }
.c-step-detail p { font-size: 14.5px; color: var(--dark-700); line-height: 1.75; margin: 0; }
.c-step-detail ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.c-step-detail li {
  font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; font-weight: 600;
  color: var(--dark-500); border: 1px solid var(--c-line);
  border-radius: var(--radius-pill); padding: 5px 12px;
}
/* --- why free -------------------------------------------------------------- */

.c-whyfree {
  background: var(--dark); border-radius: var(--radius-xl);
  padding: clamp(32px, 5vw, 58px);
  display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: clamp(26px, 4vw, 52px); align-items: center; color: #fff;
}
.c-whyfree h2 { color: #fff; margin: 0; }
.c-whyfree .eyebrow { color: var(--blue-light); }
.c-whyfree-copy { display: flex; flex-direction: column; gap: 15px; }
.c-whyfree-copy p { color: rgba(255,255,255,.74); font-size: 15.5px; line-height: 1.75; margin: 0; }
.c-math { display: flex; flex-direction: column; gap: 11px; }
.c-math-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 15px 20px; border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04);
}
.c-math-row span { font-size: 14px; color: rgba(255,255,255,.62); }
.c-math-row strong { font-size: 17px; font-weight: 700; color: #fff; white-space: nowrap; }
.c-math-row.is-final { border-color: rgba(59,130,246,.5); background: rgba(37,99,235,.18); }
.c-math-row.is-final strong { color: var(--blue-light); font-size: 22px; }
/* --- comparison ------------------------------------------------------------ */

.c-compare {
  max-width: 900px; margin: 0 auto;
  background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow);
}
.c-compare-head, .c-compare-row {
  display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);
}
.c-compare-head > *, .c-compare-row > * { padding: 14px 18px; }
.c-compare-row > * { border-top: 1px solid var(--c-line); }
.c-compare-head { background: var(--dark); }
.c-compare-head span { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.c-compare-head strong { display: block; color: #fff; font-size: 14px; font-weight: 700; margin-top: 3px; }
.c-compare-head .is-hi strong { color: var(--blue-light); }
.c-compare-row > *:nth-child(2) { background: var(--blue-50); }
.c-compare-head > *:nth-child(2) { background: rgba(37,99,235,.28); }
.c-compare-label { font-size: 14px; font-weight: 600; color: var(--dark); }
.c-compare-label small { display: block; font-size: 12.5px; font-weight: 400; color: var(--dark-400); margin-top: 2px; line-height: 1.45; }
.c-compare-cell { font-size: 13.5px; color: var(--dark-500); display: flex; gap: 8px; align-items: flex-start; }
.c-compare-cell .m { flex: none; font-weight: 800; }
.c-compare-cell .m.y { color: var(--green); }
.c-compare-cell .m.n { color: var(--dark-400); }
/* --- proof counters --------------------------------------------------------- */

.c-counters {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--c-line);
  border: 1px solid var(--c-line); border-radius: var(--radius-lg); overflow: hidden;
  max-width: 900px; margin: 0 auto clamp(30px, 4vw, 46px);
}
.c-counter { background: #fff; padding: 22px 18px; text-align: center; display: flex; flex-direction: column; gap: 3px; }
.c-counter b {
  font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--dark);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.c-counter b em { font-style: normal; color: var(--blue); }
.c-counter > span { font-size: 12.5px; color: var(--dark-400); line-height: 1.4; }
/* --- fit --------------------------------------------------------------------- */

.c-fit { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 900px; margin: 0 auto; }
.c-fit-col {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  padding: 28px; display: flex; flex-direction: column; gap: 16px;
}
.c-fit-col h3 { font-size: 16px; font-weight: 700; margin: 0; }
.c-fit-col ul { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.c-fit-col li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--dark-700); line-height: 1.55; }
.c-fit-mark { flex: none; font-weight: 800; line-height: 1.5; }
.c-fit-col.is-yes .c-fit-mark { color: var(--green); }
.c-fit-col.is-no  .c-fit-mark { color: var(--dark-400); }
/* --- misc --------------------------------------------------------------------- */

.c-cta-block { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 34px; text-align: center; }
.c-cta-note { font-size: 13.5px; color: var(--dark-400); }
.c-section-dark .c-cta-note { color: rgba(255,255,255,.55); }
.c-fineprint { font-size: 13px; color: var(--dark-400); text-align: center; max-width: 74ch; margin: 26px auto 0; line-height: 1.7; }
.c-fineprint strong { color: var(--dark-700); font-weight: 600; }
.c-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.c-quote {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  padding: 24px; display: flex; flex-direction: column; gap: 14px;
}
.c-quote blockquote { font-size: 14.5px; line-height: 1.7; color: var(--dark-700); margin: 0; }
.c-quote-by { display: flex; align-items: center; gap: 11px; margin-top: auto; }
.c-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: var(--blue); color: #fff; display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
}
.c-quote-by strong { display: block; font-size: 14px; font-weight: 700; color: var(--dark); }
.c-quote-by em { font-style: normal; font-size: 12.5px; color: var(--dark-400); }
/* --- demo booking modal ------------------------------------------------------- */

.c-modal { position: fixed; inset: 0; z-index: 300; display: none; }
.c-modal[data-open] { display: block; }
.c-modal-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.6); backdrop-filter: blur(3px); }
.c-modal-dialog {
  position: relative; width: min(880px, calc(100vw - 28px));
  max-height: calc(100vh - 44px); margin: 22px auto;
  background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-xl);
  display: flex; flex-direction: column; overflow: hidden;
}
.c-modal-head {
  padding: 24px 28px 18px; border-bottom: 1px solid var(--c-line);
  display: flex; flex-direction: column; gap: 5px; padding-right: 60px;
}
.c-modal-head h2 { font-size: 23px; font-weight: 800; margin: 0; letter-spacing: -.02em; }
.c-modal-head p { font-size: 14.5px; color: var(--dark-500); margin: 0; }
.c-modal-close {
  position: absolute; top: 16px; right: 18px; width: 34px; height: 34px;
  border-radius: 50%; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; font-size: 20px; color: var(--dark-400);
  transition: background var(--transition);
}
.c-modal-close:hover { background: var(--gray-100); color: var(--dark); }
.c-modal-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
body.c-modal-open { overflow: hidden; }
/* --- responsive ---------------------------------------------------------------- */

@media (max-width: 900px) {
  .c-whyfree { grid-template-columns: 1fr; }
.c-counters { grid-template-columns: repeat(2, 1fr); }
.c-quotes { grid-template-columns: 1fr; }
.c-fit { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .c-stack-row { grid-template-columns: 1fr; gap: 9px; }
.c-tag { justify-self: start; }
.c-compare-head, .c-compare-row { grid-template-columns: 1fr; }
.c-compare-row > *:not(:first-child) { border-top: 0; padding-top: 0; padding-bottom: 8px; }
.c-step { grid-template-columns: 38px 1fr; gap: 14px; padding: 14px 10px; }
.c-step-n { width: 38px; height: 38px; font-size: 13px; }
.c-modal-dialog { width: 100vw; max-height: 100vh; margin: 0; border-radius: 0; }
}
@media (max-width: 560px) {
  .c-counters { grid-template-columns: 1fr; }
}
/* ============================================================
   Registration modal — replaced the demo booking calendar.
   Access is instant; a rep calls afterwards.

   The dialog's default 880px width exists for the two-column
   calendar that used to live here. A three-field form needs a
   much narrower shell, hence .is-compact. .c-modal-body also
   carries no padding of its own (the calendar supplied it), so
   the form provides its own.
   ============================================================ */

/* allow the dialog to scroll on short viewports instead of clipping */
/* The navbar is position:fixed at z-index:1000 and the sticky CTA at 999, so
   the modal's original z-index:300 let both paint over the dialog and clip its
   heading. 2000 puts the modal above everything, matching the .book-modal
   pattern in styles.css. */
.c-modal { z-index: 2000; overflow-y: auto; }
/* belt and braces: never let the fixed chrome sit above an open modal */
body.c-modal-open .navbar { z-index: 1; }
/* hide the sticky bar outright while the modal is open, so it cannot sit
   over the form's submit button on short screens */
body.c-modal-open .sticky-cta { display: none !important; }
.c-modal-dialog.is-compact { width: min(520px, calc(100vw - 28px)); }
.reg-form {
  display: grid;
  gap: 16px;
  padding: 22px 28px 26px;
  text-align: left;
}
.reg-field { display: grid; gap: 6px; }
.reg-field > span {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--dark-700);
}
.reg-field input {
  width: 100%;
  padding: 11px 13px;
  font: inherit;
  font-size: 15px;
  line-height: 1.35;
  color: var(--dark);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.reg-field input::placeholder { color: var(--dark-400); }
.reg-field input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
}
.reg-field input[aria-invalid="true"] { border-color: #dc2626; }
/* only takes vertical space once it actually holds a message */
.reg-error {
  font-size: 12.5px;
  font-style: normal;
  color: #dc2626;
}
.reg-error:empty { display: none; }
.reg-submit { width: 100%; justify-content: center; margin-top: 2px; }
.reg-submit[disabled] { opacity: .65; cursor: progress; }
.reg-note {
  margin: 0;
  font-size: 12.5px;
  color: var(--dark-400);
  text-align: center;
}
@media (max-width: 560px) {
  .reg-form { padding: 18px 20px 22px; gap: 14px; }
.c-modal-dialog.is-compact { margin: 14px auto; max-height: calc(100vh - 28px); }
}
/* Video shell for the hero embed. No aspect-ratio here on purpose — the
   Wistia player sets its own via the swatch placeholder's padding-top, and
   two aspect systems at once letterboxes the video. */
.video-frame {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--gray-200);
  background: var(--dark);
}
.video-frame wistia-player { display: block; width: 100%; }
/* ============================================================
   Announcement strip above the navbar.

   The notice strip sits above the nav in the markup, on desktop and
   mobile alike. To make that work the navbar switches from position:fixed
   to position:sticky on this page only, so it participates in flow and
   the strip can occupy the space above it. The strip then scrolls away
   normally while the nav stays pinned to the top.

   This also removes the reason the strip needed a 66px top offset and the
   reason the hero needed 120px of padding to compensate for a fixed nav
   that took no space. Both are gone.

   Scoped to .c-continue so index.html and every other page keep their
   original fixed navbar untouched.
   ============================================================ */
.c-continue .navbar { position: sticky; top: 0; }
.c-continue .c-strip { position: relative; z-index: 1001; }
.c-continue .hero { padding-top: 40px; }
@media (max-width: 768px) {
  .c-continue .hero { padding-top: 32px; }
}
@media (max-width: 480px) {
  .c-continue .hero { padding-top: 26px; }
.c-continue .c-strip-inner { padding: 9px 16px; font-size: 12.5px; }
}
/* Micro-copy that justifies the phone field, at the field itself. */
.reg-why {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--dark-400);
  letter-spacing: 0;
  margin-top: 1px;
}
/* Reassurance sits above the submit button, before the decision. */
.reg-note-top { margin-bottom: 2px; }
.reg-note-top b { color: var(--dark-700); font-weight: 600; }
/* ============================================================
   HERO: the three-step flow

   Replaces the loose .hero-checks pill row. The three items are a
   sequence (register -> access -> call), so they are marked up and
   styled as an ordered flow with connectors rather than three
   unrelated ticks.
   ============================================================ */

.hero-flow {
  list-style: none; margin: 0 auto clamp(26px, 3.5vw, 36px); padding: 0;
  max-width: 900px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  counter-reset: flow;
  text-align: left;
}
.hero-flow > li {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: 16px 16px 15px;
  display: grid; gap: 5px;
}
/* connector chevrons between the three steps */
.hero-flow > li:not(:last-child)::after {
  content: "";
  position: absolute; top: 50%; right: -12px;
  width: 12px; height: 1px;
  background: var(--gray-200);
}
.hero-flow-icon {
  width: 32px; height: 32px; border-radius: var(--radius);
  display: grid; place-items: center;
  background: var(--blue-50);
  color: var(--blue);
}
.hero-flow-icon svg { width: 17px; height: 17px; }
.hero-flow > li strong {
  font-size: 14.5px; font-weight: 700; color: var(--dark);
  letter-spacing: -.01em;
}
.hero-flow > li > span:not(.hero-flow-icon) {
  font-size: 12.8px; line-height: 1.45; color: var(--dark-400);
}
@media (max-width: 768px) {
  .hero-flow { grid-template-columns: 1fr; gap: 10px; max-width: 460px; }
.hero-flow > li {
    grid-template-columns: 32px 1fr;
    grid-template-areas: "icon title" "icon desc";
    column-gap: 12px; row-gap: 2px; padding: 13px 14px;
  }
.hero-flow-icon { grid-area: icon; align-self: center; }
.hero-flow > li strong { grid-area: title; }
.hero-flow > li > span:not(.hero-flow-icon) { grid-area: desc; }
.hero-flow > li:not(:last-child)::after { display: none; }
}
/* #model lists six parallel reasons, not a sequence, so its .c-step rows
   carry icons instead of numbers. Everything else about .c-step is reused. */
.c-steps-icons .c-step-icon {
  width: 38px; height: 38px; border-radius: var(--radius); flex: none;
  display: grid; place-items: center;
  background: var(--blue-50);
  color: var(--blue);
}
.c-steps-icons .c-step-icon svg { width: 19px; height: 19px; }

/* ============================================================================
   LOOK AND FEEL PASS — tokens and type only. No markup, no structure.

   The page previously ran on unmodified Tailwind defaults: --blue was
   blue-600, --dark was slate-900, every grey was a slate step. That is why
   it read as templated; nothing had been chosen. These override the same
   token names, so every existing rule re-skins without a single markup
   change, and the client-approved structure is untouched.

   Safe to do here because this repo serves only /continue and /unlocked.
   The main lander keeps its own tokens in buildremote-lander.
   ============================================================================ */

:root {
  /* Ink — a deeper, warmer navy than slate-900. Carries more weight in type. */
  --dark:        #0B1F3A;
  --dark-700:    #2C4055;
  --dark-500:    #5A6C7F;
  --dark-400:    #8A99A8;

  /* Brand blue, retuned off Tailwind blue-600. Deeper and slightly greener. */
  --blue:        #1B5EDB;
  --blue-dark:   #14479F;
  --blue-light:  #4A82E8;
  --blue-50:     #EEF3FD;
  --blue-100:    #D6E2FA;

  /* Paper — barely warm, so the page doesn't sit on cold slate. */
  --white:       #FFFFFF;
  --gray-50:     #FBFAF7;
  --gray-100:    #F4F2EE;
  --gray-200:    #DDE3EA;

  --green:       #1E9E5A;

  /* Signal — the dispatch amber. Used in exactly one place: the callback. */
  --signal:      #FFB020;
  --signal-ink:  #7A4E00;
  --signal-soft: #FFF4DF;

  /* Tightened from 12/16/24. The old scale read soft and generic. */
  --radius:      10px;
  --radius-lg:   14px;
  --radius-xl:   20px;

  /* Shadows were doing decorative work. Reduced to structural only. */
  --shadow-sm:   0 1px 2px rgba(11, 31, 58, .05);
  --shadow:      0 2px 6px -2px rgba(11, 31, 58, .08);
  --shadow-lg:   0 8px 20px -6px rgba(11, 31, 58, .10);
  --shadow-xl:   0 18px 44px -14px rgba(11, 31, 58, .18);
}

/* ---- Typography ---------------------------------------------------------
   Back to Inter, which is what the main lander renders (it declares Satoshi
   but never loads it). One family, heavier weights, and a mobile headline
   that is actually a headline. The previous pass added Archivo and a mono
   face; both are gone.
   ------------------------------------------------------------------------ */

h1 {
  font-weight: 900;
  letter-spacing: -.022em;
  line-height: 1.1;
}
h2 { font-weight: 800; letter-spacing: -.02em; line-height: 1.18; }
h3 { font-weight: 700; letter-spacing: -.01em; }

.hero-flow > li strong,
.c-stack-item strong { font-weight: 700; letter-spacing: -.01em; }

.c-counter b { font-weight: 900; letter-spacing: -.03em; }

/* The mobile headline was 1.6rem at <=768 and 1.4rem at <=480, overriding the
   fluid base scale downward. Restored to a real hero size at every width. */
@media (max-width: 768px) {
  .c-continue h1 { font-size: clamp(2rem, 7.4vw, 2.5rem); line-height: 1.12; }
  .c-continue h2 { font-size: clamp(1.5rem, 5.6vw, 1.9rem); }
  .c-continue .hero-sub { font-size: 15.5px; line-height: 1.6; }
}
@media (max-width: 480px) {
  .c-continue h1 { font-size: clamp(1.95rem, 8.4vw, 2.3rem); }
  .c-continue h2 { font-size: 1.45rem; }
}

/* ---- The one place boldness is spent: the callback moment ---------------- */

/* the pulsing dot in the notice strip, which is about the rep calling */
.c-strip { background: var(--signal-soft); border-bottom-color: #F5E2BE; }
.c-strip strong { color: var(--signal-ink); }
.c-dot { background: var(--signal); }

/* the third hero step is "A rep calls you" — the only amber icon on the page */
.hero-flow > li:last-child .hero-flow-icon {
  background: var(--signal-soft);
  color: var(--signal-ink);
}
.hero-flow > li:last-child { border-color: #F0DDB8; }

/* ---- Quality floor ------------------------------------------------------- */

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---- Motion -------------------------------------------------------------
   One orchestrated idea rather than scattered effects: the phone icon on the
   "a rep calls you" step rings, because that is literally what the step says
   and it is the moment the whole funnel turns on. Everything else gets a
   quiet hover response only. All of it is disabled under reduced-motion by
   the rule further down this file.
   ------------------------------------------------------------------------ */

.hero-flow > li {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.hero-flow > li:hover {
  transform: translateY(-2px);
  border-color: var(--blue-100);
  box-shadow: 0 6px 18px -10px rgba(11, 31, 58, .28);
}
.hero-flow-icon { transition: transform .18s ease; }
.hero-flow > li:hover .hero-flow-icon { transform: scale(1.06); }

/* the ring: a short double-tilt, then a long pause, so it reads as a phone
   ringing rather than a looping decoration */
@keyframes ring {
   0%, 62%, 100% { transform: rotate(0); }
  66%           { transform: rotate(-11deg); }
  70%           { transform: rotate(9deg); }
  74%           { transform: rotate(-7deg); }
  78%           { transform: rotate(5deg); }
  82%           { transform: rotate(0); }
}
.hero-flow > li:last-child .hero-flow-icon svg {
  animation: ring 4.5s ease-in-out infinite;
  transform-origin: 50% 55%;
}

/* the reason-icons in #model lift slightly with their row */
.c-steps-icons .c-step-icon { transition: transform .18s ease, background .18s ease; }
.c-steps-icons .c-step:hover .c-step-icon { transform: scale(1.06); }

/* the register button is the page's single action; make it feel like one */
.reg-submit { transition: transform .12s ease, filter .18s ease; }
.reg-submit:hover:not([disabled]) { filter: brightness(1.06); }
.reg-submit:active:not([disabled]) { transform: translateY(1px); }