/* Why น้องเก้า: the pains of a shop that answers its own chats, the not-a-chatbot table, and the cost calculator.
   Same tokens as site.css. The pains are a chat thread (a complaint, then น้องเก้า's reply), not a card grid. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.why,.versus{padding:var(--space-section) var(--gutter)}
.why{background:var(--surface)}
.vents{list-style:none;margin:0 auto;padding:0;max-width:1180px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-7) clamp(32px,5vw,88px);align-items:start}
.vent{display:grid;gap:var(--space-3);align-content:start}
.vent:nth-child(even){margin-top:var(--space-7)}
.vent-say{position:relative;justify-self:start;max-width:30em;margin:0;padding:16px 20px;background:var(--white);border:var(--line);border-radius:22px 22px 22px 6px;box-shadow:var(--drop);font:500 1.18rem/1.65 var(--font-display);transform:rotate(-1deg)}
.vent:nth-child(3n) .vent-say{transform:rotate(1.2deg)}
.vent-help{display:flex;align-items:flex-start;gap:12px;justify-self:end;max-width:31em;margin:0;padding:14px 18px 14px 12px;background:var(--rose-soft);border:var(--line);border-radius:22px 22px 6px 22px;line-height:1.8}
.vent-help img{flex:none;width:44px;height:44px;border-radius:50%;border:var(--line);background:var(--white)}
.versus{background:var(--white);border-block:var(--line)}
.versus-wrap{max-width:1080px;margin:0 auto}
.versus-table{width:100%;border-collapse:separate;border-spacing:0;border:var(--line);border-radius:var(--r-panel);overflow:hidden;box-shadow:var(--drop-lg);background:var(--white)}
.versus-table th,.versus-table td{padding:16px 20px;text-align:left;vertical-align:top;border-bottom:1.5px dotted var(--border);line-height:1.75}
.versus-table tr:last-child th,.versus-table tr:last-child td{border-bottom:0}
.versus-table thead th{font:500 1.05rem/1.4 var(--font-display);background:var(--surface);border-bottom:var(--line)}
.versus-table thead .versus-us{background:var(--rose)}
/* The whole head in a white disc with a navy line: pink hair on the rose header would otherwise melt into it. */
.versus-table thead .versus-us img{display:inline-block;width:48px;height:48px;border-radius:50%;border:var(--line);background:var(--white);vertical-align:middle;margin-right:10px}
.versus-table tbody th{width:22%;font:500 1rem/1.6 var(--font-display);background:var(--surface)}
.versus-table tbody td:nth-child(2){width:34%;color:var(--navy)}
.versus-table tbody td:last-child{background:#fff4f8;font-weight:500}
.cost{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,88px);align-items:start;padding:var(--space-section) var(--gutter);background:#dff8ff;border-bottom:var(--line)}
.cost h2{text-wrap:balance}
.cost-copy p{margin-top:var(--space-4);max-width:var(--measure)}
.cost-pains{margin:var(--space-5) 0 0;padding:0;list-style:none;display:grid;gap:10px;max-width:var(--measure)}
.cost-pains li{position:relative;padding-left:30px;line-height:1.75}
.cost-pains li::before{content:"";position:absolute;left:2px;top:.55em;width:14px;height:14px;border-radius:50%;border:var(--line);background:var(--peach)}
.calc{padding:clamp(20px,3vw,36px);background:var(--white);border:var(--line);border-radius:var(--r-panel);box-shadow:var(--drop-lg)}
.calc h3{margin:0 0 var(--space-2)}
.calc-example{margin:0 0 var(--space-4);font-size:var(--text-small);color:var(--rose-ink);font-weight:700}
.versus-table thead small{display:block;font:400 .88rem/1.4 var(--font-body);color:var(--navy)}
.calc-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.calc-fields label{display:grid;gap:6px;font-size:var(--text-small);font-weight:700;line-height:1.5}
.calc-fields input{width:100%;min-height:46px;padding:0 14px;font:500 1.1rem/1 var(--font-display);font-variant-numeric:tabular-nums;color:var(--ink);background:var(--surface);border:var(--line);border-radius:var(--r-control)}
.calc-out{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-5)}
.calc-col{padding:16px 18px;border:var(--line);border-radius:var(--r-card);background:var(--surface)}
.calc-col.calc-us{background:var(--rose-soft);box-shadow:var(--drop)}
.calc-col h4{margin:0;font:500 1rem/1.4 var(--font-display)}
.calc-sum{margin:6px 0 2px;font:600 clamp(1.5rem,1.1rem + 1.6vw,2.2rem)/1.15 var(--font-display);font-variant-numeric:tabular-nums}
.calc-note{margin:0;font-size:var(--text-small);line-height:1.6;color:var(--navy)}
.calc-diff{margin:var(--space-4) 0 0;padding:12px 16px;border-radius:var(--r-control);background:#eafaf1;border:1.5px solid #2fbf8a;font-weight:700;line-height:1.6}
.calc-diff:empty{display:none}
.calc-fine{margin:var(--space-4) 0 0;font-size:.9rem;line-height:1.7;color:#4a4563}
.extra-lesson{background:#fff4f8}.extra-expert{background:#fff3d1;margin-top:var(--space-7)}
@media (max-width:860px){
  .vents{grid-template-columns:minmax(0,1fr);gap:var(--space-6)}.vent:nth-child(even){margin-top:0}
  .cost{grid-template-columns:minmax(0,1fr)}
  .versus-table,.versus-table tbody,.versus-table tr,.versus-table th,.versus-table td{display:block;width:auto}
  .versus-table thead{display:none}
  .versus-table tbody th{width:auto;border-bottom:0;padding-bottom:4px;background:var(--surface)}
  .versus-table tbody td{width:auto!important;border-bottom:0;padding-top:6px;padding-bottom:6px}
  .versus-table tbody td::before{display:block;font:500 .88rem/1.5 var(--font-display);color:var(--rose-ink)}
  .versus-table tbody td:nth-child(2)::before{content:"แชทบอทตอบอัตโนมัติ"}
  .versus-table tbody td:last-child::before{content:"น้องเก้า"}
  .versus-table tbody td:last-child{padding-bottom:16px;border-bottom:var(--line)}
  .versus-table tr:last-child td:last-child{border-bottom:0}
  .extra-expert{margin-top:0}
}
@media (max-width:520px){.calc-fields,.calc-out{grid-template-columns:minmax(0,1fr)}.vent-say{font-size:1rem}}