/**
 * sippass.co — the marketing site.
 *
 * This restores the original design: heavy uppercase Inter against one warm
 * serif, paper and espresso, the orbiting coffee cup, the drink stage, the
 * membership card. It is the same look, rewritten so it can be maintained —
 * the previous version shipped as three minified files with no line breaks.
 *
 * Two things are different underneath and neither shows:
 *
 * 1. **No GSAP, no ScrollTrigger, no Lenis.** About 120KB from two CDNs, doing
 *    reveals and two parallax moves. Both are IntersectionObserver and a single
 *    rAF scroll handler now — see js/site.js. Same animations, no third party,
 *    and the strict CSP in `_headers` stays strict.
 * 2. **Self-hosted fonts**, converted from the originals in assets/fonts.
 *
 * Layout is responsive at six widths, listed at the bottom in one block rather
 * than scattered through the file.
 */

/* ------------------------------------------------------------------ fonts */
/* Inter as the variable roman file — 100..900 in one download, which is where
   the 900-weight headings come from without a second request. */
@font-face {
  font-family: 'SipInter';
  src: url('../assets/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Meriva carries exactly one paragraph — the hero standfirst — and that
   contrast against the hard uppercase headings is the whole type idea. */
@font-face {
  font-family: 'Meriva';
  src: url('../assets/fonts/meriva.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ----------------------------------------------------------------- tokens */
:root {
  --paper: #f8f6f3;
  --paper-deep: #efe9e2;
  --ink: #1a1a1a;
  --muted: #706f6d;
  --brown: #5a3e2b;
  --tan: #c08a4d;
  --line: rgba(26, 26, 26, 0.18);
  --dark-line: rgba(248, 246, 243, 0.2);

  --sans: 'SipInter', 'Segoe UI', Arial, sans-serif;
  --serif: 'Meriva', Georgia, serif;
  /* There is no monospace webfont: the small uppercase labels are Inter with
     wide tracking, which is what the original actually rendered — its
     `--mono: "DM Mono"` was never loaded and always fell back. */
  --mono: 'SipInter', 'Segoe UI', Arial, sans-serif;

  --gutter: clamp(24px, 7vw, 112px);
  --nav-h: 83px;
}

/* ------------------------------------------------------------------- base */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.nav-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* Hiding must beat any author `display`. The same rule the app added to
   base.css after `.offline-bar { display: flex }` overrode the UA's
   `[hidden] { display: none }` and announced the café was offline the whole
   time it was online. */
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--tan);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  font-weight: 700;
  transform: translateY(-250%);
}
.skip-link:focus { transform: none; }

.section-padding { padding: clamp(88px, 10vw, 160px) var(--gutter); }

/* -------------------------------------------------------------- type system */
/*
 * There are TWO display treatments, and which things get which is load-bearing.
 *
 * 1. STRUCTURAL headings — black, tight, uppercase. This list is exactly the
 *    seven selectors the original used and no more. Adding to it looks
 *    harmless and is not: uppercase Inter at weight 900 is far wider than the
 *    same string set at 400, so a caption positioned to sit beside a
 *    photograph grows until it runs underneath it. That is precisely what
 *    happened to `.drink-caption` when it was added here by mistake.
 */
.hero h1,
h2,
.step h3,
.cafe-card h3,
.plan-information h3,
.phone h3,
.partner-stamp {
  font-family: var(--sans);
  font-weight: 900;
  font-style: normal;
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-transform: uppercase;
}

/*
 * 2. DISPLAY text — the same face, set normally. Sentence case, lighter, and
 *    tracked tight. This is the quiet voice the hard headings are measured
 *    against, and it is what the drink caption, the manifesto slab, the FAQ
 *    questions and the plan tabs are set in.
 */
.drink-caption,
.manifesto-visual p,
.faq-item button,
.plan-tab,
.page-loader,
.membership-card i,
.phone-location b,
.phone-note i,
.plan-benefits strong,
.price strong {
  font-family: var(--sans);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.045em;
  text-transform: none;
}

/* The three lockups the original set at 800 rather than 400 or 900. */
.wordmark,
.phone-brand,
.membership-card > p {
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: -0.09em;
  text-transform: none;
}

.hero h1 em,
h2 em,
.phone h3 em,
.drink-caption em,
.join h2 em { font-style: normal; }

/* The one warm voice on the page. */
.hero-copy > p {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(17px, 1.45vw, 23px);
  line-height: 1.34;
  letter-spacing: 0;
  text-transform: none;
  color: var(--brown);
}

/* Small uppercase labels, everywhere. */
.eyebrow,
.section-kicker,
.main-nav a,
.nav-cta,
.button,
.text-link,
.plan-label,
.membership-note,
.cafe-card p,
.rail-hint,
.step-number,
.price,
.partner-points span,
.footer p,
.footer a:not(.wordmark),
.footer small,
.drink-label,
.hero-bottom,
.phone-note,
.form-status {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* --------------------------------------------------------- loader / chrome */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--paper);
  display: grid;
  place-content: center;
  color: var(--brown);
  font-family: var(--sans);
  font-size: clamp(36px, 5vw, 76px);
  line-height: 0.8;
  letter-spacing: -0.06em;
  transition: transform 0.65s cubic-bezier(0.76, 0, 0.24, 1);
}
.page-loader i {
  display: block;
  width: 0;
  height: 1px;
  background: var(--tan);
  margin-top: 13px;
  transition: width 0.45s ease;
}
.page-loader.is-drawn i { width: 105px; }
.page-loader.is-gone { transform: translateY(-100%); }
/* Without JavaScript the loader must never cover the page. */
html:not(.js) .page-loader { display: none; }

.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
}
.cursor-dot { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: var(--brown); }
.cursor-ring {
  width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border: 1px solid var(--brown);
  mix-blend-mode: multiply;
  transition: width 0.25s, height 0.25s, margin 0.25s, border-color 0.25s;
}
.cursor-ring.is-active {
  width: 66px; height: 66px; margin: -33px 0 0 -33px;
  border-color: var(--tan);
}

.scroll-progress {
  position: fixed;
  z-index: 99;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  background: transparent;
  pointer-events: none;
}
.scroll-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--tan);
  transform: scaleX(0);
  transform-origin: left;
}

/* ----------------------------------------------------------------- navbar */
.navbar {
  height: var(--nav-h);
  padding: 0 clamp(24px, 5vw, 76px);
  position: fixed;
  top: 0;
  z-index: 60;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s;
}
/* Fixed rather than absolute, so "Join waitlist" is reachable from anywhere.
   Transparent over the hero, then it takes a ground once the page moves. */
.navbar.is-stuck {
  background: rgba(248, 246, 243, 0.9);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}

.wordmark {
  font-size: 30px;
  letter-spacing: -0.09em;
}
.wordmark span,
.phone-brand span,
.membership-card > p span { color: var(--tan); }

.main-nav { display: flex; gap: 30px; margin-left: 100px; }
.main-nav a, .nav-cta, .eyebrow, .section-kicker, .rail-hint { font-size: 10px; }
/* 44px tall even on the desktop bar: 1024px wide is an iPad in landscape, and
   that is a touchscreen. The rule stays inside the fixed 83px navbar. */
.main-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.main-nav a::after {
  content: '';
  position: absolute;
  bottom: 15px; left: 0;
  width: 0; height: 1px;
  background: var(--brown);
  transition: width 0.25s;
}
.main-nav a:hover::after,
.main-nav a.is-current::after { width: 100%; }

.nav-cta { display: flex; gap: 12px; align-items: center; padding: 10px 0; }
.nav-cta b { font-size: 18px; font-weight: 400; letter-spacing: 0; }

.nav-toggle {
  display: none;
  border: 0;
  background: transparent;
  width: 44px;
  height: 44px;
  padding: 0 6px;
}
.nav-toggle i {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--ink);
  margin: 6px 0;
  transition: transform 0.28s, opacity 0.2s;
}
.navbar.is-open .nav-toggle i:first-child { transform: translateY(7.5px) rotate(45deg); }
.navbar.is-open .nav-toggle i:last-child { transform: translateY(-7.5px) rotate(-45deg); }

/* ------------------------------------------------------------------- hero */
.hero {
  min-height: 100svh;
  position: relative;
  padding: clamp(125px, 14vh, 170px) var(--gutter) 28px;
  overflow: hidden;
  background: var(--paper-deep);
}
.hero-rule { position: absolute; top: var(--nav-h); left: 0; width: 100%; height: 1px; background: var(--line); }

.eyebrow { display: flex; gap: 8px; align-items: center; }
.eyebrow span { color: var(--tan); }
.hero-eyebrow { margin: 0 0 clamp(32px, 7vh, 80px); }

.hero-copy { position: relative; z-index: 2; width: 62%; }

.hero h1, .join h2 {
  font-size: clamp(52px, 8.3vw, 132px);
  line-height: 0.86;
  letter-spacing: -0.055em;
}
.line-wrap { display: block; overflow: hidden; padding: 0.06em 0.04em 0.04em; }
.hero h1 em, .join h2 em { color: var(--brown); }

.hero-copy > p { width: min(400px, 88%); margin: 31px 0; }

.hero-actions { display: flex; align-items: center; gap: 23px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- buttons */
.button {
  display: inline-flex;
  min-width: 185px;
  min-height: 48px;
  padding: 15px 17px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid currentColor;
  font-size: 10px;
  letter-spacing: 0.14em;
  transition: transform 0.25s, background 0.25s, color 0.25s, border-color 0.25s;
}
.button b { font-size: 18px; font-weight: 400; letter-spacing: 0; }
.button:hover { transform: translateY(-4px); }
.button-dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.button-dark:hover { background: var(--brown); border-color: var(--brown); }
.button-light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.button-light:hover { background: var(--tan); border-color: var(--tan); }
.button-text { border-color: transparent; min-width: auto; padding: 15px 0; }
.button-text:hover { color: var(--brown); }

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 6px;
  font-size: 10px;
  letter-spacing: 0.14em;
  transition: gap 0.25s;
  gap: 16px;
}
.text-link b { font-size: 17px; font-weight: 400; letter-spacing: 0; }
.text-link:hover { gap: 24px; }

/* ------------------------------------------------------------ coffee orbit */
/* The thing the whole hero is built around: a cup that travels the ring while
   counter-rotating, so the photograph never turns upside down. */
.coffee-orbit {
  width: clamp(330px, 37vw, 580px);
  aspect-ratio: 1;
  position: absolute;
  z-index: 1;
  top: 51%;
  right: 6%;
  transform: translateY(-45%);
}
.orbit-type, .orbit-dashes { position: absolute; inset: 0; border-radius: 50%; }
.orbit-type { border: 1px solid rgba(90, 62, 43, 0.4); animation: spin 25s linear infinite; }
.orbit-type span {
  position: absolute;
  top: 12%;
  left: 50%;
  width: 240px;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  white-space: nowrap;
  color: var(--brown);
}
.orbit-dashes { inset: 23px; border: 1px dashed rgba(90, 62, 43, 0.3); animation: spin-reverse 18s linear infinite; }

.coffee-cup {
  position: absolute;
  inset: auto;
  width: 42%;
  aspect-ratio: 1;
  top: 29%;
  left: 29%;
  border-radius: 50%;
  padding: 13px;
  background: var(--paper);
  box-shadow: 24px 27px 0 rgba(90, 62, 43, 0.12);
  overflow: hidden;
  animation: mug-orbit 13s linear infinite;
}
.coffee-cup img {
  border-radius: 50%;
  filter: contrast(1.05) saturate(0.78);
  animation: mug-image 13s linear infinite;
}
.coffee-cup::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(90, 62, 43, 0.2);
}

.orbit-spark { position: absolute; color: var(--tan); font-size: 21px; font-style: normal; }
.spark-one { top: 7%; right: 17%; }
.spark-two { bottom: 9%; left: 14%; font-size: 14px; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-reverse { to { transform: rotate(-360deg); } }
@keyframes mug-orbit {
  from { transform: rotate(0deg) translateX(67%) rotate(0deg); }
  to { transform: rotate(360deg) translateX(67%) rotate(-360deg); }
}
@keyframes mug-image {
  from { transform: rotate(0deg) scale(1.08); }
  to { transform: rotate(360deg) scale(1.08); }
}
@keyframes scrollCue { 50% { transform: scaleX(0.32); transform-origin: left; } }

.hero-brand-art {
  position: absolute;
  z-index: 2;
  right: 4.6%;
  bottom: 5.8%;
  width: clamp(160px, 17vw, 270px);
  margin: 0;
  transform: rotate(4deg);
  background: var(--paper);
  box-shadow: 0 15px 35px rgba(90, 62, 43, 0.09);
}
.hero-brand-art img { aspect-ratio: 1.26; }
.hero-brand-art figcaption {
  padding: 8px 10px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brown);
}

.hero-bottom {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 26px;
  z-index: 3;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  font-size: 9px;
  line-height: 1.55;
  letter-spacing: 0.12em;
}
.scroll-note { display: flex; gap: 11px; align-items: center; min-height: 44px; }
.scroll-note i {
  display: inline-block;
  width: 29px;
  height: 1px;
  background: var(--ink);
  animation: scrollCue 1.6s ease-in-out infinite;
}

/* ------------------------------------------------------------- section head */
.section-kicker { display: flex; gap: 14px; color: var(--muted); }
.section-kicker span { color: var(--tan); }
.section-kicker.light { color: rgba(248, 246, 243, 0.65); }

h2 { font-size: clamp(40px, 6.3vw, 96px); line-height: 0.9; letter-spacing: -0.05em; }
h2 em { color: var(--brown); }
.section-heading h2 { margin-top: 34px; }
.how h2 em, .partner h2 em, .faq h2 em { color: var(--tan); }

/* ------------------------------------------------------------------ intro */
.intro { background: var(--paper); }
.intro-layout {
  display: grid;
  grid-template-columns: 1.4fr 0.55fr;
  gap: 60px;
  align-items: end;
  margin: 70px 0 100px;
}
.intro-copy { font-size: 14px; line-height: 1.8; color: var(--muted); max-width: 320px; }

.drink-stage {
  height: clamp(450px, 55vw, 740px);
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.drink-image {
  position: absolute;
  margin: 0;
  overflow: hidden;
  box-shadow: 16px 19px 0 rgba(90, 62, 43, 0.13);
}
.drink-image img { transition: transform 0.7s ease; }
.drink-image:hover img { transform: scale(1.08); }
.drink-one { width: 28%; aspect-ratio: 0.86; left: 11%; top: 11%; }
.drink-two { width: 23%; aspect-ratio: 0.86; right: 16%; top: 8%; }
.drink-three { width: 31%; aspect-ratio: 1; left: 34%; bottom: 9%; }

/* The rotations live on a wrapper transform set from JS during the reveal, so
   the base transform here is only the resting angle. */
.drink-one { transform: rotate(-6deg); }
.drink-two { transform: rotate(6deg); }
.drink-three { transform: rotate(-2deg); }

.drink-label { position: absolute; font-size: 9px; letter-spacing: 0.16em; color: var(--brown); }
.label-one { top: 17%; left: 0; }
.label-two { top: 11%; right: 0; }
.label-three { bottom: 18%; right: 4%; }

.drink-caption {
  position: absolute;
  bottom: 12%;
  left: 0;
  /* `.drink-three` starts at 34%, so the caption is capped short of it and
     wraps instead of running underneath the photograph. Without this the
     caption's own width decides whether it collides, which makes the bug
     appear and disappear with the viewport. */
  max-width: 32%;
  z-index: 2;
  font-size: clamp(22px, 2.4vw, 42px);
  line-height: 1.02;
}
/* Brown, not tan. Tan on paper is about 2.6:1 — below the 3:1 that even large
   display text needs, and next to near-black it read as a different, washed-out
   colour rather than an accent. Brown is the same accent `h2 em` uses on every
   other light section, so the page now says it one way. */
.drink-caption em { color: var(--brown); }

/* ------------------------------------------------------------------ steps */
.how, .partner, .faq { background: var(--ink); color: var(--paper); }

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--dark-line);
  margin-top: 105px;
}
.step {
  padding: 31px clamp(18px, 3vw, 50px) 25px 0;
  border-right: 1px solid var(--dark-line);
  min-height: 350px;
}
.step:nth-child(2) { padding-left: clamp(18px, 3vw, 50px); }
.step:last-child { border-right: 0; padding-left: clamp(18px, 3vw, 50px); }
.step-number { font-size: 10px; color: var(--tan); }

.line-illustration { height: 120px; margin: 25px 0; }
.line-illustration svg {
  width: 145px;
  height: 100%;
  fill: none;
  stroke: var(--paper);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.step h3 { margin: 0 0 12px; font-size: clamp(24px, 2.4vw, 31px); line-height: 0.95; }
.step p { max-width: 245px; color: rgba(248, 246, 243, 0.65); font-size: 12px; line-height: 1.7; }

/* -------------------------------------------------------------- manifesto */
.manifesto {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(45px, 10vw, 165px);
  align-items: center;
}
.manifesto-visual { margin: 0; position: relative; height: min(54vw, 705px); overflow: hidden; }
.manifesto-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent 50%);
}
.manifesto-visual p {
  position: absolute;
  z-index: 1;
  left: 25px;
  bottom: 23px;
  color: var(--paper);
  font-size: clamp(28px, 4vw, 60px);
  line-height: 0.86;
  letter-spacing: -0.05em;
}
.manifesto-copy > p:not(.section-kicker) {
  max-width: 420px;
  margin: 38px 0 33px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}

/* ------------------------------------------------------------------ cafés */
.cafes { overflow: hidden; padding-right: 0; }
.inline-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 40px;
  padding-right: var(--gutter);
}
.inline-heading > p { max-width: 240px; font-size: 13px; line-height: 1.7; color: var(--muted); margin: 0 0 10px; }

.cafe-rail {
  display: flex;
  gap: 22px;
  margin-top: 75px;
  overflow-x: auto;
  padding: 0 var(--gutter) 20px 0;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.cafe-rail::-webkit-scrollbar { display: none; }

.cafe-card { width: min(31vw, 405px); min-width: 280px; flex: none; scroll-snap-align: start; }
.cafe-card-large { width: min(38vw, 510px); }
.cafe-card figure { margin: 0; height: 390px; overflow: hidden; }
.cafe-card-large figure { height: 455px; }
.cafe-card figure img { transition: transform 0.7s ease; }
.cafe-card:hover figure img { transform: scale(1.07); }
.cafe-card > div { padding: 17px 2px; }
.cafe-card p { font-size: 9px; letter-spacing: 0.16em; color: var(--tan); margin: 0 0 8px; }
.cafe-card h3 { font-size: clamp(24px, 3vw, 40px); line-height: 0.92; }
.cafe-card a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  min-height: 44px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  margin-top: 16px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cafe-card a b { font-size: 15px; font-weight: 400; letter-spacing: 0; }

.rail-hint { margin: 17px 0 0; color: var(--muted); font-size: 10px; }
.rail-hint i { font-size: 18px; font-style: normal; margin: 0 10px; }

/* ---------------------------------------------------------------- partner */
.partner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(45px, 10vw, 150px);
  align-items: center;
}
.partner-art { height: 620px; position: relative; overflow: hidden; }
.partner-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.5), transparent);
}
.partner-art img { filter: sepia(0.35) contrast(1.08); }
.partner-stamp {
  position: absolute;
  z-index: 2;
  width: 98px;
  height: 98px;
  right: -7px;
  top: -5px;
  background: var(--tan);
  color: var(--ink);
  display: grid;
  place-content: center;
  text-align: center;
  font-size: 24px;
  line-height: 0.8;
  letter-spacing: -0.05em;
  transform: rotate(8deg);
}
.partner-copy > p:not(.section-kicker) {
  max-width: 440px;
  margin: 38px 0 27px;
  color: rgba(248, 246, 243, 0.67);
  font-size: 14px;
  line-height: 1.75;
}
.partner-points { border-top: 1px solid var(--dark-line); margin: 0 0 33px; }
.partner-points li {
  padding: 16px 0;
  border-bottom: 1px solid var(--dark-line);
  font-size: 12px;
  line-height: 1.6;
}
.partner-points span {
  display: inline-block;
  width: 45px;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--tan);
}

/* ------------------------------------------------------------- membership */
.membership { background: var(--paper-deep); }
.membership-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.membership-note { margin: 0 0 8px; font-size: 9px; letter-spacing: 0.14em; color: var(--brown); }

.membership-layout {
  display: grid;
  grid-template-columns: 0.6fr 1.4fr;
  gap: clamp(40px, 10vw, 155px);
  margin-top: 90px;
}

.plan-tabs { display: flex; flex-direction: column; align-self: start; border-top: 1px solid var(--line); }
.plan-tab {
  padding: 19px 0;
  min-height: 56px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  font-family: var(--sans);
  font-size: clamp(15px, 1.5vw, 21px);
  letter-spacing: -0.02em;
  color: var(--muted);
  transition: color 0.25s, padding 0.25s;
}
.plan-tab.is-active, .plan-tab:hover { padding-left: 13px; color: var(--ink); }

.plan-preview { max-width: 550px; }
.plan-preview.is-swapping { opacity: 0.35; transform: translateX(10px); }
.plan-preview { transition: opacity 0.35s ease, transform 0.35s ease; }

.plan-label { font-size: 9px; letter-spacing: 0.16em; color: var(--brown); margin: 0 0 12px; }

.membership-card {
  height: 240px;
  position: relative;
  padding: 24px;
  background: var(--brown);
  color: var(--paper);
  border-radius: 9px;
  box-shadow: 22px 24px 0 rgba(90, 62, 43, 0.14);
  overflow: hidden;
  transition: background 0.35s;
}
.membership-card::before,
.membership-card::after {
  content: '';
  position: absolute;
  border: 1px solid rgba(248, 246, 243, 0.18);
  border-radius: 50%;
}
.membership-card::before { width: 270px; height: 270px; right: -100px; bottom: -155px; }
.membership-card::after { width: 290px; height: 290px; right: -140px; bottom: -200px; }
/* The wordmark on the card is the lockup, not a heading — weight and case come
   from the 800 block above. Only the size belongs here. */
.membership-card > p {
  position: relative;
  z-index: 1;
  font-size: 35px;
}
.membership-card small {
  position: absolute;
  bottom: 24px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
}
.membership-card i {
  position: absolute;
  z-index: 1;
  right: 28px;
  top: 23px;
  font-size: 28px;
  font-style: normal;
  color: var(--tan);
}
.card-chip {
  width: 36px;
  height: 27px;
  border: 1px solid rgba(248, 246, 243, 0.7);
  border-radius: 4px;
  position: absolute;
  right: 26px;
  bottom: 26px;
}

.plan-information {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  align-items: end;
  margin: 33px 0;
}
.plan-information h3 { font-size: clamp(24px, 2.4vw, 32px); line-height: 0.92; margin: 0 0 11px; }
.plan-information > div > p { max-width: 260px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }

.plan-benefits { display: flex; gap: 25px; margin-top: 20px; }
.plan-benefits p { display: flex; align-items: baseline; gap: 6px; color: var(--ink); }
.plan-benefits strong { font-size: 29px; line-height: 0.8; letter-spacing: -0.05em; }
.plan-benefits span { font-size: 8px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }

.price { white-space: nowrap; font-size: 12px; letter-spacing: 0.1em; text-align: right; }
.price strong { display: block; font-size: clamp(38px, 4vw, 47px); line-height: 0.85; letter-spacing: -0.05em; }
.price small { display: block; font-size: 9px; color: var(--muted); letter-spacing: 0.14em; }
.price .per-cup { color: var(--tan); margin-top: 6px; }

.plan-fineprint {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}

/* -------------------------------------------------------------------- app */
.app-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(35px, 9vw, 140px);
  align-items: center;
  min-height: 790px;
  overflow: hidden;
}
.app-copy > p:not(.section-kicker) {
  max-width: 350px;
  margin: 38px 0 30px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}

.phone-scene { height: 630px; position: relative; display: grid; place-items: center; }
.phone-shadow {
  position: absolute;
  width: 255px;
  height: 70px;
  background: rgba(90, 62, 43, 0.2);
  filter: blur(19px);
  border-radius: 50%;
  bottom: 34px;
}
.phone {
  position: relative;
  z-index: 1;
  width: 270px;
  height: 560px;
  padding: 15px;
  background: var(--ink);
  border: 7px solid #2d2c2b;
  border-radius: 37px;
  box-shadow: 16px 20px 0 var(--paper-deep), 34px 35px 0 rgba(90, 62, 43, 0.13);
  color: var(--paper);
  overflow: hidden;
  transform: rotate(7deg);
  will-change: transform;
}
.phone::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 50%;
  width: 84px;
  height: 17px;
  background: #2d2c2b;
  border-radius: 0 0 12px 12px;
  transform: translateX(-50%);
}
.phone-top { display: flex; justify-content: space-between; padding: 4px 2px 23px; font-size: 8px; font-weight: 700; letter-spacing: 0.1em; }
.phone-brand { font-size: 25px; letter-spacing: -0.09em; }
.phone h3 { margin: 26px 0 18px; font-size: 30px; line-height: 0.9; }
.phone h3 em { color: var(--tan); }
.phone figure { height: 185px; margin: 0; border-radius: 4px; overflow: hidden; }
.phone-location { padding: 14px 0; font-size: 11px; }
.phone-location span, .phone-location small {
  display: block;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tan);
}
.phone-location b { display: block; margin: 5px 0; font-size: 19px; letter-spacing: -0.03em; }
.phone-location small { color: rgba(248, 246, 243, 0.55); letter-spacing: 0.06em; }
.phone-nav { position: absolute; bottom: 14px; left: 19px; right: 19px; display: flex; justify-content: space-between; }
.phone-nav i { width: 7px; height: 7px; border: 1px solid var(--paper); border-radius: 50%; }
.phone-nav i:first-child { background: var(--tan); border-color: var(--tan); }

.phone-note {
  position: absolute;
  z-index: 2;
  padding: 9px 12px;
  background: var(--paper-deep);
  font-size: 9px;
  line-height: 1.45;
  letter-spacing: 0.12em;
  box-shadow: 6px 7px 0 rgba(90, 62, 43, 0.08);
}
.phone-note i { display: block; margin-top: 5px; font-size: 17px; font-style: normal; color: var(--tan); }
.note-one { top: 13%; right: 2%; transform: rotate(7deg); }
.note-two { bottom: 12%; left: 4%; transform: rotate(-6deg); }

/* -------------------------------------------------------------------- faq */
.faq { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(45px, 9vw, 150px); }
.faq-heading h2 { margin-top: 33px; }
.faq-list { border-top: 1px solid var(--dark-line); }
.faq-item { border-bottom: 1px solid var(--dark-line); }
.faq-item h3 { margin: 0; font-size: inherit; }
.faq-item button {
  width: 100%;
  min-height: 56px;
  padding: 21px 0;
  border: 0;
  background: transparent;
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  font-size: clamp(15px, 1.5vw, 21px);
  letter-spacing: -0.02em;
}
.faq-item button i {
  flex: none;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  color: var(--tan);
  transition: transform 0.3s;
}
.faq-item > div { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s ease; }
.faq-item > div > p {
  overflow: hidden;
  max-width: 460px;
  color: rgba(248, 246, 243, 0.68);
  font-size: 12.5px;
  line-height: 1.75;
}
.faq-item.is-open > div { grid-template-rows: 1fr; }
.faq-item.is-open > div > p { padding: 0 30px 22px 0; }
.faq-item.is-open button i { transform: rotate(45deg); }

/* ------------------------------------------------------------------- join */
.join {
  min-height: 680px;
  position: relative;
  overflow: hidden;
  padding: clamp(105px, 13vw, 170px) var(--gutter);
  text-align: center;
  color: var(--paper);
  background: var(--brown);
}
.join > *:not(.join-orbit) { position: relative; z-index: 2; }
.join .eyebrow { justify-content: center; color: rgba(248, 246, 243, 0.75); }
.join h2 { margin: 26px auto 24px; font-size: clamp(52px, 9vw, 135px); }
.join h2 em { color: var(--tan); }
.join-lede { margin: 0 auto 34px; font-size: 14px; color: rgba(248, 246, 243, 0.75); }

/* The member / café switch, in the page's own label style. */
.audience {
  display: inline-flex;
  gap: 4px;
  margin: 0 auto 26px;
  padding: 4px;
  border: 1px solid rgba(248, 246, 243, 0.35);
}
.audience label {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 20px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(248, 246, 243, 0.7);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.audience input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.audience label:has(input:checked) { background: var(--paper); color: var(--ink); }
.audience label:has(input:focus-visible) { outline: 2px solid var(--tan); outline-offset: 2px; }

.waitlist-form { width: min(520px, 100%); margin: 0 auto; text-align: left; }
.field-row { display: flex; border-bottom: 1px solid rgba(248, 246, 243, 0.7); }
.field-row input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--paper);
  outline: 0;
  padding: 14px 5px;
  font-size: 15px;
}
.field-row input::placeholder { color: rgba(248, 246, 243, 0.6); }
.field-row .button { min-width: 170px; margin-bottom: 7px; }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; margin-top: 10px; }
.field input, .field select {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-bottom: 1px solid rgba(248, 246, 243, 0.35);
  background: transparent;
  color: var(--paper);
  outline: 0;
  padding: 12px 4px;
  font-size: 13.5px;
  transition: border-color 0.2s;
}
.field input::placeholder { color: rgba(248, 246, 243, 0.45); }
.field input:focus, .field select:focus { border-bottom-color: var(--tan); }
.field select option { background: var(--brown); color: var(--paper); }

/* Off-screen rather than `display: none` — some bots skip anything the CSS
   hides outright. */
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status {
  min-height: 22px;
  margin-top: 22px;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--tan);
}
.form-status[data-state='error'] { color: #ffb4ad; }
.form-note {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(248, 246, 243, 0.5);
}
.form-note a { border-bottom: 1px solid rgba(248, 246, 243, 0.35); }

.join-orbit {
  position: absolute;
  z-index: 1;
  width: 400px;
  aspect-ratio: 1;
  left: 50%;
  bottom: -230px;
  margin-left: -200px;
  border-radius: 50%;
  border: 1px solid rgba(248, 246, 243, 0.25);
  padding: 20px;
  animation: spin 32s linear infinite;
}
.join-orbit img { border-radius: 50%; opacity: 0.4; filter: grayscale(1) sepia(1); }
.join-orbit span {
  position: absolute;
  top: 9%;
  left: 50%;
  width: 400px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
}

/* ----------------------------------------------------------------- footer */
.footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 35px;
  padding: 49px clamp(24px, 5vw, 76px) 25px;
  border-top: 1px solid var(--line);
}
.footer > div { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: flex-end; align-items: start; }
.footer p, .footer a:not(.wordmark), .footer small { font-size: 9px; letter-spacing: 0.12em; color: var(--muted); }
.footer a:not(.wordmark) { position: relative; display: inline-flex; align-items: center; min-height: 44px; }
.footer a:not(.wordmark)::after {
  content: '';
  position: absolute;
  bottom: 12px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--brown);
  transition: width 0.2s;
}
.footer a:not(.wordmark):hover::after { width: 100%; }
.footer p { display: flex; align-items: center; min-height: 44px; }
.footer small { grid-column: 1 / 3; border-top: 1px solid var(--line); padding-top: 18px; }

/* -------------------------------------------------------- legal sub-pages */
/* The navbar is `position: fixed` and transparent until the page scrolls, so
   these pages need their content pushed clear of it rather than starting
   underneath. */
.legal-page { padding-top: calc(var(--nav-h) + clamp(48px, 6vw, 96px)); }
.legal { max-width: 720px; }
.legal .section-kicker { margin-bottom: 22px; }
.legal-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.legal h1 { font-size: clamp(34px, 5vw, 62px); line-height: 0.92; letter-spacing: -0.05em; font-weight: 900; text-transform: uppercase; }
.legal h2 { margin-top: 46px; font-size: clamp(18px, 2vw, 24px); }
.legal p, .legal li { margin-top: 15px; color: var(--muted); font-size: 14.5px; line-height: 1.8; }
.legal ul { list-style: disc; padding-left: 22px; }
.legal a { color: var(--brown); font-weight: 600; border-bottom: 1px solid var(--line); }
.legal-meta { margin-top: 18px; font-size: 12.5px; color: var(--muted); }

/* ================================================================ motion */
/* Reveals default to the VISIBLE state. `html.js` is what opts the page into
   starting hidden, and it is set from JavaScript — so a browser with scripting
   off, or a script that 404s, shows the whole page rather than a blank one. */
html.js .reveal,
html.js .reveal-text {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
html.js .reveal-text { transform: translateY(48px); transition-duration: 0.8s; }
html.js .reveal.is-in,
html.js .reveal-text.is-in { opacity: 1; transform: none; }

html.js .line-wrap > span,
html.js .line-wrap > em { display: block; transform: translateY(120%); }
html.js .is-lit .line-wrap > span,
html.js .is-lit .line-wrap > em { transform: none; transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1); }
html.js .is-lit .line-wrap:nth-child(2) > * { transition-delay: 0.1s; }
html.js .is-lit .line-wrap:nth-child(3) > * { transition-delay: 0.2s; }

/* The hero's own entrance, after the loader lifts. */
html.js .hero-eyebrow,
html.js .hero-copy > p,
html.js .hero-actions,
html.js .coffee-orbit,
html.js .hero-brand-art,
html.js .hero-bottom { opacity: 0; }
html.js .hero.is-lit .hero-eyebrow,
html.js .hero.is-lit .hero-copy > p,
html.js .hero.is-lit .hero-actions,
html.js .hero.is-lit .hero-bottom {
  opacity: 1;
  transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s;
}
html.js .hero.is-lit .coffee-orbit,
html.js .hero.is-lit .hero-brand-art {
  opacity: 1;
  animation: art-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
html.js .hero.is-lit .hero-brand-art { animation-delay: 0.12s; }

@keyframes art-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* The drink stage: each image flies in from its own side, then the middle one
   drifts on scroll. The drift is a CSS variable written by the scroll handler
   so it composes with the resting rotation instead of overwriting it. */
html.js .drink-image { opacity: 0; }
html.js .drink-stage.is-in .drink-one { animation: drink-one-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
html.js .drink-stage.is-in .drink-two { animation: drink-two-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.14s both; }
html.js .drink-stage.is-in .drink-three { animation: drink-three-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both; }

@keyframes drink-one-in {
  from { opacity: 0; transform: translateX(-40%) rotate(-16deg); }
  to { opacity: 1; transform: translateX(0) rotate(-6deg); }
}
@keyframes drink-two-in {
  from { opacity: 0; transform: translateX(35%) rotate(16deg); }
  to { opacity: 1; transform: translateX(0) rotate(6deg); }
}
@keyframes drink-three-in {
  from { opacity: 0; transform: translateY(22%) rotate(-2deg); }
  to { opacity: 1; transform: translateY(0) rotate(-2deg); }
}
/* Once the entrance has finished the scroll drift takes over. */
.drink-stage.is-settled .drink-three {
  animation: none;
  opacity: 1;
  transform: translateY(var(--drift, 0px)) rotate(-2deg);
}
.partner-art img { transform: translateY(var(--drift, 0px)) scale(var(--zoom, 1)); }
.phone { transform: translateY(var(--drift, 0px)) rotate(var(--tilt, 7deg)); }

/* The step illustrations draw themselves. Set up in JS, which measures each
   path — a dash array has to be the path's real length or nothing happens. */
html.js .line-illustration path {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
}
html.js .step.is-in .line-illustration path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.85s ease;
}

@media (min-width: 681px) {
  .cafe-rail { cursor: grab; }
  .cafe-rail:active { cursor: grabbing; }
}

/* ============================================================ responsive */

/* Laptop / small desktop. */
@media (max-width: 1280px) {
  .main-nav { margin-left: 48px; gap: 22px; }
  .hero-copy { width: 66%; }
  .partner-art { height: 540px; }
}

/* iPad Pro landscape and small laptops. */
@media (max-width: 1080px) {
  .main-nav { gap: 18px; margin-left: 24px; }
  .hero-copy { width: 70%; }
  .hero-brand-art { display: none; }
  .coffee-orbit { right: -4%; opacity: 0.85; }
  .intro-layout { grid-template-columns: 1fr; gap: 26px; }
  .intro-copy { max-width: 460px; }
  .manifesto { grid-template-columns: 1fr; gap: 48px; }
  .manifesto-visual { height: min(70vw, 520px); }
  .partner { grid-template-columns: 1fr 1fr; gap: 48px; }
  .partner-art { height: 480px; }
  .membership-layout { gap: 48px; }
  .cafe-card, .cafe-card-large { width: 46vw; }
  .app-preview { gap: 40px; min-height: 0; }
  .phone { transform: rotate(5deg); }
  .faq { gap: 48px; }
}

/* iPad portrait / tablets. */
@media (max-width: 900px) {
  :root { --nav-h: 74px; }

  .hero { min-height: 0; padding-top: 130px; padding-bottom: 40px; }
  .hero-copy { width: 100%; }
  .hero-copy > p { width: min(420px, 100%); }
  .coffee-orbit {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    width: min(360px, 74vw);
    margin: 44px auto 0;
    opacity: 1;
  }
  .hero-bottom { position: static; margin-top: 40px; }

  .steps { grid-template-columns: 1fr 1fr; }
  .step, .step:nth-child(2), .step:last-child {
    min-height: 0;
    padding: 28px clamp(18px, 3vw, 34px) 28px 0;
    border-right: 1px solid var(--dark-line);
    border-bottom: 1px solid var(--dark-line);
  }
  .step:nth-child(2) { border-right: 0; padding-left: clamp(18px, 3vw, 34px); }
  .step:last-child { grid-column: 1 / -1; padding-left: 0; border-bottom: 0; }
  .step p { max-width: 340px; }

  .partner { grid-template-columns: 1fr; gap: 40px; }
  .partner-art { height: 420px; }

  .membership-layout { grid-template-columns: 1fr; gap: 40px; }
  .plan-tabs { flex-direction: row; flex-wrap: wrap; border-top: 0; gap: 8px; }
  .plan-tab {
    flex: 1 1 auto;
    min-width: 130px;
    padding: 14px 12px;
    border: 1px solid var(--line);
    text-align: center;
  }
  .plan-tab.is-active, .plan-tab:hover { padding-left: 12px; background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .plan-preview { max-width: none; }

  .app-preview { grid-template-columns: 1fr; gap: 20px; }
  .phone-scene { height: 560px; order: -1; }

  .faq { grid-template-columns: 1fr; gap: 34px; }
}

/* Large phones and small tablets. */
@media (max-width: 680px) {
  :root { --gutter: 24px; }

  .cursor-dot, .cursor-ring { display: none; }
  .section-padding { padding: 83px var(--gutter); }

  .navbar { height: 70px; padding: 0 20px; }
  .navbar:not(.is-stuck) { background: rgba(239, 233, 226, 0.9); backdrop-filter: blur(12px); }
  .hero-rule { display: none; }
  .wordmark { font-size: 26px; }

  .main-nav {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    margin: 0;
    padding: 12px 20px 24px;
    flex-direction: column;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    transform: translateY(-140%);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .navbar.is-open .main-nav { transform: translateY(0); }
  .main-nav a { padding: 16px 0; font-size: 12px; border-bottom: 1px solid var(--line); }
  .main-nav a::after { display: none; }

  .nav-cta { display: none; }
  .nav-toggle { display: block; }

  .hero { padding: 112px 24px 32px; }
  .hero-eyebrow { margin-bottom: 30px; }
  .hero h1, .join h2 { font-size: clamp(46px, 14vw, 76px); }
  .hero-copy > p { width: 100%; margin: 22px 0; font-size: 16px; }
  .hero-actions { gap: 10px; }
  .button { min-width: 0; flex: 1 1 auto; padding: 14px 15px; }
  .button-text { flex: 0 0 auto; }
  .coffee-orbit { width: min(300px, 78vw); margin-top: 36px; }
  .hero-bottom { font-size: 8px; margin-top: 34px; }
  .hero-bottom > p:first-child { display: none; }
  .scroll-note { margin-right: auto; }

  .intro-layout { margin: 40px 0 52px; }
  .intro-copy { font-size: 13.5px; }

  /* Narrow enough that no width cap can keep the caption clear of the middle
     photograph, so the photograph moves up instead and the caption gets a band
     of its own along the bottom. */
  .drink-stage { height: 540px; }
  .drink-one { width: 42%; left: 3%; top: 6%; }
  .drink-two { width: 35%; right: 5%; top: 4%; }
  .drink-three { width: 47%; left: 27%; bottom: 26%; }
  .drink-label { font-size: 7px; letter-spacing: 0.12em; }
  .label-one { top: 3%; left: 0; }
  .label-two { top: 36%; right: 0; }
  .label-three { bottom: 21%; right: 1%; }
  .drink-caption { bottom: 3%; max-width: 74%; font-size: 26px; }

  .section-heading h2 { margin-top: 24px; }
  .steps { display: block; margin-top: 56px; }
  .step, .step:nth-child(2), .step:last-child {
    min-height: 0;
    padding: 26px 0;
    border-right: 0;
    border-bottom: 1px solid var(--dark-line);
  }
  .step:last-child { border-bottom: 0; }
  .line-illustration { height: 92px; margin: 18px 0; }

  .manifesto-visual { height: 62vw; }
  .manifesto-visual p { left: 18px; bottom: 18px; }
  .manifesto-copy > p:not(.section-kicker) { margin: 26px 0 26px; }

  .inline-heading { display: block; padding-right: var(--gutter); }
  .inline-heading > p { margin-top: 20px; max-width: none; }
  .cafe-rail { margin-top: 40px; gap: 16px; }
  .cafe-card, .cafe-card-large { width: 76vw; min-width: 0; }
  .cafe-card figure, .cafe-card-large figure { height: 300px; }

  .partner-art { height: 340px; }
  .partner-stamp { width: 76px; height: 76px; font-size: 19px; }
  .partner-copy > p:not(.section-kicker) { margin: 26px 0 22px; }

  .membership-heading { display: block; }
  .membership-note { margin-top: 20px; }
  .membership-layout { margin-top: 40px; }
  .plan-tab { min-width: 0; flex: 1 1 40%; font-size: 12px; }
  .membership-card { height: 200px; padding: 20px; }
  .membership-card > p { font-size: 29px; }
  .plan-information { display: block; margin: 26px 0; }
  .plan-information > div > p { max-width: none; }
  .plan-benefits { gap: 17px; }
  .price { text-align: left; margin-top: 24px; }
  .price strong { display: inline-block; }
  .price .per-cup { display: inline-block; margin: 0 0 0 12px; }
  .plan-preview .button { width: 100%; }

  .phone-scene { height: 500px; }
  .phone { width: 240px; height: 490px; transform: rotate(4deg); }
  .phone h3 { font-size: 26px; }
  .phone figure { height: 150px; }
  .note-one { right: 0; }
  .note-two { left: 0; }

  .join { min-height: 0; }
  .join h2 { margin: 20px auto; }
  .field-row { flex-direction: column; border-bottom: 0; }
  .field-row input { border-bottom: 1px solid rgba(248, 246, 243, 0.7); padding: 14px 2px; }
  .field-row .button { width: 100%; margin: 16px 0 0; }
  .field-grid { grid-template-columns: 1fr; gap: 0; }
  .join-orbit { width: 300px; margin-left: -150px; bottom: -190px; }
  .join-orbit span { width: 300px; }

  .footer { grid-template-columns: 1fr; gap: 8px; padding-top: 40px; }
  .footer > div { justify-content: flex-start; }
  .footer small { grid-column: 1; margin-top: 16px; }
}

/* iPhone and small Android. */
@media (max-width: 430px) {
  .hero { padding: 104px 22px 28px; }
  .hero h1, .join h2 { font-size: clamp(40px, 13.5vw, 60px); }
  .hero-copy > p { font-size: 15px; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .button { justify-content: space-between; }
  .button-text { padding: 12px 0; }
  .coffee-orbit { width: min(260px, 80vw); }

  .drink-stage { height: 470px; }
  .drink-caption { font-size: 21px; max-width: 80%; }

  .cafe-card, .cafe-card-large { width: 84vw; }
  .cafe-card figure, .cafe-card-large figure { height: 260px; }

  .membership-card { height: 180px; }
  .plan-tab { flex: 1 1 100%; }

  .phone-scene { height: 440px; }
  .phone { width: 214px; height: 440px; transform: rotate(3deg); }
  .phone h3 { font-size: 23px; }
  .phone figure { height: 124px; }
  .phone-note { display: none; }

  .join-orbit { width: 240px; margin-left: -120px; bottom: -160px; }
  .join-orbit span { width: 240px; letter-spacing: 0.14em; }
}

/* Everything above is decoration over a page that reads fine without it. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  html.js .reveal,
  html.js .reveal-text,
  html.js .drink-image,
  html.js .hero-eyebrow,
  html.js .hero-copy > p,
  html.js .hero-actions,
  html.js .coffee-orbit,
  html.js .hero-brand-art,
  html.js .hero-bottom { opacity: 1; transform: none; }

  html.js .line-wrap > span,
  html.js .line-wrap > em { transform: none; }

  html.js .line-illustration path { stroke-dashoffset: 0; }

  .partner-art img, .phone, .drink-stage.is-settled .drink-three { transform: none; }
  .phone { transform: rotate(4deg); }
}