/* RetainerFree site. One stylesheet. Rebrand, 7 Oct 2026: the site takes the VSL's look (Outfit headings, coral on warm
   near-black, cream cards, the PAID ONCE stamp by the price). Logo (wordmark only) files and how they're made: brands/retainerfree/logos/build_logo.py.
   House rules (Harry, 7 Oct 2026): no pill labels over headings, no icons in tinted squares, no grids of identical cards with
   number badges, no two-tone headings beyond the hero, no arrows on every button, no glows or hover lifts, nothing fading up
   on scroll. Motion only where it tells the story (the stamp, the ad fan, the weekly check ticks, the cost bars). */
:root {
  --paper: #F4F1E8;          /* cream page */
  --card: #FBF9F4;           /* cream cards and the lighter band */
  --white: #FFFFFF;
  --ink: #16150F;
  --ink-2: #3A372F;
  --dim: #5E5B52;            /* 6.2:1 on paper */
  --line: #DDD7C9;
  --night: #15120E;          /* the VSL's warm near-black */
  --night-2: #1D1914;
  --night-line: #342E26;
  --on-night: #F4F1E8;
  --on-night-dim: #BEB6A6;   /* 9.3:1 on night */
  --coral: #FF4D2E;          /* the brand coral: logo, buttons, the stamp */
  --coral-2: #FF6A4D;        /* coral text on night (6.5:1) */
  --coral-text: #B8321A;     /* coral for small text on paper (5.3:1) */
  --on-coral: #16150F;       /* text on a coral button (5.5:1); white on coral is only 3.3:1 */
  --tint: #FFE6DE;
  --sage: #DDE5D6;
  --head: "Outfit", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --gutter: 20px;
  --max: 1200px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow: 0 1px 2px rgba(22, 21, 15, .08), 0 16px 32px -18px rgba(22, 21, 15, .35);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 2px 4px rgba(22, 21, 15, .05), 0 22px 44px -26px rgba(22, 21, 15, .35);
  --ease: cubic-bezier(.2, .75, .2, 1);
}
@media (min-width: 700px) { :root { --gutter: 40px; } }
@media (min-width: 1100px) { :root { --gutter: 56px; } }

/* relative to /css/, so the same file works on the live site and in the file:// preview */
@font-face { font-family: "Outfit"; src: url("../fonts/outfit-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 84px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--sans); font-synthesis: none; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; overflow-x: hidden; }
@media (min-width: 700px) { body { font-size: 18px; } }
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 700; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--coral-text); outline-offset: 3px; }
.dark :focus-visible, .band-ink :focus-visible, .page-head :focus-visible, .hero :focus-visible, .closing :focus-visible, .site-head :focus-visible, .site-foot :focus-visible { outline-color: var(--coral-2); }

.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }

/* ---------- type ---------- */
.h1 { font: 800 clamp(42px, 5.6vw, 84px)/1 var(--head); letter-spacing: -.035em; text-wrap: balance; }
.h2 { font: 750 clamp(32px, 4vw, 56px)/1.04 var(--head); letter-spacing: -.03em; text-wrap: balance; }
.h3 { font: 700 20px/1.3 var(--head); letter-spacing: -.015em; }
.lead { font-size: 19px; line-height: 1.55; color: var(--dim); max-width: 38em; text-wrap: pretty; }
@media (min-width: 700px) { .lead { font-size: 20px; } }
.dim { color: var(--dim); }
.small { font-size: 15px; }
.acc { color: var(--coral); }
.rule { display: none; }

/* the logo (Harry, 8 Oct 2026): the wordmark only, "free" in coral (brands/retainerfree/logos). The PAID ONCE stamp is a
   design touch by the price, never beside the wordmark. Links keep a 48px tap target. */
.logo { display: inline-flex; align-items: center; text-decoration: none; color: inherit; white-space: nowrap; font: 700 25px/1 var(--head); letter-spacing: -.035em; }
a.logo, .site-head .logo { min-height: 48px; }
.logo b { font-weight: 700; color: var(--coral); }
.logo-lg { font-size: 32px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px; border-radius: 999px; border: 1px solid transparent; font: 650 16.5px/1.2 var(--sans); letter-spacing: -.01em; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s; text-align: center; }
.btn-primary { background: var(--coral); color: var(--on-coral); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-line { background: transparent; color: var(--ink); border-color: rgba(22, 21, 15, .3); }
.btn-line-light, .dark .btn-line, .band-ink .btn-line, .page-head .btn-line, .hero .btn-line, .closing .btn-line { background: rgba(244, 241, 232, .06); color: var(--on-night); border-color: rgba(244, 241, 232, .24); }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: 15px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
@media (max-width: 599px) { .btn-row .btn { width: 100%; } }
@media (hover: hover) {
  .btn-primary:hover { background: #FF6A4D; }
  .btn-ink:hover { background: #2E2B24; }
  .btn-line:hover { border-color: var(--ink); }
  .btn-line-light:hover, .dark .btn-line:hover, .band-ink .btn-line:hover, .page-head .btn-line:hover, .hero .btn-line:hover, .closing .btn-line:hover { border-color: var(--on-night); background: rgba(244, 241, 232, .1); }
}
.text-link { color: var(--ink); font-weight: 650; text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.band-ink .text-link, .dark .text-link, .page-head .text-link, .hero .text-link, .closing .text-link { color: var(--on-night); }
.lead a.text-link { font-weight: inherit; }
.page-head .lead a, .lead a { color: inherit; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- preview bar (preview builds only) ---------- */
.preview-bar { background: #000; color: var(--on-night-dim); font-size: 13px; line-height: 1.45; padding: 9px 0; }
.is-preview [data-wip] { outline: 1.5px dashed rgba(250, 75, 44, .7); outline-offset: 3px; border-radius: 2px; }
.wip-tag { display: inline-block; vertical-align: middle; margin: 0 0 0 6px; padding: 3px 8px; border-radius: 6px; background: var(--tint); color: var(--coral-text); font: 600 11px/1.3 var(--sans); letter-spacing: .02em; text-transform: none; font-style: normal; white-space: normal; }
.band-ink .wip-tag, .dark .wip-tag, .page-head .wip-tag, .hero .wip-tag, .closing .wip-tag, .offer-one .wip-tag { background: #3A2620; color: #FFB8A8; }

/* ---------- header (dark on every page) ---------- */
.site-head { position: sticky; top: 0; z-index: 20; background: rgba(21, 18, 14, .94); color: var(--on-night); border-bottom: 1px solid rgba(244, 241, 232, .07); }
@supports (backdrop-filter: blur(1px)) { .site-head { background: rgba(21, 18, 14, .82); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); } }
.head-row { display: flex; align-items: center; gap: 28px; height: 72px; }
.nav { display: none; gap: 4px; margin-left: auto; }
.nav a { font: 500 15px/1 var(--sans); text-decoration: none; color: var(--on-night-dim); padding: 10px 12px; border-radius: 8px; }
.nav a[aria-current="page"] { color: var(--on-night); text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.head-cta { display: none; }
.menu { margin-left: auto; position: static; }
.menu summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; cursor: pointer; font: 600 15px var(--sans); color: var(--on-night); }
.menu summary::-webkit-details-marker { display: none; }
.menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 20px; height: 2px; background: var(--on-night); border-radius: 2px; position: relative; content: ""; }
.menu-icon::before { position: absolute; top: -6px; }
.menu-icon::after { position: absolute; top: 6px; }
.menu[open] .menu-icon { background: transparent; }
.menu[open] .menu-icon::before { top: 0; transform: rotate(45deg); }
.menu[open] .menu-icon::after { top: 0; transform: rotate(-45deg); }
.menu-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--night); border-bottom: 1px solid var(--night-line); padding: 6px var(--gutter) 24px; display: flex; flex-direction: column; max-height: calc(100vh - 72px); overflow-y: auto; }
.menu-panel a:not(.btn) { padding: 15px 0; border-bottom: 1px solid var(--night-line); text-decoration: none; font: 500 19px var(--sans); color: var(--on-night); }
.menu-panel .btn { margin-top: 20px; }
@media (min-width: 960px) {
  .nav { display: flex; }
  .head-cta { display: inline-flex; }
  .menu { display: none; }
}
@media (hover: hover) { .nav a:hover { color: var(--on-night); background: rgba(244, 241, 232, .07); } }

/* ---------- dark bands ---------- */
.dark, .band-ink { background: var(--night); color: var(--on-night); }
.dark .lead, .dark .dim, .band-ink .lead, .band-ink .dim { color: var(--on-night-dim); }
.dark .acc { color: var(--coral-2); }

/* ---------- sections ---------- */
.section { padding-top: 80px; padding-bottom: 80px; }
@media (min-width: 900px) { .section { padding-top: 120px; padding-bottom: 120px; } }
.section.first { padding-top: 64px; }
.section-head { max-width: 780px; margin-bottom: 48px; }
.section-head .lead { margin-top: 20px; }
.band-white { background: var(--card); }

/* ---------- page heads (every page but home): dark, with the VSL's warm glow ---------- */
.page-head { position: relative; overflow: hidden; padding-top: 64px; padding-bottom: 64px; color: var(--on-night);
  background: radial-gradient(1000px 520px at 85% -20%, rgba(255, 77, 46, .22), rgba(255, 77, 46, 0) 70%), var(--night); }
.page-head > .wrap { position: relative; }
.page-head .lead { color: var(--on-night-dim); margin-top: 24px; }
.page-head .hero-note { color: var(--on-night-dim); }
.page-head .notice { background: var(--night-2); border-color: var(--coral); color: var(--on-night); }
@media (min-width: 900px) { .page-head { padding-top: 104px; padding-bottom: 96px; } }

/* ---------- home: hero with the VSL (Harry, 8 Oct 2026: it replaced the invoice stack) ---------- */
.hero { position: relative; overflow: hidden; padding-top: 48px; color: var(--on-night);
  background: radial-gradient(1200px 620px at 76% -12%, rgba(255, 77, 46, .26), rgba(255, 77, 46, 0) 70%), radial-gradient(900px 500px at 0% 0%, rgba(255, 140, 90, .07), transparent 70%), var(--night); }
.hero-grid { position: relative; display: grid; gap: 24px; align-items: center; }
.hero .lead { margin-top: 26px; color: var(--on-night-dim); }
.hero .btn-row { margin-top: 36px; }
.hero-note { font-size: 15px; color: var(--dim); margin: 18px 0 0; max-width: 32em; }
.hero .hero-note { color: var(--on-night-dim); }
@media (min-width: 960px) {
  .hero { padding-top: 96px; }
  .hero-grid { grid-template-columns: .92fr 1.08fr; gap: 56px; }
  /* the video takes the wider column, so the headline steps down a little and the buttons stay on the first screen */
  .hero .h1 { font-size: clamp(42px, 4.3vw, 66px); }
}
.trust { margin: 56px 0 0; padding: 30px 0 48px; border-top: 1px solid var(--night-line); font: 500 clamp(20px, 2.1vw, 30px)/1.38 var(--head); letter-spacing: -.015em; color: var(--on-night-dim); max-width: 31em; }
.trust b, .trust em { font-weight: 700; font-style: normal; color: var(--on-night); }
@media (min-width: 960px) { .trust { margin-top: 88px; } }
/* the VSL: the poster is a real image behind the video (the first paint and the LCP image); the video covers it once it plays.
   16:9 on wider screens; 9:16 on phones under 600px, kept short enough to leave room around it. No player bar: one small button. */
.hero-vsl { position: relative; margin: 0; width: 100%; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #0D0C09; border: 1px solid var(--night-line); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .85); }
@media (max-width: 599px) {
  .hero-vsl { border-radius: 14px; }
  .hero-vsl.has-phone { aspect-ratio: 9 / 16; width: min(100%, 44vh); width: min(100%, 44svh); margin: 0 auto; }
}
.hero-vsl picture, .hero-vsl img, .hero-vsl video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.hero-vsl video { background: transparent; cursor: pointer; transition: opacity .25s; }
.hero-vsl.is-waiting video { opacity: 0; }
.hv-play { display: none; position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: var(--coral); pointer-events: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.hv-play::after { content: ""; position: absolute; left: 29px; top: 23px; border-left: 20px solid var(--ink); border-top: 13px solid transparent; border-bottom: 13px solid transparent; }
.hero-vsl.is-idle .hv-play { display: block; }
.hero-vsl .vsl-btn { position: absolute; right: 14px; bottom: 14px; z-index: 2; padding: 8px 15px; border-radius: 999px; border: 1px solid rgba(244, 241, 232, .28); background: rgba(13, 12, 9, .62); color: var(--on-night); font: 600 13px/1 var(--head); letter-spacing: .02em; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: .8; transition: opacity .2s; }
.hero-vsl .vsl-btn::after { content: ""; position: absolute; inset: -12px -10px; }
.hero-vsl .vsl-btn:focus-visible { opacity: 1; outline: 2px solid var(--coral); outline-offset: 2px; }
@media (hover: hover) { .hero-vsl .vsl-btn:hover { opacity: 1; } }
@media (max-width: 599px) { .hero-vsl .vsl-btn { right: 10px; bottom: 10px; } }
.stamp { position: absolute; right: 18px; bottom: 18px; font: 800 18px/1 var(--head); letter-spacing: .06em; color: var(--coral); border: 3px solid var(--coral); border-radius: 10px; padding: 8px 12px 7px; transform: rotate(-8deg); animation: stamp .45s cubic-bezier(.3, 1.5, .5, 1) 1.5s both; }
@media (min-width: 600px) { .stamp { right: 24px; bottom: 22px; font-size: 22px; } }
@keyframes stamp { from { opacity: 0; transform: rotate(-8deg) scale(2.2); } to { opacity: 1; transform: rotate(-8deg) scale(1); } }

/* ---------- home: the problems, plain ---------- */
.pains { list-style: none; margin: 0; padding: 0; max-width: 980px; border-top: 1px solid var(--line); }
.pains li { font: 600 clamp(20px, 2.1vw, 30px)/1.3 var(--head); letter-spacing: -.02em; padding: 22px 0; border-bottom: 1px solid var(--line); }

/* ---------- home: the two things that were missing ---------- */
.two { display: grid; gap: 20px; }
@media (min-width: 800px) { .two { grid-template-columns: 1fr 1fr; } }
.thing { background: var(--night-2); border: 1px solid var(--night-line); border-radius: var(--radius-lg); padding: 30px; }
@media (min-width: 800px) { .thing { padding: 48px; } }
.thing .big { display: block; font: 800 104px/.8 var(--head); letter-spacing: -.06em; color: var(--coral); margin-bottom: 30px; }
.thing h3 { font: 700 clamp(22px, 2vw, 28px)/1.15 var(--head); letter-spacing: -.02em; margin-bottom: 14px; }
.thing p { color: var(--on-night-dim); margin: 0; max-width: 30em; }
.calls { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.call { font: 700 14px/1 var(--head); letter-spacing: .04em; text-transform: uppercase; padding: 9px 12px 8px; border-radius: 9px; border: 2px solid currentColor; }
.call-off { color: var(--coral-2); }
.call-leave { color: var(--on-night-dim); }
.call-more { color: #8FD9A8; }

/* ---------- home: the pack, shown ---------- */
.pack-visual { display: grid; gap: 20px; margin-bottom: 64px; }
@media (min-width: 900px) { .pack-visual { grid-template-columns: 1fr 1.15fr; margin-bottom: 88px; } }
.panel { position: relative; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); height: 360px; }
@media (min-width: 600px) { .panel { height: 440px; } }
.panel-label { position: absolute; left: 24px; right: 24px; top: 20px; z-index: 2; font: 600 15px var(--sans); color: var(--ink-2); margin: 0; }
.books { background: linear-gradient(160deg, #EFEADF, #E4DDCD); }
.books .sheet { position: absolute; width: min(42%, 240px); }
.books .b1 { left: 10%; top: 22%; transform: rotate(-6deg); z-index: 2; }
.books .b2 { left: calc(10% + min(32%, 180px)); top: 15%; transform: rotate(5deg); }
.ads { background: radial-gradient(600px 300px at 50% 120%, rgba(255, 77, 46, .18), transparent), linear-gradient(160deg, #211C17, #15120E); }
.ads .panel-label { color: var(--on-night-dim); }
.fan { position: absolute; left: 50%; bottom: -40px; width: 0; height: 0; }
.ad { position: absolute; left: -56px; bottom: 0; width: 112px; height: 200px; border-radius: 16px; background: var(--white); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .7); transform-origin: 50% 140%; padding: 9px; display: flex; flex-direction: column; gap: 7px; transition: transform .8s var(--ease); }
@media (min-width: 600px) { .ad { left: -75px; width: 150px; height: 268px; border-radius: 18px; padding: 10px; gap: 8px; } }
.ad-who { display: flex; align-items: center; gap: 6px; font: 600 9px var(--sans); color: #555; white-space: nowrap; overflow: hidden; }
.ad-who i { width: 16px; height: 16px; border-radius: 50%; background: #E7E1D3; flex: none; }
.ad-who span { color: #999; font-weight: 400; }
.ad-img { flex: 1; border-radius: 10px; }
.ad-1 .ad-img { background: linear-gradient(160deg, #FFD9CC, #FF8F73); }
.ad-2 .ad-img { background: linear-gradient(160deg, #E9E2D2, #C8BDA6); }
.ad-3 .ad-img { background: linear-gradient(160deg, #2B2520, #5A4C40); }
.ad-4 .ad-img { background: linear-gradient(160deg, #FFEFE6, #F5C6B4); }
.ad-5 .ad-img { background: linear-gradient(160deg, #D9E4D3, #A9BFA0); }
.ad-6 .ad-img { background: linear-gradient(160deg, #FF6A4D, #C9371D); }
.ad-7 .ad-img { background: linear-gradient(160deg, #F3EDE2, #DCCFB9); }
.ad-8 .ad-img { background: linear-gradient(160deg, #3A302A, #1D1814); }
.ad-9 .ad-img { background: linear-gradient(160deg, #FFE3D6, #FFB59C); }
.ad-10 .ad-img { background: linear-gradient(160deg, #FF7B5F, #E2462A); }
.ad-bars i { display: block; height: 6px; border-radius: 3px; background: #E6E1D6; margin: 4px 0; }
.ad-bars i:last-child { width: 60%; }
.ad-shop { height: 24px; border-radius: 7px; background: var(--ink); color: var(--white); font: 600 9.5px/24px var(--sans); text-align: center; }
/* final states are the default (no JavaScript, reduced motion, print); site.js adds html.anim to play them in */
.ad-1 { transform: rotate(-36deg); } .ad-2 { transform: rotate(-28deg); } .ad-3 { transform: rotate(-20deg); } .ad-4 { transform: rotate(-12deg); } .ad-5 { transform: rotate(-4deg); }
.ad-6 { transform: rotate(4deg); } .ad-7 { transform: rotate(12deg); } .ad-8 { transform: rotate(20deg); } .ad-9 { transform: rotate(28deg); } .ad-10 { transform: rotate(36deg); }
/* phones: a tighter fan so the outer cards stay inside the panel */
@media (max-width: 599px) {
  .ad-1 { transform: rotate(-22.5deg); } .ad-2 { transform: rotate(-17.5deg); } .ad-3 { transform: rotate(-12.5deg); } .ad-4 { transform: rotate(-7.5deg); } .ad-5 { transform: rotate(-2.5deg); }
  .ad-6 { transform: rotate(2.5deg); } .ad-7 { transform: rotate(7.5deg); } .ad-8 { transform: rotate(12.5deg); } .ad-9 { transform: rotate(17.5deg); } .ad-10 { transform: rotate(22.5deg); }
}
.anim .fan:not(.in) .ad { transform: none; }

/* what each part does: three columns of plain text with rules */
.facts { margin: 0 0 28px; display: grid; gap: 0 48px; }
@media (min-width: 700px) { .facts { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .facts.three { grid-template-columns: repeat(3, 1fr); } }
.facts > div { padding: 22px 0 30px; border-top: 1px solid var(--line); }
.facts dt { font: 700 19px/1.3 var(--head); letter-spacing: -.015em; margin-bottom: 8px; }
.facts dd { margin: 0; color: var(--dim); font-size: 16px; }

/* ---------- home: the weekly check card ---------- */
.weekly { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .weekly { grid-template-columns: 1fr 1fr; gap: 88px; } }
.weekly .lead { margin-top: 22px; }
.weekly .text-link { display: inline-block; margin-top: 12px; }
.mcard { background: linear-gradient(180deg, #FBF9F4, #F1EDE3); color: var(--ink); border-radius: var(--radius-lg); padding: 24px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8); }
@media (min-width: 600px) { .mcard { padding: 30px; transform: rotate(-1.5deg); } }
.mcard-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; }
.mcard-head b { display: block; font: 750 30px/1 var(--head); letter-spacing: -.03em; }
.mcard-head small { display: block; font: 400 14px var(--sans); color: var(--dim); margin-top: 6px; }
.ring { width: 80px; height: 80px; position: relative; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 8; }
.ring .bg { stroke: #E7E1D3; }
.ring .fg { stroke: var(--coral); stroke-linecap: round; stroke-dasharray: 220; stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s var(--ease); }
.anim .mcard:not(.in) .ring .fg { stroke-dashoffset: 220; }
.ring span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font: 750 18px/1 var(--head); }
.ring span small { display: block; font: 500 10px var(--sans); color: var(--dim); margin-top: 2px; }
.tasks { list-style: none; margin: 0; padding: 0; }
.tasks li { display: grid; grid-template-columns: 44px 28px 1fr; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid rgba(22, 21, 15, .1); font: 600 16px/1.3 var(--head); letter-spacing: -.01em; }
@media (min-width: 600px) { .tasks li { grid-template-columns: 48px 30px 1fr; font-size: 17px; } }
.tasks time { font: 500 14px var(--sans); color: var(--dim); font-variant-numeric: tabular-nums; }
.box { width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--coral); background: var(--coral); display: grid; place-items: center; transition: background .3s, border-color .3s; }
.box svg { width: 15px; height: 15px; transition: opacity .25s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.anim .tasks li:not(.done) .box { background: transparent; border-color: #D8D0BF; }
.anim .tasks li:not(.done) .box svg { opacity: 0; transform: scale(.4); }

/* ---------- home: the Keep it going with Claude list ---------- */
.kit-split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .kit-split { grid-template-columns: 1fr 1fr; gap: 88px; } }
.kit-split .lead { margin-top: 20px; }
.kit-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.kit-list li { padding: 20px 0; border-bottom: 1px solid var(--line); font: 600 clamp(18px, 1.5vw, 21px)/1.35 var(--head); letter-spacing: -.015em; }

/* ---------- home: four steps, plain ---------- */
.hsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px 28px; }
@media (min-width: 700px) { .hsteps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .hsteps { grid-template-columns: repeat(4, 1fr); } }
.hsteps li { border-top: 2px solid var(--ink); padding-top: 20px; }
.hsteps .n { display: block; font: 600 15px var(--sans); color: var(--coral-text); margin-bottom: 14px; }
.hsteps h3 { margin-bottom: 8px; }
.hsteps p { color: var(--dim); font-size: 16px; margin: 0; }

/* ---------- home: price, as the invoice ---------- */
.price-split { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .price-split { grid-template-columns: 1fr 1fr; gap: 80px; } }
.receipt { position: relative; background: linear-gradient(180deg, #FBF9F4, #F1EDE3); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-card), 0 50px 90px -50px rgba(22, 21, 15, .55); }
@media (min-width: 600px) { .receipt { padding: 44px; transform: rotate(-1.2deg); } }
.receipt-top { display: flex; justify-content: space-between; gap: 12px; font: 700 24px/1 var(--head); letter-spacing: -.02em; }
.receipt-top small { display: block; font: 400 14px var(--sans); color: var(--dim); margin-top: 8px; letter-spacing: 0; }
.receipt-top .r { text-align: right; font-size: 19px; }
.receipt hr { border: 0; border-top: 1px solid rgba(22, 21, 15, .12); margin: 24px 0; }
.receipt-amt { font: 800 clamp(68px, 7.4vw, 108px)/.85 var(--head); letter-spacing: -.06em; margin: 0; }
.receipt-sub { color: var(--dim); margin: 14px 0 0; }
.receipt ul { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid rgba(22, 21, 15, .12); }
.receipt li { font-size: 15.5px; color: var(--ink-2); padding: 10px 0; border-bottom: 1px solid rgba(22, 21, 15, .08); }
.receipt .stamp { position: static; display: inline-block; margin-top: 16px; animation: none; font-size: 18px; }
@media (min-width: 600px) { .receipt .stamp { position: absolute; margin-top: 0; top: 104px; bottom: auto; right: 40px; font-size: 22px; } }
.price-side .lead { margin-top: 20px; }
.cmp { margin-top: 32px; display: grid; gap: 18px; }
.cmp-l { display: flex; justify-content: space-between; gap: 12px; font: 650 15px var(--sans); margin-bottom: 8px; }
.cmp-l span { font-weight: 500; color: var(--dim); font-variant-numeric: tabular-nums; }
.cmp-t { height: 14px; border-radius: 8px; background: #E7E1D3; position: relative; overflow: hidden; }
.cmp-f { position: absolute; top: 0; bottom: 0; border-radius: 8px; transform-origin: left; transition: transform 1.2s var(--ease); }
.anim .cmp:not(.in) .cmp-f { transform: scaleX(0); }
.cmp-agency { left: 25%; right: 0; background: linear-gradient(90deg, #A79F90, #5C564C); }
.cmp-us { left: 0; width: 4.2%; min-width: 10px; background: var(--coral); }
.cmp-ax { display: flex; justify-content: space-between; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
.cmp + .small { margin-top: 18px; }
@media (max-width: 599px) { .cmp-l { flex-direction: column; gap: 2px; } }
.price-side .refund { font-size: 15px; color: var(--dim); margin: 20px 0 0; max-width: 34em; }

/* ---------- home: who it isn't for ---------- */
.notfor { display: grid; gap: 32px; align-items: start; }
@media (min-width: 960px) { .notfor { grid-template-columns: 1fr 1.2fr; gap: 80px; } }
.notfor .lead { margin-top: 18px; }
.nf { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.nf li { font: 600 clamp(19px, 1.6vw, 22px)/1.35 var(--head); letter-spacing: -.015em; padding: 20px 0; border-bottom: 1px solid var(--line); }

/* ---------- frames for real captures ---------- */
.sheet { background: var(--white); border-radius: 6px; box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 24px 40px -22px rgba(22, 21, 15, .45); overflow: hidden; }
.shot { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.phone { width: min(100%, 280px); border: 8px solid var(--ink); border-radius: 30px; overflow: hidden; box-shadow: var(--shadow); background: var(--ink); }
figure { margin: 0; }
figcaption { font-size: 14px; line-height: 1.45; color: var(--dim); margin-top: 14px; }

/* stacked pages (kept for any page that still uses it) */
.stack { position: relative; width: min(100%, 440px); margin: 0 auto; aspect-ratio: 440 / 470; }
.stack .sheet { position: absolute; width: 62%; }
.stack .s1 { left: 0; top: 6%; z-index: 3; transform: rotate(-1.5deg); }
.stack .s2 { right: 0; top: 0; z-index: 2; transform: rotate(2deg); }
.stack .s3 { left: 22%; top: 14%; z-index: 1; }

/* ---------- lists and cards ---------- */
.rows { list-style: none; margin: 0; padding: 0; counter-reset: r; border-top: 1px solid var(--line); }
.rows > li { counter-increment: r; display: grid; grid-template-columns: 36px 1fr; gap: 8px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.rows > li::before { content: counter(r); color: var(--coral-text); font: 600 15px/1.7 var(--sans); }
.band-ink .rows, .band-ink .rows > li { border-color: var(--night-line); }
.band-ink .rows > li::before { color: var(--coral-2); }
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding: 10px 0 10px 30px; border-bottom: 1px solid var(--line); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 18px; width: 12px; height: 7px; border-left: 2px solid var(--coral-text); border-bottom: 2px solid var(--coral-text); transform: rotate(-45deg); }
.ticks li:last-child { border-bottom: 0; }

.card { background: var(--card); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-card); }
@media (min-width: 700px) { .card { padding: 40px; } }
.band-white .card { background: var(--white); }
.grid-2 { display: grid; gap: 20px; }
.grid-4 { display: grid; gap: 16px; }
@media (min-width: 800px) { .grid-2 { grid-template-columns: 1fr 1fr; gap: 28px; } .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 1100px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.grid-2.wide-gap > div { border-top: 1px solid var(--line); padding-top: 22px; }
.principle h3 { margin: 10px 0 8px; }
.principle p { margin: 0; color: var(--dim); font-size: 16px; }
.principle .no { font: 800 40px/1 var(--head); color: var(--coral-text); }

/* the offer card */
.offer { display: flex; flex-direction: column; gap: 22px; }
.offer .name { font: 750 32px/1.05 var(--head); letter-spacing: -.025em; }
.offer .amount { font: 800 30px/1.1 var(--head); }
.offer .amount.unset { color: var(--dim); font-size: 22px; font-style: italic; }
.offer .ticks { flex: 1; }
.offer form, .offer .btn { width: 100%; }
.offer .btn { margin-top: 4px; }
.offer .lead-in { font-weight: 600; margin: 0; }

/* the deliverables gallery */
.feature { display: grid; gap: 40px; align-items: start; }
@media (min-width: 960px) { .feature { grid-template-columns: .9fr 1.1fr; gap: 72px; } .feature.flip > :first-child { order: 2; } }
.pages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 700px) { .pages { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.tools { display: grid; gap: 40px; margin-top: 56px; }
@media (min-width: 900px) { .tools { grid-template-columns: 1fr 1fr; gap: 48px 40px; } .tools .wide { grid-column: 1 / -1; } }
.tools h3 { margin: 18px 0 6px; }
.tools p { margin: 0; color: var(--dim); font-size: 16px; }
.duo { display: grid; gap: 28px; align-items: end; }
@media (min-width: 700px) { .duo { grid-template-columns: 1fr 280px; } }

/* how it works */
.step { display: grid; gap: 22px; padding-top: 44px; padding-bottom: 44px; border-top: 1px solid var(--line); }
.step:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 900px) { .step { grid-template-columns: 120px 1fr 1fr; gap: 40px; } }
.step .num { font: 800 56px/0.9 var(--head); letter-spacing: -.04em; color: var(--coral-text); }
.step h2 { font: 750 32px/1.08 var(--head); letter-spacing: -.025em; margin-bottom: 10px; }
.step .who { font: 600 15px/1.4 var(--sans); color: var(--dim); margin-bottom: 4px; }
.step p { margin: 0; }
.step .tag { display: inline-block; margin-left: 8px; font: 600 13px/1 var(--sans); color: var(--coral-text); vertical-align: middle; }

/* questions */
.qa { border-top: 1px solid var(--line); max-width: 860px; }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; font: 650 19px/1.4 var(--head); letter-spacing: -.01em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font: 400 28px/0.9 var(--head); color: var(--coral-text); flex: none; }
.qa details[open] summary::after { content: "\2212"; }
.qa .answer { padding: 0 0 24px; color: var(--dim); max-width: 44em; }
.qa .answer p:last-child { margin-bottom: 0; }

.plain { background: var(--sage); border-radius: var(--radius); padding: 16px 20px; font-size: 15px; line-height: 1.55; }
.plain strong:first-child { display: block; font-size: 13px; margin-bottom: 4px; }

/* notices */
.notice { border-left: 3px solid var(--coral); background: var(--card); padding: 14px 18px; border-radius: 0 10px 10px 0; font-size: 16px; margin: 0 0 28px; }
.notice[hidden] { display: none; }

.split { display: grid; gap: 40px; align-items: start; }
@media (min-width: 960px) { .split { grid-template-columns: 1fr 1fr; gap: 80px; } }

/* ---------- prose (legal) ---------- */
.prose { max-width: 720px; }
.prose h2 { font: 750 28px/1.15 var(--head); letter-spacing: -.02em; margin: 48px 0 12px; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 6px; }

/* ---------- closing band: dark, centred, the warm glow from below ---------- */
.closing { text-align: center; background: radial-gradient(900px 500px at 50% 120%, rgba(255, 77, 46, .3), transparent 70%), var(--night); color: var(--on-night); }
.closing .h2 { max-width: 15em; margin: 0 auto; font-size: clamp(36px, 5vw, 72px); }
.closing .lead { margin: 22px auto 0; color: var(--on-night-dim); }
.closing .btn-row { justify-content: center; margin-top: 36px; }
.closing .call-under { margin: 16px auto 0; color: var(--on-night-dim); max-width: 36em; }
.days { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.days a { min-width: 128px; text-decoration: none; border: 1px solid var(--night-line); background: var(--night-2); border-radius: 14px; padding: 13px 16px; text-align: left; }
.days small { display: block; font-size: 13px; color: var(--on-night-dim); }
.days b { display: block; font: 700 17px var(--head); color: var(--on-night); margin-top: 3px; }
@media (hover: hover) { .days a:hover { border-color: var(--coral); } }
@media (max-width: 599px) { .days a { flex: 1 1 100%; } }

/* ---------- footer ---------- */
.site-foot { background: var(--night); color: var(--on-night-dim); border-top: 1px solid var(--night-line); padding-top: 64px; padding-bottom: 40px; font-size: 15px; }
.foot-grid { display: grid; gap: 32px; grid-template-columns: 1fr 1fr; }
.foot-grid > :first-child { grid-column: 1 / -1; }
@media (min-width: 800px) { .foot-grid { grid-template-columns: 2fr 1fr 1fr 1.2fr; } .foot-grid > :first-child { grid-column: auto; } }
.site-foot .logo { color: var(--on-night); }
.foot-h { font: 600 13px/1.4 var(--sans); color: #8C8476; margin: 0 0 12px; }
.site-foot nav a, .site-foot div > a:not(.logo) { display: block; text-decoration: none; padding: 11px 0; color: var(--on-night); }
@media (min-width: 800px) { .site-foot nav a, .site-foot div > a:not(.logo) { padding: 6px 0; } }
.foot-tag { color: var(--on-night-dim); margin-top: 14px; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--night-line); color: #8C8476; font-size: 14px; }
.foot-base p { margin: 0; }
@media (hover: hover) { .site-foot a:hover { color: var(--coral-2); } }

/* ---------- sticky action on phones, once the main button has scrolled away ---------- */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); background: rgba(21, 18, 14, .94); border-top: 1px solid var(--night-line); }
.sticky-cta .btn { width: 100%; }
.sticky-cta[hidden] { display: none; }
@media (min-width: 960px) { .sticky-cta { display: none !important; } }

/* ---------- page bits ---------- */
.h1-page { font-size: clamp(40px, 5.4vw, 76px); max-width: 15em; }
.h3-serif { font: 750 26px/1.15 var(--head); letter-spacing: -.02em; margin: 0 0 10px; }
.wide-gap { gap: 32px 56px; }
.promise h3 { margin: 0 0 10px; }
.promise p { color: var(--dim); font-size: 16px; margin: 0 0 8px; }
.pages.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }
.pages.one { grid-template-columns: minmax(0, 300px); }
.pages figcaption { grid-column: 1 / -1; }
.ticks.crosses li::before { width: 12px; height: 2px; border: 0; background: var(--coral-text); transform: none; top: 22px; }
.small-ticks li { font-size: 16px; padding-top: 7px; padding-bottom: 7px; }
.small-ticks li::before { top: 15px; }
.price-facts { margin-top: 22px; }
.offers { align-items: stretch; }
.offer .tagline { margin: -10px 0 0; color: var(--dim); }
.offer .once { font: 400 16px/1 var(--sans); color: var(--dim); }
.feature .h2 + .lead, .split .h2 + .lead { margin-top: 18px; }
.page-head .h3 { margin: 28px 0 10px; }
@media (min-width: 960px) { .page-head .split { align-items: start; } }

/* ---------- the cookie choice (Meta Pixel, 11 Oct 2026) ----------
   A plain bar along the bottom in the site's own colours. Accept and Reject are the same button, same size, same weight.
   It doesn't block the page: the sticky phone button sits above it (--consent-h, set by site.js) and the page gets room below. */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--night); color: var(--on-night); border-top: 1px solid var(--night-line); padding: 14px 0 calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px rgba(0, 0, 0, .25); }
.consent[hidden] { display: none; }
.consent-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; }
.consent-text { margin: 0; font-size: 15px; line-height: 1.45; color: var(--on-night-dim); max-width: 54em; }
.consent-text a { color: var(--on-night); }
.consent-btns { display: flex; gap: 22px; align-items: center; flex: none; }
.consent-btn { min-width: 118px; min-height: 44px; padding: 0 22px; border-radius: 999px; border: 1px solid rgba(244, 241, 232, .5); background: transparent; color: var(--on-night); font: 650 15.5px/1 var(--sans); cursor: pointer; }
.consent-btn:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
@media (hover: hover) { .consent-btn:hover { background: rgba(244, 241, 232, .1); border-color: var(--on-night); } }
/* Harry, 12 Oct 2026: Accept is the coral button, Reject is underlined text (his choice over equal buttons, advised of the ICO view) */
.consent-accept { background: var(--coral); border-color: var(--coral); color: #fff; }
@media (hover: hover) { .consent-accept:hover { background: var(--coral-2); border-color: var(--coral-2); } }
.consent-reject { background: none; border: 0; padding: 8px 2px; color: var(--on-night); font: 500 15px/1 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.consent-reject:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
@media (max-width: 599px) {
  .consent { padding-top: 12px; }
  .consent-text { font-size: 14px; }
  .consent-btns { width: 100%; }
  .consent-accept { flex: 1 1 0; }
}
.site-foot { padding-bottom: calc(40px + var(--consent-h, 0px)); }
.foot-base { align-items: center; }
.sticky-cta { bottom: var(--consent-h, 0px); }
.link-btn { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; }
.link-btn:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
@media print { .site-head, .sticky-cta, .preview-bar, .consent { display: none; } }

/* who built it */
.who-text > * { max-width: 780px; }
.who-text .lead { margin: 20px 0 24px; }

/* results: on dark bands they take the VSL's dark cards and coral figures */
.results { display: grid; gap: 20px; }
@media (min-width: 900px) { .results { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.result { background: var(--card); border-radius: var(--radius-lg); padding: 28px; display: flex; flex-direction: column; box-shadow: var(--shadow-card); }
@media (min-width: 700px) { .result { padding: 36px; } }
.band-white .result { background: var(--white); }
.band-ink .result, .dark .result { background: var(--night-2); border: 1px solid var(--night-line); box-shadow: none; }
.result-who { font: 600 15px/1.4 var(--sans); color: var(--dim); margin: 0 0 12px; }
.band-ink .result-who, .dark .result-who { color: var(--on-night-dim); }
.result-fig { font: 800 clamp(40px, 4.4vw, 60px)/.98 var(--head); letter-spacing: -.045em; margin: 28px 0 0; color: var(--coral-text); }
.band-ink .result-fig, .dark .result-fig { color: var(--coral-2); }
.result-fig-words { font-size: clamp(34px, 3.8vw, 46px); line-height: 1.05; }
.result-unit { color: var(--ink-2); font-size: 15.5px; margin: 12px 0 0; }
.band-ink .result-unit, .dark .result-unit { color: var(--on-night); }
.result-line { margin: auto 0 0; padding-top: 24px; font-size: 15.5px; color: var(--dim); }
.result-line::before { content: ""; display: block; height: 1px; background: var(--line); margin-bottom: 20px; }
.band-ink .result-line, .dark .result-line { color: var(--on-night-dim); }
.band-ink .result-line::before, .dark .result-line::before { background: var(--night-line); }
.results-note { margin-top: 24px; max-width: 54em; }
.results-honest { margin: 28px 0 0; max-width: 46em; }
.cases { display: grid; gap: 28px; }
.case { display: grid; gap: 24px; background: var(--card); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-card); }
@media (min-width: 700px) { .case { padding: 44px; } }
@media (min-width: 960px) { .case { grid-template-columns: .8fr 1.2fr; gap: 56px; } }
.case .h3-serif { margin-bottom: 18px; }
.case .result-fig { margin-top: 12px; }
.case-steps { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.case-steps > div { padding: 16px 0; border-bottom: 1px solid var(--line); }
.case-steps dt { font: 600 15px/1.4 var(--sans); color: var(--dim); margin-bottom: 4px; }
.case-steps dd { margin: 0; }
.case-steps > div.case-lesson { border-bottom: 0; margin-top: 8px; padding: 18px 20px; background: var(--tint); border-radius: 12px; }
.case-steps > div.case-lesson dt { color: var(--coral-text); }
.case-steps > div.case-lesson dd { font: 650 21px/1.3 var(--head); letter-spacing: -.015em; }
.owner-slot { margin: 16px 0 0; padding: 14px 16px; border: 1.5px dashed var(--coral); border-radius: 10px; background: var(--tint); color: var(--coral-text); font-size: 15px; }

/* comparison tables */
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-card); }
.compare-wrap:focus-visible { outline-offset: 2px; }
.compare { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; min-width: 640px; }
.compare-short { min-width: 0; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 15px 16px; border-bottom: 1px solid var(--line); }
.compare thead th { font: 650 14px/1.4 var(--sans); color: var(--dim); background: var(--card); }
.compare thead td { background: var(--card); }
.compare tbody th { font-weight: 600; width: 22%; }
.compare .us { background: #FFF4F0; }
.compare thead .us { background: var(--coral); color: var(--on-coral); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare tfoot th, .compare tfoot td { font-weight: 600; border-top: 2px solid var(--ink); border-bottom: 0; }
.compare .num { text-align: right; white-space: nowrap; }
.cost { min-width: 520px; }
.cost tbody th { width: auto; font-weight: 400; }
@media (max-width: 599px) { .compare-short { font-size: 14px; } .compare-short th, .compare-short td { padding: 12px 10px; } .compare-short tbody th { width: 30%; } }
.vs { display: grid; gap: 32px; align-items: start; }
@media (min-width: 960px) { .vs { grid-template-columns: 1.3fr .7fr; gap: 48px; } }
.vs-text p:first-child { font-size: 18px; }
.vs-after { margin-top: 32px; max-width: 46em; }
.method { margin-top: 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.method summary { cursor: pointer; padding: 16px 0; font-weight: 600; color: var(--coral-text); list-style: none; }
.method summary::-webkit-details-marker { display: none; }
.method summary::after { content: " +"; }
.method[open] summary::after { content: " \2212"; }
.method .answer { color: var(--dim); font-size: 15px; padding-bottom: 8px; }

/* Keep it going with Claude on a dark band: a plain two-column list with rules, not a grid of boxes */
.ai-band .lead { max-width: 38em; }
.ticks-light li { border-color: var(--night-line); }
.ticks-light li::before { border-color: var(--coral-2); }
.kit { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 48px; border-top: 1px solid var(--night-line); }
@media (min-width: 800px) { .kit { grid-template-columns: repeat(2, 1fr); } }
.kit li { padding: 24px 0; border-bottom: 1px solid var(--night-line); }
.kit h3 { margin-bottom: 8px; }
.kit p { margin: 0; color: var(--on-night-dim); font-size: 16px; }
.kit-foot { margin-top: 28px; max-width: 52em; }
.kit-foot strong { color: var(--on-night); }
.steps-list > li { padding: 20px 0; }
.steps-list h3 { margin-bottom: 4px; }
.steps-list p { margin: 0; }

/* ---------- how it works: the motion graphic ---------- */
/* Static by default (no JavaScript, reduced motion, print): all six steps listed. site.js adds .on to play it as a stage. */
.flow-section { padding-top: 24px; }
.flow-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.flow-step { display: grid; gap: 18px; align-items: center; background: var(--card); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-card); }
@media (min-width: 800px) { .flow-step { grid-template-columns: .85fr 1.15fr; gap: 36px; padding: 36px; } }
.flow-n { font: 800 40px/1 var(--head); color: var(--coral-text); margin: 0 0 8px; }
.flow-h { font: 750 30px/1.1 var(--head); letter-spacing: -.025em; margin: 0 0 10px; }
.flow-text p:last-child { margin: 0; color: var(--dim); }
.flow-scene { margin: 0; background: var(--paper); border-radius: 12px; padding: 10px; }
.flow-scene svg { display: block; width: 100%; height: auto; }

/* scene pieces */
.flow svg text { font-family: var(--sans); font-size: 14px; font-weight: 600; fill: var(--ink); }
.fl-bar { fill: var(--night); }
.flow svg .fl-bar-t { fill: var(--paper); font-size: 12px; letter-spacing: .14em; }
.flow svg .fl-bar-s { fill: var(--on-night-dim); font-size: 12px; font-weight: 400; }
.fl-link { stroke: var(--coral); stroke-width: 2; stroke-dasharray: 4 5; }
.fl-flow { fill: none; stroke: var(--coral); stroke-width: 2; stroke-linecap: round; }
.fl-chip rect { fill: var(--white); stroke: var(--line); stroke-width: 1.5; }
.fl-chip.tag rect { fill: var(--tint); stroke: none; }
.flow svg .fl-chip.tag text { fill: var(--coral-text); }
.fl-node { fill: var(--coral); }
.fl-card { fill: var(--white); stroke: var(--line); stroke-width: 1.5; }
.fl-dot { fill: var(--line); }
.fl-rule { stroke: var(--line); stroke-width: 1.5; }
.fl-img { fill: var(--tint); }
.fl-img.sage { fill: var(--sage); }
.fl-img.ink { fill: #3A382F; }
.fl-ln { fill: var(--line); }
.fl-ln.dark { fill: var(--ink); }
.fl-btn { fill: var(--coral); }
.fl-pin circle { fill: var(--coral); }
.flow svg .fl-pin text, .flow svg .fl-rank text { fill: var(--ink); font-size: 13px; }
.fl-rank circle { fill: var(--white); stroke: var(--coral); stroke-width: 2; }
.fl-rank rect { fill: var(--coral); }
.flow svg .fl-small { font-size: 13px; font-weight: 400; fill: var(--dim); }
.flow svg .fl-small.strong { font-weight: 600; fill: var(--ink); font-size: 15px; }
.flow svg .fl-quote { font-family: var(--head); font-size: 44px; font-weight: 800; fill: var(--coral); }
.fl-step-dot { fill: var(--coral); }
.flow svg .fl-body-t { font-weight: 400; font-size: 15px; }
.fl-own rect { fill: var(--coral); }
.flow svg .fl-own text { font-size: 12px; }
.fl-status rect { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; }
.fl-status.go rect { fill: var(--sage); stroke: none; }
.fl-status.off rect { fill: var(--tint); stroke: none; }
.flow svg .fl-status text { font-size: 12px; }
.fl-orbit { fill: none; stroke: var(--coral); stroke-width: 2; stroke-dasharray: 6 8; }
.fl-hub circle { fill: var(--night); }
.flow svg .fl-hub text { fill: var(--paper); font-family: var(--head); font-size: 20px; font-weight: 750; }

/* the stage: only when site.js switches it on (motion welcome, JavaScript running) */
.flow-nav { display: none; }
.flow.on .flow-nav { display: flex; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; }
.flow-nav li { flex: 1 1 0; min-width: 0; }
.flow-nav button { width: 100%; min-width: 0; min-height: 44px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px; padding: 0 0 10px; background: none; border: 0; cursor: pointer; font: 600 14px/1.25 var(--sans); color: var(--dim); text-align: left; }
.flow-nav .bar { display: block; width: 100%; height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
.flow-nav .bar i { display: block; height: 100%; width: 0; background: var(--coral); }
.flow-nav .done .bar i { width: 100%; }
.flow-nav [aria-current="step"] { color: var(--ink); }
.flow-nav [aria-current="step"] .bar i { animation: flowbar var(--flow-ms, 6500ms) linear forwards; }
.flow.paused .flow-nav [aria-current="step"] .bar i { animation-play-state: paused; }
.flow.manual .flow-nav [aria-current="step"] .bar i { animation: none; width: 100%; } /* picked by hand or paused: the chosen step is fully lit */
.flow-nav .t { display: none; }
.flow-nav .n { font: 750 20px/1 var(--head); color: inherit; }
@media (min-width: 900px) { .flow-nav .t { display: block; } }
@keyframes flowbar { from { width: 0; } to { width: 100%; } }
.flow-tools { display: none; }
.flow.on .flow-tools { display: flex; justify-content: flex-end; margin-top: 14px; }
.flow-pause { background: none; border: 1px solid var(--line); border-radius: 999px; min-height: 44px; padding: 0 18px; font: 600 14px/1 var(--sans); color: var(--ink); cursor: pointer; }
@media (hover: hover) { .flow-pause:hover, .flow-nav button:hover { color: var(--ink); } }
/* every step sits in the same grid cell, so the stage keeps the tallest step's height and nothing below it jumps */
.flow.on .flow-list { display: grid; }
.flow.on .flow-step { grid-area: 1 / 1; visibility: hidden; }
.flow.on .flow-step.is-active { visibility: visible; }
@media (min-width: 800px) { .flow.on .flow-step { min-height: 420px; } }

/* scene animation: plays each time a step becomes active */
.flow.on .is-active .flow-text > * { animation: flowin .55s cubic-bezier(.2, .7, .2, 1) both; }
.flow.on .is-active .flow-text > :nth-child(2) { animation-delay: .06s; }
.flow.on .is-active .flow-text > :nth-child(3) { animation-delay: .12s; }
.flow.on .is-active svg .a1, .flow.on .is-active svg .a2, .flow.on .is-active svg .a3, .flow.on .is-active svg .a4, .flow.on .is-active svg .a5, .flow.on .is-active svg .a6 { transform-box: fill-box; transform-origin: center; animation: flowpop .6s cubic-bezier(.2, .8, .3, 1.2) both; }
.flow.on .is-active svg .a2 { animation-delay: .25s; }
.flow.on .is-active svg .a3 { animation-delay: .45s; }
.flow.on .is-active svg .a4 { animation-delay: .65s; }
.flow.on .is-active svg .a5 { animation-delay: .85s; }
.flow.on .is-active svg .a6 { animation-delay: 1.05s; }
.flow.on .is-active svg .fl-flow { stroke-dasharray: 400; animation: flowdraw 1.1s ease-out both; animation-delay: .9s; }
.flow.on .is-active svg .fl-flow.d2 { animation-delay: 1.05s; }
.flow.on .is-active svg .fl-flow.d3 { animation-delay: 1.2s; }
.flow.on .is-active svg .fl-flow.d4 { animation-delay: 1.35s; }
.flow.on .is-active svg .fl-flow.d5 { animation-delay: 1.5s; }
.flow.on .is-active svg .fl-link { animation: flowdash 1s linear infinite; }
.flow.on .is-active svg .fl-bar { animation: flowglow 1.2s ease-out 1.6s both; }
.flow.on .is-active svg .fl-orbit { transform-box: fill-box; transform-origin: center; animation: flowspin 18s linear infinite; }
.flow.paused .is-active svg .fl-orbit, .flow.paused .is-active svg .fl-link { animation-play-state: paused; }
@keyframes flowin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes flowpop { from { opacity: 0; transform: translateY(14px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes flowdraw { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }
@keyframes flowdash { to { stroke-dashoffset: -18; } }
@keyframes flowglow { 0% { fill: var(--night); } 40% { fill: var(--coral-text); } 100% { fill: var(--night); } }
@keyframes flowspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .flow.on .flow-step { display: grid; } }
@media print { .flow-nav, .flow-tools { display: none !important; } .flow.on .flow-step { display: grid !important; } }
@media (max-width: 799px) { .flow.on .flow-scene { order: -1; } }
.split > *, .vs > *, .feature > * { min-width: 0; }
/* full comparison and cost tables: stacked cards on phones instead of a sideways-scrolling table */
@media (max-width: 699px) {
  .compare-wrap:has(.stacked) { box-shadow: none; background: none; overflow: visible; }
  .compare-wrap:has(.compare-short) { box-shadow: none; background: none; overflow: visible; }
  .compare-short, .compare-short tbody, .compare-short tr, .compare-short th, .compare-short td { display: block; min-width: 0; width: auto; }
  .compare-short thead { display: none; }
  .compare-short tr { background: var(--white); border-radius: 14px; margin-bottom: 12px; overflow: hidden; box-shadow: var(--shadow-card); }
  .compare-short tbody th { font: 700 20px/1.2 var(--head); padding: 16px 16px 6px; border: 0; width: auto; }
  .compare-short td { border: 0; border-top: 1px solid var(--line); padding: 10px 16px; font-size: 15px; }
  .compare-short td::before { content: attr(data-label); display: block; font: 600 13px/1.4 var(--sans); color: var(--dim); margin-bottom: 2px; }
  .compare-short td.us::before { color: var(--coral-text); }
  .compare.stacked, .compare.stacked tbody, .compare.stacked tfoot, .compare.stacked tr, .compare.stacked th, .compare.stacked td { display: block; min-width: 0; width: auto; }
  .compare.stacked thead { display: none; }
  .compare.stacked tr { background: var(--white); border-radius: 14px; margin-bottom: 12px; overflow: hidden; box-shadow: var(--shadow-card); }
  .compare.stacked tbody th, .compare.stacked tfoot th { font: 700 20px/1.2 var(--head); padding: 16px 16px 6px; border: 0; width: auto; }
  .compare.stacked td { border: 0; border-top: 1px solid var(--line); padding: 10px 16px; text-align: left; }
  .compare.stacked td::before { content: attr(data-label); display: block; font: 600 13px/1.4 var(--sans); color: var(--dim); margin-bottom: 2px; }
  .compare.stacked td.us { background: #FFF4F0; }
  .compare.stacked td.us::before { color: var(--coral-text); }
  .compare.stacked tfoot tr { box-shadow: 0 0 0 2px var(--ink); }
  .compare.stacked tfoot th, .compare.stacked tfoot td { border-top: 0; }
}
/* the one pack: one wide card, dark, price and button on the left, everything in it on the right */
.offer-one, .band-white .offer-one { display: grid; gap: 28px; background: var(--night); color: var(--on-night); box-shadow: 0 40px 80px -40px rgba(22, 21, 15, .6); }
@media (min-width: 900px) { .offer-one { grid-template-columns: .8fr 1.2fr; gap: 48px; padding: 48px; } }
.offer-one .offer-side { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.offer-one .name { font: 750 clamp(28px, 3vw, 36px)/1.05 var(--head); letter-spacing: -.025em; }
.offer-one .tagline { margin: 0; color: var(--on-night-dim); }
.offer-one .amount { font: 800 64px/1 var(--head); letter-spacing: -.05em; margin: 4px 0 0; }
.offer-one .once { color: var(--on-night-dim); }
.offer-one .offer-when, .offer-one .offer-refund { margin: 0; font-size: 15px; color: var(--on-night-dim); }
.offer-one .offer-side form, .offer-one .offer-side .btn { width: 100%; }
.offer-one .offer-groups { display: grid; gap: 24px; }
@media (min-width: 1100px) { .offer-one .offer-groups { grid-template-columns: 1fr 1fr; gap: 32px; } }
.offer-one .lead-in { color: var(--on-night); font: 650 17px/1.4 var(--head); margin: 0 0 8px; }
.offer-one .ticks li { border-color: var(--night-line); font-size: 16px; }
.offer-one .ticks li::before { border-color: var(--coral-2); }
.offer-one .ticks { flex: none; }
@media (min-width: 900px) { .offer-one .offer-side { position: sticky; top: 100px; align-self: start; } }

/* the book-a-call lander and /book/booked/ have their own stylesheet, book.css, loaded on those pages only */

/* ---------- plain layouts instead of card grids ---------- */
.problems { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.problems li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.prose-wide > * { max-width: 780px; }
.prose-wide .lead { margin: 20px 0 24px; }
.prose-wide p strong { font-weight: 600; }
.promises .promise { border-top: 2px solid var(--coral); padding-top: 18px; }
.split > .h2 { max-width: 14em; }
.ticks + p { margin-top: 16px; }
[hidden] { display: none !important; }
.after-table { margin-top: 20px; }
.center { text-align: center; }
.section-head.center { margin-left: auto; margin-right: auto; }
.section-head.center .lead { margin-left: auto; margin-right: auto; }
.pack-foot { margin: 8px 0 0; }

@media (prefers-reduced-motion: reduce) {
  .stamp { animation: none; }
  .hero-vsl video { transition: none; }
  .ad, .cmp-f, .box, .box svg, .ring .fg { transition: none; }
}

/* Prices card: "paid once" next to the price keeps normal spacing (it was inheriting the price's -.05em and read "paidonce") */
.offer .once { letter-spacing: 0; white-space: nowrap; margin-left: .3em; display: inline-block; }
/* Phones: a page head with only a heading and a line (no buttons) doesn't need the full bottom padding: it read as an empty dark band */
@media (max-width: 899px) { .page-head:not(:has(.btn-row)) { padding-bottom: 40px; } }