/* ==========================================================================
   918Kiss Malaysia — Design Tokens
   Direction: Neon Carnival · Purple-Magenta-Gold (grounded in real brand
   assets — logo.png / background.jpg — not an invented palette).
   Type: Fredoka (display) · Outfit (body) · DM Mono (data/labels)
   ========================================================================== */

:root{
  /* color */
  --void:#0b0518;
  --surface:#180c33;
  --surface-2:#241247;
  --surface-border:#3a2569;
  --accent:#ff2f8f;           /* glows, links, focus rings, decorative */
  --accent-solid:#c8106b;     /* solid CTA fill — passes AA vs white text */
  --accent-solid-hi:#e0177a;  /* hover */
  --gold:#f3c14d;
  --gold-dim:#c9973a;
  --ink:#f6f2fb;
  --muted:#ad9ecb;
  --muted-2:#8577a3;
  --line: rgba(246,242,251,.12);

  /* type */
  --font-display:'Fredoka', 'Outfit', system-ui, sans-serif;
  --font-body:'Outfit', system-ui, sans-serif;
  --font-mono:'DM Mono', ui-monospace, monospace;

  /* scale */
  --radius-sm:10px;
  --radius-md:18px;
  --radius-lg:28px;
  --radius-pill:999px;
  --gutter:20px;
  --max:1200px;

  --shadow-soft:0 20px 50px -20px rgba(8,3,20,.65);
  --shadow-cta:0 16px 32px -12px rgba(8,3,20,.7);

  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
main :where(p,li,td,figcaption) a{
  color:var(--accent-solid-hi);
  font-weight:600;
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-underline-offset:3px;
}
main :where(p,li,td,figcaption) a:hover{
  color:var(--accent);
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;font-weight:600;letter-spacing:-.01em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
section{position:relative}

.container{
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:6px;
}

/* film-grain texture, fixed & subtle, ties the whole page together */
.grain{
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:overlay;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
}
.eyebrow::before{
  content:'';
  width:6px;height:6px;border-radius:50%;
  background:var(--gold);
}

.eyebrow-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 18px 8px 8px;
  border-radius:var(--radius-pill);
  background:rgba(246,242,251,.06);
  border:1px solid var(--line);
  backdrop-filter:blur(10px);
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.eyebrow-pill img{width:22px;height:22px;border-radius:50%;object-fit:cover}

/* ==========================================================================
   Buttons — 5-tier hierarchy. Accent-solid is the ONLY primary CTA color.
   ========================================================================== */

.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:0 26px;
  border-radius:var(--radius-pill);
  font-family:var(--font-body);
  font-weight:600;
  font-size:1rem;
  white-space:nowrap;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .25s ease;
}
.btn svg{width:18px;height:18px;flex:none}

.btn-primary{
  background:linear-gradient(135deg,var(--accent-solid-hi),var(--accent-solid));
  color:#fff;
  box-shadow:var(--shadow-cta);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 44px -14px rgba(8,3,20,.8)}
.btn-primary:active{transform:translateY(0)}

.btn-ghost{
  background:rgba(246,242,251,.05);
  border:1px solid var(--line);
  color:var(--ink);
  backdrop-filter:blur(8px);
}
.btn-ghost:hover{background:rgba(246,242,251,.1);border-color:rgba(246,242,251,.25)}

.btn-outline{
  background:transparent;
  border:1px solid var(--surface-border);
  color:var(--muted);
}
.btn-outline:hover{border-color:var(--gold);color:var(--gold)}

.btn-store{
  background:var(--surface-2);
  border:1px solid var(--surface-border);
  color:var(--ink);
  min-height:44px;
  padding:0 18px;
  font-size:.875rem;
}
.btn-store:hover{border-color:var(--muted-2)}
.btn-store small{display:block;font-size:.75rem;color:var(--muted);font-weight:400}

.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  border-radius:50%;
  background:rgba(246,242,251,.06);
  border:1px solid var(--line);
  transition:background .25s ease, transform .3s var(--ease);
}
.icon-btn:hover{transform:translateY(-2px)}
.icon-btn svg{width:20px;height:20px}
.icon-btn.wa:hover{background:#25D366;border-color:#25D366}
.icon-btn.tg:hover{background:#229ED9;border-color:#229ED9}

.btn-sm{min-height:38px;padding:0 16px;font-size:.875rem}

/* ==========================================================================
   Header / pill nav
   ========================================================================== */

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  padding:16px var(--gutter) 0;
}
.nav-pill{
  max-width:var(--max);
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 10px 10px 18px;
  border-radius:var(--radius-pill);
  background:rgba(11,5,24,.6);
  border:1px solid var(--line);
  backdrop-filter:blur(16px) saturate(140%);
  box-shadow:var(--shadow-soft);
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:1rem;
}
.brand img{height:30px;width:auto}

.nav-links{
  display:none;
  align-items:center;
  gap:28px;
  font-size:.875rem;
  color:var(--muted);
}
.nav-links a{transition:color .2s ease}
.nav-links a:hover{color:var(--ink)}

.nav-actions{display:flex;align-items:center;gap:8px}
.nav-actions .icon-btn svg{width:18px;height:18px}
.nav-play{display:none;min-height:44px}

.hamburger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  border-radius:50%;
  background:rgba(246,242,251,.06);
  border:1px solid var(--line);
}
.hamburger svg{width:20px;height:20px}

.mobile-drawer{
  position:fixed;
  inset:0;
  z-index:60;
  background:rgba(8,3,18,.7);
  backdrop-filter:blur(6px);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}
.mobile-drawer.open{opacity:1;pointer-events:auto}
.mobile-drawer-panel{
  position:absolute;
  top:16px;right:16px;left:16px;
  background:var(--surface);
  border:1px solid var(--surface-border);
  border-radius:var(--radius-lg);
  padding:22px;
  transform:translateY(-16px);
  opacity:0;
  transition:transform .35s var(--ease), opacity .35s var(--ease);
}
.mobile-drawer.open .mobile-drawer-panel{transform:translateY(0);opacity:1}
.mobile-drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.mobile-drawer nav{display:flex;flex-direction:column;gap:4px;margin-bottom:20px}
.mobile-drawer nav a{
  padding:14px 6px;
  border-bottom:1px solid var(--line);
  font-size:1rem;
  min-height:44px;
  display:flex;
  align-items:center;
}
.mobile-drawer-actions{display:flex;gap:10px}
.mobile-drawer-actions .btn{flex:1}

/* ==========================================================================
   Floating quick-action buttons (right side, vertically centered)
   ========================================================================== */

.floating-actions{
  position:fixed;
  top:50%;
  right:16px;
  transform:translateY(-50%);
  z-index:56;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.floating-actions .icon-btn.fab{
  width:58px;height:58px;
  background:rgba(11,5,24,.75);
  backdrop-filter:blur(10px);
  box-shadow:var(--shadow-soft);
}
.floating-actions .icon-btn.fab svg{width:26px;height:26px}
.floating-actions .icon-btn.fab.wa{background:#25D366;border-color:#25D366;color:#fff}
.floating-actions .icon-btn.fab.wa:hover{background:#1ebe5b;border-color:#1ebe5b}
.floating-actions .icon-btn.fab.tg{background:#229ED9;border-color:#229ED9;color:#fff}
.floating-actions .icon-btn.fab.tg:hover{background:#1c88bd;border-color:#1c88bd}
.floating-actions .icon-btn.fab.play{background:var(--gold);border-color:var(--gold)}
.floating-actions .icon-btn.fab.play svg{color:#0b0518}
.floating-actions .icon-btn.fab.play:hover{background:var(--gold-dim);border-color:var(--gold-dim)}

@media (max-width:480px){
  .floating-actions{right:10px;gap:10px}
  .floating-actions .icon-btn.fab{width:52px;height:52px}
  .floating-actions .icon-btn.fab svg{width:24px;height:24px}
}

@media (min-width:900px){
  .nav-links{display:flex}
  .nav-play{display:inline-flex}
  .hamburger{display:none}
}

/* ==========================================================================
   Hero — full-bleed real character art + minimal centered-left copy
   ========================================================================== */

.hero{
  position:relative;
  min-height:88svh;
  display:flex;
  align-items:flex-end;
  padding-top:24px;
  overflow:hidden;
}
.hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
}
.hero-bg img{
  width:100%;height:100%;object-fit:cover;object-position:center 30%;
}
.hero-bg::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, var(--void) 0%, rgba(11,5,24,.88) 32%, rgba(11,5,24,.35) 60%, rgba(11,5,24,.15) 100%),
    linear-gradient(0deg, var(--void) 0%, rgba(11,5,24,.15) 32%, transparent 60%);
}

.hero-arc{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:visible;
}
.hero-arc path{
  fill:none;
  stroke:url(#cometGradient);
  stroke-width:2.5;
  stroke-linecap:round;
  filter:drop-shadow(0 0 10px rgba(243,193,77,.7));
}

.hero-inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gutter);
  padding-bottom:72px;
}
.hero-copy{max-width:620px}
.hero .hero-kicker{
  font-size:clamp(3.0rem, 5vw, 5.1rem);
  font-weight:600;
  color:var(--gold);
  margin-bottom:14px;
  letter-spacing:.01em;
}
.hero .hero-headline{
  display:block;
  font-size:clamp(1.7rem, 6vw, 2.5rem);
  line-height:1.05;
  margin-bottom:20px;
}
.hl{
  display:inline-block;
  font-style:normal;
  color:var(--void);
  background:var(--gold);
  padding:.02em .16em;
  border-radius:6px;
  transform:rotate(-2deg);
}
.hero .lede{
  font-size:1.25rem;
  line-height:1.5;
  color:var(--muted);
  max-width:52ch;
  margin-bottom:14px;
}
.hero .lede-2{
  font-size:1rem;
  color:var(--muted-2);
  max-width:54ch;
  margin-bottom:32px;
}

#hero-cta{
  flex-wrap:wrap;
  gap:14px;
}
.hero-cta-desktop{display:none}
.hero-cta-mobile{display:flex}

@media (min-width:900px){
  .hero-cta-desktop{display:inline-flex}
  .hero-cta-mobile{display:none}
}

/* Small phones (≤400px wide) — tighten hero rhythm so the primary CTA
   doesn't get crowded off the first screen by the stacked copy. */
@media (max-width:400px){
  .hero{padding-top:16px}
  .hero-inner{padding-bottom:32px}
  .hero .hero-kicker{margin-bottom:10px}
  .hero .hero-headline{margin-bottom:14px}
  .hero .lede{margin-bottom:10px}
}

/* Short phones (≤700px tall, e.g. small Android / older iPhone SE) — the
   secondary lede line is the first thing to give so "Download 918Kiss"
   stays reachable without scrolling. Content stays in the DOM for SEO
   and screen readers, just hidden visually here. */
@media (max-height:700px) and (max-width:480px){
  .hero{min-height:auto}
  .hero .lede-2{display:none}
}

.hero-alt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ==========================================================================
   Sticky mobile action bar
   ========================================================================== */

.sticky-bar{
  position:fixed;
  left:12px;right:12px;
  bottom:12px;
  z-index:55;
  display:flex;
  gap:10px;
  padding:10px;
  border-radius:var(--radius-pill);
  background:rgba(11,5,24,.85);
  border:1px solid var(--line);
  backdrop-filter:blur(16px);
  box-shadow:var(--shadow-soft);
  transform:translateY(140%);
  transition:transform .4s var(--ease);
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
}
.sticky-bar.visible{transform:translateY(0)}
.sticky-bar .btn-primary{flex:1}
@media (min-width:900px){.sticky-bar{display:none}}

/* ==========================================================================
   Section rhythm
   ========================================================================== */

.section{padding:100px 0}
.section-tight{padding:72px 22px}
.section-head{margin-bottom:48px}
.section-head h2{font-size:clamp(1.9rem,4vw,2.7rem);line-height:1.08;margin:14px 0 16px}
.section-head p{color:var(--muted);font-size:1.25rem;line-height:1.5}
.section-head.center{margin-inline:auto;text-align:center}

.divider{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}

/* ---- Editorial ("Made to feel familiar") ---- */
.editorial{gap:40px}
.editorial-copy p{color:var(--muted);margin-bottom:18px;font-size:1.25rem;line-height:1.5;}
.editorial-copy p:last-child{margin-bottom:0}
.editorial-media{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--surface-border);
  background:var(--surface);
}
.editorial-media img{width:100%;height:auto;filter:saturate(1.05)}
.editorial-media figcaption{
  padding:14px 18px;
  font-family:var(--font-mono);
  font-size:.75rem;
  color:var(--muted);
  border-top:1px solid var(--line);
}
@media (min-width:860px){
  .editorial{align-items:center;gap:64px}
}

/* ---- Feature trio ---- */
.feature-grid{display:grid;gap:20px}
@media (min-width:760px){.feature-grid{grid-template-columns:repeat(3,1fr)}}
.feature-card{
  padding:32px 26px;
  border-radius:var(--radius-md);
  background:var(--surface);
  border:1px solid var(--surface-border);
  transition:border-color .3s ease, transform .3s var(--ease);
}
.feature-card:hover{border-color:var(--accent);transform:translateY(-4px)}
.feature-card .num{
  font-family:var(--font-mono);
  color:var(--gold);
  font-size:.75rem;
  letter-spacing:.1em;
}
.feature-card .icon-wrap{
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  border-radius:14px;
  background:rgba(255,47,143,.1);
  margin:18px 0 20px;
}
.feature-card .icon-wrap svg{width:24px;height:24px;color:var(--accent)}
.feature-card h3{font-size:1.25rem;margin-bottom:10px}
.feature-card p{color:var(--muted);font-size:1rem;margin-bottom:12px}
.feature-card p:last-child{margin-bottom:0}

/* ---- Bento games grid ---- */
.bento{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:820px){
  .bento{grid-template-columns:1.3fr 1fr;grid-template-rows:auto auto}
  .bento .tile-slots{grid-row:1 / 3}
}
.tile{
  position:relative;
  border-radius:var(--radius-lg);
  padding:34px;
  border:1px solid var(--surface-border);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:260px;
}
.tile::before{
  content:'';
  position:absolute;inset:0;
  opacity:.5;
  z-index:0;
}
.tile > *{position:relative;z-index:1}
.tile-slots{background:radial-gradient(120% 140% at 20% 0%, #3a1a5e 0%, var(--surface) 60%);min-height:340px}
.tile-fishing{background:radial-gradient(120% 140% at 80% 0%, #123a4a 0%, var(--surface) 60%)}
.tile-casino{background:radial-gradient(120% 140% at 20% 100%, #3a2410 0%, var(--surface) 60%)}
.tile .tile-icon{width:52px;height:52px;margin-bottom:18px}
.tile .tile-icon svg{width:100%;height:100%}
.tile h3{font-size:1.5rem;margin-bottom:10px}
.tile p{color:var(--muted);font-size:1rem;max-width:48ch;margin-bottom:12px}
.tile p:last-child{margin-bottom:0}
.tile .tag{
  position:absolute;top:24px;right:24px;
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.1em;
  color:var(--muted-2);
  text-transform:uppercase;
}

/* ---- Closing CTA ---- */
.closing{
  position:relative;
  border-radius:var(--radius-lg);
  padding:64px 32px;
  text-align:center;
  overflow:hidden;
  background:linear-gradient(160deg, var(--surface-2), var(--surface));
  border:1px solid var(--surface-border);
}
.closing::before{
  content:'';
  position:absolute;
  width:480px;height:480px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,47,143,.25), transparent 70%);
  top:-160px;left:50%;
  transform:translateX(-50%);
  z-index:0;
}
.closing > *{position:relative;z-index:1}
.closing h2{font-size:clamp(2rem,5vw,2.8rem);margin-bottom:16px;max-width:18ch;margin-inline:auto}
.closing p{color:var(--muted);max-width:56ch;margin:0 auto 32px}
.closing .cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer{padding:72px 22px 32px;border-top:1px solid var(--line);margin-top:40px}
.footer-top{display:grid;gap:40px;margin-bottom:48px}
.footer-brand{max-width:320px}
.footer-brand .brand{margin-bottom:14px}
.footer-brand p{color:var(--muted);font-size:.875rem}
.footer-cols{display:grid;grid-template-columns:1fr;gap:32px}
.footer-col h3{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:16px;font-weight:500}
.footer-col ul{display:flex;flex-direction:column;gap:12px}
.footer-col a{color:var(--muted);font-size:.875rem;transition:color .2s ease}
.footer-col a:hover{color:var(--ink)}
.footer-contact{display:flex;flex-direction:column;gap:10px}
.contact-card{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;
  border-radius:var(--radius-md);
  background:var(--surface);
  border:1px solid var(--surface-border);
  min-height:44px;
}
.contact-card svg{width:20px;height:20px;flex:none}
.contact-card span{font-size:.875rem;color:var(--muted)}
.contact-card strong{display:block;font-size:.875rem;color:var(--ink)}

@media (min-width:760px){
  .footer-top{grid-template-columns:1.2fr repeat(3,1fr)}
  .footer-cols{grid-template-columns:repeat(3,1fr)}
}

.footer-compliance{
  padding:20px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-bottom:24px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  font-size:.875rem;
  color:var(--muted-2);
}
.footer-compliance .badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;
  border-radius:var(--radius-pill);
  border:1px solid var(--surface-border);
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.04em;
}
.footer-legal{font-size:.875rem;color:var(--muted-2);line-height:1.7}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:24px;font-size:.875rem;color:var(--muted-2)}

/* ==========================================================================
   Content pages (guides, download, install-help — documentation register)
   ========================================================================== */

.breadcrumb{
  display:flex;align-items:center;gap:8px;
  padding:20px 0 0;
  font-size:.875rem;
  color:var(--muted-2);
}
.breadcrumb a{color:var(--muted);transition:color .2s ease;padding:10px 0;margin:-10px 0}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb svg{width:14px;height:14px;flex:none}
.breadcrumb .current{color:var(--ink)}

.page-hero{
  position:relative;
  min-height:56svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.page-hero > .container{position:relative;z-index:2;width:100%;padding-block:48px 56px}
.page-hero h1{font-size:clamp(2.1rem,5vw,3.2rem);line-height:1.08;margin-bottom:20px;max-width:20ch}
.page-hero .lede{color:var(--muted);font-size:1.25rem;line-height:1.5;max-width:64ch;margin-bottom:14px}
.page-hero .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}

@media (max-width:640px){
  /* Mobile wraps the intro copy onto more lines than desktop, which used
     to stretch the full-bleed image (align-items:flex-end + hero-bg
     inset:0) as tall as all that text. Cap the image to a fixed band and
     top-align the copy instead, so only the heading sits on the artwork
     and any extra lede paragraphs flow onto the plain background below
     it — the page-hero band shrinks back down to a normal size. */
  .page-hero{
    min-height:auto;
    align-items:flex-start;
  }
  .page-hero .hero-bg{
    bottom:auto;
    height:46svh;
    min-height:260px;
  }
  .page-hero > .container{padding-block:40px 32px}
  .page-hero h1{margin-bottom:14px}
  .page-hero .lede{margin-bottom:10px}
}

.content-section{padding:64px 0;border-top:1px solid var(--line)}
.content-section .section-head{margin-bottom:32px}
.content-section .section-head p{color:var(--muted);font-size:1rem;max-width:66ch}
.content-block{max-width:74ch}
.content-block p{color:var(--muted);margin-bottom:16px}
.content-block p:last-child{margin-bottom:0}
.content-block h3{font-size:1.25rem;margin:0 0 14px}

/* device table */
.device-table{
  width:100%;
  border-collapse:collapse;
  background:var(--surface);
  border:1px solid var(--surface-border);
  border-radius:var(--radius-md);
  overflow:hidden;
  margin:28px 0;
}
.device-table th,.device-table td{
  text-align:left;
  padding:16px 20px;
  border-bottom:1px solid var(--surface-border);
  font-size:1rem;
}
.device-table thead th{
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:500;
  background:var(--surface-2);
}
.device-table tbody tr:last-child td{border-bottom:none}
.device-table td.device-name{display:flex;align-items:center;gap:12px;color:var(--ink);font-weight:500}
.device-table td.device-name svg{width:22px;height:22px;flex:none;color:var(--gold)}

/* callout / note */
.callout{
  display:flex;gap:14px;
  padding:18px 22px;
  border-radius:var(--radius-md);
  background:rgba(243,193,77,.06);
  border:1px solid rgba(243,193,77,.25);
  font-size:.875rem;
  color:var(--muted);
  margin:24px 0;
}
.callout svg{width:20px;height:20px;flex:none;color:var(--gold);margin-top:2px}
.callout.warn{background:rgba(255,47,143,.06);border-color:rgba(255,47,143,.3)}
.callout.warn svg{color:var(--accent)}
.callout p{margin:0}
.callout p + p{margin-top:8px}

/* numbered step list */
.steps{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;counter-reset:step}
.steps li{
  position:relative;
  display:flex;
  gap:18px;
  padding:20px 4px;
  border-bottom:1px solid var(--line);
}
.steps li:last-child{border-bottom:none}
.steps li::before{
  counter-increment:step;
  content:counter(step, decimal-leading-zero);
  flex:none;
  font-family:var(--font-mono);
  font-size:.75rem;
  color:var(--gold);
  padding-top:2px;
  width:28px;
}
.steps li p{margin:0;color:var(--muted);font-size:1rem}
.steps li strong{color:var(--ink)}

/* checklist */
.checklist{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.checklist li{display:flex;gap:12px;align-items:flex-start;color:var(--muted);font-size:1rem}
.checklist li svg{width:20px;height:20px;flex:none;color:var(--accent-solid-hi);margin-top:1px}

/* accordion (native details/summary) */
.accordion{display:flex;flex-direction:column;gap:12px}
.accordion details{
  background:var(--surface);
  border:1px solid var(--surface-border);
  border-radius:var(--radius-md);
  padding:4px 22px;
}
.accordion summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 0;
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.25rem;
  line-height:1.5;
  color:var(--ink);
  cursor:pointer;
  list-style:none;
}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary .chevron{width:20px;height:20px;flex:none;color:var(--muted-2);transition:transform .3s var(--ease)}
.accordion details[open] summary .chevron{transform:rotate(180deg)}
.accordion .accordion-body{padding:0 0 22px;color:var(--muted);font-size:1rem}
.accordion .accordion-body p{margin:0 0 12px}
.accordion .accordion-body p:last-child{margin-bottom:0}

.two-col{display:grid;gap:20px}
@media (min-width:760px){.two-col{grid-template-columns:1fr 1fr;gap:40px}}

/* triage / options grid */
.options-grid{display:grid;gap:20px;margin-top:32px}
@media (min-width:760px){.options-grid{grid-template-columns:repeat(3,1fr)}}
.option-card{
  display:flex;flex-direction:column;
  padding:30px 26px;
  border-radius:var(--radius-md);
  background:var(--surface);
  border:1px solid var(--surface-border);
}
.option-card h2{font-size:1.25rem;margin-bottom:10px}
.option-card p{color:var(--muted);font-size:1rem;margin-bottom:20px;flex:1}
.option-card .option-actions{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.option-card .option-sub{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);margin:14px 0 4px}
.option-card .btn{width:100%}

/* chat-message sample */
.message-sample{
  display:flex;gap:14px;
  align-items:flex-start;
  padding:16px 20px;
  border-radius:var(--radius-md) var(--radius-md) var(--radius-md) 4px;
  background:rgba(37,211,102,.08);
  border:1px solid rgba(37,211,102,.25);
  margin:20px 0;
  max-width:52ch;
}
.message-sample svg{width:20px;height:20px;flex:none;color:#25D366;margin-top:2px}
.message-sample p{margin:0;color:var(--ink);font-style:italic;font-size:1rem}

/* pull quote */
.pull-quote{
  margin:28px 0;
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.4rem,3vw,1.8rem);
  line-height:1.35;
  color:var(--ink);
  max-width:32ch;
}

/* evaluation question list (distinct from .checklist — open questions, not confirmations) */
.eval-list{list-style:none;margin:20px 0;padding:0;display:flex;flex-direction:column;gap:10px}
.eval-list li{display:flex;gap:12px;color:var(--muted);font-size:1rem}
.eval-list li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--muted-2);flex:none;margin-top:9px}

/* "cannot tell you" limitation items */
.limit-list{display:flex;flex-direction:column;gap:28px;margin-top:32px}
.limit-item{display:flex;gap:18px}
.limit-item .limit-icon{
  width:38px;height:38px;flex:none;border-radius:50%;
  background:rgba(255,47,143,.1);
  display:flex;align-items:center;justify-content:center;
  color:var(--accent);
}
.limit-item .limit-icon svg{width:20px;height:20px}
.limit-item h3{font-size:1.25rem;margin-bottom:8px}
.limit-item p{color:var(--muted);margin-bottom:10px;max-width:70ch}
.limit-item p:last-child{margin-bottom:0}

/* formula diagram card (real branded graphic, not a recreated equation) */
.formula-card{
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--surface-border);
  margin:24px 0;
  max-width:74ch;
}
.formula-card img{width:100%;height:auto;display:block}

/* ==========================================================================
   Scroll reveal (generic, non-hero elements only)
   ========================================================================== */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease), transform .7s var(--ease)}
[data-reveal].in{opacity:1;transform:translateY(0)}

@media (max-width:640px){
  .section{padding:72px 22px}
  .footer-cols{grid-template-columns:1fr}
}

@media (max-width:899px){
  .site-footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}