/* Alpha 360 company site — re-skinned to match the Critical Facilities Training site
   (paper ground, ink type, blueprint grid, burnt orange for action, steel blue for structure).
   Loaded after each page's own styles, so it overrides the old dark palette. */
:root{
  --bg:#F4F2ED; --panel:#FFFFFF; --panel2:#F4F2ED; --line:#D8D3C8;
  --steel:#66727D; --ice:#3B4955; --white:#16212B; --cyan:#356086; --amber:#CC5500;
  --good:#2F7D4F; --bad:#B23A2E; --warn:#9A6B00;
  --grid:rgba(74,127,165,.10); --line-2:#E7E3DA; --burnt-ink:#A84600; --steel-blue:#4A7FA5;
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --body:"Source Sans 3","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --radius:6px; color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root{
  --bg:#0F171E; --panel:#16212B; --panel2:#0F171E; --line:#2A3946;
  --steel:#93A1AD; --ice:#C2CCD4; --white:#E9EEF2; --cyan:#9BC2E0; --amber:#E36A1A;
  --good:#5DBB82; --bad:#E5776A; --warn:#E0B13F;
  --grid:rgba(110,160,200,.08); --line-2:#22303B; --burnt-ink:#F08A45; --steel-blue:#78A9CF; color-scheme:dark; } }

body{background:var(--bg);color:var(--ice);font:400 17px/1.55 var(--body)}
a{color:var(--cyan)} a:hover{color:var(--burnt-ink)}
h1,h2,h3{color:var(--white)}

/* header — same feel as the training site header */
.sitenav{background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.sitenav .wrap{max-width:1180px;padding:10px 16px;gap:6px 14px}
.sitenav img{width:132px}
.sitenav .motto{display:none}
.sitenav a{color:var(--ice);font-weight:600;font-size:.95rem}
.sitenav a:hover{color:var(--white)}
.sitenav a.active{color:var(--white);border-bottom-color:var(--amber)}
.motto{font:600 .9rem/1 var(--mono);letter-spacing:.06em;color:var(--steel-blue)}

/* page hero — display type and the blueprint grid */
.pagehero{position:relative;border-bottom:1px solid var(--line);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:28px 28px;background-position:-1px -1px}
.pagehero h1{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(2.3rem,5.4vw,3.9rem);line-height:1.04;color:var(--white)}
.kicker{font:600 .8rem/1.2 var(--mono);letter-spacing:.12em;color:var(--amber)}
.lede{color:var(--ice);font-size:1.15rem}
section.strip > .wrap > h2:not(.sec){font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1.08}
h2.sec{font:600 .8rem/1.2 var(--mono);letter-spacing:.12em;color:var(--amber)}

/* surfaces */
.tile,.sku,.card{background:var(--panel);border-color:var(--line);border-radius:6px;
  box-shadow:0 1px 2px rgba(22,33,43,.06),0 4px 14px rgba(22,33,43,.06)}
.tile h3,.sku h2,.qa h3{font-family:var(--body);color:var(--white)}
.tile h3{font-size:1.2rem}
.sku h2{font-size:1.2rem}
.tile p,.what,.qa p{color:var(--ice)}
.yes li{color:var(--ice)}
.price{color:var(--amber)}
.ribbon{background:var(--amber);color:#fff}

/* buttons — burnt orange with white text, like the training site */
.btn-buy,.btn-see{background:var(--amber);color:#fff;border-radius:6px;font-family:var(--body)}
.btn-buy:hover,.btn-see:hover{background:var(--burnt-ink);color:#fff}
.btn-alt{color:var(--white);border-color:var(--ice);border-radius:6px}
.btn-locked{background:var(--panel2);border-color:var(--line);color:var(--steel)}
.formnote,.lockline{color:var(--steel)}

/* footer (its colours were set inline) */
footer{color:var(--steel)!important;border-top-color:var(--line)!important}
footer div[style*="var(--ice)"]{color:var(--white)!important}
footer a{color:var(--amber)!important}
footer div[style*="var(--ice)"] em{color:var(--amber)}