:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
/* Layout: Zomato's partner flow (hero, keep-ready card, why, plans; then a sticky stepper rail beside stacked question cards), dressed in udooh.com's near-black and violet with its oversized top-left corner as the signature shape and the logo's LED pixels as the progress meter. */
:root{
  color-scheme: dark;
  --bg:#08070b;            /* udooh.com ground */
  --bg-2:#0c0b11;
  --surface:#111018;       /* cards */
  --surface-2:#0b0a10;     /* inset controls */
  --surface-3:#1b1925;     /* hover */
  --line:#24212d;
  --line-2:#34303f;
  --line-3:#4b4559;
  --fg:#f7f5fb;
  --fg-2:#c4bfd1;
  --fg-3:#918aa2;
  --violet:#a84aff;        /* end of the site's word gradient */
  --lav:#b478fa;           /* site hero button */
  --lav-hover:#c393fb;
  --lilac:#d8aaff;         /* start of the site's word gradient */
  --ink-on-lav:#1b0a33;
  --pink:#f61aa8;          /* logo ribbon */
  --cyan:#14d3e6;          /* logo LEDs */
  --ok:#41d69c;
  --ok-ink:#06140e;
  --warn:#ffbb55;
  --err:#ff6289;
  --white:#ffffff;
  --tint:rgba(168,74,255,.10);
  --tint-2:rgba(168,74,255,.18);
  --ring:rgba(168,74,255,.18);
  --ring-err:rgba(255,98,137,.18);
  --ok-tint:rgba(65,214,156,.12);
  --cyan-tint:rgba(20,211,230,.10);
  --glass:rgba(8,7,11,.80);
  --glass-strong:rgba(8,7,11,.94);
  --scrim:rgba(4,3,8,.74);
  --led-off:#1d1a27;
  --grad-cta:linear-gradient(100deg,#7936f4 0%,#8c22f3 52%,#a307f2 100%);
  --grad-word:linear-gradient(92deg,#dcb2ff 0%,#c17dff 48%,#a84aff 100%);
  --f-display:"Inter Tight","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r-sig:88px 14px 14px 14px;
  --r-sig-sm:44px 14px 14px 14px;
  --r-card:16px;
  --r-ctl:12px;
  --header-h:68px;
  --rail:316px;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 24px);scroll-padding-bottom:110px;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font:400 15px/1.55 var(--f-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:var(--lilac);text-underline-offset:3px}
p{margin:0}
:focus-visible{outline:2px solid var(--lilac);outline-offset:2px}
.sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important;opacity:0}
.i{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.i--sm{width:16px;height:16px}
.i--fill{fill:currentColor;stroke:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
code{font-family:var(--f-mono);font-size:.92em;color:var(--lilac)}
h1[tabindex="-1"]:focus{outline:none}
.art{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.art .a-panel{fill:url(#g-panel)}
.art .a-dim{stroke:var(--line-3)}
.art .a-soft{opacity:.55}
.art .a-cyan{stroke:var(--cyan)}
.art .a-pink{stroke:var(--pink)}
.art .a-fill{fill:currentColor;stroke:none}
.art .a-glass{fill:var(--cyan-tint)}
.art .a-wall{fill:var(--surface-3)}
.art .a-dot{stroke-width:3.4}
.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:720px){.wrap{padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px))}}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance;letter-spacing:-.02em;font-weight:700}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 12px/1.2 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2)}
.eyebrow::before{content:"";width:8px;height:8px;flex:none;background:var(--lav);border-radius:1px}
.h-hero{font-size:clamp(44px,6.3vw,84px);line-height:.98;letter-spacing:-.045em}
.h-xl{font-size:clamp(30px,3.4vw,42px);line-height:1.06;letter-spacing:-.035em}
@media (max-width:480px){.h-xl{font-size:27px}}
.h-lg{font-size:clamp(26px,2.8vw,36px);line-height:1.1;letter-spacing:-.03em}
.grad{background:var(--grad-word);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:clamp(16px,1.3vw,18px);line-height:1.6;color:var(--fg-2);max-width:60ch;text-wrap:pretty}
.muted{color:var(--fg-3)}
.nowrap{white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:var(--r-ctl);font:600 15px/1 var(--f-body);white-space:nowrap;text-decoration:none;transition:transform .15s ease,filter .15s ease,background-color .15s ease,border-color .15s ease,color .15s ease,opacity .15s ease}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--grad-cta);color:var(--white);box-shadow:0 10px 26px -12px rgba(140,34,243,.8),inset 0 1px 0 rgba(255,255,255,.18)}
.btn--primary:hover{filter:brightness(1.1)}
.btn--lav{background:var(--lav);color:var(--ink-on-lav);min-height:56px;padding:0 26px;font-size:16px}
.btn--lav:hover{background:var(--lav-hover)}
.btn--ghost{border:1px solid var(--line-2);color:var(--fg);background:transparent}
.btn--ghost:hover{border-color:var(--line-3);background:var(--surface-3)}
.btn--text{min-height:40px;padding:0 12px;color:var(--fg-2);border-radius:10px}
.btn--text:hover{color:var(--fg);background:var(--surface-3)}
.btn--sm{min-height:38px;padding:0 14px;font-size:14px;border-radius:10px}
.btn--block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed;filter:none;transform:none}
.btn.is-busy{pointer-events:none}
.btn.is-busy .btn__label::after{content:"";display:inline-block;width:14px;height:14px;margin-left:10px;vertical-align:-2px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
.textlink{display:inline-flex;align-items:center;gap:6px;color:var(--fg);font-weight:500;text-decoration:none;padding:4px 0 7px;border-bottom:1px solid var(--lav)}
.textlink:hover{color:var(--lilac)}
.linkbtn{display:inline-flex;align-items:center;gap:4px;color:var(--lilac);font-weight:600;font-size:14px;padding:2px 0}
.linkbtn:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- header ---------- */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--glass);-webkit-backdrop-filter:saturate(150%) blur(14px);backdrop-filter:saturate(150%) blur(14px);border-bottom:1px solid var(--line)}
.topbar__in{display:flex;align-items:center;gap:12px;min-height:var(--header-h)}
.brand{display:flex;align-items:center;gap:14px;color:var(--fg);text-decoration:none;margin-right:auto;min-width:0}
.brand__logo{height:32px;width:auto}
.brand__tag{font:600 11px/1.2 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);padding-left:14px;border-left:1px solid var(--line-2);white-space:nowrap}
.topbar__nav{display:flex;align-items:center;gap:6px}

/* demo menu */
.demo{position:relative}
.demo__btn{border:1px dashed var(--line-3)}
.demo__menu{position:absolute;right:0;top:calc(100% + 8px);width:240px;padding:8px;border-radius:14px;background:var(--surface);border:1px solid var(--line-2);box-shadow:0 24px 48px -16px rgba(0,0,0,.9);z-index:60;display:grid;gap:2px}
.demo__note{font-size:12px;color:var(--fg-3);padding:6px 10px 8px;border-bottom:1px solid var(--line);margin-bottom:4px}
.demo__menu button{display:flex;align-items:center;gap:10px;text-align:left;padding:10px;border-radius:10px;font-size:14px;color:var(--fg-2)}
.demo__menu button:hover,.demo__menu button:focus-visible{background:var(--surface-3);color:var(--fg)}

/* ---------- landing ---------- */
.hero{position:relative;padding-block:56px 132px;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;z-index:-1;right:-12%;top:-20%;width:70%;height:130%;background:radial-gradient(closest-side,rgba(168,74,255,.20),transparent 72%);pointer-events:none}
.hero::after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;height:60%;background-image:radial-gradient(rgba(216,170,255,.12) 1px,transparent 1.4px);background-size:14px 14px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 60%,transparent);mask-image:linear-gradient(180deg,transparent,#000 60%,transparent);pointer-events:none}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:56px;align-items:center}
.hero__copy{display:flex;flex-direction:column;align-items:flex-start;gap:24px;min-width:0}
.hero__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:6px}
.hero__facts{display:flex;flex-wrap:wrap;gap:10px 22px;list-style:none;margin:2px 0 0;padding:0;color:var(--fg-2);font-size:14px}
.hero__facts li{display:flex;align-items:center;gap:8px}
.hero__facts .i{color:var(--ok);width:18px;height:18px}
.hero__status{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--fg-2);padding:10px 14px;border-radius:12px;background:var(--tint);border:1px solid rgba(168,74,255,.3)}
.photo{position:relative;margin:0;border-radius:var(--r-sig);overflow:hidden;aspect-ratio:503/446;width:100%;max-width:100%;background:var(--surface);box-shadow:0 50px 90px -50px rgba(168,74,255,.55)}
.photo img{width:100%;height:100%;object-fit:cover}
/* Hero carousel: outlet scenes cross-fade under one caption. On computers the frame takes the hero copy's
   height (top of the eyebrow to the bottom of the facts row); on phones it keeps its own shape. */
.reel{isolation:isolate;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.reel__slides{position:absolute;inset:0;z-index:0}
.reel__slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .9s ease}
.reel__slide.is-on{opacity:1}
.reel .photo__cap{z-index:2;padding-bottom:60px}
.reel__tag{position:absolute;z-index:3;top:16px;right:16px;display:inline-flex;align-items:center;gap:7px;padding:7px 12px 7px 10px;border-radius:999px;background:rgba(8,7,11,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);font:600 12.5px/1 var(--f-body);color:var(--fg)}
.reel__tag .i{color:var(--lilac)}
.reel__ctrl{position:absolute;z-index:3;right:16px;bottom:14px;display:flex;align-items:center;gap:2px}
.reel__dot{display:grid;place-items:center;width:22px;height:32px;border-radius:8px}
.reel__dot i{position:relative;display:block;width:8px;height:8px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden;transition:width .3s ease,background-color .3s ease}
.reel__dot:hover i{background:rgba(255,255,255,.55)}
.reel__dot.is-on{width:38px}
.reel__dot.is-on i{width:28px;background:rgba(255,255,255,.2)}
.reel__dot.is-on i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--cyan),var(--violet));transform-origin:0 50%;animation:reelfill var(--reel-dur,5s) linear both}
.reel.is-halted .reel__dot.is-on i::after{animation-play-state:paused}
.reel.is-stopped .reel__dot.is-on i::after{animation:none;transform:none}
.reel__pause{display:grid;place-items:center;width:32px;height:32px;margin-left:4px;border-radius:10px;color:var(--fg-2);background:rgba(8,7,11,.5);border:1px solid rgba(255,255,255,.12)}
.reel__pause:hover{color:var(--fg);background:rgba(8,7,11,.75)}
.reel__pause .i{width:14px;height:14px;stroke-width:2.2}
.reel__pause .i--fill{stroke:none}
@keyframes reelfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (min-width:960px){
  .hero__grid{align-items:stretch}
  .hero .photo{aspect-ratio:auto;height:auto;min-height:420px}
}
.photo__cap{position:absolute;left:0;right:0;bottom:0;padding:72px 28px 22px;background:linear-gradient(180deg,rgba(8,7,11,0),rgba(8,7,11,.9) 64%);display:flex;flex-direction:column;gap:8px}
.photo__eyebrow{font:600 11px/1.2 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2)}
.photo__line{font:600 clamp(20px,2.1vw,27px)/1.15 var(--f-display);letter-spacing:-.02em;color:var(--fg)}
.photo__note{font-size:12px;color:var(--fg-3)}

.ready{position:relative;z-index:2;margin-top:-84px}
.ready__card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);background:var(--surface);border:1px solid var(--line-2);border-radius:20px;overflow:hidden;box-shadow:0 40px 70px -40px rgba(0,0,0,.95)}
.ready__col{padding:32px;display:flex;flex-direction:column;gap:8px;min-width:0}
.ready__col + .ready__col{border-left:1px solid var(--line);background:var(--bg-2)}
.ready__col h2{font-size:24px;letter-spacing:-.025em;line-height:1.2}
.checklist{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:16px}
.checklist li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start}
.checklist .tick{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--ok-tint);color:var(--ok)}
.checklist .tick .i{width:16px;height:16px;stroke-width:2.4}
.checklist b{display:block;font-weight:600;color:var(--fg);line-height:1.35}
.checklist span{display:block;color:var(--fg-3);font-size:14px;margin-top:2px}
.how{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:18px;counter-reset:how}
.how li{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;align-items:start}
.how li::before{counter-increment:how;content:counter(how);width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:700 14px/1 var(--f-display);color:var(--lilac);border:1px solid rgba(168,74,255,.5);background:var(--tint)}
.how li:not(:last-child)::after{content:"";position:absolute;left:15.5px;top:38px;bottom:-14px;width:1px;background:var(--line-2)}
.how b{display:block;font-weight:600;line-height:1.35;padding-top:5px}
.how span{display:block;color:var(--fg-3);font-size:14px;margin-top:2px}

.section{padding-block:104px 0}
.section__head{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:36px;max-width:760px}
.why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.why__card{display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid var(--line);border-radius:var(--r-card);background:linear-gradient(180deg,var(--surface),var(--bg))}
.why__icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--tint);color:var(--lilac)}
.why__card h3{font-size:18px;font-weight:600;letter-spacing:-.015em;line-height:1.3}
@media (max-width:1240px){.why{grid-template-columns:repeat(2,minmax(0,1fr))}}
.why__card p{color:var(--fg-3);font-size:14.5px}

.section--tight{padding-top:24px}
.hero__sub{max-width:34em}
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.plan-card{display:flex;flex-direction:column;gap:16px;padding:30px;border:1px solid var(--line-2);border-radius:20px;background:var(--surface)}
.plan-card--plus{border-color:rgba(168,74,255,.55);border-radius:var(--r-sig-sm);background:radial-gradient(120% 120% at 0% 0%,rgba(168,74,255,.2),rgba(168,74,255,0) 60%),var(--surface)}
.plan-card__top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.plan-card h3{font-size:26px;letter-spacing:-.03em}
@media (max-width:560px){.plan-card h3{font-size:21px}}
.plan-card p{color:var(--fg-2)}
.plan-card ul{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:12px}
.plan-card li{display:flex;gap:10px;align-items:flex-start;color:var(--fg-2);font-size:14.5px}
.plan-card li .i{color:var(--ok);width:18px;height:18px;margin-top:2px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border-radius:999px;font:600 12px/1.2 var(--f-body);letter-spacing:.02em;background:var(--tint-2);color:var(--lilac);white-space:nowrap}
.badge--inline{margin-left:8px;vertical-align:1px;font-size:11px;padding:2px 8px}
.badge--muted{background:var(--surface-3);color:var(--fg-2)}
.badge--ok{background:var(--ok-tint);color:var(--ok)}
.pix{display:inline-grid;grid-template-columns:repeat(3,4px);gap:2px}
.pix i{width:4px;height:4px;border-radius:1px;background:var(--cyan)}
.pix i:nth-child(2n){background:var(--pink)}
.pix i:nth-child(3n){background:var(--violet)}

.cats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.cat{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:16px;border:1px solid var(--line);border-radius:14px;color:var(--fg);font-weight:500;font-size:14.5px;line-height:1.3;background:var(--surface)}
.cat__ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--tint);color:var(--lilac)}

.faq{display:grid;gap:10px;max-width:860px}
.faq details{border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;font-weight:600;font-size:16px;border-radius:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .i{color:var(--fg-3);transition:transform .2s ease}
.faq details[open] summary .i{transform:rotate(180deg)}
.faq details p{padding:0 20px 18px;color:var(--fg-2);max-width:68ch}

.cta-band{margin-top:104px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:radial-gradient(60% 140% at 100% 50%,rgba(168,74,255,.16),rgba(168,74,255,0) 70%),var(--bg-2)}
.cta-band__in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-block:48px}
.footer{padding-block:32px 40px;color:var(--fg-3);font-size:13.5px}
.footer__in{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer .brand__logo{height:26px}

/* ---------- wizard layout ---------- */
.wiz{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:32px;padding-block:32px 150px;align-items:start}
.side{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--header-h) + 24px);display:flex;flex-direction:column;gap:12px;min-width:0}
.side-card{border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);overflow:hidden}
.side-head{display:grid;gap:12px;padding:18px 18px 16px;border-bottom:1px solid var(--line)}
.side-title{font:600 16px/1.2 var(--f-display);letter-spacing:-.01em}
.side-meta{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--fg-3);font-variant-numeric:tabular-nums}
.led{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:3px}
.led span{aspect-ratio:1;border-radius:1.5px;background:var(--led-off);transition:background-color .4s ease,box-shadow .4s ease}
.led span.on{background:var(--c);box-shadow:0 0 7px -1px var(--c)}
.side-link{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);text-align:left;font-weight:600;font-size:14.5px;color:var(--fg)}
.side-link:hover{border-color:var(--line-3)}
.side-link .i:first-child{color:var(--lilac)}
.side-link .i:last-child{margin-left:auto;color:var(--fg-3)}
.side-link__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.side-link__cta{font-size:13px;font-weight:600;color:var(--lilac)}
.followup{padding:16px 18px;border-radius:14px;border:1px solid rgba(20,211,230,.28);background:var(--cyan-tint)}
.followup .q__label .req{color:var(--err)}
.side-info{display:grid;gap:10px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);font-size:13.5px}
.side-info__row{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--fg-3)}
.side-info__row b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums}

.stepper{list-style:none;margin:0;padding:8px}
.st{position:relative}
.st:not(:last-child)::after{content:"";position:absolute;left:31px;top:58px;bottom:-6px;width:2px;border-radius:2px;background:var(--line-2)}
.st.is-done:not(:last-child)::after{background:var(--ok)}
.st__btn{width:100%;display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:start;padding:10px;border-radius:12px;text-align:left;transition:background-color .15s ease}
.st__btn:hover:not([disabled]){background:var(--surface-3)}
.st.is-current .st__btn{background:var(--tint)}
.st__btn[disabled]{cursor:default}
.st__icon{position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line-2);background:var(--surface-2);color:var(--fg-3);transition:border-color .2s ease,box-shadow .2s ease,color .2s ease}
.st.is-current .st__icon{border-color:var(--violet);color:var(--lilac);box-shadow:0 0 0 4px var(--ring)}
.st.is-done .st__icon{border-color:var(--ok);color:var(--fg-2)}
.st__check{position:absolute;right:-4px;bottom:-4px;width:20px;height:20px;border-radius:50%;background:var(--ok);color:var(--ok-ink);display:none;place-items:center;border:2px solid var(--surface)}
.st__check .i{width:11px;height:11px;stroke-width:3.4}
.st.is-done .st__check{display:grid}
.st__text{display:flex;flex-direction:column;gap:2px;min-width:0;padding-top:2px}
.st__title{font-weight:600;font-size:15px;line-height:1.3;color:var(--fg-2)}
.st.is-current .st__title,.st.is-done .st__title{color:var(--fg)}
.st__sub{font-size:13px;line-height:1.35;color:var(--fg-3)}
.st__cta{display:inline-flex;align-items:center;gap:2px;margin-top:3px;font-size:13px;font-weight:600;color:var(--lilac)}
.st__cta .i{width:14px;height:14px}
.st.is-locked .st__cta,.st.is-locked .st__sub{display:none}
.st.is-locked .st__title{color:var(--fg-3)}

.mprog{display:none}

/* ---------- step content ---------- */
.main{min-width:0}
.step{display:flex;flex-direction:column;gap:18px;animation:rise .3s ease both}
.step__head{display:flex;flex-direction:column;gap:10px;margin-bottom:6px}
.step__count{font:600 12px/1.2 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--lilac)}
.step__head .lead{font-size:16px}
.card{border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);min-width:0}
.card__head{display:flex;flex-direction:column;gap:6px;padding:22px 24px 18px;border-bottom:1px solid var(--line)}
.card__head--row{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:12px}
.card__title{font:600 19px/1.3 var(--f-display);letter-spacing:-.015em}
.card__title .req{color:var(--err)}
.card__sub{color:var(--fg-3);font-size:14px;max-width:72ch}
.card__body{display:grid;gap:16px;padding:20px 24px 24px;min-width:0}
.card__body > *{min-width:0}
.subhead{display:flex;flex-direction:column;gap:4px}
.subhead b{font-weight:600;font-size:15.5px}
.subhead span{font-size:13.5px;color:var(--fg-3)}
.divider{height:1px;background:var(--line);margin:4px 0}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.span-2{grid-column:1/-1}
.note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--cyan-tint);color:#9beef6;font-size:13.5px;line-height:1.45}
.note .i{width:18px;height:18px;margin-top:1px}
.note--violet{background:var(--tint);color:var(--lilac)}
.note--plain{background:var(--surface-3);color:var(--fg-2)}

/* fields */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.control{position:relative;display:flex;align-items:stretch;min-height:56px;border:1px solid var(--line-2);border-radius:var(--r-ctl);background:var(--surface-2);transition:border-color .15s ease,box-shadow .15s ease}
.control:hover{border-color:var(--line-3)}
.control:focus-within{border-color:var(--violet);box-shadow:0 0 0 4px var(--ring)}
.control__in{position:relative;flex:1;min-width:0;display:flex}
.control input,.control select,.control textarea{flex:1;width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--fg);padding:25px 14px 8px;font-size:15.5px;line-height:1.35;border-radius:var(--r-ctl)}
.control textarea{min-height:112px;resize:vertical;padding-top:29px}
.control select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:42px}
.control select option{background:var(--surface);color:var(--fg)}
.control input[readonly]{color:var(--fg-2);cursor:default}
.control input[disabled],.control select[disabled]{opacity:.45;cursor:not-allowed}
.control label{position:absolute;left:15px;top:17px;max-width:calc(100% - 30px);font-size:15.5px;line-height:1.35;color:var(--fg-3);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:top .15s ease,font-size .15s ease,color .15s ease}
.control.is-filled label,.control:focus-within label{top:8px;font-size:12px}
.control:focus-within label{color:var(--lilac)}
.control label .req{color:var(--err);margin-left:1px}
.control input::placeholder,.control textarea::placeholder{color:transparent}
.control:focus-within input::placeholder,.control:focus-within textarea::placeholder{color:var(--fg-3)}
.control__pre{display:flex;align-items:center;gap:8px;padding:0 12px 0 14px;margin:10px 0;border-right:1px solid var(--line-2);color:var(--fg-2);font-weight:500;white-space:nowrap}
.control__suf{display:flex;align-items:center;gap:8px;padding:0 14px 0 4px;color:var(--fg-3);font-size:14px;white-space:nowrap}
.control__chev{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--fg-3)}
.verified{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--ok)}
.verified .i{width:15px;height:15px;stroke-width:2.4}
.hint{font-size:13px;line-height:1.45;color:var(--fg-3)}
.hint--ok{color:var(--ok)}
.hint--warn{color:var(--warn)}
.err{display:flex;align-items:flex-start;gap:6px;font-size:13px;line-height:1.4;color:var(--err)}
.err::before{content:"!";flex:none;width:16px;height:16px;margin-top:1px;border-radius:50%;background:var(--err);color:var(--bg);font:800 11px/16px var(--f-body);text-align:center}
.field.invalid .control{border-color:var(--err)}
.field.invalid .control:focus-within{box-shadow:0 0 0 4px var(--ring-err)}
.field.invalid .chip__ui,.field.invalid .opt__ui,.field.invalid .pill > span,.field.invalid .tile__ui,.field.invalid .seg,.field.invalid .check{border-color:rgba(255,98,137,.65)}
.otherbox{margin-top:4px}

/* single checkbox row */
.check{position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid var(--line-2);border-radius:var(--r-ctl);background:var(--surface-2);cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
.check:hover{border-color:var(--line-3)}
.check__box{flex:none;width:22px;height:22px;margin-top:1px;border-radius:6px;border:1.5px solid var(--line-3);display:grid;place-items:center;transition:background-color .15s ease,border-color .15s ease}
.check__box .i{width:14px;height:14px;stroke-width:3.2;color:var(--white);opacity:0}
.check input:checked + .check__box{background:var(--violet);border-color:var(--violet)}
.check input:checked + .check__box .i{opacity:1}
.check input:focus-visible + .check__box{outline:2px solid var(--lilac);outline-offset:2px}
.check:has(input:checked){border-color:rgba(168,74,255,.55);background:var(--tint)}
.check__text{font-size:14.5px;line-height:1.45;color:var(--fg)}
.check--bare{padding:0;border:0;background:transparent}
.check--bare:has(input:checked){background:transparent}
.checks{display:grid;gap:10px}

/* chips (multi) */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative;display:inline-flex}
.chip__ui{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 12px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface-2);color:var(--fg-2);font-weight:500;font-size:14.5px;cursor:pointer;user-select:none;transition:border-color .15s ease,background-color .15s ease,color .15s ease}
.chip__ui:hover{border-color:var(--line-3);color:var(--fg)}
.chip__box{flex:none;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line-3);display:grid;place-items:center;transition:background-color .15s ease,border-color .15s ease}
.chip__box .i{width:13px;height:13px;stroke-width:3.2;color:var(--white);opacity:0}
.chip input:checked + .chip__ui{border-color:var(--violet);background:var(--tint);color:var(--fg)}
.chip input:checked + .chip__ui .chip__box{background:var(--violet);border-color:var(--violet)}
.chip input:checked + .chip__ui .chip__box .i{opacity:1}
.chip input:focus-visible + .chip__ui{outline:2px solid var(--lilac);outline-offset:2px}

/* pills (single) */
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills--4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.pills--4 .pill > span{width:100%;justify-content:center;padding:0 10px;white-space:nowrap}
@media (max-width:560px){.pills--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pill{position:relative;display:inline-flex}
.pill > span{display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:0 16px 0 13px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface-2);color:var(--fg-2);font-weight:500;font-size:14.5px;cursor:pointer;user-select:none;transition:border-color .15s ease,background-color .15s ease,color .15s ease}
.pill > span::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line-3);box-sizing:border-box;transition:border .15s ease,background-color .15s ease}
.pill > span:hover{border-color:var(--line-3);color:var(--fg)}
.pill input:checked + span{border-color:var(--violet);background:var(--tint);color:var(--fg)}
.pill input:checked + span::before{border:5px solid var(--violet);background:var(--white)}
.pill input:focus-visible + span{outline:2px solid var(--lilac);outline-offset:2px}
.q{display:grid;gap:10px}
.q + .q{padding-top:18px;border-top:1px solid var(--line)}
.q__label{font-weight:600;font-size:15.5px}
.q__hint{font-size:13.5px;color:var(--fg-3);margin-top:-6px}

/* option cards */
.opts{display:grid;gap:12px}
.opts--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.opts--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.opt{position:relative;display:flex;min-width:0}
.opt__ui{flex:1;display:flex;align-items:center;gap:14px;min-width:0;min-height:76px;padding:14px 16px;border:1px solid var(--line-2);border-radius:14px;background:var(--surface-2);cursor:pointer;user-select:none;transition:border-color .15s ease,background-color .15s ease}
.opt__ui:hover{border-color:var(--line-3)}
.opt__mark{flex:none;width:22px;height:22px;border:1.5px solid var(--line-3);display:grid;place-items:center;box-sizing:border-box;transition:border .15s ease,background-color .15s ease}
.opt--radio .opt__mark{border-radius:50%}
.opt--check .opt__mark{border-radius:6px}
.opt__mark .i{width:14px;height:14px;stroke-width:3.2;color:var(--white);opacity:0}
.opt__text{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.opt__title{font-weight:600;font-size:15.5px;line-height:1.3;color:var(--fg)}
.opt__desc{font-size:13.5px;line-height:1.4;color:var(--fg-3)}
.opt__art{flex:none;align-self:stretch;width:104px;margin:-6px -8px -6px 0;border-radius:10px;display:grid;place-items:center;color:var(--lilac);background:linear-gradient(135deg,rgba(168,74,255,.16),rgba(246,26,168,.05))}
.opt__art svg{width:84px;height:63px}
.opt input:checked + .opt__ui{border-color:var(--violet);background:var(--tint)}
.opt--radio input:checked + .opt__ui .opt__mark{border:6px solid var(--violet);background:var(--white)}
.opt--check input:checked + .opt__ui .opt__mark{background:var(--violet);border-color:var(--violet)}
.opt--check input:checked + .opt__ui .opt__mark .i{opacity:1}
.opt input:focus-visible + .opt__ui{outline:2px solid var(--lilac);outline-offset:2px}
.opt--stack .opt__ui{flex-direction:column;align-items:stretch;gap:12px;padding:12px}
.opt--stack .opt__art{width:auto;height:104px;margin:0}
.opt--stack .opt__art svg{width:128px;height:96px}
.opt--stack .opt__row{display:flex;gap:12px;align-items:flex-start;padding:0 4px 4px}
.opt--stack .opt__mark{margin-top:1px}
.opt--yn .opt__ui{min-height:64px}
.tag{display:inline-flex;align-items:center;gap:5px;width:max-content;margin-top:2px;padding:3px 8px;border-radius:999px;font-size:11.5px;font-weight:600;letter-spacing:.02em;background:var(--cyan-tint);color:#86eaf3}
.tag .i{width:12px;height:12px;stroke-width:2.2}

/* tiles (category) */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.tile{position:relative;display:flex;min-width:0}
.tile__ui{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-height:100px;padding:14px;border:1px solid var(--line-2);border-radius:14px;background:var(--surface-2);cursor:pointer;user-select:none;transition:border-color .15s ease,background-color .15s ease}
.tile__ui:hover{border-color:var(--line-3)}
.tile__icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--tint);color:var(--lilac);transition:background-color .15s ease,color .15s ease}
.tile__label{font-weight:600;font-size:14.5px;line-height:1.3}
.tile input:checked + .tile__ui{border-color:var(--violet);background:var(--tint)}
.tile input:checked + .tile__ui .tile__icon{background:var(--violet);color:var(--white)}
.tile input:focus-visible + .tile__ui{outline:2px solid var(--lilac);outline-offset:2px}

/* power rows */
.prows{display:grid;gap:10px}
.prow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 10px 10px 16px;border:1px solid var(--line-2);border-radius:14px;background:var(--surface-2)}
.prow__label{display:flex;align-items:center;gap:12px;font-weight:600;font-size:15px;min-width:0}
.prow__label .i{color:var(--lilac)}
.seg{display:inline-flex;padding:4px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.seg label{position:relative;display:flex}
.seg span{display:inline-flex;align-items:center;justify-content:center;min-width:84px;min-height:38px;padding:0 12px;border-radius:9px;font-size:14px;font-weight:500;color:var(--fg-2);cursor:pointer;user-select:none;white-space:nowrap;transition:background-color .15s ease,color .15s ease}
.seg span:hover{color:var(--fg)}
.seg input:checked + span{background:var(--violet);color:var(--white)}
.seg input:focus-visible + span{outline:2px solid var(--lilac);outline-offset:1px}

/* maps helper */
.howto{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none;counter-reset:ht}
.howto li{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:12px;background:var(--surface-3);font-size:13.5px;color:var(--fg-2);line-height:1.4}
.howto li::before{counter-increment:ht;content:counter(ht);flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 12px/1 var(--f-display);background:var(--tint-2);color:var(--lilac)}
.mappreview{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid rgba(65,214,156,.35);background:var(--ok-tint)}
.mappreview__pin{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--ok);color:var(--ok-ink)}
.mappreview__text{display:flex;flex-direction:column;min-width:0;flex:1}
.mappreview__text b{font-weight:600;font-size:14.5px}
.mappreview__text span{font-size:12.5px;color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* hours */
.days{display:flex;flex-wrap:wrap;gap:8px}

/* plan bar (records step) */
.planbar{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border-radius:var(--r-sig-sm);border:1px solid rgba(168,74,255,.55);background:radial-gradient(140% 160% at 0% 0%,rgba(168,74,255,.22),rgba(168,74,255,0) 60%),var(--surface);animation:rise .3s ease both}
.planbar--ready{border-color:var(--line-2);background:var(--surface);border-radius:var(--r-card)}
.planbar__icon{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--tint-2);color:var(--lilac);margin-top:2px}
.planbar--ready .planbar__icon{background:var(--surface-3);color:var(--fg-2)}
.planbar__text{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.planbar__text h2{font-size:22px;letter-spacing:-.025em}
.planbar__text p{color:var(--fg-2);font-size:14.5px}

/* photos */
.shots{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;counter-reset:shot}
.shot{display:grid;grid-template-columns:44px minmax(0,1fr);align-content:start;gap:12px;padding:14px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line)}
/* Shopfront and counter stack on the left; "each space" spans both rows on the right, so it always matches their combined height. */
.shots > .shot{grid-column:1}
.shots > .shot--tall{grid-column:2;grid-row:1 / span 2}
.shot__ic{position:relative;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--tint);color:var(--lilac)}
.shot__ic::after{counter-increment:shot;content:counter(shot);position:absolute;top:-6px;left:-6px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:700 11px/1 var(--f-display);background:var(--violet);color:var(--white);border:2px solid var(--surface)}
.shot b{display:block;font-weight:600;font-size:14.5px;line-height:1.35}
.shot span{display:block;font-size:13px;color:var(--fg-3);margin-top:2px;line-height:1.4}
.shot .shot__spots{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:10px}
.shot .minichip{display:inline-flex;align-items:center;gap:6px;max-width:100%;margin:0;padding:4px 10px 4px 8px;border-radius:999px;font-size:12.5px;font-weight:500;line-height:1.3;background:var(--surface-3);color:var(--fg)}
.shot .minichip .i{width:13px;height:13px;stroke-width:2.6;color:var(--ok)}
.drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:34px 20px;text-align:center;border:1.5px dashed rgba(168,74,255,.55);border-radius:16px;background:rgba(168,74,255,.05);cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.drop:hover,.drop.is-over{background:rgba(168,74,255,.1);border-color:var(--violet)}
.drop:focus-within{outline:2px solid var(--lilac);outline-offset:2px}
.drop.is-full{opacity:.55;cursor:not-allowed}
.drop__icon{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;background:var(--tint-2);color:var(--lilac)}
.drop__icon .i{width:26px;height:26px}
.drop__title{font-weight:600;font-size:16px;color:var(--lilac)}
.drop__sub{font-size:13px;color:var(--fg-3)}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.thumb{position:relative;margin:0;aspect-ratio:1;max-width:100%;border-radius:12px;overflow:hidden;border:1px solid var(--line-2);background:var(--surface-3)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb__ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--fg-3)}
.thumb__x{position:absolute;top:6px;right:6px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(8,7,11,.78);color:var(--white)}
.thumb__x:hover{background:var(--err)}
.thumb__x .i{width:15px;height:15px;stroke-width:2.4}
.thumb__name{position:absolute;left:0;right:0;bottom:0;padding:18px 8px 6px;font-size:11.5px;color:var(--white);background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.72));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.photo-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--fg-3)}

/* review + plan */
.plan{position:relative;display:grid;gap:18px;padding:30px;border-radius:var(--r-sig-sm);border:1px solid rgba(168,74,255,.55);background:radial-gradient(120% 140% at 0% 0%,rgba(168,74,255,.22),rgba(168,74,255,0) 58%),var(--surface)}
.plan--ready{border-color:var(--line-2);background:var(--surface)}
.plan__top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.plan__name{font-size:clamp(28px,3vw,36px);letter-spacing:-.035em;line-height:1.05}
.plan__line{color:var(--fg-2);margin-top:6px}
.plan__rows{display:grid;margin:0;border-top:1px solid var(--line)}
.plan__rows div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.plan__rows dt{color:var(--fg-2)}
.plan__rows dd{margin:0;font-weight:600;text-align:right}
.plan__notes{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.plan__notes li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--fg-2)}
.plan__notes .i{color:var(--lilac);width:18px;height:18px;margin-top:1px}
.sum{display:grid}
.sum__block{padding:18px 0;border-top:1px solid var(--line)}
.sum__block:first-child{padding-top:2px;border-top:0}
.sum__block:last-child{padding-bottom:0}
.sum__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.sum__title{font:600 16px/1.3 var(--f-display);letter-spacing:-.01em}
.sum__list{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);gap:9px 18px;margin:0}
.sum__list dt{color:var(--fg-3);font-size:14px}
.sum__list dd{margin:0;font-size:14.5px;color:var(--fg);overflow-wrap:anywhere}
.sum__list dd a{word-break:break-all}
.sum__thumbs{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.sum__thumbs img{width:44px;height:44px;border-radius:8px;object-fit:cover;border:1px solid var(--line-2)}

/* done */
.done{display:flex;flex-direction:column;gap:18px;animation:rise .35s ease both}
.done__hero{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:34px;border-radius:var(--r-sig);border:1px solid rgba(65,214,156,.35);background:radial-gradient(90% 120% at 0% 0%,rgba(65,214,156,.14),rgba(65,214,156,0) 60%),radial-gradient(80% 120% at 100% 100%,rgba(168,74,255,.16),rgba(168,74,255,0) 60%),var(--surface)}
.done__badge{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--ok);color:var(--ok-ink);box-shadow:0 0 0 8px var(--ok-tint)}
.done__badge .i{width:30px;height:30px;stroke-width:2.6}
.idchip{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px 12px;max-width:100%;padding:6px 6px 6px 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface-2);font-size:14px;color:var(--fg-3)}
.idchip__label{white-space:nowrap}
.idchip b{color:var(--fg);font:600 16px/1 var(--f-display);letter-spacing:.04em;font-variant-numeric:tabular-nums;white-space:nowrap}
.done__actions{display:flex;flex-wrap:wrap;gap:10px}
.payload summary{cursor:pointer;padding:18px 24px;font-weight:600;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
.payload summary::-webkit-details-marker{display:none}
.payload summary .i{color:var(--fg-3);transition:transform .2s ease}
.payload[open] summary .i{transform:rotate(180deg)}
.payload__body{padding:0 24px 24px;display:grid;gap:10px}
.payload pre{margin:0;max-height:380px;overflow:auto;padding:16px;border-radius:12px;background:var(--bg);border:1px solid var(--line);font:12.5px/1.55 var(--f-mono);color:var(--fg-2);white-space:pre}

/* action bar */
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:45;padding-bottom:env(safe-area-inset-bottom,0px);background:var(--glass);-webkit-backdrop-filter:saturate(150%) blur(14px);backdrop-filter:saturate(150%) blur(14px);border-top:1px solid var(--line)}
.actionbar__in{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:32px;padding-block:12px}
.actionbar__main{display:flex;align-items:center;gap:12px;min-width:0}
.saved{margin-right:auto;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--fg-3);min-width:0}
.saved .i{width:16px;height:16px;color:var(--ok)}
.saved span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* modals */
.modal{position:fixed;inset:0;z-index:100;display:flex;padding:24px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px));overflow-y:auto;background:var(--scrim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fade .18s ease}
.dialog{position:relative;margin:auto;width:min(460px,100%);padding:28px;border-radius:22px;border:1px solid var(--line-2);background:var(--surface);box-shadow:0 50px 90px -30px rgba(0,0,0,.95);animation:pop .24s cubic-bezier(.2,.8,.2,1)}
.dialog__x{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--fg-3)}
.dialog__x:hover{background:var(--surface-3);color:var(--fg)}
.dialog__back{display:inline-flex;align-items:center;gap:6px;margin:-6px 0 12px -6px;padding:6px;border-radius:10px;color:var(--fg-2);font-size:14px;font-weight:500}
.dialog__back:hover{background:var(--surface-3);color:var(--fg)}
.dialog__title{margin:0 44px 8px 0;font:700 26px/1.15 var(--f-display);letter-spacing:-.025em}
.dialog__sub{margin-bottom:22px;color:var(--fg-3)}
.dialog__body{display:grid;gap:14px}

.invdemo{margin:-6px 0 16px}
#invStore:not([hidden]),#invBrand:not([hidden]){display:grid;gap:14px}
.invswitch{margin:-14px 0 18px}
#calcStoreBlock:not([hidden]){display:grid;gap:14px}
.dialog__foot{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:var(--fg-3)}
.flag{width:22px;height:15px;border-radius:2px}
.otp{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.otp input{width:100%;min-width:0;height:58px;padding:0;text-align:center;font:600 22px/1 var(--f-display);border-radius:12px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--fg);outline:0;font-variant-numeric:tabular-nums;transition:border-color .15s ease,box-shadow .15s ease}
.otp input:focus{border-color:var(--violet);box-shadow:0 0 0 4px var(--ring)}
.otp.invalid input{border-color:var(--err)}
.otp-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--fg-3)}
.captcha{margin-top:16px}
.captcha:empty{margin-top:0}
.demo-hint{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;border:1px dashed var(--line-3);font-size:13px;color:var(--fg-2)}
.demo-hint .i{width:16px;height:16px;color:var(--lilac)}
.sheet{position:fixed;inset:0;z-index:100;display:flex;justify-content:flex-end;background:var(--scrim);animation:fade .18s ease}
.sheet__panel{position:relative;width:min(460px,100%);height:100%;overflow-y:auto;background:var(--surface);border-left:1px solid var(--line-2);padding:calc(24px + env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) 24px;animation:slide .26s cubic-bezier(.2,.8,.2,1)}
.sheet .faq details{background:var(--surface-2)}

/* ---------- income calculator ---------- */
.dialog--wide{width:min(640px,100%)}
@media (min-width:641px){#m-calc .dialog{transition:width .22s cubic-bezier(.2,.8,.2,1)}}
.calc__opts .opt--stack .opt__art{height:92px}
.calc__opts .opt--stack .opt__art svg{width:112px;height:84px}
.calc__opts .opt__desc{font-size:13px}
.dialog .eyebrow{margin-bottom:10px}
.dialog .dialog__back + .eyebrow{display:flex;margin-top:2px}
.calc__grid{gap:14px 14px}
.calc__hero{display:grid;gap:4px;margin-top:4px;padding:22px 24px 20px;border-radius:var(--r-sig-sm);border:1px solid rgba(168,74,255,.55);background:radial-gradient(130% 150% at 0% 0%,rgba(168,74,255,.24),rgba(168,74,255,0) 60%),var(--surface-2)}
.calc__lead{font:600 12px/1.2 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--lilac)}
.calc__big{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;margin-top:4px}
.calc__amt{font:800 clamp(36px,8vw,52px)/1 var(--f-display);letter-spacing:-.04em;background:var(--grad-word);-webkit-background-clip:text;background-clip:text;color:transparent}
.calc__per{font:600 18px/1.2 var(--f-display);color:var(--fg-2)}
.calc__month{font-size:14.5px;color:var(--fg-2)}
.calc__month b{color:var(--fg);font-weight:600}
.calc__for{margin-top:6px;font-size:13px;color:var(--fg-3)}
.calc__note{margin-top:14px;font-size:14px;line-height:1.5;color:var(--fg-2)}
.calc__more{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.calc__more li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.45;color:var(--fg-2)}
.calc__more b{color:var(--fg);font-weight:600}
.calc__ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--tint);color:var(--lilac)}
.calc__ic .i{width:18px;height:18px}
.calc__cta{margin-top:20px;display:grid;gap:8px}
.calc__ctasub{text-align:center;font-size:13px;color:var(--fg-3)}
.calc__edit{margin:14px auto 0;display:flex}
.calc__steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.calc__steps li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.45;color:var(--fg-2)}
.calc__steps b{color:var(--fg);font-weight:600}
.calc__stepn{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 13px/1 var(--f-display);color:var(--lilac);border:1px solid rgba(168,74,255,.5);background:var(--tint)}
.calc__wa{background:linear-gradient(100deg,#1f9d55 0%,#25d366 100%);color:#06140e;box-shadow:0 10px 26px -12px rgba(37,211,102,.7)}
.calc__wa:hover{filter:brightness(1.06)}
.calc__wa .i{stroke-width:2}
.calc__wanote{font-size:13px;color:var(--fg-3);text-align:center;margin-top:-4px}
.calc__wanote b{color:var(--fg-2);font-weight:600}
.calc__status{min-height:1.4em;text-align:center}
/* The send block: on computers a QR code of the same wa.me link sits above the button, so someone
   without WhatsApp Web signed in can scan it and send from their phone. Touch devices get the button only. */
.wa-send{display:flex;flex-direction:column;gap:10px}
.wa-send__qr{display:none;flex-direction:column;align-items:center;gap:8px;padding-bottom:4px}
.qr{width:168px;height:168px;padding:10px;border-radius:14px;background:#fff;box-shadow:0 12px 30px -16px rgba(0,0,0,.85)}
.qr svg{display:block;width:100%;height:100%}
@media (min-width:640px) and (pointer:fine){
  .wa-send__qr:not([hidden]){display:flex}
}
}
}
.calc__status.is-sent{color:var(--ok)}
.calc__status .i{display:inline-block;vertical-align:-3px;margin-right:4px}
.calc__codein{font:600 22px/1 var(--f-display)!important;letter-spacing:.18em}
.otp-wa{display:grid;gap:10px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.otp-codelabel{font-size:14.5px;margin-bottom:-4px}
.otp-meta{flex-wrap:wrap}
.textlink .i{color:var(--lilac)}
@media (max-width:640px){
  .calc__grid{grid-template-columns:minmax(0,1fr)}
  .calc__hero{padding:18px 18px 16px}
}

.acctmenu{position:relative}
.acctmenu__btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:4px 10px 4px 4px;border-radius:12px;background:var(--surface-3);color:var(--fg);font-size:14px}
.acctmenu__btn:hover{background:var(--line-2)}
.acctmenu__av{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--tint-2);color:var(--lilac);font:700 13px/1 var(--f-body)}
.acctmenu__label{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap}
.acctmenu__label b{font-weight:600}
.acctmenu__org{color:var(--fg-3);font-size:13px;max-width:160px;overflow:hidden;text-overflow:ellipsis}
.acctmenu__org:not(:empty)::before{content:"· "}
.acctmenu__menu{position:absolute;right:0;top:calc(100% + 8px);width:270px;padding:8px;border-radius:16px;background:var(--surface);border:1px solid var(--line-2);box-shadow:0 24px 48px -16px rgba(0,0,0,.9);z-index:60;display:grid;gap:2px}
.acctmenu__email{padding:6px 10px 4px;font-size:13px;color:var(--fg-3);overflow-wrap:anywhere}
.acctmenu__biz{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px 8px}
.acctmenu__biz b{display:block;font-weight:600;font-size:14.5px}
.acctmenu__phone{display:block;font-size:12.5px;color:var(--fg-3)}
.acctmenu__biz .i{color:var(--lilac)}
.acctmenu__sep{height:1px;background:var(--line);margin:4px 2px}
.acctmenu__menu button{display:flex;align-items:center;gap:10px;text-align:left;padding:10px;border-radius:10px;font-size:14.5px;color:var(--fg-2)}
.acctmenu__menu button:hover,.acctmenu__menu button:focus-visible{background:var(--surface-3);color:var(--fg)}
@media (max-width:640px){.acctmenu__label{display:none}.acctmenu__btn{padding:4px 8px 4px 4px}}
.toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:120;transform:translateX(-50%);display:flex;align-items:center;gap:10px;width:max-content;max-width:calc(100% - 32px);padding:12px 16px;border-radius:12px;background:var(--fg);color:var(--bg);font-weight:500;font-size:14px;box-shadow:0 20px 40px -12px rgba(0,0,0,.7);animation:toast .25s ease}
.toast .i{width:18px;height:18px;flex:none}

/* With the rail showing, the main column stretches to the rail's height, so a short step's last card
   (card--fill, e.g. Upload photos) ends level with the rail's last box, the Application ID and Plan panel. */
@media (min-width:960px){
  .wiz > .side{align-self:start}
  .wiz > .main{align-self:stretch;display:flex;flex-direction:column}
  #wizForm:not([hidden]){flex:1;display:flex;flex-direction:column}
  #wizForm > .step:not([hidden]){flex:1}
  .card--fill{flex:1;display:flex;flex-direction:column}
  .card--fill > .card__body{flex:1;grid-template-rows:minmax(0,1fr)}
}

/* ---------- agreement reader and acceptance (review step) ---------- */
.agr-reader{max-height:min(480px,62vh);overflow:auto;overscroll-behavior:contain;padding:22px 24px 26px;border:1px solid var(--line-2);border-radius:14px;background:var(--surface-2)}
.agr-reader:focus-visible{outline:2px solid var(--lilac);outline-offset:2px}
.agr{font-size:14px;line-height:1.62;color:var(--fg-2);max-width:74ch}
.agr p{margin:0 0 10px}
.agr b{color:var(--fg);font-weight:600}
.agr__cover{padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.agr .agr__eyebrow{margin:0 0 6px;font:600 11px/1.2 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--lilac)}
.agr__title{font:700 22px/1.2 var(--f-display);letter-spacing:-.02em;color:var(--fg)}
.agr .agr__subtitle{margin:4px 0 14px;color:var(--fg-3)}
.agr__facts{display:grid;gap:8px;margin:0 0 14px}
.agr__facts div{display:grid;grid-template-columns:minmax(110px,170px) minmax(0,1fr);gap:2px 14px}
.agr__facts dt{color:var(--fg);font-weight:600}
.agr__facts dd{margin:0}
.agr__sec{margin-bottom:16px}
.agr__sec h4{margin:8px 0 10px;font:600 15.5px/1.3 var(--f-display);letter-spacing:-.01em;color:var(--fg)}
.agr__defs{display:grid;gap:10px;margin:0}
.agr__defs dt{color:var(--fg);font-weight:600}
.agr__defs dd{margin:2px 0 0}
.agr__cl,.agr__subs{list-style:none;margin:0;padding:0}
.agr__cl > li{display:grid;grid-template-columns:42px minmax(0,1fr);gap:0 8px;margin-bottom:6px}
.agr__n{font-weight:600;color:var(--fg);font-variant-numeric:tabular-nums}
.agr__subs{margin:-2px 0 10px}
.agr__subs li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:0 4px;margin-bottom:6px}
.agr__k{color:var(--fg-3)}
.agr__tblwrap{overflow-x:auto;margin:4px 0 14px;border:1px solid var(--line);border-radius:10px}
.agr__tbl{width:100%;border-collapse:collapse;font-size:13px;line-height:1.5}
.agr__tbl th,.agr__tbl td{padding:8px 10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.agr__tbl thead th{background:var(--surface-3);color:var(--fg);font-weight:600}
.agr__tbl tbody th{min-width:130px;color:var(--fg);font-weight:600}
.agr__tbl tr:last-child > *{border-bottom:0}
.agr__acc{padding:14px 16px;border:1px solid rgba(168,74,255,.4);border-radius:12px;background:var(--tint)}
.agr__acc p:last-child{margin-bottom:0}
.agr .agr__foot{margin:14px 0 0;font-size:12px;color:var(--fg-3)}
.agr-bar{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;font-size:13.5px;color:var(--fg-3)}
.agr-bar .is-read{color:var(--ok)}
.agr-signer{display:grid;gap:14px;padding:20px 18px 18px;border-radius:var(--r-sig-sm);border:1px solid rgba(168,74,255,.5);background:radial-gradient(120% 120% at 0% 0%,rgba(168,74,255,.16),rgba(168,74,255,0) 60%),var(--surface-2)}
.first-outlet{border-color:rgba(168,74,255,.55);background:radial-gradient(120% 140% at 0% 0%,rgba(168,74,255,.18),transparent 60%),var(--surface)}
.first-outlet__in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px 18px}
.first-outlet__ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--tint);color:var(--lilac)}
.first-outlet__txt .card__sub{margin-top:4px}
.first-outlet__act{display:flex;flex-direction:column;align-items:stretch;gap:8px}
@media (max-width:720px){.first-outlet__in{grid-template-columns:auto minmax(0,1fr)}.first-outlet__act{grid-column:1/-1}}
.agr-signer__head{display:flex;flex-direction:column;gap:4px;padding-left:12px}
.agr-signer__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;margin:0}
.agr-signer__grid dt{font-size:12.5px;color:var(--fg-3)}
.agr-signer__grid dd{margin:2px 0 0;font-weight:600;color:var(--fg);overflow-wrap:anywhere}
.agr-signer__grid dd.muted{font-weight:400;color:var(--fg-3)}
.consent{font-size:13.5px}
@media (max-width:640px){
  .agr-reader{padding:16px 14px 20px}
  .agr__facts div{grid-template-columns:minmax(0,1fr)}
  .agr__cl > li{grid-template-columns:36px minmax(0,1fr)}
  .agr-signer__grid{grid-template-columns:minmax(0,1fr)}
}

/* ---------- business step: reveal panels, document uploads, helper ---------- */
.check__sub{display:block;margin-top:3px;font-size:13px;color:var(--fg-3);overflow-wrap:anywhere}
.reveal{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows .44s cubic-bezier(.2,.8,.2,1),opacity .26s ease,visibility 0s linear .44s}
.reveal.is-open{grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows .44s cubic-bezier(.2,.8,.2,1),opacity .34s ease .06s,visibility 0s}
.reveal__in{min-height:0;overflow:hidden;margin:0 -14px -18px;padding:0 14px 18px}
.reveal.is-settled .reveal__in{overflow:visible}
.reveal__pad{padding-top:18px;transform:translateY(-14px);transition:transform .44s cubic-bezier(.2,.8,.2,1)}
.reveal.is-open .reveal__pad{transform:none}
.slab{container-type:inline-size;display:grid;gap:16px;padding:18px;border:1px solid var(--line-2);border-radius:16px;background:var(--bg-2)}
.slab--ok{border-color:rgba(65,214,156,.28)}

.drop--doc{padding:26px 18px;gap:8px}
.drop--doc .drop__icon{width:46px;height:46px;border-radius:13px}
.drop--doc .drop__icon .i{width:22px;height:22px}
.drop--doc .drop__title{font-size:15px}
.drop--compact{flex-direction:row;justify-content:flex-start;text-align:left;padding:16px 18px;gap:14px}
.drop--compact .drop__txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.field.invalid .drop{border-color:rgba(255,98,137,.65);background:rgba(255,98,137,.05)}
.fchips{container-type:inline-size;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.fchips:empty{display:none}
.fchip{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:8px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface-2);animation:rise .25s ease both}
.fchip__ic{flex:none;width:38px;height:38px;border-radius:9px;display:grid;place-items:center;overflow:hidden;background:var(--tint);color:var(--lilac);font:700 10px/1 var(--f-body);letter-spacing:.06em}
.fchip__ic img{width:100%;height:100%;object-fit:cover}
.fchip__txt{flex:1 1 120px;min-width:0;display:flex;flex-direction:column;gap:2px}
.fchip__name{font-weight:600;font-size:14px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fchip__meta{font-size:12.5px;color:var(--fg-3)}
.fchip__tag{position:relative;flex:0 1 250px;min-width:0}
.fchip__tag select{width:100%;appearance:none;-webkit-appearance:none;min-height:38px;padding:0 34px 0 12px;border-radius:9px;border:1px solid var(--line-2);background:var(--bg);color:var(--fg);font-size:13.5px;cursor:pointer;text-overflow:ellipsis}
.fchip__tag select:hover{border-color:var(--line-3)}
.fchip__tag select:focus-visible{outline:2px solid var(--lilac);outline-offset:1px}
.fchip__tag select option{background:var(--surface);color:var(--fg)}
.fchip__tag.is-empty select{color:var(--fg-3)}
.fchip__tag .i{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--fg-3)}
.fchip__x{flex:none;width:36px;height:36px;border-radius:9px;display:grid;place-items:center;color:var(--fg-3)}
.fchip__x:hover{background:rgba(255,98,137,.14);color:var(--err)}
.fchip__x .i{width:17px;height:17px}
@container (max-width:470px){
  .fchip__tag{order:5;flex:1 1 100%}
}

/* Two-pane "no GST" panel. Wide: heading across the top, drop zone beside the helper (stretched to the
   helper's exact height), file chips and notes full width below. Narrow: helper first, then the upload. */
.altdocs__grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"helper" "head" "drop" "below";gap:14px}
.altdocs__head{grid-area:head}
.altdocs__drop{grid-area:drop}
.altdocs__grid > .helper{grid-area:helper}
.altdocs__below{grid-area:below;display:grid;gap:10px;min-width:0}
.altdocs__below:not(:has(.fchip,.note:not([hidden]))){display:none}
@container (min-width:620px){
  .altdocs__grid{grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);grid-template-areas:"head head" "drop helper" "below below";gap:14px 20px;align-items:stretch}
  .altdocs__drop > .drop{flex:1}
}
@container (max-width:460px){
  .hl{grid-template-columns:34px minmax(0,1fr);align-items:start}
  .hl__flag{grid-column:2;margin-top:-2px}
}
.helper{position:relative;display:grid;gap:14px;padding:20px 18px 18px;border-radius:var(--r-sig-sm);border:1px solid rgba(168,74,255,.5);background:radial-gradient(130% 80% at 0% 0%,rgba(168,74,255,.18),rgba(168,74,255,0) 62%),var(--surface-3);box-shadow:0 30px 60px -24px rgba(121,54,244,.55),0 14px 30px -18px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05)}
.helper__head{display:flex;flex-direction:column;gap:4px;padding-left:12px}
.helper__eyebrow{font:600 11px/1.2 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--lilac)}
.helper__title{font:600 18px/1.25 var(--f-display);letter-spacing:-.015em}
.helper__list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.hl{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:11px;align-items:center;padding:7px 8px;border-radius:11px;transition:background-color .2s ease}
.hl__ic,.combo__ic{position:relative;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--tint);color:var(--lilac);transition:background-color .2s ease,color .2s ease}
.hl__ic .i,.combo__ic .i{width:17px;height:17px}
.hl__txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.hl__when{font-size:12.5px;line-height:1.35;color:var(--fg-3)}
.hl b,.combo__item b{font-weight:600;font-size:14px;line-height:1.3;color:var(--fg)}
.hl__flag:empty{display:none}
.hl__flag .badge{font-size:11px;padding:4px 8px}
.hl.is-match{background:var(--tint)}
.hl.is-added .hl__ic,.combo__item.is-added .combo__ic{background:var(--ok);color:var(--ok-ink)}
.helper__or{display:flex;align-items:center;gap:10px;font:600 11px/1.2 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.helper__or::before,.helper__or::after{content:"";flex:1;height:1px;background:var(--line-2)}
.combo{display:grid;gap:10px;padding:14px;border:1px dashed var(--line-3);border-radius:14px;background:rgba(8,7,11,.4)}
.combo__title{font-size:13.5px;color:var(--fg-2)}
.combo__title b{color:var(--fg);font-weight:600}
.combo__list{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:combo}
.combo__item{display:grid;grid-template-columns:34px minmax(0,1fr);gap:11px;align-items:center}
.combo__ic::after{counter-increment:combo;content:counter(combo);position:absolute;top:-6px;left:-6px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font:700 10.5px/1 var(--f-display);background:var(--violet);color:var(--white);border:2px solid var(--surface-3)}
.combo__item.is-added .combo__ic::after{background:var(--ok);color:var(--ok-ink)}
.combo__item span span{display:block;font-size:12.5px;color:var(--fg-3);line-height:1.35}
.helper__foot{display:flex;gap:10px;align-items:flex-start;padding-top:14px;border-top:1px solid var(--line-2);font-size:13.5px;line-height:1.45;color:var(--fg-2)}
.helper__foot .i{width:18px;height:18px;color:var(--ok);margin-top:1px}
.sum__docs{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.sum__docs li{overflow-wrap:anywhere}
.sum__docs li span{color:var(--fg-3)}

@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes sheetup{from{opacity:.4;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes slide{from{opacity:.4;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes toast{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .why{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .opts--3{grid-template-columns:minmax(0,1fr)}
  .opt--stack .opt__ui{flex-direction:row;align-items:center}
  .opt--stack .opt__art{order:3;width:96px;height:auto;align-self:stretch;margin:-4px -4px -4px 0}
  .opt--stack .opt__row{flex:1;padding:0}
}
@media (max-width:959px){
  :root{--header-h:60px}
  .hero{padding-block:32px 112px}
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .photo{max-width:560px}
  .ready__card{grid-template-columns:minmax(0,1fr)}
  .ready__col + .ready__col{border-left:0;border-top:1px solid var(--line)}
  .wiz{grid-template-columns:minmax(0,1fr);padding-top:20px}
  .side{display:none}
  .actionbar__in{grid-template-columns:minmax(0,1fr)}
  .actionbar__spacer{display:none}
  .step__head .step__count{display:none}
  .mprog{display:block;position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--header-h));z-index:44;background:var(--glass-strong);-webkit-backdrop-filter:saturate(150%) blur(14px);backdrop-filter:saturate(150%) blur(14px);border-bottom:1px solid var(--line)}
  .mprog__btn{width:100%;display:flex;align-items:center;gap:12px;padding:12px 0 10px;text-align:left}
  .mprog__txt{display:flex;flex-direction:column;min-width:0;flex:1}
  .mprog__count{font:600 11px/1.2 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--lilac)}
  .mprog__title{font:600 16px/1.3 var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mprog__chev{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--fg-3)}
  .mprog__chev .i{transition:transform .2s ease}
  .mprog__btn[aria-expanded="true"] .mprog__chev .i{transform:rotate(180deg)}
  .mprog .led{padding-bottom:12px}
  .mprog__list{max-height:calc(100vh - 160px);overflow-y:auto;border-top:1px solid var(--line);padding-block:4px 10px}
  .mprog__list .stepper{padding:4px 0}
}
@media (max-width:640px){
  .why,.plans{grid-template-columns:minmax(0,1fr)}
  .cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .opts--2,.grid-2,.howto{grid-template-columns:minmax(0,1fr)}
  .shot{grid-template-columns:minmax(0,1fr);gap:10px;padding:12px}
  .ready__col{padding:24px 20px}
  .card__head{padding:18px 18px 14px}
  .card__body{padding:16px 18px 20px}
  .opt__art{width:80px}
  .opt__art svg{width:66px;height:50px}
  .opt--stack .opt__art{width:80px}
  .brand__tag{display:none}
  .prow{grid-template-columns:minmax(0,1fr);padding:12px}
  .seg{display:flex;width:100%}
  .seg label{flex:1}
  .seg span{width:100%;min-width:0}
  .sum__list{grid-template-columns:minmax(0,1fr);gap:2px}
  .sum__list dd{margin-bottom:10px}
  .plan,.planbar{padding:22px 20px}
  .done__hero{padding:26px 22px;border-radius:var(--r-sig-sm)}
  .photo{border-radius:64px 12px 12px 12px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hide-sm{display:none!important}
  .slab{padding:14px}
  .altdocs.slab{padding:0;border:0;border-radius:0;background:none}
  .helper{padding:18px 14px 16px}
  .actionbar .btn{flex:1}
  .saved{display:none}
}
@media (max-width:560px){
  .modal{padding:0}
  .dialog{margin:auto 0 0;width:100%;max-height:94vh;overflow-y:auto;border-radius:22px 22px 0 0;padding:24px max(18px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px));animation:sheetup .26s cubic-bezier(.2,.8,.2,1)}
  .dialog__title{font-size:23px}
  .otp input{height:52px;font-size:20px}
}
@media (max-width:380px){
  .topbar__nav .btn--text{padding:0 8px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- uploads in progress ---------- */
.upbar{display:block;height:4px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.upbar > span{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--cyan),var(--violet));transition:width .2s ease}
.thumb .upbar{position:absolute;left:8px;right:8px;bottom:8px}
.thumb.is-uploading img{opacity:.55}
.thumb.is-uploading .thumb__name{opacity:0}
.fchip .upbar{margin-top:6px}
.fchip.is-uploading .fchip__meta{color:var(--lilac)}




/* ---------- agencies ---------- */
.numstep{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:12px;background:var(--surface-2);flex:none}
.numstep button{width:42px;height:42px;display:grid;place-items:center;color:var(--fg-2);border-radius:11px}
.numstep button:hover:not(:disabled){color:var(--fg);background:var(--surface-3)}
.numstep button:disabled{opacity:.35;cursor:not-allowed}
.numstep button:focus-visible{outline:2px solid var(--lilac);outline-offset:-2px}
.numstep output{min-width:44px;text-align:center;font:600 18px/1 var(--f-display);font-variant-numeric:tabular-nums;color:var(--fg)}
.range{-webkit-appearance:none;appearance:none;width:100%;height:6px;margin:8px 0;border-radius:999px;background:linear-gradient(90deg,var(--violet) 0,var(--violet) var(--p,30%),var(--line-2) var(--p,30%));cursor:pointer}
.range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:var(--white);border:5px solid var(--violet);box-shadow:0 4px 14px -4px rgba(168,74,255,.9)}
.range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--white);border:5px solid var(--violet);box-shadow:0 4px 14px -4px rgba(168,74,255,.9)}
.range:focus-visible{outline:2px solid var(--lilac);outline-offset:6px}
.range__ends{display:flex;justify-content:space-between;font-size:12.5px;color:var(--fg-3);font-variant-numeric:tabular-nums}
.plan-card li b{color:var(--fg);font-weight:600}
.tl{display:grid;gap:14px;padding:30px;border:1px solid var(--line-2);border-radius:var(--r-sig-sm);background:radial-gradient(90% 140% at 100% 0%,rgba(20,211,230,.08),rgba(20,211,230,0) 60%),var(--surface)}
.tl__marks,.tl__bar{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,.42fr);gap:8px}
.tl__marks span{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--fg-3)}
.tl__marks span::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--line-3);flex:none}
.tl__marks span:nth-child(1)::before{background:var(--violet)}
.tl__marks span:nth-child(2)::before{background:var(--cyan)}
.tl__seg{display:grid;gap:6px;align-content:start;padding:18px;border-radius:14px;min-width:0}
.tl__seg--with{background:linear-gradient(100deg,rgba(121,54,244,.5),rgba(168,74,255,.28));border:1px solid rgba(168,74,255,.6)}
.tl__seg--after{background:var(--cyan-tint);border:1px dashed rgba(20,211,230,.55)}
.tl__seg--end{background:var(--surface-2);border:1px solid var(--line)}
.tl__seg b{white-space:nowrap;font:600 17px/1.25 var(--f-display);letter-spacing:-.01em;color:var(--fg)}
.tl__seg span{font-size:13.5px;color:var(--fg-2);line-height:1.45}
.tl__seg--end b{color:var(--fg-3)}
.tl__eg{display:flex;gap:12px;align-items:flex-start;margin-top:6px;padding-top:16px;border-top:1px solid var(--line);color:var(--fg-2);font-size:14.5px;line-height:1.55}
.tl__eg .i{color:var(--cyan);flex:none;margin-top:2px}
.tl__eg b{color:var(--fg)}
@media (max-width:760px){.tl{padding:22px 18px}.tl__marks{display:none}.tl__bar{grid-template-columns:minmax(0,1fr)}}
.plan-card .plan-card__big{font:800 44px/1 var(--f-display);letter-spacing:-.04em;color:var(--fg)}
.plan-card .plan-card__big span{font:500 15px/1.4 var(--f-body);letter-spacing:0;color:var(--fg-3);margin-left:8px}
.plan-card li .i--no{color:var(--fg-3)}
.refcode{display:grid;gap:14px}
.refcode__code{display:inline-flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:14px 14px 14px 18px;border:1px dashed rgba(168,74,255,.6);border-radius:14px;background:var(--surface-2);max-width:100%}
.refcode__code b.is-off{color:var(--fg-3);text-decoration:line-through;text-decoration-thickness:1px}
.portal__codeoff{display:flex;align-items:center;gap:6px;margin:8px 0 0;font-size:13px;color:var(--fg-3)}
.olink{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:16px 24px 0;padding:14px 16px;border:1px dashed var(--line-2);border-radius:14px;background:var(--surface-2)}
.olink p{margin:0;font-size:14px;line-height:1.5;color:var(--fg-2)}
.olink p b{color:var(--fg)}
.olink .btn{flex:none}
@media (max-width:640px){.olink{flex-direction:column;align-items:stretch;margin-left:18px;margin-right:18px}}
.pverify{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;margin:0 0 20px;padding:18px 20px;border:1px solid rgba(245,180,60,.45);border-radius:16px;background:rgba(245,180,60,.08)}
.pverify__ico{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(245,180,60,.16);color:#f5b43c}
.pverify__title{margin:0 0 4px;font:700 16px/1.3 var(--f-display);color:var(--fg)}
.pverify p{margin:0;color:var(--fg-3);font-size:14px;line-height:1.55}
.refcode__code b{font:700 clamp(22px,3vw,28px)/1 var(--f-display);letter-spacing:.06em;color:var(--fg);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.calc__slabel{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:15px;color:var(--fg-2)}
.calc__slabel b{font:600 18px/1 var(--f-display);color:var(--fg)}

/* ---------- agency portal ---------- */
.portal{display:flex;flex-direction:column;gap:22px;padding-top:34px;padding-bottom:72px}
.portal__hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px 36px;align-items:end;padding:32px;border-radius:var(--r-sig);border:1px solid rgba(168,74,255,.4);background:radial-gradient(100% 140% at 0% 0%,rgba(168,74,255,.2),rgba(168,74,255,0) 60%),var(--surface)}
.portal__hello{display:flex;flex-direction:column;gap:10px;align-items:flex-start;min-width:0}
.portal__hello .lead{max-width:560px}
.portal__code{display:grid;gap:10px;justify-items:start;min-width:0}
.portal__codelabel{font-size:13px;color:var(--fg-3)}
.portal__foot{display:flex;justify-content:center}
.pstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pstat{display:flex;flex-direction:column;gap:6px;padding:18px 18px 16px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);min-width:0}
.pstat b{font:700 30px/1 var(--f-display);font-variant-numeric:tabular-nums;color:var(--fg)}
.pstat span{font-size:14px;font-weight:600;color:var(--fg);line-height:1.35}
.pstat small{font-size:12.5px;color:var(--fg-3);line-height:1.45}
.ofilter{display:flex;gap:6px;overflow-x:auto;padding:16px 24px 6px;scrollbar-width:none}
.ofilter::-webkit-scrollbar{display:none}
.ofilter label{position:relative;display:flex;flex:none}
.ofilter span{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 13px;border:1px solid var(--line-2);border-radius:999px;font-size:13.5px;font-weight:500;color:var(--fg-2);cursor:pointer;white-space:nowrap;user-select:none;transition:border-color .15s ease,background-color .15s ease,color .15s ease}
.ofilter span:hover{border-color:var(--line-3);color:var(--fg)}
.ofilter em{font-style:normal;color:var(--fg-3);font-variant-numeric:tabular-nums}
.ofilter input:checked + span{border-color:var(--violet);background:var(--tint);color:var(--fg)}
.ofilter input:checked + span em{color:var(--lilac)}
.ofilter input:focus-visible + span{outline:2px solid var(--lilac);outline-offset:2px}
.odemo{margin:10px 24px 0}
.olist{list-style:none;margin:0;padding:6px 24px 18px;display:grid}
.orow{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1.6fr) 150px;gap:10px 22px;align-items:center;padding:18px 0;border-top:1px solid var(--line)}
.orow:first-child{border-top:0}
.orow__name{display:block;font-weight:600;color:var(--fg);overflow-wrap:anywhere}
.orow__sub{display:block;font-size:13px;color:var(--fg-3);margin-top:3px;overflow-wrap:anywhere}
.orow__who{font-size:14px;color:var(--fg-2);min-width:0}
.orow__status{display:flex;flex-direction:column;align-items:flex-start;gap:7px;font-size:13.5px;color:var(--fg-2);line-height:1.45;min-width:0}
.orow__act{justify-self:end}
.badge--warn{background:rgba(255,187,85,.12);color:var(--warn)}
.oempty{display:grid;gap:14px;justify-items:start;padding:22px 24px 28px;color:var(--fg-2);font-size:14.5px}
.invdone{display:grid;gap:16px}
.invdone .done__badge{flex:none;width:44px;height:44px;box-shadow:0 0 0 6px var(--ok-tint)}
.invdone .done__badge .i{width:22px;height:22px}
.invdone__head{display:flex;align-items:center;gap:16px;margin:0 44px 10px 0}
.invdone__head .dialog__title{margin:0}
.invlink{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:12px 12px 12px 16px;border:1px dashed rgba(168,74,255,.6);border-radius:14px;background:var(--surface-2);min-width:0}
.invlink code{flex:1 1 220px;min-width:0;font:500 13.5px/1.4 var(--f-mono);color:var(--fg);overflow-wrap:anywhere}
.invdone__acts{display:flex;flex-wrap:wrap;gap:10px}
.hero__login{font-size:14px;color:var(--fg-3);margin-top:-6px}
@media (max-width:959px){
  .pstats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .portal__hero{grid-template-columns:minmax(0,1fr);align-items:start}
  .orow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .orow__status{grid-column:1/-1}
  .orow__act{grid-column:1/-1;justify-self:start}
}
@media (max-width:640px){
  .portal{padding-top:20px;gap:16px}
  .portal__hero{padding:24px 20px;border-radius:var(--r-sig-sm)}
  .pstat{padding:14px 14px 13px}
  .pstat b{font-size:26px}
  .ofilter{padding-left:18px;padding-right:18px}
  .odemo{margin-left:18px;margin-right:18px}
  .olist{padding-left:18px;padding-right:18px}
  .orow{grid-template-columns:minmax(0,1fr);gap:8px}
  .oempty{padding-left:18px;padding-right:18px}
}

/* ---------- password gate ---------- */