/* ============================================================================
   Drinkwell — component layer
   ----------------------------------------------------------------------------
   Rules for anyone (human or Claude) editing this file:
     1. No raw hex, px font size, or radius. Use a token from tokens.css.
     2. No box-shadow. Depth comes from --bg-alt fills and hairlines.
     3. No gradient on text, ever. That single effect is most of what reads
        as "AI made this".
     4. Sections are separated by air, not by rules or coloured bands.
     5. If a component needs a new colour, add a token first.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Layout primitives --------------------------------------------------- */
.wrap  { width: 100%; max-width: var(--w-body); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: var(--w-wide); }
.wrap--text { max-width: var(--w-text); }
.section    { padding-block: var(--section-y); }
.section--sm{ padding-block: var(--section-y-sm); }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--bg-dark); color: var(--ink-inverse); }

/* --- Type -----------------------------------------------------------------
   Semantic classes, not utility soup. A section head is always .headline. */
.eyebrow {
  font-size: var(--t-caption);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-3);
}
.section--dark .eyebrow { color: var(--ink-inverse-2); }

.display {
  font-size: var(--t-display);
  font-weight: var(--w-semi);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
.headline {
  font-size: var(--t-headline);
  font-weight: var(--w-semi);
  line-height: var(--lh-head);
  letter-spacing: var(--track-headline);
  text-wrap: balance;
}
.title {
  font-size: var(--t-title);
  font-weight: var(--w-semi);
  line-height: var(--lh-title);
  letter-spacing: var(--track-title);
}
.lead {
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--track-body);
  color: var(--ink-2);
  text-wrap: pretty;
}
.section--dark .lead { color: var(--ink-inverse-2); }
.caption { font-size: var(--t-caption); color: var(--ink-3); }

/* --- Links and buttons ----------------------------------------------------
   Apple uses a chevron text link far more than a button. Buttons are reserved
   for the one action that matters on the page. */
.link {
  color: var(--accent);
  font-size: var(--t-lead);
  display: inline-flex;
  align-items: baseline;
  gap: .3em;
}
.link:hover { text-decoration: underline; text-underline-offset: .2em; }
.link::after {
  content: "\203A";                 /* single right chevron */
  font-size: 1.15em;
  line-height: 1;
  transition: transform var(--dur-fast) var(--ease);
}
.link:hover::after { transform: translateX(2px); }

.btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: var(--t-body);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-body);
  padding: .7em 1.4em;
  border-radius: var(--r-pill);
  transition: background var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--accent-hover); }

/* --- Nav ------------------------------------------------------------------ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--nav-bg);
  -webkit-backdrop-filter: var(--nav-blur);
  backdrop-filter: var(--nav-blur);
  border-bottom: 1px solid var(--hairline-soft);
}
.nav__in {
  max-width: var(--w-wide); margin-inline: auto;
  padding-inline: var(--gutter);
  height: var(--nav-h);
  display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem);
}
/* The logo is set at 22px in a 48px bar: the mark reads at a glance and the
   wordmark still has air above and below it. Sized by height with width auto so
   the SVG's own 4.11:1 ratio drives the box and nothing can squash it. */
.nav__brand { display: flex; align-items: center; margin-right: auto; }
.nav__logo  { display: block; height: 22px; width: auto; }
@media (max-width: 420px) { .nav__logo { height: 20px; } }
.nav__link { font-size: var(--t-caption); color: var(--ink-2); white-space: nowrap; }
.nav__link:hover { color: var(--ink); }
.nav__cta { font-size: var(--t-caption); font-weight: var(--w-medium); background: var(--accent); color: #fff; padding: .45em 1em; border-radius: var(--r-pill); }
.nav__cta:hover { background: var(--accent-hover); }
@media (max-width: 800px) { .nav__link { display: none; } }

/* --- Hero -----------------------------------------------------------------
   Centred, enormous, and then it gets out of the way. The photograph runs
   full-bleed underneath with no overlay -- the previous site put a blue wash
   over a portrait and lost both the face and the credibility. */
.hero { padding-block: clamp(4.5rem, 10vw, 8.5rem) 0; text-align: center; }
.hero__sub { margin: var(--stack-3) auto 0; max-width: 34rem; }
.hero__links { margin-top: var(--stack-3); display: flex; gap: var(--stack-4); justify-content: center; flex-wrap: wrap; }

/* --- Versatility band -----------------------------------------------------
   Stands where the hero photograph used to. Two horizontal rows: the media on
   top, the delivery formats beneath, and a rail showing the span between a
   hand-pump retrofit and a mega scheme. Horizontal flow with the media leading
   is a standing rule, not a layout preference -- do not stack these as columns
   and do not put the formats first.

   The media images are transparent WebP, so they composite straight onto the
   page. That is the preferred format for any product shot here: it removes the
   background-seam problem entirely. */
.band { text-align: center; }
/* The band sits inside the solution section, under the four named parts, so it
   needs its own separation from them. Section padding is already handling the
   space above and below the section as a whole. */
.band--joined { margin-top: var(--stack-5); }
.band__label {
  font-size: var(--t-caption);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-3);
}
.band__label--mid { margin-top: var(--stack-4); }

.band__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--stack-3); margin-top: var(--stack-3); }
@media (max-width: 760px) { .band__row { grid-template-columns: 1fr; gap: var(--stack-4); } }

/* Media row. No card, no fill -- the beads sit directly on the page. */
.med { display: flex; flex-direction: column; align-items: center; }
/* The three media were photographed at different distances, so left alone they
   render at three different sizes with no shared ground line and the row reads
   as an accident. A fixed-height box with object-fit:contain and bottom
   alignment normalises the footprint and sits all three beads on one baseline,
   which is what makes a product lineup read as a lineup. */
.med__img {
  width: 100%; max-width: 16rem;
  height: clamp(6.5rem, 11vw, 9.5rem);
  object-fit: contain; object-position: bottom;
}
.med figcaption { margin-top: var(--stack-2); display: flex; flex-direction: column; gap: 2px; }
.med__name { font-weight: var(--w-semi); letter-spacing: var(--track-title); }
.med__role { font-size: var(--t-small); color: var(--c-horse); font-weight: var(--w-medium); }
.med__spec { font-size: var(--t-caption); color: var(--ink-3); }

/* Format row. These are photographs, so they get the media radius. */
.fmt { display: flex; flex-direction: column; }
.fmt__img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; border-radius: var(--r-card); }
.fmt figcaption { margin-top: var(--stack-2); display: flex; flex-direction: column; gap: 2px; }
.fmt__name { font-weight: var(--w-semi); letter-spacing: var(--track-title); }
.fmt__cap  { font-size: var(--t-caption); color: var(--ink-3); }

.band__rail {
  margin-top: var(--stack-4);
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: var(--stack-2);
  font-size: var(--t-caption); font-weight: var(--w-medium);
  font-variant-numeric: tabular-nums;
}
.band__track { height: 1px; background: var(--hairline); position: relative; }
.band__track::before,
.band__track::after {
  content: ""; position: absolute; top: 50%; width: 5px; height: 5px;
  border-radius: 50%; background: var(--ink-3); transform: translateY(-50%);
}
.band__track::before { left: 0; }
.band__track::after  { right: 0; }
.band__note { margin-top: var(--stack-2); font-size: var(--t-caption); color: var(--ink-3); text-wrap: pretty; }

/* --- Horse · Harness · Habit ----------------------------------------------
   Each part tints only its eyebrow. Tinting headlines or backgrounds as well
   would turn a restrained page into a colour-coded one. */
.eyebrow--part { color: var(--part, var(--ink-3)); }
.pt-horse   { --part: var(--c-horse); }
.pt-harness { --part: var(--c-harness); }
.pt-habit   { --part: var(--c-habit); }
.pt-hay     { --part: var(--c-hay); }

.points { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--stack-3); margin-top: var(--stack-5); }
@media (max-width: 900px) { .points { grid-template-columns: repeat(2, 1fr); row-gap: var(--stack-4); } }
@media (max-width: 520px) { .points { grid-template-columns: 1fr; } }
.point { border-top: 1px solid var(--hairline); padding-top: var(--stack-2); }
.point__value { font-size: var(--t-title); font-weight: var(--w-semi); letter-spacing: var(--track-title); }
.point__label { margin-top: 2px; font-size: var(--t-caption); font-weight: var(--w-semi); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--part, var(--ink-3)); }
.point__note  { margin-top: var(--stack-1); font-size: var(--t-small); color: var(--ink-2); text-wrap: pretty; }

/* --- Stages: build / neglect / runaway -------------------------------------
   The temptation here is arrows, a loop diagram, or red. All three would make
   the sector's failure mode look like our illustration of it. Three hairline
   columns in the same rhythm as .points, numbered and set in the page's own
   ink, state it as fact and let the reader supply the alarm. */
.stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--stack-4); margin-top: var(--stack-5); }
@media (max-width: 760px) { .stages { grid-template-columns: 1fr; gap: var(--stack-3); } }
.stage { border-top: 1px solid var(--hairline); padding-top: var(--stack-2); }
.stage__step { font-size: var(--t-caption); letter-spacing: var(--track-caps); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.stage__name { margin-top: var(--stack-1); font-size: var(--t-title); font-weight: var(--w-semi); letter-spacing: var(--track-title); }
.stage__note { margin-top: var(--stack-1); font-size: var(--t-small); color: var(--ink-2); text-wrap: pretty; }
.stages__close { margin-top: var(--stack-5); max-width: var(--w-text); font-size: var(--t-lead); line-height: var(--lh-lead); letter-spacing: var(--track-title); }

/* --- The 3Ts --------------------------------------------------------------
   Tariffs, taxes and transfers are peers, not a ranking, so they get identical
   columns and no colour between them. Only the eyebrow above carries --c-hay. */
.tees { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--stack-4); margin-top: var(--stack-5); }
@media (max-width: 760px) { .tees { grid-template-columns: 1fr; gap: var(--stack-3); } }
/* Flex column with the note flexing so the __where rule lands on the same
   baseline in all three columns however ragged the copy above it is. */
.tee { display: flex; flex-direction: column; border-top: 1px solid var(--hairline); padding-top: var(--stack-2); }
.tee__name  { font-size: var(--t-title); font-weight: var(--w-semi); letter-spacing: var(--track-title); }
.tee__note  { flex: 1 1 auto; margin-top: var(--stack-1); font-size: var(--t-small); color: var(--ink-2); text-wrap: pretty; }
.tee__where { margin-top: var(--stack-2); padding-top: var(--stack-2); border-top: 1px solid var(--hairline-soft); font-size: var(--t-caption); color: var(--ink-3); text-wrap: pretty; }
.tees__foot { margin-top: var(--stack-4); max-width: var(--w-text); font-size: var(--t-caption); color: var(--ink-3); text-wrap: pretty; }

/* --- Ladder: one product at four depths ------------------------------------
   Hairline rows in the same rhythm as .entry, with a chip set on the right
   showing which of the four parts we carry at that depth. The lit chips inherit
   --part from pt-<key>, so this needs no legend and no new colours: the reader
   already met blue Horse, rust Harness, gold Hay and teal Habit further up.

   Dimmed chips use opacity rather than a fifth grey token. They deliberately
   fail contrast, which is why .rung__parts carries the aria-label and the chips
   are decorative. */
.rungs { margin-top: var(--stack-5); }
.rung {
  display: grid; grid-template-columns: 1fr auto; gap: var(--stack-3) var(--stack-4);
  align-items: start; padding-block: var(--stack-3);
  border-top: 1px solid var(--hairline);
}
.rung:last-child { border-bottom: 1px solid var(--hairline); }
.rung__buyer { font-size: var(--t-caption); font-weight: var(--w-semi); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); }
.rung__name  { margin-top: var(--stack-1); font-size: var(--t-title); font-weight: var(--w-semi); letter-spacing: var(--track-title); }
.rung__note  { margin-top: var(--stack-1); font-size: var(--t-small); color: var(--ink-2); max-width: 36rem; text-wrap: pretty; }
.rung__parts { display: flex; gap: var(--stack-2); align-items: baseline; padding-top: 2px; }
.rung__part  { font-size: var(--t-caption); font-weight: var(--w-semi); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--part, var(--ink-3)); }
.rung__part.is-off { color: var(--ink-3); opacity: .3; }
@media (max-width: 720px) { .rung { grid-template-columns: 1fr; } .rung__parts { padding-top: 0; } }
.rungs__foot { margin-top: var(--stack-4); max-width: var(--w-text); font-size: var(--t-caption); color: var(--ink-3); text-wrap: pretty; }

/* --- Figures --------------------------------------------------------------
   Numbers on the page, not in boxes. The old site had four glowing bordered
   cards with blue numerals; that is the single most template-looking element
   a startup homepage can have. Here they are separated by hairlines only. */
.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.figure { padding: var(--stack-2) var(--stack-3); border-left: 1px solid var(--hairline); }
.figure:first-child { border-left: 0; padding-left: 0; }
.figure__value {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-headline);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.figure__label { margin-top: var(--stack-1); font-size: var(--t-caption); color: var(--ink-3); text-wrap: balance; }
@media (max-width: 720px) {
  .figures { grid-template-columns: repeat(2, 1fr); row-gap: var(--stack-4); }
  .figure:nth-child(odd) { border-left: 0; padding-left: 0; }
}

/* --- Section head --------------------------------------------------------- */
.head { max-width: var(--w-text); }
.head--center { margin-inline: auto; text-align: center; }
.head .eyebrow + .headline { margin-top: var(--stack-2); }
.head .headline + .lead { margin-top: var(--stack-3); }

/* --- Product shot ---------------------------------------------------------
   The resin photograph is already lit like an Apple product shot: object on
   white seamless. Centre it, give it room, and say nothing over the top of it. */
.product { text-align: center; }
.product__media { margin-top: clamp(2.5rem, 5vw, 4rem); }
/* No radius, no frame, no mask. The media shots are transparent WebP, so they
   composite straight onto whatever the section colour is and there is no edge
   to hide. Keep it that way: shoot or cut product images to transparency
   rather than reaching for scripts/normalize_product_shot.py, which exists
   only as the fallback for an opaque photograph on a grey sweep. */
.product__media img {
  margin-inline: auto;
  max-width: 40rem; width: 100%;
}
.product__caption { margin-top: var(--stack-2); }

/* --- Spec table -----------------------------------------------------------
   Apple's tech-specs treatment: label left, value right, hairline between. */
.specs { margin: var(--stack-5) auto 0; max-width: var(--w-text); }
.spec {
  display: grid; grid-template-columns: 1fr auto;
  align-items: baseline; gap: var(--stack-2);
  padding-block: var(--stack-3);
  border-top: 1px solid var(--hairline);
  text-align: left;
}
.spec:last-child { border-bottom: 1px solid var(--hairline); }
.spec__label { font-weight: var(--w-medium); }
.spec__value { font-size: var(--t-title); font-weight: var(--w-semi); letter-spacing: var(--track-title); font-variant-numeric: tabular-nums; }
.spec__note  { grid-column: 1 / -1; margin-top: calc(var(--stack-1) * -1); font-size: var(--t-caption); color: var(--ink-3); }

/* --- Card grid ------------------------------------------------------------
   Flat --bg-alt fills, no border, no shadow. The image sits inside the card
   at the top with the corners inherited. */
.cards { display: grid; gap: var(--stack-3); grid-template-columns: repeat(3, 1fr); margin-top: var(--stack-5); }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }
.card {
  background: var(--bg-alt);
  border-radius: var(--r-card);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--dur) var(--ease-out);
}
.card:hover { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }
.card__img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.card__body { padding: var(--stack-3); display: flex; flex-direction: column; gap: var(--stack-1); flex: 1; }
.card__body p { color: var(--ink-2); font-size: var(--t-small); }
/* Names a real, checkable deployment. It is the line that turns a claim into
   evidence, so it sits above the CTA and is pushed to the foot of the card. */
.card__meta {
  margin-top: auto; padding-top: var(--stack-2);
  font-size: var(--t-caption); color: var(--ink-3); text-wrap: pretty;
}
.card__more { padding-top: var(--stack-1); color: var(--accent); font-size: var(--t-small); }
.card__more::after { content: " \203A"; }

/* --- Contaminant list -----------------------------------------------------
   A list, not five icon circles in a row. */
.list { margin-top: var(--stack-5); border-top: 1px solid var(--hairline); }
.row {
  display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr auto;
  align-items: baseline; gap: var(--stack-3);
  padding-block: var(--stack-3);
  border-bottom: 1px solid var(--hairline);
  transition: padding-inline-start var(--dur) var(--ease-out);
}
.row:hover { padding-inline-start: var(--stack-1); }
@media (prefers-reduced-motion: reduce) { .row:hover { padding-inline-start: 0; } }
.row__name { font-size: var(--t-title); font-weight: var(--w-semi); letter-spacing: var(--track-title); }
.row__note { color: var(--ink-2); font-size: var(--t-small); }
.row__go   { color: var(--accent); font-size: var(--t-lead); }
@media (max-width: 700px) {
  .row { grid-template-columns: 1fr auto; }
  .row__note { grid-column: 1 / -1; }
}

/* --- Backers --------------------------------------------------------------
   Wordmarks as type. Real logos would be better; setting them in the page
   typeface at one weight is the honest interim and still reads as a system. */
.backers { display: grid; gap: var(--stack-5); grid-template-columns: repeat(3, 1fr); margin-top: var(--stack-5); }
@media (max-width: 820px) { .backers { grid-template-columns: 1fr; gap: var(--stack-4); } }
.backer__kind { font-size: var(--t-caption); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); padding-bottom: var(--stack-2); border-bottom: 1px solid var(--hairline); }
.backer__names { margin-top: var(--stack-2); display: flex; flex-direction: column; gap: var(--stack-1); }
.backer__names li { list-style: none; font-size: var(--t-lead); font-weight: var(--w-medium); letter-spacing: var(--track-title); }

/* --- Highlight ------------------------------------------------------------ */
.highlight { margin-top: var(--stack-5); padding: clamp(2rem, 5vw, 3.5rem); background: var(--bg-alt); border-radius: var(--r-media); text-align: center; }
.highlight__value { font-size: clamp(3rem, 8vw, 5rem); font-weight: var(--w-semi); letter-spacing: var(--track-display); line-height: 1; }
.highlight__label { margin-top: var(--stack-2); font-size: var(--t-lead); font-weight: var(--w-medium); }
.highlight__body  { margin-top: var(--stack-1); color: var(--ink-2); }
.highlight__body + .link { margin-top: var(--stack-3); }

/* --- Awards + press -------------------------------------------------------
   Two column hairline lists, same rhythm as the spec table so the page reads
   as one system rather than a stack of unrelated widgets. */
.entries { margin-top: var(--stack-4); }
.entry {
  display: grid; grid-template-columns: 1fr auto; gap: var(--stack-3);
  align-items: baseline; padding-block: var(--stack-3);
  border-top: 1px solid var(--hairline);
}
.section--dark .entry { border-color: var(--hairline-dark); }
.entry:last-child { border-bottom: 1px solid var(--hairline); }
.section--dark .entry:last-child { border-color: var(--hairline-dark); }
.entry__main { font-size: var(--t-title); font-weight: var(--w-semi); letter-spacing: var(--track-title); }
.entry__sub  { display: block; margin-top: var(--stack-1); font-size: var(--t-small); color: var(--ink-3); font-weight: var(--w-regular); letter-spacing: var(--track-body); }
.section--dark .entry__sub { color: var(--ink-inverse-2); }
.entry__year { font-size: var(--t-small); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.section--dark .entry__year { color: var(--ink-inverse-2); }

/* --- Closer --------------------------------------------------------------- */
.closer { text-align: center; }
.closer .lead { margin: var(--stack-3) auto 0; max-width: 34rem; }
.closer .btn { margin-top: var(--stack-4); }
.closer__media { margin-top: clamp(3rem, 6vw, 5rem); }
.closer__media img { width: 100%; border-radius: var(--r-media); aspect-ratio: 21 / 9; object-fit: cover; }

/* --- Footer --------------------------------------------------------------- */
.footer { background: var(--bg-alt); padding-block: var(--section-y-sm); font-size: var(--t-caption); color: var(--ink-2); }
.footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--stack-4); }
@media (max-width: 760px) { .footer__cols { grid-template-columns: repeat(2, 1fr); } }
.footer__heading { color: var(--ink); font-weight: var(--w-semi); margin-bottom: var(--stack-2); }
.footer__cols ul { list-style: none; display: flex; flex-direction: column; gap: .55em; }
.footer a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.footer__note { margin-top: var(--stack-5); padding-top: var(--stack-3); border-top: 1px solid var(--hairline); max-width: var(--w-text); }
.footer__bar { margin-top: var(--stack-3); display: flex; gap: var(--stack-3); flex-wrap: wrap; align-items: baseline; }
.footer__bar .legal { margin-right: auto; color: var(--ink-3); }

/* --- Scroll reveal --------------------------------------------------------
   Fade and 24px rise, staggered by the observer in js/reveal.js. Elements are
   visible by default so the page still reads with JS disabled or blocked. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(24px); }
  .js .reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  }
}