/* =====================================================================
   stig marketing site — style reference
   Direction: "Trailhead" (v1, approved 2026.08.14)
   Palette, type, and spacing tokens below are the source of truth for
   future edits. Diagrams section reuses the confirmed Trail treatment
   from SG01 0001 Branding/docs/stig-diagram-visual-exploration.html.
   ===================================================================== */

:root{
  /* --- brand palette (from stig-logo.svg / stig-logo-expanded.svg) --- */
  --olive:#96AA43;   /* actor: stig */
  --teal:#0683AE;    /* actor: Developer */
  --red:#C23B33;     /* actor: Database */
  --plum:#43273B;    /* actor: Filesystem / snapshots+backups. also primary bg */
  --slate:#323E48;
  --lightblue:#A6BBC3;

  /* --- neutrals --- */
  --cream:#F8F6F2;
  --cream-line:#E5E0D6;
  --plum-deep:#3A2131;
  --nearblack:#241B19;
  --nearblack-line:#4A3D38;
  --ink:#1C1C1C;

  /* --- type --- */
  --serif:'Libre Baskerville', Baskerville, Georgia, serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* --- spacing scale --- */
  --sp-1:8px; --sp-2:12px; --sp-3:16px; --sp-4:24px; --sp-5:32px;
  --sp-6:48px; --sp-7:64px; --sp-8:96px;

  --max:1080px;
  --radius:10px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
}
img,svg{display:block;max-width:100%;}
a{color:inherit;}
.container{max-width:var(--max);margin:0 auto;padding:0 var(--sp-4);}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
code{font-family:var(--mono);}

/* =====================================================================
   NAV
   ===================================================================== */
.site-nav{
  background:var(--plum);
  padding:20px 0;
  position:sticky; top:0; z-index:20;
}
.site-nav .container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;row-gap:10px;}
.site-nav .brand-mark{height:28px;width:auto;}
.site-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin:0;padding:0;}
.site-nav a{
  text-decoration:none;color:rgba(255,255,255,.75);font-size:14px;font-weight:500;
  transition:color .15s ease;
}
.site-nav a:hover{color:#fff;}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{
  background:var(--plum);
  padding:12px 0 var(--sp-8);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.hero-motif{position:absolute;top:-10px;left:0;width:100%;opacity:.45;pointer-events:none;}
.hero-inner{max-width:720px;margin:0 auto;padding:0 var(--sp-4);position:relative;z-index:1;}
.hero-wordmark{height:90px;margin:var(--sp-6) auto 0;}
.hero h1{
  font-family:var(--serif);font-style:italic;font-weight:700;
  font-size:clamp(24px,4vw,32px);line-height:1.35;color:#fff;
  margin:var(--sp-5) 0 var(--sp-3);
}
.hero-desc{font-size:16px;line-height:1.6;color:rgba(255,255,255,.75);margin:0 0 var(--sp-5);}
.install-row{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:var(--sp-4);}
.install-pill{
  font-family:var(--mono);font-size:14.5px;color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  padding:12px 18px;border-radius:8px;display:flex;align-items:center;gap:10px;
  cursor:pointer;
}
.install-pill .prompt{color:var(--olive);}
.install-pill button{
  background:none;border:none;color:rgba(255,255,255,.55);cursor:pointer;
  font-family:var(--mono);font-size:12px;padding:0;margin-left:6px;
}
.install-pill button:hover{color:#fff;}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.btn{
  font-family:var(--sans);font-size:14.5px;font-weight:600;
  padding:12px 22px;border-radius:8px;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid transparent;
}
.btn-primary{background:var(--olive);color:#20240d;}
.btn-primary:hover{background:#a5ba52;}
.btn-secondary{background:transparent;border-color:rgba(255,255,255,.3);color:#fff;}
.btn-secondary:hover{border-color:#fff;}

/* =====================================================================
   STORY
   ===================================================================== */
.story{background:var(--plum-deep);padding:var(--sp-7) 0;}
.story-inner{max-width:620px;margin:0 auto;text-align:center;padding:0 var(--sp-4);}
.eyebrow{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--olive);margin:0 0 var(--sp-3);
}
.story p{font-family:var(--serif);font-size:19px;line-height:1.7;color:#fff;margin:0 0 var(--sp-3);}
.story p:last-of-type{margin-bottom:0;}

/* =====================================================================
   WHAT STIG DOES
   ===================================================================== */
.features{background:var(--cream);padding:var(--sp-8) 0;}
.section-head{max-width:620px;margin:0 auto var(--sp-6);text-align:center;padding:0 var(--sp-4);}
.section-head .eyebrow{color:var(--teal);}
.section-head h2{font-family:var(--serif);font-style:italic;font-size:28px;margin:0;color:var(--ink);}
.feature-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--sp-4);
}
.feature-card{
  background:#fff;border:1px solid var(--cream-line);border-radius:var(--radius);
  padding:var(--sp-4);
}
.feature-dot{width:12px;height:12px;border-radius:50%;margin-bottom:var(--sp-2);}
.feature-card h3{font-size:16px;margin:0 0 var(--sp-1);}
.feature-card p{font-size:14px;line-height:1.6;color:#555;margin:0;}

/* =====================================================================
   USAGE + QUICKSTART
   ===================================================================== */
.usage{background:var(--cream);padding:0 0 var(--sp-8);}
.usage .container{max-width:760px;}
.usage p.lead{font-size:15.5px;line-height:1.7;color:#3a3a3a;max-width:600px;margin:0 auto var(--sp-5);text-align:center;}
.code-panel{
  background:var(--nearblack);border:1px solid var(--nearblack-line);border-radius:var(--radius);
  overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,.18);
}
.code-panel .chrome{display:flex;align-items:center;gap:7px;padding:10px 16px;background:#2e2320;overflow:hidden;}
.code-panel .chrome span:not(.title){width:10px;height:10px;border-radius:50%;display:inline-block;flex:0 0 auto;}
.code-panel .chrome .title{margin-left:8px;font-family:var(--mono);font-size:11.5px;line-height:1.4;color:#8a8078;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0;}
.code-panel pre{
  margin:0;padding:20px 22px 24px;font-family:var(--mono);font-size:13.5px;line-height:1.9;
  color:#EDEBE7;overflow-x:auto;
}
.code-panel .cmt{color:#8a8078;}
.code-panel .prompt{color:var(--teal);}
.code-panel .out{color:#a49a91;}

/* =====================================================================
   COMMAND REFERENCE
   ===================================================================== */
.reference{background:#fff;padding:var(--sp-8) 0;border-top:1px solid var(--cream-line);}
.reference .container{max-width:760px;}
table.cmd-table{width:100%;border-collapse:collapse;font-size:14px;}
table.cmd-table th{
  text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:#999;padding:0 0 10px;border-bottom:2px solid var(--cream-line);
}
table.cmd-table td{padding:14px 0;border-bottom:1px solid var(--cream-line);vertical-align:top;}
table.cmd-table td:first-child{font-family:var(--mono);font-weight:600;color:var(--plum);white-space:nowrap;padding-right:20px;}
table.cmd-table td:last-child{color:#444;line-height:1.55;}

/* =====================================================================
   DIAGRAMS
   ===================================================================== */
.diagrams{background:var(--plum);padding:var(--sp-8) 0;}
.diagrams .section-head h2{color:#fff;}
.diagrams .section-head .eyebrow{color:var(--olive);}
.diagrams .section-head p{color:rgba(255,255,255,.65);font-size:14.5px;margin-top:var(--sp-2);}

.scenario-tabs{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:var(--sp-6);
}
.scenario-tab{
  font-family:var(--mono);font-size:12.5px;color:rgba(255,255,255,.65);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);
  padding:9px 14px;border-radius:20px;cursor:pointer;
}
.scenario-tab:hover{color:#fff;border-color:rgba(255,255,255,.35);}
.scenario-tab.active{background:var(--olive);border-color:var(--olive);color:#20240d;font-weight:600;}

.scenario-panel{display:none;max-width:660px;margin:0 auto;}
.scenario-panel.active{display:block;}
.scenario-title{font-family:var(--serif);font-style:italic;font-size:21px;color:#fff;text-align:center;margin:0 0 6px;}
.scenario-blurb{font-size:13.5px;color:rgba(255,255,255,.6);text-align:center;margin:0 0 var(--sp-5);line-height:1.6;}

.trail-wrap{position:relative;}
.trail-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible;}
.trail-svg path{fill:none;stroke:var(--lightblue);stroke-width:2;stroke-dasharray:1 7;stroke-linecap:round;opacity:.55;}
.waypoint{position:relative;display:flex;align-items:flex-start;gap:14px;padding:10px 0;}
.dot{flex:0 0 auto;width:13px;height:13px;border-radius:50%;margin-top:4px;position:relative;z-index:1;border:2px solid var(--plum);}
.dot.developer{background:var(--teal);}
.dot.stig{background:var(--olive);}
.dot.database{background:var(--red);}
.dot.fs{background:var(--plum);border-color:var(--lightblue);}
.wp-actor{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;opacity:.6;color:#fff;display:block;margin-bottom:2px;}
.wp-label{font-size:14px;line-height:1.45;color:#fff;}
.wp-label code{font-family:var(--mono);background:rgba(255,255,255,.1);padding:1px 6px;border-radius:4px;font-size:12.5px;}

.legend{display:flex;gap:20px;justify-content:center;margin:var(--sp-4) 0 0;flex-wrap:wrap;}
.legend-item{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.6);}
.legend-dot{width:9px;height:9px;border-radius:50%;}

.fork{
  margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px dashed rgba(255,255,255,.2);
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);
}
@media (max-width:600px){.fork{grid-template-columns:1fr;}}
.branch{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:var(--sp-3);}
.branch h4{
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--olive);margin:0 0 var(--sp-2);
}
.branch ol{margin:0;padding-left:18px;}
.branch li{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.85);margin-bottom:6px;}
.branch li code{font-family:var(--mono);background:rgba(255,255,255,.1);padding:1px 6px;border-radius:4px;font-size:12px;}
.branch li .who{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.4);}

/* =====================================================================
   OPEN SOURCE
   ===================================================================== */
.opensource{background:var(--slate);padding:var(--sp-7) 0;text-align:center;}
.opensource .container{max-width:600px;}
.opensource .eyebrow{color:var(--olive);}
.opensource h2{font-family:var(--serif);font-style:italic;color:#fff;font-size:24px;margin:0 0 var(--sp-3);}
.opensource p{color:rgba(255,255,255,.7);font-size:14.5px;line-height:1.65;margin:0 0 var(--sp-4);}
.license-badge{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11.5px;
  color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:6px 14px;
  margin-bottom:var(--sp-4);
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{background:var(--nearblack);padding:var(--sp-6) 0;}
.site-footer .container{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-3);
}
.site-footer .brand-mark{height:22px;opacity:.85;}
.site-footer .links{display:flex;gap:16px 22px;flex-wrap:wrap;list-style:none;margin:0;padding:0;}
.site-footer a{color:#a49a91;text-decoration:none;font-family:var(--mono);font-size:12.5px;}
.site-footer a:hover{color:#fff;}
.site-footer .fine{width:100%;font-size:11.5px;color:#6b5f58;margin-top:var(--sp-3);font-family:var(--mono);}
.site-footer .credits{width:100%;font-size:12px;color:#a49a91;margin-top:var(--sp-2);font-family:var(--mono);}
.site-footer .credits a{color:#EDEBE7;text-decoration:none;border-bottom:1px solid rgba(237,235,231,.3);}
.site-footer .credits a:hover{border-bottom-color:#EDEBE7;}

@media (max-width:640px){
  .hero-wordmark{height:64px;}
  .hero h1{font-size:22px;}
}