/* ── ATLAS AI INSTITUTE · style.css ──
   Editorial / Institutional — Navy & Gold
*/
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy-950:#050d1a;
  --navy-900:#0a1628;
  --navy-800:#0d1f3c;
  --navy-700:#112444;
  --navy-600:#163059;
  --navy-500:#1e3c70;
  --border:#1e3158;
  --border-light:#2a4272;
  --gold:#c9a84c;
  --gold-light:#e2c46a;
  --gold-pale:#f0e4bc;
  --text:#f0ece4;
  --text-muted:#8a9ab8;
  --text-dim:#4a5e82;
  --green:#2db87e;
  --red:#e05252;
  --amber:#e5a524;
  --blue:#4a9eff;
  --font:'Inter',system-ui,sans-serif;
  --serif:'DM Serif Display',Georgia,serif;
  --mono:'JetBrains Mono',monospace;
  --radius:10px;
  --radius-sm:6px;
}

html{font-size:15px;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--navy-900);color:var(--text);min-height:100vh;line-height:1.6}

/* ── TOPBAR ── */
.topbar{background:var(--navy-950);border-bottom:1px solid rgba(201,168,76,.2);padding:.4rem 2rem;display:flex;align-items:center;justify-content:space-between;font-size:.72rem;color:var(--text-dim);letter-spacing:.03em}
.topbar-right{display:flex;align-items:center;gap:1rem}
.ds-bar{padding:.2rem .65rem;border-radius:20px;font-size:.68rem;font-weight:600}
.ds-bar.loading{background:rgba(229,165,36,.1);color:var(--amber);border:1px solid rgba(229,165,36,.2)}
.ds-bar.ready{background:rgba(45,184,126,.1);color:var(--green);border:1px solid rgba(45,184,126,.2)}
.ds-bar.error{background:rgba(224,82,82,.1);color:var(--red);border:1px solid rgba(224,82,82,.2)}

/* ── HEADER ── */
.site-header{background:var(--navy-800);border-bottom:2px solid var(--gold);position:sticky;top:0;z-index:100}
.header-inner{max-width:1320px;margin:0 auto;padding:.85rem 2rem;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:.9rem}
.brand-emblem{width:48px;height:48px;display:grid;place-items:center;flex-shrink:0}
.brand-name{font-family:var(--serif);font-size:1.2rem;font-weight:400;color:var(--gold-pale);letter-spacing:.01em;line-height:1.2}
.brand-sub{font-size:.65rem;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;margin-top:.1rem}
.header-nav{display:flex;align-items:center}
.nav-fw{font-size:.7rem;color:var(--text-dim);letter-spacing:.05em;background:rgba(201,168,76,.07);border:1px solid rgba(201,168,76,.15);border-radius:4px;padding:.3rem .8rem}

/* ── HERO ── */
.hero{background:linear-gradient(180deg,var(--navy-800) 0%,var(--navy-900) 100%);border-bottom:1px solid var(--border);padding:4rem 2rem 3.5rem}
.hero-inner{max-width:900px;margin:0 auto;text-align:center}
.hero-rule{width:60px;height:2px;background:var(--gold);margin:0 auto 1.5rem}
.hero-eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.hero-title{font-family:var(--serif);font-size:clamp(2.4rem,5vw,3.8rem);font-weight:400;line-height:1.15;color:var(--text);margin-bottom:1.25rem}
.hero-title em{color:var(--gold);font-style:italic}
.hero-lead{font-size:1.05rem;color:var(--text-muted);max-width:700px;margin:0 auto 2.5rem;line-height:1.8}
.hero-benchmarks{display:flex;align-items:center;justify-content:center;gap:2.5rem}
.hb-item{text-align:center}
.hb-num{display:block;font-family:var(--serif);font-size:2rem;color:var(--gold);line-height:1}
.hb-lbl{display:block;font-size:.68rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-top:.25rem}
.hb-div{width:1px;height:36px;background:var(--border)}

/* ── TOOL MAIN ── */
.tool-main{max-width:1320px;margin:0 auto;padding:3rem 2rem 5rem}
.tool-inner{display:flex;flex-direction:column;gap:2rem}

/* ── SUBMISSION PANEL ── */
.submit-panel{background:var(--navy-800);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.sp-header{display:flex;align-items:flex-start;gap:1.25rem;padding:1.75rem 2rem 0}
.sp-num{font-family:var(--serif);font-size:2rem;color:var(--gold);opacity:.5;line-height:1;flex-shrink:0}
.sp-title{font-family:var(--serif);font-size:1.3rem;font-weight:400;margin-bottom:.2rem}
.sp-desc{font-size:.82rem;color:var(--text-muted)}

.upload-zone{margin:1.25rem 2rem 0;border:2px dashed var(--border-light);border-radius:var(--radius);padding:2rem 1.5rem;text-align:center;cursor:pointer;transition:border-color .25s,background .25s;background:rgba(255,255,255,.01)}
.upload-zone:hover{border-color:rgba(201,168,76,.4);background:rgba(201,168,76,.03)}
.uz-icon{font-size:2rem;margin-bottom:.5rem;opacity:.7}
.uz-text{font-size:.88rem;font-weight:600;color:var(--text-muted);margin-bottom:.25rem}
.uz-sub{font-size:.72rem;color:var(--text-dim);margin-bottom:.85rem}
.uz-btn{display:inline-block;padding:.45rem 1.1rem;background:var(--navy-700);border:1px solid var(--border-light);border-radius:var(--radius-sm);font-size:.78rem;font-weight:600;color:var(--gold);cursor:pointer;transition:border-color .2s}
.uz-btn:hover{border-color:var(--gold)}
.uz-divider{text-align:center;font-size:.72rem;color:var(--text-dim);margin:0.75rem 2rem 0;display:flex;align-items:center;gap:.75rem}
.uz-divider::before,.uz-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;padding:1.25rem 2rem 0}
.form-group{padding:1rem 2rem 0}
.form-label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:.5rem}
.form-hint{font-weight:400;letter-spacing:0;text-transform:none;color:var(--text-dim)}
.select-wrap{position:relative}
.form-select,.form-input{width:100%;background:var(--navy-700);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.6rem 2rem .6rem .85rem;color:var(--text);font-family:var(--font);font-size:.85rem;outline:none;appearance:none;transition:border-color .2s}
.form-select:focus,.form-input:focus{border-color:rgba(201,168,76,.5)}
.sel-arrow{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--text-muted)}

.textarea-shell{border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;transition:border-color .2s}
.textarea-shell:focus-within{border-color:rgba(201,168,76,.4)}
.form-textarea{width:100%;min-height:240px;resize:vertical;background:var(--navy-700);border:none;padding:1rem;color:var(--text);font-family:var(--font);font-size:.85rem;line-height:1.7;outline:none}
.form-textarea::placeholder{color:var(--text-dim)}
.ta-footer{display:flex;align-items:center;justify-content:space-between;padding:.5rem .85rem;background:rgba(5,13,26,.5);border-top:1px solid var(--border)}
.ta-chars{font-size:.7rem;color:var(--text-dim);font-family:var(--mono)}
.ta-actions{display:flex;gap:.5rem}
.btn-text{font-size:.72rem;color:var(--text-muted);background:none;border:none;cursor:pointer;padding:.25rem .5rem;border-radius:4px;transition:color .2s;font-family:var(--font)}
.btn-text:hover{color:var(--text)}
.btn-text.accent{color:var(--gold)}
.btn-text.accent:hover{color:var(--gold-light)}

.fw-checks{display:flex;flex-wrap:wrap;gap:.65rem}
.fw-check{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.8rem;color:var(--text-muted);padding:.4rem .8rem;border:1px solid var(--border);border-radius:20px;background:var(--navy-700);transition:all .2s;user-select:none}
.fw-check:hover{border-color:rgba(201,168,76,.3);color:var(--text)}
.fw-check input{display:none}
.fwc-box{width:14px;height:14px;border-radius:3px;border:1.5px solid var(--border-light);flex-shrink:0;transition:all .2s;position:relative}
.fw-check input:checked~.fwc-box{background:var(--gold);border-color:var(--gold)}
.fw-check input:checked~.fwc-box::after{content:'';position:absolute;left:3px;top:.5px;width:5px;height:8px;border:1.5px solid var(--navy-900);border-top:none;border-left:none;transform:rotate(40deg)}
.fw-check input:checked~span:last-child{color:var(--gold-pale)}

.submit-actions{padding:1.5rem 2rem;display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.btn-analyze{display:flex;align-items:center;gap:.65rem;padding:.85rem 2rem;background:var(--gold);border:none;border-radius:var(--radius-sm);color:var(--navy-900);font-family:var(--font);font-size:.95rem;font-weight:700;cursor:pointer;transition:background .2s,transform .15s;flex-shrink:0}
.btn-analyze:hover{background:var(--gold-light);transform:translateY(-1px)}
.btn-analyze:disabled{opacity:.5;cursor:not-allowed;transform:none}
.submit-note{font-size:.75rem;color:var(--text-dim);line-height:1.5}
.submit-note strong{color:var(--gold)}

/* ── LOADING ── */
.loading-state{padding:4rem 2rem;text-align:center;background:var(--navy-800);border:1px solid var(--border);border-radius:var(--radius)}
.ls-spinner{position:relative;width:80px;height:80px;margin:0 auto 1.75rem}
.ls-ring{animation:spin 1.5s linear infinite;width:100%;height:100%}
@keyframes spin{to{transform:rotate(360deg)}}
.ls-icon{position:absolute;inset:0;display:grid;place-items:center;font-size:1.6rem;opacity:.7}
.ls-title{font-family:var(--serif);font-size:1.3rem;margin-bottom:1.25rem;color:var(--gold-pale)}
.ls-steps{display:flex;flex-direction:column;gap:.4rem;max-width:320px;margin:0 auto;text-align:left}
.ls-step{font-size:.78rem;color:var(--text-dim);padding:.35rem .75rem;border-radius:5px;border-left:2px solid transparent}
.ls-step.active{color:var(--gold);border-left-color:var(--gold);background:rgba(201,168,76,.07)}
.ls-step.done{color:var(--green);border-left-color:var(--green);background:rgba(45,184,126,.05)}

/* ── RESULTS ── */
.results-area{display:flex;flex-direction:column;gap:1.5rem}
.results-section{background:var(--navy-800);border:1px solid var(--border);border-radius:var(--radius);padding:1.75rem}
.rs-label{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;display:flex;align-items:center;gap:.75rem}
.rs-badge{font-size:.6rem;padding:.15rem .5rem;border-radius:3px;background:rgba(45,184,126,.1);color:var(--green);border:1px solid rgba(45,184,126,.2);text-transform:none;letter-spacing:0;font-weight:600}
.green-label{color:var(--green)}
.red-label{color:var(--red)}

/* Score Header */
.score-header{background:linear-gradient(135deg,var(--navy-700),var(--navy-800));border:1px solid var(--border);border-left:4px solid var(--gold);border-radius:var(--radius);padding:2rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.sh-country{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:.4rem}
.sh-title{font-family:var(--serif);font-size:1.6rem;font-weight:400;color:var(--text);margin-bottom:.5rem}
.sh-meta{font-size:.8rem;color:var(--text-muted)}
.sh-right{display:flex;flex-direction:column;align-items:center;gap:.5rem;flex-shrink:0}
.score-dial{position:relative;width:140px;height:140px}
.dial-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.dial-num{font-family:var(--serif);font-size:2.4rem;line-height:1;color:var(--gold)}
.dial-lbl{font-size:.65rem;color:var(--text-muted)}
.sh-grade{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.3rem .85rem;border-radius:20px}
.sh-grade.advanced{background:rgba(45,184,126,.15);color:var(--green);border:1px solid rgba(45,184,126,.3)}
.sh-grade.developing{background:rgba(229,165,36,.12);color:var(--amber);border:1px solid rgba(229,165,36,.25)}
.sh-grade.emerging{background:rgba(224,82,82,.1);color:var(--red);border:1px solid rgba(224,82,82,.2)}
.sh-grade.nascent{background:rgba(224,82,82,.08);color:var(--red);border:1px solid rgba(224,82,82,.15)}

/* Exec summary */
.exec-box{font-size:.88rem;color:var(--text-muted);line-height:1.85;background:var(--navy-700);border-radius:var(--radius-sm);padding:1.25rem;border-left:3px solid var(--gold)}
.exec-box p+p{margin-top:.65rem}
.exec-box strong{color:var(--text)}

/* Two col section */
.two-col-section{display:grid;grid-template-columns:320px 1fr;gap:2rem;align-items:start}
@media(max-width:900px){.two-col-section{grid-template-columns:1fr}}

/* Framework Compliance */
.fw-compliance-section{}
.fw-compliance-inner{display:grid;grid-template-columns:280px 1fr;gap:2rem;align-items:start}
@media(max-width:860px){.fw-compliance-inner{grid-template-columns:1fr}}
.fw-doughnut-wrap{display:flex;flex-direction:column;align-items:center;gap:1rem}
.fw-doughnut-legend{width:100%;max-width:260px}

/* Radar */
.radar-wrap{display:flex;flex-direction:column;align-items:center;gap:1rem}
.radar-legend{display:flex;flex-wrap:wrap;gap:.4rem .75rem;justify-content:center}
.rl-item{display:flex;align-items:center;gap:.35rem;font-size:.68rem;color:var(--text-muted)}
.rl-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* Pillar list */
.pillar-list{display:flex;flex-direction:column;gap:.75rem}
.pl-item{display:flex;gap:.9rem;align-items:flex-start;padding:.85rem 1rem;background:var(--navy-700);border-radius:var(--radius-sm);border:1px solid var(--border);transition:border-color .2s}
.pl-item:hover{border-color:rgba(201,168,76,.2)}
.pl-grade{width:52px;flex-shrink:0;text-align:center;padding:.2rem .4rem;border-radius:4px;font-size:.65rem;font-weight:700;letter-spacing:.03em}
.pl-grade.high{background:rgba(45,184,126,.15);color:var(--green);border:1px solid rgba(45,184,126,.3)}
.pl-grade.medium{background:rgba(229,165,36,.12);color:var(--amber);border:1px solid rgba(229,165,36,.25)}
.pl-grade.low{background:rgba(224,82,82,.1);color:var(--red);border:1px solid rgba(224,82,82,.2)}
.pl-content{flex:1;min-width:0}
.pl-name{font-size:.85rem;font-weight:600;margin-bottom:.2rem}
.pl-finding{font-size:.75rem;color:var(--text-muted);line-height:1.5}
.pl-citation{font-size:.7rem;color:var(--gold);font-style:italic;font-family:var(--mono);margin-top:.25rem;opacity:.8}
.pl-score-bar{height:3px;background:var(--border);border-radius:2px;margin-top:.4rem}
.pl-score-fill{height:100%;border-radius:2px;transition:width 1s ease}

/* Strengths & Weaknesses */
.sw-section{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;background:none;border:none;padding:0}
.sw-col{background:var(--navy-800);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem}
.strengths-col{border-top:3px solid var(--green)}
.weak-col{border-top:3px solid var(--red)}
.sw-list{display:flex;flex-direction:column;gap:.6rem}
.sw-item{display:flex;gap:.65rem;align-items:flex-start;font-size:.8rem;color:var(--text-muted);line-height:1.5}
.sw-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:.45rem}
.sw-dot.g{background:var(--green)}
.sw-dot.r{background:var(--red)}
@media(max-width:700px){.sw-section{grid-template-columns:1fr}}

/* Peer comparison bars */
.peer-note{font-size:.78rem;color:var(--text-muted);margin-bottom:1.25rem;background:rgba(201,168,76,.05);border:1px solid rgba(201,168,76,.1);border-radius:var(--radius-sm);padding:.65rem 1rem}
.peer-bars{display:flex;flex-direction:column;gap:.65rem}
.pb-row{display:grid;grid-template-columns:140px 1fr 50px;align-items:center;gap:.85rem}
.pb-country{display:flex;align-items:center;gap:.45rem;font-size:.8rem;font-weight:500}
.pb-flag{font-size:1rem}
.pb-track{height:10px;background:rgba(255,255,255,.05);border-radius:5px;overflow:hidden;position:relative}
.pb-fill{height:100%;border-radius:5px;transition:width 1.2s ease;position:relative}
.pb-fill::after{content:attr(data-label);position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:.55rem;font-weight:700;color:rgba(255,255,255,.9);white-space:nowrap}
.pb-score{font-size:.82rem;font-weight:700;font-family:var(--mono);text-align:right}
.pb-row.subject .pb-country{color:var(--gold)}
.pb-row.subject .pb-track{background:rgba(201,168,76,.12)}
@media(max-width:600px){
  .pb-row{grid-template-columns:110px 1fr 40px;gap:.5rem}
  .pb-country{font-size:.72rem}
}

/* Framework compliance grid */
.fw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.fwg-card{background:var(--navy-700);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1.1rem}
.fwg-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.85rem}
.fwg-name{font-size:.8rem;font-weight:700;color:var(--gold-pale)}
.fwg-score{font-family:var(--mono);font-size:.85rem;font-weight:700}
.fwg-items{display:flex;flex-direction:column;gap:.4rem}
.fwg-item{display:flex;align-items:center;gap:.5rem;font-size:.74rem;color:var(--text-muted)}
.fwg-check{width:14px;height:14px;border-radius:3px;flex-shrink:0;display:grid;place-items:center;font-size:.6rem}
.fwg-check.pass{background:rgba(45,184,126,.15);color:var(--green)}
.fwg-check.fail{background:rgba(224,82,82,.1);color:var(--red)}
.fwg-check.partial{background:rgba(229,165,36,.1);color:var(--amber)}

/* Recommendations */
.recs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1rem}
.rec-card{background:var(--navy-700);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1.25rem;border-top:3px solid var(--gold);position:relative}
.rec-priority{font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin-bottom:.3rem}
.rec-title{font-size:.92rem;font-weight:700;margin-bottom:.5rem;color:var(--text)}
.rec-body{font-size:.78rem;color:var(--text-muted);line-height:1.65}
.rec-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.75rem}
.rec-tag{font-size:.62rem;padding:.15rem .5rem;border-radius:3px;background:rgba(74,158,255,.08);color:var(--blue);border:1px solid rgba(74,158,255,.15)}

/* Export bar */
.export-bar{display:flex;gap:.75rem;flex-wrap:wrap;padding:1.25rem;background:var(--navy-700);border:1px solid var(--border);border-radius:var(--radius)}
.btn-export{display:flex;align-items:center;gap:.5rem;padding:.6rem 1.1rem;border-radius:var(--radius-sm);font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s;font-family:var(--font);border:1px solid var(--gold);background:var(--gold);color:var(--navy-900)}
.btn-export:hover{background:var(--gold-light)}
.btn-export.secondary{background:transparent;color:var(--text-muted);border-color:var(--border)}
.btn-export.secondary:hover{border-color:var(--gold);color:var(--gold)}

/* ── REFERENCE STRIP ── */
.ref-strip{background:var(--navy-950);border-top:1px solid var(--border);padding:1.25rem 2rem}
.ref-inner{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.ref-label{font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);flex-shrink:0;white-space:nowrap}
.ref-countries{display:flex;flex-wrap:wrap;gap:.4rem;flex:1}
.rc-item{font-size:.72rem;color:var(--text-dim);padding:.2rem .6rem;border-radius:3px;border:1px solid var(--border);background:rgba(255,255,255,.02);white-space:nowrap}
.ref-frameworks{display:flex;gap:.4rem;flex-shrink:0}
.rf-badge{font-size:.65rem;font-weight:700;padding:.2rem .6rem;border-radius:3px;letter-spacing:.03em}
.rf-badge.oecd{background:rgba(74,158,255,.1);color:var(--blue);border:1px solid rgba(74,158,255,.2)}
.rf-badge.unesco{background:rgba(201,168,76,.1);color:var(--gold);border:1px solid rgba(201,168,76,.2)}
.rf-badge.eu{background:rgba(45,184,126,.1);color:var(--green);border:1px solid rgba(45,184,126,.2)}
.rf-badge.nist{background:rgba(224,82,82,.08);color:var(--red);border:1px solid rgba(224,82,82,.15)}

/* ── FOOTER ── */
.site-footer{background:var(--navy-950);border-top:1px solid rgba(201,168,76,.15);padding:1.5rem 2rem;text-align:center}
.footer-brand{font-family:var(--serif);font-size:1.1rem;color:var(--gold);margin-bottom:.3rem}
.footer-copy{font-size:.7rem;color:var(--text-dim)}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--navy-800)}
::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:3px}

/* ── HEADER NAV NAVIGATION LINKS ── */
.header-nav {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.header-nav a {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
  letter-spacing: 0.02em;
}
.header-nav a:hover, .header-nav a.active {
  color: var(--gold);
}
.header-nav a.active {
  border-bottom: 2px solid var(--gold);
  padding-bottom: 2px;
}

/* ── SOCIO-ECONOMIC CAPABILITY FIT SECTION ── */
.capability-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 2rem;
  align-items: start;
}
@media(max-width:768px) {
  .capability-grid {
    grid-template-columns: 1fr;
  }
}
.cap-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.cap-score-dial-wrap {
  position: relative;
  width: 140px;
  height: 140px;
}
.cap-dial-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cap-dial-num {
  font-family: var(--serif);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--gold);
}
.cap-dial-lbl {
  font-size: 0.55rem;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 0.15rem;
}
.cap-tier-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  text-align: center;
}
.cap-tier-badge.high {
  background: rgba(45,184,126,0.15);
  color: var(--green);
  border: 1px solid rgba(45,184,126,0.3);
}
.cap-tier-badge.moderate {
  background: rgba(229,165,36,0.12);
  color: var(--amber);
  border: 1px solid rgba(229,165,36,0.25);
}
.cap-tier-badge.low {
  background: rgba(224,82,82,0.1);
  color: var(--red);
  border: 1px solid rgba(224,82,82,0.2);
}
.cap-right {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cap-subheading {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold-pale);
  margin-bottom: 0.5rem;
}
.cap-progress-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.cap-prog-row {
  display: grid;
  grid-template-columns: 140px 1fr 60px;
  align-items: center;
  gap: 1rem;
}
.cap-prog-name {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
}
.cap-prog-track {
  height: 8px;
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
  overflow: hidden;
}
.cap-prog-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 1s ease;
}
.cap-prog-val {
  font-family: var(--mono);
  font-size: 0.78rem;
  text-align: right;
}
.cap-synthesis-box {
  margin-top: 1.5rem;
  border-top: 1px dashed var(--border);
  padding-top: 1.25rem;
}
.cap-synthesis-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold-pale);
  margin-bottom: 0.75rem;
}
.cap-synthesis-status {
  font-size: 0.6rem;
  color: var(--text-muted);
  font-weight: 600;
  border-radius: 3px;
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.01);
  letter-spacing: 0.02em;
}
.cap-synthesis-content {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.8;
}
.cap-synthesis-content p {
  margin-bottom: 0.75rem;
}
.cap-synthesis-content p:last-child {
  margin-bottom: 0;
}
.cap-synthesis-content strong {
  color: var(--text);
}

/* ── GAP HEATMAP PREMIUM GRID ── */
.heatmap-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
}
.heatmap-grid {
  min-width: 600px;
  display: grid;
  grid-template-columns: 110px repeat(6, 1fr);
  gap: 6px;
  font-size: 0.72rem;
}
.heatmap-header-cell {
  text-align: center;
  color: var(--text-muted);
  font-weight: 600;
  padding: 6px 4px;
}
.heatmap-label-cell {
  color: var(--gold-pale);
  font-weight: 600;
  padding: 6px 0;
  display: flex;
  align-items: center;
}
.heatmap-data-cell {
  border-radius: 4px;
  text-align: center;
  padding: 8px 4px;
  font-weight: 600;
  font-size: 0.72rem;
  transition: all 0.2s ease;
}
.heatmap-data-cell:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* ── MOBILE RESPONSIVENESS OVERRIDES (max-width: 600px) ── */
@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
  .topbar {
    display: none !important;
  }
  .site-header {
    position: sticky !important;
    top: 0;
    z-index: 100;
  }
  .header-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 0.75rem 1rem !important;
    gap: 0.5rem !important;
  }
  .brand {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }
  .brand-emblem { width: 32px; height: 32px; }
  .brand-name {
    font-size: 0.88rem !important;
    white-space: nowrap;
  }
  .brand-sub {
    display: none !important;
  }
  .header-nav {
    flex-wrap: wrap !important;
    gap: 0.4rem 0.75rem !important;
    width: 100% !important;
  }
  .header-nav a {
    font-size: 0.72rem !important;
  }
  .nav-fw {
    display: none !important;
  }

  /* Hero */
  .hero {
    padding: 2.5rem 1rem 2rem;
  }
  .hero-title {
    font-size: clamp(1.8rem, 8vw, 2.4rem) !important;
  }
  .hero-lead {
    font-size: 0.88rem;
    padding: 0 0.25rem;
    margin-bottom: 1.75rem;
  }
  .hero-benchmarks {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
    text-align: center;
  }
  .hb-div {
    display: none !important;
  }
  .hb-item {
    background: rgba(201,168,76,.06);
    border: 1px solid rgba(201,168,76,.15);
    border-radius: 8px;
    padding: 0.65rem 0.5rem;
  }
  .hb-num { font-size: 1.6rem; }
  .hb-lbl { font-size: 0.62rem; }

  /* Tool main */
  .tool-main {
    padding: 1.25rem 0.75rem 3rem;
  }
  .sp-header {
    padding: 1rem 1rem 0;
    gap: 0.75rem;
  }
  .sp-num { font-size: 1.5rem; }
  .sp-title { font-size: 1.1rem; }
  .form-row {
    grid-template-columns: 1fr !important;
    padding: 0.75rem 1rem 0;
  }
  .form-group {
    padding: 0.75rem 1rem 0;
  }
  .upload-zone {
    padding: 1.25rem 1rem;
  }
  .fw-checks {
    gap: 0.4rem;
  }
  .fw-check {
    font-size: 0.71rem;
    padding: 0.3rem 0.55rem;
  }
  .submit-actions {
    padding: 1rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .btn-analyze {
    width: 100%;
    justify-content: center;
    padding: 0.95rem 1rem;
    font-size: 0.95rem;
  }
  .submit-note {
    text-align: center;
    font-size: 0.7rem;
  }

  /* Results */
  .results-section {
    padding: 1.25rem 1rem;
  }
  .score-header {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 1.25rem;
    padding: 1.25rem 1rem;
  }
  .sh-left { width: 100%; }
  .sh-right {
    align-items: center;
    flex-direction: row !important;
    gap: 1.25rem;
    justify-content: center;
  }
  .score-dial { width: 110px; height: 110px; }
  .dial-num { font-size: 2rem; }

  /* Capability section */
  .capability-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem;
  }
  .cap-left {
    flex-direction: row !important;
    gap: 1.25rem;
    align-items: center;
  }
  .cap-prog-row {
    grid-template-columns: 1fr 44px;
    gap: 0.4rem;
  }
  .cap-prog-name {
    grid-column: span 2;
    font-size: 0.73rem;
  }
  .cap-synthesis-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  /* Strengths & weaknesses */
  .sw-section {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  /* Two-col section */
  .two-col-section {
    grid-template-columns: 1fr !important;
  }

  /* Framework compliance */
  .fw-compliance-inner {
    grid-template-columns: 1fr !important;
    gap: 1.25rem;
  }
  .fw-doughnut-wrap canvas {
    max-width: 200px !important;
    max-height: 200px !important;
  }
  .fw-grid {
    grid-template-columns: 1fr !important;
  }

  /* Heatmap */
  .heatmap-grid {
    min-width: 380px;
    font-size: 0.62rem;
    gap: 4px;
    grid-template-columns: 90px repeat(6, 1fr);
  }
  .heatmap-data-cell {
    padding: 5px 2px;
    font-size: 0.6rem;
  }
  .heatmap-header-cell {
    font-size: 0.58rem;
    padding: 4px 2px;
  }
  .heatmap-label-cell {
    font-size: 0.6rem;
  }

  /* Recs */
  .recs-grid {
    grid-template-columns: 1fr !important;
  }

  /* Export */
  .export-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    padding: 1rem;
  }
  .btn-export {
    width: 100%;
    justify-content: center;
    padding: 0.75rem 1rem;
  }

  /* Ref strip */
  .ref-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
  }
  .ref-frameworks {
    flex-wrap: wrap;
    gap: 0.35rem;
  }
}

/* ── TABLET (601–900px) ── */
@media (min-width: 601px) and (max-width: 900px) {
  .header-inner { padding: 0.75rem 1.25rem; }
  .hero-benchmarks {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
  }
  .hb-div { display: none; }
  .two-col-section { grid-template-columns: 1fr; }
  .fw-compliance-inner { grid-template-columns: 1fr; }
  .tool-main { padding: 2rem 1.25rem 4rem; }
  .results-section { padding: 1.5rem 1.25rem; }
  .recs-grid { grid-template-columns: 1fr; }
}