/**
 * 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-base: clamp(24px, 7vw, 112px);
  /* The side inset is the notch on an iPhone held sideways — up to ~59px,
     against a 24px gutter on a phone. Both sides take the larger of the two
     insets, because the notch moves to whichever side the phone was turned
     towards, and a layout that jumps on rotation is worse than one a few
     pixels generous. Zero on anything without a notch. */
  --safe-x: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --gutter: max(var(--gutter-base), var(--safe-x));
  --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 max(clamp(24px, 5vw, 76px), var(--safe-x));
  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 {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  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;
  /* The bottom padding is the height of `.hero-bottom` (44px), its 26px
     offset and a gap — it is absolutely positioned, so without this reserve
     the content runs underneath it. On a 1366x768 laptop the buttons and
     "Scroll to discover" overlapped by 42px before this was measured. */
  padding: clamp(110px, 14svh, 170px) var(--gutter) 116px;
  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 {
  /* min() of a width and a height term: 8.3vw alone gives a 1366x768 laptop a
     113px headline four lines tall, which pushes the call to action below the
     fold. The svh term keeps short screens — laptops, landscape phones —
     proportionate without shrinking tall ones. */
  font-size: clamp(44px, min(8.3vw, 12.5svh), 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);
  /* The drink photographs fly in from 35-40% of their own width off to the
     side. For that moment they poke past the screen edge, and iOS Safari will
     let a finger pan the page sideways to follow them — it does not reliably
     honour `overflow-x: hidden` on <body>. `clip` rather than `hidden`
     because it clips without making this section a scroll container, so the
     stage keeps behaving as ordinary flow. Measured at 402-673px wide, where
     the page was up to 35px wider than the screen. */
  overflow-x: clip;
}
.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 figure { margin: 0; height: 390px; overflow: hidden; }
.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; }

/* The one-line pitch under a café's name. `.cafe-card p` above is the tiny
   tan uppercase area label and the label block near the top of this file
   uppercases it too — so this has to undo case, tracking and weight rather
   than just set a size, or every description renders as a shouted caption. */
.cafe-card .cafe-vibe {
  max-width: 34ch;
  margin: 12px 0 0;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

/* Where a photograph's subject is not in the middle — a sign in a corner — the
   crop point moves to it. Cards change aspect ratio at every breakpoint, so a
   centre crop that works on a laptop can cut the one thing worth seeing off a
   phone. An attribute rather than inline style, because the CSP forbids
   `style=` and one exception would loosen it for the whole origin. */
img[data-focus='top'] { object-position: 50% 22%; }
img[data-focus='upper-left'] { object-position: 22% 28%; }
img[data-focus='upper-right'] { object-position: 78% 32%; }
img[data-focus='right'] { object-position: 80% 45%; }

.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;
  --orbit: 400px;
  --orbit-shows: 0.4;
  padding: clamp(105px, 13vw, 170px) var(--gutter) calc(var(--orbit) * var(--orbit-shows) + 56px);
  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: 16px; /* under 16px, iOS zooms the page on focus */
}
.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: 16px; /* under 16px, iOS zooms the page on focus */
  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: var(--orbit);
  aspect-ratio: 1;
  left: 50%;
  bottom: calc(var(--orbit) * (var(--orbit-shows) - 1));
  margin-left: calc(var(--orbit) / -2);
  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: var(--orbit);
  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 max(clamp(24px, 5vw, 76px), var(--safe-x)) calc(25px + env(safe-area-inset-bottom, 0px));
  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 { 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-base: 24px; }

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

  .navbar { height: 70px; padding: 0 max(20px, var(--safe-x)); }
  .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 max(20px, var(--safe-x)) 24px;
    /* On a short screen — a phone on its side, a Flip's cover display — four
       47px links do not fit under the bar, and the page behind is locked while
       the menu is open. So the menu scrolls itself. */
    max-height: calc(100svh - 70px);
    overflow-y: auto;
    overscroll-behavior: contain;
    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: 9px; 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 { width: 76vw; min-width: 0; }
  .cafe-card 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: 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) {
  /* The section headings are single words at 900 weight, and the longest —
     "CHARACTER." — is about 6.3em wide. At the 40px floor that is wider than a
     280px Galaxy Fold cover or a 320px phone can hold, so below ~390px the
     size follows the width down instead. At 390 and up this is 40px either way. */
  h2 { font-size: clamp(24px, 10.2vw, 46px); }
  .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 { width: 84vw; }
  .cafe-card 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: 240px; }
  .join-orbit span { 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); }
}