/* =========================================================
   AI Orbit Frontend UI Polish — readable, consistent, responsive
   Loaded after page-specific styles. Hero artwork is untouched.
   ========================================================= */
:root{
  --ui-panel:rgba(11,16,34,.92);
  --ui-panel-strong:#0d1429;
  --ui-line:rgba(120,139,194,.22);
  --ui-line-hover:rgba(126,103,255,.52);
  --ui-soft:#aab5d2;
  --ui-dim:#7f8ba9;
  --ui-focus:0 0 0 3px rgba(118,87,255,.20);
  --ui-card-shadow:0 16px 42px rgba(0,0,0,.20);
  --ui-card-shadow-hover:0 22px 52px rgba(0,0,0,.28);
}

html{font-size:16px}
body{font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
main{min-width:0}

/* Better universal text rhythm without changing page identity */
p{line-height:1.65}
button,input,select,textarea{font-size:13px}
input,select,textarea{min-height:42px}
button,a{touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:var(--ui-focus)}
::selection{background:rgba(118,87,255,.38);color:#fff}

/* Navigation: keep compact, but no micro text */
.brand small{font-size:12px;line-height:1.25}
.main-nav a,.signin-btn{font-size:12px}
.mobile-nav a{font-size:14px}

/* Shared content surfaces */
.panel,.side-card,.sidebar-card,.detail-block,.detail-panel,.pi-panel,.lab-side-card,.company-block,.inst-panel,.inst-side-card,
.search-entity-card,.expansion-panel,.content-card,.result-card,.intel-card{
  box-shadow:var(--ui-card-shadow);
}
.panel,.side-card,.sidebar-card,.detail-block,.detail-panel,.pi-panel,.lab-side-card,.company-block,.inst-panel,.inst-side-card,
.search-entity-card,.expansion-panel,.content-card,.result-card,.intel-card,
.tool-card,.model-card,.company-card,.review-card,.article-card,.news-card{
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease,background-color .2s ease;
}
@media (hover:hover){
  .tool-card:hover,.model-card:hover,.company-card:hover,.review-card:hover,.article-card:hover,.search-entity-card:hover{
    border-color:var(--ui-line-hover);transform:translateY(-2px);box-shadow:var(--ui-card-shadow-hover)
  }
}

/* Shared headings: improve hierarchy across every non-home frontend page */
.section-heading h2,.side-title h2,.section-heading-row h2,.detail-section-head h2,.intel-section-head h2,.news-section-head h2,
.company-block-head h2,.pi-panel-title h2,.block-heading h2,.result-section h2{letter-spacing:-.018em}
.section-heading p,.section-heading-row p,.detail-section-head p,.intel-section-head p,.news-section-head p,.company-block-head p,
.block-intro,.detail-lead{color:var(--ui-soft)}
.section-kicker,.section-eyebrow,.intel-kicker,.company-kicker,.comparison-kicker,.saved-kicker,.inst-eyebrow,.side-kicker{
  letter-spacing:.09em;font-weight:800
}

/* Buttons and actions: consistent click targets */
.primary-btn,.secondary-btn,.primary-pill,.primary-action,.detail-secondary-btn,.inst-btn,.pi-btn,.lab-btn,
.card-actions a,.card-actions button,.model-detail-actions a,.tool-detail-actions a,.company-actions a,
.content-actions a,.content-actions button{
  min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:7px;line-height:1.2
}
.primary-btn,.primary-pill,.primary-action{box-shadow:0 8px 22px rgba(94,55,255,.22)}

/* Forms / filters */
.filter-group label,.content-filter-group label,.mf-group label{line-height:1.35}
.filter-options label{min-height:30px;display:flex;align-items:center;gap:8px}
input[type="checkbox"],input[type="radio"]{min-height:0}
select,input[type="text"],input[type="search"],input[type="email"],textarea{
  border-radius:10px
}

/* Data-rich UI: give numbers and labels breathing room */
.detail-metrics>div,.model-specs>div,.tool-specs>div,.company-stats>div,.pi-stats>div,.lab-stats>div{min-width:0}
.detail-metrics span,.detail-metrics small,.model-specs span,.model-specs small,.tool-specs span,.tool-specs small,
.company-stats span,.pi-stats span,.lab-stats span{line-height:1.35}
.badge,.status-pill,.verified-pill,[class*="badge"],[class*="pill"]{line-height:1.2}

/* Tables / benchmark / comparison readability */
table{font-size:12px}
th{font-size:12px;letter-spacing:.055em;line-height:1.3}
td{line-height:1.5}
th,td{padding-top:11px;padding-bottom:11px}

/* Sidebar readability */
.sidebar-title,.side-label{line-height:1.3}
.sidebar-card p,.side-card p{line-height:1.6}

/* Article/news body text should feel editorial, not dashboard-micro */
.article-body p,.news-body p,.article-content p,.news-content p,.inst-content p,.institutional-content p{
  font-size:14px;line-height:1.8
}
.article-body li,.news-body li,.article-content li,.news-content li,.inst-content li,.institutional-content li{
  line-height:1.7
}

/* Better responsive content width and gutters */
@media(max-width:1100px){
  .page-body{padding-left:20px;padding-right:20px}
}
@media(max-width:760px){
  body{font-size:14px}
  .page-body{padding-left:14px;padding-right:14px;padding-bottom:38px}
  .panel,.detail-block,.detail-panel,.side-card,.sidebar-card,.pi-panel,.company-block,.inst-panel{border-radius:14px}
  .section-heading,.section-heading-row,.detail-section-head,.intel-section-head,.news-section-head,.company-block-head{gap:10px}
  .section-heading h2,.side-title h2{font-size:18px}
  .section-heading p{font-size:12px}
  button,input,select,textarea{font-size:13px}
  .primary-btn,.secondary-btn,.primary-pill,.primary-action,.detail-secondary-btn,.inst-btn{min-height:42px}
  .filter-options label{min-height:34px}
  table{font-size:12px}
}
@media(max-width:430px){
  .page-body{padding-left:12px;padding-right:12px}
  .section-heading{padding-left:14px;padding-right:14px}
}

/* Accessibility / motion */
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* =========================================================
   2026-08 frontend audit pass — layout resilience + premium UI
   ========================================================= */

/* Prevent accidental horizontal overflow from dense data pages. */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video{max-width:100%}
img{height:auto}
.site-shell,main,.page-body,[class*="container"],[class*="layout"],[class*="grid"]{min-width:0}

/* Stronger readable baseline. */
body{font-size:14px;line-height:1.6}
small{font-size:12px}
label{font-size:12px}
input,select,textarea,button{font-size:13px}

/* Header: keep navigation usable instead of squeezing labels. */
.topbar{min-width:0}
.main-nav{min-width:0}
.main-nav a{min-height:40px;font-size:12px;font-weight:600}
.nav-actions{flex:0 0 auto}
.mobile-nav{max-height:calc(100dvh - 76px);overflow-y:auto;overscroll-behavior:contain;box-shadow:0 20px 45px rgba(0,0,0,.35)}
.mobile-nav a{min-height:42px;display:flex;align-items:center;font-size:13px;border:1px solid rgba(117,135,190,.13)}

/* Card and content rhythm across all discovery/detail pages. */
.tool-card,.model-card,.company-card,.review-card,.article-card,.news-card,
.search-entity-card,.result-card,.content-card,.featured-tool-mini,.intel-card,
.detail-block,.detail-panel,.company-block,.pi-panel,.lab-side-card,.sidebar-card,.side-card{
  min-width:0;
}
.tool-card h3,.model-card h3,.company-card h3,.review-card h3,.article-card h3,.news-card h3{
  line-height:1.3;
}
.tool-card p,.model-card p,.company-card p,.review-card p,.article-card p,.news-card p{
  line-height:1.6;
}

/* Metadata remains compact without becoming unreadable. */
[class*="meta"],[class*="eyebrow"],[class*="kicker"],[class*="label"],[class*="badge"],[class*="pill"],
[class*="provider"],[class*="version"],[class*="status"]{
  text-rendering:optimizeLegibility;
}

/* Better section hierarchy without redesigning individual pages. */
.section-heading h2,.section-heading-row h2,.detail-section-head h2,.intel-section-head h2,
.news-section-head h2,.company-block-head h2,.pi-panel-title h2,.result-section h2{
  font-size:clamp(17px,1.35vw,22px);
  line-height:1.25;
}
.section-heading p,.section-heading-row p,.detail-section-head p,.intel-section-head p,
.news-section-head p,.company-block-head p{font-size:12.5px;line-height:1.6}

/* Buttons: coherent sizing and no clipped labels. */
button,a[class*="btn"],[class*="button"],[class*="action"]{
  -webkit-tap-highlight-color:transparent;
}
.primary-btn,.secondary-btn,.primary-pill,.primary-action,.detail-secondary-btn,.inst-btn,.pi-btn,.lab-btn,
.card-actions a,.card-actions button,.model-detail-actions a,.tool-detail-actions a,.company-actions a,
.content-actions a,.content-actions button{
  min-height:40px;padding-top:9px;padding-bottom:9px;white-space:normal;
}

/* Form controls and search/filter controls. */
input,select,textarea{max-width:100%}
input[type="text"],input[type="search"],input[type="email"],input[type="url"],input[type="number"],select,textarea{
  min-height:42px;
}
textarea{line-height:1.55}
.filter-options label,.content-filter-group label,.mf-group label{font-size:12px}

/* Tables / comparison / benchmark pages: scroll instead of breaking viewport. */
.table-wrap,.comparison-table-wrap,.benchmark-table-wrap,.pricing-table-wrap,.data-table-wrap,
[class*="table-container"],[class*="table-scroll"]{
  max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
}
table{min-width:640px}
th,td{font-size:12px;vertical-align:middle}
th{white-space:nowrap}

/* Long titles, URLs and generated data should wrap safely. */
.detail-title-row h1,.company-title h1,.article-title,.news-title,.result-title,
.tool-title h3,.model-title h3,.company-card h3{
  overflow-wrap:anywhere;
}
a{overflow-wrap:anywhere}

/* Sidebars remain useful on medium screens and never squeeze main content. */
.sidebar-column,.detail-sidebar,[class*="sidebar"]{min-width:0}

/* Image presentation consistency. */
.tool-logo,.model-logo,.company-logo,[class*="avatar"],[class*="logo"] img{object-fit:cover}
.tool-cover img,.article-card img,.news-card img,[class*="cover"] img,[class*="thumb"] img{object-fit:cover}

/* Visible keyboard focus, but only when keyboard navigation is used. */
:focus-visible{outline:2px solid rgba(133,114,255,.92);outline-offset:2px}

/* Medium desktop: switch to menu before the 10-item nav gets cramped. */
@media(max-width:1240px){
  .main-nav{display:none}
  .menu-btn{display:grid}
  .topbar{justify-content:space-between}
  .nav-actions{margin-left:auto}
  .mobile-nav.open{display:flex;position:fixed;top:76px;left:0;right:0;z-index:45;background:rgba(8,12,29,.98);border-bottom:1px solid #253050;padding:14px 20px;gap:9px;flex-wrap:wrap;backdrop-filter:blur(18px)}
}

/* Tablet: remove cramped multi-column information layouts. */
@media(max-width:900px){
  .page-body{padding-left:18px;padding-right:18px}
  .detail-layout,.company-detail-layout,.article-layout,.news-detail-layout,.pricing-detail-layout,
  .review-detail-layout,.lab-detail-layout{grid-template-columns:1fr!important}
  .detail-sidebar,.sidebar-column{position:static!important;width:auto!important}
  table{min-width:600px}
}

/* Mobile: comfortable gutters, touch targets and stacking. */
@media(max-width:760px){
  .mobile-nav{max-height:calc(100dvh - 66px)}
  .mobile-nav.open{top:66px;padding:12px 14px}
  .mobile-nav a{flex:1 1 calc(50% - 8px);justify-content:center;text-align:center}
  .page-body{padding:14px 14px 42px}
  .section-heading,.section-heading-row,.detail-section-head,.intel-section-head,.news-section-head,.company-block-head{
    align-items:flex-start;flex-wrap:wrap;
  }
  .section-heading h2,.section-heading-row h2,.detail-section-head h2,.intel-section-head h2,
  .news-section-head h2,.company-block-head h2{font-size:18px}
  input,select,textarea,button{font-size:14px}
  input[type="text"],input[type="search"],input[type="email"],input[type="url"],input[type="number"],select{min-height:44px}
  .primary-btn,.secondary-btn,.primary-pill,.primary-action,.detail-secondary-btn,.inst-btn,.pi-btn,.lab-btn,
  .card-actions a,.card-actions button{min-height:44px}
  table{min-width:560px}
}

@media(max-width:480px){
  .topbar{padding-left:12px;padding-right:12px;gap:10px}
  .nav-actions{gap:6px}
  .icon-btn,.menu-btn{width:38px;height:38px}
  .mobile-nav a{flex-basis:100%}
  .page-body{padding-left:12px;padding-right:12px}
  .section-heading,.section-heading-row{padding-left:12px;padding-right:12px}
  .card-actions{grid-template-columns:1fr!important}
  table{min-width:520px}
}

/* SEO knowledge FAQ */
.seo-faq-list{display:grid;gap:10px;margin-top:18px}
.seo-faq-list details{border:1px solid rgba(148,163,184,.18);border-radius:12px;background:rgba(15,23,42,.32);padding:0 16px}
.seo-faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;font-weight:700;padding:15px 0}
.seo-faq-list summary::-webkit-details-marker{display:none}
.seo-faq-list summary svg{width:16px;height:16px;flex:0 0 auto}
.seo-faq-list details[open] summary svg{transform:rotate(180deg)}
.seo-faq-list details p{margin:0;padding:0 0 15px;color:var(--text-muted,#94a3b8);line-height:1.7}

/* AI Orbit brand assets */
.brand-orbit-mark{overflow:hidden;padding:0;background:#050817;border-color:rgba(86,92,255,.55)}
.brand-orbit-mark img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.08)}
.footer-logo .brand-orbit-mark{box-shadow:0 0 28px rgba(84,73,255,.28)}