/* Layout: follows sierra.ai section for section. Announcement bar, white nav, light hero panel with the voice player card overlapping it,
   centred logo wall, gradient bento, quotes on a floating white sheet, product UI in pale grid panels, simple close. */
:root {
  --white: #FFFFFF;
  --ink: #222222;
  --text: #302E2D;
  --muted: #6B6865;
  --line: #E4E0DC;
  --stone: #F6F5F3;
  --panel: #EFF3F8;
  --panel-line: #E2E8F0;
  --brand: #1E47C9;
  --brand-hover: #16379E;
  --bar: #2B4FBF;
  --err: #B4351F;  /* error text and invalid borders, 5.6:1 on white */
  --ok: #127A4F;   /* 4.8:1 or better on white, --panel and --stone, so 12px status text passes */
  --sans: "Libre Franklin", "Noto Sans Thai", "Helvetica Neue", Arial, sans-serif;
  --thai: "Noto Sans Thai", "Libre Franklin", Tahoma, sans-serif;
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1112px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--white); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; color: var(--ink); text-wrap: balance; }
p { margin: 0; }
img { height: auto; }
picture { display: contents; }   /* <picture> only swaps the source; layout stays on the <img> */
picture > source { display: none; }   /* with display: contents the <source> would otherwise take a grid or flex slot */
a { color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #FFFFFF; font-size: 14px; text-decoration: none; transition: top .15s ease-out; }
.skip:focus { top: 12px; }
main { scroll-margin-top: 68px; }
main:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.th { font-family: var(--thai); }
.icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.logo { display: block; height: 18px; width: calc(18px * 7.95); background: linear-gradient(90deg, #0B2286, #4F8DFB);
  -webkit-mask: url("img/logo-mask.png") 0 0 / auto 100% no-repeat; mask: url("img/logo-mask.png") 0 0 / auto 100% no-repeat; }
.mark { display: block; height: 16px; width: calc(16px * 7.95 * .2); background: currentColor;
  -webkit-mask: url("img/logo-mask.png") 0 0 / auto 100% no-repeat; mask: url("img/logo-mask.png") 0 0 / auto 100% no-repeat; }

.pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding-inline: 20px; border-radius: 999px; border: 0; font: 400 15px/1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .2s ease; }
.pill-brand { background: var(--brand); color: #FFFFFF; }
.pill-brand:hover { background: var(--brand-hover); }
.pill-white { background: #FFFFFF; color: var(--text); }
.pill-white:hover { background: var(--stone); }
.pill-sm { height: 34px; padding-inline: 14px; font-size: 13.5px; }
.pill-lg { height: 48px; padding-inline: 28px; font-size: 16px; }
.label { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding-inline: 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; color: var(--text); background: var(--white); }

/* announcement + nav */
.announce { background: #F3F5FA; color: var(--text); font-size: 13px; text-align: center; padding: 9px var(--gutter); border-bottom: 1px solid #E6E9F0; }
.announce a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); }
.nav .bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 68px; max-width: 1360px; margin-inline: auto; padding-inline: var(--gutter); }
.nav ul { display: flex; gap: 34px; list-style: none; margin: 0; padding: 0; font-size: 14px; }
.nav ul a { text-decoration: none; color: var(--text); }
.nav ul a:hover { color: var(--brand); }
.nav .right { justify-self: end; display: flex; align-items: center; gap: 20px; font-size: 14px; }
.nav .right > a:not(.pill) { text-decoration: none; }
@media (max-width: 900px) { .nav .bar { grid-template-columns: 1fr auto; } .nav ul, .nav .right > a:not(.pill) { display: none; } }

/* hero */
/* home hero: quiet, light panel. Brand blue is only an accent (a faint glow, the italic phrase, the primary button).
   Its height leaves room for about half of the voice card on the first screen */
.hero { padding: 12px var(--gutter) 0; }
.hero-panel { min-height: clamp(460px, calc(100svh - 300px), 680px); display: grid; align-items: center; color: var(--ink); }
/* the soft panel shared by the home hero and every page header */
.hero-panel, .page-hero.center { position: relative; overflow: hidden; border-radius: 24px; border: 1px solid #E6E9F0;
  background: radial-gradient(48% 60% at 50% 0%, rgba(79,141,251,.16) 0%, rgba(79,141,251,0) 70%), radial-gradient(40% 50% at 100% 100%, rgba(30,71,201,.08) 0%, rgba(30,71,201,0) 70%), radial-gradient(40% 50% at 0% 100%, rgba(143,163,189,.12) 0%, rgba(143,163,189,0) 70%), linear-gradient(180deg, #FAFBFD 0%, #F3F5FA 100%); }
.hero-panel::after, .page-hero.center::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27180%27 height=%27180%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.9%27 numOctaves=%272%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E"); }
.hero .in { position: relative; z-index: 1; max-width: 860px; margin-inline: auto; padding: clamp(56px, 8vw, 96px) var(--gutter) clamp(150px, 16vw, 190px); text-align: center; display: grid; justify-items: center; }
.hero .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); line-height: 1.6; }
.hero .eyebrow::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px rgba(30,71,201,.12); }
html[lang="th"] .hero .eyebrow { letter-spacing: .02em; font-size: 14px; text-transform: none; }
.hero h1 { color: var(--ink); font-size: clamp(2.5rem, 5.2vw, 4.3rem); line-height: 1.08; letter-spacing: -0.03em; margin-top: 24px; max-width: 15ch; font-weight: 400; }
.hero h1 em { font-style: italic; color: #1A3AA8; }
html[lang="th"] .hero h1 em { font-style: normal; }
.hero-sub { margin-top: 22px; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.65; color: var(--muted); max-width: 52ch; }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 34px; }

/* section scaffolding */
.sec { padding-block: clamp(80px, 9vw, 96px); }
.center { text-align: center; display: grid; justify-items: center; gap: 14px; }
h2 { font-size: clamp(2rem, 3.2vw, 2.5rem); line-height: 1.18; letter-spacing: -0.01em; }
.sub { color: var(--muted); font-size: 16px; max-width: 52ch; }

/* customer logo strip (the marquee styles are in pages.css) */
.wrap + .marquee { margin-top: 48px; }

/* bento */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
@media (max-width: 900px) { .bento { grid-template-columns: 1fr; } }
.card { position: relative; overflow: hidden; border-radius: 16px; padding: 28px 30px; color: #FFFFFF; min-height: 420px; display: grid; grid-template-rows: auto 1fr auto; gap: 16px; min-width: 0; }
.card.wide { grid-column: 1 / -1; min-height: 500px; }
.card h3 { color: #FFFFFF; font-size: 20px; line-height: 1.35; }
.card p { font-size: 15px; color: #FFFFFF; max-width: 44ch; }
.card .art { display: grid; place-items: center; min-width: 0; }
/* the light end of each gradient is set so white text, and white text on the 10% glass bubbles, stays at 4.5:1 or better */
.c1 { background: linear-gradient(130deg, #55677F 0%, #3F5676 100%); }
.c2 { background: linear-gradient(131deg, #2F5E96 0%, #4675AD 100%); }
.c3 { background: linear-gradient(130deg, #745F74 0%, #6B4663 100%); }
.c4 { background: linear-gradient(130deg, #91583D 0%, #89492D 100%); }
/* faint product UI behind the wide card */
.ghost { position: absolute; inset: 70px 30px 70px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; opacity: .22; pointer-events: none; }
.ghost div { border: 1px solid rgba(255,255,255,.6); border-radius: 10px; }
.ghost div:nth-child(2) { grid-row: span 2; }
.chat { position: relative; display: grid; gap: 10px; width: min(460px, 100%); }
.bubble { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(10px); border-radius: 14px; padding: 14px 16px; }
.bubble .who { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #FFFFFF; margin-bottom: 6px; }
.bubble .th { font-size: 16px; line-height: 1.5; }
.bubble small { display: block; color: #FFFFFF; font-size: 12.5px; margin-top: 2px; }
.bubble.me { justify-self: end; background: rgba(255,255,255,.06); max-width: 80%; }
.orbit { position: relative; width: 220px; height: 220px; }
.orbit .core { position: absolute; inset: 82px; border-radius: 50%; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.4); display: grid; place-items: center; color: #FFFFFF; }
.orbit span { position: absolute; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.92); color: #2F5E96; display: grid; place-items: center; font-size: 12.5px; font-weight: 600; box-shadow: 0 6px 14px -6px rgba(0,0,0,.3); }
.orbit span:nth-child(2) { left: 90px; top: 0; } .orbit span:nth-child(3) { left: 170px; top: 40px; } .orbit span:nth-child(4) { left: 178px; top: 128px; }
.orbit span:nth-child(5) { left: 100px; top: 180px; } .orbit span:nth-child(6) { left: 14px; top: 140px; } .orbit span:nth-child(7) { left: 4px; top: 50px; }
.tiles { display: grid; grid-template-columns: repeat(3, 56px); gap: 10px; }
.tiles span { height: 56px; border-radius: 12px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.3); display: grid; place-items: center; font-family: var(--thai); font-size: 13px; }
.rating { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.3); font-size: 14px; }
.rating i { width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; color: #89492D; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700; }

/* results sheet */
.sheet { position: relative; z-index: 2; background: var(--white); border-radius: 0 0 64px 64px; box-shadow: 0 40px 60px -30px rgba(34,34,34,.14); padding-block: clamp(80px, 9vw, 96px) clamp(88px, 10vw, 104px); }
.results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin-top: 56px; }
@media (max-width: 860px) { .results { grid-template-columns: 1fr; gap: 40px; } }
.res { display: grid; gap: 18px; align-content: start; }
.res img { height: 28px; width: auto; justify-self: start; mix-blend-mode: multiply; }
.res blockquote { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text); }
.res cite { font-style: normal; display: grid; gap: 2px; font-size: 13px; }
.res cite b { font-weight: 500; color: var(--ink); }
.res cite i { color: var(--muted); }

/* product */
.below { background: #FAFAF9; margin-top: -64px; padding-top: 64px; }
.product-panel { margin-top: 48px; border-radius: 24px; padding: clamp(20px, 4vw, 48px) clamp(16px, 4vw, 48px) 0; background-color: var(--panel); background-image: linear-gradient(var(--panel-line) 1px, transparent 1px), linear-gradient(90deg, var(--panel-line) 1px, transparent 1px); background-size: 28px 28px; overflow: hidden; }
.app { display: grid; grid-template-columns: 196px minmax(0, 1fr); background: var(--white); border: 1px solid var(--panel-line); border-bottom: 0; border-radius: 14px 14px 0 0; box-shadow: 0 20px 50px -24px rgba(30,50,80,.25); min-height: 460px; font-size: 13px; }
@media (max-width: 760px) { .app { grid-template-columns: 1fr; } .side { display: none; } }
.side { border-right: 1px solid var(--panel-line); padding: 18px 14px; display: grid; align-content: start; gap: 4px; }
.side .logo { height: 13px; width: calc(13px * 7.95); margin: 2px 8px 18px; }
.side small { font-size: 12px; color: var(--muted); padding: 10px 8px 4px; }
.side a { display: flex; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 8px; text-decoration: none; color: var(--text); }
.side a.on { background: var(--panel); }
.side .icon { width: 14px; height: 14px; color: var(--muted); }
.main { padding: 20px 22px 0; display: grid; gap: 16px; align-content: start; min-width: 0; }
.ask { font-size: 14px; color: var(--ink); padding-bottom: 14px; border-bottom: 1px solid var(--panel-line); }
.summary { font-size: 12.5px; color: var(--muted); }
.summary b { display: block; color: var(--ink); font-weight: 500; font-size: 12px; margin-bottom: 2px; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 760px) { .cols { grid-template-columns: 1fr; } }
.box { border: 1px solid var(--panel-line); border-radius: 12px; padding: 14px; display: grid; gap: 8px; min-width: 0; }
.box h5 { margin: 0; font-size: 12px; font-weight: 500; color: var(--ink); display: flex; justify-content: space-between; }
.box h5 span { color: var(--muted); font-weight: 400; }
.big { font-size: 30px; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.big small { font-size: 12px; color: var(--ok); margin-left: 6px; }
.box svg.chart { width: 100%; height: 120px; }
.trow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--panel-line); font-size: 12.5px; align-items: center; }
.trow:last-child { border-bottom: 0; }
.trow .n { font-variant-numeric: tabular-nums; color: var(--muted); }
.trow .d { font-variant-numeric: tabular-nums; color: var(--ok); width: 44px; text-align: right; }
.trow .d.dn { color: #B4561F; }
.askbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0 18px; padding: 10px 10px 10px 14px; border: 1px solid var(--panel-line); border-radius: 12px; color: var(--muted); }
.askbar span:last-child { background: var(--brand); color: #FFFFFF; border-radius: 8px; padding: 6px 12px; font-size: 12px; }
.note { margin-top: 14px; font-size: 12.5px; color: var(--muted); text-align: center; }

/* feature blocks */
.feature { padding-top: clamp(96px, 10vw, 104px); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
@media (max-width: 900px) { .two { grid-template-columns: 1fr; } .four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .four { grid-template-columns: 1fr; } }
.cell { display: grid; gap: 16px; align-content: start; min-width: 0; }
.pane { background: var(--panel); border-radius: 16px; padding: 22px; display: grid; align-content: center; gap: 10px; min-height: 360px; overflow: hidden; }
.four .pane { aspect-ratio: 1; min-height: 0; padding: 16px; }
.cell h3,
.cell h4 { font-size: 15px; font-weight: 500; color: var(--ink); }
.cell p { font-size: 14px; color: var(--muted); margin-top: -10px; max-width: 46ch; }
.ui { background: var(--white); border: 1px solid var(--panel-line); border-radius: 12px; padding: 12px 14px; font-size: 12.5px; color: var(--text); box-shadow: 0 8px 18px -14px rgba(30,50,80,.35); display: grid; gap: 8px; min-width: 0; }
.ui .hd { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--ink); }
.ui .hd span:last-child { font-size: 12px; border: 1px solid var(--panel-line); border-radius: 6px; padding: 3px 8px; color: var(--muted); }
.prompt { background: #E8EEFB; border: 1px solid #CFDCF7; border-radius: 10px; padding: 10px 12px; color: #1E3B8F; }
.steps { display: grid; gap: 6px; }
.steps div { display: flex; gap: 8px; align-items: center; }
.dot { width: 14px; height: 14px; border-radius: 50%; background: var(--brand); color: #FFFFFF; display: grid; place-items: center; font-size: 9px; flex: none; }
.dot.wait { background: transparent; border: 1.5px solid var(--panel-line); }
.chipset { display: flex; flex-wrap: wrap; gap: 6px; }
.chipset span { font-size: 12px; padding: 3px 8px; border-radius: 6px; background: var(--panel); color: var(--text); }
.input { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--panel-line); border-radius: 10px; padding: 8px 8px 8px 12px; color: var(--muted); }
.input i { width: 24px; height: 24px; border-radius: 6px; background: var(--brand); color: #FFFFFF; display: grid; place-items: center; font-style: normal; font-size: 12px; }
.rec { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--panel-line); border-radius: 10px; }
.rec.on { border-color: #B9CBF3; background: #F4F7FE; }
.rec .icon { color: var(--brand); margin-top: 1px; }
.btnrow { display: flex; gap: 8px; flex-wrap: wrap; }
.btnrow span { font-size: 12px; padding: 6px 10px; border-radius: 8px; border: 1px solid #CFDCF7; color: var(--brand); }
.minibar { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 12px; color: var(--muted); }
.minibar i { display: block; height: 8px; border-radius: 4px; background: var(--brand); opacity: .75; }
.minibar.warn i { background: #D98A4E; }
.kv { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.kv b { font-weight: 500; }
.okx { color: var(--ok); }
.warnx { color: #B4561F; }


/* close */
.closing { padding-block: clamp(72px, 8vw, 88px) clamp(80px, 9vw, 96px); }
.demo { width: min(560px, 100%); margin: 28px auto 0; display: grid; gap: 12px; text-align: left; }
.demo[hidden] { display: none; }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .f2 { grid-template-columns: 1fr; } }
label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
input, select { font: 400 15px/1.4 var(--sans); height: 44px; padding-inline: 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--white); color: var(--text); width: 100%; }
.demo .pill { justify-self: center; margin-top: 6px; }
.form-status { font-size: 14px; color: var(--ok); min-height: 1.4em; text-align: center; }
.mailto { font-size: 14px; color: var(--muted); }
.mailto b { font-weight: 500; color: var(--text); user-select: all; }

/* footer */
footer { background: var(--stone); padding-block: 56px 28px; font-size: 13.5px; color: var(--text); }
.foot { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 860px) { .foot { grid-template-columns: 1fr 1fr; } }
.foot h4 { font-size: 13.5px; font-weight: 500; margin-bottom: 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot a { text-decoration: none; color: var(--muted); }
.foot a:hover { color: var(--ink); }
.legal { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 48px; color: var(--muted); font-size: 12.5px; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
/* product panels: a real screenshot fills the panel; the review log lists findings and the changes made */
.pane.pane-shot { padding: 0; align-content: stretch; }
.pane.pane-shot img { display: block; width: 100%; height: 100%; min-height: 360px; object-fit: cover; object-position: left top; }
.revlog { display: grid; gap: 0; font-size: 13px; }
.rv-h, .rv { display: grid; grid-template-columns: 1fr 18px 1fr; gap: 8px; align-items: start; padding: 10px 0; border-top: 1px solid var(--panel-line); }
.rv-h { grid-template-columns: 1fr 1fr; border-top: 0; padding-top: 2px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.rv > span:nth-child(2) { color: var(--muted); text-align: center; }
.rv b { display: block; margin-top: 3px; font-weight: 500; font-size: 12px; }
.rv-note { font-size: 12px; color: var(--muted); padding-top: 8px; border-top: 1px solid var(--panel-line); }
/* screenshot panels in a row share one height, so the headings and text under them line up */
.pane.pane-shot.fit { padding: 24px; height: clamp(320px, 36vw, 460px); min-height: 0; display: flex; align-items: center; justify-content: center; }
.pane.pane-shot.fit img { width: 100%; height: 100%; min-height: 0; object-fit: contain; border-radius: 12px; }
.pane.pane-shot.fit.top { align-items: stretch; padding-bottom: 0; }
.pane.pane-shot.fit.top img { object-fit: cover; object-position: top; border-radius: 12px 12px 0 0; box-shadow: 0 10px 30px -12px rgba(30,40,60,.25); }
/* product page: real platform screenshot in the grid frame, cut off at the bottom like a window */
.product-panel .app-shot { display: block; width: 100%; height: auto; border-radius: 14px 14px 0 0; border: 1px solid var(--panel-line); border-bottom: 0; box-shadow: 0 20px 50px -24px rgba(30,40,60,.35); }

/* Thai script needs more room than Latin at small sizes: the product mock-up labels go up half a step */
html[lang="th"] .chipset span, html[lang="th"] .btnrow span, html[lang="th"] .minibar, html[lang="th"] .side small,
html[lang="th"] .ui .hd span:last-child, html[lang="th"] .rv-h, html[lang="th"] .big small { font-size: 13px; }

/* ---------- shared across inner pages ---------- */
.nav ul a[aria-current="page"] { color: var(--brand); }
.menu-btn { display: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--ink); cursor: pointer; place-items: center; }
.menu-btn .icon { width: 18px; height: 18px; }
.mnav { border-top: 1px solid var(--line); background: var(--white); padding: 8px var(--gutter) 20px; display: grid; gap: 2px; }
.mnav a { padding: 12px 4px; text-decoration: none; font-size: 16px; border-bottom: 1px solid var(--line); }
.mnav a:last-child { border-bottom: 0; }
@media (max-width: 900px) { .menu-btn { display: grid; } .nav .right .pill { display: none; } }
@media (min-width: 901px) { .mnav { display: none !important; } }

.page-hero { padding-block: clamp(64px, 8vw, 112px) clamp(40px, 5vw, 64px); }
.page-hero.center { text-align: center; display: grid; justify-items: center; margin: 12px var(--gutter) clamp(32px, 4vw, 56px); }
.page-hero.center > .wrap { position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(2.4rem, 4.6vw, 3.6rem); line-height: 1.1; letter-spacing: -0.02em; max-width: 20ch; margin-top: 18px; }
.page-hero .lede { font-size: 18px; color: var(--muted); max-width: 60ch; margin-top: 18px; line-height: 1.55; }
.page-hero .cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.page-hero.center .cta { justify-content: center; }
.crumbs { font-size: 13.5px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--brand); }
.pill-line { background: var(--white); color: var(--ink); border: 1px solid var(--line); }
.pill-line:hover { border-color: var(--ink); }

.band { padding-block: clamp(72px, 8vw, 88px); }   /* desktop spacing capped lower; phones keep the minimum */
.band.stone { background: var(--stone); }
.band.tight { padding-block: clamp(48px, 6vw, 80px); }
.sec-title { display: grid; gap: 12px; margin-bottom: 44px; }
.sec-title.center { text-align: center; justify-items: center; }
.sec-title p { color: var(--muted); font-size: 16.5px; max-width: 58ch; }

/* two-column text + visual */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.split.flip > :first-child { order: 2; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split.flip > :first-child { order: 0; } }
.split h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.18; }
.split p { color: var(--muted); font-size: 16.5px; line-height: 1.65; margin-top: 16px; max-width: 58ch; }
.visual { border-radius: 24px; padding: clamp(18px, 3vw, 36px); background-color: var(--panel); background-image: linear-gradient(var(--panel-line) 1px, transparent 1px), linear-gradient(90deg, var(--panel-line) 1px, transparent 1px); background-size: 28px 28px; display: grid; gap: 10px; align-content: center; min-height: 340px; min-width: 0; }
.visual img { width: 100%; border-radius: 12px; display: block; border: 1px solid var(--panel-line); }

/* checklist of key points */
.points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 700px) { .points { grid-template-columns: 1fr; } }
.points li { list-style: none; display: flex; gap: 12px; align-items: flex-start; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); font-size: 15.5px; color: var(--text); line-height: 1.5; }
.points li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--brand) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 12.5l4 4 8-9'/></svg>") center / 12px no-repeat; }
ul.points { margin: 0; padding: 0; }

/* capability cards */
.caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 960px) { .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .caps { grid-template-columns: 1fr; } }
.cap { display: grid; gap: 10px; align-content: start; padding: 26px; border-radius: 16px; background: var(--white); border: 1px solid var(--line); text-decoration: none; color: inherit; transition: border-color .2s ease, transform .2s ease; }
.cap:hover { border-color: var(--brand); transform: translateY(-2px); }
.cap .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--panel); color: var(--brand); display: grid; place-items: center; }
.cap .ic .icon { width: 20px; height: 20px; }
.cap h3 { font-size: 19px; margin-top: 6px; }
.cap p { font-size: 15px; color: var(--muted); line-height: 1.55; }
.cap span.more { font-size: 14px; color: var(--brand); margin-top: 4px; }

/* stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-top: 28px; }
.stat { padding: 22px 0 0; border-top: 1px solid var(--line); }
.stat b { display: block; white-space: nowrap; font-size: clamp(1.6rem, 3.4vw, 2.6rem); font-weight: 400; color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat span { font-size: 14.5px; color: var(--muted); }

/* team */
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 860px) { .team { grid-template-columns: 1fr; } }
.member { display: grid; gap: 14px; align-content: start; }
.member img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; background: var(--stone); }
.member h3 { font-size: 20px; }
.member .role { font-size: 14px; color: var(--brand); margin-top: -8px; }
.member p { font-size: 15px; color: var(--muted); line-height: 1.55; }
.member small { display: block; font-size: 13.5px; color: var(--muted); }

/* blog list */
.filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 40px; }
.chip-btn { height: 36px; padding-inline: 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--text); font: 400 14px/1 var(--sans); cursor: pointer; }
.chip-btn[aria-pressed="true"] { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
@media (max-width: 960px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .posts { grid-template-columns: 1fr; } }
.pcard { display: grid; gap: 14px; align-content: start; text-decoration: none; color: inherit; }
.pcard img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; border: 1px solid var(--line); background: var(--stone); transition: transform .3s ease; }
.pcard:hover img { transform: scale(1.015); }
.pmeta { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.pmeta .cat { color: var(--brand); }
.pcard h3 { font-size: 19px; line-height: 1.35; }
.pcard:hover h3 { color: var(--brand); }
.pcard p { font-size: 15px; color: var(--muted); line-height: 1.55; }
.featured { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; text-decoration: none; color: inherit; margin-bottom: 64px; padding-bottom: 64px; border-bottom: 1px solid var(--line); }
@media (max-width: 860px) { .featured { grid-template-columns: 1fr; } }
.featured img { width: 100%; aspect-ratio: 1; max-height: 460px; object-fit: cover; border-radius: 24px; border: 1px solid var(--line); }
.featured h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.2; margin-top: 12px; }
.featured p { color: var(--muted); font-size: 16.5px; margin-top: 14px; line-height: 1.6; }
.featured .more { display: inline-block; margin-top: 18px; color: var(--brand); font-size: 15px; }

/* article */
.article { max-width: 760px; margin-inline: auto; }
.article-head { display: grid; gap: 16px; padding-block: clamp(56px, 7vw, 96px) 32px; }
.article-head h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; letter-spacing: -0.015em; }
.article-head .lede { font-size: 19px; color: var(--muted); line-height: 1.55; }
.byline { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); padding-top: 8px; }
.byline .av { width: 36px; height: 36px; border-radius: 50%; background: var(--panel); display: grid; place-items: center; color: var(--brand); }
.byline b { color: var(--ink); font-weight: 500; display: block; }
.cover { width: min(520px, 100%); aspect-ratio: 1; object-fit: cover; border-radius: 24px; border: 1px solid var(--line); display: block; margin: 8px auto 48px; }
.prose { font-size: 17px; line-height: 1.75; color: var(--text); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: 26px; line-height: 1.3; margin-top: 2em; }
.prose h3 { font-size: 21px; line-height: 1.35; margin-top: 1.8em; }
.prose h2 + *, .prose h3 + * { margin-top: .6em; }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: .5em; }
.prose li::marker { color: var(--brand); }
.prose a { color: var(--brand); text-underline-offset: 3px; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose blockquote { margin: 0; padding-left: 20px; border-left: 2px solid var(--brand); color: var(--muted); }
.article-foot { margin-top: 56px; padding: 28px; border-radius: 16px; background: var(--stone); display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; }
.article-foot p { font-size: 17px; color: var(--ink); max-width: 40ch; }

/* faq */
.faq-list { max-width: 820px; margin-inline: auto; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 22px 0; font-size: 17.5px; color: var(--ink); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-size: 24px; line-height: 1; color: var(--brand); transition: transform .2s ease; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { color: var(--muted); font-size: 16px; line-height: 1.65; padding: 0 48px 24px 0; max-width: 68ch; }

/* contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.ticks { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.ticks li { display: flex; gap: 12px; font-size: 16.5px; color: var(--text); }
.ticks li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--brand) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 12.5l4 4 8-9'/></svg>") center / 12px no-repeat; }
.reach { margin-top: 36px; display: grid; gap: 6px; font-size: 15px; color: var(--muted); }
.reach b { color: var(--ink); font-weight: 500; user-select: all; }
.lead-form { display: grid; gap: 14px; padding: clamp(22px, 3vw, 36px); border-radius: 24px; border: 1px solid var(--line); background: var(--white); box-shadow: 0 30px 60px -40px rgba(34,34,34,.25); }
.lead-form h2 { font-size: 22px; margin-bottom: 4px; }
.lead-form .f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .lead-form .f2 { grid-template-columns: 1fr; } }
.lead-form label { display: grid; gap: 6px; font-size: 13.5px; color: var(--muted); }
.lead-form .opt { color: var(--muted); font-weight: 400; }
.lead-form input, .lead-form select, .lead-form textarea { font: 400 16px/1.4 var(--sans); padding: 12px 13px; border-radius: 10px; border: 1px solid var(--line); background: var(--white); color: var(--text); width: 100%; }
.lead-form textarea { min-height: 96px; resize: vertical; }
.lead-form .pill { justify-self: start; margin-top: 4px; }
.lead-form .note { font-size: 12.5px; color: var(--muted); }

/* legal */
.legal-wrap { max-width: 760px; margin-inline: auto; padding-block: clamp(56px, 7vw, 96px); }
.legal-wrap h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
.legal-wrap .updated { color: var(--muted); font-size: 14px; margin-top: 10px; }

/* closing band shared by inner pages */
.closing .pill + .mailto { margin-top: 4px; }
.closing .center .pill { margin-top: 10px; }

.textlink { font-size: 14.5px; color: var(--brand); text-decoration: none; }
.textlink:hover { text-decoration: underline; text-underline-offset: 3px; }

/* section headers, tabs and screenshots shared by home and product */
.kicker { font-size: 14px; color: var(--brand); font-weight: 500; }
.sec-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 36px; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tab { font: 400 15px/1 var(--sans); padding: 11px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--muted); cursor: pointer; }
.tab[aria-selected="true"] { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }
.shot { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; align-items: center; }
@media (max-width: 860px) { .shot { grid-template-columns: 1fr; } }
.shot img { width: 100%; border-radius: 16px; display: block; border: 1px solid var(--line); }
.shot h3,
.shot h4 { margin: 0 0 8px; font-size: 22px; font-weight: 400; color: var(--ink); }
.shot p { color: var(--muted); }
.shot ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.shot li { display: flex; gap: 10px; }
.shot li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); margin-top: 8px; flex: none; }

/* the hidden attribute must win over component display rules (cards, menu, tab panels) */
[hidden] { display: none !important; }

/* book-a-demo flow */
.steps-list { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 18px; counter-reset: step; }
.steps-list li { counter-increment: step; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 2px 14px; }
.steps-list li::before { content: counter(step); grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; background: var(--panel); color: var(--brand); display: grid; place-items: center; font-size: 14px; font-weight: 500; }
.steps-list b { font-weight: 500; color: var(--ink); font-size: 16px; }
.steps-list span { color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.lead-card { min-width: 0; }
.lead-form .consent { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13.5px; line-height: 1.5; color: var(--text); padding: 12px 14px; border-radius: 10px; background: var(--stone); }
.lead-form .consent input { width: 18px; height: 18px; margin: 2px 0 0; padding: 0; accent-color: var(--brand); }
.lead-form .consent a { color: var(--brand); }
.lead-form [aria-invalid="true"] { border-color: var(--err); }
.lead-form .consent:has([aria-invalid="true"]) { outline: 1px solid var(--err); }
.lead-form .form-status.err { color: var(--err); }
.field-err { color: var(--err); font-size: 13.5px; line-height: 1.4; }
.lead-form .consent + .field-err { margin-top: -6px; }
.lead-form button[disabled] { opacity: .6; cursor: progress; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* SMS code popup, opened after the demo form is sent */
.otp { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 20px; background: var(--white); color: var(--text); box-shadow: 0 40px 80px -30px rgba(34,34,34,.45); }
.otp::backdrop { background: rgba(34,34,34,.48); }
.otp[open] { animation: otp-in .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes otp-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.otp-form { position: relative; display: grid; justify-items: center; gap: 14px; padding: clamp(28px, 6vw, 40px) clamp(20px, 5vw, 36px) clamp(24px, 5vw, 32px); text-align: center; }
.otp-form h2 { font-size: 1.6rem; line-height: 1.2; }
.otp-form > p { color: var(--muted); font-size: 15px; line-height: 1.55; max-width: 34ch; }
.otp-form > p b { color: var(--ink); font-weight: 500; white-space: nowrap; }
.otp-x { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.otp-x:hover { background: var(--stone); color: var(--ink); }
.otp-x .icon { width: 18px; height: 18px; }
.otp-cells { display: grid; grid-template-columns: repeat(6, minmax(0, 52px)); gap: clamp(6px, 2vw, 10px); margin-top: 6px; }
.otp-cells input { width: 100%; height: 58px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--white); color: var(--ink); text-align: center; font: 500 24px/1 var(--sans); font-variant-numeric: tabular-nums; caret-color: var(--brand); transition: border-color .15s ease, box-shadow .15s ease; }
.otp-cells input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(30,71,201,.16); }
.otp-cells input[aria-invalid] { border-color: var(--err); }
.otp-cells input[aria-invalid]:focus { box-shadow: 0 0 0 3px rgba(180,53,31,.14); }
.otp-status { min-height: 1.5em; font-size: 14px; color: var(--muted); max-width: 34ch; }
.otp-status.err { color: var(--err); }
.otp-go { width: 100%; height: 48px; }
.otp-go:disabled { opacity: .7; cursor: progress; }
.otp-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; }
.textbtn { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--brand); font: 400 14.5px/1 var(--sans); cursor: pointer; }
.textbtn:disabled { color: var(--muted); cursor: default; }
.textbtn:not(:disabled):hover { text-decoration: underline; text-underline-offset: 3px; }
.textbtn span { font-variant-numeric: tabular-nums; }
.otp-preview, .done-preview { font-size: 13px; color: var(--brand); background: var(--panel); padding: 8px 12px; border-radius: 8px; }
html[lang="th"] .otp-form, html[lang="th"] .textbtn { font-family: var(--thai); }
@media (prefers-reduced-motion: reduce) { .otp[open] { animation: none; } }

/* demo confirmation page */
.confirm .wrap { display: grid; justify-items: center; }
.confirm .ring { margin-bottom: 26px; }
.confirm .lede { max-width: 50ch; }
.cf-steps { list-style: none; margin: 36px 0 4px; padding: 0; display: grid; gap: 18px; width: min(460px, 100%); text-align: left; }
.cf-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 2px 14px; }
.cf-steps .dot { grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; background: var(--panel); color: var(--brand); display: grid; place-items: center; font-size: 14px; font-weight: 500; }
.cf-steps .done .dot { background: var(--ok); color: #FFFFFF; }
.cf-steps .dot .icon { width: 16px; height: 16px; stroke-width: 2.2; }
.cf-steps .now .dot { background: var(--brand); color: #FFFFFF; }
.cf-steps b { font-weight: 500; color: var(--ink); font-size: 16px; }
.cf-steps span:not(.dot) { color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.confirm .done-preview { margin-top: 18px; }
.confirm .cta { margin-top: 30px; }
.cf-small { margin-top: 22px; font-size: 14px; color: var(--muted); }
.ring { position: relative; width: 72px; height: 72px; border-radius: 50%; background: var(--brand); color: #FFFFFF; display: grid; place-items: center; }
.ring .icon { width: 28px; height: 28px; }
.ring::before, .ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--brand); animation: ring 2s ease-out infinite; }
.ring::after { animation-delay: 1s; }
@keyframes ring { from { transform: scale(1); opacity: .6; } to { transform: scale(1.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ring::before, .ring::after { animation: none; opacity: 0; } }

/* language toggle: EN | ไทย, the current language filled */
.lang { display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; line-height: 1; }
.lang a { display: block; padding: 6px 10px; border-radius: 999px; text-decoration: none; color: var(--muted); }
.lang a:hover { color: var(--ink); }
.lang a[aria-current] { background: var(--ink); color: #FFFFFF; }
.lang a[lang="th"] { font-family: var(--thai); }
@media (max-width: 900px) { .nav .right { gap: 12px; } }
@media (max-width: 400px) { .lang a { padding: 6px 8px; } }

/* Thai pages: Thai script has tall vowels and tone marks, so give it more line height and no negative tracking */
html[lang="th"] body { line-height: 1.7; }
html[lang="th"] :is(h1, h2, h3, h4, .stat b, .big) { letter-spacing: 0 !important; }
html[lang="th"] :is(h1, h2) { line-height: 1.3 !important; }
html[lang="th"] h3, html[lang="th"] h4 { line-height: 1.45; }
html[lang="th"] .hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1.25; max-width: 18ch; }
html[lang="th"] .page-hero h1 { max-width: 22ch; }
html[lang="th"] :is(p, li) { line-height: 1.75; text-wrap: pretty; }
html[lang="th"] :is(.lede, .sub) { line-height: 1.65; }
html[lang="th"] .announce { line-height: 1.5; }
html[lang="th"] .pill { line-height: 1.3; }

/* keep clear space between the centred menu and the right-hand group (language toggle, Contact, Book a demo) */
.nav .bar { column-gap: 40px; }
@media (max-width: 1279px) { .nav .right > a:not(.pill) { display: none; } }
@media (max-width: 1100px) { .nav ul { gap: 24px; } }

/* footer social links */
.social { display: flex; gap: 16px; margin-top: 14px; font-size: 13.5px; }
.social a { color: var(--muted); text-decoration: none; }
.social a:hover { color: var(--brand); }

/* cookie consent bar (only appears when analytics is switched on) */
.consent-bar { position: fixed; z-index: 60; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(720px, calc(100% - 32px)); display: flex; align-items: center; gap: 20px; padding: 16px 18px 16px 22px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.14); font-size: 14px; line-height: 1.5; }
.consent-bar p { margin: 0; color: var(--text); }
.consent-bar a { color: var(--brand); }
.consent-bar div { display: flex; gap: 8px; flex: none; }
@media (max-width: 600px) { .consent-bar { flex-direction: column; align-items: stretch; } .consent-bar div > * { flex: 1; } }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }


/* home: voice player card (Thai samples from the Gowajee TTS demo API). It overlaps the bottom of the hero so about half shows on the first screen */
.voices-peek { position: relative; z-index: 2; margin-top: clamp(-170px, -14vw, -120px); }
.vl { --d: 172px; --gap: 168px; max-width: 760px; margin-inline: auto; padding: 26px 22px 22px; border-radius: 24px; background: var(--white); border: 1px solid var(--line);
  box-shadow: 0 30px 70px -36px rgba(20,30,60,.28), 0 1px 3px rgba(20,30,60,.06); display: grid; justify-items: center; text-align: center; }
.vl-title { font-size: 15px; font-weight: 500; color: var(--ink); }
.vl-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; }
.vl-tabs button { height: 34px; padding-inline: 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--text); font: 400 13.5px/1 var(--sans); cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
html[lang="th"] .vl-tabs button { font-family: var(--thai); }
.vl-tabs button:hover { border-color: var(--ink); }
.vl-tabs button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.vl-stage { position: relative; width: 100%; height: calc(var(--d) + 74px); margin-top: 10px; overflow: hidden; touch-action: pan-y; border-radius: 12px; outline-offset: -3px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); }
.vl-track { position: absolute; inset: 0; }
.vl-item { position: absolute; top: 14px; left: 50%; width: var(--d); margin-left: calc(var(--d) / -2); display: grid; justify-items: center; transform: translateX(calc(var(--o, 0) * var(--gap))); }
.vl.ready .vl-item { transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .5s ease; }
.vl-item[data-pos="off"] { opacity: 0; pointer-events: none; }
.vl-item[data-pos="far"] { opacity: .5; }
.vl-orb { position: relative; width: var(--d); aspect-ratio: 1; border: 0; padding: 0; border-radius: 50%; cursor: pointer; overflow: hidden; isolation: isolate;
  background: radial-gradient(55% 55% at 30% 28%, var(--a) 0%, transparent 72%), radial-gradient(65% 65% at 76% 78%, var(--b) 0%, transparent 72%), radial-gradient(circle at 50% 50%, var(--b), var(--c));
  box-shadow: inset -12px -16px 34px rgba(0,0,0,.2), inset 10px 12px 26px rgba(255,255,255,.3), 0 18px 36px -18px var(--c);
  transform: scale(calc(var(--s, 1) * (1 + var(--lvl, 0) * .08))); transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .5s ease; }
.vl-item[data-pos="near"] .vl-orb { --s: .66; }
.vl-item[data-pos="far"] .vl-orb, .vl-item[data-pos="off"] .vl-orb { --s: .44; filter: blur(1px) saturate(.75); }
/* the glow is clipped to the orb's circle itself (radius .5 / 1.4 of this box): iOS Safari ignores the orb's
   border-radius when clipping a blurred, animated child, which drew a square behind every orb */
.vl-orb::after { content: ""; position: absolute; inset: -20%; z-index: -1; border-radius: 50%; filter: blur(16px); opacity: .85; clip-path: circle(35.7143% at 50% 50%);
  background: conic-gradient(from 0deg, var(--a), transparent 25%, var(--b) 45%, transparent 65%, var(--a) 85%, var(--a));
  animation: vl-spin 18s linear infinite; mix-blend-mode: soft-light; }
.vl-orb::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 50%; opacity: .45; mix-blend-mode: overlay; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27140%27 height=%27140%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.9%27 numOctaves=%272%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E"); }
.vl-item.playing .vl-orb::after { animation-duration: 4s; opacity: 1; }
@keyframes vl-spin { to { transform: rotate(1turn); } }
.vl-play { position: absolute; left: 50%; top: 50%; z-index: 2; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: #FFFFFF;
  box-shadow: 0 4px 14px rgba(0,0,0,.2); display: grid; place-items: center; opacity: 0; transform: scale(.7); transition: opacity .3s ease, transform .3s ease; }
.vl-item[data-pos="center"] .vl-play { opacity: 1; transform: none; }
.vl-play::before { content: ""; width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent var(--ink); }
.vl-item.playing .vl-play::before { width: 13px; height: 14px; margin: 0; border: 0; border-inline: 4px solid var(--ink); }
.vl-item.loading .vl-play::before { width: 18px; height: 18px; margin: 0; border: 2px solid var(--line); border-top-color: var(--ink); border-radius: 50%; animation: vl-spin .8s linear infinite; }
.vl-cap { margin-top: 12px; display: grid; gap: 1px; text-align: center; white-space: nowrap; transition: opacity .4s ease; }
.vl-cap b { font-weight: 500; font-size: 15px; color: var(--ink); }
.vl-cap span { font-size: 12.5px; color: var(--muted); }
.vl-item:not([data-pos="center"]) .vl-cap { opacity: 0; }
.vl-arrow { position: absolute; top: calc(14px + var(--d) + 14px); left: 50%; width: 32px; height: 32px; margin-left: -16px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; transition: background .2s ease, color .2s ease; }
.vl-arrow:hover { background: var(--stone); color: var(--ink); }
.vl-arrow svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vl-arrow.prev { transform: translateX(-84px); }
.vl-arrow.next { transform: translateX(84px); }
.vl-line { min-height: 92px; max-width: 62ch; display: grid; gap: 6px; align-content: start; margin-top: 6px; }
.vl-line .th { font-size: 16px; line-height: 1.65; color: var(--ink); transition: opacity .3s ease; }
.vl-line small { font-size: 13.5px; color: var(--muted); line-height: 1.5; transition: opacity .3s ease; }
.vl-line.swap .th, .vl-line.swap small { opacity: 0; }
.vl-status:empty { display: none; }
.vl-status { font-size: 13px; color: #B3261E; }
.vl-lab { margin-top: 12px; font-size: 13.5px; color: var(--brand); text-underline-offset: 3px; }
@media (max-width: 600px) { .vl { --d: 132px; --gap: 120px; padding: 22px 14px 18px; } .vl-arrow.prev { transform: translateX(-74px); } .vl-arrow.next { transform: translateX(74px); } .vl-line .th { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .vl-item, .vl-orb { transition: none; } .vl-orb::after { animation: none; } }
/* feature sections have top padding only; leave room before the next band */
.feature + .band { margin-top: 80px; }

/* use cases page: tinted hero, logo marquee, CEO video, filterable use-case cards */
.marquee-sec { padding-block: clamp(48px, 6vw, 72px); }
.marquee-title { text-align: center; font-size: 14px; color: var(--muted); margin-bottom: 24px; }
.marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee ul { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.marquee li { flex: none; width: 200px; height: 72px; display: grid; place-items: center; }
.marquee img { max-height: 34px; max-width: 150px; width: auto; filter: grayscale(1); opacity: .7; mix-blend-mode: multiply; }
.marquee img.sq { max-height: 48px; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (max-width: 600px) { .marquee li { width: 150px; } .marquee img { max-width: 110px; max-height: 26px; } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } .marquee ul[aria-hidden] { display: none; } .marquee { -webkit-mask: none; mask: none; } .marquee ul { flex-wrap: wrap; justify-content: center; } }
.ceo-video { position: relative; max-width: 960px; margin: 40px auto 0; border-radius: 24px; overflow: hidden; background: #111; aspect-ratio: 16 / 9; box-shadow: 0 30px 60px -30px rgba(34,34,34,.35); }
.ceo-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ceo-play { position: absolute; inset: 0; border: 0; padding: 0; background: linear-gradient(0deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 40%); cursor: pointer; display: flex; align-items: flex-end; justify-content: flex-start; }
.ceo-play span { margin: 0 0 clamp(16px, 3vw, 28px) clamp(16px, 3vw, 28px); height: 48px; padding: 0 20px 0 16px; border-radius: 999px; background: rgba(255,255,255,.96); color: var(--ink); font: 500 15px/1 var(--sans); box-shadow: 0 8px 24px rgba(0,0,0,.25); display: inline-flex; align-items: center; gap: 10px; transition: transform .2s ease; }
.ceo-play span::before { content: ""; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent var(--ink); }
html[lang="th"] .ceo-play span { font-family: var(--thai); }
.ceo-play:hover span { transform: scale(1.04); }
.ceo-video.started .ceo-play { display: none; }
.uc-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 32px; }
.uc-filter button { height: 38px; padding-inline: 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--text); font: 400 14px/1 var(--sans); cursor: pointer; transition: border-color .2s ease, background .2s ease, color .2s ease; }
html[lang="th"] .uc-filter button { font-family: var(--thai); }
.uc-filter button:hover { border-color: var(--ink); }
.uc-filter button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #FFFFFF; }
.uc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .uc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .uc-grid { grid-template-columns: 1fr; } }
.uc { display: grid; grid-template-rows: auto 1fr; border-radius: 16px; overflow: hidden; background: var(--white); border: 1px solid var(--line); }
.uc img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.uc-body { display: grid; gap: 8px; align-content: start; padding: 20px 22px 24px; }
.uc .tag { font-size: 12.5px; color: var(--brand); }
.uc h3 { font-size: 18px; line-height: 1.35; }
.uc p { font-size: 14.5px; line-height: 1.6; color: var(--muted); }
html[lang="th"] .uc p { line-height: 1.7; }
.uc-more { text-align: center; margin-top: 36px; }
@media (max-width: 600px) { .hero-panel { min-height: 0; } .hero .in { padding-top: 40px; padding-bottom: 104px; } .hero-cta { margin-top: 26px; } .voices-peek { margin-top: -80px; } }
@media (max-width: 600px) { .hero h1, html[lang="th"] .hero h1 { font-size: 2.15rem; margin-top: 14px; } .hero .eyebrow { font-size: 12px; } html[lang="th"] .hero .eyebrow { font-size: 13px; } .hero-sub { font-size: 15px; margin-top: 14px; } .hero-cta { margin-top: 22px; } .hero-cta .pill-lg { height: 44px; padding-inline: 22px; font-size: 15px; } .hero .in { padding-bottom: 96px; } .voices-peek { margin-top: -72px; } }
@media (max-width: 600px) { .hero-cta { flex-wrap: nowrap; gap: 8px; } .hero-cta .pill-lg { padding-inline: 16px; font-size: 14.5px; } }

/* about page: the CEO video overlaps the bottom of the page header, so about half of it shows on the first screen */
.page-hero.about-hero { margin-bottom: 0; padding-top: clamp(52px, 6vw, 80px); padding-bottom: clamp(150px, 15vw, 220px); }
.video-peek { position: relative; z-index: 2; margin-top: clamp(-170px, -12vw, -110px); padding-bottom: clamp(64px, 8vw, 104px); }
.video-peek .ceo-video { margin-top: 0; border: 1px solid #E6E9F0; box-shadow: 0 30px 70px -36px rgba(20,30,60,.35), 0 1px 3px rgba(20,30,60,.06); }
.video-cap { margin-top: clamp(28px, 4vw, 44px); }
@media (max-width: 600px) { .page-hero.about-hero { padding-bottom: 110px; } .video-peek { margin-top: -80px; } }

/* use-case deep pages (first: debt collection) */
.page-hero.center .crumbs { justify-content: center; margin-bottom: 14px; }
.uc-listen .vl { margin-top: 8px; }
.fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 8px 0 0; }
@media (max-width: 900px) { .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fields { grid-template-columns: 1fr; } }
.fields div { padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.fields dt { font-size: 15px; font-weight: 500; color: var(--ink); }
.fields dd { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.uc-quote { margin: 0 auto; max-width: 760px; text-align: center; display: grid; justify-items: center; gap: 20px; }
.uc-quote img { height: 30px; width: auto; mix-blend-mode: multiply; }
.uc-quote blockquote { margin: 0; font-size: clamp(18px, 2vw, 22px); line-height: 1.55; color: var(--ink); }
.uc-quote figcaption { display: grid; gap: 2px; font-size: 14px; }
.uc-quote figcaption b { font-weight: 500; color: var(--ink); }
.uc-quote figcaption span { color: var(--muted); }
.caps:has(> .cap:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .caps:has(> .cap:nth-child(4):last-child) { grid-template-columns: 1fr; } }
.uc-feature { display: grid; gap: 6px; max-width: 760px; margin: 0 auto 32px; padding: 22px 24px; border-radius: 16px; background: var(--white); border: 1px solid var(--line); text-decoration: none; color: inherit; text-align: left; transition: border-color .2s ease, box-shadow .2s ease; }
.uc-feature:hover { border-color: var(--brand); box-shadow: 0 12px 30px -18px rgba(30,71,201,.35); }
.uc-feature .tag { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
html[lang="th"] .uc-feature .tag { letter-spacing: 0; text-transform: none; font-size: 13px; }
.uc-feature b { font-size: 19px; font-weight: 500; color: var(--ink); }
.uc-feature .d { font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.uc-feature .more { font-size: 14px; color: var(--brand); margin-top: 4px; }
.uc-deep { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 36px; }
@media (max-width: 1000px) { .uc-deep { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .uc-deep { grid-template-columns: 1fr; } }
.uc-deep .uc-feature { max-width: none; margin: 0; align-content: start; }
.uc-deep .uc-feature b { font-size: 17px; }

/* header: use-cases dropdown (opens on hover and on keyboard focus) */
.nav .has-sub { position: relative; }
.nav .has-sub > a { display: inline-flex; align-items: center; gap: 4px; }
.nav .sub { position: absolute; left: 50%; top: 100%; padding-top: 14px; transform: translate(-50%, 4px); opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 50; }
.nav .has-sub:hover .sub, .nav .has-sub:focus-within .sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav .sub ul { display: grid; gap: 2px; width: 300px; padding: 8px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 50px -24px rgba(20,30,60,.3); }
.nav .sub a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; }
.nav .sub a:hover { background: var(--stone); color: var(--ink); }
.nav .sub b { font-weight: 500; font-size: 14px; color: var(--ink); }
.nav .sub span { font-size: 12.5px; color: var(--muted); }
.nav .sub .all { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.nav .sub .all a { color: var(--brand); font-size: 13.5px; }
.mnav .msub { padding: 10px 4px 10px 20px; font-size: 15px; color: var(--muted); }

/* home: customer logos right under the voice card, introduced by a quiet line instead of a big heading */
.logos-sec { padding-block: clamp(48px, 6vw, 72px) clamp(56px, 7vw, 88px); }
.logos-sec .logos-title { font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.logos-sec .wrap + .marquee { margin-top: 28px; }

/* spacing pass: keep the gap between sections close to the usual ~224px */
.feature + .feature { margin-top: clamp(48px, 6vw, 72px); }
.sec.uc-listen { padding-bottom: clamp(72px, 8vw, 96px); }

/* touch: every tap target reaches 44px. Where the visible control is smaller, a transparent ::after extends the hit area,
   and row gaps are set so neighbouring hit areas never overlap */
@media (pointer: coarse), (max-width: 600px) {
  .lang a { position: relative; padding: 6px 14px; }
  .lang a::after { content: ""; position: absolute; inset: -10px 0; }
  .menu-btn { width: 44px; height: 44px; }
  .vl-arrow { width: 44px; height: 44px; margin-left: -22px; margin-top: -6px; }
  .vl-tabs, .uc-filter, .tabs { gap: 8px; }
  .pill, .chip-btn, .vl-tabs button, .uc-filter button, .tab { position: relative; }
  .tab { min-height: 40px; }
  .chip-btn, .vl-tabs button, .uc-filter button { height: 40px; }
  .pill::after, .chip-btn::after, .vl-tabs button::after, .uc-filter button::after, .tab::after { content: ""; position: absolute; inset: -4px 0; }
  .pill-sm::after { inset: -5px 0; }
}
@media (max-width: 400px) { .otp-form { padding-inline: 16px; } .otp-cells { gap: 6px; } }
@media (max-width: 600px) {
  /* when the hero label wraps, its dot stays on the first line instead of floating beside both */
  .hero .eyebrow { display: block; text-align: center; }
  .hero .eyebrow::before { display: inline-block; vertical-align: middle; margin: -2px 10px 0 0; }
}

/* home: results band (figures from the company profile) */
.stats-sec { padding-block: 0 clamp(56px, 7vw, 88px); }
.stats-title { font-size: clamp(1.5rem, 2.4vw, 1.9rem); text-align: center; margin-bottom: 28px; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kpis { grid-template-columns: 1fr; } }
.kpi { padding: 26px 24px 24px; border-radius: 16px; border: 1px solid var(--line); background: var(--white); display: grid; gap: 12px; align-content: start; }
.kpi .num { font-size: clamp(2.4rem, 4vw, 3.2rem); line-height: 1; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi .num .arr { color: var(--brand); font-size: .7em; margin: 0 .12em; vertical-align: .08em; }
.kpi .lbl { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.kpi .lbl b { font-weight: 500; color: var(--ink); }
.stats-strip { margin-top: 24px; text-align: center; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
html[lang="th"] .stats-strip { letter-spacing: .02em; text-transform: none; font-size: 14px; }
.stats-note { margin-top: 6px; text-align: center; font-size: 13.5px; color: var(--muted); }

/* product: solution and analytics cards */
.cell p .textlink { display: block; margin-top: 8px; white-space: nowrap; }   /* "Learn more →" on its own line, never split */
.four .pane { aspect-ratio: 4 / 3; }                                        /* less empty space around the small UI cards */
.kv b { white-space: nowrap; text-align: right; }                           /* values stay on one line; long labels wrap instead */
#solutions.feature { padding-top: clamp(72px, 8vw, 104px); }               /* tighter gap under the platform screenshot */
#solutions .cell { grid-template-rows: auto auto 1fr; }                       /* the "Learn more" links line up along the bottom */
#solutions .cell p { display: flex; flex-direction: column; }
#solutions .cell p .textlink { margin-top: auto; padding-top: 8px; }
#solutions.feature { padding-bottom: clamp(32px, 4vw, 56px); }   /* last section before the closing call to action */

/* motion: fade up once (set up by site.js, so nothing is hidden without JavaScript), arrow nudge, card lift */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
.reveal.is-in { opacity: 1; transform: none; }
.cap.reveal.is-in:hover { transform: translateY(-2px); }
.mv-arrow { display: inline-block; transition: transform .2s ease; }
a:hover .mv-arrow, a:focus-visible .mv-arrow { transform: translateX(4px); }
.uc-feature { transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.uc-feature:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .mv-arrow, .uc-feature { transition: none; }
  a:hover .mv-arrow, .uc-feature:hover { transform: none; }
}