/* The series sales page.
 *
 * REBUILT FOR THE CHRISTMAS COOKIE TIN 2026, from the tokens and the section
 * order in the brief. One stylesheet for the engine, not for one season: a
 * second series gets this look with no new CSS, because everything that
 * differs between seasons is a row rather than a rule.
 *
 * THE TOKENS ARE THE BRIEF'S, to the hex digit. They are warm, cream-on-
 * maroon, and they are not the Desk's palette — this page wears the brand
 * the series belongs to, and the brand header and footer are lifted out of
 * the live site above and below it.
 *
 * AND THE BRAND SHEETS LOAD FIRST. `_head` links the live site's own
 * stylesheets before this one, so anything here that collides wins on
 * source order. Everything is scoped under `sp-` for the same reason, and
 * the two places that had to reach into the brand's own markup are marked.
 */

/* ------------------------------------------------------------------ tokens */
.sp-body {
  --cream: #fffeec;
  --cream-2: #fbf3df;
  --card: #fffdf7;
  --maroon: #51000d;
  --maroon-2: #7d1a22;
  --orange: #fd7d23;
  --orange-ink: #b0510b;
  --gold: #c98a2e;
  --ink: #2a1712;
  --muted: #7c6a60;
  --line: #ebe0cc;
  --line-2: #efe6d4;

  /* The type scale, as given — AND IN PIXELS, NOT REM, WHICH IS NOT A
     PREFERENCE.
     This page wears the brand's own stylesheets, lifted out of the live
     site and loaded ABOVE this file, and that theme sets a root font size
     of its own: `1rem` computes to 7.68px here, not 16px. Every step below
     was landing at 48% of itself — an 18.9px heading drawn at 9px, a lede
     whose `62ch` measure came out 372px wide — and the page read as
     something that had failed to load rather than as something small.
     Measured on the rendered page, not guessed.
     The ratios are the brief's, unchanged: .82 / 1 / 1.18 / 1.5 / 1.95 /
     2.5 against a 16px base. */
  /* LEGIBILITY (Tom, 19 Oct 2026): the supporting size was 13px, below a
     comfortable minimum; 15px now, and the body a step up to 17px. The
     scale above them is unchanged, so the hierarchy holds. */
  --t-xs: 15px;
  --t-s: 17px;
  --t-m: 19px;
  --t-l: 24px;
  --t-xl: 31px;
  --t-2xl: 40px;
  --t-display: clamp(38px, 6vw, 58px);

  --r-s: 10px;
  --r-m: 16px;
  --r-l: 22px;
  --r-pill: 999px;

  /* WARM SHADOWS. A grey shadow on a cream page reads as dirt, so every one
     of these is maroon at a low alpha. */
  --shadow-s: 0 1px 2px rgba(81, 0, 13, 0.06),
              0 2px 8px rgba(81, 0, 13, 0.05);
  --shadow-m: 0 2px 6px rgba(81, 0, 13, 0.07),
              0 10px 28px rgba(81, 0, 13, 0.08);
  --shadow-l: 0 4px 12px rgba(81, 0, 13, 0.09),
              0 22px 56px rgba(81, 0, 13, 0.12);

  --display: Montserrat, "Segoe UI", system-ui, -apple-system, sans-serif;
  --body: Poppins, "Segoe UI", system-ui, -apple-system, sans-serif;

  --measure: 1120px;

  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-s);
  font-weight: 400;
  line-height: 1.65;
  margin: 0;
  /* The floating bar at the bottom on a phone must not sit on the last
     line of the page. */
  padding-bottom: 0;
  -webkit-font-smoothing: antialiased;
}

.sp-body h1, .sp-body h2, .sp-body h3, .sp-body h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.14;
  color: var(--maroon);
  margin: 0 0 0.5em;
  letter-spacing: -0.012em;
}

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

.sp-wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 24px;
}

.sp-sec { padding: 76px 0; position: relative; }
.sp-sec--tint { background: var(--cream-2); }
.sp-sec > .sp-wrap > h2 { font-size: var(--t-2xl); }

.sp-eyebrow {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-ink);
  margin: 0 0 14px;
}

/* A READING MEASURE, IN PIXELS, for the reason written over the type scale:
   `ch` is a function of the font size, so a `62ch` measure under a theme
   that had shrunk the root came out at 372px — a third of the column it was
   meant to be, with two thirds of the section empty beside it. */
.sp-lede { font-size: var(--t-m); color: var(--ink); max-width: 660px; }
.sp-sub { color: var(--muted); max-width: 660px; }
/* Body copy that is not a lede. Wide enough to read, and never the full
   1072px of the container — a 110-character line is not a paragraph. */
.sp-prose { max-width: 720px; }
.sp-prose p { font-size: var(--t-s); }

/* ------------------------------------------------------------ the header */
/*
 * TWO ROWS AND NEVER A THIRD. The brand's own row — logo and socials — then
 * this one. The site MENU is deliberately left behind: a sales page is one
 * page with one thing to do on it.
 */
/* NOTHING INSIDE `.sp-brand` OR `.sp-brandfoot` IS RESTYLED — they are the
   site's own header and footer, copied verbatim, and the whole point of
   copying them is that they look like the site.
   THE ONE EXCEPTION, AND IT IS A FIX NOT A RESTYLE: the copied header keeps
   the HEIGHT of the site menu row, which this page deliberately does not
   carry — 187px of furniture around a 101px row, which reads as the page
   having failed to load. Found by looking at a screenshot in Phase 1, lost
   in this rebuild, and put back here. */
.sp-brand { background: #fff; display: block; height: auto; }
.sp-brand header, .sp-brand .center { min-height: 0; height: auto; }
/* AND THE SECOND EXCEPTION, ALSO A FIX: the copied header's row sat flush
   against both edges of the screen, so the logo touched the left edge and
   the TikTok button's shadow was clipped at the right (seen at 1280, 18 Oct
   review). Both are absolutely placed at left:0 / right:0, so padding does
   nothing; their two offsets are moved in by the page's gutter, and nothing
   else inside the header is restyled. */
.sp-brand .top .logo { left: max(16px, env(safe-area-inset-left, 0px)); }
.sp-brand .top .socials { right: max(16px, env(safe-area-inset-right, 0px)); }
.sp-brandfoot { display: block; margin-top: 0; }

.sp-stick {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 254, 236, 0.94);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.sp-stick-in {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.sp-stick-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-s);
  color: var(--maroon);
  text-decoration: none;
  margin-right: auto;
  line-height: 1.2;
  /* 44px, like every other target on this page. It is a link back to the
     top and it was 35px tall — the one control of OUR OWN that was under
     the floor. Sized with the box, not by growing the type: the layout
     moves, the words do not. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
}
.sp-stick-name span {
  display: block;
  font-family: var(--body);
  font-weight: 500;
  font-size: var(--t-xs);
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
}
.sp-socials { display: flex; gap: 6px; }
.sp-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px, measured on the screen — the target is sized and the ICON inside
     it is what looks small. See the reviews box, same decision. */
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  color: var(--maroon-2);
  text-decoration: none;
  font-size: var(--t-xs);
  font-weight: 600;
}
.sp-social:hover { background: var(--cream-2); color: var(--maroon); }

.sp-jumps {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 65px;
  z-index: 55;
}
.sp-jumps-in {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.sp-jumps-in::-webkit-scrollbar { display: none; }
.sp-jump {
  flex: 0 0 auto;
  padding: 13px 14px;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  font-family: var(--display);
}
.sp-jump:hover, .sp-jump[aria-current="true"] {
  color: var(--maroon);
  border-bottom-color: var(--orange);
}

/* --------------------------------------------------------------- buttons */
.sp-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 30px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--orange);
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-s);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-m);
  transition: transform 0.14s ease, box-shadow 0.14s ease,
              background 0.14s ease;
}
.sp-cta:hover {
  background: var(--orange-ink);
  transform: translateY(-1px);
  box-shadow: var(--shadow-l);
}
.sp-cta:active { transform: translateY(0); }
.sp-cta--ghost {
  background: transparent;
  color: var(--maroon);
  border: 1.5px solid var(--line);
  box-shadow: none;
}
.sp-cta--ghost:hover {
  background: var(--card);
  color: var(--maroon);
  border-color: var(--gold);
}
.sp-cta--small { min-height: 44px; padding: 10px 20px; font-size: var(--t-xs); }

/* ------------------------------------------------------------------ hero */
.sp-hero {
  background:
    radial-gradient(1100px 520px at 88% -12%, #fff6e2 0%, transparent 62%),
    var(--cream);
  padding: 46px 0 56px;
  overflow: hidden;
  position: relative;
}
.sp-hero-grid {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: 56px;
  /* CENTRED AGAINST THE PHOTO, BUT THE PHOTO IS NOT ALLOWED TO BE SO TALL
     THAT CENTRING LEAVES THE WORDS FLOATING. A 4/5 portrait beside a short
     text column put 200px of nothing above the eyebrow and the hero read as
     a page that had not finished loading. Measured on the screenshot. */
  align-items: center;
}
.sp-hero h1 {
  font-size: var(--t-display);
  margin-bottom: 18px;
}
.sp-hero .sp-lede { margin-bottom: 10px; }

.sp-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0; }
.sp-pill {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 11px 17px;
  box-shadow: var(--shadow-s);
  min-width: 96px;
}
.sp-pill b {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-xl);
  color: var(--maroon);
  line-height: 1.05;
}
.sp-pill span {
  font-size: var(--t-xs);
  color: var(--muted);
}

.sp-hero-art {
  position: relative;
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--shadow-l);
  aspect-ratio: 4 / 4.2;
  max-height: 540px;
  background: var(--cream-2);
}
.sp-hero-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------------------------------------------------- photo slots */
/*
 * A LABELLED SLOT AND NOT A STOCK PHOTO. Tom's originals are 0.7MB to 22MB
 * camera files and need a resize-and-host step that is a PROPOSAL, not a
 * decision this build was free to make. So where a photo will go, the page
 * says which photo, by filename. It is honest on a staging preview and it
 * is impossible to mistake for finished.
 */
.sp-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  min-height: 170px;
  padding: 22px;
  text-align: center;
  background:
    repeating-linear-gradient(45deg, #fbf3df 0 12px, #f7ecd4 12px 24px);
  color: var(--maroon-2);
  border: 1px dashed var(--gold);
  border-radius: inherit;
}
.sp-slot b {
  font-family: var(--display);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-ink);
}
.sp-slot code {
  font-size: var(--t-xs);
  color: var(--muted);
  word-break: break-word;
  line-height: 1.45;
}

/* ------------------------------------------------------- early-bird strip */
.sp-strip {
  background: var(--maroon);
  color: #ffeede;
}
.sp-strip-in {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  text-align: center;
  font-size: var(--t-s);
}
.sp-strip b {
  font-family: var(--display);
  font-weight: 800;
  color: #fff;
}
.sp-strip .sp-strip-tag {
  font-family: var(--display);
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--orange);
  color: #fff;
  border-radius: var(--r-pill);
  padding: 4px 13px;
}
/* THE EARLY-BIRD BAND (Tom, 19 Oct 2026): pill on top, his sentence, then a
   Reserve button — stacked and centred, so the band reads as one offer.
   The pill is a link to the same checkout as the button. */
.sp-strip--early .sp-strip-in { flex-direction: column; gap: 10px;
  padding: 20px 24px 22px; }
.sp-strip--early .sp-strip-tag { text-decoration: none; font-size: 14px;
  padding: 6px 16px; }
.sp-strip--early .sp-strip-tag:hover { background: #ff9a3d; }
.sp-strip-words { font-size: 18px; line-height: 1.45; color: #fff;
  max-width: 46em; }
.sp-strip-cta { margin-top: 2px; }

/* ONE GENTLE PULSE for the few things Tom asked to draw the eye to (the
   early-bird pill and band, the scarcity line, the locked Reserve). Slow,
   small, and switched off entirely for anybody who asked their device for
   less motion. */
@keyframes sp-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}
.sp-pulse { display: inline-block; animation: sp-pulse 2.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .sp-pulse { animation: none; }
}

/* ------------------------------------------------------------- how it works */
.sp-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 36px;
  counter-reset: sp-step;
}
.sp-step {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 26px 22px 24px;
  box-shadow: var(--shadow-s);
  position: relative;
}
.sp-step::before {
  counter-increment: sp-step;
  content: counter(sp-step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-pill);
  background: var(--maroon);
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-s);
  margin-bottom: 14px;
}
.sp-step h3 { font-size: var(--t-m); margin-bottom: 8px; }
.sp-step p { font-size: var(--t-xs); color: var(--muted); line-height: 1.6; }

/* ----------------------------------------------------------- the classes */
.sp-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 38px;
}
/*
 * SIX CONSISTENT CARDS. Same height, same order of information, every time:
 * photo, date and time, title, summary, then price and allergens on one
 * footing row with Learn more. A card that reorders itself per class makes
 * the reader re-learn it six times.
 */
.sp-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--shadow-s);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.sp-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); }
.sp-card-art {
  aspect-ratio: 16 / 10;
  background: var(--cream-2);
  position: relative;
  border-radius: 0;
}
/* PINNED INSIDE THE FRAME. `aspect-ratio` is only a preference, and a
   portrait photo's own height overrode it: cards 1 and 4 came out taller and
   every date and title below them sat lower than their neighbours'. */
.sp-card-art { overflow: hidden; }
.sp-card-art img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; }
.sp-card-n {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--maroon);
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-xs);
  box-shadow: var(--shadow-s);
}
.sp-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: var(--display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--gold);
  color: #fff;
  border-radius: var(--r-pill);
  padding: 5px 12px;
  box-shadow: var(--shadow-s);
}
.sp-card-body { padding: 20px 20px 0; flex: 1 1 auto; }
.sp-card-when {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--orange-ink);
  margin-bottom: 7px;
}
.sp-card h3 { font-size: var(--t-m); margin-bottom: 9px; }
.sp-card-sum { font-size: var(--t-xs); color: var(--muted); line-height: 1.62; }
.sp-card-foot {
  padding: 16px 20px 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}
.sp-card-price {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-l);
  color: var(--maroon);
  line-height: 1;
}
.sp-allergen {
  display: block;
  font-family: var(--body);
  font-weight: 500;
  font-size: var(--t-xs);
  color: var(--muted);
  margin-top: 6px;
  max-width: 24ch;
  line-height: 1.45;
}
.sp-more {
  flex: 0 0 auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--maroon);
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-xs);
  cursor: pointer;
}
.sp-more:hover { border-color: var(--gold); background: var(--cream-2); }

.sp-note {
  margin-top: 14px;
  padding: 13px 16px;
  border-left: 3px solid var(--orange);
  background: #fff7ea;
  border-radius: 0 var(--r-s) var(--r-s) 0;
  font-size: var(--t-xs);
  color: var(--ink);
  line-height: 1.6;
}
.sp-note b { color: var(--orange-ink); }

/* ------------------------------------------------------------- the modal */
/*
 * MILKED BACKDROP. A blur alone over a cream page is barely a change, so it
 * is a blur AND a warm wash, which is what makes the panel read as lifted
 * off the page rather than drawn on it.
 */
.sp-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 20px;
  overflow-y: auto;
  background: rgba(81, 0, 13, 0.34);
  backdrop-filter: blur(9px) saturate(1.15);
}
.sp-modal[open], .sp-modal.is-open { display: flex; }
.sp-modal-panel {
  position: relative;
  width: 100%;
  max-width: 760px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-l);
  padding: 34px 34px 36px;
  margin: auto;
}
.sp-modal-x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--cream-2);
  color: var(--maroon);
  font-size: var(--t-m);
  line-height: 1;
  cursor: pointer;
}
.sp-modal-x:hover { background: var(--maroon); color: #fff; }
.sp-modal-panel h2 { font-size: var(--t-xl); padding-right: 52px; }
.sp-modal-when {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange-ink);
  margin-bottom: 10px;
}
.sp-modal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 20px;
}
.sp-chip {
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--maroon-2);
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 6px 14px;
}
.sp-modal-body p { font-size: var(--t-s); line-height: 1.72; }
.sp-modal-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 22px;
}
.sp-modal-gallery > * {
  border-radius: var(--r-s);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--cream-2);
  position: relative;
}
.sp-modal-gallery img { position: absolute; inset: 0; width: 100%;
  height: 100%; object-fit: cover; }
.sp-modal-foot {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* ----------------------------------------------------------- the pricing */
.sp-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
  align-items: start;
}
.sp-tier {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: 30px 26px;
  box-shadow: var(--shadow-s);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.sp-tier--best {
  border: 2px solid var(--orange);
  box-shadow: var(--shadow-m);
}
.sp-tier-flag {
  align-self: flex-start;
  font-family: var(--display);
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--orange);
  color: #fff;
  border-radius: var(--r-pill);
  padding: 4px 13px;
  margin-bottom: 14px;
}
.sp-tier h3 { font-size: var(--t-m); margin-bottom: 14px; }
.sp-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.sp-price b {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-2xl);
  color: var(--maroon);
  line-height: 1;
}
.sp-was {
  font-size: var(--t-s);
  color: var(--muted);
  text-decoration: line-through;
}
.sp-tier-tier {
  font-size: var(--t-xs);
  color: var(--orange-ink);
  font-weight: 600;
  margin-bottom: 18px;
}
.sp-tier ul { list-style: none; margin: 0 0 22px; padding: 0; }
/* The site's own reset takes bullets off lists, which once left a points
   list reading as stray lines. These draw their own. */
.sp-tier li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 9px;
  font-size: var(--t-xs);
  color: var(--ink);
  line-height: 1.6;
}
.sp-tier li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
}
.sp-tier .sp-cta { margin-top: auto; width: 100%; }

.sp-addons {
  margin-top: 34px;
  background: var(--cream-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-m);
  padding: 24px 26px;
}
.sp-addons h3 { font-size: var(--t-m); margin-bottom: 4px; }
.sp-addons > p { font-size: var(--t-xs); color: var(--muted); }
.sp-addon-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.sp-addon {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  padding: 14px 16px;
}
.sp-addon b {
  display: block;
  font-family: var(--display);
  font-size: var(--t-s);
  color: var(--maroon);
  margin-bottom: 3px;
}
.sp-addon span { font-size: var(--t-xs); color: var(--muted); }
.sp-addon-price {
  font-family: var(--display);
  font-weight: 800;
  color: var(--orange-ink);
}

.sp-seats {
  margin-top: 26px;
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-s);
  color: var(--maroon-2);
}

/* --------------------------------------------------------------- the bio */
.sp-bio-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 48px;
  align-items: start;
  margin-top: 36px;
}
.sp-bio-art {
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--shadow-m);
  aspect-ratio: 4 / 5;
  background: var(--cream-2);
}
.sp-bio-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
/*
 * EACH CREDENTIAL IS A HEADLINE WITH ITS EXPLANATION UNDER IT, which is the
 * brief's own shape and the reason this is not a bullet list: the headline
 * is what somebody scanning reads, and the sentence under it is what they
 * read if the headline earned it.
 */
.sp-creds { display: grid; gap: 22px; }
.sp-cred h3 {
  font-size: var(--t-m);
  margin-bottom: 5px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.sp-cred h3::before {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--orange);
}
.sp-cred p { font-size: var(--t-xs); color: var(--muted); padding-left: 20px; }

/* --------------------------------------------------------- the guarantee */
.sp-guarantee {
  background: var(--maroon);
  color: #ffeede;
  border-radius: var(--r-l);
  padding: 46px 44px;
  box-shadow: var(--shadow-l);
  max-width: 820px;
  margin: 0 auto;
}
.sp-guarantee h2 { color: #fff; font-size: var(--t-xl); }
.sp-guarantee p { color: #ffeede; }
.sp-guarantee .sp-promise {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-l);
  color: #fff;
  line-height: 1.3;
  margin-bottom: 16px;
}
.sp-sign {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.sp-sign b {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-m);
  color: #fff;
  display: block;
}
.sp-sign span {
  display: block;
  margin-top: 6px;
  font-size: var(--t-xs);
  color: #f2cdb4;
}

/* ----------------------------------------------------------- the reviews */
.sp-rev-stage { position: relative; margin-top: 34px; }
.sp-rev-track { overflow: hidden; }
.sp-rev-rail {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.sp-rev-slide {
  flex: 0 0 100%;
  padding: 0 6px;
  box-sizing: border-box;
}
.sp-rev {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: 34px 38px;
  box-shadow: var(--shadow-s);
  max-width: 740px;
  margin: 0 auto;
  text-align: center;
}
.sp-rev-stars { color: var(--gold); font-size: var(--t-m); letter-spacing: 2px; }
.sp-rev-text {
  font-size: var(--t-m);
  line-height: 1.7;
  color: var(--ink);
  margin: 14px 0 18px;
  /* A stored newline is a paragraph break here. The recipe review cards are
     deliberately NOT given this — see the review engine's finding (C). */
  white-space: pre-wrap;
}
.sp-rev-who {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-s);
  color: var(--maroon);
}
.sp-rev-when { font-size: var(--t-xs); color: var(--muted); }

.sp-rev-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--maroon);
  font-size: var(--t-m);
  cursor: pointer;
  box-shadow: var(--shadow-s);
  z-index: 2;
}
.sp-rev-arrow:hover { background: var(--maroon); color: #fff; }
.sp-rev-arrow--prev { left: -8px; }
.sp-rev-arrow--next { right: -8px; }

.sp-rev-under {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.sp-dots { display: flex; gap: 8px; }
.sp-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
}
.sp-dot[aria-current="true"] { background: var(--orange); }
.sp-rev-pause {
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font-size: var(--t-xs);
  font-weight: 600;
  cursor: pointer;
}
.sp-rev-pause:hover { color: var(--maroon); border-color: var(--gold); }
.sp-rev-all {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--orange-ink);
  text-decoration: none;
}
.sp-rev-all:hover { text-decoration: underline; }

.sp-rev-empty {
  text-align: center;
  color: var(--muted);
  font-size: var(--t-s);
  background: var(--card);
  border: 1px dashed var(--line);
  border-radius: var(--r-l);
  padding: 44px 30px;
  max-width: 620px;
  margin: 34px auto 0;
}

/* --------------------------------------------------------------- the FAQ */
.sp-faq { max-width: 820px; margin: 34px auto 0; }
.sp-q {
  border-bottom: 1px solid var(--line);
}
.sp-q summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 4px;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-m);
  color: var(--maroon);
  list-style: none;
  min-height: 44px;
}
.sp-q summary::-webkit-details-marker { display: none; }
.sp-q summary::after {
  content: "+";
  margin-left: auto;
  font-size: var(--t-l);
  font-weight: 400;
  color: var(--orange-ink);
  line-height: 1;
}
.sp-q[open] summary::after { content: "\2212"; }
.sp-q-a { padding: 0 4px 22px; color: var(--muted); font-size: var(--t-s); }

/* --------------------------------------------------------- the final CTA */
.sp-final {
  background: var(--maroon);
  color: #ffeede;
  text-align: center;
  padding: 84px 0;
}
.sp-final h2 { color: #fff; font-size: var(--t-2xl); }
.sp-final p { color: #f6d9c4; max-width: 56ch; margin-inline: auto; }
.sp-final .sp-cta { margin-top: 26px; }
.sp-final-small {
  margin-top: 18px;
  font-size: var(--t-xs);
  color: #e5b89c;
}

/* ------------------------------------------------- the floating reserve */
/*
 * TWO OF THEM, AND ONE AT A TIME. A pill on the right on a desk, a full-width
 * bar at the bottom on a phone — a pill is wrong on a phone and a bar across
 * the bottom of a 1280 screen is a cookie banner.
 *
 * Both appear on SCROLL rather than on load: a call to action already on the
 * screen does not need a second copy of itself floating over it.
 */
.sp-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
}
.sp-float.is-on { display: flex; }
.sp-float-small {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 5px 14px;
  font-size: var(--t-xs);
  color: var(--maroon-2);
  box-shadow: var(--shadow-s);
}
.sp-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: none;
  align-items: center;
  gap: 14px;
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
  background: rgba(255, 254, 236, 0.97);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 22px rgba(81, 0, 13, 0.1);
}
.sp-bar-price {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-s);
  color: var(--maroon);
  line-height: 1.15;
  margin-right: auto;
}
.sp-bar-price span {
  display: block;
  font-family: var(--body);
  font-weight: 500;
  font-size: var(--t-xs);
  color: var(--muted);
}
.sp-bar .sp-cta { flex: 0 0 auto; }

/* --------------------------------------------------------- decorations */
/*
 * DESKTOP ONLY, IN THE GUTTERS, AND GENTLE. They live outside the measure,
 * so on a narrow screen there is nowhere to put them and the media query
 * takes them away rather than shrinking them into the text.
 *
 * `pointer-events: none` because a cookie that eats a click on the Reserve
 * button is a decoration that costs money.
 */
.sp-decor {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0.075;
  width: 124px;
  height: 124px;
  animation: sp-turn 56s linear infinite;
  display: none;
}
.sp-decor svg { width: 100%; height: 100%; display: block; }
.sp-decor--slow { animation-duration: 84s; }
.sp-decor--back { animation-direction: reverse; }

@keyframes sp-turn {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ONLY WHERE THERE IS A GUTTER TO PUT THEM IN. The measure is 1120px, so
   at 1280 each side gutter is 80px and a 150px decoration hung at -66px was
   half off the edge of the screen — which does not read as a decoration in
   the margin, it reads as something broken. It needs the viewport to be
   wider than the measure by enough to hold one. */
@media (min-width: 1440px) {
  .sp-decor { display: block; }
}

/* NOT FOR SOMEBODY WHO HAS ASKED FOR STILLNESS. The decoration stops and
   the carousel stops with it — see series-page.js, which reads the same
   query rather than trusting CSS to have handled it. */
@media (prefers-reduced-motion: reduce) {
  .sp-decor { animation: none; }
  .sp-rev-rail { transition: none; }
  .sp-card, .sp-cta { transition: none; }
}

/* ------------------------------------------------------------ the phone */
@media (max-width: 1080px) {
  .sp-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .sp-hero-art { aspect-ratio: 16 / 11; }
  .sp-cards { grid-template-columns: repeat(2, 1fr); }
  .sp-steps { grid-template-columns: repeat(2, 1fr); }
  .sp-tiers { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .sp-bio-grid { grid-template-columns: 1fr; gap: 30px; }
  .sp-bio-art { max-width: 400px; aspect-ratio: 4 / 3; }
}

@media (max-width: 719px) {
  .sp-wrap { padding: 0 18px; }
  .sp-sec { padding: 54px 0; }
  .sp-sec > .sp-wrap > h2 { font-size: var(--t-xl); }
  .sp-cards { grid-template-columns: 1fr; gap: 20px; }
  .sp-steps { grid-template-columns: 1fr; gap: 14px; }
  .sp-stick-in { padding: 9px 18px; gap: 12px; }
  .sp-socials { display: none; }
  .sp-jumps { top: 58px; }
  .sp-jumps-in { padding: 0 18px; }
  .sp-pill { flex: 1 1 auto; min-width: 0; }
  .sp-guarantee { padding: 32px 24px; border-radius: var(--r-m); }
  .sp-modal { padding: 0; }
  .sp-modal-panel { border-radius: 0; min-height: 100%; padding: 26px 20px 30px; }
  .sp-rev { padding: 26px 22px; }
  .sp-rev-arrow--prev { left: -4px; }
  .sp-rev-arrow--next { right: -4px; }
  .sp-card-foot { flex-direction: column; align-items: stretch; gap: 12px; }
  .sp-more { justify-content: center; }
  .sp-allergen { max-width: none; }
  .sp-final { padding: 56px 0; }
  /* The bar is fixed over the bottom of the document, so the document needs
     to end above it. */
  .sp-body { padding-bottom: 76px; }
  .sp-float { display: none !important; }
}

@media (min-width: 720px) {
  .sp-bar { display: none !important; }
}

/* ==========================================================================
   THE MEMBER AREA — a separate room, in the same clothes
   ==========================================================================

   REFRESHED ONTO THE NEW TOKENS with the sales page, because somebody who
   has just paid should not land somewhere that looks like a different
   company. Same cream, same maroon, same two fonts, same 44px floor.

   WHAT IS IN HERE IS WHAT THEY BOUGHT. The left menu is their own classes
   and nothing else; the panel is one of them. `series.mine` / `series.owns`
   decide that on the server and this only draws the answer.
*/

/* THE FIRST LINK IN THE BAR IS A SERIES TITLE, and a real one is long:
   "The Christmas Cookie Tin 2026" is comfortable, but the 2025 season's
   name was 528px of bar inside 390px of phone and it pushed BOTH of the
   other two links — My Classes and Sign out — off the right-hand edge with
   nothing to say they were there. The bar scrolls sideways, so they were
   reachable; they were invisible, which is near enough. Capped and
   ellipsised on a phone, untouched everywhere else. Measured at 390. */
.mc-body .sp-jumps .sp-jump:first-child {
  max-width: 34vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* AND THE OTHER TWO STOP WRAPPING AND TIGHTEN UP. The rebuilt jump link is
   a wider thing than Phase 1's — uppercase, in the display face, with more
   padding — and at 390 the 42vw cap that used to be enough left "Sign out"
   past the right-hand edge again. The bar scrolls, so it was reachable; it
   was invisible, which is near enough. Measured at 390. */
.mc-body .sp-jumps .sp-jump {
  white-space: nowrap;
  padding-left: 10px;
  padding-right: 10px;
  letter-spacing: 0.02em;
}
@media (min-width: 560px) {
  .mc-body .sp-jumps .sp-jump:first-child { max-width: none; }
  .mc-body .sp-jumps .sp-jump {
    padding-left: 14px;
    padding-right: 14px;
    letter-spacing: 0.04em;
  }
}

/* THEY HAVE ALREADY BOUGHT IT. No floating Reserve in here, in either
   shape. */
.mc-body .sp-float, .mc-body .sp-bar { display: none !important; }
.mc-body { padding-bottom: 0; }

.sp-preview-bar {
  background: var(--maroon);
  color: #ffeede;
  text-align: center;
  padding: 10px 24px;
  font-size: var(--t-xs);
}

/* LEFT SIDE-MENU ON A DESK, STACKED ON A PHONE, and never a hamburger: six
   class names are not a menu worth hiding behind a button, and the thing
   somebody opens this page to do is pick one of them. */
.mc-wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 30px 24px 70px;
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .mc-wrap {
    grid-template-columns: 280px minmax(0, 1fr);
    align-items: start;
  }
  .mc-side { position: sticky; top: 92px; }
}
.mc-wrap--one { grid-template-columns: minmax(0, 1fr); max-width: 680px; }

.mc-side {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 16px;
  box-shadow: var(--shadow-s);
}
.mc-side-head {
  font-family: var(--display);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--orange-ink);
  margin: 0 0 10px;
}
.mc-list { list-style: none; margin: 0; padding: 0; }
.mc-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 13px;
  min-height: 44px;
  justify-content: center;
  border-radius: var(--r-s);
  text-decoration: none;
  color: var(--ink);
}
.mc-item:hover { background: var(--cream-2); }
.mc-item.is-on {
  background: var(--cream-2);
  box-shadow: inset 3px 0 0 var(--orange);
}
.mc-item-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-xs);
  color: var(--maroon);
  line-height: 1.35;
}
.mc-item-when { font-size: var(--t-xs); color: var(--muted); }
.mc-who {
  font-size: var(--t-xs);
  color: var(--muted);
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  overflow-wrap: anywhere;
}

.mc-panel {
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: 32px 34px 36px;
  box-shadow: var(--shadow-s);
}
.mc-panel h1 { font-size: var(--t-xl); margin: 0 0 8px; }
.mc-when {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--orange-ink);
  margin: 0 0 18px;
}
.mc-note { color: var(--muted); font-style: italic; }
.mc-error { color: #a3392c; font-weight: 600; }
.mc-quiet { color: var(--muted); font-size: var(--t-xs); }

/* THE MOMENT AFTER PAYING. The thank-you page signed them in and sent them
   here, and this is the first thing they read. */
/* The same width and side padding as .mc-wrap below it, so the banner's
   edges line up with the two columns. */
.mc-welcome-wrap { max-width: var(--measure); margin: 0 auto;
  padding: 30px 24px 0; box-sizing: border-box; }
.mc-welcome {
  padding: 18px 22px;
  border-radius: var(--r-m);
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 5px solid var(--orange-ink);
  box-shadow: var(--shadow-s);
}
.mc-welcome h1 { font-size: var(--t-l); margin: 0 0 4px; color: var(--maroon); }
.mc-welcome p { margin: 0; }

/* Continue with Google / Facebook: the same single-use link as the email,
   fetched by a provider instead of an inbox. */
.mc-socials { display: grid; gap: 10px; margin: 18px 0 22px; }
.mc-social {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card);
  color: var(--maroon); font-weight: 700; text-decoration: none;
}
.mc-social:hover { background: var(--cream-2); }

/* THE FOUR THINGS A CLASS PAGE IS FOR — the join link, the prep sheet and
   its ingredients, the recording, and the calendar file. Each is a row that
   is either there or is not; an empty one says when it will be rather than
   leaving a dead button. */
.mc-cal {
  color: var(--orange-ink);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: var(--t-xs);
}
.mc-video {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 20px 0;
  background: #000;
  border-radius: var(--r-m);
  overflow: hidden;
}
.mc-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.mc-sheet {
  border-top: 1px solid var(--line);
  margin-top: 22px;
  padding-top: 18px;
}
.mc-sheet h2 { font-size: var(--t-m); margin: 0 0 8px; }

/* DOWNLOADS: a link when it is out, the date when it is not. The same list
   on the member panel, in the aside (the whole series) and on a class page. */
.cl-mats { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cl-mats li { padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.cl-mats li:last-child { border-bottom: 0; }
.cl-mats a { color: var(--maroon); font-weight: 650; text-decoration: none; }
.cl-mats a::after { content: " ↓"; color: var(--orange-ink); }
.cl-mats .is-soon { color: var(--muted); }
.cl-mats small { display: block; font-size: var(--t-xs); }
.mc-wide { margin: 16px 0 6px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.mc-room { margin-top: 6px; }

.sp-form { display: grid; gap: 14px; max-width: 420px; margin-top: 18px; }
.sp-field { display: grid; gap: 6px; }
.sp-field span {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-xs);
  color: var(--maroon);
}
.sp-field input {
  min-height: 48px;
  padding: 12px 14px;
  font-family: var(--body);
  font-size: var(--t-s);
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--r-s);
}
.sp-field input:focus {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
  border-color: var(--orange);
}

@media (max-width: 719px) {
  .mc-wrap { padding: 20px 18px 56px; gap: 18px; }
  .mc-welcome-wrap { padding: 20px 18px 0; }
  .mc-panel { padding: 24px 20px 28px; border-radius: var(--r-m); }
}

/* THE RESERVE FORM, on the maroon final section. The fields are light on
   dark here and ordinary on the sign-in page, which is the same form class
   in a different room. */
.sp-form--final {
  margin: 26px auto 0;
  max-width: 420px;
  text-align: left;
}
.sp-form--final .sp-field span { color: #ffeede; }
.sp-form--final .sp-cta { width: 100%; }
.sp-fine {
  font-size: var(--t-xs);
  color: var(--muted);
  margin: 14px 0 0;
  line-height: 1.6;
}
.sp-final .sp-fine { color: #e5b89c; }
/* CENTRED LIKE THE LINES BELOW IT. Inside the left-aligned form the Stripe
   and terms note sat flush left while "Limited to 40 seats…" and "Already
   bought it?" under the form were centred. */
.sp-form--final .sp-fine { text-align: center; }
.sp-final .sp-fine a { color: #fff; text-decoration: underline; }

/* ------------------------------------------------------- the lead block */
/*
 * FOR SOMEBODY WHO IS NOT BUYING TODAY, between the FAQ and the section
 * that takes the order. Tinted rather than maroon on purpose: the maroon
 * section below it is the one that asks for money, and two dark bands in a
 * row would make the quieter of the two look like the main event.
 *
 * TWO COLUMNS ON A DESK, ONE ON A PHONE, and the words come first in the
 * document either way — a form with no explanation above it on a 390px
 * screen is a form nobody fills in.
 *
 * The fields, the button and the fine print are the page's own classes, so
 * this block cannot drift from the Reserve form it sits above.
 */
.sp-lead { background: var(--cream-2); }
.sp-lead-in { display: grid; gap: 26px; align-items: start; }
/* MIN-WIDTH: 0 ON THE COLUMNS, and it is load-bearing rather than tidy.
   A grid item's `min-width` is `auto`, which means "never narrower than my
   min-content" — and the min-content of this block is the Keep-me-posted
   button, which cannot wrap, plus its 60px of padding. At 390px that came to
   392px inside a 354px wrap, and the whole PAGE scrolled sideways by 38px.
   Found by `test_series_page`'s sideways check, measured in the browser. The
   Reserve form below does not have the fault because its wrap is a block,
   and block layout never consults a child's min-content. */
.sp-lead-in > * { min-width: 0; }
.sp-lead h2 {
  font-size: var(--t-xl);
  color: var(--maroon);
  margin: 6px 0 12px;
}
.sp-lead-words p {
  color: var(--muted);
  font-size: var(--t-s);
  max-width: 52ch;
  margin: 0;
}
.sp-form--lead {
  margin: 0;
  min-width: 0;
  max-width: none;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-s);
  padding: 24px 22px 22px;
}
.sp-form--lead .sp-cta { width: 100%; }
/* AND THE FIELDS INSIDE IT, for the same reason one line up and a different
   culprit. An `<input>` with no `size` attribute has an INTRINSIC width of
   about twenty characters — 346px with these paddings — and that intrinsic
   width is the min-content of the label's grid column. This card has 44px of
   padding of its own, so 354 - 44 = 310 of room for a column insisting on
   346, and the fields hung 37px out over the card's right edge.
   SCOPED TO THIS BLOCK ON PURPOSE. `.sp-field` is shared with the Reserve
   form and the sign-in page, where the same fragility is latent and does not
   bite because neither of those wraps the fields in a padded card. Widening
   the fix to `.sp-field` would change the width of fields on a page that has
   been reviewed, which is Tom's call and not mine — it is in the report. */
.sp-form--lead .sp-field,
.sp-form--lead .sp-field input { min-width: 0; }
/* AND NOW IN THE MEMBER PANEL, where it bit. The sign-in page's card is
   padded, so at 390px the email field and its button hung over the card's
   right edge; the fields also stopped short of the Google and Facebook
   buttons above them. Full width of the card, and allowed to shrink. */
.mc-panel .sp-form { max-width: none; }
.mc-panel .sp-field,
.mc-panel .sp-field input { min-width: 0; }
.mc-panel .sp-form .sp-cta { width: 100%; }
/* "(optional)" beside a field label: the same line, and not shouting. */
.sp-field span i {
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
/* THE ANSWER. In the document from the start and empty, so it is announced
   rather than appearing behind a reader; the form is hidden when it fills. */
.sp-lead-said {
  margin: 0;
  background: var(--card);
  border: 1.5px solid var(--gold);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-s);
  padding: 24px 22px;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-m);
  color: var(--maroon);
  line-height: 1.5;
}
.sp-lead-said[hidden] { display: none; }
/* AND THE FORM HAS TO BE ABLE TO GO AWAY. `.sp-form` is `display: grid`,
   which BEATS the user agent's `[hidden] { display: none }` on specificity —
   so setting `hidden` on it in the script did nothing at all, and a
   successful capture drew the confirmation UNDERNEATH a form whose button
   still said "One moment…". It looked exactly like a submit that had hung.
   Caught by looking at the screenshot of the success state; there is no
   other way this one shows up. */
.sp-form--lead[hidden] { display: none; }
.sp-lead-said--bad {
  border-color: var(--orange);
  font-family: var(--body);
  font-weight: 500;
  font-size: var(--t-s);
  color: var(--ink);
}

@media (min-width: 860px) {
  .sp-lead-in { grid-template-columns: 1.05fr 0.95fr; gap: 48px; }
}

/* ------------------------------------------------- official giveaway rules */
/* The rules page (Tom, 19 Oct 2026): the approved text verbatim, in a
   centred reading column. The free mail-in entry, 4(b), is the one thing
   drawn in a box, with a link to it at the top. Sized in px — see the
   note on the series page's root size. */
.rl {
  max-width: 760px;
  margin: 0 auto;
  padding: 36px max(16px, 4vw) 44px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-m);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.65;
}
.rl-title {
  font-family: var(--display);
  font-size: 28px;
  line-height: 1.25;
  color: var(--maroon);
  text-align: center;
  margin: 0 0 14px;
  text-wrap: balance;
}
.rl-notice {
  text-align: center;
  font-weight: 700;
  color: var(--maroon);
  background: var(--cream-2);
  border-radius: var(--r-m);
  padding: 14px 18px;
  margin: 0 0 14px;
}
.rl-jump { text-align: center; margin: 0 0 26px; }
.rl-jump a {
  display: inline-block;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  background: var(--maroon);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}
.rl-jump a:hover { background: var(--maroon-2); }
.rl-sec { margin: 0 0 18px; }
.rl-sec p { margin: 0 0 10px; }
.rl-sec b { color: var(--maroon); font-family: var(--display); }
.rl-sec .rl-head { margin: 0 0 6px; font-family: var(--display); font-size: 17px;
  line-height: 1.35; color: var(--maroon); }
.rl-sub { padding-left: 18px; }
.rl-free {
  margin: 4px 0 12px 18px;
  padding: 16px 18px;
  border-left: 5px solid var(--orange);
  background: #fff4e8;
  border-radius: 0 var(--r-m) var(--r-m) 0;
  scroll-margin-top: 24px;
}
.rl-free p { margin: 0; font-weight: 600; }
.rl-close { font-size: 15px; color: var(--muted); font-style: italic; }
.rl-links { margin: 28px 0 0; text-align: center; font-size: 15px; }
.rl-links a { color: var(--maroon); font-weight: 600; }
@media (max-width: 600px) {
  .rl { padding: 26px 16px 32px; font-size: 16px; }
  .rl-title { font-size: 23px; }
  .rl-sub, .rl-free { margin-left: 0; padding-left: 14px; }
}

/* =========================================================================
   19 OCT 2026 — Tom's approved public-side batch (B–S). Later in the file
   on purpose, so each rule here wins over the one it amends at the same
   specificity. Sizes in px: see the note on the series page's root size.
   ========================================================================= */

/* ---- B · the sticky header: socials and logo only when it LOCKS -------- */
.sp-stick-name { flex-direction: row; align-items: center; gap: 12px; }
.sp-stick-words { display: flex; flex-direction: column; justify-content: center; }
.sp-stick-logo { display: none; width: 44px; height: 44px; border-radius: 50%;
  flex: 0 0 auto; box-shadow: var(--shadow-s); }
.sp-socials { display: none; gap: 8px; align-items: center; }
.sp-stick.is-locked .sp-stick-logo { display: block; }
.sp-stick.is-locked .sp-socials { display: flex; }
/* Locked, on a desk: name left, Reserve dead centre, socials right. */
@media (min-width: 900px) {
  .sp-stick.is-locked .sp-stick-in {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; }
  .sp-stick.is-locked .sp-stick-name { margin-right: 0; justify-self: start; }
  .sp-stick.is-locked .sp-stick-cta { justify-self: center; min-height: 48px;
    padding: 12px 34px; font-size: 16px; }
  .sp-stick.is-locked .sp-socials { justify-self: end; }
}
/* On a phone there is no room for three icons beside a name and a button:
   the site header's own icons are a scroll away, and the bar keeps Reserve. */
@media (max-width: 899px) {
  .sp-stick.is-locked .sp-socials { display: none; }
  .sp-stick.is-locked .sp-stick-logo { width: 38px; height: 38px; }
}
@keyframes sp-pulse-rare {
  0%, 84%, 100% { transform: scale(1); }
  90% { transform: scale(1.07); }
  95% { transform: scale(0.99); }
}
.sp-stick-cta { animation: sp-pulse-rare 7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .sp-stick-cta { animation: none; } }

/* ---- O · every in-page link lands BELOW the two sticky rows ------------ */
/* The heights are measured by series-page.js; these are the defaults for a
   page with no script. Applies to the jump links, the guarantee pill and a
   link arriving from another page (the checkout's "Read the guarantee"). */
.sp-jumps { top: var(--sp-stick-h, 65px); }
html { scroll-padding-top: calc(var(--sp-stick-h, 65px)
                                + var(--sp-jumps-h, 48px) + 14px); }

/* ---- C · the hero ------------------------------------------------------- */
.sp-eyebrow--hero { font-size: 26px; line-height: 1.32; letter-spacing: 0.1em;
  margin-bottom: 14px; }
.sp-hero-sub { font-size: 18px; color: var(--ink); line-height: 1.55;
  max-width: 34em; }
.sp-hero-sub b { font-size: 20px; font-weight: 700; color: var(--maroon); }
.sp-hero-seats { font-family: var(--display); font-weight: 800; font-size: 20px;
  color: var(--maroon); margin: 18px 0 22px; }
.sp-countdown { margin: 16px 0 0; font-size: 16px; color: var(--muted); }
.sp-countdown-clock { color: var(--maroon); font-size: 18px;
  font-variant-numeric: tabular-nums; }
.sp-countdown[hidden] { display: none; }
@media (max-width: 600px) {
  .sp-eyebrow--hero { font-size: 19px; }
  .sp-hero-sub { font-size: 17px; }
  .sp-hero-sub b { font-size: 18px; }
}

/* ---- E · Premium is BEST VALUE (badge + highlight), the six MOST POPULAR */
.sp-tier-flag--soft { background: var(--maroon); }
.sp-tier--best { background: #fffaf2; }
.sp-tier-entries { margin: -6px 0 16px; text-align: center; font-weight: 700;
  font-size: 15px; color: var(--orange-ink); }

/* ---- F · the add-on cards, a shade warmer than the cards above --------- */
/* #fdf0e3 — a soft apricot cream, between the page's cream and the brand
   orange, so the add-ons read as "extras" rather than a fourth tier. */
.sp-addon { background: #fdf0e3; border-color: #f2d6b8; }

/* ---- G · the room, between the cards and the add-ons ------------------- */
.sp-seats--mid { margin: 45px 0; font-size: 21px; }
.sp-seats--mid + .sp-addons { margin-top: 0; }

/* ---- I · the reviews, centred ------------------------------------------ */
.sp-rev { text-align: center; }
.sp-rev-who-line { text-align: center; margin-inline: auto; }

/* ---- J · the guarantee: a full-width maroon stripe, no box ------------- */
.sp-guarantee-band { background: #51000d; }
.sp-guarantee-band .sp-guarantee { background: none; border-radius: 0;
  box-shadow: none; padding: 0; }
.sp-check { display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; background: var(--orange);
  color: #fff; font-size: 21px; font-weight: 800; margin: 2px 0 16px; }

/* ---- K · keep me posted, as an exit-intent popup (clean, gray) ---------- */
.sp-exit { position: fixed; inset: 0; z-index: 9999; display: none;
  align-items: center; justify-content: center; padding: 18px;
  background: rgba(38, 38, 38, 0.5); }
.sp-exit.is-open { display: flex; }
.sp-exit-panel { position: relative; width: 100%; max-width: 520px;
  max-height: calc(100vh - 36px); overflow-y: auto; box-sizing: border-box;
  padding: 34px 28px 26px; border-radius: 16px; background: #f1f1ef;
  color: #2b2b2b; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28); }
.sp-exit-x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: transparent; color: #666;
  font-size: 17px; cursor: pointer; }
.sp-exit-x:hover { background: #e2e2df; color: #222; }
.sp-exit .sp-eyebrow { color: #6b6b6b; }
.sp-exit h2 { font-size: 26px; color: #2b2b2b; margin: 4px 40px 10px 0; }
.sp-exit .sp-lead-words p { color: #4a4a4a; font-size: 16px; margin: 0 0 18px; }
.sp-exit .sp-form--lead { background: #fff; border-color: #dcdcd8;
  box-shadow: none; padding: 18px 16px 16px; }
.sp-exit .sp-form--lead .sp-cta { background: var(--maroon); }
.sp-exit .sp-form--lead .sp-cta:hover { background: var(--maroon-2); }

/* ---- L · the whole card opens the detail; Learn more in orange --------- */
.sp-card[data-sp-card] { cursor: pointer; }
.sp-more { background: var(--orange); color: #fff; border-color: var(--orange); }
.sp-more:hover { background: var(--orange-ink); border-color: var(--orange-ink);
  color: #fff; }

/* ---- M · section headlines centred; body left in a centred column ------ */
.sp-sec > .sp-wrap > h2 { text-align: center; text-wrap: balance; }
.sp-sec > .sp-wrap > .sp-sub { text-align: center; margin-inline: auto; }
#overview .sp-wrap > .sp-lede, #overview .sp-why, #overview .sp-creds {
  max-width: 720px; margin-inline: auto; text-align: left; }
#about .sp-bio-grid { max-width: 980px; margin-inline: auto; }

/* ---- P · the guarantee pill: under Reserve, burgundy, a link ----------- */
.sp-float-small { background: var(--maroon); color: #fff; border-color: var(--maroon);
  text-decoration: none; font-size: 14px; font-weight: 600; padding: 7px 15px; }
.sp-float-small:hover { background: var(--maroon-2); color: #fff; }

/* ---- S · the giveaway, promoted ---------------------------------------- */
.sp-give { background: var(--cream-2); }
.sp-give-in { max-width: 760px; margin: 0 auto; text-align: center;
  background: #fff; border: 2px solid var(--gold); border-radius: var(--r-l);
  padding: 38px 30px 30px; box-shadow: var(--shadow-m); }
.sp-give h2 { font-size: var(--t-2xl); color: var(--maroon); margin: 6px 0 4px;
  text-wrap: balance; }
.sp-give-tease { font-size: 19px; color: var(--orange-ink); font-weight: 700;
  margin: 0 0 16px; }
.sp-give-earn { font-size: 17px; color: var(--ink); max-width: 36em;
  margin: 0 auto 8px; }
.sp-give-opens { font-size: 16px; color: var(--muted); margin: 0 0 20px; }
.sp-give-rules { margin: 10px 0 0; font-size: 15px; }
.sp-give-rules a { color: var(--maroon); font-weight: 600; }
.sp-free-entry { margin: 10px 0 0; text-align: center; font-size: 14px;
  line-height: 1.45; }
.sp-free-entry a { color: var(--muted); text-decoration: underline; }
.sp-free-entry a:hover { color: var(--maroon); }
.sp-final .sp-free-entry a { color: #f2cdb4; }

/* ---- R · the closing section's way into checkout ----------------------- */
.sp-final-ctas { display: flex; flex-direction: column; align-items: center;
  gap: 10px; }
.sp-final-or { margin: 4px 0 0; font-size: 16px; }
.sp-final-or a { color: #fff; text-decoration: underline; }
.sp-cta--pulse { animation: sp-pulse-rare 7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .sp-cta--pulse { animation: none; } }

/* ---- 44px targets for the controls this batch added (test_series_page) */
.sp-dot { position: relative; width: 44px; height: 44px; background: transparent;
  border-radius: 50%; }
.sp-dot::before { content: ""; position: absolute; left: 17px; top: 17px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.sp-dot[aria-current="true"] { background: transparent; }
.sp-dot[aria-current="true"]::before { background: var(--orange); }
.sp-dots { gap: 0; flex-wrap: wrap; justify-content: center; }
.sp-rev-count { font-family: var(--display); font-weight: 700; font-size: 15px;
  color: var(--maroon); min-width: 4em; text-align: center; }
.sp-final-or a, .sp-give-rules a { display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 6px; }
.sp-strip--early .sp-strip-tag { display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 20px; }
.sp-float-small { display: inline-flex; align-items: center; min-height: 44px; }

/* ---- Q · legibility, measured (19 Oct 2026) --------------------------- */
/* THE SITE'S OWN `p` RULE IS IN rem, and 1rem is 7.68px on this page, so a
   paragraph that inherits nothing from its own class came out at 12.3px —
   the overview, the FAQ answers, the guarantee, the section subtitles and
   the closing section. Measured in the browser, every text node under 15px
   outside the site's copied header and footer; each is sized here in px. */
.sp-sec .sp-lede p, #overview .sp-why p { font-size: 17px; line-height: 1.68; }
#overview .sp-why h3 { font-size: 19px; }
.sp-q-a p { font-size: 17px; line-height: 1.65; }
.sp-guarantee p { font-size: 17px; }
.sp-sec > .sp-wrap > .sp-sub { font-size: 18px; line-height: 1.55; }
.sp-final p { font-size: 17px; }
.sp-final p.sp-fine, .sp-final p.sp-final-small { font-size: 15px; }
.sp-free-entry, .sp-strip--early .sp-strip-tag, .sp-float-small { font-size: 15px; }

/* ---- B · fixes from the screenshot pass -------------------------------- */
/* The name in the sticky row: the date rule above (".sp-stick-name span")
   also caught the new wrapper and turned the series name grey and thin. */
.sp-stick-name > .sp-stick-words { font-family: var(--display); font-weight: 800;
  font-size: var(--t-s); color: var(--maroon); }
.sp-stick-words > span { font-family: var(--body); font-weight: 500;
  font-size: 15px; color: var(--muted); }
.sp-stick-cta, .sp-bar .sp-cta, .sp-strip-cta { white-space: nowrap; }
.sp-countdown-clock { white-space: nowrap; }
.sp-hero .sp-lede { line-height: 1.38; }
/* On a phone the row keeps the name and Reserve, on one line each. */
@media (max-width: 600px) {
  .sp-stick-in { gap: 10px; padding: 8px 16px; }
  .sp-stick-words { min-width: 0; }
  .sp-stick-words, .sp-stick-words > span { white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; }
  .sp-stick-name { min-width: 0; flex: 1 1 auto; }
  .sp-stick-cta { flex: 0 0 auto; padding: 10px 16px; }
}

/* ---- screenshot pass, round 2 (19 Oct 2026) --------------------------- */
/* THE SITE'S `p` LINE-HEIGHT IS IN rem TOO, so a paragraph whose size went
   up kept a ~14.6px line and its lines touched (the guarantee, the
   giveaway). One explicit line-height for this page's paragraphs; classes
   that set their own at higher specificity keep theirs. */
.sp-body p { line-height: 1.6; }
/* The site's `.sp-body p` margin outranked the seat line's own 45px. */
.sp-body .sp-seats--mid { margin: 45px 0; }
/* The carousel is as tall as the slide on screen (set by series-page.js),
   not the longest of twelve testimonials. */
.sp-rev-rail { align-items: flex-start; }
.sp-rev-track { transition: height 0.35s ease; }
/* The rules page's paragraphs, sized past the site's rem-based `p` rule. */
.rl p { font-size: 17px; line-height: 1.65; }
.rl p.rl-notice { font-size: 16px; }
.rl p.rl-close, .rl p.rl-links { font-size: 15px; }
@media (max-width: 600px) { .rl p { font-size: 16px; } }
/* Phone, second look: the name on up to two lines, no ellipsis; the dates
   are in the hero and in the bar at the foot, so the row drops them. */
@media (max-width: 600px) {
  .sp-stick-words { white-space: normal; overflow: visible; font-size: 15px;
    line-height: 1.2; }
  .sp-stick-words > span { display: none; }
}

/* =========================================================================
   19 OCT 2026, SECOND BATCH — Tom's page rework (A–T). Later in the file on
   purpose, so each rule wins over the one it amends. Text colours are
   chosen for contrast, not hue alone: Tom is colourblind, and so are some
   of his buyers.
   ========================================================================= */

/* ---- A · the locked header's two lines: what this is, then the name --- */
.sp-stick-words > span { display: block; }

/* ---- C · the jump nav spans the content width, evenly ------------------ */
.sp-jumps-in { justify-content: space-between; }
.sp-jumps-in .sp-jump:first-child { padding-left: 0; }
.sp-jumps-in .sp-jump:last-child { padding-right: 0; }
@media (max-width: 899px) { .sp-jumps-in { justify-content: flex-start; } }

/* ---- D / E / G · the hero's text column -------------------------------- */
.sp-hero .sp-eyebrow--hero { margin-bottom: 10px; }
.sp-hero .sp-hero-when { margin: 10px 0 20px; }
.sp-hero-points { list-style: none; margin: 0 0 24px; padding: 0;
  display: grid; gap: 8px; }
.sp-hero-points li { position: relative; padding-left: 26px; font-size: 19px;
  line-height: 1.45; color: var(--ink); font-weight: 600; }
.sp-hero-points li::before { content: ""; position: absolute; left: 4px;
  top: 0.5em; width: 10px; height: 10px; border-radius: 50%;
  background: var(--orange); }
.sp-hero-cta { text-align: center; margin: 22px 0 0; }

/* ---- F · the tiles: white, maroon numerals, gray labels ---------------- */
.sp-tiles { margin: 6px 0 0; }
.sp-tiles[hidden] { display: none; }
.sp-tiles-label { font-family: var(--display); font-weight: 700; font-size: 16px;
  color: var(--maroon); margin: 0 0 10px; text-align: center; }
.sp-tiles-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px; max-width: 420px; margin: 0 auto; }
.sp-tile { background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-s); padding: 12px 6px 10px; text-align: center; }
.sp-tile b { display: block; font-family: var(--display); font-weight: 800;
  font-size: 32px; line-height: 1; color: var(--maroon);
  font-variant-numeric: tabular-nums; }
.sp-tile span { display: block; margin-top: 6px; font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: #595959; }

/* ---- H · the rotating photos, two layouts ------------------------------ */
.sp-rot { position: relative; width: 100%; height: 100%; }
.sp-rot img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 1.4s ease; }
.sp-rot img.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sp-rot img { transition: none; } }
.sp-hero-art--rot { position: relative; }
/* Option 2, full-bleed: the rotation fills the hero under a cream veil that
   is near-solid behind the words and opens up towards the right, so the
   photos show and the text stays crisp (contrast measured in the review). */
.sp-hero--full { position: relative; overflow: hidden; }
.sp-hero-bg { position: absolute; inset: 0; z-index: 0; }
.sp-hero-veil { position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255, 254, 236, 0.97) 0%,
    rgba(255, 254, 236, 0.93) 42%, rgba(255, 254, 236, 0.6) 66%,
    rgba(255, 254, 236, 0.18) 100%); }
.sp-hero--full .sp-wrap { position: relative; z-index: 1; }
.sp-hero--full .sp-hero-grid { grid-template-columns: minmax(0, 560px) 1fr; }
.sp-hero--full .sp-hero-text { padding: 12px 0; }
@media (max-width: 899px) {
  .sp-hero--full .sp-hero-grid { grid-template-columns: 1fr; }
  .sp-hero-veil { background: rgba(255, 254, 236, 0.9); }
}

/* ---- I · the early-bird band: headline, clock, line, pulsing button ---- */
.sp-strip-head { margin: 0; font-family: var(--display); font-weight: 800;
  font-size: 24px; line-height: 1.3; color: #fff; text-wrap: balance; }
.sp-eb-clock { color: #ffd9a8; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.sp-strip--early .sp-strip-words { font-size: 18px; color: #fffeec; }
[data-sp-countdown-box][hidden] { display: none; }
/* THE SHINE, after the review box's gold sheen: one slow band of light
   travelling across, faint enough that the white text keeps its contrast,
   and still for anybody who asked for less motion. */
.sp-shine { position: relative; overflow: hidden; isolation: isolate; }
.sp-shine::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%,
    rgba(255, 214, 160, 0.16) 45%, rgba(255, 235, 200, 0.26) 50%,
    rgba(255, 214, 160, 0.16) 55%, rgba(255, 255, 255, 0) 70%);
  background-size: 300% 100%; background-repeat: no-repeat;
  animation: sp-sheen 6s linear infinite; pointer-events: none; }
@keyframes sp-sheen { from { background-position: 150% 0; }
  to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) { .sp-shine::before { animation: none; } }

/* ---- K · read more ------------------------------------------------------ */
.sp-readmore { max-width: 720px; margin: 6px auto 0; }
.sp-readmore summary { list-style: none; cursor: pointer; display: inline-flex;
  align-items: center; min-height: 44px; font-family: var(--display);
  font-weight: 700; font-size: 16px; color: var(--maroon);
  text-decoration: underline; text-underline-offset: 4px; }
.sp-readmore summary::-webkit-details-marker { display: none; }
.sp-readmore .sp-rm-less { display: none; }
.sp-readmore[open] .sp-rm-more { display: none; }
.sp-readmore[open] .sp-rm-less { display: inline; }
.sp-readmore .sp-why { margin-top: 24px; }

/* ---- L · why to join: burgundy, milk text, icons ----------------------- */
.sp-join { background: #51000d; color: #fffeec; }
.sp-sec.sp-join > .sp-wrap > h2 { color: #fffeec; }
.sp-join-list { list-style: none; margin: 36px auto 0; padding: 0;
  max-width: 980px; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 40px; }
.sp-join-item { display: flex; gap: 16px; align-items: flex-start; }
.sp-join-icon { flex: 0 0 auto; width: 40px; height: 40px; padding: 8px;
  box-sizing: border-box; border-radius: 50%; color: #51000d;
  background: #ffd9a8; }
.sp-join-item h3 { font-size: 19px; color: #fffeec; margin: 4px 0 4px; }
.sp-body .sp-join-item p { font-size: 17px; color: #f6ead6; margin: 0; }
@media (max-width: 760px) { .sp-join-list { grid-template-columns: 1fr; } }

/* ---- M · how it works, as bullets -------------------------------------- */
.sp-step-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sp-step-list li { position: relative; padding-left: 18px; font-size: 16px;
  line-height: 1.55; color: var(--ink); }
.sp-step-list li::before { content: ""; position: absolute; left: 2px;
  top: 0.62em; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); }

/* ---- N · pricing: the price beside the name ---------------------------- */
.sp-tier-head { display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 4px 12px; margin-bottom: 6px; }
.sp-tier-head h3 { margin: 0; }
.sp-price--inline { margin: 0; gap: 8px; }
.sp-price--inline b { font-size: 30px; }
.sp-from { font-size: 15px; color: var(--muted); font-weight: 600; }

/* ---- O · the entries line is a link to the giveaway -------------------- */
.sp-tier-entries a { color: var(--orange-ink); text-decoration: underline;
  text-underline-offset: 3px; display: inline-flex; align-items: center;
  min-height: 44px; }

/* ---- P · the add-ons box ------------------------------------------------ */
.sp-addons { background: #fffeec; }

/* ---- Q · the giveaway: full-width burgundy, no box --------------------- */
.sp-give { background: #51000d; }
.sp-give .sp-give-in { background: none; border: 0; box-shadow: none;
  padding: 0; color: #fffeec; }
.sp-give h2 { color: #fffeec; }
.sp-give .sp-give-tease { color: #ffd9a8; }
.sp-body .sp-give .sp-give-earn { color: #fffeec; }
.sp-body .sp-give .sp-give-opens { color: #f6ead6; }
.sp-give .sp-free-entry { margin-top: 20px; }
.sp-give .sp-free-entry a, .sp-give .sp-give-rules a { color: #fffeec; }
/* UNLINKED while the rules link is off (launch-fix D4): the words keep the
   link's light colour, never the muted grey that vanishes on burgundy. */
.sp-give .sp-free-entry { color: #fffeec; }
.sp-final .sp-free-entry { color: #f2cdb4; }

/* ---- R · the reviews: no box, an icon to pause and play ---------------- */
.sp-rev { background: none; border: 0; box-shadow: none; }
.sp-rev-pause { display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; }
.sp-rev-pause svg { width: 20px; height: 20px; fill: currentColor; }
.sp-rev-pause .sp-i-play { display: none; }
.sp-rev-pause[aria-pressed="true"] .sp-i-pause { display: none; }
.sp-rev-pause[aria-pressed="true"] .sp-i-play { display: block; }

/* ---- S · the closing form ---------------------------------------------- */
.sp-final .sp-form--final { max-width: 460px; margin: 24px auto 0; }

/* ---- T · the guarantee's checkmark beside its heading ------------------ */
.sp-guarantee-h { display: flex; align-items: center; gap: 14px; }
.sp-guarantee-h .sp-check { margin: 0; }
@media (max-width: 600px) { .sp-stick-words > span { display: none; } }
/* Hero, screenshot pass: Reserve clear of the tiles (the site's p margin
   outranked it), and the column tightened so Reserve sits above the fold
   on a 1280x900 screen. */
.sp-body .sp-hero-cta { margin: 20px 0 0; }
.sp-hero .sp-eyebrow--hero { margin-bottom: 6px; }
.sp-hero h1 { margin-bottom: 6px; }
.sp-hero .sp-hero-when { margin: 6px 0 16px; }
.sp-hero-points { gap: 4px; margin-bottom: 18px; }
.sp-tile { padding: 10px 6px 8px; }
.sp-tile b { font-size: 30px; }
.sp-tile span { font-size: 13px; }
@media (max-width: 600px) { .sp-tile span { letter-spacing: 0.02em; } }
/* The hero's two kicker lines a shade darker than the brand orange-ink,
   for more contrast margin over the full-bleed photos (measured 3.4:1 at
   the worst frame before; Tom is colourblind). */
.sp-hero .sp-eyebrow--hero { color: #8f3e05; }
/* Screenshot pass 2: the site's p margin outranked these two. */
.sp-body .sp-give .sp-give-earn { margin: 0 auto 8px; }
.sp-body .sp-final .sp-free-entry { margin-top: 14px; }
/* J: the overview headline on Tom's two lines — wide enough on a desk for
   each to stay whole; a phone wraps them as it must. */
#overview .sp-wrap > h2 { max-width: none; }
@media (min-width: 1000px) { #overview .sp-wrap > h2 { font-size: 34px; } }

/* ---- Third batch, hero 1-6 (Tom, 20 Oct 2026): a TEXT PANEL over the
   full-bleed rotation. The photos fill the hero; the words sit in a cream
   panel on the left (1/3 wide, never under 480px so the name keeps two
   lines; 1/2 on a tablet; the whole width on a phone) whose cream fades out
   across a seam, so the right of the photo shows clean.

   --sp-veil is the panel's opacity, the series' own setting (75-95 %,
   default 80; drawn inline on the section). --sp-panel is its width and
   --sp-target where, across the hero, the cookie should land: the middle
   of the clear area. Each photo carries its cookie's position as --fx/--fy
   and is widened just enough to put that point on the target — the left
   of the photo, under the panel, is what gets cropped. */
.sp-hero--full {
  --sp-veil: .8;
  --sp-panel: max(33.333vw, 480px);
  --sp-seam: 140px;
  --sp-cream: 255, 254, 236;
  padding: 40px 0 44px;
  min-height: 600px;
  display: flex;
  align-items: center;
}
.sp-hero--full .sp-rot { overflow: hidden; }
.sp-hero--full .sp-rot img {
  inset: 0 auto 0 0;
  width: max(100%, calc(100% * 0.68 / var(--fx, .5)));
  object-position: calc(var(--fx, .5) * 100%) var(--fy, 50%);
}
.sp-hero--full .sp-hero-veil {
  background: linear-gradient(90deg,
    rgba(var(--sp-cream), var(--sp-veil)) 0,
    rgba(var(--sp-cream), var(--sp-veil)) calc(var(--sp-panel) - 40px),
    rgba(var(--sp-cream), 0) calc(var(--sp-panel) + var(--sp-seam)));
}
/* The words keep their own gutter inside the panel rather than lining up
   with the page's column: on a wide screen that column starts so far in
   that it left the panel a 233px strip (measured at 1600). */
.sp-hero--full { --sp-in: clamp(24px, 4vw, 72px);
  --sp-textw: calc(var(--sp-panel) - var(--sp-in) - 32px); }
.sp-hero--full .sp-wrap {
  max-width: none; width: 100%; margin: 0;
  padding-left: var(--sp-in); padding-right: 24px;
}
.sp-hero--full .sp-hero-grid { display: block; }
.sp-hero--full .sp-hero-text {
  width: var(--sp-textw);
  max-width: 520px; padding: 0;
}
/* The name and the kickers are sized FROM THE TEXT WIDTH, so the name is
   two lines and each kicker one at every width (measured 360-1600). */
.sp-hero--full h1 { font-size: max(28px, min(52px, calc(var(--sp-textw) / 9))); }
.sp-hero--full .sp-tiles-row { max-width: 400px; }
.sp-hero--full .sp-tiles-label,
.sp-hero--full .sp-hero-cta { text-align: center; }
/* Tablet: the panel takes half, and the photo slides further right. */
@media (max-width: 1099px) {
  .sp-hero--full { --sp-panel: 50vw; --sp-seam: 110px; }
  .sp-hero--full .sp-rot img {
    width: max(100%, calc(100% * 0.75 / var(--fx, .5))); }
}
/* Phone: the words over the photo, the whole width, a stronger cream (ten
   points above the setting, up to 95 %), and the photo centred on its
   cookie — nothing is "the clear side" at this width. */
@media (max-width: 759px) {
  .sp-hero--full { --sp-panel: 100vw; --sp-textw: calc(100vw - 40px);
    min-height: 0; padding: 30px 0 34px; }
  .sp-hero--full .sp-hero-veil {
    background: rgba(var(--sp-cream), min(.95, calc(var(--sp-veil) + .1))); }
  .sp-hero--full .sp-rot img { width: 100%; }
  .sp-hero--full .sp-wrap { padding-left: 20px; padding-right: 20px; }
  .sp-hero--full .sp-hero-text { width: auto; max-width: none; }
}
/* In the panel the two kicker lines stay on one line each: the panel is
   narrower than the old column, and the wide tracking wrapped them. */
.sp-hero--full .sp-eyebrow--hero {
  font-size: max(14px, min(22px, calc(var(--sp-textw) / 19.5)));
  letter-spacing: 0.1em; }
/* Over the photos the kickers take one more step of darkness than the
   split layout's #8f3e05: at the 75 % floor, over the darkest frame, that
   keeps them at 4.5:1 or better (measured, all four photos, 390-1280). */
.sp-hero--full .sp-eyebrow--hero { color: #7a3403; }

/* ---- Third batch, 7-10 and 16 (Tom, 20 Oct 2026) ---------------------- */
/* 7 · the locked header row gets 5px more air above and below. */
.sp-stick.is-locked .sp-stick-in { padding-top: 15px; padding-bottom: 15px; }
@media (max-width: 899px) {
  .sp-stick.is-locked .sp-stick-in { padding-top: 14px; padding-bottom: 14px; }
}
/* 8 · a soft shadow under the menu row, so it reads as lifted off the page. */
.sp-jumps { box-shadow: 0 6px 14px -8px rgba(42, 23, 18, 0.32); }
/* 10 · the early-bird band: one evenly spaced block, centred top to bottom.
   The site's paragraph margin (it outranks a single class) was adding space
   under the headline and the line, so the gaps were uneven. */
.sp-body .sp-strip--early .sp-strip-head,
.sp-body .sp-strip--early .sp-strip-words { margin: 0; }
.sp-strip--early .sp-strip-in { gap: 14px; padding: 26px 24px;
  justify-content: center; align-items: center; }
.sp-strip--early .sp-strip-cta { margin: 0; }
/* 16 · How it works: the bullet dots in brand orange. */
.sp-step-list li::before { background: var(--orange); }
/* 14 · the overview with its Christmas tree on the right. On a desk the
   words take the left column, aligned left so they sit against the tree;
   on a phone they stay centred and the tree sits small beneath them. */
.sp-ov-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: 48px; align-items: center; max-width: 1040px; margin-inline: auto; }
#overview .sp-ov-text > h2 { font-size: var(--t-2xl); text-wrap: balance;
  text-align: left; max-width: none; }
@media (min-width: 1000px) { #overview .sp-ov-text > h2 { font-size: 34px; } }
#overview .sp-ov-text > .sp-lede { max-width: 640px; text-align: left; }
#overview .sp-ov-text .sp-readmore { margin-inline: 0; max-width: 640px; }
.sp-ov-art svg { display: block; width: 100%; height: auto; }
@media (max-width: 899px) {
  .sp-ov-grid { grid-template-columns: 1fr; gap: 20px; }
  #overview .sp-ov-text > h2 { text-align: center; }
  #overview .sp-ov-text > .sp-lede { margin-inline: auto; }
  #overview .sp-ov-text .sp-readmore { margin-inline: auto; }
  .sp-ov-art { width: 170px; margin: 0 auto; }
}
@media (max-width: 719px) {
  #overview .sp-ov-text > h2 { font-size: var(--t-xl); } }
/* 15 · why-join: Tom's eight texts at about two lines each — a little more
   width per column so the longest ("Many techniques") does not take three. */
.sp-join-list { max-width: 1080px; gap: 26px 48px; }
.sp-body .sp-join-item p { text-wrap: pretty; }

/* ---- Third batch, pricing 17-19 (Tom, 20 Oct 2026) ---------------------
   17 · THE THREE CARDS SHARE THEIR ROWS: badge, name, price, the early-
   bird line, the body (tagline, points, entries), the button. Each card
   is a subgrid of the same six rows, so a two-line name or a missing badge on one card
   moves the row on all three, and the badge, name and price sit level.
   The single-classes card carries an invisible badge for the same space.
   18 · ONE GAP from name to price and from price to the early-bird line;
   the entries line sits under the last point by the same gap the first
   point sits under the tagline (the link's 44px target counted in). */
@media (min-width: 1081px) {
  .sp-tiers { align-items: stretch; row-gap: 0;
    grid-template-rows: repeat(6, auto); }
  .sp-tier { display: grid; grid-row: span 6; grid-template-rows: subgrid;
    row-gap: 0; height: auto; }
  .sp-tier-head { display: contents; }
}
.sp-tier-flag { justify-self: start; align-self: start; }
.sp-tier-flag--none { visibility: hidden; }
.sp-tier .sp-tier-head h3 { margin: 0 0 10px; }
.sp-tier .sp-tier-head .sp-price--inline { margin: 0 0 6px; }
.sp-body .sp-tier .sp-tier-tier { margin: 0 0 16px; }
.sp-body .sp-tier .sp-tier-sub { font-size: var(--t-xs); margin: 0 0 18px; }
.sp-tier-body { display: flex; flex-direction: column; }
.sp-tier .sp-tier-body ul { margin: 0; }
.sp-tier .sp-tier-body li:last-child { margin-bottom: 0; }
.sp-body .sp-tier .sp-tier-entries { margin: 10px 0 0; }
.sp-tier .sp-cta { align-self: end; margin-top: 22px; }
.sp-ast { color: var(--orange-ink); font-weight: 700; margin-left: 2px; }
/* 19 · the free-entry line, once, readable, under all three cards. */
.sp-body .sp-free-entry--tiers { margin: 22px auto 0; max-width: 640px;
  font-size: 16px; color: var(--ink); }
.sp-free-entry--tiers a { color: var(--ink); text-underline-offset: 3px; }
@media (max-width: 1080px) {
  .sp-tier { display: flex; flex-direction: column; }
  .sp-tier-head { display: block; }
}

/* ---- Third batch, add-ons 21-23 (Tom, 20 Oct 2026) ---------------------
   21 · each add-on card white inside the cream box; 22 · the price on its
   own line with the note beneath; 23 · a category pill in the top-right
   corner — in the flow, so a long name can never run under it. */
.sp-addon { background: #fff; border-color: #ecdcc6; display: flex;
  flex-direction: column; padding: 14px 16px 16px; }
.sp-addon-pill { align-self: flex-end; margin: -2px -4px 8px 0;
  font-family: var(--display); font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2;
  background: var(--maroon); color: #fff; border-radius: var(--r-pill);
  padding: 5px 11px; white-space: nowrap; }
.sp-body .sp-addon .sp-addon-priceline { margin: 8px 0 6px; font-size: 18px;
  line-height: 1.3; }
.sp-addon-priceline .sp-addon-price { font-size: 20px; }
.sp-addon-priceline .sp-was { font-size: 15px; margin-left: 6px; }
.sp-body .sp-addon .sp-addon-note { margin: 0; font-size: 15px; line-height: 1.55;
  color: var(--muted); }
.sp-body .sp-give .sp-give-opens b { font-weight: 800; color: #fffeec; }

/* ---- Third batch, reviews 24 (Tom, 20 Oct 2026) -------------------------
   ONE AT A TIME, A FADE, A BOX THAT NEVER CHANGES SIZE. With the script
   (.is-fade) the slides share one grid cell, so the box is as tall as the
   tallest; each review is held to seven lines and a longer one shows
   "Read more". With no script nothing here applies and every review reads
   in full on the rail, as before. */
.sp-rev-stage.is-fade .sp-rev-track { height: auto !important; }
.sp-rev-stage.is-fade .sp-rev-rail { display: grid; transform: none !important;
  transition: none; }
.sp-rev-stage.is-fade .sp-rev-slide { grid-area: 1 / 1; opacity: 0;
  visibility: hidden; transition: opacity 0.7s ease, visibility 0s 0.7s; }
.sp-rev-stage.is-fade .sp-rev-slide.is-on { opacity: 1; visibility: visible;
  transition: opacity 0.7s ease, visibility 0s; }
.sp-rev-stage.is-fade .sp-rev { display: flex; flex-direction: column;
  justify-content: center; height: 100%; box-sizing: border-box; }
.sp-rev-stage.is-fade .sp-rev-text { display: -webkit-box;
  -webkit-box-orient: vertical; -webkit-line-clamp: 7; line-clamp: 7;
  overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .sp-rev-stage.is-fade .sp-rev-slide { transition: none; } }
.sp-rev-more { align-self: center; margin: 4px 0 6px; min-height: 44px;
  padding: 8px 18px; border: 0; background: none; cursor: pointer;
  font-family: var(--display); font-weight: 700; font-size: 16px;
  color: var(--maroon); text-decoration: underline;
  text-underline-offset: 3px; }
.sp-rev-more:hover { color: var(--orange-ink); }
.sp-rev-more[hidden] { display: none; }
.sp-modal--rev .sp-modal-panel { max-width: 640px; }
.sp-rev--full { text-align: center; padding: 10px 6px 0; }
.sp-rev--full .sp-rev-text { display: block; overflow: visible; }

/* ---- 27 · the class panels' backdrop: the clean gray of the popup, not
   the blurred red (Tom, 20 Oct 2026). */
.sp-modal { background: rgba(38, 38, 38, 0.5); backdrop-filter: none;
  -webkit-backdrop-filter: none; }
/* The review popup is a card on a phone too, not the class panels'
   full-screen sheet: a short text in a full-height sheet reads as empty. */
@media (max-width: 719px) {
  .sp-modal--rev { padding: 18px; align-items: center; }
  .sp-modal--rev .sp-modal-panel { min-height: 0; border-radius: var(--r-l);
    padding: 52px 22px 26px; }
}
/* The older ".sp-addon span" rule (muted, small) outranked the pill and
   the price; these say which wins. The price in maroon, like the tiers'. */
.sp-addon .sp-addon-pill { color: #fff; font-size: 12px; }
.sp-addon .sp-addon-priceline .sp-addon-price { color: var(--maroon);
  font-size: 20px; }
.sp-addon .sp-addon-priceline .sp-was { font-size: 15px; }
/* One card to a row has nothing to line up with: no empty badge space. */
@media (max-width: 1080px) { .sp-tier-flag--none { display: none; } }

/* ---- Member space and the landing page (Tom, 20 Oct 2026) -------------- */
/* Sign in / My account, at the end of the sticky row. */
.sp-stick-end { display: flex; align-items: center; gap: 14px; }
.sp-account { display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px; border-radius: 999px;
  border: 1.5px solid var(--maroon); color: var(--maroon);
  font-family: var(--display); font-weight: 700; font-size: 15px;
  text-decoration: none; white-space: nowrap; background: #fff; }
.sp-account:hover { background: var(--maroon); color: #fff; }
.sp-account-icon { width: 18px; height: 18px; }
@media (min-width: 900px) {
  .sp-stick.is-locked .sp-stick-end { justify-self: end; }
}
@media (max-width: 600px) {
  .sp-account { width: 44px; padding: 0; justify-content: center; }
  .sp-account span { position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* "Finish your order": one calm line under the menu. */
.sp-resume { background: #fff6e2; border-bottom: 1px solid var(--line); }
.sp-resume .sp-wrap { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 10px 18px; padding-top: 10px;
  padding-bottom: 10px; }
.sp-body .sp-resume p { margin: 0; font-size: 16px; color: var(--ink); }
/* Billing & receipts in the class pages. */
.mc-bill-list { list-style: none; margin: 0 0 14px; padding: 0; }
.mc-bill-list li { display: grid; grid-template-columns: 1fr auto;
  gap: 2px 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mc-bill-what { font-weight: 600; color: var(--ink); }
.mc-bill-meta { grid-column: 1; font-size: 14px; color: #595959; }
.mc-bill-receipt { grid-column: 2; grid-row: 1 / span 2; align-self: center;
  min-height: 44px; display: inline-flex; align-items: center;
  font-weight: 700; color: var(--maroon); }
.mc-bill-note { background: #fff6e2; border-radius: 8px; padding: 8px 12px; }
.mc-btn { display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 18px; border-radius: 999px; background: var(--maroon);
  color: #fff; font-weight: 700; text-decoration: none; }
.mc-bill-manage small { display: block; margin-top: 6px; color: #595959; }

/* ---- Launch-fix A4 / A6 / A7 (Tom, 20 Oct 2026) -------------------------
   A4 · THE CLASS CARDS SHARE THEIR ROWS on a desk: photo, words, footer.
   Each card is a subgrid of the same three rows, so the footer row is as
   tall as the tallest in its row and the price, the allergen line under it
   and Learn more start level across every card, however long a summary or
   an allergen line is. Tops were already level and still are. */
@media (min-width: 720px) {
  .sp-cards { grid-auto-rows: auto; }
  .sp-card { display: grid; grid-row: span 3; grid-template-rows: subgrid;
    row-gap: 0; }
  .sp-card-foot { align-items: flex-start; }
}
/* A7 · the add-on cards the same way: pill, name, price line, note — the
   prices sit level however long a name is. */
@media (min-width: 720px) {
  .sp-addon-list { grid-auto-rows: auto; row-gap: 12px; }
  .sp-addon { display: grid; grid-row: span 4; grid-template-rows: subgrid;
    row-gap: 0; align-content: start; }
  .sp-addon-pill { justify-self: end; }
}
/* A6 · one line of space between the Stripe sentence and "Already bought
   it?", so they read as two blocks. */
.sp-body .sp-final .sp-already { margin-top: 26px; }
/* A3 · the header cart, between Reserve Spot and Sign in. Quiet (an outline
   basket) until something is chosen; then the count and running total. */
.sp-cart { display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; min-width: 44px; min-height: 44px; padding: 0 12px;
  border-radius: 999px; border: 1.5px solid var(--line); background: #fff;
  color: var(--maroon); text-decoration: none; font-family: var(--display);
  font-weight: 700; font-size: 15px; white-space: nowrap; }
.sp-cart:hover { border-color: var(--maroon); }
.sp-cart.has-items { border-color: var(--maroon); background: var(--maroon);
  color: #fff; }
.sp-cart-icon { width: 20px; height: 20px; flex: 0 0 auto; }
.sp-stick-end { gap: 10px; }
@media (max-width: 600px) {
  .sp-cart { padding: 0 10px; font-size: 14px; gap: 6px; }
  .sp-cart:not(.has-items) { padding: 0; width: 44px; }
}
/* On a phone there is no room for the total beside the name, Reserve and
   Sign in: the cart is the basket with a count bubble, and its label still
   says the count and the total to a screen reader. Reserve is a little
   tighter and the name a little smaller, so all four fit at 360px. */
.sp-cart-badge { display: none; }
@media (max-width: 600px) {
  .sp-cart { position: relative; padding: 0; width: 44px; }
  .sp-cart-n { display: none; }
  .sp-cart.has-items { background: #fff; color: var(--maroon); }
  .sp-cart-badge { display: flex; position: absolute; top: -4px; right: -4px;
    min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
    background: var(--maroon); color: #fff; font-size: 12px; font-weight: 800;
    align-items: center; justify-content: center; line-height: 1; }
  .sp-stick-in { gap: 8px; }
  .sp-stick-cta { padding: 10px 14px; font-size: 14px; }
  .sp-stick-name, .sp-stick-words { font-size: 15px; line-height: 1.2; }
  .sp-stick-end { gap: 8px; }
}

/* ---- small-fix batch (20 Oct 2026): the name in the phone header --------
   Full title on a desk; on a phone the short name, 15px, two lines at most,
   so Reserve Spot, the cart and Sign in keep their room. The selector
   carries .sp-stick-name because the 17px rule it amends does. */
.sp-stick-full, .sp-stick-short { font: inherit; color: inherit; }
.sp-stick-short { display: none; }
@media (max-width: 600px) {
  .sp-stick-full { display: none; }
  .sp-stick-short { display: block; }
  .sp-stick-name > .sp-stick-words { font-size: 15px; line-height: 1.2; }
  .sp-stick-short { display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; overflow: hidden; }
  /* Locked, the round logo took 56px of the name's ~120 and clipped it to
     "Christma… / Cookie…"; on a phone the name keeps the room instead. */
  .sp-stick.is-locked .sp-stick-logo { display: none; }
}

/* ---- the member area's "About the series" popup (Tom, 21 Oct 2026) --------
   The landing page framed inside the member area, for somebody already
   signed in: the overview only. The header's socials and its registration
   buttons (Join / My Classes, the cart, My account), every Reserve / Join
   button on the page and the floating bars are hidden — a signed-in reader
   pressing one would leave the popup for a checkout or their own classes. */
.sp-popup .sp-brand .socials, .sp-popup .sp-brand ul.socials,
.sp-popup .sp-stick-cta, .sp-popup .sp-stick-end, .sp-popup .sp-cta,
.sp-popup .sp-float, .sp-popup .sp-bar, .sp-popup .sp-resume,
.sp-popup [data-sp-exit] { display: none !important; }