/* clarivé brand system
   Layout: big flat colour fields (tangerine, ink, petal) stacked like light through a day;
   crisp rectangles hold content, circles and crescents carry the brand. */
@font-face { font-family: 'Archivo'; src: url('../fonts/archivo-var.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('../fonts/instrument-sans-var.woff2') format('woff2'); font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; }

:root {
  color-scheme: light;
  --tangerine: #FF5A1F;
  --flare: #FF7A2E;
  --sun: #FFC93C;
  --apricot: #FFB27A;
  --petal: #FF9EB5;
  --blush: #FFE6DA;
  --milk: #FFFAF6;
  --ink: #1E0B04;
  --ink-2: #3A1A0C;
  --ink-60: rgba(30, 11, 4, .62);
  --line: rgba(30, 11, 4, .14);
  --line-light: rgba(255, 250, 246, .18);

  --f-display: 'Archivo', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1520px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --ann: 34px;
  --hdr: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 110px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--milk); color: var(--ink);
  font-family: var(--f-body); font-size: 17px; line-height: 1.55; font-weight: 420;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 120; background: var(--tangerine); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--tangerine); color: var(--milk); }
:focus-visible { outline: 2px solid var(--tangerine); outline-offset: 3px; border-radius: 4px; }
[data-header-theme="sun"] :focus-visible, .menu :focus-visible { outline-color: var(--ink); }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 300; background: var(--ink); color: var(--milk); padding: 10px 16px; border-radius: 99px; }
.skip:focus { top: 16px; }

.wrap {
  width: 100%; max-width: var(--max); margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* ---------- type ---------- */
.d-xxl, .d-xl, .d-l, .d-m, .hero__h, .pdp__name, .ftr__h {
  font-family: var(--f-display); font-weight: 850; font-stretch: 118%;
  letter-spacing: -.045em; line-height: .88; text-wrap: balance;
}
.d-xxl { font-size: clamp(3.3rem, 10.5vw, 11.5rem); }
.d-xl { font-size: clamp(2.7rem, 7vw, 7.4rem); }
.d-l { font-size: clamp(2.1rem, 4.6vw, 4.6rem); line-height: .92; }
.d-m { font-size: clamp(1.55rem, 2.6vw, 2.5rem); line-height: .98; letter-spacing: -.035em; }
.lede { font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.5; max-width: 34em; }
.fine { font-size: 13px; color: var(--ink-60); }
.tag {
  font-family: var(--f-display); font-size: 12px; font-weight: 640; font-stretch: 108%;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1.2;
}
.tag--light { color: rgba(255, 250, 246, .7); }
.pill {
  display: inline-flex; align-items: center; gap: .4em; height: 26px; padding: 0 11px; border-radius: 99px;
  font-family: var(--f-display); font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.pill--ink { background: var(--ink); color: var(--milk); }
.pill--orange { background: var(--tangerine); color: var(--milk); }
.pill--soft { background: rgba(30, 11, 4, .07); color: var(--ink-60); font-size: 10px; height: 22px; }
.link-arrow { display: inline-flex; gap: .5em; align-items: center; font-weight: 600; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }
.link-arrow span { transition: transform .4s var(--ease); }
.link-arrow:hover span { transform: translateX(5px); }

/* ---------- buttons: pill; hover changes colour and grows slightly ---------- */
.btn {
  --bg: var(--ink); --fg: var(--milk); --dot: var(--tangerine);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 56px; padding: 0 26px 0 28px; border-radius: 99px; background: var(--bg); color: var(--fg);
  font-family: var(--f-display); font-weight: 680; font-stretch: 110%; font-size: 15.5px; letter-spacing: -.01em;
  overflow: hidden; isolation: isolate; white-space: nowrap; transition: transform .25s ease, background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.btn::before { content: none; }
.btn__t { position: relative; display: inline-block; overflow: hidden; line-height: 1.3; vertical-align: top; }
.btn__t > span { position: relative; display: block; transition: transform .55s var(--ease-io); }
.btn__t > span::after { content: none; }
.btn__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dot); transition: background-color .25s ease; }
.btn:hover, .btn:focus-visible { background: var(--dot); transform: scale(1.03); }

.btn:hover .btn__dot, .btn:focus-visible .btn__dot { background: var(--fg); }
.btn--orange { --bg: var(--tangerine); --dot: var(--ink); }
.btn--ghost { --bg: transparent; --fg: var(--ink); --dot: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--ghost:hover { --fg: var(--milk); }
.btn--line { --bg: transparent; --fg: var(--ink); --dot: var(--tangerine); box-shadow: inset 0 0 0 1.5px var(--line); height: 48px; font-size: 14.5px; }
.btn--line:hover { --fg: var(--milk); }
.btn--wide { width: 100%; }

/* ---------- announce + header ---------- */
.announce {
  position: fixed; inset: 0 0 auto; top: env(safe-area-inset-top, 0px); z-index: 90; height: var(--ann);
  background: var(--ink); color: var(--milk); font-size: 13px; overflow: hidden; transition: transform .5s var(--ease-io);
}
.announce__track { position: relative; height: 100%; }
.announce p { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding-inline: 16px; opacity: 0; transform: translateY(100%); transition: opacity .6s, transform .8s var(--ease); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.announce p.is-on { opacity: 1; transform: none; }
.announce p.is-out { opacity: 0; transform: translateY(-100%); }
.announce p:first-child { opacity: 1; transform: none; }
.js .announce p:first-child:not(.is-on) { opacity: 0; transform: translateY(100%); }
.js .announce p:first-child.is-out { transform: translateY(-100%); }
.announce a { color: var(--apricot); text-decoration: underline; text-underline-offset: 3px; margin-left: .3em; }

.hdr {
  position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + var(--ann)); z-index: 80;
  color: var(--ink); transition: transform .6s var(--ease-io), top .5s var(--ease-io);
}
[data-theme-page="ink"] .hdr:not(.is-solid) { color: var(--milk); }
[data-theme-page="ink"] .hdr:not(.is-solid) .btn { --bg: var(--tangerine); --dot: var(--milk); }
.hdr__in { display: flex; align-items: center; gap: 24px; height: var(--hdr); position: relative; }
.hdr__in::before {
  content: ""; position: absolute; z-index: -1; inset: 10px max(10px, calc(var(--gutter) - 18px));
  background: rgba(255, 250, 246, .86); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-radius: 99px; box-shadow: 0 10px 40px -18px rgba(30, 11, 4, .35);
  opacity: 0; transform: scaleX(.96); transition: opacity .5s, transform .6s var(--ease);
}
.hdr.is-solid .hdr__in::before { opacity: 1; transform: none; }
.hdr.is-scrolled { top: env(safe-area-inset-top, 0px); }
.hdr.is-hidden { transform: translateY(-120%); }
.is-scrolled-page .announce { transform: translateY(-100%); }
.hdr__logo { flex: none; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: inherit; }
.logo__mark { display: block; width: 32px; aspect-ratio: 290 / 317; background: currentColor; -webkit-mask: url('../img/mark.svg') center / contain no-repeat; mask: url('../img/mark.svg') center / contain no-repeat; transition: transform .8s var(--ease); }
.logo__word { display: block; width: 98px; aspect-ratio: 700 / 155; background: currentColor; -webkit-mask: url('../img/wordmark.svg') center / contain no-repeat; mask: url('../img/wordmark.svg') center / contain no-repeat; }
.hdr__logo:hover .logo__mark { transform: rotate(-18deg); }
.hdr__nav { margin-inline: auto; }
.hdr__nav ul { display: flex; gap: 6px; }
.hdr__nav a { position: relative; display: block; padding: 10px 14px; font-family: var(--f-display); font-weight: 620; font-stretch: 108%; font-size: 15px; letter-spacing: -.01em; }
.roll { display: block; overflow: hidden; line-height: 1.3; }
.roll > span { position: relative; display: block; transition: transform .5s var(--ease-io); }
.roll > span::after { content: attr(data-t); position: absolute; left: 0; top: 100%; }
.hdr__nav a:hover .roll > span, .hdr__nav a:focus-visible .roll > span { transform: translateY(-100%); }
.hdr__nav a[aria-current]::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--tangerine); }
.hdr__act { display: flex; align-items: center; gap: 10px; }
.hdr__act .btn { height: 46px; font-size: 14.5px; padding: 0 20px 0 22px; }
.hdr__bag { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border-radius: 99px; font-family: var(--f-display); font-weight: 620; font-size: 15px; }
.bag-count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 99px; background: var(--ink); color: var(--milk); font-size: 12px; font-variant-numeric: tabular-nums; transition: transform .5s var(--ease); }
.bag-count.is-bump { animation: bump .6s var(--ease); }
@keyframes bump { 40% { transform: scale(1.45); } }
.hdr__burger { display: none; width: 46px; height: 46px; border-radius: 50%; background: var(--ink); position: relative; }
.hdr__burger span { position: absolute; left: 14px; right: 14px; height: 2px; background: var(--milk); transition: transform .5s var(--ease-io); }
.hdr__burger span:first-child { top: 19px; } .hdr__burger span:last-child { top: 25px; }
.menu-open .hdr__burger span:first-child { transform: translateY(3px) rotate(45deg); }
.menu-open .hdr__burger span:last-child { transform: translateY(-3px) rotate(-45deg); }

/* mega menu */
.mega {
  position: absolute; left: 0; right: 0; top: calc(var(--hdr) - 6px); padding-top: 6px;
  visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .35s, transform .5s var(--ease), visibility 0s .5s;
}
.mega__in { display: grid; grid-template-columns: 1fr 1fr 1fr 1.3fr; gap: 32px; position: relative; padding-block: 36px; }
.mega__in::before { content: ""; position: absolute; inset: 0 max(10px, calc(var(--gutter) - 18px)); z-index: -1; background: var(--milk); border-radius: 28px; box-shadow: 0 30px 80px -30px rgba(30, 11, 4, .4); }
.mega__col { padding-left: 24px; }
.mega__col ul { display: grid; gap: 6px; margin-top: 14px; }
.mega__col a { font-family: var(--f-display); font-weight: 700; font-stretch: 112%; font-size: 21px; letter-spacing: -.03em; transition: color .3s, padding .4s var(--ease); }
.mega__col a:hover { color: var(--tangerine); padding-left: 6px; }
.mega__feat { display: grid; grid-template-columns: 140px 1fr; gap: 18px; align-items: center; margin-right: 24px; color: var(--ink); }
.mega__stage { display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: 6px; }
.mega__stage svg { width: 82%; transition: transform .7s var(--ease); }
.mega__feat:hover .mega__stage svg { transform: translateY(-6px) rotate(-3deg); }
.mega__cap { display: grid; gap: 4px; }
.mega__cap b { font-family: var(--f-display); font-stretch: 118%; font-size: 30px; letter-spacing: -.04em; line-height: 1; }
.mega__cap span:last-child { color: var(--ink-60); font-size: 14px; }
.hdr.mega-open .mega { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.hdr.mega-open { color: var(--ink); }
.hdr.mega-open .hdr__in::before { opacity: 1; transform: none; }

/* mobile menu */
.menu { position: fixed; inset: 0; z-index: 70; background: var(--tangerine); color: var(--ink); visibility: hidden; clip-path: circle(0 at calc(100% - 50px) 70px); transition: clip-path .9s var(--ease-io), visibility 0s .9s; }
.menu-open .menu { visibility: visible; clip-path: circle(150% at calc(100% - 50px) 70px); transition-delay: 0s; }
.menu__in { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 40px; padding-top: calc(var(--hdr) + 40px); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 32px); }
.menu__links { display: grid; gap: 4px; }
.menu__links a { display: flex; align-items: baseline; gap: 14px; font-family: var(--f-display); font-weight: 850; font-stretch: 120%; letter-spacing: -.05em; font-size: clamp(2.3rem, 10vw, 4rem); line-height: 1; opacity: 0; transform: translateY(40px); transition: opacity .5s, transform .8s var(--ease); }
.menu-open .menu__links a { opacity: 1; transform: none; transition-delay: calc(.25s + var(--i) * .05s); }
.menu__n { font-size: 12px; font-weight: 600; letter-spacing: .1em; font-stretch: 100%; opacity: .6; }
.menu__foot { font-size: 14px; opacity: .8; }
.menu-open { overflow: hidden; }
.menu-open .hdr { color: var(--ink); }
.menu-open .hdr .hdr__in::before { opacity: 0; }

/* ---------- page transition veil ---------- */
.veil { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; background: var(--tangerine); pointer-events: none; }
.js .veil { display: grid; animation: veilSafety .8s var(--ease-io) 2.4s forwards; }
.veil.is-js { animation: none; }
@keyframes veilSafety { to { clip-path: inset(0 0 100% 0); } }
.veil__mark { width: 64px; aspect-ratio: 290 / 317; background: var(--milk); -webkit-mask: url('../img/mark.svg') center / contain no-repeat; mask: url('../img/mark.svg') center / contain no-repeat; }
.veil.is-intro .veil__mark { width: 110px; }


/* ---------- reveal system ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-split] { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.js [data-split].is-in { opacity: 1; transform: none; }

/* ---------- marquee ---------- */
.mq { overflow: hidden; padding-block: 22px; }
.mq--ink { background: var(--ink); color: var(--tangerine); }
.mq__track { display: flex; width: max-content; will-change: transform; }
.mq__row { display: flex; align-items: center; gap: 36px; padding-right: 36px; }
.mq__row span { font-family: var(--f-display); font-weight: 820; font-stretch: 122%; font-size: clamp(1.6rem, 3.2vw, 3rem); letter-spacing: -.04em; white-space: nowrap; }
.mq__mark { display: block; width: 28px; aspect-ratio: 290 / 317; background: var(--milk); -webkit-mask: url('../img/mark.svg') center / contain no-repeat; mask: url('../img/mark.svg') center / contain no-repeat; flex: none; }

/* ---------- shared stages ---------- */
.stage--sun { background: radial-gradient(circle at 50% 58%, #FFC9A6 0 34%, transparent 34.5%), #FFE6D6; }
.stage--petal { background: radial-gradient(circle at 50% 58%, #FFC2D0 0 34%, transparent 34.5%), #FFE9EE; }
.stage--ink { background: radial-gradient(circle at 50% 58%, #FF5A1F 0 34%, transparent 34.5%), #2A1208; }
.phase { display: inline-block; width: 26px; height: 26px; border-radius: 50%; border: 2px solid currentColor; flex: none; }
.phase--half { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.phase--full { background: currentColor; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--tangerine); color: var(--ink); padding-top: calc(var(--ann) + var(--hdr) + clamp(36px, 7vh, 90px)); padding-bottom: clamp(40px, 6vw, 80px); min-height: min(100svh, 980px); display: flex; flex-direction: column; isolation: isolate; }
.hero__sun { position: absolute; z-index: -1; right: -14vw; top: 6%; width: min(80vw, 1100px); opacity: .9; }
.hero__sun svg { width: 100%; }
@keyframes spin { to { transform: rotate(360deg); } }
.hero__in { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; }
.hero__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-weight: 520; font-size: 15px; margin-bottom: clamp(20px, 3vw, 40px); }
.hero__h { font-size: clamp(3.4rem, 10.6vw, 11.8rem); line-height: .84; max-width: 9.5ch; text-wrap: initial; }
.hero__h .ln { display: block; white-space: nowrap; }
.hero__h .w { display: inline-block; }
.js .hero__h .w { opacity: 0; transform: translateY(.28em); transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(.1s + var(--wi) * .05s); }
.js .hero__h.is-in .w { opacity: 1; transform: none; }
.hero__foot { margin-top: auto; padding-top: clamp(28px, 4vw, 48px); display: grid; gap: 22px; max-width: 560px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__products { position: absolute; z-index: 1; right: max(2vw, var(--gutter)); bottom: clamp(30px, 6vh, 80px); width: min(46vw, 700px); height: min(70vh, 640px); pointer-events: none; }
.hero__p { position: absolute; bottom: 0; filter: drop-shadow(0 24px 30px rgba(30, 11, 4, .22)); }
.hero__p svg { width: 100%; }
.hero__p--c { left: 31%; width: 40%; z-index: 2; }
.hero__p--l { left: 6%; width: 36%; bottom: 0; }
.hero__p--r { left: 60%; width: 34%; bottom: 0; z-index: 1; }
.hero__products::after { content: ""; position: absolute; z-index: -1; left: 4%; right: 4%; bottom: -2%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(30, 11, 4, .22), transparent); }
.hero__photo { position: absolute; z-index: 1; right: 0; bottom: 0; width: min(48vw, 760px); height: calc(100% - var(--ann) - var(--hdr) - 120px); display: flex; align-items: flex-end; justify-content: flex-end; pointer-events: none; }
.hero__photo img { height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: right bottom; filter: drop-shadow(0 30px 50px rgba(30, 11, 4, .22)); }
.js .hero__photo { opacity: 0; translate: 0 40px; transition: opacity 1.2s .4s, translate 1.6s var(--ease) .4s; }
.js .hero.is-ready .hero__photo { opacity: 1; translate: 0 0; }
.js .hero__p { opacity: 0; translate: 0 80px; transition: opacity 1.2s, translate 1.6s var(--ease); }
.js .hero.is-ready .hero__p { opacity: 1; translate: 0 0; }
.hero.is-ready .hero__p--l { transition-delay: .55s; } .hero.is-ready .hero__p--c { transition-delay: .4s; } .hero.is-ready .hero__p--r { transition-delay: .7s; }
.hero__count { position: absolute; right: var(--gutter); top: calc(var(--ann) + var(--hdr) + 28px); z-index: 2; font-size: 14px; text-align: right; max-width: 12em; line-height: 1.3; }
.hero__count b { display: block; font-family: var(--f-display); font-stretch: 120%; font-size: 40px; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }

/* ---------- manifesto ---------- */
.manifesto { position: relative; padding-block: clamp(90px, 14vw, 200px); display: grid; gap: 48px; }
.manifesto__t { font-family: var(--f-display); font-weight: 760; font-stretch: 112%; letter-spacing: -.035em; line-height: 1.04; font-size: clamp(1.9rem, 4.1vw, 4.1rem); max-width: 22ch; text-wrap: pretty; }
.manifesto__mark { position: absolute; right: var(--gutter); top: clamp(60px, 9vw, 130px); width: clamp(70px, 9vw, 140px); aspect-ratio: 290 / 317; background: var(--tangerine); -webkit-mask: url('../img/mark.svg') center / contain no-repeat; mask: url('../img/mark.svg') center / contain no-repeat; }
.manifesto__sig { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }

/* ---------- section heads ---------- */
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; margin-bottom: clamp(32px, 5vw, 64px); }
.sec-head__p { max-width: 26em; color: var(--ink-60); }
.sec-head--light .sec-head__p { color: rgba(255, 250, 246, .7); }


/* ---------- product card ---------- */
.pcard { position: relative; min-width: 0; }
.pcard__link { display: grid; gap: 16px; }
.pcard__stage { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; display: grid; place-items: center; isolation: isolate; }
.pcard__stage.stage--sun, .pcard__stage.stage--petal, .pcard__stage.stage--ink { background-image: none; }
.pcard__stage.stage--sun { background-color: #FFE6D6; } .pcard__stage.stage--petal { background-color: #FFE9EE; } .pcard__stage.stage--ink { background-color: #2A1208; }
.pcard__sun { position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; border-radius: 50%; top: 22%; background: #FFC9A6; transition: transform 1s var(--ease), background-color .6s; }
.stage--petal .pcard__sun { background: #FFC2D0; } .stage--ink .pcard__sun { background: var(--tangerine); }
.pcard__render { width: 74%; transition: transform .9s var(--ease), opacity .5s; }
.pcard__alt { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; opacity: 0; transform: scale(1.06); transition: opacity .6s, transform 1s var(--ease); font-family: var(--f-display); font-weight: 650; font-size: 14px; }
.stage--ink .pcard__alt { color: var(--milk); }
.pcard__alt svg { width: 78%; }
.pcard__link:hover .pcard__sun { transform: scale(1.5) translateY(6%); }
.pcard__link:hover .pcard__render { transform: translateY(-4%) scale(.94); opacity: 0; }
.pcard__link:hover .pcard__alt { opacity: 1; transform: none; }
.pcard__flag { position: absolute; left: 14px; top: 14px; z-index: 2; font-family: var(--f-display); font-size: 11px; font-weight: 680; letter-spacing: .08em; text-transform: uppercase; background: var(--milk); color: var(--ink); padding: 6px 10px; border-radius: 99px; }
.pcard__flag--new { background: var(--ink); color: var(--milk); }
.stage--ink .pcard__flag--new { background: var(--tangerine); }
.pcard__meta { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline; }
.pcard__name { font-family: var(--f-display); font-weight: 840; font-stretch: 120%; letter-spacing: -.045em; font-size: 28px; line-height: 1; }
.pcard__price { font-family: var(--f-display); font-weight: 650; font-size: 17px; font-variant-numeric: tabular-nums; }
.pcard__type { grid-column: 1 / -1; color: var(--ink-60); font-size: 14.5px; }
.pcard__tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pcard__tags span { font-size: 12px; padding: 3px 9px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line); }
.pcard__add { position: absolute; right: 12px; top: calc((100% - 0px) * 0); margin-top: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 0; height: 44px; padding: 0 12px; border-radius: 99px; background: var(--ink); color: var(--milk); font-family: var(--f-display); font-weight: 680; font-size: 14px; overflow: hidden; transition: gap .5s var(--ease), background-color .3s; }
.pcard__add span { max-width: 0; overflow: hidden; transition: max-width .6s var(--ease); white-space: nowrap; }
.pcard__add svg { width: 20px; height: 20px; transition: transform .6s var(--ease); }
.pcard:hover .pcard__add, .pcard__add:focus-visible { gap: 8px; }
.pcard:hover .pcard__add span, .pcard__add:focus-visible span { max-width: 80px; }
.pcard__add:hover { background: var(--tangerine); }
.pcard__add:hover svg { transform: rotate(90deg); }

/* ---------- horizontal collection ---------- */
.bestlook__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); }
.pillar { display: grid; gap: 14px; align-content: start; border-top: 2px solid var(--ink); padding-top: 22px; }
.pillar h3 { font-family: var(--f-display); font-weight: 800; font-stretch: 116%; font-size: clamp(1.4rem, 2vw, 1.9rem); letter-spacing: -.035em; line-height: 1; }
.pillar p { max-width: 30em; }

/* ---------- ingredients tabs ---------- */
.ingr { background: var(--ink); color: var(--milk); padding-block: clamp(80px, 10vw, 150px); }
.ingr__in { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 6vw, 100px); align-items: center; }
.ingr__list ul { margin-top: 26px; display: grid; }
.ingr__list button { width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 10px 0; text-align: left; border-bottom: 1px solid var(--line-light); color: rgba(255, 250, 246, .32); transition: color .4s; }
.ingr__n { font-family: var(--f-display); font-weight: 830; font-stretch: 118%; font-size: clamp(1.9rem, 4.2vw, 4.2rem); letter-spacing: -.05em; line-height: 1; transition: font-stretch .7s var(--ease), letter-spacing .7s var(--ease); }
.ingr__pct { font-family: var(--f-display); font-weight: 600; font-size: 15px; white-space: nowrap; }
.ingr__list button[aria-selected="true"], .ingr__list button:hover { color: var(--milk); }
.ingr__list button[aria-selected="true"] .ingr__n { font-stretch: 125%; color: var(--tangerine); }
.ingr__panel { position: relative; display: grid; gap: 28px; align-content: start; }
.ingr__card { grid-area: 1 / 1; display: grid; gap: 14px; opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity .6s, transform .9s var(--ease), visibility 0s .6s; }
.ingr__card.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ingr__panel .link-arrow { grid-area: 2 / 1; justify-self: start; color: var(--apricot); }
.ingr__swatch { aspect-ratio: 4 / 3; background: var(--ink-2); border-radius: 4px; display: grid; place-items: center; overflow: hidden; }
.ingr__swatch svg { width: 90%; }
.ingr__card.is-on .ingr__swatch svg { animation: swatchIn 1.2s var(--ease); }
@keyframes swatchIn { from { transform: scale(.7) rotate(-10deg); opacity: 0; } }
.ingr__role { font-family: var(--f-display); font-weight: 820; font-stretch: 120%; font-size: 30px; letter-spacing: -.04em; color: var(--apricot); }
.ingr__note { color: rgba(255, 250, 246, .78); max-width: 32em; }

/* ---------- quiz CTA ---------- */
.quizcta { padding-block: clamp(80px, 10vw, 140px); }
.quizcta__card { position: relative; overflow: hidden; background: var(--petal); border-radius: 4px; padding: clamp(32px, 6vw, 90px); min-height: 520px; display: flex; align-items: center; isolation: isolate; }
.quizcta__mark { position: absolute; z-index: -1; right: -4%; top: -10%; width: min(52%, 560px); aspect-ratio: 290 / 317; background: var(--tangerine); -webkit-mask: url('../img/mark.svg') center / contain no-repeat; mask: url('../img/mark.svg') center / contain no-repeat; }
.quizcta__copy { display: grid; gap: 22px; justify-items: start; max-width: 600px; }

/* ---------- proof ---------- */
.proof { padding-bottom: clamp(80px, 10vw, 140px); display: grid; gap: 36px; }
.proof__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.stat { border-top: 2px solid var(--ink); padding-top: 18px; display: grid; gap: 10px; align-content: start; }
.stat__n { display: flex; align-items: flex-start; color: var(--tangerine); font-family: var(--f-display); font-weight: 860; font-stretch: 120%; letter-spacing: -.06em; line-height: .85; font-size: clamp(4rem, 9vw, 9rem); font-variant-numeric: tabular-nums; }
.stat__n span { font-size: .4em; margin-top: .1em; }
.quotes { position: relative; display: grid; margin-top: 30px; background: var(--blush); border-radius: 4px; padding: clamp(28px, 5vw, 70px); }
.quote { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateX(30px); transition: opacity .6s, transform .9s var(--ease), visibility 0s .6s; display: grid; gap: 22px; }
.quote.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.quote p { font-family: var(--f-display); font-weight: 740; font-stretch: 110%; font-size: clamp(1.5rem, 3vw, 2.8rem); letter-spacing: -.035em; line-height: 1.08; max-width: 26ch; }
.quote p::before { content: "“"; color: var(--tangerine); }
.quote figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; }
.quotes__nav { grid-area: 2 / 1; display: flex; align-items: center; gap: 16px; margin-top: 32px; font-variant-numeric: tabular-nums; font-size: 14px; }
.quotes__nav button { width: 48px; height: 48px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink); font-size: 18px; transition: background-color .3s, color .3s; }
.quotes__nav button:hover { background: var(--ink); color: var(--milk); }

/* ---------- article cards ---------- */
.jteaser { padding-bottom: clamp(80px, 10vw, 140px); }
.jteaser__grid, .jlist__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 32px); }
.acard a { display: grid; gap: 14px; }
.acard__img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; }
.acard__img svg { width: 100%; height: 100%; transition: transform 1.2s var(--ease); }
.acard a:hover .acard__img svg { transform: scale(1.06) rotate(-1deg); }
.acard__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--ink-60); align-items: center; }
.acard__meta .tag { color: var(--tangerine); }
.acard__t { font-family: var(--f-display); font-weight: 800; font-stretch: 114%; letter-spacing: -.035em; font-size: clamp(1.4rem, 2vw, 1.85rem); line-height: 1.02; text-wrap: balance; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .6s var(--ease); justify-self: start; }
.acard a:hover .acard__t { background-size: 100% 2px; }
.acard__d { color: var(--ink-60); font-size: 15.5px; max-width: 34em; }

/* ---------- waitlist band + countdown ---------- */
.band--wait { background: var(--tangerine); padding-block: clamp(80px, 10vw, 140px); position: relative; overflow: hidden; }

.band__in { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 6vw, 90px); align-items: end; }
.band__copy { display: grid; gap: 24px; }
.band__side { display: grid; gap: 18px; }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.countdown div { display: grid; gap: 4px; padding: 16px 14px; background: rgba(255, 250, 246, .18); border-radius: 4px; }
.countdown b { font-family: var(--f-display); font-weight: 820; font-stretch: 114%; font-size: clamp(2rem, 3.4vw, 3rem); letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.countdown span { font-size: 12.5px; }
.countdown--card div { background: var(--blush); }

/* ---------- forms ---------- */
.inline-form { display: flex; gap: 8px; padding: 6px; border-radius: 99px; background: rgba(255, 250, 246, .1); box-shadow: inset 0 0 0 1.5px var(--line-light); max-width: 520px; }
.inline-form input { flex: 1; min-width: 0; background: none; border: 0; padding: 0 18px; height: 52px; outline: none; }
.inline-form input::placeholder { color: inherit; opacity: .55; }
.inline-form--light { background: var(--milk); box-shadow: none; color: var(--ink); }
.inline-form--light .btn { height: 52px; }
.inline-form__go { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--tangerine); color: var(--milk); display: grid; place-items: center; transition: transform .5s var(--ease), background-color .3s; }
.inline-form__go svg { width: 22px; }
.inline-form__go:hover { transform: rotate(-45deg); background: var(--milk); color: var(--ink); }
.inline-form--light .inline-form__go:hover { background: var(--ink); color: var(--milk); }
.inline-form.is-error { box-shadow: inset 0 0 0 2px var(--ink); animation: shake .5s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field label, .field legend { font-family: var(--f-display); font-size: 13px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; padding: 0; }
.field input, .field select, .field textarea { width: 100%; padding: 15px 18px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--milk); outline: none; transition: border-color .3s, box-shadow .3s; }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--tangerine); box-shadow: 0 0 0 4px rgba(255, 90, 31, .18); }
.field.is-error input, .field.is-error textarea { border-color: #C2180B; }
.form--dark .field input, .form--dark .field select, .form--dark .field textarea { background: rgba(255, 250, 246, .06); border-color: var(--line-light); color: var(--milk); }
.form--dark .field select option { color: var(--ink); }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label { cursor: pointer; }
.seg input, .opt input, .sizes input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: inline-block; padding: 9px 15px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px var(--line); font-size: 14.5px; transition: background-color .3s, color .3s, box-shadow .3s; }
.seg input:checked + span { background: var(--ink); color: var(--milk); box-shadow: none; }
.seg input:focus-visible + span { outline: 2px solid var(--tangerine); outline-offset: 2px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--ink-60); cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--tangerine); flex: none; margin-top: 1px; }

/* ---------- footer ---------- */
.ftr { background: var(--ink); color: var(--milk); padding-top: clamp(70px, 9vw, 130px); overflow: hidden; }
.ftr__top { display: grid; grid-template-columns: 1.1fr 1.4fr; gap: clamp(40px, 6vw, 100px); }
.ftr__news { display: grid; gap: 20px; align-content: start; }
.ftr__h { font-size: clamp(2.4rem, 4.6vw, 4.4rem); }
.ftr__news > p { color: rgba(255, 250, 246, .7); max-width: 30em; }
.ftr__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ftr__cols .tag { color: var(--tangerine); margin-bottom: 14px; }
.ftr__cols ul { display: grid; gap: 8px; }
.ftr__cols a { color: rgba(255, 250, 246, .8); transition: color .3s; font-size: 15.5px; }
.ftr__cols a:hover { color: var(--milk); }
.ftr__mark { padding-block: clamp(50px, 7vw, 100px) 0; }
.ftr__word { display: block; width: 100%; aspect-ratio: 700 / 155; background: var(--tangerine); -webkit-mask: url('../img/wordmark.svg') center / contain no-repeat; mask: url('../img/wordmark.svg') center / contain no-repeat; }
.ftr__bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-block: 28px calc(28px + env(safe-area-inset-bottom, 0px)); font-size: 13px; color: rgba(255, 250, 246, .6); }
.ftr__bot a:hover { color: var(--milk); }

/* ---------- bag drawer ---------- */
.bag { position: fixed; inset: 0; z-index: 160; visibility: hidden; transition: visibility 0s .8s; }
.bag.is-open { visibility: visible; transition-delay: 0s; }
.bag__scrim { position: absolute; inset: 0; background: rgba(30, 11, 4, .45); opacity: 0; transition: opacity .6s; }
.bag.is-open .bag__scrim { opacity: 1; }
.bag__panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(480px, 100%); background: var(--milk); display: flex; flex-direction: column; padding: calc(24px + env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) 24px; transform: translateX(100%); transition: transform .8s var(--ease-io); }
.bag.is-open .bag__panel { transform: none; }
.bag__head { display: flex; justify-content: space-between; align-items: center; }
.bag__head h2 { font-family: var(--f-display); font-weight: 830; font-stretch: 118%; font-size: 30px; letter-spacing: -.04em; }
.bag__x { font-weight: 600; border-bottom: 1.5px solid; }
.bag__progress { margin-block: 18px; padding: 14px 16px; background: var(--blush); border-radius: 12px; font-size: 14px; display: grid; gap: 10px; }
.bar { display: block; height: 4px; background: rgba(30, 11, 4, .1); border-radius: 4px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--tangerine); transition: width .8s var(--ease); }
.bag__list { flex: 1; overflow-y: auto; display: grid; align-content: start; gap: 12px; overscroll-behavior: contain; }
.bag__item { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); animation: itemIn .6s var(--ease); }
@keyframes itemIn { from { opacity: 0; transform: translateX(20px); } }
.bag__thumb { aspect-ratio: 1; border-radius: 4px; display: grid; place-items: center; }
.bag__thumb svg { width: 70%; }
.bag__item b { font-family: var(--f-display); font-stretch: 116%; font-size: 19px; letter-spacing: -.03em; }
.bag__item p { font-size: 13px; color: var(--ink-60); }
.bag__q { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 14px; }
.bag__q button { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); }
.bag__rm { font-size: 13px; color: var(--ink-60); text-decoration: underline; }
.bag__empty { flex: 1; display: grid; align-content: center; justify-items: center; gap: 18px; text-align: center; }
.bag__foot { display: grid; gap: 10px; padding-top: 16px; border-top: 1.5px solid var(--ink); }
.bag__row { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.bag__row--save { color: var(--tangerine); }
.bag__note { font-size: 13px; color: var(--ink-60); margin-bottom: 6px; }
.bag-open { overflow: hidden; }

/* toast */
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 170; transform: translate(-50%, calc(100% + 60px)); visibility: hidden; background: var(--ink); color: var(--milk); padding: 14px 22px; border-radius: 99px; font-weight: 550; font-size: 15px; transition: transform .7s var(--ease), visibility 0s .7s; max-width: calc(100% - 32px); display: flex; gap: 10px; align-items: center; }
.toast::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--tangerine); flex: none; }
.toast.is-on { transform: translate(-50%, 0); visibility: visible; transition-delay: 0s; }

/* ---------- page heads ---------- */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; margin-bottom: clamp(20px, 3vw, 36px); }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: 6px; opacity: .45; }
.crumbs a { opacity: .7; transition: opacity .3s; }
.crumbs a:hover { opacity: 1; }
.phead { position: relative; overflow: hidden; padding-top: calc(var(--ann) + var(--hdr) + clamp(30px, 5vw, 70px)); padding-bottom: clamp(50px, 7vw, 100px); isolation: isolate; }
.phead--shop, .phead--help { background: var(--tangerine); }
.phead--sci { background: var(--ink); color: var(--milk); padding-bottom: clamp(70px, 10vw, 150px); }
.phead--about { background: var(--petal); padding-bottom: clamp(70px, 10vw, 150px); }
.phead__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 40px; }
.phead__count { font-size: 15px; }
.phead__count b { font-family: var(--f-display); font-size: 22px; }
.phead__cres { position: absolute; z-index: -1; width: min(60vw, 720px); right: -14vw; top: -30%; opacity: .85; animation: spin 120s linear infinite; }
.phead__big { max-width: 11ch; }
.phead__lede { margin-top: clamp(24px, 3vw, 40px); color: rgba(255, 250, 246, .8); }

/* ---------- shop ---------- */
.shop { padding-block: 28px clamp(80px, 10vw, 140px); }
.shop__bar { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 84px); z-index: 20; display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 12px 0; margin-bottom: 26px; background: linear-gradient(var(--milk) 75%, transparent); transition: top .6s var(--ease-io); }
.hdr-hidden .shop__bar { top: env(safe-area-inset-top, 0px); }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; padding: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: 9px 16px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px var(--line); font-size: 14.5px; font-weight: 520; transition: background-color .35s, color .35s, box-shadow .35s; white-space: nowrap; }
.chip:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.chip.is-on { background: var(--ink); color: var(--milk); box-shadow: none; }
.sort select { appearance: none; padding: 10px 40px 10px 16px; border-radius: 99px; border: 1.5px solid var(--line); background: var(--milk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%231E0B04' stroke-width='2'/%3E%3C/svg%3E") right 12px center / 18px no-repeat; font-size: 14.5px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3vw, 44px) clamp(16px, 2vw, 28px); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid .pcard.is-hidden { display: none; }
.grid__promo { background: var(--ink); color: var(--milk); border-radius: 4px; padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; align-items: flex-start; position: relative; overflow: hidden; isolation: isolate; min-height: 380px; }
.grid__promo .btn { --bg: var(--tangerine); --dot: var(--milk); }
.grid__promo .tag { color: var(--apricot); }
.grid__promo-mark { position: absolute; z-index: -1; width: 70%; right: -10%; top: -6%; aspect-ratio: 290 / 317; background: var(--tangerine); -webkit-mask: url('../img/mark.svg') center / contain no-repeat; mask: url('../img/mark.svg') center / contain no-repeat; transition: transform 1.2s var(--ease); }
.grid__promo:hover .grid__promo-mark { transform: rotate(-12deg) scale(1.05); }
.grid__empty { padding: 40px 0; color: var(--ink-60); }
.sets { background: var(--ink); color: var(--milk); padding-block: clamp(80px, 10vw, 140px); }
.sets__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.set { display: grid; gap: 22px; align-content: start; }
.set__stage { aspect-ratio: 16 / 10; border-radius: 4px; display: flex; align-items: flex-end; justify-content: center; padding: 0 8% 8%; overflow: hidden; }
.set--sun .set__stage { background: linear-gradient(170deg, var(--sun), var(--flare)); }
.set--petal .set__stage { background: linear-gradient(170deg, #FFD0DB, var(--petal)); }
.set--ink2 .set__stage { background: radial-gradient(circle at 50% 100%, var(--tangerine), var(--ink-2) 70%); }
.set__stage span { width: 26%; margin-inline: -2%; transform: translateY(calc(var(--j) * 4px)); transition: transform .9s var(--ease); filter: drop-shadow(0 16px 18px rgba(30, 11, 4, .3)); }
.set:hover .set__stage span { transform: translateY(-10px) rotate(calc((var(--j) - 1.5) * 5deg)); }
.set__meta { display: grid; gap: 10px; justify-items: start; }
.set__meta .tag { color: var(--apricot); }
.set__meta h3 { font-family: var(--f-display); font-weight: 830; font-stretch: 118%; font-size: clamp(1.7rem, 2.6vw, 2.4rem); letter-spacing: -.045em; line-height: 1; }
.set__price { display: flex; align-items: center; gap: 12px; font-variant-numeric: tabular-nums; }
.set__price b { font-family: var(--f-display); font-size: 24px; }
.set__price s { opacity: .55; }
.seo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px); padding-block: clamp(80px, 10vw, 140px); }
.seo__copy { display: grid; gap: 18px; align-content: start; }
.seo__copy p { color: var(--ink-60); max-width: 38em; }
.seo__faq .tag { margin-bottom: 16px; }

/* accordion */
.acc { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; font-family: var(--f-display); font-weight: 680; font-stretch: 108%; font-size: 18px; letter-spacing: -.015em; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary i { position: relative; width: 28px; height: 28px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line); transition: transform .6s var(--ease), background-color .3s; }
.acc summary i::before, .acc summary i::after { content: ""; position: absolute; left: 8px; right: 8px; top: 13px; height: 2px; background: currentColor; transition: transform .6s var(--ease); }
.acc summary i::after { transform: rotate(90deg); }
.acc[open] summary i { background: var(--tangerine); color: var(--milk); box-shadow: none; transform: rotate(180deg); }
.acc[open] summary i::after { transform: rotate(0); }
.acc__body { overflow: hidden; }
.acc__body > * { padding-bottom: 22px; color: var(--ink-60); max-width: 40em; }
.keys { display: flex; flex-wrap: wrap; gap: 8px; }
.keys li { padding: 6px 12px; border-radius: 99px; background: var(--blush); color: var(--ink); font-size: 14px; }

/* ---------- product page ---------- */
.pdp { padding-top: calc(var(--ann) + var(--hdr) + 28px); padding-bottom: clamp(70px, 9vw, 120px); }
.pdp__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 90px); align-items: start; }
.pdp__gallery { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 96px); display: grid; gap: 12px; }
.pdp__main { position: relative; aspect-ratio: 1 / 1.05; border-radius: 4px; overflow: hidden; display: grid; isolation: isolate; }
.pdp__main.stage--sun, .pdp__main.stage--petal, .pdp__main.stage--ink { background-image: none; }
.pdp__main.stage--sun { background-color: #FFE6D6; } .pdp__main.stage--petal { background-color: #FFE9EE; } .pdp__main.stage--ink { background-color: #2A1208; color: var(--milk); }
.pdp__sun { position: absolute; z-index: -1; width: 62%; aspect-ratio: 1; left: 19%; top: 20%; border-radius: 50%; background: #FFC9A6; }
.stage--petal .pdp__sun { background: #FFC2D0; } .stage--ink .pdp__sun { background: var(--tangerine); }
.pdp__view { grid-area: 1 / 1; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; opacity: 0; transform: scale(1.04); transition: opacity .7s, transform 1s var(--ease); }
.pdp__view.is-on { opacity: 1; transform: none; }
.pdp__render { display: block; width: min(56%, 420px); filter: drop-shadow(0 30px 40px rgba(30, 11, 4, .2)); }
.pdp__swatch { display: block; width: 80%; }
.pdp__vcap { font-family: var(--f-display); font-weight: 700; font-size: 18px; }
.pdp__keys { display: grid; gap: 8px; text-align: center; }
.pdp__keys b { font-family: var(--f-display); font-weight: 850; font-stretch: 120%; font-size: clamp(1.8rem, 3.6vw, 3.4rem); letter-spacing: -.05em; line-height: 1; }
.pdp__thumbs { display: flex; gap: 8px; }
.pdp__thumbs button { flex: 1; height: 46px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 560; font-size: 14px; transition: background-color .3s, color .3s; }
.pdp__thumbs button[aria-selected="true"] { background: var(--ink); color: var(--milk); box-shadow: none; }
.pdp__info { display: grid; gap: 16px; padding-top: 6px; }
.pdp__flags { display: flex; flex-wrap: wrap; gap: 6px; }
.pdp__name { font-size: clamp(3.4rem, 8vw, 7.6rem); line-height: .82; }
.pdp__type { font-family: var(--f-display); font-weight: 650; font-size: 18px; }
.pdp__short { color: var(--ink-60); font-size: 18px; }
.pdp__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; padding-block: 8px; border-block: 1px solid var(--line); }
.pdp__price > b { font-family: var(--f-display); font-weight: 800; font-size: 34px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pdp__price span { font-size: 14.5px; color: var(--ink-60); }
.pdp__price span b { color: var(--tangerine); }
.sizes { display: flex; gap: 8px; border: 0; padding: 0; margin: 0; align-items: center; flex-wrap: wrap; }
.sizes legend { float: left; margin-right: 10px; font-size: 14px; color: var(--ink-60); }
.sizes span { display: inline-block; padding: 10px 18px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px var(--line); cursor: pointer; transition: all .3s; }
.sizes input:checked + span { box-shadow: inset 0 0 0 2px var(--ink); font-weight: 650; }
.sizes input:focus-visible + span { outline: 2px solid var(--tangerine); outline-offset: 2px; }
.pdp__size { color: var(--ink-60); }
.pdp__buy { display: flex; gap: 10px; }
.qty { display: flex; align-items: center; border-radius: 99px; box-shadow: inset 0 0 0 1.5px var(--line); flex: none; }
.qty button { width: 44px; height: 56px; font-size: 20px; }
.qty input { width: 32px; text-align: center; border: 0; background: none; font-variant-numeric: tabular-nums; font-weight: 650; }
.pdp__assure { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--ink-60); }
.pdp__assure li::before { content: "●"; color: var(--tangerine); margin-right: 6px; font-size: 9px; vertical-align: 2px; }
.pdp__benefits { display: flex; flex-wrap: wrap; gap: 8px; }
.pdp__benefits span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 99px; background: var(--blush); font-size: 14px; font-weight: 520; }
.pdp__benefits .phase { width: 20px; height: 20px; color: var(--tangerine); }
.pdp__acc { margin-top: 8px; border-top: 1px solid var(--line); }
.inci { font-size: 14px; }
.pdp-story { background: var(--tangerine); padding-block: clamp(80px, 10vw, 150px); }
.pdp-story__in { display: grid; gap: clamp(40px, 6vw, 80px); }
.pdp-story__in h2 { max-width: 16ch; }
.pdp-story__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.pdp-story__cols > div { display: grid; gap: 12px; align-content: start; border-top: 2px solid var(--ink); padding-top: 18px; }
.pdp-story__cols h3 { font-family: var(--f-display); font-weight: 820; font-stretch: 116%; font-size: clamp(1.4rem, 2.2vw, 2rem); letter-spacing: -.035em; line-height: 1; }
.pair { padding-block: clamp(80px, 10vw, 140px); }
.pair__row { display: flex; align-items: center; gap: clamp(10px, 2vw, 24px); }
.pair__item { flex: 1; min-width: 0; display: grid; gap: 6px; }
.pair__item > span:first-child { aspect-ratio: 1; border-radius: 4px; display: grid; place-items: center; transition: transform .7s var(--ease); }
.pair__item:hover > span:first-child { transform: translateY(-6px); }
.pair__item svg { width: 62%; }
.pair__item b { font-family: var(--f-display); font-stretch: 118%; font-size: 22px; letter-spacing: -.04em; }
.pair__item > span:last-child { color: var(--ink-60); font-size: 14px; }
.pair__plus { font-family: var(--f-display); font-size: 36px; font-weight: 300; color: var(--tangerine); }
.pair__total { flex: 1.1; display: grid; gap: 10px; justify-items: start; padding-left: clamp(10px, 2vw, 30px); }
.pair__price { display: flex; gap: 10px; align-items: baseline; }
.pair__price b { font-family: var(--f-display); font-size: 40px; letter-spacing: -.04em; }
.pair__price s { color: var(--ink-60); }
.reviews { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(30px, 5vw, 80px); padding-bottom: clamp(80px, 10vw, 140px); }
.reviews__sum { display: grid; gap: 14px; align-content: start; }
.reviews__score { display: flex; align-items: center; gap: 12px; }
.reviews__score b { font-family: var(--f-display); font-weight: 860; font-stretch: 120%; font-size: 84px; letter-spacing: -.06em; line-height: .9; }
.stars { color: var(--tangerine); letter-spacing: 2px; }
.reviews__list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.review { display: grid; gap: 10px; align-content: start; padding: 26px; background: var(--blush); border-radius: 4px; }
.review h3 { font-family: var(--f-display); font-weight: 760; font-size: 20px; letter-spacing: -.02em; }
.review__by { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; color: var(--ink-60); }
.pdp-faq { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(30px, 5vw, 80px); padding-bottom: clamp(80px, 10vw, 140px); }
.related { padding-bottom: clamp(80px, 10vw, 140px); }
.stickybuy { position: fixed; z-index: 60; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 160%); display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 8px; background: var(--milk); border-radius: 99px; box-shadow: 0 20px 60px -20px rgba(30, 11, 4, .5); transition: transform .8s var(--ease); width: max-content; max-width: calc(100% - 32px); }
.stickybuy.is-on { transform: translate(-50%, 0); }
.stickybuy__img { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; flex: none; }
.stickybuy__img svg { width: 80%; margin-top: 10%; }
.stickybuy__t { display: grid; line-height: 1.2; min-width: 0; }
.stickybuy__t b { font-family: var(--f-display); font-stretch: 116%; font-size: 18px; letter-spacing: -.03em; }
.stickybuy__t span { font-size: 13px; color: var(--ink-60); white-space: nowrap; }
.stickybuy .btn { height: 48px; }

/* ---------- science ---------- */
.sci-orbit { position: absolute; z-index: -1; right: -18vw; top: 50%; width: min(56vw, 760px); aspect-ratio: 1; translate: 0 -50%; }
.sci-orbit span { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255, 90, 31, .4); }
.sci-orbit span:nth-child(2) { inset: 14%; border-color: rgba(255, 90, 31, .6); }
.sci-orbit span:nth-child(3) { inset: 30%; background: radial-gradient(circle at 35% 35%, var(--flare), var(--tangerine)); border: 0; }
.sci-orbit i { position: absolute; inset: 0; }
.sci-orbit i::before { content: ""; position: absolute; left: 50%; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 30px var(--sun); }
.principles { padding-block: clamp(80px, 10vw, 140px); display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(30px, 6vw, 100px); }
.principles__list { display: grid; }
.principle { display: grid; grid-template-columns: auto 1fr; gap: 24px; padding-block: 26px; border-top: 1px solid var(--line); }
.principle__n { font-family: var(--f-display); font-weight: 860; font-stretch: 122%; font-size: 60px; line-height: .8; color: var(--tangerine); letter-spacing: -.05em; min-width: 1.1em; }
.principle h3 { font-family: var(--f-display); font-weight: 800; font-stretch: 116%; font-size: 26px; letter-spacing: -.035em; line-height: 1.05; margin-bottom: 6px; }
.principle p { color: var(--ink-60); }
.library { padding-bottom: clamp(80px, 10vw, 140px); }
.library__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lib { display: grid; gap: 8px; align-content: start; padding: 18px; background: #fff; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line); transition: transform .6s var(--ease), box-shadow .4s; }
.lib:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1.5px var(--ink); }
.lib__sw { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--blush); border-radius: 4px; margin-bottom: 8px; overflow: hidden; }
.lib__sw svg { width: 92%; transition: transform 1s var(--ease); }
.lib:hover .lib__sw svg { transform: rotate(-8deg) scale(1.08); }
.lib__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lib h3 { font-family: var(--f-display); font-weight: 800; font-stretch: 114%; font-size: 21px; letter-spacing: -.03em; }
.lib__role { font-family: var(--f-display); font-weight: 650; color: var(--tangerine); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.lib p:last-child { font-size: 14.5px; color: var(--ink-60); }
.process { background: var(--ink); color: var(--milk); padding-block: clamp(80px, 10vw, 150px); }
.process__in { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(30px, 6vw, 100px); align-items: start; }
.process__side { position: sticky; top: 120px; display: grid; gap: 18px; }
.process__side p { color: rgba(255, 250, 246, .7); }
.process__steps { position: relative; display: grid; gap: clamp(40px, 6vw, 80px); padding-left: 48px; }
.process__line { position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px; background: var(--line-light); }
.process__line i { display: block; width: 100%; height: 100%; background: var(--tangerine); transform-origin: 50% 0; transform: scaleY(0); }
.process__steps li { position: relative; display: grid; gap: 8px; }
.process__dot { position: absolute; left: -48px; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 2px var(--tangerine); transition: background-color .5s; }
.process__steps li.is-in .process__dot { background: var(--tangerine); }
.process__steps h3 { font-family: var(--f-display); font-weight: 840; font-stretch: 120%; font-size: clamp(2rem, 4vw, 3.6rem); letter-spacing: -.05em; line-height: .9; }
.process__steps p:last-child { color: rgba(255, 250, 246, .75); max-width: 30em; }
.without { padding-block: clamp(80px, 10vw, 140px) 40px; display: grid; gap: 40px; }
.without__list { display: flex; flex-wrap: wrap; gap: 10px; }
.without__list span { display: inline-block; position: relative; padding: 12px 24px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px var(--ink); font-family: var(--f-display); font-weight: 700; font-stretch: 112%; font-size: clamp(1.1rem, 2vw, 1.6rem); letter-spacing: -.02em; }
.without__list span::after { content: ""; position: absolute; left: 18px; right: 18px; top: 50%; height: 2.5px; background: var(--tangerine); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--ease) calc(var(--d, 0s) + .4s); }
.without__list li.is-in span::after { transform: none; }
.derm { padding-block: 40px clamp(80px, 10vw, 140px); }
.derm__card { position: relative; overflow: hidden; background: var(--blush); border-radius: 4px; padding: clamp(30px, 6vw, 80px); display: grid; gap: 24px; isolation: isolate; }
.derm__card p { font-family: var(--f-display); font-weight: 760; font-stretch: 110%; font-size: clamp(1.6rem, 3.3vw, 3rem); letter-spacing: -.035em; line-height: 1.06; max-width: 24ch; }
.derm__card figcaption { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.derm__mark { position: absolute; z-index: -1; right: 4%; bottom: -20%; width: min(36%, 340px); aspect-ratio: 290 / 317; background: var(--petal); -webkit-mask: url('../img/mark.svg') center / contain no-repeat; mask: url('../img/mark.svg') center / contain no-repeat; }

/* ---------- about ---------- */
.about__profile { position: absolute; z-index: -1; right: -4vw; bottom: -12%; width: min(54vw, 720px); aspect-ratio: 290 / 317; background: var(--tangerine); -webkit-mask: url('../img/mark.svg') center / contain no-repeat; mask: url('../img/mark.svg') center / contain no-repeat; }
.letter { display: grid; grid-template-columns: 1fr 2.2fr; gap: clamp(30px, 6vw, 100px); padding-block: clamp(80px, 10vw, 150px); }
.letter__side { display: grid; gap: 30px; align-content: start; }
.letter__mark { width: 90px; aspect-ratio: 290 / 317; background: var(--tangerine); -webkit-mask: url('../img/mark.svg') center / contain no-repeat; mask: url('../img/mark.svg') center / contain no-repeat; }
.letter__body { display: grid; gap: 40px; }
.letter__lead { font-family: var(--f-display); font-weight: 780; font-stretch: 112%; font-size: clamp(1.9rem, 3.8vw, 3.6rem); letter-spacing: -.04em; line-height: 1.04; }
.letter__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; color: var(--ink-60); }
.letter__sign { font-family: var(--f-display); font-weight: 650; font-size: 18px; }
.logo-story { background: var(--tangerine); padding-block: clamp(80px, 10vw, 150px); }
.logo-story__in { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 6vw, 100px); align-items: center; }
.logo-story__art { display: grid; place-items: center; aspect-ratio: 1; background: var(--ink); color: var(--tangerine); border-radius: 50%; }
.logo--xl { flex-direction: column; gap: 6%; width: 64%; }
.logo--xl .logo__mark { width: 52%; }
.logo--xl .logo__word { width: 100%; }
.logo-story__copy { display: grid; gap: 36px; }
.defs { display: grid; gap: 22px; }
.defs div { display: grid; grid-template-columns: 9em 1fr; gap: 16px; padding-top: 18px; border-top: 2px solid var(--ink); }
.defs dt { font-family: var(--f-display); font-weight: 800; font-stretch: 116%; font-size: 20px; letter-spacing: -.03em; }
.values { padding-block: clamp(80px, 10vw, 140px); display: grid; gap: 40px; }
.values__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.value { min-height: 300px; padding: 26px; border-radius: 4px; display: flex; flex-direction: column; justify-content: space-between; transition: transform .7s var(--ease); }
.value:hover { transform: translateY(-8px) rotate(-1deg); }
.value--sun { background: var(--tangerine); } .value--petal { background: var(--petal); } .value--ink { background: var(--ink); color: var(--milk); }
.value h3 { font-family: var(--f-display); font-weight: 860; font-stretch: 122%; font-size: clamp(2rem, 3vw, 3rem); letter-spacing: -.055em; line-height: .9; }
.timeline { background: var(--ink); color: var(--milk); padding-block: clamp(80px, 10vw, 150px); }
.timeline__list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 50px; }
.timeline__list li { display: grid; gap: 10px; align-content: start; padding-top: 22px; border-top: 2px solid var(--line-light); position: relative; }
.timeline__list li::before { content: ""; position: absolute; top: -8px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 2px var(--tangerine); }
.timeline__list li.is-done { border-color: var(--tangerine); }
.timeline__list li.is-done::before { background: var(--tangerine); }
.timeline__list time { font-family: var(--f-display); font-weight: 650; color: var(--apricot); font-size: 14px; }
.timeline__list h3 { font-family: var(--f-display); font-weight: 820; font-stretch: 118%; font-size: 26px; letter-spacing: -.04em; }
.timeline__list p { color: rgba(255, 250, 246, .7); font-size: 15px; }
.pack { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 100px); align-items: center; padding-block: clamp(80px, 10vw, 140px); }
.pack__art { aspect-ratio: 1; background: var(--blush); border-radius: 4px; display: flex; align-items: flex-end; justify-content: center; padding: 0 10% 10%; }
.pack__art span { width: 32%; margin-inline: -1%; transform: translateY(calc(var(--i) * -10px)); filter: drop-shadow(0 20px 22px rgba(30, 11, 4, .2)); }
.pack__copy { display: grid; gap: 22px; justify-items: start; }
.pack__copy p { color: var(--ink-60); max-width: 32em; }

/* ---------- journal ---------- */
.phead--journal { padding-bottom: 40px; }
.phead--journal .lede { max-width: 22em; color: var(--ink-60); }
.jfeat { padding-bottom: clamp(50px, 7vw, 90px); }
.jfeat__card { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 4vw, 60px); align-items: center; }
.jfeat__img { aspect-ratio: 16 / 11; overflow: hidden; border-radius: 4px; }
.jfeat__img svg { width: 100%; height: 100%; transition: transform 1.4s var(--ease); }
.jfeat__card:hover .jfeat__img svg { transform: scale(1.05); }
.jfeat__copy { display: grid; gap: 16px; justify-items: start; }
.jfeat__copy > p { color: var(--ink-60); }
.jlist__grid .acard:first-child { grid-column: span 2; }
.jlist__grid .acard:first-child .acard__img { aspect-ratio: 8.3 / 3; }
.jlist { padding-bottom: clamp(80px, 10vw, 140px); display: grid; gap: 30px; }
.acard.is-hidden { display: none; }
.jtopics { background: var(--petal); padding-block: clamp(70px, 9vw, 120px); }
.jtopics__list { margin-top: 24px; }
.jtopics__list a { display: flex; justify-content: space-between; align-items: center; padding-block: 12px; border-bottom: 1.5px solid var(--ink); font-family: var(--f-display); font-weight: 840; font-stretch: 118%; font-size: clamp(1.9rem, 5vw, 4.4rem); letter-spacing: -.05em; line-height: 1; transition: padding .6s var(--ease), color .3s; }
.jtopics__list a:hover { padding-left: 24px; color: var(--milk); }
.jtopics__list a span:last-child { transition: transform .6s var(--ease); }
.jtopics__list a:hover span:last-child { transform: translateX(-12px) rotate(-45deg); }

/* post */
.post__head { position: relative; overflow: hidden; padding-top: calc(var(--ann) + var(--hdr) + clamp(30px, 5vw, 60px)); padding-bottom: clamp(40px, 5vw, 70px); isolation: isolate; }
.post__head--sun { background: var(--tangerine); }
.post__head--petal { background: var(--petal); }
.post__head--ink { background: var(--ink); color: var(--milk); }
.post__head--ink .pill--ink { background: var(--tangerine); }
.post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 14px; margin-bottom: 20px; }
.post__t { max-width: 15ch; }
.post__dek { margin-top: 22px; max-width: 30em; }
.post__cover { position: absolute; z-index: -1; right: -6vw; top: 10%; width: min(46vw, 640px); aspect-ratio: 4 / 3; border-radius: 50%; overflow: hidden; opacity: .9; }
.post__cover svg { width: 100%; height: 100%; }
.post__body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(30px, 6vw, 110px); padding-block: clamp(60px, 8vw, 110px); }
.post__toc { position: sticky; top: 120px; align-self: start; display: grid; gap: 14px; }
.post__toc ol { display: grid; gap: 8px; counter-reset: t; font-size: 15px; }
.post__toc li { counter-increment: t; }
.post__toc a { display: flex; gap: 10px; color: var(--ink-60); transition: color .3s; }
.post__toc a::before { content: counter(t); font-family: var(--f-display); font-weight: 700; font-size: 12px; margin-top: 3px; }
.post__toc a.is-on, .post__toc a:hover { color: var(--ink); }
.post__toc a.is-on::before { color: var(--tangerine); }
.post__progress { height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; margin-top: 8px; }
.post__progress i { display: block; height: 100%; background: var(--tangerine); transform-origin: 0; transform: scaleX(0); }
.prose { max-width: 68ch; font-size: 18.5px; line-height: 1.7; display: grid; gap: 20px; }
.prose h2 { font-family: var(--f-display); font-weight: 820; font-stretch: 116%; font-size: clamp(1.7rem, 2.6vw, 2.4rem); letter-spacing: -.04em; line-height: 1; margin-top: 30px; }
.prose ol { counter-reset: p; display: grid; gap: 10px; }
.prose ol li { counter-increment: p; display: grid; grid-template-columns: 34px 1fr; }
.prose ol li::before { content: counter(p); font-family: var(--f-display); font-weight: 800; color: var(--tangerine); }
.prose--solo { padding-block: 40px clamp(80px, 10vw, 140px); }
.pull { margin-block: 20px; padding: 6px 0 6px 28px; border-left: 4px solid var(--tangerine); }
.pull p { font-family: var(--f-display); font-weight: 780; font-stretch: 112%; font-size: clamp(1.5rem, 2.6vw, 2.2rem); letter-spacing: -.035em; line-height: 1.1; }
.post__product { display: grid; grid-template-columns: 150px 1fr; gap: 24px; align-items: center; padding: 18px; background: var(--blush); border-radius: 4px; margin-block: 16px; font-size: 16px; }
.post__product > span { aspect-ratio: 1; border-radius: 4px; display: grid; place-items: center; }
.post__product > span svg { width: 70%; }
.post__product div { display: grid; gap: 6px; justify-items: start; }
.post__product h3 { font-family: var(--f-display); font-weight: 840; font-stretch: 120%; font-size: 32px; letter-spacing: -.045em; line-height: 1; }
.post__product .btn { margin-top: 8px; height: 48px; }
.post__author { display: flex; gap: 16px; align-items: center; padding-top: 24px; margin-top: 20px; border-top: 1px solid var(--line); font-size: 15px; }
.post__avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--tangerine); position: relative; flex: none; }
.post__avatar::after { content: ""; position: absolute; inset: 14px; background: var(--milk); -webkit-mask: url('../img/mark.svg') center / contain no-repeat; mask: url('../img/mark.svg') center / contain no-repeat; }

/* ---------- quiz ---------- */
.quiz { position: relative; overflow: hidden; background: var(--tangerine); min-height: 100svh; padding-top: calc(var(--ann) + var(--hdr) + 30px); padding-bottom: 80px; isolation: isolate; }
.quiz__in { position: relative; z-index: 1; }
.quiz__art { position: absolute; z-index: -1; right: -14vw; bottom: -20vw; width: min(70vw, 900px); opacity: .7; }
.quiz__art svg { animation: spin 100s linear infinite; }
.quiz__intro { display: grid; gap: 26px; justify-items: start; padding-top: 4vh; }
.quiz__form { display: grid; gap: 26px; max-width: 900px; }
.quiz__progress { height: 4px; background: rgba(30, 11, 4, .15); border-radius: 4px; overflow: hidden; }
.quiz__progress i { display: block; height: 100%; width: 0; background: var(--ink); transition: width .8s var(--ease); }
.quiz__count { font-family: var(--f-display); font-weight: 650; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.quiz__q { border: 0; padding: 0; margin: 0; display: grid; gap: 30px; min-width: 0; }
.quiz__q legend { padding: 0; margin-bottom: 30px; max-width: 18ch; }
.quiz__q.is-enter { animation: qIn .8s var(--ease); }
@keyframes qIn { from { opacity: 0; transform: translateX(60px); } }
.quiz__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt { cursor: pointer; }
.opt span { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: 4px; background: rgba(255, 250, 246, .18); font-family: var(--f-display); font-weight: 700; font-stretch: 110%; font-size: clamp(1.1rem, 1.6vw, 1.4rem); letter-spacing: -.02em; transition: background-color .35s, color .35s, transform .5s var(--ease); }
.opt i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink); font-style: normal; font-size: 14px; flex: none; transition: background-color .3s, color .3s; }
.opt:hover span { background: rgba(255, 250, 246, .32); transform: translateX(6px); }
.opt input:checked + span { background: var(--ink); color: var(--milk); }
.opt input:checked + span i { background: var(--tangerine); box-shadow: none; }
.opt input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.quiz__nav { display: flex; }
.link-arrow--back { border: 0; font-weight: 600; }
.quiz__result { display: grid; gap: 24px; max-width: 1000px; animation: qIn .9s var(--ease); }
.quiz__routines { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.routine { padding: 24px; border-radius: 4px; display: grid; gap: 14px; align-content: start; }
.routine--am { background: var(--milk); }
.routine--pm { background: var(--ink); color: var(--milk); }
.routine h3 { font-family: var(--f-display); font-weight: 830; font-stretch: 118%; font-size: 28px; letter-spacing: -.04em; }
.routine ol { display: grid; gap: 10px; counter-reset: r; }
.routine li { counter-increment: r; display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.routine--pm li { border-color: var(--line-light); }
.routine li::before { content: counter(r); font-family: var(--f-display); font-weight: 800; color: var(--tangerine); }
.routine li a { font-family: var(--f-display); font-weight: 760; font-size: 19px; letter-spacing: -.02em; }
.routine li span { font-size: 13px; opacity: .65; }
.quiz__ctas { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- waitlist ---------- */
.wl { position: relative; overflow: hidden; background: var(--tangerine); padding-top: calc(var(--ann) + var(--hdr) + 30px); padding-bottom: clamp(70px, 9vw, 120px); isolation: isolate; }
.wl__in { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: start; }
.wl__copy { display: grid; gap: 28px; }
.wl__copy h1 { line-height: .8; }
.perks { display: grid; gap: 0; }
.perks li { display: grid; grid-template-columns: 34px 1fr; gap: 2px 14px; align-items: center; padding-block: 14px; border-top: 1.5px solid var(--ink); }
.perks .phase { grid-row: span 2; }
.perks b { font-family: var(--f-display); font-weight: 800; font-stretch: 116%; font-size: 21px; letter-spacing: -.03em; }
.perks span:last-child { font-size: 14.5px; opacity: .8; }
.wl__card { background: var(--milk); border-radius: 4px; padding: clamp(22px, 3vw, 40px); display: grid; gap: 24px; position: sticky; top: 110px; box-shadow: 0 40px 90px -40px rgba(30, 11, 4, .5); }
.wl__done { display: grid; gap: 16px; animation: qIn .8s var(--ease); }
.copyline { display: flex; gap: 8px; }
.copyline input { flex: 1; min-width: 0; padding: 0 16px; border-radius: 99px; border: 1.5px solid var(--line); background: #fff; }
.wl__rays { position: absolute; z-index: -1; left: 50%; bottom: -60vw; width: 120vw; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 201, 60, .35) 0 4deg, transparent 4deg 12deg); -webkit-mask: radial-gradient(closest-side, #000 40%, transparent); mask: radial-gradient(closest-side, #000 40%, transparent); animation: spin 140s linear infinite; }
.wl-faq { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(30px, 5vw, 80px); padding-block: clamp(80px, 10vw, 140px); }

/* ---------- help ---------- */
.help__search { margin-top: 32px; max-width: 640px; }
.help__search input { width: 100%; height: 64px; padding: 0 28px; border-radius: 99px; border: 0; background: var(--milk); font-size: 18px; outline: none; box-shadow: 0 20px 50px -24px rgba(30, 11, 4, .5); }
.help__search input:focus { box-shadow: 0 0 0 4px var(--ink); }
.help { display: grid; grid-template-columns: 240px 1fr; gap: clamp(30px, 6vw, 100px); padding-block: clamp(60px, 8vw, 110px); }
.help__nav { position: sticky; top: 120px; align-self: start; display: grid; gap: 4px; }
.help__nav a { padding: 8px 0; font-family: var(--f-display); font-weight: 650; font-size: 16px; border-bottom: 1px solid var(--line); transition: color .3s, padding .4s var(--ease); }
.help__nav a:hover { color: var(--tangerine); padding-left: 6px; }
.help__groups { display: grid; gap: 60px; }
.help__g { display: grid; gap: 10px; }
.help__g[hidden] { display: none; }
.contact { background: var(--ink-2); color: var(--milk); padding-block: clamp(80px, 10vw, 140px); }
.contact__in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 100px); }
.contact__in > div { display: grid; gap: 22px; align-content: start; }
.contact__in .lede { color: rgba(255, 250, 246, .75); }
.contact__line { display: grid; gap: 4px; font-size: 19px; }
.contact .field label { color: rgba(255, 250, 246, .7); }

/* ---------- 404 ---------- */
.nf { background: var(--tangerine); min-height: 100svh; display: grid; align-items: center; padding-top: calc(var(--ann) + var(--hdr)); }
.nf__in { display: grid; gap: 26px; justify-items: start; padding-block: 60px; }
.nf__mark { width: 120px; aspect-ratio: 290 / 317; background: var(--ink); -webkit-mask: url('../img/mark.svg') center / contain no-repeat; mask: url('../img/mark.svg') center / contain no-repeat; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .hdr__nav { display: none; }
  .hdr__burger { display: block; }
  .hdr__act { margin-left: auto; }
  .library__grid { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .timeline__list { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .values__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  :root { --hdr: 68px; }
  .hdr__act .btn { display: none; }
  .hero { min-height: 0; }
  .hero__count { position: static; text-align: left; margin-top: 48px; padding-inline: var(--gutter); }
  .hero__p { transform: none !important; }
  .hero__products { position: relative; right: auto; bottom: auto; width: 100%; height: 72vw; max-height: 460px; margin-top: 30px; }
  .hero__sun { right: -40vw; top: 34%; width: 130vw; }
  .bestlook__grid, .proof__stats, .pdp-story__cols { grid-template-columns: 1fr; }
  .ingr__in, .band__in, .ftr__top, .seo, .pdp__grid, .reviews, .pdp-faq, .principles, .process__in, .letter, .logo-story__in, .pack, .jfeat__card, .post__body, .wl__in, .wl-faq, .help, .contact__in { grid-template-columns: 1fr; }
  .ftr__cols { grid-template-columns: repeat(2, 1fr); }
  .grid, .jteaser__grid, .jlist__grid, .sets__grid { grid-template-columns: repeat(2, 1fr); }
  .library__grid { grid-template-columns: repeat(2, 1fr); }
  .pdp__gallery, .process__side, .post__toc, .help__nav, .wl__card { position: static; }
  .post__toc { display: none; }
  .help__nav { display: flex; flex-wrap: wrap; gap: 6px; }
  .help__nav a { border: 0; padding: 8px 14px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px var(--line); font-size: 14px; }
  .reviews__list { grid-template-columns: 1fr; }
  .pair__row { flex-wrap: wrap; }
  .pair__item { flex: 1 1 26%; }
  .pair__total { flex-basis: 100%; padding-left: 0; padding-top: 16px; }
  .letter__cols { grid-template-columns: 1fr; }
  .timeline__list { grid-template-columns: 1fr 1fr; }
  .defs div { grid-template-columns: 1fr; gap: 4px; }
  .post__cover { opacity: .35; }
  .sci-orbit { top: 6%; translate: none; width: 80vw; right: -36vw; opacity: .55; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .grid, .jteaser__grid, .jlist__grid, .sets__grid, .grid--4 { grid-template-columns: 1fr; }
  .grid { gap: 36px; }
  .jlist__grid .acard:first-child { grid-column: auto; }
  .jlist__grid .acard:first-child .acard__img { aspect-ratio: 4 / 3; }
  .values__grid, .timeline__list { grid-template-columns: 1fr; }
  .library__grid { gap: 10px; }
  .lib { padding: 12px; }
  .lib h3 { font-size: 17px; }
  .lib__head .pill { display: none; }
  .lib p:last-child { font-size: 13px; }
  .quiz__opts, .quiz__routines { grid-template-columns: 1fr; }
  .countdown { gap: 6px; }
  .countdown div { padding: 12px 10px; }
  .shop__bar { flex-wrap: wrap; }
  .sort { width: 100%; } .sort select { width: 100%; }
  .post__product { grid-template-columns: 1fr; }
  .pair__plus { display: none; }
  .pair__item { flex: 1 1 28%; }
  .pair__item b { font-size: 17px; }
  .quizcta__mark { width: 62%; right: -18%; top: -8%; opacity: .55; }
  .inline-form--light { flex-direction: column; border-radius: 26px; }
  .inline-form--light .btn { width: 100%; }
  .copyline { flex-direction: column; } .copyline input { height: 50px; }
  .pdp__buy { flex-direction: column; }
  .qty { align-self: flex-start; }
  .ftr__bot { flex-direction: column; }
  .hdr__bag { padding: 0 8px; }
  .stickybuy__t span { display: none; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; transition-delay: 0s !important; }
  .js [data-reveal], .js [data-split], .js .hero__photo, .js .hero__h .w, .js .hero__p { opacity: 1 !important; transform: none !important; translate: none !important; font-stretch: 118% !important; }
}

/* ink buttons sitting on tangerine or petal fields fill with milk on hover */
[data-header-theme="sun"] .btn--ink, [data-header-theme="petal"] .btn--ink, .quizcta .btn--ink { --dot: var(--milk); }
[data-header-theme="sun"] .btn--ink:hover, [data-header-theme="petal"] .btn--ink:hover, .quizcta .btn--ink:hover,
[data-header-theme="sun"] .btn--ink:focus-visible, .quizcta .btn--ink:focus-visible { --fg: var(--ink); }

/* ---------- landing page (paid traffic) ---------- */
.is-lp .hdr__nav, .is-lp .hdr__burger { display: none; }
.cmp { padding-block: clamp(80px, 10vw, 140px); display: grid; gap: clamp(32px, 5vw, 56px); }
.cmp__table { display: grid; border-top: 2px solid var(--ink); }
.cmp__row { display: grid; grid-template-columns: 1fr 1.3fr 1.3fr; gap: 16px 32px; padding-block: 22px; border-bottom: 1px solid var(--line); align-items: baseline; }
.cmp__row span:first-child { font-family: var(--f-display); font-weight: 800; font-stretch: 116%; letter-spacing: -.03em; font-size: clamp(1.1rem, 1.6vw, 1.45rem); line-height: 1.05; }
.cmp__row span:nth-child(2) { color: var(--ink-60); }
.cmp__row span:nth-child(3) { display: flex; gap: 10px; align-items: baseline; font-weight: 560; }
.cmp__row span:nth-child(3) .phase { flex: none; transform: translateY(2px); }
.cmp__row--head span { font-size: 12.5px !important; font-family: var(--f-body) !important; font-weight: 640 !important; letter-spacing: .08em !important; text-transform: uppercase; color: var(--ink-60); }
.cmp__row--head span:nth-child(3) { color: var(--tangerine); }
@media (max-width: 720px) {
  .cmp__row { grid-template-columns: 1fr 1fr; }
  .cmp__row span:first-child { grid-column: 1 / -1; }
  .cmp__row--head span:first-child { display: none; }
}
.hero--lp .hero__h { font-size: clamp(3rem, 8.4vw, 9.4rem); }
.hero--lp .hero__products { width: min(40vw, 600px); }
.cmp .phase { width: 14px; height: 14px; color: var(--tangerine); }
.is-lp .proof { padding-top: clamp(80px, 10vw, 140px); }
.is-lp .hdr__act { margin-left: auto; }

/* ---------- home: trust strip ---------- */
.trust { border-bottom: 1px solid var(--line); }
.trust__in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-block: 26px; }
.trust__i { display: flex; gap: 14px; align-items: center; }
.trust__i .phase { width: 22px; height: 22px; color: var(--tangerine); }
.trust__i div { display: grid; gap: 2px; }
.trust__i b { font-family: var(--f-display); font-weight: 760; font-stretch: 112%; font-size: 16px; letter-spacing: -.02em; }
.trust__i span { font-size: 13.5px; color: var(--ink-60); }

/* ---------- home: catalog ---------- */
.catalog { padding-block: clamp(64px, 8vw, 110px) clamp(40px, 5vw, 70px); }
.catalog__h { display: grid; gap: 12px; }
.catalog__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 28px); align-items: start; }
.setcard { position: relative; display: grid; align-content: space-between; aspect-ratio: 4 / 6.2; padding: 22px; border-radius: 4px; background: var(--ink); color: var(--milk); overflow: hidden; transition: background-color .5s; }
.setcard:hover { background: var(--ink-2); }
.setcard .pcard__flag { position: static; justify-self: start; }
.setcard__row { display: flex; justify-content: center; align-items: flex-end; padding-block: 10px; }
.setcard__row > span { width: 34%; margin-inline: -3%; filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .35)); transition: transform 1s var(--ease); }
.setcard:hover .setcard__row > span:nth-child(1) { transform: translateX(-6px); }
.setcard:hover .setcard__row > span:nth-child(3) { transform: translateX(6px); }
.setcard__row svg { width: 100%; }
.setcard__meta { display: grid; gap: 8px; justify-items: start; }
.setcard__t { font-family: var(--f-display); font-weight: 820; font-stretch: 116%; font-size: 22px; letter-spacing: -.035em; line-height: 1; }
.setcard__meta > span:not(.btn) { font-size: 14px; color: rgba(255, 250, 246, .72); }
.setcard__p b { font-family: var(--f-display); font-size: 22px; color: var(--tangerine); }
.setcard__p s { margin-left: 6px; }
.setcard .btn { margin-top: 6px; }
.catalog__spring { margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); padding-top: 22px; display: grid; gap: 18px; }
.catalog__spring-h { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mini__i { display: flex; gap: 14px; align-items: center; }
.mini__img { flex: none; width: 72px; aspect-ratio: 1; border-radius: 4px; display: grid; place-items: center; overflow: hidden; background-image: none !important; }
.mini__img.stage--sun { background-color: #FFE6D6; } .mini__img.stage--petal { background-color: #FFE9EE; } .mini__img.stage--ink { background-color: #2A1208; }
.mini__img svg { width: 70%; transition: transform .8s var(--ease); }
.mini__i:hover .mini__img svg { transform: translateY(-4px); }
.mini__i b { display: block; font-family: var(--f-display); font-weight: 760; font-size: 16px; }
.mini__i span span { font-size: 13.5px; color: var(--ink-60); }

/* ---------- home: best look ---------- */
.bestlook { background: var(--tangerine); color: var(--ink); padding-block: clamp(80px, 10vw, 140px); }
.bestlook__h { font-family: var(--f-display); font-weight: 860; font-stretch: 118%; letter-spacing: -.05em; line-height: .88; font-size: clamp(3rem, 8.4vw, 8.6rem); margin-bottom: clamp(40px, 6vw, 80px); }
.home-quiz-tight { padding-top: 0; }
@media (max-width: 1100px) {
  .catalog__grid { grid-template-columns: repeat(2, 1fr); }
  .trust__in, .mini { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .catalog__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .setcard { grid-column: 1 / -1; aspect-ratio: auto; gap: 16px; }
  .setcard__row > span { width: 24%; }
  .trust__in { grid-template-columns: 1fr 1fr; gap: 16px; padding-block: 20px; }
  .mini { grid-template-columns: 1fr; }
}
.catalog + .quizcta { padding-top: 0; }
@media (max-width: 900px) {
  .hero__products { height: 58vw; margin-top: 8px; }
  .hero__count { margin-top: 24px; max-width: none; }
  .hero__photo { position: relative; width: 100%; height: 110vw; max-height: 620px; margin-top: 16px; justify-content: center; }
}
@media (max-width: 600px) {
  .trust__i span { display: none; }
  .trust__i b { font-size: 14.5px; }
  .catalog__spring-h .link-arrow { white-space: nowrap; }
}

/* ---------- rendered product images ---------- */
img.pr { display: block; width: 100%; height: auto; }
.pcard__render { width: 96%; transition: transform .6s var(--ease); }
.pcard__link:hover .pcard__render { transform: scale(1.04); opacity: 1; }
.hero__products { display: flex; align-items: flex-end; justify-content: center; height: auto; width: min(54vw, 860px); right: max(0vw, calc(var(--gutter) - 40px)); bottom: clamp(20px, 4vh, 60px); }
.hero__products::after { content: none; }
.hero__products img { width: 100%; height: auto; }
.js .hero__products { opacity: 0; translate: 0 50px; transition: opacity 1.2s .4s, translate 1.6s var(--ease) .4s; }
.js .hero.is-ready .hero__products { opacity: 1; translate: 0 0; }
.hero--lp .hero__products { width: min(48vw, 760px); }
.setcard__row img { width: 100%; height: auto; }
.mini__img img.pr { width: 120%; max-width: none; }
@media (max-width: 900px) {
  .hero__products { width: 100%; right: auto; bottom: auto; height: auto; max-height: none; margin-top: 16px; }
}

/* ---------- key ingredients (static grid) ---------- */
.ingr__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-light); border-block: 1px solid var(--line-light); }
.ingr__c { background: var(--ink); padding: clamp(24px, 2.6vw, 36px) clamp(20px, 2.4vw, 32px) clamp(28px, 3vw, 40px) 0; display: grid; gap: 12px; align-content: start; }
.ingr__c:not(:nth-child(3n+1)) { padding-left: clamp(20px, 2.4vw, 32px); }
.ingr__c-top { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.ingr__c-role { font-family: var(--f-display); font-weight: 650; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--tangerine); }
.ingr__c-in { color: rgba(255, 250, 246, .6); }
a.ingr__c-in:hover { color: var(--milk); }
.ingr__c h3 { font-family: var(--f-display); font-weight: 800; font-stretch: 114%; font-size: clamp(1.5rem, 2.1vw, 2rem); letter-spacing: -.035em; line-height: 1; }
.ingr__c p { color: rgba(255, 250, 246, .74); max-width: 30em; }
.ingr + .proof { padding-top: clamp(80px, 10vw, 140px); }
@media (max-width: 900px) { .ingr__grid { grid-template-columns: 1fr 1fr; } .ingr__c, .ingr__c:not(:nth-child(3n+1)) { padding-left: 0; padding-right: 16px; } }
@media (max-width: 600px) { .ingr__grid { grid-template-columns: 1fr; } }
.hero__products { width: min(47vw, 760px); }
.pcard__render { width: 100%; }
.pcard__render { width: 96%; margin-top: -6%; }
.mini__img img.pr { width: 100%; height: 100%; object-fit: cover; object-position: 50% 90%; transform: scale(1.7); transform-origin: 50% 78%; }
.mini__i:hover .mini__img img.pr { transform: scale(1.78); }
.mini__img img.pr { transition: transform .6s var(--ease); }
.mini__img img.pr { transform: scale(1.35); transform-origin: 50% 72%; }
.mini__i:hover .mini__img img.pr { transform: scale(1.42); }
.trust__i .phase { flex: none; }
@media (max-width: 900px) {
  .hero__products, .hero--lp .hero__products { width: 100%; margin-inline: auto; }
}
@media (max-width: 900px) {
  .hero__products, .hero--lp .hero__products { width: calc(100% - 2 * var(--gutter)); }
}

/* ---------- round 3 ---------- */

/* sliding bar: slim stat strip */
.mq--stats { padding-block: 14px; }
.mq--stats .mq__row { gap: 28px; padding-right: 28px; }
.mq--stats .mq__row span { font-family: var(--f-body); font-weight: 450; font-stretch: 100%; font-size: 15px; letter-spacing: 0; color: rgba(255, 250, 246, .82); }
.mq--stats .mq__stat b { font-family: var(--f-display); font-weight: 760; font-stretch: 112%; color: var(--tangerine); margin-right: 4px; }
.mq--stats .mq__mark { width: 14px; opacity: .5; }

/* trust points: boxed, padded, alternate colours on hover */
.trust { border-bottom: 0; padding-block: clamp(28px, 3.5vw, 48px) 0; }
.trust__in { gap: 16px; padding-block: 0; }
.trust__i { gap: 16px; align-items: flex-start; padding: 24px 22px; min-height: 108px; border: 1px solid var(--line); border-radius: 4px; background: var(--milk); transition: background-color .45s ease, color .45s ease, border-color .45s ease; }
.trust__i .phase { margin-top: 2px; transition: color .45s ease; }
.trust__i span { transition: color .45s ease; }
.trust__i:hover { background: var(--ink); color: var(--milk); border-color: var(--ink); }
.trust__i:hover span { color: rgba(255, 250, 246, .7); }
.trust__i:hover .phase { color: var(--tangerine); }
@media (max-width: 600px) { .trust__i { padding: 16px 14px; min-height: 0; } .trust__i span { display: block; } }

/* header: shop link, account icon, bag icon; nav labels highlight on hover */
.hdr__nav a { border-radius: 99px; transition: background-color .3s ease, color .3s ease; }
.hdr__nav a:hover, .hdr__nav a:focus-visible, .hdr.mega-open .has-mega > a { background: rgba(30, 11, 4, .08); }
[data-theme-page="ink"] .hdr:not(.is-solid) .hdr__nav a:hover { background: rgba(255, 250, 246, .14); }
.mega__col a { display: inline-block; padding: 4px 12px; margin-left: -12px; border-radius: 99px; transition: background-color .3s ease, color .3s ease; }
.mega__col a:hover { padding-left: 12px; color: var(--ink); background: var(--blush, #FFE6D6); }
.menu__links a { transition: opacity .5s, transform .8s var(--ease), color .3s ease; }
.menu__links a:hover { color: var(--milk); }
.hdr__shop { display: inline-flex; align-items: center; height: 46px; padding: 0 18px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px currentColor; font-family: var(--f-display); font-weight: 650; font-size: 15px; transition: background-color .3s ease, color .3s ease, transform .25s ease; }
.hdr__shop:hover { background: var(--ink); color: var(--milk); box-shadow: none; transform: scale(1.03); }
.hdr__icon, .hdr__bag { display: inline-grid; grid-auto-flow: column; place-items: center; gap: 2px; height: 46px; min-width: 46px; padding: 0 10px; border-radius: 99px; transition: background-color .3s ease; }
.hdr__icon:hover, .hdr__bag:hover { background: rgba(30, 11, 4, .08); }
.hdr__icon svg, .hdr__bag svg { width: 23px; height: 23px; }
.hdr__bag .bag-count { min-width: 20px; height: 20px; font-size: 11px; margin-left: -4px; transform: translateY(-7px); }
@media (max-width: 900px) { .hdr__shop { display: none; } .hdr__act { gap: 2px; } }

/* account page */
.phead--acct { background: var(--tangerine); }
.acct { padding-block: clamp(50px, 6vw, 90px) clamp(80px, 10vw, 140px); display: grid; gap: clamp(24px, 3vw, 40px); }
.acct__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); }
.acct__card { display: grid; gap: 14px; align-content: start; padding: clamp(26px, 3.4vw, 48px); border: 1px solid var(--line); border-radius: 4px; background: var(--milk); }
.acct__card--alt { background: #FFF1E8; border-color: transparent; }
.acct__card .form { margin-top: 10px; }
.acct__forgot { justify-self: start; font-size: 14px; border-bottom: 1px solid currentColor; }
.acct__track { display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px 48px; align-items: end; padding: clamp(26px, 3.4vw, 48px); border-radius: 4px; background: var(--ink); color: var(--milk); }
.acct__track .tag { color: var(--apricot); }
.acct__fine { color: rgba(255, 250, 246, .7); margin-top: 8px; max-width: 28em; }
.acct__trackform { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; align-items: end; }
.acct__trackform .field label { color: rgba(255, 250, 246, .8); }
.acct__trackform .field input { background: rgba(255, 250, 246, .06); border-color: var(--line-light); color: var(--milk); }
.acct__trackform .btn { height: 54px; }
.acct__perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.acct__help { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; color: var(--ink-60); }
@media (max-width: 900px) {
  .acct__grid, .acct__track { grid-template-columns: 1fr; }
  .acct__trackform { grid-template-columns: 1fr; }
  .acct__perks { grid-template-columns: 1fr 1fr; }
}

/* shop: quiz banner spans the full row */
.grid .grid__promo { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px 48px; min-height: 240px; padding: clamp(32px, 4.5vw, 64px); overflow: hidden; isolation: isolate; }
.grid__promo-copy { display: grid; gap: 14px; max-width: 34em; }
.grid__promo-copy p:not(.tag) { color: rgba(255, 250, 246, .78); }
.grid .grid__promo-mark { width: min(36%, 420px); right: 18%; top: -30%; opacity: .9; }
@media (max-width: 700px) { .grid .grid__promo { flex-direction: column; align-items: flex-start; } .grid .grid__promo-mark { right: -20%; width: 70%; } }
/* hero entrance: one curve, one duration, everything lands together */
.js .hero [data-reveal] { transform: translateY(18px); transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1); transition-delay: var(--d, 0s); }
.js .hero [data-reveal].is-in { transform: none; }
.js .hero__products { translate: 0 28px; transition: opacity .9s cubic-bezier(.22, 1, .36, 1) .2s, translate .9s cubic-bezier(.22, 1, .36, 1) .2s; }
.trust__i { align-items: center; min-height: 96px; }
.band + .jteaser, .band--wait + .jteaser { padding-top: clamp(80px, 10vw, 140px); }
.grid .grid__promo-mark { right: 28%; top: -45%; opacity: .55; }
@media (max-width: 600px) {
  .trust__in { grid-template-columns: 1fr; gap: 10px; }
  .trust__i { min-height: 0; padding: 14px 16px; }
  .acct__perks { grid-template-columns: 1fr; }
}

/* ---------- round 4 (hero thread) ---------- */
/* every CTA highlights in petal pink on hover, with ink text so it stays legible */
.btn.btn:hover, .btn.btn:focus-visible { background: var(--petal); color: var(--ink); }
.btn.btn:hover .btn__dot, .btn.btn:focus-visible .btn__dot { background: var(--ink); }
/* on pink fields the hovered button keeps an ink outline so it never melts into the background */
.quizcta .btn:hover, .quizcta .btn:focus-visible, [data-header-theme="petal"] .btn:hover, .stage--petal .btn:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }

/* hero offer: a rough petal paint stroke behind the text */
.hero__count { background: url('../img/brush-petal.svg') center / 100% 100% no-repeat; color: var(--ink); padding: 20px 30px 18px; width: fit-content; max-width: none; }
.hero__count b { margin-bottom: 4px; }

@media (max-width: 900px) { .hero__count { margin-left: var(--gutter); } }

/* ---------- landing page v2 (dark-marks.html, ads) ---------- */
.btn--milk { --bg: var(--milk); --fg: var(--ink); --dot: var(--tangerine); }
.hero--lp .hero__h { font-size: clamp(3rem, 7.4vw, 8.4rem); }
.lp-loop { padding-block: clamp(80px, 10vw, 140px); }
.lp-loop__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.lp-loop__c { display: grid; gap: 12px; align-content: start; justify-items: start; padding: clamp(22px, 2.4vw, 32px); border-radius: 4px; background: var(--blush); }
.lp-loop__c h3 { font-family: var(--f-display); font-weight: 820; font-stretch: 116%; font-size: clamp(1.3rem, 1.8vw, 1.7rem); letter-spacing: -.04em; line-height: 1; }
.lp-loop__c p { color: var(--ink-60); }
.lp-loop__n { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--milk); font-family: var(--f-display); font-weight: 760; }
.lp-loop__c--fix { background: var(--tangerine); color: var(--ink); }
.lp-loop__c--fix p { color: var(--ink); }
.lp-loop__c--fix .lp-loop__n { background: var(--milk); color: var(--tangerine); }
.lp-loop__c--fix .btn { margin-top: auto; }
.lp-profile { background: linear-gradient(170deg, #FFF4EC, #FFE6D6); padding-block: clamp(80px, 10vw, 140px); }
.lp-profile__in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.lp-profile__stage { position: relative; aspect-ratio: 4 / 5; border-radius: 4px; display: grid; place-items: center; overflow: hidden; }
.lp-profile__render { position: relative; display: block; width: min(64%, 440px); filter: drop-shadow(0 30px 40px rgba(30, 11, 4, .2)); }
.lp-profile__info { display: grid; gap: 18px; justify-items: start; }
.lp-profile__type { font-family: var(--f-display); font-weight: 650; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--tangerine); margin-top: -6px; }
.lp-profile__short { max-width: 34em; font-size: 17px; }
.lp-profile__price { display: flex; align-items: center; gap: 12px; font-variant-numeric: tabular-nums; }
.lp-profile__price b { font-family: var(--f-display); font-weight: 820; font-size: clamp(2rem, 3vw, 2.8rem); letter-spacing: -.04em; }
.lp-profile__price s { color: var(--ink-60); font-size: 18px; }
.lp-profile__buy { flex-wrap: wrap; }
.lp-profile__facts { display: grid; width: 100%; border-top: 1px solid var(--line); }
.lp-profile__facts div { display: grid; grid-template-columns: 9.5em 1fr; gap: 16px; padding-block: 14px; border-bottom: 1px solid var(--line); }
.lp-profile__facts dt { font-family: var(--f-display); font-weight: 720; font-stretch: 110%; }
.lp-profile__facts dd { color: var(--ink-60); }
#how .ingr__grid { grid-template-columns: repeat(3, 1fr); }
.cmp > div:last-child { justify-self: start; }
.lp-trio { background: var(--ink); color: var(--milk); padding-block: clamp(80px, 10vw, 140px); }
.lp-trio__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.lp-prod { display: grid; gap: 20px; align-content: start; }
.lp-prod__stage { aspect-ratio: 1; border-radius: 4px; display: grid; place-items: center; overflow: hidden; }
.lp-prod__stage img { width: 62%; filter: drop-shadow(0 24px 30px rgba(30, 11, 4, .25)); transition: transform .9s var(--ease); }
.lp-prod__stage:hover img { transform: translateY(-8px); }
.lp-prod__meta { display: grid; gap: 10px; justify-items: start; }
.lp-prod__meta > p { color: rgba(255, 250, 246, .72); }
.lp-prod__top { display: flex; width: 100%; justify-content: space-between; align-items: baseline; gap: 12px; }
.lp-prod__top .tag { color: var(--apricot); }
.lp-prod h3 { font-family: var(--f-display); font-weight: 830; font-stretch: 118%; font-size: clamp(1.8rem, 2.6vw, 2.5rem); letter-spacing: -.045em; line-height: 1; }
.lp-prod__type { font-size: 13.5px; color: rgba(255, 250, 246, .55) !important; margin-top: -4px; }
.lp-prod__price { display: flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
.lp-prod__price b { font-family: var(--f-display); font-size: 22px; }
.lp-prod__price s { opacity: .5; }
.lp-prod__price--lg b { font-size: clamp(2rem, 3vw, 2.8rem); letter-spacing: -.04em; }
.lp-prod__keys { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 4px 6px; }
.lp-prod__keys li { font-size: 12.5px; padding: 5px 11px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line-light); color: rgba(255, 250, 246, .8); }
.lp-bundle { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; margin-top: clamp(48px, 6vw, 80px); padding: clamp(20px, 3vw, 40px); border-radius: 4px; background: linear-gradient(170deg, var(--sun), var(--flare)); color: var(--ink); }
.lp-bundle__img img { width: 100%; height: auto; filter: drop-shadow(0 24px 30px rgba(30, 11, 4, .25)); }
.lp-bundle__meta { display: grid; gap: 12px; justify-items: start; }
.lp-bundle__meta .pcard__flag { position: static; background: var(--ink); color: var(--milk); }
.lp-bundle__meta h3 { font-family: var(--f-display); font-weight: 830; font-stretch: 118%; font-size: clamp(2rem, 3.4vw, 3.2rem); letter-spacing: -.045em; line-height: .95; }
.lp-bundle__meta .lp-prod__price s { opacity: .6; }
.lp-use { padding-block: clamp(80px, 10vw, 140px); display: grid; gap: 24px; }
.lp-use .sec-head { margin-bottom: 8px; }
.lp-use__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lp-use__c { padding: clamp(24px, 3vw, 40px); border-radius: 4px; display: grid; gap: 18px; }
.lp-use__c--am { background: linear-gradient(165deg, var(--sun), var(--flare) 70%); }
.lp-use__c--pm { background: var(--ink); color: var(--milk); }
.lp-use__c--pm .tag { color: var(--apricot); }
.lp-use__c ol { display: flex; flex-wrap: wrap; gap: 8px 10px; counter-reset: s; }
.lp-use__c li { counter-increment: s; display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 800; font-stretch: 116%; font-size: clamp(1.3rem, 1.9vw, 1.8rem); letter-spacing: -.04em; }
.lp-use__c li::before { content: counter(s); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; letter-spacing: 0; background: currentColor; }
.lp-use__c li::before { color: inherit; background: rgba(30, 11, 4, .14); }
.lp-use__c--pm li::before { background: rgba(255, 250, 246, .16); }
.lp-use__c ol { gap: 10px 22px; }
.lp-faq__h { display: grid; gap: 24px; align-content: start; justify-items: start; }
@media (max-width: 1000px) {
  .lp-loop__grid { grid-template-columns: 1fr 1fr; }
  .lp-trio__grid { grid-template-columns: 1fr; max-width: 560px; }
  .lp-bundle { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .lp-loop__grid, .lp-use__grid, #how .ingr__grid { grid-template-columns: 1fr; }
  .lp-profile__in { grid-template-columns: 1fr; }
  .lp-profile__stage { aspect-ratio: 1; }
  .lp-profile__buy .btn { width: 100%; }
  .lp-profile__facts div { grid-template-columns: 1fr; gap: 4px; }
  #how .ingr__c { padding-left: 0 !important; }
}

/* ---------- reviews band (home + landing) ---------- */
.revband { padding-block: clamp(70px, 9vw, 120px) clamp(40px, 5vw, 70px); }
.revband__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.revcard { display: grid; gap: 12px; align-content: start; padding: clamp(22px, 2.4vw, 30px); background: var(--blush); border-radius: 4px; }
.revcard h3 { font-family: var(--f-display); font-weight: 780; font-stretch: 112%; font-size: 20px; letter-spacing: -.025em; line-height: 1.1; }
.revcard__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.revcard__by { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; font-size: 13.5px; color: var(--ink-60); margin-top: 4px; }
.revcard__by b { color: var(--ink); font-weight: 650; }
.revcard--sample { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.revcard--sample h3, .revcard--sample p { color: var(--ink-60); }
.stars { display: inline-flex; gap: 3px; }
.stars i { width: 16px; height: 16px; background: var(--tangerine); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.revcard--sample .stars i { background: var(--line); }
@media (max-width: 900px) { .revband__grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .revcard--sample:nth-child(n+4) { display: none; } }

/* ---------- launch range (2026-11-09): out-of-stock flags; listings keep their original spots ---------- */
.pcard__flag--oos { background: var(--ink); color: var(--milk); }
.stage--ink .pcard__flag--oos { background: var(--tangerine); }
.lp-prod__price .lp-prod__oos { position: static; background: var(--tangerine); color: var(--ink); }

/* ---------- 2026-11-09: editorial photos, static routine, slogan bands ---------- */
.ph { display: block; width: 100%; height: 100%; object-fit: cover; }

/* homepage routine: morning vs evening, fully static */
.rtn { padding-block: clamp(80px, 10vw, 140px); }
.rtn__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rtn__col { display: grid; grid-template-rows: auto 1fr; border-radius: 4px; overflow: hidden; background: var(--blush); }
.rtn__col--pm { background: var(--ink); color: var(--milk); }
.rtn__photo { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; }
.rtn__badge { position: absolute; left: 16px; top: 16px; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 10px; border-radius: 99px; background: var(--milk); color: var(--ink); font-family: var(--f-display); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.rtn__col--pm .rtn__badge { background: var(--ink); color: var(--milk); }
.rtn__badge i { display: grid; width: 18px; height: 18px; color: var(--tangerine); }
.rtn__badge svg, .rtn__thumb--icon svg { display: block; width: 100%; height: 100%; }
.rtn__body { padding: clamp(22px, 2.6vw, 36px); display: grid; gap: 18px; align-content: start; }
.rtn__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; }
.rtn__head h3 { font-family: var(--f-display); font-weight: 850; font-stretch: 120%; font-size: clamp(2rem, 3.4vw, 3.2rem); letter-spacing: -.05em; line-height: .9; }
.rtn__head span { font-size: 14px; color: var(--ink-60); }
.rtn__col--pm .rtn__head span { color: rgba(255, 250, 246, .65); }
.rtn__steps { display: grid; border-top: 1.5px solid var(--line); }
.rtn__step { display: grid; grid-template-columns: 28px 60px 1fr auto; gap: 16px; align-items: center; min-height: 100px; padding-block: 14px; border-bottom: 1.5px solid var(--line); }
.rtn__col--pm .rtn__steps, .rtn__col--pm .rtn__step { border-color: var(--line-light); }
.rtn__n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--milk); font-family: var(--f-display); font-weight: 760; font-size: 13px; }
.rtn__col--pm .rtn__n { background: var(--tangerine); color: var(--ink); }
.rtn__step--note .rtn__n, .rtn__col--pm .rtn__step--note .rtn__n { visibility: hidden; }
.rtn__thumb { width: 60px; height: 72px; border-radius: 4px; overflow: hidden; display: grid; place-items: center; }
.rtn__thumb.stage--sun { background: #FFD2B6; } .rtn__thumb.stage--petal { background: #FFD0DB; } .rtn__thumb.stage--ink { background: #3A1A0C; }
.rtn__col--pm .rtn__thumb.stage--sun { background: #4A2312; } .rtn__col--pm .rtn__thumb.stage--petal { background: #4A2312; }
.rtn__thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.32); transform-origin: 50% 52%; }
.rtn__thumb--icon { padding: 17px; background: rgba(30, 11, 4, .06); color: var(--tangerine); }
.rtn__col--pm .rtn__thumb--icon { background: rgba(255, 250, 246, .07); color: var(--apricot); }
.rtn__what { display: grid; gap: 4px; }
.rtn__what b { font-family: var(--f-display); font-weight: 820; font-stretch: 116%; font-size: 22px; letter-spacing: -.035em; line-height: 1; }
.rtn__what span { font-family: var(--f-display); font-size: 11.5px; font-weight: 660; letter-spacing: .12em; text-transform: uppercase; color: var(--tangerine); }
.rtn__col--pm .rtn__what span { color: var(--apricot); }
.rtn__how { max-width: 14em; font-size: 14.5px; line-height: 1.35; text-align: right; color: var(--ink-60); }
.rtn__col--pm .rtn__how { color: rgba(255, 250, 246, .7); }
.rtn__set { margin-top: 16px; display: grid; grid-template-columns: minmax(150px, 230px) 1fr auto auto; gap: 16px 28px; align-items: center; padding: 14px 28px 14px 14px; border-radius: 4px; background: var(--tangerine); color: var(--ink); }
.rtn__set-img img { display: block; width: 100%; height: auto; }
.rtn__set-copy { display: grid; gap: 4px; }
.rtn__set-copy h3 { font-family: var(--f-display); font-weight: 840; font-stretch: 118%; font-size: clamp(1.5rem, 2.4vw, 2.2rem); letter-spacing: -.045em; line-height: 1; }
.rtn__set-copy p:last-child { font-size: 15px; }
.rtn__set-price { display: grid; justify-items: end; font-variant-numeric: tabular-nums; }
.rtn__set-price b { font-family: var(--f-display); font-weight: 850; font-size: clamp(1.9rem, 2.8vw, 2.7rem); letter-spacing: -.045em; line-height: 1; }
.rtn__set-price s { font-size: 16px; opacity: .7; }
.rtn__set-price span { font-size: 12.5px; }
@media (max-width: 1100px) { .rtn__set { grid-template-columns: 180px 1fr; } .rtn__set-price { justify-items: start; } }
@media (max-width: 860px) {
  .rtn__grid { grid-template-columns: 1fr; }
  .rtn__step { grid-template-columns: 28px 52px 1fr; gap: 6px 14px; min-height: 0; }
  .rtn__thumb { width: 52px; height: 64px; grid-row: span 2; }
  .rtn__n { grid-row: span 2; }
  .rtn__how { grid-column: 3; text-align: left; max-width: none; font-size: 14px; }
  .rtn__set { grid-template-columns: 1fr; padding: 14px 18px 22px; }
  .rtn__set .btn { width: 100%; }
}

/* split photo band with a slogan */
.pband { display: grid; grid-template-columns: 1fr 1fr; min-height: min(88vh, 860px); }
.pband__photo { position: relative; margin: 0; min-height: 420px; overflow: hidden; }
.pband__photo .ph { position: absolute; inset: 0; }
.pband--flip .pband__photo { order: 2; }
.pband__copy { display: grid; align-content: center; justify-items: start; gap: 22px; padding: clamp(48px, 7vw, 120px) clamp(24px, 6vw, 110px); }
.pband--ink { background: var(--ink); color: var(--milk); }
.pband--ink .tag { color: var(--apricot); }
.pband--sun { background: var(--sun); color: var(--ink); }
.pband--petal { background: var(--petal); color: var(--ink); }
.pband__h { max-width: 11ch; font-family: var(--f-display); font-weight: 860; font-stretch: 120%; font-size: clamp(2.7rem, 5.6vw, 6.2rem); letter-spacing: -.055em; line-height: .9; text-wrap: balance; }
.pband__p { max-width: 30em; font-size: clamp(1.02rem, 1.3vw, 1.22rem); }
.pband--ink .pband__p { color: rgba(255, 250, 246, .78); }
@media (max-width: 860px) {
  .pband { grid-template-columns: 1fr; min-height: 0; }
  .pband__photo { min-height: 0; aspect-ratio: 1 / 1.08; }
  .pband--flip .pband__photo { order: 0; }
  .pband__copy { padding: 44px var(--gutter) 56px; }
}

/* homepage "your best look": copy beside a portrait */
.bestlook__in { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 5vw, 90px); align-items: center; }
.bestlook__in .bestlook__h { font-size: clamp(3rem, 6.2vw, 7rem); margin-bottom: clamp(28px, 3.5vw, 48px); }
.bestlook__in .bestlook__grid { grid-template-columns: 1fr; gap: 0; }
.bestlook__in .pillar { grid-template-columns: 34px 1fr; column-gap: 18px; row-gap: 8px; padding-block: 20px 22px; border-top: 2px solid var(--ink); }
.bestlook__in .pillar .phase { grid-row: span 2; }
.bestlook__in .pillar h3, .bestlook__in .pillar p { grid-column: 2; }
.bestlook__photo { margin: 0; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; }
@media (max-width: 860px) { .bestlook__in { grid-template-columns: 1fr; } .bestlook__photo { aspect-ratio: 1 / 1.1; } }

/* slogans */
.ftr__slogan { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px 24px; margin-top: clamp(16px, 2vw, 28px); }
.ftr__slogan b { text-wrap: balance; font-family: var(--f-display); font-weight: 830; font-stretch: 118%; font-size: clamp(1.5rem, 3.4vw, 3.2rem); letter-spacing: -.045em; line-height: 1; color: var(--milk); }
.ftr__slogan span { font-family: var(--f-display); font-size: 12px; font-weight: 640; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 250, 246, .6); }
.phead__slogan { margin-top: clamp(16px, 2vw, 26px); font-family: var(--f-display); font-weight: 780; font-stretch: 116%; font-size: clamp(1.25rem, 2.1vw, 1.9rem); letter-spacing: -.035em; line-height: 1.05; }
.phead--about .phead__slogan { color: var(--ink); }

/* about, quiz, journal photos */
.letter__photo { margin: 0; width: 100%; max-width: 360px; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; }
.quiz__photo { margin: 0; width: min(100%, 360px); aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; }
@media (min-width: 900px) {
  .quiz__intro { grid-template-columns: 1fr minmax(260px, 28vw); column-gap: 6vw; align-items: center; }
  .quiz__intro > :not(.quiz__photo) { grid-column: 1; }
  .quiz__photo { grid-column: 2; grid-row: 1 / span 3; width: 100%; }
}
.acard__img .ph, .jfeat__img .ph { transition: transform 1.2s var(--ease); }
.acard a:hover .acard__img .ph, .jfeat__card:hover .jfeat__img .ph { transform: scale(1.05); }
.post__cover:has(.ph) { opacity: 1; }
@media (max-width: 900px) { .post__cover:has(.ph) { position: relative; right: auto; top: auto; z-index: 0; display: block; width: min(72vw, 420px); margin: 30px auto 0; opacity: 1; } }

/* product page gallery: rendered packshots, real texture and scene photos */
.pdp__render--tall { width: min(86%, 640px); }
.pdp__view { position: relative; }
.pdp__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pdp__view .pdp__vcap--on { position: absolute; left: 16px; bottom: 16px; padding: 9px 15px; border-radius: 99px; background: var(--milk); color: var(--ink); font-size: 14px; }

/* ---------- 2026-11-09: afterglow joins the main row (4 live/oos cards, nothing moved) ---------- */
@media (min-width: 1101px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
  .catalog__grid .setcard { grid-column: 1 / -1; aspect-ratio: auto; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: center; gap: 8px 48px; padding: 28px 40px; }
  .catalog__grid .setcard .pcard__flag { grid-column: 1 / -1; }
  .catalog__grid .setcard__row { padding-block: 0; }
  .catalog__grid .setcard__row img { max-height: 300px; width: auto; }
  .catalog__grid .setcard__t { font-size: 32px; }
}
@media (min-width: 601px) and (max-width: 1100px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .catalog__grid .setcard { grid-column: 1 / -1; aspect-ratio: auto; }
}
@media (min-width: 1101px) { .lp-trio__grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 601px) and (max-width: 1100px) { .lp-trio__grid { grid-template-columns: repeat(2, 1fr); } }
/* 2026-11-09: long names (afterglow) on the two-up phone grid: price drops under the name instead of clipping */
@media (max-width: 600px) {
  .pcard__meta { grid-template-columns: minmax(0, 1fr); }
  .pcard__name { font-size: 24px; overflow-wrap: anywhere; }
  .pcard__price { grid-row: 2; }
}


/* =====================================================================================
   Pre-order system (2026-11-11): bag v2, checkout hand-over, codes, consent, legal row
   ===================================================================================== */
.bag__panel { gap: 0; }
.bag__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: 14px; padding: 0 8px 16px 0; margin-right: -8px; }
.bag__scroll .bag__progress { margin-block: 18px 2px; }
.bag__list { flex: none; overflow: visible; }
.bag__item { align-items: start; }
.bag__item .bag__when { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--ink); font-size: 12.5px; font-weight: 560; }
.bag__when i { width: 7px; height: 7px; border-radius: 50%; background: var(--tangerine); flex: none; }
.bag__price { display: grid; justify-items: end; gap: 3px; text-align: right; }
.bag__price b { font-family: var(--f-body); font-stretch: 100%; font-weight: 700; font-size: 16px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.bag__price span { font-size: 12px; color: var(--ink-60); white-space: nowrap; }
.bag__q button:disabled { opacity: .35; cursor: default; }
.bag__ship { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; font-size: 13.5px; display: grid; gap: 8px; }
.bag__ship p { display: grid; gap: 2px; }
.bag__ship p b { font-family: var(--f-display); font-weight: 760; font-stretch: 112%; font-size: 15px; letter-spacing: -.02em; }
.bag__ship p span, .bag__ship li span { color: var(--ink-60); }
.bag__ship ul { display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.bag__ship li { display: flex; justify-content: space-between; gap: 12px; }
.bag__ship li b { font-weight: 600; }
.bag__code { display: grid; gap: 8px; font-size: 14px; }
.bag__code-open { justify-self: start; font-weight: 600; border-bottom: 1.5px solid currentColor; padding-bottom: 1px; }
.bag__code-form { display: flex; gap: 6px; padding: 5px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .3s; }
.bag__code-form:focus-within { box-shadow: inset 0 0 0 1.5px var(--tangerine), 0 0 0 4px rgba(255, 90, 31, .18); }
.bag__code-form input { flex: 1; min-width: 0; border: 0; background: none; outline: none; padding: 0 14px; height: 40px; text-transform: uppercase; letter-spacing: .04em; font-size: 16px; }
.bag__code-form input::placeholder { text-transform: none; letter-spacing: 0; color: var(--ink-60); }
.bag__code-form button { height: 40px; padding: 0 18px; border-radius: 99px; background: var(--ink); color: var(--milk); font-family: var(--f-display); font-weight: 680; font-stretch: 110%; font-size: 14px; transition: background-color .25s ease; }
.bag__code-form button:hover { background: var(--tangerine); }
.bag__code-on { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--blush); }
.bag__code-on button { text-decoration: underline; color: var(--ink-60); font-size: 13px; }
.bag__code-msg { font-size: 13px; color: var(--ink-60); }
.bag__code-msg.is-bad { color: #B3261E; }
.bag__sums { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 15px; }
.bag__row--muted { color: var(--ink-60); }
.bag__foot { gap: 10px; }
.bag__row--total { align-items: baseline; font-weight: 600; }
.bag__row--total b { font-family: var(--f-display); font-weight: 800; font-stretch: 114%; font-size: 26px; letter-spacing: -.03em; transition: opacity .2s; }
.bag__foot.is-syncing .bag__row--total b { opacity: .4; }
.bag__terms { padding: 12px 14px; border-radius: 12px; background: var(--blush); color: var(--ink); font-size: 13.5px; line-height: 1.45; }
.bag__terms a { text-decoration: underline; text-underline-offset: 2px; }
.bag__terms.is-error { box-shadow: inset 0 0 0 2px #B3261E; animation: shake .5s; }
.bag__err { font-size: 13.5px; line-height: 1.4; color: #B3261E; font-weight: 560; }
.bag__secure { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: var(--ink-60); }
.bag__secure svg { width: 13px; height: 13px; }
.bag__secure a { text-decoration: underline; text-underline-offset: 2px; }
.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn__dot { animation: clvPulse .9s ease-in-out infinite; }
@keyframes clvPulse { 50% { transform: scale(1.9); opacity: .5; } }
.is-soldout { opacity: .5; cursor: not-allowed; }
.is-busy { opacity: .6; pointer-events: none; }
@media (max-width: 600px) {
  .bag__panel { padding-left: 16px; padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .bag__item { grid-template-columns: 60px 1fr auto; gap: 12px; }
  .bag__terms { font-size: 13px; padding: 10px 12px; }
  .bag__row--total b { font-size: 23px; }
}
@media (max-height: 640px) {
  .bag__panel { overflow-y: auto; }
  .bag__scroll { flex: none; overflow: visible; }
}

/* cookie choices */
.consent { position: fixed; z-index: 150; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: min(440px, calc(100vw - 32px)); padding: 20px; border-radius: 16px; background: var(--ink); color: var(--milk); display: grid; gap: 14px; box-shadow: 0 30px 70px -30px rgba(30, 11, 4, .6); transform: translateY(24px); opacity: 0; transition: transform .5s var(--ease), opacity .4s; }
.consent.is-on { transform: none; opacity: 1; }
.consent__t { font-size: 14.5px; line-height: 1.5; color: rgba(255, 250, 246, .82); }
.consent__t b { display: block; font-family: var(--f-display); font-weight: 800; font-stretch: 116%; font-size: 19px; letter-spacing: -.03em; color: var(--milk); margin-bottom: 4px; }
.consent__t a { text-decoration: underline; text-underline-offset: 3px; color: var(--apricot); }
.consent__opts { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.consent__opts .check { color: rgba(255, 250, 246, .78); font-size: 13.5px; }
.consent__opts .check b { color: var(--milk); margin-right: 4px; }
.consent__btns { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; }
.consent__b { height: 46px; padding: 0 16px; border-radius: 99px; background: var(--milk); color: var(--ink); font-family: var(--f-display); font-weight: 680; font-stretch: 110%; font-size: 14.5px; white-space: nowrap; transition: background-color .25s ease, color .25s ease; }
.consent__b:hover { background: var(--petal); }
.consent__b--line { background: transparent; color: var(--milk); box-shadow: inset 0 0 0 1.5px var(--line-light); }
.consent__b--line:hover { background: rgba(255, 250, 246, .12); }
.consent :focus-visible { outline-color: var(--sun); }
@media (max-width: 420px) { .consent__btns { grid-template-columns: 1fr 1fr; } .consent__b--line { grid-column: 1 / -1; order: 3; } }

/* legal links under the footer */
.ftr__legal { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-block: 0 calc(26px + env(safe-area-inset-bottom, 0px)); font-size: 13px; color: rgba(255, 250, 246, .6); }
.ftr__legal a, .ftr__legal button { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 250, 246, .3); transition: color .25s; }
.ftr__legal a:hover, .ftr__legal button:hover { color: var(--milk); }
.ftr .ftr__bot { padding-bottom: 18px; }
.ftr--min { padding-top: 12px; }

/* ad landing pages: wordmark, bag and one button */
.announce--still p { opacity: 1 !important; transform: none !important; }
.is-ad .hdr__act { margin-left: auto; }
.is-ad .hdr__act .btn { display: inline-flex; }
@media (max-width: 600px) { .is-ad .hdr__act .btn { height: 42px; padding: 0 16px 0 18px; font-size: 13.5px; } .is-ad .hdr__act .btn .btn__dot { display: none; } }

/* the toast never sits on top of the open bag */
.bag-open .toast { transform: translate(-50%, calc(100% + 60px)); visibility: hidden; }

/* ---------- legal pages ---------- */
.legal { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: start; padding-bottom: clamp(80px, 10vw, 140px); }
.legal__nav { position: sticky; top: 120px; display: grid; gap: 4px; font-size: 15px; }
.legal__nav a { padding: 10px 14px; border-radius: 10px; color: var(--ink-60); transition: background-color .25s, color .25s; }
.legal__nav a:hover { color: var(--ink); }
.legal__nav a[aria-current="page"] { background: var(--blush); color: var(--ink); font-weight: 600; }
.prose--legal { padding-block: 0; font-size: 17px; line-height: 1.65; max-width: 74ch; gap: 16px; }
.prose--legal h2 { font-size: clamp(1.35rem, 1.9vw, 1.7rem); margin-top: 28px; scroll-margin-top: 120px; }
.prose--legal h2:first-of-type { margin-top: 8px; }
.prose--legal ul { display: grid; gap: 10px; }
.prose--legal ul li { position: relative; padding-left: 22px; }
.prose--legal ul li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--tangerine); }
.prose--legal a, .linklike, .po-facts .fine a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(30, 11, 4, .35); }
.prose--legal a:hover, .linklike:hover { text-decoration-color: var(--tangerine); }
.linklike { font: inherit; color: inherit; }
.legal__meta { font-size: 13px; color: var(--ink-60); }
.prose--legal .lede { font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.45; max-width: none; }
.tbc { background: var(--sun); color: var(--ink); padding: 1px 8px; border-radius: 6px; font-size: .92em; }
.ltable { display: grid; border-top: 2px solid var(--ink); font-size: 16px; line-height: 1.5; }
.ltable > [role="row"] { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 6px 28px; padding-block: 16px; border-bottom: 1px solid var(--line); }
.ltable [role="rowheader"] { font-family: var(--f-display); font-weight: 720; font-stretch: 110%; letter-spacing: -.01em; }
.ltable [role="cell"] { color: var(--ink-60); }
.ltable--4 > [role="row"] { grid-template-columns: 1fr 1.7fr 1.5fr 1.1fr; font-size: 15px; }
.ltable__head [role="columnheader"] { font-size: 12px; font-weight: 640; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-60); }
.wform { max-width: 560px; padding: clamp(20px, 3vw, 32px); border-radius: 16px; background: #FFF1E8; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.wdone { max-width: 560px; display: grid; gap: 12px; padding: clamp(20px, 3vw, 32px); border-radius: 16px; background: var(--ink); color: var(--milk); outline: none; }
.wdone .tag { color: var(--apricot); }
.wdone p { color: rgba(255, 250, 246, .8); }
.wdone b { color: var(--milk); }
.modelform { margin: 0; padding: 20px 24px; border-left: 3px solid var(--tangerine); background: var(--blush); border-radius: 0 12px 12px 0; font-size: 15.5px; line-height: 1.9; }
.legal__cards { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.legal__cards a { position: relative; display: grid; gap: 8px; height: 100%; padding: 24px 24px 54px; border-radius: 4px; background: var(--blush); transition: background-color .35s, color .35s; }
.legal__cards a:hover { background: var(--ink); color: var(--milk); }
.legal__cards b { font-family: var(--f-display); font-weight: 800; font-stretch: 116%; font-size: 22px; letter-spacing: -.035em; line-height: 1; }
.legal__cards span { font-size: 14.5px; opacity: .7; }
.legal__cards i { position: absolute; left: 24px; bottom: 18px; font-style: normal; color: var(--tangerine); font-size: 20px; }
.legal__cards + .prose--legal { grid-column: 1 / -1; margin-top: 20px; }
@media (max-width: 900px) {
  .legal { grid-template-columns: 1fr; }
  .legal__nav { position: static; display: flex; gap: 6px; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .legal__nav::-webkit-scrollbar { display: none; }
  .legal__nav a { white-space: nowrap; box-shadow: inset 0 0 0 1px var(--line); border-radius: 99px; padding: 9px 16px; }
  .legal__nav a[aria-current="page"] { box-shadow: none; }
}
@media (max-width: 720px) {
  .prose--legal { font-size: 16px; }
  .ltable > [role="row"], .ltable--4 > [role="row"] { grid-template-columns: 1fr; gap: 4px; }
  .ltable__head { display: none !important; }
  .ltable--4 [role="cell"]::before { content: attr(data-l) ": "; color: var(--ink); font-weight: 600; }
}

/* ---------- how pre-orders work ---------- */
.po-steps .lp-loop__c .tag { color: var(--tangerine); }
.po-steps .lp-loop__c--fix .tag { color: var(--ink); }
.po-facts { display: grid; gap: clamp(24px, 3vw, 40px); padding-bottom: clamp(70px, 9vw, 120px); }
.po-facts .ltable { max-width: 980px; font-size: 17px; }
.po-facts__cta { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- checkout stand-in (preview mode) ---------- */
.cop { padding-top: calc(var(--ann) + var(--hdr) + 28px); padding-bottom: clamp(70px, 9vw, 120px); display: grid; gap: 24px; }
.cop__note { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 14px 18px; border-radius: 12px; background: var(--sun); font-size: 14.5px; }
.cop__note b { font-family: var(--f-display); font-weight: 760; font-stretch: 112%; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; padding: 4px 10px; border-radius: 99px; background: var(--ink); color: var(--milk); }
.cop__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.cop__steps { display: grid; gap: 18px; }
.cop__list { display: grid; gap: 0; border-top: 2px solid var(--ink); counter-reset: c; }
.cop__list li { counter-increment: c; display: grid; grid-template-columns: 34px 11em minmax(0, 1fr); gap: 4px 12px; padding-block: 16px; border-bottom: 1px solid var(--line); align-items: baseline; }
.cop__list li::before { content: counter(c); font-family: var(--f-display); font-weight: 800; color: var(--tangerine); }
.cop__list b { font-family: var(--f-display); font-weight: 720; font-stretch: 110%; }
.cop__list span { color: var(--ink-60); }
.cop__rec { display: grid; gap: 10px; padding: 18px 20px; border-radius: 12px; border: 1px dashed rgba(30, 11, 4, .3); }
.cop__rec dl { display: grid; gap: 8px; font-size: 13.5px; }
.cop__rec dl div { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 12px; }
.cop__rec dt { font-weight: 600; }
.cop__rec dd { color: var(--ink-60); overflow-wrap: anywhere; }
.cop__sum { position: sticky; top: 110px; display: grid; gap: 16px; padding: clamp(20px, 2.6vw, 32px); border-radius: 16px; background: #FFF1E8; }
.cop__lines { display: grid; gap: 14px; }
.cop__lines li { display: flex; justify-content: space-between; gap: 16px; align-items: start; font-variant-numeric: tabular-nums; }
.cop__lines li div { display: grid; gap: 2px; }
.cop__lines li div b { font-family: var(--f-display); font-stretch: 114%; font-size: 18px; letter-spacing: -.03em; }
.cop__lines li div span { font-size: 13px; color: var(--ink-60); }
.cop__lines .bag__when { display: flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 560; font-size: 12.5px; }
.cop__back { justify-self: center; font-size: 14px; color: var(--ink-60); text-decoration: underline; text-underline-offset: 3px; }
.cop__empty, .cop__done { display: grid; gap: 20px; justify-items: start; max-width: 760px; padding-block: clamp(20px, 4vw, 60px); outline: none; }
.cop__done .cop__list { width: 100%; }
.cop__done .tag { color: var(--tangerine); }
@media (max-width: 900px) {
  .cop__grid { grid-template-columns: 1fr; }
  .cop__sum { position: static; order: -1; }
  .cop__list li { grid-template-columns: 34px minmax(0, 1fr); }
  .cop__list li span { grid-column: 2; }
  .cop__rec dl div { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- go-live check ---------- */
.chk { display: grid; gap: 22px; padding-bottom: clamp(80px, 10vw, 140px); max-width: 1000px; margin-left: 0; }
.chk__list { display: grid; border-top: 2px solid var(--ink); }
.chk__i { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 16px; padding-block: 14px; border-bottom: 1px solid var(--line); align-items: start; }
.chk__i div { display: grid; gap: 2px; }
.chk__i div b { font-family: var(--f-display); font-weight: 720; font-stretch: 110%; }
.chk__i div span { color: var(--ink-60); font-size: 15px; overflow-wrap: anywhere; }
.chk__s { justify-self: start; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 99px; background: var(--blush); }
.chk__i--ok .chk__s { background: #1F7A4D; color: #fff; }
.chk__i--bad .chk__s { background: #B3261E; color: #fff; }
.chk__i--warn .chk__s { background: var(--sun); }

/* ---------- ad landing pages (2026-11-11): routine, no-sting, quiz, creator ---------- */
.lp-assure { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13.5px; font-weight: 520; }
.lp-assure li { display: inline-flex; align-items: center; gap: 8px; }
.lp-assure li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; }
.hero__photo--prod { width: min(50vw, 820px); height: auto; right: clamp(0px, 2vw, 40px); bottom: clamp(10px, 5vh, 70px); }
.hero__photo--prod img { width: 100%; height: auto; }
.hero--prod .hero__foot { max-width: 520px; }
.cmp__row--sum { border-bottom: 2px solid var(--ink); }
.cmp__row--sum span { font-weight: 700; color: var(--ink) !important; }
#price .cmp__row span:nth-child(2), #price .cmp__row span:nth-child(3) { font-variant-numeric: tabular-nums; font-size: 18px; }
#price .cmp__row span:nth-child(2):not([role="columnheader"]) { text-decoration: none; }
.lead { background: var(--sun); padding-block: clamp(56px, 7vw, 100px); }
.lead__in { display: grid; grid-template-columns: 1fr minmax(0, 520px); gap: 24px clamp(32px, 6vw, 96px); align-items: center; }
.lead__copy { display: grid; gap: 14px; }
.lead__copy .lede { max-width: 28em; }
.lead__form { display: grid; gap: 12px; }
.lead__form .fine { color: var(--ink); opacity: .75; }
.lead__form .fine a, .quiz__gate .fine a { text-decoration: underline; text-underline-offset: 3px; }
.lp-final { position: relative; overflow: hidden; isolation: isolate; background: var(--tangerine); padding-block: clamp(80px, 11vw, 160px); }
.lp-final__sun { position: absolute; z-index: -1; right: -18vw; top: -10%; width: min(80vw, 1000px); opacity: .9; }
.lp-final__sun svg { width: 100%; }
.lp-final__in { display: grid; gap: 22px; justify-items: start; }
.lp-final .d-xl { max-width: 12ch; }
.lp-duo { padding-block: clamp(40px, 6vw, 90px); }
.lp-duo .lp-bundle { margin-top: 0; }
.lp-bundle__meta h2 { font-family: var(--f-display); font-weight: 830; font-stretch: 118%; font-size: clamp(2rem, 3.4vw, 3.2rem); letter-spacing: -.045em; line-height: .95; }
.lp-duo__list { display: grid; gap: 8px; width: 100%; padding-block: 12px; border-block: 1px solid rgba(30, 11, 4, .2); }
.lp-duo__list li { display: grid; gap: 1px; }
.lp-duo__list b { font-family: var(--f-display); font-weight: 760; font-stretch: 112%; }
.lp-duo__list span { font-size: 14px; opacity: .8; }
.lp-slow { padding-top: 0; }
.quiz__gate { display: grid; gap: 22px; justify-items: start; max-width: 720px; padding-top: 4vh; animation: qIn .9s var(--ease); }
.quiz__gate .inline-form { width: 100%; }
.quiz__skip { font-size: 15px; }
.quiz__gate .fine { color: var(--ink); opacity: .75; max-width: 40em; }
.quiz + .trust { border-bottom: 0; padding-block: clamp(30px, 4vw, 56px); }
.c-code { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 16px 10px 10px; border-radius: 99px; background: var(--milk); font-size: 14px; font-weight: 520; }
.c-code b { font-family: var(--f-display); font-weight: 780; font-stretch: 112%; letter-spacing: .06em; padding: 6px 12px; border-radius: 99px; background: var(--ink); color: var(--milk); }
.c-quote { padding-block: clamp(56px, 7vw, 100px) 0; }
.c-quote figure { margin: 0; display: grid; gap: 18px; max-width: 900px; }
.c-quote blockquote { margin: 0; font-family: var(--f-display); font-weight: 780; font-stretch: 114%; font-size: clamp(1.6rem, 3vw, 2.8rem); letter-spacing: -.035em; line-height: 1.05; }
.c-quote figcaption { display: flex; gap: 10px; font-size: 15px; }
.c-quote figcaption span { color: var(--ink-60); }
.c-disclose { padding-block: 18px; font-size: 13px; color: var(--ink-60); }
.acct__result { grid-column: 1 / -1; display: grid; gap: 10px; padding: 22px 24px; border-radius: 12px; background: rgba(255, 250, 246, .08); outline: none; }
.acct__result h3 { font-family: var(--f-display); font-weight: 800; font-stretch: 116%; font-size: clamp(1.3rem, 2vw, 1.8rem); letter-spacing: -.035em; line-height: 1.05; }
.acct__result p, .acct__result li span { color: rgba(255, 250, 246, .75); }
.acct__result ul { display: grid; gap: 6px; padding-block: 10px; border-block: 1px solid var(--line-light); }
.acct__result li { display: flex; justify-content: space-between; gap: 16px; }
.acct__result a { text-decoration: underline; text-underline-offset: 3px; color: var(--apricot); }
.acct__tracks { display: flex; flex-wrap: wrap; gap: 6px 18px; }
@media (max-width: 900px) {
  .hero__photo--prod { position: relative; right: auto; bottom: auto; width: calc(100% - 2 * var(--gutter)); max-width: 560px; height: auto; max-height: none; margin: 28px auto 0; }
  .lead__in { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .lp-assure { font-size: 13px; gap: 4px 14px; }
  .lead .inline-form, .quiz__gate .inline-form { flex-direction: column; border-radius: 22px; padding: 8px; }
  .lead .inline-form input, .quiz__gate .inline-form input { height: 50px; }
  .lead .inline-form .btn, .quiz__gate .inline-form .btn { width: 100%; }
  .c-code { border-radius: 18px; }
}
@media (max-width: 600px) {
  .is-ad .hdr__act { gap: 0; }
  .is-ad .hdr__act .btn { height: 40px; padding: 0 14px; font-size: 13px; }
}
@media (max-width: 380px) { .is-ad .hdr__logo .logo { transform: scale(.88); transform-origin: left center; } }

.btn__t > .hdr__price { display: inline; }
@media (max-width: 480px) { .hdr__price { display: none !important; } }
@media (max-width: 700px) { .announce__more { display: none; } }
.hero__photo--prod { width: min(38vw, 600px); right: clamp(8px, 5vw, 110px); bottom: clamp(0px, 3vh, 40px); }
.lp-bundle--duo .lp-bundle__img img { display: block; width: auto; max-width: 100%; max-height: 540px; margin-inline: auto; }
@media (max-width: 900px) {
  .hero__photo--prod { width: min(78%, 420px); max-width: none; margin: 20px auto 0; }
}

.announce__more { white-space: pre; }

/* ---------- account: signed-out extras, signed-in view, order cards ---------- */
.acct__p { color: var(--ink-60); max-width: 30em; }
.acct__ticks { display: grid; gap: 6px; margin-bottom: 6px; }
.acct__ticks li { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.acct__ticks li::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--tangerine); flex: none; }
.acct__card .btn { justify-self: start; }
.acct__card .btn--wide { justify-self: stretch; }
.acct__note { padding: 14px 18px; border-radius: 12px; background: var(--blush); font-weight: 600; }
.acct__note--bad { background: #FBD9D3; color: #7A1509; }
.acct__sample { padding: 12px 16px; border-radius: 12px; background: var(--sun); font-size: 14.5px; }
.acct__in { display: grid; gap: clamp(20px, 2.4vw, 32px); outline: none; }
.acct__top { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; padding-bottom: clamp(18px, 2vw, 26px); border-bottom: 1px solid var(--line); }
.acct__top .tag { margin-bottom: 8px; }
.acct__cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
.acct__orders, .acct__aside { display: grid; gap: 16px; }
.acct__h { font-family: var(--f-display); font-weight: 800; font-stretch: 116%; font-size: clamp(1.25rem, 1.8vw, 1.6rem); letter-spacing: -.03em; }
.acct__side { display: grid; gap: 12px; align-content: start; padding: clamp(20px, 2.2vw, 28px); border: 1px solid var(--line); border-radius: 4px; background: var(--milk); }
.acct__side h3 { font-family: var(--f-display); font-weight: 800; font-stretch: 116%; font-size: 1.3rem; letter-spacing: -.03em; line-height: 1.05; }
.acct__side p { color: var(--ink-60); }
.acct__side.form { gap: 14px; }
.acct__link { justify-self: start; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; padding: 6px 0; margin-right: 14px; color: var(--ink); background: none; cursor: pointer; }
.acct__link:hover { color: var(--tangerine); }
.acct__ampm { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-block: 12px; border-block: 1px solid var(--line); }
.acct__ampm b { font-family: var(--f-display); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }
.acct__ampm ul { display: grid; gap: 4px; margin-top: 6px; }
.acct__ampm a { text-decoration: underline; text-underline-offset: 3px; }
.acct__addr { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.acct__addr b { font-family: var(--f-display); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.acct__addr small { color: var(--ink-60); font-size: 13.5px; }
.acct__save { justify-self: start; height: 46px; padding: 0 22px; border-radius: 99px; background: var(--ink); color: var(--milk); font-family: var(--f-display); font-weight: 680; font-stretch: 110%; font-size: 14.5px; transition: background-color .25s ease; }
.acct__save:hover { background: var(--tangerine); color: var(--ink); }
.acct__side .check b { color: var(--ink); display: block; }

.ord { display: grid; gap: 16px; padding: clamp(20px, 2.4vw, 30px); border: 1px solid var(--line); border-radius: 4px; background: var(--milk); }
.ord--none p { color: var(--ink-60); }
.ord__h { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.ord h3 { font-family: var(--f-display); font-weight: 800; font-stretch: 116%; font-size: clamp(1.35rem, 2vw, 1.75rem); letter-spacing: -.035em; line-height: 1; }
.ord__h p { color: var(--ink-60); margin-top: 6px; font-size: 14.5px; }
.ord__chip { flex: none; padding: 7px 12px; border-radius: 99px; font-family: var(--f-display); font-weight: 680; font-size: 12.5px; background: var(--sun); color: var(--ink); white-space: nowrap; }
.ord__chip--shipped, .ord__chip--delivered { background: #D8F0DF; color: #10572B; }
.ord__chip--part-shipped { background: var(--blush); }
.ord__chip--cancelled, .ord__chip--refunded { background: rgba(30, 11, 4, .08); color: var(--ink-60); }
.ord__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; counter-reset: s; }
.ord__steps li { display: grid; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-60); }
.ord__steps li span { height: 5px; border-radius: 99px; background: rgba(30, 11, 4, .1); }
.ord__steps .is-done span { background: var(--ink); }
.ord__steps .is-now span { background: var(--tangerine); }
.ord__steps .is-done, .ord__steps .is-now { color: var(--ink); }
.ord__lines { display: grid; gap: 8px; padding-block: 14px; border-block: 1px solid var(--line); }
.ord__lines li { display: flex; justify-content: space-between; gap: 16px; }
.ord__lines li span, .ord__p { color: var(--ink-60); }
.ord__tracks { display: flex; flex-wrap: wrap; gap: 6px 18px; font-weight: 600; }
.ord__tracks a, .ord__f a { text-decoration: underline; text-underline-offset: 3px; }
.ord__f { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14.5px; }
.ord__f a { padding: 6px 0; }
.ord__f a:hover { color: var(--tangerine); }

.heard { display: grid; gap: 10px; padding: 16px 18px; border-radius: 12px; background: var(--blush); color: var(--ink); }
.heard b { font-family: var(--f-display); font-weight: 720; font-size: 15px; }
.heard__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.heard__opts button { min-height: 44px; padding: 0 16px; border-radius: 99px; background: var(--milk); color: var(--ink); font-weight: 600; font-size: 14.5px; box-shadow: inset 0 0 0 1.5px var(--line); transition: background-color .2s ease; }
.heard__opts button:hover { background: var(--sun); }
.acct__result .heard { margin-top: 4px; }
.acct__result .heard b { color: var(--ink); }
@media (max-width: 900px) { .acct__cols { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .ord__h { flex-direction: column-reverse; gap: 10px; }
  .ord__steps li { font-size: 12px; }
  .acct__top .btn { width: 100%; }
}

/* ---------- cookie bar: slim on phones, equal reject and accept, settings as a small link ---------- */
.consent__short, .consent__link { display: none; }
.consent__link { color: var(--apricot); text-decoration: underline; text-underline-offset: 3px; font: inherit; background: none; padding: 0; margin-left: 12px; cursor: pointer; }
@media (max-width: 600px) {
  .consent { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); width: auto; padding: 10px 12px 12px; gap: 8px; border-radius: 14px; }
  .consent__t { font-size: 13.5px; line-height: 1.35; display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; min-height: 24px; }
  .consent__t b { display: none; }
  .consent__long { display: none; }
  .consent__short { display: inline; }
  .consent:not(.is-open) .consent__link { display: inline-flex; align-items: center; min-height: 24px; margin-left: auto; }
  .consent__t a { display: inline-flex; align-items: center; min-height: 24px; }
  .consent__btns { grid-template-columns: 1fr 1fr; }
  .consent__b { height: 44px; padding: 0 10px; }
  .consent:not(.is-open) .consent__b--line { display: none; }
  .consent.is-open .consent__b--line { grid-column: 1 / -1; grid-row: 2; }
  .consent__opts { gap: 8px; }
  .consent__opts .check { font-size: 13px; }
  body.has-consent .stickybuy { bottom: calc(var(--consent-h, 0px) + 16px + env(safe-area-inset-bottom, 0px)); }
  body.has-consent .toast { bottom: calc(var(--consent-h, 0px) + 20px + env(safe-area-inset-bottom, 0px)); }
}