@font-face{font-family:"Editorial New";src:url("../fonts/EditorialNew-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Editorial New";src:url("../fonts/EditorialNew-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Editorial New";src:url("../fonts/EditorialNew-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Editorial New";src:url("../fonts/PPEditorialNew-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root {
  /* ===== Studio Light palette ===== */
  --bg: #fbfaf8;
  --bg-2: #f2f0ec;
  --bg-glow: #f7f3ee;
  --surface: #ffffff;
  --surface-2: #f6f4f0;
  --ink: #1f1a16;
  --ink-soft: #3c352d;
  --muted: #5c5148;
  --accent: #c8611e;
  --accent-strong: #9a4413;
  --accent-text: #b4531f;
  --accent-ink: #ffffff;
  --line: rgba(31, 26, 22, 0.12);
  --line-2: rgba(31, 26, 22, 0.2);
  --card: #ffffff;
  --dark-surface-1: #2a2420;
  --dark-surface-2: #1b1712;
  --shadow-lg: 0 24px 60px rgba(31, 22, 15, 0.1);
  --shadow-sm: 0 14px 34px rgba(31, 22, 15, 0.06);
  --radius-sm: 20px;
  --radius-md: 28px;
  --radius-lg: 38px;
  --radius-xl: 46px;
  --shell: min(1200px, calc(100vw - 32px));
  --section-space: clamp(72px, 10vw, 132px);
  --font-display: "Editorial New", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --ease-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(120% 95% at 84% 4%, var(--bg-glow) 0%, rgba(247, 243, 238, 0) 46%),
    radial-gradient(95% 80% at -5% 0%, #f4f1ec 0%, rgba(244, 241, 236, 0) 42%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

body.nav-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

button,
input,
select,
a {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--ink);
  color: var(--bg);
}

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

.skip-link:focus {
  width: auto;
  height: auto;
  clip: auto;
  padding: 12px 18px;
  margin: 10px;
  background: var(--ink);
  color: var(--bg);
  z-index: 999;
  border-radius: 999px;
}

.shell {
  width: var(--shell);
  margin-inline: auto;
}

.section {
  padding: var(--section-space) 0;
}

/* Quiet kicker — hairline lead, no all-caps chip */
.eyebrow,
.section-label,
.product-kicker,
.shade-label {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 16px;
  font-size: 0.82rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--accent-text);
}

.eyebrow::before,
.section-label::before,
.product-kicker::before,
.shade-label::before {
  content: "";
  width: 22px;
  height: 1px;
  flex: none;
  background: currentColor;
  opacity: 0.55;
}

h1,
h2,
h3,
p,
ul {
  margin-top: 0;
}

h1,
h2 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 {
  margin-bottom: 24px;
  font-size: clamp(3.4rem, 6.6vw, 6rem);
}

h2 {
  margin-bottom: 24px;
  font-size: clamp(2.5rem, 4.8vw, 4.6rem);
}

h3 {
  margin-bottom: 14px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.1vw, 2.05rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p,
li {
  font-size: clamp(0.98rem, 1.05vw, 1.075rem);
  line-height: 1.7;
  color: var(--muted);
  text-wrap: pretty;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: none;
  cursor: pointer;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.button:hover,
.button:focus-visible,
.text-link:hover,
.text-link:focus-visible,
.nav-menu a:hover,
.nav-menu a:focus-visible {
  transform: translateY(-2px);
}

.button-primary {
  color: var(--accent-ink);
  background: var(--ink);
  border-color: var(--ink);
}

.button-primary:hover,
.button-primary:focus-visible {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.button-secondary {
  color: var(--ink);
  background: rgba(31, 26, 22, 0.04);
  border-color: var(--line-2);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  background: rgba(31, 26, 22, 0.1);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--accent-text);
}

.text-link::after {
  content: "";
  width: 42px;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.text-link:hover::after,
.text-link:focus-visible::after {
  transform: scaleX(1.38);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(18px);
  background: rgba(251, 250, 248, 0.8);
  border-bottom: 1px solid var(--line);
}

.announcement {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  min-height: 38px;
  padding: 10px 44px;
  font-size: 0.78rem;
  text-align: center;
  color: var(--bg);
  background: var(--ink);
}

.announcement-badge {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.announcement-text {
  font-weight: 500;
  opacity: 0.9;
}

.announcement-close {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--bg);
  opacity: 0.7;
  cursor: pointer;
  transition: opacity 160ms ease, background-color 160ms ease;
}

.announcement-close::before {
  content: "";
  position: absolute;
  inset: -9px;
}

.announcement-close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.14);
}

.announcement-close:focus-visible {
  opacity: 1;
  outline: 2px solid var(--bg);
  outline-offset: 2px;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 84px;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--muted);
}

.nav-menu a {
  transition: color 180ms ease, transform 180ms ease;
}

.nav-menu a:hover,
.nav-menu a:focus-visible {
  color: var(--ink);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: rgba(31, 26, 22, 0.08);
  color: var(--ink);
}

.nav-toggle {
  display: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: rgba(31, 26, 22, 0.05);
  position: relative;
}

.nav-toggle span:not(.sr-only) {
  position: absolute;
  left: 14px;
  right: 14px;
  height: 1.6px;
  background: var(--ink);
  transition: transform 160ms ease, opacity 160ms ease, top 160ms ease;
}

.nav-toggle span:nth-child(2) { top: 16px; }
.nav-toggle span:nth-child(3) { top: 23px; }
.nav-toggle span:nth-child(4) { top: 30px; }
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  top: 23px;
  transform: rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(4) {
  top: 23px;
  transform: rotate(-45deg);
}

.hero-copy {
  max-width: 670px;
}

.hero-lede {
  max-width: 560px;
  margin-bottom: 28px;
  font-size: clamp(1.08rem, 1.45vw, 1.32rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 30px;
}

.proof-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.proof-row span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(31, 26, 22, 0.05);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
}

.science-number,
.routine-time {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(200, 97, 30, 0.16);
  color: var(--accent-text);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}

.principles {
  padding: clamp(40px, 6vw, 76px) 0 0;
}

/* Ruled typographic row — deliberately NOT cards, to break the card rhythm */
.principle-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(22px, 3vw, 44px);
  row-gap: 0;
}

.principle-grid article {
  padding: 22px 0 26px;
  border-top: 1px solid var(--line-2);
}

.principle-grid strong {
  display: block;
  margin-bottom: 10px;
  font-size: 1.14rem;
  color: var(--ink);
  letter-spacing: -0.015em;
}

.principle-grid p {
  margin: 0;
  font-size: 0.95rem;
}

.belief-grid {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 30px;
  align-items: start;
}

.belief-grid p:last-child {
  max-width: 520px;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 42px;
}

.section-heading.narrow {
  max-width: 760px;
  text-align: center;
}

.section-heading.narrow,
.compact-heading {
  margin-inline: auto;
}

.compact-heading {
  margin-bottom: 32px;
  text-align: center;
}

.compact-heading .eyebrow {
  justify-content: center;
}

.product-stack {
  display: grid;
  gap: 34px;
}

.product-feature {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(26px, 4vw, 52px);
  align-items: center;
  padding: clamp(20px, 3vw, 28px);
  border-radius: var(--radius-xl);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.product-feature-reverse {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
}

.product-feature-reverse .product-copy {
  order: 2;
}

.product-copy {
  max-width: 480px;
}

.feature-list {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 0 0 22px;
  list-style: none;
}

.feature-list li {
  position: relative;
  padding-left: 20px;
  color: var(--ink-soft);
}

.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  transform: translateY(-50%);
}

.routine-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.routine-cards {
  display: grid;
  gap: 18px;
}

.routine-card {
  padding: 28px;
  border-radius: var(--radius-lg);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.routine-card h3 {
  margin-top: 16px;
  color: var(--ink);
}

.shades-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr);
  gap: clamp(28px, 4vw, 54px);
  align-items: center;
}

.shade-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 24px;
}

.shade-tab {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(31, 26, 22, 0.05);
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.shade-tab:hover,
.shade-tab:focus-visible,
.shade-tab.active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
  transform: translateY(-2px);
}

.shade-label {
  margin-bottom: 12px;
}

.shade-note {
  display: inline-flex;
  margin-top: 6px;
  color: var(--accent-text);
  font-size: 0.85rem;
  font-weight: 600;
}

.science-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.science-card {
  padding: 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.science-card h3 {
  margin-top: 18px;
  color: var(--ink);
}

.dark-card {
  background: linear-gradient(165deg, var(--dark-surface-1), var(--dark-surface-2));
  border-color: rgba(31, 26, 22, 0.5);
}

.dark-card h3 { color: #fbfaf8; }
.dark-card p { color: #cfc7bd; }

.dark-card .science-number {
  color: #efc79c;
  background: rgba(255, 255, 255, 0.12);
}

.waitlist-wrap {
  padding: clamp(32px, 5vw, 54px);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}

.button:focus-visible,
.nav-toggle:focus-visible,
.shade-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.site-footer {
  padding: 28px 0 42px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr;
  gap: 28px;
  align-items: end;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.footer-brand {
  margin-bottom: 14px;
}

.footer-links,
.footer-meta {
  display: grid;
  gap: 10px;
  color: var(--muted);
  font-size: 0.94rem;
}

.footer-links a {
  transition: color 180ms ease;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--ink);
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 620ms var(--ease-quint), transform 620ms var(--ease-quint);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1100px) {
.principle-grid,
.science-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

.product-feature,
.product-feature-reverse,
.routine-grid,
.shades-grid,
.belief-grid {
    grid-template-columns: 1fr;
  }

.belief-grid {
    gap: 20px;
  }

.product-feature-reverse .product-copy {
    order: initial;
  }

.hero-copy,
.product-copy {
    max-width: none;
  }
}

@media (max-width: 760px) {
:root {
    --shell: min(100vw - 24px, 1000px);
    --section-space: 76px;
  }

.announcement {
    font-size: 0.74rem;
    line-height: 1.35;
  }

.nav {
    min-height: 74px;
  }

.nav-toggle {
    display: inline-flex;
  }

.nav-menu {
    position: absolute;
    top: calc(100% + 1px);
    left: 12px;
    right: 12px;
    display: grid;
    gap: 8px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid var(--line);
    background: rgba(251, 250, 248, 0.98);
    box-shadow: var(--shadow-sm);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease;
  }

.nav-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

.nav-cta {
    justify-content: flex-start;
    background: rgba(31, 26, 22, 0.06);
  }

.principle-grid,
.science-grid,
.footer-grid {
    grid-template-columns: 1fr;
  }

.product-feature {
    padding: 18px;
    gap: 24px;
  }

.routine-card,
.science-card {
    padding: 22px;
  }

.principle-grid article {
    padding: 20px 0 22px;
  }

.button {
    min-height: 52px;
  }

p,
li {
    font-size: 0.98rem;
  }
}

@media (max-width: 520px) {
h1 {
    font-size: clamp(2.9rem, 14vw, 3.9rem);
    line-height: 1.02;
  }

h2 {
    font-size: clamp(2.1rem, 10.5vw, 3rem);
  }

.eyebrow,
.section-label,
.product-kicker,
.shade-label {
    font-size: 0.74rem;
  }

.proof-row span,
.button,
.shade-tab,
.text-link {
    font-size: 0.78rem;
  }
}

/* ===== uncaast merge additions ===== */
.nav-menu a.on {color:var(--ink);position:relative}
.nav-menu a.on::after {content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--accent);border-radius:2px}
.site-header.menu-open {backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg-2)}

.page-hero {padding:clamp(40px,6vw,72px) 0 0}
.page-hero .eyebrow {margin-bottom:14px}
.page-hero h1 {font-family:var(--font-display);font-weight:500;letter-spacing:-0.01em;line-height:1.02;font-size:clamp(2.5rem,5vw,4.4rem);color:var(--ink);max-width:20ch}

.faq-list {max-width:820px}
.faq-list details {border-bottom:1px solid var(--line);padding:22px 0}
.faq-list summary {cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;font-weight:600;font-size:1.05rem;color:var(--ink);border-radius:8px}
.faq-list summary::-webkit-details-marker {display:none}
.faq-list summary::after {content:"+";font-family:var(--font-display);font-size:1.6rem;color:var(--accent-text);line-height:1;transition:transform .3s ease}
.faq-list details[open] summary::after {transform:rotate(45deg)}
.faq-list details p {color:var(--muted);font-size:.98rem;margin:14px 0 0;max-width:64ch}
.faq-list summary:focus-visible {outline:2px solid var(--accent);outline-offset:4px}

.founding-form {display:grid;gap:6px;margin-top:10px}
.form-optional {margin-top:10px;padding-top:16px;border-top:1px dashed var(--line-2);display:grid;gap:6px}
.form-optional-heading {margin:0;font-size:.8rem;font-weight:600;letter-spacing:.01em;text-transform:none;color:var(--muted)}
.founding-form label {font-size:.82rem;font-weight:600;letter-spacing:.01em;text-transform:none;color:var(--accent-text);margin-top:14px}
.founding-form input,
.founding-form select {width:100%;min-height:54px;padding:0 18px;border-radius:16px;border:1px solid var(--line-2);background:rgba(31, 26, 22,.06);color:var(--ink);font-family:var(--font-body);font-size:.98rem}
.founding-form input::placeholder {color:rgba(92, 81, 72, 0.6)}
.founding-form input:focus-visible,
.founding-form select:focus-visible {outline:2px solid var(--accent);outline-offset:2px}
.founding-form .button {margin-top:22px;width:100%}
.fineprint {font-size:.76rem;color:var(--muted);margin-top:12px;text-align:center}
.fineprint a {color:var(--accent-text)}
.form-error {background:rgba(198,58,34,.08);border:1px solid rgba(198,58,34,.3);border-radius:14px;padding:14px 16px;font-size:.88rem;margin-top:14px;color:#9a2f18}
.form-success {display:none;text-align:center;padding:40px 12px}
.form-success h3 {font-size:1.6rem;color:var(--ink);margin:0 0 8px}
.form-success p {color:var(--muted);margin:0}
.founder-quote {margin-top:26px;padding:22px 24px;border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--line);font-style:italic;font-size:.98rem;line-height:1.6;color:var(--ink-soft);max-width:48ch}
.founder-quote b {font-style:normal;color:var(--accent-text)}

.mobile-cta {position:fixed;bottom:0;left:0;right:0;z-index:99;display:none;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(251,250,248,.94);backdrop-filter:blur(10px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .45s cubic-bezier(0.22,1,0.36,1)}
.mobile-cta.show {transform:none}
.mobile-cta .button {width:100%}
@media(max-width:760px){
.mobile-cta {display:block}
}

.spec-list {list-style:none;padding:0;margin:18px 0;display:grid;gap:10px}
.spec-list li {display:flex;gap:12px;align-items:baseline;font-size:.96rem;color:var(--ink-soft);border-bottom:1px solid var(--line);padding-bottom:10px}
.spec-list li b {font-weight:600;color:var(--ink);min-width:8.5rem}

@media (prefers-reduced-motion:reduce){
* {transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}

.reveal {opacity:1!important;transform:none!important}
}

/* ===== ratio & layout corrections ===== */

html,
body {overflow-x:clip}

@media (max-width:760px){
.announcement {white-space:normal;text-align:center;line-height:1.5;padding:8px 40px}

.announcement-close {right:6px;width:22px;height:22px}

.announcement-close::before {inset:-11px}
}

/* ===== FAQ centering ===== */
.faq-list {margin:0 auto}
#faq .section-heading {margin-left:auto;margin-right:auto;text-align:center}
.faq-list summary {justify-content:center;text-align:center;position:relative;padding-right:34px}
.faq-list summary::after {position:absolute;right:0;top:50%;transform:translateY(-50%)}
.faq-list details[open] summary::after {transform:translateY(-50%) rotate(45deg)}
.faq-list details p {text-align:center;margin-left:auto;margin-right:auto}

/* ===== brand: wordmark + sun symbol ===== */
.sunmark {width:24px;height:24px;flex:none}
.sunmark circle,
.sunmark line {stroke:currentColor;stroke-width:1.4;fill:none;stroke-linecap:round}
.brand {font-family:'Poppins',sans-serif;font-weight:400;font-size:1.3rem;letter-spacing:.01em;text-transform:lowercase}

/* ===== full-bleed hero ===== */
.hero-full {position:relative;min-height:min(92svh,880px);display:flex;align-items:center;overflow:hidden;padding:0}
.hero-bg {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;z-index:0;will-change:transform;transition:transform .1s linear}
.hero-full.parallax-on .hero-bg {transform:scale(1.06)}
/* light sweep passing over the products */
@media (prefers-reduced-motion:reduce){
.hero-full.parallax-on .hero-bg {transform:none}
}
.hero-full::before {content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(28,16,10,.78) 0%,rgba(30,18,11,.5) 36%,rgba(30,18,11,0) 66%)}
.hero-full::after {content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(28,16,10,.55) 0%,rgba(28,16,10,0) 32%)}
.hero-full-inner {position:relative;z-index:2;width:var(--shell);margin:0 auto;padding:110px 0 90px}
.hero-full .hero-copy {max-width:680px;color:#fbf5ec;will-change:transform,opacity}
.hero-full .eyebrow {color:#f0c79b}
.hero-full h1 {font-family:var(--font-display);font-weight:500;letter-spacing:-0.01em;line-height:1;font-size:clamp(3.2rem,6.6vw,5.8rem);color:#fbf5ec;margin:16px 0 22px}
.hero-full .hero-lede {color:rgba(251,245,236,.9);font-size:1.08rem;max-width:44ch}
.hero-full .proof-row span {border-color:rgba(244,234,220,.34);color:#fbf5ec;background:rgba(28,16,10,.3)}
.hero-full .button-secondary {background:rgba(244,234,220,.1);color:#fbf5ec;border-color:rgba(244,234,220,.45)}
.hero-full .button-secondary:hover {background:rgba(244,234,220,.2)}
@media(max-width:760px){
.hero-full {min-height:88svh;align-items:flex-end}

.hero-full::before {background:linear-gradient(180deg,rgba(20,11,7,.22) 0%,rgba(18,10,6,.72) 44%,rgba(16,9,5,.94) 100%)}

.hero-full::after {background:linear-gradient(0deg,rgba(16,9,5,.4) 0%,rgba(16,9,5,0) 55%)}

.hero-bg {object-position:82% center}

.hero-full-inner {padding:120px 0 56px}

.hero-full .eyebrow,
.hero-full h1,
.hero-full .hero-lede,
.hero-full .proof-row span {text-shadow:0 2px 16px rgba(10,6,4,.55)}

.hero-full .button-secondary {background:rgba(16,9,5,.4)}
}

/* ===== single-image product cards (home) ===== */
.product-media-single {overflow:hidden;border-radius:var(--radius-md);border:1px solid var(--line);box-shadow:var(--shadow-lg);aspect-ratio:4/3;background:var(--surface-2)}
.product-media-single img {width:100%;height:100%;object-fit:cover}

/* ===== carousel (product pages) ===== */
.carousel {position:relative;overflow:hidden;border-radius:var(--radius-md);aspect-ratio:4/3;background:var(--surface)}
.carousel .track {display:flex;height:100%;transition:transform .6s cubic-bezier(0.22,1,0.36,1)}
.carousel figure {flex:0 0 100%;margin:0;height:100%}
.carousel img {width:100%;height:100%;object-fit:cover;display:block}
.carousel .c-arrow {position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border-radius:999px;border:none;cursor:pointer;background:rgba(255,255,255,.88);color:var(--ink);font-size:1.1rem;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);backdrop-filter:blur(6px);transition:background .25s}
.carousel .c-arrow:hover {background:var(--accent);color:var(--accent-ink)}
.carousel .c-prev {left:14px}
.carousel .c-next {right:14px}
.carousel .c-dots {position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:2;display:flex;gap:8px}
.carousel .c-dots button {width:9px;height:9px;border-radius:999px;border:none;cursor:pointer;background:rgba(244,234,220,.4);padding:0;transition:width .3s,background .3s}
.carousel .c-dots button[aria-current="true"] {background:var(--accent);width:22px}
.carousel .c-arrow:focus-visible,
.carousel .c-dots button:focus-visible {outline:2px solid var(--accent);outline-offset:2px}

/* ===== alignment + sizing tweaks ===== */
.waitlist-wrap h2 {font-size:clamp(1.6rem,2.4vw,2.2rem)}
strong {font-weight:600;color:var(--ink)}

.launch-lead {margin-bottom:clamp(34px,5vw,60px)}

/* ===== stacked shade arches ===== */
.shade-stage {background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:clamp(28px,4vw,48px);display:grid;grid-template-columns:minmax(150px,1.3fr) minmax(0,1fr);gap:clamp(22px,3vw,40px);align-items:center}
.shade-patch-wrap {position:relative;height:300px;overflow-x:hidden}
.shade-arch {position:absolute;bottom:0;width:150px;aspect-ratio:3/4.1;border-radius:999px 999px 18px 18px;transition:opacity .45s cubic-bezier(0.22,1,0.36,1),transform .45s cubic-bezier(0.22,1,0.36,1),box-shadow .45s ease;opacity:.32;transform:scale(.94)}
.shade-arch[data-shade-arch="0"] {left:0%;background:#D2A579;z-index:1}
.shade-arch[data-shade-arch="1"] {left:16%;background:#B07E4E;z-index:2}
.shade-arch[data-shade-arch="2"] {left:32%;background:#7E5230;z-index:3}
.shade-arch.active {opacity:1;transform:scale(1.06) translateY(-6px);z-index:4;box-shadow:0 20px 44px rgba(0,0,0,.45)}
.shade-stage .shade-label {margin-bottom:10px}
.shade-stage h3 {font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.15;margin:0 0 12px;color:var(--ink)}
.shade-stage p {color:var(--muted);font-size:.98rem;margin:0 0 16px}
.shade-stage .shade-note {display:inline-block;border:1px solid var(--line-2);border-radius:999px;padding:9px 16px;font-size:.84rem;color:var(--accent-text);background:rgba(31, 26, 22,.05)}
@media(max-width:760px){
.shade-stage {grid-template-columns:1fr}

.shade-patch-wrap {height:250px}
}

/* ===== testing footnote + cinematic band (why page) ===== */
.testing-note {text-align:center;max-width:70ch;margin:clamp(32px,5vw,52px) auto 0;color:var(--muted);font-size:.88rem}

/* ===== sunscreen science grid: 2 per row ===== */
.science-grid.two-col {grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:700px){
.science-grid.two-col {grid-template-columns:1fr}
}

/* ===== carousel: portrait slides shown uncropped on soft backdrop ===== */
.carousel figure.contain {background:var(--surface)}
.carousel figure.contain img {object-fit:contain;padding:0}

/* ===== framed editorial band ===== */
.band-framed {background:none;padding:clamp(24px,4vw,56px) 0}
.band-framed figure {width:min(980px,calc(100vw - 48px));margin:0 auto;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.band-framed img {display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center 25%}
@media(max-width:760px){
.band-framed img {aspect-ratio:auto;object-fit:contain}
}

/* ===== motion: hero choreography, staggered reveals, micro-interactions ===== */

/* Hero copy is visible by default. Under motion-OK, it plays a one-time
   first-load choreography (not scroll/JS-gated, so it never ships blank). */
@media (prefers-reduced-motion: no-preference) {
.hero-full .hero-copy > * {
    animation: heroRise 760ms var(--ease-expo) both;
  }

.hero-full .eyebrow { animation-delay: 90ms; }

.hero-full h1 { animation-delay: 170ms; }

.hero-full .hero-lede { animation-delay: 300ms; }

.hero-full .hero-actions { animation-delay: 400ms; }

.hero-full .proof-row { animation-delay: 500ms; }
}
@keyframes heroRise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

/* Staggered entrances for sibling groups (a list rhythm, not a uniform reflex) */
.routine-cards .routine-card.reveal:nth-child(2) { transition-delay: 90ms; }
.faq-list details.reveal:nth-of-type(2) { transition-delay: 80ms; }
.faq-list details.reveal:nth-of-type(3) { transition-delay: 160ms; }
.faq-list details.reveal:nth-of-type(4) { transition-delay: 240ms; }
.science-grid .science-card.reveal:nth-child(2) { transition-delay: 80ms; }
.science-grid .science-card.reveal:nth-child(3) { transition-delay: 160ms; }
.science-grid .science-card.reveal:nth-child(4) { transition-delay: 240ms; }
.science-grid .science-card.reveal:nth-child(5) { transition-delay: 320ms; }
.science-grid .science-card.reveal:nth-child(6) { transition-delay: 400ms; }
.principle-grid article.reveal:nth-child(2) { transition-delay: 80ms; }
.principle-grid article.reveal:nth-child(3) { transition-delay: 160ms; }
.principle-grid article.reveal:nth-child(4) { transition-delay: 240ms; }

/* Product imagery settles into place instead of sharing the copy's rise */
.product-media-single img { transition: transform 780ms var(--ease-quint); }
.product-feature.reveal:not(.is-visible) .product-media-single img { transform: scale(1.08); }

/* Micro-interactions */
.routine-card,
.science-card {
  transition: transform 450ms var(--ease-quint), border-color 450ms ease, box-shadow 450ms ease;
}
.routine-card:hover,
.science-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-2);
  box-shadow: var(--shadow-lg);
}

.principle-grid article { transition: border-color 400ms ease; }
.principle-grid article:hover { border-color: var(--accent); }
.principle-grid article strong { transition: color 300ms ease; }
.principle-grid article:hover strong { color: var(--accent-text); }

.product-media-single { overflow: hidden; }
.product-feature.is-visible:hover .product-media-single img { transform: scale(1.04); }

.button:active { transform: translateY(0) scale(0.985); }

@media (prefers-reduced-motion: reduce) {
.hero-full .hero-copy > * { animation: none !important; }

.product-media-single img { transform: none !important; }
}

/* ===== gentle parallax on product imagery ===== */
.parallax {will-change:transform}
@media (prefers-reduced-motion:reduce){
.parallax {transform:none!important}
}

/* ===== refuse / brand manifesto (dark) ===== */
.refuse {
  background:
    radial-gradient(circle at 12% 10%, rgba(202,125,76,.28), transparent 32rem),
    linear-gradient(180deg, #24140f, #321d14);
  color:#f4ece1;
  border-block:1px solid rgba(255,255,255,.08);
}
.refuse .eyebrow,
.refuse h2,
.refuse p {color:#f4ece1}
.refuse .eyebrow {color:#ead4ad}
.refuse-grid {display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,68px);align-items:start}
.refuse-copy {position:sticky;top:150px}
.refuse-copy p {max-width:520px;color:rgba(244,236,225,.74)}
.refuse-list {display:grid;gap:16px}
.refuse-item {
  position:relative;display:grid;grid-template-columns:62px 1fr;gap:18px;align-items:start;
  padding:clamp(22px,3vw,32px);min-height:138px;
  border:1px solid rgba(255,255,255,.13);border-radius:var(--radius-lg);
  background:rgba(255,255,255,.055);overflow:hidden;
}
.refuse-item::after {
  content:attr(data-index);position:absolute;right:18px;bottom:-34px;
  font-family:var(--font-display);font-size:clamp(5rem,12vw,10rem);line-height:1;
  color:rgba(255,255,255,.035);pointer-events:none;
}
.refuse-item span {
  display:grid;place-items:center;width:48px;height:48px;
  border:1px solid rgba(255,255,255,.22);border-radius:50%;
  color:#ead4ad;font-size:.82rem;font-weight:740;letter-spacing:.08em;
}
.refuse-item p {margin:0;max-width:540px;color:rgba(244,236,225,.82);font-size:clamp(1.06rem,1.4vw,1.24rem)}
@media (max-width:900px){
.refuse-grid {grid-template-columns:1fr}

.refuse-copy {position:static}
}
@media (max-width:640px){
.refuse-item {grid-template-columns:1fr;gap:14px}

.refuse-item span {width:44px;height:44px}
}

/* ===== stacked page-hero headings ===== */
.page-hero h1 .h1-sub {
  display:block;font-family:var(--font-display);font-weight:400;
  font-size:.44em;line-height:1.18;letter-spacing:-0.01em;
  color:var(--muted);margin-top:.18em;
}
.page-hero h1 .h1-sub + .h1-sub {margin-top:.04em}

/* image parallaxes inside its static frame */
.band-framed figure {overflow:hidden}
.band-framed img.parallax {will-change:transform}
@media(max-width:900px){
.band-framed img.parallax {transform:none!important}
}

/* ===== Editorial New weight scale ===== */
.hero-full h1,
.page-hero h1 {font-weight:300;letter-spacing:-0.025em}
.section-heading h2,
.belief-grid h2,
.refuse-copy h2,
.waitlist-wrap h2,
.shades-copy h2,
.routine-copy h2 {font-weight:400}


/* italic emphasis — one word per headline, the word carrying the argument */
h1 em,
h2 em {font-style:italic;font-weight:400;letter-spacing:-0.01em}
.hero-full h1 em {color:inherit}


/* semantic h2 that keeps the card-heading scale */
.product-copy h2.product-title{
  margin-bottom:14px;font-family:var(--font-body);font-weight:600;
  font-size:clamp(1.5rem,2.1vw,2.05rem);line-height:1.12;letter-spacing:-0.015em;
  color:var(--ink);
}