/* Shared building blocks for full-width custom pages (Product Strategy, CocoNet, ...) */
.page{--navy:#102255;--ivory:#FFFCF8;--gold:#D6A24A;--gold-soft:#FFF4DF;--pale:#EEF3FF;--pale2:#F6F8FF;padding:0}
.page .wrap{max-width:1180px}
.page h1{text-transform:none;font-size:clamp(2.4rem,5.4vw,4.1rem);line-height:1.04;margin:.15em 0 .4em}
.page h2{font-size:clamp(1.8rem,3.6vw,2.7rem);margin:0 0 .45em;line-height:1.1}
.page h3{font-size:1.25rem}
.page p{color:var(--slate)}
.page .crumbs{margin-bottom:20px}
.page .lead{font-size:1.2rem;color:#3d4a5a;font-weight:500}
.tag{display:inline-flex;align-items:center;gap:10px;color:var(--blue-700);font:700 .78rem/1.4 var(--body);letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.tag::before{content:"";width:28px;height:3px;border-radius:9px;background:var(--gold)}
.head{max-width:780px;margin:0 auto 40px;text-align:center}
.head .tag{justify-content:center}
.tint{background:var(--pale2)}
.narrow{max-width:860px}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.actions.center{justify-content:center}

/* FAQ */
.faq{display:grid;gap:10px}
.faq details{background:#fff;border:1px solid #DDE6FF;border-radius:16px;padding:0 20px;transition:border-color .3s,box-shadow .3s}
.faq details[open]{border-color:var(--blue);box-shadow:0 10px 24px rgba(58,106,253,.08)}
.faq summary{list-style:none;cursor:pointer;padding:18px 30px 18px 0;position:relative;font-weight:600;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:12px;font-size:1.5rem;color:var(--blue);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 18px}

/* Final call-to-action panel */
.cta-panel{position:relative;overflow:hidden;padding:64px 34px;border-radius:30px;text-align:center;background:linear-gradient(135deg,#2450D8,#102255)}
.cta-panel>*{position:relative;z-index:1}
.cta-panel .tag{color:#F0D18F;justify-content:center}
.cta-panel h2{color:#fff;max-width:760px;margin:0 auto .4em}
.cta-panel p{color:#DDE6FA;max-width:620px;margin:0 auto 24px}
.btn-light{background:#fff;color:var(--blue-700);border-color:#fff}
.btn-light:hover{background:var(--gold-soft);border-color:var(--gold-soft);color:var(--navy)}

/* Scroll reveal: only when the motion script has run, so content is never hidden without JS */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.js .rv.in{opacity:1;transform:none}

@media(max-width:640px){.actions .btn{flex:1 1 100%;text-align:center}.cta-panel{padding:48px 22px}}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}}
.btn-outline-light{background:transparent;border:2px solid rgba(255,255,255,.6);color:#fff}
.btn-outline-light:hover{background:rgba(255,255,255,.1);color:#fff}