/* ==========================================================================
   Metabolic Balance — webinar landing page
   Tokens: contrast ratios are measured against --paper unless noted.
   ========================================================================== */
:root {
  color-scheme: light;

  /* Surfaces */
  --paper: #f8f6f0;        /* off-white page */
  --card: #ffffff;
  --sage-50: #eef2ea;      /* tinted section */
  --sage-200: #dce5d3;     /* borders, chips */
  --forest: #1e3a2a;       /* headlines, dark sections — 11.6:1 */
  --forest-2: #2b4d38;

  /* Content */
  --ink: #24332a;          /* body — 11.9:1 */
  --ink-2: #4a5a4f;        /* secondary — 6.8:1 */
  --leaf: #3f7a4e;         /* icons, checks — 4.7:1 */
  --on-dark: #f3f1e8;      /* text on forest — 10.9:1 */
  --on-dark-2: #c5d3c4;    /* secondary on forest — 7.4:1 */

  /* CTAs: strongest green. White text on --cta = 6.5:1, on --cta-hover = 8.5:1 */
  --cta: #1f6b45;
  --cta-hover: #18573a;

  /* Accent: calm blue/teal for the giveaway, highlights and badges */
  --teal: #1d6a84;         /* 5.6:1; white on teal = 6.1:1 */
  --teal-700: #14536a;     /* text on teal-50 — 7.4:1 */
  --teal-50: #e7f2f5;
  --teal-200: #b9dbe5;
  --mint: #9fd8c4;         /* highlight text on forest — 7.7:1 */

  --danger: #a5341f;       /* 6.2:1 on white */

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --r-sm: 12px;
  --r: 20px;
  --r-lg: 28px;
  --shadow: 0 1px 2px rgba(30, 58, 42, .06), 0 8px 24px rgba(30, 58, 42, .07);
  --gutter: 20px;
  --max: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans); /* 17px */
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--forest); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); color: var(--forest); font-weight: 500; line-height: 1.12; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
svg.i { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--forest); color: var(--on-dark); padding: 10px 16px; border-radius: 10px; z-index: 100; }
.skip:focus { top: 12px; }

/* Placeholder copy the client still needs to supply — easy to spot, easy to delete. */
.ph { background: none; color: inherit; border-bottom: 1.5px dashed var(--teal); }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 72px 0; }
.section--tint { background: var(--sage-50); }
.section--dark { background: var(--forest); color: var(--on-dark); }
.section--dark h2 { color: var(--on-dark); }
.section-head { max-width: 680px; margin-bottom: 36px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
h2 { font-size: clamp(1.875rem, 5vw, 2.75rem); }
.lede { font-size: 1.125rem; color: var(--ink-2); margin-top: 14px; }
.section--dark .lede { color: var(--on-dark-2); }

.eyebrow {
  font: 600 .8125rem/1.3 var(--sans); /* 13px, uppercase + bold */
  letter-spacing: .1em; text-transform: uppercase; color: var(--leaf);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 14px 28px; border-radius: 999px; border: 0;
  font: 600 1.0625rem/1.2 var(--sans); text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.btn-primary { background: var(--cta); color: #fff; box-shadow: 0 6px 18px rgba(31, 107, 69, .3); }
.btn-primary:hover { background: var(--cta-hover); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary svg.i { width: 20px; height: 20px; stroke-width: 2.25; }
.btn-block { width: 100%; }
.cta-row { margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.cta-note { font-size: .9375rem; color: var(--ink-2); }

/* ---------- Header ---------- */
.site-header { padding: 18px 0; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--forest); }
.logo-img { height: 40px; width: auto; }
.site-footer .logo-img { height: 36px; }
@media (min-width: 900px) { .site-header .logo-img { height: 46px; } }
/* Shown on phones too, so a registration button is on screen from the very first view. */
.header-cta { display: inline-flex; min-height: 44px; padding: 10px 18px; font-size: .9375rem; box-shadow: none; }

/* ---------- Hero ---------- */
.hero { padding: 8px 0 0; }
.hero-grid { display: grid; gap: 32px; }
.hero-media { position: relative; }
.photo {
  position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5;
  background: linear-gradient(160deg, #cfdcc4 0%, #b6c9a8 55%, #9db58f 100%);
  display: grid; place-items: center; color: var(--forest);
}
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo-ph { text-align: center; font-size: .9375rem; padding: 24px; }
.photo-ph strong { display: block; font: 500 1.5rem/1.2 var(--serif); margin-bottom: 4px; }
.hero .photo { aspect-ratio: 5 / 4; }
/* Keep the two hosts in frame: they stand right of center. */
.hero-photo { object-position: 85% 40%; }

.hero-copy { padding-top: 4px; }
/* The title is long, so it scales down further on phones to keep the first button near the top. */
.hero h1 { font-size: clamp(1.875rem, 7.4vw, 3.25rem); }
.hero .lede { margin-top: 18px; max-width: 34em; }
.hero-actions { margin-top: 30px; display: grid; gap: 20px; justify-items: start; }
/* Scrolling strip along the bottom of the hero. Two identical groups slide left by half
   the track's width, so the loop is seamless. Mint bonus text on forest = 7.7:1. */
.ticker { margin-top: 56px; background: var(--forest); color: var(--on-dark); overflow: hidden; }
.ticker-track { display: flex; width: max-content; animation: ticker 45s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-group { display: flex; align-items: center; flex: none; }
.ticker-item {
  display: inline-flex; align-items: center; gap: 10px; padding: 17px 0; white-space: nowrap;
  font: 600 .875rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
}
.ticker-item--bonus { color: var(--mint); }
.ticker-item svg.i { width: 18px; height: 18px; }
.ticker-sep { margin: 0 24px; width: 5px; height: 5px; border-radius: 50%; background: var(--on-dark-2); flex: none; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Countdown ---------- */
.countdown { margin-top: 28px; }
.countdown-label { font-size: .9375rem; color: var(--ink-2); margin-bottom: 10px; }
.countdown-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 420px; }
.cd-cell {
  background: var(--card); border: 1px solid var(--sage-200); border-radius: var(--r-sm);
  padding: 12px 4px 10px; text-align: center;
}
.cd-num { display: block; font: 500 1.75rem/1 var(--mono); color: var(--forest); font-variant-numeric: tabular-nums; }
.cd-unit { display: block; margin-top: 6px; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.countdown.is-live .countdown-grid { display: none; }
.section--dark .cd-cell { background: var(--forest-2); border-color: rgba(243, 241, 232, .14); }
.section--dark .cd-num { color: var(--on-dark); }
.section--dark .cd-unit, .section--dark .countdown-label { color: var(--on-dark-2); }

/* ---------- Learn cards ---------- */
.cards { display: grid; gap: 14px; }
.card {
  background: var(--card); border-radius: var(--r); padding: 24px; box-shadow: var(--shadow);
  display: flex; gap: 16px; align-items: flex-start;
}
.card-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--sage-50); color: var(--leaf); display: grid; place-items: center; flex: none; }
.card h3 { font: 600 1.0625rem/1.4 var(--sans); color: var(--ink); }

/* ---------- Who it's for ---------- */
.who-grid { display: grid; gap: 32px; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.checklist li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--sage-200); }
.checklist li:last-child { border-bottom: 0; }
.check { width: 28px; height: 28px; border-radius: 50%; background: var(--leaf); color: #fff; display: grid; place-items: center; flex: none; margin-top: 1px; }
.check svg.i { width: 16px; height: 16px; stroke-width: 2.75; }
.pull {
  font: italic 500 1.5rem/1.35 var(--serif); color: var(--forest);
  border-left: 3px solid var(--leaf); padding-left: 20px;
}

/* ---------- Giveaway ---------- */
.gift {
  position: relative; background: var(--teal-50); border: 2px solid var(--teal);
  border-radius: var(--r-lg); padding: 32px 22px; overflow: hidden;
}
.gift::before { /* soft ribbon glow, decorative */
  content: ""; position: absolute; width: 320px; height: 320px; right: -120px; top: -140px;
  background: radial-gradient(circle, rgba(29, 106, 132, .22), transparent 70%); pointer-events: none;
}
.gift-icon { width: 60px; height: 60px; border-radius: 18px; background: var(--teal); color: #fff; display: grid; place-items: center; margin-bottom: 18px; }
.gift-icon svg.i { width: 30px; height: 30px; }
.gift-copy { position: relative; }
.gift-label {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--teal-700); /* 7.4:1 on teal-50 */
  font: 600 .8125rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
}
.gift-label svg.i { width: 20px; height: 20px; }
/* The $250 sits in the heading at the same size, picked out in the bonus color. */
.gift-price { color: var(--teal-700); font-weight: 600; white-space: nowrap; }
.gift h2 { font-size: clamp(1.625rem, 4.5vw, 2.25rem); }
.gift-body { margin-top: 12px; max-width: 560px; color: var(--ink); }
.gift-note { margin-top: 16px; display: flex; gap: 8px; align-items: center; font-size: .9375rem; font-weight: 600; color: var(--forest); }
.gift-note svg.i { width: 20px; height: 20px; flex: none; }
.gift .btn { margin-top: 24px; }

/* ---------- Host ---------- */
.host-grid { display: grid; gap: 32px; align-items: center; }
.host .photo { max-width: 440px; }
/* Melanie's portrait arrives as a circular cut-out (transparent corners), so the frame is round too. */
.host .photo--round {
  aspect-ratio: 1; max-width: 340px; width: 100%; margin: 0 auto; border-radius: 50%; background: none;
  box-shadow: 0 0 0 8px var(--card), 0 0 0 9px var(--sage-200), var(--shadow);
}
.host-bio { margin-top: 18px; display: grid; gap: 14px; color: var(--ink-2); }
.creds { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.creds li { background: var(--card); border: 1px solid var(--sage-200); border-radius: var(--r-sm); padding: 14px 12px; text-align: center; }
.creds strong { display: block; font: 500 1.5rem/1.1 var(--serif); color: var(--forest); }
.creds span { display: block; margin-top: 4px; font-size: .8125rem; color: var(--ink-2); line-height: 1.35; }

/* Guest speakers */
.speakers { margin-top: 56px; }
.speakers-title { font: 500 1.5rem/1.2 var(--serif); color: var(--forest); margin-bottom: 16px; }
.speaker-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.speaker { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 22px; display: flex; gap: 18px; align-items: flex-start; }
.speaker-photo {
  width: 88px; height: 88px; border-radius: 50%; flex: none; overflow: hidden;
  background: linear-gradient(160deg, #cfdcc4, #9db58f); display: grid; place-items: center;
  font-size: .75rem; color: var(--forest); text-align: center;
}
.speaker-photo img { width: 100%; height: 100%; object-fit: cover; }
.speaker-name { font: 500 1.375rem/1.2 var(--serif); color: var(--forest); margin: 0; }
.speaker-role { margin-top: 4px; font-size: .9375rem; font-weight: 500; color: var(--leaf); }
.speaker-bio { margin-top: 10px; font-size: .9375rem; color: var(--ink-2); }
@media (min-width: 900px) {
  .speaker-list { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .speaker { padding: 26px; }
  .speaker-photo { width: 104px; height: 104px; }
}

/* ---------- Testimonials ---------- */
/* Bento grid: every tile is exactly as tall as its content, and tiles pack together like a mosaic.
   site.js measures each tile and sets its row span (.is-masonry); without JS it is a plain grid. */
.bento { display: grid; grid-template-columns: 1fr; column-gap: 16px; align-items: start; }
.bento > * { margin-bottom: 16px; }
.bento.is-masonry { grid-auto-rows: 4px; grid-auto-flow: row dense; }

.t-card {
  background: var(--card); border-radius: var(--r); padding: 26px 24px 22px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 18px; margin: 0 0 16px;
}
.t-card blockquote { margin: 0; font: 400 1.0625rem/1.55 var(--serif); color: var(--ink); }
.t-card blockquote::before { content: "\201C"; display: block; font: 500 2.75rem/0.6 var(--serif); color: var(--leaf); margin-bottom: 8px; }
.t-person { display: flex; gap: 12px; align-items: center; }
.t-person strong { display: block; font-weight: 600; font-size: 1rem; }

/* Short, punchy quotes get bigger type so the tile reads like a pull quote. */
.t-card--pull blockquote { font-size: 1.375rem; line-height: 1.4; }

/* Stat tile: the big number is the quote's own figure, attributed to the coach who said it. */
/* This tile is often stretched to even out the grid, so it is built to look full at any height:
   a big number up top, the quote in the same serif as the other cards, a short divider, and any
   extra height shared evenly above the quote and above the name (two auto margins). */
.t-card--stat {
  background: radial-gradient(circle at 100% 0, rgba(159, 216, 196, .45), transparent 55%), var(--sage-50);
  box-shadow: none; border: 1px solid var(--sage-200); padding-top: 30px;
}
.t-stat { font: 500 clamp(4.5rem, 7vw, 5.75rem)/0.9 var(--serif); color: var(--forest); letter-spacing: -.03em; }
.t-stat-label { font-weight: 600; color: var(--leaf); margin-top: -4px; letter-spacing: .08em; text-transform: uppercase; font-size: .8125rem; }
.t-card--stat blockquote { margin-top: auto; padding-top: 18px; border-top: 2px solid var(--sage-200); font-size: 1.1875rem; line-height: 1.5; }
.t-card--stat blockquote::before { display: none; }
.t-card--stat .t-person { margin-top: auto; }

/* CTA tile closes the grid and leads back to registration. */
.t-card--cta { background: var(--forest); color: var(--on-dark); box-shadow: none; justify-content: space-between; }
.t-card--cta h3 { color: var(--on-dark); font-size: 1.625rem; line-height: 1.2; }
.t-card--cta p { color: var(--on-dark-2); font-size: .9375rem; }
.t-card--cta .btn { align-self: start; }
/* When no column has room, the CTA runs as a full-width banner under the grid (set by site.js). */
.t-card--cta.is-banner { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 32px; padding: 28px 32px; }
.t-card--cta.is-banner p { flex: 1 1 220px; }
.t-card--cta.is-banner .btn { align-self: center; }


@media (min-width: 640px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .t-wide { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .bento { grid-template-columns: repeat(3, 1fr); }
  /* At three columns a two-wide tile leaves one column with a single card under it, which then
     has to stretch a long way. Keeping every tile one column wide lets them balance. */
  .t-wide { grid-column: auto; }
}
.avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--sage-200); color: var(--forest); display: grid; place-items: center; font-weight: 600; flex: none; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.t-person strong { display: block; font-weight: 600; }
.t-person span { font-size: .9375rem; color: var(--ink-2); }

/* ---------- Black Friday offer: a simple, centered statement ---------- */
.offer-inner { max-width: 720px; text-align: center; }
.offer .eyebrow { color: var(--mint); } /* 7.7:1 on forest */
.offer h2 { margin-top: 12px; }
.offer .btn { margin-top: 28px; }

/* ---------- Hero date, shown above the headline ----------
   Bold and clear, but a light chip rather than a dark block, so the headline stays the first thing you read. */
.hero-date {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px;
  padding: 9px 18px 9px 14px; border-radius: 999px; background: var(--sage-50); border: 1px solid var(--sage-200);
  color: var(--forest); font: 600 clamp(.9375rem, 3.4vw, 1.0625rem)/1.3 var(--sans);
}
.hero-date svg.i { width: 20px; height: 20px; color: var(--leaf); }
.hero-date .sep { color: var(--leaf); }
.hero-date [data-webinar-date], .hero-date [data-webinar-time] { white-space: nowrap; } /* wrap between date and time, never inside */
.live-line {
  display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; font-weight: 500; color: var(--teal-700);
}
.live-line svg.i { width: 20px; height: 20px; margin-top: 1px; }
@media (min-width: 900px) {
  .hero-date { font-size: 1.125rem; padding: 10px 20px 10px 16px; margin-bottom: 24px; }
  .hero-date svg.i { width: 22px; height: 22px; }
}
#register .live-line { margin-top: 20px; justify-content: center; text-align: left; }

/* ---------- Host credit beside the hero button: quiet, one line ---------- */
.host-line { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink-2); font-size: .9375rem; line-height: 1.35; }
.host-line img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--sage-200); }
.host-line strong { color: var(--forest); font-weight: 600; }
.host-line small { display: block; font-size: .8125rem; color: var(--ink-2); }
.host-line:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.host-role { margin-top: 10px; font-weight: 600; color: var(--leaf); }

/* ---------- Bloodwork access band, right under the hero ---------- */
.lab { padding: 40px 0 8px; }
.lab-card {
  display: grid; gap: 18px; background: var(--teal-50); border: 2px solid var(--teal);
  border-radius: var(--r-lg); padding: 28px 22px;
}
.lab-icon { width: 60px; height: 60px; border-radius: 18px; background: var(--teal); color: #fff; display: grid; place-items: center; }
.lab-icon svg.i { width: 30px; height: 30px; }
.lab .eyebrow { color: var(--teal-700); }
.lab h2 { margin-top: 8px; font-size: clamp(1.625rem, 4.5vw, 2.25rem); }
.lab-body { margin-top: 12px; max-width: 720px; color: var(--ink); font-size: 1.0625rem; }
.lab-note { margin-top: 12px; font-size: .9375rem; color: var(--teal-700); }
@media (min-width: 640px) {
  .lab-card { grid-template-columns: auto 1fr; gap: 24px; padding: 36px 40px; }
}

/* ---------- Business Growth Marketing Kit: contents + preview ---------- */
.gift--kit { display: grid; gap: 36px; align-items: center; }
.kit-title { margin-top: 22px; font: 600 .8125rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--teal-700); }
.kit-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.kit-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink); font-size: 1rem; }
.kit-list svg.i { width: 20px; height: 20px; margin-top: 2px; color: var(--teal); stroke-width: 2.5; }
.kit-list strong { color: var(--forest); font-weight: 600; }
/* Mockup: a tablet showing the kit's cover and contents, a phone showing a sample social post,
   and a "$250 value" sticker. Decorative. Every size inside is in cqw (a % of the mockup's width),
   so the whole scene scales as one piece from phone to desktop. */
.kit-mock {
  position: relative; width: 100%; max-width: 270px; aspect-ratio: 1 / 1.08; justify-self: center;
  margin: 8px 0 4px; container-type: inline-size;
}
@media (min-width: 640px) { .kit-mock { max-width: 340px; } }
.mock-tablet, .mock-phone { position: absolute; background: #1d2b23; box-shadow: 0 18px 40px rgba(20, 83, 106, .22); }
.mock-tablet {
  left: 2cqw; top: 6cqw; width: 68cqw; aspect-ratio: 3 / 4; padding: 2.6cqw; border-radius: 6cqw;
  rotate: -4deg; animation: mock-float 6s ease-in-out infinite;
}
.mock-screen {
  position: relative; height: 100%; overflow: hidden; border-radius: 3.6cqw; background: var(--paper);
  padding: 7cqw 6cqw; display: flex; flex-direction: column;
}
.mock-leaf { position: absolute; border-radius: 50%; pointer-events: none; }
.mock-leaf--a { width: 36cqw; height: 36cqw; right: -13cqw; top: -13cqw; background: radial-gradient(circle, rgba(159, 216, 196, .9), rgba(159, 216, 196, 0) 70%); }
.mock-leaf--b { width: 32cqw; height: 32cqw; left: -12cqw; bottom: -12cqw; background: radial-gradient(circle, rgba(29, 106, 132, .22), rgba(29, 106, 132, 0) 70%); }
.mock-logo { position: relative; width: 28cqw; height: auto; }
.mock-eyebrow { position: relative; margin-top: 7cqw; font: 600 2.5cqw/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--teal-700); }
.mock-title { position: relative; margin-top: 1.6cqw; font: 500 6.4cqw/1.08 var(--serif); color: var(--forest); }
.mock-toc { position: relative; list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 1.8cqw; }
.mock-toc li {
  display: flex; align-items: baseline; gap: 2.4cqw; padding-bottom: 1.8cqw; border-bottom: 1px solid var(--sage-200);
  font: 500 3cqw/1.2 var(--sans); color: var(--ink);
}
.mock-toc b { font: 500 2.5cqw/1 var(--mono); color: var(--teal); }

.mock-phone {
  right: 1cqw; bottom: 0; width: 37cqw; aspect-ratio: 9 / 18.5; padding: 1.8cqw; border-radius: 7cqw; z-index: 2;
  rotate: 6deg; animation: mock-float 6s ease-in-out -3s infinite;
}
.mock-phone-screen {
  height: 100%; overflow: hidden; border-radius: 5.4cqw; background: #fff;
  padding: 4cqw 2.6cqw; display: flex; flex-direction: column; gap: 2.2cqw;
}
.mock-post-head { display: flex; align-items: center; gap: 1.8cqw; }
.mock-post-head i { width: 5.6cqw; height: 5.6cqw; border-radius: 50%; background: linear-gradient(135deg, var(--mint), var(--leaf)); }
.mock-post-head span { width: 14cqw; height: 1.8cqw; border-radius: 1cqw; background: var(--sage-200); }
.mock-post-img {
  aspect-ratio: 1; border-radius: 2.6cqw; padding: 2.8cqw; display: flex; align-items: flex-end;
  background: radial-gradient(circle at 75% 20%, rgba(159, 216, 196, .55), transparent 45%), linear-gradient(150deg, var(--leaf), var(--forest));
}
.mock-post-img span { font: 500 3.5cqw/1.15 var(--serif); color: #fff; }
.mock-post-actions { display: flex; align-items: center; gap: 1.8cqw; }
.mock-post-actions svg.i { width: 4.4cqw; height: 4.4cqw; color: #d1495b; fill: #d1495b; stroke-width: 1.5; }
.mock-post-actions span { width: 10cqw; height: 1.8cqw; border-radius: 1cqw; background: var(--sage-200); }
.mock-line { display: block; height: 1.7cqw; border-radius: 1cqw; background: var(--sage-50); }
.mock-line--short { width: 60%; }

.mock-sticker {
  position: absolute; top: 0; right: 10cqw; z-index: 3; width: 23cqw; height: 23cqw; border-radius: 50%;
  background: var(--mint); color: var(--forest); display: grid; place-content: center; text-align: center;
  rotate: 12deg; box-shadow: 0 8px 20px rgba(20, 83, 106, .2), inset 0 0 0 1.2cqw rgba(255, 255, 255, .45);
  animation: sticker-bob 4s ease-in-out infinite;
}
.mock-sticker strong { font: 600 6.6cqw/1 var(--serif); }
.mock-sticker span { margin-top: .6cqw; font: 600 2.6cqw/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }

@keyframes mock-float { 50% { translate: 0 -8px; } }
@keyframes sticker-bob { 50% { rotate: 4deg; scale: 1.05; } }
@media (hover: hover) {
  .mock-phone { transition: rotate .4s ease; }
  .gift--kit:hover .mock-phone { rotate: 2deg; }
}
@media (min-width: 900px) {
  .gift--kit { grid-template-columns: 1.25fr .75fr; gap: 48px; }
  .kit-mock { justify-self: end; }
}

/* ---------- Register ---------- */
.register-card { background: var(--card); color: var(--ink); border-radius: var(--r-lg); padding: 28px 22px; box-shadow: var(--shadow); }
.register-grid { display: grid; gap: 36px; align-items: center; }
.event-meta { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.event-meta li { display: flex; gap: 12px; align-items: center; color: var(--ink); font-weight: 500; }
.event-meta svg.i { color: var(--leaf); }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font-weight: 600; font-size: .9375rem; }
.field input {
  min-height: 52px; padding: 12px 16px; border-radius: var(--r-sm); border: 1.5px solid #b9c6b4;
  font: 400 1.0625rem/1.3 var(--sans); color: var(--ink); background: #fff; width: 100%;
}
.field input:focus { outline: 3px solid rgba(63, 122, 78, .35); outline-offset: 0; border-color: var(--leaf); }
.field input[aria-invalid="true"] { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: .875rem; font-weight: 500; min-height: 0; }
.field-error:empty { display: none; }
.form-micro { margin-top: 12px; text-align: center; font-size: .875rem; color: var(--ink-2); }
.form-status { margin-top: 10px; text-align: center; font-size: .9375rem; color: var(--danger); font-weight: 500; }
.form-status:empty { display: none; }
.register-card h3 { font: 500 1.625rem/1.2 var(--serif); color: var(--forest); margin-bottom: 4px; }
.register-card .sub { color: var(--ink-2); font-size: .9375rem; margin-bottom: 20px; }

/* ---------- Registration: centered heading, date and countdown above the form ---------- */
#register { padding-bottom: 36px; text-align: center; }
#register .wrap > div { max-width: 680px; margin: 0 auto; }
/* The list stays centered as a block, but its lines read left-aligned so wrapped details stay tidy. */
#register .event-meta { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; text-align: left; }
#register .event-meta li { align-items: flex-start; }
#register .event-meta svg.i { margin-top: 1px; }
#register .countdown-grid { margin: 0 auto; }

/* ---------- Flodesk form, restyled to match the page ----------
   Scoped to the container ID so these rules outrank Flodesk's own without !important.
   Flodesk still renders, validates and submits the form; only its look changes.
   Never set display/position on .__field: Flodesk hides spam-trap fields with inline styles. */
#fd-form-6ad55ebc5a6fe02857a82e6b { background: var(--sage-50); padding: 0 var(--gutter) 72px; }
#fd-form-6ad55ebc5a6fe02857a82e6b .ff-6ad55ebc5a6fe02857a82e6b__container {
  max-width: 480px; background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow);
}
#fd-form-6ad55ebc5a6fe02857a82e6b .ff-6ad55ebc5a6fe02857a82e6b__form {
  padding: 28px 22px; font: 400 1rem/1.5 var(--sans); color: var(--ink); letter-spacing: 0;
}
#fd-form-6ad55ebc5a6fe02857a82e6b .ff-6ad55ebc5a6fe02857a82e6b__title {
  margin: 0 0 4px; font: 500 1.625rem/1.2 var(--serif); color: var(--forest); letter-spacing: -.01em;
}
#fd-form-6ad55ebc5a6fe02857a82e6b .ff-6ad55ebc5a6fe02857a82e6b__subtitle { margin: 0 0 20px; font-size: .9375rem; color: var(--ink-2); }
#fd-form-6ad55ebc5a6fe02857a82e6b .ff-6ad55ebc5a6fe02857a82e6b__fields { margin: 0 0 16px; }
/* Visible label above each field instead of Flodesk's in-box label that vanishes while typing. */
#fd-form-6ad55ebc5a6fe02857a82e6b .ff-6ad55ebc5a6fe02857a82e6b__field {
  margin-bottom: 16px; display: flex; flex-direction: column; font: 400 1rem/1.4 var(--sans); letter-spacing: 0;
}
#fd-form-6ad55ebc5a6fe02857a82e6b .ff-6ad55ebc5a6fe02857a82e6b__label,
#fd-form-6ad55ebc5a6fe02857a82e6b .ff-6ad55ebc5a6fe02857a82e6b__control:not(:placeholder-shown) + .ff-6ad55ebc5a6fe02857a82e6b__label {
  position: static; order: -1; opacity: 1; padding: 0; border: 0; margin: 0 0 6px; white-space: normal;
  font: 600 .9375rem/1.3 var(--sans); color: var(--ink); text-transform: none; letter-spacing: 0;
}
#fd-form-6ad55ebc5a6fe02857a82e6b .ff-6ad55ebc5a6fe02857a82e6b__control {
  height: 52px; padding: 12px 16px; border: 1.5px solid #b9c6b4; border-radius: var(--r-sm); background: #fff;
  font: 400 1.0625rem/1.3 var(--sans); color: var(--ink); text-transform: none; letter-spacing: 0;
}
#fd-form-6ad55ebc5a6fe02857a82e6b .ff-6ad55ebc5a6fe02857a82e6b__control:focus {
  border-color: var(--leaf); box-shadow: 0 0 0 3px rgba(63, 122, 78, .35);
}
#fd-form-6ad55ebc5a6fe02857a82e6b .fd-form-feedback { margin-top: 6px; font-size: .875rem; font-weight: 500; color: var(--danger); }
#fd-form-6ad55ebc5a6fe02857a82e6b .ff-6ad55ebc5a6fe02857a82e6b__button {
  min-height: 54px; padding: 14px 28px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--cta); color: #fff; box-shadow: 0 6px 18px rgba(31, 107, 69, .3);
  font: 600 1.0625rem/1.2 var(--sans); text-transform: none; letter-spacing: 0; transition: background-color .15s ease;
}
#fd-form-6ad55ebc5a6fe02857a82e6b .ff-6ad55ebc5a6fe02857a82e6b__button:hover { background: var(--cta-hover); }
#fd-form-6ad55ebc5a6fe02857a82e6b .ff-6ad55ebc5a6fe02857a82e6b__button:focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; }
#fd-form-6ad55ebc5a6fe02857a82e6b .ff-6ad55ebc5a6fe02857a82e6b__footer::after {
  content: "Free. No credit card required. We respect your privacy.";
  display: block; margin-top: 12px; font-size: .875rem; color: var(--ink-2);
}
#fd-form-6ad55ebc5a6fe02857a82e6b .ff-6ad55ebc5a6fe02857a82e6b__success-message {
  font: 500 1.375rem/1.35 var(--serif); color: var(--forest); letter-spacing: 0;
}
@media (min-width: 640px) {
  #fd-form-6ad55ebc5a6fe02857a82e6b .ff-6ad55ebc5a6fe02857a82e6b__form { padding: 36px 32px; }
}
/* Desktop: heading, date and countdown on the left, the form on the right.
   <main> becomes a two-column grid where every other section still spans the full width, so the
   form sits beside the registration section without being wrapped or moved inside it.
   The side padding lines both halves up with the page's centered --max container. */
@media (min-width: 900px) {
  main { display: grid; grid-template-columns: 1fr 1fr; }
  main > * { grid-column: 1 / -1; min-width: 0; }
  #register {
    grid-column: 1; display: flex; align-items: center; text-align: left;
    padding: 104px 36px 104px max(var(--gutter), calc(100% - var(--max) / 2 + var(--gutter)));
  }
  #register .wrap { max-width: none; margin: 0; padding: 0; }
  #register .wrap > div { max-width: 560px; margin: 0; }
  #register .event-meta { justify-items: start; margin-left: 0; }
  #register .countdown-grid { margin: 0; }
  #fd-form-6ad55ebc5a6fe02857a82e6b {
    grid-column: 2; display: flex; align-items: center; justify-content: flex-end;
    padding: 104px max(var(--gutter), calc(100% - var(--max) / 2 + var(--gutter))) 104px 36px;
  }
  #fd-form-6ad55ebc5a6fe02857a82e6b > [data-ff-el="root"] { flex: 0 1 480px; }
}

/* ---------- Footer ---------- */
.site-footer { padding: 48px 0 40px; font-size: .9375rem; color: var(--ink-2); }
.footer-grid { display: grid; gap: 24px; }
.footer-links, .social { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.footer-links a, .social a { display: inline-block; padding: 10px 0; color: var(--ink-2); }
.footer-links a:hover, .social a:hover { color: var(--forest); }
.footer-legal { font-size: .8125rem; border-top: 1px solid var(--sage-200); padding-top: 20px; margin-top: 8px; }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: rgba(248, 246, 240, .96); border-top: 1px solid var(--sage-200);
  box-shadow: 0 -8px 24px rgba(30, 58, 42, .08);
  display: flex; align-items: center; gap: 12px;
  transform: translateY(110%); visibility: hidden; transition: transform .25s ease, visibility .25s;
}
.sticky-cta.is-visible { transform: none; visibility: visible; }
.sticky-cta .btn { flex: 1; min-height: 50px; padding: 12px 18px; }
.sticky-meta { font-size: .8125rem; line-height: 1.3; color: var(--ink-2); }
.sticky-meta strong { display: block; color: var(--forest); font-size: .9375rem; font-variant-numeric: tabular-nums; }
body.has-sticky { padding-bottom: 84px; }

/* ---------- Thank-you page ----------
   One centered column: confirmation, the event "ticket", the live bonus, then next steps. */
.ty { padding: 16px 0 80px; }
.ty-wrap { max-width: 760px; display: grid; gap: 28px; }
.ty-hero { text-align: center; padding-top: 8px; }
.ty-hero .eyebrow { margin-top: 22px; }
.ty h1 { margin-top: 6px; font-size: clamp(2.75rem, 10vw, 4rem); }
.ty-hero .lede { max-width: 34em; margin: 14px auto 0; }

/* Animated check. Every resting style is the finished state, so with reduced motion
   (all animations off) it simply shows a completed check. */
.ty-check { position: relative; width: 88px; height: 88px; margin: 0 auto; animation: check-pop .55s cubic-bezier(.34, 1.56, .64, 1) both; }
.ty-check svg { position: relative; z-index: 1; width: 100%; height: 100%; display: block; }
.ty-check-disc { fill: var(--leaf); }
.ty-check-mark {
  fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 34; stroke-dashoffset: 0; animation: check-draw .45s ease-out .45s backwards;
}
.ty-ring {
  position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--mint); opacity: 0;
  animation: check-ring 3.2s ease-out 1s infinite;
}
.ty-ring--late { animation-delay: 1.6s; }
.ty-sparks { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.ty-sparks i {
  position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; opacity: 0;
  background: var(--mint); transform: rotate(var(--a)) translateY(-62px) scale(.4);
  animation: check-spark .7s ease-out .8s backwards;
}
.ty-sparks i:nth-child(even) { background: var(--teal); }
@keyframes check-pop { from { transform: scale(.4); opacity: 0; } }
@keyframes check-draw { from { stroke-dashoffset: 34; } }
@keyframes check-ring { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(1.65); opacity: 0; } }
@keyframes check-spark {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(-30px) scale(1); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-62px) scale(.4); }
}

/* Event ticket: dark card with a perforated divider between details and calendar buttons. */
.ty-ticket {
  position: relative; display: grid; background: var(--forest); color: var(--on-dark);
  border-radius: var(--r-lg); box-shadow: 0 18px 40px rgba(30, 58, 42, .18); overflow: hidden;
}
.ty-ticket-main { padding: 30px 26px 26px; }
.ty-ticket .eyebrow { color: var(--mint); }
.ty-ticket h2 { margin-top: 8px; color: var(--on-dark); font-size: clamp(1.5rem, 5.6vw, 1.625rem); text-wrap: balance; }
.ty-ticket-time { margin-top: 6px; font-weight: 600; font-size: 1.0625rem; color: var(--on-dark); }
.ty-host { margin-top: 20px; display: flex; align-items: center; gap: 12px; font-size: .9375rem; color: var(--on-dark-2); }
.ty-host img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--forest-2), 0 0 0 3px rgba(159, 216, 196, .5); }
.ty-ticket-cal { position: relative; padding: 24px 26px 28px; border-top: 2px dashed rgba(243, 241, 232, .22); }
.ty-ticket-cal::before, .ty-ticket-cal::after { /* notches cut into the card at the perforation */
  content: ""; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--paper);
}
.ty-ticket-cal::before { left: -12px; }
.ty-ticket-cal::after { right: -12px; }
.ty-cal-label { font: 600 .8125rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-2); }
.cal-row { margin-top: 14px; display: grid; gap: 10px; }
.cal-btn {
  display: inline-flex; align-items: center; justify-content: flex-start; gap: 12px; min-height: 50px; padding: 12px 18px;
  border-radius: 14px; border: 1px solid rgba(243, 241, 232, .2); background: rgba(243, 241, 232, .06); color: var(--on-dark);
  font: 600 1rem/1 var(--sans); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.cal-btn:hover { background: rgba(243, 241, 232, .12); border-color: var(--mint); transform: translateX(3px); }
.cal-btn svg.i { width: 20px; height: 20px; color: var(--mint); }

.video-ph { aspect-ratio: 16 / 9; border-radius: var(--r); background: linear-gradient(160deg, #cfdcc4, #9db58f); display: grid; place-items: center; color: var(--forest); text-align: center; padding: 20px; }

@media (min-width: 640px) {
  .ty-wrap { gap: 32px; }
  .ty-ticket { grid-template-columns: 1fr 250px; }
  .ty-ticket-main { padding: 36px 32px 36px 36px; align-self: center; }
  .ty-ticket-cal { padding: 32px 24px; border-top: 0; border-left: 2px dashed rgba(243, 241, 232, .22); display: flex; flex-direction: column; justify-content: center; }
  .ty-ticket-cal::before, .ty-ticket-cal::after { top: auto; left: -13px; right: auto; }
  .ty-ticket-cal::before { top: -12px; }
  .ty-ticket-cal::after { bottom: -12px; }
}

/* ==========================================================================
   Wider screens
   ========================================================================== */
@media (min-width: 640px) {
  :root { --gutter: 32px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .card { flex-direction: column; }
  .hero-actions { grid-auto-flow: column; justify-content: start; align-items: center; }
  .gift { padding: 44px 40px; }
  .register-card { padding: 36px 32px; }
}

@media (min-width: 900px) {
  .section { padding: 104px 0; }
  .header-cta { display: inline-flex; }
  .hero { padding: 24px 0 0; }
  .ticker { margin-top: 88px; }
  /* Copy blocks stacked on the left, photo spanning both rows on the right. */
  .hero-grid { grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; }
  .hero-copy { padding-top: 0; }
  .hero .photo { aspect-ratio: 4 / 5; }
  .hero-photo { object-position: 70% 50%; }
  .cards { grid-template-columns: repeat(6, 1fr); }
  .cards .card { grid-column: span 2; }
  .cards .card:nth-child(4) { grid-column: 2 / span 2; }
  .cards .card:nth-child(5) { grid-column: 4 / span 2; }
  .who-grid { grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: start; }
  .who-grid .section-head { position: sticky; top: 40px; }
  .gift { padding: 56px 64px; }
  .host-grid { grid-template-columns: .85fr 1.15fr; gap: 72px; }
  .lab { padding-top: 64px; }
  #register .live-line { justify-content: flex-start; }
  .register-grid { grid-template-columns: 1fr 440px; gap: 72px; }
  .footer-grid { grid-template-columns: 1fr auto; align-items: start; }
  .sticky-cta { display: none; }
  body.has-sticky { padding-bottom: 0; }
}

/* ==========================================================================
   Motion: scroll reveals and hover feedback (all switched off for reduced motion below)
   ========================================================================== */
.can-reveal [data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--d, 0ms);
}
.can-reveal [data-reveal].is-in { opacity: 1; transform: none; }
.checklist li:nth-child(2) { --d: 60ms; }
.checklist li:nth-child(3) { --d: 120ms; }
.checklist li:nth-child(4) { --d: 180ms; }
.checklist li:nth-child(5) { --d: 240ms; }
.checklist li:nth-child(6) { --d: 300ms; }
.checklist li:nth-child(7) { --d: 360ms; }
.speaker:nth-child(2) { --d: 120ms; }

/* Buttons lift slightly and the arrow nudges forward. */
.btn-primary { transition: background-color .15s ease, transform .2s ease, box-shadow .2s ease; }
.btn-primary svg.i { transition: transform .2s ease; }
@media (hover: hover) {
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(31, 107, 69, .35); }
  .btn-primary:hover svg.i { transform: translateX(4px); }
  /* Hover lift uses `translate`, separate from the reveal's `transform`, so the two never fight. */
  .card { transition: translate .3s ease, box-shadow .3s ease; }
  .can-reveal .card[data-reveal] {
    transition: opacity .7s ease var(--d, 0ms), transform .7s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms), translate .3s ease, box-shadow .3s ease;
  }
  .card:hover { translate: 0 -4px; box-shadow: 0 2px 4px rgba(30, 58, 42, .06), 0 16px 32px rgba(30, 58, 42, .12); }
  .card:hover .card-icon { background: var(--teal-50); color: var(--teal); }
  .card-icon { transition: background-color .3s ease, color .3s ease; }
  .t-card { transition: box-shadow .3s ease; }
  .t-card:hover { box-shadow: 0 2px 4px rgba(30, 58, 42, .06), 0 16px 32px rgba(30, 58, 42, .12); }
}
.btn-primary:active { transform: translateY(1px); }

/* Countdown digits flip gently each time they change. */
.cd-num.is-tick { animation: cd-tick .45s ease; }
@keyframes cd-tick { 0% { transform: translateY(-30%); opacity: .2; } 100% { transform: none; opacity: 1; } }

/* The gift icons give a little wiggle every few seconds. */
.gift-label svg.i, .live-line svg.i, .gift-icon svg.i { animation: gift-wiggle 4s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes gift-wiggle { 0%, 82%, 100% { transform: none; } 86% { transform: rotate(-12deg); } 90% { transform: rotate(10deg); } 94% { transform: rotate(-6deg); } }

/* The hero date pill fades in with the headline. */
.hero-date { animation: pill-in .7s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes pill-in { from { opacity: 0; transform: translateY(-8px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
  .btn, .cal-btn { border: 2px solid ButtonText; }
}