/* ==========================================================================
   Thought Leader ecosystem (GARDEN look): soft butter-on-plum, white outlines,
   handwriting accents. Kept as an option next to the Creative Mode version.
   TO CHANGE COLORS OR FONTS, EDIT THE :root BLOCK ONLY.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&display=swap");

@font-face { font-family: "Chicken Squiggle"; src: url("../fonts/Chickensquiggle-Regular.otf"); font-display: swap; size-adjust: 145%; }
@font-face { font-family: "Honey Basil"; src: url("../fonts/HoneyBasil-Regular.otf"); font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../fonts/PlayfairDisplay-VF.ttf"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/DMSans-Variable.ttf"); font-weight: 100 1000; font-display: swap; }

:root {
  /* palette: her swatch (cream, deep teal, sage, coral, mustard, pink) */
  --ink: #10201f;          /* the dark ground: a teal-black */
  --ink-2: #1a3032;        /* raised panels on the dark ground */
  --cream: #f6f1ed;        /* light sections, and text on the dark ground */
  --blue: #99c1bb;         /* sage */
  --green: #356669;        /* deep teal */
  --orange: #f67e58;       /* coral */
  --pink: #f0a4d6;
  --yellow: #d39c22;       /* mustard */
  --butter: var(--yellow); /* old name, still works */
  --line: rgba(246, 241, 237, .5);
  --accent: var(--yellow); /* each page sets its own below */
  --loud: var(--orange);   /* hover, underline and strike color */

  --f-head: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;  /* headlines (free, Google) */
  --f-emph: var(--f-head);                                           /* the colored emphasis words */
  --f-serif: "Playfair Display", Georgia, serif;                     /* italic emphasis inside paragraphs */
  --f-hand: "Chicken Squiggle", "Caveat", cursive;                   /* handwriting notes */
  --f-fun: "Honey Basil", var(--f-head);                             /* tickers, box headers, list breakers */
  --f-body: "DM Sans", system-ui, sans-serif;

  --gutter: clamp(20px, 5vw, 64px);
  --max: 1180px;
  --radius: 22px;
}

body[data-page="journal"] { --accent: var(--yellow); }
body[data-page="session"] { --accent: var(--pink); }
body[data-page="lab"]     { --accent: var(--blue); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ink); color: var(--cream);
  font-family: var(--f-body); font-size: clamp(16px, 1.1vw + 11px, 19px); line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-head); font-weight: 650; letter-spacing: -.025em; line-height: 1.04; margin: 0 0 .5em; text-transform: lowercase; }
h1 { font-size: clamp(2.4rem, 6.2vw, 5.2rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.8rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.7rem); }
p { margin: 0 0 1em; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.sec { padding-block: clamp(72px, 11vw, 150px); position: relative; }
.sec--butter { background: var(--cream); color: var(--ink); }
.sec--raised { background: var(--ink-2); }
.lead { font-size: clamp(1.15rem, 1.8vw, 1.5rem); max-width: 34em; }
.center { text-align: center; margin-inline: auto; }

h1 em, h2 em, h3 em { font-family: var(--f-emph); font-style: normal; color: var(--accent); font-weight: 800; }
.sec--butter h2 em { color: var(--green); }
p em, li em, .serif { font-family: var(--f-serif); font-style: italic; color: var(--accent); }
.sec--butter p em { color: var(--green); }
.hand { font-family: var(--f-hand); text-transform: lowercase; color: var(--accent); line-height: 1.1; }
.sec--butter .hand { color: var(--green); }

.outline-text { color: transparent; -webkit-text-stroke: 1.5px var(--line); }

.progress { position: fixed; inset: 0 0 auto 0; height: 3px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); z-index: 60; }
.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--ink) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,253,244,.12); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.brand { font-family: var(--f-hand); font-size: 1.6rem; text-decoration: none; text-transform: lowercase; white-space: nowrap; }
.steps { display: flex; gap: clamp(4px, 1.5vw, 14px); list-style: none; margin: 0; padding: 0; }
.steps a { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; text-decoration: none; font-size: .86rem; letter-spacing: .02em; border: 1px solid transparent; transition: .25s; }
.steps a b { font-family: var(--f-hand); font-weight: 400; font-size: 1.1rem; opacity: .7; }
.steps a:hover { border-color: var(--line); }
.steps a[aria-current="page"] { background: var(--c, var(--accent)); color: var(--ink); }
.steps a[aria-current="page"] b { opacity: 1; }
@media (max-width: 640px) { .brand { display: none; } .steps { width: 100%; justify-content: space-between; } .steps a { padding: 8px 10px; font-size: .8rem; } }

.btn { --bg: var(--accent); display: inline-flex; align-items: center; gap: 12px; background: var(--bg); color: var(--ink); text-decoration: none; padding: 17px 28px; border-radius: 99px; font-weight: 600; font-size: 1rem; border: 2px solid var(--bg); cursor: pointer; font-family: var(--f-body); transition: background .25s, color .25s, transform .25s; will-change: transform; }
.btn .arr { display: inline-block; transition: transform .3s; }
.btn:hover { background: var(--loud); border-color: var(--loud); color: var(--ink); }
.btn:hover .arr { transform: translateX(6px); }
.btn--ghost { background: transparent; color: inherit; border-color: var(--line); }
.btn--ghost:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.sec--butter .btn { --bg: var(--ink); color: var(--cream); }
.sec--butter .btn:hover { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 1.6em; }

.hero { padding-block: clamp(48px, 8vw, 110px) clamp(64px, 9vw, 120px); overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.hero h1 { max-width: 12em; }
.hero .lead { margin-top: .4em; opacity: .92; }
.caret { display: inline-block; width: .08em; height: .9em; background: var(--accent); margin-left: .06em; vertical-align: -.08em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; } .hero-art { max-width: 420px; margin-inline: auto; width: 100%; } }

.hero-art { position: relative; }
.arch { position: relative; aspect-ratio: 4 / 5; border-radius: 999px 999px 28px 28px; overflow: hidden; }
.arch img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; object-fit: cover; object-position: 50% 20%; }
.arch-outline { position: absolute; inset: -14px; border: 2px solid var(--line); border-radius: 999px 999px 40px 40px; transform: rotate(-3deg); pointer-events: none; }
.badge { position: absolute; width: clamp(96px, 12vw, 138px); right: -4%; bottom: 6%; z-index: 3; }
.badge .ring { transform-origin: 60px 60px; animation: spin 22s linear infinite; }
.badge text { font-family: var(--f-body); font-size: 9.6px; letter-spacing: .16em; text-transform: uppercase; fill: var(--cream); }
.badge .mid { font-family: var(--f-head); font-size: 20px; letter-spacing: 0; text-transform: lowercase; fill: var(--accent); text-anchor: middle; }
.badge circle { fill: var(--ink); stroke: var(--line); }
@keyframes spin { to { transform: rotate(360deg); } }
.note { position: absolute; z-index: 3; font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.note svg { position: absolute; width: 70px; height: 70px; fill: none; stroke: var(--cream); stroke-width: 2; stroke-linecap: round; }

.chip { display: inline-block; padding: 8px 16px; border-radius: 99px; border: 1.5px solid var(--line); font-size: .92rem; background: rgba(30,21,25,.55); backdrop-filter: blur(4px); }
.float { position: absolute; z-index: 2; animation: bob 6s ease-in-out infinite; }
.float:nth-of-type(2n) { animation-duration: 7.5s; animation-delay: -2s; }
.float:nth-of-type(3n) { animation-duration: 5.2s; animation-delay: -4s; }
@keyframes bob { 50% { transform: translateY(-12px) rotate(2deg); } }

.marquee { overflow: hidden; border-block: 1px solid rgba(255,253,244,.18); padding-block: 18px; background: var(--ink); }
.marquee-track { display: flex; gap: 48px; width: max-content; animation: slide 36s linear infinite; font-family: var(--f-fun); font-size: clamp(1.6rem, 4vw, 3rem); text-transform: lowercase; white-space: nowrap; }
.marquee-track span { color: var(--cream); -webkit-text-stroke: 0; }
.marquee-track span:nth-child(3n) { color: var(--accent); }
@keyframes slide { to { transform: translateX(-50%); } }

.story { max-width: 880px; }
.story p { font-family: var(--f-head); font-weight: 560; font-size: clamp(1.5rem, 3.4vw, 2.6rem); line-height: 1.22; letter-spacing: -.01em; margin-bottom: .9em; }
.story p.small { font-family: var(--f-body); font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.6; letter-spacing: 0; }
.w { display: inline-block; white-space: pre; }

.picker { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.6em 0 1em; }
.pick { font: inherit; font-size: 1.05rem; color: inherit; background: transparent; border: 1.5px solid var(--line); padding: 12px 22px; border-radius: 99px; cursor: pointer; transition: .25s; }
.sec--butter .pick { border-color: rgba(30,21,25,.5); }
.pick:hover { transform: translateY(-3px) rotate(-1.5deg); }
.pick[aria-pressed="true"] { background: var(--accent); color: var(--ink); border-color: var(--accent); transform: scale(1.04); }
.sec--butter .pick[aria-pressed="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.pick-out { min-height: 5.6em; max-width: 30em; font-family: var(--f-hand); font-size: clamp(1.3rem, 2.3vw, 1.85rem); line-height: 1.2; color: var(--accent); }
.sec--butter .pick-out { color: var(--green); }

.grid { display: grid; gap: 18px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid--3, .grid--2 { grid-template-columns: 1fr; } }
.card { position: relative; border: 1.5px solid var(--line); border-radius: var(--radius); padding: 28px 26px 30px; transition: background .3s, color .3s, transform .35s, border-color .3s; transform-style: preserve-3d; }
.card:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.card:hover .num { -webkit-text-stroke-color: var(--ink); }
.card:hover em { color: var(--ink); }
.card .num { font-family: var(--f-head); font-size: 3.4rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.3px var(--line); display: block; margin-bottom: .2em; transition: .3s; }
.card h3 { margin-bottom: .35em; }
.card p { margin: 0; font-size: .98rem; opacity: .9; }
.sec--butter .card { border-color: rgba(30,21,25,.4); }
.sec--butter .card:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.sec--butter .card .num { -webkit-text-stroke-color: rgba(30,21,25,.5); }
.sec--butter .card:hover .num { -webkit-text-stroke-color: var(--cream); }

.list { list-style: none; margin: 0; padding: 0; }
.list li { position: relative; padding: 14px 0 14px 46px; border-bottom: 1px solid rgba(255,253,244,.16); }
.sec--butter .list li { border-color: rgba(30,21,25,.16); }
.list li svg { position: absolute; left: 0; top: 14px; width: 28px; height: 28px; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sec--butter .list li svg { stroke: var(--green); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 90px); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.sticky { position: sticky; top: 110px; }
@media (max-width: 860px) { .sticky { position: static; } }

.photo { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; }
.photo img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; }
.photo--wide { aspect-ratio: 4 / 3; }
.photo-frame { position: relative; }
.photo-frame::after { content: ""; position: absolute; inset: -12px 12px 12px -12px; border: 2px solid var(--line); border-radius: calc(var(--radius) + 6px); z-index: -1; }
.sec--butter .photo-frame::after { border-color: rgba(30,21,25,.55); }

.scribble { display: block; width: min(100%, 520px); height: 24px; fill: none; stroke: var(--loud); stroke-width: 5; stroke-linecap: round; }

.quote { font-family: var(--f-head); text-transform: lowercase; font-size: clamp(2.2rem, 6vw, 4.8rem); line-height: 1.04; letter-spacing: -.015em; }
.quote em { font-family: var(--f-emph); font-style: normal; font-weight: 800; color: var(--orange); }

.form { display: grid; gap: 12px; max-width: 520px; }
.form input[type=text], .form input[type=email] { font: inherit; padding: 17px 22px; border-radius: 99px; border: 2px solid var(--ink); background: var(--cream); color: var(--ink); width: 100%; }
.form input:focus { outline: 3px solid var(--loud); outline-offset: 2px; }
.form-msg { font-family: var(--f-hand); font-size: 1.5rem; color: var(--green); min-height: 1.4em; }

.price { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 5vw, 70px); align-items: center; border: 2px solid var(--line); border-radius: 32px; padding: clamp(28px, 5vw, 56px); }
.price .big { font-family: var(--f-head); font-size: clamp(4rem, 12vw, 9rem); line-height: .9; color: var(--accent); }
.price .big small { font-size: .3em; color: var(--cream); opacity: .7; letter-spacing: 0; margin-left: .15em; }
@media (max-width: 700px) { .price { grid-template-columns: 1fr; } }

.pile { position: relative; height: clamp(300px, 44vw, 380px); margin-block: 2em; }
.pile .chip { position: absolute; font-size: clamp(.95rem, 2vw, 1.4rem); padding: 12px 22px; background: var(--ink-2); }
.stamp { font-family: var(--f-head); text-transform: lowercase; font-size: clamp(1.8rem, 4.4vw, 3.4rem); max-width: 14em; }

.arc { position: relative; }
.arc-track { display: none; }
.phase { padding-block: 28px; border-top: 1px solid rgba(255,253,244,.18); }
.phase h3 { font-size: clamp(2rem, 4vw, 3.2rem); }
.phase .when { font-family: var(--f-hand); font-size: 1.6rem; color: var(--accent); }
.phase-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 4vw, 60px); align-items: start; }
@media (max-width: 860px) { .phase-grid { grid-template-columns: 1fr; } }
.chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 14px; padding: 0; list-style: none; }
.chips li { padding: 7px 15px; border: 1.5px solid var(--line); border-radius: 99px; font-size: .92rem; line-height: 1.3; }
.chips--solid li { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.chips-label { font-family: var(--f-hand); font-size: 1.35rem; color: var(--accent); margin: 1em 0 .4em; }

.arc.is-pinned { height: calc(100vh - 58px); overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.arc.is-pinned .arc-track { display: block; padding-block: 0 26px; }
.arc.is-pinned .phases { position: relative; flex: 1; max-height: 56vh; min-height: 330px; }
.arc.is-pinned .phase { position: absolute; inset: 0; border: 0; padding: 0; opacity: 0; visibility: hidden; }
.arc.is-pinned .phase { transition: opacity .45s, visibility .45s; }
.arc.is-pinned .phase.is-on { opacity: 1; visibility: visible; }
.rail { position: relative; height: 54px; margin-top: 6px; }
.rail-line, .rail-fill { position: absolute; left: 0; right: 0; top: 14px; height: 3px; border-radius: 3px; background: rgba(255,253,244,.2); }
.rail-fill { background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
.rail-dot { position: absolute; top: 0; transform: translateX(-50%); text-align: center; font-family: var(--f-hand); font-size: 1.15rem; opacity: .5; transition: .3s; }
.rail-dot i { display: block; width: 31px; height: 31px; margin: 0 auto 3px; border-radius: 50%; border: 2px solid var(--line); background: var(--ink); transition: .3s; }
.rail-dot.is-lit { opacity: 1; color: var(--accent); }
.rail-dot.is-lit i { background: var(--accent); border-color: var(--accent); transform: scale(1.18); }
.day { font-family: var(--f-head); font-size: clamp(3rem, 7vw, 6rem); line-height: 1; color: var(--accent); }
.day small { font-size: .3em; color: var(--cream); opacity: .7; margin-left: .3em; }

.strike { --s: 0; display: inline; background: linear-gradient(var(--loud), var(--loud)) no-repeat 0 58% / calc(var(--s) * 100%) 3px; }
.nots { display: grid; gap: 4px; font-family: var(--f-head); text-transform: lowercase; font-size: clamp(1.4rem, 3vw, 2.3rem); line-height: 1.25; }

.brings { display: flex; gap: 16px; overflow-x: auto; padding: 8px var(--gutter) 24px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.bring { flex: 0 0 min(78vw, 300px); scroll-snap-align: start; border: 1.5px solid var(--line); border-radius: var(--radius); padding: 26px 24px; min-height: 190px; display: flex; align-items: flex-end; font-family: var(--f-head); font-size: 1.55rem; line-height: 1.12; text-transform: lowercase; transition: .3s; }
.bring:nth-child(odd) { transform: rotate(-1.5deg); }
.bring:nth-child(even) { transform: rotate(1.5deg); }
.bring:hover { background: var(--accent); color: var(--ink); transform: rotate(0) translateY(-6px); }

.eco { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; position: relative; }
@media (max-width: 800px) { .eco { grid-template-columns: 1fr; } }
.eco a { display: block; text-decoration: none; padding: 26px 26px 30px; border: 1.5px solid var(--line); border-radius: var(--radius); transition: .3s; position: relative; }
.eco a:hover { transform: translateY(-6px); border-color: var(--c, var(--cream)); }
.eco a[aria-current="page"] { background: var(--c, var(--accent)); color: var(--ink); border-color: var(--c, var(--accent)); }
.eco .step { font-family: var(--f-hand); font-size: 1.5rem; color: var(--c, var(--accent)); }
.eco a[aria-current="page"] .step { color: var(--ink); }
.eco h3 { margin: .1em 0 .25em; }
.eco .thought { font-family: var(--f-hand); font-size: 1.4rem; line-height: 1.15; margin-top: .8em; color: var(--cream); opacity: .85; }
.eco a[aria-current="page"] .thought { color: var(--ink); }
.eco .cost { font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }

.footer { padding-block: 56px; border-top: 1px solid rgba(255,253,244,.15); font-size: .9rem; opacity: .85; }
.footer .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

.js:not(.static) [data-reveal], .js:not(.static) [data-stagger] > * { opacity: 0; }
.js:not(.static) [data-mask] { clip-path: inset(0 0 100% 0); }
@media (prefers-reduced-motion: reduce) {
  .marquee-track, .badge .ring, .float, .caret { animation: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   QUIET PALETTE: one accent per page, no confetti
   ========================================================================== */
.steps li:nth-child(1) a, .eco a:nth-child(1) { --c: var(--yellow); }
.steps li:nth-child(2) a, .eco a:nth-child(2) { --c: var(--pink); }
.steps li:nth-child(3) a, .eco a:nth-child(3) { --c: var(--blue); }

.float { animation: none; }
.float.chip { background: var(--cream); color: var(--ink); border-color: transparent; font-weight: 500; backdrop-filter: none; }
.arch-outline { border-color: var(--accent); }
.badge .ring { animation: none; }
.note svg { display: none; }
.pile .chip { color: var(--ink); border-color: transparent; font-weight: 400; box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.pile .chip:nth-child(6n+1) { background: var(--yellow); }
.pile .chip:nth-child(6n+2) { background: var(--pink); }
.pile .chip:nth-child(6n+3) { background: var(--blue); }
.pile .chip:nth-child(6n+4) { background: var(--orange); }
.pile .chip:nth-child(6n+5) { background: var(--cream); }
.pile .chip:nth-child(6n+6) { background: var(--green); color: var(--cream); }
.bit { position: absolute; border-radius: 2px; pointer-events: none; z-index: 1; }
.bit--round { border-radius: 50%; }
.price { border-color: var(--accent); }
.footer .wrap span:last-child { color: var(--accent); }
.photo--cover { aspect-ratio: 900 / 1164; }
.photo--cover img { top: 0; height: 100%; }

/* rolling quote ticker (Journal) */
.marquee--quote .marquee-track span:not(.hl) { color: var(--cream); -webkit-text-stroke: 0; font-family: var(--f-fun); }
.marquee--quote .marquee-track span.hl { color: var(--accent); -webkit-text-stroke: 0; font-family: var(--f-fun); }
.marquee--quote .marquee-track { gap: 28px; }
.hint { font-size: .9rem; opacity: .75; margin: 0 0 .6em; }

/* Honey Basil: the playful display face, used in boxes and to break up lists */
.card h3, .eco h3, .bring, .pile .chip, .price .big, .day, .nots, .chips-label, .list li.list-head { font-family: var(--f-fun); font-weight: 400; letter-spacing: 0; text-transform: lowercase; }
.card .num { font-family: var(--f-fun); }
.card h3 { font-size: clamp(1.3rem, 2.1vw, 1.8rem); line-height: 1; }
.pile .chip { font-weight: 400; }
.chips-label { font-size: 1.35rem; margin: 1.1em 0 .45em; }
.list li.list-head { padding: 28px 0 8px; border-bottom: 0; font-size: 1.7rem; line-height: 1; color: var(--accent); }
.list li.list-head:first-child { padding-top: 0; }
.sec--butter .list li.list-head { color: var(--green); }
.price .big { line-height: .95; }
.eco .step { font-size: 1.7rem; line-height: 1; }

/* ---------- bigger pills on the Journal hero ---------- */
.chip--lg { font-size: clamp(1.1rem, 1.9vw, 1.5rem); padding: 12px 26px; font-weight: 600; }
body[data-page="journal"] .note { font-size: clamp(2.2rem, 3.8vw, 3.2rem); }

/* ---------- Lab: "you've done the homework" checks ---------- */
.checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 2em 0 2.4em; }
@media (max-width: 800px) { .checks { grid-template-columns: 1fr; } }
.check { position: relative; border-radius: var(--radius); padding: 26px 24px 28px 24px; color: var(--ink); min-height: 150px; display: flex; flex-direction: column; gap: 14px; }
.check:nth-child(1) { background: var(--yellow); }
.check:nth-child(2) { background: var(--pink); }
.check:nth-child(3) { background: var(--blue); }
.check svg { width: 46px; height: 46px; padding: 8px; border-radius: 50%; background: var(--ink); fill: none; stroke: var(--cream); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.check p { margin: 0; font-family: var(--f-head); font-weight: 650; font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.12; letter-spacing: -.02em; }
.sec--butter .quote em { color: var(--green); }

/* ---------- Lab: confetti colors in the months and in "what you get" ---------- */
.rail-fill { background: linear-gradient(90deg, var(--blue), var(--pink) 40%, var(--yellow) 70%, var(--orange)); }
.rail-dot:nth-child(3).is-lit i { background: var(--yellow); border-color: var(--yellow); }
.rail-dot:nth-child(4).is-lit i { background: var(--pink); border-color: var(--pink); }
.rail-dot:nth-child(5).is-lit i { background: var(--blue); border-color: var(--blue); }
.rail-dot:nth-child(6).is-lit i { background: var(--orange); border-color: var(--orange); }
.rail-dot:nth-child(7).is-lit i { background: var(--cream); border-color: var(--cream); }
.phase:nth-child(1) .when { color: var(--yellow); }
.phase:nth-child(2) .when { color: var(--pink); }
.phase:nth-child(3) .when { color: var(--orange); }
.phase:nth-child(1) .day, .phase:nth-child(2) .day { color: var(--pink); }
.chips--solid li:nth-child(5n+1) { background: var(--yellow); border-color: var(--yellow); }
.chips--solid li:nth-child(5n+2) { background: var(--pink); border-color: var(--pink); }
.chips--solid li:nth-child(5n+3) { background: var(--blue); border-color: var(--blue); }
.chips--solid li:nth-child(5n+4) { background: var(--orange); border-color: var(--orange); }
.chips--solid li:nth-child(5n+5) { background: var(--cream); border-color: var(--cream); }
.phase:nth-child(1) .chips:not(.chips--solid) li:nth-child(4n+1), .phase:nth-child(2) .chips:not(.chips--solid) li:nth-child(4n+1) { border-color: var(--yellow); }
.phase:nth-child(1) .chips:not(.chips--solid) li:nth-child(4n+2), .phase:nth-child(2) .chips:not(.chips--solid) li:nth-child(4n+2) { border-color: var(--pink); }
.phase:nth-child(1) .chips:not(.chips--solid) li:nth-child(4n+3), .phase:nth-child(2) .chips:not(.chips--solid) li:nth-child(4n+3) { border-color: var(--blue); }
.phase:nth-child(1) .chips:not(.chips--solid) li:nth-child(4n+4), .phase:nth-child(2) .chips:not(.chips--solid) li:nth-child(4n+4) { border-color: var(--orange); }

body[data-page="lab"] .get .card { border-color: transparent; color: var(--ink); }
body[data-page="lab"] .get .card .num { -webkit-text-stroke-color: rgba(16,32,31,.55); }
body[data-page="lab"] .get .card:nth-child(6n+1) { background: var(--yellow); }
body[data-page="lab"] .get .card:nth-child(6n+2) { background: var(--pink); }
body[data-page="lab"] .get .card:nth-child(6n+3) { background: var(--blue); }
body[data-page="lab"] .get .card:nth-child(6n+4) { background: var(--orange); }
body[data-page="lab"] .get .card:nth-child(6n+5) { background: var(--cream); }
body[data-page="lab"] .get .card:nth-child(6n+6) { background: var(--green); color: var(--cream); }
body[data-page="lab"] .get .card:nth-child(6n+6) .num { -webkit-text-stroke-color: rgba(246,241,237,.6); }
body[data-page="lab"] .get .card:hover { transform: translateY(-6px); color: inherit; }
body[data-page="lab"] .get .card:nth-child(6n+6):hover { color: var(--cream); }

/* ---------- Lab: practice as a sun salutation (illustrated flow) ---------- */
.flow { display: grid; grid-template-columns: minmax(280px, 460px) 1fr; gap: clamp(28px, 5vw, 70px); align-items: center; margin-top: 2.4em; }
@media (max-width: 900px) { .flow { grid-template-columns: 1fr; } }
.flow-stage { background: var(--cream); color: var(--ink); border-radius: 32px; padding: 14px 14px 18px; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.flow-frame { position: relative; aspect-ratio: 4 / 3; }
.flow-sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.flow-sky .sun { fill: var(--yellow); }
.flow-sky .ground { stroke: var(--green); stroke-opacity: .35; stroke-width: 1.6; stroke-linecap: round; }
.pose { position: absolute; left: 50%; bottom: 6%; width: auto; height: auto; max-width: 88%; max-height: 90%; opacity: 0; transform: translateX(-50%) translateY(10px) scale(.97); transition: opacity .7s ease, transform .7s ease; }
.pose.is-on { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.flow-cap { margin: 4px 0 0; text-align: center; font-family: var(--f-fun); font-size: clamp(1.7rem, 3vw, 2.4rem); text-transform: lowercase; color: var(--green); min-height: 1.2em; line-height: 1; }
.flash-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1100px) { .flash-grid { grid-template-columns: repeat(2, 1fr); } }
.flash { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 16px; border-radius: 18px; color: var(--ink); opacity: .6; transform: scale(.97); transition: opacity .35s, transform .35s, box-shadow .35s; }
.flash:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }
.flash.is-on { opacity: 1; transform: translateY(-6px) scale(1); box-shadow: 0 14px 30px rgba(0,0,0,.35); }
.flash:nth-child(4n+1) { background: var(--yellow); }
.flash:nth-child(4n+2) { background: var(--pink); }
.flash:nth-child(4n+3) { background: var(--blue); }
.flash:nth-child(4n+4) { background: var(--cream); }
.flash .mini { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; object-position: 50% 100%; }
.flash h3 { margin: 0; font-family: var(--f-fun); font-weight: 400; text-transform: lowercase; letter-spacing: 0; font-size: 1.25rem; line-height: 1; }
.flash p { margin: 0; font-size: .86rem; line-height: 1.3; }
@media (prefers-reduced-motion: reduce) { .flash { opacity: 1; transform: none; } .pose { transition: none; } }

/* ---------- Lab: homework "but" card, FAQ, chips on cream ---------- */
.check--but { background: var(--orange) !important; }
.sec--butter .chips li { border-color: rgba(16, 32, 31, .45); }
.sec--butter .chips-label { color: var(--green); }
.faq { display: grid; gap: 12px; margin-top: 2em; max-width: 860px; }
.faq details { border: 1.5px solid var(--line); border-radius: 18px; padding: 0 22px; transition: background .25s; }
.faq details[open] { background: var(--ink-2); border-color: var(--accent); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 0; font-family: var(--f-head); font-weight: 650; font-size: clamp(1.05rem, 1.6vw, 1.3rem); letter-spacing: -.02em; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-fun); font-size: 1.8rem; color: var(--accent); line-height: 1; transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 20px; max-width: 42em; opacity: .92; }

/* ---------- About ---------- */
.about-chips { margin: 1.2em 0 1em; }

/* ---------- phones and tablets: keep every tag inside the photo, below the face ---------- */
@media (max-width: 860px) {
  .hero-art .float { top: auto !important; left: 10px !important; right: auto !important; margin: 0 !important; z-index: 4; }
  .hero-art .float:nth-last-of-type(1) { bottom: 10px !important; }
  .hero-art .float:nth-last-of-type(2) { bottom: 74px !important; }
  .hero-art .float:nth-last-of-type(3) { bottom: 138px !important; }
  .hero-art .badge, .hero-art .stamp { right: 10px; bottom: 10px; }
  .hero-art .note { top: -34px !important; right: 6px !important; left: auto !important; }
  .chip--lg { font-size: 1.05rem; padding: 10px 20px; }
  .hero-art { margin-top: 38px; }
}

/* ---------- the GoHighLevel opt-in form (an iframe) ---------- */
.optin { max-width: 520px; min-height: 440px; border-radius: 22px; overflow: hidden; }
.optin iframe { display: block; width: 100%; height: 100%; min-height: 440px; border: 0; }

/* ---------- the GoHighLevel booking calendar (an iframe) ---------- */
.booking { margin-top: 3em; scroll-margin-top: 90px; }
.booking h3 { margin-bottom: .6em; }
.booking-frame { background: var(--cream); border-radius: 22px; overflow: hidden; min-height: 780px; }
.booking-frame iframe { display: block; width: 100%; min-height: 780px; border: 0; }
.booking .hint a { color: var(--accent); }

/* ---------- legal pages (copied word for word) and small home-page bits ---------- */
.legal-sec { padding-block: clamp(56px, 8vw, 110px); }
.legal { max-width: 800px; }
.legal h1, .legal h2, .legal h3, .legal h4 { text-transform: none; letter-spacing: -.01em; }
.legal h1 { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: .6em; }
.legal h2 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin-top: 1.8em; }
.legal h3, .legal h4 { font-size: 1.15rem; margin-top: 1.4em; }
.legal p, .legal li { font-size: 1rem; line-height: 1.65; opacity: .94; }
.legal ul, .legal ol { padding-left: 1.3em; margin: 0 0 1em; }
.legal a { color: var(--accent); }
.footer a { color: inherit; }
.eco .desc { font-size: .95rem; line-height: 1.4; margin: .7em 0 0; }
.bonus { margin-top: 2em; border: 2px solid var(--accent); border-radius: 22px; padding: 26px 28px 8px; max-width: 760px; }
.bonus h3 { font-family: var(--f-fun); font-weight: 400; text-transform: lowercase; letter-spacing: 0; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.bonus .chips-label { margin-top: 0; }