/* lib/_product_brochure.css — shared "executive brochure" look for /products/ pages.
   Extracted verbatim from the brochure inline <style> (dark indigo / Georgia serif / terracotta).
   Loaded by products/_product_head.php AFTER the site CSS so the dark body wins; the header/footer
   Poppins override in _product_head.php loads AFTER this, so the chrome stays sans-serif.
   Small brochure pages rely on this instead of an inline copy; the two richer pages
   (customer-journey, whatsapp-attribution) keep their own extra <style> inline. */
:root{--indigo:#1E2235;--terracotta:#E46C47;--offwhite:#F5F3EF;--warmgray:#A6A3A1;--panel:#252A40;--dark:#171B2B}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Georgia,serif;background:var(--indigo);color:var(--offwhite);line-height:1.55}
.page{min-height:100vh;background:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px),radial-gradient(circle at 82% 7%,rgba(228,108,71,.13),transparent 34%),radial-gradient(circle at 12% 88%,rgba(245,243,239,.055),transparent 34%),var(--indigo);background-size:64px 64px,64px 64px,auto,auto,auto}
.wrap{width:min(1120px,calc(100% - 40px));margin:0 auto}section{padding:76px 0}.hero{padding:118px 0 108px}.eyebrow{color:var(--terracotta);text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;font-weight:bold;margin-bottom:24px}
h1{font-size:clamp(3.2rem,7.4vw,7rem);line-height:.92;letter-spacing:-.062em;margin:0;max-width:1080px}h2{font-size:clamp(2.15rem,4.4vw,4rem);line-height:1.02;letter-spacing:-.046em;margin:0 0 28px}h3{font-size:1.32rem;margin:0 0 16px;color:var(--offwhite)}
p{color:var(--warmgray);font-size:1.12rem;margin:0 0 18px}.accent{color:var(--terracotta)}.hero-copy{max-width:720px;margin-top:38px;font-size:1.34rem}
.cta-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:36px}.btn{display:inline-block;text-decoration:none;color:var(--indigo);background:var(--terracotta);padding:15px 25px;border-radius:999px;font-weight:bold}.btn.secondary{color:var(--offwhite);background:transparent;border:1px solid rgba(245,243,239,.28)}
.principle{text-align:center;padding:108px 0;border-top:1px solid rgba(245,243,239,.08);border-bottom:1px solid rgba(245,243,239,.08)}.principle blockquote{margin:0 auto;max-width:980px;font-size:clamp(2.1rem,4.2vw,4.2rem);line-height:1.08;letter-spacing:-.047em;color:var(--offwhite)}
.reality-list{display:grid;gap:18px;margin-top:28px;max-width:840px}.reality-line{font-size:1.32rem;color:var(--warmgray);border-left:3px solid rgba(228,108,71,.55);padding-left:18px}
.comparison{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:36px}.panel{background:rgba(37,42,64,.72);border:1px solid rgba(228,108,71,.18);border-radius:30px;padding:34px;box-shadow:0 28px 80px rgba(0,0,0,.16)}
.journey{display:grid;gap:14px;margin-top:22px}.step{background:rgba(23,27,43,.68);border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:16px 18px;color:var(--warmgray)}.step strong{display:block;color:var(--offwhite);margin-bottom:4px}
.bridge{margin-top:34px;color:var(--offwhite);font-size:1.26rem;border-left:3px solid var(--terracotta);padding-left:18px;max-width:850px}
.conversation{margin-top:34px;background:rgba(23,27,43,.48);border:1px solid rgba(245,243,239,.09);border-radius:34px;padding:48px}.dialogue-row{padding:28px 0;border-bottom:1px solid rgba(245,243,239,.10)}.dialogue-row:first-child{padding-top:0}.dialogue-row:last-child{border-bottom:0;padding-bottom:0}.speaker{color:var(--terracotta);text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;font-weight:bold;margin-bottom:10px}.dialogue{color:var(--offwhite);font-size:clamp(1.35rem,2.15vw,2rem);line-height:1.25;max-width:880px}
.impact-list{display:grid;grid-template-columns:1fr 1fr;gap:18px 46px;margin-top:34px;max-width:970px}.impact-item{color:var(--offwhite);font-size:1.28rem;padding:18px 0;border-bottom:1px solid rgba(245,243,239,.10)}.impact-item span{color:var(--terracotta);margin-right:10px}
.signature{text-align:center;padding:112px 0}.signature h2{font-size:clamp(3rem,7vw,6.2rem);line-height:.98;margin:0}.why{border-top:1px solid rgba(245,243,239,.08);border-bottom:1px solid rgba(245,243,239,.08)}.two{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.chip{border:1px solid rgba(228,108,71,.28);background:rgba(37,42,64,.52);color:var(--offwhite);padding:11px 16px;border-radius:999px;font-size:.96rem}
.footer-cta{text-align:center;padding:96px 0}.footer-cta p{max-width:740px;margin-left:auto;margin-right:auto;font-size:1.18rem}.closing{text-align:center;padding:70px 0 110px;border-top:1px solid rgba(245,243,239,.08)}.closing h2{font-size:clamp(2.45rem,5.7vw,5.6rem);line-height:.98;max-width:1020px;margin:0 auto}.brand{text-align:center;color:var(--warmgray);font-size:.95rem;padding:0 0 52px}.brand strong{color:var(--offwhite);display:block;font-size:1.25rem;margin-bottom:4px}
@media(max-width:860px){.comparison,.impact-list,.two{grid-template-columns:1fr}.hero{padding:78px 0 70px}section{padding:58px 0}.conversation{padding:30px}}

/* Related solutions — curated interlink band at the foot of every /products/ page (see
   products/_product_related.php + products_config.php). Sits after .page, before the site footer. */
.product-related{background:var(--indigo);border-top:1px solid rgba(245,243,239,.08)}
.product-related .pr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:20px}
.pr-card{display:flex;flex-direction:column;background:rgba(37,42,64,.72);border:1px solid rgba(228,108,71,.18);border-radius:22px;padding:26px;text-decoration:none;transition:transform .18s ease,border-color .18s ease}
.pr-card:hover{transform:translateY(-4px);border-color:rgba(228,108,71,.5)}
.pr-card h3{margin:0 0 10px;color:var(--offwhite)}
.pr-card p{color:var(--warmgray);font-size:1.02rem;margin:0 0 18px;flex:1}
.pr-more{color:var(--terracotta);font-weight:bold;font-size:.95rem}
@media(max-width:860px){.product-related .pr-grid{grid-template-columns:1fr}}