/* AI vs Your Job — tokens from the AVJ design system (dark theme). */
@font-face{font-family:"Space Grotesk";src:url(../fonts/spacegrotesk.woff2) format("woff2");font-weight:500 700;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter.woff2) format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(../fonts/jetbrainsmono.woff2) format("woff2");font-weight:400 500;font-display:swap}

:root{
  --navy:#0B1530; --surface:#0B1530; --raised:#131F40; --sunken:#08102A; --line:#25325A;
  --ink:#E8E8EC; --muted:#A3A9BF; --silver:#E8E8EC;
  --blue:#1E6FFF; --blue-text:#6FA3FF; --red:#E52421; --red-text:#FF6B68; --orange:#FF8A2A; --orange-text:#FFA65C;
  --z-dry:#5A5240; --z-ankle:#24406E; --z-waist:#1E54B8; --z-neck:#2F6FF0; --z-under:#5B8FFF;
  --g-a:#5CC98F; --g-b:#E0BE4A; --g-c:#F08A6A;
  --display:"Space Grotesk",system-ui,sans-serif; --sans:"Inter",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  --r-sm:4px; --r-md:8px; --r-lg:16px; --gutter:16px; --max:1080px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--ink);font:400 16px/1.65 var(--sans);min-height:100vh;display:flex;flex-direction:column}
img{max-width:100%;height:auto}
a{color:var(--blue-text);text-underline-offset:3px}
a:hover{color:#A9C8FF}
:focus-visible{outline:2px solid var(--blue-text);outline-offset:2px;border-radius:2px}
h1,h2,h3{font-family:var(--display);line-height:1.15;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(28px,6vw,44px);font-weight:700}
h2{font-size:clamp(20px,3.6vw,26px);font-weight:600;margin-top:1.6em}
h3{font-size:18px;font-weight:600}
p,ul,ol{margin:0 0 1em}
table{width:100%;border-collapse:collapse;font-size:14px;display:block;overflow-x:auto}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--muted);font-weight:600}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:8px;z-index:99;background:var(--raised);padding:8px 12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Layout */
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.site-head{position:sticky;top:0;z-index:20;background:rgba(11,21,48,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;min-height:60px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:700 17px/1 var(--display)}
.brand img{height:40px;width:auto}
.brand .ai{color:var(--blue-text)}.brand .vs{color:var(--muted);font-weight:500}.brand .job{color:var(--red-text)}
.top-nav{display:none;gap:4px}
.top-nav a,.tab-nav a{text-decoration:none;color:var(--muted);font-size:14px;font-weight:500}
.top-nav a{padding:10px 12px;border-radius:var(--r-md)}
.top-nav a[aria-current],.tab-nav a[aria-current]{color:var(--blue-text);font-weight:600}
.tab-nav{position:fixed;bottom:0;left:0;right:0;z-index:20;display:grid;grid-template-columns:repeat(4,1fr);background:var(--sunken);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tab-nav a{min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:12px}
.tab-nav svg{width:20px;height:20px}
main{flex:1;padding:24px 0 96px}
.site-foot{border-top:1px solid var(--line);padding:32px 0 96px;color:var(--muted);font-size:14px}
.site-foot nav{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:12px}
.site-foot a{color:var(--muted)}
@media (min-width:900px){
  .top-nav{display:flex}.tab-nav{display:none}
  main{padding-bottom:48px}.site-foot{padding-bottom:32px}
}

/* Text helpers */
.lead{font-size:clamp(16px,2.4vw,18px);color:var(--muted);max-width:640px}
.eyebrow{font:600 12px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.meta{font:400 12px/1.5 var(--mono);color:var(--muted)}
.prose{max-width:720px}
.prose li{margin-bottom:.4em}

/* Number chip: every measured number opens its Why panel */
.num{font-family:var(--mono);font-weight:500;color:inherit;background:none;border:0;padding:0;cursor:pointer;border-bottom:1px dotted var(--blue-text);font-size:inherit;line-height:inherit}
.num:hover{color:var(--blue-text)}
.num--threat{border-bottom-color:var(--red-text)}

/* Cards and grids */
.card{display:block;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-md);padding:16px;color:var(--ink);text-decoration:none}
a.card:hover{border-color:var(--blue)}
.grid{display:grid;gap:16px}
@media (min-width:700px){.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.section{margin-top:40px}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.section-head h2{margin:0}
.chip{display:inline-flex;align-items:center;font-size:12px;padding:6px 10px;border-radius:var(--r-sm);border:1px solid var(--line);color:var(--muted);text-decoration:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:var(--r-md);background:var(--blue);color:#fff;font:600 15px/1 var(--sans);text-decoration:none;border:0;cursor:pointer}
.btn:hover{background:#3D82FF;color:#fff}
.btn--ghost{background:none;border:1px solid var(--line);color:var(--ink)}
.btn--ghost:hover{background:var(--raised);color:var(--ink)}
.grade{display:inline-block;font:500 11px/1 var(--mono);padding:3px 6px;border-radius:var(--r-sm);border:1px solid currentColor}
.grade-A{color:var(--g-a)}.grade-B{color:var(--g-b)}.grade-C{color:var(--g-c)}

/* Home */
.hero{display:grid;gap:24px;align-items:center}
.hero h1{font-size:clamp(32px,7vw,56px);max-width:16ch}
.hero-art{display:none}
@media (min-width:900px){.hero{grid-template-columns:1.3fr 1fr}.hero-art{display:block;justify-self:end;max-width:360px}}
.search{display:flex;flex-direction:column;gap:6px;max-width:520px;margin-top:8px}
.search label{font-size:13px;font-weight:600;color:var(--muted)}
.search input,.field input{height:52px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--sunken);color:var(--ink);font:400 16px var(--sans);padding:0 16px;width:100%}
.job-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.job-row strong{display:block;font-size:15px}
.job-row small{color:var(--muted);font-size:12px}
.ep{display:flex;gap:12px;align-items:flex-start}
.ep-thumb{width:120px;aspect-ratio:16/9;border-radius:var(--r-sm);background:var(--sunken) center/cover;flex-shrink:0;border:1px solid var(--line)}

/* Gauge (zone legend) */
.zones{display:flex;border-radius:var(--r-sm);overflow:hidden;font:600 11px/1.2 var(--sans)}
.zones span{flex:1;padding:8px 6px;color:var(--ink)}
.z-dry{background:var(--z-dry)}.z-ankle{background:var(--z-ankle)}.z-waist{background:var(--z-waist)}.z-neck{background:var(--z-neck)}.z-under{background:var(--z-under);color:var(--navy)!important}

/* Atlas */
.legend{display:flex;flex-wrap:wrap;gap:16px;font-size:12px;color:var(--muted);margin:8px 0 16px}
.legend i{display:inline-block;vertical-align:middle;margin-right:6px}
.legend .l-rel{width:14px;height:8px;border-radius:2px;background:var(--blue)}
.legend .l-peak{width:2px;height:12px;background:var(--red-text)}
.legend .l-pro{width:0;height:12px;border-left:1px dashed var(--muted)}
.atlas{display:flex;flex-direction:column;gap:2px}
.fam{font:600 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--orange-text);margin:18px 0 6px}
.cap{display:grid;grid-template-columns:minmax(120px,38%) minmax(0,1fr) 40px;align-items:center;gap:10px;min-height:44px;padding:0 8px;border-radius:var(--r-sm);color:var(--ink);text-decoration:none;width:100%;background:none;border:0;text-align:left;font:inherit;cursor:pointer}
.cap:hover{background:var(--raised)}
.cap-name{font-size:14px;line-height:1.3}
.bar{position:relative;height:10px;background:var(--sunken);border-radius:2px}
.bar .rel{position:absolute;inset:0 auto 0 0;background:var(--blue);border-radius:2px}
.bar .pk{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--red-text)}
.bar .pro{position:absolute;top:-4px;bottom:-4px;border-left:1px dashed var(--muted);left:54.5%}
.cap-val{font:500 14px/1 var(--mono);text-align:right;border-bottom:1px dotted var(--blue-text);justify-self:end}
.status-list{display:grid;gap:12px}
@media (min-width:700px){.status-list{grid-template-columns:repeat(3,1fr)}}

/* Capability page */
.big{font:700 clamp(56px,12vw,80px)/1 var(--display);margin:4px 0 8px}
.big small{font-size:.32em;color:var(--muted);font-weight:500}
.scale-row{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.scale-row b{font:600 14px var(--mono)}
.scale-row.here{background:linear-gradient(90deg,rgba(30,111,255,.16),transparent);border-radius:var(--r-sm)}
.formula{font:400 13px/1.7 var(--mono);white-space:pre-line;background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px}
.ev{display:flex;flex-direction:column;gap:6px}
.ev-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.ev dl{display:grid;grid-template-columns:120px 1fr;gap:4px 12px;font-size:14px;margin:6px 0 0}
.ev dt{color:var(--muted)}.ev dd{margin:0}
@media (max-width:520px){.ev dl{grid-template-columns:1fr}.ev dt{margin-top:6px}}

/* Why sheet */
.why{border:0;padding:0;margin:0;max-width:none;width:100%;background:transparent;color:var(--ink)}
.why::backdrop{background:rgba(5,10,26,.72)}
.why[open]{position:fixed;inset:auto 0 0 0;max-height:88vh}
.why-panel{background:var(--raised);border:1px solid var(--line);border-bottom:0;border-radius:var(--r-lg) var(--r-lg) 0 0;max-height:88vh;overflow-y:auto;padding:8px 16px 32px;max-width:640px;margin:0 auto}
.why-grip{width:40px;height:4px;border-radius:4px;background:var(--line);margin:4px auto 12px}
.why-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.why-close{min-width:44px;min-height:44px;background:none;border:0;color:var(--muted);font-size:26px;cursor:pointer}
.why h3{font:600 13px/1.4 var(--sans);color:var(--muted);margin:20px 0 8px}
@media (min-width:900px){.why[open]{inset:0 0 0 auto;max-height:none;height:100vh;width:min(520px,100%)}.why-panel{height:100%;max-height:none;border-radius:0;border-left:1px solid var(--line);border-bottom:0}}

/* Pulse */
.pulse{display:flex;flex-direction:column;gap:8px}
.pulse-top{display:flex;justify-content:space-between;gap:12px;font:400 12px/1.4 var(--mono);color:var(--muted)}
.pulse h2,.pulse h3{font:600 16px/1.35 var(--sans);margin:0}
.pulse h2 a,.pulse h3 a{color:var(--ink);text-decoration:none}
.pulse--signal{border:2px solid var(--orange-text)}
.signal-tag{font:600 11px/1 var(--sans);letter-spacing:.06em;color:var(--orange-text)}

/* AI Washing Test */
.q{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.q legend{font-weight:500;font-size:15px;padding:0;margin-bottom:6px}
.q fieldset{border:0;padding:0;margin:0}
.yn{display:flex;gap:8px}
.yn label{flex:1;min-height:48px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer;font-weight:600}
.yn input{position:absolute;opacity:0;pointer-events:none}
.yn input:checked+span{color:#fff}
.yn label:has(input:checked){background:var(--blue);border-color:var(--blue)}
.yn label:has(input:focus-visible){outline:2px solid var(--blue-text);outline-offset:2px}
.q-hint{font-size:13px;color:var(--muted);margin:0}
.verdict{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px;border-radius:var(--r-md);border:2px solid var(--line);margin-top:16px}
.verdict b{font:700 28px/1 var(--display)}
.verdict[data-v=REAL]{border-color:var(--blue)}.verdict[data-v=REAL] b{color:var(--blue-text)}
.verdict[data-v=WASHED]{border-color:var(--red)}.verdict[data-v=WASHED] b{color:var(--red-text)}
.verdict[data-v=MIXED]{border-color:var(--orange)}.verdict[data-v=MIXED] b{color:var(--orange-text)}

/* Episode */
.video{position:relative;aspect-ratio:16/9;background:var(--sunken) center/cover;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line)}
.video button{position:absolute;inset:0;width:100%;background:rgba(11,21,48,.35);border:0;color:#fff;font:600 16px var(--sans);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.sources{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}
.sources li{display:flex;gap:10px;align-items:baseline;font-size:15px}

/* Newsletter */
.signup{background:var(--raised);border:1px solid var(--line);border-radius:var(--r-md);padding:20px;max-width:560px}
.signup form{display:flex;flex-direction:column;gap:12px}
.signup .row{display:flex;gap:8px;flex-wrap:wrap}
.signup .row input{flex:1 1 220px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted)}
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--blue)}
.hp{position:absolute;left:-9999px}
.notice{padding:10px 12px;border-radius:var(--r-md);font-size:14px;border:1px solid var(--line)}
.notice--ok{border-color:var(--g-a);color:var(--g-a)}.notice--err{border-color:var(--red-text);color:var(--red-text)}

@media (prefers-reduced-motion:no-preference){.card,.cap,.btn{transition:background .15s,border-color .15s}}