/* Shared stylesheet for every language version of the 翻譯小年糕 sales page
   (/, /en, /ja, /th, /id). Extracted verbatim from the
   zh-Hant page on 2026-09-06 so five copies cannot drift; the per-language
   font stacks and the header language switcher sit at the bottom. */
:root {
  --bg: #FFFFFF;
  --bg-alt: #FFFDF5;         /* warm off-white, picks up the 小年糕 yellow */
  --bg-chat: #DDE8F2;        /* LINE chat background blue */
  --text: #1F2937;
  --text-muted: #6B7280;
  --text-subtle: #9CA3AF;
  --divider: #E5E7EB;
  --line-green: #06C755;
  --line-green-hover: #05A648;
  --brand-yellow: #FFD84D;   /* 小年糕 logo yellow */
  --brand-yellow-soft: #FFF3C9;
  --brand-green: #22A04A;    /* the deeper green from the logo's 文 bubble */
  --brand-blue: #2F86D8;     /* the logo's A bubble */
  --accent: #1F2937;
  --font-sans: "Inter", "Noto Sans TC", system-ui, -apple-system,
               "PingFang TC", "Heiti TC", "Microsoft JhengHei", sans-serif;
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;
  --radius: 8px;
  --shadow-sm: 0 1px 2px rgba(31, 41, 55, 0.06);
  --shadow-md: 0 4px 12px rgba(31, 41, 55, 0.08);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }

.page {
  max-width: 1100px;
  margin: 0 auto;
  padding-left: var(--space-7);
  padding-right: var(--space-7);
}

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--divider);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 600;
  font-size: 16px;
}
.nav-brand img { width: 32px; height: 32px; border-radius: 50%; }
.nav-cta {
  display: inline-block;
  background: var(--line-green);
  color: #FFFFFF;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  transition: background 150ms ease-out;
}
.nav-cta:hover { background: var(--line-green-hover); text-decoration: none; }

/* ---------- Hero ---------- */
.hero {
  padding-top: var(--space-9);
  padding-bottom: var(--space-8);
  background:
    radial-gradient(1000px 400px at 85% -10%, var(--brand-yellow-soft) 0%, rgba(255,255,255,0) 70%);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 12px;
  background: var(--brand-yellow-soft);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-5);
}
.hero-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-green);
  box-shadow: 0 0 0 4px rgba(6, 199, 85, 0.18);
}
.hero-display {
  font-size: clamp(36px, 6.5vw, 60px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
}
.hero-display .hl {
  background: linear-gradient(180deg, rgba(255,255,255,0) 60%, var(--brand-yellow) 60%);
  padding: 0 2px;
}
.hero-lead {
  font-size: 19px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 540px;
  margin-bottom: var(--space-6);
}
.hero-ctas {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--space-4);
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--line-green);
  color: #FFFFFF;
  padding: 14px 28px;
  border-radius: 6px;
  font-size: 17px;
  font-weight: 600;
  font-family: inherit;
  border: none;
  cursor: pointer;
  transition: background 150ms ease-out, transform 150ms ease-out;
  box-shadow: var(--shadow-md);
}
.btn-primary:hover {
  background: var(--line-green-hover);
  text-decoration: none;
  transform: translateY(-1px);
}
.btn-secondary {
  display: inline-block;
  color: var(--text);
  padding: 14px 24px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  border: 1px solid var(--divider);
  transition: border-color 150ms ease-out, background 150ms ease-out;
}
.btn-secondary:hover {
  border-color: var(--text);
  background: var(--bg-alt);
  text-decoration: none;
}
.hero-meta {
  font-size: 14px;
  color: var(--text-subtle);
  line-height: 1.6;
}

/* ---------- LINE chat mockup (pure CSS, no screenshot) ---------- */
.chat-mock {
  max-width: 340px;
  margin: 0 auto;
  background: var(--bg-chat);
  border-radius: 16px;
  border: 1px solid var(--divider);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  font-size: 14px;
  line-height: 1.55;
}
.chat-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-4);
  background: #FFFFFF;
  border-bottom: 1px solid var(--divider);
  font-weight: 600;
  font-size: 14px;
}
.chat-head span { color: var(--text-subtle); font-weight: 400; font-size: 12px; }
.chat-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.msg { display: grid; grid-template-columns: 28px 1fr; gap: var(--space-2); align-items: start; }
.msg-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: #FFFFFF; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; box-shadow: var(--shadow-sm);
}
.msg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.msg-name { font-size: 11px; color: var(--text-muted); margin-bottom: 3px; }
.bubble {
  display: inline-block;
  background: #FFFFFF;
  padding: 8px 12px;
  border-radius: 4px 14px 14px 14px;
  box-shadow: var(--shadow-sm);
  color: var(--text);
}
.bubble.bot { background: #E8F7EC; }
.bubble-lang {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--brand-green);
  font-weight: 600;
}

/* ---------- Features (value props) ---------- */
.features {
  padding-top: var(--space-8);
  padding-bottom: var(--space-9);
  background: var(--bg-alt);
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}
.section-eyebrow {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-green);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.section-heading {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-7);
  max-width: 720px;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.feature-card {
  background: var(--bg);
  padding: var(--space-6);
  border-radius: var(--radius);
  border: 1px solid var(--divider);
  border-top: 3px solid var(--brand-yellow);
}

.ficon { display: block; margin-bottom: var(--space-3); color: var(--text); }
.msg-avatar svg.avt { width: 68%; height: 68%; margin: 16% auto; color: #6B7280; }
.feature-icon {
  font-size: 32px;
  margin-bottom: var(--space-3);
  display: block;
}
.feature-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.feature-body {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.7;
}

/* ---------- How it works ---------- */
.how {
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
}
.how-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}
.steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}
.step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--divider);
}
.step:last-child { border-bottom: 1px solid var(--divider); }
.step-number {
  counter-increment: step;
  background: var(--text);
  color: #FFFFFF;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 15px;
}
.step-number::before { content: counter(step); }
.step h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}
.step p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.7;
}
code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.92em;
  background: var(--brand-yellow-soft);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--text);
  white-space: nowrap;
}

/* Language card (right side of the How section) */
.lang-card {
  background: var(--bg);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  max-width: 420px;
  margin: 0 auto;
}
.lang-card h3 { font-size: 17px; font-weight: 600; margin-bottom: var(--space-2); }
.lang-card > p { font-size: 14px; color: var(--text-muted); margin-bottom: var(--space-4); }
.lang-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  font-size: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--bg-alt);
  border: 1px solid var(--divider);
  color: var(--text);
}
.chip.base {
  background: var(--brand-yellow);
  border-color: var(--brand-yellow);
  font-weight: 600;
}
.lang-note {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--divider);
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.7;
}

/* ---------- Pricing ---------- */
.pricing {
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
  background: linear-gradient(180deg, #FFFDF5 0%, #FFF3C9 100%);
}
.pricing-card {
  max-width: 600px;
  margin: 0 auto;
  background: var(--bg);
  padding: var(--space-8);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--divider);
  text-align: center;
}
.pricing-tag {
  display: inline-block;
  background: rgba(6, 199, 85, 0.1);
  color: var(--line-green);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: var(--space-4);
}
.pricing-trial {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: var(--space-2);
}
.pricing-amount {
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: var(--space-2);
}
.pricing-amount .currency {
  font-size: 28px;
  font-weight: 500;
  color: var(--text-muted);
  vertical-align: top;
  margin-right: 4px;
}
.pricing-amount .per {
  font-size: 20px;
  font-weight: 500;
  color: var(--text-muted);
}
.pricing-period {
  font-size: 16px;
  color: var(--text-muted);
  margin-bottom: var(--space-6);
}
.pricing-options {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  align-items: stretch;
  margin-bottom: var(--space-3);
}
.pricing-option {
  position: relative;
  flex: 1;
  max-width: 250px;
  border: 1px solid var(--divider);
  border-radius: 12px;
  padding: var(--space-6) var(--space-4) var(--space-4);
}
.pricing-option.yearly { border-color: var(--line-green); }
.pricing-save {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--line-green);
  color: #fff;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.pricing-option-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.pricing-strike {
  display: block;
  font-size: 15px;
  color: var(--text-subtle);
  text-decoration: line-through;
  margin-bottom: 4px;
}
/* keep both options on one baseline: monthly gets a spacer of equal height */
.pricing-strike.placeholder { text-decoration: none; visibility: hidden; }
.pricing-option .pricing-amount { font-size: 38px; margin-bottom: 0; }
.pricing-option .pricing-amount .currency { font-size: 19px; }
.pricing-option .pricing-amount .per { font-size: 16px; }
.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 auto var(--space-7) auto;
  text-align: left;
  max-width: 400px;
}
.pricing-features li {
  padding: var(--space-2) 0;
  font-size: 15px;
  color: var(--text);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.pricing-features li::before {
  content: "✓";
  color: var(--line-green);
  font-weight: 700;
  flex-shrink: 0;
}
.pricing .btn-primary {
  width: 100%;
  max-width: 400px;
  justify-content: center;
  font-size: 18px;
  padding: 16px 32px;
  margin-bottom: var(--space-3);
}
.pricing-fine-print {
  font-size: 13px;
  color: var(--text-subtle);
  line-height: 1.7;
}
.pricing-fine-print a { color: var(--text-muted); }

/* ---------- Pricing: the three-tile grid ---------- */
/* Mirrors the in-LINE 管理訂閱 page (src/liff/billingPage.ts in the famchat
   repo): a 月繳 / 年繳 segmented control over the SAME tiers shown as columns,
   so a customer meets one pricing layout on the web and the same one inside
   LINE. The older single-card block above is still used by the /en /id /ja /th
   pages, so its rules are left untouched (/business moved to these tiles on
   2026-09-09).

   BOTH price blocks are in the DOM and CSS decides which is visible: if the
   toggle script never runs, the monthly prices still render. */
.plan-seg {
  display: flex;
  gap: 4px;
  max-width: 320px;
  margin: 0 auto var(--space-6);
  padding: 4px;
  background: var(--bg);
  border: 1px solid var(--divider);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.plan-seg button {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 150ms ease-out, color 150ms ease-out;
}
.plan-seg button[aria-selected="true"] { background: var(--text); color: #FFFFFF; }
.plan-seg .seg-save {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--brand-yellow);
  color: #7A5B00;
  font-size: 12px;
  font-weight: 700;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  align-items: stretch;
  max-width: 1000px;
  margin: 0 auto;
}
/* Two tiles (the team page) rather than three: same cards, narrower field, so a
   pair does not stretch to a third of a 1000px row each. */
.plan-grid.cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 680px; }
.plan-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-5);
  background: var(--bg);
  border: 1px solid var(--divider);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  text-align: left;
}
/* The trial is the one action this page can actually complete — checkout lives
   inside LINE — so it is the tile that carries the emphasis and the CTA. */
.plan-card.featured {
  border: 2px solid var(--line-green);
  box-shadow: 0 6px 20px rgba(6, 199, 85, 0.16);
}
.plan-badge {
  align-self: flex-start;
  margin-bottom: var(--space-3);
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(6, 199, 85, 0.1);
  color: var(--line-green);
  font-size: 12px;
  font-weight: 700;
}
.plan-card.featured .plan-badge { background: var(--line-green); color: #FFFFFF; }
.plan-name { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
/* One-line-per-card summary; the floor keeps the three price rows on one
   baseline when a name or summary wraps in only one column. */
.plan-sub {
  min-height: 42px;
  margin: 0 0 var(--space-4);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}
.plan-price { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.plan-price .num { font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.plan-price .currency { font-size: 18px; font-weight: 500; color: var(--text-muted); }
.plan-price .per { font-size: 15px; font-weight: 500; color: var(--text-muted); }
.plan-was {
  display: block;
  min-height: 22px;
  margin-bottom: var(--space-4);
  font-size: 14px;
  color: var(--text-subtle);
  text-decoration: line-through;
}
.plan-was.placeholder { text-decoration: none; visibility: hidden; }
.plan-feats { list-style: none; padding: 0; margin: 0 0 var(--space-5); }
.plan-feats li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 5px 0;
  font-size: 14px;
  line-height: 1.6;
}
/* The li is the flex container and ::before is the hanging check mark, so the
   text MUST sit in one <span>: otherwise every inline child (a <strong>, say)
   becomes its own flex item and the sentence is broken into gapped columns. */
.plan-feats li > span { min-width: 0; }
.plan-feats li::before {
  content: "✓";
  color: var(--line-green);
  font-weight: 700;
  flex-shrink: 0;
}
/* margin-top:auto pins every CTA to the bottom of its column, so unequal
   feature lists do not leave the buttons on three different lines. */
.plan-cta { margin-top: auto; }
.pricing .plan-cta .btn-primary,
.pricing .plan-cta .btn-secondary {
  display: flex;
  width: 100%;
  max-width: none;
  justify-content: center;
  margin-bottom: 0;
  padding: 14px 20px;
  font-size: 16px;
  text-align: center;
}
/* Sits ABOVE the CTA on purpose: with the note below it, a note that wrapped to
   two lines pushed its card's button up and the three CTAs stopped lining up. */
.plan-note {
  margin: 0 0 var(--space-4);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-subtle);
}
.plan-fine-print {
  max-width: 720px;
  margin: var(--space-6) auto 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-subtle);
  text-align: center;
}
.plan-fine-print a { color: var(--text-muted); }
/* Same 880px breakpoint the rest of the page uses: three CJK columns are
   already tight at that width, so they stack rather than shrink further. */
@media (max-width: 880px) {
  /* .cols-2 named too: it is more specific than .plan-grid, so it would keep two
     CJK columns at phone width. */
  .plan-grid, .plan-grid.cols-2 { grid-template-columns: 1fr; max-width: 520px; }
  .plan-sub { min-height: 0; }
  /* The struck-price spacer is NOT hidden here (the older .pricing-option one
     is): stacked, it is the only thing keeping the price off the feature list,
     and it must reserve the same space on the trial card as on the paid ones. */
}

/* Both period blocks ship; the section's data-period picks one. Monthly is the
   default so the page is correct before (and without) the toggle script. */
.plan-price-y, .plan-was-y { display: none; }
.pricing[data-period="Y"] .plan-price-m, .pricing[data-period="Y"] .plan-was-m { display: none; }
.pricing[data-period="Y"] .plan-price-y { display: flex; }
.pricing[data-period="Y"] .plan-was-y { display: block; }

/* ---------- Try it first (QR) ---------- */
.try {
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
  text-align: center;
}
.qr-card {
  max-width: 480px;
  margin: 0 auto;
  background: var(--bg);
  padding: var(--space-7);
  border-radius: var(--radius);
  border: 1px solid var(--divider);
}
.qr-card img {
  width: 220px;
  height: 220px;
  margin: 0 auto var(--space-4);
}
.qr-card h3 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.qr-card p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.7;
}
.qr-id, .qr-link {
  display: inline-block;
  background: var(--bg-alt);
  border: 1px solid var(--divider);
  padding: 6px 14px;
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 14px;
  color: var(--text);
  margin-top: var(--space-3);
}

/* ---------- FAQ ---------- */
.faq {
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
  background: var(--bg-alt);
  border-top: 1px solid var(--divider);
}
.faq-list { max-width: 720px; }
.faq-item {
  border-bottom: 1px solid var(--divider);
  padding: var(--space-5) 0;
}
.faq-item:first-child { border-top: 1px solid var(--divider); }
.faq-q {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.faq-a {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.8;
}

/* ---------- About ---------- */
.about {
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
  text-align: center;
}
.about-logo {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
}
.about p {
  max-width: 560px;
  margin: 0 auto var(--space-3);
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.8;
}
.about a { color: var(--text); font-weight: 500; }

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--divider);
  padding-top: var(--space-6);
  padding-bottom: var(--space-7);
  font-size: 13px;
  color: var(--text-subtle);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
}
.footer a { color: var(--text-muted); }
.footer a:not(:last-child)::after {
  content: " · ";
  color: var(--text-subtle);
  margin: 0 6px;
}

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .page { padding-left: var(--space-5); padding-right: var(--space-5); }
  .hero-grid, .how-grid { grid-template-columns: 1fr; gap: var(--space-7); }
  /* Unlike the gas-helper page (whose hero art is a screenshot repeated
     further down), this mockup IS the product demo — keep it on mobile,
     just move it under the headline + CTAs. */
  .chat-mock { max-width: 320px; }
  .features-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .hero { padding-top: var(--space-7); padding-bottom: var(--space-7); }
  .features, .how, .pricing, .try, .faq, .about {
    padding-top: var(--space-7); padding-bottom: var(--space-7);
  }
  .pricing-card { padding: var(--space-6); }
  .pricing-amount { font-size: 44px; }
  .pricing-options { flex-direction: column; align-items: center; }
  .pricing-option { width: 100%; }
  .pricing-strike.placeholder { display: none; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}
/* ---------- Language switcher (header) ---------- */
/* A native <details> dropdown: one button at the top right, five plain links inside.
   No JS - it opens/closes on tap and stays open until tapped again. */
.nav-cta { margin-left: auto; }
.lang-switch { position: relative; margin-left: var(--space-3); }
.lang-switch summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--divider);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg);
  white-space: nowrap;
  user-select: none;
}
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.lang-switch[open] summary::after { transform: translateY(1px) rotate(225deg); }
.lang-switch summary:hover, .lang-switch[open] summary { border-color: var(--text); background: var(--bg-alt); }
.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 180px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: var(--bg);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  z-index: 20;
}
.lang-menu a {
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
}
.lang-menu a:hover { background: var(--bg-alt); text-decoration: none; }
.lang-menu a[aria-current="page"] { background: var(--brand-yellow-soft); font-weight: 600; }
@media (max-width: 880px) {
  /* Phone header: the CTA never wraps (a two-line button covered the brand name on
     the English page at 390px); the brand text yields instead and ellipsises. */
  .nav-brand { min-width: 0; flex: 1 1 auto; }
  .nav-brand span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-brand img { flex-shrink: 0; }
  .nav-cta { flex-shrink: 0; white-space: nowrap; padding: 8px 10px; font-size: 13px; }
  .lang-switch { flex-shrink: 0; }
  .lang-switch summary { padding: 7px 9px; font-size: 13px; }
}
@media (max-width: 480px) {
  /* English and Indonesian CTAs are the long ones ("Try free for 7 days"); on a phone the
     brand text would ellipsise to "yabr…", so the logo alone carries the brand there. */
  html[lang="en"] .nav-brand span, html[lang="id"] .nav-brand span { display: none; }
}

/* ---------- Per-language font stacks ---------- */
/* The Google Fonts <link> in each page loads only the family named here. */
html[lang="ja"] {
  --font-sans: "Inter", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
               "Yu Gothic", "Meiryo", system-ui, sans-serif;
}
html[lang="th"] {
  --font-sans: "Inter", "Noto Sans Thai", "Thonburi", "Tahoma", system-ui, sans-serif;
}
html[lang="en"], html[lang="id"] {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* Thai script carries tall ascenders and stacked marks: the zh line-heights clip it. */
html[lang="th"] body { line-height: 1.8; }
html[lang="th"] .hero-display { line-height: 1.35; }
html[lang="th"] .section-heading { line-height: 1.4; }
html[lang="th"] .bubble { line-height: 1.7; }