/* Solésence redesign concept: "Particles of light"
   The logo's seven-dot sun, a palette that runs from noon gold to dusk plum, one orchestrated
   moment (the loader) and one explanatory one (the white cast clearing). See design-direction.md. */

/* ==========================================================================
   TOKENS
   ========================================================================== */
:root {
  /* palette: a day in the sun, gold noon to plum dusk */
  --ink: #221A22;          /* text: plum-black, 15.2:1 on zinc */
  --dusk: #2B1A2C;         /* dark sections: the site's plum deepened to aubergine */
  --dusk-2: #382539;       /* surfaces on dusk */
  --dusk-deep: #211422;    /* footer */
  --plum: #A15A95;         /* the live site's interactive colour: focus, borders, hovers */
  --plum-ink: #8A4A80;     /* link text on light grounds, 5.6:1 */
  --sun: #E06B2F;          /* the logo, exactly */
  --burnt: #B64C27;        /* the logo's deepest dot: primary buttons, white text 5.2:1 */
  --burnt-deep: #9A3F1F;
  --gold: #D4AF32;         /* linework and the sun dot; text only on dusk */
  --zinc: #F1F3F3;         /* page ground: zinc-oxide white, not cream */
  --white: #FFFFFF;
  --muted: #5E545D;        /* secondary text on light, 6.5:1 */
  --lilac: #CDB9CA;        /* secondary text on dusk, 8.9:1 */
  --line: #DADDDD;
  --line-dark: rgba(255, 255, 255, .13);
  --notice: #F6D86B;       /* the concept notice only */

  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-display: clamp(2.6rem, 5vw, 4.6rem);
  --fs-h2: clamp(2rem, 3.5vw, 3.25rem);
  --fs-h3: 1.375rem;
  --fs-lede: clamp(1.125rem, 1.35vw, 1.3rem);
  --fs-body: 1.125rem;
  --fs-small: .875rem;

  --wrap: 1280px;
  --gutter: clamp(16px, 4vw, 48px);
  --section: clamp(80px, 10vw, 140px);
  --radius: 14px;
  --radius-l: 22px;
  --shadow: 0 1px 1px rgba(34, 26, 34, .04), 0 22px 44px -26px rgba(43, 26, 44, .42);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);       /* enter, feedback */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* indicators, strong moves */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);    /* sheets, panels */

  --utility-h: 38px;
  --masthead-h: 76px;
  --logo-word: var(--sun);
}

/* ==========================================================================
   BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
/* on html, not body: overflow on body breaks position: sticky */
html { overflow-x: hidden; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--masthead-h) + 16px); }
body {
  margin: 0;
  background: var(--zinc);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.is-loading { overflow: hidden; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 { margin: 0; font-weight: 580; letter-spacing: -.022em; line-height: 1.08; text-wrap: balance; }
p, ul, ol, dl, dd, blockquote, figure { margin: 0; }
p { text-wrap: pretty; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--plum-ink); text-decoration-thickness: 1px; text-underline-offset: .2em; transition: color .18s; }
a:hover { color: var(--plum); }
:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; border-radius: 4px; }
:is(.clear, .science, .quote, .footer, .mobile-nav, .utility) :focus-visible { outline-color: var(--gold); }
sup { font-size: .5em; line-height: 0; }

/* the label numeral: sun care packaging's big SPF figure, in an expanded cut */
.num { font-stretch: 116%; font-weight: 620; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap > * { min-width: 0; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 400;
  padding: 10px 16px; border-radius: 999px; background: var(--dusk); color: #fff;
  font-weight: 600; text-decoration: none; transform: translateY(-160%); transition: transform .2s var(--ease-out);
}
.skip-link:focus { transform: none; color: #fff; }

.section-head { display: grid; gap: 18px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head h2 { font-size: var(--fs-h2); }
.section-head--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: end; column-gap: clamp(32px, 6vw, 96px); }
.lede { font-size: var(--fs-lede); line-height: 1.52; color: var(--muted); max-width: 36em; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border: 1px solid transparent; border-radius: 999px;
  font-weight: 600; font-size: 1rem; line-height: 1.1; text-align: center; text-decoration: none;
  transition: background-color .18s var(--ease-out), border-color .18s var(--ease-out), color .18s var(--ease-out), transform 160ms var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn--large { min-height: 56px; padding: 0 28px; font-size: 1.0625rem; }
.btn--block { display: flex; width: 100%; }
.btn--primary { background: var(--burnt); color: #fff; }
.btn--primary:hover { background: var(--burnt-deep); color: #fff; }
.btn--ghost { border-color: rgba(34, 26, 34, .22); background: transparent; color: var(--ink); }
.btn--ghost:hover { border-color: var(--plum); color: var(--plum-ink); }
.btn--dark { background: var(--dusk); color: #fff; }
.btn--dark:hover { background: #4A2F4B; color: #fff; }
.btn--outline { border-color: var(--line); background: #fff; color: var(--ink); }
.btn--outline:hover { border-color: var(--plum); color: var(--plum-ink); }

/* ==========================================================================
   CONCEPT NOTICE AND HEADER
   ========================================================================== */
.concept-note { background: var(--notice); color: var(--ink); font-size: .875rem; line-height: 1.45; }
.concept-note p { max-width: var(--wrap); margin: 0 auto; padding: 9px var(--gutter); text-align: center; }
.concept-note a { color: var(--ink); font-weight: 600; }

/* the utility bar scrolls away; the masthead stays */
.site-header { position: sticky; top: calc(var(--utility-h) * -1); z-index: 100; }
.utility { height: var(--utility-h); background: var(--dusk); color: var(--lilac); font-size: .8125rem; }
.utility__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 100%; }
.utility__links { display: flex; align-items: center; gap: 22px; padding: 0; list-style: none; }
.utility a { color: #fff; text-decoration: none; opacity: .88; }
.utility a:hover { color: #fff; opacity: 1; text-decoration: underline; }
.utility__ticker { margin-left: 6px; color: var(--gold); font-stretch: 112%; font-weight: 600; }

.masthead {
  background: rgba(241, 243, 243, .88);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, background-color .25s;
}
.is-scrolled .masthead { border-bottom-color: var(--line); background: rgba(241, 243, 243, .95); }
.masthead__inner { display: flex; align-items: center; gap: 20px; height: var(--masthead-h); }
.brand { display: block; flex: none; margin-right: auto; border-radius: 6px; }
/* the wordmark is wide: size it by width, and ease it down a touch once scrolled */
.brand__logo { width: 168px; height: auto; aspect-ratio: 1817 / 422; overflow: visible; transition: width .3s var(--ease-out); }
.is-scrolled .brand__logo { width: 150px; }

.nav__list { display: flex; align-items: center; gap: 2px; padding: 0; list-style: none; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border: 0; border-radius: 999px; background: none;
  color: var(--ink); font-weight: 500; font-size: .96875rem; text-decoration: none;
  transition: background-color .18s, color .18s;
}
.nav__link svg { width: 11px; height: 11px; transition: transform .22s var(--ease-out); }
.nav__link:hover { background: rgba(161, 90, 149, .09); color: var(--plum-ink); }
.has-menu { position: relative; }
.nav__menu {
  position: absolute; top: calc(100% + 10px); left: -8px; min-width: 272px;
  padding: 8px; list-style: none; background: #fff; border-radius: var(--radius);
  box-shadow: 0 0 0 1px rgba(34, 26, 34, .06), var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s var(--ease-out), transform .15s var(--ease-out), visibility 0s linear .15s;
}
.has-menu.is-open .nav__menu { opacity: 1; visibility: visible; transform: none; transition: opacity .2s var(--ease-out), transform .24s var(--ease-out); }
.has-menu.is-open > .nav__link svg { transform: rotate(180deg); }
.nav__menu a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--ink); font-size: .9375rem; text-decoration: none; }
.nav__menu a:hover { background: var(--zinc); color: var(--plum-ink); }
.masthead__cta { flex: none; }

.menu-toggle {
  display: none; align-items: center; gap: 10px;
  padding: 10px 4px 10px 12px; border: 0; background: none; color: var(--ink); font-weight: 600; font-size: .9375rem;
}
.menu-toggle__bars { position: relative; width: 22px; height: 12px; }
.menu-toggle__bars span { position: absolute; left: 0; width: 100%; height: 1.75px; border-radius: 2px; background: currentColor; }
.menu-toggle__bars span:first-child { top: 0; }
.menu-toggle__bars span:last-child { bottom: 0; }

/* ==========================================================================
   MOBILE MENU: full-screen dialog, wipes down from the top
   ========================================================================== */
.mobile-nav {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  padding: 0 var(--gutter) max(28px, env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--dusk); color: #fff;
  --logo-word: #fff;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .55s cubic-bezier(.7, 0, .2, 1) .14s, visibility 0s linear .69s;
}
.mobile-nav.is-open { clip-path: inset(0); visibility: visible; transition: clip-path .7s cubic-bezier(.7, 0, .2, 1), visibility 0s; }
.mobile-nav__top { display: flex; align-items: center; justify-content: space-between; min-height: var(--masthead-h); }
.mobile-nav__logo { width: 150px; height: auto; aspect-ratio: 1817 / 422; overflow: visible; }
.mobile-nav__close { position: relative; width: 44px; height: 44px; margin-right: -8px; border: 0; border-radius: 50%; background: none; color: #fff; }
.mobile-nav__close span, .mobile-nav__close span::before {
  position: absolute; left: 12px; top: 21px; width: 20px; height: 1.75px; border-radius: 2px; background: currentColor; transform: rotate(45deg);
}
.mobile-nav__close span::before { content: ""; left: 0; top: 0; transform: rotate(90deg); }
.mobile-nav__body { display: flex; flex: 1; flex-direction: column; justify-content: space-between; gap: 32px; padding-top: 24px; }
.mobile-nav__list { padding: 0; list-style: none; }
.mobile-nav__list a {
  display: block; padding: 10px 0; color: #fff; text-decoration: none;
  font-size: clamp(1.75rem, 7.4vw, 2.5rem); font-weight: 520; letter-spacing: -.02em; line-height: 1.15;
}
.mobile-nav__list a:hover { color: var(--gold); }
.mobile-nav__small { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; padding: 0; list-style: none; font-size: .9375rem; }
.mobile-nav__small a { color: var(--lilac); }
/* links rise in one after another on open, and leave together on close */
.mobile-nav__list li, .mobile-nav__foot { opacity: 0; transform: translateY(26px); transition: opacity .2s, transform .2s; }
.mobile-nav.is-open :is(.mobile-nav__list li, .mobile-nav__foot) {
  opacity: 1; transform: none;
  transition: opacity .5s cubic-bezier(.2, .8, .2, 1) calc(.3s + var(--i, 0) * .06s), transform .75s cubic-bezier(.2, .8, .2, 1) calc(.3s + var(--i, 0) * .06s);
}

/* ==========================================================================
   LOADER: dusk curtain, white letters, the dots rise like a sun
   ========================================================================== */
.loader { display: none; }
.js .loader { display: block; position: fixed; inset: 0; z-index: 300; background: var(--dusk); will-change: transform; }
.loader__stage { position: absolute; inset: 0; display: grid; place-items: center; }
.loader__logo { width: min(68vw, 440px); height: auto; aspect-ratio: 1817 / 422; overflow: visible; --logo-word: #fff; }
.loader__edge { position: absolute; left: 0; top: calc(100% - 1px); width: 100%; height: 14vh; fill: var(--dusk); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { padding-top: clamp(36px, 6vw, 84px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 72px); }
.hero__title { font-size: var(--fs-display); font-weight: 600; letter-spacing: -.034em; line-height: 1.02; }
.hero__title sup { margin-left: .06em; font-size: .28em; font-weight: 500; letter-spacing: 0; vertical-align: .5em; }
/* words rise from behind their own line; set up by main.js, so nothing hides without it */
.hero__title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.hero__title .w > span { display: inline-block; }
.hero__lede { max-width: 33em; margin-top: 28px; font-size: var(--fs-lede); line-height: 1.52; color: var(--muted); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero__visual { position: relative; }

/* the sun disc: a photo in a circle, orbited by the logo's seven dots (hero and closing only) */
.sun { position: relative; width: 100%; max-width: 620px; margin-left: auto; aspect-ratio: 260 / 270; }
.sun__disc {
  position: absolute; left: 50%; top: 51.85%; width: 76.92%; aspect-ratio: 1;
  border-radius: 50%; overflow: hidden; transform: translate(-50%, -50%);
  background: #E7D8C4;
}
.sun__disc img { width: 100%; height: 100%; object-fit: cover; }
.sun__orbit, .sun__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* a hairline echo of the disc, offset so it only shows in the arc's gap */
.sun__ring-line { fill: none; stroke: var(--gold); stroke-width: 1; vector-effect: non-scaling-stroke; }

.spotlight {
  position: absolute; left: 0; bottom: 6%;
  width: min(292px, 60%); padding: 18px 20px 20px;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
}
.spotlight__kicker { font-size: .8125rem; color: var(--muted); }
.spotlight__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 4px; font-size: 1.25rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.spotlight__name .num { color: var(--burnt); font-size: 1.0625rem; }
.spotlight__meta { margin-top: 8px; font-size: .9375rem; line-height: 1.45; color: var(--muted); }
.spotlight__link { display: inline-block; margin-top: 12px; font-size: .9375rem; font-weight: 600; }

/* four facts between two hairlines, equal padding above and below */
.facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
  margin-top: clamp(56px, 7vw, 96px); padding: 28px 0; list-style: none;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.facts li { display: grid; align-content: start; gap: 8px; }
.facts__num { font-size: clamp(1.75rem, 2.6vw, 2.375rem); line-height: 1; }
.facts__label { max-width: 17em; font-size: .9375rem; line-height: 1.42; color: var(--muted); }
.facts__source { margin-top: 12px; font-size: .8125rem; color: var(--muted); }

/* ==========================================================================
   CLEAR ZINC: the explanation, on dusk
   ========================================================================== */
.clear { margin-top: var(--section); padding: var(--section) 0 calc(var(--section) * .55); background: var(--dusk); color: #fff; }
.clear__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); }
.clear__figure { position: sticky; top: calc(var(--masthead-h) + 28px); }
.clear__frame {
  position: relative; overflow: hidden;
  width: min(100%, calc((100vh - var(--masthead-h) - 140px) * 1024 / 1536));
  aspect-ratio: 1024 / 1536; margin: 0 auto;
  border-radius: var(--radius-l); background: #C9C1BA;
  --p: 0;
}
.clear__base, .clear__cast { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clear__cast { pointer-events: none; }
.clear__state {
  position: absolute; left: 16px; bottom: 16px; display: grid;
  padding: 8px 14px; border-radius: 999px; background: rgba(33, 20, 34, .72); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: .8125rem; font-weight: 600;
}
.clear__state span { grid-area: 1 / 1; } /* no transition: --p is already eased every frame */
/* one hands over to the other around the middle, without both showing at once */
.clear__state-a { opacity: clamp(0, calc((.5 - var(--p)) * 6.7), 1); }
.clear__state-b { opacity: clamp(0, calc((var(--p) - .5) * 6.7), 1); }
.clear__caption { width: min(100%, calc((100vh - var(--masthead-h) - 140px) * 1024 / 1536)); margin: 14px auto 0; font-size: .8125rem; line-height: 1.45; color: var(--lilac); }
.clear__title { font-size: var(--fs-h2); }
.clear__steps { margin-top: 12px; padding: 0; list-style: none; }
.clear__step {
  display: flex; flex-direction: column; justify-content: center; min-height: 64vh; padding: 32px 0;
  opacity: calc(.42 + var(--near, 1) * .58);
}
.clear__step h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); color: #fff; }
.clear__step p { max-width: 30em; margin-top: 14px; color: var(--lilac); }
.clear__quote p { margin-top: 18px; font-size: clamp(1.1875rem, 1.6vw, 1.375rem); line-height: 1.5; color: #fff; }
.clear__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 22px; }
.clear__stats dt { font-size: clamp(1.875rem, 3vw, 2.5rem); line-height: 1; color: var(--gold); }
.clear__stats dd { margin-top: 8px; font-size: .9375rem; line-height: 1.45; color: var(--lilac); }
.clear__note { margin-top: 18px; font-size: .9375rem; }
/* for the commented, sourced alternative to step one in index.html */
.clear__cite { margin-top: 14px; font-size: .875rem; color: var(--lilac); }
.clear__cite a { color: #fff; }

/* ==========================================================================
   BEAUTY SCIENCE: continues the dusk chapter
   ========================================================================== */
.science { padding: calc(var(--section) * .55) 0 var(--section); background: var(--dusk); color: #fff; }
.science .lede { color: var(--lilac); }

.spectrum { margin-bottom: clamp(48px, 6vw, 72px); }
.spectrum__chart { position: relative; padding-bottom: 8px; font-size: .9375rem; }
.spectrum__zones, .spectrum__ticks { position: relative; height: 26px; }
.spectrum__zones span, .spectrum__ticks span { position: absolute; top: 0; white-space: nowrap; }
.spectrum__zones span { left: calc(var(--from) * 1%); width: calc((var(--to) - var(--from)) * 1%); padding-left: 2px; font-weight: 650; font-stretch: 112%; letter-spacing: .01em; }
.spectrum__band {
  height: 12px; margin: 6px 0 10px; border-radius: 6px;
  background: linear-gradient(90deg, #3E2448 0%, #5C3366 12%, #7E4579 24%, #A15A95 44%, #7874C4 50%, #8BA2D8 62%, #D4AF32 70%, #E08A2F 84%, #E06B2F 92%, #B64C27 100%);
}
.spectrum__ticks span { left: calc(var(--at) * 1%); color: var(--lilac); font-size: .8125rem; font-variant-numeric: tabular-nums; transform: translateX(-50%); }
.spectrum__ticks span:first-child { transform: none; }
.spectrum__ticks span:last-child { transform: translateX(-100%); }
.spectrum__ticks span::before { content: ""; position: absolute; left: 50%; top: -9px; width: 1px; height: 6px; background: rgba(255, 255, 255, .4); }
.spectrum__ticks span:first-child::before { left: 0; }
.spectrum__ticks span:last-child::before { left: auto; right: 0; }
.spectrum__bracket { position: relative; margin: 12px 0 0 calc(var(--from) * 1%); width: calc((var(--to) - var(--from)) * 1%); padding-top: 14px; color: var(--gold); font-weight: 600; font-size: .9375rem; }
.spectrum__bracket::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px;
  border: 1.5px solid currentColor; border-top: 0; border-radius: 0 0 4px 4px;
}
.spectrum__bracket span { display: block; white-space: nowrap; }
.spectrum__caption { margin-top: 18px; font-size: .875rem; color: var(--lilac); }

.tech { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 0; list-style: none; }
.tech__card { display: flex; flex-direction: column; gap: 14px; padding: 28px 24px 26px; border-radius: var(--radius-l); background: var(--dusk-2); color: var(--lilac); font-size: 1rem; line-height: 1.55; scroll-margin-top: calc(var(--masthead-h) + 24px); }
.tech__icon { width: 36px; height: 36px; color: #fff; }
.tech__name { font-size: 1.25rem; line-height: 1.2; color: #fff; }
.tech__stats { display: grid; gap: 14px; margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--line-dark); }
.tech__stats dt { font-size: 1.625rem; line-height: 1; color: var(--gold); }
.tech__stats dd { margin-top: 5px; font-size: .9375rem; line-height: 1.42; }
.tech__link { margin-top: auto; padding-top: 6px; color: #fff; font-size: .9375rem; font-weight: 600; }
.tech__link:hover { color: var(--gold); }

/* ==========================================================================
   PATHS TO MARKET AND THE COMPARISON
   ========================================================================== */
.paths { padding: var(--section) 0; background: var(--white); }
.paths__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; list-style: none; border-top: 1px solid var(--line); }
.path { padding: 32px clamp(20px, 3vw, 40px) 8px; border-left: 1px solid var(--line); }
.path:first-child { padding-left: 0; border-left: 0; }
.path__name { font-size: clamp(1.5rem, 2.2vw, 1.875rem); }
.path__tag { margin-top: 6px; color: var(--muted); }
.path__terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 26px 0 22px; }
.path__terms dt { font-size: .8125rem; color: var(--muted); }
.path__terms dd { margin-top: 6px; font-size: clamp(1.625rem, 2.4vw, 2.125rem); line-height: 1; color: var(--ink); }
.path__terms dd span { font-size: .9375rem; font-stretch: 100%; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.path > p:last-child { font-size: 1rem; color: var(--muted); }

.compare { margin-top: clamp(64px, 8vw, 104px); }
.compare__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin-bottom: 16px; }
.compare__title { font-size: 1.5rem; }
.compare__hint { display: none; font-size: .875rem; color: var(--muted); }
.compare__frame { position: relative; }
.compare__scroller { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overscroll-behavior-x: contain; }
.compare__table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size: 1rem; line-height: 1.35; }
.compare__table th, .compare__table td { padding: 14px 20px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.compare__table tbody tr:last-child > * { border-bottom: 0; }
.compare__table thead th { padding-top: 18px; padding-bottom: 18px; background: var(--zinc); font-size: 1rem; font-weight: 650; text-align: center; }
.compare__table thead th:first-child { text-align: left; }
.compare__table td { width: 21%; text-align: center; color: var(--ink); }
/* the feature column stays put on phones */
.compare__table :is(thead th:first-child, tbody th) { position: sticky; left: 0; z-index: 1; }
.compare__table tbody th { background: #fff; font-weight: 500; }
.compare__table thead th:first-child { background: var(--zinc); }
.compare__table .yes, .compare__table .no { display: inline-block; width: 18px; height: 18px; vertical-align: middle; }
.compare__table .yes { color: var(--plum); }
.compare__table .no { color: #B5ACB3; }
.compare__cue {
  position: absolute; top: 1px; bottom: 1px; width: 56px; display: grid; place-items: center;
  pointer-events: none; opacity: 0; transition: opacity .25s;
}
.compare__cue svg { width: 14px; height: 14px; color: var(--plum-ink); }
.compare__cue--right { right: 1px; border-radius: 0 var(--radius) var(--radius) 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 70%); }
.compare__cue--right svg { transform: rotate(-90deg); }
.compare__cue--left { left: 1px; border-radius: var(--radius) 0 0 var(--radius); background: linear-gradient(270deg, rgba(255, 255, 255, 0), #fff 70%); }
.compare__cue--left svg { transform: rotate(90deg); }
.compare__frame.can-right .compare__cue--right, .compare__frame.can-left .compare__cue--left { opacity: 1; }
/* subtle: 3px of travel, twice, when the table first comes into view. Under five seconds of
   motion in all, so it needs no pause control (WCAG 2.2.2) */
.compare__frame.is-seen .compare__cue--right svg { animation: nudge-right 2.4s var(--ease-in-out) 2; }
.compare__frame.is-seen .compare__cue--left svg { animation: nudge-left 2.4s var(--ease-in-out) 2; }
@keyframes nudge-right { 0%, 70%, 100% { transform: rotate(-90deg) translateY(0); } 80% { transform: rotate(-90deg) translateY(3px); } }
@keyframes nudge-left { 0%, 70%, 100% { transform: rotate(90deg) translateY(0); } 80% { transform: rotate(90deg) translateY(3px); } }
.compare__source { margin-top: 12px; font-size: .8125rem; color: var(--muted); }

/* ==========================================================================
   MARKET-READY SHELF
   ========================================================================== */
.shelf { padding-bottom: var(--section); background: var(--zinc); }
.shelf__banner { height: clamp(220px, 34vw, 460px); margin-bottom: clamp(56px, 7vw, 96px); overflow: hidden; }
.shelf__banner img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 64%; }

.filters {
  position: relative; display: inline-flex; gap: 4px; max-width: 100%;
  margin-bottom: 28px; padding: 4px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }
.filters__btn {
  position: relative; z-index: 1; flex: none;
  padding: 10px 18px; border: 0; border-radius: 999px; background: none;
  font-size: .9375rem; font-weight: 550; color: var(--ink); white-space: nowrap;
  transition: color .22s var(--ease-in-out), transform 160ms var(--ease-out);
}
.filters__btn:active { transform: scale(.97); }
.filters__btn[aria-pressed="true"] { color: #fff; }
.filters__count { margin-left: 4px; font-stretch: 112%; font-weight: 650; opacity: .62; }
/* one pill that slides to the chosen filter, rather than swapping backgrounds */
.filters__pill {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0;
  width: var(--w, 0); border-radius: 999px; background: var(--dusk);
  transform: translateX(var(--x, 0));
  transition: transform 240ms var(--ease-in-out), width 240ms var(--ease-in-out);
}
.no-pill .filters__btn[aria-pressed="true"] { background: var(--dusk); }

.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 264px), 1fr)); gap: 16px; padding: 0; list-style: none; }
.product {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 22px 22px 22px; border-radius: var(--radius); background: #fff;
  transition: box-shadow .2s var(--ease-out);
}
.product[hidden] { display: none; }
.product.is-in { animation: product-in .32s var(--ease-out) both; animation-delay: calc(var(--k, 0) * 24ms); }
@keyframes product-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.product__spf { font-size: 1.75rem; line-height: 1; color: var(--burnt); }
.product__name { font-size: 1.1875rem; font-weight: 600; letter-spacing: -.012em; line-height: 1.22; }
.product__name a { color: var(--ink); text-decoration: none; }
.product__name a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.product__name a:focus-visible { outline: none; }
.product:focus-within { outline: 2px solid var(--plum); outline-offset: 3px; }
.product__claims { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; }
.product__claims li { padding: 4px 10px; border-radius: 999px; background: var(--zinc); color: var(--muted); font-size: .8125rem; line-height: 1.35; }
.product__flag { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; font-size: .8125rem; font-weight: 600; color: var(--plum-ink); }
.product__flag::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.shelf__more { margin-top: 32px; }

/* ==========================================================================
   BRIEF TO SHELF: seven steps, one per dot
   ========================================================================== */
.process { padding: var(--section) 0; background: var(--white); }
.steps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0 18px; padding: 0; list-style: none; }
.step { position: relative; padding-top: 42px; }
.step__dot { position: absolute; top: 0; left: 0; width: 22px; height: 22px; }
.step__dot svg { width: 100%; height: 100%; }
.step::before { content: ""; position: absolute; top: 11px; left: 32px; right: -8px; height: 1px; background: var(--line); }
.step:last-child::before { display: none; }
.step__num { display: block; font-size: .875rem; color: var(--muted); }
.step h3 { margin-top: 6px; font-size: 1.0625rem; letter-spacing: -.012em; line-height: 1.25; }
.step p { margin-top: 8px; font-size: .9375rem; line-height: 1.5; color: var(--muted); }
/* relay: each dot lands as the line from the last one arrives. Resting states apply instantly;
   only the revealed state carries the timing, so arming never plays backwards */
.js [data-relay] .step__dot { opacity: 0; transform: scale(.5) rotate(-60deg); }
.js [data-relay] .step::before { clip-path: inset(0 100% 0 0); }
.js [data-relay] .step__num { opacity: 0; }
.js [data-relay].is-drawn .step__dot { opacity: 1; transform: none; transition: transform 760ms var(--ease-out) calc(var(--i) * 420ms), opacity 300ms var(--ease-out) calc(var(--i) * 420ms); }
.js [data-relay].is-drawn .step::before { clip-path: inset(0 0 0 0); transition: clip-path 560ms cubic-bezier(.45, 0, .25, 1) calc(var(--i) * 420ms + 220ms); }
.js [data-relay].is-drawn .step__num { opacity: 1; transition: opacity 400ms var(--ease-out) calc(var(--i) * 420ms + 160ms); }

/* ==========================================================================
   MADE IN CHICAGOLAND
   ========================================================================== */
.made { position: relative; padding-bottom: var(--section); background: #E8E5E1; }
.made__media { height: clamp(360px, 52vw, 700px); overflow: hidden; }
.made__media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 60%; }
.made__grid { position: relative; }
.made__copy {
  position: absolute; left: var(--gutter); top: calc(clamp(360px, 52vw, 700px) * -1 + clamp(48px, 7vw, 110px));
  max-width: min(560px, 44%);
}
.made__copy h2 { font-size: var(--fs-h2); }
.made__copy .lede { margin-top: 20px; color: #4E464D; }
.specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); padding-top: clamp(40px, 5vw, 64px); }
.specs__item { position: relative; min-height: 92px; padding: 22px 0 22px 64px; border-top: 1px solid rgba(34, 26, 34, .14); }
/* a monoline icon with one gold sun dot beside each fact, in the same language as the science icons */
.specs__icon { position: absolute; left: 0; top: 22px; width: 44px; height: 44px; color: var(--dusk); }
.specs__item dt { font-size: 1.375rem; font-weight: 620; line-height: 1.15; }
.specs__item dt:not(.num) { letter-spacing: -.012em; }
.specs__item dd { margin-top: 8px; font-size: .9375rem; line-height: 1.5; color: var(--muted); }

/* ==========================================================================
   MISSION
   ========================================================================== */
.mission { position: relative; min-height: clamp(520px, 92vh, 860px); display: flex; align-items: center; overflow: hidden; background: #BFD4E0; }
.mission__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.mission::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(247, 250, 251, .78) 0%, rgba(247, 250, 251, .5) 34%, rgba(247, 250, 251, 0) 58%); }
.mission__inner { position: relative; z-index: 1; }
.mission__kicker { font-size: .9375rem; font-weight: 600; color: var(--plum-ink); }
/* the text keeps to the calm lake and sky on the left; the friends start just past the middle */
.mission__inner > * { max-width: min(600px, 44vw); }
.mission__title { margin-top: 14px; font-size: clamp(2.2rem, 3.9vw, 3.6rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.mission__sub { max-width: 30em; margin-top: 24px; font-size: var(--fs-lede); line-height: 1.5; color: #3E363D; }

/* ==========================================================================
   AWARDS LEDGER
   ========================================================================== */
.awards { padding: var(--section) 0; background: var(--zinc); }
.awards__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.awards__head { position: sticky; top: calc(var(--masthead-h) + 32px); }
.awards__head h2 { font-size: var(--fs-h2); }
.awards__head .lede { margin-top: 18px; }
.awards__quote { margin-top: 36px; padding-left: 20px; border-left: 2px solid var(--gold); }
.awards__quote p { font-size: 1.125rem; line-height: 1.55; }
.awards__quote figcaption { margin-top: 12px; font-size: .875rem; color: var(--muted); }
.ledger { padding: 0; list-style: none; }
.ledger__year { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 20px; padding: 26px 0; border-top: 1px solid var(--line); }
.ledger__year:last-child { border-bottom: 1px solid var(--line); }
.ledger__label { font-size: 1.75rem; line-height: 1; }
.ledger__year ul { display: grid; gap: 18px; padding: 0; list-style: none; }
.ledger strong { display: block; font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
.ledger span { display: block; margin-top: 3px; font-size: .9375rem; line-height: 1.45; color: var(--muted); }

/* ==========================================================================
   PARTNERS
   ========================================================================== */
.partners { padding: var(--section) 0; background: var(--white); }
.logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px 48px; padding: 36px 0; list-style: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.logos img { width: auto; height: var(--h, 48px); }
.partners__story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); margin-top: clamp(40px, 5vw, 64px); }
.partners__origin { font-size: var(--fs-lede); line-height: 1.52; }
.partners__quote blockquote p { font-size: 1.125rem; line-height: 1.55; }
.partners__quote { padding-left: 20px; border-left: 2px solid var(--gold); }
.partners__quote figcaption { margin-top: 12px; font-size: .875rem; color: var(--muted); }

/* ==========================================================================
   LEADERSHIP
   ========================================================================== */
.team { padding: var(--section) 0; background: var(--zinc); }
.people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px clamp(20px, 2.6vw, 36px); padding: 0; list-style: none; }
/* portrait cards: the same corner radius as the product and resource cards */
.person__photo {
  width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 0;
  border-radius: var(--radius); background: #F4F4F3;
  box-shadow: 0 0 0 1px rgba(34, 26, 34, .07);
}
/* ?team=capsule: the previous version, a logo dot stretched upright */
.people--capsule .person__photo { border-radius: 999px; }
/* ?team=circle: the first version, small circles in a gold ring */
.people--circle .person__photo { width: 132px; aspect-ratio: 1; object-position: 50% 12%; box-shadow: 0 0 0 1px var(--zinc), 0 0 0 2px var(--gold); }
.person__name { margin-top: 22px; font-size: 1.25rem; }
.person__role { margin-top: 4px; font-size: .9375rem; font-weight: 550; color: var(--plum-ink); }
.person__bio { margin-top: 10px; font-size: .9375rem; line-height: 1.5; color: var(--muted); }
.team__more { margin-top: 40px; font-weight: 600; }

/* ==========================================================================
   EDUCATION
   ========================================================================== */
.learn { padding: var(--section) 0; background: var(--white); }
.resources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 0; list-style: none; }
.resource { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 28px; border-radius: var(--radius); background: var(--zinc); }
.resource__type { font-size: .8125rem; font-weight: 600; color: var(--plum-ink); }
.resource h3 { font-size: 1.25rem; line-height: 1.25; }
.resource h3 a { color: var(--ink); text-decoration: none; }
.resource h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.resource h3 a:focus-visible { outline: none; }
.resource:focus-within { outline: 2px solid var(--plum); outline-offset: 3px; }
.resource p:last-child { font-size: .9375rem; line-height: 1.5; color: var(--muted); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { padding: var(--section) 0; background: var(--zinc); }
.faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq__grid h2 { font-size: var(--fs-h2); }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-size: 1.1875rem; font-weight: 580; letter-spacing: -.01em;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary svg { flex: none; width: 16px; height: 16px; color: var(--plum); transition: transform .3s var(--ease-out); }
.faq__item[open]:not(.is-closing) summary svg { transform: rotate(45deg); }
.faq__item summary:hover { color: var(--plum-ink); }
.faq__answer { overflow: hidden; }
.faq__answer p { padding-bottom: 24px; max-width: 38em; color: var(--muted); }

/* ==========================================================================
   QUOTE: the second and last sun disc
   ========================================================================== */
.quote { padding: var(--section) 0; background: var(--dusk); color: #fff; }
.quote__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(40px, 6vw, 96px); }
.sun--small { max-width: 500px; margin: 0 auto; }
/* the closing disc: a blank tube at sunrise. Its label runs up the tube, as sunscreen tubes are often
   printed, and multiplies onto the white so it takes the tube's own shading like real print */
.launch { container-type: inline-size; }
.launch__label {
  position: absolute; left: var(--lx, 49.9%); top: var(--ly, 45%); width: var(--lw, 38%);
  display: grid; justify-items: center; gap: .6cqw; margin: 0;
  transform: translate(-50%, -50%) rotate(-90deg);
  color: #2B2326; mix-blend-mode: multiply; text-align: center; pointer-events: none;
}
.launch__brand { max-width: 100%; overflow: hidden; white-space: nowrap; font-size: 6cqw; font-weight: 650; letter-spacing: -.015em; line-height: 1; }
.launch__line { font-size: 2.1cqw; font-weight: 550; letter-spacing: .06em; opacity: .7; }
.launch__hint { margin-top: 18px; text-align: center; font-size: .875rem; color: var(--lilac); }
.quote__body h2 { font-size: var(--fs-h2); }
.quote .lede { margin-top: 18px; color: var(--lilac); }
.form { display: grid; gap: 16px; margin-top: 32px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: grid; gap: 8px; }
.field label { font-size: .9375rem; font-weight: 550; color: #fff; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px;
  background: rgba(255, 255, 255, .06); color: #fff; font-size: 1rem;
  transition: border-color .18s, background-color .18s;
}
.field textarea { min-height: 120px; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--lilac) 50%), linear-gradient(135deg, var(--lilac) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.field select option { color: var(--ink); }
.field :is(input, select, textarea):hover { border-color: rgba(255, 255, 255, .34); }
.field :is(input, select, textarea):focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; border-color: transparent; background: rgba(255, 255, 255, .1); }
.field [aria-invalid="true"] { border-color: #F2A38B; }
.field__error { font-size: .875rem; color: #F2A38B; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 8px; }
.form__note { font-size: .875rem; color: var(--lilac); }
.form__done { padding: 16px 18px; border-radius: 12px; background: rgba(212, 175, 50, .12); color: #fff; }
.form__done a { color: var(--gold); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { padding: clamp(64px, 8vw, 96px) 0 40px; background: var(--dusk-deep); color: var(--lilac); font-size: .9375rem; --logo-word: #fff; }
.footer a { color: #fff; text-decoration: none; }
.footer a:hover { color: var(--gold); text-decoration: underline; }
.footer__top { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 2.1fr); gap: clamp(32px, 6vw, 96px); }
.footer__logo { width: 172px; height: auto; aspect-ratio: 1817 / 422; overflow: visible; }
.footer__line { margin-top: 20px; color: #fff; }
.footer__addr { margin-top: 14px; line-height: 1.55; }
.footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.footer__h { margin-bottom: 14px; font-size: .8125rem; font-weight: 600; letter-spacing: .01em; color: var(--lilac); }
.footer__cols ul { display: grid; gap: 10px; padding: 0; list-style: none; }
.footer__members { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 36px; margin-top: 56px; padding: 28px 0; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.footer__members-label { font-size: .8125rem; }
.footer__members ul { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; padding: 0; list-style: none; }
.footer__members img { width: auto; height: var(--h, 32px); }
.footer__legal { margin-top: 28px; display: grid; gap: 16px; }
.footer__legal-links { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0; list-style: none; }
.footer__cookie-btn { padding: 0; border: 0; background: none; color: #fff; font-size: inherit; text-decoration: underline; text-underline-offset: .2em; }
.footer__cookie-btn:hover { color: var(--gold); }
.footer__concept { max-width: 64em; font-size: .8125rem; line-height: 1.6; }
.footer__concept strong { color: #fff; }
.footer__copy { font-size: .8125rem; }

/* ==========================================================================
   COOKIE CONSENT (from the skill's GDPR banner, on this palette)
   ========================================================================== */
.consent {
  position: fixed; right: clamp(16px, 2.5vw, 32px); bottom: clamp(16px, 2.5vw, 32px); z-index: 90;
  width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 22px 24px; border-radius: 18px; background: #fff; color: var(--ink);
  box-shadow: 0 0 0 1px rgba(43, 26, 44, .08), 0 28px 56px -24px rgba(43, 26, 44, .55);
  opacity: 0; transform: translateY(16px) scale(.97); transform-origin: 100% 100%;
  transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out);
}
.consent[hidden] { display: none; }
.consent.is-open { opacity: 1; transform: none; transition: opacity 320ms var(--ease-out), transform 560ms var(--ease-drawer); }
.consent.is-leaving { opacity: 0; transform: translateY(40px); transition: opacity 440ms cubic-bezier(.4, 0, .2, 1), transform 560ms cubic-bezier(.4, 0, .2, 1); }
.consent__head, .consent__text, .consent__manage, .consent__actions { opacity: 0; transform: translateY(8px); }
.consent.is-open :is(.consent__head, .consent__text, .consent__manage, .consent__actions),
.consent.is-leaving :is(.consent__head, .consent__text, .consent__manage, .consent__actions) { opacity: 1; transform: none; }
.consent.is-open :is(.consent__head, .consent__text, .consent__manage, .consent__actions) {
  transition: opacity 360ms var(--ease-out) calc(90ms + var(--i, 0) * 50ms), transform 480ms var(--ease-out) calc(90ms + var(--i, 0) * 50ms);
}
.consent__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
/* the seven dots turn a little into place, the way the loader's sun rises */
.consent__mark { flex: none; width: 26px; height: 26px; opacity: 0; transform: rotate(-40deg) scale(.6); }
.consent.is-open .consent__mark, .consent.is-leaving .consent__mark { opacity: 1; transform: none; }
.consent.is-open .consent__mark { transition: transform 720ms var(--ease-out) 150ms, opacity 280ms var(--ease-out) 150ms; }
.consent__title { font-size: 1.25rem; font-weight: 600; letter-spacing: -.015em; }
.consent__title:focus { outline: none; }
.consent__close { display: none; position: relative; flex: none; width: 36px; height: 36px; margin: -6px -10px -6px auto; border: 0; border-radius: 50%; background: none; color: var(--muted); transition: background-color .2s, color .2s, transform 160ms var(--ease-out); }
.consent.can-dismiss .consent__close { display: block; }
.consent__close:active { transform: scale(.92); }
.consent__close span, .consent__close span::before { position: absolute; left: 11px; top: 17px; width: 14px; height: 1.5px; background: currentColor; transform: rotate(45deg); }
.consent__close span::before { content: ""; left: 0; top: 0; transform: rotate(90deg); }
.consent__text { font-size: .9375rem; line-height: 1.55; color: #4A4249; }
.consent__manage { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 8px 0; border: 0; background: none; font-size: .9375rem; font-weight: 550; color: var(--plum-ink); transition: color .2s; }
.consent__manage svg { width: 12px; height: 12px; transition: transform 260ms var(--ease-in-out); }
.consent.is-expanded .consent__manage svg { transform: rotate(180deg); }
.consent__prefs { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 240ms var(--ease-in-out); }
.consent.is-expanded .consent__prefs { grid-template-rows: 1fr; transition-duration: 380ms; }
.consent__prefs-inner { min-height: 0; overflow: hidden; margin: 0 -4px; padding: 0 4px; }
.consent__row, .consent__save { opacity: 0; transform: translateY(6px); transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out); }
.consent.is-expanded :is(.consent__row, .consent__save) { opacity: 1; transform: none; transition: opacity 300ms var(--ease-out) calc(70ms + var(--i, 0) * 40ms), transform 420ms var(--ease-out) calc(70ms + var(--i, 0) * 40ms); }
.consent__row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.consent__label { font-size: 1rem; font-weight: 550; }
label.consent__label { cursor: pointer; }
.consent__row p { grid-column: 1 / -1; font-size: .875rem; line-height: 1.5; color: var(--muted); }
.consent__always { font-size: .875rem; font-weight: 600; color: var(--plum-ink); }
.consent__save { padding: 6px 0 4px; }
.consent__switch { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 44px; height: 26px; margin: 0; border-radius: 13px; background: #CFC8CE; cursor: pointer; transition: background-color 200ms var(--ease-out); }
.consent__switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(43, 26, 44, .3); transition: transform 220ms var(--ease-out), width 160ms var(--ease-out); }
.consent__switch:checked { background: var(--dusk); }
.consent__switch:checked::before { transform: translateX(18px); }
.consent__switch:active::before { width: 24px; }
.consent__switch:checked:active::before { transform: translateX(14px); }
.consent__switch:focus-visible { outline-offset: 2px; border-radius: 13px; }
.consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.consent__actions .btn { min-height: 46px; padding: 10px 14px; }

/* ==========================================================================
   HOVER (fine pointers only)
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  .product:hover { box-shadow: 0 0 0 1px var(--line), var(--shadow); }
  .product:hover .product__name a { color: var(--plum-ink); }
  .resource:hover h3 a { color: var(--plum-ink); }
  .consent__manage:hover { color: var(--plum); }
  .consent__close:hover { background: var(--zinc); color: var(--ink); }
  .mobile-nav__close:hover { background: rgba(255, 255, 255, .08); }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1180px) {
  .nav, .masthead__cta { display: none; }
  .menu-toggle { display: inline-flex; }
  .tech { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: 1fr; gap: 0; max-width: 640px; }
  .step { padding: 0 0 28px 48px; }
  .step__dot { top: 2px; }
  .step::before { top: 30px; bottom: 0; left: 11px; right: auto; width: 1px; height: auto; }
  .js [data-relay] .step::before { clip-path: inset(0 0 100% 0); }
  .step__num { display: none; }
  .step h3 { margin-top: 0; font-size: 1.1875rem; }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .section-head--split { grid-template-columns: 1fr; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { max-width: 560px; }
  .sun { margin: 0 auto; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }

  /* phones and tablets: the swatch no longer pins; it clears as it passes through the view */
  .clear__grid { grid-template-columns: 1fr; row-gap: 28px; }
  /* headline first, then the photo, then the steps */
  .clear__copy { display: contents; }
  .clear__title { order: -1; }
  .clear__steps { order: 1; margin-top: 0; }
  .clear__figure { position: static; }
  .clear__frame, .clear__caption { width: min(100%, 460px); }
  .clear__step { min-height: 0; padding: 26px 0; opacity: 1; }
  .clear__steps { margin-top: 8px; }

  .paths__list { grid-template-columns: 1fr; border-top: 0; }
  .path, .path:first-child { padding: 28px 0; border-left: 0; border-top: 1px solid var(--line); }
  .compare__hint { display: block; }

  .made__copy { position: static; max-width: none; padding-top: clamp(40px, 6vw, 64px); }
  .made__media { height: clamp(260px, 60vw, 460px); }
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .mission { min-height: 0; flex-direction: column; align-items: stretch; background: var(--zinc); }
  .mission__img { position: static; height: clamp(300px, 64vw, 520px); object-position: 74% 50%; }
  .mission::after { display: none; }
  .mission__inner { padding-top: clamp(40px, 6vw, 64px); padding-bottom: var(--section); }
  .mission__inner > * { max-width: 36rem; }

  .awards__grid, .faq__grid, .quote__grid { grid-template-columns: 1fr; }
  .awards__head { position: static; }
  .partners__story { grid-template-columns: 1fr; }
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; max-width: 640px; }
  .resources { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  :root { --masthead-h: 64px; --fs-body: 1.0625rem; }
  .utility__note, .utility__links li:nth-child(2), .utility__links li:nth-child(3) { display: none; }
  .utility__inner { justify-content: flex-end; }
  .brand__logo { width: 140px; }
  .is-scrolled .brand__logo { width: 132px; }
  .hero__actions .btn { flex: 1 1 100%; }
  /* the product card leaves the disc and sits under it */
  .spotlight { position: relative; left: auto; bottom: auto; width: 100%; margin-top: -8px; }
  .tech { grid-template-columns: 1fr; }
  .spectrum__zones span { font-size: .8125rem; }
  .spectrum__bracket { font-size: .8125rem; }
  .spectrum__bracket:first-of-type span { white-space: normal; }
  .form__row { grid-template-columns: 1fr; }
  /* a narrower feature column, so two paths show beside it on phones */
  .compare__table { min-width: 600px; font-size: .9375rem; }
  .compare__table th, .compare__table td { padding: 12px 14px; }
  .compare__table tbody th, .compare__table thead th:first-child { width: 152px; min-width: 152px; }
  .ledger__year { grid-template-columns: 1fr; gap: 12px; }
  .specs { grid-template-columns: 1fr; }
  .logos { justify-content: flex-start; gap: 28px 36px; }
  .logos img { height: calc(var(--h, 48px) * .8); }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .consent {
    left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: auto;
    max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
    padding: 18px 20px 20px; transform: translateY(calc(100% + 24px)); transform-origin: 50% 100%;
    transition: opacity 260ms var(--ease-out), transform 300ms var(--ease-out);
  }
  .consent.is-leaving { transform: translateY(calc(100% + 24px)); }
}

@media (max-width: 420px) {
  .facts { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
  .people { gap: 32px 16px; }
  .person__name { margin-top: 16px; font-size: 1.125rem; }
  .person__role, .person__bio { font-size: .875rem; }
}

/* ==========================================================================
   REDUCED MOTION: gentler, not zero. Fades stay; nothing travels
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mobile-nav, .mobile-nav.is-open { transition: opacity .3s, visibility 0s linear .3s; clip-path: none; opacity: 0; }
  .mobile-nav.is-open { opacity: 1; transition: opacity .3s, visibility 0s; }
  .mobile-nav :is(.mobile-nav__list li, .mobile-nav__foot) { transform: none !important; }
  .compare__cue svg { animation: none; }
  .js [data-relay] .step__dot { transform: none; }
  .product.is-in { animation-name: product-fade; }
  @keyframes product-fade { from { opacity: 0; } to { opacity: 1; } }
  .consent, .consent :is(.consent__head, .consent__text, .consent__manage, .consent__actions, .consent__mark, .consent__row, .consent__save) { transform: none !important; }
  .consent__prefs, .consent.is-expanded .consent__prefs { transition: none; }
}

/* ==========================================================================
   AWARDS STRIP: every win since 2022, under the facts row, linked to the ledger
   The badges keep the colours each program issued them in: one ink would leave some unreadable
   and misrepresent the marks. One size, one baseline and even spacing make them read as a row.
   Nothing moves, so there's nothing to pause.
   ========================================================================== */
.honors { padding-top: clamp(40px, 4vw, 56px); }
/* on the facts row's four columns: the words under the first fact, one badge under each of the others */
.honors__inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: center; }
.honors__head { display: grid; justify-items: start; gap: 6px; }
.honors__title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.honors__link { font-size: .9375rem; font-weight: 600; }
.honors__list { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 0; list-style: none; }
.honors__item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; }
.honors__item img { width: clamp(76px, 7vw, 100px); height: auto; aspect-ratio: 1; }
.honors__caption { font-size: .875rem; line-height: 1.4; color: var(--muted); }
.honors__caption strong { display: block; margin-bottom: 2px; font-size: .9375rem; font-weight: 600; color: var(--ink); }

@media (max-width: 960px) {
  .honors__inner { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .honors__head { grid-auto-flow: column; justify-content: space-between; align-items: baseline; gap: 16px; }
  .honors__list { grid-column: auto; }
}
@media (max-width: 720px) {
  .honors__head { grid-auto-flow: row; justify-content: start; gap: 4px; }
  /* one award a row on phones: badge beside its caption */
  .honors__list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .honors__item img { width: 76px; }
}