/* ============================================================
   Adeptio Pulse — marketing page
   Built on the Adeptio design tokens (colors_and_type.css, copied
   unmodified from the Design-Guideline kit). Patterns lifted from
   ui_kits/marketing: sticky blurred nav, hero with one .hl, feature
   cards with a 44px icon tile, split section, dark CTA strip whose
   radial glow is the only gradient on the page.
   ============================================================ */

/* ---------- Thai: Quicksand and Manrope have no Thai glyphs ----------
   Keep the Latin faces first so English words inside Thai sentences
   still use the brand faces; Thai glyphs fall through per character. */
:root {
  --font-display: 'Quicksand', 'Mitr', ui-rounded, system-ui, sans-serif;
  --font-body:    'Manrope', 'Anuphan', ui-sans-serif, system-ui, sans-serif;
  --wrap: 1200px;
  /* motion, on top of the kit's --ease-out / --ease-spring / --dur-*:
     a softer spring for things that land (chips, toasts) */
  --ease-pop: cubic-bezier(0.2, 1.25, 0.35, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
html, body { background: var(--bg); color: var(--fg); }
body { overflow-x: hidden; font-size: var(--fs-base); }
img { max-width: 100%; display: block; }

/* ---------- language switching ----------
   Every string is written twice, side by side, as [lang="en"] and
   [lang="th"]. site.js sets <html data-lang>; the default in the markup
   is English so the page reads correctly with JavaScript off. */
html[data-lang="en"] [lang="th"],
html[data-lang="th"] [lang="en"] { display: none !important; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

a { border-bottom: none; }
:focus-visible { outline: none; box-shadow: var(--shadow-glow); border-radius: var(--r-xs); }

.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ============ NAV ============ */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  background: rgba(250, 251, 252, 0.8);
  border-bottom: 1px solid var(--border-subtle);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
/* Scrolled: 12px shorter, and 12px of margin below, so the page never moves. */
.nav.is-scrolled { margin-bottom: 12px; background: rgba(250, 251, 252, 0.9);
  box-shadow: 0 10px 30px -18px rgba(15, 18, 35, 0.35); }
.nav.is-scrolled .nav-inner { height: 56px; }
.nav-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--brand-purple); transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-1000); }
.brand img { height: 24px; width: auto; }   /* PNG is trimmed to the glyphs, transparent */
.brand .product {
  font-family: var(--font-display); font-weight: 600; font-size: 22px;
  letter-spacing: -0.02em; padding-left: 10px; border-left: 1px solid var(--border);
  line-height: 1;
}
.nav-links { display: flex; gap: 28px; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--ink-700); }
.nav-links a:hover { color: var(--ink-1000); }
.nav-cta { display: flex; gap: 10px; align-items: center; }

.lang-switch {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--ink-100); border-radius: var(--r-pill);
}
.lang-switch button {
  font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.04em;
  border: none; background: transparent; color: var(--ink-600);
  padding: 6px 11px; border-radius: var(--r-pill); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.lang-switch button:hover { color: var(--ink-1000); }
.lang-switch button[aria-pressed="true"] { background: var(--ink-0); color: var(--ink-1000); box-shadow: var(--shadow-xs); }

/* ============ Buttons ============ */
.btn {
  font-family: var(--font-body); font-weight: 600; font-size: 14px;
  border-radius: var(--r-pill); padding: 10px 18px; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast);
}
.btn:active { transform: translateY(1px); }
.btn .ico { width: 18px; height: 18px; }
.btn-ink { background: var(--ink-1000); color: var(--ink-0); }
.btn-ink:hover { background: var(--ink-800); }
.btn-ghost { background: transparent; color: var(--ink-700); }
.btn-ghost:hover { color: var(--ink-1000); background: var(--ink-100); }
.btn-light { background: var(--ink-0); color: var(--ink-1000); }
.btn-light:hover { background: var(--ink-150); }
.btn-lg { padding: 14px 24px; font-size: 15px; }

/* ============ Highlight stroke (the wordmark motif) ============
   Defined once here; overrides the kit version deliberately
   (reset width/transform the kit sets). One per heading. */
.hl { position: relative; display: inline-block; z-index: 0; white-space: nowrap; }
.hl::before {
  content: ""; position: absolute; inset: auto -3% 0.1em -3%;
  width: auto; transform: none;
  height: 0.38em; border-radius: var(--r-pill); z-index: -1;
  background: var(--hl-color, var(--brand-purple));
}
.hl-mint   { --hl-color: var(--brand-mint); }
.hl-cyan   { --hl-color: var(--brand-cyan); }
.hl-blue   { --hl-color: var(--brand-blue); }
.hl-purple { --hl-color: var(--brand-purple); }
.hl-pink   { --hl-color: var(--brand-pink); }
.hl-rose   { --hl-color: var(--brand-rose); }
/* purple on white text would vanish — use the soft tint in the dark strip */
.on-dark .hl-rose { --hl-color: rgba(254, 74, 123, 0.55); }

/* ============ HERO ============ */
.hero { padding: 80px 0 72px; }
.eyebrow-pill {
  font-family: var(--font-body); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.12em; color: #5818C8;
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px;
  background: var(--brand-purple-soft); border-radius: var(--r-pill);
}
.hero h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(42px, 7.2vw, 76px); line-height: 1.0; letter-spacing: -0.035em;
  margin-top: 24px; max-width: 15ch; text-wrap: balance;
}
.hero .sub {
  font-size: 19px; line-height: 1.55; color: var(--ink-600);
  max-width: 58ch; margin-top: 22px;
}
.hero .sub strong { color: var(--ink-1000); font-weight: 600; }
.hero-cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-cta .small { font-size: 13px; color: var(--ink-500); margin-left: 4px; }

/* ============ Product mock (real product surfaces, neutral demo names) ============ */
.hero-visual {
  margin-top: 56px; position: relative;
  border-radius: var(--r-2xl); background: var(--ink-0);
  border: 1px solid var(--border-subtle); box-shadow: var(--shadow-lg);
  overflow: hidden; overflow: clip;
}
.hero-visual::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(146,65,255,0.05), rgba(30,195,243,0.05));
}
.mock-bar {
  display: flex; align-items: center; gap: 8px; padding: 13px 18px;
  border-bottom: 1px solid var(--border-subtle); background: var(--ink-50); position: relative;
}
.mock-bar .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--ink-300); }
.mock-bar .title {
  margin-left: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-500);
  background: var(--ink-100); padding: 5px 14px; border-radius: var(--r-pill);
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mock-toggle {
  margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-weight: 600; font-size: 12px; line-height: 1;
  color: var(--ink-600); background: var(--ink-0);
  border: 1px solid var(--border-subtle); border-radius: var(--r-pill);
  padding: 6px 12px 6px 10px; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.mock-toggle[hidden] { display: none; }
.mock-toggle:hover { color: var(--ink-1000); border-color: var(--border); }
.mock-toggle svg { width: 12px; height: 12px; fill: currentColor; }
.mock-toggle[data-paused="true"] .i-pause,
.mock-toggle[data-paused="true"] .when-playing,
.mock-toggle:not([data-paused="true"]) .i-play,
.mock-toggle:not([data-paused="true"]) .when-paused { display: none; }
.mock { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; padding: 20px; }
.panel {
  background: var(--ink-0); border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg); padding: 16px 18px; min-width: 0;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.panel-head .panel-title { font-family: var(--font-body); font-weight: 700; font-size: 14px; color: var(--ink-1000); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
  font-size: 11.5px; font-weight: 600; border-radius: var(--r-pill); white-space: nowrap;
}
.chip-ok   { background: var(--success-soft); color: #137A4C; }
.chip-bad  { background: var(--danger-soft);  color: #B0213F; }
.chip-link { background: var(--brand-purple-soft); color: #5818C8; }

.check-row {
  display: grid; grid-template-columns: 10px minmax(0, 1.1fr) minmax(0, 1.6fr) 56px;
  align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border-subtle);
  position: relative;
}
.check-row > * { position: relative; }
.check-row::before {
  content: ""; position: absolute; inset: 2px -8px; border-radius: var(--r-sm);
  background: var(--brand-purple-soft); opacity: 0;
}
.check-row.is-linked::before { opacity: 1; }
.check-row:first-of-type { border-top: none; }
.check-row .st { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.check-row.bad  .st { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }
.check-row.warn .st { background: var(--warning); }
.check-row .nm { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-800);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.check-row .ms { font-family: var(--font-mono); font-size: 12px; color: var(--ink-500); text-align: right;
  font-variant-numeric: tabular-nums; }
.check-row.bad .ms { color: var(--danger); font-weight: 700; }
.bars { --bar-gap: 2px; display: flex; gap: var(--bar-gap); height: 18px; }
.bars i { flex: 1 1 0; border-radius: 2px; background: var(--success); opacity: 0.85; }
.bars i.w { background: var(--warning); }
.bars i.f { background: var(--danger); }
/* the live demo's conveyor: one bar collapses on the left while one grows on
   the right; the negative margin cancels the gap, so the row never changes width */
.bars i.enter, .bars i.leave { flex-grow: 0; opacity: 0; }
.bars i.enter { margin-left: calc(-1 * var(--bar-gap)); }
.bars i.leave { margin-right: calc(-1 * var(--bar-gap)); }
.bars-legend { display: flex; justify-content: space-between; margin-top: 8px;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-400); }

.trace-id { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-500); margin-bottom: 12px; }
.span-row {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.5fr) 54px;
  align-items: center; gap: 10px; padding: 6px 0;
}
.span-row .lbl { font-family: var(--font-mono); font-size: 12px; color: var(--ink-800);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.span-row .lbl .svc { color: var(--ink-400); }
.span-row.child .lbl { padding-left: 14px; }
.span-row.child2 .lbl { padding-left: 28px; }
.track { position: relative; height: 12px; background: var(--ink-100); border-radius: var(--r-pill); }
.track b { position: absolute; top: 0; bottom: 0; border-radius: var(--r-pill); background: var(--brand-blue);
  /* drawn: a 10px margin, so the pulse ring around the slowest span shows */
  clip-path: inset(-10px -10px -10px -10px round var(--r-pill)); }
.span-row.slow .track b { background: var(--danger); }
.span-row .dur { font-family: var(--font-mono); font-size: 12px; color: var(--ink-500); text-align: right;
  font-variant-numeric: tabular-nums; }
.span-row.slow .dur { color: var(--danger); font-weight: 700; }
.trace-id.is-new { color: #5818C8; }
.trace-foot { display: grid; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.trace-foot > p { grid-area: 1 / 1; font-size: 13px; color: var(--ink-600); }
.trace-note strong { color: var(--ink-1000); }
.trace-waiting { opacity: 0; }
.trace-waiting::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px;
  border-radius: 50%; background: var(--success); vertical-align: 1px;
}
.trace-panel.is-idle .chip-link { opacity: 0; transform: scale(0.92); }
.trace-panel.is-idle .trace-id,
.trace-panel.is-idle .span-row { opacity: 0.28; filter: grayscale(1); }
.trace-panel.is-idle .track b { clip-path: inset(0 100% 0 0 round var(--r-pill)); }
.trace-panel.is-idle .trace-note { opacity: 0; transform: translateY(4px); }
.trace-panel.is-idle .trace-waiting { opacity: 1; }
/* a check just failed and its trace is about to open: no "all passing" line */
.trace-panel.is-loading .trace-waiting { opacity: 0; }

/* ============ Standards strip ============ */
.standards { padding: 44px 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.standards .lbl {
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-500);
  text-align: center; margin-bottom: 20px; letter-spacing: 0.04em;
}
.standards-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 40px; }
.standards-row span {
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  letter-spacing: -0.02em; color: var(--ink-500);
}

/* ============ Sections ============ */
.section { padding: 104px 0; }
.section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.eyebrow-accent {
  font-family: var(--font-body); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--brand-purple);
}
.section-head h2, .split-copy h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(32px, 4.6vw, 48px); line-height: 1.06; letter-spacing: -0.025em;
  margin-top: 14px; text-wrap: balance;
}
.section-head p { font-size: 17px; color: var(--ink-600); line-height: 1.6; margin: 16px auto 0; max-width: 56ch; }

/* Bento: 12 columns, rows alternate wide and narrow (7/5, 5/7, 7/5).
   Placement only; the DOM keeps the reading order. */
.features-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.features-grid > .feature-card { grid-column: span 5; }
.features-grid > .feature-card:nth-child(4n + 1),
.features-grid > .feature-card:nth-child(4n + 4) { grid-column: span 7; }
.features-grid > .feature-card:nth-child(even) { --rd: 90ms; } /* reveal stagger */
.feature-card {
  background: var(--ink-0); border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl); overflow: hidden; overflow: clip;
  display: flex; flex-direction: column;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.feature-body { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 12px; }
.feature-head { display: flex; align-items: center; gap: 14px; }
.feature-card .tile {
  width: 40px; height: 40px; border-radius: var(--r-md); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: var(--ink-0);
}
.feature-card .tile .ico { width: 20px; height: 20px; }
.feature-card h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 22px; letter-spacing: -0.01em; line-height: 1.2;
}
/* glued to the last word (.nowrap) so it never sits on a line by itself */
.feature-card h3 .sparkle { display: inline-block; width: 16px; height: 20px; margin-left: 6px; vertical-align: -2px; color: var(--brand-purple); }
.nowrap { white-space: nowrap; }
.feature-card p { font-size: 14.5px; color: var(--ink-600); line-height: 1.65; }
.t-mint   { background: #1FB985; }          /* mint/cyan are too light for a white glyph: */
.t-cyan   { background: #0FA3D0; }          /* deepened one step, same hue */
.t-blue   { background: var(--brand-blue); }
.t-purple { background: var(--brand-purple); }
.t-rose   { background: var(--brand-rose); }
.t-ink    { background: var(--ink-1000); }

/* ---------- feature stages: a small, decorative demo on top of each card ----------
   The markup is the finished frame (no JavaScript, reduced motion). site.js
   "arms" a stage (first frame) while it is off screen and plays it once when
   it scrolls into view; hovering replays it. */
.fc-checks    { --stage: var(--brand-purple-soft); }
.fc-tokens    { --stage: var(--brand-mint-soft); }
.fc-tracing   { --stage: var(--brand-blue-soft); }
.fc-rum       { --stage: var(--brand-cyan-soft); }
.fc-alerts    { --stage: var(--brand-rose-soft); }
.fc-incidents { --stage: var(--ink-100); }
.feature-stage {
  position: relative; height: 256px; flex-shrink: 0;
  background: var(--stage); border-bottom: 1px solid var(--border-subtle);
  container-type: inline-size; /* each scene adapts to its own card's width */
}
.demo {
  position: absolute; inset: 0; padding: 22px 24px;
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-800);
}
.demo [lang="th"] { font-family: var(--font-body); } /* the mono face has no Thai */
.ui {
  background: var(--ink-0); border: 1px solid rgba(15, 18, 35, 0.06);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm); min-width: 0;
}
.feature-stage.is-armed [data-in]:not(.is-in) { opacity: 0; transform: translateY(8px); }
.feature-stage.no-transition,
.feature-stage.no-transition * { transition: none !important; animation: none !important; }
.demo.is-rewinding { opacity: 0; }

/* API checks: a pasted curl command becomes a check */
.demo-checks .paste { display: flex; align-items: center; gap: 10px; padding: 11px 14px; color: var(--ink-700); }
.demo-checks .prompt { color: var(--brand-purple); font-weight: 700; }
.demo-checks .paste-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 4px; }
.demo-checks .caret { display: none; width: 2px; height: 15px; border-radius: 1px; background: var(--ink-1000); flex-shrink: 0; }
.feature-stage.is-armed .demo-checks .paste-text:not(.is-in) { display: none; }
.feature-stage.is-armed .demo-checks .caret { display: block; }
.demo-checks .check { padding: 12px 14px 8px; }
.check-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border-subtle); }
.check-head .method { font-weight: 700; font-size: 11px; color: #5818C8; background: var(--brand-purple-soft); padding: 2px 7px; border-radius: 6px; }
.check-head .url { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill {
  position: relative; flex-shrink: 0; font-size: 11px; font-weight: 700; white-space: nowrap;
  color: #137A4C; background: var(--success-soft); padding: 3px 9px; border-radius: var(--r-pill);
}
.feature-stage.is-armed .pill:not(.is-in) { color: transparent; background: var(--ink-100); }
.feature-stage.is-armed .pill:not(.is-in)::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border: 2px solid var(--ink-300); border-top-color: var(--ink-600); border-radius: 50%;
}
.asserts { list-style: none; display: grid; margin-top: 6px; }
.asserts li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 3px 0; }
.asserts .k { color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asserts .v { color: var(--ink-1000); font-weight: 600; }
.tick { position: relative; width: 16px; height: 16px; border-radius: 50%; background: var(--success-soft); }
.tick::after {
  content: ""; position: absolute; left: 5.5px; top: 3px; width: 4px; height: 8px;
  border: solid #137A4C; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* shared by the scenes: numbers, a pressed "button" that turns into its result */
.demo .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.csv, .action {
  position: relative; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; padding: 6px 12px; border-radius: var(--r-pill);
}
.feature-stage.is-armed .csv.is-loading::after,
.feature-stage.is-armed .action.is-loading::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%;
}
.csv.is-pressed, .action.is-pressed { transform: scale(0.94); }

/* Tokens: a token about to expire refreshes and reaches every check that uses it */
.demo-tokens .token { display: flex; align-items: center; gap: 16px; padding: 14px 16px; }
.ring { position: relative; width: 64px; height: 64px; flex-shrink: 0; --p: 1; }
.ring > svg:first-child { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track, .ring-meter { fill: none; stroke-width: 6; }
.ring-track { stroke: var(--ink-100); }
.ring-meter {
  stroke: var(--success); stroke-linecap: round;
  stroke-dasharray: 169.6px; stroke-dashoffset: calc(169.6px * (1 - var(--p)));
}
.ring.is-low .ring-meter { stroke: var(--warning); }
.ring .ico { position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; color: #137A4C; }
.ring.is-low .ico { color: #B36B00; }
.token-info { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.token-value { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--ink-1000); }
.token-exp { font-size: 11.5px; color: var(--ink-500); }
.token-exp .clock { color: var(--ink-1000); font-variant-numeric: tabular-nums; }
.pill.refreshed { font-family: var(--font-body); }
.fanout { position: relative; display: flex; gap: 8px; padding-top: 20px; margin: 0 4px; }
.fanout::before { /* the token's line down to its checks */
  content: ""; position: absolute; top: 8px; left: 16%; right: 16%; height: 12px;
  border: 1.5px dashed #8FDDB9; border-bottom: none; border-radius: 10px 10px 0 0;
}
.fanout::after { content: ""; position: absolute; top: -12px; left: 50%; height: 20px; border-left: 1.5px dashed #8FDDB9; }
.to-check {
  position: relative; flex: 1; min-width: 0; text-align: center; padding: 7px 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--ink-0); border: 1px solid #9BE3C3; border-radius: var(--r-sm);
  color: #137A4C; font-weight: 600; box-shadow: var(--shadow-xs);
}
.feature-stage.is-armed .to-check:not(.is-in) { border-color: var(--border-subtle); color: var(--ink-400); }

/* Tracing: request rate, errors and latency for one endpoint */
.demo-tracing .red { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.red-head { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.red-head .svc { font-weight: 700; color: var(--ink-1000); flex-shrink: 0; }
.red-head .op { min-width: 0; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.stats > div { display: flex; flex-direction: column; gap: 2px; padding: 7px 9px; background: var(--ink-50); border-radius: 8px; min-width: 0; }
.stats .lbl { font-size: 10.5px; color: var(--ink-500); }
.stats > div:nth-child(3) .lbl::before,
.stats > div:nth-child(4) .lbl::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%;
  background: var(--brand-blue); vertical-align: 1px;
}
.stats > div:nth-child(4) .lbl::before { background: var(--brand-purple); }
.stats .num { font-size: 13px; font-weight: 700; color: var(--ink-1000); overflow: hidden; text-overflow: ellipsis; }
.chart { position: relative; height: 70px; }
.chart svg { display: block; width: 100%; height: 100%; overflow: visible; clip-path: inset(-6px -6px -6px -6px); }
.l-p95, .l-p99 { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.l-p95 { stroke: var(--brand-blue); }
.a-p95 { fill: rgba(79, 152, 255, 0.12); }
.l-p99 { stroke: var(--brand-purple); stroke-dasharray: 4 4; opacity: 0.7; }
.chart .now {
  position: absolute; right: -4px; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%;
  background: var(--brand-blue); box-shadow: 0 0 0 4px rgba(79, 152, 255, 0.22);
}
.feature-stage.is-armed .chart:not(.is-in) svg { clip-path: inset(-6px calc(100% + 6px) -6px -6px); }
.feature-stage.is-armed .chart:not(.is-in) .now { opacity: 0; transform: scale(0.4); }

/* RUM: Core Web Vitals, and a JavaScript error grouped with its repeats */
.vitals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 12px 10px 10px; }
.gauge { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; --p: 0; }
.gauge svg { width: 100%; max-width: 100px; height: auto; }
.g-track, .g-meter { fill: none; stroke-width: 7; stroke-linecap: round; }
.g-track { stroke: var(--ink-100); }
.g-meter { stroke: var(--success); stroke-dasharray: 106.8px; stroke-dashoffset: calc(106.8px * (1 - var(--p))); }
.feature-stage.is-armed .gauge:not(.is-in) .g-meter { stroke-dashoffset: 106.8px; }
.gauge .num { margin-top: -20px; font-size: 15px; font-weight: 700; color: var(--ink-1000); }
.gauge .lbl { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-500); }
.err { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 14px; }
.err-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }
.err-msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-800); }
.err-count { font-size: 11.5px; color: #B0213F; background: var(--danger-soft); padding: 2px 8px; border-radius: var(--r-pill); }

/* Alerts: the down alert carries the failed response; then the recovery; the SLA export */
.demo-alerts { flex-direction: row; align-items: center; gap: 14px; }
.alerts-col { flex: 1.5; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.toast { display: grid; grid-template-columns: 9px minmax(0, 1fr); align-items: start; gap: 10px; padding: 10px 12px; }
.toast .t-dot { width: 9px; height: 9px; margin-top: 4px; border-radius: 50%; }
.toast-down .t-dot { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.toast-up .t-dot { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.t-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.t-body b { font-family: var(--font-body); font-size: 12.5px; font-weight: 700; color: var(--ink-1000);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-body b .svc { font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.t-meta { font-size: 11.5px; font-weight: 700; color: #B0213F; }
.t-resp { font-family: var(--font-mono); font-size: 11px; color: var(--ink-600); background: var(--ink-50);
  border-radius: 6px; padding: 3px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.channels { display: flex; flex-wrap: wrap; gap: 6px; }
.channels span {
  font-family: var(--font-body); font-size: 11px; font-weight: 600; color: #B0213F;
  background: var(--ink-0); border: 1px solid #F7B6C6; padding: 3px 9px; border-radius: var(--r-pill);
}
.sla { flex: 1; min-width: 0; padding: 14px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.sla .lbl { font-family: var(--font-body); font-size: 11.5px; font-weight: 600; color: var(--ink-500); }
.sla .num { font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink-1000); }
/* final frame: the exported file; armed: an "Export CSV" button */
.csv { margin-top: 4px; color: #137A4C; background: var(--success-soft); }
.csv .csv-label { display: none; }
.csv .csv-file::before { content: "✓ "; }
.feature-stage.is-armed .csv:not(.is-done) { font-family: var(--font-body); color: var(--ink-0); background: var(--ink-1000); }
.feature-stage.is-armed .csv:not(.is-done) .csv-label { display: inline; }
.feature-stage.is-armed .csv:not(.is-done) .csv-file { display: none; }
.feature-stage.is-armed .csv.is-loading .csv-label { visibility: hidden; }
@container (max-width: 520px) {
  .demo-alerts { flex-direction: column; align-items: stretch; gap: 8px; }
  .sla { flex: none; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 12px; row-gap: 0; padding: 9px 14px; }
  .sla .lbl { flex-basis: 100%; }
  .sla .num { font-size: 20px; }
  .csv { margin-top: 0; }
}

/* narrow cards (phones, the two-column tablet grid) */
@container (max-width: 420px) {
  .demo { padding: 16px; gap: 10px; }
  .alerts-col { gap: 6px; }
}
@container (max-width: 360px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > div { flex-direction: row; justify-content: space-between; align-items: baseline; padding: 5px 9px; }
  .chart { height: 58px; }
}

/* Incidents: ask the assistant, it answers from the failure pattern, an incident opens */
.chat { display: flex; flex-direction: column; gap: 10px; }
.bubble { font-family: var(--font-body); font-size: 12.5px; line-height: 1.45; padding: 9px 13px; border-radius: 16px; max-width: 86%; }
.bubble.me { align-self: flex-end; background: var(--ink-1000); color: var(--ink-0); border-bottom-right-radius: 5px; }
.ai-row { display: flex; align-items: flex-end; gap: 8px; }
.avatar { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink-0); color: var(--brand-purple); box-shadow: var(--shadow-xs); }
.avatar svg { width: 12px; height: 15px; }
.bubble.ai { background: var(--ink-0); color: var(--ink-800); border: 1px solid rgba(15, 18, 35, 0.06);
  box-shadow: var(--shadow-xs); border-bottom-left-radius: 5px; }
.typing { display: none; gap: 4px; padding: 5px 2px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-400); }
.feature-stage.is-armed .bubble.ai:not(.is-typed) .typing { display: inline-flex; }
.feature-stage.is-armed .bubble.ai:not(.is-typed) .ai-text { display: none; }
/* final frame: the opened incident; armed: an "Open incident" button */
.action { align-self: flex-start; margin-left: 34px; color: #5818C8; background: var(--brand-purple-soft); }
.action .a-label { display: none; }
.action .a-done::before { content: "✓ "; }
.feature-stage.is-armed .action:not(.is-done) { font-family: var(--font-body); color: var(--ink-0); background: var(--ink-1000); }
.feature-stage.is-armed .action:not(.is-done) .a-label { display: inline; }
.feature-stage.is-armed .action:not(.is-done) .a-done { display: none; }
.feature-stage.is-armed .action.is-loading .a-label { visibility: hidden; }

/* Split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split-copy p { font-size: 17px; color: var(--ink-600); line-height: 1.6; margin-top: 16px; max-width: 50ch; }
.ticks { list-style: none; margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.ticks li { font-size: 15px; color: var(--ink-700); display: flex; gap: 12px; align-items: flex-start; line-height: 1.55; }
.ticks li::before {
  content: "✓"; font-family: var(--font-display); font-weight: 700; font-size: 12px;
  color: #5818C8; width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px;
  background: var(--brand-purple-soft); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.chain {
  border-radius: var(--r-2xl); background: var(--ink-0);
  border: 1px solid var(--border-subtle); box-shadow: var(--shadow-md);
  padding: 28px; display: flex; flex-direction: column; gap: 0;
}
.link-card {
  border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: 16px 18px;
  background: var(--ink-50); display: flex; flex-direction: column; gap: 6px;
}
.link-card .k { font-family: var(--font-body); font-weight: 700; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
.link-card .v { font-family: var(--font-mono); font-size: 13px; color: var(--ink-1000); overflow-wrap: anywhere; }
.link-card .v .bad { color: #B0213F; font-weight: 700; }
.link-card .v .nw { white-space: nowrap; }
.link-card.hot { background: var(--ink-0); border-color: var(--brand-purple-soft); box-shadow: var(--shadow-brand); }
.connector { display: flex; align-items: center; gap: 10px; padding: 10px 0 10px 22px; color: var(--ink-500); }
.connector .line { position: relative; width: 2px; height: 26px; background: var(--border); border-radius: 2px; overflow: hidden; }
.connector .line::after { content: ""; position: absolute; inset: 0; transform-origin: 50% 0; background: var(--brand-cyan); }
.c-link2 .line::after { background: var(--brand-purple); }
.connector .note { font-family: var(--font-mono); font-size: 11.5px; }
/* the trace ID, marked the same wherever it appears: that is the "one ID" */
.tid { color: #0B6E8F; background: var(--brand-cyan-soft); border-radius: 4px; padding: 0 3px; }
.chain .result { display: inline-block; }

/* ---------- "One ID" story ----------
   On wide screens the paragraph's sentences stand apart as beats and the
   chain stays in view, lighting up part by part as each beat reaches the
   middle of the screen. site.js sets data-step (0 to 3); without it every
   beat is bright and the chain is complete. */
@media (min-width: 1001px) {
  .story { align-items: start; }
  .story .beats { max-width: 46ch; }
  .story .beat { display: block; min-height: 30vh; padding-top: 28px; font-size: 19px; line-height: 1.55; color: var(--ink-800); }
  .story .beat::before {
    content: "0" attr(data-beat); display: block; margin-bottom: 10px;
    font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--brand-purple);
  }
  .story .chain { position: sticky; top: max(96px, calc(50vh - 170px)); }
  .story[data-step] .beat { opacity: 0.3; }
  .story[data-step="1"] .beat[data-beat="1"],
  .story[data-step="2"] .beat[data-beat="2"],
  .story[data-step="3"] .beat[data-beat="3"] { opacity: 1; }
}
.story[data-step="0"] .c-check,
.story[data-step="0"] .c-link1,
.story[data-step="0"] .c-trace, .story[data-step="1"] .c-trace,
.story[data-step="0"] .c-link2, .story[data-step="1"] .c-link2, .story[data-step="2"] .c-link2,
.story[data-step="0"] .c-cause, .story[data-step="1"] .c-cause, .story[data-step="2"] .c-cause { opacity: 0.28; }
.story[data-step="0"] .c-link1 .line::after,
.story[data-step="0"] .c-link2 .line::after, .story[data-step="1"] .c-link2 .line::after,
.story[data-step="2"] .c-link2 .line::after { transform: scaleY(0); }
.story[data-step="0"] .result, .story[data-step="1"] .result, .story[data-step="2"] .result { opacity: 0; }

/* How it works — a real sequence: numbered stops on a rail */
.timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.tl-step { position: relative; display: flex; flex-direction: column; gap: 12px; }
.tl-step .n {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; color: #5818C8;
  width: 36px; height: 36px; border-radius: 50%; background: var(--brand-purple-soft);
  display: inline-flex; align-items: center; justify-content: center;
}
.tl-step h3 { font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.25; letter-spacing: -0.01em; }
.tl-step p { font-size: 14.5px; color: var(--ink-600); line-height: 1.65; }
.tl-step code { font-size: 12.5px; }
/* the rail from each stop to the next: a track, and a fill site.js scales with the scroll */
.tl-step:not(:last-child)::before,
.tl-step:not(:last-child)::after {
  content: ""; position: absolute; top: 17px; left: 52px; right: -24px; height: 2px; border-radius: 2px;
}
.tl-step:not(:last-child)::before { background: var(--border); }
.tl-step:not(:last-child)::after { background: var(--brand-purple); transform: scaleX(var(--f, 1)); transform-origin: 0 50%; }
/* armed by site.js: empty until the scroll fills it (without it, the rail is full) */
.timeline.is-armed .tl-step:not(:last-child)::after { transform: scaleX(var(--f, 0)); }
.timeline.is-armed .tl-step:not(.is-on) .n { background: var(--ink-100); color: var(--ink-400); }
.timeline.is-armed .tl-step:not(.is-on) h3,
.timeline.is-armed .tl-step:not(.is-on) p { opacity: 0.4; }

/* FAQ — an accordion of native <details>; the first answer starts open */
.faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; }
.qa { border-top: 1px solid var(--border); }
.qa:last-child { border-bottom: 1px solid var(--border); }
.qa summary {
  list-style: none; cursor: pointer; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 4px;
}
.qa summary::-webkit-details-marker { display: none; } /* Safari's own triangle */
.qa h3 { font-family: var(--font-body); font-weight: 700; font-size: 17px; line-height: 1.4; }
.qa summary:hover h3 { color: #5818C8; }
.qa-icon { position: relative; width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: var(--ink-100); }
.qa-icon::before, .qa-icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px;
  border-radius: 2px; background: var(--ink-700);
}
.qa-icon::after { transform: rotate(90deg); } /* a plus; open, it folds into a minus */
.qa[open] .qa-icon { background: var(--brand-purple-soft); }
.qa[open] .qa-icon::before, .qa[open] .qa-icon::after { background: #5818C8; }
.qa[open] .qa-icon::after { transform: rotate(0deg); }
.qa-a { padding: 0 4px 24px; max-width: 64ch; }
.qa-a p { font-size: 15.5px; color: var(--ink-600); line-height: 1.65; }

/* CTA strip — the one gradient on the page */
.cta-strip {
  margin: 24px 0 88px; padding: 64px 56px;
  border-radius: var(--r-2xl); background: var(--ink-1000); color: var(--ink-0);
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  position: relative;
  /* clip, not hidden: the glow overflows, and a hidden overflow could still be
     scrolled sideways (focus, scrollIntoView), cutting off the heading */
  overflow: hidden; overflow: clip;
}
.cta-strip::before {
  content: ""; position: absolute; right: -140px; top: -140px;
  width: 440px; height: 440px; border-radius: 50%;
  background: radial-gradient(circle, rgba(146,65,255,0.45), transparent 62%);
  pointer-events: none;
}
.cta-strip h2 {
  font-family: var(--font-display); font-weight: 600; color: var(--ink-0);
  font-size: clamp(30px, 4vw, 42px); line-height: 1.1; letter-spacing: -0.025em;
  max-width: 20ch; position: relative; text-wrap: balance;
}
.cta-strip p { color: var(--ink-300); font-size: 15.5px; margin-top: 12px; max-width: 46ch; position: relative; }
.cta-strip .ctas { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; position: relative; }
.cta-strip .ctas .small { font-size: 12.5px; color: var(--ink-400); }

/* ---------- demo request form (a light card inside the dark strip) ---------- */
.demo-form {
  position: relative; flex: 0 1 460px; width: 100%;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  background: var(--ink-0); color: var(--ink-1000);
  border-radius: var(--r-xl); padding: 24px; box-shadow: var(--shadow-lg);
}
.demo-form .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.demo-form .field-wide { grid-column: 1 / -1; }
.demo-form label { font-size: 13px; font-weight: 600; color: var(--ink-700); }
.demo-form input[type="text"],
.demo-form input[type="email"],
.demo-form input[type="tel"],
.demo-form textarea {
  font: inherit; font-size: 15px; color: var(--ink-1000); width: 100%;
  background: var(--ink-50); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 10px 12px;
}
.demo-form textarea { resize: vertical; min-height: 84px; }
.demo-form input:focus, .demo-form textarea:focus { outline: none; border-color: #9241FF; box-shadow: var(--shadow-glow); }
.demo-form [aria-invalid="true"] { border-color: var(--danger); }
.demo-form .consent {
  display: flex; gap: 10px; align-items: flex-start;
  font-weight: 400; font-size: 13px; line-height: 1.45; color: var(--ink-600);
}
.demo-form .consent input { margin-top: 3px; flex-shrink: 0; accent-color: #5818C8; }
.demo-form .btn { justify-content: center; }
.demo-form .btn[disabled] { opacity: 0.6; cursor: progress; }
.demo-form .form-status { font-size: 14px; min-height: 1.3em; color: var(--ink-600); }
.demo-form .form-status.ok { color: var(--success); font-weight: 600; }
.demo-form .form-status.error { color: var(--danger); }
.demo-form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.demo-form .form-status:focus { outline: none; box-shadow: none; }
/* sending: a spinner in place of the label, same size */
.btn.is-loading { position: relative; color: transparent !important; }
.btn.is-loading[disabled] { opacity: 1; cursor: progress; }
.btn.is-loading .ico { opacity: 0; }
.btn.is-loading::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%;
}
/* sent: the fields give way to a check mark and the thank-you line */
.demo-form .form-done { display: none; }
.demo-form.is-sent { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 44px 28px 40px; }
.demo-form.is-sent > * { display: none; }
.demo-form.is-sent > .form-done,
.demo-form.is-sent > .form-status { display: block; }
.form-done svg { display: block; width: 64px; height: 64px; }
.form-done circle { fill: var(--success-soft); stroke: var(--success); stroke-width: 2; }
.form-done path { fill: none; stroke: #137A4C; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 36px; }
.demo-form.is-sent .form-status.ok { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--ink-1000); }
html[data-lang="th"] .demo-form.is-sent .form-status.ok { font-family: 'Mitr', var(--font-display); font-weight: 500; }
.noscript-note { color: var(--ink-300); position: relative; }

/* Footer */
footer { padding: 56px 0 32px; border-top: 1px solid var(--border-subtle); }
.footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.footer-brand img { height: 22px; width: auto; }
.footer-brand p { font-size: 14px; color: var(--ink-600); margin-top: 14px; max-width: 36ch; line-height: 1.6; }
.footer-cols h2 {
  font-family: var(--font-body); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-500); margin-bottom: 14px;
}
.footer-cols ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.footer-cols a { color: var(--ink-700); font-size: 14px; display: inline-block; padding: 4px 0; }
.footer-cols a:hover { color: var(--ink-1000); }
.footer-bottom {
  margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--border-subtle);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  font-size: 12.5px; color: var(--ink-500);
}

/* ---------- Thai typography: marks above/below need air, no word spaces ---------- */
/* Mitr at Quicksand's 600 reads far heavier, and mixing the two faces inside one
   title looked patchy ("Token" light, Thai bold). Thai titles therefore set Latin
   in Mitr too, one step lighter, so each title has a single voice. */
html[data-lang="th"] .hero h1,
html[data-lang="th"] .section-head h2,
html[data-lang="th"] .split-copy h2,
html[data-lang="th"] .cta-strip h2,
html[data-lang="th"] .feature-card h3,
html[data-lang="th"] .tl-step h3 { font-family: 'Mitr', var(--font-display); font-weight: 500; }
html[data-lang="th"] .hero h1 { font-size: clamp(36px, 6.2vw, 64px); line-height: 1.28; letter-spacing: -0.01em; max-width: 17ch; }
html[data-lang="th"] .section-head h2,
html[data-lang="th"] .split-copy h2 { line-height: 1.32; letter-spacing: -0.01em; }
html[data-lang="th"] .cta-strip h2 { line-height: 1.32; letter-spacing: -0.01em; }
html[data-lang="th"] .feature-card h3,
html[data-lang="th"] .tl-step h3 { line-height: 1.4; }
html[data-lang="th"] .hero .sub,
html[data-lang="th"] .section-head p,
html[data-lang="th"] .split-copy p { line-height: 1.75; }
html[data-lang="th"] .eyebrow-pill,
html[data-lang="th"] .eyebrow-accent { letter-spacing: 0.02em; text-transform: none; font-size: 13px; }
/* the mono face has no Thai, and tracking pulls Thai marks off their consonants */
html[data-lang="th"] .standards .lbl { font-family: var(--font-body); letter-spacing: 0; font-size: 13px; }
.bars-legend [lang="th"],
.connector .note [lang="th"] { font-family: var(--font-body); }
html[data-lang="th"] .link-card .k,
html[data-lang="th"] .footer-cols h2 { letter-spacing: 0; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features-grid > .feature-card:nth-child(n) { grid-column: auto; }
  .feature-stage { height: 276px; } /* narrow cards stack the alert scene */
  .split { grid-template-columns: 1fr; gap: 40px; }
  .mock { grid-template-columns: 1fr; }
  .nav-links { display: none; }
}
@media (max-width: 720px) {
  .hero { padding: 56px 0 48px; }
  .features-grid { grid-template-columns: 1fr; }
  .qa summary { padding: 18px 2px; }
  .qa h3 { font-size: 16px; }
  /* the timeline turns vertical: stops on the left, the rail runs down */
  .timeline { grid-template-columns: 1fr; gap: 32px; }
  .tl-step { padding-left: 56px; }
  .tl-step .n { position: absolute; left: 0; top: 0; }
  .tl-step:not(:last-child)::before,
  .tl-step:not(:last-child)::after { top: 44px; bottom: -24px; left: 17px; right: auto; width: 2px; height: auto; }
  .tl-step:not(:last-child)::after { transform: scaleY(var(--f, 1)); transform-origin: 50% 0; }
  .timeline.is-armed .tl-step:not(:last-child)::after { transform: scaleY(var(--f, 0)); }
  .section { padding: 72px 0; }
  .cta-strip { flex-direction: column; align-items: flex-start; padding: 44px 28px; }
  .cta-strip .ctas { align-items: flex-start; }
  .demo-form { grid-template-columns: 1fr; padding: 20px; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .brand .product { font-size: 19px; }
  .nav-cta .btn-ink { display: none; }
  /* 48 bars beside the name shrink to nothing on a phone: give them their own line */
  .check-row { grid-template-columns: 10px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 6px; }
  .check-row .bars { grid-column: 2 / -1; grid-row: 2; --bar-gap: 1px; height: 14px; }
}
@media (max-width: 400px) {
  /* small phones: the brand, the language switch and Log in share about 330px */
  .wrap { padding: 0 16px; }
  .nav-inner { gap: 10px; }
  .brand { gap: 8px; }
  .brand img { height: 20px; }
  .brand .product { font-size: 17px; padding-left: 8px; }
  .nav-cta { gap: 6px; }
  .nav-cta .btn-ghost { padding: 10px 10px; }
}
@media (max-width: 480px) {
  .cta-strip { padding: 36px 18px; }
  .demo-form { padding: 16px; }
  .mock-toggle { padding: 7px; }
  .mock-toggle .when-playing, .mock-toggle .when-paused {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}
/* ============ Motion ============
   Only under html.motion, which the <head> script sets when the visitor has
   not asked for reduced motion. Without it the page is complete and still:
   the hero mock shows its failing check and the trace that explains it. */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes rise-visual { from { opacity: 0; transform: translateY(32px) scale(0.985); } }
@keyframes hl-draw {
  from { clip-path: inset(0 100% 0 0 round var(--r-pill)); }
  to   { clip-path: inset(0 0 0 0 round var(--r-pill)); }
}
@keyframes bar-in { from { transform: scaleY(0.1); opacity: 0; } }
@keyframes radar { from { transform: scale(0.8); opacity: 0.55; } to { transform: scale(2.6); opacity: 0; } }
@keyframes breathe { 50% { opacity: 0.35; } }

/* Entrance only. site.js marks the hero .is-settled once it has played (or on
   a language switch): showing the other language's copy would otherwise
   restart these animations on it. */
html.motion .hero:not(.is-settled) [data-reveal] { animation: rise 0.7s var(--ease-out) backwards; animation-delay: var(--rd, 0ms); }
html.motion .hero:not(.is-settled) .hero-visual { animation-name: rise-visual; animation-duration: 0.9s; }
html.motion .hero:not(.is-settled) .hl::before { animation: hl-draw 0.6s var(--ease-out) 0.75s backwards; }

html.motion .nav,
html.motion .nav-inner { transition: height 0.25s var(--ease-out), margin-bottom 0.25s var(--ease-out),
  box-shadow 0.25s var(--ease-out), background-color 0.25s var(--ease-out); }

/* the live hero mock */
html.motion .bars.wave i { animation: bar-in 0.5s var(--ease-out) backwards; transform-origin: 50% 100%; }
html.motion .bars i { transition: flex-grow 0.5s var(--ease-out), margin 0.5s var(--ease-out),
  opacity 0.5s var(--ease-out), background-color 0.3s var(--ease-out); }
html.motion .check-row .st,
html.motion .check-row .ms { transition: background-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), color 0.3s var(--ease-out); }
html.motion .check-row::before { transition: opacity 0.4s var(--ease-out); }
html.motion .check-row.bad .st::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--danger); animation: radar 1.6s var(--ease-out) infinite;
}
html.motion .chip { transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out); }
html.motion .trace-panel .chip-link,
html.motion .trace-panel .trace-id,
html.motion .trace-foot > p { transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out), color 1s var(--ease-out); }
html.motion .trace-panel .span-row { transition: opacity 0.3s var(--ease-out) calc(var(--i) * 90ms),
  filter 0.3s var(--ease-out) calc(var(--i) * 90ms); }
html.motion .trace-panel .track b { transition: clip-path 0.55s var(--ease-out) calc(120ms + var(--i) * 90ms); }
html.motion .trace-panel .trace-note { transition-delay: 0.8s; }
html.motion .trace-panel.is-idle .span-row,
html.motion .trace-panel.is-idle .track b,
html.motion .trace-panel.is-idle .trace-note { transition-delay: 0s; }
html.motion .trace-waiting::before { animation: breathe 1.6s ease-in-out infinite; }
/* scroll reveal: site.js arms only what is below the fold at load, so a page
   whose script never runs hides nothing */
html.motion .reveal-armed:not(.is-revealed) { opacity: 0; }
html.motion .reveal-armed.is-revealed { animation: rise 0.7s var(--ease-out) backwards; animation-delay: var(--rd, 0ms); }
/* the highlight under a heading draws itself once the heading has risen in;
   hl-done (site.js) drops the rule afterwards so a language switch can't replay it */
html.motion .reveal-armed.is-revealed:not(.hl-done) .hl::before { animation: hl-draw 0.6s var(--ease-out) 0.5s backwards; }
html.motion .story .beat { transition: opacity 0.45s var(--ease-out); }
html.motion .chain > * { transition: opacity 0.45s var(--ease-out); }
html.motion .chain .result { transition: opacity 0.35s var(--ease-out); }
html.motion .connector .line::after { transition: transform 0.55s var(--ease-out); }
html.motion .tl-step .n { transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out); }
/* the rail follows the scroll 1:1; only when it starts late (after its heading) does it ease into place */
html.motion .timeline.is-catching-up .tl-step::after { transition: transform 0.8s var(--ease-out); }
html.motion .tl-step h3,
html.motion .tl-step p { transition: opacity 0.4s var(--ease-out); }
html.motion .qa h3 { transition: color var(--dur-fast) var(--ease-out); }
@keyframes check-draw { from { stroke-dashoffset: 36px; } }
html.motion .btn.is-loading::after { animation: spin 0.7s linear infinite; }
html.motion .demo-form.is-sent .form-done svg { animation: pop-in 0.5s var(--ease-pop); }
html.motion .demo-form.is-sent .form-done path { animation: check-draw 0.5s var(--ease-out) 0.2s backwards; }
html.motion .demo-form.is-sent .form-status { animation: rise 0.5s var(--ease-out) 0.25s backwards; }
/* arrows on buttons lean the way they point */
html.motion .btn .ico { transition: transform var(--dur-base) var(--ease-out); }
html.motion .btn:hover .ico { transform: translateX(3px); }
html.motion .qa-icon, html.motion .qa-icon::before { transition: background-color 0.3s var(--ease-out); }
html.motion .qa-icon::after { transition: transform 0.3s var(--ease-out), background-color 0.3s var(--ease-out); }
/* Chrome 131+ can animate a <details> to its natural height; elsewhere it opens at once */
@supports selector(::details-content) {
  html.motion .qa { interpolate-size: allow-keywords; }
  html.motion .qa::details-content {
    height: 0; overflow: clip;
    transition: height 0.35s var(--ease-out), content-visibility 0.35s allow-discrete;
  }
  html.motion .qa[open]::details-content { height: auto; }
}

/* feature stages */
@keyframes blink { 50% { opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop-in { from { transform: scale(0.4); } }
@keyframes paste-flash { from { background-color: rgba(146, 65, 255, 0.22); } }
html.motion .demo { transition: opacity 0.16s var(--ease-out); }
html.motion .feature-stage [data-in] { transition: opacity 0.35s var(--ease-out), transform 0.45s var(--ease-pop); }
html.motion .feature-stage.is-armed .demo-checks .caret { animation: blink 1s steps(1) infinite; }
html.motion .feature-stage.is-armed .pill:not(.is-in)::after { animation: spin 0.7s linear infinite; }
html.motion .demo-checks .paste-text.flash { animation: paste-flash 1s var(--ease-out); }
html.motion .feature-stage .asserts li.is-in .tick { animation: pop-in 0.45s var(--ease-pop); }
@keyframes ring-spin { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
@keyframes typing { 0%, 60%, 100% { transform: none; opacity: 0.45; } 30% { transform: translateY(-3px); opacity: 1; } }
html.motion .ring-meter { transition: stroke-dashoffset 0.9s var(--ease-out), stroke 0.3s var(--ease-out); }
html.motion .ring .ico { transition: color 0.3s var(--ease-out); }
html.motion .ring.is-refreshing > svg:first-child { animation: ring-spin 0.6s linear infinite; }
html.motion .to-check { transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out); }
html.motion .chart svg { transition: clip-path 1.3s var(--ease-out); }
html.motion .chart .now { transition: opacity 0.3s var(--ease-out) 1s, transform 0.45s var(--ease-pop) 1s; }
html.motion .g-meter { transition: stroke-dashoffset 1s var(--ease-out); }
html.motion .csv, html.motion .action { transition: transform 0.15s var(--ease-out), background-color 0.25s var(--ease-out), color 0.25s var(--ease-out); }
html.motion .feature-stage.is-armed .csv.is-loading::after,
html.motion .feature-stage.is-armed .action.is-loading::after { animation: spin 0.7s linear infinite; }
html.motion .feature-stage.is-armed .typing i { animation: typing 1s var(--ease-out) infinite; }
html.motion .feature-stage.is-armed .typing i:nth-child(2) { animation-delay: 0.15s; }
html.motion .feature-stage.is-armed .typing i:nth-child(3) { animation-delay: 0.3s; }

/* set for a moment when the demo has to jump to a state without animating */
.trace-panel.no-transition, .trace-panel.no-transition * { transition: none !important; }
/* paused (button, off screen or hidden tab): the looping pulses stop too;
   one-off entrances (the bar wave) still finish */
.hero-visual.is-paused .st::after,
.hero-visual.is-paused .trace-waiting::before { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .feature-card, .btn { transition: none; }
  .feature-card:hover { transform: none; }
}