/* ============================================================
   AI MATURITY CHECK
   Same palette and type as the site. The old big-square grid is
   gone: the page is carried by rhythm and motion instead.
   ============================================================ */
:root{
  --bg:#0e0e11;--ink:#eceae4;--dim:#a6a3a9;--acc:#ff4a2b;
  --line:rgba(236,234,228,.18);--soft:rgba(236,234,228,.07);
  --sans:"Helvetica Neue",Arial,sans-serif;
  --mono:"SFMono-Regular",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased}
.assessment{min-height:100vh;width:min(100%,760px);margin:auto;padding:0 22px 72px}

header{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between}
header>span,.eyebrow{font:600 10px var(--mono);letter-spacing:.16em;color:var(--dim)}
header>span{display:none}
.lockup{color:var(--ink);text-decoration:none;font:700 12px var(--mono);letter-spacing:.13em;
  display:flex;align-items:center;gap:12px}
.lockup i{width:28px;height:28px;border:2px solid var(--ink);position:relative;
  transition:transform .5s var(--ease)}
.lockup i:after{content:"";position:absolute;inset:7px;border:2px solid var(--acc)}
.lockup:hover i{transform:rotate(45deg)}

#intro,#loading,#result{padding-top:clamp(64px,13vh,132px)}
#flow{padding-top:clamp(26px,4.5vh,54px)}
#intro[hidden],#flow[hidden],#loading[hidden],#result[hidden]{display:none}
h1,h2{font-size:clamp(40px,10.5vw,74px);line-height:.98;letter-spacing:-.055em;
  margin:16px 0 24px;max-width:12ch}
.lede{font-size:clamp(18px,4.7vw,22px);color:var(--dim);max-width:34ch;margin:0 0 32px}
.primary{border:1px solid var(--ink);background:var(--ink);color:var(--bg);font:600 13px var(--mono);
  letter-spacing:.1em;text-transform:uppercase;padding:16px 19px;display:inline-flex;gap:18px;
  align-items:center;text-decoration:none;cursor:pointer;
  transition:background .25s,border-color .25s,color .25s,transform .25s var(--ease)}
.primary em{font-style:normal;transition:transform .3s var(--ease)}
.primary:hover{background:var(--acc);border-color:var(--acc);color:#fff}
.primary:hover em{transform:translateX(5px)}
.primary:active{transform:translateY(1px)}
.primary:disabled{opacity:.32;cursor:not-allowed;transform:none}
button{font:inherit}
small{display:block;color:var(--dim);font:12px var(--mono);margin-top:18px}

/* ---------- completion bar, pinned for the whole flow ---------- */
#topbar{position:fixed;inset:0 0 auto 0;height:34px;z-index:20;background:rgba(14,14,17,.92);
  backdrop-filter:blur(6px);border-bottom:1px solid var(--line);display:flex;align-items:center}
#topbar[hidden]{display:none}
#topbar i{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(255,74,43,.22);
  border-right:2px solid var(--acc);transition:width .55s var(--ease)}
#topbar span{position:relative;margin-left:auto;margin-right:clamp(14px,4vw,52px);
  font:600 10px var(--mono);letter-spacing:.16em;color:var(--dim)}
body.running header{margin-top:34px}

/* ---------- flow ---------- */
.flowgrid{display:block}

.question h2{max-width:14ch;margin-top:0;font-size:clamp(30px,7.6vw,50px)}
.help{font-size:17px;color:var(--dim);max-width:38ch}

/* every step arrives, it does not cut */
@keyframes stepin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes stepout{to{opacity:0;transform:translateY(-14px)}}
@keyframes rowin{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.question.in{animation:stepin .42s var(--ease) both}
.question.out{animation:stepout .2s ease-in both}
.question.in .answer{animation:rowin .44s var(--ease) both;
  animation-delay:calc(var(--i) * 45ms + 90ms)}

.answer{width:100%;display:block;text-align:left;border:1px solid var(--line);background:transparent;
  color:var(--ink);padding:15px 17px;margin:9px 0;cursor:pointer;font:500 16px/1.3 var(--sans);
  position:relative;overflow:hidden;
  transition:border-color .22s,background .22s,transform .22s var(--ease)}
.answer:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--acc);
  transform:scaleY(0);transform-origin:top;transition:transform .3s var(--ease)}
.answer:hover{border-color:rgba(236,234,228,.45);transform:translateX(3px)}
.answer:hover:before,.answer.selected:before{transform:scaleY(1)}
.answer.selected{border-color:var(--acc);background:rgba(255,74,43,.09)}
.answer b{display:block;font:10px var(--mono);letter-spacing:.12em;color:var(--dim);margin-bottom:6px}
.answer.selected b{color:var(--acc)}
.answer small{font:13px var(--sans);margin:4px 0 0;color:var(--dim)}
.answers-grid{display:grid;gap:0 12px}
@media(min-width:560px){.answers-grid.cols2{grid-template-columns:1fr 1fr}}

.controls{display:flex;justify-content:space-between;align-items:center;margin:34px 0 0}
.controls>button:first-child,#restart{border:0;background:transparent;color:var(--dim);
  font:12px var(--mono);padding:0;cursor:pointer;transition:color .2s}
.controls>button:first-child:hover,#restart:hover{color:var(--ink)}
textarea{width:100%;resize:vertical;padding:15px;background:transparent;border:1px solid var(--line);
  color:var(--ink);font:16px/1.5 var(--sans);transition:border-color .22s}
textarea:focus{outline:0;border-color:var(--acc)}
#free-wrap small{text-align:right;margin:6px 0}
.skip{margin-top:10px}

/* ---------- the rail: only wide screens have room for it ---------- */
.rail{display:none}
.rail li{list-style:none;margin:0 0 16px;font:600 10px var(--mono);letter-spacing:.14em;
  color:var(--dim);transition:color .3s}
.rail li.on{color:var(--ink);font-weight:700}
.rail .track{height:2px;background:var(--soft);margin-top:7px}
.rail .track i{display:block;height:100%;width:0;background:var(--acc);
  transition:width .6s var(--ease)}

/* ---------- loading ---------- */
.scan{width:68px;height:68px;border:1px solid var(--line);margin-bottom:38px;position:relative}
.scan:before,.scan:after{content:"";position:absolute;inset:15px;border:1px solid var(--acc);
  animation:scan 1.5s ease-in-out infinite}
.scan:after{inset:5px;border-color:var(--ink);animation-delay:.25s}
@keyframes scan{50%{transform:scale(.55) rotate(45deg);opacity:.35}}
#loading{min-height:72vh}
#loading h2{font-size:clamp(28px,7vw,46px);max-width:16ch}
#loading>p:last-child{font-size:18px;color:var(--dim);max-width:32ch}

/* ---------- result ---------- */
#result>*{animation:stepin .6s var(--ease) both}
#result-title{font-size:clamp(30px,6.6vw,50px);max-width:17ch}
#result>:nth-child(2){animation-delay:.06s}
#result>:nth-child(3){animation-delay:.12s}
#result>:nth-child(4){animation-delay:.18s}
.chart{position:relative;margin:44px -22px 60px;border-block:1px solid var(--line)}
canvas{display:block;margin-inline:auto;max-width:100%}
.chart>div{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;
  pointer-events:none}
.chart strong{font-size:clamp(44px,12vw,72px);letter-spacing:-.07em}
.chart span{font:10px/1.3 var(--mono);color:var(--dim)}
.wins>div{border-top:1px solid var(--line)}
.win{border-bottom:1px solid var(--line);padding:21px 0}
.win span{color:var(--acc);font:11px var(--mono)}
.win strong{display:block;font-size:20px;margin:7px 0}
.win p{color:var(--dim);margin:0}
#training-wrap{margin-top:52px}
.note{border-left:2px solid var(--acc);padding:5px 0 5px 18px;margin:56px 0}
.note>p:last-child{font-size:19px;margin-bottom:0}
.cta{border-top:1px solid var(--line);padding-top:40px;margin-top:44px}
.cta h2{font-size:clamp(29px,7.4vw,46px);max-width:14ch}
.cta>p:not(.eyebrow){font-size:18px;color:var(--dim);max-width:34ch}
.cta #restart{display:block;margin-top:26px}
.cta small{margin-top:20px}

/* ---------- lead form ---------- */
.fields{display:grid;gap:14px;margin:26px 0 22px}
@media(min-width:560px){.fields{grid-template-columns:1fr 1fr}.fields .wide{grid-column:1/-1}}
.fields label{display:block;font:600 10px var(--mono);letter-spacing:.14em;color:var(--dim)}
.fields input{width:100%;margin-top:7px;padding:13px 14px;background:transparent;
  border:1px solid var(--line);color:var(--ink);font:16px var(--sans);transition:border-color .22s}
.fields input:focus{outline:0;border-color:var(--acc)}
.fields input.bad{border-color:var(--acc)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formmsg{font:12px var(--mono);color:var(--dim);margin-top:16px;min-height:1.2em}
#lead-form.sending .primary{position:relative;overflow:hidden;pointer-events:none;opacity:.9}
#lead-form.sending .primary:after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--acc);transform-origin:left;animation:sendbar 1.1s var(--ease) infinite}
@keyframes sendbar{0%{transform:scaleX(0)}60%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}

.sent{display:flex;gap:18px;align-items:flex-start;border:1px solid var(--acc);padding:22px 24px;
  margin-top:26px;animation:stepin .5s var(--ease) both;background:rgba(255,74,43,.06)}
.sent svg{flex:0 0 auto;width:38px;height:38px}
.sent circle{fill:none;stroke:var(--acc);stroke-width:2;stroke-dasharray:113;stroke-dashoffset:113;
  animation:draw .7s var(--ease) .05s forwards}
.sent path{fill:none;stroke:var(--acc);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:26;stroke-dashoffset:26;animation:draw .35s var(--ease) .55s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.sent b{display:block;font:500 18px var(--sans);color:var(--ink);margin-bottom:6px}
.sent p{margin:0;font:15px/1.6 var(--sans);color:var(--dim)}
.sent .to{font-family:var(--mono);font-size:13px;color:var(--acc)}
.formmsg.ok{color:var(--acc)}

.multi .answer b{color:var(--acc)}
#multi-hint{margin:0 0 4px}

@media(min-width:680px){
  .assessment{width:min(100%,1320px);padding-inline:52px}
  header>span{display:block}
  #intro,#loading{padding-left:8%;max-width:980px}
  #flow{padding-top:clamp(72px,12vh,120px)}
  #flow .flowgrid{max-width:1080px}
  #result{padding-top:104px}
  .flowgrid{display:grid;grid-template-columns:190px minmax(0,1fr);gap:56px;align-items:start}
  .rail{display:block;position:sticky;top:110px;padding:0;margin:0}
  .rail ul{padding:0;margin:0}

  /* the report is the deliverable: give it the whole width.
     [hidden] has to win over this, or the report shows before the flow. */
  #result[hidden]{display:none}
  #result{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    column-gap:clamp(40px,5vw,88px);align-items:start}
  #result>.eyebrow,#result>#result-title,#result>.lede{grid-column:1}
  #result>.chart{grid-column:2;grid-row:1/span 3;margin:0;border:1px solid var(--line);
    padding:clamp(20px,3vw,38px) 0;align-self:start}
  #result>.wins,#result>.note,#result>.cta{grid-column:1/-1}
  #result-title{font-size:clamp(34px,3.6vw,54px);max-width:20ch}
  #result>.lede{max-width:52ch;font-size:19px}
  #wins-grid,#win-list,#training-list{display:grid;grid-template-columns:1fr 1fr;
    column-gap:clamp(24px,3vw,54px)}
  .note{max-width:76ch}
  .cta h2{max-width:20ch}
  .cta>p:not(.eyebrow){max-width:62ch}
  .fields{max-width:760px}
}
@media(min-width:980px){.flowgrid{grid-template-columns:210px minmax(0,1fr);gap:76px}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.001s!important;animation-delay:0s!important;
    transition-duration:.001s!important}
}