/* Design 2: Left explore sidebar + center narrative */
body[data-design="2"] .layout-2{
  width:100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(14px, 2.5vw, 24px) clamp(14px, 3vw, 32px) clamp(34px, 4vw, 60px);
  display:grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  grid-auto-rows: min-content;
  grid-template-areas:
    "side main"
    "rail main";
  gap: 24px;
  align-items:start;
}
body[data-design="2"] .layout-2 > *{ min-width:0; }
body[data-design="2"] .main-2{ grid-area: main; min-width:0; display:flex; flex-direction:column; gap:18px; }
body[data-design="2"] .side-2{
  grid-area: side;
  position: static;
  align-self:start;
  display:flex;
  flex-direction:column;
  gap: 12px;
}
body[data-design="2"] .side-card{
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(9,59,110,0.10);
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(9,59,110,0.10);
  padding: 14px;
}
body[data-design="2"] .side-title{ font-weight:800; color: rgba(9,59,110,0.80); margin-bottom: 8px; }
body[data-design="2"] .kv{ display:grid; grid-template-columns: 1fr 2fr; gap: 8px 10px; }
body[data-design="2"] .kv-k{ font-weight:800; color: rgba(9,59,110,0.62); font-size: 12px; }
body[data-design="2"] .kv-v{ font-weight:700; color: rgba(9,59,110,0.84); }
body[data-design="2"] .main-2 .head-2{
  padding: 18px 18px 10px;
  border-radius: 24px;
  background:
    radial-gradient(900px 440px at 70% 0%, rgba(76,187,23,0.18), transparent 60%),
    radial-gradient(900px 440px at 20% 10%, rgba(15,90,165,0.16), transparent 55%);
  border: 1px solid rgba(9,59,110,0.08);
}
body[data-design="2"] .main-2 .head-2 .lead{max-width:60ch}
body[data-design="2"] .cards-2{ display:grid; gap: 14px; margin-top: 14px; }
body[data-design="2"] .rail-2{
  grid-area: rail;
  align-self:start;
  display:flex;
  flex-direction:column;
  gap:12px;
}
body[data-design="2"] .form-ish .fake-input{
  height: 44px; border-radius: 14px;
  border: 1px dashed rgba(9,59,110,0.22);
  display:flex; align-items:center;
  padding: 0 12px;
  color: rgba(9,59,110,0.55);
  margin: 10px 0 12px;
}


.page-2 .side-2{ min-width: min(340px, 100%); }


.page-2 .main-2 .card-xl{ margin-top: 18px; }

/* Responsive improvements */
@media (max-width: 1200px){
  body[data-design="2"] .layout-2{
    gap: 18px;
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  }
  body[data-design="2"] .side-card{ padding: 12px 14px; }
}
@media (max-width: 1024px){
  body[data-design="2"] .layout-2{
    padding-left: clamp(12px, 4vw, 24px);
    padding-right: clamp(12px, 4vw, 24px);
  }
  body[data-design="2"] .main-2 .head-2{
    padding: 16px;
  }
}
@media (max-width: 900px){
  body[data-design="2"] .layout-2{
    grid-template-columns: 1fr;
    grid-template-areas:
      "side"
      "main"
      "rail";
    padding: 14px 14px 28px;
    gap: 20px;
  }
  body[data-design="2"] .side-2,
  body[data-design="2"] .rail-2{
    position: static;
    top: auto;
  }
  .page-2 .side-2{ min-width: 0; }
}

@media (max-width: 640px){
  body[data-design="2"] .main-2 .head-2{ padding: 14px; }
  body[data-design="2"] .side-card{ padding: 12px; border-radius:16px; }
  body[data-design="2"] .dial-center{ top: 60px; }
  body[data-design="2"] .dial-score{ font-size: 52px; }
  body[data-design="2"] .dial-top,
  body[data-design="2"] .dial-bottom{ font-size: 18px; }
  body[data-design="2"] .dial-outof{ font-size: 22px; }
}
@media (max-width: 520px){
  body[data-design="2"] .main-2 .head-2{ padding: 14px; }
  body[data-design="2"] .kv{ grid-template-columns: 1fr; }
  body[data-design="2"] .side-card{ padding: 12px; }
  body[data-design="2"] .dial-center{ top: 56px; }
  body[data-design="2"] .dial-score{ font-size: 46px; }
}

@media (max-width: 420px){
  body[data-design="2"] .layout-2{ padding: 12px 12px 24px; }
  body[data-design="2"] .term-2{ font-size: 38px; }
  body[data-design="2"] .sub-2{ font-size: 15px; }
  body[data-design="2"] .dial-top,
  body[data-design="2"] .dial-bottom{ font-size: 17px; }
}

/* ------------------------
   Dial jargon-o-meter
   (semi-circle arc used in original Design 7)
   ------------------------ */
body[data-design="2"] .dial{
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  --dial-color: #22C55E;
}
body[data-design="2"] .dial-svg{ width: 100%; height: auto; display:block; }
body[data-design="2"] .dial-track{ fill:none; stroke: rgba(9,59,110,0.10); stroke-width: 18; stroke-linecap: round; }
body[data-design="2"] .dial-arc{ fill:none; stroke-width: 18; stroke-linecap: round; stroke-dasharray: 0 999; transition: stroke-dasharray 900ms cubic-bezier(.2,.9,.2,1); }
body[data-design="2"] .dial-center{ position:absolute; left:0; right:0; top: 68px; text-align:center; display:flex; flex-direction:column; align-items:center; gap: 10px; padding: 0 18px; }
body[data-design="2"] .dial-top{ font-size: 20px; font-weight: 800; color: rgba(9,59,110,0.86); }
body[data-design="2"] .dial-score{ font-size: 64px; font-weight: 900; letter-spacing: -0.04em; line-height: 1; }
body[data-design="2"] .dial-score [data-dial-score]{ color: var(--dial-color, #22C55E); }
body[data-design="2"] .dial-outof{ font-size: 26px; color: rgba(9,59,110,0.80); margin-left: 6px; font-weight: 800; }
body[data-design="2"] .dial-bottom{ font-size: 20px; font-weight: 800; color: var(--dial-color, rgba(9,59,110,0.76)); }

/* hover polish */
body[data-design="2"] .card.meter{ transition: transform 160ms ease, box-shadow 160ms ease; }
body[data-design="2"] .card.meter:hover{ transform: translateY(-2px); box-shadow: 0 18px 44px rgba(9,59,110,0.14); }
body[data-design="2"] .card.meter:hover .dial-arc{ filter: drop-shadow(0 10px 18px rgba(9,59,110,0.14)); }