/* Platform page atmosphere: HUD chrome, scan reveals, role selector, flagged rows. */

/* --- spec strip under the fold title --- */
.spec-strip{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 18px;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);margin:-26px 0 34px}
.spec-strip i{width:6px;height:6px;background:var(--brass);display:inline-block;flex:none;animation:sp-blink 2.4s steps(2) infinite}
.spec-strip span{display:inline-flex;align-items:center;gap:10px}
.spec-strip span+span::before{content:"";width:22px;height:1px;background:var(--line-2)}
@keyframes sp-blink{50%{opacity:.25}}

/* --- benefit statement: one scan wipe on first view --- */
.benefit{position:relative}
.benefit::after{content:"";position:absolute;left:-6px;right:-6px;top:0;height:2px;background:var(--brass);
  box-shadow:0 0 14px var(--brass);opacity:0;pointer-events:none}
.benefit.in::after{animation:scan-down 1.15s cubic-bezier(.4,0,.2,1) .15s 1}
@keyframes scan-down{0%{opacity:0;top:0}12%{opacity:.9}88%{opacity:.9}100%{opacity:0;top:100%}}

/* --- role selector --- */
.roles{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px;padding:0;list-style:none}
.role{font-family:var(--mono);font-size:12px;letter-spacing:.06em;padding:9px 14px;border:1px solid var(--line-2);
  background:transparent;color:var(--muted);cursor:pointer;transition:all .2s;white-space:nowrap;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%)}
.role:hover{color:var(--ink,var(--navy));border-color:var(--ink,var(--navy))}
.role.on{background:var(--ink,var(--navy));border-color:var(--ink,var(--navy));color:var(--bg)}
.role-out{display:grid;grid-template-columns:3px 1fr;gap:16px;align-items:start;min-height:76px}
.role-out::before{content:"";background:var(--brass);align-self:stretch}
.role-line{margin:0;font-size:17px;line-height:1.45;color:var(--text)}
.role-out.swap{animation:role-in .4s var(--ease) 1}
.role-k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-bottom:6px}
@keyframes role-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* --- HUD photo --- */
.hudshot{position:relative;overflow:hidden}
.hudshot img{filter:saturate(.72) contrast(1.12) brightness(.94)}
.hudshot::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(135deg,rgba(0,136,155,.16),transparent 55%,rgba(217,15,105,.14))}
.hudshot::after{content:"";position:absolute;left:0;right:0;height:34%;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(0,136,155,.16),transparent);animation:shot-scan 7s linear infinite}
@keyframes shot-scan{0%{top:-34%}100%{top:100%}}
.hudshot .meta{position:absolute;top:10px;left:12px;z-index:4;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;display:inline-flex;align-items:center;gap:7px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.hudshot .meta::before{content:"";width:6px;height:6px;background:var(--brass);animation:sp-blink 2s steps(2) infinite}
.hudshot .corner{position:absolute;width:16px;height:16px;z-index:4;border:1.5px solid var(--brass);opacity:.9}
.hudshot .c1{top:8px;left:8px;border-right:0;border-bottom:0}
.hudshot .c2{top:8px;right:8px;border-left:0;border-bottom:0}
.hudshot .c3{bottom:8px;left:8px;border-right:0;border-top:0}
.hudshot .c4{bottom:8px;right:8px;border-left:0;border-top:0}

/* --- is / is not --- */
.isnot .isnt li{color:var(--muted)}
.isnot .isnt li span{position:relative}
.isnot .isnt li span::after{content:"";position:absolute;left:0;right:0;top:52%;height:1px;background:var(--rust);opacity:.45;
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.isnot.in .isnt li span::after{transform:scaleX(1)}
.isnot .is li::before{box-shadow:0 0 0 0 var(--brass)}
.isnot.in .is li::before{animation:dot-ping 2.6s ease-out 1}
@keyframes dot-ping{0%{box-shadow:0 0 0 0 rgba(0,136,155,.5)}70%{box-shadow:0 0 0 10px rgba(0,136,155,0)}100%{box-shadow:0 0 0 0 rgba(0,136,155,0)}}

/* --- checklist rows --- */
.pk-list{counter-reset:sym}
.pk-list label{counter-increment:sym;position:relative}
.pk-list label>span::before{content:counter(sym,decimal-leading-zero);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;color:var(--muted-2);margin-right:12px}
.pk-list label.on>span::before{color:var(--rust)}
.pk-list label.on::after{content:"flagged";position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--bg);
  background:var(--rust);padding:3px 8px;animation:stamp .35s var(--ease) 1}
@keyframes stamp{from{opacity:0;transform:translateY(-50%) scale(1.3)}to{opacity:1;transform:translateY(-50%) scale(1)}}

/* --- manual work stack --- */
.pq-stack{display:grid;grid-template-columns:1fr auto;gap:0 14px;align-items:end;padding:14px 22px 10px}
.pq-stack .pqb{display:flex;flex-direction:column-reverse;gap:3px;height:81px}
.pq-stack .pqb i{display:block;height:11px;border:1px solid var(--line-2);background:transparent;
  transition:background .4s var(--ease),border-color .4s,transform .4s var(--ease);transform-origin:left}
.pq-stack .pqb i.on{background:var(--rust);border-color:var(--rust)}
.pq-stack .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2);white-space:nowrap;text-align:right;line-height:1.5;padding-bottom:2px}
.pk-verdict.pulse{animation:role-in .45s var(--ease) 1}

/* --- how it works: step pulse + stack chips --- */
.life .step-c{position:relative;transition:border-color .35s,box-shadow .35s}
.life .step-c::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--brass);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);opacity:.9}
.life .step-c.lit::after{transform:scaleX(1)}
.life .step-c.lit{border-color:var(--line-2)}
.stack-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.stack-chips span{font-family:var(--mono);font-size:12px;padding:5px 10px;border:1px solid var(--line);color:var(--text);
  transition:border-color .2s,color .2s}
.stack-chips span:hover{border-color:var(--brass);color:var(--brass)}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.badges b{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass);border:1px solid var(--brass);padding:4px 9px}
@media (max-width:900px){.spec-strip{margin-top:-14px;font-size:10px;letter-spacing:.14em}.role-out{min-height:96px}}
@media (prefers-reduced-motion:reduce){
  .benefit.in::after,.hudshot::after,.spec-strip i,.hudshot .meta::before{animation:none}
  .isnot.in .is li::before{animation:none}
}

/* --- hero: HUD frame, drifting facts, flow line --- */
.lp-hero{position:relative;overflow:hidden}
.hero-frame{position:absolute;z-index:1;pointer-events:none;width:26px;height:26px;border:1.5px solid var(--brass);opacity:.5}
.hero-frame.f1{top:18px;left:18px;border-right:0;border-bottom:0}
.hero-frame.f2{top:18px;right:18px;border-left:0;border-bottom:0}
.hero-frame.f3{bottom:18px;left:18px;border-right:0;border-top:0}
.hero-frame.f4{bottom:18px;right:18px;border-left:0;border-top:0}
.lp-hero .wrap{position:relative;z-index:2}
.hero-flow{display:flex;align-items:center;justify-content:center;gap:0;margin:30px auto 0;max-width:520px;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.hero-flow .fl-node{color:var(--muted-2);white-space:nowrap;transition:color .4s}
.hero-flow .fl-node.on{color:var(--brass)}
.hero-flow .fl-node.on::before{content:"";display:inline-block;width:6px;height:6px;background:var(--brass);margin-right:9px;
  vertical-align:middle;animation:sp-blink 2s steps(2) infinite}
.hero-flow .fl-wire{flex:1;height:1px;background:var(--line-2);margin:0 14px;position:relative;overflow:visible}
.hero-flow .fl-wire::after{content:"";position:absolute;top:-2px;left:0;width:5px;height:5px;background:var(--brass);
  box-shadow:0 0 8px var(--brass);animation:wire-run 3.4s linear infinite}
.hero-flow .fl-wire.w2::after{animation-delay:1.7s}
@keyframes wire-run{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
@media (max-width:700px){.hero-flow{font-size:9.5px;letter-spacing:.12em;max-width:100%}.hero-flow .fl-wire{margin:0 8px}
  .hero-frame{width:16px;height:16px}}
@media (prefers-reduced-motion:reduce){.hero-flow .fl-wire::after,.hero-flow .fl-node.on::before{animation:none}}

.pk-photo.is-missing{background:repeating-linear-gradient(135deg,transparent 0 9px,rgba(0,136,155,.10) 9px 10px),var(--surface)}
.pk-photo.is-missing::after{opacity:.35}

/* --- hero mechanism --- */
.lp-hero .mech-hero{max-width:860px;margin:34px auto 0;position:relative}
.mech-hud{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 2px 9px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
.mech-hud .run{display:inline-flex;align-items:center;gap:9px;color:var(--brass)}
.mech-hud .run::before{content:"";width:6px;height:6px;background:var(--brass);animation:sp-blink 1.6s steps(2) infinite}
.mech-hud .live::after{content:"_";animation:sp-blink 1.1s steps(2) infinite}
.lp-hero .mech-hero .mech-tabs{margin-bottom:12px}
.lp-hero .mech-stage{position:relative;overflow:hidden}
.lp-hero .mech-stage::after{content:"";position:absolute;left:0;right:0;height:26%;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(0,136,155,.13),transparent);animation:mech-sweep 6s linear infinite}
@keyframes mech-sweep{0%{top:-26%}100%{top:100%}}
/* the machine reads as continuing past the page edges */
.lp-hero .mech-hero::after{content:"";position:absolute;left:-60vw;right:-60vw;bottom:-18px;height:5px;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 9px,transparent 9px 18px) 0 2px/auto 1px repeat-x}
.lp-hero .mech-note{margin-top:10px}
@media (max-width:700px){.lp-hero .mech-hero{margin-top:24px}.mech-hud{font-size:9px;letter-spacing:.12em}}
@media (prefers-reduced-motion:reduce){.lp-hero .mech-stage::after,.mech-hud .run::before,.mech-hud .live::after{animation:none}}
/* hero only: the material glows as it moves, and a fine scan texture sits over the fold */
.lp-hero .mech-stage .br,.lp-hero .mech-stage .brl{filter:drop-shadow(0 0 3px rgba(0,136,155,.5))}
.lp-hero .mech-stage .rs,.lp-hero .mech-stage .rsl{filter:drop-shadow(0 0 3px rgba(217,15,105,.45))}
.lp-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(180deg,transparent 0 2px,rgba(10,10,18,.035) 2px 3px)}

/* --- problem -> fix panel --- */
.pq-fix{padding:16px 22px 4px;border-top:1px solid var(--line)}
.pq-fix.swap{animation:role-in .4s var(--ease) 1}
.pq-fix .k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:5px}
.pq-fix-q{margin:0 0 12px}
.pq-fix-q b{font-size:14.5px;font-weight:500;line-height:1.4;color:var(--muted)}
.pq-fix-a{margin:0 0 10px}
.pq-fix-a .k{color:var(--brass)}
.pq-fix-a span:last-child{font-size:16px;line-height:1.45;color:var(--ink,var(--navy));font-weight:500}
.pq-tag{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--brass);
  border:1px solid var(--brass);padding:4px 9px;margin-bottom:6px}
.pk-list label.sel{border-color:var(--brass)}
.pk-list label.sel.on{border-color:var(--rust)}
.pk-list label.sel::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;background:var(--brass)}

/* --- after: the same six, resolved --- */
.after-count{text-align:center;color:var(--muted);font-size:16px;margin:-26px 0 30px}
.after-count b{color:var(--ink,var(--navy));font-weight:600}
.after-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.after-card{display:block;text-align:left;width:100%;border:1px solid var(--line);padding:20px 20px 22px;cursor:pointer;
  background:var(--card,var(--white));opacity:.45;transition:opacity .35s var(--ease),border-color .3s,box-shadow .3s,transform .3s}
.after-card:hover{opacity:.8;transform:translateY(-2px)}
.after-card.on{opacity:1;border-color:var(--line-2);box-shadow:inset 0 0 0 1px var(--brass)}
.ac-tag{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass);border:1px solid var(--brass);padding:3px 8px;margin-bottom:12px}
.ac-before{display:block;font-size:13.5px;line-height:1.45;color:var(--muted-2);text-decoration-color:var(--rust);margin-bottom:10px}
.ac-after{margin:0;font-size:15.5px;line-height:1.5;color:var(--text)}
.after-card.on .ac-after{color:var(--ink,var(--navy))}
@media (max-width:980px){.after-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.after-grid{grid-template-columns:1fr}.after-count{margin-top:-14px}}

/* ---------- phones: 360 (Galaxy) to 440 (Pro Max) ---------- */
@media (max-width:640px){
  /* the flag must never sit on top of the sentence */
  .pk-list label{padding:15px 16px}
  .pk-list label.on::after{top:12px;right:12px;transform:none;font-size:9px;padding:2px 6px}
  .pk-list label.on>span{padding-right:58px;display:inline-block}
  .pk-list label>span::before{margin-right:9px}
  /* the pile reads better with its label above it */
  .pq-stack{grid-template-columns:1fr;gap:8px;padding:14px 18px 12px}
  .pq-stack .k{text-align:left;order:-1;padding-bottom:0}
  .pq-stack .pqb{height:74px}
  /* three stages, one line, never clipped */
  .hero-flow{font-size:9px;letter-spacing:.1em;padding:0 2px;gap:0}
  .hero-flow .fl-wire{margin:0 7px}
  .hero-flow .fl-node.on::before{width:5px;height:5px;margin-right:6px}
  .spec-strip{font-size:9.5px;letter-spacing:.12em;gap:6px 12px;margin-bottom:26px}
  .spec-strip span+span::before{width:14px}
  .after-card{padding:17px 16px 18px}
  .ac-before{font-size:13px}
  .ac-after{font-size:15px}
  .after-count{font-size:15px;margin-bottom:22px}
  .role-out{min-height:0}
  .pq-fix{padding:14px 18px 4px}
  .mech-hud{font-size:8.5px;letter-spacing:.1em}
  .lp-hero .mech-hero{margin-top:22px}
  .walk li{grid-template-columns:22px 1fr;gap:10px;font-size:14.5px}
}
@media (max-width:400px){
  .hero-flow .fl-wire{margin:0 5px}
  .pk-list label.on>span{padding-right:52px}
}

/* --- case studies --- */
.cs2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cs2{border:1px solid var(--line);background:var(--card,var(--white));padding:22px 22px 24px;margin:0}
.cs2-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.cs2-ind{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);
  border:1px solid var(--brass);padding:4px 9px}
.cs2-stage{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.cs2 h3{margin:0 0 16px;font-size:20px;line-height:1.25}
.cs2-l{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);margin:0 0 5px}
.cs2-t{margin:0 0 14px;font-size:14.5px;line-height:1.5;color:var(--muted)}
.cs2-ben{color:var(--brass)}
.cs2-bent{color:var(--ink,var(--navy));font-weight:500;font-size:15.5px;margin-bottom:0}
.cs2-bench{max-width:780px;margin:26px auto 0;text-align:center;font-size:15px;color:var(--muted);line-height:1.6}
.cs2-bench b{font-family:var(--display);font-size:22px;color:var(--ink,var(--navy));font-weight:700;margin-right:6px}
.cs2-bench span{display:block;font-size:12.5px;color:var(--muted-2);margin-top:6px}
@media (max-width:900px){.cs2-grid{grid-template-columns:1fr;gap:14px}}

/* --- industries page --- */
.ind-page{display:grid;grid-template-columns:250px 1fr;gap:0 44px;max-width:1180px;margin:0 auto;padding:0 32px;align-items:start}
.ind-index{position:sticky;top:104px;padding:52px 0 0}
.ix-k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);margin:0 0 14px}
.ind-index ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ind-index a{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start;padding:11px 12px 11px 10px;
  text-decoration:none;color:var(--muted);font-size:14.5px;line-height:1.35;border-left:2px solid transparent;transition:all .25s}
.ind-index a:hover{color:var(--ink,var(--navy));background:var(--tint)}
.ind-index .ix-n{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--muted-2);padding-top:3px}
.ind-index a.on{color:var(--ink,var(--navy));border-left-color:var(--brass);background:var(--tint)}
.ind-index a.on .ix-n{color:var(--brass)}
.ind-page .sec{border-top:0;background:none!important;padding:52px 0 56px}
.ind-page .sec+.sec{border-top:1px solid var(--line)}
.ind-page .wrap{padding:0;max-width:none}
.ind-page .sec-head{text-align:left;margin-left:0;max-width:none}
.ind-page .sec-head::before{margin-bottom:8px}
.ind-page .sec-sub{text-wrap:balance;max-width:44ch}
.plays{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:28px}
.play{border:1px solid var(--line);padding:20px 20px 22px;background:var(--card,var(--white))}
.combo{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass);border:1px solid var(--brass);padding:4px 9px;margin-bottom:12px}
.play b{display:block;font-family:var(--display);font-size:17px;font-weight:600;line-height:1.3;margin-bottom:8px}
.play p{margin:0;font-size:14.5px;line-height:1.5;color:var(--muted)}
.play-out{margin-top:10px!important;padding-top:10px;border-top:1px dashed var(--line-2);color:var(--ink,var(--navy))!important;font-weight:500}
@media (max-width:980px){
  .ind-page{grid-template-columns:1fr;padding:0 24px}
  .ind-index{position:static;padding:36px 0 0}
  .ind-index ol{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));display:grid;gap:6px}
  .plays{grid-template-columns:1fr}
}
.cs-filter{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:-16px 0 30px}
.cs-chip{font-family:var(--mono);font-size:12px;letter-spacing:.06em;padding:9px 15px;border:1px solid var(--line-2);
  background:transparent;color:var(--muted);cursor:pointer;transition:all .2s;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%)}
.cs-chip:hover{color:var(--ink,var(--navy));border-color:var(--ink,var(--navy))}
.cs-chip.on{background:var(--ink,var(--navy));border-color:var(--ink,var(--navy));color:var(--bg)}
.cs2-plat{margin:16px 0 0;padding-top:12px;border-top:1px dashed var(--line-2)}
.cs2-plat span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.cs2[hidden]{display:none!important}