/* goodbloods layout layer. Colours and fonts come only from the house tokens. */
.skip{position:absolute;left:-9999px;top:8px;z-index:60;background:var(--h-card);color:var(--h-ink);padding:10px 16px;border:3px solid var(--h-ink);border-radius:16px}
.skip:focus{left:12px}

/* nav */
.nav-right{display:flex;align-items:center;gap:22px}
.h-nav ul{gap:20px;font-size:16px}
.nav-cta.h-btn{min-height:44px;padding:0 18px;font-size:15px;box-shadow:3px 3px 0 var(--h-ink)}
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;font:500 13px/1 var(--h-mono);text-transform:lowercase;border:3px solid var(--h-ink);border-radius:999px;padding:12px 16px;background:var(--h-card)}
.menu summary::-webkit-details-marker{display:none}
.menu-panel{position:absolute;right:0;top:calc(100% + 12px);display:grid;gap:2px;min-width:240px;background:var(--h-card);border:3px solid var(--h-ink);border-radius:24px;padding:14px;box-shadow:var(--h-shadow)}
.menu-panel a{text-decoration:none;padding:9px 10px;font-weight:500;border-radius:12px}
.menu-panel a:hover{text-decoration:underline;text-decoration-color:var(--h-coral);text-decoration-thickness:2px}
.menu-panel .h-meta{padding:10px 10px 2px}
@media (max-width:1080px){.h-nav ul .wide{display:none}}
@media (max-width:820px){.menu{display:block}.nav-cta{display:none}.h-brand{font-size:22px}}

/* section scaffolding */
.sec-head{max-width:780px;margin-bottom:clamp(28px,4vw,48px)}
.sec-head p{font-size:19px}
.lead{font-size:clamp(18px,1.6vw,21px);max-width:56ch}
.tight{padding-top:0}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stack>*+*{margin-top:18px}
.line{border:3px solid var(--h-ink)}
.rule{border:0;border-top:3px solid var(--h-own);margin:0}
.center{text-align:center}
.center p{margin-inline:auto}
@media (max-width:1000px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){.grid-2,.grid-3{grid-template-columns:1fr}}
@media (max-width:560px){.grid-4{grid-template-columns:1fr}}

/* hero */
.hero-copy .h-eyebrow{margin-bottom:18px}
.hero-sig{display:inline-block;margin:0 0 18px;font-size:15px}
.hero-art{position:relative}
.hero-art .h-sticker{position:absolute;right:4%;bottom:-14px;font-size:20px}
.hero-art .h-sticker.left{left:2%;right:auto;top:-10px;bottom:auto;transform:rotate(3deg)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.page-hero{padding:clamp(40px,6vw,80px) 0 clamp(28px,4vw,48px)}
.page-hero .h-wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,5vw,64px);align-items:center}
@media (max-width:820px){.page-hero .h-wrap{grid-template-columns:1fr}.hero-art{max-width:520px}}

/* quiz in the check band */
.quiz{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:28px 0 8px;padding:0;list-style:none}
.quiz a{display:flex;align-items:center;gap:16px;min-height:76px;padding:16px 20px;background:var(--h-card);color:var(--h-ink);border:3px solid var(--h-ink);border-radius:24px;text-decoration:none;font-weight:600;transition:transform .15s,box-shadow .15s}
.quiz a:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--h-ink)}
.quiz .h-num{font-family:var(--h-voice);font-weight:800;font-size:28px;line-height:1;min-width:28px}
.quiz small{display:block;font:400 13px/1.4 var(--h-mono);text-transform:lowercase;margin-top:4px}
.h-check h2,.h-check p{color:var(--h-paper)}
.h-check .h-reassure{color:var(--h-paper)}
.check-out{margin-top:22px;font-size:15px}
.check-out a{color:var(--h-paper);text-decoration-color:var(--h-coral);text-decoration-thickness:2px;text-underline-offset:4px}
@media (max-width:640px){.quiz{grid-template-columns:1fr}}

/* care area cards */
.care-card{display:flex;flex-direction:column;border:3px solid var(--h-ink);padding:0;overflow:hidden}
.care-card svg{display:block;width:100%;height:auto;border-bottom:3px solid var(--h-ink)}
.care-card .body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.care-card .body p{font-size:16px}
.care-card .door{margin-top:auto;padding-top:10px}

/* steps */
.h-step h3{font-size:20px}
.h-step p{font-size:16px;margin:0}

/* buybox extras */
.h-buybox h3{margin-bottom:6px}
.h-buybox .per{font:400 14px/1.4 var(--h-mono);text-transform:lowercase}
.h-buybox .h-sig{font-size:14px}
.follow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.follow .h-card{border:3px dashed var(--h-ink)}
.follow .amt{font:600 30px/1 var(--h-sans);letter-spacing:-.03em;margin:8px 0 10px}
.follow p{font-size:16px;margin:0}
@media (max-width:820px){.follow{grid-template-columns:1fr}}

/* tables */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--h-radius)}
.h-compare{min-width:620px}
.h-compare tbody th{font-weight:600}
.h-compare tr:last-child>*{border-bottom:0}
.h-compare .yes{font-weight:600}

/* proof */
.h-proof .h-card{border:3px solid var(--h-ink)}
.h-proof svg{width:56px;height:56px;margin-bottom:10px}
.h-dark .h-proof .h-card p{color:var(--h-ink)}
.notfor{margin-top:18px}
.notfor ul{margin:0;padding-left:20px}
.notfor li{margin:6px 0}

/* faq */
.faq-head{margin-bottom:24px}
.h-faq-item>div p:last-child{margin-bottom:0}

/* closing */
.h-closing .h-wrap{max-width:820px}
.h-closing svg{max-width:560px;margin:0 auto 28px}
.h-closing .lead{margin-inline:auto}

/* footer */
.h-footer h4{font:500 13px/1.2 var(--h-mono);text-transform:lowercase;letter-spacing:.02em;color:var(--h-mint);margin-bottom:14px}
.h-footer .h-brand{color:var(--h-paper);margin-bottom:12px}
.h-footer p{font-size:15px}
.h-footer .h-legal p{font-size:12px;max-width:none;margin:0 0 6px}

/* sticky */
.h-sticky span{font:400 13px/1.3 var(--h-mono);text-transform:lowercase}
.h-sticky b{font-family:var(--h-sans);font-size:18px}

/* stickers */
.sticker-row{display:flex;flex-wrap:wrap;gap:18px;margin-top:22px}

/* own colour panel (care panels, self-check) */
.panel-own{background:var(--h-own);color:var(--h-paper);border-radius:var(--h-radius-lg);padding:clamp(26px,4vw,52px);border:3px solid var(--h-ink)}
.panel-own .h-eyebrow{color:var(--h-mint)}
.panel-own h2,.panel-own h3,.panel-own p{color:var(--h-paper)}
.panel-own .h-reassure{color:var(--h-paper)}
.panel-own .h-card,.panel-own .h-card h2,.panel-own .h-card h3,.panel-own .h-card p,.panel-own .sc-after h2,.panel-own .sc-after .h-reassure{color:var(--h-ink)}
.panel-own em{color:var(--h-coral)}

/* sleep self-check (count is a pure CSS counter, never a score) */
.selfcheck{counter-reset:sc}
.selfcheck fieldset{border:0;margin:0;padding:0;display:grid;gap:12px}
.selfcheck legend{font:500 13px/1.2 var(--h-mono);text-transform:lowercase;color:var(--h-mint);margin-bottom:14px;padding:0}
.selfcheck label{display:flex;gap:14px;align-items:flex-start;background:var(--h-card);color:var(--h-ink);border:3px solid var(--h-ink);border-radius:20px;padding:14px 18px;cursor:pointer;font-weight:500}
.selfcheck input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--h-mint);flex:none}
.selfcheck input:checked{counter-increment:sc}
.selfcheck label:has(input:checked){border-color:var(--h-mint);box-shadow:4px 4px 0 var(--h-ink)}
.sc-count{margin:26px 0 8px;font:500 15px/1.5 var(--h-mono);text-transform:lowercase}
.sc-n{font-size:28px}
.sc-n::before{content:counter(sc)}
.sc-after{background:var(--h-card);color:var(--h-ink);border-radius:var(--h-radius);padding:clamp(20px,3vw,32px);margin-top:18px}
.sc-after p{color:var(--h-ink)}

/* care and learn article layout */
.article{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(28px,5vw,64px);align-items:start}
.prose{max-width:760px}
.prose h2{font-size:clamp(26px,3vw,36px);margin-top:1.6em}
.prose h2:first-of-type{margin-top:.6em}
.prose ul,.prose ol{padding-left:22px;max-width:62ch}
.prose li{margin:6px 0}
.byline{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 22px}
.aside{position:sticky;top:96px;display:grid;gap:18px}
.aside .h-card{border:3px solid var(--h-ink)}
.aside .h-btn{width:100%;justify-content:center}
.urgent{background:var(--h-card);border:3px solid var(--h-ink);border-radius:var(--h-radius-sm);padding:18px 22px;margin:24px 0}
.urgent p{margin:0}
.refs{font-size:15px;padding-left:20px}
.refs li{margin:8px 0}
.disclaimer{font:500 14px/1.5 var(--h-mono);text-transform:lowercase;margin-top:28px}
@media (max-width:960px){.article{grid-template-columns:1fr}.aside{position:static}}

/* before you book */
.h-before h2,.h-before h3{margin-bottom:14px}
.h-before dl{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 28px;margin:0}
.h-before dt{font-weight:600}
.h-before dd{margin:2px 0 0;font-size:16px}
@media (max-width:720px){.h-before dl{grid-template-columns:1fr}}

/* doctor card */
.doc-card{display:grid;grid-template-columns:140px 1fr;gap:24px;align-items:center;border:3px solid var(--h-ink)}
.doc-card svg{width:140px;height:140px}
@media (max-width:560px){.doc-card{grid-template-columns:1fr}}

/* learn hub */
.post{display:flex;flex-direction:column;border:3px solid var(--h-ink);text-decoration:none}
.post h3{margin-top:6px}
.post:hover h3{text-decoration:underline;text-decoration-color:var(--h-coral);text-decoration-thickness:2px;text-underline-offset:4px}

/* timeline on how it works */
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.timeline li{display:grid;grid-template-columns:80px 1fr;gap:22px;align-items:start}
.timeline svg{width:72px;height:72px}
@media (max-width:560px){.timeline li{grid-template-columns:1fr}}