/* comfi.skin article pages.
   Colour, type, glass, buttons, the bar, the steps, the label rows, the close and the footer are the
   home page's, by way of the privacy and terms pages (landing/public/legal/legal.css). A change there
   needs the same change here. Everything below "The top" is particular to articles.

   Pages differ by kind (compare, pair, label, situation, fix, how, ask), by ground (day, sun, night),
   by which side the card sits and by Comfi's mood. All of it is chosen in studio/look.py. */

@font-face { font-family: 'Geist'; src: url('fonts/geist.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } /* unslop-ignore: the app's typeface */
@font-face { font-family: 'Archivo'; src: url('fonts/archivo.woff2') format('woff2'); font-weight: 100 900; font-stretch: 70%; font-display: swap; }

:root {
  --ink: #1D1D1F;
  --ink-2: #3A3A3C;
  --mute: #6E6E73;
  --line: #E6E8EC;
  --blue: #0A6CFF;
  --blue-ink: #0A4FC2;
  --blue-wash: #EEF4FF;
  --navy: #0B1026;
  --ground: #F4F5F7;
  --paper: #FFFFFF;
  --good-ink: #177A42; --good-wash: #E3F5EA;
  --warn: #F2B321; --warn-ink: #8A5A00; --warn-wash: #FFF1CF;

  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --key: var(--blue);
  --shade: 20, 40, 90;

  --pad: max(clamp(20px, 4.6vw, 76px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --nav-h: 76px;
  --up: 1px;
  --out: cubic-bezier(0.22, 0.8, 0.2, 1);
  --capsule: 999px; /* unslop-ignore: the app's own buttons and chips are capsules */
  --app-font: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; /* unslop-ignore: Geist is the app's typeface */
  --label-font: 'Archivo', 'Arial Narrow', sans-serif;
  --voice-font: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; /* the voice lines use the app's typeface, upright */

  --cast: 0 60px 90px -44px rgba(var(--shade), 0.34), 0 20px 34px -16px rgba(var(--shade), 0.18),
    0 2px 5px -1px rgba(var(--shade), 0.12), 0 0 0 0.5px rgba(var(--shade), 0.08);
  --cast-low: 0 18px 30px -18px rgba(var(--shade), 0.3), 0 2px 5px -1px rgba(var(--shade), 0.1), 0 0 0 0.5px rgba(var(--shade), 0.08);
}
@media (min-width: 901px) and (min-height: 561px) {
  :root {
    --up: clamp(1px, 0.1svh, 1.5px);
    --pad: max(clamp(20px, 4.6vw, 76px), calc((100vw - 1760 * var(--up)) / 2));
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--app-font);
  font-size: 17px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main { overflow-x: clip; }
/* The home page's film grain. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.06;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.next :focus-visible, .foot :focus-visible, .ground--night :focus-visible { outline-color: #fff; }
.card :focus-visible { outline-color: var(--blue); }

.skip { position: fixed; left: 16px; top: -60px; z-index: 200; padding: 12px 16px; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 600; }
.skip:focus { top: 16px; }

/* ── Type ─────────────────────────────────────────────────────────────── */
h1, h2 { font-weight: 660; letter-spacing: -0.047em; line-height: 0.98; color: var(--fg); text-wrap: balance; }
h1 { font-size: clamp(40px, min(6vw, 11svh), 92 * var(--up)); }
h1 em, h2 em { font-style: normal; color: var(--key); }
/* The reader's own question, in their voice. The answer under it is in the app's. */
.ask { font-family: var(--voice-font); font-weight: 560; font-size: clamp(21px, 1.9vw, 29 * var(--up)); line-height: 1.2; letter-spacing: -0.01em; color: var(--key); }
.lede { font-size: clamp(18px, 1.5vw, 22.5 * var(--up)); line-height: 1.42; letter-spacing: -0.012em; color: var(--fg-2); max-width: 40ch; text-wrap: pretty; }
/* The small capitals off the back of a bottle. */
.caps { font-family: var(--label-font); font-stretch: 70%; font-size: calc(13.5 * var(--up)); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px; border: 0; border-radius: var(--capsule);
  font-size: 15px; font-weight: 620; letter-spacing: -0.01em; white-space: nowrap;
  transition: background-color 0.2s, box-shadow 0.25s, scale 0.25s var(--out);
}
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: translate 0.3s var(--out); }
.btn--lg { height: calc(58 * var(--up)); padding: 0 calc(28 * var(--up)); font-size: calc(18 * var(--up)); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--white { background: #fff; color: var(--ink); box-shadow: 0 20px 34px -18px rgba(3, 30, 90, 0.7); }
.btn--ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5); }
@media (hover: hover) {
  .btn--ink:hover { background: #000; }
  .btn--ink:hover svg, .btn--white:hover svg { translate: 3px 0; }
  .btn--white:hover { box-shadow: 0 26px 38px -18px rgba(3, 30, 90, 0.85); }
  .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px #fff; }
}
.btn:active { scale: 0.97; }

/* ── The bar ──────────────────────────────────────────────────────────── */
.nav { position: fixed; left: 0; right: 0; top: 14px; z-index: 80; display: flex; justify-content: center; padding: 0 max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px)); pointer-events: none; }
.nav__bar {
  --shade: 20, 34, 70;
  pointer-events: auto; position: relative; display: flex; align-items: center; gap: 4px;
  height: 56px; padding: 0 6px 0 18px; border-radius: 28px;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.66) 0%, rgba(255, 255, 255, 0.38) 55%, rgba(255, 255, 255, 0.54) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(1.7);
  backdrop-filter: blur(16px) saturate(1.7);
  box-shadow: inset 0 1.2px 0 rgba(255, 255, 255, 0.95), inset 1.2px 0 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(255, 255, 255, 0.35),
    inset 0 0 0 0.6px rgba(255, 255, 255, 0.5), 0 18px 40px -22px rgba(var(--shade), 0.5), 0 2px 6px -2px rgba(var(--shade), 0.16);
  transition: background 0.5s, box-shadow 0.5s;
}
.nav__brand { display: inline-flex; align-items: center; gap: 8px; font-size: 18.5px; font-weight: 700; letter-spacing: -0.035em; color: var(--ink); margin-right: 14px; transition: color 0.4s; }
.mark { width: 26px; height: 28px; fill: #63BDEB; stroke: #63BDEB; stroke-width: 6.8; stroke-linecap: round; }
.mark path { fill: none; }
.mark circle { stroke: none; }
.mark path.mark__ink { stroke: #1D3A50; transition: stroke 0.4s; }
.mark circle.mark__ink { fill: #1D3A50; transition: fill 0.4s; }
.nav__links { display: flex; align-items: center; gap: 2px; }
.nav__links a { padding: 8px 12px; border-radius: var(--capsule); font-size: 14.5px; font-weight: 560; letter-spacing: -0.01em; color: rgba(29, 29, 31, 0.7); transition: color 0.3s, background-color 0.3s; }
@media (hover: hover) { .nav__links a:hover { color: var(--ink); } }
.nav__cta { margin-left: 8px; }

/* Over a night top, the blue close and the footer the bar turns to smoked glass. */
.nav--dark .nav__bar { background: linear-gradient(140deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 55%, rgba(255, 255, 255, 0.12) 100%);
  box-shadow: inset 0 1.2px 0 rgba(255, 255, 255, 0.36), inset 1.2px 0 0 rgba(255, 255, 255, 0.18), inset 0 0 0 0.6px rgba(255, 255, 255, 0.2), 0 18px 40px -22px rgba(0, 0, 0, 0.7); }
.nav--dark .nav__brand { color: #fff; }
.nav--dark .mark path.mark__ink { stroke: #fff; }
.nav--dark .mark circle.mark__ink { fill: #fff; }
.nav--dark .nav__links a { color: rgba(255, 255, 255, 0.78); }
.nav--dark .nav__cta { background: #fff; color: var(--ink); }
@media (max-width: 560px) {
  .nav__bar { width: 100%; padding: 0 6px 0 16px; }
  .nav__brand { margin-right: auto; }
  .nav__links a { padding: 8px 9px; }
  .nav__cta { padding: 0 14px; margin-left: 4px; }
}
@media (max-width: 400px) { .nav__links { display: none; } }

/* A draft says so, above everything, and never inside the article itself. */
.review-label { position: absolute; z-index: 5; left: var(--pad); top: calc(var(--nav-h) + 18px); display: inline-flex; align-items: center; min-height: 30px; padding: 4px 12px; border-radius: 15px; background: var(--warn-wash); color: var(--warn-ink); font-size: 14px; font-weight: 650; letter-spacing: -0.01em; }

/* ── Small shared parts ───────────────────────────────────────────────── */
.tag { display: inline-flex; align-items: center; min-height: calc(30 * var(--up)); padding: 4px calc(12 * var(--up)); border-radius: calc(15 * var(--up)); background: #EEF0F3; color: var(--ink-2); font-size: calc(14.5 * var(--up)); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; white-space: nowrap; }
.tag--sent { background: var(--blue-wash); color: var(--blue-ink); }
.chip { justify-self: start; display: inline-flex; align-items: center; min-height: calc(28 * var(--up)); padding: 3px calc(11 * var(--up)); border-radius: calc(14 * var(--up)); background: var(--ground); font-size: calc(14 * var(--up)); font-weight: 580; letter-spacing: -0.01em; line-height: 1.2; color: var(--ink-2); }
.chip--key { background: var(--blue-wash); color: var(--blue-ink); }
.cites { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: 0.12em; }
.cite { display: inline-grid; place-items: center; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 11px; background: var(--blue-wash); color: var(--blue-ink); font-size: 12px; font-weight: 700; letter-spacing: 0; line-height: 1; transition: background-color 0.2s, color 0.2s; }
@media (hover: hover) { a.cite:hover { background: var(--blue); color: #fff; } }
.cite--big { min-width: calc(30 * var(--up)); height: calc(30 * var(--up)); border-radius: 50%; font-size: calc(14 * var(--up)); background: var(--fg); color: var(--ground); }
@keyframes bob { from { translate: 0 0; } to { translate: 0 -6px; } }

/* ── The top ──────────────────────────────────────────────────────────── */
.top {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: end; column-gap: clamp(30px, 5vw, 96px);
  padding: calc(var(--nav-h) + clamp(56px, 10vh, 132px)) var(--pad) clamp(56px, 9vh, 120px);
}
/* The home page's daylight: one soft pool of light, placed differently on every page. */
.top::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 70% at var(--lx) var(--ly), rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%),
    radial-gradient(40% 50% at calc(100% - var(--lx)) 90%, rgba(10, 108, 255, 0.07), rgba(10, 108, 255, 0) 70%); }
.top__copy { position: relative; }
.top .ask { margin-bottom: clamp(14px, 1.6vw, 22px); }
.top .lede { margin-top: clamp(18px, 2vw, 28px); }
.top__stage { position: relative; display: grid; justify-items: end; }
.top.is-flip { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
.top.is-flip .top__stage { order: -1; justify-items: start; }
.top.is-bare { grid-template-columns: minmax(0, 1fr); }
.top.is-bare h1 { max-width: 16em; }

/* Sun: the sky from the home page's "today" chapter, and a sun to stand under. */
.ground--sun { background: linear-gradient(180deg, #DCE9FF 0%, #EAF1FC 48%, var(--ground) 100%); }
.top__sun { position: absolute; z-index: -1; right: clamp(-120px, -4vw, -40px); top: calc(var(--nav-h) - 40px); width: clamp(260px, 34vw, 560px); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff 0 30%, rgba(255, 255, 255, 0.55) 42%, rgba(255, 255, 255, 0) 70%); }
.ground--sun.is-flip .top__sun { right: auto; left: clamp(-120px, -4vw, -40px); }

/* Night: the home page's one dark chapter. The cards stay paper-white. */
.ground--night { --fg: #fff; --fg-2: rgba(255, 255, 255, 0.8); --key: #8DB8FF; --shade: 0, 0, 0; background: var(--navy); color: #fff; border-radius: 0 0 clamp(44px, 9vw, 150px) clamp(44px, 9vw, 150px); }
.ground--night::before { background: radial-gradient(60% 70% at var(--lx) var(--ly), rgba(80, 120, 255, 0.16), rgba(80, 120, 255, 0) 70%); }
.top__stars { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.9;
  background-image:
    radial-gradient(1.4px 1.4px at 8% 22%, #fff 99%, transparent), radial-gradient(1px 1px at 17% 64%, #fff 99%, transparent),
    radial-gradient(1.6px 1.6px at 29% 38%, rgba(255,255,255,.8) 99%, transparent), radial-gradient(1px 1px at 41% 12%, #fff 99%, transparent),
    radial-gradient(1.2px 1.2px at 52% 78%, rgba(255,255,255,.7) 99%, transparent), radial-gradient(1.5px 1.5px at 63% 30%, #fff 99%, transparent),
    radial-gradient(1px 1px at 71% 58%, #fff 99%, transparent), radial-gradient(1.3px 1.3px at 82% 16%, rgba(255,255,255,.85) 99%, transparent),
    radial-gradient(1px 1px at 90% 70%, #fff 99%, transparent), radial-gradient(1.6px 1.6px at 95% 40%, rgba(255,255,255,.75) 99%, transparent),
    radial-gradient(1px 1px at 4% 86%, #fff 99%, transparent), radial-gradient(1.2px 1.2px at 36% 90%, rgba(255,255,255,.6) 99%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes twinkle { 50% { opacity: 0.55; } }
  .top__stars { animation: twinkle 5.5s ease-in-out infinite; }
}

/* A card off the app: paper, a soft blue-leaning shadow, Comfi perched on the top edge. */
.card { --fg: var(--ink); --fg-2: var(--ink-2); --key: var(--blue); --shade: 20, 40, 90;
  position: relative; width: 100%; max-width: calc(600 * var(--up)); padding: clamp(20px, 2vw, 26px) clamp(20px, 2.2vw, 30px) clamp(18px, 2vw, 24px);
  border-radius: 30px; background: var(--paper); color: var(--ink); box-shadow: var(--cast); }
.ground--night .card { box-shadow: 0 60px 90px -40px rgba(0, 0, 0, 0.7), 0 0 0 0.5px rgba(255, 255, 255, 0.2); }
.card__comfi { position: absolute; right: clamp(18px, 2.4vw, 36px); bottom: 100%; width: clamp(84px, 8vw, 112px); margin-bottom: -7px; pointer-events: none; }
.is-flip .card__comfi { right: auto; left: clamp(18px, 2.4vw, 36px); }
.card__comfi img, .top__comfi img, .duo__comfi img, .next__comfi img, .note__comfi img { animation: bob 2.6s ease-in-out infinite alternate; }
.card > .caps { display: block; }

/* A product, the way the app lists one: brand in small capitals, the name, its kind. */
.tile { display: flex; align-items: center; gap: 14px; }
.tile__words { display: grid; gap: 4px; min-width: 0; }
.tile__words b { font-size: clamp(18px, 1.4vw, 21 * var(--up)); font-weight: 650; letter-spacing: -0.025em; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
.tile__words .chip { margin-top: 4px; }
.ing__art { flex-shrink: 0; width: calc(52 * var(--up)); height: calc(52 * var(--up)); }

/* The short answer, wherever it lands inside a card. */
.answer { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.answer p { margin-top: 8px; font-size: clamp(17px, 1.3vw, 20 * var(--up)); line-height: 1.45; letter-spacing: -0.012em; color: var(--ink-2); text-wrap: pretty; }
.card--answer .answer { margin-top: 0; padding-top: 4px; border-top: 0; }
.card--answer .answer p { font-size: clamp(19px, 1.55vw, 24 * var(--up)); line-height: 1.38; color: var(--ink); letter-spacing: -0.018em; }
.card--fix .answer .caps { color: var(--warn-ink); }
.card--fix { box-shadow: var(--cast), inset 0 4px 0 var(--warn); }

/* Ingredients the page names, small. */
.mini { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mini li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 5px; border-radius: 20px; background: var(--ground); font-size: calc(14.5 * var(--up)); font-weight: 600; letter-spacing: -0.01em; }
.mini .ing__art { width: 30px; height: 30px; }

/* Pair: two products, one routine, joined down the left like the home page's steps. */
.pair { position: relative; margin-top: 10px; }
.tile--row { padding: 14px 0; border-top: 1px solid var(--line); }
.tile--row:first-child { border-top: 0; }
.pair__plus { position: absolute; z-index: 1; left: 50%; top: 50%; translate: -50% -50%; width: 34px; height: 34px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px var(--paper); }
.pair__plus::before, .pair__plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.4px; border-radius: 2px; background: #fff; translate: -50% -50%; }
.pair__plus::after { rotate: 90deg; }
.pair .tile--row:last-of-type { padding-top: 22px; }
.pair .tile--row:first-of-type { padding-bottom: 22px; }

/* Situation: the product, then what it is up against, set out like the label on a bottle. */
.tile--head { padding-bottom: 14px; }
.fit > div { display: grid; grid-template-columns: 6.4em minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.is-headless .fit > div:first-child { border-top: 0; padding-top: 4px; }
.fit .mini { margin-top: 0; gap: 6px; }

/* Label: ingredients the page names, each with the plain job the home page gives it. */
.card--inside header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; }
.card--inside header b { font-size: clamp(19px, 1.5vw, 23 * var(--up)); font-weight: 680; letter-spacing: -0.03em; }
.ings li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.ings .ing__art { width: calc(46 * var(--up)); height: calc(46 * var(--up)); }
.ing__name { font-size: clamp(17px, 1.3vw, 19.5 * var(--up)); font-weight: 620; letter-spacing: -0.02em; }
.ing__does { justify-self: end; padding: 4px 11px; border-radius: 13px; background: var(--ground); font-size: calc(13.5 * var(--up)); font-weight: 600; color: var(--ink-2); white-space: nowrap; }

/* Compare: the heading across the top, the two products side by side under it. */
.top--compare { grid-template-columns: minmax(0, 1fr); row-gap: clamp(76px, 9vw, 120px); align-items: start; }
.top--compare h1 { max-width: 15em; }
.top--compare .top__stage { justify-items: stretch; }
.duo { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; column-gap: clamp(10px, 1.6vw, 22px); max-width: calc(1180 * var(--up)); }
.tile--big { position: relative; display: grid; grid-template-rows: auto 1fr; align-items: end; gap: clamp(26px, 3vw, 44px); min-height: calc(176 * var(--up)); padding: clamp(20px, 2.2vw, 28px) clamp(22px, 2.4vw, 32px) clamp(22px, 2.4vw, 30px); border-radius: 30px; background: var(--paper); color: var(--ink); box-shadow: var(--cast); }
.ground--night .tile--big { box-shadow: 0 60px 90px -40px rgba(0, 0, 0, 0.7), 0 0 0 0.5px rgba(255, 255, 255, 0.2); }
.tile__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; align-self: start; }
.tile__name { font-size: clamp(24px, 2.4vw, 38 * var(--up)); font-weight: 660; line-height: 1.04; letter-spacing: -0.04em; overflow-wrap: anywhere; text-wrap: balance; }
.tile--big .ing__art { position: absolute; right: clamp(16px, 2vw, 26px); bottom: clamp(14px, 1.8vw, 22px); width: calc(66 * var(--up)); height: calc(66 * var(--up)); }
.tile--big:has(.ing__art) .tile__name { padding-right: calc(76 * var(--up)); }
.duo__vs { align-self: center; display: grid; place-items: center; width: calc(62 * var(--up)); height: calc(62 * var(--up)); border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--label-font); font-stretch: 70%; font-weight: 800; font-size: calc(19 * var(--up)); letter-spacing: 0.04em; text-transform: uppercase; box-shadow: 0 0 0 6px var(--ground); }
.ground--sun .duo__vs { box-shadow: 0 0 0 6px #EEF3FB; }
.ground--night .duo__vs { background: #fff; color: var(--ink); box-shadow: 0 0 0 6px var(--navy); }
.duo__comfi { position: absolute; left: 50%; bottom: calc(100% - 8px); translate: -50% 0; width: clamp(80px, 7vw, 104px); pointer-events: none; }

/* Ask: a general question gets the page to itself, centred, with Comfi above it. */
.top--ask { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; align-items: start; }
.top--ask .top__stage { order: -1; justify-items: center; margin-bottom: clamp(14px, 2vw, 26px); }
.top--ask h1 { max-width: 15em; margin-inline: auto; font-size: clamp(40px, min(6.4vw, 12svh), 100 * var(--up)); }
.top--ask .lede { margin-inline: auto; max-width: 44ch; }
.top__comfi { width: clamp(92px, 8.4vw, 124px); }

/* Ask, second layout: the question on the left, Comfi large in a pool of light on the right. */
.top--ask-b { align-items: center; }
.top--ask-b .top__stage { justify-items: center; }
.halo { position: relative; display: grid; place-items: center; width: clamp(240px, 30vw, 460px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #fff 0 34%, var(--blue-wash) 35% 62%, rgba(238, 244, 255, 0) 63%); }
.halo::before { content: ''; position: absolute; inset: 9%; border-radius: 50%; border: 1.5px dashed rgba(10, 108, 255, 0.22); }
.ground--night .halo { background: radial-gradient(circle at 50% 42%, rgba(141, 184, 255, 0.22) 0 34%, rgba(141, 184, 255, 0.08) 35% 62%, transparent 63%); }
.ground--night .halo::before { border-color: rgba(255, 255, 255, 0.22); }
.halo__comfi { width: 46%; }
.top--ask-b .lede { max-width: 38ch; }

/* Compare, second layout: the heading on the left, the two products stacked on the right. */
.top--compare-b { align-items: center; }
.top--compare-b .top__stage { justify-items: stretch; }
.top--compare-b .duo { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
.top--compare-b .duo__vs { justify-self: center; position: relative; z-index: 1; margin: -16px 0; }
.top--compare-b .tile--big { min-height: calc(150 * var(--up)); }
.top--compare-b .duo__comfi { left: auto; right: clamp(22px, 3vw, 40px); translate: none; }

/* Ingredients on a general page get their own strip, like the home page's ingredient row. */
.strip { padding: 0 var(--pad) clamp(30px, 5vh, 60px); }
.strip > .caps { display: block; margin-bottom: 14px; }
.strip ul { display: flex; flex-wrap: wrap; gap: 12px; }
.top--ask + .strip { text-align: center; }
.top--ask + .strip ul { justify-content: center; }
.strip li { flex: 0 1 calc(300 * var(--up)); min-width: min(100%, 240px); display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 14px; border-radius: 24px; background: var(--paper); box-shadow: var(--cast-low); text-align: left; }
.strip .ing__art { width: calc(56 * var(--up)); height: calc(56 * var(--up)); }
.strip li span { display: grid; gap: 2px; }
.strip b { font-size: clamp(17px, 1.3vw, 19.5 * var(--up)); font-weight: 640; letter-spacing: -0.02em; }
.strip i { font-style: normal; font-size: calc(15 * var(--up)); color: var(--mute); }
.ground--night + .strip { padding-top: clamp(40px, 6vh, 70px); }

/* Long questions: the same heading, a step down, so the top keeps its shape. */
.title--long h1 { font-size: clamp(36px, min(4.6vw, 9svh), 72 * var(--up)); }
.title--longer h1 { font-size: clamp(32px, min(3.8vw, 7.6svh), 60 * var(--up)); }
.top--ask.title--long h1 { font-size: clamp(38px, min(5.2vw, 10svh), 80 * var(--up)); }

/* ── The document ─────────────────────────────────────────────────────── */
.doc { display: grid; grid-template-columns: minmax(190px, 0.36fr) minmax(0, 1fr); column-gap: clamp(30px, 5vw, 96px); align-items: start; padding: 0 var(--pad) clamp(70px, 11vh, 150px); }
.ground--night ~ .doc { padding-top: clamp(30px, 5vh, 60px); }
.toc { position: sticky; top: calc(var(--nav-h) + 22px); padding-top: clamp(44px, 7vh, 84px); }
.toc > .caps { display: block; margin-bottom: 12px; }
.toc .about { margin-top: 28px; }
.toc--about .about { margin-top: 0; }

.steps { --n: calc(28 * var(--up)); display: grid; }
.steps li { position: relative; }
.steps a { display: flex; align-items: center; gap: 13px; padding: 8px 0; font-size: calc(16 * var(--up)); font-weight: 560; letter-spacing: -0.015em; line-height: 1.2; color: var(--fg); transition: color 0.4s; }
.steps__n { position: relative; z-index: 1; flex-shrink: 0; display: grid; place-items: center; width: var(--n); height: var(--n); border-radius: 50%; font-size: calc(var(--n) * 0.47); font-weight: 700; background: var(--fg); color: var(--ground); transition: background-color 0.4s, color 0.4s, scale 0.4s var(--out); }
.steps li + li::before { content: ''; position: absolute; left: calc(var(--n) / 2 - 1px); top: -8px; width: 2px; height: 16px; background: var(--fg); transition: background-color 0.4s; }
.steps.is-live a { color: color-mix(in srgb, var(--fg) 40%, transparent); }
.steps.is-live .steps__n { background: color-mix(in srgb, var(--fg) 9%, var(--ground)); color: color-mix(in srgb, var(--fg) 50%, transparent); }
.steps.is-live li + li::before { background: color-mix(in srgb, var(--fg) 12%, transparent); }
.steps.is-live li.is-on a, .steps.is-live li.is-done a { color: var(--fg); }
.steps.is-live li.is-on .steps__n { background: var(--blue); color: #fff; scale: 1.08; }
.steps.is-live li.is-done .steps__n { background: var(--fg); color: var(--ground); }
.steps.is-live li.is-on::before, .steps.is-live li.is-done::before { background: var(--fg); }
@media (hover: hover) { .steps.is-live a:hover { color: var(--fg); } }

/* The label: rows the way the back of a bottle sets them out. */
.label { padding: 4px clamp(18px, 2vw, 26px); border-radius: 22px; background: var(--paper); box-shadow: var(--cast-low); }
.label > div, .label > li { display: grid; grid-template-columns: 8.6em minmax(0, 1fr); column-gap: 18px; align-items: baseline; padding: 15px 0; border-top: 1px solid var(--line); }
.label > :first-child { border-top: 0; }
.label dd { font-size: calc(16.5 * var(--up)); line-height: 1.45; letter-spacing: -0.008em; color: var(--ink-2); }
.about { padding-inline: 18px; }
.about > div { grid-template-columns: minmax(0, 1fr); row-gap: 3px; padding: 12px 0; }
.about dd { font-size: calc(17 * var(--up)); font-weight: 600; color: var(--ink); }

.doc__body { max-width: calc(760 * var(--up)); }
.sec { padding: clamp(44px, 7vh, 84px) 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) - 8px); }
.sec:first-child { border-top: 0; }
.sec--open { padding-bottom: clamp(24px, 4vh, 44px); }
.sec h2 { font-size: clamp(31px, min(4vw, 7.6svh), 54 * var(--up)); margin-bottom: 4px; }
.sec h2 + .cites { margin: 10px 0 0; }
.sec p { margin-top: 20px; font-size: clamp(17px, 1.22vw, 19.5 * var(--up)); line-height: 1.6; letter-spacing: -0.008em; color: var(--fg-2); max-width: 60ch; text-wrap: pretty; }
.sec--open > p:first-child { margin-top: 0; }
/* The first paragraph of the body reads like the start of a page, not the middle of one. */
.article-compact .sec--open > p:first-child { font-size: clamp(19px, 1.5vw, 23 * var(--up)); line-height: 1.45; letter-spacing: -0.015em; color: var(--fg); }
.sec p a { color: var(--blue-ink); text-decoration: underline; text-decoration-color: rgba(10, 79, 194, 0.35); text-underline-offset: 3px; }

.list { margin-top: 22px; display: grid; gap: 12px; max-width: 60ch; }
.list li { position: relative; padding-left: 26px; font-size: clamp(17px, 1.22vw, 19.5 * var(--up)); line-height: 1.5; letter-spacing: -0.008em; color: var(--fg-2); text-wrap: pretty; }
.list li::before { content: ''; position: absolute; left: 4px; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.list + .cites { margin: 12px 0 0; }

/* Steps in an answer are the home page's numbered steps, joined by a line. */
.steps--body { --n: calc(34 * var(--up)); margin-top: 26px; gap: 18px; max-width: 60ch; }
.steps--body li { display: flex; align-items: flex-start; gap: 16px; font-size: clamp(17px, 1.22vw, 19.5 * var(--up)); line-height: 1.5; letter-spacing: -0.008em; color: var(--fg-2); }
.steps--body li > span:last-child { padding-top: calc((var(--n) - 1.5em) / 2); }
.steps--body .steps__n { background: var(--blue); color: #fff; }
.steps--body li + li::before { top: calc(-18px - 2px); height: 22px; background: color-mix(in srgb, var(--blue) 35%, transparent); }
.steps--body + .cites { margin: 14px 0 0; }

/* A distinction worth stopping for: a small card with Comfi beside it. */
.note { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: start; margin-top: 26px; padding: 18px 22px 20px 18px; border-radius: 24px; background: var(--paper); box-shadow: var(--cast-low); max-width: 60ch; }
.note__comfi { grid-row: span 2; width: 58px; }
.note p { margin-top: 4px !important; color: var(--ink) !important; }

.table { margin-top: 26px; overflow-x: auto; border-radius: 22px; background: var(--paper); box-shadow: var(--cast-low); }
.table table { width: 100%; border-collapse: collapse; font-size: calc(16 * var(--up)); }
.table th, .table td { padding: 13px 18px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); color: var(--ink-2); line-height: 1.4; }
.table thead th { border-top: 0; font-family: var(--label-font); font-stretch: 70%; font-size: calc(13 * var(--up)); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); }
.table tbody th { font-weight: 640; color: var(--ink); }
.table + .cites { margin: 12px 0 0; }

.photo { margin-top: 26px; }
.photo img { border-radius: 24px; }
.photo figcaption { margin-top: 8px; font-size: 13px; color: var(--mute); }
.photo a { text-decoration: underline; }
.go { margin-top: 30px; }

/* Where the answer comes from: numbered like the marks in the text. */
.sources { margin-top: clamp(20px, 4vh, 40px); }
.sources > h2 { display: block; margin-bottom: 12px; font-size: calc(13.5 * var(--up)); letter-spacing: 0.06em; line-height: 1.2; color: var(--mute); }
.sources .label > li { grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: 14px 0; scroll-margin-top: calc(var(--nav-h) + 30px); }
.sources .label > li:target .cite--big { background: var(--blue); color: #fff; }
.src__words { display: grid; gap: 3px; }
.src__words a { font-size: calc(16.5 * var(--up)); font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; color: var(--ink); text-decoration: underline; text-decoration-color: rgba(29, 29, 31, 0.2); text-underline-offset: 3px; overflow-wrap: anywhere; }
@media (hover: hover) { .src__words a:hover { color: var(--blue-ink); text-decoration-color: currentColor; } }
.src__words .caps { font-size: calc(12 * var(--up)); }

/* Related questions: the next page a reader would open, as plain cards. */
.related { padding: 0 var(--pad) clamp(60px, 9vh, 110px); }
.related > h2 { display: block; margin-bottom: 14px; font-size: calc(13.5 * var(--up)); letter-spacing: 0.06em; line-height: 1.2; color: var(--mute); }
.related ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; max-width: calc(1180 * var(--up)); }
.related a { display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 100%; padding: 18px 20px; border-radius: 22px; background: var(--paper); box-shadow: var(--cast-low); font-size: clamp(16.5px, 1.2vw, 18.5 * var(--up)); font-weight: 620; letter-spacing: -0.018em; line-height: 1.3; color: var(--ink); transition: box-shadow 0.25s, translate 0.25s var(--out); }
.related a svg { flex-shrink: 0; width: 18px; height: 18px; fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .related a:hover { translate: 0 -2px; box-shadow: var(--cast); } }

/* ── The close, and the footer ────────────────────────────────────────── */
.next { --fg: #fff; --fg-2: rgba(255, 255, 255, 0.86); --key: #BFE0FF; display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(80px, 13vh, 150px) var(--pad) clamp(70px, 11vh, 130px); background: var(--blue); color: #fff; border-radius: clamp(44px, 9vw, 150px) clamp(44px, 9vw, 150px) 0 0; }
.next__comfi { width: 92px; margin-bottom: 14px; }
.next .ask { margin-bottom: 12px; }
.next h2 { font-size: clamp(36px, min(5.4vw, 10.4svh), 88 * var(--up)); max-width: 13em; }
.next__lede { margin-top: clamp(16px, 2vw, 24px); max-width: 40ch; font-size: clamp(17px, 1.3vw, 20 * var(--up)); line-height: 1.45; color: var(--fg-2); text-wrap: balance; }
.next__go { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(28px, 3.6vw, 48px); }

.foot { background: var(--blue); color: rgba(255, 255, 255, 0.82); padding: 34px var(--pad) 44px; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto; gap: 14px 40px; align-items: start; font-size: 14px; line-height: 1.45; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.foot .nav__brand { color: #fff; }
.foot .mark { fill: #BFE3FF; stroke: #BFE3FF; }
.foot .mark path.mark__ink { stroke: #fff; }
.foot .mark circle.mark__ink { fill: #fff; }
.foot p { max-width: 44ch; }
.foot__links { display: flex; flex-direction: column; gap: 6px; white-space: nowrap; }
.foot__links a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.45); text-underline-offset: 3px; }

/* ── Index pages (the queue and the library) ──────────────────────────── */
.plain main { padding: calc(var(--nav-h) + 60px) var(--pad) 80px; }
.plain .article-header { margin-bottom: 30px; }
.plain .article-header h1 { font-size: clamp(40px, 5vw, 72px); }
.plain .article-header p { margin-top: 12px; color: var(--mute); }
.plain .table { margin-top: 0; }
.plain .table a, .plain ol a { color: var(--blue-ink); }
.plain ol { display: grid; gap: 8px; }

/* ── Motion ───────────────────────────────────────────────────────────── */
@keyframes rise { from { opacity: 0; translate: 0 26px; } }
@media (prefers-reduced-motion: no-preference) {
  .top__copy > *, .top__stage { animation: rise 0.9s var(--out) both; }
  .top__copy > :nth-child(2) { animation-delay: 0.07s; }
  .top__copy > :nth-child(3) { animation-delay: 0.14s; }
  .top__stage { animation-delay: 0.22s; }
  @supports (animation-timeline: view()) {
    .sec > *, .strip li, .sources, .next > * { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 17%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ── Narrow screens ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --nav-h: 80px; }
  .top, .top.is-flip { grid-template-columns: minmax(0, 1fr); row-gap: clamp(100px, 16vw, 124px); align-items: start; padding-top: calc(var(--nav-h) + 44px); }
  .top.is-flip .top__stage { order: 0; }
  .top__stage, .top.is-flip .top__stage { justify-items: stretch; }
  .card { max-width: none; }
  .top--ask { row-gap: 0; }
  .top--ask .top__stage, .top--ask-b .top__stage { justify-items: center; }
  .top--ask-b { row-gap: 20px; }
  .halo { width: min(70vw, 300px); }
  .top--compare { row-gap: clamp(90px, 14vw, 120px); }
  .doc { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; padding-top: 0; }
  .toc .steps, .toc > .caps { display: none; }
  .toc .about { margin: 0 0 8px; display: flex; flex-wrap: wrap; column-gap: 26px; padding: 6px 18px; }
  .toc .about > div { border-top: 0; padding: 8px 0; }
  .sec:first-child { padding-top: clamp(30px, 5vh, 50px); }
  .foot { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .duo { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .duo > .tile { min-height: 0; }
  .duo__vs { justify-self: center; margin: -14px 0; z-index: 1; position: relative; }
  .duo__comfi { left: auto; right: 22px; translate: none; bottom: calc(100% - 8px); }
  .label > div, .label > li { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .sources .label > li { grid-template-columns: auto minmax(0, 1fr); }
  .ings li { grid-template-columns: auto minmax(0, 1fr); }
  .ing__does { grid-column: 2; justify-self: start; margin-top: 4px; }
  .fit > div { grid-template-columns: 5.6em minmax(0, 1fr); }
  .review-label { top: calc(var(--nav-h) + 8px); }
}

/* ── Paper ────────────────────────────────────────────────────────────── */
@media print {
  body::after, .nav, .toc, .next, .card__comfi, .top__comfi, .duo__comfi, .skip, .top__stars, .top__sun { display: none; }
  body { background: #fff; font-size: 11.5pt; }
  *, *::before, *::after { animation: none !important; }
  .top { display: block; padding: 0 0 18pt; background: none; color: var(--ink); --fg: var(--ink); --fg-2: var(--ink-2); --key: var(--blue); }
  .card, .label, .duo > .tile, .strip li { box-shadow: none; border: 1px solid var(--line); }
  .doc { display: block; padding: 0; }
  .foot { background: none; color: var(--ink-2); padding: 14pt 0 0; display: block; box-shadow: none; border-top: 1px solid var(--line); }
  .foot .nav__brand, .foot__links a { color: var(--ink); }
}

/* ── The answers hub and the method page ─────────────────────────────── */
.hub { max-width: calc(980 * var(--up)); }
.hub .article-header h1 { font-size: clamp(42px, 6vw, 92 * var(--up)); }
.hub .ask { margin-bottom: 14px; }
.hub .article-header p:not(.ask) { margin-top: 18px; font-size: clamp(17px, 1.3vw, 20px); color: var(--ink-2); }
.hub a { color: var(--blue-ink); }
.hub__group { margin-top: 44px; }
.hub__group > h2 { display: block; margin-bottom: 12px; font-size: 13.5px; letter-spacing: 0.06em; color: var(--mute); }
.hub__group ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 6px 28px; }
.hub__group li a { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 560; letter-spacing: -0.012em; }
@media (hover: hover) { .hub__group li a:hover { color: var(--blue-ink); } }
.hub__prose p { margin-top: 18px; max-width: 62ch; font-size: clamp(17px, 1.25vw, 19.5px); line-height: 1.6; color: var(--ink-2); }

/* A list's or table's own lead in ("Stop using it if you notice:"), set as the paragraph it is. */
.sec p.lead-in { margin-top: 22px; margin-bottom: -8px; }
.sec .table + p.lead-in, .sec p.lead-in + .table { margin-top: 14px; }