/* ritual.bar — the site layer over site.css (2026-09-15).
   site.css is generated from the design tokens and never edited; everything
   the booking flow adds lives here, built only on its tokens and classes. */

/* the design-system frame pinned .web to 390px on phones; a real phone owns its width */
@media (max-width: 767px) {
  .web { width: auto; }
  /* The front door must land with its cards in hand (Preston 2026-09-16):
     100vh overruns the real phone viewport under browser chrome, and the
     stacked lockup makes the nav ~100px, not 60 — so the cards fell below
     the fold. svh measures what is actually visible. */
  .web .hero.front { height: calc(100svh - 100px); min-height: 540px; }
  .web .hero.front.band .cardstack { padding-bottom: 30px; }
}

/* ---------- the booking stages ---------- */
.stage { display: none; }
.stage.on { display: block; }
.bookhead { display: flex; align-items: baseline; gap: 18px; margin-bottom: 6px; }
.bookhead .back { color: var(--faint); text-decoration: none; font: 600 var(--t-action-size)/1 var(--font-sans); letter-spacing: var(--t-action-track); text-transform: uppercase; }
.bookhead h2 { font: 500 34px/1.1 var(--font-serif); letter-spacing: -0.01em; margin: 0; }
.bookhead h2 em { font-style: italic; color: var(--ochre); }
.caps-lede { font: 600 13px/1.3 var(--font-sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); }
.guide-line { font: 400 15.5px/1.45 var(--font-serif); color: var(--quiet); margin: 8px 0 0; }

/* the chooser's photograph — the app's RitualHero, face at 50% */
.chooserhero { margin-top: 14px; overflow: hidden; border: 1px solid var(--hairline); }
.chooserhero img { display: block; width: 100%; height: 150px; object-fit: cover; object-position: 50% 50%; }
@media (max-width: 767px) { .chooserhero img { height: 104px; } }

/* numbered step label — 01 / 02, the app's Label grammar */
.steplabel { display: flex; align-items: baseline; gap: 10px; margin: 34px 0 14px; }
.steplabel .n { font: 600 10px/1 var(--font-sans); letter-spacing: 0.2em; color: var(--ochre); }
.steplabel .t { font: 600 var(--t-brow-size)/1.3 var(--font-sans); letter-spacing: var(--t-brow-track); text-transform: uppercase; color: var(--faint); }
.steplabel .hint { margin-left: auto; font: 600 10px/1 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ochre); }

/* the focus rail — cards with the lip (clinical term + tick) */
.focusrail { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 12px; }
@media (max-width: 767px) {
  .focusrail { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; margin: 0 calc(-1 * var(--margin)); padding: 2px var(--margin) 6px; scrollbar-width: none; }
  .focusrail::-webkit-scrollbar { display: none; }
  .focusrail .focus { flex: 0 0 218px; scroll-snap-align: start; }
}
.focus { position: relative; display: flex; flex-direction: column; text-align: left; background: var(--card); border: 1px solid var(--hairline); padding: 14px 14px 0; cursor: pointer; font: inherit; color: var(--ink); transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease); }
.focus.on { background: rgba(166,118,74,0.10); border-color: var(--ochre); }
.focus.bar { opacity: 0.38; cursor: default; }
.focus .head { display: flex; align-items: flex-start; gap: 8px; }
.focus .outcome { flex: 1; font: 500 19px/1.2 var(--font-serif); letter-spacing: -0.005em; }
.focus .add { font: 500 15.5px/1.3 var(--font-serif); font-variant-numeric: tabular-nums; color: var(--quiet); }
.focus.on .add { color: var(--ink); }
.focus .desc { font: 400 14.5px/1.4 var(--font-serif); color: var(--quiet); margin: 5px 0 12px; min-height: 60px; }
.focus .desc .details { font: 600 10.5px/1 var(--font-sans); letter-spacing: 0.06em; color: #8A5F3A; cursor: pointer; white-space: nowrap; }
.focus .why { font: 400 12.5px/1.3 var(--font-serif); color: var(--rust); margin: -6px 0 10px; }
.focus .lip { display: flex; align-items: center; gap: 7px; margin: auto -14px 0; padding: 7px 14px; border-top: 1px solid var(--hairline); }
.focus .lip .pill { flex: 1; font: 600 8.5px/1.2 var(--font-sans); letter-spacing: 0.11em; text-transform: uppercase; color: #8A5F3A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.focus .lip svg { flex: 0 0 auto; }
.tickbox { width: 18px; height: 18px; border: 1px solid var(--btn-border); flex: 0 0 18px; display: flex; align-items: center; justify-content: center; }
.on > .lip .tickbox, .arrival.on .tickbox { background: var(--ink); border-color: var(--ink); }
.tickbox svg { display: none; }
.on > .lip .tickbox svg, .arrival.on .tickbox svg { display: block; }

/* the arrival card — one composed ask */
.arrival { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--hairline); padding: 16px; cursor: pointer; font: inherit; color: var(--ink); transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease); }
.arrival.on { background: rgba(166,118,74,0.10); border-color: var(--ochre); }
.arrival .desc { flex: 1; font: 400 14.5px/1.4 var(--font-serif); color: var(--quiet); }
.arrival .right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.arrival .add { font: 500 15px/1 var(--font-serif); font-variant-numeric: tabular-nums; color: var(--quiet); }
.arrival.on .add { color: var(--ink); }

/* "Your Ritual" summary — the group with the corner label */
.yr { position: relative; background: var(--card); border: 1px solid var(--hairline); padding: 6px var(--row-pad-x) 0; }
.yr .corner { position: absolute; top: 10px; right: 16px; font: 500 11.5px/1 var(--font-sans); color: var(--faint); }
.yr .r { display: flex; align-items: flex-start; gap: 13px; padding: 11px 0; border-top: 1px solid var(--hairline-soft); }
.yr .r:first-of-type { border-top: 0; }
.yr .r svg { margin-top: 2px; flex: 0 0 16px; }
.yr .r .b { font: 600 14px/1.35 var(--font-sans); color: var(--ink); display: block; }
.yr .r .i { font: 400 14.5px/1.45 var(--font-serif); font-style: italic; color: var(--quiet); margin-top: 2px; display: block; }
.yr .foot { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hairline-soft); }
.yr .foot .when { flex: 1; font: 400 12.5px/1.3 var(--font-sans); color: var(--quiet); }
.yr .foot .total { font: 500 19px/1 var(--font-serif); font-variant-numeric: tabular-nums; }

/* the plinth — the running receipt + the one verb, pinned on phones */
.webplinth { position: sticky; bottom: 0; z-index: 4; margin-top: 40px; background: var(--paper); border-top: 1px solid var(--hairline); padding: 14px 0 max(14px, env(safe-area-inset-bottom)); }
.webplinth .inner { display: flex; align-items: center; gap: 24px; }
.webplinth .sum { flex: 1; min-width: 0; }
.webplinth .sum .line { display: block; font: 400 14.5px/1.3 var(--font-serif); color: var(--quiet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.webplinth .sum .money { display: block; margin-top: 3px; font: 500 19px/1.2 var(--font-serif); font-variant-numeric: tabular-nums; color: var(--ink); }
@media (max-width: 520px) { .webplinth .inner { flex-direction: column; align-items: stretch; gap: 10px; } }

/* day + time — the app's dates anatomy */
.daycols { grid-template-columns: 1fr 360px; }
.dayrail { order: 2; }
@media (max-width: 767px) { .daycols { grid-template-columns: 1fr; } .dayrail { order: 0; } }
.cal .cell[data-jump] { cursor: pointer; }
.cal .cell[data-jump]:hover { outline: 1px solid var(--hairline); outline-offset: -1px; }
.cal .cell.today-ring { outline: 1px solid var(--ochre); outline-offset: -1px; border-radius: var(--r-cell); }
.cal .cell.off { color: var(--disabled-fg); }
.daycard2 { background: var(--card); border: 1px solid var(--hairline); padding: 16px var(--row-pad-x); margin-top: 12px; }
.daycard2 .dn { font: 500 21px/1.2 var(--font-serif); }
.daycard2 .dn em { font-style: italic; }
.daycard2 .tchips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.daycard2 .chip { width: 100%; min-height: 48px; cursor: pointer; }
.remind { background: var(--card); border: 1px solid var(--hairline); padding: 16px var(--row-pad-x) 14px; }
.remind .rt { display: block; font: 500 24px/1.15 var(--font-serif); margin-bottom: 8px; }
.remind .ri { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; font: 400 16px/1.3 var(--font-serif); border-top: 1px solid var(--hairline-soft); }
.remind .ri:first-of-type { border-top: 0; }
.remind .ri.total { font-weight: 500; border-top: 1px solid var(--hairline); }
.remind .lip { display: flex; justify-content: space-between; align-items: center; width: calc(100% + 2 * var(--row-pad-x)); margin: 10px calc(-1 * var(--row-pad-x)) -14px; padding: 12px var(--row-pad-x); border-top: 1px solid var(--hairline); background: none; border-left: 0; border-right: 0; border-bottom: 0; font: 600 13px/1 var(--font-sans); color: var(--ink); cursor: pointer; }
.remind .lip .c { color: var(--ochre); }
.tnum { font-variant-numeric: tabular-nums; }
.retrycard { background: var(--card); border: 1px solid var(--hairline); padding: 22px 20px; }

/* the service summary card (targeted bookings) */
.svcsum { background: var(--card); border: 1px solid var(--hairline); padding: 18px var(--row-pad-x); }
.svcsum .top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.svcsum .n { font: 500 24px/1.15 var(--font-serif); }
.svcsum .p { font: 500 var(--t-ledger-size)/1 var(--font-serif); font-variant-numeric: tabular-nums; }
.svcsum .one { font: 400 15.5px/1.5 var(--font-serif); font-style: italic; color: var(--quiet); margin: 8px 0 0; }
.svcsum .inc { margin-top: 10px; }
.svcsum .inc .r { display: flex; gap: 11px; align-items: flex-start; padding: 8px 0 0; }
.svcsum .inc .b { font: 600 13px/1.3 var(--font-sans); color: var(--ink); display: block; }
.svcsum .inc .i { font: 400 14px/1.4 var(--font-serif); font-style: italic; color: var(--quiet); display: block; margin-top: 1px; }

/* review ledger label column — centered caps keys, the app's PayRow grammar */
.payrow { display: flex; gap: 16px; padding: 13px 0; border-top: 1px solid var(--hairline-soft); align-items: baseline; }
.payrow:first-child { border-top: 0; }
.payrow .k { flex: 0 0 76px; font: 600 10px/1.4 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.payrow .v { flex: 1; font: 500 17px/1.3 var(--font-serif); }
.payrow .v .vi { display: block; font: 400 14px/1.4 var(--font-serif); font-style: italic; color: var(--quiet); margin-top: 2px; }
.payrow .amt { font: 500 17px/1.3 var(--font-serif); font-variant-numeric: tabular-nums; }

/* the details sheet (focus full details) */
.rbscrim { position: fixed; inset: 0; z-index: 40; background: var(--scrim); }
.rbsheet { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 41; width: min(560px, 100%); background: var(--card); box-shadow: var(--shadow); padding: 0 28px 34px; max-height: 82vh; overflow: auto; }
.rbsheet .grab { width: 36px; height: 4px; background: var(--hairline); margin: 10px auto 18px; }
.rbsheet h3 { font: 500 24px/1.15 var(--font-serif); margin: 0; }
.rbsheet .pill { display: block; font: 600 10px/1 var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase; color: #8A5F3A; margin-top: 6px; }
.rbsheet .one { font: 400 15px/1.5 var(--font-serif); font-style: italic; margin: 10px 0 0; }
.rbsheet .cap { display: block; font: 600 10px/1 var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); margin-top: 16px; }
.rbsheet .r { display: flex; gap: 11px; align-items: flex-start; margin-top: 10px; }
.rbsheet .r .b { font: 600 13px/1.3 var(--font-sans); display: block; }
.rbsheet .r .i { font: 400 14px/1.45 var(--font-serif); font-style: italic; color: var(--quiet); display: block; margin-top: 1px; }

/* services page — the door menu translated */
.menurow { display: flex; align-items: center; gap: 16px; padding: 14px var(--row-pad-x); border-top: 1px solid var(--hairline-soft); }
.menurow:first-child { border-top: 0; }
.menurow .k { flex: 1; min-width: 0; }
.menurow .k .n { font: 500 18px/1.25 var(--font-serif); display: block; }
.menurow .k .s { font: 400 13.5px/1.4 var(--font-serif); color: var(--quiet); display: block; margin-top: 2px; }
.menurow .decide { flex: 0 0 auto; display: flex; flex-direction: row-reverse; align-items: center; gap: 12px; }
.menurow .decide .btn { min-height: 36px; min-width: 92px; padding: 0 14px; font-size: 11px; }
.menurow .decide .p { font: 500 14px/1 var(--font-serif); font-variant-numeric: tabular-nums; color: var(--quiet); }
.menusec { background: var(--card); border: 1px solid var(--hairline); }
.menusec + .menusec { margin-top: 20px; }
.menusec .tag { display: block; padding: 14px var(--row-pad-x) 4px; font: 600 10px/1 var(--font-sans); letter-spacing: 0.19em; text-transform: uppercase; color: var(--faint); }
.menusec.featured { background: rgba(166,118,74,0.07); }
.menusec.featured .tag { color: #8A5F3A; }

/* ---------- the front door ---------- */
/* The card IS the booking control (NN/g: the whole card one target, the verb
   a thing that looks pressable). Decision column mirrors the app door: a
   bordered capsule carrying the verb, the serif price beneath it. */
.choice { transition: background var(--dur-base) var(--ease); }
.choice:hover { background: rgba(245,239,228,0.07); }
/* THE CARD, RECOMPOSED (Preston 2026-09-16, spatial pass): the old decision
   column dug a dead pocket above and below itself. Grid instead — the price
   rides the head row at full serif size, and the verb is a full-width foot
   bar. No pocket, larger money, a CTA with real presence, ~20px taller only. */
.hero .choice, .cardstack .choice { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "clip k p" "foot foot foot"; column-gap: 14px; row-gap: 12px; align-items: start; padding: 14px 14px 14px; }
.hero .choice .clip, .cardstack .choice .clip { grid-area: clip; }
.hero .choice .k, .cardstack .choice .k { grid-area: k; }
.hero .choice .decide, .cardstack .choice .decide { display: contents; }
.choice .p { grid-area: p; font: 500 18px/1 var(--font-serif); font-variant-numeric: tabular-nums; color: #F5EFE4; white-space: nowrap; margin-top: 3px; }
.choice .cap { grid-area: foot; display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid rgba(245,239,228,0.55); background: rgba(245,239,228,0.12); color: #F5EFE4; font: 600 11px/1 var(--font-sans); letter-spacing: 0.2em; text-transform: uppercase; transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), transform var(--dur-press) var(--ease); }
.choice:hover .cap { background: #F5EFE4; color: #1F1B16; border-color: #F5EFE4; }
.choice:active .cap, .choice .cap:active { transform: scale(0.985); }
/* HIG-3 / M3-1: one filled per view — The Ritual is the preferred path, named
   by STYLE, not size. The others stay outlined at the same dimensions. */
.choice[data-choice="ritual"] .cap { background: #F5EFE4; color: #1F1B16; border-color: #F5EFE4; }
.choice[data-choice="ritual"]:hover .cap { opacity: 0.92; }
/* HIG-1: the mobile menu button earns a 44pt hit region */
.web .nav .menu { padding: 10px; margin: -10px; }
/* HIG-2: chips press */
.chip:active { transform: scale(0.97); }
/* goal-gradient: the three quiet marks in the stage head (the app's crown progress) */
.stageprog { display: flex; gap: 6px; margin-left: auto; align-self: center; }
.stageprog i { width: 18px; height: 2px; background: var(--hairline); display: block; }
.stageprog i.on { background: var(--ink); }
/* desktop: the cards are the booking mechanism — the size of one */
@media (min-width: 768px) {
  .web .hero.front.band .front-band { grid-template-columns: 1fr 560px; }
  .web .hero.front.band .front-cards .choice { padding: 16px 16px 14px; }
  .web .hero.front.band .front-cards .choice .clip { width: 56px !important; height: 74px !important; }
  .web .hero.front.band .front-cards .choice .name { font-size: 22px; }
  .web .hero.front.band .front-cards .choice .sub { font-size: 13.5px; }
  .web .hero.front.band .front-cards .choice .cap { min-height: 44px; font-size: 11.5px; }
  .web .hero.front.band .front-cards .choice .p { font-size: 19px; }
}

/* ---------- the app journey — the experience recomposed, never screenshots ----------
   A timeline of composed vignettes: each stage a moment of the app rebuilt from
   the design system's own material, joined by the drawn thread. */
.journey { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 28px; }
.jstage { position: relative; padding-top: 22px; }
/* the thread: a hairline across the top of each stage, a node where it begins */
.jstage::before { content: ""; position: absolute; top: 3px; left: 0; right: -28px; height: 1px; background: var(--hairline); }
.jstage:last-child::before { right: 0; }
.jnode { position: absolute; top: 0; left: 0; width: 7px; height: 7px; background: var(--ochre); border-radius: 50%; }
.jnum { display: block; font: 600 10px/1 var(--font-sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ochre); margin-bottom: 12px; }
.jvig { position: relative; height: 224px; background: var(--card); border: 1px solid var(--hairline); overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 18px; }
.jline { margin-top: 10px; }
/* the vignette furniture */
.jcard { width: 100%; max-width: 240px; background: var(--paper); border: 1px solid var(--hairline); padding: 14px 16px; box-shadow: 0 12px 28px rgba(31,27,22,0.14); }
.jchip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border: 1px solid var(--hairline); font: 600 8.5px/1 var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--quiet); }
.jchip.on { background: rgba(166,118,74,0.12); border-color: var(--ochre); color: #8A5F3A; }
.jbtn { margin-top: 12px; min-height: 34px; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--btn-text); font: 600 9.5px/1 var(--font-sans); letter-spacing: 0.18em; text-transform: uppercase; }
.jwallet { width: 100%; max-width: 250px; background: #221E19; color: #F5EFE4; padding: 16px 18px; border-radius: 12px; box-shadow: 0 14px 30px rgba(31,27,22,0.28); }
.jwallet .jwline { display: flex; align-items: center; gap: 7px; margin-top: 14px; padding-top: 11px; border-top: 1px solid rgba(245,239,228,0.16); font: 600 11px/1 var(--font-sans); letter-spacing: 0.02em; }
.jtag { position: absolute; left: 14px; bottom: 14px; background: rgba(20,19,18,0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #F5EFE4; font: 600 9.5px/1 var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase; padding: 9px 12px; }
.jnote { width: 100%; max-width: 250px; border-left: 2px solid var(--gold); padding-left: 14px; }
.jshelf { width: 100%; max-width: 260px; }
.jvessels { display: flex; gap: 6px; }
.jvessels img { flex: 1 1 0; min-width: 0; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--hairline); background: var(--paper); }
@media (max-width: 900px) {
  .journey { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x proximity; margin: 0 calc(-1 * var(--margin)); padding: 0 var(--margin) 8px; scrollbar-width: none; }
  .journey::-webkit-scrollbar { display: none; }
  .jstage { flex: 0 0 264px; scroll-snap-align: start; }
  .jstage::before { right: -20px; }
}

/* misc */
.err { color: var(--rust); }
.hide { display: none !important; }
.loadingline { font: 400 15px/1.5 var(--font-serif); font-style: italic; color: var(--faint); padding: 18px 0; }
input.rbin { all: unset; flex: 1; font: 400 var(--t-ledger-size)/1.2 var(--font-serif); color: var(--ink); min-width: 0; }

/* the one action lives in the rail on wide screens, in the plinth on phones */
@media (min-width: 768px) { #dayplinth { display: none; } }
@media (max-width: 767px) { #daycta-rail { display: none; } }

/* ---------- audit closure (FINDINGS run-through, remaining ACT rows) ----------
   HIG-1 / Fitts: small targets earn real hit regions without layout shift. */
.focus .desc .details { padding: 8px 6px; margin: -8px -6px; }
.remind .lip { min-height: 44px; }
.web .foot .fam a { display: inline-block; padding: 6px 2px; margin: -6px -2px; }
.web .nav ul a { display: inline-block; padding: 12px 0; }
/* keyboard: the custom controls take the system focus ring */
.focus:focus-visible, .arrival:focus-visible, .chip:focus-visible, .choice:focus-visible, .remind .lip:focus-visible, .menu:focus-visible { outline: none; box-shadow: var(--focus); }
/* press states for the composed cards (HIG-2) */
.focus:active:not(.bar), .arrival:active { transform: scale(0.99); }

/* ---------- THE DESKTOP PASS (FINDINGS §F, canon web/desktop comps) ---------- */

/* D-1 · the ultra-wide law (Aman): the film runs full-bleed, the CONTENT band
   caps and centers — its 64px gutters align its content with the 1200 wrap. */
@media (min-width: 768px) {
  .web .hero.front.band .front-band { max-width: 1328px; margin: 0 auto; }
  /* D-2 · the canon panel is compact — an instrument, not a billboard */
  .web .hero.front.band .front-band { grid-template-columns: 1fr 470px; }
  .web .hero.front.band .front-cards .choice { padding: 12px 14px 12px; row-gap: 10px; }
  .web .hero.front.band .front-cards .choice .clip { width: 44px !important; height: 58px !important; }
  .web .hero.front.band .front-cards .choice .name { font-size: 20px; }
  .web .hero.front.band .front-cards .choice .sub { font-size: 12.5px; }
  .web .hero.front.band .front-cards .choice .cap { min-height: 40px; font-size: 10.5px; }
  .web .hero.front.band .front-cards .choice .p { font-size: 16.5px; }
}

/* D-4 · /services at desktop: the canon three-column menu */
@media (min-width: 1024px) {
  #menu { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: start; }
  #menu .menusec + .menusec { margin-top: 0; }
}

/* D-3 · /book at desktop: ONE composed surface — calendar left, the chooser
   rail right, one dated CTA, identity as a dialog (the ladder made real). */
.lipdetails { display: none; }
@media (min-width: 1024px) {
  .composedw { max-width: 1240px !important; }
  .stages.composed { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 56px; align-items: start; }
  .composed .stage[data-stage="chooser"] { display: block; grid-column: 2; grid-row: 1; }
  .composed .stage[data-stage="day"] { display: block; grid-column: 1; grid-row: 1; }
  .composed .stage[data-stage="day"] .bookhead, .composed .dayrail, .composed #dayplinth { display: none; }
  /* the day stage is one column in composed mode — the calendar + next-available fill it;
     the old 2-track grid (.cols overriding .daycols) left an empty column at wide widths. */
  .composed .stage[data-stage="day"] .daycols { grid-template-columns: 1fr; }
  .composed .stage[data-stage="chooser"] .bookhead h2 { font-size: 30px; }
  .composed .chooserhero img { height: 120px; }
  .composed .steplabel { margin: 24px 0 10px; }
  /* the rail's plinth becomes the ledger foot + THE one action */
  .composed .webplinth { position: static; margin-top: 20px; padding: 16px 0 0; background: transparent; border-top: 1px solid var(--hairline); }
  .composed .webplinth .inner { flex-direction: column; align-items: stretch; gap: 12px; }
  /* focus cards become the canon's compact rows */
  .composed .focusrail { display: flex; flex-direction: column; gap: 8px; }
  .composed .focus { padding: 10px 14px 8px; }
  .composed .focus .outcome { font-size: 16.5px; }
  .composed .focus .add { font-size: 15px; }
  .composed .focus .desc { display: none; }
  .composed .focus .why { margin: 2px 0 0; }
  .composed .focus .lip { margin: 6px -14px 0; padding: 6px 14px 2px; border-top: 0; }
  .composed .lipdetails { display: inline; font: 600 9.5px/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: #8A5F3A; cursor: pointer; padding: 8px 6px; margin: -8px 0 -8px -6px; }
  .composed .arrival { padding: 12px 14px; }
  .composed .arrival .desc { font-size: 13px; }
  .composed .yr .r { padding: 8px 0; }
  .composed .yr .r .i { font-size: 13.5px; line-height: 1.35; }
  /* identity as a centered dialog over the composed surface */
  .composed .stage[data-stage="review"] { display: none; }
  .composed .stage[data-stage="review"].on { display: flex; position: fixed; inset: 0; z-index: 60; background: var(--scrim); align-items: center; justify-content: center; padding: 24px; }
  .composed .revpanel { background: var(--paper); width: 100%; max-width: 640px; max-height: 88vh; overflow: auto; padding: 24px 30px 30px; box-shadow: 0 24px 60px rgba(31,27,22,0.30); }
  .composed .revpanel .bookhead .back { display: none; }
}

/* the section tag's context line (Preston 2026-09-16: "targeted treatments for what?") */
.menusec .tagsub { display: block; padding: 4px 16px 10px; font: 400 13px/1.45 var(--font-serif); font-style: italic; color: var(--quiet); }

/* the desktop hero film is the CLEAR room loop, framed on the work (Preston
   2026-09-16); the phone keeps the defocus entry film. */
@media (min-width: 768px) { .web .hero.front > video { object-position: 50% 32%; } }


/* ---------- THE HOME HERO, CONTAINED (2026-09-16, the Aman/Nécessaire law) ----------
   Desktop = the canon hero.block: cream ground, words + the one filled verb,
   the clear film in a CAPPED frame — correct framing at every monitor by
   construction. Phones keep the approved full-bleed defocus hero. */
.web .hero.deskhero { display: none; }
@media (min-width: 768px) {
  .web .hero.front.band { display: none; }
  /* the copy and the arch are a CENTERED PAIR — the gap is designed, never
     leftover; the arch SCALES with the screen (height-driven, capped). */
  .web .hero.deskhero { display: grid; grid-template-columns: minmax(0, auto) minmax(0, auto); justify-content: center; align-items: center; column-gap: clamp(56px, 7vw, 128px); max-width: 1600px; margin: 0 auto; min-height: 0; height: auto; padding: clamp(40px, 6svh, 88px) 56px; }
  .web .hero.deskhero .copy { order: 0; padding: 0; max-width: 470px; display: block; }
  .web .hero.deskhero .frame { order: 1; position: relative; overflow: hidden; margin: 0; min-height: 0; border: 1px solid var(--hairline); border-radius: 50% 50% var(--r-arch-foot) var(--r-arch-foot) / 30% 30% var(--r-arch-foot) var(--r-arch-foot); height: clamp(520px, calc(100svh - 240px), 880px); aspect-ratio: 3 / 4; width: auto; max-width: none; align-self: center; justify-self: start; }
  .web .hero.deskhero .frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
}
@media (min-width: 2000px) { .web .hero.deskhero { border-bottom: 1px solid var(--hairline); } }

/* motion (PRODUCTION P2) — rise-and-fade, tokens only; instant under reduced motion */
.m-pre { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-rise) var(--ease), transform var(--dur-rise) var(--ease); }
.m-pre.m-in { opacity: 1; transform: none; }

/* the treatments list on the app's material: mineral glass over the film's
   own ground (the defocus frame beneath) — distinct surface, unified system */
/* THE BAND (system law, 2026-09-16): the frost→linen ground marks a DECISION
   moment — menus, joins, the final ask. Paper carries narrative and task
   flows. At most two bands per page; the footer is the linen landing. */
.band { background: linear-gradient(165deg, var(--ramp-frost) 0%, var(--ramp-linen) 100%); }
.glassground { display: flex; flex-direction: column; gap: 8px; }
.glassground .glass { background: rgba(253,251,247,0.62); }
.glassground .glass:hover { background: rgba(253,251,247,0.92); }

/* ---------- THE GLASS CHROME, SITE-WIDE (Preston 2026-09-16) ----------
   The app's mineral glass lives in its chrome — crown, plinth, sheets.
   The web takes the same law: content slides beneath glass, everywhere. */
/* the nav is the crown: sticky, chalk glass full-bleed behind capped content */
.web .nav { position: sticky; top: 0; z-index: 30; }
.web .nav::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; background: var(--glass-chalk-bg); -webkit-backdrop-filter: blur(14px) saturate(1.05); backdrop-filter: blur(14px) saturate(1.05); border-bottom: 1px solid var(--hairline-soft); z-index: -1; }
/* the plinths are the app's action band: veil glass over the content scrolling beneath */
.webplinth { background: rgba(247,245,240,0.72); -webkit-backdrop-filter: blur(16px) saturate(1.05); backdrop-filter: blur(16px) saturate(1.05); }
/* the sheets and the identity dialog take the sheet material */
.rbsheet { background: rgba(253,251,247,0.88); -webkit-backdrop-filter: blur(18px) saturate(1.05); backdrop-filter: blur(18px) saturate(1.05); }
@media (min-width: 1024px) { .composed .revpanel { background: rgba(253,251,247,0.90); -webkit-backdrop-filter: blur(20px) saturate(1.05); backdrop-filter: blur(20px) saturate(1.05); } }
/* reduced transparency: solid fallbacks (the app's own law) */
@media (prefers-reduced-transparency: reduce) {
  .web .nav::before, .webplinth, .rbsheet, .composed .revpanel { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--paper); }
}


/* ---------- TONAL TRANSLUCENCY, SITE-WIDE (Preston 2026-09-16) ----------
   The app's translucent card tokens on every raised surface — depth from
   tone and transparency alone, never borrowed imagery. */
.paycard, .menusec, .remind, .yr, .focus, .arrival, .daycard2, .svcsum, .retrycard { background: rgba(253,251,247,0.72); }
.focus.on, .arrival.on { background: rgba(166,118,74,0.10); }
.btn.secondary { background: rgba(31,27,22,0.03); }
.btn.secondary:hover { background: rgba(31,27,22,0.06); opacity: 1; }
.chip:not(.on):not(.off) { background: rgba(31,27,22,0.02); }
/* the footer grounds the page — a linen close, hairline above */
.web .foot { background: linear-gradient(180deg, var(--ramp-ivory) 0%, var(--ramp-linen) 100%); }

/* the app's permanent home — a dedicated band atop every footer */
.footapp { display: flex; justify-content: flex-start; align-items: center; gap: 28px; padding: 4px 0 26px; margin-bottom: 26px; border-bottom: 1px solid var(--hairline); flex-wrap: wrap; }
.footapp > a { flex: none; }

/* ── THE FOOTER, COMPOSED (2026-09-16) ─────────────────────────────────────
   Not an afterthought: the ivory→linen landing carries a real structure —
   the app's band, then brand · pages · visit columns, then one legal line. */
.web .foot { border-top: 0; padding: 60px 0 36px; }
.footgrid { display: grid; grid-template-columns: 1.4fr 1fr 1.4fr; gap: 40px; padding-top: 6px; }
.footgrid .brow { display: block; margin-bottom: 4px; }
.footgrid a.fam { color: var(--ink); text-decoration: none; width: fit-content; }
.footgrid a.fam:hover { color: var(--ochre); }
.footlegal { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.footlegal a { color: inherit; text-decoration: none; }
.footlegal a:hover { color: var(--ink); }
@media (max-width: 760px) { .footgrid { grid-template-columns: 1fr; gap: 30px; } }

/* ── THE STORE (shop.html): the app's Shelf grid on the web, kit .product cards ── */
.storegrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 22px; align-items: stretch; }
@media (max-width: 1180px) { .storegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .storegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 14px; } }
.storechips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── /listen — the ritualish promotion (logo + podcast icon; no episodes) ──── */
/* the podcast icon as an app tile — the ish-tag mark on a warm ground */
.listen-tile { display: grid; place-items: center; max-width: 340px; aspect-ratio: 1; margin-left: auto;
  border-radius: 22px; border: 1px solid var(--hairline);
  background: linear-gradient(160deg, var(--ramp-frost), var(--ramp-linen)); }
.listen-tile img { width: 62%; height: 62%; object-fit: contain; display: block; }
@media (max-width: 900px) { .listen-tile { max-width: 240px; margin: 8px auto 0; } }
/* the wordmark, on light ground, centered */
.listen-word { display: block; width: min(420px, 78%); height: auto; margin: 0 auto; }
/* where it lands — plain platform names, quiet chips */
.listen-where { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.listen-plat { font: 600 11px/1 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--quiet); border: 1px solid var(--hairline); border-radius: 999px; padding: 10px 16px;
  background: rgba(31,27,22,0.02); }
/* the ritualish promo on the home page — icon tile on the left, text beside */
.listenpromo { display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center; }
.listenpromo .covwrap { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.listenpromo .covwrap .brow { font-size: 9.5px; letter-spacing: 0.14em; line-height: 1; margin: 0; text-align: center; }
.listenpromo .cov { display: grid; place-items: center; width: 140px; height: 140px; border-radius: 20px;
  border: 1px solid var(--hairline); background: linear-gradient(160deg, var(--ramp-frost), var(--ramp-linen)); }
.listenpromo .cov img { width: 62%; height: 62%; object-fit: contain; display: block; }
@media (max-width: 620px) { .listenpromo { grid-template-columns: 1fr; gap: 18px; } .listenpromo .cov { width: 116px; height: 116px; } }

/* ── ALTERNATING GROUNDS (every-other rhythm, Preston 2026-09-16) ───────────
   A soft flat warm ground for narrative sections, so background colour comes
   into play down the page. Distinct from the DECISION band (which is the
   frost→linen DIAGONAL gradient, max 2/page): the tint is FLAT and quiet, and
   never carries a primary CTA. Cadence on home: band · plain · tint · plain ·
   tint · plain · band. */
.section.tint { background: #EFE8DB; }
[data-theme="dark"] .section.tint, .dark .section.tint { background: rgba(245,239,228,0.035); }

/* ── MOBILE: centered logo, taller crown, larger UI (Preston 2026-09-16) ─────
   The phone UI read a touch small. Bump the type scale via the kit's own tokens
   (so every component that uses them grows together), raise the crown, and
   centre the logo with the tagline beneath it, hamburger held at the right. */
@media (max-width: 767px) {
  .web .nav { height: 96px; justify-content: center; }
  .web .nav .lockup { flex-direction: column; align-items: center; text-align: center; gap: 5px; }
  .web .nav .wordmark { font-size: 32px; }
  .web .nav .tagline { font-size: 16px; }
  .web .nav .menu { position: absolute; right: calc(var(--margin) - 10px); top: 50%; transform: translateY(-50%); margin: 0; }
  .web .nav.open ul { top: 92px; padding: 20px 24px 26px; gap: 18px; }
  .web .nav.open ul a { font-size: 13.5px; }
  .web .hero.front .front-words .display { font-size: 32px; }
}

/* ── MOBILE hero — cream material glass, monochrome (Preston 2026-09-16) ─────
   Bring the hero into the app's cream monochromism: a cream veil casts the
   film's foot, the words read in ink, and the card is cream material glass
   (the app's card token) with the ink button as its CTA. */
@media (max-width: 767px) {
  /* dual cream vignette (Preston): most intense at the foot so the headline reads
     over the client's skin, clear through the focal (the face), then reintroduced
     at the very top so the film settles into the nav. Full height, cream monochrome. */
  .web .hero.front::after { top: 0; height: 100%; background: linear-gradient(180deg,
      rgba(247,245,240,0.44) 0%,
      rgba(247,245,240,0.08) 14%,
      rgba(247,245,240,0) 34%,
      rgba(247,245,240,0) 58%,
      rgba(247,245,240,0.34) 78%,
      rgba(247,245,240,0.74) 100%); }
  .web .hero.front > video, .web .hero.front > img.still { object-position: 50% 34%; } /* lift the subject into the focal point */
  .web .hero.front .front-words { text-shadow: 0 1px 24px rgba(247,245,240,0.9), 0 0 44px rgba(247,245,240,0.55); }
  .web .hero.front .front-words .brow { display: none; } /* trying the hero without the brow (Preston) */
  .web .hero.front .front-words .display { color: var(--ink); }
  .web .hero.front .front-words .display em.ritual { color: var(--ochre); }
  .web .hero.front.band .cardstack .choice { background: rgba(253,251,247,0.6); -webkit-backdrop-filter: blur(20px) saturate(1.05); backdrop-filter: blur(20px) saturate(1.05); border: 1px solid rgba(253,251,247,0.5); border-top-color: rgba(253,251,247,0.7); color: var(--ink); box-shadow: none; }
  .web .hero.front .choice .name { font-size: 21px; color: var(--ink); }
  .web .hero.front .choice .sub { font-size: 14px; color: var(--quiet); opacity: 1; line-height: 1.4; }
  .web .hero.front .choice .p { color: var(--ink); }
  .web .hero.front .choice .cap { background: var(--ink); color: var(--btn-text); border-color: var(--ink); }
}

/* ── LINE-WRAP DISCIPLINE (Preston 2026-09-16) ─────────────────────────────
   No awkward wraps site-wide: balance headings (even lines, no lonely last
   word) and prettify body copy (no orphans). Progressive — ignored where
   unsupported. Hero display keeps its intentional <br>. */
.web h1.display, .web h2.name, .web .name, .web .bookhead h2, .rbsheet h3 { text-wrap: balance; }
.web .body, .web .whisper, .web .guide-line, .web .sub, .web .fam, .web .vi { text-wrap: pretty; }

/* ── THE STORE, as a boutique (Preston 2026-09-16) ─────────────────────────
   Ochre-active filters (the house accent), clean product cards with one tidy
   Add control, and the two "where to start" cards up top. */
/* active filter pills read ochre, not ink */
.storechips .chip.filter.on, #rbsheet .chip.filter.on { background: var(--ochre); border-color: var(--ochre); color: #FBFAF7; }
/* product card — see the A-layout block below (vendor eyebrow, member price,
   "Add" in a baseline footer row). Older card rules removed. */
/* the two start cards up top */
.startcards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.startcard { background: rgba(253,251,247,0.72); border: 1px solid var(--hairline); border-radius: 4px; padding: 24px 26px; }
@media (max-width: 700px) { .startcards { grid-template-columns: 1fr; gap: 16px; } }

/* ── THE SKIN PROFILE section — mobile leads with what it is, desktop airy ───
   Mobile source order: say → art → cta (context before the example). Desktop:
   the example reading on the left (centred), the say + cta clustered right. */
.profile-grid { display: grid; gap: 34px; }
@media (min-width: 768px) {
  .profile-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "art say" "art cta"; column-gap: 72px; row-gap: 22px; align-items: start; }
  .profile-art { grid-area: art; align-self: center; max-width: 460px; }
  .profile-say { grid-area: say; align-self: end; }
  .profile-cta { grid-area: cta; align-self: start; }
}

/* the skin-profile CTA reads centred on mobile (Preston 2026-09-16) */
@media (max-width: 767px) { .profile-cta { text-align: center; } }

/* ── GLOBAL type bump +2 (Preston 2026-09-16): meet the standard ────────────
   Reading sizes and the crown come up ~2px across every breakpoint, via the
   kit's own tokens so everything scales together. */
.web { --t-body-size: 21px; --t-web-body-size: 21px; --t-whisper-size: 17px; --t-name-size: 30px; --t-ledger-size: 23px; --t-statement-size: 44px; --t-web-display-size: 74px; }
/* keep the in-page app mockup true to the real app's smaller type, not the bumped web scale */
.web .app { --t-body-size: 16.5px; --t-whisper-size: 14px; }
.web .nav .wordmark { font-size: 28px; }
.web .nav .tagline { font-size: 15.5px; }

/* ── the dismissible quiz bar on /shop (Preston 2026-09-16) ─────────────────
   A slim announcement tile under the top, its own warm ground and an ✕ to
   close — the app's inline map hook (first question + chips), on the shelf. */
.shopquiz { position: relative; background: #EFE8DB; border-bottom: 1px solid var(--hairline); }
.shopquiz .wrap { padding-top: 20px; padding-bottom: 22px; }
.shopquiz-x { position: absolute; top: 10px; right: 12px; background: none; border: 0; font: 300 28px/1 var(--font-serif); color: var(--quiet); cursor: pointer; padding: 4px 10px; line-height: 1; }
.shopquiz-x:hover { color: var(--ink); }
.shopquiz-say { font: 500 22px/1.2 var(--font-serif); color: var(--ink); margin-top: 6px; }
.shopquiz-q { font: 400 var(--t-body-size)/1.5 var(--font-serif); color: var(--quiet); margin: 8px 0 0; max-width: 62ch; }
.shopquiz-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* the hours table reads tight (Preston 2026-09-16): by-appt on every open row */
#hours .group .row { min-height: 0; padding-top: 12px; padding-bottom: 12px; }
#hours .group .row .v { white-space: nowrap; }

/* the ritual as a named system — products laid over one another, a step named
   above each (holyritual.com grammar; Preston 2026-09-16) */
/* the ritual "shelf" — every product on ONE ground, step + note worked in below
   each (Walmart/Minimalist model; Preston 2026-09-17). The Korealy tonal shots
   share a cream ground, so a matching band makes them read as one integrated
   graphic with the products sitting on a common line. */
.rtlshelf { display: grid; grid-template-columns: repeat(5, 1fr); background: #F1EBE0; border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden; }
.rtlstep { display: flex; flex-direction: column; text-decoration: none; }
.rtlstep + .rtlstep { border-left: 1px solid rgba(31,27,22,0.05); }
.rtlprod { display: block; aspect-ratio: 4/4.5; overflow: hidden; }
.rtlprod img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; transition: transform var(--dur-base) var(--ease); }
.rtlprod:hover img { transform: scale(1.03); }
.rtlcap { padding: 14px 16px 20px; background: rgba(31,27,22,0.028); border-top: 1px solid rgba(31,27,22,0.06); flex: 1; }
.rtlcap .rtlk { display: block; font: 600 9px/1.4 var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ochre); }
.rtlcap .rtlt { display: block; margin-top: 7px; font: 500 15px/1.2 var(--font-serif); color: var(--ink); }
.rtlcap .rtld { display: block; margin-top: 5px; font: 400 12.5px/1.45 var(--font-serif); color: var(--quiet); }
@media (max-width: 720px) {
  .rtlshelf { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .rtlstep { flex: 0 0 66%; scroll-snap-align: start; }
  .rtlstep + .rtlstep { border-left: 1px solid rgba(31,27,22,0.06); }
  .rtlprod { aspect-ratio: 4/4.2; }
}

/* ── THE MORNING-AFTER THREAD (Preston 2026-09-16): show it, don't explain it ─
   The Guide's after-visit message as a text conversation, with the at-home
   ritual delivered as an enriched card (images the real SMS wouldn't carry). */
.thread { max-width: 480px; }
.threadhead { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; font: 600 10px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.threadhead .av { width: 24px; height: 24px; border-radius: 50%; background: var(--ochre); color: #FBFAF7; display: grid; place-items: center; font: 500 13px/1 var(--font-serif); }
.thread .msg { display: block; width: fit-content; max-width: 86%; padding: 11px 15px; border-radius: 18px; font: 400 15.5px/1.45 var(--font-serif); color: var(--ink); margin-bottom: 8px; }
.thread .msg.in { background: var(--card); border: 1px solid var(--hairline); border-bottom-left-radius: 5px; }
.thread .msg.out { margin-left: auto; background: rgba(166,118,74,0.14); border-bottom-right-radius: 5px; }
.thread .msg.tcard { max-width: 100%; width: 100%; padding: 0; overflow: hidden; }
/* the guide's ritual card = a mini of the Calm Repair shelf: each step's product
   on one cream ground, step named beneath. Abbreviated — no descriptions. */
.tcard-steps { display: grid; grid-template-columns: repeat(5, 1fr); background: #F1EBE0; }
.tcard-steps .ts { display: flex; flex-direction: column; }
.tcard-steps .ts + .ts { border-left: 1px solid rgba(31,27,22,0.05); }
.tcard-steps .ts-p { aspect-ratio: 4/4.5; overflow: hidden; }
.tcard-steps .ts-p img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
.tcard-steps .ts-k { padding: 8px 4px 11px; text-align: center; font: 600 8px/1.4 var(--font-sans); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ochre); background: rgba(31,27,22,0.03); border-top: 1px solid rgba(31,27,22,0.05); }
.tcard-foot { display: block; padding: 12px 15px 14px; margin-top: 12px; border-top: 1px solid var(--hairline-soft); }
.tcard-t { display: block; font: 500 16px/1.3 var(--font-serif); color: var(--ink); }
.tcard-p { display: block; margin-top: 3px; font: 500 12.5px/1.3 var(--font-sans); color: var(--quiet); }

/* footer links collapse on mobile — the nav already carries them (Preston 2026-09-16) */
@media (max-width: 767px) { .footgrid > div:nth-child(2) { display: none; } }

/* the example ritual's ingredient notes — a mini description per step */

/* /listen hero — tighter tile + a headline that wraps to two clean lines */
.listenhero .listen-tile { max-width: 300px; }
@media (max-width: 767px) {
  .listenhero .listen-tile { max-width: 188px; }
  .web .listenhero .display { font-size: 34px; line-height: 1.08; }
}

/* ── Phase 1b (Preston 2026-09-16) ──────────────────────────────────────────
   Desktop hero: a clean couplet — each sentence one line, sized to the column
   (true fit, not a nudge). */
@media (min-width: 768px) {
  .web .hero.deskhero .display { font-size: 54px; max-width: none; }
}

/* Store: square editorial filter chips; product tiles as the app's card —
   vendor eyebrow under the image, product name, then a baseline footer row with
   the member price (labelled w/ PASS, the only price shown) and a text "Add". */
.storechips .chip.filter, #rbsheet .chip.filter { border-radius: 0; }
.storegrid .product { display: flex; flex-direction: column; }
.storegrid .product .plate { position: relative; }
.storegrid .product .m { margin-top: 11px; font: 600 9.5px/1.3 var(--font-sans); letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint); }
.storegrid .product .n { margin-top: 3px; font: 500 17px/1.22 var(--font-serif); color: var(--ink); }
.storegrid .product .foot { margin-top: auto; padding-top: 8px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.storegrid .product .foot .p { margin: 0; white-space: nowrap; font: 500 15px/1.2 var(--font-serif); font-variant-numeric: tabular-nums; color: var(--ink); }
.storegrid .product .foot .p .pass { display: inline; margin: 0; font: 600 10.5px/1 var(--font-sans); letter-spacing: 0.02em; color: var(--ochre); white-space: nowrap; }
.storegrid .product a.plate, .storegrid .product a.n { text-decoration: none; color: inherit; }
.storegrid .product a.plate { transition: opacity var(--dur-base) var(--ease); }
.storegrid .product a.plate:hover { opacity: 0.92; }
.storegrid .product a.n:hover { color: var(--ochre); }
.storegrid .product .add { flex: none; align-self: baseline; background: none; border: 0; padding: 0; font: 600 10.5px/1 var(--font-sans); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ochre); cursor: pointer; white-space: nowrap; transition: opacity var(--dur-base) var(--ease); }
.storegrid .product .add:hover { opacity: 0.6; }

/* Listen hero: full-width centered headline (remove the kit 14ch cap that was
   pinning it left inside a centered column — true centering, no nudge). */
.web .listenhero .display { max-width: none; margin-left: auto; margin-right: auto; }

/* Editorial register accent — one ochre rule on the card's SHORTER edge, full-bleed
   (never inset). Portrait cards → top rule; landscape cards → left rule. The featured
   card is tall on mobile (top rule) and wide on desktop (left rule) — orientation by breakpoint. */
.web .choice.on::before { top: 0; bottom: 0; }                 /* hero choice = landscape → full-height left rule */
#home-featured .paycard { position: relative; }
#home-featured .paycard::before { content: ""; position: absolute; background: #C79A6A; left: 0; right: 0; top: 0; height: 2px; }  /* mobile: portrait → top rule */
@media (min-width: 768px) { #home-featured .paycard::before { right: auto; bottom: 0; width: 2px; height: auto; } }               /* desktop: landscape → left rule */

/* Ritual-over-routine: intro stacked above, the example in a wider (not full-width)
   block below; product images link to their PDP with a subtle desktop lift. */
.rtl-example { max-width: 880px; margin-top: 40px; }
@media (min-width: 768px) { .rtl-example { margin-top: 48px; } }

/* ── PDP — the Bar's native product page (server-rendered) ─────────────────── */
.pdp-crumbs { margin: 18px auto 0; font: 600 var(--t-brow-size)/1 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.pdp-crumbs a { color: var(--faint); text-decoration: none; } .pdp-crumbs a:hover { color: var(--ochre); }
.pdp-crumbs span { margin: 0 6px; }
/* the store card's photo tile — the kit plate defaults to a warm STONE ground
   (site.css), which reads as a heavy band behind light/transparent product
   shots. A soft cream ground + a quiet hairline lets every source blend. */
.storegrid .product .plate { background: #F3EEE4; border-color: var(--hairline-soft); border-radius: 4px; }
/* PDP hero — win over `.web .section` (which forces a 1px rule + 96px top gap
   right under the nav: the "broken area below the nav"). */
.web .section.pdp-hero { border-top: 0; padding-top: 18px; }
/* PDP progressive sub-nav — drops in on scroll, jump-links + always-there buy */
.pdp-subnav { position: fixed; top: 0; left: 0; right: 0; z-index: 30; background: rgba(247,245,240,0.9); -webkit-backdrop-filter: blur(14px) saturate(1.05); backdrop-filter: blur(14px) saturate(1.05); border-bottom: 1px solid var(--hairline); transform: translateY(-100%); transition: transform 0.28s var(--ease); }
.pdp-subnav.on { transform: none; }
.pdp-subnav-in { display: flex; align-items: center; gap: 20px; padding-top: 11px; padding-bottom: 11px; }
.pdp-subnav-name { font: 500 15px/1.2 var(--font-serif); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; max-width: 26ch; }
.pdp-subnav-links { display: flex; gap: 20px; margin-left: auto; }
.pdp-subnav-links a { font: 600 11px/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--quiet); text-decoration: none; white-space: nowrap; }
.pdp-subnav-links a:hover { color: var(--ochre); }
.pdp-subnav-buy { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.pdp-subnav-price { font: 500 16px/1 var(--font-serif); font-variant-numeric: tabular-nums; color: var(--ink); }
.pdp-subnav-add { padding: 10px 18px; font-size: 12px; }
.pdp-subnav-add.added { background: var(--ochre); color: #FBFAF7; border-color: var(--ochre); }
/* jump targets clear the fixed sub-nav */
#pdp-read, #pdp-proof, #pdp-ritual, #pdp-pairs { scroll-margin-top: 60px; }
@media (max-width: 760px) {
  .pdp-subnav-links { display: none; }
  .pdp-subnav-name { flex: 1; }
  .pdp-subnav-buy { margin-left: 0; }
}
.pdp-herowrap { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
.pdp-shot { display: grid; place-items: center; aspect-ratio: 1/1; background: var(--card); border: 1px solid var(--hairline); border-radius: 8px; overflow: hidden; }
.pdp-shot img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.pdp-thumbs { display: flex; gap: 8px; margin-top: 10px; }
.pdp-thumb { width: 56px; aspect-ratio: 1/1; border: 1px solid var(--hairline); border-radius: 5px; overflow: hidden; background: var(--card); opacity: 0.7; }
.pdp-thumb.on { opacity: 1; border-color: var(--ochre); }
.pdp-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.pdp-title { margin-top: 10px; font-size: 34px; }
.pdp-tagline { margin-top: 10px; font: 400 var(--t-ledger-size)/1.3 var(--font-serif); color: var(--quiet); font-style: italic; }
.pdp-botanical { margin-top: 16px; font: 600 10.5px/1.5 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: #8A5F3A; }
.pdp-pricerow { display: flex; align-items: baseline; gap: 12px; margin-top: 22px; }
.pdp-price { font: 500 26px/1 var(--font-serif); font-variant-numeric: tabular-nums; color: var(--ink); }
.pdp-member { font: 600 12px/1 var(--font-sans); letter-spacing: 0.02em; color: var(--ochre); }
.pdp-add { margin-top: 16px; }
.pdp-add.added { background: var(--ochre); color: #FBFAF7; border-color: var(--ochre); }
.pdp-features { margin: 8px auto 0; }
.pdp-features ul { display: grid; gap: 8px; padding: 0; margin: 0; list-style: none; }
.pdp-features li { position: relative; padding-left: 20px; font: 400 var(--t-whisper-size)/1.45 var(--font-serif); color: var(--quiet); }
.pdp-features li::before { content: "—"; position: absolute; left: 0; color: var(--ochre); }
.pdp-read-grid { display: grid; grid-template-columns: 1fr; gap: 26px; }
.pdp-read-col .brow { color: var(--ochre); }
.pdp-rh { margin-top: 8px; font: 500 var(--t-ledger-size)/1.25 var(--font-serif); color: var(--ink); }
.pdp-read-col .body { margin-top: 8px; }
.pdp-proof, .pdp-combos { display: grid; grid-template-columns: 1fr; gap: 22px; }
.pdp-active { padding-top: 18px; border-top: 1px solid var(--hairline-soft); }
.pdp-active .brow { color: var(--ochre); }
.pdp-pct { color: var(--ochre); font-size: 0.8em; }
.pdp-ref { margin-top: 8px; font-style: italic; color: var(--faint); }
.pdp-steps { display: grid; gap: 0; }
.pdp-step { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--hairline-soft); align-items: baseline; }
.pdp-step-k { font: 600 9.5px/1.4 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.pdp-step.on .pdp-step-k { color: var(--ochre); }
.pdp-step-v { font: 400 16px/1.4 var(--font-serif); color: var(--quiet); }
.pdp-step.on .pdp-step-v { color: var(--ink); }
.pdp-combo { display: block; text-decoration: none; color: inherit; }
.pdp-combo-cta { display: inline-block; margin-top: 12px; font: 600 11px/1 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ochre); }
/* spec-at-a-glance — the precise facts, sitting with the product */
.pdp-spec { margin: 16px 0 0; padding: 4px 0 0; border-top: 1px solid var(--hairline); }
.pdp-spec-row { display: grid; grid-template-columns: 80px 1fr; gap: 14px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--hairline-soft); }
.pdp-spec-k { font: 600 9.5px/1.4 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.pdp-spec-v { font: 400 14.5px/1.35 var(--font-serif); color: var(--ink); }
.pdp-spec-v .pdp-pct { color: var(--ochre); font-size: 0.82em; }
@media (min-width: 768px) {
  .pdp-herowrap { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; }
  .web .section.pdp-hero { padding-top: 24px; }
  .pdp-title { font-size: 44px; }
  .pdp-read-grid { grid-template-columns: repeat(3, 1fr); gap: 34px; }
  .pdp-proof { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .pdp-combos { grid-template-columns: 1fr 1fr; gap: 30px; }
}

/* ── MAP YOUR SKIN (/map) — the native quiz destination ─────────────────────── */
.map-appbar { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
  background: var(--ink); color: #F7F2E9; text-decoration: none; padding: 9px 20px; text-align: center; }
.map-appbar-t { font: 400 13px/1.4 var(--font-sans); color: rgba(247,242,233,0.86); }
.map-appbar-t b { font-weight: 600; color: #F7F2E9; }
.map-appbar-cta { font: 600 12px/1 var(--font-sans); letter-spacing: 0.04em; color: var(--ochre-soft, #C79A6A); white-space: nowrap; }
.map-shell { max-width: 1040px; }
.map-intro { text-align: center; margin: 8px auto 0; max-width: 44ch; }
.map-intro-lede { margin: 14px 0 0; font: 400 var(--t-body-size)/1.5 var(--font-serif); color: var(--quiet); }
.map-stage { margin: 34px auto 0; }

/* question */
.map-strip { display: flex; align-items: center; gap: 6px; max-width: 560px; margin: 0 auto; }
.map-seg { height: 3.5px; border-radius: 2px; background: var(--hairline); flex: 1; transition: background .2s var(--ease), flex .2s var(--ease); }
.map-seg.map-done { background: var(--ochre); flex: 2; }
.map-seg.map-now { background: rgba(166,118,74,0.55); flex: 2; }
.map-kick { max-width: 560px; margin: 16px auto 0; font: 600 var(--t-brow-size)/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); text-align: center; }
.map-guide { max-width: 560px; margin: 12px auto 0; font: 500 30px/1.18 var(--font-serif); letter-spacing: -0.01em; color: var(--ink); text-align: center; }
.map-opts { max-width: 560px; margin: 26px auto 0; display: flex; flex-direction: column; gap: 10px; }
.map-opt { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--hairline); border-radius: 12px; padding: 16px 18px; cursor: pointer; font: inherit; color: var(--ink); transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease); min-height: 44px; }
.map-opt:hover { border-color: var(--ochre); }
.map-opt.on { background: rgba(166,118,74,0.10); border-color: var(--ochre); }
.map-opt-n { min-width: 34px; font: 500 20px/1 var(--font-serif); color: var(--ochre); font-variant-numeric: tabular-nums; }
.map-opt-t { flex: 1; }
.map-opt-l { display: block; font: 500 var(--t-web-body-size, 17px)/1.25 var(--font-serif); }
.map-opt-s { display: block; margin-top: 3px; font: 400 var(--t-whisper-size)/1.4 var(--font-sans); color: var(--quiet); }
.map-opt-go { font: 400 20px/1 var(--font-serif); color: var(--faint); }
.map-opt:hover .map-opt-go, .map-opt.on .map-opt-go { color: var(--ochre); }
.map-back { align-self: flex-start; margin-top: 4px; background: none; border: 0; cursor: pointer; font: 600 var(--t-whisper-size)/1 var(--font-sans); color: var(--ink); padding: 12px 6px; min-height: 44px; }
.map-back:hover { color: var(--ochre); }

/* result */
/* result — one reading column on mobile; on desktop the profile reads on the
   left and the ONE action rides a sticky summary card on the right. */
.map-result { max-width: 680px; margin: 0 auto; }
.map-result .brow { color: var(--ochre); }
.map-res-main { min-width: 0; }
.map-res-rail { margin-top: 30px; }
.map-summary { background: var(--card); border: 1px solid var(--hairline); border-radius: 14px; padding: 24px 24px 26px; }
.map-summary .brow { color: var(--faint); }
.map-sum-name { margin-top: 10px; font: 500 27px/1.05 var(--font-serif); letter-spacing: -0.01em; color: var(--ink); }
.map-sum-name em { font-style: italic; color: var(--ochre); }
.map-sum-meta { margin: 7px 0 0; font: 600 var(--t-brow-size)/1.3 var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.map-sum-price { margin: 16px 0 18px; font: 500 24px/1 var(--font-serif); font-variant-numeric: tabular-nums; color: var(--ink); }
.map-sum-price span { display: block; margin-top: 5px; font: 600 12px/1.3 var(--font-sans); letter-spacing: 0.02em; color: var(--ochre); text-transform: none; }
.map-sum-price a { color: var(--ochre); }
.map-cellname { margin: 12px 0 0; font: 500 42px/1.04 var(--font-serif); letter-spacing: -0.015em; color: var(--ink); }
.map-cellname em { font-style: italic; color: var(--ochre); }
.map-ledger { margin: 8px 0 0; font: 600 var(--t-brow-size)/1.3 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.map-reading { margin: 18px 0 0; font: 400 var(--t-ledger-size)/1.5 var(--font-serif); font-style: italic; color: var(--quiet); }
.map-answers { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 20px 0 0; }
.map-achip { font: 600 11px/1 var(--font-sans); letter-spacing: 0.04em; color: var(--ochre); border: 1px solid var(--hairline); border-radius: 99px; padding: 8px 13px; }
.map-redo { margin-left: auto; background: none; border: 0; cursor: pointer; font: 600 var(--t-whisper-size)/1 var(--font-sans); color: var(--quiet); text-decoration: underline; text-underline-offset: 3px; padding: 8px 4px; }
.map-redo:hover { color: var(--ink); }
.map-bars { margin: 28px 0 0; display: grid; gap: 14px; padding: 22px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.map-bar-h { display: flex; justify-content: space-between; font: 600 11px/1 var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.map-bar-n { color: var(--quiet); }
.map-bar-t { display: block; margin-top: 8px; height: 4px; border-radius: 2px; background: var(--hairline-soft); overflow: hidden; }
.map-bar-f { display: block; height: 100%; background: var(--ochre); }
.map-ritual { margin: 30px 0 0; }
.map-ritual .brow { color: var(--faint); }
.map-steps { list-style: none; margin: 16px 0 0; padding: 0; }
.map-step { display: grid; grid-template-columns: 92px 1fr auto; gap: 12px; align-items: baseline; padding: 15px 0; border-top: 1px solid var(--hairline-soft); }
.map-step:first-child { border-top: 0; }
.map-step-k { font: 600 9.5px/1.4 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ochre); }
.map-step-when { display: block; margin-top: 3px; color: var(--faint); letter-spacing: 0.08em; }
.map-step-name { font: 500 var(--t-web-body-size, 17px)/1.25 var(--font-serif); color: var(--ink); text-decoration: none; }
a.map-step-name:hover { color: var(--ochre); text-decoration: underline; text-underline-offset: 3px; }
.map-step-why { display: block; margin-top: 4px; font: 400 var(--t-whisper-size)/1.4 var(--font-serif); color: var(--quiet); }
.map-step-p { font: 500 15px/1 var(--font-serif); font-variant-numeric: tabular-nums; color: var(--ink); }
.map-prov { margin: 30px 0 0; border-top: 1px solid var(--hairline); padding-top: 18px; }
.map-prov summary { cursor: pointer; font: 600 var(--t-whisper-size)/1.3 var(--font-sans); color: var(--ink); list-style: none; }
.map-prov summary::-webkit-details-marker { display: none; }
.map-prov summary::before { content: "+ "; color: var(--ochre); }
.map-prov[open] summary::before { content: "– "; }
.map-prov-list { list-style: none; margin: 8px 0 0; padding: 0; }
.map-prov-row { display: grid; grid-template-columns: 80px 1fr auto; gap: 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--hairline-soft); font: 400 14px/1.35 var(--font-serif); color: var(--quiet); }
.map-prov-row span:first-child { font: 600 9.5px/1.4 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.map-prov-n { color: var(--ink); }
.map-prov-p { font-variant-numeric: tabular-nums; }
@media (min-width: 768px) {
  .map-guide { font-size: 36px; }
  .map-cellname { font-size: 52px; }
  /* the deliberate desktop proportion: profile ~3/5, action rail ~2/5 */
  .map-result { max-width: 1040px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 56px; align-items: start; }
  .map-res-rail { margin-top: 46px; position: sticky; top: 84px; }
  .map-prov { grid-column: 1 / -1; }
}