/* ============ V3 additions ============ */

/* --- nav, option C --- */
.site-header nav .nav-divider{width:1px;height:15px;background:var(--line);flex:0 0 auto;margin:0 2px}
.site-header nav a.nav-secondary{font-size:12px;font-weight:500;color:var(--muted)}
.site-header nav a.nav-secondary:hover{color:var(--ink)}
.site-header nav{gap:22px}
.nav-menu{display:none}
.nav-menu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;padding:10px 0}
.nav-menu>summary::-webkit-details-marker{display:none}
.nav-menu>summary::marker{content:""}
.nav-menu .bars{width:18px;height:12px;position:relative;display:block}
.nav-menu .bars:before,.nav-menu .bars:after,.nav-menu .bars i{content:"";position:absolute;left:0;right:0;height:2px;background:var(--ink)}
.nav-menu .bars:before{top:0}.nav-menu .bars i{top:5px}.nav-menu .bars:after{bottom:0}
.nav-menu[open] .bars i{opacity:0}
.nav-menu[open] .bars:before{top:5px;transform:rotate(45deg)}
.nav-menu[open] .bars:after{bottom:5px;transform:rotate(-45deg)}
.nav-panel{position:absolute;top:100%;left:0;right:0;z-index:30;background:var(--paper);
  border-bottom:1px solid var(--ink);padding:2px max(24px,calc((100vw - 1180px)/2)) 10px;display:flex;flex-direction:column}
.nav-panel a{padding:15px 0;border-bottom:1px solid var(--line);font-size:15px;font-weight:600}
.nav-panel a.nav-secondary{font-size:14px;font-weight:500;color:var(--muted)}
.nav-panel a:last-child{border-bottom:0}
@media (max-width:980px){
  .site-header nav.desktop-nav{display:none}
  .nav-menu{display:block;grid-area:1/1;justify-self:start}
  .header-inner{grid-template-columns:auto 1fr auto;gap:14px}
  .site-header .brand{grid-area:1/2;justify-self:center}
  .site-header .header-cta{grid-area:1/3}
}
@media (max-width:360px){.site-header .brand-name{display:none}.header-inner{gap:10px}}

/* --- kill the documented 1fr/max-content hazard on the component that now
       carries every table-shaped block --- */
.discipline-list article{grid-template-columns:54px minmax(0,1fr)}

/* --- the one new component: label + prose rows. 3 uses. --- */
.spec-table{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.spec-table .row{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.7fr);gap:30px;
  padding:17px 0;border-bottom:1px solid var(--line)}
.spec-table .row:last-child{border-bottom:0}
.spec-table .k{font:700 11px/1.35 "IBM Plex Mono",ui-monospace,Menlo,monospace;
  text-transform:uppercase;letter-spacing:.06em;color:var(--ink);overflow-wrap:anywhere}
.spec-table .v{font-size:14px;line-height:1.55;color:#5e605d;overflow-wrap:anywhere}
@media (max-width:720px){
  .spec-table .row{grid-template-columns:minmax(0,1fr);gap:7px;padding:15px 0}
}
/* inverse, for the dark hero panel */
.instrument .spec-table{border-color:#484b4d}
.instrument .spec-table .row{border-color:#3c3f41}
.instrument .spec-table .k{color:var(--white)}
.instrument .spec-table .v{color:#c9cbc6}

/* --- a trailing <p> after a bordered list had no margin rule --- */
.editorial-copy>.line-list+p,.editorial-copy>ul+p{margin-top:22px}

/* --- hero panel (reviving a component that shipped dead) --- */
.instrument{padding:22px 24px 24px}
.instrument .instrument-top{font:700 9px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace;
  text-transform:uppercase;letter-spacing:.14em;color:#9ba08f;margin-bottom:18px}

/* --- coverage states: a strip, not inline mono in a sans sentence --- */
.state-strip{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:34px 0 0}
.state-strip div{border-right:1px solid var(--line);padding:20px 22px}
.state-strip div:last-child{border-right:0}
.state-strip span{font:700 10px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace;
  text-transform:uppercase;letter-spacing:.12em;color:#777874;display:block;margin-bottom:14px}
.state-strip p{font-size:14px;line-height:1.5;color:#5e605d}
@media (max-width:720px){
  .state-strip{grid-template-columns:minmax(0,1fr)}
  .state-strip div{border-right:0;border-bottom:1px solid var(--line);padding:16px 0}
  .state-strip div:last-child{border-bottom:0}
}
/* roll-up affordance is neutral by default; the variant sheet turns it on */
.rollup>summary{display:none}

/* --- neutral treatment for the two non-product pages (R7): the palette is the
       product taxonomy, so an instrument page in entry green reads as an ATR page --- */
.neutral .layer-grid article:first-child:after{background:var(--ink)}

/* --- density modifier: instrument page only. The site's normal rhythm is
       correct for a 6-section product page and too loose for a 9-section
       reference document -- ~2,300px of this page was section padding alone. --- */
.dense-page .section{padding:74px 0}
.dense-page .section h2{font-size:clamp(34px,3.5vw,49px)}
.dense-page .section-intro{margin-bottom:38px}
.dense-page .layer-grid article{min-height:200px}
.dense-page .layer-grid h3{margin:40px 0 14px;font-size:23px}
.dense-page .stat-board article{min-height:250px}
.dense-page .proof-stat-board strong{font-size:clamp(42px,4.6vw,64px)}
.dense-page .spec-table .row{padding:14px 0}
.dense-page .discipline-list article{padding:19px 0}
/* a one-line H2 under align-items:end leaves the deck floating above the
   heading; top-align the intro at this type size instead */
.dense-page .section-intro.split-intro{align-items:start}

/* the product pages tint their closing band (.entry-final / .exit-final);
   --paper-2 is the neutral equivalent for the two non-product pages */
.neutral-final{background:var(--paper-2)}

/* --- fact-rail: the credit clause is white-space:nowrap inside a bare 1fr
       track, so its min-content floor forces the track wider than the page.
       .product-hero is overflow:hidden, so it CLIPS instead of scrolling --
       invisible to a page-overflow check. Let it wrap at narrow widths. --- */
.fact-rail>div{grid-template-columns:repeat(3,minmax(0,1fr))}
/* the credit clause must never be nowrap: in a 1/3 track it overflows from
   ~980px down, and .product-hero clips rather than scrolls, hiding it */
.fact-rail b.fee-with-credit,.fact-rail b small{white-space:normal}
@media (max-width:460px){
  .fact-rail>div{grid-template-columns:minmax(0,1fr)}
  .fact-rail b small{margin-left:0;display:block;margin-top:4px}
}

/* --- instrument-page hero: single column, full width (no right-hand panel) --- */
.hero-full .product-hero-grid{grid-template-columns:minmax(0,1fr);gap:0;min-height:0;padding-block:104px}
.hero-full .hero-deck{max-width:900px}
.hero-full .hero-deck p+p{margin-top:20px}
@media (max-width:720px){.hero-full .product-hero-grid{padding-block:64px}}
/* the relocated pair: two columns, not three */
.hero-pair>div{grid-template-columns:repeat(2,minmax(0,1fr))}
.hero-pair b{font-size:13px;line-height:1.5;font-weight:570}
@media (max-width:720px){.hero-pair>div{grid-template-columns:minmax(0,1fr)}}
