/* 台灣公司設立頁（company-setup.html）專用。共用 token 與元件都在 intro-s.css，這裡只放這頁獨有的。 */

/* 首屏右側：設立進度示意 */
.cs-art{height:420px}
.cs-track{position:absolute;left:0;right:-40px;top:0;overflow:hidden}
.cs-tl{list-style:none;margin:0;padding:10px 22px 18px;counter-reset:cs}
.cs-tl li{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:13px 0 13px 30px;border-top:1px solid var(--line);font-size:14px}
.cs-tl li:first-child{border-top:0}
.cs-tl li::before{content:"";position:absolute;left:2px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;
  border:2px solid #d5dbe2;background:#fff}
.cs-tl li.ok::before{border-color:#0f9960;background:#0f9960;box-shadow:inset 0 0 0 3px #fff}
.cs-tl li.now::before{border-color:var(--gold);background:var(--gold);animation:csPulse 1.8s ease-in-out infinite}
@keyframes csPulse{50%{box-shadow:0 0 0 6px rgba(176,137,78,.18)}}
.cs-tl b{font-weight:600;color:var(--ink)}
.cs-tl li:not(.ok):not(.now) b{color:var(--dim);font-weight:500}
.cs-tl span{font-size:12px;color:var(--dim);white-space:nowrap}
.cs-tl li.ok span{color:#0f9960}
.cs-tl li.now span{color:var(--kick);font-weight:600}
.cs-ai{left:-50px;bottom:0;width:310px}

.feats.three{grid-template-columns:repeat(3,1fr)}
.cs-why{padding:70px 0}

/* 組織型態比較表 */
.cs-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:10px;background:#fff;box-shadow:var(--shadow-s)}
.cs-table{width:100%;min-width:720px;border-collapse:collapse;font-family:var(--tc);font-size:14.5px}
.cs-table th,.cs-table td{padding:15px 16px;text-align:left;border-top:1px solid var(--line);vertical-align:top;line-height:1.6}
.cs-table thead th{border-top:0;font-size:14px;color:var(--ink);background:#fafbfc}
.cs-table tbody th{width:120px;color:var(--dim);font-weight:500;font-size:13.5px}
.cs-table td{color:var(--body)}
.cs-table thead th:nth-child(3){color:var(--kick)}

.plan-sub{margin:6px 0 0;font-size:13.5px;color:var(--dim)}
.price.ask{font-size:20px;color:var(--body)}
.plan.picked{box-shadow:0 0 0 2px var(--gold),var(--shadow)}

/* 申請區：左表單、右規費試算 */
.cs-apply{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start}
.cs-card{padding:26px 30px 26px}
.cs-stepper{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;font-family:var(--tc)}
.cs-stepper li{display:flex;align-items:center;gap:8px;padding-top:10px;border-top:2px solid var(--line);font-size:13px;color:var(--dim);min-width:0}
.cs-stepper li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-stepper b{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--tint);font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.cs-stepper li.on{border-top-color:var(--ink);color:var(--ink);font-weight:600}
.cs-stepper li.on b{background:var(--ink);color:#fff}
.cs-stepper li.done{border-top-color:var(--gold);color:var(--ink)}
.cs-stepper li.done b{background:var(--gold);color:#fff}

.cs-step{display:contents;border:0;margin:0;padding:0}
.cs-step[hidden]{display:none}
.cs-step legend{grid-column:1 / -1;padding:0;margin:0 0 2px;font-family:var(--tc);font-size:19px;font-weight:700;color:var(--ink)}
/* legend 在 display:contents 下不一定吃 grid，補一個保險 */
.cs-form legend{float:left;width:100%}
.cs-form .wide{grid-column:1 / -1}

.ctform .cs-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cs-opt{position:relative;display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;
  cursor:pointer;transition:border-color .15s,box-shadow .15s;background:#fff}
.cs-opt input{position:absolute;opacity:0;pointer-events:none}
.cs-opt b{font-size:14.5px;color:var(--ink)}
.cs-opt small{font-size:12.5px;color:var(--dim)}
.cs-opt:hover{border-color:#c7cfd8}
.cs-opt:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.cs-opt:has(input:focus-visible){box-shadow:0 0 0 3px rgba(109,93,252,.25)}

.cs-names{display:grid;gap:8px}
.cs-add{justify-self:start;margin-top:6px;border:0;background:none;padding:4px 0;font:inherit;font-size:13.5px;font-weight:600;color:var(--kick);cursor:pointer}
.cs-add:disabled{opacity:.4;cursor:default}
.cs-hint{display:block;font-size:12.5px;line-height:1.7;color:var(--dim);margin:0}

.cs-seg{display:flex;flex-wrap:wrap;gap:8px}
.cs-seg label{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;
  font-size:13.5px;color:var(--ink);cursor:pointer;background:#fff}
.cs-seg label:has(input:checked){border-color:var(--ink);background:var(--tint);font-weight:600}
.cs-seg input{accent-color:var(--ink);margin:0}

.cs-people{display:grid;gap:10px}
.cs-person{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.1fr) 84px 32px;gap:8px;align-items:center}
.cs-person input,.cs-person select{width:100%}
.cs-person .cs-x{width:32px;height:38px;border:0;background:none;color:var(--dim);font-size:20px;cursor:pointer;border-radius:6px}
.cs-person .cs-x:hover{background:var(--tint);color:#c0392b}
.cs-people-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.1fr) 84px 32px;gap:8px;font-size:12px;color:var(--dim)}
.cs-people-foot{display:flex;justify-content:space-between;align-items:center;gap:12px}
.cs-sum{font-size:13px;color:var(--dim)}
.cs-sum.warn{color:var(--kick);font-weight:600}
.cs-alert{padding:12px 14px;border-radius:8px;background:#fff7ea;border:1px solid #f1dcb5;font-size:13.5px;line-height:1.7;color:#6b4a14}
.cs-alert b{color:#5a3d0c}

.cs-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.cs-agree{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.7;color:var(--body)}
.cs-agree input{margin-top:5px;accent-color:var(--ink);flex:none}
.cs-agree a{color:var(--kick);font-weight:600}

.cs-nav{grid-column:1 / -1;display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:8px;padding-top:16px;border-top:1px solid var(--line)}
.cs-nav #csPrev{margin-right:auto}
.cs-nav .btn{cursor:pointer;font-family:inherit}
.cs-nav .btn-dark{border:1px solid rgba(176,137,78,.75)}
.cs-nav .btn[disabled]{opacity:.6;cursor:default}

/* 設立地點 */
.ctform .cs-jur{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:6px}
.cs-jur label{position:relative;display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;cursor:pointer;background:#fff}
.cs-jur input{position:absolute;opacity:0;pointer-events:none}
.cs-jur b{font-size:15.5px;color:var(--ink)}
.cs-jur small{font-size:12.5px;color:var(--dim)}
.cs-jur label:has(input:checked){border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);background:#fffaf2}
.cs-jur label:has(input:focus-visible){box-shadow:0 0 0 3px rgba(109,93,252,.25)}
.cs-opt[hidden],[data-j][hidden]{display:none!important}
.cs-fee-abroad{margin:0!important;font-size:13.5px!important;color:var(--body)!important;line-height:1.75!important}
.cs-fee-abroad b{color:var(--ink)}

/* 香港／新加坡卡 */
.cs-abroad{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px;font-family:var(--tc)}
.cs-abroad-c{position:relative;padding:24px 24px 20px;border-radius:10px;background:#fff;box-shadow:var(--shadow-s)}
.cs-flag{display:inline-block;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.1em;color:var(--kick);
  border:1px solid #ead9bd;border-radius:4px;padding:1px 7px}
.cs-abroad-c h4{margin:10px 0 10px;font-size:17px;color:var(--ink)}
.cs-abroad-c ul{margin:0 0 14px;padding:0 0 0 18px;font-size:14.5px;line-height:1.85;color:var(--body)}
.cs-abroad-c .more{font-weight:600;color:var(--kick)}

/* 送出後 */
.cs-done{font-family:var(--tc);text-align:left}
.cs-done-mark{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#e7f6ef;color:#0f9960;font-size:22px;font-weight:700}
.cs-done h3{margin:14px 0 6px;font-size:21px;color:var(--ink)}
.cs-done h3 b{font-family:var(--mono);font-size:18px;color:var(--kick);letter-spacing:.02em}
.cs-done p{margin:0;font-size:15px;line-height:1.8;color:var(--body)}
.cs-next{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.cs-path{display:flex;flex-direction:column;gap:6px;padding:18px;border:1px solid var(--line);border-radius:10px;transition:border-color .15s,transform .15s}
.cs-path:hover{border-color:var(--ink);transform:translateY(-2px)}
.cs-path b{font-size:16px;color:var(--ink)}
.cs-path span{font-size:13.5px;line-height:1.7;color:var(--body)}
.cs-path em{margin-top:auto;padding-top:6px;font-style:normal;font-size:14px;font-weight:600;color:var(--kick)}
.cs-path.rec{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}

.cs-side{position:sticky;top:90px;display:grid;gap:16px;font-family:var(--tc)}
.cs-fee,.cs-side-note{padding:20px 20px 18px;border-radius:10px;background:var(--tint)}
.cs-side h4{margin:0 0 12px;font-size:15px;color:var(--ink)}
.cs-fee-r{display:flex;justify-content:space-between;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.cs-fee-r b{font-family:var(--en);font-weight:600;color:var(--ink)}
.cs-fee p{margin:10px 0 0;font-size:12.5px;line-height:1.7;color:var(--dim)}
.cs-fee .cs-fee-x{margin-top:6px}
.cs-side-note ul{margin:0;padding:0 0 0 18px;font-size:13.5px;line-height:1.9;color:var(--body)}

.cs-after .cs-after-c{padding:4px 0 0 16px;border-left:1px solid var(--gold)}
.cs-after h4{margin:0 0 8px;font-size:18px;color:var(--ink)}
.cs-after p{margin:0 0 12px;font-size:15px;line-height:1.8;color:var(--body)}
.cs-after .more,.cs-why .more{font-weight:600;color:var(--kick)}

.cs-faq{max-width:820px;font-family:var(--tc)}
.cs-faq details{border-top:1px solid var(--line)}
.cs-faq details:last-child{border-bottom:1px solid var(--line)}
.cs-faq summary{list-style:none;cursor:pointer;padding:20px 36px 20px 0;position:relative;font-size:16.5px;font-weight:600;color:var(--ink)}
.cs-faq summary::-webkit-details-marker{display:none}
.cs-faq summary::after{content:"+";position:absolute;right:4px;top:16px;font-size:22px;font-weight:400;color:var(--dim);transition:transform .2s}
.cs-faq details[open] summary::after{transform:rotate(45deg)}
.cs-faq details p{margin:0 0 20px;font-size:15px;line-height:1.85;color:var(--body)}

@media(max-width:960px){
  .cs-apply{grid-template-columns:1fr}
  .cs-side{position:static;grid-template-columns:1fr 1fr}
  .feats.three{grid-template-columns:1fr}
}
@media(max-width:900px){
  .cs-art{display:none}
}
@media(max-width:640px){
  .cs-abroad{grid-template-columns:1fr}
  .cs-card{padding:22px 16px}
  .ctform .cs-opts{grid-template-columns:1fr 1fr}
  .ctform .cs-jur{grid-template-columns:repeat(3,1fr)}
  .cs-jur small{display:none}
  .cs-stepper span{display:none}
  .cs-stepper li.on span{display:inline}
  .cs-stepper{grid-template-columns:auto auto auto auto}
  .cs-people-head{display:none}
  .cs-person{grid-template-columns:1fr 1fr;padding:10px;border:1px solid var(--line);border-radius:8px}
  .cs-person .cs-pname{grid-column:1 / -1}
  .cs-person .cs-x{grid-column:2;justify-self:end}
  .cs-next{grid-template-columns:1fr}
  .cs-side{grid-template-columns:1fr}
}