/* WOOO, We On Our Own · design system
   Black-and-white background system with a single amber accent; photography stays in color.
   Palette: paper #FAFAF9 · card #FFF · graphite #191A1C · amber #E9A83B · amber-ink #7C540F · text #18181A
   Type: Instrument Serif (display) · Archivo (body) · IBM Plex Mono (utility/labels)
   Signature: the amber four-segment readiness ring */

:root{
  --ink:#141414;          /* near-black: dark surfaces, text-on-amber */
  --bg:#FAFAF9;           /* white page background */
  --bg-2:#EDEDEB;         /* light gray alternate band */
  --panel:#FFFFFF;        /* white card surface */
  --panel-2:#F1F1EF;      /* card hover */
  --graphite:#191A1C;     /* dark section / footer */
  --line:rgba(20,20,20,.16);
  --line-soft:rgba(20,20,20,.09);
  --amber:#E9A83B;
  --amber-hi:#FFC964;
  --amber-deep:#8A6410;
  --amber-ink:#7C540F;    /* deep amber for accent text on white */
  --bone:#F4F3EF;         /* light tone for text over dark surfaces */
  --text:#18181A;         /* near-black primary text */
  --muted:#5E5E60;        /* gray muted text */
  --danger:#B4532A;
  --nav-blue:#2563EB;      /* mobile nav tab */
  --nav-blue-hi:#1D4ED8;   /* mobile nav tab active/hover */
  --max:1120px;
  --serif:"Instrument Serif",Georgia,serif;
  --sans:"Archivo",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--amber-ink);text-decoration:none}
a:hover{color:var(--amber-deep)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--amber-deep);outline-offset:3px;border-radius:2px}
::selection{background:var(--amber);color:var(--ink)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--amber-ink);display:block;margin-bottom:16px}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:.005em;color:var(--text)}
h1{font-size:clamp(40px,6.2vw,72px)}
h2{font-size:clamp(30px,4vw,46px)}
h3{font-size:clamp(22px,2.6vw,28px)}
.lede{font-size:clamp(18px,2vw,21px);color:var(--muted);max-width:62ch}
.amber{color:var(--amber-ink)}
.mono{font-family:var(--mono)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(250,250,249,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft)}
.nav-inner{max-width:var(--max);margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:12px;color:var(--text);font-family:var(--mono);font-size:14px;letter-spacing:.16em}
.brand img{height:40px;width:auto;border-radius:8px;box-shadow:0 1px 4px rgba(20,20,20,.25)}
.brand svg{width:30px;height:30px}
.brand b{color:var(--amber-ink);font-weight:600}
.nav-links{margin-left:auto;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.nav-links a{color:var(--muted);font-size:14px;letter-spacing:.02em}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--text)}
.nav-cta{border:1px solid var(--amber-deep);color:var(--amber-ink)!important;padding:8px 16px;border-radius:2px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.nav-cta:hover{background:var(--amber);color:var(--ink)!important}
/* On mobile, show the links as a scrollable row of blue tabs instead of hiding them */
@media(max-width:940px){
  .nav-inner{flex-wrap:wrap;gap:12px 16px}
  .nav-links{margin-left:0;width:100%;gap:8px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;scrollbar-width:none}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a:not(.nav-cta){
    display:inline-block;flex:none;white-space:nowrap;
    background:var(--nav-blue);color:#fff;
    padding:8px 14px;border-radius:6px;font-size:13px;letter-spacing:.02em;
    transition:background .15s;
  }
  .nav-links a:not(.nav-cta):hover,
  .nav-links a:not(.nav-cta)[aria-current="page"]{background:var(--nav-blue-hi);color:#fff}
  .nav-cta{flex:none;white-space:nowrap}
}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;padding:16px 30px;border-radius:2px;border:1px solid var(--amber-deep);cursor:pointer;transition:background .18s,color .18s}
.btn-solid{background:var(--amber);color:var(--ink);border-color:var(--amber)}
.btn-solid:hover{background:var(--amber-hi);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--amber-ink)}
.btn-ghost:hover{background:var(--amber);color:var(--ink)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:86vh;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--line-soft)}
.hero-img{position:absolute;inset:0;z-index:0;background:url("hero-network.jpg") center center/cover no-repeat}
.hero-video{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(15,16,11,.62),rgba(15,16,11,.46) 42%,rgba(15,16,11,.78))}
.hero-content{position:relative;z-index:3;padding:84px 0;text-align:center;width:100%}
.hero-logo{width:auto;height:132px;margin:0 auto 26px;border-radius:16px;box-shadow:0 14px 44px rgba(0,0,0,.55)}
.hero-content .eyebrow{color:var(--amber-hi)}
.hero-content h1{color:var(--bone)}
.hero-content h1 .amber{color:var(--amber-hi)}
.hero-content .lede{color:#E7E1D2;margin:26px auto 38px}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:center}
.hero-note{font-family:var(--mono);font-size:12px;color:#CFC9BB;margin-top:22px;letter-spacing:.06em}

/* ---------- sections ---------- */
.section{padding:74px 0;border-bottom:1px solid var(--line-soft)}
.section-alt{background:var(--bg-2)}
.section-tight{padding:58px 0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:40px}}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:960px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid-4{grid-template-columns:1fr}}
.cell{background:var(--panel);padding:32px 26px;border:1px solid var(--line-soft);border-radius:4px}
.cell h3{margin:14px 0 12px}
.cell p{color:var(--muted);font-size:15.5px}
.pillar-n{font-family:var(--mono);font-size:12px;color:var(--amber-ink);letter-spacing:.2em}

.rule-list{display:grid;gap:1px;border:1px solid var(--line-soft);background:var(--line-soft)}
.rule{background:var(--panel);padding:34px;display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:baseline}
.rule h3{font-size:22px}
.rule p{color:var(--muted);font-size:15.5px}
@media(max-width:720px){.rule{grid-template-columns:1fr;gap:8px}}

/* ---------- audience cards ---------- */
.aud-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
@media(max-width:960px){.aud-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.aud-grid{grid-template-columns:1fr}}
.aud{background:var(--panel);color:var(--text);display:flex;flex-direction:column;transition:background .18s}
.aud:hover{background:var(--panel-2);color:var(--text)}
.aud-img{width:100%;aspect-ratio:16/10;object-fit:cover;border-bottom:1px solid var(--line-soft)}
.aud-body{padding:30px 28px;display:flex;flex-direction:column;flex:1}
.aud h3{margin:8px 0 10px}
.aud p{color:var(--muted);font-size:15px;flex:1}
.aud .go{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber-ink);margin-top:16px}

/* ---------- comparison table ---------- */
.compare{width:100%;border-collapse:collapse;border:1px solid var(--line-soft)}
.compare th,.compare td{padding:20px 24px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top;font-size:15.5px}
.compare th{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.compare th:last-child{color:var(--amber-ink)}
.compare td:first-child{color:var(--muted)}
.compare td:last-child{color:var(--text)}

/* ---------- pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line-soft);border:1px solid var(--line-soft)}
@media(max-width:900px){.price-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.price-grid{grid-template-columns:1fr}}
.price-card{background:var(--panel);padding:32px 26px;display:flex;flex-direction:column;position:relative}
.price-card.featured{background:var(--panel-2);box-shadow:inset 0 0 0 2px var(--amber)}
.price-badge{position:absolute;top:-1px;right:-1px;background:var(--amber);color:var(--ink);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:5px 12px}
.price-tier{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.price-name{font-family:var(--serif);font-size:26px;line-height:1.1;margin-bottom:10px}
.price-amount{font-family:var(--serif);font-size:40px;color:var(--amber-ink);line-height:1}
.price-tagline{font-size:13.5px;color:var(--muted);font-style:italic;margin:8px 0 18px}
.price-features{list-style:none;margin:0 0 24px;flex:1}
.price-features li{position:relative;padding:9px 0 9px 24px;font-size:14px;color:var(--text);border-bottom:1px solid var(--line-soft)}
.price-features li:last-child{border-bottom:none}
.price-features li::before{content:"\2713";position:absolute;left:0;color:var(--amber-deep);font-weight:700}
.price-cta{display:block;text-align:center;border:1px solid var(--amber-deep);color:var(--amber-ink);padding:13px;border-radius:2px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;transition:background .18s,color .18s}
.price-cta:hover{background:var(--amber);color:var(--ink)}
.price-card.featured .price-cta{background:var(--amber);color:var(--ink);border-color:var(--amber)}
.price-card.featured .price-cta:hover{background:var(--amber-hi)}
.price-note{text-align:center;margin-top:11px;font-size:12px;color:var(--muted)}

/* ---------- stats bar ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line-soft);border:1px solid var(--line-soft);margin-bottom:56px}
@media(max-width:640px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--panel);text-align:center;padding:30px 16px}
.stat b{font-family:var(--serif);font-size:34px;color:var(--amber-ink);display:block;line-height:1}
.stat span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:8px;display:block}

/* ---------- team ---------- */
.team-meta{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0 0 40px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber-ink)}
.team-body{max-width:760px}
.team-body p{color:var(--text);font-size:16.5px;line-height:1.85;margin-bottom:22px}
.team-body p strong{color:var(--text)}
.team-pull{font-family:var(--serif);font-size:26px;line-height:1.35;color:var(--amber-ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;margin:6px 0 26px}

/* ---------- faq ---------- */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line-soft);padding:8px 0}
.faq summary{list-style:none;cursor:pointer;padding:16px 40px 16px 0;position:relative;font-family:var(--serif);font-size:20px;color:var(--text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:14px;color:var(--amber-ink);font-family:var(--sans);font-size:24px;transition:transform .2s}
.faq details[open] summary::after{content:"\2212"}
.faq details p{color:var(--muted);font-size:15.5px;padding:0 40px 18px 0}

/* ---------- comparison / split table ---------- */
.compare-wrap{overflow-x:auto}

/* ---------- callout / cta strip / crumb / disclaimer (armory + bunkers) ---------- */
.callout{border:1px solid var(--line);background:var(--panel);border-radius:2px;padding:30px 32px}
.callout.gold{border-color:var(--amber-deep);background:linear-gradient(180deg,rgba(233,168,59,.10),var(--panel))}
.callout h3{color:var(--amber-ink);margin-bottom:10px}
.callout p{color:var(--muted);font-size:15.5px;margin-bottom:20px}
.cta-strip{background:var(--bg-2);border-bottom:1px solid var(--line-soft);text-align:center;padding:90px 0}
.cta-strip h2{margin-bottom:16px}
.cta-strip p{color:var(--muted);max-width:60ch;margin:0 auto 30px}
.crumb{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--muted);padding:22px 0 0}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--text)}
.disclaimer{font-size:13px;color:var(--muted);line-height:1.7;border-top:1px solid var(--line-soft);padding:26px 0;margin-top:8px}
.disclaimer strong{color:var(--text)}
.feature-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);margin-top:8px}
@media(max-width:640px){.feature-list{grid-template-columns:1fr}}
.feature-list li{background:var(--panel);padding:24px 26px;font-size:15px;color:var(--muted)}
.feature-list li strong{display:block;color:var(--text);font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.phase-list{list-style:none;display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);margin-top:8px}
.phase-list li{background:var(--panel);padding:24px 28px}
.phase-list h4{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-ink);margin-bottom:8px}
.phase-list p{color:var(--muted);font-size:15px}
.lead-copy{max-width:64ch;margin-top:22px}
.lead-copy p{color:var(--muted);margin-bottom:18px}

/* ---------- forms ---------- */
.form{display:grid;gap:18px;max-width:560px}
.form label{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px}
.form input,.form select,.form textarea{width:100%;background:#fff;border:1px solid var(--line-soft);color:var(--text);padding:14px 16px;font-family:var(--sans);font-size:16px;border-radius:2px}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--amber-deep)}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.fine{font-size:13px;color:var(--muted);line-height:1.6}

/* ---------- privacy strip ---------- */
.privacy-strip{border:1px solid var(--line);background:linear-gradient(180deg,rgba(233,168,59,.12),rgba(233,168,59,.05));padding:26px 30px;display:flex;gap:18px;align-items:flex-start;border-radius:2px}
.privacy-strip svg{flex:none;margin-top:3px}
.privacy-strip svg path{stroke:var(--amber-deep)}
.privacy-strip p{font-size:14.5px;color:var(--text)}

/* ---------- ring ---------- */
.ring-seg{transition:stroke .3s,opacity .3s}
.pulse{animation:segpulse 2.2s ease-in-out infinite}
@keyframes segpulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- footer ---------- */
footer{padding:70px 0 50px;color:#B9B9B7;font-size:14px;background:var(--graphite);border-top:1px solid rgba(255,255,255,.08)}
.foot-grid{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-start}
.foot-links{display:flex;flex-direction:column;gap:12px;flex-wrap:wrap}
.foot-links a{color:#B9B9B7}
.foot-links a:hover{color:#fff}
.foot-tag{font-family:var(--serif);font-size:20px;color:var(--bone);margin-bottom:10px}
footer .amber{color:var(--amber-hi)}
.foot-contact{margin-top:16px;font-size:14px;color:#D8D8D6;line-height:1.9}
.foot-contact a{color:var(--amber-hi);font-family:var(--mono);font-size:13px;letter-spacing:.04em}
.foot-legal{margin-top:36px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);font-size:12.5px;font-family:var(--mono);letter-spacing:.04em;color:#7C7C7A}

/* ---------- page hero (interior) ---------- */
.page-hero{padding:78px 0 52px;border-bottom:1px solid var(--line-soft);position:relative;overflow:hidden}
.page-hero .lede{margin-top:22px}
.page-hero.has-img{background-size:cover;background-position:center;color:var(--bone)}
.page-hero.has-img::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,15,16,.74),rgba(15,15,16,.58) 50%,rgba(15,15,16,.84))}
.page-hero.has-img>.wrap{position:relative;z-index:1}
.page-hero.has-img .eyebrow{color:var(--amber-hi)}
.page-hero.has-img h1{color:var(--bone)}
.page-hero.has-img h1 .amber,.page-hero.has-img .amber{color:var(--amber-hi)}
.page-hero.has-img .lede{color:#E7E6E1}
.page-hero.has-img .fine{color:#CFCEC9}
.page-hero.has-img .btn-ghost{color:var(--amber-hi);border-color:var(--amber-hi)}
.page-hero.has-img .btn-ghost:hover{background:var(--amber);color:var(--ink);border-color:var(--amber)}

/* ---------- scan ---------- */
.scan-shell{display:grid;grid-template-columns:300px 1fr;gap:64px;align-items:start}
.scan-side{position:sticky;top:96px}
/* On mobile the counter sits at the top of the page and the assessment stacks underneath, never floating over it */
@media(max-width:940px){
  .scan-shell{grid-template-columns:1fr;gap:32px}
  .scan-side{position:static;top:auto;display:flex;gap:28px;align-items:center;justify-content:center;flex-wrap:wrap}
  .scan-side svg{width:150px;height:150px}
}
/* Keep scrolled-to steps clear of the sticky nav instead of sliding under it */
.q-card,#gate,#results{scroll-margin-top:96px}
@media(max-width:940px){.q-card,#gate,#results{scroll-margin-top:140px}}
.scan-score{font-family:var(--mono);font-size:13px;color:var(--muted);letter-spacing:.1em;text-align:center;margin-top:14px}
.q-card{border:1px solid var(--line-soft);background:var(--panel);padding:34px;margin-bottom:2px}
.q-pillar{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber-ink);margin-bottom:10px}
.q-text{font-family:var(--serif);font-size:23px;line-height:1.25;margin-bottom:8px}
.q-help{font-size:14.5px;color:var(--muted);margin-bottom:20px}
.q-opts{display:grid;gap:10px}
.q-opt{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line-soft);padding:14px 16px;border-radius:2px;cursor:pointer;transition:border-color .15s,background .15s}
.q-opt:hover{border-color:var(--line)}
.q-opt input{margin-top:5px;accent-color:var(--amber-deep)}
.q-opt.sel{border-color:var(--amber-deep);background:rgba(233,168,59,.12)}
.q-opt b{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text);display:block}
.q-opt span{font-size:13.5px;color:var(--muted)}
.band{border:1px solid var(--line);padding:34px;border-radius:2px;background:var(--panel)}
.band h3{color:var(--amber-ink);margin-bottom:8px}
.band ul{margin:16px 0 0 20px;color:var(--text)}
.band li{margin-bottom:8px}
.result-big{font-family:var(--serif);font-size:clamp(52px,8vw,88px);line-height:1;color:var(--amber-ink)}
.hidden{display:none!important}

/* ---------- scan step navigation ---------- */
.q-nav{display:flex;align-items:center;justify-content:space-between;margin-top:24px}
.q-back{background:none;border:1px solid var(--line);color:var(--muted);font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:9px 16px;border-radius:2px;cursor:pointer;transition:border-color .15s,color .15s}
.q-back:hover:not(:disabled){border-color:var(--amber-deep);color:var(--text)}
.q-back:disabled{opacity:.4;cursor:not-allowed}
.q-count{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.12em}

/* ---------- pricing teaser row (homepage) ---------- */
.price-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 14px;margin:0 auto 34px;max-width:900px}
.price-row span{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-soft);border-radius:2px;padding:10px 16px}
.price-row span b{color:var(--amber-ink);font-weight:600;letter-spacing:.04em}

/* ---------- interactive box hover (site-wide) ---------- */
.cell,.price-card,.stat,.rule,.feature-list li,.phase-list li,.callout,.band{
  transition:background .18s,border-color .18s,box-shadow .18s,transform .18s;
}
/* standalone cards lift and pick up an amber edge */
.cell:hover,.callout:hover{
  border-color:var(--amber-deep);background:var(--panel-2);
  transform:translateY(-3px);box-shadow:0 12px 30px rgba(20,20,20,.10);
}
/* pricing cards keep their seam but gain an amber inline highlight */
.price-card{position:relative}
.price-card:hover{background:var(--panel-2);box-shadow:inset 0 0 0 2px var(--amber-deep);z-index:1}
.price-card.featured:hover{box-shadow:inset 0 0 0 2px var(--amber-deep)}
/* grid-joined tiles brighten softly on hover */
.stat:hover,.rule:hover,.feature-list li:hover,.phase-list li:hover,.band:hover{background:var(--panel-2)}
@media(hover:none){
  .cell:hover,.callout:hover{transform:none;box-shadow:none}
}