/* ============================================================
   Kamilah Amerjan — LinkedIn Workshop
   Section 1 · Hero + proof band

   Direction: editorial, not "SaaS landing page". Hairlines instead
   of glow shadows, tight radii, a serif italic against a grotesk,
   mono for every numeral, and a right column that bleeds off the
   page edge so the layout isn't a symmetrical box.
   ============================================================ */

:root {
  --blue:       #0A66C2;   /* solid fills — never re-pointed */
  --blue-text:  #0A66C2;   /* blue set as type; lightens on dark surfaces */
  --blue-ink:   #08447F;
  --blue-pale:  #E6F0FA;
  --blue-panel: #DCEAF8;
  --wash:       #F6F9FC;

  --ink:        #14181C;
  --ink-2:      #333C45;
  --ink-3:      #6A7885;
  --rule:       #DFE7EF;

  --neg:        #B23B2E;   /* the disqualifier — used nowhere else */
  --neg-tint:   #FBF0EE;
  --neg-edge:   #EFD3CE;

  --white:      #FFFFFF;

  --sans:  'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --frame: 1160px;
  --gutter: 30px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--wash);
  -webkit-font-smoothing: antialiased;
}

/* Paper grain — keeps large flat areas from reading as flat vector. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}

main, header { position: relative; z-index: 1; }

p, h1, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { text-decoration: none; color: inherit; }

.frame {
  width: 100%;
  max-width: var(--frame);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ============================ MASTHEAD ============================ */
.masthead { border-bottom: 1px solid var(--rule); }
.masthead-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-block: 13px;
}
.wordmark {
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: .01em;
}
.masthead-meta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ============================== HERO ============================== */
.hero { padding-block: 32px 26px; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  align-items: start;
  gap: 60px;
}

/* ---- Pitch ---- */
.kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue-text);
}
.kicker-rule {
  width: 34px;
  height: 1px;
  background: var(--blue-text);
  opacity: .55;
}

.headline {
  margin-top: 20px;
  font-size: clamp(38px, 4.3vw, 60px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -.035em;
}

/* The one moment of colour in the headline: serif italic + a hand-drawn rule. */
.mark {
  position: relative;
  display: inline-block;
  color: var(--blue-text);
  white-space: nowrap;
}
.mark em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
  font-size: 1.08em;
}
.mark-stroke {
  position: absolute;
  left: -2%;
  bottom: -.02em;
  width: 104%;
  height: .26em;
  color: var(--blue-text);
  opacity: .32;
}

.promises {
  margin-top: 28px;
  border-top: 1px solid var(--rule);
  max-width: 30rem;
}
.promises li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 16px;
  align-items: baseline;
  padding-block: 11px;
  border-bottom: 1px solid var(--rule);
}
.idx {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--blue-text);
  padding-top: .18em;
}
.promise {
  font-size: 17px;
  line-height: 1.5;
  font-weight: 450;
  color: var(--ink-2);
}

.act {
  margin-top: 26px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 22px;
}
.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 27px;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--white);
  background: var(--blue);
  border-radius: 8px;
  transition: background .16s ease, transform .16s ease;
}
.cta svg { width: 17px; height: 17px; transition: transform .16s ease; }
.cta:hover { background: var(--blue-ink); }
.cta:hover svg { transform: translateX(3px); }
.cta:active { transform: translateY(1px); }
.cta:focus-visible { outline: 2px solid var(--blue-ink); outline-offset: 3px; }

.terms {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--ink-3);
}

/* ---- Portrait ---- */
.portrait { padding-top: 6px; }

.panel {
  position: relative;
  /* Layered so the generated backdrop takes over as soon as it exists;
     the SVG texture and the flat gradient are the fallbacks beneath it. */
  background:
    url('assets/panel-backdrop.png') center / cover no-repeat,
    url('assets/panel-texture.svg') center / cover no-repeat,
    linear-gradient(168deg, var(--blue-pale) 0%, var(--blue-panel) 100%);
  border-radius: 4px 4px 4px 64px;
  max-width: 405px;
  margin-left: auto;
  aspect-ratio: 4 / 4.1;
  /* Head breaks the top edge, so the portrait can't be clipped. */
  overflow: visible;
}
/* Hairline that reads as a printed register mark rather than a border. */
.panel::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 12px;
  border: 1px solid rgba(10, 68, 127, .1);
  border-radius: 2px 2px 2px 54px;
  pointer-events: none;
}

/* The plate crops the photograph to the panel; the tags sit outside it so
   they are never clipped. */
.plate {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
}
.portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Crops in past the empty left of the studio backdrop and the chair on
     the right, and seats her face in the upper third of the frame. */
  transform: scale(1.3) translate(2%, 5.5%);
  filter: saturate(.86) contrast(1.03);
}

/* A light grade over the photograph so the violet studio backdrop sits with
   the page instead of fighting it. Soft-light keeps her skin tones honest. */
.plate::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    172deg,
    rgba(10, 102, 194, .40) 0%,
    rgba(10, 102, 194, .14) 52%,
    rgba(255, 255, 255, .12) 100%
  );
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* Annotation tags — slightly off-axis, the way a person would place them. */
.tag {
  position: absolute;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 13px;
  font-size: 13.5px;
  font-weight: 550;
  white-space: nowrap;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(20, 24, 28, .05);
  z-index: 2;
}
.tag i {
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue-text);
}
.tag-a { top: 8%;   left: -13%; transform: rotate(-1.6deg); }
.tag-b { top: 44%;  right: -12%; transform: rotate(1.4deg); }
.tag-c { bottom: 13%; left: -17%; transform: rotate(-.9deg); }

/* Narrow-screen credential row (hidden while the tags can sit on the frame) */
.tag-row {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.tag-row .tag {
  position: static;
  transform: none;
  box-shadow: none;
}

.byline {
  margin-top: 18px;
  display: grid;
  gap: 3px;
  padding-left: 2px;
}
.byline-with {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.byline-name {
  font-family: var(--serif);
  font-size: 28px;
  letter-spacing: .005em;
}
.byline-role {
  font-size: 15.5px;
  font-weight: 450;
  color: var(--ink-3);
}

/* =========================== PROOF BAND =========================== */
.proof {
  border-top: 1px solid var(--rule);
  background: var(--white);
  /* Deep bottom padding so the light band runs past the fold: the dock's
     ground on the first screen is this band, not the dark section below it. */
  padding-block: 22px 120px;
}

.proof-head {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.proof-list {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.proof-list li {
  display: grid;
  gap: 6px;
  padding-left: 20px;
  border-left: 2px solid var(--blue-pale);
}
.fig {
  font-family: var(--mono);
  font-size: clamp(22px, 2.1vw, 28px);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--blue-text);
}
.fig-note {
  font-size: 16px;
  font-weight: 450;
  line-height: 1.4;
  color: var(--ink-2);
}

.proof-tail {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: 17px;
  font-weight: 450;
  color: var(--ink-2);
}
.proof-tail em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.14em;
  color: var(--ink);
}
.proof-tail a {
  margin-left: 6px;
  font-weight: 600;
  color: var(--blue-text);
  border-bottom: 1px solid rgba(10, 102, 194, .35);
  padding-bottom: 1px;
  transition: border-color .16s ease;
}
.proof-tail a:hover { border-bottom-color: var(--blue-text); }

/* ============================ MOTION ==============================
   Entrance is a single staggered rise; the headline rule draws itself
   a beat after the words land. Nothing loops — the page settles and
   stays settled. Everything here is disabled under reduced-motion.
   ================================================================ */

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes riseSoft {
  from { opacity: 0; transform: translateY(22px) scale(.988); }
  to   { opacity: 1; transform: none; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.kicker,
.headline,
.promises li,
.act,
.portrait,
.byline,
.tag {
  opacity: 0;
  animation: rise .78s cubic-bezier(.22, .61, .36, 1) forwards;
}

.kicker      { animation-delay: .06s; }
.headline    { animation-delay: .14s; }
.portrait    { animation: riseSoft .95s cubic-bezier(.22,.61,.36,1) .22s forwards; }
.promises li:nth-child(1) { animation-delay: .40s; }
.promises li:nth-child(2) { animation-delay: .48s; }
.promises li:nth-child(3) { animation-delay: .56s; }
.act         { animation-delay: .66s; }
.byline      { animation-delay: .74s; }

/* Tags keep their off-axis angle through the entrance. */
@keyframes tagA { from { opacity: 0; transform: rotate(-1.6deg) translateY(12px); } to { opacity: 1; transform: rotate(-1.6deg); } }
@keyframes tagB { from { opacity: 0; transform: rotate(1.4deg)  translateY(12px); } to { opacity: 1; transform: rotate(1.4deg);  } }
@keyframes tagC { from { opacity: 0; transform: rotate(-.9deg)  translateY(12px); } to { opacity: 1; transform: rotate(-.9deg);  } }
.tag-a { animation: tagA .7s cubic-bezier(.22,.61,.36,1) .78s forwards; }
.tag-b { animation: tagB .7s cubic-bezier(.22,.61,.36,1) .88s forwards; }
.tag-c { animation: tagC .7s cubic-bezier(.22,.61,.36,1) .98s forwards; }

/* The drawn rule under the emphasised phrase. */
.mark-stroke path {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: draw .85s cubic-bezier(.33, .9, .5, 1) .62s forwards;
}

/* Promise rows answer the cursor. */
.promises li {
  transition: transform .22s cubic-bezier(.22,.61,.36,1);
}
.promises li:hover { transform: translateX(4px); }
.promises li:hover .idx { color: var(--ink); }
.idx { transition: color .22s ease; }

/* Proof band rises when it comes into view. */
.proof-head,
.proof-list li,
.proof-tail {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.proof.in .proof-head { opacity: 1; transform: none; }
.proof.in .proof-list li { opacity: 1; transform: none; }
.proof.in .proof-list li:nth-child(1) { transition-delay: .08s; }
.proof.in .proof-list li:nth-child(2) { transition-delay: .16s; }
.proof.in .proof-list li:nth-child(3) { transition-delay: .24s; }
.proof.in .proof-tail { opacity: 1; transform: none; transition-delay: .32s; }

/* ======================== STICKY ACTION DOCK ======================
   The one dark element on the page, so it reads as a fixed rail rather
   than another section. Held back until the hero's own CTA is gone.
   ================================================================ */
.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: var(--ink);
  color: var(--white);
  transform: translateY(105%);
  transition:
    transform .5s cubic-bezier(.22, .61, .36, 1),
    background .35s ease,
    color .35s ease,
    box-shadow .35s ease;
}
.dock.up { transform: none; }

/* Against the dark section the dock would vanish, so it inverts. */
.dock.on-dark {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 -1px 0 var(--rule);
}
.dock.on-dark .dock-meta { color: var(--ink-3); }
.dock.on-dark .dock-line { color: var(--ink-3); }
.dock.on-dark .dock-line em { color: var(--blue-text); }
.dock.on-dark .dock-face { background: var(--blue-pale); }

.dock-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 32px;
  padding-block: 12px;
}

.dock-id {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}
.dock-face {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 56% 18%;
  background: #26303A;
}
.dock-titles {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.dock-name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dock-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  transition: color .35s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dock-price {
  display: grid;
  gap: 2px;
  justify-items: end;
  text-align: right;
}
.dock-figure {
  font-family: var(--mono);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.dock-line {
  font-size: 12.5px;
  font-weight: 450;
  color: rgba(255, 255, 255, .62);
  transition: color .35s ease;
}
.dock-line em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2em;
  color: #8FBEEC;
}

.dock-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--white);
  background: var(--blue);
  border-radius: 8px;
  white-space: nowrap;
  transition: background .16s ease;
}
.dock-cta svg { width: 16px; height: 16px; transition: transform .16s ease; }
.dock-cta:hover { background: #1F7AD8; }
.dock-cta:hover svg { transform: translateX(3px); }
.dock-cta:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

/* ========================= WHAT WE'LL DO =========================
   Sits below the fold, so it may breathe. Ordinal markers are used
   here and nowhere else on the page: two days in order is a real
   sequence, which is the only thing that earns numbering.
   ================================================================ */
.inside {
  /* The section re-points its own surface tokens rather than restyling every
     child — type, hairlines and captions all follow. */
  --ink:       #F3F7FB;
  --ink-2:     #C3D0DC;
  --ink-3:     #8494A3;
  --rule:      rgba(255, 255, 255, .14);
  --blue-text: #6FB2F0;

  background: #10161C;
  color: var(--ink);
  padding-block: 66px 78px;
}

.kicker-static { animation: none; opacity: 1; }

.inside-head {
  margin-top: 20px;
  max-width: 30ch;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.inside-head em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1em;
  letter-spacing: -.01em;
  color: var(--blue-text);
}

.inside-grid {
  margin-top: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}

/* ---- Facade player ---- */
.tube {
  margin: 0;
  position: relative;
}
.tube::before {
  content: '';
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  border: 1px solid var(--rule);
  background:
    radial-gradient(120% 90% at 50% 12%, rgba(111, 178, 240, .16) 0%, rgba(111, 178, 240, 0) 62%),
    linear-gradient(168deg, #1B242D 0%, #141C24 100%);
}
.tube-play {
  position: absolute;
  left: 50%;
  top: calc(50% - 1.1em);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  padding: 0;
  color: var(--white);
  background: var(--blue);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 10px 26px -10px rgba(10, 66, 130, .6);
  transition: transform .18s cubic-bezier(.22,.61,.36,1), background .18s ease;
}
.tube-play svg { width: 30px; height: 30px; margin-left: 3px; }
.tube-play:hover { background: var(--blue-ink); transform: translate(-50%, -50%) scale(1.06); }
.tube-play:focus-visible { outline: 3px solid var(--blue-ink); outline-offset: 4px; }
.tube-play[disabled] { cursor: default; opacity: .92; }
.tube-play[disabled]:hover { background: var(--blue); transform: translate(-50%, -50%); }

.tube-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: calc(100% - 2.2em);
  border: 0;
  border-radius: 10px;
}

.tube-cap {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---- Schedule ---- */
.when-head {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.days {
  margin-top: 16px;
  border-top: 1px solid var(--rule);
}
.days li {
  display: grid;
  gap: 4px;
  padding-block: 18px;
  border-bottom: 1px solid var(--rule);
}
.day-no {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue-text);
}
.day-date {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.day-time {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.when-total {
  margin-top: 16px;
  font-size: 15px;
  font-weight: 450;
  color: var(--ink-3);
}
.when-total span {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--ink);
}

.when-cta {
  margin-top: 22px;
  width: 100%;
  justify-content: center;
}

/* ---- Closing line ---- */
.trade {
  margin-top: 52px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
  max-width: 46ch;
  font-size: 19px;
  line-height: 1.5;
  font-weight: 450;
  color: var(--ink-2);
}
.trade em {
  display: block;
  margin-top: 8px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.22em;
  line-height: 1.35;
  color: var(--ink);
}

/* ========================== IS THIS YOU? =========================
   The qualifying question, then the three wants, then the two-sided
   verdict. The "for you / not for you" split is the point of the
   section, so it is built as a real contrast rather than a footnote.
   ================================================================ */
.fit {
  background: var(--wash);
  padding-block: 66px 78px;
}

.fit-lead {
  font-size: clamp(19px, 1.9vw, 23px);
  font-weight: 500;
  color: var(--ink-3);
}

.fit-q {
  margin-top: 6px;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -.035em;
  color: var(--ink);
}
.fit-q .mark { color: var(--ink); }
/* Larger type than the hero, so the drawn rule needs to sit lower to clear
   the descenders instead of striking through them. */
.fit-q .mark-stroke {
  color: var(--blue-text);
  opacity: .5;
  bottom: -.11em;
}

.wants {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  border-top: 1px solid var(--rule);
  padding-top: 26px;
}
.wants li {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  max-width: 28ch;
}
.want-text {
  font-size: 16.5px;
  line-height: 1.45;
  font-weight: 450;
  color: var(--ink-3);
}
/* The payoff of each line carries the weight; the setup stays quiet. */
.want-text strong {
  font-weight: 600;
  color: var(--ink);
}

.want-icon {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -6px;
  color: var(--blue-text);
}
.want-icon svg { width: 32px; height: 32px; }
/* The generated icon sits over the drawn one; if the file is absent the
   img removes itself and the fallback shows through. */
.want-icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--wash);
}

.verdict {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.verdict > div {
  padding: 26px 28px 28px;
  border-radius: 12px;
  border: 1px solid;
}
/* The two cards read as an answer and its opposite: blue for the invitation,
   a muted brick red for the disqualifier. Red appears nowhere else on the
   page, so it can only mean "this one is the negative". */
.verdict-yes {
  background: #E4EFFB;
  border-color: #A7C9ED;
  /* The invitation is the card that should catch the eye first. */
  box-shadow: 0 14px 30px -22px rgba(10, 66, 130, .55);
}
.verdict-no {
  background: var(--neg-tint);
  border-color: var(--neg-edge);
}

.verdict-tag {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-text);
}
.verdict-no .verdict-tag { color: var(--neg); }
.verdict-tag svg { width: 15px; height: 15px; }

.verdict-line {
  margin-top: 10px;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 450;
  color: var(--ink-2);
}
.verdict-yes .verdict-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.35;
  color: var(--ink);
}

/* ======================== WHAT YOU LEARN =========================
   Sticky curve on the left, the two days scrolling past it on the
   right. One series, two points, both directly labelled — there is
   nothing hidden, so there is nothing for a tooltip to reveal.
   ================================================================ */
.learn {
  background: var(--white);
  border-top: 1px solid var(--rule);
  /* Last section — bottom padding clears the fixed dock. */
  padding-block: 66px 132px;
}

/* The pinned column: eyebrow, heading and curve travel together. */
.learn-side {
  position: sticky;
  top: 30px;
}

.learn-head {
  margin-top: 16px;
  font-size: clamp(30px, 3.2vw, 42px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -.035em;
}
.learn-head em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1em;
  color: var(--blue-text);
}

.learn-grid {
  margin-top: 6px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: 64px;
  align-items: start;
}

/* ---- The curve ---- */
.curve-wrap {
  margin: 30px 0 0;
  max-width: 520px;
}
.curve { position: relative; }
.curve svg { display: block; width: 100%; height: auto; }

.grid line {
  stroke: var(--rule);
  stroke-width: 1;
  stroke-dasharray: 3 7;
}
.axis line {
  stroke: var(--rule);
  stroke-width: 1.5;
}
.axis-title {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  fill: var(--ink-3);
  text-anchor: middle;
}

.curve-fill { fill: rgba(10, 102, 194, .07); }
.curve-line {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.node {
  fill: var(--blue);
  /* Surface ring keeps the marker legible where it sits on the line. */
  stroke: var(--white);
  stroke-width: 2.5;
}
.node-start { fill: var(--ink-3); }

.node-label {
  position: absolute;
  display: grid;
  gap: 2px;
}
.label-start { left: 2%;  top: 86%; }
.label-end   { right: 1%; top: 1%; text-align: right; justify-items: end; }

.node-day {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.node-fig {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.label-end .node-fig { color: var(--blue-text); font-size: 19px; }
.node-fig i {
  font-style: normal;
  font-size: .72em;
  font-weight: 500;
  color: var(--ink-3);
}

.curve-wrap figcaption {
  margin-top: 14px;
  font-size: 14.5px;
  font-weight: 450;
  color: var(--ink-3);
}

/* ---- The days ---- */
.days-detail {
  display: grid;
  gap: 22px;
}
.day-card {
  padding: 30px 32px 32px;
  background: var(--wash);
  border: 1px solid var(--rule);
  border-radius: 14px;
}
.day-label {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-text);
}
.day-title {
  margin: 6px 0 0;
  font-size: clamp(24px, 2.4vw, 31px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.03em;
}
.day-meta {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.day-meta span {
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--ink-2);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 999px;
}

.day-list {
  margin-top: 20px;
  display: grid;
  gap: 12px;
}
.day-list li {
  position: relative;
  padding-left: 26px;
  font-size: 16.5px;
  line-height: 1.45;
  font-weight: 450;
  color: var(--ink-2);
}
.day-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .42em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--blue-text);
  border-bottom: 2px solid var(--blue-text);
  transform: rotate(-45deg);
}

/* The curve draws itself when the section arrives. */
.curve-line {
  stroke-dasharray: 640;
  stroke-dashoffset: 640;
}
.learn.in .curve-line {
  transition: stroke-dashoffset 1.5s cubic-bezier(.33, .9, .5, 1);
  stroke-dashoffset: 0;
}
.curve-fill, .node, .node-label { opacity: 0; transition: opacity .6s ease .5s; }
.learn.in .curve-fill,
.learn.in .node,
.learn.in .node-label { opacity: 1; }

/* ============================ BONUSES =============================
   Three cards, no numbering: they are three separate things, not a
   sequence. Each card is art, label, name, the line that argues for
   it, and what it costs you.
   ================================================================ */
.bonus {
  background: var(--wash);
  border-top: 1px solid var(--rule);
  padding-block: 66px 78px;
}

.bonus-head {
  margin-top: 18px;
  max-width: 24ch;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.bonus-head .mark { color: var(--ink); }
.bonus-head .mark em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.06em;
  color: var(--blue-text);
}
.bonus-head .mark-stroke { bottom: -.1em; opacity: .42; }

.bonus-lead {
  margin-top: 14px;
  max-width: 46ch;
  font-size: 17.5px;
  line-height: 1.5;
  font-weight: 450;
  color: var(--ink-3);
}

.bonus-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

.bonus-card {
  display: flex;
  flex-direction: column;
  padding: 24px 26px 26px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 14px;
  transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s ease;
}
.bonus-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -26px rgba(10, 66, 130, .55);
}

/* Card art: a drawn mockup of the thing itself, with the generated image
   layered over it when the file exists. */
.bonus-art {
  position: relative;
  overflow: hidden;
  height: 148px;
  margin-bottom: 20px;
  background:
    radial-gradient(120% 110% at 50% 0%, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(165deg, var(--blue-pale) 0%, var(--blue-panel) 100%);
  border-radius: 9px;
}
.bonus-art img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.art-draw {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Paper. Scoped to the first rect in each group — a bare `.sheet rect`
   outranks the content classes below and paints them all white. */
.sheet > rect:first-child { fill: var(--white); }
.sheet-back  > rect:first-child { fill: #CFE1F5; }
.sheet-mid   > rect:first-child { fill: #E3EEFA; }
.sheet-front > rect:first-child {
  fill: var(--white);
  stroke: rgba(10, 68, 127, .12);
  stroke-width: 1;
}

/* Contents */
.ink   { fill: #B9CCE0; }
.faint { fill: #DCE7F2; }
.bar   { fill: #C6D9EE; }
.bubble { fill: #E4EEF9; }
.accent, .spark path { fill: var(--blue); }
.bubble.accent { fill: var(--blue); opacity: .85; }
.ink.accent { fill: var(--blue); }

.bonus-tag {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.bonus-name {
  margin: 7px 0 0;
  font-size: 20px;
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.bonus-sub {
  margin-top: 10px;
  font-size: 15.5px;
  line-height: 1.5;
  font-weight: 450;
  color: var(--ink-3);
}
.bonus-worth {
  /* Pushed to the bottom so the three cards agree on a baseline. */
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.bonus-worth s {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-3);
  text-decoration-thickness: 1.5px;
}
/* "Free" takes the accent, not the reserved red — red on this page means
   the disqualifier and nothing else. */
.bonus-worth b {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--blue-text);
}

/* ---- The maths, spelled out ---- */
.tally {
  margin-top: 30px;
  max-width: 520px;
  border-top: 1px solid var(--rule);
}
.tally-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-block: 14px;
  border-bottom: 1px solid var(--rule);
}
.tally-label {
  font-size: 16px;
  font-weight: 450;
  color: var(--ink-2);
}
.tally-value {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.tally-value s {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-3);
  text-decoration-thickness: 1.5px;
}
.tally-value b {
  font-size: 17px;
  font-weight: 700;
  color: var(--blue-text);
}
.tally-total .tally-label {
  font-weight: 600;
  color: var(--ink);
}
.tally-price {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--ink);
}

.bonus-act {
  margin-top: 38px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 22px;
}

/* ============================== FAQ ==============================
   Questions on the left, the portrait video on the right. Native
   <details> so it opens without JavaScript and reads to a screen
   reader as the disclosure it is.
   ================================================================ */
.faq {
  background: var(--white);
  border-top: 1px solid var(--rule);
  padding-block: 66px 78px;
}
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, .8fr);
  gap: 64px;
  align-items: start;
}

.faq-head {
  margin-top: 16px;
  font-size: clamp(30px, 3.2vw, 42px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -.035em;
}

.asks {
  margin-top: 30px;
  border-top: 1px solid var(--rule);
}
.ask { border-bottom: 1px solid var(--rule); }

.ask summary {
  position: relative;
  display: block;
  padding: 18px 44px 18px 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: color .16s ease;
}
.ask summary::-webkit-details-marker { display: none; }
.ask summary:hover { color: var(--blue-text); }
.ask summary:focus-visible { outline: 2px solid var(--blue-ink); outline-offset: 3px; }

/* Plus that becomes a minus — drawn, so it inherits the type colour. */
.ask-mark {
  position: absolute;
  right: 4px;
  top: 50%;
  width: 13px;
  height: 13px;
  transform: translateY(-50%);
}
.ask-mark::before,
.ask-mark::after {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 13px;
  height: 1.5px;
  background: var(--blue-text);
  transition: transform .2s cubic-bezier(.22,.61,.36,1);
}
.ask-mark::after { transform: rotate(90deg); }
.ask[open] .ask-mark::after { transform: rotate(0deg); }

.ask p {
  padding-bottom: 20px;
  max-width: 56ch;
  font-size: 16.5px;
  line-height: 1.55;
  font-weight: 450;
  color: var(--ink-2);
}

/* ---- Portrait player ---- */
.reel { margin: 0; }
.reel-frame {
  position: relative;
  /* Instagram portrait, not 9:16 — a full-height reel makes the column
     tower over the questions beside it. */
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  border: 1px solid var(--rule);
  overflow: hidden;
  background:
    radial-gradient(110% 70% at 50% 14%, rgba(255, 255, 255, .75) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(168deg, var(--blue-pale) 0%, var(--blue-panel) 100%);
}
.reel-play { top: 50%; }
.reel .tube-frame { height: 100%; }

.reel-cap {
  margin-bottom: 16px;
  display: grid;
  gap: 5px;
}
.reel-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
}
.reel-sub {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--blue-text);
}

/* =========================== CLOSING CTA =========================
   The page ends the way it opened — dark, so the last thing on screen
   is the offer rather than another band of page.
   ================================================================ */
.site-foot {
  --ink:       #F3F7FB;
  --ink-2:     #C3D0DC;
  --ink-3:     #8494A3;
  --rule:      rgba(255, 255, 255, .14);
  --blue-text: #6FB2F0;

  position: relative;
  z-index: 1;
  background: #10161C;
  color: var(--ink);
  padding-block: 74px 128px;
}

.foot-kicker {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.foot-head {
  margin-top: 18px;
  font-size: clamp(42px, 7vw, 104px);
  line-height: .95;
  font-weight: 700;
  letter-spacing: -.045em;
}
.foot-sub {
  margin-top: 22px;
  max-width: 30ch;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(21px, 2.2vw, 28px);
  line-height: 1.28;
  color: var(--ink-2);
}

.foot-act {
  margin-top: 38px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
}
.foot-cta {
  padding: 19px 38px;
  font-size: 18px;
}
.foot-note {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--ink-3);
}

.foot-legal {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}
.foot-legal a {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color .16s ease;
}
.foot-legal a:hover { color: var(--ink); }

.foot-base {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.foot-name {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--ink);
}
.foot-terms {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--ink-3);
}

/* ========================== ENROL DIALOG =========================
   Three fields and a price. Every extra field on a checkout costs
   sign-ups, so this asks for exactly what is needed to send the
   joining link and nothing else.
   ================================================================ */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(10, 16, 22, .55);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .22s ease;
}
.sheet-backdrop.in { opacity: 1; }

.enrol {
  position: fixed;
  z-index: 41;
  left: 50%;
  top: 50%;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 30px 32px 32px;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 40px 80px -32px rgba(10, 24, 40, .5);
  transform: translate(-50%, -46%);
  opacity: 0;
  transition: opacity .22s ease, transform .22s cubic-bezier(.22,.61,.36,1);
}
.enrol.in { opacity: 1; transform: translate(-50%, -50%); }

.enrol-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--ink-3);
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.enrol-close svg { width: 17px; height: 17px; }
.enrol-close:hover { color: var(--ink); background: var(--wash); }
.enrol-close:focus-visible { outline: 2px solid var(--blue-ink); outline-offset: 2px; }

.enrol-kicker {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue-text);
}
.enrol-title {
  margin: 8px 0 0;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -.03em;
}
.enrol-meta {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 450;
  color: var(--ink-3);
}

.enrol-form {
  margin-top: 22px;
  display: grid;
  gap: 14px;
}
.field { display: grid; gap: 6px; }
.field-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--ink-2);
}
.field input {
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 16px;   /* 16px keeps iOS from zooming the page on focus */
  font-weight: 450;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 9px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder { color: #A9B6C3; }
.field input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(10, 102, 194, .16);
}
.field input[aria-invalid] { border-color: var(--neg); }
.field-error:not(:empty) {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--neg);
}

.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-3);
  cursor: pointer;
}
.consent input {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  accent-color: var(--blue);
}
.consent a {
  color: var(--blue-text);
  font-weight: 600;
  border-bottom: 1px solid rgba(10, 102, 194, .3);
}
.consent a:hover { border-bottom-color: var(--blue-text); }

.enrol-pay {
  margin-top: 4px;
  width: 100%;
  justify-content: center;
  font-size: 17px;
}
.enrol-pay[disabled] { opacity: .6; cursor: default; }

.enrol-note {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
}
.enrol-status:not(:empty) {
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--blue-ink);
  background: var(--blue-tint);
  border-radius: 8px;
}

/* ======================= POLICY DOCUMENTS ========================
   Terms, privacy, refunds, delivery, contact. Plain reading pages —
   one column, generous measure, no decoration competing with the text.
   ================================================================ */
.doc {
  background: var(--white);
  padding-block: 54px 90px;
}
.doc-frame { max-width: 760px; }

.doc-title {
  margin: 16px 0 0;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -.035em;
}
.doc-date {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--ink-3);
}

.doc-lead {
  margin-top: 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--rule);
  font-size: 19px;
  line-height: 1.55;
  font-weight: 450;
  color: var(--ink-2);
}

.doc h2 {
  margin: 34px 0 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
}
.doc p,
.doc li {
  margin-top: 12px;
  font-size: 16.5px;
  line-height: 1.62;
  font-weight: 450;
  color: var(--ink-2);
}
.doc ul {
  margin-top: 6px;
  padding-left: 20px;
  list-style: disc;
}
.doc li { padding-left: 4px; }
.doc li::marker { color: #B7C6D5; }
.doc strong { font-weight: 600; color: var(--ink); }
.doc a {
  color: var(--blue-text);
  font-weight: 500;
  border-bottom: 1px solid rgba(10, 102, 194, .32);
}
.doc a:hover { border-bottom-color: var(--blue-text); }

/* Details only Kamilah can supply. Deliberately loud — an unfilled token
   must be impossible to submit by accident. */
.fill {
  padding: 1px 7px;
  font-family: var(--mono);
  font-size: .82em;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--neg);
  background: var(--neg-tint);
  border: 1px dashed var(--neg-edge);
  border-radius: 4px;
  white-space: nowrap;
}

.doc-foot {
  background: var(--wash);
  border-top: 1px solid var(--rule);
  padding-block: 26px 34px;
}
.doc-foot-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 28px;
}
.doc-back {
  font-size: 15px;
  font-weight: 600;
  color: var(--blue-text);
}
.doc-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.doc-nav a {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.doc-nav a:hover { color: var(--ink); }

/* The masthead wordmark is a link on these pages. */
a.wordmark { color: var(--ink); }

/* =========================== THANK YOU ===========================
   The invite is revealed only once the backend confirms the webhook
   marked this lead paid — arriving at this URL proves nothing.
   ================================================================ */
.done {
  background: var(--white);
  padding-block: 80px 100px;
}
.done-frame { max-width: 640px; }

.state { display: grid; justify-items: start; }
/* `display: grid` beats the browser default for [hidden], so without this the
   page renders all three states stacked on top of each other. */
.state[hidden] { display: none; }

.spinner {
  width: 26px;
  height: 26px;
  margin-bottom: 22px;
  border: 2.5px solid var(--blue-pale);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.done-tick {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 20px;
  color: var(--white);
  background: var(--blue);
  border-radius: 50%;
}
.done-tick svg { width: 24px; height: 24px; }

.done-title {
  margin: 14px 0 0;
  font-size: clamp(32px, 4.4vw, 50px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -.04em;
}
.done-sub {
  margin-top: 16px;
  max-width: 46ch;
  font-size: 18px;
  line-height: 1.55;
  font-weight: 450;
  color: var(--ink-2);
}
.done-cta { margin-top: 28px; }

.next {
  margin-top: 40px;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
  display: grid;
  width: 100%;
}
/* Every child of a grid item becomes its own track — the sentence is wrapped
   in a span so an inline <strong> cannot break out into the number column. */
.next li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  align-items: baseline;
  padding-block: 14px;
  border-bottom: 1px solid var(--rule);
}
.next-text {
  font-size: 16.5px;
  line-height: 1.5;
  font-weight: 450;
  color: var(--ink-2);
}
.next-no {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--blue-text);
}
.next strong { font-weight: 600; color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}

/* ============================ RESPONSIVE ========================== */

/* Let the portrait column run off the right edge of the page. */
@media (min-width: 1240px) {
  .panel { margin-right: -80px; }
}

@media (max-width: 1080px) {
  .hero-grid { gap: 48px; }
  .tag { font-size: 12.5px; padding: 7px 12px; }
  .tag-a { left: -6%; }
  .tag-c { left: -8%; }
}

@media (max-width: 900px) {
  .hero { padding-block: 46px 44px; }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Order on narrow screens: kicker, headline, portrait, promises, CTA. */
  .pitch { display: contents; }
  .kicker    { order: 1; }
  .headline  { order: 2; }
  .portrait  { order: 3; margin-top: 34px; padding-top: 0; }
  .promises  { order: 4; margin-top: 38px; max-width: none; }
  .act       { order: 5; }

  .panel {
    max-width: 340px;
    aspect-ratio: 4 / 4.3;
    border-radius: 4px 4px 4px 52px;
  }
  .tag-a { left: auto; right: -6%; top: 6%; }
  .tag-b { right: -4%; top: 46%; }
  .tag-c { left: -6%; bottom: 8%; }

  .cta { flex: 1 1 auto; justify-content: center; }

  .proof-list { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 560px) {
  :root { --gutter: 22px; }
  .masthead-meta { display: none; }
  .panel { max-width: none; }
  /* Tags would cover her face at this width — set them below the frame. */
  .panel .tag { display: none; }
  .tag-row { display: flex; }
  .byline { margin-top: 20px; }
}

@media (max-width: 860px) {
  .inside { padding-block: 46px 54px; }
  .inside-grid {
    grid-template-columns: 1fr;
    gap: 34px;
    margin-top: 32px;
  }
  .tube-play { width: 62px; height: 62px; }
  .tube-play svg { width: 25px; height: 25px; }
  .trade { margin-top: 38px; }
}

@media (max-width: 860px) {
  .fit { padding-block: 48px 56px; }
  .wants {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 36px;
  }
  .wants li { max-width: none; }
  .want-icon { width: 38px; height: 38px; margin-top: -4px; }
  .want-icon svg { width: 28px; height: 28px; }
  .verdict {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 36px;
  }
  .verdict > div { padding: 22px 22px 24px; }
}

@media (max-width: 900px) {
  .learn { padding-block: 48px 56px; }
  .learn-grid {
    grid-template-columns: 1fr;
    gap: 34px;
    margin-top: 32px;
  }
  /* Pinning only earns its keep when there is a second column to scroll past. */
  .learn-side { position: static; }
  .curve-wrap { max-width: none; }
  .day-card { padding: 24px 22px 26px; }
}

@media (max-width: 900px) {
  .bonus { padding-block: 48px 56px; }
  .bonus-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 32px;
  }
  .bonus-art { height: 132px; }
  .bonus-card:hover { transform: none; box-shadow: none; }
}

@media (max-width: 900px) {
  .faq { padding-block: 48px 54px; }
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }
  .reel-frame { max-width: 340px; }
  .site-foot { padding-block: 54px 124px; }
  .foot-cta { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 760px) {
  .dock-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 16px;
    padding-block: 10px;
  }
  .dock-face { width: 38px; height: 38px; }
  .dock-name { font-size: 14.5px; }
  .dock-meta { display: none; }
  /* The price line is the offer's argument — it stays. Letting .dock-price
     dissolve into the parent grid puts the figure beside the title and the
     line on its own row beneath. */
  .dock-price { display: contents; }
  .dock-figure {
    justify-self: end;
    align-self: center;
    font-size: 21px;
  }
  .dock-line {
    grid-column: 1 / -1;
    font-size: 12px;
    text-align: left;
  }
  .dock-cta {
    grid-column: 1 / -1;
    justify-content: center;
    padding: 12px 20px;
  }
}

@media (max-width: 560px) {
  .enrol {
    /* On a phone it reads better as a sheet than a floating card. */
    top: auto;
    bottom: 0;
    width: 100%;
    max-height: 92vh;
    border-radius: 18px 18px 0 0;
    transform: translate(-50%, 12px);
  }
  .enrol.in { transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .cta, .cta svg, .promises li, .dock, .dock-cta, .dock-cta svg,
  .tube-play, .bonus-card, .ask summary, .ask-mark::before,
  .ask-mark::after, .enrol, .sheet-backdrop { transition: none; }
  .kicker, .headline, .promises li, .act, .portrait, .byline, .tag {
    opacity: 1;
    animation: none;
  }
  .tag-a { transform: rotate(-1.6deg); }
  .tag-b { transform: rotate(1.4deg); }
  .tag-c { transform: rotate(-.9deg); }
  .mark-stroke path { stroke-dashoffset: 0; animation: none; }
  .curve-line { stroke-dashoffset: 0; transition: none; }
  .curve-fill, .node, .node-label { opacity: 1; transition: none; }
  .proof-head, .proof-list li, .proof-tail {
    opacity: 1;
    transform: none;
    transition: none;
  }
}