/* ===== Readability layer — loaded last on every cyberpunk page.
   Sora for headings; nothing that people read sits below 12px; text grows on
   large monitors instead of floating in a narrow column; no texture over text. ===== */

:root{--display:'Sora','Instrument Sans',system-ui,sans-serif}
/* light bases: teal and greys a shade darker so they read comfortably */
html.cyl{--brass:#007585;--brass-2:#005E6B;--muted:#4A475F;--muted-2:#67647F;--scan-o:0}
html:not(.cyl){--scan-o:.22}

/* ---------- Sora ---------- */
.cy h1,.cy h2,.cy h3,.cy .sec-title,.cy .benefit,.cy .q,.cy .bench-n,.cy .ind-start,
.cy .stat b,.cy .done-state h4,.cy .faqs summary,.cy .build-item b,.cy .play b{font-family:var(--display)}
.cy .hero3 h1{font-weight:600;letter-spacing:-.032em;line-height:1.08}
.cy .sec-title{font-weight:600;letter-spacing:-.03em;line-height:1.1}
.cy h3,.cy .benefit{font-weight:600;letter-spacing:-.018em}
.cy .benefit{line-height:1.25}
.cy .btn{font-family:var(--display);font-weight:600;letter-spacing:.045em}
.cy .logo .name{font-family:var(--display);font-weight:700;letter-spacing:.08em}
.cy .stat b{font-weight:600;letter-spacing:-.03em}
.cy .m2-name,.cy .train-ribbon .lbl,.cy .dg-h{font-family:var(--display)}

/* ---------- no stripes through text ---------- */
.cy .lp-hero::after{display:none}

/* ---------- nothing people read below 12px ---------- */
.cy .eyebrow{font-size:13px;letter-spacing:.16em}
.cy .sec-head::before{font-size:12.5px;letter-spacing:.14em}
.cy .hud{font-size:12px;letter-spacing:.12em}
.cy .nav a,.cy .nav button{font-size:13px;letter-spacing:.05em}
.cy .logo .by{font-size:11.5px}
.cy .link{font-size:13.5px}
.cy .btn.sm{font-size:13px}
.cy .spec-strip{font-size:12.5px;letter-spacing:.14em}
.cy .mech-hud{font-size:12px;letter-spacing:.12em}
.cy .mech-note,.cy .hint,.cy .walk-note,.cy .photo figcaption,.cy .pk-photo span{font-size:14px}
.cy .cs-lbl,.cy .isnot .cs-lbl,.cy .stack .cs-lbl,.cy .ind-k,.cy .lab,.cy .fcard .k,.cy .pcard .k,
.cy .ftr b,.cy .ind-hint,.cy .ix-k,.cy .role-k,.cy .pq-fix .k,.cy .pq-stack .k,.cy .ind-head .live{font-size:12.5px;letter-spacing:.12em}
.cy .ac-tag,.cy .combo,.cy .cs2-ind,.cy .pq-tag,.cy .badges b,.cy .build-item i,.cy .cs2-plat span{font-size:12px;letter-spacing:.1em}
.cy .cs2-l,.cy .cs2-stage,.cy .ind-index .ix-n{font-size:11.5px;letter-spacing:.14em}
.cy .pk-list label.on::after{font-size:10.5px}
.cy .pk-list label>span::before,.cy .walk li::before{font-size:12px}
.cy .role,.cy .cs-chip,.cy .ba-tab,.cy .stack-chips span{font-size:13px}
.cy .feeds li{font-size:14px}.cy .feeds li em{font-size:12.5px}
.cy .ba-list li{font-size:13.5px}.cy .ba-diff,.cy .ba-cols div{font-size:13px}
.cy .ba-diff .meta,.cy .ba-cols div b,.cy .ba .lbl{font-size:12px}
.cy .ba-hint{font-size:12.5px}
.cy .step{font-size:12.5px}
.cy .sw{font-size:12.5px}
.cy .base-sw button{font-size:11px}
.cy .mnav a small,.cy .menu a b{font-size:12px}

/* ---------- body copy a notch larger ---------- */
body.cy{font-size:17px}
.cy .pcard p,.cy .step-c p,.cy .play p,.cy .cs2-t,.cy .ac-after,.cy .fcard p,.cy .build-item span,
.cy .isnot li,.cy .ticks li,.cy .pk-list label,.cy .pq-fix-q b,.cy .stack-n,.cy .faqs details p{font-size:16px;line-height:1.55}
.cy .ac-before{font-size:14.5px}
.cy .cs2-bent,.cy .play-out,.cy .pq-fix-a span:last-child{font-size:16.5px}
.cy .sec-sub{font-size:clamp(19px,1.5vw,23px)}
.cy .hero3 .lead{font-size:clamp(19px,1.5vw,24px)}

/* ---------- large monitors: grow, don't float ---------- */
@media (min-width:1600px){
  :root{--wrap:1380px}
  body.cy{font-size:18px}
  .cy .hero3 h1{font-size:clamp(60px,4.3vw,84px);max-width:20ch}
  .cy .sec-title{font-size:clamp(48px,3.3vw,64px)}
  .cy .sec-sub,.cy .hero3 .lead{font-size:clamp(21px,1.35vw,26px)}
  .cy .benefit{font-size:clamp(28px,1.9vw,36px)}
  .cy h3{font-size:clamp(20px,1.3vw,25px)}
  .cy .pcard p,.cy .step-c p,.cy .play p,.cy .cs2-t,.cy .ac-after,.cy .fcard p,.cy .isnot li,.cy .ticks li,
  .cy .pk-list label,.cy .stack-n,.cy .faqs details p,.cy .body-p{font-size:17.5px}
  .cy .eyebrow,.cy .spec-strip,.cy .mech-hud,.cy .hud,.cy .sec-head::before{font-size:13.5px}
  .cy .nav a{font-size:14px}
  .cy .btn{font-size:15.5px;padding:17px 28px 17px 26px}
  .cy .mech-note,.cy .hint,.cy .photo figcaption{font-size:15px}
  .lp-hero .mech-hero{max-width:980px}
  .mech-how{max-width:880px}
}
@media (min-width:2200px){
  :root{--wrap:1600px}
  body.cy{font-size:19.5px}
  .cy .hero3 h1{font-size:clamp(84px,4vw,104px)}
  .cy .sec-title{font-size:clamp(62px,3vw,78px)}
  .cy .sec-sub,.cy .hero3 .lead{font-size:28px}
  .cy .pcard p,.cy .step-c p,.cy .play p,.cy .cs2-t,.cy .ac-after,.cy .fcard p,.cy .isnot li,.cy .ticks li,
  .cy .pk-list label,.cy .stack-n,.cy .faqs details p,.cy .body-p{font-size:19px}
  .cy .eyebrow,.cy .spec-strip,.cy .mech-hud,.cy .hud,.cy .sec-head::before,.cy .nav a{font-size:15px}
  .cy .btn{font-size:17px}
  .lp-hero .mech-hero{max-width:1120px}
  .mech-how{max-width:1000px}
}

/* client: bigger header */
.cy .hdr .wrap{height:88px}
.cy .logo{gap:12px}
.cy .logo .mark{width:38px;height:38px}
.cy .logo .name{font-size:24px}
.cy .logo .by{font-size:12.5px}
.cy .nav a,.cy .nav button{font-size:14.5px;padding:12px 12px}
.cy .hdr-cta .btn{font-size:15px;padding:14px 20px}
@media (min-width:1600px){.cy .hdr .wrap{height:96px}.cy .logo .name{font-size:27px}.cy .logo .mark{width:42px;height:42px}.cy .nav a{font-size:16px}}
@media (max-width:1100px){.cy .nav a,.cy .nav button{font-size:13px;padding:10px 8px}}
@media (max-width:900px){.cy .hdr .wrap{height:72px}.cy .logo .name{font-size:21px}.cy .logo .mark{width:34px;height:34px}}

/* "On this page" rail (assets/js/rail.js) */
.prail{display:none}
.prail.show{display:block;position:fixed;z-index:40;top:calc(50% + 44px);transform:translateY(-50%)}
.prail .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin:0 0 12px}
.prail a{display:flex;gap:9px;align-items:baseline;padding:7px 0 7px 12px;border-left:2px solid var(--line);
  font-family:var(--body);font-size:13px;line-height:1.3;color:var(--muted);text-decoration:none;transition:color .2s,border-color .2s,background .2s}
.prail a .n{font-family:var(--mono);font-size:10.5px;color:var(--muted-2);letter-spacing:.06em}
.prail a:hover{color:var(--ink)}
.prail a.on{color:var(--ink);font-weight:600;border-left-color:var(--rust);background:linear-gradient(90deg,rgba(217,15,105,.07),transparent)}
.prail a.on .n{color:var(--rust)}
.prail a:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.has-rail main > section[id]{scroll-margin-top:84px}
@media (prefers-reduced-motion:reduce){.prail a{transition:none}}
.prail.tight a{font-size:12px;gap:7px;padding:6px 0 6px 9px}
.prail.tight a .n{font-size:9.5px}
.prail.tight .k{font-size:10px;letter-spacing:.1em}

/* home: case studies grid (replaces the old status board) */
.hcs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1100px){.hcs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.hcs{grid-template-columns:1fr}}
.hcs-card{display:flex;flex-direction:column;gap:8px;padding:18px 18px 16px;background:var(--white);border:1px solid var(--line);text-decoration:none;color:var(--text);transition:border-color .2s,box-shadow .2s,transform .2s}
.hcs-card:hover{border-color:var(--ink);box-shadow:5px 5px 0 var(--rust);transform:translate(-2px,-2px)}
.hcs-card:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.hcs-ind{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass)}
.hcs-card b{font-family:var(--display);font-weight:600;font-size:19px;line-height:1.25;color:var(--ink)}
.hcs-card p{margin:0;font-size:15.5px;line-height:1.5;color:var(--text)}
.hcs-card p span{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--rust);margin-bottom:2px}
.hcs-card i{margin-top:auto;padding-top:10px;border-top:1px dashed var(--line);font-style:normal;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.hcs-all{background:var(--ink);border-color:var(--ink)}
.hcs-all b{color:#fff}.hcs-all p{color:#C9CCD8}.hcs-all i{color:var(--volt);border-top-color:rgba(255,255,255,.2)}
.hcs-all:hover{box-shadow:5px 5px 0 var(--brass)}

/* case studies: the full story */
.cs2{display:flex;flex-direction:column}
.cs2-story{margin:16px 0 0;border-top:1px dashed var(--line-2);padding-top:12px}
.cs2-story summary{cursor:pointer;list-style:none;font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);display:flex;align-items:center;gap:8px}
.cs2-story summary::-webkit-details-marker{display:none}
.cs2-story summary::before{content:"▸";color:var(--rust);transition:transform .2s}
.cs2-story[open] summary::before{transform:rotate(90deg)}
.cs2-story[open] summary{color:var(--rust);margin-bottom:12px}
.cs2-story summary:hover{color:var(--rust)}
.cs2-story summary:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.cs2-steps{margin:0 0 14px;padding:0;list-style:none;counter-reset:st}
.cs2-steps li{counter-increment:st;position:relative;padding:0 0 10px 34px;font-size:16px;line-height:1.55;color:var(--text)}
.cs2-steps li::before{content:counter(st,decimal-leading-zero);position:absolute;left:0;top:1px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--volt);background:var(--ink);padding:2px 5px}
.cs2-more{display:inline-block;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line-2);font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);text-decoration:none}
.cs2-more:hover{color:var(--rust)}
.cs2-plat{margin-top:auto}
.has-rail .cs2[id],.cs2[id]{scroll-margin-top:100px}
.cs2-grid{align-items:start}

/* a hero machine drawn straight onto the page: no frame, no panel, traces run off the edges */
.cy .mech-bare .mech-stage{border:0;background:none;box-shadow:none;padding:0;overflow:visible}
.lp-hero .mech-bare .mech-stage::after,.lp-hero .mech-bare::after{display:none}
.mech-bare .mech-stage svg{overflow:visible}
.lp-hero{overflow-x:clip}
.mech-bare .mech-note{margin-top:4px}
/* the Quarry board is a wide, short strip on desktop so it sits inside the first screen */
@media (min-width:720px){.lp-hero .mech-bare{max-width:1060px;margin-top:22px}}
.mech-stage svg.mech-wide .lbl{font-size:12px;letter-spacing:.04em}
@media (min-width:720px){.lp-hero .mech-bare{max-width:980px;margin-top:14px}}
.lp-hero .lead{text-wrap:balance}
/* the Assembler watch sits on the hero, sized to fit the first screen */
@media (min-width:720px){.lp-hero .mech-bare.mech-watch{max-width:560px;margin-top:6px}}
.mech-how.mech-steps{max-width:1000px}
.mech-how.mech-steps{max-width:1000px}

/* every animation sits on the page itself: no box, no border, no corner brackets, no header strip */
.cy .mech-stage,.cy .sec-diagram,.cy .machine{border:0!important;background:none!important;box-shadow:none!important}
.cy .mech-stage{padding:0}
.cy .mech-stage svg,.cy .sec-diagram svg{overflow:visible}
.mech-hud,.lp-hero .mech-stage::after,.lp-hero .mech-hero::after{display:none!important}
.cy .sec-diagram{padding:0}
/* the Assembler watch rises from the bottom of the hero */
@media (min-width:720px){.lp-hero .mech-bare.mech-watch{max-width:1000px;margin-top:10px}}

/* home: pricing — free licences, paid engineering; no invented figures */
.price{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.price-col{padding:28px 28px 30px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.price-col:last-child{border-right:0}
.price-k{margin:0;font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.price-big{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(44px,4.4vw,64px);line-height:1;letter-spacing:-.03em;color:var(--ink)}
.price-big.sm{font-size:clamp(24px,2vw,30px);letter-spacing:-.015em;font-weight:600}
.price-t{margin:0;font-size:16.5px;line-height:1.55;color:var(--text);max-width:34ch}
.price-list{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.price-list li{position:relative;padding-left:22px;font-size:16px;line-height:1.45;color:var(--text)}
.price-list li::before{content:"";position:absolute;left:2px;top:.45em;width:8px;height:8px;background:var(--rust);transform:rotate(45deg)}
.price-slots{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:10px}
.price-slots i{width:14px;height:22px;border:1.5px solid var(--ink);background:var(--volt);animation:slot-on 3s steps(1) infinite}
.price-slots i:nth-child(odd){animation-delay:.3s}.price-slots i:nth-child(3n){animation-delay:.6s}
.price-slots span{margin-left:10px;font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
@keyframes slot-on{0%,92%{background:var(--volt)}94%{background:#fff}96%,100%{background:var(--volt)}}
.price-cta{background:var(--ink)}
.price-cta .price-k{color:var(--volt)}.price-cta .price-big{color:#fff}.price-cta .price-t{color:#C9CCD8}
.price-cta .btn{align-self:flex-start;margin-top:auto;background:var(--volt);color:var(--ink)}
@media (max-width:900px){.price{grid-template-columns:1fr}.price-col{border-right:0;border-bottom:1px solid var(--line)}}
@media (prefers-reduced-motion:reduce){.price-slots i{animation:none}}
.cy .price-cta .btn{background:var(--volt)!important;color:var(--ink)!important}
.role-more{margin:14px 0 0}
/* home case studies: 7 cards, last row centred, one clear CTA underneath */
.hcs{display:flex!important;flex-wrap:wrap;justify-content:center}
.hcs .hcs-card{flex:0 1 calc((100% - 42px)/4)}
@media (max-width:1100px){.hcs .hcs-card{flex-basis:calc((100% - 14px)/2)}}
@media (max-width:560px){.hcs .hcs-card{flex-basis:100%}}
.hcs-cta{justify-content:center;margin-top:30px}
/* headline glitch ghosts follow the headline's own line breaks */
.cy .hero3 h1[data-text]::before,.cy .hero3 h1[data-text]::after{white-space:pre-line;text-align:inherit}
.lp-hero .lead{max-width:44ch;margin-left:auto;margin-right:auto}
.hcs-card i{margin-top:auto}
.hcs-read{font-style:normal;font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--brass);padding-top:2px}
.hcs-card:hover .hcs-read{color:var(--rust)}
/* CTA at the end of each "After" section */
.after-cta{margin:34px auto 0;padding-top:26px;border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.after-cta p{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.01em;color:var(--ink)}
.after-cta .ctas{justify-content:center;margin:0}

/* home: Industries — glyph list, a live scene per industry, problem -> result board */
.indA{display:grid;grid-template-columns:290px minmax(0,1fr);gap:30px;align-items:start}
.indA-list{display:flex;flex-direction:column;gap:6px}
.indA-list button{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;text-align:left;border:1px solid var(--line);background:var(--white);padding:10px 12px;cursor:pointer;color:inherit;font:inherit;transition:border-color .2s,background .2s}
.indA-list button svg{width:40px;height:40px;display:block}
.indA-list .code{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;color:var(--muted-2)}
.indA-list .nm{display:block;font-family:var(--display);font-weight:600;font-size:15.5px;line-height:1.25;color:var(--ink)}
.indA-list button:hover{border-color:var(--ink)}
.indA-list button[aria-selected="true"]{background:var(--ink);border-color:var(--ink)}
.indA-list button[aria-selected="true"] .nm{color:#fff}.indA-list button[aria-selected="true"] .code{color:var(--volt)}
.indA-list button[aria-selected="true"] svg .g{stroke:var(--volt)}
.indA-list button:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.indA-board{min-width:0}
.indA-scene{display:block;width:100%;height:auto;margin-bottom:14px;overflow:hidden}
.indA-scene .lbl{font-family:var(--mono);font-size:11px;fill:var(--muted-2)}
.indA-scene .lbl.k{fill:var(--ink);font-weight:600}.indA-scene .lbl.v{fill:var(--volt);font-weight:600}.indA-scene .lbl.t{fill:var(--brass);font-weight:600}.indA-scene .lbl.m{fill:var(--rust);font-weight:600}.indA-scene .lbl.w{fill:#E8EAF2}
.indA-row{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:start;padding-top:14px;border-top:1px solid var(--ink)}
.indA-k{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.indA-prob{font-family:var(--display);font-weight:600;font-size:clamp(19px,1.7vw,23px);line-height:1.3;color:var(--ink);margin:6px 0 0}
.indA-out{font-family:var(--display);font-weight:600;font-size:clamp(17px,1.4vw,20px);line-height:1.35;color:var(--brass-2,#005E6B);margin:6px 0 0}
.indA-arrow{font-family:var(--mono);color:var(--muted-2);font-size:22px;padding-top:30px}
.indA-fix{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;border-top:1px dashed var(--line-2);margin-top:16px;padding-top:12px}
.indA-chip{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border:1px solid var(--line-2);color:var(--muted-2);background:var(--white)}
.indA-chip.on{background:var(--ink);color:var(--volt);border-color:var(--ink)}
.indA-play{font-size:15.5px;color:var(--text)}
@media (max-width:900px){.indA{grid-template-columns:1fr}.indA-list{flex-direction:row;overflow-x:auto;padding-bottom:4px}.indA-list button{flex:0 0 auto;grid-template-columns:32px auto}.indA-list button svg{width:32px;height:32px}.indA-row{grid-template-columns:1fr}.indA-arrow{display:none}}
/* Industries page: same language as the home Industries section */
.indP-head{margin-bottom:18px}
.indP-code{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;color:var(--rust);font-weight:600}
.indP-code svg{width:34px;height:34px;display:block}
.indP-board{max-width:980px}
.indP-board .indA-scene{max-width:820px}
.indP-lbl{margin:34px 0 12px}
.ind-index .ix-g{display:inline-block;width:26px;height:26px;flex:0 0 26px;vertical-align:middle}
.ind-index .ix-g svg{width:26px;height:26px;display:block}
.ind-index a{grid-template-columns:26px 1fr;row-gap:2px;align-items:center}
.ind-index .ix-g{grid-row:span 2}
.ind-index .ix-n{padding-top:0}
.ind-index a.on .ix-g svg .g{stroke:var(--brass)}
.indP-head::before{display:none!important}
/* Industries page v2: problem zone and solution zone clearly split */
.indP-zone{max-width:980px}
.indP-zone.is-fix{margin-top:44px}
.indP-h{display:flex;align-items:center;gap:12px;margin:0 0 18px;font-family:var(--display);font-weight:700;font-size:clamp(20px,1.6vw,24px);letter-spacing:-.01em;color:var(--ink)}
.indP-h i{flex:0 0 auto;width:12px;height:12px;transform:rotate(45deg)}
.indP-h.is-prob i{background:var(--rust);box-shadow:0 0 0 4px rgba(217,15,105,.14)}
.indP-h.is-fix i{background:var(--brass);box-shadow:0 0 0 4px rgba(0,117,133,.14)}
.indP-h::after{content:"";flex:1;height:1px;background:var(--line)}
.indP-h.is-prob{color:var(--rust)}.indP-h.is-fix{color:var(--brass)}
.indP-zone .indA-scene{max-width:820px}
.indP-prob{margin:16px 0 0;padding-left:18px;border-left:3px solid var(--rust);font-family:var(--display);font-weight:600;font-size:clamp(20px,1.8vw,25px);line-height:1.3;color:var(--ink);max-width:40ch}
.indP-zone .indA-fix{border-top:0;margin:0 0 18px;padding-top:0}
.indP-out{display:flex;flex-direction:column;gap:6px;margin:18px 0 0;padding:16px 20px;border-left:3px solid var(--brass);background:rgba(0,117,133,.06);font-family:var(--display);font-weight:600;font-size:clamp(18px,1.5vw,21px);line-height:1.35;color:var(--brass-2,#005E6B)}
.indP-out .indA-k{color:var(--brass)}
/* Industries page, format A: 01 problem -> 02 how we solve it -> 03 result, lit one after the other */
.indS{max-width:1000px}
.indS .indA-scene{max-width:820px;margin:0 0 6px}
.indS-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-2)}
.indS-step{position:relative;padding:22px 24px 6px 0;transition:opacity .45s ease}
.indS-step+.indS-step{padding-left:24px;border-left:1px solid var(--line)}
.indS-bar{position:absolute;left:0;right:0;top:-1px;height:3px;background:currentColor;transform:scaleX(0);transform-origin:left;color:var(--brass)}
.indS-step.s1 .indS-bar{color:var(--rust)}
.indS-n{display:block;font-family:var(--display);font-weight:700;font-size:clamp(34px,3.2vw,44px);line-height:1;letter-spacing:-.03em;color:var(--brass)}
.indS-step.s1 .indS-n,.indS-step.s1 .indS-k{color:var(--rust)}
.indS-k{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--brass);margin:12px 0 0}
.indS-big{font-family:var(--display);font-weight:600;font-size:clamp(18px,1.6vw,22px);line-height:1.32;color:var(--ink);margin:10px 0 0}
.indS-big.t{color:var(--brass-2,#005E6B)}
.indS-chips{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 0}
.indS-mid{font-family:var(--display);font-weight:600;font-size:17px;line-height:1.35;color:var(--ink);margin:10px 0 0}
/* the sequence: dim all, light the active one, its bar fills while it is active */
.indS.is-seq .indS-step{opacity:.32}
.indS.is-seq .indS-step.on{opacity:1}
.indS.is-seq .indS-step.on .indS-bar{transform:scaleX(1);transition:transform var(--seq,3.2s) linear}
.indS.is-seq .indS-step.done{opacity:1}
.indS.is-seq .indS-step.done .indS-bar{transform:scaleX(1)}
.indS-lbl{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin:44px 0 0}
.indS-plays{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 44px;margin-top:10px}
.indS-play{border-top:1px solid var(--line);padding:14px 0 12px}
.indS-tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass)}
.indS-pt{font-family:var(--display);font-weight:600;font-size:17.5px;line-height:1.3;color:var(--ink);margin:5px 0 0}
.indS-po{font-size:15.5px;line-height:1.5;color:var(--text);margin:4px 0 0}
@media (max-width:820px){.indS-steps,.indS-plays{grid-template-columns:1fr}.indS-step+.indS-step{padding-left:0;border-left:0;border-top:1px solid var(--line)}.indS-step{padding-right:0}}
@media (prefers-reduced-motion:reduce){.indS.is-seq .indS-step{opacity:1}.indS.is-seq .indS-step .indS-bar{transform:scaleX(1);transition:none}}
/* founder portraits arrive already styled (white grid, circuit lines): show them clean, no CRT tint */
.cy [data-photo^="founder-"]{background:#F4FAFB;-webkit-mask-image:none!important;mask-image:none!important}
.cy [data-photo^="founder-"] img{animation:none!important;filter:none!important;transform:none!important;opacity:1!important;clip-path:none!important}
.cy [data-photo^="founder-"]::before,.cy [data-photo^="founder-"]::after{display:none!important}
.cy [data-photo^="founder-"] img{-webkit-mask-image:none!important;mask-image:none!important}
/* ---------- founder cards: glitch signal over colour portraits (founders-fx.js adds the layers) ---------- */
.cy .fcard [data-photo^="founder-"]{position:relative;overflow:hidden}
.cy .fcard [data-photo^="founder-"] .fx{position:absolute;inset:0;pointer-events:none;display:block;z-index:2}
/* tinted copies of the photo, shown only during a burst, offset and sliced */
.cy .fcard [data-photo^="founder-"] .fx-r,.cy .fcard [data-photo^="founder-"] .fx-c{background-image:var(--fx-src);background-size:cover;background-position:center;background-blend-mode:multiply;mix-blend-mode:screen;opacity:0}
.cy .fcard [data-photo^="founder-"] .fx-r{background-color:#D90F69}
.cy .fcard [data-photo^="founder-"] .fx-c{background-color:#00B8CC}
/* a bright band sweeping down the signal, plus faint scanlines */
.cy .fcard [data-photo^="founder-"] .fx-band{inset:auto 0 auto 0;top:-30%;height:22%;background:linear-gradient(180deg,transparent,rgba(0,184,204,.10) 55%,rgba(255,255,255,.26) 92%,transparent);mix-blend-mode:screen;animation:fx-band 4.6s linear infinite}
.cy .fcard [data-photo^="founder-"].fx-on::after{content:"";display:block!important;position:absolute;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(10,10,18,.07) 0 1px,transparent 1px 3px)}
.cy .fcard [data-photo^="founder-"].fx-on img{animation:fx-img 6.4s steps(1) infinite!important}
.cy .fcard [data-photo^="founder-"].fx-on .fx-r{animation:fx-r 6.4s steps(1) infinite}
.cy .fcard [data-photo^="founder-"].fx-on .fx-c{animation:fx-c 6.4s steps(1) infinite}
.cy .fcard:nth-child(2) [data-photo^="founder-"] img,.cy .fcard:nth-child(2) [data-photo^="founder-"] .fx,.cy .fcard:nth-child(2) h3::before,.cy .fcard:nth-child(2) h3::after{animation-delay:-2.1s!important}
.cy .fcard:nth-child(3) [data-photo^="founder-"] img,.cy .fcard:nth-child(3) [data-photo^="founder-"] .fx,.cy .fcard:nth-child(3) h3::before,.cy .fcard:nth-child(3) h3::after{animation-delay:-4.3s!important}
@keyframes fx-img{0%,84%,100%{transform:none;clip-path:none}85%{transform:translateX(-5px);clip-path:polygon(0 0,100% 0,100% 38%,0 38%,0 44%,100% 44%,100% 100%,0 100%)}86%{transform:translateX(4px) skewX(-3deg);clip-path:none}87%{transform:none}92%{transform:translateX(2px)}93%{transform:none}}
@keyframes fx-r{0%,84%,100%{opacity:0;transform:none;clip-path:none}85%{opacity:.9;transform:translateX(9px);clip-path:inset(14% 0 62% 0)}86%{opacity:.8;transform:translateX(-6px);clip-path:inset(52% 0 24% 0)}87%{opacity:.6;transform:translateX(4px);clip-path:inset(0 0 0 0)}88%{opacity:0}92%{opacity:.7;transform:translateX(-3px);clip-path:inset(70% 0 12% 0)}93%{opacity:0}}
@keyframes fx-c{0%,84%,100%{opacity:0;transform:none;clip-path:none}85%{opacity:.85;transform:translateX(-10px);clip-path:inset(30% 0 48% 0)}86%{opacity:.75;transform:translateX(7px);clip-path:inset(8% 0 80% 0)}87%{opacity:.55;transform:translateX(-4px);clip-path:inset(0 0 0 0)}88%{opacity:0}92%{opacity:.6;transform:translateX(3px);clip-path:inset(40% 0 44% 0)}93%{opacity:0}}
@keyframes fx-band{0%{top:-30%}70%,100%{top:110%}}
/* the name glitches in the same beat */
.cy .fcard h3[data-text]{position:relative}
.cy .fcard h3[data-text]::before,.cy .fcard h3[data-text]::after{content:attr(data-text);position:absolute;left:0;right:0;top:0;padding:inherit;opacity:0;pointer-events:none}
.cy .fcard h3[data-text]::before{color:#D90F69;animation:fx-n1 6.4s steps(1) infinite}
.cy .fcard h3[data-text]::after{color:#00A3B8;animation:fx-n2 6.4s steps(1) infinite}
@keyframes fx-n1{0%,84%,100%{opacity:0;transform:none}85%{opacity:.9;transform:translate(3px,-1px);clip-path:inset(0 0 55% 0)}86%{opacity:.8;transform:translate(-2px,1px);clip-path:inset(50% 0 0 0)}87%{opacity:0}}
@keyframes fx-n2{0%,84%,100%{opacity:0;transform:none}85%{opacity:.9;transform:translate(-3px,1px);clip-path:inset(45% 0 0 0)}86%{opacity:.8;transform:translate(2px,-1px);clip-path:inset(0 0 60% 0)}87%{opacity:0}}
/* scan-in the first time the card is seen */
.cy .fcard:not(.fx-in) [data-photo^="founder-"].fx-on{clip-path:inset(0 0 100% 0)}
.cy .fcard.fx-in [data-photo^="founder-"].fx-on{animation:fx-scanin .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes fx-scanin{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
/* hover: an immediate burst */
.cy .fcard.fx-hit [data-photo^="founder-"] img{animation:fx-hit-img .42s steps(1) 1!important}
.cy .fcard.fx-hit [data-photo^="founder-"] .fx-r{animation:fx-hit-r .42s steps(1) 1!important}
.cy .fcard.fx-hit [data-photo^="founder-"] .fx-c{animation:fx-hit-c .42s steps(1) 1!important}
@keyframes fx-hit-img{0%{transform:translateX(-5px)}25%{transform:translateX(4px) skewX(-3deg)}50%{transform:translateX(-2px)}75%,100%{transform:none}}
@keyframes fx-hit-r{0%{opacity:.9;transform:translateX(9px);clip-path:inset(14% 0 62% 0)}25%{opacity:.8;transform:translateX(-6px);clip-path:inset(52% 0 24% 0)}50%{opacity:.5;transform:translateX(3px);clip-path:none}75%,100%{opacity:0}}
@keyframes fx-hit-c{0%{opacity:.85;transform:translateX(-10px);clip-path:inset(30% 0 48% 0)}25%{opacity:.75;transform:translateX(7px);clip-path:inset(8% 0 80% 0)}50%{opacity:.5;transform:translateX(-3px);clip-path:none}75%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.cy .fcard h3[data-text]::before,.cy .fcard h3[data-text]::after{display:none}}

/* client logo (2026-10-13): viewfinder + point, no glow */
.cy .logo .mark.sv,.logo .mark.sv{filter:none}

/* ---- v2 decks (Oct 2026): Inside {product}, declarations, capabilities, editions, one flow ---- */
.cy .deep{border-top:1px solid var(--line,#E2E5E8)}
.cy .decl{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:26px;align-items:start;margin-top:8px}
.cy .decl-code{background:#0A0A12;color:#E6E9EE;border:1px solid #1E2230;min-width:0;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}
.cy .decl-h{display:flex;justify-content:space-between;gap:12px;margin:0;padding:12px 18px;border-bottom:1px solid #1E2230;font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#35C2D1}
.cy .decl-h span:last-child{color:#8C92A0}
.cy .decl-code pre{margin:0;padding:18px;overflow-x:auto;font-family:var(--mono);font-size:14px;line-height:1.6;color:#E6E9EE;white-space:pre}
.cy .decl-terms dl{display:grid;grid-template-columns:minmax(120px,auto) 1fr;margin:10px 0 0;border-top:1px solid var(--line,#E2E5E8)}
.cy .decl-terms dt{font-family:var(--mono);font-size:13.5px;letter-spacing:.06em;color:var(--teal,#007585);padding:11px 14px 11px 0;border-bottom:1px solid var(--line,#E2E5E8)}
.cy .decl-terms dd{margin:0;padding:11px 0;border-bottom:1px solid var(--line,#E2E5E8);font-size:16px}
.cy .decl-n{margin-top:16px;font-family:var(--mono);font-size:13.5px;letter-spacing:.06em;color:var(--muted,#5E6573)}
.cy .caps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:38px}
.cy .cap{background:#fff;border:1px solid var(--line,#E2E5E8);padding:24px 26px;min-width:0;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}
.cy .cap-k{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#D90F69;margin:0 0 6px}
.cy .cap h3{margin:0 0 12px}
.cy .cap ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.cy .cap li{font-size:16px;line-height:1.5;padding-left:16px;position:relative}
.cy .cap li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;background:var(--teal,#007585)}
.cy .cap-foot{margin:16px 0 0;padding-top:12px;border-top:1px dashed var(--line,#E2E5E8);font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--muted,#5E6573)}
.cy .ladder{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px;counter-reset:l}
.cy .ladder li{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;padding:6px 10px;border:1px solid var(--teal,#007585);color:var(--teal,#007585);position:relative}
.cy .ladder li:not(:last-child)::after{content:"→";position:absolute;right:-12px;top:5px;color:var(--muted,#5E6573);font-size:12px}
.cy .ladder li{margin-right:10px}
.cy .fits{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:12px}
.cy .fit{border-top:3px solid var(--teal,#007585);padding:14px 0 0;min-width:0}
.cy .fit b{display:block;font-family:var(--display);font-size:17px;line-height:1.25;color:var(--ink,#0A0A12)}
.cy .fit p{margin:6px 0 0;font-size:15px;line-height:1.45;color:var(--muted,#5E6573)}
.cy .boundary{margin-top:26px;border-left:4px solid #D90F69;padding:12px 18px;background:rgba(217,15,105,.04);font-size:16px;max-width:none}
.cy .edn{margin-top:44px;border:1px solid var(--line,#E2E5E8);background:#fff;padding:26px;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}
.cy .edn-head h3{margin:4px 0 6px}.cy .edn-head p:last-child{color:var(--muted,#5E6573);margin:0}
.cy .edn-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:20px}
.cy .edn-col{border:1px solid var(--line,#E2E5E8);padding:16px 18px;min-width:0}
.cy .edn-col.on{border-color:var(--teal,#007585);box-shadow:inset 0 3px 0 var(--teal,#007585)}
.cy .edn-k{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal,#007585);margin:0 0 10px}
.cy .edn-col ul,.cy .edn-col ol{margin:0;padding-left:18px;display:grid;gap:8px;font-size:15.5px;line-height:1.45}
.cy .edn-n{margin:16px 0 0;font-size:15px;color:var(--muted,#5E6573)}
.cy .flow3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:10px;position:relative}
.cy .f3{background:#fff;border:1px solid var(--line,#E2E5E8);padding:24px;position:relative;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}
.cy .f3-k{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal,#007585);margin:0 0 8px}
.cy .f3 h3{margin:0 0 8px}.cy .f3 p:last-child{margin:0;color:var(--muted,#5E6573)}
.cy .life:has(> .step-c:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.cy .fits{grid-template-columns:repeat(2,minmax(0,1fr))}.cy .edn-cols{grid-template-columns:1fr}.cy .life:has(> .step-c:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.cy .decl,.cy .caps,.cy .flow3{grid-template-columns:1fr}}
@media (max-width:560px){.cy .fits,.cy .life:has(> .step-c:nth-child(4):last-child){grid-template-columns:1fr}.cy .decl-code pre{font-size:12.5px}}

/* ---- stack logos as cyberpunk chips (Oct 2026) ---- */
.cy .stack-chips.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin:14px 0 4px}
.cy .stack-chips.logos .tl{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-height:88px;padding:12px 6px 10px;background:#fff;border:1px solid #DCE2E6;overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));transition:border-color .2s,background-color .2s}
.cy .stack-chips.logos .tl::before{content:"";position:absolute;left:0;right:0;top:-30%;height:30%;background:linear-gradient(180deg,transparent,rgba(53,194,209,.18),transparent);opacity:0;pointer-events:none}
.cy .stack-chips.logos .tl svg{width:28px;height:28px;fill:#007585;transition:fill .2s,filter .2s}
.cy .stack-chips.logos .tl b{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.04em;line-height:1.2;color:#2A2E38;text-align:center}
.cy .stack-chips.logos .tl.mono i{font-style:normal;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.02em;color:#007585;min-width:40px;height:28px;padding:0 6px;display:grid;place-items:center;
  background:linear-gradient(#007585,#007585) left top/7px 2px no-repeat,linear-gradient(#007585,#007585) left top/2px 7px no-repeat,linear-gradient(#007585,#007585) right top/7px 2px no-repeat,linear-gradient(#007585,#007585) right top/2px 7px no-repeat,
  linear-gradient(#007585,#007585) left bottom/7px 2px no-repeat,linear-gradient(#007585,#007585) left bottom/2px 7px no-repeat,linear-gradient(#007585,#007585) right bottom/7px 2px no-repeat,linear-gradient(#007585,#007585) right bottom/2px 7px no-repeat;transition:color .2s}
.cy .stack-chips.logos .tl:hover{border-color:#D90F69;background:#FFF8FB}
.cy .stack-chips.logos .tl:hover svg{fill:#D90F69;filter:drop-shadow(0 0 6px rgba(217,15,105,.45))}
.cy .stack-chips.logos .tl:hover i{color:#D90F69}
@media (prefers-reduced-motion:no-preference){.cy .stack-chips.logos .tl:hover::before{opacity:1;animation:tl-scan 1.1s linear infinite}}
@keyframes tl-scan{from{top:-30%}to{top:100%}}
@media (max-width:560px){.cy .stack-chips.logos{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---- lean Inside (Oct 2026) ---- */
.cy .lean .lean4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:6px}
.cy .lean .lt{background:#fff;border:1px solid #DCE2E6;border-top:3px solid #007585;padding:18px 18px 20px;display:grid;gap:8px;align-content:start;min-width:0;clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
.cy .lean .lt b{font-family:var(--display);font-size:18px;line-height:1.25;color:var(--ink,#0A0A12)}
.cy .lean .lt span{font-size:15px;line-height:1.5;color:var(--muted,#5E6573)}
.cy .lean .boundary{margin-top:20px;font-size:15px}
@media (max-width:1000px){.cy .lean .lean4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cy .lean .lean4{grid-template-columns:1fr}}