/* ============================================================
   EASY YES OFFER — DESIGN SYSTEM
   Tokens and primitives for every page on the site.

   The reference is easy-yes-offer.html (the designer's export) and
   DESIGN.md, which documents this file in prose. If the two ever
   disagree, this file is the one that ships — fix DESIGN.md.

   The system in one line: a 720px letter column, flat and square
   (no rounded corners, no shadows), Anton for anything that
   shouts, Figtree for everything you read, and four grounds —
   white, cream, near-black, brand red — that alternate down the
   page so each argument gets its own.
   ============================================================ */

:root {
  /* How shared layouts set a display heading. Anton has one weight and is always set uppercase. */
  --display-transform: uppercase;
  --display-weight: 400;

  /* ----------------------------------------------------------
     COLOUR — four grounds and one accent.

     Red is the only accent on the site. It marks price, the CTA,
     the section rule and the emphasis, and nothing else — which
     is what makes a $97 in red read as a button before it is
     read as a number.
     ---------------------------------------------------------- */

  /* Brand red */
  --red: #850001; /* buttons, rules, accents on light */
  --red-hover: #a80102; /* the only hover state red has */
  --red-bright: #f03d3e; /* red on a dark ground — #850001 dies there */
  --red-deep: #4a1213; /* the second rung of the trust ladder */

  /* Grounds */
  --white: #ffffff;
  --cream: #f6f3ee; /* the tinted section, and cards on white */
  --cream-2: #ece7e0; /* struck-through cards on cream */
  --cream-3: #f0ece6; /* the "I'll think about it" bubble */
  --black: #0a0908; /* dark sections, the footer, the sticky bar */
  --black-2: #14100e; /* a panel inside a dark section */

  /* Ink */
  --ink: #14100e; /* headings, and any word that carries weight */
  --ink-body: #241e1b; /* running prose on light */
  --ink-soft: #4a423e; /* secondary prose, card bodies */
  --gray-600: #6b625d; /* labels on dark, muted meta */
  --gray-500: #8b827d; /* captions, placeholder labels */
  --gray-400: #a89f98; /* struck prices, timestamps */
  --sand: #b8afa8; /* running prose on dark */

  /* Lines. There is no border on a card in this system — a card is
     a different ground, not the same ground with an outline. These
     are for rules between things. */
  --line: #ded7cf; /* the 2px rule between FAQ rows and steps */
  --line-soft: #ece7e0; /* 1px rule inside the order table */
  --line-dark: #241e1b; /* the same idea on a dark ground */
  --line-dark-2: #2c2521;

  --bg: var(--white);

  /* Legacy aliases. The funnel and legal pages were written against
     the old blue system; these keep them rendering in the new
     palette without a rewrite of every declaration. New code should
     use the names above. */
  --brand-blue: var(--red);
  --brand-blue-ink: var(--red);
  --brand-orange: var(--red-bright);
  --bg-tint: var(--cream);
  --card: var(--cream);
  --hl: var(--red);
  --hl-dark: var(--red);
  --rule: var(--red);
  --rule-dark: var(--red-bright);

  /* ----------------------------------------------------------
     TYPE — two families, and they do not overlap.

     Anton is a single-weight condensed display face. Everything
     set in it is UPPERCASE with a tight line-height (.94-1.1) and
     never runs longer than about two lines. Do not set body copy
     in it, and do not ask it for a weight — it has one.

     Figtree carries everything a visitor actually reads, plus
     every uppercase micro-label (800 weight, .1em tracking).

     There is no monospace face any more. --font-mono is kept as
     an alias so pages still written against it pick up Figtree
     rather than falling back to Courier.
     ---------------------------------------------------------- */
  --font-display: "Anton", "Arial Narrow", system-ui, sans-serif;
  --font-ui: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: var(--font-ui);

  /* ----------------------------------------------------------
     TYPE SCALE

     Two ladders, because the two faces are set differently.

     --fs-d*  DISPLAY (Anton). Steep vw ramps: a headline is
              allowed to be enormous on desktop and still fit a
              375px screen, because the face is condensed.

     --fs-*   TEXT (Figtree). Shallow ramps. The three anchors a
              sales letter is typeset around:

                --fs-body  21 -> 24   the letter's own voice
                --fs-base  16 -> 17.5 descriptions, card bodies
                --fs-d2    35 -> 66   the heading over a section

     Nothing a buyer reads as a sentence goes below 16px, and no
     label goes below 11.5px.
     ---------------------------------------------------------- */

  /* Display
     The two floors here were 30px and 32px. King Kong — whose page
     this pass is measured against — runs its section headings at
     9.5vw below 576px, which is 37px on a 390px phone, and its body
     copy at 22px. Ours were landing a full step under theirs on the
     screen 89% of the traffic actually uses. */
  --fs-d1: clamp(34px, 6.2vw, 60px); /* the hero, once per page */
  --fs-d2: clamp(35px, 6.4vw, 66px); /* section headings */
  --fs-d3: clamp(26px, 3.8vw, 44px); /* sub-heads, the turn */
  --fs-d4: clamp(21px, 2.6vw, 28px); /* card titles */
  --fs-d5: clamp(19px, 2.3vw, 24px); /* the smallest Anton step */
  --fs-num: clamp(58px, 9vw, 110px); /* the step numbers */
  --fs-stat: clamp(28px, 4.2vw, 50px); /* stat band figures */
  --fs-price: clamp(48px, 8vw, 76px); /* the price in a CTA band */

  /* Text
     Every floor here is the MOBILE size, and 89% of the traffic is
     mobile — so the floor is the number that matters, not the cap.
     The floors were raised across the board in the CRO pass: the
     old scale bottomed out at 15px for descriptions and 16.5px for
     card bodies, which is where most of the page actually lives. */
  --fs-micro: 11.5px; /* image captions, badges */
  --fs-label: 12.5px; /* THE uppercase label — eyebrows, assurances */
  --fs-meta: 13.5px; /* meta beside a list row */
  --fs-small: 15px;
  --fs-base: clamp(16px, 1.9vw, 17.5px); /* descriptions */
  --fs-mid: clamp(18px, 2.1vw, 19px); /* card bodies, list rows */
  --fs-lead: clamp(19px, 2.3vw, 22px); /* section lead-ins, the hero sub */
  --fs-body: clamp(21px, 2.4vw, 24px); /* THE LETTER */
  --fs-quote: clamp(19px, 2.4vw, 24px);

  /* Old names, remapped so the funnel pages stay in scale. */
  --fs-h1: var(--fs-d1);
  --fs-h2: var(--fs-d2);
  --fs-h3: var(--fs-d3);
  --fs-h4: var(--fs-d4);
  --fs-mega: var(--fs-price);

  --lh-tight: 0.98;
  --lh-snug: 1.1;
  --lh-body: 1.62;

  /* ----------------------------------------------------------
     LAYOUT

     One column, 720px, from the headline to the footer. The old
     1180px container is gone: every section on the page shares a
     left edge, which is most of why the page reads as a letter
     rather than a website.
     ---------------------------------------------------------- */
  --measure: 720px;
  --measure-wide: 720px; /* deliberately the same — see above */
  --container: 720px;
  --gutter: 20px;

  /* Vertical rhythm. --pad-sec is the standard section; --pad-band
     is the shorter one a CTA strip gets. */
  --pad-sec: clamp(60px, 8vw, 104px);
  --pad-band: clamp(50px, 7vw, 88px);

  /* Nothing in this system has a radius or a shadow. The token
     exists so a component that wants one has to change it here, in
     front of everybody, rather than quietly on its own. */
  --radius: 0;

  /* Room at the bottom of a page for the sticky buy bar, so the
     footer is never underneath it. */
  --buybar-h: 96px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--black);
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--fs-mid);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  text-wrap: pretty;
  overflow-x: hidden;
}

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

a {
  color: var(--red);
  text-decoration: none;
}

a:hover {
  color: var(--red-bright);
}

::selection {
  background: var(--red);
  color: #fff;
}

/* ============================================================
   ANIMATION — three, and that is the whole list.

     pulseRed   the buy button, and only the buy button
     blink      a live dot: the hero eyebrow and the sticky bar
     marquee    the "worked with" strip

   Everything else is a colour transition. All three are switched
   off wholesale under prefers-reduced-motion at the end of this
   file.
   ============================================================ */
@keyframes pulseRed {
  0% {
    box-shadow: 0 0 0 0 rgba(133, 0, 1, 0.55);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 20px rgba(133, 0, 1, 0);
    transform: scale(1.015);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(133, 0, 1, 0);
    transform: scale(1);
  }
}

/* The same heartbeat for the white button on the red ground, drawn in
   the ground's darkest value — a red halo on red is invisible. */
@keyframes pulseOnRed {
  0% {
    box-shadow: 0 0 0 0 rgba(10, 9, 8, 0.45);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 20px rgba(10, 9, 8, 0);
    transform: scale(1.015);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(10, 9, 8, 0);
    transform: scale(1);
  }
}

/* And again for the bright-red button on the near-black ground. Drawn
   in the button's own colour so the halo reads against #0a0908. */
@keyframes pulseOnDark {
  0% {
    box-shadow: 0 0 0 0 rgba(240, 61, 62, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 20px rgba(240, 61, 62, 0);
    transform: scale(1.015);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(240, 61, 62, 0);
    transform: scale(1);
  }
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.15;
  }
}

/* The shift is a variable because it has to equal the width of exactly ONE
   copy of the track's contents, and how much of the track that is depends on
   how many copies the caller rendered. Two copies is -50%, four is -25%. Get
   it wrong and the loop jumps or leaves a hole. */
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(var(--marquee-shift, -50%));
  }
}

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */

/* Every section on the site is one of these four grounds. They
   alternate down the page; two of the same in a row is a bug. */
.sec {
  padding: var(--pad-sec) var(--gutter);
}

.sec--white {
  background: var(--white);
}

.sec--cream {
  background: var(--cream);
}

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

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

/* The letter column. Also .container, for the pages still written
   against the old name. */
.wrap,
.container {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
}

.container {
  padding-inline: var(--gutter);
}

/* ============================================================
   DISPLAY TYPE

   .d1-.d5 are Anton. They set family, case, weight and
   line-height, so no component has to remember that Anton is 400
   and that a heading in it is always uppercase.
   ============================================================ */
.d1,
.d2,
.d3,
.d4,
.d5 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.002em;
  color: inherit;
}

.d1 {
  font-size: var(--fs-d1);
  line-height: 0.98;
}

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

.d3 {
  font-size: var(--fs-d3);
  line-height: 1.04;
}

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

.d5 {
  font-size: var(--fs-d5);
  line-height: 1.12;
}

/* The accent phrase inside a headline — the half of the sentence that
   carries the turn ("It isn't your skills", "for one payment").
   Which colour it takes is a property of the GROUND, not of the
   component, which is why it lives here: red on light, the brighter
   red on black (where #850001 disappears), and black on red.

   Headings are often passed to SectionHeader and CtaBand as markup, so
   these have to be global rather than scoped. */
.hl {
  color: var(--red);
}

.sec--dark .hl {
  color: var(--red-bright);
}

/* On the red ground the accent phrase was black, which against #850001
   is about 1.5:1 — the least legible text on the site sat in the half
   of the closing headline that carries the close. It then spent a
   round as white-with-a-rule-under-it, which was legible but read as
   an underline rather than as emphasis.

   It is the highlighter, inverted: the same device the letter uses on
   every other ground, in the only two colours available here. On red
   the tint has to become the ink and the ink the tint, so the phrase
   is a white slab with red text — the loudest thing the palette can
   make, and still the house mark rather than a fourth device.

   A slab was tried here and does not work: Anton at display size has
   deep ascenders and descenders, so a painted box behind a phrase
   that wraps overlaps the line above it and swallows the words. No
   amount of leading fixes it without opening a hole in the headline.

   So on red the mark is made of contrast rather than of a box. The
   accent phrase is pure white; the rest of the headline steps back to
   about three-quarter white (see .band__line). Nothing is drawn, and
   the phrase that carries the close is simply the brightest thing in
   the band. */
.sec--red .hl {
  color: #fff;
}

/* ============================================================
   THE PILL — the section tag.

   A sales letter this long is scrolled far faster than it is
   read, and a reader who is scanning needs to know what section
   they have landed in before they decide to slow down. Every
   section heading gets one short uppercase tag above it, on its
   own slab, so the tag is findable at speed in a way an
   unbacked .eyebrow is not.

   One per section, two or three words, and never a sentence.
   ============================================================ */
.pill {
  display: inline-block;
  margin: 0 0 14px;
  padding: 9px 15px 8px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-ui);
  /* Larger than --fs-label. A pill is not an eyebrow: the eyebrow sits
     beside something and can be quiet, the pill has to be readable at
     scroll speed with nothing next to it. King Kong runs theirs at
     16px flat. */
  font-size: clamp(13px, 3.4vw, 15px);
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.sec--dark .pill {
  background: var(--red-bright);
  color: var(--black);
}

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

/* Centred, for the pill over a centred section heading. */
.pill--center {
  display: table;
  margin-inline: auto;
}

/* The 90x6 red bar under a centred section heading. It is the only
   divider a heading gets: no underline, no border-bottom, no icon. */
.rule {
  width: 90px;
  height: 6px;
  background: var(--red);
  margin: 0 auto clamp(30px, 4.5vw, 48px);
}

.rule--tight {
  margin-bottom: 20px;
}

/* The uppercase micro-label above a heading or beside a number.
   Figtree 800, wide tracking. Colour is set by the caller: red on
   light, --red-bright on dark, --gray-500 for a caption. */
.eyebrow {
  display: block;
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}

.eyebrow--wide {
  letter-spacing: 0.14em;
}

.eyebrow--dark {
  color: var(--red-bright);
}

/* The caption variant. --gray-500 is 3.6:1 on white, which fails AA for a
   12.5px label — and this label's whole job is to name the proof visual under
   it. It takes the ground into account rather than being one grey: the mid
   grey is legible on light and the light grey is legible on dark. */
.eyebrow--mute {
  color: var(--gray-600);
}

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

/* ============================================================
   EMPHASIS — three devices, used sparingly.

     <strong>              the phrase that carries the point
     <mark>                a red slab; roughly one per section
     <span class="u">      a 3px red rule under a promise

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

/* A HIGHLIGHTER, not a badge.

   This was a solid --red slab with white text. On a two-word phrase that is a
   badge, and on a full clause it is a red bar with the sentence trapped inside
   it — the reader stops reading the letter and starts reading a label. The
   reference letters mark a pivot phrase with a soft tint and leave the ink
   dark, so the phrase stays part of the sentence it is in and the eye is drawn
   to it without leaving the line.

   Square, like everything else. A marker stroke has no rounded corners. */
mark {
  background: linear-gradient(-180deg, #ffd6d1 12%, #ffe8e5 96%);
  color: var(--ink);
  padding: 0.08em 0.1em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* On the dark and red grounds a pale tint would be a white bar. The mark
   becomes a wash of the ground's own accent instead, with the ink kept white
   so the phrase still reads as running text. */
.sec--dark mark,
.on-dark mark {
  background: rgba(240, 61, 62, 0.26);
  color: #fff;
}

.sec--red mark {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
}

.u {
  box-shadow: inset 0 -3px 0 var(--red);
  color: var(--em-strong, var(--ink));
  font-weight: 700;
}

.on-dark,
.sec--dark,
.sec--red {
  --em-strong: #ffffff;
}

/* ============================================================
   THE TURN

   Every section of a sales letter has one line the rest of it
   exists to set up — "The problem is the trust your offer
   requires", "I stopped chasing money". Once per section at most.

   THE TURN WAS A SLAB, AND IT SHOULD NOT HAVE BEEN. It was a
   full-width black rectangle in uppercase Anton dropped into the
   middle of running prose, and it read as a button — or, in the
   --bare variant, as a section heading. Either way the reader
   stopped reading the letter and looked at a piece of furniture,
   which is the opposite of what the line is for: the whole value
   of a turn is that the reader arrives at it still reading.

   So a turn is now a LINE OF THE LETTER. Same face, same colour,
   same left edge as the sentences around it — a step up in size
   and weight, air either side, and a <mark> highlight on the
   phrase that actually turns. That is the entire vocabulary, and
   it is the one the reference letters use: they mark words, not
   paragraphs.
   ============================================================ */
.turn {
  display: block;
  margin: clamp(30px, 4vw, 42px) 0;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: clamp(26px, 4.2vw, 34px);
  /* Looser than the letter around it, because a <mark> paints a box
     behind the line and at body leading the boxes on consecutive
     lines meet and read as one solid block. */
  line-height: 1.38;
  color: var(--ink);
}

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

/* .turn--bare meant "this one has no slab". Nothing has a slab any
   more, so it is a no-op kept because several components still name
   it and removing it would be markup churn for no rendered change. */

/* The ONE turn that stays a slab. --red is not a line of the letter:
   it is the page stopping to make a standalone statement — the
   refund promise, "I stopped chasing money and it started chasing
   me" — and those are the moments a reader is supposed to look at
   rather than read past. One per page is the budget. */
.turn--red {
  padding: clamp(22px, 3.4vw, 34px);
  background: var(--red);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-d3);
  line-height: 1.1;
  text-transform: uppercase;
}

.turn--red mark {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
}

/* Headline sentence break: no one-word orphan lines. Below 640px
   the column is narrow enough that forcing a break causes worse
   wraps than it prevents. */
.sentence {
  display: block;
}

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

/* ============================================================
   PROSE

   .prose is the letter itself: one beat per paragraph, generous
   space between them, 24px at desktop. Anything inside a card or
   a list uses --fs-mid instead and does not get this class.
   ============================================================ */
.prose {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-body);
}

.prose > p {
  margin: 0 0 26px;
}

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

/* The red ground was missing its twin here for as long as .prose has existed,
   because until the upsell page was rewritten nothing had ever set running
   copy on red — the CTA bands are headline, price and button only. Left
   unstated, .prose keeps --ink-body (#241e1b) on #850001, which is about
   1.7:1 and effectively invisible. */
.sec--dark .prose,
.on-dark .prose {
  color: var(--sand);
}

/* Not --sand, which is tuned for #0a0908 and lands at about 4.5:1 on the red
   ground — exactly the AA threshold, for copy that is 21px regular rather than
   large. Red is a much lighter ground than black and takes a much lighter ink.
   This matches how .assurances and .price__was already treat it. */
.sec--red .prose {
  color: rgba(255, 255, 255, 0.88);
}

/* A quiet aside inside the letter — the "that's like getting
   married before the first date" lines. */
.aside {
  font-style: italic;
  color: var(--ink-soft);
}

/* Pull quote: the red bar down the left. */
.pull {
  padding-left: 22px;
  border-left: 5px solid var(--red);
  font-style: italic;
  color: var(--ink-soft);
}

/* ============================================================
   CARDS AND CALLOUTS

   A card is a different ground, never an outlined box. On white it
   is cream; on cream it is white; on black it is a 1px
   --line-dark rule, because a fifth grey ground would muddy the
   dark sections.
   ============================================================ */
.card {
  padding: clamp(22px, 2.8vw, 30px);
  background: var(--cream);
}

.sec--cream .card {
  background: var(--white);
}

.sec--dark .card {
  background: none;
  border: 1px solid var(--line-dark);
}

/* The "how you'll know it worked" block: a card with a fat red
   edge and a label above the copy. */
.note {
  margin: 0;
  padding: 20px 22px;
  border-left: 6px solid var(--red);
  background: var(--white);
  font-size: var(--fs-mid);
  line-height: 1.6;
  color: var(--ink-soft);
}

.sec--dark .note {
  background: var(--black-2);
  color: var(--sand);
}

.note__label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}

.sec--dark .note__label {
  color: var(--red-bright);
}

/* ============================================================
   LISTS

   Two shapes. .ticks is a red square with a glyph in it (an
   outcome); .steps-list is a numbered row on its own ground (a
   procedure). Neither uses list-style.
   ============================================================ */
.ticks,
.steps-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.ticks {
  --tick-w: 26px;
  --tick-gap: 14px;
  gap: 14px;
  font-size: var(--fs-mid);
  line-height: 1.5;
}

/* The marker is absolutely positioned rather than a flex sibling.
   A flex row turns every inline ELEMENT in the item into its own
   column, so a row containing a <strong> renders as two columns
   with a gap down the middle. Absolute positioning keeps the row
   as ordinary flowing text whatever markup a caller puts in it. */
.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;
  /* The FIRST line, not the middle of the item: on a three-line row
     a centred marker floats beside line two with nothing next to it. */
  top: 0;
  width: var(--tick-w);
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

/* The lighter variant: a red glyph, no slab. For the long "it
   didn't matter if they were" lists. */
.ticks--plain {
  --tick-w: 1em;
  --tick-gap: 10px;
}

.ticks--plain > li {
  min-height: 0;
}

.ticks--plain > li::before {
  height: auto;
  min-height: 1.5em;
  background: none;
  color: var(--red);
  font-weight: 700;
  justify-content: flex-start;
}

.ticks--arrow > li::before {
  content: "\2192";
}

.ticks--no > li::before {
  content: "\2715";
}

/* The marker takes its colour from the ground, like everything else that
   carries the accent. #850001 on #0a0908 is about 1.3:1 — on a dark section
   the tick slab all but disappears, and a list of outcomes loses the thing
   marking them as outcomes. This was invisible until the upsell page put
   .ticks on a dark ground for the first time. */
.sec--dark .ticks > li::before,
.on-dark .ticks > li::before {
  background: var(--red-bright);
  color: var(--black);
}

.sec--red .ticks > li::before {
  background: #fff;
  color: var(--red);
}

/* The plain variant is a glyph with no slab, so it is the glyph that has to
   change colour rather than the box behind it. */
.sec--dark .ticks--plain > li::before,
.on-dark .ticks--plain > li::before {
  background: none;
  color: var(--red-bright);
}

.sec--red .ticks--plain > li::before {
  background: none;
  color: #fff;
}

.steps-list {
  gap: 10px;
  counter-reset: step;
}

/* Same absolute-marker construction as .ticks, and for the same reason —
   these rows carry <strong> and <em> from the copy. */
.steps-list > li {
  position: relative;
  padding: 18px 20px 18px 56px;
  background: var(--white);
  font-size: var(--fs-mid);
  line-height: 1.55;
}

.steps-list > li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 20px;
  top: 18px;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.55;
  color: var(--red);
}

.sec--dark .steps-list > li {
  background: none;
  border: 1px solid var(--line-dark-2);
  color: #fff;
}

.sec--dark .steps-list > li::before {
  color: var(--red-bright);
}

/* ============================================================
   BUTTONS

   One button. It is a red slab, the width of the column, Anton,
   uppercase, and it pulses. The variant is which ground it sits
   on: red on light and dark, black on a red ground.

   .btn--pulse is opt-in rather than the default: three pulsing
   buttons on one screen cancel each other out. The rule is the
   hero, the last CTA band, the order box and the sticky bar.
   ============================================================ */
.btn {
  display: block;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  padding: clamp(22px, 4.4vw, 28px) 18px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 400;
  /* 25px at 390px, 32px by the time the column is full width. The old
     floor was 19px, which on a phone read as a link rather than as the
     one thing on the screen you are meant to press. King Kong sets the
     display-face label on their mobile CTA at 28px against 22px body —
     the button is the one element allowed to be larger than the copy
     around it, and the floor is what enforces that on a phone. */
  font-size: clamp(25px, 6vw, 32px);
  letter-spacing: 0.02em;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn:hover {
  background: var(--red-hover);
  color: #fff;
}

/* The second line inside the button: what actually happens when you
   press it. Figtree, so it cannot be mistaken for part of the Anton
   label above it. */
.btn__sub {
  display: block;
  margin-top: 7px;
  font-family: var(--font-ui);
  font-size: clamp(12px, 3vw, 14px);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

/* On a DARK ground the button takes the bright red. --red is #850001
   against a #0a0908 section: about 1.3:1 between the slab and the
   ground it sits on, so it had no edge at all and read as a dark
   shape with words on it rather than as the thing to press. This is
   exactly the case --red-bright exists for, and the same reasoning
   already applied to .ticks, the show-up bar and .pill.

   White ink on it. #f03d3e carries white at about 3.4:1, which clears
   the 3:1 that large text needs and is what the label is — 25px+ of
   uppercase Anton. The sub-line under it is small enough to be the
   weak point, so it runs at full white rather than the translucency
   the other grounds use. */
.sec--dark .btn,
.on-dark .btn {
  background: var(--red-bright);
  color: #fff;
}

.sec--dark .btn:hover,
.on-dark .btn:hover {
  background: #fff;
  color: var(--red);
}

.sec--dark .btn .btn__sub,
.on-dark .btn .btn__sub {
  color: #fff;
}

.sec--dark .btn:hover .btn__sub,
.on-dark .btn:hover .btn__sub {
  color: rgba(133, 0, 1, 0.7);
}

/* The heartbeat has to be drawn in the ground's accent too — a
   #850001 halo expanding into #0a0908 is invisible. */
.sec--dark .btn--pulse,
.on-dark .btn--pulse {
  animation-name: pulseOnDark;
}

/* On a red ground the button has to be the other colour, or it is
   not a button. It was black, which on #850001 is the LOWEST-contrast
   thing on the band — the button receded exactly where it had to
   shout. White is the far end of the ground it sits on. */
.btn--onred {
  background: #fff;
  color: var(--red);
}

.btn--onred .btn__sub {
  color: rgba(133, 0, 1, 0.72);
}

.btn--onred:hover {
  background: var(--black);
  color: #fff;
}

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

/* THE SECOND BUTTON.

   Where two buttons sit side by side and one of them is the one we
   would rather they pressed, they cannot both be solid slabs — two
   equal buttons is not a choice presented, it is a decision handed
   back to the reader. This is the quieter one: the same size and the
   same shape, so it is obviously the same kind of thing, but drawn as
   an outline so the filled one beside it reads as the default.

   It takes its colour from the ground through currentColor, so the
   ground rules above still decide what red means here. */
.btn--ghost {
  background: transparent;
  border: 2px solid currentColor;
}

.sec--dark .btn--ghost,
.on-dark .btn--ghost {
  background: transparent;
  color: var(--red-bright);
}

.sec--dark .btn--ghost .btn__sub,
.on-dark .btn--ghost .btn__sub {
  color: rgba(240, 61, 62, 0.72);
}

.sec--red .btn--ghost,
.btn--onred.btn--ghost {
  background: transparent;
  color: #fff;
}

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

.btn--ghost:hover {
  background: currentColor;
}

.sec--dark .btn--ghost:hover,
.on-dark .btn--ghost:hover {
  background: var(--red-bright);
  color: var(--black);
}

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

/* Every hover that changes a button's ground has to restate its sub-line too.
   The ghost variants did not, so hovering filled the button with exactly the
   colour the sub-line was drawn in and "One click · card on file" disappeared
   — white on white on the red band, red on red on the dark one. A sub-line
   that vanishes under the cursor is worse than no sub-line: it reads as the
   button breaking. */
.sec--dark .btn--ghost:hover .btn__sub,
.on-dark .btn--ghost:hover .btn__sub {
  color: rgba(10, 9, 8, 0.7);
}

.sec--red .btn--ghost:hover .btn__sub,
.btn--onred.btn--ghost:hover .btn__sub {
  color: rgba(133, 0, 1, 0.72);
}

.btn--pulse {
  animation: pulseRed 2.1s ease-in-out infinite;
}

/* A white slab pulsing red glows into the red ground and looks like a
   halo rather than a heartbeat, so on red the pulse is drawn in the
   ground's own darkest value instead. */
.sec--red .btn--pulse {
  animation-name: pulseOnRed;
}

/* Until the upsell page was rewritten every .btn on the site was an <a>, so
   the primitive never needed a disabled state. The tier buttons are real
   <button>s that the purchase script disables while a charge is in flight,
   and a disabled slab that looks identical to a live one invites a second
   click on a payment already in progress.

   The pulse has to stop with it — a button still beating is still asking to
   be pressed — which is why this sits AFTER both pulse rules rather than
   beside the base .btn. It outweighs `.btn--pulse` on specificity but ties
   with `.sec--red .btn--pulse`, and on a tie the later rule wins. */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  animation: none;
}

/* The line under a button: the friction remover. One short sentence
   answering "and then what happens?" — never a second sales claim. */
.cta-note {
  margin: 12px auto 0;
  max-width: 560px;
  font-size: clamp(13px, 3.2vw, 14.5px);
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  color: var(--ink-soft);
}

/* --gray-500 on #0a0908 is about 4.9:1, which for a 13px line makes the
   reassurance the dimmest thing on a dark band — under the loudest thing on
   it. The note is there to remove friction at the exact moment somebody is
   deciding; it cannot be the hardest line to read. */
.sec--dark .cta-note,
.on-dark .cta-note {
  color: var(--gray-400);
}

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

/* A bordered link, not a slab: the footer's email button. */
.btn-line {
  display: inline-block;
  padding: 14px 20px;
  border: 1px solid #3a322e;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-line:hover {
  background: #fff;
  color: var(--black);
}

/* ============================================================
   PRICE

   $97 beside a struck $397 and the one-time line. Three sizes:
   default (the hero), --lg (a CTA band), --xl (the order box).
   ============================================================ */
.price {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
}

.price__now {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 9vw, 50px);
  line-height: 0.85;
  color: var(--red);
}

.price__side {
  display: flex;
  flex-direction: column;
  /* Not `stretch`, which is the flex default. A .price__save inside this
     column is an inline-block slab, and a stretched flex child gets
     blockified to the width of the struck price beside it — at which point
     the saving reads as a second, smaller button sitting under the anchor
     rather than as a badge on it. */
  align-items: flex-start;
  gap: 4px;
  padding-bottom: 6px;
  text-align: left;
}

.price__was {
  font-size: clamp(19px, 4.6vw, 22px);
  font-weight: 600;
  color: var(--gray-400);
  text-decoration: line-through;
}

/* The saving, stated. A struck $397 beside a $97 asks the reader to do
   the subtraction; most of them will not. This does it for them, and
   it is the one place on the page where a number gets a slab of its
   own. Computed from the two prices by the component, never typed. */
.price__save {
  display: inline-block;
  padding: 5px 9px 4px;
  background: var(--red);
  color: #fff;
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.sec--dark .price__save,
.on-dark .price__save {
  background: var(--red-bright);
  color: var(--black);
}

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

.price__once {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
}

.price--lg .price__now {
  font-size: var(--fs-price);
}

.price--xl .price__now {
  font-size: clamp(52px, 8vw, 78px);
  line-height: 0.84;
}

/* On dark and red grounds the price is white, and the strike goes
   grey or translucent. */
.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-600);
}

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

.sec--dark .price__once,
.on-dark .price__once {
  color: var(--red-bright);
}

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

/* ============================================================
   ASSURANCES — the three-up guarantee line under a CTA.
   ============================================================ */
.assurances {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  /* Each assurance is one unit. Without this the flex row lets a line
     break inside a hyphenated phrase and the reader gets "MONEY- /
     BACK GUARANTEE" across two centred lines. */
  text-wrap: balance;
  color: var(--gray-600);
}

.assurances > li {
  max-width: 100%;
}

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

.sec--dark .assurances {
  color: var(--gray-500);
}

/* ============================================================
   THE STACK — what is in the box, and what each part is worth.

   The order box used to list six lines with a duration beside
   each one. A duration tells a reader how long something takes;
   it does not tell them what it is worth, so the $97 at the
   bottom had nothing to be small against. This puts a figure on
   every line and totals it, which is the whole mechanism of
   price anchoring: the reader does the comparison themselves.

   Every figure comes from src/data/offer.ts and the total is
   summed there, never typed — a stack whose total does not equal
   its rows is the fastest way to lose a buyer at the last step.
   ============================================================ */
.stack {
  display: flex;
  flex-direction: column;
}

.stack__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 16px clamp(16px, 2.4vw, 26px);
  border-bottom: 1px solid var(--line-soft);
}

.stack__name {
  font-size: var(--fs-mid);
  font-weight: 700;
  color: var(--ink);
}

.stack__note {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-meta);
  font-weight: 500;
  color: var(--gray-500);
}

.stack__val {
  flex: none;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(19px, 4.4vw, 22px);
  line-height: 1;
  color: var(--gray-400);
  text-align: right;
}

/* The one row that is not a price: the call. It is the reason this
   costs $97 and not $27, so it gets the red ground rather than a line
   in the table. */
.stack__row--lead {
  background: var(--red);
  border-bottom: 0;
  color: #fff;
}

.stack__row--lead .stack__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 4.6vw, 24px);
  text-transform: uppercase;
  color: #fff;
}

.stack__row--lead .stack__note {
  color: rgba(255, 255, 255, 0.78);
}

.stack__row--lead .stack__val {
  color: #fff;
}

.stack__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 18px clamp(16px, 2.4vw, 26px);
  background: var(--cream);
  border-bottom: 0;
}

.stack__total-label {
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

.stack__total-val {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 6vw, 32px);
  line-height: 1;
  color: var(--ink);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

/* ============================================================
   THE SEAL — a flat red circle with a number in it.

   The guarantee mark. No ribbon, no badge graphic, no gradient:
   it and the small "no" glyphs are the only circles on the site,
   which is what stops it reading as clip art. Lives here rather
   than in GuaranteeSection because the ACL page needs the same
   mark and a second copy of it would drift.
   ============================================================ */
.seal {
  flex: none;
  width: clamp(112px, 16vw, 168px);
  height: clamp(112px, 16vw, 168px);
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sec--dark .seal,
.on-dark .seal {
  background: var(--red-bright);
  color: var(--black);
}

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

.seal__n {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 72px);
  line-height: 0.85;
}

.seal__unit {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.seal--sm {
  width: clamp(88px, 11vw, 104px);
  height: clamp(88px, 11vw, 104px);
}

.seal--sm .seal__n {
  font-size: clamp(36px, 5vw, 44px);
}

.seal--sm .seal__unit {
  font-size: 11px;
  letter-spacing: 0.14em;
}

/* ============================================================
   PLACEHOLDER — the diagonal hatch that stands in for artwork
   that has not arrived. Every one of these is a TODO with a
   visible edge, which is the point: it should look unfinished.
   ============================================================ */
.ph {
  position: relative;
  background: repeating-linear-gradient(
    135deg,
    #e8e2da 0 12px,
    #f2ede6 12px 24px
  );
  outline: 1px solid var(--line);
  display: flex;
  align-items: flex-end;
  padding: 12px;
}

.ph__label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-500);
}

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

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

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}