/* Design preview — one shared token set (typography, spacing, radii, buttons). */
:root{--page:#fffdf9;--soft:#f4efe7;--ink:#191714;--sub:#6f685f;--line:#ded5c9;--brand:#744330;--action:#744330;--action-ink:#fffdf9;--bar:#744330;--bar-ink:#fffdf9;
--r-card:8px;--r-btn:6px;--max:1080px;--measure:720px;--gut:max(16px,env(safe-area-inset-left,0px));color-scheme:light}
@media(prefers-color-scheme:dark){:root{--page:#1c1a18;--soft:#29231f;--ink:#f1ede7;--sub:#c4bab0;--line:#494039;--brand:#edb69b;--action:#edb69b;--action-ink:#291b15;--bar:#edb69b;--bar-ink:#291b15;color-scheme:dark}}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);font:400 15px/1.6 "DM Sans",Arial,Helvetica,sans-serif;overflow-wrap:anywhere}
img{display:block;max-width:100%;height:auto}
a{color:var(--brand);text-underline-offset:3px}
a:hover{color:var(--ink)}
:is(a,button,summary):focus-visible{outline:2px solid var(--brand);outline-offset:3px}
p{margin:0 0 16px;color:var(--sub)}
ul,ol{color:var(--sub)}
strong{color:var(--ink);font-weight:500}
h1,h2,h3{margin:0 0 12px;color:var(--ink);font-family:"DM Serif Display",Georgia,serif;font-weight:400;letter-spacing:-.01em}
h1{font-size:44px;line-height:1.1;letter-spacing:-1px}
h2{font-size:29px;line-height:1.2}
h3{font-size:22px;line-height:1.25}
.pv{background:var(--bar);color:var(--bar-ink);font:500 12px/1.4 "DM Sans",Arial,sans-serif;padding:8px var(--gut);text-align:center}
.site-header{position:sticky;top:0;z-index:30;background:var(--page);border-bottom:1px solid var(--line)}
.header-inner,.page,.home-main,.site-footer-inner{width:min(var(--max),calc(100% - 2*var(--gut)));margin-inline:auto}
.header-inner{min-height:72px;display:flex;align-items:center;gap:26px;flex-wrap:wrap;justify-content:space-between}
.wordmark{font:400 25px "DM Serif Display",Georgia,serif;letter-spacing:.16em;color:var(--ink);text-decoration:none}
.site-nav{display:flex;align-items:center;gap:20px;font-size:13px}
.site-nav a{color:var(--ink);text-decoration:none;padding:6px 0}
.site-nav a[aria-current]{color:var(--brand);text-decoration:underline;text-underline-offset:6px}
.site-nav .utility{border:1px solid var(--line);border-radius:var(--r-btn);padding:8px 14px}
.nav-toggle{display:none;min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:var(--r-btn);background:var(--page);color:var(--ink);font:400 14px "DM Sans",Arial,sans-serif;cursor:pointer}
.page{padding:36px 0 72px}
.breadcrumb{margin-bottom:22px;font-size:12px;color:var(--sub)}
.breadcrumb a{color:var(--sub)}
.eyebrow,.section-kicker,.tile-kicker,.point-label,.jump-title,.product-card-type,.label{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.lede,.lead{font-size:17px;max-width:620px}
.button,.merchant-button,.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border:1px solid var(--line);border-radius:var(--r-btn);background:var(--page);color:var(--brand);font:500 14px "DM Sans",Arial,sans-serif;text-decoration:none;cursor:pointer}
.button.primary,.merchant-button.primary,.btn.primary{background:var(--action);border-color:var(--action);color:var(--action-ink)}
.button:hover,.merchant-button:hover{border-color:var(--brand);color:var(--brand)}
.button.primary:hover{color:var(--action-ink);opacity:.9}
.offer-buttons,.hero-actions{display:flex;flex-wrap:wrap;gap:10px}
.affiliate-line,.source-note,.sub,.truth-note,.image-status{font-size:12.5px;color:var(--sub)}
.affiliate-line{margin:12px 0 0}
/* cards and tiles */
.visual-grid,.index-visual-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.index-visual-grid{padding-bottom:36px}
.visual-tile{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;text-decoration:none;color:var(--ink);background:var(--page)}
.visual-tile:hover{border-color:var(--brand);color:var(--ink)}
.visual-tile-image{display:grid;grid-template-columns:1fr;background:var(--soft);aspect-ratio:3/2}
.visual-tile-image.count-2{grid-template-columns:1fr 1fr}
.visual-tile-image>div{min-width:0;display:grid;place-items:center;overflow:hidden}
.visual-tile-image.count-2>div+div{border-left:1px solid var(--page)}
.visual-tile-image img{width:100%;height:100%;object-fit:contain;padding:10px;aspect-ratio:1}
.visual-tile-copy{display:flex;flex-direction:column;flex:1;padding:20px}
.visual-tile-copy h3{margin:8px 0 8px;font-size:21px}
.visual-tile-copy p{font-size:14px}
.tile-arrow{margin-top:auto;font-size:13px;color:var(--brand)}
.visual-tile.no-image .visual-tile-copy{min-height:200px}
.index-hero{max-width:760px;padding:6px 0 34px}
.index-hero h1{margin:12px 0 16px}
.setup-boundary{max-width:760px;border-top:1px solid var(--line);margin:12px 0 0;padding-top:26px}
.setup-route-grid .visual-tile:last-child{grid-column:1/-1}
/* home */
.home-main{padding:28px 0 56px}
.home-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:32px;align-items:center;padding:28px;border:1px solid var(--line);border-radius:10px;margin-bottom:28px}
.home-hero h1{max-width:470px;font-size:48px}
.hero-copy .lede{margin-bottom:24px}
.hero-feature{margin:0;padding:20px;background:var(--soft);border-radius:var(--r-card);text-align:center}
.hero-feature img{width:100%;max-width:240px;margin:0 auto 14px}
.hero-feature small{display:block;font-size:12px;color:var(--sub);margin-bottom:4px}
.hero-feature a{font-size:15px;text-decoration:none}
.home-section{margin-bottom:28px;padding:28px;border:1px solid var(--line);border-radius:10px}
.section-heading{display:flex;gap:16px;align-items:end;justify-content:space-between;flex-wrap:wrap;margin-bottom:20px}
.section-heading h2{margin:6px 0 0}
.section-heading p{margin:0;max-width:430px;font-size:14px}
.section-heading>a{font-size:13px}
.utility-strip{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;background:var(--soft)}
.rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.row-link{display:block;padding:16px 0;border-top:1px solid var(--line);text-decoration:none}
.row-link strong{display:block;font-size:15px}
.row-link span{display:block;font-size:13px;color:var(--sub);margin-top:4px}
/* article / guides */
.article-layout{display:grid;grid-template-columns:minmax(0,var(--measure)) minmax(200px,280px);gap:clamp(32px,6vw,72px);align-items:start}
.article{min-width:0}
.article h1{margin-bottom:20px}
.article h2{margin-top:40px}
.intro{margin:0 0 26px;border-left:2px solid var(--brand);padding-left:18px;color:var(--ink);font:400 20px/1.5 "DM Serif Display",Georgia,serif}
.article table{width:100%;margin:22px 0;border-collapse:collapse;font-size:14px}
.article th,.article td{border-bottom:1px solid var(--line);padding:12px 10px;text-align:left}
.side-rail{position:sticky;top:96px}
.rail-block{border-top:1px solid var(--line);padding:16px 0 20px}
.rail-links{display:grid}
.rail-links a,.jump-nav a{display:block;border-bottom:1px solid var(--line);padding:10px 0;font-size:14px;text-decoration:none;color:var(--ink)}
.jump-nav a{color:var(--sub)}
.endnote{max-width:var(--measure);margin:34px 0 0;border-top:1px solid var(--line);padding-top:14px;font-size:12.5px;color:var(--sub)}
.card{border:1px solid var(--line);border-radius:var(--r-card);padding:22px;margin:22px 0}
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:13px;color:var(--ink);margin-bottom:4px}
.form-group :is(input,select,textarea){width:100%;min-height:44px;padding:10px;border:1px solid var(--line);border-radius:var(--r-btn);background:var(--page);color:var(--ink);font:inherit}
.btn-submit{min-height:44px;padding:10px 18px;border:1px solid var(--action);border-radius:var(--r-btn);background:var(--action);color:var(--action-ink);font:500 14px "DM Sans",Arial,sans-serif;cursor:pointer}
/* product overview page */
.pc-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:32px;align-items:center;padding:28px;border:1px solid var(--line);border-radius:10px}
.pc-shot{margin:0;padding:24px;background:var(--soft);border-radius:var(--r-card)}
.pc-shot img{width:100%;max-height:360px;object-fit:contain;margin:0 auto}
.pc-hero h1{margin:8px 0 14px}
.pc-offers{margin-top:20px}
.pc-offers .offer-buttons{margin-top:8px}
.jump{display:flex;flex-wrap:wrap;gap:8px 22px;margin:22px 0 0;padding:12px 0;border-block:1px solid var(--line);font-size:13px}
.jump>span{margin-right:auto;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);font-weight:500}
.jump a{color:var(--sub);text-decoration:none}
.box{padding:30px 0;border-top:1px solid var(--line)}
.box:first-of-type{border-top:0}
.box h2{margin-bottom:16px;font-size:26px}
.box .in{max-width:var(--measure)}
.pc-body{margin-top:8px}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 32px;margin:0}
.facts dt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);font-weight:500;margin:0 0 4px}
.facts dd{margin:0;color:var(--ink)}
.lines{margin:0}
.lines>div{padding:14px 0;border-top:1px solid var(--line)}
.lines>div:first-child{border-top:0;padding-top:0}
.lines dt{font-weight:500;color:var(--ink);margin-bottom:2px}
.lines dd{margin:0;color:var(--sub)}
.bullets{margin:0;padding-left:20px;max-width:var(--measure)}
.bullets li{margin-bottom:6px}
details{border-top:1px solid var(--line);padding:4px 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--ink);font-weight:500}
details p{margin:0 0 14px}
.links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.links a{display:block;padding:14px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--ink)}
.links a strong{display:block}
.links a span{display:block;font-size:13px;color:var(--sub);margin-top:4px}
.src ol{margin:0 0 14px;padding-left:22px;font-size:14px}
.src li{margin-bottom:6px}
.src li:target{background:var(--soft)}
sup.ref{font-size:11px;line-height:0;margin-left:2px}
sup.ref a{text-decoration:none;padding:0 1px}
/* comparison */
.editorial-hero{max-width:860px;padding:0 0 30px}
.editorial-hero h1{margin:10px 0 14px}
.comparison-products{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.product-grid .section-intro{grid-column:1/-1}
.product-card{min-width:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--page)}
.product-card-image{display:grid;place-items:center;background:var(--soft);height:clamp(220px,24vw,300px);overflow:hidden}
.product-card-image a{display:grid;place-items:center;width:100%;height:100%}
.product-card-image{position:relative;display:block}.product-card-image a{position:absolute;inset:0;display:block}.product-card-image img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain;padding:18px;box-sizing:border-box;aspect-ratio:auto}
.product-card-copy{padding:20px;display:flex;flex-direction:column;flex:1}
.product-card-copy h3{margin:6px 0 8px}
.product-card-copy>p{font-size:14px}
.offer-reveal{margin-top:auto}
.offer-reveal summary{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-btn);padding:10px 16px;color:var(--brand);font-size:14px;list-style:none}
.offer-reveal summary::-webkit-details-marker{display:none}
.offer-reveal[open] summary{margin-bottom:12px}
.offer-reveal,details.offer-reveal:last-of-type{border:0;padding:0}
.quick-answer{margin:34px 0;padding:28px;border-radius:10px;background:var(--soft)}
.quick-answer h2{margin:6px 0 10px}
.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;border-top:1px solid var(--line);padding-top:18px;margin-top:18px}
.comparison-table-wrap{margin:34px 0}
.table-scroll{overflow-x:auto}
.comparison-table{width:100%;border-collapse:collapse}
.comparison-table th,.comparison-table td{border:1px solid var(--line);padding:13px;text-align:left;vertical-align:top;font-size:14px}
.comparison-table thead th{background:var(--soft)}
.choose-if-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0 0 34px}
.choose-if-card{border:1px solid var(--line);border-radius:var(--r-card);padding:24px}
.choose-if-card h2{font-size:24px;margin:8px 0 10px}
.comparison-copy{max-width:860px}
.comparison-section{border-top:1px solid var(--line);padding:26px 0}
.comparison-section h2{font-size:26px;margin:6px 0 12px}
/* buying guides */
.buying-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:48px;align-items:start}
.numbered-shortlist{grid-template-columns:1fr}
.numbered-shortlist .product-card{flex-direction:row}
.numbered-shortlist .product-card-image{flex:0 0 34%;height:auto;min-height:230px}
.more-picks{margin-top:44px;border-top:1px solid var(--line);padding-top:26px}
.feature-link-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.feature-link-grid a{display:flex;flex-direction:column;min-height:130px;border:1px solid var(--line);border-radius:var(--r-card);padding:18px;text-decoration:none;color:var(--ink)}
.feature-link-grid strong{font:400 19px "DM Serif Display",Georgia,serif}
.feature-link-grid span{margin-top:auto;font-size:13px;color:var(--sub)}
.preview-note{margin:0 0 18px;font-size:12.5px;color:var(--sub)}
/* footer */
.site-footer{border-top:1px solid var(--line);background:var(--soft);padding:30px 0 40px;font-size:13px}
.site-footer-inner{display:grid;grid-template-columns:.6fr 1.4fr;gap:32px}
.footer-brand{font:400 22px "DM Serif Display",Georgia,serif;letter-spacing:.14em}
.footer-copy p{max-width:690px;font-size:13px;margin-bottom:12px}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:14px}
.footer-links a{color:var(--ink)}
.advice-note{font-size:12px;color:var(--sub)}
@media(max-width:980px){.nav-toggle{display:inline-flex;align-items:center}.header-inner{padding-block:12px}.site-nav{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0}.site-nav.open{display:flex}.site-nav a{padding:12px 0;min-height:44px;border-top:1px solid var(--line)}.site-nav .utility{border-radius:0;border:0;border-top:1px solid var(--line);padding:12px 0}
.article-layout,.buying-layout{grid-template-columns:1fr}.side-rail{position:static}
.visual-grid,.index-visual-grid,.feature-link-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){h1{font-size:38px}.home-hero{grid-template-columns:1fr;padding:22px;gap:20px}.home-hero h1{font-size:38px}.home-section{padding:22px}.pc-hero{grid-template-columns:1fr;padding:22px;gap:20px}.utility-strip,.rows,.facts,.links,.quick-grid,.choose-if-grid,.comparison-products,.product-grid,.site-footer-inner{grid-template-columns:1fr}.numbered-shortlist .product-card{flex-direction:column}.numbered-shortlist .product-card-image{flex:none;height:240px;min-height:0}}
@media(max-width:540px){h1,.home-hero h1{font-size:34px}h2{font-size:25px}.visual-grid,.index-visual-grid,.feature-link-grid{grid-template-columns:1fr}.home-section,.home-hero,.pc-hero{padding:18px}.hero-feature{padding:14px}.hero-feature img{max-width:160px}.setup-route-grid .visual-tile:last-child{grid-column:auto}.quick-answer{padding:20px}.header-inner{gap:12px}.wordmark{font-size:22px}}
@media(prefers-color-scheme:light){.product-card-image img[alt^="Whoop"],.visual-tile-image img[alt^="Whoop"],.hero-feature img[alt^="Whoop"]{mix-blend-mode:multiply}}

@media(max-width:760px){.comparison-table,.comparison-table tbody,.comparison-table tr,.comparison-table th,.comparison-table td{display:block;width:100%;box-sizing:border-box}.comparison-table thead{position:absolute;left:-9999px}.comparison-table tr{border:1px solid var(--line);border-radius:10px;margin:0 0 12px;overflow:hidden}.comparison-table tbody th{background:var(--soft);border:0;border-bottom:1px solid var(--line)}.comparison-table td{border:0;border-top:1px solid var(--line)}.comparison-table td::before{content:attr(data-label);display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent,#6b4430);margin-bottom:2px}}