/* Quiet blue, system sans for the interface, native Arabic for the transcript.
   Keep material behind controls and real data groups; let prose breathe. */
:root { --ln-accent-light: #285781; --ln-accent-dark: #96b7d8; }
.api-site {
  --wrap: 66rem;
  --bg: #ffffff;
  --surface: #ffffff;
  --bg-band: #f5f7f9;
  --well: #f5f7f9;
  --fg: #202831;
  --fg-muted: #626d77;
  --accent: #285781;
  --accent-soft: #edf3f8;
  --line: #dde3e9;
  --ln-r-sm: 7px;
  --ln-r-md: 10px;
  --ln-ink: var(--fg);
  --ln-ink-secondary: var(--fg-muted);
  --ln-surface: var(--surface);
  --ln-well: var(--well);
  --ln-hairline: var(--line);
  --ln-hairline-faint: var(--line);
}
@media (prefers-color-scheme: dark) {
  .api-site {
    --bg: #15191d;
    --surface: #1b2025;
    --bg-band: #191e23;
    --well: #191e23;
    --fg: #e6ebef;
    --fg-muted: #a3aeb8;
    --accent: #96b7d8;
    --accent-soft: #233342;
    --line: #343c44;
  }
}
.api-site h1, .api-site h2, .api-site h3 { font-weight: 600; }
.api-site .ln-surface { background: var(--surface); box-shadow: none; border-color: var(--line); }
.api-site .ln-surface.ln-sunken, .api-site .ln-surface.ln-quiet { background: var(--bg-band); }
.api-site .ln-surface::before, .api-site .ln-btn::before { display: none; }
.api-site .ln-btn { background: var(--accent); color: var(--accent-fg); border: 1px solid transparent; box-shadow: none; font-weight: 550; border-radius: 7px; }
.api-site .ln-btn.ln-secondary-btn { background: var(--surface); color: var(--fg); border-color: var(--line); }
.api-site .ln-btn.ln-quiet-btn { background: transparent; color: var(--fg-muted); }
.api-site .ln-btn.ln-quiet-destructive { background: transparent; color: var(--critical); }
.api-site .ln-btn:hover:not(:disabled) { filter: brightness(.94); }
.api-site .ln-btn:focus-visible, .api-site .ln-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.api-site .ln-input { background: var(--bg); color: var(--fg); border: 1px solid var(--line); box-shadow: none; }
.api-site .site-header { background: var(--bg); }
.api-site .header-inner { padding-block: .85rem; }
.api-site .brand { font-weight: 600; }
.api-site .nav a { display: inline-flex; align-items: center; min-height: 40px; }
.api-site .nav a[href="/developers/portal/"] { color: var(--accent); }
.api-site .lang-switch { border-radius: 7px; }
.api-site .text-link { align-self: center; font-size: .9375rem; }
.api-site .developer-actions { align-items: center; }
.api-site .ln-btn:disabled { filter: none; }
.api-site #auth-title:focus:not(:focus-visible) { outline: none; }

.api-hero { padding-block: clamp(3rem, 7vw, 6rem); }
.api-hero .developer-split { align-items: center; }
.api-hero h1 { max-width: 19ch; font-size: clamp(2.3rem, 4vw, 3.1rem); font-weight: 550; line-height: 1.15; letter-spacing: -.035em; text-wrap: initial; }
.api-footer { display: grid; grid-template-columns: 1fr auto; gap: .75rem 2rem; align-items: start; }
.api-footer > a { grid-column: 2; }
.api-footer p { margin: 0; }
.api-footer nav { display: flex; flex-wrap: wrap; gap: 1rem; }
.api-footer a { font-size: .9rem; }
.api-information { max-width: 48rem; padding-block-end: 4rem; }
.api-information section { padding-block: 1rem; }
.api-information section h2 { margin-block-start: 0; }
.api-site .page-head:has(+ .api-information) .wrap { max-width: 48rem; }
.developer-split > * { min-width: 0; }
.currency-selector { display: flex; align-items: center; gap: .75rem; font-size: .9rem; white-space: nowrap; }
.page-developers .currency-selector .ln-input { width: auto; min-width: 5.5rem; }
.balance-breakdown { margin-block: 1.5rem 0; }
.balance-breakdown > div { display: flex; justify-content: space-between; gap: 1rem; }
.balance-breakdown dd { margin: 0; font-variant-numeric: tabular-nums; }
#upgrade-panel { border: 1px solid var(--accent); padding: 1.5rem; }
.account-heading h2 { margin: 0; }
.api-site button:disabled { opacity: .55; cursor: default; }
@media(max-width: 700px) { .api-hero { padding-block-start: 2.5rem; } .api-hero h1 { max-width: 15ch; } }
.developer-nav { max-width: var(--wrap); margin: 0 auto; padding: 1.25rem 1.5rem; display: flex; gap: 1.75rem; border-block-end: 1px solid var(--line); flex-wrap: wrap; font-size: .9375rem; }
.developer-nav a { color: var(--fg-muted); text-decoration: none; }
.developer-nav a[aria-current] { color: var(--accent); font-weight: 650; }
.developer-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }
.developer-split p { max-width: 54ch; }
.developer-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block: 1rem; }
.page-developers .ln-surface { padding: 1.5rem; }
.page-developers .ln-btn { text-decoration: none; font: inherit; font-size: .9375rem; cursor: pointer; }
.page-developers pre { overflow-x: auto; white-space: pre; font-size: .875rem; line-height: 1.8; max-width: 100%; }
.developer-code { margin-block-start: 1rem; }
.developer-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-block: 1.5rem; }
.developer-packs > article { display: flex; flex-direction: column; align-items: start; }
.developer-packs > article > :first-child { margin-block-start: 0; }
.developer-packs > article > .ln-btn { margin-block-start: auto; width: 100%; }
.pack-price { font-size: 1.8rem; font-weight: 550; margin-block: .5rem; }
.pack-price span { font-size: 1rem; font-weight: 400; }
.portal-notice { border-inline-start: 3px solid var(--ember); font-size: .9375rem; margin-block-end: 2rem; }
.portal-form { display: grid; gap: 1.25rem; }
.portal-form .ln-field { display: grid; gap: .5rem; }
.portal-form #auth-submit { width: 100%; }
.auth-heading { display: grid; gap: .5rem; }
.auth-heading #auth-title { font-size: 1.75rem; line-height: 1.2; margin: 0; letter-spacing: -.02em; }
.auth-heading p { color: var(--fg-muted); margin: 0; font-size: .9rem; }
.portal-form label { display: flex; align-items: center; gap: .5rem; }
.portal-form .ln-form-divider { display: flex; align-items: center; gap: .75rem; color: var(--fg-muted); font-size: .8rem; }
.portal-form .ln-form-divider::before, .portal-form .ln-form-divider::after { content: ''; height: 1px; flex: 1; background: var(--line); }
#auth-panel { max-width: 27rem; margin: 2rem auto 4rem; }
.portal-section { padding-block: 2rem 3rem; }
#portal-message:empty { display: none; }
.portal-form .passkey-actions { margin: 0; }
.portal-form .passkey-actions > button { width: 100%; }
.portal-form .auth-switches { justify-content: space-between; gap: .5rem 1rem; }
.portal-form .small { margin: 0; }
.page-developers .ln-input { border-radius: var(--ln-r-sm); min-height: 44px; padding: .6rem .75rem; }
.page-developers .ln-btn { min-height: 44px; }
.api-site .page-head { padding-block: 2.5rem 1.5rem; }
.api-site .page-head h1 { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 550; }
.api-site .page-head .lede { font-size: 1.05rem; }
#dashboard > section { padding-block: 2rem; border-block-start: 1px solid var(--line); }
#dashboard > section > h2:first-child { margin-block-start: 0; }
#dashboard .account-heading p { overflow-wrap: anywhere; }
.key-row { overflow-wrap: anywhere; }
.key-row > div { min-width: 0; }
.portal-form h2 { margin: 0; }
.passkey-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: .25rem; }
.passkey-label p { margin: 0; }
.page-developers .ln-input { font: inherit; width: 100%; min-width: 0; }
.portal-form label { font-size: .9375rem; font-weight: 600; }
.auth-switches { display: flex; gap: 1rem; flex-wrap: wrap; }
.text-button { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; font-size: .9rem; text-decoration: underline; cursor: pointer; }
.account-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-end: 1.5rem; }
.account-heading button { white-space: nowrap; flex-shrink: 0; }
.balance-value { font-size: 3rem; font-weight: 550; line-height: 1.1; margin: .5rem 0; font-variant-numeric: tabular-nums; }
.key-form { display: flex; gap: .75rem; align-items: center; margin-block: 1.5rem; flex-wrap: wrap; }
.key-form > input { flex: 1; }
.key-scopes { display: flex; flex-wrap: wrap; gap: .5rem 1rem; width: 100%; padding: .75rem; border: 1px solid var(--line); border-radius: .5rem; }
.key-scopes legend { padding-inline: .35rem; color: var(--fg-muted); font-size: .875rem; }
.key-scopes label { display: inline-flex; align-items: center; gap: .4rem; }
.key-row { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding-block: .8rem; border-block-end: 1px solid var(--line); }
.key-row:last-child { border: 0; }
.key-row p { margin: 0; }
.key-row small { display: block; color: var(--fg-muted); }
.secret-panel { margin-block: 2rem; border: 1px solid var(--accent); }
.secret-panel textarea { font-family: ui-monospace, monospace !important; }
#portal-message:not(:empty) { padding: 1rem; background: var(--accent-soft); border-radius: var(--radius); }
.docs-layout { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 3rem; }
.docs-layout > * { min-width: 0; }
.docs-body { overflow-wrap: anywhere; }
.docs-layout aside nav { display: grid; gap: .25rem; font-size: .875rem; position: sticky; top: 6rem; }
.docs-layout aside a { padding-block: .4rem; color: var(--fg-muted); text-decoration: none; }
.docs-layout aside a:hover { color: var(--accent); }
.docs-body h2 { margin-block-start: 2.5rem; scroll-margin-top: 6rem; }
.docs-body p { max-width: 70ch; }
.docs-body pre { padding: 1.25rem !important; }
.status-overview { margin-block-end: 2rem; }
.status-component { margin-block: 2rem; }
.status-bars { display: grid; grid-template-columns: repeat(30, 1fr); gap: 4px; margin-block: 1rem .5rem; }
.status-day { height: 2.5rem; border-radius: 3px; background: var(--line); }
.status-day.good { background: var(--ok); }
.status-day.bad { background: var(--critical); }
.status-day.partial { background: var(--warn); }
.status-legend { display: flex; justify-content: space-between; font-size: .8rem; color: var(--fg-muted); }
.page-developers [hidden] { display: none !important; }
/* Site rhythm: content is primary; material is reserved for controls and groups. */
.api-site { font-size: 1rem; }
.api-site h2 { font-size: clamp(1.25rem, 2.5vw, 1.6rem); letter-spacing: -.015em; }
.api-site section > .wrap > h2:first-child,
.api-site .developer-split > div > h2:first-child,
.status-overview h2 { margin-block-start: 0; }
.api-site .lede { font-size: 1.0625rem; line-height: 1.75; max-width: 47ch; }
.api-site .site-footer { margin-block-start: 0; padding-block: 2rem; font-size: .875rem; }
.api-site .brand .app-icon { width: 32px; height: 32px; }
.api-site .page-head + section { padding-block-start: 1.5rem; }
.api-site .page-head p { margin-block-end: 0; }
#dashboard > .account-heading { margin-block-end: .75rem; }
#dashboard > .account-heading p { margin: 0; }
.api-site { --ln-e-raised: var(--ln-e-resting); }
.api-site .ln-btn { padding: .65rem 1rem; }
.api-site .ln-input { font-size: 1rem; }
.api-site :is(section[id], h2[id]) { scroll-margin-block-start: 6rem; }
.developer-packs > article { gap: .25rem; }
.developer-packs > article p:not(.pack-price) { color: var(--fg-muted); margin-block-end: 1.25rem; }
.account-nav { margin-block: -.5rem 1.75rem; }
.account-overview { gap: 2rem; margin-block-end: 2rem; }
.balance-panel h2 { font-size: 1rem; color: var(--fg-muted); }
.balance-panel .balance-breakdown { margin-block-start: 1rem; }
.balance-breakdown > div { padding-block: .3rem; }
.balance-panel > :last-child { margin-block-end: 0; }
.key-scopes { margin: 0; border-color: var(--line); padding: 1rem; font-size: .875rem; }
.key-scopes input { accent-color: var(--accent); width: 16px; height: 16px; }
.key-form > label { font-size: .875rem; font-weight: 600; }
.key-row .developer-actions { margin: 0; gap: .25rem; }
#keys > p, #passkeys > p, #purchases > p { margin: 0; color: var(--fg-muted); }
.api-site .docs-body .portal-notice { border: 0; background: none; box-shadow: none; padding: 0; margin-block-end: .75rem; }
.docs-body .portal-notice::before { display: none; }
.docs-body .developer-actions { align-items: center; font-size: .875rem; }
.docs-body .table-scroll { border: 1px solid var(--line); border-radius: var(--ln-r-sm); }
.docs-body :not(pre) > code { font-size: .875em; background: var(--well); padding: .1em .3em; border-radius: 4px; }
.status-component { padding-block: 1.5rem; margin: 0; border-block-end: 1px solid var(--line); }
.status-component h2 { margin: 0; }
.status-component > p:last-child { margin-block-end: 0; }
.status-component-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.status-component-heading p { margin: 0; font-size: .875rem; }
.status-overview > :last-child { margin-block-end: 0; }
.status-bars { gap: 3px; }
.status-day { height: 2rem; }
html[lang="ar"] .api-hero h1 { letter-spacing: normal; line-height: 1.45; }
/* Account shell: destinations stay in the sidebar; only the selected view is shown. */
.portal-wrap:has(#dashboard:not([hidden])) { max-width: 78rem; }
.api-site:has(#dashboard:not([hidden])) :is(.header-inner, .api-footer) { max-width: 78rem; }
.workspace-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 2.5rem; align-content: start; min-height: calc(100vh - 260px); }
.account-security .developer-actions:has(> #add-passkey[hidden]) { display: none; }
.workspace-sidebar { position: sticky; top: 5.5rem; align-self: start; min-height: 520px; display: flex; flex-direction: column; border-inline-end: 1px solid var(--line); padding-inline-end: 1.25rem; }
/* The shell owns its geometry even if an older design-system stylesheet is cached. */
.workspace-sidebar nav { display: grid; gap: 4px; }
.workspace-sidebar nav > a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; text-decoration: none; border-radius: 8px; color: var(--fg-muted); }
.workspace-sidebar nav > a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.workspace-identity { display: flex; gap: .75rem; align-items: center; margin-block: .25rem 2rem; min-width: 0; }
.workspace-identity > div { min-width: 0; }
.workspace-identity strong { font-size: .875rem; }
.workspace-identity p { margin: .1rem 0 0; font-size: .75rem; color: var(--fg-muted); overflow-wrap: anywhere; }
.workspace-avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 10px; color: var(--accent); background: var(--accent-soft); }
.workspace-sidebar-bottom { display: grid; gap: .5rem; margin-block-start: auto; padding-block-start: 3rem; }
.workspace-sidebar-bottom > a, .workspace-sidebar-bottom > button { justify-content: start; display: flex; align-items: center; gap: .75rem; padding: .65rem .75rem; font-size: .875rem; color: var(--fg-muted); text-decoration: none; }
.workspace-main { min-width: 0; }
.workspace-heading { border-block-end: 1px solid var(--line); padding-block: 0 1.5rem; margin-block-end: 1.75rem; }
.workspace-heading h2 { font-size: 1.75rem; letter-spacing: -.02em; margin: 0 0 .35rem; }
.workspace-heading p { margin: 0; font-size: .9375rem; color: var(--fg-muted); }
.workspace-main > section { padding: 0; }
.workspace-main [data-workspace-view="billing"] > section { padding-block: 1.5rem; border-block-end: 1px solid var(--line); }
.workspace-main [data-workspace-view="billing"] > section:first-child { padding-block-start: 0; }
.workspace-main section > h2:first-child { margin-block-start: 0; }
.workspace-main .account-overview { grid-template-columns: 1fr; gap: 1.5rem; }
.workspace-main .balance-panel { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; }
.workspace-main .balance-panel h2 { grid-column: 1; }
.workspace-main .balance-value { grid-column: 1; margin: 0; }
.workspace-main .balance-breakdown { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; }
.workspace-main .balance-panel > p.small { grid-column: 1 / -1; margin-block-start: 1rem; }
.workspace-next { margin-block-start: 2rem; border-block-start: 1px solid var(--line); padding-block-start: 1.5rem; }
.workspace-next h2 { margin-block-start: 0; }
.overview-plan > a { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; font-size: .9375rem; }
.current-subscription h2 { margin-block-start: 0; }
.workspace-next > a { display: flex; align-items: center; gap: .75rem; padding-block: .85rem; text-decoration: none; border-block-end: 1px solid var(--line); font-size: .9375rem; }
.workspace-next > a .ln-icon:last-child { margin-inline-start: auto; }
.workspace-main .key-form { padding: 1.25rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-band); }
.workspace-main .key-name-field { display: grid; gap: .5rem; width: 100%; max-width: 30rem; }
.key-name-field label { font-size: .9375rem; font-weight: 550; }
.workspace-main .pack-price { font-size: clamp(1.25rem, 2vw, 1.65rem); }
@media(max-width: 900px) {
  .workspace-shell { grid-template-columns: 180px minmax(0, 1fr); gap: 1.5rem; }
  .workspace-main .developer-packs { grid-template-columns: 1fr; }
}
@media(max-width: 700px) {
  .workspace-shell { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .workspace-sidebar { position: static; min-height: 0; padding: 0; border: 0; }
  .workspace-identity { margin-block: 0 1rem; }
  .workspace-sidebar .ln-sidebar-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem; }
  .workspace-sidebar .ln-sidebar-nav > a { flex-direction: column; justify-content: center; gap: .4rem; padding: .75rem .25rem; font-size: .75rem; }
  .workspace-sidebar-bottom { display: flex; justify-content: space-between; padding-block-start: .5rem; margin: 0; }
  .workspace-heading { padding-block-end: 1rem; margin-block-end: 1.25rem; }
  .workspace-main .balance-panel { grid-template-columns: 1fr; }
  .workspace-main .balance-breakdown { grid-column: 1; grid-row: auto; margin-block-start: 1rem; }
  .workspace-main .key-form { padding: 1rem; }
}
@media(max-width: 700px) { .developer-split, .developer-packs, .docs-layout { grid-template-columns: 1fr; gap: 1.5rem; } .docs-layout aside { display: none; } .developer-nav { gap: .75rem 1.25rem; } .key-form { align-items: stretch; flex-direction: column; } .key-row { align-items: start; } .page-developers .ln-surface { padding: 1.1rem; } }
@media(max-width: 700px) {
  .docs-layout aside { display: block; padding-block-end: 1rem; border-block-end: 1px solid var(--line); }
  .docs-layout aside nav { position: static; display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
  .account-heading { flex-wrap: wrap; }
  .key-row { flex-wrap: wrap; }
  .portal-section { padding-block-start: 1.5rem; }
  .api-footer { grid-template-columns: 1fr; gap: 1rem; }
  .api-footer > a { grid-column: 1; }
  .api-footer nav { gap: .5rem 1rem; }
  .api-hero { padding-block: 2.5rem; }
  .api-hero h1 { max-width: 18ch; }
  .account-nav { gap: .25rem 1.25rem; }
  .status-component-heading { align-items: start; }
}

/* The transcript is the visual focus: spoken Arabic and its timing together. */
.api-hero-copy .developer-actions { gap: 1.25rem; margin-block: 1.5rem 1rem; }
.hero-plan-note { max-width: 44ch; font-size: .8rem; }
.transcript-example { margin: 0; min-width: 0; padding: 1.5rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-band); }
.transcript-example figcaption { color: var(--fg-muted); font-size: .85rem; }
.transcript-sentence { margin: 2rem 0 .25rem; font-family: "SF Arabic", "Geeza Pro", Tahoma, sans-serif; font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.65; text-align: center; }
.transcript-translation { color: var(--fg-muted); text-align: center; font-size: .875rem; }
.timed-words { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; list-style: none; margin: 1.75rem 0 .75rem; padding: 0; }
.timed-words li { display: grid; gap: .65rem; justify-items: center; padding-block: .5rem .75rem; border-block-end: 2px solid var(--accent); min-width: 0; }
.timed-words li > span:first-child { font-family: "SF Arabic", "Geeza Pro", Tahoma, sans-serif; font-size: 1.5rem; }
.word-time { font-size: .7rem; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--accent); }
.example-note { font-size: .75rem; margin: 0; }
.example-json { margin-block-start: 1.5rem; border-block-start: 1px solid var(--line); }
.example-json summary { padding-block-start: .85rem; color: var(--accent); font-size: .85rem; cursor: pointer; }
.example-json pre { font-size: .75rem; margin-block-end: 0; }
.api-capabilities { padding-block-start: 0; }
.api-capabilities .wrap { padding-block-start: 2.5rem; }
.api-capabilities p, .api-practical p { color: var(--fg-muted); }
.api-capabilities a, .api-practical a { font-size: .9375rem; }
.benchmark-note { margin: 2rem 0 0; padding-block-start: 1.25rem; border-block-start: 1px solid var(--line); font-size: .85rem; max-width: 100%; }
.api-use-cases { padding-block-start: 1rem; }
.use-case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; margin-block-start: 1.75rem; }
.use-case-grid h3 { font-size: 1rem; margin-block-start: 0; }
.use-case-grid p { color: var(--fg-muted); font-size: .9375rem; margin: 0; }
.api-pricing .account-heading { align-items: start; gap: 2rem; }
.api-pricing .account-heading p { margin: .75rem 0 0; max-width: 54ch; color: var(--fg-muted); }
.api-pricing .currency-selector { margin-block-start: .15rem; }
.api-site .plan-option { background: var(--bg); }
.pricing-terms { max-width: 80ch; }
.topup-summary { margin-block-start: 2rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--line); }
.topup-summary h3 { margin-block-start: 0; font-size: 1rem; }
.topup-summary p { font-size: .9375rem; max-width: 74ch; margin: 0; color: var(--fg-muted); }
.faq-layout { display: grid; grid-template-columns: 1fr 1.6fr; gap: 4rem; }
.faq-layout h2 { margin-block-start: 0; }
.faq-layout > div > p { max-width: 28ch; font-size: .9375rem; }
.faq-list details { border-block-end: 1px solid var(--line); }
.faq-list details:first-child { border-block-start: 1px solid var(--line); }
.faq-list summary { padding-block: 1rem; cursor: pointer; font-weight: 550; font-size: .9375rem; }
.faq-list p { color: var(--fg-muted); font-size: .9375rem; margin-block: 0 1.25rem; max-width: 60ch; }
.api-closing { border-block-start: 1px solid var(--line); background: var(--bg-band); }
.api-closing .wrap { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.api-closing h2 { margin-block-start: 0; }
.api-closing p { max-width: 57ch; color: var(--fg-muted); font-size: .9375rem; margin: 0; }
.api-closing .ln-btn { flex-shrink: 0; }
.api-site .site-footer { padding-block: 2.5rem; border-block-start: 1px solid var(--line); }
.console-steps { padding-inline-start: 1.4rem; margin: 1.5rem 0 0; }
.console-steps li { padding-inline-start: .5rem; padding-block: .75rem; }
.console-steps li::marker { color: var(--fg-muted); font-size: .85rem; }
.console-steps a { font-size: .9375rem; text-decoration: none; }
.console-steps span { display: block; color: var(--fg-muted); font-size: .875rem; margin-block-start: .2rem; }
.docs-fields { margin-block: 1.5rem; }
.docs-fields > div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 1.5rem; padding-block: .85rem; border-block-end: 1px solid var(--line); font-size: .9375rem; }
.docs-fields dd { margin: 0; color: var(--fg-muted); }
@media (max-width: 700px) {
  .api-hero h1 { font-size: 2.35rem; }
  .api-hero .developer-split { gap: 2.5rem; }
  .api-hero-copy .developer-actions { gap: 1rem; }
  .transcript-example { padding: 1.15rem; }
  .transcript-sentence { margin-block-start: 1.25rem; }
  .timed-words { gap: .35rem; }
  .api-capabilities .wrap { padding-block-start: 1rem; }
  .api-capabilities .developer-split { gap: 2rem; }
  .use-case-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .api-use-cases { padding-block-start: 0; }
  .api-pricing .account-heading { gap: 1rem; }
  .faq-layout { grid-template-columns: 1fr; gap: 1rem; }
  .faq-layout > div > p { max-width: 100%; }
  .api-closing .wrap { flex-direction: column; align-items: start; gap: 1.25rem; }
  .api-site .site-footer { padding-block: 2rem; }
  .docs-fields > div { grid-template-columns: 1fr; gap: .5rem; }
  #auth-panel { margin-block: .5rem 2rem; }
}
html[lang="ar"] .api-hero h1 { font-size: clamp(2.1rem, 3.7vw, 2.9rem); }
html[lang="ar"] .word-time { font-family: ui-sans-serif, system-ui, sans-serif; }

/* Provider comparison: a shared zero baseline and a fixed 30% scale. */
.hero-benchmark { margin: 0; padding: 1.6rem 1.75rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.hero-benchmark h2 { margin: 0 0 .6rem; font-size: 1.4rem; letter-spacing: -.025em; }
.hero-benchmark figcaption p { margin: 0; color: var(--fg-muted); font-size: .8rem; line-height: 1.5; }
.hero-benchmark figcaption p span { display: block; }
.benchmark-bars { list-style: none; padding: 0; margin: 1.4rem 0; display: grid; gap: .9rem; }
.benchmark-bars li { margin: 0; padding: 0; }
.benchmark-row { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-block-end: .35rem; font-size: .8rem; }
.benchmark-row strong { font-size: .9rem; font-weight: 550; font-variant-numeric: tabular-nums; }
.benchmark-track { height: 7px; background: var(--bg-band); border-radius: 2px; overflow: hidden; }
.benchmark-track span { display: block; height: 100%; background: var(--fg-muted); opacity: .45; border-radius: 2px; }
.benchmark-ours .benchmark-row { color: var(--accent); font-weight: 650; }
.benchmark-ours .benchmark-row strong { font-weight: 700; }
.benchmark-ours .benchmark-track span { background: var(--accent); opacity: 1; }
.hero-benchmark .benchmark-caption { margin: 0; padding-block-start: 1rem; border-block-start: 1px solid var(--line); color: var(--fg-muted); font-size: .72rem; line-height: 1.6; }
.capability-example { max-width: 40rem; margin: 2.5rem auto 0; }
@media (max-width: 700px) { .hero-benchmark { padding: 1.25rem; } }

.benchmark-track .benchmark-bar-0 { width: 15.3333%; }
.benchmark-track .benchmark-bar-1 { width: 21.0000%; }
.benchmark-track .benchmark-bar-2 { width: 24.6667%; }
.benchmark-track .benchmark-bar-3 { width: 24.6667%; }
.benchmark-track .benchmark-bar-4 { width: 56.6667%; }
.benchmark-track .benchmark-bar-5 { width: 83.6667%; }