:root{--page:#f7f9fb;--surface:#fff;--surface-soft:#eef6f6;--surface-warm:#fff1ed;--text:#1b1f24;--muted:#64717d;--faint:#8b98a5;--border:#dbe4ea;--border-strong:#b9c8d1;--primary:#08706f;--primary-strong:#064f4f;--primary-soft:#dff3f1;--accent:#e6533f;--accent-soft:#ffe3dc;--success:#1f8a55;--warning:#b76d00;--danger:#c93636;--shadow:0 24px 70px #1b1f241f;--shadow-soft:0 16px 35px #1b1f2414;--sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--mono:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, ui-monospace, monospace;color:var(--text);background:var(--page);font:16px/1.5 var(--sans);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{min-width:320px;min-height:100svh;margin:0}button,input{font:inherit}button{border:0}button:focus-visible,input:focus-visible{outline-offset:3px;outline:3px solid #08706f38}button:disabled{cursor:not-allowed;opacity:.55}#root{min-height:100svh}.app-shell{background:linear-gradient(135deg, #08706f1a, transparent 42%), linear-gradient(315deg, #e6533f1f, transparent 44%), linear-gradient(#b9c8d138 1px, transparent 1px), linear-gradient(90deg, #b9c8d138 1px, transparent 1px), var(--page);background-size:auto,auto,28px 28px,28px 28px,auto;min-height:100svh;padding:36px}.hero-panel{border-radius:8px;width:min(1180px,100%);min-height:calc(100svh - 72px);margin:0 auto;padding:32px;overflow:hidden}.brand-row{align-items:center;gap:12px;margin-bottom:56px;display:flex}.brand-mark{border:1px solid var(--border);background:var(--surface);width:42px;height:42px;box-shadow:var(--shadow-soft);border-radius:8px;padding:7px}.eyebrow,.kicker,.section-label,.signal-label{color:var(--muted);letter-spacing:0;text-transform:uppercase;font-size:.78rem;font-weight:700}.hero-grid{grid-template-columns:minmax(0,1fr) minmax(360px,460px);align-items:center;gap:58px;display:grid}.intro{max-width:650px}.kicker{color:var(--primary);margin:0 0 14px}h1,h2,p{margin:0}h1{max-width:12ch;color:var(--text);letter-spacing:0;font-size:clamp(3rem,7vw,5.7rem);font-weight:850;line-height:.94}h2{color:var(--text);letter-spacing:0;margin-top:4px;font-size:1.35rem;line-height:1.15}.lede{max-width:610px;color:var(--muted);margin-top:24px;font-size:1.08rem}.signal-strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:620px;margin-top:36px;display:grid}.signal-strip>div{border:1px solid var(--border);background:#ffffffb8;border-radius:8px;min-height:96px;padding:18px}.signal-value,.signal-label{display:block}.signal-value{color:var(--primary-strong);margin-bottom:8px;font-size:1.25rem;font-weight:800}.listener-card{border:1px solid var(--border);box-shadow:var(--shadow-soft);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#ffffffe0;border-radius:8px;padding:24px}.card-heading{justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:24px;display:flex}.section-label{color:var(--faint);display:block}.status-pill{border:1px solid var(--border);min-height:34px;color:var(--muted);background:var(--page);border-radius:8px;flex:none;align-items:center;gap:8px;padding:7px 10px;font-size:.85rem;font-weight:700;display:inline-flex}.status-dot{background:currentColor;border-radius:999px;width:9px;height:9px}.status-pill--waiting{color:var(--warning);background:#fff7e8}.status-pill--received{color:var(--success);background:#e8f7ee}.email-field{color:var(--text);gap:9px;font-weight:800;display:grid}.email-field input{border:1px solid var(--border-strong);width:100%;height:56px;color:var(--text);background:var(--surface);border-radius:8px;padding:0 16px;box-shadow:inset 0 1px #1b1f240a}.email-field input::placeholder{color:var(--faint)}.button-row{grid-template-columns:1fr auto;gap:10px;margin-top:16px;display:grid}.primary-button,.secondary-button,.copy-button{cursor:pointer;border-radius:8px;min-height:48px;font-weight:800;transition:transform .16s,box-shadow .16s,background .16s}.primary-button:hover:not(:disabled),.secondary-button:hover:not(:disabled),.copy-button:hover:not(:disabled){transform:translateY(-1px)}.primary-button{color:#fff;background:var(--primary);padding:0 20px;box-shadow:0 14px 24px #08706f38}.primary-button:hover:not(:disabled){background:var(--primary-strong)}.secondary-button{color:var(--text);border:1px solid var(--border);background:var(--surface-soft);padding:0 18px}.status-card{border:1px solid var(--border);background:var(--page);border-radius:8px;grid-template-columns:42px 1fr;gap:14px;min-height:92px;margin-top:18px;padding:16px;display:grid}.status-card--waiting{background:#fff9ef;border-color:#ffd99a}.status-card--received{background:#effaf3;border-color:#bce7cb}.status-icon{width:42px;height:42px;color:var(--primary-strong);background:var(--primary-soft);border-radius:8px;place-items:center;font-size:1.35rem;font-weight:900;display:grid}.status-card strong{color:var(--text);margin-bottom:3px;display:block}.status-card p{color:var(--muted);font-size:.95rem}.error-banner{color:var(--danger);background:#fff0f0;border:1px solid #c9363640;border-radius:8px;margin-top:14px;padding:12px 14px;font-size:.92rem;font-weight:700}.otp-panel{border:1px dashed var(--border-strong);background:linear-gradient(135deg, var(--surface-soft), var(--surface-warm));border-radius:8px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;min-height:118px;margin-top:18px;padding:18px;display:grid}.otp-panel--ready{border-style:solid;border-color:#08706f61}.otp-code{color:var(--text);font-family:var(--mono);letter-spacing:0;overflow-wrap:anywhere;margin-top:6px;font-size:clamp(2rem,9vw,3.4rem);font-weight:900;line-height:1}.copy-button{min-width:92px;color:var(--primary-strong);background:#fff;border:1px solid #08706f52;padding:0 16px}@media (width<=900px){.app-shell{padding:18px}.hero-panel{min-height:calc(100svh - 36px);padding:22px}.brand-row{margin-bottom:34px}.hero-grid{grid-template-columns:1fr;gap:28px}h1{max-width:11ch;font-size:3.6rem}.signal-strip{grid-template-columns:1fr;margin-top:26px}.signal-strip>div{min-height:auto}}@media (width<=560px){.app-shell{padding:0}.hero-panel{border:0;border-radius:0;min-height:100svh;padding:18px}.brand-row{margin-bottom:28px}.eyebrow{font-size:.72rem}h1{max-width:10ch;font-size:2.65rem}.lede{font-size:1rem}.listener-card{padding:16px}.card-heading,.otp-panel,.button-row{grid-template-columns:1fr}.card-heading{display:grid}.status-pill{justify-self:start}.secondary-button,.copy-button{width:100%}}
