/* Protocol pages shared styles */
:root { --proto-accent: var(--brand-primary); }

.visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.breadcrumb { font-size:.8rem; background:linear-gradient(90deg,#f5faff,#fff); padding:.5rem 0; }
.breadcrumb ol { list-style:none; margin:0; padding:0 var(--space-4); display:flex; gap:.5rem; }
.breadcrumb a { text-decoration:none; }
.breadcrumb li+li:before { content:"/"; margin:0 .25rem; opacity:.55; }

.proto-hero { padding: var(--space-7) 0 var(--space-6); background:linear-gradient(140deg,#ffffff,var(--brand-light)); }
.proto-hero h1 { margin:0 0 var(--space-4); font-size: clamp(1.9rem,4.2vw,2.6rem); }
.proto-hero .lead { max-width: 70ch; }

.proto-cards { padding: var(--space-6) 0 var(--space-5); }
.proto-grid { display:grid; gap: var(--space-5); }
@media (min-width: 900px){ .proto-grid { grid-template-columns: repeat(3,1fr); } }
.proto-card { background:#fff; border:1px solid #e2e8f0; border-radius: var(--radius-lg); padding: var(--space-5) var(--space-5) var(--space-5); position:relative; box-shadow: var(--shadow-sm); display:flex; flex-direction:column; }
.proto-card:hover { box-shadow: var(--shadow-md); }
.proto-icon { font-size:2rem; margin-bottom:.75rem; }
.proto-card-title { font-size:1.25rem; margin:0 0 .75rem; }
.proto-card-intro { font-size:.95rem; line-height:1.5; margin:0 0 .75rem; }
.proto-benefits { list-style:none; margin:0 0 1rem; padding:0; font-size:.85rem; display:grid; gap:.4rem; }
.proto-benefits li { padding-left:1.1rem; position:relative; }
.proto-benefits li:before { content:"•"; position:absolute; left:0; color: var(--brand-primary); }

.proto-card--super { border-top:4px solid #0ea5e9; }
.proto-card--glow { border-top:4px solid #f59e0b; }
.proto-card--boost { border-top:4px solid #6366f1; }

.proto-how { background: linear-gradient(180deg,var(--brand-light),#ffffff); padding: var(--space-7) 0; }
.how-steps { list-style:none; margin: var(--space-5) 0 0; padding:0; display:grid; gap: var(--space-5); counter-reset: how; }
@media (min-width: 900px){ .how-steps { grid-template-columns: repeat(3,1fr); } }
.how-steps li { background:#fff; border:1px solid #e2e8f0; padding: var(--space-5); border-radius: var(--radius-lg); position:relative; box-shadow: var(--shadow-sm); }
.step-icon { background: var(--brand-primary); color:#fff; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; font-weight:600; margin-bottom:.75rem; }

.proto-cta { padding: var(--space-6) 0 var(--space-6); text-align:center; }
.cta-actions { display:flex; flex-wrap:wrap; gap: var(--space-3); justify-content:center; margin-bottom: var(--space-3); }

/* Detail pages */
.proto-detail-hero { padding: var(--space-7) 0 var(--space-6); background:linear-gradient(150deg,#ffffff,var(--brand-light)); position:relative; }
.proto-detail-hero h1 { margin:0 0 .75rem; font-size: clamp(2rem,4.2vw,2.7rem); }
.hero-sub { font-size:1.05rem; opacity:.9; margin:0 0 1.25rem; }
.detail-cta-top { display:flex; gap: var(--space-3); flex-wrap:wrap; }

.proto-section { padding: var(--space-5) 0 var(--space-4); }
.proto-section:nth-of-type(even) { background:#f8fafc; }
.proto-section h2 { font-size:1.4rem; margin:0 0 var(--space-4); }
.check-list { list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.check-list li { padding-left:1.4rem; position:relative; }
.check-list li:before { content:"✓"; position:absolute; left:0; color: var(--brand-primary); }
.benefit-bullets { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.benefit-bullets li { padding-left:1.1rem; position:relative; }
.benefit-bullets li:before { content:"•"; position:absolute; left:0; color: var(--brand-primary); }
.link-list { list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.link-list a { text-decoration:none; }
.link-list a:hover { text-decoration:underline; }

/* FAQ accordion */
.faq { display:grid; gap: var(--space-3); }
.faq-item { border:1px solid #e2e8f0; border-radius: var(--radius-md); background:#fff; }
.faq-q { width:100%; text-align:left; background:#fff; border:none; padding: .9rem 1rem; font:inherit; font-weight:600; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.faq-q:focus-visible { outline:2px solid var(--brand-primary); outline-offset:2px; }
.faq-q:after { content:"+"; font-weight:600; }
.faq-q[aria-expanded="true"]:after { content:"–"; }
.faq-a { padding: 0 1rem 1rem; font-size:.95rem; }

/* Bottom CTA */
.cta-bottom { text-align:center; }

/* Utility */
.disclaimer { font-size:.7rem; opacity:.8; max-width:60ch; margin: var(--space-4) auto 0; }

@media (min-width: 700px){
  .proto-section { padding: var(--space-6) 0 var(--space-5); }
}