/* == fonts: generated by `npm run fonts` (sites/tools/fonts.mjs), do not edit by hand == */
/* Self-hosted from Google Fonts. To change the faces, edit the URL below and
   re-run `npm run fonts`; it reads the URL back from here, and the preload
   list too (PAGE.md, "Preload what paints first").
   source: https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Nunito:wght@800;900&display=swap
   preload: Inter:400,Nunito:900
*/
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/nunito-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/nunito-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/nunito-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/nunito-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* == end fonts == */

/* ===========================================================================
   Strawtastik
   Built from the three page mockups Jacob supplied on 12 Sep 2026:
     design/mockup/home-850.png       850px native  -> x1.694 at 1440
     design/mockup/wholesale-1024.png 1024px native -> x1.406 at 1440
     design/mockup/support-1024.png   1024px native -> x1.406 at 1440

   Every value below traces to design/SPEC.md. A token comment reads
   "<mockup px>m" (a reading off the mockup, in its own pixels) and the build
   value is that reading times the page's scale.

   HOW SIZES RAMP. The mockups are one width each, and the design is
   proportional: the panel wraps measure 1364 build px on all three pages. So
   every size is written as N * --u, where --u is 1px at 1440 and above and
   shrinks with the viewport below it. A floor (max()) holds legibility on a
   phone. That is MOBILE.md rule 1's clamp with its upper anchor exactly on
   the measured value, solved once instead of per token.
   =========================================================================== */

:root {
  --u: min(1px, calc(100vw / 1440));

  /* --- Colour: sampled off home-850.png, darkest 8% of each text run ------ */
  --blue: #0548F2;         /* headings, titles, links: 024DF1 / 0640F4 */
  --orange: #FD5126;       /* buttons: FD4E21 / FD5329 */
  --orange-hi: #FF6B3D;    /* button top edge, read off the hero button */
  --ink: #2C354C;          /* hero subhead, form labels */
  --body: #5F6678;         /* paragraph copy */
  --muted: #7C8494;        /* captions, strip subtitles: sampled 838D9D, darkened to 4.5:1 */
  --faint: #8E95A3;        /* footer small print: sampled B4B8C4, darkened to 3:1 */
  --green: #30B76D;        /* CTA checkmarks */
  --panel: #F0F8FE;        /* every light-blue panel */
  --page: #FEFEFE;
  --line: #E6ECF3;         /* card and field borders */
  --rule: #EEEFF2;         /* footer rule */
  --error: #C62828;        /* field marking and the failed status line */

  /* Rainbow text. Stops sampled from "Tastik.", "straw" and "boldly." */
  --grad-cool: linear-gradient(90deg, #1057EE 0%, #1AA7CF 35%, #1BC3AD 58%, #32C18A 75%, #F6B722 100%);
  --grad-warm: linear-gradient(90deg, #9A44B9 0%, #F53097 45%, #FC6790 75%, #FBB036 100%);
  --grad-pink: linear-gradient(90deg, #F63294 0%, #9D50B2 100%);
  --grad-top: linear-gradient(90deg, #F22F90 0%, #DB449A 22%, #23BD9F 48%, #1EC690 60%, #258BDE 82%, #2967F6 100%);

  /* --- Type families ------------------------------------------------------
     Not identifiable from a generated mockup. These are the brand's own:
     strawtastik.com specifies Nunito, Inter and Caveat (business brief), and
     the supplied wordmark SVG sets Nunito 800. SPEC.md, Assumptions. */
  --display: "Nunito", "Arial Rounded MT Bold", system-ui, sans-serif;
  --text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- Layout ------------------------------------------------------------ */
  --wrap: calc(1364 * var(--u));          /* panels 23-827m on home x1.694 */
  --gut: max(16px, calc(38 * var(--u)));  /* 23m */
  --inner: calc(1098 * var(--u));         /* logo 101m to nav button 749m */
  --stack: calc(13 * var(--u));           /* 7-9m between stacked panels */
  --r-panel: max(14px, calc(18 * var(--u)));  /* 10-11m */
  --r-card: max(12px, calc(14 * var(--u)));   /* 8m */

  /* --- Type sizes (build px at 1440, floor for phones) ------------------- */
  --f-topbar: max(13px, calc(20 * var(--u)));     /* width-matched: 250-545m = 500px */
  --f-logo: max(22px, calc(37 * var(--u)));       /* width-matched: 101-235m = 227px */
  --f-nav: max(15px, calc(18.6 * var(--u)));      /* 11m, cap 8m */
  --f-h1: max(46px, calc(92 * var(--u)));         /* width-matched: "Live Tastik." 102-384m = 478px */
  --lh-h1: 0.98;                                  /* pitch 57m */
  --f-h1-support: max(42px, calc(84 * var(--u)));    /* width: "sip back on track." 113-599m x1.406 = 683px */
  --f-h1-wholesale: max(40px, calc(63 * var(--u)));  /* width: "Bring brighter sips" 129-519m x1.406 = 548px */
  --f-lead: max(18px, calc(23.3 * var(--u)));     /* width-matched: 103-399m = 501px */
  --f-h2: max(32px, calc(46 * var(--u)));         /* width-matched: better 315, press 479, everything 454px */
  --lh-h2: 0.95;                                  /* pitch 27.5m */
  --f-h2-sm: max(28px, calc(39 * var(--u)));      /* width-matched: made 529, brush 388, faq 297px */
  --f-h2-xs: max(26px, calc(34.5 * var(--u)));    /* width-matched: reviews 380, colorful 305, cta 315px */
  --f-body: max(16px, calc(23 * var(--u)));       /* 13.6m, cap 10m */
  --lh-body: 1.2;                                 /* pitch 16.5m */
  --f-copy: max(16px, calc(19.5 * var(--u)));     /* 11.5m section paragraphs */
  --lh-copy: 1.33;                                /* pitch 15.3m */
  --f-title: max(16px, calc(19.4 * var(--u)));    /* width-matched: "Soft on Teeth" 120-193m = 124px */
  --f-small: max(14px, calc(17.8 * var(--u)));    /* 10.5m, strip subtitles */
  --f-tiny: max(13px, calc(16 * var(--u)));       /* 9.5m, captions, footer */
  --f-micro: max(12px, calc(13.6 * var(--u)));    /* 8m, footer small print */
  --f-btn: max(16px, calc(21.7 * var(--u)));      /* 12.8m, cap 9m */
  --f-btn-sm: max(14px, calc(17 * var(--u)));     /* 10m, cap 7m */

  /* --- Components -------------------------------------------------------- */
  --h-topbar: max(30px, calc(37 * var(--u)));     /* 0-21m */
  /* 96u, not the mockup's 68: the header carries Chris's whole lockup rather
     than a text wordmark (Jacob, 17 Sep 2026), and the mark is 1.29:1, so it
     needs height where a line of type needed none. 72 for the logo + 12 above
     and below. */
  --h-header: max(76px, calc(96 * var(--u)));     /* was 68m, see the logo */
  --h-btn: max(48px, calc(59 * var(--u)));        /* 274-308m */
  --h-btn-sm: max(44px, calc(42 * var(--u)));     /* 30-54m; 44 is the touch floor */
  --px-btn: max(22px, calc(44 * var(--u)));       /* (158 - 86 text - 20 icon) / 2 */
  --px-btn-sm: max(14px, calc(36 * var(--u)));    /* (134 - 76 - 15) / 2 */
  --icon: max(30px, calc(50 * var(--u)));         /* strip icons 27-35m */
  --icon-sm: max(22px, calc(29 * var(--u)));      /* bullet and row icons 17m */
  --h-field: max(46px, calc(46 * var(--u)));      /* support inputs 33m x1.406 */
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* The header is sticky, so an anchor lands UNDER it unless the scroll stops
     short by its height. Every in-page link on the site was doing that: /#faq
     put the FAQ heading at 15px with the header ending at 69px. One rule here
     rather than scroll-margin on each target, because the offset is a property
     of the header, not of the sections. */
  scroll-padding-top: calc(var(--h-header) + 14 * var(--u));
}
body {
  margin: 0;
  background: var(--page);
  color: var(--body);
  font-family: var(--text);
  font-size: var(--f-body);
  line-height: var(--lh-body);
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 50;
  background: var(--blue); color: #fff; padding: 10px 16px; border-radius: 8px;
}
.skip:focus { left: 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: min(100%, calc(var(--wrap) + 2 * var(--gut))); margin-inline: auto; padding-inline: var(--gut); }
.inner { width: min(100%, calc(var(--inner) + 2 * var(--gut))); margin-inline: auto; padding-inline: var(--gut); }

/* --- Type ---------------------------------------------------------------- */
.h1, .h2, .h2-sm, .h2-xs, .title {
  font-family: var(--display);
  font-weight: 900;
  color: var(--blue);
  letter-spacing: -0.01em;
}
/* Both leadings are below 1x on purpose: they are the baseline pitch measured
   off the mockups (57m on home-850, 27.5m on the two 1024s), and the headings
   they set are two or three short lines that would drift apart at 1x. The
   sweep is told so here rather than being left to report it at every width. */
.h1 {
  font-size: var(--f-h1); line-height: var(--lh-h1); letter-spacing: -0.02em;
  --sweep-allow: "leading-too-tight: 0.98 is the 57m baseline pitch on home-850.png";
}
.h2 {
  font-size: var(--f-h2); line-height: var(--lh-h2);
  --sweep-allow: "leading-too-tight: 0.95 is the 27.5m baseline pitch on the mockups";
}
.h2-sm { font-size: var(--f-h2-sm); line-height: 1.02; }
.h2-xs { font-size: var(--f-h2-xs); line-height: 1.02; }
.title { font-size: var(--f-title); line-height: 1.2; font-weight: 800; letter-spacing: 0; }
.rb, .rb-warm, .rb-pink {
  background: var(--grad-cool);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  /* The gradient box has to cover descenders or "p" and "y" lose their tails. */
  padding-bottom: 0.08em; margin-bottom: -0.08em;
}
.rb-warm { background-image: var(--grad-warm); }
.rb-pink { background-image: var(--grad-pink); }
.lead { font-size: var(--f-lead); line-height: 1.25; font-weight: 600; color: var(--ink); }
.copy { font-size: var(--f-copy); line-height: var(--lh-copy); }
.small { font-size: var(--f-small); line-height: 1.3; color: var(--muted); }

/* Handwritten asides. ARTWORK, as of 17 Sep 2026 - Jacob's brush-written set,
   replacing the live Caveat text these were built as. Bundle 4's README said
   never to bake them in; this supersedes it, because the art is the brand's
   own hand rather than a font standing in for it.

   What that costs, so nobody rediscovers it: the phrases are no longer
   selectable or translatable, they cannot reflow, and each one is a file. The
   alt text carries the words, so a screen reader still reads them.

   The tilt stays in CSS, not in the art: every note shares one angle that way,
   and a tilt baked into a file cannot be changed without redrawing it. Widths
   are per note, below, and match what the text occupied. */
.hand {
  position: absolute;
  width: calc(150 * var(--u)); height: auto;    /* the common case; see below */
  transform: rotate(-12deg);
  z-index: 4;
}
.decor { position: absolute; pointer-events: none; user-select: none; }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: calc(12 * var(--u));
  height: var(--h-btn);
  padding-inline: var(--px-btn);
  border: 0; border-radius: 999px;
  background: linear-gradient(180deg, var(--orange-hi), var(--orange));
  color: #fff;
  font-family: var(--display); font-weight: 800; font-size: var(--f-btn);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(253, 81, 38, .28);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 calc(10 * var(--u)) calc(22 * var(--u)) rgba(253, 81, 38, .36); }
.btn--sm { height: var(--h-btn-sm); padding-inline: var(--px-btn-sm); font-size: var(--f-btn-sm); gap: calc(9 * var(--u)); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: progress; transform: none; }
/* Button glyphs are Bundle 3 icons used as masks, so they take the text colour
   without editing the supplied files. */
.ico {
  flex: none; display: inline-block;
  width: 1.15em; height: 1.15em;
  background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
}
.link {
  display: inline-flex; align-items: center; gap: .35em;
  font-family: var(--display); font-weight: 800; font-size: var(--f-btn-sm);
  color: var(--blue); text-decoration: none; min-height: 44px;
}
.link:hover { text-decoration: underline; }

/* --- Top bar and header -------------------------------------------------- */
.topbar {
  background: var(--grad-top);
  color: #fff;
  font-family: var(--display); font-weight: 800; font-size: var(--f-topbar);
  min-height: var(--h-topbar);
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 4px 16px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.topbar span + span::before { content: "•"; margin-inline: .55em; }

.header {
  position: sticky; top: 0; z-index: 20;
  background: #fff;
  border-bottom: 1px solid #EEF1F5;
  box-shadow: 0 2px 10px rgba(20, 40, 80, .04);
}
.header .inner {
  min-height: var(--h-header);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
/* Chris's own lockup, 17 Sep 2026, in place of the gradient text wordmark the
   mockup drew - the whole mark in both places, straws and rainbow included.
   The wordmark-band crop that shipped first cut those off, which read as the
   logo being cropped, because it was.

   72px in the header, and --h-header grew from 68u to 96u to hold it: the mark
   is 1.29:1, so it needs height where a line of type needed none. On a phone
   it is 52, against a 76px header floor. Below about 48 the "SILICONE STRAWS"
   ribbon closes up and the name stops reading, which is what sets both. */
.logo {
  text-decoration: none;
  display: inline-flex; align-items: center;
  padding-block: 6px;
}
.logo img { display: block; width: auto; height: max(52px, calc(72 * var(--u))); }
.logo--lockup img { height: max(64px, calc(92 * var(--u))); }
.nav { display: flex; align-items: center; gap: calc(22 * var(--u)); }   /* 22.5m measured for five links; six fit the same column at 13m */
.nav a {
  font-size: var(--f-nav); font-weight: 500; color: #596277; text-decoration: none;
  white-space: nowrap;
  padding-block: 10px; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--blue); }
.nav a[aria-current="page"] { color: var(--blue); font-weight: 600; border-bottom-color: var(--blue); }
.navtoggle { display: none; }

/* --- Panels -------------------------------------------------------------- */
main { display: block; }
.gap-top { margin-top: var(--stack); }
.stack > * + * { margin-top: var(--stack); }
.panel {
  position: relative;
  background: var(--panel);
  border-radius: var(--r-panel);
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(30, 70, 140, .05);
}
.photo { border-radius: var(--r-panel); overflow: hidden; background: #E9EEF3; }
.photo > img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================================
   HOME
   ========================================================================= */

/* Hero: 65-361m (296m). Copy column starts at 101m, cap top 24m down. */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(60% 90% at 78% 60%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #EDF8FE 0%, #F2FAFE 55%, #F8FCFE 100%);
}
.hero .inner {
  position: relative;
  min-height: calc(501 * var(--u));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.hero__copy { position: relative; z-index: 3; margin-right: calc(-48 * var(--u)); padding-block: calc(30 * var(--u)) calc(32 * var(--u)); }
.hero__copy .lead { margin-top: calc(24 * var(--u)); }       /* 187 -> 204m, less cap offset */
.hero__copy .hero__body { margin-top: calc(14 * var(--u)); max-width: max(300px, calc(480 * var(--u))); } /* 217 -> 230m */
.hero__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: calc(20 * var(--u)) calc(34 * var(--u));
  margin-top: calc(27 * var(--u));                              /* 258 -> 274m */
}
.hero__art {
  position: relative; align-self: stretch;
  display: flex; align-items: center; justify-content: flex-start;
}
/* Real product photograph on white, multiplied into the hero ground so its
   white reads as the ground (Bundle 1, hero-product-set.jpg). 278m tall. */
.hero__art .set {
  width: auto; height: calc(470 * var(--u)); max-height: 100%;
  margin-left: calc(-12 * var(--u));
  mix-blend-mode: multiply;
  position: relative; z-index: 2;
}
.hero .rainbow { right: calc(-120 * var(--u)); bottom: calc(-40 * var(--u)); width: calc(520 * var(--u)); opacity: .22; }
.hero .globe { right: calc(40 * var(--u)); bottom: calc(40 * var(--u)); width: calc(76 * var(--u)); z-index: 2; }
.hero .rays { left: calc(-30 * var(--u)); top: calc(40 * var(--u)); width: calc(90 * var(--u)); transform: rotate(-35deg); }
.hero .note-1 { right: calc(-8 * var(--u)); top: calc(88 * var(--u));  width: calc(150 * var(--u));}
.hero .note-2 { right: calc(120 * var(--u)); bottom: calc(96 * var(--u)); transform: rotate(-8deg);  width: calc(110 * var(--u));}

.ticks {
  display: flex; flex-wrap: wrap; gap: calc(12 * var(--u)) calc(40 * var(--u));
  margin-top: calc(28 * var(--u));                              /* 308 -> 325m */
}
.ticks li { display: flex; align-items: center; gap: calc(12 * var(--u)); font-size: var(--f-tiny); color: var(--muted); }
.ticks img { width: var(--icon-sm); height: var(--icon-sm); }

/* Benefit strip: 369-427m, four columns split by hairlines. */
.strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-block: calc(24 * var(--u));
}
.strip li {
  display: flex; align-items: center; justify-content: center;
  gap: calc(18 * var(--u));
  padding-inline: calc(16 * var(--u));
}
.strip li + li { border-left: 1px solid #DDE7F1; }
.strip img { width: var(--icon); height: var(--icon); flex: none; }
.strip .small { margin-top: 2px; }

/* Better straw: 434-660m. Photo 23-384m, copy from 411m, jar to 830m. */
.better {
  display: grid;
  grid-template-columns: 612fr 752fr;            /* 361m : 444m */
  gap: calc(46 * var(--u));                      /* 384 -> 411m */
  align-items: start;
}
.better .photo { position: relative; aspect-ratio: 361 / 226; }
.better__body { align-self: stretch; position: relative; padding-block: calc(14 * var(--u)); display: grid; grid-template-columns: minmax(0, 1fr) calc(330 * var(--u)); }
.better__copy { position: relative; z-index: 2; }
.better__copy .copy { margin-top: calc(16 * var(--u)); max-width: max(280px, calc(360 * var(--u))); }
.bullets { margin-top: calc(20 * var(--u)); display: grid; gap: calc(14 * var(--u)); }
.bullets li { display: flex; align-items: center; gap: calc(18 * var(--u)); font-size: var(--f-small); color: #6B7080; }
.bullets img { width: var(--icon-sm); height: var(--icon-sm); }
.better__jar { position: relative; margin-right: calc(-6 * var(--u)); }
.better__jar img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: radial-gradient(75% 80% at 55% 55%, #000 55%, transparent 100%);
          mask-image: radial-gradient(75% 80% at 55% 55%, #000 55%, transparent 100%);
}
/* Inside the band, not hanging off it: at right -18u the note was text 113px
   wide, and the artwork at 140 ran past the photograph's edge and was clipped
   (17 Sep 2026). */
.better .note-good { right: calc(10 * var(--u)); top: calc(118 * var(--u)); width: calc(124 * var(--u)); }

/* Press play: 669-795m. Copy from 102m, video 429-749m. */
/* The mockup draws the video 542u wide in a 320/115 letterbox, which crops
   Chris's 16:9 footage top and bottom. He asked for it bigger on the 16 Sep
   call (ask-323), so the panel is 640u at the film's own 16/9: 640x360 against
   the drawn 542x195, and nothing is cut off. The copy column keeps 418px at
   1440, which is wider than the heading's longest line. */
.press {
  display: grid; grid-template-columns: minmax(0, 1fr) calc(640 * var(--u));
  align-items: center;
  gap: calc(40 * var(--u));
  padding: calc(12 * var(--u)) calc(132 * var(--u)) calc(12 * var(--u)) calc(134 * var(--u));
  min-height: calc(213 * var(--u));
}
.press .copy { margin-top: calc(14 * var(--u)); color: #414859; font-size: var(--f-body); line-height: var(--lh-body); }
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-panel); overflow: hidden; }
/* Scoped to the player, not to `img`: the .hand note inside .video carries a
   heart doodle, and a bare `.video img` rule blows it up to fill the panel. */
.video__player { display: block; width: 100%; height: 100%; object-fit: cover; }
.video__play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: max(56px, calc(84 * var(--u))); aspect-ratio: 1;
  border-radius: 50%; border: 3px solid rgba(255, 255, 255, .9);
  background: rgba(20, 24, 32, .55);
  display: grid; place-items: center;
  padding: 0; appearance: none; cursor: pointer;
}
/* Once it is playing the poster furniture would sit over the picture. */
.video.is-playing .video__play { display: none; }
/* The mockup draws this white over the poster at right 56u, top 22u. The 16/9
   frame (ask-323) put it over a bright kitchen - 1.6:1, and no corner of the
   frame beats 1.9:1 - so it sits under the copy instead, in the same pink as
   the page's other hand notes. Static, not absolute: there is nothing to
   position it against here. */
/* Static, not absolute: this one sits under the copy rather than over the
   video, because white handwriting measured 1.6:1 against the 16/9 poster
   (17 Sep 2026). The margins are the rotation's overhang, measured at 1440 -
   -12deg lifts the right end into the paragraph above and drops the left end
   below the box. The colour note that was here went with the text; the art
   carries its own blue. */
.press .note-change {
  position: static; width: calc(210 * var(--u));
  margin-top: calc(44 * var(--u)); margin-bottom: calc(44 * var(--u));
}
.video__play::before {
  content: ""; width: 34%; aspect-ratio: 1; margin-left: 8%;
  background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* One of a kind. NOT IN ANY MOCKUP (ask-318, 16 Sep call). Built from the
   .press band so the two read as one system: same padding, same 40u gap, same
   640u media track, mirrored so the art sits opposite the video above it. The
   art is 3/2, the photograph's own ratio, so it is never cropped. */
.unique {
  display: grid; grid-template-columns: calc(640 * var(--u)) minmax(0, 1fr);
  align-items: center;
  gap: calc(40 * var(--u));
  padding: calc(12 * var(--u)) calc(132 * var(--u)) calc(12 * var(--u)) calc(134 * var(--u));
}
.unique__art { aspect-ratio: 3 / 2; border-radius: var(--r-panel); overflow: hidden; }
.unique__art img { width: 100%; height: 100%; object-fit: cover; }
.unique .copy { margin-top: calc(14 * var(--u)); color: #414859; }   /* = .press .copy */

/* Everything you need: 795-991m, white. Heading at 41m, straws 367-700m. */
.inside {
  position: relative;
  display: grid; grid-template-columns: calc(500 * var(--u)) minmax(0, 1fr);
  gap: calc(60 * var(--u));
  padding: calc(22 * var(--u)) calc(30 * var(--u)) calc(30 * var(--u)) calc(30 * var(--u));
}
.inside .copy { margin-top: calc(20 * var(--u)); max-width: max(300px, calc(430 * var(--u))); }
.features {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(10 * var(--u)); margin-top: calc(24 * var(--u)); max-width: calc(470 * var(--u));
}
.features li { text-align: center; font-size: var(--f-micro); line-height: 1.2; color: var(--muted); }
.features img { width: var(--icon-sm); height: var(--icon-sm); margin: 0 auto calc(10 * var(--u)); }
.kit { position: relative; display: grid; justify-items: center; align-content: center; }
.kit__img { height: calc(330 * var(--u)); width: auto; }
.kit__labels {
  display: flex; gap: calc(10 * var(--u)) calc(26 * var(--u)); flex-wrap: wrap; justify-content: center;
  margin-top: calc(14 * var(--u));
  font-size: var(--f-micro); color: #555C6C;
}
.kit .note-colorful { left: calc(40 * var(--u)); top: calc(10 * var(--u)); transform: rotate(-14deg);  width: calc(110 * var(--u));}
.kit .note-cleans { right: calc(20 * var(--u)); top: calc(24 * var(--u));  width: calc(130 * var(--u));}
.kit .arrow-l { left: calc(118 * var(--u)); top: calc(78 * var(--u)); width: calc(64 * var(--u)); transform: rotate(18deg); }

/* Two sets: NOT IN ANY MOCKUP. Added 16 Sep 2026 when Chris confirmed he sells
   two boxes; the mockups draw one. With nothing to measure, every value below
   is borrowed from a measured neighbour and names it, so the band reads as part
   of the same page and moves with that neighbour if it is ever re-measured. */
.sets { padding: calc(18 * var(--u)) calc(116 * var(--u)) calc(26 * var(--u)); text-align: center; }  /* = .drinks */
.sets > .copy { margin-top: calc(10 * var(--u)); }
.sets__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(14 * var(--u)); margin-top: calc(18 * var(--u));      /* gap = .drinks__grid */
}
.set {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: calc(34 * var(--u)); padding: calc(22 * var(--u)) calc(34 * var(--u));   /* = .linkrow */
  text-align: left;
}
/* The box photographs are Chris's own shots of each box, sent 16 Sep 2026:
   Classic 441x1227, Brights 389x1005 native. Height = .kit__img, so the set
   boxes stand as tall as the straws above them; capped at 1005, the shorter
   file, so neither is ever upscaled. */
.set__box { height: min(1005px, max(220px, calc(330 * var(--u)))); width: auto; }
.set__name { font-size: var(--f-h2-xs); }
.set__colors { margin-top: calc(6 * var(--u)); font-size: var(--f-small); font-weight: 600; color: var(--ink); }
.set .btn { margin-top: calc(22 * var(--u)); }

/* Made for every kind of drink: 992-1181m. Cards 92-757m. */
.drinks { padding: calc(18 * var(--u)) calc(116 * var(--u)) calc(26 * var(--u)); text-align: center; }
.drinks__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(14 * var(--u)); margin-top: calc(12 * var(--u));
}
.drink__photo { position: relative; aspect-ratio: 216 / 113; border-radius: var(--r-card); overflow: hidden; }
.drink__photo img { width: 100%; height: 100%; object-fit: cover; }
.pill {
  position: absolute; left: 50%; bottom: 0; translate: -50% 0;
  min-width: 43%; padding: calc(8 * var(--u)) calc(22 * var(--u));
  background: #fff; border-radius: 999px 999px 0 0;
  font-family: var(--display); font-weight: 800; font-size: var(--f-small); color: var(--blue);
  white-space: nowrap;
}
.drink p { margin-top: calc(14 * var(--u)); font-size: var(--f-small); color: #5A6070; }
.drinks .note-days { right: calc(22 * var(--u)); top: calc(86 * var(--u));  width: calc(130 * var(--u));}

/* Brush. Rinse. Reuse.: 1182-1297m, white. */
.care {
  position: relative;
  display: grid; grid-template-columns: calc(480 * var(--u)) minmax(0, 1fr);
  align-items: center; gap: calc(30 * var(--u));
  padding: calc(8 * var(--u)) calc(38 * var(--u));
}
.care .copy { margin-top: calc(20 * var(--u)); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(24 * var(--u)); max-width: calc(640 * var(--u)); }
.step { text-align: center; }
.step__img { position: relative; width: calc(132 * var(--u)); min-width: 88px; margin-inline: auto; }
.step__img img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.step__num {
  position: absolute; left: calc(-28 * var(--u)); top: calc(10 * var(--u));
  width: max(34px, calc(50 * var(--u))); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: #E8F3FE; color: var(--blue);
  font-family: var(--display); font-weight: 900; font-size: var(--f-title);
}
.step .title { margin-top: calc(8 * var(--u)); }
.step p { font-size: var(--f-micro); line-height: 1.25; color: #6B7080; margin-top: 2px; }
.care .note-easy { right: calc(10 * var(--u)); top: calc(26 * var(--u));  width: calc(100 * var(--u));}

/* Real sips. Real smiles.: 1298-1422m. Cards 45-805m. */
/* The reviews live inside #shop, under the two set cards (Jacob, 17 Sep 2026),
   so this is a block within that panel rather than a panel of its own, and it
   carries no heading of its own: the cards say what they are. The rule
   separates it from the cards; the padding above it is .sets'. */
.sets__reviews {
  margin-top: calc(26 * var(--u)); padding-top: calc(22 * var(--u));
  border-top: 1px solid var(--line);
}

/* The reviews carousel: three cards at a time, five real reviews behind them.

   --per is the number on screen, and it is declared HERE rather than in the
   script because it changes with the breakpoints below and CSS is what knows
   about those. nav.js reads it back out of the computed style, so the two can
   never disagree. Without JavaScript the track is a plain scrollable row: the
   reviews are all still readable, which is why they are in the markup rather
   than built from data. */
.reviews__grid {
  --per: 3;
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--per) - 1) * var(--gap-c)) / var(--per));
  --gap-c: calc(16 * var(--u));
  gap: var(--gap-c); margin-top: calc(10 * var(--u));
}
.carousel__viewport { overflow-x: auto; scrollbar-width: none; }
.carousel__viewport::-webkit-scrollbar { display: none; }
/* Scripted: the track slides instead, and the viewport stops scrolling. */
.carousel.is-live .carousel__viewport { overflow: hidden; }
.carousel.is-live .carousel__track { transition: translate .45s ease; }

.carousel__controls { display: none; }
.carousel.is-live .carousel__controls {
  display: flex; align-items: center; justify-content: center;
  gap: calc(14 * var(--u)); margin-top: calc(14 * var(--u));
}
.carousel__btn {
  width: 44px; height: 44px; border-radius: 50%;           /* the touch floor */
  border: 2px solid var(--line); background: #fff; cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.carousel__btn:hover:not(:disabled) { border-color: var(--blue); }
/* Disabled at the ends, so the control says which way there is left to go.
   Kept visible rather than hidden: a button that disappears moves the ones
   beside it. */
.carousel__btn:disabled { opacity: .35; cursor: default; }
.carousel__btn::before {
  content: ""; width: 10px; height: 10px;
  border-top: 2.5px solid var(--blue); border-right: 2.5px solid var(--blue);
}
.carousel__btn--prev::before { rotate: -135deg; translate: 2px 0; }
.carousel__btn--next::before { rotate: 45deg; translate: -2px 0; }
.carousel__count { font-size: var(--f-tiny); color: var(--muted); font-variant-numeric: tabular-nums; }
.reviews__more { margin-top: calc(12 * var(--u)); text-align: center; font-size: var(--f-small); }
.reviews__more a { color: var(--blue); font-weight: 600; }
.review__when { display: block; margin-top: 2px; font-size: var(--f-micro); color: var(--muted); }
.review { padding: calc(16 * var(--u)) calc(24 * var(--u)) calc(18 * var(--u)); text-align: center; font-size: var(--f-small); line-height: 1.3; }
.stars { color: #E85F00; letter-spacing: 2px; font-size: var(--f-title); line-height: 1; }
.review blockquote { margin-top: calc(10 * var(--u)); color: #4F5563; }
.review cite { display: block; margin-top: calc(8 * var(--u)); font-style: normal; color: #4F5563; }

/* Colorful by nature: 1428-1556m. Photo 23-359m, copy from 378m. */
.story {
  position: relative;
  display: grid; grid-template-columns: 570fr 794fr;       /* 336m : 469m */
  gap: calc(32 * var(--u)); align-items: center;
}
/* The box stays the size the mockup draws it. The PHOTOGRAPH was cut to that
   letterbox, which took the tops of their heads and the table off, so the file
   is now the whole frame and it is scaled down to fit inside the box instead
   of filling it (Jacob, 17 Sep 2026: "keep the size, just make the images
   smaller to fit"). */
.story .photo { aspect-ratio: 336 / 127; background: none; }
.story .photo > img { object-fit: contain; }
.story .copy { margin-top: calc(10 * var(--u)); max-width: max(300px, calc(440 * var(--u))); }
.values { display: flex; flex-wrap: wrap; gap: calc(12 * var(--u)) calc(40 * var(--u)); margin-top: calc(18 * var(--u)); }
.values li { display: flex; align-items: center; gap: calc(14 * var(--u)); font-size: var(--f-tiny); color: var(--muted); }
.values img { width: calc(36 * var(--u)); min-width: 24px; }
.story .note-choices { right: calc(80 * var(--u)); top: calc(14 * var(--u));  width: calc(190 * var(--u));}
.story .globe { right: calc(60 * var(--u)); bottom: calc(4 * var(--u)); width: calc(74 * var(--u)); }

/* FAQ: 1562-1656m. Heading at 46m, rows 301-805m. */
.faq {
  display: grid; grid-template-columns: calc(430 * var(--u)) minmax(0, 1fr);
  align-items: center; gap: calc(24 * var(--u));
  padding: calc(14 * var(--u)) calc(38 * var(--u)) calc(14 * var(--u)) calc(38 * var(--u));
}
.faq .copy { margin-top: calc(14 * var(--u)); color: #4A5165; }
.qa { display: grid; gap: calc(3 * var(--u)); }
.qa details { background: #fff; border: 1px solid var(--line); border-radius: calc(8 * var(--u)); }
.qa summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: max(44px, calc(33 * var(--u)));
  padding: 6px calc(24 * var(--u));
  font-size: var(--f-tiny); font-weight: 500; color: #3B4354;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font-size: 1.4em; font-weight: 400; color: #4A5165; line-height: 1; }
.qa details[open] summary::after { content: "\2212"; }
.qa details > div { padding: 0 calc(24 * var(--u)) calc(14 * var(--u)); font-size: var(--f-tiny); line-height: 1.45; }

/* Closing band: 1665-1770m, 14-837m, wider than the panels. */
.cta {
  position: relative;
  width: min(100%, calc(1396 * var(--u) + 2 * var(--gut)));
  margin-inline: auto;
  padding-inline: var(--gut);
}
.cta__band {
  position: relative; overflow: hidden;
  border-radius: calc(20 * var(--u));
  background:
    linear-gradient(90deg, #FDDEFD 0%, #FEEEFE 22%, #F6FDF8 45%, #EEF9FD 62%, #F5F1FE 78%, #FDE4FD 100%);
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: calc(40 * var(--u));
  min-height: calc(178 * var(--u));
  padding: calc(14 * var(--u)) calc(60 * var(--u));
}
.cta .rainbow { right: calc(-80 * var(--u)); bottom: calc(-70 * var(--u)); width: calc(360 * var(--u)); opacity: .5; }
.cta__art { position: relative; justify-self: center; }
.cta__art img { height: calc(158 * var(--u)); width: auto; mix-blend-mode: multiply; }
.cta__art .rays { left: calc(-70 * var(--u)); top: calc(40 * var(--u)); width: calc(60 * var(--u)); transform: rotate(-60deg); }
.cta__copy { text-align: center; position: relative; z-index: 2; }
.cta__copy p { font-size: var(--f-tiny); line-height: 1.25; color: #3F4658; margin-top: calc(8 * var(--u)); }
.cta__copy .btn { margin-top: calc(14 * var(--u)); }
/* The note inside rotates -12deg, so its painted box is 13px taller than the
   line it occupies and hangs out of this row. 16u is that overhang,
   measured at 1440, not a gap anyone drew. check:derived. */
.cta__side { position: relative; display: flex; align-items: center; gap: calc(60 * var(--u)); padding-block: calc(16 * var(--u)); }
.checks { display: grid; gap: calc(12 * var(--u)); font-size: var(--f-tiny); color: #4A5165; }
.checks li { display: flex; align-items: center; gap: calc(16 * var(--u)); }
.checks li::before {
  content: ""; width: 1em; height: 1em; flex: none; background: var(--green);
  -webkit-mask: url("/assets/icons/checkmark.svg") center / 140% no-repeat; mask: url("/assets/icons/checkmark.svg") center / 140% no-repeat;
}
.cta .note-sip { position: relative; transform: rotate(-12deg);  width: calc(190 * var(--u));}
.cta__band--split { grid-template-columns: calc(200 * var(--u)) 1fr auto calc(170 * var(--u)); gap: calc(30 * var(--u)); }
.cta__jar {
  align-self: stretch; margin-block: calc(-14 * var(--u)); margin-left: calc(-60 * var(--u));
  position: relative;
}
/* contain, not cover: the file used to be a 2.06 letterbox cut out of a 3/2
   photograph, which sliced the ends off every straw. It is the whole frame
   now, and the band keeps the size the mockup draws (Jacob, 17 Sep 2026). */
.cta__jar > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent);
          mask-image: linear-gradient(90deg, #000 60%, transparent);
}
.cta__band--split .cta__copy { text-align: left; }

/* --- Footer: 1771-1850m -------------------------------------------------- */
.footer { padding-block: calc(22 * var(--u)) calc(22 * var(--u)); }
.footer__top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.footer__tag { font-size: var(--f-tiny); color: #4A5165; margin-top: 4px; }
.footer__links { display: flex; flex-wrap: wrap; justify-content: center; font-size: var(--f-tiny); }
.footer__links a { color: #596277; text-decoration: none; padding: 12px 0; display: inline-block; }
.footer__links a:hover { color: var(--blue); }
.footer__links a[aria-current="page"] { color: var(--blue); font-weight: 600; }
.footer__links li + li::before { content: "|"; color: #9AA1AF; margin-inline: calc(18 * var(--u)); }
/* Social: glyphs 13m (714-726, 740-751m), pitch 26m, ink sampled 071C46.
   The link box is 44px for the tap target; the negative margin keeps the
   glyphs, not the boxes, on the column edge and 13m apart. */
.footer__social { display: flex; justify-content: flex-end; gap: calc(22 * var(--u) - (44px - 22 * var(--u))); margin-right: calc((22 * var(--u) - 44px) / 2); }
.footer__social a { display: grid; place-items: center; width: 44px; height: 44px; color: #071C46; }
.footer__social a:hover { color: var(--blue); }
.footer__social svg { width: max(18px, calc(22 * var(--u))); height: max(18px, calc(22 * var(--u))); fill: currentColor; }
.footer__bottom {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: calc(22 * var(--u)); padding-top: calc(14 * var(--u));
  border-top: 1px solid var(--rule);
  font-size: var(--f-micro); color: var(--faint);
}
.footer__bottom span { display: inline-flex; align-items: center; gap: 6px; }
.footer__bottom img { width: 16px; }

/* =========================================================================
   SUPPORT and WHOLESALE (1024px mockups, x1.406)
   ========================================================================= */

.hero--page .inner { min-height: calc(446 * var(--u)); grid-template-columns: 683fr 415fr; }  /* support 60-378m; copy 113-599m */
.hero--page .h1 { font-size: var(--f-h1-support); }
.hero--wholesale .h1 { font-size: var(--f-h1-wholesale); }
.hero--page .lead { margin-top: calc(22 * var(--u)); }
.hero--page .btn { margin-top: calc(26 * var(--u)); }
.hero__art--straws { justify-content: center; }
.hero__art--straws .set { height: calc(400 * var(--u)); }
.hero__art--packs img { width: 100%; height: auto; }
.hero--wholesale .hero__art--packs {
  align-self: end;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 90%, transparent);
}

/* Wholesale hero: 68-298m, copy 129-519m, packs 530-905m. */
.hero--wholesale .inner { min-height: calc(323 * var(--u)); grid-template-columns: 548fr 550fr; }
.hero--wholesale .hero__art--packs { margin-right: calc(-150 * var(--u)); }
.hero--wholesale .lead { max-width: max(300px, calc(560 * var(--u))); }

/* Three reassurances under the support headline, split by hairlines. */
.promises { display: flex; flex-wrap: nowrap; margin-top: calc(34 * var(--u)); }   /* 111-566m */
.promises li { display: flex; gap: calc(21 * var(--u)); padding-right: calc(22 * var(--u)); }
.promises .title { font-size: var(--f-small); white-space: nowrap; }   /* "Helpful Support" 97m x1.406 = 136px */
.promises li + li { padding-left: calc(22 * var(--u)); border-left: 1px solid #DDE7F1; }
.promises img { width: calc(51 * var(--u)); min-width: 28px; height: auto; align-self: flex-start; }
.promises .small { margin-top: 4px; max-width: max(140px, calc(140 * var(--u))); }
.promises li > div, .trio li > div { min-width: 0; flex: 1 1 auto; }

/* Row of linked cards on a panel: support 392-499m, wholesale 306-384m. */
.linkrow { display: grid; gap: calc(22 * var(--u)); padding: calc(22 * var(--u)) calc(34 * var(--u)); }
.linkrow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.linkrow--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.linkcard {
  display: flex; align-items: center; gap: calc(22 * var(--u));
  padding: calc(18 * var(--u)) calc(26 * var(--u));
  text-decoration: none; color: inherit;
}
a.linkcard:hover { border-color: #C9D8EA; }
.linkcard img { width: calc(64 * var(--u)); min-width: 36px; flex: none; }
.linkcard > div { flex: 1; min-width: 0; }
.linkcard .small { margin-top: 4px; }
a.linkcard::after, .linkcard--arrow::after {
  content: ""; flex: none; width: 10px; height: 16px; background: var(--blue);
  clip-path: polygon(0 0, 30% 0, 100% 50%, 30% 100%, 0 100%, 70% 50%);
}
.linkrow--3 .title { font-size: max(18px, calc(24 * var(--u))); }   /* width: "Returns or Replacement" 182m x1.406 = 256px */
.linkrow--4 .linkcard { padding: calc(16 * var(--u)) calc(20 * var(--u)); gap: calc(18 * var(--u)); }
.linkrow--4 .linkcard img { width: calc(52 * var(--u)); }
.linkrow--4 .title { font-size: var(--f-small); }
.linkrow--4 .small, .promises .small { font-size: max(14px, calc(15 * var(--u))); }   /* width: "We're here to help you" 109m x1.406 = 153px */
.process .title { font-size: var(--f-title); }   /* wholesale cards cap 9-10m x1.406 */

/* Form + helpful details: support 514-1073m, wholesale 964-1349m. */
.helpgrid { display: grid; grid-template-columns: 781fr 583fr; gap: calc(18 * var(--u)); align-items: stretch; }
.helpgrid--wide { grid-template-columns: 832fr 522fr; }
.formcard { padding: calc(34 * var(--u)) calc(44 * var(--u)) calc(34 * var(--u)); }
.formcard .lead { margin-top: calc(10 * var(--u)); font-weight: 500; }
.form { margin-top: calc(24 * var(--u)); display: grid; gap: calc(16 * var(--u)) calc(34 * var(--u)); position: relative; }
.form--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form--2 .field--full { grid-column: 1 / -1; }
.field label { display: block; font-weight: 600; font-size: var(--f-small); color: var(--ink); margin-bottom: 6px; }
.field label .req { color: var(--error); margin-left: 3px; }
.field label .opt { font-weight: 400; color: var(--body); }
.field input, .field select, .field textarea {
  width: 100%; min-height: var(--h-field);
  padding: 10px 16px;
  background: #fff; border: 1px solid #D0D9E4; border-radius: max(8px, calc(8 * var(--u)));
  font-size: max(16px, var(--f-small)); color: var(--ink);
}
.field textarea { min-height: max(112px, calc(112 * var(--u))); resize: vertical; }
.field select { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='%232C354C' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center / 14px; padding-right: 44px; }
.field ::placeholder { color: #8990A0; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(5, 72, 242, .15); }
.field [aria-invalid="true"] { border-color: var(--error); }
.field__error { color: var(--error); font-size: var(--f-micro); margin-top: 4px; }
.field__error:empty { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { margin-top: calc(8 * var(--u)); }
.form__status { font-size: var(--f-small); min-height: 1.3em; }
.form__status--ok { color: #13804A; font-weight: 600; }
.form__status--bad { color: var(--error); font-weight: 600; }

.details { padding: calc(30 * var(--u)) calc(40 * var(--u)); }
.details__list { display: grid; gap: calc(22 * var(--u)); margin-top: calc(22 * var(--u)); }
.details__list li { display: grid; grid-template-columns: max(48px, calc(84 * var(--u))) minmax(0, 1fr); gap: calc(26 * var(--u)); align-items: start; }
.tile {
  display: grid; place-items: center; aspect-ratio: 1; width: 100%; min-width: 48px;
  background: #fff; border-radius: calc(14 * var(--u));
  box-shadow: 0 2px 10px rgba(30, 70, 140, .06);
}
.tile img { width: 58%; }
.details .copy { margin-top: 4px; }
.details hr { border: 0; border-top: 1px solid #D6E3EF; margin-block: calc(30 * var(--u)); }
/* Same rotation overhang as .cta__side: 9px at 1440, in padding rather than
   left to spill out of the row. check:derived. */
.details .note-together { position: relative; display: flex; justify-content: flex-end; align-items: center; gap: calc(40 * var(--u)); margin-top: calc(10 * var(--u)); padding-block: calc(9 * var(--u)); }
.details .note-together .hand { position: relative; width: calc(120 * var(--u)); }
.details .note-together img { width: calc(60 * var(--u)); min-width: 36px; }
/* Wholesale's details panel carries the rows on white cards and a photo at the foot. */
.details--cards { padding-bottom: 0; display: flex; flex-direction: column; overflow: hidden; }
.details--cards .details__list { gap: calc(8 * var(--u)); }
.details--cards .details__list li { background: #fff; border-radius: calc(10 * var(--u)); padding: calc(10 * var(--u)) calc(16 * var(--u)); grid-template-columns: max(38px, calc(52 * var(--u))) minmax(0, 1fr); align-items: center; }
.details--cards .tile { box-shadow: none; border-radius: 8px; min-width: 36px; }
.details--cards .tile img { width: 80%; }
.details__photo { margin: auto calc(-40 * var(--u)) 0; aspect-ratio: 366 / 117; position: relative; }
/* :not(.hand) - this used to be every img in the box, which stretched the
   handwritten note placed over the photograph to fill it (17 Sep 2026). */
.details__photo img:not(.hand) { width: 100%; height: 100%; object-fit: cover; }
/* "Happier sips together.", over the photo at the foot of the details panel.
   Measured off wholesale-1024.png: ink at x 905-976 against a 1024 mockup, so
   its right edge is 48m from the page edge and the note is 71m wide - x1.406
   for this page's scale gives 100u wide, 34u in from the photo's right edge.
   The slot was empty since the build because this measurement had never been
   taken. */
.details__photo .note-together-wh { right: calc(34 * var(--u)); top: calc(18 * var(--u)); width: calc(100 * var(--u)); }

/* Wholesale settings: 400-612m. */
.settings { padding: calc(20 * var(--u)) calc(34 * var(--u)) calc(30 * var(--u)); text-align: center; }
.settings .lead { margin-top: calc(4 * var(--u)); font-weight: 500; }
.settings__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(26 * var(--u)); margin-top: calc(22 * var(--u)); }
.settings__grid li { padding: calc(22 * var(--u)) calc(16 * var(--u)) calc(24 * var(--u)); }
.settings__grid img { width: calc(76 * var(--u)); min-width: 40px; margin: 0 auto calc(16 * var(--u)); }
.settings__grid .small { margin-top: 6px; color: var(--body); }

/* Shelf story: 628-842m. Copy 50-480m, photo 470-994m. */
.shelf { display: grid; grid-template-columns: 632fr 732fr; overflow: hidden; }
.shelf__copy { padding: calc(24 * var(--u)) calc(6 * var(--u)) calc(24 * var(--u)) calc(22 * var(--u)); }
.shelf__copy .h2 { font-size: max(28px, calc(44 * var(--u))); line-height: .95; letter-spacing: -0.03em; }   /* width: line 1 50-466m = 585px; 589px at 44/-0.03em */
.shelf__copy .lead { font-weight: 500; font-size: var(--f-copy); line-height: 1.35; color: var(--ink); margin-top: calc(14 * var(--u)); }
.shelf__photo { position: relative; min-height: 200px; }
.shelf__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shelf__photo {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14%);
}
.trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: calc(20 * var(--u)); margin-top: calc(24 * var(--u)); }
.trio li { display: flex; gap: calc(12 * var(--u)); }
.trio li + li { border-left: 1px solid #DDE7F1; padding-left: calc(18 * var(--u)); }
.trio img { width: calc(44 * var(--u)); min-width: 26px; align-self: flex-start; }
.trio .title { font-size: var(--f-small); }
.trio .small { font-size: var(--f-micro); }

/* From inquiry to delivery: 855-958m. */
.process { padding: calc(14 * var(--u)) calc(34 * var(--u)) calc(18 * var(--u)); }
.process .linkrow { padding: 0; margin-top: calc(10 * var(--u)); }
.num {
  flex: none; width: calc(66 * var(--u)); min-width: 40px; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  font-family: var(--display); font-weight: 900; font-size: var(--f-h2-xs);
}
.num--1 { background: #1164F5; } .num--2 { background: #E0107F; } .num--3 { background: #08A150; }

/* Section headings on the 1024 mockups, read as cap heights at x1.406. */
.helpgrid .formcard .h2 { font-size: max(32px, calc(64 * var(--u))); }  /* width: "How can we help?" 60-453m = 553px */
.helpgrid .details .h2 { font-size: max(30px, calc(49.5 * var(--u))); } /* width: "Helpful details" 623-872m = 350px */
.helpgrid--wide .formcard .h2, .helpgrid--wide .details .h2 { font-size: max(28px, calc(34.5 * var(--u))); } /* width: 342 / 243px */
.settings .h2 { font-size: max(28px, calc(45.5 * var(--u))); }        /* width: 190-858m = 939px */
.settings .lead { font-size: max(17px, calc(22 * var(--u))); }        /* width: 320-705m = 541px */
.process .h2 { font-size: max(26px, calc(34.4 * var(--u))); }         /* width: 49-334m = 401px */
.faq--stacked .h2 { font-size: max(30px, calc(54 * var(--u))); }      /* width: 59-334m = 387px */
.formcard .lead { font-size: max(17px, calc(24 * var(--u))); }       /* width: 60-477m = 586px */
.cta__band--split .h2-xs { font-size: max(24px, calc(34 * var(--u))); } /* width: "Ready to bring Strawtastik" 372-640m = 377px */

/* Quick answers: heading above full-width rows (support 1095-1297m). */
.faq--stacked { grid-template-columns: 1fr; gap: calc(12 * var(--u)); padding: calc(24 * var(--u)) calc(50 * var(--u)) calc(30 * var(--u)); }
.faq--stacked .copy { margin-top: calc(6 * var(--u)); }

.cta__band--split .lead { margin-top: calc(10 * var(--u)); }
/* Over the photograph, not beside it: at left 70% the note was text a third
   this wide, and the artwork ran straight into the headline (17 Sep 2026). */
.cta__jar .note-jar { left: 18%; top: calc(14 * var(--u)); width: calc(126 * var(--u)); z-index: 3; }
.hero--wholesale .hero__copy .rays { left: calc(-86 * var(--u)); top: calc(16 * var(--u)); width: calc(80 * var(--u)); transform: rotate(-40deg); }
.details--cards > .copy { margin-top: calc(6 * var(--u)); }

/* =========================================================================
   STRUCTURE BREAKPOINTS. These change layout only; sizes keep ramping.
   ========================================================================= */

/* The nav folds at 1160. Below it the 15px nav floor stops the six links
   shrinking with the header, and they overran its column by up to 145px
   (measured 12 Sep 2026, after Wholesale joined the nav). */
@media (max-width: 1160px) {
  .navtoggle {
    display: inline-grid; place-items: center;
    width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer;
  }
  .navtoggle span, .navtoggle span::before, .navtoggle span::after {
    display: block; width: 20px; height: 2px; background: var(--ink); position: relative; content: "";
  }
  .navtoggle span::before { position: absolute; top: -6px; }
  .navtoggle span::after { position: absolute; top: 6px; }
  .header .inner { flex-wrap: wrap; gap: 12px; }
  .header .btn--sm { margin-left: auto; }
  .nav {
    display: none; order: 3; width: 100%;
    flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 12px;
  }
  .nav a { padding: 12px 4px; border-bottom: 1px solid #EEF1F5; }
  .nav-open .nav { display: flex; }
}

@media (max-width: 960px) {
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .strip li:nth-child(3) { border-left: 0; }
  .settings__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__top { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .footer__social { justify-content: center; margin-right: 0; }
}

@media (max-width: 1200px) {
  .linkrow--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta__band--split { grid-template-columns: 1fr auto calc(190 * var(--u)); }
  .cta__jar { display: none; }
  .promises { flex-wrap: wrap; row-gap: 14px; }
  .shelf { grid-template-columns: 1fr; }
  .shelf__photo { aspect-ratio: 1042 / 420; min-height: 0; -webkit-mask-image: none; mask-image: none; }
}

/* Split bands stack at 900: between 760 and 900 their columns measured 58-204px
   and set 5-7 characters a line (check:layout, 12 Sep 2026). */
@media (max-width: 900px) {
  /* The 1098 measure is a desktop column (76% of 1440). Once bands stack it
     has nothing beside it, so it takes the full width. */
  .inner { width: 100%; }
  .hand, .decor { display: none; }
  .hero .inner { grid-template-columns: 1fr; min-height: 0; padding-bottom: 28px; }
  .hero__copy { padding-block: 32px 0; }
  .hero__body, .better__copy .copy, .inside .copy, .story .copy, .promises .small { max-width: none; }
  .hero__art { justify-content: center; }
  .hero__art .set { height: auto; width: min(100%, 360px); margin: 0 auto; }
  .hero__art--straws .set { width: min(60%, 220px); }
  .ticks { gap: 12px 22px; }
  .strip { grid-template-columns: 1fr; padding: 16px 20px; }
  .strip li { justify-content: flex-start; padding: 0; }
  .strip li + li { border-left: 0; }
  .better, .press, .unique, .inside, .care, .story, .faq, .helpgrid, .helpgrid--wide { grid-template-columns: 1fr; }
  .better__body { grid-template-columns: 1fr; padding-inline: 4px; }
  .better__jar { display: none; }
  .press, .unique { padding: 24px 20px; gap: 18px; }
  .inside { padding: 24px 4px; gap: 24px; }
  .kit__img { height: 240px; }
  .features { max-width: none; }
  .drinks { padding: 24px 16px; }
  .drinks__grid { grid-template-columns: 1fr; gap: 20px; }
  .sets { padding: 24px 16px; }                                   /* = .drinks */
  .sets__grid { grid-template-columns: 1fr; gap: 12px; }
  .care { padding: 20px 4px; gap: 22px; }
  .steps { max-width: none; }
  .step__num { left: -10px; }
  .sets__reviews { margin-top: 20px; padding-top: 18px; }
  .reviews__grid { --per: 2; }
  .story { gap: 18px; }
  .faq { padding: 22px 16px; }
  .cta__band, .cta__band--split { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 28px 20px; gap: 22px; }
  .cta__band--split .cta__copy { text-align: center; }
  .cta__jar { display: none; }
  .cta__side { flex-direction: column; gap: 16px; }
  .cta__art img { height: 140px; }
  .linkrow, .linkrow--3, .linkrow--4 { grid-template-columns: 1fr; padding: 16px; gap: 12px; }
  .promises { gap: 16px; }
  .promises li, .promises li + li { padding: 0; border: 0; width: 100%; }
  .formcard, .details { padding: 24px 18px; }
  .form--2 { grid-template-columns: 1fr; }
  .details__photo { margin-inline: -18px; }
  .settings__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .settings { padding: 22px 14px; }
  .shelf__copy { padding: 24px 18px; }
  .trio { grid-template-columns: 1fr; gap: 14px; }
  .trio li + li { border-left: 0; padding-left: 0; }
  .footer__links li + li::before { margin-inline: 10px; }
  .footer__bottom { justify-content: center; text-align: center; }
}

@media (max-width: 620px) {
  .reviews__grid { --per: 1; }
}

@media (max-width: 480px) {
  .header .inner { gap: 8px; }
  .header .btn--sm .ico { display: none; }
}

@media (max-width: 420px) {
  .settings__grid { grid-template-columns: 1fr; }
  /* The set card stops sitting box-beside-text. Its text column is viewport
     - 64 gutters - 2x34u padding - 73 box - 34u gap: 254px at 421, and the
     widest thing in it, the "Buy on Amazon" button, is 185. Below 400 it runs out. */
  .set { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .steps { grid-template-columns: 1fr; gap: 18px; }
}

/* Scroll reveal. `.reveal-on` is set by nav.js, so without JavaScript nothing
   here applies and every section renders normally (ask-324). */
.reveal-on .reveal { opacity: 0; translate: 0 14px; transition: opacity .5s ease, translate .5s ease; }
.reveal-on .reveal.is-in { opacity: 1; translate: 0 0; }
.reveal-on .reveal.is-instant { transition: none; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
  /* Not just faster: the offset is removed outright, so nothing moves. */
  .reveal-on .reveal { opacity: 1; translate: 0 0; }
  /* The carousel still works, it just cuts rather than slides, and nav.js
     does not advance it on its own. */
  .carousel.is-live .carousel__track { transition: none; }
}