/* ==========================================================
   PLAYABLE LAB — shared styles (all pages)
   Dark, bolt-style: logo left, centered nav, actions right
   ========================================================== */
:root{
  --bg: #1d1d1d;
  --panel: #292929;
  --panel-2: #303030;
  --glass: rgba(255,255,255,.045);
  --glass-2: rgba(255,255,255,.085);
  --line: #494949;
  --line-soft: #373737;
  --ink: #f4f4f4;
  --mute: #a3a3a3;
  --dim: #777777;
  --blue: #d0d0d0;
  --violet: #bdbdbd;
  --cyan: #e2e2e2;
  --grad: #e9e9e9;
  --radius: 0px;
  --radius-lg: 0px;
  --pill: 0px;
  --max-w: 1160px;
  --font: "Segoe UI", "Segoe UI Variable Text", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size:16px; line-height:1.6;
  -webkit-font-smoothing: antialiased; overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
.container{ max-width: var(--max-w); margin:0 auto; padding:0 24px; }

/* soft glow behind hero / page headers — flat bg only (no blur VFX) */
.glow{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background: var(--bg);
}

/* ================= NAVBAR — 3 zones ================= */
header.nav{
  position: sticky; top:0; z-index:90;
  background: rgba(11,11,14,.94);
  border-bottom: 1px solid var(--line-soft);
}
.nav-inner{
  max-width: 1280px; margin:0 auto; padding: 14px 24px;
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center;
}
.logo{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:18px; letter-spacing:-.02em; justify-self:start; }
.logo-mark{ width:22px; height:22px; border-radius:7px; background: var(--grad); }
nav.menu{ display:flex; gap:4px; justify-self:center; }
.menu > a, .menu-trigger{
  padding: 8px 14px; border-radius:10px;
  color: var(--mute); font-size:14.5px;
  background:none; border:none;
  display:flex; align-items:center; gap:6px;
  transition: color .15s, background .15s;
}
.menu > a:hover, .menu-trigger:hover,
.menu > a.active{ color: var(--ink); background: var(--glass); }
.caret{ font-size:10px; transition: transform .2s; }
.dropdown{ position:relative; }
.dropdown.open .caret{ transform: rotate(180deg); }
.dropdown-panel{
  position:absolute; top: calc(100% + 12px); left:50%; transform: translate(-50%, 8px);
  width: 560px;
  background: var(--panel);
  border:1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  padding:12px;
  display:grid; grid-template-columns:1fr 1fr; gap:4px;
  opacity:0; visibility:hidden;
  transition: opacity .18s, transform .18s, visibility .18s;
}
.dropdown.open .dropdown-panel{ opacity:1; visibility:visible; transform: translate(-50%, 0); }
.dd-item{ display:flex; gap:12px; padding:12px; border-radius:12px; transition: background .15s; }
.dd-item:hover{ background: var(--glass-2); }
.dd-icon{
  flex-shrink:0; width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:17px;
  background: linear-gradient(135deg, rgba(34,211,238,.15), rgba(139,92,246,.15));
  border:1px solid var(--line-soft);
}
.dd-item h5{ font-size:14px; margin-bottom:2px; }
.dd-item p{ font-size:12.5px; color: var(--dim); line-height:1.45; }
.nav-actions{ display:flex; gap:10px; justify-self:end; }

/* ================= BUTTONS ================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 10px 20px; border-radius:12px;
  font-size:14px; font-weight:600;
  border:1px solid transparent;
  transition: transform .15s, box-shadow .2s, background .15s, border-color .15s;
}
.btn:active{ transform: scale(.97); }
.btn-ghost{ background:transparent; color: var(--mute); }
.btn-ghost:hover{ color: var(--ink); background: var(--glass); }
.btn-light{ background:#f2f2f6; color:#101014; }
.btn-light:hover{ box-shadow: 0 8px 24px rgba(255,255,255,.14); }
.btn-grad{ background: var(--grad); color:#fff; }
.btn-grad:hover{ box-shadow: 0 8px 28px rgba(99,102,241,.45); }
.btn-outline{ background: var(--glass); border-color: var(--line); color: var(--ink); }
.btn-outline:hover{ background: var(--glass-2); }

/* ================= HERO + CHAT SIM ================= */
.hero{ text-align:center; padding: 90px 24px 40px; }
.hero h1{
  font-size: clamp(38px, 6.5vw, 72px);
  font-weight:800; letter-spacing:-.04em; line-height:1.04;
  margin-bottom:18px;
}
.hero h1 .hero-lead{
  font-size: .75em;
  display:inline-block;
}
.hero h1 .grad{ background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero .sub{ font-size: clamp(15px,2vw,18px); color: var(--mute); max-width:580px; margin:0 auto; }

.chat-sim{
  max-width: 760px; margin: 48px auto 0;
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: 20px;
  overflow:hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(59,130,246,.06);
  text-align:left;
}
.chat-head{
  display:flex; align-items:center; gap:8px;
  padding: 12px 16px;
  border-bottom:1px solid var(--line-soft);
  background: var(--panel-2);
}
.dot{ width:11px; height:11px; border-radius:50%; }
.dot.r{ background:#ff5f57; } .dot.y{ background:#febc2e; } .dot.g{ background:#28c840; }
.chat-head span{ margin-left:8px; font-size:12.5px; color: var(--dim); font-family: var(--mono); }
.chat-body{
  height: 340px; overflow:hidden;
  padding: 22px; display:flex; flex-direction:column; gap:14px;
  position:relative;
}
.msg{ max-width: 78%; padding: 11px 15px; border-radius: 15px; font-size:14.5px; line-height:1.5;
  opacity:0; transform: translateY(10px); transition: opacity .35s, transform .35s; }
.msg.show{ opacity:1; transform:none; }
.msg.user{ align-self:flex-end; background: var(--grad); color:#fff; border-bottom-right-radius:4px; }
.msg.ai{ align-self:flex-start; background: var(--glass-2); border:1px solid var(--line-soft); border-bottom-left-radius:4px; }
.msg.ai .cursor{ display:inline-block; width:8px; height:15px; background: var(--cyan); vertical-align:-2px; animation: blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.typing{ align-self:flex-start; display:flex; gap:5px; padding: 13px 16px;
  background: var(--glass-2); border:1px solid var(--line-soft); border-radius:15px; border-bottom-left-radius:4px;
  opacity:0; transition: opacity .3s; }
.typing.show{ opacity:1; }
.typing i{ width:7px; height:7px; border-radius:50%; background: var(--mute); animation: bounce 1.2s infinite; }
.typing i:nth-child(2){ animation-delay:.15s; } .typing i:nth-child(3){ animation-delay:.3s; }
@keyframes bounce{ 30%{ transform: translateY(-5px); } }
.preview-card{
  align-self:flex-start; width: 82%;
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  opacity:0; transform: translateY(10px); transition: opacity .4s, transform .4s;
}
.preview-card.show{ opacity:1; transform:none; }
.preview-bar{ padding: 8px 12px; background: var(--panel-2); border-bottom:1px solid var(--line-soft);
  font-family:var(--mono); font-size:11.5px; color:var(--dim); display:flex; justify-content:space-between; }
.preview-bar b{ color: var(--cyan); font-weight:600; }
.preview-screen{
  height: 110px;
  background:
    radial-gradient(60% 90% at 20% 100%, rgba(34,211,238,.25), transparent 70%),
    radial-gradient(60% 90% at 80% 100%, rgba(139,92,246,.25), transparent 70%),
    #0e0e13;
  display:flex; align-items:center; justify-content:center;
  color: var(--mute); font-size:13px; gap:8px;
}
.play-ico{ width:34px; height:34px; border-radius:50%; background: var(--grad);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; }
.chat-cta{
  position:absolute; inset:auto 0 0 0;
  padding: 60px 22px 22px;
  background: linear-gradient(transparent, var(--panel) 55%);
  display:flex; justify-content:center;
  opacity:0; visibility:hidden; transition: opacity .4s, visibility .4s;
}
.chat-cta.show{ opacity:1; visibility:visible; }
.chat-input{
  display:flex; gap:10px; align-items:center;
  padding: 12px 12px 12px 18px;
  border-top:1px solid var(--line-soft);
  background: var(--panel-2);
}
.chat-input input{
  flex:1; background:transparent; border:none; outline:none;
  color: var(--ink); font:inherit; font-size:14.5px;
}
.chat-input input::placeholder{ color: var(--dim); }
.send-btn{
  width:38px; height:38px; border-radius:11px; border:none;
  background: var(--grad); color:#fff; font-size:16px;
  display:flex; align-items:center; justify-content:center;
  transition: transform .15s, box-shadow .2s;
}
.send-btn:hover{ transform: scale(1.07); box-shadow: 0 6px 18px rgba(99,102,241,.5); }

/* ================= SECTIONS ================= */
.section{ padding: 100px 0; }
.eyebrow{ display:inline-block; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--cyan); font-weight:700; margin-bottom:14px; font-family: var(--mono); }
.section h2{ font-size: clamp(28px,4.2vw,46px); font-weight:800; letter-spacing:-.03em; line-height:1.12; margin-bottom:14px; }
.section .lead{ color: var(--mute); font-size:16.5px; max-width:560px; }
.section-head{ margin-bottom:52px; }
.section-head.center{ text-align:center; }
.section-head.center .lead{ margin:0 auto; }

/* tools grid */
.tools-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.tool{
  background: var(--glass); border:1px solid var(--line-soft);
  border-radius: var(--radius-lg); padding:26px;
  transition: transform .2s, background .2s, border-color .2s;
}
.tool:hover{ transform: translateY(-4px); background: var(--glass-2); border-color: var(--line); }
.tool .dd-icon{ width:42px; height:42px; font-size:19px; margin-bottom:16px; }
.tool h3{ font-size:17px; margin-bottom:7px; letter-spacing:-.01em; }
.tool p{ font-size:14px; color: var(--mute); }

/* model section */
.model{
  display:grid; grid-template-columns: 1.1fr 1fr; gap:56px; align-items:center;
}
.model-visual{
  border:1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--panel); padding:22px;
  font-family: var(--mono); font-size:13px; color: var(--mute); line-height:1.9;
}
.model-visual .k{ color: var(--cyan); } .model-visual .v{ color: var(--violet); } .model-visual .s{ color:#7dd3a7; }
.model ul{ list-style:none; margin-top:22px; display:flex; flex-direction:column; gap:12px; }
.model li{ display:flex; gap:12px; font-size:15px; color:var(--mute); }
.model li::before{ content:"◆"; color: var(--violet); font-size:11px; margin-top:5px; }
.model-media{
  aspect-ratio: 16/10;
  background:#2a2a2a; border:1px solid #454545;
  display:flex; align-items:flex-end;
  padding:14px 16px;
  color:#8f8f8f; font-size:12.5px;
  position:relative; overflow:hidden;
}
.model-media:has(img){
  aspect-ratio:auto;
  padding:0;
  align-items:stretch;
  background:#141414;
}
.model-media img{
  position:relative;
  width:100%;
  height:auto;
  object-fit:contain;
  display:block;
}
.model.flip{ grid-template-columns: 1fr 1.1fr; }
.model.flip .model-media{ order:-1; }
@media (max-width: 980px){
  .model.flip .model-media{ order:0; }
}

/* ================= FOOTER ================= */
footer{ border-top:1px solid var(--line-soft); padding: 70px 0 36px; background:#0a0a0d; }
.footer-grid{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:56px;
  flex-wrap:wrap;
}
.footer-brand{
  flex:0 1 260px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.footer-logo-icon{ display:inline-flex; margin-bottom:12px; }
.footer-brand-icon{
  height:40px; width:40px; display:block; object-fit:contain;
}
.footer-brand p{ font-size:14px; color: var(--dim); margin-top:14px; max-width:250px; }
.footer-mail{
  display:block; margin-top:0;
  font-size:14px; color:#c4c4c4; text-decoration:none;
  transition: color .15s;
}
.footer-mail:hover{ color:#fff; text-decoration:underline; }
.footer-links{
  display:flex;
  align-items:flex-start;
  gap:56px;
  flex-wrap:wrap;
}
.footer-col{ flex:0 0 auto; }
.footer-col h5{ font-size:12px; text-transform:uppercase; letter-spacing:.1em; color: var(--dim); margin-bottom:16px; }
.footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:14px; color: var(--mute); }
.footer-col a:hover{ color: var(--ink); }
.footer-bottom{
  margin-top:56px; padding-top:22px; border-top:1px solid var(--line-soft);
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  font-size:13px; color: var(--dim);
}
.legal-links{ display:flex; gap:20px; }
.legal-links a{
  font-size:12px; letter-spacing:.12em; font-weight:700;
  color: var(--mute);
}
.legal-links a:hover{ color: var(--ink); }

/* ================= AUTH MODAL ================= */
.modal-overlay{
  position:fixed; inset:0; z-index:100;
  background: rgba(5,5,8,.82);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; visibility:hidden; transition: opacity .2s, visibility .2s;
}
.modal-overlay.open{ opacity:1; visibility:visible; }
.modal{
  width:100%; max-width:440px;
  background: var(--panel-2); border:1px solid var(--line);
  border-radius:24px; padding: 36px 34px 30px;
  position:relative; box-shadow: 0 40px 100px rgba(0,0,0,.6);
  transform: translateY(16px) scale(.97);
  transition: transform .25s cubic-bezier(.2,.8,.3,1.1);
}
.modal-overlay.open .modal{ transform:none; }
.modal-close{
  position:absolute; top:18px; right:18px;
  width:34px; height:34px; border-radius:50%;
  background:none; border:none; color: var(--dim); font-size:17px;
  display:flex; align-items:center; justify-content:center;
  transition: background .15s, color .15s;
}
.modal-close:hover{ background: var(--glass-2); color: var(--ink); }
.modal .logo-mark{ width:38px; height:38px; border-radius:12px; margin-bottom:22px; }
.modal .kicker{ font-size:20px; font-weight:700; color: var(--dim); line-height:1.3; }
.modal h2{ font-size:23px; font-weight:700; letter-spacing:-.02em; margin-bottom:24px; }
.sso-btn{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  padding:12px; margin-bottom:10px; border-radius:12px;
  background: var(--glass); border:1px solid var(--line);
  color: var(--ink); font-size:14.5px; font-weight:600;
  transition: background .15s, border-color .15s;
}
.sso-btn-icon{
  width:18px; height:18px;
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto;
}
.sso-btn-icon svg{ display:block; }
.sso-btn:hover{ background: var(--glass-2); border-color: rgba(255,255,255,.2); }
.divider{ display:flex; align-items:center; gap:14px; margin:18px 0; font-size:12px; color: var(--dim); letter-spacing:.08em; }
.divider::before, .divider::after{ content:""; flex:1; height:1px; background: var(--line-soft); }
.modal input[type=email]{
  width:100%; padding:13px 16px; margin-bottom:10px; border-radius:12px;
  background: var(--glass); border:1px solid var(--line);
  color: var(--ink); font:inherit; font-size:15px; outline:none;
  transition: border-color .15s;
}
.modal input[type=email]::placeholder{ color: var(--dim); }
.modal input[type=email]:focus{ border-color: rgba(59,130,246,.55); }
.modal .btn-light{ width:100%; padding:13px; border-radius:12px; }
.legal-note{ font-size:12.5px; color: var(--dim); margin-top:16px; line-height:1.5; }
.legal-note a{ color: var(--mute); text-decoration:underline; }
.modal-forgot{ text-align:center; margin-top:12px; font-size:13px; }
.modal-forgot a{ color: var(--mute); font-weight:600; }
.modal-forgot a:hover{ color: var(--ink); }
.modal-switch{ text-align:center; margin-top:16px; font-size:13.5px; color: var(--dim); }
.modal-switch button{ background:none; border:none; color: var(--cyan); font-weight:600; padding:0 0 0 4px; }

/* ================= SUBPAGE HELPERS ================= */
.page-head{ text-align:center; padding: 90px 24px 30px; }
.page-head h1{ font-size: clamp(34px,5.5vw,58px); font-weight:800; letter-spacing:-.04em; margin-bottom:14px; }
.page-head p{ color: var(--mute); max-width:560px; margin:0 auto; font-size:17px; }

/* FAQ */
.faq-list{ max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.section h2.faq-group{
  font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:#a8a8a8; margin:36px 0 6px; line-height:1.4;
}
.section h2.faq-group:first-child{ margin-top:0; }
.faq-item{ background: var(--glass); border:1px solid var(--line-soft); border-radius: var(--radius); overflow:hidden; }
.faq-q{
  width:100%; text-align:left; background:none; border:none;
  padding:20px 24px; color: var(--ink);
  font-size:15.5px; font-weight:600;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-q .plus{ font-size:20px; color: var(--dim); transition: transform .2s; flex-shrink:0; }
.faq-item.open .plus{ transform: rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .3s ease; }
.faq-a p{ padding:0 24px 20px; font-size:14.5px; color: var(--mute); }

/* pricing */
.pricing-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; align-items:stretch; }
.price-card{
  background: var(--glass); border:1px solid var(--line-soft);
  border-radius: var(--radius-lg); padding:34px 30px;
  display:flex; flex-direction:column;
}
.price-card.featured{
  background: linear-gradient(180deg, rgba(59,130,246,.12), rgba(139,92,246,.06));
  border-color: rgba(59,130,246,.45); position:relative;
}
.tag{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  padding:5px 14px; border-radius: var(--pill);
  background: var(--grad);
  font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#fff;
}
.price-card h3{ font-size:17px; margin-bottom:6px; }
.price-card .desc{ font-size:13.5px; color: var(--dim); margin-bottom:22px; }
.price{ font-size:44px; font-weight:800; letter-spacing:-.03em; }
.price span{ font-size:15px; font-weight:500; color: var(--dim); }
.price-card ul{ list-style:none; margin:0 0 30px; padding-top:24px; display:flex; flex-direction:column; gap:11px; flex:1; }
.price-card li{ font-size:14px; color: var(--mute); display:flex; gap:10px; }
.price-card li::before{ content:"✓"; color: var(--cyan); font-weight:700; flex-shrink:0; margin-top:2px; }
.price-feature-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.price-feature-name{ font-size:14px; font-weight:600; color: var(--ink); line-height:1.35; }
.price-feature-desc{ font-size:12.5px; color: var(--dim); line-height:1.4; }
.price-card-benchmark{ display:flex; flex-direction:column; flex-shrink:0; }
.price-card-benchmark .price{ margin-bottom:0; }
.price-metrics{
  margin: 18px 0 0;
  display:flex; flex-direction:column; gap:10px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line-soft);
}
.price-metric{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; min-height:20px; }
.price-metric-label{ font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color: var(--dim); }
.price-metric-value{ font-size:14px; font-weight:700; color: var(--ink); font-family: var(--mono); }
.price-metric-bonus.is-empty,
.price-metric-bonus-spacer{ visibility:hidden; }
.price-metric-bonus-spacer{ pointer-events:none; }
.price-metric-bonus:not(.is-empty):not(.price-metric-bonus-spacer) .price-metric-value{ color: var(--cyan); }
.price-slider-wrap{ margin: 14px 0 0; display:grid; gap:6px; min-height:38px; }
.price-slider-spacer{ visibility:hidden; pointer-events:none; }
.price-slider{ width:100%; accent-color:#3b82f6; cursor:pointer; }
.price-slider-bounds{ display:flex; justify-content:space-between; font-size:11px; color: var(--dim); font-family: var(--mono); }
.pricing-grid-loading [data-pricing-credits]{ opacity:.45; }
html[data-theme="light"] .price-metrics{ background: rgba(0,0,0,.03); }
html[data-theme="light"] .price-feature-name{ color:#111; }
html[data-theme="light"] .price-metric-value{ color:#111; }

/* blog cards */
.blog-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
.post{
  border:1px solid var(--line-soft); border-radius: var(--radius-lg);
  overflow:hidden; background: var(--glass);
  transition: transform .2s, border-color .2s;
}
.post:hover{ transform: translateY(-4px); border-color: var(--line); }
.post .thumb{ aspect-ratio: 16/9;
  background: linear-gradient(135deg, rgba(34,211,238,.25), rgba(139,92,246,.3)); }
.post:nth-child(2) .thumb{ background: linear-gradient(135deg, rgba(59,130,246,.3), rgba(236,72,153,.22)); }
.post:nth-child(3) .thumb{ background: linear-gradient(135deg, rgba(139,92,246,.3), rgba(34,211,238,.2)); }
.post-body{ padding:20px; }
.post-body .meta{ font-size:12px; color: var(--dim); font-family: var(--mono); margin-bottom:8px; }
.post-body h3{ font-size:17px; margin-bottom:8px; letter-spacing:-.01em; }
.post-body p{ font-size:14px; color: var(--mute); }

/* use case cards */
.uc-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.uc-card{
  background: var(--glass); border:1px solid var(--line-soft);
  border-radius: var(--radius-lg); padding:28px;
  transition: transform .2s, background .2s, border-color .2s;
}
.uc-card:hover{ transform: translateY(-4px); background: var(--glass-2); border-color: var(--line); }
.uc-card .dd-icon{ width:44px; height:44px; font-size:20px; margin-bottom:16px; }
.uc-card h3{ font-size:17.5px; margin-bottom:8px; }
.uc-card p{ font-size:14px; color: var(--mute); margin-bottom:16px; }
.uc-card .more{ font-size:13.5px; font-weight:600; color: var(--cyan); }

/* legal pages */
.legal-doc{ max-width:760px; margin: 0 auto; padding: 0 24px 100px; }
.legal-doc h2{ font-size:20px; margin: 40px 0 12px; letter-spacing:-.01em; }
.legal-doc p{ color: var(--mute); font-size:15px; margin-bottom:14px; }
.legal-doc ul{ color: var(--mute); font-size:15px; margin: 0 0 14px 1.2em; padding:0; }
.legal-doc li{ margin-bottom:8px; }
.legal-doc .updated{ font-family: var(--mono); font-size:13px; color: var(--dim); }

/* reveal + responsive */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
  .msg, .typing, .preview-card{ transition:none; }
}
@media (max-width: 980px){
  nav.menu{ display:none; }
  .nav-inner{ grid-template-columns: 1fr auto; }
  .tools-grid, .uc-grid, .pricing-grid, .blog-grid{ grid-template-columns:1fr 1fr; }
  .footer-links{ gap:40px; }
  .model, .model.flip{ grid-template-columns:1fr; gap:36px; }
}
@media (max-width: 640px){
  .tools-grid, .uc-grid, .pricing-grid, .blog-grid{ grid-template-columns:1fr; }
  .footer-links{ flex-direction:column; gap:28px; }
  .hero{ padding:60px 20px 30px; }
  .chat-body{ height:300px; }
}


/* ==========================================================
   PLAYABLE LAB REFERENCE THEME
   Only the visual system is changed. Existing page structure,
   content, sections and responsive layout stay untouched.
   ========================================================== */
*, *::before, *::after{
  border-radius:0 !important;
  box-shadow:none !important;
}

body{ background:#1d1d1d; }
.glow{ background:#1d1d1d; }

header.nav{
  background:#242424;
  border-bottom:1px solid #383838;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.logo-mark{
  background:transparent;
  border:2px solid #f4f4f4;
}
.menu > a, .menu-trigger{
  color:#b0b0b0;
  border:1px solid transparent;
}
.menu > a:hover, .menu-trigger:hover{
  color:#fff;
  background:#303030;
  border-color:#474747;
}
.menu > a.active{
  color:#fff;
  background:#3a3a3a;
  border-color:#efefef;
}
.dropdown-panel{
  background:#292929;
  border-color:#494949;
}
.dd-item:hover{ background:#343434; }
.dd-icon{
  background:#303030;
  border-color:#454545;
}

.btn{
  background:#2d2d2d;
  color:#f4f4f4;
  border:1px solid #484848;
  font-weight:700;
  transform:none !important;
}
.btn:hover{
  background:#383838;
  border-color:#707070;
}
.btn-ghost{
  background:transparent;
  border-color:transparent;
  color:#b0b0b0;
}
.btn-ghost:hover{
  background:#303030;
  border-color:#474747;
  color:#fff;
}
.btn-light,
.btn-grad{
  background:#3c3c3c;
  color:#fff;
  border-color:#ededed;
}
.btn-light:hover,
.btn-grad:hover{
  background:#474747;
  border-color:#fff;
}
.btn-outline{
  background:#2d2d2d;
  color:#f4f4f4;
  border-color:#484848;
}

.chat-sim{
  background:#292929;
  border-color:#494949;
}
.chat-head,
.chat-input{
  background:#303030;
  border-color:#454545;
}
.dot.r, .dot.y, .dot.g{ background:#8a8a8a; }
.msg.user{
  background:#3b3b3b;
  color:#fff;
  border:1px solid #626262;
}
.msg.ai,
.typing{
  background:#303030;
  border-color:#484848;
}
.msg.ai .cursor{ background:#e5e5e5; }
.preview-card{ border-color:#4c4c4c; }
.preview-bar{ background:#303030; border-color:#454545; }
.preview-bar b{ color:#ededed; }
.preview-screen{ background:#242424; }
.play-ico{
  background:#3d3d3d;
  border:1px solid #e8e8e8;
}
.chat-cta{ background:linear-gradient(transparent, #292929 55%); }
.send-btn{
  background:#343434;
  color:#cfcfcf;
  border:1px solid #484848;
  transform:none !important;
}
.send-btn:hover{
  background:#404040;
  color:#fff;
  border-color:#707070;
}

.hero h1 .grad{ background:#f4f4f4; }
.eyebrow{ color:#e1e1e1; }
.tool,
.price-card,
.post,
.uc-card,
.faq-item{
  background:#292929;
  border-color:#404040;
}
.tool:hover,
.post:hover,
.uc-card:hover{
  transform:none;
  background:#303030;
  border-color:#606060;
}
.model-visual{
  background:#292929;
  border-color:#494949;
}
.model-visual .k{ color:#f2f2f2; }
.model-visual .v{ color:#cfcfcf; }
.model-visual .s{ color:#adadad; }
.model li::before,
.price-card li::before,
.uc-card .more{ color:#e1e1e1; }

footer{
  background:#202020;
  border-color:#373737;
}

.modal-overlay{
  background:rgba(0,0,0,.72);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.modal{
  background:#292929;
  border-color:#4b4b4b;
}
.modal-close,
.sso-btn,
.modal input[type=email]{
  background:#303030;
  border:1px solid #484848;
  color:#f4f4f4;
}
.modal-close:hover,
.sso-btn:hover{
  background:#3a3a3a;
  border-color:#686868;
}
.modal input[type=email]:focus{ border-color:#e5e5e5; }
.modal-switch button{ color:#ededed; }

.price-card.featured{
  background:#303030;
  border-color:#e9e9e9;
}
.tag{
  background:#3b3b3b;
  border:1px solid #ededed;
  color:#fff;
}
.post .thumb,
.post:nth-child(2) .thumb,
.post:nth-child(3) .thumb{
  background:#333333;
  border-bottom:1px solid #454545;
}
.post:nth-child(2) .thumb{ background:#2f2f2f; }
.post:nth-child(3) .thumb{ background:#383838; }

input, textarea, select{
  background:#303030;
  color:#f4f4f4;
  border-color:#484848;
}
::selection{
  background:#ededed;
  color:#1d1d1d;
}

/* ================= brand assets & icons ================= */
.logo-img{ height:34px; width:auto; display:block; }
.nav .logo .nav-logo-full{
  height:48px; width:auto; display:block;
  /* PlayableLabLogo.png = white wordmark; keep visible on dark nav */
  filter:none;
}
html[data-theme="light"] .nav-logo-full{ filter:invert(1); }
.footer-brand-icon,
.modal-brand-icon{
  /* site-favicon.png = black line art → white on dark backgrounds */
  filter:invert(1);
}
html[data-theme="light"] .footer-brand-icon,
html[data-theme="light"] .modal-brand-icon{ filter:none; }
.modal-brand-icon{
  height:44px; width:44px; display:block; margin:0 auto 22px;
  object-fit:contain;
}
.logo{ gap:0; }
.logo-for-light{ display:none; }
html[data-theme="light"] .logo-for-dark{ display:none; }
html[data-theme="light"] .logo-for-light{ display:block; }
.modal-logo{ height:43px; margin:0 auto 22px; }
.t-ico{
  width:42px; height:42px; padding:10px; margin-bottom:16px;
  color:#e6e6e6; background:#303030; border:1px solid #454545;
  display:block; box-sizing:border-box;
}
.dd-item{ padding-left:16px; }
.play-ico{ display:inline-flex; align-items:center; justify-content:center; }
.send-btn svg{ display:block; }

/* ================= Segoe UI type tuning ================= */
.hero h1{ font-weight:700; letter-spacing:-.015em; }
.section h2{ font-weight:700; letter-spacing:-.015em; }
.page-head h1{ font-weight:700; letter-spacing:-.015em; }
.price{ font-weight:700; letter-spacing:-.01em; }
.logo{ font-weight:700; letter-spacing:-.01em; }

/* footer social icons */
.socials{ display:flex; gap:10px; margin-top:16px; }
.social{
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  color:#b0b0b0; background:#2d2d2d; border:1px solid #484848;
  transition: color .15s, border-color .15s, background .15s;
}
.social:hover{ color:#fff; background:#383838; border-color:#707070; }

/* ================= HERO ROTATOR + CHAT BOX ================= */
.hero .sub{ font-size:19px; color:#a8a8a8; }
.hero h1 .grad{ background:none; -webkit-background-clip:initial; background-clip:initial; color:#f4f4f4; }
.rotator{
  display:inline-block;
  text-decoration:none;
  transition: opacity .32s ease, transform .32s ease;
}
.rotator:hover{ text-decoration:underline; text-decoration-thickness:.05em; text-underline-offset:.1em; }
.rotator:focus-visible{ outline:2px solid #f4f4f4; outline-offset:8px; }
.rotator.out{ opacity:0; transform: translateY(-.45em); }
.rotator.in{ opacity:0; transform: translateY(.45em); transition:none; }
@media (prefers-reduced-motion: reduce){
  .rotator{ transition:none; }
}

.hero-chat{ max-width:760px; margin:44px auto 0; text-align:left; }
.hero-chat-input{
  width:100%; height:52px; display:block;
  background:#262626; border:1px solid #4a4a4a; color:#f4f4f4;
  font:inherit; font-size:15px; line-height:1.4;
  padding:0 18px; outline:none;
  transition: border-color .15s;
  caret-color:#f4f4f4;
}
.hero-chat-input.is-demo{
  color:#7a7a7a;
  caret-color:transparent;
  cursor:text;
}
.hero-chat-input::placeholder{ color:#9a9a9a; }
.hero-chat-input:hover, .hero-chat-input:focus{ border-color:#7a7a7a; }
.hero-chat-actions{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:10px;
}
.chat-attach, .chat-send{
  width:29px; height:29px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:#2d2d2d; border:1px solid #484848; color:#cfcfcf;
  transition: color .15s, border-color .15s, background .15s;
}
.chat-attach:hover, .chat-send:hover{ color:#fff; background:#3a3a3a; border-color:#707070; }
.chat-attach svg, .chat-send svg{ display:block; width:14px; height:14px; }

/* ================= TEMPLATES PAGE FILTERS ================= */
.filter-bar{
  max-width:1000px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  padding:7px 16px;
  background:transparent; border:1px solid transparent; color:#a3a3a3;
  font-size:13px; font-weight:600;
  transition: color .15s, border-color .15s, background .15s;
}
.chip:hover{ color:#fff; }
.chip.active{ background:#f2f2f2; border-color:#f2f2f2; color:#1d1d1d; }
.filter-selects{ display:flex; gap:10px; }
.filter-select{
  appearance:none; -webkit-appearance:none;
  padding:8px 34px 8px 14px;
  background:#242424 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a3a3a3' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center;
  border:1px solid #3d3d3d; color:#c4c4c4;
  font-family:inherit; font-size:13px; font-weight:600;
  cursor:pointer; border-radius:0;
  transition: border-color .15s, color .15s;
}
.filter-select:hover{ border-color:#707070; color:#fff; }
.filter-select:focus{ outline:none; border-color:#8f8f8f; }
.filter-count{
  max-width:1000px; margin:16px auto 18px;
  font-size:13px; color:#8f8f8f;
}
.tpl-badge{
  position:absolute; top:10px; left:10px;
  font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 8px;
  background:#3b3b3b; border:1px solid #5a5a5a; color:#e8e8e8;
}
.tpl-thumb{ position:relative; }
.filter-empty{
  text-align:center; padding:70px 0 30px;
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
.filter-empty p{ color:#a3a3a3; font-size:15px; }
#templatesGrid{ max-width:1000px; margin-left:auto; margin-right:auto; }
@media (max-width: 640px){
  .filter-bar{ flex-direction:column; align-items:stretch; }
  .filter-selects{ flex-direction:column; }
  .filter-select{ width:100%; }
}

/* ================= PAGE VIDEO CARD + SEO COPY ================= */
.page-video{
  max-width:760px; margin:0 auto;
  aspect-ratio:16/9;
  background:#2a2a2a; border:1px solid #454545;
  position:relative;
  display:flex; align-items:center; justify-content:center;
  gap:10px; color:#9a9a9a; font-size:14px;
}
.page-video:has(img){
  aspect-ratio:auto;
  padding:0;
  display:block;
  background:#141414;
}
.page-video img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}
.page-video .play-ico{ width:38px; height:38px; }
.page-video .video-label{
  position:absolute; left:14px; bottom:12px;
  color:#8f8f8f; font-size:12px;
}
.seo-copy{
  max-width:760px; margin:36px auto 0;
  display:flex; flex-direction:column; gap:16px;
}
.seo-copy p{
  font-size:15px; line-height:1.75; color:#a3a3a3;
}

/* ================= SEO USE-CASE LANDINGS ================= */
.breadcrumb-wrap{ padding-top:34px; }
.breadcrumb{
  list-style:none; display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  color:#8f8f8f; font-size:13px;
}
.breadcrumb li{ display:flex; align-items:center; gap:8px; }
.breadcrumb li:not(:last-child)::after{ content:"/"; color:#626262; }
.breadcrumb a:hover{ color:#f4f4f4; }
.seo-page-head{ padding-top:52px; }
.seo-page-head p{ max-width:720px; }
.seo-landing:not(.template-detail) .seo-page-head{
  min-height:calc(100svh - 108px);
  display:flex; flex-direction:column; justify-content:center;
  padding-bottom:52px;
}
.hero-actions{
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap;
  gap:10px; margin-top:28px;
}
.seo-section{ padding:82px 0; }
.section-muted{ background:#202020; border-block:1px solid #373737; }
.card-index{
  display:block; margin-bottom:18px; color:#8f8f8f;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em;
}
.process-grid{
  list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.process-step{ padding:24px; background:#292929; border:1px solid #404040; }
.process-step > span{ display:block; margin-bottom:26px; color:#8f8f8f; font:12px var(--mono); }
.process-step h3{ margin-bottom:8px; font-size:17px; }
.process-step p{ color:#a3a3a3; font-size:14px; }
.seo-landing .model .page-video{ width:100%; margin:0; }
.seo-landing .seo-copy a.text-link{ color:#e1e1e1; text-decoration:underline; text-underline-offset:3px; }
.related-grid{ grid-template-columns:repeat(5,1fr); }
.related-grid .uc-card{ padding:24px; }
.related-grid .parent-card{ border-color:#707070; }
.seo-final-cta{ padding:90px 0; border-top:1px solid #373737; }
.seo-final-cta .section-head{ margin-bottom:0; }
.parent-use-cases{ padding-top:82px; padding-bottom:82px; background:#202020; border-block:1px solid #373737; }
.parent-use-cases .uc-card{ display:block; }

/* ================= AUDIENCE PAGES ================= */
.audience-workflow{ padding-top:82px; }
.audience-use-cases .uc-grid{ grid-template-columns:repeat(4,1fr); }
.audience-final-cta{ padding:90px 0; }
.audience-final-cta .section-head{ margin-bottom:0; }

/* ================= TEMPLATE DETAIL PAGES ================= */
.template-hero{ padding-bottom:54px; }
.template-meta{
  display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:22px;
}
.template-meta span{
  padding:6px 10px; border:1px solid #454545; background:#292929;
  color:#b0b0b0; font:12px var(--mono);
}
.template-preview-section{ padding:0 0 82px; }
.template-preview-section:has(.template-preview--media){ padding:0 0 36px; }
.template-detail .template-preview-section:has(.template-preview--media) + .template-try-section{
  padding-top:48px;
}
.template-preview{
  min-height:460px; max-width:920px; margin:0 auto; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  background:#292929; border:1px solid #454545; text-align:center;
}
.template-preview .tpl-badge{ top:16px; left:16px; z-index:2; }
.template-preview-name{ font-size:clamp(26px,5vw,52px); font-weight:700; letter-spacing:-.02em; }
.template-preview-format{ color:#8f8f8f; font:13px var(--mono); }
.template-preview--media{
  min-height:auto; max-width:fit-content; width:fit-content;
  padding:12px;
  display:flex; align-items:center; justify-content:center;
  background:#1a1a1a;
}
.template-preview-video,
.template-preview-image{
  display:block;
  background:#000;
  border:1px solid #454545;
}
.template-preview-video{ object-fit:cover; }
.template-preview-image{ object-fit:contain; }
.template-preview--media:has(.template-preview-image).template-preview--square{
  width:min(440px, 90vw);
  max-width:100%;
  aspect-ratio:1/1;
  padding:0;
  overflow:hidden;
}
.template-preview--media:has(.template-preview-image).template-preview--portrait{
  width:min(320px, 78vw);
  max-width:100%;
  aspect-ratio:9/16;
  padding:0;
  overflow:hidden;
}
.template-preview--media:has(.template-preview-image).template-preview--landscape{
  width:min(680px, 94vw);
  max-width:100%;
  aspect-ratio:16/9;
  padding:0;
  overflow:hidden;
}
.template-preview--media:has(.template-preview-image) .template-preview-image{
  width:100%;
  height:100%;
  border:0;
  object-fit:contain;
}
.template-preview--portrait .template-preview-video,
.template-preview-video--portrait{
  width:270px; max-width:min(270px, 75vw);
  aspect-ratio:9/16;
}
.template-preview--landscape .template-preview-video,
.template-preview-video--landscape{
  width:570px; max-width:min(570px, 92vw);
  aspect-ratio:16/9;
}
.playable-preview-scaler{
  width:270px; max-width:min(270px, 75vw);
  aspect-ratio:9/16;
  overflow:hidden; position:relative;
  background:#000; border:1px solid #454545;
}
.playable-preview-scaler iframe{
  position:absolute; top:0; left:0;
  width:390px; height:693px;
  border:0; transform-origin:0 0;
  background:#000;
}
.template-preview-playable,
.template-preview--portrait .template-preview-playable,
.template-preview-playable--portrait{
  width:390px; height:693px;
  border:0; background:#000;
}
.template-preview-section .container:has(.template-preview--media){
  display:flex; justify-content:center;
}
.tpl-thumb img,
.show-media video,
.show-media img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.tpl-thumb img{ z-index:0; }
.tpl-thumb .tpl-badge{ z-index:2; }
.show-media:has(video),
.show-media:has(img),
.show-media:has(.playable-preview-scaler){ padding:0; }
.show-media--playable{
  align-items:stretch;
  justify-content:stretch;
}
.show-media .playable-preview-scaler{
  width:100%;
  height:100%;
  max-width:none;
  aspect-ratio:auto;
  border:0;
}
.show-card--playable{ touch-action:manipulation; }
.show-card--playable .ai-tag{ pointer-events:none; }
.template-output-grid{ grid-template-columns:repeat(4,1fr); }
.template-related-grid{ grid-template-columns:repeat(4,1fr); }
.template-detail .model-media{ min-height:360px; align-items:flex-end; }
.templates-seo-copy{ max-width:840px; margin:0 auto; }
.templates-seo-copy p{ color:#a3a3a3; font-size:15px; line-height:1.75; margin-top:14px; }
.templates-seo-copy a, .tool a.text-link{
  color:#e1e1e1; text-decoration:underline; text-underline-offset:3px;
}

@media (max-width: 980px){
  .template-output-grid, .template-related-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px){
  .template-preview:not(.template-preview--media){ min-height:330px; }
  .template-output-grid, .template-related-grid{ grid-template-columns:1fr; }
  .template-detail main,
  .template-detail .section,
  .template-detail .container,
  .template-detail .model,
  .template-detail .template-output-grid,
  .template-detail .template-related-grid{ width:100%; max-width:100%; min-width:0; }
  .template-detail .tool,
  .template-detail .uc-card,
  .template-detail .faq-item,
  .template-detail .model > *,
  .template-detail .template-preview:not(.template-preview--media){ min-width:0; max-width:100%; }
  .template-detail h1,
  .template-detail h2,
  .template-detail h3,
  .template-detail p,
  .template-detail li{ overflow-wrap:anywhere; }
}

@media (max-width: 980px){
  .process-grid{ grid-template-columns:1fr 1fr; }
  .related-grid{ grid-template-columns:1fr 1fr; }
  .audience-use-cases .uc-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px){
  .breadcrumb-wrap{ padding-top:24px; }
  .seo-page-head{ padding-top:38px; }
  .seo-landing:not(.template-detail) .seo-page-head{
    min-height:calc(100svh - 94px);
    padding-bottom:38px;
  }
  .seo-page-head .hero-actions{ flex-direction:column; align-items:stretch; }
  .seo-page-head .hero-actions .btn{ width:100%; }
  .seo-section{ padding:64px 0; }
  .process-grid, .related-grid{ grid-template-columns:1fr; }
  .process-step > span{ margin-bottom:16px; }
  .parent-use-cases{ padding:64px 0; }
  .audience-workflow{ padding-top:64px; }
  .audience-use-cases .uc-grid{ grid-template-columns:1fr; }
  .audience-final-cta{ padding:64px 0; }
}

/* ================= MOBILE POLISH ================= */
.btn{ white-space:nowrap; }
.tools-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width: 980px){
  .tools-grid.cols-3{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px){
  .tools-grid.cols-3{ grid-template-columns:1fr; }
  .nav-inner{ padding:12px 16px; }
  .nav-actions{ gap:6px; }
  .nav-actions .btn{ padding:8px 12px; font-size:13px; }
  .hero{ min-height: calc(100svh - 61px); padding:32px 18px; }
  .hero h1{ font-size: clamp(30px, 9.5vw, 40px); }
  .hero .sub{ font-size:16px; }
  .chat-sim{ margin-left:16px; margin-right:16px; }
  #demo .chat-sim{ margin:28px 16px 0; }
  .showcase{ padding:24px 0 40px; }
  .section{ padding:64px 0; }
  .templates-head{ margin-bottom:28px; }
  .model-media{ margin-top:8px; }
  .msg{ max-width:92%; }
  .preview-card{ width:100%; }
}

/* ================= FULL-VIEWPORT HERO ================= */
.hero{
  min-height: calc(100vh - 65px);
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  padding: 40px 24px;
}
.hero-chat{ width:100%; }

/* ================= SHOWCASE STRIP ================= */
.showcase{ padding: 40px 0 60px; }
.showcase-wrap{
  max-width: var(--max-w); margin:0 auto; padding:0 24px;
}
.showcase-track{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 190px));
  justify-content:center;
  gap:14px;
  overflow:visible;
}
.show-card{
  position:relative;
  width:100%; height:338px;
  background:#2a2a2a; border:1px solid #454545;
  overflow:hidden;
}
.show-card:nth-child(2n){ background:#262626; }
.show-card:nth-child(3n){ background:#2e2e2e; }
.show-media{
  position:absolute; inset:0;
  display:flex; align-items:flex-end; justify-content:flex-start;
  padding:14px;
  color:#8f8f8f; font-size:12.5px;
}
.ai-tag{
  position:absolute; top:10px; left:10px; z-index:2;
  font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 8px;
  background:#3b3b3b; border:1px solid #5a5a5a; color:#e8e8e8;
}
.mute-ico{
  position:absolute; right:10px; bottom:10px; z-index:2;
  width:26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.45); color:#dcdcdc;
}
#demo .chat-sim{ margin:36px auto 0; }
.cta-sub{ margin-top:10px; font-size:15px; color:#a8a8a8; }

/* ================= TEMPLATES ================= */
.templates-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; margin-bottom:36px;
}
.templates-head h2{ font-size: clamp(26px,3.4vw,38px); font-weight:700; letter-spacing:-.015em; }
.templates-sub{ margin-top:8px; font-size:15px; color:#a8a8a8; }
.templates-grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap:22px;
}
.tpl-card{ display:block; }
.tpl-thumb{
  aspect-ratio: 16/10;
  background:#2a2a2a; border:1px solid #454545;
  display:flex; align-items:flex-end; padding:12px 14px;
  color:#8f8f8f; font-size:12px;
  transition: border-color .15s, background .15s;
}
.tpl-card:nth-child(2n) .tpl-thumb{ background:#262626; }
.tpl-card:nth-child(3n) .tpl-thumb{ background:#2e2e2e; }
.tpl-card:hover .tpl-thumb{ background:#333333; border-color:#707070; }
.tpl-card h4{ margin-top:14px; font-size:15px; font-weight:700; color:#f2f2f2; }
.tpl-card p{ margin-top:5px; font-size:13.5px; color:#a3a3a3; }
@media (max-width: 980px){
  .templates-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px){
  .templates-grid{ grid-template-columns: 1fr; }
  .templates-head{ flex-direction:column; align-items:flex-start; }
}

/* showcase entrance animation */
.showcase .show-card{
  opacity:0;
  transform: translateY(56px) scale(.94);
  filter: blur(8px);
  transition:
    opacity .8s cubic-bezier(.22,1,.36,1),
    transform .8s cubic-bezier(.22,1,.36,1),
    filter .8s cubic-bezier(.22,1,.36,1);
}
.showcase .show-card:nth-child(1){ transition-delay:0s; }
.showcase .show-card:nth-child(2){ transition-delay:.08s; }
.showcase .show-card:nth-child(3){ transition-delay:.16s; }
.showcase .show-card:nth-child(4){ transition-delay:.24s; }
.showcase .show-card:nth-child(5){ transition-delay:.32s; }
.showcase.in-view .show-card{
  opacity:1;
  transform:none;
  filter:none;
}
@media (prefers-reduced-motion: reduce){
  .showcase .show-card{ opacity:1; transform:none; filter:none; transition:none; }
}
@media (max-width: 1100px){
  .showcase-track{
    grid-template-columns: repeat(5, minmax(0, 1fr));
    max-width:1006px;
    margin:0 auto;
  }
}

/* Homepage showcase — mobile carousel (single card + arrows; desktop grid unchanged) */
.showcase-nav{ display:none; }
@media (max-width: 820px){
  .showcase-wrap{ padding:0 8px; }
  .showcase-carousel{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .showcase-nav{
    display:flex;
    flex-shrink:0;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    padding:0;
    border:1px solid rgba(255,255,255,.45);
    border-radius:999px;
    background:rgba(255,255,255,.14);
    color:#ffffff;
    box-shadow:0 2px 12px rgba(0,0,0,.35);
    cursor:pointer;
    transition: background .15s, border-color .15s, opacity .15s, transform .15s;
  }
  .showcase-nav:hover:not(:disabled){
    background:rgba(255,255,255,.24);
    border-color:rgba(255,255,255,.65);
    transform:scale(1.04);
  }
  .showcase-nav:disabled{
    opacity:.28;
    cursor:not-allowed;
    transform:none;
  }
  .showcase-viewport{
    flex:1;
    min-width:0;
    width:100%;
    /* clip, NOT hidden — a hidden box is still a programmatically
       scrollable container, and the browser silently shifted its
       scrollLeft (focus / scroll-into-view of the playable iframes),
       which offset every slide by 2 cards and made the first two
       unreachable. clip removes the scroll container entirely. */
    overflow:hidden;
    overflow:clip;
  }
  .showcase-track{
    display:flex;
    grid-template-columns:none;
    /* Desktop rule leaves justify-content:center on this element. On a flex
       track whose children total 500% width that centers the strip and
       parks cards 1–2 permanently off the left edge of the viewport —
       first visible slide becomes card 3, last clicks show empty space. */
    justify-content:flex-start;
    gap:0;
    max-width:none;
    margin:0;
    transition: transform .35s cubic-bezier(.22,1,.36,1);
    will-change:transform;
  }
  /* Slide width lives HERE, not in JS — every card's content is
     position:absolute, so a width:auto fallback collapses the card to 0×0
     (empty carousel, only the arrows visible) whenever a JS measurement
     misfires. 100% of the track equals the viewport width (gap:0), which
     is exactly one slide. */
  .showcase-track .show-card{
    flex:0 0 100%;
    width:100%;
    height:auto;
    aspect-ratio:190/338;
    max-height:min(70vh, 480px);
  }
  /* Carousel: cards must be visible immediately — no scroll entrance fade on mobile */
  #showcase .show-card{
    opacity:1;
    transform:none;
    filter:none;
    transition:none;
  }
}
@media (max-width: 820px) and (prefers-reduced-motion: reduce){
  .showcase-track{ transition:none; }
}
html[data-theme="light"] #showcase .showcase-nav{
  background:rgba(0,0,0,.08);
  border-color:rgba(0,0,0,.22);
  color:#1a1a1a;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
}
html[data-theme="light"] #showcase .showcase-nav:hover:not(:disabled){
  background:rgba(0,0,0,.14);
  border-color:rgba(0,0,0,.35);
}

/* ================= FOCUSED THREE-TONE LIGHT STAGES ================= */
:root{
  --tone-purple:#403b59;
  --tone-green:#2f4a37;
  --tone-wine:#463038;
  --tone-purple-rgb:64,59,89;
  --tone-green-rgb:47,74,55;
  --tone-wine-rgb:70,48,56;
  --tone-purple-hi:#948bbd;
  --tone-green-hi:#72a083;
  --tone-wine-hi:#a87282;
}

.hero,
.seo-landing:not(.template-detail) .seo-page-head,
.seo-final-cta,
.audience-final-cta{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#1d1d1d;
}
.hero::before,
.seo-landing:not(.template-detail) .seo-page-head::before,
.seo-final-cta::before,
.audience-final-cta::before,
body:has(> .page-head + .section[style*="padding-top:20px"]) > .page-head::before,
.hero::after,
.seo-landing:not(.template-detail) .seo-page-head::after,
.seo-final-cta::after,
.audience-final-cta::after,
body:has(> .page-head + .section[style*="padding-top:20px"]) > .page-head::after{
  display:none;
}
.hero > *,
.seo-landing:not(.template-detail) .seo-page-head > *,
.seo-final-cta > *,
.audience-final-cta > *,
body:has(> .page-head + .section[style*="padding-top:20px"]) > .page-head > *{
  position:relative;
  z-index:1;
}
.seo-landing:not(.template-detail) main{ position:relative; }
.seo-landing:not(.template-detail) .breadcrumb-wrap{
  position:absolute;
  top:0;
  left:50%;
  z-index:3;
  width:100%;
  max-width:var(--max-w);
  transform:translateX(-50%);
}
.seo-landing:not(.template-detail) .seo-page-head{
  min-height:calc(100svh - 53px);
  padding-top:106px;
}
body:has(> .page-head + .section[style*="padding-top:20px"]) > .page-head{
  position:relative;
  z-index:0;
  isolation:isolate;
  overflow:visible;
  clip-path:inset(-100vh 0 -100vh 0);
  background:transparent;
}
body:has(> .page-head + .section[style*="padding-top:20px"]) > .page-head::before{
  display:none;
}
body:has(> .page-head + .section[style*="padding-top:20px"]) > .page-head::after{
  display:none;
}
body:has(> .page-head + .section[style*="padding-top:20px"]) > .page-head + .section{
  position:relative;
  z-index:1;
  background:transparent;
}
.seo-final-cta.section-muted{
  background:#202020;
  border-color:#373737;
}

.btn,
.btn-light,
.btn-grad,
.btn-outline,
.btn-ghost{
  position:relative;
  overflow:hidden;
  background:#3c3c3c;
  color:#fff;
  border-color:#d8d8d8;
  animation:none;
  transition:transform .22s ease, border-color .22s ease, background .22s ease;
}
.btn::after{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:linear-gradient(110deg, transparent 24%, rgba(255,255,255,.26) 47%, transparent 70%);
  transform:translateX(-130%);
  transition:transform .65s cubic-bezier(.22,1,.36,1);
}
.btn:hover,
.btn-light:hover,
.btn-grad:hover,
.btn-outline:hover,
.btn-ghost:hover{
  background:linear-gradient(105deg, var(--tone-purple), var(--tone-green) 52%, var(--tone-wine));
  background-size:180% 100%;
  color:#fff;
  transform:translateY(-2px);
  border-color:#fff;
  animation:cta-color-flow 5s ease-in-out infinite alternate;
}
.btn:hover::after{ transform:translateX(130%); }
.btn-ghost{
  background:transparent;
  color:#a3a3a3;
  border-color:transparent;
}
.btn-ghost::after{ display:none; }
.btn-ghost:hover{
  background:rgba(255,255,255,.045);
  color:#f4f4f4;
  border-color:transparent;
  transform:none;
  animation:none;
}
.send-btn,
.chat-send,
.chat-attach,
.play-ico{
  background:#3c3c3c;
  border-color:#666;
}
.send-btn:hover,
.chat-send:hover,
.chat-attach:hover,
.page-video:hover .play-ico{
  background:linear-gradient(135deg, var(--tone-purple), var(--tone-green) 56%, var(--tone-wine));
  border-color:rgba(255,255,255,.46);
}

.tools-grid > :nth-child(3n+1),
.uc-grid > :nth-child(3n+1),
.templates-grid > :nth-child(3n+1){
  --card-accent:var(--tone-purple-hi);
}
.tools-grid > :nth-child(3n+2),
.uc-grid > :nth-child(3n+2),
.templates-grid > :nth-child(3n+2){
  --card-accent:var(--tone-green-hi);
}
.tools-grid > :nth-child(3n),
.uc-grid > :nth-child(3n),
.templates-grid > :nth-child(3n){
  --card-accent:var(--tone-wine-hi);
}
.tool,
.uc-card,
.tpl-thumb{
  position:relative;
  overflow:hidden;
}
.tool::before,
.uc-card::before,
.tpl-thumb::before{
  content:"";
  position:absolute;
  top:-1px;
  left:-1px;
  width:34%;
  height:2px;
  background:linear-gradient(90deg, var(--card-accent, #6f6f75), transparent);
  transform:scaleX(.45);
  transform-origin:left center;
  opacity:.7;
  transition:transform .35s ease, opacity .25s ease;
}
.tool:hover::before,
.uc-card:hover::before,
.tpl-card:hover .tpl-thumb::before{
  transform:scaleX(1);
  opacity:1;
}
.tool:hover,
.uc-card:hover,
.tpl-card:hover .tpl-thumb{
  transform:none;
  background:#303030;
  border-color:var(--card-accent, #606060);
}
.card-index,
.uc-card .more{
  color:var(--card-accent, #e1e1e1);
}

.hero h1 .rotator{
  color:#f4f4f4;
  text-decoration:none !important;
  transition:opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1), color .35s ease, filter .5s ease;
}
.hero h1 .rotator[data-tone="purple"]{ --rotator-hover:var(--tone-purple-hi); }
.hero h1 .rotator[data-tone="green"]{ --rotator-hover:var(--tone-green-hi); }
.hero h1 .rotator[data-tone="wine"]{ --rotator-hover:var(--tone-wine-hi); }
.hero h1 .rotator:hover{ color:var(--rotator-hover, #f4f4f4); text-decoration:none !important; }
.hero h1 .rotator.out{ opacity:0; transform:translateY(-.32em); filter:blur(6px); }
.hero h1 .rotator.in{ opacity:0; transform:translateY(.32em); filter:blur(6px); transition:none; }

@keyframes stage-light-drift{
  0%{
    background-position:-8% -4%, 108% -8%, 58% 112%;
    transform:scale(1) rotate(-1deg);
  }
  50%{
    background-position:18% 15%, 78% 22%, 38% 78%;
  }
  100%{
    background-position:34% 4%, 62% 34%, 70% 66%;
    transform:scale(1.08) rotate(2deg);
  }
}
@keyframes stage-light-orbit{
  to{ transform:rotate(360deg) scale(1.05); }
}
@keyframes wide-stage-light-drift{
  0%{ background-position:-8% -4%, 108% -8%, 58% 112%; }
  50%{ background-position:18% 15%, 78% 22%, 38% 78%; }
  100%{ background-position:34% 4%, 62% 34%, 70% 66%; }
}
@keyframes cta-color-flow{
  from{ background-position:0 50%; }
  to{ background-position:100% 50%; }
}

@media (max-width:640px){
  .hero::before,
  .seo-landing:not(.template-detail) .seo-page-head::before,
  .seo-final-cta::before,
  .audience-final-cta::before,
  body:has(> .page-head + .section[style*="padding-top:20px"]) > .page-head::before{
    inset:-14% -48%;
    opacity:.74;
    filter:blur(14px) saturate(108%);
  }
  .seo-landing:not(.template-detail) .seo-page-head{
    min-height:calc(100svh - 49px);
    padding-top:100px;
  }
  body:has(> .page-head + .section[style*="padding-top:20px"]) > .page-head::before{
    inset:-14% 0 auto;
    width:100%;
    height:calc(100svh - 49px);
  }
}

@media (prefers-reduced-motion:reduce){
  .hero::before,
  .seo-landing:not(.template-detail) .seo-page-head::before,
  .seo-final-cta::before,
  .audience-final-cta::before,
  body:has(> .page-head + .section[style*="padding-top:20px"]) > .page-head::before,
  .hero::after,
  .seo-landing:not(.template-detail) .seo-page-head::after,
  .seo-final-cta::after,
  .audience-final-cta::after,
  body:has(> .page-head + .section[style*="padding-top:20px"]) > .page-head::after,
  .btn,
  .btn:hover,
  .btn-light:hover,
  .btn-grad,
  .btn-grad:hover,
  .btn-outline:hover,
  .btn-ghost:hover{
    animation:none;
  }
  .hero h1 .rotator,
  .hero h1 .rotator.out,
  .hero h1 .rotator.in{
    transform:none;
    filter:none;
    transition:none;
  }
}

/* ================= LIGHT THEME ================= */
.theme-toggle{ display:none !important; }

html[data-theme="light"]{ color-scheme:light; }
html[data-theme="light"] body{
  background:#f3f3f1;
  color:#1e1e20;
}
html[data-theme="light"] .glow{ background:#f3f3f1; }
html[data-theme="light"] header.nav{
  background:rgba(243,243,241,.94);
  border-bottom-color:#d4d4d1;
}
html[data-theme="light"] nav.menu > a,
html[data-theme="light"] .menu-trigger{ color:#666; }
html[data-theme="light"] nav.menu > a:hover,
html[data-theme="light"] .menu-trigger:hover,
html[data-theme="light"] nav.menu > a.active{
  color:#171719;
  background:#e5e5e2;
}
html[data-theme="light"] .dropdown-panel{
  background:#fafaf8;
  border-color:#cececa;
}
html[data-theme="light"] .dd-item:hover{ background:#ecece8; }
html[data-theme="light"] .dd-item h5{ color:#202022; }
html[data-theme="light"] .dd-item p{ color:#707073; }

html[data-theme="light"] .hero,
html[data-theme="light"] .seo-landing:not(.template-detail) .seo-page-head,
html[data-theme="light"] .seo-final-cta,
html[data-theme="light"] .audience-final-cta{
  background:#f3f3f1;
}
html[data-theme="light"] .seo-final-cta,
html[data-theme="light"] .audience-final-cta{
  border-top:none;
}
html[data-theme="light"] .hero::before,
html[data-theme="light"] .seo-landing:not(.template-detail) .seo-page-head::before,
html[data-theme="light"] .seo-final-cta::before,
html[data-theme="light"] .audience-final-cta::before,
html[data-theme="light"] body:has(> .page-head + .section[style*="padding-top:20px"]) > .page-head::before{
  background:
    radial-gradient(36% 48% at 8% 24%, rgba(121,103,202,.72), rgba(148,139,189,.42) 48%, transparent 76%),
    radial-gradient(38% 50% at 90% 20%, rgba(48,137,82,.62), rgba(114,160,131,.38) 50%, transparent 78%),
    radial-gradient(42% 54% at 58% 94%, rgba(164,67,98,.62), rgba(168,114,130,.38) 50%, transparent 78%);
  background-size:112% 112%, 116% 116%, 114% 114%;
  opacity:.88;
  filter:blur(12px) saturate(146%) contrast(106%);
}
html[data-theme="light"] .hero::after,
html[data-theme="light"] .seo-landing:not(.template-detail) .seo-page-head::after,
html[data-theme="light"] .seo-final-cta::after,
html[data-theme="light"] .audience-final-cta::after{
  opacity:.34;
  mix-blend-mode:multiply;
}
html[data-theme="light"] .seo-final-cta::before,
html[data-theme="light"] .audience-final-cta::before{
  opacity:.96;
  filter:blur(10px) saturate(154%) contrast(108%);
}
html[data-theme="light"] .seo-final-cta::after,
html[data-theme="light"] .audience-final-cta::after{
  opacity:.5;
}
html[data-theme="light"] .hero h1 .rotator{ color:#1e1e20; }
html[data-theme="light"] .hero h1 .rotator:hover{ color:var(--rotator-hover, #1e1e20); }
html[data-theme="light"] .hero .sub,
html[data-theme="light"] .page-head p,
html[data-theme="light"] .section .lead,
html[data-theme="light"] .seo-copy p,
html[data-theme="light"] .tool p,
html[data-theme="light"] .uc-card p,
html[data-theme="light"] .post p,
html[data-theme="light"] .process-step p,
html[data-theme="light"] .tpl-card p,
html[data-theme="light"] .templates-sub,
html[data-theme="light"] .footer-brand p,
html[data-theme="light"] .footer-col a,
html[data-theme="light"] .legal-note,
html[data-theme="light"] .modal-switch{
  color:#656568;
}
html[data-theme="light"] .seo-landing .seo-copy a.text-link,
html[data-theme="light"] .templates-seo-copy a,
html[data-theme="light"] .tool a.text-link{
  color:#18181a;
  text-decoration-color:#9a9a96;
}
html[data-theme="light"] .seo-landing .seo-copy a.text-link:hover,
html[data-theme="light"] .templates-seo-copy a:hover,
html[data-theme="light"] .tool a.text-link:hover{
  text-decoration-color:#18181a;
}
html[data-theme="light"] .eyebrow,
html[data-theme="light"] .uc-card .more,
html[data-theme="light"] .card-index{ color:#4f4f54; }
html[data-theme="light"] .breadcrumb,
html[data-theme="light"] .breadcrumb a{ color:#707074; }
html[data-theme="light"] .breadcrumb a:hover{ color:#202022; }

html[data-theme="light"] .section-muted,
html[data-theme="light"] .parent-use-cases,
html[data-theme="light"] .seo-final-cta.section-muted{
  background:#e9e9e6;
  border-color:#d0d0cc;
}
html[data-theme="light"] .tool,
html[data-theme="light"] .price-card,
html[data-theme="light"] .post,
html[data-theme="light"] .uc-card,
html[data-theme="light"] .faq-item,
html[data-theme="light"] .process-step{
  background:#fafaf8;
  border-color:#d1d1cd;
}
html[data-theme="light"] .faq-q{ color:#18181a; }
html[data-theme="light"] .faq-q .plus{ color:#656568; }
html[data-theme="light"] .faq-a p{ color:#656568; }
html[data-theme="light"] .section h2.faq-group{ color:#4f4f54; }
html[data-theme="light"] .tool:hover,
html[data-theme="light"] .post:hover,
html[data-theme="light"] .uc-card:hover,
html[data-theme="light"] .faq-item:hover,
html[data-theme="light"] .process-step:hover{
  background:#f0f0ed;
  border-color:var(--card-accent, #a5a5a0);
}
html[data-theme="light"] .tpl-thumb,
html[data-theme="light"] .show-card,
html[data-theme="light"] .model-media,
html[data-theme="light"] .model-visual,
html[data-theme="light"] .page-video,
html[data-theme="light"] .template-preview,
html[data-theme="light"] .preview-screen,
html[data-theme="light"] .chat-sim{
  background:#e7e7e4;
  border-color:#c8c8c4;
  color:#5f5f63;
}
html[data-theme="light"] .tpl-card:hover .tpl-thumb,
html[data-theme="light"] .page-video:hover,
html[data-theme="light"] .template-preview:hover{
  background:#ddddda;
  border-color:#aaa9a5;
}
html[data-theme="light"] .template-meta span,
html[data-theme="light"] .ai-tag,
html[data-theme="light"] .tpl-badge{
  background:#e4e4e0;
  border-color:#c4c4c0;
  color:#4f4f53;
}
html[data-theme="light"] .hero-chat-input,
html[data-theme="light"] .chat-head,
html[data-theme="light"] .chat-input,
html[data-theme="light"] .modal input[type=email],
html[data-theme="light"] .sso-btn{
  background:#fafaf8;
  border-color:#c9c9c5;
  color:#202022;
}
html[data-theme="light"] .hero-chat-input.is-demo{ color:#8a8a8e; }
html[data-theme="light"] .hero-chat-input::placeholder,
html[data-theme="light"] .modal input[type=email]::placeholder{ color:#77777a; }
html[data-theme="light"] .msg.user,
html[data-theme="light"] .msg.ai,
html[data-theme="light"] .typing,
html[data-theme="light"] .preview-bar{
  background:#ededeb;
  border-color:#c8c8c5;
  color:#252527;
}
html[data-theme="light"] .chat-cta{ background:linear-gradient(transparent, #e7e7e4 55%); }

html[data-theme="light"] .btn,
html[data-theme="light"] .btn-light,
html[data-theme="light"] .btn-grad,
html[data-theme="light"] .btn-outline{
  background:rgba(255,255,253,.88);
  color:#202022;
  border-color:#9a9a96;
  box-shadow:0 8px 24px rgba(32,32,34,.08);
  backdrop-filter:blur(8px);
}
html[data-theme="light"] .btn:hover,
html[data-theme="light"] .btn-light:hover,
html[data-theme="light"] .btn-grad:hover,
html[data-theme="light"] .btn-outline:hover{
  background:linear-gradient(105deg, #dcd8ee, #d5e8da 52%, #ead7dd);
  background-size:180% 100%;
  color:#1d1d20;
  border-color:#777773;
  box-shadow:0 12px 30px rgba(47,74,55,.15);
}
html[data-theme="light"] .btn-ghost{
  background:transparent;
  color:#5f5f63;
  border-color:transparent;
}
html[data-theme="light"] .btn-ghost:hover{
  background:#e4e4e1;
  color:#202022;
  border-color:transparent;
}
html[data-theme="light"] .chat-attach,
html[data-theme="light"] .chat-send{
  background:#ffffff;
  border-color:#c8c8c4;
  color:#303033;
}
html[data-theme="light"] .chat-attach:hover,
html[data-theme="light"] .chat-send:hover{
  background:#ffffff;
  border-color:#9a9a96;
  color:#18181a;
}
html[data-theme="light"] .send-btn,
html[data-theme="light"] .play-ico{
  background:#d7d7d3;
  border-color:#a8a8a4;
  color:#303033;
}

html[data-theme="light"] footer{
  background:#e7e7e4;
  border-color:#cececa;
}
html[data-theme="light"] .footer-col h5,
html[data-theme="light"] .footer-bottom{ color:#68686b; }
html[data-theme="light"] .footer-col a:hover,
html[data-theme="light"] .legal-links a:hover{ color:#18181a; }
html[data-theme="light"] .social{
  background:#d8d8d4;
  border-color:#b9b9b5;
  color:#4d4d50;
}
html[data-theme="light"] .theme-toggle{
  background:#303033;
  color:#f5f5f3;
  border-color:#303033;
}
html[data-theme="light"] .theme-toggle::before{ content:"☾"; }
html[data-theme="light"] .modal-overlay{ background:rgba(30,30,32,.42); }
html[data-theme="light"] .modal{
  background:#fafaf8;
  border-color:#c8c8c4;
  color:#202022;
}

@media (prefers-reduced-motion:reduce){
  .theme-toggle{ transition:none; }
}

/* ==========================================================
   BLOG — finalized index + long-form article layout
   ========================================================== */

/* ---- Index: post grid with thumbnails ---- */
.post .thumb.has-img{ position:relative; padding:0; }
.post .thumb.has-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.post-body .read-time{ font-size:12px; color:var(--dim); margin-top:12px; font-family:var(--mono); }

/* ---- Article page ---- */
.article-head{ padding: 40px 24px 6px; text-align:center; }
.article-head .container{ max-width: 760px; }
.article-cat{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim);
}
.article-head h1{
  font-size: clamp(30px,4.6vw,50px); font-weight:800; letter-spacing:-.035em;
  line-height:1.08; margin:14px 0 16px;
}
.article-head .article-standfirst{ color:var(--mute); font-size:18px; max-width:640px; margin:0 auto; line-height:1.55; }
.article-meta{
  display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:center; align-items:center;
  margin-top:24px; font-size:13.5px; color:var(--mute); font-family:var(--mono);
}
.article-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--dim); }

.article-hero{
  max-width: 1000px; margin: 30px auto 0; padding:0 24px;
}
.article-hero img{
  width:100%; height:auto; display:block;
  border:1px solid var(--line-soft);
}
.article-hero figcaption{ font-size:12.5px; color:var(--dim); margin-top:10px; text-align:center; }

.article-wrap{
  max-width: 1080px; margin:0 auto; padding: 44px 24px 20px;
  display:grid; grid-template-columns: 220px minmax(0,1fr); gap:48px; align-items:start;
}
.article-toc{ position:sticky; top:96px; align-self:start; }
.article-toc .toc-label{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim); margin-bottom:14px;
}
.article-toc ol{ list-style:none; display:flex; flex-direction:column; gap:2px; }
.article-toc a{
  display:block; padding:7px 12px; font-size:13.5px; color:var(--mute);
  border-left:2px solid var(--line-soft); transition:color .15s, border-color .15s;
}
.article-toc a:hover{ color:var(--ink); border-left-color:var(--line); }

/* ---- Prose typography ---- */
.prose{ max-width: 720px; font-size:17px; line-height:1.75; color:#dcdcdc; }
.prose > * + *{ margin-top:22px; }
.prose h2{
  font-size:clamp(23px,2.6vw,30px); font-weight:700; letter-spacing:-.02em;
  margin-top:52px; padding-top:8px; scroll-margin-top:90px; color:var(--ink);
}
.prose h3{ font-size:19.5px; font-weight:600; margin-top:34px; color:var(--ink); letter-spacing:-.01em; }
.prose p{ color:#c9c9c9; }
.prose a{ color:#fff; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line); }
.prose a:hover{ text-decoration-color:#fff; }
.prose strong{ color:var(--ink); font-weight:650; }
.prose ul, .prose ol{ padding-left:22px; color:#c9c9c9; display:flex; flex-direction:column; gap:9px; }
.prose li{ padding-left:4px; }
.prose li::marker{ color:var(--dim); }
.prose figure img{ width:100%; height:auto; display:block; border:1px solid var(--line-soft); }
.prose figure figcaption{ font-size:12.5px; color:var(--dim); margin-top:9px; text-align:center; }

.prose blockquote{
  border-left:3px solid var(--line); padding:6px 0 6px 22px;
  font-size:19px; line-height:1.6; color:var(--ink); font-style:italic;
}
.prose blockquote cite{ display:block; margin-top:10px; font-size:13.5px; color:var(--dim); font-style:normal; font-family:var(--mono); }

/* ---- Tables ---- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line-soft); }
.prose table{ width:100%; border-collapse:collapse; font-size:14.5px; min-width:520px; }
.prose thead th{
  text-align:left; padding:13px 16px; background:var(--glass-2);
  font-family:var(--mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink); border-bottom:1px solid var(--line);
}
.prose tbody td{ padding:12px 16px; border-bottom:1px solid var(--line-soft); color:#c9c9c9; vertical-align:top; }
.prose tbody tr:last-child td{ border-bottom:none; }
.prose tbody tr:nth-child(even){ background:rgba(255,255,255,.02); }
.prose tbody td:first-child{ color:var(--ink); font-weight:600; }

/* ---- Callout / tip ---- */
.callout{
  border:1px solid var(--line-soft); border-left:3px solid var(--line);
  background:var(--glass); padding:18px 22px; font-size:15px; color:#c9c9c9;
}
.callout .callout-label{
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink); margin-bottom:6px;
}

/* ---- Key takeaways box ---- */
.takeaways{
  border:1px solid var(--line-soft); background:var(--glass-2); padding:24px 26px;
}
.takeaways h2{ margin-top:0 !important; font-size:18px !important; }
.takeaways ul{ margin-top:14px; }

/* ---- Stat row ---- */
.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.stat-card{ border:1px solid var(--line-soft); background:var(--glass); padding:22px 20px; text-align:center; }
.stat-card .stat-num{ font-size:34px; font-weight:800; letter-spacing:-.03em; color:var(--ink); }
.stat-card .stat-label{ font-size:13px; color:var(--mute); margin-top:6px; line-height:1.4; }

/* ---- Inline FAQ inside article ---- */
.prose + .article-faq, .article-faq{ max-width:720px; }
.article-faq-section{ padding-bottom:28px; }

/* ---- Related posts (minimal list) ---- */
.article-related{ max-width:720px; margin:12px auto 56px; padding:0 24px; }
.article-related .related-title{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); margin-bottom:12px;
}
.related-list{ list-style:none; display:flex; flex-direction:column; border-top:1px solid var(--line-soft); }
.related-list li{ border-bottom:1px solid var(--line-soft); }
.related-list a{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:14px 2px; font-size:15px; color:var(--ink);
  transition:color .15s;
}
.related-list a span{ color:var(--dim); flex-shrink:0; }
.related-list a:hover{ color:var(--mute); }

@media (max-width: 900px){
  .article-wrap{ grid-template-columns:1fr; gap:0; }
  .article-toc{ display:none; }
  .stat-row{ grid-template-columns:1fr; }
  .prose{ max-width:none; }
}

/* ---- Light theme ---- */
html[data-theme="light"] .prose{ color:#33333a; }
html[data-theme="light"] .prose p,
html[data-theme="light"] .prose ul,
html[data-theme="light"] .prose ol,
html[data-theme="light"] .prose tbody td{ color:#45454b; }
html[data-theme="light"] .prose h2, html[data-theme="light"] .prose h3, html[data-theme="light"] .prose strong{ color:#18181a; }
html[data-theme="light"] .prose a{ color:#18181a; text-decoration-color:#b9b9b5; }
html[data-theme="light"] .prose a:hover{ text-decoration-color:#18181a; }
html[data-theme="light"] .article-head .article-standfirst{ color:#656568; }
html[data-theme="light"] .article-standfirst, html[data-theme="light"] .article-meta{ color:#656568; }
html[data-theme="light"] .table-wrap, html[data-theme="light"] .prose figure img, html[data-theme="light"] .article-hero img{ border-color:#d1d1cd; }
html[data-theme="light"] .prose thead th{ background:#ececea; color:#18181a; border-bottom-color:#c8c8c4; }
html[data-theme="light"] .prose tbody td{ border-bottom-color:#e0e0dc; }
html[data-theme="light"] .prose tbody td:first-child{ color:#18181a; }
html[data-theme="light"] .prose tbody tr:nth-child(even){ background:#f0f0ed; }
html[data-theme="light"] .callout,
html[data-theme="light"] .takeaways,
html[data-theme="light"] .stat-card{ background:#fafaf8; border-color:#d1d1cd; color:#45454b; }
html[data-theme="light"] .callout .callout-label,
html[data-theme="light"] .stat-card .stat-num{ color:#18181a; }
html[data-theme="light"] .related-list,
html[data-theme="light"] .related-list li{ border-color:#d1d1cd; }
html[data-theme="light"] .related-list a{ color:#18181a; }
html[data-theme="light"] .related-list a:hover{ color:#656568; }
html[data-theme="light"] .article-toc a{ color:#656568; border-left-color:#d1d1cd; }
html[data-theme="light"] .article-toc a:hover{ color:#18181a; border-left-color:#a5a5a0; }
html[data-theme="light"] .prose blockquote{ color:#18181a; border-left-color:#b9b9b5; }

/* Cookie consent banner (public marketing site) */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:10050;
  background:#000; border-top:1px solid rgba(255,255,255,.12);
  padding:18px 20px; box-shadow:0 -8px 32px rgba(0,0,0,.45);
}
html[data-theme="light"] .cookie-banner{
  background:#fff; border-top-color:#d1d1cd; box-shadow:0 -8px 32px rgba(0,0,0,.08);
}
.cookie-banner-inner{
  max-width:1200px; margin:0 auto; display:flex; align-items:center;
  justify-content:space-between; gap:20px;
}
.cookie-banner-text{ flex:1; min-width:0; }
.cookie-banner-title{ font-size:15px; font-weight:700; margin-bottom:6px; }
html[data-theme="light"] .cookie-banner-title{ color:#18181a; }
.cookie-banner-body{ margin:0; color:var(--mute); font-size:13px; line-height:1.5; }
.cookie-banner-link{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.cookie-banner-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.cookie-banner-btn{
  border-radius:0; padding:10px 18px; font-size:11px; font-weight:700;
  letter-spacing:.14em; cursor:pointer; white-space:nowrap;
}
.cookie-banner-btn-reject{
  background:transparent; color:inherit; border:1px solid rgba(255,255,255,.85);
}
html[data-theme="light"] .cookie-banner-btn-reject{ border-color:#18181a; color:#18181a; }
.cookie-banner-btn-reject:hover{ background:rgba(255,255,255,.06); }
html[data-theme="light"] .cookie-banner-btn-reject:hover{ background:rgba(0,0,0,.04); }
.cookie-banner-btn-accept{ background:#fff; color:#000; border:1px solid #fff; }
html[data-theme="light"] .cookie-banner-btn-accept{ background:#18181a; color:#fff; border-color:#18181a; }
.cookie-banner-btn-accept:hover{ opacity:.92; }
@media (max-width:760px){
  .cookie-banner-inner{ flex-direction:column; align-items:stretch; }
  .cookie-banner-actions{ justify-content:flex-end; }
}