/*
  SBV Season Journals sales page.
  Its own look (Joe, 21 Sep 2026): dark green, mint green and black on a white page, laid out as a
  direct-response sales letter in the style of onecommaclub.com and the Funnel Hacker's Cookbook:
  centered hero with a countdown, the "Why these aren't just notebooks" letter, testimonials on a green band,
  fascination bullets beside real pages, an order box on a dark band with a countdown and the reprint promise,
  the fund with big numbers, FAQ cards, and the signed letter with a P.S. and a share button.
  The words are the club's own (the old page and this page's earlier versions), never One Comma Club copy.
  Tight corners and no soft card shadows or icon tiles (Joe finds those "AI boilerplate"); only product photos cast shadows.
  Type: Inter Black headlines, Inter body, Barlow Condensed labels, Instrument Serif italic for accents.
  Stars and checkers are still the brand marks, never in the same area. Nothing important is a pill.
*/

/* ---------- Page ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 12px; }
body { margin: 0; background: #fff; }

.sbv {
  --black: #0C110F;
  --black-2: #1B2420;
  --black-3: #060908;
  --green: #0B5D3E;
  --green-deep: #064530;
  --mint: #6EE7B7;
  --mint-edge: #2AAE7B;
  --mint-mark: #3CCB94;
  --mint-2: #CDF6E3;
  --mint-ice: #EEFBF5;
  --gray: #F2F5F3;
  --ink: #1B2621;
  --muted: #4A5B53;
  --label: #3D5A4C;
  --line: #DBE7E0;
  --line-strong: #BCD5C8;
  --link: #0B5D3E;
  --cond: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --script: "Instrument Serif", Georgia, "Times New Roman", serif;
  --star-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6l3.1 6.5 7.1.9-5.2 4.9 1.3 7.1L12 17.6l-6.3 3.4 1.3-7.1L1.8 9l7.1-.9z'/%3E%3C/svg%3E");
  --checker-mint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 2' shape-rendering='crispEdges'%3E%3Cpath fill='%233CCB94' d='M0 0h1v1H0zM2 0h1v1H2zM4 0h1v1H4zM1 1h1v1H1zM3 1h1v1H3zM5 1h1v1H5z'/%3E%3C/svg%3E");
  --check-black: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C110F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");

  background: #fff;
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.sbv *, .sbv *::before, .sbv *::after { box-sizing: border-box; }
.sbv [hidden] { display: none !important; }
/* Resets use :where() so they never outweigh the component styles below. */
.sbv :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
.sbv :where(ul, ol) { padding: 0; list-style: none; }
.sbv :where(img) { max-width: 100%; height: auto; display: block; }
.sbv :where(a) { color: var(--link); }
.sbv :where(a:hover) { color: var(--black); }
.sbv :where(strong) { color: var(--black); font-weight: 700; }
.sbv :focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
.sbv .btn--primary:focus-visible { outline-color: var(--black); }
.sbv .on-dark :focus-visible, .sbv .footer :focus-visible, .sbv .offer :focus-visible, .sbv .quotes :focus-visible,
.sbv .stickybar :focus-visible { outline-color: var(--mint); }
.sbv .offer .ocard :focus-visible { outline-color: var(--black); }
.sbv .quotes .btn--primary:focus-visible, .sbv .stickybar .btn--primary:focus-visible { outline-color: #fff; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); }
.wrap--narrow { max-width: 820px; }
.wrap--letter { max-width: 900px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  padding: 12px 16px; background: var(--black); color: #fff; font-weight: 800;
}
.skip:focus { top: 12px; color: #fff; }

/* ---------- Type ---------- */
.h2 {
  color: var(--black); font-size: clamp(30px, 5vw, 46px); line-height: 1.08;
  font-weight: 900; letter-spacing: -.02em; text-wrap: balance;
}
/* Centered headline with one small mint checker mark under it */
.h2--rules { width: 100%; text-align: center; }
.h2--rules::after { content: ""; display: block; width: 36px; height: 12px; margin: 14px auto 0; background: var(--checker-mint) center / 36px 12px no-repeat; }
.sec-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sec-head > p { max-width: 760px; }
.sec-lede { margin-top: 16px; color: var(--label); font-size: 19px; line-height: 1.6; }
.kicker { margin-bottom: 8px; color: var(--green); font-family: var(--cond); font-weight: 800; font-size: 18px; letter-spacing: .1em; text-transform: uppercase; }

.h4 { color: var(--black); font-size: 23px; line-height: 1.25; font-weight: 800; margin-bottom: 14px; }

/* Highlighter in mint */
.hl { background: linear-gradient(transparent 52%, rgba(110, 231, 183, .6) 52%); color: inherit; padding: 0 2px; }

/* The crest star as a marker */
.star-mark {
  display: inline-block; flex: none; width: 15px; height: 15px; margin-right: 8px; vertical-align: -1px;
  background: currentColor; -webkit-mask: var(--star-svg) center / contain no-repeat; mask: var(--star-svg) center / contain no-repeat;
}

/* Pulsing mint dot, only for the first-batch date */
.live-dot { display: inline-block; flex: none; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--mint); vertical-align: 1px; animation: sbv-pulse 1.8s infinite; }
@keyframes sbv-pulse {
  0% { box-shadow: 0 0 0 0 rgba(110, 231, 183, .6); }
  70% { box-shadow: 0 0 0 9px rgba(110, 231, 183, 0); }
  100% { box-shadow: 0 0 0 0 rgba(110, 231, 183, 0); }
}

.caption { margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.45; }
.caption strong { color: var(--black); }

/* ---------- Buttons ---------- */
.btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 100%; padding: 12px 18px; border-radius: 5px; text-align: center; text-decoration: none; line-height: 1.15;
  transition: background-color .12s, box-shadow .12s, transform .12s;
}
.btn__main { font-weight: 900; text-transform: uppercase; letter-spacing: .01em; text-wrap: balance; }
.btn__sub { font-size: 14px; font-weight: 600; line-height: 1.3; }
.btn__arrow { display: inline-block; margin-left: 4px; transition: transform .12s; }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* Mint with black words: the brightest thing on the page */
.btn--primary { background: var(--mint); color: var(--black); box-shadow: inset 0 -5px 0 var(--mint-edge); padding-bottom: 16px; }
.btn--primary .btn__sub { color: var(--green-deep); }
.btn--primary:hover { background: #8CF0C8; color: var(--black); }
.btn--primary:active { transform: translateY(1px); }
.btn--dark { background: var(--black); color: #fff; box-shadow: inset 0 -5px 0 var(--black-2); padding-bottom: 16px; }
.btn--dark .btn__sub { color: var(--mint); }
.btn--dark:hover { background: var(--black-2); color: #fff; }

.btn--md { min-height: 64px; }
.btn--md .btn__main { font-size: 17px; }
.btn--lg { min-height: 76px; }
.btn--lg .btn__main { font-size: 19px; }

/* Two buy buttons, one per book: side by side when there's room */
.buyrow { display: grid; gap: 12px; }
@media (min-width: 600px) { .buyrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.buyrow--stack { grid-template-columns: 1fr !important; }
.buyrow--center { max-width: 760px; margin-left: auto; margin-right: auto; }
.buyzone { margin-top: clamp(34px, 5vw, 50px); }
.buyzone__note { margin-top: 14px; text-align: center; }

/* The first-batch line (the one real date on the page) */
.soon { display: flex; align-items: flex-start; color: var(--green); font-size: 16px; font-weight: 800; line-height: 1.4; }
.soon .star-mark { margin-top: 2px; color: var(--mint-mark); }
.buyzone__note .soon { justify-content: center; }
.after { color: var(--black); font-size: 16px; font-weight: 700; line-height: 1.4; }

/* ---------- First-batch bar ---------- */
.topbar { background: var(--green-deep); color: #fff; font-size: 16px; line-height: 1.45; text-align: center; }
.topbar__inner { padding-top: 10px; padding-bottom: 10px; }
.topbar strong { color: #fff; }
.topbar a { display: inline-block; padding: 11px 2px; margin: -11px 0; color: var(--mint); font-weight: 800; }
.topbar a:hover { color: #fff; }
@media (max-width: 599px) { .topbar__extra { display: none; } .topbar { font-size: 15px; } }

/* ---------- Header ---------- */
.masthead { background: var(--black); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 12px; min-height: 44px; color: #fff; text-decoration: none; }
.brand:hover { color: #fff; }
.brand img { width: 42px; height: auto; }
.brand__name { display: flex; flex-direction: column; font-family: var(--cond); font-weight: 800; font-size: 21px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.brand__since { margin-top: 3px; color: var(--mint); font-size: 14px; letter-spacing: .14em; }
.masthead__call { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: #fff; font-weight: 800; font-size: 16px; text-decoration: none; white-space: nowrap; }
.masthead__call:hover { color: #fff; text-decoration: underline; }
.masthead__callLabel { color: var(--mint); font-weight: 500; }
@media (max-width: 520px) {
  .masthead__callLabel { display: none; }
  .masthead__inner { min-height: 60px; }
  .brand { gap: 9px; }
  .brand img { width: 34px; }
  .brand__name { font-size: 17px; white-space: nowrap; }
  .brand__since { font-size: 12px; }
  .masthead__call { font-size: 15px; }
}

/* ---------- Hero ---------- */
/* Centered pre-headline and headline; below it the countdown and buttons beside the real book.
   Phones: headline, countdown, buttons, then the book. */
.hero { background: #fff; border-bottom: 1px solid var(--line); }
.hero__inner { display: flex; flex-direction: column; align-items: center; padding-top: clamp(26px, 4.4vw, 60px); padding-bottom: clamp(36px, 5vw, 64px); text-align: center; }
.pre { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--green); font-family: var(--cond); font-weight: 800; font-size: clamp(15px, 1.8vw, 19px); letter-spacing: .1em; text-transform: uppercase; line-height: 1.25; }
.pre .star-mark { margin: 0; color: var(--mint-mark); }
.hero__title { max-width: 900px; margin: 14px 0 16px; color: var(--black); font-size: clamp(34px, 4.6vw, 56px); line-height: 1.04; font-weight: 900; letter-spacing: -.03em; text-wrap: balance; }
.hero__title em { color: var(--green); font-family: var(--script); font-style: italic; font-weight: 400; font-size: 1.14em; letter-spacing: -.01em; }
.hero__sub { max-width: 700px; color: var(--ink); font-size: clamp(17px, 1.9vw, 20px); line-height: 1.55; }
.gains { display: grid; gap: 14px; width: 100%; max-width: 980px; margin-top: clamp(22px, 3vw, 30px); text-align: left; }
@media (min-width: 760px) { .gains { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
.gains__col { padding: 16px 18px 18px; border: 2px solid var(--line-strong); border-top: 6px solid var(--green); border-radius: 4px; background: #fff; }
.gains__head { margin-bottom: 10px; color: var(--green); font-family: var(--cond); font-weight: 800; font-size: 20px; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; }
.gains .fb li { margin-bottom: 10px; font-size: 16px; line-height: 1.5; }
@media (max-width: 599px) {
  .gains__col { padding: 14px 14px 16px; }
  .gains__head { margin-bottom: 8px; font-size: 19px; }
  .gains .fb li { margin-bottom: 8px; padding-left: 30px; font-size: 15.5px; line-height: 1.45; }
  .gains .fb li::before { width: 20px; height: 20px; background-size: 14px; }
}
.hero__grid { display: grid; gap: 34px; width: 100%; margin-top: clamp(28px, 4vw, 46px); text-align: left; }
.hero__panel { display: flex; flex-direction: column; gap: 14px; }
.count { border-radius: 4px; background: var(--black); padding: 14px 12px; }
.fundline { color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.45; }
.hero__see { display: flex; flex-direction: column; align-items: flex-start; font-size: 16px; }
.hero__see a { display: inline-block; padding: 10px 0; font-weight: 700; }
@media (min-width: 600px) { .hero__see { flex-direction: row; flex-wrap: wrap; gap: 0 24px; } }
.hero__photo { width: min(100%, 400px); margin: 0 auto; }
.hero__photo img { border-radius: 6px; box-shadow: 0 22px 44px rgba(12, 17, 15, .24); }
.hero__photo .caption { margin-top: 16px; text-align: center; }
@media (min-width: 900px) {
  .hero__inner { padding-top: clamp(22px, 2.4vw, 32px); }
  .hero__title { margin-bottom: 12px; }
  .hero__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; max-width: 1000px; margin-top: 22px; }
  .count { padding: 10px 12px; }
  .hero__panel .buyrow { order: -1; }
  .hero__photo { order: -1; width: min(100%, 340px); }
  .hero__photo img { transform: rotate(-2deg); }
}
@media (max-width: 599px) {
  .hero__title { margin: 12px 0 14px; font-size: 32px; }
  .hero__sub { font-size: 17px; }
  .hero__photo { width: min(100%, 320px); }
}

/* ---------- The journals at a glance ---------- */
.badges { background: var(--mint-ice); border-bottom: 1px solid var(--line); }
.badges__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; padding-top: 20px; padding-bottom: 20px; }
@media (min-width: 820px) { .badges__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.badges__list li { position: relative; padding-left: 32px; }
.badges__list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 3px; background: var(--mint) var(--check-black) center / 15px no-repeat; }
.badges__list span { display: block; color: var(--ink); font-size: 14px; line-height: 1.35; }
.badges__list strong { display: block; color: var(--black); font-family: var(--cond); font-weight: 800; font-size: 21px; line-height: 1.1; text-transform: uppercase; }

/* ---------- Sections ---------- */
.sec { padding: clamp(52px, 7vw, 92px) 0; background: #fff; }
.sec--mint { background: var(--mint-ice); }
.sec--gray { background: var(--gray); }

/* ---------- The letter ---------- */
.lcard { margin-top: clamp(28px, 4vw, 42px); padding: clamp(22px, 4.5vw, 48px); border: 2px solid var(--line-strong); border-top: 7px solid var(--black); border-radius: 4px; background: #fff; }
.lcard::after { content: ""; display: block; clear: both; }
.lcard p { font-size: 19px; line-height: 1.7; }
.lcard p + p { margin-top: 18px; }
.lcard__sub { margin-top: 30px !important; color: var(--black); font-size: clamp(21px, 2.4vw, 25px) !important; font-weight: 900; line-height: 1.25 !important; letter-spacing: -.01em; }
.lcard__sub + p { margin-top: 10px; }
.lcard em { color: var(--green-deep); font-style: normal; font-weight: 700; }
.lcard__label { margin-top: 26px !important; color: var(--green); font-family: var(--cond); font-weight: 800; font-size: 20px !important; letter-spacing: .06em; text-transform: uppercase; }
.steps { display: flex; flex-direction: column; gap: 16px; margin: 14px 0 22px; }
.steps li { display: flex; gap: 14px; align-items: flex-start; }
.steps p { padding-top: 9px; font-size: 18px !important; line-height: 1.5 !important; }
.lcard .steps + p { margin-top: 0; }
.float { width: min(100%, 230px); margin: 0 auto 22px; }
.float img { border-radius: 5px; box-shadow: 0 12px 26px rgba(12, 17, 15, .18); }
@media (min-width: 700px) { .float { float: right; margin: 6px 0 16px 30px; } .float img { transform: rotate(2deg); } }

/* ---------- Who it's for ---------- */
.roles { display: grid; gap: 20px; margin-top: clamp(30px, 4vw, 44px); }
@media (min-width: 900px) { .roles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.role { display: flex; flex-direction: column; gap: 12px; padding: 24px 22px; border: 2px solid var(--line-strong); border-top: 7px solid var(--green); border-radius: 4px; background: #fff; }
.role__who { color: var(--green); font-family: var(--cond); font-weight: 800; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; }
.role__title { color: var(--black); font-size: 24px; line-height: 1.2; font-weight: 900; letter-spacing: -.01em; text-wrap: balance; }
.role p { font-size: 17px; line-height: 1.6; }

/* ---------- The season, card by card ---------- */
.season { display: flex; flex-direction: column; gap: 22px; margin-top: clamp(30px, 4vw, 46px); }
.tcard { display: grid; gap: 20px; padding: 20px; border: 2px solid var(--line-strong); border-left: 7px solid var(--green); border-radius: 4px; background: #fff; }
@media (min-width: 800px) {
  .tcard { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 34px; padding: 28px 30px; align-items: center; }
  .tcard:nth-child(even) { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
  .tcard:nth-child(even) .tcard__photo { order: -1; }
}
.tcard__when { color: var(--green); font-family: var(--cond); font-weight: 800; font-size: 17px; letter-spacing: .08em; text-transform: uppercase; }
.tcard__title { margin: 2px 0 14px; color: var(--black); font-size: clamp(25px, 3vw, 32px); line-height: 1.12; font-weight: 900; letter-spacing: -.02em; }

/* Fascination bullets (the Cookbook's bullet list): bold lead, then the curiosity, then the page number */
.fb li { position: relative; margin-bottom: 14px; padding-left: 34px; color: var(--ink); font-size: 17px; line-height: 1.55; }
.fb li:last-child { margin-bottom: 0; }
.fb li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 3px; background: var(--mint) var(--check-black) center / 15px no-repeat; }
.fb strong { color: var(--black); }
.pg { color: var(--green); font-size: 15px; font-weight: 700; white-space: nowrap; }

/* An edition's name and lead, above its pages */
.edition { max-width: 820px; margin: clamp(30px, 4vw, 44px) auto 0; text-align: center; }
.sec > .wrap > .edition:first-child { margin-top: 0; }
.edition .kicker { margin-bottom: 4px; }
.edition__name { color: var(--black); font-size: clamp(32px, 5vw, 50px); line-height: 1.04; font-weight: 900; letter-spacing: -.02em; }
.edition__lead { margin-top: 14px; color: var(--ink); font-size: clamp(18px, 2vw, 20px); line-height: 1.6; }
.edition__cta { display: flex; flex-direction: column; gap: 12px; max-width: 460px; margin: clamp(26px, 4vw, 36px) auto 0; text-align: center; }
.coach__side .edition__cta { margin: 0; max-width: none; }
.edition__also { color: var(--muted); font-size: 16px; line-height: 1.45; }
.edition__also a { display: inline-block; padding: 11px 0; margin: -11px 0; font-weight: 700; }
.tcard__photo { width: min(100%, 340px); margin: 0 auto; }
.tcard__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 5px; border-bottom: 5px solid var(--black); background: var(--gray); }
.tcard__photo .caption { text-align: center; }

/* The whole book, page by page (opens on tap) */
.pages { margin-top: 22px; border: 2px solid var(--line-strong); border-radius: 4px; background: #fff; }
.pages summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 66px; padding: 14px 20px; cursor: pointer; list-style: none; color: var(--black); font-size: 19px; font-weight: 800; line-height: 1.3; }
.pages summary::-webkit-details-marker { display: none; }
.pages summary:hover { color: var(--link); }
.pages__body { display: grid; gap: 22px; padding: 4px 20px 22px; }
@media (min-width: 800px) { .pages__body { grid-template-columns: 260px minmax(0, 1fr); align-items: start; } }
.pages__body figure img { border-radius: 5px; border-bottom: 5px solid var(--black); }

/* Tables: dark green header bar, light mint alternating rows */
.table__head {
  margin: 0; padding: 11px 16px 9px; border-radius: 5px 5px 0 0; background: var(--green); color: #fff;
  font-family: var(--cond); font-weight: 800; font-size: 24px; line-height: 1.1; letter-spacing: .06em; text-transform: uppercase;
}
.table dl { display: flex; flex-direction: column; overflow: hidden; border: 2px solid var(--line-strong); border-top: 0; border-radius: 0 0 5px 5px; background: #fff; }
.table dl > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 4px 16px; padding: 12px 16px; }
.table dl > div:nth-child(even) { background: var(--mint-ice); }
.table dt { padding-top: 1px; color: var(--black); font-family: var(--cond); font-weight: 800; font-size: 21px; line-height: 1.2; letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table dd { color: var(--ink); font-size: 17px; line-height: 1.5; }
.table dd strong { display: block; }
.table--nums dt { font-size: 30px; line-height: 1; }
.table--nums dd { align-self: center; color: var(--black); font-weight: 700; }
@media (max-width: 479px) { .table dl > div { grid-template-columns: 74px minmax(0, 1fr); gap: 4px 12px; } .table dt { font-size: 19px; } }

/* ---------- The quotes, on a dark green band ---------- */
.quotes { padding: clamp(56px, 8vw, 96px) 0; background: var(--green); }
.quotes__title { color: #fff; }
.quotes__grid { display: grid; gap: 18px; margin-top: clamp(30px, 4vw, 44px); }
@media (min-width: 900px) { .quotes__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: stretch; } }
.qcard { position: relative; display: flex; flex-direction: column; padding: 34px 24px 22px; border-radius: 4px; background: #fff; }
.qcard::before { content: "“"; position: absolute; top: -14px; left: 16px; color: var(--mint-mark); font-family: var(--script); font-size: 96px; line-height: 1; }
.qcard blockquote p { color: var(--black); font-size: 18px; line-height: 1.55; font-weight: 600; }
.qcard--lead blockquote p { font-size: 21px; font-weight: 700; line-height: 1.45; }
.qcard figcaption { margin-top: auto; padding-top: 18px; color: var(--label); font-size: 15px; line-height: 1.4; }
.qcard figcaption strong { display: block; color: var(--black); font-family: var(--cond); font-size: 19px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }

/* ---------- The Coach's Planner ---------- */
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; align-items: start; margin-top: clamp(30px, 4vw, 44px); }
@media (min-width: 700px) { .shots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 18px; } }
.shots figure { display: flex; flex-direction: column; min-width: 0; }
.shots img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 5px; border-bottom: 5px solid var(--black); background: var(--gray); }
.shots .caption { font-size: 14px; }
.coach__grid { display: grid; gap: 30px; margin-top: clamp(34px, 5vw, 52px); }
@media (min-width: 900px) { .coach__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 52px; align-items: start; } }
.coach__side { display: flex; flex-direction: column; gap: 22px; }
.dots li { position: relative; margin-bottom: 12px; padding-left: 28px; font-size: 17px; line-height: 1.55; }
.dots li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; background: var(--green);
  -webkit-mask: var(--star-svg) center / contain no-repeat; mask: var(--star-svg) center / contain no-repeat;
}
.note { padding: 16px 18px; border-radius: 4px; background: var(--mint-2); color: var(--black); font-size: 18px; line-height: 1.55; }

/* ---------- The offer, on a black band ---------- */
.offer { padding: clamp(56px, 8vw, 100px) 0; background: var(--black); color: #E4F2EA; border-bottom: 10px solid var(--mint); }
.offer__title { color: #fff; }
.offer__count { max-width: 460px; margin: 22px auto 0; }
.offer__after { margin-top: 18px; color: #fff; text-align: center; }
.offer__call { margin-top: 22px; color: #CFE3D8; font-size: 17px; text-align: center; }
.offer__call a { display: inline-block; padding: 11px 0; margin: -11px 0; color: #fff; font-weight: 800; }
.offer__grid { display: grid; gap: 22px; max-width: 1000px; margin: clamp(30px, 4vw, 44px) auto 0; }
@media (min-width: 800px) { .offer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } }
.ocard { display: flex; flex-direction: column; gap: 14px; padding: 26px 22px 24px; border-top: 8px solid var(--mint); border-radius: 4px; background: #fff; color: var(--ink); }
.ocard__for { color: var(--green); font-family: var(--cond); font-weight: 800; font-size: 17px; letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.ocard__name { margin-top: -8px; color: var(--black); font-size: clamp(28px, 3.2vw, 36px); line-height: 1.05; font-weight: 900; letter-spacing: -.02em; text-align: center; }
.ocard__img { width: min(100%, 230px); margin: 4px auto 6px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 5px; box-shadow: 0 14px 28px rgba(12, 17, 15, .22); }
.ocard__list li { position: relative; margin-bottom: 10px; padding-left: 32px; font-size: 16px; line-height: 1.45; }
.ocard__list li::before { content: ""; position: absolute; left: 0; top: 1px; width: 21px; height: 21px; border-radius: 4px; background: var(--mint) var(--check-black) center / 14px no-repeat; }
.ocard__price { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.ocard__amount { color: var(--black); font-family: var(--cond); font-weight: 800; font-size: 58px; line-height: .95; }
.ocard__note { color: var(--muted); font-size: 16px; font-weight: 600; }
.ocard .btn--lg .btn__main { font-size: 17px; }
.offer__notes { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 28px; text-align: center; }
.offer .soon { justify-content: center; color: #fff; }
.offer .soon .star-mark { color: var(--mint); }
.offer .after { color: #fff; }
.offer__fund { color: var(--mint); font-size: 18px; font-weight: 800; line-height: 1.4; }
.offer__more { color: #CFE3D8; font-size: 16px; }

/* The two books near the top, on white (white boxes on white get a 2px border) */
.books .ocard { border: 2px solid var(--line-strong); border-top: 8px solid var(--green); }
.ocard__lead { margin-top: -4px; color: var(--ink); font-size: 16px; line-height: 1.55; text-align: center; }
.ocard__more { align-self: center; display: inline-block; padding: 8px 0; font-size: 16px; font-weight: 700; }
.books .buyzone__note { margin-top: 22px; }
@media (max-width: 599px) { .ocard { padding: 24px 16px 22px; } .ocard .btn { padding-left: 12px; padding-right: 12px; } .ocard .btn--lg .btn__main { font-size: 16px; } }

/* The main order box: the steps on the black band, then the buttons */
.offer .hsteps li { border-color: rgba(110, 231, 183, .35); background: rgba(255, 255, 255, .05); }
.offer .hsteps p { color: #E4F2EA; }
.offer .hsteps strong { color: #fff; }
.offer .steps__num { background: var(--mint); color: var(--black); }
.offer__buy { max-width: 760px; margin: 22px auto 0; }
.offer__buy .btn--lg .btn__main { font-size: 17px; }
.promise { display: flex; align-items: flex-start; gap: 16px; max-width: 760px; margin: 30px auto 0; padding: 20px 22px; border: 2px dashed rgba(110, 231, 183, .6); border-radius: 4px; background: rgba(255, 255, 255, .04); }
.promise svg { flex: none; width: 46px; height: 46px; color: var(--mint); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.promise__title { margin-bottom: 4px; color: #fff; font-family: var(--cond); font-weight: 800; font-size: 22px; line-height: 1.15; letter-spacing: .06em; text-transform: uppercase; }
.promise p:not(.promise__title) { color: #E4F2EA; font-size: 17px; line-height: 1.55; }
.promise a { color: var(--mint); font-weight: 700; }
.promise a:hover { color: #fff; }

/* ---------- The break under the main order box: the pitch is over, the rest is for anyone still deciding ---------- */
.divide { padding: clamp(44px, 6vw, 72px) 0 clamp(40px, 5vw, 60px); background: #fff; text-align: center; }
.divide .sec-lede { max-width: 640px; margin-left: auto; margin-right: auto; }
.divide__links { display: grid; gap: 10px; max-width: 900px; margin: 26px auto 0; }
@media (min-width: 700px) { .divide__links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .divide__links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.divide__links a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 10px 14px; border: 2px solid var(--black); border-radius: 5px; background: #fff; color: var(--black); font-size: 16px; font-weight: 800; line-height: 1.25; text-decoration: none; }
.divide__links a:hover { background: var(--mint-ice); }

/* ---------- The scholarship fund ---------- */
.fund p { font-size: 19px; line-height: 1.65; text-align: center; }
.fund__big { max-width: 760px; margin: 22px auto 16px; color: var(--black); font-size: clamp(23px, 3vw, 30px) !important; line-height: 1.3 !important; font-weight: 900; letter-spacing: -.01em; text-wrap: balance; }
.stats { display: grid; gap: 12px; margin: 30px 0; }
@media (min-width: 600px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stats li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 20px 14px; border-radius: 4px; background: var(--green); text-align: center; }
.stats__big { color: var(--mint); font-family: var(--cond); font-weight: 800; font-size: clamp(42px, 6vw, 60px); line-height: 1; }
.stats li:last-child .stats__big { font-size: clamp(34px, 4.6vw, 46px); }
.stats__small { color: #fff; font-size: 15px; line-height: 1.35; }

/* ---------- Here's what to do next ---------- */
.hsteps { display: grid; gap: 14px; max-width: 1080px; margin: clamp(26px, 4vw, 38px) auto 0; }
@media (min-width: 900px) { .hsteps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
.hsteps li { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 2px solid var(--line-strong); border-radius: 4px; background: #fff; }
@media (min-width: 900px) { .hsteps li { flex-direction: column; } }
.steps__num {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--black); color: var(--mint); font-family: var(--cond); font-size: 28px; font-weight: 800; line-height: 1;
}
.hsteps p { font-size: 16px; line-height: 1.5; }
.call { margin-top: 26px; text-align: center; font-size: 18px; }
.call a { display: inline-block; padding: 11px 0; margin: -11px 0; font-weight: 800; }

/* Countdown to the first batch (always on a black background) */
.timer { padding: 12px 10px; border-radius: 4px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(110, 231, 183, .35); text-align: center; }
.timer__label { display: block; margin-bottom: 8px; color: #fff; font-family: var(--cond); font-weight: 800; font-size: 18px; line-height: 1.2; letter-spacing: .05em; text-transform: uppercase; }
.timer__label::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--mint); vertical-align: 2px; animation: sbv-pulse 1.8s infinite; }
.timer__boxes { display: flex; justify-content: center; gap: 6px; }
html:not(.js) .timer__boxes { display: none; }
.timer__box { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 7px 4px 5px; border-radius: 4px; background: rgba(255, 255, 255, .09); }
.timer__box b { color: #fff; font-family: var(--cond); font-weight: 800; font-size: 38px; line-height: 1; font-variant-numeric: tabular-nums; }
.timer__box small { margin-top: 3px; color: var(--mint); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.count .timer { background: none; box-shadow: none; padding: 0; }

/* ---------- Objection handling: one section per question, answer open on the page ---------- */
.obj { padding: clamp(48px, 7vw, 84px) 0; background: #fff; }
.obj--alt { background: var(--gray); }
.obj__q { position: relative; padding-left: 20px; color: var(--black); font-size: clamp(27px, 4.2vw, 40px); line-height: 1.12; font-weight: 900; letter-spacing: -.02em; text-wrap: balance; }
.obj__q::before { content: ""; position: absolute; left: 0; top: .12em; bottom: .12em; width: 7px; border-radius: 2px; background: var(--mint-mark); }
.obj__a { margin-top: 20px; }
.obj__a::after { content: ""; display: block; clear: both; }
.obj__a p { font-size: 19px; line-height: 1.7; }
.obj__a p + p { margin-top: 16px; }
.obj__photo { width: min(100%, 220px); margin: 4px auto 20px; }
.obj__photo img { border-radius: 5px; box-shadow: 0 12px 26px rgba(12, 17, 15, .18); }
@media (min-width: 700px) { .obj__photo { float: right; margin: 6px 0 14px 28px; } .obj__photo img { transform: rotate(2deg); } }
.obj .buyrow { margin-top: clamp(26px, 4vw, 36px); }
.roles--two { margin-top: 26px; }
@media (min-width: 700px) { .roles--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qa-grid { display: grid; gap: 14px; max-width: 1000px; margin: clamp(26px, 4vw, 38px) auto 0; }
@media (min-width: 760px) { .qa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
.qa { padding: 20px 22px; border: 2px solid var(--line-strong); border-left: 6px solid var(--mint-mark); border-radius: 4px; background: #fff; }
.qa__q { margin-bottom: 8px; color: var(--black); font-size: 20px; line-height: 1.3; font-weight: 900; }
.qa p { color: var(--ink); font-size: 17px; line-height: 1.6; }
.qa p + p { margin-top: 10px; }

/* The +/- sign on the "page by page" drop-down */
.faq__sign { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--black); }
.faq__sign::before, .faq__sign::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.5px; background: #fff; transform: translate(-50%, -50%); }
.faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .15s; }
.pages[open] .faq__sign { background: var(--mint); }
.pages[open] .faq__sign::before, .pages[open] .faq__sign::after { background: var(--black); }
.pages[open] .faq__sign::after { transform: translate(-50%, -50%) rotate(0deg); }

/* ---------- The close of the letter ---------- */
.letter { padding: clamp(52px, 7vw, 88px) 0 clamp(56px, 8vw, 96px); background: #fff; border-top: 1px solid var(--line); }
.letter__title { margin-bottom: 24px; color: var(--black); font-size: clamp(30px, 5vw, 44px); line-height: 1.08; font-weight: 900; letter-spacing: -.02em; }
.letter p { margin-bottom: 18px; font-size: 19px; line-height: 1.7; }
.letter__sign { margin-top: 28px; }
.letter__name { display: inline-block; margin: 4px 0; color: var(--black); font-family: var(--cond); font-style: italic; font-weight: 800; font-size: 40px; line-height: 1; }
.letter__ps { margin-top: 28px; padding-top: 20px; border-top: 2px solid var(--black); }
.letter .buyrow { margin-top: 8px; }
.letter .soon, .letter .after { margin-top: 14px; }
/* Share this page (the Cookbook's social share element) */
.share { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 22px; padding: 10px 18px; border: 2px solid var(--black); border-radius: 5px; background: #fff; color: var(--black); font: inherit; font-size: 16px; font-weight: 800; cursor: pointer; }
.share:hover { background: var(--mint-ice); }
.share svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Footer (from sbvfall.com) ---------- */
.footer { background: var(--black); color: #D2DCD6; font-size: 16px; line-height: 1.55; }

.sitebar { background: var(--mint-2); color: var(--black); }
.sbv .sitebar :focus-visible { outline-color: var(--black); }
.sitebar__inner { display: grid; gap: 16px; align-items: center; padding-top: 24px; padding-bottom: 26px; }
@media (min-width: 800px) { .sitebar__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 32px; } }
.sitebar__text { font-size: 18px; line-height: 1.45; }
.sitebar__text strong { display: block; margin-bottom: 4px; font-size: 22px; font-weight: 900; line-height: 1.2; }
.sitebar__btn { min-width: 280px; }

.footer__heading { margin-bottom: 14px; color: #fff; font-family: var(--cond); font-weight: 800; font-size: 22px; letter-spacing: .05em; text-transform: uppercase; }
.footer__cols { display: grid; gap: 32px; padding-top: clamp(36px, 5vw, 52px); padding-bottom: 32px; }
@media (min-width: 800px) { .footer__cols { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 48px; } }
.footer__brand { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 14px; color: #fff; text-decoration: none; }
.footer__brand:hover { color: #fff; }
.footer__brand img { width: 56px; }
.footer__about p { max-width: 460px; }
.social { display: flex; gap: 10px; margin-top: 18px; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--black-2); color: #fff; }
.social a:hover { background: var(--mint); color: var(--black); }
.social svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.social svg .fill { fill: currentColor; stroke: none; }
.footer__links li { font-size: 16px; }
.footer__links a { display: flex; align-items: center; min-height: 44px; color: #fff; text-decoration: none; }
.footer__links a:hover { color: var(--mint); text-decoration: underline; }
.footer__links strong { color: var(--mint); font-family: var(--cond); font-size: 26px; font-weight: 800; }
.footer__addr { padding: 6px 0; color: #D2DCD6; }

/* No room saved for the sticky bar: it steps aside when the footer is on screen */
.footer__bottom { background: var(--black-3); }
.footer__bottomInner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 20px; padding-top: 10px; padding-bottom: 10px; color: #A3B4AB; font-size: 14px; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 0 18px; }
.footer__legal a { display: inline-flex; align-items: center; min-height: 44px; color: #D2DCD6; }
.footer__legal a:hover { color: #fff; }

/* ---------- Sticky buy bar (phones) ---------- */
.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--black); border-top: 4px solid var(--mint); box-shadow: 0 -6px 20px rgba(12, 17, 15, .25);
}
.stickybar__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 700px; margin: 0 auto; }
.stickybar .btn { min-height: 56px; padding: 8px 6px 12px; box-shadow: inset 0 -5px 0 var(--mint-edge); }
.stickybar .btn__main { font-size: 15px; }
.stickybar .btn__sub { font-size: 13px; }
@media (min-width: 900px) { .stickybar { display: none !important; } }

/* ---------- Reading room: more space between lines and blocks (phones and tablets) ---------- */
@media (max-width: 899px) {
  .sbv { line-height: 1.7; }
  .hero__sub { line-height: 1.6; }
  .sec-lede { line-height: 1.65; }
  .lcard p { line-height: 1.8; }
  .role p { line-height: 1.65; }
  .fb li { line-height: 1.6; }
  .table dl > div { padding: 14px 16px; }
  .table dd { line-height: 1.6; }
  .dots li { margin-bottom: 14px; line-height: 1.65; }
  .fund p { line-height: 1.75; }
  .obj__a p { line-height: 1.8; }
  .letter p { margin-bottom: 24px; line-height: 1.8; }
  .footer__cols { gap: 40px; }
  .footer__about p { line-height: 1.7; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sbv *, .sbv *::before, .sbv *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .hero__photo img, .float img { transform: none !important; }
}