/* ============================================================
   Reload Assessment — scoped quiz styles.
   Every selector is namespaced under .reload-assessment so this
   block cohabits cleanly with the rest of the site.
   ============================================================ */

.reload-assessment{
  --ra-indigo : #121948;
  --ra-melon  : #F4A893;
  --ra-ivory  : #F4ECDD;
  --ra-sage   : #9DBAA9;
  --ra-line   : rgba(244,236,221,.18);

  --ra-bg-scale   : .55;
  --ra-bg-opacity : .05;

  position:relative; isolation:isolate; overflow:hidden;
  background:var(--ra-indigo);
  color:var(--ra-ivory);
  font-family:'Inter', 'Work Sans', system-ui, sans-serif;
  padding:80px 0 100px;
}
.reload-assessment *,
.reload-assessment *::before,
.reload-assessment *::after{ box-sizing:border-box }

.reload-assessment-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(244,168,147,.18), transparent 60%),
    radial-gradient(900px 600px at -10% 100%, rgba(157,186,169,.12), transparent 60%),
    var(--ra-indigo);
}
.reload-assessment-grain{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.reload-assessment-bg-icon{
  position:absolute;
  top:50%; left:50%;
  width:min(120vh, 120vw);
  aspect-ratio:1;
  transform:translate(-50%,-50%) scale(var(--ra-bg-scale));
  opacity:var(--ra-bg-opacity);
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1), opacity 1.2s ease;
  z-index:1; pointer-events:none;
}
.reload-assessment-bg-icon-spin{
  width:100%; height:100%;
  animation:reload-assessment-spin 90s linear infinite;
  transform-origin:50% 50%;
}
.reload-assessment-bg-icon img{
  width:100%; height:100%; display:block;
  filter:saturate(.8);
}
@keyframes reload-assessment-spin{ to{ transform:rotate(360deg) } }

.reload-assessment-stage{
  position:relative; z-index:2;
  display:grid; place-items:center;
  padding:24px;
  min-height:100%;
}

.reload-assessment .card{
  width:min(820px, 100%);
  background:linear-gradient(180deg, rgba(244,236,221,.04), rgba(244,236,221,.02));
  border:1px solid var(--ra-line);
  border-radius:24px;
  padding:56px 56px 48px;
  backdrop-filter:blur(6px);
  position:relative; overflow:hidden;
  animation:reload-assessment-fadeUp .55s cubic-bezier(.2,.7,.2,1) both;
}
.reload-assessment .card::before{
  content:""; position:absolute; inset:-1px; border-radius:24px; pointer-events:none;
  background:linear-gradient(135deg, transparent 60%, rgba(244,168,147,.25));
  mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:1px;
}
@keyframes reload-assessment-fadeUp{
  from{ opacity:0; transform:translateY(12px) }
  to  { opacity:1; transform:none }
}

.reload-assessment .eyebrow{
  color:var(--ra-sage); font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  margin:0 0 18px;
}
.reload-assessment h1{
  font-family:'Erstoria', Georgia, serif;
  font-weight:400;
  font-size:clamp(38px, 5.8vw, 68px);
  line-height:.98; letter-spacing:-.005em;
  margin:0 0 18px;
  color:var(--ra-melon);
}
.reload-assessment h1 em{ font-style:normal; color:var(--ra-ivory); font-weight:400 }
.reload-assessment p.lede{
  font-size:17px; line-height:1.6; color:rgba(244,236,221,.82);
  max-width:60ch; margin:0 0 32px;
}

.reload-assessment .row{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
}
.reload-assessment button.cta{
  appearance:none; border:0; cursor:pointer;
  background:var(--ra-melon); color:var(--ra-indigo);
  font-family:'Inter',sans-serif; font-weight:500;
  font-size:14px; letter-spacing:.14em; text-transform:uppercase;
  padding:16px 28px; border-radius:999px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.reload-assessment button.cta:hover:not(:disabled){
  transform:translateY(-1px); box-shadow:0 12px 30px -12px rgba(244,168,147,.6);
}
.reload-assessment button.cta:disabled{ opacity:.4; cursor:not-allowed }
.reload-assessment button.ghost{
  background:transparent; color:var(--ra-ivory);
  border:1px solid var(--ra-line);
  padding:14px 22px; border-radius:999px; cursor:pointer;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
}
.reload-assessment button.ghost:hover:not(:disabled){
  border-color:var(--ra-melon); color:var(--ra-melon);
}
.reload-assessment button.ghost:disabled{ opacity:.35; cursor:not-allowed }

.reload-assessment .meta{
  display:flex; gap:24px; color:rgba(244,236,221,.6);
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  margin-top:36px;
}
.reload-assessment .meta span b{ color:var(--ra-ivory); font-weight:500 }

/* Question card */
.reload-assessment .progress{
  height:2px; background:var(--ra-line);
  border-radius:2px; overflow:hidden; margin-bottom:36px;
}
.reload-assessment .progress > i{
  display:block; height:100%; width:0; background:var(--ra-melon);
  transition:width .5s cubic-bezier(.6,.05,.2,1);
}
.reload-assessment .qmeta{
  display:flex; justify-content:space-between;
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ra-sage); margin-bottom:14px;
}
.reload-assessment .question{
  font-family:'Erstoria', Georgia, serif; font-weight:400;
  font-size:clamp(24px, 3vw, 34px); line-height:1.15;
  color:var(--ra-ivory); margin:0 0 30px; letter-spacing:0;
}
.reload-assessment .options{ display:grid; gap:12px; margin-bottom:30px }
.reload-assessment .opt{
  text-align:left; cursor:pointer;
  background:rgba(244,236,221,.03);
  border:1px solid var(--ra-line);
  color:var(--ra-ivory);
  border-radius:14px; padding:18px 22px;
  font-size:15px; line-height:1.45;
  transition:all .2s ease;
  display:flex; gap:16px; align-items:center;
  font-family:inherit;
}
.reload-assessment .opt .dot{
  width:10px; height:10px; border-radius:50%;
  border:1px solid var(--ra-line); flex:0 0 auto;
  transition:all .2s ease;
}
.reload-assessment .opt:hover{
  border-color:var(--ra-melon);
  background:rgba(244,168,147,.06);
}
.reload-assessment .opt:hover .dot{ border-color:var(--ra-melon) }
.reload-assessment .opt.selected{
  border-color:var(--ra-melon);
  background:rgba(244,168,147,.1);
}
.reload-assessment .opt.selected .dot{
  background:var(--ra-melon); border-color:var(--ra-melon);
  box-shadow:0 0 0 4px rgba(244,168,147,.18);
}

.reload-assessment .nav{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
}

/* Lead capture form */
.reload-assessment .lead-form{
  display:grid; gap:14px; margin:0 0 30px;
}
.reload-assessment .lead-row{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.reload-assessment .lead-field{
  display:flex; flex-direction:column; gap:8px;
}
.reload-assessment .lead-field label{
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ra-sage);
}
.reload-assessment .lead-field label .req{ color:var(--ra-melon); margin-left:6px }
.reload-assessment .lead-field input{
  height:52px;
  padding:0 18px;
  background:rgba(244,236,221,.04);
  border:1px solid var(--ra-line);
  border-radius:14px;
  color:var(--ra-ivory);
  font:inherit; font-size:15px;
  transition:border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.reload-assessment .lead-field input::placeholder{ color:rgba(244,236,221,.35) }
.reload-assessment .lead-field input:focus{
  outline:none;
  border-color:var(--ra-melon);
  background:rgba(244,168,147,.05);
  box-shadow:0 0 0 4px rgba(244,168,147,.12);
}
.reload-assessment .lead-field.has-error input{
  border-color:#ff6c63;
  box-shadow:0 0 0 4px rgba(255,108,99,.12);
}

.reload-assessment .lead-honeypot{
  position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important;
  opacity:0 !important; pointer-events:none !important;
}

.reload-assessment .lead-consent{
  display:flex; align-items:flex-start; gap:12px;
  color:rgba(244,236,221,.82); font-size:13px; line-height:1.55;
  margin-top:4px;
}
.reload-assessment .lead-consent input{
  appearance:none; -webkit-appearance:none;
  width:18px; height:18px; border-radius:4px;
  border:1px solid var(--ra-line);
  background:rgba(244,236,221,.04);
  cursor:pointer; position:relative;
  flex:0 0 auto; margin-top:2px;
  transition:background-color .2s ease, border-color .2s ease;
}
.reload-assessment .lead-consent input:checked{
  background:var(--ra-melon); border-color:var(--ra-melon);
}
.reload-assessment .lead-consent input:checked::after{
  content:""; position:absolute; left:5px; top:1px;
  width:5px; height:10px;
  border:solid var(--ra-indigo); border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.reload-assessment .lead-consent a{ color:var(--ra-melon); text-decoration:underline }

.reload-assessment .lead-errors{
  background:rgba(255,108,99,.1);
  border:1px solid rgba(255,108,99,.4);
  color:#ffb3ad;
  border-radius:12px;
  padding:12px 16px;
  font-size:13px;
  line-height:1.5;
  margin:0 0 14px;
}
.reload-assessment .lead-errors ul{ margin:0; padding-left:18px }

/* Result */
.reload-assessment .result-hero{
  display:flex; gap:30px; align-items:center;
  margin-bottom:20px; flex-wrap:wrap;
}
.reload-assessment .badge-mark{ width:120px; height:120px; flex:0 0 auto }
.reload-assessment .badge-mark img{
  width:120px; height:120px; display:block;
  transform-origin:50% 50%;
  animation:reload-assessment-spin 24s linear infinite;
}
.reload-assessment .score{
  font-family:'Erstoria', Georgia, serif; font-weight:400;
  font-size:88px; line-height:1; color:var(--ra-melon);
  letter-spacing:-.02em;
}
.reload-assessment .score small{
  font-size:22px; color:rgba(244,236,221,.6);
  margin-left:4px; font-family:'Inter',sans-serif; letter-spacing:.06em;
}
.reload-assessment .tier{
  font-size:12px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ra-sage); margin-bottom:6px;
}

.reload-assessment .result-headline{
  font-family:'Erstoria', Georgia, serif; font-weight:400;
  font-size:clamp(32px, 4.5vw, 52px); line-height:1.05;
  letter-spacing:-.005em;
  margin:18px 0 14px; color:var(--ra-melon);
}

@media (max-width:640px){
  .reload-assessment{ padding:60px 0 80px }
  .reload-assessment .card{ padding:36px 26px }
  .reload-assessment .meta{ flex-direction:column; gap:8px }
  .reload-assessment .lead-row{ grid-template-columns:1fr }
}