/* Homepage scroll story. Base styles are the complete static story (reduced motion, no JS).
   html.js-motion adds pinned and scrubbed layouts only after GSAP loads. */

.ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-paper { background: var(--mh-paper); color: var(--mh-ink); }
.btn-paper:hover { background: #fff; }
.bubble {
  font-family: var(--f-hand); font-weight: 700; font-size: 22px; line-height: 1.3; color: var(--mh-ink);
  background: var(--mh-paper); border: 2.5px solid var(--mh-ink); border-radius: 16px; padding: 10px 14px; margin: 0;
  position: relative; max-width: 230px; box-shadow: 4px 4px 0 var(--mh-ink);
}
.muted-dark { color: var(--mh-mist); font-weight: 400; }

/* ============ SCENE 1: THE PULSE ============ */
.s-pulse { position: relative; min-height: 100svh; padding-top: calc(var(--header-h) + 26px); overflow: hidden; display: flex; flex-direction: column; }
.pulse-grid { position: relative; z-index: 2; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.pulse-copy { position: relative; z-index: 3; }
.s-pulse .h1 { font-size: clamp(64px, 17vw, 132px); line-height: .88; letter-spacing: -0.025em; margin-bottom: 18px; }
.s-pulse .h1 .ln { display: block; }
.s-pulse .h1 .w { display: inline-block; }
.s-pulse .h1 .red { color: var(--mh-heart); }
.pulse-sub { margin-bottom: 20px; }
.pulse-ctas .btn { flex: 1 1 auto; }
.scroll-cue { font-size: .875rem; color: var(--mh-muted); margin: 14px 0 0; font-family: var(--f-label); letter-spacing: .06em; text-transform: uppercase; }
.pulse-art { position: relative; z-index: 2; flex: 1; display: flex; align-items: flex-end; justify-content: center; min-height: 260px; margin: 0 calc(var(--gutter) * -1); }
.pulse-art img { width: min(100%, 520px); height: auto; max-height: 44svh; object-fit: contain; object-position: bottom center; }
.hero-line { position: absolute; left: 0; right: 0; top: 62%; height: 110px; margin-top: -55px; z-index: 1; pointer-events: none; }
.hero-line svg { width: 100%; height: 100%; overflow: visible; }
.hero-line path { fill: none; stroke: var(--mh-heart); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hero-seed { position: absolute; left: 56.53%; top: 6px; width: 14px; height: 18px; margin: -9px 0 0 -7px; border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%; background: var(--mh-seed); border: 2.5px solid var(--mh-ink); opacity: 0; }
@media (min-width: 1024px) {
  .s-pulse { padding-top: var(--header-h); justify-content: center; }
  .pulse-grid { display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; gap: 24px; flex: 0 1 auto; min-height: calc(100vh - var(--header-h)); }
  .pulse-copy { grid-column: 1 / span 7; padding-bottom: 40px; }
  .s-pulse .h1 { font-size: clamp(88px, 9.4vw, 150px); }
  .pulse-ctas .btn { flex: 0 0 auto; }
  .pulse-art { grid-column: 8 / span 5; margin: 0 -18vw 0 -2vw; align-self: end; min-height: 0; }
  .pulse-art img { width: 100%; max-width: 720px; max-height: 78vh; }
  .hero-line { top: 88%; height: 160px; margin-top: -80px; }
}

/* ============ SCENE 2: SEED TO STALK ============ */
.s-grow { position: relative; background: var(--mh-stalk); color: var(--mh-paper); overflow: hidden; }
.grow-bg { position: absolute; inset: 0; background: var(--mh-stalk); }
.grow-stage { position: relative; display: grid; gap: 24px; padding: 64px var(--gutter) 48px; max-width: var(--max); margin: 0 auto; }
.soil-line { display: none; }
.plant { width: min(80vw, 360px); height: auto; margin: 0 auto; overflow: visible; }
.grow-hart { display: flex; align-items: flex-end; gap: 8px; justify-content: center; }
.grow-hart img { width: 120px; height: auto; }
.grow-beats { display: grid; gap: 22px; }
.beat .h3 { margin-bottom: 6px; color: var(--mh-paper); }
.beat p { margin-bottom: 6px; }
.s-grow .textlink { color: var(--mh-paper); }
.s-grow .footnote { color: var(--mh-paper); }
.surface-green .textlink, .surface-green .footnote { color: var(--mh-paper); }
@media (min-width: 1024px) {
  .grow-stage { grid-template-columns: 1fr 1fr; align-items: center; padding: 96px var(--gutter); }
  .grow-beats { grid-column: 1; grid-row: 1; }
  .plant { grid-column: 2; grid-row: 1 / span 2; width: 340px; }
  .grow-hart { grid-column: 1; }
}

html.js-motion .s-grow { height: 100svh; background: var(--mh-paper); }
html.js-motion .grow-bg { opacity: 0; }
html.js-motion .grow-stage { position: absolute; inset: 0; display: block; padding: 0; max-width: none; }
html.js-motion .soil-line { display: block; position: absolute; left: 0; right: 0; top: var(--soil, 70%); height: 3px; background: var(--mh-heart); border-radius: 2px; }
html.js-motion .plant { position: absolute; left: 50%; width: auto; height: 66svh; top: calc(var(--soil, 70%) - 66svh * 0.8); transform-origin: 50% 80%; translate: -50% 0; }
html.js-motion .grow-hart { position: absolute; display: block; right: 4vw; top: calc(var(--soil, 70%) - 30svh); width: 34vw; max-width: 170px; }
html.js-motion .grow-hart img { width: 100%; height: 30svh; object-fit: contain; object-position: bottom; }
html.js-motion .grow-hart .bubble { position: absolute; bottom: 100%; right: 0; width: 170px; font-size: 18px; margin-bottom: 6px; }
@media (max-width: 1023px) { html.js-motion .plant { left: 36%; } }
html.js-motion .grow-beats { position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--soil, 70%) + 3px); background: var(--mh-stalk); padding: 22px var(--gutter) 24px; display: block; }
html.js-motion .beat { position: absolute; left: var(--gutter); right: var(--gutter); top: 22px; }
html.js-motion .s-grow { --soil: 70%; }
@media (min-width: 1024px) {
  html.js-motion .s-grow { --soil: 82%; }
  html.js-motion .plant { height: 80vh; top: calc(var(--soil) - 80vh * 0.8); left: 58%; }
  html.js-motion .grow-beats { top: 0; bottom: auto; height: 100%; right: auto; width: 40vw; background: none; padding: 0; }
  html.js-motion .beat { left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); right: auto; width: 34vw; max-width: 460px; top: 38%; }
  html.js-motion .beat .h3 { font-size: clamp(30px, 3.2vw, 48px); margin-bottom: 12px; }
  html.js-motion .beat p { font-size: 20px; }
  html.js-motion .grow-hart { right: auto; left: calc(58% + 150px); top: calc(var(--soil) - 36vh); width: 200px; max-width: none; }
  html.js-motion .grow-hart img { height: 36vh; }
  html.js-motion .grow-hart .bubble { right: auto; left: 55%; font-size: 22px; width: 230px; }
}

/* ============ SCENE 3: SO IS HEMP JUST WEED ============ */
.s-diff { padding: 72px 0 64px; background: var(--mh-paper); }
.diff-head { margin-bottom: 20px; }
.diff-head .h2 { margin-bottom: 10px; }
.diff-tabs { display: flex; border: 2px solid var(--mh-ink); border-radius: 10px; overflow: hidden; margin-bottom: 16px; }
.diff-tabs button { flex: 1; min-height: 48px; border: 0; background: transparent; font-weight: 700; cursor: pointer; }
.diff-tabs button[aria-selected="true"] { background: var(--mh-ink); color: var(--mh-paper); }
.diff-stage { position: relative; }
.panel { border-radius: 12px; padding: 22px 20px; position: relative; overflow: hidden; min-height: 300px; }
.panel-hemp { background: #EADFCC; border: 2px solid var(--mh-ink); }
.panel-mj { background: var(--mh-ink); color: var(--mh-paper); }
.panel .h3 { margin-bottom: 10px; }
.panel p { margin-bottom: 8px; max-width: 34ch; }
.panel .strong { font-weight: 700; }
.panel-hemp .h3 { color: var(--mh-stalk); }
.panel-mj .h3 { color: var(--mh-ochre); }
.panel[hidden] { display: none; }
.diff-hart { display: flex; align-items: flex-end; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.diff-hart img { width: 86px; height: auto; order: 2; }
.diff-hart .bubble { font-size: 20px; max-width: 190px; }
@media (max-width: 1023px) { .diff-hart .bubble { border: 0; box-shadow: none; background: transparent; padding: 0; text-align: right; } }
.divider { display: none; }
.diff-table-wrap { margin-top: 24px; }
.diff-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.diff-table th, .diff-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--mh-greystone); vertical-align: top; }
.diff-table thead th { font-family: var(--f-label); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.diff-table tbody th { font-weight: 700; width: 30%; }
.diff-close { margin-top: 18px; display: grid; gap: 12px; justify-items: start; }
.diff-close p { margin: 0; font-weight: 600; }
@media (min-width: 1024px) {
  .diff-tabs { display: none; }
  .panel[hidden] { display: block; }
  .diff-stage { height: min(44vh, 400px); border-radius: 14px; overflow: hidden; border: 2px solid var(--mh-ink); --split: 50%; }
  .panel { position: absolute; inset: 0; border-radius: 0; border: 0; padding: 36px 40px; }
  .panel-hemp { clip-path: inset(0 calc(100% - var(--split)) 0 0); z-index: 2; }
  .panel-mj .panel-copy { margin-left: 56%; }
  .panel-hemp .panel-copy { max-width: 36%; }
  .panel p { font-size: 19px; }
  .diff-hart { position: absolute; left: 50%; bottom: 0; margin: 0; height: 92%; align-items: flex-end; flex-direction: row; gap: 0; }
  .diff-hart img { width: auto; height: 100%; order: 1; }
  .diff-hart .bubble { order: 2; align-self: flex-start; margin: 12px 0 0 -10px; font-size: 22px; max-width: 250px; }
  .divider { display: block; position: absolute; top: 0; bottom: 0; left: var(--split); width: 4px; margin-left: -2px; background: var(--mh-heart); z-index: 5; cursor: ew-resize; touch-action: none; }
  .divider .handle { position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: var(--mh-heart); border: 3px solid var(--mh-paper); display: grid; place-items: center; box-shadow: 0 0 0 2px var(--mh-ink); }
  .divider:focus-visible .handle { outline: 3px solid var(--mh-ink); outline-offset: 3px; }
  .diff-table-wrap { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: end; margin-top: 18px; }
  .diff-table { font-size: 16px; }
  .diff-table th, .diff-table td { padding: 8px 10px; }
}
@media (min-width: 1024px) {
  html.js-motion .s-diff { height: 100vh; padding: calc(var(--header-h) + 34px) 0 24px; }
  html.js-motion .diff-head { display: flex; align-items: baseline; gap: 28px; }
  html.js-motion .diff-head .lede { margin: 0; }
  html.js-motion .diff-head .h2 { flex: 0 0 auto; }
}

/* ============ SCENE 4: THE USES ORBIT ============ */
.s-uses { background: var(--mh-ink); padding: 72px 0; overflow: hidden; }
.uses-top { display: grid; gap: 4px; }
.counter { font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96; font-size: clamp(64px, 18vw, 168px); line-height: .9; margin: 10px 0 6px; color: var(--mh-paper); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.counter .plus { color: var(--mh-ochre); }
.counter-cap { color: var(--mh-ochre); font-weight: 700; font-size: 14px; letter-spacing: .04em; margin-bottom: 12px; }
.uses-body { color: var(--mh-mist); max-width: 46ch; }
.orbit { position: relative; width: min(88vw, 420px); aspect-ratio: 1; margin: 18px auto 8px; }
.orbit-stalk { position: absolute; left: 50%; top: 50%; height: 56%; width: auto; transform: translate(-50%, -50%); }
.ring { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.ring::before { content: ""; position: absolute; left: 50%; top: 50%; border: 1.5px dashed #5A4C44; border-radius: 50%; transform: translate(-50%, -50%); }
.ring-in::before { width: 66%; height: 66%; }
.ring-out::before { width: 94%; height: 94%; }
@media (max-width: 1023px) { .ring-out::before { width: 86%; height: 86%; } .ring li > span { font-size: 12px; padding: 4px 7px; } }
.ring li { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.ring li > span {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--mh-paper); background: var(--mh-ink); border: 1.5px solid #5A4C44; border-radius: 8px; padding: 5px 9px;
}
.ring svg { width: 15px; height: 15px; fill: none; stroke: var(--mh-ochre); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.timeline { list-style: none; margin: 20px 0 18px; padding: 0 0 0 22px; position: relative; display: grid; gap: 14px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: #4A3E37; }
.timeline .track-fill { position: absolute; left: 6px; top: 6px; width: 2px; height: calc(100% - 12px); background: var(--mh-ochre); transform-origin: top; }
.timeline li { position: relative; display: grid; gap: 2px; font-size: 15px; color: var(--mh-mist); }
.timeline li::before { content: ""; position: absolute; left: -21px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--mh-ochre); border: 2px solid var(--mh-ink); }
.timeline .yr { font-family: var(--f-label); font-weight: 700; color: var(--mh-ochre); font-size: 16px; }
.uses-cta { font-size: 16px; }
@media (min-width: 1024px) {
  .uses-top { grid-template-columns: 1.05fr 1fr; align-items: center; column-gap: 40px; }
  .uses-head { grid-column: 1; }
  .orbit { grid-column: 2; grid-row: 1 / span 2; width: min(42vw, 52vh, 520px); margin: 0 auto; }
  .ring li > span { font-size: 14px; padding: 6px 10px; }
  .uses-bottom { display: grid; grid-template-columns: 1fr 2.4fr; gap: 40px; align-items: start; margin-top: 18px; }
  .timeline { grid-template-columns: repeat(4, 1fr); padding: 26px 0 0; gap: 18px; margin: 0; }
  .timeline::before { left: 0; right: 0; top: 7px; bottom: auto; width: auto; height: 2px; }
  .timeline .track-fill { left: 0; top: 7px; height: 2px; width: 100%; transform-origin: left; }
  .timeline li::before { left: 0; top: -26px; }
}
html.js-motion .s-uses { padding: 0; }
html.js-motion .uses-top { padding: calc(var(--header-h) + 34px) 0 20px; align-content: start; }
html.js-motion .uses-bottom { padding-bottom: 64px; }
@media (max-width: 1023px) {
  html.js-motion .orbit { width: min(86vw, 46svh); margin-top: 6px; }
}
@media (min-width: 1024px) {
  html.js-motion .s-uses { height: 100vh; }
  html.js-motion .uses-top { min-height: 0; padding-top: calc(var(--header-h) + 30px); padding-bottom: 0; }
  html.js-motion .uses-bottom { padding-bottom: 0; }
}

/* ============ SCENE 5: PICK YOUR RITUAL ============ */
.s-rituals { padding: 64px 0 40px; background: var(--mh-paper); }
.rit-mobile-head .h2 { margin-bottom: 8px; }
.rit-tabs { position: sticky; top: calc(var(--header-h) + 18px); z-index: 20; display: flex; gap: 6px; padding: 10px var(--gutter); background: var(--mh-paper); overflow-x: auto; margin-top: 10px; }
.rit-tabs button { min-height: 44px; padding: 0 16px; border-radius: 8px; border: 2px solid var(--mh-ink); background: transparent; font-weight: 700; cursor: pointer; white-space: nowrap; }
.rit-tabs button[aria-selected="true"] { background: var(--mh-ink); color: var(--mh-paper); }
.rit-viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.rit-viewport::-webkit-scrollbar { display: none; }
.rit-track { display: flex; align-items: flex-start; gap: 12px; padding: 8px var(--gutter) 12px; width: max-content; }
.rit-intro { display: none; }
.rit-panel { width: 88vw; max-width: 520px; scroll-snap-align: center; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.surface-paper { background: #ECE1CF; }
.surface-ink { background: var(--mh-ink); color: var(--mh-paper); }
.rit-unsure { background: var(--mh-heart); color: #fff; }
.rit-text { padding: 20px 18px 22px; display: flex; flex-direction: column; gap: 12px; order: 2; flex: 1; }
.rit-word { font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96; font-size: clamp(56px, 16vw, 120px); line-height: .85; letter-spacing: -0.02em; }
.rit-copy { font-size: 18px; margin: 0; max-width: 32ch; }
.rit-art { order: 1; aspect-ratio: 4 / 3; overflow: hidden; }
.rit-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tiles .tile .body { padding: 10px 2px 0; }
.rit-panel .tile { background: transparent; border: 0; border-radius: 0; overflow: visible; }
.rit-panel .tile .pic { border-radius: 10px; overflow: hidden; }
.tiles .tile .name { font-size: 15px; }
.tiles .tile .price { font-size: 13px; }
.tiles .tile .row { flex-wrap: wrap; }
.rit-panel > .rit-text > .btn { align-self: flex-start; }
.rit-unsure .rit-word { color: #fff; }
.rit-unsure .hand { color: var(--mh-paper); margin: 0; }
.rit-unsure .btn-ghost { border-color: #fff; color: #fff; }
.rit-bundle-art { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; background: var(--mh-heart-deep); padding: 20px 12px 0; }
.rit-bundle-art img { width: 100%; height: auto; object-fit: contain; }
.rit-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 4px; }
.rit-controls .icon-btn { border: 2px solid var(--mh-ink); }
@media (min-width: 1024px) {
  .s-rituals { padding: 96px 0 56px; }
  .rit-mobile-head { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rit-tabs { display: none; }
  .rit-intro { display: flex; flex-direction: column; justify-content: center; gap: 14px; width: 34vw; padding: 0 3vw 0 max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); flex-shrink: 0; }
  .rit-intro .hand { color: var(--mh-heart); }
  .rit-track { gap: 0; padding: 0; }
  .rit-panel { width: 80vw; max-width: none; height: min(78vh, 760px); flex-direction: row; border-radius: 0; scroll-snap-align: start; }
  .rit-text { order: 1; flex: 0 0 45%; padding: 48px 40px; justify-content: center; }
  .rit-word { font-size: clamp(80px, 8.4vw, 136px); }
  .rit-copy { font-size: 20px; }
  .rit-art { order: 2; flex: 1; aspect-ratio: auto; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 170px)); }
  .rit-bundle-art { padding: 60px 40px 0; align-content: end; }
}
html.js-motion .s-rituals { overflow: hidden; }
@media (min-width: 1024px) {
  html.js-motion .s-rituals { height: 100vh; padding: var(--header-h) 0 0; display: flex; flex-direction: column; justify-content: center; }
  html.js-motion .rit-viewport { overflow: visible; scroll-snap-type: none; }
  html.js-motion .rit-controls { display: none; }
  html.js-motion .rit-panel { height: calc(100vh - var(--header-h) - 18px); }
}

/* ============ SCENE 6: READ YOUR COA ============ */
.s-coa { padding: 72px 0; background: var(--mh-paper); }
.coa-grid { display: grid; gap: 24px; }
.coa-copy .h2 { margin-bottom: 18px; font-size: clamp(32px, 4.4vw, 60px); }
.coa-steps { list-style: none; margin: 0 0 22px; padding: 0; border-top: 1px solid var(--mh-greystone); }
.coa-steps .step { border-bottom: 1px solid var(--mh-greystone); }
.coa-steps summary { min-height: 52px; display: flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 700; font-size: 18px; list-style: none; }
.coa-steps summary::-webkit-details-marker { display: none; }
.coa-steps summary::after { content: "+"; margin-left: auto; font-family: var(--f-label); font-size: 22px; }
.coa-steps details[open] summary::after { content: "\2212"; }
.coa-steps details p { margin: 0 0 14px 44px; max-width: 46ch; }
.coa-steps .num { width: 32px; height: 32px; border-radius: 8px; background: var(--mh-ink); color: var(--mh-paper); display: grid; place-items: center; font-family: var(--f-label); font-size: 16px; flex-shrink: 0; }
.coa-steps .step.active .num { background: var(--mh-heart); }
.coa-visual { position: relative; display: grid; gap: 16px; }
.coa-jar { display: flex; align-items: flex-end; gap: 10px; }
.jar-svg { width: 120px; height: auto; flex-shrink: 0; }
.qr { transform-box: fill-box; transform-origin: center; }
.coa-hart { display: flex; align-items: flex-end; gap: 6px; }
.coa-hart img { width: 70px; height: auto; }
.coa-hart .bubble { font-size: 17px; flex: 0 0 160px; order: -1; margin-bottom: 70px; }
.coa-doc { background: #FFFCF6; border: 2px solid var(--mh-ink); border-radius: 10px; padding: 14px; font-size: 14px; box-shadow: 6px 6px 0 var(--mh-greystone); }
.coa-sample { font-family: var(--f-label); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--mh-heart-deep); padding: 6px 8px; margin: -14px -14px 12px; text-align: center; border-radius: 8px 8px 0 0; }
.coa-title { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-weight: 700; font-size: 13px; border-bottom: 2px solid var(--mh-ink); padding-bottom: 8px; margin-bottom: 6px; }
.region { position: relative; padding: 10px 10px 10px 48px; border-radius: 8px; transition: opacity var(--half); }
.region::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--mh-heart); border-radius: 8px; opacity: 0; transition: opacity var(--half); pointer-events: none; }
.region.active::after { opacity: 1; }
.coa-doc.stepping .region:not(.active) { opacity: .4; }
.region dl { margin: 0; display: grid; gap: 4px; }
.region dl div { display: flex; justify-content: space-between; gap: 10px; }
.region dt { font-family: var(--f-label); color: var(--mh-muted); }
.region dd { margin: 0; font-weight: 700; text-align: right; }
.region table { width: 100%; border-collapse: collapse; }
.region th, .region td { text-align: left; padding: 3px 0; border-bottom: 1px dotted var(--mh-greystone); }
.region th { font-family: var(--f-label); font-weight: 700; color: var(--mh-muted); font-size: 12px; }
.passes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.passes li { display: flex; justify-content: space-between; }
.passes b { color: var(--mh-stalk); }
.hot { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--mh-ink); background: var(--mh-paper); font-family: var(--f-label); font-weight: 700; font-size: 17px; cursor: pointer; display: grid; place-items: center; transition: background-color var(--half), color var(--half); }
.region.active .hot { background: var(--mh-heart); color: #fff; border-color: var(--mh-heart); }
@media (min-width: 1024px) {
  .coa-grid { grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; }
  .coa-visual { grid-template-columns: 210px 1fr; align-items: end; gap: 28px; }
  .coa-jar { flex-direction: column; align-items: center; }
  .jar-svg { width: 200px; }
  .coa-hart { position: absolute; left: -10px; bottom: -6px; }
  .coa-jar { position: relative; padding-bottom: 0; }
  .coa-hart { position: static; flex-direction: row; align-items: flex-end; margin-top: 8px; }
  .coa-hart img { width: 96px; }
  .coa-hart .bubble { order: 0; margin-bottom: 120px; font-size: 19px; flex: 0 0 210px; max-width: none; }
  .coa-doc { padding: 18px; font-size: 15px; }
  .coa-doc .coa-sample { margin: -18px -18px 14px; }
}
@media (min-width: 1024px) {
  html.js-motion .s-coa { height: 100vh; padding: calc(var(--header-h) + 30px) 0 20px; display: flex; align-items: center; }
  html.js-motion .s-coa .coa-copy .h2 { font-size: clamp(32px, 3.6vw, 54px); }
  html.js-motion .coa-steps details p { margin-bottom: 10px; }
}

/* ============ SCENE 7: FROM THE SOUTH SIDE ============ */
.s-roots { padding: 72px 0; background: var(--mh-paper); overflow: hidden; }
.roots-grid { display: grid; gap: 28px; }
.roots-copy .h2 { margin-bottom: 16px; }
.roots-copy p { max-width: 50ch; }
.pull { font-size: clamp(40px, 6vw, 64px); color: var(--mh-heart); margin: 6px 0 20px; transform: rotate(-3deg); transform-origin: left; }
.map-wrap { position: relative; width: 100%; max-width: 520px; margin: 0 auto; aspect-ratio: 6 / 7; overflow: hidden; border-radius: 16px; background: #EFE4D2; border: 2px solid var(--mh-ink); order: -1; }
.map { width: 100%; height: 100%; }
.map .zoom { transform-box: view-box; }
.seal { position: absolute; right: 6%; bottom: 6%; width: 34%; }
.seal svg { width: 100%; height: auto; filter: drop-shadow(3px 3px 0 var(--mh-ink)); }
.map-label { position: absolute; left: 14px; top: 12px; font-weight: 700; font-size: 13px; background: var(--mh-paper); border: 1.5px solid var(--mh-ink); border-radius: 6px; padding: 4px 8px; }
.roots-copy .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
@media (min-width: 1024px) {
  .roots-grid { grid-template-columns: 5fr 7fr; align-items: center; gap: 56px; }
  .map-wrap { order: 0; max-width: 560px; }
}
@media (min-width: 1024px) {
  html.js-motion .s-roots { height: 100vh; padding: calc(var(--header-h) + 24px) 0 24px; display: flex; align-items: center; }
  html.js-motion .map-wrap { max-height: calc(100vh - var(--header-h) - 80px); width: auto; height: calc(100vh - var(--header-h) - 80px); }
}

/* ============ SCENE 8: LEARN IT IN 90 SECONDS ============ */
.s-learn { padding: 72px 0; }
.learn-grid { display: grid; gap: 24px; }
.learn-head .h2 { margin-bottom: 10px; }
.learn-head .lede { color: var(--mh-paper); }
.poster { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; border: 3px solid var(--mh-ink); background: var(--mh-ochre); box-shadow: 8px 8px 0 var(--mh-ink); }
.poster-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.poster-title { position: absolute; right: 4%; top: 6%; width: 44%; display: grid; gap: 6px; justify-items: end; text-align: right; color: var(--mh-ink); }
.poster-title .stamp { background: var(--mh-paper); }
.stamp { display: inline-block; font-weight: 700; font-size: clamp(11px, 1.4vw, 14px); letter-spacing: .08em; text-transform: uppercase; border: 2px solid currentColor; border-radius: 6px; padding: 3px 8px; }
.poster-h { background: var(--mh-paper); padding: .32em .52em; border-radius: 6px; box-shadow: 3px 3px 0 var(--mh-ink); font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96; font-size: clamp(22px, 4vw, 52px); line-height: 1; letter-spacing: -0.02em; }
.play { position: absolute; right: 5%; bottom: 8%; width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--mh-ink); background: var(--mh-heart); color: #fff; display: grid; place-items: center; cursor: pointer; transition: transform var(--half) var(--ease-enter); box-shadow: 3px 3px 0 var(--mh-ink); }
.play svg { width: 30px; height: 30px; margin-left: 4px; }
.play:hover { transform: scale(1.06); }
@media (min-width: 768px) { .play { width: 72px; height: 72px; } }
.premiere { position: absolute; inset: 0; background: rgba(26, 22, 20, .94); color: var(--mh-paper); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; padding: 6% 7%; }
.premiere[hidden] { display: none; }
.premiere .stamp { color: var(--mh-ochre); }
.premiere p { margin: 0; }
.premiere .textlink { color: var(--mh-paper); }
.poster-meta { font-size: 13px; margin-top: 14px; color: var(--mh-paper); }
.poster-meta .textlink { color: var(--mh-paper); }
.ep-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(244, 235, 221, .3); }
.ep-list li { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding: 14px 0; border-bottom: 1px solid rgba(244, 235, 221, .3); }
.ep-n { font-weight: 700; color: var(--mh-paper); grid-row: span 2; padding-top: 3px; }
.ep-t { font-weight: 700; font-size: 18px; line-height: 1.25; }
.ep-s { font-family: var(--f-label); font-size: 13px; color: var(--mh-paper); }
.ep-live { color: var(--mh-paper); font-weight: 700; }
.ep-more { display: block !important; }
.ep-more .textlink { color: var(--mh-paper); }
.s-learn .btn-ghost { border-color: var(--mh-paper); color: var(--mh-paper); }
@media (min-width: 1024px) {
  .s-learn { padding: 112px 0; }
  .learn-grid { grid-template-columns: repeat(12, 1fr); gap: 28px 32px; }
  .learn-head { grid-column: 1 / -1; }
  .poster-col { grid-column: 1 / span 8; }
  .ep-list { grid-column: 9 / span 4; align-self: start; }
  .learn-ctas { grid-column: 1 / -1; }
}

/* ============ SCENE 9: JOIN THE HEMP LIFE ============ */
.s-join { padding: 72px 0 96px; }
.join-grid { display: grid; gap: 36px; }
.join-head { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.join-hart { display: none; width: 78px; height: auto; }
.join-form .lede { color: var(--mh-paper); margin-bottom: 18px; }
.join-form form { max-width: 520px; }
.join-form .check-row { color: var(--mh-mist); margin-bottom: 14px; }
.cap-success .h3 { color: var(--mh-ochre); margin-bottom: 4px; }
.dm-line { margin: 16px 0 0; color: var(--mh-mist); font-size: 16px; }
.reviews .eyebrow { color: var(--mh-ochre); margin-bottom: 12px; }
.review { margin: 0 0 14px; padding: 18px; border: 1px solid #3A302B; border-radius: 12px; }
.review blockquote { margin: 8px 0; font-size: 19px; line-height: 1.4; }
.review figcaption { font-size: 14px; color: var(--mh-mist); }
.stars { margin: 0; color: var(--mh-ochre); letter-spacing: 2px; }
.stars .label { color: var(--mh-mist); letter-spacing: 0; font-size: 13px; }
.review-fill { border-style: dashed; }
.trust { list-style: none; margin: 0; padding: 22px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; border-top: 1px solid #3A302B; }
.trust li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.trust svg { width: 24px; height: 24px; flex-shrink: 0; fill: none; stroke: var(--mh-ochre); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.trust-note { margin: 0; }
@media (min-width: 1024px) {
  .s-join { padding: 112px 0 140px; }
  .join-grid { grid-template-columns: minmax(0, 620px) minmax(0, 1fr); column-gap: 72px; align-items: center; }
  .join-hart { display: block; }
  .trust { grid-column: 2; grid-row: 1; grid-template-columns: 1fr; gap: 22px; border-top: 0; border-left: 1px solid #3A302B; padding: 8px 0 8px 48px; }
  .trust-note { grid-column: 2; margin-top: -20px; padding-left: 48px; }
}

/* ============ reduced motion: final states everywhere ============ */
@media (prefers-reduced-motion: reduce) {
  .hero-seed { display: none; }
}
html.rm .hero-seed { display: none; }

/* CD-00 2026-11-14: Hart never shares a frame with a product (character bible s7). COA scene runs without the mascot. */
.coa-hart { display: none !important; }

/* Demo build 2026-11-15: in the static layout (reduced motion or no GSAP) the grow-scene Hart shares the screen with the hero product still. Hart never shares a frame with a product. */
html:not(.js-motion) .grow-hart { display: none !important; }

/* Demo build 2026-11-15: keep Hart's full line clear of the marijuana panel at small desktop widths. */
@media (min-width: 1024px) and (max-width: 1279px) { .diff-hart .bubble { max-width: 190px; font-size: 19px; } }