/* ==========================================================================
   saidwell launch pages: site layer
   Loads after assets/css/styles.css (Ali Stone's Tailwind capture, Rare Days
   export of 2026-10-01 v2, purged to the classes the two pages use; its header
   lists the edits made inside it: lg at 1024, bone backdrop, no SERF axis, no
   embedded font). Everything here is ours: licensed fonts, brand tokens,
   open/closed state, draft flags, motion choreography values, the values for
   the 1024 to 1199 band, hero fold, sticky gate, small-screen fixes, cohort
   extras. Nothing here restates a rule that lives in styles.css.
   Tailwind's rules sit in @layer utilities, so every unlayered rule in this
   file wins over a utility of the same selector weight.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts */
/* Season (Displaay), licensed to Civility LLC for web use (invoice DP16217).
   Static faces, byte-identical to the order folder. See fonts/README.txt. */
@font-face {
  font-family: "Season Mix";
  src: url("../../fonts/SeasonMix-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Season Mix";
  src: url("../../fonts/SeasonMix-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Season Mix";
  src: url("../../fonts/SeasonMix-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Season Mix";
  src: url("../../fonts/SeasonMix-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Season Sans";
  src: url("../../fonts/SeasonSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Season Sans";
  src: url("../../fonts/SeasonSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Season Sans";
  src: url("../../fonts/SeasonSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- tokens */
:root {
  /* The export pointed these at its embedded "Season" variable face (SERF axis
     0 = Sans, 50 = Mix); the purged styles.css no longer defines them. Mapped
     to the licensed static families. Tailwind's .font-serif reads --font-serif. */
  --font-sans: "Season Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Season Mix", Georgia, "Times New Roman", serif;
  --font-display: var(--font-sans);

  /* brand (saidwell Core styles, Sept 2026) */
  --green: #0c4e36;
  --green-mid: #388e5c;
  --offwhite: #f6f5f0;
  --sage: #e1ecd8;
  --yellow: #fecb02;
  --yellow-tint: #faf2c1;
  --ink: #1b1b1b;
  --navy: #2f3f6a;

  /* contrast token: the design sets small secondary copy as brand colour at
     55 to 70% opacity, which fails WCAG AA at body size. Solid stand-in:
     --text-sage  #0c4e36 at 60% on cream/white would be #6a9180 (3.2:1); this passes at 4.7:1 on bone,
                  5.1:1 on white, 4.5:1 on the yellow tint. Rare Days sign off the value. */
  --text-sage: #4a7764;

  --flag: #ff5c00;          /* draft flags only */
  --focus: var(--navy);
}

html { font-synthesis: none; }

/* Edited inside styles.css, not restated here: .font-serif keeps only its
   -.01em tracking (no SERF axis), html/body stay bone at every width (the
   export's 768+ --page-backdrop override is gone), lg and the --bp-lg token
   are 1024. */

/* focus rings: navy on light sections, yellow on green */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-dark { --focus: var(--yellow); }

/* ---------------------------------------------------------------- pieces */
.wordmark svg { fill: currentColor; overflow: visible; }
.hero-nav a { display: block; }

/* squircle corners: motion.js sets a clip-path per element; this is the no-JS fallback */
[data-squircle="20"] { border-radius: 20px; }
[data-squircle="24"] { border-radius: 24px; }
[data-squircle="36"] { border-radius: 36px; }

/* showcase stage (desktop): Ali's layer positions, formerly inline styles */
.stage { clip-path: inset(-9999px 0 -9999px -9999px); }
.stage-ask   { left: 59%;  top: 9.7%; }
.stage-cards { left: -18%; top: 41.5%; }
.stage-phone { left: -20%; top: -34%; }
.stage-note  { left: 55%;  top: 58.3%; }

/* press logo widths, formerly inline styles */
.logo-time  { width: 48px; }
.logo-nyt   { width: 257px; }
.logo-abc   { width: 110px; }
.logo-yahoo { width: 134px; }

/* group card shadow, formerly an inline filter */
.card-shadow { filter: drop-shadow(rgba(0, 0, 0, 0.2) 0 18px 26px); }

/* contrast stand-in (added next to the design's tint class, which it overrides) */
.tone-muted { color: var(--text-sage); }

/* buy buttons while a link is missing (site.js removes the href) */
a[data-checkout][aria-disabled="true"] { cursor: not-allowed; opacity: 0.85; }

/* testimonial cards: the real quotes vary in length; rows stretch cards to the tallest */
.t-card { align-self: stretch; }
[data-testimonials]:focus-visible { outline-offset: -3px; }
/* keyboard-reachable pause control (WCAG 2.2.2); hover and touch also pause */
.t-pause {
  position: absolute;
  right: max(var(--gutter), 20px);
  top: -48px;
  z-index: 5;
  padding: 8px 14px;
  border: 0;
  border-radius: 10px;
  background: var(--sage);
  color: var(--green);
  font: 600 13px/1 var(--font-sans);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
}
.t-pause:focus-visible { opacity: 1; pointer-events: auto; }
.t-wrap { overflow: visible; }
.t-wrap > [data-testimonials] { overflow-y: hidden; } /* also makes overflow-x compute to auto at lg, so the strip stays scrollable when the rows never move (no html.motion) */
/* Moving strip (html.motion): edge to edge with soft edges, no content-column padding at the start
   (Grant 2026-10-05). Without motion it stays a swipe strip aligned to the content column. */
html.motion .t-wrap > [data-testimonials] {
  padding-inline: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
@media (min-width: 1024px) {
  html.motion .t-wrap > [data-testimonials] {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent);
  }
}

/* FAQ answers leave the accessibility tree once collapsed (motion.js adds hidden after the transition) */
.faq-answer[hidden] { display: none !important; }
/* no JS (site.js never adds html.js): every answer is open, so nothing is unreachable */
html:not(.js) .faq-answer { margin-top: 16px; grid-template-rows: 1fr; }
html:not(.js) .faq-answer p { opacity: 1; transform: none; }
html:not(.js) [data-faq-item] button svg { transform: rotate(-90deg); }

/* footer meta row */
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 40px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--text-sage);
}
.footer-meta a { color: var(--green); text-decoration: none; }
.footer-meta a:hover { text-decoration: underline; }
.footer-wordmark { aspect-ratio: 434 / 92; }

/* ---------------------------------------------------------------- states */
/* launch-only content disappears once the cart closes; closed-only appears */
.is-closed [data-launch-only] { display: none !important; }
html:not(.is-closed) [data-closed-only] { display: none !important; }
/* closed: the $497 card sits alone, centred at its open-state width */
.is-closed [data-pricing] { justify-content: center; }
@media (min-width: 1024px) {
  .is-closed [data-pricing-card="green"] { flex: 0 1 500px; max-width: 500px; }
}

/* ---------------------------------------------------------------- draft mode (config DRAFT: true) */
/* Every [data-placeholder] (copy or asset still TBC) and every pending or
   staging checkout link gets a dashed outline and a small label. */
.is-draft [data-placeholder],
.is-draft [data-link-flag] {
  position: relative;
  outline: 2px dashed var(--flag);
  outline-offset: 3px;
}
.is-draft [data-placeholder]:focus-visible,
.is-draft [data-link-flag]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.is-draft [data-placeholder]::after,
.is-draft [data-link-flag]::before {
  position: absolute;
  z-index: 20;
  padding: 3px 5px;
  border-radius: 3px;
  background: var(--flag);
  color: #fff;
  font: 700 9.5px/1 var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
.is-draft [data-placeholder]::after {
  content: attr(data-placeholder);
  left: -5px;
  top: -14px;
}
.is-draft [data-placeholder=""]::after { content: "TBC"; }
/* hero h1 span and subhead: the tight leading puts a top label over the line above, so these print below */
.is-draft .draft-flag-below::after { top: auto; bottom: -16px; }
.is-draft [data-link-flag]::before {
  content: attr(data-link-flag);
  right: -5px;
  bottom: -14px;
  background: #b0003a;
}
.is-draft .tbc {
  border-radius: 3px;
  background: rgba(255, 92, 0, 0.16);
  box-shadow: 0 0 0 1px rgba(255, 92, 0, 0.35);
}

/* ---------------------------------------------------------------- motion */
/* html.motion is set by site.js before first paint only when motion is allowed
   (no reduced-motion, no ?motion=off, IntersectionObserver present). motion.js
   adds .is-revealed when an element scrolls into view. Nothing here can hide
   content for good: every pre-reveal rule carries a 4 s safety animation that
   lands on the final state even if motion.js never runs. */
@keyframes reveal-safety { to { opacity: 1; transform: none; } }

.motion [data-reveal] {
  transition: opacity 900ms ease-out, transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.motion [data-reveal][data-delay="150"] { transition-delay: 150ms; }
.motion [data-reveal]:not(.is-revealed) {
  opacity: 0;
  transform: translateY(20px);
  animation: reveal-safety 1ms linear 4s forwards;
}

/* showcase stage: phone slides up, cards and Ask Jefferson slide out, note fades up */
.motion [data-stage-layer] {
  transition: transform 820ms cubic-bezier(0.22, 1, 0.36, 1), opacity 820ms ease-out;
}
.motion .stage-ask   { transition-delay: 620ms; }
.motion .stage-cards { transition-delay: 340ms; }
.motion .stage-phone { transition-delay: 0ms; }
.motion .stage-note  { transition-delay: 1150ms; }
.motion [data-stage]:not(.is-revealed) [data-stage-layer] {
  opacity: 0;
  animation: reveal-safety 1ms linear 4s forwards;
}
.motion [data-stage]:not(.is-revealed) .stage-ask   { transform: translateX(-7%); }
.motion [data-stage]:not(.is-revealed) .stage-cards { transform: translateX(26%); }
.motion [data-stage]:not(.is-revealed) .stage-phone { transform: translateY(9%); }
.motion [data-stage]:not(.is-revealed) .stage-note  { transform: translateY(14%); }

/* pricing cards: plain fade-up everywhere; on the open two-card desktop layout
   the green card fades up at the centre, slides left, then the white pops in */
.motion [data-pricing-card] {
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), opacity 600ms ease-out;
}
.motion [data-pricing-card="white"] {
  transition: transform 620ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 420ms ease-out;
}
.motion [data-pricing-card]:not(.is-revealed) {
  opacity: 0;
  transform: translateY(28px);
  animation: reveal-safety 1ms linear 4s forwards;
}
@media (min-width: 1024px) {
  html.motion[data-page="main"]:not(.is-closed) [data-pricing-card="green"]:not(.is-revealed) { transform: translate(46%, 28px); }
  html.motion[data-page="main"]:not(.is-closed) [data-pricing-card="green"].is-revealed:not(.is-settled) { transform: translate(46%, 0); }
  html.motion[data-page="main"]:not(.is-closed) [data-pricing-card="white"]:not(.is-revealed) { transform: translateX(14%) scale(0.96); }
}

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

/* ---------------------------------------------------------------- 768 to 1023 px (tablet band)
   Grant's instruction of 2026-10-01 overrides the export's stacked tablet layout
   (a full-width photo band with Jefferson small at the right, centred copy and
   panel below): on iPad portrait and half-screen desktop windows it read as
   broken. The desktop two-column hero now starts at 768 (markup: the absolute
   photo is md:block, the in-flow band md:hidden; the lg: utilities still start
   at 1024, so the column values for this band live here). Only the hero and the
   pricing headings change; section 2, the press row, the testimonials, the FAQ
   and the footer keep the export's md layout (reasons in README, "Tablet band").
   motion.js keeps every switch at 1024, which matches: pricing stays stacked and
   the testimonials stay a swipe strip below 1024. Ali may want to confirm. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .hero-column { padding-top: 48px; padding-bottom: 72px; }
  /* 390 px at 768 (the 56 px "Communicator" line needs 360), capped so the column
     never exceeds the 48% it gets at 1024 by much; Jefferson takes the rest */
  .hero-text { max-width: min(58%, 460px); align-items: flex-start; text-align: left; }
  .hero-text .mx-auto { margin-inline: 0; }
  .hero-closed { align-items: flex-start; }
  /* countdown panel is the column's width (390 at 768): cells share it as on phones, digits 40 px */
  .cd-cell { flex: 1 1 0; min-width: 0; padding-inline: 8px; }
  .cd-cell [data-cd] { font-size: 40px; }
  /* pricing stays stacked (side by side the cards would be 312 to 440 px, too narrow for
     the group card); the full-width cards take the desktop heading sizes */
  #plan-individual-title { font-size: 40px; }
  #plan-group-title { font-size: 56px; }
}

/* hero photo, 768 to 1199: a shorter box than the export's +200 px (Jefferson is then
   about 320 px wide, his head level with the h1) and object-position 62% so he sits in
   the right column clear of the panel; Ali's 50% crop put his face at the right edge at
   1024. From 1200 (Ali's desktop) the export's values apply unchanged. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .hero-photo { height: calc(100% + 70px); bottom: -35px; object-position: 61% top; }
}

/* ---------------------------------------------------------------- 1024 to 1199 px
   lg is 1024 in styles.css (decision 3), a band Ali never designed (her desktop
   started at 1200): the 672 px stage overflowed the cream card and the 72 px h1
   overflowed the 48% hero column. Stage scaled to 500 px (its layers are
   percentage-based); h1 at 56 px like the tablet band (64 px until the tablet
   decision); nav, column and panel rhythm tightened so the hero stays inside
   about 900 px on a 1024 x 1366 iPad. Rare Days may prefer other values. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .stage { width: 500px; }
  .hero-h1 { font-size: 56px; }
  .hero-nav { padding-bottom: 24px; }
  .hero-column { padding-top: 48px; padding-bottom: 96px; }
  .cd-panel { margin-top: 32px; }
}

/* ---------------------------------------------------------------- hero fold (decision 4)
   Short desktop viewports: tighter rhythm so the hero CTA sits inside about
   700 px. Taller screens keep Ali's spacing. */
@media (min-width: 1024px) and (max-height: 900px) {
  .hero-nav { padding-top: 24px; padding-bottom: 16px; }
  .hero-column { padding-top: 32px; padding-bottom: 80px; }
  .hero-h1 { font-size: 56px; }
  .cd-panel { margin-top: 24px; padding: 16px; gap: 16px; }
  .cd-panel .cd-cells { margin-top: 16px; }
  .cd-cell { padding-top: 12px; padding-bottom: 12px; }
}

/* ---------------------------------------------------------------- sticky FAQ/footer height gate
   The sticky reveal needs room: below 1150 px tall it clipped "Any questions?"
   and hid focused FAQ buttons (CP-18). Shorter viewports get a static footer. */
@media (max-height: 1149.98px) {
  .faq-footer { position: static; }
}

/* ---------------------------------------------------------------- small screens */
/* under 360: smaller countdown cells and gap; the h1 keeps 16 px of side room */
@media (max-width: 359.98px) {
  .cd-cells { gap: 2px; }
  .cd-cell { padding-inline: 6px; }
  .hero-h1 { font-size: min(48px, calc((100vw - 32px) * 0.156)); }
}
/* under 400: the config-rendered deadline line ("Ends Monday, Oct 12 at 11:59 PM CT", 321 px at 20 px bold)
   fits on one line inside the panel (viewport minus 2 x 20 px gutter minus 2 x 20 px panel padding):
   18 px at 375 and 390, 17 px at 360. At 320 it wraps once; the no-break space in site.js keeps the time
   and the zone together, so the break lands before "11:59". Re-check if the deadline string changes. */
@media (max-width: 399.98px) {
  .cd-panel [data-deadline-text] { font-size: 18px; }
}
@media (max-width: 369.98px) {
  .cd-panel [data-deadline-text] { font-size: 17px; }
}
/* under 360: one testimonial card fits inside the gutters (the 320 px card was clipped at 320 px wide) */
@media (max-width: 359.98px) {
  .t-card { width: calc(100vw - 2 * var(--gutter)); }
}
/* under 340: countdown 2 x 2 */
@media (max-width: 339.98px) {
  .cd-cells { flex-wrap: wrap; gap: 4px; }
  .cd-cell { flex: 1 1 calc(50% - 4px); }
}
/* under 420: the price rows wrap instead of overflowing the card (320 px overflow in T1;
   380 to 416 px overflow once "one-time purchase" sat beside the price, V7-1) */
@media (max-width: 419.98px) {
  .price-row { flex-wrap: wrap; }
  .price-row > a { width: 100%; }
}

/* ---------------------------------------------------------------- cohort page extras */
.vsl {
  position: relative;
  width: 100%;
  max-width: 1000px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(246, 245, 240, 0.1);
  background: rgba(27, 27, 27, 0.6);
}
.vsl iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vsl-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sage);
  font-weight: 600;
}
.vsl iframe + .vsl-label { display: none; }
/* tablet band: at the full content width (672 to 927 px) the 16:9 box pushed the countdown
   CTA to the fold on an 834 x 1194 iPad; capped so the CTA stays inside the first screen */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .vsl { max-width: 560px; }
  [data-page="cohort"] .cd-panel { margin-top: 32px; }
}
/* the box clips its children (iframe), so its draft label sits inside the frame */
.is-draft .vsl::after { left: 8px; top: 8px; }
.cohort-list { width: 100%; max-width: 640px; text-align: left; }
.cohort-copy { max-width: 56ch; }

/* ---------------------------------------------------------------- 2026-10-04 build
   Hero kicker (product name moves above the outcome headline) and the work and
   home section. The price cards have their own block below. */
.hero-h1 { max-width: 20ch; } /* "Become an effective communicator." breaks as two lines (2026-10-08) */
.hero-kicker { margin: 0 0 16px; font: 600 15px/1.4 var(--font-sans); color: var(--yellow); }
.hero-kicker span { white-space: nowrap; }

.convo { padding-block: 64px 72px; }
.convo-wrap { max-width: calc(var(--content-max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.convo-head { display: grid; gap: 14px; max-width: 760px; }
.convo-eyebrow { margin: 0; font: 600 13px/1.4 var(--font-sans); color: var(--green-mid); }
.convo-title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 40px; line-height: 1.03; letter-spacing: -0.01em; color: var(--green); text-wrap: balance; }
.convo-lede { margin: 0; max-width: 52ch; font-family: var(--font-sans); font-weight: 500; font-size: var(--t-body-lg); line-height: 1.4; color: var(--text-sage); }
.convo-grid { display: grid; gap: 20px; margin-top: 40px; }
.convo-card { display: grid; align-content: start; gap: 24px; min-width: 0; padding: 28px; background: #fff; border: 1px solid rgb(27 27 27 / 0.12); border-radius: 24px; }
.convo-card-title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 32px; line-height: 1.05; letter-spacing: -0.01em; color: var(--green); }
.convo-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.convo-list li { display: grid; grid-template-columns: 14px 1fr; gap: 12px; font-family: var(--font-sans); font-weight: 600; font-size: var(--t-body); line-height: 1.4; color: var(--ink); }
.convo-list li::before { content: ""; width: 8px; height: 8px; margin-top: 0.55em; border-radius: 50%; background: var(--green-mid); }
.convo-quotes { display: grid; gap: 20px; padding-top: 24px; border-top: 1px solid rgb(27 27 27 / 0.12); }
.convo-quote { display: grid; gap: 8px; margin: 0; }
.convo-quote blockquote { margin: 0; font-family: var(--font-sans); font-weight: 500; font-size: var(--t-body); line-height: 1.45; color: var(--green); }
.convo-quote figcaption { font: 600 14px/1.35 var(--font-sans); color: var(--green); }
.convo-quote figcaption span { display: block; font-weight: 500; color: var(--text-sage); }
@media (min-width: 768px) {
  .convo { padding-block: 120px 128px; }
  .convo-title { font-size: 48px; }
  .convo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
}
@media (min-width: 1024px) {
  .convo-title { font-size: 56px; }
  .convo-card { padding: 40px; }
}

/* ---------------------------------------------------------------- price cards (Grant 2026-10-04, option 2)
   White cards on the green offer band replace the export's dark glass, whose edge measured 1.2:1
   against the band. Pale yellow marks what ends Monday: the launch bonuses box, the deadline lines
   and the Coaching strip. Focus rings turn navy inside the cards (the band's yellow ring vanishes
   on white). The strip bleeds to the card edge, so its margins mirror the card's p-8 / md:p-10. */
.price-card { --focus: var(--navy); overflow: hidden; background: #fff; color: var(--green); }
.price-chip { background: var(--sage); color: var(--green); }
.price-box { background: var(--offwhite); border: 1px solid rgb(27 27 27 / 0.08); }
.price-box--launch { background: var(--yellow-tint); }
.price-strip { margin: -32px -32px 24px; padding: 12px 32px; background: var(--yellow); color: var(--ink); font: 700 14px/1.3 var(--font-sans); }
.btn-green { background: var(--green); color: var(--offwhite); }
.card-quote { display: grid; gap: 8px; margin: 24px 0 0; padding: 20px 22px; border: 1px solid rgb(27 27 27 / 0.08); border-radius: 16px; background: var(--offwhite); }
.card-quote blockquote { margin: 0; font: 500 15px/1.45 var(--font-sans); color: var(--green); }
.card-quote figcaption { font: 600 13px/1.35 var(--font-sans); color: var(--green); }
.card-quote figcaption span { font-weight: 500; color: var(--text-sage); }
.card-deadline { margin: 14px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--yellow-tint); font: 600 13px/1.4 var(--font-sans); color: var(--ink); }
@media (min-width: 768px) {
  .price-strip { margin: -40px -40px 28px; padding-inline: 40px; }
}
@media (min-width: 1024px) and (hover: hover) {
  .btn-green:hover { background: #093e2b; }
}

/* ---------------------------------------------------------------- join bar (Grant 2026-10-04, dock option A)
   A floating dock with the hero's countdown in miniature (bar pattern from coreyganim.com). site.js shows it
   once the hero is out of view and hides it over the price cards and near the footer; never shown without JS.
   Phones show days, hours and minutes; on the last day (html.is-last-day) the days box drops out and the
   seconds show everywhere. */
.join-bar {
  --focus: var(--yellow);
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  width: min(780px, calc(100% - 24px));
  margin-inline: auto;
  padding: 10px;
  border: 1px solid rgb(246 245 240 / 0.14);
  border-radius: 22px;
  background: rgb(12 78 54 / 0.94);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 18px 44px rgb(0 0 0 / 0.28), 0 2px 8px rgb(0 0 0 / 0.14);
  color: var(--offwhite);
  transform: translateY(calc(100% + 40px));
  visibility: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.4s;
}
.join-bar.is-shown { transform: none; visibility: visible; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.join-bar-inner { position: relative; display: flex; align-items: center; gap: 14px; }
.join-bar-info { flex: 1; min-width: 0; padding-left: 8px; }
.join-bar-kicker { margin: 0 0 6px; font: 600 12px/1.2 var(--font-sans); color: var(--sage); }
.join-bar-kicker-last, .is-last-day .join-bar-kicker-days { display: none; }
.is-last-day .join-bar-kicker-last { display: inline; }
.join-bar-cd { display: flex; gap: 6px; }
.join-bar-cell { display: grid; justify-items: center; min-width: 52px; padding: 6px 6px 5px; border: 1px solid rgb(246 245 240 / 0.1); border-radius: 12px; background: rgb(27 27 27 / 0.28); }
.join-bar-cell b { font: 700 24px/1 var(--font-serif); letter-spacing: -0.04em; color: var(--offwhite); font-variant-numeric: tabular-nums; }
.join-bar-cell i { margin-top: 3px; font: 600 10px/1.2 var(--font-sans); font-style: normal; color: rgb(225 236 216 / 0.7); }
.is-last-day .join-bar-days { display: none; }
.join-bar-title { flex: 1; min-width: 0; margin: 0; padding-left: 10px; font: 600 16px/1.3 var(--font-sans); color: var(--offwhite); }
.join-bar-btn { flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; margin-left: auto; padding: 0 10px 0 20px; border-radius: 14px; background: var(--yellow); color: var(--ink); font: 700 16px/1 var(--font-sans); text-decoration: none; box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.08); transition: background-color 0.15s ease; }
.join-bar-arrow { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgb(27 27 27 / 0.9); color: var(--yellow); transition: transform 0.15s ease; }
.join-bar-close { position: absolute; top: -22px; right: -20px; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgb(246 245 240 / 0.25); border-radius: 50%; background: var(--ink); color: var(--offwhite); font: 400 16px/1 var(--font-sans); box-shadow: 0 4px 10px rgb(0 0 0 / 0.25); cursor: pointer; }
html.has-join-bar { scroll-padding-bottom: 120px; }
@media (max-width: 767.98px) {
  .join-bar { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: calc(100% - 20px); padding: 8px; border-radius: 20px; }
  .join-bar-inner { gap: 10px; }
  .join-bar-info { padding-left: 4px; }
  .join-bar-kicker { display: none; }
  .join-bar-cd { gap: 4px; }
  .join-bar-cell { min-width: 42px; padding: 5px 4px 4px; }
  .join-bar-cell b { font-size: 20px; }
  .join-bar-secs { display: none; }
  .is-last-day .join-bar-secs { display: grid; }
  .join-bar-btn { min-height: 48px; gap: 8px; padding: 0 8px 0 14px; font-size: 15px; }
  .join-bar-arrow { width: 28px; height: 28px; }
  .join-bar-close { top: -16px; right: -6px; width: 24px; height: 24px; }
}
@media (min-width: 1024px) and (hover: hover) {
  .join-bar-btn:hover { background: #e8b800; }
  .join-bar-btn:hover .join-bar-arrow { transform: translateX(2px); }
  .join-bar-close:hover { background: #333; }
}
@media (prefers-reduced-motion: reduce) {
  .join-bar, .join-bar.is-shown, .join-bar-arrow { transition: none; }
}

/* ---------------------------------------------------------------- mobile hero (Grant 2026-10-08, option D)
   Under 768px the photo band is gone: a round portrait sits above the kicker, the subhead keeps its first
   sentence only, and the countdown panel tightens, so the button lands on the first screen of a phone. */
.hero-portrait { width: 132px; height: 132px; margin: 4px auto 20px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--yellow); }
@media (max-width: 767.98px) {
  .hero-sub-more { display: none; }
  .hero-column { padding-top: 0; }
  .cd-panel { margin-top: 28px; padding: 16px; gap: 16px; }
  .cd-panel .cd-cells { margin-top: 16px; }
  .cd-cell { padding-top: 12px; padding-bottom: 12px; }
}

/* bonus delivery note inside the price boxes (Grant 2026-10-08, decision A: bonuses go out by email on Tue Oct 13) */
.price-note { margin: 14px 0 0; font: 500 13px/1.4 var(--font-sans); color: var(--text-sage); }
.price-box--launch + .card-quote, ul.price-box + .price-note { margin-top: 12px; }

/* join bar: price on the button from 768 up (Grant 2026-10-09, option A: the bar goes straight to checkout) */
.join-bar-price { display: none; }
@media (min-width: 768px) { .join-bar-price { display: inline; } }

/* ---------------------------------------------------------------- launch mode: both offers in the hero (Grant 2026-10-09)
   Two buttons under the countdown, each straight to checkout: Academy yellow, Coaching cream. Just the verb,
   the price and an arrow inside each; one line of what's included under each button (Grant: subtext under,
   never inside). A solid bottom edge and the arrow circle make them read as pressable. Launch-only, so the
   closed state reverts to the single button. Phones while open: the subhead hides and the portrait and
   countdown tighten so both buttons land on the first screen. The offer section sits right under the hero. */
.pick { display: grid; gap: 6px; margin-top: 4px; text-align: left; }
.pick > a { display: grid; grid-template-columns: 1fr auto auto; align-items: center; column-gap: 14px; margin-top: 8px; padding: 15px 14px 15px 20px; border-radius: 16px; text-decoration: none; box-shadow: 0 5px 0 rgb(0 0 0 / 0.28); transition: transform 0.12s ease, box-shadow 0.12s ease; }
.pick > a:active { transform: translateY(3px); box-shadow: 0 2px 0 rgb(0 0 0 / 0.28); }
.pick-academy { background: var(--yellow); color: var(--ink); }
.pick-coaching { background: var(--offwhite); color: var(--green); }
.pick-n { font: 700 21px/1.15 var(--font-sans); }
.pick-p { display: grid; justify-items: end; font: 700 23px/1 var(--font-sans); letter-spacing: -0.01em; white-space: nowrap; }
.pick-p small { margin-top: 4px; font: 600 11px/1.2 var(--font-sans); opacity: 0.7; }
.pick-arrow { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; }
.pick-academy .pick-arrow { background: var(--ink); color: var(--yellow); }
.pick-coaching .pick-arrow { background: var(--green); color: var(--offwhite); }
.pick-sub { margin: 0; padding: 0 4px; font: 500 13px/1.4 var(--font-sans); color: var(--sage); }
.pick-sub b { font-weight: 700; color: var(--offwhite); }
#pricing > div { padding-top: 48px; }
@media (min-width: 768px) { #pricing > div { padding-top: 96px; } }
@media (min-width: 1024px) and (hover: hover) {
  .pick > a:hover { transform: translateY(-1px); box-shadow: 0 6px 0 rgb(0 0 0 / 0.28), 0 12px 24px rgb(0 0 0 / 0.2); }
}
@media (max-width: 767.98px) {
  html.is-open .hero-sub { display: none; }
  html.is-open .hero-portrait { width: 84px; height: 84px; margin-bottom: 10px; }
  html.is-open .hero-nav { padding-top: 20px; padding-bottom: 10px; }
  html.is-open .cd-panel { margin-top: 20px; padding: 14px; gap: 10px; }
  html.is-open .cd-panel .cd-cells { margin-top: 8px; }
  html.is-open .cd-cell { padding: 7px 4px; min-width: 0; }
  html.is-open .cd-cell > span:first-child { font-size: 24px; }
  html.is-open .cd-cell > span:last-child { font-size: 12px; }
  .pick > a { padding: 12px 12px 12px 16px; margin-top: 6px; }
  .pick-n { font-size: 18px; }
  .pick-p { font-size: 20px; }
  .pick-arrow { width: 36px; height: 36px; }
  .pick-sub { font-size: 12.5px; }
}

/* QA sweep 2026-10-09 (15 viewports, both pages) */
#pricing { overflow-x: clip; } /* 1024 to 1199: the Coaching card's slide-in start state (translateX 14%) poked past the right edge and widened the page by 8 to 18 px during the animation */
@media (min-width: 1024px) and (max-height: 900px) { .pick > a { padding-top: 13px; padding-bottom: 13px; } } /* 1366 x 768: the second button sat 1 px under the fold */
@media (max-width: 767.98px) and (max-height: 640px) { html.is-open .hero-portrait { display: none; } } /* 320 x 568 class screens: drop the portrait so the first button and its line fit */