/* Hotkey landing page: layout only. Colors, fonts, buttons (.btn), chips (.chip, .tone-*),
   avatars and kbd come from the console's own files, linked in as console-base.css
   (console/shared/base.css) and console-tokens.css (console/a/tokens.css), so the page and
   the product look the same. The console loads Geist from Google Fonts; this page serves the
   same font from fonts/ (SIL OFL), because it loads nothing from other hosts. */
@font-face { font-family: "Geist"; src: url("fonts/geist-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/geist-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/geist-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/geist-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/geist-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/geist-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* The console is an app that never scrolls; this is a page that does. */
html, body { height: auto; overflow: visible; overscroll-behavior: auto; }
body { position: static; font-size: 16px; line-height: 1.6; font-feature-settings: "ss01", "cv11"; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
a:focus-visible, summary:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 32px; } }
.skip { position: absolute; left: -999px; top: 8px; background: var(--panel); padding: 8px 12px; border-radius: 8px; z-index: 5; }
.skip:focus { left: 8px; }
a.btn { text-decoration: none; color: var(--ink); }
a.btn.primary { color: #fff; }
:root[data-theme="dark"] a.btn.primary { color: #0b1020; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) a.btn.primary { color: #0b1020; } }

/* Header */
header.top { display: flex; align-items: center; gap: 12px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 18px; letter-spacing: -.01em; color: var(--ink); text-decoration: none; margin-right: auto; }
.brand img { display: block; border-radius: 9px; }
header nav { display: flex; align-items: center; gap: 20px; }
.plain { color: var(--ink-2); text-decoration: none; font-size: 15px; white-space: nowrap; padding: 8px 0; }
.plain:hover { color: var(--ink); }
@media (max-width: 520px) { .hide-sm { display: none; } }
@media (max-width: 379px) { .hide-xs { display: none; } }

/* Hero */
.hero { display: grid; gap: 0 56px; padding-top: 28px; padding-bottom: 72px; align-items: start; }
.hero > * { min-width: 0; }
.hero .badge, .hero h1 { grid-column: 1 / -1; justify-self: start; }
.hero .scene { margin-top: 48px; justify-self: center; }
@media (min-width: 561px) and (max-width: 939px) { .hero .scene { justify-self: start; } }
@media (min-width: 940px) { .hero { grid-template-columns: 1fr 1fr; padding-top: 56px; padding-bottom: 88px; } .hero .scene { margin-top: 0; justify-self: end; } }
.badge { margin: 0 0 20px; }
.badge .chip { height: 26px; padding: 0 11px; font-size: 13px; }
h1, h2, h3 { font-weight: 600; color: var(--ink); }
h1 { font-size: clamp(34px, 6.6vw, 72px); line-height: 1.02; letter-spacing: -.04em; margin: 0 0 32px; max-width: 20ch; text-wrap: balance; }
.lede { font-size: clamp(18px, 2vw, 20px); line-height: 1.55; color: var(--ink-2); margin: 0 0 28px; max-width: 42ch; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.alt { margin: 0; color: var(--ink-3); font-size: 14px; }
.addr-copy { font: 500 13px var(--mono); color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; user-select: all; -webkit-user-select: all; }

/* Hero scene: the agent's log and the phone that answers it, played once, then still. */
.scene { position: relative; margin: 0; width: 100%; max-width: 540px; min-height: 360px; }
.window, .shot { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.window { width: calc(100% - 250px); min-width: 280px; }
.bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--sunk); }
.bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.bar .addr { margin-left: 8px; flex: 1; min-width: 0; font: 12px var(--mono); color: var(--ink-3); background: var(--panel); border-radius: 12px; padding: 3px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log { list-style: none; margin: 0; padding: 12px; font: 12.5px/1.5 var(--mono); color: var(--ink-2); }
.log li { display: flex; gap: 10px; align-items: baseline; padding: 5px 8px; border-radius: 6px; overflow: hidden; }
.log li b { font-weight: 500; color: var(--ink-3); min-width: 3.4em; }
.log li.tone-wait b, .log li.tone-ok b { color: inherit; }
.log li span { min-width: 0; overflow-wrap: anywhere; }
.phone { position: absolute; right: 0; top: 40px; width: 236px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 28px; box-shadow: var(--shadow-lg); padding: 12px 12px 14px; }
.phone .notch { width: 64px; height: 6px; border-radius: 3px; background: var(--line); margin: 2px auto 12px; }
.push { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--ink-2); background: var(--sunk); border-radius: 10px; padding: 7px 9px; margin-bottom: 10px; }
.push img { border-radius: 5px; }
.push b { color: var(--ink); font-weight: 600; }
.ask { border: 1px solid var(--wait-line); background: var(--panel); border-radius: 12px; padding: 12px; }
.ask .who { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); margin: 0 0 4px; }
.ask .who b { color: var(--ink); font-weight: 600; }
.ask .what { font-size: 14px; font-weight: 600; line-height: 1.35; margin: 0 0 10px; }
.ask .match { margin: 0 0 12px; }
.answer { display: grid; }
.answer > * { grid-area: 1 / 1; }
.yesno { display: flex; gap: 8px; visibility: hidden; }
.yesno .btn { flex: 1; min-height: 34px; font-size: 13px; }
.approved { margin: 0; display: flex; align-items: center; justify-content: center; min-height: 34px; }
.approved .chip { height: 30px; font-size: 13px; }
@media (max-width: 560px) {
  .scene { min-height: 0; }
  .window { width: 100%; min-width: 0; }
  .phone { position: relative; right: auto; top: auto; margin: -24px 0 0 auto; width: min(236px, 80%); }
}

/* One 5 s run, played once: the agent asks at 0.5 s, the phone buzzes at 0.7 s, the page check
   shows at 1.3 s, Approve is pressed at 2.4 s, and the agent pays from 2.8 s. Rows not yet shown
   take no space. With reduced motion the page shows the finished state. */
@media (prefers-reduced-motion: no-preference) {
  .log .l3, .log .l4, .log .l5, .log .l6, .push, .ask, .ask .match, .yesno .ok, .yesno, .approved, .phone { animation: 5s 1 both; }
  .log .l3 { animation-name: l3, ring; } .log .l4 { animation-name: l4; } .log .l5 { animation-name: l5; } .log .l6 { animation-name: l6; }
  .phone { animation-name: buzz; } .push { animation-name: push; } .ask { animation-name: ask; } .ask .match { animation-name: match; }
  .yesno .ok { animation-name: press; } .yesno { animation-name: yesno; } .approved { animation-name: approved; }
}
@keyframes l3 { 0%, 8% { opacity: 0; max-height: 0; padding-block: 0; } 13%, 100% { opacity: 1; max-height: 40px; padding-block: 5px; } }
@keyframes ring { 0%, 14% { box-shadow: none; } 20%, 34% { box-shadow: 0 0 0 2px var(--wait-line); } 27%, 41%, 100% { box-shadow: none; } }
@keyframes l4 { 0%, 50% { opacity: 0; max-height: 0; padding-block: 0; } 55%, 100% { opacity: 1; max-height: 40px; padding-block: 5px; } }
@keyframes l5 { 0%, 60% { opacity: 0; max-height: 0; padding-block: 0; } 65%, 100% { opacity: 1; max-height: 40px; padding-block: 5px; } }
@keyframes l6 { 0%, 74% { opacity: 0; max-height: 0; padding-block: 0; } 79%, 100% { opacity: 1; max-height: 40px; padding-block: 5px; } }
@keyframes buzz { 0%, 13% { transform: none; } 15% { transform: rotate(-2deg); } 17% { transform: rotate(2deg); } 19% { transform: rotate(-1deg); } 21%, 100% { transform: none; } }
@keyframes push { 0%, 12% { opacity: 0; transform: translateY(-6px); } 16%, 100% { opacity: 1; transform: none; } }
@keyframes ask { 0%, 12% { opacity: .35; } 16%, 100% { opacity: 1; } }
@keyframes match { 0%, 24% { opacity: 0; } 30%, 100% { opacity: 1; } }
@keyframes press { 0%, 46% { transform: none; filter: none; } 48%, 51% { transform: scale(.96); filter: brightness(.9); } 54%, 100% { transform: none; filter: none; } }
@keyframes yesno { 0%, 55% { visibility: visible; opacity: 1; } 58%, 100% { visibility: hidden; opacity: 0; } }
@keyframes approved { 0%, 55% { opacity: 0; } 58%, 100% { opacity: 1; } }

/* Sections */
section.band { padding: 80px 0; border-top: 1px solid var(--line); }
section.band.last { padding-bottom: 56px; }
h2 { font-size: clamp(28px, 4vw, 40px); line-height: 1.1; letter-spacing: -.03em; margin: 0 0 14px; text-wrap: balance; }
h3 { font-size: 18px; line-height: 1.3; letter-spacing: -.01em; margin: 0 0 6px; }
.sub { color: var(--ink-2); font-size: 18px; margin: 0 0 28px; max-width: 54ch; }

.steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 40px; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); gap: 40px 36px; } }
@media (min-width: 960px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps > li { min-width: 0; }
.steps p { margin: 0; color: var(--ink-2); }
kbd.step { display: inline-grid; place-items: center; min-width: 30px; height: 28px; margin-bottom: 14px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
pre.cmd { margin: 16px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); font: 12px/1.65 var(--mono);
  white-space: pre; overflow-x: auto; color: var(--ink); }
pre.cmd .ph { color: var(--accent-ink); }
@media (max-width: 379px) { pre.cmd { font-size: 10.5px; padding: 10px; } }

.split { display: grid; gap: 28px 56px; align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.points li { color: var(--ink-2); padding-left: 16px; border-left: 2px solid var(--line-2); max-width: 56ch; }
.points b { color: var(--ink); font-weight: 600; }

.shot { margin: 44px 0 0; }
.shot img { display: block; width: 100%; height: auto; }
.shot .narrow { display: none; }
figcaption { font-size: 13px; color: var(--ink-3); }
.shot figcaption { padding: 9px 14px; border-top: 1px solid var(--line); background: var(--sunk); }
@media (max-width: 600px) { .shot .wide, .shot .bar { display: none; } .shot .narrow { display: block; } }

/* It asks before it pays: the copy, the locked labels, and a real approval on a phone */
section.tinted { background: color-mix(in srgb, var(--wait-tint) 55%, var(--bg)); border-top-color: var(--wait-line); }
.safe { display: grid; gap: 48px 64px; align-items: center; }
@media (min-width: 900px) { .safe { grid-template-columns: 1.15fr .85fr; } }
.locks { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; }
.chip.lock { height: 28px; padding: 0 10px; font-size: 13px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); }
.chip.lock::before { content: ""; width: 12px; height: 12px; background: var(--ink-3); -webkit-mask: url("lock.svg") center / contain no-repeat; mask: url("lock.svg") center / contain no-repeat; }
.device { margin: 0; justify-self: center; width: min(340px, 100%); }
.device picture { display: block; border-radius: 32px; overflow: hidden; border: 8px solid var(--panel); outline: 1px solid var(--line-2); box-shadow: var(--shadow-lg); background: var(--panel); }
.device img { display: block; width: 100%; height: auto; }
.device figcaption { text-align: center; margin-top: 14px; }

/* FAQ */
.faq { margin-top: 24px; border-top: 1px solid var(--line); max-width: 820px; }
details { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative; font-size: 17px; font-weight: 500; }
summary:hover { color: var(--accent-ink); }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 1.6px solid var(--ink-3); border-bottom: 1.6px solid var(--ink-3);
  transform: rotate(45deg); transition: transform .15s ease-out; }
details[open] summary::after { transform: rotate(-135deg); margin-top: -1px; }
details p { margin: 0 0 20px; color: var(--ink-2); max-width: 64ch; }

/* Join */
.join { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 28px 24px; display: grid; gap: 24px; box-shadow: var(--shadow); }
@media (min-width: 860px) { .join { grid-template-columns: 1fr auto; align-items: center; padding: 40px 44px; } }
.join h2 { margin-bottom: 8px; }
.join p { margin: 0; color: var(--ink-2); max-width: 54ch; }
.join .ctas { flex-direction: column; align-items: flex-start; }

footer { border-top: 1px solid var(--line); margin-top: 56px; }
footer .wrap { padding-top: 14px; padding-bottom: 40px; color: var(--ink-3); font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
footer span { margin-right: auto; padding: 10px 0; }
footer nav { display: flex; gap: 20px; }
footer a { color: var(--ink-3); padding: 10px 0; }
footer a:hover { color: var(--ink); }
@media (max-width: 520px) { footer span { flex-basis: 100%; } }