/* 18BYTE v0.7.0 - directories, profiles, hubs, and accessibility refinements. */

/* ---------- Utilities ---------- */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.section-lead{display:block;margin:0 0 1.2rem}

/* ---------- Header ---------- */
.header-actions{display:flex;align-items:center;gap:clamp(.6rem,2vw,2rem)}
.search-toggle,.nav-toggle{display:grid;place-items:center;width:42px;height:42px;background:none;border:1px solid var(--line);color:var(--ivory);cursor:pointer;border-radius:2px;transition:border-color .2s ease,color .2s ease}
.search-toggle:hover,.nav-toggle:hover{border-color:var(--gold);color:var(--gold)}
.search-toggle[aria-expanded="true"]{border-color:var(--gold);color:var(--gold)}
.nav-toggle{display:none}
.nav-toggle-bars{display:grid;gap:4px;width:18px}
.nav-toggle-bars i{display:block;height:1.5px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.primary-nav .current-menu-item>a,.primary-nav a[aria-current]{color:var(--gold)}
.primary-nav li{position:relative}
.primary-nav .current-menu-item>a:after,.primary-nav a[aria-current]:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--gold)}

.search-panel{border-bottom:1px solid var(--line);background:#040d1a;padding:1.4rem 0}
.search-panel[hidden]{display:none}
.byte-search{display:grid;grid-template-columns:1fr auto;gap:.6rem;align-items:center}
.byte-search label{grid-column:1/-1;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.byte-search input{background:#020916;border:1px solid var(--line);color:var(--ivory);padding:.85rem 1rem;font-size:1rem;font-family:inherit;width:100%}
.byte-search input::placeholder{color:#6d7683}
.byte-search button{background:var(--ivory);color:var(--ink);border:0;padding:.85rem 1.6rem;font-size:.9rem;font-weight:600;cursor:pointer}
.byte-search button:hover{background:var(--gold)}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{padding:1.4rem 0 0}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0;font-size:.78rem;color:var(--muted)}
.breadcrumbs li+li:before{content:"/";margin-right:.5rem;color:#3a4655}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover{color:var(--gold)}
.breadcrumbs [aria-current]{color:#c9c2b8}

/* ---------- Directory ---------- */
.directory-hero{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:clamp(2rem,5vw,5rem);padding:clamp(2.5rem,5vw,4.5rem) 0 2.5rem;align-items:start}
.directory-hero h1{font-size:clamp(2.4rem,4.6vw,4.4rem);line-height:1.02;letter-spacing:-.05em;margin:.5rem 0 1rem;text-wrap:balance}
.directory-hero p{color:#b9b2a8;font-size:1.06rem;max-width:60ch;margin:0}
.directory-note{border-left:1px solid var(--line);padding-left:1.6rem}
.directory-note span{display:block;color:var(--cyan);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.6rem}
.directory-note p{font-size:.92rem;color:var(--muted);margin:0 0 .9rem}
.directory-note a{color:var(--gold);font-size:.86rem}

.directory-filters{border-block:1px solid var(--line);background:#040d1a;padding:1.5rem 0}
.filter-summary{display:flex;align-items:baseline;gap:1rem;margin-bottom:1.1rem}
.filter-summary strong{font-size:.86rem;color:var(--ivory);font-weight:600}
.filter-clear{color:var(--gold);font-size:.8rem;text-decoration:underline}
.filter-row{display:grid;grid-template-columns:150px 1fr;gap:1rem;align-items:baseline;padding:.5rem 0;border-top:1px solid #16202d}
.filter-row:first-of-type{border-top:0}
.filter-label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0;font-weight:500}
.filter-row ul{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0}
.filter-chip{display:inline-block;padding:.34rem .8rem;border:1px solid var(--line);font-size:.8rem;color:#c3bdb4;border-radius:2px;transition:.15s}
.filter-chip:hover{border-color:var(--gold);color:var(--gold)}
.filter-chip.is-active{background:var(--gold);border-color:var(--gold);color:#0a0803;font-weight:600}

.directory-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-block:clamp(2.5rem,5vw,4rem)}
.directory-card{background:var(--ink);padding:1.8rem;display:flex;flex-direction:column;gap:1.1rem}
.directory-card-head{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:start}
.directory-card h2{font-size:1.5rem;letter-spacing:-.02em;margin:0;line-height:1.15}
.directory-card h2 a:hover{color:var(--gold)}
.directory-provider{margin:.25rem 0 0;font-size:.8rem;color:var(--muted)}
.app-glyph{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);background:#081727;font-size:1.15rem;font-weight:600;color:var(--gold);border-radius:3px}
.directory-verdict{margin:0;color:#cfc9c0;font-size:1rem;line-height:1.5}

.status-chip{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;padding:.28rem .6rem;border:1px solid var(--line);color:var(--muted);white-space:nowrap;border-radius:2px}
.status-chip.status-initial{color:var(--cyan);border-color:#154c58}
.status-chip.status-test{color:var(--green);border-color:#155c36}
.status-chip.status-full{color:var(--gold);border-color:#6b5225}

.directory-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem 1.4rem;margin:0;padding:1.1rem 0;border-block:1px solid #16202d}
.directory-facts dt{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.25rem}
.directory-facts dd{margin:0;font-size:.88rem;color:#ded8ce;line-height:1.4}
.directory-card-foot{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;margin-top:auto}
.directory-card-foot small{color:var(--muted);font-size:.74rem}
.directory-more{margin-left:auto;color:var(--gold);font-size:.86rem;white-space:nowrap}
.outcome-chips{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;margin:0;padding:0}
.outcome-chips a{font-size:.72rem;padding:.22rem .55rem;border:1px solid #1f2b3a;color:var(--muted);border-radius:2px}
.outcome-chips a:hover{border-color:var(--cyan);color:var(--cyan)}

/* ---------- Profile ---------- */
.product-profile .product-hero{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(240px,.6fr);gap:clamp(1.4rem,3vw,3rem);padding:2rem 0 3rem;border-bottom:1px solid var(--line);align-items:start}
.product-glyph{display:grid;place-items:center;width:78px;height:78px;border:1px solid var(--line);background:#081727;font-size:2.2rem;color:var(--gold);border-radius:4px}
.product-headline h1{font-size:clamp(2.4rem,5vw,4.5rem);line-height:1;letter-spacing:-.05em;margin:.5rem 0 .9rem}
.product-verdict{font-size:clamp(1.1rem,1.8vw,1.5rem);color:#c8c2b9;margin:0 0 1.1rem;max-width:52ch;line-height:1.4}
.profile-meta{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;font-size:.82rem;color:var(--muted)}
.product-aside{display:grid;gap:1rem;border-left:1px solid var(--line);padding-left:1.6rem}
.product-aside small{display:block;color:var(--cyan);font-size:.68rem;letter-spacing:.14em;margin-bottom:.3rem}
.product-aside strong{font-weight:500;font-size:.95rem;color:#e4ded4;line-height:1.4}
.button-solid{background:var(--gold);border-color:var(--gold);color:#0a0803;font-weight:600}
.button-solid:hover{filter:brightness(1.08)}

.profile-shell{display:grid;gap:clamp(2.5rem,5vw,4rem);padding:clamp(2.5rem,5vw,4.5rem) 0}
.profile-block h2{font-size:clamp(1.5rem,2.6vw,2.3rem);letter-spacing:-.03em;margin:0 0 1.2rem;line-height:1.15}
.profile-block h3{font-size:1.05rem;margin:0 0 .8rem;color:var(--ivory)}
.block-intro{color:var(--muted);margin:-.6rem 0 1.4rem;max-width:62ch}

.fact-table{border-top:1px solid var(--line)}
.fact-row{display:grid;grid-template-columns:minmax(140px,220px) 1fr;gap:1.5rem;padding:.85rem 0;border-bottom:1px solid #16202d}
.fact-label{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.fact-value{color:#e0dad0;font-size:.95rem;line-height:1.5}
.fact-note{margin:1rem 0 0;font-size:.82rem;color:var(--muted)}
.fact-note a{color:var(--gold)}

.profile-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,4vw,3.5rem)}
.tick-list,.cross-list{list-style:none;padding:0;margin:0;display:grid;gap:.8rem}
.tick-list li,.cross-list li{position:relative;padding-left:1.6rem;color:#d3cdc4;line-height:1.5;font-size:.95rem}
.tick-list li:before{content:"+";position:absolute;left:0;color:var(--green);font-weight:600}
.cross-list li:before{content:"−";position:absolute;left:0;color:var(--red);font-weight:600}

.privacy-block{border:1px solid var(--line);background:#040d1a;padding:1.8rem}
.privacy-block p{color:#d3cdc4;margin:0 0 .9rem;max-width:75ch;line-height:1.6}
.privacy-block a{color:var(--gold);font-size:.88rem}

.profile-body .article-body,.profile-body p{color:#dfd9cf}
.profile-body{font-size:1.05rem;line-height:1.65;max-width:75ch}
.profile-body h2{margin-bottom:1rem}
.profile-body h3{margin-top:1.8rem;font-size:1.2rem}
.profile-body a{color:var(--gold);text-decoration:underline}

.outcome-links{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.outcome-links a{display:block;background:var(--ink);padding:1.3rem}
.outcome-links a:hover{background:#071524}
.outcome-links strong{display:block;font-size:1.1rem;margin-bottom:.4rem}
.outcome-links span{font-size:.82rem;color:var(--gold)}

.alt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.alt-card{display:grid;gap:.5rem;background:var(--ink);padding:1.3rem;align-content:start}
.alt-card:hover{background:#071524}
.alt-card strong{font-size:1.05rem;font-weight:600}
.alt-card small{color:var(--muted);font-size:.8rem;line-height:1.4}
.alt-card u{color:var(--cyan);font-size:.72rem;text-decoration:none;letter-spacing:.08em;text-transform:uppercase}

.method-block{border-left:2px solid var(--gold);padding-left:1.6rem}
.method-block p{color:#d3cdc4;max-width:75ch;line-height:1.6;margin:0 0 1rem}
.method-block a{color:var(--gold)}

.source-list{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.source-list.columns{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.source-list a{color:#bdd9e6;font-size:.9rem;text-decoration:underline;text-underline-offset:3px}
.source-list a:hover{color:var(--gold)}

.profile-footer{border-top:1px solid var(--line);padding-top:1.8rem;color:var(--muted);font-size:.88rem}
.profile-footer h2{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:1.4rem 0 .7rem}
.changelog{list-style:none;padding:0;margin:0;display:grid;gap:.5rem;font-size:.85rem}
.changelog li{padding-left:1rem;border-left:1px solid var(--line)}
.correction-note{margin-top:1.4rem}
.correction-note a{color:var(--gold)}

/* ---------- Archive cards ----------
   Every card image reads at the same 16:9 regardless of what an editor uploads,
   so a row of cards never goes ragged. object-fit keeps the illustration
   uncropped at the sides rather than stretching it. */
.story-grid img{
	width:100%;
	aspect-ratio:16/9;
	object-fit:cover;
	background:#040d1a;
}

/* ---------- Article additions ---------- */
.why-matters{border-left:2px solid var(--cyan);padding:.4rem 0 .4rem 1.6rem;margin:2.5rem auto 0;width:min(90vw,760px)}
.why-matters h2{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin:0 0 .5rem}
.why-matters p{margin:0;color:#d8d2c9;font-size:1.05rem;line-height:1.55}
.update-note{width:min(90vw,760px);margin:0 auto;border:1px solid #6b5225;padding:1.2rem 1.5rem;background:#100c04}
.update-note h2{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 .5rem}
.update-note p{margin:0;color:#ded8ce}
.article-sources{width:min(90vw,760px);margin:3rem auto 0;padding-top:2rem;border-top:1px solid var(--line)}
.article-sources h2{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 1rem}
.article-footer{width:min(90vw,760px);margin:2.5rem auto 0}
.byline-note{color:var(--muted);font-size:.86rem}
.byline-note a{color:var(--gold)}
.updated-flag{color:var(--cyan)}
.story-meta{display:flex;flex-wrap:wrap;gap:.9rem}
.article-header .story-meta{margin-top:1.2rem}
.lead-link{color:inherit}
.lead-link:hover{color:var(--gold)}
.panel-empty{color:var(--muted);font-size:.9rem}
.snapshot-date{color:var(--muted);font-size:.8rem}
.method-link{color:var(--gold);font-size:.8rem;margin-left:.6rem}
.signal-why{color:var(--muted);font-size:.82rem;line-height:1.45;margin:.5rem 0 0}
.app-move{color:var(--green);font-size:.68rem;text-decoration:none;letter-spacing:.08em;text-transform:uppercase;display:block;margin-top:.3rem}

.related{border-top:1px solid var(--line)}
.related-profiles{margin-bottom:2rem}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.related-grid article{background:var(--ink)}
.related-grid a{display:block;padding:1.4rem}
.related-grid a:hover{background:#071524}
.related-grid h3{font-size:1.15rem;line-height:1.25;margin:.5rem 0}
.related-grid small{color:var(--muted);font-size:.78rem}

/* ---------- Compare hub ---------- */
.compare-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:clamp(2.5rem,5vw,4rem)}
.compare-card{display:block;background:var(--ink);padding:2rem;min-height:260px}
a.compare-card:hover{background:#071524}
.compare-number{color:var(--cyan);font-size:.9rem}
.compare-card h2{font-size:1.7rem;letter-spacing:-.03em;margin:2rem 0 .6rem}
.compare-card p{color:var(--muted);margin:0;line-height:1.5}
.compare-card b{display:block;color:var(--gold);margin-top:1.5rem;font-size:.82rem;font-weight:500}
.compare-card-pending{opacity:.55}
.compare-card-pending b{color:var(--muted)}
.compare-body{margin:0 0 3rem;width:min(100%,760px)}

/* ---------- Outcome page additions ---------- */
.outcome-models .alt-grid{margin-top:1.5rem}
.guidance-body{margin:0;width:min(100%,760px)}
.guidance-body h3{font-family:Inter,sans-serif;font-size:1.25rem;margin:2rem 0 .6rem}
.comparison-scroll table th[scope="row"] a{color:var(--ivory);text-decoration:underline;text-underline-offset:3px}
.comparison-scroll table th[scope="row"] a:hover{color:var(--gold)}

/* ---------- 404 and search ---------- */
.helpful-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:2.5rem 0}
.helpful-links a{display:grid;gap:.5rem;background:var(--ink);padding:1.5rem;align-content:start}
.helpful-links a:hover{background:#071524}
.helpful-links strong{font-size:1.1rem}
.helpful-links span{color:var(--muted);font-size:.88rem;line-height:1.45}
.archive-search{max-width:560px;margin-top:1.8rem}
.error-recent ul{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.9rem}
.error-recent li{border-bottom:1px solid var(--line);padding-bottom:.9rem}
.error-recent a{font-size:1.05rem}
.error-recent a:hover{color:var(--gold)}
.error-recent small{display:block;color:var(--muted);font-size:.78rem;margin-top:.25rem}
.search-results{list-style:none;padding:0;margin:0;display:grid;gap:0;border-top:1px solid var(--line)}
.search-results li{border-bottom:1px solid var(--line);padding:1.6rem 0}
.search-results h2{font-size:1.5rem;margin:.4rem 0 .5rem;line-height:1.2}
.search-results h2 a:hover{color:var(--gold)}
.search-results p{color:var(--muted);margin:0 0 .5rem;max-width:75ch}
.search-results small{color:#6d7683;font-size:.78rem}
.archive-description{color:var(--muted);max-width:70ch;font-size:1.02rem}

/* ---------- Author ---------- */
.author-hero{max-width:820px;margin-bottom:3.5rem}
.author-links{list-style:none;padding:0;margin:1.4rem 0 0;display:flex;flex-wrap:wrap;gap:1.2rem}
.author-links a{color:var(--gold);font-size:.88rem}

/* ---------- One Conductor page ---------- */
.oc-hero{border-bottom:1px solid var(--line);background:radial-gradient(circle at 78% 40%,#0c2442 0,transparent 32%),radial-gradient(circle at 88% 55%,rgba(122,92,231,.2),transparent 26%);padding:clamp(3rem,7vw,6rem) 0 2.5rem}
.oc-hero-inner{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.oc-hero h1{font-size:clamp(2.8rem,6.5vw,6rem);line-height:.96;letter-spacing:-.06em;margin:.6rem 0 1.2rem}
.oc-sub{font-size:clamp(1.05rem,1.6vw,1.35rem);color:#c3bdb4;max-width:58ch;line-height:1.55;margin:0 0 1.4rem}
.oc-statement{color:var(--gold);font-size:1.05rem;letter-spacing:.02em;margin:0 0 1.6rem}
.oc-logo img{width:100%;max-width:520px;margin-inline:auto;filter:drop-shadow(0 16px 42px rgba(0,0,0,.42))}
.oc-status{margin:2.5rem 0 0;padding:1rem 1.3rem;border:1px solid #6b5225;background:#100c04;color:#ded8ce;font-size:.92rem;line-height:1.55}
.oc-status strong{color:var(--gold)}

.conductor-page section h2{font-size:clamp(1.9rem,4vw,3.4rem);letter-spacing:-.045em;line-height:1.08;margin:.6rem 0 1.4rem;max-width:22ch;text-wrap:balance}
.oc-lede{color:#c3bdb4;font-size:1.1rem;line-height:1.65;max-width:68ch;margin:0 0 1.1rem}
.oc-problem{border-bottom:1px solid var(--line)}
.oc-steps{background:#040d1a;border-bottom:1px solid var(--line)}
.oc-step-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.oc-step-list li{display:grid;grid-template-columns:52px 1fr;gap:1rem;background:var(--ink);padding:1.6rem}
.oc-step-list b{color:var(--cyan);font-size:1.5rem;font-weight:300}
.oc-step-list h3{font-size:1.15rem;margin:0 0 .5rem}
.oc-step-list p{color:var(--muted);margin:0;line-height:1.55;font-size:.94rem}
.oc-diff-grid,.oc-use-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.oc-diff-grid article,.oc-use-grid article{background:var(--ink);padding:1.6rem}
.oc-diff-grid h3,.oc-use-grid h3{font-size:1.15rem;margin:0 0 .6rem;color:var(--gold)}
.oc-diff-grid p,.oc-use-grid p{color:var(--muted);margin:0;line-height:1.55;font-size:.94rem}
.oc-uses{border-bottom:1px solid var(--line)}
.oc-caveat{margin:2rem 0 0;color:var(--muted);font-size:.9rem;max-width:80ch;line-height:1.6;border-left:2px solid var(--red);padding-left:1.2rem}
.oc-faq-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.oc-faq-list details{background:var(--ink);padding:1.3rem 1.6rem}
.oc-faq-list summary{cursor:pointer;font-size:1.08rem;font-weight:500;list-style:none}
.oc-faq-list summary::-webkit-details-marker{display:none}
.oc-faq-list summary:before{content:"+";color:var(--gold);margin-right:.8rem;display:inline-block;width:1ch}
.oc-faq-list details[open] summary:before{content:"−"}
.oc-faq-list p{color:var(--muted);margin:.9rem 0 0 2.3rem;line-height:1.6;max-width:75ch}
.oc-close{border-top:1px solid var(--line);padding:clamp(3rem,6vw,5rem) 0;text-align:center}
.oc-closing-line{font-size:clamp(1.2rem,2.4vw,2rem);letter-spacing:.02em;color:var(--ivory);margin:0 0 1.4rem}
.oc-disclosure{margin:2.5rem 0 .6rem;color:var(--muted);font-size:.88rem}
.oc-disclosure a{color:var(--gold)}
.oc-updated{color:#6d7683;font-size:.8rem;margin:0}
.conductor-line{color:var(--gold);letter-spacing:.02em;font-size:.95rem;margin:1rem 0 0}

/* ---------- Footer ----------
   Self-contained. site.css still carries the older three-column footer rules,
   so anything that could leak in is reset explicitly here rather than relied on
   to cascade. No fixed heights, no absolute positioning, no negative margins. */
.site-footer{
	display:block;
	grid-template-columns:none;
	gap:normal;
	border-top:1px solid var(--line);
	background:var(--ink);
	padding:clamp(3rem,5vw,4.5rem) 0 clamp(1.6rem,2.5vw,2.2rem);
	color:var(--muted);
}
.site-footer .shell{display:block}

.footer-grid{
	display:grid;
	grid-template-columns:1.5fr repeat(3,minmax(0,1fr));
	align-items:start;
	gap:clamp(2rem,4vw,4rem);
	padding-bottom:clamp(2.5rem,4vw,3.5rem);
}

/* Brand column */
.footer-brand{display:block;min-width:0}
.footer-logo{
	display:inline-block;
	max-width:210px;
	width:100%;
	margin:0 0 1.4rem;
	line-height:0;
	border-radius:2px;
	transition:opacity .2s ease;
}
.footer-logo img{
	display:block;
	width:100%;
	height:auto;
	max-width:100%;
}
.footer-logo:hover{opacity:.82}
.footer-tagline{
	margin:0 0 .55rem;
	color:var(--ivory);
	font-size:1.02rem;
	line-height:1.45;
	max-width:34ch;
}
.footer-blurb{
	margin:0 0 1.1rem;
	color:var(--muted);
	font-size:.92rem;
	line-height:1.6;
	max-width:36ch;
}
.footer-contact{margin:0;font-size:.92rem}
.footer-contact a{
	color:var(--gold);
	text-decoration:none;
	border-bottom:1px solid transparent;
	transition:border-color .2s ease;
}
.footer-contact a:hover{border-bottom-color:currentColor}

/* Link columns */
.footer-col{min-width:0}
.footer-col-title{
	margin:0 0 1.1rem;
	color:var(--gold);
	font-size:.7rem;
	font-weight:650;
	letter-spacing:.16em;
	text-transform:uppercase;
	line-height:1.2;
}
.site-footer .footer-col ul{
	display:grid;
	gap:.15rem;
	list-style:none;
	margin:0;
	padding:0;
}
.site-footer .footer-col li{margin:0}
.site-footer .footer-col a{
	display:inline-block;
	padding:.32rem 0;
	color:var(--muted);
	font-size:.92rem;
	line-height:1.45;
	text-decoration:none;
	border-bottom:1px solid transparent;
	transition:color .2s ease,border-color .2s ease;
}
.site-footer .footer-col a:hover{color:var(--ivory);border-bottom-color:var(--gold)}

/* Bottom bar */
.footer-base{
	display:flex;
	flex-wrap:wrap;
	align-items:baseline;
	justify-content:space-between;
	gap:.7rem 2.5rem;
	padding-top:clamp(1.4rem,2.5vw,1.9rem);
	border-top:1px solid var(--line);
}
.footer-base p{margin:0;font-size:.8rem;line-height:1.6}
.footer-copyright{color:#8b95a3;flex:0 1 auto}
.footer-disclosure{color:#77818f;flex:1 1 32ch;max-width:70ch;text-align:right}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
	.directory-list{grid-template-columns:1fr}
	.directory-hero{grid-template-columns:1fr}
	.directory-note{border-left:0;border-top:1px solid var(--line);padding:1.4rem 0 0}
	.product-profile .product-hero{grid-template-columns:auto 1fr}
	.product-aside{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding:1.4rem 0 0;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
	.compare-grid{grid-template-columns:repeat(2,1fr)}
	.oc-hero-inner{grid-template-columns:1fr}
	.related-grid{grid-template-columns:1fr}
}

@media(max-width:760px){
	.profile-split,.oc-step-list{grid-template-columns:1fr}
	.compare-grid{grid-template-columns:1fr}
	.filter-row{grid-template-columns:1fr;gap:.5rem}
	.fact-row{grid-template-columns:1fr;gap:.2rem}
	.directory-card{padding:1.4rem}
	.directory-card-head{grid-template-columns:auto 1fr}
	.directory-card-head .status-chip{grid-column:1/-1;justify-self:start}
	.product-profile .product-hero{grid-template-columns:1fr}
	.why-matters,.update-note,.article-sources,.article-footer{width:min(94vw,760px)}
	.conductor-page section h2{max-width:none}

	/* Wide comparison tables become labelled stacked rows. */
	.comparison-scroll table,.comparison-scroll thead,.comparison-scroll tbody,.comparison-scroll th,.comparison-scroll td,.comparison-scroll tr{display:block;width:100%}
	.comparison-scroll thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
	.comparison-scroll tr{border:1px solid var(--line);margin-bottom:1rem;padding:.6rem 1rem}
	.comparison-scroll td,.comparison-scroll th[scope="row"]{display:grid;grid-template-columns:40% 1fr;gap:1rem;padding:.6rem 0;border-bottom:1px solid #16202d;text-align:left}
	.comparison-scroll tr>*:last-child{border-bottom:0}
	.comparison-scroll td:before{content:attr(data-label);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
	.comparison-scroll th[scope="row"]:before{content:attr(data-label);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
}

@media(prefers-reduced-motion:reduce){
	*{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

/* ---------- Header breakpoint ----------
   The full desktop nav plus the search and menu controls do not fit between
   roughly 760px and 960px. Switch to the panel menu earlier so nothing
   collides or wraps at intermediate widths. */
@media(max-width:1180px) and (min-width:961px){
	.primary-nav ul{gap:clamp(1rem,2.2vw,2rem)}
	.primary-nav a{font-size:.88rem}
}

@media(max-width:960px){
	.nav-toggle{display:grid}
	.primary-nav{
		display:none;position:absolute;left:0;right:0;top:74px;z-index:30;
		background:#040d1a;border-bottom:1px solid var(--line);padding:.6rem max(3vw,24px);
	}
	.primary-nav.is-open{display:block}
	.primary-nav ul{display:grid;gap:0}
	.primary-nav a{display:block;padding:.9rem .2rem;font-size:1rem}
	.primary-nav .current-menu-item>a:after,.primary-nav a[aria-current]:after{display:none}
	.header-actions{gap:.5rem}
}

@media(max-width:760px){
	.primary-nav{top:64px}
}

/* ---------- Footer responsive ---------- */
@media(max-width:1100px){
	.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem 3rem}
	.footer-brand{grid-column:1 / -1}
	.footer-tagline,.footer-blurb{max-width:52ch}
	.footer-disclosure{text-align:left}
}

@media(max-width:640px){
	.footer-grid{grid-template-columns:1fr;gap:2.4rem}
	.footer-brand{grid-column:auto}
	.footer-logo{max-width:190px}
	.footer-base{flex-direction:column;align-items:flex-start;gap:.6rem}
	.footer-disclosure{text-align:left;flex:0 1 auto}
	.site-footer .footer-col a{padding:.42rem 0}
}

/* At 200 percent zoom the four columns cannot fit. Reflow rather than clip. */
@media(max-width:1100px) and (min-width:641px){
	.site-footer .footer-col a{padding:.36rem 0}
}

/* ---------- Card rows that cannot produce filler cells (0.8.0) ----------
 *
 * These rows used a CSS Grid with a 1px gap over a --line background, which
 * draws the hairline separators. That works only when the item count exactly
 * fills every row. It does not on a profile with six outcomes in a five column
 * row, or on any odd numbered list, and the leftover grid cells then paint the
 * container background as a block of grey.
 *
 * Flex with wrap and grow keeps the same hairline look, because the gap still
 * shows the container background between real cards, but the final row is
 * always filled by the cards themselves. There is no empty cell left to paint.
 */
.directory-list,
.outcome-links,
.alt-grid,
.related-grid,
.compare-grid,
.helpful-links,
.oc-step-list,
.oc-diff-grid,
.oc-use-grid,
.outcome-grid{
	display:flex;
	flex-wrap:wrap;
	gap:1px;
	background:var(--line);
	border:1px solid var(--line);
}

/* Direct children become the flexible cards. */
.directory-list>*,
.outcome-links>li,
.alt-grid>*,
.related-grid>article,
.compare-grid>*,
.helpful-links>a,
.oc-step-list>li,
.oc-diff-grid>article,
.oc-use-grid>article,
.outcome-grid>a{
	flex:1 1 auto;
	min-width:0;
	background:var(--ink);
}

/* Two, three, or auto sized rows, matching the previous column counts. */
.directory-list>*{flex-basis:calc(50% - 1px)}
.oc-step-list>li{flex-basis:calc(50% - 1px)}
.related-grid>article,
.compare-grid>*,
.outcome-grid>a{flex-basis:calc(33.3333% - 1px)}
.outcome-links>li{flex-basis:240px}
.alt-grid>*{flex-basis:200px}
.helpful-links>a,
.oc-diff-grid>article,
.oc-use-grid>article{flex-basis:260px}

/* A link inside a list item must fill the card, or the item's own background
 * shows through underneath it as a grey strip. */
.outcome-links>li{display:flex;padding:0}
.outcome-links>li>a{flex:1;display:block}

@media(max-width:1100px){
	.directory-list>*{flex-basis:100%}
	.related-grid>article{flex-basis:100%}
	.compare-grid>*{flex-basis:calc(50% - 1px)}
}

@media(max-width:760px){
	.oc-step-list>li{flex-basis:100%}
	.compare-grid>*{flex-basis:100%}
	.outcome-grid>a{flex-basis:100%}
	.outcome-links>li,
	.alt-grid>*,
	.helpful-links>a,
	.oc-diff-grid>article,
	.oc-use-grid>article{flex-basis:100%}
}

@media(max-width:1050px) and (min-width:761px){
	.outcome-grid>a{flex-basis:calc(50% - 1px)}
}

/* Guidance sections: real headings, real paragraphs, readable rhythm. */
.guidance-body>h3:first-child{margin-top:0}
.guidance-body p{margin:0 0 1.15rem}
.guidance-body p:last-child{margin-bottom:0}

/* ---------- Primary navigation with a News submenu (0.8.0) ---------- */
.primary-nav .nav-list{list-style:none;display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.4rem);margin:0;padding:0}
.primary-nav .nav-list>li{position:relative}
.primary-nav a,
.primary-nav .submenu-toggle{font-size:.94rem;color:#ddd8d0;font-family:inherit;line-height:1.4}
.primary-nav a:hover,
.primary-nav .current-menu-item>a,
.primary-nav .submenu-toggle:hover{color:var(--gold)}
.primary-nav .current-menu-ancestor>.submenu-toggle{color:var(--gold)}

.submenu-toggle{display:inline-flex;align-items:center;gap:.4rem;background:none;border:0;padding:0;cursor:pointer}
.submenu-caret{display:inline-flex;transition:transform .18s ease}
.has-submenu.is-open .submenu-caret{transform:rotate(180deg)}

.primary-nav .submenu{list-style:none;margin:0;padding:.4rem 0;position:absolute;top:calc(100% + .9rem);left:-1rem;min-width:216px;
	background:#040d1a;border:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.45);z-index:40;display:none}
.primary-nav .has-submenu.is-open>.submenu{display:block}
.primary-nav .submenu a{display:block;padding:.62rem 1.1rem}
.primary-nav .submenu a:hover{background:#08192b;color:var(--gold)}
/* A hover bridge, so the pointer can cross the gap without the panel closing. */
.primary-nav .has-submenu.is-open:before{content:"";position:absolute;left:0;right:0;top:100%;height:1rem}

.primary-nav a:focus-visible,
.submenu-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* On the panel menu every destination is listed outright. A dropdown inside a
 * drawer hides four of the seven links behind an extra tap for no benefit. */
@media(max-width:960px){
	.primary-nav .nav-list{display:grid;gap:0}
	.primary-nav .nav-list>li{position:static}
	.primary-nav a{display:block;padding:.85rem}
	.primary-nav .submenu-toggle{display:none}
	.primary-nav .submenu{display:grid;gap:0;position:static;min-width:0;border:0;box-shadow:none;background:none;padding:0}
	.primary-nav .submenu a{padding:.85rem .85rem .85rem 1.9rem;color:#c8c3bb}
	.primary-nav .has-submenu:before{display:none}
	.primary-nav .has-submenu>.submenu:before{content:"News";display:block;padding:.85rem .85rem .3rem;color:var(--gold);
		font-size:.72rem;font-weight:650;letter-spacing:.18em;text-transform:uppercase}
}

/* The One Conductor disclosure under the homepage brand statement. */
.conductor-disclosure{margin-top:1.6rem;color:#8b95a3;font-size:.82rem;line-height:1.6;max-width:60ch}

/* ---------- Directory filters (0.8.0) ---------- */
.filter-summary{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem 1rem;margin-bottom:1.1rem}
.filter-count{font-size:.86rem;color:var(--ivory);font-weight:600;flex:0 0 auto}
.active-filters{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0;min-width:0}
.active-chip{display:inline-flex;align-items:center;gap:.45rem;padding:.34rem .7rem;border:1px solid var(--gold);
	background:rgba(241,182,61,.1);color:var(--gold);font-size:.78rem;border-radius:2px;max-width:100%}
.active-chip:hover{background:var(--gold);color:#0a0803}
.active-chip-group{opacity:.75;font-weight:500}
.active-chip-value{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.active-chip-x{font-size:1rem;line-height:1}
.filter-clear{display:inline-block;padding:.34rem .7rem;font-size:.78rem;color:var(--muted);text-decoration:underline}
.filter-clear:hover{color:var(--ivory)}

.filter-label small{display:block;text-transform:none;letter-spacing:0;font-size:.72rem;color:#6f7883;margin-top:.2rem;font-weight:400}
.filter-chip-count{margin-left:.4rem;opacity:.6;font-size:.72rem}
.filter-chip.is-active .filter-chip-count{opacity:.75}
.filter-chip:focus-visible,.active-chip:focus-visible,.filter-clear:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* The no-results state sits inside the card row, so it takes the whole width. */
.directory-empty{flex:1 1 100%;padding:clamp(2rem,4vw,3.4rem);background:var(--ink)}
.directory-empty h2{font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:-.03em;margin:0 0 .8rem}
.directory-empty p{color:var(--muted);max-width:62ch}
.directory-empty-try{margin-top:1.6rem;color:var(--ivory)}
.filter-suggestions{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:.6rem 0 0;padding:0}

@media(max-width:760px){
	/* Chip rows scroll rather than push the page wider. */
	.filter-row ul{flex-wrap:wrap}
	.active-chip{max-width:100%}
	.filter-label{font-size:.7rem}
}

/* ---------- What to watch (0.8.0) ---------- */
.watch-list{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.watch-item{background:var(--ink);padding:1.6rem}
.watch-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.8rem;margin-bottom:1rem}
.watch-head h3{font-size:1.15rem;margin:0;line-height:1.3;flex:1 1 22ch}
.evidence-chip{flex:0 0 auto;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
	padding:.28rem .6rem;border:1px solid;border-radius:2px;white-space:nowrap}
.evidence-documented{color:var(--cyan);border-color:#1d5a66;background:rgba(19,199,216,.08)}
.evidence-editorial{color:var(--gold);border-color:#6b5220;background:rgba(241,182,61,.08)}
.evidence-test{color:var(--green);border-color:#1d6340;background:rgba(32,201,107,.08)}

.watch-detail{margin:0;display:grid;gap:.9rem}
.watch-detail>div{display:grid;grid-template-columns:170px 1fr;gap:1rem}
.watch-detail dt{color:var(--muted);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;margin:0}
.watch-detail dd{margin:0;color:#dfd9cf;line-height:1.6;font-size:.95rem}

.watch-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;align-items:baseline;
	margin-top:1.2rem;padding-top:.9rem;border-top:1px solid #16202d;font-size:.82rem}
.watch-foot a{color:var(--gold);text-decoration:underline}
.watch-foot span{color:var(--muted)}
.watch-foot small{color:#6f7883}

@media(max-width:760px){
	.watch-detail>div{grid-template-columns:1fr;gap:.25rem}
	.watch-item{padding:1.3rem}
}

/* ---------- Watchlist feature (0.8.0) ---------- */
.watchlist-feature{border-top:1px solid var(--line);background:#040d1a}
.watch-questions{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line)}
.watch-questions>li{flex:1 1 320px;min-width:0;background:var(--ink);padding:1.8rem;display:flex}
.watch-questions article{display:flex;flex-direction:column;width:100%}
.watch-q-number{color:var(--cyan);font-size:1.5rem;font-weight:300;line-height:1}
.watch-questions h3{font-size:1.22rem;line-height:1.3;margin:.9rem 0 1rem;letter-spacing:-.01em}
.watch-settles{color:var(--muted);font-size:.94rem;line-height:1.6;margin:0 0 1.4rem}
.watch-settles-label{display:block;color:var(--green);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:650;margin-bottom:.35rem}
.watch-questions footer{margin-top:auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;align-items:baseline;
	padding-top:1rem;border-top:1px solid #16202d}
.watch-questions footer a{color:var(--gold);font-size:.86rem}
.watch-questions footer small{color:#6f7883;font-size:.76rem}
.watchlist-feature>.shell>.button{margin-top:2rem}

@media(max-width:760px){
	.watch-questions>li{flex-basis:100%;padding:1.4rem}
}

/* ---------- Top Stories imagery ----------
 *
 * The card link is a two column grid: a 42px rail for the number, then the
 * copy. An image added as a third child lands in that 42px rail and pushes the
 * copy onto the next row inside it, which is what collapsed the headlines to
 * one word per line. The image therefore has to span both columns and take a
 * row of its own.
 */
.top-story > a > .top-story-image{
	grid-column:1 / -1;
	width:100%;
	aspect-ratio:16/9;
	object-fit:cover;
	background:#040d1a;
	margin-bottom:.2rem;
}

/* ---------- Newsletter blocks (0.8.0) ---------- */
.signal-signup{border-top:1px solid var(--line)}
.signal-blurb{color:var(--muted);max-width:60ch;font-size:1.05rem}
.byte-signup{margin-top:1.6rem;max-width:560px}
.byte-signup-consent{color:#8b95a3;font-size:.82rem;line-height:1.6;margin-top:.9rem}
.byte-signup-consent a{color:var(--gold);text-decoration:underline}
.oc-hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.oc-hero-actions .button{margin-top:0}
.oc-status-block .oc-status{max-width:78ch;color:#dfd9cf;line-height:1.65}