/* ===========================================================================
   Neung landing page
   Plain CSS. No build step, no external fonts, no CDNs.
   Theme tokens come from the app's design (repoos/docs/design/DESIGN.md):
   warm neutral light, charcoal dark, sage as the call/connected accent.
   Text pairs below are chosen for WCAG AA (>= 4.5:1).
   =========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body,
h1, h2, h3, p, ul, ol, figure { margin: 0; }

ul, ol { padding: 0; list-style: none; }

img, svg { display: block; max-width: 100%; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

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

/* --- Theme tokens --------------------------------------------------------
   Light is the default set on :root. Dark arrives from exactly one of two
   places: the system preference (a visitor who has not chosen) or an explicit
   data-theme="dark" (a stored choice). A stored data-theme="light" excludes the
   system-dark branch, so the :root light values apply. With no stored choice,
   main.js deliberately leaves data-theme off, so the media query keeps driving
   and the page follows the OS live. */
:root {
  color-scheme: light;

  --bg: #FAF8F4;
  --bg-alt: #F2EEE7;
  --surface: #FFFFFF;
  --surface-2: #F0EBE3;
  --text: #18212B;
  --text-muted: #56616C;
  --border: #DCD5CA;
  --primary: #6FAA8E;
  --on-primary: #10251C;
  --primary-soft: #E3F0E8;
  --chip-ink: #2F5A47;
  --link: #3F6B57;
  --focus: #2F6B50;
  --danger: #C95D5D;
  --shadow: 0 1px 2px rgba(24, 33, 43, .10), 0 10px 30px rgba(24, 33, 43, .08);

  /* phone mockup */
  --phone-frame: #18212B;
  --phone-bg: #FFFFFF;
  --phone-card: #EDE8E0;
  --phone-on: #18212B;
  --phone-muted: #56616C;
  --phone-accent: #6FAA8E;
  --phone-on-accent: #10251C;

  --wrap: 1120px;
  --radius: 18px;
  --radius-sm: 12px;
}

/* --- Dark theme: system default ------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #18232E;
    --bg-alt: #141E28;
    --surface: #202D39;
    --surface-2: #283644;
    --text: #F8F5EF;
    --text-muted: #B4BEC7;
    --border: #3B4A57;
    --primary: #86C5A6;
    --on-primary: #10251C;
    --primary-soft: #1F3A30;
    --chip-ink: #A8DCC0;
    --link: #9BD3B4;
    --focus: #A8DCC0;
    --danger: #E07878;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 34px rgba(0, 0, 0, .45);

    --phone-frame: #0B1218;
    --phone-bg: #202D39;
    --phone-card: #2A3947;
    --phone-on: #F8F5EF;
    --phone-muted: #B4BEC7;
    --phone-accent: #86C5A6;
    --phone-on-accent: #10251C;
  }
}

/* --- Explicit choice: forced dark (forced light is just the :root default) */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #18232E;
  --bg-alt: #141E28;
  --surface: #202D39;
  --surface-2: #283644;
  --text: #F8F5EF;
  --text-muted: #B4BEC7;
  --border: #3B4A57;
  --primary: #86C5A6;
  --on-primary: #10251C;
  --primary-soft: #1F3A30;
  --chip-ink: #A8DCC0;
  --link: #9BD3B4;
  --focus: #A8DCC0;
  --danger: #E07878;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 34px rgba(0, 0, 0, .45);
  --phone-frame: #0B1218;
  --phone-bg: #202D39;
  --phone-card: #2A3947;
  --phone-on: #F8F5EF;
  --phone-muted: #B4BEC7;
  --phone-accent: #86C5A6;
  --phone-on-accent: #10251C;
}

/* --- Base ---------------------------------------------------------------- */
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

/* Thai tone marks and Vietnamese diacritics sit above the Latin baseline and
   need more leading than English; the default heading line-height is too tight
   and clips them. Body leading also grows a little for the same reason. */
html[lang="th"] body { line-height: 1.75; }
html[lang="vi"] body { line-height: 1.65; }
:lang(th) h1, :lang(th) h2, :lang(th) h3,
:lang(vi) h1, :lang(vi) h2, :lang(vi) h3 { line-height: 1.36; }
:lang(th) .btn, :lang(th) .site-nav a, :lang(th) .lang-switch a, :lang(th) .lang-switch__button,
:lang(th) .site-nav__button,
:lang(vi) .btn, :lang(vi) .site-nav a, :lang(vi) .lang-switch a, :lang(vi) .lang-switch__button,
:lang(vi) .site-nav__button { line-height: 1.5; }

/* Thai writes without spaces between words, so a long heading or paragraph
   must be able to break anywhere rather than push the page sideways at 320px. */
.hero h1, .hero__lede, .hero__note, .eyebrow, .section__lede,
.card h3, .card p, .step h3, .step p,
.download-card__hint, .download-steps li, .download-noscript,
.download-meta dt, .download-meta dd, .download-hash__label,
.download-hash__status, .tag, .brand__name, .site-footer__brand,
.site-footer__note, .site-footer__meta, .btn__label { overflow-wrap: anywhere; }

a { color: var(--link); }

h1, h2, h3 { line-height: 1.18; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); }
h3 { font-size: 1.1rem; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

/* Visible keyboard focus everywhere */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -3rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--primary);
  color: var(--on-primary);
  border-radius: 0 0 10px 10px;
  text-decoration: none;
}
.skip-link:focus { top: 0; }

/* Text for assistive tech only (the language button's "Language" word). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Header -------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg); /* fallback for engines without color-mix() */
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  padding: 0.5rem 0.25rem;
  margin-left: -0.25rem;
}
.brand__name { font-size: 1.15rem; letter-spacing: -0.02em; }
.brand__mark { flex: none; }
.brand__glyph {
  fill: var(--text);
  font-family: "Noto Sans Thai", "Leelawadee UI", Tahoma, system-ui, sans-serif;
  font-size: 27px;
  font-weight: 700;
}

.site-nav { margin-inline-start: auto; }
.site-nav__list { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.85rem;
  border-radius: 999px;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--text); background: var(--surface-2); }

/* Compact phone menu. The section links cannot fit one tidy row at 320px in
   any of the three languages, so narrow screens collapse them into the same
   no-JavaScript <details> pattern as the language dropdown instead of a
   horizontally scrolling strip. It is hidden until the phone breakpoint. */
.site-nav__compact { display: none; position: relative; }
.site-nav__button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  list-style: none;
}
.site-nav__button::-webkit-details-marker { display: none; }
.site-nav__button::marker { content: ""; }
.site-nav__button:hover { background: var(--surface-2); }
.site-nav__button-icon,
.site-nav__button-chevron { flex: none; }
.site-nav__button-chevron { transition: transform 140ms ease; }
.site-nav__compact[open] .site-nav__button-chevron { transform: rotate(180deg); }
.site-nav__menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  inset-inline-start: 0;
  z-index: 60;
  min-width: 11rem;
  max-width: calc(100vw - 1.5rem);
  margin: 0;
  padding: 0.3rem;
  display: grid;
  gap: 0.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.site-nav__menu a {
  min-height: 44px;
  padding: 0 0.7rem;
  border-radius: 8px;
  color: var(--text);
}
.site-nav__menu a:hover { background: var(--surface-2); }

.site-controls {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-inline-start: 0.5rem;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Language dropdown — a real <details>/<summary>, so it opens and closes with
   no JavaScript; main.js only adds outside-click, Escape, arrow keys and
   aria-expanded. The button shows a globe, the current language's own name and
   a chevron; on narrow screens the name gives way to a short code. */
.lang-switch { position: relative; flex: none; }
.lang-switch__button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  list-style: none;
}
/* Hide the native disclosure triangle in every engine. */
.lang-switch__button::-webkit-details-marker { display: none; }
.lang-switch__button::marker { content: ""; }
.lang-switch__button:hover { background: var(--surface-2); }
.lang-switch__globe { flex: none; }
.lang-switch__chevron { flex: none; transition: transform 140ms ease; }
.lang-switch[open] .lang-switch__chevron { transform: rotate(180deg); }
.lang-switch__short { display: none; }

.lang-switch__menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  inset-inline-end: 0;
  z-index: 60;
  min-width: 11rem;
  /* Never wider than the viewport, so the popover is not clipped at 320px. */
  max-width: calc(100vw - 1.5rem);
  margin: 0;
  padding: 0.3rem;
  display: grid;
  gap: 0.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.lang-switch__menu a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 0.7rem;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}
.lang-switch__menu a:hover { background: var(--surface-2); }
.lang-switch__menu a[aria-current="page"] { font-weight: 700; }
/* The check reserves its space on every row so the names stay aligned; it is
   only visible on the current language. */
.lang-switch__check { flex: none; visibility: hidden; }
.lang-switch__menu a[aria-current="page"] .lang-switch__check { visibility: visible; }

.theme-toggle {
  /* Hidden until main.js runs (the inline head script adds .js) so a
     JavaScript-off visitor never sees an inert control. */
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  flex: none;
}
.js .theme-toggle { display: inline-flex; }
.theme-toggle:hover { background: var(--surface-2); }
.theme-toggle__icon { grid-area: 1 / 1; }
/* Show only the icon for the mode you can switch TO. Light (the :root default)
   shows the moon; any dark context shows the sun. */
.theme-toggle__icon--sun { display: none; }
.theme-toggle__icon--moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__icon--sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle__icon--moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle__icon--sun { display: block; }
:root[data-theme="dark"] .theme-toggle__icon--moon { display: none; }

/* --- Hero ---------------------------------------------------------------- */
.hero { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 5vw, 4rem); }
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 860px) {
  .hero__grid { grid-template-columns: 1.15fr 0.85fr; }
}

.eyebrow {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--chip-ink);
  background: var(--primary-soft);
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 1.1rem;
}

.hero h1 {
  font-size: clamp(1.9rem, 1.3rem + 3.2vw, 3.15rem);
  font-weight: 800;
  max-width: 20ch;
}

.hero__lede {
  margin-top: 1.1rem;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
  color: var(--text-muted);
  max-width: 52ch;
}

.download { margin-top: 1.8rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid transparent;
}
.btn--primary { background: var(--primary); color: var(--on-primary); }
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  background: var(--surface-2);
  color: var(--text-muted);
  border-color: var(--border);
}
.btn[aria-disabled="false"]:hover { filter: brightness(1.06); }

.hero__note {
  margin-top: 0.8rem;
  font-size: 0.92rem;
  color: var(--text-muted);
  max-width: 46ch;
}

/* --- Phone mockup -------------------------------------------------------- */
.hero__art { display: flex; justify-content: center; }
.phone {
  width: min(280px, 78vw);
  border-radius: 38px;
  padding: 10px;
  background: var(--phone-frame);
  box-shadow: var(--shadow);
}
.phone__screen {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 30px;
}
.mock-brand {
  font: 700 20px "Noto Sans Thai", "Leelawadee UI", Tahoma, system-ui, sans-serif;
}
.mock-title { font: 700 18px system-ui, sans-serif; }
.mock-avatar {
  font: 700 54px "Noto Sans Thai", "Leelawadee UI", Tahoma, system-ui, sans-serif;
}
.mock-name { font: 700 20px system-ui, "Noto Sans Thai", sans-serif; }
.mock-status { font: 500 13px system-ui, "Noto Sans Thai", sans-serif; }
.mock-button { font: 700 15px system-ui, "Noto Sans Thai", sans-serif; }
.mock-tagline { font: 500 11px system-ui, "Noto Sans Thai", sans-serif; }

/* Theme colours for the mockup/logo SVGs via CSS classes. Keeping them here
   (rather than fill="var(--…)"/stroke="var(--…)" presentation attributes)
   because var() in presentation attributes is not reliable across browsers. */
.phone-fill-bg { fill: var(--phone-bg); }
.phone-fill-card { fill: var(--phone-card); }
.phone-fill-on { fill: var(--phone-on); }
.phone-fill-muted { fill: var(--phone-muted); }
.phone-fill-accent { fill: var(--phone-accent); }
.phone-fill-on-accent { fill: var(--phone-on-accent); }
.phone-stroke-accent { stroke: var(--phone-accent); }

/* --- Sections ------------------------------------------------------------ */
.section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.section--alt { background: var(--bg-alt); }

.section h2 { margin-bottom: 0.6rem; }
.section__lede {
  color: var(--text-muted);
  max-width: 60ch;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

/* --- Cards --------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 620px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 620px) { .cards--four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .cards--four { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem;
}
.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--primary-soft);
  color: var(--chip-ink);
  margin-bottom: 0.9rem;
}
.card h3 { margin-bottom: 0.4rem; }
.card p { color: var(--text-muted); }

.tag {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--chip-ink);
  background: var(--primary-soft);
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
}

/* --- Steps --------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }

.step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem;
}
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 800;
  margin-bottom: 0.8rem;
}
.step h3 { margin-bottom: 0.35rem; }
.step p { color: var(--text-muted); }

/* --- Download ------------------------------------------------------------ */
.download-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 3vw, 1.8rem);
  box-shadow: var(--shadow);
  max-width: 760px;
}

.download-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
}
.download-card__btn { flex: none; /* Tall enough for the enabled label to wrap to two lines at 320px, so the button height (and the layout below it) is the same before and after the details load. */ min-height: 3.8rem; }
.download-card__icon { flex: none; }
.download-card__hint {
  color: var(--text-muted);
  font-size: 0.95rem;
  min-height: 1.5em;
  margin: 0;
}

.download-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem 1.5rem;
  margin: 1.2rem 0 0;
}
@media (min-width: 560px) {
  .download-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.download-meta__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.35rem;
}
.download-meta dt {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.download-meta dd { margin: 0; font-weight: 600; text-align: right; }

.download-hash { display: grid; gap: 0.5rem; margin-top: 1.2rem; }
.download-hash__label {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.download-hash__value {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  /* Reserve room for the loaded hash so filling it in does not move the copy
     button; narrow screens wrap the 64 hex characters over more lines. */
  min-height: 2.6rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem;
  color: var(--text);
}
@media (max-width: 480px) {
  .download-hash__value { min-height: 5.4rem; }
}
.download-hash__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.download-hash__status { color: var(--text-muted); font-size: 0.9rem; min-height: 1.2em; }

.btn--small {
  min-height: 40px;
  padding: 0.4rem 0.9rem;
  font-size: 0.9rem;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn--small:hover:not(:disabled) { background: var(--surface); }
.btn--small:disabled { cursor: not-allowed; color: var(--text-muted); }

.download-steps { margin-top: 1.4rem; }
.download-steps summary {
  cursor: pointer;
  font-weight: 700;
  padding: 0.5rem 0;
}
.download-steps ol {
  list-style: decimal;
  padding-left: 1.3rem;
  margin-top: 0.6rem;
  display: grid;
  gap: 0.5rem;
}
.download-steps li { color: var(--text-muted); }
.download-steps code,
.download-noscript code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}
.download-noscript { margin-top: 1rem; color: var(--text-muted); max-width: 60ch; }

/* --- Footer -------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: clamp(2rem, 5vw, 3rem) 0;
  background: var(--bg-alt);
}
.site-footer__inner { display: grid; gap: 0.9rem; max-width: 70ch; }
.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
}
.site-footer__brand .brand__glyph { font-size: 22px; }
.site-footer__note { color: var(--text-muted); font-size: 0.95rem; }
.site-footer__meta { color: var(--text-muted); font-size: 0.85rem; }

/* --- Narrow phones (320px) ----------------------------------------------- */
@media (max-width: 900px) {
  /* Header wraps to rows: brand + controls, then the nav underneath, so the
     nav or the language selector never pushes the page wider than the
     viewport. The sticky header is taller here, so anchor scrolling needs more
     room above the target. */
  html { scroll-padding-top: 140px; }
  .site-header__inner { flex-wrap: wrap; row-gap: 0.15rem; padding-block: 0.35rem; }
  .brand { margin-inline-end: auto; }
  .site-controls { order: 2; margin-inline-start: 0; }
  .site-nav { order: 3; width: 100%; margin-inline-start: 0; }
  .site-nav__list { justify-content: flex-start; }
}

@media (max-width: 600px) {
  /* Swap the inline section links for the compact menu before they can wrap
     into two rows on a narrow phone. The language button keeps its full name
     until 480px; only the section links change here. */
  .site-nav__list { display: none; }
  .site-nav__compact { display: block; }
}

@media (max-width: 480px) {
  /* Phone header: brand on the left, language selector + theme toggle on the
     right, both on one row. The section links collapse into the compact menu
     below the button, so Thai and Vietnamese labels never force a horizontal
     scroll or a clipped link. */
  .site-header__inner { flex-wrap: wrap; row-gap: 0.1rem; column-gap: 0.25rem; }
  .brand { margin-inline-end: auto; gap: 0.35rem; }
  .site-controls { order: 2; margin-inline-start: 0; flex-wrap: nowrap; gap: 0.2rem; }
  /* Shrink the language button to globe + short code so the row never wraps.
     The full language name stays in the accessibility tree (clip-hidden, not
     display:none) so a screen reader still hears "Language Tiếng Việt"; only
     the visual abbreviation is swapped in. */
  .lang-switch__name {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .lang-switch__short { display: inline; }
  .lang-switch__button { padding: 0 0.55rem; }
}

@media (max-width: 380px) {
  .site-header__inner { padding-inline: 0.75rem; }
  .brand__mark { width: 28px; height: 28px; }
  .brand__name { font-size: 1rem; }
  .lang-switch__button { padding: 0 0.5rem; font-size: 0.8rem; }
  .site-nav__button { padding: 0 0.55rem; font-size: 0.8rem; }
  .phone { width: min(260px, 82vw); }
}