/* ============================================================
   D5 System Score — diagnostic experience
   Layered on top of site.css. Executive-report aesthetics:
   structure, whitespace, restraint.
   ============================================================ */

  /* ---------- Shared scaffolding ---------- */
  .d5-narrow{max-width:900px; margin:0 auto;}
  .d5-eyebrow{
    font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.16em;
    text-transform:uppercase; color:var(--blue); font-weight:600; margin-bottom:18px;
  }
  
  /* ---------- Hero ---------- */
  .d5-hero{
    background:radial-gradient(1000px 480px at 78% -10%, rgba(247,149,82,0.13), transparent 62%),
               linear-gradient(180deg,#0B1B30 0%, #0C1D34 100%);
    padding:clamp(56px,6vw,88px) 0 clamp(52px,6vw,76px);
    border-bottom:1px solid var(--line-soft);
  }
  .d5-hero h1{font-size:clamp(32px,4.2vw,52px); max-width:780px; line-height:1.1;}
  .d5-hero h1 em{font-style:normal; color:var(--green-bright);}
  .d5-hero .sub{margin-top:24px; color:var(--ink-mid); font-size:17.5px; max-width:620px;}
  .d5-hero .sub + .sub{margin-top:14px;}
  .d5-hero-actions{margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; align-items:center;}
  .d5-meta{
    margin-top:26px; display:flex; gap:26px; flex-wrap:wrap;
    font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-low); letter-spacing:0.04em;
  }
  .d5-meta span{display:inline-flex; align-items:center; gap:8px;}
  .d5-meta span::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--green);}

  /* ---------- Growth → complexity diagram ---------- */
  .flowchain{
    display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:8px;
    border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--surface);
  }
  .flowstep{padding:28px 24px; border-right:1px solid var(--line-soft); position:relative;}
  .flowstep:last-child{border-right:none;}
  .flowstep .n{
    font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.14em;
    color:var(--ink-low); margin-bottom:12px;
  }
  .flowstep h3{font-size:17.5px; margin-bottom:8px;}
  .flowstep p{font-size:13.5px; color:var(--ink-mid); line-height:1.55;}
  .flowstep.terminal{background:linear-gradient(160deg, rgba(232,128,47,0.14), rgba(232,128,47,0.04));}
  .flowstep.terminal h3{color:var(--green-bright);}

  /* ---------- Six pillars ---------- */
  .pillar-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
  .pillar-card{
    background:var(--surface); border:1px solid var(--line); border-radius:14px;
    padding:26px 26px 28px; transition:border-color 0.18s ease, transform 0.18s ease;
  }
  .pillar-card:hover{border-color:var(--blue-line); transform:translateY(-2px);}
  .pillar-card .pic{
    width:40px; height:40px; border-radius:10px; background:var(--blue-tint); color:var(--blue-bright);
    display:flex; align-items:center; justify-content:center; margin-bottom:18px;
  }
  .pillar-card .pic svg{width:20px; height:20px;}
  .pillar-card .n{
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.14em;
    color:var(--ink-low); margin-bottom:7px;
  }
  .pillar-card h3{font-size:18px; margin-bottom:9px;}
  .pillar-card p{font-size:14px; color:var(--ink-mid); line-height:1.6;}

  /* ---------- Assessment shell ---------- */
  .assess{
    background:var(--surface); border:1px solid var(--line); border-radius:20px;
    box-shadow:var(--shadow-lg); overflow:hidden; max-width:820px; margin:0 auto;
    scroll-margin-top:88px;   /* clear the sticky nav when scrolled into view */
  }
  #d5Results{scroll-margin-top:88px;}
  .assess-head{
    padding:22px 32px; border-bottom:1px solid var(--line-soft);
    display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  }
  .assess-head .lbl{
    font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.14em;
    text-transform:uppercase; color:var(--green-bright); font-weight:600;
  }
  .assess-head .count{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--ink-mid);}
  .prog{height:3px; background:rgba(255,255,255,0.09); position:relative; overflow:hidden;}
  .prog span{
    display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--green),var(--green-bright));
    transition:width 0.42s cubic-bezier(.4,0,.2,1);
  }
  .assess-body{padding:clamp(32px,4vw,52px);}

  /* Intro / start panel */
  .assess-intro h2{font-size:clamp(23px,2.6vw,30px); margin-bottom:16px;}
  .assess-intro p{color:var(--ink-mid); font-size:16px; margin-bottom:14px;}
  .assess-facts{
    display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:28px 0 30px;
  }
  .assess-fact{
    background:var(--mist); border:1px solid var(--line-soft); border-radius:11px; padding:18px 20px;
  }
  .assess-fact .k{
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.12em;
    text-transform:uppercase; color:var(--ink-low); margin-bottom:8px;
  }
  .assess-fact .v{font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:16px; color:var(--head);}

  /* Question card */
  .q-cat{
    font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.14em;
    text-transform:uppercase; color:var(--blue); font-weight:600; margin-bottom:18px;
    display:flex; align-items:center; gap:10px;
  }
  .q-cat::before{content:""; width:20px; height:2px; background:var(--blue); border-radius:2px;}
  .q-text{
    font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:clamp(20px,2.4vw,27px);
    line-height:1.35; color:var(--head); margin-bottom:32px; max-width:640px;
  }
  .q-help{
    font-size:13.5px; color:var(--ink-low); margin:-22px 0 30px;
    font-family:'IBM Plex Mono',monospace; letter-spacing:0.02em;
  }
  .opts{display:flex; flex-direction:column; gap:10px;}
  .opt{
    display:flex; align-items:center; gap:15px; width:100%; text-align:left; cursor:pointer;
    background:var(--mist); border:1.5px solid var(--line); border-radius:11px;
    padding:16px 20px; color:var(--ink); font-family:'Inter',sans-serif; font-size:15.5px;
    transition:border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
  }
  .opt:hover{border-color:var(--blue); background:var(--mist-2);}
  .opt .key{
    flex:none; width:26px; height:26px; border-radius:7px; background:rgba(255,255,255,0.07);
    border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
    font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-low); font-weight:600;
  }
  .opt.sel{border-color:var(--green); background:rgba(232,128,47,0.10);}
  .opt.sel .key{background:var(--green); border-color:var(--green); color:#fff;}
  /* Focus is blue so it never reads as a selection — orange means chosen. */
  .opt:focus-visible{outline:2px solid var(--blue-bright); outline-offset:2px;}
  .opt .txt{flex:1;}
  .assess-nav{
    margin-top:28px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  }
  .assess-back{
    background:none; border:none; color:var(--ink-low); font-family:'Inter',sans-serif;
    font-size:14px; cursor:pointer; padding:8px 0; display:inline-flex; align-items:center; gap:8px;
  }
  .assess-back:hover{color:var(--head);}
  .assess-back[hidden]{display:none;}
  .assess-hint{font-size:12.5px; color:var(--ink-low); font-family:'IBM Plex Mono',monospace;}
  .q-stage{animation:qIn 0.32s cubic-bezier(.4,0,.2,1);}
  @keyframes qIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
  @media (prefers-reduced-motion: reduce){ .q-stage{animation:none;} }

  /* Resume banner */
  .resume{
    background:rgba(62,118,178,0.12); border:1px solid var(--blue-line); border-radius:11px;
    padding:16px 20px; margin-bottom:24px; display:flex; align-items:center;
    justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:14.5px; color:var(--ink);
  }
  .resume button{
    background:none; border:none; color:var(--green-bright); cursor:pointer;
    font-family:'Inter',sans-serif; font-size:14px; font-weight:600; text-decoration:underline;
    text-underline-offset:3px; padding:0;
  }

  /* ---------- Results ---------- */
  .result-head{
    display:grid; grid-template-columns:auto 1fr; gap:clamp(28px,4vw,52px); align-items:center;
    padding:clamp(30px,4vw,44px); background:var(--grad-deep);
    border:1px solid var(--line); border-radius:18px;
  }
  .score-dial{position:relative; width:190px; height:190px; flex:none;}
  .score-dial svg{width:100%; height:100%; transform:rotate(-90deg);}
  .score-dial .val{
    position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; text-align:center;
  }
  .score-dial .num{
    font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:52px;
    color:#fff; line-height:1; letter-spacing:-0.03em;
  }
  .score-dial .den{font-family:'IBM Plex Mono',monospace; font-size:12px; color:rgba(255,255,255,0.55); margin-top:6px;}
  .result-head .lbl{
    font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.16em;
    text-transform:uppercase; color:#FFC79A; font-weight:600; margin-bottom:12px;
  }
  .result-head h2{font-size:clamp(26px,3.2vw,38px); color:#fff; margin-bottom:16px;}
  .result-head p{color:rgba(255,255,255,0.82); font-size:16px; line-height:1.65;}

  .classification{
    display:inline-flex; align-items:center; gap:10px; padding:7px 16px; border-radius:100px;
    font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:13.5px;
    background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.22); color:#fff;
    margin-bottom:16px;
  }
  .classification .dot{width:8px; height:8px; border-radius:50%; background:var(--green-bright);}

  /* Radar + category bars */
  .result-split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3vw,36px); margin-top:24px;}
  .panel{
    background:var(--surface); border:1px solid var(--line); border-radius:16px;
    padding:clamp(24px,3vw,32px);
  }
  .panel > h3{
    font-size:16px; margin-bottom:6px;
  }
  .panel > .psub{
    font-size:13px; color:var(--ink-low); margin-bottom:22px;
    font-family:'IBM Plex Mono',monospace; letter-spacing:0.02em;
  }
  .radar-wrap{display:flex; align-items:center; justify-content:center; margin:-4px -8px 0;}
  .radar{width:100%; max-width:460px; height:auto; overflow:visible;}
  .radar .ring{fill:none; stroke:rgba(255,255,255,0.10); stroke-width:1;}
  .radar .ring.outer{stroke:rgba(255,255,255,0.20);}
  .radar .spoke{stroke:rgba(255,255,255,0.10); stroke-width:1;}
  .radar .area{fill:rgba(232,128,47,0.22); stroke:var(--green-bright); stroke-width:2; stroke-linejoin:round;}
  .radar .pt{fill:var(--green-bright); stroke:var(--paper); stroke-width:2;}
  .radar .axis-label{
    font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:0.08em;
    fill:var(--ink-mid); text-transform:uppercase;
  }
  .radar .ring-label{font-family:'IBM Plex Mono',monospace; font-size:8px; fill:var(--ink-low);}

  .catbars{display:flex; flex-direction:column; gap:16px;}
  .catbar .top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:7px;}
  .catbar .nm{font-size:14.5px; color:var(--ink); font-weight:500;}
  .catbar .sc{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--head); font-weight:600;}
  .catbar .track{height:7px; background:rgba(255,255,255,0.08); border-radius:100px; overflow:hidden;}
  .catbar .fill{
    height:100%; border-radius:100px; width:0;
    transition:width 0.9s cubic-bezier(.3,0,.2,1);
  }
  .catbar .fill.hi{background:linear-gradient(90deg,#4E9E6A,#68C088);}
  .catbar .fill.mid{background:linear-gradient(90deg,var(--green),var(--green-bright));}
  .catbar .fill.lo{background:linear-gradient(90deg,#C4544A,#F0705F);}

  /* Observations / consequences / next level */
  .obs-list{display:flex; flex-direction:column; gap:0;}
  .obs{
    display:flex; gap:15px; align-items:flex-start; padding:17px 0;
    border-bottom:1px solid var(--line-soft); font-size:15px; color:var(--ink-mid); line-height:1.6;
  }
  .obs:last-child{border-bottom:none;}
  .obs .m{
    flex:none; width:22px; height:22px; border-radius:6px; background:var(--blue-tint);
    color:var(--blue-bright); display:flex; align-items:center; justify-content:center; margin-top:2px;
  }
  .obs .m svg{width:12px; height:12px;}

  .cost-panel{
    background:rgba(240,110,95,0.07); border:1px solid rgba(240,110,95,0.22); border-radius:16px;
    padding:clamp(26px,3vw,36px);
  }
  .cost-panel h3{font-size:19px; margin-bottom:8px;}
  .cost-panel .lead-in{font-size:15.5px; color:var(--ink-mid); margin-bottom:22px;}
  .cost-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 26px;}
  .cost-item{
    display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--ink); padding:9px 0;
  }
  .cost-item .a{color:#F0705F; flex:none; font-family:'IBM Plex Mono',monospace; font-weight:600;}

  .next-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 30px;}
  .next-item{
    display:flex; gap:13px; align-items:flex-start; padding:12px 0;
    border-bottom:1px solid var(--line-soft); font-size:15px; color:var(--ink);
  }
  .next-item .ck{
    flex:none; width:22px; height:22px; border-radius:6px; background:var(--green-tint);
    color:var(--green-bright); display:flex; align-items:center; justify-content:center; margin-top:1px;
  }
  .next-item .ck svg{width:13px; height:13px;}

  /* Maturity ladder */
  .ladder{display:flex; flex-direction:column; gap:8px;}
  .rung{
    display:grid; grid-template-columns:120px 1fr; gap:24px; align-items:center;
    padding:20px 24px; border:1px solid var(--line-soft); border-radius:12px;
    background:var(--surface); transition:border-color 0.2s ease;
  }
  .rung .band{
    font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--ink-low); font-weight:600;
  }
  .rung h3{font-size:17px; margin-bottom:5px;}
  .rung p{font-size:14px; color:var(--ink-mid); line-height:1.55;}
  .rung.you{
    border-color:var(--green); background:linear-gradient(160deg, rgba(232,128,47,0.13), rgba(232,128,47,0.03));
  }
  .rung.you .band{color:var(--green-bright);}
  .rung .youtag{
    display:inline-block; margin-left:10px; padding:3px 10px; border-radius:100px;
    background:var(--green); color:#fff; font-family:'IBM Plex Mono',monospace;
    font-size:10px; letter-spacing:0.1em; vertical-align:middle;
  }

  /* Unlock gate */
  .unlock{
    background:var(--grad); border:1px solid var(--line); border-radius:18px;
    padding:clamp(30px,4vw,44px); box-shadow:var(--shadow-lg);
    display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,48px); align-items:center;
  }
  .unlock h3{font-size:clamp(21px,2.5vw,27px); color:#fff; margin-bottom:14px;}
  .unlock > div > p{color:rgba(255,255,255,0.80); font-size:15.5px; margin-bottom:20px;}
  .unlock-list{display:flex; flex-direction:column; gap:9px;}
  .unlock-list div{
    display:flex; gap:11px; align-items:flex-start; color:rgba(255,255,255,0.88); font-size:14.5px;
  }
  .unlock-list .ck{color:var(--green-bright); flex:none;}
  .unlock-list .ck svg{width:15px; height:15px; margin-top:3px;}
  .unlock form{display:flex; flex-direction:column; gap:13px;}
  .unlock label{
    display:block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.1em;
    text-transform:uppercase; color:rgba(255,255,255,0.65); margin-bottom:7px;
  }
  .unlock input{
    width:100%; padding:13px 15px; border-radius:9px; border:1px solid rgba(255,255,255,0.20);
    background:rgba(0,0,0,0.22); color:#fff; font-family:'Inter',sans-serif; font-size:15px;
  }
  .unlock input:focus{outline:none; border-color:var(--green-bright); background:rgba(0,0,0,0.32);}
  .unlock .privacy{
    font-size:12px; color:rgba(255,255,255,0.55); margin-top:4px; line-height:1.5;
  }

  /* Report actions */
  .report-actions{
    display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center;
    padding:26px; background:var(--mist); border:1px solid var(--line-soft); border-radius:14px;
  }
  .report-actions .copied{font-size:13px; color:var(--green-bright); font-family:'IBM Plex Mono',monospace;}
  .btn-quiet{
    background:transparent; border:1.5px solid var(--line); color:var(--head); cursor:pointer;
    font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:14px;
    padding:13px 24px; border-radius:9px; display:inline-flex; align-items:center; gap:9px;
  }
  .btn-quiet:hover{border-color:var(--blue); color:var(--blue-bright);}
  .btn-quiet svg{width:16px; height:16px;}


  /* --- Business-name field on the intro screen --- */
  .biz-field{margin:26px 0 28px; max-width:420px;}
  .biz-field label{
    display:block; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.12em;
    text-transform:uppercase; color:var(--ink-low); margin-bottom:9px;
  }
  .biz-field input{
    width:100%; padding:14px 16px; border-radius:10px; border:1.5px solid var(--line);
    background:var(--mist); color:var(--ink); font-family:'Inter',sans-serif; font-size:15.5px;
  }
  .biz-field input:focus{outline:none; border-color:var(--blue); background:var(--mist-2);}
  .biz-note{margin-top:9px; font-size:12.5px; color:var(--ink-low);}

  /* --- Preset band explanation --- */
  .reading-panel{border-left:3px solid var(--green);}
  .reading{display:flex; flex-direction:column; gap:0;}
  .reading-block{padding:20px 0; border-bottom:1px solid var(--line-soft);}
  .reading-block:last-child{border-bottom:none; padding-bottom:0;}
  .reading-block:first-child{padding-top:0;}
  .reading-block h4{
    font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.14em;
    text-transform:uppercase; color:var(--green-bright); font-weight:600; margin-bottom:10px;
  }
  .reading-block p{font-size:15.5px; color:var(--ink-mid); line-height:1.68;}

  /* --- Form confirmation --- */
  .form-done{
    margin-top:12px; padding:12px 14px; border-radius:9px; font-size:14px;
    background:rgba(104,192,136,0.14); border:1px solid rgba(104,192,136,0.34); color:#9FE0B8;
  }
  .form-done[hidden]{display:none;}

  /* ---------- Responsive ---------- */
  @media (max-width: 980px){
    .pillar-grid{grid-template-columns:1fr 1fr;}
    .flowchain{grid-template-columns:1fr 1fr;}
    .flowstep{border-bottom:1px solid var(--line-soft);}
    .result-split{grid-template-columns:1fr;}
    .unlock{grid-template-columns:1fr;}
    .result-head{grid-template-columns:1fr; text-align:center; justify-items:center;}
  }
  @media (max-width: 620px){
    .pillar-grid{grid-template-columns:1fr;}
    .flowchain{grid-template-columns:1fr;}
    .assess-facts{grid-template-columns:1fr;}
    .cost-grid, .next-grid{grid-template-columns:1fr;}
    .rung{grid-template-columns:1fr; gap:10px;}
    .assess-body{padding:26px 20px;}
    .assess-head{padding:18px 20px;}
    .score-dial{width:160px; height:160px;}
    .score-dial .num{font-size:44px;}
    .opt{padding:15px 16px; font-size:15px;}
  }

  /* ---------- Print: the executive report ---------- */
  @media print{
    @page{margin:16mm;}
    :root{color-scheme:light;}
    body{background:#fff !important; color:#111 !important;}
    nav, footer, .skip-link, .d5-hero-actions, .report-actions,
    .unlock, .assess-intro, .no-print, .cta-band{display:none !important;}
    .print-only{display:block !important;}
    section{padding:14px 0 !important;}
    .wrap{padding:0 !important; max-width:100% !important;}
    h1,h2,h3,h4{color:#0C1D34 !important;}
    p, .obs, .next-item, .cost-item, li, .catbar .nm{color:#333 !important;}
    .panel, .result-head, .cost-panel, .rung, .assess{
      background:#fff !important; border:1px solid #ccd5e0 !important;
      box-shadow:none !important; break-inside:avoid; page-break-inside:avoid;
    }
    .result-head .lbl, .result-head h2, .result-head p, .classification{color:#0C1D34 !important;}
    .classification{background:#F2F5F9 !important; border-color:#ccd5e0 !important;}
    .score-dial .num{color:#0C1D34 !important;}
    .score-dial .den{color:#667 !important;}
    .radar .axis-label{fill:#445 !important;}
    .radar .ring, .radar .spoke{stroke:#ccd5e0 !important;}
    .catbar .track{background:#E8EDF3 !important;}
    a{color:#0C1D34 !important; text-decoration:none !important;}
    .reveal{opacity:1 !important; transform:none !important;}
  }
  .print-only{display:none;}
  .print-head{border-bottom:2px solid #0C1D34; padding-bottom:14px; margin-bottom:24px;}
  .print-head h1{font-size:22px; margin-bottom:4px;}
  .print-head p{font-size:12px; color:#667;}