/* Calkub — calkub.app
 *
 * Colour: reference/theme/MODERN_MINIMAL.md, verbatim, with the app's two contrast decisions
 * carried over: white text sits on #2563eb (5.17:1), never on #3b82f6 (3.68:1); and `border`
 * is a divider only, never the sole boundary of a control (controls use --line-control).
 * Geometry: reference/calai/VISUAL_SYSTEM.md — 20px cards, capsule buttons, one soft y-offset
 * shadow and no elevation ladder.
 *
 * Thai: glyphs carry ~1.47× the ink of Latin at the same size and overshoot the line box, so
 * every Thai rule below gets more line-height, no negative tracking, and a slightly smaller
 * display size. Every one of those is a :lang(th) override, never a shared constant — each Thai
 * layout bug in this project came from a Latin-tuned constant.
 */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/inter-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Noto Sans Thai";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/noto-sans-thai.woff2) format("woff2");
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

:root {
  --bg: #ffffff;
  --fg: #333333;
  --ink: #111827;
  --card: #ffffff;
  --muted: #f9fafb;
  --muted-fg: #6b7280;
  --secondary: #f3f4f6;
  --secondary-fg: #4b5563;
  --accent: #e0f2fe;
  --accent-fg: #1e3a8a;
  --primary: #3b82f6;
  --primary-strong: #2563eb;
  --primary-text: #2563eb;
  --chip: #f3f4f6;
  --warn-bg: #fff7ec;
  --warn-ink: #8a5a18;
  --on-primary: #ffffff;
  --border: #e5e7eb;
  --line-control: #8b919c;
  --ring: #3b82f6;
  --chart-1: #3b82f6;
  --chart-2: #2563eb;
  --chart-3: #1d4ed8;
  --chart-4: #1e40af;
  --chart-5: #1e3a8a;
  --hidden-energy: #f59e0b;
  --hidden-energy-2: #d97706;
  --shadow: 0 2px 12px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.04);
  --radius: 20px;
  --radius-sm: 12px;
  --wash: radial-gradient(60% 55% at 78% 30%, #e0f2fe 0%, rgb(224 242 254 / 0) 70%);
  /* calai.app runs one gradient down the whole page (white → ivory → alice blue → ivory);
     same idea, in the theme's greys and its accent tint. */
  --page-bg: linear-gradient(#ffffff, #f9fafb, #eff6ff, #f9fafb);

  --font: "Inter", "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: 16px;
  --maxw: 1160px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #171717;
    --fg: #e5e5e5;
    --ink: #fafafa;
    --card: #262626;
    --muted: #1f1f1f;
    --muted-fg: #a3a3a3;
    --secondary: #262626;
    --secondary-fg: #e5e5e5;
    --accent: #1e3a8a;
    --accent-fg: #bfdbfe;
    --primary: #3b82f6;
    --primary-strong: #2563eb;
    --primary-text: #60a5fa;
    --chip: #3a3a3a;
    --warn-bg: rgb(245 158 11 / 0.12);
    --warn-ink: #fbbf24;
    --border: #404040;
    --line-control: #8a8a8a;
    --chart-1: #60a5fa;
    --chart-2: #3b82f6;
    --chart-3: #2563eb;
    --chart-4: #1d4ed8;
    --chart-5: #1e40af;
    --hidden-energy: #fbbf24;
    --hidden-energy-2: #f59e0b;
    --shadow: 0 2px 12px rgb(0 0 0 / 0.35), 0 0 0 1px rgb(255 255 255 / 0.04);
    --wash: radial-gradient(60% 55% at 78% 30%, rgb(30 58 138 / 0.55) 0%, rgb(30 58 138 / 0) 70%);
    --page-bg: #171717;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --primary-text: #60a5fa;
  --chip: #3a3a3a; --warn-bg: rgb(245 158 11 / 0.12); --warn-ink: #fbbf24;
  --bg: #171717; --fg: #e5e5e5; --ink: #fafafa; --card: #262626; --muted: #1f1f1f; --muted-fg: #a3a3a3;
  --secondary: #262626; --secondary-fg: #e5e5e5; --accent: #1e3a8a; --accent-fg: #bfdbfe; --border: #404040;
  --line-control: #8a8a8a; --chart-1: #60a5fa; --chart-2: #3b82f6; --chart-3: #2563eb; --chart-4: #1d4ed8; --chart-5: #1e40af;
  --hidden-energy: #fbbf24; --hidden-energy-2: #f59e0b;
  --shadow: 0 2px 12px rgb(0 0 0 / 0.35), 0 0 0 1px rgb(255 255 255 / 0.04);
  --wash: radial-gradient(60% 55% at 78% 30%, rgb(30 58 138 / 0.55) 0%, rgb(30 58 138 / 0) 70%);
  --page-bg: #171717;
  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--page-bg, var(--bg));
  color: var(--fg);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* Thai body copy: the extra leading is for the stacked vowels and tone marks above and the
   descending vowels below, which Latin line-height does not budget for. */
:lang(th) body, body:lang(th) { line-height: 1.85; font-size: 17px; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--primary-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 6px; }
p { margin: 0 0 1em; }
h1, h2, h3 { color: var(--ink); margin: 0; font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(46px, 7.2vw, 68px); line-height: 1.03; letter-spacing: -0.035em; }
h2 { font-size: clamp(33px, 4.6vw, 46px); line-height: 1.1; letter-spacing: -0.028em; }
h3 { font-size: 19px; line-height: 1.35; letter-spacing: -0.01em; }

/* Thai display type. No negative tracking: tightening Thai collides the marks above adjacent
   consonants. Smaller size, far more leading, and one weight lighter so the denser ink matches
   the English page's colour on the page. */
:lang(th) h1 { font-size: clamp(40px, 6.3vw, 60px); line-height: 1.38; letter-spacing: 0; font-weight: 700; }
:lang(th) h2 { font-size: clamp(29px, 4vw, 40px); line-height: 1.42; letter-spacing: 0; font-weight: 700; }
:lang(th) h3 { font-size: 19px; line-height: 1.6; letter-spacing: 0; font-weight: 600; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 820px; }
.center { text-align: center; }
.muted { color: var(--muted-fg); }
.small { font-size: 14px; }
:lang(th) .small { font-size: 14.5px; }
.lede { font-size: 19px; color: var(--muted-fg); max-width: 36em; }
:lang(th) .lede { font-size: 18px; line-height: 1.9; }
.center .lede { margin-inline: auto; }

.skip { position: absolute; left: 12px; top: -48px; z-index: 100; background: var(--primary-strong); color: #fff; padding: 8px 14px; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 12px; }

.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); }

/* ==================================================================================
 * Everything from here to "pages" mirrors calai.app, measured from its markup. Each rule
 * carries the Tailwind utilities it reproduces. Tailwind's gray scale is the theme's own
 * (gray-100 = --secondary, gray-200 = --border), so colours map token for token.
 * Breakpoints are Tailwind's: sm 640, md 768, lg 1024.
 * ================================================================================== */

/* ------------------------------------------------------------------ header
   sticky top-0 z-50 bg-white/20 px-5 py-4 backdrop-blur-xl · max-w-screen-xl
   links: absolute, centred, gap-[30px] · right: store badges, min-w-[180px], lg only */

.site-header { position: sticky; top: 0; z-index: 50; padding: 16px 20px; background: color-mix(in srgb, var(--bg) 20%, transparent); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.nav { position: relative; max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; min-height: 40px; }
.wordmark { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 24px; letter-spacing: -0.02em; line-height: 1; }
.wordmark .mark { color: var(--primary); flex: none; }
.nav-links { display: none; }
.nav-links a { color: var(--ink); text-decoration: none; font-size: 16px; }
.nav-links a:hover, .nav-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
.nav-end { display: flex; align-items: center; gap: 12px; }
.lang-toggle { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; line-height: 1.5; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line-control); }
.nav-store { display: none; }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; color: var(--ink); display: grid; place-items: center; width: 36px; height: 36px; }
.menu summary::-webkit-details-marker { display: none; }
.menu ul { list-style: none; margin: 0; padding: 8px 20px 20px; }
.menu[open] > ul { position: absolute; top: 52px; right: -20px; width: 100vw; background: var(--bg); border-top: 1px solid var(--border); box-shadow: 0 16px 24px -12px rgb(0 0 0 / 0.15); }
.menu li { padding: 8px 0; font-size: 18px; }
.menu li a { color: var(--ink); text-decoration: none; }
.menu li.menu-store { padding-top: 12px; }
@media (min-width: 1024px) {
  .site-header { padding-inline: 20px; }
  .nav-links { display: flex; gap: 30px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .nav-store { display: block; min-width: 135px; }
  .menu { display: none; }
}
@media (min-width: 1280px) { .site-header { padding-inline: 0; } }

/* ------------------------------------------------------------------ store badge
   The App Store badge's footprint: 162 × 54 in the hero, 135 × 45 in the header and footer. */

.store { display: inline-flex; align-items: center; gap: 8px; margin: 0; background: #000; color: #fff; border: 1px solid #a6a6a6; border-radius: 9px; text-decoration: none; }
.store-lg { width: 162px; height: 54px; padding: 0 14px; }
.store-sm { width: 135px; height: 45px; padding: 0 11px; border-radius: 8px; }
.store-text { display: flex; flex-direction: column; line-height: 1.1; }
.store-text small { font-size: 10px; font-weight: 500; letter-spacing: 0.01em; }
.store-text b { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.store-sm .store-text small { font-size: 9px; }
.store-sm .store-text b { font-size: 17px; }
:lang(th) .store-text small { font-size: 11px; line-height: 1.45; }
:lang(th) .store-sm .store-text small { font-size: 10px; }
.store-soon { cursor: default; user-select: none; }

/* ------------------------------------------------------------------ phone (device frame) */

.phone {
  --pw: 300px;
  width: var(--pw);
  aspect-ratio: 1206 / 2622;
  border-radius: calc(var(--pw) * 0.155);
  padding: calc(var(--pw) * 0.03);
  background: #0b0b0c;
  box-shadow: 0 0 0 1.5px #2b2b2e inset;
  flex: none;
  /* A phone inside a flex row must not be stretched to the row's height: that overrides
     aspect-ratio and crops the screenshot through object-fit. */
  align-self: flex-start;
  height: auto;
}
.phone-screen { width: 100%; height: 100%; border-radius: calc(var(--pw) * 0.128); overflow: hidden; background: var(--muted); }
.phone-screen img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------ hero
   main: mt-10 grid grid-cols-1 items-center lg:grid-cols-2
   copy: mx-auto -mt-10 flex w-fit flex-col gap-4 p-5 sm:p-0
   pill: h-[42.5px] rounded-full border border-[#c6c6c68f] p-1.5 pr-3 text-xs sm:text-sm font-medium
   h1:   text-[52px] leading-tight font-bold, second part font-medium
   p:    max-w-[510px] text-base opacity-60
   art:  mx-auto overflow-hidden pb-40 sm:overflow-visible sm:pb-0, a 1000 × 900 composition */

.hero { margin-top: 40px; display: grid; grid-template-columns: 1fr; align-items: center; }
.hero-copy { margin: -40px auto 0; width: fit-content; max-width: 100%; display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.hero-pill { display: inline-flex; width: fit-content; align-items: center; gap: 8px; height: 42.5px; margin: 0; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid #c6c6c68f; font-size: 12px; font-weight: 500; color: var(--ink); }
.hero-pill-mark { display: grid; place-items: center; height: 30px; padding: 0 11px; border-radius: 999px; background: var(--primary-strong); color: #fff; font-weight: 700; font-size: 13px; line-height: 1.6; }
.hero h1 { font-size: 52px; line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.hero h1 span { font-weight: 500; }
:lang(th) .hero h1 { font-size: 46px; line-height: 1.42; letter-spacing: 0; }
.hero-lede { max-width: 510px; font-size: 16px; line-height: 1.5; margin: 0; color: var(--fg); opacity: 0.6; }
:lang(th) .hero-lede { line-height: 1.75; }
.hero-badges { display: flex; flex-direction: column; gap: 16px; }
.hero-art { position: relative; width: 100%; max-width: 700px; margin: 0 auto; aspect-ratio: 1000 / 900; container-type: inline-size; overflow: hidden; padding-bottom: 160px; box-sizing: content-box; }
.hero-phone { position: absolute; --pw: 40cqw; box-shadow: 0 0 0 1.5px #2b2b2e inset, 0 0 0 calc(var(--pw) * 0.012) #c9ccd1, 0 24px 48px -18px rgb(0 0 0 / 0.35); }
.hero-phone-a { left: 2.5cqw; top: 9cqw; transform: rotate(-6deg); }
.hero-phone-b { right: 3cqw; top: 1cqw; transform: rotate(6deg); }
.hero-arrow { position: absolute; left: 39cqw; top: 38cqw; width: 20cqw; color: var(--ink); z-index: 1; }
@media (min-width: 640px) {
  .hero-copy { padding: 0; }
  .hero-pill { font-size: 14px; }
  .hero-badges { flex-direction: row; }
  .hero-art { overflow: visible; padding-bottom: 0; }
}
@media (min-width: 1024px) { .hero { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------------ screen wall (Cal AI's influencer wall)
   h2:   mt-24 sm:mt-52 text-center text-[48px] font-medium
   grid: mx-auto mt-40 max-w-screen-xl grid-cols-1 gap-[21px] px-4 md:grid-cols-2 lg:grid-cols-3
   mid column md:-translate-y-20 · card rounded-3xl shadow-lg, caption m-4 rounded-b-2xl border */

.wall-title { margin: 96px 16px 0; text-align: center; font-size: 48px; font-weight: 500; line-height: 1.5; letter-spacing: -0.02em; color: var(--ink); }
:lang(th) .wall-title { font-size: 42px; line-height: 1.5; letter-spacing: 0; }
.wall { max-width: 1280px; margin: 160px auto 0; padding: 0 16px; display: grid; grid-template-columns: 1fr; gap: 21px; }
.wall-col { display: flex; flex-direction: column; gap: 21px; }
.wall-card { position: relative; margin: 0; overflow: hidden; border-radius: 24px; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); background: var(--muted); }
.wall-card img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; transition: transform 300ms ease-in-out; }
.wall-card.is-tall img { aspect-ratio: 3 / 4.4; }
.wall-card:hover img { transform: scale(1.05); }
.wall-card figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 16px; padding: 14px 16px 16px; border-radius: 6px 6px 16px 16px; border: 1px solid #cfcfcf79; background: color-mix(in srgb, var(--card) 82%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.wall-quote { display: block; margin: -8px 0 -20px; font-size: 36px; font-weight: 700; color: #60a5fa; line-height: 1.1; }
.wall-card h3 { margin: 0 0 4px; font-size: 20px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.wall-card p { margin: 0; font-size: 14px; font-weight: 300; opacity: 0.9; line-height: 1.45; color: var(--fg); }
:lang(th) .wall-card h3 { line-height: 1.6; }
:lang(th) .wall-card p { font-weight: 400; line-height: 1.7; }
@media (min-width: 640px) { .wall-title { margin-top: 208px; } }
@media (min-width: 768px) { .wall { grid-template-columns: 1fr 1fr; } .wall-col-mid { transform: translateY(-80px); } }
@media (min-width: 1024px) { .wall { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------------------------ features
   section px-4 py-16 lg:py-24 · h2 mt-36 mb-12 text-4xl lg:mb-16 lg:text-[48px] font-medium
   grid max-w-6xl grid-cols-1 items-center gap-12 lg:grid-cols-2 lg:gap-16
   phone w-[300px] lg:w-[350px] · dots absolute bottom-[-30px], w-3 h-3, gray-800 / gray-300
   card p-6 rounded-2xl border border-gray-200 bg-white; active scale-105 border-black bg-gray-100
   card h3 text-lg lg:text-xl font-semibold mb-2 · p text-sm lg:text-base opacity-70 */

.features { padding: 64px 16px; }
.features h2, .dishes h2 { margin: 144px 0 48px; text-align: center; font-size: 36px; line-height: 1.11; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
:lang(th) .features h2, :lang(th) .dishes h2 { font-size: 32px; line-height: 1.45; letter-spacing: 0; }
.features-grid { max-width: 1152px; margin: 0 auto; display: grid; grid-template-columns: 1fr; align-items: center; gap: 48px; }
.features-stage { position: relative; margin: 0 auto; display: grid; justify-items: center; }
.stage-phone { --pw: 300px; grid-area: 1 / 1; opacity: 0; transition: opacity 300ms ease-in-out; }
.stage-phone.is-active { opacity: 1; }
.feature-dots { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.feature-dots span { width: 12px; height: 12px; border-radius: 50%; background: #d1d5db; transition: background-color 300ms; }
.feature-dots span.is-active { background: #1f2937; }
.features-list { display: flex; flex-direction: column; gap: 16px; }
.feature { all: unset; box-sizing: border-box; display: block; padding: 24px; border-radius: 16px; border: 1px solid var(--border); background: var(--card); cursor: pointer; transition: all 300ms; }
.feature.is-active { transform: scale(1.05); border-color: var(--ink); background: var(--secondary); }
.feature:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.feature h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; line-height: 1.55; color: var(--ink); }
.feature p { margin: 0; font-size: 14px; line-height: 1.43; opacity: 0.7; color: var(--fg); }
:lang(th) .feature h3 { line-height: 1.6; }
:lang(th) .feature p { line-height: 1.75; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .feature-dots span { background: #525252; } :root:not([data-theme="light"]) .feature-dots span.is-active { background: #e5e5e5; } }
@media (min-width: 1024px) {
  .features { padding: 96px 16px; }
  .features h2 { font-size: 48px; margin-bottom: 64px; }
  :lang(th) .features h2 { font-size: 42px; }
  .features-grid { grid-template-columns: 1fr 1fr; gap: 64px; }
  .features-stage { margin: 0; }
  .stage-phone { --pw: 350px; }
  .features-list { gap: 24px; }
  .feature h3 { font-size: 20px; }
  .feature p { font-size: 16px; line-height: 1.5; }
}

/* ------------------------------------------------------------------ why
   h2 mt-40 text-center text-[48px] font-medium · p mb-20 text-center text-lg text-[#262626]
   grid max-w-6xl gap-8 px-4 md:grid-cols-2 lg:grid-cols-3
   card flex flex-col rounded-3xl bg-white p-8 · icon mb-4 h-16 w-16 rounded-xl bg-gray-100
   h3 mb-4 text-xl font-bold · p text-sm text-gray-700 */

.why-title { margin: 160px 16px 0; text-align: center; font-size: 48px; font-weight: 500; line-height: 1.5; letter-spacing: -0.02em; color: var(--ink); }
:lang(th) .why-title { font-size: 42px; letter-spacing: 0; }
.why-sub { margin: 0 16px 80px; text-align: center; font-size: 18px; line-height: 1.55; color: var(--fg); }
.why-grid { max-width: 1152px; margin: 0 auto; padding: 0 16px; display: grid; grid-template-columns: 1fr; gap: 32px; }
.why-card { display: flex; flex-direction: column; border-radius: 24px; background: var(--card); padding: 32px; }
.why-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 16px; border-radius: 12px; background: var(--secondary); color: var(--ink); }
.why-icon svg { width: 30px; height: 30px; }
.why-card h3 { margin: 0 0 16px; font-size: 20px; font-weight: 700; line-height: 1.4; color: var(--ink); }
.why-card p { margin: 0; font-size: 14px; line-height: 1.43; color: var(--secondary-fg); }
:lang(th) .why-card h3 { line-height: 1.6; }
:lang(th) .why-card p { line-height: 1.75; }
@media (min-width: 768px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .why-grid { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------------------------ dark mode
   section overflow-hidden px-4 py-32 lg:py-64 · grid max-w-6xl items-center gap-12 lg:grid-cols-2
   copy flex-col gap-4 lg:gap-6 text-center lg:text-left
   kicker text-sm font-medium tracking-wider uppercase · h2 text-4xl lg:text-5xl leading-tight bold
   p text-lg · image w-[300px] rounded-[30px] shadow-2xl lg:scale-110 lg:-rotate-3 */

.darkmode { overflow: hidden; padding: 128px 16px; }
.darkmode-grid { max-width: 1152px; margin: 0 auto; display: grid; grid-template-columns: 1fr; align-items: center; gap: 48px; }
.darkmode-copy { display: flex; flex-direction: column; gap: 16px; text-align: center; }
.darkmode-kicker { font-size: 14px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--primary-text); }
:lang(th) .darkmode-kicker { letter-spacing: 0; text-transform: none; font-size: 15px; }
.darkmode h2 { margin: 0; font-size: 36px; line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
:lang(th) .darkmode h2 { font-size: 34px; line-height: 1.45; letter-spacing: 0; }
.darkmode-copy p { margin: 0; font-size: 18px; color: var(--muted-fg); }
.darkmode-art { position: relative; margin: 0 auto; }
.darkmode-phone { --pw: 300px; box-shadow: 0 0 0 1.5px #3a3a3e inset, 0 25px 50px -12px rgb(0 0 0 / 0.25); }
@media (min-width: 1024px) {
  .darkmode { padding: 256px 16px; }
  .darkmode-grid { grid-template-columns: 1fr 1fr; gap: 64px; }
  .darkmode-copy { gap: 24px; text-align: left; }
  .darkmode h2 { font-size: 48px; }
  :lang(th) .darkmode h2 { font-size: 44px; }
  .darkmode-art { margin: 0; justify-self: end; }
  .darkmode-phone { transform: scale(1.1) rotate(-3deg); }
}

/* ------------------------------------------------------------------ dishes (Cal AI's review band)
   section bg-[#1E1A24] px-4 py-16 text-white lg:py-40 · h2 mb-12 text-4xl font-bold lg:text-[48px]
   flex flex-wrap justify-center gap-8, children w-80 border border-gray-700 shadow-2xl
   card flex-col gap-4 rounded-2xl p-8 · avatar 42px round · name text-[20px] font-medium
   text text-sm opacity-80 */

.dishes { background: #171717; color: #fafafa; padding: 64px 16px; }
.dishes h2 { margin: 0 0 48px; color: #fafafa; font-weight: 700; }
.dish-grid { max-width: 1152px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; }
.dish-card { width: 320px; max-width: 100%; display: flex; flex-direction: column; gap: 16px; padding: 32px; border-radius: 16px; background: #262626; border: 1px solid #404040; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); transition: transform 300ms; }
.dish-card:hover { transform: scale(1.05); }
.dish-head { display: flex; align-items: center; gap: 16px; }
.dish-emoji { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #404040; font-size: 22px; flex: none; }
.dish-card h3 { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.4; color: #fafafa; }
:lang(th) .dish-card h3 { line-height: 1.6; }
.dish-kcal { margin: 0; font-size: 14px; opacity: 0.8; }
.dish-kcal strong { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; opacity: 1; }
.dish-macros { margin: 0; font-size: 14px; opacity: 0.8; line-height: 1.5; }
.dishes-note { margin: 40px 0 0; text-align: center; font-size: 13px; opacity: 0.6; }
@media (min-width: 1024px) { .dishes { padding: 160px 16px; } .dishes h2 { font-size: 48px; margin-bottom: 64px; } :lang(th) .dishes h2 { font-size: 42px; } }

/* ------------------------------------------------------------------ FAQ (landing and /faq)
   section px-4 pt-32 pb-8 · h2 text-center text-[48px] font-medium · p mb-12 text-center text-lg
   list mx-auto max-w-3xl space-y-3 · item rounded-3xl bg-white overflow-hidden
   summary flex items-start justify-between gap-4 p-5 sm:p-6 · q text-base sm:text-lg font-medium
   chevron mt-0.5 h-7 w-7 rounded-full bg-[#F8F8FD] rotate-180 when open
   answer space-y-4 px-5 pb-6 sm:px-6, leading-relaxed · "See all" rounded-full border px-6 py-3 */

.faq { padding: 128px 16px 32px; }
.faq h2 { margin: 0; text-align: center; font-size: 48px; font-weight: 500; line-height: 1.5; letter-spacing: -0.02em; color: var(--ink); }
:lang(th) .faq h2 { font-size: 42px; letter-spacing: 0; }
.faq-sub { margin: 0 0 48px; text-align: center; font-size: 18px; color: var(--fg); }
.faq-list, .faq-group { max-width: 768px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { overflow: hidden; border-radius: 24px; background: var(--card); }
.faq-item summary { list-style: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--ink); }
:lang(th) .faq-item summary h3 { line-height: 1.7; }
.faq-chev { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-top: 2px; border-radius: 50%; background: var(--chip); color: var(--ink); transition: transform 200ms; }
.faq-chev svg { width: 14px; height: 14px; }
.faq-item[open] .faq-chev { transform: rotate(180deg); }
/* answer: space-y-4 px-5 pb-6 · p leading-relaxed text-[#4A4552]
   steps: space-y-3, li flex gap-3, 24px numbered circle · bullets: space-y-2, 6px dot mt-2.5
   note: flex gap-3 rounded-2xl p-4 text-sm (Tip grey, Heads up amber) · pills: rounded-full border px-4 py-2 */
.faq-a { padding: 0 20px 24px; display: flex; flex-direction: column; gap: 16px; color: var(--secondary-fg); line-height: 1.625; }
:lang(th) .faq-a { line-height: 1.85; }
.faq-a p { margin: 0; }
.faq-a strong { color: var(--ink); font-weight: 600; }
.faq-steps, .faq-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.faq-steps { gap: 12px; }
.faq-bullets { gap: 8px; }
.faq-steps li, .faq-bullets li { display: flex; gap: 12px; }
.faq-num { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--chip); color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1; margin-top: 1px; }
:lang(th) .faq-num { margin-top: 4px; }
.faq-dot { flex: none; width: 6px; height: 6px; margin-top: 10px; border-radius: 50%; background: #b7aec3; }
:lang(th) .faq-dot { margin-top: 12px; }
.faq-note { display: flex; gap: 12px; padding: 16px; border-radius: 16px; background: var(--chip); color: var(--ink); }
.faq-note svg { flex: none; margin-top: 2px; }
.faq-note p { font-size: 14px; color: var(--secondary-fg); }
.faq-note.is-warn { background: var(--warn-bg); color: var(--warn-ink); }
.faq-note.is-warn strong { color: var(--warn-ink); }
.faq-links { display: flex; flex-wrap: wrap; gap: 8px; }
.faq-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; }
.faq-pill:hover { background: var(--chip); }
.faq-more { margin: 32px 0 0; text-align: center; }
.pill-link { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--ink); font-weight: 500; text-decoration: none; transition: transform 150ms; }
.pill-link:hover { transform: scale(1.02); }
@media (min-width: 640px) {
  .faq-item summary { padding: 24px; }
  .faq-item summary h3 { font-size: 18px; }
  .faq-a { padding: 0 24px 24px; }
}

/* ------------------------------------------------------------------ /faq page (calai.app/faq)
   wrap max-w-screen-xl px-5 · head mx-auto mt-16 max-w-3xl text-center
   h1 text-4xl lg:text-5xl font-bold lg:tracking-tight · lede mt-4 text-lg · date mt-3 text-sm
   nav mx-auto mt-10 max-w-3xl flex-wrap justify-center gap-2, pills rounded-full border bg-white/60 px-4 py-2 text-sm
   groups mx-auto mt-14 mb-16 max-w-3xl space-y-14 · h2 mb-5 text-2xl font-medium
   "Still stuck?" rounded-3xl bg-white p-8 sm:p-10 text-center, soft shadow, dark pill button */

.faqpage { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.faqpage-head { max-width: 768px; margin: 64px auto 0; text-align: center; }
.faqpage-head h1 { margin: 0; font-size: 36px; line-height: 1.11; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
:lang(th) .faqpage-head h1 { font-size: 34px; line-height: 1.45; letter-spacing: 0; }
.faqpage-lede { margin: 16px 0 0; font-size: 18px; color: var(--muted-fg); }
.faqpage-date { margin: 12px 0 0; font-size: 14px; color: var(--muted-fg); }
.faqpage-nav { max-width: 768px; margin: 40px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.faqpage-nav a { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); background: color-mix(in srgb, var(--card) 60%, transparent); color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; }
:lang(th) .faqpage-nav a { line-height: 1.6; padding-block: 6px; }
.faqpage-nav a:hover { background: var(--card); }
.faqpage-groups { max-width: 768px; margin: 56px auto 64px; display: flex; flex-direction: column; gap: 56px; }
.faqpage-group { scroll-margin-top: 112px; }
.faqpage-group h2 { margin: 0 0 20px; font-size: 24px; font-weight: 500; line-height: 1.33; color: var(--ink); }
:lang(th) .faqpage-group h2 { line-height: 1.6; }
.stuck { border-radius: 24px; background: var(--card); padding: 32px; text-align: center; box-shadow: 0 1px 20px 1px rgb(228 229 233 / 0.5); }
.stuck h2 { margin: 0; font-size: 24px; font-weight: 500; color: var(--ink); }
.stuck p { max-width: 576px; margin: 12px auto 0; line-height: 1.625; color: var(--secondary-fg); }
:lang(th) .stuck p { line-height: 1.85; }
.stuck-btn { display: inline-flex; margin-top: 24px; padding: 12px 24px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 500; text-decoration: none; }
.stuck-btn:hover { transform: scale(1.02); }
@media (min-width: 640px) { .stuck { padding: 40px; } }
@media (min-width: 1024px) { .faqpage-head h1 { font-size: 48px; letter-spacing: -0.025em; } :lang(th) .faqpage-head h1 { font-size: 42px; } }

/* ------------------------------------------------------------------ closing (Cal AI's ratings band)
   section relative overflow-hidden px-4 py-16 lg:py-44, soft gradient image behind
   inner max-w-3xl flex-col items-center text-center · h2 mb-4 text-4xl lg:text-5xl font-bold
   line text-lg opacity-80 · badges mt-10 flex-col sm:flex-row gap-4 */

.closing { position: relative; overflow: hidden; padding: 64px 16px; background:
  radial-gradient(60% 90% at 8% 70%, rgb(59 130 246 / 0.12), transparent 70%),
  radial-gradient(45% 70% at 38% 0%, rgb(251 191 36 / 0.12), transparent 70%),
  radial-gradient(55% 80% at 55% 100%, rgb(236 72 153 / 0.10), transparent 70%),
  var(--bg); }
.closing-inner { position: relative; max-width: 768px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.closing h2 { margin: 0 0 16px; font-size: 36px; line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
:lang(th) .closing h2 { font-size: 34px; line-height: 1.45; letter-spacing: 0; }
.closing-inner > p { margin: 0; font-size: 18px; opacity: 0.8; }
.closing-badges { margin-top: 40px; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 640px) { .closing-badges { flex-direction: row; } }
@media (min-width: 1024px) { .closing { padding: 176px 16px; } .closing h2 { font-size: 48px; } :lang(th) .closing h2 { font-size: 44px; } }

/* ------------------------------------------------------------------ pages */

.page-head { padding-top: 56px; padding-bottom: 24px; }
.page-head h1 { font-size: clamp(34px, 5.4vw, 52px); }
:lang(th) .page-head h1 { font-size: clamp(31px, 4.8vw, 46px); }
.page-head .lede { margin-top: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.chip { padding: 7px 14px; border-radius: 999px; background: var(--secondary); color: var(--secondary-fg); text-decoration: none; font-size: 14.5px; font-weight: 500; line-height: 1.5; }
:lang(th) .chip { line-height: 1.7; padding-block: 6px; }
.chip:hover { background: var(--accent); color: var(--accent-fg); }
.faq-page { padding-bottom: 96px; display: flex; flex-direction: column; gap: 48px; }
.faq-group h2 { font-size: 24px; margin-bottom: 8px; letter-spacing: -0.015em; }
:lang(th) .faq-group h2 { font-size: 23px; letter-spacing: 0; }

.legal { padding-bottom: 96px; }
.legal .page-head { padding-inline: 0; }
.legal section { padding-top: 28px; margin-top: 28px; border-top: 1px solid var(--border); }
.legal h2 { font-size: 23px; letter-spacing: -0.015em; margin-bottom: 12px; }
:lang(th) .legal h2 { font-size: 22px; letter-spacing: 0; }
.legal h3 { font-size: 17px; margin: 20px 0 6px; }
.legal ul { padding-left: 1.2em; margin: 0 0 1em; }
.legal li { margin-bottom: 0.4em; }
.legal li::marker { color: var(--primary); }

/* ------------------------------------------------------------------ support */

.support-grid { display: grid; gap: 24px; padding-bottom: 96px; align-items: start; }
@media (min-width: 900px) { .support-grid { grid-template-columns: 1.6fr 1fr; gap: 40px; } }
.support-form, .support-done { padding: 24px; }
@media (min-width: 640px) { .support-form, .support-done { padding: 32px; } }
.field { border: 0; margin: 0 0 24px; padding: 0; min-width: 0; }
.field > label, .field legend { display: block; font-weight: 600; color: var(--ink); margin-bottom: 8px; padding: 0; font-size: 16px; }
.optional { font-weight: 400; color: var(--muted-fg); }
.radio-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.radio-chip { position: relative; }
.radio-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.radio-chip span { display: inline-block; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-control); font-size: 15px; line-height: 1.4; cursor: pointer; color: var(--fg); }
:lang(th) .radio-chip span { line-height: 1.65; padding-block: 7px; }
.radio-chip input:checked + span { background: var(--primary-strong); border-color: var(--primary-strong); color: #fff; }
.radio-chip input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 2px; }
textarea, input[type="email"], input[type="text"] {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line-control); border-radius: var(--radius-sm); padding: 12px 14px; line-height: 1.6;
}
:lang(th) textarea, :lang(th) input[type="email"] { line-height: 1.85; }
textarea { resize: vertical; min-height: 168px; }
textarea:focus, input:focus { outline: 2px solid var(--ring); outline-offset: 0; border-color: transparent; }
[aria-invalid="true"] { border-color: #dc2626; }
.field-meta { display: flex; justify-content: space-between; gap: 12px; margin: 6px 0 0; font-size: 13.5px; }
.counter { color: var(--muted-fg); margin-left: auto; font-variant-numeric: tabular-nums; }
.counter[data-over="true"] { color: #dc2626; font-weight: 600; }
.hint { font-size: 13.5px; color: var(--muted-fg); margin: 6px 0 0; }
.field-error { color: #dc2626; font-size: 14px; margin: 6px 0 0; font-weight: 500; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .field-error, :root:not([data-theme="light"]) .counter[data-over="true"] { color: #f87171; } }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.btn { font: inherit; font-weight: 600; font-size: 16px; line-height: 1.4; background: var(--primary-strong); color: var(--on-primary); border: 0; border-radius: 999px; padding: 14px 28px; cursor: pointer; min-height: 50px; }
:lang(th) .btn { line-height: 1.6; padding-block: 12px; }
.btn:hover { background: #1d4ed8; }
.btn:disabled { background: var(--secondary); color: var(--muted-fg); cursor: not-allowed; }
.form-status { margin: 0; font-size: 15px; color: var(--muted-fg); flex: 1 1 220px; }
.form-status[data-tone="error"] { color: #dc2626; font-weight: 500; }
.form-status[data-tone="warn"] { color: #b45309; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .form-status[data-tone="error"] { color: #f87171; } :root:not([data-theme="light"]) .form-status[data-tone="warn"] { color: #fbbf24; } }
.fine { font-size: 13.5px; color: var(--muted-fg); margin: 20px 0 0; }
.support-done { text-align: center; }
.support-done:focus { outline: none; }
.done-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); margin-bottom: 16px; }
.done-icon svg { width: 28px; height: 28px; }
.support-done h2 { font-size: 28px; margin-bottom: 10px; }
.ref code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 15px; background: var(--secondary); padding: 3px 8px; border-radius: 8px; color: var(--ink); white-space: nowrap; display: inline-block; }
.aside-card { padding: 24px; margin-bottom: 16px; }
.aside-card h2 { font-size: 19px; margin-bottom: 12px; letter-spacing: -0.01em; }
:lang(th) .aside-card h2 { letter-spacing: 0; line-height: 1.6; }
.aside-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.aside-links a { display: block; padding: 10px 0; border-top: 1px solid var(--border); text-decoration: none; font-weight: 500; }
.aside-links li:first-child a { border-top: 0; }

/* ------------------------------------------------------------------ 404 */

.notfound { padding: 96px 0 120px; text-align: center; }
.notfound .mark { color: var(--primary); margin: 0 auto 24px; }
.notfound p { color: var(--muted-fg); }

/* ------------------------------------------------------------------ footer
   footer pt-7 · grid max-w-7xl grid-cols-1 gap-8 px-4 md:grid-cols-3
   brand flex-col gap-4 · p mt-2 text-sm text-gray-600 · h3 mb-4 text-base font-semibold
   links space-y-2 text-sm text-gray-600 · base mt-2 border-t px-4 py-2 sm:flex-row justify-between */

.site-footer { padding-top: 28px; font-size: 14px; }
.footer-grid { max-width: 1280px; margin: 0 auto; padding: 0 16px; display: grid; grid-template-columns: 1fr; gap: 32px; }
.footer-brand { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.footer-brand p { margin: 8px 0 0; font-size: 14px; color: var(--muted-fg); }
.footer-h { margin: 0 0 16px; font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.5; }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-links a { color: var(--muted-fg); text-decoration: none; font-size: 14px; }
:lang(th) .footer-links a { line-height: 1.75; }
.footer-links a:hover { color: var(--ink); }
.footer-base { max-width: 1280px; margin: 8px auto 0; padding: 8px 16px 16px; border-top: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted-fg); font-size: 14px; }
.footer-base p { margin: 0; }
.footer-lang { display: flex; gap: 16px; }
.footer-lang a { color: var(--muted-fg); text-decoration: none; }
.footer-lang a[aria-current] { color: var(--ink); font-weight: 600; }
@media (min-width: 640px) { .footer-base { flex-direction: row; } }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }

.text-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
.text-link:hover { text-decoration: underline; }

/* generated: bar widths */