:root {
      --bg: #0b0f19;
      --card: rgba(255,255,255,0.06);
      --card2: rgba(255,255,255,0.09);
      --text: rgba(255,255,255,0.92);
      --muted: rgba(255,255,255,0.68);
      --muted2: rgba(255,255,255,0.55);
      --border: rgba(255,255,255,0.14);
      --accent: #7c5cff;
      --accent2: #27d6a4;
      --warn: #ffcc66;
      --danger: #ff5c7a;
      --shadow: 0 20px 60px rgba(0,0,0,0.45);
      --radius: 18px;
    }
    #optResult {
  line-height: 1.35;
}

#optResult h3 {
  margin: 18px 0 10px;
}

#optResult h2 {
  margin: 0 0 6px;
}

#optResult p {
  margin: 6px 0;
}

#optResult ul {
  margin: 6px 0 12px 22px;
  padding: 0;
}

#optResult li {
  margin: 4px 0;
}

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      background:
        radial-gradient(900px 500px at 15% 10%, rgba(124,92,255,0.28), transparent 60%),
        radial-gradient(700px 420px at 85% 20%, rgba(39,214,164,0.18), transparent 60%),
        radial-gradient(800px 500px at 50% 110%, rgba(255,92,122,0.14), transparent 60%),
        var(--bg);
      color: var(--text);
      line-height: 1.45;



    }



    a { color: inherit; text-decoration: none; }
    .container { width: min(1100px, 92vw); margin: 0 auto; }

    /* Top bar */
    .topbar {
      padding: 18px 0;
      position: sticky;
      top: 0;
      backdrop-filter: blur(10px);
      background: linear-gradient(to bottom, rgba(11,15,25,0.85), rgba(11,15,25,0.50));
      border-bottom: 1px solid rgba(255,255,255,0.06);
      z-index: 10;
    }
    .topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
    .brand { display:flex; align-items:center; gap:10px; font-weight: 700; letter-spacing: 0.2px; }
    .logo {
      width: 34px; height: 34px; border-radius: 10px;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      box-shadow: 0 10px 30px rgba(124,92,255,0.25);
    }
    .nav { display:flex; gap: 18px; align-items:center; }
    .nav a { color: var(--muted); font-size: 14px; }
    .nav a:hover { color: var(--text); }

    .btn {
      display:inline-flex; align-items:center; justify-content:center;
      padding: 12px 16px;
      border-radius: 12px;
      font-weight: 650;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.06);
      color: var(--text);
      cursor: pointer;
      transition: transform .06s ease, background .2s ease, border-color .2s ease;
      user-select: none;
      gap: 10px;
    }
    .btn:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.18); }
    .btn:active { transform: translateY(1px); }
    .btn-primary {
      background: linear-gradient(135deg, rgba(124,92,255,0.95), rgba(39,214,164,0.85));
      border: 0;
      box-shadow: 0 16px 44px rgba(124,92,255,0.22);
    }
    .btn-primary:hover { filter: brightness(1.05); }
    .btn-small { padding: 10px 12px; border-radius: 11px; font-size: 14px; }

    /* Hero */
    .hero { padding: 56px 0 26px; }
    .hero-grid {
      display:grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 24px;
      align-items: stretch;
    }
    @media (max-width: 920px) {
      .hero-grid { grid-template-columns: 1fr; }
      .nav { display:none; }
    }

    h1 { margin: 0 0 14px; font-size: clamp(34px, 4.2vw, 54px); line-height: 1.05; letter-spacing: -0.6px; }
    .subhead { color: var(--muted); font-size: 18px; max-width: 60ch; margin-bottom: 18px; }
    .badge-row { display:flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 22px; }
    .badge {
      display:inline-flex; align-items:center; gap: 8px;
      font-size: 13px;
      color: rgba(255,255,255,0.80);
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.05);
    }
    .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent2); box-shadow: 0 0 0 4px rgba(39,214,164,0.15); }

    .hero-ctas { display:flex; gap: 12px; flex-wrap: wrap; align-items:center; margin-top: 10px; }
    .micro { margin-top: 10px; color: var(--muted2); font-size: 13px; }

    /* Loading state card */
.loading-row{
  margin-top: 12px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
}

.loading-left{
  display:flex;
  gap: 12px;
  align-items: center;
}

.loading-title{
  font-weight: 850;
  letter-spacing: -0.2px;
}

.loading-sub{
  margin-top: 2px;
  font-size: 13px;
  color: rgba(255,255,255,0.68);
}

/* Simple spinner */
.spinner{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: rgba(255,255,255,0.85);
  animation: spin 0.9s linear infinite;
  flex: 0 0 auto;
}

@keyframes spin{
  to { transform: rotate(360deg); }
}

    .card {
      border: 1px solid rgba(255,255,255,0.10);
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .sidecard {
      padding: 18px 18px 16px;
      display:flex; flex-direction:column; gap: 14px;
      position: relative;
      overflow:hidden;
    }
    .sidecard:before {
      content:"";
      position:absolute;
      inset: -90px -120px auto auto;
      width: 260px; height: 260px;
      background: radial-gradient(circle at 30% 30%, rgba(124,92,255,0.35), transparent 65%);
      transform: rotate(15deg);
      pointer-events:none;
    }
    .sidecard h3 { margin: 0; font-size: 16px; color: rgba(255,255,255,0.88); }
    .statrow { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .stat {
      padding: 12px;
      border-radius: 14px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.10);
    }
    .stat .k { font-size: 13px; color: var(--muted2); }
    .stat .v { font-size: 18px; font-weight: 750; margin-top: 4px; }
    .checklist { margin: 6px 0 0; padding: 0; list-style: none; display:flex; flex-direction:column; gap: 10px; }
    .checklist li { display:flex; gap: 10px; color: rgba(255,255,255,0.82); font-size: 14px; }
    .check {
      width: 20px; height: 20px; border-radius: 7px;
      background: rgba(39,214,164,0.18);
      border: 1px solid rgba(39,214,164,0.35);
      display:flex; align-items:center; justify-content:center;
      flex: 0 0 auto;
      margin-top: 1px;
    }

    /* Sections */
    section { padding: 26px 0; }
    .section-title { font-size: 22px; margin: 0 0 12px; letter-spacing: -0.2px; }
    .section-sub { margin: 0 0 18px; color: var(--muted); }

    .grid3 {
      display:grid; grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    @media (max-width: 920px) { .grid3 { grid-template-columns: 1fr; } }

    .tile { padding: 16px; border-radius: 16px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); }
    .tile h4 { margin: 0 0 8px; font-size: 16px; }
    .tile p { margin: 0; color: var(--muted); font-size: 14px; }

    /* App start */
    .appstart {
      padding: 18px;
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      align-items: start;
    }
    @media (max-width: 920px) { .appstart { grid-template-columns: 1fr; } }


    .form-notice {
      margin-top: 12px;
      padding: 10px 12px;
      border-radius: 10px;
      font-size: 14px;
      border: 1px solid transparent;
    }

    /* Success animation */
    .form-notice.success {
      animation: noticeSuccessPulse 2s ease-out;
    }

    @keyframes noticeSuccessPulse {

      0% {
        transform: scale(0.97);
        box-shadow: 0 0 0 rgba(34,197,94,0);
      }

      45% {
        transform: scale(1.03);
        box-shadow: 0 0 24px rgba(34,197,94,0.35);
      }

      100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(34,197,94,0);
      }

    }

    /* Error state */
    .form-notice.error {
      background: rgba(220, 38, 38, 0.12);
      border-color: rgba(220, 38, 38, 0.35);
      color: #fecaca;
    }

    /* Success state */
    .form-notice.success {
      background: rgba(34, 197, 94, 0.12);
      border-color: rgba(34, 197, 94, 0.35);
      color: #bbf7d0;
    }

    /* Info / neutral */
    .form-notice.info {
      background: rgba(59, 130, 246, 0.12);
      border-color: rgba(59, 130, 246, 0.35);
      color: #bfdbfe;
    }

    .formbox { padding: 16px; border-radius: 16px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); }
    label { display:block; font-size: 13px; color: rgba(255,255,255,0.78); margin: 0 0 8px; }
    input[type="file"] {
      width: 100%;
      padding: 12px;
      border-radius: 12px;
      border: 1px dashed rgba(255,255,255,0.22);
      background: rgba(255,255,255,0.04);
      color: rgba(255,255,255,0.78);
    }
    textarea {
      width: 100%;
      min-height: 150px;
      resize: vertical;
      padding: 12px 12px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.04);
      color: var(--text);
      outline: none;
    }
    textarea:focus, input[type="file"]:focus {
      border-color: rgba(124,92,255,0.55);
      box-shadow: 0 0 0 4px rgba(124,92,255,0.12);
    }
    .row { display:flex; gap: 10px; flex-wrap: wrap; align-items:center; margin-top: 12px; }
    .hint {
      font-size: 12px;
      color: var(--muted2);
      margin-top: 10px;
      margin-bottom: 16px;
    }

    .diag {
      padding: 16px;
      border-radius: 16px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.10);
      display:flex; flex-direction:column; gap: 12px;
    }
    .score {
      display:flex; align-items:center; justify-content: space-between; gap: 10px;
      padding: 12px;
      border-radius: 14px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.10);
    }
    .score .left { display:flex; flex-direction:column; gap: 2px; }
    .score .label { font-size: 13px; color: var(--muted2); }
    .score .num { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; }
    .pill {
      font-size: 12px;
      padding: 7px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.05);
      color: rgba(255,255,255,0.82);
      white-space: nowrap;
    }

    .issues { margin: 0; padding-left: 18px; color: rgba(255,255,255,0.82); }
    .issues li { margin: 6px 0; }
    .divider { height: 1px; background: rgba(255,255,255,0.10); margin: 4px 0; }

    .pricing {
      display: grid;
      grid-template-columns: 1fr; /* ✅ single column while you have one offer */
      gap: 14px;
      margin-top: 12px;
    }
    @media (max-width: 920px) { .pricing { grid-template-columns: 1fr; } }

    .pricecard {
      padding: 16px;
      border-radius: 16px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.10);
    }
    .pricecard.featured {
      border-color: rgba(39,214,164,0.45);
      background: rgba(39,214,164,0.10);
      box-shadow: 0 18px 50px rgba(39,214,164,0.12);
    }
    .pricecard .plan { display:flex; align-items:center; justify-content: space-between; gap: 10px; }
    .pricecard .name { font-weight: 800; }
    .pricecard .price { font-size: 22px; font-weight: 900; }
    .pricecard ul { margin: 12px 0 0; padding-left: 18px; color: rgba(255,255,255,0.86); }
    .pricecard li { margin: 6px 0; color: rgba(255,255,255,0.78); }

    button.is-unlocked:disabled {
      opacity: 1 !important;
      cursor: default;
      filter: none;
    }

    /* Featured resume offer (conversion-focused) */
    .featured-resume{
      border-color: rgba(124,92,255,0.45);
      background: rgba(124,92,255,0.10);
      box-shadow: 0 18px 50px rgba(124,92,255,0.12);
    }

    .featured-resume .price{
      font-size: 26px;
      font-weight: 950;
    }

    .featured-resume .name{
      font-weight: 900;
      letter-spacing: -0.2px;
    }

    .value-line{
      margin-top: 10px;
      font-size: 13px;
      color: rgba(255,255,255,0.70);
    }

    /* Footer */
    footer { padding: 34px 0 44px; color: var(--muted2); font-size: 13px; }
    .footgrid { display:flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(255,255,255,0.10); padding-top: 18px; }

    /* Tiny icons */
    .ico { width: 14px; height: 14px; display:inline-block; }
    /* Paid output formatting (make it a bit tighter/smaller) */
#fullResult {
  display: none;
  font-size: 14px;
  line-height: 1.45;
}

#fullResumeHtml h1, 
#fullResumeHtml h2, 
#fullResumeHtml h3 {
  margin: 12px 0 8px;
  line-height: 1.2;
}

#fullResumeHtml h2 { font-size: 18px; }
#fullResumeHtml h3 { font-size: 16px; }

#fullResumeHtml p { margin: 6px 0; }
#fullResumeHtml ul { margin: 6px 0 12px 18px; }
#fullResumeHtml li { margin: 4px 0; }

#fullResult h3 {
  font-size: 16px;
  margin: 14px 0 8px;
}

#fullChangesList li {
  font-size: 14px;
}

/* =========================
   Resume Output Formatting
   ========================= */

.resume-content {
  max-width: 850px;
  margin: 0 auto;
  letter-spacing: 0.1px;
  color: rgba(255,255,255,0.92);
}

/* Name */
.resume-content h1:first-of-type {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.08;
  margin: 0 0 4px;
  border-bottom: none;
  padding-bottom: 0;
}

/* Contact line under name */
.resume-content h1:first-of-type + p {
  font-size: 13px;
  line-height: 1.35;
  opacity: 0.82;
  margin: 0 0 18px;
}

/* Section headers */
.resume-content h2 {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  margin: 22px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

/* Job title */
.resume-content h3 {
  font-size: 15px;
  font-weight: 750;
  line-height: 1.25;
  margin: 14px 0 2px;
}

/* Company + dates line directly under job title */
.resume-content h3 + p {
  font-size: 13px;
  line-height: 1.35;
  opacity: 0.78;
  margin: 0 0 8px;
}

/* Summary / regular paragraph */
.resume-content p {
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 8px;
}

/* Bullet lists */
.resume-content ul {
  margin: 6px 0 12px 18px;
  padding: 0;
}

.resume-content li {
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 6px;
}

/* Reduce extra spacing if two lists/paragraphs stack tightly */
.resume-content p + ul,
.resume-content ul + p,
.resume-content ul + ul {
  margin-top: 6px;
}

/* =========================
   Resume Extras (Analysis area)
   ========================= */

.resume-extras {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 2px dashed rgba(255,255,255,0.18);
}

.resume-extras .extras-header {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  opacity: 0.95;
  margin-bottom: 6px;
}

.resume-extras .extras-subheader {
  font-size: 13px;
  opacity: 0.75;
  margin-bottom: 14px;
}

.resume-extras .extras-section {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
}

.resume-extras .extras-title {
  font-size: 14px;
  font-weight: 800;
  margin: 0 0 8px 0;
}

.resume-extras .extras-note {
  color: rgba(255,255,255,0.72);
  font-size: 13px;
  margin-top: 6px;
  line-height: 1.45;
}

.resume-extras ul {
  margin: 0 0 0 18px;
}

.resume-extras li {
  margin-bottom: 6px;
  line-height: 1.45;
}



/* =========================
   Sticky mini CTA bar (floating card)
   ========================= */

.sticky-cta{
  position: fixed;
  left: 0;
  right: 0;
  z-index: 9999;
  pointer-events: none; /* only the card should be clickable */
}

.sticky-cta-inner{
  width: min(760px, 92vw);          /* ✅ constrain so it doesn't look like a strip */
  margin: 0 auto;
  display: flex;
  justify-content: center;
  padding: 0 10px;
}

.sticky-cta-card{
  pointer-events: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.16);

  /* ✅ more "card" look */
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.08),
    rgba(255,255,255,0.03)
  );
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 70px rgba(0,0,0,0.60);
}

.sticky-cta-title{
  font-weight: 850;
  font-size: 14px;
  letter-spacing: -0.2px;
}

.sticky-cta-sub{
  color: rgba(255,255,255,0.72);
  font-size: 12px;
  margin-top: 2px;
}

.sticky-cta-actions{
  display: flex;
  gap: 10px;
  align-items: center;
  flex: 0 0 auto;
}

/* Optional: tighten the buttons just for the sticky bar */
.sticky-cta-actions .btn{
  padding: 10px 14px;
  border-radius: 12px;
}

/* Sticky CTA: keep copy readable + make CTA larger without crushing text */
.sticky-cta-card{
  align-items: center;
}

.sticky-cta-copy{
  flex: 1 1 auto;
  min-width: 260px;          /* ✅ prevents the skinny column effect */
}

.sticky-cta-actions{
  flex: 0 0 auto;
}

.sticky-main-cta{
  padding: 12px 18px;
  font-weight: 850;
  letter-spacing: -0.2px;
  min-width: 240px;          /* ✅ “bigger button” */
  max-width: 320px;          /* ✅ but not absurdly wide */
  justify-content: center;
  white-space: nowrap;
}

/* Mobile: stack + full width CTA */
@media (max-width: 640px){
  .sticky-main-cta{
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 640px){
  .sticky-cta-card{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .sticky-cta-actions{
    width: 100%;
  }
  .sticky-cta-actions .btn{
    flex: 1 1 auto;
  }
  .sticky-cta-sub{ display:none; }
}

.sticky-cta-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.sticky-cta-title {
  font-weight: 850;
  font-size: 14px;
  letter-spacing: -0.2px;
}

.sticky-cta-sub {
  color: rgba(255,255,255,0.72);
  font-size: 12px;
}

.sticky-cta-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .sticky-cta-card {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .sticky-cta-actions {
    width: 100%;
    justify-content: stretch;
  }
  .sticky-cta-actions .btn {
    flex: 1 1 auto;
  }
  .sticky-cta-sub { display: none; }
}

/* Divider between CTA and preview */
.preview-divider{
  margin: 18px 0 10px;
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.3px;
  position: relative;
}

.preview-divider:before,
.preview-divider:after{
  content: "";
  position: absolute;
  top: 50%;
  width: 35%;
  height: 1px;
  background: rgba(255,255,255,0.10);
}

.preview-divider:before{
  left: 0;
}

.preview-divider:after{
  right: 0;
}

/* Preview container */
.preview-card {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 14px 14px 12px;
  background: rgba(255,255,255,0.04);
  position: relative;
}

/* Make preview readable */
.preview-content {
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255,255,255,0.88);
}

/* Stronger section labels */
.preview-title {
  font-weight: 700;
  margin: 10px 0 6px;
  color: rgba(255,255,255,0.95);
}

/* Headline line (name / location / contact) */
.preview-headline {
  font-weight: 600;
  margin-bottom: 8px;
  color: rgba(255,255,255,0.92);
}

/* Paragraph spacing */
.preview-content p {
  margin: 0 0 10px;
}

/* Bullet list for "•" items */
.preview-content ul {
  margin: 0 0 10px 18px;
  padding: 0;
}
.preview-content li {
  margin: 0 0 6px;
}

/* Optional: limit height + fade so it feels like a preview */
.preview-clamp {
  max-height: 200px;       /* tweak */
  overflow: hidden;
  position: relative;
}
.preview-clamp::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 44px;
  background: linear-gradient(to bottom, rgba(20,24,28,0), rgba(20,24,28,1));
  pointer-events: none;
}

.preview-lock-line{
  margin-top: 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.70);
  font-weight: 500;
}


body { padding-bottom: 110px; }

/* ===== Sticky CTA hard override (wins over earlier rules) ===== */
.sticky-cta-inner { 
  width: min(760px, 92vw) !important; 
  margin: 0 auto !important; 
  padding: 0 10px !important;
  display: flex !important;
  justify-content: center !important;
}

.sticky-cta-card {
  width: 100% !important;
  margin: 0 10px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)) !important;
  backdrop-filter: blur(14px) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,0.60) !important;
}

/* Teaser preview typography */
.preview-label{font-weight:800; font-size:12px; letter-spacing:0.6px; text-transform:uppercase; opacity:0.8; margin:10px 0 6px;}
.preview-skillsline{font-size:13px; opacity:0.9; margin-top:8px;}


/* =========================
   Reality Check (theme-matched)
   ========================= */

.reality-card{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  border-radius: 14px;
  padding: 14px;
}

.rc-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.rc-h{
  font-weight: 850;
  letter-spacing: -0.2px;
}

.rc-sub{
  margin-top: 2px;
  font-size: 13px;
  color: var(--muted2);
}

.rc-pill{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
}

.rc-pill.rc-warn{
  border-color: rgba(255, 204, 102, 0.40);
  background: rgba(255, 204, 102, 0.12);
  color: rgba(255, 204, 102, 0.95);
}

.rc-section{
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.rc-title{
  display:flex;
  align-items:center;
  gap: 8px;
  font-weight: 750;
  font-size: 13px;
}

.rc-count{
  margin-left: auto;
  font-size: 12px;
  color: var(--muted2);
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  padding: 3px 8px;
  border-radius: 999px;
}

.rc-list{
  margin: 8px 0 0 18px;
  padding: 0;
  color: rgba(255,255,255,0.86);
}

.rc-list li{
  margin: 0 0 6px;
  line-height: 1.35;
}

.rc-lock{
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted2);
}

/* dots */
.rc-dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  display:inline-block;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.06);
}

.rc-good{ background: var(--accent2); box-shadow: 0 0 0 4px rgba(39,214,164,0.16); }
.rc-mid{ background: rgba(255,255,255,0.45); }
.rc-warn{ background: var(--warn); box-shadow: 0 0 0 4px rgba(255,204,102,0.14); }
.rc-bad{ background: var(--danger); box-shadow: 0 0 0 4px rgba(255,92,122,0.14); }

/* =========================
   Biggest Interview Risks card
   ========================= */

.riskcard{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  border-radius: 14px;
  padding: 14px;
  margin-top: 12px;
}

.riskcard-title{
  font-weight: 850;
  letter-spacing: -0.2px;
  margin-bottom: 8px;
}

/* Optional: tighten list spacing inside the card */
.riskcard .issues{
  margin: 0;
  padding-left: 18px;
}

.field-error {
  margin-top: 6px;
  margin-bottom: 10px;
  color: #fca5a5;
  font-size: 13px;
  line-height: 1.35;
}

.form-notice {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(248, 113, 113, 0.35);
  background: rgba(127, 29, 29, 0.22);
  color: #fecaca;
  font-size: 13px;
  line-height: 1.4;
}

.legal-microcopy {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255,255,255,0.62);
}

.legal-link-btn,
.footer-link-btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: rgba(255,255,255,0.78);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  font: inherit;
}

.legal-link-btn:hover,
.footer-link-btn:hover {
  color: rgba(255,255,255,0.96);
}

.legal-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(3, 6, 14, 0.72);
  backdrop-filter: blur(6px);
}

.legal-modal {
  width: min(760px, 100%);
  max-height: min(85vh, 900px);
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: #111827;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
}

.legal-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.legal-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: rgba(255,255,255,0.96);
}

.legal-modal-close {
  appearance: none;
  border: 0;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.9);
  width: 38px;
  height: 38px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}

.legal-modal-close:hover {
  background: rgba(255,255,255,0.10);
}

.legal-modal-body {
  padding: 20px;
  overflow: auto;
  color: rgba(255,255,255,0.82);
  line-height: 1.65;
}

.legal-modal-body h4 {
  margin: 0 0 10px;
  font-size: 20px;
  color: rgba(255,255,255,0.98);
}

.legal-modal-body p {
  margin: 0 0 14px;
}

.legal-modal-body a {
  color: rgba(255,255,255,0.95);
  text-decoration: underline;
}

body.modal-open {
  overflow: hidden;
}