/* ==========================================================================
   Come For Dinner + the Legends Mastermind: the skin over Cotswold Training Club's funnel styles (base.css, book.css,
   quiz.css, motion.css, form.js, base.js, motion.js: copied from Strength & Bloom's CTC set on 15 Nov 2026; re-copy,
   don't edit those here). Two brands, one stylesheet, picked by the <body> class:
     .b-cfd  comefordinner.co.uk: warm cream, espresso, terracotta peach and sage; Playfair Display and Outfit
     .b-lc   legendscollective.co: paper and ink, royal blue and ember; Fraunces and Inter
   Only the skin and the funnel's own pieces live here (the rules below started as Strength & Bloom's bloom.css).
   ========================================================================== */
.b-cfd {
  --olive: #3A322D; --olive-deep: #2A2522; --olive-soft: #7B6F66; --ink: #2A2522; --ink-deep: #1D1917;
  --sage: #E8B899;           /* the accent on espresso: peach */
  --gold: #C9824F; --coral: #C9824F; --coral-ink: #9A4F25;
  --sand: #F3EADF; --mist: #F6F0E8; --paper: #FCFAF6; --wash: #F6E3D6;
  --body: #2A2522; --muted: #6E645C; --line: #E8DDD0;
  --dark-rgb: 58, 50, 45; --deep-rgb: 29, 25, 23; --accent-rgb: 232, 184, 153;
  --font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
}
.b-lc {
  --olive: #223A7A; --olive-deep: #14130F; --olive-soft: #7B92D6; --ink: #14130F; --ink-deep: #0B0A08;
  --sage: #F1C3A8;           /* the accent on royal and ink: a lifted ember */
  --gold: #C85A2C; --coral: #C85A2C; --coral-ink: #9C3F1A;
  --sand: #F4EFE6; --mist: #F2EDE3; --paper: #FBF8F2; --wash: #F1DFD2;
  --body: #26231E; --muted: #6D6A62; --line: #EAE3D4;
  --dark-rgb: 34, 58, 122; --deep-rgb: 20, 19, 15; --accent-rgb: 241, 195, 168;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
}
body { --r: 14px; --r-lg: 20px; --top-h: 64px; --shadow: 0 4px 16px rgba(var(--deep-rgb), .12); --shadow-lg: 0 18px 44px -14px rgba(var(--deep-rgb), .34); }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--paper); overflow-x: hidden; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 5vw, 3.7rem); line-height: 1.06; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.1; }
h3 { line-height: 1.2; }
.hl, .mo-w__i.hl { font-style: italic; color: var(--coral-ink); }
.on-dark .hl, .tone-ink .hl, .tone-olive .hl, .fx__panel .hl { color: var(--sage); }
a { color: var(--olive); }

/* buttons: forest pills on cream, blush pills (forest text) on forest */
.btn { border-radius: 999px; text-transform: none; letter-spacing: .01em; font-size: 1rem; font-weight: 700; }
.btn.big { padding: 18px 34px; font-size: 1.05rem; }
.on-dark .btn:not(.ghost), .tone-ink .btn:not(.ghost), .tone-olive .btn:not(.ghost), .fx__panel .btn:not(.ghost), .top .btn {
  background: var(--sage); color: var(--ink);
}
@keyframes ctcGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--dark-rgb), 0); } 50% { box-shadow: 0 0 0 7px rgba(var(--dark-rgb), .14); } }
@keyframes ctcGlowLight { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); } 50% { box-shadow: 0 0 0 8px rgba(var(--accent-rgb), .3); } }
.on-dark .btn.glow, .tone-ink .btn.glow, .tone-olive .btn.glow, .fx__panel .btn.glow { animation-name: ctcGlowLight; }

/* header: forest, the blush wordmark */
.top { background: rgba(var(--deep-rgb), .97); border-bottom: 0; }
.top-in { padding: 0; height: var(--top-h); }
.top .brand { display: flex; align-items: center; text-decoration: none; }
.top .mark { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; color: #fff; letter-spacing: -.01em; white-space: nowrap; }
.top .mark i { font-style: normal; color: var(--sage); }
.top .where { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .7); white-space: nowrap; }
.top .btn { padding: 11px 20px; font-size: .9rem; }
@media (max-width: 560px) {
  :root { --top-h: 54px; }
  .top .mark { font-size: 1.12rem; }
  .top .btn { padding: 9px 15px; font-size: .84rem; letter-spacing: 0; }
}
@media (max-width: 400px) { .top .where { display: none; } }

/* the eyebrow and the numbered kickers */
.eyebrow, .kicker { color: var(--coral-ink); letter-spacing: .14em; }
.kicker .n { background: var(--olive); color: var(--sand); border-radius: 999px; }
.tone-ink .kicker, .on-dark .kicker, .tone-olive .kicker, .tone-olive .eyebrow { color: var(--sage); }
.tone-ink .kicker .n, .on-dark .kicker .n, .tone-olive .kicker .n { background: var(--sage); color: var(--ink); }

/* rooms: cream and paper, forest for the films, deep forest for the form */
.tone-sand { background: var(--sand); }
.tone-olive { background: var(--olive); }
.tone-ink { background: var(--olive-deep); }
.foot { background: var(--ink-deep); }
.foot .mark { font-family: var(--serif); font-size: 1.6rem; color: #fff; }
.foot .mark i { font-style: normal; color: var(--sage); }
.foot a:hover { color: var(--sage); }
.fx__panel { background: var(--olive-deep); }
.fx__back { background: rgba(var(--deep-rgb), .8); }

/* cards, the four numbers, reviews */
.card, .review, .trust-grid, .form-card { border-radius: var(--r); }
.card h3 { font-size: 1.4rem; color: var(--ink); }
.trust b { font-family: var(--serif); font-weight: 500; color: var(--olive); }
.trust i { background: var(--coral); }
.review p { font-family: var(--serif); font-size: 1.04rem; line-height: 1.5; color: var(--ink); }
.review .who { color: var(--muted); }
.reviews-note { text-align: center; margin: 26px 0 0; font-size: .95rem; }
.reviews-note a { color: var(--olive); font-weight: 700; }
.head .rating { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-weight: 700; color: var(--ink); }
.head .rating span { color: var(--gold); letter-spacing: 2px; }

/* --------------------------------------------------------------- the hero (HERO.md v3 in CTC's hero)
   Phones: headline, one line, the ad's film, the button and its note, all on the first screen at 390x664 and
   375x548. The lede, the offer, what happens next and the member's words sit straight below, then the four numbers. */
.hero-lp .hero-sub { font-size: 1.14rem; line-height: 1.45; margin: 0 0 24px; max-width: 34em; color: var(--body); }
.hero-lp .btn-note { color: var(--muted); }
.hero-lp .btn-note b { color: var(--coral-ink); }
.hero-film { position: relative; margin: 0 0 0 auto; aspect-ratio: 4 / 5; width: 100%; max-width: 480px; border-radius: var(--r-lg); background: #000; }
.hero-film video { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; cursor: pointer; }
@media (min-width: 860px) { .hero-film.bigfilm video { aspect-ratio: auto; } }
.hero-film .bigfilm__sound { left: 12px; bottom: 12px; padding: 9px 14px; font-size: .74rem; background: rgba(var(--deep-rgb), .8); }
.hero-film .bigfilm__bar { background: var(--sage); }
.hero-more { max-width: 760px; margin: 40px auto 0; }
.hero-more .lede { margin: 0 0 16px; }
.hero-more .offer { display: flex; align-items: flex-start; margin: 0 0 14px; border-left-color: var(--coral); background: var(--wash); font-weight: 500; }
.hero-more .offer .dot { background: var(--coral); margin-top: 8px; }
.hero-more .offer strong { color: var(--ink); }
.hero-more .how { margin: 0 0 18px; }
.hero-quote { margin: 0; padding: 16px 18px; border-left: 3px solid var(--sage); background: var(--sand); border-radius: 0 var(--r) var(--r) 0; }
.hero-quote p { margin: 0 0 6px; font-family: var(--serif); font-style: italic; font-size: 1.12rem; line-height: 1.45; color: var(--ink); }
.hero-quote cite { font-style: normal; font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--coral-ink); }
@media (max-width: 939px) {
  .hero-lp { padding-top: 0; }
  .hero-lp .hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding-top: 14px;
    height: calc(100svh - var(--top-h)); min-height: 420px; max-height: 900px; }
  .hero-lp .hero-copy { display: contents; }
  .hero-lp .eyebrow { order: 1; margin-bottom: 8px; font-size: .7rem; }
  .hero-lp h1 { order: 2; font-size: clamp(1.7rem, 8vw, 2.5rem); line-height: 1.08; margin-bottom: 8px; }
  .hero-lp .hero-sub { order: 3; font-size: clamp(.95rem, 4vw, 1.08rem); line-height: 1.4; margin-bottom: 12px; }
  .hero-lp .hero-media { order: 4; flex: 1 1 0; min-height: 130px; width: 100%; container-type: size; display: flex; align-items: center; }
  /* the film is the biggest 4:5 that fits the space left: the hero always ends at the button and its note */
  .hero-lp .hero-film { width: min(100cqw, 80cqh); height: min(100cqh, 125cqw); max-width: none; margin: 0 auto; }
  .hero-lp .hero-cta { order: 5; margin-top: 14px; }
  .hero-lp .hero-cta .btn { flex: 1 1 100%; text-align: center; padding: 17px 20px; }
  .hero-lp .btn-note { order: 6; text-align: center; margin: 8px 0 14px; }
  .hero-more { margin-top: 30px; }
}
@media (max-width: 939px) and (max-height: 620px) {
  .hero-lp .hero-grid { padding-top: 10px; }
  .hero-lp .eyebrow { display: none; }
  .hero-lp h1 { font-size: clamp(1.5rem, 7vw, 1.9rem); margin-bottom: 6px; }
  .hero-lp .hero-sub { font-size: .9rem; line-height: 1.35; margin-bottom: 10px; }
  .hero-lp .hero-cta { margin-top: 10px; }
  .hero-lp .hero-cta .btn { padding: 14px 18px; }
  .hero-lp .btn-note { margin: 6px 0 10px; font-size: .78rem; }
}
@media (min-width: 940px) {
  .hero-lp .hero-grid { align-items: center; }
  .hero-film { max-height: min(74vh, 640px); width: auto; margin-left: auto; }
}

/* --------------------------------------------------------------- the films: CTC's tiles, the words in the caption */
.films3 .film { background: var(--olive-deep); }
.films3 .film img { object-fit: cover; }
.filmcard .fc { position: absolute; inset: auto 0 0 0; z-index: 1; padding: 54px 16px 16px;
  background: linear-gradient(to top, rgba(var(--deep-rgb), .97) 52%, rgba(var(--deep-rgb), 0)); color: #fff; text-align: left; }
.filmcard .fc__meta { display: flex; align-items: center; gap: 9px; margin: 0 0 7px; font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.filmcard .fc__meta i { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--sage); color: var(--ink);
  display: grid; place-items: center; }
.filmcard .fc__meta i svg { width: 11px; height: 12px; margin-left: 2px; }
.filmcard .fc__meta b { color: var(--sage); font-weight: 700; }
.filmcard .fc__q { display: block; font-family: var(--serif); font-size: 1.32rem; line-height: 1.2; font-weight: 500; color: #fff; }
.films3 .film:hover { box-shadow: 0 0 34px -4px rgba(var(--accent-rgb), .5), var(--shadow-lg); }
.lb__cap b { color: var(--sage); }

/* --------------------------------------------------------------- the card: details, three taps, a call */
.form-card .field .lbl { display: block; font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 7px; }
.field input { border-radius: 10px; background: var(--mist); }
.field input:focus { outline-color: var(--olive); }
.form-card .q__opts.two { grid-template-columns: 1fr 1fr; }
.form-card .q__opts.two label.opt { padding: 12px 12px; font-size: .93rem; }
.form-card label.opt { border-radius: 12px; background: #fff; }
.form-card label.opt:has(input:checked) { background: var(--wash); border-color: var(--olive); }
.book__one .two-up.names { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.book__steps { display: flex; }
.book__steps li.on { background: var(--olive); color: var(--sand); }
.book__steps li.on b { color: var(--olive); }
.book__steps li.done { background: var(--wash); color: var(--olive); }
.book__quiz .flow__top { display: flex; align-items: center; justify-content: space-between; min-height: 30px; margin: 0 0 10px; }
.flow__back { padding: 4px 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: .9rem; font-weight: 700;
  color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.flow__count { margin-left: auto; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.book__quiz .q { margin: 0 0 6px; }
.book__quiz .q legend { font-family: var(--serif); font-weight: 500; font-size: 1.4rem; line-height: 1.2; }
.book__quiz .q__opts { grid-template-columns: 1fr; }
.book__quiz .q[hidden] { display: none; }
.book__quiz .flow__q { animation: q-in .25s ease both; }
@keyframes q-in { from { opacity: 0; transform: translateY(6px); } }
.book__group { margin: 10px 0 8px; color: var(--muted); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.book__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.book__times { display: block; }
.book__time[hidden] { display: none; }
.book__more { display: block; width: 100%; margin: 12px 0 0; min-height: 44px; border: 1px dashed var(--olive-soft); border-radius: 10px; background: none; color: var(--olive); font: inherit; font-weight: 700; }
.flow__widget iframe { width: 100%; height: 820px; border: 0; border-radius: 12px; background: #fff; }
.legal a { color: inherit; }
/* in the lightbox (forest panel) */
.fx__panel #fx-title { padding-right: 46px; font-family: var(--serif); font-weight: 500; }
.fx__slot .form-card .field .lbl { color: rgba(255, 255, 255, .68); }
.fx__slot .form-card label.opt { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .2); color: #fff; }
.fx__slot .form-card label.opt:has(input:checked) { background: rgba(var(--accent-rgb), .16); border-color: var(--sage); }
.fx__slot .opt input { background: transparent; border-color: rgba(255, 255, 255, .5); }
.fx__slot .opt input::before { background: var(--sage); }
.fx__slot .book__quiz .q legend { color: #fff; }
.fx__slot .flow__back, .fx__slot .flow__count, .fx__slot .book__group { color: rgba(255, 255, 255, .72); }
.fx__slot .book__steps li.on { background: var(--sage); color: var(--ink); }
.fx__slot .book__steps li.on b { color: var(--ink); }
.fx__slot .book__steps li.done { background: rgba(var(--accent-rgb), .16); color: var(--sage); }
.fx__slot .book__day[aria-pressed="true"], .fx__slot .book__time[aria-pressed="true"] { background: var(--sage); border-color: var(--sage); color: var(--ink); }
.fx__slot .book__day[aria-pressed="true"] small { color: var(--ink); }
.fx__slot .book__more { color: var(--sage); border-color: rgba(var(--accent-rgb), .5); }
@media (max-width: 560px) {
  .fx { padding: 0; }
  .fx__panel { max-width: none; height: 100svh; max-height: none; border-radius: 0; padding: 22px 18px calc(24px + env(safe-area-inset-bottom)); }
  .fx__slot .form-card .field { margin-bottom: 12px; }
  .fx__slot .field input { padding-top: 12px; padding-bottom: 12px; }
}

/* --------------------------------------------------------------- the founder's sign-off */
.letter__sig { display: flex; align-items: center; gap: 10px; margin-top: 18px !important; font-family: var(--serif); font-size: 1.3rem; color: var(--ink); }
.letter__sig img { width: 40px; height: auto; }

/* --------------------------------------------------------------- /kickstarter/thanks: CTC's call-confirmed page */
.ty-hero { padding-top: clamp(30px, 5vw, 64px); }
.ty-hero .hero-grid { align-items: start; }
.ty-hero h1 { margin: 0 0 16px; }
.ty-hero .lede p { margin: 0 0 12px; }
.ty-hero .ty-sig { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 1.3rem; color: var(--ink); margin: 6px 0 22px; }
.ty-hero .ty-sig img { width: 40px; height: auto; }
.ty-film { margin: 0; max-width: 380px; }
.ty-film .film { width: 100%; }
.ty-film[hidden], .ty-pick[hidden] { display: none; }
.ty-steps { display: grid; gap: 0; max-width: 760px; margin: 0 auto; }
.ty-step { display: grid; grid-template-columns: 46px 1fr; gap: 0 18px; padding: 22px 0; border-top: 1px solid var(--line); }
.ty-step:last-child { border-bottom: 1px solid var(--line); }
.ty-step .n { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--olive); color: var(--sand); font-weight: 700; }
.ty-step.done .n { background: var(--sage); color: var(--ink); }
.ty-step .when { margin: 4px 0 4px; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--coral-ink); }
.ty-step h3 { margin: 0 0 6px; font-size: 1.3rem; color: var(--ink); }
.ty-step p { margin: 0; color: var(--muted); }
.spec { max-width: 760px; margin: 0 auto; }
.spec__row dt { color: var(--coral-ink); }
.spec__row::after { background: var(--sage); }
.statement p.big { font-family: var(--serif); font-weight: 500; font-style: italic; }
.statement .who { color: var(--sage); }

/* /book */
.book-page iframe { width: 100%; max-width: 640px; height: 1100px; border: 0; border-radius: var(--r); background: #fff; margin: 18px auto 0; display: block; }

/* the gym choice sits in a .field, so its radios mustn't take the text boxes' size */
.form-card .field .opt input { width: 20px; height: 20px; padding: 0; border-radius: 50%; background: #fff; }
.form-card .q__opts.two label.opt { align-items: center; }
/* the white card on the dark form section keeps CTC's solid button; the lightbox (forest panel) has the blush one */
.tone-ink .form-card .btn:not(.ghost) { background: var(--olive); color: var(--sand); animation-name: ctcGlow; }
.fx__slot .form-card .btn:not(.ghost) { background: var(--sage); color: var(--ink); animation-name: ctcGlowLight; }
.fx__slot .form-card .field .opt input { background: transparent; }
.ty-film .film { width: 100%; aspect-ratio: 4 / 5; }
.ty-film .film img { width: 100%; height: 100%; object-fit: cover; }
.ty-hero .btn-note, .ty-hero .lede { color: var(--body); }
@media (max-width: 939px) { .ty-film { max-width: 340px; margin: 0 auto; } }

/* --------------------------------------------------------------- Come For Dinner / Legends: their own pieces */
.hero-photo { overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.q__hint { margin: -4px 0 12px; color: var(--muted); font-size: .92rem; }
.fx__slot .q__hint { color: rgba(255, 255, 255, .7); }
.field label small { font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .75; }
.review .who small { display: block; font-weight: 500; font-size: .82rem; color: var(--muted); letter-spacing: 0; text-transform: none; }
.recipes { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); max-width: 1080px; margin: 0 auto; }
.recipe { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 18px 18px 16px; }
.recipe.on { border: 2px solid var(--olive); box-shadow: var(--shadow); }
.recipe__q { margin: 0 0 8px; font-family: var(--serif); font-style: italic; font-size: 1.12rem; line-height: 1.3; color: var(--ink); }
.recipe h3 { margin: 0 0 6px; font-family: var(--font); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--coral-ink); }
.recipe p:last-child { margin: 0; color: var(--muted); font-size: .95rem; }
.fit { display: grid; gap: 16px; max-width: 900px; margin: 0 auto; }
@media (min-width: 760px) { .fit { grid-template-columns: 1fr 1fr; } }
.fit__col { background: #fff; border-radius: var(--r); padding: 20px 22px; border-top: 4px solid var(--olive); }
.fit__col.no { border-top-color: var(--line); }
.fit__col h3 { margin: 0 0 10px; font-size: 1.3rem; color: var(--ink); }
.fit__col ul { margin: 0; padding-left: 1.1em; }
.fit__col li { margin: 0 0 6px; }
.letter__sig { font-style: italic; }
.ty-sig { font-style: italic; }