/* ShowcaseVideos.ai — "The Studio" direction.
   Clean white modern SaaS: Inter, blue accent, rounded cards, soft
   shadows. Layout/robustness conventions carried over from the vetted
   Board of Advisors stylesheet (overflow guards, mobile nav pattern,
   cookie UI, wizard classes). */

:root {
  --ink: #0f172a;
  --soft: #64748b;
  --line: #e2e8f0;
  --paper: #ffffff;
  --panel: #f8fafc;
  --accent: #2563eb;
  --accent-dark: #1e40af;
  --accent-soft: #eff6ff;
  --success: #16a34a;
  --danger: #b91c1c;
  --danger-soft: #fef2f2;
  --sans: "Inter", -apple-system, "Segoe UI", sans-serif;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.06), 0 10px 30px -18px rgba(15, 23, 42, 0.18);
}

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

/* The HTML `hidden` attribute is only `display: none` from the browser's
   default stylesheet, so ANY author rule that sets `display` beats it —
   `.working-line { display: flex }` and `.btn-block { display: block }`
   both did, which is why "hidden" elements kept showing anyway. This
   makes `hidden` mean hidden, everywhere. */
[hidden] { display: none !important; }

/* Same mobile overflow guards as the vetted stylesheet: html AND body,
   plus text-size-adjust to stop Android font boosting from widening
   text and clipping edges on real hardware. */
/* NOTE: "overflow-x: clip" not "hidden". Both stop sideways scrolling,
   but `hidden` turns the element into a scroll container, which silently
   breaks `position: sticky` for every descendant (the studio sidebar).
   `clip` has no such side effect. The `hidden` fallback below is only
   for browsers too old to know `clip`. */
html {
  overflow-x: hidden;      /* fallback, overridden on the next line */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;      /* fallback */
  overflow-x: clip;        /* keeps position:sticky working — see html{} */
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
a { color: var(--accent); }
.center { text-align: center; }

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

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
.btn-lg { padding: 14px 28px; font-size: 1rem; }
.btn-sm { padding: 7px 14px; font-size: 0.82rem; }
.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.35);
}
.btn-primary:hover { background: var(--accent-dark); }
.btn-ghost {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--ink); }
.btn-block { display: block; width: 100%; text-align: center; }
.btn-link {
  background: none;
  border: none;
  color: var(--accent);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

/* ---- Header ---- */
.site-header {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 60;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 66px; gap: 16px;
}
.brand-block { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-mark {
  width: 30px; height: 30px; border-radius: 9px; background: var(--accent);
  position: relative; flex-shrink: 0;
}
.logo-mark::after {
  content: ""; position: absolute; top: 50%; left: 56%;
  transform: translate(-50%, -50%);
  border-left: 9px solid #fff;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.brand { color: var(--ink); font-weight: 700; font-size: 1.12rem; letter-spacing: -0.02em; }
.brand-accent { color: var(--accent); }

.site-nav { display: flex; align-items: center; gap: 24px; }
.site-nav a { color: var(--soft); text-decoration: none; font-size: 0.9rem; font-weight: 500; }
.site-nav a:hover { color: var(--ink); }
.nav-user { color: var(--soft); font-size: 0.8rem; }
.nav-btn {
  background: var(--accent); color: #fff !important; border-radius: 10px;
  padding: 9px 18px; font-weight: 600;
}
.nav-btn:hover { background: var(--accent-dark); }

/* Hamburger — hidden on desktop, mirrors the vetted breakpoint pattern */
.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  width: 40px; height: 40px; flex-direction: column;
  justify-content: center; align-items: center; gap: 5px;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px; background: var(--ink);
  transition: transform 0.2s, opacity 0.2s;
}

@media (max-width: 700px) {
  .nav-toggle { display: flex; }
  .site-nav {
    display: none; position: absolute; top: 66px; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; padding: 12px 24px 18px;
    gap: 14px; box-shadow: 0 20px 30px -20px rgba(15, 23, 42, 0.25);
  }
  .site-nav.nav-open { display: flex; }
  .nav-btn { text-align: center; }
}

/* ---- Hero with dynamic background ---- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 92px 0 70px;
  text-align: center;
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; }

/* Full-bleed FLUID color base so no part of the hero reads as plain
   white. Two oversized gradient fields drift and rotate slowly in
   opposite directions — the colors visibly flow into each other like
   liquid. Oversizing (inset: -35%) keeps edges from ever showing while
   they move. Blobs animate on top for extra depth. */
.hero-bg::before {
  content: "";
  position: absolute; inset: -35%;
  background:
    radial-gradient(45% 55% at 20% 20%, rgba(147, 197, 253, 0.60), transparent 62%),
    radial-gradient(40% 50% at 80% 18%, rgba(196, 181, 253, 0.60), transparent 62%),
    radial-gradient(55% 45% at 50% 55%, rgba(125, 211, 252, 0.35), transparent 68%),
    radial-gradient(55% 50% at 30% 85%, rgba(165, 180, 252, 0.40), transparent 62%),
    linear-gradient(180deg, #eef4ff 0%, #f2f0ff 45%, #edf6ff 100%);
  animation: fluid-a 13s ease-in-out infinite alternate;
  will-change: transform;
}
.hero-bg::after {
  content: "";
  position: absolute; inset: -35%;
  background:
    radial-gradient(40% 50% at 70% 70%, rgba(147, 197, 253, 0.45), transparent 60%),
    radial-gradient(45% 45% at 25% 45%, rgba(216, 180, 254, 0.40), transparent 60%),
    radial-gradient(50% 40% at 60% 25%, rgba(103, 232, 249, 0.30), transparent 62%);
  animation: fluid-b 19s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes fluid-a {
  0%   { transform: translate(-8%, -5%) rotate(-10deg) scale(1);    opacity: 1; }
  50%  { transform: translate(6%, 5%)   rotate(6deg)   scale(1.14); opacity: 0.75; }
  100% { transform: translate(10%, -4%) rotate(14deg)  scale(1.04); opacity: 1; }
}
@keyframes fluid-b {
  0%   { transform: translate(8%, 6%)   rotate(12deg)  scale(1.1);  opacity: 0.7; }
  50%  { transform: translate(-6%, -7%) rotate(-6deg)  scale(0.98); opacity: 1; }
  100% { transform: translate(-10%, 4%) rotate(-16deg) scale(1.15); opacity: 0.8; }
}

/* Faint architectural photo behind everything, washed almost to white so
   the copy stays crisp; the blobs and grid animate on top of it. */
.hero-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.16;
}
.hero-photo-wash {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.55) 45%, var(--paper) 96%);
}
.hero-blob {
  position: absolute;
  width: max(480px, 34vw); height: max(480px, 34vw);
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.75;
  will-change: transform;
}
.blob-a {
  background: radial-gradient(circle at 35% 35%, #93c5fd, #bfdbfe 70%);
  top: -18%; left: -8%;
  animation: drift-a 7s ease-in-out infinite alternate;
}
.blob-b {
  background: radial-gradient(circle at 60% 40%, #c4b5fd, #ddd6fe 70%);
  top: -10%; right: -10%;
  animation: drift-b 9s ease-in-out infinite alternate;
}
.blob-c {
  background: radial-gradient(circle at 50% 50%, #7dd3fc, #bae6fd 70%);
  bottom: -30%; left: 28%;
  animation: drift-c 11s ease-in-out infinite alternate;
}
.blob-d {
  background: radial-gradient(circle at 45% 45%, #a5b4fc, #c7d2fe 70%);
  top: 12%; left: 30%;
  width: max(380px, 26vw); height: max(380px, 26vw);
  opacity: 0.55;
  animation: drift-b 8s ease-in-out infinite alternate-reverse;
}
.blob-e {
  background: radial-gradient(circle at 55% 45%, #93c5fd, #dbeafe 70%);
  bottom: -12%; right: 12%;
  width: max(400px, 28vw); height: max(400px, 28vw);
  opacity: 0.6;
  animation: drift-a 10s ease-in-out infinite alternate-reverse;
}
@keyframes drift-a {
  from { transform: translate(0, 0) scale(1);      opacity: 0.85; }
  to   { transform: translate(180px, 120px) scale(1.3); opacity: 0.5; }
}
@keyframes drift-b {
  from { transform: translate(0, 0) scale(1.15);   opacity: 0.55; }
  to   { transform: translate(-170px, 140px) scale(0.85); opacity: 0.9; }
}
@keyframes drift-c {
  from { transform: translate(0, 0) scale(1);      opacity: 0.9; }
  to   { transform: translate(-140px, -110px) scale(1.35); opacity: 0.55; }
}
.hero-grid-bg {
  position: absolute; inset: -60px;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 30%, transparent 75%);
  animation: grid-pan 40s linear infinite;
}
@keyframes grid-pan {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 56px 112px, 56px 112px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-blob, .hero-grid-bg,
  .hero-bg::before, .hero-bg::after { animation: none; }
}

.hero-inner { position: relative; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.82rem; font-weight: 500; color: var(--accent);
  background: var(--accent-soft); border-radius: 999px;
  padding: 7px 16px; margin-bottom: 26px;
}
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.hero h1 {
  font-size: clamp(2.1rem, 5.4vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  max-width: 760px;
  margin: 0 auto 20px;
}
.grad {
  background: linear-gradient(90deg, var(--accent), #7c3aed);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  font-size: 1.08rem; color: var(--soft);
  max-width: 560px; margin: 0 auto 32px;
}
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-fine { font-size: 0.82rem; color: #94a3b8; margin-top: 14px; }

.hero-frame {
  max-width: 860px;
  margin: 56px auto 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 40px 80px -40px rgba(15, 23, 42, 0.3);
}
.hero-frame-bar {
  height: 40px; background: var(--panel); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 7px; padding: 0 16px;
}
.hero-frame-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.hero-frame-body {
  aspect-ratio: 16 / 9;
  /* Fallback until img/hero-frame.jpg exists: a dusk-sky gradient with a
     dark "rooflines" band so the mock player reads as a twilight
     exterior shot, not a gray placeholder. */
  background:
    linear-gradient(0deg, #1e293b 0%, #334155 18%, transparent 34%),
    radial-gradient(ellipse 120% 90% at 50% 100%, rgba(251, 191, 36, 0.35), transparent 55%),
    linear-gradient(170deg, #312e59 0%, #4c4a7a 30%, #8a6d9e 55%, #d98e6a 80%, #eab676 100%);
  position: relative;
}
.hero-frame-body::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(15, 23, 42, 0.45), transparent 45%);
}
/* Real listing photo inside the mock player (rendered only once
   img/download-images.sh has run); the very slow zoom sells the
   "cinematic motion" promise before a single word is read. */
.hero-frame-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  animation: hero-kenburns 24s ease-in-out infinite alternate;
}
@keyframes hero-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-frame-photo { animation: none; }
}
.hf-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 66px; height: 66px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  z-index: 2;
}
.hf-play::after {
  content: ""; position: absolute; top: 50%; left: 55%;
  transform: translate(-50%, -50%);
  border-left: 16px solid var(--accent);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.hf-lowerthird {
  position: absolute; left: 28px; bottom: 22px; z-index: 2;
  color: #fff; text-align: left; display: flex; flex-direction: column;
}
.hf-addr { font-size: 1.3rem; font-weight: 700; }
.hf-city { font-size: 0.8rem; opacity: 0.9; }

/* ---- Sections ---- */
.section { padding: 84px 0; }
.section-light { background: var(--paper); }
.section-tint { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.eyebrow {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 10px;
}
.section h2 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); margin-bottom: 14px; }
.section-sub { color: var(--soft); max-width: 620px; }

.steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
  margin-top: 44px;
}
.step {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 26px 22px;
}
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--accent); color: #fff;
  font-weight: 700; font-size: 0.9rem; margin-bottom: 14px;
}
.step h3 { font-size: 1.02rem; margin-bottom: 8px; }
.step p { font-size: 0.88rem; color: var(--soft); }

/* How-it-works video slot */
.video-showcase { max-width: 860px; margin: 54px auto 0; }
.video-showcase-player {
  width: 100%; border-radius: var(--radius-lg); display: block;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  background: #000;
}
.video-showcase-placeholder {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  border: 1px dashed #cbd5e1;
  background: var(--panel);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; position: relative;
}
.video-showcase-placeholder .hf-play { position: static; transform: none; }
.video-showcase-placeholder p { font-weight: 600; color: var(--ink); }
.video-showcase-placeholder p span { color: var(--soft); font-weight: 400; }

.section-signup { text-align: center; margin-top: 44px; }

.feature-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px;
  margin-top: 40px;
}
.feature {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 28px;
  box-shadow: var(--shadow-card);
}
.feature h3 { font-size: 1.05rem; margin-bottom: 8px; }
.feature p { font-size: 0.92rem; color: var(--soft); }

/* Card photo: fixed-height frame, image zooms gently when the card is
   hovered (pairs with the site-wide card lift/spotlight effects). */
.feature-img {
  margin: -28px -28px 18px;              /* bleed to the card edges */
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--line);
}
.feature-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.feature:hover .feature-img img { transform: scale(1.06); }
/* Dark section: dim slightly so the white headings keep contrast. */
.section-filmed .feature-img img { filter: brightness(0.85); }
.section-filmed .feature:hover .feature-img img { filter: brightness(1); }

/* ---- "Why it looks filmed": dark section over a luxury interior.
   Falls back to a deep navy gradient until the photo is downloaded. ---- */
.section-filmed {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #101830 0%, #0f172a 60%, #111a33 100%);
}
.section-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.section-bg-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 90% 80% at 50% 0%, rgba(37, 99, 235, 0.18), transparent 60%),
    linear-gradient(180deg, rgba(10, 15, 30, 0.88) 0%, rgba(10, 15, 30, 0.82) 100%);
}
.section-filmed .container { position: relative; }
.section-filmed h2 { color: #fff; }
.section-filmed .eyebrow { color: #93c5fd; }
.section-filmed .feature {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: none;
}
.section-filmed .feature h3 { color: #fff; }
.section-filmed .feature p { color: #cbd5e1; }

.section-cta { padding: 70px 0; }
.cta-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 30px; flex-wrap: wrap;
  background: var(--accent-soft); border: 1px solid #dbeafe;
  border-radius: var(--radius-lg); padding: 40px 44px;
}
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---- Page hero (pricing etc.) ----
   Without a photo it gets the same pastel fluid wash as the home hero
   (never flat white); with img/pricing-hero.jpg downloaded it becomes a
   full photo banner with a dark overlay and white copy. */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 90px 0 70px;
  text-align: center;
  background:
    radial-gradient(55% 80% at 18% 15%, rgba(147, 197, 253, 0.45), transparent 62%),
    radial-gradient(50% 70% at 82% 20%, rgba(196, 181, 253, 0.45), transparent 62%),
    radial-gradient(70% 60% at 50% 100%, rgba(125, 211, 252, 0.30), transparent 65%),
    linear-gradient(180deg, #eef4ff 0%, #f2f0ff 60%, #ffffff 100%);
}
.page-hero h1 { font-size: clamp(1.8rem, 4.4vw, 2.6rem); margin-bottom: 14px; }
.page-hero-sub { color: var(--soft); max-width: 560px; margin: 0 auto; }
.page-hero-copy { position: relative; }

/* Photo dimmed to a subtle exposure — visible texture, never competing
   with the copy — with the home hero's blue/lavender/cyan color field
   laid over it so both pages share one brand world. */
.page-hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.38;
  filter: saturate(0.75) brightness(1.08);
}
.page-hero-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(55% 80% at 15% 12%, rgba(147, 197, 253, 0.55), transparent 62%),
    radial-gradient(50% 70% at 85% 15%, rgba(196, 181, 253, 0.55), transparent 62%),
    radial-gradient(70% 60% at 50% 55%, rgba(125, 211, 252, 0.30), transparent 68%),
    radial-gradient(80% 65% at 50% 100%, rgba(165, 180, 252, 0.35), transparent 62%),
    linear-gradient(180deg, rgba(238, 244, 255, 0.80) 0%, rgba(242, 240, 255, 0.55) 45%, rgba(255, 255, 255, 0.92) 100%);
}
.page-hero.has-photo { padding: 110px 0 90px; }

/* Full-section photo background (contact page): the same dimmed-photo +
   hero-color-overlay treatment as the pricing banner, applied behind a
   centered card. Reuses .page-hero-img / .page-hero-overlay styles;
   falls back to the pastel wash when the photo isn't downloaded yet. */
.page-photo-bg {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(55% 80% at 18% 15%, rgba(147, 197, 253, 0.45), transparent 62%),
    radial-gradient(50% 70% at 82% 20%, rgba(196, 181, 253, 0.45), transparent 62%),
    radial-gradient(70% 60% at 50% 100%, rgba(125, 211, 252, 0.30), transparent 65%),
    linear-gradient(180deg, #eef4ff 0%, #f2f0ff 60%, #ffffff 100%);
}
.page-photo-bg > .auth-card {
  position: relative;
  box-shadow: 0 30px 60px -30px rgba(15, 23, 42, 0.35);
}

/* Pricing body: faint tint behind the tier cards so the section doesn't
   sit on flat white. */
.section-pricing {
  background:
    radial-gradient(60% 55% at 50% 5%, rgba(147, 197, 253, 0.14), transparent 65%),
    linear-gradient(180deg, #ffffff 0%, var(--panel) 40%, #ffffff 100%);
}

/* ---- Pricing tiers (classes shared with signup wizard) ---- */
.tier-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  margin-top: 46px;
}
.tier-card {
  position: relative;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 30px 26px;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-card);
}
.tier-featured { border: 2px solid var(--accent); box-shadow: 0 24px 50px -25px rgba(37, 99, 235, 0.35); }
.tier-flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff;
  font-size: 0.72rem; font-weight: 600;
  border-radius: 999px; padding: 4px 14px; white-space: nowrap;
}
.tier-card h3 { font-size: 1.15rem; }
.tier-price { margin: 12px 0 2px; }
.tier-price .amount { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em; }
.tier-price .per { color: var(--soft); font-size: 0.9rem; margin-left: 3px; }
.tier-trial { font-size: 0.82rem; color: var(--success); font-weight: 600; margin-bottom: 12px; }
.tier-features {
  list-style: none; margin: 10px 0 24px; flex: 1;
  font-size: 0.9rem; color: var(--soft);
}
.tier-features li { padding: 5px 0 5px 24px; position: relative; }
.tier-features li::before {
  content: "✓"; position: absolute; left: 0; color: var(--success); font-weight: 700;
}
.tier-enterprise { text-align: center; margin-top: 36px; color: var(--soft); font-size: 0.92rem; }

.credit-explainer {
  max-width: 720px; margin: 60px auto 0; text-align: center;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 30px 34px;
}
.credit-explainer h2 { font-size: 1.2rem; margin-bottom: 10px; }
.credit-explainer p { font-size: 0.92rem; color: var(--soft); }

/* ---- Auth cards / forms ---- */
.auth-section { padding: 70px 24px; display: flex; justify-content: center; }
.auth-card {
  width: 100%; max-width: 440px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 36px 32px;
  box-shadow: var(--shadow-card);
}
.signup-card, .contact-card { max-width: 560px; }
.auth-card h1 { font-size: 1.45rem; margin-bottom: 6px; }
.auth-sub { color: var(--soft); font-size: 0.92rem; margin-bottom: 20px; }
.auth-note { font-size: 0.85rem; color: var(--soft); margin-top: 18px; text-align: center; }
.auth-forgot { text-align: right; font-size: 0.82rem; margin: 6px 0 16px; }
.auth-divider {
  display: flex; align-items: center; gap: 12px; margin: 18px 0;
  color: var(--soft); font-size: 0.8rem;
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

label { display: block; font-size: 0.84rem; font-weight: 600; margin: 14px 0 6px; }
input[type="text"], input[type="email"], input[type="password"], select, textarea {
  width: 100%;
  padding: 11px 14px;
  font: inherit; font-size: 0.95rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
  transition: border-color 0.15s, background 0.15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); background: #fff;
}
form .btn-block { margin-top: 20px; }

.form-error {
  background: var(--danger-soft); color: var(--danger);
  border: 1px solid #fecaca; border-radius: 10px;
  padding: 10px 14px; font-size: 0.88rem; margin-bottom: 14px;
}
.form-success {
  background: #f0fdf4; color: var(--success);
  border: 1px solid #bbf7d0; border-radius: 10px;
  padding: 10px 14px; font-size: 0.88rem; margin-bottom: 14px;
}
.code-input {
  text-align: center; font-size: 1.6rem; letter-spacing: 0.4em; font-weight: 700;
}
.google-identity-note {
  background: var(--accent-soft); border: 1px solid #dbeafe;
  border-radius: 10px; padding: 10px 14px;
  font-size: 0.86rem; margin-bottom: 14px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Signup wizard (hooks match js/signup-wizard.js) ---- */
.wizard-progress { display: none; gap: 6px; margin: 6px 0 22px; }
.signup-form.js-active .wizard-progress { display: flex; }
.wizard-progress span {
  flex: 1; height: 4px; border-radius: 2px; background: var(--line);
  transition: background 0.2s;
}
.wizard-progress span.active { background: var(--accent); }
.wizard-progress span.done { background: #93c5fd; }
.signup-form.js-active .wizard-step { display: none; }
.signup-form.js-active .wizard-step.active { display: block; }
.wizard-prompt { font-size: 1.02rem; font-weight: 600; margin-bottom: 16px; }
.wizard-optional { color: var(--soft); font-weight: 400; font-size: 0.85rem; }
.wizard-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; }
.wizard-nav .btn { min-width: 110px; }
.step-error {
  display: none;
  background: var(--danger-soft); color: var(--danger);
  border: 1px solid #fecaca; border-radius: 10px;
  padding: 10px 14px; font-size: 0.88rem; margin-bottom: 14px;
}
.step-error.show { display: block; }
.field-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.address-grid { display: grid; grid-template-columns: 2fr 1.4fr 1fr; gap: 12px; margin-top: 12px; }
.password-field { position: relative; margin-bottom: 12px; }
.password-field input { padding-right: 44px; }
.password-toggle {
  position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
  background: none; border: none; color: var(--soft); cursor: pointer;
  display: flex; align-items: center; padding: 4px;
}
.plan-fieldset { border: none; }
.plan-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 8px; }
.plan-option { cursor: pointer; }
.plan-option:hover { border-color: var(--accent); }
.plan-radio-row { display: flex; align-items: center; gap: 10px; }
.plan-radio { width: auto; accent-color: var(--accent); }
.plan-grid-nav { text-align: right; }

/* ---- Account ---- */
.account-card {
  max-width: 640px; margin: 60px auto; padding: 36px 32px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.account-card h1 { font-size: 1.4rem; margin-bottom: 18px; }
.account-subhead { font-size: 1.02rem; margin: 26px 0 10px; }
.account-row {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
.account-row > span:first-child { color: var(--soft); }
.badge-status {
  display: inline-block; font-size: 0.7rem; font-weight: 600;
  background: var(--accent-soft); color: var(--accent);
  border-radius: 999px; padding: 2px 10px; margin-left: 6px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.ledger-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.ledger-table td { padding: 7px 4px; border-bottom: 1px solid var(--line); }
.ledger-table td:first-child { color: var(--soft); width: 70px; }
.ledger-plus { color: var(--success); font-weight: 600; text-align: right; }
.ledger-minus { color: var(--danger); font-weight: 600; text-align: right; }

.verify-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  background: #fefce8; border: 1px solid #fde68a;
  border-radius: 10px; padding: 12px 18px; font-size: 0.88rem;
}
.verify-banner button {
  background: none; border: none; color: var(--accent);
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline;
}

/* ---- Studio workspace ---- */
.studio-layout {
  display: grid; grid-template-columns: 264px 1fr; gap: 22px;
  padding-top: 26px; padding-bottom: 50px;
  align-items: start;
}
/* Sticky so the status stays visible while the page scrolls. The header
   is 66px, so 82px clears it with breathing room; max-height + scroll
   keeps a tall panel usable on short screens. */
.job-panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 20px 18px;
  position: sticky;
  top: 82px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  align-self: start;   /* required: a stretched grid item can't stick */
}
.job-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.job-panel-head h2 { font-size: 0.95rem; }
.job-checklist { list-style: none; }
.job-checklist li {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.86rem; padding: 8px 10px; border-radius: 9px;
  color: var(--soft);
}
.job-checklist li em { margin-left: auto; font-style: normal; font-size: 0.78rem; color: #94a3b8; }
.job-checklist li .ck {
  width: 17px; height: 17px; border-radius: 50%;
  border: 1.5px solid var(--line); background: #fff; flex-shrink: 0;
  position: relative;
}
.job-checklist li.done { color: var(--ink); }
.job-checklist li.done .ck { background: var(--success); border-color: var(--success); }
.job-checklist li.done .ck::after {
  content: "✓"; position: absolute; inset: 0;
  color: #fff; font-size: 0.62rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.credit-card {
  margin-top: 18px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px;
}
.credit-row {
  display: flex; justify-content: space-between;
  font-size: 0.85rem; color: var(--soft); padding: 4px 0;
}
.credit-row strong { color: var(--ink); }
.credit-plan { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 9px; }
.credit-trial { font-size: 0.85rem; color: var(--ink); }

.job-result { margin-top: 18px; }
.job-result h3 { font-size: 0.95rem; margin-bottom: 10px; }
.job-result video {
  width: 100%; border-radius: var(--radius); background: #000;
  margin-bottom: 10px; display: block;
}

.chat-panel {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 640px;
  box-shadow: var(--shadow-card);
}
.chat-thread {
  flex: 1; overflow-y: auto; padding: 28px 30px;
  display: flex; flex-direction: column; gap: 16px;
}
.chat-welcome h1 { font-size: 1.35rem; margin-bottom: 10px; }
.chat-welcome p { color: var(--soft); font-size: 0.95rem; max-width: 520px; }

.msg { max-width: 76%; display: flex; flex-direction: column; }
.msg-user { align-self: flex-end; align-items: flex-end; }
.msg-director { align-self: flex-start; }
.msg-who {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 5px;
}
.msg-bubble {
  padding: 12px 16px; font-size: 0.94rem; line-height: 1.55;
  border-radius: 4px 14px 14px 14px;
  background: var(--panel); border: 1px solid var(--line);
  white-space: pre-wrap; word-break: break-word;
}
.msg-user .msg-bubble {
  background: var(--accent); border-color: var(--accent); color: #fff;
  border-radius: 14px 4px 14px 14px;
}
.msg-typing .msg-bubble { display: flex; gap: 5px; align-items: center; }
.tdot {
  width: 7px; height: 7px; border-radius: 50%; background: #94a3b8;
  animation: tdot 1.1s infinite;
}
.tdot:nth-child(2) { animation-delay: 0.18s; }
.tdot:nth-child(3) { animation-delay: 0.36s; }
@keyframes tdot { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }

.quick-replies {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 0 30px 12px;
}
.chip {
  font-size: 0.82rem; font-weight: 500; font-family: inherit;
  padding: 7px 15px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.chip:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

.chat-form { border-top: 1px solid var(--line); }
.composer { display: flex; gap: 12px; padding: 14px 18px; align-items: flex-end; }
.composer-textarea {
  flex: 1; resize: none; border-radius: 12px;
  max-height: 140px;
}
.composer .btn { flex-shrink: 0; }

.upload-panel { border-top: 1px solid var(--line); padding: 18px 22px 22px; background: #fff; }
.upload-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.upload-head h2 { font-size: 0.92rem; }
.upload-head p { font-size: 0.8rem; color: #94a3b8; }
/* Real upload progress — replaces the upload-count hint while a batch
   is in flight (see js/workspace.js's XHR progress handler). */
.upload-progress { margin-bottom: 12px; }
.upload-progress-bar {
  height: 6px; border-radius: 999px; background: var(--line);
  overflow: hidden; margin-bottom: 6px;
}
.upload-progress-fill {
  height: 100%; width: 0%; background: var(--accent);
  border-radius: 999px; transition: width 0.15s ease;
}
.upload-progress span { font-size: 0.78rem; color: var(--soft); }
.photo-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px; border-radius: var(--radius); transition: background 0.15s;
}
.photo-grid.dragging { background: var(--accent-soft); outline: 2px dashed var(--accent); outline-offset: 4px; }
.photo-thumb {
  aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden;
  position: relative; background: var(--line);
}
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-tag {
  position: absolute; top: 4px; right: 4px;
  font-size: 0.55rem; font-weight: 700; letter-spacing: 0.06em;
  background: var(--accent); color: #fff;
  border-radius: 4px; padding: 2px 5px;
}
.photo-remove {
  position: absolute; top: 4px; right: 4px;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: rgba(15, 23, 42, 0.6); color: #fff;
  font-size: 0.95rem; line-height: 1; padding: 0; padding-bottom: 1px;
  cursor: pointer;
  opacity: 0; transition: opacity 0.15s ease, background 0.15s ease;
}
/* Same reasoning as the video-card kebab: hover-reveal on desktop, but
   ALWAYS visible on touch — there's no hover state to reveal it there. */
.photo-thumb:hover .photo-remove,
.photo-remove:focus { opacity: 1; }
@media (hover: none) { .photo-remove { opacity: 1; } }
.photo-remove:hover { background: var(--danger); }
/* MOTION badge also sits top-right — push it down a row so the two
   never overlap on a hero shot. */
.photo-thumb .hero-tag { top: 26px; }
.photo-add {
  aspect-ratio: 4 / 3; border-radius: 8px;
  border: 1.5px dashed #cbd5e1; background: var(--panel);
  color: #94a3b8; font-size: 1.4rem; cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.photo-add:hover { border-color: var(--accent); color: var(--accent); }
.photo-add.uploading { animation: pulse 1s infinite; pointer-events: none; }
@keyframes pulse { 50% { opacity: 0.4; } }

@media (max-width: 900px) {
  .studio-layout { grid-template-columns: 1fr; }
  .job-panel { position: static; order: 2; }
}

/* ---- Videos page ---- */
.videos-page { padding-top: 40px; padding-bottom: 70px; }
.videos-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 28px; flex-wrap: wrap;
}
.videos-head h1 { font-size: 1.5rem; }
.videos-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.videos-empty {
  text-align: center; padding: 70px 20px;
  background: var(--panel); border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
}
.videos-empty p { color: var(--soft); margin-bottom: 18px; }
.videos-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}
.video-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  /* NOT overflow:hidden — that would clip the kebab dropdown. The frame
     below clips its own corners instead, so the card still looks the
     same but the menu can escape the card's bounds. */
  position: relative;
  transition: opacity 0.18s ease;
}
.video-card-frame {
  position: relative; aspect-ratio: 16 / 9; background: var(--line);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
}

/* ---- Kebab menu on each card ----
   Bottom-right of the card, sitting on the white body alongside the
   action buttons rather than floating over the video. Always visible:
   on a light background it's quiet enough not to need hiding, and a
   hover-only control is unreachable on touch anyway. */
.card-menu { position: absolute; bottom: 23px; right: 14px; z-index: 5; }
.card-menu-btn {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 50%;
  background: none;
  color: var(--soft); font-size: 1.15rem; line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.card-menu-btn:hover,
.card-menu-btn[aria-expanded="true"] {
  background: var(--panel); color: var(--ink); border-color: var(--line);
}

.card-menu-list {
  /* Opens UPWARD — anchored at the bottom of the card, a downward menu
     would spill past the card and off short pages. */
  position: absolute; bottom: 36px; right: 0;
  min-width: 150px; padding: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 28px -12px rgba(15, 23, 42, 0.35);
}
.card-menu-list button {
  display: block; width: 100%;
  padding: 8px 10px;
  background: none; border: none; border-radius: 6px;
  font: inherit; font-size: 0.86rem; color: var(--ink);
  text-align: left; cursor: pointer;
}
.card-menu-list button:hover { background: var(--panel); }
.card-menu-list button.danger { color: var(--danger); }
.card-menu-list button.danger:hover { background: var(--danger-soft); }

/* ---- Share dialog ---- */
.share-modal { position: fixed; inset: 0; z-index: 200; display: flex;
  align-items: center; justify-content: center; padding: 20px; }
.share-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.5); }
.share-box {
  position: relative; width: 100%; max-width: 460px;
  background: var(--paper); border-radius: var(--radius-lg);
  padding: 26px; box-shadow: 0 24px 60px -20px rgba(15, 23, 42, 0.5);
}
.share-box h2 { font-size: 1.15rem; margin-bottom: 4px; }
.share-note { color: var(--soft); font-size: 0.86rem; margin-bottom: 16px; }
.share-row { display: flex; gap: 8px; margin-bottom: 16px; }
.share-row input {
  flex: 1 1 auto; min-width: 0;
  padding: 9px 11px; font-size: 0.84rem;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink);
}
.share-actions { display: flex; justify-content: space-between; gap: 8px; }

/* ---- Public watch page ---- */
.watch-wrap { max-width: 900px; padding-top: 34px; padding-bottom: 60px; }
.watch-player {
  border-radius: var(--radius-lg); overflow: hidden;
  background: #000; box-shadow: var(--shadow-card);
}
.watch-player video { width: 100%; display: block; aspect-ratio: 16 / 9; }
.watch-meta { text-align: center; padding: 26px 0 8px; }
.watch-meta h1 { font-size: 1.6rem; margin-bottom: 4px; }
.watch-sub { color: var(--soft); margin-bottom: 14px; }
.watch-agent { font-size: 0.94rem; margin-bottom: 18px; }
.watch-company { display: block; color: var(--soft); font-size: 0.86rem; }
.watch-cta { text-align: center; color: var(--soft); font-size: 0.84rem; padding-top: 26px; }
.watch-missing { text-align: center; padding: 90px 20px; }
.watch-missing h1 { font-size: 1.5rem; margin-bottom: 8px; }
.watch-missing p { color: var(--soft); margin-bottom: 20px; }
.video-card-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-card-blank {
  width: 100%; height: 100%;
  background: linear-gradient(150deg, #e2e8f0, #cbd5e1);
  display: flex; align-items: center; justify-content: center;
}
.spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.6);
  border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.video-status {
  position: absolute; top: 10px; left: 10px;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em;
  background: rgba(15, 23, 42, 0.75); color: #fff;
  border-radius: 999px; padding: 3px 10px;
}
.video-status.status-done { background: var(--success); }
.video-status.status-failed { background: var(--danger); }
.video-card-body { padding: 16px 18px 18px; }
.video-card-body h3 { font-size: 1rem; margin-bottom: 2px; }
.video-meta { font-size: 0.82rem; color: var(--soft); margin-bottom: 12px; }
.video-actions {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  /* Keep the last button clear of the kebab, which is absolutely
     positioned over this row's right edge. */
  padding-right: 38px;
}
.video-error { font-size: 0.78rem; color: var(--danger); }

/* ---- Footer ---- */
.site-footer {
  background: var(--panel); border-top: 1px solid var(--line);
  padding: 50px 0 30px; margin-top: 40px;
}
.footer-inner {
  display: grid; grid-template-columns: 1.2fr 2fr; gap: 30px;
}
.footer-brand { font-weight: 700; font-size: 1.05rem; }
.footer-tag { color: var(--soft); font-size: 0.85rem; margin-top: 4px; }
.footer-nav-group { display: flex; gap: 60px; flex-wrap: wrap; }
.footer-nav-title {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: #94a3b8; margin-bottom: 10px;
}
.footer-nav-group a {
  display: block; color: var(--soft); text-decoration: none;
  font-size: 0.87rem; padding: 3px 0;
}
.footer-nav-group a:hover { color: var(--ink); }
.footer-legal {
  grid-column: 1 / -1; border-top: 1px solid var(--line);
  padding-top: 20px; margin-top: 10px;
  font-size: 0.78rem; color: #94a3b8;
}

/* ---- Cookie consent (hooks match js/cookie-consent.js) ---- */
.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px -25px rgba(15, 23, 42, 0.4);
  padding: 16px 20px;
  display: none;
  align-items: center; justify-content: space-between; gap: 18px;
  flex-wrap: wrap;
  max-width: 980px; margin: 0 auto;
}
.cookie-banner.visible { display: flex; }
.cookie-text { font-size: 0.85rem; color: var(--soft); }
.cookie-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cc-btn {
  font: inherit; font-size: 0.82rem; font-weight: 600;
  padding: 8px 14px; border-radius: 9px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  cursor: pointer;
}
.cc-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.cookie-modal {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(15, 23, 42, 0.45);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.cookie-modal.visible { display: flex; }
.cookie-modal-card {
  background: #fff; border-radius: var(--radius-lg);
  max-width: 520px; width: 100%; max-height: 85vh; overflow-y: auto;
  padding: 28px; position: relative;
}
.cc-close {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none; font-size: 1.4rem;
  color: var(--soft); cursor: pointer;
}
.cc-sub { font-size: 0.88rem; color: var(--soft); margin: 8px 0 18px; }
.cc-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 13px 0; border-top: 1px solid var(--line);
}
.cc-row h3 { font-size: 0.92rem; }
.cc-row p { font-size: 0.8rem; color: var(--soft); }
.cc-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.cc-switch input { opacity: 0; width: 0; height: 0; }
.cc-switch span {
  position: absolute; inset: 0; border-radius: 999px;
  background: var(--line); transition: background 0.15s; cursor: pointer;
}
.cc-switch span::before {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  transition: transform 0.15s;
}
.cc-switch input:checked + span { background: var(--accent); }
.cc-switch input:checked + span::before { transform: translateX(18px); }
.cc-locked span { opacity: 0.6; cursor: not-allowed; }
.cc-footer { margin-top: 18px; text-align: right; }

/* ---- Policy pages (copied structure renders as plain prose) ---- */
.policy-page, .legal-page { max-width: 760px; margin: 50px auto 70px; padding: 0 24px; }
.policy-page h1, .legal-page h1 { font-size: 1.7rem; margin-bottom: 18px; }
.policy-page h2, .legal-page h2 { font-size: 1.15rem; margin: 28px 0 10px; }
.policy-page p, .legal-page p, .policy-page li, .legal-page li {
  font-size: 0.94rem; color: #334155; margin-bottom: 10px;
}
.policy-page ul, .legal-page ul { padding-left: 22px; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: 1fr; }
  .tier-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
  .footer-inner { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
  .section { padding: 60px 0; }
  .hero { padding: 64px 0 50px; }
  .field-grid-2, .address-grid { grid-template-columns: 1fr; }
  .cta-inner { padding: 28px; }
}

/* ---- Policy pages (markup structure carried over from the vetted site) ---- */
.policy-hero { padding: 60px 0 6px; }
.policy-hero h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); }
.policy-dates { color: var(--soft); font-size: 0.85rem; margin-top: 8px; }
.policy-layout {
  display: grid; grid-template-columns: 230px 1fr; gap: 46px;
  align-items: start;
}
.policy-toc {
  position: sticky; top: 90px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px;
  font-size: 0.85rem;
}
.toc-title {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: #94a3b8; margin-bottom: 8px;
}
.policy-toc ol { padding-left: 18px; }
.policy-toc li { margin: 4px 0; }
.policy-toc a { color: var(--soft); text-decoration: none; }
.policy-toc a:hover { color: var(--accent); }
.policy-content h2 { font-size: 1.15rem; margin: 30px 0 10px; }
.policy-content h3 { font-size: 0.98rem; margin: 18px 0 8px; }
.policy-content p, .policy-content li { font-size: 0.93rem; color: #334155; margin-bottom: 10px; }
.policy-content ul, .policy-content ol { padding-left: 22px; margin-bottom: 12px; }
.policy-content table { width: 100%; border-collapse: collapse; font-size: 0.87rem; margin: 14px 0; }
.policy-content th, .policy-content td {
  text-align: left; padding: 8px 10px; border: 1px solid var(--line);
}
.policy-content th { background: var(--panel); }
.policy-callout {
  background: var(--accent-soft); border: 1px solid #dbeafe;
  border-radius: var(--radius); padding: 14px 18px;
  font-size: 0.88rem; margin: 16px 0;
}
.policy-links a { margin-right: 14px; }
@media (max-width: 800px) {
  .policy-layout { grid-template-columns: 1fr; }
  .policy-toc { position: static; }
}

/* ===================================================================
   Site-wide hover reactivity (paired with js/effects.js)
   =================================================================== */

/* Buttons: lift + deepen shadow + a light sheen that sweeps across. */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -75%;
  width: 50%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  transition: left 0.45s ease;
  pointer-events: none;
}
.btn:hover::after { left: 125%; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary:hover { box-shadow: 0 10px 24px -8px rgba(37, 99, 235, 0.55); }
.btn-ghost:hover { box-shadow: 0 8px 18px -10px rgba(15, 23, 42, 0.3); }

/* Nav links: animated underline that grows from the left. */
.site-nav a:not(.nav-btn) {
  background: linear-gradient(var(--accent), var(--accent)) no-repeat left bottom;
  background-size: 0% 2px;
  transition: background-size 0.25s ease, color 0.15s;
  padding-bottom: 3px;
}
.site-nav a:not(.nav-btn):hover { background-size: 100% 2px; }

/* Brand mark: play triangle nudges forward like a pressed play button. */
.brand-block .logo-mark::after { transition: transform 0.2s ease; }
.brand-block:hover .logo-mark::after { transform: translate(-38%, -50%); }

/* Cards (steps, features, tiers, video cards): lift + accent border +
   a spotlight that follows the cursor (js/effects.js feeds --mx/--my). */
.step, .feature, .tier-card, .video-card {
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.step:hover, .feature:hover, .tier-card:hover, .video-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 22px 45px -22px rgba(37, 99, 235, 0.35);
}
.step::before, .feature::before, .tier-card::before, .video-card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
    rgba(37, 99, 235, 0.10), transparent 65%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.step:hover::before, .feature:hover::before,
.tier-card:hover::before, .video-card:hover::before { opacity: 1; }

/* Step numbers pop when their card is hovered. */
.step-num { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.step:hover .step-num {
  transform: scale(1.18) rotate(-6deg);
  box-shadow: 0 8px 18px -6px rgba(37, 99, 235, 0.5);
}

/* Dark filmed section: glass cards brighten and glow instead of shadow. */
.section-filmed .feature:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(147, 197, 253, 0.6);
  box-shadow: 0 22px 45px -20px rgba(37, 99, 235, 0.5);
}
.section-filmed .feature::before {
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
    rgba(147, 197, 253, 0.16), transparent 65%);
}

/* Hero mock player: JS-driven 3D tilt toward the cursor; the play
   button breathes on hover. */
.hero-frame {
  transition: transform 0.2s ease-out, box-shadow 0.3s ease;
  will-change: transform;
}
.hero-frame:hover { box-shadow: 0 50px 100px -40px rgba(37, 99, 235, 0.45); }
.hf-play { transition: transform 0.25s ease; }
.hero-frame:hover .hf-play { transform: translate(-50%, -50%) scale(1.12); }
.video-showcase-placeholder .hf-play,
.video-showcase-placeholder:hover .hf-play { transform: none; }
.video-showcase-placeholder:hover .hf-play { transform: scale(1.12); }

/* Photo grid thumbs (studio): zoom the image inside a fixed frame. */
.photo-thumb img { transition: transform 0.3s ease; }
.photo-thumb:hover img { transform: scale(1.1); }
.photo-thumb { transition: box-shadow 0.2s ease; }
.photo-thumb:hover { box-shadow: 0 0 0 2px var(--accent); }

/* Chips / quick replies: lift with the color change. */
.chip { transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s; }
.chip:hover { transform: translateY(-2px); box-shadow: 0 6px 14px -6px rgba(37, 99, 235, 0.35); }

/* Footer links slide right a touch. */
.footer-nav-group a { transition: color 0.15s, transform 0.15s; }
.footer-nav-group a:hover { transform: translateX(3px); }

/* Account ledger rows highlight on hover. */
.ledger-table tr { transition: background 0.15s; }
.ledger-table tr:hover { background: var(--accent-soft); }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn::after, .step, .feature, .tier-card, .video-card,
  .step-num, .hero-frame, .hf-play, .photo-thumb img, .chip {
    transition: none;
    animation: none;
  }
  .step:hover, .feature:hover, .tier-card:hover, .video-card:hover,
  .btn:hover, .chip:hover { transform: none; }
}

/* ===================================================================
   Cursor-reactive fluid bloom — HERO ONLY (js/effects.js injects
   .fluid-bloom into the hero): a blurred pool of color that chases the
   mouse with liquid easing and sharpens with movement speed, so it
   reads as stirring the hero's animated color field. It rides above
   the background layers but under the content (.hero-inner is
   positioned, so it paints on top).
   =================================================================== */
.fluid-bloom {
  position: absolute;
  top: 0; left: 0;
  z-index: 1;                     /* above the background field… */
  width: 640px; height: 640px;
  margin: -320px 0 0 -320px;      /* centered on the tracked point */
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  filter: blur(60px);
  background:
    radial-gradient(circle at 42% 42%, rgba(96, 165, 250, 0.50), transparent 58%),
    radial-gradient(circle at 62% 58%, rgba(167, 139, 250, 0.42), transparent 60%),
    radial-gradient(circle at 50% 68%, rgba(103, 232, 249, 0.35), transparent 62%);
  will-change: transform, opacity;
}
.hero-inner { z-index: 2; }       /* …but under the headline and CTAs */

@media (prefers-reduced-motion: reduce) {
  .fluid-bloom { display: none; }
}

/* Temporary-testing banner shown only while TWO_FA_ENABLED is false
   (see includes/header.php). Deliberately loud so a disabled security
   control can't quietly ship to production. */
.twofa-warning {
  background: #fef3c7;
  border-bottom: 1px solid #fcd34d;
  color: #78350f;
  font-size: 0.82rem;
  text-align: center;
  padding: 9px 20px;
}
.twofa-warning code {
  background: rgba(120, 53, 15, 0.1);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.78rem;
}

/* ---- Working indicator + rotating "while you wait" message ---- */
.working-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 30px;
  border-top: 1px solid var(--line);
  background: var(--accent-soft);
  font-size: 0.86rem;
  /* Reserve two lines of ad copy so the bar is the same height whether
     the rotating message runs to one line or two. Without this the chat
     above it jumps every time a different-length ad is drawn. Derived
     from the real type metrics below (--ad-size x --ad-leading) plus the
     vertical padding, so it stays correct if either is retuned. */
  --ad-size: 0.82rem;
  --ad-leading: 1.45;
  min-height: calc(24px + (2 * var(--ad-size) * var(--ad-leading)));
  box-sizing: border-box;
}
.working-spinner {
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(37, 99, 235, 0.25);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}
.working-text { font-weight: 600; color: var(--accent); }
.working-ad {
  color: var(--soft);
  font-size: var(--ad-size);
  line-height: var(--ad-leading);
  flex: 1 1 240px;
  min-width: 0;
  /* Longer messages clamp to two lines rather than growing the bar, so
     the reserved height above is a real ceiling as well as a floor. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .working-spinner { animation: none; }
}

/* Failure reason under the checklist, and the start/retry button. */
.job-error {
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 8px 10px;
  word-break: break-word;
}
#job-retry { margin-top: 12px; }

/* In-progress checklist row: the empty circle pulses blue with a soft
   halo so the panel reads as alive rather than stalled. Paired with the
   label text (Queued / Rendering / …) which also turns accent blue. */
.job-checklist li.working .ck {
  border-color: var(--accent);
  background: var(--accent-soft);
  animation: ck-pulse 1.4s ease-in-out infinite;
}
.job-checklist li.working { color: var(--ink); }
.job-checklist li.working em { color: var(--accent); font-weight: 600; }

@keyframes ck-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 5px rgba(37, 99, 235, 0);
    opacity: 0.55;
  }
}

/* Reduced-motion users get a steady accent ring instead of a pulse. */
@media (prefers-reduced-motion: reduce) {
  .job-checklist li.working .ck {
    animation: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
  }
}