/* Wowly Studios marketing/legal site — BLACK-first, matching the neon logo.
   Brand blue #4D7CFF (primary), cyan #3FE0FF (accent), purple #8B3DFF
   (gradient end), #3D5BD9 (light-theme link). Shell is true black #000.
   No orange anywhere — the neon logo replaced the flat orange mark 2026-08-05. */

:root {
  /* Not pure #000: grain needs a floor to sit on, exactly like the light
     theme's #FCFBF8 rather than #FFF. Kept low so it reads black, not grey. */
  --bg: #050507;
  --surface: #0E0E11;
  --surface-2: #101013;
  --surface-3: #17171B;
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.12);
  --text: #FFFFFF;
  --text-dim: rgba(255, 255, 255, 0.62);
  --text-faint: rgba(255, 255, 255, 0.42);
  --brand: #4D7CFF;
  --brand-2: #3FE0FF;
  --purple: #C38FFF;
  --red: #FF525D;
  --link: #3FE0FF;
  --nav-link: rgba(255, 255, 255, 0.9);
  --nav-glow: rgba(63, 224, 255, 0.75);
  --radius: 20px;
}

[data-theme="light"] {
  --bg: #FCFBF8;
  --surface: #FFFFFF;
  --surface-2: #FFFFFF;
  --surface-3: #F5F3EE;
  --border: rgba(16, 33, 74, 0.09);
  --border-strong: rgba(16, 33, 74, 0.16);
  --text: #10214A;
  --text-dim: rgba(16, 33, 74, 0.66);
  --text-faint: rgba(16, 33, 74, 0.46);
  --link: #3D5BD9;
  --nav-link: rgba(16, 33, 74, 0.88);
  --nav-glow: rgba(61, 91, 217, 0.3);
}

/* Paper texture for the light theme — generated, not a downloaded image.
   Layer 1 is SVG fractal noise (the grain), layers 2 and 3 are hair-fine
   diagonals crossing to suggest a woven surface. Roughly 600 bytes total,
   resolution-independent, and it never tiles visibly. Dark theme keeps flat
   black so the neon logo and glows stay clean. */
[data-theme="light"] body {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E"),
    repeating-linear-gradient(45deg, rgba(72, 64, 48, 0.013) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(72, 64, 48, 0.01) 0 1px, transparent 1px 4px);
  background-size: 180px 180px, auto, auto;
  background-repeat: repeat;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  /* background-color, not the `background` shorthand — the shorthand would
     wipe the grain layers below (and the light theme's own texture). */
  background-color: var(--bg);
  /* Same paper grain as the light theme, in white instead of brown. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E"),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.011) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.008) 0 1px, transparent 1px 4px);
  background-size: 180px 180px, auto, auto;
  background-repeat: repeat;
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

::selection { background: rgba(77, 124, 255, 0.4); }

/* ---------- Header ---------- */
/* No header bar — the logo and nav sit straight on the page and scroll away
   with it. `relative` (not `static`) purely so z-index still applies, which is
   what keeps the overhanging logo painting above the hero. */
header {
  position: relative;
  z-index: 50;
  background: transparent;
  padding: 8px 0;
}
header .container { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; text-decoration: none; color: var(--text); margin: 0; padding: 0; line-height: 0; }
/* wordmark swaps with the theme — the navy "STUDIOS" is unreadable on dark */
/* The lockup is blob-dominant (STUDIOS is only ~14% of the artwork height), so
   it runs tall and is allowed to hang past the header. The negative bottom
   margin keeps its LAYOUT box at 60px, so the header stays slim while the
   artwork paints ~58px below it. */
.brand .brand-mark {
  width: auto;
  height: 118px;
  border-radius: 0;
  display: block;
  margin: 0 0 -58px;
  padding: 0;
}
.brand .on-light { display: none; }
[data-theme="light"] .brand .on-light { display: block; }
[data-theme="light"] .brand .on-dark { display: none; }
@media (max-width: 720px) { .brand .brand-mark { height: 86px; margin-bottom: -42px; } }
nav { display: flex; align-items: center; gap: 24px; }
nav a { color: var(--nav-link); text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s, text-shadow 0.2s; white-space: nowrap; }
nav a:hover { color: var(--text); text-shadow: 0 0 14px var(--nav-glow); }
nav a.nav-cta {
  color: #04121C;
  background: linear-gradient(135deg, var(--brand-2), #2F6BFF);
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 4px 18px rgba(63, 224, 255, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}
nav a.nav-cta:hover { color: #04121C; transform: translateY(-1px); box-shadow: 0 6px 26px rgba(63, 224, 255, 0.5); text-shadow: none; }
@media (max-width: 560px) {
  nav { gap: 14px; }
  nav a { font-size: 13px; }
  nav a.nav-cta, nav a.nav-how, nav a.nav-pricing, nav a.nav-wowly { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 90px 0 70px;
  /* No clipping: the background glow sits at top:-240px, so `overflow:hidden`
     sliced it off at the hero's top edge and drew a hard line that looked like
     a header bar. Letting it bleed upward keeps the top seamless. */
  overflow: visible;
}
.hero::before {
  content: "";
  position: absolute;
  top: -240px;
  left: 50%;
  transform: translateX(-50%);
  width: 1100px;
  height: 700px;
  background:
    radial-gradient(ellipse 600px 420px at 38% 30%, rgba(77, 124, 255, 0.22), transparent 65%),
    radial-gradient(ellipse 520px 380px at 68% 45%, rgba(63, 224, 255, 0.13), transparent 65%),
    radial-gradient(ellipse 420px 320px at 55% 70%, rgba(195, 143, 255, 0.08), transparent 65%);
  pointer-events: none;
}
.hero .container {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: center;
  gap: 56px;
}
.hero-copy { max-width: 560px; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(63, 224, 255, 0.35);
  background: rgba(63, 224, 255, 0.08);
  color: var(--brand-2);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  margin-bottom: 26px;
}
.pill .pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand-2);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(63, 224, 255, 0.55); }
  50% { box-shadow: 0 0 0 6px rgba(63, 224, 255, 0); }
}
.hero h1 {
  font-size: clamp(34px, 4.6vw, 54px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1.2px;
  margin-bottom: 20px;
}
.hero h1 .accent {
  background: linear-gradient(95deg, var(--brand) 10%, var(--brand-2) 60%, var(--purple) 110%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p.sub {
  color: var(--text-dim);
  font-size: 18px;
  max-width: 480px;
  margin-bottom: 34px;
}
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 30px; }
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--brand-2), #2F6BFF);
  color: #04121C;
  text-decoration: none;
  font-weight: 700;
  font-size: 15.5px;
  padding: 14px 30px;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(63, 224, 255, 0.32);
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(63, 224, 255, 0.5); }
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 15.5px;
  padding: 14px 26px;
  border-radius: 14px;
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.03);
  transition: background 0.2s, border-color 0.2s;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.2); }
.hero-trust { color: var(--text-faint); font-size: 13.5px; }
.hero-trust strong { color: var(--text-dim); font-weight: 600; }

/* ---------- Phone mockup ---------- */
.phone-wrap {
  position: relative;
  display: flex;
  justify-content: center;
}
.phone-wrap::before {
  content: "";
  position: absolute;
  inset: -10% -16%;
  background: radial-gradient(ellipse at 50% 45%, rgba(77, 124, 255, 0.22), transparent 62%);
  filter: blur(10px);
  pointer-events: none;
}
.phone {
  position: relative;
  width: 296px;
  border-radius: 44px;
  padding: 12px;
  background: linear-gradient(160deg, #2a2f3a, #14171e 40%, #1d212b);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.09),
    0 30px 80px rgba(0, 0, 0, 0.65),
    0 8px 28px rgba(77, 124, 255, 0.12);
  animation: floaty 7s ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
  .phone { animation: none; }
  .pill .pulse { animation: none; }
}
.screen {
  background: #0A0C10;
  color: #FFFFFF;
  border-radius: 34px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.notch {
  width: 96px; height: 22px;
  background: #000;
  border-radius: 0 0 14px 14px;
  margin: 0 auto 10px;
}
.app-bar {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 18px 12px;
}
.app-bar img { width: 26px; height: 26px; border-radius: 7px; }
.app-bar .t { font-size: 12.5px; font-weight: 700; }
.app-bar .s { font-size: 10px; color: var(--brand-2); font-weight: 600; }
.post-card {
  margin: 0 14px 14px;
  background: #141821;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  overflow: hidden;
}
.post-art {
  position: relative;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(circle at 78% 14%, rgba(255, 82, 93, 0.55), transparent 34%),
    radial-gradient(circle at 18% 88%, rgba(63, 224, 255, 0.4), transparent 46%),
    linear-gradient(150deg, #1b3f8f 0%, #2a6ae0 48%, #163070 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 18px;
}
.post-art .badge-day {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.post-art .headline {
  font-size: 21px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.3px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.post-art .brand-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(4px);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 700;
}
.post-art .brand-chip img { width: 13px; height: 13px; border-radius: 4px; }
.post-meta { padding: 12px 14px 14px; }
.cap-line { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); margin-bottom: 6px; }
.cap-line.w70 { width: 70%; }
.tags { display: flex; gap: 5px; margin: 9px 0 12px; flex-wrap: wrap; }
.tag {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--brand-2);
  background: rgba(63, 224, 255, 0.1);
  border: 1px solid rgba(63, 224, 255, 0.25);
  border-radius: 999px;
  padding: 2.5px 8px;
}
.post-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: linear-gradient(135deg, var(--brand), #8B3DFF);
  border-radius: 11px;
  padding: 10px;
  font-size: 11.5px;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(77, 124, 255, 0.4);
}
.home-dots { display: flex; justify-content: center; gap: 5px; padding: 2px 0 12px; }
.home-dots i { width: 4.5px; height: 4.5px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.home-dots i.on { background: var(--brand-2); width: 14px; border-radius: 3px; }

/* floating chips around the phone */
.float-chip {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #FFFFFF;
  background: rgba(20, 24, 33, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 13px;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  white-space: nowrap;
}
.float-chip .ico { font-size: 15px; }
.float-chip.c1 { top: 12%; left: -8%; animation: floaty 8s 0.6s ease-in-out infinite; }
.float-chip.c2 { top: 44%; right: -12%; animation: floaty 9s 1.4s ease-in-out infinite; }
.float-chip.c3 { bottom: 9%; left: -4%; animation: floaty 7.5s 0.2s ease-in-out infinite; }
@media (max-width: 1020px) {
  .float-chip.c1 { left: 2%; }
  .float-chip.c2 { right: 0; }
  .float-chip.c3 { left: 6%; }
}
@media (max-width: 560px) {
  .float-chip { display: none; }
}

@media (max-width: 880px) {
  .hero { padding: 60px 0 50px; }
  .hero .container { grid-template-columns: 1fr; gap: 64px; }
  .hero-copy { max-width: 100%; text-align: center; margin: 0 auto; }
  .hero p.sub { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
}

/* ---------- Logo strip / audience ---------- */
.audience {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 22px 0;
  background: rgba(255, 255, 255, 0.015);
}
.audience .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.audience .label { color: var(--text-faint); font-size: 13px; font-weight: 500; text-align: center; }
.aud-marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.aud-track {
  display: flex;
  width: max-content;
  animation: audScroll 32s linear infinite;
}
.aud-marquee:hover .aud-track { animation-play-state: paused; }
@keyframes audScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.aud-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  white-space: nowrap;
  margin-right: 14px;
  color: var(--text-dim);
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 7px 16px;
}

/* ---------- Home slider ---------- */
.showcase { padding: 72px 0 0; }
.slider { position: relative; }
.slides {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-radius: 24px;
  border: 1px solid var(--border-strong);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5), 0 6px 24px rgba(77, 124, 255, 0.1);
  scrollbar-width: none;
}
.slides::-webkit-scrollbar { display: none; }
.slides img {
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: block;
}
.slider-dots { display: flex; justify-content: center; gap: 9px; margin-top: 20px; }
.slider-dots button {
  width: 8px; height: 8px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: background 0.25s, width 0.25s;
}
.slider-dots button.on { background: var(--brand-2); width: 26px; }
@media (max-width: 560px) {
  .showcase { padding-top: 48px; }
  .slides { border-radius: 16px; }
}

/* ---------- Sections ---------- */
section.block { padding: 88px 0; }
.kicker {
  display: block;
  text-align: center;
  color: var(--brand-2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
h2.section-title {
  text-align: center;
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  letter-spacing: -0.8px;
  line-height: 1.2;
  max-width: 620px;
  margin: 0 auto 14px;
}
p.section-sub {
  text-align: center;
  color: var(--text-dim);
  font-size: 16.5px;
  max-width: 540px;
  margin: 0 auto 56px;
}

/* ---------- How it works ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.step {
  position: relative;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 26px 28px;
  transition: transform 0.25s, border-color 0.25s;
}
.step:hover { transform: translateY(-4px); border-color: rgba(77, 124, 255, 0.35); }
.step .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(77, 124, 255, 0.22), rgba(63, 224, 255, 0.12));
  border: 1px solid rgba(77, 124, 255, 0.4);
  color: var(--brand-2);
  font-weight: 800;
  font-size: 17px;
  margin-bottom: 18px;
}
.step h3 { font-size: 18.5px; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 8px; }
.step p { color: var(--text-dim); font-size: 14.5px; }
@media (max-width: 880px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Features ---------- */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: left;
  transition: transform 0.25s, border-color 0.25s, background 0.25s;
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(63, 224, 255, 0.3);
  background: var(--surface-2);
}
.card .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  font-size: 21px;
  border-radius: 14px;
  background: rgba(77, 124, 255, 0.12);
  border: 1px solid rgba(77, 124, 255, 0.25);
  margin-bottom: 18px;
}
.card h3 { font-size: 16.5px; font-weight: 700; letter-spacing: -0.2px; margin-bottom: 7px; }
.card p { color: var(--text-dim); font-size: 14px; }
@media (max-width: 880px) { .features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .features { grid-template-columns: 1fr; } }

/* ---------- Pricing ---------- */
.price-wrap {
  border: 1px solid var(--border-strong);
  border-radius: 26px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}
[data-theme="light"] .price-wrap { box-shadow: 0 20px 55px rgba(16, 33, 74, 0.10); }
table.price-table { width: 100%; border-collapse: collapse; }
.price-table th, .price-table td { padding: 9px 22px; vertical-align: middle; }
.price-table thead th { padding-top: 16px; padding-bottom: 12px; text-align: center; }
.plan-head .plan-name {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 3px;
}
.plan-head .plan-price {
  display: block;
  font-size: clamp(21px, 2.2vw, 25px);
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.1;
}
.plan-head.pro .plan-price {
  background: linear-gradient(95deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.plan-head .plan-per { display: block; color: var(--text-faint); font-size: 12px; font-weight: 500; margin-top: 2px; }
.plan-tag {
  display: inline-block;
  background: linear-gradient(135deg, var(--brand), #8B3DFF);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 6px;
  box-shadow: 0 4px 16px rgba(77, 124, 255, 0.35);
}
.price-table tbody td { border-top: 1px solid var(--border); font-size: 13.5px; }
.price-table td.feat { text-align: left; font-weight: 600; width: 26%; }
.price-table td.feat small,
.price-table td.val small { display: block; font-weight: 500; color: var(--text-faint); font-size: 12px; margin-top: 2px; }
.price-table td.val { text-align: center; color: var(--text-dim); }
.price-table td.val b { color: var(--text); font-weight: 700; font-size: 15px; }
.price-table td.val.pro { color: var(--text); }
.price-table .yes { color: #34D399; font-weight: 700; }
.price-table .no { color: var(--text-faint); }
.price-table th.pro, .price-table td.pro { background: rgba(77, 124, 255, 0.07); }
.price-table tr.cta-row td { padding: 14px 12px 18px; }
.price-table .btn-primary, .price-table .btn-ghost { padding: 10px 18px; font-size: 13.5px; white-space: nowrap; }
.price-table .steal { margin-top: 9px; max-width: 240px; margin-left: auto; margin-right: auto; line-height: 1.5; }
.price-foot { text-align: center; color: var(--text-faint); font-size: 13.5px; margin-top: 18px; }
@media (max-width: 700px) {
  .price-table, .price-table thead, .price-table tbody { display: block; }
  .price-table thead tr, .price-table tbody tr { display: grid; grid-template-columns: 1fr 1fr 1fr; }
  .price-table th.feat-col { display: none; }
  .price-table th.pro, .price-table td.pro { background: none; }
  .price-table thead th.pro { background: rgba(77, 124, 255, 0.08); border-radius: 0 0 12px 12px; }
  .price-table thead th { padding: 14px 6px 12px; }
  .plan-head .plan-price { font-size: 19px; }
  .plan-head .plan-per { font-size: 12.5px; }
  .plan-tag { font-size: 12px; padding: 3px 8px; }
  .price-table tbody tr { border-top: 1px solid var(--border); padding: 9px 0 10px; }
  .price-table tbody td { border-top: none; padding: 0 8px; }
  .price-table td.feat { grid-column: 1 / -1; width: auto; padding: 0 16px 7px; }
  .price-table td.val {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 12px;
  }
  .price-table tr.cta-row td { padding: 16px 4px 6px; }
  .price-table tr.cta-row td.feat { display: none; }
  .price-table .btn-primary, .price-table .btn-ghost { padding: 10px 10px; font-size: 12px; text-align: center; width: 100%; justify-content: center; }
}

/* ---------- Highlight banner ---------- */
.banner {
  position: relative;
  border-radius: 28px;
  border: 1px solid rgba(77, 124, 255, 0.3);
  background:
    radial-gradient(ellipse 480px 280px at 18% 0%, rgba(77, 124, 255, 0.28), transparent 65%),
    radial-gradient(ellipse 420px 260px at 88% 110%, rgba(63, 224, 255, 0.16), transparent 60%),
    linear-gradient(160deg, #11182a, #0c1018);
  padding: 64px 48px;
  text-align: center;
  overflow: hidden;
  color: #FFFFFF;
}
.banner h2 {
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 800;
  letter-spacing: -0.8px;
  margin-bottom: 14px;
}
.banner h2 .accent {
  background: linear-gradient(95deg, var(--brand-2), var(--purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.banner p { color: rgba(255, 255, 255, 0.62); font-size: 17px; max-width: 520px; margin: 0 auto 32px; }
@media (max-width: 600px) { .banner { padding: 48px 24px; } }

/* ---------- Download / CTA ---------- */
.store-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 12px 22px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.2s, transform 0.2s;
}
.store-badge:hover { border-color: rgba(255, 255, 255, 0.28); transform: translateY(-2px); }
.store-badge .glyph { font-size: 26px; line-height: 1; }
.store-badge .lines { text-align: left; line-height: 1.25; }
.store-badge .small { display: block; font-size: 12.5px; color: var(--text-faint); letter-spacing: 0.4px; text-transform: uppercase; font-weight: 600; }
.store-badge .big { display: block; font-size: 16.5px; font-weight: 700; letter-spacing: -0.2px; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Legal pages ---------- */
main.legal { max-width: 760px; margin: 0 auto; padding: 64px 24px 90px; }
main.legal h1 { font-size: 34px; font-weight: 800; letter-spacing: -0.6px; margin-bottom: 6px; }
main.legal p.updated { color: var(--text-faint); font-size: 14px; margin-bottom: 38px; }
main.legal h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; margin: 38px 0 10px; }
main.legal p, main.legal li { color: var(--text-dim); font-size: 15.5px; margin-bottom: 10px; }
main.legal ul { padding-left: 22px; margin-bottom: 12px; }
main.legal a { color: var(--link); }
main.legal strong { color: var(--text); }
main.legal .note {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 18px 0;
}

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--border);
  padding: 44px 0 56px;
  color: var(--text-faint);
  font-size: 13.5px;
  background: rgba(255, 255, 255, 0.012);
}
footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 28px;
  align-items: center;
  justify-content: space-between;
}
.foot-brand { display: flex; align-items: center; gap: 10px; }
.foot-brand img { width: 26px; height: 26px; border-radius: 7px; }
.foot-brand span { color: var(--text-dim); font-weight: 700; font-size: 14.5px; }
footer a { color: var(--text-faint); text-decoration: none; margin-right: 18px; transition: color 0.2s; }
footer a:hover { color: var(--text); }
footer a:last-child { margin-right: 0; }

/* ---------- Theme toggle ---------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.theme-toggle:hover { color: var(--text); background: rgba(127, 127, 127, 0.08); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .ic-moon { display: none; }
[data-theme="light"] .theme-toggle .ic-sun { display: none; }
[data-theme="light"] .theme-toggle .ic-moon { display: block; }

/* ---------- Light theme overrides ---------- */
/* header stays transparent in both themes — there is no header bar */
[data-theme="light"] .hero::before {
  background:
    radial-gradient(ellipse 600px 420px at 38% 30%, rgba(77, 124, 255, 0.13), transparent 65%),
    radial-gradient(ellipse 520px 380px at 68% 45%, rgba(63, 224, 255, 0.1), transparent 65%),
    radial-gradient(ellipse 420px 320px at 55% 70%, rgba(195, 143, 255, 0.07), transparent 65%);
}
[data-theme="light"] .pill {
  color: #3D5BD9;
  border-color: rgba(77, 124, 255, 0.35);
  background: rgba(77, 124, 255, 0.07);
}
[data-theme="light"] .pill .pulse { background: #3D5BD9; }
@keyframes pulseLight {
  0%, 100% { box-shadow: 0 0 0 0 rgba(61, 91, 217, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(61, 91, 217, 0); }
}
[data-theme="light"] .pill .pulse { animation-name: pulseLight; }
[data-theme="light"] .hero h1 .accent {
  background: linear-gradient(95deg, #3D5BD9 10%, #4D7CFF 55%, #8A4DE8 110%);
  -webkit-background-clip: text;
  background-clip: text;
}
[data-theme="light"] .btn-ghost { background: rgba(16, 33, 74, 0.03); }
[data-theme="light"] .btn-ghost:hover { background: rgba(16, 33, 74, 0.07); border-color: rgba(16, 33, 74, 0.25); }
[data-theme="light"] .phone-wrap::before {
  background: radial-gradient(ellipse at 50% 45%, rgba(77, 124, 255, 0.16), transparent 62%);
}
[data-theme="light"] .phone {
  box-shadow:
    0 0 0 1px rgba(16, 33, 74, 0.08),
    0 30px 80px rgba(16, 33, 74, 0.25),
    0 8px 28px rgba(77, 124, 255, 0.12);
}
/* On the near-white paper the default chip (white fill, 9% border, 66% text)
   almost vanishes — lift the border, text and add a hairline shadow so the
   strip reads as a row of chips rather than a grey smudge. */
[data-theme="light"] .audience { background: rgba(16, 33, 74, 0.028); }
[data-theme="light"] .audience .label { color: rgba(16, 33, 74, 0.62); }
[data-theme="light"] .aud-chip {
  color: rgba(16, 33, 74, 0.88);
  border-color: rgba(16, 33, 74, 0.17);
  box-shadow: 0 1px 2px rgba(16, 33, 74, 0.06);
}
[data-theme="light"] .kicker { color: #3D5BD9; }
[data-theme="light"] .step .num { color: #3D5BD9; }
[data-theme="light"] .step:hover,
[data-theme="light"] .card:hover { border-color: rgba(77, 124, 255, 0.45); }
[data-theme="light"] .slides {
  box-shadow: 0 24px 60px rgba(16, 33, 74, 0.18), 0 6px 24px rgba(77, 124, 255, 0.1);
}
[data-theme="light"] .slider-dots button { background: rgba(16, 33, 74, 0.18); }
[data-theme="light"] .slider-dots button.on { background: var(--brand); }
[data-theme="light"] .store-badge:hover { border-color: rgba(16, 33, 74, 0.3); }
[data-theme="light"] footer { background: rgba(16, 33, 74, 0.018); }

/* ===================================================================
   "See it in action" — three live demos, each scoped to avoid clashes
   (.demoA = publish queue · .demoB = autopilot toggle · .demoC = feed)
   =================================================================== */
.demos .section-sub { margin-bottom: 64px; }
.demo-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.demo-row + .demo-row { margin-top: 80px; }
.demo-row.reverse .demo-copy { order: 2; }
.demo-row.reverse .demo-stage { order: 1; }
.demo-copy h3 {
  font-size: clamp(22px, 2.7vw, 31px);
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.2;
  margin-bottom: 12px;
}
.demo-copy p { color: var(--text-dim); font-size: 16.5px; max-width: 440px; }
.demo-copy p em { color: var(--brand-2); font-style: normal; font-weight: 600; }
.demo-row.reverse .demo-copy p { margin-left: auto; }
.demo-stage { display: flex; justify-content: center; }
.demo-stage > div { width: 100%; max-width: 440px; }
@media (max-width: 880px) {
  .demo-row, .demo-row.reverse { grid-template-columns: 1fr; gap: 26px; }
  .demo-row.reverse .demo-copy { order: 1; }
  .demo-row.reverse .demo-stage { order: 2; }
  .demo-copy { text-align: center; }
  .demo-copy p, .demo-row.reverse .demo-copy p { margin-left: auto; margin-right: auto; }
}

/* ---- Demo A: live publish queue (dark) ---- */
.demoA {
  --surface: #11151D; --surface-2: #161B25;
  --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.14);
  --cyan: #3FE0FF; --mint: #34D399;
  --dim: rgba(255,255,255,0.6); --dim-2: rgba(255,255,255,0.42);
}
.demoA .queue-card { position:relative; background:linear-gradient(180deg,var(--surface-2),var(--surface)); border:1px solid var(--border); border-radius:22px; padding:22px 22px 20px; box-shadow:0 30px 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04); }
.demoA .queue-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--border); }
.demoA .queue-title { font-family:"Inter",sans-serif; font-weight:700; font-size:15px; color:#fff; }
.demoA .queue-title small { display:block; font-family:"Inter",sans-serif; font-weight:500; font-size:12px; color:var(--dim-2); }
.demoA .live-badge { display:inline-flex; align-items:center; gap:7px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:11px; color:var(--mint); background:rgba(52,211,153,0.10); border:1px solid rgba(52,211,153,0.28); padding:5px 10px; border-radius:999px; }
.demoA .live-badge .ld { width:7px; height:7px; border-radius:50%; background:var(--mint); animation:livePulse 1.6s infinite ease-in-out; }
.demoA .q-row { display:flex; align-items:center; gap:14px; padding:13px 12px; border-radius:13px; transition:background .3s; }
.demoA .q-row + .q-row { margin-top:4px; }
.demoA .q-time { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:13px; color:var(--dim); width:46px; flex:none; }
.demoA .q-thumb { width:38px; height:38px; border-radius:9px; flex:none; }
.demoA .q-mid { flex:1; min-width:0; display:flex; flex-direction:column; }
.demoA .q-name { font-size:14px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.demoA .q-day { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:11px; color:var(--dim-2); margin-top:1px; }
.demoA .q-status { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:11px; font-weight:500; padding:5px 9px; border-radius:999px; white-space:nowrap; flex:none; border:1px solid var(--border); color:var(--dim); background:var(--surface); transition:all .35s; }
.demoA .q-row.posted { background:rgba(52,211,153,0.06); }
.demoA .q-row.posted .q-status { color:var(--mint); border-color:rgba(52,211,153,0.35); background:rgba(52,211,153,0.10); }
.demoA .q-row.flash { animation:mintPulse 1s ease-out; }
.demoA .q-row.active .q-status { color:var(--cyan); border-color:rgba(63, 224, 255, 0.35); background:rgba(63, 224, 255, 0.08); }
.demoA .queue-foot { margin-top:16px; padding-top:14px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--dim-2); }
.demoA .queue-foot .mono { color:var(--dim); font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
@keyframes livePulse { 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(52,211,153,0.5);} 50%{opacity:.55;box-shadow:0 0 0 5px rgba(52,211,153,0);} }
@keyframes mintPulse { 0%{box-shadow:0 0 0 0 rgba(52,211,153,0.45);} 100%{box-shadow:0 0 0 16px rgba(52,211,153,0);} }

/* ---- Demo B: autopilot toggle (dark, matches A & C) ---- */
.demoB {
  --ink:#FFFFFF; --ink-soft:rgba(255,255,255,0.6);
  --brand:#3FE0FF; --mint:#34D399;
  --border:rgba(255,255,255,0.08);
  color:var(--ink);
}
.demoB .panel { background:linear-gradient(180deg,#161B25,#11151D); border:1px solid var(--border); border-radius:28px; padding:26px; box-shadow:0 30px 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04); position:relative; }
.demoB .panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.demoB .panel-title { font-family:"Inter",sans-serif; font-weight:700; font-size:17px; color:var(--ink); }
.demoB .panel-sub { font-size:13.5px; color:var(--ink-soft); margin:0 0 18px; }
.demoB .toggle-row { display:flex; align-items:center; gap:16px; background:rgba(255,255,255,0.035); border:1px solid var(--border); border-radius:18px; padding:16px 18px; }
.demoB .toggle-text { flex:1; }
.demoB .toggle-text .t1 { font-family:"Inter",sans-serif; font-weight:600; font-size:15.5px; color:var(--ink); }
.demoB .toggle-text .t2 { font-size:13px; color:var(--ink-soft); }
.demoB .switch { flex:none; width:78px; height:42px; border-radius:999px; border:0; cursor:pointer; padding:0; background:rgba(255,255,255,0.14); position:relative; transition:background .45s cubic-bezier(.5,1.4,.6,1); box-shadow:inset 0 1px 3px rgba(0,0,0,0.35); }
.demoB .switch[aria-pressed="true"] { background:var(--mint); }
.demoB .knob { position:absolute; top:4px; left:4px; width:34px; height:34px; border-radius:50%; background:#fff; box-shadow:0 4px 12px -2px rgba(0,0,0,0.6); transition:left .45s cubic-bezier(.5,1.4,.6,1); }
.demoB .switch[aria-pressed="true"] .knob { left:40px; }
.demoB .state-label { font-family:"Inter",sans-serif; font-weight:700; font-size:15px; width:34px; text-align:center; color:var(--ink-soft); transition:color .3s; }
.demoB .switch[aria-pressed="true"] ~ .state-label { color:var(--mint); }
.demoB .week-label { font-size:12.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); margin:22px 0 12px; }
.demoB .post-stack { display:grid; gap:12px; }
.demoB .post-card { display:flex; align-items:center; gap:14px; background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:16px; padding:11px 13px; box-shadow:0 6px 18px rgba(0,0,0,0.35); opacity:0; transform:translateY(14px); }
.demoB .post-stack.is-on .post-card { animation:cardIn .55s cubic-bezier(.2,.8,.3,1) forwards; }
.demoB .post-stack.is-on .post-card:nth-child(1) { animation-delay:.30s; }
.demoB .post-stack.is-on .post-card:nth-child(2) { animation-delay:.46s; }
.demoB .post-stack.is-on .post-card:nth-child(3) { animation-delay:.62s; }
.demoB .post-stack.is-on .post-card:nth-child(4) { animation-delay:.78s; }
@keyframes cardIn { to { opacity:1; transform:translateY(0); } }
.demoB .thumb { width:46px; height:46px; border-radius:12px; flex:none; box-shadow:0 6px 16px rgba(0,0,0,0.4); }
.demoB .tA { background:linear-gradient(135deg,#2a6ae0,#163070); }
.demoB .tB { background:linear-gradient(135deg,#FF525D,#B8313B); }
.demoB .tC { background:linear-gradient(135deg,#34D399,#1F8F6A); }
.demoB .tD { background:linear-gradient(135deg,#C38FFF,#7A3FD0); }
.demoB .pc-body { flex:1; min-width:0; }
.demoB .pc-day { font-size:12px; color:var(--ink-soft); font-weight:600; }
.demoB .pc-title { font-family:"Inter",sans-serif; font-weight:600; font-size:14.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.demoB .chip { flex:none; font-size:12px; font-weight:700; padding:5px 11px; border-radius:999px; }
.demoB .chip.posted { background:rgba(52,211,153,0.12); color:var(--mint); border:1px solid rgba(52,211,153,0.28); }
.demoB .chip.sched { background:rgba(63, 224, 255, 0.1); color:var(--brand); border:1px solid rgba(63, 224, 255, 0.28); }

/* ---- Demo C: self-filling feed (dark) ---- */
.demoC {
  --surface:#16181F; --border:rgba(255,255,255,0.08);
  --primary:#4D7CFF; --cyan:#3FE0FF; --pink:#FF5C8A;
  --violet:#C38FFF; --mint:#34D399; --dim:rgba(255,255,255,0.6);
}
.demoC .phone-frame { background:var(--surface); border:1px solid var(--border); border-radius:26px; padding:16px; box-shadow:0 30px 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04); position:relative; }
.demoC .phone-top { display:flex; align-items:center; gap:10px; padding:4px 6px 14px; }
.demoC .ptop-logo { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--violet),var(--pink)); flex:none; }
.demoC .ptop-meta { font-size:13px; }
.demoC .ptop-meta b { font-family:"Inter",sans-serif; font-weight:700; display:block; font-size:14px; color:#fff; }
.demoC .ptop-meta span { color:var(--dim); font-size:11.5px; }
.demoC .ptop-live { margin-left:auto; font-size:10.5px; font-weight:600; color:var(--mint); background:rgba(52,211,153,0.12); border:1px solid rgba(52,211,153,0.3); padding:4px 9px; border-radius:999px; display:flex; align-items:center; gap:6px; }
.demoC .ptop-live .blip { width:6px; height:6px; border-radius:50%; background:var(--mint); animation:blink 1.6s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
.demoC .ig-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.demoC .slot { position:relative; aspect-ratio:1/1; border-radius:11px; overflow:hidden; border:1.5px dashed rgba(255,255,255,0.12); background:rgba(255,255,255,0.015); display:flex; align-items:center; justify-content:center; }
.demoC .slot .ph { font-size:18px; color:rgba(255,255,255,0.14); font-weight:700; }
.demoC .tile { position:absolute; inset:0; border-radius:11px; display:flex; flex-direction:column; justify-content:flex-end; padding:9px; color:#fff; opacity:0; transform:translateY(-10px) scale(.92); transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); overflow:hidden; }
.demoC .tile.show { opacity:1; transform:none; }
.demoC .tile::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 38%,rgba(0,0,0,0.45)); }
.demoC .tile .head { position:relative; z-index:2; font-family:"Inter",sans-serif; font-weight:800; font-size:12.5px; line-height:1.1; letter-spacing:-0.01em; text-shadow:0 1px 6px rgba(0,0,0,.4); }
.demoC .tile .chip { position:relative; z-index:2; display:inline-flex; align-items:center; gap:5px; margin-top:6px; font-size:8.5px; font-weight:600; background:rgba(0,0,0,0.32); border:1px solid rgba(255,255,255,0.25); padding:3px 7px; border-radius:999px; width:fit-content; backdrop-filter:blur(4px); }
.demoC .tile .chip i { width:5px; height:5px; border-radius:2px; background:#fff; display:block; }
.demoC .tile .auto { position:absolute; top:8px; right:8px; z-index:3; font-size:8px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:rgba(12,13,17,0.55); border:1px solid rgba(255,255,255,0.28); color:#fff; padding:3px 7px; border-radius:999px; backdrop-filter:blur(4px); display:flex; align-items:center; gap:4px; }
.demoC .tile .auto b { width:5px; height:5px; border-radius:50%; background:var(--mint); display:block; }
.demoC .grid-cap { display:flex; align-items:center; gap:8px; margin-top:14px; font-size:12px; color:var(--dim); justify-content:center; }
.demoC .grid-cap b { color:var(--mint); font-weight:600; }

@media (prefers-reduced-motion: reduce) {
  .demoA *, .demoB *, .demoC * { animation:none !important; transition:none !important; }
  .demoB .post-card { opacity:1; transform:none; }
}

/* ---------- Hero phone: cycling post ---------- */
#heroCard { transition: opacity 0.42s ease; }
#heroCard.swapping { opacity: 0; }
#heroArt { transition: background 0.42s ease; }

/* ---------- "Try it" generate demo ---------- */
.try-demo {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 44px;
  align-items: center;
  max-width: 880px;
  margin: 0 auto;
}
.try-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; }
.try-chip {
  cursor: pointer;
  font-family: inherit;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.try-chip:hover { color: var(--text); }
.try-chip.active {
  background: linear-gradient(135deg, var(--brand), #8B3DFF);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(77, 124, 255, 0.4);
}
.try-gen { border: none; cursor: pointer; font-family: inherit; }
.try-gen:disabled { opacity: 0.7; cursor: wait; }
.try-note { margin-top: 14px; font-size: 13px; color: var(--text-faint); }
.try-preview {
  width: 320px;
  justify-self: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  min-height: 380px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
.try-preview .post-art { aspect-ratio: 4 / 5; }
.try-cap { padding: 14px 16px 16px; }
.try-cap p { font-size: 13.5px; color: var(--text-dim); margin-bottom: 10px; }
.try-shimmer {
  height: 380px;
  background: linear-gradient(110deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%);
  background-size: 200% 100%;
  animation: trySh 1.1s linear infinite;
}
@keyframes trySh { to { background-position: -200% 0; } }
@media (max-width: 760px) {
  .try-demo { grid-template-columns: 1fr; gap: 28px; }
  .try-controls { text-align: center; }
  .try-chips { justify-content: center; }
  .try-preview { justify-self: center; }
}
[data-theme="light"] .try-preview { box-shadow: 0 24px 60px rgba(16, 33, 74, 0.14); }
@media (prefers-reduced-motion: reduce) {
  #heroCard, #heroArt { transition: none; }
  .try-shimmer { animation: none; }
  .aud-track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; row-gap: 12px; }
  .aud-marquee { -webkit-mask-image: none; mask-image: none; }
}

/* ===================================================================
   LIVE "APP-SCREEN" COMPONENTS — lifted from the in-app City home.
   These stay dark in both themes (they read as real phone screens),
   matching the .demoA/B/C convention.
   =================================================================== */

/* --- Hero phone: scrolling results ticker --- */
.mini-tick {
  background: #03060D;
  border-bottom: 1px solid rgba(63, 224, 255, 0.22);
  overflow: hidden;
  white-space: nowrap;
  padding: 7px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mini-tick-track {
  display: inline-flex;
  width: max-content;
  gap: 22px;
  padding-left: 22px;
  animation: tickScroll 22s linear infinite;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 1.2px;
  color: #9FD8F5;
  text-transform: uppercase;
}
.mini-tick-track span { flex: 0 0 auto; }
.mini-tick-track b { color: #fff; }
@keyframes tickScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- Shared dark app-card + crossfade rotator + status dot --- */
.app-card {
  background: linear-gradient(180deg, #0E121B, #0A0D14);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 22px;
  padding: 16px 16px 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: #EAF0FF;
}
[data-theme="light"] .app-card { box-shadow: 0 30px 70px rgba(16, 33, 74, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.ac-label {
  display: flex; align-items: center; gap: 7px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase; color: #6F81A0;
}
.ac-label .ld { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.ac-label .ld.cyan { background: #3FE0FF; box-shadow: 0 0 7px #3FE0FF; animation: ldBlink 1.6s ease-in-out infinite; }
.ac-label .ld.pink { background: #FF9ECD; box-shadow: 0 0 7px #FF9ECD; animation: ldBlink 1.6s ease-in-out infinite; }
.ac-label .ld.amber { background: #FFB020; box-shadow: 0 0 7px #FFB020; animation: ldBlink 1.6s ease-in-out infinite; }
.ac-count, .ac-hint, .ac-live { margin-left: auto; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 1.5px; }
.ac-count { color: #FF9ECD; }
.ac-hint { color: #4A5670; }
.ac-live { color: #3FE0FF; display: inline-flex; align-items: center; gap: 5px; }
.ac-live::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #3FE0FF; box-shadow: 0 0 6px #3FE0FF; animation: ldBlink 1.6s ease-in-out infinite; }
@keyframes ldBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.32; } }

.rot { position: relative; }
.rot > * { transition: opacity 0.8s ease, transform 0.8s ease; opacity: 0; position: absolute; inset: 0; transform: translateY(8px); pointer-events: none; }
.rot > .on { opacity: 1; position: relative; transform: none; pointer-events: auto; }

/* --- "Up Next" feed + Card Swap, side by side --- */
.feed-stage-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: start;
  max-width: 940px;
  margin: 40px auto 0;
}
.fsr-col { display: flex; flex-direction: column; min-width: 0; }
.fsr-cap {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12.5px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-faint); text-align: center; margin-bottom: 16px;
}
@media (max-width: 860px) {
  .feed-stage-row { grid-template-columns: 1fr; gap: 48px; max-width: 430px; }
}
.up-rot { margin-top: 12px; }
.up-img { height: 210px; border-radius: 14px; position: relative; overflow: hidden; }
.up-img .kb { position: absolute; inset: -22px; animation: kenBurns 14s ease-in-out infinite alternate; }
@keyframes kenBurns { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.14) translate(-3%, -3%); } }
.up-cap { font-size: 12.5px; line-height: 1.55; color: #C9D4E4; margin-top: 12px; min-height: 68px; }
.up-cap b { color: #fff; }
.up-cap .hash { color: #7AC9FF; }
.up-stamp {
  display: inline-block; margin-top: 4px;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 700; font-size: 11.5px; letter-spacing: 1px;
  color: #8EF0A6; border: 1px solid rgba(142, 240, 166, 0.4); border-radius: 6px; padding: 5px 9px;
}
.up-stamp.draft { color: #FFD54F; border-color: rgba(255, 213, 79, 0.5); }
@media (prefers-reduced-motion: reduce) { .up-img .kb { animation: none; } }

/* --- The Time Rail (replaces the publish-queue demo) --- */
.rail-wrap { width: 100%; }
.rail { margin-top: 16px; padding-left: 20px; border-left: 2px solid #1A2634; }
.rit { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.rit::before {
  content: ""; position: absolute; left: -26px; top: 50%; transform: translateY(-50%);
  width: 11px; height: 11px; border-radius: 50%; background: #16202C; border: 2px solid #2A3A4C;
}
.rit.live::before { background: #7ADEFF; border-color: #7ADEFF; box-shadow: 0 0 10px rgba(122, 222, 255, 0.9); }
.rit .t { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 0.5px; color: #7C8BA0; width: 78px; flex: 0 0 auto; }
.rit b { font-size: 12.5px; font-weight: 600; flex: 1; color: #EAF0FF; display: flex; align-items: center; gap: 7px; }
.rit.past b { color: #7C8BA0; font-weight: 500; }
.rit .th { width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto; }
.rit.past .th { opacity: 0.5; }
.rit-tag { font-family: "JetBrains Mono", ui-monospace, monospace; font-style: normal; font-size: 11px; letter-spacing: 1px; color: #FFD54F; border: 1px solid rgba(255, 213, 79, 0.4); border-radius: 5px; padding: 2px 5px; }
.rit-tag.idea { color: #9FB0C8; border-color: rgba(159, 176, 200, 0.35); }
.rit-now { position: relative; height: 2px; background: linear-gradient(90deg, #FF5A78, transparent); margin: 6px 0; }
.rit-now::before { content: ""; position: absolute; left: -25px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #FF5A78; animation: pulse 1.4s infinite; }
.rit-now em { position: absolute; right: 0; top: -15px; font-family: "JetBrains Mono", ui-monospace, monospace; font-style: normal; font-size: 11px; letter-spacing: 1.5px; color: #FF5A78; }

/* --- Live Instagram stats card --- */
.stats-wrap { width: 100%; }
.s-row3 { display: flex; text-align: center; margin: 14px 0 2px; }
.s-row3 .s { flex: 1; position: relative; padding: 4px 0; }
.s-row3 .s + .s::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: rgba(255, 255, 255, 0.08); }
.s-row3 .s b { font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-size: 28px; color: #fff; line-height: 1; display: block; }
.s-row3 .s b em { font-size: 12px; color: #8EF0A6; font-style: normal; margin-left: 3px; }
.s-row3 .s span { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 1.5px; color: #7C8BA0; display: block; margin-top: 7px; }
.pulse-line { height: 34px; margin: 12px 0 2px; }
.pulse-line svg { width: 100%; height: 34px; display: block; overflow: visible; }
.pulse-line .line {
  fill: none; stroke: #3FE0FF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(63, 224, 255, 0.85));
  stroke-dasharray: 760; stroke-dashoffset: 760; animation: pulseDraw 3.8s ease-out infinite;
}
@keyframes pulseDraw { 0% { stroke-dashoffset: 760; } 65%, 100% { stroke-dashoffset: 0; } }
.streak { display: flex; align-items: center; gap: 8px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 0.4px; color: #FFB86B; margin: 10px 0 14px; }
.streak .fl { font-size: 15px; filter: drop-shadow(0 0 6px rgba(255, 140, 60, 0.7)); }
.streak b { color: #fff; }
.streak .dots { display: flex; gap: 3px; margin-left: auto; }
.streak .dots i { width: 8px; height: 8px; border-radius: 50%; background: #2A1E16; }
.streak .dots i.on { background: linear-gradient(180deg, #FFB020, #FF7A36); box-shadow: 0 0 5px rgba(255, 140, 60, 0.6); }
.streak .dots i.today { background: #3FE0FF; box-shadow: 0 0 6px #3FE0FF; animation: ldBlink 1.6s ease-in-out infinite; }
.top-post { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.top-post .tp-th { width: 40px; height: 40px; border-radius: 9px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.top-post .tp-m { flex: 1; min-width: 0; }
.top-post .tp-nm { font-size: 15px; font-weight: 600; color: #EAF0FF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-post .tp-rc { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; color: #7C8BA0; margin-top: 3px; }
.top-post .tp-rc em { color: #3FE0FF; font-style: normal; }
.top-post .tp-tag { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; line-height: 1.35; text-align: right; color: #8EF0A6; flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) { .pulse-line .line { animation: none; stroke-dashoffset: 0; } }

/* --- "Coming Soon" festival card (theatre bulbs) --- */
.soon-wrap { width: 100%; }
.soon-card { border-color: rgba(255, 176, 32, 0.32); }
.soon-bulbs { display: flex; gap: 7px; padding-bottom: 12px; }
.soon-bulbs i { width: 6px; height: 6px; border-radius: 50%; background: #FFB020; opacity: 0.25; animation: soonBulb 1.6s linear infinite; }
.soon-bulbs i:nth-child(2n) { animation-delay: 0.4s; }
.soon-bulbs i:nth-child(3n) { animation-delay: 0.8s; }
.soon-bulbs i:nth-child(5n) { animation-delay: 1.2s; }
@keyframes soonBulb { 0%, 100% { opacity: 0.22; } 50% { opacity: 1; box-shadow: 0 0 8px #FFB020; } }
.soon-rot { margin-top: 12px; min-height: 104px; }
.soon-h { font-family: "Barlow Condensed", sans-serif; font-size: 30px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; line-height: 0.98; color: #fff; margin-top: 4px; }
.soon-h span { color: #FFB020; font-size: 17px; }
.soon-p { font-size: 12px; color: #8D99AF; margin-top: 8px; line-height: 1.5; min-height: 38px; }
.soon-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.soon-foot > span:first-child { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; color: #6F81A0; }
.soon-foot b { color: #EAF0FF; }
.soon-chip { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 0.5px; color: #3FE0FF; border: 1px solid rgba(63, 224, 255, 0.5); border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .soon-bulbs i { animation: none; opacity: 0.7; } }

/* --- Card Swap: "your queue, on stage" (reactbits-style 3D stack) --- */
.cw-stage-wrap { display: flex; justify-content: center; width: 100%; }
.cw-stage-box {
  position: relative; width: 360px; max-width: 100%; height: 480px;
  border-radius: 22px; overflow: hidden;
  background: radial-gradient(95% 60% at 72% 74%, rgba(60, 80, 130, 0.28), transparent 70%), #050506;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  /* promote to its own layer so Chrome anti-aliases the rounded clip of the
     skewed 3D cards — otherwise the clipped card edges render staircased */
  transform: translateZ(0);
  isolation: isolate;
}
[data-theme="light"] .cw-stage-box { box-shadow: 0 30px 70px rgba(16, 33, 74, 0.22); }
/* stack sits as high as it can (rear card just inside the top) so there is
   open space below for the fall + spring-back to read fully */
.cwStage { position: absolute; left: 44%; top: 48%; width: 0; height: 0; perspective: 900px; transform-style: preserve-3d; }
.cwCard {
  position: absolute; width: 238px; height: 150px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.85); background: #000; overflow: hidden;
  will-change: transform; backface-visibility: hidden; cursor: pointer;
}
.cwBar {
  display: flex; align-items: center; gap: 7px; padding: 8px 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 1px;
  color: #CBD6E8; position: relative; z-index: 2; background: #000;
}
.cwBar i { width: 8px; height: 8px; border-radius: 50%; background: var(--cwc); box-shadow: 0 0 8px var(--cwc); flex: 0 0 auto; }
.cwBody { position: absolute; inset: 31px 0 0; display: flex; align-items: flex-end; padding: 10px; }
.cwBody h6 { font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-size: 18px; color: #fff; text-transform: uppercase; line-height: 0.95; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
.cwChip { position: absolute; top: 40px; right: 10px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; font-weight: 800; background: rgba(0, 0, 0, 0.65); border: 1px solid #8CF0FF; color: #8CF0FF; border-radius: 7px; padding: 4px 8px; z-index: 3; }
.cw-foot { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 2px; color: #5A6880; z-index: 20; }
@media (max-width: 600px) { .cw-stage-box { zoom: 0.9; } }
@media (max-width: 430px) { .cw-stage-box { zoom: 0.8; } }

/* ---------- /wowly — the agent page ---------- */
.wowly-portrait {
  display: block;
  width: 260px;
  max-width: 62%;
  height: auto;
  margin: 4px auto 26px;
  filter: drop-shadow(0 18px 46px rgba(63, 224, 255, 0.22));
}
.legal .lede { font-size: 18px; line-height: 1.7; }
.legal .lede strong { color: var(--text); }
.legal ul { margin: 14px 0 22px 22px; }
.legal ul li { margin-bottom: 9px; }
.legal .btn-primary { margin-top: 10px; }

/* ---------- Meet Wowly (home page) ---------- */
.meet-wowly .mw-grid {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 46px;
  align-items: center;
}
.meet-wowly .mw-art img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 22px 54px rgba(63, 224, 255, 0.22));
}
.meet-wowly .kicker,
.meet-wowly .section-title,
.meet-wowly .section-sub { text-align: left; margin-left: 0; margin-right: 0; }
.meet-wowly .section-sub { max-width: 560px; }
.mw-asks {
  list-style: none;
  margin: 20px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 460px;
}
.mw-asks li {
  color: var(--text);
  font-size: 15.5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 16px;
}
@media (max-width: 860px) {
  .meet-wowly .mw-grid { grid-template-columns: 1fr; gap: 24px; }
  .meet-wowly .mw-art { max-width: 220px; margin: 0 auto; }
  .meet-wowly .kicker,
  .meet-wowly .section-title,
  .meet-wowly .section-sub { text-align: center; margin-left: auto; margin-right: auto; }
  .mw-asks { margin-left: auto; margin-right: auto; }
}