/* ═══════════════════════════════════════════════════════════
   TELOS — SHARED CHROME (topbar + menu + footer)
   Single source of truth for elements present on every public
   page. Used by includes/topbar.php and includes/footer.php.
   Loaded BEFORE redesign-2026.css so page-specific CSS can win.

   ─── DESIGN TOKENS ─────────────────────────────────────────
   Every new public page should use these vars. Page-specific
   CSS can still override per-element if needed. Centralising
   them here means we can re-skin the whole site by changing
   one file.
   ─────────────────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg-void: #050505;
  --bg-deep: #020202;

  /* Brand */
  --accent: #00f2ff;
  --c-pur:  #d900ff;
  --c-hit:  #00ff88;
  --c-miss: #ff4466;
  --c-warn: #ffaa00;

  /* Surfaces */
  --glass-surf:   rgba(20, 20, 25, 0.62);
  --glass-border: rgba(255, 255, 255, 0.08);

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 22px;

  /* Motion */
  --transition: .22s cubic-bezier(.4, 0, .2, 1);
}

/* ═══════════════════════════════════════════════════════════
   PAGE HERO — canonical pattern used by about / pricing /
   careers / changelog / contact / docs / support / tutorials
   / and the newer pages. Previously each page copy-pasted
   its own version, leading to subtle drift.
   ─────────────────────────────────────────────────────────── */
@keyframes telosFadeSlideIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes telosScanline {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
/* Aliases so legacy inline page CSS that references unprefixed names
   keeps working even if we ever drop the per-page copies. */
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes scanline {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.page-hero {
  text-align: center;
  padding: 70px 0 90px;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  margin-bottom: 90px;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  /* Run 3 times on page load then stop — was 'infinite' which kept the
     GPU painting forever and drained mobile batteries on long-read pages. */
  animation: telosScanline 4s linear 3;
  opacity: .3;
}
@media (prefers-reduced-motion: reduce) {
  .page-hero::before { animation: none; }
}
.ph-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(0, 242, 255, .07);
  border: 1px solid rgba(0, 242, 255, .22);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin-bottom: 28px;
  animation: telosFadeSlideIn .5s .1s both;
}
.ph-title {
  font-family: 'Titillium Web', sans-serif;
  font-weight: 900;
  font-size: clamp(52px, 9vw, 100px);
  letter-spacing: 5px;
  color: #fff;
  line-height: .88;
  margin-bottom: 0;
  animation: telosFadeSlideIn .7s .2s both;
}
.ph-title .acc {
  color: var(--accent);
  text-shadow: 0 0 40px rgba(0, 242, 255, .45);
}
.ph-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 8px;
  margin: 22px 0 26px;
  opacity: .75;
  animation: telosFadeSlideIn .6s .4s both;
}
.ph-desc {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.9;
  color: rgba(255, 255, 255, .35);
  max-width: 540px;
  margin: 0 auto;
  animation: telosFadeSlideIn .6s .5s both;
}
@media (max-width: 768px) {
  .page-hero { padding: 50px 0 60px; margin-bottom: 60px; }
  .ph-title { font-size: clamp(40px, 12vw, 64px); letter-spacing: 3px; }
  .ph-sub { letter-spacing: 5px; }
  .ph-desc { font-size: 14px; line-height: 1.7; padding: 0 18px; }
}

/* ─── Topbar baseline (kept tight; pages can override) ─────── */
.top-bar{
  position:fixed;top:0;left:0;right:0;z-index:9995;
  height:66px;padding:0 20px;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(3,3,11,.97);
  -webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);
  border-bottom:1px solid rgba(0,242,255,.35);
  gap:14px;
}
.brand-title{
  display:flex;align-items:center;gap:8px;
  font-family:'Titillium Web',sans-serif;font-weight:900;
  letter-spacing:2px;font-size:16px;white-space:nowrap;color:#fff;
}
.brand-title img{height:26px;width:auto;}
.brand-sub{font-weight:400;opacity:.4;font-size:.75em;margin-left:2px;}
.nav-links{display:flex;gap:20px;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1px;}
.nav-links a{color:#555;transition:color .22s;text-decoration:none;}
.nav-links a:hover{color:#fff;}
.nav-right{display:flex;align-items:center;gap:8px;}
.tb-countdown{display:flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:9px;color:#555;text-transform:uppercase;letter-spacing:1px;}
.tb-countdown .sep{color:#222;}
.cd-num{color:#fff;font-size:11px;font-weight:700;background:rgba(0,242,255,.12);padding:2px 5px;border-radius:4px;min-width:20px;text-align:center;display:inline-block;}
.cd-lbl{color:var(--accent,#00f2ff);font-size:8px;}
.pulse-dot{width:6px;height:6px;border-radius:50%;animation:tbPulse 1.5s infinite;}
@keyframes tbPulse{0%,100%{opacity:1}50%{opacity:.25}}

/* Hamburger button */
.hamburger-btn{
  width:34px;height:34px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;cursor:pointer;border-radius:8px;
  background:rgba(0,242,255,.06);border:1px solid rgba(0,242,255,.15);transition:all .22s;
}
.hamburger-btn:hover{background:rgba(0,242,255,.12);border-color:rgba(0,242,255,.35);}
.hamburger-btn span{width:16px;height:1.5px;background:var(--accent,#00f2ff);border-radius:2px;transition:all .3s cubic-bezier(.22,1,.36,1);transform-origin:center;display:block;}
.hamburger-btn.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.hamburger-btn.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.hamburger-btn.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* ─── FULLSCREEN MENU (hidden by default — critical) ─────── */
.menu-fullscreen{
  position:fixed;inset:0;z-index:9990;
  opacity:0;visibility:hidden;
  transition:opacity .4s cubic-bezier(.4,0,.2,1),visibility .4s;
}
.menu-fullscreen.active{opacity:1;visibility:visible;}
.menu-backdrop{
  position:absolute;inset:0;
  background:rgba(2,2,6,.96);
  -webkit-backdrop-filter:blur(32px);backdrop-filter:blur(32px);
}
.menu-backdrop::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(0,242,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(0,242,255,.018) 1px,transparent 1px);
  background-size:80px 80px;
}
.menu-wrapper{
  position:relative;width:100%;height:100%;
  max-width:1400px;margin:0 auto;padding:0 80px 60px;
  display:flex;flex-direction:column;overflow-y:auto;
}
.menu-top{height:66px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(0,242,255,.1);margin-bottom:48px;}
.menu-logo{display:flex;align-items:center;gap:10px;font-family:'Titillium Web',sans-serif;font-size:17px;font-weight:900;color:#fff;letter-spacing:2px;text-decoration:none;}
.menu-logo img{height:24px;}
.menu-logo .acc{color:var(--accent,#00f2ff);}
.menu-close-btn{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .25s;
}
.menu-close-btn:hover{background:rgba(0,242,255,.1);border-color:rgba(0,242,255,.4);transform:rotate(90deg);}
.menu-close-btn i{font-size:20px;color:rgba(255,255,255,.7);}

/* 4 cols now: Platform · F1 Data · Resources · Company */
.menu-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:0;flex:1;padding-bottom:40px;align-content:start;}
.menu-col{display:flex;flex-direction:column;gap:2px;padding-right:60px;border-right:1px solid rgba(255,255,255,.04);}
.menu-col:last-child{border-right:none;padding-right:0;}
.menu-col:not(:first-child){padding-left:60px;}
.col-title{font-family:'JetBrains Mono',monospace;font-size:8px;font-weight:700;color:rgba(0,242,255,.5);text-transform:uppercase;letter-spacing:4px;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.06);}
.mlink{display:flex;align-items:center;gap:16px;padding:14px 16px;border-radius:12px;background:transparent;border:1px solid transparent;transition:all .18s cubic-bezier(.22,1,.36,1);text-decoration:none;}
.mlink:hover{background:rgba(0,242,255,.04);border-color:rgba(0,242,255,.12);transform:translateX(6px);}
.mlink-icon{width:40px;height:40px;border-radius:10px;flex-shrink:0;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;transition:all .18s;}
.mlink:hover .mlink-icon{border-color:rgba(0,242,255,.2);}
.mlink-icon i{font-size:18px;color:rgba(255,255,255,.3);transition:color .18s;}
.mlink:hover .mlink-icon i{color:var(--accent,#00f2ff);}
.mlink-name{font-family:'Titillium Web',sans-serif;font-size:15px;font-weight:700;color:#fff;letter-spacing:.4px;}
.mlink-desc{font-family:'JetBrains Mono',monospace;font-size:9px;color:rgba(255,255,255,.3);letter-spacing:1px;text-transform:uppercase;margin-top:2px;}
.menu-footer{display:flex;align-items:center;justify-content:space-between;padding-top:24px;border-top:1px solid rgba(255,255,255,.05);flex-shrink:0;}
.menu-footer-left{font-family:'JetBrains Mono',monospace;font-size:9px;color:rgba(255,255,255,.3);letter-spacing:1.5px;text-transform:uppercase;}
.menu-footer-cta{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:10px;background:rgba(0,242,255,.08);border:1px solid rgba(0,242,255,.3);color:var(--accent,#00f2ff);font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;text-decoration:none;transition:all .2s;}
.menu-footer-cta:hover{background:rgba(0,242,255,.15);box-shadow:0 0 24px rgba(0,242,255,.3);}

@media(max-width:768px){
  .menu-wrapper{padding:0 24px 40px;}
  .menu-cols{grid-template-columns:1fr;gap:18px;}
  .menu-col{padding:0 0 18px 0!important;border-right:none;border-bottom:1px solid rgba(255,255,255,.05);}
  .menu-col:last-child{border-bottom:none;}
  .menu-top{height:56px;margin-bottom:24px;}
  .top-bar{height:58px;padding:0 16px;}
}

/* ─── Auth button + dropdown (was inline in index) ─────── */
#auth-btn{
  font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  padding:8px 18px;border-radius:8px;
  background:transparent;color:var(--accent,#00f2ff);
  border:1px solid rgba(0,242,255,.45);
  box-shadow:0 0 12px rgba(0,242,255,.18);
  transition:all .22s;display:flex;align-items:center;gap:6px;
  cursor:pointer;position:relative;white-space:nowrap;
}
#auth-btn:hover{background:rgba(0,242,255,.08);box-shadow:0 0 24px rgba(0,242,255,.4);}
#auth-btn.logged{background:rgba(0,242,255,.1);border-color:rgba(0,242,255,.35);}
#user-dropdown{
  position:absolute;top:calc(100% + 10px);right:0;min-width:230px;
  background:rgba(6,6,14,.98);border:1px solid rgba(0,242,255,.16);border-radius:14px;padding:8px;
  box-shadow:0 20px 60px rgba(0,0,0,.8),0 0 0 1px rgba(0,242,255,.05);
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  z-index:99999;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .22s ease,visibility .22s,transform .22s ease;pointer-events:none;
}
#user-dropdown.open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:all;}
.udrop-header{display:flex;align-items:center;gap:12px;padding:10px 12px 12px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:6px;}
#user-avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;background:rgba(0,242,255,.12);border:1px solid rgba(0,242,255,.28);display:flex;align-items:center;justify-content:center;font-size:18px;overflow:hidden;}
#user-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
#user-name{font-family:'Titillium Web',sans-serif;font-weight:700;font-size:14px;color:#fff;line-height:1.2;}
#user-email{font-family:'JetBrains Mono',monospace;font-size:9px;color:rgba(255,255,255,.35);margin-top:3px;}
#user-dropdown a{display:flex;align-items:center;gap:10px;padding:9px 12px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;color:rgba(255,255,255,.6);text-decoration:none;border-radius:8px;transition:all .15s;letter-spacing:.5px;}
#user-dropdown a:hover{background:rgba(0,242,255,.07);color:#fff;}
#user-dropdown a.udrop-logout,#user-dropdown a.udrop-logout:hover{color:#ff5555;}
#user-dropdown a.udrop-logout:hover{background:rgba(255,50,50,.08);}
#user-dropdown a i{font-size:15px;color:var(--accent,#00f2ff);}
#user-dropdown a.udrop-logout i{color:#ff5555;}
.udrop-sep{height:1px;background:rgba(255,255,255,.06);margin:4px 0;}

/* Active nav link — underline rendered absolutely so it never affects
   the inline flex flow of nav-links (avoids layout shift on mobile). */
.nav-links a.is-active{color:#fff;position:relative;}
.nav-links a.is-active::after{content:'';position:absolute;left:0;right:0;bottom:-6px;margin:auto;height:2px;width:14px;background:var(--accent,#00f2ff);border-radius:2px;box-shadow:0 0 8px rgba(0,242,255,.6);}

/* ─── Unified site footer ──────────────────────────────── */
footer.site-footer{padding:70px 40px 40px;border-top:1px solid rgba(255,255,255,.06);background:#010101;position:relative;z-index:10;}
/* 5-col grid: brand (wider) + 4 link cols (Platform / Live Data / Resources / Company) */
footer.site-footer .footer-inner{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:40px;}
footer.site-footer .footer-brand{display:flex;flex-direction:column;gap:14px;}
footer.site-footer .footer-logo{display:flex;align-items:center;gap:10px;font-family:'Titillium Web',sans-serif;font-size:22px;font-weight:900;color:#fff;}
footer.site-footer .footer-logo img{height:22px;}
footer.site-footer .footer-logo .brand-sub{font-size:.52em;opacity:.3;font-weight:400;margin-left:4px;}
footer.site-footer .footer-desc{font-size:12px;color:#666;max-width:300px;line-height:1.8;font-family:'JetBrains Mono',monospace;}
footer.site-footer .sub-box{display:flex;gap:8px;margin-top:8px;max-width:320px;}
footer.site-footer .sub-input{flex:1;min-width:0;padding:10px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);color:#fff;font-family:'JetBrains Mono',monospace;font-size:11px;outline:none;transition:border-color .2s;}
footer.site-footer .sub-input:focus{border-color:rgba(0,242,255,.5);}
footer.site-footer .sub-btn{padding:10px 14px;border-radius:8px;border:1px solid var(--accent,#00f2ff);background:var(--accent,#00f2ff);color:#000;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:800;letter-spacing:1.5px;cursor:pointer;transition:all .2s;white-space:nowrap;}
footer.site-footer .sub-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,242,255,.35);}
footer.site-footer .footer-socials{display:flex;gap:14px;margin-top:6px;}
footer.site-footer .footer-socials a{color:#555;font-size:20px;line-height:1;text-decoration:none;transition:color .2s;}
footer.site-footer .footer-socials a:hover{color:var(--accent,#00f2ff);}
footer.site-footer .footer-col{display:flex;flex-direction:column;gap:10px;}
footer.site-footer .footer-col-title{font-family:'JetBrains Mono',monospace;font-size:8px;color:var(--accent,#00f2ff);text-transform:uppercase;letter-spacing:2px;margin-bottom:4px;}
footer.site-footer .footer-col a{font-size:12px;color:#666;text-decoration:none;transition:color .2s;font-family:'JetBrains Mono',monospace;}
footer.site-footer .footer-col a:hover{color:#fff;}
footer.site-footer .footer-bottom{max-width:1300px;margin:44px auto 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;align-items:center;font-family:'JetBrains Mono',monospace;font-size:9px;color:#444;flex-wrap:wrap;gap:8px;}
footer.site-footer .status-dot{width:5px;height:5px;border-radius:50%;background:#00ff88;box-shadow:0 0 6px #00ff88;display:inline-block;}

/* ─── Mobile-first responsive chrome ───────────────────── */
@media(max-width:1100px){
  /* Tablet: brand on top, 4 link cols below in 2x2 */
  footer.site-footer .footer-inner{grid-template-columns:1fr 1fr;gap:36px;}
  footer.site-footer .footer-brand{grid-column:1/-1;}
}
@media(max-width:640px){
  /* Phone: everything stacks */
  footer.site-footer{padding:50px 22px 30px;}
  footer.site-footer .footer-inner{grid-template-columns:1fr;gap:26px;}
}
@media(max-width:768px){
  /* Safe-area insets for notched phones (iPhone X+, Pixel) */
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .top-bar { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }

  /* Keep the user's first name visible on mobile — was hidden before but
     users want to see they're signed in without opening the dropdown. */
  #auth-btn{padding:9px 14px;font-size:10px;min-height:40px;display:inline-flex;align-items:center;}
  #auth-btn .auth-label-text{display:inline-block;max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

  /* Dropdown becomes near-full-width sheet on phone */
  #user-dropdown{
    left:12px !important;right:12px !important;
    width:auto !important;min-width:0 !important;max-width:none !important;
    top:62px !important;
  }
  #user-dropdown a{padding:13px 14px !important;font-size:12px !important;min-height:44px;}

  /* Tappable countdown chip */
  .tb-countdown { padding: 8px 12px !important; }

  /* Bigger menu close button + nav login button */
  .nav-login { min-height: 40px; padding: 10px 16px !important; }
  .tb-countdown .cd-lbl,.tb-countdown .sep{display:none;}
  .tb-countdown{font-size:8px;gap:3px;}
  footer.site-footer{padding:50px 20px 30px;}
  footer.site-footer .footer-inner{grid-template-columns:1fr;gap:32px;}
  footer.site-footer .footer-bottom{flex-direction:column;gap:8px;text-align:center;}
  footer.site-footer .sub-box{max-width:100%;}
}
@media(max-width:480px){
  footer.site-footer{padding:40px 16px 24px;}
  footer.site-footer .footer-logo{font-size:18px;}
  .nav-links{display:none;}
}

/* Universal mobile guards — body only (NEVER html: that breaks smooth
   scroll, sticky positioning, and scroll-driven animations like the
   index tablet 3D rotation). overflow-x:clip is the modern, scroll-safe
   alternative to overflow-x:hidden. */
body{overflow-x:clip;}
img,video,iframe{max-width:100%;height:auto;}

/* ── Universal mobile guards (additional) ───────────────────────────
   Site-wide defaults so every public page + /onboarding + /accuracy
   + /share-* + /share-compare inherit consistent mobile behaviour. */

/* Long URLs / acronyms / mono text can blow out narrow viewports. */
p,h1,h2,h3,h4,li,td{overflow-wrap:break-word;word-wrap:break-word}
code,pre{overflow-wrap:break-word;word-break:break-word}

/* iOS gray tap-flash kill. */
a,button{-webkit-tap-highlight-color:transparent}

/* iOS landscape: prevent text auto-scaling. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* When backdrop-filter is unsupported (older iOS Safari under load),
   fall back to a near-opaque background so glass cards don't render
   as transparent / black. */
@supports not ((backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px))){
  .top-bar,[class*="glass"]{background-color:rgba(8,8,12,.94)!important}
}

/* 40px minimum tap target on touch screens (under 680px wide). */
@media (max-width:680px) and (pointer:coarse){
  a.btn, button.btn, .nav-links a{min-height:40px;display:inline-flex;align-items:center;justify-content:center}
}