/* O977 hero views: the existing cream, teal, gold and self-hosted type. */
.hero-page-bar{background:var(--teal-ink);color:var(--on-dark);padding:18px 0}
.hero-page-bar .wrap{display:flex;justify-content:space-between;gap:16px;align-items:center}
.hero-back{font-weight:800;text-decoration:none;font-size:15px}
.hero-detail{padding:40px 0 56px}
.hero-heading{margin-bottom:28px}
.hero-heading h1{font-size:clamp(42px,7vw,78px);margin-top:12px}
.hero-detail-grid{display:grid;gap:28px;align-items:start}
.hero-portrait{border-radius:var(--r);background:var(--parch);border:1px solid var(--line);overflow:hidden;padding:16px}
.hero-portrait{isolation:isolate}
.hero-portrait img{width:100%;height:260px;object-fit:contain;mix-blend-mode:multiply}
.hero-grade-badge{display:inline-block;margin-top:12px;padding:6px 12px;border-radius:999px;background:var(--teal);color:var(--on-dark);font:800 11px/1 var(--body);letter-spacing:.1em;text-transform:uppercase}
.hero-kit h2,.hero-ultimate h2{font-size:clamp(28px,3.5vw,42px)}
.kit-note{color:var(--muted);font-size:15px;margin:8px 0 18px}
.skill-list{display:grid;gap:14px}
.skill-card{display:flex;gap:16px;padding:18px;background:var(--parch);border:1px solid var(--line);border-radius:var(--r-sm)}
.skill-icon{flex:0 0 64px;width:64px;height:64px;object-fit:contain;border-radius:12px}
.skill-card .eyebrow{font-size:11px;letter-spacing:.1em}
.skill-card h3{font-size:23px;margin:8px 0;line-height:1.12}
.skill-card p:not(.eyebrow){font-size:16px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.skill-details{margin-top:12px}
.skill-details summary{cursor:pointer;font-weight:800;min-height:44px;display:flex;align-items:center;text-decoration:underline;text-underline-offset:3px;color:var(--teal)}
.skill-details summary::before{content:'+';margin-right:8px}
.skill-details[open] summary::before{content:'-'}
.skill-details p{margin-top:10px}
.hero-ultimate{max-width:800px;margin:48px auto 0;text-align:center}
.hero-ultimate h2{margin:12px 0 24px}
.ultimate-figure{margin:0}
.ultimate-figure picture{display:block;border:5px solid var(--parch-2);border-radius:var(--r);overflow:hidden;background:var(--teal-ink)}
.ultimate-figure img{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}
.ultimate-figure figcaption{margin-top:12px;color:var(--muted);font-size:14px}
.animation-toggle{border:1px solid var(--line);border-radius:999px;padding:10px 20px;background:var(--parch);font-weight:800;margin-top:16px;min-height:44px}
.preview-pending{padding:32px;border:1px solid var(--line);border-radius:var(--r);color:var(--muted)}
.hero-pagination{display:flex;justify-content:space-between;gap:20px;margin-top:48px;font-weight:800}
.hero-pagination a{padding:8px 0;min-height:44px}
.hero-page-footer{text-align:center;background:var(--teal);color:var(--on-dark-muted);padding:28px 16px;font-size:14px}
.hero-page-footer a{display:inline-block;margin-top:12px;color:var(--on-dark);font-weight:800}
@media(min-width:860px){.hero-detail-grid{grid-template-columns:minmax(220px,320px) minmax(0,1fr);gap:40px}.hero-portrait img{height:500px}.skill-icon{width:72px;height:72px;flex-basis:72px}}
@media(max-width:420px){.skill-card{padding:14px;gap:12px}.skill-icon{width:54px;height:54px;flex-basis:54px}.skill-card h3{font-size:21px}}