/* ==========================================================================
   Exam catalog + product pages — shared additions on top of style.css
   ========================================================================== */

/* page hero (no canvas, lighter than the home hero) */
.page-hero{position:relative;padding:140px 0 64px;border-bottom:1px solid var(--line);overflow:hidden}
.page-hero .display{font-size:clamp(2.2rem,5vw,3.6rem);margin:18px 0 14px}
.page-hero .lead{max-width:640px}

/* breadcrumb */
.crumb{display:flex;gap:10px;align-items:center;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--ink)}
.crumb .sep{opacity:.5}

/* catalog grid */
.exam-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:980px){.exam-grid{grid-template-columns:1fr}}
.exam-card{display:flex;flex-direction:column;gap:10px;padding:26px 24px}
.exam-card .code{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.72rem;letter-spacing:.14em;color:var(--beacon)}
.exam-card h3{margin:2px 0 0;font-size:1.06rem}
.exam-card .desc{color:var(--muted);font-size:.92rem;line-height:1.55;flex:1}
.exam-card .price{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.8rem;color:var(--muted)}
.exam-card .actions{margin-top:6px}

/* product detail layout */
.product-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;align-items:start}
@media (max-width:980px){.product-grid{grid-template-columns:1fr}}
.product-copy h2{font-size:1.15rem;margin:34px 0 12px}
.product-copy h2:first-child{margin-top:0}
.product-copy ul{margin:10px 0 0;padding:0;list-style:none}
.product-copy ul li{position:relative;padding-left:22px;margin-bottom:9px;color:var(--muted);font-size:.95rem;line-height:1.55}
.product-copy ul li::before{content:"●";position:absolute;left:2px;top:2px;font-size:.6rem;color:var(--accent)}

/* buy panel */
.buy-panel{position:sticky;top:96px;padding:28px 26px}
@media (max-width:980px){.buy-panel{position:static}}
.buy-panel .price-line{display:flex;align-items:baseline;gap:10px}
.buy-panel .price-big{font-family:Archivo,sans-serif;font-weight:800;font-size:2.4rem;letter-spacing:-.02em}
.buy-panel .price-note{color:var(--muted);font-size:.85rem}
.buy-panel .fine{margin-top:14px}
.buy-panel ul.checks{margin:18px 0}
.buy-note{color:var(--muted);font-size:.8rem;line-height:1.5;margin-top:10px}
.signup.fallback{display:none}
.buy-area[data-mode="waitlist"] .buy-btn{display:none}
.buy-area[data-mode="waitlist"] .signup.fallback{display:block}

/* mini FAQ */
.faq{margin-top:14px}
.faq details{border-bottom:1px solid var(--line);padding:14px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:.95rem}
.faq p{color:var(--muted);font-size:.9rem;margin:10px 0 0;max-width:640px}

/* step strip on catalog */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
@media (max-width:760px){.steps{grid-template-columns:1fr}}
.step{padding:22px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.step .n{font-family:"IBM Plex Mono",ui-monospace,monospace;color:var(--accent);font-size:.75rem;letter-spacing:.12em}
.step b{display:block;margin:8px 0 4px}
.step span{color:var(--muted);font-size:.9rem;line-height:1.5}