/* BH backup kit pages: hero art, kit cards, What Broke tiles */
.hero h1 { max-width: 16ch; }
.hero-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 40px; align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .hero-art { display: none; } }
.hero-art { position: relative; height: 380px; }
.hero-art .sheet { position: absolute; width: 230px; aspect-ratio: 8.5/11; border-radius: 12px; background: #fff; box-shadow: var(--shadow-lg); overflow: hidden; }
.hero-art .sheet iframe { width: 816px; height: 1056px; border: 0; transform: scale(.282); transform-origin: 0 0; pointer-events: none; }
.hero-art .s1 { right: 120px; top: 10px; transform: rotate(-6deg); }
.hero-art .s2 { right: 10px; top: 40px; transform: rotate(5deg); }
.phone { position: absolute; right: 150px; bottom: 0; width: 150px; height: 230px; border-radius: 26px; background: var(--color-primary-ink); box-shadow: var(--shadow-xl); padding: 14px 12px; color: #fff; display: flex; flex-direction: column; gap: 8px; }
.phone .pq { font: 700 12px/1.35 var(--font-display); }
.phone .pr { margin-top: auto; height: 34px; border-radius: 999px; background: var(--color-coral); display: grid; place-items: center; font: 800 11px var(--font-display); letter-spacing: .08em; }
.phone .pp { display: flex; gap: 3px; } .phone .pp span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.25); } .phone .pp span.on { background: var(--color-coral); }

.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .grid-4 { grid-template-columns: 1fr 1fr; gap: 12px; } }

.kit-group + .kit-group { margin-top: 36px; }
.kit-group > h3 { font-size: 15px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #6b7480; margin-bottom: 14px; }
.kcard { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 14px; display: flex; flex-direction: column; gap: 8px; transition: transform .15s ease, box-shadow .15s ease; }
.kcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kcard .thumb { display: block; aspect-ratio: 8.5 / 11; border-radius: var(--radius-sm); overflow: hidden; position: relative; background: var(--surface-container-low); box-shadow: inset 0 0 0 1px var(--surface-container); }
.kcard .thumb.wide { aspect-ratio: 16 / 10; }
.kcard .thumb iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; pointer-events: none; background: #fff; }
.kcard .thumb iframe[data-w="816"] { width: 816px; height: 1056px; }
.kcard .thumb iframe[data-w="1180"] { width: 1180px; height: 738px; }
.kcard .kmeta { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.kcard h4 { font-size: 16px; font-weight: 750; line-height: 1.25; }
.kcard p { font-size: 14px; color: #4a5361; line-height: 1.45; }
.kcard .row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
@media (max-width: 520px) { .kcard p { display: none; } .kcard h4 { font-size: 14px; } }

/* What Broke? tiles: one accent each */
.broke { --a: var(--color-primary); --bg: #EEF3FA; background: var(--bg); border-radius: var(--radius-lg); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.broke.blue   { --a: #3F6BA3; --bg: #EAF1F9; }
.broke.coral  { --a: #C9473A; --bg: #FDEDEB; }
.broke.green  { --a: #3E8A63; --bg: #E8F4EE; }
.broke.orange { --a: #B8661F; --bg: #FCF0E4; }
.broke.purple { --a: #8A55A0; --bg: #F4ECF6; }
.broke.gold   { --a: #8C6F12; --bg: #FAF3DC; }
.broke .bicon { width: 44px; height: 44px; border-radius: 12px; background: #fff; color: var(--a); display: grid; place-items: center; box-shadow: var(--shadow-xs); }
.broke .bicon svg { width: 24px; height: 24px; }
.broke h3 { font-size: 20px; font-weight: 800; color: var(--color-primary-ink); }
.broke p { font-size: 16px; color: #3a4350; }
.broke details { border-radius: 10px; }
.broke summary { cursor: pointer; font: 700 14px var(--font-display); color: var(--a); list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; }
.broke summary::-webkit-details-marker { display: none; }
.broke summary::after { content: "+"; font-size: 18px; line-height: 1; }
.broke details[open] summary::after { content: "–"; }
.broke ol { margin: 6px 0 0; padding-left: 20px; font-size: 15px; color: #3a4350; }
.broke ol li + li { margin-top: 4px; }
.broke .links { margin-top: auto; padding-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; }
.broke .chip { background: #fff; color: var(--a); }
.broke .chip:hover { background: #fff; box-shadow: var(--shadow-xs); }

/* subpage header */
.subhero { padding: 40px 0 8px; }
.subhero h1 { font-size: clamp(32px, 5vw, 48px); font-weight: 800; margin-top: 10px; }
.subhero p { font-size: 18px; color: #4a5361; margin-top: 12px; max-width: 62ch; }
.crumb { font: 700 14px var(--font-display); color: var(--color-primary-deep); text-decoration: none; }

/* Online band: deliberately not cards */
.online { background: radial-gradient(900px 500px at 100% 0%, rgba(99,142,197,.35), transparent 60%), linear-gradient(160deg, #1F3F66, #14283F); color: #fff; padding: 56px 0; }
.online h2 { color: #fff; font-size: clamp(28px, 4vw, 40px); font-weight: 800; margin-top: 10px; }
.online p { color: #cdd9e6; font-size: 18px; margin-top: 12px; max-width: 60ch; }
.online-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.tools { margin-top: 30px; border-top: 1px solid rgba(255,255,255,.14); }
.tool { display: grid; grid-template-columns: 52px 1fr auto; gap: 18px; align-items: center; padding: 20px 4px; border-bottom: 1px solid rgba(255,255,255,.14); color: #fff; text-decoration: none; transition: background .15s, padding .15s; }
.tool:hover { background: rgba(255,255,255,.05); padding-left: 12px; }
.tool .ti { width: 52px; height: 52px; border-radius: 14px; background: rgba(255,255,255,.1); display: grid; place-items: center; color: #FFB4AB; }
.tool .ti svg { width: 26px; height: 26px; }
.tool b { font: 800 19px var(--font-display); display: block; }
.tool small { color: #b9c8d8; font-size: 15px; }
.tool i { font-style: normal; font-size: 20px; color: #FFB4AB; }

/* Questions on the hub */
.qcols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 900px) { .qcols { grid-template-columns: 1fr; } }
.qh { font-size: 20px; font-weight: 800; margin-bottom: 12px; }
.qh span { font: 600 14px var(--font-body); color: #6b7480; margin-left: 8px; }
.qv { width: 100%; border: 0; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 12px; display: grid; grid-template-columns: 132px 1fr; gap: 16px; align-items: center; text-align: left; cursor: pointer; font: inherit; color: inherit; transition: transform .15s, box-shadow .15s; }
.qv + .qv { margin-top: 10px; }
.qv:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.qv:focus-visible { outline: none; box-shadow: var(--shadow-glow-primary); }
.qthumb { aspect-ratio: 16/9; border-radius: 10px; background: #1F3F66 center/cover; display: grid; place-items: center; position: relative; }
.qthumb i { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.92); color: #14283F; display: grid; place-items: center; }
.qthumb i svg { margin-left: 2px; }
.qthumb.aud { background: linear-gradient(160deg, #F37163, #D85546); }
.qa { grid-template-columns: 64px 1fr; }
.qa .qthumb { aspect-ratio: 1; }
.qnum { display: block; font: 800 11px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--color-coral-deep); }
.qt { display: block; font: 650 15.5px/1.4 var(--font-display); color: var(--color-primary-ink); margin-top: 4px; }
@media (max-width: 520px) { .qv { grid-template-columns: 96px 1fr; } }
dialog#vdlg { border: 0; padding: 0; border-radius: 22px; background: var(--surface-blue-low, #F2F6FA); width: min(1240px, 96vw); height: min(780px, 92vh); box-shadow: var(--shadow-xl); overflow: hidden; }
dialog#vdlg iframe { width: 100%; height: 100%; border: 0; display: block; }
dialog#vdlg::backdrop { background: rgba(10,16,26,.7); }

dialog#vdlg .dx { position: absolute; top: 10px; right: 10px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); font-size: 22px; cursor: pointer; }