/* Nullix — home page. Shared tokens, cards and the phone shell live in site.css.
 * Radius scale: 10 (small tiles) · 14 (rows) · 20 (panels) · 28 (cards) · pill. */

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero { padding: clamp(48px, 7vw, 88px) 0 clamp(72px, 9vw, 120px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(32px, 5vw, 72px); }
.hero h1 { font-size: clamp(48px, 5.6vw, 76px); line-height: 1; letter-spacing: -.045em; }
.hero .lead { margin-top: 24px; max-width: 500px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero-note { margin-top: 22px; color: var(--ink-3); font-size: 15px; }

/* Two phones staggered like the two bubbles of the mark: Mira's upper-left,
 * Jonah's reply docked lower-right with a small gap. The front phone wears
 * the page's theme, the other one the opposite theme: both looks at once. */
.hero-art { --pw: 286px; --gap: 18px; position: relative; flex: none; width: calc(var(--pw) * 2 + var(--gap)); height: calc(var(--pw) * 2.4333); margin-left: auto; }
.hero-art .phone { --w: var(--pw); position: absolute; }
.hero-front { left: 0; top: 0; z-index: 2; animation: front-in .9s var(--ease) both; }
.hero-rear { left: calc(var(--pw) + var(--gap)); top: calc(var(--pw) * .3); z-index: 1; animation: rear-dock 1.15s cubic-bezier(.3, 1.35, .45, 1) .25s both; }
@keyframes front-in { from { opacity: 0; transform: scale(.96); } }
@keyframes rear-dock { from { opacity: 0; transform: translate(-28px, 36px); } }

@media (max-width: 1199px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { text-align: center; }
  .hero .lead { margin-inline: auto; }
  .cta-row { justify-content: center; }
  .hero-art { margin: 16px auto 0; --pw: min(300px, calc((100vw - var(--gutter) * 2 - var(--gap)) / 2)); }
}
/* On a phone-sized screen the pair would be too small to read: show Mira's. */
@media (max-width: 599px) {
  .hero-art { --pw: min(290px, calc(100vw - 64px)); width: var(--pw); height: calc(var(--pw) * 2.1333); }
  .hero-rear { display: none; }
  .hero h1 { font-size: clamp(42px, 12vw, 52px); }
}

/* ── Chat screen (replica of ChatScreen) ──────────────────────────────── */

.chat-top { position: relative; z-index: 2; display: flex; align-items: center; gap: .55em; padding: .15em .85em .7em; background: var(--a-surface); box-shadow: 0 1px 0 var(--a-line); }
.round { display: grid; place-items: center; flex: none; width: 2.6em; height: 2.6em; border-radius: 50%; background: var(--a-raised); color: var(--a-ink); box-shadow: 0 0 0 1px var(--a-line); }
.round svg { width: 1.15em; height: 1.15em; }
.chat-who { display: flex; align-items: center; gap: .55em; min-width: 0; flex: 1; }
.chat-who .avatar { width: 2.45em; height: 2.45em; font-size: .86em; }
.chat-name { font-weight: 600; font-size: 1.02em; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-sub { color: var(--a-ink3); font-size: .8em; }
.chat-sub.on { color: var(--a-accent); }
.pill-btns { display: flex; flex: none; gap: .1em; padding: 0 .3em; height: 2.6em; align-items: center; border-radius: 1.3em; background: var(--a-raised); box-shadow: 0 0 0 1px var(--a-line); }
.pill-btns span { display: grid; place-items: center; width: 2.1em; height: 2.1em; }
.pill-btns svg { width: 1.15em; height: 1.15em; }

.chat-body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: .38em; padding: .8em .8em .6em; background: var(--a-chat); overflow: hidden; }
.e2e { align-self: center; display: inline-flex; align-items: center; gap: .35em; margin-bottom: .5em; padding: .32em .75em; border-radius: 1em; background: var(--a-raised); color: var(--a-ink2); font-size: .74em; font-weight: 500; }
.e2e svg { width: 1.05em; height: 1.05em; color: var(--a-accent); }
.day { align-self: center; margin: .2em 0 .4em; color: var(--a-ink3); font-size: .72em; font-weight: 600; }
.bubble { position: relative; max-width: 78%; padding: .5em .8em .45em; border-radius: 1.25em; font-size: .97em; line-height: 1.32; letter-spacing: -.012em; }
.bubble.in { align-self: flex-start; background: var(--a-in); color: var(--a-ink); border-bottom-left-radius: .4em; }
.bubble.out { align-self: flex-end; background: var(--a-fill); color: #fff; border-bottom-right-radius: .4em; }
.bubble .meta { float: right; display: inline-flex; align-items: center; gap: .2em; margin: .45em 0 -.15em .6em; font-size: .7em; line-height: 1; opacity: .72; }
.bubble.out .meta { opacity: .9; }
.bubble .meta svg { width: 1.25em; height: 1.25em; }
.bubble.in + .bubble.in, .bubble.out + .bubble.out { margin-top: -.12em; }
.voice { display: flex; align-items: center; gap: .55em; min-width: 11em; }
.voice .play { display: grid; place-items: center; flex: none; width: 2.1em; height: 2.1em; border-radius: 50%; background: var(--a-fill); color: #fff; }
.bubble.out .voice .play { background: #fff; color: var(--a-fill); }
.voice .play svg { width: .95em; height: .95em; margin-left: .1em; }
.wave { display: flex; align-items: center; gap: .14em; height: 1.6em; flex: 1; }
.wave i { flex: 1; min-width: .12em; border-radius: .1em; background: currentColor; opacity: .38; }
.wave i.p { opacity: 1; }
.voice .len { font-size: .72em; opacity: .75; font-variant-numeric: tabular-nums; }

.composer { display: flex; align-items: center; gap: .5em; padding: .55em .8em 1.65em; background: var(--a-chat); }
.composer .round { width: 2.55em; height: 2.55em; }
.field { flex: 1; display: flex; align-items: center; gap: .55em; height: 2.55em; padding: 0 .55em 0 .95em; border-radius: 1.3em; background: var(--a-raised); color: var(--a-ink3); box-shadow: 0 0 0 1px var(--a-line); font-size: .95em; }
.field span { flex: 1; }
.field svg { width: 1.2em; height: 1.2em; color: var(--a-ink2); }

/* The last message of the hero arrives after the phones settle. */
.arrive { animation: arrive .55s cubic-bezier(.3, 1.4, .5, 1) 1.5s both; transform-origin: 100% 100%; }
.arrive.in { transform-origin: 0 100%; }
@keyframes arrive { from { opacity: 0; transform: scale(.6) translateY(.6em); } }

/* ── Server: what travels between you ─────────────────────────────────── */

.wire { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1.25fr) 64px minmax(0, 1fr); align-items: center; padding: clamp(20px, 3vw, 40px); }
.peer { display: grid; gap: 14px; align-content: start; }
.peer-label { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 13px; font-weight: 600; }
.peer-label .avatar { width: 28px; height: 28px; font-size: 11px; letter-spacing: 0; }
.peer .bubble { max-width: 100%; font-size: 17px; overflow-wrap: anywhere; }
.peer .bubble.in { background: var(--inner); color: var(--ink); }
.peer .bubble.out { background: var(--accent-fill); }
.peer .bubble .meta { font-size: 12px; }
.peer .bubble.pop { animation: arrive .5s cubic-bezier(.3, 1.4, .5, 1) both; }
.peer .bubble.out.pop { transform-origin: 100% 100%; }
.peer .bubble.in.pop { transform-origin: 0 100%; }
.peer-note { color: var(--ink-3); font-size: 14px; }
.compose-live { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 18px; border-radius: 999px; background: var(--inner); box-shadow: inset 0 0 0 1px var(--line); }
.compose-live input { flex: 1; min-width: 0; height: 44px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 16px; outline: none; }
.compose-live input::placeholder { color: var(--ink-3); }
.compose-live:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
.send { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--accent-fill); color: #fff; cursor: pointer; }
.send svg { width: 20px; height: 20px; }
.send:hover { background: var(--accent-press); }

.link-line { position: relative; height: 2px; margin: 0 6px; background-image: linear-gradient(90deg, var(--line-strong) 50%, transparent 0); background-size: 8px 2px; }
.link-line i { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--rear); opacity: 0; }
.wire.sending .link-line.l1 i { animation: travel .7s var(--ease) both; }
.wire.sending .link-line.l2 i { animation: travel .7s var(--ease) .75s both; }
@keyframes travel { 0% { left: 0; opacity: 0; } 15%, 80% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

.envelope { padding: 20px 22px; border-radius: 20px; background: var(--band); color: var(--band-ink); font-family: var(--mono); font-size: 13px; line-height: 1.5; letter-spacing: 0; }
.env-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid rgba(245, 246, 250, .12); font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: -.005em; }
.env-head .mark { width: 20px; height: 20px; --mk-front: #F5F6FA; --mk-rear: #737FFF; }
.env-head span { display: inline-flex; align-items: center; gap: 8px; }
.env-head small { color: rgba(245, 246, 250, .58); font-family: var(--mono); font-weight: 400; font-size: 12px; }
.env-row { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 3px 0; }
.env-row dt { color: rgba(245, 246, 250, .55); }
.env-row dd { margin: 0; overflow-wrap: anywhere; }
.env-row .sealed { color: #9AA3FF; }
.env-body dd { color: rgba(245, 246, 250, .8); max-height: 7.5em; overflow: hidden; }
.env-row .flash { animation: flash .6s ease-out; }
@keyframes flash { from { color: #9AA3FF; } }
.wire-note { margin-top: 14px; color: var(--ink-3); font-size: 14px; text-align: center; }

.ledger { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
.ledger .card { padding: clamp(24px, 3vw, 36px); }
.ledger h3 { font-size: 22px; letter-spacing: -.025em; }
.ledger ul { display: grid; gap: 18px; margin: 22px 0 0; padding: 0; list-style: none; }
.ledger li { display: grid; gap: 3px; padding-top: 16px; border-top: 1px solid var(--line); }
.ledger li b { color: var(--ink); font-weight: 600; letter-spacing: -.015em; }
.ledger li span { color: var(--ink-2); font-size: 15px; }
.ledger-note { margin-top: 16px; color: var(--ink-3); font-size: 14px; }

@media (max-width: 900px) {
  .wire { grid-template-columns: 1fr; gap: 0; }
  .link-line { width: 2px; height: 40px; margin: 6px auto; background-image: linear-gradient(180deg, var(--line-strong) 50%, transparent 0); background-size: 2px 8px; }
  .link-line i { left: 50%; top: 0; margin: -5px 0 0 -5px; }
  .wire.sending .link-line i { animation-name: travel-v; }
  @keyframes travel-v { 0% { top: 0; opacity: 0; } 15%, 80% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
  .ledger { grid-template-columns: 1fr; }
}

/* ── Identity ─────────────────────────────────────────────────────────── */

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.points { display: grid; gap: 0; margin: 40px 0 0; }
.points > div { padding: 18px 0; border-top: 1px solid var(--line); }
.points dt { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.points dd { margin: 4px 0 0; color: var(--ink-2); font-size: 16px; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.id-stack { display: grid; gap: 16px; }
.id-card { padding: clamp(24px, 3vw, 36px); }
.id-label { color: var(--ink-3); font-size: 13px; font-weight: 600; }
.id-value { margin-top: 12px; font-family: var(--mono); font-size: clamp(22px, 2.9vw, 34px); font-weight: 600; letter-spacing: .02em; line-height: 1.2; overflow-wrap: anywhere; }
.id-value .ch { display: inline-block; }
.id-value .ch.roll { animation: roll .42s var(--ease) both; }
@keyframes roll { from { opacity: 0; transform: translateY(.4em); } }
.id-note { margin-top: 12px; color: var(--ink-3); font-size: 15px; }
.id-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 22px; }
.id-steps { color: var(--ink-3); font-family: var(--mono); font-size: 13px; letter-spacing: 0; }

.phrase-card { position: relative; padding: clamp(24px, 3vw, 32px); overflow: hidden; }
.phrase-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.phrase-tag { color: var(--ink-3); font-size: 13px; }
.text-btn { min-height: 32px; padding: 0 4px; border: 0; background: none; color: var(--accent); font-size: 14px; font-weight: 600; cursor: pointer; }
.phrase-card:not(.hidden) .phrase-tag { display: none; }
.phrase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: w; transition: filter .45s var(--ease), opacity .45s var(--ease); }
.phrase-grid li { counter-increment: w; display: flex; align-items: baseline; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--inner); font-weight: 500; font-size: 15px; }
.phrase-grid li::before { content: counter(w); color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; min-width: 14px; }
.phrase-card.hidden .phrase-grid { filter: blur(7px); opacity: .7; user-select: none; }
.phrase-cover { position: absolute; inset: 64px 20px 20px; display: grid; place-items: center; align-content: center; gap: 14px; text-align: center; transition: opacity .3s; }
.phrase-cover p { max-width: 300px; color: var(--ink-2); font-size: 15px; }
.phrase-card:not(.hidden) .phrase-cover { opacity: 0; pointer-events: none; }
@media (max-width: 420px) { .phrase-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Features ─────────────────────────────────────────────────────────── */

.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.cell { display: flex; flex-direction: column; gap: 28px; min-height: 300px; padding: 28px; overflow: hidden; }
.cell h3 { font-size: 21px; letter-spacing: -.025em; line-height: 1.2; }
.cell p { margin-top: 6px; max-width: 460px; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.cell .show { margin-top: auto; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.c4 { grid-column: span 4; } .c5 { grid-column: span 5; } .c6 { grid-column: span 6; } .c7 { grid-column: span 7; }
@media (max-width: 1023px) { .c4, .c5 { grid-column: span 6; } .c6, .c7 { grid-column: span 12; } }
@media (max-width: 640px) { .bento > * { grid-column: 1 / -1 !important; } .cell { min-height: 0; } }

/* Feature cells reuse app parts at page scale. */
.cell .bubble { font-size: 15px; max-width: 92%; }
.cell .bubble.in { background: var(--inner); color: var(--ink); }
.cell .bubble.out { background: var(--accent-fill); }
.cell .bubble .meta { font-size: 12px; }
.cell .voice .play { background: var(--accent-fill); }
.transcript { align-self: flex-start; max-width: 92%; padding: 10px 14px; border-radius: 14px; background: var(--accent-soft); color: var(--ink); font-size: 15px; }
.transcript small { display: block; margin-bottom: 2px; color: var(--accent); font-size: 12px; font-weight: 600; }
.chipline { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--inner); color: var(--ink); font-size: 14px; font-weight: 600; }
.chip.sel { background: var(--ink); color: var(--bg); }
.chip svg { width: 16px; height: 16px; }
.ttl-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--inner); color: var(--ink-2); font-size: 13px; font-weight: 500; }
.ttl-pill svg { width: 16px; height: 16px; color: var(--accent); }
.once-photo { position: relative; overflow: hidden; border-radius: 20px; aspect-ratio: 16 / 9; background: #C9D3E6; }
.once-pic { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); filter: blur(14px); }
.once-label { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 16px; background: rgba(17, 21, 32, .55); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.once-label .ring { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .9); font-size: 13px; font-weight: 700; }
.once-label b { display: block; font-size: 14px; }
.once-label span { color: rgba(255, 255, 255, .8); font-size: 12px; }
.mini-rows { display: grid; gap: 2px; margin-top: 6px; padding: 6px 12px; border-radius: 20px; background: var(--inner); }
.mini-rows > div { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; padding: 8px 0; }
.mini-rows > div + div { box-shadow: 0 -1px 0 var(--line); }
.mini-rows .avatar { width: 36px; height: 36px; font-size: 13px; --a-raised: var(--inner); }
.mini-rows b { display: block; font-size: 14px; font-weight: 600; }
.mini-rows > div > div { min-width: 0; }
.mini-rows > div > div span { display: block; color: var(--ink-3); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.once { display: flex; align-items: center; gap: 12px; align-self: flex-start; padding: 12px 18px 12px 12px; border-radius: 20px; background: var(--inner); }
.once .ring { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 2px dashed var(--accent); color: var(--accent); font-size: 14px; font-weight: 700; }
.once b { display: block; font-size: 15px; }
.once span { color: var(--ink-3); font-size: 13px; }
.poll { padding: 16px; border-radius: 20px; background: var(--inner); }
.poll b { display: block; font-size: 16px; letter-spacing: -.02em; }
.poll small { color: var(--ink-3); font-size: 12px; }
.poll-opt { position: relative; display: flex; justify-content: space-between; margin-top: 8px; padding: 9px 12px; border-radius: 10px; overflow: hidden; font-size: 14px; font-weight: 500; }
.poll-opt::before { content: ""; position: absolute; inset: 0; width: var(--v); background: var(--accent-soft); }
.poll-opt span { position: relative; }
.call-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.call-grid div { display: grid; place-items: center; aspect-ratio: 1; border-radius: 14px; background: var(--band); }
.call-grid .avatar { width: 46%; height: 46%; font-size: 15px; }
.call-grid div.speaking { box-shadow: inset 0 0 0 2px var(--rear); }
.call-bar { display: flex; justify-content: center; gap: 12px; margin-top: 6px; }
.call-bar span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--inner); color: var(--ink); }
.call-bar span.hang { background: #E5383B; color: #fff; }
.call-bar svg { width: 20px; height: 20px; }
.call-bar span.hang svg { width: 26px; height: 26px; }
.photo-meta { display: grid; gap: 6px; }
.photo-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: 14px; background: var(--inner); font-size: 14px; }
.photo-row s { color: var(--ink-3); text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 56% / 100% 1.5px; }
.photo-row b { color: var(--green); font-size: 13px; font-weight: 600; }
.later { display: grid; gap: 6px; }
.later div { display: flex; justify-content: space-between; padding: 11px 14px; border-radius: 14px; background: var(--inner); font-size: 14px; font-weight: 500; }
.later div.sel { box-shadow: inset 0 0 0 2px var(--accent); }
.later small { color: var(--ink-3); font-weight: 400; }
.file-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--inner); }
.file-row .tile { width: 36px; height: 36px; border-radius: 10px; }
.file-row .tile svg { width: 20px; height: 20px; }
.file-row b { display: block; font-size: 14px; font-weight: 600; }
.file-row span { color: var(--ink-3); font-size: 13px; }
.cell .bubble.out { align-self: flex-end; }

.also { display: grid; grid-template-columns: 240px 1fr; gap: 24px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line-strong); }
.also h3 { font-size: 17px; letter-spacing: -.02em; }
.also ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 24px; margin: 0; padding: 0; list-style: none; color: var(--ink-2); font-size: 15px; }
@media (max-width: 900px) { .also { grid-template-columns: 1fr; } .also ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Protection ───────────────────────────────────────────────────────── */

.guard { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "phone head" "phone ctrl" "phone list"; column-gap: clamp(40px, 6vw, 96px); align-items: start; align-content: center; }
.guard-phone { grid-area: phone; align-self: center; --w: 300px; }
.guard-head { grid-area: head; margin-bottom: 32px; }
.guard-ctrl { grid-area: ctrl; }
.seg { display: inline-grid; grid-auto-flow: column; gap: 4px; padding: 4px; border-radius: 14px; background: var(--bg-alt); }
.seg button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.seg button:hover { color: var(--ink); }
.seg button[aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(17, 21, 32, .08), 0 0 0 1px var(--line); }
.guard-text { margin-top: 24px; min-height: 100px; }
.guard-text h3 { font-size: 22px; letter-spacing: -.025em; }
.guard-text p { margin-top: 6px; color: var(--ink-2); font-size: 17px; max-width: 520px; }
.guard-list { grid-area: list; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin: 28px 0 0; }
.guard-list > div { padding: 18px 0; border-top: 1px solid var(--line); }
.guard-list dt { font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.guard-list dd { margin: 4px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
@media (max-width: 1023px) {
  /* Controls above the phone, so a tap shows its result right below. */
  .guard { grid-template-columns: 1fr; grid-template-areas: "head" "ctrl" "phone" "list"; }
  .guard-phone { justify-self: center; margin-top: 8px; }
  .guard-text { min-height: 0; margin: 20px 0 28px; }
}
@media (max-width: 640px) {
  .seg { display: grid; grid-auto-flow: row; width: 100%; }
  .guard-list { grid-template-columns: 1fr; }
  .guard-phone { --w: min(280px, calc(100vw - 64px)); }
}

/* Screens inside the protection phone. */
.views { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.view { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; transform: scale(.985); transition: opacity .35s var(--ease), transform .35s var(--ease); pointer-events: none; }
.view.on { opacity: 1; transform: none; }
.list-top { display: flex; align-items: center; gap: .5em; padding: .15em .85em .55em; }
.search { flex: 1; display: flex; align-items: center; gap: .45em; height: 2.6em; padding: 0 .9em; border-radius: 1.3em; background: var(--a-raised); color: var(--a-ink3); box-shadow: 0 0 0 1px var(--a-line); font-size: .95em; }
.search svg { width: 1.1em; height: 1.1em; }
.compose-btn { display: grid; place-items: center; flex: none; width: 2.6em; height: 2.6em; border-radius: 50%; background: var(--a-fill); color: #fff; }
.compose-btn svg { width: 1.15em; height: 1.15em; }
.chips { display: flex; gap: .4em; padding: .1em .85em .55em; }
.chips span { padding: .38em .85em; border-radius: 1em; background: var(--a-raised); color: var(--a-ink); font-size: .8em; font-weight: 600; box-shadow: 0 0 0 1px var(--a-line); }
.chips span.sel { background: var(--a-ink); color: var(--a-bg); box-shadow: none; }
.rows { flex: 1; background: var(--a-list); overflow: hidden; }
.row { display: grid; grid-template-columns: auto 1fr; gap: .7em; align-items: center; padding: .6em .85em; }
.row .avatar { width: 3.3em; height: 3.3em; font-size: 1em; }
.row-main { min-width: 0; padding-bottom: .55em; margin-bottom: -.55em; border-bottom: 1px solid var(--a-line); }
.row:last-child .row-main { border-bottom: 0; }
.row-top { display: flex; justify-content: space-between; gap: .5em; }
.row-name { font-weight: 600; font-size: .98em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-time { flex: none; color: var(--a-ink3); font-size: .74em; }
.row-bottom { display: flex; justify-content: space-between; gap: .6em; margin-top: .12em; }
.row-text { color: var(--a-ink2); font-size: .86em; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.badge { display: grid; place-items: center; flex: none; min-width: 1.55em; height: 1.55em; padding: 0 .4em; border-radius: .8em; background: var(--a-fill); color: #fff; font-size: .72em; font-weight: 700; align-self: center; }
.tabbar { position: absolute; left: .8em; right: .8em; bottom: 1.3em; display: grid; grid-template-columns: repeat(4, 1fr); padding: .3em; border-radius: 2em; background: var(--a-glass); box-shadow: 0 0 0 1px var(--a-line), 0 .5em 1.5em -.6em rgba(0, 0, 0, .25); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.tabbar span { display: grid; justify-items: center; gap: .15em; padding: .4em 0 .35em; border-radius: 1.6em; color: var(--a-ink); font-size: .62em; font-weight: 500; }
.tabbar span.sel { background: color-mix(in srgb, var(--a-ink) 8%, transparent); font-weight: 600; }
.tabbar svg { width: 2.2em; height: 2.2em; }
.empty { flex: 1; display: grid; align-content: center; justify-items: center; gap: .6em; padding: 0 1.6em 5em; text-align: center; background: var(--a-bg); }
.empty .tile { width: 3.9em; height: 3.9em; border-radius: 50%; }
.empty b { margin-top: .4em; font-size: 1.08em; letter-spacing: -.02em; }
.empty p { color: var(--a-ink2); font-size: .88em; line-height: 1.4; }
.app-btn { display: grid; place-items: center; width: 100%; height: 3.1em; margin-top: .35em; border-radius: 1.55em; background: var(--a-fill); color: #fff; font-weight: 600; font-size: .95em; }
.app-btn.quiet { background: var(--a-raised); color: var(--a-ink); box-shadow: 0 0 0 1px var(--a-line); }
.welcome { flex: 1; display: grid; align-content: center; justify-items: center; gap: .7em; padding: 0 1.5em 2.5em; text-align: center; background: var(--a-bg); }
.welcome .mark { width: 4.6em; height: 4.6em; margin-bottom: .6em; --mk-front: var(--a-ink); --mk-rear: var(--a-rear); }
.welcome b { font-size: 1.32em; line-height: 1.15; letter-spacing: -.03em; }
.welcome p { color: var(--a-ink2); font-size: .88em; line-height: 1.4; }
.welcome .btns { width: 100%; margin-top: 1.4em; }

/* ── Reach ────────────────────────────────────────────────────────────── */

.reach { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; }
.reach .card { padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 28px; }
.reach h3 { font-size: 22px; letter-spacing: -.025em; }
.reach .card > div:last-child p { margin-top: 6px; color: var(--ink-2); font-size: 16px; }
.request { padding: 18px; border-radius: 20px; background: var(--inner); }
.request-head { display: flex; align-items: center; gap: 12px; }
.request-head .avatar { width: 44px; height: 44px; font-size: 15px; }
.request-head b { display: block; font-size: 16px; letter-spacing: -.015em; }
.request-head span { color: var(--ink-3); font-size: 13px; font-family: var(--mono); letter-spacing: 0; }
.request p { margin-top: 14px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.request-held { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: var(--inner-2, var(--tile)); color: var(--ink-3); font-size: 13px; }
.request-held svg { width: 18px; height: 18px; flex: none; }
.request-btns { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 8px; margin-top: 14px; }
.request-btns span { display: grid; place-items: center; height: 40px; border-radius: 20px; background: var(--inner-2, var(--tile)); font-size: 14px; font-weight: 600; }
.request-btns .danger { color: var(--red); }
.request-btns .go { background: var(--accent-fill); color: #fff; }
.who { border-radius: 20px; background: var(--inner); overflow: hidden; }
.who-row { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 12px; padding: 13px 16px; font-size: 15px; font-weight: 500; }
.who-row + .who-row { box-shadow: 0 -1px 0 var(--line); }
.who-row .tile { --a-raised: var(--inner); width: 32px; height: 32px; border-radius: 10px; }
.who-row .tile svg { width: 18px; height: 18px; }
.who-row em { color: var(--ink-3); font-style: normal; display: inline-flex; align-items: center; gap: 4px; }
.who-row em::after { content: "›"; font-size: 20px; line-height: 1; color: var(--ink-3); opacity: .7; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; margin: 40px 0 0; }
.facts > div { padding-top: 18px; border-top: 1px solid var(--line-strong); }
.facts dt { font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.facts dd { margin: 4px 0 0; color: var(--ink-2); font-size: 15px; }
@media (max-width: 900px) { .reach { grid-template-columns: 1fr; } .facts { grid-template-columns: 1fr; gap: 20px; } }

/* ── Connection (dark band in both themes) ────────────────────────────── */

.band { background: var(--band); color: var(--band-ink); --line-strong: rgba(245, 246, 250, .16); }
.band .lead { color: rgba(245, 246, 250, .74); }
.band .h-section { color: #F5F6FA; }
.band .section-head { max-width: 820px; }
.net { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.net-steps { display: grid; gap: 28px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.net-steps li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; gap: 16px; }
.net-steps li::before { content: counter(s); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(245, 246, 250, .25); color: #F5F6FA; font-size: 15px; font-weight: 600; }
.net-steps h3 { font-size: 19px; letter-spacing: -.02em; color: #F5F6FA; line-height: 1.3; }
.net-steps p { margin-top: 4px; color: rgba(245, 246, 250, .72); font-size: 16px; }
.net-steps code { font-family: var(--mono); font-size: 14px; color: #C3C8FF; overflow-wrap: anywhere; }
.net-card { padding: 22px; border-radius: 28px; background: #191E2B; color: #F5F6FA; font-size: 15px; }
.net-title { margin: 2px 4px 14px; font-size: 20px; font-weight: 700; letter-spacing: -.025em; }
.net-group-label { margin: 18px 4px 8px; color: rgba(245, 246, 250, .58); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.net-title + .net-group-label { margin-top: 4px; }
.net-group { border-radius: 14px; background: #232837; overflow: hidden; }
.net-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; }
.net-row + .net-row { box-shadow: 0 -1px 0 rgba(245, 246, 250, .08); }
.net-row .v { color: rgba(245, 246, 250, .62); }
.net-row .ok { display: inline-flex; align-items: center; gap: 8px; color: #F5F6FA; }
.net-row .ok::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22C55E; }
.net-row .host { font-family: var(--mono); font-size: 14px; letter-spacing: 0; }
.net-row .use { color: #9AA3FF; font-size: 13px; font-weight: 600; }
.net-row.add { color: #9AA3FF; font-weight: 500; }
.net-foot { margin: 8px 4px 0; color: rgba(245, 246, 250, .58); font-size: 13px; line-height: 1.45; }
@media (max-width: 900px) { .net { grid-template-columns: 1fr; } }

/* ── Under the hood ───────────────────────────────────────────────────
 * Layers read like a spec sheet: the layer name stays in view on the left
 * while its items run down the right in two columns. */

/* Layers: one grouped list, like a Settings screen. Each row previews its
 * contents; a click opens it (one at a time), the rest stay folded. */
.layers { padding: 6px 0; overflow: hidden; }
.layer + .layer { border-top: 1px solid var(--line); }
.layer summary { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 20px; align-items: center; gap: 18px; padding: 20px clamp(18px, 3vw, 32px); cursor: pointer; list-style: none; border-radius: 20px; transition: background-color .2s ease; }
.layer summary::-webkit-details-marker { display: none; }
.layer summary:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.layer summary:focus-visible { outline-offset: -2px; }
.layer summary .tile { width: 44px; height: 44px; border-radius: 12px; }
.layer summary .tile svg { width: 24px; height: 24px; }
.layer-title { min-width: 0; }
.layer-title b { display: block; font-size: 21px; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; }
.layer-title span { display: block; margin-top: 3px; color: var(--ink-3); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layer-count { display: grid; place-items: center; min-width: 30px; height: 26px; padding: 0 9px; border-radius: 999px; background: var(--inner); color: var(--ink-2); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chev { width: 10px; height: 10px; margin: 0 auto; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: translateY(-3px) rotate(45deg); transition: transform .3s var(--ease); }
.layer[open] .chev { transform: translateY(2px) rotate(225deg); }
.layer[open] .layer-title span { white-space: normal; }
.layer-body { padding: 0 clamp(18px, 3vw, 32px) 24px calc(clamp(18px, 3vw, 32px) + 62px); }
.layer-items { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin: 0; }
.layer-items > div { padding: 16px 0 18px; border-top: 1px solid var(--line); }
.layer-items dt { font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.layer-items dd { margin: 4px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
@media (max-width: 760px) {
  .layer summary { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; }
  .layer summary .tile { width: 40px; height: 40px; }
  .layer-title b { font-size: 19px; }
  .layer-title span { white-space: normal; font-size: 14px; }
  .chev { display: none; }
  .layer-body { padding-left: clamp(18px, 3vw, 32px); }
  .layer-items { grid-template-columns: 1fr; }
}

.verify { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px clamp(32px, 5vw, 72px); align-items: center; margin-top: clamp(32px, 4vw, 48px); padding: clamp(24px, 3.4vw, 44px); }
.verify h3 { font-size: 26px; letter-spacing: -.03em; }
.verify-copy > p:first-of-type { margin-top: 10px; color: var(--ink-2); font-size: 17px; }
.checks { margin: 0; padding: 0; list-style: none; border-radius: 20px; background: var(--inner); overflow: hidden; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 12px 16px; font-size: 14px; line-height: 1.4; }
.checks li + li { box-shadow: 0 -1px 0 var(--line); }
.checks svg { width: 20px; height: 20px; color: var(--green); }
.checks .total { font-weight: 600; color: var(--green); }
.path { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; color: var(--ink-3); font-size: 14px; font-weight: 500; }
.path span::after { content: " ›"; }
.path span:last-child::after { content: ""; }
.limits-link { margin-top: 14px; }
@media (max-width: 900px) { .verify { grid-template-columns: 1fr; } }

/* ── FAQ ──────────────────────────────────────────────────────────────── */

.faq-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px clamp(40px, 6vw, 96px); align-items: start; }
.faq-wrap .h-section { position: sticky; top: 104px; }
.faq { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: translateY(-3px) rotate(45deg); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: translateY(2px) rotate(225deg); }
.faq summary:hover { color: var(--accent); }
.faq .a { padding: 0 48px 24px 0; color: var(--ink-2); font-size: 17px; }
.faq .a p + p { margin-top: 10px; }
@media (max-width: 900px) { .faq-wrap { grid-template-columns: 1fr; } .faq-wrap .h-section { position: static; } .faq .a { padding-right: 0; } }

/* ── Get ──────────────────────────────────────────────────────────────── */

.get-mark { width: 72px; height: 72px; margin-bottom: 8px; }
.get { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 920px; margin: 0 auto; }
.get .card { display: flex; flex-direction: column; gap: 18px; padding: clamp(28px, 3.4vw, 40px); }
.get .tile { width: 48px; height: 48px; border-radius: 14px; }
.get .tile svg { width: 26px; height: 26px; }
.get h3 { font-size: 26px; letter-spacing: -.03em; }
.get p { margin-top: 6px; color: var(--ink-2); font-size: 16px; }
.get .btn { align-self: flex-start; margin-top: auto; }
.get-note { margin-top: 24px; color: var(--ink-3); font-size: 15px; text-align: center; }
@media (max-width: 760px) { .get { grid-template-columns: 1fr; } }


/* ── Motion ───────────────────────────────────────────────────────────
 * Decoration only: without JS, or with reduced motion, every element shows
 * its final state. Curves follow the app (soft ease-out, one spring for
 * things that "dock"). Nothing glows, nothing loops for attention except
 * the live parts of the replicas (typing dots, active speaker). */

/* Typing dots (Jonah's phone, while Mira writes). Hidden unless animated. */
.hero-rear .chat-body { position: relative; }
.typing { position: absolute; left: .8em; bottom: .6em; display: inline-flex; gap: .25em; padding: .72em .85em; border-radius: 1.25em; border-bottom-left-radius: .4em; background: var(--a-in); opacity: 0; }
.typing i { width: .42em; height: .42em; border-radius: 50%; background: var(--a-ink3); }

/* Segmented control: one pill that slides between options (JS places it). */
.seg { position: relative; isolation: isolate; }
.seg-pill { position: absolute; z-index: -1; left: 0; top: 0; width: 0; height: 0; border-radius: 10px; background: var(--card); box-shadow: 0 1px 2px rgba(17, 21, 32, .08), 0 0 0 1px var(--line); opacity: 0; }
.seg.ready .seg-pill { opacity: 1; }
.seg.ready button[aria-selected="true"] { background: none; box-shadow: none; }

/* Connection: the status settles from "Connecting…" to the route in use. */
.net-row .ok.wait { color: rgba(245, 246, 250, .62); }
.net-row .ok.wait::before { background: #E8B34B; }

/* Encryption check: rows tick one by one, like the screen in the app. */
.js .checks.pending li { opacity: .4; }
.js .checks.pending li svg { color: var(--line-strong); }
.checks li.ok, .js .checks.pending li.ok { opacity: 1; }
.checks li.ok svg, .js .checks.pending li.ok svg { color: var(--green); }

@media (prefers-reduced-motion: no-preference) {
  /* Scroll reveal. Items that enter together are staggered by JS. */
  .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .js .reveal.seen { opacity: 1; transform: none; }

  /* Hero: the phones dock, then the conversation plays out on both. */
  .hero-art .seq0 { animation: fade-in .5s var(--ease) .55s both; }
  .hero-art .bubble[style*="--i"] { animation: msg-in .5s cubic-bezier(.2, .9, .3, 1.15) both; animation-delay: calc(.55s + var(--i) * .17s); }
  .hero-rear .bubble[style*="--i"] { animation-delay: calc(.68s + var(--i) * .17s); }
  .hero-art .bubble.out { transform-origin: 100% 100%; }
  .hero-art .bubble.in { transform-origin: 0 100%; }
  .hero-rear .typing { animation: typing-life 1.25s var(--ease) 1.95s both; }
  .hero-rear .typing i { animation: dot 1s ease-in-out infinite; }
  .hero-rear .typing i:nth-child(2) { animation-delay: .15s; }
  .hero-rear .typing i:nth-child(3) { animation-delay: .3s; }
  .hero-front .arrive { animation-delay: 2.95s; }
  .hero-rear .arrive { animation-delay: 3.12s; }

  /* Segmented pill glides. */
  .seg.ready .seg-pill { transition: transform .5s cubic-bezier(.3, 1.25, .4, 1), width .5s cubic-bezier(.3, 1.25, .4, 1), height .5s var(--ease); }
  .guard-text > div:not([hidden]) { animation: fade-up .45s var(--ease) both; }

  /* Feature replicas come alive when their card appears. */
  .js .cell:not(.seen) .wave i.p { opacity: .38; }
  .cell.seen .wave i.p { animation: bar-fill .25s ease-out both; }
  .cell.seen .wave i.p:nth-child(1) { animation-delay: .55s; }
  .cell.seen .wave i.p:nth-child(2) { animation-delay: .67s; }
  .cell.seen .wave i.p:nth-child(3) { animation-delay: .79s; }
  .cell.seen .wave i.p:nth-child(4) { animation-delay: .91s; }
  .cell.seen .wave i.p:nth-child(5) { animation-delay: 1.03s; }
  .cell.seen .transcript { animation: fade-up .6s var(--ease) 1.2s both; }
  .cell.seen .ttl-pill { animation: fade-up .5s var(--ease) .35s both; }
  .cell.seen .chipline .chip { animation: fade-up .45s var(--ease) both; }
  .cell.seen .chipline .chip:nth-child(1) { animation-delay: .45s; }
  .cell.seen .chipline .chip:nth-child(2) { animation-delay: .52s; }
  .cell.seen .chipline .chip:nth-child(3) { animation-delay: .59s; }
  .cell.seen .chipline .chip:nth-child(4) { animation-delay: .66s; }
  .cell.seen .poll-opt::before { animation: grow 1s var(--ease) both; }
  .cell.seen .poll-opt:nth-of-type(1)::before { animation-delay: .5s; }
  .cell.seen .poll-opt:nth-of-type(2)::before { animation-delay: .62s; }
  .cell.seen .poll-opt:nth-of-type(3)::before { animation-delay: .74s; }
  .cell.seen .photo-row s { animation: strike .6s var(--ease) both; }
  .cell.seen .photo-row b { animation: fade-in .4s ease both; }
  .cell.seen .photo-row:nth-child(1) s { animation-delay: .5s; } .cell.seen .photo-row:nth-child(1) b { animation-delay: 1s; }
  .cell.seen .photo-row:nth-child(2) s { animation-delay: .75s; } .cell.seen .photo-row:nth-child(2) b { animation-delay: 1.25s; }
  .cell.seen .photo-row:nth-child(3) s { animation-delay: 1s; } .cell.seen .photo-row:nth-child(3) b { animation-delay: 1.5s; }
  .cell.seen .later div.sel { animation: select-ring 1.2s var(--ease) .5s both; }
  .cell.seen .mini-rows > div { animation: fade-up .5s var(--ease) both; }
  .cell.seen .mini-rows > div:nth-child(1) { animation-delay: .7s; }
  .cell.seen .mini-rows > div:nth-child(2) { animation-delay: .82s; }
  .cell.seen .file-row { animation: fade-up .5s var(--ease) .7s both; }
  .cell.seen .once-label { animation: fade-up .5s var(--ease) .6s both; }
  /* Active speaker moves around the call, as voices take turns. */
  .call-grid div.speaking { box-shadow: none; }
  .call-grid div { animation: speaker 6.4s steps(1, end) infinite; }
  .call-grid div:nth-child(2) { animation-delay: 1.6s; }
  .call-grid div:nth-child(3) { animation-delay: 3.2s; }
  .call-grid div:nth-child(4) { animation-delay: 4.8s; }

  /* Encryption check rows. */
  .checks li { transition: opacity .3s ease; }
  .checks li svg { transition: color .25s ease, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
  .js .checks.pending li svg { transform: scale(.8); }
  .checks li.ok svg, .js .checks.pending li.ok svg { transform: none; }

  /* Connection status. */
  .net-row .ok.wait::before { animation: blink 1s ease-in-out infinite; }
  .net-row .ok.settled { animation: fade-in .4s ease both; }

  /* The closing mark docks like the app's launch: the front bubble, then the reply. */
  .get-mark .mk-f, .get-mark .mk-r { transform-box: fill-box; transform-origin: 50% 50%; }
  .js .get-mark:not(.seen) .mk-f, .js .get-mark:not(.seen) .mk-r { opacity: 0; }
  .get-mark.seen .mk-f { animation: mk-front .55s cubic-bezier(.2, .9, .3, 1) .15s both; }
  .get-mark.seen .mk-r { animation: mk-rear .95s cubic-bezier(.3, 1.45, .45, 1) .4s both; }
  .js .get-mark.reveal { transform: none; }

  /* Opening a layer: its items rise in one after another. */
  .layer[open] .layer-items > div { animation: fade-up .45s var(--ease) both; }
  .layer[open] .layer-items > div:nth-child(1) { animation-delay: .04s; } .layer[open] .layer-items > div:nth-child(2) { animation-delay: .08s; }
  .layer[open] .layer-items > div:nth-child(3) { animation-delay: .12s; } .layer[open] .layer-items > div:nth-child(4) { animation-delay: .16s; }
  .layer[open] .layer-items > div:nth-child(5) { animation-delay: .2s; } .layer[open] .layer-items > div:nth-child(6) { animation-delay: .24s; }
  .layer[open] .layer-items > div:nth-child(n+7) { animation-delay: .28s; }

  /* FAQ answers slide open (height is animated by JS). */
  .faq details[open] .a { animation: fade-up .35s var(--ease) both; }
}

@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } }
@keyframes msg-in { from { opacity: 0; transform: translateY(.7em) scale(.9); } }
@keyframes typing-life { 0% { opacity: 0; transform: translateY(.4em) scale(.9); } 14%, 86% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.9); } }
@keyframes dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-.18em); } }
@keyframes bar-fill { from { opacity: .38; } to { opacity: 1; } }
@keyframes grow { from { width: 0; } }
@keyframes strike { from { background-size: 0 1.5px; } }
@keyframes select-ring { 0% { box-shadow: inset 0 0 0 2px transparent; } 100% { box-shadow: inset 0 0 0 2px var(--accent); } }
@keyframes speaker { 0% { box-shadow: inset 0 0 0 2px var(--rear); } 25%, 100% { box-shadow: inset 0 0 0 2px transparent; } }
@keyframes blink { 50% { opacity: .3; } }
@keyframes mk-front { from { opacity: 0; transform: scale(.84); } }
@keyframes mk-rear { from { opacity: 0; transform: translate(-26%, -22%) scale(.86); } }