/* YOUR BIZX — landing page.
   Palette sampled from the reference build: page #101317, cards #1b2027. */

:root{
  --bg:#101317;
  --card:#1b2027;
  --card-hi:#222833;
  --line:#2b323d;
  /* Controls need a visible boundary, dividers do not. --line sits at
     1.27:1 on a card; this clears the 3:1 WCAG asks of a control at 3.75:1. */
  --control-line:#6d7a8b;
  --text:#e6e9ee;
  --muted:#8d9aab;
  --dim:#6d7a8b;
  --accent:#ff6b60;
  --blue:#4f8fd6;
  --ok:#57c98a;
  --radius:14px;

  /* Bar controls match the simulator's: white pills with a dark glyph. */
  --btn:#ffffff;
  --btn-ink:#12213f;
  --btn-line:#e3e9f2;
}

.light{
  --bg:#eef2f7;
  --card:#ffffff;
  --card-hi:#f5f8fc;
  --line:#dde4ee;
  --control-line:#7b8899;   /* 3.61:1 on the white card */
  --text:#121821;
  --muted:#5d6b7d;
  --dim:#7b8899;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:15px/1.6 "Noto Sans Thai","Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}

button{font:inherit}
h1,h2,h3,p,ul{margin:0}

/* Thai has no spaces to break at, so long runs need an explicit opportunity. */
h1,.lede,.tile-name,.tile-sub,.tile-desc,.tile-opts li,.tile-hint,.note,.hint{
  overflow-wrap:anywhere;
  word-break:break-word;
}

.shell{max-width:1180px;margin:auto;padding:0 20px 60px}

/* ---------- Bar ---------- */
.bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
  margin-bottom:38px;
  flex-wrap:wrap;
}

.bar-left{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}

.wordmark{font-size:16px;font-weight:800;letter-spacing:.06em}
.wordmark b{font-weight:800}
.wordmark i{font-style:normal;color:var(--accent)}
.wordmark.small{font-size:13px}

.bar-meta{font-size:12.5px;color:var(--dim)}

.bar-right{display:flex;gap:8px}

.chip{
  min-width:44px;
  height:44px;
  padding:0 20px;
  border-radius:999px;
  border:1px solid var(--btn-line);
  background:var(--btn);
  color:var(--btn-ink);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.chip:hover{border-color:var(--accent)}
.chip-icon{width:44px;padding:0}

/* Half-filled circle, the same light/dark mark the simulator uses. */
.icon-theme{
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid var(--btn-ink);
  background:linear-gradient(90deg,var(--btn-ink) 0 50%,transparent 50% 100%);
}

/* ---------- Intro ---------- */
.intro{margin-bottom:44px}

h1{
  font-size:clamp(32px,5.6vw,46px);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.2;
  margin-bottom:14px;
}

.lede{font-size:17px;line-height:1.7;color:var(--muted);max-width:56ch;margin-bottom:12px}
.note{font-size:13px;color:var(--dim)}

/* ---------- Pick head ---------- */
.pick-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
}

.pick-head > div:first-child{min-width:0}

.step-label{
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--dim);
  margin-bottom:4px;
}

.step-title{font-size:22px;font-weight:800;line-height:1.3}

.arrows{display:flex;gap:8px;flex:none}

.arrow{
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid var(--line);
  background:transparent;
  color:var(--text);
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:border-color .15s,background .15s,opacity .15s;
}

.arrow svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.arrow:hover:not(:disabled){border-color:var(--muted);background:var(--card)}
.arrow:disabled{opacity:.28;cursor:not-allowed}

/* ---------- Track ----------
   Native scroll does the swiping; the arrows just nudge it one card. */
.track{
  display:flex;
  gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  /* `overflow-x:auto` makes the box clip on both axes, so a card's border and
     focus ring need room inside it — without this the selected border of the
     first and last cards is sliced off at the scroll edges. The negative
     margin keeps the track visually flush with the rest of the page. */
  padding:4px;
  margin:-4px -4px 0;
  scroll-padding-left:4px;
}

.track::-webkit-scrollbar{display:none}

/* ---------- Tile ---------- */
.tile{
  flex:0 0 auto;
  width:min(345px, 84vw);
  scroll-snap-align:start;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  display:flex;
  flex-direction:column;
  cursor:pointer;
  transition:border-color .15s,background .15s;
}

/* No lift on hover: `overflow-x:auto` on the track forces overflow-y to auto
   too, so a translated card gets clipped and its edge breaks the carousel
   line. Hover changes colour only. */
.tile:hover{background:var(--card-hi);border-color:var(--muted)}
.tile:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.tile.picked{border-color:var(--accent);background:var(--card-hi)}

/* Topics without a tool behind them yet. */
.tile.tile-soon{opacity:.72}
.tile.tile-soon .tile-hint{color:var(--muted)}

.tile-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}

.tile-no{
  font-size:13px;
  font-weight:800;
  letter-spacing:.12em;
  color:var(--dim);
}

.tile-icon{
  width:44px;
  height:44px;
  border-radius:12px;
  background:var(--tile);
  color:var(--tile-ink);
  display:grid;
  place-items:center;
  flex:none;
}

.tile-icon svg{
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.tile-icon svg .fl{fill:currentColor;stroke:none}

/* Tinted tiles, dark enough to sit on the card without glowing. */
.tint-blue{--tile:rgba(79,143,214,.16);--tile-ink:#78aee8}
.tint-violet{--tile:rgba(150,110,220,.16);--tile-ink:#a98ae4}
.tint-cyan{--tile:rgba(60,170,185,.16);--tile-ink:#5fc2cf}
.tint-amber{--tile:rgba(255,150,70,.16);--tile-ink:#eda061}

.light .tint-blue{--tile:#e3edfd;--tile-ink:#1b4d9b}
.light .tint-violet{--tile:#f1e8fd;--tile-ink:#6b3fa0}
.light .tint-cyan{--tile:#dff4f7;--tile-ink:#146a7a}
.light .tint-amber{--tile:#fdefdc;--tile-ink:#9a5b12}

.tile-name{font-size:19px;font-weight:800;line-height:1.35;margin-bottom:5px}
.tile-sub{font-size:13px;color:var(--blue);font-weight:600;margin-bottom:14px}

.tile-desc{
  font-size:14px;
  line-height:1.7;
  color:var(--muted);
  margin-bottom:16px;
}

.tile-opts{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}

.tile-opts li{
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px 11px;
  font-size:12px;
  color:var(--muted);
}

/* Pinned so tiles with different copy lengths still line up. */
.tile-foot{
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.tile-hint{font-size:12px;color:var(--dim);line-height:1.5}

.tile-pick{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:12.5px;
  font-weight:700;
  color:var(--muted);
}

/* A radio, not a checkbox — one topic at a time. */
.tick{
  width:19px;
  height:19px;
  border-radius:50%;
  border:2px solid var(--control-line);
  display:inline-block;
  position:relative;
  transition:border-color .12s ease,background-color .12s ease;
}

.tile:hover .tick{border-color:var(--accent)}

.picked .tick{background:var(--accent);border-color:var(--accent)}

.picked .tick::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:7px;
  height:7px;
  margin:-3.5px 0 0 -3.5px;
  border-radius:50%;
  background:#fff;
}

.picked .tile-pick{color:var(--accent)}

/* ---------- Foot controls ---------- */
.pick-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:20px;
  flex-wrap:wrap;
}

.dots{display:flex;gap:7px}

.dot{
  width:24px;
  height:5px;
  border-radius:3px;
  border:0;
  padding:0;
  background:var(--line);
  cursor:pointer;
  transition:background .15s,width .15s;
}

.dot.active{background:var(--accent);width:38px}

.pick-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.count{font-size:13px;color:var(--muted);min-width:0}

.go{
  border:0;
  border-radius:11px;
  padding:12px 22px;
  background:var(--accent);
  color:#fff;
  font-size:14.5px;
  font-weight:700;
  cursor:pointer;
}

.go:hover:not(:disabled){filter:brightness(1.08)}
.go:disabled{opacity:.35;cursor:not-allowed}

.hint{margin-top:18px;font-size:13px;color:var(--dim)}

/* ---------- Footer ---------- */
.foot{
  margin-top:48px;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:12.5px;
  color:var(--dim);
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

@media(max-width:640px){
  .shell{padding:0 16px 46px}
  .tile{width:min(320px, 86vw);padding:19px}

  /* Tighter vertical rhythm — more of the carousel is visible above the fold. */
  .intro{margin-bottom:26px}
  h1{margin-bottom:10px}
  .lede{font-size:16px;margin-bottom:8px}
  .pick-head{margin-bottom:14px}
  .hint{margin-top:14px}

  /* Arrows stay on the title's line, sitting right after it rather than being
     pushed to the far edge — there is no width to spare on a phone. */
  .pick-head{align-items:center;gap:14px;justify-content:flex-start}
  .step-title{font-size:20px}
  .arrow{width:40px;height:40px}

  /* Dots keep their own line; the chosen topic and the button share the next
     one, pushed to opposite edges. */
  .pick-foot{flex-direction:column;align-items:stretch;gap:14px;margin-top:16px}
  .pick-actions{width:100%;justify-content:space-between;gap:12px}
  .go{padding:12px 18px}
}