/* Simlate landing page. Colours, type and controls are the landing's own (the previous page's values, measured):
   #FAFAFA ground, #1B1B1B ink, warm stone panels, 6px ink buttons, the floating dark bar, a dark close.
   3D only explains the feed and the flow of a test; result UI stays flat. Benchmark for clarity: aaru.com. */

.sl {
  --ink: #1B1B1B; --ink-2: #5F5C57; --ink-3: #8D8A84;
  --ground: #FAFAFA; --sheet: #FFFFFF; --panel: #EEECE8; --panel-edge: #E3E0DA; --rule: #DAD7D1; --on-ink: #F7F5F2;
  /* Animation stages only (ivory, terracotta, sage), from the illustration references. */
  --ivory: #F6F1E9; --terra: #A9583A; --terra-soft: #F0DCD1; --sage: #5F7A5A; --sage-soft: #DFE7DA; --sand: #EADFCE;
  /* Graphics only: a warm serif with one job, the words a simulated shopper says. Everything else stays Geist. */
  --voice: "Fraunces", Georgia, serif;
  --dark: #1B1B1B; --darker: #131313; --on-dark: #F7F5F2; --on-dark-2: #C4C0BB; --on-dark-3: #E9E7E3; --on-dark-edge: #444444;
  --out: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: clamp(20px, 5vw, 72px);
  --z-copy: 2; --z-header: 30; --z-skip: 40;
  background: var(--ground); color: var(--ink);
  font-family: "Geist", "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.5;
  overflow-x: clip; -webkit-font-smoothing: antialiased;
}
.sl *, .sl *::before, .sl *::after { box-sizing: border-box; }
:where(.sl) a { color: inherit; text-decoration: none; }
/* Zero-specificity reset, so every component's own spacing wins over it. */
:where(.sl) :where(h1, h2, h3, p, ol, figure, blockquote, dl, dd) { margin: 0; padding: 0; }
:where(.sl) ol { list-style: none; }
:where(.sl) button { font: inherit; }
.sl h1, .sl h2, .sl h3 { color: inherit !important; text-wrap: balance; }
.sl h1 { font-weight: 700 !important; }
.sl h2 { font-weight: 400 !important; }
.sl h3 { font-weight: 500 !important; }
.sl p { text-wrap: pretty; }
.sl [data-tone="dark"], .sl-header.on-dark { --ui-accent: #FFFFFF; color: var(--on-dark); }
.sl :focus-visible { outline: 2px solid var(--ui-accent, var(--ink)) !important; outline-offset: 3px !important; border-radius: 6px; }
.sl-skip { position: fixed; left: 16px; top: -60px; z-index: var(--z-skip); padding: 10px 16px; border-radius: 6px; background: var(--ink); color: var(--on-ink) !important; transition: top 200ms var(--out); }
.sl-skip:focus { top: 12px; }

/* ------------------------------------------------------------ shared controls */
.sl-arrow { width: 15px; height: 15px; flex: none; transition: transform 300ms var(--out); }
.sl-pill {
  display: inline-flex; align-items: center; gap: 14px; height: 40px; padding: 0 16px; border-radius: 6px;
  background: var(--ink); color: var(--on-ink); font-size: 14px; font-weight: 400; letter-spacing: -0.03em; white-space: nowrap;
  transition: background-color 200ms ease, transform 160ms var(--out);
}
.sl-pill-light { background: #fff; color: var(--ink); }
.sl-pill-small { height: 40px; }
.sl-pill:active { transform: scale(0.97); }
.sl-underline { font-size: 14px; color: var(--ink-2); text-decoration: underline !important; text-decoration-color: var(--rule) !important; text-underline-offset: 5px; transition: text-decoration-color 200ms ease; }
[data-tone="dark"] .sl-underline { color: var(--on-dark-2); text-decoration-color: var(--on-dark-edge) !important; }
@media (hover: hover) and (pointer: fine) {
  .sl-pill:hover { background: #333333; }
  .sl-pill-light:hover { background: var(--panel); }
  .sl-underline:hover { color: var(--ink); }
  [data-tone="dark"] .sl-underline:hover { color: var(--on-dark); }
  .sl-pill:hover .sl-arrow { transform: translate(2px, -2px); }
  .sl-underline:hover { text-decoration-color: currentColor !important; }
}

.sl-thumb {
  position: relative; display: inline-block; flex: none; width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden;
  background-color: var(--panel-edge); background-size: var(--z) auto; background-position: var(--fx) var(--fy); background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(27, 27, 27, 0.08);
}
.sl-thumb.tone-mono { filter: grayscale(1) contrast(1.08); }
.sl-thumb.tone-warm { filter: saturate(1.25) sepia(0.15); }
.sl-thumb.tone-band::after { content: ""; position: absolute; inset: 64% 0 0; background: var(--ink); }
.sl-thumb.tone-light::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 45%, rgba(250, 250, 250, 0.85)); }
.sl-avatar { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--panel-edge); color: var(--ink); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ header: the landing's floating dark bar */
.sl-header {
  position: fixed; top: 20px; left: 50%; z-index: var(--z-header); transform: translateX(-50%);
  width: min(940px, calc(100% - 40px)); height: 60px; padding: 0 10px 0 22px; border-radius: 14px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  background: var(--dark); color: var(--on-dark); --ui-accent: #FFFFFF;
}
.sl-wordmark { display: inline-flex; align-items: center; gap: 10px; justify-self: start; white-space: nowrap; font-size: 27px; font-weight: 700; letter-spacing: -0.05em; line-height: 1; color: #fff; }
.sl-mark { position: relative; display: block; width: 28px; height: 28px; transform: rotate(-32deg); }
.sl-mark i { position: absolute; inset: 0 8px; border: 1px solid currentColor; border-radius: 50%; }
.sl-mark i:nth-child(2) { transform: rotate(60deg); }
.sl-mark i:nth-child(3) { transform: rotate(120deg); }
.sl-nav { display: flex; gap: 2px; }
.sl-nav a { padding: 10px 14px; border-radius: 7px; font-size: 14px; letter-spacing: -0.04em; color: var(--on-dark); transition: background-color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .sl-nav a:hover { background: rgba(255, 255, 255, 0.08); } }
.sl-header-actions { display: flex; align-items: center; gap: 18px; justify-self: end; }
.sl-quiet { font-size: 14px; color: var(--on-dark-2); transition: color 200ms ease; }
.sl-quiet:hover { color: var(--on-dark); }
.sl-header .sl-pill { background: #fff; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .sl-header .sl-pill:hover { background: var(--panel); } }

/* ------------------------------------------------------------ hero */
.sl-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 32px clamp(32px, 4vw, 64px); min-height: max(720px, 100svh); padding: 112px var(--gutter) 56px; background: var(--ground); color: var(--ink); }
.sl-hero-inner { max-width: 560px; }
.sl-hero h1 { font-size: clamp(2.4rem, 1.4rem + 2.6vw, 3.9rem); line-height: 1.02; letter-spacing: -0.04em !important; }
.sl-hero-copy { margin-top: 24px !important; max-width: 52ch; font-size: clamp(16px, 0.9rem + 0.25vw, 18px); line-height: 1.55; color: var(--ink-2); }
.sl-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 32px; }
.sl-hero-note { margin-top: 28px !important; max-width: 46ch; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.sl-hero-visual { min-width: 0; }

/* Fixed-size stages scaled to fit their column. */
.sl-fit { position: relative; width: 100%; }
.sl-fit-inner { position: absolute; left: 50%; top: 0; transform-origin: top center; translate: -50% 0; }

/* Inside the feed: three phones on an ivory stage. */
.sl-trio { padding: 20px 16px 16px; border-radius: 14px; background: var(--ivory); }
.sl-trio-row { display: flex; justify-content: center; gap: 34px; perspective: 1600px; padding-top: 0; }
.sl-phone-slot { display: grid; justify-items: center; margin: 0; transform: rotateY(var(--tilt)); }
.sl-phone-slot figcaption { display: grid; justify-items: center; gap: 10px; margin-top: 6px; }
.ph { position: relative; z-index: 1; width: 230px; height: 470px; padding: 8px; border-radius: 40px; background: #1B1B1B; box-shadow: inset 0 0 0 1.5px #3A3A3A; }
.ph-shadow { width: 190px; height: 18px; margin-top: -8px; border-radius: 50%; background: rgba(90, 62, 40, 0.22); filter: blur(9px); }
.ph-screen { position: relative; width: 214px; height: 454px; border-radius: 32px; overflow: hidden; background: #FFFFFF; color: var(--ink); text-align: left; }
.ph-status { position: absolute; z-index: 3; inset: 0 0 auto; height: 26px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; background: #FFFFFF; font-size: 12px; font-weight: 600; }
.ph-island { position: absolute; left: 50%; top: 5px; width: 64px; height: 18px; margin-left: -32px; border-radius: 999px; background: #1B1B1B; }
.ph-batt { width: 18px; height: 9px; border-radius: 3px; background: #1B1B1B; }
.ph-pages { position: absolute; inset: 26px 0 0; overflow: hidden; }
.ph-page { position: absolute; inset: 0; display: flex; flex-direction: column; background: #FFFFFF; transform: translateX(100%); transition: transform 450ms var(--out); }
.at-feed .ph-feed, .at-product .ph-product, .at-checkout .ph-checkout, .at-done .ph-done { transform: none; }
.at-product .ph-feed, .at-checkout :is(.ph-feed, .ph-product), .at-done :is(.ph-feed, .ph-product, .ph-checkout) { transform: translateX(-30%); }
.ph-app { position: relative; z-index: 2; background: #FFFFFF; flex: none; height: 36px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border-bottom: 1px solid var(--panel); font-size: 15px; }
.ph-app b { font-weight: 700; }
.ph-app span:last-child { width: 14px; height: 14px; border-radius: 4px; background: var(--panel); }
.ph-feed .ph-app span:last-child { border-radius: 50%; }
.ph-feed { overflow: hidden; }
.ph-scroll { position: absolute; left: 0; right: 0; top: 36px; will-change: transform; }

/* Feed posts: fixed heights, so the scroll positions are exact. */
.fp { height: 306px; }
.fp-ad { height: 338px; }
.fp-head { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 10px; }
.fp-head b { display: block; font-size: 14px; font-weight: 600; }
.fp-head small { display: block; font-size: 12px; color: var(--ink-2); }
.fp-av { width: 24px; height: 24px; border-radius: 50%; flex: none; }
.fp-photo { height: 214px; overflow: hidden; }
.fp-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stone { background: var(--panel); } .ink { background: var(--ink); color: var(--on-ink); } .sage { background: var(--sage-soft); }
.sand { background: var(--sand); } .terra { background: var(--terra-soft); }
.fp-creative { position: relative; height: 214px; background-size: 165% auto; background-position: 52% 50%; }
.fp-creative::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(to bottom, rgba(27, 27, 27, 0), rgba(27, 27, 27, 0.7)); }
.fp-creative span { position: absolute; z-index: 1; left: 0; right: 0; bottom: 18px; color: #FFFFFF; font-size: 19px; font-weight: 600; text-align: center; letter-spacing: -0.01em; }
.fp-shop { height: 32px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; background: var(--terra); color: #FFFFFF; font-size: 14px; font-weight: 600; transition: background-color 150ms ease, transform 150ms var(--out); }
.fp-shop.pressed, .pp-buy.pressed, .co-place.pressed { background: #7E3F28; transform: scale(0.97); }
.fp-actions { height: 28px; display: flex; align-items: center; gap: 10px; padding: 0 10px; }
.fp-actions i { width: 13px; height: 13px; border: 1.5px solid var(--ink); border-radius: 50%; }
.fp-actions i:nth-child(2) { border-radius: 4px; }
.fp-cap { height: 24px; padding: 0 10px; overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.fp-cap b { font-weight: 600; margin-right: 3px; }

/* Product, checkout and confirmation screens for the shopper who buys. */
.pp-img { flex: none; height: 200px; background-size: cover; background-position: center 40%; }
.pp-body { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 12px 12px 20px; }
.pp-body b { font-size: 16px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.pp-body small { font-size: 13px; color: var(--ink-2); }
.pp-price { margin-top: 4px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pp-ingredients { margin-top: 8px !important; padding: 8px; border-radius: 8px; background: var(--sage-soft); font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.pp-ingredients b { display: block; color: var(--ink); font-weight: 600; }
.pp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.pp-actions span { display: grid; place-items: center; height: 36px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.pp-ghost { background: var(--panel); }
.pp-buy, .co-place { background: var(--terra); color: #FFFFFF; transition: background-color 150ms ease, transform 150ms var(--out); }
.co-item { display: flex; align-items: center; gap: 10px; margin: 14px 12px 8px; padding: 10px; border-radius: 10px; background: var(--ivory); font-size: 13px; }
.co-item i { width: 40px; height: 40px; flex: none; border-radius: 8px; background-size: cover; background-position: center 40%; }
.co-item b { display: block; font-size: 15px; font-weight: 600; }
.co-item small { color: var(--ink-2); }
.co-item > span { margin-left: auto; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.co-rows { margin: 0 12px; }
.co-rows div { display: flex; justify-content: space-between; padding: 9px 2px; border-bottom: 1px solid var(--panel); font-size: 14px; }
.co-rows dt { color: var(--ink-2); }
.co-rows dd { margin: 0; font-weight: 500; }
.co-total { font-size: 15px !important; font-weight: 700; }
.co-total dd { font-weight: 700 !important; }
.co-place { display: grid; place-items: center; height: 38px; margin: auto 12px 20px; border-radius: 10px; font-size: 15px; font-weight: 600; }
.ph-done { align-items: center; justify-content: center; gap: 8px; padding: 0 24px; text-align: center; }
.done-check { position: relative; width: 56px; height: 56px; margin-bottom: 6px; border-radius: 50%; background: var(--sage); }
.done-check::after { content: ""; position: absolute; left: 20px; top: 15px; width: 12px; height: 22px; border: solid #FFFFFF; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.ph-done b { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.ph-done small { font-size: 14px; line-height: 1.4; color: var(--ink-2); }

/* Simulated pointer: a soft disc that presses and ripples. */
.ph-pointer { position: absolute; z-index: 5; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; background: rgba(27, 27, 27, 0.26); box-shadow: 0 0 0 2px #FFFFFF, 0 4px 12px rgba(27, 27, 27, 0.25); transition: scale 120ms var(--out), background-color 120ms ease; }
.ph-pointer.press { scale: 0.8; background: rgba(27, 27, 27, 0.5); }
.ph-pointer.press::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(27, 27, 27, 0.35); animation: sl-ripple 450ms var(--out) forwards; }
@keyframes sl-ripple { from { transform: scale(0.6); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }

/* What each shopper did, and who they are. */
.sl-outcome { display: inline-block; padding: 7px 14px; border-radius: 8px; background: var(--sheet); color: var(--ink-2); font-size: 14px; font-weight: 500; white-space: nowrap; box-shadow: 0 0 0 1px var(--panel-edge); opacity: 0; transform: translateY(6px); font-size: 15px; transition: opacity 350ms var(--out), transform 350ms var(--out), background-color 300ms ease; }
.sl-outcome.on { opacity: 1; transform: none; }
.sl-outcome.is-click { background: var(--sage); color: #FFFFFF; box-shadow: none; }
.sl-outcome.is-buy { background: var(--terra); color: #FFFFFF; box-shadow: none; }
.sl-persona { display: flex; align-items: center; gap: 10px; width: 236px; color: var(--ink); white-space: nowrap; }
.sl-persona b { display: block; font-size: 16px; font-weight: 600; line-height: 1.25; }
.sl-persona small { display: block; font-size: 14px; line-height: 1.3; color: var(--ink-2); }
.sl-persona .sl-avatar-img { width: 34px; height: 34px; }
.sl-persona-av { position: relative; width: 26px; height: 26px; border-radius: 50%; background: var(--sheet); box-shadow: 0 0 0 1px var(--panel-edge); overflow: hidden; flex: none; }
.sl-persona-av::before { content: ""; position: absolute; left: 50%; top: 5px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--ink-3); }
.sl-persona-av::after { content: ""; position: absolute; left: 50%; top: 15px; width: 18px; height: 14px; margin-left: -9px; border-radius: 50% 50% 0 0; background: var(--ink-3); }
.sl-avatar-img { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--sheet); box-shadow: 0 0 0 1px var(--panel-edge); }
/* What each shopper said, as a comment, and the four signals the simulation scored. */
.sl-react { display: grid; gap: 10px; width: 236px; margin-top: 4px; text-align: left; }
.sl-said { position: relative; min-height: 84px; padding: 12px 14px; border-radius: 14px; background: var(--sheet); font-family: var(--voice); font-size: 20px; font-weight: 400; line-height: 1.25; letter-spacing: 0; font-variation-settings: "opsz" 24; color: var(--ink); box-shadow: 0 0 0 1px var(--panel-edge), 0 10px 22px -16px rgba(90, 62, 40, 0.5); transition: background-color 300ms ease, box-shadow 300ms ease; }
.sl-said::before { content: ""; position: absolute; left: 22px; top: -6px; width: 12px; height: 12px; background: inherit; transform: rotate(45deg); box-shadow: -1px -1px 0 0 var(--panel-edge); }
.sl-react:not(.on) .sl-said { background: rgba(255, 255, 255, 0.5); box-shadow: inset 0 0 0 1px var(--panel-edge); }
.sl-react:not(.on) .sl-said::before { background: transparent; box-shadow: none; }
.sl-react.is-click.on .sl-said { background: var(--sage-soft); box-shadow: none; }
.sl-react.is-buy.on .sl-said { background: var(--terra-soft); box-shadow: none; }
.sl-said-wait { font-style: italic; font-size: 18px; color: var(--ink-2); }
.sl-signals { display: grid; gap: 8px; margin: 0; padding: 0 2px; }
.sl-signals div { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 8px; }
.sl-signals dt { font-size: 14px; color: var(--ink-2); }
.sl-signals dd { display: grid; grid-template-columns: minmax(0, 1fr) 30px; align-items: center; gap: 6px; margin: 0; }
.sl-signals dd span { height: 8px; border-radius: 999px; background: rgba(27, 27, 27, 0.08); overflow: hidden; }
.sl-signals dd i { display: block; height: 100%; border-radius: inherit; background: var(--ink-3); transform-origin: left; }
.sl-react.is-click .sl-signals dd i { background: var(--sage); }
.sl-react.is-buy .sl-signals dd i { background: var(--terra); }
.sl-signals dd b { font-size: 15px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.sl-seen { min-height: 20px; padding: 0 2px; font-size: 14px; color: var(--ink-2); }
.sl-caret { display: inline-block; width: 6px; height: 13px; margin-left: 2px; vertical-align: -1px; background: var(--ink); animation: sl-blink 0.8s steps(1) infinite; }
@keyframes sl-blink { 50% { opacity: 0; } }
.sl-trio-note { margin-top: 10px !important; font-size: 16px; line-height: 1.5; text-align: center; color: var(--ink-2); }
.sl-trio-note b { color: var(--ink); font-weight: 600; }
.sl-trio-note span { display: block; margin-top: 2px; font-size: 14px; color: var(--ink-2); }
.sl-trio-tabs { display: flex; justify-content: center; gap: 6px; margin-bottom: 16px; }
.sl-trio-tabs button { height: 34px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 6px; background: var(--sheet); color: var(--ink); font-size: 13px; font-weight: 500; cursor: pointer; }
.sl-trio-tabs button.on { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

/* ------------------------------------------------------------ sections on the ground */
.sl-section { padding: clamp(96px, 12vw, 168px) var(--gutter); }
.sl-section > * { max-width: 1240px; margin-left: auto; margin-right: auto; }
.sl-section h2 { font-size: clamp(2rem, 1.15rem + 2.6vw, 3.4rem); line-height: 1.08; letter-spacing: -0.025em !important; }
.sl-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 64px; align-items: end; margin-bottom: 48px; }
.sl-head p { font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 50ch; }
.sl-note { margin-top: 18px !important; font-size: 13px; color: var(--ink-2); }
.sl-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* What you learn */
.sl-value h2 > span { display: block; max-width: 18ch; }
.sl-value-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; margin-top: 56px; }
.sl-value-item { padding-top: 20px; border-top: 2px solid var(--ink); }
.sl-value-item h3 { font-size: 20px; line-height: 1.2; letter-spacing: -0.02em !important; }
.sl-value-item p { margin-top: 10px !important; font-size: 16px; line-height: 1.55; color: var(--ink-2); }

/* How it works */
.sl-how { background: var(--panel); }
.sl-how-title { max-width: 20ch; margin: 0 0 56px !important; }
/* The track sets how far the pinned block scrolls: one screen plus about two thirds of a screen per step. */
.sl-pipe-track { height: calc(100vh + 5 * 65vh); }
.sl-pipe { position: sticky; top: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(40px, 6vw, 96px); height: 100vh; padding: 88px 0 24px; }
.sl-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); padding: 20px 0; border-top: 1px solid var(--rule); opacity: 0.4; transition: opacity 500ms var(--out); }
.sl-step:last-child { border-bottom: 1px solid var(--rule); }
.sl-step.on { opacity: 1; }
.sl-step h3 button { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
.sl-step-copy { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 500ms var(--out); }
.sl-step-copy > p { min-height: 0; overflow: hidden; }
.sl-step.on .sl-step-copy { grid-template-rows: 1fr; }
.sl-step-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sl-step h3 { font-size: clamp(1.3rem, 1rem + 0.8vw, 1.75rem); line-height: 1.15; letter-spacing: -0.02em !important; }
.sl-step p { margin-top: 10px !important; max-width: 44ch; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.sl-step-visual { display: none; }
.sl-pipe-stage { position: relative; }
.sl-pipe-frame { min-height: 570px; border: 1px solid var(--panel-edge); border-radius: 10px; background: var(--sheet); overflow: hidden; }
.sl-pipe-bar { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 20px; }
.sl-pipe-bar b { font-size: 14px; font-weight: 600; }
.sl-pipe-bar small { margin-left: auto; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sl-pipe-progress { height: 2px; background: var(--panel); }
.sl-pipe-progress i { display: block; height: 100%; background: var(--ink); transform-origin: left; transition: transform 160ms linear; }
.sl-pipe-view { padding: 24px; }

/* Interface views inside the steps: each row arrives in turn. */
.sv { display: grid; gap: 10px; }
.sv > *, .sv-tally > * { animation: sl-swap 650ms var(--out) both; animation-delay: calc(var(--i, 0) * 70ms); }
.sv-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--panel-edge); border-radius: 8px; background: var(--sheet); font-size: 14px; }
.sv-row b { font-weight: 500; }
.sv-row small { margin-left: auto; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.sv-ok { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-size: 13px; flex: none; }
.sv-upload { flex-wrap: wrap; background: var(--panel); }
.sv-thumbs { display: flex; gap: 6px; }
.sv-thumbs span { display: inline-flex; border-radius: 50%; }
.sv-thumbs span.on { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--ink); }
.sv-thumbs .sv-more { align-items: center; justify-content: center; width: 28px; height: 28px; background: var(--ink); color: var(--on-ink); font-size: 13px; font-weight: 600; }
.sv-stack { display: inline-flex; flex: none; }
.sv-stack > * + * { margin-left: -8px; }
.sv-stack > * { box-shadow: 0 0 0 2px var(--sheet); border-radius: 50%; }
.sv-drop { background: var(--panel); }
.sv-drop small { margin-left: 0; color: var(--ink-2); }
.sv-badge { flex: none; margin-left: auto; padding: 3px 10px; border-radius: 6px; background: var(--panel); font-size: 13px; font-weight: 500; }
.sv-badge.m { background: var(--ink); color: var(--on-ink); }
.sv-badge.r { background: transparent; box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink-2); }
.sv-profile .sl-avatar-img { flex: none; }
.sv-rank-head { font-size: 13px; color: var(--ink-2); }
.sv-rank-head > span:nth-child(3) { grid-column: 3; }
.sv-rank-head > span:last-child { grid-column: 5; text-align: right; }
.sv-best { display: grid; gap: 8px; margin-top: 6px; padding: 14px; border-radius: 8px; background: var(--panel); }
.sv-best > div { display: grid; grid-template-columns: 150px 22px minmax(0, 1fr); align-items: center; gap: 10px; font-size: 13px; }
.sv-best > div > span:first-child { color: var(--ink-2); }
.sv-best > div b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-count { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sv-count b { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.sv-count small { font-size: 14px; color: var(--ink-2); }
.sv-dots { display: block; width: 100%; height: auto; }
.sv-dots circle { transform-box: fill-box; transform-origin: center; fill: var(--ink); transition: fill 300ms ease; animation: sl-dot 500ms var(--out) both; animation-delay: calc(var(--c, 0) * 14ms + 150ms); }
.sv-dots circle.g1, .sv-segs i.g1 { fill: var(--ink-3); background: var(--ink-3); }
.sv-dots circle.g2, .sv-segs i.g2 { fill: #C9C5BF; background: #C9C5BF; }
.sv-dots circle.on { fill: var(--terra); }
.sv-segs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sv-segs > div { display: grid; align-content: start; gap: 2px; min-width: 0; }
.sv-segs p { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; padding: 0 8px 0 2px; font-size: 13px; white-space: nowrap; }
.sv-segs p b { font-weight: 600; }
.sv-segs p small, .sv-segs button small { margin-left: auto; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sv-segs i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); flex: none; }
.sv-segs button { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; transition: background-color 200ms ease; }
.sv-segs button:hover { background: var(--panel); }
.sv-segs button.on { background: var(--panel); box-shadow: inset 0 0 0 1px var(--panel-edge); }
.sv-segs button.on::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--terra); flex: none; }
.sv-seg-focus { align-items: center; padding: 12px 14px; }
.sv-seg-focus small { margin-top: 2px; }
.sv-run { grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: start; }
.sv-feed { display: grid; grid-auto-rows: max-content; align-content: start; gap: 10px; height: 440px; padding: 10px; border: 1px solid var(--panel-edge); border-radius: 18px; background: var(--panel); overflow: hidden; }
.sv-feed-post { display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: 6px 8px; padding: 8px; border-radius: 10px; background: var(--sheet); font-size: 12px; }
.sv-feed-post b { font-weight: 500; }
.sv-feed-post i { grid-column: 1 / -1; height: 70px; border-radius: 6px; background: var(--panel); }
.sv-feed-av { width: 20px; height: 20px; border-radius: 50%; background: var(--panel-edge); }
.sv-feed-ad { border-radius: 10px; background: var(--sheet); overflow: hidden; box-shadow: 0 0 0 2px var(--ink); }
.sv-feed-head { display: flex; align-items: center; gap: 7px; padding: 8px; font-size: 12px; }
.sv-feed-head b { font-weight: 600; }
.sv-feed-head small { margin-left: auto; color: var(--ink-2); font-size: 12px; }
.sv-feed-ad .au-creative { width: 100%; height: auto; aspect-ratio: 1; border-radius: 0; font-size: 15px; box-shadow: none; }
.sv-feed-cta { display: flex; justify-content: space-between; padding: 8px 10px; background: var(--terra); color: #fff; font-size: 12px; font-weight: 600; }
.sv-tally { display: grid; gap: 10px; align-content: start; }
.sv-tally .sv-count { flex-direction: column; gap: 2px; margin-bottom: 4px; }
.sv-funnel { display: grid; grid-template-columns: 124px minmax(0, 1fr) 44px; align-items: center; gap: 10px; font-size: 14px; }
.sv-funnel small { text-align: right; font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sv-funnel:not(.lead) .sv-track i { background: #C4C0BB; }
.sv-funnel.lead, .sv-funnel.lead small { font-weight: 600; color: var(--ink); }
.sv-said { display: flex; gap: 10px; padding: 10px 12px; border: 1px solid var(--panel-edge); border-radius: 8px; background: var(--sheet); }
.sv-said .sl-avatar-img { flex: none; }
.sv-said small { display: block; font-size: 13px; color: var(--ink-2); }
.sv-said p { margin-top: 2px !important; font-size: 13px; font-weight: 500; line-height: 1.4; }
.sv-said.is-buy { box-shadow: inset 0 0 0 1px var(--ink); }
.sv-tally .sv-said:first-of-type { margin-top: 6px; }
.sv-brief { padding: 14px; border-radius: 8px; background: var(--panel); font-size: 15px; }
.sv-brief b { font-weight: 600; }
.sv-brief p { margin-top: 6px !important; line-height: 1.5; color: var(--ink-2); }
/* The step's own paragraph style must not reach the panel inside it on phones. */
.sl-step .sv p { max-width: none; font-size: 14px; line-height: 1.5; }
.sl-step .sv .sv-said p, .sv-said p { font-family: var(--voice); font-size: 17px; font-weight: 400; line-height: 1.3; }
.sl-step .sv .sv-note { margin-top: 0 !important; }
.sv-hrow { display: grid; grid-template-columns: 156px minmax(0, 1fr) 40px; align-items: center; gap: 12px; font-size: 14px; }
.sv-hrow small, .sv-rank small { text-align: right; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sv-track { height: 10px; border-radius: 999px; background: var(--panel); overflow: hidden; }
.sv-track i { display: block; height: 100%; border-radius: inherit; background: var(--ink); transform: scaleX(var(--v)); transform-origin: left; animation: sl-grow 900ms var(--out) both; animation-delay: calc(var(--i, 0) * 80ms + 120ms); }
.sv-profile { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--panel-edge); border-radius: 8px; background: var(--sheet); }
.sv-profile b { display: block; font-size: 15px; font-weight: 600; }
.sv-profile small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.sv-note { font-size: 14px; color: var(--ink-2); }
.sv-post { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--panel-edge); border-radius: 8px; background: var(--sheet); font-size: 14px; }
.sv-post b { display: block; font-weight: 500; }
.sv-post small { display: block; font-size: 13px; color: var(--ink-2); }
.sv-post.ad { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.sv-ph { width: 40px; height: 40px; flex: none; border-radius: 6px; background: var(--panel); }
.sv-reacts { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-reacts span { padding: 4px 9px; border-radius: 6px; background: var(--panel); font-size: 13px; font-weight: 500; }
.sv-reacts span.ink { background: var(--ink); color: var(--on-ink); }
.sv-reacts span.muted { color: var(--ink-2); background: transparent; box-shadow: inset 0 0 0 1px var(--panel-edge); }
.sv-rank { display: grid; grid-template-columns: 16px 30px minmax(0, 170px) minmax(0, 1fr) 58px; align-items: center; gap: 10px; font-size: 14px; }
.sv-rank > span:first-child { font-weight: 600; color: var(--ink-2); }
.sv-rank b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-rank:not(.lead) .sv-track i { background: #C4C0BB; }
.sv-rank.lead > span:first-child, .sv-rank.lead small { color: var(--ink); font-weight: 600; }

/* Example results */
.sl-sheet { background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 10px; overflow: hidden; }
.sl-sheet-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--rule); }
.sl-sheet-title { display: flex; align-items: center; gap: 12px; }
.sl-sheet-title b { display: block; font-size: 15px; font-weight: 600; }
.sl-sheet-title small { display: block; font-size: 13px; color: var(--ink-2); }
.sl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sl-chips button {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--rule);
  background: transparent; color: var(--ink); font-size: 13px; font-weight: 500; cursor: pointer; transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 160ms var(--out);
}
.sl-chips button span { color: var(--ink-2); font-weight: 400; font-variant-numeric: tabular-nums; }
.sl-chips button.on { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.sl-chips button.on span { color: var(--on-dark-2); }
.sl-chips button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .sl-chips button:not(.on):hover { background: var(--panel-edge); } }
.sl-sheet-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.sl-ex-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sl-ex-table thead th { padding: 18px 24px 10px; font-size: 13px; font-weight: 400; color: var(--ink-2); text-align: right; }
.sl-ex-table thead th:first-child { text-align: left; }
.sl-ex-table tbody tr { border-top: 1px solid var(--rule); transition: background-color 200ms ease; }
.sl-ex-table tbody tr.open { background: var(--on-ink); }
.sl-ex-table tbody th { padding: 0; text-align: left; font-weight: 400; }
.sl-ex-table tbody th button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 24px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.sl-ex-rank { width: 14px; font-weight: 600; color: var(--ink-2); }
.sl-ex-table tr.lead .sl-ex-rank, .sl-ex-table tr.lead th button span:last-child { color: var(--ink); font-weight: 600; }
.sl-ex-table td { padding: 0 24px; text-align: right; font-size: 15px; color: var(--ink-2); }
.sl-ex-table td:nth-child(2) { width: 34%; }
.sl-ex-table tr.lead td { color: var(--ink); font-weight: 600; }
.sl-ex-num { display: inline-block; min-width: 3ch; }
.sl-ex-bar { float: left; width: calc(100% - 6ch); height: 8px; margin-top: 0.55em; border-radius: 999px; background: var(--panel-edge); overflow: hidden; }
.sl-ex-bar i { display: block; height: 100%; border-radius: inherit; background: #C4C0BB; transform-origin: left; transition: transform 900ms var(--out); }
.sl-ex-table tr.lead .sl-ex-bar i { background: var(--ink); }
@media (hover: hover) and (pointer: fine) { .sl-ex-table tbody tr:not(.open):hover { background: var(--panel-edge); } }
.sl-why { display: flex; flex-direction: column; gap: 14px; padding: 24px; background: var(--on-ink); border-left: 1px solid var(--rule); animation: sl-swap 500ms var(--out) both; }
.sl-why h3 { font-size: 14px !important; letter-spacing: 0 !important; color: var(--ink-2) !important; }
.sl-why blockquote { margin: 0; font-family: var(--voice); font-size: 22px; line-height: 1.3; letter-spacing: 0; }
.sl-why-who { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.sl-why-groups { display: grid; gap: 2px; padding-top: 14px; border-top: 1px solid var(--rule); }
.sl-why-groups > span { margin-bottom: 4px; font-size: 13px; font-weight: 600; }
.sl-why-groups p { display: grid; grid-template-columns: minmax(0, 1fr) auto 36px; align-items: center; gap: 12px; min-height: 32px; font-size: 14px; }
.sl-why-groups b { font-weight: 400; }
.sl-why-groups small { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sl-why-groups p > span { justify-self: end; padding: 2px 8px; border-radius: 6px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--panel-edge); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sl-why-groups p.top > span { background: var(--ink); box-shadow: none; color: var(--on-ink); }
.sl-fix { margin-top: auto; padding: 14px 16px; border-radius: 8px; background: var(--sheet); border: 1px solid var(--panel-edge); }
.sl-fix span { font-size: 12px; font-weight: 600; }
.sl-fix p { margin-top: 4px !important; font-size: 14px; line-height: 1.5; color: var(--ink-2); }

/* Who it is for */
.sl-for h2 { max-width: 22ch; margin-left: 0; }
.sl-for-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.sl-for-cols > div { display: grid; align-content: start; gap: 14px; padding: 32px; border-radius: 10px; background: var(--panel); }
.sl-for-cols h3 { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.25rem); font-weight: 400 !important; letter-spacing: -0.025em !important; }
.sl-for-cols p { max-width: 44ch; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.sl-for-cols .sl-underline { justify-self: start; margin-top: 8px; }

/* After the campaign */
.sl-after { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px clamp(40px, 6vw, 96px); align-items: center; }
.sl-after > * { margin: 0; }
.sl-after-copy { display: grid; gap: 20px; justify-items: start; }
.sl-after-copy p { font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 48ch; }
.sl-after-table { padding: 8px 20px 16px; border: 1px solid var(--panel-edge); border-radius: 10px; background: var(--sheet); }
.sl-after-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sl-after-table thead th { padding: 12px 0 10px; font-size: 13px; font-weight: 400; color: var(--ink-2); text-align: left; }
.sl-after-table tbody tr { border-top: 1px solid var(--panel); }
.sl-after-table tbody th { display: flex; align-items: center; gap: 10px; padding: 12px 0; font-weight: 500; text-align: left; }
.sl-after-table td { padding: 12px 0; color: var(--ink-2); }
.sl-after-table td:last-child { text-align: right; }

/* The broader lab */
.sl-lab { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sl-lab li { display: grid; align-content: start; gap: 10px; min-height: 200px; padding: 24px; border: 1px dashed var(--rule); border-radius: 10px; color: var(--ink-2); }
.sl-lab li.live { border: 0; background: var(--ink); color: var(--on-ink); }
.sl-lab h3 { font-size: 22px; letter-spacing: -0.02em !important; color: var(--ink) !important; }
.sl-lab li.live h3 { color: var(--on-ink) !important; }
.sl-lab p { font-size: 15px; line-height: 1.5; }
.sl-lab li.live p { color: var(--on-dark-2); }

/* FAQ */
.sl-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px clamp(40px, 6vw, 96px); }
.sl-faq > * { margin: 0; }
.sl-faq-list { border-bottom: 1px solid var(--rule); }
.sl-faq details { border-top: 1px solid var(--rule); }
.sl-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; font-size: 19px; letter-spacing: -0.01em; cursor: pointer; list-style: none; }
.sl-faq summary::-webkit-details-marker { display: none; }
.sl-faq summary span { position: relative; width: 14px; height: 14px; flex: none; }
.sl-faq summary span::before, .sl-faq summary span::after { content: ""; position: absolute; inset: 6px 0 auto; height: 2px; background: var(--ink); transition: transform 300ms var(--out); }
.sl-faq summary span::after { transform: rotate(90deg); }
.sl-faq details[open] summary span::after { transform: rotate(0); }
.sl-faq details p { max-width: 60ch; padding: 0 0 22px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }


/* Ivory stages for the coded animations */
.sl-stagebox { padding: 20px; border-radius: 14px; background: var(--ivory); }
.au-stage, .aw-stage { position: relative; width: 1000px; height: 560px; }

/* Creative audition */
/* Creatives: one shoot, eight advertising treatments. Every size comes from the card's font-size. */
.au-creative { position: relative; width: 132px; height: 132px; border-radius: 10px; overflow: hidden; font-size: 12px; background: var(--sand); color: var(--ink); box-shadow: 0 0 0 3px var(--sheet), 0 12px 22px -14px rgba(90, 62, 40, 0.5); transition: box-shadow 250ms ease; }
.cr p { position: absolute; z-index: 3; left: 9%; top: 9%; right: 9%; margin: 0; font-weight: 700; line-height: 1.04; letter-spacing: -0.03em; }
.cr p b, .cr p span { display: block; }
.cr-bg { position: absolute; inset: 0; background-repeat: no-repeat; }
/* The bottle, cut out of the photo along its cap, shoulders and base. */
.cr-bottle { position: absolute; aspect-ratio: 295 / 675; filter: drop-shadow(0 0.5em 0.55em rgba(45, 25, 8, 0.38)); }
.cr-bottle i { position: absolute; inset: 0; background-size: 380.3% auto; background-position: 50.2% 50.9%; background-repeat: no-repeat;
  clip-path: polygon(19% 1%, 21% 0, 79% 0, 81% 1%, 82% 3%, 82% 31.5%, 90% 32.5%, 96% 34.5%, 99% 37.5%, 100% 41%, 100% 94%, 99% 97%, 96% 99.3%, 92% 100%, 8% 100%, 4% 99.3%, 1% 97%, 0 94%, 0 41%, 1% 37.5%, 4% 34.5%, 10% 32.5%, 18% 31.5%, 18% 3%); }
/* ₹499: a bold offer card. */
.cr-offer { background: var(--terra); color: #FFFFFF; }
.cr-offer p { right: 50%; }
.cr-offer p b { font-size: 2.5em; letter-spacing: -0.05em; }
.cr-offer p span { margin-top: 0.2em; font-size: 0.95em; font-weight: 600; }
/* 5% niacinamide: a close-up of the amber glass. */
.cr-ingredient { background: #6B3C12; color: #FFFFFF; }
.cr-ingredient .cr-bg { background-size: 420% auto; background-position: 50.5% 62%; }
.cr-ingredient::after { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(160deg, rgba(30, 14, 4, 0.62), rgba(30, 14, 4, 0) 62%); }
.cr-ingredient p b { font-size: 3em; letter-spacing: -0.05em; }
.cr-ingredient p span { margin-top: 0.15em; font-size: 0.95em; font-weight: 600; }
/* Glow in 7 days: rich, full-bleed product photography. */
.cr-photo .cr-bg { background-size: 113% auto; background-position: 53.5% 37%; filter: saturate(1.2) contrast(1.06); }
.cr-photo p { font-size: 1.2em; }
/* Dermat tested: clean, clinical, white. */
.cr-clinical { background: #FFFFFF; }
.cr-clinical p b { font-size: 1.2em; }
.cr-clinical p span { margin-top: 0.35em; font-size: 0.8em; font-weight: 500; color: var(--ink-2); }
.cr-clinical p span::before { content: "✓ "; color: var(--sage); font-weight: 700; }
.cr-disc { position: absolute; right: 6%; bottom: 8%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: #F1F1EE; }
/* Buy 2, get 1 free: three bottles together, the offer up top. */
.cr-bundle { background: var(--ink); color: #FFFFFF; }
.cr-bundle p b { font-size: 1.3em; }
.cr-bundle p b + b { color: #F2C9B6; }
/* Your daily ritual: the wider sunlit scene, leaf shadows and stone. */
.cr-lifestyle .cr-bg { background-size: 103% auto; background-position: 63% 17%; filter: brightness(1.04) saturate(1.05); }
.cr-lifestyle::before { content: ""; position: absolute; z-index: 2; inset: 0 0 60%; background: linear-gradient(rgba(250, 244, 234, 0.85), rgba(250, 244, 234, 0)); }
.cr-lifestyle p { font-size: 1.2em; right: 30%; }
/* Made for Indian summers: deep green, leaf-shadow light. */
.cr-outdoor { background: #2F5A3C; color: #FFFFFF; }
.cr-leaves { position: absolute; inset: 0; background-size: 222% auto; background-position: 0 2%; filter: grayscale(1) contrast(1.6) brightness(1.15); mix-blend-mode: multiply; opacity: 0.6; }
.cr-outdoor::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 12%, rgba(255, 238, 190, 0.38), rgba(255, 238, 190, 0) 55%); }
.cr-outdoor p { right: 46%; font-size: 1.05em; }
/* Free shipping today: type first, the bottle cut in front of it. */
.cr-type { background: var(--sand); }
.cr-type p b { font-size: 1.8em; font-weight: 800; line-height: 0.94; letter-spacing: -0.045em; }
.cr-type p span { margin-top: 0.25em; font-size: 1em; color: var(--terra); }
.au-rank { position: absolute; left: -10px; top: -10px; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-size: 13px; font-weight: 600; box-shadow: 0 0 0 3px var(--ivory); }
/* A panel comparing creatives: a spacious grid, a compact shortlist, and twelve shoppers across the width. */
.aa-stage { position: relative; width: 1000px; height: 600px; }
.aa-slot { position: absolute; width: 120px; }
.aa-card { position: relative; z-index: 3; width: 120px; transform-origin: top left; transition: opacity 400ms ease; }
.aa-card .au-creative { width: 120px; height: 120px; font-size: 11px; border-radius: 10px; box-shadow: 0 0 0 3px var(--sheet), 0 12px 22px -14px rgba(90, 62, 40, 0.5); transition: box-shadow 300ms ease, transform 300ms var(--out); }
.aa-card.on .au-creative { box-shadow: 0 0 0 3px var(--sheet), 0 0 0 6px var(--ink), 0 18px 28px -14px rgba(90, 62, 40, 0.6); transform: translateY(-4px); }
.aa-card.tested .au-creative { box-shadow: 0 0 0 3px var(--sheet), 0 0 0 4.5px var(--ink-3), 0 12px 22px -14px rgba(90, 62, 40, 0.5); }
.aa-tag { position: absolute; z-index: 4; right: -8px; top: -9px; padding: 2px 7px; border-radius: 6px; background: var(--sheet); color: var(--ink-2); font-size: 13px; font-weight: 600; box-shadow: 0 0 0 1px var(--panel-edge); }
.aa-tag.testing { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.aa-card.win .au-creative { box-shadow: 0 0 0 3px var(--sheet), 0 0 0 6px var(--terra), 0 18px 28px -14px rgba(90, 62, 40, 0.6); }
.aa-card .au-rank { left: -10px; top: -10px; }
.aa-ghost { position: absolute; left: 0; top: 0; width: 120px; height: 120px; border-radius: 10px; border: 1.5px dashed var(--rule); }
.aa-totals { min-height: 2.7em; margin-top: 12px !important; font-size: 13px; line-height: 1.35; text-align: center; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.aa-list { position: absolute; z-index: 1; left: 618px; top: 18px; width: 362px; height: 324px; padding: 18px 18px 0; border-radius: 12px; background: var(--sheet); box-shadow: 0 0 0 1px var(--panel-edge), 0 18px 40px -26px rgba(90, 62, 40, 0.45); }
.aa-list h3 { font-weight: 600 !important; font-size: 20px; letter-spacing: -0.02em !important; }
.aa-status { display: flex; align-items: center; gap: 8px; margin-top: 6px !important; font-size: 13px; color: var(--ink-2); }
.aa-row { position: absolute; left: 16px; right: 16px; height: 64px; display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--panel); }
.aa-row-slot { width: 48px; height: 48px; flex: none; border-radius: 8px; border: 1.5px dashed var(--rule); }
.aa-row > div { opacity: 0; transform: translateX(-6px); transition: opacity 400ms var(--out), transform 400ms var(--out); }
.aa-row.on > div { opacity: 1; transform: none; }
.aa-row b { display: block; font-size: 15px; font-weight: 600; }
.aa-row small { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-2); }
.aa-row.lead.on b { color: var(--terra); }
.aa-panel { position: absolute; left: 28px; right: 20px; top: 370px; }
.aa-panel-head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 10px !important; font-size: 14px; }
.aa-panel-head b { font-weight: 600; }
.aa-panel-head span { color: var(--ink-2); }
.aa-shoppers { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.aa-shopper { display: flex; align-items: flex-start; gap: 10px; height: 96px; padding: 12px 10px; border-radius: 12px; background: var(--sheet); box-shadow: 0 0 0 1px var(--panel-edge); transition: opacity 400ms ease; }
.aa-av { position: relative; flex: none; width: 46px; height: 46px; }
.aa-av img { display: block; width: 46px; height: 46px; border-radius: 50%; background: var(--ivory); }
.aa-av::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 3px solid var(--ink-3); opacity: var(--o); transform: scale(calc(0.9 + 0.1 * var(--o))); }
.is-click .aa-av::after { border-color: var(--sage); }
.is-buy .aa-av::after { border-color: var(--terra); }
.aa-shopper b { display: block; font-size: 14px; font-weight: 600; }
.aa-shopper small { display: block; font-size: 13px; line-height: 1.3; color: var(--ink-2); }
.aa-react { display: inline-block; margin-top: 6px; padding: 2px 7px; border-radius: 6px; background: var(--ivory); color: var(--ink-2); font-size: 13px; font-weight: 600; white-space: nowrap; opacity: var(--o); transform: translateY(calc((1 - var(--o)) * 4px)); }
.aa-react.is-click { background: var(--sage); color: #FFFFFF; }
.aa-react.is-buy { background: var(--terra); color: #FFFFFF; }
.au-mobile-note { font-size: 13px; color: var(--ink-2); }
.au-mobile { display: grid; gap: 14px; }
.au-mobile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.au-mobile-grid > span { display: block; opacity: 0.5; }
.au-mobile-grid > span.win { opacity: 1; }
.au-list { display: grid; gap: 8px; }
.au-list li { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 22px; border-radius: 10px; background: var(--sheet); }
.au-list li.out { opacity: 0.55; }
.au-list .au-rank { left: -8px; top: 50%; margin-top: -14px; }
.au-list b { display: block; font-size: 14px; font-weight: 600; }
.au-list small { display: block; font-size: 13px; color: var(--ink-2); }

/* Audience world */
.aw-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.aw-play { height: 34px; padding: 0 16px; border: 0; border-radius: 6px; background: var(--ink); color: var(--on-ink); font-size: 13px; font-weight: 500; cursor: pointer; transition: transform 160ms var(--out); }
.aw-play:active { transform: scale(0.97); }
.aw-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.aw-links path { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 3 5; opacity: 0.5; transition: opacity 400ms ease; }
.aw-links circle { fill: var(--ink-3); opacity: 0.6; }
.aw-links g.on path { stroke: var(--ink); opacity: 1; }
.aw-links g.on circle { fill: var(--ink); opacity: 1; }
.aw-ad { position: absolute; left: 415px; top: 120px; width: 170px; border-radius: 12px; overflow: hidden; background: var(--sheet); box-shadow: 0 0 0 1px var(--panel-edge), 0 22px 40px -22px rgba(90, 62, 40, 0.55); }
.aw-ad .au-creative { width: 170px; height: 170px; border-radius: 0; box-shadow: none; }
.aw-ad .au-creative { font-size: 15px; }
.aw-cluster { position: absolute; width: 300px; height: 156px; display: grid; align-content: center; justify-items: center; gap: 12px; border-radius: 78px; transition: opacity 450ms ease, transform 450ms var(--out); opacity: 0.45; }
.aw-cluster.on { opacity: 1; transform: scale(1.04); }
.aw-cluster.tone-terra { background: var(--terra-soft); } .aw-cluster.tone-sage { background: var(--sage-soft); } .aw-cluster.tone-sand { background: var(--sand); }
.aw-tiles { display: grid; grid-template-columns: repeat(4, 34px); gap: 10px; }
.aw-av img { display: block; width: 34px; height: 34px; border-radius: 50%; background: var(--sheet); box-shadow: 0 0 0 2px var(--sheet), 0 6px 12px -8px rgba(90, 62, 40, 0.5); transition: transform 300ms var(--out), box-shadow 300ms ease; }
.aw-av.on img { transform: scale(1.18); box-shadow: 0 0 0 2px var(--ink), 0 8px 16px -8px rgba(90, 62, 40, 0.6); }
.aw-name { max-width: 280px; padding: 5px 12px; border-radius: 999px; background: var(--sheet); font-size: 13px; font-weight: 600; text-align: center; box-shadow: 0 0 0 1px var(--panel-edge); }
.aw-more { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 6px; border: 1px dashed var(--rule); font-size: 13px; color: var(--ink-2); }
.aw-mobile-ad .au-creative { width: 100%; height: auto; aspect-ratio: 1; font-size: 26px; }
.au-board-ad { display: block; flex: none; }
.au-board-ad .au-creative { width: 52px; height: 52px; font-size: 5px; border-radius: 8px; box-shadow: 0 0 0 2px var(--sheet); }
.au-mobile-grid .au-creative { width: 100%; height: auto; aspect-ratio: 1; font-size: 7.5px; border-radius: 8px; box-shadow: none; }
.aw-profile { position: absolute; width: 250px; display: grid; gap: 10px; padding: 16px; border-radius: 12px; background: var(--sheet); box-shadow: 0 0 0 1px var(--panel-edge), 0 18px 34px -18px rgba(90, 62, 40, 0.5); }
.aw-profile-head { display: flex; align-items: center; gap: 10px; }
.aw-profile-head b { display: block; font-size: 14px; font-weight: 600; }
.aw-profile-head small { display: block; font-size: 13px; color: var(--ink-2); }
.aw-quote { font-family: var(--voice); font-size: 18px; line-height: 1.3; }
.aw-profile .sl-outcome { justify-self: start; font-size: 13px; padding: 5px 10px; }
.aw-caption { position: absolute; left: 0; bottom: 0; font-size: 13px; color: var(--ink-2); }
.aw-note { margin-top: 14px !important; font-size: 14px; color: var(--ink-2); }
.aw-mobile { display: grid; gap: 12px; }
.aw-mobile .aw-cluster { position: relative; width: auto; transform: none; }
.aw-mobile .aw-profile { position: relative; width: auto; left: auto !important; top: auto !important; }

/* ------------------------------------------------------------ closing and footer */
.sl-closing { position: relative; min-height: max(560px, 80svh); display: flex; align-items: center; overflow: hidden; background: var(--dark); color: var(--on-dark); }
.sl-horizon { position: absolute; inset: 0; width: 100%; height: 100%; }
.sl-closing::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 55% at 22% 45%, rgba(27, 27, 27, 0.9), transparent 80%); pointer-events: none; }
.sl-closing-inner { position: relative; z-index: var(--z-copy); padding: 120px var(--gutter); max-width: 900px; }
.sl-closing h2 { font-size: clamp(2rem, 1.15rem + 2.6vw, 3.4rem); line-height: 1.05; letter-spacing: -0.025em !important; }
.sl-closing p { margin-top: 24px !important; max-width: 46ch; font-size: 18px; line-height: 1.55; color: var(--on-dark-2); }
.sl-footer { background: var(--darker); color: var(--on-dark-3); padding: 64px var(--gutter) 32px; }
.sl-footer .sl-wordmark { font-size: 22px; }
.sl-footer .sl-mark { transform: rotate(-32deg) scale(0.78); margin-right: -5px; }
.sl-footer-main { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; }
.sl-footer-main p { margin-top: 14px !important; font-size: 14px; color: var(--on-dark-2); }
.sl-footer nav { display: flex; flex-wrap: wrap; gap: 8px 28px; align-content: start; font-size: 14px; }
.sl-footer nav a { color: var(--on-dark-3); transition: color 200ms ease; }
.sl-footer nav a:hover { color: #fff; }
.sl-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--on-dark-edge); font-size: 13px; color: var(--on-dark-3); }

/* ------------------------------------------------------------ motion */
@keyframes sl-swap { from { opacity: 0.3; transform: translateY(10px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes sl-grow { from { transform: scaleX(0); } }
@keyframes sl-dot { from { opacity: 0; transform: scale(0.2); } }
@keyframes sl-breathe { 50% { opacity: 0.35; } }
@keyframes sl-tick { from { transform: translateY(5px); opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) {
  .sl *, .sl *::before, .sl *::after { animation: none !important; transition-duration: 1ms !important; }
}

/* Scroll-scrubbed moves. Script writes --p (0 → 1 as an element comes up the screen) or --x (0 → 1 as it
   scrolls away); the defaults are the finished state, which is what reduced motion and no script show.
   Each section gets one move that suits what it shows, never one entrance repeated down the page. */
/* Hero: the copy lags behind and fades, the shoppers lift away a little faster than the page. */
.sl-hero-inner { transform: translateY(calc(var(--x, 0) * 90px)); opacity: calc(1 - var(--x, 0) * 0.7); }
.sl-hero-visual { transform: translateY(calc(var(--x, 0) * -70px)) scale(calc(1 - var(--x, 0) * 0.06)); transform-origin: 50% 0; }
/* Statement headings fill in word by word. */
.sl-fill .sl-word { opacity: clamp(0.18, calc((var(--p, 1) - var(--i)) * 5 + 0.18), 1); }
/* Audition: the stage tips up from the table as it arrives. */
.sl-audition .sl-stagebox { transform: perspective(1600px) rotateX(calc((1 - var(--p, 1)) * 18deg)) scale(calc(0.9 + var(--p, 1) * 0.1)); transform-origin: 50% 100%; }
/* Example: the ranked rows deal in, top rank first. */
.sl-ex-table tbody tr { --k: clamp(0, calc(var(--p, 1) * 2.2 - var(--r, 0) * 0.28), 1); opacity: calc(0.3 + var(--k) * 0.7); transform: translateX(calc((1 - var(--k)) * -48px)); }
/* Audience world: the stage opens out like an aperture. */
.sl-world .sl-stagebox { clip-path: inset(calc((1 - var(--p, 1)) * 10%) calc((1 - var(--p, 1)) * 16%) round 14px); }
.sl-world .sl-stagebox > * { transform: scale(calc(1.06 - var(--p, 1) * 0.06)); }
/* For who: brands and agencies close in from either side. */
.sl-for-cols > div { opacity: calc(0.35 + var(--p, 1) * 0.65); }
.sl-for-cols > div:first-child { transform: translateX(calc((1 - var(--p, 1)) * -72px)); }
.sl-for-cols > div:last-child { transform: translateX(calc((1 - var(--p, 1)) * 72px)); }
/* After: the table travels slower than its copy, and each verdict lands as its row arrives. */
.sl-after-table { transform: translateY(calc((1 - var(--p, 1)) * 110px)); }
.sl-after-table tbody tr { --k: clamp(0, calc(var(--p, 1) * 2 - 0.6 - var(--r, 0) * 0.22), 1); opacity: calc(0.3 + var(--k) * 0.7); }
.sl-after-table .sv-badge { display: inline-block; transform: scale(calc(0.5 + var(--k) * 0.5)); opacity: var(--k); }
/* Vision: the four tests are dealt onto the table, left to right. */
.sl-lab li { --k: clamp(0, calc(var(--p, 1) * 1.9 - var(--i, 0) * 0.3), 1); opacity: calc(0.25 + var(--k) * 0.75); transform: translateY(calc((1 - var(--k)) * 64px)) rotate(calc((1 - var(--k)) * -4deg)); transform-origin: 0 100%; }
/* Closing: the horizon rises to meet the last line. */
.sl-closing .sl-horizon { transform: translateY(calc((1 - var(--p, 1)) * 120px)); }

/* ------------------------------------------------------------ responsive */
/* Thumb-sized targets on touch screens; the look stays the same. */
@media (pointer: coarse) {
  .sl-pill, .sl-pill-small { height: 44px; }
  .sl-trio-tabs button, .sl-chips button, .aw-play { height: 44px; }
  .sl-underline, .sl-footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 1180px) {
  .sl-nav { display: none; }
  .sl-header { grid-template-columns: 1fr auto; }
}
@media (max-width: 1080px) {
  .sl-hero { grid-template-columns: 1fr; min-height: 0; }
  .sl-head, .sl-after, .sl-faq { grid-template-columns: 1fr; }
  .sl-head { align-items: start; }
  .sl-value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-lab { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-sheet-body { grid-template-columns: 1fr; }
  .sl-why { border-left: 0; border-top: 1px solid var(--rule); }
}
@media (max-height: 680px) {
  .sl-pipe { padding: 80px 0 12px; }
  .sl-pipe-frame { min-height: 0; zoom: 0.86; }
  .sl-step { padding: 14px 0; }
}
@media (max-width: 900px) {
  .sl-pipe-track { height: auto; }
  .sl-pipe { position: static; height: auto; padding: 0; align-items: start; }
  .sl-step .sl-step-copy { grid-template-rows: 1fr; }
  .sl-header { top: 12px; width: calc(100% - 24px); padding-left: 16px; }
  .sl-pipe { grid-template-columns: 1fr; }
  .sl-pipe-stage { display: none; }
  .sl-step { padding: 24px 0 36px; opacity: 1; }
  .sl-step:last-child { border-bottom: 0; }
  .sl-step-visual { display: block; margin-top: 20px; padding: 18px; border: 1px solid var(--panel-edge); border-radius: 10px; background: var(--sheet); }
  .sl-for-cols { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .sl-hero { padding-top: 104px; min-height: 0; }
  .sl-trio { padding: 20px 12px 14px; }
  .sl-stagebox { padding: 14px; }
}
@media (max-width: 640px) {
  .sl-header-actions .sl-quiet { display: none; }
  .sv-row small { white-space: normal; text-align: right; }
  .sv-thumbs { flex-wrap: wrap; }
  .sv-hrow { grid-template-columns: 112px minmax(0, 1fr) 36px; font-size: 13px; }
  .sv-rank { grid-template-columns: 14px 30px minmax(0, 1fr) 48px 40px; gap: 8px; }
  .sv-best > div { grid-template-columns: 22px minmax(0, 1fr); row-gap: 4px; }
  .sv-segs { grid-template-columns: 1fr; gap: 12px; }
  .sv-segs > div { gap: 0; }
  .sv-segs p { font-size: 13px; }
  .sv-segs button { min-height: 32px; }
  .sv-run { grid-template-columns: 1fr; }
  .sv-feed { justify-self: center; width: min(100%, 230px); height: auto; }
  .sv-feed-post:last-child { display: none; }
  .sv-count { flex-direction: column; gap: 2px; }
  .sv-best > div > span:first-child { grid-column: 1 / -1; }
  .sl-wordmark { font-size: 24px; }
  .sl-mark { width: 25px; height: 25px; }
  .sl-header .sl-pill { padding: 0 12px; gap: 8px; }
  .sl-value-grid, .sl-lab { grid-template-columns: 1fr; }
  .sl-lab li { min-height: 0; }
  .sl-sheet-top { padding: 16px; }
  .sl-ex-table thead th, .sl-ex-table td { padding-left: 10px; padding-right: 10px; font-size: 13px; }
  .sl-ex-table tbody th button { padding: 14px 10px; gap: 8px; font-size: 14px; }
  .sl-ex-table tbody th button .sl-thumb { display: none; }
  .sl-ex-table td:nth-child(2) { width: auto; }
  .sl-ex-bar { display: none; }
  .sl-why { padding: 18px; }
  .sl-for-cols > div { padding: 24px; }
  .sv-hrow { grid-template-columns: 100px minmax(0, 1fr) 36px; }
  .sv-rank { grid-template-columns: 14px 30px minmax(0, 1fr) 36px; }
  .sv-rank .sv-track { display: none; }
}