/* ==========================================================================
   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)}

/* ==========================================================================
   Layout 2C — centred stack
   Full-width bands, everything centred. Ticker on the accent colour, menu with
   the lockup in the middle, hero stack, four-column stat band.
   ========================================================================== */

/* ---------------- ticker ---------------- */
.ticker{overflow:hidden;background:var(--accent);color:var(--bg)}
.ticker__track{display:flex;gap:0;width:max-content;
  animation:marquee 46s linear infinite}
.ticker span{display:inline-flex;align-items:center;padding:9px 0;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.ticker span::after{content:"\00B7";margin:0 26px;opacity:.6}
.ticker:hover .ticker__track,.ticker:focus-within .ticker__track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .ticker__track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;
    padding:0 var(--pad)}
}

/* ---------------- menu, lockup centred ---------------- */
.menu{position:sticky;top:0;z-index:50;display:grid;
  grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(10px,1.4vw,26px);
  padding:0 var(--pad);min-height:70px;background:rgba(11,7,9,.93);
  backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid var(--line)}
.menu__side{display:flex;align-items:center;gap:clamp(10px,1.4vw,24px)}
.menu__side--l{justify-content:flex-end}
.menu__side--r{justify-content:flex-start}
.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__brand{display:block;line-height:0;width:150px;filter:var(--glow-mark)}
.menu__brand svg{display:block;width:100%;height:auto}
.burger{display:none;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{grid-template-columns:1fr auto 1fr}
  .menu__side--r{display:none}
  .menu__side--l{display:none;position:absolute;left:0;right:0;top:70px;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__side--l.open{display:flex}
  .menu__side--l a{padding:13px 0;border-bottom:1px solid var(--line)}
  .menu__brand{grid-column:2;width:132px}
  .burger{display:block;grid-column:3;justify-self:end}
}

/* ---------------- hero: centred stack ---------------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;left:50%;top:-40%;width:min(760px,120%);
  aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,46,107,.15),transparent 66%);
  pointer-events:none;animation:glowPulse 8s ease-in-out infinite}
.hero__in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:clamp(34px,4.6vw,64px) var(--pad)}
.hero .mark{display:block;line-height:0;width:clamp(112px,13vw,168px);margin:0 0 22px;
  filter:var(--glow-mark)}
.hero .mark svg{display:block;width:100%;height:auto}
.hero h1{max-width:16em}
.hero .lede{max-width:52ch;margin-top:6px}
.hero__act{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}
.hero__mic{margin:16px 0 0;font-size:11.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3)}

/* ---------------- stat band: 4 columns, 2x2 on mobile ---------------- */
.band{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.band>div{padding:24px 20px;text-align:center;border-right:1px solid var(--line)}
.band>div:last-child{border-right:none}
.band dt{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);margin-top:6px}
.band dd{margin:0;font-family:var(--display);font-size:clamp(18px,2vw,26px);line-height:1.15;
  color:var(--text)}
@media (max-width:720px){
  .band{grid-template-columns:repeat(2,1fr)}
  .band>div:nth-child(2n){border-right:none}
  .band>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
}

/* ---------------- content column ---------------- */
.content{max-width:860px;margin:0 auto;padding:clamp(30px,3.4vw,48px) 0 8px}
.sec{padding:0 0 42px;scroll-margin-top:88px}
.sec+.sec{border-top:1px solid var(--line);padding-top:38px}

/* ---------------- TOC, inline under the band ---------------- */
.toc{margin:0 0 34px;padding:22px 24px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card)}
.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);text-align:center}
.toc ol{margin:0;padding:0;list-style:none;counter-reset:t;font-size:14.5px;
  columns:2;column-gap:34px}
.toc li{counter-increment:t;display:flex;gap:11px;align-items:flex-start;padding:6px 0;
  break-inside:avoid}
.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)}
@media (max-width:620px){.toc ol{columns:1}}

/* ---------------- 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}

/* ---------------- 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:44px;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:repeat(3,1fr);gap:30px;
  max-width:1000px;margin:0 auto;text-align:center}
.foot .lock{margin:0 auto 16px}
.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;justify-content:center;
  text-align:center;max-width:1000px;margin-left:auto;margin-right:auto;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}}