.pricing-page { --pricing-radius-card: 16px; --pricing-radius-field: 8px; --pricing-radius-menu: calc(var(--pricing-radius-field) + 4px); background: var(--paper-1); --focus-ring: var(--ink-2); --type-caption: 0.8125rem; --type-ui: 0.875rem; --type-body: 1rem; --type-section: 1.25rem; --type-amount: 2rem; --type-title: 2.25rem; --pricing-green: #b8ef88; --pricing-green-ink: #315322; --pricing-note: color-mix(in srgb, var(--pricing-green) 65%, white); --pricing-response: color-mix(in srgb, var(--pricing-green) 12%, white); font-synthesis: none; letter-spacing: normal; }
.pricing-page ::selection { background: var(--pricing-note); color: var(--ink-1); }
.pricing-page .wrap { max-width: 1480px; }
.pricing-page .nav { background: var(--paper-1); }
.pricing-page .nav-row { height: 56px; }
.pricing-page .nav-link { gap: 6px; display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.pricing-page .wordmark { display: inline-flex; align-items: center; min-height: 44px; }
.pricing-page h1, .pricing-page h2 { text-wrap: balance; }
.icon { display: inline-block; flex-shrink: 0; vertical-align: -0.1em; fill: currentColor; pointer-events: none; }
.icon-external { width: 0.75em; height: 0.75em; margin-inline-start: 0.15em; }
.disclosure-icon { width: 10px; height: 10px; margin-inline-end: 8px; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary .disclosure-icon { transform: rotate(180deg); }
.pricing-page button, .pricing-page summary, .access-note { white-space: nowrap; user-select: none; }
.skip-link { position: absolute; left: 12px; top: -60px; background: var(--paper-0); padding: 12px; }
.skip-link:focus { top: 10px; }
.playground { padding-bottom: max(28px, env(safe-area-inset-bottom)); }

/* Pair the introduction with the integration controls on desktop. */
.intro { display: grid; grid-template-columns: 0.95fr 1.05fr; align-items: start; gap: 64px; padding: 32px 0 28px; }
.intro-copy { max-width: 600px; }
.intro h1 { font-size: var(--type-title); font-weight: 500; letter-spacing: -1.1px; line-height: 1.15; margin-bottom: 18px; }
.lede { font-size: var(--type-body); line-height: 1.6; color: var(--ink-3); text-wrap: pretty; }
.access-note { display: inline-flex; align-items: baseline; gap: 8px; margin: 22px 0 0; padding: 4px 10px; border: 1px solid var(--pricing-green); border-radius: 999px; background: var(--pricing-note); color: var(--pricing-green-ink); font: var(--type-caption)/1.5 var(--font-core); letter-spacing: normal; }
.access-note strong { color: var(--pricing-green-ink); font-weight: 500; }
.setup-panel { display: grid; justify-items: end; min-width: 0; padding-top: 6px; }
.pricing-page .btn { height: 40px; font-size: var(--type-ui); border-radius: var(--r-pill); transition: color 100ms ease-out, background-color 100ms ease-out, border-color 100ms ease-out; }
.pricing-page .btn:active { transform: none; }
#copy-setup { background: transparent; border-color: var(--line-1); color: var(--ink-1); min-width: 148px; }
.setup-agent-icons { display: inline-flex; align-items: center; gap: 8px; margin-right: 4px; padding-right: 12px; border-right: 1px solid var(--line-1); pointer-events: none; }
.setup-agent-icons svg { display: block; flex-shrink: 0; }
.setup-label { display: grid; }
.setup-label > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.setup-copied { opacity: 0; }
.is-copied .setup-copy { opacity: 0; }
.is-copied .setup-copied { opacity: 1; }
.pricing-page .btn:focus-visible { transition: none; }
#setup-prompt { background: var(--paper-0); height: 260px; min-height: 180px; max-height: 480px; margin-top: 8px; font-size: var(--type-caption); line-height: 1.5; }
#setup-prompt:focus-visible { outline-offset: 4px; }
#setup-message:not(.visually-hidden) { margin-top: 8px; color: var(--ink-3); font-size: var(--type-caption); line-height: 1.5; }
#setup-details { width: 100%; font-size: var(--type-ui); margin-top: 0; }
#setup-details summary { display: flex; align-items: center; justify-content: flex-end; gap: 8px; width: 100%; min-height: 44px; list-style: none; color: var(--ink-2); }
#setup-details summary::-webkit-details-marker { display: none; }
.prompt-icon { flex-shrink: 0; fill: currentColor; color: var(--ink-3); pointer-events: none; }
#setup-details[open] .prompt-icon { transform: rotate(180deg); }
#setup-details .prompt-hide, #setup-details[open] .prompt-show { display: none; }
#setup-details[open] .prompt-hide { display: inline; }

/* The request and its result share one console, with no nested card chrome. */
.try-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 24px; margin: 0 0 14px; }
.try-heading h2 { font-size: var(--type-section); letter-spacing: -0.5px; }
.try-heading p { font-size: var(--type-ui); line-height: 1.6; color: var(--ink-3); }
.endpoint-bar { display: flex; align-items: center; gap: 12px; padding: 10px 20px; background: var(--paper-0); border: 1px solid var(--line-3); border-bottom: 0; border-radius: var(--pricing-radius-card) var(--pricing-radius-card) 0 0; }
.method { font: var(--type-caption)/1.5 var(--font-mono); color: var(--pricing-green-ink); }
.endpoint-bar code { min-width: 0; font: var(--type-caption)/1.5 var(--font-mono); overflow-wrap: anywhere; }
.endpoint-bar #calculate { width: 144px; margin-left: auto; flex-shrink: 0; background: var(--ink-1); border-color: var(--ink-1); color: var(--paper-0); }
.endpoint-bar #calculate:hover { background: var(--ink-2); border-color: var(--ink-2); }
.workbench { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line-3); border-radius: 0 0 var(--pricing-radius-card) var(--pricing-radius-card); background: var(--paper-0); }
.input-pane, .output-pane { min-width: 0; padding: 20px 24px 24px; }
.input-pane { border-right: 1px solid var(--line-3); }
.output-pane { min-height: 570px; background: var(--paper-0); }
.pane-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; margin-bottom: 12px; }
.pane-heading h2 { font-size: var(--type-body); letter-spacing: normal; font-weight: 500; }
.result-status { font: 500 var(--type-caption)/1.5 var(--font-core); color: var(--ink-3); }
.editor-heading { margin-bottom: 12px; }
.example-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 280px; max-width: 100%; min-height: 40px; padding: 9px 16px; border: 1px solid var(--line-2); border-radius: var(--pricing-radius-field); background: var(--paper-0); color: var(--ink-1); font: var(--type-ui)/1.5 var(--font-core); text-align: start; cursor: pointer; }
.example-trigger > span:first-child { min-width: 0; }
.example-trigger[data-state="open"] { border-color: var(--ink-3); }
.example-trigger:disabled { opacity: 0.5; cursor: default; }
.example-label { display: flex; align-items: center; gap: 10px; min-width: 0; }
.example-label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.provider-icon { width: 16px; height: 16px; color: var(--ink-2); }
.example-chevron { width: 10px; height: 10px; color: var(--ink-3); }
.example-content { z-index: 50; width: 288px; min-width: var(--radix-select-trigger-width); max-width: var(--radix-select-content-available-width); max-height: var(--radix-select-content-available-height); overflow: hidden; padding: 4px; border: 1px solid var(--line-2); border-radius: var(--pricing-radius-menu); background: var(--paper-0); color: var(--ink-1); box-shadow: 0 4px 16px rgb(0 0 0 / 0.1), 0 1px 3px rgb(0 0 0 / 0.04); font: var(--type-ui)/1.5 var(--font-core); }
.example-item { position: relative; display: flex; align-items: center; min-height: 40px; padding: 8px 30px 8px 10px; border-radius: var(--pricing-radius-field); outline: none; cursor: default; user-select: none; }
.example-item[data-highlighted] { background: var(--paper-2); }
.example-selected { position: absolute; inset-inline-end: 8px; display: inline-flex; align-items: center; color: var(--ink-1); }
.example-selected .icon { width: 12px; height: 12px; }
.example-scroll { display: flex; align-items: center; justify-content: center; height: 24px; color: var(--ink-3); }
.example-scroll .icon { width: 10px; height: 10px; }
.example-scroll-up { transform: rotate(180deg); }
select, input { max-width: 100%; min-height: 40px; border: 1px solid var(--line-2); border-radius: var(--pricing-radius-field); padding: 9px 12px; color: var(--ink-1); background: var(--paper-0); font: var(--type-ui)/1.5 var(--font-core); }
select { appearance: none; padding-right: 36px; background-image: url("/pricing-api/select-chevron.svg"); background-repeat: no-repeat; background-size: 10px 10px; background-position: right 12px center; }
textarea { display: block; width: 100%; min-height: 240px; resize: vertical; padding: 14px; border: 1px solid var(--line-2); border-radius: var(--pricing-radius-field); background: var(--paper-1); color: var(--ink-1); font: var(--type-caption)/1.6 var(--font-mono); tab-size: 2; }
textarea:disabled { opacity: 1; }
textarea:focus-visible, input:focus-visible, select:focus-visible { outline-offset: 2px; }
#provider-response { height: 260px; }
.help { font-size: var(--type-caption); line-height: 1.5; color: var(--ink-3); margin-top: 10px; }
#response-help { font: var(--type-caption)/1.5 var(--font-core); }
#data-handling { max-width: 58ch; }
.billing { margin-top: 12px; font-size: var(--type-ui); }
summary { cursor: pointer; }
.billing summary { min-height: 40px; align-content: center; color: var(--ink-2); }
.billing summary span { color: var(--ink-3); }
.billing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.billing label { display: flex; flex-direction: column; gap: 6px; }
.billing input, .billing select { width: 100%; }
.message { font-size: var(--type-caption); line-height: 1.6; margin-top: 12px; }
.message:empty { display: none; }
.message.error { color: var(--red-600); }
.response-tabs { display: flex; gap: 22px; min-height: 40px; margin-bottom: 12px; border-bottom: 1px solid var(--line-3); }
.response-tabs button { min-width: 44px; min-height: 40px; padding: 8px 0; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ink-3); font: 500 var(--type-ui)/1.5 var(--font-core); cursor: pointer; transition: color 150ms ease-out, border-color 150ms ease-out; }
.response-tabs button:hover { color: var(--ink-1); }
.response-tabs button[aria-selected=true] { color: var(--ink-1); border-bottom-color: var(--ink-1); }
.result-placeholder { max-width: 32ch; font-size: var(--type-ui); margin-top: 18px; }
.cost-label { font: 500 var(--type-ui)/1.5 var(--font-core); color: var(--ink-2); margin-top: 22px; }
.cost { font: var(--type-amount)/1.2 var(--font-mono); letter-spacing: -0.03em; margin: 8px 0 10px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .cost-arrived { animation: cost-arrive 160ms cubic-bezier(0.32, 0.72, 0, 1); }
}
@keyframes cost-arrive {
  from { opacity: 0.65; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}
.meta { font-size: var(--type-caption); line-height: 1.5; color: var(--ink-3); overflow-wrap: anywhere; }
.breakdown { border-collapse: collapse; width: 100%; margin: 18px 0; font-size: var(--type-ui); }
.breakdown th, .breakdown td { border-bottom: 1px dotted var(--line-2); padding: 10px 0; font-weight: 400; text-align: left; }
.breakdown td { text-align: right; font: var(--type-caption)/1.5 var(--font-mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.output-pane details { font-size: var(--type-ui); margin-top: 12px; }
.output-pane summary { min-height: 40px; align-content: center; color: var(--ink-2); }
pre { max-height: 480px; padding: 14px; border-radius: var(--pricing-radius-field); background: var(--paper-1); font: var(--type-caption)/1.6 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; }
.output-pane a, .help a, .notice a { text-decoration-thickness: from-font; text-decoration-skip-ink: auto; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.notice { padding: 14px; margin-bottom: 16px; background: var(--paper-1); font-size: var(--type-ui); line-height: 1.6; }
.missing { padding: 12px 0; color: var(--amber-900); font-size: var(--type-caption); line-height: 1.6; }
.pricing-page .footer { margin-top: 80px; }
.pricing-page .footer-row { max-width: 1400px; align-items: center; gap: 8px 16px; }
.pricing-page .footer-row > * { white-space: nowrap; }
.pricing-page .footer-row a { display: inline-flex; align-items: center; min-height: 44px; }
.pricing-page .footer-tag, .pricing-page .footer-link, .pricing-page .footer-legal, .pricing-page .footer-copy { font-size: var(--type-caption); color: var(--ink-3); }
/* The three scenes explain the product. They are illustrations, not controls. */
.product-next { margin-top: 128px; }
.product-next-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.product-next-heading > div { max-width: 620px; }
.product-next h2 { font-size: var(--type-amount); line-height: 1.12; letter-spacing: -0.035em; }
.pricing-page .product-cta { gap: 12px; max-width: 100%; height: auto; min-height: 44px; padding: 12px 18px 12px 20px; background: var(--ink-1); border-color: var(--ink-1); color: var(--paper-0); line-height: 1.4; }
.product-cta:hover { background: var(--ink-2); }
.product-cta .icon { width: 14px; height: 14px; }
.product-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 36px; }
.product-points h3 { font-size: var(--type-body); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 10px; text-wrap: balance; }
.product-points article > p { max-width: 40ch; font-size: var(--type-ui); line-height: 1.6; color: var(--ink-3); }
.product-scene { position: relative; isolation: isolate; height: 216px; margin-bottom: 20px; padding: 18px; overflow: hidden; border: 1px solid var(--line-3); border-radius: var(--pricing-radius-card); background: var(--paper-0); font-size: var(--type-caption); pointer-events: none; user-select: none; }
.scene-heading { margin-bottom: 18px; color: var(--ink-2); font-weight: 500; line-height: 1.5; }
.spend-plot { display: grid; gap: 16px; padding-top: 20px; }
.spend-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 12px; color: var(--ink-3); line-height: 1.5; }
.spend-row-primary > span:first-child { color: var(--ink-2); font-weight: 500; }
.spend-track { display: block; }
.spend-bar { display: block; height: 16px; border-radius: 1px; background: var(--ink-2); }
.spend-bar-primary { width: 92%; background: var(--pricing-green); }
.spend-bar-secondary { width: 52%; }
.spend-bar-tertiary { width: 29%; }
.compare-scene .scene-heading { margin-bottom: 8px; }
.comparison-ticket { margin-bottom: 18px; color: var(--ink-3); font-size: var(--type-caption); line-height: 1.5; }
.answer-list { border-top: 1px solid var(--line-2); }
.answer-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.answer-row + .answer-row { border-top: 1px solid var(--line-3); }
.answer-model { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink-2); font-weight: 500; line-height: 1.5; }
.answer-model .icon { width: 14px; height: 14px; }
.answer-row code { flex-shrink: 0; font: var(--type-caption)/1.5 var(--font-mono); }
.change-file { margin-bottom: 14px; color: var(--ink-3); font: var(--type-caption)/1.5 var(--font-mono); }
.model-diff { margin: 0; padding: 0; overflow: visible; background: transparent; font: var(--type-caption)/1.8 var(--font-mono); }
.model-diff code > span { display: block; }
.diff-context { color: var(--ink-3); }
.diff-remove { color: var(--ink-3); }
.diff-add { color: var(--pricing-green-ink); background: var(--pricing-response); }
@media (prefers-reduced-motion: no-preference) {
  .is-animating .spend-bar { transform-origin: left center; animation: spend-draw 280ms cubic-bezier(0.32, 0.72, 0, 1) both; }
  .is-animating .spend-bar-secondary { animation-delay: 35ms; }
  .is-animating .spend-bar-tertiary { animation-delay: 70ms; }
  .is-animating .answer-row { animation: answer-arrive 220ms cubic-bezier(0.32, 0.72, 0, 1) 140ms both; }
  .is-animating .answer-row + .answer-row { animation-delay: 200ms; }
  .is-animating .diff-add { animation: answer-arrive 240ms cubic-bezier(0.32, 0.72, 0, 1) 320ms both; }
}
@keyframes spend-draw {
  from { transform: scaleX(0.5); opacity: 0.65; }
  to { transform: scaleX(1); opacity: 1; }
}
@keyframes answer-arrive {
  from { transform: translateY(2px); opacity: 0.6; }
  to { transform: translateY(0); opacity: 1; }
}
#json-result { max-height: 420px; margin: 0; border: 1px solid var(--line-2); color: var(--ink-1); tab-size: 2; }
.output-pane [hidden] { display: none; }
#main { scroll-margin-top: 20px; }
#setup-prompt::-webkit-scrollbar, pre::-webkit-scrollbar { width: 8px; height: 8px; }
#setup-prompt::-webkit-scrollbar-thumb, pre::-webkit-scrollbar-thumb { background: rgb(0 0 0 / 0.2); border-radius: 4px; }

@media (hover: none), (pointer: coarse) {
  .pricing-page .btn, .response-tabs button, select, input, summary { min-height: 44px; }
}
@media (hover: hover) and (pointer: fine) {
  #copy-setup:hover { background: var(--paper-2); }
}
@media (max-width: 900px) {
  .intro { grid-template-columns: 1fr; gap: 28px; padding: 24px 0 32px; }
  .intro-copy { max-width: 600px; padding-top: 0; }
  .setup-panel { justify-items: start; width: 100%; max-width: 620px; padding-top: 0; }
  #setup-details summary { justify-content: flex-start; }
  .access-note { margin-top: 16px; }
  .product-next { margin-top: 88px; }
  .product-next-heading { display: block; }
  .product-cta { margin-top: 20px; }
  .product-points { grid-template-columns: 1fr; gap: 28px; }
  .product-scene { max-width: 380px; }
}
@media (max-width: 760px) {
  .try-heading { display: block; }
  .try-heading h2 { margin-bottom: 6px; }
  .workbench { grid-template-columns: 1fr; }
  .input-pane { border-right: 0; border-bottom: 1px solid var(--line-2); }
}
@media (max-width: 480px) {
  .pricing-page .btn, .response-tabs button, select, input, summary { min-height: 44px; }
  .pricing-page .wrap { padding-left: 20px; padding-right: 20px; }
  .nav-row { gap: 12px; }
  .nav-row .wordmark img { width: 108px; height: auto; }
  .nav-spacer { display: none; }
  .nav-row .wordmark { margin-right: auto; }
  .nav-link { font-size: var(--type-caption); }
  .intro h1 { font-size: var(--type-amount); letter-spacing: -0.8px; }
  .lede { font-size: var(--type-body); }
  #setup-prompt { font-size: var(--type-body); height: 220px; }
  #copy-setup { min-width: 140px; padding: 0 12px; }
  .endpoint-bar { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 8px; padding: 10px 12px; }
  .endpoint-bar #calculate { grid-column: 1 / -1; width: 100%; margin-left: 0; padding: 0 12px; }
  .input-pane, .output-pane { padding: 16px; }
  textarea, input, select { font-size: var(--type-body); }
  .example-trigger { min-height: 44px; font-size: var(--type-body); }
  .example-item { min-height: 44px; }
  .billing-grid { grid-template-columns: 1fr; }
  .pricing-page .footer { margin-top: 48px; }
  .pricing-page .footer-tag { flex-basis: 100%; }
  .pricing-page .footer-spacer { display: none; }
}
@media (max-width: 360px) {
  .nav-row { gap: 10px; }
  .nav-row .wordmark img { width: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .pricing-page .btn, .response-tabs button, .setup-label > span { transition: none; }
}

/* Preset selectors populate the existing editable provider-response field. */
.request-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.12fr); gap: 14px 12px; margin-bottom: 18px; }
.request-controls label { display: flex; flex-direction: column; min-width: 0; gap: 7px; color: var(--ink-3); font: var(--type-caption)/1.5 var(--font-core); }
.request-controls select { width: 100%; min-width: 0; min-height: 44px; }

.editor-label { display: block; margin: 0 0 12px; color: var(--ink-1); font: 500 var(--type-body)/1.5 var(--font-core); letter-spacing: normal; }
#provider-response { height: 300px; }
.copy-request { border: 0; padding: 8px 0 8px 12px; background: transparent; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; font: var(--type-caption)/1.5 var(--font-core); cursor: pointer; min-height: 40px; }
.billing summary { white-space: normal; }
.cost-distribution { display: flex; gap: 3px; height: 18px; overflow: hidden; border-radius: 5px; margin: 24px 0 12px; }
.cost-distribution > span { flex-shrink: 1; }
.cost-swatch { display: inline-block; width: 18px; height: 9px; margin-right: 10px; border-radius: 2px; }
.cost-input { background: #999ef0; }
.cost-output { background: #209a9c; }
.cost-cache_read, .cost-cache_write { background: #41379c; }
.cost-request { background: #45433c; }
.breakdown .cost-percent { width: 52px; color: var(--ink-3); }
@media (min-width: 761px) and (max-width: 1150px) {
  .workbench { grid-template-columns: 1fr; }
  .input-pane { border-right: 0; border-bottom: 1px solid var(--line-3); }
}
@media (max-width: 600px) {
  .request-controls { grid-template-columns: 1fr; }
}

/* A shared request makes both the answer and its per-request cost comparable. */
.product-scene { height: 240px; }
.compare-scene .scene-heading { margin-bottom: 4px; }
.compare-scene .comparison-ticket { margin-bottom: 12px; color: var(--ink-2); }
.compare-scene .answer-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; padding: 9px 0; }
.answer-cost { color: var(--ink-1); font: var(--type-caption)/1.5 var(--font-mono); font-variant-numeric: tabular-nums; }
.compare-scene .answer-output { grid-column: 1 / -1; color: var(--ink-3); white-space: normal; overflow-wrap: anywhere; }

/* Keep the result visible before the editor on phones. */
.compact-cost { display: none; }
@media (max-width: 600px) {
  .endpoint-bar { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 8px; }
  .compact-cost { display: flex; grid-column: 1 / -1; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; padding-top: 8px; border-top: 1px solid var(--line-3); color: var(--ink-2); font: var(--type-caption)/1.5 var(--font-core); }
  .compact-cost strong { min-width: 0; font: 500 var(--type-section)/1.3 var(--font-mono); overflow-wrap: anywhere; color: var(--ink-1); }
  .endpoint-bar #calculate { grid-column: 1 / -1; width: 100%; margin-left: 0; }
}