/* Breath Buddy · v4 · Measured Geometry, benefit-led, with Kelly's In the Moment prototype (Home, Cove, About)
   Tokens from design.breathbuddy.com/identity:
   Deep Mineral #304A50 · Warm Linen #F1EBDD · Coral Orange #E87C50 · Sea Glass #B7C9C4
   Bricolage Grotesque throughout. Sentence case throughout; no eyebrow labels.
   Coral marks the breath and the call to action, nothing else. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --press: cubic-bezier(.3,.7,.4,1);   /* taps press in fast and spring back (same as the homepage) */
  --spring: linear(0, .077, .256, .474, .685, .863, .993, 1.076, 1.117, 1.126, 1.114, 1.09, 1.062, 1.036, 1.015, .999, .989, .985, .984, .986, .989, .993, .996, .999, 1);
  /* colour */
  --linen: #f1ebdd;
  --linen-2: #f7f3ea;
  --rule: #d9d1c0;
  --mineral: #304a50;
  --ink: #3a5156;
  --muted: #50666a;
  --seaglass: #b7c9c4;
  --seaglass-tint: #dce5e2;
  --coral: #e87c50;
  --coral-ink: #9f4f36;
  --night: #1f2436;

  /* type: six steps */
  --t-xl: clamp(38px, 4.4vw, 58px);
  --t-l: clamp(28px, 2.8vw, 38px);
  --t-m: clamp(19px, 1.55vw, 22px);
  --t-body: 17.5px;
  --t-s: 14.5px;
  --t-xs: 13px;

  --font: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;

  /* space */
  --max: 1240px;
  --gutter: clamp(20px, 4.2vw, 64px);
  --section: clamp(96px, 11vw, 168px);
  --header: 68px;

  --settle: cubic-bezier(0.33, 0, 0.22, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--linen);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
::selection { background: var(--seaglass); color: var(--mineral); }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
section[id] { scroll-margin-top: calc(var(--header) + 12px); }
:focus-visible { outline: 2px solid var(--coral-ink); outline-offset: 3px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--mineral); color: var(--linen); font-size: var(--t-s); padding: 12px 16px; border-radius: 8px; text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.6vw, 40px); }

/* ---------- type ---------- */
h1, h2, h3 { color: var(--mineral); font-weight: 500; text-wrap: balance; }
h1, .xl { font-size: var(--t-xl); line-height: 1.02; letter-spacing: -0.035em; }
h2, .l { font-size: var(--t-l); line-height: 1.1; letter-spacing: -0.025em; }
.m { font-size: var(--t-m); line-height: 1.45; letter-spacing: -0.008em; }
.s { font-size: var(--t-s); line-height: 1.5; }
.muted { color: var(--muted); }
.tnum { font-variant-numeric: tabular-nums; }
p { text-wrap: pretty; }

/* ---------- announcement + header ---------- */
.announce {
  background: var(--mineral); color: var(--linen);
  font-size: var(--t-xs); line-height: 1; letter-spacing: 0.01em;
  text-align: center; padding: 11px var(--gutter);
}
.announce .sep { color: var(--coral); margin: 0 0.6em; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--linen) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(16px);
  backdrop-filter: saturate(1.2) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 400ms var(--settle);
}
.site-header.is-stuck { border-bottom-color: var(--rule); }
.nav { height: var(--header); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--mineral); }
.brand svg { width: 27px; height: 27px; }
.wordmark { font-weight: 500; font-size: 21px; letter-spacing: -0.035em; line-height: 1; white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: clamp(18px, 2.3vw, 34px); }
.nav-links a:not(.btn) {
  font-size: 15px; line-height: 1; text-decoration: none; color: var(--ink);
  padding: 8px 0; background: linear-gradient(var(--coral), var(--coral)) no-repeat 0 100% / 0 1.5px;
  transition: background-size 360ms var(--settle), color 200ms;
}
.nav-links a:not(.btn):hover { color: var(--mineral); background-size: 100% 1.5px; }
.nav-links a[aria-current="page"] { color: var(--mineral); background-size: 100% 1.5px; }
.nav-end { display: flex; align-items: center; gap: 10px; }
.menu-toggle { display: none; background: none; border: 0; padding: 10px 4px; font-size: 15px; color: var(--mineral); cursor: pointer; }
.mobile-menu { border-top: 1px solid var(--rule); padding: 8px var(--gutter) 18px; background: var(--linen); }
.mobile-menu a { display: block; padding: 14px 0; font-size: 20px; letter-spacing: -0.02em; color: var(--mineral); text-decoration: none; border-bottom: 1px solid var(--rule); }
@media (max-width: 960px) { .nav-links { display: none; } .menu-toggle { display: block; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--mineral); color: var(--linen);
  font-size: 15.5px; font-weight: 500; line-height: 1; letter-spacing: -0.005em;
  padding: 16px 24px; border: 0; border-radius: 999px; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background-color 260ms var(--settle), transform 600ms var(--spring);
}
.btn:active { transform: scale(0.96); transition: background-color 260ms var(--settle), transform 90ms var(--press); }
.btn:disabled { cursor: default; transform: none; }
/* Hover: the button inverts, its new colour spreading from where the pointer enters and drawing back where it leaves
   (as on the homepage). ::after redraws the label inside the spreading colour; site.js sets data-label and --px/--py/--r. */
@property --rr { syntax: '<length>'; inherits: false; initial-value: 0px; }   /* only the radius animates; the centre jumps to the pointer */
.btn { position: relative; overflow: hidden; isolation: isolate; --wash: var(--linen); --wash-ink: var(--mineral); --wash-edge: var(--mineral); }
.btn::after { content: attr(data-label); content: attr(data-label) / ''; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: inherit; background: var(--wash); color: var(--wash-ink); box-shadow: inset 0 0 0 1.5px var(--wash-edge); --rr: 0px; clip-path: circle(var(--rr) at var(--px, 50%) var(--py, 50%)); transition: --rr 400ms cubic-bezier(.65, 0, .35, 1); pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .btn:not(:disabled):hover::after { --rr: var(--r, 200px); transition: --rr 550ms cubic-bezier(.33, 1, .68, 1); } }
.btn-linen { --wash: var(--mineral); --wash-ink: var(--linen); --wash-edge: var(--linen); }
.btn-buy { --wash: var(--mineral); --wash-ink: var(--linen); --wash-edge: var(--mineral); }
.btn-sm { padding: 12px 18px; font-size: 14.5px; }
.btn-ghost { background: transparent; color: var(--mineral); box-shadow: inset 0 0 0 1px var(--mineral); --wash: var(--mineral); --wash-ink: var(--linen); --wash-edge: var(--mineral); }
.btn-ghost:hover { background: var(--mineral); color: var(--linen); }
.btn-ghost:disabled, .btn-ghost:disabled:hover { background: transparent; color: var(--mineral); opacity: 0.45; }
.btn-linen { background: var(--linen); color: var(--mineral); }

.text-link {
  display: inline-block; font-size: 15.5px; color: var(--mineral); text-decoration: none; padding: 6px 0;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px;
  transition: background-size 360ms var(--settle);
}
.text-link:hover { background-image: linear-gradient(var(--coral), var(--coral)); }

/* ---------- waitlist form ---------- */
.waitlist { width: 100%; max-width: 460px; }
.waitlist-row {
  display: flex; gap: 6px; padding: 5px;
  background: var(--linen-2); border: 1px solid var(--rule); border-radius: 999px;
  transition: border-color 200ms;
}
.waitlist-row:focus-within { border-color: var(--mineral); }
.waitlist input[type="email"] {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font: 400 16px/1 var(--font); color: var(--mineral); padding: 0 16px;
}
.waitlist input[type="email"]::placeholder { color: var(--muted); }
.form-note { margin-top: 12px; font-size: var(--t-xs); color: var(--muted); }
.form-status { margin-top: 6px; font-size: var(--t-s); font-weight: 500; min-height: 1.4em; }
.form-status.success { color: var(--mineral); }
.form-status.error { color: var(--coral-ink); }
@media (max-width: 440px) {
  .waitlist-row { flex-direction: column; border-radius: 24px; padding: 6px; }
  .waitlist input[type="email"] { padding: 14px 12px; }
}

/* ---------- hero: headline and form on linen, the feeling in the photograph ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  grid-template-areas: "head media" "body media";
  grid-template-rows: 1fr auto;
  min-height: min(calc(100svh - var(--header) - 35px), 880px);
}
.hero-head, .hero-body {
  padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  padding-right: clamp(28px, 4vw, 72px);
}
.hero-head { grid-area: head; align-self: end; padding-top: clamp(40px, 6vw, 96px); }
.hero-head h1 { font-size: clamp(40px, 4.8vw, 66px); line-height: 1.0; letter-spacing: -0.04em; max-width: 10ch; }
.hero-body { grid-area: body; padding-top: 26px; padding-bottom: clamp(40px, 6vw, 88px); }
.hero-body .m { max-width: 24em; }
.hero-actions { margin-top: 28px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.hero-proof { list-style: none; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--rule); max-width: 30em; }
.hero-proof li { font-size: var(--t-s); line-height: 1.5; color: var(--ink); }
.hero-proof li + li { margin-top: 4px; }
.hero-proof .u { color: var(--muted); }
.hero-media { grid-area: media; position: relative; overflow: hidden; background: #d9cdb9; }
.hero-media img, .hero-breath { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero-breath { opacity: 0; transition: opacity 600ms var(--settle); }
.hero-breath.is-live { opacity: 1; }
.breath-toggle {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(247, 243, 234, 0.72); color: var(--mineral);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.breath-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.breath-toggle .i-play, .breath-toggle[aria-pressed="true"] .i-pause { display: none; }
.breath-toggle[aria-pressed="true"] .i-play { display: block; }
@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; grid-template-areas: "head" "media" "body"; grid-template-rows: auto auto auto; min-height: 0; }
  .hero-head { padding: 34px var(--gutter) 26px; }
  .hero-head h1 { font-size: clamp(38px, 11vw, 48px); max-width: 11ch; }
  .hero-media { aspect-ratio: 4 / 5; }
  .hero-body { padding: 26px var(--gutter) 12px; }
}

/* ---------- proof ---------- */
.proof { border-bottom: 1px solid var(--rule); }
.proof-row { display: grid; grid-template-columns: 188px minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 56px); align-items: center; padding-block: 34px; }
.proof-label img { width: 100%; height: auto; }
.proof-lead { font-size: var(--t-m); line-height: 1.35; color: var(--mineral); letter-spacing: -0.01em; max-width: 24ch; }
.proof-names { font-size: var(--t-s); line-height: 1.55; color: var(--muted); }
@media (max-width: 960px) {
  .proof-row { grid-template-columns: 1fr; row-gap: 16px; padding-block: 30px; }
  .proof-label { width: 168px; }
}

/* ---------- sections ---------- */
.section { padding-block: var(--section); }

/* the moment: the room at the end of the working day, full bleed */
.moment { position: relative; background: #17262a; color: var(--linen); }
.moment-media { position: relative; overflow: hidden; }
.moment-layer { display: block; }
.moment-layer img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.moment-day { position: absolute; inset: 0; display: none; }
.moment-day img { height: 100%; }
/* dusk falls as the section scrolls through: the afternoon layer fades out, the room drifts a little slower than the page */
.moment-media.is-dusk.is-ready .moment-day { display: block; opacity: var(--day, 1); }
.moment-media.is-ready .moment-day img { animation: bb-fade-in 500ms var(--settle); }
@keyframes bb-fade-in { from { opacity: 0; } }
.moment-media.is-dusk .moment-layer { transform: translate3d(0, var(--drift, 0px), 0) scale(1.06); will-change: transform; }
.moment-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 24, 27, 0.42) 0%, rgba(14, 24, 27, 0) 46%); pointer-events: none; }
.moment-copy { position: absolute; inset: 0; padding-top: clamp(44px, 6.2vw, 104px); pointer-events: none; }
.moment-text { grid-column: 7 / span 6; pointer-events: auto; }
.moment h2 { color: var(--linen); font-size: var(--t-xl); line-height: 1.04; letter-spacing: -0.035em; max-width: 14ch; }
.moment .m { margin-top: 22px; color: rgba(241, 235, 221, 0.84); max-width: 22em; }
@media (max-width: 1100px) { .moment .m { display: none; } }
@media (max-width: 720px) {
  .moment { display: flex; flex-direction: column-reverse; }
  .moment-copy { position: static; padding: 52px 0 40px; }
  .moment-text { grid-column: 1 / -1; }
  .moment .m { display: block; }
  .moment-layer img { aspect-ratio: 4 / 3; }
  .moment-media::after { background: linear-gradient(180deg, #17262a 0%, rgba(23, 38, 42, 0) 22%); }
}

/* what you feel */
.feel-grid { row-gap: 48px; align-items: center; }
.feel-media { grid-column: 1 / span 6; aspect-ratio: 4 / 5; overflow: hidden; background: #e4ddd0; }
.feel-media img, .how-media img { width: 100%; height: 100%; object-fit: cover; }
.feel-copy { grid-column: 8 / span 5; }
.feel-copy h2 { font-size: clamp(32px, 3.3vw, 46px); line-height: 1.06; letter-spacing: -0.03em; max-width: 15ch; }
.feel-lines { margin-top: 26px; font-size: clamp(22px, 2vw, 28px); line-height: 1.3; letter-spacing: -0.02em; color: var(--mineral); }
.feel-copy .m { margin-top: 24px; color: var(--ink); max-width: 30em; }
.feel-list { list-style: none; margin-top: 40px; border-top: 1px solid var(--rule); }
.feel-list li { padding: 20px 0; border-bottom: 1px solid var(--rule); font-size: var(--t-m); line-height: 1.4; color: var(--ink); letter-spacing: -0.01em; }
.cite { margin-top: 20px; font-size: var(--t-s); color: var(--muted); }
.cite a { color: var(--mineral); text-underline-offset: 3px; text-decoration-color: var(--rule); }
.cite a:hover { text-decoration-color: var(--coral); }
@media (max-width: 960px) { .feel-media, .feel-copy { grid-column: 1 / -1; } .feel-media { max-width: 600px; } }

/* how it works: the product, then the three steps */
.how-grid { row-gap: 48px; align-items: center; }
.how-copy { grid-column: 1 / span 5; }
.how-copy .m { margin-top: 22px; color: var(--ink); max-width: 26em; }
.how-media { grid-column: 7 / span 6; aspect-ratio: 4 / 5; overflow: hidden; background: #e9e2d4; }
.steps { list-style: none; counter-reset: step; margin-top: 34px; border-top: 1px solid var(--rule); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 34px 1fr; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--rule); font-size: var(--t-m); line-height: 1.35; color: var(--mineral); letter-spacing: -0.01em; }
.steps li::before { content: counter(step); font-size: var(--t-s); color: var(--muted); font-variant-numeric: tabular-nums; }
.steps-named li { grid-template-columns: 88px 1fr; align-items: baseline; font-size: 17px; line-height: 1.5; color: var(--ink); letter-spacing: 0; padding: 18px 0; }
.steps-named li::before { content: none; }
.steps-named .step-name { font-size: var(--t-s); color: var(--muted); }
.steps-named strong { display: block; font-weight: 500; font-size: var(--t-m); line-height: 1.3; letter-spacing: -0.012em; color: var(--mineral); margin-bottom: 4px; }
.how-note { margin-top: 18px; font-size: var(--t-s); color: var(--muted); }
@media (max-width: 960px) { .how-copy, .how-media { grid-column: 1 / -1; } .how-media { max-width: 600px; grid-row: 1; } }

/* details */
.details-grid { row-gap: 40px; }
.macro-a { grid-column: 1 / span 6; grid-row: 1 / span 2; aspect-ratio: 4 / 5; overflow: hidden; background: var(--rule); }
.macro-a img, .macro-b img { width: 100%; height: 100%; object-fit: cover; }
.details-copy { grid-column: 8 / span 5; grid-row: 1; align-self: start; }
.details-copy .m { margin-top: 18px; }
.macro-b { grid-column: 8 / span 4; grid-row: 2; align-self: end; aspect-ratio: 4 / 3; overflow: hidden; background: var(--rule); }
@media (max-width: 960px) {
  .macro-a, .details-copy, .macro-b { grid-column: 1 / -1; grid-row: auto; }
  .macro-a { max-width: 560px; }
  .macro-b { max-width: 420px; }
}

/* story + founders' video */
.story { background: var(--linen-2); border-block: 1px solid var(--rule); }
.story-grid { row-gap: 40px; align-items: center; }
.story-copy { grid-column: 1 / span 5; }
.story-copy h2 { max-width: 12ch; }
.story-lede { margin-top: 22px; font-size: var(--t-m); line-height: 1.35; letter-spacing: -0.012em; color: var(--mineral); max-width: 22em; }
.story-copy p + p { margin-top: 16px; max-width: 32em; }
.story-copy .text-link { margin-top: 22px; }
.story-grid .video-ph { grid-column: 7 / span 6; }
@media (max-width: 960px) { .story-copy, .story-grid .video-ph { grid-column: 1 / -1; } }
.video-frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden;
  display: grid; place-items: center; align-content: center; gap: 14px;
  background: var(--mineral); color: var(--linen);
}
.video-play { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(241, 235, 221, 0.14); box-shadow: inset 0 0 0 1px rgba(241, 235, 221, 0.4); }
.video-play svg { width: 20px; height: 20px; fill: var(--linen); margin-left: 3px; }
.video-ph figcaption { margin-top: 12px; font-size: var(--t-s); color: var(--muted); }
.founders .video-ph { max-width: 980px; margin: 0 auto; }

/* placeholders (quotes, video): marked on the page so they can never ship by accident */
.ph {
  display: inline-block; font-size: 12px; line-height: 1; letter-spacing: 0.01em;
  color: #8c4430; background: rgba(232, 124, 80, 0.12); box-shadow: inset 0 0 0 1px rgba(159, 79, 54, 0.35);
  border-radius: 3px; padding: 5px 7px;
}
.video-frame .ph { color: var(--linen); background: rgba(232, 124, 80, 0.28); box-shadow: none; }

/* voices (placeholder quotes) */
.voices { padding-top: 0; padding-bottom: clamp(56px, 6vw, 88px); }
.voices + .how { padding-top: clamp(56px, 6vw, 88px); border-top: 1px solid var(--rule); }
.voices h2 { max-width: 16ch; }
.quotes { margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.quote { border-top: 1px solid var(--rule); padding-top: 22px; display: flex; flex-direction: column; gap: 20px; }
.quote blockquote p { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.45; letter-spacing: -0.01em; color: var(--mineral); }
.quote figcaption { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: var(--t-s); }
.q-name { color: var(--mineral); font-weight: 500; }
.q-when { color: var(--muted); }
@media (max-width: 860px) { .quotes { grid-template-columns: 1fr; gap: 30px; } }

/* interlude: Kelly's breath and pause illustration */
.interlude { text-align: center; padding: clamp(72px, 9vw, 128px) var(--gutter); background: var(--linen); }
.interlude-art { width: min(760px, 90vw); height: auto; margin: 0 auto 40px; }
.interlude h2 { font-size: var(--t-xl); line-height: 1.04; letter-spacing: -0.035em; }
.interlude p { margin-top: 18px; color: var(--ink); }

/* promise */
.promise {
  background-color: var(--seaglass);
  background-image:
    linear-gradient(to right, rgba(48, 74, 80, 0.075) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(48, 74, 80, 0.075) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: calc(50% - 24px) -1px;
  padding-block: clamp(96px, 11vw, 152px);
  text-align: center;
}
.promise .mark { width: clamp(76px, 7.5vw, 104px); height: auto; margin: 0 auto 36px; color: var(--coral); }
.promise h2 { font-size: var(--t-xl); line-height: 1; letter-spacing: -0.04em; }

/* offer */
.offer-grid { row-gap: 40px; align-items: center; }
.offer-img { grid-column: 1 / span 7; aspect-ratio: 5 / 4; overflow: hidden; background: #ece5d6; }
.offer-img img { width: 100%; height: 100%; object-fit: cover; }
.offer-copy { grid-column: 9 / span 4; }
.price-row { margin-top: 22px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.price { font-size: 40px; line-height: 1; letter-spacing: -0.03em; color: var(--mineral); font-weight: 500; font-variant-numeric: tabular-nums; }
.price-note { font-size: var(--t-s); color: var(--muted); }
.terms { margin: 22px 0 28px; padding: 16px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
@media (max-width: 960px) { .offer-img, .offer-copy { grid-column: 1 / -1; } }

/* faq */
.faq-grid { row-gap: 32px; }
.faq-head { grid-column: 1 / span 4; }
.faq-head h2 { max-width: 11ch; }
.faq-head p { margin-top: 18px; color: var(--muted); }
.faq-list { grid-column: 6 / span 7; border-top: 1px solid var(--rule); }
details { border-bottom: 1px solid var(--rule); }
summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0; font-size: var(--t-m); line-height: 1.35; font-weight: 500; color: var(--mineral); letter-spacing: -0.01em;
}
summary::-webkit-details-marker { display: none; }
summary .pm { width: 13px; height: 13px; flex: none; position: relative; }
summary .pm::before, summary .pm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.25px; background: var(--mineral); transition: transform 320ms var(--settle); }
summary .pm::after { transform: rotate(90deg); }
details[open] summary .pm::after { transform: rotate(0deg); }
details .a { padding: 0 0 24px; max-width: 36em; }
details .a > * + * { margin-top: 10px; }
@media (max-width: 960px) { .faq-head, .faq-list { grid-column: 1 / -1; } }

/* footer: Kelly's trailing-coral artwork under the links */
.site-footer { background: var(--linen); color: var(--mineral); padding-top: 56px; border-top: 1px solid var(--rule); }
.foot-main { display: flex; justify-content: space-between; align-items: center; gap: 24px 40px; flex-wrap: wrap; }
.foot-makers { display: block; }
.foot-makers img { width: 200px; height: auto; display: block; }
.foot-links { display: flex; gap: 8px 28px; flex-wrap: wrap; }
.foot-links a { padding-block: 10px; font-size: 15px; text-decoration: none; color: var(--ink); }
.foot-links a:hover { color: var(--mineral); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--coral); }
.foot-bottom { display: flex; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin-top: 36px; font-size: var(--t-xs); color: var(--muted); }
.foot-bottom a { color: inherit; text-underline-offset: 3px; }
.foot-art { margin-top: 28px; overflow: hidden; }
.foot-art img { width: 100%; height: min(22.96vw, max(200px, 12vw)); object-fit: fill; display: block; } /* capped on wide screens: a gentle horizontal stretch */
@media (max-width: 860px) {
  .foot-main { flex-direction: column; align-items: flex-start; gap: 16px; }
  .foot-makers img { width: 170px; }
  .foot-links { gap: 0 24px; }
  .foot-bottom { flex-direction: column; margin-top: 20px; }
}

/* sticky bar (phones) */
.sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--linen-2) 94%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--rule);
  transform: translateY(110%); transition: transform 460ms var(--settle);
}
.sticky-bar.visible { transform: translateY(0); }
.sticky-bar .sb-price { font-size: 20px; font-weight: 500; color: var(--mineral); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .sticky-bar { display: flex; } }

/* ---------- Cove: product page ---------- */
.purchase { padding-top: clamp(32px, 4vw, 56px); }
.purchase-grid { row-gap: 36px; align-items: start; }
.gallery { grid-column: 1 / span 7; }
.gallery-main { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #e9e2d4; border-radius: 3px; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-main figcaption { position: absolute; left: 12px; bottom: 12px; font-size: 11.5px; line-height: 1; padding: 6px 8px; border-radius: 3px; background: rgba(31, 44, 48, 0.62); color: var(--linen); }
.gallery-thumbs { margin-top: 12px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
@media (max-width: 1200px) {
  .gallery-thumbs { display: flex; overflow-x: auto; scrollbar-width: none; padding-block: 6px 4px; margin-inline: calc(-1 * var(--gutter, 20px)); padding-inline: var(--gutter, 20px); scroll-padding-inline: var(--gutter, 20px); }
  .gallery-thumbs::-webkit-scrollbar { display: none; }
  .gallery-thumbs button { flex: 0 0 104px; }
  .gallery-thumbs span { white-space: nowrap; }
}
.gallery-thumbs button { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: var(--muted); font-size: 13px; }
.gallery-thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; box-shadow: inset 0 0 0 1px transparent; outline: 1.5px solid transparent; outline-offset: 2px; transition: outline-color 200ms; }
.gallery-thumbs span { display: block; margin-top: 8px; }
.gallery-thumbs [aria-pressed="true"] { color: var(--mineral); }
.gallery-thumbs [aria-pressed="true"] img { outline-color: var(--mineral); }
/* not sticky (2 Oct): the column was pinned under the old sticky header; with the details opening inside it, a pinned
   column hid its own last rows on short screens and shifted under the pointer when they opened or closed */
.buy { grid-column: 9 / span 4; }
.buy h1 { font-size: clamp(56px, 6vw, 88px); line-height: 0.95; letter-spacing: -0.045em; }
.buy-line { margin-top: 10px; font-size: var(--t-m); color: var(--mineral); letter-spacing: -0.01em; }
.buy .m { margin-top: 22px; color: var(--mineral); }
.buy > p:not(.buy-line):not(.m) { margin-top: 14px; }
.buy-box { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--rule); }
.buy-box .price-row { margin-top: 0; }
.buy-box .terms { margin: 18px 0 20px; }
.buy-row { display: flex; gap: 10px; align-items: stretch; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--rule); border-radius: 999px; background: var(--linen-2); }
.qty input { width: 38px; border: 0; background: transparent; text-align: center; font: 500 16px/1 var(--font); color: var(--mineral); -moz-appearance: textfield; appearance: textfield; }
.qty input::-webkit-inner-spin-button, .qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty-btn { width: 40px; height: 100%; min-height: 48px; border: 0; background: none; font-size: 18px; color: var(--mineral); cursor: pointer; transition: transform 600ms var(--spring); }
.qty-btn:active { transform: scale(0.85); transition-duration: 90ms; transition-timing-function: var(--press); }
.btn-buy { flex: 1; background: var(--coral); color: #2b1a12; }

/* buy box modes: notify until Shopify Payments is live, then buy */
.buy-box[data-mode="notify"] .buy-mode, .buy-box[data-mode="buy"] .notify-mode { display: none; }
.notify-row { display: flex; gap: 6px; padding: 5px; background: var(--linen-2); border: 1px solid var(--rule); border-radius: 999px; }
.notify-row:focus-within { border-color: var(--mineral); }
.notify-row input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font: 400 16px/1 var(--font); color: var(--mineral); padding: 0 14px; }
.notify-row input::placeholder { color: var(--muted); }
.notify-row .btn-buy { flex: none; }
.notify-note { margin-top: 10px; font-size: var(--t-xs); color: var(--muted); }
.notify-status { margin-top: 6px; font-size: var(--t-s); font-weight: 500; min-height: 1.4em; }
.notify-status.success { color: var(--mineral); }
.notify-status.error { color: var(--coral-ink); }
@media (max-width: 440px) { .notify-row { flex-direction: column; border-radius: 22px; } .notify-row input { padding: 14px 12px; } }
.fit-note { margin-top: 16px; font-size: var(--t-xs); line-height: 1.55; color: var(--muted); }
@media (max-width: 960px) { .gallery, .buy { grid-column: 1 / -1; } .buy { position: static; } }

.product-jumps { border-block: 1px solid var(--rule); background: var(--linen); position: sticky; top: var(--header); z-index: 20; }
.product-jumps .wrap { display: flex; gap: clamp(18px, 3vw, 40px); justify-content: center; padding-block: 14px; overflow-x: auto; white-space: nowrap; }
.product-jumps a { font-size: 14px; color: var(--ink); text-decoration: none; }
.product-jumps a:hover { color: var(--mineral); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--coral); }
@media (max-width: 760px) { .product-jumps .wrap { justify-content: flex-start; } }

.made { background: #fbf9f4; }
.made-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.made-head h2 { max-width: 12ch; }
.made-head p { color: var(--ink); }
.annotated { position: relative; max-width: 1240px; margin: 24px auto 0; aspect-ratio: 1200 / 690; color: var(--mineral); }
.annotated-img { position: absolute; left: 17%; top: 21.7%; width: 66%; height: auto; filter: drop-shadow(0 18px 22px rgba(31, 44, 48, 0.18)); }
.annotated-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.note { position: absolute; font-size: clamp(16px, 1.7vw, 24px); line-height: 1.15; letter-spacing: -0.025em; color: var(--mineral); }
.n-weight { left: 3%; top: 9%; transform: rotate(-4deg); }
.n-touch { right: 3%; top: 12%; transform: rotate(3deg); text-align: right; }
.n-wings { left: 3%; top: 79%; transform: rotate(-3deg); }
.n-breath { right: 3%; top: 79%; transform: rotate(3deg); text-align: right; }
.rationale { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); }
.rationale h3 { font-size: 22px; letter-spacing: -0.02em; margin-bottom: 8px; }
.rationale p { font-size: 16px; color: var(--ink); }
@media (max-width: 760px) {
  .annotated { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; padding: 0 var(--gutter); }
  .annotated-img { position: static; grid-column: 1 / -1; width: 100%; margin-bottom: 8px; }
  .annotated-lines { display: none; }
  .note { position: static; transform: none; font-size: 17px; padding-top: 10px; border-top: 1px solid var(--rule); text-align: left !important; }
  .rationale { grid-template-columns: 1fr; gap: 24px; }
}

.material { display: grid; grid-template-columns: 1fr 1fr; background: var(--seaglass-tint); }
.material-media { min-height: 520px; }
.material-media img { width: 100%; height: 100%; object-fit: cover; }
.material-copy { padding: clamp(48px, 7vw, 110px) var(--gutter); align-self: center; max-width: 40em; }
.material-copy h2 { max-width: 12ch; margin-bottom: 22px; }
.material-copy p + p { margin-top: 14px; }
@media (max-width: 860px) { .material { grid-template-columns: 1fr; } .material-media { min-height: 0; height: 420px; } }

.how-compact { background: var(--linen-2); border-block: 1px solid var(--rule); }
.preorder-terms { background: #ece5d6; }


.preorder-dialog { border: 0; border-radius: 6px; padding: 36px; max-width: 460px; width: calc(100% - 32px); background: var(--linen); color: var(--ink); box-shadow: 0 30px 80px rgba(20, 30, 33, 0.35); }
.preorder-dialog::backdrop { background: rgba(23, 38, 42, 0.55); }
.preorder-dialog h2 { font-size: 34px; margin-bottom: 20px; }
.dialog-close { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border: 0; background: none; font-size: 26px; color: var(--mineral); cursor: pointer; }
.dialog-product { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.dialog-product img { width: 84px; height: 84px; border-radius: 4px; object-fit: cover; }
.dialog-note { margin: 14px 0 22px; font-size: var(--t-s); color: var(--muted); }

/* ---------- About ---------- */
/* Compact (8 Oct): the whole page fits one screen plus at most one scroll. */
.about-intro { padding-block: clamp(32px, 5vh, 64px); }
.about-intro-grid { row-gap: 28px; align-items: center; }
.about-intro h1 { grid-column: 1 / span 4; font-size: var(--t-xl); line-height: 1.04; max-width: 9ch; }
.about-founders { grid-column: 5 / -1; display: flex; align-items: center; gap: clamp(12px, 2vw, 32px); }
.founder-pair { flex: 1; min-width: 0; }
.founder-faces { display: flex; align-items: flex-end; gap: clamp(6px, 1.2vw, 18px); }
.founder-faces img { flex: 1; min-width: 0; height: auto; }
.founder-pair figcaption { margin-top: 12px; text-align: center; font-size: var(--t-xs); color: var(--muted); }
.founder-pair figcaption span { display: block; font-size: var(--t-s); color: var(--mineral); letter-spacing: -0.01em; }
.about-founders-x { font-size: var(--t-m); color: var(--muted); font-weight: 300; padding-bottom: 36px; }
.about-origin { display: grid; grid-template-columns: 1fr 1fr; background: var(--seaglass-tint); }
.about-origin-copy { padding: clamp(36px, 5vw, 72px) var(--gutter); max-width: 40em; align-self: center; }
.about-origin-copy h2 { margin-bottom: 18px; }
.about-origin-copy p + p { margin-top: 12px; }
.about-origin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 28px; }
.about-origin-media { position: relative; min-height: clamp(420px, 58vh, 620px); }
.about-origin-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; display: block; }
@media (max-width: 960px) {
  .about-intro h1 { grid-column: 1 / -1; max-width: none; }
  .about-founders { grid-column: 1 / -1; }
  .about-origin { grid-template-columns: 1fr; } .about-origin-media { min-height: 0; height: 420px; }
  .about-origin-media img { object-position: 50% 20%; }
}
@media (max-width: 720px) {
  .about-intro { padding-block: 16px 22px; }
  .about-intro-grid { row-gap: 14px; }
  .about-intro h1 { font-size: var(--t-l); line-height: 1.1; }
  .about-founders { gap: 8px; }
  .founder-pair figcaption { margin-top: 8px; font-size: 12px; }
  .founder-pair figcaption span { font-size: 13px; }
  .about-founders-x { padding-bottom: 30px; font-size: 18px; }
  .about-origin-copy { padding-block: 26px 32px; }
  .about-origin-copy h2 { margin-bottom: 12px; }
  .about-origin-actions { margin-top: 20px; }
  .about-origin-media { height: 280px; }
}
@media (max-width: 380px) {
  /* "Stefanie + Michael Broes" wraps here; equal caption heights keep the four faces level */
  .founder-pair figcaption { min-height: 5.4em; }
}

/* ---------- gaps + review mode (preview only) ---------- */
.gap {
  display: inline; font-size: var(--t-s); line-height: 1.5; font-weight: 400;
  color: #8c4430;
  background: rgba(232, 124, 80, 0.09);
  box-shadow: inset 0 -1px 0 rgba(159, 79, 54, 0.45);
  border-radius: 3px; padding: 2px 6px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.preview-tools { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: none; flex-direction: column; align-items: flex-end; gap: 8px; }
.is-preview .preview-tools { display: flex; }
@media (max-width: 720px) { .preview-tools { bottom: 78px; } }
.headline-toggle {
  font-size: 13px; line-height: 1; background: var(--linen-2); color: var(--mineral);
  border: 1px solid var(--rule); border-radius: 999px; padding: 8px 12px; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
.review-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; line-height: 1;
  background: var(--night); color: var(--linen); border: 0; border-radius: 999px; padding: 9px 13px; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
}
.review-toggle[aria-pressed="true"] { background: var(--coral-ink); }
.review [data-src] { position: relative; outline: 1px dashed rgba(159, 79, 54, 0.6); outline-offset: 3px; }
.review [data-src]::after {
  content: attr(data-src);
  position: absolute; left: 0; top: -18px; z-index: 5;
  font: 400 10px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: 0;
  background: var(--night); color: var(--linen); padding: 3px 5px; border-radius: 3px;
  white-space: nowrap; pointer-events: none; max-width: 90vw; overflow: hidden; text-overflow: ellipsis;
}
.review [data-flag] { outline-color: var(--coral); }
.review [data-flag]::after { background: var(--coral-ink); }

/* one motion: the breath */
@media (prefers-reduced-motion: no-preference) {
  .breathe { animation: bb-breathe 6s infinite; transform-origin: 50% 50%; }
  @keyframes bb-breathe {
    0% { transform: scale(1); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
    40% { transform: scale(1.07); animation-timing-function: cubic-bezier(0.33, 0, 0.22, 1); }
    100% { transform: scale(1); }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* short laptop screens */
@media (min-width: 721px) and (max-height: 820px) {
  .hero-head { padding-top: 28px; }
  .hero-head h1 { font-size: clamp(36px, 3.7vw, 50px); max-width: 11ch; }
  .hero-body { padding-top: 18px; padding-bottom: 32px; }
  .hero-body .m { font-size: 18px; }
  .hero-actions { margin-top: 20px; }
  .hero-proof { margin-top: 22px; padding-top: 14px; }
}

/* ---------- 2 Oct: the homepage's header on the light pages ----------
   Logo, "Our story" and Shop Now, as on the homepage, dark on linen; it scrolls away with the page. */
.top { position: relative; z-index: 50; }
.top-row { height: 100px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.top .brand svg { width: 28px; height: 28px; }
.top .wordmark { font-size: 23px; letter-spacing: -0.04em; }
.top-nav { display: flex; align-items: center; gap: 32px; }
.top-story { font-size: 15px; color: var(--mineral); text-decoration: none; padding: 12px 0; background: linear-gradient(currentColor, currentColor) 100% calc(100% - 9px) / 0 1.5px no-repeat; transition: background-size 500ms cubic-bezier(.65, 0, .35, 1); }
@media (hover: hover) { .top-story:hover { background-position: 0 calc(100% - 9px); background-size: 100% 1.5px; transition: background-size 600ms cubic-bezier(.33, 1, .68, 1); } }
.top .btn-sm { padding: 12px 23px; min-height: 44px; font-size: 15px; }
@media (max-width: 800px) { .top-row { height: 80px; } .top-story { display: none; } .top .wordmark { font-size: 21px; } .top .brand svg { width: 24px; height: 24px; } .top .btn-sm { padding: 11px 19px; font-size: 14px; } }

/* ---------- 2 Oct: Thoughtfully crafted, four hotspots ----------
   Linen dots with a slow pulse (staggered); hover or focus opens a card beside the dot, which rises on a spring.
   Phones: the open card sits under the picture. */
.spots { max-width: 900px; margin: 40px auto 0; }
.spots-stage { position: relative; }   /* only the picture, dots and cards: dot positions are fractions of the picture */
.spots-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 22px rgba(31, 44, 48, 0.18)); }
.spot { position: absolute; left: var(--x); top: var(--y); width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; z-index: 2; }
.spot::before { content: ''; width: 14px; height: 14px; border-radius: 50%; background: var(--linen); box-shadow: 0 0 0 1.5px rgba(48, 74, 80, 0.3), 0 2px 8px rgba(18, 26, 28, 0.35); transition: transform 600ms var(--spring), background-color 200ms ease; }
.spot::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 1.5px solid var(--linen); opacity: 0; animation: spot-pulse 3.6s cubic-bezier(.42, 0, .36, 1) infinite; }
.spot:nth-of-type(2)::after { animation-delay: .9s; } .spot:nth-of-type(3)::after { animation-delay: 1.8s; } .spot:nth-of-type(4)::after { animation-delay: 2.7s; }
@keyframes spot-pulse { 0% { transform: scale(1); opacity: .75; } 60%, 100% { transform: scale(2.8); opacity: 0; } }
.spot:hover::before, .spot[aria-expanded="true"]::before { transform: scale(1.35); background: var(--coral); }
.spot[aria-expanded="true"]::after { animation: none; }
.spot:focus-visible { outline: 2px solid var(--linen); outline-offset: 2px; border-radius: 50%; }
.spot-card { position: absolute; left: calc(var(--x) + 30px); top: var(--y); z-index: 3; width: min(290px, 40%); padding: 16px 18px 17px; border-radius: 14px; background: #f7f3ea; color: var(--mineral); box-shadow: 0 14px 34px rgba(31, 44, 48, 0.16), 0 0 0 1px rgba(48, 74, 80, 0.08); opacity: 0; visibility: hidden; transform: translateY(-50%) translateY(10px) scale(.97); transform-origin: left center; transition: opacity 200ms ease, transform 550ms var(--spring), visibility 0s 200ms; pointer-events: none; }
.spot-card[data-side="left"] { left: auto; right: calc(100% - var(--x) + 30px); transform-origin: right center; }
.spot-card.open { opacity: 1; visibility: visible; transform: translateY(-50%); transition: opacity 200ms ease, transform 550ms var(--spring), visibility 0s; pointer-events: auto; }
.spot-card h3 { font-size: 19px; letter-spacing: -0.02em; margin-bottom: 4px; }
.spot-card p { font-size: 15px; line-height: 1.45; color: var(--ink); }
@media (max-width: 760px) {
  .spots { margin-top: 24px; padding: 0 var(--gutter) 150px; }
  .spot-card, .spot-card[data-side="left"] { position: absolute; left: 0; right: 0; top: calc(100% + 18px); width: auto; transform: none; display: none; box-shadow: 0 0 0 1px rgba(48, 74, 80, 0.12); }
  .spot-card.open { display: block; transform: none; animation: card-in 450ms var(--spring); }
  @keyframes card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .spot::after { animation: none; } }

/* ---------- 2 Oct: The lower belly sigh ---------- */
.sigh-head { max-width: 760px; }
.sigh-head .m { margin-top: 18px; }
.sigh-diagram { margin-top: clamp(32px, 4vw, 56px); }
.sigh-steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); margin-top: clamp(36px, 5vw, 64px); padding-top: 22px; border-top: 1px solid var(--rule); }
.sigh-steps li { counter-increment: step; font-size: 17px; line-height: 1.45; color: var(--ink); }
.sigh-steps li::before { content: counter(step); display: block; font-size: 15px; color: var(--coral-ink); margin-bottom: 8px; }
.sigh-steps strong { display: block; font-size: 21px; font-weight: 500; letter-spacing: -0.02em; color: var(--mineral); margin-bottom: 4px; }
.sigh-proof { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: end; margin-top: clamp(48px, 6vw, 88px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--rule); }
.sigh-quote blockquote p { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.2; letter-spacing: -0.025em; color: var(--mineral); text-wrap: balance; }
.sigh-quote figcaption { margin-top: 14px; font-size: 14px; color: var(--muted); }
.sigh-quote a { color: inherit; text-underline-offset: 4px; text-decoration-color: var(--coral); }
@media (max-width: 960px) { .sigh-proof { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .sigh-steps { grid-template-columns: 1fr; } }

/* ---------- 2 Oct (Jonny: "poor spacing"): the buy box keeps one rhythm ----------
   price, 24 px, the action (email or Buy now), 20 px, the fit note. The status line takes no space until it has a message. */
.buy-box .price-row { margin-bottom: 24px; }
.buy-box .notify-status { margin-top: 10px; min-height: 0; }
.buy-box .notify-status:empty { display: none; }
.buy-box .fit-note { margin-top: 20px; }
.buy-box .notify, .buy-box .buy-row { margin: 0; }

/* Thoughtfully crafted: one line, centred over the object */
.made-head { justify-content: center; text-align: center; }
.made-head h2 { max-width: none; }
@media (min-width: 600px) { .made-head h2 { white-space: nowrap; } }
/* 30-day guarantee under the action; the fit note follows */
.buy-box .guarantee { margin-top: 16px; font-size: 14px; color: var(--mineral); }
.buy-box .guarantee + .fit-note { margin-top: 10px; }
/* Product details, folded into the buy box under a hairline: a quiet row that opens to five facts (same plus as the FAQ) */
.buy-details { margin-top: 22px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); scroll-margin-top: calc(var(--header) + 24px); }
.buy-details summary { padding: 14px 0; font-size: 14px; letter-spacing: 0; }
.buy-details summary .pm { width: 11px; height: 11px; }
.buy-spec { padding: 0 0 14px; }
.buy-spec div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 5px 0; align-items: baseline; }
.buy-spec dt { font-size: 13.5px; color: var(--muted); }
.buy-spec dd { font-size: 14px; line-height: 1.45; color: var(--mineral); }
.buy-spec .u { color: var(--muted); }
.buy-spec .line { display: block; }
/* The study as a chart beside the quote (stacked on narrow screens): the dose on top (a month of days), then the lift in
   mood as two columns, the sighing one half as high again. The motion is in site.js; without it the finished chart shows. */
.sigh-proof { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(28px, 5vw, 80px); }
@media (min-width: 961px) { .sigh-quote blockquote p { max-width: 22ch; } }
.study { background: var(--linen-2); border-radius: 18px; padding: clamp(22px, 3vw, 36px); box-shadow: 0 0 0 1px rgba(48, 74, 80, 0.08); }
.study-dose { display: flex; align-items: center; gap: 18px; padding-bottom: 22px; border-bottom: 1px solid var(--rule); }
.study-cal { display: grid; grid-template-columns: repeat(7, 10px); gap: 4px; flex: none; }
.study-cal i { width: 10px; height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--mineral) 45%, var(--linen-2)); }
.study-dose p { display: flex; flex-direction: column; gap: 4px; }
.study-dose strong { font-weight: 500; font-size: 17px; line-height: 1.3; color: var(--mineral); letter-spacing: -0.01em; text-wrap: balance; }
.study-dose span { font-size: 14px; line-height: 1.4; color: var(--muted); }
@media (max-width: 400px) { .study-dose { gap: 14px; } .study-cal { grid-template-columns: repeat(7, 8px); gap: 3px; } .study-cal i { width: 8px; height: 8px; border-radius: 2px; } }
.study-title { margin-top: 22px; font-size: 15px; font-weight: 500; color: var(--ink); }
.study-chart { --col-max: 78%; position: relative; height: clamp(190px, 18vw, 236px); margin-top: 6px; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
.study-col { position: relative; }
.study-fill { position: absolute; bottom: 0; left: 50%; width: min(100%, 128px); transform: translateX(-50%); height: calc(var(--v) * var(--p, 1) * var(--col-max)); border-radius: 14px 14px 3px 3px; background: color-mix(in srgb, var(--mineral) 20%, var(--linen-2)); }
.is-sigh .study-fill { background: var(--coral); }
.study-times { position: absolute; left: 50%; bottom: calc(var(--v) * var(--p, 1) * var(--col-max) + 10px); transform: translateX(-50%); font-size: clamp(36px, 3.4vw, 46px); line-height: 1; letter-spacing: -0.035em; color: var(--coral-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.study-ref { position: absolute; left: 0; right: 0; bottom: calc(0.646 * var(--col-max)); border-top: 1.5px dashed color-mix(in srgb, var(--mineral) 60%, transparent); pointer-events: none; }
.study-keys { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; margin-top: 14px; }
.study-keys p { text-align: center; font-size: 14px; line-height: 1.35; color: var(--ink); text-wrap: balance; }
.study-keys span { display: block; margin-top: 2px; color: var(--muted); font-variant-numeric: tabular-nums; }
.study-keys .is-sigh { color: var(--mineral); font-weight: 500; }
.study-keys .is-sigh span { color: var(--coral-ink); font-weight: 400; }
.study-note { margin-top: 18px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.study-note a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--coral); }
/* motion: site.js arms the card (.will-animate), starts it (.is-on), marks meditation's height as it lands (.ref-on), and shows the multiplier
   riding up on the sighing column once it passes that height (.times-on) */
.study.will-animate .study-cal i { background: color-mix(in srgb, var(--mineral) 10%, transparent); transition: background-color 220ms ease calc(var(--i) * 20ms); }
.study.will-animate.is-on .study-cal i { background: color-mix(in srgb, var(--mineral) 45%, var(--linen-2)); }
.study.will-animate .study-ref { clip-path: inset(0 100% 0 0); transition: clip-path 360ms cubic-bezier(.3, .7, .2, 1); }
.study.will-animate.ref-on .study-ref { clip-path: inset(0); }
.study.will-animate .study-times { opacity: 0; transition: opacity 220ms ease; }
.study.will-animate.times-on .study-times { opacity: 1; }
@media (max-width: 960px) { .sigh-proof { grid-template-columns: 1fr; } .study { max-width: 560px; } }


/* ---------- 5 Oct: footer email signup (signup.js), copy proposed ----------
   One quiet row above the logo and links: the line on the left, the waitlist field on the right, ending where the links
   end. The button is the outlined ghost, so coral stays with Buy now. Focus rings the whole field; an invalid address
   turns its edge coral-ink, matching the message. The honeypot is display:none so browser autofill never fills it. */
.foot-signup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-items: center; gap: 22px 40px; padding-bottom: 44px; margin-bottom: 44px; border-bottom: 1px solid var(--rule); }
.foot-signup h2 { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.15; letter-spacing: -0.025em; }
.foot-signup-copy p { margin-top: 6px; font-size: var(--t-s); color: var(--muted); }
.foot-form .waitlist-row:has(input:focus-visible) { border-color: var(--mineral); box-shadow: 0 0 0 1px var(--mineral); }
.foot-form .waitlist-row:has(input[aria-invalid="true"]) { border-color: var(--coral-ink); }
.foot-form .waitlist-row:has([aria-invalid="true"]:focus-visible) { box-shadow: 0 0 0 1px var(--coral-ink); }
.foot-form .btn { flex: none; }
.foot-form .btn:focus-visible { outline-offset: 2px; }
.foot-form .form-status { min-height: 0; }
.foot-form .form-status:not(:empty) { margin-top: 10px; }
.hp { display: none; }
@media (max-width: 860px) { .foot-signup { grid-template-columns: minmax(0, 1fr); padding-bottom: 36px; margin-bottom: 36px; } }
@media (max-width: 440px) { .foot-form .waitlist-row { flex-direction: row; border-radius: 999px; padding: 5px; } .foot-form input[type="email"] { padding: 0 14px; } .foot-form .btn { padding-inline: 20px; } }
@media (max-width: 360px) { .foot-form .waitlist-row { flex-direction: column; border-radius: 22px; padding: 6px; } .foot-form input[type="email"] { padding: 13px 12px; } }