/* The landing follows the OS theme. Product captures retain their original colors. */
/* Geist Mono (OFL 1.1, fonts/geist-mono/LICENSE.txt), self-hosted. Hangul in code falls back to Pretendard. */
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/geist-mono/GeistMono-Variable.woff2) format("woff2"); }
:root {
  /* Type: Pretendard sets Hangul and carries an Inter-derived Latin, so one family covers ko and en. */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Pretendard Variable", monospace;

  /* Type scale. Fluid only where the step is large; text sizes stay fixed for a steady rhythm. */
  --fs-display: clamp(38px, 1.25rem + 2.9vw, 60px);
  --fs-h2: clamp(28px, 1rem + 1.7vw, 40px);
  --fs-h3-lg: 20px;   /* card and record titles */
  --fs-h3: 18px;      /* list and sub-section titles */
  --fs-lead: clamp(17px, .875rem + .45vw, 19px);
  --fs-body: 17px;
  --fs-body-sm: 15px;
  --fs-small: 14px;
  --fs-caption: 13px;
  --fs-micro: 12px;
  --fs-code: 13px;

  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-display: 650;

  /* Latin defaults; Hangul overrides below. */
  --lh-display: 1.08; --lh-heading: 1.16; --lh-title: 1.4; --lh-body: 1.6; --lh-small: 1.55; --lh-code: 1.7;
  --ls-display: -.032em; --ls-heading: -.026em; --ls-title: -.014em; --ls-body: -.008em; --ls-small: 0em;

  /* Vertical rhythm */
  --space-section: clamp(72px, 3rem + 5vw, 120px);
  --space-head: clamp(40px, 1.5rem + 2.5vw, 64px);  /* section heading block to its content */
  --space-stack: 16px;                               /* heading to its paragraph */
  --space-item: 28px;                                /* padding of ruled list rows */
  --bg: #fafbf8; --fg: #19271f; --muted: #526056; --line: #d3dcd1;
  --surface: #edf2e9; --brand: #1d5a43; --button-fg: #fff; --button: #1d5a43;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #101612; --fg: #edf1e9; --muted: #b2beb3; --line: #34443a;
  --surface: #1b271e; --brand: #86cfa8; --button: #c4e8b7; --button-fg: #142219;
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --bg: #101612; --fg: #edf1e9; --muted: #b2beb3; --line: #34443a;
  --surface: #1b271e; --brand: #86cfa8; --button: #c4e8b7; --button-fg: #142219;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
:lang(ko) {
  /* Hangul is full-height and dense: more leading in text, slightly tighter tracking in headings. */
  --lh-display: 1.18; --lh-heading: 1.28; --lh-title: 1.45; --lh-body: 1.75; --lh-small: 1.7;
  --ls-display: -.036em; --ls-heading: -.03em; --ls-title: -.02em; --ls-body: -.004em;
  word-break: keep-all; overflow-wrap: break-word;
}
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); letter-spacing: var(--ls-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-kerning: normal; }
h1,h2,h3,p,figure,dl,dd { margin: 0; }
h1,h2,h3 { font-weight: var(--fw-semibold); text-wrap: balance; }
h1 { font-size: var(--fs-display); font-weight: var(--fw-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-title); letter-spacing: var(--ls-title); }
h1 span,h2 span { display: block; }
p { text-wrap: pretty; }
code, pre, kbd { font-family: var(--mono); font-variant-ligatures: none; }
a { color: inherit; text-underline-offset: 5px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 5px; }
.container { max-width: 1248px; padding-inline: 48px; margin-inline: auto; }
@media (max-width: 700px) { .container { padding-inline: 24px; } }

/* Controls use the same text face as links and body copy. */
button, input, select, textarea { font-family:inherit; }

/* Only interactive links, real captures and the migration excerpt. No animated mocks. */
.logo { display: block; width: 116px; height: 34px; color: var(--fg); }
.logo .sym { color: var(--brand); }
.brand { flex-shrink: 0; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-body-sm); font-weight: var(--fw-medium); letter-spacing: var(--ls-small); text-decoration-color: var(--line); text-decoration-thickness: 1px; }
.text-link:hover { text-decoration-color: currentColor; }
.button { display: inline-flex; min-height: 52px; padding: 12px 25px; align-items: center; justify-content: center; background: var(--button); color: var(--button-fg); border-radius: 7px; text-decoration: none; font-weight: var(--fw-semibold); font-size: 16px; letter-spacing: var(--ls-small); }
.button:hover { filter: brightness(.94); }
.actions,.case-links { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; }
.skip { position: absolute; top: 8px; left: 8px; padding: 12px; background: var(--bg); transform: translateY(-160%); z-index: 5; }
.skip:focus { transform: none; }
.product-shot { background: var(--surface); padding: 40px 32px 24px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.product-shot img { display: block; width: 100%; max-width: 296px; height: auto; border-radius: 12px; box-shadow: 0 10px 32px #00000012; }
.product-shot figcaption { color: var(--muted); font-size: var(--fs-micro); line-height: var(--lh-small); text-align: center; }
.code { min-width: 0; border-block: 1px solid var(--line); padding-block: 24px; }
.code figcaption { font: var(--fs-caption) var(--mono); color: var(--muted); }
.code pre { margin: 28px 0; overflow-x: auto; font-family: var(--mono); font-size: var(--fs-code); line-height: var(--lh-code); padding: 5px; }
.code .before { color: var(--muted); }
.code .after { color: var(--brand); }
.code p { font-size: var(--fs-small); color: var(--muted); max-width: 440px; }
@media (max-width: 700px) { .product-shot { padding: 28px 20px 20px; } .product-shot img { max-width: 296px; } }

/* Landing layout. Tokens in tokens.css; logo, button and text-link in components.css. */
.wrap { max-width: 1200px; margin-inline: auto; padding-inline: 40px; }
@media (max-width: 720px) { .wrap { padding-inline: 20px; } }
section { padding-block: var(--space-section); }
.head { display: grid; gap: var(--space-stack); max-width: 640px; margin-bottom: var(--space-head); }
.head p { font-size: var(--fs-body); max-width: 36em; }
.head p, .lead, .approval-copy p, .facts p, .uses p, .case p { color: var(--muted); }

/* header */
.top { position: sticky; top: 0; z-index: 4; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.top-row { display: flex; align-items: center; gap: 40px; height: 64px; }
.top nav { display: flex; gap: 28px; }
.top nav a, .nav-link { font-size: var(--fs-body-sm); font-weight: var(--fw-medium); letter-spacing: var(--ls-small); color: var(--muted); text-decoration: none; }
.top nav a:hover, .nav-link:hover { color: var(--fg); }
.top-actions { margin-left: auto; display: flex; gap: 24px; }
@media (max-width: 820px) { .top nav { display: none; } }

/* hero */
.hero { display: grid; grid-template-columns: minmax(420px, 1fr) 1.15fr; gap: 64px; align-items: center; padding-block: 96px 72px; }
.lead { margin-top: 24px; font-size: var(--fs-lead); max-width: 30em; }
.hero .actions { margin-top: 40px; column-gap: 20px; }
.hero-demo { gap: 8px; min-height: 44px; color: var(--fg); font-size: 14px; text-decoration: none; }
.hero-demo > span:first-child { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; text-decoration-color: var(--muted); }
.hero-demo-arrow { font-size: 17px; transition: transform .18s; }
.hero-demo:hover, .hero-demo:focus-visible { color: var(--brand); }
.hero-demo:hover > span:first-child, .hero-demo:focus-visible > span:first-child { text-decoration-color: currentColor; }
.hero-demo:hover .hero-demo-arrow { transform: translateX(3px); }
@media (max-width: 480px) { .hero .actions { column-gap: 18px; } }
@media (prefers-reduced-motion: reduce) { .hero-demo-arrow { transition: none; } }
.support { display: flex; flex-wrap: wrap; gap: 16px 40px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); max-width: 520px; }
.support dt { font-size: var(--fs-caption); line-height: var(--lh-small); letter-spacing: var(--ls-small); color: var(--muted); }
.support dd { margin: 4px 0 0; font-size: var(--fs-body-sm); line-height: var(--lh-small); font-weight: var(--fw-semibold); }
.hero-shot { display: grid; justify-items: center; gap: 16px; }
.hero-shot figcaption { font-size: var(--fs-caption); letter-spacing: var(--ls-small); color: var(--muted); text-align: center; }
.caption-link { color: var(--fg); }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; gap: 48px; padding-block: 64px 40px; } }

/* phone frame around real captures */
.phone { width: min(340px, 100%); aspect-ratio: 390 / 600; overflow: hidden; border-radius: 36px; border: 1px solid var(--line); background: #fff; box-shadow: 0 1px 0 #0000000a, 0 24px 60px -24px #10201640, 0 8px 24px -12px #10201626; }
.phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.phone.small { width: min(280px, 100%); aspect-ratio: 390 / 640; border-radius: 30px; }

/* spec strip */
.specs { padding-block: 0 24px; }
.specs dl { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); }
.specs dl > div { padding: 28px 24px 28px 0; }
.specs dl > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.specs dt { font-size: var(--fs-caption); line-height: var(--lh-small); letter-spacing: var(--ls-small); color: var(--muted); }
.specs dd { margin: 8px 0 0; display: grid; gap: 8px; }
.specs strong { font-size: var(--fs-h3-lg); font-weight: var(--fw-semibold); line-height: var(--lh-title); letter-spacing: var(--ls-title); }
.specs span { font-size: var(--fs-small); line-height: var(--lh-small); letter-spacing: var(--ls-small); color: var(--muted); }
@media (max-width: 900px) { .specs dl { grid-template-columns: 1fr 1fr; } .specs dl > div:nth-child(3) { padding-left: 0; border-left: 0; } .specs dl > div:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 520px) { .specs dl { grid-template-columns: 1fr; } .specs dl > div, .specs dl > div + div { padding: 22px 0; border-left: 0; } .specs dl > div + div { border-top: 1px solid var(--line); } }

/* bands */
.band { background: var(--surface); }
.band.dark { background: #121a15; color: #edf1e9; --muted: #aab6ac; --line: #2c3a31; --brand: #9acfaa; }

/* use cases: a ruled list, not cards */
.uses { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 56px; }
.uses li { display: grid; grid-template-columns: 1fr auto; gap: 6px 24px; padding-block: var(--space-item); border-top: 1px solid var(--line); align-items: baseline; }
.uses h3 { grid-column: 1; }
.uses p { grid-column: 1; font-size: var(--fs-body-sm); }
.uses .text-link { grid-column: 2; grid-row: 1 / span 2; align-self: center; white-space: nowrap; }
@media (max-width: 820px) { .uses { grid-template-columns: 1fr; } }

/* approval */
.approval { display: grid; grid-template-columns: .7fr 1.3fr; gap: 72px; align-items: center; }
.approval-copy { display: grid; gap: var(--space-stack); max-width: 460px; }
.approval-copy .text-link { justify-self: start; margin-top: 8px; }
.approval-copy .sub { margin-top: 32px; }
.pair { display: flex; gap: 28px; justify-content: center; }
.pair figure { display: grid; gap: 14px; justify-items: center; }
.pair figcaption { font-size: var(--fs-caption); color: var(--muted); }
@media (max-width: 900px) { .approval { grid-template-columns: 1fr; } .pair { overflow-x: auto; justify-content: flex-start; padding-bottom: 8px; } .pair figure { flex: 0 0 auto; } }

/* security */
.shares { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 48px; }
.shares span { padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); }
.shares em { font-style: normal; color: var(--muted); font-size: var(--fs-body-sm); margin-left: 8px; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 56px; }
.facts li { padding-block: var(--space-item); border-top: 1px solid var(--line); display: grid; gap: 8px; }
.facts p { font-size: var(--fs-body-sm); }
.band .note { margin-top: 48px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); }
@media (max-width: 820px) { .facts { grid-template-columns: 1fr; } }

/* cases */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.case { display: flex; flex-direction: column; gap: 12px; padding: 28px; border: 1px solid var(--line); border-radius: 16px; }
.case .what { font-size: var(--fs-caption); color: var(--muted); }
.case h3 { font-size: var(--fs-h3-lg); }
.case p { font-size: var(--fs-body-sm); }
.case .proof { color: var(--fg); font-weight: var(--fw-semibold); padding-top: 12px; border-top: 1px solid var(--line); }
.case .links { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: auto; }
.cert { margin-top: 8px; height: 220px; overflow: hidden; border-radius: 12px; border: 1px solid var(--line); }
.cert img { display: block; width: 100%; height: auto; }
@media (max-width: 960px) { .case-grid { grid-template-columns: 1fr; } }

/* developers */
pre { margin: 12px 0 0; padding: 22px 24px; overflow-x: auto; background: #121a15; color: #dfe8df; border-radius: 14px; font-family: var(--mono); font-size: var(--fs-code); line-height: var(--lh-code); letter-spacing: 0; }

/* final */
.final { text-align: center; display: grid; justify-items: center; gap: var(--space-stack); }
.final h2 { max-width: 18em; }
.final p { color: var(--muted); }
.final .actions { margin-top: 16px; }
.final .note { font-size: var(--fs-caption); letter-spacing: var(--ls-small); }

/* footer */
.footer { border-top: 1px solid var(--line); }
.footer-row { display: flex; align-items: center; gap: 24px; height: 88px; font-size: var(--fs-caption); letter-spacing: var(--ls-small); color: var(--muted); }
.footer-row .nav-link { margin-left: auto; }

/* browser frame around the desktop capture */
.browser { width: 100%; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: 0 1px 0 #0000000a, 0 30px 70px -30px #10201650, 0 10px 30px -16px #10201630; }
.browser-bar { display: flex; align-items: center; gap: 7px; height: 34px; padding-inline: 14px; background: #f1f2ee; border-bottom: 1px solid #e3e5df; }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d9dcd5; }
.browser-bar span { margin-left: 14px; font: var(--fw-regular) var(--fs-micro)/1 var(--mono); color: #7a827b; }
.browser img { display: block; width: 100%; height: auto; }

.sec-grid { display: grid; grid-template-columns: minmax(320px, .9fr) 1.1fr; gap: 56px; align-items: start; }
.sec-grid .facts { grid-template-columns: 1fr; }
.sec-grid .facts li:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 900px) { .sec-grid { grid-template-columns: 1fr; } }

section[id] { scroll-margin-top: 64px; }
.limit-shot { display: grid; justify-items: center; gap: 14px; }
.limit-shot figcaption { font-size: var(--fs-caption); color: var(--muted); }
.limit-shot .phone { aspect-ratio: 390 / 440; }
.limit-shot .phone img { object-position: center top; }

.approval { grid-template-columns: .8fr 1.2fr; }
@media (max-width: 1100px) { .approval { grid-template-columns: 1fr; gap: 40px; } }

.support dd small { display: block; margin-top: 2px; font-size: var(--fs-caption); font-weight: var(--fw-regular); letter-spacing: var(--ls-small); color: var(--muted); }
.soon { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 6px; font-size: var(--fs-micro); font-weight: var(--fw-semibold); letter-spacing: 0; line-height: 1.6; vertical-align: 2px; color: var(--muted); border: 1px solid var(--line); }

.theme-toggle { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--fg); cursor: pointer; }
.theme-toggle:hover { background: var(--surface); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: block; } :root[data-theme="dark"] .theme-toggle .moon { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .sun { display: block; } :root:not([data-theme="light"]) .theme-toggle .moon { display: none; } }
.top-actions { align-items: center; }

/* developers: links to the docs (the one-line visual is in one-line.css) */
.dev-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 32px; border-top: 1px solid var(--line); }
.dev-links li { display: grid; gap: 8px; align-content: start; }
.dev-links p { font-size: var(--fs-body-sm); color: var(--muted); }
.dev-links .text-link { justify-self: start; margin-top: 4px; }
@media (max-width: 900px) { .dev-links { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* Product story: payment, limits, recovery, then the path to integration. */
.hero { padding-block: 72px 64px; }
:lang(en) .hero h1 { font-size: clamp(38px,3.4vw,48px); }
.top nav { gap: 24px; }
.band.dark { background: var(--surface); color: var(--fg); --muted: inherit; --line: inherit; --brand: inherit; }
#agents { border-top: 1px solid var(--line); }
#use { background: var(--bg); }
.uses { grid-template-columns: 1fr; }
.uses li { grid-template-columns: minmax(180px,.85fr) minmax(0,1.25fr) auto; gap: 24px; align-items: center; }
.uses h3 { grid-column: 1; font-size: var(--fs-h3); }
.uses p { grid-column: 2; }
.uses .text-link { grid-column: 3; grid-row: 1; }
.dev-entry { display: grid; grid-template-columns: 1.4fr .8fr; gap: 80px; margin-bottom: 64px; padding-block: 28px 40px; border-block: 1px solid var(--line); }
.dev-entry h3 { margin-bottom: 12px; }
.dev-entry-copy > p { color: var(--muted); max-width: 36em; font-size: var(--fs-body-sm); }
.dev-entry dl { margin-block: 24px 16px; }
.dev-entry dl > div { display: grid; grid-template-columns: 112px 1fr; gap: 16px; padding-block: 12px; border-top: 1px solid var(--line); font-size: var(--fs-body-sm); }
.dev-entry dt { color: var(--muted); }
.dev-entry dd { margin: 0; }
.dev-entry-note { border-left: 1px solid var(--line); padding-left: 32px; }
.dev-entry-note > p:first-child { font-size: var(--fs-caption); color: var(--muted); }
.dev-entry-note strong { display: block; margin-block: 12px 16px; font-size: 24px; font-weight: 500; }
.dev-entry-note > p { font-size: var(--fs-body-sm); color: var(--muted); }
.dev-entry-note .text-link { margin-top: 16px; }
.final { padding-block: 72px; }
.final > p:first-child { max-width: 32em; font-size: var(--fs-h3-lg); color: var(--fg); }
@media(max-width:900px){
 .hero { padding-block: 40px 48px; gap: 28px; }
 .hero .actions { margin-top: 28px; }
 .hero .lead { margin-top: 20px; }
 .dev-entry { grid-template-columns: 1fr; gap: 28px; margin-bottom: 40px; }
 .dev-entry-note { border-left: 0; border-top: 1px solid var(--line); padding: 24px 0 0; }
 .dev-entry-note strong { font-size: 22px; }
}
@media(max-width:600px){
 .uses li { grid-template-columns: minmax(0,1fr) auto; gap: 8px 16px; }
 .uses p { grid-column: 1 / -1; grid-row: 2; }
 .uses .text-link { grid-column: 2; grid-row: 1; }
 .uses h3 { font-size: 17px; }
 .dev-entry dl > div { grid-template-columns: 92px 1fr; gap: 12px; }
 .final { padding-block: 56px; }
}

[data-motion-active="false"] * { animation-play-state: paused !important; }

.top { background: var(--bg); backdrop-filter: none; }
.demo-agent { display: grid; grid-template-columns: minmax(180px,.85fr) minmax(0,1.25fr) auto; gap: 24px; align-items: center; border-top: 1px solid var(--line); padding-top: 28px; }
.demo-agent h3 { font-size: var(--fs-h3); }
.demo-agent p { font-size: var(--fs-body-sm); color: var(--muted); }
.demo-agent .text-link { white-space: nowrap; }
@media(max-width:600px){.demo-agent{grid-template-columns:1fr;gap:8px}.demo-agent .text-link{justify-self:start}}

/* Editorial opening, product exhibit, and chapters with distinct compositions. */
.hero { display: block; padding-block: 64px 0; }
.hero-copy { display: grid; grid-template-columns: 1.25fr 1fr; column-gap: 72px; align-items: start; padding-bottom: 48px; }
.hero-copy h1 { grid-column: 1; grid-row: 1 / 3; font-size: clamp(60px,5.7vw,82px); line-height: 1.08; letter-spacing: -.05em; }
:lang(en) .hero-copy h1 { font-size: clamp(44px,4.1vw,60px); line-height: 1.07; }
.hero-copy .lead { grid-column: 2; margin-top: 4px; font-size: 18px; line-height: 1.75; }
.hero-copy .actions { grid-column: 2; margin-top: 24px; }
.hero-exhibit { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,480px) minmax(0,1fr); gap: 36px; align-items: center; padding: 40px 36px 24px; background: var(--surface); border-top: 1px solid var(--line); }
.exhibit-note { display: grid; gap: 12px; max-width: 180px; font-size: 14px; color: var(--muted); line-height: 1.7; }
.exhibit-note:first-child { justify-self: center; }
.exhibit-note strong { font-size: 16px; color: var(--fg); font-weight: 500; }
.exhibit-note:last-child { align-self: start; padding-top: 24px; }
#agents.approval { display: block; border-top: 0; padding-top: 120px; }
.chapter-header { display: grid; grid-template-columns: 1fr 1fr; column-gap: 80px; max-width: none; margin-bottom: 48px; }
.chapter-header h2 { grid-column: 1; grid-row: 1 / 3; font-size: 44px; line-height: 1.2; letter-spacing: -.035em; max-width: 11em; }
.chapter-header > p,.chapter-header > a { grid-column: 2; }
#agents .kd.as { max-width: 920px; margin-inline: auto; }
.security-chapter { background: #1d5a43 !important; color: #f0f6f0 !important; --muted:#d0e2d7 !important; --line:#ffffff35 !important; --brand:#a7ddbb !important; }
.security-chapter .head { max-width: 820px; }
.security-chapter h2 { font-size: 44px; line-height: 1.2; }
.security-chapter .sec-grid { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 64px; }
.security-chapter .facts { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; align-content: start; }
.security-chapter .facts li,.security-chapter .facts li:first-child { padding-top: 22px; padding-bottom: 16px; border-top: 1px solid var(--line); }
.security-chapter .facts h3 { font-size: 20px; }
.security-chapter .facts p { font-size: 15px; line-height: 1.8; }
.security-chapter .note { padding-top: 24px; border-top: 1px solid var(--line); }
#use .head { max-width: 760px; }
#use h2,#developers h2 { font-size: 44px; line-height: 1.2; }
.uses li { display: block; padding: 0; }
.demo-row { display: grid; grid-template-columns: 1fr 1.2fr auto; align-items: center; gap: 40px; padding: 32px 0; text-decoration: none; }
.demo-row h3 { font-size: 28px; line-height: 1.25; letter-spacing: -.035em; }
.demo-row p { font-size: 15px; line-height: 1.7; }
.demo-action { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; font-size: 14px; text-decoration: underline; text-underline-offset: 5px; }
.demo-row:hover h3,.demo-row:focus-visible h3 { color: var(--brand); }
.demo-agent { margin-top: 12px; padding-top: 24px; }
.developer-workbench { display:grid; grid-template-columns:minmax(0,1fr); gap:32px; margin-block:12px 56px; }
.dev-entry-copy > h3 { font-size: 24px; margin-bottom: 12px; }
.dev-entry-copy > p { font-size: 15px; line-height: 1.75; color: var(--muted); }
.dev-entry-copy dl { margin-block: 28px 16px; }
.dev-entry-copy dl > div { display: grid; grid-template-columns: 104px 1fr; gap: 16px; padding-block: 16px; border-top: 1px solid var(--line); font-size: 14px; }
.dev-entry-copy dt { color: var(--muted); }
.dev-entry-copy .dev-scope { margin-top: 28px; font-size: 13px; max-width: 28em; }
.dev-links { grid-template-columns: 1fr; gap: 0; }
.dev-links li { display: grid; grid-template-columns: .7fr 1.5fr auto; align-items: center; gap: 32px; padding-block: 24px; border-bottom: 1px solid var(--line); }
.dev-links p { font-size: 14px; }
.dev-links .text-link { margin: 0; white-space: nowrap; }
.closing-chapter { display: flex; justify-content: space-between; text-align: left; align-items: center; flex-wrap: wrap; gap: 24px; padding-block: 80px; }
.closing-chapter > p:first-child { flex: 1 1 500px; max-width: 22em; font-size: 32px; line-height: 1.4; letter-spacing: -.03em; }
.closing-chapter .actions { margin: 0; }
.closing-chapter .note { flex-basis: 100%; }
.mobile-menu { display: none; }
@media(max-width:1100px) and (min-width:901px){
 .hero-copy { column-gap: 40px; }
 .hero-copy h1 { font-size: 62px; }
 :lang(en) .hero-copy h1 { font-size: 46px; }
 .hero-copy .lead { font-size: 16px; }
 .hero-exhibit { grid-template-columns: minmax(0,1fr) minmax(0,440px); gap: 28px; }
 .exhibit-note:last-child { display: none; }
 .security-chapter .sec-grid { gap: 36px; }
 .security-chapter .facts { grid-template-columns: 1fr; gap: 0; }
 .developer-workbench { gap: 40px; }
}
@media(max-width:900px){
 .hero { padding-top: 36px; }
 .hero-copy { display: block; padding-bottom: 28px; }
 .hero-copy h1 { font-size: 48px; line-height: 1.14; }
 :lang(en) .hero-copy h1 { font-size: 42px; max-width: 16em; }
 .hero-copy .lead { font-size: 17px; margin-top: 20px; }
 .hero-copy .actions { margin-top: 24px; }
 .hero-exhibit { grid-template-columns: minmax(0,1fr); gap: 0; padding: 24px 16px 12px; margin-inline: -20px; }
 .exhibit-note { display: none; }
 #agents.approval { padding-top: 72px; }
 .chapter-header { display: block; margin-bottom: 32px; }
 .chapter-header h2,#use h2,#developers h2,.security-chapter h2 { font-size: 32px; line-height: 1.3; }
 .chapter-header > p { margin-top: 16px; }
 .chapter-header > a { margin-top: 16px; }
 .security-chapter .sec-grid { grid-template-columns: 1fr; gap: 40px; }
 .security-chapter .facts { grid-template-columns: 1fr 1fr; gap: 24px; }
 .demo-row { grid-template-columns: 1fr auto; gap: 12px 16px; padding-block: 28px; }
 .demo-row h3 { font-size: 25px; }
 .demo-row p { grid-column: 1 / -1; grid-row: 2; }
 .demo-action { grid-column: 2; grid-row: 1; }
 .developer-workbench { grid-template-columns: 1fr; gap: 36px; margin-bottom: 36px; }
 .dev-entry-copy .dev-scope { max-width: 34em; margin-top: 16px; }
 .dev-links li { grid-template-columns: 1fr auto; gap: 8px 16px; padding-block: 24px; }
 .dev-links p { grid-column: 1 / -1; grid-row: 2; }
 .dev-links .text-link { grid-column: 2; grid-row: 1; }
 .closing-chapter { padding-block: 56px; }
 .closing-chapter > p:first-child { font-size: 26px; }
}
@media(max-width:820px){
 .top-row { gap: 16px; }
 .top-actions { gap: 16px; }
 .mobile-menu { display: block; }
 .mobile-menu summary { list-style: none; min-height: 44px; display: flex; align-items: center; font-size: 13px; cursor: pointer; }
 .mobile-menu summary::-webkit-details-marker { display: none; }
 .mobile-menu[open] summary { color: var(--brand); text-decoration: underline; text-underline-offset: 5px; }
 .mobile-menu nav { display: grid; position: absolute; top: 64px; left: 0; right: 0; gap: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: 12px 20px; }
 .mobile-menu nav a { display: flex; min-height: 48px; align-items: center; }
}
@media(max-width:520px){
 .hero-copy h1 { font-size: 44px; }
 :lang(en) .hero-copy h1 { font-size: 38px; }
 .hero-copy .lead { font-size: 16px; }
 .security-chapter .facts { grid-template-columns: 1fr; gap: 0; }
 .demo-row { grid-template-columns: 1fr; gap: 12px; }
 .demo-action { grid-column: 1; grid-row: 3; min-height: 32px; }
 .dev-links li { grid-template-columns: 1fr; }
 .dev-links p,.dev-links .text-link { grid-column: 1; grid-row: auto; }
 .dev-entry-copy dl > div { grid-template-columns: 96px 1fr; gap: 12px; }
 .top .brand .logo { width: 98px; }
 .top-actions { gap: 14px; }
}

.footer-links { margin-left: auto; display: flex; gap: 24px; flex-wrap: wrap; }
.footer-links .nav-link { margin: 0; min-height: 44px; display: inline-flex; align-items: center; }
@media(max-width:600px){.footer-row{height:auto;min-height:120px;flex-wrap:wrap;gap:8px 20px;padding-block:24px}.footer-links{flex-basis:100%;margin-left:0;gap:24px}.footer-row>span{margin-left:auto}}

[data-user-paused="true"] * { animation-play-state: paused !important; }
.scene-controls { display:flex; justify-content:flex-end; padding:0 16px; }
.scene-controls button { min-width:64px; min-height:44px; padding:8px 4px; color:var(--muted); font-size:12px; background:transparent; border:0; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.scene-controls button:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
@media(prefers-reduced-motion:reduce){ .scene-controls { display:none; } }

/* Buyer scope and access are visible before a visitor commits to integration. */
.hero-copy h1 { grid-row:1 / 4; }
.hero-copy .availability { grid-column:2; margin-top:16px; font-size:13px; color:var(--muted); line-height:1.65; max-width:36em; }
.integration-contact { margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
.integration-contact p { font-size:14px; line-height:1.7; color:var(--muted); margin-bottom:8px; }
.integration-contact .text-link { min-height:44px; font-size:15px; }
.top-actions { align-items:center; }
.top-actions > .nav-link,.mobile-menu summary { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; }
@media(max-width:520px){ .top-actions { gap:4px; } .top-row { gap:8px; } }
@media(max-width:900px){ .hero-copy h1,.hero-copy .availability { grid-column:1; grid-row:auto; } }
.developer-workbench > *, .developer-workbench .ol-code { min-width:0; }
.developer-workbench .ol-code pre { max-width:100%; }
.top-row > nav a { display:inline-flex; align-items:center; min-height:44px; }
.theme-toggle { width:44px; height:44px; }
@media(max-width:360px){ .top .brand .logo { width:88px; } }

/* App and code get the main width; access details follow as a compact ruled row. */
.developer-workbench .dev-entry-copy { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); column-gap:64px; border-bottom:1px solid var(--line); padding-bottom:28px; }
.developer-workbench .dev-entry-copy>h3 { grid-column:1; font-size:18px; margin:0 0 10px; }
.developer-workbench .dev-entry-copy>p { grid-column:1; font-size:14px; }
.developer-workbench .dev-entry-copy dl { grid-column:2; grid-row:1/5; margin:0; }
.developer-workbench .dev-entry-copy dl>div { padding-block:12px; }.developer-workbench .dev-entry-copy dl>div:first-child { border-top:0; padding-top:0; }
.developer-workbench .dev-entry-copy>.text-link { grid-column:1; justify-self:start; margin-top:12px; }
.developer-workbench .integration-contact { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; gap:24px; margin-top:24px; padding-top:20px; }
.developer-workbench .integration-contact p { margin:0; }.developer-workbench .dev-scope { display:none; }
@media(max-width:700px){.developer-workbench .dev-entry-copy{grid-template-columns:1fr;gap:0}.developer-workbench .dev-entry-copy dl{grid-column:1;grid-row:auto;margin-top:24px}.developer-workbench .integration-contact{display:block}.developer-workbench .integration-contact .text-link{margin-top:8px}}

/* First-visit walkthrough: keep setup reachable before the illustration. */
#developers { padding-top:88px; }
.dev-head { grid-template-columns:minmax(0,1fr) auto; column-gap:24px; margin-bottom:40px; }
.dev-head>.text-link { align-self:center; justify-self:end; margin:0; font-size:14px; }
.dev-head>p { grid-column:1/-1; }
@media(max-width:900px){#developers{padding-top:72px}.dev-head{column-gap:16px}}

/* The setup row leads directly into the API paths without an empty bordered lane. */
.developer-workbench { margin-bottom:0; }
.developer-workbench .dev-entry-copy { border-bottom:0; padding-bottom:8px; }
.dev-links { margin-top:24px; padding-top:0; }
@media(max-width:900px){.developer-workbench{margin-bottom:0}.dev-links{margin-top:16px}}

/* Short labels keep full touch targets without changing the visible type scale. */
.brand { display:inline-flex; align-items:center; min-height:44px; }
.top-row > nav a,.footer-links .nav-link { min-width:44px; }
.payment-controls button,.ps-controls button { min-width:44px; }
.security-chapter .facts li { align-content:start; }

/* The first view pairs one product outcome with one readable approval scene. */
.hero-exhibit { display:block; padding:0; margin:0; background:none; border:0; }
.hero-exhibit .exhibit-note { display:none; }
@media(min-width:901px) {
 .hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,480px); align-items:center; gap:72px; padding-block:64px; }
 .hero-copy { display:block; padding:0; }
 .hero-copy h1 { font-size:clamp(52px,5vw,72px); line-height:1.12; }
 :lang(en) .hero-copy h1 { font-size:clamp(42px,4.3vw,60px); }
 .hero-copy .lead { margin-top:24px; font-size:18px; line-height:1.7; max-width:30em; }
 .hero-copy .actions { margin-top:28px; }
 .hero-copy .availability { margin-top:16px; max-width:32em; }
}
@media(min-width:901px) and (max-width:1100px) {
 .hero { gap:40px; grid-template-columns:minmax(0,1fr) minmax(0,420px); }
 .hero-copy h1 { font-size:52px; }
 :lang(en) .hero-copy h1 { font-size:44px; }
}

/* One navigation type style for links, language and the mobile menu control. */
.top :is(nav a, .nav-link, .mobile-menu summary) { font-family:var(--font); font-size:15px; font-weight:500; line-height:1.4; letter-spacing:0; }
.top nav a[aria-current="page"] { color:var(--fg); text-decoration:underline; text-underline-offset:6px; }
@media(max-width:1000px){.top-row>.primary-nav{display:none}.mobile-menu{display:block}.mobile-menu summary{list-style:none;min-height:44px;cursor:pointer}.mobile-menu summary::-webkit-details-marker{display:none}.mobile-menu nav{display:none}.mobile-menu[open] nav{display:grid;position:absolute;top:64px;left:0;right:0;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:12px 20px}.mobile-menu nav a{display:flex;min-height:48px;align-items:center}.top-row{gap:16px}.top-actions{gap:8px}}

/* Pricing uses the same page grid, typography and quiet rules as the landing. */
.pricing-main section { padding-block:64px; }
.pricing-main .pricing-intro { padding-block:80px 40px; max-width:760px; }
.pricing-intro .lead { max-width:38em; }
.pricing-draft { margin-top:32px; padding-left:18px; border-left:2px solid var(--brand); font-size:14px; line-height:1.7; color:var(--muted); }
.pricing-draft strong { display:block; color:var(--fg); font-weight:600; margin-bottom:4px; }
.pricing-main .pricing-plans { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding-block:0 64px; border-bottom:1px solid var(--line); }
.price-plan { padding:32px; display:flex; flex-direction:column; align-items:flex-start; border-top:1px solid var(--line); min-width:0; }
.price-plan+article { border-left:1px solid var(--line); }
.price-plan:first-child { padding-left:0; }.price-plan:last-child { padding-right:0; }
.price-plan h2 { font-size:23px; letter-spacing:-.02em; }.plan-audience { font-size:14px; color:var(--muted); margin-top:8px; }
.plan-price { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin-top:28px; }.plan-price strong{font-size:48px;font-weight:600;line-height:1.1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}.plan-price span{color:var(--muted);font-size:13px}
.plan-description{margin-top:24px;font-size:15px;color:var(--muted);min-height:3.5em;max-width:26em}
.price-plan dl{width:100%;margin:24px 0 28px;font-size:14px}.price-plan dl>div{padding-block:12px;border-top:1px solid var(--line)}.price-plan dt{color:var(--muted)}.price-plan dd{font-weight:500;margin-top:4px}.price-plan>a{margin-top:auto;min-height:44px}
.pricing-estimator{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:80px;border-bottom:1px solid var(--line)}
.pricing-main h2{font-size:28px;line-height:1.3}.pricing-estimator h2+p,.pricing-contact p{margin-top:16px;color:var(--muted);font-size:16px;max-width:38em}
.pricing-inputs{display:grid;gap:20px;margin-top:32px}.pricing-inputs label{display:grid;gap:8px;font-size:14px;font-weight:500}.pricing-inputs input{width:100%;font:inherit;font-size:20px;font-variant-numeric:tabular-nums;padding:12px 14px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--fg)}
.price-result{padding:28px;background:var(--surface);border-radius:8px;align-self:start}.price-result>span{font-size:14px;color:var(--muted)}.price-result>p{margin:12px 0 24px;display:flex;align-items:baseline;gap:8px}.price-result output{font-size:40px;letter-spacing:-.03em;font-weight:600;font-variant-numeric:tabular-nums}.price-result>p span{font-size:13px;color:var(--muted)}.price-result dl>div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:14px}.price-result dd{font-variant-numeric:tabular-nums}.price-result small{display:block;margin-top:16px;line-height:1.7;font-size:12px;color:var(--muted)}
.pricing-basis{display:grid;grid-template-columns:1fr 2fr;gap:64px;border-bottom:1px solid var(--line)}.pricing-basis dl>div{padding-block:20px;border-bottom:1px solid var(--line)}.pricing-basis dl>div:first-child{padding-top:0}.pricing-basis dl>div:last-child{padding-bottom:0;border:0}.pricing-basis dt{font-size:16px;font-weight:600}.pricing-basis dd{margin-top:8px;font-size:15px;color:var(--muted);line-height:1.75}
.pricing-features ul{list-style:none;padding:0;margin:32px 0 0}.pricing-features li{border-top:1px solid var(--line)}.pricing-features li a{display:grid;grid-template-columns:1fr 2fr;gap:64px;padding-block:24px;text-decoration:none}.pricing-features h3{font-size:17px}.pricing-features p{font-size:15px;color:var(--muted)}.pricing-features a:hover h3{text-decoration:underline;text-underline-offset:5px}.pricing-contact{display:flex;gap:64px;justify-content:space-between;align-items:center;border-top:1px solid var(--line)}.pricing-contact .button{flex:none}
@media(max-width:900px){.pricing-estimator{gap:40px}.price-plan{padding-inline:20px}.pricing-basis,.pricing-features li a{grid-template-columns:1fr 1.7fr;gap:32px}}
@media(max-width:650px){.pricing-main section{padding-block:40px}.pricing-main .pricing-intro{padding-block:48px 32px}.pricing-main .pricing-plans{grid-template-columns:1fr;padding-bottom:0}.price-plan,.price-plan:first-child,.price-plan:last-child{padding:28px 0}.price-plan+article{border-left:0}.plan-description{min-height:0}.price-plan dl{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-block:20px}.price-plan dl>div{padding-block:12px 0}.plan-price{margin-top:20px}.plan-price strong{font-size:42px}.pricing-estimator,.pricing-basis{grid-template-columns:1fr;gap:28px}.pricing-main h2{font-size:25px}.price-result{padding:24px}.pricing-features li a{grid-template-columns:1fr;gap:10px}.pricing-contact{display:block}.pricing-contact .button{margin-top:24px}.pricing-draft{font-size:13px}.price-result output{font-size:36px}}

.price-error { font-size:13px; line-height:1.6; color:var(--fg); }
.price-error[hidden],.price-result dl[hidden] { display:none; }

/* Code and app share one stage. Motion is controlled by the integration timeline. */
.ol { margin:0; min-width:0; scroll-margin-top:88px; }
.ol-toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; padding-bottom:12px; }
.ol-toolbar p { margin:0; font-size:13px; color:var(--muted); }
.ol-controls { display:flex; gap:20px; flex:none; padding-right:2px; }
.ol-controls button { min-width:60px; min-height:44px; padding:8px 2px; border:0; background:transparent; color:var(--muted); font:inherit; font-size:13px; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.ol button:focus-visible,.ol pre:focus-visible { outline:2px solid var(--brand); outline-offset:4px; }
.ol-workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); overflow:hidden; border:1px solid var(--line); border-radius:12px; }
.ol-code { display:flex; flex-direction:column; min-width:0; color:var(--fg); background:var(--surface); }
.ol-editor-head { display:flex; justify-content:space-between; gap:12px; align-items:center; min-height:52px; padding:12px 24px; border-bottom:1px solid var(--line); font-size:13px; }
.ol-editor-head b { font-weight:500; }.ol-editor-head span { color:var(--muted); font-size:12px; }
.ol-code pre { margin:auto 0; padding:32px 0; overflow-x:auto; background:none; border:0; border-radius:0; font:14px/2.15 var(--mono); color:inherit; }
.ol-code code { display:block; white-space:pre-wrap; font:inherit; }
.ol-line { display:flex; padding:0 20px 0 16px; }
.ol-number { width:28px; flex:none; color:var(--muted); user-select:none; font-size:11px; }
.ol-source { min-width:0; overflow-wrap:anywhere; }
.ol-keyword { color:var(--muted); }.ol-import { color:var(--brand); }.ol-function,.ol-tag { color:var(--brand); }
.ol-insert { color:var(--fg); background:color-mix(in srgb,var(--brand) 8%,transparent); box-shadow:inset 2px 0 var(--brand); }
.ol-insert .ol-number { color:var(--brand); }.ol-insert .ol-source { transition:opacity 180ms ease,transform 180ms ease; }
.ol[data-code="false"] .ol-insert .ol-source { opacity:0; transform:translateX(-4px); }
.ol-app { --ink:#141513; --ink-2:#55584f; --ink-3:#74776f; --hair:#e6e8e2; --pouchi:#1d5a43; min-width:0; background:#f6f6f3; color:var(--ink); border-left:1px solid var(--line); font-size:13px; line-height:1.5; letter-spacing:-.01em; }
.ol-nav { display:flex; justify-content:space-between; align-items:center; min-height:52px; padding:12px 24px; border-bottom:1px solid var(--hair); background:#fff; }
.ol-nav b { font-size:14px; font-weight:600; }.ol-nav span { color:var(--ink-3); font-size:12px; }
.ol-screen { position:relative; display:grid; place-items:center; min-height:364px; padding:28px 24px; overflow:hidden; }
.ol-card { display:grid; gap:10px; width:100%; max-width:320px; padding:22px 24px; background:#fff; border:1px solid var(--hair); border-radius:10px; }
.ol-kind { color:var(--ink-3); font-size:11px; }.ol-plan { font-size:18px; font-weight:600; letter-spacing:-.02em; }.ol-row { display:flex; justify-content:space-between; gap:12px; color:var(--ink-2); }.ol-row b { color:var(--ink); font-weight:600; }
.ol-auth { display:grid; min-height:112px; margin-top:4px; padding-top:18px; border-top:1px solid var(--hair); }
.ol-out,.ol-in { grid-area:1/1; display:grid; align-content:center; gap:12px; transition:opacity 160ms ease,transform 160ms ease; }
.ol-hint { text-align:center; color:var(--ink-3); font-size:11px; }
.ol-pbtn { display:flex; align-items:center; justify-content:center; gap:9px; min-height:44px; padding:8px; border:1px solid #ced3cb; border-radius:7px; background:#fff; font-size:14px; font-weight:600; transition:opacity 180ms ease,transform 180ms ease,background 120ms ease; }
.ol-pbtn svg,.ol-acct>svg { width:20px; height:20px; flex:none; }
.ol[data-button="false"] .ol-pbtn { opacity:0; transform:translateY(5px); }.ol[data-pressed="true"] .ol-pbtn { transform:scale(.985); background:#edf2e9; }
.ol-in { opacity:0; transform:translateY(4px); visibility:hidden; }
.ol[data-phase="wallet"] .ol-in { opacity:1; transform:none; visibility:visible; }.ol[data-phase="wallet"] .ol-out { opacity:0; visibility:hidden; }
.ol-acct { display:flex; align-items:center; gap:10px; min-height:44px; }.ol-who { display:grid; gap:2px; }.ol-who small { color:var(--ink-3); font-size:11px; }.ol-who code { color:var(--ink); font:12px/1.5 var(--mono); }.ol-ok { margin-left:auto; color:var(--pouchi); font-size:11px; white-space:nowrap; }
.ol-join { display:grid; place-items:center; min-height:44px; padding:8px; border-radius:7px; background:#262a27; color:#fff; font-size:13px; font-weight:500; }
.ol-dim { position:absolute; inset:0; background:#14151342; opacity:0; transition:opacity 160ms ease; }.ol-modal { position:absolute; inset:0; display:grid; place-items:center; padding:20px; pointer-events:none; }
.ol-sheet { display:grid; gap:18px; width:100%; max-width:280px; padding:24px; border-radius:10px; background:#fff; box-shadow:0 12px 28px -16px #10201666; opacity:0; transform:translateY(6px); visibility:hidden; transition:opacity 160ms ease,transform 160ms ease; }
.ol[data-phase="email"] .ol-dim,.ol[data-phase="verify"] .ol-dim { opacity:1; }.ol[data-phase="email"] .ol-sheet,.ol[data-phase="verify"] .ol-sheet { opacity:1; transform:none; visibility:visible; }
.ol-lock { height:20px; width:auto; color:var(--ink); }.ol-lock .sym { color:var(--pouchi); }
.ol-email,.ol-verify { display:grid; gap:12px; min-height:188px; align-content:start; }.ol-email>b,.ol-verify>b { font-size:17px; line-height:1.4; font-weight:600; }
.ol-verify { display:none; }.ol[data-phase="verify"] .ol-email { display:none; }.ol[data-phase="verify"] .ol-verify { display:grid; }
.ol-field,.ol-go,.ol-alt { display:flex; align-items:center; min-height:40px; border-radius:7px; font-size:12px; }.ol-field { padding:8px 12px; border:1px solid #ced3cb; }.ol-go { justify-content:center; padding:8px; color:#fff; background:var(--pouchi); font-weight:500; }.ol-alt { justify-content:center; border:1px solid var(--hair); color:var(--ink-2); }.ol[data-email-pressed="true"] .ol-go { background:#154331; }
.ol-sheet>small { font-size:10px; line-height:1.5; color:var(--ink-3); }.ol-verify-email { color:var(--ink-2); font-size:12px; }.ol-code-label { font-size:11px; color:var(--ink-3); }.ol-digits { display:flex; gap:6px; }.ol-digits i { display:grid; place-items:center; width:30px; height:38px; border:1px solid #ced3cb; border-radius:5px; font-style:normal; font-size:18px; }.ol-verify-note { color:var(--ink-3); font-size:11px; line-height:1.5; }
.ol-stages { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-bottom:0; }
.ol-stages button { position:relative; display:grid; gap:6px; align-content:start; text-align:left; min-height:80px; padding:16px 20px 20px; border:0; color:var(--muted); background:transparent; font:inherit; cursor:pointer; }
.ol-stages button+button { border-left:1px solid var(--line); }.ol-stages b { font-size:15px; font-weight:500; }.ol-stages span { font-size:13px; line-height:1.5; }.ol-stages button[aria-pressed="true"] { color:var(--fg); }.ol-stages button[aria-pressed="true"]::before { content:""; position:absolute; bottom:-1px; left:0; right:0; height:2px; background:var(--brand); }.ol-stages button:hover b { color:var(--brand); }
.ol-note { margin-top:14px; color:var(--muted); font-size:12px; line-height:1.7; }
@media(max-width:900px){.ol-workspace{grid-template-columns:1fr}.ol-app{border-left:0;border-top:1px solid var(--line)}.ol-code pre{margin:0;padding:24px 0}.ol-stages button{padding:18px 14px}.ol-stages b{font-size:14px}.ol-stages span{font-size:12px}}
@media(max-width:520px){.ol-toolbar{gap:10px}.ol-toolbar p{font-size:12px}.ol-controls{gap:14px}.ol-controls button{font-size:12px}.ol-editor-head{padding:12px 16px}.ol-code pre{font-size:12px;line-height:2;padding:20px 0}.ol-frame-line{display:none}.ol-line{padding-inline:12px 10px}.ol-number{width:22px;font-size:10px}.ol-screen{padding:24px 16px;min-height:356px}.ol-card{padding:20px}.ol-nav{padding:12px 16px}.ol-stages button{padding:18px 10px;gap:5px}.ol-stages b{font-size:13px}.ol-stages span{font-size:12px}}
@media(prefers-reduced-motion:reduce){.ol *{transition:none!important}}

.ol[data-manual="true"] * { transition:none!important; }

/* Playback and scene selection stay reachable while the mobile app is in view. */
@media(max-width:900px){.ol-toolbar{position:sticky;top:64px;z-index:2;min-height:56px;background:var(--surface)}.ol-stages{position:sticky;top:120px;z-index:2;background:var(--surface)}}

/* The booking summary is part of the app surface, with no second card shell. */
.ol-app { background:#fff; }
.ol-card { max-width:340px; padding:12px 8px; border:0; border-radius:0; }
.ol-kind { font-size:12px; }
.ol-plan { font-size:24px; margin-bottom:6px; }
.ol-row:last-of-type { padding-top:16px; margin-top:6px; border-top:1px solid var(--hair); }
.ol-row:last-of-type b { font-size:17px; }
.ol-pbtn { background:var(--pouchi); border-color:var(--pouchi); color:#fff; }
.ol[data-pressed="true"] .ol-pbtn { background:#154331; }
.ol-acct>svg { color:var(--pouchi); }
@media(max-width:520px){.ol-card{padding:12px 4px}.ol-plan{font-size:22px}}

/* One inserted HTML row expands; the generated widget follows after it settles. */
.ol-code pre { margin:0; padding-block:32px; font-size:13px; line-height:1.9; }
.ol-workspace { opacity:var(--ol-loop-opacity,1); }
.ol-insert { display:grid; grid-template-rows:1fr; background:color-mix(in srgb,var(--brand) 10%,transparent); box-shadow:inset 2px 0 var(--brand); transition:grid-template-rows 420ms cubic-bezier(.2,.8,.2,1),opacity 240ms; }
.ol-insert-inner { min-height:0; overflow:hidden; }
.ol[data-code="false"] .ol-insert { grid-template-rows:0fr; opacity:0; }
.ol[data-code="false"] .ol-insert .ol-source { opacity:1; transform:none; }
.ol[data-code="true"] .ol-code-slot { display:none; }
.ol-caret { display:inline-block; height:1em; border-left:2px solid var(--brand); vertical-align:middle; }
.ol-following { color:var(--muted); }
.ol-pbtn { font-weight:600; transition:opacity 320ms,transform 320ms cubic-bezier(.2,.8,.2,1),background 120ms; }
.ol[data-button="false"] .ol-pbtn { opacity:0; transform:translateY(12px); }
.ol-session { color:var(--ink-2); font-size:12px; overflow-wrap:anywhere; }
.ol-window-head { display:flex; justify-content:space-between; align-items:center; margin:-24px -24px 0; padding:10px 16px; border-bottom:1px solid var(--hair); font-size:11px; color:var(--ink-3); }
.ol-window-head > span:last-child { font-size:16px; }
.ol-sheet { border:1px solid var(--hair); }
@media(max-width:520px){.ol-code pre{font-size:12px;line-height:1.8;padding-block:20px}.ol-card{gap:10px}.ol-auth{min-height:104px}}

/* The separate login window keeps its footer inside the scene in both languages. */
.ol-screen { min-height:428px; }

/* A steady editor caret follows the typed source; it never blinks. */
.ol-type-caret { display:none; height:1em; border-left:2px solid var(--brand); vertical-align:-.12em; margin-left:1px; }
.ol[data-typing="true"] .ol-type-caret { display:inline-block; }
.ol-insert .ol-source { white-space:pre-wrap; }
.ol-login-symbol { width:20px; height:20px; flex:none; }
/* Offscreen scenes remain readable while their animation clock is suspended. */
.ol[data-motion-active="false"] .ol-workspace { opacity:1; }

/* Shared .kd frame and storyboard controls are still used by the agent scene. */
/* 2-of-3 key share diagram (from .local/landing-redesign/components, design pass 1). Scoped tokens. */
.kd { --bg-elev:#fff; --bg-sunken:#efefeb; --fg-3:#6b6e66; --fg-4:#9a9c95; --line-2:rgba(20,21,19,.16); --brand-tint:#e7efe9; --brand-line:rgba(29,90,67,.26); --ok:#286c48; --ok-bg:#e8f1eb; --r-md:12px; --r-lg:16px; --ease-out:cubic-bezier(.2,.8,.2,1); --ease-io:cubic-bezier(.65,0,.35,1); --d-base:.24s; --shadow-md:0 1px 1px rgba(20,21,19,.04),0 6px 16px -6px rgba(20,21,19,.12); --ring:inset 0 0 0 1px var(--line); --brand:#1d5a43; --fg:#141513; --line:rgba(20,21,19,.1); color: var(--fg); background: var(--bg-elev); border-radius: var(--r-lg); overflow: hidden; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kd:not(.as) {
  --bg-elev:#171e1a; --bg-sunken:#212a24; --fg:#edf1e9; --fg-3:#a5b0a7; --fg-4:#7f8a82; --line:rgba(237,241,233,.1); --line-2:rgba(237,241,233,.18);
  --brand:#86cfa8; --brand-tint:#22382c; --brand-line:rgba(134,207,168,.3); --ok:#8fd4ae; --ok-bg:#1f3a2b; --shadow-md:0 1px 0 rgba(255,255,255,.03); } }
:root[data-theme="dark"] .kd:not(.as) {
  --bg-elev:#171e1a; --bg-sunken:#212a24; --fg:#edf1e9; --fg-3:#a5b0a7; --fg-4:#7f8a82; --line:rgba(237,241,233,.1); --line-2:rgba(237,241,233,.18);
  --brand:#86cfa8; --brand-tint:#22382c; --brand-line:rgba(134,207,168,.3); --ok:#8fd4ae; --ok-bg:#1f3a2b; --shadow-md:0 1px 0 rgba(255,255,255,.03); }
/* ==========================================================================
   (b) 2-of-3 key shares. 12s loop in three equal phases:
   P1 0-33%   device + server sign (everyday payments)
   P2 33-66%  device + recovery file (leave without Pouchi)
   P3 66-100% owner key rotates: new shares and a new owner key, same wallet address
   Base (static) frame: P1 lines, all three steps readable, old fingerprints. The only motion is this storyboard:
   it runs only with motion allowed, and pauses while the figure is mostly off screen (.kd-off, landing-theme.js).
   ========================================================================== */
@property --kd-p { syntax: "<number>"; inherits: true; initial-value: 0; }
.kd { margin: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-elev); box-shadow: var(--shadow-md); overflow: hidden; }
.kd-addr { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--bg-elev); }
.kd-addr-k { font-size: 13px; color: var(--fg-3); }
.kd-addr-v { color: var(--fg); font-size: 14px; letter-spacing: -.01em; }
.kd-addr-mid { color: var(--fg-4); }
.kd-addr-ell { display: none; color: var(--fg-4); }
.kd-addr-same { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px 0 7px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--ok); background: var(--ok-bg); }
.kd-addr-same svg { width: 13px; height: 13px; }

.kd-stage { position: relative; height: 360px;
  background-image: radial-gradient(circle at 1px 1px, var(--line-2) 1px, transparent 1.2px); background-size: 18px 18px; background-position: 9px 9px; }
.kd-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(closest-side at 50% 55%, transparent 40%, var(--bg-elev)); }
.kd-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }
.kd-line { fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 3 5; stroke-linecap: round; }
.kd-line.l-dev, .kd-line.l-srv { stroke: var(--brand); }

.kd-node { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; width: 190px; padding: 10px 14px 10px 10px; transform: translate(-50%, -50%);
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--bg-elev); box-shadow: var(--shadow-md); transition: border-color var(--d-base); }
.n-dev { left: 25%; top: 22%; border-color: var(--brand-line); }
.n-srv { left: 75%; top: 22%; border-color: var(--brand-line); }
.n-rec { left: 50%; top: 89%; }
.kd-ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--bg-sunken); color: var(--fg); box-shadow: var(--ring); }
.kd-ic svg { width: 20px; height: 20px; }
.kd-node-t { display: grid; line-height: 1.3; }
.kd-node-t b { font-size: 14px; font-weight: var(--fw-semibold, 600); color: var(--fg); white-space: nowrap; }
.kd-node-t small { font-size: 12px; color: var(--fg-3); }
.kd-fp { display: inline-grid; margin-left: 6px; color: var(--fg-4); font-size: 11px; vertical-align: 0; }
.kd-fp > span, .kd-core-fp > span { grid-area: 1 / 1; }
.fp-b { opacity: 0; }
.kd-fp .fp-b, .kd-core-fp .fp-b { color: var(--brand); }

.kd-core { position: absolute; z-index: 2; left: 50%; top: 54%; display: grid; justify-items: center; align-content: center; gap: 2px; width: 138px; height: 138px; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--bg-elev); box-shadow: 0 0 0 1px var(--brand-line), 0 0 0 10px var(--brand-tint), var(--shadow-md); }
.kd-core-ring { position: absolute; inset: -12px; border-radius: 50%; border: 1px dashed var(--brand-line); }
.kd-core-k { font-size: 12px; color: var(--fg-3); }
.kd-core-v { font-size: 15px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.kd-core-v b { font-size: 30px; font-weight: var(--fw-display, 650); letter-spacing: -.03em; color: var(--fg); }
.kd-core-fp { display: grid; font-size: 11px; color: var(--fg-3); }

.kd-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.kd-steps li { position: relative; display: grid; min-width: 0; }
/* Reset native button chrome, retaining the original list cell's exact grid and typography. */
.kd-step { appearance: none; display: grid; gap: 2px; width: 100%; min-width: 0; margin: 0; padding: 16px 18px 18px; border: 0; border-radius: 0; background: none; font: inherit; font-size: 13px; letter-spacing: inherit; color: var(--fg-3); text-align: left; cursor: pointer; }
.kd-step:focus-visible { outline: 2px solid var(--brand); outline-offset: -4px; }
.kd-steps li + li { border-left: 1px solid var(--line); }
.kd-steps b { font-size: 14px; font-weight: var(--fw-semibold, 600); color: var(--fg); }
.kd-bar { position: absolute; left: 0; right: 0; top: -1px; height: 2px; overflow: hidden; }
.kd-bar i { display: block; height: 100%; background: var(--brand); transform: scaleX(0); transform-origin: 0 50%; }
.st1, .st2, .st3 { animation: none 12s step-end infinite; }

/* Existing keyframes also supply paused, user-selected reduced-motion frames. */
  .kd .l-srv { animation: kd-srv-line 12s step-end infinite; }
  .kd .l-rec { animation: kd-rec-line 12s step-end infinite; }
  .kd .n-srv { animation: kd-srv-node 12s step-end infinite; }
  .kd .n-rec { animation: kd-rec-node 12s step-end infinite; }
  .kd .kd-fp .fp-a, .kd .kd-core-fp .fp-a { animation: kd-fp-old 12s var(--ease-io) infinite both; }
  .kd .kd-fp .fp-b, .kd .kd-core-fp .fp-b { animation: kd-fp-new 12s var(--ease-io) infinite both; }
  .kd .kd-addr-same { animation: kd-same 12s var(--ease-io) infinite both; }
  .st1 i { animation: kd-bar1 12s linear infinite; } .st2 i { animation: kd-bar2 12s linear infinite; } .st3 i { animation: kd-bar3 12s linear infinite; }
  .kd:not(.as).kd-off * { animation-play-state: paused; }

@media (max-width: 640px) {
  .kd-node { min-width: 0; width: 148px; gap: 8px; padding: 8px 10px 8px 8px; }
  .kd-ic { width: 30px; height: 30px; }
  .kd-fp { display: grid; margin: 1px 0 0; }
  
  .kd-core { width: 118px; height: 118px; }
  .kd-core-v b { font-size: 26px; }
  .kd-addr-mid { display: none; }
  .kd-addr-ell { display: inline; }
  .kd-steps { grid-template-columns: minmax(0, 1fr); }
  .kd-steps li + li { border-left: 0; border-top: 1px solid var(--line); }
  .kd-step { grid-template-columns: 9em 1fr; align-items: baseline; padding: 12px 16px; }
}

@keyframes kd-srv-line { 0% { stroke: var(--brand); opacity: 1; } 33.3% { stroke: var(--line-2); opacity: .7; } 66.6% { stroke: var(--brand); opacity: 1; } }
@keyframes kd-rec-line { 0% { stroke: var(--line-2); opacity: .7; } 33.3% { stroke: var(--brand); opacity: 1; } }
@keyframes kd-srv-node { 0% { border-color: var(--brand-line); opacity: 1; } 33.3% { border-color: var(--line-2); opacity: .55; } 66.6% { border-color: var(--brand-line); opacity: 1; } }
@keyframes kd-rec-node { 0% { border-color: var(--line-2); opacity: .55; } 33.3% { border-color: var(--brand-line); opacity: 1; } }
@keyframes kd-fp-old { 0%, 70% { opacity: 1; transform: none; } 74%, 96% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; transform: none; } }
@keyframes kd-fp-new { 0%, 70% { opacity: 0; transform: translateY(6px); } 74%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(6px); } }
@keyframes kd-same { 0%, 68% { color: var(--fg-3); background: var(--bg-sunken); } 72%, 97% { color: var(--ok); background: var(--ok-bg); } 100% { color: var(--fg-3); background: var(--bg-sunken); } }
@keyframes kd-bar1 { 0% { transform: scaleX(0); opacity: 1; } 33.2% { transform: scaleX(1); opacity: 1; } 33.3%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes kd-bar2 { 0%, 33.3% { transform: scaleX(0); opacity: 1; } 66.5% { transform: scaleX(1); opacity: 1; } 66.6%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes kd-bar3 { 0%, 66.6% { transform: scaleX(0); opacity: 1; } 99.8% { transform: scaleX(1); opacity: 1; } 100% { opacity: 0; } }

.kd .mono { font-family: var(--mono); letter-spacing: 0; }
.kd { font-variant-numeric: tabular-nums; }
.kd-steps li, .kd-node-t small, .kd-addr-k { line-height: var(--lh-small); }

/* Until a step is chosen, reduced motion retains the original static composition. */
@media (prefers-reduced-motion: reduce) {
  .kd:not(.kd-static-step) * { animation: none !important; }
  .kd.kd-static-step * { animation-play-state: paused !important; }
}

/* Approved owner-signature illustration. */


#pouchi-owner-signature{--kp-page:light-dark(#fafbf8,#101612);--kp-panel:light-dark(#fff,#171e1a);--kp-ink:light-dark(#141513,#edf1e9);--kp-sub:light-dark(#62675e,#aeb9b0);--kp-line:light-dark(#d8ddd6,#3d4c42);--kp-soft:light-dark(#edf2e9,#22382c);--kp-green:light-dark(#1d5a43,#86cfa8);--kp-no:light-dark(#b0432a,#f2a28c);--kp-font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;font-family:inherit;color:var(--kp-ink);width:100%;min-width:0;max-width:680px;margin:0 auto;word-break:keep-all;-webkit-font-smoothing:antialiased}
#pouchi-owner-signature *{box-sizing:border-box}
#pouchi-owner-signature .kp-tools{margin-bottom:12px;align-items:center}
#pouchi-owner-signature .kp-tools label{display:flex;align-items:center;gap:6px}
#pouchi-owner-signature .kp-product{color:var(--kp-ink);margin:0;padding:22px 0 0;border:1px solid var(--kp-line);border-radius:16px;background:var(--kp-panel);overflow:hidden;box-shadow:0 1px 1px light-dark(rgba(20,21,19,.04),rgba(255,255,255,.03))}
#pouchi-owner-signature .kp-head{padding:0 24px}
#pouchi-owner-signature .kp-head h3{margin:0;font-size:19px;line-height:1.4;letter-spacing:-.025em;font-weight:600}
#pouchi-owner-signature .kp-head p{margin:8px 0 0;font-size:15px;line-height:1.65;color:var(--kp-sub);font-weight:400}
#pouchi-owner-signature .kp-scene{position:relative;height:282px;margin:0 24px}
#pouchi-owner-signature .kp-sources{list-style:none;margin:0;padding:0;position:absolute;left:0;top:24px;width:150px;z-index:2}
#pouchi-owner-signature .kp-source{display:flex;align-items:center;gap:13px;height:62px;margin:0 0 27px;background:var(--kp-panel)}
#pouchi-owner-signature .kp-source:last-child{margin-bottom:0}
#pouchi-owner-signature .kp-source-icon{display:flex;width:26px;height:30px;align-items:center;justify-content:center;flex-shrink:0;color:var(--kp-sub);transition:color .3s}
#pouchi-owner-signature .kp-source-icon svg{display:block;width:26px;height:26px}
#pouchi-owner-signature .kp-source-name{display:block;font-weight:500;font-size:15px;line-height:1.45;letter-spacing:-.02em;color:var(--kp-ink)}
#pouchi-owner-signature .kp-source-state{display:block;font-size:13px;line-height:1.6;color:var(--kp-sub);margin-top:3px}
#pouchi-owner-signature .kp-source.active .kp-source-icon,#pouchi-owner-signature .kp-source.active .kp-source-state{color:var(--kp-green)}
#pouchi-owner-signature .kp-source.renewing .kp-source-icon{color:var(--kp-green)}
#pouchi-owner-signature .kp-source.renewing .kp-source-state{color:var(--kp-green)}
#pouchi-owner-signature .kp-connections{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1}
#pouchi-owner-signature .kp-track{fill:none;stroke:var(--kp-line);stroke-width:1.2;opacity:.6}
#pouchi-owner-signature .kp-participation{fill:none;stroke:var(--kp-green);stroke-width:1.6;stroke-linecap:round}
#pouchi-owner-signature .kp-output{position:absolute;right:1px;top:78px;width:118px;text-align:center;z-index:3;background:var(--kp-panel)}
#pouchi-owner-signature .kp-paper{display:block;position:relative;width:102px;height:101px;margin:0 auto;border:1px solid var(--kp-line);border-radius:3px;background:var(--kp-panel);overflow:hidden}
#pouchi-owner-signature .kp-paper-label{position:absolute;top:13px;left:0;right:0;font-size:12px;line-height:1.4;color:var(--kp-sub)}
#pouchi-owner-signature .kp-signature{position:absolute;width:76px;height:37px;left:12px;top:42px;overflow:visible}
#pouchi-owner-signature .kp-signature{color:var(--kp-green)}
#pouchi-owner-signature .kp-signature path{stroke-dasharray:1;stroke-dashoffset:1}
#pouchi-owner-signature .kp-paper-rule{position:absolute;left:13px;right:13px;bottom:14px;height:1px;background:var(--kp-line)}

#pouchi-owner-signature .kp-output-state{font-size:13px;line-height:1.5;min-height:21px;margin:10px 0 0;color:var(--kp-sub);font-weight:400}
#pouchi-owner-signature .kp-output.produced .kp-output-state{color:var(--kp-green)}
#pouchi-owner-signature .kp-description{min-height:55px;margin:0;padding:0 24px 15px;font-size:14px;line-height:1.65;color:var(--kp-ink)}
#pouchi-owner-signature .kp-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--kp-line)}
#pouchi-owner-signature .kp-step{appearance:none;position:relative;margin:0;padding:14px 10px 15px;min-height:66px;border:0;border-right:1px solid var(--kp-line);background:none;color:var(--kp-sub);font-family:inherit;font-size:13px;line-height:1.5;font-weight:400;letter-spacing:-.01em;text-align:center}
#pouchi-owner-signature .kp-step:last-child{border-right:0}
#pouchi-owner-signature .kp-step[aria-pressed="true"]{color:var(--kp-ink);font-weight:500}
#pouchi-owner-signature .kp-step::before{content:"";position:absolute;top:-1px;height:2px;left:0;right:0;background:var(--kp-green);transform:scaleX(var(--progress,0));transform-origin:left}
#pouchi-owner-signature .kp-step:focus-visible{outline:2px solid var(--kp-green);outline-offset:-4px}
#pouchi-owner-signature .kp-address{display:flex;gap:8px 14px;align-items:center;flex-wrap:wrap;padding:14px 20px;border-top:1px solid var(--kp-line);font-size:13px;line-height:1.5;color:var(--kp-sub)}
#pouchi-owner-signature .kp-address code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;color:var(--kp-ink);background:none;border:0;border-radius:0;padding:0}
#pouchi-owner-signature .kp-address-same{margin-left:auto;color:var(--kp-green);opacity:0;transition:opacity .3s;font-size:13px}
#pouchi-owner-signature .kp-footnote{margin:12px 4px 0;font-size:12px;line-height:1.6;color:var(--muted)}
@media(max-width:520px){#pouchi-owner-signature .kp-product{padding-top:18px}#pouchi-owner-signature .kp-head{padding:0 18px}#pouchi-owner-signature .kp-head h3{font-size:18px}#pouchi-owner-signature .kp-head p{font-size:14px}#pouchi-owner-signature .kp-scene{margin:0 18px;height:278px}#pouchi-owner-signature .kp-sources{width:128px;top:25px}#pouchi-owner-signature .kp-source{gap:9px;height:58px;margin-bottom:29px}#pouchi-owner-signature .kp-source-name{font-size:14px}#pouchi-owner-signature .kp-source-state{font-size:12px}#pouchi-owner-signature .kp-source-icon,#pouchi-owner-signature .kp-source-icon svg{width:23px}#pouchi-owner-signature .kp-output{width:97px;right:-1px;top:80px}#pouchi-owner-signature .kp-paper{width:86px;height:95px}#pouchi-owner-signature .kp-paper-label{font-size:11px}#pouchi-owner-signature .kp-signature{left:9px;top:40px;width:67px;height:34px}#pouchi-owner-signature .kp-output-state{font-size:12px}#pouchi-owner-signature .kp-description{padding:0 18px 14px;min-height:67px;font-size:14px}#pouchi-owner-signature .kp-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}#pouchi-owner-signature .kp-step{min-height:49px;padding:12px 8px;font-size:13px}#pouchi-owner-signature .kp-step:nth-child(2){border-right:0}#pouchi-owner-signature .kp-step:nth-child(-n+2){border-bottom:1px solid var(--kp-line)}#pouchi-owner-signature .kp-address{padding:12px 16px;gap:6px 9px;font-size:12px}#pouchi-owner-signature .kp-address code{font-size:13px}#pouchi-owner-signature .kp-address-same{font-size:12px}#pouchi-owner-signature .kp-footnote{font-size:12px}#pouchi-owner-signature .kp-tools{gap:8px}}

#pouchi-owner-signature .kp-denial-mark{position:absolute;left:0;right:0;top:35px;line-height:1.25;font-family:var(--kp-font);font-size:38px;font-weight:400;color:var(--kp-no);text-align:center;opacity:0}
#pouchi-owner-signature .kp-output.blocked .kp-denial-mark{opacity:1}
#pouchi-owner-signature .kp-output.blocked .kp-paper{border-color:var(--kp-no)!important}
#pouchi-owner-signature .kp-output.blocked .kp-output-state{color:var(--kp-no);font-size:14px;font-weight:500}
@media(max-width:520px){#pouchi-owner-signature .kp-denial-mark{font-size:34px;top:33px}#pouchi-owner-signature .kp-output.blocked .kp-output-state{font-size:13px}}

#pouchi-owner-signature .kp-playback{display:flex;justify-content:flex-end;gap:16px;padding:10px 18px;border-top:1px solid var(--kp-line)}
#pouchi-owner-signature .kp-playback button{font:inherit;font-size:12px;color:var(--kp-sub);background:none;border:0;padding:8px;min-height:44px;min-width:44px;cursor:pointer}
#pouchi-owner-signature .kp-playback button:focus-visible{outline:2px solid var(--kp-green);outline-offset:2px}

/* Existing theme and official joey drawing, with one shared22s gate timeline. */
.kd.as {
  --bg-elev: #fff; --fg: #141513; --fg-3: #686b63; --line: rgba(20,21,19,.1); --line-2: rgba(20,21,19,.17);
  --brand: #1d5a43; --brand-tint: #e5eee8; --as-press: #154431; --as-sunk: #f0f1ed; --as-roof: #cfd2ca; --as-zone: #eef4f0; --as-pouch: #1d5a43; --as-zone-line: rgba(29,90,67,.2);
  --ok: #286c48; --ok-bg: #e6f0e9; --no: #b0432a; --no-bg: #f9e8e3;
  width: 100%; max-width: 620px; justify-self: end; font-variant-numeric: tabular-nums;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kd.as {
  --bg-elev: #171e1a; --fg: #edf1e9; --fg-3: #a5b0a7; --line: rgba(237,241,233,.1); --line-2: rgba(237,241,233,.18);
  --brand: #86cfa8; --brand-tint: #22382c; --as-press: #a9e0c2; --as-sunk: #212a24; --as-roof: #414c45; --as-zone: #1c2a22; --as-pouch: #4e8a6b; --as-zone-line: rgba(134,207,168,.24);
  --ok: #8fd4ae; --ok-bg: #1f3a2b; --no: #f2a28c; --no-bg: #3d241d; --shadow-md: 0 1px 0 rgba(255,255,255,.03); } }
:root[data-theme="dark"] .kd.as {
  --bg-elev: #171e1a; --fg: #edf1e9; --fg-3: #a5b0a7; --line: rgba(237,241,233,.1); --line-2: rgba(237,241,233,.18);
  --brand: #86cfa8; --brand-tint: #22382c; --as-press: #a9e0c2; --as-sunk: #212a24; --as-roof: #414c45; --as-zone: #1c2a22; --as-pouch: #4e8a6b; --as-zone-line: rgba(134,207,168,.24);
  --ok: #8fd4ae; --ok-bg: #1f3a2b; --no: #f2a28c; --no-bg: #3d241d; --shadow-md: 0 1px 0 rgba(255,255,255,.03);
}
/* Positions the motion needs, mirrored from LAYOUTS in agent-scene.mjs (feet of the joey, tag and card offsets). */
.as-d { --hx: 84px; --hy: 344.2px; --py: 316.2px; --gy: 372px; --zx: 252px; --mx: 369px; --ox: 486px; --tdx: 430px; --tdy: -171.2px; --adx: -240px; --ady: 90px; --sh: 198px; }
.as-m { --hx: 49.6px; --hy: 429.45px; --py: 405.65px; --gy: 446px; --zx: 134px; --mx: 203px; --ox: 272px; --tdx: 232.8px; --tdy: -307.8px; --adx: -66px; --ady: 90px; --sh: 230px; }
/* On phones the joeys are drawn at .85 (LAYOUTS.m.sc); --tdx / --tdy are in that scaled space. */

.as-scene { display: block; width: 100%; height: auto; font-family: inherit; overflow: hidden; }
.as-m { display: none; }
@media (max-width: 640px) { .as-d { display: none; } .as-m { display: block; } }
.as-scene text { font-size: 13px; fill: var(--fg); letter-spacing: 0; }
.as-scene .as-lab { font-size: 12px; fill: var(--fg-3); }

/* chain */
.as-old rect { fill: var(--bg-elev); stroke: var(--line-2); stroke-width: 1.5; }
.as-scene .ln { fill: none; stroke: var(--line-2); stroke-width: 2; stroke-linecap: round; }
.as-scene .lk { fill: none; stroke: var(--line-2); stroke-width: 1.5; }
.as-pm-box { fill: var(--bg-elev); stroke: var(--brand); stroke-width: 2; }
.as-pm .k { font-size: 12px; font-weight: 600; fill: var(--brand); }
.as-pm .v { font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.as-pm .s { font-size: 12px; fill: var(--fg-3); }
.as-dot { fill: var(--brand); fill-opacity: 0; stroke: var(--brand); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.as-dot.d1 { fill-opacity: 1; }
.as-btn { opacity: 0; transform-box: fill-box; transform-origin: center; }
.as-btn rect { fill: var(--brand); }
.as-btn text { font-size: 14px; font-weight: 600; fill: var(--bg-elev); text-anchor: middle; }
.as-pm-in { transform-box: fill-box; transform-origin: center; }

/* ground, area, shops */
.as-ground { fill: none; stroke: var(--line-2); stroke-width: 1.5; }
.as-zone rect { fill: var(--as-zone); stroke: var(--as-zone-line); stroke-width: 1.5; }
.as-scene .as-zone text { font-size: 12px; font-weight: 600; fill: var(--brand); text-anchor: end; }
.as-shop .wall { fill: var(--bg-elev); stroke: var(--line-2); stroke-width: 1.5; }
.as-shop .win, .as-shop .door { fill: var(--as-sunk); }
.as-shop .roof { fill: var(--as-roof); }
.as-shop.s1 .roof, .as-shop.s1 .sign { fill: var(--brand); }
.as-shop .sign { fill: var(--fg-3); fill-rule: evenodd; }
.as-shop text { font-weight: 600; text-anchor: middle; }

/* joeys and pouch: flat fills, parts separated by knockout gaps in the card colour */
.jy path { fill: var(--brand); }
.jy .gap { stroke: var(--bg-elev); stroke-width: 5; paint-order: stroke; stroke-linejoin: round; }
.jy .jy-eye, .jy .jy-happy { fill: var(--bg-elev); stroke: none; }
.jy-happy { opacity: 0; }
.as-pouch { fill: var(--as-pouch); stroke: var(--bg-elev); stroke-linejoin: round; paint-order: stroke; }
.as-d .as-pouch { stroke-width: 2.5; } .as-m .as-pouch { stroke-width: 3; }
.as-scene .as-none { font-size: 12px; fill: var(--fg-3); text-anchor: middle; }
.j-pos { transform: translate(var(--zx), var(--gy)); }
.j-tilt { transform-origin: 0 14px; }
.jy-ear.l { transform-origin: -5px -1px; } .jy-ear.r { transform-origin: 5px -1px; }
.jy-eyes, .jy-eye { transform-origin: 0 -1px; }
.tag { fill: var(--bg-elev); stroke: var(--brand); stroke-width: 1.5; }
.tag-l { fill: none !important; stroke: var(--brand); stroke-width: 1.5; stroke-linecap: round; }

/* check lines and chips */
.as-line { fill: none; stroke: var(--brand); stroke-width: 1.5; stroke-dasharray: 2 4; stroke-linecap: round; opacity: 0; }
.as-draw { fill: none; stroke: #fff; stroke-width: 8; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.as-chip { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
.as-chip text { font-weight: 600; }
.as-chip.ask text { text-anchor: middle; }
.as-chip.ask path { fill: var(--bg-elev); stroke: var(--line-2); stroke-width: 1.5; }
.as-chip.ok path { fill: var(--ok-bg); } .as-chip.ok text { fill: var(--ok); }
.as-chip.no path { fill: var(--no-bg); } .as-chip.no text { fill: var(--no); }
.as-chip .ic { fill: none !important; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.as-chip.ok .ic { stroke: var(--ok); } .as-chip.no .ic { stroke: var(--no); }
.as-chip.c2, .as-d .as-chip.c4, .as-d .bo-no { opacity: 1; }

.as-badge { opacity: 0; transform-box: fill-box; transform-origin: center; }
.as-badge circle { stroke-width: 1.5; } .as-badge.ok circle { fill: var(--ok-bg); stroke: var(--ok); } .as-badge.no circle { fill: var(--no-bg); stroke: var(--no); }
.as-badge .ic { fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .as-badge.ok .ic { stroke: var(--ok); } .as-badge.no .ic { stroke: var(--no); }
.tag-sz { transform: scale(1.25); } .as-m .tag-sz { transform: scale(1.4); } /* phones: one chip, so they never overlap */
.as .kd-step { line-height: var(--lh-small); align-content: start; }
@media (max-width: 640px) { .as .kd-step { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.as-note { padding: 0 18px 14px; font-size: 12px; line-height: var(--lh-small); color: var(--fg-3); }

/* The shared agent clock owns the full scene, including progress and controls. */
.as .as-zone { display:none; }
.as .kd-steps * { animation:none; }
.as .as-chip { opacity:0; }
.as .as-chip.c2 { opacity:1; }
.as .j-pos { transform:translate(var(--zx),var(--gy)); }
.as .j-arm { transform-origin:9px -25px; }
.as .as-check-state { font-size:12px; fill:var(--brand); text-anchor:middle; }
.as [data-check="refused"] .as-check-state { fill:var(--no); }
.as [data-check="checking"] .as-pm-box { fill:var(--brand-tint); }
.as [data-check="refused"] .as-pm-box { stroke:var(--no); }
.as .turnstile .post,.as .limit-gate .post { fill:var(--as-sunk);stroke:var(--line-2);stroke-width:1.2; }
.as .base { fill:var(--as-sunk);stroke:var(--line-2);stroke-width:1; }
.as .arm { fill:var(--brand); }
.as .gate-other .arm { fill:var(--as-roof); }
.as .pivot { fill:var(--fg-3); }
.as .reader { fill:var(--as-roof);stroke:var(--line-2);stroke-width:1; }
.as .reader-slot { fill:none;stroke:var(--fg-3);stroke-width:1.5; }
.as .reader-ok,.as .reader-no { fill:none;stroke:var(--bg-elev);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:0; }
.as [data-result="checking"] .reader { fill:var(--brand-tint);stroke:var(--brand); }
.as [data-result="allowed"] .reader { fill:var(--brand);stroke:var(--brand); }
.as [data-result="allowed"] .reader-ok { opacity:1; }
.as [data-result="refused"] .reader,.as [data-result="refused"] .arm { fill:var(--no);stroke:var(--no); }
.as [data-result="refused"] .reader-no { opacity:1; }
.as [data-result="allowed"] .reader-slot,.as [data-result="refused"] .reader-slot { opacity:0; }
.as .scene-controls { gap:16px; }
.as .scene-controls button { min-width:64px; }

@media(max-width:640px){.as-m .as-shop text{font-size:12px}}

/* Approved payment scene. The landing theme supplies the palette. */
#pouchi-payment{--pr-paper:light-dark(#fff,#171b16);--pr-ink:var(--fg);--pr-text:var(--muted);--pr-muted:var(--muted);--pr-line:var(--line);--pr-brand:var(--brand);--pr-tint:light-dark(#e7efe9,#21372a);--pr-on:light-dark(#fff,#10271b);color:var(--pr-ink);width:100%;max-width:480px;margin:0;justify-self:center;font-family:var(--font);font-size:14px;line-height:1.5;letter-spacing:-.015em}
#pouchi-payment *{box-sizing:border-box}
#pouchi-payment .pr-visual{display:flex;align-items:flex-start;transition:min-height .4s cubic-bezier(.2,.8,.2,1)}
#pouchi-payment .pr-unit{font-size:11px;font-weight:400;margin-left:5px;color:var(--pr-muted);letter-spacing:0}
#pouchi-payment .pr-app{height:478px;position:relative;transition:height .4s cubic-bezier(.2,.8,.2,1);width:100%;max-width:440px;border:1px solid var(--pr-line);border-radius:10px;overflow:hidden;background:var(--pr-paper);box-shadow:0 16px 40px -24px var(--pr-shadow)}
#pouchi-payment .pr-appbar{height:48px;display:flex;align-items:center;padding:0 24px;border-bottom:1px solid var(--pr-line)}
#pouchi-payment .pr-appbar b{font-size:13px;font-weight:550}
#pouchi-payment .pr-select,#pouchi-payment .pr-vault,#pouchi-payment .pr-receipt{position:absolute;inset:48px 0 auto;min-width:0;opacity:0;visibility:hidden;transform:translateX(10px);transition:none}
#pouchi-payment .pr-select{padding:24px;transform:translateX(-10px)}
#pouchi-payment .pr-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:20px}
#pouchi-payment .pr-heading h2,#pouchi-payment .pr-vaultbody h2,#pouchi-payment .pr-booked{font-size:22px;font-weight:550;letter-spacing:-.035em;line-height:1.25;margin:0}
#pouchi-payment .pr-label{font-size:12px;color:var(--pr-muted)}
#pouchi-payment .pr-screen{margin:0 20px 20px;text-align:center;border-top:2px solid var(--pr-line);padding-top:5px;font-size:11px;letter-spacing:.06em;color:var(--pr-muted)}
#pouchi-payment .pr-seats{display:grid;grid-template-columns:16px repeat(6,minmax(0,1fr));gap:12px 10px;max-width:310px;align-items:center;margin:0 auto 24px}
#pouchi-payment .pr-row-label{font-size:11px;color:var(--pr-muted)}
#pouchi-payment .pr-seat{height:27px;min-width:0;max-width:32px;width:100%;margin:auto;border:1.5px solid var(--pr-line);border-bottom-width:4px;border-radius:5px 5px 3px 3px;display:grid;place-items:center;font-size:11px;color:var(--pr-muted);transition:background .18s,border-color .18s,color .18s,transform .18s}
#pouchi-payment .pr-seat.selected{background:var(--pr-brand);border-color:var(--pr-brand);color:var(--pr-on);transform:translateY(-2px)}
#pouchi-payment .pr-selection{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--pr-line);padding:16px 0}
#pouchi-payment .pr-selection-value{font-size:16px;font-weight:550;color:var(--pr-brand);min-height:24px}
#pouchi-payment .pr-total{font-size:22px;font-weight:550;letter-spacing:-.025em;white-space:nowrap;font-variant-numeric:tabular-nums}
#pouchi-payment .pr-unit{font-size:11px;font-weight:400;margin-left:5px;color:var(--pr-muted);letter-spacing:0}
#pouchi-payment .pr-pay{display:flex;align-items:center;justify-content:center;width:100%;height:44px;border-radius:6px;background:var(--pr-brand);color:var(--pr-on);font-size:14px;font-weight:500;transition:transform .15s}
#pouchi-payment .pr-pay.pressed{transform:scale(.985)}
#pouchi-payment .pr-vaultbody{padding:24px}
#pouchi-payment .pr-order-context{display:flex;align-items:center;gap:8px;color:var(--pr-muted);font-size:13px;margin:12px 0 16px}
#pouchi-payment .pr-amount{font-size:36px;font-weight:550;line-height:1.15;letter-spacing:-.045em;font-variant-numeric:tabular-nums;margin-bottom:24px}
#pouchi-payment .pr-amount .pr-unit{font-size:12px;margin-left:7px}
#pouchi-payment .pr-facts{padding:16px 0;border-top:1px solid var(--pr-line);border-bottom:1px solid var(--pr-line)}
#pouchi-payment .pr-fact,#pouchi-payment .pr-result-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:13px;margin-bottom:12px}
#pouchi-payment .pr-fact:last-child,#pouchi-payment .pr-result-row:last-child{margin-bottom:0}
#pouchi-payment .pr-fact>span:first-child,#pouchi-payment .pr-result-row>span:first-child{color:var(--pr-muted)}
#pouchi-payment .pr-recipient{display:block;text-align:right}
#pouchi-payment .pr-recipient small{display:block;font-size:11px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--pr-muted);letter-spacing:0;margin-top:3px}
#pouchi-payment .pr-green{color:var(--pr-brand)}
#pouchi-payment .pr-auth{position:relative;padding-top:20px}
#pouchi-payment .pr-pin-label{font-size:12px;color:var(--pr-text);margin-bottom:10px}
#pouchi-payment .pr-pin{display:flex;gap:7px}
#pouchi-payment .pr-pin i{height:38px;flex:1;min-width:0;display:grid;place-items:center;border:1px solid var(--pr-line);border-radius:4px;font-style:normal;font-size:22px;color:var(--pr-brand);transition:background .16s,border-color .16s}
#pouchi-payment .pr-pin i.filled{background:var(--pr-tint);border-color:var(--pr-brand)}
#pouchi-payment .pr-process{position:absolute;inset:20px 0 0;display:flex;align-items:center;background:var(--pr-paper);font-size:14px;font-weight:500;visibility:hidden;opacity:0;transition:opacity .2s,visibility .2s}
#pouchi-payment .pr-vaultfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:20px;font-size:11px;color:var(--pr-muted)}
#pouchi-payment .pr-receipt{padding:24px}
#pouchi-payment .pr-booked{display:flex;align-items:center;gap:10px;color:var(--pr-brand)}
#pouchi-payment .pr-booked i{font-size:17px;font-style:normal;font-weight:400}
#pouchi-payment .pr-result-facts{border-top:1px solid var(--pr-line);padding-top:18px}
#pouchi-payment .pr-result-row{margin-bottom:16px}
#pouchi-payment [data-phase=select] .pr-select,#pouchi-payment [data-phase=approve] .pr-vault,#pouchi-payment [data-phase=processing] .pr-vault,#pouchi-payment [data-phase=receipt] .pr-receipt{opacity:1;visibility:visible;transform:translateX(0);transition:opacity .28s,transform .4s cubic-bezier(.2,.8,.2,1)}
#pouchi-payment [data-phase=processing] .pr-process{visibility:visible;opacity:1}

/* Group order context tightly; leave a larger break before authentication. */
#pouchi-payment .pr-app{max-width:480px;border-radius:8px;box-shadow:none}
#pouchi-payment .pr-appbar{padding:0 28px}
#pouchi-payment .pr-select,#pouchi-payment .pr-vaultbody,#pouchi-payment .pr-receipt{padding:28px}
#pouchi-payment .pr-order-context{margin:8px 0 8px}
#pouchi-payment .pr-amount{margin-bottom:20px;font-size:38px}
#pouchi-payment .pr-facts{padding:16px 0 0;border-bottom:0}
#pouchi-payment .pr-fact{margin-bottom:10px}
#pouchi-payment .pr-auth{margin-top:24px;padding-top:20px;border-top:1px solid var(--pr-line)}
#pouchi-payment .pr-pin{gap:14px;justify-content:flex-start;height:30px;align-items:center}
#pouchi-payment .pr-pin i{height:12px;width:12px;flex:0 0 12px;border:0;border-radius:50%;background:var(--pr-line);font-size:0;transition:background .16s,transform .16s}
#pouchi-payment .pr-pin i.filled{background:var(--pr-brand);transform:scale(1.05)}
#pouchi-payment .pr-pin-label{margin-bottom:8px}
#pouchi-payment .pr-vaultfoot{padding-top:18px}
#pouchi-payment .pr-result-facts{padding-top:16px}
#pouchi-payment .pr-result-row{margin-bottom:12px}
#pouchi-payment .pr-seats{max-width:326px;gap:12px 12px;margin-bottom:20px}
#pouchi-payment .pr-seat{border-radius:5px 5px 2px 2px}
#pouchi-payment figcaption{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:16px;font-size:12px;color:var(--muted)}
#pouchi-payment .payment-controls{display:flex;gap:12px}
#pouchi-payment button{font:inherit;color:inherit;background:none;border:0;text-decoration:underline;text-underline-offset:4px;min-height:44px;padding:0;cursor:pointer}
#pouchi-payment[data-playing=false] *{transition:none!important}
@media(max-width:480px){#pouchi-payment .pr-appbar{padding:0 20px}#pouchi-payment .pr-select,#pouchi-payment .pr-vaultbody,#pouchi-payment .pr-receipt{padding:22px 20px}#pouchi-payment .pr-seats{gap:12px 7px}#pouchi-payment .pr-amount{font-size:36px}#pouchi-payment .pr-auth{margin-top:22px}}
@media(prefers-reduced-motion:reduce){#pouchi-payment *{transition:none!important}}

#pouchi-payment .pr-select .pr-heading { margin-bottom:8px; }
#pouchi-payment .pr-select .pr-pay { margin-top:24px; }

/* Distinguish the host app from the separate Pouchi approval window. */
.pr-pouchi-context { display:none; }
.pr-app:is([data-phase="approve"],[data-phase="processing"]) .pr-app-context { display:none; }
.pr-app:is([data-phase="approve"],[data-phase="processing"]) .pr-pouchi-context { display:block; }