/* ════════════════════════════════════════════════════════════════
   TARANG · page-pricing.css   (2026-08-08)
   The structural pass for the two pages a buyer reads with a pen in hand:
     pricing.html   - the money page
     security.html  - the page IT, HR and legal open before signing

   Linked LAST on both, after tarang.css, so it wins ties on equal
   specificity. It does not touch tarang.css or chain.css.

   What this file does, in one line: the boxes stop being boxes. Every
   structure on these two pages is carried by an ink rule, every price and
   every permission is set as a figure on a ledger, and the whole document
   sits on ONE paper ground that html.dark flips in a single move.

   Nothing here changes a price, a legal sentence, or a factual claim.
   ════════════════════════════════════════════════════════════════ */

/* ── 0 · ONE PAPER GROUND ────────────────────────────────────────
   chain.css maps .sec--tint to --paper-2. On a page with four tinted
   sections that reads as banding, which is the exact thing Dan killed.
   The ruled openers already separate the sections, so the tint is not
   doing any work: one ground, top to bottom. */
.sec--tint,
.lead,
.phead,
.shero{ background:var(--paper); color:var(--tx); }

/* the lead block closes the document, so it earns a section number too. Its
   own 2px top rule comes off: the kicker inside now draws it, and two rules
   stacked 20px apart read as a mistake. */
.lead{ counter-increment:sec; }
.lead__aside{ border-top:0; padding-top:0; margin-top:0; gap:0; display:block; }
.lead__aside .kicker{ margin-bottom:18px; }

/* chain.css sweeps .fgrid into its "boxes become ruled cells" group, which is
   right for the chain page's ruled .fgrid and wrong here: .field is not a
   ruled cell, so all it produced was a SECOND 2px rule 20px under the form's
   own one, a stray left hairline, and two inputs welded together with gap:0. */
.fgrid{ border-top:0; border-left:0; gap:18px 20px; }

/* ── 1 · THE MASTHEAD ────────────────────────────────────────────
   Both pages opened on a centred/plain heading with no page rule. They now
   open the way index.html does: a 3px ink rule, a mono rubric under it on
   the left, the reading conditions on the right. */
.phead{ padding:clamp(120px,15vh,164px) 0 clamp(24px,3.4vw,40px); }
.shero{ padding:clamp(120px,15vh,164px) 0 clamp(46px,6vw,74px); border-bottom:0; }
.phead__inner{ max-width:none; margin:0; text-align:left; }
.shero__inner{ max-width:none; }

.tg-sec--page{ margin-bottom:0; }
.phead__h,
.shero__h{
  font-family:var(--font);
  font-size:clamp(38px,6.4vw,84px);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.045em;
  color:var(--tx);
  margin:clamp(24px,3.6vw,46px) 0 clamp(20px,2.4vw,28px);
  max-width:19ch;
}
body[data-lang="th"] .phead__h, body[data-lang="zh"] .phead__h,
body[data-lang="th"] .shero__h, body[data-lang="zh"] .shero__h{
  line-height:1.24; letter-spacing:-.02em;
}
/* the accent was a serif italic - a voice from the retired system */
.phead__h em,
.shero__h em{ font-style:normal; font-family:var(--font); font-weight:700; color:var(--teal); }
.phead__sub,
.shero__sub{
  font-size:clamp(16px,1.55vw,18.5px); line-height:1.78; color:var(--tx-2);
  max-width:58ch; margin:0; text-wrap:pretty;
}
.phead__note{
  font-size:13px; line-height:1.7; color:var(--tx-3);
  margin-top:20px; padding-top:14px;
  border-top:1px solid var(--hair); max-width:74ch;
}

/* the hero chips on security become marks of record */
.shero__meta{ margin-top:clamp(26px,3.2vw,36px); gap:8px; }
.shero__chip{
  background:transparent; border:1.5px solid var(--hair); border-radius:0;
  box-shadow:none; padding:5px 9px; gap:7px;
  font-family:var(--mono); font-size:10px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; line-height:1.4;
  color:var(--tx-2); white-space:normal;
}
.shero__chip svg{ width:13px; height:13px; color:var(--teal); }

/* ── 2 · THE BILLING SWITCH ──────────────────────────────────────
   Was a 999px pill inside a 999px pill. It is a PICKER, so Tarang says
   radius 8 and an ink outline on the chosen side. Class names and the
   .is-on hook that pricing.js writes are untouched. */
.bill{
  background:transparent; border:0; border-radius:0; box-shadow:none;
  padding:0; gap:8px; margin-top:clamp(24px,3vw,34px);
}
.bill__opt{
  border:1.5px solid var(--hair); border-radius:var(--r);
  font-family:var(--mono); font-size:11.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--tx-3); background:transparent; padding:10px 16px; gap:8px;
}
.bill__opt:hover{ color:var(--tx); border-color:var(--tx-3); }
.bill__opt.is-on{
  background:transparent; color:var(--ink);
  border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink);
}
.bill__save{
  border-radius:0; border:1.5px solid var(--teal);
  background:var(--teal-soft); color:var(--teal-deep);
  font-family:var(--mono); font-size:9.5px; font-weight:700;
  letter-spacing:.06em; padding:2px 6px; line-height:1.35;
}
.bill__opt.is-on .bill__save{ color:var(--teal-deep); background:var(--teal-soft); }

/* ── 3 · THE PLAN COLUMNS ────────────────────────────────────────
   Never three cards side by side. One table with two hairlines in it.
   The recommended column carries an ink top edge and its stamp sits ON
   that rule - it is a printed mark, not a badge floating over a card. */
.pcards{
  grid-template-columns:repeat(3,1fr); gap:0; align-items:stretch;
  border-top:2px solid var(--rule); border-left:1px solid var(--hair);
}
.pcard{
  background:none; border:0;
  border-right:1px solid var(--hair); border-bottom:1px solid var(--hair);
  border-radius:0; box-shadow:none; padding:28px 24px 26px;
}
.pcard--rec{
  border-top:3px solid var(--ink); margin-top:-2px;
  background:rgba(15,17,21,.022); box-shadow:none;
}
@media(min-width:1001px){ .pcard--rec{ transform:none; } }
.pc__badge{
  position:absolute; top:-3px; left:0; transform:none;
  background:var(--ink); color:var(--on-ink);
  font-family:var(--mono); font-size:9.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  padding:4px 9px; border-radius:0; box-shadow:none; white-space:nowrap;
}
.pcard--rec .pc__tag{ margin-top:20px; }

/* the plan tag is a stamp: square, bordered, mono, never tappable */
.pc__tag{
  align-self:flex-start; margin-bottom:12px;
  border:1.5px solid var(--hair); color:var(--tx-3);
  font-size:10px; font-weight:700; letter-spacing:.06em; line-height:1.35;
  padding:3px 7px; border-radius:0; background:transparent;
}
.pc__tag--teal{ border-color:var(--teal); color:var(--teal-deep); background:var(--teal-soft); }
.pc__name{ font-size:18px; font-weight:700; line-height:1.4; letter-spacing:-.015em; }
.pc__who{ font-size:14.5px; line-height:1.7; color:var(--tx-2); margin-bottom:18px; }

/* the price, set like it matters */
.pc__price{ padding-top:16px; border-top:1px solid var(--hair); }
.pc__price .tg-fig{ display:block; font-size:clamp(30px,3.3vw,44px); }
.pc__price .tg-cur{ font-size:.42em; }
.pc__per{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--tx-3); display:block; margin-top:8px;
}
.pc__price--talk b{
  display:block; font-size:clamp(19px,2vw,25px); font-weight:700;
  letter-spacing:-.02em; color:var(--teal-deep); line-height:1.3;
}

/* bands + lists become ruled rows: no dashed borders, no grey slabs */
.pc__band{
  border-bottom:1px solid var(--hair); padding:11px 0;
  font-size:13.5px; color:var(--tx-2);
}
.pc__band:first-of-type{ margin-top:14px; }
.pc__band b{ font-family:var(--mono); font-size:13px; font-weight:700; color:var(--ink); }
.pc__band--plain{ font-size:12.5px; color:var(--tx-3); }
.pc__list{ gap:0; margin:16px 0 20px; border-top:1px solid var(--hair); }
.pc__list li{ padding:11px 0; border-bottom:1px solid var(--hair); align-items:flex-start; }
.pc__list li:last-child{ border-bottom:0; }
.pc__list svg{ margin-top:4px; }
.pc__dash{ color:var(--tx-4); font-family:var(--mono); }

/* the saving note: a ruled aside with a teal edge, not a teal panel */
.pc__save{
  background:none; border:0; border-left:3px solid var(--teal);
  border-radius:0; padding:2px 0 2px 14px; margin:16px 0 6px;
}
.pc__save b{ font-size:14px; color:var(--teal-deep); }
.pc__save span{ color:var(--tx-2); }

.pc__setup{
  background:none; border:0; border-radius:0;
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  padding:13px 0; margin-bottom:18px; font-size:13px;
}
.pc__setup s{ color:var(--tx-4); }
.pc__fee b{ font-family:var(--mono); font-size:15px; font-weight:700;
  letter-spacing:0; color:var(--ink); }
.pc__fee b .tg-cur{ font-size:1em; vertical-align:0; margin-right:0; color:inherit; }
.pc__risk{ font-size:12.5px; line-height:1.65; color:var(--tx-3); text-align:left; }
.pc__risk--center{ text-align:center; }
.pc__second{ text-align:left; margin-top:10px; }
.pc__second a{ color:var(--tx-3); text-underline-offset:3px; }
.pc__second a:hover{ color:var(--teal); }
.pnote{
  font-size:13px; line-height:1.75; color:var(--tx-3);
  margin-top:20px; padding-top:14px; border-top:1px solid var(--hair); max-width:86ch;
}

/* ── 4 · THE PROOF FIGURES ───────────────────────────────────────
   Three numbers that roll into place. Ink, not teal: on this page teal is
   reserved for the action, and a decorative teal numeral competes with it. */
.proof{
  border-top:2px solid var(--rule); border-left:1px solid var(--hair);
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  margin-top:clamp(34px,4.6vw,54px); padding-top:0;
}
.proof__item{
  display:block; flex:none; margin:0; padding:22px 22px 24px;
  border-right:1px solid var(--hair); border-bottom:1px solid var(--hair);
}
.proof__item b{
  display:block; font-family:var(--font); font-size:clamp(34px,4.4vw,58px);
  font-weight:700; letter-spacing:-.045em; line-height:1.05;
  font-variant-numeric:tabular-nums; color:var(--ink); margin-bottom:10px;
}
.proof__item > span{
  display:block; font-size:13.5px; line-height:1.65; color:var(--tx-2); max-width:30ch;
}

/* ── 5 · THE COMPARISON, AS A SPEC TABLE ─────────────────────────
   It was already a table wearing a white card. Take the card off and it is
   a ledger: a 2px rule under the head, hairlines between the entries, mono
   category straps, and the recommended column marked with an ink edge. */
.cmpwrap{
  background:none; border:0; border-radius:0; box-shadow:none; overflow-x:auto;
}
.cmp{ min-width:760px; font-size:14px; }
.cmp th,.cmp td{ padding:13px 16px; border-bottom:1px solid var(--hair); }
.cmp thead th{
  border-bottom:2px solid var(--rule);
  padding:0 16px 12px; vertical-align:bottom;
}
.cmp__feat{
  font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tx-4);
}
.cmp__plan{ font-size:14.5px; font-weight:700; color:var(--tx); letter-spacing:-.01em; }
.cmp__pp{
  font-family:var(--mono); font-size:11.5px; color:var(--tx-3);
  font-variant-numeric:tabular-nums; margin-top:6px;
}
/* the RECOMMENDED mark: a square ink stamp directly under the column rule */
.cmp__rectag{
  display:inline-block; background:var(--ink); color:var(--on-ink);
  border-radius:0; font-family:var(--mono); font-size:9px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; padding:3px 7px;
  line-height:1.35; margin-bottom:9px;
}
.cmp .is-rec{ background:rgba(15,17,21,.022); }
.cmp thead .is-rec{ box-shadow:inset 0 3px 0 var(--ink); }
.cmp tbody th[scope="row"]{ font-weight:500; color:var(--tx-2); font-size:14px; }
.cmp__cat th{
  background:none; border-top:2px solid var(--rule);
  border-bottom:1px solid var(--hair);
  font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tx-4);
  padding:22px 16px 9px;
}
.cmp .ck{ color:var(--teal); }
.cmp__no{ font-family:var(--mono); font-weight:400; color:var(--tx-4); }
.cmp td s{ color:var(--tx-4); }
/* the setup fee inside a table cell is a figure, but a table-cell-sized one:
   .tg-fig ships at 34px and would blow the row open */
.cmp td b{ font-family:var(--mono); font-size:14.5px; font-weight:700;
  letter-spacing:0; line-height:1.5; color:var(--ink); }
.cmp td b .tg-cur{ font-size:1em; vertical-align:0; margin-right:0; color:inherit; }
/* the pinned feature column: PAPER, not #fff, or dark mode paints a white
   stripe down the left of the table */
.cmp thead th.cmp__feat,
.cmp tbody th[scope="row"]{
  position:sticky; left:0; background:var(--paper); z-index:2;
  box-shadow:1px 0 0 var(--hair);
}
.cmp tbody tr:last-child th,
.cmp tbody tr:last-child td{ border-bottom:2px solid var(--rule); }
.cmp__ctas{ justify-content:flex-start; }

/* ── the comparison table on a PHONE ─────────────────────────────
   Measured, not guessed. At 390px the wrapper is 350px wide and the sticky
   feature column was taking 281 of them, because nothing constrained it and
   "The LINE account staff see" is a long label. That left 69px of a 160px plan
   column: the header read "STANDAR", the locations cell read "Not cappe". At
   360px it was 39px, a quarter of the column.

   The table already scrolls inside .cmpwrap and the page body never overflowed,
   so this is not a layout break - it is a column you cannot read. Cap the
   feature column, tighten the padding, and a WHOLE plan column fits with a
   slice of the next one showing, which is its own invitation to swipe. */
@media (max-width: 700px){
  /* table-layout:fixed is load-bearing. A width on a table cell is only a
     SUGGESTION under the default auto layout, and max-width is ignored outright
     - the first attempt set 122px and the column still measured 222px, because
     the longest label was allowed to size the column. Fixed layout makes the
     number mean what it says; overflow-wrap then stops a long word poking out. */
  /* min-width:0, not 600. table-layout:fixed sized the columns as percentages
     of 600px, so on a 390px phone the table was still 600px wide and slid
     sideways under the thumb of anyone scrolling the page. Dan, 2026-08-11:
     "the website on mobile ... moving left and right". Now it fits. */
  .cmp{ min-width:0; font-size:13.5px; table-layout:fixed; }
  /* break-word, not anywhere: "anywhere" breaks eagerly and turned
     "scheduling" into "schedulin g". break-word only splits a word that
     genuinely cannot fit on its own line. */
  .cmp th,.cmp td{ overflow-wrap:break-word; }
  .cmp th,.cmp td{ padding:11px 8px; }
  .cmp thead th{ padding:0 8px 10px; font-size:12px; }
  /* A price must never break. "฿12,500" was rendering as "฿12,50 / 0", which
     is worse than any layout problem it could have solved. Small enough to fit
     the column, and nowrap so it cannot be split whatever happens. */
  .cmp td b{ font-size:13px; white-space:nowrap; }
  /* The plan name sets its own size, so the th font-size above never reached
     it and "STANDARD" was still splitting into "STANDAR / D". A plan name is
     a proper noun; it wraps between words or not at all. */
  .cmp__plan{ font-size:12.5px; letter-spacing:-.01em; }
  .cmp__plan .en,.cmp__plan .th,.cmp__plan .zh{ overflow-wrap:normal; word-break:keep-all; }
  .cmp__pp{ font-size:11px; }
  .cmp__cat th{ padding:18px 10px 8px; }
  /* PERCENTAGES, and all four columns, or the arithmetic lands somewhere else.
     assets/pricing.css:147 locks every plan column to `width:21%`, so 3 x 21%
     = 63% is spoken for and the leftover 37% falls to the feature column - 222px
     of a 600px table, whatever pixel width is written here. Setting the feature
     column alone did nothing for exactly that reason. 20% + 3 x 26.6% = 99.8%.
     min-width:0 also unpicks pricing.css:333, which pins 150px under 560px. */
  /* 34/22/22/22. At 20% the feature column was 70px wide, minus padding
     50px, and every second label broke mid-word. The feature names are the
     longest strings in the table and the plan cells mostly hold a tick. */
  .cmp thead th:not(.cmp__feat){ width:22%; }
  .cmp thead th.cmp__feat,
  .cmp tbody th[scope="row"]{
    width:34%; min-width:0; max-width:none;
    font-size:12.5px; line-height:1.35;
  }
  .cmp thead th.cmp__feat{ width:34%; }
  .cmp__plan{ font-size:13.5px; }
  .cmp__pp{ font-size:11px; }
}

/* ── 6 · OWN OA ──────────────────────────────────────────────────
   One white sheet holding three sub-blocks became one ruled document. */
.oa{
  background:none; border:0; border-radius:0; box-shadow:none;
  overflow:visible; margin-top:0;
  border-top:2px solid var(--rule);
}
.oa__top{ padding:clamp(26px,3.4vw,42px) 0 clamp(28px,3.6vw,44px); }
.oa__kick{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--teal); margin-bottom:14px;
}
.oa__h{ font-size:clamp(25px,3.2vw,40px); font-weight:700; letter-spacing:-.03em; line-height:1.14; }
body[data-lang="th"] .oa__h, body[data-lang="zh"] .oa__h{ line-height:1.3; letter-spacing:-.015em; }
.oa__h em{ font-style:normal; font-family:var(--font); font-weight:700; color:var(--teal); }
.oa__incl{ gap:0; border-top:1px solid var(--hair); }
.oa__incl li{ padding:13px 0; border-bottom:1px solid var(--hair); font-size:15px; color:var(--tx-2); }
.oa__incl li:last-child{ border-bottom:0; }
.oa__incl svg{ margin-top:4px; }
.oa__rates{ border-top:1px solid var(--hair); padding:clamp(26px,3.2vw,40px) 0; }
.oa__ratehead h3{ font-size:19px; font-weight:700; letter-spacing:-.02em; }
.oa__ratehead span{ font-size:14px; color:var(--tx-3); max-width:64ch; }

/* the per-location ladder: a row of ruled cells with printed figures */
.locs{
  border-top:2px solid var(--rule); border-left:1px solid var(--hair); gap:0;
}
.locs .loc{
  padding:18px 16px 20px;
  border-right:1px solid var(--hair); border-bottom:1px solid var(--hair);
}
.locs .loc:first-child{ padding-left:16px; }
.loc::before{ display:none; }          /* the teal tick above each cell */
.loc__n{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tx-4); margin-bottom:12px;
  font-variant-numeric:tabular-nums;
}
.loc__p{ font-size:clamp(19px,2.1vw,26px); }
.loc__p .tg-cur{ font-size:.46em; }
.loc__pm{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--tx-3); display:block; margin-top:7px;
}
.oa__linefee,
.matrix__note{
  font-size:13px; line-height:1.75; color:var(--tx-3);
  margin-top:18px; max-width:86ch;
}
.oa__setup{
  background:none; border-top:2px solid var(--rule);
  padding:clamp(24px,3vw,36px) 0 0;
}
.oa__setupbody h4{ font-size:17px; font-weight:700; letter-spacing:-.015em; }
/* the setup figure must never break between its currency mark and its digits:
   the auto grid track was shrinking below max-content and folding the ฿ onto
   a line of its own */
.oa__setup{ grid-template-columns:minmax(0,1fr) max-content; }
/* laid out as a flex line, not an inline one: in a shrink-to-fit grid track the
   raised inline currency mark measured short, the track sized to the digits
   alone, and the ฿ ended up stacked above its own number */
.oa__fee b{
  display:flex; align-items:baseline; justify-content:flex-end; gap:3px;
  font-size:clamp(26px,2.9vw,38px); white-space:nowrap; line-height:1.1;
}
.oa__fee b .tg-cur{ font-size:.44em; vertical-align:baseline; margin-right:0; }
.oa__fee s{ font-family:var(--mono); font-size:13px; color:var(--tx-4); }
.oa__fee span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; color:var(--teal); }

/* ── 7 · WHAT IT REPLACES ────────────────────────────────────────
   Two columns of the same shape. The WorkCo side is marked by an ink edge
   rather than by being the only one in a white box. */
.swap__side--wc{
  background:none; border:0; border-radius:0; box-shadow:none;
  padding:0 0 0 clamp(18px,2.2vw,26px); border-left:3px solid var(--ink);
}
.swap__lab{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tx-3);
  padding-top:11px; padding-bottom:0; margin-bottom:6px;
  border-bottom:0; border-top:2px solid var(--rule);
}
.swap__side--wc .swap__lab{ color:var(--ink); }
.sysrow{ border-bottom:1px solid var(--hair); padding:16px 0; }
.sysrow__n{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  color:var(--tx-4); font-variant-numeric:tabular-nums;
}
.sysrow__t{ font-size:16px; font-weight:600; letter-spacing:-.01em; }
.sysrow__d{ font-size:14.5px; color:var(--tx-3); }
.swap__one{
  font-family:var(--font); font-style:normal; font-weight:600;
  font-size:18px; line-height:1.5; letter-spacing:-.015em; color:var(--tx);
  border-top:2px solid var(--rule); padding-top:20px; margin-top:20px;
}

/* ── 8 · THE CALCULATOR ──────────────────────────────────────────
   The one interactive thing on the page. Every id, class and data-* hook
   pricing.js reads is untouched; only the surfaces changed. */
.calc{
  background:none; border:0; border-radius:0; box-shadow:none;
  padding:0; margin-top:0;
  border-top:2px solid var(--rule); padding-top:clamp(24px,3vw,34px);
}
.calc__grid{
  margin-bottom:0; padding-bottom:clamp(24px,3vw,32px);
  border-bottom:1px solid var(--hair);
}
.calc__f label{
  font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--tx-3);
}
.calc__f select{
  background:var(--paper); color:var(--tx);
  border:1.5px solid var(--hair); border-radius:var(--r);
  font-size:16px; padding:14px 15px;
}
.calc__f select:hover{ border-color:var(--tx-3); }
.calc__f select:focus{ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.calc__out{ border-top:0; padding-top:clamp(24px,3vw,32px); }
.calc__plan{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--teal); margin-bottom:10px;
}
.calc__what{ font-size:19px; font-weight:700; letter-spacing:-.02em; line-height:1.4; }
.calc__why{ font-size:14.5px; line-height:1.72; color:var(--tx-2); max-width:56ch; }
.calc__num b{
  display:block; font-family:var(--font);
  font-size:clamp(34px,4.4vw,60px); font-weight:700;
  letter-spacing:-.045em; line-height:1.04;
  font-variant-numeric:tabular-nums; color:var(--ink);
}
body[data-lang="th"] .calc__num b,
body[data-lang="zh"] .calc__num b{ line-height:1.18; letter-spacing:-.02em; }
.calc__num.is-text b{
  font-size:clamp(21px,2.4vw,30px); color:var(--teal-deep);
  letter-spacing:-.01em; line-height:1.3;
}
.calc__num span{
  font-family:var(--mono); font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--tx-3);
}
.calc__peremp{
  font-size:12.5px; color:var(--tx-3); margin-top:9px;
  font-variant-numeric:tabular-nums;
}
.calc__vs{ margin-top:20px; padding-top:0; border-top:2px solid var(--rule); }
.calc__vsrow{ padding:12px 0; border-bottom:1px solid var(--hair); }
.calc__vsrow + .calc__vsrow{ border-top:0; }
.calc__vslabel{ font-size:14px; color:var(--tx-2); }
.calc__vsrow b{
  font-family:var(--font); font-size:19px; font-weight:700;
  letter-spacing:-.025em; font-variant-numeric:tabular-nums; color:var(--ink);
}
.calc__vsnum i{ font-family:var(--mono); font-size:10.5px; color:var(--tx-3); }
.calc__vsnote{
  font-size:13px; line-height:1.7; font-weight:600;
  color:var(--teal-deep); margin-top:14px;
}
.calc__plus{
  font-size:13px; line-height:1.75; color:var(--tx-3);
  margin-top:16px; padding-top:14px; border-top:1px solid var(--hair);
}
.calc__plus:empty{ display:none; }

/* ── 9 · THE LINE BILL · FAQ · ENTERPRISE · TAIWAN ───────────── */
.lineown__box{
  background:none; border:0; border-radius:0;
  border-top:2px solid var(--rule); border-left:0;
  padding:22px 0 0;
}
.lineown__box h4{ font-size:17px; font-weight:700; letter-spacing:-.015em; margin-bottom:12px; }
.lineown__box p{ font-size:15px; line-height:1.8; color:var(--tx-2); }
.lineown__own{ border-top:1px solid var(--hair); }
.lineown__own b{ color:var(--ink); }

#faq .faq{ gap:0; border-top:2px solid var(--rule); }
#faq .faq__item{
  background:none; border:0; border-bottom:1px solid var(--hair);
  border-radius:0; box-shadow:none;
}
#faq .faq__item:hover{ background:rgba(15,17,21,.015); border-bottom-color:var(--hair); }
#faq .faq__item[open]{
  background:rgba(15,17,21,.015); border-bottom-color:var(--hair);
  box-shadow:inset 3px 0 0 var(--ink);
}
#faq .faq__item summary{ color:var(--tx); font-weight:600; font-size:16.5px; letter-spacing:-.01em; }
#faq .faq__item summary svg{ color:var(--tx-4); }
#faq .faq__item[open] summary svg{ color:var(--ink); }
#faq .faq__body{ color:var(--tx-2); }

.ent{
  background:none; border:0; border-radius:0; box-shadow:none;
  border-top:2px solid var(--rule); padding:clamp(24px,3vw,36px) 0 0;
}
.ent h3{ font-size:clamp(21px,2.4vw,28px); font-weight:700; letter-spacing:-.025em; }
.ent__list{ gap:0; display:grid; margin-top:18px; border-top:1px solid var(--hair); }
.ent__list li{ padding:11px 0; border-bottom:1px solid var(--hair); color:var(--tx-2); font-size:14.5px; }
.ent__list li:last-child{ border-bottom:0; }
.ent__list li::before{ border-radius:0; width:5px; height:5px; background:var(--ink); }

.twcard{
  background:none; border:0; border-radius:0; box-shadow:none;
  border-top:2px solid var(--rule); padding:clamp(24px,3vw,36px) 0 0;
}
.twcard h3{ font-size:20px; font-weight:700; letter-spacing:-.02em; }
.twcard p{ font-size:15.5px; line-height:1.78; color:var(--tx-2); }
.twcard__free b{
  font-family:var(--font); font-size:clamp(28px,3.2vw,42px); font-weight:700;
  letter-spacing:-.04em; font-variant-numeric:tabular-nums; color:var(--ink);
}
.twcard__free b .tg-cur{ font-size:.44em; }
.twcard__free span{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--teal);
}
.mkt__label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  color:var(--tx-4); border-bottom:0; border-top:1px solid var(--hair);
  padding:11px 0 0; margin-bottom:20px;
}

/* ── 10 · SECURITY · THE PERMISSION MATRIX ───────────────────────
   With the comparison table, this is the best ledger on the site: six rows
   of data against four roles. Ruled, mono-headed, tabular, and pinned on
   the left so a scrolled column never loses the row it belongs to. */
.matrix{
  background:none; border:0; border-radius:0; box-shadow:none; overflow-x:auto;
}
.matrix table{ min-width:700px; }
.matrix tbody tr{ transition:background .3s var(--ease); }
.matrix tbody tr:hover{ background:rgba(15,17,21,.02); }
.matrix .row-h{ color:var(--tx); font-weight:600; }
.yes{ color:var(--teal); }
.no{ color:var(--tx-4); }
.cond{
  border:1.5px solid var(--hair); border-radius:0; background:transparent;
  color:var(--tx-3); font-family:var(--mono); font-size:9px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; line-height:1.35;
  padding:3px 6px; display:inline-flex; white-space:nowrap;
}
.matrix tbody tr:last-child td{ border-bottom:2px solid var(--rule); }
.matrix thead th:first-child,
.matrix tbody td:first-child{
  position:sticky; left:0; background:var(--paper); z-index:2;
  box-shadow:1px 0 0 var(--hair);
}

/* ── 11 · SECURITY · THE FACT CELLS ──────────────────────────────
   Three white cards became three cells of one ruled index. */
.facts{
  gap:0; margin-top:0;
  border-top:2px solid var(--rule); border-left:1px solid var(--hair);
}
.fact{
  background:none; border:0; border-radius:0;
  border-right:1px solid var(--hair); border-bottom:1px solid var(--hair);
  padding:22px 24px 26px; transition:background .3s var(--ease);
}
.fact:hover{ background:rgba(15,17,21,.018); }
.fact__n{
  display:block; font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.14em; color:var(--tx-4); margin-bottom:12px;
  font-variant-numeric:tabular-nums;
}
.fact h3{ font-size:18px; font-weight:700; letter-spacing:-.015em; margin-bottom:10px; }
.fact p{ font-size:14.5px; line-height:1.75; color:var(--tx-2); }
.fact ul{ gap:0; margin-top:14px; border-top:1px solid var(--hair); }
.fact li{ padding:11px 0; border-bottom:1px solid var(--hair); font-size:14px; }
.fact li:last-child{ border-bottom:0; }
.fact li svg{ margin-top:4px; }

/* ── 12 · SECURITY · THE ONE CLAIM ───────────────────────────────
   The sentence that decides the deal. It gets the page's display voice and
   an ink rule, and nothing else. */
.oneclaim{
  background:none; border:0; border-radius:0; box-shadow:none;
  border-top:3px solid var(--rule); padding:22px 0 0;
}
.oneclaim h3{
  font-size:clamp(23px,3vw,36px); font-weight:700;
  letter-spacing:-.03em; line-height:1.14; margin-bottom:18px; max-width:22ch;
}
body[data-lang="th"] .oneclaim h3,
body[data-lang="zh"] .oneclaim h3{ line-height:1.3; letter-spacing:-.015em; }
.oneclaim p{ font-size:16.5px; line-height:1.8; color:var(--tx-2); max-width:72ch; }
.oneclaim p + p{ margin-top:16px; padding-top:16px; border-top:1px solid var(--hair); }

/* ── 13 · SECURITY · WHAT WE DO NOT HAVE YET ─────────────────────
   Word for word as written. The only change is that the box becomes a
   ruled ledger and the soft pills become square stamps, so the section
   reads as a record rather than as an apology. */
.open{
  background:none; border:0; border-radius:0; overflow:visible;
  border-top:2px solid var(--rule);
}
.open__row{
  border-bottom:1px solid var(--hair); padding:22px 0;
  grid-template-columns:minmax(210px,.85fr) 2fr; gap:clamp(16px,3.4vw,44px);
}
.open__q{ font-size:16px; font-weight:600; color:var(--tx); line-height:1.5; }
.open__a{ font-size:15px; line-height:1.78; color:var(--tx-2); }
.tag{
  display:inline-flex; align-items:center; border-radius:0;
  font-family:var(--mono); font-size:9.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; line-height:1.35;
  padding:3px 7px; border:1.5px solid; margin-bottom:10px; margin-right:6px;
}
.tag--not{ background:transparent; border-color:var(--hair); color:var(--tx-3); }
.tag--have{ background:var(--teal-soft); border-color:var(--teal); color:var(--teal-deep); }
.tag--soon{ background:#FFFBEB; border-color:var(--amb); color:var(--amb); }

/* ── 14 · PRINTED FIGURES ────────────────────────────────────────
   Real captures from the shipped app, set as plates with a mono caption
   strap. Never an illustration of a WorkCo screen. */
.pfigs{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.8vw,22px); margin-top:clamp(28px,3.6vw,46px);
}
.pfigs--2{ grid-template-columns:repeat(2,1fr); max-width:720px; }
.pfig{ margin:0; }
.pfig img{
  width:100%; height:auto; display:block;
  aspect-ratio:4/5; object-fit:cover; object-position:center top;
}
.pfig--tall img{ aspect-ratio:3/4; }
.pfig--wide img{ aspect-ratio:16/10; object-position:center top; }
/* a plate on its own, not in a strip: a phone screen at phone scale */
.pfig--solo{ max-width:300px; margin-top:clamp(26px,3.4vw,42px); }
.pfig--solo img{ aspect-ratio:auto; }
.oa__fig{ max-width:300px; margin:clamp(4px,1vw,10px) 0 clamp(26px,3.2vw,38px); }
.oa__fig img{ aspect-ratio:1081/1555; }   /* the figure's own shape, so the
   LINE header and the confirm button both survive object-fit:cover. At 3/4 the
   bottom of the card was being trimmed. */
/* a caption wraps rather than truncates: the label is information */
.pfig .tg-plate__cap{ align-items:flex-start; }
.pfig .tg-plate__cap .tg-stamp{ margin-top:1px; }

/* ── 14b · THE ODOMETER ──────────────────────────────────────────
   chain.js builds the digit strips for every [data-count], but the CSS that
   CLIPS them lives in v9.css, which neither of these two pages loads. With
   the strips unclipped a rolling figure renders as the digits 0 to 9 stacked
   on top of each other. This block is not decoration, it is the clip. */
.odo{ display:inline-flex; font-style:normal; }
.proof__item b.odo{ display:inline-flex; }
.odo__c{ display:block; overflow:hidden; height:1em; }
.odo__s{ display:block; will-change:transform; }
.odo__s span{ display:block; height:1em; line-height:1; }

/* the section rubric strap used above a figure strip */
.figstrap{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tx-4);
  margin-top:clamp(26px,3.2vw,40px); padding-top:11px;
  border-top:1px solid var(--hair);
}

/* ── 15 · RESPONSIVE ─────────────────────────────────────────────
   Below 1000px the ruled grid collapses to a single stack: a right-hand
   hairline on a full-width cell draws a line down the middle of nothing. */
@media(max-width:1100px){
  .pfigs{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:1000px){
  .pcards{
    grid-template-columns:1fr; max-width:none; margin:0;
    border-left:0; gap:0;
  }
  .pcard{ border-right:0; padding-left:0; padding-right:0; }
  .pcard--rec{ padding-left:16px; padding-right:16px; }
  .pcard--rec .pc__badge{ left:0; }
  .proof{ grid-template-columns:1fr; border-left:0; }
  .proof__item{ border-right:0; padding-left:0; padding-right:0; }
  .facts{ border-left:0; }
  .fact{ border-right:0; padding-left:0; padding-right:0; }
  .locs{ border-left:0; }
  .locs .loc{ padding-left:0; }
  .locs .loc:first-child{ padding-left:0; }
  .oa__top{ padding-top:22px; }
}
@media(max-width:820px){
  .phead__inner .tg-sec--page,
  .shero__inner .tg-sec--page{ gap:8px; }
  .swap__side--wc{ padding-left:16px; }
  .calc__num{ text-align:left; }
  .open__row{ grid-template-columns:1fr; gap:10px; }
  .cmp__ctas .btn{ width:100%; }
}
@media(max-width:560px){
  .pfigs,.pfigs--2{ grid-template-columns:1fr; max-width:420px; }
  .bill{ display:flex; }
  .bill__opt{ flex:1; justify-content:center; padding:10px 8px; }
  .locs,.locs--four{ grid-template-columns:repeat(2,1fr); }
  .locs .loc:nth-child(2n){ border-right:0; }
  .matrix th,.matrix td{ padding:12px 12px; }
  .matrix tbody td:first-child{ min-width:150px; }
}

/* ── 16 · REDUCED MOTION ─────────────────────────────────────────
   Everything already in position. Handled centrally in tarang.css; these
   are the two transitions this file adds on its own. */
@media(prefers-reduced-motion:reduce){
  .matrix tbody tr,
  .fact,
  .bill__opt{ transition:none !important; }
  .odo__s{ transition:none !important; }
}

/* ── 11 · the calculator, rebuilt as a comparison ─────────────────
   Option B of the three reviewed 2026-08-09. The old output put ONE
   recommended plan in a big number with the other plan, the add-on and the
   setup fee as notes underneath, which is how ฿12,500 came to look like it
   applied to Standard and how the HQ dashboard came to look like part of the
   monthly total. Each plan now owns a column and carries its own money. */
.calc__staffn{
  float:right; font-family:var(--mono); font-size:16px; font-weight:700;
  color:var(--tx); font-variant-numeric:tabular-nums;
}
.calc__f input[type=range]{
  width:100%; margin:14px 0 0; accent-color:var(--teal); height:22px; display:block;
}
.calc__hint{ margin:9px 0 0; font-size:12.5px; line-height:1.55; color:var(--tx-3) }

.cplans{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  margin-top:clamp(20px,2.6vw,28px);
  border-top:2px solid var(--rule); border-left:1px solid var(--hair);
}
.cplan{ padding:clamp(16px,2.2vw,24px); border-right:1px solid var(--hair);
  border-bottom:1px solid var(--hair); min-width:0 }
.cplan.is-out{ background:var(--paper-2) }
.cplan.is-out .cplan__num b{ color:var(--tx-3); font-size:clamp(19px,2.2vw,25px) }

.cplan__head{ display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline;
  justify-content:space-between; border-bottom:2px solid var(--rule);
  padding-bottom:8px; margin-bottom:12px }
.cplan__name,.cplan__where{
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase;
}
.cplan__where{ color:var(--tx-3); letter-spacing:.08em }

.cplan__num{ margin:0; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap }
.cplan__num b{
  font-family:var(--mono); font-size:clamp(27px,3.6vw,40px); font-weight:800;
  letter-spacing:-.035em; font-variant-numeric:tabular-nums; line-height:1.05; color:var(--tx);
}
.cplan__num i{ font-style:normal; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--tx-3) }

.cplan__rows{ margin-top:13px }
.cplan__row{ display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  padding:8px 0; border-bottom:1px solid var(--hair); font-size:13.5px; color:var(--tx-2) }
.cplan__row:last-child{ border-bottom:0 }
.cplan__row span:last-child{ font-family:var(--mono); font-weight:600; white-space:nowrap;
  font-variant-numeric:tabular-nums; color:var(--tx) }
.cplan__row.is-quiet span{ color:var(--tx-3); font-size:12.5px }
.cplan__why{ margin:6px 0 0; font-size:13.5px; line-height:1.7; color:var(--tx-2) }

.cplan__chips{ list-style:none; margin:14px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:5px }
.cplan__chips li{
  font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; padding:3px 7px; border:1.5px solid var(--hair);
  color:var(--tx-3); border-radius:0;
}
#cpOwn .cplan__chips li:first-child{ color:var(--teal-deep); border-color:var(--teal) }

/* the two blocks that must never read as part of the monthly total */
.cplan__extra{ margin-top:16px; display:grid; gap:12px }
.cplan__x{ border-top:1px solid var(--hair); padding-top:11px }
.cplan__xh{
  display:block; font-family:var(--mono); font-size:9.5px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--tx-3);
}
.cplan__xv{ display:flex; justify-content:space-between; gap:10px; align-items:baseline;
  margin-top:5px; font-size:13.5px; color:var(--tx-2) }
.cplan__xv b{ font-family:var(--mono); font-weight:700; color:var(--tx); white-space:nowrap;
  font-variant-numeric:tabular-nums }
.cplan__xv.is-none{ color:var(--tx-3); font-size:13px }
.cplan__xn{ display:block; margin-top:4px; font-size:11.5px; line-height:1.5; color:var(--tx-3) }

.cverdict{ border-left:3px solid var(--teal); padding:2px 0 2px 15px;
  margin-top:clamp(18px,2.4vw,24px) }
.cverdict__main{ margin:0; font-size:15.5px; font-weight:600; color:var(--tx); line-height:1.6 }
.cverdict__sub{ margin:5px 0 0; font-size:13.5px; color:var(--tx-3); line-height:1.65 }

@media(max-width:640px){
  .cplans{ grid-template-columns:1fr }
  .calc__staffn{ float:none; margin-left:8px }
}

/* ── the smallest phones (320-380px) ──
   Four columns inside 280px of content. At the 700px settings the cells were
   printing "Unlimit / ed" and "locatio / n", and the plan names collided with
   each other. Everything shrinks one more step here rather than putting the
   sideways drag back, which is the thing being fixed. */
@media (max-width: 380px){
  .cmp{ font-size:12px; }
  .cmp th,.cmp td{ padding:9px 5px; }
  .cmp thead th{ padding:0 5px 8px; }
  .cmp__plan{ font-size:10.5px; letter-spacing:-.02em; line-height:1.25; }
  .cmp__pp{ font-size:9.5px; }
  .cmp thead th.cmp__feat,.cmp tbody th[scope="row"]{ width:30%; font-size:11.5px; }
  .cmp thead th:not(.cmp__feat){ width:23.3%; }
  .cmp td b{ font-size:11.5px; }
  .cmp tbody td{ font-size:11.5px; line-height:1.45; }
  .cmp__rectag{ font-size:8px; letter-spacing:.06em; padding:2px 4px; }
}


.matrix th,.matrix td{ padding:14px 16px; border-bottom:1px solid var(--hair); font-size:14.5px; }
.matrix thead th{
  background:none; border-bottom:2px solid var(--rule);
  font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tx-4);
  padding:0 16px 12px; vertical-align:bottom; white-space:normal;
}

/* ══ PHONES: THE PERMISSION MATRIX ══════════════════════════════════════════
   LAST IN THE FILE ON PURPOSE. A media-less ".matrix thead th" rule sits above
   this one, and equal specificity means source order decides - a media query
   buys nothing. The first attempt at this override was written in security.css,
   the second in the middle of this file, and neither ever applied. The symptom
   both times was silent: the page looked fixed while the headings still
   rendered as mono capitals.

   Why it matters: .matrix table carried min-width:700px, so inside a 350px
   phone the whole grid scrolled sideways and a thumb landing on it dragged the
   table instead of the page. That is what "the website moves left and right"
   actually was (Dan, 2026-08-11).

   And why the headings change: "BRANCH MANAGER" in mono capitals with .14em
   tracking is 40% wider than "Branch manager" and every letter is a break
   opportunity, so a 46px column set it one letter per line, vertically. On a
   phone these stop being stamps and become ordinary small text. */
@media (max-width: 700px){
  .matrix table{ min-width:0; table-layout:fixed; }
  /* break-word, NOT anywhere: "anywhere" breaks between any two characters. */
  .matrix th,.matrix td{ padding:10px 6px; font-size:12.5px; overflow-wrap:break-word; }
  .matrix thead th{
    font-family:inherit; text-transform:none; letter-spacing:0;
    font-size:10.5px; font-weight:600; line-height:1.3; white-space:normal;
    /* The padding has to be re-stated HERE. ".matrix thead th" outranks the
       ".matrix th" rule above, so the 16px side padding survived every attempt
       to shrink these cells: a 63px column was handing 31px to the word. */
    padding:0 5px 10px;
  }
  /* FIVE columns: 30 + 17.5 x 4 = 100. The first attempt used 34 + 22 x 4,
     which is 122%, and the browser scaled every column down to fit - so the
     role columns ended up NARROWER than asked for and the headings broke
     mid-word anyway. With table-layout:fixed only the first row's widths
     count, so they have to add up. */
  .matrix thead th:first-child{ width:30%; }
  .matrix td:not(:first-child),.matrix th:not(:first-child){ width:17.5%; }
  .matrix tbody td:first-child{ min-width:0; }
  /* The condition badge, likewise: a stamp cannot wrap, and "On request" had
     to fit a 55px column. white-space:normal is the load-bearing line - the
     base rule sets nowrap, and nowrap beats overflow-wrap outright. */
  .matrix .cond{
    display:inline; padding:0; border:0;
    font-family:inherit; text-transform:none; letter-spacing:0;
    font-size:11px; white-space:normal; overflow-wrap:break-word; word-break:normal;
  }
}

/* One step smaller again for 320-380px phones. At the sizes above, a 49px
   column could not hold "Employee" (50px) or "request" (44px), so both split
   mid-word. Nothing here changes the layout, only the type size, because five
   columns at 320px have no room left to redistribute. */
@media (max-width: 400px){
  .matrix th,.matrix td{ padding:9px 4px; font-size:11.5px; }
  .matrix thead th{ font-size:9px; padding:0 4px 9px; }
  /* "Permission only" still splits at 320px. Ten characters cannot fit a 44px
     column at any readable size, and the alternative - putting the sideways
     drag back - is worse. Left as is, deliberately. */
  .matrix .cond{ font-size:9.5px; }
  .matrix thead th:first-child{ width:28%; }   /* 28 + 18 x 4 = 100 */
  .matrix td:not(:first-child),.matrix th:not(:first-child){ width:18%; }
}