/* clinewater.com · landing for batch 001. Desktop is drawn at 1440, the phone at 390; sizes in between scale with vw. */
:root {
  --ink: #15181B; --ink-2: #2A3036; --text: #434A51; --text-2: #5B636A; --mute: #6A727A; --mute-2: #8A9097;
  --line: rgba(21, 24, 27, .14); --line-2: rgba(21, 24, 27, .08);
  --paper: #F0F3F4; --card: rgba(255, 255, 255, .72); --sheet: #F7F8F9; --on-ink: #F3F5F6;
  --steel: linear-gradient(180deg, #E4E9EC 0%, #D2D9DE 55%, #BAC4CB 100%);
  --g: clamp(20px, 8.333vw, 120px);
  --wrap: min(1200px, calc(100% - 2 * var(--g)));
  --head: 'Roboto Flex', system-ui, sans-serif;
  --mono: 'Martian Mono', ui-monospace, monospace;
  --logo: 'Mona Sans', 'Roboto Flex', sans-serif;
  --body: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --wide: 'Archivo', 'Roboto Flex', sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth }
html.lock { overflow: hidden }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip }
img { display: block; max-width: 100% }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer }
h1, h2, h3, p, figure { margin: 0 }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px }
.wrap { width: var(--wrap); margin: 0 auto; position: relative }
.m-only, .m-br, .m-sep { display: none }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%) }

/* type */
.logo { font: 300 30px/1 var(--logo); font-stretch: 125%; letter-spacing: -.01em; text-decoration: none }
.logo.sm { font-size: 22px }
.sub { margin-top: 16px; font: 400 18px/1.55 var(--body); color: var(--text) }
h2.xl { font: 300 min(5vw, 80px)/1.05 var(--head); font-stretch: 130%; letter-spacing: -.014em }
.note { font: 300 11.5px/1.6 var(--mono); font-stretch: 112.5%; letter-spacing: .05em; text-transform: uppercase; color: #3A4046 }
.cap { font: 300 12px/1.4 var(--mono); font-stretch: 112.5%; letter-spacing: .07em; text-transform: uppercase; color: #3A4046 }
.cap b { font-weight: 400; color: var(--ink) }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; height: 60px; padding: 0 32px; border-radius: 999px;
  background: var(--ink); color: var(--on-ink); font: 500 17px/1 var(--body); white-space: nowrap; text-decoration: none;
  transition: transform .25s var(--ease), background-color .2s, opacity .2s }
.btn span { font-family: var(--mono); font-weight: 300; transition: transform .25s var(--ease) }
.btn[data-pay] { gap: .3em }
.btn span[data-total] { font-family: inherit; font-weight: inherit; transform: none !important }
.btn:hover { background: #000 } .btn:hover span { transform: translateX(3px) }
.btn:active { transform: scale(.98) }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .32; cursor: default } .btn:disabled:hover { background: var(--ink) }
.btn[aria-disabled="true"] { cursor: pointer }
.btn.wide { width: 100%; flex-shrink: 0 }
.btn.sm { height: 40px; padding: 0 18px; font-size: 14px }
.btn.busy { pointer-events: none; opacity: .6 }
.pill { font: 500 14px/1 var(--body); background: var(--ink); color: var(--on-ink); padding: 13px 22px; border-radius: 999px; transition: background-color .2s }
.pill:hover { background: #000 }
.cta { display: flex; align-items: center; gap: 22px }
.cta.center { justify-content: center }

/* dot fields: drawn by site.js into these boxes */
.dots { position: absolute; left: 0; right: 0; pointer-events: none }
.dots svg { display: block; position: absolute; inset: 0 }

/* reveal on scroll */
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease) }
.js .rv.seen { opacity: 1; transform: none }

/* ---------- 1 · hero --------------------------------------------------------------------------------------------- */
.hero { --H: clamp(640px, 100vh, 1200px); position: relative; height: var(--H); background: var(--steel); overflow: hidden; isolation: isolate }
@supports (height: 100svh) { .hero { --H: clamp(640px, 100svh, 1200px) } }
.tick { position: absolute; left: 0; right: 0; top: 0; height: 32px; border-bottom: 1px solid var(--line); overflow: hidden; display: flex; align-items: center; z-index: 4 }
.tick-run { display: flex; white-space: nowrap; animation: tick 60s linear infinite }
.tick-run span { font: 450 11px/1 var(--wide); font-stretch: 125%; letter-spacing: .16em; padding-left: 18px }
@keyframes tick { to { transform: translateX(-50%) } }
.nav { position: absolute; left: 0; right: 0; top: 32px; height: 78px; padding: 0 max(clamp(20px, 4.444vw, 64px), calc(50% - 860px)); display: flex; align-items: center; justify-content: space-between; z-index: 4 }
.stage { position: absolute; inset: 0 }
.stage .dots { top: 57.8%; height: 42.2% }
.giant { position: absolute; left: 0; right: 0; top: 10.7%; text-align: center; font: 300 min(25vw, calc(var(--H) * .4))/1 var(--logo); font-stretch: 125%; letter-spacing: -.025em; z-index: 1; user-select: none }
.can { position: absolute; left: 50%; bottom: 4.2%; height: 55.6%; aspect-ratio: 381 / 1000; transform: translateX(-50%); z-index: 2 }
.can img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain }
.can canvas { opacity: 0; transition: opacity .45s ease }
.can.live canvas { opacity: 1 }
.can.live .can-f { opacity: 0; transition: opacity .45s ease .1s }
.can-sh { position: absolute; left: -12%; right: -12%; bottom: -3.5%; height: 7%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(10, 14, 18, .32), rgba(10, 14, 18, 0)) }
/* on very wide screens the headline and the button stay within 1600 px around the can instead of drifting to the edges */
.hero-foot { position: absolute; left: max(var(--g), calc(50% - 800px)); right: max(var(--g), calc(50% - 800px)); bottom: 12.2%; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; z-index: 3 }
.hero h1 { font: 300 clamp(36px, 3.889vw, 64px)/1.05 var(--head); font-stretch: 130%; letter-spacing: -.012em }
.hero-foot .cta { margin-bottom: 4px }

/* ---------- 2 · thought ------------------------------------------------------------------------------------------ */
.s-thought { position: relative; padding: clamp(96px, 12.2vw, 176px) 0 clamp(150px, 17vw, 250px) }
.thesis + .thesis { margin-top: clamp(48px, 4.444vw, 64px) }
.thesis .num { display: block; font: 300 13px/1 var(--mono); font-stretch: 112.5%; letter-spacing: .08em; color: var(--mute); padding-bottom: 18px; border-bottom: 1px solid rgba(21, 24, 27, .22); margin-bottom: 30px }
.thesis .t { font: 300 min(4.444vw, 72px)/1.08 var(--head); font-stretch: 130%; letter-spacing: -.014em; white-space: nowrap }
.thesis .e { margin-top: 24px; max-width: 640px; font: 400 19px/1.55 var(--body); color: var(--text) }
.thesis.rv + .thesis.rv { transition-delay: .25s }
.band { bottom: 0; height: clamp(80px, 9vw, 130px) }

/* ---------- 3 · day ---------------------------------------------------------------------------------------------- */
.s-day { padding: clamp(80px, 7.6vw, 110px) 0 clamp(90px, 8vw, 120px) }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.15vw, 31px) }
.card .pic { aspect-ratio: 386 / 560; border-radius: 24px; overflow: hidden; box-shadow: 0 8px 30px rgba(20, 30, 40, .14); background: #CED6DB }
.card .pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; transition: transform 1.6s var(--ease) }
.js .card.rv .pic img { transform: scale(1.06) } .js .card.rv.seen .pic img { transform: none }
.card.rv:nth-child(2) { transition-delay: .12s } .card.rv:nth-child(3) { transition-delay: .24s }
.card .cap { margin-top: 18px }
.s-day .cta { margin-top: clamp(48px, 4.6vw, 66px) }

/* ---------- 4 · batch -------------------------------------------------------------------------------------------- */
.s-batch { padding: clamp(80px, 7.2vw, 104px) 0 clamp(90px, 8vw, 120px) }
.batch-head { display: flex; justify-content: space-between; align-items: flex-start }
.batch-head > div:first-child { padding-top: clamp(24px, 3.05vw, 44px) }
.can-turn { position: relative; height: clamp(170px, 16vw, 230px); aspect-ratio: 228 / 600; margin-right: clamp(10px, 3vw, 46px) }
.can-turn img { width: 100%; height: 100% }
.can-turn .can-sh { opacity: .8 }
.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.15vw, 31px); margin-top: clamp(30px, 3.2vw, 46px) }
.pk { --d: 9px; background: var(--card); border: 1px solid var(--line-2); border-radius: 24px; padding: clamp(22px, 2.08vw, 30px); display: flex; flex-direction: column }
.pk.rv:nth-child(2) { transition-delay: .1s } .pk.rv:nth-child(3) { transition-delay: .2s }
.pk .top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px }
.pn { font: 300 min(8.333vw, 132px)/.9 var(--head); font-stretch: 130%; letter-spacing: -.03em }
.pw { font: 400 18px/1.3 var(--body); color: var(--text); margin-top: 10px }
.dg { display: grid; grid-template-columns: repeat(var(--c), var(--d)); gap: 6px; margin-bottom: 8px }
.dg i { width: var(--d); height: var(--d); border-radius: 50%; background: var(--ink); opacity: .82 }
.pp { font: 300 34px/1.1 var(--head); font-stretch: 130%; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line) }
.pu { font: 300 11px/1.4 var(--mono); font-stretch: 112.5%; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); margin: 8px 0 26px }
.pk .btn { margin-top: auto }
.dl { margin-top: clamp(32px, 3vw, 44px); font: 400 15px/1.6 var(--body); color: var(--text-2) }

/* ---------- 5 · questions ---------------------------------------------------------------------------------------- */
.s-qa { padding: clamp(80px, 8.3vw, 120px) 0 clamp(110px, 10vw, 150px) }
.qa-grid { display: grid; grid-template-columns: 40% 60%; align-items: start }
.qa > div { padding: 22px 0; border-top: 1px solid var(--line) }
.qa > div:first-child { border-top: 0; padding-top: 8px }
.qa h3 { font: 500 20px/1.35 var(--body) }
.qa p { margin-top: 8px; font: 400 17px/1.5 var(--body); color: var(--text) }

/* ---------- 6 · end + footer ------------------------------------------------------------------------------------- */
.s-end { position: relative; background: var(--steel); overflow: hidden; isolation: isolate }
.s-end .band { top: clamp(400px, 38.9vw, 560px); bottom: auto; height: clamp(130px, 13.2vw, 190px) }
.end-in { padding-top: clamp(150px, 18.75vw, 270px); text-align: center }
.banner { font: 400 min(5.9vw, 96px)/1 var(--wide); font-stretch: 125%; letter-spacing: .02em; white-space: nowrap }
.s-end .cta { margin-top: clamp(48px, 4.6vw, 66px) }
.foot { margin-top: clamp(220px, 22vw, 320px); display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; padding: 22px 0 44px;
  border-top: 1px solid rgba(21, 24, 27, .16); font: 400 14px/1.5 var(--body); color: var(--text); text-align: left }
.foot a { text-decoration: none } .foot a:hover { text-decoration: underline }
.foot em { font-style: normal; color: var(--mute); flex-basis: 100% }

/* ---------- order ------------------------------------------------------------------------------------------------ */
.order { width: min(560px, calc(100% - 32px)); max-height: calc(100% - 48px); padding: 34px 40px 40px; border: 0; border-radius: 28px;
  background: var(--sheet); color: var(--ink); box-shadow: 0 30px 80px rgba(0, 0, 0, .25); overflow-y: auto; overscroll-behavior: contain }
.order[open] { animation: pop .35s var(--ease) }
.order::backdrop { background: rgba(21, 24, 27, .42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px) }
.order[open]::backdrop { animation: fade .3s ease }
.order.closing::backdrop { animation: fade-out .22s ease forwards }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.985) } }
@keyframes fade { from { opacity: 0 } }
@keyframes fade-out { to { opacity: 0 } }
.grab { display: none }
.o-step { display: flex; flex-direction: column }
.o-step[hidden] { display: none }
.mh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; min-height: 32px }
.back { text-align: left } .back:hover { color: var(--ink) }
.x { font: 300 30px/1 var(--body); color: var(--text-2); width: 40px; height: 40px; margin: -6px -10px -6px 0; border-radius: 50% }
.x:hover { color: var(--ink); background: rgba(21, 24, 27, .06) }
.order h3 { font: 300 40px/1.1 var(--head); font-stretch: 130%; letter-spacing: -.01em; margin-bottom: 8px }
.order h3.big { font-size: 48px }
.order h3:focus { outline: none }
.o-q { font: 400 15px/1.5 var(--body); color: var(--text-2) }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 26px }
.seg button { height: 64px; border-radius: 16px; border: 1px solid rgba(21, 24, 27, .16); font: 300 30px/1 var(--head); font-stretch: 130%; transition: background-color .15s, color .15s, border-color .15s }
.seg button:hover { border-color: rgba(21, 24, 27, .45) }
.seg button[aria-checked="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink) }
.sum { border-top: 1px solid var(--line); margin-bottom: 26px }
.sum div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(21, 24, 27, .1); font: 400 16px/1.4 var(--body); color: var(--text) }
.sum b { font: 400 22px/1.2 var(--head); font-stretch: 130%; color: var(--ink) }
.sum-note { margin: -14px 0 24px; font: 400 13px/1.45 var(--body); color: var(--mute) }
.fields { display: flex; flex-direction: column; gap: 10px; margin-top: 6px }
.in { display: block }
.in input { width: 100%; height: 56px; border-radius: 14px; background: #fff; border: 1px solid var(--line); padding: 0 18px; font: 400 16px var(--body); color: var(--ink); outline: none; transition: border-color .15s, box-shadow .15s }
.in input::placeholder { color: var(--mute-2); opacity: 1 }
.in input:focus { border-color: rgba(21, 24, 27, .55); box-shadow: 0 0 0 3px rgba(21, 24, 27, .08) }
.in .fe { display: none; margin: 6px 4px 0; font: 400 13px/1.4 var(--body); color: #A33A2B }
.in.bad input { border-color: #C05442 } .in.bad .fe { display: block }
.chips-f { border: 0; margin: 22px 0 0; padding: 0; min-width: 0 }
.chips-f legend { float: left; width: 100%; margin: 0 0 10px }
.chips-f .chips { clear: both }
.lbl { margin: 22px 0 10px; padding: 0; font: 400 15px/1.4 var(--body); color: var(--ink-2) }
.lbl i { font-style: normal; color: var(--mute-2); margin-left: 6px }
.chips { display: flex; flex-wrap: wrap; gap: 8px }
.chips label { position: relative }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer }
.chips span { display: inline-block; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(21, 24, 27, .16); font: 400 15px/1.2 var(--body); transition: background-color .15s, color .15s, border-color .15s }
.chips input:checked + span { background: var(--ink); color: var(--on-ink); border-color: var(--ink) }
.chips input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px }
.ok { position: relative; display: flex; gap: 12px; align-items: center; margin: 24px 0; font: 400 14px/1.4 var(--body); color: var(--text); cursor: pointer }
.ok input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0 }
.ok i { width: 22px; height: 22px; flex: none; border-radius: 6px; border: 1.5px solid rgba(21, 24, 27, .45); background: #fff; display: grid; place-items: center; transition: background-color .15s, border-color .15s }
.ok input:checked + i { background: var(--ink); border-color: var(--ink) }
.ok input:checked + i::after { content: ''; width: 11px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg) }
.ok input:focus-visible + i { outline: 2px solid var(--ink); outline-offset: 2px }
.ok.bad i { border-color: #C05442 }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.captcha:empty { display: none } .captcha { margin-bottom: 12px }
.send-err { margin-top: 12px; font: 400 14px/1.45 var(--body); color: #A33A2B; text-align: center }
.txt { margin-top: 14px; font: 400 17px/1.55 var(--body); color: var(--ink-2) }
.share { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line) }
.share .lbl { margin-top: 0 }
.link { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 8px 8px 8px 18px; font: 400 15px/1.3 'Geist Mono', ui-monospace, monospace; color: var(--ink-2) }
.link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

/* cookie notice */
.cookie { position: fixed; left: 24px; bottom: 24px; z-index: 20; max-width: 400px; display: flex; gap: 16px; align-items: center;
  padding: 14px 14px 14px 20px; border-radius: 18px; background: rgba(247, 248, 249, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .14); font: 400 13px/1.45 var(--body); color: var(--text) }
.cookie[hidden] { display: none }
.nojs { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; padding: 14px 20px; background: var(--ink); color: var(--on-ink); font-size: 14px; text-align: center; z-index: 30 }

/* ---------- documents (privacy, consent, about the water, 404) --------------------------------------------------- */
/* A quiet page: no hero band and no order button. Header, text and footer share one 760 px column. */
.doc-top, .doc, .doc-foot { width: min(760px, calc(100% - 40px)); margin: 0 auto }
.doc-top { height: 88px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-2) }
.doc-top .logo { font-size: 26px }
.doc-home { font: 300 11px/1 var(--mono); font-stretch: 112.5%; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); text-decoration: none; padding: 12px 0 }
.doc-home::before { content: '← ' }
.doc-home:hover { color: var(--ink) }
.doc { padding: 56px 0 96px }
.doc h1 { font: 300 clamp(36px, 4.4vw, 56px)/1.08 var(--head); font-stretch: 130%; letter-spacing: -.012em; margin-bottom: 14px }
.doc .meta { font: 300 12px/1.6 var(--mono); font-stretch: 112.5%; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); margin-bottom: 40px }
.doc h2 { font: 500 20px/1.35 var(--body); margin: 40px 0 10px }
.doc p, .doc li { font: 400 16px/1.65 var(--body); color: var(--ink-2) }
.doc p + p { margin-top: 12px }
.doc ul { padding-left: 20px; margin: 10px 0 } .doc li + li { margin-top: 6px }
.doc .todo { background: #FFF4D6; border-radius: 3px; padding: 0 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone }
.doc-foot { display: flex; flex-wrap: wrap; gap: 10px 24px; border-top: 1px solid var(--line-2); padding: 22px 0 44px; font: 400 14px/1.5 var(--body); color: var(--text) }
.doc-foot a { text-decoration: none } .doc-foot a:hover { color: var(--ink); text-decoration: underline }
.doc-foot span { flex-basis: 100%; color: var(--mute) }

/* ---------- tablet: desktop layout, tighter ---------------------------------------------------------------------- */
@media (max-width: 1100px) and (min-width: 761px) {
  .pk .top { flex-direction: column; align-items: flex-start; margin-bottom: 28px }
  .dg { margin: 16px 0 0 }
  .pp { margin-top: auto }                       /* grids differ in height: prices and buttons still line up */
  .pk .btn { margin-top: 0 }
  .hero-foot .cta { flex-direction: column; align-items: flex-end; gap: 10px; text-align: right }
  .qa-grid { grid-template-columns: 34% 66% }
}

/* narrow tablets: the can needs the full width, so the headline and the button go under it */
@media (max-width: 900px) and (min-width: 761px) {
  .hero { height: auto; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding-bottom: 56px }
  .tick { position: relative; flex: none }
  .nav { position: relative; top: 0; flex: none }
  .stage { position: relative; inset: auto; flex: 1; min-height: 520px }
  .stage .dots { top: auto; bottom: -8px; height: 50% }
  .giant { top: 0; font-size: 25vw }
  .can { bottom: 16px; height: min(calc(100% - 22vw), 560px) }
  .hero-foot { position: relative; left: auto; right: auto; bottom: auto; padding: 28px var(--g) 0; flex-direction: column; align-items: center; text-align: center; gap: 28px }
  .hero-foot .cta { flex-direction: row; align-items: center; text-align: left; margin: 0 }
}

/* ---------- phone ------------------------------------------------------------------------------------------------ */
@media (max-width: 760px) {
  body { font-size: 16px }
  .d-only, .d-br { display: none }
  .m-only { display: flex } .m-br { display: inline } .m-sep { display: inline }
  .sub { font-size: 15px; margin-top: 10px }
  .note { font-size: 9.5px }
  .cap { font-size: 11px }
  h2.xl { font-size: clamp(38px, 11.8vw, 52px) }
  .cta.center { flex-direction: column; gap: 10px }
  .cta.center .btn { width: 100%; height: 54px }

  .hero { height: auto; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding-bottom: calc(118px + env(safe-area-inset-bottom)) }
  .tick { position: relative; height: 26px; flex: none }
  .tick-run span { font-size: 9px; padding-left: 12px }
  .nav { position: relative; top: 0; height: 56px; padding: 0 20px; flex: none }
  .nav .pill { display: none }
  .logo { font-size: 24px }
  /* The letters of the giant word sit between .36 and .89 of its size. The can may cover only the lower quarter of
     them, as on desktop, so its height is what is left of the stage below that line. On short screens (Safari with
     its bars, iPhone SE) the word shrinks with the height too, and the headline still fits on the first screen. */
  .stage { position: relative; inset: auto; flex: 1; min-height: 230px }
  .stage .dots { top: auto; bottom: -8px; height: min(200px, 56%) }
  .giant { top: -12px; font-size: min(38.5vw, 21vh); font-size: min(38.5vw, 21svh) }
  .can { bottom: 12px; height: min(calc(100% - min(29vw, 15.8vh)), 320px); height: min(calc(100% - min(29vw, 15.8svh)), 320px) }
  .hero-foot { position: relative; left: auto; right: auto; bottom: auto; padding: 18px 20px 0; justify-content: center; text-align: center }
  .hero h1 { font-size: clamp(32px, 9.2vw, 40px) }

  .s-thought { padding: 60px 0 150px }
  .thesis + .thesis { margin-top: 50px }
  .thesis .num { font-size: 11px; padding-bottom: 12px; margin-bottom: 18px }
  .thesis .t { font-size: clamp(32px, 9.75vw, 42px); white-space: normal }
  .thesis .e { font-size: 15px; margin-top: 16px }
  .band { height: 100px }

  .s-day { padding: 60px 0 56px }
  .s-day .wrap { width: 100% }
  /* the row only scrolls sideways; the extra bottom padding keeps the card shadows from being cut, the margins give it back */
  .cards { display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    padding: 4px 20px 34px; margin: -4px 0 -26px; scroll-padding: 0 20px; scrollbar-width: none }
  .js .card.rv { transform: none }
  .cards::-webkit-scrollbar { display: none }
  .card { flex: none; width: min(290px, 74vw); scroll-snap-align: start }
  .card .pic { border-radius: 22px }
  .card .cap { margin-top: 14px }
  .dots-nav { gap: 6px; justify-content: center; margin-top: 22px }
  .dots-nav i { width: 6px; height: 6px; border-radius: 3px; background: rgba(21, 24, 27, .25); transition: width .25s var(--ease), background-color .25s }
  .dots-nav i.on { width: 18px; background: var(--ink) }
  .s-day .cta { margin: 26px 20px 0 }

  .s-batch { padding: 56px 0 70px }
  .batch-head > div:first-child { padding-top: 0 }
  .packs { grid-template-columns: 1fr; gap: 16px; margin-top: 34px }
  .pk { --d: 7px; padding: 22px }
  .pn { font-size: 68px }
  .pw { font-size: 16px }
  .dg { gap: 5px; margin-bottom: 6px }
  .pp { margin-top: 18px; padding-top: 14px; font-size: 28px }
  .pu { margin-bottom: 16px }
  .pk .btn { height: 54px }
  .dl { margin-top: 22px; font-size: 13.5px }
  .dl br { display: none }

  .s-qa { padding: 56px 0 80px }
  .qa-grid { grid-template-columns: 1fr }
  .qa { margin-top: 30px }
  .qa > div { padding: 18px 0 } .qa > div:first-child { padding-top: 0 }
  .qa h3 { font-size: 17px } .qa p { font-size: 15px }

  .s-end .band { top: 330px; height: 130px }
  .end-in { padding-top: 120px }
  .banner { font-size: clamp(30px, 9.75vw, 44px); line-height: 1.12 }
  .s-end .cta { margin-top: 34px }
  .foot { margin-top: 170px; gap: 8px 18px; font-size: 13px; padding-bottom: calc(132px + env(safe-area-inset-bottom)) }

  .sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; flex-direction: column; align-items: center; gap: 9px;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); background: rgba(242, 244, 245, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line-2); transition: transform .35s var(--ease) }
  .sticky .btn { width: 100%; height: 54px }
  .sticky.off, .sticky.away { transform: translateY(110%) }

  .order { width: 100%; max-width: 100%; height: calc(100% - 56px); max-height: none; margin: auto 0 0; border-radius: 26px 26px 0 0;
    padding: 26px 20px calc(34px + env(safe-area-inset-bottom)) }
  /* The sheet rises like an iOS sheet: a critically damped spring, starting from rest and settling softly, never
     overshooting. No blur behind it: blur makes the motion stutter on phones. */
  .order[open] { animation: sheet-in .57s cubic-bezier(.36, .3, .1, 1) }
  @supports (animation-timing-function: linear(0, 1)) {
    .order[open] { animation-timing-function: linear(0, 0.002 0.7%, 0.015 2.2%, 0.048 4.1%, 0.107 6.5%, 0.188 9.3%, 0.286 12.5%, 0.392 16.0%, 0.500 19.8%, 0.601 23.9%, 0.691 28.3%, 0.767 33.0%, 0.830 37.9%, 0.879 43.1%, 0.916 48.5%, 0.943 54.2%, 0.962 60.1%, 0.976 66.2%, 0.985 72.5%, 0.990 79.1%, 0.994 85.9%, 0.997 92.8%, 1) }
  }
  @keyframes sheet-in { from { transform: translateY(100%) } }
  .order::backdrop { background: rgba(21, 24, 27, .45); backdrop-filter: none; -webkit-backdrop-filter: none }
  .order[open]::backdrop { animation: fade .45s ease }
  .order.closing::backdrop { animation: fade-out .3s ease forwards }
  .grab { display: block; position: absolute; top: 8px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: rgba(21, 24, 27, .16) }
  .order .mh, .grab { touch-action: none }
  .order.dragging { user-select: none; -webkit-user-select: none }
  .order h3 { font-size: 32px } .order h3.big { font-size: 38px }
  .chips { gap: 6px } .chips span { padding: 9px 12px; font-size: 14px }
  .txt { font-size: 15px }
  .link { font-size: 13px }
  .share { margin-top: auto }
  .o-step[data-step="3"] { min-height: 100% }

  .cookie { left: 12px; right: 12px; bottom: calc(126px + env(safe-area-inset-bottom)); max-width: none; font-size: 12.5px }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .tick-run { animation: none }
  .js .rv, .js .card.rv .pic img { opacity: 1; transform: none; transition: none }
  .order[open], .order[open]::backdrop, .order.closing::backdrop { animation: none }
}