/* A.C.T. Programme page only, scoped by body[data-product=act]. Loaded after products.css.
   Direction: the landing A.C.T. section carried onto the page. Smoked-glass HUD panels with cyan corner
   brackets, two-tone headlines, mono readouts and the three chapters (Understand, Build, Improve) with the
   landing's own headlines and "In practice" examples. Brand blues only. Base differs by being product-UI led.
   Shared CSS stays untouched. */

body[data-product=act] .detail-main{
 --hud-cyan:#5fd2ff;
 --hud-line:#5fd2ff26;
 --hud-dim:#5fd2ff4d;
 --hud-glass:#040c15db;
 --hud-text:#e3f2fa;
 --hud-body:#b3ccd9;
 --act-accent:var(--landing-text-accent,#a2d4ff);
 --text-muted:#9fbfd6;   /* calmer body tone than the site default, for long reading */
 /* corner brackets, as on the landing A.C.T. panels */
 --hud-brackets:
  linear-gradient(var(--hud-cyan),var(--hud-cyan)) top left/16px 1px no-repeat,
  linear-gradient(var(--hud-cyan),var(--hud-cyan)) top left/1px 16px no-repeat,
  linear-gradient(var(--hud-cyan),var(--hud-cyan)) top right/16px 1px no-repeat,
  linear-gradient(var(--hud-cyan),var(--hud-cyan)) top right/1px 16px no-repeat,
  linear-gradient(var(--hud-cyan),var(--hud-cyan)) bottom left/16px 1px no-repeat,
  linear-gradient(var(--hud-cyan),var(--hud-cyan)) bottom left/1px 16px no-repeat,
  linear-gradient(var(--hud-cyan),var(--hud-cyan)) bottom right/16px 1px no-repeat,
  linear-gradient(var(--hud-cyan),var(--hud-cyan)) bottom right/1px 16px no-repeat;
}
body[data-product=act] .act-hud,
body[data-product=act] :is(#methodology .detail-grid>article,#team .detail-grid>article,#eligibility .detail-split>div){
 position:relative;outline:1px solid var(--hud-line);outline-offset:-1px;
 background:var(--hud-brackets),linear-gradient(180deg,#5fd2ff0d,transparent 140px),var(--hud-glass);
}
body[data-product=act] .detail-main .eyebrow{color:var(--hud-cyan)!important}

/* ---------- Hero: two-tone headline, bracketed art */
body[data-product=act] .xd-hero h1>span:last-child>span{color:var(--act-accent)}
body[data-product=act] .xd-hero-art{border-color:var(--hud-line);box-shadow:0 50px 140px -50px #0066ff66}
body[data-product=act] .xd-hero-art:after{content:"";position:absolute;inset:10px;pointer-events:none;background:var(--hud-brackets);z-index:3}

/* ---------- What it is: audience as a 3 x 2 grid of readouts under the statement */
body[data-product=act] .xd-statement-foot{display:block!important;border-top:0;padding-top:0}
body[data-product=act] .xd-statement-foot h3{margin:0 0 20px;font:500 11px/1.6 'IBM Plex Mono',monospace!important;letter-spacing:.14em;text-transform:uppercase;color:var(--hud-cyan)!important}
body[data-product=act] .xd-statement-foot .detail-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;padding:0;margin:0;list-style:none;background:var(--hud-line);border:1px solid var(--hud-line);border-radius:4px;overflow:hidden;counter-reset:aud}
body[data-product=act] .xd-statement-foot .detail-list li{counter-increment:aud;max-width:none;margin:0;padding:26px 26px 28px;background:#070c13;font-size:14px;line-height:1.55;color:var(--hud-body);transition:background 300ms}
body[data-product=act] .xd-statement-foot .detail-list li:hover{background:#0a1522}
body[data-product=act] .xd-statement-foot .detail-list li:before{content:counter(aud,decimal-leading-zero);display:block;margin-bottom:18px;font:11px 'IBM Plex Mono',monospace;color:var(--hud-cyan)}
body[data-product=act] .xd-statement-foot .detail-list li strong{display:block;margin-bottom:6px;font:400 21px/1.25 Inter,Arial,sans-serif;letter-spacing:-.02em;color:var(--heading)}

/* ---------- The programme */
body[data-product=act] .act-roadmap{padding:120px 0 60px;border-top:1px solid var(--rule)}
body[data-product=act] .act-roadmap-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:end}
body[data-product=act] .act-roadmap-head h2{margin:0}
body[data-product=act] .act-intro{margin:0;max-width:44ch;color:var(--hud-body)}
/* phase rail: three linked readouts on one line */
body[data-product=act] .act-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;padding:0;margin:56px 0 24px;position:relative;border-top:1px solid var(--hud-dim)}
body[data-product=act] .act-rail li{position:relative}
body[data-product=act] .act-rail li:before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--hud-cyan);box-shadow:0 0 14px #00cfff88}
body[data-product=act] .act-rail a{display:block;padding:22px 24px 0 0;color:var(--heading)!important;text-decoration:none!important;font:400 clamp(22px,2vw,28px)/1.1 Inter,Arial,sans-serif;letter-spacing:-.03em}
body[data-product=act] .act-rail a span{display:block;margin-bottom:10px;font:11px 'IBM Plex Mono',monospace;letter-spacing:.14em;color:var(--hud-cyan)}
body[data-product=act] .act-rail a small{display:block;margin-top:6px;font:11px 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
body[data-product=act] .act-rail a:hover{color:var(--act-accent)!important}

/* each phase: big art + reading panel, alternating sides */
body[data-product=act] .act-band{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:56px;align-items:center;padding:96px 0;scroll-margin-top:110px}
body[data-product=act] .act-band+.act-band{border-top:1px solid var(--rule)}
body[data-product=act] .act-band:nth-of-type(even) .act-band-art{order:2}
body[data-product=act] .act-band-art{margin:0;aspect-ratio:4/3.4;border-radius:6px;overflow:hidden;padding:0;background:#03070d}
body[data-product=act] .act-band-art img{display:block;width:100%;height:100%;object-fit:cover;opacity:.92;transform:scale(1.02);transition:transform 1200ms var(--ease-out)}
body[data-product=act] .act-band:hover .act-band-art img{transform:scale(1.05)}
body[data-product=act] .act-band-art:after{content:"";position:absolute;inset:0;background:var(--hud-brackets),linear-gradient(180deg,#03070d99,transparent 28%,transparent 70%,#03070dcc),repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 3px);pointer-events:none}
body[data-product=act] .act-band-art figcaption{position:absolute;left:22px;right:22px;top:20px;z-index:2;display:flex;justify-content:space-between;font:11px 'IBM Plex Mono',monospace;letter-spacing:.14em;color:var(--hud-text)}
body[data-product=act] .act-band-art figcaption span{padding:5px 9px;border-radius:3px;background:#03070dcc;backdrop-filter:blur(6px)}
body[data-product=act] .act-band-art figcaption span:first-child{display:flex;align-items:center;gap:10px}
body[data-product=act] .act-band-art figcaption span:first-child:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--hud-cyan);box-shadow:0 0 12px #00cfff}
body[data-product=act] .act-band-k{margin:0 0 14px;font:11px/1.6 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--hud-cyan)}
body[data-product=act] .act-band-copy h3{margin:0;font:400 clamp(38px,4vw,58px)/1.05 'Space Grotesk',Inter,Arial,sans-serif!important;letter-spacing:-.04em;color:var(--heading)}
body[data-product=act] .act-band-copy h3 span{display:block;color:var(--act-accent)}
body[data-product=act] .act-band-sum{margin:18px 0 30px;font-size:17px;line-height:1.55;color:var(--hud-body);max-width:40ch}
body[data-product=act] .act-stages{list-style:none;margin:0;padding:0}
body[data-product=act] .act-stages li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 8px;padding:20px 0;border-top:1px solid var(--hud-line)}
body[data-product=act] .act-n{font:12px/1.9 'IBM Plex Mono',monospace;color:var(--hud-cyan)}
body[data-product=act] .act-stages h4{margin:0 0 4px;font:500 18px/1.35 Inter,Arial,sans-serif;color:var(--heading)}
body[data-product=act] .act-stages p{margin:0;font-size:14px;line-height:1.55;max-width:none;color:var(--hud-body)}
body[data-product=act] .act-stages .act-out{display:inline-flex;gap:10px;align-items:baseline;margin-top:12px;padding:7px 12px;border:1px solid var(--hud-line);border-radius:3px;background:#5fd2ff0b;color:var(--hud-text);font-size:13px}
body[data-product=act] .act-out b{font:500 10px/1.6 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--hud-cyan)}
body[data-product=act] .act-practice{margin:22px 0 0;padding:14px 18px;border-left:2px solid var(--hud-cyan);background:linear-gradient(90deg,#0066ff1c,transparent);color:var(--hud-text);font-size:14px;line-height:1.55;max-width:none}
body[data-product=act] .act-practice b{display:block;margin-bottom:4px;font:500 10px/1.6 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#ffaa45}

/* ---------- Principles: bracketed HUD tiles with large indices */
body[data-product=act] #methodology .detail-grid{counter-reset:pr;gap:16px!important}
body[data-product=act] #methodology .detail-grid>article{counter-increment:pr;padding:28px 26px 30px!important;border:0!important;border-radius:0!important;transition:background 300ms}
body[data-product=act] #methodology .detail-grid>article:before{content:counter(pr,decimal-leading-zero);display:block;margin-bottom:36px;font:300 46px/1 'Space Grotesk',Inter,Arial,sans-serif;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px var(--hud-cyan)}
body[data-product=act] #methodology .detail-grid>article h3{margin:0 0 10px;font-size:20px}
body[data-product=act] #methodology .detail-grid>article p{margin:0;font-size:14px;color:var(--hud-body)}

/* ---------- Who you work with */
body[data-product=act] #team .detail-grid{gap:16px!important}
body[data-product=act] #team .detail-grid>article{padding:26px 24px!important;border:0!important;border-radius:0!important}
body[data-product=act] #team .detail-grid>article h3{margin:0 0 10px;font-size:18px}
body[data-product=act] #team .detail-grid>article h3:before{content:"";display:block;width:10px;height:10px;margin-bottom:26px;border:1px solid var(--hud-cyan);transform:rotate(45deg);box-shadow:0 0 12px #00cfff55}
body[data-product=act] #team .detail-grid>article p{margin:0;font-size:14px;color:var(--hud-body)}

/* ---------- Eligibility: fit check */
body[data-product=act] #eligibility .detail-split{gap:16px;align-items:stretch}
body[data-product=act] #eligibility .detail-split>div{padding:34px 34px 30px}
body[data-product=act] #eligibility h3{margin:0 0 20px;font-size:21px}
body[data-product=act] #eligibility .detail-list{list-style:none;padding:0;margin:0;counter-reset:fit}
body[data-product=act] #eligibility .detail-list li{counter-increment:fit;position:relative;max-width:none;padding:13px 0 13px 40px;border-top:1px solid var(--hud-line);color:var(--hud-text);font-size:15px;line-height:1.5}
body[data-product=act] #eligibility .detail-list li:before{content:"";position:absolute;left:0;top:14px;width:20px;height:20px;border-radius:50%;background:#5fd2ff1f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%235fd2ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;box-shadow:inset 0 0 0 1px #5fd2ff66}
body[data-product=act] #eligibility .detail-split>div p{font-size:15px;color:var(--hud-body)}

/* ---------- How to join: a lit track */
body[data-product=act] #apply .detail-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;list-style:none;padding:0;margin:48px 0 0;counter-reset:jn;position:relative}
body[data-product=act] #apply .detail-steps:before{content:"";position:absolute;left:20px;right:20px;top:20px;height:1px;background:linear-gradient(90deg,var(--hud-cyan),var(--hud-dim) 40%,var(--hud-line))}
body[data-product=act] #apply .detail-steps li{counter-increment:jn;position:relative;max-width:none;margin:0!important;padding:0!important;border:0!important}
body[data-product=act] #apply .detail-steps li:before{content:counter(jn,decimal-leading-zero);position:relative;top:0;left:0;display:grid;place-items:center;width:41px;height:41px;margin:0 0 24px;border-radius:50%;border:1px solid var(--hud-dim);background:var(--page-bg);font:12px 'IBM Plex Mono',monospace;color:var(--hud-cyan)}
body[data-product=act] #apply .detail-steps li:first-child:before{background:var(--hud-cyan);border-color:var(--hud-cyan);color:#03121d;box-shadow:0 0 22px #00cfff88}
body[data-product=act] #apply .detail-steps h3{margin:0 0 8px;font-size:18px}
body[data-product=act] #apply .detail-steps p{margin:0;font-size:14px;color:var(--hud-body)}

/* ---------- Evidence: the case file */
body[data-product=act] .act-evidence-split{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)!important;gap:56px!important;align-items:start}
body[data-product=act] .act-evidence-split>div:first-child p{color:var(--hud-body);font-size:16px;line-height:1.65}
body[data-product=act] .act-evidence-split .btn-stack{margin-top:26px}
body[data-product=act] .act-file{margin:0;padding:26px 28px 24px}
body[data-product=act] .act-file figcaption{display:flex;justify-content:space-between;gap:16px;padding-bottom:16px;margin-bottom:6px;border-bottom:1px solid var(--hud-dim);font:11px/1.6 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--hud-text)}
body[data-product=act] .act-file figcaption span:last-child{color:var(--text-muted)}
body[data-product=act] .act-file ol{list-style:none;margin:0;padding:0}
body[data-product=act] .act-file li{display:grid;grid-template-columns:34px minmax(150px,.9fr) minmax(0,1.1fr);align-items:center;gap:12px;padding:11px 0;border-bottom:1px dashed #5fd2ff1f}
body[data-product=act] .act-file-n{font:11px 'IBM Plex Mono',monospace;color:var(--hud-cyan)}
body[data-product=act] .act-file-k{font-size:14px;color:var(--hud-text)}
body[data-product=act] .act-file-v{height:8px;border-radius:2px;background:linear-gradient(90deg,#5fd2ff2e,#5fd2ff0a)}
body[data-product=act] .act-file li:nth-child(2n) .act-file-v{width:72%}
body[data-product=act] .act-file li:nth-child(3n) .act-file-v{width:56%}
body[data-product=act] .act-file-result{border-bottom:0!important;padding-top:16px!important}
body[data-product=act] .act-file-result .act-file-k{color:var(--act-accent);font-weight:500}
body[data-product=act] .act-file-bars{display:grid;gap:6px}
body[data-product=act] .act-file-bars i{position:relative;display:block;height:16px;width:var(--w);border-radius:2px;background:#5fd2ff26}
body[data-product=act] .act-file-bars i+i{background:linear-gradient(90deg,var(--hud-cyan),#0066ff);box-shadow:0 0 16px #00cfff44}
body[data-product=act] .act-file-bars b{position:absolute;left:calc(100% + 8px);top:0;font:500 9px/16px 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap}

/* ---------- Ecosystem and related */
body[data-product=act] #products .detail-grid{gap:16px!important}
body[data-product=act] #products .detail-grid>article{padding:22px 24px!important;border:1px solid var(--hud-line)!important;border-radius:4px;background:#070c13}
body[data-product=act] #products .detail-grid>article:first-child{border-color:var(--hud-dim)!important;background:var(--hud-brackets),radial-gradient(ellipse at 0 0,#0066ff26,transparent 70%),#070c13}
body[data-product=act] #products .detail-grid>article h3{margin:4px 0 8px;font-size:19px}
body[data-product=act] #products .detail-grid>article p:not(.eyebrow){font-size:14px;margin:0;color:var(--hud-body)}

/* ---------- Tablet */
@media(max-width:1100px){
 body[data-product=act] .act-band{grid-template-columns:1fr;gap:32px;padding:72px 0}
 body[data-product=act] .act-band:nth-of-type(even) .act-band-art{order:0}
 body[data-product=act] .act-band-art{aspect-ratio:16/9}
 body[data-product=act] #apply .detail-steps{grid-template-columns:1fr;gap:0}
 body[data-product=act] #apply .detail-steps:before{left:20px;right:auto;top:20px;bottom:60px;width:1px;height:auto;background:linear-gradient(180deg,var(--hud-cyan),var(--hud-line))}
 body[data-product=act] #apply .detail-steps li{display:grid;grid-template-columns:41px minmax(0,1fr);column-gap:20px;padding-bottom:28px!important}
 body[data-product=act] #apply .detail-steps li:before{grid-row:span 2;margin:0}
 body[data-product=act] #apply .detail-steps h3{margin-top:9px}
 body[data-product=act] .act-evidence-split{grid-template-columns:1fr!important;gap:32px!important}
}

/* ---------- Phone */
@media(max-width:800px){
 body[data-product=act] .xd-statement-foot .detail-list{grid-template-columns:1fr}
 body[data-product=act] .xd-statement-foot .detail-list li{padding:20px}
 body[data-product=act] .xd-statement-foot .detail-list li:before{margin-bottom:10px}
 body[data-product=act] .xd-statement-foot .detail-list li strong{font-size:19px}
 body[data-product=act] .act-roadmap{padding:72px 0 24px}
 body[data-product=act] .act-roadmap-head{grid-template-columns:1fr;gap:16px}
 body[data-product=act] .act-rail{grid-template-columns:1fr;border-top:0;border-left:1px solid var(--hud-dim);margin:36px 0 0 4px}
 body[data-product=act] .act-rail li:before{top:28px;left:-5px}
 body[data-product=act] .act-rail a{padding:18px 0 4px 22px;font-size:22px}
 body[data-product=act] .act-band{padding:56px 0}
 body[data-product=act] .act-band-art{aspect-ratio:4/3}
 body[data-product=act] .act-band-art figcaption{left:16px;right:16px;top:14px;font-size:10px}
 body[data-product=act] .act-band-copy h3{font-size:36px!important}
 body[data-product=act] .act-band-sum{font-size:16px}
 body[data-product=act] .act-stages .act-out{display:flex;flex-direction:column;gap:2px}
 body[data-product=act] #methodology .detail-grid,body[data-product=act] #team .detail-grid,body[data-product=act] #products .detail-grid{grid-template-columns:1fr!important}
 body[data-product=act] #methodology .detail-grid>article:before{margin-bottom:20px;font-size:38px}
 body[data-product=act] #eligibility .detail-split{grid-template-columns:1fr}
 body[data-product=act] #eligibility .detail-split>div{padding:26px 22px}
 body[data-product=act] .act-file{padding:20px 18px}
 body[data-product=act] .act-file figcaption{flex-direction:column;gap:2px}
 body[data-product=act] .act-file li{grid-template-columns:28px minmax(0,1fr) 30%}
 body[data-product=act] .act-file-result{grid-template-columns:28px minmax(0,1fr)!important}
 body[data-product=act] .act-file-bars{grid-column:2;margin-right:70px}
}

@media(prefers-reduced-motion:reduce){
 body[data-product=act] .act-band-art img{transition:none}
 body[data-product=act] .act-band:hover .act-band-art img{transform:scale(1.02)}
}

/* Statement art: size the layer to the render itself (12:7) and fade all four edges, so the render's dark
   background never shows as a box against the page. */
@media(min-width:901px){
 body[data-product=act][style*="--statement-art"] .xd-statement:before{top:2%;bottom:auto;height:auto;aspect-ratio:12/7;background-size:cover;background-position:center;-webkit-mask:linear-gradient(90deg,transparent 0,#000 38%,#000 90%,transparent),linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,transparent 0,#000 38%,#000 90%,transparent),linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent);mask-composite:intersect}
}