/* Product sites (product-sites/design.md v1.1 §2): member-kh.lifesmartkh.biz and jomnuy.lifesmartkh.biz.
   Loaded after site.css. Only the product tokens change; everything else is design-v2. */
:root[data-product="member-kh"] {
  --brand: #A8461C; --brand-hover: #8A3816; --on-brand: #FFFFFF; --brand-soft: #FBEDE4; --brand-glow: #F2A93B;
  --band: #3B1A0B; --band-ink-2: #F3DCCD; --focus: #A8461C;
  --hero-glow: radial-gradient(60% 70% at 78% 40%, rgb(242 169 59 / 0.30), transparent 70%),
               radial-gradient(40% 50% at 95% 85%, rgb(168 70 28 / 0.14), transparent 70%);
  --shadow-lg: 0 24px 48px -12px rgb(168 70 28 / 0.25), 0 8px 16px rgb(15 23 42 / 0.06);
  --ps-glow: rgb(242 169 59 / 0.30);
}
:root[data-product="jomnuy"] {
  --brand: #0E5E6F; --brand-hover: #0B4F5C; --on-brand: #FFFFFF; --brand-soft: #E6F3F5; --brand-glow: #4FB3C4;
  --band: #0A3640; --band-ink-2: #CDE8EC; --focus: #0E5E6F;
  --hero-glow: radial-gradient(60% 70% at 78% 40%, rgb(79 179 196 / 0.30), transparent 70%),
               radial-gradient(40% 50% at 95% 85%, rgb(242 169 59 / 0.14), transparent 70%);
  --shadow-lg: 0 24px 48px -12px rgb(14 94 111 / 0.25), 0 8px 16px rgb(15 23 42 / 0.06);
  --ps-glow: rgb(79 179 196 / 0.30);
}
@media (prefers-color-scheme: dark) {
  :root[data-product="member-kh"] {
    --brand: #F5B04C; --brand-hover: #F8C377; --on-brand: #04182A; --brand-soft: #2A1A10; --focus: #F5B04C;
    --hero-glow: radial-gradient(60% 70% at 78% 40%, rgb(242 169 59 / 0.18), transparent 70%);
    --shadow-lg: 0 24px 48px -12px rgb(0 0 0 / 0.6);
  }
  :root[data-product="jomnuy"] {
    --brand: #4FB3C4; --brand-hover: #7CC8D5; --on-brand: #04182A; --brand-soft: #0F2A30; --focus: #4FB3C4;
    --hero-glow: radial-gradient(60% 70% at 78% 40%, rgb(79 179 196 / 0.18), transparent 70%);
    --shadow-lg: 0 24px 48px -12px rgb(0 0 0 / 0.6);
  }
}
:root[data-product] .lsk-hero::before { background: radial-gradient(closest-side, var(--ps-glow), transparent); }
:root[data-product] .lsk-hero::after, :root[data-product] .lsk-band::before { background: radial-gradient(closest-side, var(--ps-glow), transparent); }
:root[data-product] .lsk-band :focus-visible { outline-color: #FFFFFF; }

/* Header: icon tile + type-only wordmark (P5), "by Life Smart KH" */
.ps-brand { display: flex; align-items: center; gap: 10px; margin-right: auto; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.125rem; }
.ps-brand:hover { color: var(--ink); }
.ps-tile { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--brand); color: var(--on-brand); }
.ps-tile .ic-sm { width: 18px; height: 18px; }
.ps-word { color: var(--brand); white-space: nowrap; }
.ps-by { display: none; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.ps-by img { height: 16px; width: auto; }
.ps-by:hover { color: var(--ink); }
@media (min-width: 1100px) { .ps-by { display: inline-flex; } }

/* Feature groups (Features page) */
.ps-group { scroll-margin-top: 80px; }
.ps-group + .ps-group { margin-top: var(--s-8); }
.ps-teaser .lsk-card ul { display: grid; gap: 6px; margin: 0 0 var(--s-4); }
.ps-teaser .lsk-card li { display: flex; gap: 8px; align-items: flex-start; color: var(--ink-2); }
.ps-teaser .lsk-card li .ic-sm { color: var(--brand); width: 18px; height: 18px; margin-top: 4px; }
.ps-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
.ps-more .ic-sm { width: 18px; height: 18px; }
.ps-center { text-align: center; margin-top: var(--s-6); }
.ps-center p { margin-inline: auto; }

/* Pre-register form: fixed product row */
.ps-row { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--s-5); padding: 12px 16px; border-radius: var(--r-md); background: var(--brand-soft); color: var(--ink); font-weight: 600; }
.ps-row .lsk-icon { margin: 0; width: 36px; height: 36px; background: var(--surface); }
.ps-other { margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--ink-2); }
.ps-good { margin-top: var(--s-5); padding: var(--s-4) var(--s-5); border-left: 4px solid var(--brand); background: var(--bg-2); border-radius: var(--r-sm); }
.ps-full .lsk-icon { margin-inline: auto; background: var(--accent-soft); color: var(--accent-ink); width: 64px; height: 64px; border-radius: 50%; }

/* Signature scene frame (design.md v1.2 §9): inline HTML in a phone, sized by the hero stage; scene CSS in ps-<product>.css */
.ps-stage { margin: 0; }
.ps-phone { position: relative; aspect-ratio: 1 / 2; border: 10px solid var(--ink); background: var(--surface); overflow: hidden; }
.ps-screen { position: absolute; inset: 0; container-type: inline-size; font-size: 5.4cqw; line-height: 1.3; color: var(--ink); background: var(--bg-2); }
.ps-screen b { font-weight: 700; }
.ps-stage figcaption { position: absolute; }