/* ============================================================
   CHEETAH BRAND LAYER — "Mission Control"
   Source: Brand & Style Guide (docs.cheetahengineering.com/internal/brand)
   and the matching slide theme (deck-kit/themes/cheetah.css).

   This file only OVERRIDES site.css. It is loaded last by each page with:
     <link rel="stylesheet" href="brand.css" id="brand-css" />
   To revert: delete that line from index.html and about.html (or add
   ?brand=off to the page address to compare without it).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
/* ----- Palette: deep slate, warm off-white text, teal + pink ----- */
:root{
  --bg-base:#070912; --bg-surface:#0d1119; --bg-elevated:#141821;
  --gray-950:#070912;
  --bg:#070912;
  --fg-1:#ffffff;        /* titles, subtitles, headings: white */
  --fg-2:#ffffff;        /* subtitles and body copy: white */
  --fg-3:#eae6d7;        /* smallest subtext only: warm off-white */
  --fg-muted:#8a8676;
  --fg-dim:#525049;      /* faint */
  --border:#1c212c;
  --border-hi:#2a303c;

  --teal-300:#57fff7; --teal-400:#0cffff; --teal-500:#00e1ea; --teal-700:#008f9f;
  --pink-400:#f37992; --pink-500:#e94a6e; --pink-600:#d72e5d;
  --brand:#008f9f; --brand-hover:#00a7b8;
  --brand-text:#00e1ea;  /* labels & links; neon #0cffff kept for highlights only */
  --accent:#d72e5d;

  /* ----- Type: Barlow for display, JetBrains Mono for body, mono HUD labels ----- */
  --font-display:'Barlow', ui-sans-serif, system-ui, sans-serif;
  --font-body:'JetBrains Mono', ui-monospace, monospace;
  --font-hud:'Departure Mono', 'JetBrains Mono', ui-monospace, monospace;
}

/* Plain deep-slate background with a faint instrument grid (no glow washes) */
body{
  background:
    radial-gradient(circle at 1px 1px, rgba(234,230,215,.035) 1px, transparent 0) 0 0 / 32px 32px,
    #070912;
  font-size:15px;
}

/* Mono body copy reads large; pull paragraph sizes in slightly */
.hero-sub{font-size:clamp(15px,1.2vw,18px);line-height:1.6}
.trio-sub{font-size:clamp(16px,1.35vw,20px);font-weight:400}
.foot ul,.foot .blurb{font-size:15px}
.nav-links{font-size:14px;font-weight:500}

/* Headlines: Barlow 800, slightly tight tracking */
.hero h1,.sect-head h2,.about-hero h1,.trio-h,.cap-body h3,.step h3,.award-body h3,.cta-strip h3{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.01em;
}

/* ----- HUD labels: tiny mono caps, wide tracking ----- */
.eyebrow,.trio-h .n,.tt-chip,.award-tag,.step .num,.person .role,.foot h5,.foot-fine,.sect-kicker,
.banner-btn,.btn,.media-ph,.placeholder-note{
  font-family:var(--font-hud);letter-spacing:.1em;
}
.eyebrow,.award-tag,.step .num{color:var(--teal-500)}
.tt-chip.active{color:#070912}

/* Neon used sparingly: active states and live highlights only */
.nav-links a:hover,.nav-links a.active{border-bottom-color:var(--teal-400)}
.tt-arrow:hover{box-shadow:0 0 18px color-mix(in oklab, var(--acc) 55%, transparent)}

/* ----- Viewfinder brackets: frame media as "the field of view" -----
   Two diagonal corners (top-left, bottom-right), teal-500, 2px — per the theme's card treatment. */
.tt-sw .tt-media,.media-tile,.award-vis,.cap-visual{position:relative}
.tt-sw .tt-media::before,.media-tile::before,.award-vis::before,
.tt-sw .tt-media::after,.media-tile::after,.award-vis::after{
  content:"";position:absolute;width:18px;height:18px;border:0 solid var(--teal-500);
  pointer-events:none;z-index:3;
}
.tt-sw .tt-media::before,.media-tile::before,.award-vis::before{top:0;left:0;border-width:2px 0 0 2px}
.tt-sw .tt-media::after,.media-tile::after,.award-vis::after{bottom:0;right:0;border-width:0 2px 2px 0}

/* Slightly squarer corners: engineered, not bubbly */
.tt-sw .tt-media,.media-tile,.media-ph,.award,.step,.person,.cta-strip,.trio-ph{border-radius:6px}

/* ----- Section colors on-brand: three shades of teal (pink read as an error state) (overrides the inline --acc on each section) ----- */
.trio-h[style*="--i:0"],.trio-body[style*="--i:0"]{--acc:#00e1ea !important}  /* 01 Hardware: bright brand teal */
.trio-h[style*="--i:1"],.trio-body[style*="--i:1"]{--acc:#57fff7 !important}  /* 02 Software: light brand teal */
.trio-h[style*="--i:2"],.trio-body[style*="--i:2"]{--acc:#008f9f !important}  /* 03 Ecosystem: deep brand teal */

/* Keep the two-tone headlines: the second, quieter line stays muted */
.quiet,.hero h1 .quiet{color:#8a8676}