/* ============================================================
   site-d.css — Tilorah "Editorial Green" (direction D) design system
   for long-form / document pages (legal, support, license, notices).
   Shared by privacy, terms, security, support, license, notices, legal
   (+ the -th Thai variants). Content markup is untouched; this only
   restyles the existing vocabulary (.wrap, .eyebrow, .alert, .num …).
   Fonts are self-hosted via fonts/fonts.css (no CDN).
   Last updated: 2026-06-21
   ============================================================ */
:root{
  --warm:#FAF8F4;          /* warm-white canvas */
  --warm-2:#F2EEE6;        /* deeper warm panel */
  --ink:#15201C;           /* near-black ink (AAA on warm) */
  --ink-2:#23302B;         /* body ink */
  --muted:#51605A;         /* muted text (AA on warm) */
  --forest:#0F3D3E;        /* deep forest-teal */
  --forest-deep:#0B302F;
  --lime:#C8F250;          /* energy chartreuse-lime */
  --lime-ink:#3A4A12;      /* readable lime-family text on warm */
  --sage:#DCE9DC;
  --mint-deep:#0F5237;
  --line:rgba(21,32,28,.14);
  --line-strong:rgba(21,32,28,.26);
  --display:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;
  --body:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,monospace;
  --thai:"IBM Plex Sans Thai","Hanken Grotesk",sans-serif;
  --maxw:760px;
  --r:14px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  background:var(--warm);
  color:var(--ink-2);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* faint warm glow behind everything (never traps content) */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60vw 60vw at 90% -10%, rgba(200,242,80,.13), transparent 60%),
    radial-gradient(52vw 52vw at -8% 104%, rgba(15,61,62,.08), transparent 60%);
}
::selection{background:var(--lime);color:var(--ink);}
:focus-visible{outline:2px solid var(--forest);outline-offset:3px;border-radius:5px;}

/* ---- thin brand bar (D masthead) ---- */
.site-top{
  position:sticky;top:0;z-index:20;
  background:rgba(250,248,244,.86);
  backdrop-filter:saturate(120%) blur(8px);
  -webkit-backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid var(--line);
}
.site-top .inner{
  max-width:var(--maxw);margin:0 auto;
  padding:12px clamp(20px,5vw,40px);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.site-top a.brand{
  font-family:var(--display);font-weight:800;font-size:1.3rem;
  letter-spacing:-.02em;color:var(--ink);text-decoration:none;line-height:1;
}
.site-top a.brand .mark{color:var(--forest);}
.site-top .back{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;
}
.site-top .back:hover{color:var(--forest);}

/* ---- container ---- */
.wrap{
  position:relative;z-index:1;
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(40px,6vw,80px) clamp(20px,5vw,40px) 120px;
}

/* ---- language switch (EN | ไทย separate-file links) ---- */
.lang-switch{
  display:flex;gap:14px;margin-bottom:24px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.lang-switch a,.lang-switch button{
  color:var(--muted);text-decoration:none;padding:0 0 2px;cursor:pointer;
  border:0;border-bottom:1px solid transparent;background:none;
  font:inherit;letter-spacing:inherit;text-transform:inherit;
}
.lang-switch a:hover,.lang-switch button:hover{color:var(--forest);}
.lang-switch a.active,.lang-switch button.active{color:var(--ink);border-bottom-color:var(--forest);}
.lang-switch button:focus-visible{outline:2px solid var(--forest);outline-offset:3px;}

/* ---- masthead of the document ---- */
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-bottom:18px;
}
h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(36px,5.4vw,60px);line-height:1.0;letter-spacing:-.022em;
  color:var(--ink);margin-bottom:14px;
}
.sub{color:var(--muted);font-size:15px;margin-bottom:40px;max-width:60ch;}
.meta{
  display:flex;gap:20px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12px;color:var(--muted);
  padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-bottom:48px;
}

/* ---- section headings ---- */
h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(22px,3.4vw,28px);line-height:1.12;letter-spacing:-.015em;
  color:var(--ink);margin:56px 0 16px;
}
h2 .num{
  font-family:var(--mono);font-size:12px;color:var(--forest);font-weight:500;
  margin-right:10px;vertical-align:middle;
}
h3{
  font-family:var(--body);font-weight:600;font-size:16px;
  color:var(--ink);margin:28px 0 10px;
}

/* ---- prose ---- */
p{margin-bottom:14px;color:var(--ink-2);}
ul,ol{margin:0 0 14px 22px;}
li{margin-bottom:6px;color:var(--ink-2);}
li::marker{color:var(--forest);}
a{color:var(--forest);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
a:hover{color:var(--forest-deep);}
strong{color:var(--ink);font-weight:600;}
hr{border:0;border-top:1px solid var(--line);margin:40px 0;}
code{font-family:var(--mono);font-size:.9em;background:var(--warm-2);padding:.1em .35em;border-radius:5px;}

/* ---- callouts ---- */
.alert,.callout{
  background:var(--warm-2);
  border-left:4px solid var(--forest);
  padding:20px 24px;margin:32px 0;border-radius:var(--r);
}
.alert h3,.callout h3{
  font-family:var(--display);font-weight:700;color:var(--forest-deep);
  font-size:18px;margin:0 0 10px;letter-spacing:0;
}
.alert p,.callout p{color:var(--ink);margin-bottom:8px;}
.alert p:last-child,.callout p:last-child{margin-bottom:0;}

/* ---- intent: trade chip ---- */
.product-tag{
  display:inline-block;font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;
  background:var(--sage);color:var(--mint-deep);
  padding:3px 8px;border-radius:6px;margin-right:8px;vertical-align:middle;
}

/* ---- table of contents (privacy) ---- */
.toc{
  background:var(--warm-2);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 24px;margin:0 0 40px;
}
.toc a{display:inline-block;text-decoration:none;}
.toc a:hover{text-decoration:underline;}

/* ---- support FAQ + contact ---- */
.faq-item{border-top:1px solid var(--line);padding:18px 0;}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-q{font-family:var(--display);font-weight:700;font-size:17px;color:var(--ink);margin-bottom:8px;}
.faq-a{color:var(--ink-2);}
.contact-box{
  background:var(--forest);color:#EAF4EF;
  padding:24px 28px;border-radius:var(--r);margin:32px 0;
}
.contact-box h3{color:var(--lime);font-family:var(--display);}
.contact-box a{color:var(--lime);}
.contact-box a:hover{color:#fff;}

/* ---- footer ---- */
footer{
  margin-top:80px;padding-top:28px;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted);
}
footer a{color:var(--muted);}
footer a:hover{color:var(--forest);}

/* ============================================================
   THAI — pages/spans in Thai use IBM Plex Sans Thai (Bricolage/Hanken
   carry no Thai glyphs). Triggered by <html lang="th">, a .doc-th body
   class, or per-span .lang-th. Plex Thai tops out at 600 → bold weight.
   ============================================================ */
html[lang="th"] body,.doc-th,.lang-th{font-family:var(--thai);}
html[lang="th"] h1,html[lang="th"] h2,html[lang="th"] h3,
.doc-th h1,.doc-th h2,.doc-th h3,.lang-th h1,.lang-th h2,.lang-th .faq-q{
  font-family:var(--thai);font-weight:600;letter-spacing:0;line-height:1.3;
}
/* support.html toggles .lang-en/.lang-th visibility via its own JS — do NOT
   force display here, or both languages would show at once. Default-hide TH
   so EN paints first; support's toggle handles the rest. */
.lang-th{display:none;}
.lang-en{display:block;}

@media (max-width:560px){
  .meta{gap:10px 16px;}
  h2{margin-top:44px;}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}