:root {
  --runway: #0b0f12;
  --runway-soft: #0f1519;
  --deck: #111a1f;
  --deck-light: #17242a;
  --blue: #5b8cff;
  --amber: #ffcb78;
  --mint: #45d7c4;
  --mint-soft: #83e3d4;
  --porcelain: #f4f0e8;
  --fog: #c7d3d8;
  --fog-soft: #93a2a9;
  --line: rgba(207, 225, 230, 0.14);
  --line-strong: rgba(207, 225, 230, 0.24);
  --display: "SF Pro Rounded", "Arial Rounded MT Bold", "Avenir Next", system-ui, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Monaco, Consolas, monospace;
  --max: 1280px;
}

* { box-sizing: border-box; }
[hidden] { display: none!important; }
html { scroll-behavior: smooth; overflow-x: clip; scrollbar-color: var(--blue) #10171b; scrollbar-width: thin; }
html::-webkit-scrollbar { width: 11px; }
html::-webkit-scrollbar-track { background: #10171b; }
html::-webkit-scrollbar-thumb { border: 3px solid #10171b; border-radius: 999px; background: linear-gradient(180deg, var(--blue), var(--mint)); }
body { margin: 0; overflow-x: clip; background: var(--runway); color: #f5f8f8; font-family: var(--body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
button, input, summary { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
::selection { background: var(--blue); color: white; }
:focus-visible { outline: 3px solid var(--mint); outline-offset: 4px; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 50; height: 72px; border-bottom: 1px solid rgba(207,225,230,.1); background: rgba(11,15,18,.78); backdrop-filter: blur(22px) saturate(145%); }
.nav-shell { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: min(var(--max), calc(100% - 48px)); height: 100%; margin: 0 auto; }
.brand { display: inline-flex; align-items: center; gap: 11px; width: max-content; font-family: var(--display); font-size: 16px; font-weight: 750; letter-spacing: -.025em; }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px; padding: 4px 2px; border: 1px solid rgba(91,140,255,.4); border-radius: 10px; background: #13254c; box-shadow: 0 8px 25px rgba(91,140,255,.28); }
.brand-mark img { width: 27px; height: auto; }
.desktop-nav { display: flex; gap: 32px; color: var(--fog-soft); font-size: 13px; font-weight: 650; }
.desktop-nav a, .site-footer a { transition: color 180ms ease; }
.desktop-nav a:hover, .site-footer a:hover { color: white; }
.nav-cta { justify-self: end; display: inline-flex; gap: 14px; padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 12px; font-weight: 760; transition: border-color 180ms ease, background 180ms ease, transform 180ms ease; }
.nav-cta:hover { transform: translateY(-1px); border-color: rgba(69,215,196,.6); background: rgba(69,215,196,.08); }
.menu-button, .mobile-nav { display: none; }

.hero { position: relative; padding-top: 72px; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 50% 27%, rgba(91,140,255,.19), transparent 29%), linear-gradient(180deg,#0b0f12 0%,#0c1216 76%,#10181d 100%); }
.hero::before { content: ""; position: absolute; inset: 72px 0 0; z-index: -2; opacity: .24; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom,black,transparent 78%); }
.hero::after { content: ""; position: absolute; left: 50%; bottom: -350px; z-index: -2; width: 1200px; height: 620px; transform: translateX(-50%); border-radius: 50%; background: rgba(69,215,196,.1); filter: blur(110px); }
.hero-atmosphere { position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg,transparent 16%,rgba(91,140,255,.1) 16.1%,transparent 16.5%),linear-gradient(300deg,transparent 13%,rgba(69,215,196,.07) 13.1%,transparent 13.5%); }
.hero-copy { position: relative; z-index: 4; width: min(1080px,calc(100% - 40px)); margin: 74px auto 0; text-align: center; }
.eyebrow, .section-kicker { margin: 0; color: var(--mint); font-family: var(--mono); font-size: 11px; font-weight: 760; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px; border: 1px solid rgba(69,215,196,.2); border-radius: 999px; background: rgba(69,215,196,.06); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px rgba(69,215,196,.1),0 0 18px rgba(69,215,196,.8); }
.hero h1 { margin: 24px auto 17px; font-family: var(--display); font-size: clamp(50px,5.8vw,82px); line-height: .96; letter-spacing: -.06em; text-wrap: balance; }
.hero h1 span { display: block; color: var(--fog); }
.hero-lede { max-width: 700px; margin: 0 auto; color: var(--fog-soft); font-size: 17px; line-height: 1.62; text-wrap: balance; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 26px; margin-top: 27px; }
.primary-button { display: inline-flex; align-items: center; gap: 22px; padding: 14px 18px 14px 22px; border-radius: 12px; background: var(--porcelain); color: #101417; box-shadow: 0 14px 42px rgba(0,0,0,.32); font-size: 13px; font-weight: 800; transition: transform 180ms ease,box-shadow 180ms ease; }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 18px 50px rgba(0,0,0,.42); }
.text-link { color: var(--fog); font-size: 13px; font-weight: 700; }
.text-link span { display: inline-block; margin-left: 7px; transition: transform 180ms ease; }
.text-link:hover span { transform: translateX(4px); }
.signal-pill { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; width: min(650px,100%); margin: 27px auto 0; padding: 13px 17px; border: 1px solid var(--line-strong); border-radius: 13px; background: rgba(8,12,15,.72); color: var(--fog-soft); font-family: var(--mono); font-size: 11px; }
.signal-pill strong { color: white; font-family: var(--display); font-size: 14px; }
.signal-provider { justify-self: start; }.signal-reset { justify-self: end; }.codex-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 14px rgba(91,140,255,.8); }
.hero-product { width: min(1280px,calc(100% - 48px)); margin: 72px auto -1px; overflow: hidden; border: 1px solid rgba(207,225,230,.22); border-bottom: 0; border-radius: 32px 32px 0 0; background: #06090b; box-shadow: 0 -10px 90px rgba(65,109,255,.12); }
.hero-product img { width: 100%; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.app-preview { font-family: var(--body); }
.app-preview button,.app-preview input,.app-preview select { color: inherit; }
.app-window-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 48px; padding: 0 18px; border-bottom: 1px solid rgba(207,225,230,.1); background: linear-gradient(90deg,#1d2531,#121923 48%,#1a1d28); color: rgba(245,248,248,.48); }
.app-window-bar > strong { font-family: var(--display); font-size: 14px; }.app-window-bar.compact { min-height: 42px; }.window-lights { display: flex; gap: 8px; }.window-lights i { width: 11px; height: 11px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; background: #4a5361; }.example-badge { justify-self: end; padding: 5px 8px; border: 1px solid rgba(69,215,196,.28); border-radius: 999px; color: var(--mint); background: rgba(69,215,196,.08); font-family: var(--mono); font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.example-badge.light { border-color: rgba(27,126,255,.2); color: #187eea; background: rgba(24,126,234,.07); }
.preview-label { color: #9aa8ba; font-family: var(--mono); font-size: 8px; font-weight: 800; letter-spacing: .12em; }.provider-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #c7d3d8; }.provider-dot.codex { background: var(--blue); box-shadow: 0 0 12px rgba(91,140,255,.7); }.provider-dot.claude { background: var(--amber); box-shadow: 0 0 12px rgba(255,203,120,.6); }.provider-dot.mint { background: var(--mint); }
.preview-segment { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid rgba(207,225,230,.13); border-radius: 999px; background: rgba(255,255,255,.04); }.preview-segment button { min-width: 0; padding: 8px 10px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: #8d9bab; font-size: 11px; font-weight: 700; cursor: pointer; }.preview-segment button.is-selected { border-color: rgba(91,140,255,.75); background: rgba(91,140,255,.09); color: white; box-shadow: 0 0 24px rgba(91,140,255,.1); }.preview-segment button .provider-dot { margin-right: 7px; }
.studio-shell { display: grid; grid-template-columns: 255px 1fr; height: 720px; text-align: left; }.studio-sidebar { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 26px 20px 20px; border-right: 1px solid rgba(207,225,230,.1); background: radial-gradient(circle at 10% 15%,rgba(91,140,255,.08),transparent 37%),#151d27; }.studio-brand { display: grid; grid-template-columns: 30px 1fr; gap: 2px 10px; align-items: center; }.studio-brand img { grid-row: 1/3; width: 30px; }.studio-brand strong { font-family: var(--display); font-size: 20px; }.studio-brand small { color: #9aa8ba; font-family: var(--mono); font-size: 7px; letter-spacing: .14em; }.project-search input { width: 100%; padding: 10px 11px; border: 1px solid rgba(207,225,230,.12); border-radius: 10px; outline: 0; background: rgba(255,255,255,.05); color: white; font-size: 10px; }.project-search input:focus { border-color: rgba(91,140,255,.65); box-shadow: 0 0 0 3px rgba(91,140,255,.1); }.project-list { display: grid; gap: 3px; overflow: auto; scrollbar-width: none; }.project-list button { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; width: 100%; padding: 10px 12px; border: 0; border-left: 3px solid transparent; border-radius: 8px; background: transparent; color: #acb8c7; text-align: left; font-size: 10px; cursor: pointer; }.project-list button:hover { background: rgba(255,255,255,.04); }.project-list button.is-selected { border-left-color: var(--blue); background: rgba(91,140,255,.12); color: white; }.project-list small { color: #7e8a99; font-family: var(--mono); font-size: 7px; }.local-note { margin-top: auto; color: #9aa8ba; font-family: var(--mono); font-size: 8px; }.local-note .provider-dot { margin-right: 7px; }
.studio-main { min-width: 0; overflow: hidden; padding: 36px 26px; background: radial-gradient(circle at 54% 15%,rgba(40,65,105,.12),transparent 42%),#0b1118; }.studio-toolbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }.studio-title { margin: 0; font-family: var(--display); font-size: 29px; letter-spacing: -.04em; }.studio-toolbar p { margin: 4px 0 0; color: #94a2b5; font-family: var(--mono); font-size: 9px; }.studio-actions { display: flex; gap: 18px; align-items: center; }.range-tabs { display: flex; padding: 3px; border-radius: 8px; background: rgba(255,255,255,.07); }.range-tabs button,.refresh-preview { border: 0; border-radius: 7px; background: transparent; color: #dce3eb; font-size: 10px; cursor: pointer; }.range-tabs button { min-width: 37px; padding: 5px 8px; }.range-tabs button.is-selected { background: rgba(255,255,255,.14); color: white; }.refresh-preview { padding: 8px 11px; background: rgba(255,255,255,.07); }.studio-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 18px; }.studio-stats article { min-width: 0; padding: 16px; border: 1px solid rgba(207,225,230,.12); border-radius: 17px; background: linear-gradient(145deg,#19222d,#121923); }.studio-stats span,.usage-chart-card header span,.model-costs header span,.menu-flow header span { display: block; color: #a8b4c4; font-family: var(--mono); font-size: 7px; font-weight: 800; letter-spacing: .12em; }.studio-stats strong { display: block; margin: 10px 0 7px; overflow: hidden; font-family: var(--display); font-size: clamp(16px,2vw,24px); line-height: 1; text-overflow: ellipsis; white-space: nowrap; }.studio-stats small { color: #9aa8ba; font-family: var(--mono); font-size: 7px; white-space: nowrap; }.studio-stats small i { margin-right: 5px; }
.studio-dashboard { display: grid; grid-template-columns: .72fr 1.16fr; gap: 14px; margin-top: 16px; }.quota-stack { display: grid; gap: 12px; }.quota-card,.usage-chart-card,.model-costs { border: 1px solid rgba(207,225,230,.13); border-radius: 17px; background: linear-gradient(145deg,#18212c,#101720); }.quota-card { padding: 16px; }.quota-card header,.quota-meta,.quota-card footer,.usage-chart-card header,.model-costs header,.menu-quota-cards header,.menu-quota-cards footer,.menu-flow header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.quota-card header div,.menu-quota-cards header div { display: grid; }.quota-card header strong { font-family: var(--display); font-size: 14px; }.quota-card header small,.quota-meta small,.quota-card footer small { color: #a1adbc; font-family: var(--mono); font-size: 7px; }.quota-card header > span { padding: 5px 8px; border: 1px solid rgba(69,215,196,.28); border-radius: 999px; color: var(--mint); font-family: var(--mono); font-size: 7px; }.quota-meta { margin-top: 16px; }.quota-meta b { font-size: 10px; }.usage-track { height: 12px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: rgba(207,225,230,.11); }.usage-track i { display: block; width: var(--remaining); height: 100%; border-radius: inherit; background: linear-gradient(90deg,#5575d8,#6190ff); box-shadow: 0 0 16px rgba(91,140,255,.45); transition: width 260ms ease; }.quota-card footer { margin-top: 5px; }.quota-card footer b { color: var(--blue); font-family: var(--mono); font-size: 8px; }.usage-chart-card { position: relative; min-width: 0; padding: 16px; }.usage-chart-card header strong,.model-costs header strong,.menu-flow header strong { display: block; margin-top: 4px; font-family: var(--display); font-size: 14px; }.usage-chart-card header > small,.model-costs header > small { color: #9aa8ba; font-family: var(--mono); font-size: 7px; }.usage-canvas { display: block; width: 100%; height: 224px; margin-top: 8px; cursor: crosshair; }.chart-tooltip { position: absolute; z-index: 2; padding: 6px 8px; border: 1px solid rgba(207,225,230,.18); border-radius: 8px; background: rgba(7,11,15,.93); color: white; font-family: var(--mono); font-size: 8px; pointer-events: none; }.model-costs { margin-top: 14px; padding: 16px; }.model-row { display: grid; grid-template-columns: 140px 1fr 62px; gap: 12px; align-items: center; margin-top: 12px; font-family: var(--mono); font-size: 8px; }.model-row i { height: 8px; border-radius: 99px; background: linear-gradient(90deg,var(--blue) var(--value),rgba(255,255,255,.07) var(--value)); }.model-row small { color: #a8b4c4; text-align: right; }.model-row::after { content: attr(data-usd); position: absolute; opacity: 0; }.model-row:hover small { color: var(--mint); }

.proof-strip { display: grid; grid-template-columns: repeat(4,1fr); border-block: 1px solid var(--line); background: #0f161a; }
.proof-strip div { display: grid; gap: 5px; min-height: 126px; padding: 26px 32px; border-right: 1px solid var(--line); }
.proof-strip div:last-child { border-right: 0; }
.proof-strip span, .utility-label, .capability-card > span, .privacy-ledger span, .availability-status small, .menu-layout-media figcaption span { color: var(--mint); font-family: var(--mono); font-size: 10px; font-weight: 760; letter-spacing: .12em; }
.proof-strip strong { font-family: var(--display); font-size: 17px; }.proof-strip small { color: var(--fog-soft); font-size: 12px; }

.tracking-section, .capabilities-section, .faq-section { padding: 128px max(24px,calc((100% - var(--max))/2)); }
.section-heading, .capabilities-intro { max-width: 790px; margin-bottom: 64px; }
.section-heading h2, .alerts-copy h2, .menu-copy h2, .capabilities-intro h2, .privacy-copy h2, .availability-copy h2, .faq-heading h2 { margin: 15px 0 20px; font-family: var(--display); font-size: clamp(36px,4.7vw,62px); line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.section-heading > p:last-child, .capabilities-intro > p:last-child, .section-lede, .menu-copy > p, .privacy-copy > p, .availability-copy > p { color: var(--fog-soft); font-size: 16px; line-height: 1.7; }
.tracking-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(360px,.64fr); gap: 70px; align-items: start; }
.tracking-list { display: grid; border-top: 1px solid var(--line); }
.tracking-list > div { padding: 34px 0; border-bottom: 1px solid var(--line); }
.tracking-list h3 { margin: 10px 0 9px; font-family: var(--display); font-size: 27px; }.tracking-list p { max-width: 590px; margin: 0; color: var(--fog-soft); line-height: 1.65; }
.menu-media { position: sticky; top: 105px; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: radial-gradient(circle at top,rgba(91,140,255,.12),transparent 42%),#0d1317; }
.menu-panel-body { padding: 18px; }.menu-runway { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin: 22px 0 16px; }.menu-runway > div { display: grid; gap: 4px; }.menu-runway > div:last-child { justify-items: end; }.menu-runway strong { font-family: var(--display); font-size: 48px; line-height: .9; }.menu-runway span { color: #9aa8ba; font-family: var(--mono); font-size: 9px; font-weight: 800; letter-spacing: .12em; }.menu-runway b { padding: 6px 8px; border: 1px solid rgba(69,215,196,.25); border-radius: 999px; color: var(--mint); font-family: var(--mono); font-size: 8px; }.menu-runway small { color: #9aa8ba; font-size: 10px; }.menu-quota-cards { display: grid; gap: 10px; }.menu-quota-cards article,.menu-flow { padding: 16px; border: 1px solid rgba(207,225,230,.13); border-radius: 17px; background: linear-gradient(145deg,#18212c,#101720); }.menu-quota-cards header strong { font-family: var(--display); font-size: 14px; }.menu-quota-cards header small,.menu-quota-cards footer small { color: #9aa8ba; font-family: var(--mono); font-size: 8px; }.menu-quota-cards footer { margin-top: 6px; }.menu-quota-cards footer b { color: var(--blue); font-family: var(--mono); font-size: 9px; }.menu-status { margin: 15px 4px; color: #a5b1c0; font-family: var(--mono); font-size: 8px; }.menu-status span { margin-right: 8px; }.menu-flow header small { color: var(--mint); font-family: var(--mono); font-size: 8px; }.menu-canvas { width: 100%; height: 130px; margin-top: 8px; }.menu-panel-footer { display: flex; justify-content: space-between; align-items: center; margin: 18px -18px -18px; padding: 14px 18px; border-top: 1px solid rgba(207,225,230,.14); }.menu-panel-footer button { border: 0; border-radius: 999px; cursor: pointer; }.refresh-menu { padding: 9px 12px; background: rgba(255,255,255,.07); color: #a8b4c4; font-size: 9px; }.open-studio { padding: 11px 16px; background: var(--blue); color: #07101f!important; font-size: 10px; font-weight: 800; }

.alerts-section { display: grid; grid-template-columns: minmax(0,.8fr) minmax(460px,1.08fr); gap: 76px; padding: 128px max(24px,calc((100% - var(--max))/2)); background: var(--porcelain); color: #11171a; }
.alerts-copy { position: sticky; top: 110px; align-self: start; }.alerts-copy .section-kicker { color: #315fe1; }.alerts-copy .section-lede { color: #667178; }
.alert-modes { display: grid; margin-top: 42px; border-top: 1px solid rgba(17,23,26,.14); }
.alert-modes > div { display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: center; padding: 22px 0; border-bottom: 1px solid rgba(17,23,26,.14); }
.alert-modes > div > span { color: #315fe1; font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .12em; }.alert-modes strong,.alert-modes small { display: block; }.alert-modes strong { font-family: var(--display); font-size: 18px; }.alert-modes small { margin-top: 5px; color: #748087; line-height: 1.5; }
.alerts-media { display: grid; gap: 32px; }.alerts-media > div { position: relative; overflow: hidden; border-radius: 28px; box-shadow: 0 24px 70px rgba(31,45,52,.13); }.light-media { background: white; }.dark-media { background: #0b1117; }
.reset-preview { padding: 30px; color: #171a1d; }.settings-heading { display: grid; grid-template-columns: auto 1fr auto; gap: 15px; align-items: start; }.settings-icon { display: grid; place-items: center; width: 31px; height: 31px; border: 2px solid #85888b; border-radius: 50%; color: #85888b; font-size: 9px; }.settings-heading strong { display: block; font-family: var(--display); font-size: 20px; }.settings-heading p { margin: 4px 0 0; color: #777c80; font-size: 14px; line-height: 1.35; }.reset-mode-picker { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 20px; padding: 3px; border-radius: 14px; background: #eef0f2; }.reset-mode-picker button { padding: 11px 8px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: #34373b; font-size: 14px; font-weight: 650; cursor: pointer; }.reset-mode-picker button.is-selected { border-color: rgba(24,126,234,.35); background: rgba(24,126,234,.11); color: #087cee; box-shadow: 0 0 0 1px rgba(24,126,234,.08); }.reset-mode-description { min-height: 43px; margin: 18px 0 0; color: #72777a; font-size: 14px; line-height: 1.5; }.reset-demo { display: grid; grid-template-columns: 1fr auto; gap: 3px 16px; margin-top: 16px; padding: 14px; border: 1px solid rgba(24,126,234,.15); border-radius: 14px; background: #f3f8ff; }.reset-demo span { color: #67717a; font-size: 12px; }.reset-demo button { grid-column: 2; grid-row: 1/3; border: 0; border-radius: 9px; background: #087cee; color: white; font-size: 11px; cursor: pointer; }
.limit-preview { padding: 28px; color: #f3f6f8; }.limit-preview > header { display: flex; justify-content: space-between; gap: 18px; align-items: center; }.limit-preview > header > div { display: flex; gap: 18px; align-items: center; }.limit-gauge { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: rgba(91,140,255,.14); color: var(--blue); font-family: var(--mono); font-size: 15px; font-weight: 800; }.limit-preview h3 { margin: 0; font-family: var(--display); font-size: 25px; }.limit-preview header b { color: var(--blue); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; }.experimental { padding: 8px 13px; border: 1px solid rgba(255,176,61,.35); border-radius: 999px; color: #ffb03d; font-family: var(--mono); font-size: 9px; font-weight: 800; letter-spacing: .12em; }.limit-threshold { margin-top: 28px; padding: 24px; border: 1px solid rgba(207,225,230,.14); border-radius: 21px; background: #151e29; }.limit-threshold > span,.limit-actions legend { color: #9aa8ba; font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .13em; }.limit-threshold > strong { display: block; margin: 8px 0 18px; font-family: var(--display); font-size: 37px; }.limit-threshold input { width: 100%; accent-color: var(--blue); cursor: pointer; }.limit-threshold > div { display: flex; justify-content: space-between; margin-top: 8px; color: #9aa8ba; font-family: var(--mono); font-size: 9px; }.limit-actions { display: grid; gap: 9px; margin: 24px 0 0; padding: 0; border: 0; }.limit-actions legend { margin-bottom: 11px; }.limit-actions label { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: center; padding: 13px 15px; border: 1px solid rgba(207,225,230,.13); border-radius: 15px; background: rgba(255,255,255,.025); cursor: pointer; }.limit-actions label.is-selected { border-color: rgba(91,140,255,.65); background: rgba(91,140,255,.09); }.limit-actions input { width: 18px; height: 18px; accent-color: var(--blue); }.limit-actions span { display: grid; }.limit-actions b { font-family: var(--display); font-size: 14px; }.limit-actions small { margin-top: 3px; color: #9aa8ba; font-size: 10px; }.experimental-note { margin: 20px 0 0; color: #9aa8ba; font-size: 11px; line-height: 1.5; }.limit-preview > footer { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; margin: 24px -28px -28px; padding: 18px 28px; border-top: 1px solid rgba(207,225,230,.14); }.limit-preview footer button { padding: 10px 14px; border: 0; border-radius: 999px; background: transparent; font-size: 11px; font-weight: 750; cursor: pointer; }.delete-limit { justify-self: start; color: #ff6f7e!important; }.cancel-limit { color: #9aa8ba!important; }.save-limit { background: var(--blue)!important; color: #07101f!important; }.limit-toast { position: absolute; right: 24px; bottom: 76px; padding: 9px 12px; border-radius: 10px; background: var(--mint); color: #071413; font-size: 11px; font-weight: 800; box-shadow: 0 16px 40px rgba(0,0,0,.3); }

.menu-section { display: grid; grid-template-columns: minmax(0,.8fr) minmax(460px,1fr); gap: 88px; padding: 130px max(24px,calc((100% - var(--max))/2)); background: radial-gradient(circle at 85% 20%,rgba(255,203,120,.08),transparent 27%),#0c1115; }
.menu-copy { align-self: center; }.choice-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: 32px; }.choice-grid span { padding: 13px 14px; border: 1px solid var(--line); border-radius: 11px; color: var(--fog); font-family: var(--mono); font-size: 11px; }
.menu-layout-media { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: #080d12; }.builder-preview-stage { position: relative; display: grid; place-items: center; min-height: 270px; padding: 50px 24px 30px; background: radial-gradient(circle at 50% 35%,rgba(91,140,255,.13),transparent 48%),#0a1016; }.builder-preview-stage .example-badge { position: absolute; top: 18px; right: 18px; }.menu-bar-glyph { display: grid; gap: 12px; width: min(420px,80%); padding: 24px 28px; border: 1px solid rgba(207,225,230,.17); border-radius: 24px; background: rgba(255,255,255,.035); box-shadow: 0 25px 70px rgba(0,0,0,.28); }.glyph-canvas { display: block; width: 100%; height: 70px; }.glyph-bar { height: 24px; overflow: hidden; border: 4px solid #5d6470; border-radius: 999px; background: #303640; }.glyph-bar i { display: block; width: var(--remaining); height: 100%; border-radius: inherit; background: var(--glyph-color,var(--amber)); transition: width 240ms ease,background 240ms ease; }.builder-controls { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }.builder-controls section { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; padding: 22px; }.builder-controls section:first-child { border-right: 1px solid var(--line); }.builder-controls header { grid-column: 1/3; display: flex; justify-content: space-between; align-items: center; }.builder-controls header strong { font-family: var(--display); }.builder-controls header span { color: var(--mint); font-family: var(--mono); font-size: 9px; }.builder-controls label { display: grid; gap: 6px; color: #8f9ca8; font-family: var(--mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }.builder-controls select { width: 100%; padding: 9px 28px 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: #131b22; color: white; font-family: var(--body); font-size: 11px; text-transform: none; }.builder-presets { display: flex; gap: 8px; flex-wrap: wrap; padding: 16px 22px; border-top: 1px solid var(--line); }.builder-presets button { padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: #9aa8ba; font-size: 9px; cursor: pointer; }.builder-presets button.is-selected { border-color: rgba(69,215,196,.45); color: var(--mint); background: rgba(69,215,196,.07); }.builder-caption { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; padding: 18px 22px; border-top: 1px solid var(--line); color: var(--fog-soft); font-size: 12px; }.builder-caption span { color: var(--mint); font-family: var(--mono); font-size: 10px; font-weight: 760; letter-spacing: .12em; }.builder-caption p { margin: 0; }

.capabilities-section { background: #10171b; }.capabilities-intro { margin-bottom: 58px; }.capability-field { display: grid; grid-template-columns: repeat(12,1fr); gap: 16px; }.capability-card { grid-column: span 4; min-height: 230px; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.01)); }.capability-card:nth-child(2),.capability-card:nth-child(5) { transform: translateY(28px); }.capability-card h3 { margin: 32px 0 9px; font-family: var(--display); font-size: 23px; }.capability-card p { margin: 0; color: var(--fog-soft); font-size: 14px; line-height: 1.6; }

.privacy-section { display: grid; grid-template-columns: minmax(0,.9fr) minmax(400px,.8fr); gap: 80px; padding: 130px max(24px,calc((100% - var(--max))/2)); }.privacy-copy blockquote { margin: 42px 0 0; padding-left: 22px; border-left: 2px solid var(--mint); color: var(--fog); font-family: var(--display); font-size: 25px; }.privacy-ledger { display: grid; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: var(--deck); }.privacy-ledger div { display: grid; grid-template-columns: 120px 1fr; gap: 6px 20px; padding: 24px; border-bottom: 1px solid var(--line); }.privacy-ledger div:last-child { border-bottom: 0; }.privacy-ledger strong { font-family: var(--mono); font-size: 14px; }.privacy-ledger small { grid-column: 2; color: var(--fog-soft); }

.availability-section { display: grid; grid-template-columns: 1fr auto; gap: 70px; align-items: end; padding: 128px max(24px,calc((100% - var(--max))/2)); background: var(--porcelain); color: #11171a; }.availability-copy { max-width: 780px; }.availability-copy .section-kicker { color: #315fe1; }.availability-copy > p { color: #667178; }.availability-copy .primary-button { margin-top: 22px; background: #11171a; color: white; }.availability-status { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; align-items: center; min-width: 290px; padding: 22px; border: 1px solid rgba(17,23,26,.16); border-radius: 18px; }.availability-status .status-dot { grid-row: 1/3; }.availability-status strong { font-family: var(--display); }.availability-status small { color: #68737a; }

.faq-section { display: grid; grid-template-columns: .72fr 1fr; gap: 80px; }.faq-heading { position: sticky; top: 110px; align-self: start; }.faq-list { border-top: 1px solid var(--line); }.faq-list details { border-bottom: 1px solid var(--line); }.faq-list summary { position: relative; cursor: pointer; padding: 28px 40px 24px 0; list-style: none; font-family: var(--display); font-size: 20px; font-weight: 700; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary::after { content: "+"; position: absolute; right: 5px; color: var(--mint); }.faq-list details[open] summary::after { content: "−"; }.faq-list p { margin: 12px 50px 28px 0; color: var(--fog-soft); line-height: 1.7; }
.site-footer { display: grid; grid-template-columns: 1fr auto auto; gap: 32px; align-items: center; padding: 36px max(24px,calc((100% - var(--max))/2)); border-top: 1px solid var(--line); color: var(--fog-soft); font-size: 12px; }.site-footer p { margin: 0; }.site-footer .brand { color: white; }

.reveal { opacity: 1; transform: none; }.reveal-ready .reveal { opacity: 0; transform: translateY(22px); transition: opacity 620ms ease,transform 620ms cubic-bezier(.2,.75,.25,1); }.reveal-ready .reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .desktop-nav { gap: 18px; }.tracking-grid,.alerts-section,.menu-section,.privacy-section,.faq-section { grid-template-columns: 1fr; }.alerts-copy,.menu-media,.faq-heading { position: static; }.alerts-section,.menu-section { gap: 54px; }.capability-card { grid-column: span 6; }.capability-card:nth-child(2),.capability-card:nth-child(5) { transform: none; }.availability-section { grid-template-columns: 1fr; align-items: start; }
  .studio-shell { grid-template-columns: 205px 1fr; height: 660px; }.studio-sidebar { padding-inline: 16px; }.studio-main { padding: 28px 18px; }.studio-stats { grid-template-columns: repeat(2,1fr); }.studio-dashboard { grid-template-columns: .8fr 1.2fr; }.model-costs { display: none; }.usage-canvas { height: 196px; }
}

@media (max-width: 720px) {
  .site-header { height: 64px; }.nav-shell { grid-template-columns: 1fr auto; width: calc(100% - 32px); }.desktop-nav,.nav-cta { display: none; }.menu-button { justify-self: end; display: inline-grid; place-content: center; gap: 5px; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line-strong); border-radius: 12px; background: transparent; color: white; }.menu-button span { width: 16px; height: 1px; background: currentColor; transition: transform 180ms ease; }.menu-button[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }.menu-button[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }.mobile-nav { position: absolute; top: 63px; right: 0; left: 0; display: grid; gap: 0; max-height: 0; overflow: hidden; border: 1px solid transparent; border-radius: 0 0 18px 18px; background: rgba(11,15,18,.98); opacity: 0; transform: translateY(-8px); transition: max-height 240ms ease,opacity 180ms ease,transform 180ms ease; }.mobile-nav.is-open { max-height: 420px; border-color: var(--line); opacity: 1; transform: none; }.mobile-nav a { display: flex; justify-content: space-between; padding: 17px 20px; border-bottom: 1px solid var(--line); color: var(--fog); font-size: 14px; font-weight: 650; }.mobile-nav .mobile-cta { color: white; background: rgba(91,140,255,.1); }
  .hero { padding-top: 64px; }.hero-copy { width: calc(100% - 32px); margin-top: 40px; }.hero h1 { margin-top: 22px; font-size: clamp(43px,13.4vw,58px); line-height: 1.01; letter-spacing: -.055em; }.hero-lede { font-size: 15px; line-height: 1.58; }.hero-actions { flex-direction: column; gap: 18px; align-items: stretch; }.primary-button { justify-content: space-between; }.text-link { text-align: center; }.signal-pill { grid-template-columns: 1fr auto; gap: 8px 12px; text-align: left; }.signal-provider { justify-self: start; }.signal-reset { grid-column: 1/3; justify-self: start; }.hero-product { width: calc(100% - 32px); margin-top: 42px; border-radius: 18px 18px 0 0; }
  .app-window-bar { grid-template-columns: 1fr auto; min-height: 42px; padding-inline: 12px; }.app-window-bar > strong { justify-self: end; }.app-window-bar > .example-badge { display: none; }.studio-shell { grid-template-columns: 1fr; height: 520px; }.studio-sidebar { display: none; }.studio-main { padding: 22px 14px; }.studio-toolbar { align-items: center; }.studio-title { font-size: 22px; }.studio-actions { gap: 8px; }.refresh-preview { display: none; }.range-tabs button { min-width: 32px; padding-inline: 6px; }.studio-stats { gap: 8px; margin-top: 14px; }.studio-stats article { padding: 12px; border-radius: 13px; }.studio-stats strong { font-size: 18px; }.studio-stats article:nth-child(n+3) { display: none; }.studio-dashboard { grid-template-columns: .85fr 1.15fr; gap: 8px; margin-top: 10px; }.quota-stack { gap: 8px; }.quota-card { padding: 11px; border-radius: 13px; }.quota-card header > span,.quota-card header small { display: none; }.quota-meta { margin-top: 10px; }.quota-meta small { display: none; }.usage-chart-card { padding: 11px; border-radius: 13px; }.usage-chart-card header > small { display: none; }.usage-canvas { height: 180px; }.model-costs { display: block; padding: 11px; margin-top: 8px; border-radius: 13px; }.model-costs header small,.model-row:nth-of-type(3) { display: none; }.model-row { grid-template-columns: 85px 1fr 44px; gap: 7px; margin-top: 8px; }.model-row small { font-size: 7px; }
  .proof-strip { grid-template-columns: repeat(2,1fr); }.proof-strip div { min-height: 112px; padding: 21px 18px; }.proof-strip div:nth-child(2) { border-right: 0; }.proof-strip div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.tracking-section,.capabilities-section,.faq-section { padding-block: 88px; }.section-heading,.capabilities-intro { margin-bottom: 42px; }.section-heading h2,.alerts-copy h2,.menu-copy h2,.capabilities-intro h2,.privacy-copy h2,.availability-copy h2,.faq-heading h2 { font-size: 39px; }.tracking-grid { gap: 42px; }.tracking-list h3 { font-size: 24px; }.menu-media { border-radius: 20px; }.menu-panel-body { padding: 13px; }.menu-runway strong { font-size: 40px; }.menu-runway small { font-size: 9px; }.menu-panel-footer { margin: 16px -13px -13px; padding: 13px; }
  .alerts-section,.menu-section,.privacy-section,.availability-section { padding-block: 88px; }.alerts-section,.menu-section { gap: 42px; }.alerts-media > div,.menu-layout-media { border-radius: 20px; }.menu-section { grid-template-columns: minmax(0,1fr); }.choice-grid { grid-template-columns: 1fr; }.reset-preview,.limit-preview { padding: 20px; }.settings-heading { grid-template-columns: auto 1fr; }.settings-heading .example-badge { display: none; }.settings-heading strong { font-size: 17px; }.settings-heading p { font-size: 12px; }.reset-mode-picker button { font-size: 12px; }.limit-preview > header { align-items: start; }.limit-preview > header > div { gap: 12px; }.limit-gauge { width: 48px; height: 48px; }.limit-preview h3 { font-size: 20px; }.experimental { font-size: 7px; padding: 7px 9px; }.limit-threshold { padding: 18px; }.limit-threshold > strong { font-size: 30px; }.limit-actions label { padding: 12px; }.limit-preview > footer { margin: 22px -20px -20px; padding: 15px 20px; }.builder-preview-stage { min-height: 220px; }.builder-controls { grid-template-columns: 1fr; }.builder-controls section:first-child { border-right: 0; border-bottom: 1px solid var(--line); }.builder-caption { grid-template-columns: 1fr; gap: 7px; }.capability-field { grid-template-columns: 1fr; }.capability-card { grid-column: auto; min-height: 0; }.privacy-ledger div { grid-template-columns: 1fr; }.privacy-ledger small { grid-column: 1; }.availability-status { min-width: 0; }.faq-section { gap: 32px; }.faq-list summary { font-size: 18px; }.site-footer { grid-template-columns: 1fr; gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }.reveal-ready .reveal { opacity: 1; transform: none; transition: none; }.primary-button,.nav-cta,.text-link span,.menu-button span { transition: none; }
}