/* DAY ONE — setup-assistant layout: left rail (8 groups) · one question per screen · Continue / Not now / Back. Dark panes for hello and ready. */
@import url("tokens.css");
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:Pretendard,'Pretendard Variable','DM Sans','Apple SD Gothic Neo','Malgun Gothic',-apple-system,'Segoe UI',sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--aa);outline-offset:2px}
.langbar{position:fixed;top:10px;right:12px;z-index:60}
.langbar button{font-size:11px;font-weight:700;letter-spacing:.04em;border:0;border-radius:6px;padding:7px 13px;background:var(--lang);color:#fff}
.langbar button:hover{background:var(--lang-h)}
.do{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100%}
/* rail */
.rail{background:var(--hero);color:var(--rail-text);padding:22px 18px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh}
.rail .eyebrow{font-size:10px;letter-spacing:.18em;font-weight:800;color:var(--gold)}
.rail .lockup{font-size:15px;font-weight:800;color:#fff;margin-top:2px;line-height:1.25}
.rail ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rail li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--rail-sub)}
.rail li button{all:unset;display:flex;align-items:center;gap:10px;cursor:default;color:inherit}
.rail li i{width:20px;height:20px;border-radius:50%;border:1.5px solid #3a4352;display:grid;place-items:center;font-size:10px;font-style:normal;flex:none}
.rail li.done{color:#c5cddb}.rail li.done i{background:var(--green);border-color:var(--green);color:#06130c}.rail li.done button{cursor:pointer}
.rail li.cur{color:#fff;font-weight:700}.rail li.cur i{border-color:var(--gold);background:var(--gold);color:#16120a}
.rail .foot{margin-top:auto;font-size:11px;color:var(--rail-sub);border-top:1px solid var(--rail-line);padding-top:12px;line-height:1.45}
.rail .foot button{all:unset;cursor:pointer;color:var(--gold);text-decoration:underline;word-break:break-all}
.dots{display:none}
/* stage */
.stage{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:100vh}
.pane{padding:56px clamp(20px,5vw,64px) 24px;display:flex;flex-direction:column;gap:18px;max-width:760px;width:100%;margin:0 auto;min-width:0}
.pane.enter{animation:enter .3s ease-out}
@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pane.enter{animation:none}}
.pane h1{margin:0;font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
.pane .eyebrow{font-size:11px;letter-spacing:.18em;font-weight:800;color:var(--blue)}
.pane .desc{margin:0;font-size:15px;color:var(--sub);max-width:60ch}
/* EPIKAR 2026-10-26: the hidden attribute wins over any display rule (.fields' grid showed the email-code box from the first screen) */
[hidden]{display:none !important}
.pane .fields{display:grid;gap:12px}
.field{display:grid;gap:5px;font-size:12px;color:var(--sub)}
.field input,.field select{height:48px;border:1px solid var(--border);border-radius:10px;background:var(--card);padding:0 12px;font-size:15px;color:var(--text);width:100%}
.field .err{color:var(--bad-fg);font-size:12px;display:none}.field.bad .err{display:block}.field.bad input{border-color:var(--bad-fg)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.card{border:1px solid var(--border);border-radius:14px;padding:14px;background:var(--card);display:grid;gap:4px;text-align:left}
.card[aria-pressed="true"]{outline:2px solid var(--text);outline-offset:-2px}
.card b{font-size:14px}.card small{font-size:12.5px;color:var(--sub);line-height:1.4}
.skeleton{border:1px dashed var(--border);border-radius:14px;padding:18px;color:var(--sub);font-size:13px}
/* dark panes */
.stage.dark{background:var(--hero);color:var(--rail-text)}
.stage.dark .pane{text-align:center;align-items:center;justify-content:center;padding-top:40px}
.stage.dark .pane h1{color:#fff;font-size:clamp(40px,7vw,80px)}
.stage.dark .desc{color:#aab3c2}
.stage.dark .hello{position:relative;height:1.1em;line-height:1.1;width:100%}
.stage.dark .hello span{position:absolute;inset:0;opacity:0;animation:hello 7.5s infinite}
.stage.dark .hello span:nth-child(2){animation-delay:2.5s}.stage.dark .hello span:nth-child(3){animation-delay:5s}
@keyframes hello{0%{opacity:0;transform:translateY(6px)}6%,28%{opacity:1;transform:none}34%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.stage.dark .hello span{animation:none}.stage.dark .hello span:first-child{opacity:1}}
.stage.dark .nav{border-top-color:var(--rail-line);background:var(--hero)}
.stage.dark .btn{background:#fff;color:#101319}.stage.dark .btn.ghost{background:transparent;color:var(--rail-sub);border-color:var(--rail-line)}
.stage.dark .saved{color:var(--rail-sub)}
/* nav */
.nav{position:sticky;bottom:0;display:flex;gap:10px;align-items:center;padding:14px clamp(20px,5vw,64px);padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);background:var(--bg);max-width:760px;width:100%;margin:0 auto;flex-wrap:wrap}
.nav .spacer{flex:1}
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 22px;border-radius:10px;font-weight:700;font-size:14px;background:var(--text);color:var(--card);border:1px solid transparent}
.btn.ghost{background:transparent;color:var(--sub);border-color:var(--border)}
.btn.gold{background:var(--gold);color:#16120a}
.stage.dark .btn.gold{background:var(--gold);color:#16120a}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.saved{font-size:11.5px;color:var(--sub)}
/* phone */
@media (max-width:760px){
  .do{grid-template-columns:1fr}
  .rail{display:none}
  .dots{display:flex;gap:6px;justify-content:center;padding:14px 16px 0;padding-top:calc(14px + env(safe-area-inset-top,0px))}
  .dots i{width:8px;height:8px;border-radius:50%;background:var(--border);display:block}
  .dots i.done{background:var(--green)}.dots i.cur{background:var(--gold);transform:scale(1.25)}
  .stage.dark .dots i{background:#2a3140}.stage.dark .dots i.done{background:var(--green)}.stage.dark .dots i.cur{background:var(--gold)}
  .stage{grid-template-rows:auto minmax(0,1fr) auto}
  .pane{padding:22px 16px 16px;gap:14px}
  .pane h1{font-size:28px}
  .stage.dark .pane h1{font-size:44px}
  .nav{padding:10px 16px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .btn{height:44px;padding:0 16px}
  .langbar{top:calc(8px + env(safe-area-inset-top,0px))}
}

/* ── Phase 2: real fields ── */
.field .lb{display:block}.field .lb i{color:var(--bad-fg);font-style:normal}
.field .hint,.hint{font-size:12px;color:var(--sub);line-height:1.45;margin:0}.hint.ok{color:var(--ok-fg)}
.field .ro{display:block;min-height:48px;border:1px dashed var(--border);border-radius:10px;padding:12px;font-size:14px;color:var(--text)}
.formerr{color:var(--bad-fg);font-size:13px;margin:0}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media (max-width:640px){.row,.row3{grid-template-columns:1fr}}
.chipbar{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:inherit;font-size:13px;font-weight:600;border:1px solid var(--border);border-radius:99px;padding:7px 12px;background:var(--card);color:var(--text);min-height:36px}
.chip[aria-pressed="true"],.chip.on{background:var(--text);color:var(--card);border-color:var(--text)}
.chipbar.shake{animation:shake .3s}@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.hours{display:grid;gap:6px}
.hours .day{display:grid;grid-template-columns:44px 1fr 1fr auto;gap:8px;align-items:center;font-size:13px}
.hours .day input[type="time"]{height:40px;border:1px solid var(--border);border-radius:8px;background:var(--card);padding:0 8px;font-size:14px;color:var(--text);min-width:0}
.hours .day.off input[type="time"]{opacity:.4}.hours .day .closed{font-size:12px;color:var(--sub);display:flex;gap:4px;align-items:center;white-space:nowrap}
.tbl{overflow-x:auto}
table.people,table.plan{width:100%;border-collapse:collapse;font-size:13.5px}
table.people th,table.plan th{text-align:left;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);padding:6px 8px;border-bottom:1px solid var(--border)}
table.people td,table.plan td{padding:8px;border-bottom:1px solid var(--border);vertical-align:top}
table.people input{height:40px;border:1px solid var(--border);border-radius:8px;background:var(--card);padding:0 10px;font-size:14px;color:var(--text);width:100%}
table.people input.limit{margin-top:6px;max-width:180px}
table.people .err{display:block;color:var(--bad-fg);font-size:12px}
.pill{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;border-radius:5px;padding:3px 7px;background:var(--chip);color:var(--sub)}
.pill.ok{background:var(--ok-bg);color:var(--ok-fg)}.pill.warn{background:var(--warn-bg);color:var(--warn-fg)}.pill.p{background:#efe9fd;color:var(--dws)}.pill.mute{background:var(--chip);color:var(--sub)}
.card{font:inherit;color:inherit;cursor:default}button.card{cursor:pointer}button.card[disabled]{opacity:.55;cursor:not-allowed}
.card .dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:middle}
.card.ok{border-color:var(--green)}.card.on{outline:2px solid var(--text);outline-offset:-2px}
.card .big{font-size:22px;font-weight:800;margin:4px 0}.card .big small{font-size:12px;font-weight:500;color:var(--sub)}
.card.drop{border-style:dashed}
.btn.sm{height:36px;padding:0 12px;font-size:13px}
.docs{display:grid;gap:6px}
.docrow{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:var(--card)}
.docrow label{display:flex;gap:8px;align-items:flex-start;cursor:pointer;min-width:0}.docrow label b{font-size:14px}.docrow label small{display:block;color:var(--sub);font-size:12px;line-height:1.4}
.docrow .ver{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;color:var(--sub)}
.docrow input[type="checkbox"]{width:18px;height:18px;margin-top:2px;flex:none}
@media (max-width:640px){.docrow{grid-template-columns:1fr auto}.docrow .ver{display:none}}
.modal{position:fixed;inset:0;background:rgba(10,12,18,.55);display:grid;place-items:center;padding:16px;z-index:80}
.modal-card{background:var(--card);color:var(--text);border-radius:16px;max-width:760px;width:100%;max-height:min(86vh,900px);display:grid;grid-template-rows:auto minmax(0,1fr);box-shadow:var(--shadow);position:relative;overflow:hidden}
.modal-h{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border)}.modal-h h2{margin:0;font-size:18px}
.modal-b{overflow:auto;padding:18px;position:relative}
.modal-b .wm{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) rotate(-24deg);font-size:110px;font-weight:800;letter-spacing:.2em;color:var(--red);opacity:.08;pointer-events:none}
.legal{font-size:14px;line-height:1.6}.legal h2{font-size:15px;margin:14px 0 4px}.legal p{margin:0 0 8px}.legal.ko{color:var(--sub)}
.refko{font-size:13px;margin:18px 0 6px;color:var(--sub);letter-spacing:.04em;text-transform:uppercase}
.ladder{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;align-items:end}
.ladder div{border:1px solid var(--border);background:var(--card);border-radius:10px;padding:8px;font-size:11px;color:var(--sub);display:grid;gap:3px}
.ladder div b{font-size:14px;color:var(--text)}
.ladder div.now{outline:2px solid var(--blue-ink,var(--aa));outline-offset:-2px}.ladder div.next{outline:2px dashed var(--gold);outline-offset:-2px}
.ladder div:nth-child(1){min-height:52px}.ladder div:nth-child(2){min-height:64px}.ladder div:nth-child(3){min-height:76px}.ladder div:nth-child(4){min-height:88px}.ladder div:nth-child(5){min-height:100px}
@media (max-width:640px){.ladder{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.ladder div{padding:6px 4px;font-size:10px}.ladder div b{font-size:12px}.ladder div .pill{display:none}}
.readyrow{display:flex;gap:22px;align-items:center;flex-wrap:wrap;justify-content:center}
.ring{width:140px;height:140px;border-radius:50%;background:conic-gradient(var(--green) 0 var(--pct,0%),#2a3140 var(--pct,0%) 100%);display:grid;place-items:center;flex:none}
.ring b{width:108px;height:108px;border-radius:50%;background:var(--hero);display:grid;place-items:center;font-size:30px;font-weight:800;color:#fff;line-height:1}
.ring b small{display:block;font-size:10px;color:var(--rail-sub);font-weight:700;letter-spacing:.08em;margin-top:4px}
.stage.dark .chip{background:var(--rail-card);border-color:var(--rail-line);color:#c5cddb}.stage.dark .chip.on{background:var(--green);border-color:var(--green);color:#06130c}
.stage.dark .ladder div{background:var(--rail-card);border-color:var(--rail-line);color:var(--rail-sub)}.stage.dark .ladder div b{color:#fff}
.stage.dark .card{background:var(--rail-card);border-color:var(--rail-line);text-align:left}.stage.dark .card small{color:var(--rail-sub)}.stage.dark .card a{color:var(--gold)}
.stage.dark .hint{color:var(--rail-sub)}
.stage.dark #readyBody{display:grid;gap:14px;width:100%;max-width:640px}
@media (max-width:640px){
  .pane .fields{gap:10px}.row,.row3{gap:8px}
  .row3.addr{grid-template-columns:2fr 1fr 1fr}
  .hours{gap:4px}.hours .day{grid-template-columns:36px 1fr 1fr auto;gap:6px}.hours .day input[type="time"]{height:36px;padding:0 6px;font-size:13px}
  .field input,.field select{height:44px}
}

/* ── Phase 3: connectors, permissions, coverage ── */
.cards.sys .card{min-height:118px}.card.urge{border-color:var(--gold)}
.card .unl{font-size:11.5px;color:var(--sub)}
.readslist{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:12.5px;margin-bottom:12px}
.readslist div{border:1px solid var(--border);border-radius:10px;padding:8px 10px;display:grid;gap:3px}
.readslist h5{margin:0;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}.readslist .yes h5{color:var(--ok-fg)}.readslist .no h5{color:var(--bad-fg)}
.modes{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.modes button{font:inherit;border:1px solid var(--border);border-radius:10px;padding:8px;font-size:11.5px;color:var(--sub);display:grid;gap:3px;text-align:left;background:var(--card)}
.modes button b{font-size:12.5px;color:var(--text)}.modes button.on{outline:2px solid var(--text);outline-offset:-2px}
.conn .fields{margin-top:8px}.conn .hint.warn{color:var(--warn-fg)}
pre.tag{background:var(--chip);border-radius:10px;padding:10px 12px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;white-space:pre-wrap;word-break:break-all;margin:6px 0}
.card.perm .chips{margin-top:6px}.helperbox{margin-top:8px}
.hint.cov{font-weight:600;color:var(--text)}
.qa{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:left;width:100%}
.qa ul{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:5px;font-size:12.5px}
.qa li{display:flex;gap:7px;align-items:flex-start}.qa li:before{content:"✓";color:var(--green);font-weight:800;flex:none}.qa .no li:before{content:"–";color:var(--gold)}.qa li.mute{color:var(--rail-sub)}
@media (max-width:640px){.readslist,.modes,.qa{grid-template-columns:1fr}}

/* ── Phase 4: white-label accent, billing, hardware ── */
.stage.dark .eyebrow{color:var(--brand,var(--blue))}.dots i.cur{background:var(--brand,var(--gold))}.rail li.cur i{background:var(--brand,var(--gold));border-color:var(--brand,var(--gold))}
.rail .brandlogo{height:22px;display:block;margin-bottom:6px}.rail .foot .legal{margin-top:8px;font-size:10px;color:var(--rail-sub);opacity:.8}
.stripe-el{min-height:48px;border:1px solid var(--border);border-radius:10px;padding:10px}
.chip[aria-disabled="true"]{opacity:.5}
/* legal v0.2: the explicit statement under each document row */
.docrow small.agree{display:block;margin-top:3px;color:var(--text);font-size:12.5px;line-height:1.45;font-weight:400}
/* U-1/U-2: the texting opt-in under the mobile field (unchecked by default; the sentence is the one filed with the carriers) */
.optin{display:flex;gap:8px;align-items:flex-start;margin:4px 0 2px;font-size:12.5px;line-height:1.45;color:var(--muted,#5b6472)}
.optin input{margin-top:3px;width:16px;height:16px;flex:0 0 auto}
.optin a{color:var(--aa,#1447e6);text-decoration:underline}