/* The Missed-Call Fix: classic direct-response sales letter.
   System fonts only, one narrow column, inline SVG seals (see the <svg> sprite in each page). */

:root {
  --paper: #fffdf6;
  --page: #f3efe3;
  --ink: #1a1a1a;
  --ink-2: #444;
  --muted: #5f5f5f;
  --red: #b00000;
  --red-dark: #8a0000;
  --green: #1d7a31;
  --gold: #c99a16;
  --marker: #fff176;
  --line: #d8d2c2;
  --focus: #1a5fd0;
  --head: "Arial Black", "Arial Bold", Gadget, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: Georgia, "Times New Roman", Times, serif;
  --hand: "Segoe Script", "Bradley Hand", "Brush Script MT", "Snell Roundhand", cursive;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 19px/1.6 var(--serif);
}
@media (min-width: 720px) { body { font-size: 20px; } }

img, svg { max-width: 100%; }
a { color: #0b3fa8; }
a:hover { color: var(--red); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
[hidden] { display: none !important; }

.skip { position: absolute; left: -9999px; top: 8px; background: #fff; padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; }

/* The letter: one white sheet on a cream page */
.letter {
  max-width: 760px;
  margin: 0 auto;
  background: var(--paper);
  padding: 0 16px 40px;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  min-height: 100vh;
}
@media (min-width: 720px) { .letter { padding: 0 40px 56px; } }
.wrap, .narrow { max-width: 680px; margin: 0 auto; }

/* Top line */
.top {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--line);
  font: 700 15px/1.2 var(--sans);
  padding: 4px 0;
}
.top .brand, .top .tel { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.top .brand { font-family: var(--head); letter-spacing: .02em; }
.top .tel { color: var(--red); }
.top .tel:hover { text-decoration: underline; }

/* Status bars (upsell, thanks) */
.bar {
  margin: 0 -16px;
  padding: 12px 16px;
  text-align: center;
  font: 700 18px/1.35 var(--sans);
  color: #fff;
}
@media (min-width: 720px) { .bar { margin: 0 -40px; font-size: 20px; } }
.bar--red { background: var(--red); }
.bar--green { background: var(--green); }
.bar b { font-family: var(--head); text-transform: uppercase; letter-spacing: .02em; }

.steps { margin: 18px 0 0; font: 700 14px/1.3 var(--sans); }
.steps__label { text-align: center; color: var(--ink-2); margin: 0 0 6px; }
.steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; counter-reset: s; }
.steps li { padding: 8px 4px; text-align: center; background: #e6e1d3; color: var(--ink-2); }
.steps li.done { background: var(--green); color: #fff; }
.steps li.now { background: #ffb300; color: var(--ink); }

/* Pre-headline */
.pre {
  margin: 22px 0 0;
  padding: 8px 12px;
  border-top: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  text-align: center;
  font: italic 400 17px/1.45 var(--serif);
  color: var(--ink-2);
}

/* Headlines */
h1, h2, h3 { font-family: var(--head); font-weight: 900; line-height: 1.15; margin: 0; }
h1 {
  margin-top: 22px;
  font-size: clamp(1.75rem, 6.6vw, 2.6rem);
  color: var(--red);
  text-align: center;
  letter-spacing: -.01em;
}
h1 u { text-decoration-thickness: 3px; text-underline-offset: 5px; }
h2 { font-size: clamp(1.45rem, 4.8vw, 1.9rem); color: var(--red); text-align: center; margin: 44px 0 18px; }
h3 { font-size: 1.15rem; color: var(--ink); margin: 0 0 8px; }

.sub { font: 700 1.15em/1.45 var(--sans); text-align: center; margin: 18px 0 0; }

p { margin: 0 0 1em; }
.lead { margin-top: 20px; }
.red { color: var(--red); font-weight: 700; }
mark, .hl {
  background: linear-gradient(transparent 55%, var(--marker) 55%);
  color: inherit;
  padding: 0 .1em;
}
.muted { color: var(--muted); }
.center { text-align: center; }

hr.cut { border: 0; border-top: 2px dashed var(--line); margin: 36px 0; }

/* Lists */
.checks { list-style: none; margin: 0 0 1em; padding: 0; }
.checks li { position: relative; padding-left: 34px; margin-bottom: 10px; }
.checks li::before {
  content: "\2714";
  position: absolute; left: 0; top: 0;
  color: var(--green); font: 900 1.15em/1.4 var(--sans);
}
.crosses li::before { content: "\2718"; color: var(--red); }

.chapters { margin: 0 0 1em; padding-left: 0; list-style: none; counter-reset: ch; }
.chapters li { counter-increment: ch; position: relative; padding: 8px 0 8px 46px; border-bottom: 1px dotted var(--line); }
.chapters li::before {
  content: counter(ch);
  position: absolute; left: 0; top: 7px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--red); color: #fff;
  font: 900 16px/32px var(--sans); text-align: center;
}

/* Illustration: the call, step by step */
.callflow {
  margin: 28px auto;
  max-width: 420px;
  border: 2px solid var(--ink);
  background: #fff;
  padding: 14px 16px;
  font: 400 16px/1.4 var(--sans);
  box-shadow: 4px 4px 0 rgba(0,0,0,.12);
}
.callflow__row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; }
.callflow__row + .callflow__row { border-top: 1px dashed var(--line); }
.callflow__k { color: var(--muted); }
.callflow__v { font-weight: 700; text-align: right; }
.callflow__row--done .callflow__v { color: var(--green); }
.callflow figcaption { font-size: 14px; color: var(--muted); text-align: center; margin-top: 6px; }

/* Who it's for */
.fit { display: grid; gap: 16px; margin: 8px 0 0; }
@media (min-width: 640px) { .fit { grid-template-columns: 1fr 1fr; } }
.fit > div { border: 2px solid var(--line); background: #fff; padding: 16px 18px; }
.fit > div p { margin: 0; }
.fit .yes { border-color: var(--green); }
.fit .no { border-color: var(--red); }

/* ---------- Buy button ---------- */
.cta { margin: 28px 0 8px; text-align: center; }
.cta form { margin: 0; }
.cta__row { display: flex; align-items: center; justify-content: center; gap: 6px; }
.cta__row > form, .cta__row > .btn { flex: 1 1 auto; max-width: 560px; }
.arrow { width: 64px; height: 56px; flex: 0 0 auto; color: var(--red); display: none; }
.arrow--r { transform: scaleX(-1); }
.arrow--down { display: block; width: 44px; height: 46px; margin: 0 auto 4px; }
@media (min-width: 640px) {
  .arrow { display: block; }
  .arrow--down { display: none; }
}

.btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%;
  min-height: 64px;
  padding: 14px 12px;
  border: 1px solid #c77700;
  border-radius: 10px;
  background: linear-gradient(#ffcc00, #ff9900);
  color: #1a1a1a;
  font: 700 clamp(18px, 5.2vw, 23px)/1.2 var(--sans);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 3px 0 #b36b00, 0 6px 14px rgba(0,0,0,.18);
  -webkit-appearance: none; appearance: none;
}
.btn:hover { background: linear-gradient(#ffd633, #ffa31a); color: #1a1a1a; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #b36b00, 0 3px 8px rgba(0,0,0,.18); }
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.btn small { display: block; margin-top: 4px; font: 400 15px/1.3 var(--sans); }
.btn[aria-busy="true"] { opacity: .75; cursor: progress; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn--plain {
  background: #fff; border: 2px solid var(--ink-2); color: var(--ink);
  box-shadow: 0 2px 0 #bbb; font-size: 19px; min-height: 56px;
}
.btn--plain:hover { background: #fffbe0; }
.btn--plain[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; opacity: 1; }

.stack { display: grid; gap: 12px; }

/* Trust badges under each button: honest facts only */
.trust {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px;
  font: 400 14px/1.3 var(--sans); color: var(--ink-2);
}
.trust li { display: inline-flex; align-items: center; gap: 6px; }
.trust svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--green); }
.trust .cards { gap: 4px; }
.card-chip {
  display: inline-block; padding: 1px 5px; border: 1px solid #9a9a9a; border-radius: 3px;
  font: 700 11px/1.4 var(--sans); color: var(--ink-2); background: #fff;
}

.notice {
  margin: 0 0 14px; padding: 12px 14px;
  border: 2px solid var(--red); background: #fff3f3;
  font: 400 16px/1.45 var(--sans); color: var(--ink);
  text-align: left;
}

/* ---------- Guarantee ---------- */
.guarantee { display: grid; gap: 18px; align-items: center; justify-items: center; margin: 12px 0 0; }
@media (min-width: 640px) { .guarantee { grid-template-columns: 170px 1fr; } }
.seal { width: 160px; height: 184px; }
.guarantee__box {
  border: 3px dashed var(--ink-2);
  background: #fff;
  padding: 18px 20px;
}
.guarantee__box p:last-child { margin-bottom: 0; }
.sign { font: 400 1.6em/1.2 var(--hand); color: #1d3a8a; margin-top: 8px; }

/* FAQ */
.qa { margin: 0 0 22px; }
.qa .q { font: 700 1em/1.4 var(--sans); margin: 0 0 6px; }
.qa .q::before { content: "Q: "; color: var(--red); }
.qa .a { margin: 0; }
.qa .a::before { content: "A: "; font-weight: 700; font-family: var(--sans); }

.plus { background: #fff; border-left: 5px solid var(--gold); padding: 10px 14px; }

/* Thanks page */
.links-list { display: grid; gap: 12px; margin-top: 20px; }
.links-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 60px; padding: 12px 18px;
  border: 1px solid #c77700; border-radius: 10px;
  background: linear-gradient(#ffcc00, #ff9900);
  color: #1a1a1a; text-decoration: none;
  font: 700 20px/1.25 var(--sans);
  box-shadow: 0 3px 0 #b36b00, 0 6px 14px rgba(0,0,0,.15);
}
.links-list a span:last-child { font: 700 13px/1 var(--sans); text-transform: uppercase; letter-spacing: .06em; background: rgba(255,255,255,.55); padding: 5px 8px; border-radius: 4px; }
.links-list a span:last-child:empty { display: none; }
.links-list a[aria-disabled="true"] { background: #eee; border-color: #ccc; box-shadow: none; color: var(--muted); font-weight: 400; }

.box {
  border: 2px solid var(--ink);
  background: #fff;
  padding: 18px 20px;
  margin: 8px 0 0;
}
.box h2 { margin-top: 0; }
.choice { display: grid; gap: 12px; }
@media (min-width: 560px) { .choice { grid-template-columns: 1fr 1fr; } }

.no-thanks {
  display: inline-block; margin-top: 16px; padding: 10px 4px;
  color: var(--muted); font: 400 16px/1.4 var(--sans);
}
.no-thanks:hover { color: var(--ink); }

/* Legal pages */
.draft {
  margin: 20px 0 0; padding: 10px 14px;
  background: var(--marker); border: 2px dashed var(--red);
  font: 900 16px/1.3 var(--sans); text-transform: uppercase; color: var(--red-dark); text-align: center;
}
.legal h1 { font-size: clamp(1.6rem, 5vw, 2.1rem); }
.legal h2 { text-align: left; color: var(--ink); font-size: 1.2rem; margin: 30px 0 8px; }
.legal p, .legal li { font-size: .95em; }

/* Footer */
.foot {
  margin-top: 48px; padding-top: 18px;
  border-top: 1px solid var(--line);
  font: 400 13px/1.55 var(--sans); color: var(--muted);
  text-align: center;
}
.foot p { margin: 0 0 10px; }
.foot a { color: var(--muted); display: inline-block; padding: 6px 4px; }
.foot nav { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* Phone sticky buy bar (sales page, small screens only) */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: rgba(255,253,246,.97);
  border-top: 2px solid var(--red);
  transform: translateY(110%);
  transition: transform .2s ease-out;
}
.sticky .btn { min-height: 52px; font-size: 19px; }
.sticky.is-on { transform: none; }
@media (min-width: 720px) { .sticky { display: none; } }
@media (max-width: 719px) { body[data-page="sales"] .letter { padding-bottom: 96px; } }
@media (prefers-reduced-motion: reduce) { .sticky { transition: none; } .btn:active { transform: none; } }

@media print { .sticky, .cta, .trust { display: none; } }

/* Legal pages and 404 keep a .wrap inside header and footer */
.top > .wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; max-width: none; }
.legal { padding-top: 4px; }

/* ---------- New spec (Oct 2026): pre-headline bar, phone visual, checkout, bump, two choices ---------- */
.pre p { margin: 0; font: 700 17px/1.35 var(--sans); font-variant: small-caps; font-style: normal; color: var(--ink); letter-spacing: .02em; }
.pre small { display: block; margin-top: 2px; font: italic 400 14px/1.3 var(--serif); color: var(--ink-2); }
.sub--small { font-size: .95em; font-weight: 400; color: var(--ink-2); }
.lead .sub + .sub { margin-top: 10px; }

.phone { position: relative; margin: 28px auto 8px; max-width: 340px; }
.phone__body {
  border: 10px solid #1a1a1a; border-radius: 30px; background: #fff;
  padding: 18px 14px 20px; box-shadow: 6px 8px 0 rgba(0,0,0,.12);
}
.phone__ring { margin: 0 0 6px; text-align: center; font: 700 15px/1.3 var(--sans); color: var(--green); text-transform: uppercase; letter-spacing: .08em; }
.phone .callflow { margin: 0; border: 0; box-shadow: none; padding: 0; }
.seal--sm { position: absolute; right: -112px; top: 24px; width: 100px; height: 115px; }
@media (max-width: 560px) {
  .phone { max-width: 255px; margin-left: 4px; }
  .seal--sm { right: -84px; top: 30px; width: 76px; height: 88px; }
}

.small { font-size: 14px; line-height: 1.45; }
.sticky .btn { font-size: 15px; min-height: 52px; padding: 8px 10px; }

/* Checkout form */
.checkout { margin-top: 18px; }
.fields { border: 2px solid var(--line); background: #fff; margin: 0 0 18px; padding: 14px 16px 6px; }
.fields legend { padding: 0 6px; font: 900 1.05rem/1.2 var(--head); color: var(--red); }
.field { margin: 0 0 14px; }
.field label { display: block; margin: 0 0 6px; font: 700 16px/1.3 var(--sans); }
.field label .muted { font-weight: 400; font-size: 14px; }
.field input {
  width: 100%; min-height: 48px; padding: 10px 12px;
  border: 1px solid #9a948a; border-radius: 6px; background: #fff;
  font: 400 17px/1.3 var(--sans); color: var(--ink);
}
.field input:focus { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.field input[aria-invalid="true"] { border-color: var(--red); background: #fff6f6; }
.field .err { margin: 6px 0 0; color: var(--red); font: 700 14px/1.3 var(--sans); }
.payment-element { min-height: 60px; padding-bottom: 10px; }

.summary { border: 2px solid var(--ink); background: #fff; padding: 14px 16px; margin: 0 0 18px; font: 400 16px/1.4 var(--sans); }
.summary h3 { margin-bottom: 8px; }
.summary table { width: 100%; border-collapse: collapse; }
.summary td { padding: 6px 0; vertical-align: top; }
.summary .num { text-align: right; white-space: nowrap; padding-left: 12px; font-variant-numeric: tabular-nums; }
.summary tfoot td { border-top: 2px solid var(--ink); font-weight: 700; padding-top: 10px; }

.bump {
  position: relative; margin: 0 0 18px; padding: 14px 16px;
  border: 3px dashed var(--red); background: #fff7b0;
  font: 400 16px/1.45 var(--sans);
}
.bump__arrow { position: absolute; left: -58px; top: 40px; width: 56px; height: 48px; color: var(--red); display: none; }
@media (min-width: 900px) { .bump__arrow { display: block; } }
.bump__head { margin: 0 0 10px; font: 900 16px/1.3 var(--head); color: var(--red); text-transform: uppercase; }
.bump__check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; padding: 8px; margin: 0 -8px 8px; background: #fff; border: 1px solid #e0c200; }
.bump__check input { flex: 0 0 auto; width: 26px; height: 26px; margin: 0; accent-color: var(--green); }
.bump__check span { font-weight: 700; text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; }
.bump__body { margin: 0; }

.pay { display: grid; gap: 14px; align-items: center; justify-items: center; }
@media (min-width: 640px) { .pay { grid-template-columns: 130px 1fr; } .pay .seal { width: 124px; height: 142px; } }
.pay .seal { width: 110px; height: 126px; }
.pay__main { width: 100%; text-align: center; }
.pay__main .trust { justify-content: center; }

/* Thanks: two choices */
.two-ways { display: grid; gap: 16px; }
@media (min-width: 640px) { .two-ways { grid-template-columns: 1fr 1.4fr; align-items: start; } }
.two-ways > div { background: #fff; padding: 16px 18px; border: 2px solid var(--line); }
.two-ways > div p:last-child { margin-bottom: 0; }
.two-ways__dfy { border: 3px dashed var(--red) !important; background: #fffbe0 !important; }

/* ---------- Color pass (Oct 2026): navy band, stripes, colored dividers, contact bar ---------- */
:root { --navy: #13254f; --navy-2: #1d3672; --yellow: #ffd400; }

/* Contact bar on top of every page */
.topbar {
  background: var(--navy); color: #fff; text-align: center;
  font: 700 14px/1.35 var(--sans); padding: 6px 12px;
  border-bottom: 3px solid var(--red);
}
.topbar a { color: var(--yellow); text-decoration: none; display: inline-block; padding: 4px 2px; white-space: nowrap; }
.topbar a:hover { text-decoration: underline; color: #fff; }
@media (max-width: 420px) { .topbar__q { display: none; } .topbar { font-size: 13px; } }

.top .brand { color: var(--red); }

/* Contact line near buttons and guarantee */
.ask { margin: 12px 0 0; font: 400 15px/1.45 var(--sans); color: var(--ink-2); text-align: center; }
.ask a { white-space: nowrap; font-weight: 700; }
.ask--left { text-align: left; margin-top: 10px; }

/* Pre-headline on a pale yellow strip */
.pre { background: #fff3c4; }

/* Colored section dividers: red rule, gap, gold rule */
hr.cut {
  border: 0; height: 8px; margin: 36px 0;
  background: linear-gradient(var(--red) 0 3px, transparent 3px 5px, var(--gold) 5px 8px);
}

/* What's inside: navy band edge to edge of the letter */
.band { margin: 40px -16px; padding: 8px 16px 26px; }
@media (min-width: 720px) { .band { margin: 44px -40px; padding: 8px 40px 30px; } }
.band--navy { background: var(--navy); color: #fff; border-top: 6px solid var(--yellow); border-bottom: 6px solid var(--yellow); }
.band--navy h2 { color: var(--yellow); margin-top: 26px; }
.band--navy .chapters li { border-bottom-color: rgba(255,255,255,.22); }
.band--navy .chapters li::before { background: var(--yellow); color: var(--navy); }
.band--navy .plus { color: var(--ink); border-left-color: var(--red); margin-bottom: 0; }

/* Who it's for: tinted boxes */
.fit .yes { background: #effaf1; }
.fit .no { background: #fff1f1; }
.fit .yes h3 { color: var(--green); }
.fit .no h3 { color: var(--red); }

/* Guarantee box in gold */
.guarantee__box { border-color: var(--gold); background: #fffbea; }

/* FAQ questions in navy */
.qa .q { color: var(--navy); }

/* Red and yellow hazard stripes (upsell banner) */
.stripes { position: relative; height: 12px; margin: 0 -16px; overflow: hidden; }
@media (min-width: 720px) { .stripes { margin: 0 -40px; } }
.stripes::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40px; right: -40px;
  background: repeating-linear-gradient(-45deg, var(--red) 0 12px, var(--yellow) 12px 24px);
}

/* Order bump: frame of moving red/yellow stripes instead of a plain dashed border */
.bump { border: 0; background: transparent; padding: 18px 18px; isolation: isolate; }
.bump__frame { position: absolute; inset: 0; overflow: hidden; z-index: -1; }
.bump__frame::before {
  content: ""; position: absolute; inset: -30px;
  background: repeating-linear-gradient(45deg, var(--red) 0 10px, var(--yellow) 10px 20px);
}
.bump__frame::after { content: ""; position: absolute; inset: 5px; background: #fff7b0; }

/* Thanks: pilot box in navy outline */
.two-ways__diy { border-color: var(--navy) !important; }
.two-ways__diy h3 { color: var(--navy); }

/* ---------- Motion (transform and opacity only; nothing moves under prefers-reduced-motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Buy buttons: pulse twice, then a short shake */
  .cta .btn, .pay .btn:not(:disabled), .sticky .btn, .two-ways__dfy .btn { animation: nudge 4s ease-in-out 1.2s infinite; }
  .btn:hover, .btn:focus-visible { animation-play-state: paused; }
  .btn:active { animation: none; }
  @keyframes nudge {
    0%, 30%, 60%, 88%, 100% { transform: none; }
    15%, 45% { transform: scale(1.04); }
    68% { transform: rotate(-2deg); }
    72% { transform: rotate(2deg); }
    76% { transform: rotate(-2deg); }
    80% { transform: rotate(1.5deg); }
    84% { transform: rotate(-1deg); }
  }

  /* Arrows bounce toward the button */
  .arrow--down { animation: bob-y 1.1s ease-in-out infinite; }
  .arrow--l, .bump__arrow { animation: bob-x 1.1s ease-in-out infinite; }
  .arrow--r { animation: bob-x-r 1.1s ease-in-out infinite; }
  @keyframes bob-y { 50% { transform: translateY(9px); } }
  @keyframes bob-x { 50% { transform: translateX(10px); } }
  @keyframes bob-x-r { 0%, 100% { transform: scaleX(-1); } 50% { transform: scaleX(-1) translateX(10px); } }

  /* Guarantee seal breathes and tilts */
  .seal { animation: seal 5s ease-in-out infinite; transform-origin: 50% 45%; }
  @keyframes seal {
    0%, 100% { transform: rotate(-4deg) scale(1); }
    50% { transform: rotate(4deg) scale(1.06); }
  }

  /* Phone card: rings, then Answered, then Booked, on a loop */
  .phone__ring { animation: ring 7s ease-in-out infinite; }
  .phone__body { animation: buzz 7s ease-in-out infinite; }
  .phone .callflow__row { animation: step-1 7s ease-out infinite; }
  .phone .callflow__row--done { animation-name: step-2; }
  @keyframes ring {
    0%, 22% { opacity: 1; }
    3%, 9%, 15% { opacity: .35; }
    6%, 12%, 18% { opacity: 1; }
  }
  @keyframes buzz {
    0%, 20%, 100% { transform: none; }
    2%, 6%, 10%, 14%, 18% { transform: rotate(-1.5deg); }
    4%, 8%, 12%, 16% { transform: rotate(1.5deg); }
  }
  @keyframes step-1 {
    0%, 22% { opacity: 0; transform: translateY(10px); }
    28%, 92% { opacity: 1; transform: none; }
    100% { opacity: 0; transform: none; }
  }
  @keyframes step-2 {
    0%, 45% { opacity: 0; transform: translateY(10px) scale(.96); }
    52%, 92% { opacity: 1; transform: none; }
    100% { opacity: 0; transform: none; }
  }

  /* Stripes march */
  .bump__frame::before { animation: march-45 1.2s linear infinite; }
  .stripes::before { animation: march-n45 1.4s linear infinite; }
  @keyframes march-45 { to { transform: translateX(28.28px); } }
  @keyframes march-n45 { to { transform: translateX(33.94px); } }

  /* Order total pops when it changes (set by app.js) */
  .bump-pop { display: inline-block; animation: tick .45s ease-out; }
  @keyframes tick { 40% { transform: scale(1.18); } }
}

/* These need JavaScript to split words and watch the scroll; app.js adds .js-motion to <html> only when motion is allowed. */
.js-motion mark { background: none; padding: 0; }
.js-motion .hw { position: relative; z-index: 0; }
.js-motion .hw::before {
  content: ""; position: absolute; z-index: -1;
  left: -.06em; right: -.3em; top: 52%; bottom: .02em;
  background: var(--marker);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .28s ease-out;
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js-motion .hw:last-child::before { right: -.06em; }
.js-motion mark.in .hw::before { transform: none; }

.js-motion h1 .pw {
  display: inline-block; opacity: 0;
  transform: translateY(.35em) scale(.8);
  animation: pop .5s cubic-bezier(.2, 1.5, .4, 1) forwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.js-motion h1 u .pw { text-decoration: inherit; }
@keyframes pop { to { opacity: 1; transform: none; } }

.js-motion .checks li::before, .js-motion .chapters li::before {
  opacity: 0; transform: scale(0) rotate(-40deg);
  transition: opacity .2s ease-out, transform .4s cubic-bezier(.2, 1.6, .4, 1);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.js-motion .checks.in li::before, .js-motion .chapters.in li::before { opacity: 1; transform: none; }

/* Cookie banner (EEA, UK and Switzerland only; see app.js) */
.consent {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 100;
  max-width: 640px; margin: 0 auto; padding: 14px 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  background: var(--paper); color: var(--ink); border: 2px solid var(--ink);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
  font: 400 16px/1.4 var(--sans);
}
.consent p { margin: 0; flex: 1 1 240px; }
.consent a { color: var(--ink); }
.consent div { display: flex; gap: 8px; }
.consent button {
  min-height: 44px; padding: 0 18px; cursor: pointer;
  font: 700 16px var(--sans); border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
}
.consent button[data-v="1"] { background: var(--ink); color: var(--paper); }
.consent button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }