/* ============================================================
   Design tokens — sourced from the Pencil above-the-fold design
   ============================================================ */
:root {
  /* How shared layouts set a display heading. Satoshi display is sentence case at 700. */
  --display-transform: none;
  --display-weight: 700;

  /* Brand */
  --brand-blue: #1b3df5;
  --brand-blue-ink: #1b3cf5;
  --brand-orange: #ffa352;
  --ink: #0a0a0a;
  /* Body copy. Was #464646, which at Satoshi 400 read as a thinner weight
     than it is — Andrew's "too thin" note is mostly this, not the weight.
     Darkening the ink fixes the perceived weight without making every
     paragraph medium, which would flatten the hierarchy against headings. */
  --ink-soft: #333333;
  --gray-600: #4f4f4f;
  --gray-500: #666666;
  --gray-400: #7c7c7c;
  --line: #e4e4e4;
  --star: #f7c028;

  /* Emphasis — highlighter ink, and its counterpart on dark sections */
  --hl: rgba(255, 214, 51, 0.55);
  --hl-edge: rgba(255, 214, 51, 0);
  --hl-dark: rgba(255, 214, 51, 0.3);
  --rule: rgba(27, 61, 245, 0.38);
  --rule-dark: rgba(255, 255, 255, 0.45);

  --bg: #ffffff;

  /* Section rhythm. Andrew's note on the first build was that the page read
     as one continuous message — he scrolled a whole section without noticing
     it had changed. So sections now alternate white and this off-white, and
     each argument gets its own ground.

     --card is the fill for anything that has to lift off the section behind
     it. On a white section that is a light gray; a tinted section redeclares
     it as white on its own root. Either way a card is one step away from its
     background rather than the same colour with a border, which is what made
     the fix cards and the process visuals invisible. */
  --bg-tint: #f7f8fa;
  --card: #f1f1f1;

  /* Type */
  --font-display: "Satoshi", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* Body copy is Satoshi too, at regular weight — one typeface for the
     whole page. Mono stays for the terminal labels only. */
  --font-ui: "Satoshi", system-ui, -apple-system, sans-serif;

  /* Layout */
  --container: 1180px;
  --gutter: clamp(20px, 5vw, 60px);

  /* Reading column. Cards and grids use the full 1180 container; long prose
     has to be narrower than that or the lines get unreadable. The mistake was
     capping the prose and leaving it flush left inside the wide container,
     which put ~340px of dead space down the right of every text section at
     desktop. Narrow means narrow and centred — always pair this with
     margin-inline: auto. */
  --measure: 880px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Satoshi ships 300/400/500/700/900 — there is no 600, so "one weight up"
   from 400 is 500 and from 500 is 700. Andrew's note on the first build was
   that the type reads too thin, so everything moved one step: body copy to
   500 here, and the display headings to 700 in their own components. */
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ============================================================
   Emphasis — three devices, used sparingly, in one place so the
   whole page marks up copy the same way.

     <strong>      weight lift for a phrase that carries the point
     <mark>        highlighter swipe; the loudest, ~one per section
     <span class="u">  ruled underline for a term or a promise

   Put .on-dark on any dark-background block that contains these.
   ============================================================ */
strong,
b {
  font-weight: 700;
  color: var(--em-strong, var(--ink));
}

mark {
  /* Angled, with the soft ends measured in px rather than % so a long
     highlight fades over the same distance as a short one. clone keeps
     both ends correct when the phrase wraps across lines. */
  background-image: linear-gradient(
    100deg,
    var(--hl-edge) 0,
    var(--em-hl, var(--hl)) 7px,
    var(--em-hl, var(--hl)) calc(100% - 7px),
    var(--hl-edge) 100%
  );
  background-repeat: no-repeat;
  color: inherit;
  font-weight: 500;
  padding: 0.1em 0.24em;
  margin-inline: -0.16em;
  border-radius: 0.14em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.u {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--em-rule, var(--rule));
  text-decoration-skip-ink: auto;
}

/* Dark sections: black bold and dense highlighter both fail here. */
.on-dark {
  --em-strong: #ffffff;
  --em-hl: var(--hl-dark);
  --em-rule: var(--rule-dark);
}

/* Headline sentence break. Andrew: "I would line break this — so no one-word
   lines." A two-sentence headline left to wrap on its own breaks mid-sentence
   and orphans the first word of the second ("...ghosting you. It"), which reads
   as a typesetting mistake rather than a beat. Wrapping each sentence in .sentence
   puts the break where the writer intended it.

   Below 640px the headline is narrow enough that forcing it would cause worse
   wraps than it prevents, so it goes back to flowing. */
.sentence {
  display: block;
}

@media (max-width: 640px) {
  .sentence {
    display: inline;
  }
}

/* Shared layout helper: centered content column */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   SHARED PRIMITIVE LAYER

   The funnel pages (/checkout, /agency-client-lab, /book-a-call,
   /intake, /talk-soon) are one set of markup rendered by both
   designs, written against .sec / .btn / .pill / .prose. This is
   blue's implementation of that contract: same class names, same
   children, same ground modifiers — blue's fill, radius, shadow,
   Satoshi sentence case and yellow highlighter.
   ============================================================ */

:root {
  /* Blue has no red: --red and its bright twin are the brand blue and
     the tint that survives an off-black ground. */
  --red: var(--brand-blue);
  --red-bright: var(--blue-lift);
  --red-hover: #1533d6;
  --blue-ink-hover: #1533d6;
  --blue-soft: #7d92fb;
  --blue-lift: #9fb0ff;
  --blue-wash: #eef1fe;
  --blue-tint: #f6f7fe;
  --blue-line: #dbe1fb;

  --black: #0a0a0a;
  --black-2: #101114;
  --cream: var(--bg-tint);
  --sand: #b6bac6;
  --ink-body: var(--ink-soft);
  --line-dark: rgba(255, 255, 255, 0.12);
  --line-dark-2: rgba(255, 255, 255, 0.12);

  /* Display steps: Satoshi 700/900, sentence case, tight negative
     tracking — the ladder Hero and OrderSection already run on. */
  --fs-d1: clamp(30px, 5.4vw, 46px);
  --fs-d2: clamp(27px, 3.9vw, 40px);
  --fs-d3: clamp(21px, 2.7vw, 28px);
  --fs-d4: clamp(18px, 2.1vw, 21px);
  --fs-d5: clamp(16px, 1.9vw, 18px);

  --fs-h1: var(--fs-d1);
  --fs-h2: var(--fs-d2);
  --fs-h3: var(--fs-d3);
  --fs-h4: var(--fs-d4);

  --fs-micro: 11.5px;
  --fs-label: 12px;
  --fs-meta: 13.5px;
  --fs-small: 15px;
  --fs-base: clamp(16px, 1.9vw, 17px);
  --fs-mid: clamp(16px, 2vw, 17.5px);
  --fs-lead: clamp(17px, 2.2vw, 19px);
  --fs-body: clamp(17px, 2.1vw, 19px);
  --fs-quote: clamp(18px, 2.3vw, 21px);

  --lh-tight: 1.06;
  --lh-snug: 1.14;
  --lh-body: 1.65;

  --pad-sec: clamp(48px, 7vw, 92px);
  --pad-band: clamp(38px, 5vw, 64px);
  --radius: 12px;
  --radius-btn: 6px;
  --buybar-h: 88px;
}

/* ============================================================
   GROUNDS
   ============================================================ */
.sec {
  padding: var(--pad-sec) var(--gutter);
}

.sec--white {
  background: var(--bg);
  --card: #f1f1f1;
}

.sec--cream {
  background: var(--bg-tint);
  --card: #ffffff;
}

.sec--dark {
  background: var(--black);
  color: #fff;
}

.sec--red {
  background: var(--brand-blue);
  color: #fff;
}

/* The emphasis vars blue scopes to .on-dark, restated for the two
   grounds the shared markup uses. On brand blue the yellow wash turns
   muddy, so a <mark> there is a white one. */
.sec--dark {
  --em-strong: #ffffff;
  --em-hl: var(--hl-dark);
  --em-rule: var(--rule-dark);
}

.sec--red {
  --em-strong: #ffffff;
  --em-hl: rgba(255, 255, 255, 0.26);
  --em-rule: var(--rule-dark);
}

/* The reading column. .container stays the wide 1180 track. */
.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
}

/* ============================================================
   DISPLAY TYPE — Satoshi, sentence case. Never uppercase.
   ============================================================ */
.d1,
.d2,
.d3,
.d4,
.d5 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.026em;
  color: inherit;
  text-wrap: balance;
}

.d1 {
  font-size: var(--fs-d1);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.032em;
}

.d2 {
  font-size: var(--fs-d2);
  line-height: 1.06;
}

.d3 {
  font-size: var(--fs-d3);
  line-height: 1.14;
  letter-spacing: -0.02em;
}

.d4 {
  font-size: var(--fs-d4);
  line-height: 1.22;
  letter-spacing: -0.014em;
}

.d5 {
  font-size: var(--fs-d5);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* The accent phrase inside a headline. On light it is the highlighter,
   swiped across the lower half of the line so a wrapped phrase never
   paints over the line above it. On the two dark grounds a translucent
   yellow wash dies, so the same yellow becomes the ink instead. */
.hl {
  background-image: linear-gradient(
    100deg,
    var(--hl-edge) 0,
    var(--hl) 7px,
    var(--hl) calc(100% - 7px),
    var(--hl-edge) 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 0.44em;
  background-position: 0 88%;
  color: inherit;
  padding-inline: 0.06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.sec--dark .hl,
.sec--red .hl,
.on-dark .hl {
  background: none;
  color: #ffd633;
}

/* ============================================================
   SECTION TAGS
   ============================================================ */
.pill {
  display: inline-block;
  margin: 0 0 14px;
  padding: 8px 14px;
  border: 1px solid var(--blue-line);
  border-radius: 999px;
  background: var(--blue-tint);
  color: var(--brand-blue);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(11.5px, 3vw, 12.5px);
  letter-spacing: 1.2px;
  line-height: 1;
  text-transform: uppercase;
}

.sec--dark .pill {
  background: rgba(125, 146, 251, 0.14);
  border-color: rgba(125, 146, 251, 0.42);
  color: var(--blue-lift);
}

.sec--red .pill {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}

.pill--center {
  display: table;
  margin-inline: auto;
}

.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-micro);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--brand-blue);
}

.eyebrow--dark {
  color: var(--blue-lift);
}

.sec--red .eyebrow,
.sec--red .eyebrow--dark {
  color: rgba(255, 255, 255, 0.88);
}

/* The divider under a centred heading — the guarantee list's blue
   marker bar, widened. */
.rule {
  width: 64px;
  height: 3px;
  border-radius: 999px;
  background: var(--brand-blue);
  /* The top margin collapses into the heading's own bottom margin, so it
     only shows up where a heading zeroed that and the bar would otherwise
     land on its descenders. */
  margin: 12px auto clamp(26px, 4vw, 40px);
}

.sec--dark .rule {
  background: var(--blue-soft);
}

.sec--red .rule {
  background: rgba(255, 255, 255, 0.75);
}

/* ============================================================
   PROSE AND THE TURN
   ============================================================ */
.sec .prose {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}

.sec .prose > p {
  margin: 0 0 22px;
}

.sec .prose > p:last-child {
  margin-bottom: 0;
}

.sec--dark .prose,
.on-dark .prose {
  color: var(--sand);
}

.sec--red .prose {
  color: rgba(255, 255, 255, 0.9);
}

/* The one line a section is built around: a step up in size and weight,
   still a line of the letter. */
.turn {
  display: block;
  margin: clamp(26px, 3.6vw, 38px) 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(21px, 3.1vw, 29px);
  line-height: 1.26;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: balance;
}

.sec--dark .turn,
.sec--red .turn,
.on-dark .turn {
  color: #fff;
}

/* ============================================================
   CARDS AND CALLOUTS
   ============================================================ */
.card {
  padding: clamp(20px, 2.6vw, 28px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(10, 10, 10, 0.04),
    0 16px 34px -22px rgba(10, 10, 10, 0.34);
}

/* On white the card is the tint, not another white with an outline. */
.sec--white .card {
  background: var(--bg-tint);
  border-color: #e8eaf2;
}

.sec--dark .card {
  background: #14151a;
  border-color: var(--line-dark);
  box-shadow: none;
  color: #fff;
}

.sec--red .card {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: none;
  color: #fff;
}

.note {
  margin: 0;
  padding: clamp(18px, 2.4vw, 24px) clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--blue-line);
  border-left: 4px solid var(--brand-blue);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--blue-tint), #fff 60%);
  font-size: var(--fs-mid);
  line-height: 1.62;
  color: var(--ink-soft);
}

.sec--dark .note {
  border-color: var(--line-dark);
  border-left-color: var(--blue-soft);
  background: var(--black-2);
  color: var(--sand);
}

.sec--red .note {
  border-color: rgba(255, 255, 255, 0.24);
  border-left-color: #fff;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.note__label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-micro);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--brand-blue);
}

.sec--dark .note__label {
  color: var(--blue-lift);
}

.sec--red .note__label {
  color: #fff;
}

/* ============================================================
   TICK LIST — the rounded tinted tile OrderSection puts its icons in.
   ============================================================ */
.ticks {
  --tick-w: 22px;
  --tick-gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: var(--fs-mid);
  line-height: 1.55;
}

/* Absolute marker, so a row carrying a <strong> stays one flowing line
   rather than becoming two flex columns. */
.ticks > li {
  position: relative;
  padding-left: calc(var(--tick-w) + var(--tick-gap));
  min-height: var(--tick-w);
}

.ticks > li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0.13em;
  width: var(--tick-w);
  height: var(--tick-w);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--blue-wash);
  color: var(--brand-blue);
  font-size: 12px;
  font-weight: 700;
}

.sec--dark .ticks > li::before,
.on-dark .ticks > li::before {
  background: rgba(125, 146, 251, 0.18);
  color: var(--blue-lift);
}

.sec--red .ticks > li::before {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* ============================================================
   BUTTONS — blue's fill, 6px radius, hover lift and blue shadow.

   Under .sec, like .prose, .assurances and the seal's ring: Hero,
   OrderSection and LegalLayout already own those four class names on
   their own markup, and none of that markup sits inside a .sec.
   ============================================================ */
.sec .btn {
  display: block;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  padding: 18px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  background: var(--brand-blue-ink);
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(17px, 4.4vw, 19px);
  letter-spacing: -0.2px;
  line-height: 1.22;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease,
    transform 0.12s ease, box-shadow 0.14s ease;
}

.sec .btn:hover {
  background: var(--blue-ink-hover);
  border-color: var(--blue-ink-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(27, 60, 245, 0.28);
}

.sec .btn__sub {
  display: block;
  margin-top: 7px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-micro);
  letter-spacing: 0.9px;
  line-height: 1.3;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

/* The quieter of two side-by-side buttons: an outline, so the filled
   one beside it reads as the default. */
.sec .btn--ghost {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.sec .btn--ghost .btn__sub {
  color: var(--gray-500);
}

.sec .btn--ghost:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  box-shadow: 0 8px 22px rgba(10, 10, 10, 0.24);
}

.sec .btn--ghost:hover .btn__sub {
  color: rgba(255, 255, 255, 0.78);
}

.sec--dark .btn--ghost,
.on-dark .btn--ghost {
  border-color: rgba(255, 255, 255, 0.42);
  color: #fff;
}

.sec--dark .btn--ghost .btn__sub,
.on-dark .btn--ghost .btn__sub {
  color: rgba(255, 255, 255, 0.68);
}

.sec--dark .btn--ghost:hover,
.on-dark .btn--ghost:hover {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(255, 255, 255, 0.16);
}

.sec--dark .btn--ghost:hover .btn__sub,
.on-dark .btn--ghost:hover .btn__sub {
  color: var(--gray-500);
}

/* On the brand ground the button has to be the other colour or it is
   not a button: white fill, blue ink. */
.sec .btn--onred,
.sec--red .btn {
  background: #fff;
  border-color: #fff;
  color: var(--brand-blue-ink);
}

.sec .btn--onred .btn__sub,
.sec--red .btn .btn__sub {
  color: rgba(27, 60, 245, 0.72);
}

.sec .btn--onred:hover,
.sec--red .btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  box-shadow: 0 10px 26px rgba(10, 10, 10, 0.32);
}

.sec .btn--onred:hover .btn__sub,
.sec--red .btn:hover .btn__sub {
  color: rgba(255, 255, 255, 0.78);
}

.sec--red .btn--ghost,
.sec .btn--onred.btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.sec--red .btn--ghost .btn__sub,
.sec .btn--onred.btn--ghost .btn__sub {
  color: rgba(255, 255, 255, 0.72);
}

.sec--red .btn--ghost:hover,
.sec .btn--onred.btn--ghost:hover {
  background: #fff;
  border-color: #fff;
  color: var(--brand-blue-ink);
}

.sec--red .btn--ghost:hover .btn__sub,
.sec .btn--onred.btn--ghost:hover .btn__sub {
  color: rgba(27, 60, 245, 0.72);
}

/* Blue draws attention with a lift, not a heartbeat: a slow resting
   glow in the brand colour, and nothing at all under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .sec .btn--pulse {
    animation: btn-glow 2.6s ease-in-out infinite;
  }
}

@keyframes btn-glow {
  0%,
  100% {
    box-shadow: 0 6px 18px -6px rgba(27, 61, 245, 0.35);
  }
  50% {
    box-shadow: 0 10px 30px -6px rgba(27, 61, 245, 0.62);
  }
}

.sec--red .btn--pulse,
.sec .btn--onred.btn--pulse {
  animation-name: btn-glow-onblue;
}

@keyframes btn-glow-onblue {
  0%,
  100% {
    box-shadow: 0 6px 18px -6px rgba(6, 14, 70, 0.4);
  }
  50% {
    box-shadow: 0 12px 32px -6px rgba(6, 14, 70, 0.7);
  }
}

.sec .btn:disabled,
.sec .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  animation: none;
}

.cta-note {
  margin: 12px auto 0;
  max-width: 460px;
  font-family: var(--font-ui);
  font-size: clamp(14px, 3.6vw, 15px);
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  color: var(--gray-500);
}

.sec--dark .cta-note,
.on-dark .cta-note {
  color: #a8a8a8;
}

.sec--red .cta-note {
  color: rgba(255, 255, 255, 0.84);
}

/* ============================================================
   PRICE
   ============================================================ */
.price {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  margin: 0;
}

.price__now {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(34px, 8vw, 44px);
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--brand-blue);
}

.price--lg .price__now {
  font-size: clamp(40px, 9vw, 56px);
}

/* flex-start, not the stretch default: a stretched .price__save is
   blockified to the column width and reads as a second small button. */
.price__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding-bottom: 5px;
  text-align: left;
}

.price__was {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(16px, 4vw, 20px);
  letter-spacing: -0.03em;
  color: var(--gray-400);
  text-decoration: line-through;
}

.price__once {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-micro);
  letter-spacing: 1px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--gray-500);
}

.price__save {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--blue-wash);
  color: var(--brand-blue);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-micro);
  letter-spacing: 0.8px;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Brand blue is unreadable at this size on off-black, so the number
   stays white — the call OrderSection already makes on its price half. */
.sec--dark .price__now,
.sec--red .price__now,
.on-dark .price__now {
  color: #fff;
}

.sec--dark .price__was,
.on-dark .price__was {
  color: var(--gray-400);
}

.sec--red .price__was {
  color: rgba(255, 255, 255, 0.6);
}

.sec--dark .price__once,
.on-dark .price__once {
  color: rgba(255, 255, 255, 0.62);
}

.sec--red .price__once {
  color: rgba(255, 255, 255, 0.78);
}

.sec--dark .price__save,
.on-dark .price__save {
  background: rgba(125, 146, 251, 0.18);
  color: var(--blue-lift);
}

.sec--red .price__save {
  background: #fff;
  color: var(--brand-blue-ink);
}

/* ============================================================
   THE SEAL — GuaranteeSection's disc. The ring is a pseudo element
   because the shared markup has no third child.
   ============================================================ */
.seal {
  position: relative;
  flex: none;
  width: clamp(120px, 17vw, 168px);
  height: clamp(120px, 17vw, 168px);
  border-radius: 50%;
  background: var(--brand-blue);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 40px rgba(27, 61, 245, 0.24);
}

.sec .seal::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px dashed rgba(255, 255, 255, 0.55);
  border-radius: 50%;
}

.sec--dark .seal,
.on-dark .seal {
  background: var(--blue-soft);
  color: var(--black);
  box-shadow: none;
}

.sec--red .seal {
  background: #fff;
  color: var(--brand-blue-ink);
  box-shadow: none;
}

.sec--dark .seal::after,
.on-dark .seal::after {
  border-color: rgba(10, 10, 10, 0.34);
}

.sec--red .seal::after {
  border-color: rgba(27, 60, 245, 0.34);
}

.seal__n {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(42px, 6vw, 54px);
  line-height: 1;
  letter-spacing: -0.05em;
}

.seal__unit {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-micro);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ============================================================
   ASSURANCES — the dotted guarantee row under a CTA.
   ============================================================ */
.sec .assurances {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  text-wrap: balance;
  color: var(--gray-600);
}

.sec .assurances > li {
  position: relative;
  max-width: 100%;
  padding-left: 14px;
}

.sec .assurances > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-blue);
}

.sec--dark .assurances,
.on-dark .assurances {
  color: #a8a8a8;
}

.sec--dark .assurances > li::before,
.on-dark .assurances > li::before {
  background: var(--blue-soft);
}

.sec--red .assurances {
  color: rgba(255, 255, 255, 0.85);
}

.sec--red .assurances > li::before {
  background: #fff;
}

@media (max-width: 560px) {
  .sec .assurances {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* ============================================================
   FOCUS
   ============================================================ */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 3px;
}

.sec--dark :where(a, button, summary, [tabindex]):focus-visible,
.sec--red :where(a, button, summary, [tabindex]):focus-visible {
  outline-color: #fff;
}