/* ExoDrive product page: scroll-led visuals, lighter than the landing journey and with no 3D.
   Reference: Awwwards SOTD Heron AI (scan-line image reveal, line-by-line headline, pinned steps). */

/* ------------------------------------------------------------ hero */
.xd-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center;padding-bottom:40px}
.xd-hero .detail-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.xd-lines>span{display:block;overflow:hidden;padding-bottom:.06em}
.xd-lines>span>span{display:inline-block;transform:translateY(105%);animation:xd-line-up 900ms var(--ease-out) forwards}
.xd-lines>span:nth-child(2)>span{animation-delay:120ms}
@keyframes xd-line-up{to{transform:none}}
.xd-hero-art{position:relative;margin:0;border-radius:22px;overflow:hidden;border:1px solid var(--rule);aspect-ratio:3/2;background:#05070b}
.xd-hero-art img{display:block;width:100%;height:115%;object-fit:cover;transform:translateY(calc(var(--xd-hero-shift,0) * -1px));clip-path:inset(0 0 100% 0);animation:xd-scan-reveal 1600ms 200ms var(--ease-out) forwards}
.xd-scan{position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent);box-shadow:0 0 18px 2px #58c8ffaa;opacity:0;animation:xd-scan-line 1600ms 200ms var(--ease-out) forwards}
@keyframes xd-scan-reveal{to{clip-path:inset(0 0 0 0)}}
@keyframes xd-scan-line{0%{opacity:1;top:0}90%{opacity:1}100%{opacity:0;top:100%}}

.xd-ask{position:absolute;left:24px;right:24px;bottom:24px;max-width:430px;padding:18px 20px;border:1px solid #329fff40;border-radius:16px;background:#0a0d13d9;backdrop-filter:blur(14px);opacity:0;transform:translateY(12px);animation:xd-rise 700ms 1500ms var(--ease-out) forwards}
.xd-tag{margin:0 0 10px!important;font:9px/1.6 'IBM Plex Mono',monospace!important;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)!important}
.xd-q{margin:0!important;font-size:15px!important;color:var(--heading)!important}
.xd-q-text{white-space:normal}
.xd-caret{display:inline-block;width:1px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--accent);animation:xd-blink 1s steps(1) infinite}
.xd-ask.is-answered .xd-caret{display:none}
.xd-a{margin-top:12px;padding-top:12px;border-top:1px solid var(--rule);opacity:0;transform:translateY(6px);transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-out)}
.xd-ask.is-answered .xd-a{opacity:1;transform:none}
.xd-a p{margin:0!important;font-size:13px!important;line-height:1.6!important;color:var(--text)!important}
.xd-sources{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:10px 0 0}
.xd-sources li{padding:4px 10px;border:1px solid #329fff55;border-radius:999px;font:11px/1.4 Inter,Arial,sans-serif;color:var(--landing-ice);background:#0066ff14}
.xd-sources li.locked{color:var(--text-muted);border-style:dashed;background:none}
.xd-foot{margin-top:8px!important;font-size:11px!important;color:var(--text-muted)!important}
@keyframes xd-rise{to{opacity:1;transform:none}}
@keyframes xd-blink{50%{opacity:0}}

/* ------------------------------------------------------------ statement lit by scroll */
.xd-statement{padding:120px 0 90px}
.xd-lit{max-width:22ch!important;font:400 clamp(30px,3.6vw,52px)/1.18 Inter,Arial,sans-serif!important;letter-spacing:-.04em;margin:18px 0 70px!important}
.xd-lit [aria-hidden] span{color:#f1f1ef26;transition:color 260ms linear}
.xd-lit [aria-hidden] span.is-lit{color:var(--heading)}
.xd-statement-foot{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;border-top:1px solid var(--rule);padding-top:36px}
.xd-statement-foot h3{margin:0}

/* ------------------------------------------------------------ pinned steps */
.xd-steps{position:relative;height:calc(var(--steps) * 70vh + 30vh);border-top:1px solid var(--rule)}
.xd-steps-pin{position:sticky;top:0;min-height:100vh;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:center;padding:90px 0 60px}
.xd-steps-copy ol{list-style:none;padding:0;margin:32px 0 0;counter-reset:xd}
.xd-steps-copy>ol>li{position:relative;counter-increment:xd;padding:16px 0 16px 48px;border-top:1px solid var(--rule);opacity:.38;transition:opacity 400ms var(--ease-out)}
.xd-steps-copy>ol>li:before{content:counter(xd,decimal-leading-zero);position:absolute;left:0;top:20px;font:10px 'IBM Plex Mono',monospace;color:var(--text-muted)}
.xd-steps-copy>ol>li>h3{margin:0;font-size:20px}
.xd-steps-copy>ol>li>p{margin:6px 0 0;font-size:14px;max-height:0;overflow:hidden;opacity:0;transition:max-height 500ms var(--ease-out),opacity 400ms}
.xd-steps-copy>ol>li.is-active{opacity:1}
.xd-steps-copy>ol>li.is-active:before{color:var(--accent)}
.xd-steps-copy>ol>li.is-active p{max-height:6em;opacity:1}
.xd-stage{position:relative;min-height:400px;padding:28px;border:1px solid var(--rule);border-radius:22px;background:radial-gradient(ellipse at 100% 0,#0066ff2e,transparent 60%),var(--product-art) center/cover;overflow:hidden}
.xd-stage:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0b0b0dcc,#0b0b0df2)}
.xd-stage>*{position:relative}
.xd-panel{position:absolute!important;left:28px;right:28px;top:64px;opacity:0;transform:translateY(16px);transition:opacity 450ms var(--ease-out),transform 450ms var(--ease-out);pointer-events:none}
.xd-panel.is-active{opacity:1;transform:none;pointer-events:auto}
.xd-panel-title{margin:0 0 14px!important;font-size:13px!important;color:var(--text-muted)!important}
.xd-rows,.xd-results,.xd-tags{list-style:none;padding:0;margin:0}
.xd-rows li{display:flex;justify-content:space-between;gap:16px;padding:14px 16px;margin-bottom:8px;border:1px solid var(--rule);border-radius:12px;background:#0d1017e6;font-size:14px;color:var(--text)}
.xd-rows b{font:500 11px Inter,Arial,sans-serif;color:var(--landing-ice)}
.xd-rows b.no{color:var(--text-muted)}
.xd-bubble{display:inline-block;margin:0 0 14px!important;padding:12px 16px;border-radius:14px 14px 14px 4px;background:#0066ff2b;border:1px solid #329fff55;color:var(--heading)!important;font-size:15px!important}
.xd-tags{display:flex;flex-wrap:wrap;gap:8px}
.xd-tags li{padding:6px 12px;border:1px solid var(--rule);border-radius:999px;font:11px 'IBM Plex Mono',monospace;color:var(--text)}
.xd-results li{padding:14px 16px;margin-bottom:8px;border:1px solid var(--rule);border-radius:12px;background:#0d1017e6}
.xd-results b{display:block;font-weight:500;color:var(--heading);font-size:14px}
.xd-results span{font-size:12px;color:var(--text-muted)}
.xd-results li.locked{border-style:dashed;opacity:.6}
.xd-approve{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 12px 12px 16px;border:1px solid var(--rule);border-radius:999px;background:#0d1017e6;font-size:13px;color:var(--text-muted)}
.xd-approve b{padding:8px 16px;border-radius:999px;background:#c2e8fc;color:#132633;font:500 12px Inter,Arial,sans-serif}
.xd-progress{position:absolute!important;left:28px;right:28px;bottom:22px;height:2px;background:var(--rule);border-radius:2px}
.xd-progress span{display:block;height:100%;width:calc(var(--xd-progress,0) * 100%);background:var(--accent);border-radius:2px}

/* ------------------------------------------------------------ security roles */
.xd-roles{margin:36px 0 10px;padding:24px;border:1px solid var(--rule);border-radius:18px;background:#0d0f14;max-width:720px}
.xd-roles-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.xd-roles-head .xd-tag{margin:0!important}
.xd-role-switch{display:inline-flex;padding:4px;border:1px solid var(--rule);border-radius:999px}
.xd-role-switch button{min-height:36px;padding:0 14px;border:0;border-radius:999px;background:none;color:var(--text);font:13px Inter,Arial,sans-serif;transition:background 200ms,color 200ms,transform 120ms var(--ease-out)}
.xd-role-switch button[aria-selected=true]{background:#c2e8fc;color:#132633}
.xd-role-switch button:active{transform:scale(.97)}
.xd-role-switch button:focus-visible{outline:2px solid #b2e0ff;outline-offset:2px}
.xd-role-answer p{margin:0!important;color:var(--text)!important;font-size:14px!important}
.xd-role-answer:not([hidden]){animation:xd-rise 300ms var(--ease-out) both}

/* ------------------------------------------------------------ small screens + reduced motion */
@media(max-width:900px){
 .xd-hero{grid-template-columns:1fr}
 .xd-ask{position:relative;left:auto;right:auto;bottom:auto;margin:-60px 16px 16px}
 .xd-hero-art{aspect-ratio:auto}
 .xd-hero-art img{height:auto;aspect-ratio:3/2}
 .xd-statement-foot{grid-template-columns:1fr;gap:16px}
 .xd-steps{height:auto}
 .xd-steps-pin{position:static;min-height:0;grid-template-columns:1fr;gap:28px;padding:60px 0}
 .xd-steps-copy>ol>li{opacity:1}
 .xd-steps-copy>ol>li>p{max-height:none;opacity:1}
 .xd-stage{min-height:0}
 .xd-panel{position:relative!important;left:auto;right:auto;top:auto;opacity:1;transform:none;margin-bottom:24px}
 .xd-progress{display:none}
}
@media(prefers-reduced-motion:reduce){
 .xd-lines>span>span,.xd-hero-art img,.xd-ask{animation:none;transform:none;clip-path:none;opacity:1}
 .xd-scan{display:none}
 .xd-caret{display:none}
 .xd-a{opacity:1;transform:none;transition:none}
 .xd-lit [aria-hidden] span{color:var(--heading);transition:none}
 .xd-steps{height:auto}
 .xd-steps-pin{position:static;min-height:0}
 .xd-steps-copy>ol>li{opacity:1}
 .xd-steps-copy>ol>li>p{max-height:none;opacity:1}
 .xd-panel{position:relative!important;left:auto;right:auto;top:auto;opacity:1;transform:none;margin-bottom:24px;transition:none}
 .xd-progress{display:none}
}

/* Hero type: landing heading colour (not the accent tint used for spans), sized to sit in two or three lines. */
.detail-main h1.xd-lines,.detail-main h1.xd-lines span{color:var(--heading)}
.detail-main h1.xd-lines{font-size:clamp(36px,3.6vw,52px);max-width:none}
.xd-hero .lead{font-size:clamp(16px,1.3vw,19px)!important;line-height:1.65}
@media(min-width:1200px){.detail-main h1.xd-lines{font-size:clamp(36px,2.95vw,50px)}.xd-lines>span>span{white-space:nowrap}}

/* ============================================================ polish: middle and lower sections */
/* Shared reveal: each section's heading and cards rise in once as they enter. JS adds .is-in; without JS everything shows. */
.js-reveal .xd-reveal>*{opacity:0;transform:translateY(22px);transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out)}
.js-reveal .xd-reveal.is-in>*{opacity:1;transform:none}
.js-reveal .xd-reveal.is-in>*:nth-child(2){transition-delay:80ms}
.js-reveal .xd-reveal.is-in>*:nth-child(3){transition-delay:160ms}
.js-reveal .xd-reveal.is-in>*:nth-child(n+4){transition-delay:220ms}

/* Advantages bento. */
.xd-bento{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:36px}
.xd-tile{grid-column:span 2;display:flex;flex-direction:column;gap:10px;padding:22px 24px 26px;border:1px solid var(--rule);border-radius:20px;background:radial-gradient(ellipse at 100% 0,#0066ff14,transparent 60%),#0d0f14;transition:border-color 300ms,transform 400ms var(--ease-out)}
.xd-tile--wide{grid-column:span 3}
.xd-tile:hover{border-color:#329fff66;transform:translateY(-3px)}
.xd-tile h3{margin:6px 0 0;font-size:20px}
.xd-tile p{margin:0;font-size:14px}
.xd-ui{position:relative;min-height:132px;padding:16px;border:1px solid var(--rule);border-radius:14px;background:#090b10;margin-bottom:8px;overflow:hidden}
.xd-search{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px 10px 16px;border:1px solid #329fff55;border-radius:999px;font-size:14px;color:var(--heading)}
.xd-search-go{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#c2e8fc;color:#132633;font-size:14px}
.xd-ui .xd-results{margin-top:12px}
.xd-ui .xd-results li{margin:0}
.xd-bubble--ghost{opacity:.5;margin-left:24px!important;border-style:dashed!important;background:none!important}
.xd-ui .xd-bubble{display:table;font-size:14px!important}
.xd-sources--stack{flex-direction:column;align-items:flex-start;gap:8px;margin:0}
.xd-core-dot{position:absolute;right:28px;top:50%;width:46px;height:46px;margin-top:-23px;border-radius:50%;background:radial-gradient(circle,#96e4ff 0,#58c8ff55 40%,transparent 70%);box-shadow:0 0 30px #58c8ff66}
.xd-tile:hover .xd-core-dot{animation:xd-pulse 1.4s var(--ease-out)}
@keyframes xd-pulse{50%{transform:scale(1.15)}}
.xd-brief .xd-rows li{padding:9px 14px;margin-bottom:6px}
.xd-tag--foot{margin-top:18px!important}

/* Capabilities: numbered cards instead of a long text column. */
#capabilities .capabilities{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:36px;counter-reset:cap}
#capabilities .capability{counter-increment:cap;padding:26px 28px;border:1px solid var(--rule);border-radius:20px;background:#0d0f14}
#capabilities .capability:last-child:nth-child(odd){grid-column:1/-1}
#capabilities .capability h3{display:flex;align-items:baseline;gap:14px;margin:0 0 10px}
#capabilities .capability h3:before{content:counter(cap,decimal-leading-zero);font:10px 'IBM Plex Mono',monospace;color:var(--accent)}
#capabilities .capability p{font-size:14px}
#capabilities .list-label{margin:14px 0 8px!important;font:9px/1.6 'IBM Plex Mono',monospace!important;letter-spacing:.14em;text-transform:uppercase}
#capabilities .detail-flow{margin:18px 0 0}

/* Pills on this page (the template's square chips read as form fields). */
.detail-main .detail-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:14px 0 0}
.detail-main .detail-chips li{padding:7px 14px;border:1px solid var(--rule);border-radius:999px;font-size:13px;line-height:1.4;color:var(--text);background:#0d0f14}

/* Use cases: team cards with a mono index; "In depth" as a quiet link row. */
#use-cases .detail-grid{counter-reset:uc;gap:16px}
#use-cases .detail-grid article{counter-increment:uc;padding:24px 26px;border:1px solid var(--rule)!important;border-radius:20px;background:#0d0f14}
#use-cases .detail-grid article h3:before{content:counter(uc,decimal-leading-zero);display:block;margin-bottom:22px;font:10px 'IBM Plex Mono',monospace;color:var(--accent)}
#use-cases .detail-grid article p{font-size:14px}
.xd-indepth{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:22px!important}
.xd-indepth-label{font:9px/1.6 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.xd-indepth a{color:var(--heading);border-bottom:1px solid var(--rule);padding-bottom:3px}
.xd-indepth a:after{content:" ↗";color:var(--accent)}
.xd-indepth a:hover{border-color:var(--accent)}
#teams{padding-top:24px}
#teams h2{font-size:clamp(22px,2vw,28px)}

/* Integrations: categories as an even tile grid. */
#integrations .detail-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
#integrations .detail-chips li{padding:18px;border-radius:14px;font-size:14px;color:var(--heading)}
#integrations .note{font-size:13px}

/* Results: measures as numbered tiles. */
#results .detail-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;list-style:none;padding:0;counter-reset:rs;margin:28px 0}
#results .detail-list li{counter-increment:rs;max-width:none;padding:20px 18px;border:1px solid var(--rule);border-radius:16px;background:#0d0f14;font-size:14px;line-height:1.5;color:var(--heading)}
#results .detail-list li:before{content:counter(rs,decimal-leading-zero);display:block;margin-bottom:26px;font:10px 'IBM Plex Mono',monospace;color:var(--accent)}

/* Ecosystem: four product cards, the current one marked. */
#ecosystem .detail-grid{gap:16px}
#ecosystem .detail-grid article{position:relative;padding:24px 26px;border:1px solid var(--rule)!important;border-radius:20px;background:#0d0f14;font-size:14px;color:var(--text-muted)}
#ecosystem .detail-grid article strong{display:block;margin:6px 0 4px;color:var(--text)}
#ecosystem .detail-grid article.is-current{border-color:#329fff88!important;background:radial-gradient(ellipse at 0 0,#0066ff26,transparent 70%),#0d0f14}
.xd-here{position:absolute;top:22px;right:22px;padding:4px 10px;border-radius:999px;background:#0066ff33;color:var(--landing-ice);font:10px 'IBM Plex Mono',monospace;letter-spacing:.08em}
#ecosystem .detail-grid h3 a:after{content:" ↗";color:var(--accent)}

/* Related + CTA. */
.xd-related .detail-grid{gap:16px}
.xd-related .detail-grid article{padding:22px 24px;border:1px solid var(--rule)!important;border-radius:18px}
.detail-cta{border-radius:24px}
.detail-cta .detail-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

@media(max-width:900px){
 .xd-bento{grid-template-columns:1fr}
 .xd-tile,.xd-tile--wide{grid-column:auto}
 #capabilities .capabilities{grid-template-columns:1fr}
 #integrations .detail-chips{grid-template-columns:repeat(2,minmax(0,1fr))}
 #results .detail-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){
 .js-reveal .xd-reveal>*{opacity:1;transform:none;transition:none}
 .xd-tile{transition:none}
}

/* Round 3 fixes. */
#capabilities .detail-flow ol{flex-wrap:nowrap}
#capabilities .detail-flow li{flex:1 1 0;min-width:0;font-size:12px!important;padding-right:8px!important}
.xd-rows li{align-items:center}
.detail-main .detail-faq summary{max-width:none}
.xd-related .detail-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.xd-label{font:9px/1.6 'IBM Plex Mono',monospace!important;letter-spacing:.14em;text-transform:uppercase;margin:26px 0 10px!important}
@media(max-width:900px){.xd-related .detail-grid{grid-template-columns:1fr 1fr!important}#capabilities .detail-flow ol{flex-wrap:wrap}}
/* Interface pieces keep tight, interface-like line heights (the page's reading line height is for prose). */
.xd-ui *,.xd-ask *,.xd-stage *,.xd-roles *{line-height:1.45}
.xd-ask .xd-a p{line-height:1.6!important}
@media(max-width:900px){.xd-tile{padding:16px 16px 20px}.xd-ui{padding:12px;min-height:0}.xd-search{font-size:13px}.xd-bubble--ghost{margin-left:0!important}}

/* Round 3: fill the statement's empty right half and the CTA with the crystal artwork, faded into the page. */
.xd-statement{position:relative;isolation:isolate}
.xd-statement:before{content:"";position:absolute;z-index:-1;top:40px;right:-8vw;width:58%;height:78%;background:var(--product-art) 60% 40%/cover;opacity:.55;-webkit-mask:radial-gradient(ellipse 70% 70% at 65% 45%,#000 30%,transparent 72%);mask:radial-gradient(ellipse 70% 70% at 65% 45%,#000 30%,transparent 72%);transform:translateY(calc(var(--xd-statement-shift,0) * 1px))}
.detail-cta{position:relative;overflow:hidden;isolation:isolate}
.detail-cta:before{content:"";position:absolute;z-index:-1;inset:0 0 0 45%;background:var(--product-art) 70% 50%/cover;opacity:.35;-webkit-mask:linear-gradient(90deg,transparent,#000 45%);mask:linear-gradient(90deg,transparent,#000 45%)}
/* Short sentence-case headings can run full width instead of wrapping one word. */
.detail-main .detail-section>h2{max-width:24ch}
@media(max-width:900px){.xd-statement:before{right:-20vw;width:90%;top:auto;bottom:0;height:45%;opacity:.35}.detail-cta:before{inset:40% 0 0 0;-webkit-mask:linear-gradient(180deg,transparent,#000 60%);mask:linear-gradient(180deg,transparent,#000 60%)}}
/* Phone: each step's interface piece sits under its own step. */
.xd-steps-copy li .xd-panel{margin:16px 0 4px;padding:16px;border:1px solid var(--rule);border-radius:16px;background:#0d0f14}
.xd-steps-copy li .xd-panel:before{content:"ILLUSTRATIVE"/"Illustrative";display:block;margin-bottom:10px;font:11px/1.6 'IBM Plex Mono',monospace;letter-spacing:.14em;color:var(--text-muted)}

/* Round 4: a soft light follows the pointer across cards (fine pointers only). */
:is(.xd-tile,#capabilities .capability,#use-cases .detail-grid article,#ecosystem .detail-grid article,.xd-related .detail-grid article,#results .detail-list li){position:relative;isolation:isolate}
:is(.xd-tile,#capabilities .capability,#use-cases .detail-grid article,#ecosystem .detail-grid article,.xd-related .detail-grid article,#results .detail-list li):after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),#58c8ff1a,transparent 70%);opacity:0;transition:opacity 300ms}
@media(hover:hover) and (pointer:fine){:is(.xd-tile,#capabilities .capability,#use-cases .detail-grid article,#ecosystem .detail-grid article,.xd-related .detail-grid article,#results .detail-list li):hover:after{opacity:1}}
/* Human + AI: people's lane carries the ice accent so the two lanes read as a pair. */
#human-ai .duo-col--people{border-color:#96e4ff40;background:radial-gradient(ellipse at 100% 0,#96e4ff12,transparent 60%),#0d0f14}
#human-ai .duo-col li{max-width:none}
.xd-panel *{line-height:1.45}
@media(max-width:900px){.xd-statement:before{display:none}}

/* ============================================================ round 5 (review findings) */
/* Accessibility. */
@media(min-width:901px) and (prefers-reduced-motion:no-preference){.xd-steps-copy>ol>li{opacity:.55}}
.xd-steps-copy>ol>li[tabindex]{cursor:pointer;border-radius:8px}
.xd-steps-copy>ol>li:focus-visible{outline:2px solid #b2e0ff;outline-offset:4px}
#results .note a,.detail-main .note a{color:var(--heading);text-decoration:underline;text-underline-offset:3px;text-decoration-color:#58c8ff99}
.xd-rows b{white-space:nowrap;flex-shrink:0}

/* One rule for small labels on this page: section labels hidden, headings carry the section; in-section labels at 11px. */
.detail-main>.detail-section>.eyebrow{display:none}
.xd-label,.xd-tag,#capabilities .list-label,.xd-indepth-label,.xd-statement>.eyebrow{font-size:11px!important;letter-spacing:.12em}

/* Rhythm. */
.xd-steps-pin{padding:64px 0;align-content:center}
@media(max-width:900px){.xd-statement{padding:72px 0 56px}.xd-steps-copy h2{font-size:32px}}
.detail-main .detail-faq summary{align-items:center}
@media(min-width:901px){.xd-indepth{flex-wrap:nowrap}}

/* Capabilities: lists read as a compact two-column checklist instead of a cloud of pills. */
#capabilities .capability .detail-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px}
#capabilities .capability .detail-chips li{padding:0 0 0 18px;border:0;background:none;border-radius:0;position:relative;font-size:13px;color:var(--text)}
#capabilities .capability .detail-chips li:before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px #58c8ff22}
#capabilities .capability:nth-child(2) .detail-chips{grid-template-columns:1fr}
@media(max-width:600px){#capabilities .capability .detail-chips{grid-template-columns:1fr}}

/* Use cases: an editorial index of teams instead of a card grid. */
#use-cases .detail-grid{display:block!important;border-top:1px solid var(--rule)}
#use-cases .detail-grid article{display:grid;grid-template-columns:72px minmax(160px,.7fr) minmax(0,1.3fr) 32px;align-items:baseline;gap:20px;padding:26px 8px!important;border:0!important;border-bottom:1px solid var(--rule)!important;border-radius:0!important;background:none!important;transition:background 300ms,padding 300ms var(--ease-out)}
#use-cases .detail-grid article h3{display:contents}
#use-cases .detail-grid article h3:before{margin:0;align-self:baseline}
#use-cases .detail-grid article p{margin:0;font-size:15px}
#use-cases .detail-grid article:after{content:"→";position:static;opacity:0;color:var(--accent);transform:translateX(-6px);transition:opacity 250ms,transform 300ms var(--ease-out);background:none}
#use-cases .detail-grid article:hover{background:linear-gradient(90deg,#0066ff12,transparent 70%)!important;padding-left:16px!important}
#use-cases .detail-grid article:hover:after{opacity:1;transform:none}
.xd-also{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:30px}
.xd-also .xd-label{margin:0!important}
.xd-also .detail-chips{margin:0}
@media(max-width:700px){#use-cases .detail-grid article{grid-template-columns:44px 1fr;gap:4px 12px}#use-cases .detail-grid article p{grid-column:2}#use-cases .detail-grid article:after{display:none}}

/* Results: one metric strip with hairline dividers. */
#results .detail-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
#results .detail-list li{padding:26px 22px 28px;border:0;border-radius:0;background:none;border-left:1px solid var(--rule)}
#results .detail-list li:first-child{border-left:0;padding-left:0}
#results .detail-list li:after{display:none}
@media(max-width:900px){#results .detail-list{grid-template-columns:1fr 1fr}#results .detail-list li{border-left:0;border-top:1px solid var(--rule);padding-left:0}#results .detail-list li:nth-child(-n+2){border-top:0}}

/* Integrations: the categories sit on one connector rail feeding ExoDrive. */
#integrations .detail-chips{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding-bottom:44px}
#integrations .detail-chips:after{content:var(--product-name,"ExoDrive");position:absolute;left:50%;bottom:0;transform:translateX(-50%);padding:6px 16px;border:1px solid #329fff88;border-radius:999px;background:#0b0b0d;font:11px 'IBM Plex Mono',monospace;letter-spacing:.12em;color:var(--landing-ice);box-shadow:0 0 24px #0066ff44}
#integrations .detail-chips:before{content:"";position:absolute;left:12%;right:12%;bottom:14px;height:1px;background:linear-gradient(90deg,transparent,#58c8ff88,transparent)}
#integrations .detail-chips li{display:flex;align-items:center;gap:10px;padding:16px 18px}
#integrations .detail-chips li:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px #58c8ffaa}
@media(max-width:900px){#integrations .detail-chips{grid-template-columns:1fr 1fr}}

/* Security: demo beside the assurances; the tab pill slides. */
@media(min-width:1100px){.xd-security{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}.xd-security .xd-roles{margin-top:36px;position:sticky;top:110px}.xd-security .detail-grid{grid-template-columns:1fr 1fr!important;margin-top:36px}}
.xd-role-switch{position:relative;isolation:isolate}
.xd-role-switch button[aria-selected=true]{background:none;color:#132633}
.xd-role-thumb{position:absolute;z-index:-1;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:#c2e8fc;transition:transform 380ms var(--ease-out)}
.xd-role-switch[data-active="1"] .xd-role-thumb{transform:translateX(100%)}
.xd-role-switch button{flex:1;transition:color 300ms}
.xd-role-answer:focus-visible{outline:2px solid #b2e0ff;outline-offset:4px;border-radius:8px}

/* Ecosystem in one row; Human + AI lanes as rows with hairlines. */
@media(min-width:1100px){#ecosystem .detail-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
#human-ai .detail-list{list-style:none;padding:0}
#human-ai .detail-list li{padding:12px 0;border-top:1px solid var(--rule)}
#advantages .xd-core-dot{display:none}
@media(prefers-reduced-motion:reduce){.xd-role-thumb,#use-cases .detail-grid article{transition:none}}
.xd-role-switch button{white-space:nowrap;padding:0 16px}
.xd-indepth-label,.xd-indepth a{white-space:nowrap}
@media(max-width:700px){.xd-indepth a{white-space:normal}}
/* Tab thumb sized by JS to the selected tab. */
.xd-role-switch .xd-role-thumb{width:var(--thumb-w,calc(50% - 4px));transform:translateX(var(--thumb-x,0))!important}
@media(max-width:700px){
 #use-cases .detail-grid article{padding:20px 0!important}
 #use-cases .detail-grid article p{font-size:14px;line-height:1.6}
 #governance .detail-grid article{padding:18px 0;min-height:0}
 #governance .detail-grid{gap:0}
 #governance .detail-grid article p{line-height:1.6}
}

/* ============================================================ round 6 (second review) */
@media(max-width:900px),(prefers-reduced-motion:reduce){.xd-steps-copy>ol>li{opacity:1!important}}
.xd-hero .eyebrow,.xd-here{font-size:11px!important}
.xd-stage{min-height:480px}
.xd-steps-copy h2{font-size:clamp(32px,3.2vw,46px)}
.xd-panel .xd-rows,.xd-panel .xd-results{width:100%}
.xd-panel .xd-rows li,.xd-panel .xd-results li{width:100%;box-sizing:border-box}
.xd-tile .xd-ui{flex:1 1 auto}
.xd-sources--stack{display:grid!important;grid-template-columns:repeat(2,max-content);gap:8px}
#capabilities .capabilities{align-items:start}
.detail-main .detail-faq details:first-child{border-top:1px solid var(--rule)}
@media(max-width:900px){#results .detail-list li:last-child:nth-child(odd){grid-column:1/-1}}
@media(max-width:420px){#integrations .detail-chips{grid-template-columns:1fr}}
/* Advantages tile 3: sources flow into one ExoDrive layer. */
.xd-tile:nth-child(3) .xd-ui{display:flex;align-items:center;gap:14px}
.xd-into{flex:1;height:1px;min-width:24px;background:linear-gradient(90deg,#58c8ff22,#58c8ffcc);position:relative}
.xd-into:after{content:"";position:absolute;right:-1px;top:-3px;width:7px;height:7px;border-top:1px solid #58c8ffcc;border-right:1px solid #58c8ffcc;transform:rotate(45deg)}
.xd-into-core{padding:10px 16px;border:1px solid #329fff88;border-radius:999px;background:radial-gradient(circle at 50% 0,#0066ff44,transparent 70%),#0b0b0d;font:11px 'IBM Plex Mono',monospace;letter-spacing:.12em;color:var(--landing-ice);box-shadow:0 0 28px #0066ff40}
.xd-tile:hover .xd-into{background:linear-gradient(90deg,#58c8ff44,#96e4ff)}
.xd-brief,.xd-brief .xd-rows{width:100%}
/* Steps stage: the active panel sits in the vertical centre of the stage. */
.xd-stage{min-height:420px}
.xd-stage .xd-panel{top:50%;transform:translateY(calc(-50% + 16px))}
.xd-stage .xd-panel.is-active{transform:translateY(-50%)}
/* Interface rows are not prose: no reading-width cap. */
.detail-main :is(.xd-ui,.xd-panel,.xd-roles,.xd-ask,.xd-bento) :is(li,p){max-width:none}

/* ============================================================ round 7 (third review) */
@media(max-width:900px){.xd-bento{grid-template-columns:minmax(0,1fr)}.xd-tile{min-width:0}.xd-search{min-width:0}.xd-search-q{min-width:0;overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){.xd-steps-pin{grid-template-columns:minmax(0,1fr);position:static;min-height:0}.xd-steps-copy ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}}
@media(prefers-reduced-motion:reduce) and (max-width:900px){.xd-steps-copy ol{grid-template-columns:1fr}}
#capabilities .capabilities{align-items:stretch}
#capabilities .capability{display:flex;flex-direction:column;justify-content:flex-start}
.xd-tile:nth-child(2) .xd-ui{display:flex;flex-direction:column;justify-content:center;gap:10px}
.xd-tile:nth-child(2) .xd-ui .xd-bubble{display:block;width:calc(100% - 24px);margin:0!important}
.xd-tile:nth-child(2) .xd-ui .xd-bubble--ghost{margin-left:24px!important}
.xd-tile:nth-child(3) .xd-ui{min-height:auto;align-content:center}
.xd-approve b{white-space:nowrap;flex-shrink:0}
.xd-stage{background-clip:padding-box}
.xd-stage:before{inset:-1px}
/* Phone: the Connect demo stacks sources above the ExoDrive pill. */
@media(max-width:900px){
 .xd-tile:nth-child(3) .xd-ui{flex-direction:column;align-items:center;gap:10px}
 .xd-tile:nth-child(3) .xd-into{flex:none;width:1px;height:28px;min-width:0;background:linear-gradient(180deg,#58c8ff22,#58c8ffcc)}
 .xd-tile:nth-child(3) .xd-into:after{right:-3px;top:auto;bottom:-1px;transform:rotate(135deg)}
}
@media(prefers-reduced-motion:reduce){.xd-steps-copy ol{align-items:start}}

/* ============================================================ feedback round */
/* 1. Steps: every description is always laid out, so activating a step never moves the list; plain hairlines, no rounded single-line border. */
.xd-steps-copy>ol>li,.xd-steps-copy>ol>li[tabindex]{border-radius:0!important}
.xd-steps-copy>ol>li>p{max-height:none!important;opacity:1!important;overflow:visible}
@media(min-width:901px) and (prefers-reduced-motion:no-preference){
 .xd-steps-copy>ol>li{opacity:.6;transition:opacity 400ms var(--ease-out)}
 .xd-steps-copy>ol>li.is-active{opacity:1}
 .xd-steps-copy>ol>li{padding:14px 0 14px 48px}
 .xd-steps-copy>ol>li>p{margin-top:4px;font-size:13px}
}
.xd-steps-copy>ol>li:focus-visible{outline:none;box-shadow:inset 3px 0 0 #b2e0ff}
/* 2. "Built for" reads as tags, not buttons. */
.xd-also .detail-chips{gap:6px}
.xd-also .detail-chips li{padding:3px 9px;border:0;border-radius:4px;background:#ffffff0d;font:12px/1.5 Inter,Arial,sans-serif;color:var(--text-muted)}

/* ============================================================ new display patterns */
/* Shared segmented switch (same sliding thumb as the security roles). */
.xd-switch{position:relative;isolation:isolate;display:inline-flex;padding:4px;border:1px solid var(--rule);border-radius:999px}
.xd-switch button{position:relative;min-height:36px;padding:0 16px;border:0;border-radius:999px;background:none;color:var(--text);font:13px Inter,Arial,sans-serif;white-space:nowrap;cursor:pointer;transition:color 300ms}
.xd-switch button[aria-selected=true]{color:#132633}
.xd-switch button:focus-visible{outline:2px solid #b2e0ff;outline-offset:2px}
.xd-switch-thumb{position:absolute;z-index:-1;top:4px;bottom:4px;left:0;width:var(--thumb-w,50%);border-radius:999px;background:#c2e8fc;transform:translateX(var(--thumb-x,4px));transition:transform 380ms var(--ease-out),width 380ms var(--ease-out)}

/* 1. Before / after split. */
.xd-ba{margin:36px 0 18px;padding:22px 24px 26px;border:1px solid var(--rule);border-radius:22px;background:#0d0f14}
.xd-ba-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.xd-ba-head .xd-tag{margin:0!important}
.xd-ba-panes{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0}
.xd-ba-panes:before{content:"";position:absolute;left:50%;top:6px;bottom:6px;width:1px;background:linear-gradient(180deg,transparent,#58c8ff88,transparent)}
.xd-ba-pane{padding:4px 28px 6px;transition:opacity 450ms var(--ease-out),filter 450ms var(--ease-out)}
.xd-ba-pane:first-child{padding-left:0}
.xd-ba-pane:last-child{padding-right:0}
.xd-ba-title{margin:0 0 14px!important;font:11px/1.6 'IBM Plex Mono',monospace!important;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)!important}
.xd-ba-pane--after .xd-ba-title{color:var(--accent)!important}
.xd-ba-list{list-style:none;margin:0;padding:0;counter-reset:ba}
.xd-ba-list li{counter-increment:ba;position:relative;display:grid;gap:2px;padding:12px 0 12px 34px;border-top:1px solid var(--rule);max-width:none!important}
.xd-ba-list li:first-child{border-top:0}
.xd-ba-list li:before{content:counter(ba);position:absolute;left:0;top:13px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font:10px/1 'IBM Plex Mono',monospace;border:1px solid var(--rule);color:var(--text-muted)}
.xd-ba-list b{font-weight:500;color:var(--heading);font-size:15px}
.xd-ba-list span{font-size:13px;line-height:1.5;color:var(--text-muted)}
.xd-ba-pane--before .xd-ba-list b{color:#c9ced6}
.xd-ba-pane--after .xd-ba-list li:before{border-color:#58c8ff99;color:var(--landing-ice);background:#0066ff22}
/* The unselected side recedes (both stay visible on wide screens). */
.xd-ba-pane[data-dim]{opacity:.38;filter:saturate(.4)}
.xd-ba-pane[hidden]{display:block}
@media(max-width:800px){
 .xd-ba-panes{grid-template-columns:1fr}
 .xd-ba-panes:before{display:none}
 .xd-ba-pane{padding:0!important}
 .xd-ba-pane[hidden]{display:none}
 .xd-ba-pane[data-dim]{opacity:1;filter:none}
}

/* 2. Team tabs with a live example. */
.xd-teams{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start;margin-top:32px}
.xd-teams-list{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.xd-teams-list button{display:grid;grid-template-columns:48px minmax(0,1fr);gap:4px 0;text-align:left;padding:18px 12px 18px 0;border:0;border-bottom:1px solid var(--rule);background:none;color:var(--text);font:inherit;cursor:pointer;transition:background 300ms,padding 300ms var(--ease-out)}
.xd-teams-n{grid-row:1/3;padding-top:5px;font:11px 'IBM Plex Mono',monospace;color:var(--text-muted)}
.xd-teams-name{font-size:19px;letter-spacing:-.02em;color:var(--heading);opacity:.7;transition:opacity 300ms}
.xd-teams-desc{font-size:13px;line-height:1.5;color:var(--text-muted);opacity:.75}
.xd-teams-list button:hover .xd-teams-name{opacity:1}
.xd-teams-list button[aria-selected=true]{background:linear-gradient(90deg,#0066ff1c,transparent 80%);padding-left:14px}
.xd-teams-list button[aria-selected=true] .xd-teams-name{opacity:1}
.xd-teams-list button[aria-selected=true] .xd-teams-n{color:var(--accent)}
.xd-teams-list button[aria-selected=true] .xd-teams-desc{opacity:1;color:var(--text)}
.xd-teams-list button:focus-visible{outline:none;box-shadow:inset 3px 0 0 #b2e0ff}
.xd-teams-stage{position:sticky;top:120px;min-height:330px;padding:26px;border:1px solid var(--rule);border-radius:22px;background:radial-gradient(ellipse at 100% 0,#0066ff24,transparent 60%),#0d0f14;overflow:hidden}
.xd-teams-stage:after{content:"";position:absolute;inset:auto -40px -60px auto;width:260px;height:260px;background:var(--product-art) 60% 40%/cover;opacity:.18;border-radius:50%;-webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%);pointer-events:none}
.xd-teams-panel{position:relative;z-index:1}
.xd-teams-panel:not([hidden]){animation:xd-team-in 420ms var(--ease-out) both}
@keyframes xd-team-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.xd-teams-panel .xd-bubble{display:table;margin:6px 0 16px!important}
.xd-teams-answer{padding:16px 18px;border:1px solid var(--rule);border-radius:14px;background:#090b10}
.xd-teams-answer p{margin:0!important;font-size:14px!important;color:var(--text)!important;line-height:1.55!important}
.xd-teams-answer .xd-foot{margin-top:10px!important;font-size:11px!important;color:var(--text-muted)!important}
.detail-main .xd-teams :is(p,li){max-width:none}
@media(max-width:900px){
 .xd-teams{grid-template-columns:1fr;gap:18px}
 .xd-teams-list{flex-direction:row;flex-wrap:wrap;gap:8px;border:0}
 .xd-teams-list button{display:block;padding:8px 14px;border:1px solid var(--rule);border-radius:999px}
 .xd-teams-list button[aria-selected=true]{padding-left:14px;background:#c2e8fc}
 .xd-teams-list button[aria-selected=true] .xd-teams-name{color:#132633}
 .xd-teams-n,.xd-teams-desc{display:none}
 .xd-teams-name{font-size:14px;opacity:1}
 .xd-teams-stage{position:static;min-height:0}
}

/* 3. Stacking capability cards: each card pins a little lower than the last and the ones beneath settle back. */
@media(min-width:901px) and (prefers-reduced-motion:no-preference){
 #capabilities .xd-stack{display:block;margin-top:36px}
 #capabilities .xd-stack .capability{position:sticky;top:calc(118px + var(--i,0) * 18px);display:grid!important;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:8px 48px;align-content:start;min-height:300px;margin-bottom:28px;padding:34px 38px;transform-origin:50% 0;transform:scale(var(--s,1));filter:brightness(var(--b,1));box-shadow:0 -18px 40px #0b0b0dcc;background:radial-gradient(ellipse at 100% 0,#0066ff1a,transparent 55%),#0d0f14}
 #capabilities .xd-stack .capability>h3{grid-column:1;font-size:26px;margin:0}
 #capabilities .xd-stack .capability>p:not(.list-label){grid-column:1;font-size:15px}
 #capabilities .xd-stack .capability>:is(ul,figure,.list-label){grid-column:2;grid-row:1/span 3;align-self:center}
 #capabilities .xd-stack .capability>.list-label{grid-row:1;align-self:end;margin:0!important}
 #capabilities .xd-stack .capability>.list-label+ul{grid-row:2/span 2;align-self:start}
 #capabilities .xd-stack .capability:last-child{margin-bottom:0}
}
/* No layout shift when a team is selected: constant padding, highlight with background and an inset bar only. */
@media(min-width:901px){.xd-teams-list button,.xd-teams-list button[aria-selected=true]{padding-left:14px}.xd-teams-list button[aria-selected=true]{box-shadow:inset 2px 0 0 var(--accent)}}
@media(min-width:901px) and (prefers-reduced-motion:no-preference){#capabilities .xd-stack .capability{min-height:240px}}
/* Review fixes for the new patterns. */
@media(max-width:900px){.xd-teams-stage{position:relative}}
/* Panels share one grid cell, so the tallest sets the height and switching never moves the page. */
.xd-teams-stage{display:grid}
.xd-teams-panel{grid-area:1/1}
.xd-teams-panel[hidden]{display:block;visibility:hidden}
@media(max-width:800px){.xd-ba-panes{grid-template-columns:1fr}.xd-ba-pane{grid-area:1/1}.xd-ba-pane[hidden]{display:block;visibility:hidden}}
.xd-ba-pane[data-dim]{opacity:.55}
.xd-ba-panes,.xd-teams-answer,.xd-teams-panel .xd-tag{-webkit-user-select:none;user-select:none;cursor:default}
@media(min-width:901px) and (prefers-reduced-motion:no-preference){#capabilities .xd-stack .capability{min-height:0;align-content:center}}
@media(max-width:900px){.xd-teams-stage{position:relative;top:auto}}
.xd-teams-list button:focus-visible{outline:2px solid #b2e0ff;outline-offset:-2px}
@media(max-width:900px){.xd-teams-list button:focus-visible{outline-offset:2px;box-shadow:none}}
@media(max-width:900px){.xd-teams-stage{min-height:auto;padding-bottom:24px}}
/* Phone: the capability cards stack too, with tighter offsets. */
@media(max-width:900px) and (prefers-reduced-motion:no-preference){
 #capabilities .xd-stack{display:block}
 #capabilities .xd-stack .capability{position:sticky;top:calc(76px + var(--i,0) * 10px);margin-bottom:18px;transform-origin:50% 0;transform:scale(var(--s,1));filter:brightness(var(--b,1));box-shadow:0 -14px 30px #0b0b0dcc}
}

/* ============================================================ shared product layout additions (ExoDM, ExoDesk, ExoDynamic, A.C.T.) */
/* Hero: the product's own workflow card sits over its artwork. */
.xd-hero-art .xd-heropanel{position:absolute;left:24px;bottom:24px;max-width:340px;padding:18px 20px;border-color:#329fff40;background:#0a0d13d9;backdrop-filter:blur(14px);opacity:0;transform:translateY(12px);animation:xd-rise 700ms 1500ms var(--ease-out) forwards;-webkit-user-select:none;user-select:none}
.xd-heropanel .panel-title{font-size:16px!important;margin-bottom:10px}
.xd-heropanel .panel-flow li{padding:7px 0 7px 34px;font-size:13px}
.xd-heropanel .panel-flow li:before{top:9px}
.xd-heropanel .panel-flow li.is-live{color:var(--heading);background:linear-gradient(90deg,#0066ff22,transparent)}
.xd-heropanel .panel-flow li.is-live:before{color:var(--accent)}
@media(max-width:900px){.xd-hero-art .xd-heropanel{position:relative;left:auto;bottom:auto;max-width:none;margin:-60px 16px 16px}}
@media(prefers-reduced-motion:reduce){.xd-hero-art .xd-heropanel{animation:none;opacity:1;transform:none}}
/* Text bento: big index, the first tile carries the artwork. */
.xd-bento--text .xd-tile{min-height:220px;justify-content:flex-end}
.xd-tile-n{font:11px 'IBM Plex Mono',monospace;color:var(--accent);margin-bottom:auto}
.xd-bento--text .xd-tile h3{font-size:24px}
.xd-tile--art{background:linear-gradient(0deg,#0d0f14 25%,#0d0f14cc 55%,#0d0f1400),var(--product-art) 70% 35%/cover}
/* Step stage: one big step at a time over the artwork. */
.xd-stage--steps .xd-panel-n{display:block;font:12px 'IBM Plex Mono',monospace;color:var(--accent);margin-bottom:18px}
.xd-stage--steps .xd-panel-n small{font-size:inherit;color:var(--text-muted)}
.xd-stage--steps .xd-panel-big{margin:0 0 12px!important;font:400 clamp(28px,2.6vw,40px)/1.15 Inter,Arial,sans-serif!important;letter-spacing:-.04em;color:var(--heading)!important}
.xd-stage--steps .xd-panel-sub{margin:0!important;font-size:15px!important;line-height:1.6!important;color:var(--text)!important;max-width:40ch}
.xd-steps-copy li .xd-panel .xd-panel-big{font-size:24px!important}
.xd-team-desc{margin:0!important;font-size:15px!important;color:var(--text)!important}
.xd-steps-copy li .xd-panel:has(.xd-panel-big){display:none}
/* Where the steps are a plain list (phone, reduced motion, unpinned), keep a step output that only lives in its panel. */
@media(max-width:900px),(prefers-reduced-motion:reduce){.xd-steps-copy li .xd-panel:has(.xd-panel-out){display:block}}
.xd-steps.is-unpinned .xd-steps-copy li .xd-panel:has(.xd-panel-out){display:block}
.xd-steps-copy li .xd-panel :is(.xd-panel-n,.xd-panel-big,.xd-panel-sub){display:none}
/* Compact hero workflow card so the artwork stays the hero. */
.xd-heropanel .panel-kicker{display:none}
.xd-hero-art .xd-heropanel{max-width:300px;padding:14px 16px 12px;bottom:20px;left:20px}
.xd-heropanel .panel-title{font-size:14px!important;margin:0 0 6px!important}
.xd-heropanel .panel-flow li{padding:5px 0 5px 30px;font-size:12.5px;line-height:1.35}
.xd-heropanel .panel-flow li:before{top:7px;font-size:9px}
.xd-heropanel .panel-foot{margin-top:8px!important;font-size:11px!important;line-height:1.4}
.xd-steps-intro{margin:10px 0 0!important;font-size:14px!important;max-width:46ch}
.xd-stage--steps .xd-panel-out{margin:18px 0 0!important;padding-top:14px;border-top:1px solid var(--rule);font-size:13px!important;color:var(--text-muted)!important;max-width:44ch}
.xd-stage--steps .xd-panel-out b{display:block;margin-bottom:4px;font:11px 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
/* Headline lines never clip: JS shrinks the headline until each line fits (see product-page.js). */
@media(min-width:1200px){.xd-lines>span>span{white-space:nowrap}}
/* Phones: the headline flows as one sentence (the two-line split is a desktop layout). */
@media(max-width:900px){.xd-lines>span{display:inline;overflow:visible}.xd-lines>span>span{display:inline;transform:none;animation:none}}

/* ============================================================ page images (ExoDrive first; other products use the same hooks) */
/* Statement: its own wide artwork when the page provides one, fading into the text side. */
.xd-statement:before{background-image:var(--statement-art,var(--product-art))}
body[style*="--statement-art"] .xd-statement:before{top:0;right:-8vw;width:72%;height:100%;background-position:80% 55%;opacity:.9;-webkit-mask:linear-gradient(90deg,transparent 0,#000 38%);mask:linear-gradient(90deg,transparent 0,#000 38%)}
@media(max-width:900px){body[style*="--statement-art"] .xd-statement:before{display:block;position:relative;inset:auto;width:auto;height:0;padding-top:58%;margin:0 -7% 28px;transform:none;opacity:1;background-position:72% 60%;background-size:cover;-webkit-mask:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent);mask:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent)}}
/* Team panels: the team's picture fills the panel behind the example, fading out under the text. */
.xd-teams-stage:has(.xd-team-img){min-height:440px}
.xd-teams-stage:has(.xd-team-img):after{display:none}
.xd-teams-panel{position:relative}
.xd-team-img{position:absolute;z-index:-1;right:-26px;bottom:-26px;width:calc(100% + 52px);height:calc(100% + 52px);object-fit:cover;object-position:70% 70%;opacity:.85;-webkit-mask:linear-gradient(160deg,transparent 18%,#000 62%);mask:linear-gradient(160deg,transparent 18%,#000 62%);pointer-events:none}
.xd-teams-panel:not([hidden]) .xd-team-img{animation:xd-team-img-in 700ms var(--ease-out) both}
@keyframes xd-team-img-in{from{opacity:0;transform:scale(1.04)}to{opacity:.85;transform:none}}
.xd-teams-panel .xd-teams-answer{background:#090b10e6;backdrop-filter:blur(6px)}
@media(max-width:900px){.xd-teams-stage:has(.xd-team-img){min-height:0}.xd-teams-panel:has(.xd-team-img){padding-bottom:190px}.xd-team-img{-webkit-mask:linear-gradient(180deg,transparent 35%,#000 70%);mask:linear-gradient(180deg,transparent 35%,#000 70%);object-position:70% 85%}}
@media(prefers-reduced-motion:reduce){.xd-teams-panel:not([hidden]) .xd-team-img{animation:none}}

/* ============================================================ review fixes (10/28) */
/* Long step lists (A.C.T. has seven): tighter rows so the pinned column fits one screen. */
.xd-steps:has(.xd-steps-copy>ol>li:nth-child(7)) .xd-steps-copy>ol>li{padding:11px 0 11px 48px}
.xd-steps:has(.xd-steps-copy>ol>li:nth-child(7)) .xd-steps-copy>ol>li>h3{font-size:18px}
.xd-steps:has(.xd-steps-copy>ol>li:nth-child(7)) .xd-steps-copy>ol>li:before{top:15px}
/* Pin off when the column still can't fit (short windows): the JS adds .is-unpinned. */
.xd-steps.is-unpinned{height:auto}
.xd-steps.is-unpinned .xd-steps-pin{position:static;min-height:0}
.xd-steps.is-unpinned .xd-steps-copy>ol>li{opacity:1!important}
.xd-steps.is-unpinned .xd-steps-copy>ol>li>p{max-height:none;opacity:1}
/* Hero headline: hidden until fitted on wide screens, so it doesn't jump. Shown anyway after 1.2s if JS fails. */
/* Whole hero copy waits for the web fonts + headline fit, so the font swap never shows as a jump. */
@media(min-width:1200px){.xd-hero-copy:has(h1.xd-lines:not(.is-fit)){visibility:hidden;animation:xd-fit-fallback 0s 1.2s forwards}}
@keyframes xd-fit-fallback{to{visibility:visible}}
/* Small type and picture-like numbers */
.reading-top :is(a,span){font-size:11px}
.xd-tile-n,.xd-teams-n{user-select:none;-webkit-user-select:none}
@media(max-width:480px){.xd-related .detail-grid{grid-template-columns:1fr!important}}
.xd-steps.is-measuring *{transition:none!important}
@media(min-width:901px){.xd-steps:has(.xd-steps-copy>ol>li:nth-child(7)) .xd-steps-pin{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px}}
.xd-steps-copy li .xd-panel:has(.xd-panel-out):before{display:none}

/* ============================================================ scroll motion, round 2
   Scroll-linked (CSS scroll-driven animations): pictures drift slower than the page, cards settle in as
   they arrive, the closing CTA opens up. Browsers without support, and reduced motion, get the static page. */
@supports (animation-timeline: view()){
@media(prefers-reduced-motion:no-preference){
 /* Statement artwork drifts up as you read. */
 .xd-statement{view-timeline:--xd-stmt}
 .xd-statement:before{animation:xd-drift linear both;animation-timeline:--xd-stmt;animation-range:cover}
 @keyframes xd-drift{from{translate:0 48px}to{translate:0 -48px}}
 /* Bento tiles and result cards rise in a short stagger tied to scroll. */
 .xd-bento>*,#results .detail-list li,#ecosystem .detail-grid article,.xd-related .detail-grid article{animation:xd-rise linear both;animation-timeline:view();animation-range:entry 5% entry 70%}
 :is(.xd-bento,#results .detail-list,#ecosystem .detail-grid,.xd-related .detail-grid)>:nth-child(2){animation-range:entry 12% entry 78%}
 :is(.xd-bento,#results .detail-list,#ecosystem .detail-grid,.xd-related .detail-grid)>:nth-child(3){animation-range:entry 19% entry 86%}
 :is(.xd-bento,#results .detail-list,#ecosystem .detail-grid,.xd-related .detail-grid)>:nth-child(n+4){animation-range:entry 26% entry 94%}
 @keyframes xd-rise{from{opacity:0;translate:0 56px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
 /* Team picture and before/after card: slow parallax inside their frame. */
 .xd-teams{view-timeline:--xd-teams}
 .xd-team-img{animation:xd-drift-sm linear both;animation-timeline:--xd-teams;animation-range:cover}
 .xd-teams-panel:not([hidden]) .xd-team-img{animation:xd-team-img-in 700ms var(--ease-out) both,xd-drift-sm linear both;animation-timeline:auto,--xd-teams;animation-range:normal,cover}
 @keyframes xd-drift-sm{from{translate:0 24px}to{translate:0 -24px}}
 .xd-ba{animation:xd-open linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
 @keyframes xd-open{from{opacity:.3;scale:.94;filter:blur(2px)}to{opacity:1;scale:1;filter:none}}
 /* Closing CTA widens from a card into the full block, its artwork sliding in. */
 .detail-cta{animation:xd-cta-open linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
 @keyframes xd-cta-open{from{clip-path:inset(0 6% round 40px);translate:0 40px}to{clip-path:inset(0 0 round 24px);translate:0 0}}
 .detail-cta:before{animation:xd-cta-art linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
 @keyframes xd-cta-art{from{translate:12% 0;opacity:0}to{translate:0 0;opacity:.35}}
}}

/* ============================================================ per-product layouts
   Same building blocks, different shape per page (body[data-product]):
   ExoDrive: copy beside art (reference). ExoDM: centred hero over a wide band, capabilities as a card grid.
   ExoDesk: art first, then copy. ExoDynamic: poster headline across the page, capabilities as editorial rows.
   A.C.T.: three-phase triptych. Phones keep one column for all. */
@media(min-width:901px){
 /* ExoDM */
 body[data-product=exodm] .xd-hero{grid-template-columns:minmax(0,1fr);gap:44px;text-align:center}
 body[data-product=exodm] .xd-hero-copy{max-width:920px;margin:0 auto}
 body[data-product=exodm] .xd-hero .lead{margin-inline:auto}
 body[data-product=exodm] .xd-hero .detail-actions{justify-content:center}
 body[data-product=exodm] .xd-hero-art{aspect-ratio:21/8}
 body[data-product=exodm] .xd-hero-art .xd-heropanel{left:auto;right:24px;text-align:left}
 /* ExoDesk */
 body[data-product=exodesk] .xd-hero{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
 body[data-product=exodesk] .xd-hero-art{order:-1;aspect-ratio:5/6}
 body[data-product=exodesk] .xd-hero-art img{object-position:60% 50%}
 /* ExoDynamic */
 body[data-product=exodynamic] .xd-hero{grid-template-columns:minmax(0,1fr);gap:40px}
 body[data-product=exodynamic] .xd-hero-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:56px;align-items:end}
 body[data-product=exodynamic] .xd-hero-copy>:is(.eyebrow,h1){grid-column:1/-1}
 body[data-product=exodynamic] .detail-main h1.xd-lines{font-size:clamp(52px,5.8vw,92px);letter-spacing:-.045em;line-height:1}
 body[data-product=exodynamic] .xd-hero .lead{margin:0}
 body[data-product=exodynamic] .xd-hero .detail-actions{margin-top:0;justify-content:flex-end}
 body[data-product=exodynamic] .xd-hero-art{aspect-ratio:16/6}
 /* A.C.T. */
 body[data-product=act] .xd-hero-art{aspect-ratio:4/3}
}
/* A.C.T. triptych: Understand, Build, Improve side by side, revealed one after another. */
.xd-triptych{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;height:100%;min-height:280px}
.xd-triptych img{height:100%!important;width:100%;object-fit:cover;transform:none!important}
.xd-triptych img:nth-child(2){animation-delay:420ms!important}
.xd-triptych img:nth-child(3){animation-delay:640ms!important}
.xd-triptych-labels{position:absolute;top:18px;left:0;right:0;display:grid;grid-template-columns:repeat(3,1fr);pointer-events:none}
.xd-triptych-labels b{padding-left:18px;font:500 11px 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--landing-ice)}
body[data-product=act] .xd-hero-art .xd-heropanel{left:auto;right:24px}
@media(max-width:900px){.xd-triptych{aspect-ratio:3/2;min-height:0}}

/* ExoDM capabilities: a two-column card grid instead of stacking cards. */
body[data-product=exodm] #capabilities .xd-stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
body[data-product=exodm] #capabilities .xd-stack .capability{position:relative;top:auto;margin:0;min-height:0;transform:none!important;filter:none!important;display:flex!important;flex-direction:column;gap:10px;align-content:start}
body[data-product=exodm] #capabilities .xd-stack .capability>*{grid-column:auto;grid-row:auto;align-self:auto}
body[data-product=exodm] #capabilities .xd-stack .capability:last-child:nth-child(odd){grid-column:1/-1}
@media(max-width:900px){body[data-product=exodm] #capabilities .xd-stack{grid-template-columns:1fr}}

/* ExoDynamic capabilities: editorial rows, a big index number, no cards. */
body[data-product=exodynamic] #capabilities .xd-stack{display:block;counter-reset:cap}
body[data-product=exodynamic] #capabilities .xd-stack .capability{counter-increment:cap;position:relative;top:auto;margin:0;min-height:0;transform:none!important;filter:none!important;box-shadow:none!important;background:none!important;border:0!important;border-radius:0;
 display:grid!important;grid-template-columns:96px minmax(0,.8fr) minmax(0,1.2fr);gap:6px 40px;padding:34px 0!important;align-items:start}
body[data-product=exodynamic] #capabilities .xd-stack .capability:before{content:counter(cap,decimal-leading-zero);grid-column:1;grid-row:1/span 4;font:300 56px/1 Inter,sans-serif;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px #58c8ff80;user-select:none}
body[data-product=exodynamic] #capabilities .xd-stack .capability>h3{grid-column:2;grid-row:1;font-size:24px;margin:0}
body[data-product=exodynamic] #capabilities .xd-stack .capability>p:not(.list-label){grid-column:2;grid-row:2}
body[data-product=exodynamic] #capabilities .xd-stack .capability>:is(ul,figure,.list-label){grid-column:3;grid-row:1/span 3;align-self:start}
body[data-product=exodynamic] #capabilities .xd-stack .capability>.list-label{grid-row:1;margin:0!important}
body[data-product=exodynamic] #capabilities .xd-stack .capability>.list-label+ul{grid-row:2/span 2}
body[data-product=exodynamic] #capabilities .xd-stack .capability:after{display:none}
@media(max-width:900px){
 body[data-product=exodynamic] #capabilities .xd-stack .capability{grid-template-columns:56px minmax(0,1fr);padding:24px 0!important}
 body[data-product=exodynamic] #capabilities .xd-stack .capability:before{font-size:34px}
 body[data-product=exodynamic] #capabilities .xd-stack .capability>*{grid-column:2!important;grid-row:auto!important}
}
body[data-product=act] .xd-hero-art .xd-heropanel{display:none}
body[data-product=exodynamic] #capabilities .capability h3:before{display:none}
/* Product images (10/28): bands show their lower, busier half; statement art sized by width so a tall statement doesn't push it to the bottom. */
body:is([data-product=exodm],[data-product=exodynamic]) .xd-hero-art img{object-position:50% 78%}
body[data-product=exodesk] .xd-hero-art img{object-position:50% 70%}
@media(min-width:901px){body:is([data-product=exodm],[data-product=exodesk],[data-product=exodynamic],[data-product=act])[style*="--statement-art"] .xd-statement:before{background-size:100% auto;background-repeat:no-repeat;background-position:100% 50%}}
@media(min-width:901px){
 body:is([data-product=exodm],[data-product=exodynamic]) .xd-hero-art img{height:100%;object-position:50% 50%}
 body[data-product=act][style*="--statement-art"] .xd-statement:before{background-position:100% 15%}
}
@media(min-width:901px){body[data-product=exodm] .xd-hero-copy>*{margin-inline:auto;text-align:center;justify-content:center}body[data-product=exodm] .xd-hero .eyebrow{display:flex;width:max-content;max-width:100%}}

/* ============================================================ App dock: every app stands on Base
   Three groups of app cards above one glowing "base" plinth that lists what every app shares.
   Filled cards (no outlines), each tinted with its app's artwork; thin light lines drop from each group to the base. */
.xd-dock{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:36px;position:relative}
.xd-dock-group{position:relative;display:flex;flex-direction:column;gap:10px;padding-bottom:34px}
.xd-dock-group:after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:34px;background:linear-gradient(180deg,#58c8ff00,#58c8ff99)}
.xd-dock-label{margin:0 0 6px;font:11px/1.4 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);-webkit-user-select:none;user-select:none}
.xd-app{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:6px;min-height:118px;justify-content:flex-end;padding:18px 20px;border-radius:18px;background:#0e131c;color:var(--heading);text-decoration:none;transition:translate 260ms var(--ease-out,ease),background-color 260ms}
.xd-app:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,#0e131cf2 30%,#0e131c99 65%,#0e131c33),var(--app-art) 85% 50%/cover;opacity:.9;transition:opacity 300ms,scale 600ms var(--ease-out,ease)}
.xd-app-name{font:500 20px/1.2 Inter,sans-serif;letter-spacing:-.02em}
.xd-app-line{max-width:28ch;font-size:13px;line-height:1.45;color:var(--text)}
.xd-app:hover{translate:0 -3px}
.xd-app:hover:before{opacity:1;scale:1.04}
.xd-app:focus-visible{outline:2px solid #c4e7ff;outline-offset:3px}
.xd-app.is-current{box-shadow:inset 0 0 0 1px #58c8ff66}
.xd-app .xd-here{position:absolute;top:14px;right:16px}
.xd-dock-base{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;padding:20px 26px;border-radius:20px;background:linear-gradient(90deg,#0a2a52,#0b3a6e 50%,#0a2a52);box-shadow:0 0 0 1px #58c8ff40 inset,0 18px 60px -20px #0066ff88}
.xd-dock-base:before{content:"";position:absolute;left:8%;right:8%;top:0;height:1px;background:linear-gradient(90deg,transparent,#a8e9ff,transparent)}
.xd-dock-base-name{font:500 18px Inter,sans-serif;color:#fff;text-decoration:none}
.xd-dock-base-name:hover{text-decoration:underline;text-underline-offset:4px}
.xd-dock-base-label{font:11px 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#a8e9ffcc;-webkit-user-select:none;user-select:none}
.xd-dock-base ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 0 auto;padding:0}
.xd-dock-base li{padding:5px 12px;border-radius:999px;background:#ffffff14;color:#e0f3ff;font-size:13px;-webkit-user-select:none;user-select:none}
.xd-dock-lead{max-width:62ch}
.xd-anchor{display:block;position:relative;top:-90px;height:0}
@media(max-width:900px){
 .xd-dock{grid-template-columns:1fr;gap:8px}
 .xd-dock-group{padding-bottom:22px}.xd-dock-group:after{height:22px}
 .xd-dock-base ul{margin-left:0}
}
@media(prefers-reduced-motion:reduce){.xd-app,.xd-app:before{transition:none}.xd-app:hover{translate:none}}
@supports (animation-timeline: view()){@media(prefers-reduced-motion:no-preference){
 .xd-dock-group{animation:xd-rise linear both;animation-timeline:view();animation-range:entry 5% entry 70%}
 .xd-dock-group:nth-child(2){animation-range:entry 12% entry 78%}.xd-dock-group:nth-child(3){animation-range:entry 19% entry 86%}
 .xd-dock-base{animation:xd-open linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
}}
/* Groups end level: cards in shorter groups grow to fill the column, so the drop lines meet the base together. */
.xd-app{flex:1 1 auto}
.xd-app.is-current{box-shadow:none;background:#123056}.xd-app.is-current:before{opacity:.55}