/* ============================================================================
   Audivelle — audivelle.com
   The page uses the app's own visual system (Obi, dark) rather than a separate
   marketing skin, so what a visitor reads and what they would install look like
   one product. Tokens below are copied from
   android/app/src/main/java/com/example/auralis/theme/Color.kt and must stay in
   sync with it.

   The two accent roles are the load-bearing rule of that system and they carry
   over here unchanged:
     --tint   (#5A9DF5) means INTERACTIVE — links, controls, focus.
     --accent (#FFB020) means DECLARED    — a fact the product is asserting.
   Amber is never decoration. If a spot of amber is not stating a measured or
   verifiable fact, it is a bug.
   ============================================================================ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/noto-sans-thai-var.woff2') format('woff2');
}

:root {
  /* Obi dark — the app's default scheme. */
  --page: #0B0B0C;
  --grouped: #08080A;
  --surface: #141416;
  --raised: #1C1C1F;
  --chrome: #101012;
  --separator: rgba(255, 255, 255, 0.14);
  --separator-opaque: #3A3A3D;
  --rule: rgba(255, 255, 255, 0.30);
  --label: #F5F5F2;
  --label-2: rgba(235, 235, 245, 0.78);
  --label-3: rgba(235, 235, 245, 0.60);
  --label-4: rgba(235, 235, 245, 0.24);
  --inactive: #98989F;
  --tint: #5A9DF5;
  --tint-soft: #16283F;
  --accent: #FFB020;
  --on-accent: #0B0B0C;
  --positive: #4CD07A;
  --destructive: #FF453A;
  --plate: #08080A;
  --stroke: rgba(255, 255, 255, 0.10);

  --sans: 'Inter', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --gutter: clamp(20px, 5vw, 40px);
  --measure: 1160px;
  --hairline: 1px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--page);
  color: var(--label);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: 'cv05' 1, 'ss03' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Tabular numerals everywhere a number is a measurement, per the design system. */
.num, td.n, .stat-figure, .spec, time { font-variant-numeric: tabular-nums; }

a { color: var(--tint); text-decoration-color: rgba(90, 157, 245, 0.4); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--tint); outline-offset: 3px; border-radius: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--on-accent);
  padding: 12px 20px; font-weight: 600; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* ---- layout -------------------------------------------------------------- */

.wrap { width: 100%; max-width: var(--measure); margin: 0 auto; padding-inline: var(--gutter); }

section { padding-block: clamp(64px, 9vw, 116px); border-top: var(--hairline) solid var(--separator); }
section:first-of-type { border-top: 0; }

/* The editorial tier from the design system: an 11px tracked-out uppercase
   eyebrow over a large title. Thai has no uppercase, so the Thai copy relies on
   weight and the amber rule instead of letter-spacing. */
.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::after { content: ''; flex: 1; height: var(--hairline); background: var(--separator); }
:lang(th) .eyebrow { letter-spacing: 0.04em; text-transform: none; }

h1, h2, h3 { margin: 0; line-height: 1.1; letter-spacing: -0.022em; font-weight: 700; }
h2 { font-size: clamp(30px, 4.6vw, 46px); }
h3 { font-size: clamp(19px, 2.2vw, 22px); letter-spacing: -0.014em; }
:lang(th) h1, :lang(th) h2, :lang(th) h3 { letter-spacing: 0; line-height: 1.28; }

.lede { font-size: clamp(17px, 2vw, 21px); color: var(--label-2); max-width: 66ch; margin: 20px 0 0; line-height: 1.55; }
.section-head { margin-bottom: clamp(36px, 5vw, 56px); }
p { margin: 18px 0 0; }
p:first-child { margin-top: 0; }

/* ---- site chrome --------------------------------------------------------- */

.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--chrome) 88%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: var(--hairline) solid transparent;
  transition: border-color 160ms ease;
}
.topbar.scrolled { border-bottom-color: var(--separator); }
.topbar .wrap { display: flex; align-items: center; gap: 18px; height: 60px; }

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--label); font-weight: 650; letter-spacing: -0.01em; margin-right: auto; }
.brand svg { width: 28px; height: 28px; border-radius: 7px; display: block; flex: none; }

.topnav { display: flex; gap: 22px; }
.topnav a { color: var(--label-3); text-decoration: none; font-size: 14px; font-weight: 500; }
.topnav a:hover { color: var(--label); }
@media (max-width: 860px) { .topnav { display: none; } }

.lang {
  display: inline-flex; border: var(--hairline) solid var(--separator-opaque);
  border-radius: 6px; overflow: hidden; flex: none;
}
.lang button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--label-3); padding: 5px 11px; line-height: 1.4;
}
.lang button[aria-pressed="true"] { background: var(--raised); color: var(--label); }

/* ---- hero ---------------------------------------------------------------- */

.hero { padding-block: clamp(52px, 8vw, 92px) clamp(56px, 8vw, 96px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 330px); gap: clamp(32px, 6vw, 76px); align-items: center; }
@media (max-width: 940px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }

.hero h1 { font-size: clamp(42px, 8vw, 78px); letter-spacing: -0.035em; }
.hero .tagline { font-size: clamp(19px, 2.6vw, 26px); color: var(--label-2); margin-top: 14px; font-weight: 400; letter-spacing: -0.01em; }
.hero .lede { margin-top: 26px; }

.hero-mark { display: flex; align-items: center; gap: 16px; margin-bottom: 30px; }
.hero-mark svg { width: 62px; height: 62px; border-radius: 15px; display: block; }
.hero-mark span { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--label-3); font-weight: 600; }
:lang(th) .hero-mark span { letter-spacing: 0.04em; text-transform: none; }

/* The status strip. It sits above the fold on purpose: the honest answer to
   "can I install this?" is more useful to a visitor than a download button that
   does not exist yet. */
.status {
  display: flex; align-items: flex-start; gap: 13px;
  margin-top: 34px; padding: 15px 17px;
  background: var(--surface);
  border: var(--hairline) solid var(--separator-opaque);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  font-size: 14.5px; line-height: 1.55; color: var(--label-2);
  max-width: 62ch;
}
.status strong { color: var(--label); font-weight: 600; }

.hero-figures { display: flex; flex-wrap: wrap; gap: 8px 34px; margin-top: 34px; }
.hero-figures div { display: flex; flex-direction: column; }
.hero-figures dt { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--label-3); font-weight: 600; }
:lang(th) .hero-figures dt { letter-spacing: 0.03em; text-transform: none; }
.hero-figures dd { margin: 4px 0 0; font-size: 25px; font-weight: 650; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.hero-figures dd small { font-size: 13px; font-weight: 500; color: var(--label-3); letter-spacing: 0; }

/* ---- phone ---------------------------------------------------------------
   A CSS drawing of the app's own screens, built from the same tokens the app
   compiles. It is a rendering of the interface, not a photograph of a shipped
   build — the copy under each one says so.
   -------------------------------------------------------------------------- */

.phone {
  --ph-w: 300px;
  width: var(--ph-w);
  aspect-ratio: 9 / 19.5;
  background: var(--page);
  border: 1px solid var(--separator-opaque);
  border-radius: 34px;
  padding: 9px;
  position: relative;
  flex: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6);
}
.phone-screen {
  width: 100%; height: 100%;
  border-radius: 26px;
  overflow: hidden;
  background: var(--page);
  display: flex; flex-direction: column;
  font-size: 11px; line-height: 1.35;
  position: relative;
}
.phone.light { border-color: #C6C6C8; }
.phone.light .phone-screen { background: #F2F1ED; color: #0B0B0C; }

.st-bar { display: flex; justify-content: space-between; align-items: center; padding: 9px 16px 3px; font-size: 9.5px; color: var(--label-3); font-variant-numeric: tabular-nums; flex: none; }
.phone.light .st-bar { color: rgba(60,60,67,0.6); }
.st-bar .st-right { display: flex; gap: 4px; align-items: center; }

.nav-bar { padding: 4px 16px 0; flex: none; }
.nav-back { color: var(--tint); font-size: 12px; display: flex; align-items: center; gap: 2px; }
.phone.light .nav-back { color: #1D62C4; }
.large-title { display: flex; align-items: baseline; justify-content: space-between; padding: 6px 16px 10px; flex: none; }
.large-title h4 { margin: 0; font-size: 25px; font-weight: 700; letter-spacing: -0.03em; }
.large-title span { font-size: 10px; color: var(--label-3); font-variant-numeric: tabular-nums; }
.phone.light .large-title span { color: rgba(60,60,67,0.57); }

.rows { flex: 1; overflow: hidden; }
.row {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--separator);
  position: relative;
}
.phone.light .row { border-bottom-color: rgba(60,60,67,0.29); }
.row .meta { min-width: 0; flex: 1; }
.row .t { font-weight: 550; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; }
.row .s { font-size: 9.5px; color: var(--label-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; font-variant-numeric: tabular-nums; }
.phone.light .row .s { color: rgba(60,60,67,0.57); }
.row .dur { font-size: 10px; color: var(--label-3); font-variant-numeric: tabular-nums; flex: none; }
.phone.light .row .dur { color: rgba(60,60,67,0.57); }

/* Obi marks a hi-res master in amber and marks nothing else that way. */
.hires { color: var(--accent); font-weight: 650; }

/* Obi's playing row is a rail, not a fill. Classic's is the blue gradient. */
.row.playing::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent);
}
/* Full-strength label on the playing row. Scoped away from the light skin:
   --label is the dark scheme's near-white, and naming it here turned the
   playing title invisible on the light ground. Light inherits its ink from
   .phone.light .phone-screen, which is already correct. */
.phone:not(.light) .row.playing .t { color: var(--label); }
.phone.classic .row.playing {
  background: linear-gradient(180deg, #3D7FD1 0%, #1D62C4 52%, #17529F 100%);
}
.phone.classic .row.playing::before { display: none; }
.phone.classic .row.playing .t,
.phone.classic .row.playing .s,
.phone.classic .row.playing .dur,
.phone.classic .row.playing .hires { color: #FFFFFF; }

.plate {
  width: 34px; height: 34px; border-radius: 4px; flex: none;
  background: var(--plate); border: 1px solid var(--stroke);
  display: grid; place-items: center;
}
.phone.light .plate { background: #E8E7E2; border-color: rgba(11,11,12,0.10); }
.phone.classic .plate { background: linear-gradient(145deg, #3D7FD1, #17529F); border: 0; }
.plate svg { width: 16px; height: 16px; opacity: 0.55; }
.phone.classic .plate svg { opacity: 1; }

.tabbar {
  display: flex; border-top: 1px solid var(--separator); flex: none;
  background: var(--chrome); padding: 5px 0 8px;
}
.phone.light .tabbar { background: #F7F6F2; border-top-color: rgba(60,60,67,0.29); }
.tabbar div { flex: 1; text-align: center; font-size: 8.5px; color: var(--inactive); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tabbar div.on { color: var(--tint); }
.phone.light .tabbar div.on { color: #1D62C4; }
.tabbar svg { width: 17px; height: 17px; }

.mini {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  border-top: 1px solid var(--separator); background: var(--chrome); flex: none;
}
.phone.light .mini { background: #F7F6F2; border-top-color: rgba(60,60,67,0.29); }
.mini .meta { flex: 1; min-width: 0; }
.mini .t { font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini .s { font-size: 9px; color: var(--label-3); }
.mini .ctrl { display: flex; gap: 9px; align-items: center; }
.mini .ctrl svg { width: 13px; height: 13px; }

/* Now Playing */
.np { flex: 1; display: flex; flex-direction: column; padding: 4px 18px 0; min-height: 0; }
.np-title { text-align: center; font-size: 12px; font-weight: 600; padding-bottom: 10px; flex: none; }
.np-art {
  width: 100%; aspect-ratio: 1; border-radius: 6px; flex: none;
  background: var(--plate); border: 1px solid var(--stroke);
  display: grid; place-items: center;
}
.phone.light .np-art { background: #E8E7E2; border-color: rgba(11,11,12,0.10); }
.phone.classic .np-art { background: linear-gradient(145deg, #3D7FD1, #17529F); border: 0; border-radius: 10px; }
.np-art svg { width: 42%; height: 42%; opacity: 0.5; }
.phone.classic .np-art svg { opacity: 1; }
.np-meta { margin-top: 13px; flex: none; }
.np-meta .t { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.np-meta .s { font-size: 11px; color: var(--label-3); margin-top: 1px; }
.phone.light .np-meta .s { color: rgba(60,60,67,0.57); }
.scrub { margin-top: 13px; flex: none; }
.scrub-track { height: 3px; border-radius: 2px; background: rgba(235,235,245,0.24); overflow: hidden; }
.phone.light .scrub-track { background: rgba(120,120,128,0.2); }
.scrub-fill { height: 100%; width: 38%; background: var(--accent); border-radius: 2px; }
.phone.classic .scrub-fill { background: #1D62C4; }
.scrub-times { display: flex; justify-content: space-between; font-size: 9px; color: var(--label-3); margin-top: 5px; font-variant-numeric: tabular-nums; }
.phone.light .scrub-times { color: rgba(60,60,67,0.57); }
.transport { display: flex; align-items: center; justify-content: center; gap: 26px; margin-top: 14px; flex: none; }
.transport svg { width: 19px; height: 19px; }
.transport .play svg { width: 27px; height: 27px; }
.np-spacer { flex: 1; min-height: 6px; }

/* The spec strip. This is the sentence the whole product is arguing about, so
   it is the one place amber is allowed to appear at size. */
.spec {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 0 0 10px; padding: 6px 9px; flex: none;
  background: var(--surface); border: 1px solid var(--separator-opaque);
  border-radius: 5px; font-size: 9.5px; font-variant-numeric: tabular-nums;
  color: var(--label-2);
}
.phone.light .spec { background: #FFFFFF; border-color: rgba(60,60,67,0.29); color: rgba(60,60,67,0.75); }
.spec b { color: var(--accent); font-weight: 700; letter-spacing: 0.04em; }
.phone.light .spec b { color: #7A4A00; }
.phone.classic .spec b { color: #1D62C4; }

/* Settings-style grouped list */
.group { margin: 10px 16px 0; background: var(--surface); border: 1px solid var(--separator); border-radius: 8px; overflow: hidden; flex: none; }
.phone.light .group { background: #FFFFFF; border-color: rgba(60,60,67,0.2); }
.group .g-row { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-bottom: 1px solid var(--separator); font-size: 11.5px; }
.phone.light .group .g-row { border-bottom-color: rgba(60,60,67,0.2); }
.group .g-row:last-child { border-bottom: 0; }
.group .g-row .v { margin-left: auto; color: var(--label-3); font-size: 10.5px; }
.phone.light .group .g-row .v { color: rgba(60,60,67,0.57); }
.g-head { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--label-3); padding: 14px 28px 0; flex: none; font-weight: 600; }
.phone.light .g-head { color: rgba(60,60,67,0.57); }
.radio { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--separator-opaque); flex: none; display: grid; place-items: center; }
.radio.on { border-color: var(--tint); }
.radio.on::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--tint); }
.phone.light .radio.on { border-color: #1D62C4; }
.phone.light .radio.on::after { background: #1D62C4; }

.qr { width: 62px; height: 62px; border-radius: 5px; background: var(--label); margin: 0 auto; flex: none; }
.addr { text-align: center; font-family: var(--mono); font-size: 11px; color: var(--accent); margin-top: 11px; font-variant-numeric: tabular-nums; flex: none; }
.phone.light .addr { color: #7A4A00; }

/* ---- device gallery ------------------------------------------------------ */

.gallery { display: flex; gap: clamp(18px, 3vw, 34px); overflow-x: auto; padding-block: 8px 22px; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.gallery::-webkit-scrollbar { height: 6px; }
.gallery::-webkit-scrollbar-thumb { background: var(--separator-opaque); border-radius: 3px; }
.shot { scroll-snap-align: start; display: flex; flex-direction: column; gap: 15px; flex: none; width: 300px; }
.shot figcaption { font-size: 13.5px; color: var(--label-3); line-height: 1.5; }
.shot figcaption b { display: block; color: var(--label); font-size: 14.5px; font-weight: 600; margin-bottom: 3px; }

.skin-toggle { display: inline-flex; gap: 0; border: var(--hairline) solid var(--separator-opaque); border-radius: 7px; overflow: hidden; margin-bottom: 26px; }
.skin-toggle button { appearance: none; border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 550; color: var(--label-3); padding: 7px 15px; cursor: pointer; }
.skin-toggle button[aria-pressed="true"] { background: var(--raised); color: var(--label); }

/* ---- generic content blocks ---------------------------------------------- */

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: clamp(24px, 3.4vw, 44px); }
.cols-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(26px, 4vw, 56px); }

.item { border-top: 2px solid var(--separator-opaque); padding-top: 17px; }
.item h3 { margin-bottom: 9px; }
.item p { font-size: 15px; color: var(--label-2); line-height: 1.58; margin-top: 0; }
.item .why { font-size: 13.5px; color: var(--label-3); margin-top: 11px; padding-left: 13px; border-left: 2px solid var(--separator); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 1px; background: var(--separator); border: var(--hairline) solid var(--separator); border-radius: 10px; overflow: hidden; }
.stat { background: var(--page); padding: 22px 20px; }
.stat-figure { font-size: clamp(30px, 4vw, 40px); font-weight: 700; letter-spacing: -0.035em; color: var(--accent); line-height: 1; }
.stat-figure small { font-size: 0.45em; font-weight: 600; letter-spacing: 0; color: var(--label-3); margin-left: 3px; }
.stat-label { font-size: 13px; color: var(--label-2); margin-top: 10px; line-height: 1.45; }
.stat-note { font-size: 11.5px; color: var(--label-3); margin-top: 7px; line-height: 1.45; }

table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.scroller { overflow-x: auto; border: var(--hairline) solid var(--separator); border-radius: 10px; }
th, td { text-align: left; padding: 12px 15px; border-bottom: var(--hairline) solid var(--separator); vertical-align: top; }
thead th { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--label-3); font-weight: 600; background: var(--surface); white-space: nowrap; }
:lang(th) thead th { letter-spacing: 0.02em; text-transform: none; }
tbody tr:last-child td { border-bottom: 0; }
td.name { font-weight: 600; white-space: nowrap; }
td small { display: block; color: var(--label-3); font-size: 12.5px; margin-top: 3px; line-height: 1.45; }
.tag { display: inline-block; font-size: 10.5px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; padding: 2.5px 7px; border-radius: 5px; white-space: nowrap; }
:lang(th) .tag { letter-spacing: 0.02em; text-transform: none; }
.tag.own { background: rgba(255,176,32,0.14); color: var(--accent); }
.tag.os { background: rgba(90,157,245,0.14); color: var(--tint); }
.tag.no { background: rgba(235,235,245,0.08); color: var(--label-3); }

.note {
  margin-top: 26px; padding: 17px 19px;
  background: var(--surface); border: var(--hairline) solid var(--separator-opaque);
  border-radius: 9px; font-size: 14.5px; color: var(--label-2); line-height: 1.58;
}
.note strong { color: var(--label); }

/* The claims boundary. A product page that lists what it will not claim is
   making a stronger statement than one that lists only wins, so this block is
   given the same weight as a feature section rather than being buried. */
.limits { display: grid; grid-template-columns: repeat(auto-fit, minmax(266px, 1fr)); gap: 1px; background: var(--separator); border: var(--hairline) solid var(--separator); border-radius: 10px; overflow: hidden; }
.limit { background: var(--page); padding: 21px 20px; }
.limit h3 { font-size: 15.5px; margin-bottom: 9px; display: flex; align-items: flex-start; gap: 9px; line-height: 1.35; }
.limit h3::before { content: '—'; color: var(--destructive); font-weight: 700; flex: none; }
.limit p { font-size: 13.5px; color: var(--label-3); line-height: 1.55; margin: 0; }

.pipeline { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-top: 8px; }
.stage { flex: 1 1 168px; background: var(--surface); border: var(--hairline) solid var(--separator-opaque); border-radius: 9px; padding: 15px 16px; position: relative; }
.stage .n { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 650; }
:lang(th) .stage .n { letter-spacing: 0.02em; text-transform: none; }
.stage h4 { margin: 8px 0 6px; font-size: 15px; font-weight: 650; letter-spacing: -0.012em; }
.stage p { font-size: 12.5px; color: var(--label-3); line-height: 1.5; margin: 0; }
.stage.optional { border-style: dashed; }
.stage.optional .n { color: var(--tint); }

.faq { border-top: var(--hairline) solid var(--separator); }
.faq details { border-bottom: var(--hairline) solid var(--separator); }
.faq summary { padding: 17px 0; cursor: pointer; font-weight: 600; font-size: 16.5px; list-style: none; display: flex; gap: 14px; align-items: baseline; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: '+'; color: var(--accent); font-weight: 700; flex: none; width: 14px; }
.faq details[open] summary::before { content: '\2212'; }
.faq .body { padding: 0 0 20px 28px; color: var(--label-2); font-size: 15px; line-height: 1.62; max-width: 74ch; }
.faq .body p { margin-top: 14px; }

footer { border-top: var(--hairline) solid var(--separator); padding-block: 46px 60px; font-size: 13.5px; color: var(--label-3); line-height: 1.62; }
footer .foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(140px, 1fr)); gap: 34px; }
footer h4 { margin: 0 0 12px; font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--label-2); font-weight: 600; }
:lang(th) footer h4 { letter-spacing: 0.03em; text-transform: none; }
footer ul { list-style: none; margin: 0; padding: 0; }
footer li { margin-bottom: 7px; }
footer a { color: var(--label-3); text-decoration: none; }
footer a:hover { color: var(--label); text-decoration: underline; }
.legal { margin-top: 40px; padding-top: 22px; border-top: var(--hairline) solid var(--separator); font-size: 12px; color: var(--label-4); max-width: 88ch; line-height: 1.65; }
.legal p { margin-top: 10px; }

/* Language switching. Both languages ship in the document so neither is hidden
   from a crawler or a reader with JS off; the class only chooses which is shown,
   and the no-js default is English. */
[data-lang="en"] [data-l="th"] { display: none; }
[data-lang="th"] [data-l="en"] { display: none; }
[data-l="th"] { font-family: 'Noto Sans Thai', 'Inter', system-ui, sans-serif; }

@media (max-width: 620px) {
  body { font-size: 16px; }
  .phone { --ph-w: 268px; }
  .shot { width: 268px; }
  th, td { padding: 10px 12px; font-size: 13.5px; }
}

/* ---- accent roles per skin ------------------------------------------------
   The app splits its accent into two tokens because one combination is
   unreadable: #FFB020 as text on a light ground is 1.83:1, so `accentInk` is a
   different colour in every palette while `accentFill` stays amber. Copying
   only the fill to the web page reproduced exactly the failure the app's own
   ContrastTest exists to prevent — amber hi-res labels on the light skin. These
   four rules are the four palettes' real accentInk values.

     ObiLight     #7A4A00   ObiDark     #FFB020
     ClassicLight #1D62C4   ClassicDark #5A9DF5
   -------------------------------------------------------------------------- */
.phone .hires,
.phone .spec b            { color: #FFB020; }   /* Obi, dark */
.phone.light .hires,
.phone.light .spec b,
.phone.light .addr        { color: #7A4A00; }   /* Obi, light */
.phone.classic .hires,
.phone.classic .spec b,
.phone.classic .addr      { color: #5A9DF5; }   /* Classic, dark */
.phone.classic.light .hires,
.phone.classic.light .spec b,
.phone.classic.light .addr { color: #1D62C4; }  /* Classic, light */

/* The playing row's own ink always wins: it sits on the Classic gradient. */
.phone.classic .row.playing .hires { color: #FFFFFF; }

/* accentFill drives the scrubber, and unlike the ink it may stay amber on a
   light ground because it is a bar rather than text. */
.phone.classic .scrub-fill        { background: #5A9DF5; }
.phone.classic.light .scrub-fill  { background: #2E6FC4; }

/* ---- utility classes ------------------------------------------------------
   These replace inline style attributes. The site is served under a strict
   Content-Security-Policy with `style-src 'self'`, which blocks style="..."
   attributes outright — the browser had been dropping them silently, so the
   page rendered a little wrong in production and correctly on a local server
   with no CSP. Keeping every declaration in this file is what makes the strict
   policy affordable, so nothing here should go back inline.
   -------------------------------------------------------------------------- */
.prose      { color: var(--label-2); font-size: 15.5px; }
.prose-lead { color: var(--label-2); max-width: 70ch; margin-bottom: 26px; }
.dim        { opacity: 0.6; }
.flush      { margin: 0; }
.mt-18      { margin-top: 18px; }
.mt-56      { margin-top: 56px; }
.mt-66      { margin-top: 66px; }
.mb-14      { margin-bottom: 14px; }
.offscreen  { position: absolute; width: 0; height: 0; overflow: hidden; }
.qr-block   { padding: 16px 12px; text-align: center; }
.qr-hint    { font-size: 9.5px; opacity: 0.6; margin-top: 8px; }

/* ---- Now Playing: album line, queue position, ringed transport -------------
   Follows the app's Now Playing after the 2026-08-31 pass: the album is named,
   the queue position sits between the clocks, shuffle and repeat join the
   transport row, and the three centre controls are drawn as hairline rings so
   the target a thumb aims at is the size the button already was.
   -------------------------------------------------------------------------- */
.np-meta .al { font-size: 10px; color: var(--label-3); margin-top: 1px; }
.phone.light .np-meta .al { color: rgba(60, 60, 67, 0.55); }

.scrub-track { position: relative; overflow: visible; }
.scrub-thumb {
  position: absolute; top: 50%; left: 38%;
  width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%; background: var(--surface);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28);
}
.phone.light .scrub-thumb { background: #FFFFFF; }

.scrub-times { align-items: baseline; }
.scrub-times .qpos { color: var(--label-3); }
.phone.light .scrub-times .qpos { color: rgba(60, 60, 67, 0.5); }

.transport { gap: 0; justify-content: space-between; padding: 0 2px; }
.transport .ring {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--separator-opaque);
}
.phone.light .transport .ring { border-color: rgba(60, 60, 67, 0.29); }
.transport .ring svg { width: 13px; height: 13px; }
.transport .ring.play { width: 38px; height: 38px; }
.transport .ring.play svg { width: 16px; height: 16px; }
.transport .mode { display: grid; place-items: center; flex: none; width: 22px; height: 22px; color: var(--label-3); }
.transport .mode svg { width: 14px; height: 14px; }
.phone.light .transport .mode { color: rgba(60, 60, 67, 0.55); }