/* PYLON v3: shared site layer. Tokens, chrome, type, controls, product-frame kit.
   Radius: controls pill, surfaces --rad, tiles --rad-s. Rows, bars and the editorial spine stay square. */
:root{
--ink:oklch(0.145 0.004 265);--ink-2:oklch(0.17 0.005 265);--ink-3:oklch(0.2 0.006 265);
--paper:oklch(0.975 0.003 85);--paper-2:oklch(0.94 0.004 85);
--t1:oklch(0.97 0.003 265);--t2:oklch(0.78 0.006 265);--t3:oklch(0.64 0.008 265);--t4:oklch(0.52 0.008 265);
--rule:oklch(1 0 0 / .12);--rule-2:oklch(1 0 0 / .07);
--acc:oklch(0.62 0.2 275);--acc-txt:oklch(0.76 0.14 275);--acc-soft:oklch(0.62 0.2 275 / .14);
--hud:oklch(0.74 0.16 295);--teal:oklch(0.72 0.13 180);--amber:oklch(0.76 0.14 75);
--ok:oklch(0.76 0.15 155);--warn:oklch(0.8 0.14 80);--hi:oklch(0.74 0.16 50);--crit:oklch(0.68 0.2 22);
--sans:'Switzer',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
--mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
--max:1440px;--px:clamp(1.25rem,4vw,3rem);
--pill:999px;--rad-l:18px;--rad:14px;--rad-s:8px;--rad-xs:4px;
--e:cubic-bezier(.22,1,.36,1);--hdr:64px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-padding-top:var(--hdr)}
body{background:var(--ink);color:var(--t1);font-family:var(--sans);font-size:1rem;line-height:1.6;overflow-x:clip}
a{color:inherit;text-decoration:none}
a:hover{color:var(--t1)}
img{display:block;max-width:100%}
button{font-family:inherit;background:none;border:none;color:inherit;cursor:pointer}
::selection{background:oklch(0.62 0.2 275 / .45)}
.wrap{max-width:calc(var(--max) + var(--px)*2);margin:0 auto;padding:0 var(--px);position:relative}

/* type */
.h-xl{font-size:clamp(2.875rem,6.4vw,5.75rem);font-weight:500;letter-spacing:-.05em;line-height:.92;text-wrap:balance}
.h-l{font-size:clamp(2.25rem,4.6vw,4rem);font-weight:500;letter-spacing:-.045em;line-height:.98;text-wrap:balance}
.h-m{font-size:clamp(1.375rem,2.2vw,1.875rem);font-weight:500;letter-spacing:-.03em;line-height:1.12}
.mute{color:var(--t4)}
.lede{font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.55;color:var(--t2);max-width:52ch;text-wrap:pretty}
.lede b{color:var(--t1);font-weight:500}
.copy{font-size:1rem;line-height:1.65;color:var(--t2);max-width:56ch;text-wrap:pretty}
.copy b{color:var(--t1);font-weight:500}
.eb{display:inline-flex;align-items:center;gap:.625rem;font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--t3)}
.eb .sq{width:6px;height:6px;background:var(--acc)}
.num{font-variant-numeric:tabular-nums}

/* controls */
.btn{display:inline-flex;align-items:center;gap:.625rem;height:2.875rem;padding:0 1.375rem;font-size:.9375rem;font-weight:500;letter-spacing:-.01em;border-radius:var(--pill);border:1px solid var(--rule);color:var(--t1);transition:background .25s var(--e),border-color .25s var(--e),transform .25s var(--e)}
.btn i{font-style:normal;transition:transform .3s var(--e)}
.btn:hover i{transform:translateX(3px)}
.btn-a{background:var(--t1);color:var(--ink);border-color:var(--t1)}
.btn-a:hover{background:#fff;color:var(--ink)}
.btn-b:hover{border-color:oklch(1 0 0 / .3);background:oklch(1 0 0 / .04)}
.btn-s{height:2.25rem;padding:0 1rem;font-size:.875rem}
.lnk{display:inline-flex;align-items:center;gap:.5rem;font-size:.9375rem;font-weight:500;color:var(--t1);border-bottom:1px solid var(--rule);padding-bottom:.25rem;transition:border-color .25s}
.lnk i{font-style:normal;transition:transform .3s var(--e)}
.lnk:hover{border-color:var(--t2)}
.lnk:hover i{transform:translateX(3px)}

/* header */
.hdr{position:sticky;top:0;z-index:50;height:var(--hdr);transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent}
.hdr.stuck{background:oklch(0.145 0.004 265 / .78);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-color:var(--rule-2)}
.hdr .wrap{display:flex;align-items:center;height:100%;gap:2rem}
.logo{display:inline-flex;align-items:baseline;gap:.5rem;color:var(--t1)}
.logo svg{height:.95rem;width:auto}
.logo span{font-size:1.375rem;font-weight:600;letter-spacing:-.035em;line-height:1}
.nav{display:flex;align-items:center;gap:.125rem;margin-right:auto}
.nav>a,.nav .ddb{display:inline-flex;align-items:center;gap:.375rem;height:2.25rem;padding:0 .875rem;border-radius:var(--pill);font-size:.875rem;color:var(--t2);transition:color .2s,background .2s}
.nav>a:hover,.nav .ddb:hover,.nav .ddb[aria-expanded="true"]{color:var(--t1);background:oklch(1 0 0 / .06)}
.nav>a.here,.nav .ddb.here{color:var(--t1)}
.nav .ddb svg{width:10px;height:10px;transition:transform .25s var(--e)}
.nav .ddb[aria-expanded="true"] svg{transform:rotate(180deg)}
.ddw{position:relative}
.dd{position:absolute;top:calc(100% + .625rem);left:-.75rem;padding:.5rem;background:var(--ink-2);border:1px solid var(--rule);border-radius:var(--rad);box-shadow:0 1px 0 oklch(1 0 0 / .05) inset,0 30px 70px -12px oklch(0 0 0 / .65);opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .18s,transform .3s var(--e)}
.dd::before{content:"";position:absolute;left:0;right:0;top:-.75rem;height:.75rem}
.dd.open{opacity:1;transform:none;pointer-events:auto}
.dd-p{width:640px;display:grid;grid-template-columns:minmax(0,1fr) 216px;gap:.5rem}
.dd-c{width:288px}
.dd-l{display:block;padding:.625rem .75rem .375rem;font-family:var(--mono);font-size:.625rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--t4)}
.dd-i{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:.875rem;padding:.625rem .75rem;border-radius:var(--rad-s);transition:background .2s}
.dd-i.ng{grid-template-columns:minmax(0,1fr) auto}
.dd-i:hover{background:oklch(1 0 0 / .045)}
.dd-i::after{content:"→";font-size:.875rem;color:var(--t3);opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .3s var(--e)}
.dd-i:hover::after{opacity:1;transform:none}
.dd-g{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--rad-s);background:var(--ink-3);border:1px solid var(--rule-2)}
.dd-g img{width:20px;height:20px}
.dd-t b{display:block;font-size:.9375rem;font-weight:500;letter-spacing:-.01em;color:var(--t1);line-height:1.3}
.dd-t small{display:block;font-size:.8125rem;line-height:1.4;color:var(--t3)}
.dd-in{display:flex;flex-direction:column;gap:.375rem;padding:1rem;border-radius:calc(var(--rad) - 5px);background:var(--ink);border:1px solid var(--rule-2);transition:border-color .25s,background .25s}
.dd-in:hover{border-color:var(--rule);background:oklch(0.16 0.005 265)}
.dd-lg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:.625rem}
.dd-lg i{aspect-ratio:1;display:grid;place-items:center;border-radius:6px;background:oklch(0.97 0.003 260);opacity:.9;transition:transform .35s var(--e),opacity .25s}
.dd-lg img{width:58%;height:58%;object-fit:contain}
.dd-in:hover .dd-lg i{opacity:1}
.dd-in:hover .dd-lg i:nth-child(odd){transform:translateY(-2px)}
.dd-in b{font-size:.9375rem;font-weight:500;letter-spacing:-.01em;color:var(--t1)}
.dd-in small{font-size:.8125rem;line-height:1.45;color:var(--t3)}
.dd-go{margin-top:auto;padding-top:.75rem;font-size:.8125rem;font-weight:500;color:var(--acc-txt);display:inline-flex;gap:.375rem}
.dd-go i,.dd-ft i{font-style:normal;transition:transform .3s var(--e)}
.dd-in:hover .dd-go i,.dd-ft a:hover i{transform:translateX(3px)}
.dd-ft{grid-column:1/-1;display:flex;justify-content:space-between;gap:1rem;margin:.25rem -.5rem -.5rem;padding:.75rem 1.25rem;border-top:1px solid var(--rule-2);background:oklch(1 0 0 / .02);border-radius:0 0 var(--rad) var(--rad)}
.dd-ft a{display:inline-flex;gap:.375rem;font-size:.8125rem;color:var(--t2);transition:color .2s}
.dd-ft a:hover{color:var(--t1)}
.dd-ft a:last-child{color:var(--t1);font-weight:500}
.hdr-r{display:flex;align-items:center;gap:.5rem}
.hdr-r .si{font-size:.875rem;color:var(--t2);padding:0 .75rem}
.burger{display:none;width:40px;height:40px;align-items:center;justify-content:center;color:var(--t2)}
@media(max-width:900px){.nav,.hdr-r .si{display:none}.burger{display:flex}.hdr-r{margin-left:auto}}
.mm{position:fixed;inset:var(--hdr) 0 0;z-index:49;background:var(--ink);padding:.5rem var(--px) 2rem;display:none;flex-direction:column;gap:.25rem;overflow-y:auto}
.mm-l{font-family:var(--mono);font-size:.625rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--t4);margin-top:1.5rem}
.mm.open{display:flex}
.mm a{font-size:1.5rem;letter-spacing:-.03em;padding:.5rem 0;border-bottom:1px solid var(--rule-2)}

/* sections */
.sec{padding:clamp(5rem,11vw,9.5rem) 0}
.sec-h{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem 4rem;align-items:end;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.sec-h .eb{grid-column:1/-1;margin-bottom:.5rem}
@media(max-width:860px){.sec-h{grid-template-columns:1fr}}
.rule-t{border-top:1px solid var(--rule-2)}

/* reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .9s var(--e),transform .9s var(--e)}
.rv.on{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}

/* product frame kit: rounded chrome, square rows */
.frame{position:relative;border-radius:var(--rad);background:oklch(0.155 0.004 260);border:1px solid var(--rule);box-shadow:0 1px 0 oklch(1 0 0 / .06) inset,0 40px 100px -20px oklch(0 0 0 / .7);overflow:hidden}
.frame-bar{display:flex;align-items:center;gap:.75rem;height:40px;padding:0 1rem;border-bottom:1px solid var(--rule-2);font-size:12.5px;color:var(--t3)}
.frame-bar img{width:16px;height:16px}
.frame-bar b{color:var(--t1);font-weight:500}
.frame-bar .dots{margin-left:auto;display:flex;gap:6px}
.frame-bar .dots i{width:9px;height:9px;border-radius:50%;background:oklch(1 0 0 / .1)}
.pl{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:var(--pill);font-size:11px;font-weight:500;white-space:nowrap;background:oklch(1 0 0 / .06);color:var(--t2)}
.pl.ok{background:oklch(0.76 0.15 155 / .14);color:var(--ok)}
.pl.warn{background:oklch(0.8 0.14 80 / .14);color:var(--warn)}
.pl.hi{background:oklch(0.74 0.16 50 / .16);color:var(--hi)}
.pl.crit{background:oklch(0.68 0.2 22 / .16);color:oklch(0.78 0.15 22)}
.pl.acc{background:var(--acc-soft);color:var(--acc-txt)}
.pl.hud{background:oklch(0.74 0.16 295 / .14);color:var(--hud)}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.trk{height:4px;background:oklch(1 0 0 / .08);position:relative;overflow:hidden}
.trk i{position:absolute;inset:0 auto 0 0;background:var(--acc);transition:width 1.2s var(--e)}
.hud-m{width:18px;height:18px;color:var(--hud);flex:none}
.hud-m .hr-{transform-origin:12px 12px;animation:hspin 14s linear infinite}
.hud-m .hr2{animation-duration:20s;animation-direction:reverse}.hud-m .hr3{animation-duration:28s}
@keyframes hspin{to{transform:rotate(360deg)}}
.caret{display:inline-block;width:2px;height:1em;background:var(--hud);vertical-align:-2px;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* hudson Q&A (shared) */
.hd-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:3rem 4rem;align-items:center}
.hd-qs{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;margin-top:2.25rem}
.hd-qs button{height:2.5rem;padding:0 1rem;border-radius:var(--pill);border:1px solid var(--rule);font-size:.875rem;color:var(--t2);text-align:left;transition:all .25s}
.hd-qs button:hover{color:var(--t1);border-color:oklch(1 0 0 / .26)}
.hd-qs button[aria-pressed="true"]{color:var(--t1);border-color:oklch(0.74 0.16 295 / .55);background:oklch(0.74 0.16 295 / .08)}
.hx{padding:28px;display:flex;flex-direction:column;gap:22px;min-height:400px}
.hx-qt{align-self:flex-end;max-width:80%;background:oklch(1 0 0 / .06);border-radius:var(--rad);border-bottom-right-radius:var(--rad-xs);padding:12px 16px;font-size:15px;color:var(--t1)}
.hx-qt:empty{visibility:hidden}
.hx-a{display:grid;grid-template-columns:28px 1fr;gap:14px}
.hx-a .hud-m{width:26px;height:26px}
.hx-st{font-size:12.5px;color:var(--t4);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.hx.busy .hx-st::after{content:"";width:40px;height:2px;background:linear-gradient(90deg,transparent,var(--hud),transparent);background-size:200% 100%;animation:scan 1s linear infinite}
@keyframes scan{from{background-position:100% 0}to{background-position:-100% 0}}
.hx-at{font-size:16px;line-height:1.65;color:var(--t1);min-height:8.5em;text-wrap:pretty}
.hx-src{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;min-height:20px}
.hx-src .pl{animation:rowin .5s var(--e) both}
.hx-src .pl::before{content:"";width:5px;height:5px;background:var(--hud)}
@media(max-width:960px){.hd-g{grid-template-columns:1fr}.hd-qs{flex-direction:row;flex-wrap:wrap}}

@keyframes rowin{from{opacity:0;transform:translateY(-8px)}}

/* closing */
.close{padding:clamp(5rem,10vw,8rem) 0 clamp(4rem,8vw,6rem)}
.cta{position:relative;border-radius:var(--rad-l);border:1px solid var(--rule);background:var(--ink-2);padding:clamp(2.5rem,6vw,5rem);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:2.5rem 4rem;align-items:end;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,oklch(0.62 0.2 275 / .7),transparent)}
.cta .act{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:flex-end}
@media(max-width:860px){.cta{grid-template-columns:1fr}.cta .act{justify-content:flex-start}}

/* footer */
.ft{border-top:1px solid var(--rule-2);padding:4rem 0 2.5rem}
.ft-g{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:2.5rem}
.ft-g p{font-size:.875rem;color:var(--t3);max-width:30ch;margin-top:1rem}
.ft-c{display:flex;flex-direction:column;gap:.625rem;font-size:.875rem}
.ft-c span{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t4);margin-bottom:.25rem}
.ft-c a{color:var(--t2);transition:color .2s}
.ft-c a:hover{color:var(--t1)}
.ft-x{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:4rem;padding-top:1.5rem;border-top:1px solid var(--rule-2);font-size:.8125rem;color:var(--t4)}
@media(max-width:860px){.ft-g{grid-template-columns:1fr 1fr}.ft-g>div:first-child{grid-column:1/-1}}

@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}*{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* de-template pass: status reads as type, not tinted capsules */
.pl{height:auto;padding:0;border-radius:0;background:none!important;gap:.5rem;font-family:var(--mono);font-size:.625rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--t3)}
.pl::before{content:"";width:6px;height:6px;flex:none;background:currentColor;opacity:.9}
.pl.ok{color:var(--ok)}.pl.warn{color:var(--warn)}.pl.hi{color:var(--hi)}.pl.crit{color:oklch(0.76 0.16 22)}.pl.acc{color:var(--acc-txt)}.pl.hud{color:var(--hud)}
.hx-src .pl{color:var(--t2)}.hx-src .pl::before{background:var(--hud)}
/* Hudson prompts: ruled columns, not capsules */
.hd-qs{display:grid!important;grid-template-columns:repeat(var(--qn,3),minmax(0,1fr));gap:0;width:100%;max-width:68rem;margin:2.25rem auto 0!important;border-top:1px solid var(--rule)}
.hd-qs button{position:relative;height:auto;padding:1rem 1.25rem 1rem 0;border:0;border-radius:0;background:none!important;display:flex;flex-direction:column;gap:.375rem;font-size:.9375rem;line-height:1.4;color:var(--t3);text-align:left}
.hd-qs button+button{padding-left:1.25rem;border-left:1px solid var(--rule-2)}
.hd-qs button::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:transparent;transition:background .3s}
.hd-qs button::after{counter-increment:hq;content:"0" counter(hq) " · Ask";order:-1;font-family:var(--mono);font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t4)}
.hd-qs{counter-reset:hq}
.hd-qs button:hover{color:var(--t1)}
.hd-qs button[aria-pressed="true"]{color:var(--t1)}
.hd-qs button[aria-pressed="true"]::before{background:var(--hud);box-shadow:0 0 12px oklch(0.74 0.16 295 / .6)}
.hd-qs button[aria-pressed="true"]::after{color:var(--hud)}
.eb .hud-m{width:15px;height:15px;color:var(--hud)}
@media(max-width:760px){.hd-qs{grid-template-columns:1fr}.hd-qs button,.hd-qs button+button{padding:1rem 0;border-left:0;border-bottom:1px solid var(--rule-2)}}

@media(max-width:960px) and (min-width:761px){.hd-qs{grid-template-columns:repeat(2,minmax(0,1fr))}.hd-qs button:nth-child(3){padding-left:0;border-left:0}}