/* J Group — ระบบดีไซน์ร่วมของเว็บในเครือ (สอดคล้องกับเว็บ LDI)
   โครงเดียวกันทุกบริษัท: แถบเครือด้านบน · หัวเรื่องตัวใหญ่ · แผ่นสีประจำแบรนด์ · การ์ด · บล็อก "เมื่อต้องขึ้นศาล → LDI" · ท้ายหน้าเครือ
   แต่ละบริษัทเปลี่ยนแค่สีประจำแบรนด์ด้วย body[data-brand] */
:root{
  --paper:#F5F6F3; --sheet:#FFFFFF; --ink:#16201E; --text:#3A4643; --muted:#5D6966; --rule:#D9DFDB; --rule-soft:#E8ECE9;
  --brand:#0E3F39; --brand-2:#14524A; --brand-ink:#F1F5F3; --brand-muted:#B4C8C3; --brand-soft:#E3EEEA; --link:#0F5C53;
  --ldi:#0E3F39; --ldi-ink:#EEF3F1;
  --mark:#F2D452; --ok:#1C7C54; --ok-bg:#E2F2E9; --soon:#7A5A00; --soon-bg:#FBF0D2;
  --display:'Trirong','Noto Serif Thai',Georgia,serif;
  --body:'IBM Plex Sans Thai','Noto Sans Thai',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  color-scheme:light;
}
body[data-brand="cnx"]{--brand:#16213D;--brand-2:#8A6A2E;--brand-ink:#F7F1E3;--brand-muted:#C9B88F;--brand-soft:#F1EBDD;--link:#7A5C22;--gold:#C9A45C}
body[data-brand="qa"]{--brand:#173F7A;--brand-2:#1F5AA8;--brand-ink:#F1F5FC;--brand-muted:#B7C9E6;--brand-soft:#E6EEFA;--link:#1F5AA8}
body[data-brand="khaojai"]{--brand:#7E1F24;--brand-2:#9E2D33;--brand-ink:#FCF2F2;--brand-muted:#E3B8BA;--brand-soft:#F7E7E7;--link:#9E2D33}
body[data-brand="bookabout"]{--brand:#7A5312;--brand-2:#9A6A18;--brand-ink:#FFF8EC;--brand-muted:#E6CFA6;--brand-soft:#F7EEDC;--link:#8A5E14}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#0E1412; --sheet:#151C1A; --ink:#E9EEEC; --text:#BCC7C3; --muted:#909D99; --rule:#26322F; --rule-soft:#1D2725;
  --ldi:#0A2A26; --ldi-ink:#E9EEEC; --mark:#7C6B1A; --ok:#7FD3A8; --ok-bg:#12352A; --soon:#F0CB6A; --soon-bg:#3A2F10; color-scheme:dark}
  :root:not([data-theme="light"]) body{--brand-soft:color-mix(in srgb,var(--brand) 30%,#151C1A);--link:color-mix(in srgb,var(--brand-muted) 85%,white)}}
:root[data-theme="dark"]{
  --paper:#0E1412; --sheet:#151C1A; --ink:#E9EEEC; --text:#BCC7C3; --muted:#909D99; --rule:#26322F; --rule-soft:#1D2725;
  --ldi:#0A2A26; --ldi-ink:#E9EEEC; --mark:#7C6B1A; --ok:#7FD3A8; --ok-bg:#12352A; --soon:#F0CB6A; --soon-bg:#3A2F10; color-scheme:dark}
:root[data-theme="dark"] body{--brand-soft:color-mix(in srgb,var(--brand) 30%,#151C1A);--link:color-mix(in srgb,var(--brand-muted) 85%,white)}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--text);font:400 17px/1.75 var(--body)}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
h1,h2,h3{font-family:var(--display);color:var(--ink);margin:0;line-height:1.26;text-wrap:balance;font-weight:600}
p{margin:0}
a{color:var(--link)}
img{max-width:100%}
[hidden]{display:none!important}
a:focus-visible,button:focus-visible{outline:3px solid var(--mark);outline-offset:3px;border-radius:4px}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.eyebrow{font:500 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mark{background:linear-gradient(transparent 56%,var(--mark) 56%,var(--mark) 90%,transparent 90%);padding:0 .06em}
.tnum{font-variant-numeric:tabular-nums}

/* แถบเครือ */
.gbar{background:var(--ldi);color:var(--ldi-ink);font:500 12.5px/1 var(--mono)}
.gbar .wrap{display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap;padding-block:9px}
.gbar .g{letter-spacing:.16em;opacity:.7;margin-right:4px}
.gbar a{color:var(--ldi-ink);text-decoration:none;opacity:.78;padding:3px 0;border-bottom:2px solid transparent}
.gbar a:hover{opacity:1}
.gbar a[aria-current="page"]{opacity:1;border-bottom-color:var(--mark)}

/* หัว */
.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule-soft)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:13px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);min-width:0}
.seal{width:40px;height:40px;border-radius:50%;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;font:600 13px/1 var(--display);letter-spacing:.02em;flex:none}
.brand b{display:block;font:600 18px/1.15 var(--display)}
.brand small{display:block;font:400 11px/1.3 var(--mono);letter-spacing:.1em;color:var(--muted)}
.nav{display:flex;gap:22px;align-items:center;font-size:15px}
.nav a{color:var(--text);text-decoration:none}
.nav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.nav .btn{min-height:40px;padding:0 18px;font-size:14.5px}
@media (max-width:860px){.nav a:not(.btn){display:none}}
@media (max-width:420px){.brand small{display:none}.nav .btn{display:none}}

/* ปุ่ม */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 24px;border-radius:999px;background:var(--brand);color:var(--brand-ink);font:600 16px var(--body);text-decoration:none;border:1px solid var(--brand)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn.light{background:var(--brand-ink);color:var(--brand);border-color:var(--brand-ink)}
.btn .ar{transition:transform .2s}.btn:hover .ar{transform:translateX(3px)}
@media (prefers-reduced-motion:no-preference){.btn{transition:transform .15s}.btn:hover{transform:translateY(-1px)}}

/* hero */
.hero{padding-block:clamp(48px,8vw,100px) clamp(40px,6vw,72px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,6vw,72px);align-items:center}
.hero h1{font-size:clamp(34px,5.2vw,60px);line-height:1.17;margin-top:16px}
.hero h1 em{font-style:italic;font-weight:400;color:var(--brand-2)}
.lead{margin-top:22px;font-size:clamp(17px,1.5vw,19px);max-width:54ch}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.promise{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:28px;font-size:14.5px;color:var(--muted)}
.promise>span::before{content:"✓";color:var(--ok);font-weight:600;margin-right:8px}
@media (max-width:880px){.hero{grid-template-columns:1fr}}

/* แผ่นสีแบรนด์ (ฝั่งขวาของ hero) */
.slab{background:var(--brand);color:var(--brand-ink);border-radius:22px;padding:clamp(22px,3vw,32px);display:grid;gap:16px;position:relative;overflow:hidden}
.slab .cap{font:500 11.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-muted)}
.slab h2,.slab h3{color:var(--brand-ink)}
.slab p{color:var(--brand-muted)}
.sheetcard{background:var(--sheet);color:var(--text);border-radius:14px;padding:18px 20px;box-shadow:0 18px 40px -24px rgba(0,0,0,.5)}
.sheetcard h3{color:var(--ink)}

/* ตัวเลข / ข้อเท็จจริง */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.fact{padding:24px 22px;display:grid;gap:6px;border-left:1px solid var(--rule);min-width:0}
.fact:first-child{border-left:0;padding-left:0}
.fact b{font:600 clamp(28px,3.4vw,42px)/1 var(--display);color:var(--ink)}
.fact span{font-size:14.5px;color:var(--muted)}
@media (max-width:760px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}.fact:nth-child(3){border-left:0;padding-left:0}.fact:nth-child(n+3){border-top:1px solid var(--rule)}}

section{padding-block:clamp(56px,8vw,100px)}
.head{display:grid;gap:12px;max-width:66ch;margin-bottom:clamp(28px,4vw,46px)}
.head h2{font-size:clamp(28px,3.6vw,42px);line-height:1.22}
.head p{font-size:17.5px}
.band{background:var(--brand);color:var(--brand-ink)}
.band h2,.band h3{color:var(--brand-ink)}
.band .eyebrow{color:var(--brand-muted)}
.band .head p,.band p{color:var(--brand-muted)}
.soft{background:var(--sheet);border-block:1px solid var(--rule)}

/* การ์ด */
.cards{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--sheet);border:1px solid var(--rule);border-radius:18px;padding:clamp(20px,2.4vw,28px);display:grid;gap:10px;align-content:start;min-width:0}
.card h3{font-size:21px}
.card p{font-size:15.5px}
.card .k{font:500 12px/1 var(--mono);letter-spacing:.12em;color:var(--link)}
.card ul{margin:4px 0 0;padding:12px 0 0;list-style:none;display:grid;gap:6px;font-size:15px;border-top:1px solid var(--rule)}
.card li::before{content:"—";margin-right:8px;opacity:.55}
.card.feature{background:var(--brand-soft);border-color:transparent}
.card .price{font:600 20px/1.2 var(--display);color:var(--ink)}
.card .price small{font:400 13.5px var(--body);color:var(--muted)}
.band .card{background:color-mix(in srgb,var(--brand-ink) 8%,transparent);border-color:color-mix(in srgb,var(--brand-ink) 18%,transparent)}
.band .card h3{color:var(--brand-ink)}
.band .card p,.band .card li{color:var(--brand-muted)}
.band .card .k{color:var(--mark)}
@media (max-width:980px){.cards.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.cards,.cards.two,.cards.four{grid-template-columns:1fr}}
.chip{display:inline-block;width:fit-content;border-radius:999px;padding:2px 10px;font:500 12px/1.6 var(--mono);background:var(--ok-bg);color:var(--ok);white-space:nowrap}
.chip.soon{background:var(--soon-bg);color:var(--soon)}

/* ขั้นตอน (ลำดับจริง) */
.track{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));position:relative}
.track::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:var(--rule)}
.track li{position:relative;padding-top:34px;padding-right:16px;display:grid;gap:4px;min-width:0}
.track li::before{content:"";position:absolute;top:2px;left:0;width:16px;height:16px;border-radius:50%;background:var(--paper);border:2px solid var(--brand-2)}
.track li:first-child::before{background:var(--brand-2)}
.track .n{font:500 11.5px/1 var(--mono);letter-spacing:.12em;color:var(--muted)}
.track b{color:var(--ink);font:600 18px/1.3 var(--display)}
.track p{font-size:14.5px}
@media (max-width:860px){.track{grid-template-columns:1fr}.track::before{left:7px;right:auto;top:0;bottom:0;width:2px;height:auto}.track li{padding:0 0 22px 36px}.track li::before{top:4px}}

/* คำพูด */
.quote{font:400 clamp(24px,3vw,36px)/1.45 var(--display);font-style:italic;color:var(--ink);max-width:30ch}
.quote::before{content:"“";display:block;font-size:2.3em;line-height:.6;color:var(--mark);font-style:normal}

/* บล็อกเชื่อม LDI — เหมือนกันทุกเว็บ */
.toldi{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:center;background:var(--ldi);color:var(--ldi-ink);border-radius:22px;padding:clamp(22px,3vw,34px)}
.toldi .seal{width:56px;height:56px;font-size:17px;background:var(--ldi-ink);color:var(--ldi)}
.toldi h2{color:var(--ldi-ink);font-size:clamp(22px,2.6vw,30px)}
.toldi p{color:#A9C2BC;margin-top:6px}
.toldi .btn{background:var(--ldi-ink);color:var(--ldi);border-color:var(--ldi-ink)}
@media (max-width:760px){.toldi{grid-template-columns:1fr}}

/* ติดต่อ */
.contact{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,5vw,56px);align-items:start}
.contact h2{font-size:clamp(30px,4.2vw,48px);line-height:1.16}
.kv{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px 16px;margin:26px 0 0;font-size:16.5px}
.kv dt{color:var(--brand-muted);font-size:14px;padding-top:3px}
.kv dd{margin:0;color:var(--brand-ink);overflow-wrap:anywhere}
.kv a{color:var(--brand-ink)}
.copy{background:none;border:1px solid color-mix(in srgb,var(--brand-ink) 35%,transparent);border-radius:999px;color:var(--brand-ink);font:500 11.5px/1 var(--mono);padding:5px 10px;margin-left:8px;cursor:pointer;vertical-align:2px}
@media (max-width:860px){.contact{grid-template-columns:1fr}}

/* ท้ายหน้าเครือ */
footer{padding-block:34px 44px;font-size:13.5px;color:var(--muted)}
footer .wrap{display:grid;gap:14px}
.gfoot{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.gfoot a{display:grid;gap:2px;text-decoration:none;border:1px solid var(--rule);border-radius:12px;padding:12px 14px;color:var(--text);background:var(--sheet)}
.gfoot a b{color:var(--ink);font:600 15px var(--display)}
.gfoot a span{font-size:12.5px;color:var(--muted)}
.gfoot a[aria-current="page"]{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
@media (max-width:860px){.gfoot{grid-template-columns:repeat(2,minmax(0,1fr))}}
.nav a.btn{color:var(--brand-ink);text-decoration:none}
.band .card.plain{background:var(--sheet);border-color:transparent}
.band .card.plain h3{color:var(--ink)}
.band .card.plain p,.band .card.plain li,.band .card.plain ol,.band .card.plain ul{color:var(--text)}
.band .card.plain .eyebrow{color:var(--muted)}
a.card{color:var(--text);transition:border-color .15s}
a.card:hover{border-color:var(--brand-2)}
.card ol li::before,.card.plain li::before{content:none}
/* สามภาษา — ใช้คีย์ภาษาเดียวกับเว็บ LDI (จำข้ามทุกเว็บในเครือ) */
html:not([data-lang="en"]) .en{display:none!important}
html:not([data-lang="zh"]) .zh{display:none!important}
html[data-lang="en"] .th,html[data-lang="zh"] .th{display:none!important}
html[data-lang="zh"] body{--display:'Noto Serif SC','Trirong',serif;--body:'Noto Sans SC','IBM Plex Sans Thai',system-ui,sans-serif}
.lang{display:inline-flex;border:1px solid var(--rule);border-radius:999px;padding:3px}
.lang button{background:none;border:0;color:var(--muted);font:500 12.5px/1 var(--mono);padding:7px 10px;border-radius:999px;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--brand);color:var(--brand-ink)}
@media (max-width:420px){.lang button{padding:7px 8px}}
.chip{white-space:normal;max-width:100%}

/* ---------- CNX: Departure Lounge ---------- */
.board{background:#0E1426;border-radius:18px;padding:18px;font:500 13.5px/1.4 var(--mono);color:#E9D9AE;box-shadow:0 24px 50px -28px rgba(0,0,0,.6);overflow-x:auto}
.board .bh{display:flex;justify-content:space-between;gap:12px;color:#8E98B5;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;padding-bottom:10px;border-bottom:1px solid #263052}
.board table{width:100%;border-collapse:collapse;min-width:300px}
.board td{padding:11px 6px;border-bottom:1px dashed #263052;vertical-align:top}
.board td:first-child{color:#8E98B5;width:30%}
.board td:last-child{text-align:right;white-space:nowrap}
.board .st{display:inline-block;background:#C9A45C;color:#0E1426;border-radius:4px;padding:1px 7px;font-size:11.5px;letter-spacing:.06em}
.board .st.wait{background:transparent;color:#C9A45C;border:1px solid #C9A45C}
@media (prefers-reduced-motion:no-preference){.board .blink{animation:blink 1.6s steps(2,end) infinite}@keyframes blink{50%{opacity:.25}}}
.passes{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
.pass{display:grid;grid-template-columns:minmax(0,1fr) 92px;background:var(--sheet);border:1px solid var(--rule);border-radius:16px;overflow:hidden;min-width:0}
.pass .main{padding:20px 22px;display:grid;gap:8px;align-content:start;min-width:0}
.pass .main h3{font-size:20px}
.pass .main p{font-size:15px}
.pass .stub{border-left:2px dashed var(--rule);background:var(--brand-soft);display:grid;place-items:center;align-content:center;gap:4px;padding:10px;text-align:center}
.pass .stub b{font:600 22px/1 var(--display);color:var(--brand)}
.pass .stub span{font:500 10.5px/1.3 var(--mono);letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.pass .from{font:500 11.5px/1 var(--mono);letter-spacing:.12em;color:var(--link)}
@media (max-width:760px){.passes{grid-template-columns:1fr}}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) body[data-brand="cnx"] .pass .stub b{color:var(--gold)}}
:root[data-theme="dark"] body[data-brand="cnx"] .pass .stub b{color:var(--gold)}
.faq{display:grid;gap:10px;max-width:860px}
.faq details{background:var(--sheet);border:1px solid var(--rule);border-radius:14px;padding:0 20px}
.faq summary{cursor:pointer;list-style:none;padding:16px 0;font:600 17.5px/1.4 var(--display);color:var(--ink);display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 22px/1 var(--mono);color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding-bottom:16px;font-size:15.5px}
.faq .ref{display:block;margin-top:6px;font:500 12px var(--mono);color:var(--muted)}
.care{border:1px solid var(--rule);border-radius:14px;padding:14px 18px;font-size:14.5px;background:var(--sheet);display:flex;gap:12px;align-items:flex-start}
.care b{color:var(--ink)}
body[data-brand="cnx"] .slab{background:linear-gradient(160deg,#16213D,#0E1426)}
body[data-brand="cnx"] .band{background:#16213D}
body[data-brand="cnx"] .band .eyebrow{color:#C9A45C}
body[data-brand="cnx"] .btn{background:#16213D;border-color:#16213D;color:#F7F1E3}
body[data-brand="cnx"] .btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
body[data-brand="cnx"] .band .btn,body[data-brand="cnx"] .btn.gold{background:#C9A45C;border-color:#C9A45C;color:#16213D}
body[data-brand="cnx"] .hero h1 em{color:#8A6A2E}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) body[data-brand="cnx"] .hero h1 em{color:#D9B977}
  :root:not([data-theme="light"]) body[data-brand="cnx"] .btn:not(.ghost){background:#C9A45C;border-color:#C9A45C;color:#16213D}}
:root[data-theme="dark"] body[data-brand="cnx"] .hero h1 em{color:#D9B977}
:root[data-theme="dark"] body[data-brand="cnx"] .btn:not(.ghost){background:#C9A45C;border-color:#C9A45C;color:#16213D}

/* ---------- Q&A: Gen Z ---------- */
body[data-brand="qa"]{--brand:#2A2AE8;--brand-2:#2A2AE8;--brand-ink:#FFFFFF;--brand-muted:#C9CCFF;--brand-soft:#ECEBFF;--link:#2A2AE8;--lime:#D6FF3D;--pink:#FF5FA8;--mark:#D6FF3D;
  --display:'Bai Jamjuree','IBM Plex Sans Thai',system-ui,sans-serif}
html[data-lang="zh"] body[data-brand="qa"]{--display:'Noto Sans SC','Bai Jamjuree',sans-serif}
body[data-brand="qa"] h1,body[data-brand="qa"] h2,body[data-brand="qa"] h3{font-weight:700;letter-spacing:-.01em}
body[data-brand="qa"] .hero h1{font-size:clamp(40px,6.4vw,76px);line-height:1.05}
body[data-brand="qa"] .btn{border-radius:14px;background:var(--brand);border-color:var(--brand);box-shadow:4px 4px 0 var(--ink)}
body[data-brand="qa"] .btn.ghost{background:var(--sheet);color:var(--ink);border-color:var(--ink)}
body[data-brand="qa"] .band{background:var(--brand)}
body[data-brand="qa"] .band .eyebrow{color:var(--lime)}
body[data-brand="qa"] .seal{background:var(--lime);color:#111;border-radius:12px}
.stickers{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.stk{display:inline-block;font:600 13.5px/1 var(--body);padding:8px 12px;border-radius:999px;border:2px solid var(--ink);background:var(--sheet);color:var(--ink)}
.stk.s1{background:var(--lime);color:#111;transform:rotate(-3deg)}.stk.s2{transform:rotate(2deg)}.stk.s3{background:var(--pink);color:#fff;border-color:var(--pink);transform:rotate(-1.5deg)}.stk.s4{transform:rotate(3deg)}
.chat{background:var(--sheet);border:2px solid var(--ink);border-radius:24px;padding:16px;display:grid;gap:10px;box-shadow:8px 8px 0 var(--brand)}
.chat-top{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);padding-bottom:8px;border-bottom:1px solid var(--rule)}
.chat-top b{color:var(--ink);font:700 15px var(--display)}
.chat-top .dot{width:9px;height:9px;border-radius:50%;background:#22C55E}
.bub{max-width:86%;display:grid;gap:2px}
.bub .who{font:500 11px var(--mono);color:var(--muted)}
.bub p{background:var(--brand-soft);color:var(--ink);padding:10px 14px;border-radius:16px 16px 16px 4px;font-size:15px;line-height:1.55}
.bub.me{justify-self:end;text-align:right}
.bub.me p{background:var(--brand);color:#fff;border-radius:16px 16px 4px 16px;text-align:left}
.chat-note{font-size:12px;color:var(--muted);text-align:center}
.scens{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
.scen{display:grid;gap:8px;align-content:start;text-decoration:none;color:var(--text);background:var(--sheet);border:2px solid var(--ink);border-radius:20px;padding:20px;transition:transform .15s,box-shadow .15s;min-width:0}
.scen:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--brand)}
.scen .tag{justify-self:start;font:600 12.5px/1 var(--body);background:var(--lime);color:#111;padding:6px 10px;border-radius:999px}
.scen:nth-child(3n+2) .tag{background:var(--pink);color:#fff}
.scen:nth-child(3n) .tag{background:var(--brand);color:#fff}
.scen h3{font-size:20px}
.scen p{font-size:15px}
.scen .go{font:600 14px var(--body);color:var(--link)}
@media (max-width:900px){.scens{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.scens{grid-template-columns:1fr}}
.myths{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
.myth{border-radius:20px;padding:22px;display:grid;gap:8px;align-content:start;background:var(--sheet);border:2px solid var(--ink);min-width:0}
.myth .mlab,.myth .flab{font:700 12px/1 var(--mono);letter-spacing:.12em}
.myth .mlab{color:var(--pink);text-decoration:line-through}
.myth .flab{color:var(--brand);margin-top:8px}
.myth h3{font-size:19px;text-decoration:line-through;text-decoration-color:var(--pink);text-decoration-thickness:2px;color:var(--muted)}
.myth p{font-size:15.5px}
.myth .ref{font:500 12px var(--mono);color:var(--muted)}
@media (max-width:760px){.myths{grid-template-columns:1fr}}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) body[data-brand="qa"]{--brand:#6E6BFF;--brand-2:#8B89FF;--link:#A9A7FF;--brand-soft:#1E1F44}
  :root:not([data-theme="light"]) body[data-brand="qa"] .btn{box-shadow:4px 4px 0 var(--lime)}}
:root[data-theme="dark"] body[data-brand="qa"]{--brand:#6E6BFF;--brand-2:#8B89FF;--link:#A9A7FF;--brand-soft:#1E1F44}
:root[data-theme="dark"] body[data-brand="qa"] .btn{box-shadow:4px 4px 0 var(--lime)}
body[data-brand] .toldi .btn{background:var(--ldi-ink);color:var(--ldi);border-color:var(--ldi-ink);box-shadow:none}
.band .pass .main h3{color:var(--ink)}.band .pass .main p{color:var(--text)}.band .pass .from{color:var(--link)}