/* Estoa landing — proposal, round 3 (polish).
   Direction "The well-kept board" (tasteskill seed 642483197): the page is a board of filled tiles
   with small gaps, the same way Estoa's Work board keeps one card per piece of work instead of a feed.
   Plum-black and pink; one face (Bricolage Grotesque, self-hosted, OFL). Square corners everywhere.

   Round 2 rule (garnet's review): pink means "needs you" or the one primary action, nothing else. In
   round 1 whole sections were pink (the open board row, the audience band, the Pro column, the waitlist
   band, a footer block); they are plum or neutral now, so a reader finds every "needs you" by colour. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}

:root {
  --bg: #0d060b;
  --surface: #1b0e17;
  --surface-2: #2a1622;
  --ink: #ffffff;
  --muted: #cbbfc7;        /* 9.9:1 on --surface; meta text is never dimmer than this */
  --accent: #ff488b;       /* needs you + the primary action, only */
  --accent-ink: #0d060b;
  --field-1: #470c35;
  --field-1-soft: #e6d3df; /* secondary text on plum, 10:1 */
  --field-2: #ffffff;
  --field-2-ink: #101421;
  --paper-2: #f1edf0;
  --plum-2: #6b1f52;
  --plum-3: #3a2433;

  --step-small: 0.875rem;
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.25rem, 1.3rem + 3.6vw, 4.5rem);
  --step-display: clamp(4rem, 9vw, 8.25rem);

  --m: 20px;          /* the one outer margin (the direction asks 8-12; 20 keeps text off the glass edge) */
  --g: 8px;           /* the one gap */
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: var(--step-body);
  line-height: 1.5;
  font-optical-sizing: auto;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul, ol { list-style: none; }
button, input { font: inherit; color: inherit; }
/* focus: a white ring set 3px outside the element, so it lands on plum or near-black, never on the
   element's own paper/pink fill (round 3) */
:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.skip { position: absolute; left: var(--m); top: -80px; z-index: 10; background: var(--paper-2); color: var(--field-2-ink); padding: 12px 18px; font-weight: 600; text-decoration: none; }
.skip:focus { top: var(--m); }
picture { display: block; }
::selection { background: var(--paper-2); color: var(--bg); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, h2, h3, .head, .head-s, .slogan, .word, .wordmark, .nm, .foot-mark {
  font-weight: 600; letter-spacing: -0.035em; line-height: 0.95; text-wrap: balance;
}
.head { font-size: var(--step-head); max-width: 16ch; }
.head-s { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); max-width: 18ch; }
.lead { font-size: var(--step-lead); line-height: 1.35; max-width: 34ch; }

/* buttons: square, flat. The pink one is the primary action; everything else is neutral. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 24px;
  background: var(--accent); color: var(--accent-ink);
  font-weight: 600; text-decoration: none; border: 0; cursor: pointer;
  transition: transform .18s var(--ease), background-color .18s var(--ease);
}
.btn:hover { background: #ff6da2; }
.btn:active { transform: scale(.97); }
.btn.ghost { background: var(--surface-2); color: var(--ink); }
.btn.ghost:hover { background: var(--plum-2); }
.btn.small { min-height: 44px; padding: 0 16px; font-size: var(--step-small); }

/* ============================ HERO ============================ */
.hero {
  height: 100svh; min-height: 720px; max-height: 1000px; overflow: hidden; position: relative;
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; padding: 0 var(--m);
}
.panel {
  grid-column: 1 / 6; margin: var(--m) 0; padding: 32px;
  background: var(--field-1); color: #fff;
  display: flex; flex-direction: column; position: relative; z-index: 1;
}
.wordmark { font-size: 28px; letter-spacing: -0.03em; }
.panel-body { margin: auto 0; padding: 40px 0; }
.panel h1 { font-size: clamp(3rem, 1rem + 4.6vw, 6rem); line-height: .9; max-width: 9ch; }
.panel-lead { font-size: clamp(1.125rem, 1rem + .45vw, 1.375rem); line-height: 1.4; margin-top: 28px; max-width: 33ch; color: #fff; text-wrap: pretty; }
.panel-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 32px; }
.panel-links { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; font-weight: 500; color: var(--field-1-soft); }
.panel-links a, .panel-try { font-weight: 600; text-decoration: none; padding: 8px 0; position: relative; }
.panel-links a { font-weight: 500; }
.panel-links a::after, .panel-try::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease), opacity .25s; }
.panel-try::after { transform: scaleX(1); opacity: .5; }
.panel-links a:hover::after, .panel-try:hover::after { transform: scaleX(1); opacity: 1; }

.sheet { grid-column: 6 / 13; margin: var(--m) 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; min-height: 0; }
/* Round 3: one top, one bottom, equal gutters. Each column's photo grows to take what the cards leave,
   so all three end on the panel's bottom edge (round 2 floated them at different tops). */
.col { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.frame.grow { flex: 1 1 0; min-height: 120px; }
.frame.grow picture { flex: 1; min-height: 0; }
.frame.grow img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }

.frame { position: relative; display: flex; flex-direction: column; background: var(--surface); overflow: hidden; flex: none; }
.frame.photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.frame.photo picture { overflow: hidden; }
.strip { height: 32px; flex: none; padding: 0 12px; display: flex; align-items: center; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: auto; }
.s1 { background: var(--field-1); color: #fff; }
.s2 { background: var(--paper-2); color: var(--field-2-ink); }
.s3 { background: var(--plum-3); color: #fff; }

/* ---- interface fragments (data-ui): the product's own look ---- */
.ui { padding: 16px; font-size: 15px; line-height: 1.4; color: var(--ink); display: flex; flex-direction: column; gap: 10px; }
.ui p { margin: 0; }
.ui-who { color: var(--muted); font-weight: 500; font-size: 14px; }
.ui-q { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.ui-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-b { padding: 7px 12px; background: var(--surface-2); font-weight: 600; font-size: 14px; }
.ui-b:first-child { background: var(--paper-2); color: var(--field-2-ink); }
.ui ul li { padding: 4px 0 4px 24px; position: relative; }
.ui ul li::before { content: ""; position: absolute; left: 0; top: 7px; width: 15px; height: 15px; background: var(--surface-2); }
.ui ul li.done::before { background: var(--plum-2); }
.ui ul li.done { color: var(--muted); text-decoration: line-through; }
.ui-tag { align-self: flex-start; padding: 3px 9px; font-weight: 600; font-size: 14px; background: var(--accent); color: var(--accent-ink); }
.ui-tag.prog { background: var(--plum-2); color: #fff; }
.ui-tag.stuck { background: var(--paper-2); color: var(--field-2-ink); }
.ui-next { color: var(--muted); }
.ui-cmd { /* taste-skill-ignore: literal shell commands in <code> */ font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; background: var(--bg); padding: 7px 9px; }
.ui-h { color: var(--muted); font-weight: 600; margin-top: 2px; font-size: 14px; }
.ui .mine { background: var(--surface-2); padding: 7px 9px; }
.ui-wave { display: flex; align-items: center; gap: 3px; height: 30px; }
.ui-wave i { width: 4px; background: #c99bb8; height: 40%; }
.ui-wave i:nth-child(3n) { height: 85%; } .ui-wave i:nth-child(4n+1) { height: 60%; } .ui-wave i:nth-child(5n) { height: 25%; }
.ui.board .row { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.st { padding: 3px 8px; font-weight: 600; font-size: 14px; white-space: nowrap; }
.st.n { background: var(--accent); color: var(--accent-ink); }
.st.p { background: var(--plum-2); color: #fff; }
.st.s { background: var(--paper-2); color: var(--field-2-ink); }
.st.d, .st.l { background: var(--plum-3); color: var(--muted); }

/* ============================ SECTIONS ============================ */
section { padding: 0 var(--m); }
main > section + section { margin-top: 160px; }

/* ---- the phone (live), straight after the hero ---- */
.phone { margin-top: 120px; display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--g); align-items: stretch; }
.phone-text { grid-column: 1 / 6; padding: 24px 0; display: flex; flex-direction: column; gap: 28px; }
.facts { display: grid; gap: 18px; max-width: 42ch; }
.facts b { font-weight: 600; }
.demo { grid-column: 6 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); }
.lockscreen { background: var(--field-1); padding: 40px 24px 24px; display: flex; flex-direction: column; min-height: 560px; }
.ls-time { font-size: clamp(64px, 6vw, 96px); font-weight: 500; letter-spacing: -0.05em; line-height: 1; }
.ls-date { margin-top: 8px; color: var(--field-1-soft); }
.ls-note { margin-top: auto; background: rgba(255,255,255,.12); padding: 16px; display: flex; flex-direction: column; gap: 10px; transition: transform .4s var(--ease), opacity .4s var(--ease); }
.ls-app { font-size: 14px; color: var(--field-1-soft); font-weight: 500; display: flex; align-items: center; gap: 8px; }
.ls-dot { width: 10px; height: 10px; background: var(--accent); flex: none; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(.6); opacity: .6; } }
.ls-q { font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.ls-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ls-btns button { min-height: 48px; background: rgba(255,255,255,.18); border: 0; font-weight: 600; cursor: pointer; transition: background-color .18s, transform .18s var(--ease); }
.ls-btns button:hover { background: rgba(255,255,255,.32); }
.ls-btns button:active { transform: scale(.95); }
.ls-btns button:first-child { background: var(--paper-2); color: var(--field-2-ink); }
.ls-done { font-weight: 600; }
.ls-note.answered .ls-btns { display: none; }
.ls-note.answered .ls-dot { background: var(--field-1-soft); animation: none; }
.term { background: var(--surface); padding: 24px; display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.term-h { color: var(--muted); font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.term .wait { color: var(--muted); }
.term .you { background: var(--paper-2); color: var(--field-2-ink); padding: 6px 10px; align-self: flex-start; font-weight: 600; }
.term .line { opacity: 0; transform: translateY(8px); animation: in .4s var(--ease) forwards; }
@keyframes in { to { opacity: 1; transform: none; } }

/* ---- intro tiles ---- */
.tiles { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 38svh 38svh; gap: var(--g); }
.t-a { grid-column: 1 / 9; grid-row: 1 / 3; background: var(--field-1); padding: 24px; display: flex; align-items: flex-end; }
.slogan { font-size: var(--step-display); line-height: 0.88; }
.t-b { grid-column: 9 / 13; background: var(--field-2); color: var(--field-2-ink); padding: 24px; display: flex; align-items: flex-end; overflow: hidden; }
.word { font-size: var(--step-display); line-height: .9; }
.t-c { grid-column: 9 / 13; overflow: hidden; }
.t-c picture { height: 100%; }
.t-c img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.t-text { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--g); background: var(--surface); margin-top: var(--g); padding: 40px 0; }
.t-text p { grid-column: 7 / 13; grid-row: 1; padding: 0 40px; font-size: clamp(1.25rem, 1rem + .6vw, 1.5rem); line-height: 1.38; max-width: 40em; }
.t-img { grid-column: 1 / 7; grid-row: 1; margin: -40px 0; min-height: 260px; overflow: hidden; position: relative; }
.t-img picture, .t-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 45%; }

/* ---- how it works ---- */
.how .head { margin-bottom: 64px; }
.bar { display: flex; gap: 6px; height: 22vh; min-height: 200px; }
.seg.g1 { --grow: 1.2; } .seg.g2 { --grow: 6; } .seg.g3 { --grow: 1.4; } .seg.g4 { --grow: 2.2; }  /* true proportions of each stage */
.seg { flex: var(--grow) 1 0; min-width: 12%; position: relative; padding: 20px; display: flex; flex-direction: column; }
.seg.g1 { background: var(--surface-2); }
.seg.g2 { background: var(--field-1); }
.seg.g3 { background: var(--plum-2); }
.seg.g4 { background: var(--plum-3); }
.dur { font-size: clamp(20px, 2vw, 30px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
.clause { position: absolute; top: calc(100% + 16px); left: 0; width: min(22ch, 100%); min-width: 160px; font-size: 17px; color: var(--ink); line-height: 1.4; }
.how { padding-bottom: 120px; }

/* ---- features ---- */
.features .head-s { margin-bottom: 56px; }
.cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g); }
.cell { background: var(--surface); height: 360px; display: flex; flex-direction: column; overflow: hidden; transition: background-color .25s var(--ease); }
.cell:hover { background: var(--surface-2); }
.cells .cell:nth-child(n+4).top, .cells .cell:nth-child(-n+3).bottom { flex-direction: column-reverse; }
.cell-text { padding: 24px; }
.cell-text h3 { font-size: 26px; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 10px; }
.cell-text p { font-size: 16px; max-width: 34ch; }
.frag { margin-top: auto; padding: 0 24px; }
.cells .cell:nth-child(-n+3).bottom .frag, .cells .cell:nth-child(n+4).top .frag { margin-top: 0; margin-bottom: auto; }
.frag .ui.big { background: var(--bg); padding: 22px; font-size: 16px; gap: 12px; width: 118%; transition: transform .35s var(--ease); }
.cell:hover .ui.big { transform: translateY(-4px); }
.frag .ui.big .ui-q { font-size: 21px; }
.frag .ui.big .ui-who, .frag .ui.big li, .frag .ui.big .ui-h { font-size: 16px; }
.frag .ui.big .ui-b { padding: 9px 14px; font-size: 15px; }

/* ---- the board ---- */
#board { background: var(--surface); padding-top: 120px; padding-bottom: 0; overflow: hidden; }
#board .head { margin-bottom: 20px; }
.board-lead { font-size: var(--step-lead); line-height: 1.35; max-width: 44ch; margin-bottom: 56px; }
.rows { display: flex; flex-direction: column; gap: 4px; margin: 0 0 -36px; }
.r { display: grid; grid-template-columns: 5fr 2fr 2fr 2fr 1.4fr; align-items: center; column-gap: var(--g); text-align: left;
     height: 72px; padding: 0 20px; background: var(--bg); border: 0; cursor: pointer; font-size: clamp(20px, 1.9vw, 28px); letter-spacing: -0.01em;
     transition: background-color .2s var(--ease); }
.r:first-child { margin-top: -36px; }
.r:hover { background: #160a12; }
.r-n { font-weight: 600; }
.r-f { color: var(--muted); font-variant-numeric: tabular-nums; }
.r .st { font-size: clamp(15px, 1.2vw, 18px); padding: 8px 12px; justify-self: end; }
.r-d { display: none; grid-column: 1 / -1; font-size: 18px; max-width: 60ch; line-height: 1.4; }
.r.open { height: auto; min-height: 150px; padding-top: 22px; padding-bottom: 22px; background: var(--field-1); color: #fff; align-content: center; row-gap: 12px; }
/* round 3: the open row keeps the rows' own size; the pink chip carries it, not a heading-sized title */
.r.open .r-f { color: var(--field-1-soft); }
.r.open .r-d { display: block; }

/* ---- who / MCP clients ---- */
.who-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--g); }
.who-head { grid-column: span 2; background: var(--field-1); padding: 24px; aspect-ratio: 3 / 1; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.who-head .head-s { font-size: clamp(2rem, 3vw, 3rem); }
.who-head p { max-width: 50ch; font-size: 17px; }
.who-t { background: var(--surface); padding: 24px; aspect-ratio: 3 / 2; display: flex; flex-direction: column; justify-content: space-between; transition: background-color .25s var(--ease); }
.who-t:hover { background: var(--surface-2); }
.nm { font-size: clamp(26px, 2.3vw, 34px); }
.who-t p:last-child { font-size: 16px; max-width: 26ch; }

/* ---- privacy ---- */
.priv-lead { margin: 24px 0 72px; max-width: 46ch; }
.priv-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; align-items: start; }
.priv-photo { grid-column: 1 / 9; position: relative; overflow: hidden; }
.priv-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.priv-over { position: absolute; top: 0; right: 0; width: 340px; padding: 20px; background: var(--field-2); color: var(--field-2-ink); font-size: 16px; }
.priv-side { grid-column: 9 / 13; display: flex; flex-direction: column; gap: 24px; }
.plan { background: var(--field-1); color: var(--field-1-soft); aspect-ratio: 16 / 10; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; }
.plan svg { width: 100%; height: auto; }
.plan p { color: #fff; font-weight: 600; font-size: 17px; }
.pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
.pairs dt { color: var(--muted); font-size: 15px; }
.pairs dd { font-size: 17px; font-weight: 500; line-height: 1.3; }

/* ---- early access ---- */
.cta { padding: 0; overflow: hidden; }
.cta-row { display: grid; grid-template-columns: 1fr 4fr 1fr; gap: 12px; height: 400px; margin: 0 -60px; }
.f1 { background: var(--surface); }
.f2 { background: var(--plum-3); }
.cta-main { background: var(--field-1); padding: 40px; display: grid; grid-template-columns: 1.3fr 1fr; column-gap: 48px; align-content: center; row-gap: 16px; }
.cta-main > :not(.cta-note) { grid-column: 1; }
.cta-main > p { font-size: 18px; max-width: 50ch; }
.cta-note { grid-column: 2; grid-row: 1 / span 4; align-self: center; background: var(--bg); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.cta-note .ls-app { color: var(--muted); }
.field { display: flex; width: min(540px, 100%); background: var(--field-2); }
.field input { flex: 1; min-width: 0; min-height: 52px; padding: 0 16px; border: 0; background: transparent; color: var(--field-2-ink); font-size: 17px; }
.field input::placeholder { color: #5d5560; }
.field input:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.wl-note { font-size: 15px; color: var(--field-1-soft); }
.wl-note.ok { color: #fff; font-weight: 600; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }  /* honeypot: people never see or fill it */

/* ---- footer: the name set large (round 1's block colonnade didn't read "Estoa" at a glance) ---- */
.foot { margin-top: 120px; background: var(--surface); padding: 48px var(--m) 24px; overflow: hidden; }
.foot-line { font-size: var(--step-lead); font-weight: 500; letter-spacing: -0.01em; max-width: 40ch; margin-top: 40px; }
.foot-mark { font-size: clamp(120px, 41vw, 680px); line-height: .82; letter-spacing: -0.06em; margin: 0 0 0 -0.04em; color: #fff; }
.foot-cols { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--g); margin-top: 56px; }
.foot-cols ul { grid-column: span 2; display: grid; gap: 8px; font-size: 16px; }
.foot-cols ul a { text-decoration: none; }
.foot-cols ul a:hover { text-decoration: underline; text-underline-offset: 3px; }
.credits { grid-column: 7 / 13; font-size: 15px; color: var(--muted); }
.foot-last { display: flex; justify-content: space-between; align-items: center; margin-top: 48px; font-size: 15px; color: var(--muted); }

/* ============================ MOTION ============================ */
.js [data-in] > * { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js [data-in].in > * { opacity: 1; transform: none; }
.js [data-in].in > *:nth-child(2) { transition-delay: .08s; }
.js [data-in].in > *:nth-child(3) { transition-delay: .16s; }
.js [data-in].in > *:nth-child(4) { transition-delay: .24s; }
.js [data-in].in > *:nth-child(5) { transition-delay: .32s; }
.js [data-in].in > *:nth-child(6) { transition-delay: .40s; }
.js [data-in].in > *:nth-child(7) { transition-delay: .48s; }
.js .shutter { clip-path: inset(0 100% 0 0); transform: scale(1.12); transition: clip-path 1.1s var(--ease), transform 1.6s var(--ease); }
.js .shutter.open { clip-path: inset(0 0 0 0); transform: scale(1); }
.js .rows .r { opacity: 0; transform: translateX(-24px); transition: opacity .5s var(--ease), transform .5s var(--ease), background-color .2s; }
.js .rows.in .r { opacity: 1; transform: none; }
.js .rows.in .r:nth-child(2) { transition-delay: .06s; } .js .rows.in .r:nth-child(3) { transition-delay: .12s; }
.js .rows.in .r:nth-child(4) { transition-delay: .18s; } .js .rows.in .r:nth-child(5) { transition-delay: .24s; }
.js .rows.in .r:nth-child(6) { transition-delay: .30s; } .js .rows.in .r:nth-child(7) { transition-delay: .36s; }
.js .rows.in .r:nth-child(8) { transition-delay: .42s; } .js .rows.in .r:nth-child(9) { transition-delay: .48s; }
.js .seg { transform: scaleX(.2); transform-origin: left; opacity: 0; transition: transform .9s var(--ease), opacity .5s; }
.js .bar.in .seg { transform: none; opacity: 1; }
.js .bar.in .seg:nth-child(2) { transition-delay: .1s; } .js .bar.in .seg:nth-child(3) { transition-delay: .2s; } .js .bar.in .seg:nth-child(4) { transition-delay: .3s; }
.js .hero .frame { opacity: 0; transform: translateY(32px); animation: in .9s var(--ease) forwards; }
.js .hero .ca .frame { animation-delay: .35s; } .js .hero .cb .frame { animation-delay: .45s; } .js .hero .cc .frame { animation-delay: .55s; }
.js .hero .frame:nth-child(2) { animation-delay: .6s; } .js .hero .frame:nth-child(3) { animation-delay: .75s; }
.js .panel-body > * { opacity: 0; transform: translateY(16px); animation: in .8s var(--ease) forwards; }
.js .panel-body > :nth-child(2) { animation-delay: .1s; } .js .panel-body > :nth-child(3) { animation-delay: .2s; }
.ui-wave i { animation: wave 1.4s ease-in-out infinite alternate; transform-origin: center; }
.ui-wave i:nth-child(2n) { animation-delay: -.4s; } .ui-wave i:nth-child(3n) { animation-delay: -.9s; }
@keyframes wave { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
.t-c img { animation: drift 24s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.12) translateY(-2%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-in] > *, .js .rows .r, .js .seg, .js .hero .frame, .js .panel-body > * { opacity: 1 !important; transform: none !important; }
  .js .shutter { clip-path: none; transform: none; }
  .term .line { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ============================ TABLET ============================ */
@media (max-width: 1100px) {
  .hero { height: auto; max-height: none; min-height: 0; grid-template-columns: 1fr; }
  .panel { grid-column: 1; min-height: 60svh; }
  .sheet { grid-column: 1; margin-top: 0; height: 560px; }
  .m-hide { display: none; }
  .phone-text, .demo { grid-column: 1 / -1; }
  .cells { grid-template-columns: 1fr 1fr; }
  .who-grid { grid-template-columns: repeat(2, 1fr); }
  .priv-photo, .priv-side { grid-column: 1 / -1; }
  .priv-side { display: grid; grid-template-columns: 1fr 1fr; }
  .cta-row { height: auto; }
}

/* ============================ PHONE ============================ */
@media (max-width: 640px) {
  :root { --m: 16px; --g: 6px; }
  main > section + section { margin-top: 112px; }
  .hero { gap: 8px; }
  .panel { min-height: 0; padding: 24px 20px; margin-bottom: 0; }
  .panel-body { padding: 32px 0 28px; }
  .wordmark { font-size: 24px; }
  .panel h1 { font-size: 48px; }
  .panel-lead { font-size: 18px; margin-top: 18px; }
  .panel-act .btn { width: 100%; }
  .panel-act { margin-top: 24px; }
  .panel-links { display: none; }  /* round 3: the anchor nav wrapped on phones; the page scrolls in order anyway */
  .panel-body { padding-bottom: 0; }
  /* three fragments, one column, in reading order: an ask, what needs you, the board */
  .sheet { display: flex; flex-direction: column; gap: 8px; height: auto; overflow: visible; }
  .col { display: contents; }
  .sheet .frame { width: 100%; }
  .m-hide, .ca .frame.photo { display: none; }
  .phone { margin-top: 96px; }
  .phone-text { padding: 0; }
  .demo { grid-template-columns: 1fr; }
  .lockscreen { min-height: 400px; }
  .tiles { grid-template-columns: 1fr 1fr; grid-template-rows: 46svh auto; }
  .t-a { grid-column: 1 / -1; grid-row: 1; }
  .slogan { font-size: 15vw; }
  .t-b, .t-c { grid-column: auto; grid-row: 2; aspect-ratio: 1; }
  .word { font-size: 17vw; }
  .t-text { display: block; padding: 0; }
  .t-img { display: block; height: 220px; min-height: 0; margin: 0; }
  .t-text p { padding: 20px; font-size: 18px; }
  .bar { flex-direction: column; height: auto; min-height: 0; }
  .seg { min-width: 0; min-height: max(112px, calc(var(--grow) * 46px)); flex: none; }
  .clause { position: static; margin-top: 6px; width: auto; min-width: 0; font-size: 16px; color: inherit; }
  .how { padding-bottom: 0; }
  .how .head { margin-bottom: 40px; font-size: 11vw; }
  .cells { grid-template-columns: 1fr; }
  .cell { height: auto; flex-direction: column !important; padding-bottom: 24px; }
  .cell .frag { margin: 0 !important; padding: 0 24px; }
  .frag .ui.big { width: 100%; }
  #board { padding-top: 64px; }
  .r { grid-template-columns: 1fr auto; height: 64px; padding: 0 14px; font-size: 20px; }
  .r .r-f { display: none; }
  .r.open { height: auto; min-height: 200px; padding: 20px 14px; }
  .r.open .r-f { display: block; font-size: 16px; grid-column: 1 / -1; }
  .r:nth-child(n+8) { display: none; }
  .who-head { grid-column: 1 / -1; aspect-ratio: auto; }
  .who-t { aspect-ratio: auto; min-height: 150px; gap: 16px; }
  .nm { font-size: 22px; }
  .priv-over { position: static; width: auto; }
  .priv-photo img { aspect-ratio: 4 / 3; }
  .priv-side { display: flex; }
  .cta-row { grid-template-columns: 1fr 1fr; margin: 0; padding: 0 var(--m); }
  .cta-main { grid-column: 1 / -1; padding: 24px 20px; display: flex; flex-direction: column; }
  .cta-main .head-s { font-size: 32px; }
  .cta-note { align-self: stretch; }
  .field { flex-direction: column; }
  .field .btn { width: 100%; }
  .flank { height: 96px; }
  .foot-mark { font-size: 40vw; }
  .foot-cols ul { grid-column: span 6; }
  .credits { grid-column: 1 / -1; margin-top: 24px; }
}