/* Página pública da API (OPB-1071). Depende dos tokens e do header de landing-v2.css.
   Classes com prefixo ax- para não colidir com a landing. */

.ax-mono, .ax-page code, .ax-page pre {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-variant-ligatures: none;
}

/* Barras de rolagem discretas nos blocos de código e no explorador. */
.ax-scroll { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .16) transparent; }
.ax-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.ax-scroll::-webkit-scrollbar-track { background: transparent; }
.ax-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
.ax-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .26); background-clip: padding-box; }
.ax-scroll::-webkit-scrollbar-corner { background: transparent; }
html.light .ax-scroll.is-surface { scrollbar-color: rgba(0, 0, 0, .18) transparent; }
html.light .ax-scroll.is-surface::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .16); background-clip: padding-box; }

.ax-tok-k { color: #7dd3fc; } .ax-tok-s { color: #86efac; } .ax-tok-n { color: #fcd34d; }
.ax-tok-b { color: #f0abfc; } .ax-tok-c { color: #6b6b6b; } .ax-tok-p { color: #f0abfc; }

/* ---------- Hero ---------- */
.ax-hero { padding: 84px 0 40px; }
.ax-hero-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 56px; align-items: center; }
.ax-hero h1 { font-size: 3.6rem; line-height: 1.02; letter-spacing: -.045em; font-weight: 850; margin: 0 0 20px; }
.ax-hero .ax-lead { font-size: 1.15rem; line-height: 1.6; margin: 0 0 30px; max-width: 34rem; color: color-mix(in srgb, var(--foreground) 64%, transparent); }
.ax-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.ax-hero-ctas svg { width: 16px; height: 16px; }

/* Menu do botão Documentação */
.ax-menu-wrap { position: relative; }
.ax-menu-wrap > button svg.ax-chev { transition: transform .2s ease; }
.ax-menu-wrap > button[aria-expanded="true"] svg.ax-chev { transform: rotate(180deg); }
.ax-menu { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; min-width: 260px; display: grid; gap: 2px; padding: 6px; border-radius: 14px; border: 1px solid var(--glass-border); background: var(--dialog-background); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .55); animation: ax-menu-in .16s ease-out; }
@keyframes ax-menu-in { from { opacity: 0; transform: translateY(-4px); } }
.ax-menu button, .ax-menu a { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--foreground); text-align: left; text-decoration: none; font: inherit; cursor: pointer; }
.ax-menu button:hover, .ax-menu a:hover, .ax-menu button:focus-visible, .ax-menu a:focus-visible { background: var(--surface-hover); outline: none; }
.ax-menu .ax-menu-ic { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--signal-up-bg); color: var(--accent-ink); }
.ax-menu .ax-menu-ic svg { width: 16px; height: 16px; }
.ax-menu strong { display: block; font-size: .9rem; }
.ax-menu small { display: block; font-size: .76rem; color: color-mix(in srgb, var(--foreground) 55%, transparent); }

/* Terminal animado */
.ax-term { border-radius: 18px; border: 1px solid rgba(255, 255, 255, .1); background: #090909; color: #e5e5e5; overflow: hidden; box-shadow: 0 40px 120px -40px rgba(0, 201, 120, .35), 0 30px 70px -40px rgba(0, 0, 0, .7); }
.ax-term-bar { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; background: #0f0f0f; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.ax-dots { display: flex; gap: 6px; flex: none; }
.ax-dots i { width: 10px; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .14); }
.ax-term-eps { display: flex; gap: 6px; margin-left: 8px; overflow-x: auto; }
.ax-term-eps button { height: 26px; padding: 0 10px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: #939393; font-size: 12px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.ax-term-eps button[aria-pressed="true"] { background: rgba(0, 201, 120, .12); border-color: rgba(0, 201, 120, .35); color: #7ef5c0; }
.ax-term-eps button:focus-visible { outline: 2px solid #00c978; }
.ax-term-body { padding: 18px 20px 20px; height: 440px; overflow: hidden; font-size: 12.5px; line-height: 1.7; position: relative; }
.ax-term-body::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(transparent, #090909); pointer-events: none; }
.ax-term-line { white-space: pre; margin: 0; font: inherit; }
.ax-t-prompt { color: #00c978; }
.ax-t-status { color: #7ef5c0; }
.ax-t-meta { color: #6b6b6b; }
.ax-cursor { display: inline-block; width: 8px; height: 15px; background: #00c978; vertical-align: -2px; animation: ax-blink 1s steps(1) infinite; }
@keyframes ax-blink { 50% { opacity: 0; } }

.ax-stack { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 12px; margin-top: 64px; }
.ax-stack .ax-lbl { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--foreground) 45%, transparent); margin-right: 6px; }
.ax-chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--glass-border); background: var(--card); font-size: .875rem; font-weight: 600; }
.ax-chip svg, .ax-chip i { width: 16px; height: 16px; font-size: 1rem; color: color-mix(in srgb, var(--foreground) 75%, transparent); }

/* ---------- Do JSON ao resultado ---------- */
.ax-tabs { display: flex; justify-content: center; gap: 6px; width: fit-content; max-width: 100%; margin: 0 auto 30px; padding: 5px; border-radius: 14px; border: 1px solid var(--glass-border); background: var(--glass-bg); overflow-x: auto; }
.ax-page .ax-tab { display: inline-flex; flex: none; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px; border: 0; background: transparent; font-size: .9rem; font-weight: 600; color: color-mix(in srgb, var(--foreground) 60%, transparent); cursor: pointer; }
.ax-tab svg { width: 16px; height: 16px; }
.ax-page .ax-tab[aria-selected="true"] { background: var(--card); color: var(--foreground); box-shadow: 0 0 0 1px var(--glass-border); }
.ax-page .ax-tab:focus-visible { outline: 2px solid var(--primary-end); outline-offset: 2px; }
.ax-result { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .9fr); gap: 20px; }
.ax-result-side { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.ax-result-side h3 { margin: 0; font-size: 1.35rem; letter-spacing: -.02em; }
.ax-result-side p { margin: 0; line-height: 1.6; }
.ax-uses { display: flex; flex-wrap: wrap; gap: 6px; }
.ax-uses code { font-size: 12px; padding: 4px 8px; border-radius: 7px; background: var(--signal-up-bg); color: var(--accent-ink); }
.ax-mini-code { flex: 1; min-height: 180px; max-height: 320px; margin: 0; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .08); background: #090909; color: #e5e5e5; font-size: 11.5px; line-height: 1.65; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.ax-canvas { height: 480px; border-radius: 18px; border: 1px solid var(--glass-border); background: var(--lp-frame-bg, var(--card)); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 30px 80px -44px var(--glass-shadow); }
.ax-canvas-body { flex: 1; min-height: 0; overflow: auto; }
.ax-canvas-bar { display: flex; align-items: center; gap: 10px; height: 40px; flex: none; padding: 0 14px; border-bottom: 1px solid var(--glass-border); background: color-mix(in srgb, var(--card) 80%, var(--background)); font-size: .8rem; font-weight: 600; }
.ax-canvas-bar .ax-dots i { background: color-mix(in srgb, var(--foreground) 16%, transparent); }
.ax-canvas-bar .ax-ttl { margin-left: 6px; color: color-mix(in srgb, var(--foreground) 70%, transparent); }
.ax-pill { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; border: 1px solid var(--glass-border); color: color-mix(in srgb, var(--foreground) 70%, transparent); background: var(--card); white-space: nowrap; }
.ax-pill svg { width: 12px; height: 12px; }
.ax-note { font-size: .76rem; margin: 10px 2px 0; color: color-mix(in srgb, var(--foreground) 50%, transparent); }
.ax-skeleton { display: grid; place-items: center; height: 100%; color: color-mix(in srgb, var(--foreground) 50%, transparent); font-size: .88rem; gap: 10px; }
.ax-spinner { width: 18px; height: 18px; border-radius: 99px; border: 2px solid currentColor; border-right-color: transparent; animation: ax-spin .7s linear infinite; display: inline-block; }
@keyframes ax-spin { to { transform: rotate(360deg); } }

/* Planilha */
.ax-sheet { font-size: 12.5px; display: flex; flex-direction: column; height: 100%; }
.ax-sheet-formula { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--glass-border); flex: none; }
.ax-sheet-formula b { width: 36px; color: color-mix(in srgb, var(--foreground) 60%, transparent); }
.ax-sheet-formula i { font-weight: 700; color: color-mix(in srgb, var(--foreground) 45%, transparent); }
.ax-sheet-formula .ax-pill { font-variant-numeric: tabular-nums; }
.ax-sheet-grid { flex: 1; overflow: auto; }
.ax-sheet table { border-collapse: collapse; width: 100%; min-width: 620px; font-variant-numeric: tabular-nums; }
.ax-sheet th, .ax-sheet td { border: 1px solid var(--glass-border); padding: 6px 10px; text-align: left; white-space: nowrap; }
.ax-sheet thead th { position: sticky; top: 0; z-index: 1; background: color-mix(in srgb, var(--card) 85%, var(--foreground) 5%); font-weight: 600; font-size: 11px; color: color-mix(in srgb, var(--foreground) 55%, transparent); text-align: center; }
.ax-sheet tbody th { background: color-mix(in srgb, var(--card) 85%, var(--foreground) 5%); font-weight: 500; font-size: 11px; color: color-mix(in srgb, var(--foreground) 50%, transparent); text-align: center; width: 36px; }
.ax-sheet tr.ax-head td { font-weight: 700; background: color-mix(in srgb, #00c978 10%, transparent); }
.ax-sheet td.ax-num { text-align: right; }
.ax-up { color: var(--signal-up-ink); font-weight: 600; }
.ax-down { color: var(--signal-down-ink); font-weight: 600; }
.ax-sheet-tabs { display: flex; gap: 2px; padding: 6px 10px; border-top: 1px solid var(--glass-border); font-size: 12px; flex: none; }
.ax-sheet-tabs span { padding: 4px 12px; border-radius: 6px 6px 0 0; color: color-mix(in srgb, var(--foreground) 55%, transparent); }
.ax-sheet-tabs span.is-on { background: var(--signal-up-bg); color: var(--accent-ink); font-weight: 700; }

/* Painel */
.ax-board { padding: 16px; display: grid; gap: 12px; }
.ax-board-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ax-bk { border: 1px solid var(--glass-border); border-radius: 12px; padding: 10px 12px; background: var(--card); }
.ax-bk span { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: color-mix(in srgb, var(--foreground) 50%, transparent); }
.ax-bk strong { display: block; margin-top: 4px; font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ax-board-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
.ax-bpanel { border: 1px solid var(--glass-border); border-radius: 12px; padding: 12px; background: var(--card); min-width: 0; }
.ax-bpanel h4 { margin: 0 0 8px; font-size: .8rem; display: flex; justify-content: space-between; gap: 8px; }
.ax-bpanel h4 small { font-weight: 500; color: color-mix(in srgb, var(--foreground) 50%, transparent); }
.ax-bpanel svg { display: block; width: 100%; }
.ax-bars { display: grid; gap: 6px; }
.ax-bar { display: grid; grid-template-columns: 64px 1fr 76px; gap: 8px; align-items: center; font-size: .74rem; font-variant-numeric: tabular-nums; }
.ax-bar .ax-track { height: 10px; border-radius: 4px; background: color-mix(in srgb, var(--foreground) 6%, transparent); position: relative; overflow: hidden; }
.ax-bar .ax-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 4px; }
.ax-bar .ax-v { text-align: right; font-weight: 700; }

/* Alerta */
.ax-phone-stage { display: grid; place-items: center; height: 100%; padding: 24px; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, #00c978 10%, transparent), transparent 60%); }
.ax-phone { width: 300px; border-radius: 38px; border: 1px solid var(--glass-border); background: color-mix(in srgb, var(--card) 70%, var(--background)); padding: 14px; box-shadow: 0 30px 60px -30px var(--glass-shadow); }
.ax-phone-time { text-align: center; font-size: 2.6rem; font-weight: 300; margin: 16px 0 2px; }
.ax-phone-date { text-align: center; font-size: .8rem; margin-bottom: 20px; color: color-mix(in srgb, var(--foreground) 55%, transparent); }
.ax-notif { border-radius: 18px; padding: 12px 14px; background: color-mix(in srgb, var(--foreground) 8%, var(--card)); border: 1px solid var(--glass-border); margin-bottom: 10px; animation: ax-notif-in .5s cubic-bezier(.22, 1, .36, 1) both; }
.ax-notif + .ax-notif { animation-delay: .25s; }
@keyframes ax-notif-in { from { opacity: 0; transform: translateY(-10px) scale(.97); } }
.ax-notif-head { display: flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 700; color: color-mix(in srgb, var(--foreground) 60%, transparent); }
.ax-notif-head img { width: 18px; height: 18px; border-radius: 5px; }
.ax-notif-head span:last-child { margin-left: auto; font-weight: 500; }
.ax-notif strong { display: block; margin: 6px 0 2px; font-size: .9rem; }
.ax-notif p { margin: 0; font-size: .82rem; line-height: 1.45; }

/* ---------- Explorador: altura fixa, rolagem interna ---------- */
.ax-explorer { display: grid; grid-template-columns: 240px minmax(0, 1fr); height: 700px; border: 1px solid var(--glass-border); border-radius: 20px; overflow: hidden; background: var(--card); box-shadow: 0 30px 90px -50px var(--glass-shadow); }
.ax-ex-side { min-height: 0; overflow-y: auto; border-right: 1px solid var(--glass-border); padding: 14px 10px; background: color-mix(in srgb, var(--card) 90%, var(--background)); }
.ax-ex-group { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin: 14px 10px 6px; color: color-mix(in srgb, var(--foreground) 45%, transparent); }
.ax-ex-group:first-child { margin-top: 4px; }
.ax-page .ax-ex-ep { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 38px; padding: 8px 10px; border-radius: 10px; border: 0; background: transparent; text-align: left; font-size: 12.5px; font-weight: 500; color: color-mix(in srgb, var(--foreground) 72%, transparent); cursor: pointer; white-space: nowrap; }
.ax-ex-ep code { overflow: hidden; text-overflow: ellipsis; }
.ax-page .ax-ex-ep:hover { background: var(--surface-hover); }
.ax-page .ax-ex-ep[aria-selected="true"] { background: var(--signal-up-bg); color: var(--foreground); }
.ax-page .ax-ex-ep:focus-visible { outline: 2px solid var(--primary-end); outline-offset: -2px; }
.ax-verb { flex: none; font-size: 10px; font-weight: 800; letter-spacing: .04em; padding: 2px 6px; border-radius: 5px; background: var(--signal-up-bg); color: var(--accent-ink); }
.ax-ex-main { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.ax-ex-req { min-width: 0; min-height: 0; overflow-y: auto; padding: 22px; border-right: 1px solid var(--glass-border); display: flex; flex-direction: column; gap: 18px; }
.ax-ex-title { display: flex; align-items: center; gap: 10px; }
.ax-ex-title h3 { margin: 0; font-size: 1.2rem; }
.ax-ex-desc { margin: 0; font-size: .9rem; line-height: 1.55; min-height: 2.8em; }
.ax-params { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ax-param { display: grid; gap: 5px; min-width: 0; }
.ax-param label { font-size: 12px; font-weight: 600; }
.ax-param small { font-size: .72rem; line-height: 1.35; color: color-mix(in srgb, var(--foreground) 50%, transparent); }
.ax-param select { height: 38px; min-width: 0; border-radius: 10px; border: 1px solid var(--glass-border); background: color-mix(in srgb, var(--foreground) 3%, var(--background)); color: var(--foreground); padding: 0 10px; font-size: .85rem; outline: none; }
.ax-param select:focus { border-color: var(--primary-end); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-end) 22%, transparent); }
.ax-no-params { font-size: .85rem; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--glass-border); color: color-mix(in srgb, var(--foreground) 55%, transparent); }
.ax-url { display: flex; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1); background: #090909; color: #e5e5e5; font-size: 12px; line-height: 1.5; overflow-x: auto; white-space: nowrap; flex: none; }
.ax-url .ax-base { color: #6b6b6b; }
.ax-url .ax-q { color: #fcd34d; }
.ax-snip { flex: none; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); background: #090909; color: #e5e5e5; }
.ax-snip-tabs { display: flex; align-items: center; gap: 4px; padding: 6px 8px; background: #0f0f0f; border-bottom: 1px solid rgba(255, 255, 255, .07); overflow-x: auto; }
.ax-snip-tabs button { height: 28px; flex: none; padding: 0 10px; border-radius: 7px; border: 0; background: transparent; color: #939393; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.ax-snip-tabs button[aria-selected="true"] { background: #212121; color: #fafafa; }
.ax-snip-tabs button:focus-visible { outline: 2px solid #00c978; }
.ax-snip-tabs .ax-copy { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; position: sticky; right: 0; background: #0f0f0f; box-shadow: -10px 0 10px #0f0f0f; }
.ax-snip-tabs .ax-copy svg { width: 13px; height: 13px; }
.ax-snip pre { margin: 0; padding: 12px 14px; font-size: 11.5px; line-height: 1.65; height: 170px; overflow: auto; white-space: pre; }
.ax-run { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ax-page .ax-run .btn-primary { min-height: 42px; min-width: 190px; padding: 0 18px; border-radius: 12px; font-size: .9rem; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ax-run .btn-primary svg { width: 16px; height: 16px; }
.ax-fields h4 { margin: 0 0 8px; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: color-mix(in srgb, var(--foreground) 55%, transparent); }
.ax-fields ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ax-fields li { font-size: 11.5px; line-height: 1.5; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--foreground) 4%, transparent); overflow-wrap: anywhere; }
.ax-ex-res { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #090909; color: #e5e5e5; }
.ax-res-head { display: flex; align-items: center; gap: 10px; height: 44px; flex: none; padding: 0 16px; border-bottom: 1px solid rgba(255, 255, 255, .07); background: #0f0f0f; font-size: 12px; white-space: nowrap; overflow: hidden; }
.ax-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #7ef5c0; }
.ax-status::before { content: ''; width: 8px; height: 8px; border-radius: 99px; background: #00c978; }
.ax-res-head .ax-t-meta { margin-left: auto; }
.ax-res-headers { flex: none; height: 58px; padding: 10px 16px; border-bottom: 1px solid rgba(255, 255, 255, .07); font-size: 11.5px; line-height: 1.7; color: #939393; overflow: hidden; }
.ax-res-headers b { color: #d0d0d0; font-weight: 500; }
.ax-res-body { flex: 1; min-height: 0; margin: 0; padding: 14px 16px; font-size: 11.5px; line-height: 1.65; overflow: auto; white-space: pre; transition: opacity .2s ease; }
.ax-ex-res[aria-busy="true"] .ax-res-body { opacity: .35; }
.ax-res-overlay { position: absolute; inset: 102px 0 0; display: grid; align-items: start; background: var(--background); pointer-events: none; }
.ax-ex-foot { text-align: center; font-size: .78rem; margin: 14px 0 0; color: color-mix(in srgb, var(--foreground) 50%, transparent); }

/* ---------- Começar ---------- */
.ax-steps { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ax-step { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 20px; border-radius: 16px; border: 1px solid var(--glass-border); background: var(--card); }
.ax-step > span { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-weight: 800; background: var(--signal-up-bg); color: var(--accent-ink); }
.ax-step h3 { margin: 4px 0 6px; font-size: 1.05rem; }
.ax-step p { margin: 0; font-size: .9rem; line-height: 1.55; }
.ax-step code { font-size: 12px; padding: 2px 6px; border-radius: 6px; background: color-mix(in srgb, var(--foreground) 7%, transparent); }
.ax-frame { border: 1px solid var(--glass-border); border-radius: 16px; overflow: hidden; background: var(--lp-frame-bg, var(--card)); box-shadow: 0 30px 80px -40px var(--glass-shadow); }
.ax-frame-bar { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--glass-border); background: color-mix(in srgb, var(--card) 80%, var(--background)); }
.ax-frame-bar .ax-dots i { background: color-mix(in srgb, var(--foreground) 16%, transparent); }
.ax-frame-bar .ax-url-pill { flex: 1; max-width: 360px; margin: 0 auto; height: 24px; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: color-mix(in srgb, var(--foreground) 50%, transparent); background: color-mix(in srgb, var(--foreground) 5%, transparent); }
.ax-frame-bar .ax-url-pill svg { width: 11px; height: 11px; }
.ax-frame img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7.6; object-fit: cover; object-position: top center; }

/* ---------- Limites, plano, erros, LLM ---------- */
.ax-limits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ax-card { border: 1px solid var(--glass-border); border-radius: 18px; background: var(--card); }
.ax-limit { padding: 20px; }
.ax-limit strong { display: block; font-size: 2.2rem; font-weight: 900; letter-spacing: -.03em; }
.ax-limit span { font-size: .88rem; }
.ax-plan { margin-top: 20px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: 26px 28px; border-radius: 20px; border: 1px solid var(--lp-pro-border); background: var(--lp-pro-bg); }
.ax-plan h3 { margin: 6px 0; font-size: 1.3rem; }
.ax-plan p { margin: 0; line-height: 1.55; }
.ax-plan-cta { display: grid; gap: 8px; justify-items: end; }
.ax-plan-price { font-size: 1.9rem; font-weight: 900; letter-spacing: -.03em; }
.ax-plan-price small { font-size: .9rem; font-weight: 600; color: color-mix(in srgb, var(--foreground) 55%, transparent); }
.ax-plan-cta svg { width: 16px; height: 16px; }
.ax-two { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; align-items: start; }
.ax-card-head { padding: 18px 22px 0; }
.ax-card-head h3 { margin: 0; font-size: 1.1rem; }
.ax-err { width: 100%; border-collapse: collapse; font-size: .86rem; }
.ax-err th, .ax-err td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--glass-border); vertical-align: top; }
.ax-err th { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--foreground) 50%, transparent); }
.ax-err td:first-child { font-weight: 800; font-variant-numeric: tabular-nums; }
.ax-err code { font-size: 11.5px; color: var(--accent-ink); }
.ax-err tr:last-child td { border-bottom: 0; }
.ax-sec-list { list-style: none; margin: 0; padding: 22px; display: grid; gap: 16px; }
.ax-sec-list li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: .9rem; line-height: 1.5; }
.ax-sec-list svg { width: 20px; height: 20px; color: var(--accent-ink); margin-top: 1px; }
.ax-sec-list strong { display: block; }
.ax-llm { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; padding: 26px 28px; }
.ax-llm-ic { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: var(--signal-up-bg); color: var(--accent-ink); }
.ax-llm-ic svg { width: 26px; height: 26px; }
.ax-llm h3 { margin: 0 0 4px; font-size: 1.2rem; }
.ax-llm p { margin: 0; line-height: 1.55; }
.ax-llm-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ax-llm-actions a svg { width: 15px; height: 15px; }

/* Botão Copiar para LLM com animação */
.ax-page .ax-copy-llm { position: relative; overflow: hidden; min-width: 180px; }
.ax-page .ax-copy-llm .ax-copy-ic { position: relative; width: 16px; height: 16px; display: inline-grid; }
.ax-page .ax-copy-llm .ax-copy-ic svg { grid-area: 1 / 1; width: 16px; height: 16px; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease; }
.ax-page .ax-copy-llm .ax-copy-ic .ax-ic-done { transform: scale(0) rotate(-45deg); opacity: 0; }
.ax-page .ax-copy-llm[data-state="copied"] .ax-copy-ic .ax-ic-idle { transform: scale(0) rotate(45deg); opacity: 0; }
.ax-page .ax-copy-llm[data-state="copied"] .ax-copy-ic .ax-ic-done { transform: scale(1) rotate(0); opacity: 1; }
.ax-page .ax-copy-llm[data-state="copied"] { animation: ax-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
.ax-page .ax-copy-llm::before { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .45); transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none; }
.ax-page .ax-copy-llm[data-state="copied"]::before { animation: ax-ripple .6s ease-out; }
.ax-page .ax-copy-llm[data-state="copying"] .ax-copy-ic .ax-ic-idle { animation: ax-spin .8s linear infinite; }
@keyframes ax-pop { 0% { transform: scale(1); } 35% { transform: scale(.94); } 70% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes ax-ripple { from { transform: translate(-50%, -50%) scale(0); opacity: .9; } to { transform: translate(-50%, -50%) scale(26); opacity: 0; } }

/* FAQ: reaproveita .faq-item da landing */
.ax-faq .faq-a p code { font-size: 12px; }

.ax-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 90; display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 12px; background: #111111; color: #fafafa; border: 1px solid #2e2e2e; font-size: .875rem; box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .6); animation: ax-menu-in .2s ease-out; }
.ax-toast svg { width: 16px; height: 16px; color: #22f8a2; }

.ax-back { display: inline-flex; align-items: center; gap: 6px; }
.ax-back svg { width: 15px; height: 15px; }

@media (max-width: 1100px) {
  .ax-hero-grid, .ax-result, .ax-two { grid-template-columns: 1fr; gap: 28px; }
  .ax-explorer { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); height: 1180px; }
  .ax-ex-side { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--glass-border); padding: 10px; }
  .ax-ex-group { display: none; }
  .ax-ex-ep { width: auto; }
  .ax-ex-main { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .ax-ex-req { border-right: 0; border-bottom: 1px solid var(--glass-border); }
  .ax-limits { grid-template-columns: 1fr 1fr; }
  .ax-steps { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ax-hero { padding-top: 44px; }
  .ax-hero h1 { font-size: 2.5rem; }
  .ax-hero .ax-lead { font-size: 1.02rem; }
  .ax-hero-ctas > * { flex: 1 1 100%; }
  .ax-hero-ctas .lp-btn-lg { width: 100%; }
  .ax-menu { left: 0; right: 0; min-width: 0; }
  .ax-term-body { height: 360px; font-size: 11px; padding: 14px; }
  .ax-tabs { justify-content: flex-start; }
  .ax-canvas { height: 520px; }
  .ax-board-kpis { grid-template-columns: 1fr 1fr; }
  .ax-board-row { grid-template-columns: 1fr; }
  .ax-params { grid-template-columns: 1fr; }
  .ax-explorer { height: 1240px; }
  .ax-res-headers { white-space: nowrap; overflow-x: auto; font-size: 11px; }
  .ax-plan, .ax-llm { grid-template-columns: 1fr; }
  .ax-plan-cta { justify-items: stretch; }
  .ax-llm-ic { display: none; }
  .ax-limits { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ax-cursor, .ax-notif, .ax-copy-llm, .ax-copy-llm::before, .ax-copy-llm .ax-copy-ic .ax-ic-idle, .ax-menu, .ax-toast { animation: none !important; }
  .ax-copy-llm .ax-copy-ic svg { transition: none; }
}

/* Header da API e da documentação */
.ax-brand-tag { font-size: .7rem !important; font-weight: 800 !important; letter-spacing: .08em; padding: 3px 8px; border-radius: 7px; border: 1px solid var(--glass-border); color: color-mix(in srgb, var(--foreground) 65%, transparent); }
.lp-nav .ax-back, .lp-mobile-nav .ax-back { display: inline-flex; align-items: center; gap: 6px; }
.lp-mobile-nav .ax-back { display: flex; }
.lp-nav a[aria-current="page"], .lp-mobile-nav a[aria-current="page"] { color: var(--foreground); font-weight: 600; }

.lp-w-3xl { max-width: 48rem; }