/* =====================================================================
   LiveGen "Color Pop" theme (2026-10-19)
   Loaded after livegen.css (SEO pages) and after the landing page's inline
   styles. Retokens the dark design to white + ink + colour blocks, swaps the
   type to Bricolage Grotesque / DM Sans and styles the in-page generator
   (generator.js). Copy and markup are untouched: this file only restyles.
   Each feature page sets body[data-pop] to its mode so the accent follows
   the topic (Outfit = pink, Morph = blue, Style = yellow, Summon = green).
   ===================================================================== */
/* fonts/colorpop-fonts.css is linked from the page head, not @imported (one round trip less). */

:root {
  --bg: #FFFFFF;
  --well: #F1F1EF;
  --card: #F6F6F3;
  --footer: #111111;
  --t1: #111111;
  --t2: #1E1E1E;
  --t3: #333333;
  --t4: #4F4F4F;
  --t5: #5F5F5F;
  --t6: #6B6B6B;
  --ac: #FF5B35;
  --ac-h: #F04A22;
  --ac2: #0E9F7C;
  --live: #FF3B30;
  --b07: rgba(17, 17, 17, 0.07);
  --b08: rgba(17, 17, 17, 0.08);
  --b09: rgba(17, 17, 17, 0.09);
  --b10: rgba(17, 17, 17, 0.10);
  --b12: rgba(17, 17, 17, 0.12);
  --b16: rgba(17, 17, 17, 0.16);
  --b20: rgba(17, 17, 17, 0.22);

  --ink: #111111;
  --paper: #FFFFFF;
  --mist: #F1F1EF;
  --cp-orange: #FF5B35;
  --cp-blue: #2F4BFF;
  --cp-yellow: #FFD23F;
  --cp-pink: #FF9ACB;
  --cp-green: #19C39A;
  /* page accent: a colour block plus the ink that reads on it */
  --pop: var(--cp-orange);
  --pop-ink: #111111;
  --pop-soft: #FFF0EB;
  --display: 'Bricolage Grotesque', 'Geist', system-ui, sans-serif;
  --body: 'DM Sans', 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body[data-pop="morph"] { --pop: var(--cp-blue); --pop-ink: #FFFFFF; --pop-soft: #EDF0FF; }
body[data-pop="outfit"] { --pop: var(--cp-pink); --pop-ink: #111111; --pop-soft: #FFF0F7; }
body[data-pop="style"] { --pop: var(--cp-yellow); --pop-ink: #111111; --pop-soft: #FFF8DD; }
body[data-pop="move"] { --pop: var(--cp-orange); --pop-ink: #111111; --pop-soft: #FFF0EB; }
body[data-pop="summon"] { --pop: var(--cp-green); --pop-ink: #111111; --pop-soft: #E6F8F2; }
body[data-pop="freestyle"] { --pop: var(--cp-orange); --pop-ink: #111111; --pop-soft: #FFF0EB; }

html { color-scheme: light; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
}
::selection { background: var(--cp-yellow); color: var(--ink); }
a { color: var(--ink); }
a:hover { color: var(--ink); }
::-webkit-scrollbar-thumb { background: #CFCFCB; }
::-webkit-scrollbar-track { background: var(--paper); }

/* the dark radial glow and the diagonal scanlines belong to the old look */
.glow, .scan, .scan-10, .scan-12, .scan-13, .shimmer-wrap { display: none !important; }

/* ---------- type ---------- */
h1, h2, h3, .h2, .h2-sm, .hero, h1.art-title, .cta-panel h2 {
  font-family: var(--display);
  font-weight: 800;
  color: var(--ink);
}
h1.hero, h1.art-title {
  letter-spacing: -.055em;
  line-height: .95;
}
h1.art-title { font-size: clamp(40px, 6.2vw, 78px); max-width: 16ch; }
.h2, .h2-sm, .prose h2, .cta-panel h2 { letter-spacing: -.045em; line-height: 1; }
.prose h3 { font-weight: 800; letter-spacing: -.025em; }
.lead, .hero-sub, .art-sub { color: #2A2A2A; }
.kicker, .kicker.mint {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--body); font-weight: 700; font-size: 13px; letter-spacing: .02em; text-transform: none;
  color: var(--ink); background: var(--mist); padding: 6px 12px; border-radius: 999px;
}
.hero em, .hero .ac, h1.hero span[style*="color"], .hero b { color: var(--pop) !important; }

/* ---------- buttons ---------- */
.btn { border-radius: 999px; font-weight: 700; font-family: var(--body); }
.btn-primary, .btn.btn-primary, .nav-right .signup, .golive {
  background: var(--pop); color: var(--pop-ink); border: 0;
}
.btn-primary:hover, .nav-right .signup:hover, .golive:hover {
  background: var(--pop); color: var(--pop-ink); filter: brightness(.95);
}
.btn-outline { background: var(--mist); color: var(--ink); border: 0; }
.btn-outline:hover { background: #E6E6E2; border: 0; color: var(--ink); }
.btn-lg { padding: 17px 30px; font-size: 17px; }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--cp-blue); outline-offset: 3px; }

/* ---------- nav ---------- */
nav { background: rgba(255, 255, 255, 0); border-bottom-color: transparent; }
nav.scrolled { background: rgba(255, 255, 255, .9); border-bottom-color: var(--b08); }
.brand-logo { content: url('/brand/v3/livegen-logo-on-light.svg'); }
.nav-links a, .nav-right .login { color: var(--ink); font-weight: 500; }
.nav-links a:hover, .nav-right .login:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.nav-right .signup { background: var(--ink); color: #FFFFFF; }
.nav-right .signup:hover { background: var(--ink); color: #FFFFFF; filter: none; opacity: .88; }
.lang-switch, .lang-menu { color: var(--ink); }

/* ---------- media wells become colour blocks ---------- */
.hero-well, .hero-media {
  border: 12px solid var(--pop) !important;
  border-radius: 36px !important;
  box-shadow: none !important;
  background: var(--pop) !important;
}
.hero-well video, .hero-media video, .hero-media img { border-radius: 24px; }
.live-badge { background: var(--ink); font-family: var(--body); font-weight: 700; letter-spacing: .04em; }
.ai-sticker {
  background: var(--paper); color: var(--ink); font-family: var(--body); font-weight: 700;
  box-shadow: none; animation: none;
}
.cap, .feat-cap { font-family: var(--body); color: rgba(255, 255, 255, .85); }
.tag { font-family: var(--body); font-weight: 600; }

/* ---------- breadcrumb + article hero ---------- */
.crumbs, .crumbs a, .crumbs .here, .crumbs .sep { font-family: var(--body); color: var(--t5); }
.crumbs a:hover { color: var(--ink); }
.art-hero { padding-top: 112px; }
.art-kick {
  font-family: var(--body); font-weight: 700; letter-spacing: .04em; color: var(--pop-ink);
  background: var(--pop); border: 0;
}
.art-kick .pdot { background: var(--pop-ink); box-shadow: none; }

/* ---------- prose ---------- */
.prose, .prose p, .prose ol.ol li, .feature-list li, .step-row .stext { color: #2E2E2E; }
.prose .lead-para { color: var(--ink); }
.prose a:not(.btn), .faq-a a {
  color: var(--ink); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--pop); text-decoration-thickness: 3px; text-underline-offset: 3px;
}
.prose a:not(.btn):hover, .faq-a a:hover { color: var(--ink); background: var(--pop-soft); }
.prose code { background: var(--mist); border-color: transparent; color: var(--ink); font-family: var(--mono); }
.callout, .legal-note {
  border: 0; border-radius: 24px; background: var(--pop-soft); color: var(--ink);
}
.callout strong, .legal-note strong { color: var(--ink); background: var(--pop); color: var(--pop-ink); padding: 1px 7px; border-radius: 6px; }
.feature-list .ck { background: var(--pop); color: var(--pop-ink); border-radius: 50%; }
.step-row { border: 0; background: var(--mist); border-radius: 22px; }
.step-row .snum { background: var(--ink); color: #FFFFFF; border-radius: 50%; font-family: var(--display); font-weight: 800; }
.table-scroll { border-color: var(--b12); border-radius: 22px; }
table.cmp { background: var(--paper); }
table.cmp thead th { font-family: var(--body); font-weight: 700; background: var(--mist); color: var(--ink); }
table.cmp .is-livegen, table.cmp .is-livegen strong { color: var(--ink); background: var(--pop-soft); }
table.cmp tbody tr:hover td { background: #FAFAF8; }

/* ---------- FAQ ---------- */
.faq-list { border-top: 0; display: grid; gap: 10px; }
.faq-item { border: 0; background: var(--mist); border-radius: 22px; padding: 0 18px; }
.faq-q .qt { font-weight: 700; color: var(--ink); }
.faq-q .sign { color: var(--ink); font-weight: 700; }
.faq-a { color: #3A3A3A; }

/* ---------- related + hub cards: thick colour frames, cycling ---------- */
.case, .card {
  border: 8px solid var(--frame, var(--cp-orange)); background: var(--frame, var(--cp-orange));
  border-radius: 30px; color: var(--frame-ink, var(--ink));
}
.case:hover, .card.hover:hover { box-shadow: none; transform: translateY(-4px) rotate(-.4deg); border-color: var(--frame, var(--cp-orange)); }
.case-thumb, .card-media { border-radius: 20px; }
.case-title, .card-title { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; color: inherit; }
.case-kw { background: rgba(255, 255, 255, .55); color: var(--ink); font-family: var(--body); font-weight: 600; }
.case-explore, .card-cta { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.card-body { color: inherit; }
.card-desc { color: inherit; opacity: .85; }
.grid-cases > :nth-child(4n+1), .grid-hub > :nth-child(4n+1) { --frame: var(--cp-orange); --frame-ink: #111111; }
.grid-cases > :nth-child(4n+2), .grid-hub > :nth-child(4n+2) { --frame: var(--cp-blue); --frame-ink: #FFFFFF; }
.grid-cases > :nth-child(4n+3), .grid-hub > :nth-child(4n+3) { --frame: var(--cp-yellow); --frame-ink: #111111; }
.grid-cases > :nth-child(4n+4), .grid-hub > :nth-child(4n+4) { --frame: var(--cp-green); --frame-ink: #111111; }
.grid-cases > :nth-child(4n+2) .case-kw, .grid-hub > :nth-child(4n+2) .case-kw { background: rgba(255, 255, 255, .9); }
.related .rel-head { font-family: var(--display); font-weight: 800; font-size: 28px; letter-spacing: -.04em; text-transform: none; color: var(--ink); }
.cluster-nav a { background: var(--mist); color: var(--ink); border: 0; font-weight: 600; }
.cluster-nav a.on { background: var(--ink); color: #FFFFFF; }

/* ---------- final CTA: one big colour block ---------- */
.cta-panel {
  border: 0; border-radius: 40px; background: var(--pop) !important; color: var(--pop-ink);
}
.cta-panel h2, .cta-panel p { color: var(--pop-ink) !important; }
.cta-panel .btn-primary { background: var(--ink); color: #FFFFFF; }
.cta-panel .btn-primary:hover { background: var(--ink); color: #FFFFFF; opacity: .9; filter: none; }

/* ---------- footer stays ink, the one dark block on the page ---------- */
footer {
  --t1: #FFFFFF; --t2: #F2F2F2; --t3: #D9D9D9; --t4: #BDBDBD; --t5: #ABABAB; --t6: #A0A0A0;
  --b07: rgba(255, 255, 255, .08); --b08: rgba(255, 255, 255, .08); --b10: rgba(255, 255, 255, .12);
  background: var(--footer); color: #FFFFFF; border-top: 0; border-radius: 40px 40px 0 0;
}
footer a { color: #D9D9D9; }
footer a:hover { color: #FFFFFF; }
footer .brand-logo { content: url('/brand/v3/livegen-logo-on-dark.svg'); }
.foot-col-title { color: #FFFFFF; font-family: var(--display); font-weight: 800; letter-spacing: -.02em; text-transform: none; }

@media (max-width: 720px) {
  .nav-links { display: none; }
}

/* ---------- media loading state (landing.js / livegen.js add the classes) ----------
   A clip tile shimmers until its poster arrives, then the clip fades in once it plays.
   The sweep is a transform animation on its own element (.lg-shim), so it runs on the compositor
   and costs the main thread nothing; it is hidden as soon as the poster or the clip is there. */
@keyframes lg-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.lg-shim { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: rgba(17, 17, 17, .07); }
/* Only tiles that are fetching something sweep; idle off-screen tiles stay a flat placeholder. */
.lg-media.is-loading > .lg-shim::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .45) 50%, transparent 75%);
  animation: lg-sweep 1.3s linear infinite;
}
.lg-media.has-poster > .lg-shim, .lg-media.is-ready > .lg-shim { display: none; }
.lg-media > video { opacity: 0; transition: opacity .45s ease; }
.lg-media.has-poster > video, .lg-media.is-ready > video { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .lg-media.is-loading > .lg-shim::after { animation: none; } }