/* One motif: the agent's pot, a vessel with a liquid line. Colours and type come from the app's own theme (ui/kit Theme.kt).
   Layout: one dark ground, one left edge, and the pot at many sizes, from the first screen's stage to a bullet. */
:root {
  --ground: #0B0D11;
  --s1: #14171C;
  --s2: #1D2128;
  --s3: #2A2F38;
  --ink: #F3F5F7;
  --muted: #B7BDC6;
  --pot: #1762B6;
  --pot2: #3F90DD;
  --ember: #FF9266;
  --ember2: #FFAD8C;
  --ember-ink: #1A0A04;
  --ice: #AEE8FF;
  --ice2: #D2F1FF;
  --ice-ink: #06202C;
  --mint: #74F2B4;
  --amber: #FFC56B;
  --paper: #F4F5F7;
  --paper2: #E4E7EB;
  --paper-ink: #0E1116;

  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --t1: clamp(34px, 5.2vw, 84px);
  --t2: clamp(32px, 4vw, 60px);
  --t3: clamp(24px, 2.5vw, 36px);
  --t4: 17px;
  --t5: 15px;
  --t6: 20px;

  --m: clamp(16px, 2.8vw, 40px);
  --r: 20px;
  --out: cubic-bezier(.16, 1, .3, 1);
  --gap-section: clamp(96px, 13vw, 200px);
  --pot-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 3C17 0 33 0 50 3S83 6 100 3V88a12 12 0 0 1-12 12H12A12 12 0 0 1 0 88Z'/%3E%3C/svg%3E");
  color-scheme: dark;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 var(--t4)/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
h1, h2 { font-weight: 500; letter-spacing: -.03em; line-height: 1.04; text-wrap: balance; }
h2 { font-size: var(--t2); }
h3 { font-size: var(--t6); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
:focus-visible { outline: 3px solid var(--ice); outline-offset: 3px; border-radius: 6px; }
.wrap {
  padding-left: max(var(--m), env(safe-area-inset-left, 0px));
  padding-right: max(var(--m), env(safe-area-inset-right, 0px));
}
section[id], #film-video { scroll-margin-top: 24px; }

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--ink);
  color: var(--ground);
  font-weight: 500;
  font-size: var(--t4);
  text-decoration: none;
  isolation: isolate;
  transition: transform 160ms ease-out;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pot2);
  transform: translateY(101%);
  transition: transform 420ms var(--out);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:active { transform: scale(.97); }
.btn-small { min-height: 44px; padding: 0 20px; font-size: var(--t5); white-space: nowrap; }

.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 32px;
  padding-top: 24px;
  padding-bottom: 8px;
  font-size: var(--t5);
}
.mark { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; text-decoration: none; }
.pot-icon { width: 17px; height: 20px; flex: none; }
.pot-glass { fill: var(--s3); }
.pot-fill { fill: var(--pot2); }
.nav nav { display: flex; flex-wrap: wrap; gap: 4px 26px; }
.nav nav a, .foot nav a { text-decoration: none; color: var(--muted); transition: color 200ms ease; }
.nav nav a:hover, .foot nav a:hover { color: var(--ink); }

/* First screen */
.hero-title {
  padding-top: clamp(24px, 3.4vw, 48px);
  padding-bottom: clamp(20px, 2.2vw, 32px);
  font-size: var(--t1);
  max-width: 64rem;
}
.hero-copy {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 32px 56px;
  padding-bottom: clamp(28px, 3.2vw, 44px);
}
.hero-say { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.hero-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.btn-text { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; text-underline-offset: .22em; }
.lead { font-size: var(--t6); line-height: 1.45; max-width: 34rem; }
.note { font-size: var(--t5); color: var(--muted); max-width: 24rem; }
.hero-new { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; }
.hero-new h2 { font-size: var(--t6); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; margin-bottom: 8px; }

.gl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.gl-on > .gl-canvas { display: block; }
.gl-on > .liquid, .gl-on > .flow-wide, .gl-on > .flow-tall { display: none; }
.motion-btn {
  position: absolute;
  right: max(var(--m), env(safe-area-inset-right, 0px));
  bottom: 10px;
  z-index: 2;
  min-height: 36px;
  padding: 4px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--s1);
  color: var(--ink);
  font: 500 var(--t5)/1.2 var(--font);
  cursor: pointer;
  transition: background-color 180ms ease, transform 160ms ease-out;
}
.motion-btn:hover { background: var(--s3); }
.motion-btn:active { transform: scale(.97); }
.motion-btn[hidden] { display: none; }
#gl-liquid { z-index: -1; }

.stage {
  --level: 1;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 560px;
}
.liquid {
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateY(calc((1 - var(--level)) * 100%));
  transition: transform 900ms var(--out);
}
.lq { position: absolute; inset: 24px 0 0; background: var(--pot); transition: background-color 500ms ease; }
.wave { position: absolute; left: 0; top: 0; width: 200%; height: 30px; display: block; }
.wave path { transition: fill 500ms ease; }
.wave-back path { fill: var(--pot2); }
.wave-front { top: 2px; }
.wave-front path { fill: var(--pot); }
.stage[data-state="burned"] .lq, .stage[data-state="burned"] .wave-front path { background-color: var(--ember); fill: var(--ember); }
.stage[data-state="burned"] .wave-back path { fill: var(--ember2); }
.stage[data-state="frozen"] .lq, .stage[data-state="frozen"] .wave-front path { background-color: var(--ice); fill: var(--ice); }
.stage[data-state="frozen"] .wave-back path { fill: var(--ice2); }

.stage-in {
  display: flex;
  align-items: stretch;
  gap: clamp(20px, 4vw, 56px);
  padding: clamp(56px, 6vw, 88px) max(clamp(16px, 6vw, 88px), env(safe-area-inset-right, 0px)) clamp(60px, 6vw, 88px) max(clamp(16px, 6vw, 88px), env(safe-area-inset-left, 0px));
}
.clip {
  flex: 0 0 clamp(240px, 24vw, 340px);
  min-width: 0;
  -webkit-mask: var(--pot-mask) center / 100% 100% no-repeat;
  mask: var(--pot-mask) center / 100% 100% no-repeat;
  background: var(--s1);
  overflow: hidden;
}
.clip video { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* The card that works. Its root is an interface fragment, so it keeps the app's own panels. */
.demo {
  flex: 1 1 560px;
  min-width: 0;
  padding: 20px;
  border-radius: 24px;
  background: var(--s1);
  font-size: 14px;
  line-height: 1.35;
}
.d-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.d-agent { color: var(--muted); font-size: 14px; }
.d-pot { font-size: 30px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.d-pot-word { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.d-tools { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.d-pill { padding: 3px 10px; border-radius: 999px; background: var(--s2); color: var(--muted); font-size: 13px; }
.d-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px; margin-top: 14px; }
.d-card {
  position: relative;
  aspect-ratio: 1.586;
  border-radius: 14px;
  padding: 12px;
  overflow: hidden;
  background: var(--pot);
  color: #fff;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  font-size: 13px;
  transition: background-color 400ms ease, color 400ms ease;
}
.d-card-top, .d-card-foot { display: flex; justify-content: space-between; gap: 8px; }
.d-card-mark { justify-self: end; font-style: italic; font-weight: 700; font-size: 17px; line-height: 1.2; margin-top: 2px; }
.d-card-num { align-self: end; font-size: 16px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.d-card-foot { font-size: 13px; line-height: 1.2; margin-top: 4px; }
.d-stamp {
  position: absolute;
  left: 50%;
  top: 40%;
  padding: 1px 12px;
  border-radius: 10px;
  background: var(--amber);
  color: var(--ember-ink);
  font-size: var(--t4);
  font-weight: 700;
  transform: translate(-50%, -50%) rotate(-10deg) scale(1.2);
  opacity: 0;
  transition: opacity 200ms ease, transform 300ms var(--out);
}
.d-burn {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--s1);
  color: var(--ember);
  font-size: 18px;
  font-weight: 600;
  border: 2px dashed var(--ember);
  opacity: 0;
  transition: opacity 300ms ease;
}
.d-card[data-status="used"] .d-stamp { opacity: 1; transform: translate(-50%, -50%) rotate(-10deg) scale(1); }
.d-card[data-status="burned"] .d-burn { opacity: 1; }
.d-card[data-status="frozen"] { background: var(--ice); color: var(--ice-ink); }
.d-task { margin-top: 10px; color: var(--muted); }
.d-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.d-title { font-weight: 500; font-size: 14px; margin-bottom: 2px; }
.d-row {
  min-height: 44px;
  padding: 8px 14px;
  border: 0;
  border-radius: 14px;
  background: var(--s2);
  color: var(--ink);
  font: 500 14px/1.25 var(--font);
  text-align: left;
  cursor: pointer;
  transition: background-color 180ms ease, transform 160ms ease-out;
}
.d-row:hover { background: var(--s3); }
.d-row:active { transform: scale(.98); }
.d-risk { color: var(--ember); }
.d-strong { background: var(--ink); color: var(--ground); text-align: center; }
.d-strong:hover { background: #fff; }
.d-gates { display: grid; gap: 2px; margin-bottom: 4px; }
.d-gates li { position: relative; padding-left: 22px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.d-gates li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 4px;
  width: 11px;
  height: 11px;
  border-radius: 3px 3px 5px 5px;
  background: var(--s3);
  transition: background-color 120ms ease;
}
.d-gates li[data-state="pass"] { color: var(--ink); }
.d-gates li[data-state="pass"]::before { background: var(--mint); }
.d-gates li[data-state="fail"] { color: var(--ember); font-weight: 500; }
.d-gates li[data-state="fail"]::before { background: var(--ember); }
.d-note { font-size: 13px; color: var(--muted); }
.d-result {
  display: grid;
  gap: 2px;
  min-height: 62px;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--s2);
  transition: background-color 250ms ease;
}
.d-result[data-tone="burn"] { background: #3A1C10; }
.d-result[data-tone="stop"], .d-result[data-tone="wait"] { background: #33280F; }
.d-result[data-tone="good"] { background: #0F2E22; }
.d-code { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ember); }
.d-result[data-tone="good"] .d-code { color: var(--mint); }
.d-result[data-tone="wait"] .d-code, .d-result[data-tone="stop"] .d-code { color: var(--amber); }

.hold {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ground);
  font: 500 14px/1.2 var(--font);
  min-height: 44px;
  padding: 8px 18px;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 160ms ease-out;
}
.hold:active, .hold.holding { transform: scale(.97); }
.hold-fill { position: absolute; inset: 0; background: var(--pot2); transform: scaleX(0); transform-origin: left; }
.hold-text { position: relative; }
.d-freeze { min-height: 36px; padding: 6px 14px; background: var(--s2); color: var(--ink); font-size: 13px; }
.d-freeze .hold-fill { background: var(--ice); opacity: .45; }

/* What is new */
.idea { padding-top: var(--gap-section); }
.morph { position: relative; margin-top: clamp(64px, 8vw, 120px); }
.morph-pin { position: relative; }
.morph-plain { font-size: var(--t3); line-height: 1.2; font-weight: 500; padding-top: 16px; padding-bottom: 16px; }
.morph-say { font-size: var(--t3); line-height: 1.2; font-weight: 500; letter-spacing: -.015em; max-width: 26em; }
.morph-says { display: grid; gap: 8px; }
.morph-box { display: none; }
.morph.gl-on { height: 200svh; }
.morph.gl-on .morph-pin { position: sticky; top: 0; display: flex; flex-direction: column; height: 100svh; overflow: hidden; }
.morph.gl-on .morph-box { display: block; position: relative; flex: 1 1 auto; min-height: 0; }
.morph.gl-on .gl-canvas { display: block; }
.morph.gl-on .morph-plain { display: none; }
.morph.gl-on .morph-title { flex: none; padding-top: clamp(24px, 4vh, 48px); }
.morph.gl-on .morph-says { position: relative; flex: none; display: block; height: 2.6em; margin-bottom: clamp(24px, 5vh, 56px); font-size: var(--t3); }
.morph.gl-on .morph-say { position: absolute; bottom: 0; left: max(var(--m), env(safe-area-inset-left, 0px)); right: max(var(--m), env(safe-area-inset-right, 0px)); font-size: var(--t3); pointer-events: none; transition: opacity 240ms ease; }
.morph.gl-on #morph-b { display: none; }
.idea-head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 24px 56px;
  padding-top: clamp(64px, 8vw, 120px);
}
.idea-text { display: grid; gap: 16px; max-width: 46rem; }
.versus { padding-top: clamp(40px, 5vw, 72px); }
.versus table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.versus th, .versus td { padding: 16px 24px; text-align: left; vertical-align: top; font-size: var(--t4); font-weight: 400; line-height: 1.4; }
.versus thead th { font-size: var(--t6); font-weight: 600; line-height: 1.25; padding-top: 28px; padding-bottom: 16px; }
.versus thead td, .versus tbody th { width: 22%; padding-left: 0; }
.versus tbody th { color: var(--ink); font-weight: 600; }
.versus .old { color: var(--muted); }
.versus .new { background: var(--pot); color: #fff; }
.versus thead .new { border-radius: 28px 28px 0 0; }
.versus tbody tr:last-child .new { border-radius: 0 0 44px 44px; padding-bottom: 32px; }

/* Film */
.film { padding-top: var(--gap-section); }
.statement {
  font-size: var(--t3);
  line-height: 1.28;
  font-weight: 500;
  letter-spacing: -.015em;
  max-width: 52rem;
  text-wrap: pretty;
}
.thumb {
  display: inline-block;
  width: 1.1em;
  height: .95em;
  margin: 0 .08em;
  vertical-align: -.14em;
  overflow: hidden;
  border-radius: .12em .12em .3em .3em;
  background: var(--s2);
}
.thumb-wide { width: 1.55em; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.film-head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 24px 48px;
  align-items: end;
  padding-bottom: 40px;
}
.film-frame { overflow: hidden; border-radius: 28px; background: var(--s1); }
.film-frame video { width: 100%; }

/* The framework: a field of paper */
.frame { position: relative; margin-top: var(--gap-section); padding-top: 28px; }
.band-wave { position: absolute; left: 0; top: 0; width: 100%; height: 30px; display: block; }
.frame .band-wave path { fill: var(--paper); }
.frame-in {
  display: grid;
  gap: clamp(64px, 8vw, 120px);
  background: var(--paper);
  color: var(--paper-ink);
  padding-top: clamp(56px, 7vw, 104px);
  padding-bottom: clamp(64px, 8vw, 120px);
  color-scheme: light;
}
.frame-top, .frame-why { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 56px; }
.frame-text { display: grid; gap: 16px; max-width: 46rem; }
.frame-lead { font-size: var(--t3); line-height: 1.22; font-weight: 500; letter-spacing: -.015em; }
.frame-why h3, .parts-title, .lives h3, .who-title, .readers-head h3 { font-size: var(--t3); font-weight: 500; letter-spacing: -.02em; line-height: 1.12; }
.frame-why p { max-width: 46rem; }
.owns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.owns-col { padding: clamp(20px, 3vw, 40px); border-radius: var(--r) var(--r) 44px 44px; }
.owns-col h3 { font-size: var(--t3); font-weight: 500; letter-spacing: -.02em; margin-bottom: 20px; }
.owns-frame { background: var(--pot); color: #fff; }
.owns-bank { background: var(--paper2); }
.parts { display: grid; gap: 24px; }
.parts dl { margin: 0; display: grid; gap: 24px; }
.parts dl > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4px 56px; }
.parts dt { font-size: var(--t3); font-weight: 500; letter-spacing: -.02em; line-height: 1.12; color: var(--pot); }
.parts dd { margin: 0; max-width: 46rem; }
.rule-say { display: contents; }
.rule-line { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 48px; align-items: start; padding: clamp(24px, 4vw, 56px); border-radius: var(--r) var(--r) 44px 44px; background: var(--paper-ink); color: var(--paper); }
.rule-pic { width: 100%; border-radius: 16px; }
.rule-line blockquote { grid-column: 1 / -1; margin: 0; font-size: var(--t3); line-height: 1.24; font-weight: 500; letter-spacing: -.015em; max-width: 66rem; }
.rule-line figcaption { color: var(--paper2); max-width: 46rem; }
.lives { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.lives-head { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px 56px; }
.lives-head p { max-width: 46rem; }
.life strong { display: block; font-size: var(--t2); font-weight: 500; letter-spacing: -.03em; line-height: 1.05; margin-bottom: 8px; font-variant-numeric: tabular-nums; color: var(--pot); }
.who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; }
.who-title { grid-column: 1 / -1; }
.who h4, .reader h4 { margin: 0 0 8px; font-size: var(--t6); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }

/* Two gates */
.how { padding-top: var(--gap-section); }
.how-head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 32px 56px;
  align-items: end;
}
.how-head h2 { margin-bottom: 20px; }
.how-head > div p { max-width: 36rem; }
.how-line { font-size: var(--t3); line-height: 1.2; font-weight: 500; letter-spacing: -.015em; color: var(--pot2); max-width: 22em; }
.flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 32px;
  padding-top: 56px;
}
.flow-scene { grid-column: 1 / -1; position: relative; aspect-ratio: 1200 / 400; }
.flow-scene svg { display: block; width: 100%; height: 100%; }
.flow-scene .flow-tall { display: none; }
.flow-label { position: absolute; left: calc(var(--u) * 100%); top: 0; display: none; font-size: var(--t5); font-weight: 500; transform: translateX(-50%); white-space: nowrap; }
.flow-minor { transform: none; color: var(--muted); }
.gl-on > .flow-label { display: block; }
.flow-scene .motion-btn { bottom: -42px; right: 0; }
.gate-lists { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 24px; padding-top: clamp(56px, 7vw, 104px); }
.gate-lists > :nth-child(1) { grid-column: 1 / 5; }
.gate-lists > :nth-child(2) { grid-column: 5 / 9; }
.gate-lists > :nth-child(3) { grid-column: 9 / 13; }
.gate-lists h3 { margin-bottom: 14px; }
.gate-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.gate-list li { position: relative; padding-left: 26px; }
.gate-list li::before { content: ""; position: absolute; left: 0; top: .32em; width: 13px; height: 15px; border-radius: 3px 3px 6px 6px; background: var(--pot2); }
.gate-why p { margin-top: 12px; }
.readers { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: 8px; padding-top: clamp(56px, 7vw, 104px); }
.readers-head { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px 56px; margin-bottom: 24px; }
.readers-head p { max-width: 46rem; }
.reader { padding: 24px; border-radius: var(--r) var(--r) 36px 36px; background: var(--s1); }
.reader-agent { background: #3A1C10; }
.reader-owner { background: var(--pot); color: #fff; }
.reader-say { font-size: var(--t6); font-weight: 500; line-height: 1.3; margin-bottom: 8px; }
.reader-say code { font: 600 var(--t6)/1.3 ui-monospace, Consolas, monospace; color: var(--ember); }
.flow-step h3 { font-size: var(--t3); font-weight: 500; letter-spacing: -.02em; margin-bottom: 8px; }

/* Inside the app */
.app {
  position: relative;
  margin-top: var(--gap-section);
  min-height: clamp(640px, 92vh, 880px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
}
.app-names { grid-column: 1 / 7; grid-row: 1; z-index: 2; padding-bottom: 24px; }
.app-names h2 { font-size: var(--t3); line-height: 1.15; margin-bottom: 4px; letter-spacing: -.02em; }
#app-list { display: grid; }
#app-list button {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: 400 var(--t3)/1.2 var(--font);
  letter-spacing: -.02em;
  text-align: left;
  cursor: pointer;
  transition: color 200ms ease, transform 300ms var(--out);
}
#app-list button:hover { color: var(--ink); }
#app-list button[aria-pressed="true"] { color: var(--ink); font-weight: 500; transform: translateX(.2em); }
.app-stage {
  grid-column: 5 / 10;
  grid-row: 1;
  position: relative;
  align-self: stretch;
  display: grid;
  place-items: end center;
}
.app-shape {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: min(56vh, 84%);
  height: 78%;
  transform: translateX(-50%);
  background: var(--pot);
  -webkit-mask: var(--pot-mask) center / 100% 100% no-repeat;
  mask: var(--pot-mask) center / 100% 100% no-repeat;
  transition: background-color 400ms ease;
}
.app-shots { position: relative; width: min(40vh, 340px); aspect-ratio: 720 / 1609; margin-bottom: 4%; }
.app-shots img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  opacity: 0;
  transition: opacity 300ms ease;
}
.app-shots img.on { opacity: 1; }
.app-fact {
  grid-column: 10 / 13;
  grid-row: 1;
  z-index: 2;
  padding-right: max(var(--m), env(safe-area-inset-right, 0px));
  padding-bottom: 36px;
  padding-left: 28px;
}

/* Close-ups */
.board {
  margin-top: var(--gap-section);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 120px;
  gap: 8px;
  grid-template-areas:
    "x x x x x x a a a a a a"
    "x x x x x x a a a a a a"
    "b b b c c c a a a a a a"
    "b b b c c c a a a a a a"
    "d d d e e e f f f f f f"
    "d d d e e e f f f f f f"
    "d d d e e e g g g h h h"
    "d d d e e e g g g h h h";
}
.t-head { grid-area: x; padding: 20px; background: var(--s1); }
.t-a { grid-area: a; } .t-b { grid-area: b; } .t-c { grid-area: c; } .t-d { grid-area: d; }
.t-e { grid-area: e; } .t-f { grid-area: f; } .t-g { grid-area: g; } .t-h { grid-area: h; }
.tile { border-radius: var(--r); overflow: hidden; min-width: 0; }
article.tile { display: grid; grid-template-rows: minmax(0, 1fr) auto; background: var(--tile); color: var(--tile-ink, #fff); }
.tile-pic { padding: 20px 0 0 20px; min-height: 0; overflow: hidden; }
.tile-pic img { width: 118%; max-width: none; border-radius: 14px 0 0 0; transition: transform 500ms var(--out); }
.tile-cap { padding: 14px 20px 18px; }
.tile-cap h3 { font-size: var(--t4); font-weight: 500; }
.tile-cap p { font-size: var(--t5); line-height: 1.35; margin-top: 2px; }
.hue-blue { --tile: #1762B6; } .hue-violet { --tile: #6C44A4; } .hue-green { --tile: #006C4D; }
.hue-teal { --tile: #00686C; } .hue-orange { --tile: #9D4616; } .hue-rose { --tile: #A23951; }
.hue-ice { --tile: var(--ice); --tile-ink: var(--ice-ink); } .hue-ember { --tile: var(--ember); --tile-ink: var(--ember-ink); }

/* Trust */
.trust {
  margin-top: var(--gap-section);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(250px, auto);
  gap: 8px;
}
.mark-tile { padding: 24px; border-radius: var(--r); background: var(--s1); min-width: 0; }
.mark-tile h3 { font-size: var(--t3); font-weight: 500; letter-spacing: -.02em; line-height: 1.12; margin-bottom: 12px; }
.mark-tile p { font-size: var(--t4); line-height: 1.45; }
.mark-head { grid-column: span 2; background: var(--pot); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.mark-head h2 { font-size: var(--t2); }
.mark-head p { font-size: var(--t4); max-width: 30rem; }
.mark-pic { padding: 16px 0 0 16px; overflow: hidden; background: var(--s2); max-height: 320px; }
.mark-pic img, .tile-pic img { will-change: transform; }
.mark-pic img { width: 112%; max-width: none; border-radius: 14px 0 0 0; }
.mark-num strong { display: block; font-size: var(--t2); font-weight: 500; letter-spacing: -.03em; line-height: 1.05; margin-bottom: 10px; font-variant-numeric: tabular-nums; }

/* For banks: the band between the two halves */
.banks { position: relative; margin-top: var(--gap-section); padding-top: 28px; }
.banks .band-wave path { fill: var(--ember); }
.banks-in {
  background: var(--ember);
  color: var(--ember-ink);
  padding-top: clamp(56px, 7vw, 104px);
  padding-bottom: clamp(64px, 8vw, 120px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px 48px;
}
.banks-in h2 { grid-column: 1 / -1; max-width: 18em; }
.banks-col { display: grid; align-content: start; gap: 16px; }
.banks-col h3 { font-size: var(--t3); font-weight: 500; letter-spacing: -.02em; line-height: 1.12; }
.pots { display: grid; gap: 10px; }
.pots li { position: relative; padding-left: 28px; max-width: 34rem; }
.pots li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .3em;
  width: 15px;
  height: 17px;
  border-radius: 3px 3px 7px 7px;
  background: currentColor;
}
.pots-empty li::before { background: none; border: 2px solid currentColor; }

/* Questions */
.faq { background: var(--paper); color: var(--paper-ink); padding-block: var(--gap-section) clamp(64px, 7vw, 104px); color-scheme: light; }
.faq-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px 16px; align-items: start; }
.faq-list { display: grid; gap: 8px; }
.faq details { border-radius: var(--r); background: var(--paper2); transition: background-color 250ms ease, color 250ms ease; }
.faq details[open] { background: var(--pot); color: #fff; }
.faq summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 72px;
  padding: 16px 64px 16px 24px;
  font-size: var(--t6);
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq details p { padding: 0 24px 24px; max-width: 52ch; }
.plus { position: absolute; right: 24px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); }
.plus::before, .plus::after { content: ""; position: absolute; left: 0; top: 6.5px; width: 16px; height: 3px; border-radius: 2px; background: currentColor; transition: transform 250ms var(--out); }
.plus::after { transform: rotate(90deg); }
details[open] .plus::after { transform: rotate(0deg); }

/* Close */
.foot { padding-top: clamp(56px, 6vw, 88px); padding-bottom: 40px; }
.foot-pots { width: 100%; height: 34svh; min-height: 180px; }
.foot-row {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) auto;
  gap: 24px 32px;
  align-items: start;
  padding-top: 40px;
  font-size: var(--t5);
}
.foot-row p { color: var(--muted); max-width: 38rem; }
.foot-mail { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-size: var(--t4); font-weight: 500; text-underline-offset: .22em; }
.foot nav { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px 32px; align-content: start; }

/* Motion. Everything rests visible. A move starts only when its element reaches the screen.
   The script removes the class motion when a visitor presses Pause. A visitor who asked for less motion gets fades, not moves. */
.motion .hero-title, .motion .hero-say, .motion .hero-new > li { animation: rise 800ms var(--out) both; }
.motion .hero-say { animation-delay: 240ms; }
.motion .hero-new > li:nth-child(1) { animation-delay: 340ms; }
.motion .hero-new > li:nth-child(2) { animation-delay: 420ms; }
.motion .hero-new > li:nth-child(3) { animation-delay: 500ms; }
.motion .demo { animation: rise 900ms var(--out) 500ms both; }
.motion .clip { animation: rise 900ms var(--out) 620ms both; }
.motion [data-in].in { animation: rise 760ms var(--out) both; animation-delay: calc(var(--i, 0) * 70ms); }
.motion .tile.in, .motion .mark-tile.in { animation-name: settle; }
.motion .shutter.in { animation: shutter 1100ms cubic-bezier(.77, 0, .175, 1) both; }
.motion .shutter.in video { animation: unzoom 1100ms var(--out) both; }
.motion .liquid .wave-back { animation: drift 16s linear infinite; }
.motion .liquid .wave-front { animation: drift 11s linear infinite reverse; }

.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.w > span { display: inline-block; }
.motion .hero-title.split, .motion h2.split.in { animation: none; }
.motion .hero-title.split .w > span, .motion h2.split.in .w > span, .motion .in > .split .w > span {
  animation: word 900ms var(--out) both;
  animation-delay: calc(var(--w) * 60ms);
}

.motion .versus.in tbody tr { animation: rise 700ms var(--out) both; animation-delay: calc(var(--r, 0) * 70ms + 120ms); }
.motion .versus.in thead .new, .motion .versus.in tbody .new { animation: lift 900ms var(--out) both; animation-delay: calc(var(--r, 0) * 70ms + 200ms); }
.motion .in .gate-list li::before { animation: tick 900ms ease-out both; animation-delay: calc(var(--n, 0) * 170ms + 200ms); }
.motion .in .gate-list li { animation: tick-text 900ms ease-out both; animation-delay: calc(var(--n, 0) * 170ms + 200ms); }
.motion .band-wave { width: 200%; animation: drift 19s linear infinite; }
.motion .frame, .motion .banks { overflow-x: clip; }
.motion .app-shots img { transform: translateY(14px) scale(.98); transition: opacity 340ms ease, transform 620ms var(--out); }
.motion .app-shots img.on { transform: none; }
.motion .tile-pic img, .motion .mark-pic img { animation: drift-y linear both; animation-timeline: view(); animation-range: cover; }
.motion .foot-pots { transform-origin: bottom; animation: fill both linear; animation-timeline: view(); animation-range: entry 0% entry 100%; }
.motion .life strong { font-variant-numeric: tabular-nums; }

@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes word { from { transform: translateY(108%); } to { transform: none; } }
@keyframes lift { from { background-color: transparent; } to { background-color: var(--pot); } }
@keyframes tick { 0% { background-color: var(--s3); } 45% { background-color: var(--mint); } 100% { background-color: var(--pot2); } }
@keyframes tick-text { 0% { color: var(--muted); } 45% { color: var(--mint); } 100% { color: var(--ink); } }
@keyframes drift { to { transform: translateX(-50%); } }
@keyframes drift-y { from { transform: translateY(14px); } to { transform: translateY(-14px); } }
@keyframes shutter { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes unzoom { from { transform: scale(1.12); } to { transform: none; } }
@keyframes fill { from { transform: scaleY(.4); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .liquid, .btn, .btn::before, .d-stamp, .tile-pic img { transition-duration: 1ms; }
  .motion .hero-title, .motion .hero-say, .motion .hero-new > li, .motion .demo, .motion .clip,
  .motion [data-in].in, .motion .tile.in, .motion .mark-tile.in, .motion .versus.in tbody tr,
  .motion .hero-title.split .w > span, .motion h2.split.in .w > span, .motion .in > .split .w > span { animation-name: fade; }
  .motion .shutter.in, .motion .shutter.in video { animation: none; }
  .motion .tile-pic img, .motion .mark-pic img, .motion .foot-pots { animation: none; }
}

/* Tablet and narrower */
@media (max-width: 1100px) {
  .hero-title { font-size: 7.4vw; }
  .hero-copy { grid-template-columns: minmax(0, 1fr); }
  .lead, .note { max-width: 36rem; }
  .stage-in { flex-direction: column; }
  .demo { flex: none; }
  .clip { flex: none; width: min(74%, 380px); aspect-ratio: 600 / 792; align-self: center; }
  .film-head, .how-head, .idea-head, .frame-top, .frame-why, .lives-head, .readers-head, .parts dl > div { grid-template-columns: minmax(0, 1fr); }
  .gate-lists > :nth-child(1) { grid-column: 1 / 7; }
  .gate-lists > :nth-child(2) { grid-column: 7 / 13; }
  .gate-lists > :nth-child(3) { grid-column: 1 / -1; }
  .app { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .app-stage { grid-column: 1; grid-row: 1; height: min(120vw, 760px); }
  .app-shape { width: 86vw; height: 80%; }
  .app-shots { width: min(52vw, 340px); }
  .app-names { grid-column: 1; grid-row: 2; padding-top: 32px; padding-bottom: 0; }
  .app-fact { grid-column: 1; grid-row: 3; padding: 14px max(var(--m), env(safe-area-inset-right, 0px)) 0 max(var(--m), env(safe-area-inset-left, 0px)); }
  .lives { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-in { grid-template-columns: minmax(0, 1fr); }
  .foot-row { grid-template-columns: minmax(0, 1fr); }
  .btn-small { justify-self: start; }
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .mark-pic { max-height: 300px; }
}

/* Phone */
@media (max-width: 720px) {
  .nav { padding-top: 16px; }
  .hero-title { font-size: 8.6vw; line-height: 1.08; padding-top: 28px; padding-bottom: 20px; }
  .lead { font-size: var(--t4); }
  .stage { min-height: 0; }
  .stage-in { gap: 20px; padding-left: 12px; padding-right: 12px; }
  .demo { padding: 14px; }
  .hero-new { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .d-body { grid-template-columns: minmax(0, 1fr); }
  .d-pot-word { display: block; }
  .d-card { max-width: 320px; width: 100%; }
  .film-head { padding-bottom: 24px; }
  .film-frame { border-radius: 18px; }
  .statement { max-width: none; }
  .flow { grid-template-columns: 50vw minmax(0, 1fr); gap: 0 16px; padding-top: 36px; }
  .flow-scene { grid-column: 1; grid-row: 1 / 4; aspect-ratio: auto; min-height: 520px; }
  .flow-scene .flow-wide { display: none; }
  .flow-scene .flow-tall { display: block; }
  .gl-on > .flow-tall { display: none; }
  .flow-label { left: 0; top: calc(var(--u) * 100%); transform: translateY(-120%); }
  .flow-minor { display: none !important; }
  .flow-scene .motion-btn { right: auto; left: 0; bottom: -46px; }
  .versus thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .versus table, .versus tbody { display: block; }
  .versus tr { display: grid; gap: 4px; margin-bottom: 20px; }
  .versus tbody th { width: auto; padding: 0 0 4px; }
  .versus td { padding: 12px 16px; border-radius: 16px; }
  .versus .old { background: var(--s1); }
  .versus tbody tr:last-child .new { border-radius: 16px; padding-bottom: 12px; }
  .versus td::before { content: attr(data-label); display: block; font-size: var(--t5); font-weight: 600; }
  .owns, .who, .readers { grid-template-columns: minmax(0, 1fr); }
  .banks-in { grid-template-columns: minmax(0, 1fr); }
  .gate-lists > :nth-child(1), .gate-lists > :nth-child(2) { grid-column: 1 / -1; }
  .flow-step { grid-column: 2; font-size: var(--t5); line-height: 1.4; padding-bottom: 12px; }
  .flow-step h3 { font-size: var(--t6); margin-bottom: 4px; }
  #app-list { display: flex; flex-wrap: wrap; gap: 0 18px; }
  #app-list button { white-space: nowrap; }
  #app-list button[aria-pressed="true"] { transform: none; }
  .app-names h2 { margin-bottom: 10px; }
  .board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 28vw;
    gap: 6px;
    grid-template-areas: none;
  }
  .board > * { grid-area: auto !important; grid-column: span 1 !important; grid-row: span 3 !important; }
  .board > .t-head { grid-column: span 2 !important; grid-row: span 1 !important; padding: 16px; }
  .board > .t-a, .board > .t-f { grid-column: span 2 !important; grid-row: span 3 !important; }
  .tile-pic { padding: 12px 0 0 12px; }
  .tile-cap { padding: 10px 12px 14px; }
  .trust { gap: 6px; }
  .mark-tile { padding: 16px; }
  .mark-head { grid-column: 1 / -1; }
  .mark-pic { padding: 12px 0 0 12px; max-height: 230px; }
  .mark-tile:not(.mark-head):not(.mark-pic):not(.mark-num) { grid-column: 1 / -1; }
  .rule-line blockquote { font-size: var(--t6); line-height: 1.3; }
  .rule-line { grid-template-columns: minmax(0, 1fr); }
  .morph.gl-on .morph-says { height: 3.9em; }
  .faq summary { font-size: var(--t4); min-height: 64px; padding: 14px 54px 14px 20px; }
  .faq details p { padding: 0 20px 20px; }
  .plus { right: 20px; }
  .foot-pots { height: 22svh; min-height: 130px; }
}