/* The AI Business Growth Assessment — navigator, result, growth brief. */

.as { min-height: 100svh; padding-block: 118px 90px; position: relative; }
.as::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background:
    radial-gradient(70% 55% at 78% 8%, rgba(59,224,206,.09), transparent 60%),
    radial-gradient(60% 50% at 12% 92%, rgba(227,184,92,.08), transparent 62%);
}

/* ---------- Progress rail ---------- */
.as-rail { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
#as-railwrap { margin-bottom: 44px; }
#as-railwrap[hidden] { display: none; }
.as-rail__seg { flex: 1; height: 2px; border-radius: 2px; background: rgba(255,255,255,.10); position: relative; overflow: hidden; }
.as-rail__seg i { position: absolute; inset: 0; width: 0; background: linear-gradient(90deg, var(--teal), var(--gold)); transition: width .55s var(--ease); }
.as-rail__seg.is-done i { width: 100%; }
.as-rail__seg.now i { width: 100%; background: var(--teal); }
.as-rail__n { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--mute-2); margin-left: 16px; white-space: nowrap; }

/* ---------- Question ---------- */
.as-q { max-width: 900px; }
.as-q__k { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--teal); margin: 0 0 18px; }
.as-q h2 { font-size: clamp(27px, 3.6vw, 46px); }
.as-q__hint { color: var(--mute); font-size: 15px; margin-top: 16px; max-width: 56ch; }

.as-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; margin-top: 38px; }
.as-opt {
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 18px 20px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255,255,255,.028);
  font-size: 15px; color: var(--white); line-height: 1.35;
  transition: border-color .3s, background .3s, transform .3s var(--ease);
}
.as-opt:hover { border-color: rgba(59,224,206,.5); background: rgba(59,224,206,.06); transform: translateY(-2px); }
.as-opt:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.as-opt__box {
  width: 20px; height: 20px; flex: none; border-radius: 5px;
  border: 1px solid rgba(255,255,255,.28); display: grid; place-content: center;
  transition: border-color .3s, background .3s;
}
.as-opt--radio .as-opt__box { border-radius: 50%; }
.as-opt__box svg { opacity: 0; transition: opacity .2s; }
.as-opt[aria-checked="true"] { border-color: var(--gold); background: rgba(227,184,92,.11); }
.as-opt[aria-checked="true"] .as-opt__box { background: var(--gold); border-color: var(--gold); }
.as-opt[aria-checked="true"] .as-opt__box svg { opacity: 1; }

.as-nav { display: flex; gap: 14px; align-items: center; margin-top: 42px; flex-wrap: wrap; }
.as-nav__back {
  background: none; border: 0; cursor: pointer; color: var(--mute);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 4px;
}
.as-nav__back:hover { color: var(--white); }
.as-nav__back[hidden] { display: none; }

.as-step { animation: asIn .55s var(--ease); }
@keyframes asIn { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Result ---------- */
.rs-hd { text-align: center; max-width: 760px; margin-inline: auto; }
.rs-score { display: grid; place-items: center; margin: 34px auto 0; width: 250px; height: 250px; position: relative; }
.rs-score svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.rs-score__ring { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 6; }
.rs-score__arc {
  fill: none; stroke: url(#scoreG); stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 691; stroke-dashoffset: 691;
  transition: stroke-dashoffset 1.6s var(--ease);
}
.rs-score__v { font-family: var(--display); font-size: 74px; line-height: 1; color: var(--white); }
.rs-score__d { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute-2); margin-top: 10px; }

/* ---------- Radar + bars ---------- */
.rs-dims { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(26px,4vw,56px); align-items: center; }
@media (max-width: 860px) { .rs-dims { grid-template-columns: 1fr; } }
.radar { width: 100%; height: auto; overflow: visible; }
.radar__web { fill: none; stroke: rgba(255,255,255,.10); stroke-width: 1; }
.radar__spoke { stroke: rgba(255,255,255,.09); stroke-width: 1; }
.radar__area {
  fill: rgba(59,224,206,.16); stroke: var(--teal); stroke-width: 1.6; stroke-linejoin: round;
  opacity: 0; transform-origin: center; transform: scale(.05);
  transition: opacity .7s var(--ease), transform 1.1s var(--ease);
}
.radar.on .radar__area { opacity: 1; transform: none; }
.radar__pt { fill: var(--gold); opacity: 0; transition: opacity .5s .7s; }
.radar.on .radar__pt { opacity: 1; }
.radar__lbl { fill: var(--mute); font-size: 11px; font-family: var(--sans); letter-spacing: .12em; text-anchor: middle; }

.dbar { margin-bottom: 20px; }
.dbar__t { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.dbar__n { font-size: 11px; letter-spacing: .17em; text-transform: uppercase; color: var(--mute); }
.dbar__v { font-family: var(--display); font-size: 20px; color: var(--gold); }
.dbar__t + div { height: 5px; border-radius: 5px; background: rgba(255,255,255,.08); overflow: hidden; }
.dbar__f { display: block; height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, var(--teal-deep), var(--teal)); transition: width 1.15s var(--ease); }

/* ---------- Maturity ladder ---------- */
.mat { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 760px) { .mat { grid-template-columns: 1fr; } }
.mat__l {
  padding: 20px 18px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(255,255,255,.022); position: relative; transition: all .5s var(--ease);
}
.mat__l.is-you {
  border-color: var(--gold); background: linear-gradient(165deg, rgba(227,184,92,.18), rgba(227,184,92,.05));
  box-shadow: 0 16px 44px -22px rgba(227,184,92,.8);
}
.mat__l.below { opacity: .55; }
.mat__n { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute-2); }
.mat__l.is-you .mat__n { color: var(--gold); }
.mat__nm { font-size: 16px; font-weight: 600; margin-top: 8px; }
.mat__you {
  position: absolute; top: -10px; right: 14px;
  font-size: 9px; letter-spacing: .17em; text-transform: uppercase;
  background: var(--gold); color: #1A1204; padding: 3px 9px; border-radius: 999px; font-weight: 600;
}

/* ---------- Opportunities ---------- */
.opp { display: grid; grid-template-columns: 68px 1fr auto; gap: 22px; align-items: center; padding: 26px 0; border-top: 1px solid var(--line-2); }
@media (max-width: 700px) { .opp { grid-template-columns: 52px 1fr; } .opp__im { grid-column: 2; justify-self: start; } }
.opp__n { font-family: var(--display); font-size: 30px; color: var(--gold); opacity: .8; }
.opp__im { text-align: right; }
.opp__il { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--mute-2); display: block; margin-bottom: 6px; }
.opp__iv { font-size: 12.5px; font-weight: 600; letter-spacing: .1em; }
.opp__iv[data-i="VERY HIGH"] { color: var(--gold); }
.opp__iv[data-i="HIGH"] { color: var(--teal); }
.opp__iv[data-i="MEDIUM/HIGH"], .opp__iv[data-i="MEDIUM"] { color: var(--mute); }
.opp__sc { font-size: 10.5px; color: var(--mute-2); margin-top: 5px; }

/* ---------- Growth brief ---------- */
.brief { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(20px,3vw,34px); }
@media (max-width: 720px) { .brief { grid-template-columns: 1fr; } }
.brief .full { grid-column: 1 / -1; }

.msg { padding: 18px 20px; border-radius: 12px; margin-bottom: 22px; font-size: 14.5px; line-height: 1.6; }
.msg--err { border: 1px solid rgba(230,120,110,.42); background: rgba(230,120,110,.10); color: #F3C4BD; }
.msg--ok  { border: 1px solid rgba(59,224,206,.42); background: rgba(59,224,206,.10); color: #BDF3EC; }
.msg a { text-decoration: underline; }
.msg[hidden] { display: none; }

.done { text-align: center; max-width: 640px; margin-inline: auto; padding-block: 40px; }
.done__ic { width: 74px; height: 74px; margin: 0 auto 28px; }