/** Shopify CDN: Minification failed

Line 385:8 Unexpected "@media"
Line 386:2 Expected identifier but found "."

**/
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("schibsted-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("schibsted-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --n1: #F8F7F4; --n3: #EAEDF1; --n4: #E1E4E9; --n5: #D6D9DE; --n6: #C9CCD1; --n8: #9B9EA5; --n11: #4F535A; --n12: #1B2A4A; --paper: #FFFFFF;
  --b4: #DDE2EC; --b9: #0057FF; --b10: #054CD9; --b11: #0242C2;
  --warn-tab: #EBC591; --warn-text: #6F4A04; --warn-solid: #BE8628; --warn-bg: #FBF3E4;
  --ok-text: #056337;
  --ease: cubic-bezier(.16, 1, .3, 1); --font: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --gutter: 20px; --sec: 64px; --wrap: 1120px;
}
@media (min-width: 900px) { :root { --gutter: 40px; } .wrap, .headbar { padding-left: 40px; padding-right: 40px; } .band { padding-top: 112px; padding-bottom: 112px; } h1 { font-size: 3.5rem; } h2 { font-size: 2.5rem; } .price-lead { font-size: 2.75rem; } .h1-sm { font-size: 3rem; } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; scrollbar-color: var(--n8) var(--n1); scrollbar-width: thin; }
body { margin: 0; background: var(--n1); color: var(--n12); font: 400 1rem/1.6 var(--font); caret-color: var(--b9); accent-color: var(--b9); }
::selection { background: var(--n12); color: var(--n1); }
a { color: var(--b11); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--b9); }
:focus-visible { outline: 2px solid var(--b9); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--n12); color: var(--n1); padding: 10px 14px; z-index: 80; border-radius: 4px; }
.skip:focus { top: 8px; } .skip:hover { color: var(--n1); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.narrow { max-width: 760px; }

h1, h2, h3 { margin: 0; font-weight: 700; color: var(--n12); text-wrap: balance; }
h1 { font-size: 2.25rem; line-height: 1.08; letter-spacing: -.03em; }
h1 span { display: block; }
h2 { font-size: 1.75rem; line-height: 1.3; letter-spacing: -.022em; }
h3 { font-size: 1.5rem; line-height: 1.35; letter-spacing: -.008em; }
p { margin: 0; max-width: 65ch; text-wrap: pretty; }
.lede { font-size: 1.125rem; line-height: 1.6; color: var(--n11); }
.small { font-size: 1rem; color: var(--n11); }
.note { font-size: .8125rem; line-height: 1.55; color: var(--n11); }
h2 + p, h2 + .lede { margin-top: 16px; }
.h1-sm { font-size: 2rem; line-height: 1.15; letter-spacing: -.03em; }

/* ---------- bands: one idea each, alternating grounds ---------- */
.band { padding-top: 64px; padding-bottom: 64px; }
.band.paper { background: var(--paper); }
.band.tint { background: var(--n3); }
.slot { background: var(--n3); border-radius: 8px; aspect-ratio: 16 / 9; }
.band.tint .slot { background: var(--n4); }
.slot.sq { aspect-ratio: 1 / 1; } .slot.tall { aspect-ratio: 4 / 3; }

/* ---------- top: notice, sticky header, index-tab navigation ---------- */
.notice { background: var(--n3); color: var(--n12); font-size: .8125rem; font-weight: 600; display: flex; justify-content: center; padding: 9px var(--gutter); }
.notice span { padding: 0 14px; } .notice span + span { border-left: 1px solid var(--n6); }
.site-head { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--n5); }
.headbar { max-width: var(--wrap); margin: 0 auto; padding-left: 20px; padding-right: 20px; height: 64px; display: flex; align-items: center; gap: 8px; }
.brand { font-size: 1.5rem; font-weight: 800; letter-spacing: -.035em; color: var(--n12); text-decoration: none; margin-right: auto; }
.nav { display: none; align-items: center; gap: 4px; margin-right: 24px; }
.nav a { display: flex; align-items: center; height: 36px; padding: 0 16px; border: 1px solid transparent; border-radius: 6px; color: var(--n12); text-decoration: none; font-size: 1rem; font-weight: 600; white-space: nowrap; }
.nav a:hover { background: var(--n3); }
.nav a[aria-current="page"] { background: var(--b4); border-color: var(--n5); }
.iconbtn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; color: var(--n12); cursor: pointer; border-radius: 8px; }
.iconbtn:hover { background: var(--n3); }
svg.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.menu { display: none; border-top: 1px solid var(--n5); background: var(--paper); }
.menu.open { display: block; }
.menu a { display: flex; align-items: center; min-height: 52px; padding-left: var(--gutter); padding-right: var(--gutter); color: var(--n12); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--n5); }
@media (min-width: 1100px) { .nav { display: flex; } #menuBtn { display: none; } .menu { display: none !important; } }

/* ---------- buy box ---------- */
.hero { padding-top: 0; padding-bottom: 64px; }
.hero-grid { display: grid; gap: 28px; }
.gallery { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); }
.gallery .slot { border-radius: 0; }
.thumbs { display: none; }
@media (min-width: 900px) {
  .hero { padding-top: 40px; padding-bottom: 112px; }
  .hero-grid { grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: start; }
  .gallery { margin-left: 0; margin-right: 0; } .gallery .slot { border-radius: 8px; }
  .thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
  .thumbs .slot { aspect-ratio: 1 / 1; }
  .buybox { position: sticky; top: 96px; }
}
.points { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.points li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; line-height: 1.5; }
.points svg { color: var(--n12); margin-top: 2px; width: 20px; height: 20px; }
.kits { border: 0; padding: 0; margin: 30px 0 0; }
.kits legend { padding: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -.012em; margin-bottom: 6px; }
.kit { display: grid; grid-template-columns: 24px 1fr auto; gap: 14px; align-items: center; padding: 15px 10px; margin-left: -10px; margin-right: -10px; border-top: 1px solid var(--n5); border-radius: 4px; cursor: pointer; transition: background 160ms var(--ease); }
.kit:last-of-type { border-bottom: 1px solid var(--n5); }
.kit input { position: absolute; opacity: 0; pointer-events: none; }
.kit .radio { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--n8); background: var(--paper); display: grid; place-items: center; }
.kit .radio::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--n12); transform: scale(0); transition: transform 200ms var(--ease); }
.kit input:checked ~ .radio { border-color: var(--n12); } .kit input:checked ~ .radio::after { transform: scale(1); }
.kit:has(input:checked) { background: var(--b4); }
.kit input:focus-visible ~ .radio { outline: 2px solid var(--b9); outline-offset: 3px; }
.kit b { display: block; font-size: 1rem; } .kit small { display: block; font-size: .8125rem; line-height: 1.4; color: var(--n11); margin-top: 2px; } .kit .price { font-weight: 700; font-size: 1rem; }
.cta { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; margin-top: 22px; padding: 14px 20px; border: 0; border-radius: 6px; background: var(--b9); color: #fff; font: 700 1rem/1.2 var(--font); cursor: pointer; transition: background 160ms, transform 120ms var(--ease); text-decoration: none; }
.cta:hover { background: var(--b10); color: #fff; } .cta:active { transform: translateY(1px); } .cta[aria-busy="true"] { opacity: .8; cursor: progress; }
.cta.ghost { background: transparent; color: var(--n12); box-shadow: inset 0 0 0 1.5px var(--n12); width: auto; display: inline-flex; padding-left: 26px; padding-right: 26px; } .cta.ghost:hover { background: var(--n3); color: var(--n12); }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 14px; font-size: .8125rem; color: var(--n11); }
.status { min-height: 1.5em; margin-top: 8px; text-align: center; font-size: 1rem; } .status.on { color: var(--ok-text); font-weight: 600; }

/* ---------- chapters ---------- */
.split { display: grid; gap: 32px; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .split.flip .text { order: 2; } }
.doorstop { margin-top: 22px; font-size: 1.5rem; line-height: 1.5; color: var(--n12); }
.steppers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 14px; }
.steppers button { min-height: 44px; border: 1.5px solid var(--n6); background: var(--paper); color: var(--n12); border-radius: 4px; font: 600 .8125rem/1.2 var(--font); cursor: pointer; }
.steppers button[aria-checked="true"] { background: var(--n12); border-color: var(--n12); color: var(--n1); }
.diagram { position: relative; height: 84px; margin-top: 16px; }
.tray { position: absolute; left: 20%; width: 56%; height: 26px; border: 1.5px solid var(--n12); background: var(--paper); }
.tray-up { top: 4px; border-radius: 13px 13px 5px 5px; }
.tray-low { top: 46px; border-radius: 5px 5px 13px 13px; background: var(--b4); transform: translateX(calc(var(--step, 0) * 24px)); transition: transform 380ms var(--ease); }
.sub { margin-top: 72px; }
.parts { display: flex; gap: 20px; margin: 28px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); padding-right: var(--gutter); overscroll-behavior-x: contain; scrollbar-width: none; }
.parts::-webkit-scrollbar { display: none; }
.parts article { flex: 0 0 78%; scroll-snap-align: start; }
.parts h3 { margin-top: 16px; } .parts p { margin-top: 6px; color: var(--n11); font-size: 1rem; }
.dots { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.dots ol { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; } .dots li { width: 8px; height: 8px; border-radius: 50%; background: var(--n6); transition: background 200ms; } .dots li[data-on="true"] { background: var(--n12); } .dots span { font-size: .8125rem; color: var(--n11); }
@media (min-width: 900px) { .parts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-left: 0; margin-right: 0; padding: 0; overflow: visible; } .dots { display: none; } .parts article { flex: none; } }
.honest { margin-top: 44px; font-size: 1.125rem; max-width: 60ch; } .honest b { color: var(--n12); }

.steps { list-style: none; padding: 0; margin: 32px 0 0; counter-reset: s; display: grid; }
.steps li { display: grid; align-content: start; grid-template-columns: 44px 1fr; gap: 4px 10px; padding: 18px 0; border-top: 1px solid var(--n6); counter-increment: s; }
.steps li::before { content: counter(s); grid-row: 1 / span 2; font-size: 1.75rem; font-weight: 700; line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.steps b { font-size: 1.125rem; } .steps p { color: var(--n11); font-size: 1rem; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 32px; } .steps li { grid-template-columns: 1fr; padding: 22px 0 0; } .steps li::before { grid-row: auto; margin-bottom: 8px; } }
.warnbar { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; margin-top: 40px; padding: 20px; background: var(--warn-bg); border: 1px solid var(--warn-tab); border-radius: 6px; }
.warnbar svg { color: var(--warn-solid); width: 24px; height: 24px; margin-top: 1px; } .warnbar b { color: var(--warn-text); } .warnbar p { font-size: 1rem; max-width: 80ch; }

table { width: 100%; border-collapse: collapse; margin-top: 28px; max-width: 760px; }
th, td { text-align: left; padding: 14px 0; border-top: 1px solid var(--n6); vertical-align: top; }
th { font-size: .8125rem; font-weight: 600; color: var(--n11); padding-top: 0; border-top: 0; }
td:last-child, th:last-child { padding-left: 24px; text-align: right; white-space: nowrap; }
tr.me td { font-weight: 700; } tbody tr:last-child td { border-bottom: 1px solid var(--n6); }
.price-lead { font-size: 1.75rem; line-height: 1.3; font-weight: 700; letter-spacing: -.025em; max-width: 22ch; }
.price-lead + p { margin-top: 18px; }

.timeline { list-style: none; padding: 0; margin: 32px 0 0; display: grid; }
.timeline li { display: grid; align-content: start; grid-template-columns: 110px 1fr; gap: 4px 14px; padding: 16px 0; border-top: 1px solid var(--n6); }
.when { font-weight: 700; } .timeline .d { display: block; color: var(--n11); font-size: 1rem; }
.stamp { display: inline; font-weight: 700; }
@media (min-width: 900px) { .timeline { grid-template-columns: repeat(4, 1fr); gap: 32px; } .timeline li { grid-template-columns: 1fr; padding-top: 20px; } }

.bar-label { margin-top: 22px; font-size: 1rem; } .bar-label b { font-size: 1.5rem; letter-spacing: -.02em; margin-right: 8px; }
.bar { position: relative; height: 34px; margin-top: 8px; max-width: 640px; } .bar i { position: absolute; left: 0; top: 0; height: 100%; border-radius: 4px; }
.bar.a i { width: 88%; background: var(--n12); } .bar.b i { width: 72%; background: transparent; box-shadow: inset 0 0 0 2px var(--n12); }
.link-row { margin-top: 32px; }

details { border-top: 1px solid var(--n6); }
details:last-of-type { border-bottom: 1px solid var(--n6); }
summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 16px 0; font-size: 1.125rem; font-weight: 600; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
summary svg { flex: 0 0 20px; width: 20px; height: 20px; transition: transform 240ms var(--ease); color: var(--n11); }
details[open] > summary svg { transform: rotate(180deg); }
.answer { padding: 0 0 24px; color: var(--n11); font-size: 1rem; max-width: 70ch; }
.faq-list { margin-top: 28px; max-width: 800px; }

.sources { list-style: none; padding: 0; margin: 28px 0 0; font-size: .8125rem; color: var(--n11); display: grid; gap: 8px; max-width: 760px; }
.sources li { display: grid; grid-template-columns: 24px 1fr; }
.page-head { padding-top: 48px; padding-bottom: 8px; } .page-head p { margin-top: 14px; }
.back { display: inline-block; margin-bottom: 22px; font-size: 1rem; font-weight: 600; }

.foot { background: var(--n3); padding: 64px 0 128px; }
.foot-grid { display: grid; gap: 36px 28px; grid-template-columns: repeat(2, 1fr); padding-bottom: 40px; border-bottom: 1px solid var(--n6); }
.foot-brand { grid-column: 1 / -1; } .foot-brand .brand { display: inline-block; margin-bottom: 12px; } .foot-brand p { margin-top: 8px; color: var(--n11); max-width: 34ch; }
.foot-h { margin-bottom: 8px; font-size: .8125rem; line-height: 1.4; letter-spacing: 0; color: var(--n11); font-weight: 700; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; }
.foot li a { display: flex; align-items: center; min-height: 40px; color: var(--n12); text-decoration: none; } .foot li a:hover { color: var(--b11); text-decoration: underline; }
.foot-note { margin-top: 28px; max-width: 88ch; } .foot .note + .note { margin-top: 12px; }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; } .foot-brand { grid-column: auto; } }
.buybar { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; transform: translateY(110%); transition: transform 320ms var(--ease); background: var(--paper); border-top: 1px solid var(--n5); padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); }
.buybar.on { transform: none; }
.buybar-in { max-width: var(--wrap); margin: 0 auto; display: flex; align-items: center; gap: 14px; }
.buybar-t { flex: 1; line-height: 1.25; } .buybar-t b { display: block; font-size: 1rem; } .buybar-t span { font-size: .8125rem; color: var(--n11); }
.buybar .cta { width: auto; margin: 0; min-height: 48px; padding-left: 22px; padding-right: 22px; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }

/* =====================================================================
   v4 : the landing template takes authority (D-024).
   Dashed grey = temporary placeholder, never shipped.
   ===================================================================== */
.protobar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 18px; padding: 4px var(--gutter); background: var(--paper); border-bottom: 1px dashed var(--n8); font-size: .8125rem; color: var(--n11); }
.protobar label { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-weight: 600; color: var(--n12); cursor: pointer; }
.tbd { border: 1.5px dashed var(--n8); border-radius: 8px; padding: 12px 14px; color: var(--n11); font-size: .875rem; line-height: 1.5; max-width: none; }
.tbd b { display: block; margin-bottom: 2px; color: var(--n12); font-size: .8125rem; font-weight: 700; }
body.no-ph [data-tbd] { display: none !important; }
.tbd-line { margin-top: 16px; } .tbd-row { margin-top: 24px; max-width: 760px; }

/* carousel: a scroll-snap strip. Swipe on touch, thumbnails and arrow keys elsewhere. */
.gallery { position: relative; }
.stage { overflow-anchor: none; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; container-type: inline-size; background: var(--n3); }
.stage::-webkit-scrollbar { display: none; }
.slide { position: relative; flex: 0 0 100%; aspect-ratio: 1 / 1; margin: 0; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; }
.slide > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.slide:nth-child(2) > img { object-position: 50% 50%; } .slide:nth-child(4) > img { object-position: 50% 62%; }
.lab { position: absolute; bottom: 22cqw; transform: translateX(-50%); font-size: max(.8125rem, 3.4cqw); font-weight: 600; color: var(--n12); white-space: nowrap; }
.lab.l1 { left: 25.6%; } .lab.l2 { left: 75%; }
.stamp-on { position: absolute; left: 6cqw; top: 6cqw; padding: .4cqw 2.4cqw; border: max(1.5px, .5cqw) solid var(--n12); border-radius: 3px; background: rgba(248, 247, 244, .92); color: var(--n12); font-size: max(.9375rem, 4.4cqw); font-weight: 700; line-height: 1.3; }
.slide-tbd { display: grid; place-items: center; padding: 6cqw; background: var(--n1); }
.slide-tbd .tbd { width: 100%; font-size: max(.875rem, 3.4cqw); }
.slide-tbd .tbd b { font-size: max(.8125rem, 3.4cqw); margin-bottom: 1.4cqw; }
.slide-doc { display: grid; align-content: center; padding: 8cqw; background: var(--n1); }
.doc-t { max-width: 15ch; font-size: max(1.25rem, 6.6cqw); line-height: 1.3; font-weight: 700; letter-spacing: -.025em; text-wrap: balance; }
.doc-l { max-width: none; margin-top: 5cqw; font-size: max(.9375rem, 4cqw); }
.doc-l b { margin-right: 2cqw; font-size: max(1.5rem, 8cqw); letter-spacing: -.02em; }
.slide-doc .bar { max-width: none; height: 7cqw; margin-top: 1.6cqw; }
.doc-tl { list-style: none; margin: 5cqw 0 0; padding: 0; }
.doc-tl li { display: grid; grid-template-columns: 26cqw 1fr; gap: 3cqw; align-items: center; padding: 2.4cqw 0; border-top: 1px solid var(--n6); font-size: max(.9375rem, 3.9cqw); }
.doc-tl .stamp { font-size: max(.8125rem, 3.4cqw); }
.cap { max-width: none; min-height: 3.2em; margin-top: 12px; padding: 0 var(--gutter); font-size: .9375rem; line-height: 1.5; color: var(--n11); }
.gal-note { padding: 0 var(--gutter); }
.tabs { display: flex; gap: 10px; overflow-x: auto; padding: 8px var(--gutter) 8px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 0 0 72px; display: grid; gap: 6px; justify-items: center; align-content: start; padding: 0; border: 0; background: none; color: var(--n11); font: 600 .75rem/1.25 var(--font); text-align: center; cursor: pointer; }
.tab .th { display: block; width: 72px; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; background: var(--n3); outline: 2px solid transparent; outline-offset: 2px; transition: outline-color 160ms; }
.tab .th img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tab:hover { color: var(--n12); }
.tab[aria-current="true"] { color: var(--n12); } .tab[aria-current="true"] .th { outline-color: var(--n12); }
/* real slide previews: the current one at full strength, the others at half */
.tab .th img { opacity: .5; transition: opacity 200ms var(--ease); } .tab:hover .th img, .tab:focus-visible .th img { opacity: .85; } .tab[aria-current="true"] .th img { opacity: 1; }
.th-tbd { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--n8); }
.th-doc { display: grid; place-items: center; background: var(--n1) !important; box-shadow: inset 0 0 0 1px var(--n5); color: var(--n12); }
.stamp.mini { padding: 0 6px; font-size: .875rem; font-weight: 700; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.05fr 1fr; }
  .gallery { position: sticky; top: 96px; } .buybox { position: static; }
  .stage { border-radius: 8px; }
  .cap, .gal-note { padding: 0; }
  .tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; padding: 10px 0 6px; overflow: visible; }
  .tab { flex: none; } .tab .th { width: 100%; }
}

/* buy box additions */
.points li.tbd-li { padding: 10px 12px; border: 1.5px dashed var(--n8); border-radius: 8px; color: var(--n11); font-size: .875rem; }
.tbd-li b { display: block; color: var(--n12); font-size: .8125rem; }
.dot { width: 18px; height: 18px; margin-top: 3px; border: 1.5px dashed var(--n8); border-radius: 50%; }
.risk { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 0; border-top: 1px solid var(--n5); color: var(--n12); text-decoration: none; font-weight: 600; line-height: 1.4; }
.risk:hover { color: var(--b11); } .risk .stamp { flex: none; font-size: .8125rem; }
.trust { margin-top: 0; max-width: none; }
.miniq { margin-top: 32px; }
.h-mini { font-size: 1.125rem; line-height: 1.3; letter-spacing: -.012em; }
.miniq .faq-list { margin-top: 8px; }
.miniq summary { min-height: 52px; padding: 12px 0; font-size: 1rem; }
.miniq .answer { padding-bottom: 18px; font-size: .9375rem; }
.miniq .link-row { margin-top: 14px; }

/* reviews, authority */
.revs { display: grid; gap: 12px; margin-top: 32px; }
.rev { display: grid; grid-template-columns: 96px 1fr; gap: 12px; }
.rev .tbd { min-height: 96px; padding: 10px 12px; font-size: .8125rem; }
.about { max-width: 760px; margin-top: 56px; } .about .tbd { margin-top: 24px; }
@media (min-width: 900px) {
  .revs { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .rev { grid-template-columns: 1fr; }
  .rev .tbd:first-child { aspect-ratio: 1 / 1; min-height: 0; } .rev .tbd { padding: 16px; font-size: .875rem; }
}

/* education */
.exploded { position: relative; max-width: 440px; margin: 0 auto; container-type: inline-size; }
.exploded img { display: block; width: 100%; height: auto; border-radius: 8px; }
.xl { position: absolute; left: 5%; top: var(--y); width: calc(var(--x) - 5%); transform: translateY(-50%); display: flex; align-items: center; gap: 6px; font-size: max(.75rem, 2.9cqw); line-height: 1.2; font-weight: 500; color: var(--n12); }
.xl::after { content: ""; flex: 1 1 8px; min-width: 8px; height: 1px; background: var(--n11); }
.parts .pic { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; }
.parts .pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.parts .pic.tbd { display: grid; place-items: center; padding: 16px; }
.honest.tight { margin-top: 18px; }
#offer .kits { margin-top: 0; }
@media (max-width: 899px) { #offer .split { gap: 24px; } }
.hero-grid > *, .split > * { min-width: 0; }   /* a scroll strip inside a grid cell must not widen the column */
@media (max-width: 899px) { .rev { grid-template-columns: 1fr; } .rev .tbd { min-height: 0; } .rev:nth-child(n+2) { display: none; } }


/* v4.1 : the carousel frame is 4:5, the native format of these visuals (Shopify carousel), so 4:5 pictures show whole.
   Flip back to a square with --slide-ratio: 1 / 1 (the three kit photos are square). */
:root { --slide-ratio: 4 / 5; }
.slide { aspect-ratio: var(--slide-ratio); }
#s-kit { background: #F7F6F4; } #s-kit > img { object-fit: contain; }
.lab { top: 70%; bottom: auto; }
.slide-ba { background: var(--n3); } .slide-ba > img { object-fit: cover; }
.ba-lab { position: absolute; left: 4.5%; padding: .4cqw 2.4cqw; border: max(1.5px, .5cqw) solid var(--n12); border-radius: 3px; background: rgba(248, 247, 244, .92); color: var(--n12); font-size: max(.9375rem, 4.2cqw); font-weight: 700; line-height: 1.3; }
.ba-lab.b1 { top: 2.6%; } .ba-lab.b2 { top: 54%; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); } }

/* fitting and adjustment illustration (G08 bis) : captions are live text placed where the original ones were */
.fitrow { display: grid; gap: 24px; margin-top: 40px; align-items: center; }
.stepfig { margin: 0; max-width: 460px; }
.stepimg { position: relative; container-type: inline-size; }
.stepimg img { display: block; width: 100%; height: auto; border-radius: 8px; }
.cp { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); color: var(--n12); font-size: max(.8125rem, 3.3cqw); font-weight: 600; line-height: 1.2; white-space: nowrap; }
.stepfig figcaption { margin-top: 8px; }
.fitrow .tbd-row { margin-top: 0; }
@media (min-width: 900px) { .fitrow { grid-template-columns: minmax(0, 460px) 1fr; gap: 64px; } }

/* =====================================================================
   Motion (V2). One signature scene (the tray sliding forward), two brand gestures (the bars draw, the stamp lands),
   one entrance for the first screen, small feedback. Every hidden start state lives inside no-preference, so a visitor
   who asks for less motion, or a browser without script, sees the finished page.
   ===================================================================== */
.diagram::before { content: ""; position: absolute; left: 20%; top: 0; bottom: 0; border-left: 1.5px dashed var(--n8); }
.status.on { animation: rise 320ms var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes unveil { from { opacity: 0; clip-path: inset(0 0 12% 0); } }
@keyframes stamp { from { opacity: 0; transform: scale(1.5) rotate(-6deg); } }
@media (prefers-reduced-motion: no-preference) {
  .hero-head > h1, .hero-head > .lede, .buybox > .points, .buybox > .kits, .buybox > .cta { animation: rise 720ms var(--ease) both; }
  .hero-head > .lede { animation-delay: 70ms; } .buybox > .points { animation-delay: 140ms; } .buybox > .kits { animation-delay: 210ms; } .buybox > .cta { animation-delay: 280ms; }
  #s-kit > img { animation: unveil 1000ms var(--ease) both; }
  .js [data-reveal="bars"] .bar i, .js .slide-doc .bar i { clip-path: inset(0 100% 0 0); transition: clip-path 1200ms var(--ease); }
  .js [data-reveal="bars"].on .bar i, .js .slide-doc.cur .bar i { clip-path: inset(0); }
  .js [data-reveal="bars"].on .bar.b i, .js .slide-doc.cur .bar.b i { transition-delay: 160ms; }
  .js .timeline[data-reveal] .stamp, .js .slide-doc:not(.cur) .doc-tl .stamp { opacity: 0; }
  .js .timeline[data-reveal].on .stamp, .js .slide-doc.cur .doc-tl .stamp { opacity: 1; animation: stamp 560ms var(--ease) 260ms both; }
  details { interpolate-size: allow-keywords; }
  details::details-content { block-size: 0; overflow: clip; transition: block-size 320ms var(--ease), content-visibility 320ms allow-discrete; }
  details[open]::details-content { block-size: auto; }
}

/* placeholders now filled with real copy */
.whofor h3 + p { margin-top: 10px; }
.authority { margin-top: 40px; max-width: 760px; } .authority h3 + p { margin-top: 10px; }
.urgent { margin-top: 24px; font-size: 1.125rem; max-width: 46ch; } .urgent b { color: var(--n12); }


/* parts: the three pictures share one 4:5 frame */
.parts .pic { aspect-ratio: 4 / 5; }

/* Evidence and Guarantee are composed for their pictures. Text sits where each picture is calm, and contrast is tuned zone by zone
   (see generation-log 2026-09-21), not with one veil over everything. The picture is its own layer so it can move. */
.slide-ev, .slide-gr { display: block; background: var(--n1); }
.ph { position: absolute; inset: 0; z-index: 0; background: center / cover no-repeat; }
.slide-ev .ph { background-image: url("bg-evidence.jpg"); }
.slide-gr .ph { background-image: url("bg-guarantee.jpg"); }
.slide-ev { display: flex; padding: 8cqw; }
.slide-ev::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(248, 247, 244, .66) 0%, rgba(248, 247, 244, .42) 24%, rgba(248, 247, 244, 0) 42%); }
.slide-ev .doc { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; width: 100%; }
.slide-ev .doc-t { max-width: 17ch; }
.slide-ev .mark { background: linear-gradient(currentColor, currentColor) 0 94% / 100% 2px no-repeat; }
.slide-ev .ev-stats { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 6cqw; margin: 0 -8cqw -8cqw; padding: 6cqw 8cqw 8cqw; color: #fff; background-color: rgba(27, 42, 74, .78); }
.slide-ev .ev-stats::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 16cqw; background: linear-gradient(180deg, rgba(27, 42, 74, 0), rgba(27, 42, 74, .78)); pointer-events: none; }
.slide-ev .doc-l { margin-top: 0; font-size: max(.8125rem, 3.5cqw); line-height: 1.35; }
.slide-ev .doc-l b { display: block; margin: 0 0 1cqw; font-size: max(1.5rem, 8.5cqw); line-height: 1; font-variant-numeric: tabular-nums; }
.slide-ev .bar { height: 5cqw; margin-top: 2.6cqw; }
.slide-ev .bar.a i { background: #fff; } .slide-ev .bar.b i { background: transparent; box-shadow: inset 0 0 0 max(2px, .5cqw) #fff; }

.slide-gr { padding: 19cqw 7cqw 8cqw; }
.slide-gr::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(248, 247, 244, .9) 0%, rgba(248, 247, 244, .86) 42%, rgba(248, 247, 244, .5) 60%, rgba(248, 247, 244, 0) 76%); }
.slide-gr::after { content: ""; position: absolute; inset: 0; z-index: 1; background: #c9d6e8; mix-blend-mode: color; opacity: .2; -webkit-mask-image: linear-gradient(90deg, #000 0, #000 50%, transparent 78%); mask-image: linear-gradient(90deg, #000 0, #000 50%, transparent 78%); pointer-events: none; }
.slide-gr .doc { position: relative; z-index: 2; width: 52cqw; }
.slide-gr .doc-t { max-width: none; font-size: max(1.125rem, 5.6cqw); }
.slide-gr .doc-t .big { display: block; margin-top: .12em; font-size: 1.32em; letter-spacing: -.035em; }
.slide-gr .doc-tl { position: relative; margin-top: 4cqw; padding-left: 7cqw; }
.slide-gr .doc-tl::before { content: ""; position: absolute; left: 1.75cqw; top: 3cqw; bottom: 3cqw; width: 1.5px; background: rgba(27, 42, 74, .32); }
.slide-gr .doc-tl li { position: relative; grid-template-columns: 15cqw 1fr; gap: 2cqw; padding: 2cqw 0; font-size: max(.8125rem, 3.5cqw); line-height: 1.4; }
.slide-gr .doc-tl li::before { content: ""; position: absolute; left: -6.4cqw; top: 3.2cqw; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: var(--n12); box-shadow: 0 0 0 max(3px, .8cqw) rgba(248, 247, 244, .9); }

@media (prefers-reduced-motion: no-preference) {
  .js .slide-ev:not(.cur) .mark { background-size: 0 2px; }
  .slide-ev.cur .mark { transition: background-size 900ms var(--ease) 500ms; }
  .js .slide-gr .doc-tl::before { transform-origin: top; transform: scaleY(0); }
  .js .slide-gr.cur .doc-tl::before { transform: none; transition: transform 1300ms var(--ease) 200ms; }
  .js .slide-gr .doc-tl li::before { transform: scale(0); }
  .js .slide-gr.cur .doc-tl li::before { transform: none; transition: transform 500ms var(--ease); }
  .js .slide-gr.cur .doc-tl li:nth-child(1)::before { transition-delay: 300ms; }
  .js .slide-gr.cur .doc-tl li:nth-child(2)::before { transition-delay: 620ms; }
  .js .slide-gr.cur .doc-tl li:nth-child(3)::before { transition-delay: 940ms; }
  .js .slide-gr.cur .doc-tl li:nth-child(4)::before { transition-delay: 1260ms; }
  .js .slide-gr.cur .doc-tl .stamp { animation-delay: 1450ms; }
}

/* hook slide echoing the first ad set ("the drawer") and the benefits slide (replaces "Night 1") */
.is-off { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.slide-hk, .slide-fu { display: block; padding: 7cqw 8cqw; background: var(--n1); }
.slide-hk .ph { background-image: url("hook-drawer.jpg"); }
.slide-fu .ph { background-image: url("night1.jpg"); }
.slide-hk::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(248, 247, 244, .74) 0%, rgba(248, 247, 244, .5) 22%, rgba(248, 247, 244, 0) 40%); }
.slide-hk .doc { position: relative; z-index: 2; width: 72cqw; }
.slide-hk .doc-t { max-width: none; font-size: max(1.375rem, 5.8cqw); }
.hk-sub { max-width: 64cqw; margin-top: 2.6cqw; font-size: max(.875rem, 3.5cqw); line-height: 1.4; color: var(--n12); }
.fu-l + @media (prefers-reduced-motion: no-preference) {
  .js .slide-fu:not(.cur)   .js .slide-fu.cur   .js .slide-fu.cur .fu-l + }

/* Benefits: four bubbles around the product, always visible. Each is joined to its part by a thin line drawn from the part,
   under the bubble, so the line stays right whatever the bubble's height (frame is 100 x 125 cqw). */
.callouts { list-style: none; margin: 0; padding: 0; }
.bubble { position: absolute; z-index: 3; width: 44cqw; padding: 2.4cqw 3cqw 2.6cqw; border: 1px solid rgba(27, 42, 74, .22); border-radius: 8px; background: rgba(248, 247, 244, .96); color: var(--n12); }
.bubble b { display: block; font-size: max(.8125rem, 3.5cqw); line-height: 1.25; letter-spacing: -.01em; }
.bubble p { max-width: none; margin-top: 1.1cqw; font-size: max(.75rem, 3cqw); line-height: 1.4; color: var(--n11); }
.b1, .b2 { top: 4cqw; } .b1 { left: 4cqw; } .b2 { right: 4cqw; }
.b3, .b4 { bottom: 3cqw; } .b3 { left: 4cqw; } .b4 { right: 4cqw; }
.ln { position: absolute; z-index: 2; width: 0; border-left: 1.5px solid rgba(27, 42, 74, .55); pointer-events: none; }
.ln::after { content: ""; position: absolute; left: 0; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: var(--n12); box-shadow: 0 0 0 max(2px, .55cqw) rgba(248, 247, 244, .95); }
.l1 { left: 42cqw; top: 12cqw; height: 52cqw; } .l1::after, .l2::after { bottom: 0; transform: translate(-50%, 50%); }
.l2 { left: 72cqw; top: 12cqw; height: 29cqw; }
.l3 { left: 26cqw; top: 94cqw; height: 18cqw; } .l4 { left: 70cqw; top: 71cqw; height: 37cqw; } .l3::after, .l4::after { top: 0; transform: translate(-50%, -50%); }


/* =====================================================================
   Site-wide: cart drawer, header badge, content-page components, forms, policy images, founder bubble
   ===================================================================== */
.iconbtn { position: relative; }
.cart-count { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--n12); color: #fff; font: 700 .6875rem/18px var(--font); text-align: center; }
.cart-count[hidden] { display: none; }
.linkbtn { border: 0; background: none; padding: 0; color: var(--b11); font: inherit; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }
.linkbtn:hover { color: var(--b9); }
.scrim { position: fixed; inset: 0; z-index: 60; background: rgba(27, 42, 74, .45); opacity: 0; transition: opacity 240ms var(--ease); }
.scrim.on { opacity: 1; }
.cart { position: fixed; z-index: 61; top: 0; right: 0; bottom: 0; width: min(440px, 100%); display: flex; flex-direction: column; background: var(--paper); border-left: 1px solid var(--n5); transform: translateX(100%); transition: transform 320ms var(--ease); }
.cart.on { transform: none; }
.cart[hidden], .scrim[hidden] { display: none; }
html.cart-open { overflow: hidden; }
.cart-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 20px; border-bottom: 1px solid var(--n5); }
.cart-head h2 { font-size: 1.25rem; line-height: 1.3; }
.cart-strip { max-width: none; padding: 10px 20px; background: var(--n3); font-size: .8125rem; font-weight: 600; text-align: center; }
.cart-body { flex: 1; overflow-y: auto; padding: 4px 20px 20px; }
.line { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--n5); }
.line-t b { display: block; } .line-t small { display: block; margin-top: 2px; font-size: .8125rem; line-height: 1.4; color: var(--n11); }
.line-p { font-weight: 700; }
.qty { display: inline-flex; align-items: center; justify-self: start; border: 1.5px solid var(--n6); border-radius: 6px; }
.qty button { width: 44px; height: 40px; border: 0; background: none; color: var(--n12); font: 600 1.25rem/1 var(--font); cursor: pointer; } .qty button:hover { background: var(--n3); }
.qty output { min-width: 32px; text-align: center; font-weight: 700; }
.rm { justify-self: end; align-self: center; min-height: 40px; padding: 0 4px; border: 0; background: none; color: var(--n11); font: 600 .8125rem/1 var(--font); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; } .rm:hover { color: var(--n12); }
.offer { padding: 18px 0; border-bottom: 1px solid var(--n5); } .offer p { margin-top: 4px; color: var(--n11); font-size: .9375rem; } .offer .cta { min-height: 44px; margin-top: 12px; }
.cart-foot { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--n5); }
.cart-foot[hidden] { display: none; }
.sums { margin: 0; } .sums div { display: flex; justify-content: space-between; padding: 4px 0; } .sums dt { color: var(--n11); } .sums dd { margin: 0; font-weight: 600; }
.cart-foot .cta { margin-top: 14px; }
.cart-empty { padding: 56px 0; text-align: center; } .cart-empty p { margin: 6px auto 20px; color: var(--n11); } .cart-empty .cta { display: inline-flex; }

/* content pages */
.toc-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.toc-row a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--n6); border-radius: 6px; background: var(--paper); color: var(--n12); font-size: .9375rem; font-weight: 600; text-decoration: none; }
.toc-row a:hover { background: var(--b4); color: var(--n12); }
.prose p + p { margin-top: 14px; } .prose h3 { margin-top: 32px; margin-bottom: 8px; font-size: 1.25rem; line-height: 1.35; }
.prose ul, .prose ol { margin: 14px 0 0; padding-left: 1.2em; max-width: 65ch; } .prose li + li { margin-top: 6px; }
.chk { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.chk li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; line-height: 1.5; } .chk svg { margin-top: 2px; width: 20px; height: 20px; color: var(--n12); }
.lead-l { font-size: 1.125rem; line-height: 1.6; color: var(--n11); max-width: 65ch; }
.callout { margin-top: 32px; padding: 20px; border: 1px solid var(--n6); border-radius: 6px; background: var(--paper); max-width: 80ch; } .callout b { display: block; margin-bottom: 4px; } .callout p { font-size: 1rem; color: var(--n11); }
.band.tint .callout { background: var(--n1); }
.kit-table th, .kit-table td { text-align: center; white-space: normal; padding-left: 8px; padding-right: 8px; } .kit-table th:first-child, .kit-table td:first-child { text-align: left; padding-left: 0; }
.kit-table svg { width: 20px; height: 20px; color: var(--n12); vertical-align: middle; } .kit-table .no { color: var(--n8); }
.kit-table tr.total td { font-weight: 700; }
.split-fig { margin: 0; } .split-fig img { display: block; width: 100%; height: auto; border-radius: 8px; } .split-fig figcaption { margin-top: 8px; }
.two-up { display: grid; gap: 28px; margin-top: 32px; } @media (min-width: 900px) { .two-up { grid-template-columns: 1fr 1fr; gap: 64px; } }
.figs { display: grid; gap: 28px; margin-top: 32px; } @media (min-width: 900px) { .figs.three { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.figs h3 { margin-top: 14px; } .figs p { margin-top: 6px; color: var(--n11); }
.figs .pic { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 8px; background: var(--n3); } .figs .pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cmp { display: grid; gap: 12px; margin-top: 28px; max-width: 640px; }
.cmp .row { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; } .cmp .row .bar { margin-top: 0; height: 26px; } .cmp .lab { font-size: .9375rem; font-weight: 600; }
.cmp .val { font-variant-numeric: tabular-nums; }
.cta-band { text-align: left; } .cta-band .cta { display: inline-flex; width: auto; padding: 0 28px; margin-top: 24px; }
.sources li { scroll-margin-top: 90px; }
.faq-tools { display: grid; gap: 12px; margin-top: 24px; max-width: 640px; }
.faq-group { margin-top: 56px; scroll-margin-top: 90px; } .faq-group h2 { font-size: 1.5rem; }
.faq-empty { margin-top: 24px; color: var(--n11); }

/* forms */
.field { display: grid; gap: 6px; margin-top: 18px; max-width: 560px; } .field label { font-weight: 600; } .field small { color: var(--n11); font-size: .8125rem; }
.field input, .field select, .field textarea { min-height: 48px; padding: 12px 14px; border: 1.5px solid var(--n6); border-radius: 6px; background: var(--paper); color: var(--n12); font: inherit; width: 100%; }
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--b9); outline-offset: 2px; border-color: var(--n12); }
.form-ok { margin-top: 20px; padding: 16px 18px; border: 1px solid var(--n6); border-radius: 6px; background: var(--paper); max-width: 560px; }
.form-ok[hidden] { display: none; }

/* policy pages: the text is an image (D-019) */
.policy-img { margin: 28px 0 0; max-width: 600px; } .policy-img img { display: block; width: 100%; height: auto; border: 1px solid var(--n5); background: #fff; }

/* founder in a bubble; the photo is a real one, supplied by Christopher */
.founder { display: grid; grid-template-columns: 88px 1fr; gap: 20px; align-items: start; margin-top: 40px; max-width: 760px; }
.founder .face { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; background: var(--n3); } .founder .face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.founder .face.tbd { display: grid; place-items: center; padding: 6px; text-align: center; font-size: .6875rem; line-height: 1.25; border-radius: 50%; }
.say { position: relative; padding: 18px 20px; border: 1px solid rgba(27, 42, 74, .22); border-radius: 12px; background: var(--paper); }
.say::before { content: ""; position: absolute; left: -8px; top: 32px; width: 14px; height: 14px; transform: rotate(45deg); background: var(--paper); border-left: 1px solid rgba(27, 42, 74, .22); border-bottom: 1px solid rgba(27, 42, 74, .22); }
.say b { display: block; margin-bottom: 6px; } .say .who span { margin-left: 6px; font-weight: 500; color: var(--n11); } .say .who span::before { content: "·"; margin-right: 6px; } .say p { font-size: 1rem; }
.expert { margin-top: 32px; }
.founder.compact { grid-template-columns: 64px 1fr; gap: 16px; margin-top: 28px; max-width: 460px; align-items: center; }
.founder.compact .face { width: 64px; height: 64px; }
.founder.compact .say { padding: 14px 16px; } .founder.compact .say::before { top: 50%; margin-top: -7px; }
.founder.compact .say b { margin-bottom: 4px; font-size: .8125rem; } .founder.compact .say p { font-size: .9375rem; line-height: 1.5; }
.founder.big { grid-template-columns: clamp(104px, 24vw, 176px) 1fr; gap: 28px; }
.founder.big .face { width: 100%; height: auto; aspect-ratio: 1 / 1; }
@media (max-width: 599px) { .founder.big { gap: 18px; } }

/* confirmation */
.confirm-mark { display: inline-block; margin-bottom: 18px; }

.cta.cta-inline { display: inline-flex; width: auto; padding-left: 28px; padding-right: 28px; }


/* =====================================================================
   Content pages, round 2: myths and facts, glossary, comparison table, the check, guide rows, night log
   ===================================================================== */
.myths { margin-top: 28px; }
.myths .m { display: grid; gap: 10px; padding: 20px 0; border-top: 1px solid var(--n6); } .myths .m:last-child { border-bottom: 1px solid var(--n6); }
.myths .m p { max-width: none; } .myths .m p:first-child { color: var(--n11); } .myths .m b { color: var(--n12); }
@media (min-width: 900px) { .myths .m { grid-template-columns: 1fr 1.5fr; gap: 56px; } }
.glossary { display: grid; max-width: 820px; margin: 28px 0 0; }
.glossary div { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid var(--n6); } .glossary div:last-child { border-bottom: 1px solid var(--n6); }
.glossary dt { font-weight: 700; } .glossary dd { margin: 0; color: var(--n11); }
@media (min-width: 720px) { .glossary div { grid-template-columns: 220px 1fr; gap: 24px; } }
.tablewrap { overflow-x: auto; margin-top: 8px; }
.cmp-table { min-width: 640px; margin-top: 20px; max-width: none; }
.cmp-table th, .cmp-table td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; white-space: normal; }
.cmp-table th:first-child, .cmp-table td:first-child { width: 20%; font-weight: 600; }
.cmp-table td:last-child, .cmp-table th:last-child { text-align: left; }
.log { max-width: none; } .log th, .log td { text-align: left; white-space: normal; padding-left: 10px; } .log td { height: 46px; border-top: 1px solid var(--n6); } .log td:first-child { width: 72px; font-weight: 700; }
.log td:last-child, .log th:last-child { text-align: left; }
.qgroup { margin: 0 0 40px; padding: 0; border: 0; } .qgroup legend { margin-bottom: 12px; padding: 0; font-size: 1.25rem; font-weight: 700; }
.choice { display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--n5); cursor: pointer; } .choices .choice:last-child { border-bottom: 1px solid var(--n5); }
.choice input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--n12); }
.result { margin-top: 32px; padding: 24px; border: 1.5px solid var(--n12); border-radius: 8px; background: var(--paper); } .result[hidden] { display: none; } .result h2 { font-size: 1.5rem; } .result p { margin-top: 10px; } .result ul { margin: 12px 0 0; padding-left: 1.2em; }
.rows { display: grid; }
.row-link { display: grid; grid-template-columns: 1fr 24px; gap: 4px 16px; align-items: center; padding: 22px 0; border-top: 1px solid var(--n6); color: var(--n12); text-decoration: none; } .row-link:last-child { border-bottom: 1px solid var(--n6); } .row-link:hover { background: var(--n3); color: var(--n12); }
.rl-t { grid-column: 1; font-size: 1.375rem; font-weight: 700; letter-spacing: -.015em; } .rl-s { grid-column: 1; max-width: 62ch; color: var(--n11); } .row-link svg { grid-column: 2; grid-row: 1 / span 2; }
@media print { .notice, .site-head, .foot, .scrim, .cart, .buybar, .back, [data-print], #cta, .toc-row { display: none !important; } body { background: #fff; } .band:not(.night) { padding: 16px 0; background: #fff !important; } .band.night { display: none !important; } }

/* no badges, seals or stamps: what used to be a stamp is plain bold text */
.stamp, .stamp.mini { border: 0; padding: 0; background: none; opacity: 1 !important; animation: none !important; font-size: inherit; }
.risk .stamp { display: none; }

/* the logo lockup replaces the text brand */
.brand { display: inline-flex; align-items: center; } .brand .logo { display: block; height: 30px; width: auto; }
.foot-brand .brand .logo { height: 34px; }

/* cart drawer: product photos, the bar toward the next kit, reassurance, payment methods */
.line { grid-template-columns: 72px 1fr auto; column-gap: 14px; }
.line-img { grid-column: 1; grid-row: 1 / span 2; width: 72px; height: 90px; object-fit: cover; border-radius: 6px; background: var(--n3); }
.line .line-t { grid-column: 2; } .line .line-p { grid-column: 3; } .line .qty { grid-column: 2; grid-row: 2; align-self: end; } .line .rm { grid-column: 3; grid-row: 2; align-self: end; }
.upbar { padding: 14px 20px 16px; border-bottom: 1px solid var(--n5); background: var(--n1); } .upbar[hidden] { display: none; }
.upsteps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.upsteps li { display: grid; gap: 6px; font-size: .75rem; font-weight: 600; color: var(--n11); } .upsteps li::before { content: ""; height: 4px; border-radius: 2px; background: var(--n5); }
.upsteps li.done { color: var(--n12); } .upsteps li.done::before { background: var(--n12); } .upsteps li.next::before { background: var(--b4); box-shadow: inset 0 0 0 1px var(--n12); }
.upmsg { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; } .upmsg p { font-size: .875rem; line-height: 1.4; } .upmsg b { color: var(--n12); }
.upbar .cta { flex: none; width: auto; min-height: 44px; margin: 0; padding: 0 16px; font-size: .875rem; }
.upmsg-done { margin-top: 12px; font-size: .875rem; color: var(--n11); }
.assure { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; } .assure li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: .875rem; line-height: 1.4; color: var(--n11); } .assure svg { width: 18px; height: 18px; margin-top: 1px; color: var(--n12); }
.assure-note { margin-top: 12px; }
.pay { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.pm { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 28px; padding: 0 8px; border: 1px solid var(--n6); border-radius: 4px; background: var(--paper); color: var(--n11); font: 800 .6875rem/1 var(--font); white-space: nowrap; }
.pm.visa { font-style: italic; letter-spacing: .02em; } .pm.mc i { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--n8); } .pm.mc i + i { margin-left: -5px; background: var(--n11); opacity: .85; }
.buy-pay { display: flex; justify-content: center; } .buy-pay .pay { justify-content: center; }
.foot .pay { margin-top: 0; } .foot-pay { margin-top: 24px; }

/* footer: payment marks stay a row (the footer's list rule made them full-width bars) */
.foot .pay { display: flex; }
/* cart drawer: one scroll for the whole panel; the header and the checkout stay in view */
.cart { overflow-y: auto; overscroll-behavior: contain; }
.cart-head { position: sticky; top: 0; z-index: 2; background: var(--paper); }
.cart-body { flex: 1 0 auto; overflow: visible; }
.cart-foot { position: sticky; bottom: 0; z-index: 2; background: var(--paper); }
.cart-foot .sums div { padding: 2px 0; } .cart-foot .cta { margin-top: 10px; }
.cart-body .assure { margin-top: 20px; }
/* plain list for the limits (no ticks in front of a limit) */
.lims { margin: 0; padding-left: 20px; display: grid; gap: 10px; line-height: 1.55; }

/* accessibility: form field borders reach 3:1 on white; focused thumbnails are not hidden under the fixed buy bar */
:root { --field: #868B94; }
.field input, .field select, .field textarea { border-color: var(--field); }
html { scroll-padding-bottom: 96px; }

/* landing v5: headline first, then the gallery; on desktop the gallery spans both rows beside them */
.hero-head > h1 { margin: 0; }
@media (min-width: 900px) {
  .hero-grid { grid-template-areas: "gal head" "gal buy"; grid-template-rows: auto 1fr; row-gap: 0; }
  .hero-head { grid-area: head; } .gallery { grid-area: gal; } .buybox { grid-area: buy; }
}
/* the line schema of the idea (carousel slide and How it works) */
.slide-air { background: #fff; } .slide-air > svg { display: block; width: 100%; height: 100%; }
.airway { display: block; width: 100%; height: auto; }
.nav-kits { font-weight: 700; }
/* the navy band, one per page (the landing's is the guarantee) */
:root { --night: #1B2A4A; --night-ink: #CBD6EB; --night-line: rgba(248, 247, 244, .24); }
.band.night { background-color: var(--night); color: #F8F7F4; }
.band.night h2, .band.night h3, .band.night b { color: #fff; }
.band.night p, .band.night li, .band.night .lede, .band.night .note, .band.night .d { color: var(--night-ink); }
.band.night a { color: #fff; } .band.night a:hover { color: var(--b4); }
.band.night :focus-visible { outline-color: #fff; }
.band.night .timeline li { border-top-color: var(--night-line); } .band.night .when { color: #fff; }
/* mobile: the headline now opens the page, so it gets room under the header */
@media (max-width: 899px) { .hero-head { padding-top: 28px; } }
/* the schema in the mechanism section */
.fig-air { margin: 32px 0 0; max-width: 460px; } .fig-air .note { margin-top: 10px; }

/* landing: two columns where the right half used to be empty */
.split.top { align-items: start; }
.split.evi { grid-template-areas: "h" "c" "n"; row-gap: 24px; }
.evi-h { grid-area: h; margin: 0; } .evi-c { grid-area: c; } .evi-n { grid-area: n; } .evi-n .note { margin-top: 0; max-width: 70ch; } .evi-n .link-row { margin-top: 20px; }
@media (min-width: 900px) { .split.evi { grid-template-areas: "h c" "n c"; grid-template-rows: auto 1fr; } .about.two { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; margin-top: 40px; } .about.two .authority { margin-top: 0; max-width: none; } }
#faq .split .lede { margin-top: 14px; } #faq .link-row { margin-top: 20px; }
/* the adjustment diagram names its two trays */
.dl { position: absolute; left: 0; font-size: .8125rem; font-weight: 600; color: var(--n11); line-height: 1.2; white-space: nowrap; } .dl.u { top: 9px; } .dl.l { top: 51px; }
/* source links [1] to [4] are big enough for a finger */
a[href*="#src"] { display: inline-block; min-width: 24px; min-height: 24px; padding: 4px 3px; margin: -4px -2px; text-align: center; line-height: 16px; }
#faq .split > .text { position: sticky; top: 104px; }
@media (max-width: 899px) { #faq .split > .text { position: static; } }

/* cart drawer: the payment badges sit right under the Checkout button, on one row */
.cart-foot .pay { margin-top: 12px; justify-content: center; flex-wrap: nowrap; gap: 4px; }
.cart-foot .pm { min-width: 0; padding: 0 6px; flex: 0 1 auto; }

/* cart drawer: the three promises as icons under Checkout */
.assure-row { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.assure-row li { display: grid; justify-items: center; align-content: start; gap: 4px; text-align: center; font-size: .75rem; font-weight: 600; line-height: 1.25; color: var(--n12); }
.assure-row .ic { width: 22px; height: 22px; color: var(--n12); }
.cart-foot .pay { margin-top: 12px; }

/* payment badges: the official icons (Shopify's own set, MIT, see img/pay/LICENSE.txt), not redrawn */
.pay li { display: block; line-height: 0; } .pay img { display: block; width: 42px; height: auto; }
.cart-foot .pay { gap: 5px; }
.assure-row { grid-template-columns: repeat(3, auto); justify-content: space-between; }

/* customer videos, vertical like reels, under the quick FAQ: a strip to swipe */
.reels-wrap { margin-top: 44px; }
.reels { list-style: none; display: flex; gap: 12px; margin: 16px 0 0; padding: 0 0 8px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; }
.reel { flex: 0 0 clamp(124px, 31%, 160px); scroll-snap-align: start; }
.reel .tbd { aspect-ratio: 9 / 16; display: grid; align-content: center; justify-items: center; text-align: center; padding: 10px; font-size: .75rem; line-height: 1.4; } .reel .tbd b { font-size: .75rem; }
.reel video, .reel > img { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 8px; background: var(--n4); }
.reel-cap { margin-top: 8px; font-size: .8125rem; line-height: 1.4; color: var(--n11); }
.reels-wrap .note { margin-top: 12px; }

/* the exploded image: each part gets its note, and the notes appear one after the other, the line drawing toward the part */
.xt { display: grid; gap: 1px; flex: 0 1 auto; max-width: calc(100% - 28px); } .xt b { font-weight: 700; } .xt i { font-style: normal; font-weight: 500; color: var(--n11); }
.xl::after { min-width: 20px; transform-origin: left center; }
.js .mech .xl { opacity: 0; } .js .mech .xl::after { transform: scaleX(0); }
.js .mech.on .xl { animation: xl-in 560ms var(--ease) both; animation-delay: calc(var(--i) * 700ms); }
.js .mech.on .xl::after { animation: xl-line 640ms var(--ease) both; animation-delay: calc(var(--i) * 700ms + 220ms); }
@keyframes xl-in { from { opacity: 0; transform: translate(-10px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
@keyframes xl-line { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .js .mech .xl { opacity: 1; animation: none !important; } .js .mech .xl::after { transform: none; animation: none !important; } }
/* the end of each line: a small dot on the part it names */
.xl::before { content: ""; order: 3; flex: none; width: 5px; height: 5px; margin-left: -1px; border-radius: 50%; background: var(--n12); }
.js .mech .xl::before { transform: scale(0); }
.js .mech.on .xl::before { animation: xl-dot 320ms var(--ease) both; animation-delay: calc(var(--i) * 700ms + 780ms); }
@keyframes xl-dot { to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .js .mech .xl::before { transform: none; animation: none !important; } }

/* cart: from The Hush the main offer is The Ritual; the brush alone is a quiet second choice */
.upalt { display: block; min-height: 44px; margin: 4px 0 -6px; padding: 8px 0 0; border: 0; background: none; color: var(--b11); font: 600 .875rem/1.3 var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; } .upalt:hover { color: var(--n12); }

/* empty cart: the three kits, ready to add */
.cart-empty { padding: 22px 0 0; text-align: left; } .cart-empty > b { display: block; font-size: 1.25rem; line-height: 1.3; }
.picks { list-style: none; margin: 8px 0 0; padding: 0; }
.pick { display: grid; grid-template-columns: 64px 1fr auto; gap: 4px 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--n5); }
.pick-img { display: block; width: 64px; height: 80px; object-fit: cover; border-radius: 6px; background: var(--n3); }
.pick-t b { display: block; } .pick-t small { display: block; margin-top: 2px; font-size: .8125rem; line-height: 1.4; color: var(--n11); }
.pick-r { display: grid; justify-items: end; gap: 8px; } .pick-p { font-weight: 700; }
.cart-empty .pick-add { display: inline-flex; width: auto; min-width: 64px; min-height: 44px; margin: 0; padding: 0 18px; font-size: .9375rem; }
.cart-empty .assure-row { margin-top: 22px; } .cart-empty .pay { justify-content: center; }

/* thème Shopify : message d'erreur du panier */
.cart-err { margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--n6); border-radius: 6px; background: #fff; color: #9D0610; font-size: .875rem; line-height: 1.4; }