/* ===== 48x subpage layer (products/industries/company/blog/legal) ===== */
.subpage .page-hero{border-bottom:1px solid var(--border-1);background:var(--surface-1)}
.subpage .page-hero .frame{padding-top:clamp(36px,6vh,72px);padding-bottom:clamp(30px,5vh,56px)}
.subpage .page-hero h1{font-size:clamp(2.6rem,1.4rem + 4.6vw,4.6rem);font-weight:620;letter-spacing:-.035em;line-height:1.02;color:var(--ink-1);max-width:20ch;margin:10px 0 0}
.subpage .page-hero h1 .accent{color:var(--accent)}
.subpage .page-hero .lede{margin-top:18px;max-width:62ch}
.crumbs{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--ink-4);margin-bottom:22px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumbs a{color:var(--ink-3)}.crumbs a:hover{color:var(--accent)}
.crumbs .sep{color:var(--ink-4);opacity:.6}
.crumbs [aria-current]{color:var(--ink-2)}
/* generic content rhythm */
.subpage .band{border-bottom:1px solid var(--border-1)}
.subpage .h2{font-size:clamp(1.6rem,1.1rem + 2vw,2.4rem);color:var(--ink-1);letter-spacing:-.03em;margin:0 0 22px}
.sp-cards{margin-top:6px}
.sp-cards .card h3 a{color:inherit}
.sp-cards .card h3 a:hover{color:var(--accent)}
.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border-1);border:1px solid var(--border-1)}
.cards-2 .card{background:var(--surface-1);padding:26px}
.cards-2 .card:hover{background:var(--surface-2)}
@media (max-width:860px){.cards-2{grid-template-columns:1fr}}
/* 3-col cards on subpages: boxed like cards-2 (override homepage open style) */
.sp-cards.cards-3{gap:1px;background:var(--border-1);border:1px solid var(--border-1)}
.sp-cards.cards-3 .card{background:var(--surface-1);padding:26px;border-right:0;border-bottom:0}
.sp-cards.cards-3 .card:hover{background:var(--surface-2)}
@media (max-width:860px){.sp-cards.cards-3{grid-template-columns:1fr}}
/* prose */
.prose{max-width:76ch}
.prose h2{font-size:clamp(1.45rem,1rem + 1.6vw,2rem);color:var(--ink-1);letter-spacing:-.025em;margin:34px 0 12px}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 16px;line-height:1.65;color:var(--ink-2)}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.prose strong{color:var(--ink-1)}
.article p{font-size:1.06rem}
/* FAQ */
.faq{border:1px solid var(--border-1);border-radius:var(--r);margin:0 0 10px;background:var(--surface-1)}
.faq summary{cursor:pointer;padding:16px 18px;font-weight:600;color:var(--ink-1);list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";color:var(--accent);font-weight:600}
.faq[open] summary::after{content:"\2212"}
.faq p{padding:0 18px 16px;margin:0}
.faq summary:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:var(--r)}
/* image placeholder */
.ph-img{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:320px;border:2px dashed var(--border-2);border-radius:var(--r-lg);background:var(--surface-2);
  color:var(--ink-3);text-align:center;padding:28px;margin:0}
.ph-tag{font-family:var(--font-pixel);font-size:11px;letter-spacing:.2em;color:var(--accent)}
.ph-lbl{font-weight:600;color:var(--ink-2);font-size:1.05rem}
.ph-path{font-family:var(--font-mono);font-size:12px;color:var(--ink-4)}
/* blog */
.post-card .post-date{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);display:block;margin-bottom:10px}
.post-grid .card h3{margin-bottom:10px}
/* footer 4-col */
.foot-grid-4{grid-template-columns:1.4fr 1fr 1fr 1fr}
@media (max-width:980px){.foot-grid-4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid-4{grid-template-columns:1fr}}
.foot-grid-5{grid-template-columns:1.4fr 1fr 1fr 1fr 1fr}
@media (max-width:1100px){.foot-grid-5{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:760px){.foot-grid-5{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.foot-grid-5{grid-template-columns:1fr}}
/* FAQ section: Why prose (left) + FAQ accordion (right) */
.why-faq{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.why-faq .wf-why h2{margin-top:0}
.why-faq .wf-faq h2{margin-top:0;margin-bottom:20px}
@media (max-width:860px){.why-faq{grid-template-columns:1fr;gap:36px}}

.foot-grid-4r{grid-template-columns:2.4fr 1fr 1fr 1fr}
@media(max-width:760px){.foot-grid-4r{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.foot-grid-4r{grid-template-columns:1fr}}