/* Brand foundation (navy, line, red, amber, fonts) comes from tokens.css —
     the single source shared with carelogic.sqalogic.com (loaded first in
     benchmark/_base.html). Only benchmark-specific tokens live here. */
  :root{
    --cyan:var(--accent); --ink:#1a1a1a; --muted:#555; --paper:#f9f9fb;
    --red:var(--red-text); --amber:var(--yellow-text);
    --pe:#2563EB; --pr:#0891B2; --pd:#0F766E;
    --bg-pe:#EFF6FF; --bg-pr:#ECFEFF; --bg-pd:#ECFDF5;
    /* Pillar chip text tokens — darker shade of each pillar colour for WCAG AA
       on the light tint backgrounds (--bg-pe/#EFF6FF, --bg-pr/#ECFEFF, --bg-pd/#ECFDF5).
       --pr #0891B2 on --bg-pr was 3.54:1 (fail); --pr-text #155e75 = 6.99:1 (pass). */
    --pr-text:#155e75;
    /* Status-open token: --amber/--yellow-text #b7791f on white = 3.64:1 (fail);
       --open-text #92400e = 7.09:1 (pass). Same warm amber family, darker. */
    --open-text:#92400e;
    --space:8px;
    /* Locked primary-action colour: the brand cyan darkened so white text clears WCAG AA
       (5.18:1 on white, pops on the navy hero). Reserved for the primary CTA only. */
    --cta:#137FA8; --cta-hover:#0E6A8E;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  body{font-family:"Raleway",-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);
       background:#fff;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
  /* Full-bleed page like carelogic.sqalogic.com — navy chrome + content span the
     viewport (header and content both hug the edges, so they stay aligned), not a
     floating card on grey. */
  .page{width:100%;background:#fff;}

  /* ── shared chrome ── */
  .topbar{background:var(--navy);color:#fff;padding:6px 30px;min-height:58px;display:flex;align-items:center;
          justify-content:space-between;}
  .brand{font-family:"Raleway",-apple-system,"Segoe UI",sans-serif;font-weight:700;font-size:18px;letter-spacing:0.02em;line-height:1.1;}
  .brand .accent{color:var(--cyan);font-weight:600;}
  .brand .brand-name{display:block;}
  /* Co-brand lockup: "by [SQALogic mark]" — elevates the operator from microtext to the white mark. */
  .brand .byline{display:inline-flex;align-items:center;gap:5px;margin-top:3px;text-decoration:none;
                 font-family:"Raleway",-apple-system,sans-serif;font-size:10px;font-weight:600;
                 letter-spacing:0.04em;color:rgba(255,255,255,0.62);}
  .brand .byline:hover{color:rgba(255,255,255,0.92);}
  .brand .byline .sqa-mark{height:18px;width:auto;display:block;opacity:0.9;}
  .brand .byline:hover .sqa-mark{opacity:1;}
  .nav{display:flex;gap:22px;font-size:13px;align-items:center;}
  /* display:inline-block lets the element size to its widest child (the hidden ::after ghost),
     reserving bold width up front so hover/active weight change causes zero reflow. */
  .nav a{color:rgba(255,255,255,0.78);text-decoration:none;transition:color .12s ease;display:inline-block;}
  .nav a:hover{color:#fff;font-weight:700;}
  .nav a.on{color:#fff;border-bottom:2px solid var(--cyan);padding-bottom:18px;font-weight:700;}
  /* Ghost reserve: a hidden bold copy of the label text, rendered as a zero-height block,
     forces the element to claim the bold width before any interaction.
     Result: the element never grows on hover/active → no layout shift. */
  .nav a::after{content:attr(data-label);font-weight:700;display:block;height:0;overflow:hidden;
                visibility:hidden;pointer-events:none;}
  .nav .cta{background:var(--cta);color:#fff;padding:8px 15px;border-radius:4px;font-weight:700;
            font-size:12.5px;transition:background .12s ease;}
  .nav .cta:hover{background:var(--cta-hover);}
  /* Language toggle — same bold-on-hover/active + ghost-reserve treatment as nav links. */
  .langtoggle{display:flex;gap:6px;font-size:13px;}
  .langtoggle a{color:rgba(255,255,255,0.78);text-decoration:none;transition:color .12s ease;display:inline-block;}
  .langtoggle a:hover{color:#fff;font-weight:700;}
  .langtoggle a.on{color:#fff;font-weight:700;}
  .langtoggle a::after{content:attr(data-label);font-weight:700;display:block;height:0;overflow:hidden;
                       visibility:hidden;pointer-events:none;}
  /* Mobile nav: CSS-only collapsible menu (no JS). Base = desktop (inline .nav, burger hidden);
     at <=780px the hamburger shows and toggles .nav as a drop panel. Standalone single-rule
     @media blocks (the proven pattern). The whole bar must not be widened past the viewport by
     page content, or the right-aligned burger ends up off-screen (see body overflow-x below). */
  .nav-toggle{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
  .nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;cursor:pointer;flex:0 0 auto;}
  .nav-burger span{display:block;height:2px;width:22px;background:#fff;border-radius:2px;}
  @media(max-width:780px){ .topbar{position:relative;} }
  @media(max-width:780px){ .nav-burger{display:flex;} }
  @media(max-width:780px){ .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--navy);flex-direction:column;align-items:stretch;gap:0;padding:6px 30px 18px;z-index:1000;border-top:1px solid rgba(255,255,255,0.12);box-shadow:0 12px 24px rgba(0,19,31,0.40);} }
  @media(max-width:780px){ .nav-toggle:checked ~ .nav{display:flex;} }
  @media(max-width:780px){ .nav a{padding:12px 0;width:100%;} }
  @media(max-width:780px){ .nav a.on{padding-bottom:12px;} }
  /* In the mobile dropdown the diagnostic CTA reads as a plain nav link (like the others),
     not a cyan button — the button treatment is for the desktop bar only. */
  @media(max-width:780px){ .nav .cta{background:none;color:rgba(255,255,255,0.78);padding:12px 0;border-radius:0;font-weight:600;text-align:left;margin-top:0;} }
  @media(max-width:780px){ .nav .cta:hover{background:none;color:#fff;} }
  /* Language toggle: compact (auto-width, tight gap) so EN/FR sit together like the diagnostic
     header's toggle, instead of stretching edge-to-edge via the .nav a width:100% rule. */
  @media(max-width:780px){ .langtoggle{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.12);gap:12px;font-size:14px;} }
  @media(max-width:780px){ .langtoggle a{width:auto;padding:12px 0;} }
  /* padding-bottom clears the fixed feedback FAB (.clfb-fab: right/bottom 18px, ~40px tall)
     so the footer's bottom-right link is never masked by it. */
  .foot{background:var(--navy);color:rgba(255,255,255,0.7);font-size:11.5px;padding:20px 30px 64px;
        display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;}
  @media(max-width:600px){ .foot{padding-bottom:96px;} }  /* FAB sits at bottom:80 on mobile */
  .foot .op{color:#fff;font-family:"Raleway",-apple-system,"Segoe UI",sans-serif;font-size:13px;}
  .foot .op .accent{color:var(--cyan);}
  .foot .footer-privacy-link{color:var(--cyan);text-decoration:none;font-size:12px;}
  .foot .footer-privacy-link:hover{text-decoration:underline;}

  .wrap{padding:34px 36px;}
  @media(max-width:780px){ .wrap{padding:24px 18px;} }
  .eyebrow{font-size:11px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);
           margin-bottom:10px;}
  h1.title{font-family:"Raleway",-apple-system,"Segoe UI",sans-serif;font-weight:800;font-size:32px;color:var(--primary);line-height:1.15;
           max-width:720px;margin-bottom:14px;}
  h2.sec{font-family:"Raleway",-apple-system,"Segoe UI",sans-serif;font-weight:700;font-size:22px;color:var(--primary);margin-bottom:16px;}
  /* Fix #10: compare title fits ~2 lines at 360px narrow phones (copy-locked — CSS only). */
  @media(max-width:380px){ h2.sec{font-size:22px;} }
  @media(max-width:360px){ h2.sec{font-size:20px;} }
  h3.sub{font-family:"Raleway",-apple-system,"Segoe UI",sans-serif;font-weight:700;font-size:17px;color:var(--primary);margin-bottom:8px;}
  p.lede{font-size:15px;color:var(--ink);max-width:660px;margin-bottom:8px;}
  p.body{font-size:13.5px;color:var(--ink);max-width:680px;margin-bottom:10px;}
  /* Full-measure body prose: spans the content column instead of the 680px reading cap —
     for standalone paragraphs that otherwise look cramped-left beside full-width grids. */
  p.body.full{max-width:none;}
  .muted{color:var(--muted);}
  .divider{height:1px;background:var(--line);margin:26px 0;}

  /* founding-state note — the neutral navy-tint box now comes from .callout--note
     (components.css), so it's NOT a caution colour (amber read as "under construction"
     on an authority surface). Only the benchmark's compact sizing + the label run remain. */
  .state-note{align-items:center;padding:11px 16px;font-size:12px;color:#3d5566;margin-bottom:22px;}
  .state-note b{color:var(--primary);letter-spacing:0.04em;text-transform:uppercase;font-size:10.5px;}
  /* P3-B: bold label on its own line above the body copy so the note reads cleanly. */
  /* Fix #5 (FR "ÉTAT FONDATEUR"): keep the label on one line on desktop by adding
     white-space:nowrap. At mobile widths the label may wrap (white-space:normal resets
     it via a narrow-screen override below) but on desktop it must stay single-line. */
  .state-note b{display:block;margin-bottom:4px;white-space:nowrap;}
  @media(max-width:480px){
    .state-note b{white-space:normal;}
  }

  /* Privacy reassurance line — quiet trust signal, links to /compliance. */
  .privacyline{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.5;
               color:#5a6b78;margin:18px 0 0;max-width:640px;}
  .privacyline svg{flex:0 0 auto;margin-top:2px;}
  .privacyline a{color:var(--pd);font-weight:700;text-decoration:none;}
  .hero .privacyline{color:rgba(255,255,255,0.66);}
  .hero .privacyline a{color:var(--secondary);}
  .hero .privacyline svg{stroke:rgba(255,255,255,0.7);}
  /* Conversion microcopy under the CTA + a quiet founder byline (landing hero, dark navy). */
  .cta-micro{font-size:12.5px;color:#5a6b78;margin:10px 0 0;}
  .hero .cta-micro{color:rgba(255,255,255,0.62);}
  .founder-byline{font-size:11.5px;color:#5a6b78;margin:16px 0 0;letter-spacing:0.01em;}
  .hero .founder-byline{color:rgba(255,255,255,0.5);}
  .award-line{margin-top:6px;}
  .hero .award-line a{color:var(--cyan);text-decoration:none;font-weight:600;}
  .hero .award-line a:hover{text-decoration:underline;}

  /* buttons — the .btn / .btn--primary / .btn--ghost component (components.css) now owns
     the base button (locked ocean-cyan --cta primary, AA-pass). Only benchmark-specific
     surface tweaks remain here. */
  /* Primary CTA needs a subtle lift so it advances off the navy hero (component is flat). */
  .btn--primary{box-shadow:0 2px 8px rgba(19,127,168,0.32);}
  /* Ghost on a LIGHT surface (dashboards): tint the component's currentColor outline navy. */
  .btn--ghost.ghost-light{color:var(--primary);}
  .btn--ghost.ghost-light:hover{background:rgba(12,67,107,0.07);}
  /* Plain-language reassurance card — reassurance before the legalese (compliance). */
  .reassure{background:var(--bg-pd);border:1px solid rgba(15,118,110,0.25);border-radius:8px;
            padding:14px 18px;margin-bottom:22px;max-width:680px;}
  /* reassure-head: semantic h3 (follows h2.sec — was h4, skipped h3). Visual size (14px) unchanged. */
  .reassure h3.reassure-head{font-family:"Raleway",-apple-system,sans-serif;font-weight:700;color:var(--primary);font-size:14px;margin-bottom:4px;}
  .reassure p{font-size:13px;color:#3d5c54;line-height:1.55;}
  /* Ghost CTA on the dark navy hero: the component .btn--ghost uses currentColor (white
     here) for the outline. Soften it to a translucent rule to match the hero treatment. */
  .hero .btn--ghost{border-color:rgba(255,255,255,0.45);}
  .hero .btn--ghost:hover{background:rgba(255,255,255,0.12);border-color:#fff;}
  .btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;}
  /* Mobile CTA hierarchy: primary fills width, ghost stays content-width so cyan reads dominant. */
  @media(max-width:600px){
    .hero .btn-row .btn--primary{flex:1 1 auto;}
    .hero .btn-row .btn--ghost{flex:0 0 auto;}
  }

  /* landing hero */
  .hero{padding:64px 36px 56px;background:linear-gradient(160deg,var(--navy) 0%,#00131f 100%);
        color:#fff;border-bottom:0;position:relative;overflow:hidden;
        display:flex;align-items:center;justify-content:space-between;gap:48px;}
  .hero-content{flex:1 1 auto;min-width:0;max-width:720px;}
  /* Decorative Canada silhouette: flat brand-cyan fill, provinces separated by a
     dark stroke so the shape reads. Low opacity keeps the copy dominant. Width
     scales with the viewport (capped) so it fills the hero on wide monitors instead
     of floating at a fixed size; vector, so it stays crisp at any scale. */
  .hero-art{flex:0 0 auto;width:clamp(300px,36vw,760px);height:auto;align-self:center;}
  .hero-art path{fill:var(--accent);fill-opacity:0.16;stroke:#00131f;stroke-width:0.9;
                 stroke-linejoin:round;}
  @media(max-width:900px){ .hero{display:block;} .hero-art{display:none;} }
  .hero .eyebrow{color:rgba(255,255,255,0.72);}
  .hero h1.title,.hero h2.sec,.hero h3.sub{color:#fff;}
  .hero p.lede,.hero p.body,.hero .muted{color:rgba(255,255,255,0.85);}
  .hero .pillrow{display:flex;gap:8px;margin:18px 0 6px;flex-wrap:wrap;}
  /* .chip base comes from the component (components.css). Pillar tints stay benchmark-specific.
     --pr #0891B2 on --bg-pr #ECFEFF = 3.54:1 (WCAG AA fail); use --pr-text #155e75 = 6.99:1 (pass). */
  .chip.pe{background:var(--bg-pe);color:var(--pe);} .chip.pr{background:var(--bg-pr);color:var(--pr-text);}
  .chip.pd{background:var(--bg-pd);color:var(--pd);}

  /* founding counter */
  .founding{display:grid;grid-template-columns:1.1fr 1fr;gap:0;border:1px solid var(--line);border-radius:8px;
            overflow:hidden;margin-top:24px;}
  @media(max-width:780px){ .founding{grid-template-columns:1fr;} }
  .founding .l{background:var(--navy);color:#fff;padding:26px 28px;}
  .founding .l .badge{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--cyan);
       border-radius:20px;padding:6px 13px;font-size:10px;font-weight:700;letter-spacing:0.12em;
       text-transform:uppercase;color:var(--cyan);margin-bottom:14px;}
  /* founding-head: semantic h2 (follows the h1 hero — was h3, skipped a level). Visual size unchanged. */
  .founding .l h2.founding-head{font-family:"Raleway",-apple-system,"Segoe UI",sans-serif;font-weight:700;font-size:21px;line-height:1.25;margin-bottom:10px;}
  .founding .l p{font-size:13.5px;color:rgba(255,255,255,0.82);}
  /* Quiet body-level diagnostic cross-link sits on the navy band — style it so it does NOT
     fall back to the browser default link color (illegible purple/blue on navy). */
  .founding .l .diag-discover{margin-top:12px;font-size:13px;}
  .founding .l .diag-discover a{color:var(--cyan);text-decoration:underline;text-underline-offset:2px;}
  .founding .l .diag-discover a:hover{color:#fff;}
  .founding .l .winwin{font-size:14px;font-weight:700;color:#fff;border-left:3px solid var(--secondary);padding-left:12px;margin:16px 0 14px;}
  .founding .l .btn{margin-top:2px;}
  /* Counter panel stays in the dark band (was a stark white slab butted into navy).
     A hair lighter than the left cell + a hairline divider; the number reads in white. */
  .founding .r{background:linear-gradient(160deg,#0c3252 0%,#06233a 100%);
               border-left:1px solid rgba(255,255,255,0.09);
               padding:26px 28px;display:flex;flex-direction:column;justify-content:center;}
  .counter{font-family:"Raleway",-apple-system,"Segoe UI",sans-serif;font-weight:800;font-size:46px;color:#fff;line-height:1;}
  /* Small-cohort invitation replaces the big number: sized as a statement, not a counter. */
  .counter.counter--invite{font-size:26px;line-height:1.2;font-weight:700;}
  .counter .d{font-size:17px;color:rgba(255,255,255,0.55);}
  .ccap{font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.58);margin-top:8px;}
  .prog{height:10px;background:#e3e7eb;border-radius:5px;overflow:hidden;margin:14px 0 8px;}
  .prog i{display:block;height:100%;width:57%;background:linear-gradient(90deg,var(--cyan),var(--pr));border-radius:5px;}
  .pcap{font-size:11.5px;color:var(--muted);}

  /* dashboard */
  .grid-map{display:grid;grid-template-columns:1.15fr 1fr;gap:26px;align-items:start;}
  @media(max-width:780px){ .grid-map{grid-template-columns:1fr;} }
  /* Fix #11: explore mobile hierarchy — visual tier between filter rail + map when
     the grid collapses to one column on narrow viewports. */
  @media(max-width:780px){ .grid-map{margin-top:18px;} }
  .map-card{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:18px;}
  .map-card .mt{font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);}
  .map-card .ms{font-size:12px;color:var(--muted);margin:4px 0 14px;}
  svg.canada{width:100%;height:auto;display:block;}
  .prov{stroke:#fff;stroke-width:1.4;cursor:pointer;transition:opacity .12s ease;}
  .prov:hover{opacity:0.82;}
  /* Labels must NEVER intercept the mouse — otherwise hovering a province's own
     label kills its tooltip (the tiny PEI/Maritimes problem). */
  .plabel,.pcount{pointer-events:none;}
  /* atlas callouts for the tiny Maritimes: thin leader line + the code pulled into
     the ocean margin. The callout label IS hoverable (the province is too small to
     target), so it overrides the .plabel pointer-events:none above. */
  .leader{stroke:var(--gray);stroke-width:0.6;}
  .leader-dot{fill:var(--gray);}
  .callout{cursor:pointer;}
  .plabel.cl{pointer-events:auto;}
  /* dominant-baseline:central centres the glyph vertically ON label_xy (which is the
     province centre) — without it the baseline sits there and the code rides ~4px high. */
  .plabel{font-size:10px;fill:var(--primary);font-weight:600;dominant-baseline:central;font-family:"Raleway",-apple-system,sans-serif;}
  .plabel.on-dark{fill:#fff;}  /* light label on the darker province fills (e.g. Ontario) */
  .pcount{font-size:8.5px;fill:rgba(0,0,0,0.5);font-family:"SF Mono",Consolas,monospace;}
  .prov.b0{fill:#e4eaee;} .prov.b1{fill:#cdd9e0;} .prov.b2{fill:#a7c4d6;}
  .prov.b3{fill:#7fb1cd;} .prov.b4{fill:#4a90b8;} .prov.b5{fill:#1f6f96;} .prov.b6{fill:#0d4f6e;}
  .prov.seeding{fill:#dfe4e8;stroke-dasharray:3 3;}
  .prov-overlay{pointer-events:none;}
  .prov.collecting{fill:#eef1f4;}
  .prov.is-active{stroke:#0d4f6e;stroke-width:2.2;}
  .canada a{cursor:pointer;}
  .map-attribution{font-size:10px;color:var(--muted);margin-top:8px;}
  .legend{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:10.5px;color:var(--muted);}
  .legend .scale{display:flex;height:10px;flex:1;border-radius:5px;overflow:hidden;}
  .legend .scale span{flex:1;}
  .pillars{display:flex;flex-direction:column;gap:12px;}
  .pillar{border:1px solid var(--line);border-radius:6px;padding:15px 17px;border-left:4px solid;}
  .pillar.pe{border-left-color:var(--pe);} .pillar.pr{border-left-color:var(--pr);} .pillar.pd{border-left-color:var(--pd);}
  .pillar .t{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px;}
  .pillar .nm{font-family:"Raleway",-apple-system,"Segoe UI",sans-serif;font-weight:600;font-size:17px;}
  .pillar.pe .nm{color:var(--pe);} .pillar.pr .nm{color:var(--pr);} .pillar.pd .nm{color:var(--pd);}
  .pillar .v{font-family:"Raleway",-apple-system,"Segoe UI",sans-serif;font-weight:700;font-size:25px;color:var(--primary);}
  .pillar .v .d{font-size:13px;color:#999;}
  .bar{height:8px;background:#eceff2;border-radius:4px;overflow:hidden;}
  .bar i{display:block;height:100%;border-radius:4px;}
  .pillar.pe .bar i{background:var(--pe);} .pillar.pr .bar i{background:var(--pr);} .pillar.pd .bar i{background:var(--pd);}
  .pillar .cap{font-size:11px;color:var(--muted);margin-top:8px;}

  .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  /* Sector table: the .table component (components.css) owns the grid (width, collapse,
     cell padding, zebra, .num right-align). These are the benchmark-specific overrides:
     dense small-caps headers + a mono numeric face + the active-row accent. */
  table.seg{font-size:13px;margin-top:6px;}
  table.seg th{font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);
               font-weight:700;padding:8px 12px;border-bottom:2px solid var(--line);}
  table.seg th.num,table.seg td.num{font-family:"SF Mono",Consolas,monospace;}
  table.seg td{padding:11px 12px;}
  table.seg tr:last-child td{border-bottom:none;}
  table.seg .s{font-weight:600;color:var(--primary);}
  /* live / locked status badges in the sector table — data-bearing status (teal = live,
     amber = locked/collecting), distinct from the neutral .chip filter pills. */
  .pill{display:inline-block;font-size:10px;font-weight:700;letter-spacing:0.05em;padding:3px 9px;border-radius:11px;}
  .pill.live{background:var(--bg-pr);color:var(--pr);}
  .pill.lock{background:#fff4e0;color:var(--amber);}
  .mini{color:var(--muted);font-size:11.5px;}
  .lockbar{height:6px;background:#eceff2;border-radius:3px;overflow:hidden;margin-top:5px;max-width:160px;}
  .lockbar i{display:block;height:100%;background:var(--amber);border-radius:3px;opacity:.55;}
  /* Sub-sector sub-rows (Task 12 — v3 NAICS subdivision) */
  .bench-subsector-head td{padding:4px 12px 2px;background:var(--paper);}
  .bench-subsector-head__label{font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);}
  .bench-subsector-row td{padding:7px 12px;background:#fafbfc;border-bottom:1px solid #edf0f3;}
  .bench-subsector-name{font-weight:400;color:var(--ink);font-size:13.5px;}
  .bench-subsector-indent{display:inline-block;width:18px;}
  .pill--sm{font-size:9px;padding:2px 7px;}
  .lockbar--sm{max-width:100px;}
  /* Mobile (≤390px): narrow viewport — prevent the unlocking pill + lockbar from
     wrapping awkwardly in the colspan-3 cell.  Let the pill sit on its own line above
     the bar, tighten text, and allow the bar to fill the available width. */
  @media(max-width:390px){
    .bench-subsector-row .pill--sm{display:block;margin-bottom:4px;white-space:nowrap;width:fit-content;}
    .lockbar--sm{max-width:none;width:100%;}
    .bench-subsector-name{font-size:12px;}
  }

  /* methodology compare */
  .diff{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
  @media(max-width:780px){ .diff{grid-template-columns:1fr;} }
  .diff .c{border:1px solid var(--line);border-radius:6px;padding:20px;}
  .diff .c.them{background:var(--paper);}
  .diff .c.us{background:var(--navy);color:#fff;border-color:var(--primary);}
  .diff .c .lab{font-size:10px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:10px;}
  .diff .c.them .lab{color:var(--muted);} .diff .c.us .lab{color:var(--cyan);}
  /* diff-head: semantic h3 (follows h2.sec — was h4, skipped h3). Visual size (18px) unchanged. */
  .diff .c h3.diff-head{font-family:"Raleway",-apple-system,"Segoe UI",sans-serif;font-weight:700;font-size:18px;margin-bottom:8px;}
  .diff .c.them h3.diff-head{color:var(--primary);}
  .diff .c p{font-size:13.5px;} .diff .c.them p{color:var(--ink);} .diff .c.us p{color:rgba(255,255,255,0.85);}
  .steps{display:flex;flex-direction:column;gap:14px;margin-top:6px;}
  .step{display:flex;gap:14px;align-items:flex-start;}
  .step .n{flex:0 0 30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;display:flex;
           align-items:center;justify-content:center;font-family:"Raleway",-apple-system,"Segoe UI",sans-serif;font-size:15px;}
  .step .tx h4{font-size:14px;color:var(--primary);margin-bottom:3px;}
  .step .tx p{font-size:13.5px;color:var(--ink);}

  /* compliance list */
  .guard{display:flex;gap:13px;padding:15px 0;border-bottom:1px solid var(--line);}
  .guard:last-child{border-bottom:none;}
  .guard .ic{flex:0 0 34px;height:34px;border-radius:7px;background:var(--bg-pr);color:var(--pr);display:flex;
             align-items:center;justify-content:center;font-size:16px;}
  /* guard-head: semantic h3 (follows h2.sec — was h4, skipped h3). Visual size (14px) unchanged. */
  .guard .tx h3.guard-head{font-size:14px;color:var(--primary);margin-bottom:3px;}
  .guard .tx p{font-size:13.5px;color:var(--ink);}

  /* board */
  .seat{display:grid;grid-template-columns:160px 1fr;gap:18px;padding:18px;border:1px solid var(--line);
        border-radius:7px;margin-bottom:12px;}
  @media(max-width:780px){ .seat{grid-template-columns:1fr;} }
  /* .seat .cat: --cyan #1199DD on white = 3.17:1 (WCAG AA fail for 10px text); use --primary #0C436B = 10.34:1. */
  .seat .cat{font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--primary);}
  .seat .cat .catname{display:block;font-family:"Raleway",-apple-system,"Segoe UI",sans-serif;font-size:16px;color:var(--primary);
                      letter-spacing:0;text-transform:none;font-weight:700;margin-top:4px;}
  .seat .status{font-size:12px;}
  /* .seat .open: --amber/--yellow-text #b7791f on white = 3.64:1 (fail); use --open-text #92400e = 7.09:1. */
  .seat .open{color:var(--open-text);font-weight:700;}
  .seat .filled{color:var(--pd);font-weight:700;}
  .seat .rationale{font-size:13.5px;color:var(--ink);margin-top:6px;}
  /* Operator's note (founder's signed statement, navy card) + named member roster (Variant A).
     Portraits are circles; the whole set uses one uniform face-centred square master so no
     single crop fights the shape. David's per-card note = Cardo italic with a thin cyan rule. */
  .operator-note{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:center;
    margin:20px 0 4px;padding:24px 26px;background:var(--navy);border-radius:8px;}
  .operator-note__photo{width:150px;height:150px;border-radius:50%;object-fit:cover;
    border:2px solid rgba(255,255,255,0.22);}
  .operator-note__quote{margin:0;color:#fff;font-family:"Cardo",Georgia,serif;font-style:italic;
    font-size:16px;line-height:1.6;}
  .operator-note__sig{display:block;margin-top:12px;font-style:normal;font-weight:600;
    font-family:"Raleway",-apple-system,"Segoe UI",sans-serif;font-size:12px;letter-spacing:.02em;
    color:rgba(255,255,255,0.72);}
  .member{border:1px solid var(--line);border-radius:8px;padding:20px 22px;margin-bottom:14px;}
  .member__cat{font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
    color:var(--primary);margin-bottom:14px;}
  .member__grid{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:start;}
  .member__photo{width:150px;height:150px;border-radius:50%;object-fit:cover;
    border:1px solid var(--line);background:var(--paper);}
  .member__name{font-family:"Raleway",-apple-system,"Segoe UI",sans-serif;font-weight:700;
    font-size:19px;color:var(--primary);line-height:1.2;}
  .member__role{font-size:13px;color:var(--muted);margin-top:4px;}
  .member__bio{font-size:14px;line-height:1.62;color:var(--ink);margin-top:12px;}
  .member__note{margin:14px 0 0;padding-left:15px;border-left:2px solid var(--cyan);
    font-family:"Cardo",Georgia,serif;font-style:italic;font-size:14px;line-height:1.6;color:var(--muted);}
  .member__sig{display:block;margin-top:9px;font-style:normal;font-weight:700;
    font-family:"Raleway",-apple-system,"Segoe UI",sans-serif;font-size:11px;letter-spacing:.03em;
    color:var(--primary);}
  @media(max-width:780px){
    .operator-note{grid-template-columns:1fr;justify-items:center;text-align:center;}
    .member__grid{grid-template-columns:1fr;justify-items:center;text-align:center;}
    .member__note{text-align:left;}
  }
  .crit{display:flex;gap:11px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:13.5px;}
  .crit:last-child{border-bottom:none;}
  .crit .num{flex:0 0 22px;font-family:"Raleway",-apple-system,"Segoe UI",sans-serif;color:var(--cyan);font-size:16px;}
  .crit b{color:var(--primary);}
  /* earned-proof cross-link to /how-we-build (board, compliance, methodology) */
  .hwb-crosslink{margin:10px 0 0;font-size:13.5px;}
  .hwb-crosslink a{color:var(--cta);font-weight:600;text-decoration:none;}
  .hwb-crosslink a:hover{text-decoration:underline;}
  .apply{background:var(--navy);color:#fff;border-radius:8px;padding:24px 26px;margin-top:22px;}
  .apply h3{font-family:"Raleway",-apple-system,"Segoe UI",sans-serif;font-weight:700;font-size:20px;margin-bottom:8px;}
  .apply p{font-size:13.5px;color:rgba(255,255,255,0.85);max-width:560px;margin-bottom:14px;}
  /* Non-interactive status pill (interim Year-1 state) — reads as a state, not a button:
     no pointer, no hover, no arrow. Distinct from .apply .btn. */
  .apply-soon{display:inline-block;background:rgba(255,255,255,0.10);border:1px solid rgba(255,255,255,0.30);
    color:rgba(255,255,255,0.92);font-weight:700;font-size:12px;letter-spacing:.02em;border-radius:999px;padding:7px 14px;}
  /* The modal-open label is .btn .btn--primary. On the navy .apply band it is restyled to
     WHITE-fill / navy-text so the page's own conversion action (Apply) reads as the dominant
     primary and does NOT compete with the shared cyan "See how you compare" footer CTA that
     stacks below it (design-panel call 2026-06-29: fix the board adjacency, leave the shared
     CTA cyan everywhere for cross-page consistency). This is AA-safe — white #fff on navy
     ground + navy text #0C436B ≈ 9:1 — NOT the retired bright-cyan (#28AEE4, 2.54:1) override
     the component killed; that contrast fail is what the prior note warned against, not this.
     Scoped to .apply (the band) so the white modal's form submit (.apply-modal, a separate
     sibling) keeps the standard cyan --cta on its white panel. */
  .apply .btn--primary{background:#fff;color:var(--primary);box-shadow:none;}
  .apply .btn--primary:hover{background:rgba(255,255,255,0.92);color:var(--primary);}
  /* CSS-only application modal (no JS on the benchmark surface): a hidden checkbox drives
     show/hide via the sibling selector. The form is dark-on-white, so the panel is white. */
  .apply-cb{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
  .apply-modal{display:none;position:fixed;inset:0;z-index:1000;align-items:flex-start;justify-content:center;
    padding:24px 20px;overflow-y:auto;}
  .apply-cb:checked ~ .apply-modal{display:flex;}
  .apply-modal__backdrop{position:absolute;inset:0;background:rgba(0,19,31,0.55);cursor:pointer;}
  .apply-modal__panel{position:relative;background:#fff;color:var(--ink);border-radius:10px;max-width:680px;
    width:100%;margin:auto;padding:14px 28px 28px;box-shadow:0 20px 60px rgba(0,29,49,0.35);}
  .apply-modal__panel .board-apply{margin-top:6px;}
  .apply-modal__close{position:absolute;top:6px;right:16px;font-size:30px;line-height:1;color:var(--muted);
    cursor:pointer;text-decoration:none;}
  .apply-modal__close:hover{color:var(--primary);}
  /* Per-modal EN|FR toggle (only when the surface is bilingual). Dark-on-white to
     match the panel, mirroring the landing's legal-modal language chip. */
  .apply-modal__lang{display:flex;gap:6px;align-items:center;font-size:12px;
    font-weight:700;margin-bottom:12px;}
  .apply-modal__lang a{color:var(--muted);text-decoration:none;padding:2px 4px;}
  .apply-modal__lang a:hover{color:var(--primary);}
  .apply-modal__lang a.is-active{color:var(--accent);text-decoration:underline;}

  /* board application form (open state) — _board_form.html. Each field is a block
     <label class="fld"> wrapping its control; without these rules the labels + inputs
     fall back to inline flow and run together. */
  .board-apply{max-width:640px;margin-top:22px;}
  .board-apply .fld{display:block;margin-bottom:15px;font-size:12px;font-weight:700;
                    letter-spacing:0.02em;color:var(--primary);}
  .board-apply .fld input,
  .board-apply .fld select,
  .board-apply .fld textarea{display:block;width:100%;margin-top:6px;padding:9px 11px;
        font-family:inherit;font-size:14px;font-weight:400;line-height:1.5;color:var(--ink);
        background:#fff;border:1px solid var(--line);border-radius:6px;}
  .board-apply .fld select{max-width:340px;}
  .board-apply .fld textarea{resize:vertical;min-height:88px;}
  .board-apply .fld input:focus,
  .board-apply .fld select:focus,
  .board-apply .fld textarea:focus{outline:none;border-color:var(--cyan);
        box-shadow:0 0 0 3px var(--bg-pr);}
  .board-apply .help{display:block;margin-top:3px;font-weight:400;font-size:12px;
        letter-spacing:0;color:var(--muted);}
  .board-apply .chk{display:flex;gap:9px;align-items:flex-start;max-width:640px;
        margin:0 0 12px;font-size:13px;font-weight:400;letter-spacing:0;color:var(--ink);}
  .board-apply .chk input{flex:0 0 auto;width:auto;margin-top:3px;}
  .board-apply .err{display:block;margin:-9px 0 12px;font-size:12px;font-weight:400;color:var(--red);}
  .board-apply .btn{margin-top:6px;}

  .illus{font-size:10.5px;color:var(--amber);font-style:italic;margin-top:8px;}

  /* Filter chips bar (click-to-drill). The chips themselves are the .chip component
     (components.css); .chip--active gives the selected/removable fill. Only the bar
     container + the benchmark-specific remove/clear variants live here. */
  .filter-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
        margin-bottom:16px;padding:10px 14px;background:var(--surface-2,#eef2ff);
        border:1.5px solid #c7d2fe;border-radius:8px;font-size:13px;}
  .filter-chips-label{color:var(--primary);font-weight:600;margin-right:4px;}
  .chip[href]{text-decoration:none;}
  .chip-x{font-size:11px;opacity:.8;font-weight:700;}
  /* "Clear all" — neutral grey, distinct from the active filter chips. */
  .chip-clear{background:#374151;color:#fff;border-color:#6b7280;font-weight:700;}
  /* Sector table: active row + link styles */
  .seg tr.is-active td{background:#eef2ff;}
  /* Active row accent: left-border on first cell mirrors map province highlight */
  .seg tr.is-active td:first-child{border-left:3px solid var(--cyan);padding-left:9px;font-weight:700;}
  .seg-link{color:inherit;text-decoration:none;display:block;}
  .seg-link:hover{text-decoration:underline;color:var(--primary,#2563eb);}

  /* Discoverability hint — shown when no filter is active */
  .drill-hint{font-size:12px;color:var(--muted);text-align:center;margin:8px 0 16px;
              letter-spacing:0.01em;font-style:italic;}

  /* Filter dimension controls (size / regulated / ai_posture) */
  /* One dimension per row: fixed label column + chips, separated by a hairline,
     so axes never share a line (Regulatory no longer bleeds onto Org size). */
  .filter-dims{display:flex;flex-direction:column;margin:14px 0 12px;
               padding:6px 16px;background:#f4f6f8;border:1px solid #dde3ea;
               border-radius:8px;}
  .filter-dim-group{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px;
                    padding:9px 0;}
  .filter-dim-group + .filter-dim-group{border-top:1px solid #e7ebf1;}
  .filter-dim-label{flex:0 0 92px;font-size:10.5px;font-weight:700;letter-spacing:0.09em;
                    text-transform:uppercase;color:var(--muted);padding-top:5px;}
  @media(max-width:600px){
    /* Fix #7: +4px margin-bottom so axis groups breathe (was 2px). */
    .filter-dim-label{flex-basis:100%;padding-top:0;margin-bottom:4px;}
  }
  /* Fix #4 (FR 360px): "EMPREINTE IA" clips at 360px because letter-spacing + padding
     push the label past the container width. Allow it to wrap and never clip. */
  @media(max-width:360px){
    .filter-dim-label{white-space:normal;overflow:visible;word-break:break-word;min-width:0;}
  }
  /* Filter dimension chip: the .chip component (components.css) is the base; these are the
     benchmark-specific resting style (lighter ground + a hairline border, for the dense
     filter rail) and the selected state. .chip--active already supplies the active fill. */
  /* P2-A: min-height 40px so the chip meets the iOS tap-target floor (44px is ideal;
     40px is accepted when spacing adds the remaining 4px of clearance). */
  .filter-dim-chip{font-size:11px;padding:8px 11px;background:#e8ecf1;color:#374151;
                   border:1.5px solid #c9d0da;transition:background .12s,border-color .12s;
                   display:inline-flex;align-items:center;min-height:40px;border-radius:6px;}
  .filter-dim-chip:hover{background:#dde3ea;border-color:#aab3bf;}
  .filter-dim-chip.is-active{background:var(--cta);color:#fff;border-color:var(--cta);}

  /* Pill explanation tooltip (a11y, spec §7): a REAL tooltip element referenced by the
     chip's aria-describedby — so screen readers and touch get the text, not a hover-only
     ::after ghost. Visually shown on hover OR keyboard focus of the chip (focus-within on
     the wrapper); always present in the DOM for assistive tech. */
  .filter-dim-pill{position:relative;display:inline-flex;}
  .filter-dim-tip{position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);
    width:max-content;max-width:230px;white-space:normal;text-align:center;background:#0f2433;
    color:#fff;font-size:11px;font-weight:500;line-height:1.4;letter-spacing:normal;
    text-transform:none;padding:7px 10px;border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,.25);
    z-index:40;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .12s ease;}
  .filter-dim-tip::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);
    border:6px solid transparent;border-top-color:#0f2433;}
  .filter-dim-pill:hover .filter-dim-tip,
  .filter-dim-pill:focus-within .filter-dim-tip{opacity:1;visibility:visible;}

  /* View nav (National / Compare / Explore) — horizontal chip row below the topbar */
  .bench-viewnav{display:flex;gap:8px;flex-wrap:wrap;padding:10px 36px;
                 background:#f4f6f8;border-bottom:1px solid #dde3ea;}
  @media(max-width:780px){ .bench-viewnav{padding:8px 18px;} }
  /* P2-A: tap target ≥44px — increase vertical padding so the hit area clears the iOS minimum. */
  .bench-viewnav__link{font-size:11px;font-weight:600;padding:10px 14px;border-radius:99px;
                       background:#e8ecf1;color:#374151;text-decoration:none;
                       border:1.5px solid #c9d0da;transition:background .12s,border-color .12s;
                       display:inline-flex;align-items:center;min-height:40px;}
  .bench-viewnav__link:hover{background:#dde3ea;border-color:#aab3bf;}
  .bench-viewnav__link.is-active{background:var(--primary,#2563eb);color:#fff;
                                  border-color:var(--primary,#2563eb);}

  /* Three-state cell copy (unlocking / empty) */
  .bench-cell__unlocking{font-size:12.5px;color:var(--amber,#b45309);font-style:italic;
                          margin:8px 0 4px;}
  .bench-cell__empty{font-size:12px;color:var(--muted);font-style:italic;margin:6px 0;}

  /* ── Compare view ── */

  /* Pillar group: one block per pillar (pe/pr/pd) with two tracks stacked */
  .compare-bars{display:flex;flex-direction:column;gap:22px;margin:22px 0 30px;}
  .compare-pillar{border:1px solid var(--line);border-radius:7px;padding:16px 18px;border-left:4px solid;}
  .compare-pillar.pe{border-left-color:var(--pe);}
  .compare-pillar.pr{border-left-color:var(--pr);}
  .compare-pillar.pd{border-left-color:var(--pd);}
  .compare-pillar__name{font-family:"Raleway",-apple-system,"Segoe UI",sans-serif;font-weight:600;
                        font-size:15px;margin-bottom:12px;}
  .compare-pillar.pe .compare-pillar__name{color:var(--pe);}
  .compare-pillar.pr .compare-pillar__name{color:var(--pr);}
  .compare-pillar.pd .compare-pillar__name{color:var(--pd);}

  /* Each track row: label above, then bar-wrap (bar + median line) */
  .compare-track{margin-bottom:10px;}
  .compare-track:last-child{margin-bottom:0;}
  .compare-track__label{font-size:11.5px;color:var(--muted);margin-bottom:5px;
                        display:flex;align-items:center;gap:6px;}
  .compare-track__label strong{color:var(--ink);}

  /* Legend dots: small colour swatch before the label text */
  .compare-legend-dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:0 0 9px;}
  .compare-legend-dot--national{background:var(--muted);}
  .compare-legend-dot--cohort{background:var(--cyan);}

  /* Bar + national-line positioning: bar-wrap is the relative container */
  .compare-track__bar-wrap{position:relative;}
  .compare-track__bar-wrap .bar{height:10px;background:#eceff2;border-radius:5px;overflow:visible;position:relative;}
  .compare-track__bar-wrap .bar i{display:block;height:100%;border-radius:5px;background:var(--muted);}
  .compare-pillar.pe .compare-track--cohort .bar i{background:var(--pe);}
  .compare-pillar.pr .compare-track--cohort .bar i{background:var(--pr);}
  .compare-pillar.pd .compare-track--cohort .bar i{background:var(--pd);}
  .compare-track--cohort.is-provisional .bar i{
    background-image:repeating-linear-gradient(45deg,rgba(0,19,31,0.42) 0 1px,transparent 1px 5px);
  }
  .compare-provisional-tag{font-size:11px;font-weight:600;color:#6b7c88;margin-left:6px;}

  /* National median line: a vertical marker rendered on top of the bar track.
     Positioned at left:N% (the national value) relative to the bar-wrap container.
     The line extends slightly above and below the bar (top:-3px; height:16px) so it
     reads as a cross-track reference, not just a bar cap. */
  .compare-median-line{position:absolute;top:-3px;height:16px;width:2px;
                       background:var(--ink);border-radius:1px;opacity:0.35;
                       transform:translateX(-50%);}
  /* Ghost copy on the cohort track — same position, lighter so bar reads primary */
  .compare-median-line--ghost{opacity:0.18;}

  /* Cohort value readout below the cohort bar */
  .compare-track__cohort-val{font-family:"Raleway",-apple-system,"Segoe UI",sans-serif;
                             font-weight:700;font-size:20px;color:var(--primary);
                             margin-top:6px;}
  .compare-track__cohort-val .d{font-size:12px;color:#999;font-weight:400;}

  /* Funnel CTA panel — dark card at the bottom, mirrors the .apply/.founding .l style */
  .compare-funnel{background:var(--navy);color:#fff;border-radius:10px;padding:34px 36px;
                  margin-top:14px;text-align:center;}
  .compare-funnel > *{max-width:560px;margin-left:auto;margin-right:auto;}
  .compare-funnel__head{font-family:"Raleway",-apple-system,"Segoe UI",sans-serif;font-weight:700;
                        font-size:23px;margin-bottom:8px;}
  .compare-funnel__sub{font-size:14px;color:rgba(255,255,255,0.84);line-height:1.5;margin-bottom:20px;}
  /* .btn on a dark panel: secondary accent, standard hover */
  .compare-funnel .btn{display:inline-block;background:var(--cta);color:#fff;
                           font-weight:700;font-size:14px;padding:11px 22px;border-radius:5px;
                           text-decoration:none;transition:background .12s ease;}
  .compare-funnel .btn:hover{background:var(--cta-hover);}
  .compare-funnel__done{font-size:12px;color:rgba(255,255,255,0.55);margin-top:12px;}
  /* Email-first prospect funnel */
  .compare-funnel__email-form{margin:20px auto 4px;max-width:480px;}
  .compare-funnel__email-label{display:block;font-size:13px;color:rgba(255,255,255,0.92);
                               font-weight:600;margin-bottom:10px;line-height:1.45;}
  .compare-funnel__email-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;
                             justify-content:center;}
  .compare-funnel__email-row input[type=email]{flex:1 1 220px;min-width:0;padding:11px 14px;
                               border:1px solid rgba(255,255,255,0.28);border-radius:5px;
                               background:rgba(255,255,255,0.96);color:#0f2433;font-size:14px;}
  .compare-funnel__email-row input[type=email]::placeholder{color:#8a97a6;}
  .compare-funnel__email-row .btn{flex:0 0 auto;cursor:pointer;border:none;}
  /* Divider into the "new here?" universal invite */
  .compare-funnel__newhere{font-size:13px;color:rgba(255,255,255,0.72);line-height:1.55;
                           margin:22px auto 14px;padding-top:18px;max-width:440px;
                           border-top:1px solid rgba(255,255,255,0.14);}
  .compare-funnel .btn-row{justify-content:center;}
  /* Fix #9: ghost CTA border opacity raised for better contrast on dark panel. */
  .compare-funnel .btn--ghost{background:transparent;
                           border:1.5px solid rgba(255,255,255,0.65);}
  .compare-funnel .btn--ghost:hover{background:rgba(255,255,255,0.10);}

  /* Post-submit confirmation — a clean, centred, constrained card */
  .compare-confirm{background:var(--navy);color:#fff;border-radius:10px;
                   max-width:560px;margin:40px auto;padding:44px 40px;text-align:center;}
  .compare-confirm__icon{font-size:34px;line-height:1;margin-bottom:14px;
                         color:var(--secondary);}
  .compare-confirm__head{font-family:"Raleway",-apple-system,"Segoe UI",sans-serif;
                         font-weight:700;font-size:23px;margin:0 0 10px;}
  .compare-confirm__sub{font-size:14px;color:rgba(255,255,255,0.84);line-height:1.55;
                        margin:0 auto 22px;max-width:420px;}
  .compare-confirm__rule{height:1px;width:54px;background:rgba(255,255,255,0.22);
                         margin:0 auto 22px;}
  .compare-confirm__invite{font-size:13.5px;color:rgba(255,255,255,0.7);line-height:1.55;
                           margin:0 auto 20px;max-width:420px;}
  .compare-confirm .btn{display:inline-block;background:var(--cta);color:#fff;
                            font-weight:700;font-size:14px;padding:11px 24px;border-radius:5px;
                            text-decoration:none;transition:background .12s ease;}
  .compare-confirm .btn:hover{background:var(--cta-hover);}

  /* Overlay datestamp — shown above the bars when a visitor's own scores are present */
  .compare-overlay-datestamp{font-size:12px;color:var(--muted);margin-bottom:8px;font-style:italic;}

  /* Personal overlay marker dot — positioned absolutely on the bar-wrap container,
     vertically centred on the bar track (top:50%, transform centres the dot itself).
     Brand orange accent so it reads distinctly from the national ink line and cohort bar.
     The label rides above the dot on a small callout. */
  .bench-overlay-marker{position:absolute;top:50%;width:18px;height:18px;
    background:var(--secondary,#e85d04);border:2px solid #fff;border-radius:50%;
    box-shadow:0 1px 4px rgba(0,0,0,0.28);transform:translate(-50%,-50%);
    display:flex;align-items:center;justify-content:center;z-index:2;}
  .bench-overlay-marker__label{position:absolute;bottom:calc(100% + 3px);left:50%;
    transform:translateX(-50%);white-space:nowrap;font-size:9px;font-weight:700;
    letter-spacing:0.04em;color:var(--secondary,#e85d04);pointer-events:none;}

/* A2: secondary retake on the Compare overlay branch — quiet by default, leaned-in
   (separated + nudge) once the result is ~a year old. Never the primary CTA weight. */
.compare-retake{margin-top:22px;text-align:center;}
.compare-retake--promoted{margin-top:26px;padding-top:18px;border-top:1px solid var(--line,#e2e8f0);}
.compare-retake__nudge{margin:0 0 10px;font-size:14px;line-height:1.5;color:#475569;}
/* Secondary action: keep the retake ghost quiet but on-brand (navy outline, not inherited near-black). */
.compare-retake .btn--ghost{color:var(--primary,#0f2740);}

/* Benchmark-unlock opt-in — a centered branded callout so the opt-in reads as part of the design,
   not bare floating markup; the CTA is this view's conversion action so it uses the brand cyan. */
.bench-notify-me{max-width:560px;margin:22px auto 0;padding:20px 22px;
  background:var(--paper,#f6f9fc);border:1px solid var(--line,#e2e8f0);border-radius:12px;text-align:center;}
.bench-notify-me__label{margin:0 0 14px;font-size:14px;line-height:1.55;color:#475569;}
.bench-notify-me .btn{margin:0 auto;}
.bench-notify-confirmed{margin:0;font-size:14px;line-height:1.55;color:#475569;font-weight:600;}
@media(max-width:480px){.bench-notify-me .btn{width:100%;}}

/* ── P2-A: byline link tap target — the "by SQALogic" link is 18px; expand its
   clickable area via padding so the composite target clears 40px on mobile. ── */
@media(max-width:640px){
  .brand .byline{padding:6px 0;}
}

/* ── P1-C: FR unlocking pill — allow the lock pill to wrap in narrow contexts
   (the default nowrap overflows table cells and stacked cards on mobile). ── */
@media(max-width:640px){
  .pill.lock{white-space:normal;max-width:200px;font-size:9.5px;line-height:1.4;}
  .pill--sm.lock{max-width:160px;}
}

/* ── P2-C: Active-filter chip row on Compare — on narrow viewports truncate
   chip labels and cap the row at 2 lines so it doesn't stack into a column. ── */
@media(max-width:640px){
  .filter-chips{max-height:calc(2 * 36px + 8px);overflow:hidden;position:relative;}
  /* The label prefix (e.g. "Filtered by:") takes full width on mobile; chips below. */
  .filter-chips-label{flex-basis:100%;margin-bottom:4px;}
  /* Chip labels: truncate text at ~120px so they stay on one line each. */
  .chip.chip--active.chip-remove{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}

/* ── P2-D: Compare "you"-marker label — clamp position so it never clips at bar
   edges. overflow:visible on bar-wrap lets the label escape the bar's bounding box.
   On ≤480px shrink the label font so it fits even at extreme scores. ── */
.compare-track__bar-wrap{overflow:visible;}
/* Fix #8: "you" marker label — 9px + weight:800 for legibility on narrow phones. */
@media(max-width:480px){
  .bench-overlay-marker__label{font-size:9px;font-weight:800;}
}
/* Clamp is applied via the inline style left:N% — we can't override the value from
   CSS alone, but we CAN prevent the label from going out of view by using
   translateX with a clamped offset. We let the dot sit anywhere on the bar
   but constrain the label with a min/max via margin-based trick: */
.bench-overlay-marker{overflow:visible;}

/* ── P3-A: National map legend — stack vertically at ≤360px so the scale +
   text don't overflow the narrow viewport. ── */
@media(max-width:360px){
  .legend{flex-direction:column;align-items:flex-start;gap:6px;}
  .legend .scale{width:100%;flex:none;}
}

/* ── P3-C: Feedback FAB — on ≤640px offset to bottom-right but with extra
   bottom clearance to avoid occluding the table/card content. Move to bottom-left
   so it doesn't overlap the right-aligned table controls. ── */
@media(max-width:640px){
  .clfb-fab{right:auto;left:16px;bottom:16px;}
  .clfb-dialog{right:auto;left:16px;bottom:16px;width:min(400px,calc(100vw - 32px));}
}
/* Fix #6: FAB clearance at ≤480px — raise the FAB so it never overlaps the filter
   chips, sub-sector cards, or "Over 2,000" chip that sit at the bottom of the
   explore and compare views on narrow phones (72px clears the filter bar). */
@media(max-width:480px){
  .clfb-fab{bottom:72px;}
}

/* ── P3-D: Compare funnel email + CTA — on ≤400px stack to full-width blocks;
   the FR CTA ("Voir ma position →") must not wrap inside the button. ── */
@media(max-width:400px){
  .compare-funnel{padding:24px 16px;}
  .compare-funnel__email-row{flex-direction:column;align-items:stretch;}
  .compare-funnel__email-row input[type=email]{flex:none;width:100%;}
  .compare-funnel__email-row .btn{flex:none;width:100%;white-space:nowrap;text-align:center;}
  .compare-funnel .btn-row{flex-direction:column;align-items:stretch;}
  .compare-funnel .btn-row .btn{width:100%;text-align:center;white-space:nowrap;}
}

/* ── P1-A + P2-B: Mobile sector cards + province select ──
   These are the two largest structural mobile changes. ── */

/* P2-B: Province chip grid → <select> on mobile.
   On ≥640px: hide the select, show the chips.
   On <640px: hide the chips, show the select. */
.bench-prov-chips{display:flex;flex-wrap:wrap;gap:6px;}
.bench-prov-select-wrap{display:none;}
@media(max-width:640px){
  .bench-prov-chips{display:none;}
  .bench-prov-select-wrap{display:block;}
  .bench-prov-select{width:100%;padding:10px 12px;font-size:14px;font-family:inherit;
                     border:1.5px solid #c9d0da;border-radius:6px;background:#fff;
                     color:var(--ink);appearance:none;-webkit-appearance:none;
                     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23555'/%3E%3C/svg%3E");
                     background-repeat:no-repeat;background-position:right 12px center;}
}

/* NAICS sub-sector <select> — was unstyled (OS-default font), so its text didn't match the
   filter chips/labels. Give it the page font + the same control look as the province select. */
.naics-select{font-family:inherit;font-size:13px;color:var(--ink);
  padding:7px 30px 7px 11px;border:1.5px solid #c9d0da;border-radius:6px;background:#fff;
  appearance:none;-webkit-appearance:none;cursor:pointer;max-width:100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23555'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;}
.naics-select:hover{border-color:#aab3bf;}
@media(max-width:640px){ .naics-select{width:100%;font-size:14px;} }

/* P1-A: Desktop sector table + mobile stacked cards.
   The <table> stays visible at ≥640px (untouched).
   The .bench-sector-cards list is hidden at ≥640px, shown as cards at <640px. */
.bench-sector-cards{display:none;}
@media(max-width:640px){
  /* Hide the desktop table scroll container — the cards replace it. */
  .table-scroll.table-wrap{display:none;}
  /* Show the stacked card list. */
  .bench-sector-cards{display:flex;flex-direction:column;gap:10px;margin-top:10px;}

  /* Each card: sector/sub-sector card. */
  .bench-scard{border:1px solid var(--line);border-radius:8px;padding:14px 14px 12px;background:#fff;}
  /* Sub-sector cards: left-border accent to show hierarchy. */
  .bench-scard--sub{border-left:3px solid var(--cyan);padding-left:11px;background:#fafbfc;margin-left:12px;}

  /* Card header row: sector name + status pill. */
  .bench-scard__head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:8px;}
  .bench-scard__name{font-weight:700;font-size:14px;color:var(--primary);flex:1 1 0;min-width:0;}
  .bench-scard--sub .bench-scard__name{font-weight:400;font-size:13px;color:var(--ink);}
  .bench-scard__pill{flex:0 0 auto;}

  /* Pillar chips row — 3 chips side by side (People / Processes / Products). */
  .bench-scard__chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px;}
  .bench-scard__chip{font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:20px;}
  .bench-scard__chip.pe{background:var(--bg-pe);color:var(--pe);}
  .bench-scard__chip.pr{background:var(--bg-pr);color:var(--pr);}
  .bench-scard__chip.pd{background:var(--bg-pd);color:var(--pd);}

  /* Unlocking cards: lockbar full-width below the pill. */
  .bench-scard__lockbar{margin-top:8px;}
  .bench-scard__lockbar .lockbar{max-width:none;width:100%;}

  /* P1-C: pill wrap in card context (already handled by the global ≤640px rule above,
     but re-enforce inside cards for sub-sector pills that have extra-long FR text). */
  .bench-scard .pill{white-space:normal;max-width:180px;font-size:9.5px;line-height:1.4;}

  /* Sub-sector header label inside cards (mirrors the table bench-subsector-head). */
  .bench-scard-subhead{font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
                       color:var(--muted);margin:10px 0 4px;padding-left:0;}
}