/* Self-assess calculator — embedded as a collapsed section inside index.html
   (id="selfAssessSection"), not a standalone page. Scoped under
   #selfAssessSection rather than :root so its own tokens never collide
   with marketing.css's (both declare --navy/--cyan/etc. with different
   values). Calculation logic itself is untouched — this file is styling
   only.

   Converted to UI_DESIGN_THEME.md's system (was the original file's own
   legacy blue/cyan/purple three-accent palette + Space Grotesk):
     - --navy/--navy2/--navy3 now match the site's real navy-black stack
     - --cyan/--blue/--purple all collapse to the SAME lime accent
       (UI_DESIGN_THEME.md §1: "one accent color, not a palette of
       accents" — the old cyan-vs-purple mode differentiation is gone;
       both modes now look identical except for their copy/icons)
     - every gradient button/badge background becomes a flat lime fill
       with dark navy text, per the theme's documented conversion
       procedure (§2, step 3) — no gradients outside the hero
     - --fd is Archivo, matching the rest of the site, not Space Grotesk
     - LIGHT-SURFACE TEXT is the one place this file deliberately does
       NOT just use the accent token: lime has very low contrast as text
       on a near-white background (the same constraint already solved on
       the homepage's light sections — see marketing.css's own comments).
       Every accent-colored TEXT value sitting on a light card
       (.res-label, the old .cyan/.purple result-value classes, the net-
       gain figure) uses a real status color (green/amber) or dark ink
       instead — accent usage on these light cards is limited to
       backgrounds/borders, exactly as the theme prescribes.
*/
#selfAssessSection {
  --navy:#0A1420; --navy2:#0F1D2E; --navy3:#152838;
  --cyan:#9FE838; --cyan2:rgba(159,232,56,.12);
  --blue:#9FE838; --green:#10D98A; --amber:#F79009; --red:#F04438; --purple:#9FE838;
  --w1:rgba(255,255,255,.96); --w2:rgba(255,255,255,.65);
  --w3:rgba(255,255,255,.35); --w4:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.08); --border2:rgba(159,232,56,.28);
  --fd:'Archivo',sans-serif; --fb:'Inter',sans-serif; --fm:'JetBrains Mono',monospace;

  font-family: var(--fb);
  background: var(--navy);
  color: var(--w1);
  -webkit-font-smoothing: antialiased;
  border-radius: 20px;
  overflow: hidden;
}

#selfAssessSection { padding-bottom: 60px; margin-top: 28px; }

/* Reveal mechanism — a native <details>/<summary> accordion, the same
   pattern this page's own FAQ uses (marketing.css's .mkt-faq-item), so the
   calculator gets a real, explicit collapse control (clicking the trigger
   again) instead of the old always-collapsed-until-CTA-scrolls-to-it
   behaviour. Sits in normal document flow, so FAQ/Contact/Footer below it
   are entirely unaffected by whether this is open or closed. */
.self-assess-intro { text-align: center; max-width: 640px; margin: 0 auto 32px; }
.self-assess-intro .mkt-eyebrow-label,
.self-assess-intro .mkt-h2-sub { margin-left: auto; margin-right: auto; }
.self-assess-intro .mkt-eyebrow-label { justify-content: center; }

.self-assess-details { max-width: 780px; margin: 0 auto; text-align: center; }
.self-assess-trigger {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--blue, #9FE838);
  color: #0D1526; font-family: 'Archivo',sans-serif; font-weight: 700; font-size: 14.5px;
  padding: 15px 26px; border-radius: 100px; cursor: pointer;
  box-shadow: 0 10px 30px rgba(159,232,56,.22);
  list-style: none; user-select: none;
}
.self-assess-trigger::-webkit-details-marker { display: none; }
.self-assess-trigger svg { transition: transform .2s; }
.self-assess-details[open] .self-assess-trigger { border-radius: 20px 20px 0 0; margin-bottom: 0; }
.self-assess-details[open] .self-assess-trigger svg { transform: rotate(90deg); }
.self-assess-details[open] #selfAssessSection { border-radius: 0 0 20px 20px; margin-top: 0; }

#selfAssessSection .prog-bar{height:3px;background:rgba(255,255,255,.06);}
#selfAssessSection .prog-fill{height:100%;background:var(--blue);transition:width .4s ease;width:0%;}

#selfAssessSection .header{padding:40px 24px 24px;max-width:780px;margin:0 auto;text-align:center;}
#selfAssessSection .eyebrow{font-family:var(--fm);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin-bottom:14px;}
#selfAssessSection .header h2{font-family:var(--fd);font-size:clamp(1.7rem,5vw,2.6rem);font-weight:600;line-height:1.1;color:var(--w1);margin-bottom:12px;}
#selfAssessSection .header h2 span{color:var(--cyan);}
#selfAssessSection .header p{font-size:.92rem;color:var(--w2);line-height:1.65;max-width:500px;margin:0 auto 6px;}
#selfAssessSection .header-note{font-family:var(--fm);font-size:.68rem;color:var(--w3);letter-spacing:.06em;}

#selfAssessSection .mode-toggle{max-width:780px;margin:0 auto 28px;padding:0 20px;}
#selfAssessSection .toggle-wrap{display:flex;background:var(--navy2);border:1px solid var(--border);border-radius:12px;padding:5px;gap:5px;}
#selfAssessSection .mode-btn{flex:1;padding:12px 16px;border-radius:9px;border:none;cursor:pointer;font-family:var(--fd);font-size:.88rem;font-weight:500;transition:all .2s;text-align:center;line-height:1.3;}
#selfAssessSection .mode-btn.eff{background:transparent;color:var(--w3);}
#selfAssessSection .mode-btn.opp{background:transparent;color:var(--w3);}
#selfAssessSection .mode-btn.eff.active{background:var(--blue);color:var(--navy);}
#selfAssessSection .mode-btn.opp.active{background:var(--blue);color:var(--navy);}
#selfAssessSection .mode-btn .mode-label{display:block;font-size:.72rem;font-weight:400;opacity:.75;margin-top:2px;}

#selfAssessSection .calc-panel{display:none;max-width:780px;margin:0 auto;padding:0 20px;}
#selfAssessSection .calc-panel.active{display:block;}

#selfAssessSection .step-card{background:var(--navy2);border:1px solid var(--border);border-radius:14px;padding:26px 26px 22px;margin-bottom:14px;transition:border-color .2s;}
#selfAssessSection .step-card:focus-within{border-color:var(--border2);}
#selfAssessSection .step-header{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
#selfAssessSection .step-num{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--fm);font-size:.72rem;font-weight:500;color:var(--navy);flex-shrink:0;}
#selfAssessSection .step-num.eff-num{background:var(--blue);}
#selfAssessSection .step-num.opp-num{background:var(--blue);}
#selfAssessSection .step-title{font-family:var(--fd);font-size:.95rem;font-weight:600;color:var(--w1);}
#selfAssessSection .step-sub{font-size:.78rem;color:var(--w3);margin-top:2px;}

#selfAssessSection .field-row{display:grid;grid-template-columns:1fr 140px;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--border);}
#selfAssessSection .field-row:last-child{border-bottom:none;}
#selfAssessSection .field-label{font-size:.85rem;color:var(--w2);line-height:1.4;}
#selfAssessSection .field-label small{display:block;font-size:.73rem;color:var(--w3);margin-top:2px;}
#selfAssessSection .input-wrap{display:flex;align-items:center;gap:6px;}
#selfAssessSection .input-wrap span{font-family:var(--fm);font-size:.78rem;color:var(--w3);white-space:nowrap;}
#selfAssessSection input[type="number"]{width:100%;background:var(--navy);border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:8px 11px;font-family:var(--fm);font-size:.86rem;color:var(--w1);outline:none;transition:border-color .15s,box-shadow .15s;-moz-appearance:textfield;}
#selfAssessSection input[type="number"]::-webkit-inner-spin-button,#selfAssessSection input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;}
#selfAssessSection input[type="number"]:focus{border-color:var(--cyan);box-shadow:0 0 0 3px var(--cyan2);}
#selfAssessSection input[type="number"].has-val{border-color:var(--border2);}

#selfAssessSection .role-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-top:4px;}
#selfAssessSection .role-btn{padding:9px 11px;background:var(--navy);border:1px solid rgba(255,255,255,.12);border-radius:8px;font-family:var(--fb);font-size:.8rem;color:var(--w2);cursor:pointer;transition:all .15s;text-align:left;}
#selfAssessSection .rate-select{width:100%;background:var(--navy);border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:8px 11px;font-family:var(--fb);font-size:.8rem;color:var(--w2);outline:none;cursor:pointer;transition:border-color .15s,opacity .2s;}
#selfAssessSection .rate-select:focus{border-color:var(--cyan);}
#selfAssessSection .rate-select:disabled{opacity:.35;cursor:not-allowed;}
#selfAssessSection .rate-select option{background:var(--navy2);color:var(--w1);}
#selfAssessSection .role-btn:hover{border-color:rgba(255,255,255,.25);color:var(--w1);}
#selfAssessSection .role-btn.active{background:var(--cyan2);border-color:var(--cyan);color:var(--cyan);}
#selfAssessSection .role-btn .rate{display:block;font-family:var(--fm);font-size:.68rem;color:var(--w3);margin-top:2px;}
#selfAssessSection .role-btn.active .rate{color:rgba(159,232,56,.65);}
#selfAssessSection .custom-rate-row{margin-top:10px;display:none;align-items:center;gap:10px;}
#selfAssessSection .custom-rate-row.show{display:flex;}
#selfAssessSection .custom-rate-row label{font-size:.81rem;color:var(--w2);white-space:nowrap;}
#selfAssessSection .custom-rate-row input{max-width:120px;}

/* Results card — both modes share the SAME light-surface + lime-tinted
   border treatment now (was a different accent-tinted card per mode) */
#selfAssessSection .results-card{background:#FBFEF5;border:1px solid var(--border2);border-radius:14px;padding:24px;margin-bottom:14px;opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .35s ease;pointer-events:none;}
#selfAssessSection .results-card.show{opacity:1;transform:translateY(0);pointer-events:all;}
#selfAssessSection .results-card.opp-card{background:#FBFEF5;border-color:var(--border2);}
/* Eyebrow-style label on a light card — dark ink text, not the accent:
   lime reads illegibly at this size against a near-white background
   (the same constraint already solved for marketing.css's light
   sections) — accent usage here is limited to the card's border above */
#selfAssessSection .res-label{font-family:var(--fm);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:#2D3A52;margin-bottom:18px;}
#selfAssessSection .res-label.opp{color:#2D3A52;}
#selfAssessSection .res-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:20px;}
#selfAssessSection .res-cell-label{font-size:.72rem;color:#2D3A52;margin-bottom:3px;font-family:var(--fm);letter-spacing:.03em;}
#selfAssessSection .res-cell-val{font-family:var(--fd);font-size:1.5rem;font-weight:600;line-height:1;}
#selfAssessSection .danger,#selfAssessSection .res-cell-val.danger{color:var(--red) !important;}
#selfAssessSection .amber,#selfAssessSection .res-cell-val.amber{color:var(--amber) !important;}
#selfAssessSection .green,#selfAssessSection .res-cell-val.green{color:var(--green) !important;}
/* .cyan/.purple used to color-code "neutral" (non-status) result values by
   mode accent — with a single accent that's illegible as light-surface
   text, these are now plain dark ink instead, same treatment as any other
   non-status number */
#selfAssessSection .cyan,#selfAssessSection .res-cell-val.cyan{color:#0D1526 !important;}
#selfAssessSection .purple,#selfAssessSection .res-cell-val.purple{color:#0D1526 !important;}

#selfAssessSection .insight{background:rgba(255,255,255,.06);border-radius:8px;padding:12px 14px;margin-bottom:16px;font-size:.84rem;color:#0D1526;line-height:1.6;border-left:3px solid var(--cyan);}
#selfAssessSection .insight.opp{border-left-color:var(--cyan);}
#selfAssessSection .insight strong{color:#0D1526;font-weight:700;}

#selfAssessSection .sec-div{display:flex;align-items:center;gap:10px;margin:16px 0 14px;}
#selfAssessSection .sec-div-line{flex:1;height:1px;background:#D0D8E8;}
#selfAssessSection .sec-div-label{font-family:var(--fm);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;color:#6B7A99;}

#selfAssessSection .bar-track{height:7px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden;margin:8px 0;}
#selfAssessSection .bar-fill{height:100%;border-radius:4px;background:var(--green);transition:width .6s cubic-bezier(.4,0,.2,1);width:0%;}
#selfAssessSection .bar-fill.opp{background:var(--green);}
#selfAssessSection .bar-foot{display:flex;justify-content:space-between;font-family:var(--fm);font-size:.67rem;color:#6B7A99;}

/* Reco box — both modes now use the SAME "positive outcome" status-green
   treatment (opp-reco was purple, a brand accent doing status-signal
   work; .eff-reco's existing green was already correct — the real fix
   here is dropping purple, not changing green) */
#selfAssessSection .reco-box{border-radius:10px;padding:18px 18px 14px;margin-bottom:14px;}
#selfAssessSection .reco-box.eff-reco{background:#E8FAF4;border:1px solid var(--green);}
#selfAssessSection .reco-box.opp-reco{background:#E8FAF4;border:1px solid var(--green);}
#selfAssessSection .reco-box.warn-reco{background:#FFF7E6;border:1px solid var(--amber);}
#selfAssessSection .reco-top{font-family:var(--fm);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:8px;}
#selfAssessSection .reco-title{font-family:var(--fd);font-size:1.05rem;font-weight:600;color:#0D1526;margin-bottom:8px;}
#selfAssessSection .reco-body{font-size:.86rem;color:#0D1526;line-height:1.65;}
#selfAssessSection .reco-nums{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 12px;}
#selfAssessSection .reco-num-label{font-size:.72rem;color:#2D3A52;font-family:var(--fm);margin-bottom:3px;}
#selfAssessSection .reco-num-val{font-family:var(--fd);font-size:1.55rem;font-weight:600;line-height:1;}

#selfAssessSection .slider-row{padding:10px 0;border-bottom:1px solid var(--border);}
#selfAssessSection .slider-row:last-child{border-bottom:none;}
#selfAssessSection .slider-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
#selfAssessSection .slider-label{font-size:.85rem;color:var(--w2);}
#selfAssessSection .slider-val{font-family:var(--fm);font-size:.85rem;font-weight:500;color:var(--cyan);}
#selfAssessSection input[type="range"]{width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:rgba(255,255,255,.12);outline:none;cursor:pointer;}
#selfAssessSection input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--blue);cursor:pointer;border:2px solid var(--navy);}
#selfAssessSection input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--blue);cursor:pointer;border:2px solid var(--navy);}
#selfAssessSection .slider-hint{font-size:.74rem;color:#6B7A99;margin-top:3px;}

#selfAssessSection .proactive-box{background:var(--navy2);border:1px solid var(--border);border-radius:14px;padding:22px 24px;margin-bottom:14px;display:none;opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .35s ease;}
#selfAssessSection .proactive-q{font-family:var(--fd);font-size:.95rem;font-weight:600;color:var(--w1);margin-bottom:8px;line-height:1.4;}
#selfAssessSection .proactive-hint{font-size:.81rem;color:var(--w3);margin-bottom:14px;line-height:1.55;}
#selfAssessSection textarea{width:100%;background:var(--navy);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:11px 13px;font-family:var(--fb);font-size:.86rem;color:var(--w1);resize:vertical;min-height:80px;outline:none;transition:border-color .15s;line-height:1.5;}
#selfAssessSection textarea::placeholder{color:var(--w3);}
#selfAssessSection textarea:focus{border-color:var(--cyan);}

#selfAssessSection .lead-card{background:var(--navy2);border:1px solid var(--border);border-radius:14px;padding:24px;margin-bottom:14px;display:none;opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .35s ease;}
#selfAssessSection .toggle-track{width:38px;height:20px;border-radius:10px;background:rgba(255,255,255,.12);position:relative;transition:background .2s;flex-shrink:0;cursor:pointer;}
#selfAssessSection .toggle-track.on{background:var(--cyan);}
#selfAssessSection .toggle-thumb{width:14px;height:14px;border-radius:50%;background:white;position:absolute;top:3px;left:3px;transition:transform .2s;}
#selfAssessSection .toggle-track.on .toggle-thumb{transform:translateX(18px);}
#selfAssessSection .lead-toggle{display:flex;align-items:center;gap:10px;margin-bottom:16px;cursor:pointer;}
#selfAssessSection .lead-toggle-label{font-size:.86rem;color:var(--w2);}
#selfAssessSection .lead-fields{display:none;flex-direction:column;gap:10px;}
#selfAssessSection .lead-fields.show{display:flex;}
#selfAssessSection .lead-field label{display:block;font-size:.75rem;color:var(--w3);margin-bottom:4px;font-family:var(--fm);}
#selfAssessSection .lead-field input{width:100%;background:var(--navy);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:9px 13px;font-family:var(--fb);font-size:.86rem;color:var(--w1);outline:none;transition:border-color .15s;}
#selfAssessSection .lead-field input:focus{border-color:var(--cyan);}
#selfAssessSection .lead-field input::placeholder{color:var(--w3);}

#selfAssessSection .email-copy-row{margin-top:16px;padding-top:16px;border-top:1px solid var(--border2);}
#selfAssessSection .email-copy-label{font-size:.82rem;color:#2D3A52;margin-bottom:8px;}
#selfAssessSection .email-copy-form{display:flex;gap:8px;}
#selfAssessSection .email-copy-form input[type="email"]{flex:1;background:var(--navy);border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:9px 13px;font-family:var(--fb);font-size:.85rem;color:var(--w1);outline:none;}
/* Standalone CTA-style buttons throughout this section use the site's own
   pill shape (border-radius:100px, matching .mkt-btn-primary/.mkt-nav-cta
   in marketing.css) rather than the original file's 8-10px rounded rects */
#selfAssessSection .email-copy-btn{padding:9px 18px;border-radius:100px;border:none;background:var(--blue);color:var(--navy);font-family:var(--fd);font-weight:700;font-size:.85rem;cursor:pointer;white-space:nowrap;}
#selfAssessSection .email-copy-btn:disabled{opacity:.6;cursor:not-allowed;}
#selfAssessSection .email-copy-status{font-size:.75rem;color:#6B7A99;margin-top:6px;min-height:16px;}

#selfAssessSection .cta-section{text-align:center;padding:6px 0 0;display:none;}
#selfAssessSection .proactive-box.revealed,#selfAssessSection .lead-card.revealed{display:block;opacity:1;transform:translateY(0);}
#selfAssessSection .cta-btn{display:inline-flex;align-items:center;gap:8px;color:var(--navy);font-family:var(--fd);font-size:.92rem;font-weight:700;padding:14px 30px;border-radius:100px;border:none;cursor:pointer;transition:filter .15s,transform .1s;text-decoration:none;}
#selfAssessSection .cta-btn.eff-cta{background:var(--blue);}
#selfAssessSection .cta-btn.opp-cta{background:var(--blue);color:var(--navy);}
#selfAssessSection .cta-btn:hover{filter:brightness(1.08);}
#selfAssessSection .cta-btn:active{transform:scale(.98);}
#selfAssessSection .cta-note{font-family:var(--fm);font-size:.68rem;color:var(--w3);margin-top:9px;}

#selfAssessSection .inline-contact-form{display:none;margin-top:16px;background:#FBFEF5;border:1px solid var(--border2);border-radius:10px;padding:20px;text-align:left;}
#selfAssessSection .inline-contact-form.opp{background:#FBFEF5;border-color:var(--border2);}
#selfAssessSection .inline-contact-form.show{display:block;}
#selfAssessSection .inline-contact-title{font-family:var(--fd);font-weight:600;font-size:1rem;color:#0D1526;margin-bottom:4px;}
#selfAssessSection .inline-contact-sub{font-size:.82rem;color:#2D3A52;margin-bottom:14px;}
#selfAssessSection .inline-contact-fields{display:flex;flex-direction:column;gap:10px;}
#selfAssessSection .inline-contact-fields input{width:100%;background:var(--navy);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:9px 13px;font-family:var(--fb);font-size:.86rem;color:var(--w1);outline:none;transition:border-color .15s;}
#selfAssessSection .inline-contact-fields input::placeholder{color:var(--w3);}
#selfAssessSection .inline-contact-fields input:focus{border-color:var(--cyan);}
#selfAssessSection .inline-contact-submit{padding:11px;border-radius:100px;border:none;background:var(--blue);color:var(--navy);font-family:var(--fd);font-weight:700;font-size:.9rem;cursor:pointer;}
#selfAssessSection .inline-contact-submit:disabled{opacity:.6;cursor:not-allowed;}
#selfAssessSection .inline-contact-status{font-size:.78rem;color:#6B7A99;margin-top:8px;}

@media(max-width:520px){
  #selfAssessSection .res-grid{grid-template-columns:1fr 1fr;}
  #selfAssessSection .field-row{grid-template-columns:1fr 100px;}
  #selfAssessSection .role-grid{grid-template-columns:1fr 1fr;}
  #selfAssessSection .step-card,#selfAssessSection .results-card,#selfAssessSection .reco-box{padding:18px 16px;}
  #selfAssessSection .reco-nums{grid-template-columns:1fr 1fr;}
}