/* ==========================================================================
   ScanToShop360 marketing — design pass
   Display type, the Product menu, real screenshots, pricing toggle and table,
   tour role tabs, contrast. Loaded last.
   ========================================================================== */

/* --- type: a display face for headings, Jakarta stays for reading -------- */
:root{--display:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
h1,h2{font-family:var(--display);font-weight:750;letter-spacing:-.045em;font-variation-settings:"opsz" 96}
h3{font-family:var(--display);letter-spacing:-.03em}
.brand{font-family:var(--display);letter-spacing:-.035em}

/* --- contrast: small grey labels pass 4.5:1 on the light ground ---------- */
:root:not([data-theme="dark"]){--ink-3:#5F6A84}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ink-3:#A0ABC0}}
:root[data-theme="dark"]{--ink-3:#A0ABC0}

/* --- Product menu --------------------------------------------------------- */
.mega-wrap{position:static}
.mega-btn{
  display:inline-flex;align-items:center;gap:5px;padding:8px 14px;border-radius:9px;border:0;
  background:none;font:inherit;font-size:14.5px;font-weight:500;color:var(--ink-2);cursor:pointer;transition:.16s;
}
.mega-btn:hover,.mega-btn[aria-expanded="true"],.mega-btn.on{color:var(--ink);background:var(--panel)}
.mega-btn .chev{width:15px;height:15px;transition:transform .25s}
.mega-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}

.mega{
  position:absolute;left:0;right:0;top:100%;padding:0 24px;
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.99);transform-origin:top center;
  transition:opacity .22s, transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s .28s;
}
.mega.open{opacity:1;visibility:visible;transform:none;transition:opacity .22s, transform .28s cubic-bezier(.2,.8,.2,1)}
.mega-in{
  max-width:1152px;margin:8px auto 0;display:grid;grid-template-columns:1fr 300px;gap:0;
  background:var(--panel);border:1px solid var(--line);border-radius:22px;overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(30,27,75,.45),0 0 0 1px rgba(255,255,255,.02);
}
.mega-areas{padding:22px 22px 18px}
.mega-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px;padding-left:10px}
.mega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.mega-item{display:flex;gap:12px;align-items:flex-start;padding:11px 10px;border-radius:12px;transition:background .16s}
.mega-item:hover{background:var(--panel-2)}
.mega-item .ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--accent-tint);color:var(--accent);transition:.25s}
.mega-item:hover .ico{background:var(--grad);color:#fff;transform:rotate(-6deg)}
.mega-item .ico .i{width:18px;height:18px}
.mega-item b{display:block;font-size:14px;font-weight:700;color:var(--ink)}
.mega-item small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.3px;line-height:1.4;color:var(--ink-3);margin-top:2px}
.mega-side{background:var(--panel-2);padding:18px;display:flex;flex-direction:column;gap:4px;border-left:1px solid var(--line)}
.mega-shot{display:flex;flex-direction:column;gap:10px;padding:8px;border-radius:14px;margin-bottom:6px;transition:background .16s}
.mega-shot:hover{background:var(--panel)}
.mega-shot picture{border-radius:10px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);aspect-ratio:16/9}
.mega-shot img{width:100%;height:100%;object-fit:cover;object-position:top left;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.mega-shot:hover img{transform:scale(1.05)}
.mega-shot b{display:block;font-size:14px}
.mega-shot small{display:block;font-size:12.3px;color:var(--ink-3);line-height:1.4}
.mega-link{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;font-size:14px;font-weight:600;color:var(--ink-2);transition:.16s}
.mega-link .i{width:17px;height:17px;color:var(--accent)}
.mega-link:hover{background:var(--panel);color:var(--ink)}
@media (max-width:1100px){.mega-grid{grid-template-columns:repeat(2,1fr)}}
.nav{position:sticky}
.nav .nav-in{position:relative}

/* --- real screenshots inside device frames -------------------------------- */
.shot-frame{position:relative;overflow:hidden}
.shot-frame picture{display:block;line-height:0;background:var(--panel-2)}
.shot-frame img{width:100%;height:auto;display:block}
.shot-frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(120deg,rgba(255,255,255,.16) 0%,transparent 30%);
}
.split .shot-frame{box-shadow:0 2px 6px rgba(30,41,59,.06),0 40px 80px -36px rgba(76,29,149,.55)}

/* carousel: a turntable of real screens */
.c3{--w:min(600px,80vw);--c3r:560px;--d:0;margin-top:-12px}
.c3-stage{
  height:calc(var(--w) * .66 + 150px);perspective:2000px;perspective-origin:50% 30%;
  display:grid;place-items:center;position:relative;
}
/* soft halo behind the front screen */
.c3-stage::before{
  content:"";position:absolute;left:50%;top:44%;width:calc(var(--w) * 1.25);aspect-ratio:2/1;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--coral) 22%,transparent),color-mix(in srgb,var(--coral) 8%,transparent) 55%,transparent);
  filter:blur(24px);
}
.c3-stage::after{display:none}
.c3 .c3-ring{
  width:var(--w);height:calc(var(--w) * .625 + 38px);margin-top:-36px;
  transform:translateZ(calc(var(--c3r) * -1)) rotateX(-4deg) rotateY(var(--ang,0deg));
  transition:transform 1.1s cubic-bezier(.22,.8,.22,1);
}

/* the turntable: a disc lying at the foot of the screens, turning with them */
.c3-floor{
  position:absolute;left:50%;top:calc(100% + 6px);width:calc(var(--c3r) * 2 + 140px);aspect-ratio:1;
  transform:translate(-50%,-50%) rotateX(90deg);pointer-events:none;border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--accent) 40%,transparent) 0 .4deg,transparent .4deg 5deg),
    radial-gradient(closest-side,color-mix(in srgb,var(--accent) 16%,transparent),transparent 80%);
  -webkit-mask:radial-gradient(closest-side,transparent 86%,#000 87%,#000 93%,transparent 94%,transparent 97%,#000 97.5%,#000 98.5%,transparent 99%);
          mask:radial-gradient(closest-side,transparent 86%,#000 87%,#000 93%,transparent 94%,transparent 97%,#000 97.5%,#000 98.5%,transparent 99%);
  opacity:.7;
}
.c3-floor i{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 150deg,transparent 0 300deg,color-mix(in srgb,var(--coral) 80%,transparent) 360deg);
}

/* panels fade, soften and drop back the further round they are */
.c3 .c3-panel{
  cursor:pointer;
  opacity:calc(1 - var(--d) * .55);
  filter:saturate(calc(1 - var(--d) * .55)) brightness(calc(1 - var(--d) * .14)) blur(calc(var(--d) * 1.6px));
  transition:opacity .9s, filter .9s;
}
.c3 .c3-panel.front{cursor:grab}
.c3-stage.dragging .c3-panel{transition:none;cursor:grabbing}
.c3 .c3-panel .device{
  border-radius:14px;
  box-shadow:0 0 0 1px var(--line),0 50px 90px -40px rgba(76,29,149,.6),0 18px 30px -24px rgba(30,41,59,.35);
  -webkit-box-reflect:below 10px linear-gradient(transparent 72%,rgba(255,255,255,.16));
}
.c3 .c3-panel.front .device{
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 45%,var(--line)),0 60px 110px -40px rgba(124,58,237,.7),0 20px 36px -24px rgba(30,41,59,.4);
}
.c3-panel figcaption{display:none}
.c3-panel .shot-frame img{aspect-ratio:16/10;object-fit:cover;object-position:top left}

/* "now showing" card */
.c3-ctrl{display:flex;align-items:center;justify-content:center;gap:14px;margin:4px auto 0;padding:0 16px;max-width:680px;position:relative;z-index:2}
.c3-arrow{
  flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);color:var(--ink);box-shadow:var(--shadow-sm);
  transition:transform .2s, border-color .2s, color .2s;
}
.c3-arrow:hover{transform:translateY(-2px);border-color:var(--accent);color:var(--accent)}
.c3-arrow:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.c3-now{
  flex:1;min-width:0;display:flex;align-items:center;gap:14px;padding:12px 16px 12px 12px;
  background:color-mix(in srgb,var(--panel) 82%,transparent);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.c3-now-ico{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--grad);color:#fff}
.c3-now-ico svg{width:20px;height:20px}
.c3-now-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;text-align:left}
.c3-now-txt strong{font-size:15px;color:var(--ink)}
.c3-now-txt span{font-size:13.5px;line-height:1.4;color:var(--ink-2)}
.c3-now-n{flex:none;font-family:var(--mono);font-size:12px;color:var(--ink-3);letter-spacing:.04em}
.c3-now.swap .c3-now-txt,.c3-now.swap .c3-now-ico{animation:c3swap .5s cubic-bezier(.2,.7,.3,1)}
@keyframes c3swap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.c3-foot{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:18px}
.c3 .c3-dots{display:flex;gap:8px}
.c3 .c3-dots button{
  position:relative;overflow:hidden;width:9px;height:9px;border-radius:9px;border:0;padding:0;cursor:pointer;
  background:var(--line);transition:width .35s, background .35s;
}
.c3 .c3-dots button[aria-selected="true"]{width:36px;background:color-mix(in srgb,var(--accent) 25%,var(--line))}
.c3 .c3-dots button[aria-selected="true"]::after{content:"";position:absolute;inset:0;background:var(--grad-deco);transform-origin:left}
.c3.playing .c3-dots button[aria-selected="true"]::after{animation:c3fill var(--delay,3600ms) linear}
@keyframes c3fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.c3-sync{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--ink-3)}
.c3-sync i{width:7px;height:7px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 0 rgba(34,197,94,.5);animation:c3pulse 2s infinite}
@keyframes c3pulse{70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

@media (max-width:640px){
  .c3{--w:84vw}
  .c3-stage{height:calc(var(--w) * .66 + 90px);perspective:1200px}
  .c3-ctrl{gap:8px}
  .c3-arrow{width:40px;height:40px}
  .c3-now{padding:10px;gap:10px}
  .c3-now-ico{width:36px;height:36px}
  .c3-now-n{display:none}
  .c3-now-txt span{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  .c3 .c3-ring{transition-duration:.01s}
  .c3-sync i,.c3-now.swap .c3-now-txt,.c3-now.swap .c3-now-ico{animation:none}
}

/* tour: two screens layered in depth */
.stack3d{position:relative;perspective:1600px;padding:0 0 12% 10%}
.stack3d .back{
  position:absolute;left:0;top:-6%;width:78%;opacity:.9;
  transform:rotateY(18deg) translateZ(-120px);transform-origin:left center;filter:saturate(.8);
}
.stack3d .front{position:relative;transform-origin:center}
@media (max-width:700px){.stack3d{padding:0}.stack3d .back{display:none}}

/* --- pricing: billing toggle --------------------------------------------- */
.billing{
  position:relative;display:flex;width:max-content;margin:0 auto 28px;padding:5px;border-radius:100px;
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.billing button{
  position:relative;z-index:1;border:0;background:none;font:inherit;font-size:14.5px;font-weight:700;
  padding:10px 20px;border-radius:100px;color:var(--ink-2);cursor:pointer;transition:color .3s;
  display:inline-flex;align-items:center;gap:8px;
}
.billing button[aria-pressed="true"]{color:#fff}
.billing .save{font-size:11px;font-weight:700;padding:3px 8px;border-radius:100px;background:var(--brass-tint);color:var(--brass);transition:.3s}
.billing button[aria-pressed="true"] .save{background:rgba(255,255,255,.22);color:#fff}
.billing-pill{
  position:absolute;top:5px;bottom:5px;left:5px;border-radius:100px;background:var(--grad);
  box-shadow:0 8px 20px -8px rgba(124,58,237,.7);
  width:var(--pw,90px);transform:translateX(var(--px,0));transition:transform .45s cubic-bezier(.2,.9,.25,1.15), width .45s;
}
.plan .price b{display:inline-flex;align-items:baseline}
.plan .price b .amt{display:inline-block;font-size:inherit;color:inherit;letter-spacing:inherit}
.plan .price b{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em}
.plan .amt.flip{animation:flipnum .5s cubic-bezier(.2,.8,.2,1)}
@keyframes flipnum{0%{transform:rotateX(0)}45%{transform:rotateX(90deg);opacity:.2}55%{transform:rotateX(-90deg);opacity:.2}100%{transform:rotateX(0)}}
.plan .unit{transition:opacity .3s}
.plan.featured{background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--grad) border-box;border:2px solid transparent}
.plan.featured .flag{background:var(--grad);color:#fff}

/* --- pricing: collapsible table ------------------------------------------ */
.tbl-tools{display:flex;justify-content:flex-end;padding:12px 16px 0}
.tbl-tools .textlink{background:none;border:0;cursor:pointer;font:inherit;font-weight:600;font-size:14px}
.ptable tr.grp td{background:var(--panel-2);vertical-align:middle}
.ptable tr.grp:hover td{background:color-mix(in srgb,var(--accent) 6%,var(--panel-2))}
.grp-btn{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:0;padding:0;
  font:inherit;color:inherit;cursor:pointer;
}
.grp-btn .ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--accent-tint);color:var(--accent)}
.grp-btn .ico .i{width:17px;height:17px}
.grp-btn > span:nth-child(2){flex:1;min-width:0}
.grp-btn .chev{width:18px;height:18px;color:var(--ink-3);transition:transform .3s;flex:none}
.grp-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.ptable tr.sub td:first-child{padding-left:62px}
.ptable tr.sub.show{animation:rowin .4s cubic-bezier(.2,.8,.2,1) both}
.ptable tr.lim-h td{background:var(--panel-2)}
.ptable thead th{z-index:2}

/* --- tour: role tabs ------------------------------------------------------ */
.roles-bar{position:sticky;top:calc(var(--nav-h) + 8px);z-index:30;margin:28px 0 -8px}
.roles{
  position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:6px;margin-top:6px;
  background:color-mix(in srgb,var(--panel) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);
}
.role-tab{
  position:relative;z-index:1;display:flex;align-items:center;gap:12px;text-align:left;
  border:0;background:none;padding:12px 14px;border-radius:15px;cursor:pointer;font:inherit;color:var(--ink-2);
  transition:color .3s;
}
.role-tab .ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;background:var(--accent-tint);color:var(--accent);transition:.3s}
.role-tab .ico .i{width:19px;height:19px}
.role-tab b{display:block;font-size:15px;color:var(--ink);transition:color .3s}
.role-tab small{display:block;font-size:12.5px;color:var(--ink-3);transition:color .3s}
.role-tab[aria-selected="true"] b,.role-tab[aria-selected="true"] small{color:#fff}
.role-tab[aria-selected="true"] .ico{background:rgba(255,255,255,.2);color:#fff}
.role-ink{
  position:absolute;top:6px;bottom:6px;left:0;border-radius:15px;background:var(--grad);
  box-shadow:0 12px 26px -12px rgba(124,58,237,.8);
  width:var(--iw,0);transform:translateX(var(--ix,0));transition:transform .5s cubic-bezier(.2,.9,.25,1.1), width .5s;
}
@media (max-width:760px){
  .roles{grid-template-columns:repeat(4,auto);overflow-x:auto;scrollbar-width:none}
  .role-tab small{display:none}
  .role-tab{padding:10px}
}
.js [data-panel][hidden]{display:none}
.js [data-panel].enter{animation:panelin .6s cubic-bezier(.2,.8,.2,1)}
@keyframes panelin{from{opacity:0;transform:translateY(24px) scale(.985)}}

/* features page sidebar: icon instead of a code */
.f-index a .idx{width:15px;height:15px;color:var(--ink-3);flex:none;align-self:center}
.f-index a.on .idx{color:var(--accent)}

@media (prefers-reduced-motion:reduce){
  .mega,.billing-pill,.role-ink{transition:none}
  .plan .amt.flip,.js [data-panel].enter,.ptable tr.sub.show{animation:none}
}

/* Product menu: industries row */
.mega-inds{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:6px}
.mega-inds a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--ink-2);transition:.16s}
.mega-inds a:hover{background:var(--panel);color:var(--ink)}
.mega-inds i{width:14px;height:14px;border-radius:5px;background:linear-gradient(135deg,var(--a),var(--b));flex:none}

/* --- savings calculator --------------------------------------------------- */
.calc{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:980px){.calc{grid-template-columns:1.2fr .8fr;align-items:start}}
.calc-tools{display:grid;gap:8px;grid-template-columns:1fr}
@media (min-width:640px){.calc-tools{grid-template-columns:1fr 1fr}}
.calc-row{
  display:grid;grid-template-columns:22px 36px 1fr auto;align-items:center;gap:12px;cursor:pointer;
  padding:12px 14px;border-radius:14px;background:var(--panel);border:1px solid var(--line);
  transition:border-color .2s, box-shadow .2s, background .2s, opacity .2s;
}
.calc-row:not(.on){opacity:.62}
.calc-row.on{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:0 10px 24px -18px rgba(124,58,237,.7)}
.calc-row input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}
.calc-row .tick{width:22px;height:22px;border-radius:7px;border:1.6px solid var(--line);display:grid;place-items:center;color:transparent;transition:.2s}
.calc-row.on .tick{background:var(--grad);border-color:transparent;color:#fff}
.calc-row .tick .i{width:14px;height:14px;stroke-width:2.6}
.calc-row:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.calc-row .ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--accent-tint);color:var(--accent)}
.calc-row .ico .i{width:18px;height:18px}
.calc-row .lbl{font-size:14px;font-weight:600;line-height:1.3}
.calc-row .cost{display:flex;align-items:center;gap:2px;font-family:var(--mono);font-size:12.5px;color:var(--ink-3)}
.calc-row .cost input{
  width:56px;font:inherit;font-size:14px;font-weight:600;color:var(--ink);text-align:right;
  border:1px solid var(--line);border-radius:8px;padding:5px 6px;background:var(--panel-2);
}
.calc-row .cost input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
.calc-out{
  position:sticky;top:calc(var(--nav-h) + 16px);border-radius:24px;padding:26px;color:var(--deep-ink);
  background:linear-gradient(160deg,#0D1026 0%,#171B3E 55%,#2A1050 100%);display:flex;flex-direction:column;gap:18px;overflow:hidden;
}
.calc-out::before{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,#7C3AED,transparent 65%);opacity:.6;pointer-events:none}
.calc-out > *{position:relative}
.calc-row2{display:flex;flex-direction:column;gap:6px}
.calc-row2 label{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--deep-ink-2)}
.calc-row2 select{font:inherit;font-size:14px;font-weight:600;padding:10px 12px;border-radius:10px;border:1px solid var(--deep-line);background:rgba(255,255,255,.06);color:#fff}
.calc-row2 select option{color:#111}
.calc-bars{display:flex;flex-direction:column;gap:10px}
.cb{display:grid;grid-template-columns:110px 1fr 64px;align-items:center;gap:10px;font-size:13px;color:var(--deep-ink-2)}
.cb i{height:12px;border-radius:12px;width:var(--w);transition:width .7s cubic-bezier(.2,.8,.2,1);min-width:6px}
.cb.now i{background:linear-gradient(90deg,#94A3B8,#CBD5E1)}
.cb.us i{background:var(--grad-deco)}
.cb b{font-family:var(--mono);font-size:13px;color:#fff;text-align:right}
.calc-big small{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--deep-ink-2)}
.calc-big strong{display:flex;align-items:baseline;gap:6px;font-family:var(--display);font-size:clamp(44px,5vw,64px);line-height:1;letter-spacing:-.04em;
  background:linear-gradient(90deg,#A5B4FC,#F0ABFC,#F9A8D4);-webkit-background-clip:text;background-clip:text;color:transparent}
.calc-big strong em{font-style:normal;font-size:18px;letter-spacing:0;color:var(--deep-ink-2);-webkit-text-fill-color:var(--deep-ink-2)}
.calc-big p{font-size:14px;color:var(--deep-ink-2);margin-top:6px}
.calc-big.neg strong{background:linear-gradient(90deg,#CBD5E1,#94A3B8);-webkit-background-clip:text;background-clip:text}
.calc-note{font-size:12px;color:var(--deep-ink-2);opacity:.8;line-height:1.5}

/* --- multi-step demo form ------------------------------------------------- */
.steps-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 22px;position:relative}
.steps-bar .sb{display:flex;flex-direction:column;gap:8px;font-size:12.5px;font-weight:600;color:var(--ink-3);transition:color .3s}
.steps-bar .sb i{display:block;height:5px;border-radius:5px;background:var(--line);overflow:hidden;position:relative}
.steps-bar .sb i::after{content:"";position:absolute;inset:0;background:var(--grad-deco);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.steps-bar .sb.done i::after,.steps-bar .sb.now i::after{transform:scaleX(1)}
.steps-bar .sb.now,.steps-bar .sb.done{color:var(--ink)}
.steps-bar .sb span b{font-family:var(--mono);font-size:10.5px;color:var(--accent);margin-right:6px}
.js .ms-step[hidden]{display:none}
.ms-step.enter-f{animation:stepf .45s cubic-bezier(.2,.8,.2,1)}
.ms-step.enter-b{animation:stepb .45s cubic-bezier(.2,.8,.2,1)}
@keyframes stepf{from{opacity:0;transform:translateX(30px)}}
@keyframes stepb{from{opacity:0;transform:translateX(-30px)}}
.ms-step legend{font-family:var(--display);font-size:20px;font-weight:700;margin-bottom:14px;padding:0}
.ms-step{border:0;padding:0;margin:0;min-width:0}
.ms-nav{display:flex;gap:10px;justify-content:space-between;margin-top:6px}
.ms-nav .btn{flex:1}
.ms-nav [data-back]{flex:0 0 auto}
.chips-pick{display:flex;flex-wrap:wrap;gap:8px}
.chips-pick label{cursor:pointer}
.chips-pick input{position:absolute;opacity:0}
.chips-pick span{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:100px;border:1px solid var(--line);background:var(--panel);font-size:14px;font-weight:600;color:var(--ink-2);transition:.2s}
.chips-pick span .i{width:16px;height:16px;color:var(--accent)}
.chips-pick input:checked + span{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 8px 20px -10px rgba(124,58,237,.7)}
.chips-pick input:checked + span .i{color:#fff}
.chips-pick input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.field.shake input{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* success */
.done-wrap{position:relative}
.done-check{width:76px;height:76px;margin:0 auto;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#fff;
  box-shadow:0 18px 40px -14px rgba(124,58,237,.8);animation:popcheck .7s cubic-bezier(.2,.9,.25,1.4) both}
.done-check svg{width:38px;height:38px}
.done-check path{stroke-dasharray:30;stroke-dashoffset:30;animation:drawck .5s .45s ease forwards}
@keyframes popcheck{from{transform:scale(0) rotate(-30deg)}}
@keyframes drawck{to{stroke-dashoffset:0}}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:90}

@media (prefers-reduced-motion:reduce){
  .ms-step.enter-f,.ms-step.enter-b,.done-check,.done-check path,.field.shake input{animation:none}
  .done-check path{stroke-dashoffset:0}
}

.mega-inds a.all{color:var(--accent);justify-content:flex-start}

/* --- legal pages ---------------------------------------------------------- */
.legal{max-width:760px}
.legal-body{display:flex;flex-direction:column;gap:14px;color:var(--ink-2);font-size:16.5px;line-height:1.7}
.legal-body h2{font-size:clamp(20px,2.2vw,24px);color:var(--ink);margin-top:22px}
.legal-body ul{display:flex;flex-direction:column;gap:8px;padding-left:20px;list-style:disc}
.legal-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.legal-body b{color:var(--ink)}

/* Phones: a grid column must not grow to fit its widest child (the long
   industry list in the demo form's <select> pushed it to ~520px). */
.form-grid > *,.form-card,.ms-step,.field{min-width:0}
.field select,.field input,.field textarea{max-width:100%}
/* Decorative layers that poke past the edge never make the page scroll sideways (iOS ignores body overflow alone). */
html{overflow-x:clip}