/* Shared type sizes for labels and supporting copy across viewport sizes. */
:root {
  --type-caption: 14px;
  --type-small: 15px;
  --type-copy: 16px;
}

/* Base minimum typography across all elements */
body, button, input, select, textarea {
  font-size: 14px;
}

/* Footers: 14px base reference */
.app-footer, .product-footer, .landing-footer {
  font-size: 14px !important;
  line-height: 1.65;
  color: var(--muted);
}
.footer-links, .landing-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
  gap: 12px 26px;
  font-size: 14px !important;
  color: var(--muted);
}
.app-footer a, .product-footer a, .landing-footer .footer-links a, .footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  max-width: 100%;
  font-size: 14px !important;
  overflow-wrap: anywhere;
}
.app-footer a:hover, .product-footer a:hover, .landing-footer a:hover, .footer-links a:hover {
  color: var(--text);
}
.landing-footer p, .footer-links span {
  font-size: 14px !important;
  color: var(--muted);
}

/* Main page topbar: logged-in account chip */
.topnav-account {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 43px;
  height: 43px;
  padding: 0 16px;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid var(--line-hi, rgba(255, 255, 255, 0.08)) !important;
  color: #eaeaec !important;
  text-decoration: none;
  font-size: 14.5px !important;
  box-sizing: border-box;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.topnav-account:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}
.topnav-account .avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px !important;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}
.topnav-account .user-email {
  font-size: 14.5px !important;
  color: #eaeaec !important;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Quickstart card & Base URL (Screenshot 1) */
.quickstart p {
  font-size: 14px !important;
  line-height: 1.6;
  color: #9d9daa !important;
  margin-bottom: 16px;
}
.quickstart .btn {
  font-size: 14px !important;
  min-height: 42px;
}
.base-url {
  padding: 8px 12px !important;
}
.base-url code, .app-shell .base-url code, .model-dialog .base-url code {
  font-size: 14px !important;
  font-family: var(--mono);
}

/* Documentation TOC & Code Blocks (Screenshots 2 & 3) */
.docs-toc h3 {
  font-size: 14px !important;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.8px;
  color: #9d9daa !important;
  margin-bottom: 14px;
}
.docs-toc a {
  font-size: 14px !important;
  line-height: 1.6;
  padding: 8px 0;
  color: #b0b0bc !important;
}
.docs-toc a:hover {
  color: #fff !important;
}
.doc-step {
  font-size: 14px !important;
  font-weight: 600;
  margin-right: 8px;
}
.code-head, .code-head span {
  font-size: 14px !important;
  font-weight: 500;
}
.code-box pre, .code-box pre code, pre code, code {
  font-size: 14px !important;
  line-height: 1.7;
}
.doc-content p {
  font-size: 15px !important;
  line-height: 1.8;
}
.doc-content code.inline {
  font-size: 14px !important;
}

/* Account Safety & Profile Settings (Screenshot 4) */
.account-safety p, .section-description {
  font-size: 14px !important;
  line-height: 1.7;
  color: #b0b0bc !important;
}
.account-safety-actions .btn {
  font-size: 14px !important;
  min-height: 42px;
}
.account-facts span {
  font-size: 14px !important;
  color: #9d9daa !important;
}
.account-facts strong {
  font-size: 24px !important;
}
.auth-recovery {
  font-size: 14px !important;
}

/* Topup Modal & Payment Methods (Screenshot 5) */
.modal-intro {
  font-size: 14px !important;
  line-height: 1.6;
  color: #9d9daa !important;
}
.btn-payment-method .pm-title {
  font-size: 15px !important;
  font-weight: 600;
}
.btn-payment-method .pm-subtitle {
  font-size: 14px !important;
  color: #a0a0ad !important;
  line-height: 1.4;
}
.topup-estimate {
  font-size: 14px !important;
  padding: 10px 14px;
}
.topup-estimate strong {
  font-size: 16px !important;
}
.topup-estimate small, #topup-rate-val {
  font-size: 14px !important;
  color: #a0a0ad !important;
}
.amount-choices button {
  font-size: 14px !important;
  font-weight: 500;
  min-height: 38px;
}
.auth-fineprint, .modal .auth-fineprint {
  font-size: 14px !important;
  color: #9d9daa !important;
  line-height: 1.6;
}
.auth-agreement, .auth-switch, .auth-switch button, .auth-tab, .payment-badge, .product-payments-label {
  font-size: 14px !important;
}
.auth-main-pane .auth-head h2 {
  font-size: 22px !important;
}
.auth-promo-title {
  font-size: 19px !important;
}
.auth-promo-desc, .auth-promo-card-text strong {
  font-size: 14px !important;
}
.auth-promo-card-text span, .auth-promo-foot {
  font-size: 13px !important;
}
.form-error {
  font-size: 14px !important;
}


/* Top Navigation, Breadcrumb, Balance, Currency Switcher */
.breadcrumb, .breadcrumb span, .crumb-brand, .crumb-slash {
  font-size: 14px !important;
}
.user-email, .app-shell .user-email {
  font-size: 14px !important;
}
.topbar-balance, .currency-toggle, .app-shell .topbar-balance, .app-shell .currency-toggle {
  font-size: 14px !important;
  height: 34px !important;
  min-height: 34px !important;
}
.topbar-balance span, .currency-toggle span {
  font-size: 14px !important;
}
.currency-option, .currency-option-code, .currency-option-symbol {
  font-size: 14px !important;
}

/* Sidebar Navigation & Controls */
.side-nav a, .app-shell .side-nav a {
  font-size: 14px !important;
}
.nav-group-label, .workspace-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #8b8b98 !important;
}
.sidebar-status, .side-promo p {
  font-size: 14px !important;
}
.sidebar-topup-btn {
  font-size: 13.5px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  white-space: nowrap !important;
}


/* Dashboard, Metrics, Charts */
.metric-top, .metric-top span, .metric-foot, .chart-bar label, .chart-empty, .panel-head p {
  font-size: 14px !important;
}
.status-label, .table-subtext, .pill, .panel-head .pill, .chat-toolbar .pill, .payment-method .pill, .model-heading .pill, .catalog-card .pill, .admin-status {
  font-size: 13.5px !important;
  line-height: 1.4;
}
.status-label {
  padding: 4px 10px;
  border-radius: 6px;
  font-family: var(--mono);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #ffffff16;
  background: #ffffff05;
  color: #d6d6df;
  white-space: nowrap;
}
.status-label svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.table-subtext {
  color: var(--muted);
  display: inline-block;
  margin-top: 3px;
  line-height: 1.4;
}
.eyebrow, .balance-panel .eyebrow {
  font-size: 13px !important;
  letter-spacing: 1.2px;
  font-weight: 600;
}

/* Tables, Pagination, Filters, Chips, Buttons */
table th, table td, th, td,
.retail-table th, .retail-table td,
.admin-table th, .admin-table td,
.admin-user-requests td, .admin-rate-table th, .admin-rate-table td {
  font-size: 14px !important;
}
table th small, table td small, td small, .retail-table small, .admin-user-requests td small {
  font-size: 13px !important;
}
.table-detail-link, .table-key-name, .pager span, .pager .btn, .filter-chip, .suggestions button,
.btn, .btn.small, .icon-btn, .page-header .btn, .nav-actions .btn, .app-topbar .btn {
  font-size: 14px !important;
}
.field label, .settings-panel .field label {
  font-size: 14px !important;
}
.field small, .app-content .field small {
  font-size: 14px !important;
  color: #9d9daa !important;
}
.field input, .field select, .field textarea,
.app-content .field input, .app-content .field select, .app-content .field textarea {
  font-size: 14px !important;
}
.page-header p {
  font-size: 14px !important;
}
.notice, .notice div, .notice p, .empty-state p, .empty-state .btn, .invoice-summary, #toast, .boot, .loading-inline {
  font-size: 14px !important;
}

/* Keys page */
.keys-summary, .key-card>code, .key-spend small, .key-expiry, .key-card>p, .finance-pagination {
  font-size: 14px !important;
}
.key-spend {
  font-size: 15px !important;
}

/* Chat & Playground */
.chat-toolbar, .chat-usage, .message-label, .composer-foot, .chat-access, .chat-advanced summary,
.settings-price, .settings-price>span, .settings-link, .chat-welcome p {
  font-size: 14px !important;
}
.settings-price strong {
  font-size: 14px !important;
}
.message-text {
  font-size: 15px !important;
  line-height: 1.8;
}

/* Models & Catalog */
.catalog-summary p, .catalog-summary span, .catalog-result-head, .catalog-result-head span,
.catalog-card-price, .catalog-card-price small, .model-type, .model-availability, .model-id code,
.detail-pricing span, .detail-note, .detail-status, .detail-list dt, .detail-list dd, .vendor-badge {
  font-size: 14px !important;
}

/* Connect page */
.connect-steps, .connect-steps li, .connect-steps li>span,
.connect-rate-heading h3, .connect-rate-heading a, .connect-rates dt,
.connect-rate-note, .connect-note, .connect-app small, .connect-meta, .connect-check,
.connect-token-settings summary, .connect-token-settings small, .connect-result,
.connect-preview pre, .connect-instructions p {
  font-size: 14px !important;
}

/* Admin Panel */
.admin-metric>div, .admin-metric>small,
.admin-tabs a, .admin-period button,
.admin-control strong, .admin-control small,
.admin-summary span, .admin-system-summary span,
.admin-table-note, .admin-footnote,
.admin-checks>div, .admin-checks small,
.admin-user-numbers span,
.admin-user-ledger div, .admin-user-ledger small,
.admin-user-link, .admin-billing-checks>div,
.admin-billing-checks dt, .admin-billing-checks dd {
  font-size: 14px !important;
}

/* Images & Video workspace & miscellaneous */
.image-specs span, .image-request-id, .image-price-list small, .image-price-list span,
.image-form-note, .image-upload-note, .image-reference-label, .image-reference-label small,
.image-result-note, .image-empty p, .image-progress, .image-reference-preview strong,
.image-reference-preview small, .image-reference-preview .btn,
.chat-history-open span, #chat-history-status, .vision-controls, .video-card>span,
.pricing-layout .budget-panel p, .budget-presets .filter-chip,
.pricing-caption span, .pricing-help, .pricing-footnote,
.help-shortcuts p, .help-questions p, .help-contact p, .help-links a {
  font-size: 14px !important;
}

@media(min-width:1101px) and (max-height:850px){
  .pricing-layout .budget-panel{padding:16px}
  .pricing-layout .field{margin-bottom:8px}
  .pricing-layout .budget-total{padding-top:12px}
  .app-content[data-page=pricing] .page-header{margin-bottom:16px}
}

@media(max-width:650px){
  .app-footer,.product-footer{gap:16px}
  .footer-links,.landing-footer .footer-links{justify-content:flex-start;gap:10px 18px}
  .app-footer a,.product-footer a,.landing-footer .footer-links a,.footer-links a{min-height:36px}
  .field input,.field select,.field textarea,
  .app-content .field input,.app-content .field select,.app-content .field textarea{font-size:14px !important}
  .app-shell .composer-foot{flex-wrap:wrap;gap:4px 12px}
  .topnav-account .user-email{display:none}
  .topnav-account{padding:4px}
}

/* Landing page readability & typography standards */
.product-landing .topnav .nav-links a {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #cfded8 !important;
}
.product-landing .topnav .nav-links a:hover {
  color: #ffffff !important;
}
.product-landing .topnav .topnav-account {
  font-size: 15px !important;
}
.product-landing .topnav .topnav-account .user-email {
  font-size: 15px !important;
}
.product-landing .topnav .btn {
  font-size: 15px !important;
  font-weight: 550 !important;
}
.product-landing .eyebrow {
  font-size: 13.5px !important;
  letter-spacing: 2px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}
.product-landing .product-hero h1 {
  font-size: clamp(36px, 4.1vw, 56px) !important;
  text-align: left !important;
  color: #ffffff !important;
  max-width: 620px !important;
}
.product-landing .product-hero h1 .hero-highlight {
  color: #9aefd2 !important;
}
.product-landing .product-hero-copy > p {
  font-size: 18px !important;
  line-height: 1.75 !important;
  color: #b9cbc4 !important;
  text-align: left !important;
}
.product-landing .product-hero-actions {
  justify-content: flex-start !important;
}
.product-landing .product-hero-actions .btn.big {
  font-size: 16px !important;
  font-weight: 600 !important;
}
.product-landing .product-benefits {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #a8bcb3 !important;
  justify-content: flex-start !important;
  gap: 24px !important;
  margin-top: 24px !important;
}
.product-landing .product-benefits > span {
  font-size: 15px !important;
  gap: 8px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #a8bcb3 !important;
}
.product-landing .product-benefits .icon {
  width: 16px !important;
  height: 16px !important;
  color: var(--accent) !important;
}
.product-landing .product-payments {
  justify-content: flex-start !important;
  gap: 16px !important;
  margin-top: 20px !important;
}
@media (max-width: 1100px) {
  .product-landing .product-hero h1 {
    text-align: center !important;
  }
  .product-landing .product-hero-copy > p {
    text-align: center !important;
  }
  .product-landing .product-hero-actions,
  .product-landing .product-benefits,
  .product-landing .product-payments {
    justify-content: center !important;
  }
}
.product-landing .product-payments-label {
  font-size: 14.5px !important;
  color: #7e958a !important;
  font-weight: 500 !important;
}
.product-landing .product-payments-badges {
  gap: 9px !important;
}
.product-landing .payment-badge {
  font-size: 14.5px !important;
  font-weight: 500 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #cddad4 !important;
  gap: 6px !important;
}
.product-landing .product-tools > span {
  font-size: 14.5px !important;
  color: #9bb0a7 !important;
  font-weight: 500 !important;
}
.product-landing .product-tools > div {
  font-size: 15.5px !important;
  color: #d2ded9 !important;
}
.product-landing .product-section h2,
.product-landing .product-callout h2,
.product-landing .budget-panel h2 {
  font-size: 32px !important;
}
.product-landing .product-section-head p {
  font-size: 16px !important;
  color: #a2b5ad !important;
}
.product-landing .retail-table th {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #a8bbb2 !important;
}
.product-landing .retail-table td {
  font-size: 15.5px !important;
}
.product-landing .retail-table td:first-child strong {
  font-size: 16px !important;
}
.product-landing .retail-table small {
  font-size: 13px !important;
  color: #92a89f !important;
}
.product-landing .retail-table .mono {
  font-size: 15.5px !important;
}
.product-landing .product-start article > span {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
}
.product-landing .product-start h3 {
  font-size: 20px !important;
  font-weight: 600 !important;
}
.product-landing .product-start p {
  font-size: 15.5px !important;
  line-height: 1.8 !important;
  color: #a6b9b1 !important;
}
.product-landing .reviews-slider .review-title {
  font-size: 18px !important;
  font-weight: 600 !important;
}
.product-landing .reviews-slider .review-text {
  font-size: 15.5px !important;
  line-height: 1.75 !important;
  color: #c4d4ce !important;
}
.product-landing .reviews-slider .review-author-info strong {
  font-size: 15.5px !important;
  font-weight: 600 !important;
}
.product-landing .reviews-slider .review-author-info small {
  font-size: 13.5px !important;
  color: #92a89f !important;
}
.product-landing .reviews-slider .review-score {
  font-size: 13.5px !important;
}
.product-landing .product-callout p {
  font-size: 16px !important;
  color: #b2c2bc !important;
}
.product-landing .product-faq summary {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #e4eee9 !important;
}
.product-landing .product-faq p {
  font-size: 15.5px !important;
  line-height: 1.8 !important;
  color: #b2c2bc !important;
}
.product-landing .product-footer {
  font-size: 14.5px !important;
}
.product-landing .product-footer span {
  font-size: 14.5px !important;
}

/* Calculator & Pricing Readability & Layout Polish */
.app-content[data-page=pricing] .retail-table {
  max-height: none !important;
  overflow: visible !important;
}
.pricing-layout .retail-table th {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #c5d5cf !important;
}
.pricing-layout .retail-table td {
  font-size: 15px !important;
  color: #cfded8 !important;
}
.pricing-layout .rate-model {
  font-size: 15.5px !important;
  font-weight: 600 !important;
}
.pricing-layout .table-model-text small {
  font-size: 14px !important;
  color: #98a2ad !important;
}
.pricing-layout .table-model-text .tier-badge {
  font-size: 13.5px !important;
  color: #a4afbc !important;
}
.pricing-layout .pricing-caption p,
.pricing-layout .pricing-subcaption p {
  font-size: 15px !important;
  color: #9da2af !important;
}
.pricing-layout .pricing-caption > span,
.pricing-layout .pricing-subcaption > span {
  font-size: 14.5px !important;
  color: #848997 !important;
}
.pricing-layout .budget-panel h2 {
  font-size: 22px !important;
}
.pricing-layout .budget-panel p {
  font-size: 14px !important;
}
.pricing-layout .field label {
  font-size: 13.5px !important;
  font-weight: 500 !important;
}