/* marketing.css — public landing page, theme picker/preview widgets, theme toggle,
   /sa bulk-action console, and the shared hamburger nav button. */

/* —— Marketing landing —— */
.hero-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

.section { padding: 10px 0; }
.section-title { margin-bottom: 8px; }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.feature {
  background: var(--panel-alpha);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
}
.feature h3 { color: var(--ink); }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.price-card {
  background: var(--panel-alpha);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.price-card.is-hot {
  border-color: var(--link-ring);
  box-shadow: 0 0 0 1px var(--link-soft), var(--shadow);
}
.price-amount {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.price-card ul {
  margin: 8px 0 0;
  padding-left: 1.1rem;
  color: var(--muted);
  flex: 1;
}
.price-card li { margin: 6px 0; }

.site-footer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
}

/* —— Theme picker (config) —— */
.theme-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 14px;
}
.theme-swatch {
  width: 92px;
  border-radius: 12px;
  border: 2px solid transparent;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background: var(--swatch-grad);
}
.theme-swatch.is-selected { border-color: var(--swatch-accent, var(--link)); box-shadow: 0 0 0 2px var(--link-ring); }
.theme-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.theme-swatch-fill { display: block; height: 52px; }
.theme-swatch-name {
  display: block;
  text-align: center;
  font-size: 0.75rem;
  padding: 6px 4px;
  background: rgba(0,0,0,0.35);
}
.theme-preview {
  border-radius: 16px;
  min-height: 160px;
  padding: 22px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
}
.theme-preview-inner { max-width: 420px; }
.theme-preview-eyebrow {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.theme-preview-title { font-size: 1.2rem; font-weight: 600; margin: 6px 0; }
.theme-preview-sub { color: rgba(255,255,255,0.75); font-size: 0.9rem; margin-bottom: 14px; }
.theme-preview-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.theme-preview-btn {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.15);
  font-size: 0.85rem;
}
.theme-preview-btn.is-focus {
  background: var(--preview-accent, var(--link));
  color: #0b1220;
  border-color: transparent;
  font-weight: 700;
}

.row-item {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  margin-bottom: 8px;
  align-items: end;
}

code {
  background: var(--toggle-bg);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.9em;
}

/* —— Theme toggle —— */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--toggle-bg);
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.theme-toggle:hover { filter: brightness(1.06); }
.theme-toggle .theme-icon { font-size: 1rem; line-height: 1; }
.theme-toggle .theme-label-light { display: none; }
html[data-theme="light"] .theme-toggle .theme-label-dark { display: none; }
html[data-theme="light"] .theme-toggle .theme-label-light { display: inline; }
html[data-theme="dark"] .theme-toggle .theme-label-light { display: none; }
html[data-theme="dark"] .theme-toggle .theme-label-dark { display: inline; }

.sidebar-foot .theme-toggle { width: 100%; justify-content: center; margin-bottom: 8px; }
.app-top .theme-toggle { margin-right: 8px; }

html[data-theme="light"] .badge-muted {
  background: rgba(15, 30, 55, 0.06);
}
html[data-theme="light"] .stat,
html[data-theme="light"] .price-card,
html[data-theme="light"] .feature {
  border-color: var(--border);
}

/* —— SA bulk cleanup (testing) —— */
.btn-danger {
  background: linear-gradient(135deg, #c0392b, #922b21);
  border-color: transparent;
  color: #fff;
}
.btn-sm {
  padding: 4px 10px;
  font-size: 0.75rem;
}
.sa-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}
.sa-filter-field label {
  margin-top: 0;
  margin-bottom: 4px;
}
.sa-filter-field input,
.sa-filter-field select {
  min-width: 140px;
}
.sa-filter-grow {
  flex: 1;
  min-width: 180px;
}
.sa-bulk-bar {
  margin-bottom: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(240, 193, 75, 0.4);
  background: rgba(240, 193, 75, 0.08);
  position: sticky;
  top: 0;
  z-index: 20;
}
.sa-bulk-bar-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.sa-modal[hidden] { display: none !important; }
.sa-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.sa-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.sa-modal-panel {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  max-height: min(80vh, 640px);
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 20px 22px;
}
.sa-modal-list {
  max-height: 160px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 10px 0;
  background: var(--input-bg);
  font-size: 0.85rem;
}
.sa-modal-list-item {
  padding: 3px 0;
  border-bottom: 1px solid var(--border);
}
.sa-modal-list-item:last-child { border-bottom: 0; }
.sa-modal-warn {
  background: rgba(240, 113, 120, 0.12);
  border: 1px solid rgba(240, 113, 120, 0.35);
  color: var(--danger);
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 0.9rem;
  font-weight: 600;
}

/* —— Hamburger toggles (hidden on desktop; shown at mobile breakpoints) —— */
.nav-toggle {
  display: none;
  flex-direction: column; /* stack the 3 bars vertically — row (the flex default) staggers them diagonally */
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--toggle-bg);
  color: var(--ink);
  cursor: pointer;
  flex: 0 0 auto;
}
.nav-toggle:hover { filter: brightness(1.06); }
.nav-toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.nav-toggle-bar + .nav-toggle-bar { margin-top: 4px; }

/* —— Tablet / small-laptop —— */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }

  .feature-grid, .pricing-grid, .row-item {
    grid-template-columns: 1fr;
  }
}

/* —— Phone —— */
@media (max-width: 520px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .price-amount { font-size: 1.7rem; }
  .site-footer { margin-top: 22px; }
}

/* —— Section bands —— */
.band { padding: var(--band-pad) 24px; }
.band-inner { max-width: var(--wrap); margin: 0 auto; }
.band-alt { background: var(--ground-alt); }
.band-deep { background: var(--band-deep); color: var(--on-band); }
.band-brand { background: var(--band-brand); color: var(--on-band); }
.band-deep .muted, .band-brand .muted { color: var(--on-band-muted); }
.band-deep h2, .band-brand h2 { color: var(--on-band); }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.band-deep .eyebrow, .band-brand .eyebrow { color: var(--on-band-muted); }

.display {
  font-family: var(--font-display);
  font-size: var(--fs-h1-lg); /* type scale — tokens.css */
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 700; /* Lato has no 600 (static weights only: 400/700/900) */
  margin: 0 0 20px;
}
.lede { font-size: 1rem; color: var(--muted); max-width: 56ch; margin: 0 0 20px; }
.band-deep .lede, .band-brand .lede { color: var(--on-band); }

/* —— Cinematic hero —— */
.hero-cinema {
  position: relative;
  min-height: clamp(300px, 60svh, 600px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--ground);
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  /* One photo for both themes, so this lives on the base rule rather than being
     duplicated per theme. The plain url() is the floor for browsers without
     image-set(); they get the jpg and never fetch the webp, because an
     overridden background-image is not requested. The 720px block below swaps
     in a half-size pair — keep the preload in layout.php on the same
     breakpoint or phones fetch both. */
  background-image: url("/assets/img/hero-background-sl.jpg");
  background-image: image-set(
    url("/assets/img/hero-background-sl.webp") type("image/webp"),
    url("/assets/img/hero-background-sl.jpg") type("image/jpeg")
  );
}
html[data-theme="dark"] .hero-cinema {
  align-items: flex-end;
  padding-bottom: clamp(20px, 4vh, 20px);
}
.hero-cinema::before {
  /* Flat wash over the whole photo — same in both themes and at every
     breakpoint, so it doesn't need re-tuning when the text position or
     mobile crop % changes. Adjust --cinema-wash in tokens.css to restrengthen. */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: var(--cinema-wash);
}
.hero-cinema-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: clamp(30px, 6vw, 50px) 20px;
}
.hero-cinema-copy {
  max-width: 34rem;
  margin-left: auto; /* right-hand column on wide viewports; reset to full-width below 720px */
  color: var(--cinema-ink);
}
.hero-cinema .display { color: var(--cinema-ink-strong); }
.hero-cinema .lede { color: var(--cinema-muted); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.hero-cinema .eyebrow { color: var(--cinema-muted); }
.hero-cinema .hero-meta,
.hero-cinema .hero-hardware { color: var(--cinema-muted); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.hero-hardware { margin-top: 10px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 13px; }
.btn-lg { padding: 6px 14px; font-size: 0.8rem; border-radius: 10px; }

@media (max-width: 720px) {
  .hero-cinema {
    min-height: auto;
    align-items: center;
    padding-bottom: 0;
    /* Half-size pair: 23KB webp instead of 71KB. The photo is decorative and
       sits under --cinema-wash, so 960px is enough even on a 3x phone. */
    background-image: url("/assets/img/hero-background-sl-sm.jpg");
    background-image: image-set(
      url("/assets/img/hero-background-sl-sm.webp") type("image/webp"),
      url("/assets/img/hero-background-sl-sm.jpg") type("image/jpeg")
    );
  }
  .hero-cinema-inner { padding: 30px 20px 30px; }
  .hero-cinema-copy { max-width: none; }
}

/* Phone-only crop: desktop anchors "center right" (bed); phones crop hard
   left/right too, so re-anchor toward the TV without losing the bed
   entirely. Must come after the base .hero-cinema rule above — same
   specificity, so an earlier declaration would silently lose the cascade
   tie regardless of this media query matching. Eyeball and adjust the %. */
@media (max-width: 520px) {
  .hero-cinema { background-position: 26% center; }
  .hero-cinema .lede { font-size: 0.92rem; margin-left: 10px; margin-right: 10px; }
  .hero-actions { margin-left: 40px; margin-right: 40px; }
  .hero-meta { margin-left: 10px; margin-right: 10px; }
  .hero-hardware { margin-left: 10px; margin-right: 10px; }
}

/* —— Product rail —— */
.rail-intro { margin-bottom: 8px; }
.rail {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 20px;
  border-top: 1px solid var(--border);
}
.rail-card { border-bottom: 1px solid var(--border); }
.rail-card summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
}
.rail-card summary::-webkit-details-marker { display: none; }
.rail-card[open] summary {
  flex-wrap: wrap; /* the full-width image below forces h3+icon onto their own row after it */
}
.rail-icon { display: inline-flex; flex-shrink: 0; margin-left: auto; color: var(--muted); transition: transform 0.2s ease; }
.rail-card[open] .rail-icon { transform: rotate(180deg); }
.rail-card summary img {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 10px;
  object-fit: cover;
  background: var(--ground-alt);
}
.rail-card[open] summary img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
}
.rail-card summary h3 { margin: 0; font-size: 1rem; }
.rail-card[open] summary h3 { font-size: 1.1rem; margin-top: 10px; }
.rail-card > div { margin: 0 4px 16px; font-size: 0.95rem; }
.rail-card:focus-within {
  box-shadow: 0 0 0 2px var(--link-ring);
  z-index: 1;
}

/* Desktop: all 3 cards visible at once, no scroll, no accordion. The
   [open]-scoped rules above only matter below 901px — this block styles
   every .rail-card summary the same way regardless of its native open
   state, and forces the content div visible below, so toggling the
   underlying attribute (e.g. via keyboard) has no visible effect here. */
@media (min-width: 901px) {
  .rail {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    border-top: none;
  }
  .rail-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 11px;
    background: var(--panel);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .rail-card:hover,
  .rail-card:focus-within {
    transform: scale(1.04);
    box-shadow: 0 0 0 2px var(--link-ring), var(--shadow);
    z-index: 1;
  }
  .rail-card summary {
    cursor: default;
    padding: 0;
    flex-wrap: wrap; /* same wrap trick as [open] above: full-width image forces title onto its own row */
  }
  .rail-card summary img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
  }
  .rail-card summary h3 { font-size: 1.1rem; margin: 14px 0 6px; }
  .rail-icon { display: none; }
  .rail-card > div {
    display: block;
    margin: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rail-icon { transition: none; }
  .rail-card { transition: none; }
  .rail-card:hover,
  .rail-card:focus-within { transform: none; }
}

.demo-card {
  margin-top: 40px;
  /*max-width: 620px;*/
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--panel-alpha);
  border: 1px solid var(--link-ring);
  border-radius: var(--radius);
  padding: 24px 26px;
}
.demo-card h3 { margin: 0; }
.demo-card .btn { align-self: flex-start; }

/* —— Problem band —— */
.problem-title {
  font-family: var(--font-display);
  font-size: var(--fs-h2-lg); /* type scale — tokens.css */
  line-height: 1.1; max-width: 20ch; margin: 0 0 15px;
}
.problem-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.problem-list li {
  font-size: 1.08rem; padding-top: 18px;
  /* .problem-list only ever renders inside .band-deep, so it takes the
     on-band pair rather than the page --ink/--border. */
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--on-band);
}

@media (max-width: 900px) {
  .problem-list { grid-template-columns: 1fr; gap: 14px; }
}

/* —— How it works —— */
.timeline { list-style: none; counter-reset: s; padding: 0; margin: 13px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.timeline li { counter-increment: s; padding-top: 44px; position: relative; }
.timeline li::before {
  content: counter(s);
  position: absolute; top: 0; left: 0;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--link-soft); color: var(--link);
  font-weight: 700; font-size: 0.9rem;
}
.timeline li::after {
  content: ""; position: absolute; top: 15px; left: 44px; right: -32px; height: 2px;
  background: var(--border);
}
.timeline li:last-child::after { display: none; }

/* —— Privacy comparison —— */
.table-scroll { overflow-x: auto; margin-top: 20px; }
.compare { width: 100%; border-collapse: collapse; min-width: 560px; }
.compare th, .compare td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.compare thead th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; }
.compare td.yes { color: var(--sage); font-weight: 600; }
.compare td.no { color: var(--muted); }
.compare code { font-size: 0.85em; background: var(--ground-alt); padding: 2px 6px; border-radius: 5px; }
.footnote { max-width: 68ch; margin-top: 18px; }

/* —— SA-local + pricing —— */
.local-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 28px; }

.pricing-2 { grid-template-columns: repeat(2, 1fr); max-width: 840px; }
.pricing-1 { grid-template-columns: 1fr; max-width: 420px; }
.price-amount { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; letter-spacing: -0.03em; }
.price-amount-sm { font-size: 1.5rem; }
.price-card.is-hot { border-color: var(--link); border-width: 2px; }
.feature-strip { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--border); }
.feature-strip ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; color: var(--muted); }

/* —— Pull quote —— */
.quote-band blockquote { margin: 0; max-width: 24ch; }
.quote-band p { font-family: var(--font-display); font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.2; margin: 0 0 20px; }
.quote-band cite { font-style: normal; font-size: 0.95rem; color: var(--on-band-muted); }

/* —— FAQ (accordion, shared by the landing preview and /faq) —— */
.faq-list { margin-top: 28px; border-top: 1px solid var(--border); }
.faq-list details { border-bottom: 1px solid var(--border); }
.faq-list summary {
  cursor: pointer; padding: 18px 0; font-weight: 600; font-size: 1.05rem;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-icon { display: inline-flex; flex-shrink: 0; color: var(--muted); transition: transform 0.2s ease; }
.faq-list details[open] .faq-icon { transform: rotate(180deg); }
.faq-list details > div { padding: 0 0 20px; max-width: 68ch; }

@media (max-width: 900px) {
  .timeline, .local-grid, .pricing-2, .pricing-1, .feature-strip ul { grid-template-columns: 1fr; }
  .timeline li::after { display: none; }
  .quote-band blockquote { max-width: none; }
}

/* —— Site footer —— */
.site-footer { background: var(--band-deep); color: var(--on-band); padding: 32px 20px 32px; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.footer-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.footer-grid h4 { font-family: var(--font-body); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--on-band-muted); margin: 0 0 14px; }
.footer-grid a { display: block; color: var(--on-band); text-decoration: none; padding: 5px 0; }
.footer-grid a:hover { color: var(--on-band); text-decoration: underline; }
.footer-grid .brand { color: var(--on-band); display: inline-block; margin-bottom: 12px; }
.footer-grid .muted { color: var(--on-band-muted); }
.footer-legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.14); color: var(--on-band-muted); }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }

/* --- SEO landing pages (shared template) --- */
.narrow { max-width: 780px; }
/* .page-h1 sizing folded into .display (--fs-h1-lg) — the class only ever
   appears alongside .display in the markup. */
.prose { font-size: 1.06rem; color: var(--muted); }
.prose p { margin: 0 0 18px; max-width: 68ch; }
.prose ul { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--ink); }
.band-deep .prose strong { color: var(--on-band); }

/* —— Mobile sticky trial CTA (marketing pages only) —— */
.mobile-sticky-cta { display: none; }
@media (max-width: 767px) {
  body.is-marketing .mobile-sticky-cta {
    display: block;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 900;
    padding: 12px 16px;
    background: var(--band-brand);
  }
  body.is-marketing .mobile-sticky-cta.is-hidden { display: none; }
  .mobile-sticky-cta .btn {
    width: 100%;
    background: var(--on-band);
    color: var(--band-brand);
    border-color: transparent;
  }
  body.is-marketing { padding-bottom: 50px; }
}