/* Self-hosted system fonts and a light-only palette. */
:root {
  color-scheme: light;
  --bg: #fcfcfc;
  --surface: #fff;
  --band: #f3f4f6;
  --ink: #111;
  --muted: #555;
  --accent: #0a66f0;
  --accent-hover: #0b63d6;
  --accent-active: #0956bd;
  --accent-soft: #eef3fe;
  --accent-ink: #0a55c8;
  --border: #e6e8ec;
  --input-border: #d9dce1;
  font-family: Inter, "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; font-size: 16px; line-height: 1.6; }
a { color: inherit; text-underline-offset: 4px; }
button, input, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 500; }
h1, h2 { letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.1; }
h2 { font-size: clamp(26px, 3vw, 32px); line-height: 1.2; }
h3 { font-size: 16px; line-height: 1.4; }
p { text-wrap: pretty; }
.container { width: min(1040px, calc(100% - 40px)); margin-inline: auto; }
.skip-link { position: fixed; top: 8px; left: 20px; z-index: 20; padding: 10px 18px; border: 1px solid var(--accent); border-radius: 999px; background: var(--surface); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.site-header { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid #e2e4e8; }
.header-inner { min-height: 56px; display: flex; align-items: center; gap: 12px; }
.wordmark { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; }
.monogram { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--accent); color: #fff; font-size: 16px; font-weight: 600; }
.wordmark-dot, .status-dot, .tiny-spark, .apply-flower, .line-mark { display: none; }
.badge { padding: 3px 9px; border-radius: 999px; background: #eef0f3; color: var(--muted); font-size: 12px; font-weight: 500; white-space: nowrap; }
.button, .header-apply { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border: 1px solid transparent; border-radius: 999px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 500; line-height: 1.5; text-decoration: none; cursor: pointer; transition: background .15s ease; }
.header-apply { margin-left: auto; min-height: 40px; padding: 8px 18px; }
.button:hover, .header-apply:hover { background: var(--accent-hover); }
.button:active, .header-apply:active { background: var(--accent-active); }
.button:disabled { cursor: wait; opacity: .7; }
.eyebrow { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 500; line-height: 1.5; }
.hero { padding-block: 88px 80px; text-align: center; }
.hero h1 { max-width: 880px; margin: 24px auto 0; }
.hero-accent { color: var(--muted); }
.hero-copy { max-width: 700px; margin: 24px auto 0; color: var(--muted); font-size: 16px; line-height: 1.75; }
.idea-box { max-width: 880px; margin: 36px auto 0; }
.idea-box label { display: block; margin-bottom: 12px; color: var(--muted); font-size: 13px; }
.idea-input-row { display: flex; gap: 12px; }
.idea-input-row input { flex: 1; min-width: 0; height: 48px; border-radius: 999px; }
.idea-input-row .button { flex-shrink: 0; }
.hero-footnote { margin-top: 18px; color: #666; font-size: 12px; }
.content-band { padding-block: 16px; background: var(--band); }
.section { padding-block: 40px; }
.section-heading { margin-bottom: 24px; }
.section-heading h2, .early-access h2, .apply-intro h2 { margin-top: 12px; }
.feature-grid, .roles-grid, .steps { display: grid; gap: 16px; }
.feature-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.feature-card { grid-column: span 2; }
.feature-card:nth-child(n+4) { grid-column: span 3; }
.feature-card, .roles-grid article, .steps li, .early-access, #application-form, details, .response-card { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.feature-card, .roles-grid article, .steps li { padding: 24px; }
.feature-icon { display: block; width: 36px; height: 36px; padding: 8px; margin-bottom: 20px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.feature-card p, .roles-grid p, .steps p { margin-top: 10px; color: var(--muted); font-size: 15px; }
.roles-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.role-label { color: #666; font-size: 12px; }
.roles-grid h3 { margin-top: 12px; font-size: 20px; }
.review-note { margin-top: 20px; color: #666; font-size: 13px; }
.review-note span { margin-right: 6px; }
.steps { grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.steps li { padding: 20px; }
.step-number { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-bottom: 18px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 500; }
.early-access { display: grid; grid-template-columns: 1fr 1.7fr; gap: 40px; margin-block: 24px; padding: 32px; }
.early-access > p { color: var(--muted); font-size: 15px; line-height: 1.75; }
.apply-section { display: grid; grid-template-columns: 1fr 1.35fr; gap: 64px; padding-block: 56px; align-items: start; }
.apply-intro > p:not(.eyebrow) { margin-top: 18px; color: var(--muted); }
#application-form { position: relative; min-width: 0; padding: 28px; }
.field { margin-bottom: 22px; }
.field label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 500; }
.optional-text, .required-text { color: #666; font-size: 12px; font-weight: 400; }
input, textarea { display: block; width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid var(--input-border); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 15px; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: #666; opacity: 1; }
textarea { min-height: 150px; resize: vertical; }
input:hover, textarea:hover { border-color: #9ca3af; }
input:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(10, 102, 240, .25); }
.field-hint, .privacy-note { color: #666; font-size: 12px; line-height: 1.6; }
.field-hint { margin-top: 8px; }
.submit-button { width: 100%; }
.privacy-note { margin-top: 14px; }
.honeypot { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.form-status:empty { display: none; }
.form-status:not(:empty) { margin-top: 18px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; font-size: 13px; }
.is-success { background: var(--accent-soft); color: var(--accent-ink); }
.is-error { background: #fff1f1; color: #a12222; }
.faq-section { display: grid; grid-template-columns: 1fr 1.65fr; gap: 48px; }
.faq-list { display: grid; gap: 12px; align-content: start; min-width: 0; }
summary { position: relative; padding: 20px 48px 20px 20px; border-radius: 16px; font-size: 15px; font-weight: 500; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; position: absolute; top: 25px; right: 22px; width: 8px; height: 8px; border-right: 1.5px solid #666; border-bottom: 1.5px solid #666; transform: rotate(45deg); }
details[open] summary::after { top: 29px; transform: rotate(225deg); }
details p { padding: 0 20px 20px; color: var(--muted); font-size: 15px; }
.site-footer { border-top: 1px solid #e2e4e8; background: var(--bg); }
.footer-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; padding-block: 28px; }
.footer-inner > div { max-width: 590px; text-align: right; }
.site-footer p { color: #666; font-size: 12px; }
.site-footer p + p { margin-top: 6px; }
.response-page { display: grid; place-items: center; min-height: 100svh; padding: 20px; background: var(--band); }
.response-card { width: min(100%, 640px); padding: clamp(24px, 6vw, 48px); }
.response-card h1 { margin-block: 32px 20px; font-size: clamp(28px, 5vw, 40px); }
.response-card p { margin-bottom: 28px; color: var(--muted); }
@media (max-width: 719px) {
  .hero { padding-block: 56px; }
  .hero-copy { font-size: 15px; }
  .idea-input-row { flex-direction: column; }
  .idea-input-row .button { width: 100%; }
  .idea-input-row input, .field input, .field textarea { font-size: 16px; }
  .feature-grid, .roles-grid, .steps, .early-access, .apply-section, .faq-section { grid-template-columns: 1fr; }
  .feature-card, .feature-card:nth-child(n+4) { grid-column: auto; }
  .section { padding-block: 28px; }
  .early-access { gap: 20px; margin-block: 20px; padding: 24px; }
  .apply-section, .faq-section { gap: 24px; }
  #application-form { padding: 24px 20px; }
  .footer-inner { flex-direction: column; gap: 20px; }
  .footer-inner > div { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}
