/* Green Dominance, direction C: the page below the hero.
   Same language as the hero: one calm sage tone, giant lowercase type with a
   yellow full stop, white tabs cut into the corners of sheets, quiet pills. */
:root {
  --card: var(--green-tint);
  --bar: var(--surface);
  --on-dark-2: #a9c2a8;       /* secondary text on --night: 8:1 */
  --on-burgundy-2: #e8c5ca;   /* secondary text on --burgundy: 6.1:1 */
  --space: clamp(80px, 10vw, 160px);
  --pad: max(20px, 4vw);
  --sage: linear-gradient(#e1e6df, #d3dad2);
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
img { max-width: 100%; display: block; }
.ph { font-family: var(--mono); font-size: 0.82em; letter-spacing: 0.02em; color: var(--ink-2); }

/* ---------- nav: tabs on the hero, floating pills once you scroll ---------- */
.nav { position: fixed; inset: 0 0 auto 0; height: 0; z-index: 50; }
.nav .tab { transition: border-radius 0.4s, padding 0.4s, box-shadow 0.4s, top 0.4s; }
.nav.is-float .tab { top: 10px; border-radius: 99px; padding: 6px; box-shadow: 0 1px 0 rgba(21, 39, 26, 0.06), 0 8px 30px rgba(21, 39, 26, 0.12); }
.nav.is-float .tab-l { left: 10px; padding-right: 18px; }
.nav.is-float .tab-r { right: 10px; }
.nav.is-float .tab::before, .nav.is-float .tab::after { opacity: 0; }

/* ---------- shared type ---------- */
.giant {
  margin: 0; font: 500 clamp(68px, 11.5vw, 184px)/0.86 var(--display);
  letter-spacing: -0.05em; color: var(--forest);
}
.stop {
  display: inline-block; width: 0.15em; height: 0.15em; margin-left: 0.04em;
  border-radius: 50%; background: var(--yellow); vertical-align: 0;
}
.h2 { margin: 0; font: 500 clamp(40px, 5vw, 80px)/1 var(--display); letter-spacing: -0.035em; color: var(--forest); text-wrap: balance; }
.wrap { padding-inline: var(--pad); }
.nw { white-space: nowrap; }
.note { margin: 0; font: 500 11px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 99px; background: rgba(21, 39, 26, 0.07); font: 500 10px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); vertical-align: middle; }

.chip, .round, .pill-dark, .pill-yellow {
  display: inline-flex; align-items: center; justify-content: center; height: 44px;
  border-radius: 99px; font: 500 13px/1 var(--sans); letter-spacing: 0.04em; text-transform: uppercase;
  white-space: nowrap; transition: background 0.25s, color 0.25s, border-color 0.25s, scale 0.3s cubic-bezier(.2,.8,.2,1);
}
.chip { padding: 0 18px; border: 1px solid var(--line); }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.round { width: 48px; height: 48px; border: 1px solid var(--line); }
.round svg { width: 20px; height: 20px; }
.round:hover { border-color: var(--ink); }
.pill-dark { height: 48px; padding: 0 22px; background: var(--forest); color: #fff; }
.pill-dark:hover { background: var(--ink); }
.pill-yellow { height: 56px; padding: 0 30px; background: var(--yellow); color: var(--ink); font-size: 14px; }
.pill-yellow:hover { scale: 1.03; }

/* sheets below the hero: same radius, with a white tab cut into the top left */
.sec-sheet {
  position: relative; margin: var(--space) var(--gutter) 0; border-radius: 34px;
  padding: clamp(72px, 7vw, 112px) var(--pad) clamp(40px, 5vw, 80px);
}
.sec-tab {
  position: absolute; top: 0; left: 0; z-index: 2; display: flex; align-items: center;
  height: 44px; padding: 0 22px 0 26px; background: var(--page); border-bottom-right-radius: 22px;
  font: 500 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #5f665e; /* always on the white tab */
}
.sec-tab::before, .sec-tab::after { content: ""; position: absolute; width: 22px; height: 22px; background: radial-gradient(circle at 100% 100%, transparent 21.5px, var(--page) 22px); }
.sec-tab::before { left: 100%; top: 0; }
.sec-tab::after { left: 0; top: 100%; }

/* rails: horizontal, snap, no page scroll */
.rail {
  display: flex; gap: 16px; margin: 0; padding: 32px var(--pad) 8px; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad);
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; flex: none; }

/* ---------- 2. the range ---------- */
.range { padding-top: var(--space); }
.range-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.range-sub, .daily-sub, .people-sub { margin: 0 0 0.6em; max-width: 30ch; font-size: 17px; color: var(--ink-2); text-wrap: pretty; }
.range-tools { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 36px; flex-wrap: wrap; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.rail-nav { display: flex; gap: 8px; align-items: center; }
.card { width: clamp(270px, 23.5vw, 360px); }
.card.is-out { display: none; }
.card-img { position: relative; border-radius: 28px; overflow: hidden; background: var(--card); aspect-ratio: 520 / 640; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(.2,.8,.2,1); }
.card:hover .card-img img { transform: scale(1.045) translateY(-6px); }
.card-no { position: absolute; top: 18px; left: 20px; font: 500 11px/1 var(--mono); letter-spacing: 0.1em; color: var(--ink-2); }
.card-cat { position: absolute; top: 12px; right: 12px; height: 28px; display: flex; align-items: center; padding: 0 12px; border-radius: 99px; background: rgba(255, 255, 255, 0.6); font: 500 10px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.card-bar { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 6px 6px 6px 20px; border-radius: 99px; background: var(--bar); }
.card-text { flex: 1; min-width: 0; }
.card-name { margin: 0; font: 500 18px/1.15 var(--display); letter-spacing: -0.01em; }
.card-meta { margin: 3px 0 0; font: 500 10px/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-price { margin: 0; font: 500 16px/1 var(--display); white-space: nowrap; }
.card-bag { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--forest); color: #fff; transition: scale 0.3s cubic-bezier(.2,.8,.2,1), background 0.25s; }
.card-bag svg { width: 20px; height: 20px; }
.card-bag:hover { scale: 1.06; }
.card-bag.is-added { background: var(--yellow); color: var(--ink); }

/* ---------- 3. the herbs ---------- */
.herbs-sheet { background: var(--sage); }
.herbs-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 6vw, 110px); align-items: center; }
.herbs-intro { margin: 22px 0 0; max-width: 40ch; font-size: 17px; color: var(--ink-2); }
.herb-list { list-style: none; margin: 40px 0 28px; padding: 0; }
.herb-name {
  display: inline-flex; align-items: baseline; padding: 2px 0; min-height: 44px;
  font: 500 clamp(34px, 3.8vw, 60px)/1.06 var(--display); letter-spacing: -0.035em;
  color: rgba(21, 39, 26, 0.24); transition: color 0.35s;
}
.herb-name .stop { opacity: 0; scale: 0.4; transition: opacity 0.3s, scale 0.45s cubic-bezier(.2,.8,.2,1); }
.herb-name:hover { color: rgba(21, 39, 26, 0.5); }
.herb-name[aria-pressed="true"] { color: var(--forest); }
.herb-name[aria-pressed="true"] .stop { opacity: 1; scale: 1; }
.herb-stage { position: relative; aspect-ratio: 2 / 3; max-height: 82vh; border-radius: 26px; overflow: hidden; background: #dde3dc; justify-self: end; width: 100%; }
.herb-fig { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 0.7s ease; }
.herb-fig.is-on { opacity: 1; }
.herb-fig img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.6s cubic-bezier(.2,.8,.2,1); }
.herb-fig.is-on img { transform: none; }
.herb-fig figcaption {
  position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 18px; border-radius: 99px; background: rgba(255, 255, 255, 0.66);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.herb-cap-name { font: 500 17px/1.1 var(--display); }
.herb-cap-in { font: 500 10px/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); text-align: right; }

/* ---------- 4. every day: the day as tones, morning yellow to evening burgundy ---------- */
.daily { padding-top: var(--space); }
.daily .wrap { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.day { gap: 0; }
.moment {
  width: clamp(250px, 18.4vw, 330px); display: flex; flex-direction: column;
  padding: 24px 22px 22px; background: var(--tone);
}
.moment:first-child { border-radius: 28px 0 0 28px; }
.moment:last-child { border-radius: 0 28px 28px 0; }
.moment-when { margin: 0; font: 500 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg2); }
.moment-title { margin: 8px 0 0; font: 500 30px/1.05 var(--display); letter-spacing: -0.025em; color: var(--fg); }
.moment img { width: 100%; height: auto; margin: 4px 0 0; }
.moment-line { margin: 0; flex: 1; font-size: 14px; color: var(--fg2); text-wrap: pretty; }
.moment-link {
  display: flex; justify-content: space-between; align-items: center; margin-top: 16px; min-height: 44px;
  padding: 0 16px; border-radius: 99px; background: var(--chip, rgba(255, 255, 255, 0.7)); color: var(--fg);
  font: 500 14px/1 var(--display);
}
.moment-link span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--fg2); }
.moment-link:hover { background: #fff; color: var(--green-deep); }
.moment-link:hover span { color: var(--green-deep); }

/* ---------- 5. people ---------- */
.people { padding-top: var(--space); }
.people-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.people-sub .tag { margin-left: 6px; }
.story { position: relative; width: clamp(280px, 24vw, 380px); aspect-ratio: 2 / 3; border-radius: 28px; overflow: hidden; background: #cfd5ce; }
.story img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.story:hover img { transform: scale(1.03); }
.story blockquote {
  position: absolute; inset: auto 0 0 0; margin: 0; padding: 96px 22px 20px; color: #fff;
  background: linear-gradient(rgba(12, 22, 14, 0), rgba(12, 22, 14, 0.82) 46%);
}
.story blockquote p { margin: 0; font: 400 16px/1.42 var(--sans); text-wrap: pretty; }
.story footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; font: 500 10px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.story-uses { padding: 7px 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.16); }

/* ---------- 6. easy ---------- */
.easy-sheet { background: #e9f0e6; }
.easy-line {
  margin: 0; max-width: 24ch; font: 500 clamp(32px, 4.4vw, 70px)/1.16 var(--display);
  letter-spacing: -0.03em; color: var(--forest); text-wrap: balance;
}
.token {
  display: inline-flex; align-items: center; height: 1.12em; padding: 0 0.42em; margin: 0 0.04em;
  border-radius: 99px; background: #fff; font-size: 0.66em; letter-spacing: -0.01em; vertical-align: 0.12em;
}
.token-dark { background: var(--forest); color: #fff; }
.token-ph { background: transparent; border: 1.5px dashed rgba(21, 39, 26, 0.35); font-family: var(--mono); font-size: 0.4em; letter-spacing: 0; color: var(--ink-2); height: 1.9em; vertical-align: 0.4em; }
.easy-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 48px; flex-wrap: wrap; font-size: 15px; color: var(--ink-2); }
.easy-foot p { margin: 0; }

/* ---------- 7. passed on: the high point ---------- */
.passed { margin-top: var(--space); }
.passed-pin { position: relative; height: 240vh; }
.sheet.passed-sheet { position: sticky; inset: auto; top: var(--gutter); height: calc(100vh - 2 * var(--gutter)); height: calc(100svh - 2 * var(--gutter)); margin: 0 var(--gutter); }
.live .passed-sheet .gl, .passed-sheet .gl { opacity: 0; }
.passed-sheet.is-live .gl { opacity: 1; }
.sec-tab-sheet { z-index: 3; }
.passed-line {
  position: absolute; z-index: 2; left: var(--pad); bottom: clamp(24px, 4vw, 52px); margin: 0; max-width: 17ch;
  font: 500 clamp(22px, 2.2vw, 34px)/1.15 var(--display); letter-spacing: -0.02em; color: var(--forest);
}
.member-sheet { margin-top: var(--gutter); background: var(--burgundy); color: #fff; }
.member-sheet .note { color: var(--on-burgundy-2); }
.member-intro { margin: 0; max-width: 30ch; font: 500 clamp(24px, 2.6vw, 42px)/1.2 var(--display); letter-spacing: -0.02em; color: #fff; text-wrap: pretty; }
.member-rule {
  margin: clamp(32px, 4vw, 56px) 0 0; max-width: 15ch; font: 500 clamp(44px, 6.4vw, 104px)/0.98 var(--display);
  letter-spacing: -0.04em; color: #fff;
  text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 0.07em; text-underline-offset: 0.14em;
}
.member-block {
  display: grid; grid-template-columns: minmax(160px, 1fr) 3fr; gap: 32px;
  margin-top: clamp(64px, 8vw, 120px); padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.member-block > .note { grid-column: 2; margin-top: -12px; }
.member-h { margin: 0; font: 500 11px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-burgundy-2); }
.ledger { margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
.ledger div { padding: 18px 0 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.ledger dt { font: 500 24px/1.15 var(--display); letter-spacing: -0.015em; color: #fff; }
.ledger dd { margin: 6px 0 0; font-size: 15px; color: var(--on-burgundy-2); }
.ledger .ph, .member-sheet .ph { color: var(--on-burgundy-2); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.steps li { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 168px; padding: 18px 20px 22px; border-radius: 24px; background: rgba(255, 255, 255, 0.06); }
.step-n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--yellow); color: var(--ink); font: 500 13px/1 var(--mono); }
.step-t { font: 500 21px/1.18 var(--display); letter-spacing: -0.01em; color: #fff; text-wrap: pretty; }
.packages { display: grid; gap: 0; }
.pkg { display: grid; grid-template-columns: 1.2fr 1fr 0.8fr 1fr; align-items: center; gap: 12px; min-height: 56px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); font-variant-numeric: tabular-nums; }
.pkg-name { font: 500 20px/1 var(--display); color: #fff; }
.pkg span:not(.pkg-name) { font: 500 12px/1 var(--mono); letter-spacing: 0.04em; color: var(--on-burgundy-2); }
.pkg .pkg-price { font: 500 18px/1 var(--display); letter-spacing: 0; color: #fff; text-align: right; }
.qa { grid-template-columns: repeat(3, 1fr); }
.qa .q { margin: 0; font: 500 21px/1.2 var(--display); color: #fff; }
.qa .a { margin: 10px 0 0; font: 500 44px/1 var(--display); letter-spacing: -0.03em; color: var(--yellow); }
.qa div:last-child .a { font-size: 17px; line-height: 1.4; letter-spacing: 0; color: #fff; font-family: var(--sans); }
.member-cta { margin-top: clamp(64px, 8vw, 120px); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.disclaimer { margin: 0; max-width: 62ch; font-size: 13px; line-height: 1.5; color: var(--on-burgundy-2); }

/* ---------- 8. footer ---------- */
.foot-sheet { margin-bottom: var(--gutter); padding-bottom: 0; overflow: hidden; background: var(--sage); }
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.door {
  position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 230px;
  padding: 28px 30px; border-radius: 28px; background: #fff; transition: scale 0.4s cubic-bezier(.2,.8,.2,1);
}
.door:hover { scale: 1.01; }
.door-join { background: var(--forest); color: #fff; }
.door-k { font: 500 clamp(32px, 3.6vw, 56px)/1 var(--display); letter-spacing: -0.035em; }
.door-t { max-width: 26ch; font-size: 15px; opacity: 0.75; }
.door-go { position: absolute; right: 22px; bottom: 22px; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: var(--forest); color: #fff; }
.door-join .door-go { background: var(--yellow); color: var(--ink); }
.foot-cols { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 32px; margin-top: 64px; }
.foot-cols p { margin: 0; font-size: 14px; }
.foot-h { font: 500 11px/1 var(--mono) !important; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 14px !important; }
.foot-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.foot-links a { display: inline-flex; min-height: 44px; align-items: center; font-size: 15px; }
.foot-links a:hover { text-decoration: underline; }
.foot-notes { display: grid; gap: 10px; color: var(--ink-2); }
.by { margin: 72px 0 0; font: 500 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.wordmark {
  margin: 18px 0 0; font: 500 clamp(60px, 11.4vw, 220px)/0.8 var(--display); letter-spacing: -0.055em;
  color: var(--forest); white-space: nowrap; translate: -0.04em 0.08em;
}

/* ---------- the samples note stays on screen, in the nav ---------- */
.sample-tag {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; margin-left: 4px; border-radius: 99px;
  background: rgba(21, 39, 26, 0.07); font: 500 10px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
}
.sample-short { display: none; }


/* ---------- the palette, section by section ----------
   hero calm sage; range white with mint cards; herbs LOUD leafy green;
   the day yellow to burgundy; people DEEP green-black; easy cream;
   passed on BURGUNDY-led; footer dark. Text on a tint takes its deep colour. */

/* herbs: the loud field */
.herbs-sheet { background: var(--green); color: #fff; --ink-2: #fff; }
.herbs-sheet .h2, .herbs-sheet .herbs-intro, .herbs-sheet .note { color: #fff; }
.herb-name { color: #cfe3d0; }
.herb-name:hover { color: #fff; }
.herb-name[aria-pressed="true"] { color: #fff; }
.herb-stage { background: #3f8a43; }
.herb-fig figcaption { background: rgba(255, 255, 255, 0.88); color: var(--ink); --ink-2: #5f665e; }

/* people: the deep field */
.people {
  position: relative; margin: var(--space) var(--gutter) 0; padding: clamp(80px, 8vw, 120px) 0 clamp(40px, 5vw, 72px);
  border-radius: 34px; background: var(--night); color: #fff;
}
.people .giant { color: #fff; }
.people .people-sub { color: var(--on-dark-2); }
.people .tag { background: rgba(255, 255, 255, 0.1); color: #dde8dc; }
.people .story { background: #1d3a21; }

/* easy: cream */
.easy-sheet { background: var(--yellow-tint); }
.easy-line { color: var(--green-deep); }
.token-dark { background: var(--green-deep); }
.token-ph { border-color: rgba(27, 94, 32, 0.4); color: var(--green-deep); }
.easy-foot { color: var(--green-deep); }

/* passed on: burgundy leads (green means Shop, burgundy means Member) */
.sheet.passed-sheet { background: linear-gradient(#f6e9ea, #ebd5d8); --ink-2: var(--burgundy); }
.passed-line { color: var(--burgundy); }
.member-sheet { background: var(--burgundy); color: #fff; }
.member-sheet .note, .member-sheet .ph, .member-h, .ledger dd, .disclaimer,
.pkg span:not(.pkg-name) { color: var(--on-burgundy-2); }
.member-intro { color: #fff; }
.qa div:last-child .a { color: #fff; }
.ledger div, .pkg { border-color: rgba(255, 255, 255, 0.18); }
.member-block { border-top-color: rgba(255, 255, 255, 0.22); }
.steps li { background: rgba(255, 255, 255, 0.09); }

/* footer: dark, with the two doors in the two brand voices */
.foot-sheet { background: var(--night); color: #fff; }
.foot-sheet .foot-h, .foot-sheet .ph, .foot-notes, .by { color: var(--on-dark-2); }
.door-shop { background: var(--green); color: #fff; }
.door-shop .door-go { background: #fff; color: var(--green-deep); }
.door-join { background: var(--burgundy); }
.door-t { opacity: 1; color: rgba(255, 255, 255, 0.92); }
.wordmark { color: var(--green-light); }

@media (max-width: 1100px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .member-block { grid-template-columns: 1fr; gap: 18px; }
  .member-block > .note { grid-column: 1; margin-top: 0; }
}

/* ---------- phone: each section its own composition ---------- */
@media (max-width: 760px) {
  :root { --space: 88px; --pad: 20px; }
  .giant { font-size: clamp(64px, 21vw, 96px); }
  .range-head, .daily .wrap, .people-head { display: block; }
  .range-sub, .daily-sub, .people-sub { margin-top: 14px; font-size: 16px; }
  .range-tools { display: block; margin-top: 24px; }
  .filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
  .rail-nav { margin-top: 16px; }
  .rail-nav .round { display: none; }
  .rail { padding-top: 24px; gap: 12px; }
  .card { width: 78vw; }
  .sec-sheet { padding: 76px 20px 36px; border-radius: 28px; }
  .herbs-grid { display: block; }
  .herb-list { display: none; }
  .herb-stage {
    position: static; aspect-ratio: auto; max-height: none; overflow: visible; background: none; border-radius: 0;
    display: flex; gap: 12px; margin: 28px -20px 18px; padding: 0 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none;
  }
  .herb-stage::-webkit-scrollbar { display: none; }
  .herb-fig { position: relative; inset: auto; flex: none; width: 72vw; aspect-ratio: 2 / 3; opacity: 1; border-radius: 22px; overflow: hidden; scroll-snap-align: start; }
  .herb-fig img { transform: none; }
  .herb-fig figcaption { flex-direction: column; align-items: flex-start; gap: 4px; border-radius: 18px; padding: 12px 14px; }
  .herb-cap-in { text-align: left; }
  .moment { width: 76vw; }
  .story { width: 80vw; }
  .easy-line { font-size: 32px; }
  .token-ph { font-size: 0.42em; }
  .easy-foot { display: grid; gap: 18px; }
  .passed-pin { height: 220vh; }
  .passed-line { font-size: 20px; bottom: auto; top: 60px; left: auto; right: 20px; max-width: 14ch; text-align: right; }
  .member-block { display: block; }
  .member-h { margin-bottom: 16px; }
  .member-block > .note { margin-top: 14px; }
  .ledger { grid-template-columns: 1fr; }
  .ledger dt { font-size: 21px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .steps li { min-height: 140px; padding: 16px; }
  .step-t { font-size: 18px; }
  .pkg { grid-template-columns: 1fr auto; row-gap: 4px; padding: 12px 0; }
  .pkg .pkg-price { grid-column: 2; grid-row: 1; }
  .pkg span:nth-child(2), .pkg span:nth-child(3) { grid-row: 2; }
  .pkg span:nth-child(3) { text-align: right; }
  .qa { display: grid !important; grid-template-columns: 1fr; gap: 22px; }
  .pill-yellow { width: 100%; }
  .doors { grid-template-columns: 1fr; }
  .door { min-height: 180px; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .foot-notes { grid-column: 1 / -1; }
  .wordmark { font-size: 19vw; white-space: normal; line-height: 0.84; translate: -0.03em 0.12em; }
  .sample-long { display: none; }
  .sample-short { display: inline; }
  .sample-tag { display: none; margin-left: 0; padding: 0 8px; }
  .nav.is-float .sample-tag { display: inline-flex; }
  .nav.is-float .brand-word { display: none; }
}
@media (max-width: 380px) {
  .steps { grid-template-columns: 1fr; }
  .steps li { min-height: 0; flex-direction: row; align-items: center; gap: 14px; }
}

/* ---------- links to the inner pages and the shared bag ---------- */
.bag { position: relative; }
.bag-n {
  position: absolute; top: -5px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px;
  background: var(--yellow); color: var(--ink); box-shadow: 0 0 0 2px var(--page);
  font: 600 10px/19px var(--mono); text-align: center; font-variant-numeric: tabular-nums;
}
.bag-n[hidden] { display: none; }
.bag-n.is-bump { animation: bagbump 0.5s cubic-bezier(.2,.8,.2,1); }
@keyframes bagbump { 0% { scale: 1; } 35% { scale: 1.35; } 100% { scale: 1; } }

.bag-note {
  position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 60;
  display: flex; align-items: center; gap: 16px; width: max-content; max-width: calc(100vw - 32px);
  padding: 6px 6px 6px 22px; border-radius: 99px; background: var(--ink); color: #fff;
  font: 500 13px/1.2 var(--sans); letter-spacing: 0.02em;
  box-shadow: 0 18px 40px -18px rgba(17, 20, 17, 0.5);
  translate: -50% 18px; opacity: 0; pointer-events: none;
  transition: opacity 0.3s, translate 0.45s cubic-bezier(.2,.8,.2,1);
}
.bag-note.is-on { translate: -50% 0; opacity: 1; pointer-events: auto; }
.bag-note > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bag-note .stop { width: 0.3em; height: 0.3em; margin-left: 0.08em; }
.bag-note a {
  flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 99px;
  background: var(--yellow); color: var(--ink); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
}
.bag-note a:hover { background: #fff; }

.buy-name a:hover, .card-name a:hover, .herb-fig a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.card-link, .story-link { display: block; width: 100%; height: 100%; }
.story-who::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.story-who:focus-visible { outline: none; }
.story:has(.story-who:focus-visible) { outline: 2px solid var(--yellow); outline-offset: 3px; }
.story-uses { position: relative; z-index: 2; transition: background 0.25s, color 0.25s; }
.story-uses::before { content: ""; position: absolute; inset: -11px -6px; }
.story-uses:hover { background: #fff; color: var(--ink); }
.story { cursor: pointer; }

/* only the herb on show takes clicks and focus */
.herb-fig { visibility: hidden; transition: opacity 0.7s ease, visibility 0s 0.7s; }
.herb-fig.is-on { visibility: visible; transition: opacity 0.7s ease; }

a.pkg { color: inherit; transition: background 0.25s; }
a.pkg:hover .pkg-name, a.pkg:focus-visible .pkg-name { color: var(--yellow); }
a.pkg:focus-visible { outline-color: var(--yellow); }

@media (max-width: 760px) {
  .herb-fig { visibility: visible; }
  .bag-n { top: -4px; right: -5px; }
}