/* Homepage. The stage first: the hero and the phone demo share one pinned viewport. */

.stage { position: relative; }
.stage-pin { position: relative; min-height: 100svh; }
.pinned .stage { height: 340vh; }
.pinned .stage-pin { position: sticky; top: 0; height: 100svh; overflow: clip; }

.hero-canvas { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: none; }
.pinned .hero-canvas { display: block; }
.hero-canvas canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
/* The first paint has to be right before any JavaScript has run: the headline, subtitle and
   buttons, and nothing else. The demo waits where the scroll timeline in js/stage.js picks it
   up, and if the stage gives up, losing .pinned brings it all back. */
.pinned .hero-canvas:not(.is-drawn) { opacity: 0; }
.pinned .phone { transform: translateY(104vh); }
.pinned .demo-copy, .pinned .demo-side { visibility: hidden; opacity: 0; }
.pinned:not(.stage-ready) .tabbar { transform: translate(-50%, 140%); opacity: 0; pointer-events: none; }
.pinned:not(.stage-ready) .press-hint { opacity: 0; }
/* A reload part way down (js/boot.js): nothing shows until js/stage.js has caught up, and then
   everything is simply there, without playing its way in. */
.restoring main, .restoring .footer, .restoring .tabbar { visibility: hidden; }
.restoring .tabbar, .restoring .tab, .restoring .tab-label, .restoring .tab-pill, .restoring .salu-hero { transition: none; }
.stage-pin.over-key { cursor: pointer; }

.hero-copy { position: relative; z-index: 3; padding: clamp(76px, 9.5svh, 112px) 20px 32px; text-align: center; }
.pinned .hero-copy { position: absolute; inset: 0 0 auto; padding-bottom: 0; }

/* The skip link lands here, because this page's header sits inside <main>. The margin keeps the
   hero where it is, so landing does not start the scroll flight. */
#heroTitle { font-size: min(var(--t-4xl), 11.2svh); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; scroll-margin-top: 50svh; }
.h-line { display: block; white-space: nowrap; }
/* Flex, not text-align: a phrase wider than the line stays centred while it is scaled to fit.
   Inline, it would start at the line's left edge and scale from there, sitting off to the right. */
.h-typed { position: relative; display: flex; justify-content: center; min-height: 1.02em; white-space: nowrap; }
#heroTyped { display: inline-block; transform-origin: 50% 60%; }
#heroTyped .ch { display: inline-block; }
.hero-sub { max-width: 64ch; margin: clamp(10px, 2svh, 18px) auto 0; font-size: var(--t-lg); line-height: 1.36; color: var(--ink-2); text-wrap: balance; }
.hero-actions { justify-content: center; margin-top: clamp(14px, 2.6svh, 24px); }
.hero-copy { will-change: transform, opacity; }

/* Letters flying from the keys up into the headline */
.fly { position: absolute; left: 0; top: 0; z-index: 4; font-family: var(--font-display); font-weight: 800; color: var(--ink); line-height: 1; pointer-events: none; will-change: transform; }

.press-hint {
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 4;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.84);
  box-shadow: var(--lift-1);
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 650;
  color: var(--ink-2);
  white-space: nowrap;
  transform: translate(-50%, 0);
  transition: opacity 300ms, transform 500ms var(--spring-soft);
  pointer-events: none;
}
.press-hint.is-gone { opacity: 0; transform: translate(-50%, 10px); }
.press-hint-touch { display: none; }
@media (hover: none) { .press-hint-mouse { display: none; } .press-hint-touch { display: inline; } }
html:not(.pinned) .press-hint { display: none; }

.sound-toggle { position: absolute; right: clamp(16px, 3vw, 32px); bottom: 16px; z-index: 5; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 0.5px var(--card-edge), var(--lift-1); color: var(--icon); font-size: 18px; transition: transform var(--press), color 180ms; touch-action: manipulation; }
.sound-toggle:active { transform: scale(0.94); }
.sound-toggle[aria-pressed="true"] { color: var(--keyboard-deep); }

/* ---------- The demo: copy, phone, things to try ---------- */

.demo {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  /* Wider than the page's column: in a tall window the phone grows, and the heading beside it
     would otherwise break into four lines. */
  width: min(1320px, calc(100% - clamp(32px, 6vw, 80px)));
  margin: clamp(24px, 6vw, 72px) auto 0;
  padding-bottom: 24px;
}
.pinned .demo { position: absolute; inset: 0; margin: 0 auto; padding: 16px 0 calc(var(--tabbar-clearance) - 12px); }
.demo-copy h2 { font-size: clamp(2rem, 1.1rem + 2.1vw, 3.25rem); }
.demo-copy p { margin-top: 16px; max-width: 36ch; font-size: var(--t-lg); line-height: 1.4; color: var(--ink-2); }

.phone {
  --phone-h: min(calc(100svh - 100px), 860px);
  position: relative;
  width: calc(var(--phone-h) * 0.474);
  height: var(--phone-h);
  padding: calc(var(--phone-h) * 0.0118);
  border-radius: calc(var(--phone-h) * 0.0735);
  background: linear-gradient(145deg, #3a3d46, #17181d 28%, #17181d 72%, #2d2f37);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 2px 6px rgb(var(--shadow-ink) / 0.1), 0 30px 70px rgb(var(--shadow-ink) / 0.22);
}
html:not(.pinned) .phone { --phone-h: 720px; }
.phone-screen { position: relative; height: 100%; display: flex; flex-direction: column; border-radius: calc(var(--phone-h) * 0.0625); overflow: hidden; background: linear-gradient(170deg, #f3f5fc, #fbf8f6 60%, #fafafc); container-type: inline-size; }
.phone-shot { width: 100%; height: 100%; object-fit: cover; }
html:not(.js) .phone-status, html:not(.js) .chat, html:not(.js) .composer, html:not(.js) .kb-host { display: none; }

.phone-status { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 44px; padding: 8px 22px 0; font-family: var(--font-display); font-size: 14px; font-weight: 650; }
.phone-status .island { width: 76px; height: 22px; border-radius: 999px; background: #0b0b0d; }
.status-icons { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.status-icons svg { height: 10px; width: auto; }
.status-icons svg:nth-child(1) { width: 15px; }
.status-icons svg:nth-child(2) { width: 15px; }
.status-icons svg:nth-child(3) { width: 21px; }

.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 14px 10px; border-bottom: 0.5px solid var(--hair); font-family: var(--font-display); font-size: 15px; }
.chat-head .icon { font-size: 15px; color: var(--voice-deep); }
.avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 0.5px var(--card-edge), var(--lift-1); color: var(--voice-deep); font-size: 13px; font-weight: 700; }
.chat-log { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 10px 12px; overflow: hidden; }
.bubble { max-width: 82%; padding: 7px 12px; border-radius: 16px; font-size: 13.5px; line-height: 1.32; }
.bubble-me { align-self: flex-end; background: var(--keyboard-deep); color: #fff; border-bottom-right-radius: 5px; }
.bubble-them { align-self: flex-start; background: var(--card); box-shadow: inset 0 0 0 0.5px var(--card-edge), var(--lift-1); border-bottom-left-radius: 5px; }
.bubble-note { display: block; margin-top: 3px; font-size: 11.5px; color: var(--realtime-deep); font-weight: 600; }

.composer { flex: none; display: flex; align-items: flex-end; gap: 6px; padding: 6px 10px 8px; }
.composer-field { position: relative; flex: 1; min-width: 0; min-height: 34px; max-height: 100px; overflow: hidden; padding: 7px 13px; border-radius: 17px; background: var(--card); box-shadow: inset 0 0 0 0.5px var(--hair-strong); font-size: 13.5px; line-height: 1.32; }
.composer-text { unicode-bidi: plaintext; }
.composer-ph { position: absolute; inset: 7px 13px auto; color: var(--ink-3); pointer-events: none; }
.composer-field .caret { height: 1.08em; vertical-align: -0.2em; width: 1.5px; min-width: 1.5px; }
.composer-send { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--well); color: var(--ink-3); font-size: 15px; transition: background 180ms, color 180ms, transform 400ms var(--spring); touch-action: manipulation; }
.composer-send:not([disabled]) { background: var(--keyboard-deep); color: #fff; transform: scale(1.06); }
.composer-send:not([disabled]):active { transform: scale(0.94); }

.kb-host { flex: none; position: relative; background: var(--kb-tray); padding-bottom: 30px; border-radius: 18px 18px 0 0; }
.kb-host .kb { border-radius: 18px 18px 0 0; }
.kb-host::after { content: ""; position: absolute; left: 50%; bottom: 8px; width: 36%; height: 4px; margin-left: -18%; border-radius: 99px; background: rgb(17 17 20 / 0.82); }

.demo-side { display: grid; gap: 18px; justify-items: start; }
.steps { display: grid; gap: 16px; }
.steps li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; color: var(--ink-3); transition: color 300ms; }
.steps b { display: block; font-family: var(--font-display); font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.012em; line-height: 1.2; color: var(--ink); }
.steps span { display: block; margin-top: 3px; font-size: var(--t-sm); line-height: 1.42; }
.tick { display: grid; place-items: center; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--hair-strong); color: transparent; font-size: 13px; transition: background 240ms, box-shadow 240ms, color 120ms, transform 520ms var(--spring); }
.steps li.is-done .tick { background: var(--keyboard-deep); box-shadow: none; color: #fff; transform: scale(1.08); }
.steps li.is-now b { color: var(--keyboard-deep); }
.demo-note { font-size: var(--t-xs); line-height: 1.45; color: var(--ink-3); max-width: 40ch; }
.demo-again { min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--card); box-shadow: var(--lift-1); font-family: var(--font-display); font-size: var(--t-sm); font-weight: 650; transition: transform var(--press); touch-action: manipulation; }
.demo-again[hidden] { display: none; }
.demo-again:active { transform: scale(0.96); }

@media (max-width: 1060px) {
  .demo { grid-template-columns: minmax(0, 1fr) auto; }
  .demo-copy { grid-column: 1; }
  .phone { grid-column: 2; grid-row: 1 / span 2; }
  .demo-side { grid-column: 1; }
  .steps span { display: none; }
  .steps { gap: 10px; }
}

/* A very short window: the steps' details step aside, or the column runs up under the nav. */
@media (max-height: 600px) {
  .steps span { display: none; }
  .steps { gap: 10px; }
}

/* A phone looking at a phone would be silly. Here the screen itself becomes the demo. */
@media (max-width: 720px) {
  .demo { display: block; width: 100%; padding: 0; margin-top: 8px; }
  .demo-copy { width: var(--shell); margin-inline: auto; }
  .demo-side { width: var(--shell); margin: 20px auto 0; }
  .phone { --phone-h: auto; width: 100%; height: 620px; padding: 0; border-radius: 0; background: none; box-shadow: none; margin-top: 16px; }
  .phone-screen { border-radius: 0; background: none; }
  .phone-status { display: none; }
  .pinned .demo { display: flex; flex-direction: column; padding: 0; }
  .pinned .demo-copy { padding-top: 76px; flex: none; }
  .pinned .demo-copy h2 { font-size: 1.75rem; }
  .pinned .demo-copy p:not(.demo-hint, .demo-note-compact, .sr-only) { display: none; }
  .pinned .demo-side { display: none; }
  .pinned .phone { flex: 1; min-height: 0; height: auto; margin-top: 8px; }
  .chat-head { display: none; }
  .kb-host { padding-bottom: 6px; }
  .kb-host::after { display: none; }
  .bubble { font-size: 15px; }
  .composer-field { font-size: 15px; }
}

.h-fit { display: inline-block; flex: none; transform-origin: 50% 55%; white-space: nowrap; }
/* The caret hangs off the end of the line, so the words are centred on their own and do not
   step sideways when the caret first appears. */
.h-fit .caret { margin-inline-end: -0.125em; }
/* Going back the canvas is solid at once (js/stage.js). Landing, the real keys come up under it
   first and then it fades, so nothing dips. A panel open over the keys has nothing to line up with. */
.hero-canvas.is-landed { opacity: 0; transition: opacity 110ms linear 90ms; }
.stage-pin:has(.kb.panel-open) .hero-canvas { transition: opacity 180ms linear; }
.stage-ready .press-hint { animation: hint-in 700ms 2.6s var(--out) backwards; }
@keyframes hint-in { from { opacity: 0; transform: translate(-50%, 12px); } }

.bubble-typing { color: var(--ink-3); letter-spacing: 2px; }

/* ---------- Rooms: a soft tint from the app's palette, for a feature's own space ---------- */

.room { margin-inline: clamp(8px, 1.2vw, 16px); padding-block: clamp(56px, 6.5vw, 96px); border-radius: var(--r-room); }
@supports (corner-shape: squircle) { .room { corner-shape: squircle; border-radius: calc(var(--r-room) * 1.6); } }
.room-peach { background: linear-gradient(170deg, var(--tint-peach), #fdf0e6 60%, #fbe9dd); }
.room-lilac { background: linear-gradient(170deg, var(--realtime-soft), #efe7fb 55%, var(--tint-lilac)); }
.room-mint { background: linear-gradient(170deg, var(--live-soft), #eaf5ee 60%, var(--tint-mint)); }

.tab-title { font-size: min(var(--t-4xl), 15svh); letter-spacing: -0.035em; }
.tab-sub { margin-top: 8px; font-size: var(--t-xl); line-height: 1.25; color: var(--ink-2); letter-spacing: -0.01em; }

/* ---------- Languages ---------- */

.langs { padding-top: clamp(72px, 8vw, 112px); padding-bottom: clamp(64px, 8vw, 112px); overflow: clip; }
html:not(.pinned) .langs { padding-top: clamp(64px, 8vw, 112px); }
.langs-in { text-align: center; }
.langs h2 { font-size: var(--t-3xl); }
.counts { margin: 22px auto 0; max-width: 34ch; font-family: var(--font-display); font-size: var(--t-xl); font-weight: 650; line-height: 1.5; letter-spacing: -0.012em; color: var(--ink-2); text-wrap: balance; }
.keycaps { display: inline-flex; gap: 3px; margin-inline: 3px; vertical-align: 0.06em; }
.keycap {
  display: inline-grid;
  place-items: center;
  min-width: 1.32em;
  height: 1.56em;
  border-radius: 0.3em;
  background: var(--card);
  color: var(--ink);
  font-size: 0.92em;
  font-weight: 750;
  line-height: 1;
  box-shadow: 0 2px 0 rgb(var(--shadow-ink) / 0.26), 0 6px 14px rgb(var(--shadow-ink) / 0.1);
}

.lang-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(560px, 100%);
  height: 68px;
  margin: 34px auto 0;
  padding: 0 22px;
  border-radius: 22px;
  background: var(--card);
  box-shadow: inset 0 0 0 0.5px var(--card-edge), var(--lift-2);
  transition: box-shadow 240ms var(--out);
}
html:not(.js) .lang-search { display: none; }
.lang-search:focus-within { box-shadow: inset 0 0 0 0.5px var(--card-edge), var(--lift-3); }
.lang-search:focus-within::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 24px;
  padding: 2px;
  background: conic-gradient(from var(--sweep), var(--iridescent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: sweep 5s linear infinite;
  pointer-events: none;
}
.lang-search .icon { font-size: 22px; color: var(--ink-3); }
.lang-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; color: var(--ink); font-family: var(--font-display); font-size: 1.375rem; font-weight: 650; letter-spacing: -0.012em; }
.lang-search input::placeholder { color: var(--ink-3); font-weight: 600; }
.lang-result { min-height: 3.4em; margin: 16px auto 0; max-width: 46ch; font-size: var(--t-md); color: var(--ink-2); line-height: 1.45; }
.lang-result b { color: var(--live-deep); font-family: var(--font-display); }
.lang-matches { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }

.lang-wall { display: grid; gap: 10px; margin-top: 8px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
html:not(.js) .lang-wall { display: none; }
/* Far down the page, hundreds of chips in a dozen scripts are a lot to lay out, and laying them out
   is what would fetch every script's font on the first screen. So they wait for js/sections.js,
   in a space kept for them: a row of chips is the same height at every size. */
html.js:not(.reduce) .lang-wall { min-height: 180px; }
html.js:not(.reduce) .lang-row:not(.is-near) { content-visibility: hidden; contain-intrinsic-block-size: 53.25px; }
.lang-row { overflow: hidden; }
.lang-track { display: flex; gap: 10px; width: max-content; padding: 6px 0; animation: drift 190s linear infinite; animation-play-state: paused; }
.lang-wall.is-moving .lang-track { animation-play-state: running; }
.lang-row-1 .lang-track { animation-direction: reverse; animation-duration: 230s; }
.lang-row-2 .lang-track { animation-duration: 170s; }
@media (hover: hover) { .lang-wall:hover .lang-track { animation-play-state: paused; } }
@keyframes drift { to { transform: translateX(-50%); } }
.lang-chip { flex: none; padding: 9px 15px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 0.5px var(--card-edge), 0 1px 3px rgb(var(--shadow-ink) / 0.05), 0 4px 10px rgb(var(--shadow-ink) / 0.05); font-family: var(--font-display); font-size: var(--t-sm); font-weight: 600; white-space: nowrap; transition: transform 300ms var(--spring), box-shadow 200ms; touch-action: manipulation; }
.lang-chip:active { transform: scale(0.95); }
@media (hover: hover) { .lang-chip:hover { transform: translateY(-2px) scale(1.04); box-shadow: inset 0 0 0 0.5px var(--card-edge), var(--lift-2); } }
.reduce .lang-track { flex-wrap: wrap; width: auto; justify-content: center; animation: none; }

/* ---------- Write ---------- */

.write-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 3vw, 36px); }
.write-head { text-align: center; }
.write-head h2 { font-size: var(--t-2xl); }
.write-head p { margin: 10px auto 0; max-width: 70ch; font-size: var(--t-lg); color: var(--ink-2); line-height: 1.4; text-wrap: balance; }

.sheet { width: min(980px, 100%); margin-inline: auto; padding: clamp(14px, 2vw, 22px); border-radius: 30px; background: var(--card); box-shadow: inset 0 0 0 0.5px var(--card-edge), var(--lift-3); }
.tool-strip { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 18px; background: var(--kb-tray); overflow-x: auto; scrollbar-width: none; }
.tool-strip::-webkit-scrollbar { display: none; }
.tool-strip .kb-pill { width: 46px; height: 38px; border-radius: 12px; font-size: 16px; }
.tool-tab { display: inline-flex; align-items: center; gap: 7px; flex: none; min-height: 38px; padding: 0 15px; border-radius: 12px; background: rgb(255 255 255 / 0.62); font-family: var(--font-text); font-size: var(--t-sm); font-weight: 550; white-space: nowrap; transition: background 180ms, color 180ms, transform var(--press); touch-action: manipulation; }
.tool-tab:active { transform: scale(0.96); }
.tool-tab .icon { font-size: 15px; }
.tool-tab[aria-selected="true"] { background: var(--kb-ink); color: #fff; }
.tool-tab-grammar { margin-inline-start: auto; }

.tool-panel { padding: clamp(20px, 2.6vw, 30px) clamp(10px, 2vw, 22px) clamp(6px, 1vw, 10px); text-align: center; }
.tool-before { font-size: var(--t-md); color: var(--ink-3); }
.tool-before::before { content: "“"; }
.tool-before::after { content: "”"; }
.tool-before-wrong { text-decoration: underline wavy #d0564a 1.5px; text-underline-offset: 4px; transition: text-decoration-color 500ms; }
.tool-before-wrong.is-fixed { text-decoration-color: transparent; }
.tool-after { display: block; min-height: 2.3em; margin: 10px auto 0; max-width: 26ch; font-family: var(--font-display); font-size: clamp(1.75rem, 1.3rem + 1.9vw, 3rem); font-weight: 750; letter-spacing: -0.024em; line-height: 1.12; text-wrap: balance; transition: font-weight 260ms; }
.tool-after.is-small { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.5rem); max-width: 34ch; }
.tool-after .w { display: inline-block; }
.tool-explain { margin-top: 10px; color: var(--ink-2); font-size: var(--t-md); }

.tones { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: clamp(16px, 2vw, 24px); text-align: start; }
html:not(.js) .tones { display: none; }
.tone { display: flex; align-items: center; gap: 9px; min-height: 50px; padding: 8px 10px; border-radius: var(--r-control); background: var(--well); text-align: start; transition: background 180ms, color 180ms, transform 320ms var(--spring); touch-action: manipulation; }
.tone:active { transform: scale(0.97); }
@media (hover: hover) { .tone:hover { background: #e7e9f0; } }
.tone .icon { font-size: 16px; color: var(--icon); transition: color 180ms; }
.tone b { display: block; font-family: var(--font-display); font-size: 0.875rem; font-weight: 650; line-height: 1.15; }
.tone small { display: block; font-size: 0.75rem; line-height: 1.2; color: var(--ink-3); margin-top: 2px; transition: color 180ms; }
.tone[aria-pressed="true"] { background: var(--kb-ink); color: #fff; }
.tone[aria-pressed="true"] .icon, .tone[aria-pressed="true"] small { color: rgb(255 255 255 / 0.72); }
.sheet-note { margin-top: 14px; text-align: center; font-size: var(--t-xs); color: var(--ink-3); }
@media (max-width: 900px) { .tones { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  /* Two scrollable rows keep the sentence and its tones on screen together. */
  .tones { display: grid; grid-template-columns: none; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; margin-inline: -8px; padding-inline: 8px; scrollbar-width: none; }
  .tones::-webkit-scrollbar { display: none; }
  .tone small { display: none; }
  .tone { min-height: 44px; padding-inline: 12px; }
  .tool-tab-grammar { margin-inline-start: 0; }
  .tool-after { font-size: 1.625rem; min-height: 3.5em; }
  .tool-after.is-small { font-size: 1.375rem; }
}

/* ---------- Voice ---------- */

/* A short window trims the space, the title and the orb, so the orb, what it hears and the
   languages can all sit above the tab bar together. */
.voice { --orb-size: clamp(148px, min(17vw, 25svh), 204px); position: relative; padding-block: clamp(72px, min(10vw, 11svh), 136px); overflow: clip; }
.voice-in { position: relative; display: grid; justify-items: center; text-align: center; }
/* The app's proportions: a canvas 1.27 times the mic button, whose tallest wave (46% of that)
   only just clears the orb. That keeps it out of the words above and below, at every size. */
.ribbon { position: absolute; left: 50%; width: min(1500px, 100%); height: calc(var(--orb-size) * 1.27); transform: translateX(-50%); mix-blend-mode: multiply; pointer-events: none; }
html:not(.js) .ribbon, .reduce .ribbon { display: none; }

.orb { --size: var(--orb-size); position: relative; display: grid; place-items: center; width: var(--size); height: var(--size); margin-top: clamp(32px, 5vw, 56px); border-radius: 50%; color: #fff; touch-action: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; transition: transform 360ms var(--spring); }
html:not(.js) #voiceOrb { display: none; }
.orb:focus-visible { border-radius: 50%; outline-offset: 22px; }
.orb-halo { position: absolute; inset: -14%; border-radius: 50%; background: rgb(107 127 189 / 0.2); box-shadow: 0 18px 40px rgb(74 95 157 / 0.2); transition: transform 500ms var(--spring-soft), background 300ms; }
.orb-face { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(180deg, #8d9fd2, #5f73b3 42%, #4a5f9d); box-shadow: inset 0 1.5px 0 rgb(255 255 255 / 0.26), 0 8px 20px rgb(74 95 157 / 0.32); font-size: calc(var(--size) * 0.36); }
.orb-realtime .orb-halo { background: rgb(138 92 208 / 0.2); box-shadow: 0 18px 40px rgb(110 60 168 / 0.22); }
.orb-realtime .orb-face { background: linear-gradient(180deg, #a57cdc, #8450c8 42%, #6e3ca8); box-shadow: inset 0 1.5px 0 rgb(255 255 255 / 0.26), 0 8px 20px rgb(110 60 168 / 0.34); }
.orb:active, .orb.is-live { transform: scale(0.95); }
.orb.is-live .orb-halo { animation: halo 1.1s ease-in-out infinite alternate; }
@keyframes halo { from { transform: scale(1); } to { transform: scale(1.18); } }
.orb-state { min-height: 1.4em; margin-top: 26px; font-family: var(--font-display); font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.012em; }
.rw { display: inline-block; }
.is-unsaid { visibility: hidden; }
/* Wide enough for the sentence with all its ums on the same two lines the clean one takes, so
   the chips under it never move. A phone needs three. */
.voice-output { display: block; min-height: 2.4em; max-width: 29ch; margin-top: 10px; font-family: var(--font-display); font-size: var(--t-xl); font-weight: 700; letter-spacing: -0.016em; line-height: 1.2; text-wrap: balance; }
.voice-output .w { display: inline-block; transition: opacity 280ms, max-width 420ms var(--out), margin 420ms var(--out), filter 280ms; max-width: 12em; white-space: nowrap; overflow: hidden; vertical-align: bottom; }
.voice-output .w-filler { color: var(--ink-3); }
.voice-output .w.is-going { opacity: 0; max-width: 0; filter: blur(4px); }
.voice-target { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 18px; }
html:not(.js) .voice-target { display: none; }
.chip { min-height: 40px; padding: 0 15px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 0.5px var(--card-edge), 0 1px 3px rgb(var(--shadow-ink) / 0.05), 0 4px 10px rgb(var(--shadow-ink) / 0.05); font-family: var(--font-display); font-size: var(--t-sm); font-weight: 650; transition: background 180ms, color 180ms, transform 320ms var(--spring); touch-action: manipulation; }
.chip:active { transform: scale(0.95); }
.chip[aria-pressed="true"] { background: var(--voice-deep); color: #fff; }
.voice-note { margin-top: 20px; }
@media (max-width: 440px) { .voice-output { min-height: 3.6em; } }
@media (max-width: 340px) { .voice-output { min-height: 4.8em; } }

/* ---------- Realtime ---------- */

.realtime-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); }
.realtime-head { text-align: center; }
.realtime-copy { margin: 14px auto 0; max-width: 48ch; font-size: var(--t-lg); line-height: 1.4; color: var(--ink-2); text-wrap: balance; }
.realtime .tab-sub { color: var(--realtime-deep); }

.table { --orb-size: clamp(104px, 11vw, 140px); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: clamp(16px, 3vw, 40px); min-height: 400px; }
.table-ribbon { position: absolute; left: 50%; top: clamp(0px, 3vw, 28px); width: min(1500px, 100vw); height: calc(var(--orb-size) * 1.27); transform: translateX(-50%); mix-blend-mode: multiply; pointer-events: none; }
html:not(.js) .table-ribbon, .reduce .table-ribbon { display: none; }
.seat { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.seat-b { align-items: flex-end; }
.seat-name { font-family: var(--font-display); font-size: var(--t-md); font-weight: 700; color: var(--ink); transition: color 240ms, transform 500ms var(--spring-soft); }
.seat-name span { margin-inline-start: 4px; font-weight: 550; color: var(--ink-3); }
.speak-a .seat-a .seat-name, .speak-b .seat-b .seat-name { color: var(--realtime-deep); }
.speak-a .seat-a .seat-name { transform: translateX(4px); }
.speak-b .seat-b .seat-name { transform: translateX(-4px); }
.seat-lines { display: flex; flex-direction: column; gap: 10px; width: 100%; min-height: 340px; }
.seat-b .seat-lines { align-items: flex-end; }
.seat-lines p { min-height: 1.3em; max-width: min(100%, 25em); animation: bubble-in 420ms var(--spring) backwards; transform-origin: 0 100%; }
.seat-b .seat-lines p { transform-origin: 100% 100%; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(10px) scale(0.92); } }
.said { align-self: flex-start; padding: 11px 16px; border-radius: 22px 22px 22px 7px; background: var(--card); box-shadow: inset 0 0 0 0.5px var(--card-edge), var(--lift-1); font-size: var(--t-md); line-height: 1.34; color: var(--ink); }
.heard { align-self: flex-start; padding: 12px 18px; border-radius: 24px 24px 24px 7px; background: linear-gradient(rgb(255 255 255 / 0.14), rgb(255 255 255 / 0)), linear-gradient(170deg, var(--realtime), var(--realtime-end)); box-shadow: 0 8px 20px rgb(110 60 168 / 0.26); font-family: var(--font-display); font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.5rem); font-weight: 700; letter-spacing: -0.012em; line-height: 1.22; color: #fff; }
.seat-b .said, .seat-b .heard { align-self: flex-end; border-radius: 22px 22px 7px 22px; }

.table-orb { position: relative; display: grid; justify-items: center; text-align: center; padding-top: clamp(24px, 4vw, 44px); }
.orb-static { margin-top: 0; pointer-events: none; }
.table-orb .orb-state { position: relative; font-size: var(--t-sm); min-width: 11em; margin-top: 26px; padding: 3px 12px; border-radius: 999px; background: rgb(255 255 255 / 0.62); color: var(--realtime-deep); }
.table-orb .orb-halo::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--realtime); opacity: 0; }
.speak-a .orb-halo, .speak-b .orb-halo { animation: halo 0.9s ease-in-out infinite alternate; }
.speak-a .orb-halo::after, .speak-b .orb-halo::after { animation: ring 1.25s var(--out) infinite; }
@keyframes ring { from { transform: scale(0.82); opacity: 0.8; } to { transform: scale(1.65); opacity: 0; } }
.speak-a .orb-face { animation: nudge-a 1.1s ease-in-out infinite alternate; }
.speak-b .orb-face { animation: nudge-b 1.1s ease-in-out infinite alternate; }
@keyframes nudge-a { to { transform: translateX(-3px); } }
@keyframes nudge-b { to { transform: translateX(3px); } }
@media (max-width: 820px) {
  .table { --orb-size: 92px; grid-template-columns: 1fr; gap: 24px; }
  .table-orb { grid-row: 2; padding-top: 0; }
  .seat-b { grid-row: 3; }
  .seat-lines { min-height: 164px; }
  .table-ribbon { top: 150px; }
}

/* ---------- Notes ---------- */

.notes { padding-block: clamp(80px, 11vw, 150px); overflow: clip; }
.notes-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 96px); }
.notes-copy p:last-child { margin-top: 16px; max-width: 38ch; font-size: var(--t-lg); line-height: 1.4; color: var(--ink-2); }
.note-pile { position: relative; display: grid; justify-items: center; align-content: start; min-height: 420px; padding-top: 86px; }
.note { position: relative; width: min(368px, 88%); padding: 22px; border-radius: 24px; background: var(--card); box-shadow: inset 0 0 0 0.5px var(--card-edge), var(--lift-3); touch-action: pan-y; cursor: grab; transition: box-shadow 200ms; }
.note.is-held { cursor: grabbing; box-shadow: inset 0 0 0 0.5px var(--card-edge), 0 34px 70px rgb(var(--shadow-ink) / 0.22); z-index: 3; }
.note-back { position: absolute; top: 112px; height: 250px; }
.note-back b { display: block; font-family: var(--font-display); font-size: var(--t-md); font-weight: 700; margin-bottom: 6px; }
.note-back p { font-size: var(--t-sm); color: var(--ink-2); }
.note-back-1 { background: var(--tint-yellow); }
.note-back-2 { background: var(--tint-blue); }
.is-fanned .note-back-1 { rotate: 8deg; translate: 34px 6px; }
.is-fanned .note-back-2 { rotate: -9deg; translate: -40px -2px; }
.note-back { transition: rotate 900ms var(--spring), translate 900ms var(--spring); }
.note-front { z-index: 2; rotate: -3deg; }
html:not(.js) .note-front { rotate: 0deg; }
.note header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.note-mic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--voice); color: #fff; font-size: 14px; }
.note header b { display: block; font-family: var(--font-display); font-size: var(--t-md); font-weight: 700; line-height: 1.2; }
.note header small { display: block; font-size: var(--t-xs); color: var(--ink-3); }
.note-list { display: grid; gap: 12px; }
.note-list li.is-waiting { visibility: hidden; }
.note-list label { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: var(--t-lg); font-weight: 500; cursor: pointer; }
.note-list input { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; cursor: pointer; }
.box { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--hair-strong); color: transparent; font-size: 12px; transition: background 160ms, box-shadow 160ms, color 120ms; }
.note-list input:checked + .box { background: var(--voice-deep); box-shadow: none; color: #fff; }
.note-list input:checked ~ span:last-child { color: var(--ink-3); }
.note-list input:focus-visible + .box { outline: 2.5px solid var(--voice-deep); outline-offset: 2px; }
.ramble { position: absolute; top: 0; left: 50%; z-index: 4; display: flex; gap: 10px; align-items: center; width: min(380px, 94%); padding: 12px 16px 12px 12px; border-radius: 20px 20px 20px 6px; background: var(--voice-soft); box-shadow: inset 0 0 0 0.5px var(--card-edge), var(--lift-1); font-size: var(--t-sm); line-height: 1.35; color: var(--ink-2); transform: translateX(-50%); }
@media (max-width: 820px) { .notes-in { grid-template-columns: minmax(0, 1fr); } }

/* ---------- The real thing ---------- */

.real { padding-block: clamp(32px, 5vw, 72px) clamp(64px, 8vw, 112px); }
.real-head { text-align: center; }
.real-head h2 { font-size: var(--t-3xl); }
.real-head p { margin-top: 12px; font-size: var(--t-lg); color: var(--ink-2); }
.real-track { display: flex; gap: clamp(16px, 2.4vw, 32px); width: max-content; max-width: 100%; margin: clamp(28px, 4vw, 48px) auto 0; padding: 12px clamp(16px, 4vw, 48px) 28px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.real-track::-webkit-scrollbar { display: none; }
.real-track:focus-visible { outline-offset: -4px; }
.real-phone { flex: none; width: clamp(214px, 21vw, 272px); margin: 0; scroll-snap-align: center; }
.real-phone:nth-child(even) { translate: 0 22px; }
.device { position: relative; padding: 2.8%; border-radius: 13.5% / 6.4%; background: linear-gradient(145deg, #3a3d46, #17181d 28%, #17181d 72%, #2d2f37); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1), var(--lift-3); transition: transform 500ms var(--spring-soft); }
@media (hover: hover) { .real-phone:hover .device { transform: translateY(-6px) rotate(-1deg); } .real-phone:nth-child(even):hover .device { transform: translateY(-6px) rotate(1deg); } }
.device img, .device video { width: 100%; aspect-ratio: 1206 / 2622; object-fit: cover; border-radius: 11.5% / 5.3%; background: var(--well); }
.video-toggle { position: absolute; right: 8%; bottom: 3.6%; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgb(28 31 38 / 0.82); color: #fff; font-size: 15px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform var(--press); touch-action: manipulation; }
.video-toggle:active { transform: scale(0.92); }
.video-toggle .icon-pause { display: none; }
.video-toggle[aria-pressed="true"] .icon-play { display: none; }
.video-toggle[aria-pressed="true"] .icon-pause { display: block; }
.real-phone figcaption { margin-top: 16px; padding-inline: 6px; font-size: var(--t-sm); line-height: 1.38; color: var(--ink-3); }
.real-phone figcaption b { display: block; font-family: var(--font-display); font-size: var(--t-md); font-weight: 700; color: var(--ink); }

/* ---------- Private ---------- */

.private-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 88px); }
.private h2 { font-size: var(--t-3xl); }
.promises { display: grid; gap: 14px; margin: 26px 0 28px; }
.promises li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; font-size: var(--t-lg); line-height: 1.34; color: var(--ink-2); }
.promises .icon { font-size: 22px; margin-top: 3px; color: var(--live-deep); }

.guard { padding: 16px; border-radius: 30px; background: var(--card); box-shadow: inset 0 0 0 0.5px var(--card-edge), var(--lift-3); }
.segmented { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 14px; background: #ececee; }
.segmented button { position: relative; min-height: 38px; border-radius: 11px; font-family: var(--font-display); font-size: var(--t-sm); font-weight: 650; touch-action: manipulation; }
.segmented-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 11px; background: var(--card); box-shadow: 0 2px 6px rgb(var(--shadow-ink) / 0.12); transition: transform 440ms var(--spring); }
.is-secret .segmented-thumb { transform: translateX(100%); }
.guard-field { margin-top: 14px; min-height: 58px; padding: 16px; border-radius: var(--r-control); background: var(--well); font-size: 1.125rem; }
.guard-strip { position: relative; margin-top: 12px; height: 62px; padding: 8px; border-radius: 18px; background: var(--kb-tray); overflow: hidden; }
.guard-tools { display: flex; align-items: center; gap: 6px; height: 100%; transition: transform 500ms var(--spring-soft), opacity 200ms; }
.guard-tools .kb-pill { width: 44px; height: 38px; border-radius: 12px; font-size: 15px; }
.guard-tool { display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex: 1 1 auto; min-width: 0; height: 38px; padding: 0 8px; border-radius: 12px; background: rgb(255 255 255 / 0.66); font-size: var(--t-xs); font-weight: 550; white-space: nowrap; }
.guard-tool .icon { font-size: 13px; }
.guard-paused { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-display); font-size: var(--t-md); font-weight: 700; transform: translateY(100%); opacity: 0; transition: transform 500ms var(--spring-soft), opacity 200ms; }
.guard-paused .icon { color: var(--live-deep); font-size: 18px; }
.is-secret .guard-tools { transform: translateY(-120%); opacity: 0; }
.is-secret .guard-paused { transform: none; opacity: 1; }
@media (max-width: 860px) { .private-in { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 340px) { .guard-tool .icon { display: none; } }

/* ---------- Chrome ---------- */

.chrome { padding-block: clamp(80px, 11vw, 150px); overflow: clip; }
.chrome-in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(32px, 6vw, 80px); }
.chrome h2 { font-size: var(--t-2xl); margin-top: 18px; }
.chrome-copy > p:not(.demo-note) { margin: 16px 0 24px; max-width: 42ch; font-size: var(--t-lg); line-height: 1.4; color: var(--ink-2); }
.chrome-copy .demo-note { margin-top: 12px; }
.browser { border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 0.5px var(--card-edge), var(--lift-3); overflow: hidden; }
.browser-bar { display: flex; gap: 7px; padding: 12px 14px; background: var(--well); }
.browser-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--hair-strong); }
.browser img { width: 100%; background: var(--well); }
.swatches { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
html:not(.js) .swatches { display: none; }
.swatches button { width: 38px; height: 38px; border-radius: 50%; box-shadow: inset 0 0 0 0.5px rgb(var(--shadow-ink) / 0.18), var(--lift-1); transition: transform 320ms var(--spring), box-shadow 200ms; touch-action: manipulation; }
.swatches button:active { transform: scale(0.9); }
.swatches button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--ink); transform: scale(1.04); }
.swatch-spiderverse { background: conic-gradient(#e0232e 0 33%, #1a1a2e 0 66%, #2a6fdb 0); }
.swatch-kitty { background: linear-gradient(135deg, #fff 45%, #ff7fb1 0); }
.swatch-cleverly { background: linear-gradient(135deg, #b9c6f2, #f4f3fa 52%, #fad3b4); }
.swatch-white { background: #fff; }
.swatch-landscape { background: linear-gradient(#8fc8ec 45%, #74b16b 0); }
.swatch-cyber { background: linear-gradient(135deg, #0f1636, #5a2be0 60%, #1fd4e6); }
@media (max-width: 860px) { .chrome-in { grid-template-columns: minmax(0, 1fr); } }

/* ---------- The last key ---------- */

.get { position: relative; padding-block: clamp(72px, 9vw, 130px) clamp(32px, 4vw, 56px); overflow: clip; }
.get::before { content: ""; position: absolute; left: 50%; top: 38%; width: min(1100px, 150vw); aspect-ratio: 1.6; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgb(251 227 210 / 0.95), rgb(251 230 214 / 0)); pointer-events: none; }
.get-in { position: relative; display: grid; justify-items: center; text-align: center; }
.get h2 { font-size: var(--t-3xl); letter-spacing: -0.03em; }
.get-sub { margin-top: 16px; max-width: 40ch; font-size: var(--t-lg); line-height: 1.4; color: var(--ink-2); text-wrap: balance; }

.big-return { --depth: 12px; position: relative; display: block; width: clamp(280px, 42vw, 520px); height: clamp(112px, 15vw, 188px); margin-top: clamp(30px, 4vw, 52px); padding-bottom: var(--depth); border-radius: clamp(26px, 3vw, 40px); background: #b45e12; box-shadow: 0 26px 50px rgb(180 94 18 / 0.34), 0 6px 14px rgb(var(--shadow-ink) / 0.1); touch-action: manipulation; transition: box-shadow 140ms; }
.big-return-face { display: flex; align-items: center; justify-content: center; gap: 0.5em; height: 100%; border-radius: inherit; background: linear-gradient(180deg, #ee8f3f, #e27d29 55%, #d9711f); box-shadow: inset 0 1.5px 0 rgb(255 255 255 / 0.36); color: #fff; font-family: var(--font-display); font-size: clamp(2rem, 4.6vw, 3.75rem); font-weight: 750; letter-spacing: -0.02em; transition: transform 90ms var(--out); }
.big-return-face .icon { font-size: 0.9em; }
@media (hover: hover) { .big-return:hover .big-return-face { transform: translateY(-2px); } }
.big-return:active .big-return-face, .big-return.is-down .big-return-face { transform: translateY(calc(var(--depth) - 2px)); transition-duration: 40ms; }
.big-return:active, .big-return.is-down { box-shadow: 0 10px 22px rgb(180 94 18 / 0.3), 0 2px 6px rgb(var(--shadow-ink) / 0.1); }
.big-return:focus-visible { border-radius: clamp(26px, 3vw, 40px); outline-offset: 6px; }
.get-actions { justify-content: center; margin-top: clamp(28px, 4vw, 44px); }
.get-fine { margin-top: 16px; max-width: 54ch; font-size: var(--t-sm); line-height: 1.5; color: var(--ink-3); text-wrap: balance; }
.get-fine + .get-fine { margin-top: 6px; }
.chrome-stage { min-width: 0; }
.bubble-wave { font-size: 26px; padding: 4px 10px; line-height: 1.2; background: none !important; box-shadow: none !important; }

.demo-hint, .demo-note-compact { display: none; }

@media (max-width: 720px) {
  #heroTitle { font-size: min(11.6vw, 7svh); }
  .hero-copy { padding-inline: 16px; }
  .hero-sub { font-size: 1.0625rem; }
  .hero-actions .btn { flex: 1 1 100%; }
  .hero-actions .store { flex: 1 1 0; min-width: 0; padding-inline: 12px 10px; gap: 9px; }
  .hero-actions .store svg, .hero-actions .store img { width: 22px; height: 22px; }
  .hero-actions .store small { font-size: 0.65rem; }
  .hero-actions .store b { font-size: 0.9375rem; }
  .press-hint { bottom: 10px; }
  .pinned .demo-hint { display: block; margin-top: 8px; font-family: var(--font-display); font-size: var(--t-md); font-weight: 700; color: var(--keyboard-deep); }
  .pinned .demo-note-compact { display: block; margin-top: 4px; }
  .sound-toggle { display: none; }
}

/* Between phone and desktop the phone sits top right, so the nav steps aside for it. */
@media (min-width: 721px) and (max-width: 1060px) {
  .topbar nav { transition: opacity 200ms, visibility 200ms; }
  .demo-on .topbar nav { opacity: 0; visibility: hidden; }
}

/* ---------- Salu ---------- */

/* Hero: js/stage.js sizes and places it from where the keyboard actually rests. On phones the
   store badges step aside (both are in the last section) so it has room above the keys. */
.pinned .salu-hero { position: absolute; z-index: 1; transition: top 420ms var(--spring-soft), opacity 320ms ease; }
/* Salu joins in with the keys, not ahead of them. */
.pinned .salu-hero:not(.is-placed), .pinned .hero-canvas:not(.is-drawn) ~ .hero-copy .salu-hero { visibility: hidden; opacity: 0; }
html:not(.pinned) .salu-hero { --h: 132px; margin: 0 auto 6px; }
/* A phone on its side has no height to spare: the small mark in the header stands in. */
@media (max-height: 479px) {
  html:not(.pinned) .salu-hero { display: none; }
  html:not(.pinned) .home .brand-mark { display: block; }
}
@media (max-width: 720px) { .pinned .hero-actions .store { display: none; } }

/* Demo: under the copy, at the phone's elbow, pointing at the keyboard. It hangs below the
   copy so the copy stays centred. */
.demo-copy { position: relative; }
.salu-demo { --h: clamp(96px, 16.6svh, 150px); position: absolute; right: 60px; top: calc(100% + 11.5svh); }
/* Tablets: the steps fill the column, so it moves up beside the heading where that fits. */
@media (max-width: 1060px) {
  .salu-demo { --h: clamp(84px, 11svh, 108px); right: 16px; top: 0; }
}
@media (min-width: 721px) and (max-width: 919px) { .salu-demo { display: none; } }
/* Phones: top right, across from the tip it points at */
@media (max-width: 720px) {
  .salu-demo { --h: 84px; right: 10px; top: 98px; }
  /* Unpinned, the hero's Salu is still on this screen, and one at a time is the rule. */
  html:not(.pinned) .salu-demo { display: none; }
  .pinned .demo-copy h2, .pinned .demo-copy .demo-hint, .pinned .demo-copy .demo-note-compact { max-width: calc(100% - 90px); }
  .pinned .demo-copy .demo-note-compact { font-size: var(--t-xs); line-height: 1.35; }
}

/* Languages: only ever in response to a search */
.lang-finder { position: relative; width: min(560px, 100%); margin: 34px auto 0; }
.lang-finder .lang-search { width: 100%; margin: 0; }
.salu-lang { --h: 118px; position: absolute; right: calc(100% + 41px); top: calc(68px + 6px - var(--h)); }
html:not(.reduce) .salu-lang:not([hidden]) { animation: salu-pop 520ms var(--spring); }
@keyframes salu-pop { from { opacity: 0; transform: translateY(14px) scale(0.72); } }
@media (max-width: 880px) {
  .lang-result { min-height: 76px; }
  .salu-lang { --h: 76px; position: relative; right: auto; top: auto; margin-top: 14px; }
  .lang-finder.has-salu { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: start; }
  .lang-finder.has-salu .lang-search { grid-column: 1 / -1; }
  .lang-finder.has-salu .lang-result { margin: 16px 0 0; text-align: start; }
}

/* Privacy: perched on the card's top edge, covering nothing */
.guard { position: relative; }
.salu-guard { --h: 124px; position: absolute; right: 40px; bottom: calc(100% - 8px); }
@media (max-width: 860px) {
  .guard { margin-top: 104px; }
  .salu-guard { --h: 100px; right: 24px; }
}

/* The last key */
.return-row { position: relative; margin-top: clamp(30px, 4vw, 52px); }
.return-row .big-return { margin-top: 0; }
.salu-return { --h: clamp(120px, 13vw, 188px); position: absolute; z-index: 1; right: calc(100% + var(--h) * 0.22); bottom: -4px; }
@media (max-width: 720px) {
  .return-row { margin-top: 110px; }
  .salu-return { --h: 96px; right: auto; left: 22px; bottom: calc(100% - 6px); }
}

/* The app's intro is taller and narrower than this frame's video slot would crop it to, so it
   sits whole on the white it was filmed on. */
.device-white video { object-fit: contain; background: #fdffff; }