/* JaiTalk landing: the ruled chart.
   Colours, rule weight and fonts come from ../tokens.css. The page is a ruled chart: rows are
   sections, content sits in cells, and the rules are the grid's own gaps over an ink ground. */

*, *::before, *::after { box-sizing: border-box; }
/* An in-page link lands its heading below the sticky header strip, not under it. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-latin);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-kerning: normal;
}
:lang(th) { font-family: var(--font-thai); line-height: 1.7; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ol, ul, dl, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }

/* Language: both copies live in the page, the root lang decides which one shows. */
html[lang="en"] [data-l="th"], html[lang="th"] [data-l="en"] { display: none !important; }

.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 3px solid var(--focus, var(--ink)); outline-offset: 3px; }
.skip {
  position: absolute; left: 12px; top: -80px; z-index: 50; padding: 12px 18px;
  background: var(--ink); color: var(--paper); text-decoration: none; font-weight: 600;
}
.skip:focus { top: 12px; }

/* ---------- the chart frame ---------- */

.sheet {
  width: min(100% - 2 * clamp(0px, 2.6vw, 40px), 1400px);
  margin-inline: auto;
  border-inline: var(--rule-w) solid var(--rule);
}
@media (max-width: 720px) { .sheet { width: 100%; border-inline: 0; } }

.row {
  display: grid;
  gap: var(--rule-w);
  background: var(--rule);
  border-bottom: var(--rule-w) solid var(--rule);
}
.row > * { background: var(--paper); min-width: 0; }

.cell { padding: clamp(18px, 2.2vw, 32px); }

/* ---------- header strip ---------- */

.top { position: sticky; top: 0; z-index: 20; }
.strip { grid-template-columns: auto 1fr auto auto auto; border-top: var(--rule-w) solid var(--rule); }
.strip > * { display: flex; align-items: center; }
.strip .brand { padding: 10px clamp(14px, 2vw, 28px); text-decoration: none; }
.strip .brand img { height: 30px; width: auto; }
.strip nav { padding: 0 clamp(14px, 2vw, 28px); gap: 28px; }
.strip nav a { text-decoration: none; font-weight: 600; font-size: 0.96rem; padding: 10px 0;
  background: linear-gradient(var(--ink), var(--ink)) left 100% / 0 2px no-repeat; transition: background-size .25s cubic-bezier(.2,.8,.2,1); }
.strip nav a:hover { background-size: 100% 2px; }
.strip .cta-cell { background: var(--red); color: var(--on-colour); padding: 0; }
.strip .cta-cell .ui-i { stroke: currentColor; }
.strip .cta-cell a {
  display: flex; align-items: center; gap: 10px; height: 100%; min-height: 56px;
  padding: 0 clamp(16px, 2vw, 28px); font-weight: 700; text-decoration: none;
}
.strip .cta-cell a:hover { background: var(--ink); color: var(--paper); }
.strip .cta-cell a:hover svg { stroke: var(--paper); }

.lang { display: flex; padding: 0 clamp(8px, 1.2vw, 16px); gap: 4px; }
/* Each language is its own address, so the switch is two links and the current one is marked. */
.lang a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px; min-height: 40px; padding: 4px 10px; border: var(--rule-w) solid transparent;
  background: transparent; font-weight: 600; font-size: 0.95rem; text-decoration: none;
}
.lang a[lang="th"] { font-family: var(--font-thai); font-weight: 700; }
.lang a[aria-current="page"] { border-color: var(--ink); background: var(--yellow); color: var(--on-colour); }
.lang a:hover:not([aria-current="page"]) { border-color: var(--ink); }
/* set by prepaint.js for a Thai browser on the English page, once */
.suggest-th .lang a[hreflang="th"]:not([aria-current="page"]) { border-color: var(--ink); background: var(--yellow-t); }

/* theme: one button cell that cycles Auto, Light, Dark */
.theme-cell { padding: 0 clamp(6px, 1vw, 12px); }
.theme {
  display: inline-flex; align-items: center; gap: 8px; min-width: 44px; min-height: 40px; padding: 4px 10px;
  border: var(--rule-w) solid transparent; background: transparent; cursor: pointer; font-weight: 600; font-size: 0.95rem;
}
.theme:hover { border-color: var(--ink); }
.theme svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme svg .fill { fill: currentColor; stroke: none; }
.theme svg g { display: none; }
.theme[data-mode="auto"] .t-auto, .theme[data-mode="light"] .t-light, .theme[data-mode="dark"] .t-dark { display: inline; }
.theme .t-lbl :lang(th), .theme .t-lbl[lang="th"] { line-height: 1.3; }

@media (max-width: 1100px) { .theme .t-lbl { display: none; } }
@media (max-width: 900px) {
  .strip nav { display: none; }
  .strip { grid-template-columns: 1fr auto auto auto; }
}
@media (max-width: 420px) {
  .strip .brand img { height: 24px; }
  .strip .brand { padding-inline: 12px; }
  .theme-cell { padding: 0 4px; }
  .theme { padding: 4px 8px; }
  .strip .cta-cell a { padding: 0 14px; font-size: 0.95rem; }
  .strip .cta-cell a svg { display: none; }
  .lang { padding: 0 6px; }
  .lang a { min-width: 44px; padding: 4px 6px; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 24px;
  border: var(--rule-w) solid var(--ink);
  font-weight: 700; font-size: 1.06rem; text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.btn-primary { background: var(--red); color: var(--on-colour); }
.btn-primary:hover { background: var(--ink); color: var(--paper); }
.btn-primary:hover svg { transform: translateX(3px); }
.btn-quiet { background: var(--paper); color: var(--ink); }
.btn-quiet:hover { background: var(--yellow); color: var(--on-colour); }
.btn :lang(th) { line-height: 1.3; }
/* The app is not open yet: a button's shape with nothing to press. */
.btn-soon { background: transparent; color: var(--ink); border-style: dashed; cursor: default; }

/* ---------- hero: the promise, and the call beside it ---------- */

.hero { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); min-height: min(calc(100vh - 58px), 844px); min-height: min(calc(100svh - 58px), 844px); }
.hero-copy { display: flex; flex-direction: column; padding: 0; }
.hero-copy .lead { padding: clamp(24px, 3.4vw, 56px) clamp(20px, 4vw, 72px) clamp(24px, 3vw, 40px); flex: 1; display: flex; flex-direction: column; justify-content: center; }
.hero-name { display: block; font-size: 1.15rem; font-weight: 700; letter-spacing: 0; margin-bottom: 14px; }
.hero-name :lang(th), .hero-name[lang="th"] { font-family: var(--font-thai); }
.promise { font-weight: 700; }
.promise .p-en {
  display: block; font-size: clamp(2.4rem, 0.8rem + 3.3vw, 4.25rem); line-height: 0.98;
  letter-spacing: -0.035em; text-wrap: balance;
}
.promise .p-th {
  display: block; font-family: var(--font-thai); font-weight: 800;
  font-size: clamp(2.2rem, 1.2rem + 2.9vw, 4.1rem); line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance;
}
/* one sentence per line; Thai breaks only between its phrases */
.promise .pl { display: block; }
.promise .pw, .sec-head h2 .pw { display: inline-block; }
.hero-sub { margin-top: 24px; max-width: 38ch; font-size: 1.24rem; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.hero-sub:lang(th), .hero-sub [lang="th"] { line-height: 1.7; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.cta-note { margin-top: 14px; font-size: 0.92rem; color: var(--ink-2); max-width: 48ch; }

/* The call is the app's own screen at its true size, scaled to the column by transform, so it is
   the app rather than a drawing of it. Its styles come from app/cells-call.css; hero-call.js sets
   the scale and plays it. */
.callhero { display: flex; flex-direction: column; padding: 18px clamp(16px, 2.2vw, 34px) 12px; background: var(--blue-t); }
.callhero .fit {
  position: relative; flex: none; align-self: center; margin-block: auto; aspect-ratio: 390 / 844;
  /* as tall as the first screen allows under the header and the caption, never wider than the column */
  width: min(372px, 100%, calc((min(100vh, 902px) - 150px) * 390 / 844));
  width: min(372px, 100%, calc((min(100svh, 902px) - 150px) * 390 / 844));
}
.callhero .screen { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(var(--k, .86)); box-shadow: 0 0 0 2.5px var(--ink); }
.callhero .cap.leaving { position: absolute; left: 0; right: 0; }
.callfoot { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 0.86rem; line-height: 1.4; color: var(--ink-2); }
.callfoot p { flex: 1; }

.pause {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border: var(--rule-w) solid var(--ink); background: var(--paper); cursor: pointer;
}
.pause svg { width: 18px; height: 18px; fill: var(--ink); }
.pause:hover { background: var(--yellow); }
.pause[hidden] { display: none; }
.pause .i-play { display: none; }
.pause[aria-pressed="true"] .i-play { display: block; }
.pause[aria-pressed="true"] .i-pause { display: none; }

@media (max-width: 1100px) and (min-width: 861px) {
  .hero { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); }
}
/* narrow tablets: the promise above, the call under it at a size its captions can be read */
@media (max-width: 860px) and (min-width: 721px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .callhero { padding-top: 24px; }
  .callhero .fit { width: min(340px, 100%); margin-block: 0; }
}

/* Phone: the promise, then the call filling the column, both in the first screen or close to it. */
@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero .lead { padding: 18px 20px 22px; }
  .hero-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .promise .p-en { font-size: 2.45rem; }
  .promise .p-th { font-size: 2.05rem; line-height: 1.28; }
  .hero-sub { margin-top: 12px; font-size: 1.02rem; line-height: 1.5; color: var(--ink-2); }
  .ctas { margin-top: 18px; gap: 10px; }
  .ctas .btn { min-height: 50px; padding: 0 18px; font-size: 1rem; }
  .cta-note { margin-top: 10px; font-size: 0.86rem; line-height: 1.45; }
  .callhero { background: var(--paper); padding: 16px 16px 12px; }
  .callhero .fit { width: 100%; margin-block: 0; }
  .callhero .screen { transform: scale(var(--k, .918)); box-shadow: none; }
  .callfoot { font-size: 0.88rem; line-height: 1.45; }
}

/* ---------- the little things: cells that flip which language leads ---------- */

.phrases { grid-template-columns: repeat(3, 1fr); }
.phrases > .phrase { background: var(--ground, var(--paper)); }
.phrase {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  width: 100%; height: 100%; min-height: 210px; margin: 0; border: 0; text-align: left; cursor: pointer;
  padding: clamp(16px, 1.8vw, 26px); background: var(--ground, var(--paper)); color: var(--fg, var(--ink));
  -webkit-tap-highlight-color: transparent;
}
.phrase:focus-visible { outline-offset: -8px; }
.phrase .pic { position: absolute; top: clamp(12px, 1.4vw, 20px); right: clamp(12px, 1.4vw, 20px); width: clamp(60px, 5.6vw, 84px); height: auto; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.phrase:hover .pic { transform: rotate(-6deg) translateY(-2px); }
.ph { display: block; }
.ph-th { font-family: var(--font-thai); font-weight: 800; line-height: 1.3; }
.ph-en { font-family: var(--font-latin); font-weight: 700; line-height: 1.12; letter-spacing: -0.015em; }
.roman { display: block; font-size: 0.86rem; font-weight: 400; line-height: 1.35; opacity: 1; color: var(--fg2, var(--ink-2)); font-style: italic; }
.flip-hint { position: absolute; left: clamp(16px, 1.8vw, 26px); top: clamp(14px, 1.6vw, 22px); width: 22px; height: 22px; opacity: 0; transition: opacity .2s ease; stroke: currentColor; fill: none; stroke-width: 2; }
.phrase:hover .flip-hint, .phrase:focus-visible .flip-hint { opacity: 1; }
/* with no hover to reveal it, the swap mark is what says a cell can be tapped */
@media (hover: none) { .flip-hint { opacity: 1; } }

/* Each cell has its own leading language, so either page opens on both at once; pressing a cell
   swaps the order. The romanization always sits directly under the Thai. */
.phrase .ph-th { order: 1; } .phrase .roman { order: 2; } .phrase .ph-en { order: 3; }
.phrase .ph { font-size: clamp(1.02rem, 0.85rem + 0.4vw, 1.22rem); }
.phrase .ph-th { font-weight: 700; }
.phrase .ph-en { font-weight: 600; }
.phrase[data-lead="en"]:not([aria-pressed="true"]) .ph-en,
.phrase[data-lead="th"][aria-pressed="true"] .ph-en { order: 0; font-size: clamp(1.45rem, 0.9rem + 1.25vw, 2.15rem); font-weight: 700; }
.phrase[data-lead="th"]:not([aria-pressed="true"]) .ph-th,
.phrase[data-lead="en"][aria-pressed="true"] .ph-th { font-size: clamp(1.45rem, 0.9rem + 1.25vw, 2.15rem); font-weight: 800; }

.g-blue { --ground: var(--blue); --fg: var(--on-deep); --fg2: var(--on-deep-2); --focus: var(--on-deep); --pic-free: var(--on-deep); }
.g-ink { --ground: var(--night); --fg: var(--on-deep); --fg2: var(--on-deep-2); --focus: var(--yellow); }
.g-green-t { --ground: var(--green-t); }
.g-yellow-t { --ground: var(--yellow-t); }
.g-red-t { --ground: var(--red-t); }
.g-yellow { --ground: var(--yellow); --fg: var(--on-colour); --fg2: var(--on-colour-2); --focus: var(--on-colour); }

.c-555 .n555 { font-family: var(--font-latin); font-weight: 700; letter-spacing: -0.04em; }
.c-555 .ph-th.n555 { font-family: var(--font-latin); }
.c-555[data-lead="th"]:not([aria-pressed="true"]) .n555,
.c-555[data-lead="en"][aria-pressed="true"] .n555 { font-size: clamp(2.6rem, 1.4rem + 2.6vw, 4rem); line-height: 0.95; }

@media (max-width: 720px) {
  .phrases { grid-template-columns: 1fr 1fr; }
  .phrase { min-height: 164px; }
  .phrase .pic { width: 54px; }
}

/* ---------- section rows ---------- */

.sec { grid-template-columns: 4fr 8fr; }
.sec-head { padding: clamp(24px, 3vw, 48px) clamp(20px, 3vw, 48px); }
.sec-head h2 { font-size: clamp(1.8rem, 1.15rem + 1.7vw, 2.8rem); line-height: 1.04; letter-spacing: -0.03em; font-weight: 700; text-wrap: balance; }
.sec-head h2 [lang="th"], .sec-head h2:lang(th) { font-weight: 800; letter-spacing: -0.005em; line-height: 1.32; }
.sec-head p { margin-top: 16px; color: var(--ink-2); max-width: 42ch; text-wrap: pretty; }
.sec-body { padding: 0; display: grid; gap: var(--rule-w); background: var(--rule); }
.sec-body > * { background: var(--paper); min-width: 0; }
@media (max-width: 900px) { .sec { grid-template-columns: 1fr; } }

h3 { font-size: 1.28rem; line-height: 1.2; letter-spacing: -0.015em; font-weight: 700; }
h3 [lang="th"], h3:lang(th) { font-weight: 800; line-height: 1.45; letter-spacing: 0; }
.cell p { margin-top: 8px; color: var(--ink-2); max-width: 60ch; }

/* steps */
.steps { grid-template-columns: repeat(3, 1fr); }
.step { display: flex; flex-direction: column; gap: 6px; padding: clamp(20px, 2.2vw, 32px); }
.step .num { font-weight: 700; font-size: 3.4rem; line-height: 0.9; letter-spacing: -0.04em; margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
.step .num::after { content: ""; flex: 1; height: var(--rule-w); background: var(--ink); }
.step .demo { margin-top: auto; padding-top: 22px; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }

.linkcard { border: var(--rule-w) solid var(--ink); background: var(--paper); border-radius: 14px 14px 14px 4px; padding: 10px 12px; max-width: 290px; font-size: 0.9rem; }
.linkcard .from { font-size: 0.78rem; font-weight: 700; color: var(--ink-2); }
.linkcard .url { display: block; font-weight: 600; color: var(--blue-ink); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; margin-top: 2px; }
.linkcard .card { display: flex; gap: 10px; align-items: center; margin-top: 8px; border-top: var(--rule-w) solid var(--ink); padding-top: 8px; }
.linkcard .card img { width: 30px; height: auto; }
.linkcard .card span { font-weight: 600; line-height: 1.3; font-size: 0.88rem; }
.joinbtn { display: inline-flex; align-items: center; gap: 10px; border: var(--rule-w) solid var(--ink); border-radius: 8px; padding: 10px 14px 10px 18px; background: var(--red); color: var(--on-colour); font-weight: 700; font-size: 0.95rem; line-height: 1.3; }
.joinbtn svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.modes { display: flex; flex-wrap: wrap; gap: 8px; }
.modes > span { display: inline-flex; align-items: center; gap: 8px; border: var(--rule-w) solid var(--ink); padding: 6px 12px 6px 8px; background: var(--paper); font-weight: 600; font-size: 0.92rem; }
.modes svg, .ui-i { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* the product: one conversation on two phones, drawn with the app's chat anatomy. .cm carries the
   app's chat tokens and every part is prefixed, because .msg and .dir already belong to this page. */
.cm {
  --scr: var(--paper); --cell: #ffffff; --panel: #edeae1;
  --hair: rgba(22, 19, 14, .13); --edge: rgba(22, 19, 14, .34); --key: #16130e;
  --chip: #16130e; --on-chip: #fdfcf8;
  --py: #ffc531; --py-on: #16130e; --pb: #2856c6; --pb-on: #fdfcf8;
  color: var(--ink); font-family: var(--font-latin); font-weight: 500;
}
html[data-theme="dark"] .cm {
  --cell: #252320; --panel: #302d28; --hair: rgba(239, 236, 229, .12); --edge: rgba(239, 236, 229, .30);
  --key: transparent; --chip: #efece5; --on-chip: #16130e; --py: #f4bd36; --pb: #7f9ff3; --pb-on: #16130e;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .cm {
    --cell: #252320; --panel: #302d28; --hair: rgba(239, 236, 229, .12); --edge: rgba(239, 236, 229, .30);
    --key: transparent; --chip: #efece5; --on-chip: #16130e; --py: #f4bd36; --pb: #7f9ff3; --pb-on: #16130e;
  }
}
.cm :lang(th) { font-family: var(--font-thai); }
.cm .p-y { --pc: var(--py); --pc-on: var(--py-on); }
.cm .p-b { --pc: var(--pb); --pc-on: var(--pb-on); }
.cm .ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.split { position: relative; grid-template-columns: 1fr 1fr; }
/* the side padding clears the mark that sits on the line between the two phones */
.half { display: flex; flex-direction: column; padding: 16px clamp(24px, 2vw, 30px) 0; }
.row > .half-nok { background: var(--yellow-t); }
.row > .half-tom { background: var(--blue-t); }
.place { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 12px; font-size: 1rem; line-height: 1.35; }
.place .ava { grid-row: span 2; }
.place .pn b { font-weight: 700; }
.place .city { color: var(--ink-2); }
.place time { font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.place .reads { grid-column: 2 / -1; font-size: 0.88rem; color: var(--ink-2); }
.ava { flex: none; width: 44px; height: 44px; padding: 2.5px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 0 1.5px var(--key); }
.ava img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--scr); }
.split-mark { position: absolute; left: 50%; top: 14px; width: 40px; height: 40px; transform: translateX(-50%); z-index: 1; padding: 4px; background: var(--paper); border: var(--rule-w) solid var(--ink); }

.cm-col { flex: 1; display: flex; flex-direction: column; width: 100%; max-width: 440px; }
.half-nok .cm-col { margin-left: auto; }
.cm-thread { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; padding: 14px 0; }
.cm-msg { max-width: 88%; padding: 8px 12px 6px; border-radius: 8px; }
.cm-theirs { align-self: flex-start; background: var(--cell); border: 1.5px solid var(--edge); }
.cm-mine { align-self: flex-end; background: var(--panel); }
.cm-head { display: flex; align-items: center; gap: 7px; min-height: 20px; margin-bottom: 2px; font-size: 13px; font-weight: 700; line-height: 1.2; }
.cm-mine .cm-head { color: var(--ink-2); font-weight: 600; }
.cm-bar { flex: none; width: 5px; height: 15px; border-radius: 2px; background: var(--pc); box-shadow: inset 0 0 0 1.5px var(--key); }
.cm-dir { display: inline-flex; align-items: stretch; flex: none; height: 18px; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px var(--key); font: 700 10.5px/18px var(--font-latin); letter-spacing: .06em; background: var(--cell); color: var(--ink); }
.cm-dir b { padding: 0 4px; background: var(--pc); color: var(--pc-on); font-weight: 700; }
.cm-dir .ar { display: grid; place-items: center; padding: 0 3px; }
.cm-dir svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cm-text { font-size: 17px; line-height: 1.42; overflow-wrap: anywhere; }
.cm-text:lang(th) { font-size: 17.5px; line-height: 1.58; }

/* every message folds what the other phone shows: the original it was written in, or, under your
   own, the translation that was sent */
.cm-fold { margin-top: 5px; border-top: 1px solid var(--hair); }
.cm-fold summary { display: flex; align-items: center; gap: 4px; min-height: 30px; list-style: none; cursor: pointer; font-size: 12.5px; font-weight: 700; line-height: 1.3; color: var(--ink-2); }
.cm-fold summary::-webkit-details-marker { display: none; }
.cm-fold summary:hover { color: var(--ink); }
.cm-fold summary .ic { width: 15px; height: 15px; transition: transform .2s ease; }
.cm-fold[open] summary .ic { transform: rotate(180deg); }
.cm-otext { font-size: 15px; line-height: 1.5; }
.cm-otext:lang(th) { font-size: 15.5px; line-height: 1.55; }
.cm-rom { font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.cm-meta { display: flex; justify-content: flex-end; align-items: center; gap: 5px; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cm-tk { display: inline-grid; place-items: center; height: 15px; padding: 0 3px; border-radius: 4px; background: var(--pc); color: var(--pc-on); box-shadow: inset 0 0 0 1px var(--key); }
.cm-tk svg { width: 20px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.cm-comp { flex: none; display: flex; align-items: center; gap: 6px; padding: 10px 0 14px; border-top: var(--rule-w) solid var(--ink); }
.cm-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 10px 0 8px; border: 1.5px solid var(--edge); border-radius: 8px; background: var(--paper); overflow: hidden; }
.cm-ph { font-size: 14.5px; color: var(--ink-2); white-space: nowrap; }
.cm-send { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 8px; background: var(--chip); color: var(--on-chip); }
.cm-send .ic { width: 20px; height: 20px; }

/* the chat in motion (split-chat.js). A message crossing between the phones is one card with two
   faces, each clipped at the centre line: Thai on Nok's side of it, English on Tom's. */
.split > .cm-carrier { position: absolute; inset: 0; z-index: 2; pointer-events: none; visibility: hidden; background: none; }
.cm-face { position: absolute; inset: 0; overflow: hidden; }
.cm-face-n { right: calc(100% - var(--cx, 50%)); }
.cm-face-t { left: var(--cx, 50%); }
.cm-carrier.is-stacked .cm-face-n { right: 0; bottom: calc(100% - var(--cy, 50%)); }
.cm-carrier.is-stacked .cm-face-t { left: 0; top: var(--cy, 50%); }
.cm-card { position: absolute; left: 0; top: 0; padding: 8px 12px; border: 1.5px solid var(--key); border-radius: 8px; font-size: 17px; line-height: 1.42; overflow-wrap: anywhere; }
.cm-card:lang(th) { font-size: 17.5px; line-height: 1.58; }
.cm-face-n .cm-card { background: var(--py); color: var(--py-on); }
.cm-face-t .cm-card { background: var(--pb); color: var(--pb-on); }
/* what is being typed: one line that keeps its newest letters in sight */
.cm-typed { flex: 0 1 auto; min-width: 0; display: flex; justify-content: flex-end; overflow: hidden; white-space: nowrap; font-size: 15px; }
.cm-typed:empty { display: none; }
.cm-typed:not(:empty) + .cm-ph { display: none; }

@media (max-width: 720px) {
  .split { grid-template-columns: 1fr; }
  .split .split-mark { display: none; }
  .half { padding: 14px 14px 0; }
  .cm-col { max-width: none; }
  .cm-thread { gap: 8px; padding: 12px 0; }
  .cm-text { font-size: 16px; }
  .cm-text:lang(th) { font-size: 16.5px; }
  .cm-card { font-size: 16px; }
  .cm-card:lang(th) { font-size: 16.5px; }
}

/* Thai, properly */
.disc { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: var(--rule-w) solid var(--ink); font-weight: 700; font-size: 0.95rem; line-height: 1; color: var(--on-colour); }
.disc-nok { background: var(--red); color: var(--on-colour); }
.disc-tom { background: var(--blue); color: var(--on-deep); }
.disc-susan { background: var(--green); }
.who { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; font-weight: 600; }
.dir { font-family: var(--font-latin); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-2); white-space: nowrap; }
.msg { max-width: 88%; padding: 8px 11px 7px; border: var(--rule-w) solid var(--ink); }
.msg .dir { display: block; font-size: 0.66rem; margin-bottom: 2px; }
.msg .txt { display: block; font-weight: 500; line-height: 1.38; }
.msg .txt:lang(th) { line-height: 1.6; }
/* The app's message is a ruled cell, not a tailed bubble. */
.msg.in { align-self: flex-start; border-radius: 8px; background: var(--paper); }
.thai { grid-template-columns: 1fr 1fr; }
.thai > .cell { display: flex; flex-direction: column; }
@media (max-width: 720px) { .thai { grid-template-columns: 1fr; } }
.pair { margin-top: 18px; display: grid; gap: 10px; }
.pair .line { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: baseline; padding: 10px 12px; border: var(--rule-w) solid var(--ink); background: var(--paper); }
.pair .line .disc { width: 26px; height: 26px; font-size: 0.82rem; align-self: center; grid-row: span 2; }
.pair .said { font-size: 0.9rem; color: var(--ink-2); }
.pair .got { font-family: var(--font-thai); font-weight: 700; font-size: 1.22rem; line-height: 1.5; }
mark { background: var(--yellow); color: var(--on-colour); padding: 0 3px; box-shadow: inset 0 -2px 0 var(--on-colour); }
.big-th { font-family: var(--font-thai); font-weight: 800; font-size: clamp(2.2rem, 1.4rem + 2vw, 3.2rem); line-height: 1.3; margin-top: 18px; }
.big-roman { font-size: 1.15rem; font-style: italic; color: var(--ink-2); }
.big-en { font-weight: 700; font-size: 1.3rem; margin-top: 2px; }
.leads { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.leads > div { border: var(--rule-w) solid var(--ink); padding: 10px 12px; background: var(--paper); }
.leads .who { font-size: 0.8rem; margin-bottom: 4px; }
.leads .disc { width: 24px; height: 24px; font-size: 0.78rem; }
.leads .l1 { font-weight: 700; font-size: 1.12rem; line-height: 1.4; display: block; }
.leads .l1:lang(th) { font-weight: 800; }
.leads .l2 { font-size: 0.86rem; color: var(--ink-2); display: block; line-height: 1.5; }
.ctx { margin-top: 18px; display: grid; gap: 8px; }
.ctx .msg { max-width: 100%; }

/* private */
.private { grid-template-columns: 7fr 5fr; }
.private .statement { background: var(--blue); color: var(--on-deep); --focus: var(--on-deep); padding: clamp(28px, 4vw, 64px) clamp(20px, 3vw, 48px); }
.private .statement h2 { font-size: clamp(2.1rem, 1.2rem + 2.6vw, 3.6rem); line-height: 1.0; letter-spacing: -0.035em; font-weight: 700; text-wrap: balance; }
.private .statement h2 [lang="th"] { font-weight: 800; line-height: 1.3; letter-spacing: 0; }
.private .statement p { margin-top: 18px; color: var(--on-deep); max-width: 52ch; font-size: 1.1rem; }
.private .facts { display: grid; gap: var(--rule-w); background: var(--rule); padding: 0; }
.private .facts > div { background: var(--paper); padding: clamp(18px, 2vw, 28px); display: flex; gap: 14px; align-items: flex-start; }
.private .facts svg { flex: none; width: 34px; height: 34px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.private .facts p { margin-top: 4px; }
@media (max-width: 900px) { .private { grid-template-columns: 1fr; } }

/* where */
.where { grid-template-columns: repeat(3, 1fr); }
.where .cell { display: flex; flex-direction: column; gap: 6px; }
.where .dev { width: 72px; height: 72px; margin-bottom: 12px; }
.where .no { color: var(--ink); font-weight: 700; }
@media (max-width: 900px) { .where { grid-template-columns: 1fr; } }

/* faq */
.faq { padding: 0; display: grid; gap: var(--rule-w); background: var(--rule); }
.faq details { background: var(--paper); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 18px clamp(18px, 2.2vw, 32px); font-weight: 700; font-size: 1.12rem; line-height: 1.35; min-height: 60px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--yellow-t); }
.faq summary svg { flex: none; margin-left: auto; width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details[open] summary { background: var(--yellow-t); }
.faq .a { padding: 0 clamp(18px, 2.2vw, 32px) 22px; max-width: 72ch; color: var(--ink-2); }
.faq summary :lang(th), .faq summary[lang="th"] { font-weight: 700; }

/* closing */
.close { grid-template-columns: 1fr auto; }
.close > div { background: var(--red); color: var(--on-colour); padding: clamp(28px, 4vw, 64px) clamp(20px, 3vw, 48px); }
.close h2 { font-size: clamp(2.2rem, 1.2rem + 3vw, 4.2rem); line-height: 1.0; letter-spacing: -0.035em; font-weight: 700; text-wrap: balance; }
.close h2 [lang="th"] { font-weight: 800; line-height: 1.3; letter-spacing: 0; }
.close h2 .cl { display: inline-block; }
.close .ctas { margin-top: 0; align-items: center; height: 100%; }
.close .ctas-cell { background: var(--paper); color: var(--ink); display: flex; align-items: center; }
.close .btn-primary { background: var(--yellow); }
.close .btn-primary:hover { background: var(--ink); }
@media (max-width: 900px) { .close { grid-template-columns: 1fr; } }

/* footer */
.foot { grid-template-columns: 1fr auto; }
.foot > div { padding: 22px clamp(20px, 3vw, 48px); font-size: 0.92rem; color: var(--ink-2); }
.foot .links { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
.foot .links a { color: var(--ink); font-weight: 600; padding: 6px 0; }
.foot .links img { height: 24px; width: auto; }
.foot .right { display: flex; align-items: center; }
.foot .lang { padding: 0; }
@media (max-width: 720px) { .foot { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}


/* additions: grounds for section cells, illustration grammar */
.sec-body > .bg-green-t, .bg-green-t { background: var(--green-t); }
.sec-body > .bg-yellow-t, .bg-yellow-t { background: var(--yellow-t); }
.sec-body > .bg-red-t, .bg-red-t { background: var(--red-t); }
.sec-body > .bg-blue-t, .bg-blue-t { background: var(--blue-t); }
.sec-body > .bg-yellow, .bg-yellow { background: var(--yellow); }

/* one line weight for every drawing: the chart's own rule */
.ik { stroke: var(--pic-line); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.nf { fill: none; }
.f-red { fill: var(--red); } .f-yellow { fill: var(--yellow); } .f-green { fill: var(--green); } .f-blue { fill: var(--blue); }
.f-paper { fill: var(--pic-paper); } .f-ink { fill: var(--pic-line); }
.f-red-t { fill: var(--pic-red-t, var(--red-t)); } .f-yellow-t { fill: var(--pic-yellow-t, var(--yellow-t)); } .f-green-t { fill: var(--pic-green-t, var(--green-t)); } .f-blue-t { fill: var(--pic-blue-t, var(--blue-t)); }
/* a line drawn straight onto the cell ground, not onto a filled shape */
.ik.gl { stroke: var(--pic-free); }
.ik.s-paper { stroke: var(--pic-paper); }
.ik.s-blue-ink { stroke: var(--blue-ink); }
/* the symbol sheet takes no space */
.sprite { position: absolute; }
.logo-day { display: var(--show-day); } .logo-night { display: var(--show-night); }

.sec-top { grid-template-columns: 4fr 8fr; }
.sec-top > div { padding: clamp(24px, 3vw, 48px) clamp(20px, 3vw, 48px); }
.sec-top p { color: var(--ink-2); max-width: 60ch; align-self: end; }
.sec-top > div:last-child { display: flex; align-items: flex-end; gap: 16px; }
/* the chat's pause, at the end of the intro just above the phones */
.sec-top .pause { margin-left: auto; }
@media (max-width: 900px) { .sec-top { grid-template-columns: 1fr; } .sec-top > div:last-child { padding-top: 0; } .sec-top { gap: 0; } }
.sec-top h2 { font-size: clamp(1.8rem, 1.15rem + 1.7vw, 2.8rem); line-height: 1.04; letter-spacing: -0.03em; font-weight: 700; text-wrap: balance; }
.sec-top h2 [lang="th"] { font-weight: 800; letter-spacing: -0.005em; line-height: 1.32; }
.o-th { display: block; font-size: 0.86rem; color: var(--ink-2); line-height: 1.55; margin-top: 2px; }
.roman [lang="th"] { font-style: normal; }