/* Main Street AI — AI Opportunity Scan v3
   No decorative backdrop. All motion belongs to the elements themselves. */
.msa-scan *,.msa-scan *::before,.msa-scan *::after{box-sizing:border-box}
.msa-scan{--bg:#0B0C0E;--surf:#15171B;--surf2:#1B1E24;--ink:#F5F5F3;--muted:#A3A6AD;--line:#26292F;--acc:#23CFA4;
  background:var(--bg);color:var(--muted);font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  display:flex;flex-direction:column;align-items:center;padding:22px 20px 40px;line-height:1.5}
.msa-scan .wrap{width:100%;max-width:680px}

/* type */
.msa-scan h1{color:var(--ink);font-size:clamp(36px,8vw,62px);line-height:1;letter-spacing:-2px;margin:0 0 16px;font-weight:700}
.msa-scan h2{color:var(--ink);font-size:clamp(24px,4.6vw,34px);line-height:1.12;letter-spacing:-.8px;margin:0 0 10px;font-weight:700}
.msa-scan h3{color:var(--ink);font-size:19px;line-height:1.28;margin:0 0 6px;font-weight:600}
.msa-scan p{margin:0 0 14px;font-size:17px}
.msa-scan .lead{font-size:20px;color:var(--ink);max-width:28em}
.msa-scan .small{font-size:14.5px;color:var(--muted)}
.msa-scan .tiny{font-size:12.5px;color:#6d7179}
.msa-scan .catch{border-left:2px solid var(--acc);padding:2px 0 2px 14px;margin:20px 0 0;color:var(--ink);font-size:16px;max-width:30em}
.msa-scan .catch b{color:var(--acc)}

/* buttons */
.msa-scan .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--acc);color:#06110D;
  border:0;border-radius:12px;padding:17px 30px;font:inherit;font-size:18px;font-weight:600;cursor:pointer;
  transition:transform .12s ease,filter .2s ease}
.msa-scan .btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.msa-scan .btn:active{transform:translateY(0)}
.msa-scan .btn:disabled{opacity:.3;cursor:not-allowed;transform:none}
.msa-scan .btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--line);font-weight:500;font-size:16px;padding:15px 22px}
.msa-scan .btn.ghost:hover{color:var(--ink);border-color:#3a3f48}
.msa-scan .btn.sm{padding:11px 18px;font-size:15px;border-radius:10px}
.msa-scan .row{display:flex;gap:12px;align-items:center;margin-top:20px;flex-wrap:wrap}
.msa-scan .linky{background:none;border:0;color:var(--muted);font:inherit;font-size:14px;text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;padding:0;margin-top:18px}
.msa-scan .linky:hover{color:var(--ink)}

/* question + ring layout */
.msa-scan .qhead{display:flex;align-items:center;gap:18px;margin-bottom:6px}
.msa-scan .qhead .qtext{flex:1 1 auto;min-width:0}
.msa-scan .meter{flex:0 0 78px;width:78px;height:78px;position:relative}
.msa-scan .meter svg{width:78px;height:78px;transform:rotate(-90deg)}
.msa-scan .meter circle{fill:none;stroke-width:6;stroke-linecap:round}
.msa-scan .meter .track{stroke:#23262c}
.msa-scan .meter .fill{stroke:var(--acc);transition:stroke-dashoffset .75s cubic-bezier(.2,.8,.2,1)}
.msa-scan .meter .val{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink);font-size:15px;font-weight:700;letter-spacing:-.4px}
.msa-scan .meter.bump{animation:msaBump .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes msaBump{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
.msa-scan .meterlabel{font-size:12px;color:#6d7179;text-align:center;margin-top:4px}

/* options */
.msa-scan .opts{display:grid;gap:10px;margin:20px 0 4px}
.msa-scan .opt{display:flex;align-items:center;gap:13px;width:100%;text-align:left;cursor:pointer;background:var(--surf);
  border:1px solid var(--line);border-radius:13px;padding:17px 18px;color:var(--ink);font:inherit;font-size:17px;
  transition:border-color .14s,background .14s,transform .1s;animation:msaSlide .32s cubic-bezier(.2,.8,.2,1) backwards}
.msa-scan .opt:nth-child(1){animation-delay:.03s}.msa-scan .opt:nth-child(2){animation-delay:.07s}
.msa-scan .opt:nth-child(3){animation-delay:.11s}.msa-scan .opt:nth-child(4){animation-delay:.15s}
.msa-scan .opt:nth-child(5){animation-delay:.19s}.msa-scan .opt:nth-child(6){animation-delay:.23s}
.msa-scan .opt:nth-child(7){animation-delay:.27s}
.msa-scan .opt:hover{border-color:#3a3f48;background:var(--surf2);transform:translateX(4px)}
.msa-scan .opt[aria-pressed="true"]{border-color:var(--acc);background:rgba(35,207,164,.09)}
.msa-scan .opt.picked{animation:msaPick .42s ease}
@keyframes msaPick{0%{transform:scale(1)}35%{transform:scale(.97);background:rgba(35,207,164,.2)}100%{transform:scale(1)}}
.msa-scan .opt .emo{font-size:21px;flex:0 0 26px;text-align:center}
.msa-scan .opt .tick{width:21px;height:21px;border-radius:7px;border:1.5px solid var(--line);flex:0 0 21px;position:relative;transition:.15s}
.msa-scan .opt[aria-pressed="true"] .tick{border-color:var(--acc);background:var(--acc)}
.msa-scan .opt[aria-pressed="true"] .tick::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;
  border:solid #06110D;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* flying credit: answer -> meter */
.msa-scan .credit{position:fixed;z-index:60;color:var(--acc);font-weight:700;font-size:16px;pointer-events:none;
  animation:msaFly .75s cubic-bezier(.4,0,.2,1) forwards}
@keyframes msaFly{0%{opacity:0;transform:translate(0,0) scale(.8)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.5)}}

/* number card */
.msa-scan .numcard{background:linear-gradient(160deg,#101317,#181c22);border:1px solid var(--line);
  border-radius:20px;padding:40px 26px;text-align:center;animation:msaRise .5s cubic-bezier(.2,.8,.2,1)}
.msa-scan .numcard .kicker{color:var(--muted);font-size:12.5px;letter-spacing:1.8px;text-transform:uppercase;margin-bottom:14px}
.msa-scan .numcard .huge{color:var(--acc);font-size:clamp(50px,14vw,96px);line-height:1;letter-spacing:-3.5px;font-weight:700;display:block}
.msa-scan .numcard .sub{color:var(--ink);font-size:19px;margin-top:12px}
.msa-scan .numcard{margin-bottom:6px}
@keyframes msaRise{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}

/* blurred running total during the quiz */
.msa-scan .meter .val{filter:blur(2.5px);transition:filter .3s ease}
.msa-scan .meter.reveal .val{filter:none}

/* main problem */
.msa-scan .problem{border-color:var(--acc)}
.msa-scan .problem .pct{color:var(--acc);font-size:34px;font-weight:700;letter-spacing:-1px;line-height:1.1}

/* share step */
.msa-scan .shares{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:9px;margin-top:14px}
.msa-scan .shares a{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--bg);
  border:1px solid var(--line);border-radius:11px;padding:13px 10px;color:var(--ink);text-decoration:none;
  font-size:15px;transition:border-color .15s,transform .1s}
.msa-scan .shares a:hover{border-color:var(--acc);transform:translateY(-2px)}
.msa-scan .stepnum{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  background:var(--acc);color:#06110D;font-size:14px;font-weight:700;margin-right:9px}


/* screen 1 sits centred in the viewport, then fades as you scroll into the pitch */
.msa-scan .screen1{min-height:calc(100vh - 150px);display:flex;flex-direction:column;justify-content:center;
  will-change:opacity,transform}
.msa-scan .scrollcue{display:flex;align-items:center;gap:9px;margin-top:34px;color:#6d7179;font-size:13px}
.msa-scan .scrollcue i{display:block;width:18px;height:28px;border:1.5px solid #3a3f48;border-radius:10px;position:relative}
.msa-scan .scrollcue i::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:6px;border-radius:2px;
  background:#6d7179;transform:translateX(-50%);animation:msaWheel 1.7s ease-in-out infinite}
@keyframes msaWheel{0%{opacity:0;transform:translate(-50%,0)}35%{opacity:1}100%{opacity:0;transform:translate(-50%,10px)}}
.msa-scan .salesbelow{padding-top:8px;opacity:0;pointer-events:none;will-change:opacity,transform}

/* pie: their biggest leak is the only readable slice */
.msa-scan .piewrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.msa-scan .pie{flex:0 0 172px;width:172px;height:172px;position:relative}
.msa-scan .pie svg{width:172px;height:172px;transform:rotate(-90deg)}
.msa-scan .pie .seg{fill:none;stroke-width:26}
.msa-scan .pie .seg.dim{filter:blur(3.5px);opacity:.75}
.msa-scan .pie .hole{position:absolute;inset:36px;border-radius:50%;background:var(--surf);display:grid;place-items:center;text-align:center}
.msa-scan .pie .hole b{color:var(--acc);font-size:26px;letter-spacing:-1px;line-height:1}
.msa-scan .pie .hole span{display:block;color:#6d7179;font-size:11px;letter-spacing:.6px;text-transform:uppercase;margin-top:3px}
.msa-scan .pielegend{flex:1 1 220px;min-width:0}
.msa-scan .pielegend .row1{display:flex;align-items:center;gap:9px;margin-bottom:7px;font-size:16px;color:var(--ink)}
.msa-scan .pielegend .dot{width:11px;height:11px;border-radius:3px;flex:0 0 11px;background:var(--acc)}
.msa-scan .pielegend .row1.dim{color:#6d7179}
.msa-scan .pielegend .row1.dim .dot{background:#3a3f48}
.msa-scan .pielegend .row1.dim .lbl{filter:blur(3.5px)}

/* cards */
.msa-scan .card{background:var(--surf);border:1px solid var(--line);border-radius:16px;padding:22px;margin:0 0 12px;
  animation:msaSlide .38s cubic-bezier(.2,.8,.2,1) backwards}
.msa-scan .card.step2{animation-delay:.08s}.msa-scan .card.step3{animation-delay:.16s}
.msa-scan .pack a{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--bg);
  border:1px solid var(--line);border-radius:11px;padding:15px 16px;margin-bottom:9px;color:var(--ink);
  text-decoration:none;font-size:16px;transition:border-color .15s,transform .1s}
.msa-scan .pack a:hover{border-color:var(--acc);transform:translateX(3px)}
.msa-scan .pack a span.go{color:var(--acc);font-size:14px;white-space:nowrap}
.msa-scan .locked{filter:blur(8px);pointer-events:none;user-select:none}
.msa-scan .lockwrap{position:relative}
.msa-scan .lockwrap .peek{position:absolute;inset:0;display:grid;place-items:start center;padding-top:34px;z-index:3}
.msa-scan .lockwrap .peek span{background:rgba(11,12,14,.86);border:1px solid var(--line);border-radius:999px;
  padding:10px 20px;color:var(--ink);font-size:14.5px;font-weight:600}

/* email */
.msa-scan .gate{background:var(--surf);border:1px solid var(--acc);border-radius:18px;padding:24px;margin:18px 0 12px}
.msa-scan form{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.msa-scan input[type=email],.msa-scan textarea{flex:1 1 250px;min-width:0;background:var(--bg);border:1px solid var(--line);
  border-radius:12px;padding:16px;color:var(--ink);font:inherit;font-size:17px}
.msa-scan textarea{flex:1 1 100%;min-height:88px;resize:vertical}
.msa-scan input[type=email]:focus,.msa-scan textarea:focus{outline:none;border-color:var(--acc)}
.msa-scan .err{color:#ff8b7a;font-size:14px;margin-top:10px;display:none}
.msa-scan .brief{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:15px;margin-top:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--muted);white-space:pre-wrap;
  max-height:190px;overflow:auto}

/* sales page */
.msa-scan .hero-proof{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 0}
.msa-scan .hero-proof span{background:var(--surf);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:13.5px}
.msa-scan .story p{max-width:34em}
.msa-scan .quote{background:var(--surf);border-left:2px solid var(--acc);border-radius:0 12px 12px 0;padding:16px 18px;margin:0 0 10px}
.msa-scan .quote p{margin:0 0 6px;color:var(--ink);font-size:16px}
.msa-scan .quote .who{font-size:13.5px;color:var(--muted)}
.msa-scan .faq{border-top:1px solid var(--line);padding:16px 0}
.msa-scan .faq h3{margin-bottom:4px}
.msa-scan .faq p{margin:0;font-size:16px}
.msa-scan .bury{margin-top:40px;text-align:center}
.msa-scan .bury a{color:#43474f;font-size:12px;text-decoration:underline;cursor:pointer}
.msa-scan .foot{margin-top:26px;font-size:12.5px;color:#585c64;text-align:center}
.msa-scan .foot a{color:#585c64}
.msa-scan .hide{display:none!important}
@keyframes msaSlide{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.msa-scan .fade{animation:msaSlide .3s cubic-bezier(.2,.8,.2,1)}

@media (max-width:520px){
  .msa-scan{padding:16px 16px 32px}
  .msa-scan .btn{width:100%}
  .msa-scan .qhead{gap:12px}
  .msa-scan .meter,.msa-scan .meter svg{flex-basis:62px;width:62px;height:62px}
  .msa-scan .billboard .legs{gap:38px}
}
@media (prefers-reduced-motion:reduce){.msa-scan *{animation:none!important;transition:none!important}}