/* ===== Dialed, Version B (classic). Image-led storefront.
   Same tokens and type as Version A so the two read as siblings. ===== */
:root {
  --ink: #17181C; --ink-2: #1F2126; --paper: #F4F4F1; --stone: #E7E7E2; --stone-2: #D8D8D2;
  --accent: #5C7C9C; --muted: #5A5E63; --line: rgba(23,24,28,.12); --line-light: rgba(244,244,241,.16);
  --serif: 'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --sans: 'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --fs-h1: clamp(40px,5.6vw,72px); --fs-h2: clamp(32px,4.2vw,52px); --fs-h3: clamp(21px,2vw,26px);
  --fs-lead: clamp(17px,1.5vw,19px); --radius: 22px; --max: 1280px; --gutter: 24px; --section: 128px;
  --ease: cubic-bezier(0.23,1,0.32,1);
}
@media (max-width: 760px) { :root { --gutter: 16px; --section: 84px; } }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 900; letter-spacing: -.02em; line-height: 1.05; margin: 0; }
h3 { font-size: var(--fs-h3); line-height: 1.18; }
p { margin: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow { font: 500 13px/1 var(--sans); font-variant-caps: all-small-caps; letter-spacing: .07em; color: var(--accent); }
.lead { font-size: var(--fs-lead); color: var(--muted); max-width: 36em; }
.section { padding: var(--section) 0; }
.section-head { display: grid; gap: 18px; margin-bottom: 52px; max-width: 780px; }
.section-head h2 { font-size: var(--fs-h2); }
.link { border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.link:hover { color: var(--accent); }
.money { font-variant-numeric: tabular-nums; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 26px; border-radius: 999px; font: 500 16px/1 var(--sans); background: var(--ink); color: var(--paper); transition: transform .16s var(--ease), opacity .2s; }
.btn:active { transform: scale(.97); }
.btn:hover { opacity: .88; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn-ghost:hover { opacity: 1; background: rgba(23,24,28,.05); }
.on-dark .btn { background: var(--paper); color: var(--ink); }
.on-dark .btn-ghost { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1px rgba(244,244,241,.55); }
.btn[disabled] { background: var(--stone-2); color: var(--muted); cursor: not-allowed; }
.btn-block { width: 100%; }

/* Announcement + nav */
.announce { background: var(--ink); color: var(--paper); text-align: center; font-size: 13px; padding: 10px var(--gutter); }
.nav { border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; z-index: 50; }
.nav .wrap { display: flex; align-items: center; height: 64px; gap: 28px; }
.logo-img { height: 40px; width: auto; }
.nav-links { display: flex; gap: 26px; margin-left: auto; font-size: 15px; align-items: center; }
.nav-links a { color: var(--muted); }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--ink); }
.cart-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; height: 36px; padding: 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
.cart-count { min-width: 20px; height: 20px; border-radius: 10px; background: var(--ink); color: var(--paper); font-size: 12px; display: inline-grid; place-items: center; padding: 0 6px; }
.menu-btn { display: none; }
@media (max-width: 900px) {
  /* v6: no dropdown panel from the bar. The hamburger (left) opens the
     slide-in menu (.mnav, rules at the end of this file); the cart
     stays in the bar at the right. */
  .nav-links { display: none; }
  .menu-btn { display: inline-flex; }
  .cart-btn { margin-left: auto; }
}

/* Hero (image / video banner) */
.hero { position: relative; background: var(--ink); color: var(--paper); overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,16,19,.88) 0%, rgba(15,16,19,.55) 42%, rgba(15,16,19,0) 68%); }
.hero-inner { position: relative; max-width: var(--max); margin: 0 auto; padding: 120px var(--gutter) 110px; display: grid; gap: 26px; max-width: var(--max); }
.hero-copy { max-width: 620px; display: grid; gap: 24px; }
.hero h1 { font-size: clamp(44px, 6.2vw, 84px); line-height: .98; letter-spacing: -.03em; }
.hero .sub { font-size: var(--fs-lead); color: rgba(244,244,241,.82); max-width: 30em; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 760px) { .hero-inner { min-height: 88svh; padding: 84px var(--gutter) 40px; align-content: end; } .hero h1 { font-size: 42px; } .hero-shade { background: linear-gradient(180deg, rgba(15,16,19,.18) 0%, rgba(15,16,19,0) 34%, rgba(15,16,19,.78) 72%, rgba(15,16,19,.92) 100%); } .hero-media img, .hero-media video { object-position: 44% 50%; } }

/* Benefits bar */
.benefits { background: var(--ink); color: var(--paper); border-top: 1px solid var(--line-light); }
.benefits .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.benefits div { padding: 20px 18px; border-left: 1px solid var(--line-light); font-size: 14.5px; display: grid; gap: 3px; }
.benefits div:first-child { border-left: 0; }
.benefits b { font-weight: 500; font-size: 15.5px; }
.benefits span { color: rgba(244,244,241,.66); }
@media (max-width: 900px) { .benefits .wrap { grid-template-columns: 1fr 1fr; } .benefits div { border-top: 1px solid var(--line-light); } }

/* Split story */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split .media { border-radius: var(--radius); overflow: hidden; }
.split .media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/4.6; }
.split .copy { display: grid; gap: 20px; align-content: center; }
.split .copy h2 { font-size: var(--fs-h2); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 36px; } .split .media img { aspect-ratio: 4/3; } }

/* Product cards */
.grid-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1100px) { .grid-products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .grid-products { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: grid; grid-template-rows: auto 1fr; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(23,24,28,.10); }
.card .ph { aspect-ratio: 1/1; background: var(--stone); overflow: hidden; }
.card .ph img { width: 100%; height: 100%; object-fit: cover; }
.card .body { padding: 18px; display: grid; gap: 6px; align-content: start; }
.card .step { font: 500 12.5px/1 var(--sans); font-variant-caps: all-small-caps; letter-spacing: .07em; color: var(--accent); }
.card h3 { font-size: 20px; }
.card .bene { color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.card .row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; }
.card .price { font-weight: 500; }
.card .view { font-size: 14.5px; border-bottom: 1px solid currentColor; }

/* Routine steps rail */
.routine-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.routine-row { display: grid; grid-template-columns: 64px 120px 1fr auto; gap: 24px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
.routine-row .n { font-family: var(--serif); font-size: 30px; color: var(--accent); }
.routine-row .thumb { width: 120px; height: 90px; border-radius: 14px; overflow: hidden; background: var(--stone); }
.routine-row .thumb img { width: 100%; height: 100%; object-fit: cover; }
.routine-row h3 { font-size: 22px; }
.routine-row p { color: var(--muted); font-size: 15px; max-width: 34em; }
@media (max-width: 760px) { .routine-row { grid-template-columns: 40px 84px 1fr; } .routine-row .thumb { width: 84px; height: 64px; } .routine-row .go { display: none; } }

/* Category tiles */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cat-tile { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 240px; display: flex; align-items: flex-end; background: var(--ink); }
.cat-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.cat-tile .cap { position: relative; padding: 22px; color: var(--paper); display: grid; gap: 4px; background: linear-gradient(0deg, rgba(15,16,19,.78), transparent); width: 100%; }
.cat-tile h3 { font-size: 24px; }
.cat-tile p { color: rgba(244,244,241,.8); font-size: 14.5px; }
@media (max-width: 900px) { .cat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cat-grid { grid-template-columns: 1fr; } }

/* Tier cards */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tier { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; display: grid; gap: 14px; align-content: start; }
.tier.hot { border-color: var(--ink); box-shadow: 0 18px 44px rgba(23,24,28,.10); }
.tier .tname { font: 500 13px/1 var(--sans); font-variant-caps: all-small-caps; letter-spacing: .07em; color: var(--accent); }
.tier .tprice { font-family: var(--serif); font-size: 40px; }
.tier ul { margin: 0; padding: 0 0 0 18px; color: var(--muted); font-size: 15px; display: grid; gap: 6px; }
.tier .save { color: var(--accent); font-weight: 500; font-size: 15px; }
@media (max-width: 900px) { .tier-grid { grid-template-columns: 1fr; } }

/* Materials */
.materials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.material { border-top: 2px solid var(--ink); padding-top: 18px; display: grid; gap: 8px; align-content: start; }
.material p { color: var(--muted); font-size: 15.5px; }
@media (max-width: 900px) { .materials { grid-template-columns: 1fr; } }

/* FAQ */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); padding: 20px 0; }
.faq summary { font-family: var(--serif); font-size: 20px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq p { color: var(--muted); margin-top: 10px; max-width: 38em; }

/* Final CTA (dark closing band) */
.final-cta .wrap { background: var(--ink); color: var(--paper); border-radius: var(--radius); padding: 56px 48px; display: grid; gap: 20px; justify-items: start; }
.final-cta h2 { font-size: var(--fs-h2); }
.final-cta p { color: rgba(244,244,241,.72); font-size: var(--fs-lead); }
.final-cta .actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 560px) { .final-cta .wrap { padding: 36px 24px; } }

/* Email capture */
.capture { background: var(--stone); border-radius: var(--radius); padding: 44px; display: grid; gap: 16px; }
.capture form { display: flex; gap: 10px; max-width: 480px; }
.capture input { flex: 1; height: 50px; border-radius: 999px; border: 1px solid var(--line); padding: 0 20px; font: inherit; background: #fff; min-width: 0; }
@media (max-width: 560px) { .capture { padding: 28px; } .capture form { flex-direction: column; } }

/* Footer */
.footer { background: var(--ink); color: var(--paper); padding: 72px 0 40px; }
.footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.footer h4 { font: 500 13px/1 var(--sans); font-variant-caps: all-small-caps; letter-spacing: .07em; color: rgba(244,244,241,.55); margin: 0 0 16px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.footer ul a { color: rgba(244,244,241,.85); }
.footer .fine { border-top: 1px solid var(--line-light); margin-top: 48px; padding-top: 24px; font-size: 13.5px; color: rgba(244,244,241,.55); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer .logo-img { height: 44px; }
.footer .blurb { color: rgba(244,244,241,.66); max-width: 26em; margin-top: 14px; font-size: 15px; }
@media (max-width: 900px) { .footer .cols { grid-template-columns: 1fr 1fr; } }

/* Shop filters */
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 36px; }
.chip { height: 40px; padding: 0 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; display: inline-flex; align-items: center; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }

/* PDP */
.pdp { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: start; }
.pdp .gallery { display: grid; gap: 12px; position: sticky; top: 96px; }
/* PDP carousel: one main image, swipe through, tap for the lightbox.
   There is deliberately no thumbnail grid anywhere on the page. */
.pdp .carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--radius); background: var(--stone); scrollbar-width: none; }
.pdp .carousel::-webkit-scrollbar { display: none; }
.pdp .carousel .slide { flex: 0 0 100%; scroll-snap-align: start; border: 0; padding: 0; background: none; cursor: zoom-in; }
.pdp .carousel .slide img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.car-ui { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 20px; }
.car-dots { display: flex; gap: 6px; flex-wrap: wrap; }
.car-dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: var(--line); cursor: pointer; }
.car-dots button[aria-pressed="true"] { background: var(--ink); }
.car-count { font-size: 13px; color: var(--muted); white-space: nowrap; }
.pdp .buy { display: grid; gap: 20px; }
.pdp .buy h1 { font-size: clamp(34px, 4vw, 52px); }
.pdp .price { font-size: 24px; font-weight: 500; }
.price-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.price-row .rating-slot { margin-left: auto; text-align: right; }
.price-row .rating-slot .rating { margin: 0; }
/* Photo swatches: a variant with its own photo is chosen by its photo. */
.opt-vals button.swatch { height: auto; padding: 5px; border-radius: 14px; display: grid; gap: 5px; justify-items: center; background: var(--paper); }
.opt-vals button.swatch img { width: 56px; height: 56px; object-fit: cover; border-radius: 9px; display: block; }
.opt-vals button.swatch span { font-size: 11.5px; line-height: 1.15; text-align: center; max-width: 76px; }
.opt-vals button.swatch[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
/* Fullscreen lightbox gallery */
.lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(12, 12, 14, .96); display: grid; grid-template-rows: auto 1fr auto; padding: 14px; gap: 10px; }
.lightbox[hidden] { display: none; }
.lightbox .lb-close { justify-self: end; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.lightbox .lb-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; align-items: center; }
.lightbox .lb-track::-webkit-scrollbar { display: none; }
.lightbox .lb-slide { flex: 0 0 100%; scroll-snap-align: center; display: grid; place-items: center; }
.lightbox .lb-slide img { max-width: 100%; max-height: calc(100vh - 150px); object-fit: contain; border-radius: 12px; }
.lightbox .car-dots button { background: rgba(255,255,255,.35); }
.lightbox .car-dots button[aria-pressed="true"] { background: #fff; }
.lightbox .car-count { color: rgba(255,255,255,.75); }
.opt-group { display: grid; gap: 10px; }
.opt-group .lbl { font: 500 13px/1 var(--sans); font-variant-caps: all-small-caps; letter-spacing: .07em; color: var(--muted); }
.opt-vals { display: flex; gap: 8px; flex-wrap: wrap; }
.opt-vals button { height: 42px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; }
.opt-vals button[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }
.buy-lines { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 0; display: grid; gap: 8px; font-size: 15px; color: var(--muted); }
.buy-lines b { color: var(--ink); font-weight: 500; }
.details-list { margin: 0; padding: 0 0 0 18px; color: var(--muted); display: grid; gap: 7px; font-size: 15.5px; }
.sticky-atc { display: none; }
@media (max-width: 900px) {
  .pdp { grid-template-columns: 1fr; gap: 32px; }
  .pdp .gallery { position: static; }
  .sticky-atc { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--paper); border-top: 1px solid var(--line); padding: 12px var(--gutter); gap: 12px; align-items: center; transform: translateY(110%); transition: transform .3s var(--ease); }
  .sticky-atc.show { transform: none; }
  .sticky-atc .p { font-weight: 500; white-space: nowrap; }
  .sticky-atc .btn { flex: 1; }
}

/* Cart drawer */
.drawer-veil { position: fixed; inset: 0; background: rgba(15,16,19,.45); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 80; }
.drawer-veil.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 92vw); background: var(--paper); z-index: 90; transform: translateX(102%); transition: transform .38s var(--ease); display: grid; grid-template-rows: auto 1fr auto; }
.drawer.open { transform: none; }
.drawer header { display: flex; justify-content: space-between; align-items: center; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.drawer header h3 { font-size: 22px; }
.drawer .items { overflow-y: auto; padding: 8px 22px; }
.drawer .empty { color: var(--muted); padding: 28px 0; }
.citem { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.citem img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; background: var(--stone); }
.citem .t { font-weight: 500; font-size: 15px; }
.citem .v { color: var(--muted); font-size: 13.5px; }
.citem .qty { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; }
.citem .qty button { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; }
.citem .rm { color: var(--muted); font-size: 13px; text-decoration: underline; margin-top: 6px; }
.citem .amt { font-weight: 500; font-size: 15px; }
.drawer footer { padding: 20px 22px 26px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.drawer footer .sub { display: flex; justify-content: space-between; font-size: 16px; }
.drawer footer .note { color: var(--muted); font-size: 13.5px; }

/* Builder */
.builder-layout { display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: start; }
@media (max-width: 1000px) { .builder-layout { grid-template-columns: 1fr; } }
.fit-box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: grid; gap: 16px; margin-bottom: 28px; }
.fit-box select { height: 48px; border-radius: 12px; border: 1px solid var(--line); padding: 0 14px; font: inherit; background: #fff; width: 100%; }
.tier-switch { display: flex; gap: 8px; flex-wrap: wrap; }
.tier-switch button { height: 44px; padding: 0 20px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; }
.tier-switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }
.bstep { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 16px; overflow: hidden; }
.bstep > button.head { width: 100%; display: flex; align-items: center; gap: 16px; padding: 20px 22px; text-align: left; }
.bstep .num { width: 34px; height: 34px; border-radius: 50%; background: var(--stone); display: grid; place-items: center; font-weight: 500; flex: none; }
.bstep.done .num { background: var(--ink); color: var(--paper); }
.bstep .head h3 { font-size: 21px; }
.bstep .head .picked { margin-left: auto; color: var(--muted); font-size: 14.5px; text-align: right; }
.bstep .panel { padding: 4px 22px 24px; display: none; }
.bstep.open .panel { display: block; }
.bstep .why { color: var(--muted); font-size: 15px; margin-bottom: 16px; max-width: 36em; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.pick { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; text-align: left; background: #fff; display: grid; padding: 0; }
.pick img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--stone); }
.pick .pb { padding: 12px 14px; display: grid; gap: 3px; }
.pick .pb .pn { font-weight: 500; font-size: 15px; }
.pick .pb .pd { color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.pick .pb .pp { font-size: 14.5px; margin-top: 4px; }
.pick[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.pick[disabled] { opacity: .55; cursor: not-allowed; }
.rec { font: 500 11.5px/1 var(--sans); font-variant-caps: all-small-caps; letter-spacing: .07em; color: var(--accent); }
.sub-opts { margin-top: 14px; display: grid; gap: 8px; }
.summary { background: var(--ink); color: var(--paper); border-radius: var(--radius); padding: 28px; position: sticky; top: 96px; display: grid; gap: 16px; }
.summary h3 { font-size: 24px; }
.summary .prog { font-size: 15px; color: rgba(244,244,241,.75); }
.summary .lines { display: grid; gap: 8px; font-size: 15px; border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); padding: 14px 0; }
.summary .lines div { display: flex; justify-content: space-between; gap: 12px; }
.summary .lines .off { color: #9DB8D2; }
.summary .total { display: flex; justify-content: space-between; font-size: 19px; font-weight: 500; }
.summary .rule { font-size: 13.5px; color: rgba(244,244,241,.6); }
.summary .btn { background: var(--paper); color: var(--ink); }
.summary-bar { display: none; }
@media (max-width: 1000px) {
  .summary { display: none; }
  .summary-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--ink); color: var(--paper); padding: 12px var(--gutter); gap: 14px; align-items: center; }
  .summary-bar .btn { background: var(--paper); color: var(--ink); flex: 1; height: 46px; }
  .summary-bar .si { font-size: 14px; line-height: 1.3; }
  .summary-bar .si b { font-size: 16px; }
}
.toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); background: var(--ink); color: var(--paper); padding: 13px 22px; border-radius: 999px; font-size: 15px; opacity: 0; pointer-events: none; transition: all .3s var(--ease); z-index: 120; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ===== Landing rebuild: chapters, builder panel ===== */
.chapter { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; padding: 44px 0; border-top: 1px solid var(--line); }
.chapter:first-child { border-top: 0; padding-top: 6px; }
.chapter.flip .ch-media { order: 2; }
.ch-media { border-radius: var(--radius); overflow: hidden; background: var(--stone); display: block; }
.ch-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .6s var(--ease); }
.ch-media:hover img { transform: scale(1.03); }
.ch-copy { display: grid; gap: 14px; align-content: center; }
.ch-num { font: 500 13px/1 var(--sans); font-variant-caps: all-small-caps; letter-spacing: .08em; color: var(--accent); }
.ch-copy h3 { font-size: clamp(26px, 3vw, 38px); }
.ch-fail { color: var(--muted); font-size: var(--fs-lead); }
.ch-fix { font-size: var(--fs-lead); }
@media (max-width: 900px) { .chapter { grid-template-columns: 1fr; gap: 24px; padding: 32px 0; } .chapter.flip .ch-media { order: 0; } }
.builder-panel { background: var(--ink); color: var(--paper); }
.builder-panel .lead { color: rgba(244,244,241,.72); }
.builder-panel .tier { background: var(--ink-2); border-color: rgba(244,244,241,.18); color: var(--paper); }
.builder-panel .tier.hot { border-color: var(--paper); box-shadow: none; }
.builder-panel .tier ul { color: rgba(244,244,241,.7); }
.builder-panel .tier .btn-ghost { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1px rgba(244,244,241,.55); }
.builder-panel .panel-note { margin-top: 26px; color: rgba(244,244,241,.6); font-size: 15px; }

/* ===== Visual-first rebuild: kit cards, category scroll ===== */
.kit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kit-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.kit-card.hot { border-color: var(--ink); box-shadow: 0 18px 44px rgba(23,24,28,.10); }
.kit-media { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--ink); }
.kit-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.kit-card:hover .kit-media img { transform: scale(1.03); }
.kit-body { padding: 24px; display: grid; gap: 10px; align-content: start; }
.kit-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.kit-body .tname { font: 500 13px/1 var(--sans); font-variant-caps: all-small-caps; letter-spacing: .07em; color: var(--accent); }
.kit-body .tprice { font-family: var(--serif); font-size: 34px; }
.kit-items { color: var(--muted); font-size: 15px; }
.kit-body .save { color: var(--accent); font-weight: 500; font-size: 14.5px; }
.kit-body .btn { margin-top: 6px; }
.kit-note { margin-top: 22px; color: var(--muted); font-size: 14.5px; }
@media (max-width: 900px) { .kit-grid { grid-template-columns: 1fr; } }

.cat-scroll { display: flex; gap: 16px; overflow-x: auto; padding: 4px var(--gutter) 18px; scroll-snap-type: x mandatory; scrollbar-width: none; max-width: var(--max); margin: 0 auto; }
.cat-scroll::-webkit-scrollbar { display: none; }
.cat-card { flex: 0 0 272px; scroll-snap-align: start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: grid; grid-template-rows: auto 1fr; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.cat-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(23,24,28,.10); }
.cat-media { display: block; aspect-ratio: 1/1; background: var(--stone); overflow: hidden; }
.cat-media img { width: 100%; height: 100%; object-fit: cover; }
.cat-cap { padding: 10px 14px 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cat-cap b { font-family: var(--serif); font-weight: 500; font-size: 20px; }
.cat-cap span { color: var(--muted); font-size: 14px; white-space: nowrap; }
@media (max-width: 760px) { .cat-card { flex-basis: 224px; } }

/* ===== PDP enhanced modules: three rotating treatments ===== */
.rating { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--muted); }
.rating-slot:empty { display: none; }
.card-rating { display: block; margin: 2px 0 0; }
.card-rating .rating { font-size: 13.5px; gap: 6px; }
.rating .stars { color: var(--ink); letter-spacing: 2px; }
.pdp-modules { margin-top: 88px; display: grid; gap: 20px; }
.mod { padding: 72px 0; border-radius: var(--radius); }
.mod-stone { background: var(--stone); }
.mod-dark { background: var(--ink); color: var(--paper); }
.mod .split .media img { aspect-ratio: 4/3; }
.mod .split.solo { grid-template-columns: 1fr; }
.mod .split.solo .copy { max-width: 760px; }
.mod-benefit { display: grid; gap: 22px; max-width: 880px; }
.mod-benefit h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.12; }
.angle-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.angle-strip img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--radius); background: var(--stone); }
.spec-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; max-width: 980px; }
.spec-row { padding: 18px 0; border-top: 1px solid rgba(23,24,28,.16); font-size: 16.5px; }
@media (max-width: 760px) { .spec-rows { grid-template-columns: 1fr; } .mod { padding: 64px 0; } .pdp-modules { margin-top: 64px; } }

/* ===== PDP EBC modules (Slice 1, 2026-11-05) + slim routine band =====
   Rendered by product.js from the PDP_EBC records. Treatments stay in
   the closed set: stone, dark, paper. Walnut comes from photos only. */
.callouts { display: flex; flex-wrap: wrap; gap: 8px; }
.callout { border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 500; background: #fff; }
.mod-dark .callout { background: transparent; border-color: var(--line-light); color: var(--paper); }
.seq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.seq-frame { margin: 0; display: grid; gap: 10px; }
.seq-frame img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--radius); background: var(--stone); }
.seq-frame figcaption { font-size: 15.5px; font-weight: 500; display: flex; gap: 10px; align-items: baseline; }
.seq-frame figcaption b { font: 500 12.5px/1 var(--sans); color: var(--accent); letter-spacing: .06em; }
.fit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fit-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.fit-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.fit-card p { padding: 14px 16px 16px; font-size: 16px; }
.fit-card p b { display: block; font-size: 17px; }
.limits-line { margin-top: 22px; color: var(--muted); font-size: 15.5px; max-width: 44em; }
.fit-grid-2 { grid-template-columns: repeat(2, 1fr); }
.kind-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.kind-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.kind-media { aspect-ratio: 4/3; overflow: hidden; background: var(--stone); }
.kind-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kind-body { padding: 22px 24px 26px; display: flex; flex-direction: column; }
.kind-body h3 { margin: 0 0 6px; font-size: 22px; font-weight: 900; }
.kind-for { margin: 0 0 14px; color: var(--muted); line-height: 1.5; }
.kind-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 7px; font-size: 15px; line-height: 1.45; }
.kind-list li { padding-left: 22px; position: relative; }
.kind-pros li::before { content: "+"; position: absolute; left: 2px; font-weight: 900; color: var(--accent); }
.kind-cons li { color: var(--muted); }
.kind-cons li::before { content: "\2212"; position: absolute; left: 2px; font-weight: 900; color: var(--accent); }
.kind-body .btn { margin-top: auto; align-self: flex-start; }
.kind-here { margin-top: auto; font-size: 14px; font-weight: 700; color: var(--muted); }
@media (max-width: 760px) { .kind-grid { grid-template-columns: 1fr; } .kind-body { padding: 18px 18px 22px; } }
.mod-pack .wrap { display: flex; gap: 28px; align-items: baseline; flex-wrap: wrap; }
.mod-pack h2 { font-size: var(--fs-h3); }
.mod-pack .lead { font-size: 16.5px; }
.mod-band { background: var(--ink); color: var(--paper); border-radius: var(--radius); padding: 26px 0; }
.mod-band .wrap { display: flex; gap: 22px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.mod-band .band-copy { display: grid; gap: 4px; max-width: 46em; }
.mod-band .band-copy .eyebrow { color: #9DB8D2; }
.mod-band .band-line { font-size: 18px; font-weight: 500; }
.mod-band .btn { background: var(--paper); color: var(--ink); flex: none; }
@media (max-width: 760px) { .seq-grid, .fit-grid { grid-template-columns: 1fr; } .mod-band .btn { width: 100%; } }

/* ===== Builder wizard (one step at a time) ===== */
.wiz { max-width: 880px; margin: 0 auto; }
.wiz-top { display: flex; align-items: center; gap: 18px; margin-bottom: 30px; }
.wiz-segs { flex: 1; display: flex; gap: 6px; }
.wiz-segs span { height: 4px; flex: 1; border-radius: 99px; background: var(--stone); }
.wiz-segs span.done { background: var(--ink); }
.wiz-segs span.now { background: var(--accent); }
.wiz-total { font-size: 14.5px; color: var(--muted); white-space: nowrap; }
.wiz-total b { color: var(--ink); font-size: 16px; }
.wiz-screen { display: grid; gap: 18px; }
.wiz-h { font-size: clamp(30px, 4vw, 44px); }
.wiz-sub { color: var(--muted); font-size: 16.5px; max-width: 34em; }
.wiz-note { color: var(--muted); font-size: 14.5px; }
.wiz-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.wiz-tiers button { display: grid; gap: 0; height: auto; padding: 0; border-radius: 16px; text-align: left; font-size: 16px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.wiz-tiers button img { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: var(--stone); }
.wiz-tiers button .tc-t { display: grid; gap: 2px; padding: 12px 16px 14px; }
.wiz-tiers button small { font-size: 12.5px; opacity: .65; font-weight: 400; }
.wiz-tiers button[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }
.kit-preview { display: grid; gap: 10px; margin-top: 4px; }
.kp-h { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kp-row { display: flex; gap: 10px; flex-wrap: wrap; }
.kp-row figure { margin: 0; display: grid; gap: 6px; width: 92px; }
.kp-row img { width: 92px; height: 92px; object-fit: cover; border-radius: 12px; background: var(--stone); }
.kp-row figcaption { font-size: 12.5px; color: var(--muted); text-align: center; }
@media (max-width: 760px) { .wiz-tiers { grid-template-columns: 1fr; } .wiz-tiers button { grid-template-columns: 118px 1fr; align-items: stretch; } .wiz-tiers button img { aspect-ratio: auto; height: 100%; min-height: 86px; } .wiz-tiers button .tc-t { align-content: center; } }
.wiz-brands { display: flex; flex-wrap: wrap; gap: 10px; }
.wiz-brand { display: grid; gap: 1px; padding: 12px 20px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); font-size: 16px; background: #fff; text-align: left; }
.wiz-brand small { color: var(--muted); font-size: 12.5px; }
.wiz-brand[aria-pressed="true"] small { color: rgba(244,244,241,.7); }
.wiz-brand[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }
.wiz-models { display: flex; flex-wrap: wrap; gap: 10px; }
.wiz-model { display: grid; gap: 1px; padding: 10px 18px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; background: #fff; text-align: left; }
.wiz-model small { color: var(--muted); font-size: 12.5px; }
.wiz-model[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }
.wiz-model[aria-pressed="true"] small { color: rgba(244,244,241,.7); }
.wiz-or { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 13.5px; font-variant-caps: all-small-caps; letter-spacing: .07em; }
.wiz-or::before, .wiz-or::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.wiz-picks { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.wiz-picks .pick img { aspect-ratio: 1/1; }
.wiz-subs { display: grid; gap: 4px; }
.wiz-nav { display: flex; justify-content: space-between; gap: 14px; margin-top: 10px; }
.wiz-nav .btn { min-width: 150px; }
.wiz-lines { display: grid; border-top: 1px solid var(--line); }
.wiz-line { display: grid; grid-template-columns: 56px 1fr auto auto; gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); }
.wiz-line img, .wiz-noimg { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--stone); }
.wiz-line .wl-t { display: grid; gap: 1px; }
.wiz-line .wl-t b { font-weight: 500; }
.wiz-line .wl-t small { color: var(--muted); font-size: 13.5px; }
.wiz-line.off { color: var(--accent); grid-template-columns: 1fr auto auto; }
.wiz-change { color: var(--muted); text-decoration: underline; font-size: 14px; }
.wiz-totalrow { display: flex; justify-content: space-between; font-size: 20px; font-weight: 500; padding-top: 6px; }
.wiz-reset { color: var(--muted); text-decoration: underline; font-size: 14px; }
@media (max-width: 700px) { .wiz-nav .btn { min-width: 0; flex: 1; } .wiz-line { grid-template-columns: 48px 1fr auto; } .wiz-change { grid-column: 2; justify-self: start; padding: 0; } }

/* ===== PDP: routine strip, duo media ===== */
.routine-strip { margin-top: 56px; padding: 26px 0 6px; border-top: 1px solid var(--line); }
.rs-row { display: flex; align-items: stretch; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.rs-step { flex: 1; min-width: 130px; display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; background: var(--stone); font-size: 15.5px; font-weight: 500; align-content: start; }
.rs-step b { font: 500 12.5px/1 var(--sans); color: var(--accent); letter-spacing: .06em; }
.rs-step small { color: var(--muted); font-weight: 400; font-size: 13px; }
.rs-step.now { background: var(--ink); color: var(--paper); }
.rs-step.now small { color: rgba(244,244,241,.65); }
.rs-arrow { align-self: center; color: var(--muted); }
@media (max-width: 760px) { .rs-arrow { display: none; } .rs-step { min-width: calc(50% - 8px); } }
.media-duo { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; }
.media-duo img { width: 100%; height: 100%; object-fit: contain; background: #fff; border-radius: var(--radius); aspect-ratio: auto; }
.mod .split .media-duo img { aspect-ratio: auto; }

/* ===== Design v2: homepage structure + graphic design (home-scoped) ===== */
/* Hero v2 */
body[data-page="home"] .hero-inner { padding: 150px var(--gutter) 130px; }
body[data-page="home"] .hero-copy { max-width: 540px; gap: 26px; }
body[data-page="home"] .hero h1 { font-size: clamp(36px, 3.6vw, 50px); font-weight: 900; }
body[data-page="home"] .hero .sub { font-family: var(--serif); font-size: clamp(18px, 1.9vw, 24px); color: var(--paper); letter-spacing: -.01em; }
.spec-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.spec-chip { border: 1px solid rgba(244,244,241,.45); border-radius: 999px; padding: 9px 16px; font-size: 14px; font-weight: 500; color: var(--paper); background: rgba(15,16,19,.32); backdrop-filter: blur(6px); }
.scroll-cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; color: rgba(244,244,241,.75); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; z-index: 3; }
.scroll-cue i { display: block; width: 1px; height: 38px; background: rgba(244,244,241,.45); position: relative; overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: var(--paper); animation: cue-drop 2.2s var(--ease) infinite; }
@keyframes cue-drop { 0% { top: -40%; } 60%, 100% { top: 110%; } }
@media (max-width: 760px) { body[data-page="home"] .hero-inner { min-height: 88svh; padding: 92px var(--gutter) 76px; } body[data-page="home"] .hero h1 { font-size: clamp(28px, 8vw, 32px); } .scroll-cue { display: none; } }

/* Marquee */
.marquee { background: var(--ink); color: var(--paper); overflow: hidden; border-top: 1px solid var(--line-light); }
.marquee-track { display: flex; width: max-content; animation: mq-slide 30s linear infinite; }
.marquee-group { display: flex; align-items: center; white-space: nowrap; }
.marquee-group span { font-family: var(--serif); font-size: clamp(16px, 1.8vw, 21px); font-weight: 500; padding: 15px 18px; }
.marquee-group i { font-style: normal; color: var(--accent); font-size: 13px; }
@keyframes mq-slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } .scroll-cue i::after { animation: none; } }

/* Section heads v2 */
.v2-head { max-width: 900px; margin-bottom: 56px; }
.v2-head h2 { font-size: clamp(28px, 3.3vw, 44px); font-weight: 900; }
.v2-head .eyebrow { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; background: #fff; width: max-content; }

/* Kit cards v2 */
body[data-page="home"] .kit-grid { gap: 22px; }
body[data-page="home"] .kit-card { border-radius: 26px; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
body[data-page="home"] .kit-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(23,24,28,.12); }
body[data-page="home"] .kit-media { position: relative; aspect-ratio: 16/10; }
.kit-badge { position: absolute; top: 14px; left: 14px; background: var(--accent); color: #fff; font: 600 13.5px/1 var(--sans); letter-spacing: .02em; padding: 9px 14px; border-radius: 999px; box-shadow: 0 8px 20px rgba(15,16,19,.35); }
body[data-page="home"] .kit-body { padding: 26px; gap: 12px; }
body[data-page="home"] .kit-body .tname { font-family: var(--serif); font-variant-caps: normal; letter-spacing: -.01em; color: var(--ink); font-size: clamp(23px, 2.1vw, 29px); font-weight: 900; line-height: 1; }
body[data-page="home"] .kit-body .tprice { font-size: clamp(31px, 2.9vw, 40px); font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.kchips { display: flex; flex-wrap: wrap; gap: 6px; }
.kchips span { background: var(--stone); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 500; }
body[data-page="home"] .kit-card.hot { background: var(--ink); color: var(--paper); border-color: var(--ink); }
body[data-page="home"] .kit-card.hot .tname { color: var(--paper); }
body[data-page="home"] .kit-card.hot .save { color: #9DB8D2; }
body[data-page="home"] .kit-card.hot .kchips span { background: rgba(244,244,241,.13); color: var(--paper); }
body[data-page="home"] .kit-card.hot .btn { background: var(--paper); color: var(--ink); }
body[data-page="home"] .kit-card.hot .kit-badge { background: var(--paper); color: var(--ink); }

/* Reveal v2 (full-bleed panel) */
.reveal-v2 { position: relative; overflow: hidden; background: var(--ink); min-height: 82vh; display: flex; align-items: flex-end; }
.reveal-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reveal-panel { position: relative; margin: clamp(16px, 4vw, 56px); max-width: 580px; background: rgba(17,18,21,.78); backdrop-filter: blur(10px); border: 1px solid var(--line-light); border-radius: 26px; padding: clamp(26px, 3.4vw, 44px); color: var(--paper); display: grid; gap: 18px; }
.reveal-panel h2 { font-size: clamp(25px, 3.1vw, 40px); font-weight: 900; }
.reveal-panel .lead { color: rgba(244,244,241,.8); }
.reveal-panel p { color: rgba(244,244,241,.85); }
@media (max-width: 760px) { .reveal-v2 { min-height: 0; padding-top: 46vh; } .reveal-panel { margin: 14px; } }

/* Chapters v2 (ghost numbers) */
body[data-page="home"] .ch-copy { position: relative; }
.ch-ghost { position: absolute; top: -72px; right: -8px; font-family: var(--serif); font-weight: 600; font-size: clamp(84px, 10vw, 140px); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(23,24,28,.13); pointer-events: none; z-index: 0; }
body[data-page="home"] .ch-copy > *:not(.ch-ghost) { position: relative; z-index: 1; }
body[data-page="home"] .chapter { padding: 64px 0; }
@media (max-width: 900px) {
  body[data-page="home"] #chapters { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 18px; }
  body[data-page="home"] #chapters::-webkit-scrollbar { display: none; }
  body[data-page="home"] .chapter { flex: 0 0 84%; scroll-snap-align: start; grid-template-columns: 1fr; gap: 20px; padding: 26px; background: #fff; border: 1px solid var(--line); border-radius: 26px; }
  body[data-page="home"] .chapter:first-child { border-top: 1px solid var(--line); }
  .ch-ghost { top: -40px; right: -4px; font-size: 100px; -webkit-text-stroke-color: rgba(23,24,28,.10); }
}

/* Tray v2 */
.tray-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tray-row figure { margin: 0; display: grid; gap: 12px; }
.tray-row img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 20px; background: var(--stone); }
.tray-row figcaption { display: grid; gap: 2px; }
.tray-row figcaption b { font-family: var(--serif); font-weight: 600; font-size: 20px; }
.tray-row figcaption span { color: var(--muted); font-size: 14px; }
.tray-note { margin-top: 26px; color: var(--muted); font-size: 15.5px; max-width: 44em; }
.tray-note .link { color: var(--ink); }
@media (max-width: 900px) { .tray-row { grid-template-columns: 1fr 1fr; } }

/* Craft v2 */
.craft-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.craft-panel { position: relative; border-radius: 26px; overflow: hidden; min-height: 540px; display: flex; align-items: flex-end; background: var(--ink); }
.craft-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.craft-panel:hover img { transform: scale(1.04); }
.craft-cap { position: relative; width: 100%; padding: 88px 30px 28px; color: var(--paper); background: linear-gradient(0deg, rgba(15,16,19,.82) 0%, rgba(15,16,19,0) 100%); display: grid; gap: 8px; }
.craft-word { font-family: var(--serif); font-weight: 600; font-size: clamp(54px, 6.6vw, 92px); line-height: .95; letter-spacing: -.02em; }
.craft-cap p { color: rgba(244,244,241,.85); font-size: 15.5px; max-width: 30em; }
.craft-note { margin-top: 22px; color: var(--muted); font-size: 15.5px; }
@media (max-width: 900px) { .craft-grid { grid-template-columns: 1fr; } .craft-panel { min-height: 400px; } }

/* Sizes band v2 */
.sizes-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.size-block { background: #fff; border: 1px solid var(--line); border-radius: 26px; padding: 30px; display: grid; gap: 6px; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s; }
.size-block:hover { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(23,24,28,.12); background: var(--ink); color: var(--paper); }
.size-num { font-family: var(--serif); font-weight: 900; font-size: clamp(40px, 4.4vw, 62px); line-height: 1; letter-spacing: -.02em; }
.size-num::after { content: "mm"; font-size: .32em; font-weight: 500; color: var(--accent); margin-left: 6px; letter-spacing: 0; }
.size-fam { font-size: 19px; font-weight: 500; }
.size-go { color: var(--muted); font-size: 14.5px; margin-top: 8px; }
.size-block:hover .size-go { color: rgba(244,244,241,.7); }
@media (max-width: 900px) { .sizes-band { grid-template-columns: 1fr; } }

/* Trust tiles v2 */
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.trust { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 24px; display: grid; gap: 8px; align-content: start; }
.trust svg { width: 28px; height: 28px; color: var(--accent); margin-bottom: 4px; }
.trust b { font-weight: 500; font-size: 16.5px; }
.trust span { color: var(--muted); font-size: 14.5px; line-height: 1.45; }
@media (max-width: 900px) { .trust-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .trust-grid { grid-template-columns: 1fr; } }

/* FAQ v2 */
body[data-page="home"] .faq { border-top: 0; gap: 12px; max-width: 860px; }
body[data-page="home"] .faq details { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px 26px; }
body[data-page="home"] .faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
body[data-page="home"] .faq summary::after { content: "+"; font-family: var(--sans); font-weight: 400; font-size: 26px; color: var(--accent); flex: none; }
body[data-page="home"] .faq details[open ] summary::after { content: "\2013"; }

/* Final CTA v2 + mega wordmark */
body[data-page="home"] .final-cta .wrap { padding: 72px 56px; border-radius: 26px; }
body[data-page="home"] .final-cta h2 { font-size: clamp(30px, 4vw, 56px); font-weight: 900; line-height: 1.0; }
@media (max-width: 560px) { body[data-page="home"] .final-cta .wrap { padding: 44px 26px; } }
.mega-mark { background: var(--ink); padding: 30px var(--gutter) 0; overflow: hidden; }
.mega-mark img { width: min(720px, 88%); margin: 0 auto; display: block; }

/* ===== Design v2.1: morning thread + paired materials (home-scoped) ===== */
/* Morning band (between reveal and routine) */
.morning-band { position: relative; overflow: hidden; background: var(--ink); min-height: 64vh; display: flex; align-items: flex-end; }
.morning-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.morning-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15,16,19,.84) 0%, rgba(15,16,19,.30) 52%, rgba(15,16,19,.06) 100%); }
.morning-copy { position: relative; width: 100%; padding: clamp(30px, 5vw, 64px) var(--gutter); color: var(--paper); display: grid; gap: 14px; }
.morning-copy h2 { font-family: var(--serif); font-size: clamp(30px, 4.2vw, 56px); font-weight: 900; line-height: 1.0; letter-spacing: -.015em; max-width: 12em; }
.morning-copy p { font-size: var(--fs-lead); color: rgba(244,244,241,.85); max-width: 32em; }
@media (max-width: 760px) { .morning-band { min-height: 56vh; } }

/* Paired materials (replaces the wood/steel craft split) */
.pair-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pair-card { background: #fff; border: 1px solid var(--line); border-radius: 26px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.pair-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(23,24,28,.12); }
.pair-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.pair-card:hover img { transform: scale(1.03); }
.pair-body { padding: 22px 24px 26px; display: grid; gap: 6px; align-content: start; }
.pair-body b { font-family: var(--serif); font-weight: 900; font-size: 22px; letter-spacing: -.01em; line-height: 1.1; }
.pair-body p { color: var(--muted); font-size: 15.5px; }
@media (max-width: 900px) { .pair-grid { grid-template-columns: 1fr; } .pair-card img { aspect-ratio: 4/3; } }

/* ===== Design v2.2: liquid glass, site-wide (owner direction 2026-11-05) =====
/* The frosted panels from the hero chips and reveal section, leaned into
   everywhere: translucent surfaces, backdrop blur, a hairline light edge,
   an inner top highlight, and a soft float shadow. */
:root {
  --glass-light: linear-gradient(135deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.52) 55%, rgba(255,255,255,.62) 100%);
  --glass-light-border: rgba(255,255,255,.75);
  --glass-dark: linear-gradient(135deg, rgba(244,244,241,.16) 0%, rgba(244,244,241,.06) 55%, rgba(244,244,241,.10) 100%);
  --glass-dark-border: rgba(244,244,241,.26);
  --glass-shadow: 0 18px 44px rgba(23,24,28,.12);
  --glass-hi: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(23,24,28,.05);
  --glass-hi-dark: inset 0 1px 0 rgba(244,244,241,.28), inset 0 -1px 0 rgba(0,0,0,.18);
  --blur: blur(16px) saturate(150%);
}
/* Ambient wash behind everything, so the glass has something to refract */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 620px at 88% -6%, rgba(92,124,156,.14), rgba(92,124,156,0) 62%),
    radial-gradient(760px 560px at -10% 34%, rgba(92,124,156,.09), rgba(92,124,156,0) 60%),
    radial-gradient(820px 640px at 55% 112%, rgba(216,216,210,.55), rgba(216,216,210,0) 65%),
    var(--paper); }

/* Header: frosted glass bar */
.nav { background: rgba(244,244,241,.72); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-bottom: 1px solid rgba(255,255,255,.6); box-shadow: 0 10px 30px rgba(23,24,28,.07), inset 0 1px 0 rgba(255,255,255,.7); }
.announce { background: linear-gradient(120deg, rgba(23,24,28,.96), rgba(31,33,38,.92)); }

/* Light glass surfaces */
.card, .cat-card, .kit-card, .tier, .size-block, .trust, .pair-card, .fit-box, .bstep, .capture,
body[data-page="home"] .faq details {
  background: var(--glass-light); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-light-border); box-shadow: var(--glass-hi), var(--glass-shadow); }
.card:hover, .cat-card:hover, .pair-card:hover, .size-block:hover, body[data-page="home"] .kit-card:hover {
  box-shadow: var(--glass-hi), 0 26px 54px rgba(23,24,28,.16); }
.kchips span { background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.v2-head .eyebrow { background: rgba(255,255,255,.55) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-color: rgba(255,255,255,.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }

/* Dark glass surfaces */
.builder-panel .tier {
  background: var(--glass-dark); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-dark-border); box-shadow: var(--glass-hi-dark), 0 22px 48px rgba(10,10,12,.35); }
/* Dark glass that sits on a light page needs a dark body under the sheen */
body[data-page="home"] .kit-card.hot, .summary {
  background: linear-gradient(135deg, rgba(40,42,48,.95) 0%, rgba(23,24,28,.92) 58%, rgba(30,31,37,.94) 100%);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-dark-border); box-shadow: var(--glass-hi-dark), 0 22px 48px rgba(10,10,12,.35); }
body[data-page="home"] .kit-card.hot .kchips span { background: rgba(244,244,241,.14); border-color: rgba(244,244,241,.22); box-shadow: inset 0 1px 0 rgba(244,244,241,.22); }

.builder-panel { background: linear-gradient(165deg, #26282E 0%, var(--ink) 58%, #141519 100%); }

/* Hero and full-bleed panels: deeper glass */
.spec-chip { background: rgba(15,16,19,.30); -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%); border-color: rgba(244,244,241,.5); box-shadow: inset 0 1px 0 rgba(244,244,241,.35), 0 8px 22px rgba(10,10,12,.25); }
.reveal-panel { background: linear-gradient(135deg, rgba(23,24,28,.66), rgba(23,24,28,.48)); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); border-color: rgba(244,244,241,.30); box-shadow: var(--glass-hi-dark), 0 30px 60px rgba(10,10,12,.35); }
.morning-copy { margin: clamp(16px, 4vw, 52px); border-radius: 26px; padding: clamp(28px, 4vw, 48px);
  background: linear-gradient(135deg, rgba(23,24,28,.55), rgba(23,24,28,.38)); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(244,244,241,.28); box-shadow: var(--glass-hi-dark), 0 30px 60px rgba(10,10,12,.32); }
.morning-shade { background: linear-gradient(0deg, rgba(15,16,19,.55) 0%, rgba(15,16,19,.16) 55%, rgba(15,16,19,.02) 100%); }
.craft-cap { background: linear-gradient(0deg, rgba(15,16,19,.78) 0%, rgba(15,16,19,.30) 70%, rgba(15,16,19,0) 100%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cat-tile .cap { background: linear-gradient(0deg, rgba(15,16,19,.72), rgba(15,16,19,0)); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }

/* Final CTA: dark glass over an accent-lit wash */
.final-cta { position: relative; }
body[data-page="home"] .final-cta .wrap, .final-cta .wrap {
  background: linear-gradient(135deg, rgba(31,33,38,.88), rgba(23,24,28,.82));
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(244,244,241,.22); box-shadow: var(--glass-hi-dark), 0 30px 60px rgba(10,10,12,.28); }

/* Pills, chips, and controls */
.chip, .cart-btn, .menu-btn, .opt-vals button, .tier-switch button, .qty button, .citem .qty button {
  background: rgba(255,255,255,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(23,24,28,.10), inset 0 1px 0 rgba(255,255,255,.8); }
.chip[aria-pressed="true"], .opt-vals button[aria-pressed="true"], .tier-switch button[aria-pressed="true"] {
  background: var(--ink); box-shadow: var(--glass-hi-dark); }
.btn-ghost { background: rgba(255,255,255,.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(23,24,28,.35), inset 0 1px 0 rgba(255,255,255,.7); }
.on-dark .btn-ghost, .builder-panel .tier .btn-ghost { background: rgba(244,244,241,.10); box-shadow: inset 0 0 0 1px rgba(244,244,241,.5), inset 0 1px 0 rgba(244,244,241,.25); }
.kit-badge { background: linear-gradient(135deg, rgba(92,124,156,.92), rgba(92,124,156,.78)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 24px rgba(15,16,19,.35); }
body[data-page="home"] .kit-card.hot .kit-badge { background: rgba(244,244,241,.85); }

/* Builder picks and wizard */
.pick { background: rgba(255,255,255,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: rgba(255,255,255,.7); box-shadow: var(--glass-hi); }
.pick[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), var(--glass-hi); }
.wiz-tiers button, .wiz-brand, .wiz-model { background: rgba(255,255,255,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(23,24,28,.10), inset 0 1px 0 rgba(255,255,255,.8); }
.wiz-tiers button[aria-pressed="true"], .wiz-brand[aria-pressed="true"], .wiz-model[aria-pressed="true"] { background: var(--ink); box-shadow: var(--glass-hi-dark); }
.rs-step { background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.rs-step.now { background: var(--ink); border-color: var(--ink); box-shadow: var(--glass-hi-dark); }
.bstep .num { background: rgba(255,255,255,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(23,24,28,.06); }

/* Overlays: cart drawer, sticky bars, toast */
.drawer { background: rgba(244,244,241,.82); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); box-shadow: -30px 0 60px rgba(10,10,12,.25), inset 1px 0 0 rgba(255,255,255,.6); }
.sticky-atc { background: rgba(244,244,241,.78); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border-top: 1px solid rgba(255,255,255,.6); box-shadow: 0 -12px 30px rgba(23,24,28,.10); }
.summary-bar { background: linear-gradient(135deg, rgba(31,33,38,.88), rgba(23,24,28,.85)) !important; -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); border-top: 1px solid rgba(244,244,241,.22); box-shadow: inset 0 1px 0 rgba(244,244,241,.22); }
.toast { background: linear-gradient(135deg, rgba(31,33,38,.88), rgba(23,24,28,.85)); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); border: 1px solid rgba(244,244,241,.24); box-shadow: var(--glass-hi-dark), 0 18px 40px rgba(10,10,12,.3); }
.capture input { background: rgba(255,255,255,.75); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.capture { border: 1px solid var(--glass-light-border); }
.marquee { background: linear-gradient(120deg, #1D1F24, var(--ink) 60%, #1B1D21); box-shadow: inset 0 1px 0 rgba(244,244,241,.14); }

@media (prefers-reduced-transparency: reduce) {
  .nav, .card, .cat-card, .kit-card, .tier, .size-block, .trust, .pair-card, .fit-box, .bstep, .capture, .drawer, .sticky-atc, .toast, .summary-bar, .reveal-panel, .morning-copy { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .card, .cat-card, .kit-card, .tier, .size-block, .trust, .pair-card, .fit-box, .bstep { background: #fff; }
  .drawer, .sticky-atc, .nav { background: var(--paper); }
}

/* ===== Design v2.3: scroll economy + glass restraint (home) =====
   Owner direction 2026-11-05: every section earns its scroll. The page is
   tightened (routine as one band, tray folded into kits, sizes and trust
   merged, morning folded into the final CTA, slim email line), and the
   liquid glass is restrained to the nav, the hero chips, and dark
   surfaces. Light cards are solid premium surfaces again. */
.card, .cat-card, .kit-card, .tier, .size-block, .trust, .pair-card,
body[data-page="home"] .faq details {
  background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(23,24,28,.07); }
.card:hover, .cat-card:hover, .pair-card:hover, .size-block:hover, body[data-page="home"] .kit-card:hover {
  box-shadow: 0 26px 54px rgba(23,24,28,.13); }
.capture { background: var(--stone); -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(23,24,28,.07); }
.kchips span { background: var(--stone); border: 1px solid var(--line); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.v2-head .eyebrow { background: #fff !important; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--line); box-shadow: none; }
.btn-ghost { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px var(--ink); }
.on-dark .btn-ghost, .builder-panel .tier .btn-ghost { background: rgba(244,244,241,.10); box-shadow: inset 0 0 0 1px rgba(244,244,241,.5); }
a.pair-card { color: inherit; }

/* Routine: one compact band of five linked steps */
.routine-band { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.rstep { background: #fff; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; box-shadow: 0 18px 40px rgba(23,24,28,.07); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.rstep:hover { transform: translateY(-3px); box-shadow: 0 26px 54px rgba(23,24,28,.13); }
.rstep-media { display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--stone); }
.rstep-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.rstep:hover .rstep-media img { transform: scale(1.04); }
.rstep-body { padding: 16px 18px 18px; display: grid; gap: 5px; align-content: start; }
.rstep-num { font: 500 12.5px/1 var(--sans); font-variant-caps: all-small-caps; letter-spacing: .08em; color: var(--accent); }
.rstep-name { font-family: var(--serif); font-weight: 900; font-size: 19px; line-height: 1.15; letter-spacing: -.01em; }
.rstep-fix { color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.rstep-price { font-weight: 700; font-size: 15px; margin-top: 4px; font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .routine-band { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  .routine-band { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 18px; }
  .routine-band::-webkit-scrollbar { display: none; }
  .rstep { flex: 0 0 68%; scroll-snap-align: start; }
}

/* Tray folded into the kits section as a slim band */
.tray-band { margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--line); display: grid; gap: 20px; }
.tray-band-line { font-size: var(--fs-lead); color: var(--muted); max-width: 52em; }
.tray-band-line b { color: var(--ink); font-family: var(--serif); font-weight: 900; }
.tray-band-line .link { color: var(--ink); }
.tray-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tray-strip figure { margin: 0; display: grid; gap: 8px; }
.tray-strip img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 16px; background: var(--stone); box-shadow: 0 14px 30px rgba(23,24,28,.08); }
.tray-strip figcaption { display: flex; gap: 8px; align-items: baseline; font-size: 14px; color: var(--muted); }
.tray-strip figcaption b { font-family: var(--serif); font-weight: 700; font-size: 16px; color: var(--ink); }
@media (max-width: 760px) { .tray-strip { grid-template-columns: 1fr 1fr; } }

/* Fit band: sizes and trust in one section */
.fit-note { margin-top: 22px; color: var(--muted); font-size: 15.5px; }
.fit-note .link { color: var(--ink); }
.fit-trust { margin-top: 40px; padding-top: 36px; border-top: 1px solid var(--line); }
body[data-page="home"] .fit-band .size-block { padding: 26px; }
body[data-page="home"] .fit-band .size-num { font-size: clamp(36px, 4vw, 52px); }
body[data-page="home"] .fit-band .trust { padding: 22px; box-shadow: 0 14px 30px rgba(23,24,28,.06); }

/* Final CTA: the morning ritual folded in */
.cta-lead { font-family: var(--serif); font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; letter-spacing: -.01em; color: var(--paper); }

/* Email: one slim line */
.email-slim { padding-top: 0; }
.capture-slim { display: flex; align-items: center; gap: 18px 26px; flex-wrap: wrap; padding: 24px 30px; border-radius: 22px; }
.capture-slim .cap-line { font-family: var(--serif); font-weight: 900; font-size: 20px; letter-spacing: -.01em; }
.capture-slim form { flex: 1; min-width: min(320px, 100%); max-width: 520px; margin-left: auto; }
.capture-slim #capture-note { flex-basis: 100%; color: var(--muted); font-size: 14px; }
.capture-slim #capture-note:empty { display: none; }
@media (max-width: 760px) { .capture-slim { padding: 22px; } .capture-slim form { margin-left: 0; } }

/* ===== Design v3: kit selector + home structure (home-scoped) =====
   Owner direction 2026-11-05: different rhythm and artwork on the
   homepage, every rule scoped to body.home so shop, product, and
   builder pages keep the v2 system. (Problem section and the walnut
   moment were cut in v5.)
   PALETTE REVERT (owner, 2026-11-05, v6): the v3 warm paper scheme is
   gone. The --h-* names survive only as aliases onto the standard
   tokens, so the homepage sits on the same cool off-white system as
   the product pages: paper #F4F4F1, ink #17181C, stone surfaces, and
   steel slate as the one accent. Dark stays dark only where it
   predates v3: the announcement, marquee, reveal, footer, and final
   CTA panels, and the selected kit card. */
body.home {
  --h-paper: var(--paper); --h-ink: var(--ink); --h-walnut: var(--accent); --h-clay: var(--stone-2);
  --h-tint: var(--stone); --h-dark: var(--ink); --h-card: #fff; --h-muted: var(--muted);
  --h-line: var(--line); --h-paper-dim: rgba(244,244,241,.72);
  background: var(--h-paper); color: var(--h-ink);
}
body.home :focus-visible { outline-color: var(--h-walnut); }
body.home .lead { color: var(--h-muted); }
body.home .link:hover { color: var(--h-walnut); }
body.home .eyebrow { color: var(--h-walnut); }
body.home .v2-head .eyebrow { background: var(--h-card) !important; border-color: var(--h-line); box-shadow: none; }

/* Chrome: warm glass nav, espresso announcement and footer */
body.home .nav { background: rgba(244,244,241,.78); border-bottom: 1px solid rgba(255,255,255,.55); box-shadow: 0 10px 30px rgba(23,24,28,.07), inset 0 1px 0 rgba(255,255,255,.65); }
body.home .nav-links a { color: var(--h-muted); }
body.home .nav-links a:hover, body.home .nav-links a[aria-current] { color: var(--h-ink); }
body.home .cart-btn { box-shadow: inset 0 0 0 1px var(--h-line); background: rgba(255,255,255,.6); }
body.home .cart-count { background: var(--h-ink); color: var(--h-paper); }
body.home .announce { background: var(--h-dark); color: var(--h-paper); }
body.home .footer { background: var(--h-dark); color: var(--h-paper); }
body.home .mega-mark { background: var(--h-dark); }

/* Buttons in the warm system */
body.home .btn { background: var(--h-ink); color: var(--h-paper); }
body.home .btn-ghost { background: transparent; color: var(--h-ink); box-shadow: inset 0 0 0 1px var(--h-ink); }
body.home .on-dark .btn { background: var(--h-paper); color: var(--h-ink); }
body.home .on-dark .btn-ghost { background: rgba(244,244,241,.08); color: var(--h-paper); box-shadow: inset 0 0 0 1px rgba(244,244,241,.55); }

/* Hero v3: the owner's real trio photo, espresso scrim */
body.home .hero { background: var(--h-dark); color: var(--h-paper); }
body.home .hero-media img { object-position: 50% 58%; }
body.home .hero-shade { background: linear-gradient(90deg, rgba(23,24,28,.92) 0%, rgba(23,24,28,.66) 44%, rgba(23,24,28,.10) 74%); }
body.home .hero .sub { color: var(--h-paper-dim); }
body.home .spec-chip { background: rgba(23,24,28,.36); border-color: rgba(244,244,241,.5); color: var(--h-paper); box-shadow: inset 0 1px 0 rgba(244,244,241,.30), 0 8px 22px rgba(10,10,12,.30); }
body.home .scroll-cue { color: rgba(244,244,241,.75); }
body.home .scroll-cue i { background: rgba(244,244,241,.4); }
body.home .scroll-cue i::after { background: var(--h-paper); }
@media (max-width: 760px) {
  body.home .hero-media img { object-position: 50% 42%; }
  body.home .hero-shade { background: linear-gradient(180deg, rgba(23,24,28,.22) 0%, rgba(23,24,28,0) 30%, rgba(23,24,28,.72) 66%, rgba(23,24,28,.94) 100%); }
}

/* Marquee: espresso band, clay separators */
body.home .marquee { background: var(--h-dark); color: var(--h-paper); border-top: 1px solid rgba(244,244,241,.14); box-shadow: inset 0 1px 0 rgba(244,244,241,.10); }
body.home .marquee-group i { color: var(--h-clay); }

/* Reveal: espresso glass panel */
body.home .reveal-v2 { background: var(--h-dark); }
body.home .reveal-panel { background: linear-gradient(135deg, rgba(23,24,28,.80), rgba(23,24,28,.58)); border-color: rgba(244,244,241,.28); }
body.home .reveal-panel .eyebrow { color: var(--h-clay); }
body.home .reveal-panel .lead { color: rgba(244,244,241,.85); }

/* Routine: paper, outlined ghost word behind the header */
body.home #routine { position: relative; overflow: hidden; }
body.home #routine .wrap { position: relative; }
body.home .ghost-word { position: absolute; top: -34px; right: -6px; font-family: var(--serif); font-weight: 900; font-size: clamp(120px, 17vw, 252px); line-height: 1; letter-spacing: .01em; color: transparent; -webkit-text-stroke: 1.5px rgba(178,178,169,.55); pointer-events: none; user-select: none; z-index: 0; }
body.home #routine .section-head, body.home #routine .routine-band { position: relative; z-index: 1; }
@media (max-width: 760px) { body.home .ghost-word { font-size: 108px; top: -16px; -webkit-text-stroke-color: rgba(178,178,169,.45); } }
body.home .rstep { background: var(--h-card); border-color: var(--h-line); box-shadow: 0 18px 40px rgba(23,24,28,.07); }
body.home .rstep:hover { box-shadow: 0 26px 54px rgba(23,24,28,.13); }
body.home .rstep-media { background: var(--h-tint); }
body.home .rstep-num { color: var(--h-walnut); }
body.home .rstep-fix { color: var(--h-muted); }

/* Kits: walnut-tinted band, cards are a selector */
body.home #kits { background: var(--h-tint); }
body.home .kit-card { background: var(--h-card); border: 1px solid var(--h-line); color: var(--h-ink); cursor: pointer; box-shadow: 0 18px 40px rgba(23,24,28,.07); }
body.home .kit-card:hover { box-shadow: 0 26px 54px rgba(23,24,28,.13); }
body.home .kit-card.selected { background: var(--h-dark); color: var(--h-paper); border-color: var(--h-dark); box-shadow: 0 28px 56px rgba(23,24,28,.30); }
body.home .kit-card .tname { color: var(--h-ink); }
body.home .kit-card.selected .tname { color: var(--h-paper); }
body.home .kit-card .save { color: var(--h-walnut); }
body.home .kit-card.selected .save { color: var(--h-clay); }
body.home .kchips span { background: #E7E7E2; border: 1px solid rgba(23,24,28,.06); color: var(--h-ink); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.home .kit-card.selected .kchips span { background: rgba(244,244,241,.13); border-color: rgba(244,244,241,.18); color: var(--h-paper); }
body.home .kit-badge { background: var(--h-walnut); color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; box-shadow: 0 8px 20px rgba(23,24,28,.30); }
body.home .kit-card.selected .kit-badge { background: var(--h-paper); color: var(--h-ink); }
.kit-selected-tag { position: absolute; top: 14px; right: 14px; display: none; background: var(--h-clay); color: var(--h-ink); font: 700 12.5px/1 var(--sans); letter-spacing: .04em; padding: 8px 13px; border-radius: 999px; box-shadow: 0 8px 20px rgba(23,24,28,.30); }
body.home .kit-card.selected .kit-selected-tag { display: inline-flex; }
body.home .kit-card .btn { background: transparent; color: var(--h-ink); box-shadow: inset 0 0 0 1px var(--h-ink); }
body.home .kit-card .btn:hover { opacity: 1; background: rgba(23,24,28,.05); }
body.home .kit-card.selected .btn { background: var(--h-paper); color: var(--h-ink); box-shadow: none; }
body.home .kit-card.selected .btn:hover { background: var(--h-paper); opacity: .88; }
body.home .kit-note { color: var(--h-muted); }
body.home .tray-band { border-top-color: var(--h-line); }
body.home .tray-band-line { color: var(--h-muted); }
body.home .tray-band-line b, body.home .tray-band-line .link { color: var(--h-ink); }
body.home .tray-strip img { background: var(--h-tint); box-shadow: 0 14px 30px rgba(23,24,28,.10); }
body.home .tray-strip figcaption { color: var(--h-muted); }
body.home .tray-strip figcaption b { color: var(--h-ink); }

/* Craft: paper, arch-top crops */
body.home .pair-card { background: var(--h-card); border-color: var(--h-line); box-shadow: 0 18px 40px rgba(23,24,28,.07); }
body.home .pair-card:hover { box-shadow: 0 26px 54px rgba(23,24,28,.13); }
body.home .pair-card img { width: calc(100% - 30px); margin: 15px auto 0; border-radius: 999px 999px 0 0; }
body.home .pair-body p { color: var(--h-muted); }
body.home .craft-note { color: var(--h-muted); }
@media (max-width: 900px) { body.home .pair-card img { aspect-ratio: 4/3; } }

/* Fit and trust: paper */
body.home .size-block { background: var(--h-card); border-color: var(--h-line); box-shadow: 0 18px 40px rgba(23,24,28,.07); }
body.home .size-block:hover { background: var(--h-ink); color: var(--h-paper); box-shadow: 0 26px 54px rgba(23,24,28,.16); }
body.home .size-num::after { color: var(--h-walnut); }
body.home .size-block:hover .size-num::after { color: var(--h-clay); }
body.home .size-go { color: var(--h-muted); }
body.home .size-block:hover .size-go { color: var(--h-paper-dim); }
body.home .fit-note { color: var(--h-muted); }
body.home .fit-note .link { color: var(--h-ink); }
body.home .fit-trust { border-top-color: var(--h-line); }
body.home .trust { background: var(--h-card); border-color: var(--h-line); box-shadow: 0 14px 30px rgba(23,24,28,.06); }
body.home .trust svg { color: var(--h-walnut); }
body.home .trust span { color: var(--h-muted); }

/* FAQ: paper cards */
body.home .faq details { background: var(--h-card); border-color: var(--h-line); box-shadow: 0 14px 30px rgba(23,24,28,.05); }
body.home .faq summary::after { color: var(--h-walnut); }
body.home .faq p { color: var(--h-muted); }

/* Final CTA: deep espresso block */
body.home .final-cta .wrap { background: linear-gradient(135deg, #23242A 0%, var(--h-dark) 62%); -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid rgba(244,244,241,.16); box-shadow: 0 30px 60px rgba(23,24,28,.30); }
body.home .final-cta .eyebrow { color: var(--h-clay); }
body.home .final-cta p { color: var(--h-paper-dim); }
body.home .final-cta .cta-lead { color: var(--h-paper); }

/* Email: tinted slim bar */
body.home .capture { background: var(--h-tint); border-color: var(--h-line); box-shadow: 0 18px 40px rgba(23,24,28,.06); }
body.home .capture input { background: var(--h-card); border-color: var(--h-line); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.home .capture-slim #capture-note { color: var(--h-muted); }

/* ===== Design v3.1: Apple-manner refinement (home-scoped) =====
   Principles only, nothing copied: one idea per screen, product-led
   visuals, generous negative space, very little copy doing the talking,
   clean flat feature tiles, seamless section rhythm. Settled type sizes
   stay; the feel comes from space and restraint. */
body.home .section { padding: 150px 0; }
@media (max-width: 760px) { body.home .section { padding: 96px 0; } }
body.home .v2-head { margin-bottom: 64px; }

/* Hero: a full cinematic screen, the trio photo is the artwork */
body.home .hero-inner { min-height: 94svh; align-content: center; padding-top: 110px; padding-bottom: 110px; }
@media (max-width: 760px) { body.home .hero-inner { min-height: 88svh; align-content: end; } }

/* Feature tiles: flat, large radius, whisper shadows */
body.home .kit-card, body.home .rstep, body.home .pair-card, body.home .size-block, body.home .trust { border-radius: 28px; }
body.home .kit-card, body.home .rstep, body.home .pair-card, body.home .size-block { box-shadow: 0 12px 32px rgba(23,24,28,.055); }
body.home .kit-card:hover, body.home .rstep:hover, body.home .pair-card:hover, body.home .size-block:hover { box-shadow: 0 22px 46px rgba(23,24,28,.10); }
body.home .kit-card.selected { box-shadow: 0 28px 56px rgba(23,24,28,.28); }

/* Closing moment: centered, quiet, one idea */
body.home .final-cta .wrap { justify-items: center; text-align: center; }
body.home .final-cta p { max-width: 36em; }
body.home .final-cta .actions { justify-content: center; }

/* ===== Design v4: research rules + one device per section (home-scoped) =====
   From the 2026-11-05 landing page research (playbook section 8): an
   honest proof line above the fold, the itemised kit truth beside the
   price, risk reversal at the decision, a sticky buy bar in the Apple
   manner, and every section carrying its OWN graphic device and color
   world so no two neighbours share a treatment. Device map, in order:
   hero full-bleed photo / proof strip hairline editorial line / marquee
   typographic band / (v5: problem and walnut moment cut) routine oversized outlined
   type / kits walnut-tint field / tray solid walnut field panel /
   craft arch image masks / fit giant numerals / FAQ hairline rows /
   final CTA dark cinematic panel / email walnut-tint bar. */

/* Sticky mini bar: paper, slim, fixed to the top of the viewport (the
   main nav cannot travel with the page, its wrapper ends with it) */
body.home .mini-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 49; background: var(--h-paper); border-bottom: 1px solid var(--h-line); box-shadow: 0 14px 30px rgba(23,24,28,.12); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s; }
body.home .mini-bar.show { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .35s var(--ease), transform .35s var(--ease); }
body.home .mini-bar-in { display: flex; align-items: center; gap: 20px; height: 54px; }
body.home .mini-logo { height: 24px; width: auto; display: block; }
body.home .mini-price { flex: 1; text-align: center; font-size: 14.5px; font-weight: 700; letter-spacing: .01em; color: var(--h-ink); white-space: nowrap; }
body.home .mini-btn { padding: 9px 20px; font-size: 14px; white-space: nowrap; }
@media (max-width: 560px) {
  body.home .mini-bar-in { gap: 12px; height: 50px; }
  body.home .mini-logo { height: 20px; }
  body.home .mini-price { font-size: 12.5px; }
  body.home .mini-btn { padding: 8px 14px; font-size: 13px; }
}

/* Kit cards: the itemised truth directly under the price */
body.home .kit-card .tparts { font-size: 14px; font-weight: 700; color: var(--h-muted); font-variant-numeric: tabular-nums; margin-top: -4px; }
body.home .kit-card.selected .tparts { color: var(--h-clay); }

/* Risk reversal: one plain line directly under the kit grid */
body.home .kit-risk { margin-top: 26px; font-size: 15.5px; font-weight: 700; color: var(--h-ink); }
body.home .kit-note { margin-top: 8px; }

/* Tray strip: its own walnut field inside the kits band. NOT var(--h-walnut):
   the v6 revert aliased that token to the steel accent, which put a blue
   field behind walnut trays. This gradient is literal walnut, sampled from
   the tray photos (mid wood #6B4A2F at the center, dark walnut #4A3220 at
   the edges). A tiled grain crop from the angled product photos read fake,
   so the panel stays a clean gradient. */
body.home .tray-band { --tray-walnut-hi: #6B4A2F; --tray-walnut-mid: #59391F; --tray-walnut-edge: #4A3220; background: radial-gradient(130% 150% at 50% 36%, var(--tray-walnut-hi) 0%, var(--tray-walnut-mid) 58%, var(--tray-walnut-edge) 100%); border-top: 0; border-radius: 28px; padding: 36px; margin-top: 52px; box-shadow: 0 24px 48px rgba(38,24,12,.28); }
body.home .tray-band-line { color: rgba(244,244,241,.86); }
body.home .tray-band-line b { color: var(--h-paper); }
body.home .tray-band-line .link { color: var(--h-paper); }
body.home .tray-strip img { background: rgba(244,244,241,.16); box-shadow: 0 14px 30px rgba(23,24,28,.30); }
body.home .tray-strip figcaption { color: rgba(244,244,241,.78); }
body.home .tray-strip figcaption b { color: var(--h-paper); }
@media (max-width: 760px) { body.home .tray-band { padding: 24px; margin-top: 40px; } }

/* Fit: brand blocks are the section device (v6 rework below) */

/* FAQ: hairline editorial rows, no cards */
body.home .faq { gap: 0; border-top: 1px solid var(--h-line); }
body.home .faq details { background: transparent; border: 0; border-bottom: 1px solid var(--h-line); border-radius: 0; box-shadow: none; padding: 22px 4px; }

/* ===== Design v5: kits first, wasted scroll cut, live motion (home) =====
   Owner direction 2026-11-05, second pass the same day: the wordy
   Problem section is deleted outright (the reveal photo and the routine
   carry its point visually), the original station hero is restored,
   the kits move directly under the hero because they are the main
   thing, the phone kit tiers become a horizontal snap rail, the Apple
   150px spacing is tightened, and the page gains a deliberate motion
   layer. Motion rules: transform and opacity only, gated behind
   body.motion-ok (set by JS only when reduced motion is off), and
   stilled again under prefers-reduced-motion below. */

/* Tighter rhythm: no wasted scroll */
body.home .section { padding: 88px 0; }
body.home .email-slim { padding-top: 0; padding-bottom: 72px; }
body.home .v2-head { margin-bottom: 40px; }
body.home .final-cta .wrap { padding: 56px 48px; }
@media (max-width: 760px) {
  body.home .section { padding: 56px 0; }
  body.home .email-slim { padding-bottom: 52px; }
}

/* Hero: the original station banner, lighter scrim, slow Ken Burns drift */
body.home .hero-media img { object-position: 60% 50%; }
body.home .hero-shade { background: linear-gradient(90deg, rgba(23,24,28,.74) 0%, rgba(23,24,28,.44) 46%, rgba(23,24,28,.06) 76%); }
body.home.motion-ok .hero-media img { animation: heroDrift 38s ease-in-out infinite alternate; transform-origin: 62% 50%; }
@keyframes heroDrift { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (max-width: 760px) {
  body.home .hero-media img { object-position: 58% 45%; }
  body.home .hero-shade { background: linear-gradient(180deg, rgba(23,24,28,.16) 0%, rgba(23,24,28,0) 30%, rgba(23,24,28,.58) 64%, rgba(23,24,28,.86) 100%); }
}

/* Marquee: kept, but thin */
body.home .marquee-group span { padding-top: 9px; padding-bottom: 9px; font-size: clamp(15px, 1.6vw, 18px); }

/* Reveal: a touch shorter, and it breathes while on screen */
body.home .reveal-v2 { min-height: 76vh; }
body.home.motion-ok .reveal-v2.in-view .reveal-bg { animation: revealZoom 26s ease-in-out infinite alternate; }
@keyframes revealZoom { from { transform: scale(1); } to { transform: scale(1.08); } }

/* Scroll entry: start states exist only when JS and motion are both on */
body.home.motion-ok .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease var(--d, 0ms), transform .7s var(--ease) var(--d, 0ms); }
body.home.motion-ok .rv.in { opacity: 1; transform: none; }

/* Selected kit media: a soft fade as the selection lands */
body.home.motion-ok .kit-media img.xfade { animation: kitMediaFade .5s ease both; }
@keyframes kitMediaFade { from { opacity: .2; } to { opacity: 1; } }

/* Craft portafilter: crossfade through the three handle woods.
   Extra frames are invisible until JS starts the rotation, so with JS
   off or motion reduced the trio photo simply sits there. */
body.home .rotate-stack { display: block; position: relative; }
body.home .rotate-stack img { transition: opacity 1.4s ease; }
body.home .rotate-stack img.abs { position: absolute; top: 15px; left: 15px; width: calc(100% - 30px); opacity: 0; }
body.home .rotate-stack.js-rot img.on { opacity: 1; z-index: 2; }
body.home .rotate-stack.js-rot img.base:not(.on) { opacity: 0; }

/* Phone: kits and routine steps ride horizontal snap rails */
.kit-dots { display: none; }
@media (max-width: 760px) {
  body.home .kit-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 6px var(--gutter) 22px; gap: 16px; }
  body.home .kit-grid::-webkit-scrollbar { display: none; }
  body.home .kit-card { flex: 0 0 84%; scroll-snap-align: start; }
  .kit-dots { display: flex; justify-content: center; gap: 8px; margin-top: 2px; }
  .kit-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--h-clay); padding: 0; transition: width .3s var(--ease), background .3s; }
  .kit-dot.on { width: 24px; background: var(--h-walnut); }
  body.home .rstep { flex-basis: 72%; }
}

/* Desktop pointers: a quiet lift and image settle on hover */
@media (hover: hover) and (pointer: fine) {
  body.home .kit-card:hover, body.home .rstep:hover, body.home .pair-card:hover, body.home .size-block:hover { transform: translateY(-4px); }
  body.home .kit-card:hover .kit-media img, body.home .rstep:hover .rstep-media img, body.home .pair-card:hover img { transform: scale(1.035); }
}

/* Reduced motion: everything stills, everything readable */
@media (prefers-reduced-motion: reduce) {
  body.home .hero-media img, body.home .reveal-bg, body.home .kit-media img.xfade { animation: none !important; }
  body.home .rotate-stack img { transition: none; }
}

/* ===== Design v6: palette revert, navigation, compatibility, categories =====
   Owner direction 2026-11-05, later the same day:
   - The warm v3 palette is reverted (token aliases at the v3 block);
     the homepage uses the standard cool off-white system again.
   - The word "Menu" button is gone. A hamburger at the LEFT of the
     header opens a slide-in panel that leads with Build Your Routine,
     then the shop's real categories, then The Story and Guides.
   - Desktop Shop gets a dropdown with the same categories.
   - Compatibility is spoken in brands and models, not millimeters:
     hero chips, the fit band, and a line under PDP size selectors.
   - A Shop by category band sits directly after the kits, and the
     hero's second action points at it. */

/* Hamburger: icon only, first thing in the bar */
.menu-btn { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); flex: none; }
.menu-btn svg { display: block; }
@media (max-width: 900px) { .menu-btn { display: inline-flex; } }

/* Desktop: Shop dropdown with the store categories */
.nav-item { position: relative; display: inline-flex; align-items: center; height: 64px; }
.nav-drop { position: absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, 6px); min-width: 232px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 8px; display: grid; opacity: 0; visibility: hidden; transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s; box-shadow: 0 24px 48px rgba(23,24,28,.13); z-index: 60; }
.nav-drop::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .22s var(--ease), transform .22s var(--ease); }
.nav-drop a { display: block; padding: 10px 12px; border-radius: 11px; color: var(--ink); font-size: 15px; white-space: nowrap; }
.nav-drop a:hover { background: var(--stone); color: var(--ink); }
.nav-drop a.drop-all { font-weight: 700; }

/* Slide-in menu panel (all pages sharing the header) */
.mnav-scrim { position: fixed; inset: 0; background: rgba(15,16,19,.45); z-index: 90; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s linear .3s; }
.mnav-scrim.open { opacity: 1; visibility: visible; transition: opacity .3s var(--ease); }
.mnav { position: fixed; top: 0; left: 0; bottom: 0; width: min(344px, 88vw); background: var(--paper); z-index: 91; transform: translateX(-106%); transition: transform .38s var(--ease); display: flex; flex-direction: column; padding: 18px 22px 28px; overflow-y: auto; box-shadow: 30px 0 60px rgba(23,24,28,.20); }
.mnav.open { transform: none; }
body.menu-open { overflow: hidden; }
.mnav-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.mnav-top .logo-img { height: 32px; }
.mnav-close { width: 38px; height: 38px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: 20px; line-height: 1; display: inline-grid; place-items: center; color: var(--ink); }
.mnav-kit { margin-bottom: 22px; }
.mnav-h { font: 500 13px/1 var(--sans); font-variant-caps: all-small-caps; letter-spacing: .07em; color: var(--accent); margin-bottom: 6px; }
.mnav-links { display: grid; }
.mnav-links a { padding: 12px 2px; font-size: 18px; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line); }
.mnav-links a:last-child { border-bottom: 0; }
.mnav-sec { margin-top: auto; padding-top: 26px; display: grid; gap: 2px; }
.mnav-sec a { padding: 9px 2px; font-size: 16px; color: var(--muted); }
.mnav-sec a:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .mnav, .mnav-scrim, .nav-drop { transition: none; } }

/* PDP: one plain compatibility line under the size selector */
.compat-line { margin-top: 14px; font-size: 14.5px; line-height: 1.55; color: var(--muted); max-width: 34em; }
.compat-line b { color: var(--ink); }

/* Homepage fit band: the brand is the label, the models name the fit,
   the millimeter figure is a small secondary tag */
body.home .size-fam { font-family: var(--serif); font-weight: 900; font-size: clamp(25px, 2.5vw, 33px); line-height: 1.08; letter-spacing: -.015em; }
body.home .size-models { font-size: 15.5px; color: var(--muted); line-height: 1.45; }
body.home .size-block:hover .size-models { color: rgba(244,244,241,.75); }
body.home .size-mm { font: 500 12.5px/1 var(--sans); font-variant-caps: all-small-caps; letter-spacing: .08em; color: var(--accent); margin-top: 4px; }

/* Shop by category band: real categories, real photos, real from-prices */
body.home .cat-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
body.home .catband-tile { background: #fff; border: 1px solid var(--line); border-radius: 28px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; box-shadow: 0 12px 32px rgba(23,24,28,.055); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
body.home .catband-tile:hover { transform: translateY(-4px); box-shadow: 0 22px 46px rgba(23,24,28,.10); }
body.home .catband-media { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--stone); }
body.home .catband-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
body.home .catband-tile:hover .catband-media img { transform: scale(1.035); }
body.home .catband-body { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 16px 12px; }
body.home .catband-body b { font-family: var(--serif); font-weight: 900; font-size: 20px; letter-spacing: -.01em; }
body.home .catband-from { color: var(--muted); font-size: 15px; white-space: nowrap; }
@media (max-width: 900px) { body.home .cat-band { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  body.home .cat-band { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 6px var(--gutter) 22px; gap: 16px; }
  body.home .cat-band::-webkit-scrollbar { display: none; }
  body.home .catband-tile { flex: 0 0 64%; scroll-snap-align: start; }
}

/* ===== Design v7: the Apple formula, in Dialed's own system (home) =====
   Owner direction 2026-11-05: "Be original and copy Apple." The formula
   is Apple's (research report section 8): a sticky buy bar, a poster
   hero with one quiet secondary link, a highlights digest that gives
   the whole pitch, one feature per chapter in desire order with a
   fragment headline and one line, comparison after the desire is built,
   risk reversal as its own quiet section, and a final ask that repeats
   the first. The execution is this store's own: our photography, the
   standard cool off-white system, steel slate kept to small action
   details, Lato, 28px tiles. Nothing of Apple's is copied but the
   discipline. Section heads lose their eyebrow pills; headings carry
   their own weight. Chapters keep a plain product label, which is
   information, not decoration. */

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Hero: poster scale restored, one filled action and one quiet link */
body.home .hero h1 { font-size: clamp(42px, 5.8vw, 76px); line-height: 1.02; }
body.home .hero-copy { max-width: 660px; }
body.home .hero .actions { align-items: center; gap: 26px; }
.quiet-link { display: inline-flex; align-items: baseline; gap: 5px; font-weight: 700; font-size: 16.5px; color: var(--ink); background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1.5px; background-repeat: no-repeat; background-position: 0 100%; padding-bottom: 2px; transition: background-size .3s var(--ease), color .2s; }
.quiet-link span { font-weight: 400; transition: transform .3s var(--ease); }
.quiet-link:hover { background-size: 100% 1.5px; color: var(--accent); }
.quiet-link:hover span { transform: translateX(2px); }
.on-dark .quiet-link, body.home .hero .quiet-link { color: var(--paper); }
.on-dark .quiet-link:hover, body.home .hero .quiet-link:hover { color: var(--paper); }
.chapter-scene .quiet-link:hover { color: var(--accent); }
.chapter-scene.ch-dark .quiet-link:hover { color: var(--paper); }
@media (max-width: 760px) { body.home .hero h1 { font-size: clamp(34px, 9.6vw, 42px); } }

/* Highlights digest: four visual tiles, the whole pitch at a glance */
body.home .hl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
body.home .hl-tile { position: relative; display: block; border-radius: 28px; overflow: hidden; aspect-ratio: 3 / 4; background: var(--stone); box-shadow: 0 12px 32px rgba(23,24,28,.055); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
body.home .hl-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
body.home .hl-tile:hover { transform: translateY(-4px); box-shadow: 0 22px 46px rgba(23,24,28,.12); }
body.home .hl-tile:hover img { transform: scale(1.03); }
body.home .hl-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,16,19,.52) 0%, rgba(15,16,19,.14) 42%, rgba(15,16,19,0) 68%); }
body.home .hl-text { position: absolute; top: 0; left: 0; right: 0; padding: 22px 22px 0; display: grid; gap: 6px; color: var(--paper); }
body.home .hl-text b { font-family: var(--serif); font-weight: 900; font-size: 21px; line-height: 1.12; letter-spacing: -.01em; }
body.home .hl-text span { font-size: 15px; line-height: 1.45; color: rgba(244,244,241,.88); }
@media (max-width: 1000px) { body.home .hl-grid { grid-template-columns: 1fr 1fr; } body.home .hl-tile { aspect-ratio: 4 / 3; } }
@media (max-width: 760px) {
  body.home .hl-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 6px var(--gutter) 22px; gap: 14px; }
  body.home .hl-grid::-webkit-scrollbar { display: none; }
  body.home .hl-tile { flex: 0 0 72%; aspect-ratio: 3 / 4; scroll-snap-align: start; }
}

/* Feature chapters: one product, one screen, one line */
body.home .chapters-head { padding-bottom: 0; }
body.home .chapters-head .section-head { margin-bottom: 0; }
body.home .chapter-scene { padding: 104px 0; }
body.home .chapter-scene.ch-dark { background: var(--ink); color: var(--paper); }
body.home .chapter-scene.ch-stone { background: var(--stone); }
body.home .ch-text { display: grid; gap: 14px; max-width: 720px; margin-bottom: 44px; }
body.home .ch-kicker { font: 500 13.5px/1 var(--sans); font-variant-caps: all-small-caps; letter-spacing: .08em; color: var(--accent); }
body.home .ch-dark .ch-kicker { color: rgba(244,244,241,.62); }
body.home .ch-frag { font-size: clamp(40px, 5.2vw, 68px); line-height: 1; letter-spacing: -.025em; }
body.home .ch-line { font-size: var(--fs-lead); color: var(--muted); max-width: 32em; }
body.home .ch-dark .ch-line { color: rgba(244,244,241,.78); }
body.home .ch-media { margin: 0; border-radius: 28px; overflow: hidden; background: var(--stone); box-shadow: 0 24px 54px rgba(23,24,28,.14); }
body.home .ch-dark .ch-media { box-shadow: 0 24px 54px rgba(0,0,0,.4); }
body.home .ch-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
body.home.motion-ok .watch-media.in-view img { animation: revealZoom 26s ease-in-out infinite alternate; }
@media (max-width: 760px) {
  body.home .chapter-scene { padding: 64px 0; }
  body.home .ch-text { margin-bottom: 30px; }
  body.home .ch-media img { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) { body.home .watch-media img { animation: none !important; } }

/* Compare: a true table in one white card, hairline rows */
body.home .compare-card { background: #fff; border: 1px solid var(--line); border-radius: 28px; box-shadow: 0 12px 32px rgba(23,24,28,.055); overflow: hidden; }
body.home .compare-table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
body.home .compare-table th, body.home .compare-table td { padding: 15px 20px; text-align: left; vertical-align: middle; border-top: 1px solid var(--line); }
body.home .compare-table thead th { border-top: 0; padding: 22px 20px 18px; vertical-align: bottom; }
body.home .compare-table thead th img { width: 100%; height: 92px; object-fit: cover; border-radius: 14px; margin-bottom: 12px; background: var(--stone); }
body.home .compare-table thead th b { font-family: var(--serif); font-weight: 900; font-size: 21px; letter-spacing: -.01em; }
body.home .compare-table tbody th { font-weight: 700; color: var(--muted); font-size: 14.5px; width: 21%; }
body.home .compare-table tbody td { font-variant-numeric: tabular-nums; }
body.home .compare-table .cmp-price td { font-family: var(--serif); font-weight: 900; font-size: 22px; letter-spacing: -.01em; }
body.home .compare-table .cmp-cta td { padding-top: 20px; padding-bottom: 24px; }
body.home .compare-table .cmp-btn { height: 44px; padding: 0 18px; font-size: 14.5px; white-space: nowrap; }
@media (max-width: 760px) {
  body.home .compare-table { font-size: 13.5px; }
  body.home .compare-table th, body.home .compare-table td { padding: 11px 10px; }
  body.home .compare-table thead th { padding: 14px 10px 12px; }
  body.home .compare-table thead th img { display: none; }
  body.home .compare-table thead th b { font-size: 16.5px; }
  body.home .compare-table tbody th { font-size: 12.5px; width: 24%; }
  body.home .compare-table .cmp-price td { font-size: 16.5px; }
  body.home .compare-table .cmp-btn { height: 40px; padding: 0 10px; font-size: 12.5px; }
}

/* Why Dialed: quiet hairline columns, no icons, no cards */
body.home .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
body.home .why-item { border-top: 2px solid var(--ink); padding-top: 20px; display: grid; gap: 8px; align-content: start; }
body.home .why-item b { font-family: var(--serif); font-weight: 900; font-size: 20px; letter-spacing: -.01em; line-height: 1.15; }
body.home .why-item span { color: var(--muted); font-size: 15.5px; line-height: 1.55; }
@media (max-width: 900px) { body.home .why-grid { grid-template-columns: 1fr; gap: 26px; } }


/* ===== Design v7.1: muted coffee palette, homepage only =====
   Owner direction 2026-11-05: "Keep it coffee-esque but minimal muted
   tones." Desaturated coffee tones carry the homepage's accents, dark
   panels, chapter backgrounds and selection states. Nothing saturated,
   nothing bright. The page base stays the standard #F4F4F1 that matches
   the product pages (a warm page wash was rejected earlier the same
   day); the coffee lives in the elements and the imagery, not the page.
   Scoped through body.home, exactly like the v6 palette block, so the
   steel slate #5C7C9C remains the accent on every other page.
   Tokens:
     --h-mocha    #7C6A58  the accent: kickers, save figures, kit badge,
                           active rail dot, link hovers, marquee marks
     --h-espresso #2A211A  dark panels: announcement, marquee, Watch
                           chapter, footer, selected kit card, final CTA
     --h-taupe    #A5937E  soft secondary: Why Dialed rules, and the
                           save / parts lines on the espresso card
     --h-oat      #EAE3D9  one quiet panel: the Tamp chapter background
   --h-dark is repointed at the espresso, so every homepage element
   that already read var(--h-dark) (selected card, marquee, footer,
   announcement, mega mark) shifts together. The walnut tray panel
   keeps its own literal wood gradient from 67c33b2; it already sits in
   this family. */
body.home {
  --accent: #7C6A58;
  --h-walnut: #7C6A58;
  --h-mocha: #7C6A58;
  --h-espresso: #2A211A;
  --h-dark: #2A211A;
  --h-taupe: #A5937E;
  --h-oat: #EAE3D9;
}
body.home .chapter-scene.ch-dark { background: var(--h-espresso); }
body.home .chapter-scene.ch-stone { background: var(--h-oat); }
body.home .final-cta .wrap { background: linear-gradient(135deg, #372A20 0%, var(--h-espresso) 62%); }
body.home .kit-card.selected .save { color: var(--h-taupe); }
body.home .kit-card.selected .tparts { color: var(--h-taupe); }
body.home .why-item { border-top-color: var(--h-taupe); }

/* ===== Design v8: the second half, alive (home) =====
   Owner direction 2026-11-05, after v7 went live: "Top half is great,
   the second half is boring." Diagnosis: the chapters were one
   template repeated three times with nothing moving but a single slow
   zoom; compatibility was three text cards with no product in sight;
   compare was a spreadsheet that clipped its third column off the
   phone screen; Why Dialed was three columns of bare text; the FAQ
   read like a document and the page ended on a plain dark box.
   The rework, chapters to footer only (everything above the chapters
   is untouched):
   - Chapters: a stage per chapter, a wide photo with scroll-linked
     parallax plus a macro detail crop of the same photo, and no two
     compositions alike (detail right and low, detail left, detail
     overlapping the wide shot). On the phone the detail overlaps the
     wide photo instead of stacking under it.
   - Compatibility: each brand block leads with the real photo of the
     portafilter in that fitting (three ears, two ears, the slate
     single), and the blocks ride a snap rail on the phone.
   - Compare: the table is gone. Three visual kit cards, kit photo,
     big price, parts and saving in one line, contents as photo chips.
     A snap rail with dots on the phone, nothing clips.
   - Why Dialed: one espresso panel over the walnut station photo,
     the same three trust lines on the photograph.
   - FAQ: tighter rows. Final CTA: a full-bleed photo panel, the hero
     photograph bookending the page.
   Motion stays inside the house rules: transform and opacity only,
   driven from home.js only when the visitor allows motion, and the
   page is complete and static under reduced motion. */

/* Chapters: stages, parallax frames, detail crops */
body.home .chapter-scene { padding: 88px 0; }
body.home .ch-text { margin-bottom: 36px; }
body.home .ch-stage { display: grid; grid-template-columns: 7fr 5fr; gap: 22px; align-items: start; position: relative; }
body.home .ch-stage.flip { grid-template-columns: 5fr 7fr; }
body.home .ch-stage .ch-wide { margin: 0; }
body.home .ch-wide img { aspect-ratio: 16 / 10; }
body.home .ch-detail { margin: 0; border-radius: 24px; overflow: hidden; background: var(--stone); box-shadow: 0 24px 54px rgba(23,24,28,.14); }
body.home .ch-dark .ch-detail { box-shadow: 0 24px 54px rgba(0,0,0,.4); }
body.home .ch-detail img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
body.home .ch-stage .ch-detail { margin-top: 54px; }
body.home .ch-stage.flip .ch-detail { margin-top: 0; }
body.home .ch-stage.flip .ch-wide { margin-top: 54px; }
body.home .crop-basket img { object-position: 46% 4%; }
body.home .crop-needles img { object-position: 63% 52%; }
/* The square source photos cannot crop tighter by frame alone, so the
   needle and base details are true zooms of the same photo, held
   static (composition, not motion) at every motion setting. */
body.home .crop-needles img { transform: scale(1.45); transform-origin: 57% 60%; }
body.home .crop-base img { transform: scale(1.5); transform-origin: 50% 86%; }
body.home .ch-stage.overlap { display: block; max-width: 1060px; margin-inline: auto; }
body.home .ch-stage.overlap .ch-wide img { aspect-ratio: 4 / 3; object-position: 50% 38%; }
body.home .ch-stage.overlap .ch-detail { position: absolute; right: 26px; bottom: -38px; width: min(31%, 340px); margin-top: 0; border: 3px solid var(--paper); box-shadow: 0 26px 50px rgba(23,24,28,.28); z-index: 2; }
body.home .ch-stage.overlap .ch-detail img { aspect-ratio: 4 / 3; }
body.home .chapter-scene.ch-stone { padding-bottom: 118px; }
/* The wide chapter photos are parallax-driven now (home.js); the old
   CSS zoom on the Watch photo would fight the transform, so it rests.
   The slow drift moves to the detail crops while they are on screen. */
body.home.motion-ok .watch-media.in-view img { animation: none; }
body.home.motion-ok .crop-basket.in-view img { animation: revealZoom 30s ease-in-out infinite alternate; }
body.home.motion-ok .plx img { will-change: transform; }
/* The legacy .ch-media img transition would turn every parallax step
   into a laggy glide; parallax frames take their transforms raw. */
body.home .plx img { transition: none; }
@media (max-width: 760px) {
  body.home .chapter-scene { padding: 56px 0; }
  body.home .chapter-scene.ch-stone { padding-bottom: 84px; }
  body.home .ch-text { margin-bottom: 26px; }
  body.home .ch-stage, body.home .ch-stage.flip, body.home .ch-stage.overlap { display: block; position: relative; margin-bottom: 32px; }
  body.home .ch-stage.flip .ch-wide { margin-top: 0; }
  body.home .ch-wide img { aspect-ratio: 4 / 3; }
  body.home .ch-stage .ch-detail, body.home .ch-stage.flip .ch-detail, body.home .ch-stage.overlap .ch-detail { position: absolute; right: 10px; bottom: -30px; width: 45%; margin-top: 0; border: 3px solid var(--paper); border-radius: 18px; box-shadow: 0 20px 40px rgba(23,24,28,.26); z-index: 2; }
  body.home .ch-detail img { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) { body.home .ch-detail img { animation: none !important; } }

/* Desktop chapters (min-width 761px only; the phone presentation above
   is the owner's approved one and does not change). One wide photo per
   chapter. The earlier two-frame systems paired each wide shot with a
   zoom crop of the SAME photo beside it, which on desktop simply showed
   every product twice (owner, 2026-11-05, with photos of his screen).
   The detail frames stay in the DOM for the phone inset and are hidden
   here. */
@media (min-width: 761px) {
  body.home .ch-stage, body.home .ch-stage.flip, body.home .ch-stage.overlap { display: block; max-width: none; margin-inline: 0; }
  body.home .ch-stage .ch-detail, body.home .ch-stage.flip .ch-detail, body.home .ch-stage.overlap .ch-detail { display: none; }
  body.home .ch-stage.flip .ch-wide { margin-top: 0; }
  body.home .ch-stage.overlap .ch-wide img { aspect-ratio: 16 / 10; object-position: 50% 72%; }
  body.home .chapter-scene.ch-stone { padding-bottom: 88px; }
}

/* Compatibility: the fitting itself leads each brand block */
body.home .size-media { display: block; margin: -26px -26px 16px; border-radius: 28px 28px 0 0; overflow: hidden; background: var(--stone); }
body.home .size-media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s var(--ease); }
body.home .size-block:hover .size-media img { transform: scale(1.035); }
@media (max-width: 760px) {
  body.home .fit-band .sizes-band { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 6px var(--gutter) 22px; gap: 16px; }
  body.home .fit-band .sizes-band::-webkit-scrollbar { display: none; }
  body.home .fit-band .size-block { flex: 0 0 80%; scroll-snap-align: start; }
}

/* Compare: visual kit cards, photo chips for contents */
body.home .cmp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
body.home .cmp-card { background: #fff; border: 1px solid var(--line); border-radius: 28px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; box-shadow: 0 12px 32px rgba(23,24,28,.055); }
body.home .cmp-card.hot { border-color: rgba(23,24,28,.5); box-shadow: 0 22px 46px rgba(23,24,28,.12); }
body.home .cmp-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--stone); }
body.home .cmp-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
body.home .cmp-card:hover .cmp-media img { transform: scale(1.03); }
body.home .cmp-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 11px; }
body.home .cmp-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
body.home .cmp-top h3 { font-size: 23px; }
body.home .cmp-price { font-family: var(--serif); font-weight: 900; font-size: 27px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.home .cmp-parts { color: var(--muted); font-size: 15px; }
body.home .cmp-save { color: var(--h-mocha); font-weight: 700; white-space: nowrap; }
body.home .cmp-chips { list-style: none; margin: 3px 0 0; padding: 15px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
body.home .cmp-chips li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; line-height: 1.3; }
body.home .cmp-chips img { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; flex: none; background: var(--stone); }
body.home .cmp-miss { color: var(--muted); font-size: 14px; }
body.home .cmp-cta-row { margin-top: auto; padding-top: 8px; }
.cmp-dots { display: none; }
@media (max-width: 760px) {
  body.home .cmp-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 6px var(--gutter) 22px; gap: 16px; }
  body.home .cmp-grid::-webkit-scrollbar { display: none; }
  body.home .cmp-card { flex: 0 0 84%; scroll-snap-align: start; }
  .cmp-dots { display: flex; justify-content: center; gap: 8px; margin-top: 2px; }
  .cmp-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--h-taupe); padding: 0; transition: width .3s var(--ease), background .3s; }
  .cmp-dot.on { width: 24px; background: var(--h-mocha); }
}

/* Why Dialed: one espresso panel on the station photograph */
body.home .why-panel { position: relative; border-radius: 28px; overflow: hidden; background: var(--h-espresso); color: var(--paper); box-shadow: 0 30px 60px rgba(23,24,28,.26); }
body.home .why-media { position: absolute; inset: 0; overflow: hidden; }
body.home .why-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%; }
body.home .why-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42,33,26,.78) 0%, rgba(42,33,26,.86) 58%, rgba(42,33,26,.93) 100%); }
body.home .why-content { position: relative; padding: 54px; display: grid; gap: 36px; }
body.home .why-content h2 { font-size: var(--fs-h2); color: var(--paper); }
body.home .why-panel .why-item { border-top-color: rgba(244,244,241,.38); }
body.home .why-panel .why-item b { color: var(--paper); }
body.home .why-panel .why-item span { color: rgba(244,244,241,.8); }
@media (max-width: 760px) { body.home .why-content { padding: 34px 24px 38px; gap: 28px; } }

/* FAQ: same four questions, less document */
body.home #faq { padding: 60px 0; }
body.home #faq .faq details { padding: 17px 4px; }
body.home #faq .faq summary { font-size: 18px; }
body.home #faq .faq p { margin-top: 8px; }
@media (max-width: 760px) { body.home #faq { padding: 44px 0; } }

/* Final CTA: a full-bleed photo panel, the hero photograph again */
body.home .final-cta .wrap { background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; padding: 0 var(--gutter); display: block; justify-items: normal; text-align: left; }
body.home .cta-panel { position: relative; border-radius: 28px; overflow: hidden; background: var(--h-espresso); box-shadow: 0 30px 60px rgba(23,24,28,.30); }
body.home .cta-media { position: absolute; inset: 0; overflow: hidden; }
body.home .cta-media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
body.home .cta-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42,33,26,.50) 0%, rgba(42,33,26,.64) 55%, rgba(42,33,26,.85) 100%); }
body.home .cta-content { position: relative; padding: 88px 56px; display: grid; gap: 20px; justify-items: center; text-align: center; }
@media (max-width: 760px) { body.home .cta-content { padding: 58px 26px; } }

/* Horizontal rail float (JS-driven, store.js floatRails) */
.float-rail > * { will-change: transform; }
.float-rail.scrolling > * { transition: none !important; }

/* Judge.me reviews (rendered only when real reviews exist) */
.reviews-section{max-width:880px;margin:56px auto 8px;padding:28px 20px 4px;border-top:1px solid #ddd6cc}
.reviews-head{font-size:22px;margin:0 0 18px}
.reviews-avg{font-size:15px;color:#7C6A58;margin-left:8px;white-space:nowrap}
.review{padding:16px 0;border-top:1px solid #e7e1d8}
.review:first-of-type{border-top:none}
.review-stars{margin:0 0 6px}
.review-verified{font-size:12px;color:#7C6A58;border:1px solid #cbbfa9;border-radius:999px;padding:1px 8px;margin-left:6px;vertical-align:2px}
.review-title{font-size:16px;margin:0 0 4px}
.review-body{margin:0 0 6px;line-height:1.55}
.review-meta{margin:0;font-size:13px;color:#8a8175}

/* Standard vs bottomless comparison (homepage, added 2026-11-05) */
body.home .pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
body.home .pf-card { background: #fff; border: 1px solid var(--line); border-radius: 28px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; box-shadow: 0 12px 32px rgba(23,24,28,.055); }
body.home .pf-media { aspect-ratio: 4/3; overflow: hidden; background: var(--stone); }
body.home .pf-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.home .pf-body { padding: 22px 24px 26px; display: flex; flex-direction: column; }
body.home .pf-body h3 { margin: 0 0 6px; font-size: 22px; font-weight: 900; }
body.home .pf-for { margin: 0 0 14px; color: #57534B; line-height: 1.5; }
body.home .pf-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 7px; font-size: 15px; line-height: 1.45; }
body.home .pf-list li { padding-left: 22px; position: relative; }
body.home .pf-pros li::before { content: "+"; position: absolute; left: 2px; font-weight: 900; color: var(--h-mocha); }
body.home .pf-cons li { color: #57534B; }
body.home .pf-cons li::before { content: "\2212"; position: absolute; left: 2px; font-weight: 900; color: #B09A83; }
body.home .pf-body .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 760px) {
  body.home .pf-grid { grid-template-columns: 1fr; }
  body.home .pf-body { padding: 18px 18px 22px; }
}