/* Industry pages. Shares every token, the type trio and the components with the
   homepage, then adds the handful of pieces a text page needs. Deliberately a
   different shape to the homepage: static image hero, one reading column, no
   scroll journey. A page someone lands on from a search wants to be readable
   in two seconds, not performed. */

.subpage{background:var(--canvas)}
.subpage .env{background:var(--canvas-deep)}
.subpage .env-glow{
  background:radial-gradient(1100px 620px at 82% 4%,rgba(56,182,255,.10),transparent 62%),
             radial-gradient(820px 560px at 8% 92%,rgba(255,107,44,.05),transparent 64%)}

/* ---------- the page hero ---------- */
.phero{position:relative;z-index:1;min-height:min(70vh,620px);display:flex;align-items:flex-end;
  overflow:hidden;padding:9rem max(1.4rem,7vw) clamp(2.4rem,5vw,4rem)}
.phero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.phero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(5,9,18,.96) 6%,rgba(5,9,18,.72) 42%,rgba(5,9,18,.42) 100%)}
.phero-inner{position:relative;width:var(--wrap);margin-inline:auto;text-shadow:var(--tshadow)}
.phero-inner .btn{text-shadow:none;margin-top:1.8rem}
.phero h1{font-size:clamp(2rem,5vw,3.7rem);max-width:18ch;margin-bottom:1rem}
.phero .lede{max-width:56ch;color:#dbe6f4}

.crumbs{color:var(--signal);margin-bottom:1.1rem;display:flex;gap:.6rem;align-items:center;
  flex-wrap:wrap;font-size:.66rem}
.crumbs a{color:var(--text-2)}
.crumbs a:hover{color:var(--text)}
.crumbs span[aria-hidden]{color:var(--panel-line)}

/* ---------- the reading column ---------- */
.prose{width:var(--wrap);margin-inline:auto;max-width:760px;
  padding-block:clamp(3rem,6vw,5rem);display:grid;gap:clamp(2.2rem,4vw,3.2rem)}
.pblock h2{font-size:clamp(1.4rem,2.6vw,2rem);margin-bottom:.9rem}
.pblock p{color:var(--text-2);font-size:clamp(1rem,1.4vw,1.12rem);max-width:68ch}
.pblock{padding-left:1.5rem;border-left:1px solid var(--panel-line);position:relative}
.pblock::before{content:"";position:absolute;left:-1px;top:0;width:1px;height:2.6rem;background:var(--signal)}

/* ---------- the call to action ---------- */
.pcta{padding-block:clamp(2rem,4vw,3rem)}
.pcta-inner{width:var(--wrap);margin-inline:auto;background:var(--panel-2);
  border:1px solid var(--panel-line);border-left:2px solid var(--accent);border-radius:4px;
  padding:clamp(2rem,5vw,3.4rem)}
.pcta h2{font-size:clamp(1.7rem,3.4vw,2.6rem)}
.pcta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}

/* ---------- the sibling pages ---------- */
.pelse{width:var(--wrap);margin-inline:auto;padding-block:clamp(2rem,4vw,3rem) clamp(3rem,6vw,4rem)}
.pelse-grid{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  background:var(--panel-line);border:1px solid var(--panel-line);border-radius:4px;overflow:hidden}
.pelse-grid a{display:block;background:var(--panel-2);padding:1.2rem 1.3rem;color:var(--text);
  font-size:.96rem;transition:background .35s var(--ease),color .35s var(--ease)}
.pelse-grid a:hover{background:var(--panel);color:var(--signal)}

@media (max-width:860px){
  .subpage .nav-links{display:none}
  .phero{padding-top:7rem}
}

/* ---------- inline figure inside the reading column ---------- */
.pfig{margin:0;border:1px solid var(--panel-line);border-radius:4px;overflow:hidden}
.pfig img{width:100%;display:block}
.pfig figcaption{padding:1rem 1.2rem;color:var(--text-2);font-size:.92rem;background:var(--panel-2)}

/* ---------- the FAQ ---------- */
.pfaq{padding-block:clamp(2rem,4vw,3rem)}
.pfaq-inner{width:var(--wrap);margin-inline:auto;max-width:820px}
.pfaq .faq-list{margin-top:1.6rem}
.pfaq details{border-bottom:1px solid var(--panel-line)}
.pfaq summary{cursor:pointer;padding:1.2rem 2.4rem 1.2rem 0;position:relative;list-style:none;
  font-family:var(--display);font-weight:700;font-variation-settings:"wdth" 112;font-size:1.04rem;
  text-transform:capitalize}
.pfaq summary::-webkit-details-marker{display:none}
.pfaq summary::after{content:"";position:absolute;right:.5rem;top:1.78em;width:12px;height:1px;background:var(--signal)}
.pfaq summary::before{content:"";position:absolute;right:calc(.5rem + 5.5px);top:calc(1.78em - 6px);width:1px;height:12px;background:var(--signal);transition:transform .4s var(--ease),opacity .4s var(--ease)}
.pfaq details[open] summary::before{transform:scaleY(0);opacity:0}
.pfaq details p{padding:0 2rem 1.4rem 0;color:var(--text-2);font-size:.99rem;max-width:66ch}

/* prose links read as links without shouting */
.pblock a{color:var(--signal);border-bottom:1px solid var(--signal-muted);
  transition:border-color .3s var(--ease)}
.pblock a:hover{border-color:var(--signal)}