/* Shared styles for Brainwave sub-pages (about, apps, blog, careers, contact, policies, 404).
   Tokens and components mirror index.html — keep the two in sync. */

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

:root {
  --bg: #ffffff;
  --panel: #f3f3f1;
  --ink: #0a0a0a;
  --ink-2: #555555;
  --ink-3: #8c8c8c;
  --line: rgba(0, 0, 0, 0.1);
  --dark: #0a0a0a;
  --on-dark: #fafafa;
  --on-dark-2: rgba(255, 255, 255, 0.62);
  --on-dark-3: rgba(255, 255, 255, 0.4);
  --line-dark: rgba(255, 255, 255, 0.12);

  --display: 'Geist', 'Noto Sans Thai', 'Inter', 'PingFang SC', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Apple SD Gothic Neo', 'Microsoft YaHei', 'Yu Gothic', 'Malgun Gothic', 'Noto Sans CJK SC', system-ui, sans-serif;
  --body: 'Inter', 'Noto Sans Thai', 'PingFang SC', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Apple SD Gothic Neo', 'Microsoft YaHei', 'Yu Gothic', 'Malgun Gothic', 'Noto Sans CJK SC', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1360px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html { scroll-behavior: smooth; }
section[id], article[id], h2[id] { scroll-margin-top: 88px; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ─── LANGUAGE ─── */
html[lang="th"] .en { display: none !important; }
html:not([lang="th"]) .th { display: none !important; }
html[lang="th"] body { line-height: 1.75; }
html[lang="th"] :is(h1, h2, h3, .mobile-menu a, .footer-word, .big-link) { letter-spacing: -0.01em; line-height: 1.3; }

/* ─── TYPE ─── */
h1, h2, h3 { font-family: var(--display); font-weight: 300; }
h1 { font-size: clamp(42px, 6.4vw, 92px); line-height: 1.02; letter-spacing: -0.048em; }
h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -0.036em; }
h3 { font-size: clamp(21px, 2vw, 26px); line-height: 1.2; letter-spacing: -0.028em; }

.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--ink-3);
  margin-bottom: 28px;
}
/* Brainwave mark instead of a plain square */
.eyebrow::before {
  content: '';
  width: 11px; height: 11px; flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath fill-rule='evenodd' d='M30 16.3496C29.8015 16.4459 29.5785 16.5 29.3429 16.5H22.8886H21.2173C19.466 16.5 18.3781 14.9719 18.2479 13.5271L18.2478 13.5258C18.1221 12.1169 17.9754 11.1178 17.7293 10.4857C17.6413 10.2598 17.5653 10.1491 17.5246 10.1009C17.4481 10.2168 17.3369 10.4446 17.2294 10.8436C16.9705 11.8051 16.8631 13.2453 16.8631 15C16.8631 16.7955 16.7616 18.5696 16.3938 19.9348C16.2107 20.6149 15.9284 21.3244 15.4527 21.8886C14.9348 22.5032 14.1934 22.9286 13.2702 22.9286C12.5125 22.9286 11.8226 22.6846 11.2607 22.2029C10.7326 21.75 10.4045 21.1619 10.1862 20.6016C9.76364 19.5166 9.59725 18.1054 9.47524 16.7415L9.44685 16.6006L9.47514 16.7404L9.47524 16.7415C9.46413 16.6203 9.42707 16.5416 9.39944 16.5H7.82845H0.656968C0.421405 16.5 0.198489 16.446 0 16.3497C0.685107 24.0016 7.13923 30 15 30C22.8607 30 29.3149 24.0015 30 16.3496ZM30 13.6504C29.8015 13.5541 29.5785 13.5 29.3429 13.5H22.8886H21.3197C21.2915 13.4579 21.2544 13.3791 21.2435 13.2592C21.1219 11.8961 20.9555 10.4847 20.5328 9.39936C20.3146 8.83895 19.9864 8.25078 19.4584 7.79775C18.8967 7.31584 18.2066 7.07143 17.4485 7.07143C16.5254 7.07143 15.7839 7.4968 15.2659 8.11138C14.7904 8.67559 14.5081 9.38506 14.3249 10.0652C13.9572 11.4304 13.8555 13.2045 13.8555 15C13.8555 16.7547 13.7482 18.1949 13.4892 19.1564C13.3817 19.5556 13.2705 19.7834 13.194 19.8992C13.1534 19.8512 13.0775 19.7408 12.9897 19.5152C12.7436 18.8834 12.597 17.8844 12.4709 16.4738L12.4707 16.472C12.3393 15.0225 11.2508 13.5 9.49976 13.5H7.82845H0.656968C0.421404 13.5 0.19849 13.554 7.16817e-07 13.6503C0.685111 5.99844 7.13924 0 15 0C22.8607 0 29.3149 5.99846 30 13.6504Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath fill-rule='evenodd' d='M30 16.3496C29.8015 16.4459 29.5785 16.5 29.3429 16.5H22.8886H21.2173C19.466 16.5 18.3781 14.9719 18.2479 13.5271L18.2478 13.5258C18.1221 12.1169 17.9754 11.1178 17.7293 10.4857C17.6413 10.2598 17.5653 10.1491 17.5246 10.1009C17.4481 10.2168 17.3369 10.4446 17.2294 10.8436C16.9705 11.8051 16.8631 13.2453 16.8631 15C16.8631 16.7955 16.7616 18.5696 16.3938 19.9348C16.2107 20.6149 15.9284 21.3244 15.4527 21.8886C14.9348 22.5032 14.1934 22.9286 13.2702 22.9286C12.5125 22.9286 11.8226 22.6846 11.2607 22.2029C10.7326 21.75 10.4045 21.1619 10.1862 20.6016C9.76364 19.5166 9.59725 18.1054 9.47524 16.7415L9.44685 16.6006L9.47514 16.7404L9.47524 16.7415C9.46413 16.6203 9.42707 16.5416 9.39944 16.5H7.82845H0.656968C0.421405 16.5 0.198489 16.446 0 16.3497C0.685107 24.0016 7.13923 30 15 30C22.8607 30 29.3149 24.0015 30 16.3496ZM30 13.6504C29.8015 13.5541 29.5785 13.5 29.3429 13.5H22.8886H21.3197C21.2915 13.4579 21.2544 13.3791 21.2435 13.2592C21.1219 11.8961 20.9555 10.4847 20.5328 9.39936C20.3146 8.83895 19.9864 8.25078 19.4584 7.79775C18.8967 7.31584 18.2066 7.07143 17.4485 7.07143C16.5254 7.07143 15.7839 7.4968 15.2659 8.11138C14.7904 8.67559 14.5081 9.38506 14.3249 10.0652C13.9572 11.4304 13.8555 13.2045 13.8555 15C13.8555 16.7547 13.7482 18.1949 13.4892 19.1564C13.3817 19.5556 13.2705 19.7834 13.194 19.8992C13.1534 19.8512 13.0775 19.7408 12.9897 19.5152C12.7436 18.8834 12.597 17.8844 12.4709 16.4738L12.4707 16.472C12.3393 15.0225 11.2508 13.5 9.49976 13.5H7.82845H0.656968C0.421404 13.5 0.19849 13.554 7.16817e-07 13.6503C0.685111 5.99844 7.13924 0 15 0C22.8607 0 29.3149 5.99846 30 13.6504Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lede { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--ink-2); max-width: 620px; }
.muted { color: var(--ink-3); }

/* ─── BUTTONS ─── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 22px;
  border-radius: 999px;
  font-size: 15px; font-weight: 500; letter-spacing: -0.01em;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #2a2a2a; }
.btn-line { border: 1px solid rgba(0,0,0,0.22); color: var(--ink); }
.btn-line:hover { border-color: var(--ink); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: #e9e9e9; }
.btn-sm { height: 36px; padding: 0 16px; font-size: 14px; }
.btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* ─── NAV ─── */
#nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.86);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  height: 64px; display: flex; align-items: center; gap: 40px;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display); font-size: 20px; font-weight: 400; letter-spacing: -0.03em;
}
.nav-logo svg { width: 22px; height: 22px; fill: currentColor; }
.nav-links { display: flex; gap: 28px; list-style: none; }
.nav-links a { font-size: 14px; color: var(--ink-2); transition: color 0.2s; }
.nav-links a:hover { color: var(--ink); }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
/* Language dropdown (built by lang.js) */
.lang-switch { position: relative; margin-right: 4px; }
.lang-btn {
  display: flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 10px 0 11px;
  border-radius: 999px;
  font-size: 13.5px; color: var(--ink-2);
  transition: background 0.2s, color 0.2s;
}
.lang-btn:hover, .lang-switch.open .lang-btn { background: rgba(0,0,0,0.05); color: var(--ink); }
.lang-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.lang-globe { width: 15px; height: 15px; flex-shrink: 0; }
.lang-chevron { width: 13px; height: 13px; flex-shrink: 0; color: var(--ink-3); transition: transform 0.25s var(--ease); }
.lang-switch.open .lang-chevron { transform: rotate(180deg); }
.lang-cur-short { display: none; }
.lang-list {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 200;
  min-width: 196px; list-style: none; margin: 0; padding: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.04);
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity 0.15s, transform 0.2s var(--ease);
}
.lang-switch.open .lang-list { opacity: 1; transform: none; pointer-events: auto; }
.lang-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 12px; border-radius: 8px;
  font-size: 14.5px; color: var(--ink-2); cursor: pointer; white-space: nowrap;
}
.lang-list li.active { background: var(--panel); color: var(--ink); }
.lang-list li[aria-selected="true"] { color: var(--ink); font-weight: 500; }
.lang-list li svg { width: 15px; height: 15px; opacity: 0; }
.lang-list li[aria-selected="true"] svg { opacity: 1; }
@media (max-width: 720px) {
  .lang-cur { display: none; }
  .lang-cur-short { display: inline; }
  .lang-btn { padding: 0 8px 0 9px; gap: 5px; }
}

/* Hide the page briefly while a translation dictionary loads (lang.js removes this) */
html.i18n-pending body { opacity: 0; }
body { transition: opacity 0.15s; }

/* Chinese, Japanese, Korean: no negative tracking, a little more line height */
html:is([lang="zh"], [lang="ja"], [lang="ko"]) :is(h1, h2, h3, .statement-text, .uc-tab-title, .fact-value, .metric-value, .mobile-menu a, .big-link, .model-name, .step-title) {
  letter-spacing: 0;
  line-height: 1.3;
}
html:is([lang="zh"], [lang="ja"], [lang="ko"]) body { line-height: 1.75; }
.nav-menu-btn { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; }
.nav-menu-btn span { display: block; width: 20px; height: 1.5px; background: var(--ink); position: relative; transition: background 0.2s; }
.nav-menu-btn span::before, .nav-menu-btn span::after {
  content: ''; position: absolute; left: 0; width: 20px; height: 1.5px; background: var(--ink);
  transition: transform 0.25s var(--ease);
}
.nav-menu-btn span::before { top: -6px; }
.nav-menu-btn span::after { top: 6px; }
.nav-open .nav-menu-btn span { background: transparent; }
.nav-open .nav-menu-btn span::before { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-menu-btn span::after { transform: translateY(-6px) rotate(-45deg); }
.mobile-menu { display: none; border-top: 1px solid var(--line); padding: 8px var(--gutter) 24px; }
.mobile-menu a {
  display: block; font-family: var(--display); font-weight: 300; font-size: 30px;
  letter-spacing: -0.03em; padding: 10px 0; border-bottom: 1px solid var(--line);
}
.nav-open .mobile-menu { display: block; }

/* ─── PAGE HERO ─── */
.page-hero { padding: clamp(72px, 10vw, 140px) 0 clamp(48px, 6vw, 88px); border-bottom: 1px solid var(--line); }
.page-hero h1 { margin-bottom: 28px; max-width: 1000px; }
.page-hero .meta { margin-top: 28px; font-size: 13px; color: var(--ink-3); }

.section { padding: clamp(64px, 9vw, 128px) 0; }
.section + .section { border-top: 1px solid var(--line); }
.section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head .lede { justify-self: end; }

/* ─── GRIDS ─── */
.cols-2, .cols-3, .cols-4 { display: grid; gap: 12px; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  border: 1px solid var(--line);
  padding: 28px;
  display: flex; flex-direction: column; gap: 12px;
  background: #fff;
  transition: border-color 0.2s;
}
a.card:hover { border-color: var(--ink); }
.card .num { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.card p { font-size: 15px; color: var(--ink-2); }
.card .card-foot { margin-top: auto; padding-top: 12px; font-size: 14px; color: var(--ink-3); }

.rule-list { border-top: 1px solid var(--line); }
.rule-list > * {
  display: grid; grid-template-columns: 1fr 2fr; gap: 24px; align-items: baseline;
  padding: 24px 0; border-bottom: 1px solid var(--line);
}
.rule-list dt, .rule-list .k { color: var(--ink-3); font-size: 14px; }
.rule-list dd, .rule-list .v { font-size: 16px; }

.panel-img { background: var(--panel); overflow: hidden; }
.panel-img img { width: 100%; height: 100%; object-fit: cover; }

/* ─── PROSE (policies, blog posts) ─── */
.doc { display: grid; grid-template-columns: 240px minmax(0, 720px); gap: clamp(32px, 6vw, 112px); }
.toc { position: sticky; top: 96px; align-self: start; font-size: 14px; }
.toc p { color: var(--ink-3); margin-bottom: 12px; font-size: 13px; }
.toc ol { list-style: none; display: flex; flex-direction: column; gap: 8px; border-left: 1px solid var(--line); }
.toc a { display: block; padding-left: 14px; color: var(--ink-2); margin-left: -1px; border-left: 1px solid transparent; }
.toc a:hover { color: var(--ink); border-left-color: var(--ink); }

.prose { font-size: 16.5px; color: #222; }
.prose > * + * { margin-top: 18px; }
.prose h2 { font-size: clamp(26px, 2.6vw, 34px); margin-top: 56px; color: var(--ink); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 21px; margin-top: 32px; color: var(--ink); }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 8px; }
.prose a { border-bottom: 1px solid currentColor; }
.prose strong { font-weight: 500; color: var(--ink); }
.prose .note { border-left: 2px solid var(--ink); padding: 4px 0 4px 18px; color: var(--ink-2); }

/* ─── FORM ─── */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13px; line-height: 1.2; color: var(--ink-3); }
/* Inputs and dropdown buttons share one box so every row lines up */
.field input, .field textarea, .dropdown-btn {
  width: 100%;
  font: inherit; font-size: 16px; line-height: 1.4; color: var(--ink);
  background: none; border: 0; border-bottom: 1px solid rgba(0,0,0,0.25);
  padding: 0; outline: none; border-radius: 0;
  transition: border-color 0.2s;
}
.field input, .dropdown-btn { height: 44px; }
.field textarea { resize: vertical; min-height: 120px; padding: 11px 0; }
.field input:focus, .field textarea:focus, .dropdown-btn:focus-visible, .dropdown.open .dropdown-btn { border-bottom-color: var(--ink); }
.field input::placeholder, .field textarea::placeholder { color: #b0b0b0; }

/* Custom dropdown */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.dropdown { position: relative; }
.dropdown-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  text-align: left; cursor: pointer;
}
.dropdown-btn svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--ink-3); transition: transform 0.25s var(--ease); }
.dropdown.open .dropdown-btn svg { transform: rotate(180deg); color: var(--ink); }
.dropdown-btn.invalid { border-bottom-color: #c4342c; }
.dropdown-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-value.placeholder { color: #b0b0b0; }
.dropdown-list {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 30;
  list-style: none; margin: 0; padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  max-height: 300px; overflow-y: auto;
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity 0.15s, transform 0.2s var(--ease);
}
.dropdown.open .dropdown-list { opacity: 1; transform: none; pointer-events: auto; }
.dropdown-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 12px; border-radius: 8px;
  font-size: 15px; line-height: 1.35; color: var(--ink-2); cursor: pointer;
}
.dropdown-list li.active { background: var(--panel); color: var(--ink); }
.dropdown-list li[aria-selected="true"] { color: var(--ink); font-weight: 500; }
.dropdown-list li svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0; }
.dropdown-list li[aria-selected="true"] svg { opacity: 1; }
.form-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.form-note { font-size: 13px; color: var(--ink-3); }
.form-note.ok { color: #1f7a3a; }
.form-note.error { color: #b42318; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; opacity: 0; }
button[disabled] { opacity: 0.6; cursor: progress; }

/* ─── DARK BAND ─── */
.on-dark { background: var(--dark); color: var(--on-dark); }
.on-dark .eyebrow { color: var(--on-dark-3); }
.on-dark .lede { color: var(--on-dark-2); }
.band { padding: clamp(80px, 10vw, 140px) 0; }
.band-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; }
.band-grid h2 { font-size: clamp(36px, 4.8vw, 68px); }

/* ─── FOOTER ─── */
footer { background: var(--dark); color: var(--on-dark); padding: 72px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 32px; }
.footer-brand p { font-size: 14px; color: var(--on-dark-3); max-width: 260px; margin-top: 16px; }
.footer-col h5 { font-size: 13px; font-weight: 400; color: var(--on-dark-3); margin-bottom: 16px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14px; color: var(--on-dark-2); transition: color 0.2s; }
.footer-col a:hover { color: #fff; }
.footer-word {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(80px, 19vw, 300px); letter-spacing: -0.06em; line-height: 0.8;
  color: #1c1c1c; margin-top: 64px; user-select: none;
}
.footer-bottom {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 72px; padding-top: 24px; border-top: 1px solid var(--line-dark);
  font-size: 13px; color: var(--on-dark-3);
}

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .nav-menu-btn { display: flex; }
  .section-head, .band-grid { grid-template-columns: 1fr; }
  .section-head .lede { justify-self: start; }
  .cols-3, .cols-4 { grid-template-columns: 1fr 1fr; }
  .doc { grid-template-columns: 1fr; }
  .toc { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }
}
@media (max-width: 720px) {
  .nav-actions .btn-line { display: none; }
  .cols-2, .cols-3, .cols-4, .form { grid-template-columns: 1fr; }
  .rule-list > * { grid-template-columns: 1fr; gap: 6px; }
}

/* Phone nav: tighter spacing so logo, language, Reserve and menu fit */
@media (max-width: 720px) {
  .nav-inner { gap: 12px; }
  .nav-actions { gap: 4px; }
  .lang-switch { margin-right: 0; }
  .nav-actions .btn-dark { padding: 0 14px; }
  .nav-menu-btn { width: 36px; }
}
@media (max-width: 380px) {
  .lang-chevron { display: none; }
  .nav-logo { font-size: 18px; gap: 8px; }
}
@media (max-width: 340px) {
  .nav-logo { font-size: 0; gap: 0; }
}