/* WorkCo - checkout page. Tarang: paper, hairlines, mono straps, no cards.
   Tokens only, so dark mode comes free.

   This page exists because the buying path lives inside LINE, where nobody
   outside the product can see it. A payment provider reviewing the business
   needs a URL it can open and walk. So does a chain owner who has already
   decided and does not want to start a chat to hand over money. */

/* The header comes from pricing.css, which centres it. Every other page in the
   v9 set left-aligns it (page-pricing.css does the same override) and the steps
   below ARE left-aligned, so leaving it centred put a centred title on top of a
   left-aligned form. The section padding is cut too: a full 132px gap under a
   header that carries no billing toggle read as a missing element. */
.phead{ padding:clamp(120px,15vh,164px) 0 clamp(20px,2.6vw,30px); }
.phead__inner{ max-width:none; margin:0; text-align:left; }
.phead__sub{ margin:0; }
.co-sec{ padding-top:clamp(28px,4vh,44px); }

.co-wrap{ max-width:780px; }

/* ── numbered steps ── */
.co-step{ padding:30px 0; border-top:1px solid var(--hair); }
.co-step:first-of-type{ border-top:0; padding-top:8px; }
.co-step__k{
  display:flex; align-items:baseline; gap:10px; margin:0 0 4px;
  font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tx-4);
}
.co-step__n{ color:var(--teal); }
.co-step__h{ margin:0 0 18px; font-size:20px; font-weight:800; letter-spacing:-.02em; }

/* ── the two inputs ── */
.co-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 22px; }
@media (max-width:640px){ .co-grid{ grid-template-columns:1fr; } }
.co-f label{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  margin:0 0 7px; font-size:13px; font-weight:600; color:var(--tx-2);
}
.co-f__n{ font-family:var(--mono); font-size:15px; font-weight:700; color:var(--teal); }
/* 16px or iOS zooms the whole page when the field takes focus. */
.co-f select{
  width:100%; min-height:46px; font-size:16px; color:var(--tx);
  background:var(--paper); border:1.5px solid var(--bd); border-radius:9px;
  padding:0 12px; appearance:none;
}
.co-f input[type=range]{ width:100%; accent-color:var(--teal); min-height:34px; }
.co-hint{ margin:7px 0 0; font-size:12.5px; line-height:1.55; color:var(--tx-3); min-height:1.55em; }

/* ── billing cycle: two buttons, one on ── */
.co-cycle{ display:inline-flex; border:1.5px solid var(--bd); border-radius:10px; overflow:hidden; margin-bottom:20px; }
.co-cycle button{
  min-height:42px; padding:0 16px; border:0; background:transparent; cursor:pointer;
  font-size:13px; font-weight:600; color:var(--tx-3);
}
.co-cycle button.is-on{ background:var(--ink); color:var(--paper); }
.co-cycle__save{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; opacity:.85; margin-left:6px; }

/* ── order summary ── */
.co-sum{ border:2px solid var(--ink); border-radius:12px; padding:20px 20px 18px; background:var(--paper-2); }
.co-row{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:9px 0; font-size:14.5px; color:var(--tx-2); }
.co-row + .co-row{ border-top:1px solid var(--hair); }
/* NOT nowrap. The rate row carries words as well as a figure ("฿1,900 per
   branch per month") and at 390px the English string is wider than the column,
   so nowrap pushed the whole page sideways. Only the grand total, which is
   digits alone, is safe to keep on one line. */
.co-row__v{ font-family:var(--mono); font-weight:600; color:var(--tx); text-align:right; }
.co-total{ margin-top:12px; padding-top:14px; border-top:3px solid var(--ink); display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.co-total__l{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-family:var(--mono); color:var(--tx-3); }
.co-total__v{ font-size:28px; font-weight:800; letter-spacing:-.03em; color:var(--tx); white-space:nowrap; }
.co-total__u{ font-size:13px; font-weight:600; color:var(--tx-3); margin-left:4px; letter-spacing:0; }
.co-sum__note{ margin:12px 0 0; font-size:12.5px; line-height:1.6; color:var(--tx-3); }

/* ── payment rails ── */
.co-rails{ display:grid; gap:12px; }
.co-rail{
  display:flex; align-items:center; gap:14px; width:100%;
  min-height:60px; padding:12px 18px; text-align:left;
  border:1.5px solid var(--bd); border-radius:11px; background:var(--paper);
  font:inherit; color:var(--tx); cursor:pointer; text-decoration:none;
}
.co-rail:hover{ border-color:var(--ink); }
.co-rail--go{ background:var(--teal); border-color:var(--teal); color:#fff; }
.co-rail--go:hover{ filter:brightness(.94); border-color:var(--teal); }
.co-rail__t{ display:block; font-size:15px; font-weight:700; letter-spacing:-.01em; }
.co-rail__s{ display:block; margin-top:2px; font-size:12.5px; font-weight:500; opacity:.82; }
.co-rail__ic{ flex:0 0 auto; width:26px; height:26px; }
/* Off, but present. A payment method that appears the day it opens teaches the
   screen twice. One that was always visible teaches it once. */
.co-rail--off{ cursor:not-allowed; opacity:.55; background:var(--paper-2); }
.co-rail--off:hover{ border-color:var(--bd); }
.co-rail__soon{
  margin-left:auto; flex:0 0 auto; font-family:var(--mono); font-size:9.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--tx-4);
  border:1px solid var(--bd); border-radius:5px; padding:4px 7px; white-space:nowrap;
}

/* ── the multi-branch sentence ──
   Not a rail and not a control: this page cannot price two branches, and a
   button that only says "go somewhere else" competes with the one that works.
   It stays visible in the quote state too, where it is the better answer. */
.co-more{ margin:14px 0 0; font-size:13px; line-height:1.65; color:var(--tx-3); }
.co-more a{ color:var(--teal); font-weight:600; }

/* ── quote path: shown instead of the rails above the self-serve ceiling ── */
.co-quote{ display:none; border:2px dashed var(--bd); border-radius:12px; padding:20px; }
body.is-quote .co-quote{ display:block; }
body.is-quote .co-rails{ display:none; }
.co-quote__h{ margin:0 0 8px; font-size:16px; font-weight:800; letter-spacing:-.01em; }
.co-quote__p{ margin:0 0 16px; font-size:14px; line-height:1.65; color:var(--tx-2); }

/* ── after payment / small print ── */
.co-after{ display:grid; grid-template-columns:1fr 1fr; gap:16px 26px; }
@media (max-width:640px){ .co-after{ grid-template-columns:1fr; } }
.co-after h4{
  margin:0 0 5px; font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--tx-4);
}
.co-after p{ margin:0; font-size:13.5px; line-height:1.65; color:var(--tx-2); }
.co-fine{ margin:26px 0 0; font-size:12.5px; line-height:1.7; color:var(--tx-3); }
.co-fine a{ color:var(--teal); }