/* The Business of Accounting — site stylesheet (v1.5)
   Part 1 and Part 2 are v1's two <style> blocks from index.html, moved verbatim.
   Part 3 (bottom) styles the new multi-page navigation. */

/* ── Part 1: v1 main stylesheet ── */
    *{scroll-behavior:smooth}
    body{font-family:'Inter',system-ui,sans-serif;background:#070F1C;color:#E2E8F0;transition:background-color .35s ease,color .35s ease}
    /* Smooth theme-switch transitions on the elements that change between dark and light */
    nav,footer,.card,.card-blue,.card-green,.stat-box,.callout,.callout-green,.callout-warn,.firm-badge,.term-card,.commit-item,.try-item,.tactic-card,.ai-theme-block,.quiz-choice,.filter-btn,.spec-btn,.formula-pill,.q-card{transition-property:background-color,border-color,color,box-shadow;transition-duration:.3s;transition-timing-function:ease}
    /* Sticky-nav offset: anchor links jump under the 74px nav by default — bump destinations down ~90px */
    section[id]{scroll-margin-top:90px}
    /* NAV */
    .nav-link{transition:color .2s}
    .nav-link:hover{color:#4BA0E8}
    .nav-link.active{color:#4BA0E8;border-bottom:2px solid #1E78C4}
    /* PILLS */
    .section-pill{background:rgba(30,120,196,.15);border:1px solid rgba(30,120,196,.4);color:#4BA0E8;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;border-radius:20px;display:inline-block;margin-bottom:12px}
    .section-pill-green{background:rgba(82,164,74,.15);border:1px solid rgba(82,164,74,.4);color:#79C86E}
    .section-pill-teal{background:rgba(20,184,166,.15);border:1px solid rgba(20,184,166,.4);color:#5EEAD4}
    /* CARDS */
    .card{background:#102540;border:1.5px solid rgba(30,120,196,.4);border-radius:12px}
    .card-blue{background:rgba(30,120,196,.1);border:1.5px solid rgba(30,120,196,.38);border-radius:12px}
    .card-green{background:rgba(82,164,74,.1);border:1.5px solid rgba(82,164,74,.35);border-radius:12px}
    .callout{background:rgba(30,120,196,.08);border-left:3px solid #1E78C4;border-radius:0 8px 8px 0;padding:14px 18px}
    .callout-green{background:rgba(82,164,74,.08);border-left:3px solid #52A44A;border-radius:0 8px 8px 0;padding:14px 18px}
    .callout-warn{background:rgba(251,191,36,.08);border-left:3px solid #F59E0B;border-radius:0 8px 8px 0;padding:14px 18px}
    /* HERO NAV CARDS */
    .section-nav-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:18px 14px 14px;border-radius:14px;border:1px solid var(--nc-border);background:var(--nc-bg);text-decoration:none;transition:all .25s cubic-bezier(.34,1.4,.64,1);cursor:pointer;position:relative;overflow:hidden}
    .section-nav-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--nc);opacity:.7;transition:opacity .2s}
    .section-nav-card:hover{transform:translateY(-5px);box-shadow:0 14px 32px rgba(0,0,0,.25);border-color:var(--nc)!important}
    .section-nav-card:hover::before{opacity:1}
    .section-nav-card:hover .snc-arrow{opacity:1;transform:translateY(0)}
    .snc-icon{font-size:1.6rem;margin-bottom:8px;line-height:1}
    .snc-label{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--nc);opacity:.8;margin-bottom:4px}
    .snc-title{font-size:.82rem;font-weight:700;color:#E2E8F0;margin-bottom:4px;line-height:1.3}
    .snc-desc{font-size:.68rem;color:#94A3B8;line-height:1.4;margin-bottom:8px}
    .snc-arrow{font-size:.68rem;font-weight:700;color:var(--nc);opacity:0;transform:translateY(4px);transition:all .2s}
    /* INTERACTIVE ELEMENTS */
    .clickable{cursor:pointer;transition:all .18s}
    .clickable:hover{border-color:rgba(30,120,196,.5)!important;transform:translateX(2px)}
    .clickable.active-item{border-color:#1E78C4!important;background:rgba(30,120,196,.08)}
    /* Firm-landscape mobile accordion — render the firm-examples inline beneath the tapped
       tier card. The desktop #firm-panel is hidden on mobile. */
    .fc-inline-detail{display:none}
    @media (max-width:767px){
      [id^="fc-"].clickable{position:relative;padding-right:36px}
      [id^="fc-"].clickable::after{content:'⌄';position:absolute;top:18px;right:14px;color:#64748B;font-weight:800;transition:transform .2s,color .2s;line-height:1;font-size:1.1rem}
      [id^="fc-"].clickable.active-item::after{transform:rotate(180deg);color:#4BA0E8}
      [id^="fc-"].clickable .fc-inline-detail:not(:empty){display:block;margin-top:14px;padding-top:14px;border-top:1px solid rgba(148,163,184,.18)}
      #firm-panel{display:none}
    }
    .click-hint{font-size:.63rem;color:#94A3B8;display:flex;align-items:center;gap:3px;margin-top:6px;transition:.15s}
    .clickable:hover .click-hint,.clickable.active-item .click-hint{color:#4BA0E8}
    /* EXPAND PANELS */
    .expand-panel{display:none}
    .expand-panel.open{display:block;animation:fadeIn .25s ease}
    /* FIRM BADGES */
    .firm-badge{position:relative;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:6px;font-size:.73rem;font-weight:700;background:rgba(30,120,196,.1);border:1px solid rgba(30,120,196,.22);color:#CBD5E1;letter-spacing:.01em;line-height:1.2;transition:all .18s}
    .firm-badge:hover{transform:scale(1.06);border-color:rgba(255,255,255,.45)!important;box-shadow:0 2px 14px rgba(0,0,0,.4)}
    .firm-badge[data-tip]{cursor:help}
    .firm-badge[data-tip]:hover::after,.firm-badge[data-tip].clicked::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);background:rgba(7,15,28,.97);color:#E2E8F0;font-size:.72rem;font-weight:400;padding:10px 14px;border-radius:8px;white-space:normal;width:280px;border:1px solid rgba(30,120,196,.45);box-shadow:0 6px 24px rgba(0,0,0,.55);pointer-events:none;z-index:1000;letter-spacing:.01em;line-height:1.5;text-transform:none;text-align:left}
    .firm-badge[data-tip]:hover::before,.firm-badge[data-tip].clicked::before{content:'';position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:rgba(7,15,28,.97);pointer-events:none;z-index:1000}
    /* Visible "active" state on the badge itself so it reads as toggled (mostly relevant on touch) */
    .firm-badge[data-tip].clicked{border-color:rgba(75,160,232,.7);box-shadow:0 4px 18px rgba(30,120,196,.35)}
    .firm-badge .fb-bar{width:3px;height:14px;border-radius:2px;flex-shrink:0}
    /* Tiny "?" info pill — always visible on firm badges that have a description, so users see the hover affordance */
    .firm-badge .fb-info{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;border-radius:50%;background:rgba(75,160,232,.18);color:#7BBEF5;font-size:.58rem;font-weight:800;margin-left:6px;border:1px solid rgba(75,160,232,.4);vertical-align:middle;line-height:1;transition:background .15s,color .15s,border-color .15s}
    .firm-badge:hover .fb-info,.firm-badge.clicked .fb-info{background:rgba(75,160,232,.55);color:#FFFFFF;border-color:rgba(75,160,232,.7)}
    /* "?" icon that anchors the firm-help instruction line — single icon per firm directory,
       replacing the per-badge ? icons that were too noisy when repeated on every chip. */
    .firm-help-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;background:rgba(75,160,232,.2);color:#7BBEF5;font-size:.6rem;font-weight:800;border:1px solid rgba(75,160,232,.45);margin-right:6px;vertical-align:middle;line-height:1}
    .firm-tag{position:relative;display:inline-block;font-size:.68rem;font-weight:700;padding:2px 6px;border-radius:3px;margin-left:5px;letter-spacing:.05em;border:1px solid;vertical-align:middle;line-height:1.3}
    .firm-tag.t-pe{background:rgba(217,119,6,.15);color:#FBBF24;border-color:rgba(217,119,6,.4);cursor:help}
    .firm-tag.t-public{background:rgba(75,160,232,.15);color:#4BA0E8;border-color:rgba(75,160,232,.4);cursor:default}
    .firm-tag.t-esop{background:rgba(82,164,74,.15);color:#52A44A;border-color:rgba(82,164,74,.4);cursor:default}
    .firm-tag.t-rollup{background:rgba(168,85,247,.15);color:#C084FC;border-color:rgba(168,85,247,.4);cursor:default}
    .firm-tag[data-detail]:hover::after{content:attr(data-detail);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:rgba(7,15,28,.97);color:#E2E8F0;font-size:.68rem;font-weight:500;padding:6px 10px;border-radius:6px;white-space:nowrap;border:1px solid rgba(217,119,6,.45);box-shadow:0 4px 18px rgba(0,0,0,.5);pointer-events:none;z-index:1000;letter-spacing:.02em;line-height:1.3;text-transform:none}
    .firm-tag[data-detail]:hover::before{content:'';position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:rgba(7,15,28,.97);pointer-events:none;z-index:1000}
    /* P&L */
    .pl-row{cursor:pointer;border-radius:8px;transition:transform .15s;border:1px solid rgba(255,255,255,.07)}
    .pl-row:hover{transform:translateX(3px);border-color:rgba(255,255,255,.15)!important}
    .pl-row.pl-active{outline:2px solid rgba(30,120,196,.5)}
    /* P&L Equation mobile accordion — detail content rendered inline beneath the tapped row.
       Inline detail fills the full row width thanks to the `flex-wrap` on the parent. */
    .pl-inline-detail{display:none;width:100%}
    @media (max-width:767px){
      .pl-row .pl-inline-detail:not(:empty){display:block;margin-top:10px}
      /* Disable the hover-translate transform on mobile so the inline-detail doesn't shift left */
      .pl-row:hover{transform:none}
      /* Hide the desktop detail panel — replaced by inline rendering */
      #pl-detail-panel{display:none}
    }
    /* FORMULA */
    .formula-pill{cursor:pointer;transition:all .2s;padding:12px 16px;border-radius:10px;border:1px solid rgba(30,120,196,.25);background:rgba(30,120,196,.1);text-align:center}
    .formula-pill:hover{transform:scale(1.06);border-color:rgba(30,120,196,.6)!important;box-shadow:0 4px 16px rgba(30,120,196,.15)}
    .formula-pill.pill-active{outline:2px solid #1E78C4;background:rgba(30,120,196,.18)}
    /* Calculator on mobile — Est. Partner Income card promoted above the sliders so slider
       adjustments give immediate visible feedback (handled by JS DOM-reorder; this just spaces it). */
    .partner-income-mobile{margin-bottom:1.25rem}
    /* Profitability formula — on mobile, stack the equation vertically. The × / = operators
       get a ↓ glyph prefixed via CSS pseudo-element so the "this becomes this" relationship
       reads cleanly on a narrow screen instead of flex-wrapping awkwardly. */
    @media (max-width:767px){
      .formula-row{flex-direction:column!important;flex-wrap:nowrap!important}
      .formula-row > .formula-pill{width:100%}
      .formula-row > .formula-op{font-size:1rem;padding:2px 0;line-height:1}
      .formula-row > .formula-op::before{content:'↓ ';opacity:.65;margin-right:2px}
    }
    .formula-result{background:rgba(82,164,74,.18);border:1px solid rgba(82,164,74,.45);padding:12px 16px;border-radius:10px;text-align:center}
    /* SPECTRUM */
    .spec-btn{cursor:pointer;border-radius:10px;padding:14px 10px;text-align:center;transition:all .2s;border:2px solid transparent}
    .spec-btn:hover{transform:translateY(-2px)}
    .spec-btn.spec-active{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.3)}
    .spec-detail{display:none}
    .spec-detail.visible{display:block;animation:fadeIn .25s ease}
    /* Wrapper around each spectrum button — lets the inline-detail sit beside the button.
       flex column + flex:1 on the button preserves equal tile heights per row on desktop. */
    .spec-cell{display:flex;flex-direction:column}
    .spec-cell > .spec-btn{flex:1;width:100%}
    .spec-inline-detail{display:none}
    /* Service spectrum — on mobile, the spectrum is rendered as a single vertical column.
       The horizontal gradient bar + axis labels don't apply, so hide them and show
       a vertical orientation hint instead. */
    .spec-mobile-label{display:none}
    @media (max-width:639px){
      .spec-gradient-bar{display:none}
      .spec-axis-labels{display:none}
      .spec-mobile-label{display:block}
      /* The spectrum data is authored row-by-row in DOM order. On mobile (single column)
         we want column-by-column order so REQUIRED services appear first and CHOSEN last —
         preserving the spectrum's meaning when the layout collapses. */
      .spectrum-grid > :nth-child(1) {order:1}   /* Audit & Assurance (REQUIRED) */
      .spectrum-grid > :nth-child(6) {order:2}   /* Tax Compliance (REQUIRED) */
      .spectrum-grid > :nth-child(2) {order:3}   /* Transaction Advisory */
      .spectrum-grid > :nth-child(7) {order:4}   /* Tax Advisory */
      .spectrum-grid > :nth-child(3) {order:5}   /* Business Valuation */
      .spectrum-grid > :nth-child(8) {order:6}   /* Risk Management */
      .spectrum-grid > :nth-child(4) {order:7}   /* Outsourced Accounting / CAS */
      .spectrum-grid > :nth-child(9) {order:8}   /* Cybersecurity & IT */
      .spectrum-grid > :nth-child(5) {order:9}   /* Business Transformation (CHOSEN) */
      .spectrum-grid > :nth-child(10){order:10}  /* Strategic Consulting (CHOSEN) */
      /* Mobile: render the tapped service's detail inline beneath its tile,
         and hide the shared bottom panel so the detail appears where the user tapped. */
      .spec-inline-detail:not(:empty){display:block;margin-top:12px;padding-top:12px;border-top:1px solid rgba(148,163,184,.18)}
      #spec-detail{display:none}
    }
    /* CALENDAR */
    .cal-cell{height:30px;border-radius:5px;font-size:.62rem;font-weight:600;display:flex;align-items:center;justify-content:center;transition:filter .15s,outline .15s,border-color .15s;cursor:pointer}
    .cal-cell.col-lit{box-shadow:inset 0 0 0 1000px rgba(255,255,255,.07)}
    .cal-month-hdr.col-lit{color:#CBD5E1!important}
    .intensity-0{background:#102540;color:#4B5563}
    .intensity-1{background:rgba(30,120,196,.15);color:#7BBEF5}
    .intensity-2{background:rgba(30,120,196,.38);color:#4BA0E8}
    .intensity-3{background:rgba(30,120,196,.65);color:#E2E8F0;font-weight:800}
    .cal-context{display:none;scroll-margin-top:90px}
    .cal-context.visible{display:block;animation:fadeIn .2s ease}
    /* ACCORDION */
    .accordion-body{display:none}
    .accordion-body.open{display:block;animation:fadeIn .2s ease}
    .accordion-icon{transition:transform .2s}
    .accordion-icon.open{transform:rotate(180deg)}
    /* INTERACTIVE CARD — generic click-to-expand pattern reused across the new slide-derived sections */
    .iv-card{cursor:pointer;transition:transform .18s,border-color .18s,box-shadow .18s,background .18s;position:relative}
    .iv-card:hover{transform:translateY(-2px);border-color:rgba(75,160,232,.55)!important;box-shadow:0 6px 18px rgba(0,0,0,.18)}
    .iv-card .iv-chevron{position:absolute;top:14px;right:14px;color:#64748B;transition:transform .2s,color .2s;flex-shrink:0;width:14px;height:14px}
    .iv-card:hover .iv-chevron{color:#4BA0E8}
    .iv-card.iv-open .iv-chevron{transform:rotate(180deg);color:#4BA0E8}
    .iv-card .iv-detail{display:none;margin-top:10px;padding-top:10px;border-top:1px solid rgba(75,160,232,.18)}
    .iv-card.iv-open .iv-detail{display:block;animation:fadeIn .22s ease}
    .iv-card.iv-open{box-shadow:0 6px 22px rgba(0,0,0,.22)}
    /* 2×2 matrix — on small phones, give the eyebrow text more right-padding so it never collides with the iv-chevron */
    @media (max-width:480px){
      .iv-card .text-xs.uppercase.pr-6:first-of-type{padding-right:2rem}
      .iv-card .iv-chevron{top:12px;right:12px;width:13px;height:13px}
    }
    /* FLIP CARD — click a fixed-size card to smoothly crossfade its front for the "what this means for you" face.
       (Earlier 3D rotateY felt choppy; the opacity swap reads as a soft swap-in-place.)
       Independent toggle — flips do not affect other cards in the group; users can flip all of them at once. */
    .flip-card{position:relative;cursor:pointer;min-height:200px;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s}
    .flip-card:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(0,0,0,.22)}
    /* Corner flip-affordance icon — signals each card has a back side without changing the markup */
    .flip-card::before{
      content:'';position:absolute;top:12px;right:12px;width:18px;height:18px;z-index:3;pointer-events:none;
      opacity:.55;transition:opacity .18s,transform .35s;
      background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237BBEF5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a9 9 0 0 1-15 6.7L3 16'/><path d='M3 21v-5h5'/><path d='M3 12a9 9 0 0 1 15-6.7L21 8'/><path d='M21 3v5h-5'/></svg>");
      background-repeat:no-repeat;background-size:contain
    }
    .flip-card:hover::before{opacity:.95;transform:rotate(180deg)}
    .flip-card.flipped::before{transform:rotate(180deg);opacity:.85}
    .flip-card:focus-visible{outline:2px solid #4BA0E8;outline-offset:3px;border-radius:14px}
    /* Both faces occupy the same grid cell. The parent flex column + flex:1 on flip-inner makes the
       inner grid stretch to the full card height (which the outer grid stretches to the row's
       tallest card via align-items:stretch default). Result: all cards in a row share one visual
       size; faces fill that size cleanly. grid-template-rows:1fr fills the inner vertically. */
    .flip-inner{display:grid;grid-template-rows:1fr;flex:1}
    .flip-front,.flip-back{grid-area:1/1;border-radius:12px;display:flex;flex-direction:column;transition:opacity .32s ease, visibility .32s ease}
    .flip-front{opacity:1;visibility:visible}
    .flip-back{opacity:0;visibility:hidden}
    .flip-card.flipped .flip-front{opacity:0;visibility:hidden}
    .flip-card.flipped .flip-back{opacity:1;visibility:visible}
    /* Tiny "tap to see" / "tap to return" hint — clusters with the face content (right-aligned)
       directly after the body text. Any empty card area sits below the hint as plain card bg,
       not as a strip with a floating hint, which read as "weird extra hover" on shorter cards. */
    .flip-hint{align-self:flex-end;padding-top:10px;font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#94A3B8;display:inline-flex;align-items:center;gap:4px;opacity:.85;transition:color .15s,opacity .15s}
    .flip-card:hover .flip-hint{color:#7BBEF5;opacity:1}
    .flip-hint svg{width:11px;height:11px;flex-shrink:0}
    /* On smaller breakpoints (where flip cards have more breathing room because the grid is narrower) bump card height slightly so back content has room */
    @media (max-width:639px){.flip-card{min-height:200px}}
    @media (min-width:640px) and (max-width:1023px){.flip-card{min-height:220px}}
    /* PARTNER HIERARCHY visual — small stack rendered inside each partner archetype detail panel.
       Highlights where the selected partner sits in the firm. */
    .pt-hier-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 10px;border-left:3px solid rgba(148,163,184,.18);background:rgba(255,255,255,.025);border-radius:0 6px 6px 0;font-size:.7rem;line-height:1.3;transition:background .15s,border-color .15s}
    .pt-hier-row .pt-hier-name{color:#94A3B8;font-weight:600;white-space:nowrap}
    .pt-hier-row .pt-hier-meta{color:#64748B;font-size:.62rem;text-align:right}
    .pt-hier-row.pt-hier-active{background:rgba(75,160,232,.08);border-left-width:4px}
    .pt-hier-row.pt-hier-active .pt-hier-name{color:#E2E8F0;font-weight:700}
    .pt-hier-row.pt-hier-active .pt-hier-meta{color:#94A3B8}
    .pt-hier-divider{height:1px;background:rgba(148,163,184,.15);margin:5px 0;position:relative}
    .pt-hier-divider::after{content:"OPERATIONS";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#102540;padding:0 8px;font-size:.55rem;font-weight:700;letter-spacing:.1em;color:#64748B}
    /* STRATEGIC THEMES 2×2 — mobile stacks low-risk → high-risk; desktop arranges as a true 2×2 spatial matrix */
    .qm-grid{display:grid;grid-template-columns:1fr;gap:10px}
    /* Growth-matrix flip cards carry more content than the disruption/lever flip cards,
       so they need extra height. The qm-grid forces a uniform card height per row.
       On mobile the eyebrow may wrap to 2 lines and the example text needs more room. */
    .qm-flip{min-height:340px}
    @media (max-width:639px){.qm-flip{min-height:400px}}
    @media (min-width:768px){
      .qm-grid{grid-template-columns:1fr 1fr;grid-template-areas:"tl tr" "bl br"}
      .qm-grid .qm-tl{grid-area:tl}
      .qm-grid .qm-tr{grid-area:tr}
      .qm-grid .qm-bl{grid-area:bl}
      .qm-grid .qm-br{grid-area:br}
    }
    .qm-axis{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#94A3B8}
    .qm-axis-y{display:none}
    /* Strategic Themes 2×2 — mobile tabbed view. Hidden on desktop; on mobile, only the
       cards matching the active risk tier are shown so the spatial 2×2 metaphor (which
       collapses to a meaningless vertical stack on phones) is replaced with a tier filter. */
    .qm-tabs{display:none}
    @media (max-width:767px){
      .qm-tabs{display:block;margin-bottom:14px}
      .qm-tabs-caption{font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#94A3B8;text-align:center;margin-bottom:8px}
      .qm-tabs-pills{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
      .qm-tab{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;font-size:.78rem;font-weight:600;color:#94A3B8;background:transparent;border:1px solid rgba(148,163,184,.3);cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s,color .15s}
      .qm-tab:hover{color:#E2E8F0;border-color:rgba(148,163,184,.55)}
      .qm-tab.active{color:#E2E8F0;background:rgba(255,255,255,.05);border-color:rgba(148,163,184,.7)}
      .qm-tab-low.active{border-color:#79C86E;background:rgba(82,164,74,.1)}
      .qm-tab-med.active{border-color:#4BA0E8;background:rgba(30,120,196,.1)}
      .qm-tab-high.active{border-color:#F59E0B;background:rgba(245,158,11,.1)}
      .qm-tab-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
      /* Hide non-matching tier cards on mobile */
      .qm-grid[data-active-risk] > [data-risk]{display:none}
      .qm-grid[data-active-risk="low"]    > [data-risk="low"],
      .qm-grid[data-active-risk="medium"] > [data-risk="medium"],
      .qm-grid[data-active-risk="high"]   > [data-risk="high"]{display:block}
    }
    @media (min-width:768px){
      .qm-frame{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:stretch}
      .qm-axis-y{display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:6px 0;border-right:1px dashed rgba(148,163,184,.2);padding-right:10px}
      .qm-axis-y .qm-axis-y-label{writing-mode:vertical-rl;transform:rotate(180deg);font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#94A3B8;align-self:center}
      .qm-axis-y .qm-axis-y-tick{font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7BBEF5;line-height:1}
    }
    /* GLOSSARY */
    .term-card{cursor:pointer;min-height:170px;display:flex;flex-direction:column}
    .term-card .why-hint{display:flex;align-items:center;gap:4px;font-size:.65rem;color:#94A3B8;margin-top:8px;transition:.15s}
    .term-card:hover .why-hint{color:#4BA0E8}
    .term-expand{max-height:0;overflow:hidden;transition:max-height .35s ease,opacity .3s ease;opacity:0}
    .term-card.expanded .term-expand{max-height:200px;opacity:1}
    .term-card.expanded{border-color:rgba(30,120,196,.45)!important;background:rgba(30,120,196,.07)}
    .term-card:hover:not(.expanded){outline:1px solid rgba(255,255,255,.28);outline-offset:1px}
    .term-card.hidden{display:none}
    .search-highlight{background:rgba(30,120,196,.3);border-radius:2px;padding:0 2px}
    /* Glossary term-card category tag — clickable, jumps to the matching filter when clicked */
    .term-cat-tag{font-size:.65rem;color:#94A3B8;border:1px solid rgba(148,163,184,.35);border-radius:6px;padding:2px 7px;background:transparent;cursor:pointer;font-family:inherit;font-weight:600;letter-spacing:.02em;transition:color .15s,border-color .15s,background .15s;line-height:1.3;white-space:nowrap}
    .term-cat-tag:hover{color:#7BBEF5;border-color:rgba(75,160,232,.55);background:rgba(75,160,232,.12)}
    .filter-btn{transition:.15s;border-radius:20px;padding:5px 14px;font-size:.78rem;font-weight:600;border:1px solid rgba(30,120,196,.3);color:#94A3B8;cursor:pointer}
    .filter-btn.active{background:rgba(30,120,196,.15);border-color:#1E78C4;color:#4BA0E8}
    .filter-btn:hover{border-color:#1E78C4;color:#E2E8F0}
    /* PICK YOUR PATH — audience-level selector cards. The active card pops with a green outline + lift
       to anchor the page's "this is your view" cue. */
    .path-card{display:flex;flex-direction:column;text-align:left;padding:16px 16px 14px;border-radius:12px;border:1.5px solid rgba(82,164,74,.22);background:rgba(82,164,74,.04);color:inherit;cursor:pointer;transition:all .22s cubic-bezier(.34,1.2,.64,1);font-family:inherit;width:100%}
    .path-card:hover{border-color:rgba(82,164,74,.55);background:rgba(82,164,74,.08);transform:translateY(-2px);box-shadow:0 8px 22px rgba(82,164,74,.12)}
    .path-card.active{border-color:#52A44A;background:rgba(82,164,74,.14);box-shadow:0 6px 22px rgba(82,164,74,.25),0 0 0 1px rgba(82,164,74,.3)}
    .path-card:focus-visible{outline:2px solid #4BA0E8;outline-offset:3px}
    .path-card-title{font-weight:700;font-size:.92rem;color:#E2E8F0;margin-bottom:2px}
    .path-card.active .path-card-title{color:#A3D49B}
    .path-card-sub{font-size:.7rem;font-style:italic;color:#94A3B8;margin-bottom:8px}
    .path-card-desc{font-size:.7rem;line-height:1.45;color:#94A3B8}
    .path-card:hover .path-card-desc,.path-card.active .path-card-desc{color:#94A3B8}
    /* CHECKLIST */
    .commit-item{transition:all .2s;cursor:pointer}
    .commit-item:hover{border-color:rgba(245,158,11,.4)!important;background:rgba(245,158,11,.05)!important;transform:translateX(2px);box-shadow:0 4px 18px rgba(245,158,11,.08)}
    .commit-item.checked{border-color:rgba(217,119,6,.6)!important;background:rgba(217,119,6,.1)!important;box-shadow:0 4px 18px rgba(217,119,6,.18)}
    .commit-item.checked:hover{border-color:rgba(217,119,6,.7)!important;background:rgba(217,119,6,.13)!important}
    .commit-star{font-size:1.35rem;line-height:1;flex-shrink:0;margin-top:1px;transition:all .22s;color:#475569}
    .commit-item.checked .commit-star{color:#F59E0B;filter:drop-shadow(0 0 6px rgba(245,158,11,.55))}
    /* CALC */
    input[type=range]{-webkit-appearance:none;appearance:none;height:5px;border-radius:5px;background:#2D4A6A;outline:none}
    input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#1E78C4;cursor:pointer;transition:.1s}
    input[type=range]::-webkit-slider-thumb:hover{background:#4BA0E8;transform:scale(1.1)}
    .stat-box{background:#070F1C;border:1px solid rgba(30,120,196,.25);border-radius:10px;padding:16px;text-align:center}
    .stat-value{font-size:1.6rem;font-weight:800;color:#4BA0E8}
    .stat-label{font-size:.72rem;color:#94A3B8;text-transform:uppercase;letter-spacing:.07em;margin-top:2px}
    /* MISC */
    .bg-alt{background:#0D2038}
    /* (Removed unused .aam-badge / .aam-default / .aam-hover rules — the hero badge they styled was deleted in an earlier round.) */
    /* NAV ACTIVE */
    .nav-link:hover{color:#F59E0B!important}
    .nav-link.active{color:#F59E0B!important;border-bottom:2px solid #F59E0B!important}
    /* SCROLL TOP BTN */
    /* Scroll-to-top + hover section nav — the arrow doubles as a navigation hub.
       Hover the area to reveal a popover with section links. Click the arrow to scroll to top. */
    .scroll-top-nav{position:fixed;bottom:88px;left:24px;z-index:200;opacity:0;pointer-events:none;transition:opacity .3s}
    .scroll-top-nav.visible{opacity:1;pointer-events:auto;animation:btnBounce 2s ease-in-out 3}
    .scroll-top-nav:hover,.scroll-top-nav.st-pop-open{animation:none}
    #scroll-top-btn{position:relative;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,transform .2s;background:rgba(30,120,196,.85);border:1px solid rgba(30,120,196,.6);box-shadow:0 4px 18px rgba(0,0,0,.35);backdrop-filter:blur(6px)}
    #scroll-top-btn:hover{background:#1E78C4;transform:scale(1.08)}
    /* The popover that appears above the arrow on hover */
    .scroll-top-popover{position:absolute;bottom:calc(100% + 10px);left:0;background:#0F1F36;border:1px solid rgba(75,160,232,.32);border-radius:10px;box-shadow:0 16px 40px rgba(0,0,0,.45);padding:6px;min-width:210px;opacity:0;visibility:hidden;transform:translateY(8px) scale(.96);transform-origin:bottom left;transition:opacity .2s,transform .2s,visibility .2s;pointer-events:none}
    .scroll-top-nav:hover .scroll-top-popover,.scroll-top-nav.st-pop-open .scroll-top-popover{opacity:1;visibility:visible;transform:translateY(0) scale(1);pointer-events:auto}
    /* Bridge a 10px gap between popover and button so hover doesn't flicker when crossing */
    .scroll-top-popover::after{content:'';position:absolute;left:0;right:0;bottom:-10px;height:10px}
    .scroll-top-popover-label{font-size:.55rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#64748B;padding:6px 10px 4px}
    .scroll-top-popover-link{display:block;padding:7px 12px;border-radius:6px;color:#CBD5E1;font-size:.78rem;font-weight:500;text-decoration:none;transition:all .12s;cursor:pointer;background:none;border:none;width:100%;text-align:left;font-family:inherit;line-height:1.3}
    .scroll-top-popover-link:hover{background:rgba(75,160,232,.10);color:#7BBEF5}
    /* "Learn More" sits below the section list and reads as an action item — orange accent so it pops as the CTA */
    .scroll-top-learnmore{color:#F59E0B!important;font-weight:600}
    .scroll-top-learnmore:hover{background:rgba(245,158,11,.12)!important;color:#FBBF24!important}
    .scroll-top-popover-divider{height:1px;background:rgba(75,160,232,.18);margin:4px 8px}
    .scroll-top-action{color:#94A3B8}
    /* On small screens, suppress the popover (hard to use without hover); arrow remains tappable */
    /* Nav Compass popover — mobile-adapted dimensions, bigger touch targets, fits screen edges */
    @media (max-width:767px){
      .scroll-top-popover{
        bottom:60px;left:0;
        min-width:220px;max-width:calc(100vw - 32px);
        padding:8px 0;
        transform-origin:bottom left;
      }
      .scroll-top-popover-link{
        padding:12px 18px;
        font-size:.85rem;
      }
      .scroll-top-popover-divider{margin:4px 0}
    }
    @keyframes btnBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
    ::-webkit-scrollbar{width:14px}::-webkit-scrollbar-track{background:#282E3A}::-webkit-scrollbar-thumb{background:#1E78C4;border-radius:7px;border:2px solid #282E3A}::-webkit-scrollbar-thumb:hover{background:#4BA0E8}
    /* Firefox — use the chunkier default-width rather than thin. */
    html{scrollbar-width:auto;scrollbar-color:#1E78C4 #282E3A}
    #progress{position:fixed;top:0;left:0;height:9px;background:linear-gradient(90deg,#1E78C4,#52A44A);z-index:100;transition:width .15s;box-shadow:0 1px 8px rgba(82,164,74,.35)}
    @keyframes fadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
    @keyframes pulse-border{0%,100%{box-shadow:0 0 0 0 rgba(30,120,196,.4)}50%{box-shadow:0 0 0 6px rgba(30,120,196,0)}}
    @keyframes floatUp{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
    /* Scroll-triggered fade-in: elements gently fade up as they enter view. One-shot per element. */
    .reveal-on-scroll{opacity:0;transform:translateY(16px);transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1);will-change:opacity,transform}
    .reveal-on-scroll.is-revealed{opacity:1;transform:translateY(0)}
    /* Hero is above-the-fold; skip the reveal effect to avoid a flash at load */
    #hero .reveal-on-scroll{opacity:1;transform:none}
    .pulse{animation:pulse-border 2s ease infinite}
    /* Slider attention pulse — soft glow around calculator sliders. Plays 2 cycles then stops,
       handing the visual baton off to the "Save as A" button which then pulses briefly. */
    @keyframes sliderPulseAnim{
      0%,100%{box-shadow:0 0 0 0 rgba(75,160,232,.0)}
      50%{box-shadow:0 0 0 5px rgba(75,160,232,.18)}
    }
    input[type=range].slider-pulse{animation:sliderPulseAnim 1.9s ease-in-out 2;border-radius:8px}
    /* "Save as A" button pulse — fires after the slider pulse finishes; plays twice then stops */
    @keyframes saveBtnPulseAnim{
      0%,100%{box-shadow:0 0 0 0 rgba(75,160,232,.0)}
      50%{box-shadow:0 0 0 6px rgba(75,160,232,.22)}
    }
    .save-btn-pulse{animation:saveBtnPulseAnim 1.6s ease-in-out 2}
    /* STACK PATTERN (left list + right panel) */
    .stack-item{cursor:pointer;transition:all .18s;border-radius:10px;border:1px solid rgba(30,120,196,.18)}
    .stack-item:hover{background:rgba(30,120,196,.08);border-color:rgba(30,120,196,.45)!important;transform:translateX(3px)}
    .stack-item.stack-active{background:rgba(30,120,196,.13);border-color:#1E78C4!important}
    .ca-inline-detail{display:none}
    /* Partner archetype cards run a bit taller than other stack-items so the LEFT column anchors the row height
       — that means the right detail panel resizes inside a stable frame instead of pushing the layout around when a different partner is clicked. */
    [id^="pt-"].stack-item{min-height:96px;padding:16px 16px}
    /* Mobile accordion: render the detail content inline beneath the tapped partner card so
       tap-target and revealed content stay adjacent. The desktop #pt-panel is hidden on mobile. */
    .pt-inline-detail{display:none}
    @media (max-width:767px){
      [id^="pt-"].stack-item{position:relative;min-height:0;padding-right:36px}
      /* Chevron indicator — rotates when the card is active */
      [id^="pt-"].stack-item::after{content:'⌄';position:absolute;top:14px;right:14px;color:#64748B;font-weight:800;transition:transform .2s,color .2s;line-height:1;font-size:1.1rem}
      [id^="pt-"].stack-item.stack-active::after{transform:rotate(180deg);color:#4BA0E8}
      /* Show inline detail when filled; clear empty ones to remove the spacing */
      .stack-item .pt-inline-detail:not(:empty){display:block;margin-top:14px;padding-top:14px;border-top:1px solid rgba(148,163,184,.18)}
      /* Hide the desktop detail panel on mobile (along with its column wrapper) */
      #pt-panel{display:none}
      /* Compliance vs. Advisory — mobile: render the tapped model's detail inline
         beneath its card. Hide the desktop side-panel only while a model is selected
         (when no model is selected it still shows the useful "Two Models" intro). */
      .ca-inline-detail:not(:empty){display:block;margin-top:14px;padding-top:14px;border-top:1px solid rgba(148,163,184,.18)}
      #ca-panel:not(:has(#ca-default)){display:none}
    }
    /* TACTIC CARDS */
    .tactic-card{transition:all .2s;cursor:pointer}
    .tactic-card:hover{border-color:rgba(30,120,196,.4)!important;background:rgba(30,120,196,.07)!important}
    .tactic-card.tactic-open{border-color:rgba(82,164,74,.45)!important;background:rgba(82,164,74,.05)!important}
    .tactic-expand{max-height:0;overflow:hidden;transition:max-height .32s ease,opacity .25s ease;opacity:0}
    .tactic-card.tactic-open .tactic-expand{max-height:200px;opacity:1}
    /* QUESTION CARDS */
    .q-card{transition:all .18s}
    .q-card:hover{transform:translateX(4px);border-color:rgba(30,120,196,.45)!important;box-shadow:3px 0 16px rgba(30,120,196,.12)}
    /* CALENDAR */
    .cal-month-hdr{transition:.15s;cursor:pointer;padding:2px 4px;border-radius:4px}
    .cal-month-hdr:hover{color:#7BBEF5!important}
    .cal-month-active{color:#4BA0E8!important;font-weight:800;background:rgba(30,120,196,.15);border-radius:4px}
    /* QUIZ */
    .quiz-choice{cursor:pointer;transition:all .15s;border:1px solid rgba(30,120,196,.25);background:rgba(30,120,196,.07);border-radius:10px;padding:12px 16px;text-align:left;width:100%;font-size:.85rem;color:#CBD5E1}
    .quiz-choice:hover:not(:disabled){background:rgba(30,120,196,.15);border-color:#1E78C4;transform:translateX(2px)}
    .quiz-choice.correct{background:rgba(82,164,74,.2)!important;border-color:#52A44A!important;color:#A3D49B}
    .quiz-choice.wrong{background:rgba(239,68,68,.15)!important;border-color:#EF4444!important;color:#FDA5A5}
    .quiz-choice:disabled{cursor:default;transform:none}
    /* Definition-style choice cards (Hard mode, term→def direction): wider, taller, single-column to fit prose */
    .quiz-choice-def{padding:14px 18px;font-size:.85rem;line-height:1.55}
    /* Difficulty picker — three large mode tiles with eyebrow + body + chip */
    .qd-card{cursor:pointer;border-radius:12px;border:1.5px solid rgba(30,120,196,.28);background:rgba(30,120,196,.06);padding:18px 18px 16px;text-align:left;width:100%;transition:all .18s;font-family:inherit;color:#CBD5E1;display:flex;flex-direction:column;gap:6px;min-height:172px}
    .qd-card:hover{border-color:#1E78C4;background:rgba(30,120,196,.12);transform:translateY(-2px);box-shadow:0 8px 22px rgba(30,120,196,.2)}
    .qd-card .qd-eyebrow{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7BBEF5}
    .qd-card .qd-title{font-size:1.05rem;font-weight:800;color:#E2E8F0}
    .qd-card .qd-blurb{font-size:.78rem;color:#94A3B8;line-height:1.5}
    .qd-card .qd-meta{margin-top:auto;padding-top:8px;border-top:1px solid rgba(255,255,255,.06);font-size:.7rem;color:#64748B;letter-spacing:.04em}
    .qd-card.qd-hard{border-color:rgba(217,119,6,.45);background:rgba(217,119,6,.06)}
    .qd-card.qd-hard:hover{border-color:#F59E0B;background:rgba(217,119,6,.12);box-shadow:0 8px 22px rgba(217,119,6,.22)}
    .qd-card.qd-hard .qd-eyebrow{color:#F59E0B}
    /* FORMULA HINT */
    .formula-hint{border:1.5px dashed rgba(30,120,196,.25);border-radius:10px;padding:14px;text-align:center;color:#94A3B8;font-size:.75rem;cursor:default;transition:border-color .2s}
    /* CALCULATOR */
    .calc-card{transition:box-shadow .3s,border-color .3s}
    .calc-card:hover{box-shadow:0 0 40px rgba(30,120,196,.14);border-color:rgba(30,120,196,.35)!important}
    .stat-box{transition:all .2s}
    .stat-box:hover{border-color:rgba(30,120,196,.5)!important;transform:translateY(-2px)}
    /* COMMIT CELEBRATE */
    @keyframes checkBounce{0%{transform:scale(.4)}55%{transform:scale(1.4)}80%{transform:scale(.88)}100%{transform:scale(1)}}
    @keyframes floatAway{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-55px) scale(1.6)}}
    .commit-celebrate{position:fixed;pointer-events:none;z-index:9999;font-size:1.6rem;animation:floatAway .75s ease forwards}
    .commit-item.checked .commit-star{animation:checkBounce .35s ease}
    /* THINGS TO TRY */
    .try-item{transition:all .2s;border-radius:10px;border:1px solid rgba(30,120,196,.12);padding:14px 16px;background:transparent;border-left:3px solid rgba(82,164,74,.15)}
    .try-item:hover{border-color:rgba(82,164,74,.4);border-left-color:#52A44A;background:rgba(82,164,74,.06);box-shadow:0 4px 20px rgba(82,164,74,.1);transform:translateX(2px)}
    .try-item:hover .try-arrow{color:#52A44A!important;transform:translateX(3px)}
    .try-item.try-done .try-check{background:#52A44A!important;border-color:#52A44A!important}
    .try-item.try-done .try-title,.try-item.try-done .text-slate-400{text-decoration:line-through;opacity:.45}
    .try-check{width:20px;height:20px;min-width:20px;border:2px solid rgba(82,164,74,.4);border-radius:4px;cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center;margin-top:1px}
    .try-check svg{opacity:0;transition:.15s}
    .try-item.try-done .try-check{background:#52A44A;border-color:#52A44A}
    .try-item.try-done .try-check svg{opacity:1}
    .try-arrow{transition:all .18s;color:#94A3B8;font-size:1rem;line-height:1;margin-top:1px;flex-shrink:0}
    .try-guide-btn{font-size:.62rem;font-weight:700;letter-spacing:.04em;padding:3px 8px;border-radius:20px;border:1px solid rgba(82,164,74,.4);color:#79C86E;background:transparent;cursor:pointer;white-space:nowrap;transition:all .15s;flex-shrink:0}
    .try-guide-btn:hover{background:rgba(82,164,74,.12);border-color:#52A44A}
    .try-guide-btn.guide-open{background:rgba(82,164,74,.12);border-color:#52A44A}
    .try-guide-expand{max-height:0;overflow:hidden;transition:max-height .35s ease,opacity .28s ease;opacity:0}
    .try-guide-expand.open{max-height:400px;opacity:1}
    /* AI PROMPT COPY */
    .copy-btn{transition:.15s;border-radius:6px;padding:3px 10px;font-size:.7rem;font-weight:600;border:1px solid rgba(30,120,196,.3);color:#4BA0E8;cursor:pointer;background:transparent;white-space:nowrap}
    .copy-btn:hover{background:rgba(30,120,196,.12);border-color:#1E78C4}
    .copy-btn.copied{color:#79C86E!important;border-color:rgba(82,164,74,.5)!important;background:rgba(82,164,74,.1)!important}
    /* FONT SIZE CONTROL — pill style */
    html.fs-1{font-size:18px!important}
    html.fs-2{font-size:20px!important}
    html.fs-3{font-size:22px!important}
    html.fs-4{font-size:25px!important}
    .fsz-ctrl{display:inline-flex;align-items:stretch;border:1px solid rgba(255,255,255,.22);border-radius:7px;overflow:hidden;margin-left:10px}
    .fsz-edge{cursor:pointer;border:none;color:#94A3B8;background:transparent;font-weight:900;transition:background .15s,color .15s;width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:1rem;line-height:1;padding:0;flex-shrink:0}
    .fsz-edge:hover:not([disabled]){background:rgba(30,120,196,.18);color:#CBD5E1}
    .fsz-edge[disabled]{opacity:.22;cursor:default;pointer-events:none}
    .fsz-center{font-size:.62rem;font-weight:700;color:#94A3B8;padding:0 7px;height:26px;display:flex;align-items:center;border-left:1px solid rgba(255,255,255,.16);border-right:1px solid rgba(255,255,255,.16);user-select:none;white-space:nowrap;letter-spacing:.05em;cursor:pointer;transition:color .15s}
    .fsz-center:hover{color:#CBD5E1}
    .fsz-ctrl:hover{border-color:rgba(75,160,232,.55)!important;transition:border-color .18s}
    /* THEME BUTTON */
    .theme-btn{cursor:pointer;border-radius:7px;border:1px solid rgba(255,255,255,.22);color:#94A3B8;background:transparent;transition:all .15s;padding:0 9px;height:26px;display:flex;align-items:center;margin-left:6px;font-size:.62rem;font-weight:700;letter-spacing:.05em;white-space:nowrap}
    .theme-btn:hover{border-color:rgba(75,160,232,.65);color:#CBD5E1}
    /* FADE GENTLY (no translate jump for P&L panel) */
    @keyframes fadeGently{from{opacity:0}to{opacity:1}}
    /* ── EMAIL GATE ── */
    #email-gate{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(7,15,28,.8);padding:16px;transition:opacity .25s}
    #email-gate.gate-show{display:flex}
    #email-gate.gate-hiding{opacity:0;pointer-events:none}
    @keyframes gateIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
    .gate-card{background:rgba(10,25,41,.97);border:1.5px solid rgba(30,120,196,.4);border-radius:18px;padding:44px 40px 32px;max-width:460px;width:100%;box-shadow:0 32px 90px rgba(0,0,0,.65),0 0 0 1px rgba(30,120,196,.08);text-align:center;animation:gateIn .45s cubic-bezier(.34,1.1,.64,1) forwards}
    .gate-eyebrow{font-size:.65rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#4BA0E8;margin-bottom:6px}
    .gate-title{font-size:1.3rem;font-weight:800;color:#E2E8F0;line-height:1.25;margin-bottom:6px}
    .gate-sub{font-size:.78rem;color:#94A3B8;margin-bottom:28px;line-height:1.5}
    .gate-input{width:100%;background:rgba(30,120,196,.08);border:1px solid rgba(30,120,196,.3);border-radius:9px;padding:12px 16px;color:#E2E8F0;font-size:.9rem;outline:none;transition:border-color .15s,background .15s;margin-bottom:10px;font-family:inherit;box-sizing:border-box}
    .gate-input:focus{border-color:#1E78C4;background:rgba(30,120,196,.13)}
    .gate-input::placeholder{color:#4B5563}
    .gate-msg{font-size:.76rem;min-height:18px;margin-bottom:8px;transition:.2s}
    .gate-msg.err{color:#F87171}.gate-msg.ok{color:#79C86E}
    .gate-submit{width:100%;background:linear-gradient(135deg,#1E78C4 0%,#1558A8 100%);color:#fff;font-weight:700;font-size:.9rem;padding:13px;border-radius:9px;border:none;cursor:pointer;transition:all .18s;letter-spacing:.03em;font-family:inherit}
    .gate-submit:hover:not(:disabled){background:linear-gradient(135deg,#4BA0E8 0%,#1E78C4 100%);transform:translateY(-1px);box-shadow:0 8px 24px rgba(30,120,196,.38)}
    .gate-submit:disabled{opacity:.45;cursor:default;transform:none}
    .gate-optin{font-size:.68rem;color:#64748B;margin-top:10px;line-height:1.5}
    .gate-skip{background:none;border:none;cursor:pointer;font-size:.75rem;color:#94A3B8;text-decoration:underline;padding:10px 8px;transition:color .15s;font-family:inherit;margin-top:6px;display:block;margin-left:auto;margin-right:auto}
    .gate-skip:hover{color:#CBD5E1}
    .gate-divider{height:1px;background:rgba(255,255,255,.07);margin:20px 0 14px}
    .gate-credit{font-size:.66rem;color:#64748B}
    .gate-credit a{color:#4BA0E8;text-decoration:none;transition:color .15s}
    .gate-credit a:hover{color:#7BBEF5}
    /* ── LEARN MORE MODAL ── */
    #learn-more-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(7,15,28,.8);padding:16px;transition:opacity .25s;overflow-y:auto}
    #learn-more-modal.lm-visible{display:flex}
    #learn-more-modal.lm-hiding{opacity:0;pointer-events:none}
    .lm-card{background:rgba(10,25,41,.97);border:1.5px solid rgba(30,120,196,.4);border-radius:18px;padding:36px 36px 28px;max-width:500px;width:100%;box-shadow:0 32px 90px rgba(0,0,0,.65),0 0 0 1px rgba(30,120,196,.08);position:relative;animation:gateIn .35s cubic-bezier(.34,1.1,.64,1) forwards;margin:auto}
    .lm-close{position:absolute;top:12px;right:14px;background:none;border:none;color:#64748B;cursor:pointer;font-size:1.5rem;padding:4px 10px;line-height:1;transition:color .15s;font-family:inherit}
    .lm-close:hover{color:#E2E8F0}
    .lm-eyebrow{font-size:.65rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#4BA0E8;margin-bottom:6px;text-align:center;display:block}
    /* When the eyebrow is rendered as an anchor (Learn More → "Get In Touch with Alex Drost" links to LinkedIn) */
    a.lm-eyebrow-link{text-decoration:none;transition:color .2s,letter-spacing .2s}
    a.lm-eyebrow-link:hover{color:#7BBEF5}
    .lm-title{font-size:1.35rem;font-weight:800;color:#E2E8F0;line-height:1.25;margin-bottom:6px;text-align:center}
    .lm-sub{font-size:.78rem;color:#94A3B8;margin-bottom:22px;line-height:1.5;text-align:center}
    .lm-row{display:flex;gap:10px}
    .lm-input{width:100%;background:rgba(30,120,196,.08);border:1px solid rgba(30,120,196,.3);border-radius:9px;padding:11px 14px;color:#E2E8F0;font-size:.88rem;outline:none;transition:border-color .15s,background .15s;margin-bottom:10px;font-family:inherit;box-sizing:border-box}
    .lm-input:focus{border-color:#1E78C4;background:rgba(30,120,196,.13)}
    .lm-input::placeholder{color:#4B5563}
    .lm-textarea{min-height:84px;resize:vertical;line-height:1.45}
    .lm-msg{font-size:.76rem;min-height:18px;margin-bottom:6px;transition:.2s;text-align:center}
    .lm-msg.err{color:#F87171}.lm-msg.ok{color:#79C86E}
    .lm-submit{width:100%;background:linear-gradient(135deg,#1E78C4 0%,#1558A8 100%);color:#fff;font-weight:700;font-size:.9rem;padding:13px;border-radius:9px;border:none;cursor:pointer;transition:all .18s;letter-spacing:.03em;font-family:inherit;margin-top:4px}
    .lm-submit:hover:not(:disabled){background:linear-gradient(135deg,#4BA0E8 0%,#1E78C4 100%);transform:translateY(-1px);box-shadow:0 8px 24px rgba(30,120,196,.38)}
    .lm-submit:disabled{opacity:.45;cursor:default;transform:none}
    .lm-success{text-align:center;padding:14px 0 6px}
    .lm-check{width:60px;height:60px;border-radius:50%;background:rgba(121,200,110,.15);border:2px solid #79C86E;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;animation:checkBounce .4s ease}
    .lm-check svg{width:28px;height:28px;stroke:#79C86E;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
    .lm-success-title{font-size:1.4rem;font-weight:800;color:#E2E8F0;margin-bottom:10px}
    .lm-success-msg{font-size:.92rem;color:#94A3B8;line-height:1.5;margin-bottom:8px;max-width:360px;margin-left:auto;margin-right:auto}
    .lm-redirect-msg{font-size:.78rem;color:#64748B;margin-top:14px;font-style:italic;transition:color .25s,opacity .25s}
    /* Learn More trigger button — footer / mobile style */
    .lm-trigger{background:linear-gradient(135deg,#D97706 0%,#B45309 100%);color:#fff;font-weight:700;font-size:.78rem;letter-spacing:.04em;padding:8px 16px;border-radius:8px;border:none;cursor:pointer;transition:all .18s;font-family:inherit;text-decoration:none;display:inline-block}
    .lm-trigger:hover{background:linear-gradient(135deg,#F59E0B 0%,#D97706 100%);transform:translateY(-1px);box-shadow:0 6px 18px rgba(217,119,6,.4)}
    .lm-trigger-footer{font-size:.86rem;padding:12px 24px;margin-bottom:14px}
    /* Learn More — header CTA, orange, same dimensions as theme-btn */
    .lm-trigger-nav{cursor:pointer;border-radius:7px;border:none;color:#fff;background:linear-gradient(135deg,#D97706 0%,#B45309 100%);transition:all .15s;padding:0 14px;height:26px;display:inline-flex;align-items:center;gap:5px;font-size:.62rem;font-weight:700;letter-spacing:.05em;white-space:nowrap;font-family:inherit;text-transform:uppercase;box-shadow:0 2px 8px rgba(217,119,6,.3)}
    .lm-trigger-nav:hover{background:linear-gradient(135deg,#F59E0B 0%,#D97706 100%);box-shadow:0 4px 14px rgba(217,119,6,.5);transform:translateY(-1px)}
    /* Right-side nav slot — utilities (font/theme) and Learn More are BOTH visible at all times so
       the user never loses access to font sizing or theme toggle when they need it most (after scrolling). */
    /* Scoped to md+ so the ID specificity doesn't fight Tailwind's .hidden class on mobile,
       which was forcing the font-size + theme controls into the top bar on small screens. */
    @media (min-width: 768px){#nav-right-slot{display:flex;align-items:center;justify-content:flex-end;gap:32px}}
    .nav-state{display:flex;align-items:center}
    /* Horizontally-arranged utilities — Font, Light Mode, and Learn More all sit inline so they read as a single row of buttons. */
    .utility-stack{display:flex;flex-direction:row;gap:8px;align-items:center}
    .utility-stack .fsz-ctrl{margin-left:0}
    .utility-stack .theme-btn{margin-left:0}
    /* Partner Objection Simulator — flippable card with "Partner Says" front, "You Say" back */
    .obj-card{position:relative;cursor:pointer;border-radius:10px;border:1px solid rgba(239,68,68,.22);background:rgba(239,68,68,.05);padding:14px 16px;transition:all .2s;min-height:140px;display:flex;flex-direction:column}
    .obj-card:hover{border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.08);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.25)}
    .obj-card.flipped{border-color:rgba(82,164,74,.4)!important;background:rgba(82,164,74,.06)!important}
    .obj-card.flipped:hover{background:rgba(82,164,74,.10)!important;border-color:rgba(82,164,74,.55)!important}
    .obj-eyebrow{font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
    .obj-says{color:#FCA5A5}
    .obj-card.flipped .obj-says-eyebrow{display:none}
    .obj-says-eyebrow{color:#FCA5A5}
    .obj-response-eyebrow{color:#79C86E;display:none}
    .obj-card.flipped .obj-response-eyebrow{display:block}
    .obj-text{font-size:.85rem;line-height:1.5;color:#E2E8F0;font-style:italic}
    .obj-card.flipped .obj-text-says{display:none}
    .obj-card.flipped .obj-text-response{display:block}
    .obj-text-response{display:none;color:#CBD5E1}
    .obj-flip-hint{font-size:.65rem;color:#64748B;margin-top:auto;padding-top:10px;display:flex;align-items:center;gap:4px}
    .obj-card.flipped .obj-flip-hint{color:#79C86E}
    /* Glossary deep-link copy button on each term card */
    .term-link-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:5px;border:1px solid rgba(30,120,196,.3);background:rgba(30,120,196,.05);color:#7BBEF5;cursor:pointer;transition:all .15s;flex-shrink:0;padding:0}
    .term-link-btn:hover{background:rgba(30,120,196,.15);border-color:#1E78C4;color:#4BA0E8}
    .term-link-btn.copied{background:rgba(82,164,74,.15)!important;border-color:#52A44A!important;color:#79C86E!important}
    /* Calendar mobile vertical view — show stacked rows on small screens (< 640px) instead of the wide horizontal table */
    .cal-vertical{display:none}
    @media (max-width: 640px){
      .cal-horizontal{display:none!important}
      .cal-vertical{display:block}
    }
    .cal-v-row{display:grid;grid-template-columns:54px 1fr 1fr 1fr;gap:6px;align-items:center;padding:6px 4px;border-bottom:1px solid rgba(255,255,255,.05);cursor:pointer;transition:background .15s,border-color .15s}
    .cal-v-row:hover{background:rgba(30,120,196,.06)}
    .cal-v-row.active{background:rgba(30,120,196,.08);outline:1px solid rgba(30,120,196,.4);border-radius:6px}
    .cal-v-month{font-size:.8rem;font-weight:700;color:#CBD5E1}
    .cal-v-cell{height:22px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:700}
    .cal-v-legend{display:grid;grid-template-columns:54px 1fr 1fr 1fr;gap:6px;padding:0 4px 6px;font-size:.6rem;font-weight:700;color:#64748B;letter-spacing:.05em;text-transform:uppercase}
    /* Calculator typeable inputs — small number fields synced with sliders. Border lives on the
       wrapping group so the $/K/% prefix and suffix sit inside the same visual control. */
    .calc-num-group{display:inline-flex;align-items:center;border:1px solid rgba(30,120,196,.25);border-radius:5px;padding:1px 6px;background:transparent;transition:border-color .15s,background .15s;line-height:1.2}
    .calc-num-group:hover{border-color:rgba(30,120,196,.5)}
    .calc-num-group:focus-within{border-color:#4BA0E8;background:rgba(30,120,196,.06)}
    .calc-num-pre,.calc-num-suf{color:#94A3B8;font-weight:700;font-size:inherit;pointer-events:none;user-select:none}
    .calc-num-pre{padding-right:2px}
    .calc-num-suf{padding-left:2px}
    .calc-num{font:inherit;font-weight:700;color:#4BA0E8;background:transparent;border:none;padding:0 2px;width:48px;text-align:right;outline:none;-moz-appearance:textfield}
    .calc-num::-webkit-outer-spin-button,.calc-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
    /* Clickable, hover-highlighted header for the What-If card — toggles the comparison open/closed */
    .whatif-trigger{transition:background .15s}
    .whatif-trigger:hover{background:rgba(30,120,196,.06)}
    .whatif-trigger:focus-visible{outline:2px solid #4BA0E8;outline-offset:-2px}
    /* Mobile touch targets — bump font/theme controls and the hamburger to ~44px to meet accessibility minimum */
    @media (max-width: 768px) {
      .fsz-edge { width: 44px; height: 44px; font-size: 1.25rem; }
      .fsz-center { height: 44px; padding: 0 14px; font-size: .72rem; }
      .theme-btn { height: 44px; padding: 0 18px; font-size: .72rem; }
      .gate-skip { padding: 14px 12px; font-size: .8rem; }
    }
    /* Hero Learn More — prominent orange filled CTA */
    .lm-trigger-hero{background:linear-gradient(135deg,#D97706 0%,#B45309 100%);color:#fff!important;font-weight:600;padding:14px 28px;border-radius:8px;border:none;cursor:pointer;transition:all .18s;font-family:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:8px;font-size:.875rem;box-shadow:0 4px 20px rgba(217,119,6,.35);line-height:1.25}
    .lm-trigger-hero:hover{background:linear-gradient(135deg,#F59E0B 0%,#D97706 100%);transform:translateY(-1px);box-shadow:0 6px 26px rgba(217,119,6,.5)}
    /* ── SHARE MODAL ── */
    #share-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(7,15,28,.8);padding:16px;transition:opacity .25s;overflow-y:auto}
    #share-modal.share-visible{display:flex}
    #share-modal.share-hiding{opacity:0;pointer-events:none}
    .share-card{background:rgba(10,25,41,.97);border:1.5px solid rgba(30,120,196,.4);border-radius:18px;padding:36px 36px 28px;max-width:440px;width:100%;box-shadow:0 32px 90px rgba(0,0,0,.65),0 0 0 1px rgba(30,120,196,.08);position:relative;animation:gateIn .35s cubic-bezier(.34,1.1,.64,1) forwards;margin:auto}
    .share-close{position:absolute;top:12px;right:14px;background:none;border:none;color:#64748B;cursor:pointer;font-size:1.5rem;padding:4px 10px;line-height:1;transition:color .15s;font-family:inherit}
    .share-close:hover{color:#E2E8F0}
    .share-eyebrow{font-size:.65rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#4BA0E8;margin-bottom:6px;text-align:center}
    .share-title{font-size:1.35rem;font-weight:800;color:#E2E8F0;line-height:1.25;margin-bottom:6px;text-align:center}
    .share-sub{font-size:.78rem;color:#94A3B8;margin-bottom:22px;line-height:1.5;text-align:center}
    .share-options{display:flex;flex-direction:column;gap:10px}
    .share-btn{display:flex;align-items:center;gap:12px;padding:12px 16px;background:rgba(30,120,196,.08);border:1px solid rgba(30,120,196,.3);border-radius:9px;color:#E2E8F0;font-size:.88rem;font-weight:600;cursor:pointer;transition:all .18s;font-family:inherit;text-align:left;width:100%}
    .share-btn:hover{background:rgba(30,120,196,.14);border-color:#1E78C4;transform:translateX(2px)}
    .share-btn svg{flex-shrink:0}
    .share-btn.share-linkedin svg{color:#0A66C2}
    .share-btn.share-email svg{color:#FB923C}
    .share-btn.share-copy svg{color:#79C86E}
    .share-btn.copied{background:rgba(82,164,74,.15)!important;border-color:#52A44A!important;color:#A3D49B!important}
    .share-trigger{background:rgba(30,120,196,.12);color:#4BA0E8;font-weight:700;font-size:.78rem;letter-spacing:.04em;padding:8px 16px;border-radius:8px;border:1px solid rgba(30,120,196,.4);cursor:pointer;transition:all .18s;font-family:inherit;display:inline-flex;align-items:center;gap:6px}
    .share-trigger:hover{background:rgba(30,120,196,.18);border-color:#1E78C4;transform:translateY(-1px);box-shadow:0 6px 18px rgba(30,120,196,.2)}
    .share-trigger-prom{background:linear-gradient(135deg,#1E78C4 0%,#1558A8 100%);color:#fff;border:none;font-size:.86rem;padding:12px 24px;box-shadow:0 4px 18px rgba(30,120,196,.3)}
    /* ── SUGGEST EDIT — subtle footer text link + modal that reuses .lm-card styling ── */
    .suggest-link{display:inline-flex;align-items:center;gap:6px;background:none;border:none;padding:6px 10px;margin:0;color:#64748B;font-size:.72rem;font-weight:600;letter-spacing:.02em;cursor:pointer;font-family:inherit;border-radius:6px;transition:color .15s,background .15s;text-decoration:none}
    .suggest-link:hover{color:#7BBEF5;background:rgba(30,120,196,.06)}
    .suggest-link svg{width:12px;height:12px;flex-shrink:0;opacity:.85}
    /* Vertical separator between footer utility links */
    .footer-link-divider{display:inline-block;width:1px;height:14px;background:rgba(148,163,184,.35);margin:0 4px;vertical-align:middle}
    /* SITE SEARCH — replaces the section nav as the primary in-nav affordance.
       The trigger is styled like a search input but behaves as a button that opens the modal. */
    .search-bar-trigger{cursor:pointer;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);border-radius:9px;padding:7px 12px;display:flex;align-items:center;gap:10px;width:100%;max-width:380px;font-family:inherit;color:#94A3B8;transition:all .15s}
    .search-bar-trigger:hover{border-color:rgba(75,160,232,.5);background:rgba(75,160,232,.06);color:#7BBEF5}
    .search-bar-trigger svg{width:15px;height:15px;color:#7BBEF5;flex-shrink:0;transition:color .15s}
    .search-bar-trigger .search-bar-text{flex:1;text-align:left;font-size:.82rem;color:#94A3B8;font-weight:500;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s}
    .search-bar-trigger:hover .search-bar-text{color:#CBD5E1}
    .search-bar-trigger kbd{font-family:inherit;font-size:.6rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:4px;padding:1px 6px;color:#94A3B8;letter-spacing:.04em;font-weight:700;flex-shrink:0}
    /* Mobile-only compact search button (icon only) */
    .search-trigger-mobile{cursor:pointer;background:transparent;border:none;padding:6px;color:#94A3B8;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .15s}
    .search-trigger-mobile:hover{color:#7BBEF5;background:rgba(75,160,232,.06)}
    .search-trigger-mobile svg{width:18px;height:18px}
    /* Search modal */
    #search-modal{position:fixed;inset:0;z-index:120;background:rgba(7,15,28,.82);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:none;align-items:flex-start;justify-content:center;padding:80px 16px 20px;animation:fadeIn .18s ease}
    #search-modal.search-visible{display:flex}
    .search-card{width:100%;max-width:640px;background:#0F1F36;border:1px solid rgba(75,160,232,.32);border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.55),0 0 0 1px rgba(75,160,232,.08);max-height:calc(100vh - 100px);display:flex;flex-direction:column;overflow:hidden}
    .search-header{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid rgba(75,160,232,.18)}
    .search-icon-lg{width:18px;height:18px;color:#7BBEF5;flex-shrink:0}
    #search-input{flex:1;background:transparent;border:none;outline:none;color:#E2E8F0;font-family:inherit;font-size:1.05rem;font-weight:500;min-width:0}
    #search-input::placeholder{color:#64748B}
    .search-close{background:none;border:none;cursor:pointer;color:#64748B;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:.15s;flex-shrink:0}
    .search-close:hover{background:rgba(75,160,232,.1);color:#E2E8F0}
    .search-close svg{width:16px;height:16px}
    .search-meta{padding:10px 18px;font-size:.7rem;color:#64748B;border-bottom:1px solid rgba(75,160,232,.1);font-weight:500}
    .search-results{flex:1;overflow-y:auto;padding:6px;scroll-behavior:smooth}
    .search-result{padding:10px 14px;border-radius:8px;cursor:pointer;display:flex;flex-direction:column;gap:5px;transition:background .12s;border:1px solid transparent}
    .search-result:hover,.search-result.search-active{background:rgba(75,160,232,.10);border-color:rgba(75,160,232,.18)}
    .search-result-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
    .search-result-badge{font-size:.58rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:4px;background:rgba(75,160,232,.10);color:#7BBEF5;border:1px solid rgba(75,160,232,.25);white-space:nowrap}
    .search-result-title{font-weight:600;color:#E2E8F0;font-size:.92rem;line-height:1.3}
    .search-result-snippet{font-size:.74rem;color:#94A3B8;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .search-result mark{background:rgba(245,158,11,.30);color:#FCD34D;padding:0 3px;border-radius:3px;font-weight:600}
    .search-empty{padding:24px;text-align:center;color:#64748B;font-size:.85rem}
    .search-footer{display:flex;gap:14px;justify-content:flex-end;padding:9px 16px;border-top:1px solid rgba(75,160,232,.10);font-size:.62rem;color:#64748B;font-weight:600;letter-spacing:.04em;flex-wrap:wrap}
    .search-shortcut{display:inline-flex;align-items:center;gap:5px}
    .search-shortcut kbd{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:4px;padding:1px 5px;font-family:inherit;font-size:.62rem;color:#94A3B8;line-height:1.4}
    /* Brief pulse used after the user activates a search result and we scroll to a target */
    .search-target-pulse{animation:searchPulseAnim 1.6s ease-out}
    @keyframes searchPulseAnim{
      0%{box-shadow:0 0 0 4px rgba(245,158,11,.55),0 0 24px rgba(245,158,11,.3)}
      100%{box-shadow:0 0 0 4px rgba(245,158,11,0),0 0 24px rgba(245,158,11,0)}
    }
    /* Nav subtitle: small "Created by Alex Drost" line below the brand. Author link is subtle until hovered. */
    .nav-subtitle{font-size:.62rem;color:#64748B;font-weight:500;letter-spacing:.02em;margin-top:3px}
    .nav-subtitle a{color:#94A3B8;text-decoration:none;transition:color .2s}
    .nav-subtitle a:hover{color:#7BBEF5}
    #suggest-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(7,15,28,.8);padding:16px;transition:opacity .25s;overflow-y:auto}
    #suggest-modal.sg-visible{display:flex}
    #suggest-modal.sg-hiding{opacity:0;pointer-events:none}
    .sg-optional-label{font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#64748B;margin:14px 0 6px;text-align:left}
    .share-trigger-prom:hover{background:linear-gradient(135deg,#4BA0E8 0%,#1E78C4 100%);box-shadow:0 6px 22px rgba(30,120,196,.4)}
    /* Floating Share FAB — persistent in the upper-right (below the nav). Z-index is below the nav (50)
       so the mobile menu, when expanded, covers it cleanly. */
    #share-fab{position:fixed;top:90px;right:24px;width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:40;background:linear-gradient(135deg,#1E78C4 0%,#1558A8 100%);border:none;box-shadow:0 6px 22px rgba(30,120,196,.45),0 0 0 1px rgba(30,120,196,.4);color:#fff;transition:transform .18s,box-shadow .18s;font-family:inherit}
    #share-fab:hover{transform:scale(1.08);box-shadow:0 10px 32px rgba(30,120,196,.6),0 0 0 1px rgba(75,160,232,.6)}
    #share-fab svg{width:20px;height:20px}
    #share-fab .share-fab-label{position:absolute;right:60px;background:rgba(7,15,28,.95);color:#E2E8F0;font-size:.72rem;font-weight:600;padding:6px 12px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;transform:translateX(6px);border:1px solid rgba(30,120,196,.4)}
    #share-fab:hover .share-fab-label{opacity:1;transform:translateX(0)}
    /* Mobile: hide the Share FAB. Section 06 has its own prominent Share button + the footer
       has another, so the FAB just competes with the Nav Compass for thumb attention on phones. */
    @media (max-width:639px){
      #share-fab{display:none}
    }
    /* ══════════ TECH STACK (Section 05) ══════════ */
    /* Filter pills — teal-themed variant of the glossary filters */
    .filter-btn-tools{padding:6px 14px;border-radius:999px;font-size:.8rem;font-weight:600;background:transparent;border:1px solid rgba(20,184,166,.3);color:#94A3B8;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
    .filter-btn-tools:hover{color:#5EEAD4;border-color:rgba(20,184,166,.5)}
    .filter-btn-tools.active{background:rgba(20,184,166,.12);border-color:#14B8A6;color:#5EEAD4}
    /* Category subheader shown only in the grouped "All Tools" view */
    .tools-cat-header{font-size:.68rem;font-weight:700;letter-spacing:.12em;color:#5EEAD4;text-transform:uppercase;margin:28px 0 10px;padding-bottom:6px;border-bottom:1px solid rgba(20,184,166,.25)}
    .tools-cat-header:first-child{margin-top:0}
    /* Tool rows — compact horizontal layout, 2-up on desktop, 1-up on mobile */
    .tools-row-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
    @media (max-width:767px){.tools-row-grid{grid-template-columns:1fr}}
    .tool-row{position:relative;padding:12px 14px 12px 18px;background:rgba(255,255,255,.025);border:1px solid rgba(20,184,166,.15);border-radius:8px;cursor:pointer;transition:background .15s,border-color .15s}
    .tool-row:hover{background:rgba(20,184,166,.06);border-color:rgba(20,184,166,.35)}
    .tool-row::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;background:#14B8A6;border-radius:0 2px 2px 0;opacity:.6;transition:opacity .15s}
    .tool-row:hover::before{opacity:1}
    .tool-row .tool-name{font-weight:700;font-size:.9rem;color:#E2E8F0;margin-right:8px}
    .tool-row .tool-cat-tag{display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5EEAD4;background:rgba(20,184,166,.12);border:1px solid rgba(20,184,166,.3);padding:1px 6px;border-radius:3px;vertical-align:middle}
    .tool-row .tool-desc{font-size:.78rem;color:#94A3B8;line-height:1.45;margin-top:4px}
    /* "Why BD &amp; growth care" expansion — shown when .tool-expanded is added to the row */
    .tool-row .tool-why{display:none;margin-top:10px;padding:10px 12px;background:rgba(20,184,166,.08);border-left:2px solid #14B8A6;border-radius:0 6px 6px 0;font-size:.78rem;color:#C8F0E8;line-height:1.5}
    .tool-row.tool-expanded .tool-why{display:block;animation:fadeIn .18s ease}
    .tool-row .tool-why-label{display:block;font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5EEAD4;margin-bottom:3px}
    .tool-row.tool-expanded{background:rgba(20,184,166,.04);border-color:rgba(20,184,166,.32)}
    .tool-row.tool-expanded::before{opacity:1}
    /* Empty state */
    .tools-empty{text-align:center;padding:32px 16px;color:#64748B;font-size:.85rem}
    /* Search target pulse — make the tech-stack section anchorable from search too */
    #tech-stack{scroll-margin-top:90px}

    /* (Copy & right-click protection intentionally removed — viewers should be able to copy/paste freely.) */

    /* ══════════ PRINT STYLESHEET ══════════ */
    @media print {
      /* Reset visual chrome — flatten shadows, transitions, animations */
      *, *::before, *::after {
        background-image: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
        transition: none !important;
        animation: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }
      @page { margin: 0.75in; }
      html, body {
        background: white !important;
        color: #1e293b !important;
        font-family: 'Inter', system-ui, sans-serif !important;
        font-size: 11pt !important;
      }
      /* Hide interactive UI chrome */
      nav,
      #email-gate,
      #learn-more-modal,
      #share-modal,
      #suggest-modal,
      .suggest-link,
      #scroll-top-nav,
      #progress,
      #fsz-ctrl,
      .theme-btn,
      .nav-state,
      #nav-right-slot,
      .lm-trigger, .lm-trigger-hero, .lm-trigger-nav, .lm-trigger-footer,
      .copy-btn,
      .quiz-choice,
      #quiz-panel,
      #cat-filters,
      #gloss-search,
      .filter-btn,
      .try-guide-btn,
      .gate-skip,
      .gate-divider,
      .click-hint,
      .why-hint,
      .commit-star,
      .try-check,
      .accordion-icon,
      .lm-close,
      .share-close,
      .share-trigger,
      .share-trigger-prom,
      .pe-tag, .firm-tag,
      iframe,
      .ai-theme-hdr svg,
      .ai-theme-block .copy-btn,
      .lm-trigger-hero {
        display: none !important;
      }
      /* Reveal all collapsed/dynamic content for print */
      .accordion-body,
      .term-expand,
      .tactic-expand,
      .try-guide-expand,
      .ai-theme-body,
      .expand-panel,
      .spec-detail,
      .cal-context,
      /* Flip cards on screen use a crossfade; for print, show both faces stacked in document flow */
      .flip-card{height:auto!important}
      .flip-inner{position:static!important}
      .flip-front,.flip-back{position:static!important;opacity:1!important;visibility:visible!important;display:block!important;page-break-inside:avoid;margin-bottom:.5rem;transition:none!important}
      .flip-hint{display:none!important}
      .iv-card .iv-detail {
        display: block !important;
        max-height: none !important;
        opacity: 1 !important;
        visibility: visible !important;
      }
      /* Sections: light backgrounds, controlled spacing */
      section, footer {
        background: white !important;
        padding: 12pt 0 !important;
        page-break-after: auto;
      }
      section { page-break-inside: auto; }
      /* Force a page break before each major section so they print cleanly */
      #firm-basics, #service-mix, #decisions, #glossary, #next-steps {
        page-break-before: always;
      }
      /* Hero is page 1 */
      #hero { padding: 0 !important; }
      .section-nav-card { display: none !important; }
      /* Headings */
      h1, h2, h3, h4, h5 {
        page-break-after: avoid;
        page-break-inside: avoid;
        color: #0f172a !important;
      }
      h1 { font-size: 22pt !important; }
      h2 { font-size: 18pt !important; color: #1558a8 !important; }
      h3 { font-size: 14pt !important; color: #1558a8 !important; }
      /* Cards / boxes: light borders only */
      .card, .card-blue, .card-green, .stat-box,
      .callout, .callout-green, .callout-warn,
      .term-card, .commit-item, .try-item, .ai-theme-block,
      .tactic-card, .q-card, .spec-btn, .formula-pill, .pl-row,
      .firm-badge {
        background: white !important;
        border: 1px solid #cbd5e1 !important;
        color: #1e293b !important;
        page-break-inside: avoid;
      }
      .term-card.expanded {
        background: #f8fafc !important;
        border-color: #94a3b8 !important;
      }
      /* Override dark text colors */
      .text-slate-100, .text-slate-200, .text-slate-300 { color: #1e293b !important; }
      .text-slate-400, .text-slate-500, .text-slate-600 { color: #475569 !important; }
      /* Override most inline color: styles to readable dark */
      [style*="color:#E2E8F0"], [style*="color:#CBD5E1"] { color: #1e293b !important; }
      [style*="color:#94A3B8"], [style*="color:#64748B"] { color: #475569 !important; }
      /* Keep brand-color heading accents readable in print */
      [style*="color:#4BA0E8"], [style*="color:#7BBEF5"] { color: #1558a8 !important; }
      [style*="color:#79C86E"], [style*="color:#52A44A"], [style*="color:#A3D49B"] { color: #2d6b2a !important; }
      [style*="color:#FBBF24"], [style*="color:#F59E0B"] { color: #92400e !important; }
      [style*="color:#F87171"], [style*="color:#FCA5A5"] { color: #b91c1c !important; }
      [style*="color:#C084FC"] { color: #6b21a8 !important; }
      /* Glossary: stack on one column for printing, ensure all terms visible */
      #gloss-grid {
        display: block !important;
      }
      #gloss-grid .term-card {
        margin-bottom: 8pt;
        padding: 10pt !important;
        page-break-inside: avoid;
      }
      /* Calendar table */
      #cal-grid table { width: 100% !important; }
      .cal-cell { border: 1px solid #cbd5e1 !important; color: #1e293b !important; }
      .intensity-0 { background: #f1f5f9 !important; }
      .intensity-1 { background: #dbeafe !important; }
      .intensity-2 { background: #93c5fd !important; }
      .intensity-3 { background: #1e78c4 !important; color: white !important; }
      /* Layout containers: full width */
      .max-w-3xl, .max-w-5xl, .max-w-6xl { max-width: 100% !important; padding: 0 !important; }
      /* Show URLs after links (except internal anchors and javascript:) */
      a[href]:not([href^="#"]):not([href^="javascript:"]):not([href^="data:"])::after {
        content: " <" attr(href) ">";
        font-size: 0.8em;
        color: #64748b;
        word-break: break-all;
        font-weight: normal;
      }
      /* Print a footer URL */
      footer::before {
        content: "thebusinessofaccounting.com";
        display: block;
        text-align: center;
        font-weight: 700;
        color: #1558a8;
        margin-bottom: 8pt;
      }
      /* Don't show the dynamic firm-panel (empty without click) */
      #firm-panel:empty, #firm-panel-content:empty { display: none !important; }
      /* Sliders are useless on paper — replace with the current value as text */
      input[type=range] { display: none !important; }
      /* Hide the "If utilization drops 5%" warning callout — meaningful only with live calc */
      [style*="background:rgba(251,191,36,.06)"] { display: none !important; }
      /* Hide calc insight italic line */
      #calc-insight { display: none !important; }
      /* Tighten spacing globally */
      .py-20 { padding-top: 18pt !important; padding-bottom: 18pt !important; }
      .py-12, .py-10 { padding-top: 14pt !important; padding-bottom: 14pt !important; }
      .mb-10, .mb-8 { margin-bottom: 12pt !important; }
    }

    /* ══════════ prefers-reduced-motion ══════════
       Honor user-level motion-reduction preferences. We strip infinite loops, bouncy
       keyframes, hover-lift transforms, and the hero parallax (if enabled) — but keep
       fade-ins (just faster/simpler) because they're useful navigational cues, not
       vestibular triggers. Theme-switch transitions and modal display stay too. */
    @media (prefers-reduced-motion: reduce){
      /* Kill infinite loops and bouncy keyframes */
      .pulse,
      input[type=range].slider-pulse,
      .save-btn-pulse,
      .scroll-top-nav.visible{
        animation: none !important;
      }
      /* Strip commit-celebrate floats */
      .commit-celebrate{display:none !important}
      .commit-item.checked .commit-star{animation:none !important}
      /* Strip the bouncy modal entry (translateY + scale via gateIn keyframe) — instant appearance is fine for reduced-motion */
      .gate-card,.lm-card,.share-card{animation:none !important}
      /* Strip hero parallax if it ends up being enabled later */
      #hero::before{transform:none !important}
      /* Strip hover translate transforms (kept hover color/border feedback) */
      .clickable:hover,
      .pl-row:hover,
      .stack-item:hover,
      .q-card:hover,
      .commit-item:hover,
      .try-item:hover,
      .quiz-choice:hover:not(:disabled),
      .qd-card:hover,
      .stat-box:hover,
      .flip-card:hover,
      .iv-card:hover,
      .obj-card:hover,
      .section-nav-card:hover,
      .lm-trigger:hover,
      .lm-trigger-hero:hover,
      .lm-trigger-nav:hover,
      .share-btn:hover,
      .share-trigger:hover,
      .gate-submit:hover:not(:disabled),
      .lm-submit:hover:not(:disabled){
        transform: none !important;
      }
      /* Keep scroll fade-ins (per user direction) — instant, no translate */
      .reveal-on-scroll{transition:opacity .25s ease;transform:none}
      .reveal-on-scroll.is-revealed{transform:none}
      /* Kill the searchPulseAnim halo loop */
      .search-target-pulse{animation:none !important}
    }

/* ── Part 2: v1 mobile-fix stylesheet ── */
  /* Mobile fix: on touch devices there is no true hover — a tap triggers :hover and the
     tooltip sticks. Suppress hover-triggered tooltips on touch only. Firm badges still work
     on mobile via their tap mechanism (.clicked class). Desktop hover is unaffected. */
  @media (hover: none){
    .firm-badge[data-tip]:hover::after,
    .firm-badge[data-tip]:hover::before,
    .firm-badge[data-tip].clicked::after,
    .firm-badge[data-tip].clicked::before,
    .firm-tag[data-detail]:hover::after,
    .firm-tag[data-detail]:hover::before{ content: none; }
  }
  /* Mobile fix: real (JS-rendered) firm tooltip — replaces the CSS pseudo-element tooltip
     on touch so it can be clamped on-screen and paints immediately. */
  .firm-tip-pop{
    position:absolute; z-index:1000; width:280px; max-width:calc(100vw - 32px);
    background:rgba(7,15,28,.97); color:#E2E8F0; font-size:.72rem; font-weight:400;
    line-height:1.5; letter-spacing:.01em; padding:10px 14px; border-radius:8px;
    border:1px solid rgba(30,120,196,.45); box-shadow:0 6px 24px rgba(0,0,0,.55);
    pointer-events:none; text-align:left;
  }
  /* Mobile fix: bring the nav hamburger + search icon up to a 44px touch target. */
  @media (max-width: 768px){
    #mobile-menu-btn{ min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; }
    .search-trigger-mobile{ min-width:44px; min-height:44px; }
  }

/* ═══════════════════════════════════════════════════════════════════════════
   v1.5 MULTI-PAGE CHROME — new in v1.5. Everything above this line is v1's CSS,
   moved verbatim from index.html. Everything below styles the new navigation
   (header section row, dropdowns, mobile drawer, section tabs, breadcrumb,
   prev/next, home section cards, footer sitemap) using v1's existing tokens.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{--boa-hdr-h:74px}
@media (min-width:768px){:root{--boa-hdr-h:116px}}

/* Skip link */
.skip-link{position:absolute;left:12px;top:-60px;z-index:200;background:#1E78C4;color:#fff;font-weight:700;font-size:.85rem;padding:10px 16px;border-radius:8px;text-decoration:none;transition:top .15s}
.skip-link:focus{top:12px}

/* Visible focus for keyboard users on new chrome */
.hn-link:focus-visible,.hn-caret:focus-visible,.hn-menu a:focus-visible,.stab:focus-visible,.bc a:focus-visible,.pn-card:focus-visible,
.mdrawer a:focus-visible,.mdrawer button:focus-visible,#mobile-menu-btn:focus-visible,.home-sec-card:focus-visible,.home-tool:focus-visible,
.footer-sitemap a:focus-visible,#nav-brand:focus-visible,.hub-card:focus-visible{outline:2px solid #4BA0E8;outline-offset:2px;border-radius:6px}

/* Spacer under the fixed header */
.hdr-spacer{height:var(--boa-hdr-h)}
body[data-page="home"] .hdr-spacer{height:calc(var(--boa-hdr-h) - 74px)}
/* Anchor jumps land below the taller header */
section[id]{scroll-margin-top:calc(var(--boa-hdr-h) + 16px)}

/* ── Header row 2: section links ── */
.hn-row{border-top:1px solid rgba(255,255,255,.06)}
.hn-list{display:flex;align-items:stretch;justify-content:center;gap:2px;height:42px;list-style:none;margin:0;padding:0}
.hn-item{position:relative;display:flex;align-items:center}
.hn-link{display:flex;align-items:center;gap:6px;height:100%;padding:0 9px;color:#94A3B8;font-size:.78rem;font-weight:600;text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap;transition:color .15s,border-color .15s}
.hn-link:hover{color:#4BA0E8}
.hn-link.is-current{color:#4BA0E8;border-bottom-color:#1E78C4}
.hn-num{font-size:.6rem;font-weight:800;letter-spacing:.08em;color:#64748B}
.hn-link.is-current .hn-num,.hn-link:hover .hn-num{color:#7BBEF5}
.hn-caret{display:flex;align-items:center;justify-content:center;width:22px;height:26px;margin-left:-6px;border-radius:5px;background:none;border:none;color:#64748B;cursor:pointer;font-family:inherit}
.hn-caret:hover,.hn-item.open .hn-caret{color:#7BBEF5;background:rgba(75,160,232,.08)}
.hn-caret svg{width:12px;height:12px;transition:transform .15s}
.hn-item.open .hn-caret svg{transform:rotate(180deg)}
.hn-menu{position:absolute;top:calc(100% - 2px);left:0;min-width:240px;background:#0F1F36;border:1px solid rgba(75,160,232,.32);border-radius:10px;box-shadow:0 16px 40px rgba(0,0,0,.45);padding:6px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s,transform .16s,visibility .16s;z-index:60}
.hn-item.open .hn-menu{opacity:1;visibility:visible;transform:none;transition:opacity .16s,transform .16s,visibility 0s}
@media (hover:hover){.hn-item.has-menu:hover .hn-menu{opacity:1;visibility:visible;transform:none;transition:opacity .16s,transform .16s,visibility 0s}}
.hn-menu a{display:block;padding:7px 12px;border-radius:6px;color:#CBD5E1;font-size:.78rem;font-weight:500;text-decoration:none;line-height:1.3;transition:background .12s,color .12s}
.hn-menu a:hover{background:rgba(75,160,232,.10);color:#7BBEF5}
.hn-menu a[aria-current="page"]{color:#4BA0E8;background:rgba(30,120,196,.14);font-weight:700}
.hn-menu .hn-menu-label{font-size:.55rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#64748B;padding:6px 10px 4px}
@media (min-width:768px) and (max-width:1023px){
  .hn-link{padding:0 6px;font-size:.72rem;gap:4px}
  .hn-num{display:none}
}

/* ── Mobile drawer ── */
.mdrawer-overlay{position:fixed;inset:0;background:rgba(3,8,16,.6);backdrop-filter:blur(2px);z-index:70}
.mdrawer{position:fixed;top:0;right:0;bottom:0;width:min(88vw,360px);background:#0F1F36;border-left:1px solid rgba(75,160,232,.25);box-shadow:-18px 0 44px rgba(0,0,0,.45);z-index:71;display:flex;flex-direction:column;overflow:hidden}
.mdrawer[hidden],.mdrawer-overlay[hidden]{display:none}
.mdrawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(75,160,232,.15)}
.mdrawer-title{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#64748B}
.mdrawer-close{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:#94A3B8;font-size:1.25rem;cursor:pointer;border-radius:8px}
.mdrawer-close:hover{color:#E2E8F0;background:rgba(75,160,232,.08)}
.mdrawer-body{flex:1;overflow-y:auto;padding:8px 10px 16px}
.mdrawer-body ul{list-style:none;margin:0;padding:0}
.mdrawer-sec{display:flex;gap:8px;align-items:baseline;padding:10px 8px;border-radius:8px;color:#E2E8F0;font-weight:700;font-size:.9rem;text-decoration:none}
.mdrawer-sec .hn-num{font-size:.62rem}
.mdrawer-sec:hover{background:rgba(75,160,232,.08)}
.mdrawer-sec.is-current{color:#4BA0E8}
.mdrawer-sub{margin:0 0 6px 28px!important;border-left:1px solid rgba(75,160,232,.18)}
.mdrawer-sub a{display:block;padding:7px 12px;color:#94A3B8;font-size:.82rem;text-decoration:none;border-radius:0 6px 6px 0}
.mdrawer-sub a:hover{color:#7BBEF5;background:rgba(75,160,232,.06)}
.mdrawer a[aria-current="page"]{color:#4BA0E8;font-weight:700;background:rgba(30,120,196,.14);box-shadow:inset 2px 0 0 #1E78C4}
.mdrawer-foot{padding:14px 16px 18px;border-top:1px solid rgba(75,160,232,.15);display:flex;flex-direction:column;gap:12px}
.mdrawer-foot .mdrawer-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.mdrawer-foot .fsz-ctrl{margin-left:0}
.mdrawer-foot .theme-btn{margin-left:0}
body.mdrawer-open{overflow:hidden}

/* ── Section tabs ── */
#section-tabs{background:#0A1929;border-bottom:1px solid rgba(255,255,255,.06)}
nav#section-tabs-nav{background:transparent!important;border:0!important;box-shadow:none!important}
.stabs-scroll{display:flex;gap:6px;overflow-x:auto;padding:10px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.stabs-scroll::-webkit-scrollbar{display:none}
.stab{flex:0 0 auto;border-radius:20px;padding:5px 14px;font-size:.76rem;font-weight:600;border:1px solid rgba(30,120,196,.3);color:#94A3B8;text-decoration:none;white-space:nowrap;transition:.15s}
.stab:hover{border-color:#1E78C4;color:#E2E8F0}
.stab.is-current{background:rgba(30,120,196,.15);border-color:#1E78C4;color:#4BA0E8}

/* ── Breadcrumb ── */
/* v1's light-mode CSS paints every <nav> white; the new in-page navs must stay transparent */
nav.footer-sitemap,nav.pn-wrap,nav.mdrawer-body{background:transparent!important;border:0!important;box-shadow:none!important}
nav#breadcrumb{background:transparent!important;border:0!important;box-shadow:none!important;position:static!important;margin-bottom:14px}
.bc{display:flex;flex-wrap:wrap;align-items:center;gap:6px;list-style:none;margin:0;padding:0;font-size:.72rem;color:#64748B}
.bc a{color:#94A3B8;text-decoration:none}
.bc a:hover{color:#4BA0E8;text-decoration:underline;text-underline-offset:2px}
.bc .bc-sep{color:#475569}
.bc [aria-current="page"]{color:#CBD5E1;font-weight:600}

/* ── Prev / next ── */
.pn-wrap{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:56px;padding-top:24px;border-top:1px solid rgba(148,163,184,.15)}
.pn-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:12px;border:1.5px solid rgba(30,120,196,.3);background:rgba(30,120,196,.06);text-decoration:none;transition:border-color .15s,background .15s,transform .15s}
.pn-card:hover{border-color:#1E78C4;background:rgba(30,120,196,.12);transform:translateY(-2px)}
.pn-card.pn-next{text-align:right;grid-column:2}
.pn-card.pn-prev{grid-column:1}
.pn-label{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7BBEF5}
.pn-title{font-size:.9rem;font-weight:700;color:#E2E8F0;line-height:1.3}
@media (max-width:520px){.pn-wrap{grid-template-columns:1fr}.pn-card.pn-next,.pn-card.pn-prev{grid-column:1}}

/* ── Hub cards (section overview pages) ── */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.hub-card{display:flex;flex-direction:column;gap:6px;padding:16px 18px;text-decoration:none;transition:transform .18s,border-color .18s,box-shadow .18s}
.hub-card:hover{transform:translateY(-3px);border-color:#1E78C4!important;box-shadow:0 12px 28px rgba(0,0,0,.25)}
.hub-card-title{font-weight:700;color:#4BA0E8;font-size:.95rem;line-height:1.3}
.hub-card-blurb{font-size:.78rem;color:#94A3B8;line-height:1.5}
.hub-start{display:inline-block;margin-top:22px;font-weight:700;font-size:.9rem;color:#4BA0E8;text-decoration:none}
.hub-start:hover{text-decoration:underline;text-underline-offset:3px}

/* ── Home: six section cards + jump-to-a-tool row ── */
.home-sec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.home-sec-card{position:relative;overflow:hidden;padding:18px 18px 16px}
.home-sec-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--nc,#1E78C4);opacity:.75}
.home-sec-num{font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--nc,#4BA0E8)}
.home-sec-title{display:block;font-size:1.02rem;font-weight:700;color:#E2E8F0;text-decoration:none;margin:4px 0 4px;line-height:1.3}
.home-sec-title:hover{color:#4BA0E8}
.home-sec-outcome{font-size:.76rem;color:#94A3B8;font-style:normal;margin-bottom:10px;line-height:1.45}
.home-sec-pages{list-style:none;margin:0;padding:0;border-top:1px solid rgba(148,163,184,.12)}
.home-sec-pages a{display:block;padding:6px 0;font-size:.78rem;color:#CBD5E1;text-decoration:none;border-bottom:1px solid rgba(148,163,184,.08)}
.home-sec-pages a:hover{color:#7BBEF5}
.home-tools-label{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#64748B;margin:36px 0 10px;text-align:center}
.home-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.home-tool{border:1px solid rgba(30,120,196,.45);color:#4BA0E8;border-radius:8px;padding:9px 16px;font-size:.82rem;font-weight:600;text-decoration:none;transition:background .15s}
.home-tool:hover{background:#0D2038}

/* ── Footer sitemap row ── */
.footer-sitemap{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin:0 auto 18px;max-width:900px;font-size:.74rem}
.footer-sitemap a{color:#94A3B8;text-decoration:none}
.footer-sitemap a:hover{color:#4BA0E8;text-decoration:underline;text-underline-offset:2px}

/* Quiz and AI-prompt "back"/"forward" text links */
.boa-inline-link{color:#4BA0E8;font-weight:700;font-size:.85rem;text-decoration:none}
.boa-inline-link:hover{text-decoration:underline;text-underline-offset:3px}

/* Share FAB sits below the taller two-row header */
@media (min-width:768px){#share-fab{top:132px}body:has(#section-tabs-nav) #share-fab{top:calc(var(--boa-hdr-h) + 3.9rem)}}

/* Visually hidden (H1 on the calculator page, where the v1 card already shows the heading) */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* 404 */
.nf-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:24px}

/* ── Light mode for the new chrome (html.boa-light is set by applyTheme; boa-light-pref pre-paint) ── */
html.boa-light #section-tabs,html.boa-light-pref #section-tabs{background:#FFFFFF!important;border-bottom-color:rgba(0,0,0,.08)!important}
html.boa-light .hn-row{border-top-color:rgba(0,0,0,.07)}
html.boa-light .hn-link{color:#475569}
html.boa-light .hn-link:hover,html.boa-light .hn-link.is-current{color:#1E40AF}
html.boa-light .hn-link.is-current{border-bottom-color:#1E78C4}
html.boa-light .hn-num{color:#64748B}
html.boa-light .hn-menu,html.boa-light .mdrawer{background:rgba(255,255,255,.98)!important;border-color:rgba(30,120,196,.28)!important;box-shadow:0 18px 44px rgba(15,23,42,.18)!important}
html.boa-light .hn-menu a,html.boa-light .mdrawer-sub a{color:#1E293B}
html.boa-light .hn-menu a:hover,html.boa-light .mdrawer-sub a:hover{background:rgba(30,120,196,.10);color:#1E40AF}
html.boa-light .hn-menu a[aria-current="page"],html.boa-light .mdrawer a[aria-current="page"]{color:#1E40AF;background:rgba(30,120,196,.10)}
html.boa-light .mdrawer-sec{color:#0F172A}
html.boa-light .mdrawer-sec.is-current{color:#1E40AF}
html.boa-light .mdrawer-head,html.boa-light .mdrawer-foot{border-color:rgba(30,120,196,.15)}
html.boa-light .mdrawer-close{color:#475569}
html.boa-light .stab{color:#475569;border-color:rgba(30,120,196,.25)}
html.boa-light .stab:hover{color:#1E293B}
html.boa-light .stab.is-current{color:#1E78C4;background:rgba(30,120,196,.08);border-color:#1E78C4}
html.boa-light .bc{color:#64748B}
html.boa-light .bc a{color:#475569}
html.boa-light .bc [aria-current="page"]{color:#0F172A}
html.boa-light .pn-card{background:#FFFFFF;border-color:rgba(30,120,196,.22);box-shadow:0 2px 10px rgba(15,23,42,.04)}
html.boa-light .pn-card:hover{background:rgba(30,120,196,.05)}
html.boa-light .pn-label{color:#1E78C4}
html.boa-light .pn-title{color:#0F172A}
html.boa-light .hub-card-title{color:#1E40AF}
html.boa-light .hub-card-blurb{color:#475569}
html.boa-light .hub-start{color:#1E40AF}
html.boa-light .home-sec-title{color:#0F172A}
html.boa-light .home-sec-outcome{color:#475569}
html.boa-light .home-sec-pages a{color:#1E293B}
html.boa-light .home-sec-pages a:hover{color:#1E40AF}
html.boa-light .home-tool{color:#1E40AF;border-color:rgba(30,120,196,.4)}
html.boa-light .home-tool:hover{background:rgba(15,23,42,.045)}
html.boa-light .footer-sitemap a{color:#475569}
html.boa-light .boa-inline-link{color:#1E40AF}

/* ── Print: content only ── */
@media print{
  #site-header,#section-tabs,#prev-next,#site-footer,nav#breadcrumb,.skip-link,#share-fab,.mdrawer,.mdrawer-overlay,.hub-start,.home-tools,.home-tools-label{display:none!important}
  .hdr-spacer{display:none!important}
  section[id]{page-break-before:auto!important}
  /* v1 printed URLs after external links only (its internal links were #anchors). Keep that: no URLs after internal /paths. */
  a[href^="/"]::after{content:none!important}
}