/* ============================================================
   Product page styles (CollisionLink + feature subpages)
   ============================================================ */

/* breadcrumb */
.crumb{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted);}
.crumb a:hover{color:var(--blue-600);}
.crumb span{color:var(--muted-2);}

/* ---- product hero ---- */
.phero{background:linear-gradient(180deg,var(--surface-blue),#fff 80%); padding:clamp(36px,5vw,64px) 0 clamp(40px,5vw,72px);}
.phero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;}
.phero h1{font-size:clamp(38px,5vw,64px); margin-top:14px;}
.phero .pills{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.phero-media{aspect-ratio:16/12; border-radius:var(--r-xl); box-shadow:var(--sh-lg);}
@media(max-width:900px){.phero-grid{grid-template-columns:1fr;}}

/* ---- sticky subnav ---- */
oec-subnav{display:block; position:sticky; top:var(--nav-h); z-index:150;}
.subnav{background:rgba(255,255,255,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); transition:box-shadow .3s;}
.subnav.stuck{box-shadow:var(--sh-md);}
.subnav-inner{max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); height:62px; display:flex; align-items:center; gap:20px;}
.subnav-brand{display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--navy-800); flex-shrink:0;}
.subnav-mark{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--blue-600),var(--navy-800));color:#fff;display:grid;place-items:center;font-size:15px;}
.subnav-tabs{display:flex; align-items:center; gap:3px; height:100%; overflow-x:auto; scrollbar-width:none;}
.subnav-tabs::-webkit-scrollbar{display:none;}
.subnav-tab{position:relative; height:100%; display:flex; align-items:center; padding:0 14px; font-weight:600; font-size:15px; color:var(--ink-2); white-space:nowrap;}
.subnav-tab:hover{color:var(--blue-600);}
.subnav-tab.active{color:var(--blue-600);}
.subnav-tab.active::after{content:""; position:absolute; left:14px; right:14px; bottom:0; height:3px; background:var(--blue-600); border-radius:3px 3px 0 0;}
.subnav-cta{margin-left:auto; flex-shrink:0; padding:9px 18px; font-size:14.5px;}
@media(max-width:860px){.subnav-brand,.subnav-cta{display:none;} .subnav-inner{padding-left:max(var(--gut),12px);} }

/* ---- problem / solution ---- */
.prose-lg{font-size:clamp(19px,1.8vw,24px); line-height:1.55; color:var(--ink-2); max-width:30ch;}
.prose-lg b{color:var(--navy-800);}

/* ---- benefits grid ---- */
.ben-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.ben{padding:26px; border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; transition:all .3s var(--ease);}
.ben:hover{transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:var(--blue-100);}
.ben-ic{width:48px;height:48px;border-radius:13px;background:var(--blue-50);color:var(--blue-600);display:grid;place-items:center;margin-bottom:16px;}
.ben-ic svg{width:24px;height:24px;}
.ben h4{font-size:18px;}
.ben p{color:var(--muted); font-size:14.5px; margin-top:8px;}
@media(max-width:860px){.ben-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:540px){.ben-grid{grid-template-columns:1fr;}}

/* ---- big quote ---- */
.quote{background:var(--navy-800); color:#fff; border-radius:var(--r-xl); padding:clamp(36px,5vw,64px); position:relative; overflow:hidden;}
.quote::before{content:"\201C"; position:absolute; top:-20px; left:24px; font-family:var(--font-display); font-size:200px; color:rgba(255,255,255,.07); line-height:1;}
.quote-text{font-family:var(--font-display); font-weight:700; font-size:clamp(22px,2.6vw,34px); line-height:1.3; position:relative; max-width:24ch;}
.quote-by{margin-top:24px; color:rgba(255,255,255,.7); font-size:15px; position:relative;}

/* ---- FAQ accordion ---- */
.faq{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%; text-align:left; background:none; border:0; padding:24px 0; display:flex; align-items:center; justify-content:space-between; gap:20px; font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--navy-800);}
.faq-q .pm{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;flex-shrink:0;transition:all .3s;}
.faq-q .pm svg{width:18px;height:18px;transition:transform .3s;}
.faq-item.open .faq-q .pm{background:var(--blue-600);border-color:var(--blue-600);color:#fff;}
.faq-item.open .faq-q .pm svg{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .35s var(--ease);}
.faq-a-inner{padding:0 0 24px; color:var(--ink-2); max-width:70ch; line-height:1.6;}
.faq-a ul{margin:10px 0 0; padding-left:20px;}
.faq-a li{margin:4px 0;}

/* ---- contact form ---- */
.contact{background:var(--navy-900); color:#fff; padding:clamp(48px,6vw,88px) 0;}
.contact-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:start;}
.contact h2{color:#fff;}
.form-card{background:#fff; border-radius:var(--r-xl); padding:32px; box-shadow:var(--sh-lg);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;}.form-row{grid-template-columns:1fr;}}

/* ---- feature page hero ---- */
.fhero{padding:clamp(44px,6vw,80px) 0 clamp(36px,4vw,56px);}
.fhero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;}
.fhero h1{font-size:clamp(34px,4.4vw,56px);}
.feature-list{display:flex; flex-direction:column; gap:18px;}
.feature-list li{display:flex; gap:14px; align-items:flex-start; list-style:none;}
.feature-list .fl-ic{width:34px;height:34px;border-radius:10px;background:var(--blue-50);color:var(--blue-600);display:grid;place-items:center;flex-shrink:0;}
.feature-list .fl-ic svg{width:18px;height:18px;}
.feature-list b{font-family:var(--font-display); font-size:17px; color:var(--navy-800);}
.feature-list p{color:var(--muted); font-size:14.5px; margin-top:2px;}
@media(max-width:900px){.fhero-grid{grid-template-columns:1fr;}}

/* deep-link callout */
.deeplink{display:flex; align-items:center; gap:12px; padding:14px 18px; background:var(--blue-50); border:1px dashed var(--blue-400); border-radius:var(--r-md); font-size:14px; color:var(--blue-700);}
.deeplink code{font-family:var(--font-mono); font-size:13px; background:#fff; padding:3px 8px; border-radius:6px; border:1px solid var(--blue-100);}

/* ---- stat band + cta band (pulled from the design's home.css so flagship pages are self-contained) ---- */
.stat-band{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.stat-band > div{padding:8px 4px;}
@media(max-width:680px){.stat-band{grid-template-columns:1fr; text-align:center;}}
.cta-band{background:linear-gradient(120deg,var(--blue-700),var(--blue-600)); color:#fff; border-radius:var(--r-xl); padding:clamp(40px,6vw,72px); text-align:center; position:relative; overflow:hidden;}
.cta-band::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.12) 1px,transparent 0);background-size:30px 30px;opacity:.5;}
.cta-band h2{color:#fff; position:relative;}
.chart{display:flex;align-items:flex-end;gap:14px;height:240px;padding:20px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);}
.chart .bar{flex:1;background:linear-gradient(180deg,var(--blue-500),var(--blue-700));border-radius:8px 8px 0 0;position:relative;transition:height 1s var(--ease);min-height:6px;}
.chart .bar span{position:absolute;top:-22px;left:0;right:0;text-align:center;font-family:var(--font-mono);font-size:11px;color:var(--muted);}
.chart .bar i{position:absolute;bottom:-26px;left:0;right:0;text-align:center;font-size:12px;color:var(--muted);font-style:normal;}

/* sticky product subnav wrapper (Astro component uses .oecb-subnav) */
.oecb-subnav{display:block; position:sticky; top:var(--nav-h,76px); z-index:150;}