/* G1 Growth. Two colors (brand kit): black and white. Greys are for secondary text and hairlines only. */
:root {
  --black: #0A0A0A;
  --white: #FFFFFF;
  --grey-b: #9A9A9A; /* secondary text on black */
  --grey-w: #5A5A5A; /* secondary text on white */
  --line-b: #2C2C2C; /* hairline on black */
  --pad: clamp(20px, 5vw, 72px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font: 500 18px/1.45 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ol, ul, figure, table { margin: 0; padding: 0; }
h1, h2, h3 { font-weight: 500; }
ol, ul { list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--pad); top: -100px; z-index: 10; padding: 10px 14px; background: var(--white); color: var(--black); }
.skip:focus { top: 12px; }

.dark { background: var(--black); color: var(--white); }

.text-link { text-decoration-thickness: 1px; text-underline-offset: 5px; }
.text-link:hover { text-decoration-thickness: 2px; }

.btn {
  display: inline-block;
  padding: 15px 26px;
  border-radius: 999px;
  background: var(--white);
  color: var(--black);
  box-shadow: inset 0 0 0 1.5px var(--white);
  font-size: 17px;
  line-height: 1;
  text-decoration: none;
  transition: background-color .15s, color .15s;
}
.btn:hover { background: transparent; color: var(--white); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--black);
  color: var(--white);
}
.powder-canvas { position: absolute; inset: 0; z-index: 2; display: none; width: 100%; height: 100%; pointer-events: none; }
.powder-on .powder-canvas { display: block; transition: opacity .3s; }
.powder-canvas.is-fading { opacity: 0; }

.bar { display: flex; justify-content: space-between; align-items: baseline; padding: 28px var(--pad) 0; font-size: 17px; }
.brand { font-size: 22px; letter-spacing: -0.04em; text-decoration: none; }

.hero-body { display: grid; gap: clamp(28px, 4vw, 48px); margin-top: auto; padding: 48px var(--pad) clamp(28px, 5vw, 56px); }
.display {
  margin-left: -0.045em;
  font-size: min(24vw, 22vh);
  font-size: min(24vw, 22svh);
  line-height: .86;
  letter-spacing: -0.055em;
}
.display > span { display: block; }
/* Without the powder script (no JS) the line shows the two words as text. */
.powder { font-size: .46em; line-height: 1.5; }
.powder-on .powder { font-size: 1em; line-height: inherit; }
.powder-on .powder-alt { display: none; }
.powder-on .powder-word { color: transparent; user-select: none; }
.baseline-probe { display: inline-block; width: 0; height: 0; }

.hero-side { display: grid; gap: 24px; max-width: 34ch; }
.hero-side p { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.35; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }

@media (min-width: 1200px) and (min-aspect-ratio: 3/2) {
  .hero-body { grid-template-columns: 1fr minmax(280px, 340px); align-items: end; }
}

/* ---------- Sections ---------- */
.sec { padding: clamp(80px, 12vw, 168px) var(--pad); }
.sec.sec-follow { padding-top: 0; }
h2 { max-width: 15ch; font-size: clamp(36px, 5.4vw, 76px); line-height: .98; letter-spacing: -0.045em; text-wrap: balance; }
h3 { font-size: 22px; line-height: 1.15; letter-spacing: -0.03em; }
.lede { max-width: 38ch; margin-top: 24px; color: var(--grey-w); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.35; }
.lede + .lede { margin-top: 12px; }

.key {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0;
  vertical-align: middle;
}
.key-light { background: var(--white); color: var(--black); }
.key-dark { background: var(--black); color: var(--white); }

/* ---------- The ad diagram ---------- */
.ad-grid { display: grid; gap: clamp(40px, 6vw, 96px); margin-top: clamp(40px, 6vw, 80px); }
@media (min-width: 900px) {
  .ad-grid { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); align-items: center; }
}
.ad-frame {
  container-type: inline-size;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 4%;
  aspect-ratio: 4 / 5;
  max-width: 460px;
  padding: 7%;
  background: var(--black);
  color: var(--white);
}
.ad-headline { font-size: 9.5cqw; line-height: .95; letter-spacing: -0.045em; }
.ad-product { position: relative; display: grid; place-items: center; min-height: 0; }
.tub { width: auto; max-width: 100%; height: 100%; min-height: 0; fill: none; stroke: currentColor; stroke-width: 1.5; }
.tub text { fill: currentColor; stroke: none; font-size: 22px; letter-spacing: -0.03em; }
.key-tub { position: absolute; top: 50%; right: 12%; }
.ad-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 3.7cqw; }
.ad-offer { display: inline-block; padding: .55em 1em; border: 1.5px solid var(--white); border-radius: 999px; }
.ad-ai { color: var(--grey-b); }

.parts { max-width: 520px; }
.parts li { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center; padding: 20px 0; border-top: 1px solid var(--black); }
.parts li:last-child { border-bottom: 1px solid var(--black); }
.parts p { grid-column: 2; color: var(--grey-w); font-size: 17px; line-height: 1.4; }

/* ---------- Pilot Facts (the form of a Supplement Facts panel) ---------- */
.pilot-grid { display: grid; gap: clamp(40px, 6vw, 96px); }
@media (min-width: 900px) {
  .pilot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-items: start; }
}
.facts {
  container-type: inline-size;
  max-width: 460px;
  padding: 4px 12px 12px;
  border: 2px solid var(--black);
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: 0;
}
.facts-title { font-size: 19.5cqw; font-weight: 700; line-height: 1.1; letter-spacing: -0.035em; white-space: nowrap; }
.facts-serving { display: flex; justify-content: space-between; gap: 16px; padding-top: 5px; border-top: 1px solid var(--black); }
.facts-serving.facts-serving-plain { padding-top: 0; border-top: 0; }
.facts-serving span:last-child { text-align: right; }
.rule-thick { height: 10px; margin-top: 6px; background: var(--black); }
.rule-mid { height: 5px; background: var(--black); }
.facts table { width: 100%; border-collapse: separate; border-spacing: 0; }
.facts th, .facts td { padding: 6px 0; border-top: 1px solid var(--black); font-weight: 500; text-align: left; vertical-align: top; }
.facts td { padding-left: 16px; font-weight: 700; text-align: right; white-space: nowrap; }
.facts thead th { border-top: 0; font-size: 13px; font-weight: 700; }
.facts thead th:last-child { text-align: right; }
.facts tbody:first-child tr:first-child > * { border-top: 0; }
.facts b { font-weight: 700; }
.facts-notes { display: grid; gap: 6px; padding-top: 8px; font-size: 13px; line-height: 1.35; }

/* ---------- Rules ---------- */
.rules { display: grid; margin-top: clamp(40px, 6vw, 80px); }
@media (min-width: 800px) {
  .rules { grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 5vw, 80px); }
}
.rules li {
  padding: 22px 12% clamp(36px, 5vw, 64px) 0;
  border-top: 1px solid var(--black);
  font-size: clamp(21px, 2.3vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* ---------- Steps (a real sequence, so they have numbers) ---------- */
.steps { display: grid; margin-top: clamp(40px, 6vw, 80px); counter-reset: step; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, 1fr); column-gap: 32px; }
}
.steps li { padding: 20px 0 40px; border-top: 1px solid var(--line-b); counter-increment: step; }
.steps li::before {
  content: counter(step);
  display: block;
  margin-bottom: .3em;
  color: var(--grey-b);
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1;
  letter-spacing: -0.05em;
}
.steps p { max-width: 28ch; margin-top: 8px; color: var(--grey-b); font-size: 17px; line-height: 1.4; }

/* ---------- Contact ---------- */
.cta-giant {
  display: inline-block;
  margin-left: -0.045em;
  font-size: min(13.5vw, 210px);
  line-height: .9;
  letter-spacing: -0.055em;
  text-decoration: none;
}
.cta-giant { padding-bottom: .05em; background: linear-gradient(currentColor, currentColor) 0 100% / 0 .05em no-repeat; transition: background-size .45s cubic-bezier(.2, .7, .2, 1); }
.cta-giant:hover, .cta-giant:focus-visible { background-size: 100% .05em; }
.contact-meta { display: grid; gap: 6px; margin-top: 32px; color: var(--grey-b); font-size: clamp(18px, 1.6vw, 22px); }
.contact-meta .js-addr { color: var(--white); }
.contact-meta .js-addr:empty { display: none; }

.foot { display: flex; justify-content: space-between; gap: 16px; padding: 28px var(--pad); border-top: 1px solid var(--line-b); background: var(--black); color: var(--grey-b); font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}

/* ---------- Motion ----------
   html.anim = app.js runs. Without it, all content shows and nothing moves.
   html.calm = Reduce Motion is on: fades only, no moving parts.
   A [data-reveal] block gets .in when it comes into view. --d is the delay of one part. */
.dust-canvas { position: fixed; inset: 0; z-index: 20; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: difference; }

.anim [data-reveal] :is(.ad-headline, .tub text, .ad-offer, .ad-ai, .key, .facts-title, .facts-serving, tr, .facts-notes),
.anim :is(.parts, .steps)[data-reveal] > li {
  opacity: 0;
  transition: opacity .5s ease var(--d, 0s);
}
.anim [data-reveal].in :is(.ad-headline, .tub text, .ad-offer, .ad-ai, .key, .facts-title, .facts-serving, tr, .facts-notes),
.anim :is(.parts, .steps)[data-reveal].in > li {
  opacity: 1;
}

/* The ad diagram builds in the order a, b, c, d. The tub draws its own lines. */
.ad-frame .ad-headline .key { --d: .15s; }
.ad-frame .tub text { --d: .95s; }
.ad-frame .key-tub { --d: 1.05s; }
.ad-frame .ad-offer { --d: 1.25s; }
.ad-frame .ad-foot > span:first-child .key { --d: 1.35s; }
.ad-frame .ad-ai { --d: 1.5s; }
.ad-frame .ad-ai .key { --d: 1.6s; }
.anim:not(.calm) .ad-frame[data-reveal] .key {
  transform: scale(0);
  transition: opacity .2s ease var(--d, 0s), transform .4s cubic-bezier(.3, 1.6, .5, 1) var(--d, 0s);
}
.anim:not(.calm) .ad-frame[data-reveal].in .key { transform: none; }
.anim:not(.calm) .ad-frame[data-reveal] .tub :is(rect, path) {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s cubic-bezier(.5, 0, .2, 1) .25s;
}
.anim:not(.calm) .ad-frame[data-reveal].in .tub :is(rect, path) { stroke-dashoffset: 0; }
.calm .ad-frame[data-reveal] .tub { opacity: 0; transition: opacity .5s ease .25s; }
.calm .ad-frame[data-reveal].in .tub { opacity: 1; }

/* List rows and steps come in one after the other. On wide screens the list keeps time with the diagram. */
.parts > li:nth-child(1), .steps > li:nth-child(1) { --d: .05s; }
.parts > li:nth-child(2), .steps > li:nth-child(2) { --d: .17s; }
.parts > li:nth-child(3), .steps > li:nth-child(3) { --d: .29s; }
.parts > li:nth-child(4), .steps > li:nth-child(4) { --d: .41s; }
@media (min-width: 900px) {
  .parts > li:nth-child(1) { --d: .15s; }
  .parts > li:nth-child(2) { --d: 1.05s; }
  .parts > li:nth-child(3) { --d: 1.35s; }
  .parts > li:nth-child(4) { --d: 1.6s; }
}
.anim:not(.calm) :is(.parts, .steps)[data-reveal] > li {
  transform: translateY(12px);
  transition: opacity .5s ease var(--d, 0s), transform .6s cubic-bezier(.2, .7, .2, 1) var(--d, 0s);
}
.anim:not(.calm) :is(.parts, .steps)[data-reveal].in > li { transform: none; }

/* The Pilot Facts label prints from the top down. The black bars draw from the left. */
.facts-serving { --d: .1s; }
.rule-thick { --d: .15s; }
.facts > table:nth-of-type(1) thead tr { --d: .3s; }
.facts > table:nth-of-type(1) tbody tr:nth-child(1) { --d: .38s; }
.facts > table:nth-of-type(1) tbody tr:nth-child(2) { --d: .46s; }
.facts > table:nth-of-type(1) tbody tr:nth-child(3) { --d: .54s; }
.facts > table:nth-of-type(1) tbody tr:nth-child(4) { --d: .62s; }
.facts > div:nth-of-type(2) { --d: .68s; }
.facts > table:nth-of-type(2) tbody tr:nth-child(1) { --d: .78s; }
.facts > table:nth-of-type(2) tbody tr:nth-child(2) { --d: .86s; }
.facts > table:nth-of-type(2) tbody tr:nth-child(3) { --d: .94s; }
.facts > table:nth-of-type(2) tbody tr:nth-child(4) { --d: 1.02s; }
.facts > div:nth-of-type(3) { --d: 1.08s; }
.facts-notes { --d: 1.2s; }
.anim:not(.calm) .facts[data-reveal] :is(.rule-thick, .rule-mid) {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.6, 0, .2, 1) var(--d, 0s);
}
.anim:not(.calm) .facts[data-reveal].in :is(.rule-thick, .rule-mid) { transform: none; }