/* The pages beside the landing (terms, privacy, security, abuse, …) in the
   landing's own look. Everything above "the page's words" is cut from
   web/index.html's style and is changed there first; the landing does not
   load this file. */

/* Erawan's own colours on digitalocean.com's layout and type. Lacquer is the
   default since 2026-10-09 and paper is the reader's choice (brandkit/
   README.md, the same grounds as site.css). Tea is the button in both. */
:root{
  --bg:#F5F2ED; --bar:#F5F2ED; --surface:#FFFEFA; --surface-2:#EFEBE3; --edge:#D8D9CF; --edge-2:#C2C6BA;
  --text:#1A211F; --soft:#3E4A46; --muted:#62716A; --accent:#2E7A6A; --accent-ink:#FFFFFF; --tint:#E6EEEA;
  --cta:#F2A65A; --cta-ink:#0B0E0D; --mark:#2E7A6A; --shade:rgb(26 33 31 / .28); --bad:#B3412E;
  --head:"Plus Jakarta Sans","Noto Sans Thai",sans-serif; --body:Inter,"Noto Sans Thai",sans-serif;
  --mono:"JetBrains Mono","Noto Sans Thai",monospace;
  color-scheme:light;
}
html[data-theme="dark"]{
  --bg:#0B0E0D; --bar:#0B0E0D; --surface:#111716; --surface-2:#16201E; --edge:#24302D; --edge-2:#33433F;
  --text:#EEF5F2; --soft:#C3D0CB; --muted:#91A19C; --accent:#94CFC1; --accent-ink:#0B0E0D; --tint:#16201E;
  --cta:#F2A65A; --cta-ink:#0B0E0D; --mark:#94CFC1; --shade:rgb(0 0 0 / .55); --bad:#F09A8A;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
/* Smooth only once the page has loaded: a smooth jump to a link's #anchor
   on arrival gets cut short when the fonts reflow the page. */
@media (prefers-reduced-motion:no-preference){html.loaded{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.5 var(--body);-webkit-font-smoothing:antialiased}
::selection{background:var(--accent);color:var(--accent-ink)}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:16px;top:-60px;z-index:30;padding:10px 16px;border-radius:999px;background:var(--accent);color:var(--accent-ink)}
.skip:focus{top:12px}
.wrap{width:min(100% - 48px,1088px);margin-inline:auto}
h1,h2,h3{font-family:var(--head);color:var(--text);margin:0;text-wrap:balance}
h1{font-size:48px;line-height:56px;font-weight:800;letter-spacing:-1px}
h2{font-size:36px;line-height:48px;font-weight:700;letter-spacing:-1px}
h3{font-size:24px;line-height:32px;font-weight:700}
p{margin:0}
.label{font:500 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* Thai: Noto Sans Thai sets every Thai glyph (none of the Latin faces has
   one), with the room its stacked marks need and none of the negative
   tracking that pulls them apart. */
html[lang="th"] body{line-height:1.7}
html[lang="th"] h1,html[lang="th"] h2,html[lang="th"] h3{letter-spacing:0}
html[lang="th"] h1{font-weight:700;line-height:1.35}
html[lang="th"] h2{line-height:1.4}
html[lang="th"] h3{line-height:1.45}
html[lang="th"] .label{letter-spacing:0;text-transform:none}

.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:8px 24px;border:0;
  border-radius:999px;font:500 16px/1 var(--body);white-space:nowrap;cursor:pointer;transition:filter .15s,background .15s}
.pill-cta{background:var(--cta);color:var(--cta-ink)}
.pill-cta:hover{filter:brightness(1.06)}
.pill-line{box-shadow:inset 0 0 0 1px var(--text);color:var(--text)}
.pill-line:hover{background:color-mix(in srgb,var(--text) 7%,transparent)}
.arrow-link{display:inline-flex;gap:6px;font-weight:500;color:var(--text)}
.arrow-link:hover{color:var(--accent)}

/* ── bar ── */
.bar{position:sticky;top:0;z-index:20;background:var(--bar);border-bottom:1px solid var(--edge)}
.bar-in{height:72px;display:flex;align-items:center;gap:32px}
/* The lockup is brandkit/build.py's own file (web/brand), one per ground. */
.brand{display:inline-flex;align-items:center}
.brand img{height:30px;width:auto;display:block}
.brand .on-paper,html:not([data-theme="dark"]) .brand .on-lacquer{display:none}
html:not([data-theme="dark"]) .brand .on-paper{display:block}
.nav{display:flex;align-items:center;gap:28px;margin:0 auto;color:var(--soft)}
.nav a,.login{white-space:nowrap}
.nav a:hover,.login:hover{color:var(--text)}
.bar-end{display:flex;align-items:center;gap:14px;color:var(--soft)}
.lang,.theme{font:500 13px/1 var(--body);height:32px;padding:0 10px;border:0;border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--edge-2);background:none;color:var(--soft);cursor:pointer;display:inline-flex;align-items:center}
.lang:hover,.theme:hover{color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}
.theme svg,.sheet-theme svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[data-theme-toggle] .sun,html[data-theme="dark"] [data-theme-toggle] .moon{display:none}
html[data-theme="dark"] [data-theme-toggle] .sun{display:block}
.bar-end .pill{height:36px;padding:8px 16px}

.chev{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ── the phone menu: the whole nav in one sheet under the bar, the two
   account actions at the bottom where a thumb reaches them ── */
.menu-btn{display:none;width:40px;height:40px;margin-right:-8px;place-items:center;border:0;border-radius:999px;
  background:none;color:var(--text);cursor:pointer}
.menu-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.menu-btn .x,.menu-btn[aria-expanded="true"] .bars{display:none}
.menu-btn[aria-expanded="true"] .x{display:block}
.sheet{position:fixed;inset:72px 0 0;z-index:19;overflow-y:auto;overscroll-behavior:contain;background:var(--bar)}
.sheet[hidden]{display:none}
.sheet-in{min-height:100%;display:flex;flex-direction:column;padding:8px 0 max(24px,env(safe-area-inset-bottom))}
.sheet-nav,.sheet-sub{list-style:none;margin:0;padding:0}
.sheet-nav > li{border-bottom:1px solid var(--edge)}
.sheet-nav a{display:flex;align-items:center;min-height:56px;font:500 18px/1.3 var(--body);color:var(--text)}
.sheet-sub{padding:0 0 12px 16px}
.sheet-sub a{min-height:44px;font:400 16px/1.3 var(--body);color:var(--soft)}
.sheet-nav a:hover{color:var(--accent)}
.sheet-theme{display:none;align-items:center;gap:10px;width:100%;min-height:56px;padding:0;border:0;border-bottom:1px solid var(--edge);
  background:none;color:var(--soft);font:400 16px/1 var(--body);cursor:pointer;text-align:left}
.sheet-acts{margin-top:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding-top:32px}
.sheet-acts .pill{height:48px}
html.menu-open{overflow:hidden}

footer{padding:80px 0 40px;border-top:1px solid var(--edge)}
.cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px}
html[lang] .cols h2{font:700 16px/1.4 var(--body);letter-spacing:0;margin:0 0 18px}
.cols ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cols a{color:var(--soft);font-size:15px}
.cols a:hover{color:var(--accent)}
.base{display:flex;align-items:center;gap:20px;margin-top:64px;padding-top:28px;border-top:1px solid var(--edge);color:var(--muted);font-size:14px}
.base img{height:26px;width:auto;display:block}
.base .on-paper,html:not([data-theme="dark"]) .base .on-lacquer{display:none}
html:not([data-theme="dark"]) .base .on-paper{display:block}
.base a{margin-left:auto;color:var(--soft)}
.base a:hover{color:var(--accent)}

/* ── the page's words: one column the width a paragraph reads at ── */
.doc{width:min(100% - 48px,720px);margin-inline:auto;padding:72px 0 96px}
.doc h1{font-size:42px;line-height:52px}
.doc .updated{margin-top:14px;font:400 13px/1.4 var(--mono);color:var(--muted)}
.doc .intro{margin-top:28px;font-size:18px;line-height:1.7;color:var(--soft)}
.doc h2{margin:48px 0 12px;font-size:22px;line-height:30px;letter-spacing:-.2px}
.doc p{margin:0 0 14px;color:var(--soft);line-height:1.75}
.doc a{color:var(--text);text-decoration:underline;text-decoration-color:var(--edge-2);text-underline-offset:3px}
.doc a:hover{color:var(--accent);text-decoration-color:currentColor}
.doc strong{color:var(--text);font-weight:600}
.doc code{font:400 14px/1.4 var(--mono);color:var(--text);padding:1px 6px;border-radius:6px;background:var(--surface-2)}
.doc ul{margin:0 0 18px;padding:0;list-style:none}
.doc li{position:relative;margin-bottom:10px;padding-left:20px;color:var(--soft);line-height:1.75}
.doc li::before{content:"";position:absolute;left:4px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
/* A pair of terms and their words, side by side where there is room. */
.doc .cards{display:grid;gap:0;margin:32px 0 0}
.doc .cards div{padding:18px 0;border-top:1px solid var(--edge)}
.doc .cards dt{margin:0 0 6px;font-weight:600;color:var(--text)}
.doc .cards dd{margin:0;color:var(--soft);line-height:1.7}
@media (min-width:640px){
  .doc .cards{grid-template-columns:1fr 1fr;column-gap:40px}
  .doc .cards div{display:grid;grid-template-rows:subgrid;grid-row:span 2}
}
.doc table{width:100%;margin:24px 0;border-collapse:collapse;font-size:14px}
.doc td{padding:10px 12px 10px 0;border-bottom:1px solid var(--edge);color:var(--soft);vertical-align:top}
.doc td:first-child{font:400 13px/1.5 var(--mono);color:var(--muted);white-space:nowrap}
html[lang="th"] .doc h1{line-height:1.35}
html[lang="th"] .doc h2{line-height:1.45;letter-spacing:0}
html[lang="th"] .doc p,html[lang="th"] .doc li,html[lang="th"] .doc .intro{line-height:1.85}

@media (max-width:1100px){
  .bar-in{gap:24px}
  .nav{gap:20px}
}
@media (min-width:961px){
  .sheet:not([hidden]){display:none}
}
@media (max-width:960px){
  .nav{display:none}
  .bar-end{margin-left:auto}
  .menu-btn{display:grid}
  .lang{height:40px;padding:0 14px;font-size:14px}
  .bar-end .pill{height:40px}
  .cols{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:40px}
  .cols ul{gap:0}
  .cols a{display:inline-block;padding:12px 0}
  html[lang] .cols h2{margin-bottom:6px}
}
@media (max-width:600px){
  .doc{padding:48px 0 72px}
  .doc h1{font-size:32px;line-height:40px}
  html[lang="th"] .doc h1{line-height:1.4}
  .bar-in{gap:16px}
  .bar-end{gap:8px}
  .bar-end .login,.bar-end .theme{display:none}
  .bar-end .pill{padding:8px 14px}
  .sheet-theme{display:flex}
  .brand img{height:26px}
  .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .base{flex-wrap:wrap;gap:12px}
  .base a{margin-left:0}
}
@media (max-width:359px){
  .bar-end .pill{display:none}
}