/* ================= Design Tokens ================= */
/* Centralized palette keeps every screen on the same color language. */
:root {
  /* ----- Grayscale anchors ----- */
  --color-white: #ffffff;
  --color-white-rgb: 255, 255, 255;
  --color-ink: #111827;
  --color-ink-strong: #0f172a;
  --color-muted: #6b7280;
  --color-muted-strong: #556070;
  --color-slate-rgb: 17, 24, 39;
  --color-ink-rgb: 15, 16, 32;
  --color-navy-rgb: 15, 23, 42;
  --color-gray-dark: #1f2937;
  --color-black-rgb: 0, 0, 0;

  /* ----- Brand indigo ----- */
  --color-primary: #635bff;
  --color-primary-hover: #524ae8;
  --color-primary-dark: #4338ca;
  --color-primary-rgb: 99, 91, 255;
  --color-primary-soft-rgb: 104, 71, 255;
  --color-primary-shadow-rgb: 80, 72, 200;
  --color-primary-pop: #5148f1;
  --color-indigo-glow-rgb: 79, 70, 239;
  --color-indigo-deep-rgb: 67, 56, 202;

  /* ----- Accent backgrounds ----- */
  --color-bg-soft: #f6f7ff;
  --color-bg-gradient-start: #f4f6ff;
  --color-bg-gradient-mid: #fdfdff;
  --color-bg-gradient-end: #edf0ff;
  --color-bg-alt: #f3f4ff;
  --color-bg-tint: #f5f7ff;
  --color-surface-frost-rgb: 246, 247, 255;
  --color-surface-snow-rgb: 241, 243, 255;
  --color-surface-veil-rgb: 243, 244, 255;
  --color-surface-cloud-rgb: 226, 228, 255;
  --color-surface-mist-rgb: 247, 247, 255;
  --color-surface-lilac-rgb: 196, 181, 253;
  --color-surface-lavender: #f9f8ff;

  /* ----- Status colors ----- */
  --color-success: #059669;
  --color-success-dark: #047857;
  --color-success-rgb: 16, 185, 129;
  --color-success-soft-rgb: 209, 250, 229;
  --color-success-veil-rgb: 236, 253, 245;
  --color-success-emerald-rgb: 5, 150, 105;
  --color-danger: #dc2626;
  --color-danger-dark: #991b1b;
  --color-danger-rgb: 248, 113, 113;
  --color-danger-soft-rgb: 254, 226, 226;
  --color-danger-blush-rgb: 254, 202, 202;
  --color-danger-mist-rgb: 255, 241, 242;
  --color-danger-strong-rgb: 220, 38, 38;
  --color-danger-deep: #b91c1c;
  --color-warning: #f97316;
  --color-warning-dark: #b45309;
  --color-warning-rgb: 251, 191, 36;
  --color-warning-glow-rgb: 249, 115, 22;
  --color-amber-soft-rgb: 254, 243, 199;
  --color-amber-fade-rgb: 255, 251, 235;
  --color-gray-veil-rgb: 148, 163, 184;
  --color-gray-soft-rgb: 226, 232, 240;

  /* ----- Default semantic tokens ----- */
  --text: var(--color-ink);
  --muted: var(--color-muted);
  --page-background: var(--color-white);
}

/* ================= Base Styles ================= */
/* Shared resets keep layout consistent across every page. */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

body {
  display: flex;
  flex-direction: column;
  color: var(--text, var(--color-ink));
  background: var(--page-background, var(--color-white));
}

html {
  background: var(--color-bg-gradient-end);
}

main {
  flex: 1 1 auto;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font: inherit;
}

/* ================= Scrollbar Styling ================= */
/* Transparent tracks keep scrollbars feeling lightweight across the app. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--color-ink-rgb), 0.35) transparent;
}

/* Align WebKit browsers with the global scrollbar treatment above. */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: rgba(var(--color-ink-rgb), 0.35);
  border-radius: 999px;
  border: 2px solid transparent; /* Creates a floating thumb without a visible track. */
}

*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(var(--color-ink-rgb), 0.5);
}

/* Shared primary button keeps calls-to-action consistent. */
.btn-primary,
.cta,
.floating-cta {
  padding: 12px 22px;
  border-radius: 12px;
  background: var(--primary, var(--color-primary));
  color: var(--color-white);
  border: 1.5px solid rgba(var(--color-black-rgb), 0.25);
  font-weight: 600;
  font-size: 0.95em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 12px 25px rgba(var(--color-primary-rgb), 0.3);
  transition: 0.2s ease;
  cursor: pointer;
}
.btn-primary:hover,
.cta:hover,
.floating-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(var(--color-primary-rgb), 0.45);
  background-color: var(--primary-hover, var(--color-primary-hover));
}

/* ================= Landing Page (index.html) ================= */
/* Landing page palette keeps marketing colors consistent. */
body.page-home {
  --bg: var(--color-bg-soft);
  --surface: rgba(var(--color-white-rgb), 0.84);
  --surface-strong: var(--color-white);
  --primary: var(--color-primary);
  --primary-hover: var(--color-primary-hover);
  --primary-dark: var(--color-primary-dark);
  --text: var(--color-ink);
  --muted: var(--color-muted);
  --border: rgba(var(--color-primary-rgb), 0.12);
  --radius: 18px;
  --shadow: 0 20px 45px rgba(var(--color-primary-shadow-rgb), 0.15);
  --page-background: linear-gradient(140deg, var(--color-bg-gradient-start) 0%, var(--color-bg-gradient-mid) 40%, var(--color-bg-gradient-end) 100%);
}
body.page-home {
  scroll-behavior: smooth;
}
/* Marketing header shared across landing + legal pages. */
body.page-home .site-header,
body.page-legal .site-header {
  top: 0;
  z-index: 10;
  border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.08);
}
body.page-home .site-header {
  position: sticky;
  background: rgba(var(--color-surface-frost-rgb), 1);
}
body.page-home .header-inner,
body.page-legal .header-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 2em 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
body.page-home .logo,
body.page-legal .logo {
  font-weight: 700;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
body.page-home .logo-img,
body.page-legal .logo-img {
  height: 48px;
}
body.page-home .logo span,
body.page-legal .logo span {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(var(--color-primary-rgb), 0.14);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--primary);
}
body.page-home nav,
body.page-legal nav {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 0.95rem;
  color: var(--muted);
}
body.page-home nav a,
body.page-legal nav a {
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
body.page-home nav a:hover,
body.page-legal nav a:hover {
  opacity: 1;
  color: var(--text);
}
body.page-home .secondary-btn, body.page-home .btn-ghost {
  padding: 12px 22px;
  border-radius: 12px;
  border: 1px solid rgba(var(--color-primary-rgb), 0.18);
  background: rgba(var(--color-white-rgb), 0.65);
  font-weight: 600;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: 0.2s ease;
}
body.page-home .secondary-btn:hover, body.page-home .btn-ghost:hover {
  background: rgba(var(--color-primary-rgb), 0.05);
}
body.page-home main {
  flex: 1 1 auto;
}
body.page-home .section {
  padding: 90px 20px;
}
body.page-home .hero {
  padding-top: 120px;
  padding-bottom: 90px;
}
body.page-home .container {
  max-width: 1140px;
  margin: 0 auto;
}
body.page-home .hero-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 60px;
}
body.page-home .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(var(--color-primary-rgb), 0.12);
  color: var(--primary);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
body.page-home h1 {
  font-size: clamp(2.7rem, 5vw, 3.6rem);
  line-height: 1.05;
  margin: 22px 0 18px;
}
body.page-home .lead {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--muted);
  max-width: 520px;
  margin-bottom: 32px;
}
body.page-home .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 28px;
}
body.page-home .hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
body.page-home .btn-primary, body.page-home .btn-ghost {
  justify-content: center;
  text-decoration: none;
}
body.page-home .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(var(--color-primary-rgb), 0.14);
  color: var(--primary);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
body.page-home .hero-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 26px;
  color: var(--muted);
  font-size: 0.85rem;
}
body.page-home .hero-meta strong {
  color: var(--text);
}
body.page-home .hero-highlights {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--muted);
  font-size: 0.95rem;
}
body.page-home .hero-mock {
  position: relative;
  padding: 32px;
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 40px 120px rgba(var(--color-ink-rgb), 0.12);
  border: 1px solid rgba(var(--color-white-rgb), 0.6);
  overflow: hidden;
}
body.page-home .hero-mock::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(var(--color-primary-soft-rgb), 0.12), transparent);
  z-index: 0;
}
body.page-home .mock-window {
  position: relative;
  z-index: 1;
  background: var(--color-surface-lavender);
  border-radius: 22px;
  padding: 24px;
  border: 1px solid rgba(var(--color-primary-rgb), 0.12);
  display: grid;
  gap: 18px;
}
body.page-home .mock-pill-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
body.page-home .mock-pill {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(var(--color-primary-soft-rgb), 0.12);
  color: var(--primary);
}
body.page-home .mock-heading {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
body.page-home .mock-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  background: var(--color-white);
  border: 1px solid rgba(var(--color-ink-rgb), 0.06);
  box-shadow: 0 16px 36px rgba(var(--color-ink-rgb), 0.08);
}
body.page-home .mock-card-line {
  height: 10px;
  border-radius: 999px;
  background: rgba(var(--color-primary-soft-rgb), 0.2);
}
body.page-home .mock-card-line:nth-child(2) {
  width: 70%;
}
body.page-home .mock-card-line:nth-child(3) {
  width: 50%;
}
body.page-home .logo-section-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  gap: 28px;
  justify-items: center;
  text-align: center;
}
body.page-home .logo-section-title {
  font-size: 0.95rem;
  color: var(--muted);
}
body.page-home .logo-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
}
body.page-home .logo-badge {
  background: var(--color-white);
  border-radius: 16px;
  border: 1px solid rgba(var(--color-primary-rgb), 0.14);
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  min-height: 72px;
  box-shadow: 0 18px 40px rgba(var(--color-ink-rgb), 0.08);
}
body.page-home .logo-badge img {
  height: 36px;
  width: auto;
  object-fit: contain;
}
body.page-home .features-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 48px;
}
body.page-home .feature-card {
  background: rgba(var(--color-white-rgb), 0.78);
  border-radius: var(--radius);
  padding: 28px;
  border: 1px solid rgba(var(--color-primary-rgb), 0.12);
  box-shadow: 0 18px 35px rgba(var(--color-primary-shadow-rgb), 0.09);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
body.page-home .feature-card span {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--color-primary-rgb), 0.14);
  color: var(--primary);
  font-weight: 600;
}
body.page-home .feature-card h3 {
  margin: 0;
  font-size: 1.15rem;
}
body.page-home .feature-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}
body.page-home .section-title {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 18px;
  font-size: 2.3rem;
  line-height: 1.15;
}
body.page-home .section-subtitle {
  text-align: center;
  color: var(--muted);
  max-width: 540px;
  margin: 0 auto 48px;
  line-height: 1.6;
}
body.page-home .steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  counter-reset: step;
}
body.page-home .step {
  background: rgba(var(--color-white-rgb), 0.88);
  border: 1px solid rgba(var(--color-primary-rgb), 0.12);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: 0 16px 32px rgba(var(--color-primary-rgb), 0.1);
}
body.page-home .step::before {
  counter-increment: step;
  content: counter(step);
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(var(--color-primary-rgb), 0.18);
  color: var(--primary);
  font-weight: 700;
  margin-bottom: 20px;
}
body.page-home .step h3 {
  margin: 0 0 12px;
  font-size: 1.1rem;
}
body.page-home .step p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}
body.page-home .templates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 48px;
}
body.page-home .template-card {
  border-radius: var(--radius);
  padding: 26px;
  background: rgba(var(--color-white-rgb), 0.85);
  border: 1px solid rgba(var(--color-primary-rgb), 0.12);
  box-shadow: 0 18px 35px rgba(var(--color-primary-rgb), 0.08);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
body.page-home .template-card::after {
  content: "";
  position: absolute;
  inset: auto -30% -40% auto;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle at center, rgba(var(--color-primary-rgb), 0.1), rgba(var(--color-primary-rgb), 0) 75%);
  transform: rotate(35deg);
  pointer-events: none;
}
/* -------------------------------------------------------------------------- */
/* -- Homepage template previews: reuse the modal's plan badge styling with  -- */
/* -- static preview renders layered underneath.                            -- */
/* -------------------------------------------------------------------------- */
body.page-home .template-media {
  position: relative;
  margin: -10px -10px 12px;
  border-radius: calc(var(--radius) - 6px);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: rgba(var(--color-navy-rgb), 0.04);
  box-shadow: 0 18px 40px rgba(var(--color-primary-rgb), 0.12);
}
body.page-home .template-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.page-home .template-plan {
  position: absolute;
  top: 14px;
  right: 14px; /* Move plan badges to the top-right corner for better alignment with template edges. */
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(var(--color-black-rgb), 0.18);
  background: rgba(var(--color-gray-soft-rgb), 0.9);
  color: var(--color-muted-strong);
}
body.page-home .template-plan--free {
  /* Muted treatment keeps the free badge legible without stealing focus. */
  background: rgba(var(--color-gray-soft-rgb), 0.95);
  color: var(--color-muted-strong);
}
body.page-home .template-plan--pro {
  /* Mirror the primary button styling so Pro stays unmistakable. */
  background: var(--primary, var(--color-primary));
  color: var(--color-white);
  border-color: rgba(var(--color-black-rgb), 0.25);
  box-shadow: 0 12px 22px rgba(var(--color-primary-rgb), 0.35);
}
body.page-home .template-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
body.page-home .template-label--available {
  color: var(--color-muted-strong);
}
body.page-home .template-label--premium {
  color: var(--primary);
}
body.page-home .template-title {
  font-size: 1.1rem;
  font-weight: 600;
}
body.page-home .template-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(var(--color-primary-rgb), 0.14);
  color: var(--primary);
  align-self: flex-start;
  font-weight: 600;
}
body.page-home .template-pill--free {
  /* Dull the included badge per feedback so it reads as informational. */
  background: rgba(var(--color-gray-soft-rgb), 0.9);
  color: var(--color-muted-strong);
  border: 1px solid rgba(var(--color-black-rgb), 0.08);
}
body.page-home .pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 48px;
}
body.page-home .pricing-card {
  background: rgba(var(--color-white-rgb), 0.92);
  border-radius: var(--radius);
  padding: 38px;
  border: 1px solid rgba(var(--color-primary-rgb), 0.12);
  box-shadow: 0 22px 45px rgba(var(--color-primary-rgb), 0.12);
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
body.page-home .pricing-card h3 {
  margin: 0;
  font-size: 1.4rem;
}
body.page-home .price-tag {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--primary);
}
/* Launch promo styling keeps the discounted rate obvious without extra markup elsewhere. */
body.page-home .price-tag .old-price {
  display: block;
  font-size: 0.55em;
  font-weight: 600;
  text-decoration: line-through;
  color: var(--muted);
  display:inline-block;
}
body.page-home .price-tag .launch-price {
  margin-top: 4px;
  display:inline-block;
}
body.page-home .price-note {
  color: var(--muted);
  line-height: 1.6;
}
body.page-home .pricing-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  color: var(--muted);
}
body.page-home .pricing-card li::before {
  content: "✔";
  color: var(--primary);
  margin-right: 8px;
  font-weight: 600;
}
body.page-home .pricing-card.coming-soon {
  opacity: 0.75;
  background: rgba(var(--color-surface-snow-rgb), 0.65);
}
body.page-home .pricing-card .cta {
  margin-top:15px;
}
body.page-home .badge {
  display: inline-flex;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(var(--color-primary-rgb), 0.12);
  color: var(--primary);
  font-weight: 600;
  font-size: 0.78rem;
}
body.page-home .faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 40px;
}
body.page-home .faq-item {
  background: rgba(var(--color-white-rgb), 0.85);
  border-radius: var(--radius);
  padding: 28px;
  border: 1px solid rgba(var(--color-primary-rgb), 0.12);
  box-shadow: 0 16px 32px rgba(var(--color-primary-rgb), 0.08);
}
body.page-home .faq-item h3 {
  margin: 0 0 12px;
  font-size: 1.05rem;
}
body.page-home .faq-item p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}
body.page-home .cta-final {
  background: var(--surface);
  border-radius: 32px;
  padding: 64px;
  text-align: center;
  border: 1px solid rgba(var(--color-primary-rgb), 0.18);
  box-shadow: 0 40px 110px rgba(var(--color-primary-rgb), 0.18);
  display: grid;
  gap: 24px;
}
body.page-home .cta-final h2 {
  margin: 0 auto;
  font-size: clamp(2.4rem, 5vw, 2.9rem);
  max-width: 20em;
  letter-spacing: -0.02em;
  line-height:1.15;
}
/* Shared footer layout removes redundant marketing links on legal pages. */
body.page-home footer,
body.page-legal footer {
  padding: 40px 20px 60px;
  color: var(--muted);
}
body.page-home .footer-inner,
body.page-legal .footer-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
  font-size: 0.9rem;
}
body.page-home .footer-links,
body.page-legal .footer-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
body.page-home .floating-cta {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 11;
}
@media (max-width: 1024px) {
  body.page-home .header-inner,
  body.page-legal .header-inner {
    padding-left: 1.5em;
    padding-right: 1.5em;
  }
  body.page-home .logo-strip {
    gap: 28px;
  }
  body.page-home nav,
  body.page-legal nav {
    display: none;
  }
  body.page-home .features-grid, body.page-home .steps, body.page-home .templates, body.page-home .pricing-grid, body.page-home .faq-grid {
    grid-template-columns: 1fr 1fr;
}
  body.page-home .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
}
  body.page-home .hero-grid > div:first-child {
    max-width: 700px;
    justify-self: center;
    width: 100%;
    text-align: center;
}
  body.page-home .hero-actions, body.page-home .hero-cta {
    justify-content: center;
}
  body.page-home .hero-meta, body.page-home .hero-highlights {
    align-items: center;
    text-align: center;
}
  body.page-home .lead, body.page-home .hero-meta, body.page-home .hero-highlights {
    margin-left: auto;
    margin-right: auto;
}
  body.page-home .hero-mock {
    display: none;
}
}
@media (max-width: 768px) {
  body.page-home .header-inner,
  body.page-legal .header-inner {
    padding-top:1em;
    padding-bottom:1em;
  }
  body.page-home .hero {
    padding-top: 50px;
}
  body.page-home .hero-grid, body.page-home .features-grid, body.page-home .steps, body.page-home .templates, body.page-home .pricing-grid, body.page-home .faq-grid {
    grid-template-columns: 1fr;
}
  body.page-home .hero-grid {
    gap: 36px;
}
  body.page-home .hero-mock {
    display: none;
}
  body.page-home .floating-cta {
    display: none;
  }
  body.page-home .logo-badge {
    min-width: 140px;
}
}
@media (max-width: 520px) {
  body.page-home main .cta, body.page-home main .secondary-btn {
    width: 100%;
    justify-content: center;
  }
  body.page-home .hero-highlights {
    font-size: 0.9rem;
  }
  body.page-home .cta-final {
    padding: 48px 28px;
  }
}

/* ================= Builder Page (builder/index.html) ================= */
body.page-builder {
  --bg: var(--color-bg-alt);
  --surface: var(--color-white);
  --surface-muted: rgba(var(--color-white-rgb), 0.85);
  --text: var(--color-ink-strong);
  --muted: var(--color-muted-strong);
  --accent: var(--color-primary);
  --accent-dark: var(--color-primary-pop);
  --field-accent-default: var(--accent);
  --field-accent-default-rgb: var(--color-primary-rgb);
  --shadow-lg: 0 40px 80px rgba(var(--color-primary-rgb), 0.18);
  --shadow-md: 0 20px 40px rgba(var(--color-navy-rgb), 0.12);
  --shadow-sm: 0 10px 30px rgba(var(--color-primary-rgb), 0.12);
}
body.page-builder {
  height: 100%;
}
body.page-builder * {
  box-sizing: border-box;
}
body.page-builder {
  margin: 0;
  min-height: 100vh;
  font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  background: linear-gradient(180deg, var(--color-bg-tint) 0%, var(--color-white) 35%, var(--color-bg-alt) 100%);
  color: var(--text);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
}
body.page-builder h1, body.page-builder h2, body.page-builder h3, body.page-builder h4 {
  font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  color: var(--text);
  margin: 0;
}
body.page-builder a {
  color: inherit;
  text-decoration: none;
}
body.page-builder .logo-img {
  height: 48px;
  padding-right:12px;
}
body.page-builder .builder-shell {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
  background: var(--surface);
  overflow: hidden;
  border: none;
  display: flex;
  flex-direction: column;
}
body.page-builder button {
  font: inherit;
  appearance: none;
  border: 1.5px solid rgba(var(--color-black-rgb), 0.25);
  border-radius: 12px;
  background: var(--accent);
  color: var(--color-white);
  font-weight: 600;
  padding: 12px 22px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 12px 25px rgba(var(--color-primary-rgb), 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.95em;
}
body.page-builder button:hover {
  transform: translatey(-1px);
  box-shadow: 0 18px 40px rgba(var(--color-primary-rgb), 0.45);
  background-color: var(--color-primary-hover);
}
body.page-builder button.ghost {
  background: rgba(var(--color-white-rgb), 0.65);
  color: var(--accent);
  border: 1px solid rgba(var(--color-primary-rgb), 0.18);
  box-shadow: none;
}
body.page-builder button.ghost:hover {
  background: rgba(var(--color-primary-rgb), 0.05);
  transform: none;
  box-shadow: none;
}

/* Keep universal disabled styling away from status chips so "Backed up" stays vibrant. */
body.page-builder button:disabled:not(.status-chip) {
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
  box-shadow: none;
}

body.page-builder button.ghost:disabled {
  background: rgba(var(--color-white-rgb), 0.45);
  color: rgba(var(--color-navy-rgb), 0.42);
  border-color: rgba(var(--color-primary-rgb), 0.12);
}
body.page-builder .toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
  border-bottom: 1px solid rgba(var(--color-surface-cloud-rgb), 0.8);
  background: rgba(var(--color-surface-mist-rgb), 0.9);
  gap: 16px;
  flex-wrap: wrap;
}
body.page-builder .toolbar h3 {
  font-size: 1.15rem;
  margin: 0;
}
body.page-builder .toolbar-left,
body.page-builder .toolbar-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
/* Toolbar nav mirrors the old right-aligned button stack so desktop keeps the familiar layout. */
body.page-builder .builder-nav { 
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex: 1 1 auto;
  margin-left: auto; /* Keep the action buttons parked on the right for wide viewports. */
}
body.page-builder .builder-nav__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
/*
  Account action icon mirrors the other toolbar controls while condensing into a compact
  affordance that keeps the same visual weight (height + padding) as its neighboring
  buttons.
*/
body.page-builder .builder-nav__account {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13.5px;
  border-radius: 100%; /* Match the shared toolbar button radius so the heights align visually. */
  border: 1px solid rgba(var(--color-primary-rgb), 0.24);
  background: rgba(var(--color-primary-rgb), 0.08);
  color: var(--accent);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  box-shadow: none;
  min-height: 0;
}
body.page-builder .builder-nav__account:hover,
body.page-builder .builder-nav__account:focus-visible {
  background: rgba(var(--color-primary-rgb), 0.18);
  box-shadow: none;
  transform: translateY(-1px);
}
body.page-builder .builder-nav__account:focus-visible {
  outline: 2px solid rgba(var(--color-primary-rgb), 0.5);
  outline-offset: 2px;
}
body.page-builder .builder-nav__account-icon {
  pointer-events: none; /* Keep the SVG from intercepting hover/focus events. */
}
body.page-builder .builder-nav__close {
  display: none; /* Hide the drawer close affordance until the mobile layout is active. */
}
body.page-builder .toolbar-left {
  gap: 12px;
  flex: 1 1 260px;
  min-width: 220px;
}
body.page-builder .toolbar-right {
  gap: 12px;
  justify-content: flex-end;
}
body.page-builder .toolbar-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}
body.page-builder .toolbar-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px; /* Match spacing used on other toolbar buttons so the icon sits comfortably. */
  padding: 10px 18px; /* Mirror the base button padding so the toggle matches secondary button sizing. */
  min-height: 42px; /* Preserve the original touch target size while allowing width to grow with padding. */
}
body.page-builder .toolbar-nav-toggle:hover,
body.page-builder .toolbar-nav-toggle:focus-visible {
  transform: none; /* Keep the icon steady so it behaves like other secondary toolbar buttons. */
  box-shadow: none;
}
body.page-builder .toolbar-nav-toggle__icon {
  position: relative;
  width: 18px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  display: inline-block;
}
body.page-builder .toolbar-nav-toggle__icon::before,
body.page-builder .toolbar-nav-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
body.page-builder .toolbar-nav-toggle__icon::before {
  top: -6px;
}
body.page-builder .toolbar-nav-toggle__icon::after {
  top: 6px;
}
body.page-builder .plan-chip {
  /* Always-on badge echoes the status chip silhouette without behaving like a button. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, opacity 0.24s ease,
    transform 0.2s ease;
  opacity: 0;
  transform: translateY(-6px);
  visibility: hidden;
}
body.page-builder .plan-chip--visible {
  /* Fade and slide in once we know the membership status, mirroring the status chip reveal. */
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}
body.page-builder .plan-chip:focus-visible {
  /* Keep focus rings visible now that the chip acts like a control. */
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
body.page-builder .plan-chip[disabled] {
  /* Park the cursor when Pro access disables the upsell affordance. */
  cursor: default;
}
body.page-builder .plan-chip--free {
  /* Flatten the free badge so it reads as a calm, neutral state. */
  background: rgba(var(--color-gray-soft-rgb), 0.55);
  color: rgba(var(--color-ink-rgb), 0.6);
  border-color: rgba(var(--color-gray-veil-rgb), 0.6);
  box-shadow: 0 8px 18px rgba(var(--color-gray-veil-rgb), 0.18);
}
body.page-builder .plan-chip--free:hover {
  background: rgba(var(--color-gray-soft-rgb), 0.80);
  color: rgba(var(--color-ink-rgb), 0.7);
  border-color: rgba(var(--color-gray-veil-rgb), 0.7);
  box-shadow: 0 8px 18px rgba(var(--color-gray-veil-rgb), 0.3);
}
body.page-builder .plan-chip--pro {
  /* Use the shared brand purple so the badge matches every other primary accent. */
  position: relative;
  overflow: hidden;
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary-dark);
  box-shadow: none;
  z-index: 0;
}
body.page-builder .plan-chip--pro::after {
  /* Disable the shimmer so the badge stays flat without motion. */
  content: none;
}
body.page-builder .status-chip {
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.2;
  appearance: none;
  border: 1.5px solid transparent;
  background: linear-gradient(135deg, rgba(var(--color-danger-soft-rgb), 0.9), rgba(var(--color-danger-mist-rgb), 0.75));
  color: var(--color-danger-dark);
  box-shadow: 0 16px 38px rgba(var(--color-danger-rgb), 0.22);
  transition: opacity 0.24s ease, transform 0.2s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  cursor: pointer;
  text-align: left;
  position: relative;
  min-width: 0;
  opacity: 0;
  transform: translatey(-6px);
  visibility: hidden;
  pointer-events: none;
}
body.page-builder .status-chip--visible {
  opacity: 1;
  transform: translatey(0);
  visibility: visible;
  pointer-events: auto;
}
body.page-builder .status-chip[disabled] {
  cursor: default;
}
body.page-builder .status-chip[disabled]:hover {
  transform: none;
  box-shadow: 0 18px 42px rgba(var(--color-success-rgb), 0.24);
  border-color: rgba(var(--color-success-rgb), 0.35);
  background: linear-gradient(135deg, rgba(var(--color-success-soft-rgb), 0.95), rgba(var(--color-success-veil-rgb), 0.7));
}
body.page-builder .status-chip:hover {
  transform: translatey(-1px);
  box-shadow: 0 22px 44px rgba(var(--color-danger-rgb), 0.3);
  border-color: rgba(var(--color-danger-strong-rgb), 0.4);
  background: linear-gradient(135deg, rgba(var(--color-danger-soft-rgb), 0.9), rgba(var(--color-danger-mist-rgb), 0.75));
}
body.page-builder.builder-nav-open {
  overflow: hidden; /* Prevent background scroll when the mobile drawer is visible. */
}

/* Compact toolbar → transform nav into a full-screen drawer. */
@media (max-width: 820px) {
  body.page-builder .builder-nav {
    display: none;
  }
  body.page-builder .toolbar-nav-toggle {
    display: inline-flex;
  }
  body.page-builder .builder-nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start; /* Keep actions pinned to the top of the drawer. */
    gap: 18px;
    position: fixed;
    inset: 0;
    padding: 96px 24px 32px;
    background: rgba(var(--color-surface-mist-rgb), 0.96);
    z-index: 120;
  }
  body.page-builder .builder-nav__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  body.page-builder .builder-nav__actions button {
    width: 100%;
  }
  body.page-builder .builder-nav__actions .builder-nav__account {
    align-self: flex-end; /* Keep the icon hugging the edge of the drawer. */
  }
  body.page-builder .builder-nav__close {
    display: inline-flex;
    position: absolute;
    top: 24px;
    right: 24px;
  }
}
body.page-builder .status-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(var(--color-danger-strong-rgb), 0.3);
}
body.page-builder .status-chip__dot {
  --pulse-color: rgba(var(--color-danger-strong-rgb), 0.45);
  --pulse-color-clear: rgba(var(--color-danger-strong-rgb), 0);
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--color-danger);
  box-shadow: 0 0 0 0 var(--pulse-color);
  animation: statusPulse 2.4s ease-out infinite;
  flex-shrink: 0;
}
body.page-builder .status-chip--steady .status-chip__dot {
  animation: none;
  box-shadow: none;
}
body.page-builder .status-chip__spinner {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  opacity: 0.8;
  animation: spin 0.9s linear infinite;
  flex-shrink: 0;
}
body.page-builder .status-chip__text {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
body.page-builder .status-chip__primary {
  font-weight: 700;
}
body.page-builder .status-chip__bullet {
  opacity: 0.4;
}
body.page-builder .status-chip__secondary {
  opacity: 0.9;
  font-weight: 500;
}
body.page-builder .status-chip--muted {
  background: linear-gradient(135deg, rgba(var(--color-danger-rgb), 0.22), rgba(var(--color-danger-soft-rgb), 0.85));
  color: var(--color-danger-deep);
  border-color: rgba(var(--color-danger-rgb), 0.45);
  box-shadow: 0 18px 42px rgba(var(--color-danger-rgb), 0.25);
}
body.page-builder .status-chip--saving {
  background: linear-gradient(135deg, rgba(var(--color-gray-veil-rgb), 0.18), rgba(var(--color-gray-soft-rgb), 0.85));
  color: var(--color-gray-dark);
  border-color: rgba(var(--color-gray-veil-rgb), 0.35);
  box-shadow: 0 18px 42px rgba(var(--color-gray-veil-rgb), 0.22);
}
body.page-builder .status-chip--saving .status-chip__dot {
  display: none;
  /* Spinner already indicates progress */
}
body.page-builder .status-chip--success {
  background: linear-gradient(135deg, rgba(var(--color-success-soft-rgb), 0.95), rgba(var(--color-success-veil-rgb), 0.7));
  color: var(--color-success-dark);
  border-color: rgba(var(--color-success-rgb), 0.35);
  box-shadow: 0 18px 42px rgba(var(--color-success-rgb), 0.24);
}
body.page-builder .status-chip--success .status-chip__dot {
  background: var(--color-success);
  --pulse-color: rgba(var(--color-success-emerald-rgb), 0.45);
  --pulse-color-clear: rgba(var(--color-success-emerald-rgb), 0);
}
body.page-builder .status-chip--warning {
  background: linear-gradient(135deg, rgba(var(--color-amber-soft-rgb), 0.95), rgba(var(--color-amber-fade-rgb), 0.7));
  color: var(--color-warning-dark);
  border-color: rgba(var(--color-warning-rgb), 0.45);
  box-shadow: 0 18px 42px rgba(var(--color-warning-rgb), 0.24);
}
body.page-builder .status-chip--warning .status-chip__dot {
  background: var(--color-warning);
  --pulse-color: rgba(var(--color-warning-glow-rgb), 0.45);
  --pulse-color-clear: rgba(var(--color-warning-glow-rgb), 0);
}
body.page-builder .status-chip--danger {
  background: linear-gradient(135deg, rgba(var(--color-danger-soft-rgb), 0.95), rgba(var(--color-danger-blush-rgb), 0.7));
  color: var(--color-danger-dark);
  border-color: rgba(var(--color-danger-strong-rgb), 0.5);
  box-shadow: 0 20px 48px rgba(var(--color-danger-strong-rgb), 0.28);
}
body.page-builder .status-chip--danger .status-chip__dot {
  background: var(--color-danger);
  --pulse-color: rgba(var(--color-danger-strong-rgb), 0.5);
  --pulse-color-clear: rgba(var(--color-danger-strong-rgb), 0);
}
body.page-builder .status-modal {
  position: fixed;
  inset: 0;
  display: flex; /* Keep the flex shell available so we can animate visibility instead of toggling layout. */
  align-items: center;
  justify-content: center;
  padding: 28px;
  z-index: 1400;
  overflow-y: auto; /* Allow tall dialogs (like the template gallery) to scroll instead of overflowing the viewport. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* Prevent the hidden modal from intercepting clicks while it fades out. */
  transition: opacity 0.22s ease, visibility 0s linear 0.22s; /* Delay visibility swap until opacity settles for a clean fade. */
}
body.page-builder .status-modal.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.22s ease, visibility 0s; /* Make sure the modal becomes visible immediately when requested. */
}
body.page-builder .status-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(var(--color-navy-rgb), 0.75);
  backdrop-filter: blur(4px);
}
body.page-builder .status-modal.is-visible .status-modal__backdrop {
  backdrop-filter: blur(4px);
  opacity: 1;
}
body.page-builder .status-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(480px, calc(100vw - 48px));
  border-radius: 26px;
  background: var(--color-white);
  padding: 34px 36px 45px 36px;
  box-shadow: 0 44px 100px rgba(var(--color-navy-rgb), 0.35);
  border: 1px solid rgba(var(--color-danger-rgb), 0.18);
  display: flex;
  flex-direction: column;
  gap: 20px;
  opacity: 0;
  transform: translateY(18px) scale(0.98); /* Subtle dip keeps the animation feeling grounded without being flashy. */
  transition: opacity 0.22s ease, transform 0.22s ease;
}
body.page-builder .status-modal.is-visible .status-modal__dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  body.page-builder .status-modal {
    transition: none;
  }
  body.page-builder .status-modal.is-visible {
    transition: none;
  }
  body.page-builder .status-modal__dialog {
    transition: none;
    transform: none; /* Respect motion preferences by skipping the slide animation. */
  }
}
body.page-builder .status-modal__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(var(--color-surface-lilac-rgb), 0.18);
  color: var(--color-primary-dark);
  border: 1px solid rgba(var(--color-primary-rgb), 0.28);
}
body.page-builder .status-modal__headline {
  font-size: clamp(1.35rem, 2.5vw, 1.65rem);
  line-height: 1.25;
  margin: 0;
}
body.page-builder .status-modal__copy {
  margin: 0;
  color: rgba(var(--color-navy-rgb), 0.72);
  font-size: 0.97rem;
  line-height: 1.65;
}
body.page-builder .status-modal__subcopy {
  margin: -12px 0 0;
  color: rgba(var(--color-navy-rgb), 0.55);
  font-size: 0.85rem;
}
body.page-builder .status-modal__countdown {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-danger-deep);
  flex-wrap: wrap;
  line-height: 1.4;
}
body.page-builder .status-modal__countdown-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--color-danger);
  box-shadow: 0 0 0 0 rgba(var(--color-danger-strong-rgb), 0.45);
  animation: statusPulse 2.4s ease-out infinite;
  flex-shrink: 0;
}
body.page-builder .status-modal__countdown.is-hidden {
  display: none;
}
body.page-builder .status-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 4px;
}
/* --- Auth modal form --- */
body.page-builder .status-modal__form {
  display: grid;
  gap: 14px;
}
body.page-builder .status-modal__field {
  display: grid;
  gap: 6px;
}
body.page-builder .status-modal__label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(var(--color-navy-rgb), 0.65);
}
body.page-builder .status-modal__input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(var(--color-primary-rgb), 0.18);
  background: rgba(var(--color-white-rgb), 0.96);
  font: inherit;
  transition: border 0.2s ease, box-shadow 0.2s ease;
}
body.page-builder .status-modal__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.22);
}
body.page-builder .status-modal__note {
  margin: -2px 0 2px;
  font-size: 0.85rem;
  color: rgba(var(--color-navy-rgb), 0.6);
}
/* --- Pro modal membership details --- */
body.page-builder .pro-modal__membership {
  /* Keep the summary tucked under the headline without crowding the upsell copy. */
  margin: 12px 0 0;
}

/*
 * Pro modal copy swaps rely on a single data attribute so JavaScript only has
 * to flip the dialog state instead of touching each string individually.
 */
body.page-builder #proModal [data-pro-title-default],
body.page-builder #proModal [data-pro-title-active],
body.page-builder #proModal [data-pro-title-downgrade],
body.page-builder #proModal [data-pro-title-account],
body.page-builder #proModal [data-pro-primary-default],
body.page-builder #proModal [data-pro-primary-active],
body.page-builder #proModal [data-pro-primary-downgrade],
body.page-builder #proModal [data-pro-secondary-default],
body.page-builder #proModal [data-pro-secondary-active],
body.page-builder #proModal [data-pro-secondary-downgrade] {
  display: none;
}

body.page-builder #proModal [data-pro-downgrade],
body.page-builder #proModal [data-pro-membership] {
  display: none;
}

body.page-builder #proModal[data-pro-state="default"] [data-pro-title-default],
body.page-builder #proModal[data-pro-state="default"] [data-pro-primary-default],
body.page-builder #proModal[data-pro-state="default"] [data-pro-secondary-default] {
  display: inline;
}

body.page-builder #proModal[data-pro-state="default"] [data-pro-upsell] {
  display: block;
}

body.page-builder #proModal[data-pro-state="active"] [data-pro-title-active],
body.page-builder #proModal[data-pro-state="active"] [data-pro-primary-active],
body.page-builder #proModal[data-pro-state="active"] [data-pro-secondary-active] {
  display: inline;
}

body.page-builder #proModal[data-pro-state="active"] [data-pro-membership] {
  display: block;
}

body.page-builder #proModal[data-pro-state="active"] [data-pro-upsell] {
  display: none;
}

body.page-builder #proModal[data-pro-state="downgrade"] [data-pro-title-downgrade],
body.page-builder #proModal[data-pro-state="downgrade"] [data-pro-primary-downgrade],
body.page-builder #proModal[data-pro-state="downgrade"] [data-pro-secondary-downgrade] {
  display: inline;
}

body.page-builder #proModal[data-pro-state="downgrade"] [data-pro-downgrade] {
  display: block;
}

body.page-builder #proModal[data-pro-state="downgrade"] [data-pro-upsell],
body.page-builder #proModal[data-pro-state="downgrade"] [data-pro-membership] {
  display: none;
}
/* Account origin swaps in the account title while keeping existing plan copy available. */
body.page-builder #proModal[data-pro-origin="account"] [data-pro-title-default],
body.page-builder #proModal[data-pro-origin="account"] [data-pro-title-downgrade] {
  display: none !important;
}
body.page-builder #proModal[data-pro-origin="account"] [data-pro-title-account] {
  display: inline;
}
body.page-builder #proModal[data-pro-origin="account"][data-pro-state="active"] [data-pro-title-account] {
  display: none;
}
body.page-builder #proModal[data-pro-origin="account"][data-pro-state="active"] [data-pro-title-active] {
  display: inline !important; /* Keep the Pro success headline for members opening the account modal. */
}
body.page-builder #proModal [data-account-only] {
  display: none;
}
body.page-builder #proModal[data-pro-origin="account"] [data-account-only] {
  display: inline-flex;
}
/* Tertiary action: looks like plain text but keeps a comfortable click target. */
body.page-builder .status-modal__tertiary {
  display: inline-block;
  padding: 6px 2px;
  border: none;
  box-shadow: none;
  background: none;
  background-color: transparent;
  transform: none;
  color: rgba(var(--color-ink-rgb), 0.65);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s ease;
}
/* Hover/focus use danger red so the destructive action stands out while staying text-only. */
body.page-builder .status-modal__tertiary:hover,
body.page-builder .status-modal__tertiary:focus-visible {
  color: var(--color-danger);
  box-shadow: none;
  transform: none;
  background: none;
  background-color: transparent;
}
body.page-builder .pro-modal__dates {
  /* Responsive grid ensures start/end rows stay readable on small screens. */
  margin: 16px 0 18px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
body.page-builder .pro-modal__dates-group {
  /* Soft background mirrors the modal input styling for visual consistency. */
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(var(--color-gray-soft-rgb), 0.32);
  border: 1px solid rgba(var(--color-gray-veil-rgb), 0.6);
}
body.page-builder .pro-modal__dates-group dt {
  margin: 0 0 4px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--color-ink-rgb), 0.6);
}
body.page-builder .pro-modal__dates-group dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(var(--color-ink-rgb), 0.85);
}
body.page-builder .status-modal__providers {
  display: grid;
  gap: 10px;
}
body.page-builder .status-modal__providers:empty {
  display: none;
}
body.page-builder .status-modal__provider-btn {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(var(--color-primary-rgb), 0.18);
  background: rgba(var(--color-primary-rgb), 0.08);
  color: var(--accent);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
body.page-builder .status-modal__provider-btn:hover, body.page-builder .status-modal__provider-btn:focus-visible {
  background: rgba(var(--color-primary-rgb), 0.16);
  box-shadow: 0 12px 24px rgba(var(--color-primary-rgb), 0.18);
  transform: translatey(-1px);
  outline: none;
}
body.page-builder .status-modal__provider-btn:disabled {
  cursor: not-allowed;
  opacity: 0.65;
  transform: none;
  box-shadow: none;
}
body.page-builder .status-modal__feedback {
  display: none;
  margin-top: -4px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 0.85rem;
  line-height: 1.45;
  background: rgba(var(--color-primary-rgb), 0.08);
  color: rgba(var(--color-indigo-deep-rgb), 0.9);
  border: 1px solid rgba(var(--color-primary-rgb), 0.18);
}
body.page-builder .status-modal__feedback.is-visible {
  display: block;
}
body.page-builder .status-modal__feedback--error {
  background: rgba(var(--color-danger-rgb), 0.12);
  border-color: rgba(var(--color-danger-rgb), 0.3);
  color: var(--color-danger-dark);
}
body.page-builder .status-modal__feedback--success {
  background: rgba(var(--color-success-rgb), 0.12);
  border-color: rgba(var(--color-success-rgb), 0.25);
  color: var(--color-success-dark);
}
body.page-builder .status-modal__primary, body.page-builder .status-modal__secondary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 14px 20px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border 0.25s ease;
}
body.page-builder .status-modal__primary {
  background: var(--accent);
  color: var(--color-white);
  border: 1.5px solid rgba(var(--color-black-rgb), 0.28);
  box-shadow: 0 12px 28px rgba(var(--color-primary-rgb), 0.28);
  z-index: 10;
}
body.page-builder .status-modal__primary:hover, body.page-builder .status-modal__primary:focus-visible {
  background: var(--accent-dark);
  transform: translatey(-1px);
  box-shadow: 0 18px 36px rgba(var(--color-primary-rgb), 0.35);
  outline: none;
}
body.page-builder .status-modal__secondary {
  background: rgba(var(--color-white-rgb), 0.65);
  color: var(--accent);
  border: 1px dashed rgba(var(--color-primary-rgb), 0.18);
  box-shadow: none;
  z-index: 20;
}
body.page-builder .status-modal__secondary:hover, body.page-builder .status-modal__secondary:focus-visible {
  background: rgba(var(--color-primary-rgb), 0.05);
  box-shadow: none;
  transform: none;
  outline: none;
}
body.page-builder .status-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(var(--color-primary-rgb), 0.1);
  border: none;
  color: var(--accent);
  box-shadow: none;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
body.page-builder .builder-nav:not(.is-open) .builder-nav__close {
  /* Override the generic modal close styles so the button stays hidden on desktop. */
  display: none;
}
body.page-builder .status-modal__close:hover, body.page-builder .status-modal__close:focus-visible {
  box-shadow: none;
  background: rgba(var(--color-primary-rgb), 0.25);
  transform: none;
}
/* Template modal layout shares the status modal shell and adds gallery-specific styling. */
body.page-builder .template-modal__dialog {
  width: min(720px, calc(100vw - 64px));
  max-height: calc(100vh - 64px);
  overflow-y: auto; /* Keep the modal usable on shorter screens by scrolling within the shell. */
  gap: 24px;
}
body.page-builder .template-modal__badge {
  background: rgba(var(--color-primary-rgb), 0.12);
  border-color: rgba(var(--color-primary-rgb), 0.32);
}
body.page-builder .template-modal__grid {
  display: grid;
  gap: 18px;
}
body.page-builder .template-modal__card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(var(--color-white-rgb), 0.95);
  border: 1px solid rgba(var(--color-navy-rgb), 0.08);
  box-shadow: 0 16px 40px rgba(var(--color-navy-rgb), 0.08);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body.page-builder .template-modal__card[aria-disabled="true"] {
  cursor: not-allowed;
  border-color: rgba(var(--color-navy-rgb), 0.12);
  box-shadow: 0 12px 28px rgba(var(--color-navy-rgb), 0.08);
}
body.page-builder .template-modal__card[aria-disabled="true"] * {
  cursor: not-allowed;
}
body.page-builder .template-modal__card[aria-disabled="true"] .template-modal__media,
body.page-builder .template-modal__card[aria-disabled="true"] .template-modal__name {
  opacity: 0.45;
}
body.page-builder .template-modal__card[aria-disabled="true"] .template-modal__plan,
body.page-builder .template-modal__card[aria-disabled="true"] .template-modal__description {
  opacity: 1;
}
body.page-builder .template-modal__card.is-selected,
body.page-builder .template-modal__card[aria-selected="true"] {
  border-color: rgba(var(--color-primary-rgb), 0.4);
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.3), 0 16px 40px rgba(var(--color-navy-rgb), 0.12);
}
body.page-builder .template-modal__card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}
body.page-builder .template-modal__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.12), rgba(var(--color-indigo-deep-rgb), 0.08));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.page-builder .template-modal__media::before {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 10px;
  background: rgba(var(--color-white-rgb), 0.92);
  box-shadow: 0 12px 28px rgba(var(--color-navy-rgb), 0.15);
  pointer-events: none;
  z-index: 0; /* Placeholder card sits below future template previews while still inset on the gradient wash. */
}
body.page-builder .template-modal__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--color-white-rgb), 0.9), rgba(var(--color-white-rgb), 0));
  opacity: 0.55;
  pointer-events: none;
  z-index: -1;
}
body.page-builder .template-modal__media > * {
  position: relative;
  z-index: 1; /* Ensure real preview art renders above the decorative placeholder when hooked up. */
}
/* Template previews: scale the injected screenshots to fill the inset frame without distorting the layout shell. */
body.page-builder .template-modal__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Cover keeps the portrait crop snug even if source art ratios differ slightly. */
  border-radius: 10px; /* Mirror the inset radius so the photo edges align with the placeholder frame. */
}
body.page-builder .template-modal__media--focus {
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.14), rgba(var(--color-indigo-deep-rgb), 0.12));
}
body.page-builder .template-modal__media--signature {
  background: linear-gradient(135deg, rgba(255, 189, 150, 0.38), rgba(248, 142, 180, 0.42));
}
body.page-builder .template-modal__media--portfolio {
  background: linear-gradient(135deg, rgba(165, 243, 252, 0.42), rgba(147, 197, 253, 0.42));
}
body.page-builder .template-modal__media--insight {
  background: linear-gradient(135deg, rgba(196, 181, 253, 0.42), rgba(129, 140, 248, 0.42));
}
body.page-builder .template-modal__media--modern {
  background: linear-gradient(135deg, rgba(254, 215, 170, 0.42), rgba(248, 250, 252, 0.42));
}
body.page-builder .template-modal__media--compact {
  background: linear-gradient(135deg, rgba(var(--color-slate-rgb), 0.22), rgba(var(--color-navy-rgb), 0.18));
}
body.page-builder .template-modal__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
body.page-builder .template-modal__name {
  font-weight: 600;
  font-size: 1rem;
  color: rgba(var(--color-navy-rgb), 0.95);
}
body.page-builder .template-modal__plan {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(var(--color-black-rgb), 0.18);
  background: rgba(var(--color-gray-soft-rgb), 0.9);
  color: var(--color-muted-strong);
}
body.page-builder .template-modal__plan--free {
  /* Keep the free badge subdued so the Pro styling draws the eye. */
  background: rgba(var(--color-gray-soft-rgb), 0.95);
  color: var(--color-muted-strong);
}
body.page-builder .template-modal__plan--pro {
  background: var(--accent);
  color: var(--color-white);
  border-color: rgba(var(--color-black-rgb), 0.25);
  box-shadow: 0 12px 22px rgba(var(--color-primary-rgb), 0.3);
}
body.page-builder .template-modal__description {
  margin: 0;
  color: rgba(var(--color-navy-rgb), 0.68);
  line-height: 1.55;
  font-size: 0.92rem;
}
body.page-builder .template-modal__upsell {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.1), rgba(var(--color-primary-rgb), 0.16));
  border: 1px solid rgba(var(--color-primary-rgb), 0.18);
}
body.page-builder .template-modal__upsell[hidden] {
  /* Keep the upsell collapsible by letting the hidden attribute override the flex layout. */
  display: none !important;
}
body.page-builder .template-modal__upsell-copy {
  display: grid;
  gap: 6px;
  color: rgba(var(--color-navy-rgb), 0.85);
  font-size: 0.96rem;
}
body.page-builder .template-modal__upsell-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}
body.page-builder .template-modal__upsell-text {
  margin: 0;
}
body.page-builder .template-modal__upsell-copy p {
  margin: 0;
}
body.page-builder .template-modal__upsell-btn {
  width: 100%;
}
@media (min-width: 640px) {
  body.page-builder .template-modal__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Cap at two columns per row for breathing room. */
  }
}
@media (max-width: 520px) {
  body.page-builder .status-modal {
    padding: 18px;
  }
  body.page-builder .status-modal__dialog {
    padding: 32px 24px 28px;
}
}
body.page-builder .is-hidden {
  display: none !important;
}
@media (max-width: 900px) {
  body.page-builder .toolbar {
    justify-content: center;
}
  body.page-builder .toolbar-center {
    order: 3;
    width: 100%;
}
  body.page-builder .toolbar-status {
    justify-content: center;
}
}
@media (max-width: 640px) {
  body.page-builder .toolbar .btns {
    width: 100%;
    justify-content: space-between;
}
  body.page-builder .toolbar-center {
    order: 3;
}
}
@keyframes statusPulse {
  0% {
    box-shadow: 0 0 0 0 var(--pulse-color);
  }
  70% {
    box-shadow: 0 0 0 12px var(--pulse-color-clear);
  }
  100% {
    box-shadow: 0 0 0 0 var(--pulse-color-clear);
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* Soft sweep used to make the Pro badge sparkle when it appears. */
@keyframes planChipProShine {
  0% {
    transform: translateX(-140%);
    opacity: 0;
  }
  35% {
    opacity: 0.9;
  }
  60% {
    opacity: 0.45;
  }
  100% {
    transform: translateX(140%);
    opacity: 0;
  }
}
body.page-builder .builder-app {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--color-white);
}
body.page-builder .builder-app aside {
  padding: 28px;
  border-bottom: 1px solid rgba(var(--color-surface-cloud-rgb), 0.8);
  background: rgba(var(--color-surface-mist-rgb), 0.9);
  overflow-y: auto;
  flex: 0 0 auto;
  direction: rtl; /* Flips the scrollbar rail to the left edge. */
  text-align: left; /* Keeps form controls feeling left-aligned despite the rtl flip. */
}

/* Reset children so content still reads left-to-right while the scrollbar stays left. */
body.page-builder .builder-app aside > * {
  direction: ltr;
}
body.page-builder .sidebar-resizer {
  display: none;
}
body.page-builder .sidebar-resizer:focus-visible {
  outline: 2px solid rgba(var(--color-primary-rgb), 0.65);
  outline-offset: 2px;
}
body.page-builder.is-resizing-sidebar {
  cursor: col-resize;
  user-select: none;
}
body.page-builder .builder-app .group {
  margin-bottom: 20px;
}

/* -------------------------------------------------------------------------- */
/* Sidebar style controls now sit directly inside the collapsible body.        */
/* Keep the stacked layout so existing helpers (sliders, toggles, etc.) align. */
/* -------------------------------------------------------------------------- */
body.page-builder .builder-app .style-controls [data-style-control-section] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/*
 * Quick actions sit outside the collapsible body so they remain visible when the
 * section is closed. Keep spacing compact to avoid recreating the vertical bulk
 * we are trying to avoid.
 */
body.page-builder .builder-app .style-controls__quick-actions {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 18px 18px 18px;
}

body.page-builder .builder-app .style-controls__quick-actions button {
  width: 100%;
}

body.page-builder .builder-app .style-controls__quick-actions-copy {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(var(--color-navy-rgb), 0.6);
}

body.page-builder .builder-app .style-controls:not(.is-open) .style-controls__quick-actions-copy {
  display: none;
}

body.page-builder .builder-app .style-controls [data-style-control-section] .style-control {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.page-builder .builder-app .style-controls [data-style-control-section] .style-control:last-child {
  margin-top:10px;
}

body.page-builder .builder-app .style-controls [data-style-control-section] .toggle-row__label,
body.page-builder .builder-app .style-controls [data-style-control-section] .slider-row__label {
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

body.page-builder .builder-app .style-controls [data-style-control-section] .toggle-row__label {
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

body.page-builder .builder-app .style-controls [data-style-control-section] .toggle-row__label input[type="checkbox"] {
  margin-top: 4px;
}

body.page-builder .builder-app .style-controls [data-style-control-section] .style-control__copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.page-builder .builder-app .style-controls [data-style-control-section] .style-control__description {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(var(--color-navy-rgb), 0.6);
}

/* Field color scope: every group defaults to the shared accent until overridden inline. */
body.page-builder .builder-app .field-color-scope {
  --field-accent: var(--field-accent-default);
  --field-accent-rgb: var(--field-accent-default-rgb);
}

/* Keep label text + swatch aligned without disturbing existing typography. */
body.page-builder .builder-app .field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 600;
}

body.page-builder .builder-app .field-label__text {
  flex: 1;
}

/* Visually hide repeated label text while keeping it available to assistive tech. */
body.page-builder .builder-app .field-label__text--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;
}

body.page-builder .builder-app .tag-row .field-label {
  flex: 0 0 auto;
  min-width: 0;
}

body.page-builder .builder-app .tag-row .field-label__text {
  flex: 0 0 auto;
  white-space: nowrap;
}

body.page-builder .builder-app .field-color-control {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--field-accent-rgb, var(--field-accent-default-rgb)), 0.08);
  border: 2px solid rgba(var(--field-accent-rgb, var(--field-accent-default-rgb)), 0.35);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.92);
  transition: opacity 0.18s ease, transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

/* Text-only tag rows should always surface their color picker so the swatch is glanceable. */
body.page-builder .builder-app .tag-row .field-color-control {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

body.page-builder .builder-app .field-color-control__ring {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

body.page-builder .builder-app .field-color-control__swatch {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  /* Default the swatch to black so the initial control matches the PDF's text color. */
  background: var(--field-color-current, #000000);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85);
}

body.page-builder .builder-app .field-color-control__input {
  position: absolute;
  inset: -4px;
  width: auto;
  height: auto;
  opacity: 0;
  border: none;
  padding: 0;
  pointer-events: auto;
  cursor: pointer;
}

/* Only surface the color picker when the specific label is active. */
body.page-builder .builder-app .field-label--show-color .field-color-control {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}
body.page-builder .builder-app .collapsible {
  border: 1px solid rgba(var(--color-primary-rgb), 0.16);
  border-radius: 16px;
  background: rgba(var(--color-white-rgb), 0.96);
  margin-bottom: 20px;
}
body.page-builder .builder-app .collapsible__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: none;
  border-radius: 16px;
  background: transparent;
  color: rgba(var(--color-navy-rgb), 0.72);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 12px;
  font-weight: 600;
  padding: 16px 18px;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  box-shadow: none;
  transform: none;
}
/* Closed collapsibles now get a tinted card treatment so they stand apart from text fields. */
body.page-builder .builder-app .collapsible:not(.is-open) .collapsible__header {
  background: rgba(var(--color-primary-rgb), 0.06);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(var(--color-primary-shadow-rgb), 0.12);
  color: rgba(var(--color-navy-rgb), 0.82);
}
body.page-builder .builder-app .collapsible__header:hover,
body.page-builder .builder-app .collapsible__header:focus-visible {
  color: var(--accent);
}
body.page-builder .builder-app .collapsible__header:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.22);
}
body.page-builder .builder-app .collapsible.is-open .collapsible__header {
  border-radius: 16px 16px 0 0;
  background: rgba(var(--color-primary-rgb), 0.02);
}
body.page-builder .builder-app .collapsible--static .collapsible__header {
  cursor: default;
  pointer-events: none;
}
body.page-builder .builder-app .collapsible__label {
  flex: 1;
}
body.page-builder .builder-app .collapsible__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(var(--color-primary-rgb), 0.18);
  background: rgba(var(--color-primary-rgb), 0.12);
  color: rgba(var(--color-navy-rgb), 0.68);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body.page-builder .builder-app .collapsible__badge--pro {
  background: var(--accent);
  border-color: rgba(var(--color-black-rgb), 0.25);
  color: var(--color-white);
  box-shadow: 0 10px 22px rgba(var(--color-primary-rgb), 0.28);
}
body.page-builder.has-pro-access .builder-app .collapsible__badge--pro,
body.page-builder.has-pro-access .template-modal__plan--pro,
body.page-builder.has-pro-access .plan-chip--pro {
  /* Keep Pro badges visible for members while lowering their visual urgency. */
  background: rgba(var(--color-primary-rgb), 0.12);
  color: var(--accent);
  border-color: rgba(var(--color-primary-rgb), 0.42);
  box-shadow: none;
}
body.page-builder .builder-app .collapsible__chevron {
  font-size: 20px;
  line-height: 1;
  color: inherit;
  transition: color 0.2s ease, transform 0.2s ease;
  transform: rotate(0deg);
}
body.page-builder .builder-app .collapsible__header:hover .collapsible__chevron {
  transform: rotate(180deg) translateY(-3px);
}

body.page-builder .builder-app .collapsible.is-open .collapsible__chevron {
  color: var(--accent);
}
body.page-builder .builder-app .collapsible__content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: max-height 0.28s ease, opacity 0.28s ease;
  border-top: 1px solid rgba(var(--color-primary-rgb), 0.12);
  border-radius: 0 0 16px 16px;
  background: rgba(var(--color-white-rgb), 0.96);
}
body.page-builder .builder-app .collapsible.is-open .collapsible__content {
  opacity: 1;
  visibility: visible;
}
body.page-builder .builder-app .collapsible--static .collapsible__content {
  max-height: none;
  opacity: 1;
  visibility: visible;
}
body.page-builder .builder-app .collapsible__body {
  padding: 18px 18px 30px 18px;
  margin-top:-1px;
}
body.page-builder .builder-app .collapsible__body .group {
  margin-bottom: 0;
}
body.page-builder .builder-app .collapsible__body .btns button,
body.page-builder .builder-app .collapsible__body .actions button {
  width: 100%;
}
body.page-builder .builder-app .collapsible__body .btns {
  padding-top:10px;
}
body.page-builder .builder-app .style-controls {
  margin-bottom: 20px;
}
/* Lock the inner style controls only so the header + badge stay readable for free users. */
body.page-builder .builder-app .style-controls--locked [data-style-control-section] {
  cursor: not-allowed;
  opacity: 0.55;
}
body.page-builder .builder-app .style-controls--locked [data-style-control-section] * {
  cursor: not-allowed;
}
body.page-builder .builder-app .style-controls--locked .style-controls__quick-actions {
  cursor: not-allowed;
  opacity: 0.55;
}
body.page-builder .builder-app .style-controls--locked .style-controls__quick-actions * {
  cursor: not-allowed;
}
body.page-builder .builder-app .row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
body.page-builder .builder-app .row.two-col {
  flex-direction: row;
  flex-wrap: wrap;
}
body.page-builder .builder-app .row .field-half {
  flex: 1;
  min-width: 100px;
}
body.page-builder .builder-app label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: rgba(var(--color-navy-rgb), 0.65);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* Inline toggle styling keeps the section divider control readable without
   inheriting the uppercase treatment used on standard field labels.
   The label doubles as the hit target so the control feels button-like, and
   we intentionally keep hover/focus neutral so the card never pulses. */
body.page-builder .builder-app .toggle-row__label {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 2px solid rgba(var(--color-primary-rgb), 0.28);
  background: rgba(var(--color-primary-rgb), 0.05);
  font-size: 15px;
  font-weight: 600;
  color: rgba(var(--color-navy-rgb), 0.8);
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

body.page-builder .builder-app .toggle-row__label input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin: 0;
  flex-shrink: 0;
  border-radius: 8px;
  accent-color: var(--accent);
  cursor: pointer;
}

body.page-builder .builder-app .toggle-row__text {
  flex: 1;
}

body.page-builder .builder-app .toggle-row__hint {
  display: block;
  margin-top: 8px;
  color: rgba(var(--color-navy-rgb), 0.6);
  font-size: 12px;
}
/* Slider cards reuse the toggle styling so every quick-adjust control looks cohesive
   and keeps the same steady hover/focus treatment. */
body.page-builder .builder-app .slider-row__label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 16px;
  border: 2px solid rgba(var(--color-primary-rgb), 0.28);
  background: rgba(var(--color-primary-rgb), 0.05);
  font-size: 15px;
  font-weight: 600;
  color: rgba(var(--color-navy-rgb), 0.8);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

body.page-builder .builder-app .slider-row__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

body.page-builder .builder-app .slider-row__title {
  font-size: 15px;
}

body.page-builder .builder-app .slider-row__value {
  font-size: 14px;
  color: rgba(var(--color-navy-rgb), 0.68);
}

body.page-builder .builder-app .slider-row__label input[type="range"] {
  width: 100%;
  appearance: none;
  height: 5.5px;
  border-radius: 999px;
  padding: 0;
  background:
    linear-gradient(var(--accent), var(--accent)) 0 center / var(--slider-percent, 50%) 4px no-repeat,
    rgba(var(--color-primary-rgb), 0.15) center / 100% 4px no-repeat;
  outline: none;
  transition: background 0.2s ease;
}

body.page-builder .builder-app .slider-row__label input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--color-white);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
  cursor: pointer;
  transition: transform 0.2s ease;
  /* Compensate for the shorter track so the thumb sits flush with both ends. */
  margin-top: calc((4px - 18px) / 2);
}

body.page-builder .builder-app .slider-row__label input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background:
    linear-gradient(var(--accent), var(--accent)) 0 center / var(--slider-percent, 50%) 4px no-repeat,
    rgba(var(--color-primary-rgb), 0.15) center / 100% 4px no-repeat;
}

body.page-builder .builder-app .slider-row__label input[type="range"]:is(:hover, :active)::-webkit-slider-thumb {
  /* Let the thumb expand slightly when hovered or dragged so it feels interactive. */
  transform: scale(1.25);
}

body.page-builder .builder-app .slider-row__label input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--color-white);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
  cursor: pointer;
  transition: transform 0.2s ease;
}

body.page-builder .builder-app .slider-row__label input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(var(--color-primary-rgb), 0.15);
}

body.page-builder .builder-app .slider-row__label input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--accent);
}

body.page-builder .builder-app .slider-row__label input[type="range"]:is(:hover, :active)::-moz-range-thumb {
  /* Mirror the hover/active sizing for Firefox's thumb implementation. */
  transform: scale(1.05);
}

body.page-builder .builder-app .slider-row__label input[type="range"]:focus-visible {
  outline: none;
}

body.page-builder .builder-app .slider-row__label input[type="range"]:disabled {
  cursor: not-allowed;
  background: rgba(var(--color-primary-rgb), 0.08);
}
body.page-builder .builder-app input, body.page-builder .builder-app textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(var(--field-accent-rgb, var(--field-accent-default-rgb)), 0.22);
  background: var(--color-white);
  font: inherit;
  color: var(--text);
  transition: border 0.2s ease, box-shadow 0.2s ease;
}
body.page-builder .builder-app textarea {
  min-height: 120px;
  resize: vertical;
}
body.page-builder .builder-app input:focus, body.page-builder .builder-app textarea:focus {
  outline: none;
  border-color: var(--field-accent, var(--field-accent-default));
  box-shadow: 0 0 0 4px rgba(var(--field-accent-rgb, var(--field-accent-default-rgb)), 0.2);
}
body.page-builder .builder-app small {
  color: rgba(var(--color-navy-rgb), 0.55);
  font-size: 12px;
}
body.page-builder .builder-app .btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
/* Flatten repeatable list items so fields sit directly in the collapsible. */
body.page-builder .builder-app .list {
  display: flex;
  flex-direction: column;
}
body.page-builder .builder-app .item + .item:not(.tag-row) {
  padding-top: 16px;
}
body.page-builder .builder-app .item {
  display:flex;
  flex-direction: column;
  gap:10px;
  padding: 0 0 16px 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
/* Visual separators replace the old card edges to keep items distinct. */
body.page-builder .builder-app .list .item + .item:not(.tag-row) {
  border-top: 1px solid rgba(var(--color-primary-rgb), 0.16);
  margin-top: 16px;
}
body.page-builder .builder-app .item .row {
  margin-top: 12px;
}
body.page-builder .builder-app .item .row:first-child {
  margin-top: 0;
}
body.page-builder .builder-app .item input, body.page-builder .builder-app .item textarea {
  background: rgba(var(--color-surface-veil-rgb), 0.8);
}
body.page-builder .builder-app .item .actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
body.page-builder .builder-app .tag-row {
  display: flex;
  flex-direction:row;
  gap: 12px;
  align-items: center;
}
body.page-builder .builder-app .tag-row input {
  flex: 1;
}
/* Keep the compact tag actions lightweight so the trash + color controls feel grouped. */
body.page-builder .builder-app .tag-row button.ghost {
  padding: 15px;
  min-width: 0;
}
body.page-builder .notification-stack {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: min(320px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
  z-index: 999;
}
body.page-builder .notification {
  position: relative;
  background: var(--accent);
  color: var(--color-white);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 26px 60px rgba(var(--color-navy-rgb), 0.28);
  transform: translatex(calc(100% + 24px));
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
  pointer-events: auto;
}
body.page-builder .notification--visible {
  transform: translatex(0);
  opacity: 1;
}
body.page-builder .notification-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
}
body.page-builder .notification-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(var(--color-white-rgb), 0.92);
}
body.page-builder .notification-actions {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.page-builder .notification-actions .secondary {
  width: 100%;
}
body.page-builder .notification-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(var(--color-white-rgb), 0.15);
  border: none;
  color: var(--color-white);
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  box-shadow: none;
  min-height: 0;
  gap: 0;
}
body.page-builder .notification-close:hover {
  background: rgba(var(--color-white-rgb), 0.28);
  transform: none;
  box-shadow: none;
}
body.page-builder button.secondary {
  background: rgba(var(--color-white-rgb), 0.18);
  color: var(--color-white);
  border: 1px solid rgba(var(--color-white-rgb), 0.4);
  box-shadow: none;
}
/*
 * Ensure secondary buttons honor the `hidden` attribute.
 * The base style sets `display: inline-flex`, which overrides the UA rule that
 * hides `[hidden]` elements. Re-apply display:none so logged-out users don't
 * see the logout action.
 */
body.page-builder button.secondary[hidden] {
  display: none !important;
}
body.page-builder button.secondary:hover {
  background: rgba(var(--color-white-rgb), 0.28);
  box-shadow: 0 18px 34px rgba(var(--color-navy-rgb), 0.28);
}
body.page-builder .toolbar button.secondary {
  background: rgba(var(--color-primary-rgb), 0.08);
  color: var(--accent);
  border: 1px solid rgba(var(--color-primary-rgb), 0.24);
  box-shadow: none;
}
body.page-builder .toolbar button.secondary:hover {
  background: rgba(var(--color-primary-rgb), 0.18);
  color: var(--accent);
}
body.page-builder .preview-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  background: linear-gradient(180deg, rgba(var(--color-indigo-glow-rgb), 0.03) 0%, rgba(var(--color-navy-rgb), 0.05) 100%);
}
body.page-builder .preview-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0;
}
/* Preview loader sits tucked at the base of the iframe stack so guests see progress while auth settles. */
body.page-builder .preview-loading {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(var(--color-white-rgb), 0.92);
  color: rgba(var(--color-navy-rgb), 0.75);
  font-size: 0.9rem;
  line-height: 1.2;
  box-shadow: 0 14px 34px rgba(var(--color-navy-rgb), 0.12);
  z-index: 3;
  pointer-events: none; /* Keep the iframe interactive even when the loader is visible. */
}
body.page-builder .preview-loading__spinner {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(var(--color-navy-rgb), 0.25);
  border-top-color: var(--accent);
  opacity: 0.8;
  animation: spin 0.9s linear infinite;
  flex-shrink: 0;
}
body.page-builder .preview-loading__text {
  white-space: nowrap;
}
body.page-builder .preview-frame.front {
  z-index: 2;
  pointer-events: auto;
}
body.page-builder .preview-frame.back {
  z-index: 1;
  pointer-events: none;
  opacity: 0.005;
  transform: translate(1px, 1px);
}
body.page-builder .hint {
  font-size: 12px;
  color: rgba(var(--color-navy-rgb), 0.55);
  margin-top: 6px;
  margin-bottom: 12px;
}
@media (min-width: 1025px) {
  /*
   * Lock the builder to the viewport on large screens so the sidebar and PDF
   * preview manage their own scrollbars instead of pushing the entire page.
   */
  body.page-builder {
    height: 100vh;
    overflow: hidden;
  }

  body.page-builder .builder-app {
    flex-direction: row;
    /* Ensures the sidebar/preview can calculate their own overflow heights. */
    overflow: hidden;
  }

  body.page-builder .builder-app aside {
    flex: 0 0 460px; /* Wider default column so dense sections feel less cramped. */
    border-right: 1px solid rgba(var(--color-surface-cloud-rgb), 0.9);
    border-bottom: none;
    /* Fill the available height so the internal overflow-y takes effect. */
    height: 100%;
    max-height: 100%;
  }

  /* Desktop drag handle lives between the sidebar and preview. */
  body.page-builder .sidebar-resizer {
    display: block;
    flex: 0 0 12px;
    min-width: 12px;
    align-self: stretch;
    cursor: col-resize;
    position: relative;
    background: rgba(var(--color-surface-cloud-rgb), 0.55);
    border-right: 1px solid rgba(var(--color-surface-cloud-rgb), 0.9);
    transition: background 0.2s ease;
  }

  body.page-builder .sidebar-resizer::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 36px;
    border-radius: 999px;
    background: rgba(var(--color-navy-rgb), 0.2);
    transition: background 0.2s ease;
  }

  body.page-builder .sidebar-resizer:hover,
  body.page-builder .sidebar-resizer.is-resizing {
    background: rgba(var(--color-surface-cloud-rgb), 0.75);
  }

  body.page-builder .sidebar-resizer:hover::before,
  body.page-builder .sidebar-resizer:focus-visible::before,
  body.page-builder .sidebar-resizer.is-resizing::before {
    background: rgba(var(--color-navy-rgb), 0.45);
  }

  body.page-builder .preview-wrap {
    min-height: 0;
    height: 100%;
  }
}
@media (max-width: 1024px) {
  body.page-builder .builder-shell {
    height: auto;
    min-height: 100vh;
    overflow: visible;
}
  body.page-builder .builder-app aside {
    max-height: none;
    overflow: visible;
}
  body.page-builder .preview-wrap {
    flex: 0 0 auto;
    min-height: clamp(640px, calc(100vw * 1.45 + 120px), 1400px);
    margin-top: 16px;
}
}
@media (max-width: 720px) {
  body.page-builder .builder-app .row {
    flex-direction: column;
  }
}

/* ================= Legal Pages (privacy/, terms/, refund/) ================= */
/* Gentle layout prioritizes long-form readability and reuse of brand styling. */
body.page-legal {
  --page-background: var(--color-white);
  --text: var(--color-ink);
  --muted: var(--color-muted);
  --primary: var(--color-primary);
  background: var(--page-background);
  color: var(--text);
}

body.page-legal main {
  padding: 40px 0 80px;
}

body.page-legal .legal-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
}

body.page-legal .legal-heading {
  padding: 40px 0 24px;
  border-bottom: 1px solid rgba(var(--color-ink-rgb), 0.08);
  margin-bottom: 32px;
}

body.page-legal .legal-heading h1 {
  margin: 0 0 8px;
  font-size: clamp(2rem, 4vw, 2.6rem);
}

body.page-legal .legal-heading p {
  margin: 0;
  color: var(--muted);
}

body.page-legal section {
  margin-bottom: 32px;
}

body.page-legal section h2 {
  margin: 0 0 12px;
  font-size: 1.4rem;
}

body.page-legal section p {
  margin: 0;
  color: var(--muted);
}

body.page-legal p a {
  color: var(--primary);
}

@media (max-width: 640px) {
  body.page-legal main {
    padding: 32px 0 56px;
  }

  body.page-legal .legal-heading {
    padding-top: 28px;
  }
}