/* Shared requirements: every mode and entry point uses the same three cards. */
.requirements-page #main-content>.requirements-hero{padding:28px 0 36px}
.requirements-page #main-content .requirements-hero .breadcrumb{margin:0 0 20px}
.requirements-page #main-content .requirements-hero .requirements-intro{padding:0}
.requirements-page #main-content .requirements-hero .requirements-intro-row{grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:40px}
.requirements-page #main-content .requirements-hero .requirements-laptop{max-width:420px}
@media(max-width:900px){.requirements-page #main-content .requirements-hero .requirements-intro-row{grid-template-columns:1fr;gap:24px}.requirements-page #main-content .requirements-hero .requirements-laptop{max-width:340px}}
@media(max-width:760px){.requirements-page #main-content>.requirements-hero{padding:24px 0 30px}.requirements-page #main-content .requirements-hero .requirements-laptop{max-width:300px}}
html:has([data-req-page]){scroll-padding-top:var(--req-scroll-offset,174px)}
.req-computer{container-type:inline-size}
.req-engine-note{font-size:15px;line-height:1.65;max-width:950px;margin:0 0 22px}
.req-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.1fr) minmax(0,1fr);gap:18px;align-items:stretch}
.req-grid>.req-card{min-width:0;align-self:stretch;height:auto;margin:0;padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--req-card-surface,var(--surface));box-shadow:var(--shadow)}
.req-card .eyebrow{font-size:11px;line-height:1.5;margin:0 0 10px}
.req-card h3{font-size:23px;line-height:1.25;margin:0 0 16px}
.req-card p{font-size:15px;line-height:1.65;margin:0 0 18px}
.req-card p:last-child{margin-bottom:0}
.req-card .requirement-spec{font-size:18px;font-weight:600;color:var(--ink);line-height:1.4}
.req-card .requirement-note{font-size:14px;padding-top:16px;border-top:1px solid var(--line)}
.req-choice-list{display:grid;gap:7px}
.req-choice-list [role=tab]{display:flex;justify-content:space-between;align-items:baseline;gap:12px;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);font:inherit;font-size:14px;line-height:1.4;text-align:left;cursor:pointer}
.req-choice-list [role=tab]:hover{border-color:var(--control-line)}
.req-choice-list [role=tab][aria-selected=true]{border-color:var(--accent);background:var(--accent-soft);font-weight:600}
.req-choice-list [role=tab]:focus-visible,.req-mode-tabs [role=tab]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.req-choice-value{flex:none;color:var(--muted);font-variant-numeric:tabular-nums}
.req-choice-list [aria-selected=true] .req-choice-value{color:var(--accent)}
/* All options share a grid cell so selecting another rate cannot change card height. */
.req-ready .req-detail-card{display:grid}
.req-ready .req-detail{grid-area:1/1;align-self:start}
.req-ready .req-detail.is-inactive{visibility:hidden}
.req-mode-tabs{display:flex;gap:4px;width:fit-content;padding:4px;border:1px solid var(--control-line);border-radius:12px;background:var(--subtle);margin:0 0 22px}
.req-mode-tabs [role=tab]{padding:9px 24px;min-height:44px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);font-size:15px;font-weight:600;line-height:1.3}
.req-mode-tabs [aria-selected=true]{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:0 2px 5px #0001}
[data-req-switch].req-ready>[data-req-panel].req-mode-inactive{display:none}
.req-page-bar{position:sticky;top:var(--req-header-height,80px);z-index:14;background:var(--canvas);border-block:1px solid var(--line)}
.req-page-bar>.container{display:flex;align-items:center;gap:26px;min-height:64px}
.req-page-title{flex:none;font-size:14px;font-weight:600;text-decoration:none}
.req-mode-control{display:flex;align-items:center;gap:7px;flex:none;font-size:13px;color:var(--muted)}
.req-mode-control .is-selected{color:var(--ink);font-weight:600}
.req-mode-control [role=switch]{position:relative;width:36px;height:44px;padding:0;border:0;background:transparent;flex:none;border-radius:8px}
.req-mode-control [role=switch]::before{content:'';position:absolute;left:0;top:12px;width:36px;height:20px;border:1px solid var(--control-line);border-radius:20px;background:var(--subtle)}
.req-mode-control [role=switch]>span{position:absolute;top:15px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--ink);transition:transform var(--speed)}
.req-mode-control [aria-checked=true]::before{border-color:var(--accent);background:var(--accent-soft)}
.req-mode-control [aria-checked=true]>span{transform:translateX(16px);background:var(--accent)}
.req-section-scroll{display:flex;align-items:center;flex:1;min-width:0}
.req-section-links{display:flex;gap:24px;align-items:center;justify-content:flex-start;min-width:0;flex:1;overflow-x:auto;scrollbar-width:none}
.req-section-links::-webkit-scrollbar{display:none}
.req-section-links a{position:relative;display:flex;align-items:center;flex:none;min-height:54px;font-size:13px;line-height:1.4;text-decoration:none;color:var(--muted);white-space:nowrap}
.req-section-links a[aria-current]{color:var(--ink);font-weight:600}
.req-section-links a[aria-current]::after{content:'';position:absolute;left:0;right:0;bottom:8px;height:2px;background:var(--accent);border-radius:2px}
.req-section-links .req-nav-inactive{display:none}
.req-nav-arrow{display:none;align-items:center;justify-content:center;flex:0 0 32px;width:32px;height:32px;border:0;border-radius:50%;padding:0;color:var(--ink);background:var(--subtle)}
.req-nav-arrow svg{width:15px;height:15px;display:block}
.req-nav-arrow:disabled{opacity:.35;cursor:default}
.req-section-scroll.is-scrollable .req-section-links{justify-content:flex-start}
.req-section-scroll.is-scrollable .req-nav-arrow{display:flex}
/* The mode wrappers are structural: alternate the visible sections, not the wrappers. */
.requirements-page #main-content [data-req-panel]>.requirements-band{padding:42px 0;margin:0;background:var(--canvas);--req-card-surface:var(--surface)}
.requirements-page #main-content [data-req-panel]>.requirements-band:nth-child(odd){background:var(--section-alt)}
:root[data-theme=dark] .requirements-page #main-content [data-req-panel]>.requirements-band:nth-child(odd){--req-card-surface:var(--canvas)}
.requirements-page #main-content[data-req-page]>.requirements-next{background:var(--canvas)}
/* A warmer/darker outer disclosure separates the inset cards from their container. */
:is(.offline-needs-grid,.live-needs-grid)~.card-details:has(.req-computer),.start-section details.start-disclosure:has(.req-computer){background:var(--detail-surface)}
:root[data-theme=dark] :is(.card-details,.start-disclosure) .req-grid{--req-card-surface:var(--subtle)}
.req-live-setup{grid-template-columns:repeat(3,minmax(0,1fr))}
.start-disclosure [data-req-switch]{margin-top:20px}
.start-disclosure .req-computer .req-engine-note{margin:0 0 22px}
.start-disclosure .req-card p{margin:0 0 18px}
.start-disclosure .req-card p:last-child{margin-bottom:0}
@container(max-width:850px){.req-grid{grid-template-columns:1fr}.req-ready .req-detail-card{display:block}.req-ready .req-detail.is-inactive{display:none}}
@media(max-width:1100px){.req-page-title{display:none}.req-page-bar>.container{gap:20px}}
@media(max-width:760px){.req-page-bar>.container{gap:14px;min-height:54px}.req-grid>.req-card{padding:22px}.req-live-setup{grid-template-columns:1fr}.requirements-page #main-content [data-req-panel]>.requirements-band{padding:30px 0}}
@media(prefers-reduced-motion:reduce){.req-mode-control [role=switch]>span{transition:none}}
@media(scripting:none){.req-mode-tabs,.req-mode-control,.req-choice-card{display:none}.req-grid{grid-template-columns:1fr 2fr}.req-detail+.req-detail{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}}
@media(scripting:none) and (max-width:850px){.req-grid{grid-template-columns:1fr}}