:root{
      --bg:#0b0f14;
      --panel:#101823;
      --panel2:#0f1720;
      --text:#e9eef6;
      --muted:#a9b4c3;
      --line:rgba(255,255,255,.10);
      --accent:#4ade80;
      --accent2:#60a5fa;
      --warn:#f59e0b;
      --danger:#fb7185;
      --shadow:0 10px 30px rgba(0,0,0,.35);
      --radius:18px;
      --max:1120px;
      --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    }
    *{box-sizing:border-box}
    .assessment {
      margin:0;
      font-family:var(--font);
      color:var(--text);
      background:
        radial-gradient(900px 500px at 15% -10%, rgba(96,165,250,.25), transparent 60%),
        radial-gradient(900px 500px at 85% -10%, rgba(74,222,128,.20), transparent 60%),
        radial-gradient(900px 600px at 50% 120%, rgba(236,72,153,.08), transparent 60%),
        var(--bg);
      line-height:1.5;
    }
    a{color:inherit}
    .wrap{max-width:var(--max); margin:0 auto; padding:28px 18px 80px;}
    .topbar{
      display:flex; align-items:center; justify-content:space-between;
      gap:14px; padding:14px 16px; border:1px solid var(--line);
      border-radius:14px; background:rgba(16,24,35,.6); backdrop-filter: blur(10px);
      box-shadow: var(--shadow);
    }
    .brand{
      display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px;
    }
    .badge{
      font-size:12px; padding:6px 10px; border-radius:999px;
      border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--muted);
      white-space:nowrap;
    }
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      padding:14px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.12);
      background: linear-gradient(180deg, rgba(74,222,128,.95), rgba(34,197,94,.85));
      color:#081018; font-weight:800; text-decoration:none;
      box-shadow: 0 10px 25px rgba(34,197,94,.22);
      transition: transform .12s ease, filter .12s ease;
    }
    .btn:hover{transform: translateY(-1px); filter: brightness(1.02);}
    .btn.secondary{
      background: rgba(255,255,255,.06);
      color: var(--text);
      box-shadow:none;
    }
    .btn.secondary:hover{filter:brightness(1.08)}
    .hero{
      margin-top:22px;
      display:grid; grid-template-columns: 1.2fr .8fr; gap:18px;
      align-items:stretch;
    }
    @media (max-width: 940px){
      .hero{grid-template-columns:1fr; }
    }
    .card{
      border:1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(16,24,35,.68);
      backdrop-filter: blur(12px);
      box-shadow: var(--shadow);
      padding: 22px;
    }
    .hero h1{
      font-size: clamp(28px, 3.4vw, 44px);
      line-height:1.1;
      margin: 0 0 12px;
      letter-spacing:-.6px;
    }
    .sub{
      color: var(--muted);
      font-size: 16px;
      margin: 0 0 18px;
    }
    .bullets{
      display:grid; gap:10px; margin:18px 0 20px; padding:0;
      list-style:none;
    }
    .bullets li{
      display:flex; gap:10px; align-items:flex-start;
      padding:10px 12px; border:1px solid var(--line); border-radius:14px;
      background: rgba(255,255,255,.03);
    }
    .dot{
      width:10px; height:10px; border-radius:99px; margin-top:6px;
      background: linear-gradient(180deg, var(--accent), #22c55e);
      flex:0 0 auto;
    }
    .ctaRow{display:flex; flex-wrap:wrap; gap:12px; align-items:center;}
    .fine{
      color: var(--muted);
      font-size: 12px;
      margin-top:10px;
    }
    .miniForm{
      display:grid; gap:10px; margin-top:14px;
      border-top:1px solid var(--line); padding-top:16px;
    }
    .miniForm label{font-size:12px; color: var(--muted);}
    .miniForm input{
      width:100%;
      padding:12px 12px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(8,16,24,.55);
      color: var(--text);
      outline:none;
    }
    .miniGrid{
      display:grid; grid-template-columns:1fr 1fr; gap:10px;
    }
    @media (max-width: 520px){
      .miniGrid{grid-template-columns:1fr;}
    }
    .asideTitle{
      font-weight:900; margin:0 0 10px; font-size:16px;
    }
    .proof{
      display:grid; gap:12px;
    }
    .pill{
      padding:12px 12px;
      border:1px solid var(--line);
      border-radius:14px;
      background: rgba(255,255,255,.03);
    }
    .pill strong{display:block; margin-bottom:4px;}
    .section{
      margin-top:18px;
      display:grid; grid-template-columns: 1fr 1fr 1fr; gap:14px;
    }
    @media (max-width: 940px){
      .section{grid-template-columns:1fr;}
    }
    .kicker{
      display:inline-flex; align-items:center; gap:8px;
      font-size:12px; color: var(--muted);
      border:1px solid var(--line);
      padding:6px 10px; border-radius:999px;
      background: rgba(255,255,255,.03);
      margin-bottom:10px;
    }
    .icon{
      width:18px; height:18px; border-radius:6px;
      background: rgba(96,165,250,.18);
      border:1px solid rgba(96,165,250,.35);
      display:inline-block;
    }
    .section h2{
      margin:0 0 10px; font-size:18px; letter-spacing:-.2px;
    }
    .section p{margin:0; color: var(--muted);}
    .divider{height:1px; background: var(--line); margin:20px 0;}
    .faq{display:grid; gap:10px;}
    details{
      border:1px solid var(--line);
      border-radius:14px;
      background: rgba(255,255,255,.03);
      padding: 10px 12px;
    }
    summary{
      cursor:pointer;
      font-weight:800;
      list-style:none;
    }
    summary::-webkit-details-marker{display:none;}
    details p{margin:10px 0 0; color: var(--muted);}
    .footerCta{
      margin-top:22px;
      padding: 20px;
      border-radius: var(--radius);
      border:1px solid rgba(74,222,128,.25);
      background: linear-gradient(180deg, rgba(34,197,94,.14), rgba(16,24,35,.55));
      box-shadow: 0 12px 30px rgba(34,197,94,.12);
    }
    .footerCta h3{margin:0 0 8px; font-size:20px;}
    .footerCta p{margin:0 0 14px; color: var(--muted);}
    .sticky{
      position:fixed; left:0; right:0; bottom:0;
      background: rgba(11,15,20,.8);
      backdrop-filter: blur(10px);
      border-top:1px solid var(--line);
      padding:10px 12px;
      display:none;
      z-index: 50;
    }
    .sticky .inner{
      max-width: var(--max);
      margin:0 auto;
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:space-between;
    }
    .sticky small{color: var(--muted);}
    @media (max-width: 940px){
      .sticky{display:block;}
    }   
    
    
      
    output {
     color:#fff;    
    }    
    
    
     legend {
     color:#A9B4C3;    
    }    
       
    
    
    
.tooltip {
  position: relative;
  display: inline-block;
  top:-10px;
  margin-left: 6px;
  cursor: help;
  font-size: 14px;
  color: inherit;
  opacity: 90;
}

.tooltip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background: #111827;
  color: #ffffff;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
  width: 260px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 1000;
}

.tooltip::before {
  content: "";
  position: absolute;
  bottom: 115%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #111827 transparent transparent transparent;
  opacity: 90;
  transition: opacity 0.2s ease;
}

.tooltip:hover::after,
.tooltip:hover::before {
  opacity: 1;
}