/* Calkub — calkub.app
 *
 * Colour: reference/theme/MODERN_MINIMAL.md's neutrals, with its blue swapped for the logo's
 * durian green (the app's Theme.Palette.accent*, same values). Two contrast decisions carried
 * over: white text sits on #2f7a22 (5.35:1), never on #3a9a2c (3.60: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;
  /* Text greys as calai.app uses them: black for headings, nav and body copy (hero and feature
     copy dim it with opacity), #262626 for section subtitles, gray-700 for card copy, gray-600
     for secondary lines (footer links, the dark mode subtitle). */
  --fg: #000000;
  --ink: #000000;
  --text-800: #1f2937;
  --legal-head: #222222;
  --legal-text: #333333;
  --text-sub: #262626;
  --text-700: #374151;
  --text-600: #4b5563;
  --card: #ffffff;
  --muted: #f9fafb;
  --muted-fg: #6b7280;
  --secondary: #f3f4f6;
  --secondary-fg: #4b5563;
  --accent: #eef6ea;
  --accent-fg: #1f4a15;
  --primary: #3a9a2c;
  --primary-strong: #2f7a22;
  --primary-text: #2f7a22;
  --chip: #f3f4f6;
  --warn-bg: #fff7ec;
  --warn-ink: #8a5a18;
  --on-primary: #ffffff;
  --border: #e5e7eb;
  --line-control: #8b919c;
  --ring: #3a9a2c;
  --chart-1: #3a9a2c;
  --chart-2: #2f7a22;
  --chart-3: #256219;
  --chart-4: #1d4d14;
  --chart-5: #16390f;
  --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%, #eef6ea 0%, rgb(238 246 234 / 0) 70%);
  /* Page background: calai.app's full-length body fade, stop for stop (white → ivory at a third
     → pale green at two thirds, theirs is alice blue → ivory). From the header to the Why section
     it runs white into a faint green, as Cal AI's does, and it puts the tint behind the FAQ cards.
     No radial washes: the green and warm lobes that used to sit behind the header read as a
     smudge through the translucent header. The wash tokens remain for the screen-wall card tints. */
  --wash-cool: #e4f1df;
  --wash-warm: #f6ece8;
  --page-bg: linear-gradient(#ffffff, #fffff0, #eff7eb, #fffff0);

  --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;
    --text-800: #fafafa;
    --legal-head: #fafafa;
    --legal-text: #e5e5e5;
    --text-sub: #e5e5e5;
    --text-700: #d4d4d4;
    --text-600: #a3a3a3;
    --card: #262626;
    --muted: #1f1f1f;
    --muted-fg: #a3a3a3;
    --secondary: #262626;
    --secondary-fg: #e5e5e5;
    --accent: #1c3a14;
    --accent-fg: #c8ebbd;
    --primary: #4fb33a;
    --primary-strong: #2f7a22;
    --primary-text: #8ad676;
    --chip: #3a3a3a;
    --warn-bg: rgb(245 158 11 / 0.12);
    --warn-ink: #fbbf24;
    --border: #404040;
    --line-control: #8a8a8a;
    --chart-1: #8ad676;
    --chart-2: #4fb33a;
    --chart-3: #3a9a2c;
    --chart-4: #2f7a22;
    --chart-5: #256219;
    --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(28 58 20 / 0.55) 0%, rgb(28 58 20 / 0) 70%);
    --wash-cool: #18241a;
    --wash-warm: #2b2019;
    --page-bg: var(--bg);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --primary-text: #8ad676;
  --primary: #4fb33a;
  --chip: #3a3a3a; --warn-bg: rgb(245 158 11 / 0.12); --warn-ink: #fbbf24;
  --bg: #171717; --fg: #e5e5e5; --ink: #fafafa; --text-800: #fafafa; --legal-head: #fafafa; --legal-text: #e5e5e5; --text-sub: #e5e5e5; --text-700: #d4d4d4; --text-600: #a3a3a3; --card: #262626; --muted: #1f1f1f; --muted-fg: #a3a3a3;
  --secondary: #262626; --secondary-fg: #e5e5e5; --accent: #1c3a14; --accent-fg: #c8ebbd; --border: #404040;
  --line-control: #8a8a8a; --chart-1: #8ad676; --chart-2: #4fb33a; --chart-3: #3a9a2c; --chart-4: #2f7a22; --chart-5: #256219;
  --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(28 58 20 / 0.55) 0%, rgb(28 58 20 / 0) 70%);
  --wash-cool: #18241a; --wash-warm: #2b2019;
  --page-bg: var(--bg);
  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;
  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; }

/* 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: 32px; }
/* Cal AI's logo renders 114 × 34 (32 on phones); ours matches its height. */
.wordmark { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 30px; letter-spacing: -0.02em; line-height: 1; }
.wordmark .mark { color: var(--ink); flex: none; }
/* Cal AI's logo is 32 tall on phones: header 16 + 32 + 16 = 64. */
@media (max-width: 1179px) { .site-header .wordmark { font-size: 28px; } .site-header .wordmark .mark { width: 32px; height: 32px; } }
.nav-links { display: none; }
.nav-links a { color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 500; }
.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: 16px; }
.lang-toggle { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; line-height: 1.5; padding: 3px 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: 32px; height: 32px; }
.menu summary::-webkit-details-marker { display: none; }
/* Cal AI's phone menu opens inside the header, not over the page: the links sit straight under the
   logo on the header's own background, 44px apart, with the badge centred at 90% below them, and
   the header grows so the page moves down. site.js sets that growth (header padding = menu
   height); without it the menu still opens, over the page. */
.menu ul { list-style: none; margin: 0; padding: 0 20px; }
.menu[open] > ul { position: absolute; top: 32px; right: -20px; width: 100vw; }
.menu li { padding: 8px 0; font-size: 18px; line-height: 28px; }
:lang(th) .menu li { line-height: 1.6; }
.menu li a { color: var(--ink); text-decoration: none; }
.menu li.menu-store { display: flex; justify-content: center; padding-top: 16px; }
.menu li.menu-store .store img { width: 122px; }
@media (max-width: 1179px) { .site-header:has(.menu[open]) { padding-bottom: calc(var(--menu-h, 0px) + 16px); } }
/* Cal AI switches to the full nav at lg (1024). Ours switches at 1180: our link labels are
   longer (Thai "จัดการการสมัครสมาชิก" especially) plus a language toggle, and at 1024 the badge
   was pushed 100px past the viewport. */
@media (min-width: 1180px) {
  .site-header { padding-inline: 20px; }
  /* top-7 on Cal AI: the links sit 28px down the header, a few px below the badges' centre line. */
  .nav-links { display: flex; gap: 30px; position: absolute; left: 50%; top: 12px; transform: translateX(-50%); line-height: 24px; }
  .nav { min-height: 41px; }
  .nav-store { display: block; line-height: 0; }
  .menu { display: none; }
}
@media (min-width: 1280px) { .site-header { padding-inline: 0; } }

/* ------------------------------------------------------------------ store badge
   Apple's badge, re-framed to the 135 × 40 shape Cal AI uses (badges/app-store/widen.mjs), at
   Cal AI's widths: 162 in the hero, 135 in the header and footer. */

.store { display: inline-block; margin: 0; line-height: 0; }
.store img { display: block; height: auto; }
.store-lg img { width: 162px; height: auto; }
.store-sm img { width: 135px; height: auto; }
a.store:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 8px; }

/* ------------------------------------------------------------------ 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 { overflow-x: clip; 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(--ink); color: var(--bg); font-weight: 700; font-size: 13px; line-height: 1.6; }
.hero h1 { font-size: 52px; line-height: 1.25; font-weight: 700; letter-spacing: normal; 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; 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); }
/* The screenshots' own ground is the page's (white / #171717), so a bare screenshot has no edge.
   Each card is a tinted panel instead, the app's wash colours plus the accent tint, rotated so
   neighbours differ, with the screen standing in a phone frame. */
.wall-card.tone-0 { background: linear-gradient(160deg, var(--wash-cool), color-mix(in srgb, var(--wash-cool) 55%, var(--secondary))); }
.wall-card.tone-1 { background: linear-gradient(160deg, var(--wash-warm), color-mix(in srgb, var(--wash-warm) 55%, var(--secondary))); }
.wall-card.tone-2 { background: linear-gradient(160deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--secondary))); }
.wall-stage { aspect-ratio: 4 / 5; display: flex; justify-content: center; padding-top: 28px; overflow: hidden; }
.wall-card.is-tall .wall-stage { aspect-ratio: 3 / 4.4; }
.wall-phone { --pw: 64%; width: 64%; border-radius: 40px; padding: 8px; box-shadow: 0 0 0 1.5px #2b2b2e inset, 0 24px 40px -16px rgb(0 0 0 / 0.35); transition: transform 300ms ease-in-out; }
.wall-phone .phone-screen { border-radius: 32px; }
.wall-card:hover .wall-phone { transform: translateY(-6px); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wall-card { box-shadow: 0 0 0 1px #333; } }
:root[data-theme="dark"] .wall-card { box-shadow: 0 0 0 1px #333; }
.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: var(--muted-fg); line-height: 1.1; }
.wall-card h3 { margin: 0 0 4px; font-size: 20px; font-weight: 600; line-height: 1.4; color: var(--ink); }
/* Cal AI's equivalent is font-light, but white on a photo; dark 300 on a pale panel read thin. */
.wall-card p { margin: 0; font-size: 14px; font-weight: 400; 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; overflow-x: clip; }
.features h2, .dishes h2 { margin: 144px 0 48px; text-align: center; font-size: 36px; line-height: 1.11; font-weight: 500; 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; } }
:root[data-theme="dark"] .feature-dots span { background: #525252; } :root[data-theme="dark"] .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; 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(--text-sub); }
.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: 30px; background: var(--card); padding: 32px; box-shadow: 0 1px 20px 1px rgb(228 229 233 / 0.5); }
.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: 40px; height: 40px; }
.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(--text-700); }
: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(--muted-fg); }
: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; color: var(--text-800); }
:lang(th) .darkmode h2 { font-size: 34px; line-height: 1.45; letter-spacing: 0; }
.darkmode-copy p { margin: 0; font-size: 18px; color: var(--text-600); }
.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; }
/* One line on desktop, as Cal AI's heading in this slot is; the break only applies on narrow screens. */
@media (min-width: 1024px) { .br-narrow { display: none; } }
@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; color: var(--ink); }
/* Cal AI sets its section headings with normal tracking; the base h2 rule's -0.028em is for the
   legal and support pages. */
.wall-title, .features h2, .dishes h2, .why-title, .darkmode h2, .faq h2 { letter-spacing: normal; }
:lang(th) .faq h2 { font-size: 42px; letter-spacing: 0; }
.faq-sub { margin: 0 0 48px; text-align: center; font-size: 18px; color: var(--text-sub); }
.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); box-shadow: 0 1px 20px 1px rgb(228 229 233 / 0.5); }
/* The light-grey glow reads as a smudge on the dark page; there the card's own fill separates it. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.faq-item, .why-card) { box-shadow: none; } }
:root[data-theme="dark"] :is(.faq-item, .why-card) { box-shadow: none; }
.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-size: 16px; 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; } }

/* ------------------------------------------------------------------ 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; }

/* Privacy and Terms, set the way calai.app sets its legal pages: a plain document across the
   full content width (max-w-screen-xl px-5, 20px top and bottom), no section dividers.
   Headings #222, bold, normal tracking, line-height 1.6: 40/32/28px on desktop, 32/28/24px on
   phones. Copy #333 at 16/25.6px with 16px after paragraphs and lists; lists indented 40px with
   plain disc markers and 8px between items. The "Last Updated:" line is ordinary body copy. */
.legal { max-width: 1280px; margin: 0 auto; padding: 20px 20px 96px; font-size: 16px; line-height: 1.6; color: var(--legal-text); }
.legal h1, .legal h2, .legal h3 { color: var(--legal-head); font-weight: 700; line-height: 1.6; letter-spacing: normal; text-wrap: wrap; }
.legal h1 { font-size: 32px; margin: 0 0 16px; }
.legal h2 { font-size: 28px; margin: 0 0 14px; }
.legal h3 { font-size: 24px; margin: 0 0 12px; }
@media (min-width: 768px) {
  .legal h1 { font-size: 40px; margin-bottom: 20px; }
  .legal h2 { font-size: 32px; margin-bottom: 16px; }
  .legal h3 { font-size: 28px; margin-bottom: 14px; }
}
.legal p { margin: 0 0 16px; }
.legal ul { margin: 0 0 16px; padding-left: 40px; list-style: disc; }
.legal li { margin-bottom: 8px; }
.legal li::marker { color: var(--legal-text); }
.legal strong { font-weight: 700; color: var(--legal-text); }
/* Thai: same scale one step down with more leading, as everywhere else on the site. */
:lang(th) .legal { line-height: 1.85; }
:lang(th) .legal h1, :lang(th) .legal h2, :lang(th) .legal h3 { line-height: 1.5; letter-spacing: 0; }
:lang(th) .legal h1 { font-size: 30px; }
:lang(th) .legal h2 { font-size: 26px; }
:lang(th) .legal h3 { font-size: 22px; }
@media (min-width: 768px) {
  :lang(th) .legal h1 { font-size: 36px; }
  :lang(th) .legal h2 { font-size: 29px; }
  :lang(th) .legal h3 { font-size: 25px; }
}

/* ------------------------------------------------------------------ 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(--ink); border-color: var(--ink); color: var(--bg); }
.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; } }
:root[data-theme="dark"] .field-error, :root[data-theme="dark"] .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: #256219; }
.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; } }
:root[data-theme="dark"] .form-status[data-tone="error"] { color: #f87171; } :root[data-theme="dark"] .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; }
.aside-email { margin: 0 0 8px; font-size: 17px; font-weight: 600; }
: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(--ink); 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(--text-600); }
.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; line-height: 24px; }
.footer-links a { color: var(--text-600); 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; text-align: center; line-height: 20px; }
:lang(th) .footer-base p { line-height: 1.6; }
@media (min-width: 640px) { .footer-base p { text-align: left; } }
/* Footer language picker: the header's dropdown, opening upward from the base line. */
.footer-lang summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; color: var(--ink); font-weight: 600; font-size: 14px; }
.footer-lang summary:hover { background: var(--secondary); }
.footer-lang .lang-chev { transition: transform 200ms; }
.footer-lang[open] .lang-chev { transform: rotate(180deg); }
.lang-menu.footer-lang ul { top: auto; bottom: calc(100% + 8px); }
@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; }

/* ------------------------------------------------------------------ theme: screenshots and toggle
   Each screenshot is two images; show the one for the current theme, whether it comes from the
   device (prefers-color-scheme) or the header toggle (data-theme on <html>). */
.shot-dark { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shot-light { display: none !important; }
  :root:not([data-theme="light"]) .shot-dark { display: block !important; }
}
:root[data-theme="dark"] .shot-light { display: none !important; }
:root[data-theme="dark"] .shot-dark { display: block !important; }

.theme-toggle { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; color: var(--ink); cursor: pointer; }
.theme-toggle:hover { background: var(--chip); }
.theme-toggle:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.theme-toggle[hidden] { display: none; }
.theme-toggle .i-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }

/* Redeem page (unlisted) */
.redeem { padding-bottom: 72px; }
.redeem-card { padding: 28px; margin-bottom: 40px; }
.redeem-card input[type="text"] { font-size: 20px; letter-spacing: 0.08em; text-transform: uppercase; }
.redeem-card .btn { width: 100%; }
.redeem-h2 { font-size: 22px; margin: 0 0 16px; }
.redeem-steps { list-style: none; padding: 0; margin: 0 0 40px; display: grid; gap: 20px; }
.redeem-step { display: flex; gap: 16px; align-items: flex-start; }
.redeem-step h3 { font-size: 17px; margin: 2px 0 4px; }
.redeem-step p { margin: 0; color: var(--muted-fg); }
.redeem-num { flex: none; width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; font-weight: 600; background: var(--ink); color: var(--bg); }
.redeem-after { padding: 24px 28px; }
.redeem-after ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }

/* Language menu */
.lang-menu { position: relative; }
.lang-menu summary { list-style: none; cursor: pointer; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu ul { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; list-style: none; margin: 0; padding: 6px; min-width: 180px; background: var(--card); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.lang-menu li a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.lang-menu li a[aria-current="true"] { font-weight: 600; background: var(--secondary); }
a.btn { display: inline-block; text-decoration: none; }

/* ============ Creators page and approved-creator kit ============
   Modelled on wonsulting.com/ugc-creators: a tinted hero with one call to action, the deal as a
   single big number beside a view-to-pay ladder, then plain ruled lists rather than a grid of
   shadowed cards, and the form in its own tinted band. Green is the only accent. */
.creators-page main { overflow-x: clip; }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-control); }
.btn-ghost:hover { background: var(--secondary); }

.cr-hero { padding: 64px 0 0; text-align: center; background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 12%, var(--bg)), var(--bg) 92%); }
.cr-hero-copy { max-width: 760px; }
.cr-eyebrow { display: inline-block; margin: 0 0 18px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary-text); }
:lang(th) .cr-eyebrow, :lang(ja) .cr-eyebrow, :lang(ko) .cr-eyebrow, :lang(zh-Hant) .cr-eyebrow { letter-spacing: 0; text-transform: none; font-size: 15px; }
.cr-hero h1 { font-size: clamp(44px, 7.4vw, 80px); line-height: 1; letter-spacing: -0.035em; margin: 0; }
:lang(th) .cr-hero h1 { line-height: 1.25; letter-spacing: 0; }
.cr-lede { font-size: 19px; line-height: 1.55; color: var(--secondary-fg); max-width: 34em; margin: 20px auto 28px; }
.cr-cta { padding: 16px 30px; font-size: 17px; }

.cr-reels { display: flex; justify-content: center; align-items: flex-end; gap: clamp(12px, 2.4vw, 28px); margin-top: 48px; padding: 0 16px; }
.cr-reel { position: relative; margin: 0; width: clamp(120px, 22vw, 230px); aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden; background: #111;
  box-shadow: 0 30px 60px -24px rgb(0 0 0 / .35); }
.cr-reel img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.cr-reel-0 { transform: rotate(-4deg); margin-bottom: 24px; }
.cr-reel-1 { width: clamp(136px, 25vw, 260px); z-index: 1; margin-bottom: -40px; }
.cr-reel-2 { transform: rotate(4deg); margin-bottom: 24px; }
.cr-reel figcaption { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  color: #fff; background: rgb(0 0 0 / .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cr-reel-t { font-weight: 500; opacity: .75; font-variant-numeric: tabular-nums; }

/* The deal: one big number, the ladder beside it, the calculator under both. */
.cr-deal { display: grid; gap: 40px 64px; padding-top: 112px; padding-bottom: 24px; }
@media (min-width: 900px) { .cr-deal { grid-template-columns: 0.9fr 1.1fr; align-items: end; } .cr-calc { grid-column: 1 / -1; } }
.cr-deal-value { margin: 0; font-size: clamp(96px, 16vw, 176px); font-weight: 800; line-height: .9; letter-spacing: -0.05em; color: var(--ink); }
.cr-deal-label { margin: 12px 0 0; font-size: 22px; font-weight: 600; color: var(--secondary-fg); }
.cr-deal-ladder h2, .cr-calc h2 { font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-fg); margin: 0 0 14px; }
:lang(th) .cr-deal-ladder h2, :lang(th) .cr-calc h2, :lang(ja) .cr-deal-ladder h2, :lang(ko) .cr-deal-ladder h2, :lang(zh-Hant) .cr-deal-ladder h2, :lang(ja) .cr-calc h2, :lang(ko) .cr-calc h2, :lang(zh-Hant) .cr-calc h2 { letter-spacing: 0; text-transform: none; font-size: 16px; }
.cr-deal-ladder ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.cr-deal-ladder li { display: grid; grid-template-columns: 9.5em 1fr auto; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.cr-l-views { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .cr-deal-ladder li { grid-template-columns: auto 1fr auto; gap: 12px; } .cr-l-views { font-size: 15px; } .cr-l-pay { font-size: 17px; } }
.cr-l-bar { height: 10px; border-radius: 999px; background: var(--primary); }
.cr-l-bar-0 { width: 4%; } .cr-l-bar-1 { width: 20%; } .cr-l-bar-2 { width: 40%; } .cr-l-bar-3 { width: 100%; }
.cr-l-pay { font-size: 20px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.cr-l-pay small { font-size: 12px; font-weight: 600; color: var(--muted-fg); margin-left: 4px; }
.cr-calc { padding: 24px 0 0; border-top: 1px solid var(--border); }
.cr-calc-row { display: grid; gap: 16px; align-items: end; }
@media (min-width: 720px) { .cr-calc-row { grid-template-columns: 1fr auto; gap: 48px; } }
.cr-calc-views { display: block; color: var(--muted-fg); }
.cr-calc-views output { font-size: 28px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.cr-calc-views input { display: block; width: 100%; margin-top: 12px; accent-color: var(--primary-strong); }
.cr-calc-pay { margin: 0; text-align: right; }
.cr-calc-pay span { display: block; color: var(--muted-fg); font-size: 14px; }
.cr-calc-pay output { font-size: 44px; font-weight: 800; color: var(--primary-text); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cr-calc-note { margin: 8px 0 0; font-size: 13.5px; color: var(--muted-fg); }

/* Sections: big heading, ruled content. */
.cr-block { padding-top: 96px; }
.cr-block > h2, .cr-two h2 { font-size: clamp(30px, 4.4vw, 44px); line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 24px; }
:lang(th) .cr-block > h2, :lang(th) .cr-two h2 { line-height: 1.35; letter-spacing: 0; }
.cr-intro { color: var(--secondary-fg); font-size: 17px; max-width: 42em; margin: -8px 0 24px; }
.cr-h3 { font-size: 20px; margin: 40px 0 14px; }
.cr-two { display: grid; gap: 56px 72px; }
@media (min-width: 860px) { .cr-two { grid-template-columns: 1fr 1fr; } }
.cr-two-tight { gap: 0 56px; }

.cr-format { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--border); }
@media (min-width: 760px) { .cr-format { grid-template-columns: repeat(4, 1fr); } }
.cr-format > div { padding: 20px 20px 20px 0; border-bottom: 1px solid var(--border); }
.cr-format dt { font-size: clamp(30px, 4vw, 44px); font-weight: 800; letter-spacing: -0.03em; color: var(--ink); line-height: 1.1; }
.cr-format dd { margin: 6px 0 0; color: var(--muted-fg); font-size: 15px; }
.cr-platforms { margin: 16px 0 0; color: var(--muted-fg); font-weight: 600; font-size: 14px; }

.cr-ticks, .cr-crosses, .cr-rules { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.cr-ticks li, .cr-crosses li, .cr-rules li { position: relative; padding: 14px 0 14px 36px; border-bottom: 1px solid var(--border); color: var(--ink); font-size: 17px; }
.cr-ticks li::before { content: ""; position: absolute; left: 4px; top: 21px; width: 12px; height: 7px; border-left: 2.5px solid var(--primary); border-bottom: 2.5px solid var(--primary); transform: rotate(-45deg); }
.cr-crosses li::before, .cr-crosses li::after { content: ""; position: absolute; left: 4px; top: 25px; width: 15px; height: 2.5px; background: #dc2626; border-radius: 2px; transform: rotate(45deg); }
.cr-crosses li::after { transform: rotate(-45deg); }
.cr-rules { counter-reset: r; }
.cr-rules li { counter-increment: r; }
.cr-rules li::before { content: counter(r, decimal-leading-zero); position: absolute; left: 0; top: 16px; font-size: 13px; font-weight: 800; color: var(--primary-text); font-variant-numeric: tabular-nums; }

.cr-terms { margin: 0; border-top: 1px solid var(--border); }
.cr-terms > div { display: grid; gap: 4px 32px; padding: 16px 0; border-bottom: 1px solid var(--border); }
@media (min-width: 760px) { .cr-terms > div { grid-template-columns: 14em 1fr; } }
.cr-terms dt { font-weight: 700; color: var(--ink); }
.cr-terms dd { margin: 0; color: var(--secondary-fg); }

.cr-apply-band { margin-top: 112px; padding: 88px 0 8px; background: color-mix(in srgb, var(--primary) 10%, var(--bg)); }
.cr-apply-band .cr-apply { max-width: 820px; margin: 0 auto; background: var(--card); border-radius: 28px; box-shadow: 0 1px 20px 1px rgb(228 229 233 / 0.5); }
.cr-apply-band .fine { max-width: 820px; margin: 20px auto 72px; }

/* Brief pieces on the kit. */
.cr-bar { display: flex; gap: 3px; height: 8px; margin: 0 0 8px; border-radius: 999px; overflow: hidden; }
.cr-bar i { display: block; }
.cr-bar .b0 { flex: 2; background: var(--primary-strong); }
.cr-bar .b1 { flex: 8; background: color-mix(in srgb, var(--primary-strong) 70%, transparent); }
.cr-bar .b2 { flex: 15; background: color-mix(in srgb, var(--primary-strong) 45%, transparent); }
.cr-bar .b3 { flex: 10; background: color-mix(in srgb, var(--primary-strong) 25%, transparent); }
.cr-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; border-radius: 16px; overflow: hidden; }
@media (min-width: 760px) { .cr-timeline { grid-template-columns: 1fr 1.2fr 1.5fr 1.3fr; } }
.cr-seg { display: flex; flex-direction: column; gap: 4px; padding: 16px; color: var(--ink); }
.cr-seg-0 { background: color-mix(in srgb, var(--primary-strong) 30%, var(--card)); }
.cr-seg-1 { background: color-mix(in srgb, var(--primary-strong) 20%, var(--card)); }
.cr-seg-2 { background: color-mix(in srgb, var(--primary-strong) 12%, var(--card)); }
.cr-seg-3 { background: color-mix(in srgb, var(--primary-strong) 7%, var(--card)); }
.cr-seg-t { font-size: 12.5px; font-weight: 700; color: var(--muted-fg); font-variant-numeric: tabular-nums; }
.cr-seg span:last-child { font-size: 14.5px; color: var(--secondary-fg); }
.cr-hooks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.cr-hooks li { padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 19px; font-weight: 600; color: var(--ink); }
.cr-terms-2 { margin-top: 8px; }
.cr-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.cr-steps li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.cr-step-n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 700; }
.cr-steps h3 { font-size: 17px; margin: 4px 0 2px; }
.cr-steps p { margin: 0; color: var(--secondary-fg); }

/* Kit page. */
.kit-hero { padding-bottom: 56px; }
.kit-hero h1 { font-size: clamp(40px, 6vw, 64px); }
.kit-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.kit-nav a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none; }
.kit-nav a span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 13px; }
.kit-sec { scroll-margin-top: 88px; padding-top: 72px; }
.kit-n { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-right: 14px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 20px; vertical-align: 6px; }
.kit-h3-first { margin-top: 0; }
.kit-premium { display: grid; gap: 40px; }
@media (min-width: 900px) { .kit-premium { grid-template-columns: 1fr 1fr; align-items: start; } }
.kit-premium .redeem-card { margin: 0; }
.kit-assets { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.kit-assets a { display: grid; gap: 8px; color: var(--ink); text-decoration: none; }
.kit-swatch { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 16px; border: 1px solid var(--border); padding: 18px; }
.kit-swatch-light { background: #fff; }
.kit-swatch-dark { background: #111; }
.kit-swatch img { max-width: 100%; max-height: 72px; object-fit: contain; }
.kit-asset-name { font-weight: 600; }
.kit-asset-fmt { font-size: 13px; color: var(--muted-fg); }
.kit-assets a:hover .kit-swatch, .kit-screens a:hover img { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Thai screens on the left, English on the right, a rule between them. */
.kit-screens { display: grid; grid-template-columns: 1fr 1fr; }
.kit-screens-col { padding-right: 24px; }
.kit-screens-col + .kit-screens-col { padding: 0 0 0 24px; border-left: 2px solid var(--border); }
.kit-screens-col h4 { margin: 0 0 16px; font-size: 16px; font-weight: 700; color: var(--ink); }
.kit-screens-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
@media (max-width: 560px) { .kit-screens-col { padding-right: 12px; } .kit-screens-col + .kit-screens-col { padding-left: 12px; } }
.kit-screens a { display: grid; gap: 8px; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; }
.kit-screens img { width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--border); }
.kit-page .fine { margin: 32px 0 72px; }

.cr-apply { padding: 40px; }
@media (max-width: 560px) { .cr-apply { padding: 22px; } }
.cr-apply h2 { font-size: clamp(26px, 3.5vw, 34px); margin: 0 0 6px; }
.cr-form-grid { display: grid; gap: 0 16px; }
@media (min-width: 640px) { .cr-form-grid { grid-template-columns: 1fr 1fr; } }
.cr-form select, .cr-form input[type="url"] { 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; }
.cr-agree { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 6px; color: var(--ink); }
.cr-agree input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--primary-strong); }
.cr-done { display: grid; justify-items: start; gap: 6px; }
.cr-done svg { width: 40px; height: 40px; color: var(--primary-strong); }
.cr-done p { margin: 0; font-size: 18px; color: var(--ink); }
.creators-page .fine { margin-bottom: 72px; }
.cr-done[hidden] { display: none; }
.cr-calc-tier { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--muted-fg); margin: 0 0 14px; }
.cr-calc-tier select { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line-control); border-radius: var(--radius-sm); padding: 8px 12px; }
.cr-calc-pay { display: flex; gap: 32px; justify-content: flex-end; flex-wrap: wrap; margin: 0; }
.cr-calc-pay p { margin: 0; text-align: right; }
.cr-calc-pay [data-calc-base] { font-size: 32px; font-weight: 800; color: var(--ink); }
/* Base-fee table, set as a ruled list like the terms. */
.cr-tiers > div { font-variant-numeric: tabular-nums; }
.cr-tiers .cr-tier-head dt, .cr-tiers .cr-tier-head dd { font-size: 14px; font-weight: 600; color: var(--muted-fg); }
.cr-tier-fee { font-size: 20px; font-weight: 800; color: var(--ink) !important; }
.cr-base-rules { margin-top: 24px; }

/* generated: bar widths */