/* caffein8.app: the app's steel-on-charcoal look. Colours are the app's Theme.swift. */

:root {
  color-scheme: dark;

  --bg: #1C1917;
  --surface: #292524;
  --surface-raised: #322F2D;
  --tile: linear-gradient(180deg, #221E1C, #1B1816);
  --hairline: rgba(250, 250, 249, 0.08);

  --text: #FAFAF9;
  --text-2: #A8A29E;
  --text-3: #8D867F;

  --steel: linear-gradient(135deg, #9CA3AF, #D1D5DB 50%, #9CA3AF);
  --steel-text: linear-gradient(135deg, #B9BFC8 0%, #F3F4F6 42%, #A3A9B2 100%);

  /* ComboColor.hsb(energy: 1.5), the first run's green; and energy 0, the Gentle blue. */
  --green: 74, 236, 71;
  --blue: 65, 144, 217;
  --lit: linear-gradient(95deg, #4AEC47 0%, #4FD9A0 55%, #4190D9 100%);
  /* The Shelf's warm light over the counter. */
  --lamp: 201, 139, 74;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --page: 1160px;
  --gutter: clamp(20px, 5vw, 40px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text-2);
  font: 400 17px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
figure { margin: 0; }

a { color: var(--text); text-decoration-color: rgba(250, 250, 249, 0.35); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--text); }

:focus-visible {
  outline: 2px solid #D1D5DB;
  outline-offset: 3px;
  border-radius: 6px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 20;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text);
  font-size: 15px;
  text-decoration: none;
}
.skip:focus { top: 12px; }

/* A soft morning light at the top of every page that rises and falls like a slow breath.
   The box clips it, so the glow never widens the page on a phone. */
.aura {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  height: 640px;
  overflow: hidden;
  pointer-events: none;
}

.aura::before {
  content: "";
  position: absolute;
  top: -420px;
  left: 50%;
  width: 1200px;
  height: 840px;
  margin-left: -600px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--blue), 0.2), rgba(var(--blue), 0.06) 55%, transparent);
  animation: breathe 10s ease-in-out infinite;
}

/* In for four, out for six. */
@keyframes breathe {
  0%, 100% { opacity: 0.6; transform: scale(0.94); }
  40%      { opacity: 1;   transform: scale(1.04); }
}

.wrap {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.wrap.narrow { max-width: 820px; }
.center { text-align: center; }

/* ─── Header ─── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.site-header.scrolled {
  background: rgba(28, 25, 23, 0.72);
  border-bottom-color: var(--hairline);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
}

/* The Caffein8 wordmark, in chrome: the logo's shape filled with the steel gradient. */
.wordmark {
  display: block;
  width: 118px;
  aspect-ratio: 960 / 178;
  background: var(--steel-text);
  -webkit-mask: url("/img/wordmark.png") center / contain no-repeat;
  mask: url("/img/wordmark.png") center / contain no-repeat;
}

.site-nav {
  display: flex;
  gap: 22px;
  font-size: 15px;
}

.site-nav a { display: inline-block; padding: 12px 0; color: var(--text-2); text-decoration: none; }
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--text); }

/* Glows and tilted phones may reach past the edges; they never widen the page. */
main { flex: 1; position: relative; overflow-x: clip; }

/* ─── Type ─── */

h1, h2, h3 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 600;
}

.chrome {
  background: var(--steel-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Lit in the session colour, the way the app lights what you breathed. */
.lit {
  background: var(--lit);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 28px rgba(var(--green), 0.28));
}

/* The warm half of a heading: Apple's New York serif in italic (Georgia elsewhere). */
.serif {
  font-family: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.025em;
}

.hero h1 .serif { font-weight: 500; letter-spacing: -0.035em; }

.eyebrow {
  margin: 0 0 16px;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dim { color: var(--text-3); }

.sub {
  max-width: 32em;
  margin: 18px auto 0;
  font-size: clamp(17px, 1.7vw, 19px);
  text-wrap: pretty;
}

/* ─── Buttons ─── */

.button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 24px;
  background: var(--steel);
  color: var(--bg);
  font: 600 16px var(--font);
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 8px 22px -10px rgba(0, 0, 0, 0.8);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.button:hover { filter: brightness(1.07); }
.button:active { transform: scale(0.97); }

/* Until the app is out: the app's icon in a steel-edged capsule. Deliberately not a look-alike
   of Apple's App Store badge, which may only be used as Apple supplies it. */
.soon {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 36px 0 0;
  padding: 6px 22px 6px 6px;
  border: 1px solid rgba(209, 213, 219, 0.28);
  border-radius: 999px;
  background: rgba(41, 37, 36, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 40px -24px rgba(0, 0, 0, 0.9);
  color: var(--text);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
}

.soon img { width: 36px; height: 36px; border-radius: 10px; }

@media (max-width: 360px) {
  .soon { gap: 10px; padding-right: 16px; font-size: 15px; white-space: nowrap; }
  .soon img { width: 32px; height: 32px; border-radius: 9px; }
}

/* ─── Hero ─── */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(28px, 7vh, 80px);
  text-align: center;
}

.hero h1 {
  max-width: 15ch;
  font-size: clamp(44px, 8.2vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.hero h1 span { display: block; padding-bottom: 0.06em; }

.lede {
  margin: 22px 0 0;
  color: var(--text-2);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.45;
  text-wrap: balance;
}

/* Three real screens: the session in front, Home and Complete behind. The stage fades out
   at the bottom, so the phones rise out of the page. */
.stage {
  position: relative;
  width: 100%;
  height: clamp(460px, 62vw, 640px);
  margin-top: clamp(48px, 8vh, 80px);
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent);
  mask-image: linear-gradient(180deg, #000 72%, transparent);
}

.halo {
  position: absolute;
  left: 50%;
  top: 6%;
  width: 640px;
  height: 640px;
  margin-left: -320px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--green), 0.26), rgba(var(--green), 0.07) 55%, transparent);
  animation: breathe 10s ease-in-out infinite;
}

.phone {
  --w: 300px;
  position: relative;
  width: var(--w);
  padding: calc(var(--w) * 0.032);
  border-radius: calc(var(--w) * 0.17);
  background: linear-gradient(150deg, #5A616C, #23262B 22%, #141517 55%, #3A3F46 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 50px 90px -40px rgba(0, 0, 0, 0.95);
}

.phone img {
  width: 100%;
  height: auto;
  border-radius: calc(var(--w) * 0.14);
}

.stage .phone { position: absolute; top: 0; left: 50%; }
.stage .main { --w: 300px; z-index: 2; margin-left: calc(var(--w) / -2); }

.stage .side {
  --w: 250px;
  z-index: 1;
  top: 64px;
  filter: brightness(0.62) saturate(0.9);
}

.stage .left  { margin-left: calc(-125px - 230px); transform: rotate(-6deg); }
.stage .right { margin-left: calc(-125px + 230px); transform: rotate(6deg); }

/* Small promises floating by the phone. */
.chip {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px 9px 12px;
  border: 1px solid rgba(250, 250, 249, 0.12);
  border-radius: 999px;
  background: rgba(34, 30, 28, 0.78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.9);
  animation: float 6s ease-in-out infinite;
}

.chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgb(var(--green));
  box-shadow: 0 0 10px rgba(var(--green), 0.8);
}

/* Each straddles the front phone's edge, over the dimmed phones behind, never over a screen's
   main content. */
.chip.c1 { top: 150px; right: calc(50% + 104px); }
.chip.c2 { top: 300px; left: calc(50% + 110px); animation-delay: -2s; }
.chip.c3 { top: 440px; right: calc(50% + 118px); animation-delay: -4s; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ─── Sections ─── */

.section {
  position: relative;
  padding: clamp(72px, 12vh, 128px) 0;
}

.section h2 {
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.section h2.center { margin: 0 auto; max-width: 18ch; }

.card {
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: 28px;
  background: var(--tile);
  box-shadow: inset 0 1px 0 rgba(250, 250, 249, 0.04), 0 30px 80px -50px rgba(0, 0, 0, 0.9);
}

/* ─── Coffee borrows your energy ─── */

.problem { padding-top: clamp(40px, 8vh, 88px); }

.chart {
  margin: 48px auto 0;
  padding: clamp(32px, 6vw, 56px) clamp(16px, 4vw, 48px) 32px;
  background:
    radial-gradient(80% 70% at 50% 40%, rgba(var(--lamp), 0.12), transparent 70%),
    var(--tile);
}

.chart img { width: min(100%, 620px); height: auto; margin: 0 auto; }

/* The chart's key: amber for a day on coffee, the session green for a morning of breath. */
.legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin-top: 24px;
  color: var(--text-3);
  font-size: 14px;
}

.legend span { display: inline-flex; align-items: center; gap: 8px; }

.key { width: 10px; height: 10px; border-radius: 2px; }
.key.coffee { background: #E8A04A; }
.key.breath { background: rgb(var(--green)); box-shadow: 0 0 8px rgba(var(--green), 0.6); }

/* ─── Three steps ─── */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin: 64px 0 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.steps li {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* A close look at each step, cut from the real screen. */
.lens {
  width: 100%;
  max-width: 320px;
  margin-bottom: 32px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 28px;
  background: #151311;
  box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.95);
}

.lens img { width: 100%; height: auto; }

.num {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 14px;
  border: 1px solid rgba(var(--green), 0.45);
  border-radius: 50%;
  color: rgb(var(--green));
  font: 600 14px var(--mono);
  box-shadow: 0 0 16px -4px rgba(var(--green), 0.6);
}

.steps h3 { font-size: 21px; letter-spacing: -0.015em; }
.steps p { max-width: 17em; margin: 8px 0 0; font-size: 16px; }

/* ─── A reason to come back ─── */

.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 64px;
}

.tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  min-height: 300px;
  padding: 28px;
  border: 1px solid var(--hairline);
  border-radius: 28px;
  background: var(--tile);
  overflow: hidden;
}

.tile {
  position: relative;
  transition: border-color 0.3s ease, transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.tile:hover {
  border-color: rgba(250, 250, 249, 0.16);
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.9);
}

.tile h3 { font-size: 19px; letter-spacing: -0.01em; }
.tile p { margin: 6px 0 0; font-size: 15px; line-height: 1.5; }
.tile > .art { align-self: center; margin-top: auto; margin-bottom: auto; }

/* The whole tile is the button that opens its sheet; the round + is its visible handle. */
.open {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}

.open:focus-visible { outline-offset: -4px; border-radius: 28px; }

.plus, .close {
  position: absolute;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(250, 250, 249, 0.14);
  border-radius: 50%;
  background: rgba(250, 250, 249, 0.06);
  transition: background-color 0.2s ease, transform 0.4s var(--ease);
}

.plus { top: 18px; right: 18px; }

.plus::before, .plus::after, .close::before, .close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.5px;
  margin: -0.75px 0 0 -6px;
  border-radius: 1px;
  background: var(--text);
}

.plus::after { transform: rotate(90deg); }
.tile:hover .plus { background: rgba(250, 250, 249, 0.12); transform: rotate(90deg); }

.wide { grid-column: span 2; }

.cosy {
  background:
    radial-gradient(70% 70% at 50% 35%, rgba(var(--lamp), 0.16), transparent 70%),
    var(--tile);
}

.cosy .art, .sheet.cosy .art { display: flex; justify-content: center; width: 100%; }
.cosy .art img { width: min(100%, 420px); height: auto; }
.plant .art img { height: 168px; width: auto; }

.roster {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.roster img { width: 58px; height: auto; }

/* Three rings breathing out from the centre: the haptic rhythm, drawn. */
.rings {
  position: relative;
  width: 120px;
  height: 120px;
}

.rings i {
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(var(--green), 0.7);
  border-radius: 50%;
  opacity: 0;
  animation: ripple 3s ease-out infinite;
}

.rings i:nth-child(2) { animation-delay: 1s; }
.rings i:nth-child(3) { animation-delay: 2s; }

.rings::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: rgb(var(--green));
  box-shadow: 0 0 18px rgba(var(--green), 0.9);
}

@keyframes ripple {
  0%   { transform: scale(0.2); opacity: 0.9; }
  100% { transform: scale(1);   opacity: 0; }
}

.badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: min(100%, 250px);
  margin: 0;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(250, 250, 249, 0.05);
  border: 1px solid var(--hairline);
  font-size: 14px;
}

.badge span { color: var(--text-2); }
.badge strong { color: rgb(var(--green)); font-weight: 600; }

/* ─── Science ─── */

.science h2 { max-width: 18ch; margin: 0 auto; }

.science .big {
  display: block;
  font-size: clamp(64px, 12vw, 128px);
  line-height: 1;
  letter-spacing: -0.05em;
  padding-bottom: 0.08em;
}

/* ─── Questions ─── */

.questions .faq { margin-top: 48px; }
.questions .faq summary { padding: 22px 0; font-size: 18px; }
.questions .faq details > div { padding-bottom: 24px; }
.questions .faq p { margin: 0; max-width: 36em; }

/* ─── Join ─── */

.cta {
  padding: clamp(48px, 8vw, 80px) clamp(20px, 5vw, 64px);
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(var(--green), 0.14), transparent 70%),
    var(--tile);
}

.cta h2 { max-width: 14ch; margin: 0 auto; }
.cta .soon { margin-top: 32px; }

/* ─── The sheets each tile opens into ─── */

html.sheet-open, body:has(dialog[open]) { overflow: hidden; }

dialog.more {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: clamp(0px, 4vw, 48px);
  border: 0;
  background: transparent;
  color: var(--text-2);
}

dialog.more::backdrop {
  background: rgba(12, 11, 10, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

dialog.more[open] { display: grid; place-items: safe center; }

.sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 880px;
  height: 100%;
  max-height: 100%;
  padding: 20px clamp(24px, 6vw, 72px) 56px;
  border: 1px solid var(--hairline);
  border-radius: 0;
  background:
    radial-gradient(70% 55% at 50% 30%, rgba(var(--green), 0.1), transparent 70%),
    var(--tile);
  text-align: center;
  overflow-y: auto;
}

.sheet.cosy {
  background:
    radial-gradient(70% 55% at 50% 30%, rgba(var(--lamp), 0.18), transparent 70%),
    var(--tile);
}

.sheet > .art { margin: auto 0 40px; padding-top: 28px; }
.sheet h3 { font-size: clamp(30px, 4.4vw, 44px); line-height: 1.08; letter-spacing: -0.03em; }
.sheet > p { max-width: 30em; margin: 16px 0 0; font-size: 18px; }
.sheet > p.small { margin-bottom: auto; font-size: 15px; color: var(--text-2); }
.sheet > :last-child { margin-bottom: auto; }

/* Sticky, so it stays at the top of a sheet that scrolls; the negative margin keeps it from
   pushing the content down. */
.close {
  position: sticky;
  top: 16px;
  z-index: 2;
  flex: 0 0 auto;
  align-self: flex-end;
  width: 44px;
  height: 44px;
  margin: 0 calc(clamp(24px, 6vw, 72px) * -1 + 16px) -44px 0;
  background: rgba(34, 30, 28, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.close::before { transform: rotate(45deg); }
.close::after { transform: rotate(-45deg); }
.close:hover { background: rgba(250, 250, 249, 0.12); }

.sheet.cosy .art img { width: min(100%, 640px); height: auto; }

.beats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.beats li {
  padding: 7px 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(250, 250, 249, 0.04);
  color: var(--text);
  font-size: 14px;
}

.growth, .crop, .meet {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 4vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.growth { align-items: flex-end; }
.growth li, .crop li, .meet li { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.growth img { height: clamp(150px, 24vw, 230px); width: auto; }
.growth span, .crop span { color: var(--text-2); font: 600 12px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }

.crop { gap: clamp(14px, 3vw, 28px); margin-top: 28px; }
.crop img { width: 40px; height: auto; }

.meet { flex-wrap: wrap; gap: 32px clamp(20px, 5vw, 48px); }
.meet img { width: clamp(84px, 12vw, 120px); height: auto; margin-bottom: 4px; }
.meet .name { color: var(--text); font-weight: 600; font-size: 17px; }
.meet .kind { margin-top: -8px; color: var(--text-2); font-size: 15px; }

.rings.big { width: 220px; height: 220px; }
.rings.big::after { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
.badge.big { width: min(100%, 340px); padding: 20px 24px; font-size: 17px; border-radius: 20px; }

/* The tile's art grows into the sheet's, where the browser can (view transitions). */
::view-transition-group(zoom) { animation-duration: 0.5s; animation-timing-function: var(--ease); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; }

@media (min-width: 761px) {
  .sheet { height: auto; border-radius: 32px; box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.9); }
}

@media (max-width: 760px) {
  dialog.more { padding: 0; }
  .sheet { border: 0; }
}

/* ─── Footer ─── */

.site-footer {
  border-top: 1px solid var(--hairline);
  color: var(--text-3);
  font-size: 14px;
  line-height: 1.6;
}

.site-footer .wrap { padding-top: 32px; padding-bottom: 40px; }
.site-footer p { margin: 0; }
.site-footer .note { max-width: 46em; margin-bottom: 20px; }

.site-footer .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
}

.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-footer a { color: var(--text-2); text-decoration: none; }
.site-footer a:hover { color: var(--text); }

/* ─── Prose pages: privacy, support ─── */

.prose {
  max-width: 700px;
  padding-top: clamp(24px, 6vh, 64px);
  padding-bottom: clamp(56px, 10vh, 104px);
}

.prose h1 {
  font-size: clamp(36px, 6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.prose .meta { margin: 12px 0 0; color: var(--text-3); font-size: 15px; }

.prose .summary {
  margin: 36px 0 0;
  padding: 22px 24px;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: rgba(41, 37, 36, 0.5);
  color: var(--text);
}

.prose .summary p { margin: 0; }
.prose .summary p + p { margin-top: 10px; color: var(--text-2); }

.prose h2 {
  margin: 48px 0 0;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  scroll-margin-top: 84px;
}

.prose h3 { margin: 28px 0 0; font-size: 17px; }
.prose p, .prose ul { margin: 12px 0 0; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: 6px; }
.prose li::marker { color: var(--text-3); }
.prose strong { color: var(--text); font-weight: 600; }

.contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
  margin: 32px 0 0;
}

.contact .address { color: var(--text); font-size: 18px; font-weight: 500; }

.faq { margin-top: 20px; text-align: left; }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq details:first-of-type { border-top: 1px solid var(--hairline); }

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  color: var(--text);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 1.5px solid var(--text-3);
  border-bottom: 1.5px solid var(--text-3);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.2s ease;
}

.faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -1px); }
.faq details > div { padding: 0 0 20px; }
.faq details > div p:first-child { margin-top: 0; }

/* ─── Small pages: thanks, 404 ─── */

.moment {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(32px, 10vh, 120px);
  padding-bottom: clamp(56px, 12vh, 140px);
  text-align: center;
}

.moment img { width: min(100%, 360px); height: auto; margin-bottom: 40px; }
.moment h1 { font-size: clamp(32px, 5vw, 48px); letter-spacing: -0.03em; line-height: 1.08; }
.moment p { max-width: 26em; margin: 14px 0 0; }
.moment .button { margin-top: 32px; }

/* ─── Motion: sections fade up as they arrive; the chart builds left to right, a column
   at a time, as it does in the app's first run. Only when JS adds .motion. ─── */

.motion .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.motion .reveal.in { opacity: 1; transform: none; }

.motion .steps li:nth-child(2), .motion .bento .tile:nth-child(2) { transition-delay: 0.08s; }
.motion .steps li:nth-child(3), .motion .bento .tile:nth-child(3) { transition-delay: 0.16s; }
.motion .bento .tile:nth-child(4) { transition-delay: 0.08s; }
.motion .bento .tile:nth-child(5) { transition-delay: 0.16s; }

.motion .chart .build { clip-path: inset(0 100% 0 0); }
.motion .chart.in .build { clip-path: inset(0 0 0 0); transition: clip-path 2.2s steps(54) 0.3s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aura::before, .halo, .chip, .rings i { animation: none; }
  .rings i:nth-child(1) { opacity: 0.6; transform: scale(0.55); }
  .rings i:nth-child(2) { opacity: 0.35; transform: scale(0.8); }
}

/* ─── Phones and small screens ─── */

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

@media (max-width: 760px) {
  .stage { height: 520px; }
  .stage .main { --w: 252px; }
  .stage .side { --w: 200px; top: 70px; }
  .stage .left  { margin-left: calc(-100px - 150px); }
  .stage .right { margin-left: calc(-100px + 150px); }
  .halo { width: 460px; height: 460px; margin-left: -230px; }

  .chip { font-size: 14px; padding: 7px 12px 7px 10px; }
  .chip.c1 { top: 70px;  right: auto; left: 0; }
  .chip.c2 { top: 210px; left: auto; right: 0; }
  .chip.c3 { top: 350px; right: auto; left: 4px; }

  /* The steps become a row to swipe, like the app's own pages. */
  .steps {
    display: flex;
    gap: 16px;
    margin: 48px calc(var(--gutter) * -1) 0;
    padding: 0 var(--gutter) 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .steps::-webkit-scrollbar { display: none; }
  .steps li { flex: 0 0 76%; scroll-snap-align: center; }

  .bento { grid-template-columns: minmax(0, 1fr); }
  .wide { grid-column: auto; }
  .tile { min-height: 0; }
  .tile > .art { margin-top: 32px; }
}

@media (max-width: 420px) {
  .stage .side { display: none; }
}