/* ============================================================
   THE MINI-MOVEMENT METHOD — $27 sales page
   getgoodcoaching.com/mini-movement/

   This is a DELIBERATE PORT of the root design system in
   public/styles.css (the $99 Movements Made Real page), so the
   $27 page and the class it upsells into read as one campaign:
   black + gold on cream, Anton display, Instrument Serif accent,
   Montserrat body, hard 3px offset shadows.

   WHY A SECOND FILE rather than pointing at /styles.css:
   deploy.ps1 hard-fails on a root-relative asset path anywhere
   under mini-movement/, because the funnel has to stay portable
   and self-contained. Tokens are copied, not imported, for the
   same reason. If the root palette changes, change it here too —
   the three accent tokens are the only ones that usually move.

   NOT the funnel's old styles.css. That file is still in place
   and still serves /upgrade/ and /access/ in the previous navy
   palette; both are off the live path since routing moved to
   /live/ on 2026-09-15. Do not delete it — those pages load it.

   TYPE FLOOR: Shanda's rule is 16px minimum, 17px preferred, and
   anything not worth making readable should be deleted instead.
   Reading copy here is 17px rising to 18px; the only type below
   16px is uppercase labels and the legal line, which are labels
   rather than copy. Do not reintroduce 13px body text.
   ============================================================ */

:root {
  --cream:      #FAF6EF;
  --ink:        #0D0D0D;
  --accent:     #F4C43E;
  --accent-soft:#FCEFC4;
  --accent-rgb: 244, 196, 62;
  --body:       #3A3A3A;
  --small:      #6B6B6B;
  --tick:       #2E7D32;
  --cross:      #E8336D;

  --font-display: "Anton", "Oswald", Impact, sans-serif;
  --font-head:    "Oswald", "Anton", Impact, sans-serif;
  --font-serif:   "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body:    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --col:    640px;
  --gutter: 24px;

  /* The sticky bar wraps to two lines on a phone now that its type is 17px
     (Shanda's floor). --bar-h has to cover the tallest it can get, because
     body padding-top is what stops the fixed bar covering the page. */
  --bar-h:  58px;

  /* Tighter than the root page's 48/72. Shanda asked for less white
     space and smaller boxes; this is where most of that comes from. */
  --pad-y:  40px;
}

@media (min-width: 700px) {
  :root { --pad-y: 56px; --bar-h: 44px; }
}

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

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

body {
  margin: 0;
  padding-top: var(--bar-h);
  background: var(--cream);
  color: var(--body);
  font-family: var(--font-body);
  /* 17px at EVERY width, not 16 rising to 17. Shanda's floor is 17px and the
     old 16px base put every inheriting element - bullets, steps, buttons -
     under it on phones, which is where most of this traffic reads. */
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: #fff; padding: 12px 20px; z-index: 100;
}
.skip:focus { left: 8px; top: calc(var(--bar-h) + 8px); }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* ---------- layout ---------- */
.section { padding: var(--pad-y) var(--gutter); }
.section--tight { padding-top: 0; }

.col {
  max-width: var(--col);
  margin: 0 auto;
  text-align: center;
}

/* The display headline breaks wider than the body column so the
   Anton lines hold their shape at the top end of the clamp. */
.col--hero  { max-width: 880px; }
.hero-inner { max-width: var(--col); margin: 0 auto; }

.band {
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.band--gold { background: var(--accent); }

/* ---------- sticky urgency bar ---------- */
.urgency {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--bar-h);
  display: flex;
  /* wrap, or the 17px text overflows the bar sideways on a phone instead of
     breaking onto a second line */
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 8px;
  background: var(--ink);
  color: var(--accent);
  font-size: 17px;
  font-weight: 700;
  /* 0.03em, not 0.08em: at 17px the wider tracking pushed this to three lines */
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 0 12px;
  line-height: 1.25;
}
.urgency:hover { color: #fff; }

/* ---------- CTA button ---------- */
.cta-wrap { margin: 26px 0 0; }

.cta {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 22px 52px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  line-height: 1.15;
  box-shadow: 0 0 6px 0 rgba(var(--accent-rgb), 0.55),
              0 0 18px 0 rgba(var(--accent-rgb), 0.30);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 8px 0 rgba(var(--accent-rgb), 0.75),
              0 0 26px 0 rgba(var(--accent-rgb), 0.40);
}
.cta:active { transform: translateY(0); }

@media (min-width: 700px) {
  .cta { font-size: 18px; padding: 24px 60px; }
}

@media (max-width: 699px) {
  .cta {
    display: block;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* 15px, not the root page's 13px. This line carries the price, which
   makes it the most important small text on the page. */
.cta-note {
  margin: 10px 0 0;
  font-size: 17px;
  color: var(--small);
  letter-spacing: 0.01em;
}

.was {
  text-decoration: line-through;
  opacity: 0.75;
  margin-right: 2px;
}

.on-dark .cta {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
  box-shadow: 0 0 10px 0 rgba(var(--accent-rgb), 0.45);
}
.on-dark .cta:hover { box-shadow: 0 0 16px 0 rgba(var(--accent-rgb), 0.65); }
.on-dark .cta-note { color: var(--accent); }

.band--gold .cta-note { color: #5C4A12; }

.arrow {
  display: block;
  margin: 0 auto -6px;
  width: 54px;
  color: var(--ink);
}

/* ---------- pill row ---------- */
.pills { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.pill {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 15px 18px;
  box-shadow: 3px 3px 0 0 var(--ink);
  text-align: left;
  color: var(--ink);
}

.pill__icon { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 3px; }
.pill__icon--tick { color: var(--tick); }

.pill__text { font-size: 17px; line-height: 1.55; }
@media (min-width: 700px) { .pill__text { font-size: 18px; } }

/* ---------- numbered row ---------- */
.numbers { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.num {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: 3px 3px 0 0 var(--ink);
  overflow: hidden;
  text-align: left;
  color: var(--ink);
}

.num__n {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  padding: 14px 8px;
  border-right: 2px solid var(--ink);
  font-family: var(--font-serif);
  font-size: 30px;
  line-height: 1;
  color: var(--ink);
}
@media (min-width: 700px) { .num__n { min-width: 68px; font-size: 34px; } }

.num__text { padding: 15px 17px; font-size: 17px; line-height: 1.55; }
@media (min-width: 700px) { .num__text { font-size: 18px; } }

.num__text strong { font-weight: 700; }

/* ---------- black box ---------- */
.blackbox {
  background: var(--ink);
  color: #fff;
  border-radius: 16px;
  padding: 22px;
}
@media (min-width: 700px) { .blackbox { padding: 28px; } }

/* ---------- media frame ---------- */
.frame {
  position: relative;
  margin: 0;
  background: var(--ink);
  border-radius: 18px;
  padding: 10px 10px 22px;
}
/* height:auto matters — the img carries width/height attributes for layout
   stability, and without it CSS width:100% leaves the literal height attribute
   in force and the image renders stretched. */
.frame > img { border-radius: 10px; width: 100%; height: auto; }

/* .frame--portrait was removed on 2026-09-15 with the hero video. The hero now
   holds a 2:1 landscape product mockup, which wants the full column width. */

.note-tag {
  position: absolute;
  top: -16px;
  left: -6px;
  transform: rotate(-6deg);
  background: #fff;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 0 var(--ink);
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  max-width: 160px;
  line-height: 1.25;
  text-align: left;
}
@media (min-width: 700px) { .note-tag { left: -18px; } }

/* ---------- typography ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--ink);
  color: var(--accent);
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.25;
}

.hero-title {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(38px, 8vw, 66px);
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: var(--ink);
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
}

/* the italic-serif accent line — the device that makes it look expensive */
.hero-title .serif {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: 0.98;
  font-size: 1.04em;
}

.serif-in {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* Instrument Serif has a much smaller x-height than Montserrat, so at an
   equal font-size it reads shrunken next to body copy. Match it optically. */
.num__text .serif-in,
.pill__text .serif-in,
.lede .serif-in { font-size: 1.15em; }

.h2 {
  margin: 0 0 22px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(27px, 5.6vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: balance;
}

.h-transition {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(32px, 7.2vw, 52px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.h-transition .serif-in { text-transform: none; font-size: 1.06em; }

/* Reading copy. 17px floor rising to 18px — this is the size Shanda
   asked for and most of the page is set in it. */
.lede { font-size: 17px; line-height: 1.6; color: var(--body); }
@media (min-width: 700px) { .lede { font-size: 18px; } }

.lede strong { color: var(--ink); font-weight: 700; }
.lede em { font-style: italic; }

.nowrap { white-space: nowrap; }

/* The conversational aside — Shanda's "normalize it" line. Serif italic
   so it reads as her speaking rather than as more sales copy. */
.aside {
  margin: 20px auto 0;
  max-width: 34em;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(18px, 3.8vw, 22px);
  line-height: 1.4;
  color: var(--ink);
}

.closer {
  margin: 18px 0 0;
  font-weight: 700;
  color: var(--ink);
  font-size: 17px;
}

.payoff {
  margin: 24px 0 0;
  font-weight: 700;
  color: var(--ink);
  font-size: clamp(17px, 3.6vw, 20px);
  line-height: 1.35;
}

/* "REALLY" — Shanda asked for this word emphasised specifically. */
.shout {
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-bottom: 3px solid var(--accent);
  padding-bottom: 1px;
}

/* ---------- proof screenshots ---------- */
.proof {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 560px) { .proof { grid-template-columns: 1fr 1fr; } }

.proof__card {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.proof__card--wide { grid-column: 1 / -1; }

.proof__shot {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 10px;
  padding: 6px;
}
.proof__shot img { border-radius: 6px; width: 100%; height: auto; }

.proof__cap {
  margin-top: 8px;
  font-size: 17px;
  color: #fff;
  line-height: 1.4;
}

/* A testimonial that arrived as text rather than a screenshot. Same white
   panel and same grid cell as .proof__shot, so the two kinds read as one
   component rather than two. */
.proof__quote {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
  border-radius: 10px;
  padding: 20px 18px;
  text-align: left;
  color: var(--ink);
}
.proof__quote p {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  font-style: italic;
}
.proof__quote .who {
  display: block;
  margin-top: 14px;
  font-style: normal;
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
}

/* ---------- price block ---------- */
.priceline { margin: 26px 0 0; }

.priceline__amt {
  font-family: var(--font-serif);
  font-size: clamp(44px, 11vw, 62px);
  line-height: 1;
  color: var(--ink);
}
.priceline__was {
  font-family: var(--font-serif);
  color: var(--small);
  text-decoration: line-through;
  margin-right: 10px;
}
.priceline__terms {
  margin: 10px 0 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--small);
}
.priceline__tonight {
  margin: 12px 0 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

/* ---------- checkout (Whop inline embed) ---------- */
#checkout { scroll-margin-top: calc(var(--bar-h) + 16px); }

.checkout {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 16px;
  box-shadow: 4px 4px 0 0 var(--ink);
  overflow: hidden;
  text-align: left;
}

/* Re-spaced for 17px type: the three labels in here were 12-15px and needed
   more room once they were raised to the floor. */
.checkout__head {
  background: var(--ink);
  color: #fff;
  padding: 24px 22px;
  text-align: center;
}

.checkout__name {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 17px;
  line-height: 1.3;
}

.checkout__sub {
  margin: 10px 0 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
  line-height: 1.35;
}

.checkout__price {
  margin: 12px 0 0;
  font-family: var(--font-serif);
  font-size: 40px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.6);
}
.checkout__now { color: #fff; }

.checkout__terms {
  margin: 10px 0 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.checkout__mount { padding: 8px; min-height: 320px; }
.checkout__mount iframe { display: block; width: 100%; border: 0; }

/* Stands in for the embed until the Whop plan exists. Never ships live —
   deploy.ps1 warns on data-plan-status="tbc" and the page cannot take money. */
.checkout__pending {
  margin: 0;
  border: 2px dashed rgba(13, 13, 13, 0.35);
  border-radius: 10px;
  padding: 26px 18px;
  text-align: center;
  font-size: 17px;
  line-height: 1.5;
  color: var(--small);
}

/* ---------- copy + photo row ----------
   Used by "But what if I've never run a campaign like this?": copy on the
   left, photo on the right once there is room. On a phone the photo drops
   below the copy at full width rather than being squeezed into a stamp. */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  text-align: center;
}
@media (min-width: 700px) {
  .split { grid-template-columns: 1fr 270px; gap: 32px; text-align: left; }
  .split .h2 { text-align: left; }

  /* Photo on the LEFT instead ("Money Loves Speed"). */
  .split--photo-left { grid-template-columns: 270px 1fr; }
}

/* The photo-left variant has the photo first in the markup so it lands in the
   left column on desktop. On a phone that would push the headline below a tall
   portrait, so the copy is ordered back above it. */
@media (max-width: 699px) {
  .split--photo-left .split__photo { order: 2; }
}

.split__photo {
  margin: 0;
  border: 2px solid var(--ink);
  border-radius: 16px;
  box-shadow: 4px 4px 0 0 var(--ink);
  overflow: hidden;
  /* keeps the portrait from towering over the copy beside it */
  max-width: 320px;
  justify-self: center;
}
.split__photo img { display: block; width: 100%; height: auto; }

/* ---------- sign-off line ---------- */
.sig {
  margin: 22px 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(19px, 4.2vw, 24px);
  line-height: 1.3;
  color: var(--ink);
}

/* ---------- footer ---------- */
.footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.62);
  padding: 36px var(--gutter);
  font-size: 13px;
  line-height: 1.65;
  text-align: center;
}
.footer a { color: var(--accent); text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer__brand {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  font-size: 13px;
  margin-bottom: 14px;
}
.footer__legal { max-width: 620px; margin: 14px auto 0; color: rgba(255,255,255,0.45); }
.footer__links { margin: 12px 0 0; }
.footer__links span { color: rgba(255,255,255,0.3); margin: 0 6px; }

@media (prefers-reduced-motion: reduce) {
  .cta { transition: none; }
  html { scroll-behavior: auto; }
}

@media print {
  .urgency, .cta, .skip { display: none; }
  body { padding-top: 0; font-size: 12pt; }
}