@import url('/assets/fonts/inter.css');

:root {
  color-scheme: dark;
  --paper: #000;
  --ink: #ebebed;
  --muted: #a2a2ad;
  --faint: #111114;
  --line: #ffffff14;
  --blue: #9da0ff;
  --blue-dark: #b1b3ff;
  --green: #86efac;
  --step-purple: #9da0ff;
  --step-purple-dark: #b1b3ff;
  --panel: radial-gradient(circle at 50% 50%, #ffffff0e 0%, #0000 70%), linear-gradient(180deg, #17171b 0%, #111114 100%);
  --raised: linear-gradient(180deg, #222227 0%, #1a1a1e 100%);
  --panel-edge: inset 0 0 0 1px #ffffff0f, inset 0 1px 0 #ffffff0d;
  --raised-edge: inset 0 0 0 1px #ffffff0f, inset 0 1px 0 #ffffff12, 0 14px 30px -12px #000000b3;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #000;
  color: var(--ink);
}
body { background: #000; color: var(--ink); }
::selection { background: #7c7ff247; color: #fff; }
.subtitle { color: #bcbcc6; }
.site-header, .button-login { color: #bcbcc6; }
.brand { width: 92px; }
.new-how, .new-compare, .new-hosting, .new-pricing, .new-faq, .new-final-cta { border-color: var(--line); }
.new-quotes blockquote, .new-hosting-options article,
.new-pricing .pricing-card, .new-pricing .batch-calculator, .pricing-trial,
.alignment-trajectory, .new-sweep-plot a, .scale-map,
.new-compare-scroll, .new-build-grid, .optimizer-shell,
.chart-card, .execution-modes figure, .audience-grid, .pricing-card,
.batch-calculator, .terminal, blockquote, .video-placeholder {
  background: var(--panel);
  border-color: transparent;
  border-radius: 16px;
  box-shadow: var(--panel-edge);
}
.button, .text-button, .optimizer-window, .annotation-card,
.annotation-choices button, .token-preset, .hosting-workload {
  background: var(--raised);
  border-color: transparent;
  color: var(--ink);
  box-shadow: var(--raised-edge);
  border-radius: 12px;
}
.button:hover, .text-button:hover, .token-preset:hover {
  background: linear-gradient(180deg, #29292f, #202025);
  box-shadow: inset 0 0 0 1px #ffffff29, inset 0 1px 0 #ffffff1a, 0 14px 30px -12px #000b;
}
.button-primary, .button-header-cta, .button-lavender,
.new-pricing .button-enterprise, .optimize-button {
  background: linear-gradient(180deg, #2d2c47, #232235);
  border-color: #9da0ff40;
  color: #c5c7ff;
  box-shadow: inset 0 1px 0 #ffffff14, inset 0 0 0 1px #7c7ff22e, 0 8px 20px -10px #7c7ff24d;
}
.button-primary:hover, .button-header-cta:hover, .button-lavender:hover,
.new-pricing .button-enterprise:hover, .optimize-button:hover {
  background: linear-gradient(180deg, #393855, #2b2a42);
  color: #c5c7ff;
}
.button-login { background: #ffffff05; box-shadow: inset 0 0 0 1px #ffffff1a; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #9da0ff;
  outline-offset: 4px;
}
.new-quotes blockquote { color: #d1d1da; font-size: 20px; line-height: 1.4; }
.new-quotes figcaption strong, .new-step-heading h3,
.new-build-grid .function-card-copy strong { color: #ebebed; }
.new-quotes figcaption span, .new-quotes .quote-results .metric-label,
.metrics-note, .new-sweep-plot figcaption, .scale-map figcaption,
.alignment-trajectory figcaption { color: #a2a2ad; }
.quote-results b, .new-case-request, .new-how-eyebrow,
.hero-pipeline-caption strong { color: #9da0ff; }
.new-quotes .quote-results .metric-arrow, .compare-strength { color: #86efac; }
.compare-drawback { color: #fca5a5; }
.new-step-content > p, .new-hosting-intro, .new-hosting-options p,
.new-compare-heading > p, .new-build-grid .function-card-copy > span,
.hero-pipeline-caption { color: #b0b0bd; }
.new-compare-table .compare-sutro-column { background: #7c7ff212; }
.new-compare-table th, .new-compare-table td { border-color: #ffffff0d; }
.new-compare-table th:last-child, .new-compare-table td:last-child { color: #c5c7ff; }
.new-build-grid > .function-card-trigger:hover { background: #ffffff06; }
.new-build-grid > .function-card-trigger[aria-expanded=true] { background: #7c7ff217; }
.build-example { background: #0d0d12; }
.optimizer-browser-bar { background: #ffffff04; border-color: #ffffff0d; }
.optimizer-prompt, .annotation-labeler, .optimizer-score,
.function-example-input, .function-example-output,
.function-example-output > code { background: #0d0d12; border-color: #ffffff14; }
.annotation-choices button:hover:not(:disabled), .token-preset.is-selected {
  background: #7c7ff217; border-color: #9da0ff66; box-shadow: inset 0 0 0 1px #7c7ff22e;
}
.annotation-choices button:first-child.is-selected { background: #14231e; color: #86efac; }
.annotation-choices button:last-child.is-selected { background: #2a1b1d; color: #fca5a5; }
.optimizer-deployment { background: #14231e; }
.optimizer-content { scrollbar-color: #42424c #111114; }
.hosting-network { background: #0d0d12; border-color: #9da0ff40; }
.hosting-network strong, .new-pricing .pricing-price strong,
.new-pricing .calculator-price > output { color: #b1b3ff; }
.hosting-workload { border-radius: 7px; }
.pricing-trial { background: radial-gradient(ellipse at top left, #7c7ff217, #0000 75%), var(--panel); }
.step-dot::before { border-color: #17171b; background: #42424c; }
.step-dot.is-reached::before { background: #9da0ff; }
.step-dot.is-selected::before { background: #b1b3ff; box-shadow: 0 0 0 1px #9da0ff, 0 0 14px #7c7ff266; }
.stepper-dots::before { background: #ffffff14; }
.trajectory-grid { stroke: #ffffff0d; }
.trajectory-axis { stroke: #ffffff24; }
.trajectory-sutro { stroke: #9da0ff; }
.trajectory-point { fill: #9da0ff; stroke: #17171b; }
.trajectory-rl { stroke: #8b8b99; }
.trajectory-axis-label { fill: #a2a2ad; }
.trajectory-callout { fill: #c5c7ff; }
.trajectory-legend .trajectory-key-sutro { border-color: #9da0ff; }
.hero-row-label, .hero-score-code, .hero-source-label,
.hero-batch-fields, .hero-processed-label, .hero-spend-label,
.scale-map-label, .build-svg-label, .build-svg-json { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.hero-with-label, .hero-sutro-wordmark, .hero-sutro-symbol { fill: #b1b3ff; }
.hero-without-label, .hero-spend-label { fill: #a2a2ad; }
.hero-flow-divider { stroke: #ffffff14; }
.hero-row-track, .hero-row-arrow { stroke: #ffffff29; }
.hero-input-stack rect, .hero-model-box { fill: #1c1c21; stroke: #ffffff29; }
.hero-input-stack path { stroke: #ffffff40; }
.hero-source-label, .hero-function-version { fill: #b0b0bd; }
.hero-sutro-box { fill: #232235; stroke: #9da0ff66; }
.hero-score-card, .hero-batch-result { fill: #14201b; stroke: #86efac24; }
.hero-batch-fields, .hero-truth-yes, .hero-low-cost { fill: #86efac; }
.hero-score-wrong { fill: #281a1d; stroke: #fca5a533; }
.hero-wrong-code, .hero-truth-no, .hero-high-cost, .is-budget-busted .hero-high-cost { fill: #fca5a5; }
.hero-cancelled-stamp rect { fill: #171013; stroke: #dd8e83; }
.hero-cancelled-stamp text { fill: #fca5a5; }
.hero-cancelled-stamp .hero-stamp-inner { fill: none; }
.hero-batch-packet, .scale-map-packet { fill: #9da0ff; }
.scale-map-function { fill: #232235; stroke: #9da0ff66; }
.scale-map-symbol { fill: #b1b3ff; }
.scale-map-input { fill: #1c1c21; stroke: #ffffff24; }
.scale-map-output { fill: #14231e; stroke: #86efac33; }
.scale-map-output-lines { stroke: #86efac80; }
.scale-map-path { stroke: #ffffff24; }
.scale-map-lines { stroke: #ffffff40; }
.site-nav.open, nav.open { background: #111114; }
@media(max-width:650px) {
  .new-quotes blockquote { font-size: 18px; }
  .site-header nav { border-color: #ffffff14; }
}
.hero-record-stream { stroke: #9494a8; }
.hero-score-code { fill: #bcbcc6; }
.hero-score-code.hero-wrong-code { fill: #fca5a5; }
.build-svg-function { fill: #232235; stroke: #9da0ff66; }
.build-svg-symbol { fill: #b1b3ff; }
.build-svg-label, .build-svg-file { fill: #a2a2ad; }
.build-svg-input-text { fill: #d1d1da; }
.build-svg-json { fill: #bcbcc6; }
.customer-build-detail h3, .trajectory-heading h3 { color: #ebebed; }
.customer-build-detail > div > p:not(.build-customer), .trajectory-legend { color: #b0b0bd; }
svg [fill="#fff"], svg [fill="#ffffff"], svg [fill="#FFFFFF"],
svg [fill="#f5f7fb"], svg [fill="#e8ecf2"] { fill: #1c1c21; }
svg [fill="#b9c4d5"] { fill: #6f6f81; }

.cloud-providers { display:flex; align-items:center; justify-content:center; gap:14px; min-height:60px; width:100%; }
.cloud-provider { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-width:0; color:#bcbcc6; font-size:10px; line-height:1.3; }
.cloud-provider img { display:block; flex-shrink:0; object-fit:contain; }
.cloud-provider .cloud-logo-aws { width:64px; height:45px; }

.button-header-cta, .button-lavender { border-color: rgb(18 19 24 / .2); background: linear-gradient(to bottom, #cbd2fc, #aab3f3); color: #121318; box-shadow: inset 0 1px 0 rgb(255 255 255 / .62), inset 0 -1px 0 rgb(75 83 145 / .17), 0 1px 2px rgb(31 35 62 / .1); }
.button-header-cta:hover, .button-lavender:hover { color: #121318; background: linear-gradient(to bottom, #d2d8ff, #aab3f3); box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), inset 0 -1px 0 rgb(75 83 145 / .2), 0 2px 5px rgb(31 35 62 / .13); }
.new-quotes { gap: 22px 24px; }
.new-quotes figure {
  padding: 24px;
  border: 0;
  border-radius: 16px;
  background: var(--panel);
  box-shadow: var(--panel-edge);
  row-gap: 24px;
}
.new-quotes blockquote {
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.new-quotes figcaption {
  min-height: 0;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}
.new-quotes figcaption strong { font-size: 12px; line-height: 1.5; }
.new-quotes figcaption > span { margin-top: 3px; }
.new-quotes figcaption .quote-results { margin-top: 18px; display: grid; gap: 6px; }
.new-quotes .quote-results > span { grid-template-columns: 58px minmax(0,1fr); gap: 8px; }
.new-quotes .quote-results b { font-size: 14px; line-height: 1.4; }
.new-quotes .quote-results .metric-label { font-size: 11px; line-height: 1.5; }
.metrics-note { margin-top: 12px; font-size: 10px; }
@media(max-width:650px) {
  .new-quotes { grid-auto-rows: auto; gap: 16px; }
  .new-quotes figure { gap: 24px; padding: 22px; }
  .new-quotes blockquote { margin-bottom: 0; }
}
.new-header .nav-actions .button {
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 13px;
  letter-spacing: .01em;
}
.new-header .button-login {
  border: 1px solid #ffffff29;
  background: transparent;
  box-shadow: none;
  color: #bcbcc6;
  font-weight: 500;
}
.new-header .button-login:hover {
  border-color: #ffffff47;
  background: #ffffff08;
  box-shadow: 0 3px 8px #00000017;
  color: #ebebed;
}

.new-quotes blockquote { text-wrap: pretty; }
.new-quotes figcaption strong { font-size:13px; font-weight:500; color:#ebebed; }
.new-quotes figcaption > span { color:#a2a2ad; font-size:12px; }
.new-quotes figcaption .quote-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:24px; }
.new-quotes .quote-metric { display:flex; flex-direction:column; gap:5px; }
.new-quotes .quote-metric b { font-family:Inter,system-ui,sans-serif; font-size:26px; line-height:1.15; font-weight:500; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.new-quotes .quote-metric .metric-positive { color:#86efac; }
.new-quotes .quote-metric .metric-negative { color:#fca5a5; }
.new-quotes .quote-metric > span { font-size:11px; line-height:1.4; color:#a2a2ad; }
.new-quotes figcaption .quote-annotations { margin-top:18px; font-size:11px; color:#a2a2ad; }
.new-quotes .quote-annotations b { color:#d1d1da; font-size:12px; font-weight:500; font-variant-numeric:tabular-nums; margin-right:3px; }

.new-how > h2 { margin-bottom: 10px; }
.new-how-subtitle { margin: 0 0 48px; font-size: 16px; line-height: 1.6; letter-spacing: -.01em; color: #b0b0bd; }

.how-step-tabs { display:flex; gap:8px; margin:0 0 32px; border-bottom:1px solid var(--line); padding-bottom:16px; }
.how-step-tabs button { padding:9px 16px; border:1px solid transparent; border-radius:7px; background:transparent; color:#a2a2ad; font:500 13px/1.5 Inter,system-ui,sans-serif; cursor:pointer; }
.how-step-tabs button:hover { color:#ebebed; background:#ffffff06; }
.how-step-tabs button[aria-selected="true"] { color:#c5c7ff; border-color:#9da0ff33; background:#7c7ff217; box-shadow:inset 0 1px 0 #ffffff08; }
.how-step-panel { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; align-items:center; }
.how-step-panel[hidden] { display:none; }
.how-step-copy { min-width:0; padding-right:24px; }
.how-step-copy h3 { margin:0 0 16px; color:#ebebed; font:500 20px/1.3 Inter,system-ui,sans-serif; letter-spacing:-.025em; }
.how-step-copy p { margin:0; color:#b0b0bd; font-size:14px; line-height:1.7; text-wrap:pretty; }
.how-step-visual { min-width:0; }
.new-how .how-step-visual > * { margin:0; width:100%; max-width:none; }
.how-step-visual .optimizer-content { height:420px; }
.sweep-vignette-panel { padding:20px; border-radius:16px; background:var(--panel); box-shadow:var(--panel-edge); }
.sweep-vignette { display:block; width:100%; height:auto; overflow:visible; }
.new-sweep-plot figcaption { font-size:11px; margin:12px 6px 0; }
.how-step-visual .scale-map { padding:20px; }
@media(max-width:650px) {
  .how-step-tabs { gap:4px; margin-bottom:24px; }
  .how-step-tabs button { flex:1; padding:8px 6px; font-size:11px; }
  .how-step-panel { grid-template-columns:1fr; gap:24px; }
  .how-step-copy { padding-right:0; }
  .how-step-copy h3 { font-size:19px; }
  .how-step-copy p { font-size:14px; }
  .sweep-vignette-panel { padding:12px; }
}

.how-step-panels { display:grid; gap:112px; }
.how-step-panel + .how-step-panel { border-top:1px solid var(--line); padding-top:112px; }
.how-step-panel { scroll-margin-top:40px; }
@media(max-width:650px) { .how-step-panels { gap:64px; } .how-step-panel + .how-step-panel { padding-top:64px; } }

.sweep-redesign { padding:24px; overflow:hidden; }
.sweep-chart { display:block; width:100%; height:auto; overflow:visible; }
.sweep-chart text { font-family:Inter,system-ui,sans-serif; }
.sweep-grid { stroke:#ffffff0d; fill:none; }
.sweep-axis { font-size:11px; fill:#9898a6; }
.sweep-axis-title { font-size:11px; fill:#b0b0bd; }
.sweep-area { fill:#9da0ff08; }
.sweep-frontier { fill:none; stroke:#9da0ff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.sweep-dot { fill:#777785; stroke:#17171b; stroke-width:2; }
.sweep-dot-front { fill:#b1b3ff; stroke:#17171b; stroke-width:2; }
.sweep-selected-halo { fill:#9da0ff12; stroke:#9da0ff26; }
.sweep-dot-selected { fill:#c5c7ff; stroke:#17171b; stroke-width:2; }
.sweep-label-leader { fill:none; stroke:#9da0ff66; stroke-width:1; }
.sweep-model-label { fill:#c5c7ff; font-size:12px; font-weight:500; }
.sweep-chart-legend { display:flex; align-items:center; justify-content:center; gap:24px; color:#9898a6; font-size:11px; margin:6px 0 24px; }
.sweep-chart-legend > span { display:flex; align-items:center; gap:7px; }
.sweep-legend-line { width:16px; height:2px; background:#9da0ff; }
.sweep-legend-dot { width:5px; height:5px; border-radius:50%; background:#777785; }
.sweep-model-summary { padding:18px 20px; background:var(--raised); border-radius:12px; box-shadow:var(--raised-edge); }
.sweep-summary-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; color:#d1d1da; font-size:12px; font-weight:500; }
.sweep-best-badge { color:#b1b3ff; font-size:10px; font-weight:400; }
.sweep-summary-metrics { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:16px; }
.sweep-summary-metrics > div { display:flex; flex-direction:column; gap:5px; }
.sweep-summary-metrics strong { color:#ebebed; font-size:28px; line-height:1.15; font-weight:500; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.sweep-summary-metrics strong > span { font-size:18px; color:#a2a2ad; margin-left:2px; }
.sweep-summary-metrics > div > span { color:#a2a2ad; font-size:11px; }
.new-sweep-plot.sweep-redesign figcaption { margin:16px 2px 0; color:#9898a6; font-size:10px; line-height:1.6; }
@media(max-width:650px) { .sweep-redesign { padding:16px; } .sweep-model-summary { padding:16px; } .sweep-chart-legend { font-size:10px; gap:16px; } }

#how-panel-align .optimizer-shell {
  border: 1px solid var(--line);
  padding: 20px;
  border-radius: 16px;
  background: var(--panel);
  box-shadow: var(--panel-edge);
}
#how-panel-align .optimizer-window {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
#how-panel-align .optimizer-browser-bar { display: none; }

.new-proof { padding-bottom: 74px; }
.new-how, .new-compare, .new-build, .new-hosting, .new-pricing, .new-faq {
  padding-top: 80px;
  padding-bottom: 80px;
}
.new-final-cta { padding-top: 80px; }
@media (max-width: 650px) {
  .new-proof { padding-bottom: 42px; }
  .new-how, .new-compare, .new-build, .new-hosting, .new-pricing, .new-faq {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .new-final-cta { padding-top: 64px; }
}

.hero-product-vignette {
  --vignette-text: #ebebed;
  --vignette-muted: #a2a2ad;
  --vignette-accent: #b1b3ff;
  --vignette-positive: #86efac;
  --vignette-negative: #fca5a5;
  --vignette-inset: #0d0d124d;
  width: min(960px, 100%);
  margin: 28px auto 28px;
  padding: 0;
  text-align: left;
}
.hero-product-row { position:relative; padding: 20px 0; }
.hero-product-row + .hero-product-row { border-top: 1px solid var(--line); }
.hero-product-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; }
.hero-product-heading > strong { font-size:13px; font-weight:500; color:var(--vignette-text); }
.hero-product-aligned .hero-product-heading > strong { color:var(--vignette-accent); }
.hero-product-status { display:flex; align-items:center; gap:6px; color:var(--vignette-muted); font-size:10px; }
.hero-product-status i { width:5px; height:5px; border-radius:50%; background:var(--vignette-positive); }
.hero-baseline-status i { background:var(--vignette-muted); }
.hero-product-pipeline { display:grid; grid-template-columns:1fr 24px 1.2fr 24px 1.5fr 1.25fr; gap:10px; align-items:center; }
.hero-product-label { display:block; font:500 8px/1.4 Inter,system-ui,sans-serif; letter-spacing:.06em; color:var(--vignette-muted); }
.hero-product-source, .hero-product-model { min-width:0; padding:12px; border-radius:9px; background:var(--raised); box-shadow:var(--panel-edge); }
.hero-product-source > strong, .hero-product-model > strong { display:block; margin-top:5px; font-size:12px; font-weight:500; color:var(--vignette-text); }
.hero-product-model > span:last-child { display:block; margin-top:5px; color:var(--vignette-muted); font-size:9px; white-space:nowrap; }
.hero-product-sutro { background:linear-gradient(145deg,#7c7ff220,#7c7ff20a),var(--raised); box-shadow:inset 0 0 0 1px #9da0ff40; }
.hero-product-sutro > strong { color:var(--vignette-accent); }
.hero-data-lines { display:grid; gap:4px; margin-top:9px; }
.hero-data-lines i { display:block; width:80%; height:2px; border-radius:2px; background:var(--vignette-muted); opacity:.25; }
.hero-data-lines i:nth-child(2) { width:60%; }
.hero-product-connector { text-align:center; color:var(--vignette-muted); opacity:.5; }
.hero-product-results { min-width:0; }
.hero-product-results > .hero-product-label { margin-bottom:5px; }
.hero-output-record { display:flex; align-items:center; justify-content:space-between; gap:8px; border-radius:4px; margin-top:4px; padding:3px 7px; background:var(--vignette-inset); box-shadow:inset 0 0 0 1px var(--line); color:var(--vignette-positive); }
.hero-output-record code, .hero-product-vignette .hero-batch-fields { color:var(--vignette-text); font:9px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:nowrap; }
.hero-output-record > span { font-size:10px; }
.hero-output-error { color:var(--vignette-negative); }
.hero-product-spend { align-self:stretch; display:flex; flex-direction:column; justify-content:center; border-left:1px solid var(--line); padding-left:18px; margin-left:4px; }
.hero-product-spend > strong { display:block; margin:5px 0; color:var(--vignette-positive); font:500 24px/1.2 Inter,system-ui,sans-serif; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.hero-product-baseline .hero-product-spend > strong { color:var(--vignette-negative); }
.hero-product-spend > span:last-child { font-size:8px; color:var(--vignette-muted); white-space:nowrap; }
.hero-product-spend b { font-weight:400; font-variant-numeric:tabular-nums; }
.hero-status-cancelled { display:none; }
.is-budget-busted .hero-status-active { display:none; }
.is-budget-busted .hero-status-cancelled { display:inline; color:var(--vignette-negative); }
.is-budget-busted .hero-baseline-status i { background:var(--vignette-negative); }
@media(max-width:650px) {
  .hero-product-vignette { padding:0; overflow:visible; }
  .hero-product-pipeline { grid-template-columns:1fr 16px 1fr; gap:8px; }
  .hero-product-results { grid-column:1 / 3; margin-top:4px; }
  .hero-product-pipeline > .hero-product-connector:nth-of-type(2) { display:none; }
  .hero-product-spend { grid-column:3; grid-row:2; padding-left:12px; }
  .hero-product-heading { align-items:flex-start; }
  .hero-product-status { font-size:8px; }
  .hero-product-spend > strong { font-size:22px; }
  .hero-product-spend > span:last-child { white-space:normal; }
}

.hero-raw-result { position:relative; display:flex; justify-content:space-between; gap:8px; padding:7px 10px; border-radius:7px; background:var(--raised); box-shadow:var(--panel-edge); }
.hero-raw-result code { color:var(--vignette-muted); font:9px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; }
.hero-raw-result > span { color:var(--vignette-negative); font-size:14px; }
.hero-raw-result:first-of-type { transform:rotate(-3deg); margin-right:20px; }
.hero-raw-result:last-child { transform:rotate(2deg); margin-left:20px; margin-top:-7px; }
.hero-project-stamp { position:absolute; left:22%; right:24%; top:52%; transform:translateY(-50%) rotate(-5deg); display:none; padding:4px; border:2px solid var(--vignette-negative); border-radius:4px; background:var(--paper); color:var(--vignette-negative); box-shadow:0 5px 20px #00000015; pointer-events:none; }
.hero-project-stamp > span { display:block; border:1px solid currentColor; padding:7px 8px; text-align:center; font:700 clamp(13px,2vw,23px)/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.06em; white-space:nowrap; }
.is-budget-busted .hero-project-stamp { display:block; }
@media(max-width:650px) {
  .hero-project-stamp { left:3%; right:3%; top:42%; }
}

.new-how, .new-compare, .new-build, .new-hosting, .new-pricing, .new-faq,
.new-final-cta, .how-step-panel + .how-step-panel {
  border-top: 0;
}

.sweep-redesign .sweep-frontier { stroke-width:2.5; }
.sweep-redesign .sweep-frontier-underlay { stroke-width:9; opacity:.08; }
.sweep-redesign .sweep-area { fill:#9da0ff0b; }
.sweep-cost-guide { fill:none; stroke:var(--line); stroke-dasharray:2 5; }
.sweep-logo-backing { fill:#1a1a1e; stroke:#ffffff1a; }
.sweep-logo-point.is-frontier .sweep-logo-backing { stroke:#9da0ff; stroke-width:1.5; }
.sweep-provider-logo.provider-openai { filter:invert(1); }
.sweep-point-name { fill:#b1b3ff; font-size:10px; }
.sweep-selection-card rect { fill:var(--faint); stroke:#9da0ff40; }
.sweep-selection-name { fill:var(--ink); font-size:12px; font-weight:500; }
.sweep-selection-detail { fill:var(--muted); font-size:10px; }
.sweep-redesign .sweep-chart-legend { justify-content:space-between; gap:12px; margin:12px 0 0; font-size:10px; }
.sweep-frontier-key { color:#b1b3ff; }
.sweep-redesign .sweep-legend-line { width:22px; }
.sweep-redesign figcaption { padding-top:12px; }

.new-how { padding-top: 120px; }
@media (max-width: 650px) {
  .new-how { padding-top: 80px; }
}

.new-compare-table tbody td:not(:last-child) { color: var(--muted); }
.new-compare-table thead th:not(:last-child) { color: var(--ink); }


.new-hosting-options > article:first-child { display:flex; flex-direction:column; }
.managed-hosting-vignette { margin:auto 0 0; padding-top:24px; }
.managed-runtime { padding:16px; border-radius:12px; background:var(--raised); box-shadow:var(--raised-edge); }
.managed-runtime-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:13px; border-bottom:1px solid var(--line); }
.managed-runtime-brand { display:flex; align-items:center; gap:8px; font:500 12px/1.4 Inter,system-ui,sans-serif; color:var(--ink); }
.managed-runtime-brand img { display:block; border-radius:3px; }
.managed-runtime-badge { padding:3px 7px; border-radius:5px; background:#9da0ff0c; color:var(--muted); font-size:9px; box-shadow:inset 0 0 0 1px var(--line); }
.managed-runtime-flow { display:grid; grid-template-columns:minmax(0,1fr) 24px 64px 24px minmax(0,1fr); align-items:center; padding-top:18px; }
.managed-runtime-column { min-width:0; display:grid; gap:6px; }
.managed-runtime-label { font:500 7px/1.4 Inter,system-ui,sans-serif; letter-spacing:.05em; color:var(--muted); margin-bottom:3px; white-space:nowrap; }
.managed-runtime-record { height:22px; padding:6px 8px; border-radius:4px; background:#11111480; box-shadow:inset 0 0 0 1px #ffffff0c; display:flex; align-items:center; gap:5px; }
.managed-runtime-record i { display:block; width:55%; height:2px; background:#ffffff30; border-radius:2px; }
.managed-runtime-record i + i { width:22%; opacity:.5; }
.managed-runtime-column > .managed-runtime-record:nth-child(3) i:first-child { width:42%; }
.managed-runtime-column > .managed-runtime-record:nth-child(4) i:first-child { width:63%; }
.managed-runtime-outputs .managed-runtime-record { background:#14231e80; box-shadow:inset 0 0 0 1px #86efac14; justify-content:space-between; }
.managed-runtime-outputs .managed-runtime-record i { background:#86efac60; }
.managed-runtime-outputs .managed-runtime-record > span { color:#86efac; font-size:10px; line-height:1; }
.managed-runtime-function { position:relative; display:grid; place-items:center; margin-top:18px; }
.managed-runtime-function > div { width:48px; height:48px; display:grid; place-items:center; border-radius:10px; background:linear-gradient(145deg,#34314c,#242334); color:#b1b3ff; font:italic 30px/1 Georgia,serif; box-shadow:inset 0 0 0 1px #9da0ff55,inset 0 1px 0 #ffffff18,0 8px 16px -8px #0008; }
.managed-runtime-function > span { position:absolute; top:56px; white-space:nowrap; font-size:8px; color:var(--muted); }
.managed-runtime-connector { display:grid; gap:27px; padding-top:18px; }
.managed-runtime-connector span { height:1px; background:var(--line); }
@media(max-width:650px) {
  .managed-runtime-flow { grid-template-columns:minmax(0,1fr) 16px 56px 16px minmax(0,1fr); }
  .managed-runtime { padding:14px; }
}

.new-pricing > h2 { margin-bottom:12px; }
.new-pricing-intro { margin:0 0 24px; color:var(--muted); font-size:14px; line-height:1.6; }
.new-pricing-stack { grid-template-rows:1fr; }

.new-pricing-stack { grid-template-rows:auto auto; }
.new-pricing .pricing-card > h3 { margin:0; color:var(--ink); font:500 18px/1.3 Inter,system-ui,sans-serif; letter-spacing:-.02em; }
.new-pricing .pricing-card > p { margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
.new-pricing .pricing-card > .text-link { color:var(--blue); font-size:12px; }

.new-pricing-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:24px; }
.new-pricing-heading h2 { margin:0 0 12px; font-size:30px; line-height:1.2; }
.new-pricing-heading .new-pricing-intro { margin:0; }
.new-pricing-heading > .button { flex-shrink:0; }
@media(max-width:650px) {
  .new-pricing-heading { flex-direction:column; align-items:flex-start; gap:16px; }
  .new-pricing-heading h2 { font-size:26px; }
}

.new-pricing .calculator-heading h3 { color:var(--ink); font:500 18px/1.3 Inter,system-ui,sans-serif; letter-spacing:-.02em; }