:root{
    --indigo-900:#1B1440;
    --indigo-700:#372E85;
    --indigo-500:#5B52D6;
    --violet-400:#8B7FF0;
    --gold-400:#E7B15C;
    --lavender-100:#F1EFFC;
    --lavender-200:#E1DDF7;
    --ink:#221E3B;
    --grey-600:#6B6580;
    --grey-300:#D6D2E9;
    --rose-400:#D97DA0;
    --rose-100:#FBEAF1;
    --sage-500:#4FAF82;
    --sage-100:#E7F5EE;
    --amber-500:#DDA23B;
    --amber-100:#FBF1E1;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{height:100%;}
  body{
    font-family:'Inter', sans-serif;
    color:#fff;
    background:
      radial-gradient(1100px 620px at 12% -10%, rgba(139,127,240,0.35), transparent 60%),
      radial-gradient(900px 700px at 100% 10%, rgba(231,177,92,0.14), transparent 55%),
      radial-gradient(1200px 900px at 50% 120%, rgba(91,82,214,0.25), transparent 60%),
      linear-gradient(180deg, #17123B 0%, #1D1650 42%, #241A5E 100%);
    min-height:100vh;
    display:flex; flex-direction:column; align-items:center;
    padding:56px 20px 40px;
  }
  h1{font-family:'Fraunces', serif;}

  .eyebrow{ font-size:19px; font-weight:700; letter-spacing:.16em; color:var(--gold-400); text-transform:uppercase; text-align:center; }
  .lead{ color:#C9C3EF; font-size:19px; margin-top:10px; text-align:center; max-width:900px; }

  .wrap{ width:100%; max-width:760px; margin-top:36px; }

  .top{ display:flex; align-items:center; gap:18px; margin-bottom:10px; }
  .back{
    width:38px; height:38px; border-radius:11px; background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.14); color:#fff; font-size:16px;
    display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  }
  .back:disabled{ opacity:.3; cursor:default; }

  .progress-col{ flex:1; }
  .progress-labels{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
  .progress-section{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-400); }
  .progress-count{ font-size:11.5px; color:#B7AFE6; font-weight:600; }
  .progress-track{ position:relative; height:6px; border-radius:4px; background:rgba(255,255,255,0.14); overflow:hidden; }
  .progress-fill{ position:absolute; top:0; left:0; height:100%; border-radius:4px; background:linear-gradient(90deg, var(--gold-400), var(--violet-400)); transition:width .35s ease; }
  .progress-tick{ position:absolute; top:0; bottom:0; width:2px; background:rgba(23,18,59,0.55); }

  .card{
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:26px;
    padding:52px 56px;
    backdrop-filter:blur(6px);
    box-shadow:0 30px 60px -28px rgba(10,6,40,0.75);
    margin-top:26px;
  }
  @media (max-width:640px){ .card{ padding:34px 24px; } }

  .screen{ display:none; animation:fade .28s ease; }
  .screen.active{ display:block; }
  @keyframes fade{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
  @media (prefers-reduced-motion: reduce){
    .screen{ animation:none; }
    .opt-card, .opt, .goal-row, .continue-btn, .scale-opt, .sent-opt, .role-item{ transition:none !important; }
  }

  h2{
    font-family:'Fraunces', serif; font-weight:600;
    font-size:clamp(22px,3vw,30px);
    text-align:center; line-height:1.25;
  }
  h2:focus{ outline:none; }
  .sub{ text-align:center; color:#C9C3EF; font-size:13.5px; margin-top:10px; }
  .logo{ text-align:center; font-family:'Fraunces', serif; font-weight:700; font-size:20px; letter-spacing:.02em; margin-bottom:26px; }

  .badge-row{ display:flex; gap:14px; justify-content:center; margin-bottom:30px; flex-wrap:wrap; }
  .badge{
    display:flex; align-items:center; gap:6px;
    border:1px solid rgba(255,255,255,0.16); border-radius:100px; padding:12px 24px;
    font-size:13px; line-height:1.4; background:rgba(255,255,255,0.05);
  }
  .badge b{ color:var(--gold-400); }
  .badge svg{ flex-shrink:0; }

  .callout{
    margin:26px auto 0; max-width:520px;
    background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14);
    border-radius:12px; padding:16px 20px; text-align:center;
  }
  .callout .lede{ font-weight:700; font-size:13.5px; margin-bottom:4px; }
  .callout .body{ font-size:13px; color:#C9C3EF; line-height:1.5; }

  /* generic option grid (2, 3, or 4 across) */
  .options{ margin-top:32px; display:grid; gap:18px; }
  .cols-2{ grid-template-columns:repeat(2, 1fr); }
  .cols-3{ grid-template-columns:repeat(3, 1fr); }
  .cols-4{ grid-template-columns:repeat(4, 1fr); }
  @media (max-width:640px){
    .cols-3, .cols-4{ grid-template-columns:repeat(2, 1fr); }
  }

  .opt-card{
    background:#fff; color:var(--ink);
    border:2px solid transparent; border-radius:16px;
    padding:0; overflow:hidden; cursor:pointer; font-family:inherit;
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  }
  .opt-card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -14px rgba(10,6,40,0.5); }
  .opt-card .avatar{ height:150px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
  .opt-card .avatar svg{ width:34px; height:34px; color:var(--indigo-700); }
  .opt-card .avatar img{ width:100%; height:100%; object-fit:cover; object-position:center 18%; display:block; }
  .opt-card .avatar.avatar-lg{ height:170px; }
  .opt-card .avatar.avatar-lg img{ object-position:center 10%; }
  .a1{ background:linear-gradient(160deg,#D9D4F7,#B7AEEF); }
  .a2{ background:linear-gradient(160deg,#F6D9C9,#EBB89B); }
  .a3{ background:linear-gradient(160deg,#CFE3D8,#9FC9B2); }
  .a4{ background:linear-gradient(160deg,#F3D6E0,#E4A9BF); }
  .opt-card .cap{
    background:linear-gradient(90deg, var(--indigo-500), var(--violet-400));
    color:#fff; font-weight:700; font-size:13px; text-align:center; padding:11px 0;
  }

  .opt{
    background:#fff; color:var(--ink);
    border:2px solid transparent; border-radius:16px;
    padding:24px 18px;
    display:flex; flex-direction:column; align-items:center; gap:10px;
    cursor:pointer; font-family:inherit;
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  }
  .opt:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -14px rgba(10,6,40,0.5); }
  .opt .ic{ width:28px; height:28px; color:var(--indigo-500); }
  .opt .label{ font-size:14px; font-weight:700; }
  .opt .chk-circle{
    width:20px; height:20px; border-radius:50%; border:1.6px solid var(--grey-300);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .opt .chk-circle svg{ width:12px; height:12px; opacity:0; }
  .opt.sel{ border-color:var(--indigo-500); background:var(--lavender-100); }
  .opt.sel .chk-circle{ background:var(--indigo-500); border-color:var(--indigo-500); }
  .opt.sel .chk-circle svg{ opacity:1; color:#fff; }

  /* goals / multi-select list - row style with checkbox */
  .goal-row{
    background:#fff; color:var(--ink);
    border:2px solid transparent; border-radius:14px;
    padding:16px 20px; display:flex; align-items:center; gap:12px;
    cursor:pointer; font-family:inherit; font-size:14px; font-weight:600; text-align:left;
    transition:border-color .15s ease, background .15s ease;
  }
  .goal-row .ic{ width:18px; height:18px; color:var(--indigo-500); flex-shrink:0; }
  .goal-row .chk-box{
    margin-left:auto; width:20px; height:20px; border-radius:6px; border:1.6px solid var(--grey-300);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .goal-row .chk-box svg{ width:12px; height:12px; opacity:0; }
  .goal-row.sel{ border-color:var(--indigo-500); background:var(--lavender-100); }
  .goal-row.sel .chk-box{ background:var(--indigo-500); border-color:var(--indigo-500); }
  .goal-row.sel .chk-box svg{ opacity:1; color:#fff; }
  .goals-grid{ margin-top:28px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  @media (max-width:640px){ .goals-grid{ grid-template-columns:1fr; } }

  /* single-column stacked list (used for scrollable multi/step lists) */
  .list-stack{ margin-top:28px; display:flex; flex-direction:column; gap:12px; max-height:340px; overflow-y:auto; padding-right:4px; }
  .list-stack::-webkit-scrollbar{ width:6px; }
  .list-stack::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.25); border-radius:4px; }

  /* sentiment rows (3-option "how do you feel" style) */
  .sent-opt{
    width:100%; background:#fff; color:var(--ink); border:2px solid transparent; border-radius:14px;
    padding:16px 20px; display:flex; align-items:center; gap:14px; cursor:pointer; font-family:inherit;
    font-size:14.5px; font-weight:600; text-align:left; transition:border-color .15s ease, background .15s ease, transform .15s ease;
  }
  .sent-opt:hover{ transform:translateY(-2px); }
  .sent-opt .chip{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .sent-opt .chip svg{ width:19px; height:19px; }
  .sent-opt.sel{ border-color:var(--indigo-500); background:var(--lavender-100); }
  .sent-neg .chip{ background:var(--rose-100); color:var(--rose-400); }
  .sent-mid .chip{ background:var(--amber-100); color:var(--amber-500); }
  .sent-pos .chip{ background:var(--sage-100); color:var(--sage-500); }
  .sent-list{ margin-top:30px; display:flex; flex-direction:column; gap:14px; max-width:480px; margin-left:auto; margin-right:auto; }

  /* agree / disagree scale rows */
  .scale-opt{
    width:100%; background:#fff; color:var(--ink); border:2px solid transparent; border-radius:14px;
    padding:16px 20px; display:flex; align-items:center; gap:14px; cursor:pointer; font-family:inherit;
    font-size:14.5px; font-weight:600; text-align:left; transition:border-color .15s ease, background .15s ease, transform .15s ease;
  }
  .scale-opt:hover{ transform:translateY(-2px); }
  .scale-opt .chip{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .scale-opt .chip svg{ width:16px; height:16px; }
  .scale-opt.sel{ border-color:var(--indigo-500); background:var(--lavender-100); }
  .scale-1 .chip{ background:var(--rose-100); color:var(--rose-400); }
  .scale-2 .chip{ background:var(--amber-100); color:var(--amber-500); }
  .scale-3 .chip{ background:var(--lavender-200); color:var(--indigo-500); }
  .scale-4 .chip{ background:var(--sage-100); color:var(--sage-500); }
  .scale-list{ margin-top:30px; display:flex; flex-direction:column; gap:14px; max-width:480px; margin-left:auto; margin-right:auto; }
  .scale-caption{ text-align:center; color:#C9C3EF; font-size:12.5px; margin-top:8px; }

  /* role model grid */
  .role-grid{ margin-top:30px; display:grid; grid-template-columns:repeat(3, 1fr); gap:20px 16px; max-height:340px; overflow-y:auto; padding:4px 4px 8px; }
  @media (max-width:640px){ .role-grid{ grid-template-columns:repeat(2, 1fr); } }
  .role-item{
    background:none; border:none; cursor:pointer; font-family:inherit; color:#fff;
    display:flex; flex-direction:column; align-items:center; gap:8px; padding:6px; border-radius:14px;
    transition:transform .15s ease;
  }
  .role-item:hover{ transform:translateY(-2px); }
  .role-item .av{
    width:62px; height:62px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-family:'Fraunces', serif; font-weight:700; font-size:17px; color:#fff; border:2px solid transparent;
  }
  .role-item .nm{ font-size:12.5px; font-weight:600; color:#E3E0F7; text-align:center; }
  .role-item.sel .av{ border-color:var(--gold-400); box-shadow:0 0 0 3px rgba(231,177,92,0.25); }
  .role-item.sel .nm{ color:var(--gold-400); }
  .rc1{ background:linear-gradient(160deg,#5B52D6,#8B7FF0); }
  .rc2{ background:linear-gradient(160deg,#372E85,#5B52D6); }
  .rc3{ background:linear-gradient(160deg,#E7B15C,#D99A3E); }
  .rc4{ background:linear-gradient(160deg,#4FAF82,#3C8F68); }
  .rc5{ background:linear-gradient(160deg,#D97DA0,#C1567F); }
  .rc6{ background:linear-gradient(160deg,#8B7FF0,#5B52D6); }
  .rc7{ background:linear-gradient(160deg,#DDA23B,#B97F27); }
  .rc8{ background:linear-gradient(160deg,#372E85,#221E3B); }
  .rc9{ background:linear-gradient(160deg,#C1567F,#8B3A5C); }

  /* unified option colors */
  .opt,
  .goal-row,
  .sent-opt,
  .scale-opt,
  .opt.sel,
  .goal-row.sel,
  .sent-opt.sel,
  .scale-opt.sel{
    background:#f7a400;
    color:#fff;
  }
  .opt-card .cap{ background:#f7a400; color:#fff; }
  .sent-opt .chip,
  .scale-opt .chip,
  .opt .chk-circle,
  .goal-row .chk-box{
    background:#241A5E;
    color:#fff;
    border-color:#241A5E;
  }
  .sent-opt .chip svg,
  .scale-opt .chip svg,
  .opt .ic,
  .goal-row .ic{
    color:#fff;
  }

  /* social proof */
  .stat{ text-align:center; margin-top:6px; }
  .stat .n{ font-family:'Fraunces', serif; font-weight:700; font-size:24px; color:var(--gold-400); }
  .stat .s{ font-size:13px; color:#C9C3EF; margin-top:4px; }
  .quote{
    max-width:480px; margin:26px auto 0;
    background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14);
    border-radius:14px; padding:20px 24px; text-align:center; font-size:14px; font-weight:500; line-height:1.6;
  }
  .tp{ text-align:center; margin-top:14px; }
  .tp .name{ font-size:12px; font-weight:700; color:#C9C3EF; }
  .stars{ display:inline-flex; gap:2px; align-items:center; background:#00B67A; padding:4px 8px; border-radius:4px; margin-top:5px; }
  .stars svg{ width:11px; height:11px; color:#f7a400; }
  .press-wrap{ text-align:center; margin-top:34px; }
  .press-label{ font-size:11.5px; color:#9E96D0; margin-bottom:14px; }
  .press-grid{
    display:flex; justify-content:center; gap:34px; flex-wrap:wrap;
    font-family:'Fraunces', serif; font-weight:600; font-size:15px; color:#EDEBFA;
  }

  /* transition screen */
  .hero-photo{
    max-width:520px; margin:0 auto; height:220px; border-radius:16px;
    background:linear-gradient(135deg,#2A2450,#4A3F91 60%,#7A6FE0);
    display:flex; align-items:center; justify-content:center; gap:18px;
  }
  .hero-photo svg{ width:36px; height:36px; color:rgba(255,255,255,0.85); }
  .hero-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 35%; border-radius:16px; display:block; }
  .hero-photo.spotlight{ background:radial-gradient(circle at 50% 30%, #6a5fd6 0%, #2a2450 65%, #17123B 100%); }
  .center-text{ max-width:480px; margin:22px auto 0; text-align:center; color:#C9C3EF; font-size:14px; line-height:1.6; }

  /* mini line chart on the "skill you can develop" transition */
  .chart-wrap{ max-width:480px; margin:26px auto 0; background:#fff; border-radius:16px; padding:22px 20px 16px; }
  .chart-wrap svg{ width:100%; height:auto; display:block; }
  .chart-legend{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:10px; }
  .chart-legend span{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:var(--ink); }
  .chart-legend i{ width:9px; height:9px; border-radius:50%; display:inline-block; }

  /* readiness / profile summary */
  .summary-card{ max-width:480px; margin:26px auto 0; background:#fff; color:var(--ink); border-radius:18px; padding:24px 26px; }
  .summary-top{ display:flex; align-items:center; justify-content:space-between; }
  .summary-top .lbl{ font-size:13px; font-weight:700; color:var(--grey-600); }
  .summary-top .pill{ background:var(--sage-100); color:var(--sage-500); font-weight:800; font-size:11.5px; letter-spacing:.06em; padding:5px 12px; border-radius:100px; }
  .summary-bar{ position:relative; height:8px; border-radius:6px; margin-top:16px; background:linear-gradient(90deg,#E9647A,#E7B15C,#8FCB9C,#3E9A67); }
  .summary-marker{ position:absolute; top:-6px; width:20px; height:20px; border-radius:50%; background:#fff; border:3px solid var(--indigo-700); transform:translateX(-50%); }
  .summary-scale{ display:flex; justify-content:space-between; font-size:11px; color:var(--grey-600); margin-top:8px; }
  .summary-rows{ display:flex; align-items:center; gap:18px; margin-top:22px; }
  .summary-rows .items{ flex:1; display:flex; flex-direction:column; gap:12px; }
  .summary-row-item{ display:flex; align-items:center; gap:10px; }
  .summary-row-item .ic{ width:17px; height:17px; color:var(--indigo-500); flex-shrink:0; }
  .summary-row-item .txt .k{ font-size:11px; color:var(--grey-600); }
  .summary-row-item .txt .v{ font-size:13.5px; font-weight:700; }
  .summary-photo{ width:78px; height:78px; border-radius:16px; background:linear-gradient(160deg,#D9D4F7,#B7AEEF); flex-shrink:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
  .summary-photo svg{ width:32px; height:32px; color:var(--indigo-700); }
  .summary-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .summary-note{ max-width:480px; margin:16px auto 0; background:var(--sage-100); color:var(--ink); border-radius:12px; padding:16px 20px; }
  .summary-note .h{ font-weight:800; font-size:13px; color:var(--sage-500); margin-bottom:6px; }
  .summary-note .p{ font-size:12.5px; line-height:1.55; color:#3B4A42; }

  .legal{
    max-width:520px; margin:26px auto 0;
    display:flex; gap:10px; align-items:flex-start;
    background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14);
    border-radius:12px; padding:14px 18px;
  }
  .legal svg{ width:15px; height:15px; flex-shrink:0; margin-top:2px; color:var(--gold-400); }
  .legal p{ font-size:12px; line-height:1.6; color:#E3E0F7; }
  .legal .fake-link{ color:var(--gold-400); font-weight:700; text-decoration:underline; }

  .scroll-hint{ text-align:center; font-size:11.5px; color:#B7AFE6; font-weight:600; margin-top:14px; }

  .actions{ display:flex; justify-content:center; margin-top:40px; }
  .continue-btn{
    background:#f7a400;
    color:#fff; font-weight:700; font-size:14px;
    padding:13px 46px; border-radius:100px; border:none; cursor:pointer;
    font-family:inherit; transition:opacity .15s ease, transform .15s ease;
  }
  .continue-btn:disabled{ opacity:.4; cursor:default; }
  .continue-btn:not(:disabled):hover{ transform:translateY(-1px); }

  .done-wrap{ text-align:center; }
  .done-icon{ width:52px; height:52px; color:var(--gold-400); margin:0 auto; }
  .done-wrap h2{ margin-top:14px; }
  .done-wrap p{ margin-top:10px; color:#f7a400; font-size:13.5px; }

  footer{ margin-top:36px; font-size:12px; color:#8E86C4; text-align:center; }

  /* visible keyboard focus for every interactive element */
  button:focus-visible, .fake-link:focus-visible{
    outline:2px solid var(--gold-400);
    outline-offset:2px;
    border-radius:8px;
  }

  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }