/* Live-cam page redesign demo — scoped under #bkk-demo, noindex route /_preview/live-cam
   Mobile-first: base styles are the phone layout, media queries enhance upward.
   Tokens, fonts (Fraunces/Figtree), hero, chips, prose, faq come from bangkok.css. */

/* ============ SPACING FIX (Ben 2026-08-28: too much gap under the hero chips) ============ */
#bkk-demo .lcx-s1 .sec-head{margin-top:12px}
@media (max-width:767px){
  #bkk-demo .sec-head{margin:28px 0 14px}
  #bkk-demo .lcx-s1 .sec-head{margin-top:8px}
}

/* ============ LIVE DOT ============ */
#bkk-demo .lcx-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#e8123d;box-shadow:0 0 0 3px rgba(232,18,61,.16);animation:pulse 1.6s ease infinite;flex:none}

/* ============ PODIUM (top 3 editor picks) ============ */
#bkk-demo .lcx-podium{display:flex;flex-direction:column;gap:14px;margin-top:16px}
#bkk-demo .lcx-pod{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:18px 16px 16px;display:flex;flex-direction:column;gap:12px;transition:box-shadow .18s ease,transform .18s ease}
#bkk-demo .lcx-pod:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(34,20,32,.10)}
#bkk-demo .lcx-pod.is-best{border:1.5px solid var(--gold-line);background:linear-gradient(180deg,var(--gold-pale) 0%,var(--paper) 55%);box-shadow:0 0 0 4px rgba(247,212,136,.18),0 10px 30px rgba(217,164,60,.14)}
#bkk-demo .lcx-pod-badge{position:absolute;top:-11px;left:16px;display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;font:700 10.5px/1.4 var(--body);letter-spacing:.08em;background:var(--paper);border:1px solid var(--line);color:var(--ink-soft);white-space:nowrap}
#bkk-demo .lcx-pod-badge.is-gold{background:linear-gradient(180deg,var(--gold-1),var(--gold-2));border-color:transparent;color:var(--gold-ink);box-shadow:0 4px 14px rgba(217,164,60,.35)}
#bkk-demo .lcx-pod-head{display:flex;align-items:center;gap:12px}
#bkk-demo .lcx-pod-logo{width:54px;height:54px;border-radius:14px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none;box-shadow:0 3px 10px rgba(34,20,32,.07)}
#bkk-demo .lcx-pod-logo img{max-width:82%;max-height:82%;object-fit:contain}
#bkk-demo .lcx-pod-name{font-family:var(--disp);font-weight:600;font-size:21px;letter-spacing:-.01em;color:var(--ink);margin:0;line-height:1.1}
#bkk-demo .lcx-pod-score{display:inline-flex;align-items:center;gap:7px;margin-top:3px;font:700 13px var(--body);color:var(--accent-deep)}
#bkk-demo .lcx-pod-score .st{color:var(--gold-2);font-size:11px;letter-spacing:1.5px}
#bkk-demo .lcx-pod-feats{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:5px 10px}
#bkk-demo .lcx-pod-feats li{display:flex;align-items:center;gap:7px;font:400 12.5px/1.3 var(--body);color:var(--ink-soft)}
#bkk-demo .lcx-pod-feats .ck{flex:none;width:16px;height:16px;border-radius:50%;background:var(--accent-wash);color:var(--accent-deep);display:inline-flex;align-items:center;justify-content:center;font-size:8.5px;font-weight:800}
#bkk-demo .lcx-pod-cta{display:block;text-align:center;padding:13px 16px;border-radius:12px;font:800 13.5px var(--body);letter-spacing:.05em;background:linear-gradient(90deg,var(--accent),#ff5a7e);color:#fff;box-shadow:0 8px 20px rgba(255,55,92,.28);transition:transform .15s ease,filter .15s ease}
#bkk-demo .lcx-pod-cta:hover{transform:translateY(-1px);filter:brightness(1.05);color:#fff}
#bkk-demo .lcx-pod.is-best .lcx-pod-cta{background:linear-gradient(90deg,var(--gold-1),var(--gold-2));color:var(--gold-ink);box-shadow:0 8px 22px rgba(217,164,60,.35)}
#bkk-demo .lcx-pod-bonus{text-align:center;font:400 12px var(--body);color:var(--muted);margin:-2px 0 0}

/* ============ CATEGORY RAIL (horizontal snap on phones) ============ */
#bkk-demo .lcx-rail{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 24px 12px;margin:0 -24px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
#bkk-demo .lcx-rail::-webkit-scrollbar{display:none}
#bkk-demo .lcx-rail .lcx-cap{scroll-snap-align:start;flex:none;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:22px;border:1px solid var(--line);background:var(--paper);font:600 12.5px var(--body);color:var(--ink-soft);white-space:nowrap;transition:border-color .15s ease,color .15s ease,background .15s ease}
#bkk-demo .lcx-cap:hover{border-color:var(--accent);color:var(--accent-deep);background:var(--accent-wash)}

/* ============ REVIEW TILES (the full list — every tile links to its review page) ============ */
#bkk-demo .lcx-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:14px}
#bkk-demo .lcx-tile{position:relative;display:flex;flex-direction:column;gap:7px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px 12px 11px;min-width:0;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
#bkk-demo .lcx-tile:hover{border-color:#ecc9d6;box-shadow:0 10px 24px rgba(34,20,32,.09);transform:translateY(-2px)}
#bkk-demo .lcx-tile.is-top{border-color:#f3d3de;background:linear-gradient(180deg,var(--accent-wash) 0%,var(--paper) 60%)}
#bkk-demo .lcx-trk{position:absolute;top:9px;right:10px;font-family:var(--disp);font-weight:600;font-size:13px;color:var(--muted)}
#bkk-demo .lcx-tile.is-top .lcx-trk{color:var(--accent-deep)}
#bkk-demo .lcx-thead{display:flex;align-items:center;gap:9px;min-width:0;padding-right:26px}
#bkk-demo .lcx-tlg{width:38px;height:38px;border-radius:10px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
#bkk-demo .lcx-tlg img{max-width:80%;max-height:80%;object-fit:contain}
#bkk-demo .lcx-tinfo{min-width:0;display:flex;flex-direction:column;gap:1px}
#bkk-demo .lcx-tnm{font:700 13.5px/1.2 var(--body);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bkk-demo .lcx-tile:hover .lcx-tnm{color:var(--accent-deep)}
#bkk-demo .lcx-tsc{font:700 11.5px/1.3 var(--body);color:var(--accent-deep)}
#bkk-demo .lcx-tsc .sr{color:var(--gold-2);font-size:9px}
#bkk-demo .lcx-tgo{margin-top:auto;font:700 12px var(--body);color:var(--accent-deep);display:inline-flex;align-items:center;gap:4px}
#bkk-demo .lcx-tgo::after{content:"\2192";transition:transform .15s ease}
#bkk-demo .lcx-tile:hover .lcx-tgo::after{transform:translateX(3px)}

/* ============ BLOG SCROLLER ============ */
#bkk-demo .lcx-blogs{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 24px 14px;margin:12px -24px 0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
#bkk-demo .lcx-blogs::-webkit-scrollbar{display:none}
#bkk-demo .lcx-blog{scroll-snap-align:start;flex:0 0 78%;max-width:300px;background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .15s ease,box-shadow .18s ease}
#bkk-demo .lcx-blog:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(34,20,32,.10)}
#bkk-demo .lcx-blog-th{aspect-ratio:16/9;background:var(--paper-tint);overflow:hidden}
#bkk-demo .lcx-blog-th img{width:100%;height:100%;object-fit:cover}
#bkk-demo .lcx-blog-bd{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px}
#bkk-demo .lcx-blog-bd h3{font:700 14px/1.32 var(--body);color:var(--ink);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#bkk-demo .lcx-blog-bd .rd{margin-top:auto;font:700 12px var(--body);color:var(--accent-deep)}

/* ============ EXPLORE HUB (compare / alternatives / regions / models) ============ */
#bkk-demo .lcx-hub{display:flex;flex-direction:column;gap:18px;margin-top:14px;background:var(--paper-tint);border:1px solid var(--line);border-radius:18px;padding:18px 16px}
#bkk-demo .lcx-hub-grp .hg{font:800 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 9px}
#bkk-demo .lcx-hub-grp .hc{display:flex;flex-wrap:wrap;gap:7px}
#bkk-demo .lcx-hub-grp .hc a{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:20px;border:1px solid var(--line);background:var(--paper);font:600 12px var(--body);color:var(--ink-soft);transition:border-color .15s ease,color .15s ease,background .15s ease}
#bkk-demo .lcx-hub-grp .hc a:hover{border-color:var(--accent);color:var(--accent-deep);background:var(--accent-wash)}

/* ============ FINAL LIVE CTA ============ */
#bkk-demo .lcx-live{position:relative;overflow:hidden;border-radius:20px;margin-top:8px;background:linear-gradient(115deg,#2a0d18 0%,#57102a 55%,#8f1338 100%);padding:26px 20px;display:flex;flex-direction:column;gap:14px}
#bkk-demo .lcx-live::before{content:"";position:absolute;inset:0;background:radial-gradient(500px 180px at 85% -20%,rgba(255,55,92,.35) 0%,transparent 70%);pointer-events:none}
#bkk-demo .lcx-live .lv-tag{display:inline-flex;align-items:center;gap:8px;font:800 11px var(--body);letter-spacing:.14em;color:#ffb3c4}
#bkk-demo .lcx-live .lv-title{font-family:var(--disp);font-weight:600;font-size:24px;line-height:1.1;letter-spacing:-.01em;color:#fff;margin:0;position:relative}
#bkk-demo .lcx-live .lv-sub{font:400 13.5px/1.5 var(--body);color:#f0c9d4;margin:0;position:relative}
#bkk-demo .lcx-live .lv-cta{position:relative;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:12px;font:800 13.5px var(--body);letter-spacing:.05em;background:linear-gradient(90deg,var(--accent),#ff5a7e);color:#fff;box-shadow:0 10px 26px rgba(232,18,61,.4);transition:transform .15s ease,filter .15s ease}
#bkk-demo .lcx-live .lv-cta:hover{transform:translateY(-1px);filter:brightness(1.06);color:#fff}

/* ============ DETAIL PAGE (review) — lcd- prefix ============ */
/* --- hero photo collage: the platform IS the visual --- */
#bkk-demo .lcd-collage{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:110px;gap:8px;margin-top:14px;border-radius:20px;overflow:hidden}
#bkk-demo .lcd-collage a{position:relative;display:block;overflow:hidden}
#bkk-demo .lcd-collage img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
#bkk-demo .lcd-collage a:hover img{transform:scale(1.05)}
#bkk-demo .lcd-collage .c0{grid-column:1/-1;grid-row:span 2}
#bkk-demo .lcd-collage.n1 .c0{grid-row:span 3}
#bkk-demo .c-live{position:absolute;top:10px;left:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:18px;background:rgba(18,10,15,.72);backdrop-filter:blur(4px);color:#fff;font:800 10.5px var(--body);letter-spacing:.1em}
#bkk-demo .c-live .lcx-dot{box-shadow:none}
#bkk-demo .c-more{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(18,10,15,.55);color:#fff;font:800 15px var(--body)}
#bkk-demo .lcd-hero-card{display:flex;flex-direction:column;gap:14px;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:16px;margin-top:14px;box-shadow:0 8px 26px rgba(34,20,32,.06)}
#bkk-demo .lcd-hero-card.is-over{margin:-40px 10px 0;position:relative;z-index:2;box-shadow:0 14px 40px rgba(34,20,32,.16)}
/* --- variant switcher (preview-only control) --- */
#bkk-demo .lcd-variants{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:12px}
#bkk-demo .lcd-variants .lb{font:800 10.5px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
#bkk-demo .lcd-variants a{padding:7px 13px;border-radius:20px;border:1px solid var(--line);background:var(--paper);font:700 12px var(--body);color:var(--ink-soft)}
#bkk-demo .lcd-variants a.on{background:var(--accent);border-color:var(--accent);color:#fff}
#bkk-demo .lcd-variants a:not(.on):hover{border-color:var(--accent);color:var(--accent-deep)}
/* --- v2: portrait carousel — photos keep a 4:5 frame, no face crops --- */
#bkk-demo .lcd-carousel{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 24px 10px;margin:14px -24px 0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
#bkk-demo .lcd-carousel::-webkit-scrollbar{display:none}
#bkk-demo .lcd-carousel a{position:relative;flex:0 0 74%;max-width:330px;aspect-ratio:4/5;border-radius:18px;overflow:hidden;scroll-snap-align:center;display:block}
#bkk-demo .lcd-carousel img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
#bkk-demo .lcd-carousel a:hover img{transform:scale(1.04)}
/* --- v3: cinema stage — blurred fill behind the uncropped photo --- */
#bkk-demo .lcd-stage{position:relative;border-radius:20px;overflow:hidden;margin-top:14px;display:flex;align-items:center;justify-content:center;padding:22px 16px;background:#1a0d14}
#bkk-demo .lcd-stage .st-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(28px) saturate(1.2);transform:scale(1.2);opacity:.8}
#bkk-demo .lcd-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,10,15,.10) 40%,rgba(18,10,15,.45))}
#bkk-demo .lcd-stage .st-main{position:relative;z-index:1;max-width:100%;max-height:440px;border-radius:14px;box-shadow:0 18px 50px rgba(10,5,8,.55)}
#bkk-demo .lcd-stage .c-live{z-index:2}
#bkk-demo .lcd-stage .st-count{position:absolute;right:12px;bottom:12px;z-index:2;padding:5px 11px;border-radius:16px;background:rgba(18,10,15,.72);color:#fff;font:700 11.5px var(--body)}
/* --- v4: portrait trio — the city-v2 3:4 card language --- */
#bkk-demo .lcd-trio{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
#bkk-demo .lcd-trio a{position:relative;aspect-ratio:3/4;border-radius:16px;overflow:hidden;display:block}
#bkk-demo .lcd-trio a.t0{grid-column:1/-1;aspect-ratio:4/5}
#bkk-demo .lcd-trio img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
#bkk-demo .lcd-trio a:hover img{transform:scale(1.05)}
#bkk-demo .lcd-trio .shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(18,10,15,.45))}
#bkk-demo .lcd-idrow{display:flex;align-items:center;gap:13px}
#bkk-demo .lcd-logo{width:64px;height:64px;border-radius:16px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none;box-shadow:0 3px 10px rgba(34,20,32,.08)}
#bkk-demo .lcd-logo img{max-width:82%;max-height:82%;object-fit:contain}
#bkk-demo .lcd-score-big{display:flex;align-items:baseline;gap:8px}
#bkk-demo .lcd-score-big .n{font-family:var(--disp);font-weight:600;font-size:34px;line-height:1;color:var(--ink)}
#bkk-demo .lcd-score-big .d{font:600 13px var(--body);color:var(--muted)}
#bkk-demo .lcd-score-big .st{color:var(--gold-2);font-size:13px;letter-spacing:2px}
#bkk-demo .lcd-facts{display:flex;flex-wrap:wrap;gap:7px}
#bkk-demo .lcd-fact{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:20px;background:var(--paper-tint);border:1px solid var(--line);font:600 12px var(--body);color:var(--ink-soft)}
#bkk-demo .lcd-cta-row{display:flex;flex-direction:column;gap:8px}
#bkk-demo .lcd-cta-note{text-align:center;font:400 12px var(--body);color:var(--muted)}
#bkk-demo .lcd-axes{display:flex;flex-direction:column;gap:11px;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:16px;margin-top:14px}
#bkk-demo .lcd-axis .ax-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
#bkk-demo .lcd-axis .ax-name{font:600 12.5px var(--body);color:var(--ink-soft)}
#bkk-demo .lcd-axis .ax-val{font:700 12.5px var(--body);color:var(--accent-deep)}
#bkk-demo .lcd-axis .ax-track{height:7px;border-radius:5px;background:var(--paper-tint);border:1px solid var(--line);overflow:hidden}
#bkk-demo .lcd-axis .ax-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--accent),#ff5a7e)}
#bkk-demo .lcd-axis.is-first .ax-fill{background:linear-gradient(90deg,var(--gold-1),var(--gold-2))}
#bkk-demo .lcd-gallery{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 24px 12px;margin:12px -24px 0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
#bkk-demo .lcd-gallery::-webkit-scrollbar{display:none}
#bkk-demo .lcd-gallery img{scroll-snap-align:start;flex:0 0 74%;max-width:320px;aspect-ratio:16/10;object-fit:cover;border-radius:14px;border:1px solid var(--line)}
#bkk-demo .lcd-specs{display:grid;grid-template-columns:1fr;gap:8px;margin-top:12px}
#bkk-demo .lcd-spec{display:flex;flex-direction:column;gap:3px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:11px 13px}
#bkk-demo .lcd-spec .k{font:800 10.5px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
#bkk-demo .lcd-spec .v{font:600 13.5px/1.35 var(--body);color:var(--ink)}
#bkk-demo .lcd-pc{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px}
#bkk-demo .lcd-pc-col{border-radius:16px;padding:14px 15px;border:1px solid var(--line)}
#bkk-demo .lcd-pc-col.is-pros{background:#f4fbf6;border-color:#d8eede}
#bkk-demo .lcd-pc-col.is-cons{background:#fdf6f5;border-color:#f3ded9}
#bkk-demo .lcd-pc-col .pc-h{font:800 11px var(--body);letter-spacing:.12em;text-transform:uppercase;margin:0 0 9px}
#bkk-demo .lcd-pc-col.is-pros .pc-h{color:#1f7a3d}
#bkk-demo .lcd-pc-col.is-cons .pc-h{color:#b3402f}
#bkk-demo .lcd-pc-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
#bkk-demo .lcd-pc-col li{display:flex;gap:8px;font:400 13px/1.45 var(--body);color:var(--ink-soft)}
#bkk-demo .lcd-pc-col li::before{flex:none;font-weight:800;font-size:12px}
#bkk-demo .lcd-pc-col.is-pros li::before{content:"\2713";color:#1f7a3d}
#bkk-demo .lcd-pc-col.is-cons li::before{content:"\2715";color:#b3402f}
/* --- other-cams photo cards --- */
#bkk-demo .lcd-ocards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
#bkk-demo .lcd-ocard{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
#bkk-demo .lcd-ocard:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(34,20,32,.12);border-color:#ecc9d6}
#bkk-demo .lcd-ocard .oc-ph{position:relative;aspect-ratio:16/10;background:var(--paper-tint);overflow:hidden}
#bkk-demo .lcd-ocard .oc-ph img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
#bkk-demo .lcd-ocard:hover .oc-ph img{transform:scale(1.06)}
#bkk-demo .lcd-ocard .oc-logo{position:absolute;bottom:8px;left:8px;width:34px;height:34px;border-radius:9px;background:#fff;border:1px solid rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 3px 10px rgba(18,10,15,.25)}
#bkk-demo .lcd-ocard .oc-logo img{max-width:80%;max-height:80%;object-fit:contain}
#bkk-demo .lcd-ocard .oc-bd{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px}
#bkk-demo .lcd-ocard .oc-nm{font:700 13.5px/1.2 var(--body);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bkk-demo .lcd-ocard:hover .oc-nm{color:var(--accent-deep)}
#bkk-demo .lcd-ocard .oc-sc{flex:none;font:700 12px var(--body);color:var(--accent-deep)}
#bkk-demo .lcd-ocard .oc-sc .sr{color:var(--gold-2);font-size:9.5px}
/* --- photo background on the final CTA --- */
#bkk-demo .lcx-live.has-photo{background:#2a0d18}
#bkk-demo .lcx-live .lv-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.38;filter:saturate(1.1)}
#bkk-demo .lcx-live.has-photo::before{background:linear-gradient(100deg,rgba(30,8,18,.92) 20%,rgba(66,10,32,.55) 60%,rgba(143,19,56,.35) 100%)}
#bkk-demo .lcx-live .lv-tag,#bkk-demo .lcx-live .lv-title,#bkk-demo .lcx-live .lv-sub{position:relative}
#bkk-demo .lcd-verdict{background:linear-gradient(180deg,var(--gold-pale),var(--paper));border:1.5px solid var(--gold-line);border-radius:18px;padding:18px 16px;margin-top:14px}
#bkk-demo .lcd-verdict .vd-h{font:800 11px var(--body);letter-spacing:.14em;color:var(--gold-ink);margin:0 0 8px}
#bkk-demo .lcd-verdict p{font:400 14px/1.62 var(--body);color:var(--ink-soft);margin:0 0 10px}
#bkk-demo .lcd-verdict p:last-child{margin-bottom:0}
@media (min-width:768px){
  #bkk-demo .lcd-carousel{margin:14px 0 0;padding:4px 0 10px}
  #bkk-demo .lcd-carousel a{flex:0 0 300px}
  #bkk-demo .lcd-stage{padding:30px 24px}
  #bkk-demo .lcd-stage .st-main{max-height:520px}
  #bkk-demo .lcd-trio{grid-template-columns:repeat(3,1fr);gap:12px}
  #bkk-demo .lcd-trio a.t0{grid-column:auto;aspect-ratio:3/4}
  #bkk-demo .lcd-collage{grid-template-columns:2fr 1fr 1fr;grid-auto-rows:150px;gap:10px}
  #bkk-demo .lcd-collage .c0{grid-column:1;grid-row:span 2}
  #bkk-demo .lcd-collage.n2 .c0{grid-column:1/3}
  #bkk-demo .lcd-collage.n1 .c0{grid-column:1/-1;grid-row:span 2}
  #bkk-demo .lcd-hero-card{flex-direction:row;align-items:center;justify-content:space-between;gap:24px;padding:22px 24px}
  #bkk-demo .lcd-hero-card.is-over{margin:-52px 28px 0}
  #bkk-demo .lcd-cta-row{min-width:250px}
  #bkk-demo .lcd-ocards{grid-template-columns:repeat(3,1fr);gap:14px}
  #bkk-demo .lcd-axes{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;padding:22px 24px}
  #bkk-demo .lcd-gallery{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible;margin:12px 0 0;padding:4px 0}
  #bkk-demo .lcd-gallery img{flex:auto;max-width:none;width:100%}
  #bkk-demo .lcd-specs{grid-template-columns:repeat(2,1fr);gap:10px}
  #bkk-demo .lcd-pc{grid-template-columns:1fr 1fr;gap:14px}
  #bkk-demo .lcd-verdict{padding:24px 28px}
}
@media (min-width:1080px){
  #bkk-demo .lcd-specs{grid-template-columns:repeat(4,1fr)}
}

/* ============ ENTRY ANIMATION (subtle, once) ============ */
@media (prefers-reduced-motion:no-preference){
  #bkk-demo .lcx-pod{animation:lcxUp .45s ease backwards}
  #bkk-demo .lcx-pod:nth-child(2){animation-delay:.06s}
  #bkk-demo .lcx-pod:nth-child(3){animation-delay:.12s}
  @keyframes lcxUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}

/* ============ TABLET AND UP ============ */
@media (min-width:768px){
  #bkk-demo .lcx-podium{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start;margin-top:26px}
  #bkk-demo .lcx-pod{padding:22px 20px 20px}
  #bkk-demo .lcx-pod.is-best{order:0;transform:translateY(-8px)}
  #bkk-demo .lcx-pod.is-best:hover{transform:translateY(-10px)}
  #bkk-demo .lcx-pod-badge{left:50%;transform:translateX(-50%)}
  #bkk-demo .lcx-tiles{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
  #bkk-demo .lcx-rail{flex-wrap:wrap;overflow:visible;margin:0;padding:4px 0 8px}
  #bkk-demo .lcx-blogs{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible;margin:12px 0 0;padding:4px 0}
  #bkk-demo .lcx-blog{flex:auto;max-width:none}
  #bkk-demo .lcx-hub{padding:24px 24px;gap:20px}
  #bkk-demo .lcx-live{padding:36px 40px}
  #bkk-demo .lcx-live .lv-title{font-size:30px}
}