/* The public site. Same tokens as the workspace (web/index.html) so the two
   read as one house: black and white, colour means money, thin rules and
   whitespace instead of boxes. Fonts are the self-hosted ones in /fonts —
   nothing on this page is fetched from anybody else's server. */
:root{
  --paper:#FAFAF9; --panel:#FFFFFF; --sunk:#F3F3F1;
  --ink:#15171A; --ink-2:#3F434A; --ink-3:#6B7079; --ink-4:#B8BCC2;
  --line:#E3E3E0; --line-2:#EEEEEC;
  --attn:#8A6115; --attn-soft:#F8F2E6;
  --r:2px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#141517; --panel:#1A1B1E; --sunk:#1F2024;
    --ink:#EAE8E4; --ink-2:#A8ADB5; --ink-3:#8A9099; --ink-4:#4A4F57;
    --line:#2A2C31; --line-2:#222428;
    --attn:#C99C4E; --attn-soft:#221D14;
  }
}
:root[data-theme="dark"]{
  --paper:#141517; --panel:#1A1B1E; --sunk:#1F2024;
  --ink:#EAE8E4; --ink-2:#A8ADB5; --ink-3:#8A9099; --ink-4:#4A4F57;
  --line:#2A2C31; --line-2:#222428;
  --attn:#C99C4E; --attn-soft:#221D14;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:Anuphan,system-ui,sans-serif;
  font-size:16px; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}
/* Links in running text are underlined so that they can be found without a
   mouse; the bar, the contents list and buttons are plainly links already. */
a{color:inherit; text-decoration:underline; text-underline-offset:3px}
.top a, .toc a, .btn, .brand, footer a{text-decoration:none}
.top a:hover, .toc a:hover, footer a:hover{text-decoration:underline}
a:focus-visible, summary:focus-visible, .btn:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
.wrap{max-width:880px; margin:0 auto; padding:0 16px}

/* top bar — wraps rather than clips at 320px, where the Thai bar is wider
   than the column. */
.top{display:flex; flex-wrap:wrap; align-items:center; gap:8px 22px; min-height:56px; padding:10px 0; border-bottom:1px solid var(--line)}
/* The mark is the uBot family's U-robot (web/site/brand/mark.svg, the same
   path data as uBotTrade's) and it is the ONE coloured thing on the site that
   is not money: the owner's decision, 19/09/2026. The name beside it stays
   type, in ink, so that "Design" is never a second raster to keep in step. */
.brand{display:inline-flex; align-items:center; gap:8px; font-size:16px; font-weight:600; letter-spacing:-.015em; color:var(--ink)}
.brand .mark{width:22px; height:22px; display:block}
.brand span{font-weight:300}
.nav{display:flex; flex-wrap:wrap; gap:8px 18px; margin-left:auto; font-size:14px; color:var(--ink-2)}
.nav a.cta{color:var(--ink); font-weight:500}
@media (max-width:600px){ .nav a.hide-sm{display:none} }

/* sections */
section{padding:56px 0; border-bottom:1px solid var(--line-2)}
section:last-of-type{border-bottom:0}
h1{font-size:34px; line-height:1.2; font-weight:600; letter-spacing:-.02em; margin:0 0 18px}
h2{font-size:22px; line-height:1.3; font-weight:600; letter-spacing:-.01em; margin:0 0 22px}
h3{font-size:16px; font-weight:600; margin:0 0 6px}
p{margin:0 0 14px}
.lede{font-size:19px; color:var(--ink-2); max-width:640px}
.lbl{font-size:12px; letter-spacing:.02em; text-transform:uppercase; color:var(--ink-3); font-weight:500; margin-bottom:10px}
.hero{padding:72px 0 60px}
.hero .lede{margin-bottom:28px}
.btn{display:inline-block; padding:10px 18px; border-radius:var(--r); background:var(--ink); color:var(--paper); font-weight:500; font-size:15px}
.btn:hover{text-decoration:none; opacity:.92}
.btn.ghost{background:none; color:var(--ink); border:1px solid var(--line)}
.row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.muted{color:var(--ink-3)}
.small{font-size:13.5px}

/* steps and lists: rules, not boxes */
.steps{counter-reset:s; list-style:none; padding:0; margin:0}
.steps li{display:grid; grid-template-columns:44px 1fr; gap:0 8px; padding:18px 0; border-top:1px solid var(--line-2)}
.steps li:first-child{border-top:0}
.steps li::before{counter-increment:s; content:counter(s, decimal-leading-zero); font-family:"IBM Plex Mono",monospace; color:var(--ink-3); font-size:14px; padding-top:3px}
.steps p{margin:0; color:var(--ink-2)}
.grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:22px 32px}
.grid p{color:var(--ink-2); margin:0}
.not{padding-left:0; list-style:none; margin:0}
.not li{padding:9px 0; border-top:1px solid var(--line-2); color:var(--ink-2)}
.not li:first-child{border-top:0}
.not li b{color:var(--ink); font-weight:500}

/* pricing: three tiers side by side, then the terms shared by all of them,
   written as a receipt. Rules and space, no cards. */
.plans{display:grid; grid-template-columns:repeat(3, 1fr); gap:0 32px; margin:0 0 26px; border-top:1px solid var(--line)}
.tier{padding:18px 0 16px; border-bottom:1px solid var(--line-2)}
.tier .lbl{margin-bottom:6px}
.price{font-size:26px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.2; margin-bottom:10px}
.price span{font-size:14px; font-weight:400; color:var(--ink-3); letter-spacing:0}
.line{color:var(--ink-2); font-size:15px; line-height:1.7}
.line b{color:var(--ink); font-weight:500; font-variant-numeric:tabular-nums}
@media (max-width:600px){ .plans{grid-template-columns:1fr} .tier{border-bottom:1px solid var(--line-2)} }
.plan{display:grid; grid-template-columns:1fr 1fr; gap:8px 24px; max-width:560px; border-bottom:1px solid var(--line); padding:0 0 18px; margin:0 0 18px}
.plan dt{color:var(--ink-3)}
.plan dd{margin:0; text-align:right; font-variant-numeric:tabular-nums}
.plan dd.big{font-size:28px; font-weight:600; letter-spacing:-.02em}
@media (max-width:480px){ .plan{grid-template-columns:1fr; gap:2px} .plan dd{text-align:left; margin-bottom:10px} }
/* A notice, not an alert: grey, because colour on this site means money and
   amber means the factory wants something from the reader, and a translation
   note is neither. */
.note{background:var(--sunk); color:var(--ink-2); border-radius:var(--r); padding:10px 14px; font-size:14px; margin:0 0 18px}

/* faq */
details{border-top:1px solid var(--line-2); padding:12px 0}
details:last-of-type{border-bottom:1px solid var(--line-2)}
summary{cursor:pointer; font-weight:500; list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"+"; display:inline-block; width:22px; color:var(--ink-3); font-family:"IBM Plex Mono",monospace}
details[open] summary::before{content:"–"}
details p{margin:8px 0 0 22px; color:var(--ink-2)}

/* legal */
.legal h2{margin-top:44px; padding-top:22px; border-top:1px solid var(--line)}
.legal h2:first-of-type{margin-top:0; padding-top:0; border-top:0}
.legal h3{margin-top:22px}
.legal p, .legal li{color:var(--ink-2)}
.legal ol, .legal ul{padding-left:22px}
.toc{display:flex; gap:18px; flex-wrap:wrap; font-size:14px; color:var(--ink-2); margin-bottom:34px}

/* footer */
footer{padding:36px 0 48px; font-size:13.5px; color:var(--ink-3)}
footer .row{justify-content:space-between}
footer a{color:var(--ink-2)}