/* Arc waitlist. Tokens mirror registry/foundation.css; layout mirrors the landing page. */

@font-face { font-family: "Geist Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/fonts/geist.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/fonts/inter.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light;
  --background: oklch(100% 0 0);
  --surface: oklch(100% 0 0);
  --surface-muted: oklch(97.8% 0 0);
  --foreground: oklch(15% 0 0);
  --text-secondary: oklch(46% 0 0);
  --text-muted: oklch(59% 0 0);
  --border: oklch(93.5% 0 0);
  --border-subtle: oklch(96.5% 0 0);
  --border-strong: oklch(82% 0 0);
  --success: oklch(49% .19 150);
  --danger: oklch(54% .21 25);
  --radius-control: 1.125rem; --radius-panel: 1.625rem; --radius-pill: 9999px;
  --font-display: "Geist Variable", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem;
  --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-4xl: 3.25rem;
  --tracking-display: -.03em; --tracking-body: -.01em;
  --ease-enter: cubic-bezier(.16,1,.3,1);
  --ease-standard: cubic-bezier(.22,1,.36,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --duration-fast: 160ms; --duration-standard: 240ms; --duration-considered: 480ms;
  /* The hero and closing panels keep the landing page's warm light gradient in both themes. */
  --panel-ink: #262931;
  --panel-secondary: #5b626d;
  --panel-gradient: radial-gradient(ellipse 32% 42% at 3% 96%, #e9babb 0%, transparent 100%), radial-gradient(ellipse 35% 50% at 95% 5%, #afc7f6 0%, transparent 100%), radial-gradient(ellipse 45% 45% at 50% 110%, #e8d9ad 0%, transparent 100%), #f8f7f5;
  --footer-bg: oklch(19% 0 0);
  --footer-fg: #f5f5f3;
  --footer-secondary: #a8abae;
  --footer-border: #ffffff2d;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --background: oklch(19% 0 0);
    --surface: oklch(21.5% 0 0);
    --surface-muted: oklch(26% 0 0);
    --foreground: oklch(96% 0 0);
    --text-secondary: oklch(77% 0 0);
    --text-muted: oklch(64% 0 0);
    --border: oklch(29% 0 0);
    --border-subtle: oklch(25% 0 0);
    --border-strong: oklch(40% 0 0);
    --success: oklch(78% .18 150);
    --danger: oklch(76% .2 25);
    --footer-bg: #f6f6f3;
    --footer-fg: #24282b;
    --footer-secondary: #697077;
    --footer-border: #1d262b2a;
  }
}

/* No focus rings or outlines for any input method (product decision). */
:is(*:focus, *:focus-visible, *:focus-within) { outline: none !important; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--background); color: var(--foreground); font-family: var(--font-body); font-size: var(--text-base); font-weight: 400; letter-spacing: var(--tracking-body); line-height: 1.4; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: var(--tracking-display); line-height: 1.1; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; letter-spacing: inherit; }
img, video, svg { display: block; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: fixed; top: 8px; left: 16px; z-index: 100; padding: 12px 16px; border-radius: 12px; background: var(--foreground); color: var(--background); transform: translateY(-150%); }
.skip:focus { transform: none; }
.container { width: min(100% - 64px, 1248px); margin-inline: auto; }

/* Header */
.header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid color-mix(in srgb, var(--border-subtle) 42%, transparent); background: color-mix(in srgb, var(--background) 94%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.header-inner { width: min(100% - 64px, 1408px); min-height: 72px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--foreground); font-family: var(--font-display); font-size: var(--text-base); font-weight: 500; letter-spacing: var(--tracking-display); }
.brand .mark { width: 26px; height: 26px; }
.header-links { display: flex; align-items: center; gap: 4px; }
.icon-link { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-control); color: var(--text-secondary); transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
.header-cta { display: inline-flex; align-items: center; min-height: 36px; margin-left: 8px; padding: 0 14px; border-radius: calc(var(--radius-control) - 4px); background: var(--foreground); color: var(--background); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; transition: background-color var(--duration-fast) var(--ease-standard); }

/* Hero */
.hero { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: min(calc(100% - 48px), 1408px); min-height: 690px; margin: 24px auto 128px; padding: 96px 24px; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: 30px; background: var(--panel-gradient); color: var(--panel-ink); text-align: center; }
@media (prefers-color-scheme: dark) { .hero, .final-inner { border-color: #ffffff14; } }
.hero h1 { max-width: 12ch; margin-inline: auto; color: var(--panel-ink); font-size: clamp(48px, 5.55vw, 78px); font-weight: 400; letter-spacing: -.057em; line-height: 1.065; text-wrap: balance; }
.reveal-title .line { display: block; }
/* Each word rises out of its own feathered clip while it sharpens, as in the TextReveal component. */
.reveal-title .clip { display: inline-block; vertical-align: top; padding: .1em .16em .24em; margin: -.1em -.16em -.24em; -webkit-mask-image: linear-gradient(#000 calc(100% - .18em), transparent); mask-image: linear-gradient(#000 calc(100% - .18em), transparent); }
.reveal-title .word { display: inline-block; animation: rise .76s var(--ease-enter) backwards, fade .44s var(--ease-standard) backwards, focus .58s var(--ease-enter) backwards; }
.reveal-title .w2 { animation-delay: .06s; }
.reveal-title .w3 { animation-delay: .18s; }
.reveal-title .w4 { animation-delay: .24s; }
.reveal-title .w5 { animation-delay: .30s; }
@keyframes rise { from { transform: translateY(.62em); } }
@keyframes fade { from { opacity: 0; } }
@keyframes focus { from { filter: blur(6px); } }
.hero-body { width: 100%; display: flex; flex-direction: column; align-items: center; animation: settle .7s var(--ease-enter) .32s backwards; }
@keyframes settle { from { opacity: 0; transform: translateY(16px); } }
.lead { max-width: 580px; margin: 24px auto 0; color: var(--panel-secondary); font-size: clamp(15px, 1.35vw, 18px); line-height: 1.55; text-wrap: pretty; }

/* Join form: the field and the success row share one box, so the form morphs in place. */
.join { position: relative; width: min(100%, 460px); height: 60px; margin-top: 32px; border-radius: var(--radius-control); background: #fff; box-shadow: 0 0 0 1px #2629311a, 0 10px 30px #26293114, 0 2px 6px #2629310d; transition: box-shadow var(--duration-standard) var(--ease-standard), background-color var(--duration-considered) var(--ease-standard); }
.join:has(input:focus) { box-shadow: 0 0 0 1px #26293138, 0 12px 34px #2629311c, 0 2px 6px #2629310d; }
.join[data-invalid] { box-shadow: 0 0 0 1px color-mix(in srgb, #c4322b 55%, transparent), 0 10px 30px #26293114; }
.join[data-state="done"] { background: #ffffffcc; }
.join-form, .join-done { position: absolute; inset: 0; transition: opacity var(--duration-standard) var(--ease-standard), transform var(--duration-considered) var(--ease-enter), filter var(--duration-considered) var(--ease-enter), visibility 0s linear 0s; }
.field { display: flex; align-items: center; gap: 6px; height: 100%; padding: 6px; }
.field input { flex: 1; min-width: 0; height: 100%; padding: 0 12px 0 14px; border: 0; background: transparent; color: var(--panel-ink); font-size: 16px; }
.field input::placeholder { color: #8a909a; opacity: 1; }
.submit { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; height: 100%; padding: 0 18px; border: 0; border-radius: calc(var(--radius-control) - 6px); background: var(--panel-ink); color: #f8f7f5; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; transition: background-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.submit:active { transform: scale(.975); }
.submit-label { transition: opacity var(--duration-fast) var(--ease-standard); }
.spinner { position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 1.5px solid #f8f7f559; border-top-color: #f8f7f5; border-radius: 50%; opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard); animation: spin .7s linear infinite; }
.join[data-state="loading"] .submit-label { opacity: 0; }
.join[data-state="loading"] .spinner { opacity: 1; }
.join[data-state="loading"] .submit { cursor: progress; }
@keyframes spin { to { transform: rotate(360deg); } }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.join-done { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 20px; color: var(--panel-ink); font-size: var(--text-base); font-weight: 500; opacity: 0; visibility: hidden; transform: translateY(10px) scale(.98); filter: blur(4px); transition-delay: 0s, 0s, 0s, var(--duration-standard); }
.done-icon { flex: none; color: #1f8a4c; }
.done-title { font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.join[data-state="done"] .join-form { opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.98); filter: blur(4px); pointer-events: none; transition-delay: 0s, 0s, 0s, var(--duration-standard); }
.join[data-state="done"] .join-done { opacity: 1; visibility: visible; transform: none; filter: none; transition-delay: 90ms, 90ms, 90ms, 0s; }

.join-note { min-height: 1.5em; margin-top: 14px; color: var(--panel-secondary); font-size: var(--text-sm); line-height: 1.5; text-wrap: pretty; transition: color var(--duration-fast) var(--ease-standard); }
.join-note[data-tone="error"] { color: #b3261e; }
.count { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--panel-secondary); font-size: var(--text-xs); font-variant-numeric: tabular-nums; animation: fadeIn var(--duration-considered) var(--ease-standard); }
.count[hidden] { display: none; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #1f8a4c; box-shadow: 0 0 0 0 #1f8a4c55; animation: pulse 2.4s var(--ease-standard) infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 #1f8a4c4d; } 70%, 100% { box-shadow: 0 0 0 6px #1f8a4c00; } }
@keyframes fadeIn { from { opacity: 0; } }

/* Teasers */
.teasers { padding-bottom: 136px; }
.section-heading { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: end; margin-bottom: 40px; }
.section-heading h2, .coming-intro h2 { font-size: clamp(var(--text-3xl), 3.8vw, var(--text-4xl)); font-weight: 400; line-height: 1.12; letter-spacing: var(--tracking-display); }
.section-heading p, .coming-intro p { max-width: 460px; color: var(--text-secondary); font-size: var(--text-base); line-height: 1.8; text-wrap: pretty; }
.teaser-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.teaser { grid-column: span 2; min-width: 0; margin: 0; }
.teaser-wide { grid-column: span 3; }
.teaser-scene { position: relative; isolation: isolate; display: grid; place-items: center; padding: 28px; overflow: hidden; border-radius: var(--radius-panel); background: var(--tone); }
.teaser-scene::after { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(145deg, #ffffff24, #292c3b12); pointer-events: none; }
.teaser-wide .teaser-scene { padding: 36px; }
.teaser video { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-control); background: #fdfdfd; box-shadow: 0 0 0 1px #17222e0d, 0 12px 32px #17222e1a; }
.teaser figcaption { display: grid; gap: 6px; padding: 18px 4px 0; }
.teaser figcaption strong { font-size: var(--text-base); font-weight: 500; }
.teaser figcaption span { color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.6; text-wrap: pretty; }
.tone-1 { --tone: #b2b49e; }
.tone-2 { --tone: #9caec3; }
.tone-3 { --tone: #d5b6a3; }
.tone-4 { --tone: #c4cad5; }
.tone-5 { --tone: #a4b4c5; }
.tone-6 { --tone: #c9b4a1; }
.tone-7 { --tone: #bec7d0; }
.tone-8 { --tone: #cbbba7; }

/* What's coming */
.coming { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; padding-block: 112px 136px; border-top: 1px solid var(--border); }
.coming-intro { display: grid; align-content: start; gap: 24px; position: sticky; top: 120px; align-self: start; }
.coming-list { margin: 0; padding: 0; list-style: none; }
.coming-list li { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 12px 32px; padding: 28px 0; border-top: 1px solid var(--border); }
.coming-list li:last-child { border-bottom: 1px solid var(--border); }
.coming-list h3 { font-family: var(--font-body); font-size: var(--text-lg); font-weight: 500; letter-spacing: var(--tracking-body); line-height: 1.4; }
.coming-list p { color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.75; text-wrap: pretty; }

/* Closing panel */
.final { padding: 0 0 128px; }
.final-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; width: min(calc(100% - 48px), 1408px); min-height: 480px; margin-inline: auto; padding: 88px 24px; overflow: hidden; border: 1px solid #d7d6d8; border-radius: 30px; background: var(--panel-gradient); color: var(--panel-ink); text-align: center; }
.final-inner h2 { max-width: 13ch; color: var(--panel-ink); font-size: clamp(44px, 5.3vw, 76px); font-weight: 400; line-height: 1.065; letter-spacing: -.057em; }
.final-inner p { max-width: 40ch; margin: 24px auto 30px; color: var(--panel-secondary); font-size: clamp(15px, 1.35vw, 18px); line-height: 1.55; text-wrap: pretty; }
.final-cta { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 48px; padding: 12px 20px; border-radius: var(--radius-control); background: var(--panel-ink); color: #f8f7f5; font-size: var(--text-sm); font-weight: 500; transition: background-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.final-cta svg { transition: transform var(--duration-standard) var(--ease-standard); }
.final-cta:active { transform: scale(.975); }

/* Footer */
.footer { padding-block: 48px 26px; background: var(--footer-bg); color: var(--footer-fg); }
.footer-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 240px); gap: 48px; min-height: 300px; padding-block: 12px 56px; }
.footer-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--footer-fg); font-family: var(--font-display); font-size: 18px; font-weight: 500; letter-spacing: -.035em; }
.footer-brand svg { width: 24px; height: 24px; flex: none; }
.footer-intro h2 { margin-top: 36px; color: var(--footer-fg); font-size: clamp(35px, 3.5vw, 48px); font-weight: 400; line-height: 1.1; letter-spacing: -.045em; }
.footer-intro p { max-width: 380px; margin-top: 18px; color: var(--footer-secondary); font-size: 14px; line-height: 1.5; }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 4px; }
.footer-links span { margin-bottom: 8px; color: var(--footer-secondary); font-size: 13px; }
.footer-links a { color: var(--footer-fg); font-size: 14px; text-underline-offset: 4px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 48px; padding-top: 20px; border-top: 1px solid var(--footer-border); color: var(--footer-secondary); font-size: 13px; }

/* Scroll reveal: only elements below the fold at load are hidden, so nothing flashes and nothing depends on scripts. */
.rv.rv-pending { opacity: 0; transform: translateY(24px) scale(.985); }
.rv { transition: opacity .6s var(--ease-enter), transform .75s var(--ease-enter); transition-delay: var(--rv-delay, 0s); }

@media (hover: hover) and (pointer: fine) {
  .icon-link:hover { color: var(--foreground); background: var(--surface-muted); }
  .header-cta:hover { background: color-mix(in srgb, var(--foreground) 82%, var(--background)); }
  .submit:hover, .final-cta:hover { background: #454956; }
  .final-cta:hover svg { transform: translateX(3px); }
  .footer-links a:hover { text-decoration: underline; }
}

@media (max-width: 900px) {
  .section-heading { grid-template-columns: 1fr; gap: 16px; }
  .teaser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .teaser, .teaser-wide { grid-column: span 1; }
  .teaser-scene, .teaser-wide .teaser-scene { padding: 24px; }
  .coming { grid-template-columns: 1fr; gap: 32px; }
  .coming-intro { position: static; }
}

@media (max-width: 760px) {
  .container, .header-inner { width: calc(100% - 40px); }
  .header-inner { min-height: 64px; }
  .hero { width: calc(100% - 32px); min-height: 600px; margin: 16px auto 96px; padding: 64px 20px; border-radius: 24px; }
  .hero h1 { font-size: clamp(40px, 8vw, 60px); }
  .teasers { padding-bottom: 88px; }
  .coming { padding-block: 64px 88px; }
  .coming-list li { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
  .final { padding-bottom: 88px; }
  .final-inner { width: calc(100% - 32px); min-height: 420px; padding: 72px 24px; border-radius: 24px; }
  .footer { padding-top: 30px; }
  .footer-main { display: block; min-height: 0; padding-block: 4px 48px; }
  .footer-links { margin-top: 48px; }
}

@media (max-width: 600px) {
  .teaser-grid { grid-template-columns: 1fr; gap: 28px; }
  .teaser-scene, .teaser-wide .teaser-scene { padding: 20px; }
}

@media (max-width: 520px) {
  .container, .header-inner { width: calc(100% - 32px); }
  .header-cta { padding: 0 12px; margin-left: 4px; }
  .icon-link { width: 40px; height: 40px; }
  .hero { min-height: 580px; margin-bottom: 72px; padding: 56px 16px; }
  .hero h1 { font-size: clamp(36px, 10.5vw, 48px); }
  .lead { margin-top: 20px; font-size: 15px; }
  /* On narrow screens the button drops under the field so both stay full size. */
  .join { height: auto; min-height: 120px; background: transparent; box-shadow: none; }
  .join:has(input:focus), .join[data-invalid] { box-shadow: none; }
  .join[data-state="done"] { background: #ffffffcc; box-shadow: 0 0 0 1px #2629311a, 0 10px 30px #26293114; }
  .field { flex-direction: column; align-items: stretch; gap: 8px; padding: 0; }
  .field input { flex: none; height: 56px; padding: 0 16px; border-radius: var(--radius-control); background: #fff; box-shadow: 0 0 0 1px #2629311a, 0 10px 30px #26293114; transition: box-shadow var(--duration-standard) var(--ease-standard); }
  .field input:focus { box-shadow: 0 0 0 1px #26293138, 0 12px 34px #2629311c; }
  .join[data-invalid] .field input { box-shadow: 0 0 0 1px color-mix(in srgb, #c4322b 55%, transparent), 0 10px 30px #26293114; }
  .submit { height: 56px; border-radius: var(--radius-control); }
  .join-done { padding: 0 16px; }
  .done-title { white-space: normal; text-align: left; }
  .section-heading h2, .coming-intro h2 { font-size: var(--text-3xl); }
  .section-heading p, .coming-intro p { font-size: var(--text-sm); }
  .final-inner { min-height: 380px; padding: 64px 18px; }
  .final-inner h2 { font-size: clamp(36px, 10.5vw, 48px); }
  .footer-bottom { align-items: flex-start; font-size: 11px; }
}

@media (max-width: 360px) {
  .header-links .icon-link:first-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; }
  .reveal-title .clip { -webkit-mask-image: none; mask-image: none; }
  .reveal-title .word { animation: fade .15s linear backwards; }
  .hero-body { animation: fadeIn .15s linear backwards; }
  .rv.rv-pending { opacity: 1; transform: none; }
  .live-dot { animation: none; }
  .spinner { animation-duration: 1.4s; }
}

/* 404 */
.not-found { min-height: calc(100vh - 48px); margin-bottom: 24px; }
.not-found .final-cta { margin-top: 28px; }