:root {
  --paper: #FBFAF7;
  --surface: #FFFFFF;
  --tint: #F3F2EE;
  --ink: #141613;
  --ink-2: #5A5D57;
  --line: #E8E6E0;
  --line-strong: #CFCCC4;
  --rec: #B93A28;
  --rec-live: #E5452F;
  --pine: #1E4D3F;
  --g: clamp(16px, 3.4vw, 48px);
  --serif: "Newsreader", Georgia, serif;
  --sans: "Instrument Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; overflow-x: clip; background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, figure, q { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img { display: block; max-width: 100%; }
q { quotes: "«" "»"; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 10px; z-index: 50; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 8px; }
.skip:focus { left: 10px; }
.hp { position: absolute; left: -9999px; }

h2 { font: 300 clamp(2.2rem, 1.6rem + 2vw, 3.4rem)/1.04 var(--serif); letter-spacing: -0.03em; text-wrap: balance; }
h3 { font: 500 1.0625rem/1.35 var(--sans); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; font: 500 16px/1 var(--sans); color: var(--paper); background: var(--ink); border: 0; border-radius: 10px; height: 48px; padding: 0 20px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { background: #2B2E29; }
.btn:disabled { opacity: .55; cursor: progress; }
.btn-small { height: 44px; padding: 0 16px; border-radius: 999px; font-size: 15px; }
.btn-quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn-quiet:hover { background: var(--tint); }

/* Nav: sticky, compacts on scroll */
.nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 32px; padding: 0 var(--g); height: 72px; background: rgba(251, 250, 247, .92); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s, height .2s; }
.nav.is-scrolled { border-bottom-color: var(--line); height: 60px; }
.word { font: 400 28px/1 var(--serif); letter-spacing: -0.015em; text-decoration: none; margin-right: auto; display: inline-flex; align-items: center; gap: 10px; }
.word-mark { width: 26px; height: auto; }
.nav nav { display: flex; gap: 30px; font-size: 15px; }
.nav nav a { color: var(--ink-2); text-decoration: none; }
.nav nav a:hover { color: var(--ink); }


.signup { display: flex; flex-wrap: wrap; gap: 8px; }
.field-label { flex-basis: 100%; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.signup input { flex: 1 1 220px; min-width: 0; height: 48px; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; padding: 0 14px; }
.signup input::placeholder { color: #6E716B; }
.signup input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(20, 22, 19, .1); }
.req { font-size: 14px; color: #55584F; margin-top: 10px; }
.req.ok { color: var(--pine); font-weight: 500; }
.req.err { color: var(--rec); font-weight: 500; }

/* The Sinsajo window replica */
.win { background: var(--surface); border-radius: 12px; overflow: hidden; color: var(--ink); box-shadow: 0 0 0 1px rgba(20, 22, 19, .09), 0 1px 2px rgba(20, 22, 19, .06), 0 8px 24px rgba(20, 22, 19, .06); font-size: 14px; }
.win-bar { height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); grid-column: 1 / -1; }
.win-bar i { width: 11px; height: 11px; border-radius: 50%; background: #DEDBD3; }
.win-bar span { margin-left: 8px; font-weight: 500; color: var(--ink); }
.win-pad { padding: 14px 18px 18px; }
.win-float { position: absolute; right: 6%; bottom: 7%; width: min(460px, 76%); }
.tr { display: grid; grid-template-columns: 40px 1fr; gap: 6px; padding: 8px 0; color: var(--ink-2); line-height: 1.45; }
.tr.is-live { color: var(--ink); }
.caret { display: inline-block; width: 2px; height: 1em; background: var(--ink); margin-left: 2px; vertical-align: -2px; animation: breathe 1s steps(1) infinite; }
.list li { display: grid; grid-template-columns: 44px 1fr; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line); line-height: 1.4; }
.list li:last-child { border-bottom: 0; }
.list strong { font-weight: 600; }

/* FAQ */
.faq { padding: clamp(96px, 11vw, 160px) var(--g) 0; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.faq-head p { margin-top: 16px; color: var(--ink-2); }
.faq-head a { color: var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; font-size: 1.125rem; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: rotate(45deg) translate(-3px, -3px); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(225deg); }
.faq details p { color: var(--ink-2); padding-bottom: 22px; max-width: 62ch; }

/* Invite: the hero's layout again, to close */
.invite { padding: var(--sec) var(--g) 0; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(24px, 4vw, 64px); align-items: end; }
.invite h2 { font: 300 clamp(2.8rem, 1.4rem + 4vw, 5rem)/1 var(--serif); letter-spacing: -0.035em; }
.invite-head p { color: var(--ink-2); margin-top: 16px; font: 400 1.375rem/1.42 var(--serif); max-width: 26em; }
.invite .signup { text-align: left; }

/* Optional details after a request */
.more { border: 0; border-radius: 14px; padding: 0; width: min(440px, calc(100% - 32px)); box-shadow: 0 30px 80px -20px rgba(0,0,0,.45); }
.more::backdrop { background: rgba(20, 22, 19, .35); }
.more form { padding: 28px; display: grid; gap: 6px; }
.more h2 { font-size: 2rem; }
.more p { color: var(--ink-2); margin-bottom: 12px; }
.more label { font-size: 14px; font-weight: 500; margin-top: 8px; }
.more input { height: 44px; font: inherit; border: 1px solid var(--line-strong); border-radius: 10px; padding: 0 12px; }
.more input:focus { outline: none; border-color: var(--ink); }
.more-actions { display: flex; gap: 8px; margin-top: 16px; }

/* Footer */
.foot { margin-top: clamp(96px, 11vw, 160px); border-top: 1px solid var(--line); padding: 28px var(--g) 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; font-size: 14px; color: var(--ink-2); overflow: hidden; }
.foot nav { display: flex; gap: 8px 28px; flex-wrap: wrap; }
.foot nav a { text-decoration: none; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; font-size: 15px; padding: 0 2px; }
.foot nav a:hover { color: var(--ink); }
.foot p { display: flex; align-items: center; }
.foot-word { flex-basis: 100%; font: 300 clamp(4rem, 14vw, 13rem)/0.9 var(--serif); margin-left: -0.04em; letter-spacing: -0.05em; color: var(--ink); margin-top: 24px; }


/* Cookie consent: a card at the bottom and a settings dialog. Reject and Accept share one style. */
.cc { position: fixed; left: var(--g); bottom: 16px; z-index: 60; width: min(420px, calc(100% - 2 * var(--g))); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; box-shadow: 0 24px 60px -24px rgba(20, 22, 19, .35); font-size: 15px; }
.cc-title { font: 400 1.35rem/1.2 var(--serif); }
.cc-body { color: var(--ink-2); margin-top: 6px; line-height: 1.5; }
.cc-body a, .cc-panel p a { color: var(--ink); }
.cc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.cc-actions .btn { flex: 1 1 0; min-width: 110px; }
.cc-link { flex-basis: 100%; background: none; border: 0; padding: 0; min-height: 36px; font: 500 14px/1 var(--sans); color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.cc-link:hover { color: var(--ink); }
.cc-panel { border: 0; border-radius: 14px; padding: 0; width: min(520px, calc(100% - 32px)); box-shadow: 0 30px 80px -20px rgba(0,0,0,.45); color: var(--ink); background: var(--surface); }
.cc-panel::backdrop { background: rgba(20, 22, 19, .35); }
.cc-panel form { position: relative; padding: 28px; }
.cc-panel h2 { font: 400 2rem/1.1 var(--serif); padding-right: 32px; }
.cc-panel > form > p { color: var(--ink-2); margin-top: 10px; font-size: 15px; line-height: 1.5; }
.cc-close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border: 0; border-radius: 999px; background: none; font-size: 24px; line-height: 1; color: var(--ink-2); cursor: pointer; }
.cc-close:hover { background: var(--tint); color: var(--ink); }
.cc-cat { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 0; border-top: 1px solid var(--line); margin-top: 16px; }
.cc-cat + .cc-cat { margin-top: 0; }
.cc-cat div { display: grid; gap: 4px; }
.cc-cat b { font-weight: 600; }
.cc-cat span { color: var(--ink-2); font-size: 14px; line-height: 1.45; }
label.cc-cat { cursor: pointer; }
.cc-always { white-space: nowrap; font-size: 13px; }
.cc-switch { appearance: none; flex: none; width: 44px; height: 26px; border-radius: 999px; background: var(--line-strong); position: relative; cursor: pointer; transition: background .15s; margin: 0; }
.cc-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.cc-switch:checked { background: var(--pine); }
.cc-switch:checked::after { transform: translateX(18px); }
.cc-panel-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.cc-panel-actions .btn { flex: 1 1 0; min-width: 130px; }
.foot-btn { background: none; border: 0; padding: 0 2px; font: inherit; font-size: 15px; color: inherit; cursor: pointer; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }
.foot-btn:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .cc-switch, .cc-switch::after { transition: none; } }


/* What stays and what goes: a Sinsajo window over a private conversation */
.where { padding: clamp(96px, 11vw, 160px) var(--g) 0; }
.where-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
.where-head h2 { font-size: clamp(2.8rem, 1.6rem + 3.6vw, 5rem); line-height: 1; }
.where-head p { font: 400 1.25rem/1.45 var(--serif); color: var(--ink-2); max-width: 26em; }
.where-photo { position: relative; margin-top: clamp(32px, 4vw, 48px); height: clamp(420px, 40vw, 580px); border-radius: 10px; overflow: hidden; background: var(--pine); }
.where-shots { position: absolute; inset: 0; }
.where-shots img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0 50%; image-rendering: pixelated; opacity: 0; transition: opacity 1.2s ease; }
.where-shots img.is-on { opacity: 1; }
.where-win { position: absolute; right: clamp(24px, 5vw, 80px); top: 50%; transform: translateY(-50%); width: min(440px, 42%); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 24px 60px -16px rgba(0,0,0,.4); }
.where-rec { display: flex; align-items: center; gap: 16px; padding: 20px 22px 0; }
.where-rec time { font: 500 19px/1 var(--mono); color: var(--rec); letter-spacing: .02em; }
.wave-static { flex: 1; display: flex; align-items: center; gap: 3px; height: 28px; }
.wave-static i { flex: 1; max-width: 3px; height: calc(var(--h) * 1%); min-height: 2px; border-radius: 2px; background: var(--pine); }
.where-on { padding: 8px 22px 16px; color: var(--ink-2); font-size: 14px; border-bottom: 1px solid var(--line); margin: 0 22px; padding-left: 0; padding-right: 0; }
.where-wh { font: 400 1.5rem/1.2 var(--serif); letter-spacing: -0.015em; padding: 18px 22px 8px; }
.where-rows { margin: 0 22px 14px; }
.where-rows div { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.where-rows dt { color: var(--ink); font-weight: 500; }
.where-rows dd { margin: 0; color: var(--ink-2); }
.where-care { margin-top: clamp(56px, 6vw, 88px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px clamp(24px, 4vw, 64px); align-items: end; }
.where-care-h { font: 300 clamp(2rem, 1.4rem + 2vw, 3.2rem)/1.05 var(--serif); letter-spacing: -0.03em; }
.where-sect { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 0; font: 400 1.25rem/1.4 var(--serif); color: var(--ink); }
.where-sect li:not(:last-child)::after { content: "·"; margin: 0 12px; color: var(--ink-2); }
@media (max-width: 980px) {
  .where-head, .where-care { grid-template-columns: 1fr; }
  .where-photo { height: auto; overflow: visible; background: none; }
  .where-shots { position: relative; inset: auto; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--pine); }
  .where-win { position: static; transform: none; width: auto; margin-top: 16px; box-shadow: 0 0 0 1px var(--line); }
}
@media (prefers-reduced-motion: reduce) { .where-shots img { transition: none; } }

/* Trust block at the top of the footer: facts that hold today */
.trust { flex-basis: 100%; padding: 8px 0 36px; border-bottom: 1px solid var(--line); }
.trust-h { font: 300 clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem)/1.05 var(--serif); letter-spacing: -0.025em; color: var(--ink); }
.trust-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px clamp(20px, 2.4vw, 36px); }
.trust-list li { display: grid; gap: 6px; align-content: start; border-top: 1px solid var(--line); padding-top: 16px; }
.trust-list svg { width: 22px; height: 22px; fill: none; stroke: var(--pine); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 6px; }
.trust-list b { font-weight: 500; font-size: 15px; color: var(--ink); line-height: 1.35; }
.trust-list span { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.trust-more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 16px; font-size: 15px; color: var(--ink); text-underline-offset: 3px; }
@media (max-width: 980px) { .trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .trust-list { grid-template-columns: 1fr; gap: 0; } .trust-list li { grid-template-columns: 22px 1fr; column-gap: 14px; padding: 14px 0; } .trust-list svg { grid-row: span 2; margin: 1px 0 0; } }
.where-care { grid-template-columns: 1fr; gap: 18px; align-items: start; }
.where-sect { max-width: 68rem; }
.shots-toggle { position: absolute; left: 14px; bottom: 14px; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 999px; background: rgba(251, 250, 247, .92); box-shadow: 0 1px 2px rgba(0,0,0,.15); cursor: pointer; display: grid; place-items: center; }
.shots-toggle::before { content: ""; width: 10px; height: 12px; border-left: 3px solid var(--ink); border-right: 3px solid var(--ink); box-sizing: border-box; }
.shots-toggle.is-paused::before { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent var(--ink); margin-left: 3px; }
.shots-toggle:hover { background: var(--surface); }
.shots-toggle[hidden] { display: none; }

/* ───────── Shared layout ───────── */
:root {
  --sys: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Instrument Sans", system-ui, sans-serif;
  --app-bg: #FAF9F6;
  --app-side: #F3F2EE;
  --app-line: #E6E4DE;
  --app-ink: #1C1D1B;
  --app-ink2: #6A6C67;
  --sec: clamp(96px, 11vw, 160px);
  --win: 0 0 0 1px rgba(0,0,0,.12), 0 12px 32px -18px rgba(0,0,0,.28);
}
section { scroll-margin-top: 72px; }
.sec-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px clamp(24px, 4vw, 64px); align-items: start; }
.sec-head > p { padding-top: .55em; }
.sec-head p, .lede { font: 400 1.25rem/1.45 var(--serif); color: var(--ink-2); max-width: 30em; }
.soon { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; margin-left: 6px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-strong); font: 500 12px/1 var(--sans); color: var(--ink-2); vertical-align: 2px; white-space: nowrap; }
.ic { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ic-sm { width: .9em; height: .9em; }

/* ───────── The app, rebuilt in HTML. 1em is the app's 13 pt body. ───────── */
.app { font: 400 1em/1.45 var(--sys); color: var(--app-ink); background: var(--app-bg); border-radius: .95em; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.14), 0 2.4em 5em -1.6em rgba(10, 30, 22, .55); text-align: left; letter-spacing: 0; }
.app time, .items time { font: 500 .86em/1.7 ui-monospace, "SF Mono", var(--mono); color: var(--rec); }
.check { width: 1.1em; height: 1.1em; border-radius: 50%; box-shadow: inset 0 0 0 1.2px #8D8F8A; margin-top: .18em; flex: none; }
.avatar { display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--app-line); font: 400 .9em/1 var(--serif); background: #fff; }
.avatar-sm { width: 1.45em; height: 1.45em; font-size: .75em; margin: 0 .35em 0 .15em; }

.app-hero { display: grid; grid-template-columns: 15.2em minmax(0, 1fr); min-height: 52em; }
.app-side { background: var(--app-side); border-right: 1px solid var(--app-line); padding: 1.05em 1.35em; display: flex; flex-direction: column; }
.app-lights { display: flex; gap: .62em; align-items: center; height: 1em; margin-bottom: 2.4em; }
.app-lights i { width: .95em; height: .95em; border-radius: 50%; background: #EE6A5F; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12); }
.app-lights i:nth-child(2) { background: #F5BF4F; }
.app-lights i:nth-child(3) { background: #61C554; }
.ic-search { margin-left: auto; width: 1.25em; height: 1.25em; stroke-width: 1.5; }
.app-nav li { display: flex; align-items: center; gap: .75em; height: 2.12em; }
.app-nav li span { margin-left: auto; color: var(--app-ink2); }
.app-label { color: var(--app-ink2); font-size: .9em; margin: 1.6em 0 .4em; }
.app-me { margin-top: auto; display: flex; align-items: center; gap: .7em; font-weight: 500; }
.app-me .ic { margin-left: auto; width: 1.3em; height: 1.3em; }
.app-main { display: flex; flex-direction: column; min-width: 0; }
.app-bar { display: flex; align-items: center; height: 3.55em; padding: 0 1.2em 0 2.35em; }
.app-bar-r { margin-left: auto; display: flex; gap: .55em; align-items: center; }
.seg { display: inline-flex; align-items: center; height: 1.9em; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--app-line); background: #fff; }
.seg > span { display: inline-flex; align-items: center; gap: .4em; padding: 0 .75em; height: 100%; }
.seg > span + span { box-shadow: -1px 0 0 var(--app-line); }
.seg-round { padding: 0 .65em; letter-spacing: .05em; }
.rec-btn { display: inline-flex; align-items: center; gap: .45em; height: 1.9em; padding: 0 1em; border-radius: 999px; background: #161714; color: #fff; font-weight: 500; }
.rec-btn i { width: .55em; height: .55em; border-radius: 50%; background: #E5452F; }
.app-cols { display: grid; grid-template-columns: minmax(0, 1fr) 20.6em; gap: 2.7em; padding: .9em 2.25em 0 2.75em; }
.doc-title { font: 500 2.2em/1.15 var(--serif); letter-spacing: -0.01em; color: var(--app-ink); }
.doc-meta { color: var(--app-ink2); font-size: .88em; margin-top: .45em; }
.doc-tabs { display: flex; gap: 1.6em; margin-top: 1.9em; border-bottom: 1px solid var(--app-line); }
.doc-tabs > * { padding-bottom: .55em; font-weight: 400; color: var(--app-ink2); }
.doc-tabs b { color: var(--app-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--app-ink); }
.doc-overview { margin-top: 1.1em; line-height: 1.7; }
.doc-h { display: flex; align-items: center; gap: .45em; margin-top: 1.8em; padding-bottom: .55em; border-bottom: 1px solid var(--app-line); font-weight: 600; font-size: 1.05em; }
.doc-h span { font-weight: 400; color: var(--app-ink2); font-size: .85em; }
.doc-select { margin-left: auto; font-style: normal; font-weight: 400; font-size: .85em; padding: .25em .75em; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--app-line); background: #fff; }
.doc-fade { opacity: .45; }
.items li { display: flex; gap: 1em; align-items: flex-start; padding: .62em 0; border-bottom: 1px solid var(--app-line); }
.items li:last-child { border-bottom: 0; }
.items time, .items button { flex: none; width: 2.6em; }
.items small { display: block; color: var(--app-ink2); font-size: .85em; margin-top: .1em; }
.app-aside { padding-top: .2em; }
.aside-h { color: var(--app-ink2); margin-top: 1.4em; }
.aside-btns { display: flex; gap: .45em; margin-top: .55em; }
.qbtn { display: inline-flex; align-items: center; gap: .35em; height: 1.95em; padding: 0 .8em; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--app-line); background: #fff; }
.aside-meta { display: flex; align-items: center; margin-top: 1.1em; color: var(--app-ink); }
.aside-meta + .aside-meta { margin-top: .55em; color: var(--app-ink2); }
.aside-meta b { color: var(--pine); font-weight: 400; margin-left: .45em; }
.figma { width: 1.1em; height: 1.1em; margin-right: .5em; border-radius: .25em; background: conic-gradient(#F24E1E 0 25%, #A259FF 0 50%, #1ABCFE 0 75%, #0ACF83 0); }

/* The recorded video: a small Tempo screen, a play pill and the marker line */
.vid-screen { position: relative; aspect-ratio: 16 / 10; border-radius: .7em; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--app-line); }
.tempo { position: absolute; inset: 0; display: grid; grid-template-columns: 22% 1fr; font-size: .42em; color: #333; }
.tempo-side { padding: 1.2em 1.1em; display: flex; flex-direction: column; gap: .3em; border-right: 1px solid #EEE; color: #999; }
.tempo-side b { color: #222; margin-bottom: .5em; }
.tempo-form { padding: 4.5em 0 0 9%; display: flex; flex-direction: column; gap: .25em; width: 74%; }
.tempo-form b { font-size: 1.9em; color: #1a1a1a; margin: .1em 0 .2em; letter-spacing: -.01em; }
.tempo-form small { color: #9a9a9a; font-size: .85em; }
.tempo-form label { color: #555; font-size: .85em; margin-top: .6em; }
.tempo-form i { height: 2.2em; border: 1px solid #E3E3E3; border-radius: .35em; }
.tempo-cta { align-self: flex-start; margin-top: 1em; padding: .4em 1.6em; border-radius: .35em; background: #DCE8FB; color: #9BB3D6; }
.vid-play { position: absolute; left: 4%; bottom: 7%; display: inline-flex; align-items: center; gap: .55em; padding: .32em .9em .32em .32em; border-radius: 999px; background: rgba(28, 29, 27, .78); color: #fff; }
.vid-play svg { width: 2em; height: 2em; padding: .5em; border-radius: 50%; background: #fff; fill: #111; }
.vid-play time { color: #fff; font-size: 1em; }
.scrub { position: relative; height: 1.2em; margin-top: .9em; }
.scrub::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: #D9D7D1; border-radius: 2px; }
.scrub-fill { position: absolute; left: 0; top: 50%; height: 2px; margin-top: -1px; width: var(--at); background: var(--app-ink); border-radius: 2px; }
.scrub i { position: absolute; left: var(--at); top: 50%; width: 1.5px; height: .9em; margin: -.45em 0 0 -.75px; background: var(--rec); }
.scrub b { position: absolute; left: var(--at); top: 50%; width: .8em; height: .8em; margin: -.4em 0 0 -.4em; border-radius: 50%; background: var(--app-ink); box-shadow: 0 0 0 2px var(--app-bg); }

/* ───────── The floating pill, as RecordingIndicator draws it ───────── */
.pill { position: relative; display: inline-flex; align-items: center; width: 24.6em; height: 3.38em; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.1), 0 .25em .7em rgba(0,0,0,.16); font: 400 13px/1.2 var(--sys); color: #1C1E21; }
.pill-live, .pill-saved { display: flex; align-items: center; width: 100%; height: 100%; }
.pill-live { padding: 0 .55em 0 1.15em; }
.pill-saved { position: absolute; inset: 0; padding: 0 .55em 0 1.2em; gap: .75em; opacity: 0; pointer-events: none; }
.pill-saved b { font-weight: 500; margin-right: auto; }
.pill.is-saved .pill-live { opacity: 0; }
.pill.is-saved .pill-saved { opacity: 1; }
.pill-live, .pill-saved { transition: opacity .25s ease; }
.dot { position: relative; width: .62em; height: .62em; margin-right: .85em; border-radius: 50%; background: #E6332A; flex: none; }
.dot::after { content: ""; position: absolute; inset: -.3em; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(230, 51, 42, .35); }
.pill-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pill-t b { font-weight: 600; }
.pill-t small { font-size: .85em; color: #666B75; }
.wave { display: grid; grid-auto-flow: column; grid-auto-columns: 2px; column-gap: 2px; align-items: stretch; width: 4.9em; height: 2.15em; margin: 0 .75em; position: relative; }
.wave span { display: grid; grid-template-rows: 1fr 1fr; row-gap: 1px; height: 100%; }
.wave i { display: block; width: 2px; border-radius: 1px; min-height: 1px; }
.wave i:first-child { align-self: end; height: calc(var(--m) * 1%); background: #2E6EEB; transform-origin: bottom; }
.wave i:last-child { align-self: start; height: calc(var(--s) * 1%); background: #A3A8AE; transform-origin: top; }
.wave-mono span { grid-template-rows: 1fr; align-items: center; }
.wave-mono i:first-child { align-self: center; height: calc(var(--m) * 1.6%); transform-origin: center; }
.wave-mono i:last-child { display: none; }
.pill-time { font: 500 1.08em/1 ui-monospace, "SF Mono", var(--mono); font-variant-numeric: tabular-nums; }
.pill-stop { position: relative; width: 2.15em; height: 2.15em; margin-left: .75em; border-radius: 50%; background: rgba(0,0,0,.06); flex: none; }
.pill-stop::after { content: ""; position: absolute; inset: .72em; border-radius: .15em; background: #E6332A; }
.ok { position: relative; width: 1.15em; height: 1.15em; border-radius: 50%; background: #1F9E45; flex: none; }
.ok::after { content: ""; position: absolute; left: .37em; top: .2em; width: .3em; height: .58em; border: solid #fff; border-width: 0 .13em .13em 0; transform: rotate(45deg); }
.pill-btn { padding: .35em .75em; border-radius: 999px; background: rgba(0,0,0,.06); font-weight: 500; font-size: .92em; }
.pill-lg { font-size: 19px; }

/* ───────── 1. Hero ───────── */
.hero { padding: clamp(16px, 2vw, 24px) var(--g) 0; }
.hero-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: start; padding-top: clamp(16px, 2.6vw, 40px); }
.hero-side { padding-top: .7rem; }
.hero h1 { font: 300 clamp(3rem, 1.2rem + 4.6vw, 5.5rem)/.98 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -0.035em; }
.sub { font: 400 1.375rem/1.42 var(--serif); color: var(--ink-2); max-width: 30em; margin-bottom: 20px; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 0; margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.facts li:not(:last-child)::after { content: "·"; margin: 0 8px; }
.stage { position: relative; margin-top: clamp(32px, 4vw, 56px); aspect-ratio: 16 / 8.6; border-radius: 10px; overflow: hidden; background: var(--pine); container-type: inline-size; }
.stage-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; image-rendering: pixelated; }
.stage .app { position: absolute; left: 27%; right: 3%; top: 7%; bottom: 0; min-height: 0; font-size: .92cqw; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.stage .app-main { position: relative; overflow: hidden; }
.hero-ask { position: absolute; left: 2.75em; right: 25.6em; bottom: 1.3em; display: flex; justify-content: space-between; align-items: center; height: 3.4em; padding: 0 .4em 0 1.3em; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--app-line), 0 .5em 1.4em -.6em rgba(0,0,0,.25); color: var(--app-ink2); }
.hero-ask::before { content: ""; position: absolute; left: -2.75em; right: -2em; bottom: -1.3em; height: 7em; z-index: -1; background: linear-gradient(rgba(250,249,246,0), var(--app-bg) 45%); }
.hero-ask em { font-style: normal; font-weight: 500; color: var(--app-ink); padding: .45em .9em; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--app-line); }
.stage-pill { display: none; position: absolute; z-index: 2; left: 62%; top: 2.2%; transform: translateX(-50%); font-size: 1.15cqw; transition: opacity .4s ease, transform .4s ease; }
.stage-pill .pill { font-size: max(10px, 1.15cqw); }
.js .stage-pill { display: block; }
.stage-pill.is-gone { opacity: 0; transform: translate(-50%, -8px); }
.js [data-hero] [data-reveal] { opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease; }
.js [data-hero] [data-reveal].in { opacity: 1; transform: none; }

/* ───────── 2. Menu bar ───────── */
.bar { padding: var(--sec) var(--g) 0; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.bar-copy .lede { margin-top: 20px; }
.desk { position: relative; aspect-ratio: 16 / 11; border-radius: 10px; overflow: hidden; background: var(--pine); font: 400 13px/1.25 var(--sys); color: #1A1A1A; }
.desk-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.mb { position: absolute; inset: 0 0 auto 0; height: 30px; display: flex; align-items: center; gap: 18px; padding: 0 14px 0 18px; background: rgba(246, 246, 244, .72); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }
.mb-app { font-weight: 700; }
.mb-r { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.mb-item { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.mb-item.is-open { background: rgba(0,0,0,.1); }
.mb-mark { width: 17px; height: 13px; fill: #1A1A1A; }
.mb-item.is-rec .q2 { fill: #E5452F; }
.mb-time:empty { display: none; }
.mb-clock { white-space: pre; }
.menu { position: absolute; top: 36px; right: 118px; width: 300px; padding: 5px; border-radius: 11px; background: rgba(248, 248, 247, .9); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); box-shadow: 0 0 0 .5px rgba(0,0,0,.2), 0 12px 36px -8px rgba(0,0,0,.4); transition: opacity .2s ease; }
.menu-rec { display: none; }
.mi { display: flex; align-items: center; gap: 12px; padding: 4px 9px; border-radius: 6px; min-height: 24px; }
.mi > span { flex: 1; display: flex; flex-direction: column; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi small { font-size: 11.5px; color: #6E6E73; overflow: hidden; text-overflow: ellipsis; }
.mi kbd { font: 400 13px/1 var(--sys); color: #8A8A8E; letter-spacing: .04em; }
.mi.is-hl { background: #0A64D8; color: #fff; }
.mi.is-hl kbd, .mi.is-hl small { color: rgba(255,255,255,.85); }
.chev { width: 6px; height: 6px; border: solid #8A8A8E; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); margin-right: 3px; }
.menu hr { border: 0; border-top: 1px solid rgba(0,0,0,.1); margin: 5px 9px; }
.mh { padding: 3px 9px 1px; font-size: 11.5px; font-weight: 600; color: #8A8A8E; }
.desk[data-state="closed"] .menu { opacity: 0; }
.desk[data-state="recording"] .menu[data-menu="idle"] { display: none; }
.desk[data-state="recording"] .menu-rec { display: block; }

/* ───────── 3. How it works ───────── */
.how { padding: var(--sec) var(--g) 0; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.how-side { position: sticky; top: 104px; }
.how-nav { margin-top: 36px; border-top: 1px solid var(--line); }
.how-nav a { display: flex; align-items: center; gap: 14px; min-height: 60px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink-2); font-size: 1.125rem; transition: color .2s; }
.how-nav a:hover { color: var(--ink); }
.how-nav a[aria-current="step"] { color: var(--ink); font-weight: 500; }
.n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); font: 500 12px/1 var(--mono); flex: none; transition: background .2s, color .2s; }
.how-nav a[aria-current="step"] .n { background: var(--ink); color: var(--paper); box-shadow: none; }
.step + .step { margin-top: clamp(72px, 9vw, 128px); }
.step-copy { margin-bottom: 20px; max-width: 36em; }
.step-copy p { margin-top: 6px; }
.step h3 { display: flex; align-items: center; gap: 12px; font: 400 1.75rem/1.2 var(--serif); letter-spacing: -0.02em; }
.step h3 .n { display: none; }
.step-copy p { color: var(--ink-2); }
.step-visual { position: relative; border-radius: 10px; overflow: hidden; container-type: inline-size; }
.step-screen { aspect-ratio: 16 / 10; background: #fff; box-shadow: var(--win); border-radius: 12px; }
.screen { position: absolute; inset: 0; font-size: 2.6cqw; }
.screen .tempo { opacity: .55; }
.pill-zone { position: absolute; left: 0; right: 0; top: 7%; display: grid; justify-items: center; gap: 14px; }
.pill-notes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font: 500 13px/1 var(--sans); transition: opacity .3s; }
.pill-notes span { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--tint); color: var(--ink); }
.pill-notes kbd { font: 500 12px/1 var(--mono); }
.step-plain { overflow: visible; }
.sheet { background: var(--app-bg); border-radius: 12px; box-shadow: var(--win); padding: 18px 26px 22px; font: 400 15px/1.55 var(--sys); color: var(--app-ink); }
.sheet .doc-tabs { margin-top: 0; }
.lines li { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--app-line); min-height: 4.4em; }
.lines li:last-child { border-bottom: 0; }
.lines time { font: 500 13px/1.75 ui-monospace, "SF Mono", var(--mono); color: var(--rec); }
.typing::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -.15em; background: var(--app-ink); }
.js [data-type] .lines li.wait { opacity: 0; }
.sheet-split { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 28px; align-items: start; padding: 22px; }
.vid-big .vid-screen { font-size: 15px; }
.vid-big .tempo { font-size: 7.5px; }
.vid-big .vid-play { font-size: 13px; }
.vid-big .scrub { font-size: 15px; }
.scrub-fill, .scrub b { transition: width .5s ease, left .5s ease; }
.seek-list .doc-h { margin-top: 0; font-size: 15px; }
.seek-list .doc-h ~ .doc-h { margin-top: 18px; }
.seek-list .items li { font-size: 14px; gap: 10px; }
.seek-list button { all: unset; box-sizing: border-box; flex: none; width: 46px; cursor: pointer; font: 500 12.5px/1.75 ui-monospace, "SF Mono", var(--mono); color: var(--rec); border-radius: 4px; text-align: left; padding-left: 2px; }
.seek-list button:hover { text-decoration: underline; text-underline-offset: 3px; }
.seek-list button[aria-pressed="true"] { background: rgba(185, 58, 40, .1); }
.seek-list button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ───────── 4. Use cases ───────── */
.uses { padding: var(--sec) var(--g) 0; }
.use-grid { margin-top: clamp(32px, 4vw, 48px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 4vw, 56px) clamp(16px, 2vw, 28px); }
.use { display: flex; flex-direction: column; }
.use h3 { font: 400 1.6rem/1.2 var(--serif); letter-spacing: -0.02em; }
.use-what { color: var(--ink-2); margin: 4px 0 16px; }
.card { flex: 1; background: var(--app-bg); border-radius: 12px; box-shadow: 0 0 0 1px rgba(20, 22, 19, .1); padding: 18px 22px 12px; font: 400 14.5px/1.5 var(--sys); color: var(--app-ink); }
.card-title { display: flex; justify-content: space-between; gap: 12px; font: 400 1.35rem/1.25 var(--serif); }
.card-title span { font: 500 12.5px/1.9 var(--mono); color: var(--app-ink2); }
.card .doc-h { margin-top: 18px; font-size: 14.5px; }
.items-sm li { padding: 8px 0; gap: 12px; }
.items-sm time { width: 3.2em; font-size: 12.5px; }
.card-note { margin: 4px -22px -12px; padding: 12px 22px; border-top: 1px solid var(--app-line); font-size: 13.5px; color: var(--app-ink2); }

/* ───────── 5. Dictation ───────── */
.dict { padding: var(--sec) var(--g) 0; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.dict-copy { order: 2; }
.dict h2 { font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.8rem); }
.dict .lede { margin-top: 20px; }
.lede-2 { margin-top: 16px; color: var(--ink-2); max-width: 30em; }
.bar-copy .lede, .dict .lede { max-width: 26em; }
.dict-visual { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 4px; }
.chat { order: 2; width: 100%; background: #fff; border-radius: 12px; box-shadow: var(--win); font: 400 15px/1.5 var(--sys); color: #1D1C1D; overflow: hidden; }
.chat-bar { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-bottom: 1px solid #ECECEC; }
.chat-bar i { width: 11px; height: 11px; border-radius: 50%; background: #E2E0DB; }
.chat-bar span { margin-left: 10px; font-weight: 700; font-size: 14px; }
.chat-msgs { padding: 18px 18px 6px; min-height: 110px; }
.msg { display: flex; gap: 10px; }
.msg > span:last-child { display: flex; flex-direction: column; }
.msg b { font-weight: 700; font-size: 14px; }
.msg .avatar { font-size: 15px; width: 34px; height: 34px; border-radius: 8px; background: #E9EEF0; box-shadow: none; flex: none; }
.compose { padding: 10px 18px 18px; }
.compose-field { min-height: 72px; padding: 10px 12px; border-radius: 8px; box-shadow: inset 0 0 0 1px #DDDDDD; }
.compose-ph { color: #8A8A8A; display: none; }
.pill-dict { width: 21.5em; padding: 0 1.15em; gap: .85em; }
.pill-dict .pill-t { flex: 1; }
.pill-mic svg { width: 1.15em; height: 1.15em; fill: none; stroke: #2E6EEB; stroke-width: 1.6; stroke-linecap: round; display: block; }
.pill-spin, .spin { width: 1.1em; height: 1.1em; border-radius: 50%; border: 2px solid rgba(0,0,0,.12); border-top-color: #555; flex: none; }
.pill-dict .pill-mic, .pill-dict .pill-spin, .pill-dict .wave { display: none; }
.pill-dict .wave { margin: 0; }
[data-dictate][data-state="dictating"] .pill-mic, [data-dictate][data-state="dictating"] .wave { display: flex; }
[data-dictate][data-state="dictating"] .ok, [data-dictate][data-state="transcribing"] .ok { display: none; }
[data-dictate][data-state="transcribing"] .pill-spin { display: block; }
[data-dictate]:is([data-state="dictating"], [data-state="transcribing"]) .compose-text { display: none; }
[data-dictate]:is([data-state="dictating"], [data-state="transcribing"]) .compose-ph { display: inline; }
.compose-text { animation: none; }
[data-dictate][data-state="pasted"].was-live .compose-text { animation: land .35s ease; }
@keyframes land { from { opacity: 0; } }

/* ───────── 6. Ask ───────── */
.ask { padding: var(--sec) var(--g) 0; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.ask .sec-head { grid-template-columns: 1fr; }
.ask .sec-head p { margin-top: 4px; }
.ask-win { margin: 0; }
.app-ask { box-shadow: var(--win); position: relative; max-width: 940px; margin: 0; display: grid; padding: 3.2em 4.2em 6.4em; font-size: 15px; }
.ask-home, .ask-answer { grid-area: 1 / 1; transition: opacity .35s ease; }
.ask-home { opacity: 0; pointer-events: none; }
.js [data-ask]:not(.is-answered) .ask-home { opacity: 1; }
.js [data-ask]:not(.is-answered) .ask-answer { opacity: 0; }
.ask-from { display: flex; align-items: center; gap: .4em; margin-top: 2em; font-weight: 500; color: var(--app-ink2); font-size: .92em; }
.ask-sugg { margin-top: .6em; }
.ask-sugg li { display: flex; justify-content: space-between; align-items: center; height: 3em; border-bottom: 1px solid var(--app-line); }
.ask-sugg span { color: var(--app-ink2); }
.ask-sugg li.is-hl { color: var(--rec); }
.ask-sum { margin: .7em 0 1.4em; }
.src { display: flex; align-items: center; gap: .6em; padding: .9em 0 .55em; border-bottom: 1px solid var(--app-line); color: var(--app-ink2); font-weight: 500; font-size: .92em; }
.src span:last-child { font-weight: 400; }
.src-ic { width: 1.2em; height: 1.2em; border-radius: .3em; flex: none; }
.src-figma { background: conic-gradient(#F24E1E 0 25%, #A259FF 0 50%, #1ABCFE 0 75%, #0ACF83 0); }
.src-web { background: radial-gradient(circle at 50% 50%, #fff 0 22%, #2F7CF6 23%); }
.ask-answer .items + .src { margin-top: .4em; }
.ask-by { margin-top: 1.4em; color: var(--app-ink2); font-size: .9em; }
.ask-bar { position: absolute; left: 4.2em; right: 4.2em; bottom: 1.4em; display: flex; justify-content: space-between; align-items: center; height: 3.4em; padding: 0 .4em 0 1.3em; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--app-line), 0 6px 18px -10px rgba(0,0,0,.25); color: var(--app-ink2); }
.ask-bar em { font-style: normal; color: var(--app-ink); font-weight: 500; font-size: .9em; padding: .45em .9em; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--app-line); }
.js [data-ask] .ask-answer > * { transition: opacity .4s ease; }
.js [data-ask].is-answered:not(.is-shown) .ask-answer > *:not(.doc-title) { opacity: 0; }

/* ───────── 7. Integrations ───────── */
.send { padding: var(--sec) var(--g) 0; }
.send-label { font: 500 14px/1 var(--sans); color: var(--ink-2); margin-bottom: 16px; }
.send-lead { margin-top: clamp(32px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.send-copy .send-cap + .send-cap { margin-top: 10px; }
.app-settings { padding: 30px 34px 34px; font-size: 14px; box-shadow: var(--win); }
.set-title { font: 500 2em/1.1 var(--serif); margin-bottom: 18px; }
.set-h { color: var(--app-ink2); font-weight: 500; margin: 18px 0 8px; }
.set-box { background: #fff; border-radius: 10px; box-shadow: 0 0 0 1px var(--app-line); padding: 0 16px; }
.set-row { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 8px 0; }
.set-row + .set-row { border-top: 1px solid var(--app-line); }
.set-row > span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.set-row small { color: var(--app-ink2); font-size: .93em; }
.set-row em { font-style: normal; }
.set-val { margin-right: 4px; }
.send-pair { margin-top: clamp(20px, 2vw, 28px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.tile { border-radius: 12px; box-shadow: 0 0 0 1px var(--line-strong); padding: clamp(22px, 3vw, 36px); display: flex; flex-direction: column; gap: 16px; }
.tile .send-label { margin-bottom: -8px; }
.tile .send-cap { margin-top: auto; }
.mcp-h { font: 400 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.15 var(--serif); letter-spacing: -0.02em; text-wrap: balance; }
.send-cap { color: var(--ink-2); margin-top: 14px; max-width: 34em; }
.rows { display: grid; gap: 8px; }
.toast { display: flex; align-items: center; gap: 8px; margin-top: 6px; font: 500 14px/1.4 var(--sys); color: var(--ink); font-size: 14px; transition: opacity .3s; }
.toast .ok { font-size: 15px; }
.js [data-send]:not(.is-done) .toast { opacity: 0; }
.row-card { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 12px 16px; border-radius: 12px; background: var(--app-bg); box-shadow: 0 0 0 1px rgba(0,0,0,.1); font: 400 15px/1.45 var(--sys); color: var(--app-ink); overflow: hidden; }
.row-card time { font: 500 13px/1.7 ui-monospace, "SF Mono", var(--mono); color: var(--rec); flex: none; }
.row-status { display: flex !important; align-items: center; gap: 8px; min-height: 1.5em; }
.row-status .spin { width: 12px; height: 12px; display: none; }
[data-send] .row-card.is-sending .row-status .spin { display: block; animation: spin .8s linear infinite; }
.row-card::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--ink); opacity: 0; }
[data-send] .row-card.is-sending::after { opacity: 1; animation: fill 1.1s ease-in-out forwards; }
@keyframes fill { to { width: 100%; } }
@keyframes spin { to { transform: rotate(1turn); } }
.dest-lines { margin-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--ink); }
.dest-lines div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 6px clamp(24px, 4vw, 64px); padding: 18px 0; border-bottom: 1px solid var(--line); }
.dest-lines dt { color: var(--ink-2); font-size: 15px; padding-top: 3px; }
.dest-lines dd { margin: 0; font-size: 17px; max-width: 40em; }
.dest-lines .soon { margin: 0 0 0 4px; }
.soon-item { display: inline-block; margin-right: 20px; }
.ev-card { background: #fff; border-radius: 6px; padding: 4% 4% 3%; box-shadow: 0 0 0 1px rgba(0,0,0,.1); container-type: inline-size; }
.ev-shot { position: relative; aspect-ratio: 16 / 9; background: #111; padding: 3% 7%; }
.ev-shot .tempo { position: relative; height: 100%; background: #fff; font-size: 1.5cqw; border-radius: 3px; }
.tempo-form { position: relative; }
.ev-cursor { position: absolute; width: 2.2em; left: 46%; top: 66%; }
.ev-title { font: 400 4.4cqw/1.2 var(--serif); margin-top: 5%; letter-spacing: -0.01em; color: #161616; }
.ev-meta { font-size: 2.4cqw; color: #555; margin-top: 1.5%; }
.ev-meta time { font: 500 1em/1 var(--mono); color: var(--rec); }
.ev-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 4%; padding-top: 3%; border-top: 1px solid #E5E5E5; font: 400 2.5cqw/1 var(--serif); color: #161616; }
.ev-foot span:last-child { font: 400 2.1cqw/1 var(--mono); color: #666; }
.ev-foot i { display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: #E5452F; margin-right: .3em; vertical-align: .05em; }

/* Kept sections that used to share a rule with the old hero */
@media (prefers-reduced-motion: reduce) {
  .stage-pill, .menu, .pill-live, .pill-saved, .scrub-fill, .scrub b { transition: none; }
}

/* ───────── Narrow screens ───────── */
@media (max-width: 980px) {
  .nav nav { display: none; }
  .hero-top, .sec-head, .bar, .how, .dict, .faq, .ask { grid-template-columns: 1fr; }
  .how-side { position: static; }
  .how-nav { display: none; }
  .step h3 .n { display: inline-grid; }
  .step-copy { grid-template-columns: 1fr; }
  .dict-copy { order: 0; }
  .send-lead, .send-pair, .invite { grid-template-columns: 1fr; }
  .dest-lines div { grid-template-columns: 1fr; }
  .stage { aspect-ratio: auto; height: 640px; }
  .stage .app { left: 32%; right: 12px; top: 56px; font-size: 1.15cqw; }
  .stage-pill { left: 66%; }
}
@media (max-width: 700px) {
  .stage { height: 640px; }
  .stage .doc-overview { display: none; }
  .stage .hero-ask { display: none; }
  .stage-photo { object-position: 18% 40%; }
  .app-settings { padding: 18px; font-size: 13px; }
  .set-row { flex-wrap: wrap; }
  .set-row > span { flex-basis: 100%; }
  .screen { font-size: 4cqw; }
  .pill-notes { padding: 0 12px; }
  .stage .app { left: 12px; top: 120px; font-size: 3.5cqw; grid-template-columns: 1fr; }
  .stage-pill { left: 50%; top: 52px; }
  .stage .app-hero .hero-ask { left: 1.2em; right: 1.2em; }
  .facts { display: grid; gap: 2px; }
  .facts li::after { display: none; }
  .vid-big .tempo { font-size: 5px; }
  .vid-big .vid-play { font-size: 11px; }
  .stage .app-side, .stage .app-aside, .stage .app-bar .seg:first-child, .stage .seg-round { display: none; }
  .stage .app-bar { padding: 0 .9em; justify-content: flex-end; }
  .stage .app-bar-r { margin-left: 0; }
  .stage .app-cols { grid-template-columns: 1fr; padding: .4em 1.2em 0; }
  .stage .app-bar .seg > span:first-child .ic { display: none; }
  .stage-pill { top: 14px; }
  .stage-pill .pill { font-size: 11px; }
  .use-grid { grid-template-columns: 1fr; }
  .desk { aspect-ratio: auto; height: 400px; }
  .menu { right: 12px; left: 12px; width: auto; }
  .mb > span:not(.mb-app):not(.mb-r) { display: none; }
  .mb-clock { display: none; }
  .pill-lg { font-size: 13px; }
  .pill-dict { font-size: 13px; }
  .sheet { padding: 14px 16px 16px; font-size: 14px; }
  .lines li { grid-template-columns: 44px 1fr; }
  .sheet-split { grid-template-columns: 1fr; padding: 14px; }
  .app-ask { padding: 1.6em 1.3em 5.4em; font-size: 14px; }
  .app-ask .doc-title { font-size: 1.7em; }
  .ask-bar { left: 1em; right: 1em; }
  .ask-win { padding: 12px; }
  .src span:last-child { display: none; }
  .signup input, .signup .btn { flex: 1 1 100%; height: 48px; }
  .hero h1 { font-size: 2.6rem; }
}

/* The recorded screen sits under the pill; tiles read heading, line, proof */
.screen .tempo-form { padding-top: 30%; }
.tile .send-cap { margin-top: 0; order: 2; }
.tile > .rows, .tile > .ev-card { order: 3; }
.tile > .send-label { order: 0; }
.tile > .mcp-h { order: 1; }

/* Round 4 */
p { text-wrap: pretty; }
.stage .doc-fade { display: none; }
.step-screen { aspect-ratio: 16 / 8; }
.screen .tempo { opacity: .8; }
.screen .tempo-form { padding-top: 26%; }
.shop { position: relative; width: 34%; height: 100%; margin: 0 auto; background: #fff; padding: 6% 3% 0; font: 400 1.9cqw/1.4 var(--sys); color: #222; display: flex; flex-direction: column; gap: .35em; }
.shop b { font-size: 1.5em; margin-bottom: .3em; }
.shop p { display: flex; justify-content: space-between; padding: .3em 0; border-bottom: 1px solid #EEE; }
.shop-pay { margin-top: auto; margin-bottom: 8%; font-style: normal; text-align: center; padding: .6em; border-radius: .4em; background: #1E2321; color: #fff; font-weight: 600; }
.shop .ev-cursor { left: 62%; top: 84%; width: 1.4em; }
.ev-shot { padding: 0; }
.send-pair { align-items: start; }
.send-more { margin-top: 20px; color: var(--ink-2); max-width: 44em; }
.send-more + .send-more { margin-top: 8px; }
.dict { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.dict-copy { order: 0; }
.dict-visual { display: block; padding-top: 34px; }
.chat-msgs { min-height: 0; padding-bottom: 14px; }
.pill-dict { position: absolute; right: 18px; bottom: 84px; z-index: 1; }
.ask { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
@media (min-width: 981px) {
  .step h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .step-copy p { margin-top: 0; }
}
@media (max-width: 700px) {
  .step-screen { aspect-ratio: auto; }
  .screen { position: static; }
  .screen .tempo { display: none; }
  .pill-zone { position: static; padding: 28px 0; }
  .shop { width: 46%; font-size: 2.6cqw; }
  .pill-dict { right: 10px; bottom: 80px; }
}
.chat-msgs { padding-bottom: 52px; }
.pill-dict { bottom: 104px; }
@media (max-width: 700px) { .pill-dict { bottom: 100px; } }
@media (max-width: 980px) { .dict, .ask { grid-template-columns: 1fr; } }
/* Seek times: a 44 px tap target, with the row's spacing unchanged */
.seek-list button { display: flex; align-items: center; min-height: 44px; margin: -11px 0; }

/* Round 5: templates as one card with tabs */
.tpl { margin-top: clamp(32px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.tpl-tabs { border-top: 1px solid var(--line); }
.tpl-tabs button { all: unset; box-sizing: border-box; display: grid; gap: 2px; width: 100%; min-height: 64px; padding: 14px 0 14px 18px; border-bottom: 1px solid var(--line); cursor: pointer; position: relative; }
.tpl-tabs b { font: 400 1.45rem/1.2 var(--serif); letter-spacing: -0.015em; color: var(--ink-2); }
.tpl-tabs span { font-size: 15px; color: var(--ink-2); }
.tpl-tabs button[aria-selected="true"] b { color: var(--ink); }
.tpl-tabs button[aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 2px; background: var(--rec); }
.tpl-tabs button:hover b { color: var(--ink); }
.tpl-tabs button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tpl-panel[hidden] { display: none; }
.tpl-panel + .tpl-panel { margin-top: 16px; }
.js-tabs .tpl-panel + .tpl-panel { margin-top: 0; }
.tpl-panel .card { box-shadow: var(--win); padding: 22px 26px 14px; }
.tpl-tabs .soon { margin-left: 4px; }

/* Linear rows as a bare list; three tiles */
.rows { gap: 0; border-top: 1px solid var(--line); }
.row-card { border-radius: 0; box-shadow: none; background: none; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.toast { margin-top: 12px; }
.send-pair { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.term { background: #1E1F1C; color: #E8E6E0; border-radius: 10px; padding: 0 14px 14px; font: 500 12px/1.7 var(--mono); overflow: hidden; }
.term p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.term b { color: #9FD3A7; font-weight: 500; }
.term-bar { display: flex; align-items: center; gap: 6px; height: 32px; margin: 0 -14px 8px; padding: 0 12px; background: #2A2B27; color: #A6A49C; }
.term-bar i { width: 10px; height: 10px; border-radius: 50%; background: #4A4B46; }
.term-bar span { margin-left: 8px; }
.term-dim { color: #A6A49C; }
.send-soon { font-size: 14px; color: var(--ink-2); order: 4; }

/* Hero: the whole window, ended on purpose */
.stage .app { bottom: 6%; border-bottom-left-radius: .95em; border-bottom-right-radius: .95em; }

/* Step 1: just the pill, over the screen it records */
.step-screen { aspect-ratio: 16 / 5; }
.screen .tempo { filter: blur(1.5px); opacity: .7; }
.pill-zone { top: 50%; transform: translateY(-50%); }

@media (max-width: 980px) {
  .tpl, .send-pair { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .stage { background: var(--pine); height: 600px; }
  .stage-photo { display: none; }
  .stage .app { top: 72px; bottom: 16px; }
  .stage-pill { top: 16px; }
  .ask-win { padding: 0; }
  .ev-meta { font-size: max(11px, 2.4cqw); }
  .ev-foot, .ev-foot span:last-child { font-size: max(11px, 2.4cqw); }
  .ev-title { font-size: max(15px, 4.4cqw); }
  .pill-zone { transform: none; }
}
@media (max-width: 980px) { .tpl, .send-pair { grid-template-columns: minmax(0, 1fr); } }
.tile { min-width: 0; }
.tile > .term { order: 3; }

/* Round 6: one shadow (the hero), serif leads, even tiles */
:root { --win: 0 0 0 1px rgba(0,0,0,.12); }
.step-copy p, .send-copy .send-cap { font: 400 1.25rem/1.45 var(--serif); color: var(--ink-2); }
.send-pair { margin-top: 64px; align-items: stretch; }
.tile .mcp-h { min-height: 2.3em; }
.tile > .rows, .tile > .ev-card, .tile > .term { margin-top: auto; }
.step-screen { aspect-ratio: 16 / 4; background: var(--app-bg); }
.vid-phone { background: #111; }
.vid-phone .shop { width: 38%; font-size: 1.15cqw; padding-top: 5%; }
.shop-err { font-style: normal; color: #9B2C1C; background: #FCEBE7; border-radius: .35em; padding: .45em .6em; margin-top: .6em; font-weight: 600; }
.shop .shop-err + .shop-pay { margin-top: auto; }
.scrub i { z-index: 1; }
.stage-photo { object-position: 50% 60%; }
@media (max-width: 700px) {
  .stage-pill { display: none !important; }
  .stage .app { top: 16px; }
  .stage .app-main::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(rgba(250,249,246,0), var(--app-bg)); }
  .step-screen { aspect-ratio: auto; }
  .vid-phone .shop { width: 46%; font-size: 2.2cqw; }
  .tile .mcp-h { min-height: 0; }
}

/* Round 7: step 1 records a real browser window */
.step-screen { aspect-ratio: 16 / 9; background: #E9E7E1; }
.screen { font-size: 1.6cqw; }
.browser { position: absolute; inset: 9% 6% 0; background: #fff; border-radius: .7em .7em 0 0; box-shadow: 0 0 0 1px rgba(0,0,0,.12); overflow: hidden; font: 400 1em/1.4 var(--sys); color: #222; }
.br-bar { display: flex; align-items: center; gap: .45em; height: 2.4em; padding: 0 .9em; background: #F2F1EE; border-bottom: 1px solid #E3E1DC; }
.br-bar i { width: .7em; height: .7em; border-radius: 50%; background: #DAD7D0; }
.br-bar span { margin: 0 auto; padding: .15em 2.5em; border-radius: .4em; background: #fff; color: #666; font-size: .85em; }
.br-page { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.4em; padding: 3.2em 2.6em; }
.br-page b { display: block; font-size: 1.35em; margin-bottom: .6em; }
.br-page p { display: flex; justify-content: space-between; padding: .5em 0; border-bottom: 1px solid #EEE; }
.br-tot { font-weight: 600; }
.br-sum i { display: block; margin-top: 1em; padding: .65em; border-radius: .4em; background: #1E2321; color: #fff; text-align: center; font-style: normal; font-weight: 600; }
.pill-zone { top: 2.2%; transform: none; }
.step-screen .pill-notes { display: none; }

/* Integrations: the evidence card large, Linear and agents stacked */
.send-pair { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
.send-stack { display: grid; gap: clamp(16px, 2vw, 28px); }
.tile .mcp-h { min-height: 0; }
.tile > .rows, .tile > .ev-card, .tile > .term { margin-top: 0; }
.pricing { width: 100%; height: 100%; background: #fff; padding: 5% 8%; font: 400 1.5cqw/1.4 var(--sys); color: #222; position: relative; display: flex; flex-direction: column; align-items: center; }
.pricing > b { font-size: 2em; margin-bottom: .5em; }
.pr-toggle { display: flex; padding: .2em; border-radius: 999px; background: #F0EFEB; margin-bottom: 1.6em; }
.pr-toggle span { padding: .3em 1.2em; border-radius: 999px; color: #666; }
.pr-toggle .on { background: #fff; color: #111; box-shadow: 0 0 0 1px #E3E1DC; }
.pr-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; width: 100%; }
.pr-plans p { display: flex; flex-direction: column; gap: .3em; padding: 1em; border-radius: .5em; box-shadow: inset 0 0 0 1px #E6E4DF; }
.pr-plans span { font-size: 1.8em; font-weight: 600; }
.pr-plans i { font-style: normal; text-align: center; margin-top: .6em; padding: .4em; border-radius: .35em; background: #F0EFEB; }
.pricing .ev-cursor { left: 57%; top: 23%; width: 1.6em; }
.figma { width: .75em; height: 1.1em; margin-right: .5em; background: none; border-radius: 0; }
.src-ic .figma { width: 100%; height: 100%; margin: 0; }
.ic-team { width: 1.1em; height: 1.1em; margin: 0 .3em 0 .45em; color: var(--pine); }
.aside-meta b { margin-left: 0; }
.hero-ask::before { height: 9em; background: linear-gradient(rgba(250,249,246,0), var(--app-bg) 35%); }

/* Hero photo: the two people stay visible beside the window */
.stage-photo { width: 150%; height: auto; min-height: 100%; left: -32%; top: -14%; object-fit: cover; }
.bar { align-items: center; }
.pill-dict { top: 52px; bottom: auto; right: 14px; }
.chat-msgs { padding-bottom: 14px; }
@media (max-width: 980px) {
  .send-pair { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .stage-photo { display: none; }
  .step-screen { aspect-ratio: 4 / 3; }
  .screen { position: absolute; font-size: 2.6cqw; }
  .br-page { grid-template-columns: 1fr; gap: 1em; padding: 1.6em; }
  .br-cart { display: none; }
  .pill-zone { position: absolute; padding: 0; top: 4%; }
  .pricing { font-size: 2.4cqw; }
  .pill-dict { top: 48px; }
}
.pricing { justify-content: center; }

/* Round 8: one grid. Text runs to 5 of 12 columns, product from 5 on. */
:root { --split: minmax(0, 5fr) minmax(0, 7fr); --split-gap: clamp(32px, 5.5vw, 80px); }
.bar, .how, .dict, .ask, .tpl, .send-lead, .faq { grid-template-columns: var(--split); column-gap: var(--split-gap); }
.bar { align-items: start; }
.stage { margin-top: 28px; }
.hero-top { padding-top: clamp(12px, 2vw, 28px); }
/* Step 1: the phone, mirrored on the Mac */
.step-screen { aspect-ratio: 16 / 8; }
.phone-win { left: 50%; right: auto; width: 34%; transform: translateX(-50%); top: 18%; bottom: -2%; border-radius: .8em; }
.phone-win .br-bar span { padding: .15em .6em; background: none; color: #555; }
.phone-win .br-page { grid-template-columns: 1fr; gap: 1em; padding: 1.4em 1.3em; }
.phone-win .br-cart { display: none; }
.pill-zone { top: 3%; }
/* Seek: the current row is tinted inside its bounds */
.seek-list button[aria-pressed="true"] { background: none; font-weight: 700; }
.seek-list li:has(button[aria-pressed="true"]) { background: rgba(185, 58, 40, .07); box-shadow: inset 2px 0 0 var(--rec); padding-left: 8px; }
.seek-list li { transition: background .3s; }
/* Evidence: the frame grab letterboxed in black, as the app exports it */
.ev-shot { background: #111; display: flex; justify-content: center; align-items: center; }
.ev-shot .pricing { width: 80%; height: 88%; padding: 3% 5%; font-size: 1.15cqw; }
/* Bento by tone, not outlines */
.tile { box-shadow: none; background: var(--tint); }
.tile .ev-card { box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
@media (max-width: 980px) {
  .bar, .how, .dict, .ask, .tpl, .send-lead, .faq { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .phone-win { width: 56%; top: 20%; }
  .pill-dict { top: 62px; }
  .ev-shot .pricing { font-size: 2cqw; }
}

/* Round 9 */
/* Hero photo: full cover, zoomed from the right so the person sits left of the window */
.stage-photo { width: 100%; height: 100%; left: 0; top: 0; object-fit: cover; object-position: 50% 35%; transform: scale(1.32); transform-origin: 100% 35%; }
.stage .app { left: 33%; }
/* Ask: one centered axis, like the app's Ask screen */
.ask { display: block; text-align: center; }
.ask .sec-head { max-width: 40rem; margin: 0 auto; justify-items: center; }
.ask .sec-head p { margin-left: auto; margin-right: auto; }
.ask-win { margin: clamp(32px, 4vw, 48px) auto 0; max-width: 880px; text-align: left; }
.app-ask { max-width: none; }
/* Integrations: three plain columns on the page */
.send-pair { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: clamp(24px, 3vw, 48px); }
.tile { background: none; padding: 0; gap: 12px; }
.tile .send-cap { font: 400 1.1rem/1.45 var(--serif); color: var(--ink-2); }
.tile .mcp-h { font-size: 1.5rem; }
.tile > .rows, .tile > .ev-card, .tile > .term { margin-top: 8px; }
.tile .ev-card { box-shadow: 0 0 0 1px rgba(0,0,0,.1); }
.send-lead .mcp-h { font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.6rem); }
/* Dictation: the pill sits above the window, never over it */
.dict-visual { padding-top: 68px; }
.pill-dict { top: 0; right: 0; }
/* Step 1: cropped to the pill and the top of the phone */
.step-screen { aspect-ratio: 16 / 6; }
.phone-win { top: 22%; bottom: auto; height: 120%; }
.phone-win .br-cart { display: block; }
/* Wrapping inside mocks */
.items span, .set-row span, .row-card span, .card-title { text-wrap: pretty; }
@media (max-width: 980px) {
  .send-pair { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .stage .app { left: 32%; }
}
@media (max-width: 700px) {
  .stage .app { left: 12px; }
  .ask { text-align: left; }
  .ask .sec-head { justify-items: start; }
  .step-screen { aspect-ratio: 4 / 3; }
  .dict-visual { padding-top: 60px; }
}
/* The hero title and the Ask bar stay on one line in any language */
.hero-ask span, .hero-ask em { white-space: nowrap; }
:lang(es) .stage .doc-title { font-size: 1.85em; }
:lang(es) .hero-ask em { display: none; }
.hero-ask::before { height: 11em; background: linear-gradient(rgba(250,249,246,0), var(--app-bg) 45%); }
.hero-ask { z-index: 2; }
.hero-ask { background: none; box-shadow: none; }
.hero-ask::before { z-index: -2; }
.hero-ask::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--app-line), 0 .5em 1.4em -.6em rgba(0,0,0,.25); }
/* Seek rows hold the 44 px target themselves, so neighbours never overlap */
.seek-list .items li { min-height: 44px; align-items: center; padding-top: 0; padding-bottom: 0; }
.seek-list button { margin: 0; }
.seek-list .items .check { margin-top: 0; }

/* Round 10: How it works as three rows; each step's text stays beside its card */
@media (min-width: 981px) {
  .how { display: block; }
  .how-side { position: static; display: grid; grid-template-columns: var(--split); column-gap: var(--split-gap); align-items: end; }
  .how-nav { margin-top: 0; display: flex; gap: 28px; border-top: 0; }
  .how-nav a { min-height: 44px; border-bottom: 0; font-size: 1rem; gap: 10px; }
  .how-steps { margin-top: clamp(40px, 5vw, 64px); }
  .step { display: grid; grid-template-columns: var(--split); column-gap: var(--split-gap); align-items: start; }
  .step + .step { margin-top: clamp(64px, 7vw, 104px); }
  .step-copy { position: sticky; top: 104px; margin: 0; padding-top: 4px; }
  .step h3 { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; font-size: 2rem; }
  .step h3 .n { display: inline-grid; width: 30px; height: 30px; font-size: 13px; }
  .step-copy p { margin-top: 10px; }
}
.phone-win { top: 30%; }
/* Trust line: a dot before each point, so wrapping never leaves a stray separator */
.facts { gap: 4px 18px; }
.facts li { display: inline-flex; align-items: center; gap: 7px; }
.facts li:not(:last-child)::after { content: none; }
.facts li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--pine); flex: none; }

/* ───────── Round 11: a real Mac, soft grain scenes, the real pill ───────── */
.scene { position: relative; border-radius: 24px; overflow: hidden; container-type: inline-size;
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(216, 239, 160, .75), transparent 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(30, 77, 63, .28), transparent 60%),
    linear-gradient(160deg, #EEF1E6, #E3E9DC); }
.scene::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .25  0 0 0 0 .2  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.mac { position: absolute; z-index: 1; background: #0F0F10; border-radius: 26px 26px 0 0; padding: 11px 11px 0; box-shadow: 0 0 0 1.5px #C9CBCE, 0 0 0 3px #9EA1A5, 0 30px 60px -30px rgba(10, 30, 22, .55); }
.mac-screen { position: relative; aspect-ratio: 16 / 10; border-radius: 14px 14px 0 0; overflow: hidden; background: #DDE6D5 url(/img/wallpaper.jpg) center / cover; }
.mac-screen::before { content: ""; position: absolute; z-index: 6; top: 0; left: 50%; width: 14%; height: 24px; transform: translateX(-50%); background: #0F0F10; border-radius: 0 0 11px 11px; }
.mac-screen .mb { z-index: 5; }
/* Menu bar section: the top right corner of a MacBook */
.desk.scene { aspect-ratio: 16 / 11; height: auto; background-color: transparent; }
.desk-photo { display: none; }
.mac-corner { width: 150%; right: 7%; top: 11%; }
.mac-corner .menu { top: 36px; right: 112px; }
/* Steps and dictation: the front of a MacBook, cropped */
.step-visual.scene { aspect-ratio: 16 / 10; }
.mac-front { left: 6%; right: 6%; top: 9%; }
.mac-front .pill-zone { position: absolute; top: 42px; left: 0; right: 0; transform: none; display: grid; justify-items: center; gap: 10px; z-index: 4; }
.mac-front .pill-lg { font-size: 15px; }
.mac-front .phone-win { top: 22%; width: 30%; height: 110%; }
.mac-front .pill-notes { display: flex; }
.dict-visual.scene { aspect-ratio: 16 / 11; padding: 0; display: block; }
.dict-visual .mac-front { top: 9%; }
.mac-screen .chat { position: absolute; left: 10%; right: 10%; top: 26%; width: auto; box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 20px 40px -20px rgba(0,0,0,.35); }
.mac-screen .pill-dict { position: absolute; top: 42px; left: 50%; right: auto; bottom: auto; transform: translateX(-50%); font-size: 14px; z-index: 4; }
/* The pill, as it is now: the Sinsajo mark is the status */
.pill-mark { width: 1.45em; height: 1.1em; margin-right: .8em; flex: none; overflow: visible; }
.pill-mark .q1 { fill: #FF5A1F; }
.pill-mark .q2 { fill: #E5452F; animation: beat 1.4s ease-in-out infinite; }
.pill-dict .pill-mark .q2, .pill.is-saved .pill-mark .q2 { fill: #FF5A1F; animation: none; }
.pill-dict .pill-mark { margin-right: 0; }
[data-dictate][data-state="pasted"] .pill-dict .pill-mark { display: none; }
[data-dictate]:not([data-state]) .pill-dict .pill-mark { display: none; }
@keyframes beat { 50% { opacity: .3; } }
.wave { grid-auto-columns: 1.6px; column-gap: 1.4px; width: 5.6em; }
.wave i:first-child { background: #5B8DEF; }
.wave i:last-child { background: #B7BBC1; }
.pill-stop { background: rgba(0,0,0,.05); }
.pill-stop::after { inset: .68em; border-radius: .18em; background: #E5452F; }
@media (prefers-reduced-motion: reduce) { .pill-mark .q2 { animation: none; } }
/* Integrations: heavier blocks on soft grain */
.bento { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; gap: clamp(16px, 2vw, 24px); }
.bcard { position: relative; border-radius: 24px; padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 14px; overflow: hidden;
  background: radial-gradient(110% 80% at 100% 0%, rgba(216, 239, 160, .55), transparent 60%), linear-gradient(170deg, #F0F2EA, #E6ECE0); }
.bcard::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .3; mix-blend-mode: multiply; background-image: inherit; }
.bcard > * { position: relative; z-index: 1; }
.b-ev { grid-row: span 2; }
.b-ag { background: radial-gradient(100% 90% at 0% 100%, rgba(30, 77, 63, .35), transparent 60%), linear-gradient(170deg, #E9EEE6, #DCE5DA); }
.bcard .mcp-h { font-size: clamp(1.5rem, 1.2rem + .8vw, 2rem); }
.bcard .send-cap { font: 400 1.15rem/1.45 var(--serif); color: var(--ink-2); margin: 0; }
.b-ev .ev-card { margin-top: auto; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 24px 50px -24px rgba(10, 30, 22, .45); border-radius: 8px; }
.b-ev .ev-shot { aspect-ratio: 16 / 10; background: #111; padding: 0; }
.b-ev .ev-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.b-lin .rows { background: #fff; border-radius: 14px; padding: 4px 16px; border-top: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 16px 30px -22px rgba(0,0,0,.3); }
.b-lin .row-card { border-bottom: 1px solid var(--app-line); }
.b-lin .row-card:last-of-type { border-bottom: 0; }
.b-lin .toast { margin: 8px 0 6px; }
.b-ag .term { margin-top: auto; box-shadow: 0 20px 40px -20px rgba(0,0,0,.5); }
.term-ok { color: #9FD3A7; }
.send-copy .mcp-h { font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.6rem); }
@media (max-width: 980px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .b-ev { grid-row: auto; }
}
@media (max-width: 700px) {
  .desk.scene { aspect-ratio: auto; height: 460px; }
  .mac-corner { width: 210%; right: 4%; top: 6%; }
  .mac-corner .menu { right: 60px; left: auto; width: 280px; }
  .step-visual.scene, .dict-visual.scene { aspect-ratio: 4 / 3.4; }
  .mac-front { left: 4%; right: -30%; top: 8%; }
  .mac-front .pill-zone { justify-items: start; left: 4%; }
  .mac-front .pill-lg { font-size: 12px; }
  .mac-front .pill-notes { display: none; }
  .mac-front .phone-win { width: 44%; left: 34%; }
  .mac-screen .chat { left: 5%; right: 26%; top: 30%; font-size: 13px; }
  .mac-screen .pill-dict { left: 5%; transform: none; font-size: 12px; }
}
.mac-front .mac-screen { font-size: 1.15cqw; }
.mac-front .phone-win { top: 30%; width: 26%; height: 100%; font-size: 1em; }
.mac-front .pill-notes { display: none; }
@media (max-width: 700px) { .mac-front .mac-screen { font-size: 1.9cqw; } .mac-front .phone-win { width: 40%; left: 30%; } }

/* Actual app captures, with a full-resolution link on small screens. */
.language { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; text-decoration: none; }
.download-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
.text-link { font-size: 15px; text-underline-offset: 4px; }
.product-shot { width: 100%; margin: 48px 0 0; }
.product-shot > a { display: block; border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; box-shadow: 0 12px 40px #1416130c; background: var(--tint); }
.product-shot img { width: 100%; height: auto; }
.product-shot figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding: 14px 0; color: var(--ink-2); font-size: 13px; }
.product-shot figcaption a { display: inline-flex; align-items: center; min-height: 44px; }
.download-page { max-width: 1080px; margin: auto; padding: clamp(48px,8vw,112px) var(--g) 0; }
.download-page h1 { font: 300 clamp(3rem,7vw,6rem)/1 var(--serif); letter-spacing: -.035em; }
.download-page .lede { max-width: 620px; margin-top: 24px; font-size: 20px; color: var(--ink-2); }
.download-meta { margin-top: 20px; color: var(--ink-2); font-size: 14px; }
.download-details { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 64px; border-top: 1px solid var(--line-strong); padding-top: 32px; }
.download-details h2 { font-size: 30px; margin-bottom: 16px; }
.download-details p { color: var(--ink-2); margin-top: 12px; }
.download-details ul { list-style: disc; padding-left: 20px; color: var(--ink-2); }
.download-details li { margin-top: 12px; }
.platforms { margin-top: 56px; border-top: 1px solid var(--line); padding-top: 24px; }
.platforms p { margin-top: 12px; color: var(--ink-2); }
@media (max-width: 700px) {
 .nav { gap: 14px; }
 .nav .language { display: inline-flex; }
 .nav > .btn { padding: 0 12px; font-size: 13px; }
 .nav .word { gap: 6px; font-size: 25px; }
 .product-shot { margin-top: 32px; }
 .product-shot figcaption { font-size: 12px; }
 .download-details { grid-template-columns: 1fr; gap: 36px; }
}
.word { min-height: 44px; }
.download-actions > a { display: inline-flex; align-items: center; min-height: 44px; }

/* Keep download choices distinct and comfortable to tap on narrow screens. */
@media (max-width: 700px) {
 .download-actions { align-items: stretch; flex-direction: column; gap: 8px; }
 .download-actions > a { justify-content: center; text-align: center; }
}
/* A real task detail stays readable on a phone; the link opens the complete capture. */
@media (max-width: 700px) {
 .hero .product-shot > a { height: 290px; position: relative; }
 .hero .product-shot img { width: 1120px; max-width: none; position: absolute; left: -225px; top: -35px; }
}
.mobile-index { display: none; }
.platforms h2 { font: 500 17px/1.4 var(--sans); letter-spacing: 0; }
.guide-record-control { margin-top: 24px; }
.guide-record-control > div { position: relative; overflow: hidden; width: min(100%, 340px); height: 66px; border: 1px solid var(--line-strong); border-radius: 12px; }
.guide-record-control img { position: absolute; width: 1600px; max-width: none; left: -1000px; top: 0; }
.guide-record-control figcaption { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
@media (max-width: 700px) {
 .mobile-index { display: block; padding: 0 var(--g); border-bottom: 1px solid var(--line); }
 .mobile-index summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 14px; }
 .mobile-index summary::after { content: '+'; margin-left: auto; }
 .mobile-index[open] summary::after { content: '−'; }
 .mobile-index nav { display: flex; flex-wrap: wrap; padding-bottom: 12px; gap: 0 24px; }
 .mobile-index nav a { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; }
}
@media (max-width: 700px) {
 .hero .product-shot > a { height: 250px; }
 .hero .product-shot img { top: -90px; }
}