/* Why: define a restrained premium palette that matches the generated Nuance visual direction. */
:root {
  --ink: #171411;
  --muted: #71665f;
  --paper: #fffdfb;
  --cream: #f8f1eb;
  --cream-2: #f2e6dc;
  --peach: #dba184;
  --copper: #ae6548;
  --line: rgba(52, 38, 28, 0.12);
  --shadow: 0 28px 80px rgba(67, 43, 29, 0.12);
  --radius-xl: 36px;
  --radius-lg: 26px;
  --radius-md: 18px;
  --shell: 1220px;
  --serif: "Iowan Old Style", "Baskerville", "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Why: make sizing predictable across responsive components. */
*, *::before, *::after { box-sizing: border-box; }

/* Why: enable smooth in-page navigation while respecting reduced-motion later. */
html { scroll-behavior: smooth; }

/* Why: establish the primary typography, contrast, and background. */
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Why: prevent media from overflowing responsive containers. */
img, svg { display: block; max-width: 100%; }

/* Why: keep links inheriting brand color unless styled as buttons. */
a { color: inherit; text-decoration: none; }

/* Why: constrain content width while preserving mobile padding. */
.shell { width: min(calc(100% - 40px), var(--shell)); margin-inline: auto; }

/* Why: support narrower editorial text blocks. */
.narrow { max-width: 860px; }
.center { text-align: center; }

/* Why: hide accessibility-only labels visually while keeping them readable to assistive technology. */
.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;
}

/* Why: make keyboard navigation immediately accessible. */
.skip-link {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 1000;
  transform: translateY(-140%);
  background: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.skip-link:focus { transform: translateY(0); }

/* Why: keep navigation available without dominating the premium visual layout. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 253, 251, 0.9);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(52, 38, 28, 0.07);
}
.header-inner { min-height: 76px; display: flex; align-items: center; gap: 30px; }
/* Why: size the official icon + wordmark as one compact header lockup without changing the navigation geometry. */
.brand-lockup { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; min-width: 0; }
/* Why: keep the official app icon crisp but compact in the sticky navigation. */
.brand-icon { width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto; }
/* Why: render the official Nuance Beauty wordmark at readable size while preserving its original proportions. */
.brand-wordmark { width: 120px; height: auto; display: block; }
.primary-nav { display: flex; align-items: center; gap: 28px; color: #4f4640; font-size: 14px; }
.primary-nav a:hover { color: var(--copper); }
.nav-toggle { display: none; background: transparent; border: 0; padding: 10px; cursor: pointer; }
.nav-toggle span:not(.sr-only) { display: block; width: 24px; height: 1.5px; background: var(--ink); margin: 6px 0; }

/* Why: standardize conversion buttons and touch targets. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 650;
  font-size: 14px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.button:hover { transform: translateY(-1px); }
.button-dark { color: #fff; background: #151310; box-shadow: 0 12px 30px rgba(20, 16, 13, .18); }
.button-light { background: #fff; border: 1px solid var(--line); }
.header-cta { min-height: 44px; padding-inline: 18px; }

/* Why: create a strong editorial hero that prioritizes value and representation. */
.hero {
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 8%, rgba(221, 173, 145, .28), transparent 29%),
    linear-gradient(180deg, #fffaf6 0%, #fffdfb 100%);
}
.hero-grid { min-height: 730px; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 64px; padding-block: 70px 64px; }
.eyebrow { margin: 0 0 16px; font-size: 12px; font-weight: 750; letter-spacing: .16em; color: var(--copper); }
h1, h2, h3 { margin-top: 0; }
h1 { margin-bottom: 24px; font-family: var(--serif); font-weight: 500; font-size: clamp(56px, 6.4vw, 92px); line-height: .93; letter-spacing: -.045em; }
h1 em { color: var(--copper); font-weight: 400; }
h2 { margin-bottom: 20px; font-family: var(--serif); font-weight: 500; font-size: clamp(39px, 4vw, 64px); line-height: 1.02; letter-spacing: -.035em; }
.hero-lede, .section-lede, .feature-copy > p, .product-story-copy > p, .daily-copy > p, .blueprint-copy > p { color: var(--muted); font-size: 18px; line-height: 1.7; }
.hero-lede { max-width: 650px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-status { display: flex; align-items: center; gap: 8px; margin-top: 24px; color: var(--muted); font-size: 13px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #5d8a60; box-shadow: 0 0 0 5px rgba(93, 138, 96, .12); }
.status-separator { color: #b9aca4; }
.hero-visual { position: relative; min-height: 600px; display: flex; align-items: center; justify-content: center; }
.hero-image-frame { width: min(100%, 620px); overflow: hidden; border-radius: 42px; box-shadow: var(--shadow); background: var(--cream); }
.hero-image-frame img { width: 100%; height: auto; }
.floating-card { position: absolute; display: grid; gap: 3px; padding: 15px 18px; border-radius: 18px; background: rgba(255, 255, 255, .94); border: 1px solid rgba(81, 55, 38, .1); box-shadow: 0 20px 50px rgba(62, 40, 28, .14); backdrop-filter: blur(16px); }
.floating-card-top { top: 9%; right: -2%; }
.floating-card-bottom { left: -4%; bottom: 9%; grid-template-columns: auto 1fr; align-items: center; max-width: 255px; }
.floating-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.spark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--cream-2); color: var(--copper); }

/* Why: surface concrete outcomes in a fast-scanning visual strip. */
.value-strip { border-block: 1px solid var(--line); background: #fff; }
.value-grid { display: grid; grid-template-columns: repeat(6, 1fr); }
.value-item { min-height: 112px; display: flex; align-items: center; gap: 12px; padding: 20px 18px; border-right: 1px solid var(--line); }
.value-item:last-child { border-right: 0; }
.value-icon { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--cream); color: var(--copper); font-size: 17px; }
.value-item span:last-child { display: grid; gap: 2px; }
.value-item strong { font-size: 13px; }
.value-item small { color: var(--muted); font-size: 11px; line-height: 1.35; }

/* Why: create predictable vertical rhythm between substantive product sections. */
.section, .feature-section, .daily-section, .blueprint-section, .inclusive-section, .final-cta { padding-block: 110px; }
.section-intro { padding-bottom: 62px; }
.section-lede { margin-inline: auto; max-width: 760px; }

/* Why: support reusable alternating image-and-copy feature storytelling. */
.split-grid { display: grid; grid-template-columns: .8fr 1fr; align-items: center; gap: 90px; }
.split-reverse { grid-template-columns: 1fr .8fr; }
.feature-soft { background: var(--cream); }
.portrait-media { width: min(100%, 520px); margin-inline: auto; overflow: hidden; border-radius: var(--radius-xl); box-shadow: var(--shadow); background: #fff; }
.feature-media img { width: 100%; height: auto; }
.feature-copy { max-width: 560px; }
.check-list { list-style: none; display: grid; gap: 14px; margin: 30px 0 0; padding: 0; }
.check-list li { position: relative; padding-left: 34px; font-weight: 600; }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--cream-2); color: var(--copper); font-size: 12px; }

/* Why: make matching-color guidance tangible without relying on another heavy image. */
.combo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 30px; }
.combo-card { display: grid; grid-template-columns: 34px 16px 34px 1fr; align-items: center; gap: 8px; min-height: 70px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); }
.combo-card strong { font-size: 12px; }
.swatch { width: 34px; height: 34px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.plus { color: #9d8c81; text-align: center; }
.olive { background: #73714a; }.cream { background: #eadcc8; }.rust { background: #9f4e32; }.navy { background: #27374a; }.terracotta { background: #b76143; }.sand { background: #d7b88e; }.forest { background: #3d5b4c; }.gold { background: #b88a42; }

/* Why: combine product guidance and virtual try-on in one high-intent section. */
.product-story-grid { display: grid; grid-template-columns: .9fr .8fr; gap: 90px; align-items: center; }
.product-story-copy { max-width: 580px; }
.mini-result-card { margin-top: 30px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--cream); }
.mini-result-card > div:first-child { display: grid; gap: 2px; }
.mini-label { color: var(--muted); font-size: 12px; }
.shade-row { display: flex; gap: 8px; margin-top: 18px; }
.shade-row span { width: 54px; height: 54px; border-radius: 15px; background: var(--shade); border: 3px solid transparent; }
.shade-row .selected { outline: 2px solid var(--copper); outline-offset: 3px; }
.makeup-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.makeup-picks > div { display: grid; gap: 3px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.makeup-dot { width: 34px; height: 34px; margin-bottom: 8px; border-radius: 50%; background: var(--shade); }
.makeup-picks small { color: var(--muted); }
.tryon-card { width: min(100%, 520px); margin-inline: auto; overflow: hidden; border-radius: var(--radius-xl); box-shadow: var(--shadow); }
.tryon-card img { width: 100%; }

/* Why: give Daily Natural Glow its own visual system to communicate retention and progress. */
.daily-section { background: #171411; color: #fff; overflow: hidden; }
.daily-grid { display: grid; grid-template-columns: 1.05fr .85fr; align-items: center; gap: 90px; }
.daily-copy .eyebrow { color: #e0a88f; }
.daily-copy h2 { color: #fff; }
.daily-copy > p { color: #c6bbb5; }
.daily-dashboard { position: relative; padding: 26px; border-radius: 34px; background: #f8f1eb; color: var(--ink); box-shadow: 0 35px 90px rgba(0, 0, 0, .38); }
.dashboard-topline { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.dashboard-kicker { color: var(--copper); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.dashboard-topline h3 { margin: 5px 0 0; font-family: var(--serif); font-size: 38px; font-weight: 500; }
.streak-badge { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 10px 14px; border-radius: 18px; background: #fff; }
.streak-badge span { grid-row: 1 / span 2; font-size: 23px; }
.streak-badge strong { line-height: 1; font-size: 24px; }
.streak-badge small { color: var(--muted); font-size: 10px; }
.progress-card, .today-card { margin-top: 18px; padding: 20px; background: #fff; border-radius: 22px; }
.progress-heading, .today-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.progress-heading span, .today-heading span { color: var(--muted); font-size: 12px; }
.progress-chart { width: 100%; margin-top: 12px; }
.chart-grid { fill: none; stroke: #eee5df; stroke-width: 1; }
.chart-area { fill: url(#chartFill); }
.chart-line { fill: none; stroke: #b96f50; stroke-width: 4; stroke-linecap: round; }
.chart-point { fill: #b96f50; stroke: #fff; stroke-width: 4; }
.chart-days { display: grid; grid-template-columns: repeat(7, 1fr); color: #9e9188; font-size: 10px; text-align: center; }
.routine-row { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid #eee6e0; }
.routine-row:first-of-type { margin-top: 10px; }
.routine-row > span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #f0e7e1; color: #8e7e74; font-size: 11px; font-weight: 700; }
.routine-row.done > span { background: #dfeadc; color: #4e7751; }
.routine-row div { display: grid; }
.routine-row small { color: var(--muted); }
.metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 30px; }
.metric-grid > div { display: grid; gap: 4px; padding: 20px; border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius-md); background: rgba(255, 255, 255, .04); }
.metric-grid span { color: #b7aaa3; font-size: 12px; }

/* Why: give Shade Discovery a premium launch surface that feels exclusive without pretending the feature is already public. */
.shade-section { position: relative; overflow: hidden; background: radial-gradient(circle at 82% 22%, rgba(245, 194, 217, .58), transparent 28%), linear-gradient(135deg, #fff9f6 0%, #fff1f4 52%, #f8eadf 100%); }
/* Why: balance conversion copy with a result-first visual on larger screens. */
.shade-grid { display: grid; grid-template-columns: 1.02fr .78fr; align-items: center; gap: 90px; }
/* Why: keep the signup narrative readable at desktop width without creating overly long lines. */
.shade-copy { max-width: 690px; }
/* Why: visually distinguish the upcoming-feature promise while staying inside the existing headline system. */
.shade-copy h2 em { color: #a85e73; }
/* Why: make supporting copy quieter than the early-access headline while preserving strong readability. */
.shade-copy > p:not(.eyebrow):not(.shade-note) { max-width: 650px; color: var(--muted); font-size: 18px; }
/* Why: explain the three-value sequence in compact cards that scan quickly before the signup form. */
.shade-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
/* Why: separate each benefit without using a heavy box treatment that would compete with the signup CTA. */
.shade-benefits > div { display: grid; gap: 5px; min-height: 132px; padding: 18px; border: 1px solid rgba(123, 82, 73, .12); border-radius: 20px; background: rgba(255, 255, 255, .72); backdrop-filter: blur(8px); }
/* Why: use a small numbered cue to make the Try → Verdict → Refine sequence instantly understandable. */
.shade-benefits span { color: #b16b7f; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
/* Why: keep benefit titles strong enough to scan at mobile speed. */
.shade-benefits strong { font-size: 15px; }
/* Why: keep explanation text subordinate to the benefit title. */
.shade-benefits small { color: var(--muted); line-height: 1.45; }
/* Why: place the email field and primary signup action on one row when space allows. */
.shade-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-top: 28px; }
/* Why: make the email field feel like a first-class conversion control rather than a generic browser input. */
.shade-form input { min-height: 52px; width: 100%; padding: 0 16px; border: 1px solid rgba(77, 52, 47, .18); border-radius: 999px; background: rgba(255, 255, 255, .9); color: var(--ink); font: inherit; box-shadow: 0 12px 30px rgba(91, 55, 47, .06); }
/* Why: keep placeholder text readable but visually subordinate to entered email text. */
.shade-form input::placeholder { color: #9f8c83; }
/* Why: give keyboard users a clear focus indication consistent with the blush launch treatment. */
.shade-form input:focus { outline: 2px solid #e2a8bb; outline-offset: 2px; border-color: transparent; }
/* Why: prevent the form CTA from shrinking below a comfortable tap target. */
.shade-form .button { min-width: 170px; }
/* Why: set a transparent expectation directly below the signup form. */
.shade-note { margin: 10px 0 0; color: #8e7d75; font-size: 12px; }
/* Why: reserve consistent space for success/error feedback after a signup attempt. */
.shade-response { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .78); color: var(--ink); font-size: 13px; }
/* Why: visually distinguish failed signup attempts without using an alarming full-page error treatment. */
.shade-response.is-error { background: #fff0f0; color: #8d3c3c; }
/* Why: keep real queue/referral data together when the backend begins returning those fields. */
.shade-queue { display: grid; gap: 10px; margin-top: 16px; }
/* Why: make the real queue position visually rewarding once available. */
.shade-position-card, .shade-referral-card { padding: 16px; border: 1px solid rgba(123, 82, 73, .12); border-radius: 18px; background: rgba(255, 255, 255, .82); }
/* Why: stack queue label and position for faster visual comprehension. */
.shade-position-card { display: grid; gap: 3px; }
/* Why: make the numeric queue position the dominant post-signup reward. */
.shade-position-card strong { font-family: var(--serif); font-size: 34px; font-weight: 500; }
/* Why: keep queue explanatory text subordinate to the position itself. */
.shade-position-card span, .shade-referral-card > span { color: var(--muted); font-size: 12px; }
/* Why: place referral URL and copy action in one compact control group. */
.shade-referral-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 9px; }
/* Why: keep the referral URL readable and easy to select manually if copy permissions fail. */
.shade-referral-row input { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font: inherit; font-size: 12px; }
/* Why: create a result-first launch visual without needing unreleased product screenshots. */
.shade-visual { position: relative; min-height: 560px; display: grid; place-items: center; isolation: isolate; }
/* Why: add soft dimensional motion cues around the result card while keeping them purely decorative. */
.shade-orbit { position: absolute; border-radius: 50%; filter: blur(.2px); z-index: -1; }
/* Why: create the larger warm glow behind the card. */
.shade-orbit-one { width: 430px; height: 430px; background: radial-gradient(circle, rgba(238, 185, 204, .55), rgba(238, 185, 204, 0) 68%); transform: translate(50px, -35px); }
/* Why: create a smaller champagne glow for depth and brand warmth. */
.shade-orbit-two { width: 320px; height: 320px; background: radial-gradient(circle, rgba(220, 179, 132, .38), rgba(220, 179, 132, 0) 70%); transform: translate(-80px, 95px); }
/* Why: make the example verdict feel tangible and premium without mimicking a raw phone screenshot. */
.shade-result-card { width: min(100%, 420px); padding: 30px; border: 1px solid rgba(255, 255, 255, .75); border-radius: 34px; background: rgba(255, 255, 255, .88); box-shadow: 0 34px 90px rgba(102, 64, 56, .18); backdrop-filter: blur(18px); transform: rotate(2deg); }
/* Why: label the unreleased feature clearly inside the visual itself. */
.shade-result-kicker { color: #ae667c; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
/* Why: make shade comparison the dominant visual cue for what the feature actually helps decide. */
.shade-swatch-row { display: flex; align-items: center; gap: 12px; margin: 24px 0; }
/* Why: render each example shade as a dimensional swatch rather than a flat text label. */
.shade-swatch-row span { width: 58px; height: 58px; border-radius: 18px; background: var(--shade); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 8px 20px rgba(65, 44, 40, .12); }
/* Why: visually identify the example selected shade without relying on color alone. */
.shade-swatch-row span.is-selected { width: 74px; height: 74px; outline: 3px solid #fff; box-shadow: 0 0 0 2px #b87382, 0 12px 28px rgba(65, 44, 40, .18); }
/* Why: make the outcome statement the primary message inside the example result. */
.shade-result-card > strong { display: block; font-family: var(--serif); font-size: 34px; font-weight: 500; line-height: 1.05; }
/* Why: explain the sample verdict in one short supporting sentence. */
.shade-result-card > p { margin: 10px 0 0; color: var(--muted); }
/* Why: visually separate the final verdict from the explanatory copy. */
.shade-verdict { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
/* Why: keep the verdict label visually secondary. */
.shade-verdict span { color: var(--muted); font-size: 12px; }
/* Why: make the verdict itself easy to scan. */
.shade-verdict strong { color: #7e4a59; }
/* Why: add small stop-scroll cues around the main card without turning the section into a busy illustration. */
.shade-floating-note { position: absolute; padding: 10px 13px; border: 1px solid rgba(255, 255, 255, .8); border-radius: 999px; background: rgba(255, 255, 255, .78); box-shadow: 0 10px 30px rgba(80, 51, 45, .1); color: #725e56; font-size: 11px; font-weight: 700; backdrop-filter: blur(12px); }
/* Why: position the upper note where it supports the card without obscuring the shade comparison. */
.shade-floating-note-top { top: 18%; right: 0; }
/* Why: position the lower note as a simple three-step summary near the card exit path. */
.shade-floating-note-bottom { bottom: 17%; left: 0; }

/* Why: present the full product as one coherent blueprint and enable compact exploration. */
.blueprint-section { background: #fff8f3; }
.blueprint-grid { display: grid; grid-template-columns: .9fr .7fr; align-items: center; gap: 100px; }
.blueprint-copy { max-width: 600px; }
.tab-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.tab-button { appearance: none; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 11px 16px; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.tab-button.active { color: #fff; background: var(--ink); border-color: var(--ink); }
.tab-panels { margin-top: 22px; min-height: 150px; }
.tab-panel { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(255,255,255,.75); }
.tab-panel h3 { margin-bottom: 8px; font-family: var(--serif); font-size: 27px; font-weight: 500; }
.tab-panel p { margin: 0; color: var(--muted); }
.blueprint-media { width: min(100%, 500px); justify-self: end; overflow: hidden; border-radius: var(--radius-xl); box-shadow: var(--shadow); }
.blueprint-media img { width: 100%; }

/* Why: make demographic representation explicit and visually balanced. */
.inclusive-section { background: #fff; }
.section-heading-row { display: grid; grid-template-columns: 1.3fr .7fr; gap: 70px; align-items: end; margin-bottom: 44px; }
.section-heading-row h2 { margin-bottom: 0; }
.section-heading-row > p { margin: 0 0 8px; color: var(--muted); }
.portrait-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.portrait-card { overflow: hidden; border: 1px solid var(--line); border-radius: 26px; background: var(--cream); }
.portrait-card img { width: 100%; aspect-ratio: 4 / 4.8; object-fit: cover; object-position: center top; }
.portrait-card div { display: grid; gap: 3px; padding: 16px; }
.portrait-card span { color: var(--muted); font-size: 12px; }

/* Why: finish with one focused conversion block and a desktop QR path. */
.final-cta { background: linear-gradient(135deg, #f7e7db, #fdf8f4); }
.final-cta-inner { display: grid; grid-template-columns: 1fr auto; gap: 80px; align-items: center; }
.final-cta h2 { max-width: 760px; }
.final-cta p:not(.eyebrow) { max-width: 680px; color: var(--muted); font-size: 18px; }
.android-note { display: inline-block; margin-left: 14px; color: var(--muted); font-size: 13px; }
.qr-card { width: 230px; display: grid; justify-items: center; gap: 7px; padding: 18px; border-radius: 26px; background: #fff; box-shadow: var(--shadow); text-align: center; }
.qr-card img { width: 150px; height: 150px; }
.qr-card span { color: var(--muted); font-size: 11px; }

/* Why: close the page quietly without competing with the install CTA. */
.site-footer { border-top: 1px solid var(--line); background: #fff; }
/* Why: give the official footer lockup enough vertical room without making the footer visually heavy. */
.footer-inner { min-height: 104px; display: flex; justify-content: space-between; align-items: center; gap: 30px; color: var(--muted); font-size: 12px; }
/* Why: group the official icon, wordmark, and copyright as a single brand unit. */
.footer-brand-wrap { display: flex; align-items: center; gap: 12px; }
/* Why: keep the official icon subtle in the footer while retaining recognition. */
.footer-brand-icon { width: 44px; height: 44px; border-radius: 11px; flex: 0 0 auto; }
/* Why: stack the official wordmark above the copyright for a clean brand signature. */
.footer-brand-copy { display: grid; gap: 5px; }
/* Why: keep the official wordmark readable without competing with the page content. */
.footer-brand-wordmark { width: 116px; height: auto; display: block; }
/* Why: keep legal/store links grouped independently from the new footer brand container. */
.footer-links { display: flex; gap: 18px; }
.footer-inner a:hover { color: var(--ink); }

/* Why: collapse dense desktop layouts into readable touch-friendly mobile flows. */
@media (max-width: 1040px) {
  .primary-nav { display: none; }
  .nav-toggle { display: block; }
  .primary-nav.open { position: absolute; display: grid; top: 76px; left: 20px; right: 20px; gap: 0; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
  .primary-nav.open a { padding: 13px 12px; }
  /* Why: include the Shade Discovery conversion section in the existing single-column tablet/mobile collapse. */
  .hero-grid, .split-grid, .split-reverse, .product-story-grid, .daily-grid, .shade-grid, .blueprint-grid { grid-template-columns: 1fr; gap: 54px; }
  .hero-grid { padding-top: 58px; }
  .hero-copy { max-width: 780px; }
  .hero-visual { min-height: auto; }
  .value-grid { grid-template-columns: repeat(3, 1fr); }
  .value-item:nth-child(3) { border-right: 0; }
  .value-item:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .feature-copy, .product-story-copy, .daily-copy, .blueprint-copy { max-width: 760px; }
  .split-reverse .feature-copy { order: 1; }
  .split-reverse .feature-media { order: 2; }
  /* Why: center the new Shade Discovery visual alongside the existing visual modules on narrower layouts. */
  .portrait-media, .tryon-card, .shade-visual, .blueprint-media { width: min(100%, 620px); justify-self: center; }
  .section-heading-row { grid-template-columns: 1fr; gap: 18px; }
  .portrait-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Why: optimize the design for the mobile visitors most likely to install the app immediately. */
@media (max-width: 700px) {
  .shell { width: min(calc(100% - 28px), var(--shell)); }
  .header-inner { min-height: 66px; gap: 10px; }
  .primary-nav.open { top: 66px; left: 14px; right: 14px; }
  /* Why: reduce the official header lockup on narrow screens so the download CTA remains visible. */
  .brand-lockup { gap: 7px; }
  /* Why: keep the app icon recognizable without consuming excessive mobile header width. */
  .brand-icon { width: 32px; height: 32px; border-radius: 8px; }
  /* Why: keep the official wordmark legible while fitting beside mobile navigation controls. */
  .brand-wordmark { width: 88px; }
  .header-cta { min-height: 40px; padding-inline: 14px; font-size: 12px; }
  .hero-grid { min-height: auto; padding-block: 46px 42px; gap: 42px; }
  h1 { font-size: clamp(48px, 15vw, 70px); }
  h2 { font-size: clamp(37px, 11vw, 50px); }
  .hero-lede, .section-lede, .feature-copy > p, .product-story-copy > p, .daily-copy > p, .blueprint-copy > p { font-size: 16px; }
  /* Why: stack early-access benefits so each message remains readable at phone width. */
  .shade-benefits { grid-template-columns: 1fr; }
  /* Why: stack the email field and signup button for a full-width mobile conversion path. */
  .shade-form { grid-template-columns: 1fr; }
  /* Why: make the early-access button span the available mobile width. */
  .shade-form .button { width: 100%; }
  /* Why: reduce the decorative result visual height so the next section is not pushed excessively far down on phones. */
  .shade-visual { min-height: 470px; }
  /* Why: keep the example result card comfortably inside the mobile viewport. */
  .shade-result-card { width: min(92%, 420px); padding: 24px; }
  /* Why: stack referral controls when the future backend returns a real share link. */
  .shade-referral-row { grid-template-columns: 1fr; }
  /* Why: move floating notes inward so they do not clip against narrow viewport edges. */
  .shade-floating-note-top { right: 4%; }
  /* Why: move the lower floating note inward for the same mobile-safe margin. */
  .shade-floating-note-bottom { left: 4%; }
  .hero-actions { display: grid; }
  .hero-actions .button { width: 100%; }
  .hero-status { flex-wrap: wrap; }
  .hero-image-frame { border-radius: 28px; }
  .floating-card-top { right: 2%; top: 6%; }
  .floating-card-bottom { left: 2%; bottom: 6%; }
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .value-item { min-height: 100px; padding: 14px 10px; border-bottom: 1px solid var(--line); }
  .value-item:nth-child(2n) { border-right: 0; }
  .value-item:nth-last-child(-n+2) { border-bottom: 0; }
  .section, .feature-section, .daily-section, .blueprint-section, .inclusive-section, .final-cta { padding-block: 76px; }
  .section-intro { padding-bottom: 36px; }
  .combo-grid, .makeup-picks, .metric-grid { grid-template-columns: 1fr; }
  .combo-card { grid-template-columns: 32px 14px 32px 1fr; }
  .daily-dashboard { padding: 16px; border-radius: 26px; }
  .dashboard-topline h3 { font-size: 31px; }
  .streak-badge { padding: 8px 10px; }
  .portrait-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .portrait-card div { padding: 12px; }
  .portrait-card strong { font-size: 13px; }
  .portrait-card span { font-size: 10px; }
  .final-cta-inner { grid-template-columns: 1fr; gap: 36px; }
  .qr-card { display: none; }
  .android-note { display: block; margin: 12px 0 0; }
  /* Why: stack brand and legal links cleanly on phones while keeping the official identity visible. */
  .footer-inner { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 22px; }
  /* Why: allow the footer links to wrap instead of overflowing on very narrow phones. */
  .footer-links { flex-wrap: wrap; }
}

/* Why: preserve usability for visitors who request reduced animation. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Why: repeat a compact conversion action before each major product story without turning the page into a wall of buttons. */
.section-download {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 24px;
  padding: 9px;
  border: 1px solid rgba(24, 18, 15, 0.10);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 30px rgba(43, 30, 22, 0.06);
  backdrop-filter: blur(12px);
}

/* Why: make the CTA purpose obvious while keeping the label visually quieter than the store action. */
.section-download-label {
  padding: 0 4px 0 7px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted, #6d625d);
  white-space: nowrap;
}

/* Why: use a shared store-button shape so future Google Play activation requires only changing the element state/link. */
.store-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 15px;
  border-radius: 11px;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
  white-space: nowrap;
}

/* Why: give the currently available iPhone action the strongest visual priority. */
.store-button-apple {
  background: #11100f;
  color: #fff;
  border: 1px solid #11100f;
}

/* Why: preserve an Android conversion slot while accurately showing that Google Play is not live yet. */
.store-button-android {
  color: #514844;
  background: #f4efec;
  border: 1px solid rgba(24, 18, 15, 0.10);
}

/* Why: prevent a not-yet-live Google Play control from looking or behaving like a working download link. */
.store-button.is-disabled {
  cursor: default;
  opacity: 0.72;
  user-select: none;
}

/* Why: keep the top-of-page conversion strip close to the hero message rather than visually detached from it. */
.hero-copy > .section-download {
  margin-bottom: 20px;
}

/* Why: keep a high-intent install control reachable throughout long mobile scrolling. */
.mobile-download-bar {
  display: none;
}

@media (max-width: 760px) {
  /* Why: make each repeated CTA fit narrow screens without horizontal overflow. */
  .section-download {
    width: 100%;
    padding: 8px;
    gap: 8px;
  }

  /* Why: let the small prompt occupy its own row on mobile so both store controls remain readable. */
  .section-download-label {
    width: 100%;
    padding: 2px 4px 0;
  }

  /* Why: split the available width between iOS and the Android-coming-soon state. */
  .section-download .store-button {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    padding-inline: 10px;
    white-space: normal;
    text-align: center;
  }

  /* Why: reserve bottom space so the persistent mobile install bar does not cover footer content. */
  body {
    padding-bottom: 66px;
  }

  /* Why: show the persistent install control only on mobile, where repeated long-scroll navigation has the highest friction. */
  .mobile-download-bar {
    position: fixed;
    z-index: 90;
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: block;
    padding: 7px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 15px;
    background: rgba(17, 16, 15, 0.94);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(16px);
  }

  /* Why: make the persistent mobile CTA large enough for comfortable thumb interaction. */
  .mobile-download-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-radius: 10px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 750;
    text-decoration: none;
  }
}


/* Why: reserve a known top offset so the sticky header stays below the persistent early-access announcement. */
:root { --early-access-height: 44px; }

/* Why: keep the upcoming-feature signup visible from the first viewport while preserving a premium, non-spammy visual style. */
.early-access-bar {
  position: sticky;
  top: 0;
  z-index: 120;
  min-height: var(--early-access-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 18px;
  color: #3a2019;
  background: linear-gradient(90deg, #f8dbe7 0%, #fff1df 50%, #f3d7e8 100%);
  border-bottom: 1px solid rgba(126, 71, 59, 0.12);
  box-shadow: 0 8px 26px rgba(89, 55, 44, 0.07);
}

/* Why: attract attention with a soft breathing signal rather than a harsh blink. */
.early-access-pulse {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #b87458;
  box-shadow: 0 0 0 0 rgba(184, 116, 88, 0.38);
  animation: nuancePulse 2.2s ease-out infinite;
}

/* Why: keep the feature name dominant while allowing a short supporting benefit on larger screens. */
.early-access-copy { display: inline-flex; align-items: baseline; gap: 9px; font-size: 12px; }
.early-access-copy strong { letter-spacing: .045em; text-transform: uppercase; }
.early-access-copy span { color: #76615a; }

/* Why: turn the top announcement into a clear conversion path without adding another heavy button. */
.early-access-link { font-size: 12px; font-weight: 800; color: #7f4333; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.early-access-link:hover { color: #4b291f; }

/* Why: keep the main sticky navigation immediately below the always-visible early-access announcement. */
.site-header { top: var(--early-access-height); }

/* Why: create the restrained attention pulse used by the persistent early-access bar. */
@keyframes nuancePulse {
  0% { box-shadow: 0 0 0 0 rgba(184, 116, 88, .42); transform: scale(1); }
  55% { box-shadow: 0 0 0 9px rgba(184, 116, 88, 0); transform: scale(1.06); }
  100% { box-shadow: 0 0 0 0 rgba(184, 116, 88, 0); transform: scale(1); }
}

/* Why: add a gentle living quality to the hero without distracting from the headline or CTA. */
.hero-image-frame { animation: heroFloat 7s ease-in-out infinite; }
.floating-card-top { animation: cardFloatTop 5.8s ease-in-out infinite; }
.floating-card-bottom { animation: cardFloatBottom 6.6s ease-in-out infinite; }

/* Why: define subtle vertical movement for the primary hero visual. */
@keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
/* Why: offset the top result card on a different rhythm so the hero feels layered rather than mechanically synchronized. */
@keyframes cardFloatTop { 0%, 100% { transform: translate3d(0,0,0) rotate(.2deg); } 50% { transform: translate3d(-4px,-12px,0) rotate(-.6deg); } }
/* Why: offset the lower result card in the opposite direction for subtle parallax depth. */
@keyframes cardFloatBottom { 0%, 100% { transform: translate3d(0,0,0) rotate(-.2deg); } 50% { transform: translate3d(5px,10px,0) rotate(.7deg); } }

/* Why: create an early visual-motion section that lets visitors understand multiple outcomes without reading long feature blocks. */
.results-motion { padding: 70px 0 78px; overflow: hidden; background: linear-gradient(180deg, #fffdfb 0%, #fbf2ec 100%); border-block: 1px solid rgba(52,38,28,.07); }
.results-motion-heading { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(260px,.8fr); gap: 48px; align-items: end; margin-bottom: 34px; }
.results-motion-heading h2 { margin: 5px 0 0; max-width: 760px; }
.results-motion-heading > p { margin: 0 0 6px; max-width: 430px; color: var(--muted); font-size: 16px; line-height: 1.7; }

/* Why: mask the rail edges so continuously moving cards enter and exit softly instead of clipping abruptly. */
.results-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }

/* Why: move two identical card sequences as one continuous loop using compositor-friendly transforms. */
.results-track { display: flex; width: max-content; gap: 18px; padding: 8px 0 18px; animation: resultsMarquee 42s linear infinite; will-change: transform; }
.results-marquee:hover .results-track { animation-play-state: paused; }

/* Why: make each result feel like a premium editorial card rather than another raw app screenshot. */
.result-story { position: relative; width: clamp(230px, 22vw, 310px); aspect-ratio: .78; flex: 0 0 auto; overflow: hidden; border-radius: 28px; background: #eaded6; box-shadow: 0 20px 50px rgba(68,43,31,.12); }
.result-story img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.result-story:hover img { transform: scale(1.035); }
.result-story::after { content: ""; position: absolute; inset: 42% 0 0; background: linear-gradient(180deg, transparent 0%, rgba(25,18,15,.78) 100%); pointer-events: none; }
.result-story div { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 19px; display: grid; gap: 5px; color: #fff; }
.result-story span { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .82; }
.result-story strong { font-family: var(--serif); font-size: 23px; line-height: 1.08; font-weight: 600; }

/* Why: translate exactly half of the duplicated track so the next identical sequence starts at the same visual position. */
@keyframes resultsMarquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(calc(-50% - 9px),0,0); } }

/* Why: let long-form homepage content enter progressively as visitors scroll instead of appearing as one static wall. */
.motion-ready .reveal-target { opacity: 0; transform: translate3d(0, 28px, 0) scale(.985); transition: opacity .72s ease, transform .72s cubic-bezier(.22,.8,.28,1); }
.motion-ready .reveal-target.is-visible { opacity: 1; transform: translate3d(0,0,0) scale(1); }

/* Why: animate the Glow Plan graph only after the dashboard is visible so the progress story has a clear visual payoff. */
.motion-ready .daily-dashboard .chart-line { stroke-dasharray: 800; stroke-dashoffset: 800; }
.motion-ready .daily-dashboard.is-visible .chart-line { animation: drawGlowChart 1.45s .18s ease forwards; }
.motion-ready .daily-dashboard .chart-point { opacity: 0; transform-origin: center; }
.motion-ready .daily-dashboard.is-visible .chart-point { animation: revealGlowPoint .38s 1.45s ease forwards; }
@keyframes drawGlowChart { to { stroke-dashoffset: 0; } }
@keyframes revealGlowPoint { from { opacity: 0; transform: scale(.25); } to { opacity: 1; transform: scale(1); } }

/* Why: make the Shade Discovery visual feel active even before the waitlist backend is connected. */
.shade-orbit-one { animation: shadeOrbitOne 11s linear infinite; }
.shade-orbit-two { animation: shadeOrbitTwo 15s linear infinite reverse; }
.shade-result-card { animation: shadeCardBreathe 6s ease-in-out infinite; }
@keyframes shadeOrbitOne { to { transform: rotate(360deg); } }
@keyframes shadeOrbitTwo { to { transform: rotate(360deg); } }
@keyframes shadeCardBreathe { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(.6deg); } }

@media (max-width: 700px) {
  /* Why: keep the top announcement on one compact line on phones so it does not consume the hero viewport. */
  :root { --early-access-height: 42px; }
  .early-access-bar { justify-content: space-between; gap: 8px; padding-inline: 12px; }
  .early-access-copy { font-size: 10.5px; min-width: 0; }
  .early-access-copy span { display: none; }
  .early-access-link { font-size: 10.5px; }
  /* Why: keep the moving proof rail directly below the top navigation on phones without consuming the first viewport with another text block. */
  .results-motion { padding-block: 10px 14px; }
  /* Why: hide the desktop explanatory heading on phones so the result imagery itself becomes the immediate proof. */
  .results-motion-heading { display: none; }
  /* Why: show more than one moving result at once so the rail immediately reads as a dynamic gallery. */
  .result-story { width: 190px; border-radius: 22px; }
  /* Why: keep benefit labels readable at the smaller mobile card width. */
  .result-story strong { font-size: 17px; }
  /* Why: tighten the rail spacing on phones so consecutive results stay visually connected. */
  .results-track { gap: 12px; padding-block: 6px 10px; animation-duration: 31s; }
}

/* Why: fully disable non-essential motion for visitors who request reduced motion at operating-system level. */
@media (prefers-reduced-motion: reduce) {
  .early-access-pulse, .hero-image-frame, .floating-card-top, .floating-card-bottom, .results-track, .shade-orbit-one, .shade-orbit-two, .shade-result-card { animation: none !important; }
  .motion-ready .reveal-target { opacity: 1 !important; transform: none !important; }
  .motion-ready .daily-dashboard .chart-line { stroke-dashoffset: 0 !important; animation: none !important; }
  .motion-ready .daily-dashboard .chart-point { opacity: 1 !important; animation: none !important; }
}