/* /industries and /industries/<slug> (EC-4937): landing pages, not reading
   pages, so Reading.astro runs without marketing-glossary.css and this sheet
   carries the look, the way marketing-mobile.css does for /mobile. Page rules
   sit under .ind. The three global rules below (the custom properties the
   header and footer read, the box-sizing reset and the body) repeat
   marketing-glossary.css, so the shared header measures the same here as on
   /pricing and the other reading pages. */

:root{--amber:#F59E0B;--bg:#0F1117;--s1:#171B26;--bdr:#2A3045;--txt:#E4E2DD;--sub:#C8C4BE;--mut:#8B8A87;--accent-text:#F59E0B}
body.light-mode{--bg:#F1EFE9;--s1:#FFFFFF;--bdr:#DDD9D0;--txt:#1A1816;--sub:#524E49;--mut:#6B6862;--accent-text:#8A4700}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font-family:'Barlow',sans-serif;line-height:1.65;overflow-x:hidden}

.ind{line-height:1.6}
.ind .wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.ind a{color:var(--accent-text)}

/* hero */
.ind .hero{position:relative;padding:56px 0 64px;overflow:hidden}
.ind .hero::before{content:"";position:absolute;inset:-40% 30% auto -20%;height:560px;background:radial-gradient(closest-side,rgba(var(--ec-brand-amber-rgb),.14),transparent 70%);pointer-events:none}
.ind .hero .wrap{position:relative}
.ind .crumb{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin:0 0 18px}
.ind .crumb a{text-decoration:underline;text-underline-offset:3px}
.ind h1{font-family:'Barlow Condensed',sans-serif;font-size:clamp(38px,6vw,64px);font-weight:800;letter-spacing:.01em;line-height:1.04;margin:0 0 20px;text-transform:uppercase;max-width:20ch}
.ind .lede{font-size:19px;color:var(--sub);max-width:62ch;margin:0}

/* bands */
.ind section.band{position:relative;padding:60px 0}
.ind section.band::before{content:"";position:absolute;top:0;left:50%;width:min(560px,60%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(var(--ec-brand-amber-rgb),.45),transparent)}
.ind .kicker{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text);margin:0 0 12px}
.ind h2{font-family:'Barlow Condensed',sans-serif;font-size:clamp(26px,3.6vw,38px);font-weight:800;letter-spacing:.02em;text-transform:uppercase;margin:0 0 16px;line-height:1.1}
.ind h3{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin:0 0 8px;color:var(--txt);line-height:1.2}
.ind .sec-sub{font-size:17px;color:var(--sub);max-width:62ch;margin:0 0 32px}

/* cards: the hub's five industries, the band's three points, a page's two facts */
.ind .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.ind .card{background:var(--s1);border:1px solid var(--bdr);border-radius:12px;padding:22px;scroll-margin-top:96px}
.ind .card p{font-size:15px;color:var(--sub);margin:0}
.ind .card h3 a{color:var(--txt);text-decoration:none}
.ind .card h3 a::after{content:" \2192";color:var(--accent-text)}
.ind .card h3 a:hover,.ind .card h3 a:focus-visible{color:var(--accent-text)}
.ind .card .ic-box{width:40px;height:40px;border-radius:10px;background:rgba(var(--ec-brand-amber-rgb),.12);border:1px solid rgba(var(--ec-brand-amber-rgb),.28);display:flex;align-items:center;justify-content:center;margin:0 0 14px;color:var(--ec-brand-amber)}
body.light-mode .ind .card .ic-box{color:var(--accent-text)}
.ind .card .ic-box .ic{width:20px;height:20px}
.ind .card:target{border-color:var(--ec-brand-amber)}
.ind .facts{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.ind .facts h2{font-size:24px;margin:0 0 10px}

/* workflow steps */
.ind .steps{list-style:none;counter-reset:step;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.ind .steps li{counter-increment:step;background:var(--s1);border:1px solid var(--bdr);border-radius:12px;padding:22px}
.ind .steps li::before{content:counter(step,decimal-leading-zero);display:block;font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:800;letter-spacing:.12em;color:var(--accent-text);margin:0 0 8px}
.ind .steps p{font-size:15px;color:var(--sub);margin:0}

/* FAQ */
.ind .faq{max-width:780px}
.ind .faq details{border-bottom:1px solid var(--bdr)}
.ind .faq summary{cursor:pointer;list-style:none;padding:18px 32px 18px 0;position:relative;font-weight:700;font-size:18px;color:var(--txt)}
.ind .faq summary::-webkit-details-marker{display:none}
.ind .faq summary::after{content:"+";content:"+" / "";position:absolute;right:4px;top:14px;font-size:24px;color:var(--accent-text)}
.ind .faq details[open] summary::after{content:"\2212";content:"\2212" / ""}
.ind .faq summary:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:4px}
.ind .faq details p{margin:0 0 18px;color:var(--sub)}

/* related reading */
.ind .related{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 14px}
.ind .related a{display:inline-block;border:1px solid var(--bdr);border-radius:100px;padding:8px 16px;text-decoration:none;font-weight:600}
.ind .related a:hover,.ind .related a:focus-visible{border-color:var(--accent-text)}

/* CTA */
.ind .cta{background:radial-gradient(120% 140% at 0% 0%,rgba(var(--ec-brand-amber-rgb),.14),transparent 60%),var(--s1);border:1px solid var(--bdr);border-radius:14px;padding:32px;max-width:780px}
.ind .cta p{margin:0 0 18px;color:var(--sub)}
.ind .cta .cta-kicker{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--txt);margin:0 0 8px}
.ind .cta-actions{margin:0}
.ind .cta-btn{display:inline-block;background:var(--ec-brand-gradient);color:#0F1117;font-family:'Barlow Condensed',sans-serif;font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:16px;text-decoration:none;padding:13px 26px;border-radius:8px}
.ind .cta-btn:hover,.ind .cta-btn:focus-visible{opacity:.85}
.ind .lang-links{display:flex;flex-wrap:wrap;gap:8px 16px;margin:28px 0 0;font-size:14px}

@media(max-width:600px){
  .ind .hero{padding:36px 0 44px}
  .ind section.band{padding:44px 0}
  .ind .wrap{padding:0 18px}
  .ind .lede{font-size:17px}
  .ind .cta{padding:24px 20px}
  .ind .faq summary{font-size:17px}
}