/* Agent detail pages (Glass, Bridge, Haze). Same idiom as squall/index.html; the agent's spot colour comes from --spot on body. */
:root{
  --bg:#040A16;--bg2:#0B1E3A;--panel:rgba(11,30,58,.55);--panel2:#060E1C;
  --ink:#E6ECF4;--ink2:#A9B7CB;--ink3:#6E7F9A;--line:rgba(224,137,43,.18);--line2:rgba(160,190,220,.14);
  --amber:#E0892B;--lit:#F2B347;--cyan:#59D3D1;--fog:70,170,175;--spot:#E0892B;
}
:root[data-theme="dark"]{--bg:#040A16;--bg2:#0B1E3A}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#040A16;--bg2:#0B1E3A}}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);background-image:linear-gradient(180deg,#040A16 0%,#071529 45%,#0B1E3A 100%);color:var(--ink);font-family:Manrope,system-ui,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
.wrap{max-width:1160px;margin:0 auto;padding:0 16px}
@media (min-width:720px){.wrap{padding:0 32px}}
h1,h2,h3,h4{font-family:"Big Shoulders Display",Manrope,sans-serif;font-weight:800;letter-spacing:.2px;line-height:1}
p a,li a,.txt a{color:var(--lit);border-bottom:1px solid rgba(242,179,71,.35)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:12px 20px;border-radius:6px;font-weight:700;font-size:15px;white-space:nowrap;transition:box-shadow .2s,background .2s}
.btn.gold{background:linear-gradient(180deg,#F2B347,#E0892B);color:#1B0F02;box-shadow:0 8px 26px -10px rgba(224,137,43,.75)}
.btn.gold:hover{box-shadow:0 12px 34px -8px rgba(224,137,43,.9)}
.btn.line{border:1px solid var(--line2);color:var(--ink);background:rgba(4,10,22,.4)}
.btn.line:hover{background:rgba(160,190,220,.08)}
a:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

.tile{position:relative;display:block;width:100%;max-width:440px;margin:0 auto;aspect-ratio:3/3.4;background:var(--panel2);border-radius:4px;overflow:hidden;transform:rotate(-.8deg);
  clip-path:polygon(0 1.2%,2% 0,11% .6%,18% 0,31% .9%,42% 0,56% .7%,67% 0,80% .8%,91% 0,100% .9%,99.3% 10%,100% 22%,99.2% 35%,100% 49%,99.4% 61%,100% 73%,99.1% 86%,100% 97%,97% 100%,88% 99.3%,76% 100%,63% 99.2%,52% 100%,40% 99.3%,27% 100%,16% 99.1%,6% 100%,0 98.8%,.8% 88%,0 75%,.7% 62%,0 50%,.9% 38%,0 25%,.6% 12%);
  box-shadow:0 14px 30px rgba(0,0,0,.55)}
@media (min-width:980px){.tile{aspect-ratio:3/4}}
.tile img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
body.built .tile img{filter:grayscale(.85) brightness(.7) contrast(1.05)}
.tile .scuff{position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.06) 0 1px,transparent 1px 7px),radial-gradient(40% 18% at 8% 4%,rgba(255,255,255,.22),transparent 70%),radial-gradient(30% 12% at 94% 96%,rgba(255,255,255,.18),transparent 70%)}
.tile .bar{position:absolute;left:0;right:0;bottom:0;padding:40px 14px 14px;background:linear-gradient(180deg,rgba(4,10,22,0) 0%,rgba(4,10,22,.86) 40%,rgba(4,10,22,.96) 100%)}
.tile .bar b{display:block;font-family:"Big Shoulders Display",sans-serif;font-weight:800;font-size:38px;line-height:1;letter-spacing:.6px;color:#F4F7FB;text-shadow:0 0 14px color-mix(in srgb,var(--spot) 45%,transparent)}
.tile .bar span{display:block;font-size:13px;color:var(--ink2);margin-top:2px}
.pill{display:inline-flex !important;width:max-content;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;margin-top:8px;border:1px solid rgba(224,137,43,.6);background:rgba(224,137,43,.14);color:#F7C27A !important}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px var(--amber);display:inline-block}
.pill.built{border-color:rgba(159,179,207,.5);background:rgba(159,179,207,.1);color:#C5D1E2 !important}
.pill.built i{background:#9FB3CF;box-shadow:0 0 6px #9FB3CF}

.hero{position:relative;padding:22px 0 54px;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 40% at 70% 20%,color-mix(in srgb,var(--spot) 16%,transparent),transparent 65%),radial-gradient(60% 40% at 10% 0%,rgba(var(--fog),.16),transparent 65%)}
.hero .wrap{display:grid;gap:26px}
@media (min-width:980px){.hero{padding:64px 0 80px}.hero .wrap{grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}.hero .art{order:2}}
h1{font-size:clamp(42px,11vw,76px);text-shadow:0 0 24px rgba(224,137,43,.18);margin-bottom:16px}
h1 em{font-style:normal;color:var(--lit)}
.lede{font-size:17px;color:var(--ink2);max-width:560px;margin-bottom:26px}
.lede b{color:var(--ink);font-weight:600}
.ctas{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:640px){.ctas .btn{flex:1 1 auto}}

.facts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;padding:18px 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(4,10,22,.5);font-size:14px;color:var(--ink2)}
.facts b{color:var(--ink);font-weight:600}

section{padding:56px 0;border-top:1px solid var(--line2)}
.facts + section{border-top:0}
@media (min-width:900px){section{padding:84px 0}}
h2.big{font-size:clamp(36px,8.5vw,56px);margin-bottom:12px;max-width:780px}
.slede{font-size:16.5px;color:var(--ink2);max-width:660px;margin-bottom:28px}

/* kit */
.kit{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:720px){.kit{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kc{display:flex;flex-direction:column;gap:8px;padding:18px 16px 16px;background:var(--panel);border:1px solid var(--line2);border-radius:6px}
.kc .item{position:relative;width:52px;height:52px;border-radius:8px;display:grid;place-items:center;color:var(--spot);background:rgba(4,10,22,.7);border:1px solid color-mix(in srgb,var(--spot) 55%,transparent);box-shadow:0 0 14px color-mix(in srgb,var(--spot) 28%,transparent),inset 0 0 8px color-mix(in srgb,var(--spot) 16%,transparent)}
.kc .item svg{width:30px;height:30px;filter:drop-shadow(0 0 3px var(--spot))}
.kc b{font-size:16px;font-weight:700;line-height:1.25;color:var(--ink)}
.kc p,.kc .d{font-size:14.5px;line-height:1.45;color:var(--ink2)}
.kc .state{font-size:12.5px;font-weight:700;color:#F7C27A;margin-top:auto;padding-top:6px}
.kc.off{border-style:dashed}
.kc.off .item{color:var(--ink3);border-color:var(--line2);box-shadow:none;opacity:.7}
.kc.off .item svg{filter:none}
.kc.off b{color:var(--ink2)}
.kc.off .state{color:var(--ink3)}

/* numbered steps */
.steps{display:grid;gap:12px;counter-reset:s}
@media (min-width:900px){.steps{grid-template-columns:repeat(2,1fr);gap:16px}.steps.three{grid-template-columns:repeat(3,1fr)}}
.st{padding:20px 18px;border-radius:6px;background:var(--panel);border:1px solid var(--line2);display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-content:start}
.st::before{counter-increment:s;content:counter(s);font-family:"Big Shoulders Display",sans-serif;font-weight:800;font-size:40px;line-height:1;color:var(--lit);text-shadow:0 0 16px rgba(224,137,43,.35);grid-row:1/3}
.st h3{font-size:24px;align-self:center}
.st p{font-size:15px;color:var(--ink2);grid-column:2}

/* plain rows: a label and what is true about it */
.rows{border:1px solid var(--line2);border-radius:6px;background:var(--panel);overflow:hidden}
.row{display:grid;gap:2px 20px;padding:14px 16px;border-top:1px solid var(--line2);font-size:15px}
.row:first-child{border-top:0}
@media (min-width:720px){.row{grid-template-columns:minmax(0,220px) 1fr;padding:14px 20px}}
.row b{color:var(--ink);font-weight:700}
.row span{color:var(--ink2)}
.row small{display:block;color:var(--ink3);font-size:12.5px;font-weight:600}

/* does and does not */
.two{display:grid;gap:14px}
@media (min-width:860px){.two{grid-template-columns:1fr 1fr;gap:18px}}
.box{padding:20px 18px;border-radius:6px;background:var(--panel);border:1px solid var(--line2)}
.box h3{font-size:25px;margin-bottom:12px}
.box ul{list-style:none;display:grid;gap:9px}
.box li{font-size:15px;color:var(--ink2);padding-left:18px;position:relative}
.box li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:2px;background:var(--amber)}
.box.no{border-style:dashed}
.box.no li::before{background:transparent;border:1.5px solid var(--ink3)}

/* next phases */
.phases{display:grid;gap:12px}
@media (min-width:860px){.phases{grid-template-columns:repeat(3,1fr)}}
.ph{padding:16px 16px 18px;background:var(--panel);border:1px dashed var(--line2);border-radius:6px}
.ph h3{font-size:24px;margin-bottom:8px}
.ph .k{display:block;font-size:13px;font-weight:700;color:var(--ink3);margin-bottom:8px}
.ph ul{list-style:none;display:grid;gap:7px}
.ph li{font-size:14.5px;color:var(--ink2);padding-left:16px;position:relative}
.ph li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:2px;background:rgba(160,190,220,.2)}
.ph p{font-size:14.5px;color:var(--ink2)}

/* the neighbours: who this agent works with, and the next one along */
.crewnav{display:grid;gap:12px}
@media (min-width:720px){.crewnav{grid-template-columns:repeat(3,1fr)}}
.cn{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid var(--line2);border-radius:6px;background:var(--panel);min-height:76px;transition:border-color .2s,background .2s}
.cn:hover{border-color:rgba(224,137,43,.5);background:rgba(11,30,58,.8)}
.cn img{width:52px;height:52px;border-radius:4px;object-fit:cover;object-position:50% 18%;flex:none}
.cn b{display:block;font-family:"Big Shoulders Display",sans-serif;font-weight:800;font-size:22px;letter-spacing:.4px;line-height:1.1}
.cn span{display:block;font-size:13.5px;color:var(--ink2);line-height:1.35}

.final{text-align:center;padding:64px 0 76px;position:relative;overflow:hidden;isolation:isolate}
.final::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 70% 60% at 50% 100%,rgba(224,137,43,.18),transparent)}
.final h2{margin:0 auto 12px}
.final p{color:var(--ink2);font-size:17px;max-width:540px;margin:0 auto 26px}
.final .ctas{justify-content:center}

/* how it works: process boxes joined by arrows. The run step carries the agent's symbol and its working skills */
.flow{display:grid;gap:0;align-items:stretch;margin-top:26px}
.fs{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:22px 16px;background:var(--panel);border:1px solid var(--line2);border-radius:6px}
.fs b{font-size:17px;font-weight:700;color:var(--ink)}
.fs>span:not(.fi){font-size:14px;color:var(--ink2)}
.fi{width:56px;height:56px;border-radius:10px;display:grid;place-items:center;color:var(--spot);background:rgba(4,10,22,.7);border:1px solid color-mix(in srgb,var(--spot) 55%,transparent);box-shadow:0 0 14px color-mix(in srgb,var(--spot) 28%,transparent)}
.fi svg{width:30px;height:30px}
.fs.run{border-color:color-mix(in srgb,var(--spot) 55%,transparent);box-shadow:0 0 28px -8px color-mix(in srgb,var(--spot) 45%,transparent)}
.fi.sym{width:64px;height:64px;color:#1B0F02;background:var(--spot);box-shadow:0 0 26px color-mix(in srgb,var(--spot) 70%,transparent)}
.fi.sym svg{width:36px;height:36px}
.runs{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin-top:6px;width:100%;text-align:left}
.rn{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);line-height:1.25}
.ri{flex:none;width:28px;height:28px;border-radius:6px;display:grid;place-items:center;color:var(--spot);border:1px solid color-mix(in srgb,var(--spot) 45%,transparent);background:rgba(4,10,22,.6)}
.ri svg{width:16px;height:16px}
.fa{height:28px;position:relative}
.fa::before{content:"";position:absolute;left:50%;top:4px;bottom:4px;width:2px;background:color-mix(in srgb,var(--spot) 55%,transparent);transform:translateX(-50%)}
.fa::after{content:"";position:absolute;left:50%;bottom:2px;width:8px;height:8px;border-right:2px solid var(--spot);border-bottom:2px solid var(--spot);transform:translateX(-50%) rotate(45deg)}
@media (min-width:980px){
  .flow.n3{grid-template-columns:1fr 34px 1.6fr 34px 1fr}
  .flow.n4{grid-template-columns:1fr 34px 1fr 34px 1.9fr 34px 1fr}
  .fa{height:auto}
  .fa::before{left:4px;right:6px;top:50%;bottom:auto;width:auto;height:2px;transform:translateY(-50%)}
  .fa::after{left:auto;right:4px;top:50%;bottom:auto;transform:translateY(-50%) rotate(-45deg)}
}
@media (min-width:1040px){.kit.k4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.more{margin-top:22px;font-size:15px}
.more a{color:var(--lit);border-bottom:1px solid rgba(242,179,71,.35)}