/* RUWAY: personalised supplements store preview. */
@font-face { font-family: PlexSans; src: url('fonts/plexsans-400-latin.woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: PlexSans; src: url('fonts/plexsans-600-latin.woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: PlexMono; src: url('fonts/plexmono-400-latin.woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: PlexMono; src: url('fonts/plexmono-600-latin.woff2'); font-weight: 600; font-display: swap; }

:root {
  --accent: #29bdbf;
  --accent-ink: #102e32;
  --accent-text: #08777a;
  --accent-edge: #08777a;
  --accent-light: #95e2de;
  --accent-surface: #e9f8f7;
  --focus-ring: var(--accent-edge);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --accent-hover: #23afb1;
  --accent-soft: rgba(41, 189, 191, .12);
  --ink: #292929;
  --ink-soft: rgba(41, 41, 41, .64);
  --paper: #fafafa;
  --cream: #f7f6f2;
  --white: #ffffff;
  --line: #e7e5df;
  --glass: rgba(36, 36, 36, .8);
  --glass-line: rgba(255, 255, 255, .12);
  --sky: #3d6fa8;
  --radius-s: 12px;
  --radius-m: 18px;
  --radius-l: 28px;
  --mono: PlexMono, ui-monospace, Consolas, monospace;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --shadow: 0 18px 50px rgba(20, 20, 20, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Lenis smooth scrolling (assets/vendor/lenis.min.js) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.55 PlexSans, system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.025em; line-height: 1.08; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Logo: wordmark SVG used as a mask so it takes the text colour */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.logo-mark { display: inline-block; position: relative; flex-shrink: 0; width: 120px; aspect-ratio: 480.8 / 68.9; background: currentColor; -webkit-mask: url('assets/ruway-wordmark.svg') no-repeat center / contain; mask: url('assets/ruway-wordmark.svg') no-repeat center / contain; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 26px; border-radius: 99px; border: 0; text-decoration: none; font-weight: 600; font-size: 15px; transition: background .2s var(--ease), transform .2s var(--ease), opacity .2s var(--ease); white-space: nowrap; }
.btn:active { transform: scale(.98); }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { background: var(--accent-hover); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #111; }
.btn-light { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn-light:hover { background: var(--cream); }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn-arrow::after { content: '→'; font-weight: 400; }

/* Navigation: floating dark glass pill */
.nav { font-family: var(--mono); position: fixed; z-index: 50; top: 14px; left: 50%; transform: translateX(-50%); width: min(var(--wrap), 100% - 2 * var(--gutter)); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 10px 10px 20px; border-radius: 22px; background: var(--glass); border: 1px solid var(--glass-line); color: #fff; backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); }
.nav-links { display: flex; gap: 6px; }
.nav-links a { padding: 8px 14px; border-radius: 99px; text-decoration: none; font-size: 15px; color: #fff; transition: color .2s var(--ease), background .2s var(--ease); }
.nav-links a:hover, .nav-links a[aria-current='page'] { color: #fff; background: rgba(255, 255, 255, .08); }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.nav .btn { min-height: 42px; padding: 0 20px; border-radius: 14px; }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--glass-line); background: rgba(255, 255, 255, .06); color: #fff; }
.icon-btn:hover { background: rgba(255, 255, 255, .14); }
.icon-btn svg { width: 18px; height: 18px; }
.lang-btn { font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.bag-count { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 600; display: grid; place-items: center; }
.bag-count:empty { display: none; }

/* Ticks */
.tick { display: inline-flex; align-items: center; gap: 8px; }
.tick::before { content: ''; flex: none; width: 18px; height: 18px; border-radius: 6px; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4' fill='none' stroke='%23102e32' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }

/* Sections */
.section { padding: clamp(72px, 10vw, 128px) 0; }
.section-head { max-width: 720px; margin: 0 auto clamp(36px, 5vw, 56px); text-align: center; display: grid; gap: 16px; }
.section-head h2 { font-size: clamp(32px, 4.6vw, 56px); }
.section-head p { font-size: 18px; color: var(--ink-soft); }
.accent { color: var(--accent-text); }
/* Bright accents on dark product sections; readable teal text on light pages. */
.problem-card,.showcase,.final-card,.about-mission,.about-signup,.results-breakdown,.results-timeline { --accent-text: var(--accent); --focus-ring: var(--accent); }
.nav,.steps,.result-table-scroll,.formula-sticky { --focus-ring: var(--accent); }

/* Tub visual: ribbed white lid, white body, teal-to-citron label band */
.tub { position: relative; width: min(280px, 72vw); display: grid; justify-items: center; filter: drop-shadow(0 28px 40px rgba(0, 0, 0, .25)); color: var(--ink); text-align: left; }
.tub-lid { width: 104%; height: 46px; border-radius: 10px 10px 4px 4px; background: repeating-linear-gradient(90deg, #ecebe6 0 3px, #ffffff 3px 7px), #fff; box-shadow: inset 0 -6px 8px rgba(0, 0, 0, .06), inset 0 2px 0 rgba(255, 255, 255, .9); position: relative; z-index: 1; }
.tub-body { width: 100%; margin-top: -2px; padding: 22px 20px 20px; border-radius: 4px 4px 22px 22px; background: linear-gradient(90deg, #e7e5df 0%, #ffffff 16%, #ffffff 72%, #e3e1da 100%); display: flex; flex-direction: column; gap: 12px; }
.tub .logo-mark { width: 92px; }
.tub-band { height: 104px; border-radius: 6px; background: radial-gradient(120% 120% at 25% 15%, #d0ec7f 0%, #59d695 35%, var(--accent) 70%, var(--accent-edge) 100%); position: relative; overflow: hidden; }
.tub-band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .08), transparent 18%, transparent 75%, rgba(0, 0, 0, .1)); }
.tub-name { font-weight: 600; font-size: 15px; line-height: 1.2; }
.tub-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--ink-soft); }

/* FAQ */

/* Footer */
.footer { background: #1d1d1d; color: #fff; padding: 64px 0 90px; font-size: 14px; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px; align-items: flex-start; }
.footer .logo { color: #fff; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.footer-links a { text-decoration: none; color: #fff; }
.footer-links a:hover { color: var(--accent); }
.footer-legal { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); display: grid; gap: 8px; font-size: 13px; color: #fff; }

/* Bag drawer */
.drawer-back { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .4); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
.drawer { position: fixed; z-index: 90; top: 0; right: 0; height: 100%; width: min(420px, 100%); background: var(--paper); transform: translateX(100%); transition: transform .35s var(--ease); display: flex; flex-direction: column; box-shadow: -20px 0 60px rgba(0, 0, 0, .15); }
.drawer-open .drawer { transform: none; }
.drawer-open .drawer-back { opacity: 1; pointer-events: auto; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { font-size: 26px; }
.drawer-close { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font-size: 20px; }
.drawer-body { flex: 1; overflow: auto; padding: 20px 24px; display: grid; align-content: start; gap: 14px; }
.drawer-empty { text-align: center; padding: 40px 0; display: grid; gap: 12px; justify-items: center; color: var(--ink-soft); }
.drawer-empty strong { color: var(--ink); font-size: 20px; font-weight: 600; }
.bag-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-m); padding: 16px; display: grid; gap: 10px; }
.bag-item-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.bag-item-top strong { font-weight: 600; }
.bag-item ul { margin: 0; padding: 0 0 0 18px; color: var(--ink-soft); font-size: 14px; }
.bag-item-actions { display: flex; justify-content: space-between; align-items: center; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 99px; }
.qty button { width: 34px; height: 34px; border: 0; background: none; font-size: 18px; }
.qty span { min-width: 24px; text-align: center; font-weight: 600; }
.link-btn { border: 0; background: none; padding: 4px; color: var(--ink-soft); text-decoration: underline; font-size: 14px; }
.drawer-foot { padding: 20px 24px 28px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.drawer-foot p { font-size: 13px; color: var(--ink-soft); text-align: center; }

/* Toast */
.toast { position: fixed; z-index: 100; left: 50%; top: 90px; transform: translate(-50%, -20px); opacity: 0; pointer-events: none; padding: 12px 20px; border-radius: 14px; background: var(--ink); color: #fff; font-size: 14px; box-shadow: var(--shadow); transition: opacity .25s var(--ease), transform .25s var(--ease); max-width: calc(100% - 32px); text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Quiz ---------- */
.quiz-page { min-height: 100svh; display: flex; flex-direction: column; }
.quiz-top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; width: min(720px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: 20px 0; background: var(--paper); }
.quiz-back { width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--ink); color: #fff; display: grid; place-items: center; flex: none; }
.quiz-back[hidden] { visibility: hidden; display: grid; }
.quiz-progress { flex: 1; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 12px; background: #eeedea; }
.quiz-progress .seg { flex: 1; height: 6px; border-radius: 99px; background: #dcdad4; overflow: hidden; }
.quiz-progress .seg i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width .35s ease; }
.quiz-progress small { flex: none; font-size: 12px; color: var(--ink-soft); min-width: 74px; text-align: right; }
.quiz-close { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #eeedea; text-decoration: none; flex: none; font-size: 20px; }
.quiz-main { flex: 1; display: grid; place-items: center; padding: 24px var(--gutter) 110px; }
.quiz-step { width: min(620px, 100%); display: grid; gap: 22px; animation: rise .35s ease; }
@keyframes rise { from { transform: translateY(12px); } to { transform: none; } }
[tabindex="-1"]:focus { outline: none; }
.quiz-step.center { text-align: center; justify-items: center; }
.quiz-step h1 { font-size: clamp(30px, 5vw, 46px); }
.quiz-step .lede { font-size: 18px; color: var(--ink-soft); }
.quiz-hint { font-size: 14px; color: var(--ink-soft); }
.options { display: grid; gap: 10px; }
.options.two { grid-template-columns: repeat(2, 1fr); }
.option { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; border-radius: var(--radius-m); border: 1.5px solid var(--line); background: #fff; text-align: left; transition: border-color .2s var(--ease), background .2s var(--ease); }
.option:hover { border-color: #cfccc4; }
.option[aria-pressed='true'] { border-color: var(--accent-edge); background: var(--accent-surface); }
.option-icon { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--cream); font-size: 20px; }
.option[aria-pressed='true'] .option-icon { background: var(--accent); color: var(--accent-ink); }
.option b { display: block; font-weight: 600; }
.option small { display: block; color: var(--ink-soft); font-size: 14px; line-height: 1.35; }
.text-input { width: 100%; height: 58px; padding: 0 18px; border-radius: var(--radius-m); border: 1.5px solid var(--line); background: #fff; font-size: 18px; }
.text-input:focus { outline: none; border-color: var(--accent-edge); }
.consent { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--radius-m); background: #fff; border: 1.5px solid var(--line); text-align: left; cursor: pointer; }
.consent input { width: 22px; height: 22px; accent-color: var(--accent); flex: none; margin-top: 1px; }
.info-box { padding: 18px 20px; border-radius: var(--radius-m); background: var(--cream); font-size: 15px; color: var(--ink-soft); display: grid; gap: 6px; }
.info-box strong { color: var(--ink); font-weight: 600; }
.warn-box { padding: 18px 20px; border-radius: var(--radius-m); background: var(--accent-surface); border: 1px solid var(--accent-light); font-size: 15px; }
.quiz-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.quiz-actions .btn { flex: 1 1 200px; }
.loading { display: grid; justify-items: center; gap: 18px; color: var(--ink-soft); }
.spinner { width: 44px; height: 44px; border-radius: 50%; border: 3px solid #e6e3dc; border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Result */
.result { width: min(980px, 100%); display: grid; grid-template-columns: auto 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; animation: rise .4s ease; }
.result-visual { position: sticky; top: 100px; display: grid; justify-items: center; gap: 16px; padding: 36px 30px; border-radius: var(--radius-l); background: linear-gradient(180deg, #3d6fa8, #2c5b92); }
.result-visual .tub { width: 220px; }
.result-body { display: grid; gap: 20px; }
.result-body h1 { font-size: clamp(30px, 4.4vw, 44px); }
.formula-list { display: grid; gap: 10px; }
.formula-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 16px 18px; border-radius: var(--radius-m); background: #fff; border: 1px solid var(--line); }
.formula-item strong { font-weight: 600; }
.formula-item .dose { font-weight: 600; text-align: right; }
.formula-item small { grid-column: 1 / -1; color: var(--ink-soft); font-size: 14px; line-height: 1.4; }
.formula-item .why { grid-column: 1 / -1; font-size: 13px; color: var(--accent-text); }

/* ---------- Builder ---------- */
.builder-page { padding: 112px 0 100px; }
.builder-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.builder-head small { display: block; color: var(--accent-text); font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.builder-head h1 { font-size: clamp(30px, 4vw, 44px); }
.placeholder-note { padding: 14px 18px; border-radius: var(--radius-s); background: var(--accent-soft); font-size: 14px; margin-bottom: 18px; }
.placeholder-note b { font-weight: 600; }
.search { position: relative; margin-bottom: 14px; }
.search input { width: 100%; height: 50px; padding: 0 18px 0 46px; border-radius: var(--radius-s); border: 1px solid var(--line); background: #fff; }
.search input:focus { outline: none; border-color: var(--accent-edge); }
.search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.chip { padding: 8px 16px; border-radius: 99px; border: 1px solid var(--line); background: #fff; font-size: 14px; }
.chip[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: #fff; }
.builder-grid { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; }
.ingredients { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.ing { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--radius-m); background: #fff; border: 1.5px solid var(--line); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.ing.on { border-color: var(--accent-edge); box-shadow: 0 0 0 3px var(--accent-soft); }
.ing-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.ing h3 { font-size: 17px; letter-spacing: -.01em; line-height: 1.25; }
.ing h3 small { display: block; font-weight: 400; color: var(--ink-soft); font-size: 13px; margin-top: 2px; }
.ing-toggle { flex: none; width: 34px; height: 34px; border-radius: 10px; border: 0; background: var(--accent-soft); color: var(--accent-text); font-size: 20px; line-height: 1; display: grid; place-items: center; transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.ing.on .ing-toggle { background: var(--accent); color: var(--accent-ink); transform: rotate(45deg); }
.ing p { font-size: 14px; color: var(--ink-soft); line-height: 1.45; flex: 1; }
.doses { display: flex; flex-wrap: wrap; gap: 6px; }
.dose-btn { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--paper); font-size: 13px; font-weight: 600; }
.dose-btn[aria-pressed='true'] { background: var(--ink); color: #fff; border-color: var(--ink); }
.ing-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.ing-tags span { font-size: 11.5px; padding: 2px 8px; border-radius: 99px; background: var(--cream); color: var(--ink-soft); }
.no-results { grid-column: 1 / -1; padding: 40px; text-align: center; color: var(--ink-soft); }
.panel { position: sticky; top: 100px; border-radius: var(--radius-l); overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.panel-visual { padding: 26px; display: grid; place-items: center; background: linear-gradient(180deg, #3d6fa8, #2c5b92); }
.panel-visual .tub { width: 160px; }
.panel-visual .tub-lid { height: 28px; }
.panel-visual .tub-body { padding: 14px 12px 12px; gap: 8px; }
.panel-visual .tub .logo-mark { width: 64px; }
.panel-visual .tub-band { height: 58px; }
.panel-visual .tub-name { font-size: 12px; }
.panel-visual .tub-meta { font-size: 9px; }
.panel-body { padding: 20px 22px 22px; display: grid; gap: 16px; }
.panel-body h2 { font-size: 20px; letter-spacing: -.01em; }
.facts { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.facts caption { text-align: left; font-weight: 600; font-size: 15px; padding-bottom: 6px; border-bottom: 6px solid var(--ink); }
.facts th, .facts td { padding: 7px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.facts thead th { font-weight: 600; font-size: 12px; color: var(--ink-soft); }
.facts td:not(:first-child), .facts th:not(:first-child) { text-align: right; padding-left: 8px; white-space: nowrap; }
.facts .empty td { text-align: center; color: var(--ink-soft); padding: 18px 0; }
.facts-foot { font-size: 12px; color: var(--ink-soft); line-height: 1.45; display: grid; gap: 4px; }
.panel-summary { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-soft); }
.panel-summary b { color: var(--ink); font-weight: 600; }
.panel .btn { width: 100%; }
.mobile-bar { display: none; }

/* ---------- Legal pages ---------- */
.legal-page { padding: 130px 0 90px; }
.legal-page .wrap { max-width: 760px; display: grid; gap: 18px; }
.legal-page h1 { font-size: clamp(32px, 4vw, 44px); }
.legal-page h2 { font-size: 22px; margin-top: 14px; letter-spacing: -.01em; }
.legal-page p, .legal-page li { color: var(--ink-soft); }
.legal-page ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.legal-page code { font-size: 14px; background: var(--cream); padding: 1px 6px; border-radius: 6px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .builder-grid { grid-template-columns: 1fr; }
  .panel { position: static; }
  .panel-inner { display: grid; grid-template-columns: 220px 1fr; }
  .panel-visual { height: 100%; }
}
@media (max-width: 860px) {
  .nav-links { display: none; }
  .result { grid-template-columns: 1fr; }
  .result-visual { position: static; }
}
@media (max-width: 640px) {
  .nav { padding: 8px 8px 8px 16px; border-radius: 18px; top: 10px; }
  .nav .btn { padding: 0 14px; font-size: 14px; }
  .nav .nav-quiz-long { display: none; }
  .logo-mark { width: 92px; }

  .options.two { grid-template-columns: 1fr; }
  .panel-inner { grid-template-columns: 1fr; }
  .panel-visual { display: none; }
  .builder-page { padding-bottom: 150px; }
  .mobile-bar { display: flex; position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); gap: 12px; align-items: center; justify-content: space-between; background: rgba(255, 255, 255, .95); border-top: 1px solid var(--line); backdrop-filter: blur(10px); }
  .mobile-bar span { font-size: 14px; color: var(--ink-soft); }
  .mobile-bar b { color: var(--ink); }
  .ingredients { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Reference-led homepage: sky, portrait, glass panels and product photography. */
.home { --home-width: 1120px; background: #f7f7f3; }
.home .wrap { width: min(var(--home-width), 100% - 2 * var(--gutter)); }
.home .btn { min-height: 52px; padding-inline: 34px; font-size: 16px; }
.home h1, .home h2, .home h3 { text-wrap: balance; }
.home .section-head { max-width: 1000px; gap: 22px; margin-bottom: 54px; }
.home .section-head h2 { font-size: clamp(34px, 4.6vw, 64px); line-height: 1.08; font-weight: 600; }
.eyebrow { display: flex; align-items: center; justify-content: center; gap: 13px; font-size: 14px; font-weight: 400; letter-spacing: .01em; }
.home .tick::before { border-radius: 50%; }
body .nav { top: 26px; width: min(1120px, 100% - 2 * var(--gutter)); padding: 12px 12px 12px 24px; border-radius: 24px; background: rgba(34, 39, 42, .9); }
body[data-page='home'] .nav-links a { background: transparent; }
body .nav .btn { padding-inline: 28px; min-height: 45px; }
.hero-scene { position: relative; min-height: 1320px; overflow: hidden; isolation: isolate; background: #c6d7e4; border-radius: 0 0 44px 44px; display: flex; flex-direction: column; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: calc(100% + 120px); object-fit: cover; object-position: center top; z-index: -3; }
.hero-scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(240,246,249,.1) 0%, transparent 42%, transparent 76%, rgba(18,26,26,.14)); z-index: -2; pointer-events: none; }
.home .hero { color: #000000; text-align: center; padding: 170px var(--gutter) 0; position: relative; z-index: 2; }
.hero-inner { max-width: 1110px; margin: auto; display: grid; justify-items: center; gap: 25px; }
.home .hero h1 { font-size: clamp(36px, 4.25vw, 60px); line-height: 1.12; letter-spacing: -.025em; }
.home .hero h1 span { display: block; }
.home .hero p { font-family: var(--mono); max-width: 650px; color: #000000; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.4; }
.hero-ctas { display: flex; justify-content: center; gap: 20px; margin-top: 12px; }
.hero-ctas .btn { min-width: 225px; }





.home .problem { width: min(1120px, 100% - 2 * var(--gutter)); margin: auto auto 58px; padding-top: 400px; position: relative; z-index: 3; }
.problem-card { display: grid; grid-template-columns: 1fr 1.1fr; gap: 75px; align-items: center; padding: 45px 50px; border-radius: 24px; background: rgba(26,28,25,.82); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); color: #fff; border: 1px solid rgba(255,255,255,.08); }
.problem-copy .logo-mark { display: block; width: 132px; margin: 0 0 26px; }
.problem-card h2 { font-size: 21px; line-height: 1.4; font-weight: 600; letter-spacing: -.015em; }
.problem-card p { font-size: 21px; line-height: 1.45; margin-top: 18px; }
.curve { width: 100%; height: auto; }
.curve text { fill: rgba(255,255,255,.8); font: 12px PlexSans,sans-serif; }
.trust-strip { padding: 45px var(--gutter) 54px; text-align: center; }
.trust-strip p { color: #747772; font-size: 14px; margin-bottom: 24px; }
.trust-strip > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 58px; font-size: 17px; font-weight: 600; }
.home .steps-section { position: relative; isolation: isolate; border-radius: 44px 44px 0 0; overflow: hidden; padding: 80px 0 60px; background: #d6d9d8; color: white; }
.steps-photo { width: auto; height: 100%; max-width: 100%; object-fit: contain; }
.steps-section::before { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, #374957 0, transparent 24%, transparent 44%, #d6d9d8 72%); }
.steps-section .section-head { position: relative; z-index: 1; }
.steps-section .section-head h2 { max-width: 1000px; }
.process-product { display: flex; justify-content: center; height: 420px; margin-bottom: 36px; }
.home .steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; max-width: none; position: relative; }
.step { padding: 28px; border-radius: 20px; background: rgba(28,32,33,.83); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; align-items: flex-start; }
.step-label { background: white; color: #292929; border-radius: 20px; padding: 4px 11px; font-size: 11px; line-height: 1.3; text-transform: uppercase; }
.step:first-child .step-label { background: var(--accent); color: var(--accent-ink); }
.step h3 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; font-weight: 400; margin: 20px 0; }
.step p { font-size: 14px; color: #fff; line-height: 1.6; margin-bottom: 20px; }
.step ul { list-style: none; margin: auto 0 0; padding: 0; width: 100%; }
.step li { position: relative; padding: 12px 0 12px 18px; border-top: 1px solid rgba(255,255,255,.15); font-size: 13px; color: #fff; }
.step li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; position: absolute; left: 0; top: 20px; background: var(--accent); }
.steps-cta { display: grid; justify-items: center; gap: 22px; margin: 42px 0 60px; color: #292929; }
.hero-ticks { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 24px; font-size: 14px; }
.home .quality { margin: 0; }
.quality-card { position: relative; isolation: isolate; display: grid; grid-template-columns: .9fr 1.5fr; align-items: center; gap: 40px; padding: 45px; border-radius: 18px; overflow: hidden; color: white; }
.quality-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.quality-card::before { content: ''; position: absolute; inset: 0; background: rgba(15,25,20,.65); z-index: -1; }
.quality-card h2 { font-size: 32px; text-align: center; font-weight: 400; }
.quality-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 30px; font-size: 14px; }
.home .showcase { background: linear-gradient(180deg,#123e6a,#2163a1); color: white; border-radius: 44px 44px 0 0; padding: 78px 0 40px; overflow: hidden; }
.showcase .section-head { justify-items: center; }
.showcase .section-head .btn { margin-top: 12px; }
.showcase-stage { position: relative; display: grid; grid-template-columns: 1fr 470px 1fr; gap: 0; align-items: start; min-height: 665px; margin-top: 0; }
.showcase-curve { position: absolute; inset: 0; width: 100%; height: 100%; }
.showcase-product { position: relative; z-index: 1; width: 100%; height: 700px; object-fit: contain; object-position: bottom; align-self: end; }
.showcase-points { position: relative; display: grid; gap: 150px; padding-top: 110px; font-size: 23px; line-height: 1.3; }
.showcase-points:first-of-type { text-align: right; }
.showcase-points:last-of-type { text-align: left; }
.product-story { position: relative; z-index: 2; margin-top: -70px; }
.routine-card { border-radius: 20px; background: #0a2942; overflow: hidden; display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; }
.routine-copy { padding: 42px; position: relative; z-index: 1; }
.routine-copy h3 { font-size: 32px; line-height: 1.15; }
.routine-copy p { font-size: 16px; color: #fff; margin: 22px 0; max-width: 510px; }
.routine-list { display: grid; gap: 17px; font-size: 14px; }
.routine-card > img { height: 100%; width: 100%; object-fit: cover; object-position: 65% center; }
.feature-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.feature-pair article { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 38px 28px 28px; border-radius: 20px; overflow: hidden; background: rgba(4,25,44,.77); }
.feature-pair h3 { font-size: 34px; line-height: 1.15; }
.feature-pair .btn { margin-top: auto; }
.ingredient-cloud { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 10px; min-height: 200px; padding: 30px 0; }
.ingredient-cloud span { border: 1px solid rgba(255,255,255,.22); border-radius: 30px; padding: 9px 18px; font-size: 15px; color: #fff; }
.ingredient-cloud span:nth-child(3n) { border-color: rgba(41,189,191,.65); color: white; }
.formula-orbit { position: relative; width: 180px; height: 180px; border: 1px dashed rgba(255,255,255,.3); border-radius: 50%; margin: 20px 0; display: grid; place-items: center; }
.formula-orbit b { font-size: 110px; color: var(--accent); font-weight: 400; line-height: 1; }
.formula-orbit span { position: absolute; border-radius: 30px; padding: 4px 9px; font-size: 11px; background: #234b6b; }
.formula-orbit span:nth-child(1) { top: 0; left: 16px; }
.formula-orbit span:nth-child(2) { right: -12px; top: 80px; }
.formula-orbit span:nth-child(3) { bottom: -7px; left: 35px; }
.concept-note { text-align: center; color: #fff; font-size: 11px; margin-top: 25px; }
.comparison-section { padding: 100px 0; }
.comparison-layout { display: grid; grid-template-columns: .8fr 1.4fr; gap: 65px; align-items: center; }
.comparison-copy h3 { font-size: 34px; line-height: 1.17; }
.comparison-copy p { font-size: 16px; color: #71736f; margin: 25px 0; }
.comparison-copy .btn { padding-inline: 22px; }
.compare { border-radius: 20px; overflow: hidden; border: 1px solid #dedfd9; }
.compare-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); font-size: 13px; border-top: 1px solid #dedfd9; }
.compare-row:first-child { border: 0; }
.compare-row > div { min-width: 0; overflow-wrap: anywhere; hyphens: auto; padding: 18px 12px; display: flex; justify-content: center; align-items: center; text-align: center; }
.compare-row > div:first-child { justify-content: flex-start; text-align: left; }
.compare-row .us { background: #e8eddf; }
.compare-head { font-weight: 600; font-size: 15px; }
.compare-head > div { min-height: 115px; }
.compare-head .us { display: grid; justify-items: center; gap: 6px; background: #292929; color: white; }
.compare-head .us .logo-mark { width: 78px; }
.compare-head .us > span:last-child { font-size: 11px; font-weight: 400; }
.home .final { margin: 0; padding: 0 var(--gutter) 70px; }
.final-card { position: relative; overflow: hidden; width: min(1120px,100%); margin: auto; border-radius: 28px; background: linear-gradient(110deg,#082e50,#1c609a); color: white; display: grid; grid-template-columns: 1.3fr .8fr; align-items: center; padding: 60px 60px 0; }
.final-copy { position: relative; z-index: 1; padding-bottom: 60px; }
.final-copy .eyebrow { justify-content: flex-start; }
.final-copy h2 { font-size: 45px; margin: 20px 0; }
.final-copy p { color: #fff; font-size: 17px; max-width: 490px; margin-bottom: 25px; }
.final-copy small { display: block; margin-top: 16px; color: #fff; font-size: 11px; }
.final-card > img { width: 100%; max-height: 470px; object-fit: contain; align-self: end; transform: rotate(8deg) translateY(35px); }
body[data-page='home'] .footer { background: #202526; }

@media (min-width: 1700px) { .hero-scene { min-height: 1450px; } .home .hero { padding-top: 180px; } }
@media (max-width: 1100px) {
  .hero-scene { min-height: 1180px; }
  .home .hero { padding-top: 155px; }

  .problem-card { padding: 35px; gap: 30px; }
  .problem-card h2,.problem-card p { font-size: 18px; }
  .home .problem { padding-top: 330px; }
  .step { padding: 24px 20px; }
  .quality-card { padding: 32px; gap: 25px; }
  .quality-list { font-size: 13px; gap: 18px; }
  .showcase-stage { grid-template-columns: 1fr 390px 1fr; min-height: 570px; }
  .showcase-product { height: 600px; }
  .showcase-points { font-size: 19px; gap: 130px; }
  .routine-copy { padding: 30px; }
  .comparison-layout { gap: 28px; }
  .comparison-copy h3 { font-size: 28px; }
  .final-card { padding: 45px 35px 0; }
  .final-copy h2 { font-size: 36px; }
}
@media (max-width: 760px) {
  body .nav { top: 16px; padding: 9px 9px 9px 18px; gap: 12px; border-radius: 20px; }
  body .nav .btn { padding-inline: 18px; min-height: 42px; }
  .hero-scene { min-height: 1260px; border-radius: 0 0 30px 30px; }
  .hero-photo { top: 120px; height: 1050px; object-position: 53% center; -webkit-mask-image: linear-gradient(180deg, transparent, #000 160px); mask-image: linear-gradient(180deg, transparent, #000 160px); }
  .home .hero { padding-top: 135px; }
  .hero-inner { gap: 20px; }
  .home .hero h1 { font-size: clamp(34px,5.6vw,42px); max-width: 620px; }
  .home .hero p { font-size: 18px; max-width: 500px; }
  .hero-ctas { gap: 12px; margin-top: 6px; }
  .hero-ctas .btn { min-width: 0; padding-inline: 24px; }

  .home .problem { padding-top: 350px; margin-bottom: 30px; }
  .problem-card { grid-template-columns: 1fr; gap: 24px; padding: 30px; }
  .problem-copy .logo-mark { margin-bottom: 20px; }
  .problem-card h2,.problem-card p { font-size: 18px; }
  .curve { max-height: 190px; }
  .trust-strip { padding: 32px 20px 40px; }
  .trust-strip > div { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; font-size: 13px; max-width: 480px; margin: auto; text-align: left; }
  .home .steps-section { border-radius: 30px 30px 0 0; padding-top: 55px; }

  .steps-section::before { background: linear-gradient(180deg,#374957 0,transparent 25%,#d6d9d8 50%); }
  .process-product { height: 360px; margin-bottom: 28px; }
  .home .steps { grid-template-columns: 1fr; max-width: 530px; margin: auto; gap: 16px; }
  .step { padding: 28px; }
  .step h3 { font-size: 30px; margin: 17px 0; }
  .step h3 br { display: none; }
  .step p { margin-bottom: 20px; }
  .step li { font-size: 14px; }
  .quality-card { grid-template-columns: 1fr; gap: 28px; padding: 35px 24px; }
  .quality-card h2 { font-size: 32px; }
  .quality-list { font-size: 13px; }
  .home .showcase { border-radius: 30px 30px 0 0; padding-top: 55px; }
  .home .section-head { gap: 20px; margin-bottom: 30px; }
  .showcase-stage { grid-template-columns: 1fr 280px 1fr; min-height: 490px; margin-inline: -10px; }
  .showcase-product { height: 490px; }
  .showcase-points { padding-top: 85px; gap: 90px; font-size: 15px; }
  .routine-card { grid-template-columns: 1fr; }
  .routine-card > img { height: 300px; object-position: right center; }
  .routine-copy { padding: 30px; }
  .product-story { margin-top: -25px; }
  .feature-pair { gap: 14px; }
  .feature-pair article { padding: 28px 15px; }
  .feature-pair h3 { font-size: 25px; }
  .ingredient-cloud { gap: 6px; }
  .ingredient-cloud span { font-size: 12px; padding: 7px 10px; }
  .feature-pair .btn { font-size: 13px; padding-inline: 17px; }
  .comparison-section { padding: 65px 0; }
  .comparison-layout { grid-template-columns: 1fr; gap: 30px; }
  .comparison-copy { text-align: center; max-width: 520px; margin: auto; }
  .comparison-copy h3 { font-size: 30px; }
  .comparison-copy .btn { display: none; }
  .final-card { grid-template-columns: 1fr; padding: 36px 28px 0; text-align: center; }
  .final-copy { padding-bottom: 0; }
  .final-copy .eyebrow { justify-content: center; font-size: 12px; }
  .final-copy h2 { font-size: 34px; }
  .final-card > img { width: 220px; max-height: 300px; margin: auto; transform: rotate(8deg) translateY(35px); }
}
@media (max-width: 480px) {
  body .nav { width: calc(100% - 24px); top: 12px; padding: 8px 8px 8px 14px; }
  body .nav .btn { font-size: 12px; padding-inline: 14px; }
  body .nav-actions { gap: 5px; }
  body .nav .icon-btn { width: 36px; height: 38px; }
  body[data-page='home'] .logo-mark, body .nav .logo-mark { width: 88px; }
  .hero-scene { min-height: 1360px; }
  .hero-photo { top: 300px; height: 760px; object-position: 53% bottom; }
  .hero-scene::after { background: linear-gradient(180deg,#c6d7e4 0%,#c6d7e4 22%,rgba(198,215,228,.5) 36%,transparent 49%,transparent 68%,#8ba4b3 84%); }
  .home .hero { padding-top: 118px; }
  .home .hero h1 { font-size: 34px; line-height: 1.08; }
  .home .hero p { font-size: 16px; line-height: 1.5; max-width: 335px; }
  .hero-ctas { flex-direction: column; width: 100%; max-width: 330px; gap: 10px; }
  .home .hero .btn { width: 100%; min-height: 46px; font-size: 14px; }


  .home .problem { padding-top: 355px; }
  .problem-card { padding: 25px; gap: 18px; border-radius: 20px; }
  .problem-card h2,.problem-card p { font-size: 17px; }
  .curve { max-height: 155px; }
  .trust-strip p { font-size: 12px; }
  .trust-strip > div { font-size: 12px; gap: 15px 9px; }
  .trust-strip .tick { gap: 6px; }
  .home .section-head h2 { font-size: 36px; }
  .eyebrow { font-size: 12px; }

  .step { padding: 26px; }
  .process-product { height: 330px; margin-bottom: 24px; }
  .steps-cta { gap: 24px; margin-bottom: 42px; }
  .steps-cta .hero-ticks { gap: 12px; font-size: 11px; }
  .quality-list { grid-template-columns: 1fr; gap: 17px; }
  .quality-card h2 { text-align: left; }
  .home .showcase .section-head h2 { font-size: 34px; }
  .showcase-stage { grid-template-columns: 1fr 230px 1fr; min-height: 470px; margin-inline: -12px; }
  .showcase-product { height: 430px; grid-column: 2; grid-row: 1; }
  .showcase-points { font-size: 11px; gap: 90px; padding-top: 70px; }
  .showcase-points:first-of-type { grid-column: 1; grid-row: 1; }
  .showcase-points:last-of-type { grid-column: 3; grid-row: 1; }
  .showcase-curve { height: 430px; }
  .routine-copy { padding: 27px; }
  .routine-copy h3 { font-size: 30px; }
  .routine-copy p { font-size: 14px; }
  .routine-list { font-size: 13px; gap: 15px; }
  .routine-card > img { height: 245px; }
  .feature-pair { grid-template-columns: 1fr; }
  .feature-pair h3 { font-size: 32px; }
  .ingredient-cloud { max-width: 300px; min-height: 180px; }
  .formula-orbit { margin: 25px 0; }
  .compare-row { font-size: 11px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .compare-row > div { padding: 15px 9px; }
  .compare-head { font-size: 12px; }
  .compare-head .us .logo-mark { width: 65px; }
  .home .final { padding-bottom: 45px; }
  .final-copy h2 { font-size: 32px; }
}
@media (max-width: 360px) {
  .home .hero h1 { font-size: 31px; }
  .showcase-stage { grid-template-columns: 1fr 200px 1fr; }
  .showcase-points { font-size: 10px; }
  body .nav { gap: 8px; padding-left: 12px; }
  body .nav .btn { padding-inline: 8px; }
  body[data-page='home'] .logo-mark, body .nav .logo-mark { width: 80px; }
}

.home section[id] { scroll-margin-top: 115px; }

/* Comparison: full photographic section with one continuous glass table. */
.home .comparison-section { position: relative; isolation: isolate; padding: 100px 0 70px; margin-bottom: 80px; overflow: hidden; background: #d4e4ed url('assets/images/ruway-comparison-mountain-v1.webp') right bottom / max(210%, 2400px) auto no-repeat; }
.comparison-background { position: absolute; z-index: -2; top: 0; left: 50%; width: min(100%, 1600px); max-width: none; height: auto; transform: translateX(-30%); mask-image: linear-gradient(90deg,transparent,#000 10%),linear-gradient(180deg,transparent 100px,#000 200px,#000 44%,transparent 68%); mask-composite: intersect; pointer-events: none; }
.home .comparison-panel { --accent: #72d6d3; --accent-text: #72d6d3; padding: 42px 40px 24px; border-radius: 18px; background: linear-gradient(115deg,rgba(31,48,47,.88),rgba(37,22,15,.8) 72%,rgba(20,25,27,.94)); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); color: #fff; }
.home .comparison-section .compare { border: 0; border-radius: 0; overflow: visible; background: transparent; }
.home .comparison-section .compare-row { grid-template-columns: minmax(0, 64fr) minmax(0, 19fr) minmax(0, 17fr); border-top: 1px solid rgba(255,255,255,.13); font-size: 14px; }
.home .comparison-section .compare-row > div { padding: 12px 15px; min-width: 0; line-height: 1.4; color: #fff; }
.home .comparison-section .compare-row > div:first-child { padding-left: 0; color: #fff; }
.home .comparison-section .compare-row .us { background: rgba(114,214,211,.12); color: #fff; }
.home .comparison-section .compare-head { border: 0; align-items: end; font-weight: 400; }
.home .comparison-section .compare-head > div { min-height: 0; }
.home .comparison-section .compare-head .comparison-copy { display: block; align-self: start; padding: 0 55px 50px 0; color: #fff; }
.comparison-copy h2 { color: #fff; font-size: clamp(30px,2.8vw,38px); line-height: 1.13; letter-spacing: -.02em; max-width: 520px; }
.home .comparison-section .comparison-copy p { margin: 18px 0 0; max-width: 520px; font-size: 18px; line-height: 1.55; color: #fff; }
.home .comparison-section .compare-head .compare-product { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 20px; padding: 26px 12px 20px; min-height: 190px; text-align: center; }
.home .comparison-section .compare-head .us { border-radius: 14px 14px 0 0; }
.home .comparison-section .compare-product > .logo-mark { width: 90px; flex-shrink: 0; }
.compare-tub { height: 105px; display: flex; justify-content: center; align-items: center; }
.compare-tub .tub { width: 70px; filter: drop-shadow(0 8px 10px #0004); transform: rotate(-5deg); }
.compare-tub .tub-lid { height: 14px; border-radius: 3px 3px 1px 1px; }
.compare-tub .tub-body { padding: 7px 6px; gap: 5px; border-radius: 1px 1px 7px 7px; }
.compare-tub .tub .logo-mark { width: 42px; }
.compare-tub .tub-band { height: 30px; border-radius: 2px; }
.compare-tub .tub-name { font-size: 4px; }
.compare-tub .tub-meta { font-size: 3px; gap: 3px; }
.compare-bottles { height: 105px; width: 130px; max-width: 100%; }
.home .comparison-section .compare-head .compare-separate { font-size: 12px; font-weight: 600; gap: 10px; }
.home .comparison-section .compare-price { border-top: 0; font-weight: 600; }
.home .comparison-section .compare-row:last-child .us { border-radius: 0 0 14px 14px; }
.comparison-check { display: inline-grid; place-items: center; height: 21px; width: 21px; background: var(--accent); border-radius: 50%; color: var(--accent-ink); font-size: 13px; font-weight: 600; }
.comparison-cross { display: inline-grid; place-items: center; width: 21px; height: 21px; color: #fff; font-size: 17px; line-height: 1; font-weight: 600; }
@media(max-width: 900px) {
  .home .comparison-panel { padding: 32px 26px 22px; }
  .home .comparison-section .compare-row { grid-template-columns: minmax(0,58fr) minmax(0,23fr) minmax(0,19fr); font-size: 12px; }
  .home .comparison-section .compare-head .comparison-copy { padding-right: 26px; }
  .comparison-copy h2 { font-size: 30px; }
  .home .comparison-section .comparison-copy p { font-size: 15px; }
}
@media(max-width: 640px) {
  .home .comparison-section { padding: 70px 0 45px; margin-bottom: 60px; }
  .comparison-background { top: 40px; width: 150%; transform: translateX(-31%); }
  .home .comparison-panel { padding: 26px 18px 20px; width: calc(100% - 24px); }
  .home .comparison-section .compare-head { position: relative; padding-top: 250px; }
  .home .comparison-section .compare-head .comparison-copy { position: absolute; left: 0; right: 0; top: 0; padding: 0; text-align: left; }
  .comparison-copy h2 { font-size: 30px; max-width: 360px; }
  .home .comparison-section .comparison-copy p { font-size: 15px; margin-top: 16px; max-width: 400px; }
  .home .comparison-section .compare-row { grid-template-columns: minmax(0,50fr) minmax(0,25fr) minmax(0,25fr); font-size: 11px; }
  .home .comparison-section .compare-row > div { padding: 12px 7px; }
  .home .comparison-section .compare-head .compare-product { padding: 18px 5px 12px; min-height: 160px; gap: 16px; }
  .home .comparison-section .compare-product > .logo-mark { width: 62px; }
  .home .comparison-section .compare-head .compare-separate { font-size: 10px; gap: 10px; }
  .compare-tub { height: 85px; }
  .compare-tub .tub { width: 57px; }
  .compare-bottles { height: 85px; }
}
@media(max-width: 360px) {
  .home .comparison-section .compare-head { padding-top: 290px; }
  .comparison-copy h2 { font-size: 28px; }
  .home .comparison-section .compare-row { font-size: 10px; }
  .home .comparison-section .compare-product > .logo-mark { width: 52px; }
}

.home .comparison-section .compare-head .us { grid-column: 2; }
.home .comparison-section .compare-head .compare-separate { grid-column: 3; }
.compare-bottles { object-fit: contain; }

/* Ingredient breakdown continues the comparison photograph. */
.home .cost-comparison { max-width: 900px; margin-top: 45px; color: #fff; }
.cost-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 58px; position: relative; align-items: center; }
.cost-connectors { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cost-product { position: relative; display: grid; place-items: center; }
.cost-product img { width: 320px; height: 440px; object-fit: contain; max-width: 100%; filter: drop-shadow(0 18px 20px rgba(0,0,0,.3)); }
.cost-breakdown { position: relative; display: grid; gap: 12px; }
.cost-ingredients { margin: 0; border-radius: 10px; overflow: hidden; background: rgba(60,40,20,.74); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.cost-ingredients > div { min-height: 42px; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 10px 18px; border-top: 1px solid rgba(255,255,255,.14); }
.cost-ingredients > div:first-child { border-top: 0; }
.cost-ingredients dt { font-size: 13px; line-height: 1.3; font-weight: 600; }
.cost-ingredients dt span { font-weight: 400; font-size: 11px; color: #fff; }
.cost-ingredients dd { margin: 0; color: #fff; font-size: 13px; }
.cost-total,.cost-halyte { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 18px; border-radius: 10px; font-size: 14px; line-height: 1.3; }
.cost-total { color: #202526; background: #fff; }
.cost-total > span { text-transform: uppercase; font-size: 12px; }
.cost-total strong,.cost-halyte strong { font-size: 13px; white-space: nowrap; font-weight: 600; }
.cost-halyte { background: var(--accent); color: var(--accent-ink); }
.cost-halyte .logo-mark { display: block; width: 90px; }
.cost-note { max-width: 760px; margin: 25px auto 0; color: #fff; font-size: 11px; line-height: 1.6; text-align: center; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
@media(max-width: 760px) {
  .cost-layout { gap: 28px; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); }
  .cost-product img { height: 390px; }
  .cost-ingredients > div { padding-inline: 12px; }
  .cost-ingredients dt { font-size: 12px; }
  .cost-total,.cost-halyte { padding: 12px; gap: 10px; }
  .cost-total > span,.cost-total strong,.cost-halyte strong { font-size: 11px; }
}
@media(max-width: 560px) {
  .home .cost-comparison { margin-top: 28px; width: calc(100% - 36px); }
  .cost-layout { grid-template-columns: 1fr; gap: 18px; }
  .cost-product img { width: 235px; height: 300px; }
  .cost-connectors { display: none; }
  .cost-ingredients dt { font-size: 13px; }
  .cost-total,.cost-halyte { min-height: 50px; padding: 12px 16px; }
  .cost-total > span,.cost-total strong,.cost-halyte strong { font-size: 12px; }
  .cost-note { margin-top: 20px; font-size: 10px; }
}

/* Clearly marked testimonial mock-ups for design testing. */
.home .testimonials-section { padding: 0 0 100px; background: #f7f7f3; }
.home .testimonials-section .wrap { width: min(1200px,100% - 2 * var(--gutter)); }
.home .testimonials-section .section-head { max-width: 1000px; margin-bottom: 60px; gap: 24px; }
.home .testimonials-section h2 { color: #080b0b; font-size: clamp(36px,4.4vw,60px); line-height: 1.08; }
.home .testimonials-section .section-head p { max-width: 850px; margin: 18px auto 0; font-size: 18px; color: #777971; line-height: 1.55; }
.testimonial-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; border-radius: 24px; }
.testimonial-card { position: relative; isolation: isolate; margin: 0; min-height: 500px; overflow: hidden; border-radius: 24px; background: #3d4540; }
.testimonial-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -1; transition: transform .5s ease; }
.testimonial-card:hover > img { transform: scale(1.025); }
.testimonial-card figcaption { margin: 16px 12px; padding: 15px 16px; border-radius: 16px; color: #fff; background: rgba(41,46,38,.87); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); }
.testimonial-home figcaption { background: rgba(83,49,23,.88); }
.testimonial-daily figcaption { background: rgba(27,49,50,.86); }
.testimonial-stars { display: block; color: var(--accent); letter-spacing: 2px; font-size: 19px; line-height: 1; margin-bottom: 11px; }
.testimonial-card blockquote { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.35; }
.testimonial-byline { display: grid; gap: 4px; margin-top: 13px; }
.testimonial-byline > span { text-transform: uppercase; color: #fff; font-size: 12px; font-weight: 600; }
.testimonial-byline small { color: #fff; font-size: 10px; }
@media(max-width: 1000px) {
  .testimonial-grid { gap: 14px; }
  .testimonial-card { min-height: 440px; }
  .testimonial-card figcaption { padding: 13px; margin: 12px 9px; }
  .testimonial-card blockquote { font-size: 12px; }
}
@media(max-width: 760px) {
  .home .testimonials-section { padding-bottom: 70px; }
  .home .testimonials-section .section-head { margin-bottom: 35px; gap: 20px; }
  .home .testimonials-section .section-head p { font-size: 16px; margin-top: 4px; }
  .testimonial-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .testimonial-card { min-height: 500px; }
  .testimonial-card blockquote { font-size: 14px; }
}
@media(max-width: 560px) {
  .home .testimonials-section h2 { font-size: 36px; }
  .testimonial-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--accent-edge) #e2e4dc; padding-bottom: 12px; border-radius: 22px 22px 0 0; }
  .testimonial-card { min-height: 510px; scroll-snap-align: start; border-radius: 22px; }
  .testimonial-card figcaption { margin: 16px 12px; padding: 17px; }
  .testimonial-card blockquote { font-size: 15px; }
}
.testimonial-home { background: #e3dbcc; }
.testimonial-daily { background: #e4e1d9; }
.testimonial-gym { background: #20282e; }
.testimonial-home > img,.testimonial-daily > img,.testimonial-gym > img { top: 65px; height: calc(100% - 65px); }

/* About page follows the reference's editorial story / image / promise layout. */
.about-page { padding-top: 130px; background: #fafafa; }
.about-content { width: min(1040px,100% - 2 * var(--gutter)); margin: 0 auto 45px; }
.about-label { text-align: center; color: var(--ink); font: 600 13px/1.3 PlexSans,sans-serif; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 22px; }
.about-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 42px; }
.about-copy h1,.about-copy h2,.about-innovation h2 { font-size: clamp(30px,2.9vw,42px); line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; }
.about-copy p { color: #000000; font-size: 15px; line-height: 1.6; margin-top: 25px; max-width: 490px; }
.about-story-photo { width: 100%; height: 340px; border-radius: 26px; object-fit: cover; object-position: 38% center; }
.about-innovation h2 { margin: 0 0 28px; text-align: center; }
.about-wide-photo { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 26px; }
.about-innovation > p { font-size: 15px; line-height: 1.65; color: #000000; margin: 27px auto 0; max-width: 760px; text-align: center; }
.about-product-photo { background: #ebebeb; border-radius: 26px; height: 430px; display: grid; align-items: end; justify-items: center; overflow: hidden; }
.about-product-photo img { height: 400px; width: 100%; object-fit: contain; object-position: center bottom; transform: translateY(40px); }
.about-promises { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.about-promises li { border-radius: 10px; background: linear-gradient(105deg,var(--accent),var(--accent-light)); color: var(--accent-ink); font-size: 14px; font-weight: 600; line-height: 1.45; padding: 21px; }
.about-promises li:nth-child(2) { background: #292929; color: #fff; }
.about-mission { width: min(1440px,100% - 2 * var(--gutter)); margin: 50px auto 40px; padding: 75px 10%; color: white; background: #292929; text-align: center; }
.about-mission h2 { font-size: clamp(23px,2vw,30px); line-height: 1.5; letter-spacing: -.01em; max-width: 1070px; margin: auto; }
.about-signup { position: relative; isolation: isolate; width: min(1440px,100% - 2 * var(--gutter)); margin: auto; min-height: 450px; padding: 70px 25px; text-align: center; color: white; overflow: hidden; }
.about-signup > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 65%; z-index: -2; }
.about-signup::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(15,22,25,.7); }
.about-signup-inner { max-width: 780px; margin: auto; display: grid; justify-items: center; gap: 17px; }
.about-signup h2 { font-size: clamp(27px,3vw,40px); line-height: 1.12; text-wrap: balance; }
.about-signup-inner > p { font-size: 15px; color: #fff; }
.about-newsletter { width: min(430px,100%); display: grid; justify-items: center; gap: 12px; margin: 8px auto 0; }
.about-newsletter input { width: 100%; min-height: 48px; padding: 12px 18px; border: 1px solid rgba(255,255,255,.3); border-radius: 12px; color: white; background: rgba(255,255,255,.13); backdrop-filter: blur(14px); }
.about-newsletter input::placeholder { color: #fff; }
.about-newsletter .btn { border-radius: 12px; font-size: 14px; }
.about-signup .newsletter-note { max-width: 600px; font-size: 11px; color: #fff; }
.newsletter-result { font-size: 13px; line-height: 1.5; }
.newsletter-result:empty { display: none; }
.about-quiz-link { color: white; font-size: 14px; text-underline-offset: 4px; }
body[data-page='about'] .footer { margin-top: 0; padding-top: 65px; }
.nav-menu-btn,.nav-menu-language { display: none; }
@media(max-width: 1050px) {
  .nav { flex-wrap: wrap; }
  .nav .nav-links { display: none; }
  .nav .nav-menu-btn { display: inline-grid; }
  .nav .nav-actions > .lang-btn { display: none; }
  .nav.nav-menu-open .nav-links { display: grid; position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #292d2e; padding: 15px; border-radius: 18px; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 15px 30px #0002; }
  .nav .nav-menu-language { display: block; text-align: left; border: 0; background: transparent; padding: 8px 14px; color: white; font-size: 14px; }
  .nav-links a { font-size: 15px; }
  .about-page { padding-top: 120px; }
  .about-split { gap: 30px; }
  .about-product-photo { height: 440px; }
  .about-promises li { font-size: 13px; padding: 17px; }
}
@media(max-width: 700px) {
  .about-page { padding-top: 104px; }
  .about-content { margin-bottom: 40px; }
  .about-label { font-size: 12px; margin-bottom: 24px; }
  .about-split { grid-template-columns: 1fr; gap: 28px; }
  .about-copy h1,.about-copy h2,.about-innovation h2 { font-size: 33px; }
  .about-copy p { margin-top: 20px; font-size: 15px; }
  .about-story-photo { height: 280px; border-radius: 20px; }
  .about-wide-photo { aspect-ratio: 4/3; border-radius: 20px; object-position: 70% center; }
  .about-innovation > p { font-size: 14px; margin-top: 20px; }
  .about-product-photo { height: 350px; border-radius: 20px; }
  .about-product-photo img { height: 350px; }
  .about-promises li { font-size: 14px; padding: 20px; }
  .about-mission { width: 100%; padding: 50px var(--gutter); margin: 40px 0 30px; }
  .about-mission h2 { font-size: 23px; line-height: 1.45; }
  .about-signup { width: 100%; padding: 55px 24px; }
  .about-signup h2 { font-size: 30px; }
}
@media(max-width: 360px) {
  .nav { gap: 8px; padding-left: 12px; }
  .nav-actions { gap: 5px; }
  .nav .btn { padding-inline: 11px; font-size: 12px; }
  .nav .icon-btn { width: 36px; height: 38px; }
  .about-copy h1,.about-copy h2,.about-innovation h2 { font-size: 30px; }
}
@media(max-width:360px) { .nav .logo-mark { width: 80px; } }
.about-wide-photo { height: auto; }

/* Compact photographic ingredient cards, matching the formulation reference. */
.builder-page .wrap { width: min(1500px,100% - 2 * var(--gutter)); }
.builder-page .builder-grid { grid-template-columns: minmax(0,1fr) 320px; gap: 26px; }
.builder-page .ingredients { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.builder-page .ing { isolation: isolate; min-height: 185px; padding: 21px 20px 45px; border: 0; border-radius: 25px; background: #777; color: white; display: flex; flex-direction: column; gap: 10px; }
.ing-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: inherit; z-index: -2; }
.builder-page .ing::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; background: linear-gradient(180deg,rgba(32,35,33,.60),rgba(32,35,33,.32) 65%,rgba(32,35,33,.12)); }
.builder-page .ing.on { outline: 2px solid var(--accent-edge); outline-offset: 2px; box-shadow: none; }
.builder-page .ing-top { display: block; padding-right: 16px; }
.builder-page .ing h3 { color: white; font-size: clamp(20px,1.65vw,25px); line-height: 1.18; letter-spacing: -.025em; max-width: calc(100% - 7px); text-shadow: 0 1px 8px #0002; }
.builder-page .ing h3 small { display: inline; font: inherit; color: inherit; }
.builder-page .ing-toggle { position: absolute; top: 13px; right: 13px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid white; background: var(--accent); color: var(--accent-ink); font-size: 26px; font-weight: 400; line-height: 1; box-shadow: 0 0 0 1px var(--accent); }
.builder-page .ing.on .ing-toggle { background: var(--accent); }
.builder-page .ing-toggle:hover { background: var(--accent-hover); box-shadow: 0 0 0 1px var(--accent-hover); }
/* Cards lift slightly on hover (pointer devices only). */
.builder-page .ing { transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
@media (hover: hover) { .builder-page .ing:hover { transform: translateY(-4px) scale(1.015); box-shadow: 0 14px 30px rgba(32,35,33,.22); z-index: 1; } }
/* Plus drawn with two bars so it sits exactly in the centre (the "+" glyph sits off-centre in PlexSans). */
.builder-page .ing-toggle { font-size: 0; padding: 0; }
.builder-page .ing-toggle::before,.builder-page .ing-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 1px; background: currentColor; transform: translate(-50%,-50%); }
.builder-page .ing-toggle::after { transform: translate(-50%,-50%) rotate(90deg); }
.builder-page .doses { gap: 7px; margin-top: 1px; }
.builder-page .dose-btn { background: white; border: 0; color: #171b1a; font-size: 12px; padding: 6px 13px; font-weight: 600; line-height: 1.3; min-height: 29px; transition: background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease); }
.builder-page .dose-btn.preview-dose,.builder-page .dose-btn[aria-pressed='true'] { color: var(--accent-ink); background: var(--accent); }
.builder-page .dose-btn:hover { transform: translateY(-1px); }
.builder-page .ing:focus-within { z-index: 3; }
.ing-info { position: absolute; right: 14px; bottom: 13px; }
.ing-info summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 27px; height: 27px; border: 2px solid white; border-radius: 50%; color: white; background: rgba(32,35,33,.35); font-size: 17px; font-weight: 600; line-height: 1; font-style: normal; }
.ing-info summary::-webkit-details-marker { display: none; }
.ing-info summary:hover { background: rgba(32,35,33,.65); }
.ing-info[open] { inset: 0; z-index: 4; background: #fff; color: #292929; border-radius: inherit; box-shadow: 0 8px 25px #0002; }
.ing-info[open] summary { position: absolute; right: 13px; bottom: 13px; color: #292929; border-color: #292929; background: #f3f3ef; z-index: 2; }
.ing-detail { padding: 18px 20px 48px; height: 100%; max-height: 185px; overflow-y: auto; overscroll-behavior: contain; border-radius: inherit; }
.ing-detail strong { display: block; font-size: 17px; line-height: 1.2; }
.ing-form { display: block; color: #777; font-size: 12px; margin-top: 3px; }
.builder-page .ing .ing-detail p { color: #606560; font-size: 13px; line-height: 1.45; margin-top: 12px; }
.ing-detail-doses { display: flex; flex-wrap: wrap; gap: 5px 12px; font-size: 12px; margin-top: 12px; font-weight: 600; }
.ing-detail .ing-tags { margin-top: 10px; }
.ing-detail > small { display: block; font-size: 10px; line-height: 1.5; margin-top: 12px; color: #777; }
.builder-image-note { font-size: 12px; line-height: 1.5; color: #747973; margin: -10px 0 22px; }
.builder-page .search input { background: #f3f3f3; height: 44px; font-size: 14px; }
.builder-page .chip { padding: 8px 18px; font-size: 13px; }
@media(max-width: 1200px) {
  .builder-page .builder-grid { grid-template-columns: minmax(0,1fr) 285px; gap: 22px; }
  .builder-page .ing { padding-left: 17px; padding-right: 17px; min-height: 180px; }
  .builder-page .ing h3 { font-size: 20px; }
}
@media(max-width: 1100px) {
  .builder-page .builder-grid { grid-template-columns: 1fr; }
  .builder-page .panel { position: static; }
  .builder-page .panel-inner { display: grid; grid-template-columns: 230px 1fr; }
  .builder-page .panel-visual { height: 100%; }
}
@media(max-width: 760px) {
  .builder-page .ingredients { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
  .builder-page .ing { min-height: 185px; }
  .builder-page .ing h3 { font-size: 21px; }
}
@media(max-width: 640px) {
  .builder-page .panel-inner { grid-template-columns: 1fr; }
  .builder-page .ingredients { grid-template-columns: 1fr; gap: 16px; }
  .builder-page .ing { min-height: 175px; padding: 22px 24px 45px; }
  .builder-page .ing h3 { font-size: 25px; padding-right: 10px; }
  .builder-page .ing-toggle { width: 34px; height: 34px; right: 15px; top: 15px; }
  .builder-page .ing-toggle::before,.builder-page .ing-toggle::after { width: 14px; }
  .builder-page .dose-btn { min-height: 31px; padding-inline: 15px; font-size: 13px; }
  .ing-detail { max-height: 175px; }
}
.builder-page .ing h3 { overflow-wrap: anywhere; hyphens: auto; }

/* Guided quiz and personalised result preview. */
.quiz-v2 { background: #fafafa; }
.q-top { width: min(1260px,100% - 2 * var(--gutter)); margin: auto; display: flex; justify-content: space-between; align-items: center; padding: 26px 0; }
.q-top-right { display:flex; align-items:center; gap:10px; }
.q-lang,.q-close { border:1px solid var(--line); border-radius:50%; background:white; width:44px; height:44px; display:grid; place-items:center; text-decoration:none; font-size:13px; }
.q-close { font-size:25px; }
.q-progress-shell { width:min(680px,100% - 2 * var(--gutter)); margin:2px auto 0; }
.q-progress-text { display:flex; justify-content:space-between; gap:16px; font-size:12px; color:#747474; margin-bottom:11px; }
.q-progress { height:4px; background:#e8e8e8; border-radius:4px; overflow:hidden; }
.q-progress > span { height:100%; background:var(--accent); display:block; transition:width .2s var(--ease); }
.q-shell { width:100%; flex:1; padding:54px var(--gutter) 75px; display:flex; justify-content:center; align-items:flex-start; }
.q-card { width:min(680px,100%); display:grid; gap:22px; align-content:start; animation:rise .2s ease; }
.q-card h1 { font-size:clamp(32px,4vw,46px); line-height:1.12; text-wrap:balance; max-width:660px; }
.q-card h1:focus { outline:none; }
.q-kicker { font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--accent-text); font-weight:600; }
.q-lede { color:#6b6b6b; font-size:16px; line-height:1.6; max-width:630px; }
.q-back { display:flex; gap:7px; align-items:center; width:fit-content; padding:6px 0; margin-bottom:6px; border:0; background:none; font-size:13px; color:#777; min-height:36px; }
.q-back svg { width:16px; height:16px; }
.q-options { display:grid; gap:11px; }
.q-two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.q-option { display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; min-height:61px; padding:17px 20px; border:1px solid #dedede; border-radius:14px; background:white; text-align:left; font-size:16px; transition:border-color .2s var(--ease),background .2s var(--ease); }
.q-option:hover { border-color:#aaa; }
.q-option[aria-pressed='true'] { border-color:var(--accent-edge); background:var(--accent-surface); }
.q-choice-mark { display:grid; place-items:center; flex:none; width:23px; height:23px; border:1px solid #d5d5d5; border-radius:50%; font-size:16px; color:#9a9a9a; }
.q-option[aria-pressed='true'] .q-choice-mark { color:var(--accent-ink); background:var(--accent); border-color:var(--accent-edge); }
.q-sex { grid-template-columns:1fr 1fr; }
.q-sex .q-option { flex-wrap:wrap; padding:0 0 18px; overflow:hidden; }
.q-sex .q-option > span:not(.q-sex-image) { margin:0 18px; }
.q-sex-image { width:100%; height:180px; background:#eee; overflow:hidden; }
.q-sex-image img { width:100%; height:100%; object-fit:cover; object-position:center 27%; }
.q-sex .q-option:last-child { grid-column:1/-1; padding:18px 0; }
.q-field { display:grid; gap:9px; color:#606060; font-size:14px; }
.q-fields { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.q-field .text-input { font-size:20px; height:64px; border-radius:12px; }
.q-unit { display:flex; gap:8px; }
.q-unit button { border:1px solid var(--line); border-radius:25px; padding:10px 21px; min-height:44px; background:white; font-size:14px; }
.q-unit button[aria-pressed='true'] { background:var(--ink); color:white; border-color:var(--ink); }
.q-small { color:#737373; font-size:13px; line-height:1.6; }
.q-next { width:100%; justify-content:space-between; border-radius:12px; min-height:54px; margin-top:3px; }
.q-why { font-size:13px; color:#686868; border-top:1px solid #e5e5e5; padding-top:16px; }
.q-why summary,.q-extra summary { cursor:pointer; width:fit-content; min-height:30px; }
.q-why p { padding-top:8px; line-height:1.6; }
.q-extra { color:#777; font-size:13px; }
.q-extra .q-field { margin-top:10px; }
.q-extra textarea { width:100%; padding:13px; border:1px solid var(--line); border-radius:10px; resize:vertical; font:inherit; font-size:16px; background:white; color:var(--ink); }
.q-extra p { margin-top:8px; font-size:12px; }
.q-footer-note { text-align:center; color:#888; font-size:12px; padding:0 20px 24px; }
.q-card .consent { font-size:13px; color:#646464; border-radius:12px; line-height:1.6; }
.q-intro { text-align:center; justify-items:center; max-width:620px; }
.q-intro .q-next { justify-content:center; gap:16px; }
.q-intro-art { width:155px; height:160px; overflow:hidden; display:grid; place-items:start center; border-radius:40% 40% 48% 48%; background:#d7eaff; margin:-20px auto 0; }
.q-intro-art .tub { width:96px; margin-top:17px; transform:rotate(-9deg); }
.q-intro-art .tub-lid { height:16px; }
.q-intro-art .tub-body { gap:5px; padding:11px 8px; }
.q-intro-art .tub .logo-mark { width:50px; }
.q-intro-art .tub-band { height:42px; }
.q-intro-art .tub-name { font-size:6px; }
.q-intro-art .tub-meta { font-size:4px; }
.q-subtitle { font-size:19px; margin-top:5px; }
.q-review { border-top:1px solid var(--line); }
.q-review > div { display:flex; justify-content:space-between; gap:18px; padding:15px 0; border-bottom:1px solid var(--line); }
.q-review small { display:block; font-size:12px; color:#777; margin-bottom:5px; }
.q-review strong { display:block; font-size:15px; font-weight:400; }
.q-review em { display:block; font-style:normal; font-size:13px; color:#777; margin-top:5px; overflow-wrap:anywhere; }
.q-review .link-btn { flex:none; }
.q-email-icon { display:grid; place-items:center; width:64px; height:64px; background:var(--accent-surface); color:var(--accent-text); border-radius:18px; font-size:32px; }
[data-quiz-email] { display:grid; gap:10px; }
[data-quiz-email] .btn { border-radius:12px; justify-content:space-between; min-height:54px; margin-top:8px; }
.q-error { font-size:13px; color:#a43625; min-height:0; }
.q-error:empty { display:none; }

/* Four-part results page, following the supplied CLD9 references. */
.results-page { padding:116px 0 40px; background:linear-gradient(180deg,#83c6ed 0,#d5e9f5 610px,#fafafa 1040px); }
.result-wrap { width:min(1280px,100% - 2 * var(--gutter)); margin:auto; }
.results-hero { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:44px; align-items:start; margin-bottom:45px; }
.result-gallery { min-width:0; }
.product-scene { height:clamp(500px,45vw,640px); border-radius:34px; position:relative; overflow:hidden; display:flex; justify-content:center; align-items:flex-end; isolation:isolate; }
.product-scene.sky { background:radial-gradient(ellipse at 15% 70%,#e7eeff 0,transparent 38%),radial-gradient(ellipse at 95% 45%,#e8f3ffbb,transparent 32%),linear-gradient(135deg,#067cda,#449ae1 55%,#c7def2); }
.product-scene.mint { background:radial-gradient(ellipse at 10% 70%,#e9f8f7,transparent 45%),linear-gradient(145deg,#60cbc6,#c9eeeb 70%,#f0faf5); }
.scene-caption { position:absolute; top:22px; left:24px; color:white; font-size:12px; z-index:2; text-shadow:0 1px 5px #0003; }
.personal-tub { width:min(380px,90%); position:relative; filter:drop-shadow(0 20px 28px #0003); flex:none; }
.personal-tub > img { width:100%; height:auto; }
.product-scene .personal-tub { width:min(430px,87%); }
.product-scene .personal-tub:not(.hand) { margin-bottom:10px; width:min(370px,77%); }
.personal-label { position:absolute; left:15%; top:46%; width:70%; height:36.5%; display:flex; flex-direction:column; padding:10px 12px; color:white; background:linear-gradient(135deg,#075a60,#08777a); border-radius:7px; overflow:hidden; }
.personal-label > strong { font-size:18px; line-height:1.15; padding-bottom:7px; border-bottom:1px solid #ffffff70; margin-bottom:7px; overflow-wrap:anywhere; }
.personal-label > span { font-size:9px; margin-bottom:5px; }
.personal-label > div { display:flex; justify-content:space-between; align-items:baseline; gap:6px; font-size:10px; padding:2px 0; line-height:1.25; }
.personal-label b { font-weight:400; }
.personal-label small { white-space:nowrap; font-size:9px; }
.personal-label em { margin-top:auto; font-size:8px; font-style:normal; padding-top:5px; }
.hand .personal-label { top:36.7%; left:14.8%; width:65%; height:20.7%; padding:8px 11px; }
.hand .personal-label > strong { font-size:15px; margin-bottom:5px; padding-bottom:4px; }
.hand .personal-label > span { font-size:8px; margin-bottom:3px; }
.hand .personal-label > div { font-size:9px; padding:1px 0; }
.hand .personal-label small { font-size:8px; }
.hand .personal-label em { font-size:7px; padding-top:3px; }
.scene-change,.scene-view { position:absolute; bottom:20px; z-index:2; padding:10px 13px; border:0; border-radius:25px; color:white; background:#292929; font-size:11px; min-height:40px; }
.scene-change { left:20px; }.scene-view { right:20px; }
.result-mini-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
.result-mini { min-height:235px; border-radius:23px; color:white; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; padding:23px; overflow:hidden; position:relative; }
.ingredient-mini { background:linear-gradient(0deg,#172511b8,#172511b8),url('assets/images/ingredient-leaves-v1.webp') center 65%/cover; }
.routine-mini { background:linear-gradient(0deg,#161b18cc,#161b18b8),url('assets/images/ruway-routine-still-life-v1.webp') center/cover; }
.result-mini .q-kicker { color:var(--accent-light); font-size:9px; margin-bottom:auto; padding-bottom:25px; }
.result-mini h2 { font-size:clamp(22px,2.5vw,31px); line-height:1.12; }
.result-mini p,.result-mini a { font-size:12px; margin-top:13px; text-underline-offset:4px; }
.result-offer { display:grid; gap:16px; padding:0 0 15px; }
.result-status { display:flex; align-items:center; gap:7px; font-size:10px; font-weight:600; letter-spacing:.05em; }
.result-status > span { width:7px; height:7px; border-radius:50%; background:var(--accent); }
.result-offer h1 { font-size:clamp(30px,3.1vw,42px); line-height:1.09; text-wrap:balance; }
.result-intro { font-size:14px; line-height:1.6; }
.result-benefits { list-style:none; padding:0; margin:0; }
.result-benefits li { display:flex; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid #29292926; font-size:14px; }
.result-benefits li > span { display:grid; place-items:center; color:var(--accent-ink); background:var(--accent); width:18px; height:18px; border-radius:50%; font-size:11px; flex:none; }
.result-benefits small { font-size:10px; color:#58666d; margin-left:auto; text-align:right; }
.offer-label { font-size:11px; font-weight:600; letter-spacing:.04em; margin-top:2px; }
.result-timing { font-size:14px; }.result-timing > span { font-size:12px; color:#667078; }
.flavour-row { display:flex; gap:16px; }
.flavour-option { padding:0; display:grid; gap:5px; justify-items:center; font-size:12px; background:none; border:0; }
.flavour-option > span { width:68px; height:68px; border:2px solid var(--accent-edge); border-radius:50%; background:linear-gradient(145deg,#1589d5,#c5e0f4); display:grid; place-items:center; }
.flavour-option img { height:53px; width:auto; }
.flavour-option small { font-size:10px; color:#777; }
.package-option { padding:17px 15px; border:1px solid var(--accent-edge); border-radius:17px; background:white; display:flex; align-items:center; gap:13px; }
.package-option img { width:44px; height:65px; object-fit:contain; flex:none; }
.package-option > div { min-width:0; }.package-option strong { font-size:13px; }.package-option p { font-size:12px; margin-top:5px; }.package-option small { font-size:10px; color:#777; display:block; margin-top:6px; }
.package-option > span { font-size:12px; margin-left:auto; text-align:right; flex:none; }
.result-main-cta { width:100%; min-height:50px; border-radius:10px; font-size:14px; padding-inline:16px; white-space:normal; text-align:center; }
.result-facts { display:flex; gap:10px; flex-wrap:wrap; justify-content:space-between; font-size:10px; color:#616161; }
.result-preview-note { font-size:11px; line-height:1.6; color:#626c72; }
.result-uncovered { padding:12px; background:var(--accent-surface); border-radius:10px; font-size:12px; }
.results-breakdown { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:50px; min-height:710px; padding:55px; border-radius:30px; overflow:hidden; color:white; background:linear-gradient(90deg,#27351ee8,#1b341585 80%),url('assets/images/ingredient-leaves-v1.webp') center 68%/cover; scroll-margin-top:100px; }
.result-eyebrow { display:inline-flex; border:1px solid #ffffff70; border-radius:25px; padding:5px 10px; font-size:10px; line-height:1.2; margin-bottom:18px; width:fit-content; }
.results-breakdown h2,.results-timeline h2,.results-comparison h2 { font-size:clamp(28px,3vw,38px); line-height:1.13; text-wrap:balance; }
.breakdown-copy > p { font-size:13px; max-width:390px; margin-top:13px; color:#e4e9de; }
.result-accordion { display:grid; gap:8px; margin-top:25px; }
.result-ingredient { border-radius:12px; background:#111c13dc; overflow:hidden; }
.result-ingredient summary { display:flex; align-items:center; gap:12px; padding:8px; cursor:pointer; min-height:66px; list-style:none; }
.result-ingredient summary::-webkit-details-marker { display:none; }
.result-ingredient summary > img { width:45px; height:45px; border-radius:7px; object-fit:cover; flex:none; }
.result-ingredient summary strong { font-size:14px; font-weight:600; line-height:1.3; }
.result-ingredient summary small { display:block; font-size:10px; font-weight:400; margin-top:3px; color:#ccc; }
.result-ingredient summary > span { margin-left:auto; white-space:nowrap; font-size:12px; }
.accordion-chevron { font-size:16px; font-weight:400; padding:0 6px; }
.result-ingredient[open] .accordion-chevron { transform:rotate(180deg); }
.result-ingredient-body { padding:12px 14px 15px; border-top:1px solid #ffffff20; font-size:12px; line-height:1.6; }
.result-ingredient-body p + p { margin-top:10px; }
.result-ingredient-body .evidence-limit { color:#b6c2b3; font-size:10px; }
.ingredient-detail-footer { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-top:12px; font-size:10px; }
.ingredient-detail-footer a { text-underline-offset:3px; }.ingredient-detail-footer button { background:none; border:0; color:var(--accent-light); padding:8px 0; min-height:36px; font-size:11px; }
.breakdown-copy > .link-btn { color:white; margin-top:14px; }
.breakdown-product { position:relative; display:flex; align-items:center; justify-content:center; min-width:0; }
.breakdown-product .personal-tub { width:min(380px,100%); transform:rotate(-12deg); }
.product-tag { position:absolute; background:#182619e6; border-radius:30px; padding:10px 14px; font-size:11px; box-shadow:0 5px 20px #0002; }
.tag-one { top:26%; left:2%; }.tag-two { top:63%; right:-10px; }.tag-three { bottom:18%; left:3%; }
.results-timeline { border-radius:30px; min-height:730px; padding:64px; margin-top:32px; color:white; background:linear-gradient(90deg,#10130ff2,#10130fa8 55%,#10130f33),url('assets/images/hero-training.webp') 65% center/cover; }
.timeline-copy { max-width:560px; }.timeline-copy h2 { max-width:500px; }
.timeline-copy ol { list-style:none; padding:0 0 0 28px; margin:55px 0 30px 10px; border-left:1px solid #ffffffa0; }
.timeline-copy li { position:relative; padding:0 0 45px 10px; }.timeline-copy li:last-child { padding-bottom:0; }
.timeline-copy li::before { content:''; width:9px; height:9px; border-radius:50%; background:var(--accent); position:absolute; top:8px; left:-33px; }
.timeline-copy li > div { display:flex; align-items:center; gap:14px; }
.timeline-copy li > div > span { padding:4px 12px; border-radius:30px; background:var(--accent); color:var(--accent-ink); font-size:11px; font-weight:600; white-space:nowrap; }
.timeline-copy h3 { font-size:20px; line-height:1.2; }.timeline-copy li p { font-size:13px; margin-top:15px; line-height:1.8; color:#d8d8d8; }
.timeline-note { font-size:10px; color:#bbb; }
.results-comparison { padding:65px 50px 40px; margin-top:32px; border-radius:30px; background:linear-gradient(180deg,#3786d6,#a5c8ed 70%,#f3f6fa); text-align:center; }
.results-comparison .result-eyebrow { color:white; }.results-comparison h2 { color:white; }.results-comparison > p { color:#e6effb; max-width:500px; margin:16px auto 35px; font-size:14px; }
.result-table-scroll { background:#222829; border-radius:24px; color:white; overflow-x:auto; padding:25px 28px; }
.result-table-scroll table { width:100%; border-collapse:collapse; text-align:left; font-size:13px; min-width:650px; }
.result-table-scroll th,.result-table-scroll td { padding:15px 12px; border-bottom:1px solid #ffffff23; font-weight:400; }
.result-table-scroll th:first-child { width:32%; }.result-table-scroll th:not(:first-child),.result-table-scroll td { text-align:center; }
.result-table-scroll thead th { font-size:10px; border-bottom:0; vertical-align:bottom; }
.result-table-scroll thead th img { height:68px; width:auto; max-width:85px; object-fit:contain; margin:0 auto 12px; }
.result-table-scroll thead th:last-child b { background:var(--accent); color:var(--accent-ink); border-radius:20px; font-size:10px; padding:4px 10px; white-space:nowrap; }
.multi-icon { width:36px; height:56px; background:linear-gradient(90deg,#9d5f1b,#e3ae56,#a57525); border-top:9px solid #eee; border-radius:4px 4px 7px 7px; display:grid; place-items:center; margin:0 auto 16px; color:white; font-size:19px; }
.result-table-scroll tbody tr:last-child > * { border-bottom:0; }.result-table-scroll td:last-child { font-weight:600; }
.results-comparison > small { color:#657480; display:block; margin:20px auto 0; font-size:10px; }
.results-end { display:flex; justify-content:center; gap:20px; margin:38px 0 0; align-items:center; flex-wrap:wrap; }
.formula-sticky { position:fixed; z-index:60; left:50%; bottom:16px; transform:translate(-50%,20px); width:min(920px,100% - 32px); display:flex; align-items:center; gap:15px; padding:10px 13px; background:#262a28f5; border:1px solid #ffffff20; border-radius:18px; color:white; box-shadow:0 10px 35px #0003; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s var(--ease); }
.formula-sticky.visible { opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); }.drawer-open .formula-sticky { opacity:0; visibility:hidden; pointer-events:none; }
.formula-sticky > img { width:36px; height:48px; object-fit:contain; }.formula-sticky > div { min-width:0; }.formula-sticky strong { font-size:13px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.formula-sticky small { font-size:10px; color:#c1c8c2; display:block; margin-top:3px; }.formula-sticky > span { margin-left:auto; font-size:12px; white-space:nowrap; }.formula-sticky .btn { min-height:44px; border-radius:10px; font-size:13px; padding-inline:23px; }
body[data-page='quiz']:has(.results-page) .footer { padding-bottom:120px; }
@media(min-width:1500px) { .product-scene { height:670px; }.product-scene .personal-tub { width:450px; } }
@media(max-width:1050px) { .results-hero { gap:26px; }.results-breakdown { padding:35px; gap:25px; }.result-offer h1 { font-size:33px; }.result-mini { padding:18px; min-height:220px; }.result-mini h2 { font-size:25px; }.personal-label > strong { font-size:15px; }.result-benefits small { display:none; }.package-option { flex-wrap:wrap; }.package-option > span { width:calc(100% - 57px); text-align:left; margin-left:57px; }.tag-two { right:0; }.results-timeline { padding:45px; } }
@media(max-width:760px) { .q-top { padding-block:19px; }.q-shell { padding-top:35px; }.q-card { gap:20px; }.q-card h1 { font-size:33px; }.q-intro-art { margin-top:0; }.q-options.q-two { grid-template-columns:1fr; }.q-option { min-height:59px; padding:15px 17px; }.q-sex-image { height:150px; }.q-sex .q-option { padding-bottom:14px; }.q-sex .q-option > span:not(.q-sex-image) { margin-inline:12px; }.q-sex .q-option:last-child { padding:15px 0; }.q-top .logo-mark { width:82px; }.q-field .text-input { font-size:18px; height:59px; }.q-fields { gap:12px; }.q-review .link-btn { font-size:12px; }
  .results-page { padding-top:104px; background:linear-gradient(180deg,#8ac9ee,#e4f0f8 1200px,#fafafa 1600px); }.results-hero { grid-template-columns:1fr; gap:28px; margin-bottom:28px; }.result-gallery { display:contents; }.product-scene { height:560px; order:0; border-radius:25px; }.result-offer { order:1; gap:17px; }.result-mini-grid { order:2; margin-top:0; }.product-scene .personal-tub { width:min(385px,89%); }.product-scene .personal-tub:not(.hand) { width:320px; max-width:78%; }.result-offer h1 { font-size:36px; }.result-intro { font-size:15px; }.result-status { font-size:10px; }.result-mini { min-height:245px; }.result-mini h2 { font-size:25px; }.result-benefits small { display:block; }.package-option { flex-wrap:nowrap; }.package-option > span { width:auto; margin-left:auto; text-align:right; }.package-option strong { font-size:12px; }.package-option img { width:36px; }.result-facts { font-size:10px; justify-content:flex-start; gap:12px; }
  .results-breakdown { grid-template-columns:1fr; padding:29px 22px 0; gap:20px; border-radius:25px; }.results-breakdown h2,.results-timeline h2,.results-comparison h2 { font-size:31px; }.breakdown-product { min-height:440px; }.breakdown-product .personal-tub { width:280px; max-width:100%; }.breakdown-product .personal-label { padding:8px; }.breakdown-product .personal-label > strong { font-size:12px; margin-bottom:4px; padding-bottom:4px; }.breakdown-product .personal-label > span { font-size:7px; margin-bottom:3px; }.breakdown-product .personal-label > div { font-size:8.5px; line-height:1.1; padding-block:1px; }.breakdown-product .personal-label small { font-size:7.5px; }.breakdown-product .personal-label em { font-size:7px; padding-top:2px; }.tag-one { top:24%; left:0; }.tag-two { top:64%; right:0; }.tag-three { bottom:13%; left:0; }.product-tag { font-size:10px; padding:8px 11px; }.result-ingredient summary strong { font-size:14px; }.result-ingredient summary > span { font-size:12px; }.result-ingredient summary small { font-size:10px; }.result-ingredient-body { font-size:13px; }.result-ingredient-body .evidence-limit { font-size:11px; }
  .results-timeline { margin-top:24px; padding:35px 25px; border-radius:25px; min-height:760px; background-position:62% center; background-image:linear-gradient(90deg,#10130fe8,#10130f9c),url('assets/images/hero-training.webp'); }.timeline-copy ol { margin-top:38px; padding-left:22px; }.timeline-copy li::before { left:-27px; }.timeline-copy li > div { gap:10px; align-items:flex-start; }.timeline-copy h3 { font-size:18px; padding-top:3px; }.timeline-copy li p { font-size:13px; }.results-comparison { padding:36px 18px 28px; border-radius:25px; margin-top:24px; }.results-comparison > p { font-size:13px; }.result-table-scroll { padding:14px; border-radius:16px; }.result-table-scroll table { font-size:12px; }.result-table-scroll td,.result-table-scroll th { padding:13px 10px; }.results-end .btn { width:100%; }
  .formula-sticky { width:calc(100% - 20px); left:10px; transform:translateY(20px); bottom:calc(10px + env(safe-area-inset-bottom)); padding:9px; gap:9px; border-radius:13px; }.formula-sticky.visible { transform:translateY(0); }.formula-sticky > img { width:29px; height:43px; }.formula-sticky > div { flex:1; }.formula-sticky strong { font-size:11px; max-width:150px; }.formula-sticky small { font-size:9px; }.formula-sticky > span { display:none; }.formula-sticky .btn { padding-inline:12px; font-size:11px; min-height:43px; white-space:normal; max-width:145px; text-align:center; }
}
@media(max-width:390px) { .q-card h1 { font-size:29px; }.q-sex { gap:9px; }.q-sex-image { height:130px; }.q-fields { grid-template-columns:1fr; }.product-scene { height:470px; }.result-offer h1 { font-size:31px; }.result-mini { min-height:220px; padding:15px; }.result-mini h2 { font-size:22px; }.result-mini .q-kicker { font-size:8px; }.scene-change,.scene-view { font-size:10px; padding-inline:10px; }.scene-change { left:12px; }.scene-view { right:12px; }.package-option { flex-wrap:wrap; }.package-option > span { margin-left:49px; width:calc(100% - 49px); text-align:left; }.result-benefits small { display:none; }.results-breakdown { padding-inline:16px; }.result-ingredient summary { gap:8px; }.result-ingredient summary strong { font-size:12px; }.result-ingredient summary > img { width:37px; height:42px; }.result-ingredient summary > span { font-size:11px; }.accordion-chevron { padding-inline:2px; }.personal-label > strong { font-size:14px; }.personal-label > div { font-size:9px; padding-block:1px; line-height:1.2; }.hand .personal-label > strong { font-size:11px; margin-bottom:3px; padding-bottom:3px; }.hand .personal-label > div { font-size:8px; }.hand .personal-label > span { font-size:7px; }.hand .personal-label small { font-size:7px; }.personal-label { padding-inline:9px; }.hand .personal-label { padding:6px 8px; }.formula-sticky strong { max-width:105px; }.formula-sticky .btn { max-width:130px; } }
@media(max-width:360px) { .hand .personal-label { padding:4px 7px; }.hand .personal-label > strong { font-size:10px; padding-bottom:2px; margin-bottom:2px; }.hand .personal-label > span { display:none; }.hand .personal-label > div { font-size:7px; line-height:1.1; padding-block:.5px; }.hand .personal-label small { font-size:6px; }.hand .personal-label em { font-size:6px; line-height:1.1; padding-top:1px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.q-card,.spinner { animation:none; }.q-option,.q-progress > span,.formula-sticky { transition:none; } }

/* Routine reconciliation and assessment, shared desktop/mobile layout. */
.assessment-card { border: 1px solid var(--line, #d9dedb); border-radius: 18px; padding: 22px; margin: 20px 0; min-width: 0; background: #fff; }
.assessment-card legend { padding: 0 8px; font-weight: 600; }
.assessment-card .q-field { display: block; margin-top: 18px; }
.assessment-card .text-input { width: 100%; box-sizing: border-box; }
.assessment-card p, .assessment-report p { overflow-wrap: anywhere; }
.assessment-report { text-align: left; padding: 26px; margin: 28px 0; background: #edf3e5; border-radius: 22px; }
.assessment-report h2 { margin-top: 0; }
.assessment-report h3 { margin: 24px 0 8px; font-size: 1.1rem; }
.assessment-report .assessment-card h3 { margin-top: 0; }
@media (max-width: 600px) { .assessment-card, .assessment-report { padding: 18px; } .assessment-card .q-two { grid-template-columns: 1fr; } }

.results-decisions { width: min(1104px, calc(100% - 40px)); margin: 24px auto; }
.results-decisions summary { cursor: pointer; font-weight: 600; }

.supplement-chips { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.supplement-chips button { border:1px solid #d8ded7; border-radius:999px; background:#edf3e5; color:#292929; padding:10px 14px; font:inherit; cursor:pointer; }
.supplement-shortcuts { display:flex; flex-wrap:wrap; gap:8px 18px; margin:20px 0; }
.supplement-shortcuts [aria-pressed="true"] { font-weight:600; text-decoration:underline; }
#existing-matches { margin-top:18px; }
#existing-matches .q-option { min-width:0; overflow-wrap:anywhere; }

/* Stable selections and consistent option icons. */
.q-card { animation:none; }
.q-option-label { display:flex; align-items:center; gap:12px; min-width:0; }
.q-emoji { display:grid; place-items:center; flex:0 0 28px; width:28px; font-size:24px; line-height:1; }
.q-choice-mark { display:flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0; line-height:0; box-sizing:border-box; }
.q-choice-mark svg { display:block; flex:none; }
.supplement-chips { min-height:48px; align-content:flex-start; }
.supplement-shortcuts { display:grid; grid-template-columns:1fr; gap:11px; }
.supplement-shortcuts [aria-pressed="true"] { font-weight:400; text-decoration:none; }


/* Owner-supplied RUWAY campaign photographs, 20 October 2026. */
.showcase-product { border-radius: 26px; background: #f6f6f6; }
.final-card > img { height: 470px; border-radius: 0; background: transparent; transform: none; object-fit: contain; object-position: center bottom; }
.tub-photo > img { display: block; width: 100%; height: auto; }
.tub-photo-caption { width: 100%; padding: 12px; border-radius: 12px; background: #fff; }
.tub-photo-caption .tub-meta { margin-top: 8px; }
.compare-tub .tub-photo-caption,.q-intro-art .tub-photo-caption { display: none; }
.personal-tub.hand > img { border-radius: 24px 24px 0 0; }
.result-gallery > .personal-label { position: static; width: 100%; height: auto; margin: 14px 0 0; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: #fff; color: var(--ink); gap: 5px; }
.result-gallery > .personal-label > strong { font-size: 17px; border-bottom-color: var(--line); }
.result-gallery > .personal-label > span { font-size: 11px; color: var(--ink-soft); }
.result-gallery > .personal-label > div { font-size: 12px; }
.result-gallery > .personal-label small,.result-gallery > .personal-label em { font-size: 11px; }
.testimonial-gym > img { top: 0; height: 100%; object-position: center 25%; }
.testimonial-trail > img { object-position: center 35%; }
.testimonial-daily > img { top: 0; height: 100%; object-position: center 35%; }

/* Keep portraits and packaging clear of the existing review captions. */
.testimonial-card { display: flex; flex-direction: column; min-height: 0; }
.testimonial-card > img { position: static; inset: auto; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; object-position: center; z-index: auto; }
.testimonial-card figcaption { flex: 1; margin: 0; border-radius: 0; }

.product-scene .scene-caption { z-index: 2; padding: 7px 10px; border-radius: 20px; background: #26343bcc; color: #fff; }

/* RUWAY product showcase: isolated product and editorial product details. */
.home .showcase { padding: 92px 0 68px; background: linear-gradient(165deg,#153f6c 0%,#174d80 45%,#286aa4 100%); }
.home .showcase .section-head { max-width: 940px; margin-bottom: 38px; gap: 28px; }
.home .showcase .section-head h2 { font-size: clamp(40px,4.8vw,68px); font-weight: 400; line-height: 1.07; letter-spacing: -.025em; text-wrap: balance; }
.home .showcase .section-head .btn { min-height: 48px; padding-inline: 30px; margin-top: 0; }
.home .showcase .showcase-stage { display: grid; grid-template-columns: minmax(150px,1fr) minmax(300px,440px) minmax(150px,1fr); gap: 48px; height: 700px; min-height: 0; margin: 0; align-items: start; }
.home .showcase .showcase-product { grid-column: 2; grid-row: 1; justify-self: center; align-self: end; width: 520px; max-width: none; height: 780px; object-fit: contain; object-position: center bottom; background: transparent; border-radius: 0; -webkit-mask-image: linear-gradient(#000 0%,#000 85%,transparent 100%); mask-image: linear-gradient(#000 0%,#000 85%,transparent 100%); }
.home .showcase .showcase-curve { inset: 0; width: 100%; height: 660px; pointer-events: none; }
.home .showcase .showcase-points { display: grid; grid-template-rows: auto auto; gap: 138px; padding-top: 155px; font-size: 22px; line-height: 1.3; font-weight: 400; }
.home .showcase .showcase-points:first-of-type { grid-column: 1; grid-row: 1; text-align: right; }
.home .showcase .showcase-points:last-of-type { grid-column: 3; grid-row: 1; text-align: left; }
.home .showcase .product-story { width: min(1060px,100%); margin: -32px auto 0; }
.home .showcase .routine-card { grid-template-columns: 1.15fr 1fr; align-items: stretch; border-radius: 22px; background: #092c45; }
.home .showcase .routine-copy { padding: 42px; }
.home .showcase .routine-copy h3 { font-size: 34px; line-height: 1.13; }
.home .showcase .routine-copy p { max-width: 390px; font-size: 16px; line-height: 1.55; margin: 20px 0 24px; }
.home .showcase .routine-list { font-size: 14px; gap: 15px; }
.home .showcase .routine-visual { position: relative; min-width: 0; min-height: 440px; overflow: hidden; }
.home .showcase .routine-visual img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: right center; transform: scale(1.18); transform-origin: right 60%; }
.home .showcase .routine-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#092c45 0%,transparent 18%); pointer-events: none; }
.home .showcase .feature-pair { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; margin-top: 20px; }
.home .showcase .feature-pair article { display: flex; flex-direction: column; align-items: stretch; text-align: left; padding: 36px 36px 26px; min-height: 560px; border-radius: 22px; background: #092c45; }
.home .showcase .feature-copy h3 { font-size: 36px; line-height: 1.08; font-weight: 400; }
.home .showcase .feature-copy p { margin-top: 16px; font-size: 15px; line-height: 1.5; color: #c3d3df; }
.home .showcase .powder-detail { width: calc(100% + 72px); max-width: none; height: 300px; margin: 28px -36px 24px; object-fit: cover; object-position: 46% center; }
.home .showcase .formula-card-cta { margin-top: auto; align-self: center; }


.home .showcase .formula-preview { margin: 32px 0 28px; }
.home .showcase .formula-preview-label { display: block; margin-bottom: 20px; color: #c3d3df; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.home .showcase .formula-preview table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.home .showcase .formula-preview thead th { color: #c3d3df; font-size: 11px; font-weight: 400; padding: 0 0 12px; }
.home .showcase .formula-preview th { text-align: left; font-size: 18px; font-weight: 400; }
.home .showcase .formula-preview td { text-align: right; font-size: 20px; white-space: nowrap; }
.home .showcase .formula-preview thead th:last-child { text-align: right; }
.home .showcase .formula-preview tbody th,.home .showcase .formula-preview tbody td { border-top: 1px solid #ffffff25; padding: 18px 0; }
.home .showcase .formula-preview th small { display: block; color: #b1c7d7; font-size: 11px; margin-top: 4px; }
.home .showcase .formula-preview > p { margin-top: 14px; color: #b1c7d7; font-size: 11px; line-height: 1.5; }
@media(max-width:1000px) {
  .home .showcase .showcase-stage { grid-template-columns: minmax(130px,1fr) 340px minmax(130px,1fr); gap: 22px; height: 620px; }
  .home .showcase .showcase-product { width: 420px; height: 630px; }
  .home .showcase .showcase-points { padding-top: 140px; gap: 125px; font-size: 18px; }
  .home .showcase .showcase-curve { height: 590px; }
  .home .showcase .routine-copy { padding: 32px; }
  .home .showcase .routine-visual img { transform: none; object-position: 88% center; }
  .home .showcase .routine-copy h3 { font-size: 30px; }
  .home .showcase .routine-list { font-size: 13px; }
  .home .showcase .feature-pair article { padding: 30px 26px 24px; }
  .home .showcase .feature-copy h3 { font-size: 32px; }
  .home .showcase .powder-detail { width: calc(100% + 52px); margin-inline: -26px; }
}
@media(max-width:700px) {
  .home .showcase { padding: 58px 0 42px; }
  .home .showcase .section-head { margin-bottom: 10px; gap: 24px; }
  .home .showcase .section-head h2 { font-size: clamp(35px,7vw,46px); }
  .home .showcase .section-head h2 br { display: none; }
  .home .showcase .showcase-stage { grid-template-columns: 1fr 1fr; height: auto; gap: 24px 28px; }
  .home .showcase .showcase-product { grid-column: 1 / -1; grid-row: 1; width: min(100%,360px); height: 540px; max-width: 100%; }
  .home .showcase .showcase-curve { display: none; }
  .home .showcase .showcase-points { grid-row: 2; gap: 22px; padding-top: 0; font-size: 16px; text-align: left; }
  .home .showcase .showcase-points:first-of-type { grid-column: 1; grid-row: 2; text-align: left; }
  .home .showcase .showcase-points:last-of-type { grid-column: 2; grid-row: 2; text-align: left; }
  .home .showcase .showcase-points span { padding-left: 14px; border-left: 2px solid var(--accent); }
  .home .showcase .product-story { margin-top: 36px; }
  .home .showcase .routine-card { grid-template-columns: 1fr; border-radius: 18px; }
  .home .showcase .routine-copy { padding: 30px 26px; }
  .home .showcase .routine-copy h3 { font-size: 32px; }
  .home .showcase .routine-copy p { font-size: 15px; }
  .home .showcase .routine-list { font-size: 13px; }
  .home .showcase .routine-visual { min-height: 330px; }
  .home .showcase .routine-visual img { transform: scale(1.06); transform-origin: right bottom; }
  .home .showcase .routine-visual::after { background: linear-gradient(180deg,#092c45 0%,transparent 24%); }
  .home .showcase .feature-pair { grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
  .home .showcase .feature-pair article { min-height: 0; border-radius: 18px; padding: 30px 26px 24px; }
  .home .showcase .feature-copy h3 { font-size: 33px; }
  .home .showcase .powder-detail { height: 280px; margin-top: 28px; }
  .home .showcase .formula-preview { margin: 28px 0; }
  .home .showcase .formula-preview th { font-size: 16px; }
  .home .showcase .formula-preview td { font-size: 18px; }
}


/* Ingredient card: campaign portrait over quiet catalogue rows. */
.home .showcase .feature-pair .ingredient-person { position: relative; isolation: isolate; min-height: 600px; padding: 30px 28px 24px; align-items: center; text-align: center; background: radial-gradient(ellipse at 100% 40%,#6c584f80,transparent 70%),#092c45; }
.home .showcase .ingredient-person > h3 { position: relative; z-index: 3; font-size: 34px; line-height: 1.08; font-weight: 600; }
.home .showcase .ingredient-backdrop { position: absolute; z-index: -1; left: 0; right: 0; top: 152px; overflow: hidden; display: grid; gap: 10px; pointer-events: none; }
.home .showcase .ingredient-backdrop > div { display: flex; width: max-content; gap: 8px; transform: translateX(-34px); }
.home .showcase .ingredient-backdrop > div:nth-child(even) { transform: translateX(-84px); }
.home .showcase .ingredient-backdrop span { padding: 6px 15px; border: 1px solid #ffffff26; border-radius: 999px; color: #fff; font-size: 14px; line-height: 1.35; white-space: nowrap; }
.home .showcase .ingredient-person-photo { position: absolute; z-index: 1; top: 110px; left: 50%; transform: translateX(-50%); width: auto; max-width: none; height: 570px; object-fit: contain; }
.home .showcase .person-card-cta { position: absolute; z-index: 4; bottom: 25px; left: 50%; transform: translateX(-50%); min-height: 44px; padding: 12px 26px; color: #202526; background: #fff; white-space: nowrap; box-shadow: 0 3px 15px #061c3540; }
.home .showcase .person-card-cta:hover { background: #edf3f7; }
@media(max-width:1000px) {
  .home .showcase .ingredient-person > h3 { font-size: 31px; }
  .home .showcase .ingredient-person-photo { height: 550px; }
}
@media(max-width:700px) {
  .home .showcase .feature-pair .ingredient-person { min-height: 540px; padding: 28px 20px 24px; }
  .home .showcase .ingredient-person > h3 { font-size: 32px; }
  .home .showcase .ingredient-backdrop { top: 138px; }
  .home .showcase .ingredient-backdrop span { font-size: 13px; }
  .home .showcase .ingredient-person-photo { height: 500px; top: 90px; }
  .home .showcase .person-card-cta { bottom: 24px; }
}

/* Result hero (reference layout): sky scene with product, label card and badges; offer column on the right. */
.rh { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 52px; align-items: start; }
.rh-scene { position: relative; height: clamp(560px, 52vw, 760px); border-radius: 36px; overflow: hidden; isolation: isolate; }
.rh-scene.sky { background: radial-gradient(ellipse at 18% 82%, #ffffffcc 0, transparent 34%), radial-gradient(ellipse at 88% 18%, #ffffff99 0, transparent 30%), linear-gradient(160deg, #0a74d1 0%, #3f97e2 48%, #a9d3f3 100%); }
.rh-scene.mint { background: radial-gradient(ellipse at 15% 80%, #ffffffcc, transparent 38%), linear-gradient(150deg, #2fb3b0, #9fe0da 62%, #eef9f5); }
.rh-product { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; transform: translateX(-60%); filter: drop-shadow(0 24px 30px #00000033); }
.rh-product.tub { height: 78%; bottom: 7%; }
.rh-label { position: absolute; left: 22px; bottom: 78px; z-index: 2; width: min(300px, 46%); padding: 16px 16px 12px; border-radius: 18px; color: #fff; background: linear-gradient(160deg, #0d6e72e6, #08777acc); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 18px 40px #00000030; }
.rh-label > strong { display: block; font-size: 22px; line-height: 1.15; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #ffffff66; overflow-wrap: anywhere; }
.rh-label > span { font-size: 12px; font-weight: 600; }
.rh-label ul { list-style: none; margin: 8px 0 0; padding: 10px; border-radius: 10px; background: #00000026; display: grid; gap: 7px; }
.rh-label li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; line-height: 1.25; }
.rh-label li b { flex: none; font-weight: 600; font-size: 11px; color: var(--ink); background: #fff; border-radius: 999px; padding: 2px 9px; }
.rh-label-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; font-size: 11px; line-height: 1; }
.rh-label-foot span { padding: 6px 10px; border-radius: 999px; background: #fff; color: var(--ink); }
.rh-label-foot span + span { background: var(--ink); color: #fff; }
.rh-badges { position: absolute; top: 34px; right: 18px; z-index: 2; list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.rh-badge { position: relative; width: 92px; height: 92px; border-radius: 50%; background: #fff; box-shadow: 0 6px 18px #00000026; color: var(--accent-ink); }
.rh-badge > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rh-badge text { font: 600 9px/1 PlexSans, system-ui, sans-serif; fill: var(--ink); }
.rh-badge > span { position: absolute; inset: 27px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-surface); color: var(--accent-text); border: 1.5px solid var(--accent-edge); }
.rh-offer { display: grid; gap: 18px; padding-top: 4px; }
.rh-meta { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink-soft); }
.rh-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.rh-sep { color: #c9c9c9; }
.rh-offer h1 { font-size: clamp(34px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; }
.rh-intro { font-size: 16px; line-height: 1.55; color: #3d3d3d; }
.rh-points { list-style: none; margin: 0; padding: 0; }
.rh-points li { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.45; }
.rh-points li:last-child { border-bottom: 0; }
.rh-check { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-edge); color: #fff; }
.rh-heading { margin-top: 6px; font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: .16em; text-transform: uppercase; }
.rh-flavours { display: flex; gap: 22px; }
.rh-flavour { display: grid; justify-items: center; gap: 8px; width: 96px; padding: 0; border: 0; background: none; font-size: 13px; text-align: center; color: var(--ink); cursor: pointer; }
.rh-flavour-img { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: linear-gradient(160deg, #0a74d1, #a9d3f3); }
.rh-flavour-img img { height: 74px; width: auto; }
.rh-flavour[aria-pressed='true'] .rh-flavour-img { outline: 3px solid var(--accent-edge); outline-offset: 3px; }
.rh-flavour.soon { color: var(--ink-soft); cursor: default; }
.rh-flavour.soon .rh-flavour-img { background: #fff; border: 1.5px dashed #c7c7c7; color: #9a9a9a; font-size: 26px; }
.rh-packs { display: grid; gap: 14px; }
.rh-pack { position: relative; display: grid; grid-template-columns: 92px 1fr auto; gap: 18px; align-items: center; width: 100%; padding: 16px 18px; border: 1.5px solid var(--line); border-radius: 18px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; }
.rh-pack-tag { position: absolute; top: -12px; right: 18px; padding: 5px 10px; border-radius: 7px; background: var(--accent-edge); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .03em; }
.rh-pack:has(.rh-pack-tag) { margin-top: 10px; }
.rh-pack[aria-checked='true'] { border-color: var(--accent-edge); box-shadow: 0 0 0 3px var(--accent-soft); }
.rh-pack-img { width: 92px; height: 92px; border-radius: 12px; display: flex; justify-content: center; align-items: flex-end; overflow: hidden; background: linear-gradient(160deg, #0a74d1, #a9d3f3); }
.rh-pack-img img { height: 82px; width: auto; margin: 0 -10px; }
.rh-pack-text { display: grid; gap: 4px; min-width: 0; }
.rh-pack-text strong { font-size: 17px; font-weight: 400; letter-spacing: .01em; }
.rh-pack-text small { font-size: 13px; color: var(--ink-soft); }
.rh-pack-feat { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.rh-pack-feat svg { color: var(--accent-text); }
.rh-price { align-self: center; font-size: 14px; font-weight: 600; white-space: nowrap; }
.rh-cta { width: 100%; min-height: 60px; border-radius: 14px; background: #2b2220; color: #fff; font-size: 17px; font-weight: 600; letter-spacing: .02em; }
.rh-cta:hover { background: #000; }
.rh-cta span { font-weight: 400; opacity: .65; }
.rh-offer > .link-btn { justify-self: center; }
.rh-trust { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--ink); }
.rh-trust span { display: flex; align-items: center; gap: 7px; }
.rh-trust svg { color: var(--accent-text); }
@media (max-width: 1050px) { .rh { gap: 30px; } .rh-badge { width: 76px; height: 76px; } .rh-badge > span { inset: 22px; } }
@media (max-width: 760px) {
  .rh { grid-template-columns: 1fr; gap: 26px; }
  .rh-scene { height: 540px; border-radius: 26px; }
  .rh-product { transform: translateX(-62%); }
  .rh-label { left: 12px; bottom: 70px; width: min(200px, 56%); padding: 10px 10px 8px; border-radius: 14px; }
  .rh-label > strong { font-size: 16px; padding-bottom: 6px; margin-bottom: 6px; }
  .rh-label > span { font-size: 11px; }
  .rh-label ul { gap: 4px; padding: 7px 8px; margin-top: 5px; }
  .rh-label li { font-size: 11px; }
  .rh-label li b { font-size: 10px; padding: 1px 7px; }
  .rh-label-foot { margin-top: 8px; font-size: 9px; }
  .rh-label-foot span { padding: 5px 8px; }
  .rh-badges { top: 14px; right: 10px; gap: 10px; }
  .rh-badge { width: 64px; height: 64px; }
  .rh-badge > span { inset: 18px; } .rh-badge > span svg { width: 16px; height: 16px; }
  .rh-badge text { font-size: 10.5px; }
  .rh-pack { grid-template-columns: 64px 1fr; gap: 12px; padding: 14px; }
  .rh-pack-img { width: 64px; height: 64px; } .rh-pack-img img { height: 58px; }
  .rh-price { grid-column: 2; }
  .rh-trust { justify-content: flex-start; }
}

/* Result hero: offer column sticks while the product scene and tiles scroll. */
.rh-offer { position: sticky; top: var(--rh-top, 104px); }
.rh-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.rh-tile { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 24px; color: #fff; isolation: isolate; }
.rh-tag { display: inline-block; padding: 5px 10px; border-radius: 7px; background: var(--accent-edge); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.rh-tile-ings { padding: 20px; background: linear-gradient(160deg, #0a5fb0, #2f8fe0 55%, #8cc6f0); }
.rh-tile-ings ul { list-style: none; margin: 16px 0 0; padding: 0; width: 66%; display: grid; gap: 0; }
.rh-tile-ings li { padding: 9px 0; border-bottom: 1px solid #ffffff40; }
.rh-tile-ings li:last-child { border-bottom: 0; }
.rh-tile-ings strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; }
.rh-tile-ings em { font-style: normal; font-weight: 400; opacity: .8; }
.rh-tile-ings small { display: block; margin-top: 2px; font-size: 11px; opacity: .78; }
.rh-tile-more { font-size: 12px; margin-top: 6px; opacity: .85; }
.rh-tile-tub { position: absolute; right: -26%; bottom: -6%; width: 60%; height: auto; z-index: -1; filter: drop-shadow(0 16px 24px #00000040); }
.rh-tile-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.rh-tile-photo::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #00000000 35%, #000000b8 100%); }
.rh-tile-copy { position: absolute; inset: auto 0 0; padding: 20px; display: grid; gap: 10px; justify-items: start; }
.rh-tile-big { font-size: clamp(20px, 2vw, 27px); line-height: 1.12; font-weight: 600; }
.rh-tile-copy > small { font-size: 13px; opacity: .85; }
.rh-tile-steps > img { object-position: 50% 30%; }
.rh-tile-steps::after { background: linear-gradient(180deg, #00000000 30%, #000000c4 100%); }
.rh-steps { list-style: none; margin: 4px 0 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rh-steps li { padding: 9px 8px; border-radius: 12px; background: #ffffff1f; border: 1px solid #ffffff38; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: grid; gap: 2px; text-align: center; }
.rh-steps b { justify-self: center; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-size: 11px; }
.rh-steps strong { font-size: 12px; } .rh-steps small { font-size: 10px; opacity: .8; }
.rh-tile-goals > img { object-position: 30% 50%; }
.rh-tile-goals::after { background: linear-gradient(180deg, #0b1f3a40 0%, #0b1f3ae6 55%); }
.rh-tile-goals .rh-tile-copy { inset: 0; align-content: start; }
.rh-tile-goals ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 14px; }
.rh-tile-goals li { padding-left: 14px; border-left: 2px solid var(--accent); }
.rh-tile-goals strong { display: block; font-size: 16px; line-height: 1.2; }
.rh-tile-goals small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.4; opacity: .85; }
@media (max-width: 1050px) { .rh-tile-ings ul { width: 72%; } .rh-tile-ings strong { font-size: 13px; } .rh-tile-goals small { font-size: 11px; } }
@media (max-width: 760px) {
  .rh-media { display: contents; }
  .rh-scene { order: 1; } .rh-offer { order: 2; position: static; } .rh-tiles { order: 3; margin-top: 0; }
  .rh-tiles { grid-template-columns: 1fr; }
  .rh-tile { aspect-ratio: auto; min-height: 380px; }
  .rh-tile-ings ul { width: 66%; }
}
.rh-meta { flex-wrap: wrap; color: var(--ink); }
.rh-meta b { font-weight: 600; }
.rh-stars { color: #f4682a; letter-spacing: 2px; font-size: 16px; }

/* Ingredient card sits below the tub (the tub ends at about 60% of the hand image), never over it. */
.rh-label { top: 62%; bottom: auto; left: 18px; right: auto; width: min(440px, calc(100% - 150px)); /* leaves the badge column free */ display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; overflow: hidden; }
.rh-label-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #ffffff55; }
.rh-label-head strong { font-size: 20px; line-height: 1.1; overflow-wrap: anywhere; }
.rh-label-head .rh-label-foot { margin: 0; flex: none; }
.rh-label ul { margin: 0; grid-template-columns: 1fr 1fr; gap: 7px 18px; align-content: start; }
@media (max-width: 760px) {
  .rh-label { top: 61%; bottom: auto; left: 12px; right: auto; width: calc(100% - 24px); padding: 10px 12px; gap: 8px; }
  .rh-label-head { padding-bottom: 8px; }
  .rh-label-head strong { font-size: 16px; }
  .rh-label ul { gap: 5px 12px; padding: 8px 10px; }
  .rh-label li { font-size: 11px; }
}
.result-ingredient-body h4 { margin: 14px 0 6px; font-size: 13px; font-weight: 600; color: var(--accent-light); }
.result-ingredient-body h4:first-child { margin-top: 2px; }
.result-sources { font-size: 11px; opacity: .85; }
.result-sources a { text-underline-offset: 3px; }

/* Quiz sliders for height and weight. */
.q-sliders { display: grid; gap: 22px; margin-top: 6px; }
.q-slider { padding: 18px 20px 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.q-slider-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; font-size: 14px; color: #606060; }
.q-slider-head output { font-size: 26px; font-weight: 600; color: var(--ink); }
.q-range { width: 100%; height: 32px; margin: 0; accent-color: var(--accent-edge); cursor: pointer; }
.q-range.unset { accent-color: #b9b9b9; }
.q-slider-scale { display: flex; justify-content: space-between; margin-top: 4px; font-size: 12px; color: #8a8a8a; }
.q-slider-head output.empty { font-size: 14px; font-weight: 400; color: #8a8a8a; }

/* Result comparison: ticks for "Dein Mix", dashes elsewhere. */
.compare-yes { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
.compare-no { color: #9a9a9a; font-size: 18px; }