/* WorkCo - Pricing page (light rebuild, 2026-08-05).
   Loads AFTER chain.css and inherits its design system: tokens, type, nav,
   buttons, .sec/.wrap, .rv reveal, .lead, .footer. Nothing redefined here
   except components this page alone needs.

   The page argument, in order: value header with the billing toggle ->
   the three plans PRICED SIDE BY SIDE (own OA anchored as the recommended
   one, so the ฿1,900-vs-฿1,500 comparison happens in one glance) ->
   the itemised comparison table -> why own OA -> what it replaces ->
   calculator -> the LINE bill stated plainly -> FAQ -> enterprise -> lead.

   Everything is on light paper. No dark slabs: the old dark own-OA block
   buried the number we most want customers to see. */

/* ── billing period switch: .bwm shows monthly, .bwy shows annual ──────── */
.bwy{display:none}
body.is-annual .bwm{display:none}
body.is-annual .bwy{display:inline}

/* ── header: light, value first ─────────────────────────────────────────── */
.phead{padding:clamp(140px,18vh,190px) 0 clamp(20px,3vh,36px);
  background:
    radial-gradient(52% 46% at 82% 4%,rgba(13,148,136,.075),transparent 70%),
    radial-gradient(40% 40% at 8% 30%,rgba(13,148,136,.05),transparent 70%),
    var(--paper)}
.phead__inner{max-width:820px;margin:0 auto;text-align:center}
.phead__h{font-size:clamp(36px,5.4vw,64px);font-weight:700;line-height:1.18;
  color:var(--tx);margin:16px 0 20px;letter-spacing:-.018em}
.phead__h em{font-style:italic;font-family:var(--serif);font-weight:600;color:var(--teal)}
/* zh must not break inside 取代: keep the accent phrase on one line */
body[data-lang="zh"] .phead__h em{white-space:nowrap}
.phead__sub{font-size:clamp(16px,1.5vw,18.5px);color:var(--tx-2);line-height:1.8;
  max-width:62ch;margin:0 auto}
.phead__note{font-size:13.5px;color:var(--tx-3);margin-top:18px;line-height:1.7}

/* the toggle: one pill, two states, the saving named on the annual side */
.bill{display:inline-flex;background:#fff;border:1px solid var(--bd);border-radius:999px;
  padding:5px;margin-top:32px;box-shadow:var(--shadow-sm)}
.bill__opt{display:inline-flex;align-items:center;gap:9px;font-family:inherit;
  font-size:15px;font-weight:600;color:var(--tx-3);background:transparent;border:0;
  border-radius:999px;padding:11px 22px;cursor:pointer;
  transition:background .22s var(--ease),color .22s var(--ease)}
.bill__opt.is-on{background:var(--tx);color:#fff}
.bill__save{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--teal);background:rgba(13,148,136,.1);
  padding:4px 9px;border-radius:999px;white-space:nowrap}
.bill__opt.is-on .bill__save{color:var(--teal-bright);background:rgba(45,212,191,.16)}

/* ── the three plans, side by side ─────────────────────────────────────── */
.sec--plans{padding-top:clamp(36px,5vh,56px)}
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.pcard{position:relative;background:#fff;border:1px solid var(--bd);border-radius:var(--r-md);
  padding:30px 26px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm)}
.pcard--rec{border-color:var(--teal);
  box-shadow:0 0 0 1.5px var(--teal),var(--shadow-lg)}
@media(min-width:1001px){.pcard--rec{transform:translateY(-10px)}}
.pc__badge{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  background:var(--teal);color:#fff;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;padding:6px 16px;border-radius:999px;
  white-space:nowrap;box-shadow:var(--shadow-sm)}
.pc__tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--tx-3);margin-bottom:10px}
.pc__tag--teal{color:var(--teal)}
.pcard--rec .pc__tag{margin-top:6px}
.pc__name{font-size:17.5px;font-weight:700;color:var(--tx);line-height:1.45;margin-bottom:10px}
.pc__who{font-size:14.5px;color:var(--tx-2);line-height:1.7;margin-bottom:20px}
.pc__price{padding-top:18px;border-top:1px solid var(--bd)}
.pc__price b{display:block;font-size:clamp(31px,3vw,39px);font-weight:700;line-height:1.1;
  color:var(--tx);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pc__per{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tx-3);display:block;margin-top:7px}
.pc__band{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  font-size:13.5px;color:var(--tx-2);line-height:1.6;padding:10px 0;
  border-bottom:1px dashed var(--bd)}
.pc__band:first-of-type{margin-top:14px}
.pc__band b{font-weight:700;color:var(--tx);white-space:nowrap;font-variant-numeric:tabular-nums}
.pc__band--plain{color:var(--tx-3);font-size:12.5px}
.pc__list{list-style:none;display:grid;gap:11px;margin:18px 0 22px}
.pc__list li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.6;
  color:var(--tx-2)}
.pc__list svg{flex-shrink:0;margin-top:4.5px;color:var(--teal)}
.pc__no{color:var(--tx-3)}
.pc__dash{flex-shrink:0;width:14px;text-align:center;color:var(--tx-3);font-weight:700;
  margin-top:1px}
.pc__setup{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  background:var(--paper-2);border-radius:var(--r-sm);padding:12px 15px;
  font-size:13px;color:var(--tx-2);line-height:1.55;margin-bottom:20px}
.pc__setup s{color:var(--tx-3);margin-right:2px}
.pc__fee{white-space:nowrap}
.pc__fee b{font-weight:700;color:var(--tx);font-variant-numeric:tabular-nums}
.pc__cta{margin-top:auto;width:100%}
.pc__risk{font-size:12.5px;color:var(--tx-3);line-height:1.65;margin-top:12px;text-align:center}
.pc__risk--center{text-align:center;margin-top:14px}

.pnote{font-size:13.5px;color:var(--tx-3);line-height:1.7;margin-top:20px;max-width:76ch}

/* ── true social proof: the only claims we can stand behind ────────────── */
.proof{display:flex;flex-wrap:wrap;gap:0;margin-top:clamp(36px,5vw,54px);
  border-top:1px solid var(--bd);padding-top:26px}
.proof__item{display:flex;gap:14px;align-items:baseline;flex:1 1 240px;
  padding-right:clamp(20px,3vw,44px);margin-right:clamp(20px,3vw,44px);
  border-right:1px solid var(--bd)}
.proof__item:last-child{border-right:0;margin-right:0;padding-right:0}
.proof__item b{font-size:clamp(28px,3vw,38px);font-weight:700;color:var(--teal);
  line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.proof__item>span{font-size:13.5px;color:var(--tx-2);line-height:1.6;max-width:26ch}

/* ── market blocks ───────────────────────────────────────────────────────
   Same contract the homepage uses: a Thai reader is in Thailand and sees
   Thailand, a Chinese reader is in Taiwan and sees Taiwan, and English is the
   only view where both markets are on screen, so it is the only view that
   needs country labels. */
body[data-lang="zh"] .mkt--th{display:none}
body[data-lang="th"] .mkt--tw{display:none}
/* Taiwan is early access and free, so the baht billing toggle and the
   three-plan comparison have nothing to say to a zh reader */
body[data-lang="zh"] .bill,body[data-lang="zh"] .phead__note,
body[data-lang="zh"] #compare,body[data-lang="zh"] a[href="#compare"]{display:none}
.mkt+.mkt{margin-top:clamp(34px,4.4vw,60px)}
.proof+.mkt{margin-top:clamp(34px,4.4vw,60px)}
.mkt__label{display:none;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tx-3);padding-bottom:13px;margin-bottom:24px;
  border-bottom:1px solid var(--bd)}
body[data-lang="en"] .mkt__label{display:block}

/* Taiwan has no published ladder yet, so it gets one honest statement card
   rather than invented figures. */
.twcard{background:#fff;border:1px solid var(--bd);border-radius:var(--r-md);
  padding:clamp(26px,3.2vw,40px);display:grid;grid-template-columns:1fr auto;
  gap:30px;align-items:center;box-shadow:var(--shadow-sm)}
.twcard__free{display:flex;align-items:baseline;gap:9px;margin-bottom:13px}
.twcard__free b{font-size:clamp(27px,3vw,35px);font-weight:700;line-height:1.1;letter-spacing:-.02em}
.twcard__free span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal)}
.twcard h3{font-size:19px;font-weight:700;margin-bottom:9px;line-height:1.4}
.twcard p{font-size:15.5px;color:var(--tx-2);line-height:1.75;max-width:58ch}
.twcard p+p{margin-top:12px}

/* ── comparison table: the itemised difference ─────────────────────────── */
.cmpwrap{overflow-x:auto;background:#fff;border:1px solid var(--bd);
  border-radius:var(--r-md);box-shadow:var(--shadow-sm);
  -webkit-overflow-scrolling:touch}
.cmp{width:100%;border-collapse:collapse;min-width:720px;font-size:14px}
.cmp th,.cmp td{padding:14px 18px;border-bottom:1px solid var(--bd);
  vertical-align:top;line-height:1.6;text-align:left}
.cmp thead th{vertical-align:bottom;padding-top:22px;padding-bottom:16px}
.cmp thead th:not(.cmp__feat){width:21%}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp__feat{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx-3);font-weight:500}
.cmp__plan{display:block;font-size:14.5px;font-weight:700;color:var(--tx);line-height:1.4}
.cmp__pp{display:block;font-family:var(--mono);font-size:11.5px;color:var(--tx-3);
  margin-top:5px;font-variant-numeric:tabular-nums}
.cmp__pp i{font-style:normal}
.cmp__rectag{display:inline-block;background:var(--teal);color:#fff;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;margin-bottom:8px}
.cmp .is-rec{background:rgba(13,148,136,.05)}
.cmp thead .is-rec{box-shadow:inset 0 2px 0 var(--teal)}
.cmp tbody th[scope="row"]{font-weight:500;color:var(--tx);font-size:14px;max-width:30ch}
/* phones scroll the table sideways; the feature names stay pinned so a
   scrolled column never loses its label */
.cmp thead th.cmp__feat,.cmp tbody th[scope="row"]{position:sticky;left:0;background:#fff;
  z-index:2;box-shadow:1px 0 0 var(--bd)}
.cmp__cat th{position:static;box-shadow:none}
.cmp__cat th span{position:sticky;left:18px;display:inline-block}
.cmp__cat th{background:var(--paper-2);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--tx-3);font-weight:500;
  padding-top:12px;padding-bottom:12px}
.cmp .ck{color:var(--teal)}
.cmp__no{color:var(--tx-3);font-weight:700}
.cmp td s{color:var(--tx-3)}
.cmp td b{font-weight:700;color:var(--tx)}
.cmp__ctas{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
  margin-top:clamp(26px,3.4vw,38px)}

/* ── own OA: why we recommend it. Light now: the plan we want chosen must
   sit in daylight, not in a separate dark room. ─────────────────────────── */
.oa{background:#fff;border:1px solid var(--bd);border-radius:var(--r-lg);
  overflow:hidden;margin-top:8px;box-shadow:var(--shadow-sm)}
.oa__top{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,4vw,60px);
  padding:clamp(36px,4.6vw,60px) clamp(26px,4vw,58px)}
.oa__kick{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal);margin-bottom:16px}
.oa__h{font-size:clamp(25px,3.2vw,38px);font-weight:700;line-height:1.32;color:var(--tx);
  margin-bottom:18px}
.oa__h em{font-style:italic;font-family:var(--serif);font-weight:600;color:var(--teal)}
.oa__body{font-size:16.5px;line-height:1.8;color:var(--tx-2);max-width:52ch}
.oa__incl{list-style:none;display:grid;gap:13px;align-content:start}
.oa__incl li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.6;
  color:var(--tx)}
.oa__incl svg{flex-shrink:0;margin-top:5px;color:var(--teal)}

/* the per-location ladder, read as a row of steps */
.oa__rates{border-top:1px solid var(--bd);padding:clamp(28px,3.4vw,44px) clamp(26px,4vw,58px)}
.oa__rates .mkt__label{margin-bottom:20px}
.oa__ratehead{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:baseline;margin-bottom:26px}
.oa__ratehead h3{font-size:19px;font-weight:700;color:var(--tx)}
.oa__ratehead span{font-size:14.5px;color:var(--tx-3)}
.locs{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--bd)}
.locs--four{grid-template-columns:repeat(4,1fr)}
.loc{padding:22px 18px 6px;border-right:1px solid var(--bd);position:relative}
.loc:last-child{border-right:0}
.loc:first-child{padding-left:0}
.loc::before{content:"";position:absolute;top:-1px;left:0;width:22px;height:2px;background:var(--teal)}
.loc__n{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--teal);margin-bottom:11px}
.loc__p{font-size:clamp(19px,2.1vw,25px);font-weight:700;color:var(--tx);line-height:1.2;
  letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.loc__pm{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tx-3);display:block;margin-top:5px}
/* the LINE bill named right under every own-OA ladder, so it can never read
   as a hidden charge */
.oa__linefee{font-size:13.5px;color:var(--tx-3);line-height:1.7;margin-top:20px;max-width:70ch}

/* setup fee, stated as work delivered rather than a toll */
.oa__setup{border-top:1px solid var(--bd);padding:clamp(26px,3.2vw,40px) clamp(26px,4vw,58px);
  display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;
  background:var(--paper-2)}
.oa__setupbody h4{font-size:17px;font-weight:700;color:var(--tx);margin-bottom:8px}
.oa__setupbody p{font-size:15px;line-height:1.75;color:var(--tx-2);max-width:56ch}
.oa__fee{text-align:right;white-space:nowrap}
.oa__fee b{display:block;font-size:clamp(26px,2.8vw,34px);font-weight:700;color:var(--tx);
  line-height:1.15;font-variant-numeric:tabular-nums}
.oa__fee s{display:block;font-size:16px;color:var(--tx-3);margin-bottom:4px}
.oa__fee span{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--teal);display:block;margin-top:7px}

/* ── what WorkCo replaces: the four-systems reframe ────────────────────── */
.swap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);margin-top:8px;
  align-items:start}
.swap__side{display:flex;flex-direction:column;gap:14px}
.swap__lab{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tx-3);padding-bottom:14px;border-bottom:1px solid var(--bd)}
.swap__side--wc .swap__lab{color:var(--teal)}
.sysrow{display:flex;gap:16px;align-items:baseline;padding:17px 0;border-bottom:1px solid var(--bd)}
.sysrow:last-child{border-bottom:0}
.sysrow__n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--tx-3);
  flex-shrink:0;width:22px}
.sysrow__t{font-size:16.5px;font-weight:600;color:var(--tx);display:block;margin-bottom:3px}
.sysrow__d{font-size:14.5px;color:var(--tx-3);line-height:1.65}
.swap__side--wc{background:#fff;border:1px solid var(--bd);border-radius:var(--r-md);
  padding:28px clamp(22px,2.6vw,32px);box-shadow:var(--shadow-sm)}
.swap__side--wc .sysrow__n{color:var(--teal)}
.swap__one{margin-top:22px;padding-top:22px;border-top:1px solid var(--bd);
  font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.6;color:var(--tx)}

/* ── enterprise ─────────────────────────────────────────────────────────── */
.sec--ent{padding-top:clamp(30px,4vh,48px);padding-bottom:clamp(56px,7vh,84px)}
.ent{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;
  background:#fff;border:1px solid var(--bd);border-radius:var(--r-md);
  padding:clamp(28px,3.4vw,42px) clamp(24px,3.4vw,44px)}
.ent h3{font-size:21px;font-weight:700;margin-bottom:10px}
.ent p{font-size:15.5px;color:var(--tx-2);line-height:1.75;max-width:62ch}
.ent__list{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px}
.ent__list li{font-size:14px;color:var(--tx-3);display:flex;gap:8px;align-items:center}
.ent__list li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--teal);
  flex-shrink:0}

/* ── calculator ─────────────────────────────────────────────────────────── */
.calc{background:#fff;border:1px solid var(--bd);border-radius:var(--r-lg);
  padding:clamp(30px,3.6vw,48px);box-shadow:var(--shadow-sm);margin-top:8px}
.calc__grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:30px}
.calc__f label{display:block;font-size:14px;font-weight:600;color:var(--tx-2);margin-bottom:11px}
.calc__f select{width:100%;font-family:inherit;font-size:16.5px;color:var(--tx);
  padding:15px 16px;border:1.5px solid var(--bd);border-radius:var(--r-sm);background:#fff;
  cursor:pointer;transition:border-color .18s}
.calc__f select:hover{border-color:var(--tx-3)}
.calc__f select:focus{outline:none;border-color:var(--teal)}
.calc__out{border-top:1px solid var(--bd);padding-top:28px;
  display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center}
.calc__plan{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--teal);margin-bottom:10px}
.calc__what{font-size:19px;font-weight:700;color:var(--tx);margin-bottom:8px;line-height:1.4}
.calc__why{font-size:14.5px;color:var(--tx-2);line-height:1.7;max-width:52ch}
.calc__num{text-align:right;white-space:nowrap}
.calc__num b{display:block;font-size:clamp(30px,3.6vw,44px);font-weight:700;line-height:1.1;
  color:var(--tx);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.calc__num span{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tx-3);display:block;margin-top:6px}
/* enterprise: words, not a figure, so it must not shout at heading size */
.calc__num.is-text b{font-size:clamp(21px,2.3vw,27px);color:var(--teal)}
.calc__plus{font-size:13.5px;color:var(--tx-3);margin-top:8px;display:block}

/* ── the LINE bill, stated plainly ──────────────────────────────────────── */
.lineown{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,56px);align-items:start}
.lineown__box{background:#fff;border:1px solid var(--bd);border-left:3px solid var(--line-green);
  border-radius:var(--r-sm);padding:26px 28px}
.lineown__box h4{font-size:16.5px;font-weight:700;margin-bottom:10px}
.lineown__box p{font-size:15px;color:var(--tx-2);line-height:1.8}
.lineown__own{margin-top:18px;padding-top:18px;border-top:1px solid var(--bd);
  font-size:15px;color:var(--tx-2);line-height:1.8}
.lineown__own b{color:var(--tx)}

/* ── FAQ on light paper (chain.css styles it for ink grounds) ───────────── */
#faq .faq__item{background:#fff;border-color:var(--bd)}
#faq .faq__item:hover{background:#fff;border-color:var(--tx-3)}
#faq .faq__item[open]{background:#fff;border-color:var(--teal)}
#faq .faq__item summary{color:var(--tx)}
#faq .faq__item summary svg{color:var(--tx-3)}
#faq .faq__item[open] summary svg{color:var(--teal)}
#faq .faq__body{color:var(--tx-2)}
#faq .faq__body a{color:var(--teal)}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media(max-width:1000px){
  .pcards{grid-template-columns:1fr;gap:26px;max-width:560px;margin:0 auto}
  /* no order override: cards stack in DOM order (Free first). The old
     `.pcard--rec{order:-1}` was written when Standard was card 1 and the
     recommended paid card sat in the middle; under v9.3 it pushed Own OA
     above the Free card on phones (Dan, 2026-08-24). */
  .oa__top{grid-template-columns:1fr;gap:32px}
  .locs{grid-template-columns:repeat(3,1fr)}
  .loc{border-bottom:1px solid var(--bd);padding-left:18px}
  .loc:first-child{padding-left:18px}
  .loc:nth-child(3n){border-right:0}
  .loc:nth-last-child(-n+2){border-bottom:0}
}
@media(max-width:820px){
  .phead{padding-top:120px}
  .twcard{grid-template-columns:1fr;gap:22px}
  .swap{grid-template-columns:1fr;gap:34px}
  .calc__grid{grid-template-columns:1fr}
  .calc__out{grid-template-columns:1fr;gap:20px}
  .calc__num{text-align:left}
  .oa__setup{grid-template-columns:1fr;gap:20px}
  .oa__fee{text-align:left}
  .ent{grid-template-columns:1fr;gap:22px}
  .lineown{grid-template-columns:1fr;gap:26px}
  .proof{flex-direction:column;gap:18px}
  .proof__item{border-right:0;margin-right:0;padding-right:0;flex-basis:auto}
  .proof__item>span{max-width:none}
  .cmp__ctas .btn{width:100%}
}
@media(max-width:560px){
  .cmp tbody th[scope="row"]{min-width:150px;max-width:170px}
  .bill{display:flex;max-width:360px;margin-left:auto;margin-right:auto}
  .bill__opt{flex:1;justify-content:center;padding:11px 10px;font-size:14px}
  .locs{grid-template-columns:repeat(2,1fr)}
  .loc:nth-child(3n){border-right:1px solid var(--bd)}
  .loc:nth-child(2n){border-right:0}
  .loc:nth-last-child(-n+2){border-bottom:1px solid var(--bd)}
  .loc:last-child{border-bottom:0}
}
@media(prefers-reduced-motion:reduce){
  html.js .rv{opacity:1;transform:none;transition:none}
  .bill__opt{transition:none}
}

/* The saving, stated on the card. Own OA overtakes Standard from the second
   shop because LINE charges ONE fee for the whole chain while we charge per
   shop. At a single small shop it is about ฿970 WORSE, which is why the
   headline says "from your second shop" and never a flat "cheaper". */
.pc__save{background:rgba(13,148,136,.07);border:1px solid rgba(13,148,136,.20);
  border-radius:var(--r-sm,12px);padding:12px 14px;margin:2px 0 4px}
.pc__save b{display:block;font-size:14px;font-weight:700;color:var(--teal-deep,#115E59);margin-bottom:4px}
.pc__save span{display:block;font-size:12.5px;line-height:1.55;color:var(--tx-2,#475569)}
/* Secondary route for someone who arrives already sold - present, not loud. */
.pc__second{margin-top:-6px;text-align:center}
.pc__second a{font-size:12.5px;color:var(--tx-3,#64748B);text-decoration:underline;text-underline-offset:3px}
.pc__second a:hover{color:var(--teal,#0D9488)}

/* Calculator: both plans, always visible. The own-OA line is quoted ALL-IN
   (our fee + LINE's own bill) because that is the only comparison a customer
   can act on - our invoice line alone is what made "cheaper per month" wrong. */
.calc__vs{margin-top:18px;padding-top:16px;border-top:1px solid var(--bd,#E4E2DA)}
.calc__vs[hidden]{display:none}
.calc__vsrow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:7px 0}
.calc__vsrow+.calc__vsrow{border-top:1px dashed rgba(7,12,16,.09)}
.calc__vslabel{font-size:13.5px;color:var(--tx-2,#475569)}
.calc__vsrow b{font-size:16px;font-weight:700;white-space:nowrap}
.calc__vsnote{margin-top:11px;font-size:12.5px;line-height:1.55;color:var(--teal-deep,#115E59);font-weight:600}
/* Per-employee, the number an owner actually compares. Shown at the top of the
   chosen bucket, with the headcount it assumes stated, because a per-head
   figure without its assumption is not checkable. */
.calc__peremp{display:block;margin-top:6px;font-size:12.5px;color:var(--tx-3,#64748B);font-weight:500}
.calc__vsnum{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.calc__vsnum i{font-style:normal;font-size:11.5px;color:var(--tx-3,#64748B);white-space:nowrap}