/* HerbiTail website UI-kit styles — MOBILE-FIRST
   Layered on top of /colors_and_type.css
   Order: mobile base → @media (min-width: 720px) tablet → 1024px desktop */

/* ---------------- LINE brand ---------------- */
:root {
  --line-green: #06C755;
  --line-green-dark: #05A647;
}

/* ---------------- Layout primitives ---------------- */
.ht-wrap   { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.ht-section{ padding: 56px 0; }

/* =====================================================================
   HEADER
   ===================================================================== */
.ht-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(243, 244, 236, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background var(--dur-standard) var(--ease-out), box-shadow var(--dur-standard) var(--ease-out);
}
.ht-header.is-scrolled { box-shadow: 0 1px 0 rgba(29,68,45,0.06); }
.ht-header__inner {
  max-width: 1240px; margin: 0 auto;
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  min-height: 56px;
}
.ht-header__brand {
  display: inline-flex; align-items: center; gap: 0;
  text-decoration: none; line-height: 1;
  color: var(--primary-green);
}
.ht-header__mark {
  display: block;
  width: 48px; height: 48px;
  transform: translateY(-3px);
  object-fit: contain;
  margin-left: -10px;
  margin-right: -4px;
}
.ht-header__wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  color: var(--primary-green);
  line-height: 1;
  /* nudge the wordmark optical baseline to match the icon center */
  position: relative;
  top: 1px;
}
.ht-header__nav { display: none; }
.ht-header__nav a {
  color: var(--primary-green);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.005em;
  transition: opacity var(--dur-standard) var(--ease-out);
}
.ht-header__nav a:hover { opacity: 0.65; }
.ht-header__actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* Header LINE CTA pill */
.ht-header__line {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px 8px 9px;
  border-radius: 999px;
  background: var(--line-green);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  transition: background var(--dur-standard) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.ht-header__line:hover { background: var(--line-green-dark); }
.ht-header__line:active { transform: scale(0.985); }
.ht-header__line-mark {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--line-green);
  font-family: var(--font-display); font-weight: 800;
  font-size: 9px; letter-spacing: 0.04em;
  padding: 3px 5px;
  border-radius: 4px;
  line-height: 1;
}
.ht-header__line-label { display: none; }

/* Mobile hamburger */
.ht-header__burger {
  display: inline-flex; flex-direction: column; justify-content: center;
  gap: 4px;
  width: 40px; height: 40px;
  padding: 11px 10px;
  background: transparent; border: none;
  border-radius: 10px;
  cursor: pointer;
}
.ht-header__burger span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--primary-green);
  transition: transform var(--dur-standard) var(--ease-out), opacity var(--dur-micro);
  transform-origin: center;
}
.ht-header__burger.is-open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.ht-header__burger.is-open span:nth-child(2) { opacity: 0; }
.ht-header__burger.is-open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.ht-header__drawer {
  display: flex; flex-direction: column;
  padding: 8px 20px 24px;
  gap: 4px;
  background: rgba(243, 244, 236, 0.96);
  border-top: 1px solid var(--border-hairline);
}
.ht-header__drawer a {
  display: block;
  padding: 14px 4px;
  color: var(--primary-green);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  border-bottom: 1px solid var(--border-hairline);
}
.ht-header__drawer a:last-child { border-bottom: none; }

/* LINE button — used everywhere on the page */
.btn-line {
  background: var(--line-green);
  color: #fff;
}
.btn-line:hover { background: var(--line-green-dark); }
.ht-line-mark {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--line-green);
  font-family: var(--font-display); font-weight: 800;
  font-size: 11px; letter-spacing: 0.04em;
  padding: 5px 7px;
  border-radius: 6px;
  line-height: 1;
}

/* =====================================================================
   HERO
   ===================================================================== */
.ht-hero {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: 4px 20px 40px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: center;
}
.ht-hero__stage {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 36vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: transparent;
}
.ht-hero__bottle {
  position: relative;
  max-height: 100%;
  max-width: 82%;
  width: auto;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 22px 18px rgba(29,68,45,0.12));
  z-index: 1;
}
.ht-hero__stage picture { display: contents; }
/* Soft elliptical floor shadow — the bottle reads as sitting on the page surface */
.ht-hero__shadow {
  position: absolute;
  left: 50%;
  bottom: -2%;
  width: 70%;
  height: 5%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(29,68,45,0.32) 0%, rgba(29,68,45,0.12) 38%, rgba(29,68,45,0) 72%);
  filter: blur(7px);
  pointer-events: none;
  z-index: 0;
}
.ht-hero__eyebrow { color: var(--sage-green); display: block; margin-bottom: 14px; font-size: 11px; }
.ht-hero__h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 13vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--primary-green);
  margin: 0 0 12px;
}
.ht-hero__sub {
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-1);
  max-width: 32ch;
  margin: 0 0 16px;
}
/* Rotating allergen word (Dog · Cat · Dust) — primary-green display token that
   swaps with a soft fade-up. Resting state is fully visible; only the swap
   transitions, so the word never disappears even if motion is throttled. */
.ht-hero__rotate {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--primary-green);
  transition: opacity 0.26s var(--ease-out), transform 0.26s var(--ease-out);
}
.ht-hero__rotate.is-swapping {
  opacity: 0;
  transform: translateY(0.4em);
}
@media (prefers-reduced-motion: reduce) {
  .ht-hero__rotate { transition: none; }
}
/* CTA + trust markers grouped — claims sit centered directly under the LINE button */
.ht-hero__cta-group {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 0;
  align-self: flex-start;
  max-width: 100%;
}
.ht-hero__cta-group .btn { justify-content: center; }
.ht-hero__cta-btn { align-self: stretch; }
.ht-hero__cta-full { display: none; }
.ht-hero__cta-short { display: inline; }
/* The "20%" inside the CTA label stands out a touch heavier (EN + TH). */
.ht-hero__cta-pct { font-weight: 800; }
/* Thai-only mandatory hero-sub line breaks. The mobile break sits after
   subPre (before the rotating word); the desktop break sits after
   "เพื่อให้บ้าน". Only one shows per viewport; toggled at 1024px below. */
.ht-hero__sub-br--m { display: inline; }
.ht-hero__sub-br--d { display: none; }
.ht-hero__how { font-size: 14px; padding: 12px 16px; }
.ht-hero__claims {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 14px; flex-wrap: wrap;
  justify-content: center;
}
.ht-hero__claims li {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--sage-green);
  font-family: var(--font-display); font-weight: 600;
}
.ht-hero__claims i { width: 14px; height: 14px; color: var(--primary-green); stroke-width: 2; }

/* =====================================================================
   WHY HERBITAIL — AllerClean Formula™ trust panel
   ===================================================================== */
.ht-why {
  background: var(--off-white);
  position: relative;
}
.ht-why__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 64px 20px;
}
.ht-why__head { margin: 0 0 28px; max-width: 760px; text-align: left; }
.ht-why__head .ht-why__lede { margin-left: 0; margin-right: 0; }
.ht-why__eyebrow { color: var(--sage-green); display: block; margin-bottom: 12px; }.ht-why__h2 {
  margin: 0 0 16px;
  font-size: clamp(28px, 8vw, 38px);
  line-height: 1.1;
}
.ht-why__brk { display: inline; }
.ht-tm {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.45em;
  vertical-align: super;
  letter-spacing: 0.02em;
  margin-left: 1px;
  color: var(--sage-green);
}
.ht-why__lede {
  margin: 0 auto;
  max-width: 42ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-1);
}

.ht-why__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}

/* Mobile-only (<720px): the loop video is ~20% smaller and separated from the
   proof points below, so the frame + its drop shadow no longer read as
   overlapping the "Targets invisible allergens" row. Desktop is untouched. */
@media (max-width: 719px) {
  .ht-why .ht-why__media { width: 90%; margin: 0 auto; }
  .ht-why .ht-why__body { width: 90%; margin: 52px auto 0; }
  /* Credits align to the video: same width, and icons start exactly at the
     video's left edge (no row padding, anchor bleed neutralised). */
  .ht-why .ht-why__credit { padding-left: 0; padding-right: 0; }
  .ht-why .ht-why__credit--anchor { margin-left: 0; padding-left: 0; padding-right: 0; border-radius: 8px; }
  .ht-why .ht-why__credit--anchor::before { display: none; }
}

/* Video frame — clinical, with crosshair corner ticks */
.ht-why__media { margin: 0; width: 100%; }
.ht-why__video-frame {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: var(--primary-green);
  aspect-ratio: 16 / 11;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 18px 42px rgba(29,68,45,0.14),
    0 4px 12px rgba(29,68,45,0.06);
}
.ht-why__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.ht-why__rec {
  position: absolute;
  top: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: rgba(243, 244, 236, 0.86);
  color: var(--primary-green);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(29, 68, 45, 0.10);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: none;
  z-index: 2;
  line-height: 1;
}
.ht-why__rec-tm {
  color: var(--sage-green);
  font-size: 0.55em;
  vertical-align: super;
  margin-left: 1px;
  letter-spacing: 0.02em;
}
.ht-why__rec-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #FF5C5C;
  box-shadow: 0 0 0 0 rgba(255,92,92,0.6);
  animation: ht-rec 1.6s var(--ease-out) infinite;
}
@keyframes ht-rec {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,92,92,0.5); }
  50%      { opacity: 0.5; box-shadow: 0 0 0 6px rgba(255,92,92,0); }
}
/* Crosshair corner ticks — clinical instrument cue */
.ht-why__corner {
  position: absolute;
  width: 22px; height: 22px;
  border: 1.5px solid rgba(243, 244, 236, 0.6);
  z-index: 2;
  pointer-events: none;
}
.ht-why__corner--tl { top: 10px;  left: 10px;  border-right: none; border-bottom: none; border-top-left-radius: 4px; }
.ht-why__corner--tr { top: 10px;  right: 10px; border-left: none; border-bottom: none; border-top-right-radius: 4px; }
.ht-why__corner--bl { bottom: 10px; left: 10px; border-right: none; border-top: none; border-bottom-left-radius: 4px; }
.ht-why__corner--br { bottom: 10px; right: 10px; border-left: none; border-top: none; border-bottom-right-radius: 4px; }

.ht-why__caption {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ht-why__caption-tag {
  display: inline-flex; align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(99, 132, 110, 0.14);
  color: var(--sage-green);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
}
.ht-why__caption-text {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--fg-2);
  line-height: 1.4;
}

/* Right column — proofs + seal */
.ht-why__body { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
.ht-why__proofs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: transparent;
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}
.ht-why__proof {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  padding: 16px 4px;
  border-top: 1px solid var(--border-hairline);
  align-items: center;
}
.ht-why__proof:first-child { border-top: none; }
.ht-why__proof-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(99, 132, 110, 0.08);
  box-shadow: inset 0 0 0 1px rgba(99, 132, 110, 0.30);
  color: var(--primary-green);
  flex: 0 0 auto;
}
.ht-why__proof-icon i { width: 20px; height: 20px; stroke-width: 1.2; }
.ht-why__proof-icon svg { width: 22px; height: 22px; display: block; color: var(--primary-green); }
.ht-why__proof-title {
  margin: 2px 0 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15.5px;
  color: var(--primary-green);
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.ht-why__proof-body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--fg-2);
  line-height: 1.5;
}

.ht-why__body { width: 100%; }

/* Three trust marks — editorial credentials strip (hairline rows, no card chrome).
   Matches the Proof section's report-band visual language. */
.ht-why__credits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.ht-why__credit {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 4px;
  border-top: 1px solid var(--border-hairline);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--primary-green);
}
.ht-why__credit:first-child { border-top: none; padding-top: 0; }
.ht-why__credit-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--primary-green);
}
.ht-why__credit-icon svg { width: 26px; height: 26px; display: block; }
.ht-why__credit-icon i { width: 24px; height: 24px; stroke-width: 1.4; }
.ht-why__credit-icon img {
  width: 26px; height: 26px;
  object-fit: contain;
}
.ht-why__credit-label {
  font-size: 16px;
  line-height: 1.3;
}
.ht-why__credit-label sup { font-size: 0.55em; font-weight: 600; margin-left: 1px; }

/* AllerClean anchor row — the closing signature. Soft mist-green tinted highlight,
   primary-green left rule. Reads as "the system" without becoming a separate card. */
.ht-why__credit--anchor {
  background: linear-gradient(90deg, rgba(216, 227, 216, 0.55) 0%, rgba(216, 227, 216, 0.18) 100%);
  border-top-color: rgba(29, 68, 45, 0.32);
  /* Bleed left so the icon + label line up with the rows above, while the
     tinted box + green rule still wrap to the left of the content column. */
  margin-left: -10px;
  padding-left: 14px;
  padding-right: 14px;
  border-radius: 0 12px 12px 0;
  position: relative;
}
.ht-why__credit--anchor::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  background: var(--primary-green);
  border-radius: 2px;
}
.ht-why__credit--anchor .ht-why__credit-label { font-size: 17px; font-weight: 700; }
/* The brand mark sits inside a layered seal — an outer solid ring, an inner
   dashed ring, and the green logo-mark centred. The system signature, as in the
   original design. No green fill: it sits on the row's own tinted background,
   drawn entirely in primary green. */
.ht-why__credit--anchor .ht-why__credit-icon {
  position: relative;
  background: transparent;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.4px var(--primary-green);
}
.ht-why__credit-seal-ring {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 1px dashed var(--primary-green);
  opacity: 0.55;
}
.ht-why__credit-seal-logo {
  width: 16px;
  height: 16px;
  object-fit: contain;
  position: relative;
  z-index: 1;
}
/* The two trust-row icons (Targets invisible allergens · Food-grade mineral
   base) sit in a soft circle the SAME diameter as the AllerClean seal ring,
   with the glyph sized down to sit cleanly inside. */
.ht-why__credit:not(.ht-why__credit--anchor) .ht-why__credit-icon {
  border-radius: 50%;
  background: rgba(99, 132, 110, 0.08);
  box-shadow: inset 0 0 0 1px rgba(99, 132, 110, 0.30);
}
.ht-why__credit:not(.ht-why__credit--anchor) .ht-why__credit-icon svg { width: 19px; height: 19px; }
.ht-why__credit:not(.ht-why__credit--anchor) .ht-why__credit-icon i { width: 18px; height: 18px; }
/* Thin, raised trademark glyph in the AllerClean™ heading */
.ht-tm {
  font-size: 0.42em;
  font-weight: 400;
  vertical-align: super;
  letter-spacing: 0;
}
.ht-why__pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px 8px 8px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  max-width: 100%;
}
.ht-why__pill--proof {
  background: var(--surface-raised);
  color: var(--primary-green);
  box-shadow: inset 0 0 0 1px var(--border-hairline);
}
.ht-why__pill--anchor {
  background: var(--primary-green);
  color: var(--off-white);
  box-shadow: 0 6px 18px -8px rgba(29, 68, 45, 0.35);
}
.ht-why__pill-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.ht-why__pill--proof .ht-why__pill-icon {
  background: rgba(99, 132, 110, 0.10);
  color: var(--primary-green);
  box-shadow: inset 0 0 0 1px rgba(99, 132, 110, 0.28);
}
.ht-why__pill--anchor .ht-why__pill-icon {
  background: rgba(243, 244, 236, 0.14);
  box-shadow: inset 0 0 0 1px rgba(243, 244, 236, 0.40);
}
.ht-why__pill-icon svg {
  width: 16px; height: 16px; display: block;
}
.ht-why__pill-icon i {
  width: 16px; height: 16px; stroke-width: 1.4;
}
.ht-why__pill-icon img {
  width: 18px; height: 18px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.ht-why__pill-label sup {
  font-size: 0.55em;
  margin-left: 1px;
  font-weight: 600;
}
.ht-why__pill--anchor .ht-why__pill-label sup { color: var(--mist-green); }

/* AllerClean Formula trust seal */
.ht-why__seal {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary-green) 0%, #143424 100%);
  color: var(--off-white);
  position: relative;
  overflow: hidden;
}
.ht-why__seal::after {
  content: "";
  position: absolute;
  top: -40%; right: -10%;
  width: 60%; height: 180%;
  background: radial-gradient(closest-side, rgba(216,227,216,0.18), rgba(216,227,216,0));
  pointer-events: none;
}
.ht-why__seal-mark {
  position: relative;
  width: 48px; height: 48px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  background: rgba(243,244,236,0.08);
  box-shadow: inset 0 0 0 1px rgba(243,244,236,0.35);
}
.ht-why__seal-ring {
  position: absolute; inset: 4px;
  border-radius: 50%;
  border: 1px dashed rgba(243,244,236,0.45);
}
.ht-why__seal-logo {
  width: 30px; height: 30px;
  display: block;
  object-fit: contain;
  position: relative;
  z-index: 1;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.ht-why__seal-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: var(--off-white);
}
.ht-why__seal-name sup { color: var(--mist-green); }
.ht-why__seal-sub {
  font-family: var(--font-body);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: rgba(216,227,216,0.75);
  margin-top: 4px;
  line-height: 1.4;
}

/* =====================================================================
   OUR STORY — founders photo + integrated stats
   ===================================================================== */
.ht-story { background: var(--mist-green); }
.ht-story__inner {
  max-width: 560px;
  margin: 0 auto;
  padding: 52px 20px;
}
.ht-story__head { margin-bottom: 23.76px; }
.ht-story__head .eyebrow { color: var(--sage-green); display: block; margin-bottom: 12px; }
.ht-story__h2 {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(28px, 8.5vw, 40px);
  line-height: 1.05;
}
.ht-story__sign {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--border-hairline);
  display: flex; flex-direction: column; gap: 3px;
}
.ht-story__sign-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--primary-green); letter-spacing: -0.005em; }
.ht-story__sign-role { font-family: var(--font-display); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage-green); }

.ht-story__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.ht-story__photo {
  margin: 0;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--mist-green);
  box-shadow: 0 12px 28px rgba(29,68,45,0.08), 0 2px 6px rgba(29,68,45,0.04);
}
.ht-story__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}
.ht-story__photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;
  background: linear-gradient(to top, rgba(29,68,45,0.45) 0%, rgba(29,68,45,0) 100%);
  pointer-events: none;
}
.ht-story__photo-cap {
  position: absolute;
  left: 18px;
  bottom: 14px;
  display: flex; flex-direction: column;
  color: var(--off-white);
  z-index: 1;
}
.ht-story__photo-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.005em;
}
.ht-story__photo-role {
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-top: 3px;
}

.ht-story__copy { display: flex; flex-direction: column; }
.ht-story__lead {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.35;
  color: var(--primary-green);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
/* English lead reads one step smaller on mobile only (per request) */
@media (max-width: 719px) {
  html[lang="en"] .ht-story__lead { font-size: 17px; }
}
.ht-story__p {
  margin: 0 0 14px;
  max-width: none;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-1);
}
.ht-story__p:last-child { margin-bottom: 0; }

.ht-story__stats {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border-hairline);
  border: 1px solid var(--border-hairline);
  border-radius: 16px;
  overflow: hidden;
}
.ht-story__stat {
  background: var(--surface-raised);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ht-story__stat-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--primary-green);
  margin: 0;
}
.ht-story__stat-lbl {
  margin: 0;
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--sage-green);
  font-weight: 600;
}

/* =====================================================================
   PRODUCT SHOWCASE
   ===================================================================== */
.ht-product { background: var(--mist-green); padding: 56px 0; }
.ht-product__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  align-items: center;
}
.ht-product__media {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  display: flex; align-items: flex-end; justify-content: center;
  background: transparent;
}
.ht-product__media img {
  position: relative;
  z-index: 1;
  max-width: 78%;
  max-height: 100%;
  width: auto; height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 18px 14px rgba(29,68,45,0.14));
  display: block;
}
.ht-product__shadow {
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: 62%;
  height: 4%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(29,68,45,0.35) 0%, rgba(29,68,45,0.14) 40%, rgba(29,68,45,0) 75%);
  filter: blur(7px);
  pointer-events: none;
  z-index: 0;
}
.ht-product__copy .eyebrow { color: var(--sage-green); display: block; margin-bottom: 12px; }
.ht-product__copy .h2 { margin: 0 0 14px; max-width: 14ch; }
.ht-product__copy .body-lg { margin: 0 0 22px; max-width: 42ch; font-size: 16px; }
.ht-product__claims { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
.ht-product__claims li { display: flex; align-items: center; gap: 10px; color: var(--fg-1); font-size: 14.5px; }
.ht-product__claims i { width: 18px; height: 18px; color: var(--primary-green); stroke-width: 1.5; }
.ht-product__offer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface-raised);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 18px;
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-1);
}
.ht-product__offer-tag {
  display: inline-flex; align-items: baseline; gap: 8px;
  flex: 0 0 auto;
  background: var(--primary-green);
  color: var(--off-white);
  font-family: var(--font-display);
  padding: 6px 12px 7px;
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;
}
.ht-product__offer-tag-pct {
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.01em;
}
.ht-product__offer-tag-lbl {
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.92;
}
.ht-product__offer-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-1);
}
.ht-product__offer-text strong {
  color: var(--primary-green);
  font-weight: 700;
}
.ht-product__cta { display: flex; gap: 10px; flex-direction: column; }
.ht-product__cta .btn { justify-content: center; }

/* =====================================================================
   LAB PROOF — circular composition
   ===================================================================== */
.ht-proof {
  background: var(--off-white);
  padding: 56px 20px 64px;
  position: relative;
  overflow: hidden;
}
.ht-proof::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 14% 22%, rgba(99,132,110,0.10) 0%, rgba(99,132,110,0) 30%),
    radial-gradient(circle at 86% 82%, rgba(29,68,45,0.06) 0%, rgba(29,68,45,0) 34%);
  pointer-events: none;
}
.ht-proof__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 44px 24px 48px;
  position: relative;
  z-index: 1;
  /* Warm near-white — sits in the off-white family rather than reading as pure printer paper. */
  background: #FAFBF4;
  border-radius: var(--radius-xl);
  box-shadow:
    0 1px 0 rgba(29,68,45,0.04),
    0 24px 64px -24px rgba(29,68,45,0.16);
}
.ht-proof__head { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.ht-proof__head .eyebrow { color: var(--sage-green); display: block; margin-bottom: 14px; }
.ht-proof__head .h2 { margin: 0 0 14px; }
.ht-proof__lede {
  margin: 0 auto;
  max-width: 36ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-2);
}

.ht-proof__rings {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: center;
  justify-items: center;
  margin-bottom: 36px;
}
.ht-proof__ring {
  display: flex; flex-direction: column; align-items: center;
  gap: 18px;
  width: 100%; max-width: 360px;
}
.ht-proof__disc {
  position: relative;
  width: min(72vw, 290px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--surface-raised);
  box-shadow:
    0 24px 40px rgba(29,68,45,0.06),
    0 4px 12px rgba(29,68,45,0.03);
  border: 1px solid rgba(29,68,45,0.06);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ht-proof__ring--before .ht-proof__disc {
  /* Subdued — the "problem" state. Neutral, desaturated, recedes. */
  background: radial-gradient(circle at 50% 40%, rgba(99, 132, 110, 0.05) 0%, rgba(99, 132, 110, 0.11) 85%);
  box-shadow: inset 0 0 0 1px rgba(99, 132, 110, 0.18);
}
.ht-proof__ring--after  .ht-proof__disc {
  /* Match the "before" disc — same neutral, desaturated treatment. */
  background: radial-gradient(circle at 50% 40%, rgba(99, 132, 110, 0.05) 0%, rgba(99, 132, 110, 0.11) 85%);
  box-shadow: inset 0 0 0 1px rgba(99, 132, 110, 0.18);
}

.ht-proof__ringnum {
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--sage-green);
}
.ht-proof__photo {
  width: 67%;
  height: 67%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--off-white-2);
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.7),
    0 6px 16px rgba(29,68,45,0.10);
}
.ht-proof__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 50%;
}
.ht-proof__chip {
  position: absolute;
  bottom: 13%;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ht-proof__chip--before {
  background: rgba(184, 92, 42, 0.10);
  color: #B85C2A;
  box-shadow: inset 0 0 0 1px rgba(184, 92, 42, 0.18);
}
.ht-proof__chip--after {
  background: rgba(99, 132, 110, 0.16);
  color: var(--primary-green);
  box-shadow: inset 0 0 0 1px rgba(29, 68, 45, 0.32);
}
.ht-proof__caption {
  display: flex; flex-direction: column; align-items: center;
  gap: 5px;
  text-align: center;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 14px;
  width: auto;
  max-width: 320px;
}
.ht-proof__caption-head { display: inline-flex; align-items: center; gap: 8px; }
.ht-proof__caption strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
}
.ht-proof__caption-sub {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.35;
}
.ht-proof__caption-dot {
  width: 9px; height: 9px; border-radius: 50%;
  flex: 0 0 auto;
}
/* Positive = allergen detected → warm clay signal */
.ht-proof__caption--positive { background: #ECD7C6; border-color: rgba(184,92,42,0.22); }
.ht-proof__caption--positive strong,
.ht-proof__caption--positive .ht-proof__caption-sub { color: #8A4116; }
.ht-proof__caption--positive .ht-proof__caption-dot { background: #8A4116; }
/* Negative = clean / no allergen → brand green signal */
.ht-proof__caption--negative { background: var(--mist-green); border-color: rgba(29,68,45,0.18); }
.ht-proof__caption--negative strong,
.ht-proof__caption--negative .ht-proof__caption-sub { color: var(--primary-green); }
.ht-proof__caption--negative .ht-proof__caption-dot { background: var(--primary-green); }
/* Thai proof pills read small at the EN px sizes — tuned per request */
html[lang="th"] .ht-proof__caption strong { font-size: 18px; }
html[lang="th"] .ht-proof__caption-sub { font-size: 12px; }
html[lang="th"] .ht-proof__bridge-pill { font-size: 13px; }

/* Bridge between the two rings (vertical on mobile, horizontal on desktop) */
.ht-proof__bridge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 0;
}
.ht-proof__bridge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sage-green);
  opacity: 0.55;
  display: none;
}
.ht-proof__bridge-line {
  width: 1.5px;
  height: 22px;
  background: linear-gradient(180deg, rgba(99,132,110,0.35), rgba(99,132,110,0.1));
  display: none;
}
/* Mobile-only (<720px): bring back the vertical connector between the before/after
   rings at half its former length, and open up the spacing between the two rings. */
@media (max-width: 719px) {
  .ht-proof__rings { gap: 26px; }
  .ht-proof__bridge { gap: 8px; }
  .ht-proof__bridge-dot { display: block; }
  .ht-proof__bridge-line { display: block; height: 11px; }
}
.ht-proof__bridge-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 22px;
  background: var(--off-white);
  color: var(--primary-green);
  border: 1px solid rgba(29,68,45,0.16);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  box-shadow: 0 6px 16px rgba(29,68,45,0.12);
  white-space: nowrap;
}
.ht-proof__bridge-pill i { width: 14px; height: 14px; stroke-width: 1.7; }
/* Optically centre the spray glyph against the text (its ink sits a hair high). */
.ht-proof__bridge-pill i, .ht-proof__bridge-pill svg { position: relative; top: 0.5px; }

.ht-proof__dd-br--d { display: none; }
.ht-proof__report {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  padding: 0;
  background: var(--border-hairline);
  border: 1px solid var(--border-hairline);
  border-radius: 14px;
  overflow: hidden;
  margin: 0 0 14px;
}
.ht-proof__report > div {
  background: rgba(255,255,255,0.7);
  padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.ht-proof__report dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-green);
}
.ht-proof__report dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--primary-green);
  text-align: right;
}
.ht-proof__dd-br { display: inline; }
.ht-proof__fineprint {
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--fg-3);
  text-align: center;
  margin: 0;
  line-height: 1.5;
}

/* =====================================================================
   RITUAL
   ===================================================================== */
.ht-ritual { max-width: 1240px; margin: 0 auto; padding: 56px 20px; }
.ht-ritual__head { margin-bottom: 32px; }
.ht-ritual__head .eyebrow { color: var(--sage-green); display: block; margin-bottom: 12px; }
.ht-ritual__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 24px; counter-reset: step; }
.ht-ritual__step { position: relative; padding-top: 18px; border-top: 1px solid var(--border-hairline); }
.ht-ritual__num { font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--sage-green); letter-spacing: 0.08em; display: block; margin-bottom: 10px; }
.ht-ritual__step h3 { margin: 0 0 6px; font-size: 18px; }
.ht-ritual__step p { font-size: 14.5px; line-height: 1.55; }

/* =====================================================================
   TESTIMONIAL
   ===================================================================== */
/* Padding is top-heavy so the figure sits centred in the continuous off-white
   band between the (coloured) ingredients block above and the FAQ heading below
   — the FAQ's own large top padding is offset here. */
.ht-testimonial { background: var(--off-white); padding: 68px 20px 12px; }
.ht-testimonial figure {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  /* Soft mist-green panel — the brand's prescribed treatment for testimonials.
     Drops the testimonial back to its proper rank (below Proof, above FAQ). */
  background: var(--mist-green);
  border-radius: var(--radius-lg);
  padding: 36px 28px 32px;
  box-shadow: none;
}
.ht-testimonial__quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 4.6vw, 24px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--primary-green);
  margin: 0 0 16px;
  text-wrap: pretty;
}
.ht-testimonial__cite { color: var(--sage-green); font-size: 12.5px; font-family: var(--font-display); letter-spacing: 0.06em; }
/* Thai testimonial reads small on mobile — bump one step up (quote + cite) */
@media (max-width: 719px) {
  html[lang="th"] .ht-testimonial__quote { font-size: 20px; }
  html[lang="th"] .ht-testimonial__cite { font-size: 14px; }
}

/* =====================================================================
   INGREDIENTS BAND
   ===================================================================== */
.ht-ingredients { background: var(--sage-green); padding: 64px 20px; }
.ht-ingredients__inner { max-width: 1240px; margin: 0 auto; }
.ht-ingredients .eyebrow { margin-bottom: 14px; }
.ht-ingredients .h3 {
  max-width: 18ch;
  margin: 0 0 26px;
  /* Bumped to h2-scale so this reads as its own section, not a transition band. */
  font-size: clamp(28px, 8vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--off-white);
}
.ht-ingredients__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ht-chip { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; background: rgba(243, 244, 236, 0.16); color: var(--off-white); font-family: var(--font-display); font-weight: 500; font-size: 13px; box-shadow: inset 0 0 0 1px rgba(243,244,236,0.3); }

/* =====================================================================
   FAQ
   ===================================================================== */
.ht-faq { max-width: 880px; margin: 0 auto; padding: 56px 20px; }
.ht-faq__head { text-align: center; margin-bottom: 28px; }
.ht-faq__head .eyebrow { color: var(--sage-green); display: block; margin-bottom: 12px; }
.ht-faq__list { display: flex; flex-direction: column; }
.ht-faq__item { border-top: 1px solid var(--border-hairline); }
.ht-faq__item:last-child { border-bottom: 1px solid var(--border-hairline); }
.ht-faq__q {
  width: 100%; background: transparent; border: none;
  padding: 18px 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--primary-green);
  cursor: pointer; text-align: left;
}
.ht-faq__q i, .ht-faq__q .ht-faq__icon { width: 20px; height: 20px; color: var(--sage-green); flex: 0 0 auto; }
.ht-faq__a { padding: 0 0 20px; }
.ht-faq__a p { margin: 0; max-width: 60ch; color: var(--fg-1); font-size: 14.5px; line-height: 1.55; }

/* =====================================================================
   LINE CTA
   ===================================================================== */
.ht-cta {
  background: var(--primary-green);
  color: var(--off-white);
  padding: 56px 20px;
  position: relative;
  overflow: hidden;
}
.ht-cta__inner { max-width: 820px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.ht-cta__eyebrow { color: var(--mist-green); display: block; margin-bottom: 16px; }
.ht-cta__h1 {
  color: var(--off-white);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(38px, 9.2vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
}
.ht-cta__body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--mist-green);
  margin: 0 auto 28px;
  max-width: 36ch;
}
.ht-cta__body strong { color: var(--off-white); font-weight: 600; }
/* English CTA highlight ("20% discount") — bolder so it stands out. EN-only. */
html[lang="en"] .ht-cta__body strong { font-weight: 800; }

.ht-cta__counter {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 18px;
  background: rgba(243, 244, 236, 0.08);
  border: 1px solid rgba(243, 244, 236, 0.18);
  border-radius: 999px;
  margin-bottom: 22px;
}
.ht-cta__counter-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--off-white);
  letter-spacing: -0.01em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ht-cta__counter-lbl {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--mist-green);
}
.ht-cta__pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line-green);
  box-shadow: 0 0 0 0 rgba(6, 199, 85, 0.6);
  animation: ht-pulse 1.8s var(--ease-out) infinite;
}
@keyframes ht-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(6, 199, 85, 0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(6, 199, 85, 0); }
  100% { box-shadow: 0 0 0 0   rgba(6, 199, 85, 0); }
}

.btn-line.btn-line--xl { font-size: 16px; padding: 16px 24px; }
.btn-line.btn-line--xl .ht-line-mark { font-size: 11px; padding: 5px 7px; }

.ht-cta__perks {
  list-style: none; padding: 0; margin: 24px auto 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 22px;
  max-width: 720px;
}
.ht-cta__perks li {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--mist-green);
}
.ht-cta__perks i { width: 16px; height: 16px; color: var(--off-white); stroke-width: 1.5; }

/* Lucide icons render as an <svg> injected INSIDE each [data-lucide] placeholder
   (rather than replacing the node — that avoids the React re-render crash).
   display:contents removes the <i> wrapper from the layout box tree, so the svg
   becomes the flex/inline item exactly as it was before, and every existing
   `… i {…}` / `… svg {…}` sizing rule keeps working. */
[data-lucide] { display: contents; }

.ht-cta__fineprint {
  font-size: 11.5px;
  color: rgba(216, 227, 216, 0.65);
  margin: 18px auto 0;
  max-width: 38ch;
  line-height: 1.5;
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.ht-footer { background: #0F2A1B; color: var(--off-white); padding: 56px 20px 24px; }
.ht-footer__inner {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(216,227,216,0.15);
}
.ht-footer__brand { display: flex; flex-direction: column; }
.ht-footer__brand img { width: 40px; height: 40px; margin-bottom: 12px; }
.ht-footer__wordmark { font-size: 15px; }
.ht-footer__col { display: flex; flex-direction: column; gap: 10px; }
.ht-footer__col .eyebrow { margin-bottom: 4px; }
.ht-footer__col a {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--off-white); opacity: 0.8;
  text-decoration: none; font-size: 14px;
  cursor: pointer;
  font-family: var(--font-display);
}
.ht-footer__col a:hover { opacity: 1; }
.ht-footer__socials { display: flex; align-items: center; gap: 16px; margin: 2px 0 2px; }
.ht-footer__socials a { padding: 0; opacity: 0.7; }
.ht-footer__socials a:hover { opacity: 1; }
.ht-footer__socials svg { width: 18px; height: 18px; display: block; }
.ht-line-dot {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--line-green); color: #fff;
  font-family: var(--font-display); font-weight: 800;
  font-size: 8.5px; letter-spacing: 0.04em;
  padding: 3px 5px; border-radius: 3px; line-height: 1;
}
.ht-footer__bar {
  max-width: 1240px; margin: 0 auto;
  padding-top: 20px;
  display: flex; flex-direction: column; gap: 10px;
  align-items: flex-start;
  color: var(--mist-green);
}
.ht-footer__bar .body-sm { color: var(--mist-green); font-size: 12.5px; }
.ht-footer__legal { display: flex; gap: 16px; flex-wrap: wrap; }
.ht-footer__legal a { color: var(--mist-green); text-decoration: none; font-size: 12.5px; cursor: pointer; }

/* =====================================================================
   ≥720px — TABLET
   ===================================================================== */
@media (min-width: 720px) {
  .ht-header__inner { padding: 14px 24px; gap: 16px; }
  .ht-header__mark { width: 58px; height: 58px; }
  .ht-header__wordmark { font-size: 16px; }
  .ht-header__line { padding: 9px 16px 9px 10px; font-size: 13.5px; }
  .ht-header__line-label { display: inline; }
  .ht-header__line-mark { font-size: 9.5px; padding: 4px 6px; }

  .ht-hero { padding: 24px 24px 80px; gap: 36px; }
  .ht-hero__stage { max-height: 520px; aspect-ratio: 4 / 3; }
  .ht-hero__bottle { max-width: 100%; max-height: 94%; }
  .ht-hero__shadow { width: 27%; }
  .ht-hero__h1 { font-size: clamp(64px, 9vw, 96px); }
  .ht-hero__sub { font-size: 17px; max-width: 40ch; }
  .ht-hero__cta-group { align-items: center; }
  .ht-hero__cta-group .btn { justify-content: center; }
  .ht-hero__cta-full { display: inline; }
  .ht-hero__cta-short { display: none; }

  .ht-why__inner { padding: 88px 24px; }
  /* Stacked intro (eyebrow → heading → lede) reads as one narrative block;
     below, a contained video sits beside a roomier proof column so the video
     no longer dominates the row. */
  .ht-why__head { margin: 0; max-width: none; text-align: left; display: block; }
  .ht-why__eyebrow { grid-column: auto; grid-row: auto; margin-bottom: 14px; }
  .ht-why__head .ht-why__lede { grid-column: auto; grid-row: auto; margin: 0; align-self: auto; max-width: none; }
  .ht-why__h2 { grid-column: auto; grid-row: auto; margin: 0 0 18px; font-size: clamp(38px, 4.6vw, 50px); line-height: 1.03; }
  .ht-why__lede { font-size: 16px; max-width: none; }
  .ht-why__layout { grid-template-columns: 1.25fr 0.75fr; gap: 62px; align-items: end; max-width: 1000px; margin: 0 auto; }
  .ht-why__video-frame { aspect-ratio: 16 / 10; }
  /* Proof points → full-width horizontal 3-across strip, split by vertical hairlines. */
  .ht-why__body { margin: 56px auto 0; max-width: 1000px; }
  .ht-why__credits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
  .ht-why__credit { padding: 4px 32px; gap: 16px; border-top: none; align-items: center; justify-content: center; }
  .ht-why__credit + .ht-why__credit { border-left: 1px solid var(--border-hairline); }
  .ht-why__credit:first-child { padding-top: 4px; }
  .ht-why__credit-icon { width: 36px; height: 36px; }
  .ht-why__credit-icon svg { width: 24px; height: 24px; }
  .ht-why__credit-icon img { width: 24px; height: 24px; }
  .ht-why__credit-label { font-size: 15px; }
  .ht-why__credit--anchor { background: none; margin-left: 0; padding-left: 32px; padding-right: 32px; border-radius: 0; border-top-color: transparent; }
  .ht-why__credit--anchor::before { display: none; }
  .ht-why__credit--anchor .ht-why__credit-label { font-size: 15px; font-weight: 600; }
  /* White logo centred inside the green circle. */
  .ht-why__credit--anchor .ht-why__credit-icon img { width: 22px; height: 22px; }
  .ht-why__proof-title { font-size: 16.5px; }
  .ht-why__proof-body { font-size: 14px; }
  .ht-proof__title-br { display: none; }

  .ht-story { padding: 0 24px; }
  .ht-story__inner { max-width: 1240px; margin: 0 auto; padding: 64px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
  .ht-story__head { margin-bottom: 0; }
  .ht-story__layout { grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; margin-bottom: 36px; }
  .ht-story__photo { aspect-ratio: 16 / 10; }
  .ht-story__stats { grid-template-columns: repeat(4, 1fr); }
  .ht-story__stat { padding: 22px 18px; }
  .ht-story__stat-num { font-size: 28px; }

  .ht-product { padding: 80px 0; }
  .ht-product__inner { padding: 0 24px; gap: 40px; }
  .ht-product__media { aspect-ratio: 3 / 4; }
  .ht-product__cta { flex-direction: row; flex-wrap: wrap; }

  .ht-proof { padding: 80px 24px 88px; }
  .ht-proof__inner { padding: 64px 40px 68px; max-width: 1000px; }
  .ht-proof__head { margin-bottom: 72px; }
  .ht-proof__rings {
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: start;
  }
  .ht-proof__ring { max-width: none; }
  .ht-proof__disc { width: min(34vw, 270px); }
  .ht-proof__bridge { flex-direction: row; padding: 0; gap: 6px; align-self: center; margin-top: -64px; }
  .ht-proof__bridge-dot { display: block; }
  .ht-proof__bridge-line { display: block; width: 11px; height: 1.5px; background: linear-gradient(90deg, rgba(99,132,110,0.35), rgba(99,132,110,0.1)); }
  .ht-proof__report { grid-template-columns: repeat(3, 1fr); border-radius: 16px; }
  .ht-proof__report > div { flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding: 16px 20px; text-align: center; }
  .ht-proof__dd-br--d { display: inline; }
  /* Inside the Bottle → heading left, chips right (desktop). */
  .ht-ingredients__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; column-gap: 56px; align-items: center; }
  .ht-ingredients .eyebrow { grid-column: 1; grid-row: 1; }
  .ht-ingredients .h3 { grid-column: 1; grid-row: 2; margin-bottom: 0; max-width: none; }
  .ht-ingredients__chips { grid-column: 2; grid-row: 1 / 3; align-content: center; }
  .ht-proof__report dd { text-align: center; }
  .ht-proof__dd-br { display: none; }

  .ht-ritual { padding: 80px 24px; }
  .ht-ritual__list { grid-template-columns: repeat(3, 1fr); gap: 32px; }

  .ht-testimonial { padding: 96px 24px 16px; }
  .ht-testimonial figure { padding: 44px 48px 40px; }
  .ht-ingredients { padding: 46px 24px; }
  .ht-ingredients .h3 { font-size: clamp(34px, 5vw, 44px); margin: 0 0 32px; }

  .ht-faq { padding: 80px 24px; }
  .ht-faq__q { font-size: 17px; padding: 22px 0; }

  .ht-cta { padding: 72px 24px; }
  .ht-cta__h1 { font-size: clamp(40px, 5.4vw, 60px); }
  .ht-cta__body { font-size: 16px; max-width: 48ch; }
  .btn-line.btn-line--xl { font-size: 17px; padding: 17px 28px; min-width: 300px; justify-content: center; }

  .ht-footer { padding: 72px 24px 24px; }
  .ht-footer__inner { grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
  .ht-footer__bar { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* =====================================================================
   ≥1024px — DESKTOP
   ===================================================================== */
@media (min-width: 1024px) {
  .ht-header__inner { padding: 18px 32px; gap: 32px; }
  .ht-header__mark { width: 60px; height: 60px; }
  .ht-header__wordmark { font-size: 17px; }
  .ht-header__nav { display: flex; gap: 28px; margin-left: 12px; }
  .ht-header__burger { display: none; }
  .ht-header__drawer { display: none !important; }

  .ht-hero {
    padding: 56px 32px 110px;
    /* Nudge the whole hero (copy + bottle + shadow) rightward; scales with the
       viewport gutter so it never clips on 1280–1440 screens. */
    left: 0;
    grid-template-columns: 1fr 1.05fr;
    gap: 58px;
    align-items: center;
    min-height: 720px;
  }
  /* on desktop the bottle goes on the right and gets more room.
     Both columns are nudged down together (transform, so the section height
     does NOT grow) — the hero content sat too vertically centred otherwise. */
  .ht-hero__stage { order: 2; height: 100%; max-height: none; min-height: 640px; aspect-ratio: auto; justify-content: flex-end; transform: translateY(58px); }
  .ht-hero__bottle { max-width: 100%; max-height: 528px; transform: translateY(-124px); filter: drop-shadow(0 16px 26px rgba(29,68,45,0.10)); }
  /* Floor shadow: centred under the bottle BODY (its base sits left of the image
     centre because the trigger overhangs right), and spread wider + softer so it
     reads as a real shadow cast by a lifted bottle. */
  .ht-hero__shadow { width: 72%; height: 8.5%; bottom: -16px; left: 74%; filter: blur(21px); background: radial-gradient(closest-side, rgba(29,68,45,0.24) 0%, rgba(29,68,45,0.10) 46%, rgba(29,68,45,0) 78%); }
  .ht-hero__copy  { order: 1; align-self: end; padding-bottom: 26px; transform: translateY(96px); }
  .ht-hero__h1    { font-size: clamp(72px, 7.5vw, 112px); margin-bottom: 28px; }
  .ht-hero__sub   { font-size: 18px; max-width: 46ch; margin-bottom: 32px; }
  .ht-hero__sub-br--m { display: none; }
  .ht-hero__sub-br--d { display: inline; }
  .ht-hero__claims { gap: 22px; }
  .ht-hero__claims li { font-size: 14px; }
  .ht-hero__claims i { width: 16px; height: 16px; }

  .ht-why__inner { padding: 110px 32px; }
  .ht-why__head { margin: 0; max-width: none; }
  .ht-why__h2 { font-size: clamp(44px, 4vw, 58px); }
  .ht-why__lede { font-size: 17px; max-width: none; }
  .ht-why__layout { gap: 70px; }
  .ht-why__body { margin: 64px auto 0; }
  .ht-why__credit { padding: 4px 40px; gap: 20px; }
  .ht-why__credit-icon { width: 40px; height: 40px; }
  .ht-why__credit-icon svg { width: 26px; height: 26px; }
  .ht-why__credit-icon img { width: 26px; height: 26px; }
  .ht-why__credit-label { font-size: 16px; }
  .ht-why__credit--anchor .ht-why__credit-label { font-size: 16px; }
  /* Symmetric padding so the anchor column's icon + label sit centred in
     its own column, matching the other two. */
  .ht-why__credit--anchor { padding-left: 40px; padding-right: 40px; }
  .ht-why__credit--anchor .ht-why__credit-icon img { width: 24px; height: 24px; }
  .ht-why__proof-title { font-size: 17px; }
  .ht-why__seal { padding: 18px 22px; }
  .ht-why__seal-name { font-size: 16px; }

  .ht-story { padding: 0 32px; }
  .ht-story__inner { padding: 110px 0; gap: 80px; }
  .ht-story__head { margin-bottom: 0; }
  .ht-story__h2 { max-width: 16ch; font-size: clamp(40px, 4.6vw, 56px); }
  .ht-story__layout { grid-template-columns: 1.15fr 1fr; gap: 56px; margin-bottom: 48px; }
  .ht-story__lead { font-size: 22px; }
  .ht-story__p { font-size: 16px; max-width: 52ch; }
  .ht-story__photo-name { font-size: 18px; }
  .ht-story__photo-cap { left: 22px; bottom: 20px; }
  .ht-story__stat { padding: 24px 22px; }
  .ht-story__stat-num { font-size: 32px; }

  .ht-product { padding: 100px 0; }
  .ht-product__inner { padding: 0 32px; gap: 72px; grid-template-columns: 1fr 1fr; }
  .ht-product__copy .body-lg { font-size: 18px; max-width: 46ch; }
  .ht-product__offer { padding: 18px 20px; gap: 14px; }
  .ht-product__offer-tag { padding: 7px 14px 8px; }
  .ht-product__offer-tag-pct { font-size: 15px; }
  .ht-product__offer-tag-lbl { font-size: 11px; }
  .ht-product__offer-text { font-size: 14px; }

  .ht-proof { padding: 104px 32px 112px; }
  .ht-proof__inner { padding: 80px 56px 84px; max-width: 1000px; }
  .ht-proof__head { margin-bottom: 88px; }
  .ht-proof__head .h2 { font-size: clamp(40px, 4.4vw, 56px); }
  .ht-proof__lede { font-size: 17px; max-width: 56ch; }
  .ht-proof__rings { gap: 12px; }
  .ht-proof__disc { width: min(28vw, 320px); }
  .ht-proof__bridge { margin-top: -84px; gap: 8px; }
  .ht-proof__bridge-line { width: 11px; }
  .ht-proof__bridge-pill { font-size: 13px; padding: 10px 24px; }
  .ht-proof__report > div { padding: 18px 24px; }
  .ht-proof__report dd { font-size: 14px; }

  .ht-ritual { padding: 96px 32px; }
  .ht-ritual__list { gap: 40px; }

  .ht-testimonial { padding: 120px 32px 24px; }
  .ht-testimonial figure { padding: 52px 72px 48px; }
  .ht-testimonial__quote { font-size: clamp(22px, 2.4vw, 28px); }

  .ht-ingredients { padding: 55px 32px; }
  .ht-ingredients .h3 { font-size: clamp(40px, 4.2vw, 52px); max-width: 20ch; margin: 0 0 36px; }
  .ht-chip { font-size: 14px; padding: 9px 18px; }

  .ht-faq { padding: 96px 32px; }
  .ht-faq__q { font-size: 18px; }

  .ht-cta { padding: 88px 32px; }
  .ht-cta__h1 { font-size: clamp(48px, 5.4vw, 68px); margin-bottom: 24px; }
  .ht-cta__body { font-size: 18px; max-width: 56ch; margin-bottom: 44px; }
  .btn-line.btn-line--xl { font-size: 18px; padding: 18px 32px; min-width: 300px; justify-content: center; }

  .ht-footer { padding: 80px 32px 28px; }
  .ht-footer__inner { gap: 56px; padding-bottom: 56px; }
}


/* =====================================================================
   LANGUAGE SWITCHER (header)
   ===================================================================== */
.ht-header__lang {
  display: inline-flex;
  align-items: stretch;
  gap: 2px;
  background: transparent;
  border: 1px solid var(--border-hairline);
  border-radius: 999px;
  padding: 2px;
  line-height: 1;
}
.ht-header__lang-opt {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--sage-green);
  /* Fixed font + width so the pill is identical in EN and TH — the
     display-font var swaps to a wider Latin face in EN otherwise. */
  font-family: 'PK Maehongson', 'LINE Seed Sans TH', system-ui, sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-width: 26px;
  text-align: center;
  padding: 6px 10px 5px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
  transition: background var(--dur-standard) var(--ease-out),
              color var(--dur-standard) var(--ease-out);
}
.ht-header__lang-opt:hover { color: var(--primary-green); }
.ht-header__lang-opt.is-active {
  background: var(--surface-0, #fff);
  color: var(--primary-green);
  box-shadow: 0 1px 2px rgba(29,68,45,0.12);
  cursor: default;
}
.ht-header__lang-opt:active { transform: scale(0.97); }
@media (min-width: 720px) {
  .ht-header__lang-opt { font-size: 12.5px; padding: 7px 12px 6px; }
}

/* =====================================================================
   THAI LANGUAGE — auto font swap when <html lang="th">
   PK Maehongson for display / headings; LINE Seed Sans TH for body.
   ===================================================================== */
html[lang="th"] {
  --font-display:   'PK Maehongson', 'LINE Seed Sans TH', system-ui, sans-serif;
  --font-condensed: 'PK Maehongson', 'LINE Seed Sans TH', system-ui, sans-serif;
  --font-body:      'LINE Seed Sans TH', 'PK Maehongson', system-ui, sans-serif;
}
html[lang="th"] body { line-height: var(--lh-relaxed); }

/* PK Maehongson reads ~18–22 % smaller than Avenir at the same px size
   (smaller x-height, no Latin caps). To keep visual weight on par with
   the English headings we bump every display size + force the heaviest
   weight PK ships (700). Line-height stays generous so loops + tone marks
   don't collide. */
html[lang="th"] h1,
html[lang="th"] h2,
html[lang="th"] h3,
html[lang="th"] .h1,
html[lang="th"] .h2,
html[lang="th"] .h3,
html[lang="th"] .ht-hero__h1,
html[lang="th"] .ht-cta__h1,
html[lang="th"] .ht-story__h2,
html[lang="th"] .ht-why__h2 {
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.18;
}

/* ── Thai Hero + CTA headings: faux-weight to match Avenir Next Heavy (800) ──
   PK Maehongson tops out at Bold (700) — which these headings already use — so
   there is no heavier master to switch to. To reach the optical heft of the
   English 800, paint a thin same-colour stroke behind each glyph. paint-order
   keeps the letterforms + Thai tone marks crisp rather than muddy. currentColor
   matches each context (primary-green on the hero, off-white on the CTA). The
   stroke scales with the heading size across breakpoints so the added thickness
   stays proportional. Thai-only; English headings are untouched. */
/* ── Thai Hero + CTA headlines + the rotating word: switch to LINE Seed Sans TH
   at its genuine ExtraBold (800) weight ─────────────────────────────────────
   PK Maehongson tops out at Bold (700), so these high-impact 800-weight areas
   looked thin next to the English Avenir Heavy. LINE Seed Sans TH (already a
   licensed brand face, used for Thai body) ships a true ExtraBold/Heavy and
   reads with the same heft as the English. Scoped to these areas only — the
   rest of the Thai copy stays in PK Maehongson. */
html[lang="th"] .ht-hero__h1,
html[lang="th"] .ht-cta__h1,
html[lang="th"] .ht-hero__rotate {
  font-family: 'LINE Seed Sans TH', 'PK Maehongson', system-ui, sans-serif;
  font-weight: 900;
  -webkit-text-stroke: 0;
}

/* Eyebrows: Thai doesn't take wide tracking gracefully — tighten it. */
html[lang="th"] .eyebrow { letter-spacing: 0.06em; }

/* Thai hero eyebrow (สเปรย์ลดสารก่อภูมิแพ้): PK reads smaller than Avenir at
   the same px, so bump it up to match the English eyebrow's visual size. */
html[lang="th"] .ht-hero__eyebrow { font-size: 14px; }

/* ── Mobile / base sizes ─────────────────────────────────────────────── */
html[lang="th"] .ht-hero__h1     { font-size: clamp(39px, 10.5vw, 60px); line-height: 1.1; }
html[lang="th"] .ht-why__h2      { font-size: clamp(34px, 9vw, 46px); }
html[lang="th"] .h2,
html[lang="th"] .ht-story__h2 { font-size: clamp(34px, 9vw, 46px); }
html[lang="th"] .ht-proof__head .h2 { font-size: clamp(38px, 10vw, 52px); }
/* Inside-band H3 keeps English sizing. CTA H1 only bumps on mobile (below). */
@media (max-width: 719px) {
  html[lang="th"] .ht-cta__h1 { font-size: clamp(35px, 5.4vw, 41px); }
  html[lang="th"] .ht-ingredients .h3 { font-size: 40px; }
}

/* ── ≥720 px (tablet/desktop intermediate) ──────────────────────────── */
@media (min-width: 720px) {
  html[lang="th"] .ht-hero__h1   { font-size: clamp(49px, 7vw, 74px); }
  html[lang="th"] .ht-cta__h1    { font-size: clamp(35px, 4.75vw, 53px); }
  html[lang="th"] .ht-why__h2    { font-size: clamp(40px, 5.2vw, 54px); }
  html[lang="th"] .ht-story__h2  { font-size: clamp(34px, 4.4vw, 42px); }
  html[lang="th"] .ht-proof__head .h2 { font-size: clamp(44px, 5.8vw, 60px); }
}

/* ── ≥1024 px (desktop) ─────────────────────────────────────────────── */
@media (min-width: 1024px) {
  html[lang="th"] .ht-hero__h1   { font-size: clamp(56px, 5.6vw, 84px); }
  html[lang="th"] .ht-cta__h1    { font-size: clamp(43px, 4.75vw, 60px); }
  html[lang="th"] .ht-why__h2    { font-size: clamp(48px, 5vw, 64px); }
  html[lang="th"] .ht-story__h2  { font-size: clamp(40px, 3.6vw, 48px); }
  html[lang="th"] .ht-proof__head .h2 { font-size: clamp(52px, 5.4vw, 68px); }
}

/* Brand wordmark / english-only product names stay in Avenir even in TH */
html[lang="th"] .ht-header__wordmark,
html[lang="th"] .ht-line-mark,
html[lang="th"] .ht-header__line-mark,
html[lang="th"] .ht-line-dot,
html[lang="th"] .ht-why__rec {
  font-family: 'Avenir Next LT Pro', system-ui, sans-serif;
}

/* =====================================================================
   TARGETED REFINEMENTS
   ===================================================================== */

/* ── CTA action group: counter + LINE button ─────────────────────────
   Wraps the social-proof counter and the LINE button. On mobile they stack
   and center; on desktop they form a single centered row that is vertically
   aligned with a clear gap (previously the two pieces touched and the counter
   sat off-centre against the button). Applies to BOTH English and Thai. */
.ht-cta__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.ht-cta__action .ht-cta__counter { margin-bottom: 0; }

@media (min-width: 720px) {
  .ht-cta__action {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 24px;
  }
}

/* ── Thai hero CTA: a touch wider + one size larger label ─────────────
   PK Maehongson renders optically smaller than Avenir, so the Thai button
   text is bumped to match the English size, and the button gets a little
   extra width for emphasis. Mobile + desktop. */
html[lang="th"] .ht-hero__cta-pct {
  font-family: 'LINE Seed Sans TH', 'PK Maehongson', system-ui, sans-serif;
  font-weight: 800;
}
html[lang="th"] .ht-hero__cta-btn {
  font-size: 20px;
  padding-left: 52px;
  padding-right: 52px;
}

/* ── Thai hero CTA on MOBILE: same button box as English, larger label ──────
   The button is a fixed 300px in BOTH languages (identical length); the claims
   below stay on a single horizontal row. The Thai label is bumped to ~19.5px so
   it reads at the same optical size as the English 16px (PK Maehongson renders
   markedly smaller than Avenir at the same px). */
@media (max-width: 719px) {
  /* Hero bottle 10% larger on phones — grows from its base so it stays anchored
     to the floor shadow. Also nudged down ~10% to close the gap to the shadow. */
  .ht-hero__bottle { transform: translateY(10%) scale(1.1); transform-origin: center bottom; }
  .ht-hero__cta-btn { width: 300px; max-width: 100%; align-self: center; }
  .ht-hero__claims { flex-wrap: nowrap; gap: 12px; }
  .ht-hero__claims li { white-space: nowrap; }
  html[lang="th"] .ht-hero__cta-btn {
    font-size: 19.5px;
    padding-left: 28px;
    padding-right: 28px;
  }
  /* Thai mobile only: nudge the CTA "20%" 0.5px smaller than the rest of the label. */
  html[lang="th"] .ht-hero__cta-pct { font-size: 19px; }
}

/* ── Thai "Why HerbiTail" anchor row label (สูตร AllerClean™): one size bigger ── */
html[lang="th"] .ht-why__credit--anchor .ht-why__credit-label { font-size: 19px; }

/* ── Thai proof chips (ก่อน / หลัง): bigger + more visible, matching the English read ── */
html[lang="th"] .ht-proof__chip { font-size: 13px; padding: 5px 13px; letter-spacing: 0.02em; }

/* ── Thai proof report labels (วิธีการ / อ่านผล / เงื่อนไข): bump so they read at the
   same optical size as the English caps (PK renders smaller at the same px). ── */
html[lang="th"] .ht-proof__report dt { font-size: 13px; letter-spacing: 0.03em; }

/* ── Thai FAQ heading (คำตอบสั้น ๆ): one size up so it reads with the same
   presence as the English "The short answers." ── */
html[lang="th"] .ht-faq__head .h2 { font-size: clamp(40px, 7vw, 52px); }

/* ── Thai "Why HerbiTail" heading (ขับเคลื่อนด้วย สูตร AllerClean™):
   half a size up from the standard Thai h2 scale — a touch more presence while
   staying short of the original full bump, proportional to the English. ── */
html[lang="th"] .ht-why__h2 { font-size: clamp(40px, 10.2vw, 52px); }
@media (min-width: 720px) {
  html[lang="th"] .ht-why__h2 { font-size: clamp(43px, 5.5vw, 57px); }
}
@media (min-width: 1024px) {
  html[lang="th"] .ht-why__h2 { font-size: clamp(51px, 5.3vw, 68px); }
}

/* ── Thai CTA-section button (mobile): match counter width + larger text ─
   On mobile the action group shrinks to its widest child (the counter pill),
   the LINE button stretches to that same width, and its label steps up one
   size to match the English button. Thai + mobile only. */
@media (max-width: 719px) {
  /* Counter is a quiet nudge on mobile, not the headline — shrink + deprioritise. EN + TH. */
  html[lang="th"] .ht-cta__counter,
  .ht-cta__counter { padding: 7px 14px; gap: 9px; }
  html[lang="th"] .ht-cta__counter-num,
  .ht-cta__counter-num { font-size: 16px; }
  /* English numerals (Avenir 800) read heavier + larger than the Thai PK
     digits — quieten them so the 20%-off line and CTA hold the focus. */
  html[lang="en"] .ht-cta__counter-num { font-size: 14px; font-weight: 700; }
  html[lang="th"] .ht-cta__counter-lbl,
  .ht-cta__counter-lbl { font-size: 11px; }
  /* CTA LINE button: identical footprint in EN + TH. A fixed action-group width
     and a font-size-independent button box (fixed height, no vertical padding)
     mean the button is the SAME height and width in both languages — PK
     Maehongson otherwise renders a visibly smaller box than Avenir. */
  .ht-cta__action {
    width: 260px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .ht-cta__action .btn-line--xl {
    align-self: stretch;
    justify-content: center;
    height: 58px;
    padding-top: 0;
    padding-bottom: 0;
  }
  html[lang="th"] .ht-cta__action .btn-line--xl {
    font-size: 18px;
  }
}