/* ==========================================================================
   Kiss918 Thailand — theme, layout variant 2B
   Structure from handoff-2b/README.md: the viewport splits 44% / 56%. The left
   column is sticky and does not scroll with the content on desktop (>=1024px);
   the right column carries the menu, the sections and the footer.

   For a reference site that split earns its keep: the table of contents lives
   in the sticky panel, so it stays visible for the whole page instead of
   scrolling away like an inline box would.

   Palette, fonts, grid, radii and glow are copied from the handoff README.
   ========================================================================== */

:root{
  --bg:#0B0709;
  --surface:#120C0F;
  --surface-2:#140D11;
  --line:rgba(245,239,241,.09);
  --line-2:rgba(245,239,241,.16);
  --line-3:rgba(245,239,241,.28);

  --text:#F5EFF1;
  --text-2:rgba(245,239,241,.6);
  --text-3:rgba(245,239,241,.45);

  --accent:#FF2E6B;
  --accent-lt:#FF7AA3;

  --glow:0 0 36px rgba(255,46,107,.35);
  --glow-mark:drop-shadow(0 0 26px rgba(255,46,107,.55));
  --pane-glow:radial-gradient(600px 500px at 30% 45%,rgba(255,46,107,.16),transparent 70%);

  --display:"Archivo Black",Helvetica,Arial,sans-serif;
  --body:"Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --wrap:1280px; --pad:clamp(22px,3.2vw,40px);
  --r-card:10px; --r-pill:999px; --r-badge:44px;
  --split:44%;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}
}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);
  font-weight:400;font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-lt);text-decoration:underline;text-underline-offset:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
img,svg{max-width:100%}
@keyframes glowPulse{0%,100%{opacity:.55}50%{opacity:1}}

/* ---------------- type ---------------- */
h1,h2{font-family:var(--display);font-weight:400;letter-spacing:-.01em;line-height:1.05;
  margin:0 0 .5em;color:var(--text);text-wrap:balance}
h1{font-size:clamp(32px,3.6vw,52px)}
h1 em{font-style:normal;color:var(--accent)}
h2{font-size:clamp(24px,2.5vw,33px)}
h3,h4{font-family:var(--body);font-weight:600;letter-spacing:-.01em;line-height:1.3;
  margin:0 0 .45em;color:var(--text)}
h3{font-size:clamp(18px,1.6vw,21px)}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
.lede{font-size:clamp(16px,1.15vw,18px);line-height:1.6;color:var(--text-2);font-weight:300;
  text-wrap:pretty}
.kicker{margin:0 0 14px;font-size:11.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent)}
strong{font-weight:600;color:var(--text)}

/* ==========================================================================
   The 2B split
   ========================================================================== */
.split{display:block}
.pane{position:relative;overflow:hidden}
.pane::before{content:"";position:absolute;inset:0;background:var(--pane-glow);
  pointer-events:none;animation:glowPulse 8s ease-in-out infinite}
.pane__in{position:relative;z-index:1;display:flex;flex-direction:column;
  padding:clamp(26px,3vw,44px) var(--pad)}
.stream{display:flex;flex-direction:column;min-width:0}

@media (min-width:1024px){
  .split{display:grid;grid-template-columns:var(--split) minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr);align-items:start;
    max-width:var(--wrap);margin:0 auto}
  .pane{grid-column:1;grid-row:1 / span 2;position:sticky;top:0;height:100vh;
    min-height:720px;border-right:1px solid var(--line)}
  .menu{grid-column:2;grid-row:1}
  .stream{grid-column:2;grid-row:2;min-height:calc(100vh - 64px)}
  .pane__in{height:100%;overflow-y:auto;padding:40px}
}

/* left panel contents */
.pane .lock{display:block;line-height:0;filter:var(--glow-mark);width:170px;margin-bottom:auto}
.pane .lock svg{display:block;width:100%;height:auto}
.pane__body{padding:34px 0 0}
.pane h1{max-width:12em}
.pane .lede{max-width:34em;margin-top:14px}
.pane__act{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}
.pane__trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:auto;padding-top:30px;
  font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3)}
@media (max-width:1023px){
  .pane__in{padding-bottom:34px}
  /* the menu row carries the brand on mobile, so the panel must not repeat it */
  .pane .lock{display:none}
  .pane__body{padding-top:0}
  .pane__trust{padding-top:26px}
}

/* right column menu */
.menu{position:sticky;top:0;z-index:50;display:flex;align-items:center;
  gap:clamp(8px,0.9vw,18px);padding:0 var(--pad);min-height:64px;background:rgba(11,7,9,.93);
  backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid var(--line)}
.menu a{color:var(--text-2);font-size:13.5px;font-weight:400;white-space:nowrap}
.menu a:hover,.menu a[aria-current="page"]{color:var(--text);text-decoration:none}
.menu>.btn{flex:0 0 auto;margin-left:auto}
.menu__brand{display:none}
.burger{display:none;margin-left:auto;cursor:pointer;border-radius:var(--r-pill);
  background:transparent;border:1px solid var(--line-2);color:var(--text);
  padding:9px 17px;font:600 13.5px/1 var(--body)}
@media (max-width:1023px){
  .menu{gap:14px}
  .menu__brand{display:block;line-height:0;width:132px;filter:var(--glow-mark)}
  .menu__brand svg{display:block;width:100%;height:auto}
  .menu__links{display:none;position:absolute;left:0;right:0;top:64px;z-index:50;
    flex-direction:column;align-items:stretch;gap:0;padding:4px var(--pad) 16px;
    background:var(--surface);border-bottom:1px solid var(--line)}
  .menu__links.open{display:flex}
  .menu__links a{padding:13px 0;border-bottom:1px solid var(--line)}
  .burger{display:block}
  .menu>.btn{display:none}
}
@media (min-width:1024px){.menu__links{display:contents}}

/* ---------------- breadcrumb ---------------- */
.crumb{margin:0;padding:12px var(--pad);font-size:12.5px;color:var(--text-3);
  background:var(--surface);border-bottom:1px solid var(--line)}
.crumb ol{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.crumb li+li::before{content:"/";margin-right:6px;color:var(--line-3)}
.crumb a{color:var(--text-3)}

/* ---------------- content ---------------- */
.content{padding:clamp(28px,3vw,44px) var(--pad) 8px}
.sec{padding:0 0 42px;scroll-margin-top:82px}
.sec+.sec{border-top:1px solid var(--line);padding-top:38px}

/* ---------------- TOC, in the sticky panel ---------------- */
.toc{margin:30px 0 0;padding:20px 0 0;border-top:1px solid var(--line)}
.toc h2{margin:0 0 12px;font-family:var(--body);font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
.toc ol{margin:0;padding:0;list-style:none;counter-reset:t;font-size:14.5px}
.toc li{counter-increment:t;display:flex;gap:12px;align-items:flex-start;padding:6px 0}
.toc li::before{content:counter(t,decimal-leading-zero);flex:0 0 auto;font-family:var(--display);
  font-size:10.5px;color:var(--accent);padding-top:4px}
.toc a{color:var(--text-2);font-weight:300}
.toc a:hover{color:var(--accent)}

/* ---------------- flag ---------------- */
.flag{margin:0 0 30px;padding:22px 24px;border-radius:var(--r-card);background:var(--surface-2);
  border:1px solid var(--line-2);border-left:3px solid var(--accent)}
.flag p:first-child{margin:0 0 10px;font-size:10.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent)}
.flag p{font-size:14.5px;color:var(--text-2);font-weight:300}
.flag strong{color:var(--text);font-weight:600}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;
  padding:0 26px;border-radius:var(--r-pill);max-width:100%;font-family:var(--body);
  font-weight:600;font-size:15px;text-decoration:none;border:1px solid transparent;
  cursor:pointer;transition:background .16s ease,border-color .16s ease,box-shadow .16s ease}
.btn:hover{text-decoration:none}
.btn--go{background:var(--accent);color:var(--bg);box-shadow:var(--glow)}
.btn--go:hover{background:var(--accent-lt);color:var(--bg);box-shadow:0 0 46px rgba(255,46,107,.5)}
.btn--line{background:transparent;border-color:var(--line-3);color:var(--text)}
.btn--line:hover{border-color:var(--accent);color:var(--text)}
.btn--sm{min-height:38px;padding:0 19px;font-size:13.5px}
.btn--block{width:100%}

/* ---------------- stats ---------------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0;margin:0 0 30px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats>div{display:flex;flex-direction:column-reverse;padding:20px 22px 20px 0;
  border-right:1px solid var(--line)}
.stats>div:last-child{border-right:none}
.stats dt{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);margin-top:6px}
.stats dd{margin:0;font-family:var(--display);font-size:21px;line-height:1.2;color:var(--text)}

/* ---------------- editor's pick ---------------- */
.pick{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:center;
  margin:0 0 32px;padding:22px 24px;border-radius:var(--r-card);background:var(--surface-2);
  border:1px solid var(--line-2)}
.pick__k{margin:0 0 6px;font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3)}
.pick h2{margin:0 0 5px;font-size:21px}
.pick__deal{margin:0 0 5px;font-weight:600;font-size:14.5px;color:var(--accent)}
.pick__meta{margin:0;font-size:12.5px;color:var(--text-3);font-weight:300}
.pick__act{text-align:center}
.pick__t{margin:9px 0 0;font-size:10.5px;color:var(--text-3)}
@media (max-width:640px){.pick{grid-template-columns:1fr}}

/* ---------------- clusters / related ---------------- */
.clusters{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.cluster{padding:22px;border-radius:var(--r-card);background:var(--surface);
  border:1px solid var(--line)}
.cluster h3{margin:0 0 6px;font-size:18px}
.cluster>p{margin:0 0 16px;font-size:14px;color:var(--text-3);font-weight:300}
.cluster ul{margin:0;padding:0;list-style:none}
.cluster li{padding:11px 0;border-top:1px solid var(--line)}
.cluster li a{font-weight:600;font-size:14.5px}
.cluster li span{display:block;margin-top:3px;font-size:12.5px;color:var(--text-3);font-weight:300}
.rel{margin-top:34px;padding:22px 24px;background:var(--surface);border-radius:var(--r-card);
  border:1px solid var(--line)}
.rel h2{margin:0 0 12px;font-family:var(--body);font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
.rel ul{display:flex;flex-wrap:wrap;gap:9px 20px;margin:0;padding:0;list-style:none;font-size:14.5px}

/* ---------------- tables ---------------- */
.tw{overflow-x:auto;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card)}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
caption{padding:18px 20px 4px;text-align:left;font-size:12px;color:var(--text-3)}
th,td{padding:13px 20px;text-align:left;border-bottom:1px solid var(--line)}
thead th{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3)}
tbody th{font-weight:600;color:var(--text)}
tbody td{color:var(--text-2);font-weight:300}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:none}
.n{color:var(--accent);font-weight:600}
.no{color:#FF5C7A;font-weight:600}
.yes{color:#4FD1A0;font-weight:600}
.tnote{margin:12px 0 0;font-size:12px;color:var(--text-3);font-weight:300}

/* ---------------- steps: the "How it works" row from 2B ---------------- */
.steps{counter-reset:s;list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px}
.steps li{counter-increment:s}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;margin-bottom:12px;
  font-family:var(--display);font-size:14px;color:var(--accent)}
.steps h3{margin:0 0 8px;font-size:17px}
.steps p{margin:0;font-size:14px;color:var(--text-2);font-weight:300;line-height:1.6}

/* ---------------- CTA ---------------- */
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin:32px 0 0;padding:26px;
  border-radius:var(--r-card);background:var(--surface-2);border:1px solid var(--line-2)}
.cta>div:first-child{flex:1 1 260px}
.cta h3{margin:0 0 6px;font-size:19px}
.cta p{margin:0;font-size:14px;color:var(--text-2);font-weight:300}
.cta__act{display:flex;flex-direction:column;gap:10px}
.cta__mic{margin:0!important;font-size:10px!important;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3)!important;text-align:center}

/* ---------------- operators: 2B featured grid ---------------- */
.ops{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.op{display:flex;flex-direction:column;padding:22px;border-radius:var(--r-card);
  background:var(--surface);border:1px solid var(--line)}
.op__hd{display:flex;align-items:center;gap:13px}
.op__pos{flex:0 0 auto;font-family:var(--display);font-size:14px;color:var(--accent)}
.op__name{margin:0;font-size:19px}
.op__best{margin:2px 0 0;font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3)}
.op__deal{margin:16px 0;font-weight:600;font-size:14.5px;color:var(--accent)}
.op__spec{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin:0 0 16px;padding:15px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.op__spec dt{font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3)}
.op__spec dd{margin:4px 0 0;font-size:13.5px;font-weight:600}
.op__pts{margin:0 0 18px;padding-left:18px;font-size:13.5px;color:var(--text-2);font-weight:300}
.op__pts li{margin-bottom:7px}
.op .btn{margin-top:auto}
.op__terms{margin:12px 0 0;font-size:10.5px;color:var(--text-3);text-align:center;font-weight:300}

/* ---------------- FAQ ---------------- */
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  margin-bottom:10px}
.faq summary{cursor:pointer;list-style:none;position:relative;padding:16px 48px 16px 20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{display:inline;margin:0;font-size:16px;font-weight:600}
.faq summary:hover h3{color:var(--accent-lt)}
.faq summary::after{content:"+";position:absolute;right:20px;top:14px;font-family:var(--display);
  font-size:16px;color:var(--accent)}
.faq details[open] summary::after{content:"–"}
.faq details>div{padding:0 20px 18px;font-size:15px;color:var(--text-2);font-weight:300}

/* ---------------- glossary ---------------- */
.gloss{margin:0}
.gloss>div{padding:17px 0;border-bottom:1px solid var(--line)}
.gloss dt{font-family:var(--body);font-weight:600;font-size:16px;color:var(--text)}
.gloss dd{margin:6px 0 0;font-size:15px;color:var(--text-2);font-weight:300}

/* ---------------- misc ---------------- */
.note{display:block;margin:24px 0;padding:18px 22px;border-radius:var(--r-card);
  background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--line-3);
  font-size:14.5px;color:var(--text-2);font-weight:300}
.note.warn{border-left-color:var(--accent-lt)}
.note.stop{border-left-color:var(--accent);background:rgba(255,46,107,.07)}
.note strong{color:var(--text)}
.disc{margin:0 0 22px;padding:12px 18px;border-radius:var(--r-card);background:var(--surface);
  border:1px solid var(--line);font-size:12px;color:var(--text-3);font-weight:300}
.byline{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 22px;font-size:12px;
  color:var(--text-3);font-weight:300}
.byline a{color:var(--text-3)}
.prose{color:var(--text-2);font-weight:300;font-size:16px}
.prose h2{margin:1.6em 0 .5em;color:var(--text)}
.prose h3{margin:1.5em 0 .45em;color:var(--text)}
.prose>:first-child{margin-top:0}
.prose strong{color:var(--text);font-weight:600}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin-bottom:9px}
.skip{position:absolute;left:-9999px;background:var(--accent);color:var(--bg);padding:10px 18px;
  font-weight:600}
.skip:focus{left:0;top:0;z-index:100}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.dock{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;gap:10px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(11,7,9,.97);
  backdrop-filter:blur(12px);border-top:1px solid var(--line-2)}
.dock .btn{flex:1;min-height:46px;font-size:14px;padding:0 12px}
@media (max-width:820px){.dock{display:flex}body{padding-bottom:78px}}

/* ---------------- footer: pushed down inside the right column ---------------- */
.foot{margin-top:auto;padding:44px var(--pad) 32px;background:var(--surface);
  border-top:1px solid var(--line);color:var(--text-2)}
.foot a{color:var(--text-2)}
.foot a:hover{color:var(--text)}
.foot__g{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
.foot h2{margin:0 0 14px;font-family:var(--body);font-size:10px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
.foot ul{margin:0;padding:0;list-style:none;font-size:13.5px;font-weight:300}
.foot li{margin-bottom:9px}
.foot .lock{display:block;line-height:0;width:172px;margin-bottom:16px;filter:var(--glow-mark)}
.foot .lock svg{display:block;width:100%;height:auto}
.foot p{font-size:13px;line-height:1.65;font-weight:300;color:var(--text-3)}
.foot__l{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:32px;padding-top:22px;
  border-top:1px solid var(--line);font-size:11.5px;line-height:1.6;color:var(--text-3);
  font-weight:300}
.plus{flex:0 0 auto;display:grid;place-items:center;width:var(--r-badge);height:var(--r-badge);
  border-radius:50%;border:1px solid var(--accent);color:var(--accent);font-family:var(--display);
  font-size:12.5px}
@media (max-width:820px){.foot__g{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot__g{grid-template-columns:1fr;gap:24px}}