/* Styles for the starter sales pages (web/starters/…, mirrored under /th/).
 *
 * **A file, not an inline block.** The page exists twice — once per language,
 * because a Thai page has to be shareable and indexable and a toggle cannot do
 * that — and the markup is already duplicated. Duplicating the stylesheet as
 * well would mean the two languages could drift in *appearance*, which is the
 * one kind of drift nobody notices until a screenshot. `workshop.css` and
 * `share.css` sit beside site.css for the same reason.
 *
 * **Every class is prefixed `st-` or `sc-`.** Class names in this directory are
 * global: `.foot` is the landing's and `.doc` is the legal pages', and a bare
 * `.card` here would inherit `display:flex` from somewhere else on a page
 * nobody was thinking about (CLAUDE.md, web/academy).
 *
 * Palette, type and the elevation ladder are site.css's — `--panel` for a
 * resting surface and `--lift` for one that reacts, ΔL* ≥ 3 apart so the step
 * actually reads. `--tea` is motion only and capped at two per screen: on this
 * page that budget is spent by one `.btn` and one `<em>`, which is why the
 * section headings carry an `<em>` and the cards carry none.
 */

/* --- hero ---------------------------------------------------------------- */
.st-hero{padding:72px 0 64px}
.st-hero h1{font-size:clamp(30px,5vw,50px);line-height:1.14;letter-spacing:-.015em;
  margin:.3em 0 .5em;max-width:18ch;text-wrap:balance}
.st-hero .lede{max-width:52ch}
.lede{font-size:16.5px;line-height:1.78;margin:0 0 26px}
.st-cta{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:center;margin:30px 0 14px}
.st-note{font-size:13.5px;color:var(--quiet);margin:0;max-width:58ch}

/* --- shared blocks ------------------------------------------------------- */
.st-triad{display:grid;gap:20px;grid-template-columns:1fr;margin-top:38px}
@media (min-width:760px){.st-triad{grid-template-columns:repeat(3,1fr)}}

.st-plain{margin-top:38px;background:var(--panel);border:1px solid var(--rule);
  border-radius:10px;padding:26px 24px}
.st-plain h3{margin:0 0 10px;font-size:17px}
.st-plain p{margin:0;font-size:15px;line-height:1.78}
.st-plain-thin{margin-top:30px}

.st-list{list-style:none;margin:18px 0 0;padding:0}
.st-list li{position:relative;padding:6px 0 6px 20px;font-size:15px;line-height:1.7}
.st-list li::before{content:"—";position:absolute;left:0;color:var(--gold-dim)}

/* --- the three screens --------------------------------------------------- */
.st-screen{margin:0}
.st-theme-shot{display:block;width:100%;aspect-ratio:16 / 11.25;object-fit:cover;object-position:top;
  border:1px solid var(--rule);border-radius:10px;box-shadow:0 12px 28px rgb(0 0 0 / .13)}
.st-screen svg{display:none}
.st-screen figcaption{margin-top:12px;font-size:14px;line-height:1.7;color:var(--text)}
.st-screen figcaption b{color:var(--ivory);font-weight:600}

/* --- brand panel --------------------------------------------------------- */
.st-split{display:grid;gap:34px;grid-template-columns:1fr;align-items:start}
@media (min-width:860px){.st-split{grid-template-columns:1.05fr .95fr;gap:52px}}
.st-panel{background:var(--panel);border:1px solid var(--rule);border-radius:12px;
  padding:22px 22px 18px}
.st-panel-t{margin:0 0 16px;font-family:var(--serif);font-size:18px;color:var(--ivory)}
.st-field{display:flex;align-items:center;gap:10px;padding:9px 0;
  border-top:1px solid var(--rule);font-size:14px}
.st-field:first-of-type{border-top:0}
.st-field span{flex:1;color:var(--quiet)}
.st-field b{font-family:var(--mono);font-size:13px;color:var(--ivory);font-weight:400}
.st-field .sw{width:14px;height:14px;border-radius:3px;display:inline-block;
  border:1px solid var(--rule)}
.sw-a{background:#B4472A}
.sw-b{background:#C9A227}
.st-panel-f{margin:16px 0 0;font-size:12.5px;color:var(--gold-dim)}

/* --- start small, grow through code ------------------------------------ */
.st-grow-grid{display:grid;grid-template-columns:1fr;gap:1px;margin-top:38px;
  border:1px solid var(--rule);background:var(--rule);border-radius:12px;overflow:hidden}
@media (min-width:800px){.st-grow-grid{grid-template-columns:1fr 1.15fr}}
.st-grow-lane{background:var(--panel);padding:27px 24px 25px}
.st-grow-lane-code{background:var(--lift)}
.st-grow-kicker{margin:0 0 18px;color:var(--gold-dim);font-family:var(--mono);
  font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.st-grow-lane h3{margin:0 0 10px;font-size:20px;color:var(--ivory)}
.st-grow-lane > p:not(.st-grow-kicker){margin:0;font-size:15px;line-height:1.78}
.st-grow-lane .st-list{margin-top:18px}

/* --- payment ------------------------------------------------------------- */
.st-pay-card{background:var(--panel);border:1px solid var(--rule);border-radius:12px;
  padding:24px 22px;transition:background .18s ease,border-color .18s ease}
.st-pay-card:hover{background:var(--lift);border-color:var(--gold-dim)}
.st-pay-card h3{margin:16px 0 8px;font-size:17px;color:var(--ivory)}
.st-pay-card p{margin:0;font-size:14.5px;line-height:1.74}
.st-qr{width:62px;height:62px;display:block;border-radius:6px}

/* --- order tracking ------------------------------------------------------ */
.st-steps{list-style:none;margin:38px 0 0;padding:0;position:relative}
.st-steps::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:1px;
  background:var(--rule)}
.st-steps li{position:relative;padding:0 0 26px 30px}
.st-steps li:last-child{padding-bottom:0}
.st-dot{position:absolute;left:0;top:5px;width:13px;height:13px;border-radius:50%;
  background:var(--panel);border:1px solid var(--gold-dim)}
.st-steps b{display:block;color:var(--ivory);font-size:15.5px;margin-bottom:5px}
.st-steps p{margin:0;font-size:14.5px;line-height:1.74;max-width:62ch}

/* --- facts --------------------------------------------------------------- */
.st-facts{display:grid;gap:1px;grid-template-columns:1fr;background:var(--rule);
  border:1px solid var(--rule);border-radius:12px;overflow:hidden;margin-top:34px}
@media (min-width:700px){.st-facts{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.st-facts{grid-template-columns:repeat(4,1fr)}}
.st-facts > div{background:var(--panel);padding:24px 22px}
.st-facts b{display:block;font-family:var(--serif);font-size:27px;line-height:1.1;
  color:var(--ivory);margin-bottom:8px}
.st-facts span{font-size:14px;line-height:1.66;color:var(--text)}

/* --- the commands -------------------------------------------------------- */
.st-code{background:var(--lacquer-deep);border:1px solid var(--rule);border-radius:10px;
  padding:20px 22px;overflow-x:auto;margin:28px 0 20px}
.st-code code{font-family:var(--mono);font-size:13px;line-height:1.85;color:var(--ivory);
  white-space:pre}

/* Thai needs a face that has Thai in it; Karla and Newsreader do not, and a
   page that forgets this renders ก–ฮ as boxes (site.css keys this off
   `<body data-lang>`, and this is the page-local half of the same rule). */
body[data-lang="th"] .st-code code{font-family:var(--mono)}
body[data-lang="th"] .st-hero h1{letter-spacing:0;line-height:1.28}
body[data-lang="th"] .st-facts b{line-height:1.3}