/* Insight article layout (Resources). Loaded only by insights/<topic>/<article>/ pages, after resources.css.
   Editorial header with a wide art band, a three-column reading area (section rail, text, short-answer
   readout), numbered sections, a product banner, split FAQ and related cards. Brand blues only
   (landing-palette tokens); the topic art fills the first screen. */
body[data-area=resources][data-template=article]{
 --art-ink:#fff;
 --art-glass:#071120;
 --art-card:linear-gradient(160deg,#0d1626,#090d15);
 --art-mono:'IBM Plex Mono',ui-monospace,monospace;
}

/* Reading progress: a hairline under the header, driven by page scroll (no JS; skipped where unsupported). */
@supports (animation-timeline: scroll()){
 @media(prefers-reduced-motion:no-preference){
  body[data-area=resources][data-template=article]::before{content:"";position:fixed;z-index:60;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--landing-cobalt),var(--landing-cyan));transform-origin:0 50%;transform:scaleX(0);animation:art-progress linear both;animation-timeline:scroll(root)}
  @keyframes art-progress{to{transform:scaleX(1)}}
 }
}

/* ---------- header: text first, then a wide cinematic band ---------- */
[data-area=resources][data-template=article] .detail-hero>.eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;padding:7px 14px;border:1px solid var(--rule);border-radius:999px;background:#0a1830}
[data-area=resources][data-template=article] .detail-hero>.eyebrow:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--landing-cyan);box-shadow:0 0 10px #58c8ffaa}
[data-area=resources][data-template=article] .detail-main .detail-hero h1{max-width:18ch;margin:0 0 18px;padding:.04em 0 .14em;font-size:clamp(40px,5.2vw,76px);line-height:1.08;letter-spacing:-.045em;background:linear-gradient(100deg,#f4fbff 10%,#bee3ff 60%,#8fc4ff);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-area=resources][data-template=article] .detail-hero .detail-intro>div{max-width:62ch}
[data-area=resources][data-template=article] .detail-hero .lead{margin:0;font-size:clamp(18px,1.6vw,22px);line-height:1.6;color:#fff}
[data-area=resources][data-template=article] .detail-hero .meta{margin:22px 0 0;font:11px/1.4 var(--art-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--landing-muted);word-spacing:-.1em}
[data-area=resources][data-template=article] .detail-hero .meta a{color:var(--landing-text-accent)}
[data-area=resources][data-template=article] .detail-hero .detail-actions:empty{display:none}
/* Full-screen art: the topic image covers the whole first screen (behind the header) and the title sits on it. */
[data-area=resources][data-template=article] .detail-main .detail-hero:has(.page-art){display:flex;flex-direction:column;justify-content:flex-end;min-height:calc(100svh - 185px);padding:40px 0 72px}
body[data-area=resources][data-template=article] .detail-hero .page-art{position:absolute;z-index:0;top:0;left:0;width:100%;height:100svh;margin:0;aspect-ratio:auto;border:0;border-radius:0;background:#05070b}
[data-area=resources][data-template=article] .detail-hero .page-art img{object-position:50% 50%}
[data-area=resources][data-template=article] .detail-hero .page-art:after{background:linear-gradient(90deg,#0b0b0df0 0%,#0b0b0dc0 38%,#0b0b0d33 72%,transparent),linear-gradient(0deg,#0b0b0d 0%,#0b0b0d00 38%),linear-gradient(180deg,#0b0b0dd9 0,#0b0b0d00 24%)}
[data-area=resources][data-template=article] .detail-hero>:not(.page-art){position:relative;z-index:1;align-self:flex-start;margin-left:0;margin-right:0}
[data-area=resources][data-template=article] :is(.sub-header,.reading-top,.page-contents){position:relative;z-index:31}
/* The "On this page" disclosure moves into the rail on wide screens. */
@media(min-width:1201px){body[data-area=resources][data-template=article]:has(.art-rail) .page-contents{display:none}}

/* ---------- reading area: rail | text | short answer ---------- */
[data-area=resources][data-template=article] .detail-main .detail-section:has(>.article){padding-top:56px;border-top:1px solid var(--rule)}
[data-area=resources][data-template=article] .detail-main .article{grid-template-columns:minmax(0,62ch) minmax(260px,320px);column-gap:clamp(40px,5vw,80px);row-gap:0;justify-content:space-between}
@media(min-width:1201px){
 [data-area=resources][data-template=article] .detail-main .article:has(>.art-rail){grid-template-columns:200px minmax(0,62ch) minmax(260px,300px)}
 [data-area=resources][data-template=article] .article:has(>.art-rail)>:not(.answer,.art-rail){grid-column:2}
 [data-area=resources][data-template=article] .article:has(>.art-rail)>.answer{grid-column:3}
}
[data-area=resources][data-template=article] .article>.art-rail{display:none}
@media(min-width:1201px){[data-area=resources][data-template=article] .article>.art-rail{display:block;grid-column:1;grid-row:1/span 6;align-self:start;position:sticky;top:110px}}
.art-rail p{margin:0 0 14px;font:10px/1.6 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--landing-muted)}
.art-rail ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--rule)}
.art-rail a{position:relative;display:flex;gap:10px;padding:7px 0 7px 16px;font-size:13px;line-height:1.4;color:#8fb9f7b3;transition:color 200ms}
.art-rail a span{flex:none;font:11px/1.6 'IBM Plex Mono',monospace;color:#8fb9f780}
.art-rail a:hover{color:var(--art-ink)}
.art-rail a[aria-current=true]{color:var(--art-ink)}
.art-rail a[aria-current=true]:before{content:"";position:absolute;left:-1px;top:6px;bottom:6px;width:2px;background:var(--landing-cyan);box-shadow:0 0 10px #58c8ff99}
.art-rail a[aria-current=true] span{color:var(--landing-cyan)}

/* Short answer: a readout panel, sticky beside the text. */
body[data-area=resources][data-template=article] .article>.answer{grid-row:1/span 6;position:sticky;top:110px;padding:26px 26px 24px;border:1px solid #329fff33;border-radius:18px;background:
 radial-gradient(ellipse 90% 60% at 100% 0,#0066ff26,transparent 70%),var(--art-glass);box-shadow:0 24px 60px #0007}
[data-area=resources][data-template=article] .answer .eyebrow{display:flex;align-items:center;gap:8px;margin:0 0 14px!important;color:var(--landing-cyan)!important}
[data-area=resources][data-template=article] .answer .eyebrow:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--landing-cyan);box-shadow:0 0 10px #58c8ffaa}
[data-area=resources][data-template=article] .answer .answer-a{margin:0;font-size:15px;line-height:1.7;color:#fff}

/* Key takeaways: numbered cards. */
[data-area=resources][data-template=article] .article>.takeaways{padding:0;border:0}
[data-area=resources][data-template=article] .takeaways h2{margin:0 0 18px;font-size:clamp(22px,2vw,28px)}
[data-area=resources][data-template=article] .takeaways .detail-list{display:grid;gap:10px;margin:0;padding:0;list-style:none;counter-reset:take}
[data-area=resources][data-template=article] .takeaways .detail-list li{counter-increment:take;display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;padding:16px 18px;border:1px solid var(--rule);border-radius:14px;background:var(--art-card);font-size:15px;line-height:1.6;color:var(--art-ink)}
[data-area=resources][data-template=article] .takeaways .detail-list li:before{content:counter(take,decimal-leading-zero);font:12px/1.9 var(--art-mono);color:var(--landing-cyan)}

/* Body text: numbered section heads, brighter emphasis, styled lists and links. */
[data-area=resources][data-template=article] .article>.prose{margin-top:56px!important;counter-reset:sec}
[data-area=resources][data-template=article] .prose h2{counter-increment:sec;display:flex;align-items:baseline;gap:14px;margin:56px 0 18px;padding-top:24px;border-top:1px solid var(--rule);font-size:clamp(24px,2.3vw,32px);letter-spacing:-.03em}
[data-area=resources][data-template=article] .prose h2:first-child{margin-top:0}
[data-area=resources][data-template=article] .prose h2:before{content:counter(sec,decimal-leading-zero);flex:none;font:12px var(--art-mono);letter-spacing:.08em;color:var(--landing-cyan);transform:translateY(-.35em)}
[data-area=resources][data-template=article] .prose p,[data-area=resources][data-template=article] .prose li{font-size:17px;line-height:1.8;color:#eef3f8}
[data-area=resources][data-template=article] .prose strong{color:#fff;font-weight:600}
[data-area=resources][data-template=article] .prose ul,[data-area=resources][data-template=article] .prose ol{padding-left:0;list-style:none}
[data-area=resources][data-template=article] .prose ul>li{position:relative;padding:6px 0 6px 26px}
[data-area=resources][data-template=article] .prose ul>li:before{content:"";position:absolute;left:4px;top:1.15em;width:8px;height:1px;background:var(--landing-cyan)}
[data-area=resources][data-template=article] .prose a{color:var(--landing-text-accent);text-decoration:underline;text-decoration-color:#58c8ff66;text-underline-offset:3px}
[data-area=resources][data-template=article] .prose a:hover{color:#fff;text-decoration-color:var(--landing-cyan)}

/* "How Exodus approaches this": a product banner; the whole card is the link. */
body[data-area=resources][data-template=article] .article>.solution-callout{position:relative;margin-top:56px!important;padding:30px 32px;border:1px solid #329fff4d;border-radius:20px;background:radial-gradient(ellipse 70% 120% at 100% 0,#0066ff40,transparent 65%),radial-gradient(ellipse 50% 80% at 0 100%,#58c8ff14,transparent 70%),var(--art-glass);overflow:hidden;transition:border-color 220ms,transform 260ms var(--ease-out,ease)}
body[data-area=resources][data-template=article] .article>.solution-callout:hover{border-color:#58c8ff88;transform:translateY(-2px)}
[data-area=resources][data-template=article] .solution-callout h2{margin:10px 0 10px!important;font-size:clamp(24px,2.4vw,32px)!important;padding-right:56px}
[data-area=resources][data-template=article] .solution-callout h2 a:after{content:"";position:absolute;inset:0;border-radius:inherit}
[data-area=resources][data-template=article] .solution-callout:after{content:"↗";position:absolute;top:28px;right:30px;display:grid;place-items:center;width:40px;height:40px;border:1px solid #58c8ff66;border-radius:50%;color:var(--landing-cyan);font-size:16px;pointer-events:none}
[data-area=resources][data-template=article] .solution-callout p:not(.eyebrow){max-width:52ch;color:#eef3f8}

/* ---------- FAQ: heading on the left, answers on the right ---------- */
@media(min-width:1001px){
 [data-area=resources][data-template=article] .detail-main>section#faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);column-gap:clamp(40px,6vw,96px);align-items:start}
 [data-area=resources][data-template=article] section#faq>:not(.detail-faq){grid-column:1}
 [data-area=resources][data-template=article] section#faq>.detail-faq{grid-column:2;grid-row:1/span 3}
 [data-area=resources][data-template=article] section#faq>h2{position:sticky;top:120px}
}
[data-area=resources][data-template=article] section#faq .detail-faq details{border:1px solid var(--rule)!important;border-radius:14px;padding:0;margin-bottom:10px;background:var(--art-card)}
[data-area=resources][data-template=article] section#faq .detail-faq summary{padding:20px 22px;font-size:16px;color:var(--art-ink)}
[data-area=resources][data-template=article] section#faq .detail-faq details>div{padding:0 22px 18px}
[data-area=resources][data-template=article] section#faq .detail-faq details>div p{color:#eef3f8}
[data-area=resources][data-template=article] section#faq .detail-faq details[open]{border-color:#329fff66!important}

/* ---------- related: type label above the title, arrow on hover ---------- */
[data-area=resources][data-template=article] .detail-alt .detail-grid>article{position:relative;padding:22px 24px 24px!important}
[data-area=resources][data-template=article] .detail-alt .detail-grid>article>p{order:-1;margin:0 0 12px;font:10px/1.6 var(--art-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--landing-cyan)}
[data-area=resources][data-template=article] .detail-alt .detail-grid>article h3{margin:0;padding-right:28px;font-size:19px;line-height:1.35}
[data-area=resources][data-template=article] .detail-alt .detail-grid>article h3 a:after{content:"";position:absolute;inset:0;border-radius:inherit}
[data-area=resources][data-template=article] .detail-alt .detail-grid>article:before{content:"↗";position:absolute;top:22px;right:22px;color:var(--landing-cyan);opacity:.5;transition:opacity 200ms,transform 200ms}
[data-area=resources][data-template=article] .detail-alt .detail-grid>article:hover:before{opacity:1;transform:translate(2px,-2px)}

/* ---------- tablet / phone ---------- */
@media(max-width:1000px){
 [data-area=resources][data-template=article] .detail-main .article{grid-template-columns:1fr}
 body[data-area=resources][data-template=article] .article>.answer{grid-row:auto;position:static;margin:0 0 40px}
}
@media(max-width:800px){
 [data-area=resources][data-template=article] .prose p,[data-area=resources][data-template=article] .prose li{font-size:16px}
 [data-area=resources][data-template=article] .solution-callout{padding:24px 22px!important}
 [data-area=resources][data-template=article] .solution-callout:after{top:22px;right:20px;width:34px;height:34px}
}
@media(prefers-reduced-motion:reduce){body[data-area=resources][data-template=article] .article>.solution-callout{transition:none}}