/* thebeanapp.com — Origin tokens from src/design/tokens.js, layout from
   design/website/bean-website-brief.md. Desktop ≥1200, tablet 810–1199,
   phone <810. */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/fonts/bricolage-grotesque-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: 'Petrona';
  src: url('/fonts/petrona-600-latin.woff') format('woff');
  font-weight: 600;
  font-display: swap;
}

:root {
  --paper: #F6F0E5;
  --surface: #FFF7EA;
  --sunk: #E7DCCB;
  --tint: #F9EEDA;
  --ink: #211A16;
  --mid: #6E6157;
  --dim: #857769;
  --line: rgba(33, 26, 22, 0.14);
  --edge: rgba(33, 26, 22, 0.10);
  --night: #211A16;
  --night-2: #2E2622;
  --cream: #FFF7EA;
  --star: #D5A850;
  --caramel: #A65A2E;
  --natural: #6E2434;
  --washed: #46522F;
  --honey: #C4643A;
  --anaerobic: #26365F;
  --light: #E8C268;
  --phone-shadow: 0 2px 4px rgba(33, 26, 22, 0.08), 0 40px 80px -30px rgba(33, 26, 22, 0.45);
  --ease: cubic-bezier(0.2, 0.85, 0.25, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #15110E;
    --surface: #231C18;
    --sunk: #3A302A;
    --tint: #2A2219;
    --ink: #F2E9DB;
    --mid: #A89A8C;
    --dim: #8A7D70;
    --line: rgba(242, 233, 219, 0.16);
    --edge: rgba(242, 233, 219, 0.10);
    --night: #2A221D;
    --night-2: #3A302A;
    --cream: #F6ECDD;
    --star: #DDB25C;
    --caramel: #E58F5A;
    --natural: #8A3044;
    --washed: #5B6B3D;
    --honey: #CF6E40;
    --anaerobic: #354B80;
    --light: #E3BE62;
    --phone-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 40px 80px -30px rgba(0, 0, 0, 0.8);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol { margin: 0; }
a { color: inherit; }
img, svg { display: block; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }

.wrap { width: min(1248px, 100% - 48px); margin-inline: auto; }
.stack-64 { display: flex; flex-direction: column; gap: 64px; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.row-between.end { align-items: flex-end; }
.centre { text-align: center; }

/* ── type ── */
.star { width: 1em; height: calc(1em * 552 / 593); flex: none; fill: currentColor; color: inherit; }
.star.gold { color: var(--star); }
.display { font-size: clamp(46px, 6.9vw, 88px); line-height: 0.95; letter-spacing: -0.055em; font-weight: 800; }
.heading { font-size: clamp(38px, 4.4vw, 56px); line-height: 1; letter-spacing: -0.045em; font-weight: 800; }
.second { color: var(--mid); }
.lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.4; letter-spacing: -0.02em; color: var(--mid); }
.small { font-size: 14px; line-height: 1.45; letter-spacing: -0.01em; color: var(--mid); }
.small.strong { font-weight: 600; }
.label, .eyebrow { font-size: 12px; line-height: 1.35; letter-spacing: 0.1em; font-weight: 700; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow .star { font-size: 15px; }
.eyebrow-sm { font-size: 11px; letter-spacing: 0.1em; font-weight: 700; text-transform: uppercase; opacity: 0.75; }
.text-link { color: var(--caramel); font-weight: 700; text-decoration: none; }
.text-link:hover { text-decoration: underline; }

.wordmark { display: inline-flex; align-items: center; gap: 8px; font-family: 'Petrona', Georgia, serif; font-weight: 600; font-size: 26px; letter-spacing: -0.02em; line-height: 1; text-decoration: none; color: var(--ink); }
.wordmark .star { font-size: 26px; }
.wordmark.sm { font-size: 19px; gap: 5px; }
.wordmark.sm .star { font-size: 17px; }

/* ── buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 24px; border-radius: 9999px;
  background: var(--ink); color: var(--paper);
  font-weight: 700; font-size: 16px; letter-spacing: -0.02em; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  transition: opacity 180ms var(--ease);
}
.btn:hover { opacity: 0.86; }
.btn.sm { padding: 10px 18px; font-size: 14px; }
.btn.lg { padding: 18px 30px; font-size: 17px; }
.btn.block { width: 100%; }
.btn.cream { background: var(--cream); color: #211A16; }
.cta-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

/* ── chrome ── */
.announce { background: var(--tint); border-bottom: 1px solid var(--line); padding: 12px 24px; text-align: center; font-size: 14px; color: var(--mid); }
.announce b { color: var(--ink); font-weight: 600; }
.announce a { color: var(--caramel); font-weight: 600; text-decoration: none; white-space: nowrap; }
.announce a:hover { text-decoration: underline; }
.header-bar { height: 72px; display: flex; align-items: center; justify-content: space-between; }
.site-header nav { display: flex; align-items: center; gap: 32px; }
.nav-link { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: var(--mid); text-decoration: none; transition: color 180ms var(--ease); }
.nav-link:hover { color: var(--ink); }
.site-footer { border-top: 1px solid var(--line); padding: 36px 0; }
.footer-row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.footer-row .wordmark { margin-right: auto; font-size: 24px; }
.footer-links { display: flex; gap: 28px; }
.footer-links a { font-size: 14px; color: var(--mid); text-decoration: none; }
.footer-links a:hover { color: var(--ink); }

/* ── hero + counter ── */
.hero { padding: 72px 0 56px; }
.hero .wrap { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.hero .eyebrow { margin-bottom: 4px; }
.hero-lead { max-width: 600px; }
.counter-section { padding-bottom: 112px; }
.counter {
  position: relative; height: 640px; overflow: hidden;
  background: var(--sunk); border-radius: 32px;
  display: flex; justify-content: center; align-items: flex-start; gap: 32px; padding-top: 64px;
}
.slot.side { padding-top: 88px; }
.bag.standing { position: absolute; bottom: 36px; width: 112px; height: 160px; }
.bag.standing.left { left: 18px; }
.bag.standing.right { right: 18px; }

/* ── bags ── (sizes scale from --s so one bag works at every size) */
.bag { --s: 1; --on: var(--cream); display: flex; flex-direction: column; overflow: hidden; border-radius: calc(16px * var(--s)); color: var(--on); background: var(--bag); }
.p-natural { --bag: var(--natural); }
.p-washed { --bag: var(--washed); }
.p-honey { --bag: var(--honey); }
.p-anaerobic { --bag: var(--anaerobic); }
.p-light { --bag: var(--light); }
.bag.p-light { --on: #211A16; }
.seal { height: calc(9px * var(--s)); flex: none; background: repeating-linear-gradient(90deg, rgba(255, 247, 234, 0.16) 0 1px, transparent 1px 3px), rgba(0, 0, 0, 0.16); }
.p-light .seal { background: repeating-linear-gradient(90deg, rgba(33, 26, 22, 0.18) 0 1px, transparent 1px 3px), rgba(0, 0, 0, 0.16); }
.bag-body { flex: 1; display: flex; flex-direction: column; gap: calc(3px * var(--s)); padding: calc(10px * var(--s)) calc(11px * var(--s)); min-height: 0; }
.bag-label { font-size: calc(7px * var(--s)); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; opacity: 0.72; line-height: 1.25; }
.bag-name { font-size: calc(12.5px * var(--s)); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; }
.bag-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.rating { display: flex; gap: calc(2px * var(--s)); }
.rating .star { font-size: calc(9px * var(--s)); }
.rating .star.off { opacity: 0.3; }
.valve { width: calc(13px * var(--s)); height: calc(13px * var(--s)); border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--on) 40%, transparent); display: grid; place-items: center; }
.valve::after { content: ''; width: calc(4px * var(--s)); height: calc(4px * var(--s)); border-radius: 50%; background: var(--on); opacity: 0.5; }
.bag.standing { --s: 1.15; }
.c-natural { color: var(--natural); }
.c-washed { color: var(--washed); }
.c-honey { color: var(--honey); }
.c-anaerobic { color: var(--anaerobic); }
.c-light { color: var(--light); }

/* ── phones ── */
.phone { width: 270px; height: 584px; padding: 8px; border-radius: 46px; background: var(--night); box-shadow: var(--phone-shadow); flex: none; }
.phone.wide { width: 300px; height: 649px; }
.screen { height: 100%; border-radius: 38px; overflow: hidden; padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 11px; background: var(--paper); color: var(--ink); }
.p-honey .screen { background: var(--honey); color: #FFF7EA; }
.status { display: flex; justify-content: space-between; align-items: center; padding: 0 8px; font-size: 11px; }
.status i { width: 22px; height: 9px; border-radius: 9px; background: currentColor; }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--washed); color: #FFF7EA; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.screen-title { font-size: 27px; font-weight: 800; letter-spacing: -0.055em; line-height: 1; }
.meta-sm { font-size: 9px; font-weight: 600; color: var(--mid); }
.chips { display: flex; gap: 6px; }
.chip { padding: 6px 11px; border-radius: 9999px; font-size: 9.5px; font-weight: 700; background: var(--surface); border: 1px solid var(--edge); }
.chip.on { background: var(--ink); color: var(--paper); border-color: transparent; }
.shelf { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.shelf .bag { height: 128px; }
.pill { padding: 5px 10px; border-radius: 9999px; background: rgba(255, 247, 234, 0.2); font-size: 9.5px; font-weight: 700; }
.screen-call { font-size: 46px; font-weight: 800; letter-spacing: -0.06em; line-height: 0.95; }
.screen-copy { font-size: 11px; line-height: 1.4; opacity: 0.92; }
.screen-btn { display: flex; align-items: center; justify-content: center; height: 38px; border-radius: 9999px; font-size: 11px; font-weight: 700; }
.screen-btn.night { background: #211A16; color: #FFF7EA; }
.screen-btn.ink { background: var(--ink); color: var(--paper); height: 40px; }
.cal-card { background: var(--surface); border-radius: 16px; padding: 11px 10px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.confirm-bag { --s: 1.25; height: 150px; flex: none; }
.reason { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9999px; background: var(--surface); border: 1px solid var(--edge); font-size: 9px; font-weight: 700; }
.reason .star { font-size: 11px; }
.fields { background: var(--surface); border-radius: 14px; padding: 2px 12px; }
.fields div { display: flex; justify-content: space-between; padding: 9px 0; font-size: 9.5px; border-bottom: 1px solid var(--line); }
.fields div:last-child { border-bottom: 0; }
.fields span { color: var(--mid); }

/* ── grind dial + shot bars (phone and coach panel) ── */
.dial { background: var(--surface); color: var(--ink); border-radius: 16px; padding: 11px 12px; display: flex; flex-direction: column; gap: 9px; }
.dial-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.dial-top b { font-weight: 800; }
.dial-top span { font-size: 9px; color: var(--mid); }
.dial-steps { display: flex; justify-content: space-between; align-items: flex-end; }
.step { width: 20px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.step i { width: 1.5px; height: 6px; background: var(--dim); opacity: 0.6; }
.step:nth-child(odd) i { height: 10px; }
.step b { width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; font-size: 8.5px; font-weight: 500; }
.step.next i { width: 2px; opacity: 1; background: var(--bag-accent, var(--honey)); }
.step.next b { background: var(--bag-accent, var(--honey)); color: #FFF7EA; font-weight: 800; }
.step.now b { border: 1.5px solid var(--ink); font-weight: 800; }
.dial-foot { display: flex; gap: 12px; font-size: 9px; }
.shots { display: flex; flex-direction: column; gap: 7px; }
.shot { display: flex; align-items: center; gap: 6px; font-size: 9px; }
.shot > span { width: 34px; opacity: 0.9; }
.shot > b { width: 56px; text-align: right; font-weight: 700; }
.track { position: relative; flex: 1; height: 13px; border-radius: 7px; overflow: hidden; background: rgba(33, 26, 22, 0.16); }
.track .window { position: absolute; left: 52%; width: 16%; top: 0; bottom: 0; background: rgba(255, 247, 234, 0.22); }
.track .time { position: absolute; left: 0; top: 3px; height: 7px; border-radius: 4px; background: #FFF7EA; }

/* ── calendar + cups ── */
.cal { display: flex; flex-direction: column; }
.cal-row { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-head span { text-align: center; font-weight: 700; color: var(--mid); }
.day { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.day b { font-weight: 500; color: var(--mid); }
.day b.has-cup { font-weight: 800; color: var(--ink); }
.day b.later { color: var(--dim); opacity: 0.6; }
.day b.today { font-weight: 800; background: var(--ink); color: var(--paper); border-radius: 9999px; padding: 0 0.55em; }
.dot { border-radius: 50%; background: var(--dim); opacity: 0.45; }
.cal.small { gap: 2px; }
.cal.small .cal-head span { font-size: 7px; }
.cal.small .day { height: 27px; gap: 1px; }
.cal.small .day .star { font-size: 14px; }
.cal.small .day b { font-size: 7px; }
.cal.small .dot { width: 3px; height: 3px; }
.cal.large { gap: 6px; margin-top: 14px; }
.cal.large .cal-head span { font-size: 12px; }
.cal.large .day { height: 58px; gap: 4px; }
.cal.large .day .star { font-size: 30px; }
.cal.large .day b { font-size: 12px; }
.cal.large .dot { width: 5px; height: 5px; }
.cup { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cup > .star { font-size: 26px; }
.cup-text { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.cup-name { font-size: 17px; font-weight: 800; letter-spacing: -0.03em; }
.cup-meta { font-size: 12px; color: var(--mid); }
.cup-note { font-size: 14px; font-weight: 500; }
.cup-score { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
.cups.small .cup { gap: 8px; padding: 6px 0; }
.cups.small .cup > .star { font-size: 17px; }
.cups.small .cup-name { font-size: 11px; }
.cups.small .cup-meta { font-size: 7.5px; }
.cups.small .cup-note { font-size: 9px; }
.cups.small .cup-score { font-size: 12px; }

/* ── bands ── */
.band { padding: 112px 0; }
.band.surface { background: var(--surface); }
.band.paper { background: var(--paper); }
.band.tint { background: var(--tint); }
.band.night { background: var(--night); color: #FFF7EA; }
.band.night .second { color: rgba(255, 247, 234, 0.5); }
.band.night .lead { color: rgba(255, 247, 234, 0.6); }
.split-header { display: flex; flex-wrap: wrap; gap: 32px 64px; align-items: flex-end; }
.split-title { flex: 1 1 520px; max-width: 720px; display: flex; flex-direction: column; gap: 20px; }
.split-header > .lead { flex: 0 1 420px; margin-left: auto; }
.centred-header { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.centred-header .lead { max-width: 580px; }
.card { background: var(--surface); border: 1px solid var(--edge); border-radius: 32px; }

/* how it works */
.how { display: flex; gap: 40px; align-items: center; }
.steps { list-style: none; padding: 0; width: 460px; flex: none; display: flex; flex-direction: column; gap: 8px; }
.steps li { padding: 22px 24px; border-radius: 24px; border: 1px solid transparent; display: flex; flex-direction: column; gap: 6px; }
.steps li.on { background: var(--paper); border-color: var(--edge); }
.steps h3 { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; letter-spacing: -0.03em; color: var(--mid); }
.steps li.on h3 { color: var(--ink); }
.steps h3 .star { font-size: 16px; }
.stage { flex: 1; height: 620px; border-radius: 32px; background: var(--bag); overflow: hidden; display: flex; justify-content: center; padding-top: 56px; }

/* coach */
.coach-panel { background: var(--bag); border-radius: 32px; padding: 48px; display: flex; gap: 48px; align-items: center; --bag-accent: var(--anaerobic); }
.coach-call { flex: 1; display: flex; flex-direction: column; gap: 22px; }
.readout { display: flex; gap: 36px; flex-wrap: wrap; }
.readout div { display: flex; flex-direction: column; gap: 4px; }
.readout b { font-size: 34px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.readout span { font-size: 12px; color: rgba(255, 247, 234, 0.6); }
.call { font-size: clamp(44px, 5.3vw, 64px); font-weight: 800; letter-spacing: -0.055em; line-height: 0.95; }
.call-copy { font-size: 18px; line-height: 1.45; color: rgba(255, 247, 234, 0.82); max-width: 460px; }
.coach-side { width: 460px; flex: none; display: flex; flex-direction: column; gap: 16px; }
.coach-side .dial { border-radius: 22px; padding: 22px 24px; gap: 16px; }
.coach-side .dial-top { font-size: 18px; }
.coach-side .dial-top span { font-size: 13px; }
.coach-side .step { width: 34px; gap: 6px; }
.coach-side .step i { width: 2px; height: 10px; }
.coach-side .step:nth-child(odd) i { height: 16px; }
.coach-side .step.next i { width: 3px; }
.coach-side .step b { width: 32px; height: 32px; font-size: 14px; }
.coach-side .step.now b { border-width: 2px; }
.coach-side .dial-foot { font-size: 14px; gap: 16px; }
.coach-side .shots { gap: 10px; padding: 4px; }
.coach-side .shot { font-size: 13px; gap: 12px; }
.coach-side .shot > span { width: 52px; }
.coach-side .shot > b { width: 90px; }
.coach-side .track { height: 18px; border-radius: 9px; background: rgba(0, 0, 0, 0.22); }
.coach-side .track .time { top: 4px; height: 10px; border-radius: 5px; }
.coach-side .track .window { background: rgba(255, 247, 234, 0.2); }
.grinders { display: flex; flex-direction: column; gap: 40px; }
.grinders-head { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: flex-end; }
.grinders-head h3 { flex: 1 1 300px; font-size: clamp(26px, 2.7vw, 32px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; }
.grinders-head p { flex: 0 1 460px; color: rgba(255, 247, 234, 0.6); }
.grinder-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255, 247, 234, 0.1); border: 1px solid rgba(255, 247, 234, 0.1); border-radius: 24px; overflow: hidden; }
.grinder { background: var(--night); min-height: 170px; padding: 28px; display: flex; flex-direction: column; gap: 6px; }
.grinder.p-anaerobic { background: var(--anaerobic); }
.grinder span { font-size: 13px; font-weight: 600; color: rgba(255, 247, 234, 0.6); }
.grinder b { font-size: 24px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; }
.grinder em { margin-top: auto; font-style: normal; font-size: 12px; color: rgba(255, 247, 234, 0.45); padding-top: 16px; }
.arrow { margin-top: auto; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid rgba(255, 247, 234, 0.5); display: grid; place-items: center; font-style: normal; font-weight: 700; }

/* palate */
.palate { display: flex; gap: 24px; }
.palate .card { flex: 1; padding: 40px; display: flex; flex-direction: column; }
.palate-card { gap: 28px; }
.palate-card .label { color: var(--mid); }
.card-title { font-size: 28px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; }
.bars { display: flex; flex-direction: column; gap: 14px; }
.bar-row { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.bar-row > span { width: 84px; font-weight: 600; }
.bar-row > b { width: 40px; text-align: right; font-weight: 800; }
.bar-area { flex: 1; display: flex; }
.half { flex: 1; height: 14px; display: flex; }
.half.below { justify-content: flex-end; border-right: 2px solid color-mix(in srgb, var(--ink) 35%, transparent); }
.half i { height: 14px; background: var(--bag); }
.half.below i { border-radius: 7px 0 0 7px; }
.half.above i { border-radius: 0 7px 7px 0; }
.next-card { background: var(--bag); border: 0; color: #FFF7EA; gap: 20px; }
.next-card .label { color: rgba(255, 247, 234, 0.6); }
.next-title { font-size: clamp(32px, 3.4vw, 40px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.next-copy { font-size: 17px; line-height: 1.45; color: rgba(255, 247, 234, 0.82); max-width: 440px; }
.next-body { margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; flex-wrap: wrap; }
.next-body .eyebrow-sm { margin-bottom: 10px; }
.dashed-chips { display: flex; flex-wrap: wrap; gap: 8px; max-width: 260px; }
.dashed-chips span { padding: 8px 14px; border-radius: 9999px; border: 1.5px dashed rgba(255, 247, 234, 0.45); font-size: 13px; font-weight: 700; }
.ghost-bag { --s: 1.3; width: 150px; height: 200px; border-radius: 20px; border: 2px dashed rgba(255, 247, 234, 0.55); padding: 20px 16px; display: flex; flex-direction: column; gap: 6px; }

/* journal */
.journal-card { padding: 48px; display: flex; gap: 56px; }
.journal-cal { flex: 1; }
.month { font-size: 30px; font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.journal-week { width: 400px; flex: none; }
.journal-week .label { color: var(--mid); }

/* pricing */
.plans { display: flex; justify-content: center; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.plan { border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 24px; }
.plan.free { width: 400px; background: var(--paper); border: 1px solid var(--edge); }
.plan.plus { width: 440px; min-height: 600px; background: var(--night); color: #FFF7EA; }
.plan.plus .small { color: rgba(255, 247, 234, 0.6); }
.plan-name { display: flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 6px; }
.plan-name .star { font-size: 20px; }
.price { font-size: clamp(42px, 3.8vw, 48px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.price span { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--dim); }
.plan.plus .price span { color: rgba(255, 247, 234, 0.5); }
.includes { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 15px; font-weight: 500; }
.includes li { display: flex; gap: 10px; align-items: baseline; }
.includes .star { font-size: 13px; transform: translateY(1px); }
.plan.plus .includes { background: rgba(255, 247, 234, 0.06); border-radius: 16px; padding: 22px; gap: 14px; }
.grow { flex: 1; }

/* faq */
.faq { display: flex; gap: 64px; align-items: flex-start; }
.faq-title { width: 420px; flex: none; position: sticky; top: 32px; display: flex; flex-direction: column; gap: 20px; }
.faq-items { flex: 1; display: flex; flex-direction: column; gap: 12px; }
details { background: var(--surface); border-radius: 24px; padding: 24px 24px 24px 28px; }
summary { list-style: none; display: flex; align-items: center; gap: 24px; cursor: pointer; font-size: clamp(18px, 1.6vw, 20px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.4; }
summary::-webkit-details-marker { display: none; }
summary span { flex: 1; }
.toggle { position: relative; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--ink); transition: opacity 180ms var(--ease); }
summary:hover .toggle { opacity: 0.86; }
.toggle::before, .toggle::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 1px; background: var(--paper); transition: transform 180ms var(--ease); }
.toggle::after { transform: rotate(90deg); }
details[open] .toggle::after { transform: rotate(0deg); }
details p { margin-top: 10px; max-width: 560px; color: var(--mid); }
details a { color: var(--caramel); }

/* closing */
.closing-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; }
.app-icon { width: 112px; height: 112px; border-radius: 26px; background: #211A16; display: grid; place-items: center; box-shadow: 0 2px 4px rgba(33, 26, 22, 0.1), 0 24px 48px -20px rgba(33, 26, 22, 0.5); }
.app-icon .star { font-size: 62px; }
.closing .lead { max-width: 560px; }
.strip { margin-top: 24px; width: 100%; height: 250px; border-radius: 32px; background: var(--sunk); overflow: hidden; display: flex; justify-content: center; align-items: flex-end; gap: 20px; text-align: left; }
.strip .bag { --s: 1.4; width: 150px; height: 214px; border-radius: 22px 22px 0 0; }

/* docs */
.doc { padding: 72px 0 112px; }
.doc-wrap { max-width: 760px; display: flex; flex-direction: column; gap: 16px; }
.doc-wrap h1 { margin: 4px 0 4px; }
.doc-card { padding: 28px 32px; border-radius: 24px; display: flex; flex-direction: column; gap: 10px; }
.doc-card h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
.doc-card p { color: var(--mid); }
.doc-card a { color: var(--caramel); font-weight: 600; }
.centre-block { align-items: flex-start; gap: 32px; }

/* ── tablet: 810–1199 ── */
@media (max-width: 1199px) {
  .counter .slot.side { display: none; }
  .bag.standing { width: 136px; height: 190px; --s: 1.35; }
  .bag.standing.left { left: 40px; }
  .bag.standing.right { right: 40px; }
  .how, .coach-panel, .palate, .journal-card, .faq { flex-direction: column; align-items: stretch; }
  .steps, .coach-side, .journal-week, .faq-title { width: 100%; }
  .stage { flex: none; }
  .faq-title { position: static; }
  .faq { gap: 40px; }
  .strip .bag:nth-child(5) { display: none; }
}

/* ── phone: under 810 ── */
@media (max-width: 809px) {
  .wrap { width: calc(100% - 32px); }
  .site-header .nav-link { display: none; }
  .announce span { display: none; }
  .hero { padding: 48px 0 40px; }
  .counter-section { padding-bottom: 72px; }
  .counter { height: 520px; padding-top: 40px; border-radius: 24px; }
  .bag.standing { display: none; }
  .band { padding: 72px 0; }
  .stack-64 { gap: 48px; }
  .split-header { flex-direction: column; align-items: stretch; gap: 20px; }
  .split-title, .split-header > .lead { flex: none; margin: 0; }
  .stage { height: 600px; border-radius: 24px; padding-top: 40px; }
  .coach-panel { padding: 28px 24px; gap: 28px; border-radius: 24px; }
  .readout { gap: 20px; }
  .readout b { font-size: 26px; }
  .coach-side .shots { display: none; }
  .coach-side .dial { padding: 18px 16px; }
  .coach-side .step { width: 28px; }
  .coach-side .step b { width: 26px; height: 26px; font-size: 12px; }
  .grinder-grid { grid-template-columns: 1fr 1fr; }
  .grinder { min-height: 136px; padding: 20px; }
  .grinder b { font-size: 20px; }
  .palate .card { padding: 28px 24px; border-radius: 24px; }
  .bar-row > span { width: 74px; font-size: 13px; }
  .next-body { flex-direction: column; align-items: flex-start; }
  .journal-card { padding: 24px 20px; gap: 36px; border-radius: 24px; }
  .cal.large .day { height: 46px; }
  .cal.large .day .star { font-size: 24px; }
  .plan.free, .plan.plus { width: 100%; min-height: 0; padding: 28px 24px; }
  .strip { height: 220px; border-radius: 24px; }
  .strip .bag:nth-child(2), .strip .bag:nth-child(4) { display: none; }
  .footer-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-row .wordmark { margin-right: 0; }
  .doc { padding: 48px 0 72px; }
  .doc-card { padding: 24px 20px; }
}