/* The rulebook hero keeps the approved device, copy and proof as siblings. */
.hero{position:relative;overflow-x:clip;max-width:100%;padding:72px 0 28px;background:linear-gradient(180deg,var(--bg-top),var(--bg-bottom))}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,rgb(var(--bg-top-rgb) / 0) 28%,rgb(var(--accent-rgb) / .05) 70%,rgb(var(--accent-rgb) / .025))}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,52fr) minmax(0,48fr);column-gap:72px;align-items:center}
.copy{position:relative;z-index:3;min-width:0}
.eyebrow{display:inline-flex;align-items:center;gap:10px;min-height:34px;padding:0 16px 0 12px;border-radius:var(--r-pill);background:var(--panel);box-shadow:0 0 0 1px var(--border),0 8px 18px -12px rgb(var(--text-rgb) / .25);font-size:14px;font-weight:600}
.eyebrow-dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgb(var(--success-rgb) / .16)}
.hero-title{margin:24px 0 0;font-size:66px;font-weight:800;line-height:1.1;letter-spacing:-.03em;isolation:isolate}
.h1-line{display:block}.h1-key{position:relative;z-index:0}
.h1-key::after{content:"";position:absolute;z-index:-1;left:-.04em;right:-.02em;bottom:.07em;height:.34em;border-radius:var(--r-xs);background:rgb(var(--accent-rgb) / .35)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.lead{margin:32px 0 0;max-width:30em;font-size:19px;line-height:1.65;color:var(--text-muted)}
.lead strong{color:var(--text)}
.trust{list-style:none;margin:24px 0 0;padding:20px 0 0;border-top:1px solid rgb(var(--text-rgb) / .09);display:grid;grid-template-columns:repeat(3,max-content);gap:10px 28px;font-size:14px;color:var(--text-muted)}
.trust li{display:flex;align-items:center;gap:9px}
.trust li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--text-muted);opacity:.55}
.device{position:relative;order:-1;height:526px;margin:0;isolation:isolate;min-width:0}
.device-geo{position:absolute;left:-56px;bottom:-40px;width:200px;height:170px;z-index:0}.geo-coral{fill:var(--coral)}.geo-apricot{fill:var(--apricot)}
.device-board{position:absolute;left:0;top:0;bottom:0;width:78%;z-index:1;border-radius:var(--r-2xl);background:linear-gradient(155deg,var(--text-2),var(--text) 58%);box-shadow:var(--shadow-board),inset 0 1px rgb(var(--white-rgb) / .08)}
.window{--rule-cols:36px 128px minmax(0,1fr) 184px;position:absolute;left:40px;top:40px;right:0;bottom:40px;z-index:2;display:flex;flex-direction:column;overflow:hidden;background:var(--panel);border-radius:22px;border:1px solid rgb(var(--white-rgb) / .75);box-shadow:var(--shadow-window),inset 0 1px rgb(var(--white-rgb))}
.win-chrome{flex:none;height:52px;display:flex;align-items:center;gap:12px;padding:0 12px 0 16px;background:linear-gradient(180deg,var(--chrome-top),var(--chrome-bottom));border-bottom:1px solid var(--border)}
.win-brand{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:800;letter-spacing:-.01em}.win-logo{width:22px;height:22px}
.win-tabs{display:flex;gap:2px;padding:3px;margin-left:6px;border-radius:var(--r-pill);background:rgb(var(--text-rgb) / .05)}
.win-tab{padding:5px 12px;border-radius:var(--r-pill);font-size:12.5px;font-weight:500;line-height:1.4;color:var(--text-muted);white-space:nowrap}
.win-tab.is-current{background:var(--panel);color:var(--text);font-weight:700;box-shadow:0 0 0 1px rgb(var(--text-rgb) / .06),0 2px 4px rgb(var(--text-rgb) / .08)}
.win-switch{margin-left:auto;display:flex;align-items:center;gap:8px;padding:4px 4px 4px 12px;border-radius:var(--r-pill);background:rgb(var(--success-rgb) / .10);color:var(--success);font-size:12.5px;font-weight:700;white-space:nowrap}
.switch-track{position:relative;width:34px;height:20px;border-radius:var(--r-pill);background:var(--success);box-shadow:inset 0 1px 2px rgb(var(--text-rgb) / .2)}
.switch-knob{position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;background:var(--panel);box-shadow:0 1px 3px rgb(var(--text-rgb) / .3)}
.win-body{flex:1;padding:14px 16px;min-height:0}
.rules-head{display:grid;grid-template-columns:var(--rule-cols);column-gap:12px;align-items:center;height:18px;margin-bottom:8px;padding:0 12px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--text-muted)}
.rh-target{grid-column:1/3}.rh-mid{grid-column:3}.rh-route{grid-column:4;padding-left:10px}
.rules{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rule{display:grid;grid-template-columns:var(--rule-cols);column-gap:12px;align-items:center;height:52px;padding:0 12px;border-radius:var(--r-md);background:var(--row);box-shadow:inset 0 0 0 1px rgb(var(--text-rgb) / .05)}
.rule-ic{width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center}
.rule-ic svg{width:20px;height:20px}.lic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.t-teal{background:var(--ic-teal-bg);color:var(--ic-teal)}.t-coral{background:var(--ic-coral-bg);color:var(--ic-coral)}.t-moss{background:var(--ic-moss-bg);color:var(--ic-moss)}.t-navy{background:var(--ic-navy-bg);color:var(--ic-navy)}.t-apricot{background:var(--ic-apricot-bg);color:var(--ic-apricot)}.t-marigold{background:var(--ic-marigold-bg);color:var(--ic-marigold)}
.rule-name{display:flex;flex-direction:column;min-width:0;line-height:1.2}.rule-name b{font-size:14.5px;white-space:nowrap}.rule-name small{margin-top:3px;font-size:11.5px;color:var(--text-muted);white-space:nowrap}
.rule-arrow{display:flex;align-items:center;height:12px;color:var(--border-strong)}.rule-arrow::before{content:"";flex:1;border-top:1.5px dashed currentColor}.rule-arrow svg{width:8px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6}
.route{display:flex;align-items:center;gap:8px;height:34px;padding:0 10px 0 8px;border-radius:var(--r-pill);background:var(--panel);box-shadow:0 0 0 1px var(--border),var(--shadow-soft);font-size:12.5px;font-weight:700;white-space:nowrap}
.route .flag{width:21px;height:14px}.route-type{font-weight:500;color:var(--text-muted)}.route-caret{margin-left:auto;width:10px;height:10px;fill:none;stroke:var(--text-muted);stroke-width:1.8}
.rule-focus{position:absolute;left:-3px;right:-3px;top:-3px;height:58px;display:grid;grid-template-columns:var(--rule-cols);column-gap:12px;align-items:center;padding:0 13px;border:2px solid var(--accent);border-radius:17px;pointer-events:none;box-shadow:0 0 0 4px rgb(var(--accent-rgb) / .16),0 12px 28px -8px rgb(var(--accent-rgb) / .5);animation:focusMove 7s ease-in-out infinite}
.pulse-lane{grid-column:3;position:relative;height:8px}.pulse-run{position:absolute;inset:0;animation:pulseRun 7s linear infinite}
.pulse-dot{position:absolute;left:0;top:0;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgb(var(--accent-rgb) / .25),0 0 12px rgb(var(--accent-rgb) / .85)}
@keyframes focusMove{0%,26%{transform:translateY(0)}33.33%,59%{transform:translateY(60px)}66.66%,92%{transform:translateY(120px)}100%{transform:translateY(0)}}
@keyframes pulseRun{0%,33.33%,66.66%,100%{transform:translateX(0);opacity:0}3%,36.33%,69.66%{transform:translateX(8%);opacity:1}21%,54.33%,87.66%{transform:translateX(calc(100% - 18px));opacity:1}25%,58.33%,91.66%{transform:translateX(calc(100% - 18px));opacity:0}}
.win-foot{flex:none;min-height:48px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 16px;background:var(--row);border-top:1px solid var(--border)}
.fact-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);background:var(--panel);box-shadow:0 0 0 1px var(--border);font-family:var(--font-mono);font-size:12px;line-height:1.5;white-space:nowrap;max-width:100%;overflow:hidden}
.fact-chip svg{width:12px;height:12px;fill:none;stroke:var(--success);stroke-width:2}
.float-devices{position:absolute;left:-28px;top:-40px;z-index:4;width:220px;padding:12px 16px 12px 12px;border-radius:var(--r-lg);background:var(--panel);box-shadow:0 0 0 1px rgb(var(--text-rgb) / .05),var(--shadow-float),inset 0 1px rgb(var(--white-rgb))}
.fd-head{display:flex;align-items:center;gap:10px}.fd-ic{width:30px;height:30px;flex:none;border-radius:var(--r-xs);display:grid;place-items:center}.fd-ic svg{width:18px;height:18px}
.fd-text{display:flex;align-items:baseline;gap:6px;line-height:1.2}.fd-text b{font-size:14.5px}.fd-text span{font-size:12.5px;color:var(--text-muted)}
.fd-platforms{display:flex;align-items:center;gap:12px;margin-top:9px;padding-left:40px;color:var(--text-muted)}.pf-mini{width:15px;height:15px;flex:none}
.float-refund{position:absolute;right:-24px;bottom:-8px;z-index:4;width:236px;padding:15px 18px;border-radius:var(--r-xl);background:linear-gradient(160deg,var(--apricot-soft),var(--apricot));box-shadow:inset 0 0 0 1px var(--apricot-edge),inset 0 1px rgb(var(--white-rgb) / .8),var(--shadow-float)}
.fr-title{display:block;font-size:15px;font-weight:800;line-height:1.3}.fr-sub{display:block;margin-top:5px;font-size:12.5px;color:var(--text-muted)}.fr-sub em{font-style:normal;font-family:var(--font-mono);font-size:11px;margin-right:6px}
.refund-badge{position:absolute;top:-18px;right:-14px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--panel);box-shadow:0 0 0 4px rgb(var(--white-rgb) / .6),0 10px 22px -8px rgb(var(--text-rgb) / .35)}
.refund-badge svg{width:26px;height:26px}.shield{fill:var(--text)}.shield-tick{fill:none;stroke:var(--panel);stroke-width:2;stroke-linecap:round}
.fw{fill:var(--flag-white)}.fr{fill:var(--flag-red)}.fb{fill:var(--flag-blue)}.fg{fill:var(--flag-green)}.flag-edge{fill:none;stroke:rgb(var(--text-rgb) / .16);stroke-width:1}
.proof{position:relative;z-index:1;margin-top:48px;padding-top:22px;border-top:1px solid rgb(var(--text-rgb) / .08);display:grid;grid-template-columns:120px minmax(0,1fr);row-gap:16px;align-items:center}
.proof-label{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;color:var(--text-muted)}
.proof-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 28px}
.proof-item{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;line-height:24px;color:var(--text-muted);white-space:nowrap}.pf{width:22px;height:22px}.proof-item .flag{width:24px;height:16px}
.peek{background:var(--bg);padding-top:26px;padding-bottom:40px}.peek-kicker,.section-kicker{margin:0;font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;color:var(--text-muted)}
/* Shared content components */
.tabs{display:flex;flex-wrap:wrap;gap:6px;padding:5px;width:max-content;max-width:100%;border-radius:var(--r-pill);background:var(--panel-2)}
.tabs [role="tab"]{min-height:40px;padding:7px 18px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--text-muted);font-weight:700}
.tabs [role="tab"][aria-selected="true"]{background:var(--panel);color:var(--text);box-shadow:var(--shadow-soft),inset 0 0 0 2px var(--accent)}
[role="tabpanel"][hidden]{display:none}
.toc-tabs{position:sticky;top:var(--header-height);z-index:12;display:flex;gap:8px;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;padding:10px;background:var(--panel);border-radius:var(--r-lg);box-shadow:var(--shadow-soft)}
.toc-tabs a{display:inline-flex;align-items:center;flex:none;min-height:36px;padding:4px 14px;border-radius:var(--r-pill);text-decoration:none;white-space:nowrap}
.toc-tabs a:hover,.toc-tabs a.is-reading{background:var(--text);color:var(--panel)}
.faq-item{background:var(--panel);border-radius:var(--r-lg);margin-bottom:10px;box-shadow:var(--shadow-soft)}
.faq-item summary{position:relative;min-height:56px;padding:16px 48px 16px 20px;cursor:pointer;font-weight:700;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}.faq-item summary::after{content:"+";position:absolute;right:20px;top:14px;font-size:22px;color:var(--accent-dark)}
.faq-item[open] summary::after{content:"−"}.faq-item>div{padding:0 20px 18px;color:var(--text-muted)}
.price-grid,.platform-grid,.article-grid,.fact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.price-card,.platform-card,.article-card,.fact-card{min-width:0;position:relative;padding:28px;border-radius:var(--r-xl);background:var(--panel);box-shadow:var(--shadow-window),inset 0 1px rgb(var(--white-rgb) / .8)}
.price-card.is-featured,.feature-card.is-current{box-shadow:inset 0 0 0 2px var(--accent),var(--shadow-float)}
.price-card h3,.platform-card h3,.article-card h3{margin:0 0 10px}.price-value{font-size:38px;font-weight:800;line-height:1.2;letter-spacing:-.03em}
.price-card ul{padding-left:20px;color:var(--text-muted)}.price-card .btn{margin-top:12px}
.badge{display:inline-flex;align-items:center;min-height:28px;padding:4px 11px;border-radius:var(--r-pill);background:var(--ic-marigold-bg);color:var(--text);font-size:12px;font-weight:700;max-width:100%;overflow:hidden}
.price-card>.badge{margin-bottom:12px}
.table-scroll{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-lg);background:var(--panel)}
.table-scroll table{min-width:650px;width:100%}
.table-scroll th,.table-scroll td,.data-table th,.data-table td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--border);color:var(--text)}
.table-scroll th,.data-table th{background:var(--chrome-top);font-weight:700}
.table-scroll .region-row th{background:var(--panel-2)}
.prose>.data-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0}
.prose>.data-table th,.prose>.data-table td{min-width:115px}
.platform-card svg{width:32px;height:32px;color:var(--ic-navy)}.platform-card .btn{margin-top:16px}
.article-card{text-decoration:none;display:block}.article-card:hover{transform:translateY(-2px)}
.article-meta{font-family:var(--font-mono);font-size:12px;color:var(--text-muted)}
.article-card p{color:var(--text-muted)}
.callout{padding:20px 24px;border-left:4px solid var(--accent);border-radius:0 var(--r-lg) var(--r-lg) 0;background:var(--apricot-soft)}
.promo-block{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:32px;border-radius:var(--r-xl);background:var(--text);color:var(--panel)}
.promo-block h2{margin:0 0 8px;color:var(--panel);font-size:28px}.promo-block p{margin:0;color:var(--apricot)}
.promo-block .btn,.btn-secondary{flex-shrink:0;white-space:nowrap}
.feature-browser{display:grid;grid-template-columns:minmax(240px,1fr) minmax(0,1.5fr);gap:24px}
.feature-list{display:grid;gap:10px}.feature-card{display:flex;align-items:center;gap:14px;min-height:70px;padding:12px;border:0;border-radius:var(--r-lg);background:var(--panel);text-align:left;font-weight:700;box-shadow:var(--shadow-soft)}
.feature-card .rule-ic{flex:none}.feature-canvas{position:relative;display:grid;align-items:center;padding:32px;min-height:430px;border-radius:var(--r-xl);overflow:hidden;background:linear-gradient(138deg,var(--text) 0 44%,var(--apricot) 44% 66%,var(--coral) 66%)}
.feature-detail{position:relative;max-width:460px;padding:30px;border-radius:var(--r-xl);background:var(--panel);box-shadow:var(--shadow-float)}
.feature-detail p{color:var(--text-muted)}
/* Preview-only furniture: every class is defined here, not by a future home stylesheet. */
.preview-section{padding-top:76px;padding-bottom:76px}
.preview-section>h2{margin-top:0}.preview-intro{max-width:65ch;color:var(--text-muted)}
.swatch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px}
.swatch{min-width:0;padding:10px;border-radius:var(--r-md);background:var(--panel);box-shadow:var(--shadow-soft)}
.swatch-tone{height:64px;border-radius:var(--r-sm);border:1px solid var(--border)}
.swatch b{display:block;margin-top:9px;font-family:var(--font-mono);font-size:12px;overflow-wrap:anywhere}
.swatch-bg{background:var(--bg)}.swatch-panel{background:var(--panel)}.swatch-panel2{background:var(--panel-2)}.swatch-border{background:var(--border)}.swatch-accent{background:var(--accent)}.swatch-accentdark{background:var(--accent-dark)}.swatch-text{background:var(--text)}.swatch-muted{background:var(--text-muted)}.swatch-success{background:var(--success)}.swatch-warn{background:var(--warn)}.swatch-error{background:var(--error)}.swatch-coral{background:var(--coral)}.swatch-apricot{background:var(--apricot)}
.preview-stack{display:grid;gap:16px;max-width:760px}.preview-stack h2,.preview-stack h3,.preview-stack p{margin:0}
.preview-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-block:22px}
.preview-subhead{margin:0 0 20px;font-size:24px}
.preview-footer{margin-top:50px}
@media(max-width:1180px){.hero-grid{column-gap:48px}.hero-title{font-size:58px}.window{--rule-cols:34px 112px minmax(0,1fr) 172px}}
@media(max-width:1080px){.hero-grid{grid-template-columns:minmax(0,1fr);row-gap:72px}.device{order:0;width:100%;max-width:640px;margin-inline:auto}.copy{max-width:640px}.window{--rule-cols:36px 128px minmax(0,1fr) 184px}}
@media(max-width:768px){.hero{padding:32px 0 24px}.hero-grid{row-gap:40px}.hero-title{font-size:40px;margin-top:20px}.cta-row{margin-top:24px;gap:10px}.lead{margin-top:24px;font-size:17px}.trust{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}.proof{grid-template-columns:1fr;row-gap:8px;margin-top:30px}.proof-list{justify-content:flex-start;gap:8px 18px}.device{height:500px}.device-geo{display:none}.float-devices,.float-refund{position:relative;left:auto;right:auto;top:auto;bottom:auto;display:inline-block;width:auto;margin:12px 8px 0 0;vertical-align:top}.float-devices{margin-top:510px}.refund-badge{width:36px;height:36px;top:-10px;right:-8px}.refund-badge svg{width:21px;height:21px}.device:has(.float-devices){height:605px}.feature-browser{grid-template-columns:1fr}.feature-list{display:flex;overflow-x:auto;padding:5px}.feature-card{flex:0 0 190px}.feature-canvas{min-height:0;padding:12px 0 0;background:linear-gradient(90deg,var(--text),var(--apricot),var(--coral))}.feature-detail{max-width:none;width:100%;margin-top:10px}.price-grid,.platform-grid,.article-grid,.fact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.hero-title{font-size:clamp(28px,9vw,40px)}.trust{font-size:12px}.device{height:390px;overflow:visible}.device:has(.float-devices){height:570px}.device-board{width:85%}.window{--rule-cols:30px minmax(0,1fr) 10px minmax(124px,1fr);left:12px;right:0;top:28px;bottom:auto;height:390px}.win-chrome{height:auto;min-height:52px;flex-wrap:wrap;padding-block:7px}.win-brand{font-size:11px}.win-tabs{margin-left:0}.win-tab{display:none}.win-tab.is-current{display:block;padding-inline:8px}.win-switch{font-size:10px;padding-left:7px}.win-body{padding:10px}.rules-head{font-size:10px}.rule{column-gap:6px;padding-inline:7px;height:49px}.rules{gap:7px}.rule:nth-child(n+4){display:none}.rule-ic{width:30px;height:30px}.rule-name b{font-size:11px}.rule-name small{display:none}.rule-arrow{min-width:0}.route{gap:4px;padding-inline:5px;font-size:10px}.route-type{display:none}.rule-focus{height:55px;animation:none}.pulse-run{animation:none;opacity:0}.win-foot{padding:7px;gap:5px}.fact-chip{font-size:9px;padding:3px 6px}.float-devices{margin-top:438px}.fd-platforms{gap:7px}.proof-item{font-size:12px;gap:5px}.proof-item .flag{width:22px;height:15px}.proof-list{gap:7px 13px}.price-grid,.platform-grid,.article-grid,.fact-grid{grid-template-columns:minmax(0,1fr)}.promo-block{display:block}.promo-block .btn{margin-top:20px}}
@media(prefers-reduced-motion:reduce){.rule-focus,.pulse-run{animation:none!important}.article-card{transition:none}}