/* ==========================================================================
   AutonomousForm — design tokens
   Two registers, one brand: a light, friendly marketing/public-form surface
   and a dark app shell for the dashboard and admin panel.
   ========================================================================== */
:root {
  --color-primary: #6c64ff;
  --color-primary-dark: #9679ff;
  --color-primary-light: #eeeffa;
  --color-accent: #16c8c5;
  --color-whatsapp: #25d366;
  --color-whatsapp-ink: #04301b;
  --color-accent-soft: #d7f5f4;
  /* Light orange: the warm note. Decorative surfaces and shapes only —
     it is too light to carry body text, so warm-ink does the talking. */
  --color-warm: #ff9a5c;
  --color-warm-soft: #ffeadd;
  --color-warm-ink: #9a4415;
  --color-warm-deep: #241006;

  --color-ink: #222228;
  --color-ink-soft: #3f4367;
  --color-ink-faint: #6e7293;

  --color-bg: #ffffff;
  --color-bg-soft: #f4f5fb;
  --color-border: #e0e3ff;

  --color-danger: #c0392b;
  --color-warning: #b7791f;

  /* Dark app shell */
  --app-bg: #191c36;
  --app-surface: #2d2e4a;
  --app-surface-2: #3f4367;
  --app-border: #4a4f7a;
  --app-ink: #f4f5fb;
  --app-ink-soft: #d5d7e4;
  --app-ink-faint: #9a9dc3;

  /* Inter has no Hebrew letters; Rubik supplies them (and only its Hebrew subset downloads). */
  /* Assistant covers Latin and Hebrew in one family, so nothing swaps mid-sentence. */
  --font-sans: "Assistant", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* The reference is all-sans: the weight does the work, not a second family. */
  --font-display: "Assistant", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(25, 28, 54, 0.07);
  --shadow-md: 0 6px 18px rgba(25, 28, 54, 0.08);
  --shadow-lg: 0 18px 44px rgba(25, 28, 54, 0.12);

  --wrap: 1140px;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button { font: inherit; }
h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
code, pre, .mono { font-family: var(--font-mono); }

/* Components set their own display, which would otherwise beat the hidden
   attribute the public-form stepper toggles. */
[hidden] { display: none !important; }

/* <icon name="…" /> (Services/Icons.cs). Sized here by default; contexts override. */
.icon { width: 18px; height: 18px; flex: none; vertical-align: middle; }

.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;
}

/* Parked above the viewport rather than off to one side: a negative horizontal
   offset would add real scrollable width once the page flips to RTL. */
.skip-link {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  transform: translateY(-200%);
  background: var(--color-primary);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  z-index: 1000;
}
.skip-link:focus { transform: translateY(0); }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 22px;
}
.wrap.narrow { max-width: 760px; }

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* ==========================================================================
   Motion
   ========================================================================== */
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-inner > * {
  opacity: 0;
  animation: hero-fade-up 0.7s ease forwards;
}
.hero-inner > *:nth-child(1) { animation-delay: 0.05s; }
.hero-inner > *:nth-child(2) { animation-delay: 0.14s; }
.hero-inner > *:nth-child(3) { animation-delay: 0.23s; }
.hero-inner > *:nth-child(4) { animation-delay: 0.32s; }
.hero-inner > *:nth-child(5) { animation-delay: 0.41s; }

/* JS adds .pre-reveal before observing, then removes it once the element
   scrolls into view — if JS never runs, content just stays visible. */
.reveal { transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.pre-reveal { opacity: 0; transform: translateY(18px); }
.reveal-group > *:nth-child(2) { transition-delay: 0.06s; }
.reveal-group > *:nth-child(3) { transition-delay: 0.12s; }
.reveal-group > *:nth-child(4) { transition-delay: 0.18s; }
.reveal-group > *:nth-child(5) { transition-delay: 0.24s; }
.reveal-group > *:nth-child(6) { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-inner > * { opacity: 1; animation: none; }
  .reveal.pre-reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex: none; }

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--color-primary-dark);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--color-bg);
  color: var(--color-ink);
  border-color: var(--color-border);
}
.btn-secondary:hover { border-color: var(--color-primary); color: var(--color-primary); }

.btn-ghost {
  background: transparent;
  color: var(--color-ink-soft);
  padding: 12px 16px;
}
.btn-ghost:hover { color: var(--color-ink); }

.btn-whatsapp {
  background: var(--color-whatsapp);
  color: var(--color-whatsapp-ink);
  box-shadow: var(--shadow-sm);
}
.btn-whatsapp:hover {
  background: #1ec25b;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-upgrade {
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
}
.btn-upgrade:hover { filter: brightness(1.05); }

.btn-dashed {
  background: transparent;
  border: 1.5px dashed var(--app-border);
  color: var(--app-ink-soft);
  width: 100%;
  padding: 16px;
}
.btn-dashed:hover { border-color: var(--color-accent); color: var(--color-accent); }

.btn:disabled, .btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn-sm { padding: 9px 16px; font-size: 0.86rem; }
.btn-sm svg { width: 16px; height: 16px; }
.btn-lg { padding: 15px 28px; font-size: 1rem; }
.btn-block { display: flex; width: 100%; }

/* ==========================================================================
   Marketing header / footer
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 70px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.06rem;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.brand-name span { color: var(--color-primary); }
.brand-mark {
  width: 30px;
  height: 30px;
  color: var(--color-primary);
  flex: none;
}

.site-nav {
  display: flex;
  gap: 26px;
  margin-inline-start: auto;
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--color-ink-soft);
}
.site-nav a:hover { color: var(--color-primary); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-toggle-input { display: none; }
.nav-toggle { display: none; }
/* Transparent to layout on desktop: .site-nav and .header-actions stay flex items of
   .header-inner, so nothing about the wide layout changes. */
.header-collapse { display: contents; }

/* Language switcher */
.lang-switcher { display: inline-flex; align-items: center; gap: 6px; }
.lang-select {
  appearance: none;
  padding: 8px 26px 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5l4-4' fill='none' stroke='%23839790' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center;
  background-size: 11px;
  color: var(--color-ink-soft);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
[dir="rtl"] .lang-select { padding: 8px 10px 8px 26px; background-position: left 8px center; }
.lang-select:hover { border-color: var(--color-primary); color: var(--color-ink); }
.lang-select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }

.auth-lang-corner {
  position: absolute;
  top: 18px;
  inset-inline-end: 20px;
  z-index: 5;
}

.site-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-soft);
  margin-top: 80px;
}
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 56px 22px 40px;
}
.footer-brand p {
  margin-top: 12px;
  color: var(--color-ink-soft);
  font-size: 0.92rem;
  max-width: 320px;
}
.footer-col { display: flex; flex-direction: column; gap: 10px; font-size: 0.92rem; color: var(--color-ink-soft); }
.footer-col h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-ink); margin-bottom: 4px; }
.footer-col a:hover { color: var(--color-primary); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 22px 32px;
  border-top: 1px solid var(--color-border);
  font-size: 0.85rem;
  color: var(--color-ink-faint);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { padding: 72px 0 40px; }
.hero-inner { text-align: center; }
.eyebrow {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.hero h1 {
  margin: 20px auto 0;
  max-width: 15ch;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 800;
}
.hero h1 .hl {
  background: linear-gradient(180deg, transparent 62%, var(--color-accent-soft) 62%);
  color: var(--color-primary-dark);
}
.hero-lede {
  margin: 20px auto 0;
  max-width: 60ch;
  font-size: 1.08rem;
  color: var(--color-ink-soft);
}
.hero-actions {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.hero-note {
  margin-top: 16px;
  font-size: 0.86rem;
  color: var(--color-ink-faint);
}

.hero-demo {
  margin-top: 56px;
  display: grid;
  /* Three scenes: the WhatsApp exchange that hands over the link, the form, and the one message
     that comes back. 250 + 36 + 340 + 44 + gaps leaves ~360px for the final bubble at --wrap. */
  grid-template-columns: minmax(0, 250px) 36px minmax(0, 340px) 44px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

/* The opening exchange: the customer's message, then the business's own auto-reply carrying the link. */
.demo-wa-start {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: stretch;
  justify-content: center;
}
.demo-wa-start .wa-bubble { max-width: 100%; padding: 10px 12px 18px; }
.demo-wa-start .wa-bubble pre { font-size: 0.82rem; }
.wa-bubble.is-in {
  background: #fff;
  border-radius: 12px 12px 12px 4px;
  align-self: flex-start;
}
.demo-wa-start .wa-bubble:not(.is-in) { align-self: flex-end; border-radius: 12px 12px 4px 12px; }
.wa-link { color: #1e6ca8; text-decoration: underline; word-break: break-all; }
.demo-wa-note {
  margin-top: 4px;
  font-size: 0.72rem;
  line-height: 1.4;
  color: #5c6f63;
}
.demo-arrow { color: var(--color-ink-faint); }
.demo-arrow svg { width: 48px; height: 24px; }
[dir="rtl"] .demo-arrow svg { transform: scaleX(-1); }

/* The hero's demo: a chat-style form built from the same .pf-chat-* bubbles the public form uses, in a
   fixed-height window with the newest message at the bottom. initDemoChat in site.js replays it. */
.demo-chat {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-lg);
  text-align: start;
}
.demo-chat [hidden] { display: none !important; }
.demo-chat-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 10px;
  align-items: center;
  padding: 12px 14px 0;
}
.demo-chat-head .pf-chat-avatar { width: 34px; height: 34px; }
.demo-chat-title { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.demo-chat-title strong { overflow: hidden; font-size: 0.92rem; text-overflow: ellipsis; white-space: nowrap; }
.demo-chat-status { min-height: 1.1em; font-size: 0.72rem; color: var(--color-ink-faint); }
.demo-chat-restart {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
}
.demo-chat-restart svg { width: 14px; height: 14px; }
.demo-chat-progress { grid-column: 1 / -1; height: 3px; margin: 10px -14px 0; overflow: hidden; background: var(--color-border); }
.demo-chat-progress i { display: block; width: 100%; height: 100%; background: var(--color-primary); transition: width 0.35s ease; }

.demo-chat-log {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  height: 330px;
  padding: 14px 12px;
  overflow: hidden;
  /* Older messages fade out under the header as new ones push them up. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 40px);
}
.demo-chat-log .pf-chat-row { flex: none; gap: 8px; }
.demo-chat-log .pf-chat-avatar { width: 28px; height: 28px; }
.demo-chat-log .pf-chat-avatar svg { width: 14px; height: 14px; }
.demo-chat-log .pf-chat-bubble { padding: 8px 13px; border-radius: 16px; font-size: 0.86rem; }
.demo-chat-log .pf-chat-row.is-user .pf-chat-bubble,
.demo-chat-log .pf-chat-row.is-user .pf-chat-bubble:hover { padding: 8px 16px; background: var(--color-primary); cursor: default; }
.demo-chat-log .pf-chat-row.is-new { animation: pf-chat-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.demo-chat-log .pf-chat-options { gap: 6px; margin-top: 6px; }
.demo-chat-log .pf-chat-chip,
.demo-chat-log .pf-chat-chip:hover { gap: 7px; padding: 5px 12px 5px 9px; background: var(--color-bg); font-size: 0.8rem; cursor: default; }
.demo-chat-log .pf-chat-chip::before { width: 9px; height: 9px; }
.demo-chat-log .pf-chat-chip.is-picked { background: var(--color-primary); color: #fff; transition: background 0.2s ease, color 0.2s ease; }
.demo-chat-log .pf-chat-chip.is-picked::before { background: #fff; box-shadow: inset 0 0 0 2px var(--color-primary); }
.demo-chat-log .pf-chat-dots { padding: 11px 13px; }

.demo-chat-bar {
  display: flex;
  align-items: center;
  min-height: 60px;
  padding: 8px 12px;
  border-top: 1px solid var(--color-border);
}
.demo-chat-idle { display: flex; flex: 1; align-items: center; justify-content: space-between; }
.demo-chat-idle .pf-chat-idle { padding: 0 4px; font-size: 0.88rem; }
.demo-chat-arrow { display: grid; place-items: center; width: 34px; height: 34px; color: var(--color-primary); }
.demo-chat-arrow svg { width: 19px; height: 19px; }
[dir="rtl"] .demo-chat-arrow svg { transform: scaleX(-1); }
.demo-chat-send { gap: 8px; padding: 10px 14px; font-size: 0.9rem; transition: transform 0.15s ease; }
.demo-chat-send svg { width: 17px; height: 17px; }
.demo-chat-send.is-pressed { transform: scale(0.95); }

/* While the demo plays, the WhatsApp message waits for the send tap, then pops in. */
.hero-demo.is-playing .demo-wa {
  opacity: 0.25;
  transform: translateY(10px) scale(0.97);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 1.3, 0.4, 1);
}
.hero-demo.is-playing .demo-wa.is-sent { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .demo-chat-log .pf-chat-row.is-new { animation: none; }
}

/* ==========================================================================
   WhatsApp message preview bubble
   ========================================================================== */
.wa-preview {
  background: #e8ded3;
  background-image: radial-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px);
  background-size: 18px 18px;
  border-radius: var(--radius-md);
  padding: 18px;
}
.wa-bubble {
  position: relative;
  background: #dcf8c6;
  border-radius: 12px 12px 12px 4px;
  padding: 12px 14px 20px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
  max-width: 460px;
}
.wa-bubble pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: 1.5;
  color: #101d16;
}
.wa-bubble pre.is-empty { color: #5c6f63; font-style: italic; }
.wa-time {
  position: absolute;
  inset-inline-end: 12px;
  bottom: 6px;
  font-size: 0.68rem;
  color: #5c6f63;
}

/* The bubble tail sits on the start side, so it flips with the text direction. */
[dir="rtl"] .wa-bubble { border-radius: 12px 12px 4px 12px; }

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding: 76px 0; }
.section-alt { background: var(--color-bg-soft); border-block: 1px solid var(--color-border); }
.section-title {
  text-align: center;
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  letter-spacing: -0.03em;
  font-weight: 800;
}
.section-lede {
  margin: 12px auto 44px;
  max-width: 56ch;
  text-align: center;
  color: var(--color-ink-soft);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.feature-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 26px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent);
}
.feature-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.feature-icon svg { width: 22px; height: 22px; }
.feature-card h3 { font-size: 1.05rem; letter-spacing: -0.01em; }
.feature-card p { margin-top: 8px; color: var(--color-ink-soft); font-size: 0.93rem; }

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}
.step-item {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 26px;
}
.step-num {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 14px;
}
.step-item h3 { font-size: 1.05rem; }
.step-item p { margin-top: 8px; color: var(--color-ink-soft); font-size: 0.93rem; }
.step-item code {
  font-size: 0.86em;
  background: var(--color-bg-soft);
  padding: 2px 6px;
  border-radius: 6px;
}

.callout {
  border-radius: var(--radius-md);
  padding: 16px 18px;
  font-size: 0.93rem;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
}
.callout-plain { margin-top: 34px; color: var(--color-ink-soft); }
.callout-plain strong { color: var(--color-ink); }
.callout-info { background: var(--color-primary-light); border-color: transparent; color: var(--color-primary-dark); margin-bottom: 18px; }
.callout-success { background: var(--color-accent-soft); border-color: transparent; color: #0a5c33; margin-bottom: 18px; }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
  max-width: 800px;
  margin: 0 auto;
}
.price-card {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
}
.price-card-featured {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}
.price-badge {
  position: absolute;
  top: -12px;
  inset-inline-start: 26px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}
.price-card h3 { font-size: 1.15rem; }
.price { margin-top: 10px; color: var(--color-ink-soft); font-size: 0.9rem; }
.price span { font-size: 2.5rem; font-weight: 800; color: var(--color-ink); letter-spacing: -0.03em; }
.price-sub { margin-top: 4px; color: var(--color-ink-soft); font-size: 0.9rem; }
.price-list {
  margin: 22px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.93rem;
  color: var(--color-ink-soft);
  flex: 1;
}
.price-list li { padding-inline-start: 26px; position: relative; }
.price-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 7px;
  width: 14px; height: 8px;
  border-inline-start: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(-45deg);
}
.price-note { margin-top: 12px; font-size: 0.78rem; color: var(--color-ink-faint); }

.cta-band {
  background: var(--color-ink);
  color: #fff;
  padding: 66px 0;
}
.cta-inner { text-align: center; }
.cta-inner h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); letter-spacing: -0.03em; }
.cta-inner p { margin: 12px auto 26px; max-width: 52ch; color: rgba(255, 255, 255, 0.72); }

/* ==========================================================================
   Content pages
   ========================================================================== */
.content-page { padding: 64px 0 40px; }
.content-page h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); letter-spacing: -0.03em; }
.content-page h2 { margin-top: 34px; font-size: 1.15rem; letter-spacing: -0.01em; }
.content-page p { margin-top: 12px; color: var(--color-ink-soft); }
.content-page a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.content-lede { margin-top: 14px !important; font-size: 1.05rem; }
.content-meta { font-size: 0.85rem; color: var(--color-ink-faint); }
.content-page .btn { margin-top: 26px; color: inherit; text-decoration: none; }
.contact-form { margin-top: 26px; max-width: 520px; }

/* ==========================================================================
   Examples gallery (/examples) — light marketing surface
   ========================================================================== */
.ex-hero {
  padding: 64px 0 30px;
  text-align: center;
  background:
    radial-gradient(50rem 22rem at 50% -10%, rgba(22, 200, 197, 0.14), transparent 65%),
    var(--color-bg-soft);
  border-bottom: 1px solid var(--color-border);
}
.ex-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  background: var(--color-primary-light);
  padding: 5px 13px;
  border-radius: var(--radius-pill);
}
.ex-hero h1 { font-size: clamp(1.9rem, 4.4vw, 2.7rem); letter-spacing: -0.03em; line-height: 1.1; }
.ex-lede { max-width: 56ch; margin: 14px auto 0; color: var(--color-ink-soft); font-size: 1.06rem; }

.ex-body { padding: 30px 24px 70px; }

.ex-filters { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-bottom: 34px; }
.ex-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-ink-soft);
  font-size: 0.9rem;
  font-weight: 600;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.ex-chip:hover { border-color: var(--color-primary); color: var(--color-ink); transform: translateY(-1px); }
.ex-chip-emoji { font-size: 1rem; }
.ex-chip span { font-size: 0.78rem; color: var(--color-ink-faint); font-variant-numeric: tabular-nums; }
.ex-chip.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}
.ex-chip.is-active span { color: rgba(255, 255, 255, 0.75); }

.ex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 18px;
}
.ex-card {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 22px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.ex-card:hover { transform: translateY(-3px); border-color: rgba(22, 200, 197, 0.4); box-shadow: var(--shadow-md); }
.ex-card-top { display: flex; align-items: flex-start; gap: 13px; }
.ex-emoji {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 14px;
  background: var(--color-bg-soft);
  font-size: 1.55rem;
  line-height: 1;
}
.ex-card-top h2 { font-size: 1.12rem; letter-spacing: -0.015em; }
.ex-tagline { margin-top: 3px; font-size: 0.9rem; color: var(--color-ink-soft); line-height: 1.4; }

.ex-questions { display: flex; flex-direction: column; gap: 8px; }
.ex-questions li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--color-ink);
}
.ex-questions .ft-badge { width: 28px; height: 28px; border-radius: 8px; }
.ex-questions .ft-badge svg { width: 14px; height: 14px; }
.ex-more { color: var(--color-ink-faint); font-size: 0.84rem; padding-inline-start: 38px; }

.ex-preview > summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-primary);
  list-style: none;
}
.ex-preview > summary::-webkit-details-marker { display: none; }
.ex-preview > summary .icon { width: 16px; height: 16px; }
.ex-preview[open] > summary { margin-bottom: 12px; }
.ex-preview .wa-preview { margin: 0; }

.ex-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 4px;
}
.ex-meta { font-size: 0.8rem; color: var(--color-ink-faint); font-weight: 600; }
.ex-card-foot .btn .icon { width: 15px; height: 15px; }

.ex-cta {
  margin-top: 44px;
  padding: 44px 30px;
  text-align: center;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(30rem 14rem at 50% 0%, rgba(22, 200, 197, 0.14), transparent 70%),
    var(--color-bg-soft);
  border: 1px solid var(--color-border);
}
.ex-cta-emoji { font-size: 2.2rem; }
.ex-cta h2 { margin-top: 12px; font-size: 1.5rem; letter-spacing: -0.02em; }
.ex-cta p { max-width: 48ch; margin: 12px auto 22px; color: var(--color-ink-soft); }

/* --- Idea banner on the new-form page (dark app shell) --- */
.idea-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: linear-gradient(100deg, rgba(22, 200, 197, 0.12), transparent 60%), var(--app-surface);
  border: 1px solid rgba(22, 200, 197, 0.3);
}
.idea-banner-emoji {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 13px;
  background: var(--app-surface-2);
  font-size: 1.5rem;
  line-height: 1;
}
.idea-banner-text { flex: 1; min-width: 0; }
.idea-banner-text strong { display: block; font-size: 0.98rem; }
.idea-banner-text span { font-size: 0.86rem; color: var(--app-ink-soft); }
.idea-banner-change { flex: none; color: var(--color-accent); font-weight: 600; font-size: 0.88rem; }
.new-form-browse { margin-top: 14px; font-size: 0.9rem; color: var(--app-ink-soft); }
.new-form-browse a { color: var(--color-accent); font-weight: 600; }

/* ==========================================================================
   Generic form controls (light surfaces)
   ========================================================================== */
.form-field { margin-bottom: 18px; }
.form-field label,
.form-label-row label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field input[type="search"],
.form-field input[type="tel"],
.form-field input[type="number"],
.form-field input[type="date"],
.form-field input:not([type]),
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-field textarea { resize: vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.form-hint { margin-top: 6px; font-size: 0.82rem; color: var(--color-ink-faint); }
.form-error { display: block; margin-top: 6px; font-size: 0.82rem; color: var(--color-danger); }
.form-error-summary { color: var(--color-danger); font-size: 0.88rem; margin-bottom: 14px; }
.form-error-summary ul { display: flex; flex-direction: column; gap: 4px; }
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  margin-bottom: 16px;
  cursor: pointer;
}
.form-check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--color-primary); flex: none; }
.form-check a { color: var(--color-primary); text-decoration: underline; }
.form-label-row { display: flex; justify-content: space-between; align-items: baseline; }
.form-label-link { font-size: 0.82rem; color: var(--color-primary); }
.form-label-link:hover { text-decoration: underline; }
.form-actions { display: flex; gap: 10px; align-items: center; margin-top: 24px; flex-wrap: wrap; }
.input-prefix {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.input-prefix span {
  display: flex;
  align-items: center;
  padding: 0 10px;
  background: var(--color-bg-soft);
  color: var(--color-ink-faint);
  font-size: 0.82rem;
  font-family: var(--font-mono);
  white-space: nowrap;
}
.input-prefix input { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.advanced { margin-bottom: 18px; }
.advanced > summary {
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 14px;
}

/* ==========================================================================
   Auth pages
   ========================================================================== */
.auth-body {
  position: relative;
  background: linear-gradient(160deg, var(--color-bg-soft), #fff 60%);
  min-height: 100vh;
}
.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 20px;
}
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 34px 30px;
  box-shadow: var(--shadow-lg);
}
.auth-brand { margin-bottom: 24px; }
.auth-card h1 { font-size: 1.55rem; letter-spacing: -0.025em; }
.auth-lede { margin: 8px 0 24px; color: var(--color-ink-soft); font-size: 0.93rem; }
.auth-alt { margin-top: 20px; text-align: center; font-size: 0.9rem; color: var(--color-ink-soft); }
.auth-alt a { color: var(--color-primary); font-weight: 600; }
.auth-card .btn-block { margin-top: 8px; }

/* ==========================================================================
   App shell (dashboard + admin)
   ========================================================================== */
.app-body {
  background: var(--app-bg);
  color: var(--app-ink);
}
.app-shell {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  min-height: 100vh;
}
.app-sidebar-toggle-input { display: none; }
.app-scrim { display: none; }

.app-sidebar {
  background: var(--app-surface);
  border-inline-end: 1px solid var(--app-border);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.app-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--app-ink);
  padding: 0 6px;
}
.app-logo .brand-name span { color: var(--color-accent); }
.app-logo .brand-mark { color: var(--color-accent); }
.app-logo-mobile { display: none; }
.admin-badge {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--app-surface-2);
  color: var(--color-accent) !important;
  padding: 3px 7px;
  border-radius: var(--radius-pill);
}

.app-nav { display: flex; flex-direction: column; gap: 3px; }
.app-nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--app-ink-soft);
  font-size: 0.92rem;
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.app-nav-item svg { width: 18px; height: 18px; flex: none; }
.app-nav-item:hover { background: var(--app-surface-2); color: var(--app-ink); }
.app-nav-item.is-active { background: var(--app-surface-2); color: var(--color-accent); }

.app-sidebar-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.app-lang .lang-switcher { width: 100%; }
.app-lang .lang-select {
  width: 100%;
  background-color: var(--app-surface-2);
  border-color: var(--app-border);
  color: var(--app-ink-soft);
}
.app-lang .lang-select:hover { border-color: var(--color-accent); color: var(--app-ink); }
.app-lang .lang-select:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(22, 200, 197, 0.16); }
.app-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--app-surface-2);
}
.app-user-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  flex: none;
}
.app-user-name {
  font-size: 0.86rem;
  color: var(--app-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.app-user-logout button {
  background: none;
  border: 0;
  color: var(--app-ink-faint);
  cursor: pointer;
  padding: 4px;
  display: grid;
  place-items: center;
}
.app-user-logout button:hover { color: var(--color-accent); }
.app-user-logout svg { width: 17px; height: 17px; }

.app-main { padding: 30px 30px 70px; min-width: 0; }

.app-topbar { display: none; }
.app-sidebar-btn {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: var(--app-surface-2);
  color: var(--app-ink);
  cursor: pointer;
}
.app-sidebar-btn svg { width: 20px; height: 20px; }

/* --- App page chrome ----------------------------------------------------- */
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.page-head h1 { font-size: 1.6rem; letter-spacing: -0.025em; }
.page-sub { margin-top: 5px; color: var(--app-ink-soft); font-size: 0.92rem; }
.page-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--app-ink-faint);
  margin-bottom: 8px;
}
.breadcrumb a:hover { color: var(--color-accent); }

.plan-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border: 1px solid var(--app-border);
  border-radius: var(--radius-md);
  background: var(--app-surface);
  margin-bottom: 22px;
}
.plan-banner strong { display: block; font-size: 0.92rem; }
.plan-banner span { font-size: 0.86rem; color: var(--app-ink-soft); }

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.stat-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--app-ink-faint); }
.stat-value { font-size: 1.7rem; font-weight: 700; font-family: var(--font-mono); letter-spacing: -0.02em; }

.filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.filter-bar input,
.filter-bar select {
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  color: var(--app-ink);
  font: inherit;
  font-size: 0.9rem;
}
.filter-bar input { flex: 1; min-width: 180px; }
.filter-bar input:focus, .filter-bar select:focus { outline: none; border-color: var(--color-accent); }
.app-body .btn-secondary {
  background: var(--app-surface-2);
  border-color: var(--app-border);
  color: var(--app-ink);
}
.app-body .btn-secondary:hover { border-color: var(--color-accent); color: var(--color-accent); }
.app-body .btn-ghost { color: var(--app-ink-soft); }
.app-body .btn-ghost:hover { color: var(--app-ink); }

.empty-state {
  border: 1px dashed var(--app-border);
  border-radius: var(--radius-lg);
  padding: 54px 26px;
  text-align: center;
  color: var(--app-ink-soft);
}
.empty-state > svg { width: 40px; height: 40px; color: var(--app-ink-faint); margin: 0 auto 14px; }
.empty-state h2 { font-size: 1.15rem; color: var(--app-ink); }
.empty-state p { margin: 8px auto 20px; max-width: 46ch; font-size: 0.92rem; }
.empty-state code { background: var(--app-surface-2); padding: 2px 6px; border-radius: 6px; font-size: 0.86em; }

.limit-note { margin-top: 20px; font-size: 0.86rem; color: var(--app-ink-faint); }
.limit-note a { color: var(--color-accent); }

.panel {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-bottom: 20px;
}
.panel-narrow { max-width: 640px; }
.panel-heading { font-size: 1rem; margin-bottom: 16px; letter-spacing: -0.01em; }
.panel-heading:not(:first-child) { margin-top: 30px; }
.panel-empty, .panel-note { color: var(--app-ink-soft); font-size: 0.9rem; }
.panel-note a { color: var(--color-accent); }
.panel-note code { background: var(--app-surface-2); padding: 2px 6px; border-radius: 6px; font-size: 0.86em; }

/* Form controls on dark surfaces */
.app-body .form-field label { color: var(--app-ink); }
.app-body .form-field input,
.app-body .form-field select,
.app-body .form-field textarea {
  background: var(--app-bg);
  border-color: var(--app-border);
  color: var(--app-ink);
}
.app-body .form-field input:focus,
.app-body .form-field select:focus,
.app-body .form-field textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(22, 200, 197, 0.16);
}
.app-body .form-hint { color: var(--app-ink-faint); }
.app-body .form-hint a { color: var(--color-accent); }
.app-body .form-check { color: var(--app-ink-soft); }
.app-body .input-prefix { border-color: var(--app-border); }
.app-body .input-prefix span { background: var(--app-surface-2); color: var(--app-ink-faint); }
.app-body .input-prefix input { background: var(--app-bg); }
.app-body .callout-success { background: rgba(22, 200, 197, 0.12); color: var(--color-accent); }
.app-body .advanced > summary { color: var(--color-accent); }

.table-wrap { overflow-x: auto; }
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.data-table th {
  text-align: start;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--app-ink-faint);
  padding: 0 14px 10px;
  white-space: nowrap;
}
.data-table td {
  padding: 12px 14px;
  border-top: 1px solid var(--app-border);
  vertical-align: middle;
}
.data-table .mono { font-size: 0.84rem; color: var(--app-ink-soft); }
.data-table + .btn { margin-top: 16px; }
.table-link { color: var(--color-accent); font-weight: 600; }
.table-link:hover { text-decoration: underline; }
.muted { color: var(--app-ink-faint); }
.cell-sub { display: block; margin-top: 2px; font-size: 0.78rem; color: var(--app-ink-faint); }
.cell-actions { width: 1%; white-space: nowrap; text-align: end; }
.cell-actions .btn svg { width: 14px; height: 14px; }
.filter-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  background: rgba(22, 200, 197, 0.08);
  border: 1px solid rgba(22, 200, 197, 0.25);
  font-size: 0.88rem;
}
.filter-note a { color: var(--color-accent); font-weight: 600; }

/* Shown on every page while an admin is signed in as someone else. Deliberately loud and
   theme-independent, so it's never mistaken for part of the user's own screen. */
.impersonation-bar {
  position: sticky;
  top: 0;
  z-index: 120;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 10px 16px;
  background: #f5c26b;
  color: #2b1d02;
  font-size: 0.88rem;
  font-weight: 600;
}
/* Pull the bar out to the edges of .app-main, whose padding is 30px (18px on phones). */
.app-main > .impersonation-bar { margin: -30px -30px 22px; }
.impersonation-text { display: inline-flex; align-items: center; gap: 9px; }
.impersonation-text svg { width: 18px; height: 18px; flex: none; }
.impersonation-back {
  padding: 6px 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: #2b1d02;
  color: #ffe3ad;
  font: inherit;
  font-size: 0.84rem;
  cursor: pointer;
}
.impersonation-back:hover { background: #000; }

/* Building without an account: the one standing nudge toward signing up. */
.guest-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: -30px -30px 22px;
  padding: 10px 16px;
  background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary));
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
}
.guest-bar-text { display: inline-flex; align-items: center; gap: 9px; }
.guest-bar-text svg { width: 18px; height: 18px; flex: none; color: var(--color-accent); }
.guest-bar-actions { display: inline-flex; align-items: center; gap: 14px; }
.guest-bar-cta {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--color-primary-dark);
  font-size: 0.84rem;
  text-decoration: none;
  white-space: nowrap;
}
.guest-bar-cta:hover { background: var(--color-accent-soft); }
.guest-bar-login { color: #fff; font-size: 0.84rem; white-space: nowrap; }
.app-guest { display: grid; gap: 8px; }
.app-guest-login { text-align: center; color: var(--app-ink-soft); font-size: 0.86rem; }
.app-guest-login:hover { color: var(--app-ink); }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.badge-live { background: rgba(22, 200, 197, 0.16); color: var(--color-accent); }
.badge-draft { background: var(--app-surface-2); color: var(--app-ink-faint); }
.badge-premium { background: rgba(22, 200, 197, 0.16); color: var(--color-accent); }
.badge-trial { background: rgba(183, 121, 31, 0.18); color: #e0a33e; }

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: none;
  border: 0;
  color: var(--app-ink-soft);
  cursor: pointer;
  font-size: 0.84rem;
  padding: 0;
}
.toggle:disabled { opacity: 0.45; cursor: not-allowed; }
.toggle-track {
  width: 38px; height: 21px;
  border-radius: var(--radius-pill);
  background: var(--app-surface-2);
  border: 1px solid var(--app-border);
  position: relative;
  transition: background-color 0.18s ease, border-color 0.18s ease;
  flex: none;
}
.toggle-thumb {
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--app-ink-faint);
  transition: transform 0.18s ease, background-color 0.18s ease;
}
.toggle.is-on .toggle-track { background: rgba(22, 200, 197, 0.28); border-color: var(--color-accent); }
.toggle.is-on .toggle-thumb { transform: translateX(17px); background: var(--color-accent); }
[dir="rtl"] .toggle.is-on .toggle-thumb { transform: translateX(-17px); }
.toggle.is-on .toggle-text { color: var(--color-accent); }

.flag-list { display: flex; flex-direction: column; gap: 4px; }
.flag-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--app-border);
}
.flag-row:first-child { border-top: 0; }
.flag-row p { margin-top: 4px; font-size: 0.88rem; color: var(--app-ink-soft); max-width: 60ch; }
.flag-meta { display: block; margin-top: 6px; font-size: 0.76rem; color: var(--app-ink-faint); }

/* --- Dashboard form cards ------------------------------------------------ */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.form-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.form-card:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.form-card-head { display: flex; justify-content: space-between; align-items: flex-start; }
.form-card h2 { font-size: 1.06rem; letter-spacing: -0.015em; }
.form-card h2 a:hover { color: var(--color-accent); }
.form-card-url {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  background: var(--app-bg);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.form-card-url code { font-size: 0.8rem; color: var(--app-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copy-btn {
  background: none;
  border: 0;
  color: var(--color-accent);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
  white-space: nowrap;
}
.copy-btn:hover { text-decoration: underline; }
.copy-btn.is-copied { color: var(--app-ink-soft); text-decoration: none; }
.form-card-stats { display: flex; gap: 20px; flex-wrap: wrap; }
.form-card-stats dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--app-ink-faint); }
.form-card-stats dd { margin: 2px 0 0; font-size: 0.94rem; font-weight: 600; }
.form-card-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }

/* Dropdown menus built on <details> — no JS needed */
.menu { position: relative; }
.menu > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--radius-sm);
  color: var(--app-ink-faint);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { background: var(--app-surface-2); color: var(--app-ink); }
.menu > summary svg { width: 17px; height: 17px; }
.menu-panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 6px);
  z-index: 40;
  min-width: 190px;
  background: var(--app-surface-2);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.menu-panel-wide { min-width: 320px; padding: 14px; gap: 0; }
/* Menu rows, not the real .btn buttons some panels (like the question editor) contain. */
.menu-panel a,
.menu-panel button:not(.btn) {
  display: block;
  width: 100%;
  text-align: start;
  padding: 8px 10px;
  border-radius: 8px;
  background: none;
  border: 0;
  color: var(--app-ink-soft);
  font-size: 0.88rem;
  cursor: pointer;
}
.menu-panel a:hover,
.menu-panel button:not(.btn):hover:not(:disabled) { background: var(--app-bg); color: var(--app-ink); }
.menu-panel button:disabled { opacity: 0.4; cursor: not-allowed; }
.menu-panel :is(a, button).is-danger:not(.btn) { color: #ef8377; }
.menu-panel :is(a, button).is-danger:not(.btn):hover:not(:disabled) { background: rgba(192, 57, 43, 0.16); color: #ff9d92; }

/* ==========================================================================
   App polish — icon badges, tones and motion shared by the dashboard, the
   builder, submissions and the admin panel.
   ========================================================================== */
/* Dark, thin scrollbars (inherited), instead of the browser's bright default in the dark shell. */
.app-body { scrollbar-color: #2e3d36 transparent; }
.lead-table-wrap, .table-wrap, .menu-panel { scrollbar-width: thin; }

/* Colour tones for icon badges. Each sets a colour and a matching tint. */
.tone-sky { --tone: #7cc4ff; --tone-bg: rgba(124, 196, 255, 0.13); }
.tone-green { --tone: #3ee07f; --tone-bg: rgba(62, 224, 127, 0.13); }
.tone-violet { --tone: #b89cff; --tone-bg: rgba(184, 156, 255, 0.15); }
.tone-amber { --tone: #f5c26b; --tone-bg: rgba(245, 194, 107, 0.14); }
.tone-rose { --tone: #ff8fa3; --tone-bg: rgba(255, 143, 163, 0.14); }

.page-greeting {
  margin-bottom: 4px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-accent);
  animation: app-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.page-head h1 .icon, .panel-heading .icon, .side-panel h3 .icon { color: var(--color-accent); }
.panel-heading, .side-panel h3 { display: flex; align-items: center; gap: 9px; }
.panel-heading .icon, .side-panel h3 .icon { width: 18px; height: 18px; }

/* --- Stat cards ------------------------------------------------------------ */
.stat-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon label" "icon value";
  column-gap: 14px;
  row-gap: 2px;
  align-items: center;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.stat-card:hover { transform: translateY(-2px); border-color: var(--tone, #33443c); }
/* A soft wash of the card's tone in the corner. */
.stat-card::after {
  content: "";
  position: absolute;
  inset-inline-end: -30px;
  top: -30px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--tone-bg, transparent), transparent 70%);
  pointer-events: none;
}
.stat-icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--tone-bg, var(--app-surface-2));
  color: var(--tone, var(--app-ink-soft));
}
.stat-icon .icon { width: 21px; height: 21px; }
.stat-card .stat-label { grid-area: label; align-self: end; }
.stat-card .stat-value { grid-area: value; align-self: start; line-height: 1.1; }
/* Cards without an icon keep the old stacked layout. */
.stat-card:not(:has(.stat-icon)) { grid-template-columns: 1fr; grid-template-areas: "label" "value"; }

/* --- Plan banner ------------------------------------------------------------ */
.plan-banner {
  justify-content: flex-start;
  background:
    linear-gradient(100deg, rgba(22, 200, 197, 0.1), transparent 55%),
    var(--app-surface);
  border-color: rgba(22, 200, 197, 0.25);
}
.plan-banner-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  color: #04140c;
  background: linear-gradient(135deg, var(--color-accent), #b8f5cf);
  animation: app-float 3.2s ease-in-out infinite;
}
.plan-banner-icon .icon { width: 20px; height: 20px; }
.plan-banner-text { flex: 1; min-width: 200px; }
.btn-upgrade .icon { width: 15px; height: 15px; }

/* --- Search ------------------------------------------------------------------ */
.search-field { position: relative; flex: 1; min-width: 180px; display: flex; }
.search-field > .icon {
  position: absolute;
  inset-inline-start: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--app-ink-faint);
  pointer-events: none;
  transition: color 0.2s ease;
}
.filter-bar .search-field input { flex: 1; padding-inline-start: 36px; }
.search-field:focus-within > .icon { color: var(--color-accent); }

/* --- Live badge: a pulsing dot ------------------------------------------------ */
.badge { display: inline-flex; align-items: center; gap: 6px; }
.badge-live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: app-pulse-dot 1.8s ease-out infinite;
}
@keyframes app-pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(22, 200, 197, 0.6); }
  80%, 100% { box-shadow: 0 0 0 7px rgba(22, 200, 197, 0); }
}

/* --- Form cards ----------------------------------------------------------------- */
/* No overflow:hidden here — it would clip the card's dropdown menu. */
.form-card { position: relative; }
.form-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  opacity: 0;
  transition: opacity 0.2s ease;
}
.form-card:hover { box-shadow: 0 18px 40px -22px rgba(22, 200, 197, 0.45); }
.form-card:hover::before { opacity: 1; }
.form-card-head { align-items: center; gap: 12px; }
.form-card-title { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.form-card-title h2 { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form-avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 13px;
  font-weight: 800;
  font-size: 1.1rem;
  color: #fff;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
  transition: transform 0.25s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.form-card:hover .form-avatar { transform: rotate(-6deg) scale(1.06); }
.avatar-0 { background: linear-gradient(135deg, #6c64ff, #16c8c5); }
.avatar-1 { background: linear-gradient(135deg, #3a6df0, #7cc4ff); }
.avatar-2 { background: linear-gradient(135deg, #7b4df0, #c4a8ff); }
.avatar-3 { background: linear-gradient(135deg, #e0782f, #f5c26b); }
.avatar-4 { background: linear-gradient(135deg, #d9466b, #ff8fa3); }
.avatar-5 { background: linear-gradient(135deg, #0f8c8c, #5fe0d0); }

.form-card-url > .icon { width: 15px; height: 15px; color: var(--app-ink-faint); }
.form-card-url code { flex: 1; }
.form-card-stats dt { display: inline-flex; align-items: center; gap: 5px; }
.form-card-stats dt .icon { width: 13px; height: 13px; }
.btn .icon { width: 16px; height: 16px; }
.btn-sm .icon { width: 15px; height: 15px; }
.limit-note { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.limit-note .icon { width: 15px; height: 15px; }

/* Menus with icons */
.menu-panel a,
.menu-panel button:not(.btn) { display: flex; align-items: center; gap: 9px; }
.menu-panel .icon { width: 16px; height: 16px; opacity: 0.85; }
.menu > summary .icon { width: 17px; height: 17px; }
.menu[open] > .menu-panel { animation: app-pop-in 0.16s ease both; transform-origin: top; }

/* --- Empty state ------------------------------------------------------------------ */
.empty-art {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin: 0 auto 18px;
  border-radius: 26px;
  color: #04140c;
  background: linear-gradient(135deg, var(--color-accent), #b8f5cf);
  box-shadow: 0 20px 44px -18px rgba(22, 200, 197, 0.6);
  animation: app-float 3.4s ease-in-out infinite;
}
.empty-art .icon { width: 38px; height: 38px; }

/* --- Buttons: a light sweep across primary calls to action --------------------------- */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-18deg);
  animation: app-shine 3.8s ease-in-out 1.2s infinite;
}
@keyframes app-shine {
  0% { left: -60%; }
  30%, 100% { left: 130%; }
}

/* --- Entrance: content rises in, cards one after another. "backwards", not "both": a
   finished animation that kept holding transform:none would override hover lifts. ------ */
.page-head, .plan-banner, .filter-bar, .panel, .subs-toolbar, .status-filter, .lead-table-wrap,
.builder-side .side-panel, .empty-state { animation: app-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.stat-row > *, .form-grid > *, .step-card, .template-grid > *, .submission-list > * {
  animation: app-rise 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.stat-row > :nth-child(2), .form-grid > :nth-child(2), .template-grid > :nth-child(2), .submission-list > :nth-child(2) { animation-delay: 0.06s; }
.stat-row > :nth-child(3), .form-grid > :nth-child(3), .template-grid > :nth-child(3), .submission-list > :nth-child(3) { animation-delay: 0.12s; }
.stat-row > :nth-child(4), .form-grid > :nth-child(4), .template-grid > :nth-child(4), .submission-list > :nth-child(4) { animation-delay: 0.18s; }
.form-grid > :nth-child(n + 5), .template-grid > :nth-child(n + 5), .submission-list > :nth-child(n + 5) { animation-delay: 0.24s; }
.step-card:nth-of-type(2) { animation-delay: 0.07s; }
.step-card:nth-of-type(n + 3) { animation-delay: 0.14s; }

@keyframes app-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes app-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes app-pop-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

/* --- Sidebar ------------------------------------------------------------------------ */
.app-nav-item { position: relative; transition: background-color 0.15s ease, color 0.15s ease; }
.app-nav-item .icon { width: 18px; height: 18px; transition: transform 0.2s ease; }
.app-nav-item:hover .icon { transform: scale(1.12); }
.app-nav-item.is-active::before {
  content: "";
  position: absolute;
  inset-inline-start: -10px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: var(--color-accent);
  box-shadow: 0 0 12px rgba(22, 200, 197, 0.7);
}

@media (prefers-reduced-motion: reduce) {
  .page-greeting, .page-head, .plan-banner, .filter-bar, .panel, .subs-toolbar, .status-filter,
  .lead-table-wrap, .builder-side .side-panel, .empty-state, .stat-row > *, .form-grid > *, .step-card,
  .template-grid > *, .submission-list > *, .plan-banner-icon, .empty-art, .btn-shine::after,
  .badge-live::before, .menu[open] > .menu-panel { animation: none !important; }
  .stat-card:hover, .form-card:hover .form-avatar, .app-nav-item:hover .icon { transform: none; }
}

/* ==========================================================================
   Builder
   Steps read as a numbered timeline; every question carries a coloured icon for
   its answer family so a long form can be scanned without reading.
   ========================================================================== */
.builder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 22px;
  align-items: start;
}
.builder-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.builder-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 24px; }

/* Answer families. Each sets its own colour and a matching tint. */
.ft-words { --ft: #7cc4ff; --ft-bg: rgba(124, 196, 255, 0.13); }
.ft-contact { --ft: #3ee07f; --ft-bg: rgba(62, 224, 127, 0.13); }
.ft-values { --ft: #f5c26b; --ft-bg: rgba(245, 194, 107, 0.14); }
.ft-choices { --ft: #b89cff; --ft-bg: rgba(184, 156, 255, 0.15); }
.ft-booking { --ft: #2fbf9f; --ft-bg: rgba(47, 191, 159, 0.14); }

.ft-badge {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: var(--ft-bg);
  color: var(--ft);
}
.ft-badge svg { width: 17px; height: 17px; }

/* --- Step cards as a timeline -------------------------------------------- */
.step-card {
  position: relative;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-md);
  padding: 20px;
  transition: border-color 0.18s ease;
}
.step-card:hover { border-color: #33443c; }
/* Connector from the previous card's number to this one's. */
.step-card + .step-card::before {
  content: "";
  position: absolute;
  inset-inline-start: 36px;
  top: -19px;
  width: 2px;
  height: 18px;
  background: linear-gradient(var(--app-border), var(--color-primary));
}
.step-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.step-num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: #04140c;
  font-weight: 800;
  font-size: 0.95rem;
  box-shadow: 0 0 0 4px rgba(22, 200, 197, 0.1);
}
.step-title { flex: 1; min-width: 0; }
.step-title h2 {
  font-size: 1.08rem;
  letter-spacing: -0.015em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.step-title h2.is-untitled { color: var(--app-ink-faint); font-weight: 600; font-style: italic; }
.step-tools { display: flex; align-items: center; gap: 4px; flex: none; }
.step-tools > form { display: flex; gap: 2px; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--radius-sm);
  background: none;
  border: 0;
  color: var(--app-ink-faint);
  cursor: pointer;
  list-style: none;
}
.icon-btn::-webkit-details-marker { display: none; }
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn:hover:not(:disabled) { background: var(--app-surface-2); color: var(--app-ink); }
.icon-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.step-settings { margin: 0 0 12px; padding-inline-start: 46px; }
.step-settings > summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--app-ink-faint);
  padding: 4px 0;
  list-style: none;
  display: inline-block;
}
.step-settings > summary::-webkit-details-marker { display: none; }
.step-settings > summary:hover { color: var(--color-accent); }
.inline-form {
  padding: 16px;
  border: 1px solid var(--app-border);
  border-radius: var(--radius-sm);
  background: var(--app-bg);
  margin-top: 8px;
}

.step-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1.5px dashed var(--app-border);
  border-radius: var(--radius-sm);
  color: var(--app-ink-soft);
  font-size: 0.9rem;
}
.step-empty-emoji { font-size: 1.4rem; line-height: 1; }

/* --- Question rows ------------------------------------------------------- */
.field-list { display: flex; flex-direction: column; gap: 8px; }
.field-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 12px;
  background: var(--app-bg);
  border: 1px solid var(--app-border);
  border-radius: 12px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.field-row:hover { border-color: #37483f; }
.field-row-main { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.field-label { font-size: 0.95rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  font-size: 0.78rem;
  color: var(--app-ink-faint);
  min-width: 0;
}
.field-meta > span + span::before { content: "·"; margin-inline: 7px; opacity: 0.7; }
.field-meta .is-required { color: var(--color-accent); }
.field-options-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280px;
}
.field-row-tools { display: flex; align-items: center; gap: 2px; flex: none; }
.field-row-tools > form { display: flex; gap: 2px; }
.field-edit .menu-panel { inset-inline-end: 0; }
.field-edit .menu-panel-wide { min-width: 360px; }

/* --- Quick add ------------------------------------------------------------ */
.add-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--app-border);
}
.add-bar-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--app-ink-faint);
  margin-inline-end: 2px;
}
/* The one-tap forms are just wrappers around their chip; the custom-question
   form nested inside <details> keeps its own box. */
.add-bar > form { display: contents; }
.quick-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 5px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--app-border);
  background: var(--app-surface-2);
  color: var(--app-ink);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: border-color 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}
[dir="rtl"] .quick-chip { padding: 5px 5px 5px 12px; }
.quick-chip::-webkit-details-marker { display: none; }
.quick-chip:hover { border-color: var(--color-accent); transform: translateY(-1px); }
.quick-chip:active { transform: translateY(0); }
.quick-chip .ft-badge { width: 24px; height: 24px; border-radius: 50%; }
.quick-chip .ft-badge svg { width: 13px; height: 13px; }
.quick-chip.is-custom {
  padding: 7px 14px;
  border-style: dashed;
  background: transparent;
  color: var(--color-accent);
}
.quick-chip.is-custom svg { width: 14px; height: 14px; }

.add-field[open] { flex-basis: 100%; }
.add-field[open] > .quick-chip.is-custom { border-style: solid; background: rgba(22, 200, 197, 0.1); }
.add-field .field-form {
  margin-top: 12px;
  padding: 18px;
  border: 1px solid var(--app-border);
  border-radius: var(--radius-md);
  background: var(--app-bg);
  animation: builder-open 0.22s ease both;
}
@keyframes builder-open {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.field-form .form-field { margin-bottom: 14px; }
.field-form-actions { display: flex; gap: 8px; margin-top: 4px; margin-bottom: 8px; }
.add-step-form { margin-top: 2px; }

/* --- Answer-type tiles ---------------------------------------------------- */
.type-picker { border: 0; margin: 0 0 14px; padding: 0; min-width: 0; }
.type-picker legend {
  padding: 0;
  margin-bottom: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--app-ink-soft);
}
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.type-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--app-border);
  border-radius: 11px;
  background: var(--app-surface);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--app-ink-soft);
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.type-tile:hover { border-color: #3a4c43; color: var(--app-ink); }
.type-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.type-tile-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 8px;
  background: var(--ft-bg);
  color: var(--ft);
}
.type-tile-icon svg { width: 15px; height: 15px; }
.type-tile-label { line-height: 1.2; }
.type-tile:has(input:checked) {
  border-color: var(--ft);
  background: var(--ft-bg);
  color: var(--app-ink);
  box-shadow: inset 0 0 0 1px var(--ft);
}
.type-tile:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.type-picker.is-compact .type-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.type-picker.is-compact .type-tile { flex-direction: column; gap: 5px; padding: 8px 4px; text-align: center; font-size: 0.74rem; }

/* The choices box only matters for dropdown and multiple choice, and a placeholder
   only for typed answers. Written as "hide when…" so a browser without :has()
   simply shows both. */
.field-form:has(.type-tile input:checked:not([value="Select"]):not([value="Radio"])) [data-options] { display: none; }
.field-form:has(.type-tile input:checked:is([value="Select"], [value="Radio"], [value="Checkbox"], [value="Date"], [value="Booking"])) [data-placeholder] { display: none; }

.choice-preview { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.choice-preview:empty { display: none; }
.choice-preview span {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgba(184, 156, 255, 0.15);
  color: #cdbbff;
  font-size: 0.78rem;
  font-weight: 600;
  animation: builder-open 0.18s ease both;
}

/* --- Side panels ----------------------------------------------------------- */
.side-panel {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-md);
  padding: 20px;
}
.side-panel h3 { font-size: 0.95rem; margin-bottom: 12px; }
.side-panel .form-hint { margin-bottom: 12px; }
.publish-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--app-bg);
  border: 1px solid var(--app-border);
  margin-bottom: 12px;
}
.publish-state.is-live { border-color: rgba(22, 200, 197, 0.4); }
.share-url {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  background: var(--app-bg);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
}
.share-url code {
  font-size: 0.78rem;
  color: var(--app-ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.side-meta { margin-top: 14px; font-size: 0.84rem; color: var(--app-ink-soft); }
.side-meta a { color: var(--color-accent); }

/* ==========================================================================
   New form — starter templates
   ========================================================================== */
.new-form-label {
  padding: 0;
  margin-bottom: 12px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--app-ink-faint);
}
.template-picker { border: 0; margin: 0 0 22px; padding: 0; min-width: 0; }
.template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.template-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px 16px;
  border: 1px solid var(--app-border);
  border-radius: var(--radius-md);
  background: var(--app-surface);
  cursor: pointer;
  transition: border-color 0.16s ease, transform 0.16s ease, background-color 0.16s ease;
}
.template-tile:hover { border-color: #3a4c43; transform: translateY(-2px); }
.template-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.template-emoji {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  border-radius: 13px;
  background: var(--app-surface-2);
  font-size: 1.45rem;
  line-height: 1;
  transition: transform 0.2s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.template-tile:hover .template-emoji { transform: rotate(-8deg) scale(1.08); }
.template-name { font-weight: 700; font-size: 0.98rem; color: var(--app-ink); }
.template-desc { font-size: 0.84rem; line-height: 1.45; color: var(--app-ink-soft); }
.template-meta { margin-top: auto; padding-top: 8px; font-size: 0.75rem; font-weight: 600; color: var(--app-ink-faint); }
.template-tile.is-blank { border-style: dashed; background: transparent; }
.template-check {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--app-border);
  color: #04140c;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.template-check svg { width: 12px; height: 12px; opacity: 0; }
.template-tile:has(input:checked) {
  border-color: var(--color-accent);
  background: rgba(22, 200, 197, 0.07);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}
.template-tile:has(input:checked) .template-check { background: var(--color-accent); border-color: var(--color-accent); transform: scale(1.08); }
.template-tile:has(input:checked) .template-check svg { opacity: 1; }
.template-tile:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.new-form-details { margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .template-tile:hover, .template-tile:hover .template-emoji, .quick-chip:hover { transform: none; }
  .add-field .field-form, .choice-preview span { animation: none; }
}

/* ==========================================================================
   Submissions
   ========================================================================== */
.submission-list { display: flex; flex-direction: column; gap: 12px; }
.submission-wrap { position: relative; }
.submission-wrap .submission-delete {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
}
.submission-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-md);
  padding: 18px;
}
.submission-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.submission-form {
  display: block;
  font-weight: 600;
  font-size: 0.94rem;
  margin-bottom: 2px;
}
.submission-head time { font-size: 0.82rem; color: var(--app-ink-faint); }
.submission-state {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  margin-inline-end: 34px;
}
.submission-state.is-pending { background: var(--app-surface-2); color: var(--app-ink-faint); }
.submission-state.is-opened { background: rgba(22, 200, 197, 0.14); color: var(--color-accent); }

.answer-list { display: flex; flex-direction: column; gap: 8px; }
.answer-list > div {
  display: grid;
  grid-template-columns: minmax(120px, 220px) 1fr;
  gap: 14px;
  padding: 8px 0;
  border-top: 1px solid var(--app-border);
}
.answer-list > div:first-child { border-top: 0; padding-top: 0; }
.answer-list dt { font-size: 0.84rem; color: var(--app-ink-faint); }
.answer-list dd { margin: 0; font-size: 0.92rem; word-break: break-word; }

.submission-raw { margin-top: 14px; }
.submission-raw > summary {
  cursor: pointer;
  font-size: 0.84rem;
  color: var(--app-ink-soft);
  list-style: none;
}
.submission-raw > summary::-webkit-details-marker { display: none; }
.submission-raw > summary:hover { color: var(--color-accent); }
.submission-raw pre {
  margin: 12px 0 0;
  padding: 14px;
  background: var(--app-bg);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-sm);
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.85rem;
  color: var(--app-ink-soft);
  font-family: var(--font-sans);
}
.submission-raw-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.submission-state.is-saved { background: rgba(124, 196, 255, 0.13); color: #9fd3ff; }

.submission-receipt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--app-border);
  background: var(--app-bg);
  color: var(--app-ink-soft);
  font-size: 0.86rem;
  font-weight: 600;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.submission-receipt:hover { border-color: var(--color-accent); color: var(--app-ink); }
.submission-receipt .icon { width: 16px; height: 16px; }

/* Branch logic builder — rule cards and condition rows */
.rule-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rule-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--app-border);
  border-radius: var(--radius-md);
  background: var(--app-bg);
}
.rule-card.is-broken { border-color: rgba(245, 194, 107, 0.5); }
.rule-body { flex: 1; min-width: 0; }
.rule-headline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.rule-verb {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.rule-verb.is-show { background: rgba(22, 200, 197, 0.16); color: var(--color-accent); }
.rule-verb.is-hide { background: rgba(147, 163, 155, 0.18); color: var(--app-ink-soft); }
.rule-target { font-weight: 600; color: var(--app-ink); }
.rule-chip {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(124, 196, 255, 0.14);
  color: #9fd3ff;
  font-size: 0.72rem;
  font-weight: 600;
}
.rule-when { margin: 0 0 4px; font-size: 0.82rem; color: var(--app-ink-faint, var(--app-ink-soft)); }
.rule-clauses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rule-clauses li { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: 0.9rem; }
.clause-field { font-weight: 600; color: var(--app-ink); }
.clause-op { color: var(--app-ink-soft); }
.clause-value {
  padding: 1px 8px;
  border-radius: var(--radius-sm);
  background: var(--app-surface, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--app-border);
  color: var(--app-ink);
}
.rule-broken-note { margin: 6px 0 0; font-size: 0.82rem; color: #f5c26b; }

.logic-clauses { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.logic-clause { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; align-items: center; }
.logic-clause[hidden] { display: none !important; }
/* Condition rows aren't .form-field wrappers, so they need the control styling spelled out. */
.logic-clause select,
.logic-clause input {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: inherit;
  font-size: 0.92rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.app-body .logic-clause select,
.app-body .logic-clause input {
  background: var(--app-bg);
  border-color: var(--app-border);
  color: var(--app-ink);
}
.logic-clause select:focus,
.logic-clause input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(22, 200, 197, 0.16);
}
.logic-clause input[hidden] { display: none !important; }
/* The full-width header needs about 870px for brand + nav + language + auth buttons. Below that
   it used to overflow rather than collapse, because the drawer only started at 720px — so tablets
   and small laptops got a broken bar. The drawer now takes over while there is still room. */
@media (max-width: 900px) {
  /* The drawer: nav links, language and the auth buttons all live in here, so the bar itself
     only ever holds the logo and the toggle. */
  .header-collapse {
    display: none;
    position: absolute;
    top: 70px;
    inset-inline: 0;
    flex-direction: column;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 12px 24px rgba(9, 30, 20, 0.09);
    padding: 8px 22px 18px;
    max-height: calc(100svh - 70px);
    overflow-y: auto;
  }
  .nav-toggle-input:checked ~ .header-collapse { display: flex; }

  .site-nav {
    position: static;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
  }
  .site-nav a { padding: 12px 0; }

  .header-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
  }
  /* Dashboard / Log in are useful in the drawer — they were hidden only because the bar was full. */
  .header-actions .btn-ghost {
    display: inline-flex;
    justify-content: center;
    border: 1px solid var(--color-border);
  }
  .header-actions .btn { width: 100%; justify-content: center; }
  .header-actions form { width: 100%; }
  .header-actions .lang-switcher { width: 100%; }
  .header-actions .lang-select { width: 100%; }

  .nav-toggle {
    display: flex;
    flex: none;                 /* the bug: as a flex item it was shrinking to 0 width */
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 40px; height: 40px;
    margin-inline-start: auto;
    cursor: pointer;
  }
  .nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    margin-inline: auto;
    background: var(--color-ink);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.15s ease;
  }
  /* Hamburger turns into a close cross while the drawer is open. */
  .nav-toggle-input:checked ~ .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle-input:checked ~ .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav-toggle-input:checked ~ .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .header-inner { position: relative; gap: 12px; }
  .brand { min-width: 0; }
}

@media (max-width: 720px) {
  .logic-clause { grid-template-columns: 1fr; }
}

/* Abandoned-lead recovery — partial submissions, marked clearly as not sent */
.drafts-panel {
  margin: 4px 0 26px;
  padding: 18px;
  border: 1px solid rgba(245, 194, 107, 0.35);
  border-radius: var(--radius-lg, 18px);
  background: rgba(245, 194, 107, 0.06);
}
.drafts-head h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 2px;
  font-size: 1.05rem;
}
.drafts-head h2 .icon { width: 18px; height: 18px; color: #e0a94a; }
.drafts-count {
  min-width: 22px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(245, 194, 107, 0.2);
  color: #f5c26b;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
}
.drafts-head p { margin: 0 0 14px; color: var(--app-ink-soft); font-size: 0.9rem; }
.drafts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.draft-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--app-border);
  border-radius: var(--radius-md);
  background: var(--app-surface, var(--app-bg));
}
.draft-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.draft-card-head time { font-size: 0.82rem; color: var(--app-ink-faint, var(--app-ink-soft)); }
.draft-badge {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(245, 194, 107, 0.15);
  color: #f5c26b;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.draft-progress { margin: 0; font-size: 0.82rem; color: var(--app-ink-soft); font-variant-numeric: tabular-nums; }
.draft-empty { margin: 0; font-size: 0.88rem; color: var(--app-ink-faint, var(--app-ink-soft)); font-style: italic; }
.draft-dismiss { margin-top: auto; }
/* Narrow cards: stack label over value rather than the two-column submission layout. */
.draft-card .answer-list > div { grid-template-columns: 1fr; gap: 2px; }
.draft-card .answer-list dd { font-weight: 600; }

/* ==========================================================================
   Lead table (Premium mini CRM)
   ========================================================================== */
/* Pipeline colours, shared by the filter chips, the row accent and the status select. */
.status-new { --st: #7cc4ff; --st-bg: rgba(124, 196, 255, 0.14); }
.status-contacted { --st: #f5c26b; --st-bg: rgba(245, 194, 107, 0.15); }
.status-won { --st: #3ee07f; --st-bg: rgba(62, 224, 127, 0.14); }
.status-lost { --st: #93a39b; --st-bg: rgba(147, 163, 155, 0.14); }

.subs-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.subs-toolbar .filter-bar { flex: 1; margin-bottom: 0; min-width: 240px; }
.view-switch {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--app-border);
  border-radius: var(--radius-sm);
  background: var(--app-surface);
}
.view-switch a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--app-ink-soft);
}
.view-switch a svg { width: 15px; height: 15px; }
.view-switch a:hover { color: var(--app-ink); }
.view-switch a.is-active { background: var(--app-surface-2); color: var(--app-ink); box-shadow: inset 0 0 0 1px var(--app-border); }
.view-switch .badge { font-size: 0.66rem; padding: 2px 7px; }

.status-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.status-filter a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  color: var(--app-ink-soft);
  font-size: 0.84rem;
  font-weight: 600;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.status-filter a:hover { border-color: var(--st, #3a4c43); color: var(--app-ink); }
.status-filter a span { font-family: var(--font-mono); font-size: 0.78rem; color: var(--app-ink-faint); }
.status-filter a i { width: 8px; height: 8px; border-radius: 50%; background: var(--st); }
.status-filter a.is-active {
  border-color: var(--st, var(--color-accent));
  background: var(--st-bg, rgba(22, 200, 197, 0.1));
  color: var(--app-ink);
}

.lead-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--app-border);
  border-radius: var(--radius-md);
  background: var(--app-surface);
}
.lead-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.88rem;
}
.lead-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 11px 14px;
  text-align: start;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--app-ink-faint);
  background: var(--app-surface-2);
  border-bottom: 1px solid var(--app-border);
}
.lead-table td {
  padding: 10px 14px;
  vertical-align: middle;
  border-bottom: 1px solid var(--app-border);
  max-width: 260px;
}
.lead-table tbody tr:last-child td { border-bottom: 0; }
.lead-table tbody tr { transition: background-color 0.12s ease; }
.lead-table tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
/* A thin pipeline-coloured edge on each row's leading side. */
.lead-table tbody td:first-child { box-shadow: inset 3px 0 0 var(--st); }
[dir="rtl"] .lead-table tbody td:first-child { box-shadow: inset -3px 0 0 var(--st); }

.lead-when { white-space: nowrap; font-family: var(--font-mono); font-size: 0.8rem; color: var(--app-ink-soft); }
.lead-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-empty { color: var(--app-ink-faint); }
.lead-contact { color: var(--color-accent); font-weight: 600; white-space: nowrap; }
.lead-contact:hover { text-decoration: underline; }

.status-select {
  appearance: none;
  padding: 5px 28px 5px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background-color: var(--st-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239db0a6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 12px;
  color: var(--st);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
[dir="rtl"] .status-select { padding: 5px 11px 5px 28px; background-position: left 9px center; }
.status-select:hover { border-color: var(--st); }
.status-select:focus-visible { outline: 2px solid var(--st); outline-offset: 2px; }
.status-select option { background: var(--app-surface-2); color: var(--app-ink); }
.lead-status form { display: flex; align-items: center; gap: 6px; }

.lead-note { min-width: 170px; }
.note-cell > summary { list-style: none; cursor: pointer; }
.note-cell > summary::-webkit-details-marker { display: none; }
.note-add { font-size: 0.82rem; font-weight: 600; color: var(--app-ink-faint); }
.note-add:hover { color: var(--color-accent); }
.note-text {
  display: block;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--app-ink-soft);
}
.note-cell[open] .note-text { white-space: normal; }
.note-form { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 8px; }
.note-form textarea {
  width: 240px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--app-border);
  background: var(--app-bg);
  color: var(--app-ink);
  font: inherit;
  font-size: 0.85rem;
  resize: vertical;
}
.note-form textarea:focus { outline: none; border-color: var(--color-accent); }
.lead-actions { width: 1%; }

/* What a free account sees when it asks for the table. */
.crm-teaser {
  max-width: 560px;
  margin: 10px auto 0;
  padding: 34px 30px;
  text-align: center;
  border: 1px solid var(--app-border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(24rem 12rem at 50% 0%, rgba(22, 200, 197, 0.12), transparent 70%),
    var(--app-surface);
}
.crm-teaser-emoji { display: block; font-size: 2.2rem; margin-bottom: 12px; }
.crm-teaser h2 { font-size: 1.25rem; letter-spacing: -0.02em; }
.crm-teaser p { margin: 10px auto 18px; color: var(--app-ink-soft); max-width: 44ch; }
.crm-teaser ul {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 22px;
  text-align: start;
}
.crm-teaser li {
  position: relative;
  padding-inline-start: 26px;
  color: var(--app-ink);
  font-size: 0.92rem;
}
.crm-teaser li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  color: var(--color-accent);
  font-weight: 800;
}

/* ==========================================================================
   Form settings — delivery mode
   ========================================================================== */
.delivery-picker { border: 0; margin: 30px 0 0; padding: 0; min-width: 0; }
/* A <legend> doesn't pick up heading weight, so match the panel's h2 headings by hand. */
.delivery-picker legend { padding: 0; font-weight: 700; }
.delivery-tile {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 16px;
  margin-bottom: 10px;
  border: 1px solid var(--app-border);
  border-radius: var(--radius-md);
  background: var(--app-bg);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.delivery-tile:hover { border-color: #3a4c43; }
.delivery-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.delivery-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 11px;
}
.delivery-icon svg { width: 20px; height: 20px; }
.delivery-icon.is-wa { background: rgba(22, 200, 197, 0.14); color: var(--color-accent); }
.delivery-icon.is-table { background: rgba(124, 196, 255, 0.13); color: #7cc4ff; }
.delivery-text { display: flex; flex-direction: column; gap: 4px; }
.delivery-text strong { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.95rem; color: var(--app-ink); }
.delivery-text > span { font-size: 0.85rem; line-height: 1.45; color: var(--app-ink-soft); }
.delivery-tile:has(input:checked) {
  border-color: var(--color-accent);
  background: rgba(22, 200, 197, 0.06);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}
.delivery-tile:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.delivery-tile.is-locked { cursor: not-allowed; opacity: 0.6; }
.delivery-tile.is-locked:hover { border-color: var(--app-border); }

/* Booking availability — weekday toggles (app shell) */
.weekday-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.weekday { cursor: pointer; }
.weekday input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.weekday span {
  display: grid;
  place-items: center;
  min-width: 46px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--app-border);
  background: var(--app-bg);
  color: var(--app-ink-soft);
  font-size: 0.88rem;
  font-weight: 600;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.weekday:hover span { border-color: #3a4c43; color: var(--app-ink); }
.weekday:has(input:checked) span {
  border-color: var(--color-accent);
  background: rgba(22, 200, 197, 0.14);
  color: var(--app-ink);
}
.weekday:has(input:focus-visible) span { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Toggle switch — enable/require rows (app shell) */
.switch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 6px 0;
  margin: 4px 0;
}
.switch-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track {
  flex: none;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: var(--app-border);
  padding: 3px;
  transition: background-color 0.2s ease;
}
.switch-thumb {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.switch-row:has(input:checked) .switch-track { background: var(--color-accent); }
.switch-row:has(input:checked) .switch-thumb { transform: translateX(18px); }
.switch-row:has(input:focus-visible) .switch-track { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.switch-label { color: var(--app-ink); font-weight: 600; font-size: 0.95rem; }
[dir="rtl"] .switch-row:has(input:checked) .switch-thumb { transform: translateX(-18px); }

/* Bit payment config (app shell) */
.pay-fields {
  margin-top: 10px;
  padding: 16px;
  border: 1px solid var(--app-border);
  border-radius: var(--radius-md);
  background: var(--app-bg);
  animation: app-rise 0.25s ease both;
}

/* Public form — live booking slots (light surface) */
.pf-slots { display: flex; flex-direction: column; gap: 18px; }
.pf-slot-day { display: flex; flex-direction: column; gap: 9px; }
.pf-slot-date {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-ink);
  position: sticky;
  top: 0;
}
.pf-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.pf-slot { cursor: pointer; }
.pf-slot input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pf-slot span {
  display: grid;
  place-items: center;
  padding: 12px 8px;
  border-radius: 12px;
  border: 2px solid var(--color-border);
  background: #fbfdfc;
  font-size: 0.98rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.12s ease;
}
.pf-slot:hover span { border-color: #c7c4ff; transform: translateY(-1px); }
.pf-slot:has(input:checked) span {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}
.pf-slot:has(input:focus-visible) span { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.pf-slots-tz { margin-top: 12px; font-size: 0.82rem; color: var(--color-ink-faint); }
.pf-slots-empty {
  padding: 20px;
  text-align: center;
  border: 1.5px dashed var(--color-border);
  border-radius: 14px;
  color: var(--color-ink-soft);
  font-size: 0.95rem;
}
@media (hover: none) { .pf-slot:hover span { transform: none; } }

/* Public form — Bit payment prompt (light surface) */
.pf-pay-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 26px 20px 22px;
  border-radius: 18px;
  border: 1.5px solid var(--color-border);
  background:
    radial-gradient(24rem 12rem at 50% -20%, rgba(22, 200, 197, 0.14), transparent 70%),
    #fbfdfc;
  text-align: center;
  overflow: hidden;
}
.pf-pay-badge {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  margin-bottom: 2px;
}
.pf-pay-badge .icon { width: 24px; height: 24px; }
.pf-pay-caption {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
}
.pf-pay-total {
  margin: 0;
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  transition: transform 0.18s ease;
}
.pf-pay-total.is-bumped { transform: scale(1.08); }
.pf-pay-to { margin: 2px 0 0; font-size: 0.92rem; color: var(--color-ink-soft); }

.pf-bit-btn {
  margin-top: 16px;
  background: #0a7d3c;
  color: #fff;
  gap: 8px;
}
.pf-bit-btn:hover { background: #0b8c43; }
.pf-bit-btn .icon { width: 20px; height: 20px; }
.pf-pay-steps {
  margin: 8px 0 0;
  font-size: 0.84rem;
  text-align: center;
  color: var(--color-ink-faint);
}

/* Receipt upload */
.pf-upload {
  display: block;
  position: relative;
  cursor: pointer;
  border: 1.5px dashed var(--color-border);
  border-radius: 16px;
  background: #fbfdfc;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.pf-upload:hover { border-color: #c7c4ff; }
.pf-upload:has(input:focus-visible) { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.pf-upload input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.pf-upload-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 22px 16px;
  text-align: center;
  pointer-events: none;
}
.pf-upload-icon { width: 26px; height: 26px; color: var(--color-primary); }
.pf-upload-text { font-weight: 600; color: var(--color-ink); font-size: 0.96rem; }
.pf-upload-hint { font-size: 0.8rem; color: var(--color-ink-faint); }
.pf-upload.has-file { border-style: solid; border-color: var(--color-primary); background: var(--color-primary-light); }
.pf-upload.has-file .pf-upload-icon { color: var(--color-primary-dark); }
.pf-upload-preview {
  display: block;
  max-height: 220px;
  width: auto;
  margin: 0 auto 12px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

/* ==========================================================================
   Public form — the screen a business's customers actually see.
   Mobile-first, one step at a time, deliberately more playful than the app.
   ========================================================================== */
.pf-body {
  background: var(--color-bg-soft);
  background-image:
    radial-gradient(60rem 40rem at 12% -10%, rgba(22, 200, 197, 0.16), transparent 60%),
    radial-gradient(50rem 36rem at 105% 10%, rgba(108, 100, 255, 0.14), transparent 62%),
    radial-gradient(40rem 40rem at 50% 115%, rgba(22, 200, 197, 0.12), transparent 60%);
  background-attachment: fixed;
  min-height: 100vh;
  min-height: 100dvh;
}
.pf-viewport {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 16px 44px;
  /* Confetti flies wider than a phone screen; clip rather than scroll. */
  overflow-x: clip;
}
.pf-shell {
  position: relative;
  width: 100%;
  max-width: 580px;
  background: var(--color-bg);
  border: 1px solid rgba(226, 235, 230, 0.9);
  border-radius: 26px;
  padding: 30px 26px 26px;
  box-shadow: 0 30px 70px -24px rgba(25, 28, 54, 0.28), 0 2px 6px rgba(25, 28, 54, 0.04);
  animation: pf-card-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
/* A thin brand ribbon along the top edge of the card. */
.pf-shell::before {
  content: "";
  position: absolute;
  inset-inline: 26px;
  top: 0;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}
.pf-shell-center { text-align: center; }

/* The owner trying out a draft: make it unmistakable that nothing here is live. */
.pf-preview {
  display: grid;
  gap: 2px;
  margin-bottom: 18px;
  padding: 12px 16px;
  border: 1px dashed #e0a43a;
  border-radius: var(--radius-md);
  background: #fff6e5;
  color: #5c3d05;
  font-size: 0.9rem;
  line-height: 1.45;
}
.pf-preview strong { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }

/* --- Chat style (Form.Style = Chat; built by startChat in site.js) ----------------------------- */
/* A light assistant-style conversation: the business on the left with an avatar and soft bubbles,
   the respondent's answers as solid pills on the right, quick replies inside the question bubble. */
.pf-shell.is-chat { display: flex; flex-direction: column; padding: 0; }
.pf-shell.is-chat::before { display: none; }
.pf-shell.is-chat .pf-preview,
.pf-shell.is-chat .pf-alert { margin: 12px 16px 0; }

.pf-shell.is-chat .pf-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 12px;
  align-items: center;
  padding: 14px 18px 0;
  border-radius: 26px 26px 0 0;
  background: var(--color-bg);
}
.pf-shell.is-chat .pf-badge {
  grid-row: 1 / span 2;
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: 50%;
  box-shadow: none;
  animation: none;
}
.pf-shell.is-chat .pf-badge .icon { width: 20px; height: 20px; }
.pf-shell.is-chat .pf-header h1 {
  grid-column: 2;
  grid-row: 1;
  overflow: hidden;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pf-shell.is-chat .pf-header p { display: none; }
.pf-chat-status { grid-column: 2; grid-row: 2; min-height: 1.1em; font-size: 0.78rem; color: var(--color-ink-faint); }
.pf-chat-restart {
  display: grid;
  grid-column: 3;
  grid-row: 1 / span 2;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
}
.pf-chat-restart:hover { background: var(--color-primary-dark); }
.pf-chat-restart svg { width: 17px; height: 17px; }
.pf-chat-progress {
  grid-column: 1 / -1;
  height: 3px;
  margin: 12px -18px 0;
  overflow: hidden;
  background: var(--color-border);
}
.pf-chat-progress i { display: block; width: 0; height: 100%; background: var(--color-primary); transition: width 0.35s ease; }

.pf-form.is-chat { display: flex; flex: 1; flex-direction: column; margin-top: 0; }
.pf-form.is-chat > .pf-step,
.pf-form.is-chat > .pf-nav,
.pf-form.is-chat > .pf-key-hint { display: none !important; }

.pf-chat-log {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  min-height: 320px;
  padding: 22px 16px 18px;
  background: var(--color-bg);
}
.pf-chat-row { display: flex; align-items: flex-start; gap: 10px; }
.pf-chat-row.is-user { justify-content: flex-end; }
.pf-chat-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: #fff;
}
.pf-chat-avatar svg { width: 18px; height: 18px; }
.pf-chat-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; max-width: 84%; }
.pf-chat-row.is-user .pf-chat-stack { align-items: flex-end; }
.pf-chat-bubble {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 100%;
  padding: 10px 16px;
  border: 0;
  border-radius: 20px;
  background: #f2f4f3;
  color: var(--color-ink);
  font: inherit;
  font-size: 0.97rem;
  line-height: 1.45;
  text-align: start;
}
.pf-chat-bubble.is-new { animation: pf-chat-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.pf-chat-row.is-user .pf-chat-bubble {
  padding: 10px 20px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 500;
  cursor: pointer;
}
.pf-chat-row.is-user .pf-chat-bubble:hover { background: var(--color-primary-dark); }
.pf-chat-row.is-user .pf-chat-bubble:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.pf-chat-row.is-user .pf-chat-bubble.is-muted {
  background: transparent;
  color: var(--color-ink-faint);
  box-shadow: inset 0 0 0 1.5px var(--color-border);
  font-style: italic;
}
.pf-chat-title { font-weight: 700; }
.pf-chat-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.pf-chat-note { font-size: 0.8rem; color: var(--color-ink-faint); }
.pf-chat-time { padding-inline: 6px; font-size: 0.72rem; color: var(--color-ink-faint); }
.pf-chat-image { display: block; max-width: 220px; max-height: 220px; border-radius: 12px; object-fit: cover; }
.pf-chat-bubble .pf-pay-card { margin: 6px 0 2px; }
.pf-chat-bubble .pf-bit-btn { margin-top: 6px; }
.pf-chat-bubble .pf-pay-steps { margin: 4px 0 0; font-size: 0.8rem; }

.pf-chat-dots { flex-direction: row; gap: 4px; padding: 14px 16px; }
.pf-chat-dots i { width: 7px; height: 7px; border-radius: 50%; background: #9aa9a2; animation: pf-chat-dot 1s ease-in-out infinite; }
.pf-chat-dots i:nth-child(2) { animation-delay: 0.15s; }
.pf-chat-dots i:nth-child(3) { animation-delay: 0.3s; }

/* Quick replies, inside the question's bubble. */
.pf-chat-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pf-chat-options .pf-field { width: 100%; margin: 0; }
.pf-chat-options .pf-label,
.pf-chat-options .pf-choice-key,
.pf-chat-options .pf-choice-mark,
.pf-chat-options .pf-slots-empty { display: none; }
.pf-chat-options .pf-choice-group { flex-flow: row wrap; gap: 8px; }
.pf-chat-options .pf-choice,
.pf-chat-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  padding: 8px 20px 8px 14px;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-primary-dark);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  box-shadow: none;
  cursor: pointer;
}
/* The little radio dot each quick reply leads with. */
.pf-chat-options .pf-choice::before,
.pf-chat-chip::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #dfe3e1;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.pf-chat-options .pf-choice-text { flex: none; font-weight: 500; }
.pf-chat-options .pf-choice:hover,
.pf-chat-chip:hover { background: var(--color-primary-light); transform: none; }
.pf-chat-options .pf-choice:hover::before,
.pf-chat-chip:hover::before { background: var(--color-primary); box-shadow: inset 0 0 0 3px #fff; }
.pf-chat-options .pf-choice:has(input:checked) { background: var(--color-primary); color: #fff; }
.pf-chat-options .pf-choice:has(input:checked)::before { background: #fff; box-shadow: inset 0 0 0 3px var(--color-primary); }
.pf-chat-chip.is-quiet { border-color: var(--color-border); color: var(--color-ink-soft); }
.pf-chat-options .pf-slots { max-height: 300px; overflow-y: auto; }

/* The answer bar, pinned to the bottom. */
.pf-chat-composer {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 26px 26px;
  background: var(--color-bg);
}
.pf-chat-idle { flex: 1; min-width: 0; padding: 10px 2px; font-size: 1rem; color: var(--color-ink-faint); }
.pf-chat-composer > .pf-field { flex: 1; min-width: 0; margin: 0; }
.pf-chat-composer .pf-label,
.pf-chat-composer .pf-input-icon { display: none; }
.pf-form.is-chat .pf-chat-composer .pf-field input,
.pf-form.is-chat .pf-chat-composer .pf-field select,
.pf-form.is-chat .pf-chat-composer .pf-field textarea,
.pf-form.is-chat .pf-chat-composer .pf-field input:focus,
.pf-form.is-chat .pf-chat-composer .pf-field select:focus,
.pf-form.is-chat .pf-chat-composer .pf-field textarea:focus,
.pf-form.is-chat .pf-chat-composer .pf-field .is-filled {
  padding: 10px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 1rem;
}
.pf-form.is-chat .pf-chat-composer .pf-field textarea { min-height: 44px; resize: none; }
.pf-chat-send {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
}
.pf-chat-send:hover:not(:disabled) { background: var(--color-primary-light); }
.pf-chat-send:disabled { color: #b9c5bf; cursor: default; }
.pf-chat-send svg { width: 22px; height: 22px; }
[dir="rtl"] .pf-chat-send svg { transform: scaleX(-1); }
.pf-chat-error { flex-basis: 100%; order: -1; margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--color-danger); }
.pf-chat-composer .pf-submit { flex-basis: 100%; margin: 4px 0 0; }

@keyframes pf-chat-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes pf-chat-dot {
  0%, 60%, 100% { opacity: 0.5; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .pf-chat-bubble.is-new, .pf-chat-dots i { animation: none; }
  .pf-chat-progress i { transition: none; }
}
@media (max-width: 720px) {
  .pf-shell.is-chat .pf-header,
  .pf-chat-composer { border-radius: 0; }
  .pf-chat-log { min-height: 0; }
}

@keyframes pf-card-in {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.pf-header h1 {
  font-size: clamp(1.5rem, 5.2vw, 1.95rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
  font-weight: 800;
}
.pf-header p { margin-top: 9px; color: var(--color-ink-soft); font-size: 0.97rem; }
/* A small branded mark above the title, gently breathing. */
.pf-badge {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  box-shadow: 0 10px 24px -8px rgba(108, 100, 255, 0.55);
  animation: pf-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) 0.15s both, pf-breathe 3.6s ease-in-out 0.9s infinite;
}
.pf-badge .icon { width: 23px; height: 23px; }
@keyframes pf-breathe {
  0%, 100% { box-shadow: 0 10px 24px -8px rgba(108, 100, 255, 0.55), 0 0 0 0 rgba(22, 200, 197, 0.35); }
  50% { box-shadow: 0 10px 24px -8px rgba(108, 100, 255, 0.55), 0 0 0 9px rgba(22, 200, 197, 0); }
}

/* --- Progress ------------------------------------------------------------ */
.pf-progress { margin: 24px 0 4px; display: flex; align-items: center; gap: 12px; }
.pf-progress[hidden] { display: none; }
.pf-progress-main { flex: 1; min-width: 0; }
/* The round back button and the "2/5" counter belong to the phone app bar only. */
.pf-top-back, .pf-counter { display: none; }
.pf-body { -webkit-tap-highlight-color: transparent; }
.pf-segments { display: flex; gap: 6px; }
.pf-seg {
  flex: 1;
  height: 7px;
  border-radius: var(--radius-pill);
  background: #e8efea;
  overflow: hidden;
}
.pf-seg i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pf-seg.is-done i, .pf-seg.is-current i { width: 100%; }
/* A light sweep across the segment you're on. */
.pf-seg.is-current { position: relative; }
.pf-seg.is-current::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  transform: translateX(-100%);
  animation: pf-shimmer 2.4s ease-in-out 0.6s infinite;
}
@keyframes pf-shimmer {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

.pf-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.pf-progress-label {
  font-size: 0.8rem;
  color: var(--color-ink-faint);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.pf-progress-badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary-dark);
  background: var(--color-accent-soft);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  animation: pf-pop 0.35s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
@keyframes pf-pop {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: none; }
}

.pf-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 13px 15px;
  border-radius: var(--radius-md);
  background: #fdecea;
  color: #92291c;
  font-size: 0.9rem;
  font-weight: 500;
}
.pf-alert svg { width: 18px; height: 18px; flex: none; }

/* --- Steps --------------------------------------------------------------- */
.pf-form { margin-top: 24px; }
.pf-step { border: 0; margin: 0; padding: 0; min-width: 0; }
/* A step slides in from the side you're heading towards — the end side going forward, the
   start side going back — and the directions swap for right-to-left forms. */
.pf-step.is-entering.is-forward { animation: pf-from-right 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.pf-step.is-entering.is-back { animation: pf-from-left 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
[dir="rtl"] .pf-step.is-entering.is-forward { animation-name: pf-from-left; }
[dir="rtl"] .pf-step.is-entering.is-back { animation-name: pf-from-right; }
@keyframes pf-from-right {
  from { opacity: 0; transform: translateX(32px); }
  to { opacity: 1; transform: none; }
}
@keyframes pf-from-left {
  from { opacity: 0; transform: translateX(-32px); }
  to { opacity: 1; transform: none; }
}
/* Questions rise in one after another. An element leaving display:none restarts its
   animation, so this plays on first load and again each time a step comes on screen. */
.pf-step > .pf-field { animation: pf-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.pf-step > .pf-field:nth-of-type(2) { animation-delay: 0.07s; }
.pf-step > .pf-field:nth-of-type(3) { animation-delay: 0.14s; }
.pf-step > .pf-field:nth-of-type(4) { animation-delay: 0.21s; }
.pf-step > .pf-field:nth-of-type(5) { animation-delay: 0.28s; }
.pf-step > .pf-field:nth-of-type(n + 6) { animation-delay: 0.35s; }
@keyframes pf-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.pf-step-legend { display: flex; flex-direction: column; gap: 8px; padding: 0; }
.pf-step-legend.is-untitled { display: none; }
.pf-step-title {
  font-size: 1.28rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.pf-step-desc { margin-top: 8px; color: var(--color-ink-soft); font-size: 0.95rem; }

/* --- Fields -------------------------------------------------------------- */
.pf-field { margin-top: 24px; }
/* Branch logic toggles [hidden]; state these explicitly so no author display rule outranks it. */
.pf-field[hidden], .pf-step[hidden], .pf-seg[hidden] { display: none !important; }
.pf-field.is-revealed { animation: pf-reveal 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes pf-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.pf-field.is-shaking { animation: pf-shake 0.4s ease; }
@keyframes pf-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}

.pf-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.pf-optional {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink-faint);
  background: var(--color-bg-soft);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
}

.pf-field input[type="text"],
.pf-field input[type="email"],
.pf-field input[type="tel"],
.pf-field input[type="number"],
.pf-field input[type="date"],
.pf-field select,
.pf-field textarea {
  width: 100%;
  padding: 15px 16px;
  font-size: 1.02rem;
  font-family: inherit;
  color: var(--color-ink);
  background: #fbfdfc;
  border: 2px solid var(--color-border);
  border-radius: 14px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.pf-field textarea { resize: vertical; min-height: 120px; line-height: 1.5; }

/* iOS WebKit — Safari and every other iPhone browser, Chrome included — sizes a date input
   from its native control and ignores width:100%, so in RTL it spilled past the screen edge.
   Drop the native appearance and size it like its siblings. */
.pf-date { position: relative; }
.pf-date input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: block;
  min-width: 0;
  max-width: 100%;
  /* Without its native appearance an empty iOS date input collapses; hold the height of
     the other inputs (two 15px paddings + two 2px borders + one line). */
  min-height: calc(1.2em + 34px);
  text-align: start;
}
.pf-date input[type="date"]::-webkit-date-and-time-value { margin: 0; text-align: start; }
/* Chrome's own calendar button: invisible and stretched over the whole field, so a tap
   anywhere opens the picker and only one icon ever shows. */
.pf-date input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
/* --- Input icons: every answer box leads with an icon for its answer type. --- */
.pf-input { position: relative; }
.pf-input > .pf-input-icon {
  position: absolute;
  inset-inline-start: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 19px;
  height: 19px;
  color: var(--color-ink-faint);
  pointer-events: none;
  /* Above the input: the date input is position:relative (for its picker overlay) and
     would otherwise paint over it. */
  z-index: 1;
  transition: color 0.2s ease, transform 0.25s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.pf-input.is-multiline > .pf-input-icon { top: 18px; transform: none; }
.pf-field .pf-input > input,
.pf-field .pf-input > select,
.pf-field .pf-input > textarea { padding-inline-start: 46px; }
.pf-input:focus-within > .pf-input-icon { color: var(--color-primary); transform: translateY(-50%) scale(1.15); }
.pf-input.is-multiline:focus-within > .pf-input-icon { transform: scale(1.15); }
.pf-input:has(> .is-filled) > .pf-input-icon { color: var(--color-primary); }
.pf-field input::placeholder,
.pf-field textarea::placeholder { color: #a8b8b0; }
.pf-field input:hover,
.pf-field textarea:hover,
.pf-field select:hover { border-color: #cfe0d6; }
.pf-field input:focus,
.pf-field select:focus,
.pf-field textarea:focus {
  outline: none;
  background: var(--color-bg);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-light);
}
/* A quiet nod that the answer registered. */
.pf-field input.is-filled,
.pf-field textarea.is-filled,
.pf-field select.is-filled { border-color: #bfe3ce; background: var(--color-bg); }

.pf-select { position: relative; }
.pf-select select {
  appearance: none;
  padding-inline-end: 44px;
  cursor: pointer;
}
.pf-select > .pf-chevron {
  position: absolute;
  inset-inline-end: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--color-ink-faint);
  pointer-events: none;
  transition: transform 0.2s ease;
}
.pf-select:focus-within > .pf-chevron { transform: translateY(-50%) rotate(180deg); color: var(--color-primary); }

/* --- Choices (radio + yes/no) -------------------------------------------- */
.pf-choice-group { display: flex; flex-direction: column; gap: 10px; }
.pf-choice {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 16px;
  border: 2px solid var(--color-border);
  border-radius: 14px;
  background: #fbfdfc;
  cursor: pointer;
  font-size: 1.01rem;
  transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.pf-choice:hover { border-color: #c7c4ff; background: var(--color-bg); transform: translateY(-1px); }
.pf-choice:active { transform: translateY(0); }
/* The native control stays in the a11y tree; the card is the visible target. */
.pf-choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.pf-choice-key {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 9px;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-ink-soft);
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.pf-choice-text { flex: 1; font-weight: 500; }
.pf-choice-mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  color: #fff;
  transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.pf-choice-mark svg { width: 14px; height: 14px; opacity: 0; transition: opacity 0.16s ease; }

.pf-choice:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgba(108, 100, 255, 0.08);
}
.pf-choice:has(input:checked) .pf-choice-key {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.pf-choice:has(input:checked) .pf-choice-mark {
  background: var(--color-primary);
  border-color: var(--color-primary);
  transform: scale(1.06);
  animation: pf-tick 0.4s cubic-bezier(0.2, 1.5, 0.4, 1);
}
@keyframes pf-tick {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1.06); }
}
.pf-choice:has(input:checked) .pf-choice-mark svg { opacity: 1; }
.pf-choice:has(input:focus-visible) {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* The single yes/no box reads better with the tick on the leading edge. */
.pf-choice-toggle .pf-choice-mark { order: -1; border-radius: 8px; }
.pf-choice-toggle .pf-choice-text { font-weight: 600; }

.pf-field.is-missing input,
.pf-field.is-missing select,
.pf-field.is-missing textarea,
.pf-field.is-missing .pf-choice { border-color: var(--color-danger); }
.pf-error {
  display: block;
  margin-top: 9px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--color-danger);
}

/* --- Navigation ---------------------------------------------------------- */
.pf-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
}
.pf-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ink-faint);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.pf-back:hover { color: var(--color-ink); background: var(--color-bg-soft); }
.pf-back svg { width: 17px; height: 17px; }
[dir="rtl"] .pf-back svg, [dir="rtl"] .pf-next svg { transform: scaleX(-1); }
.pf-next { flex: 1; border-radius: 14px; }
.pf-next svg { width: 18px; height: 18px; transition: transform 0.18s ease; }
.pf-next:hover svg { transform: translateX(3px); }
[dir="rtl"] .pf-next:hover svg { transform: scaleX(-1) translateX(3px); }

.pf-submit { margin-top: 30px; }
.pf-submit .btn { border-radius: 14px; padding-block: 17px; font-size: 1.04rem; }
/* The finish button breathes a soft ring in its own colour — the one thing left to tap. */
.pf-submit .btn { --glow: 108, 100, 255; animation: pf-glow 2.6s ease-in-out 1s infinite; }
.pf-submit .btn-whatsapp { --glow: 22, 200, 197; }
/* Sending: the label gives way to a spinner and the button stops taking taps. */
.pf-submit .btn.is-sending {
  position: relative;
  pointer-events: none;
  color: transparent !important;
  animation: none;
}
.pf-submit .btn.is-sending::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  animation: pf-spin 0.7s linear infinite;
}
@keyframes pf-spin { to { transform: rotate(360deg); } }

/* On touch screens there's no hover: give cards a press-in instead of a lift that sticks. */
@media (hover: none) {
  .pf-choice:hover { transform: none; }
  .pf-choice:active { transform: scale(0.98); }
  .pf-next:active, .pf-submit .btn:active { transform: scale(0.98); }
}
@keyframes pf-glow {
  0%, 100% { box-shadow: 0 8px 22px -10px rgba(var(--glow), 0.7), 0 0 0 0 rgba(var(--glow), 0.4); }
  50% { box-shadow: 0 8px 22px -10px rgba(var(--glow), 0.7), 0 0 0 10px rgba(var(--glow), 0); }
}

.pf-key-hint {
  margin-top: 14px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--color-ink-faint);
}
.pf-key-hint kbd {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 2px 7px;
  margin-inline-end: 4px;
}

.pf-footer {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.pf-footer .lang-select { font-size: 0.8rem; padding-block: 6px; }
.pf-branding {
  margin: 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--color-ink-faint);
}
.pf-branding a { color: var(--color-primary); font-weight: 600; }

/* --- Done screen --------------------------------------------------------- */
.pf-done-mark {
  width: 84px;
  height: 84px;
  margin: 4px auto 20px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  display: grid;
  place-items: center;
  animation: pf-pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.pf-done-mark svg { width: 52px; height: 52px; }
.pf-done-circle {
  stroke: var(--color-primary);
  stroke-width: 2.5;
  stroke-dasharray: 152;
  stroke-dashoffset: 152;
  animation: pf-draw 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.15s forwards;
}
.pf-done-check {
  stroke: var(--color-primary);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: pf-draw 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.6s forwards;
}
@keyframes pf-draw { to { stroke-dashoffset: 0; } }

.pf-shell-center h1 { font-size: 1.6rem; letter-spacing: -0.03em; font-weight: 800; }
.pf-done-text { margin: 11px auto 26px; color: var(--color-ink-soft); max-width: 42ch; }
.pf-send-btn { animation: pf-pop 0.4s cubic-bezier(0.2, 1.3, 0.4, 1) 0.75s both; }
.pf-done-hint { margin-top: 15px; font-size: 0.85rem; color: var(--color-ink-faint); }
.pf-preview { margin-top: 24px; text-align: start; }
.pf-preview > summary {
  cursor: pointer;
  text-align: center;
  font-size: 0.87rem;
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: 13px;
}
.pf-shell-center .pf-branding { margin-top: 22px; }

/* Confetti: 14 spans fired from behind the tick, positioned by nth-child. */
.pf-confetti {
  position: absolute;
  inset-inline: 0;
  top: 40px;
  height: 1px;
  pointer-events: none;
}
.pf-confetti span {
  position: absolute;
  inset-inline-start: 50%;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  animation: pf-confetti 1.5s cubic-bezier(0.15, 0.6, 0.4, 1) 0.55s forwards;
}
.pf-confetti span:nth-child(3n) { background: var(--color-accent); }
.pf-confetti span:nth-child(3n + 1) { background: var(--color-primary); }
.pf-confetti span:nth-child(3n + 2) { background: #ffd166; }
.pf-confetti span:nth-child(4n) { width: 8px; height: 8px; border-radius: 50%; }
.pf-confetti span:nth-child(1) { --pf-x: -150px; --pf-r: -220deg; animation-delay: 0.55s; }
.pf-confetti span:nth-child(2) { --pf-x: 128px; --pf-r: 190deg; animation-delay: 0.62s; }
.pf-confetti span:nth-child(3) { --pf-x: -96px; --pf-r: 300deg; animation-delay: 0.58s; }
.pf-confetti span:nth-child(4) { --pf-x: 172px; --pf-r: -140deg; animation-delay: 0.68s; }
.pf-confetti span:nth-child(5) { --pf-x: -190px; --pf-r: 160deg; animation-delay: 0.6s; }
.pf-confetti span:nth-child(6) { --pf-x: 62px; --pf-r: -260deg; animation-delay: 0.72s; }
.pf-confetti span:nth-child(7) { --pf-x: -52px; --pf-r: 210deg; animation-delay: 0.65s; }
.pf-confetti span:nth-child(8) { --pf-x: 208px; --pf-r: -180deg; animation-delay: 0.57s; }
.pf-confetti span:nth-child(9) { --pf-x: -228px; --pf-r: 250deg; animation-delay: 0.7s; }
.pf-confetti span:nth-child(10) { --pf-x: 96px; --pf-r: -300deg; animation-delay: 0.63s; }
.pf-confetti span:nth-child(11) { --pf-x: -120px; --pf-r: 130deg; animation-delay: 0.75s; }
.pf-confetti span:nth-child(12) { --pf-x: 148px; --pf-r: -200deg; animation-delay: 0.59s; }
.pf-confetti span:nth-child(13) { --pf-x: -74px; --pf-r: 280deg; animation-delay: 0.78s; }
.pf-confetti span:nth-child(14) { --pf-x: 30px; --pf-r: -160deg; animation-delay: 0.66s; }
@keyframes pf-confetti {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.6); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--pf-x), 340px) rotate(var(--pf-r)) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .pf-shell, .pf-step.is-entering, .pf-progress-badge, .pf-done-mark, .pf-send-btn,
  .pf-badge, .pf-step > .pf-field, .pf-submit .btn:not(.is-sending), .pf-choice-mark, .pf-top-back { animation: none !important; }
  .pf-seg.is-current::after { display: none; }
  .pf-input > .pf-input-icon, .pf-select > .pf-chevron { transition: none; }
  .pf-confetti { display: none; }
  .pf-done-circle, .pf-done-check { animation: none; stroke-dashoffset: 0; }
  .pf-field.is-shaking { animation: none; }
  .pf-choice:hover { transform: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .builder { grid-template-columns: minmax(0, 1fr); }
  .builder-side { position: static; flex-direction: row; flex-wrap: wrap; }
  .builder-side .side-panel { flex: 1; min-width: 280px; }
}

@media (max-width: 900px) {
  /* On a phone the whole point of the hero — the clean message that comes out the other end —
     was landing ~350px below the fold. Compress the demo so the before AND after are both in the
     first view; the form mock only needs to show one question to make the point. */
  .hero-demo {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 6px;
    margin-top: 14px;
  }
  .demo-arrow { transform: rotate(90deg); }
  .demo-arrow svg { width: 30px; height: 16px; }
  .demo-chat { max-width: 340px; }
  .demo-chat-log { height: 200px; }
  /* The opening exchange costs vertical space on the very screen that was tuned to fit the whole
     story. Keep it to two short lines so the form below it still starts in the first view. */
  .demo-wa-start { max-width: 340px; padding: 10px; gap: 6px; }
  .demo-wa-start .wa-bubble { padding: 7px 10px 15px; }
  .demo-wa-start .wa-bubble pre { font-size: 0.76rem; }
  .demo-wa-note { font-size: 0.66rem; margin-top: 2px; }
  /* Stacked, the message would land below the fold. While the demo plays, show it where the eye already
     is instead: it pops up over the chat the moment "send" is tapped. Without JS it stays underneath. */
  .hero-demo.is-playing { position: relative; }
  .hero-demo.is-playing .demo-arrow { display: none; }
  .hero-demo.is-playing .demo-wa {
    position: absolute;
    bottom: 72px;
    left: 50%;
    z-index: 2;
    width: calc(100% - 32px);
    max-width: 320px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 16px) scale(0.95);
  }
  .hero-demo.is-playing .demo-wa.is-sent { opacity: 1; transform: translate(-50%, 0); }
  .demo-wa { width: 100%; }
  .footer-top { grid-template-columns: 1fr 1fr; }

  .app-shell { grid-template-columns: minmax(0, 1fr); }
  /* The closed drawer is display:none, not parked off-screen. iOS WebKit (every iPhone
     browser) counts a fixed element translated past the right edge as page width, so in RTL
     — where "off-screen" is the right edge — it zoomed the whole page out and the menu
     appeared mid-page. Opening slides it in from its own edge instead. */
  .app-sidebar {
    display: none;
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: 244px;
    height: auto;
    overflow-y: auto;
    z-index: 200;
  }
  .app-sidebar-toggle-input:checked ~ .app-sidebar {
    display: flex;
    box-shadow: var(--shadow-lg);
    animation: app-drawer-from-left 0.22s ease both;
  }
  [dir="rtl"] .app-sidebar-toggle-input:checked ~ .app-sidebar { animation-name: app-drawer-from-right; }
  @keyframes app-drawer-from-left { from { transform: translateX(-100%); } to { transform: none; } }
  @keyframes app-drawer-from-right { from { transform: translateX(100%); } to { transform: none; } }
  /* The open drawer covers the hamburger, so tapping anywhere outside it closes it. */
  .app-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(3, 8, 6, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
  }
  .app-sidebar-toggle-input:checked ~ .app-scrim { opacity: 1; pointer-events: auto; cursor: pointer; }
  .app-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
  }
  .app-logo-mobile { display: inline-flex; }
  .app-main { padding: 18px 18px 60px; }
  .app-main > .impersonation-bar { margin: -18px -18px 16px; }
  .app-main > .guest-bar { margin: -18px -18px 16px; }
  .page-head { align-items: flex-start; }
}

@media (max-width: 720px) {
  /* A form page can carry five header actions (Submissions, Logic, Payment, Settings, Preview).
     Wrapping pushed them onto three rows and shoved the actual page below the fold, so on a phone
     they become one swipeable row instead. Edge-to-edge, so it reads as scrollable. */
  .page-head-actions {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: -18px;
    padding-inline: 18px;
    padding-bottom: 2px;
    scroll-padding-inline: 18px;
  }
  .page-head-actions::-webkit-scrollbar { display: none; }
  .page-head-actions > * { flex: none; }



  .hero { padding: 16px 0 20px; }
  .hero h1 { margin-top: 12px; font-size: clamp(1.95rem, 7.4vw, 2.6rem); }
  .hero-lede { margin-top: 10px; font-size: 0.98rem; }
  .hero-actions { margin-top: 16px; gap: 8px; }
  /* The secondary CTA reads as a link on a phone; two stacked large buttons cost ~70px of fold. */
  .hero-actions .btn-ghost { padding: 4px 8px; text-decoration: underline; }
  .hero-note { margin-top: 8px; font-size: 0.76rem; }
  .section { padding: 56px 0; }
  .footer-top { grid-template-columns: 1fr; gap: 28px; padding-top: 40px; }

  .field-form-row { grid-template-columns: 1fr; }
  .field-row { gap: 10px; padding-inline-start: 10px; }
  .field-meta .field-options-preview { display: none; }
  .step-settings { padding-inline-start: 0; }
  .answer-list > div { grid-template-columns: 1fr; gap: 2px; }
  .menu-panel-wide { min-width: 260px; }
  .field-edit .menu-panel-wide { min-width: 0; width: min(360px, calc(100vw - 64px)); }
  .template-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .template-tile { padding: 14px; }
  .submission-state { margin-inline-end: 0; }
  .submission-wrap .submission-delete { top: 10px; }

  /* On a phone the form is the whole screen, not a card floating on a page. */
  /* svh, not dvh: the small viewport excludes the browser's toolbars, so a button pinned to
     the bottom of a one-screen form is never left underneath iPhone Chrome's bottom bar with
     nothing to scroll. */
  .pf-viewport { padding: 0; align-items: stretch; min-height: 100vh; min-height: 100svh; }
  .pf-shell {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    min-height: 100vh;
    min-height: 100svh;
    padding: 26px 18px 0;
    display: flex;
    flex-direction: column;
    animation: none;
  }
  .pf-shell::before { inset-inline: 0; border-radius: 0; }
  .pf-form { display: flex; flex-direction: column; flex: 1; }
  .pf-key-hint { display: none; }

  /* App bar: back button, progress and a "2/5" counter stay pinned while a long step scrolls. */
  .pf-progress {
    position: sticky;
    top: 0;
    z-index: 20;
    margin: 18px -18px 0;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(226, 235, 230, 0.8);
  }
  .pf-progress-meta { display: none; }
  .pf-form { margin-top: 18px; }
  .pf-top-back {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-ink);
    cursor: pointer;
    animation: pf-pop 0.3s cubic-bezier(0.2, 1.4, 0.4, 1) both;
  }
  .pf-top-back[hidden] { display: none; }
  .pf-top-back:active { transform: scale(0.92); }
  [dir="rtl"] .pf-top-back .icon { transform: scaleX(-1); }
  .pf-counter {
    display: inline-grid;
    place-items: center;
    min-width: 46px;
    height: 30px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-soft);
    color: var(--color-ink-soft);
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    transition: background-color 0.25s ease, color 0.25s ease;
  }
  .pf-counter.is-last { background: var(--color-accent-soft); color: var(--color-primary-dark); }

  /* Action bar: the main button is pinned under your thumb, clear of the home indicator. */
  .pf-nav, .pf-submit {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin: auto -18px 0;
    padding: 22px 18px calc(14px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--color-bg) 68%, rgba(255, 255, 255, 0));
  }
  .pf-nav .pf-back { display: none; }

  /* The done screen has no fields to fill, so centre it rather than top-aligning. */
  .pf-shell-center { justify-content: center; padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
}

@media (max-width: 420px) {
  .stat-row { grid-template-columns: 1fr 1fr; }
  .page-head-actions { width: 100%; }
  /* Reclaim room so the marketing header (brand + language + auth button) never overflows. */
  .wrap { padding: 0 16px; }
  .header-inner { gap: 10px; }
  .header-actions { gap: 6px; }
  .ex-body { padding-inline: 16px; }
}

/* ==========================================================================
   Build with AI — the prompt hand-off (app shell)
   ========================================================================== */
.callout-error {
  background: rgba(224, 82, 82, 0.12);
  border-color: transparent;
  color: #ff9d9d;
  margin-bottom: 18px;
}
.app-body .callout-info {
  background: rgba(22, 200, 197, 0.1);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  gap: 10px;
}
.app-body .callout-info .icon { width: 18px; height: 18px; flex: none; }

.ai-flow { display: flex; flex-direction: column; gap: 18px; }

/* Creation wizards: one level at a time under a progress header (initWizard in site.js). */
.wizard [hidden] { display: none !important; }
.wizard-progress { max-width: 640px; margin-bottom: 14px; }
.ai-flow .wizard-progress { margin-bottom: 0; }
.wizard-count {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.wizard-dots { list-style: none; margin: 0 0 12px; padding: 0; display: flex; gap: 6px; }
.wizard-dot-item { flex: 1; min-width: 0; }
.wizard-dot {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--app-ink-faint);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
}
.wizard-dot:disabled { cursor: default; }
.wizard-dot-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--app-border);
  border-radius: 50%;
  background: var(--app-surface);
  color: var(--app-ink-soft);
  font-size: 0.8rem;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.wizard-dot-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wizard-dot.is-current { color: var(--app-ink); }
.wizard-dot.is-current .wizard-dot-num {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #04140c;
  box-shadow: 0 0 0 4px rgba(22, 200, 197, 0.18);
}
.wizard-dot.is-done { color: var(--app-ink-soft); }
.wizard-dot.is-done .wizard-dot-num { border-color: var(--color-accent); color: var(--color-accent); font-size: 0; }
.wizard-dot.is-done .wizard-dot-num::after { content: "✓"; font-size: 0.9rem; font-weight: 800; }
.wizard-dot:not(:disabled):not(.is-current):hover .wizard-dot-num { border-color: var(--color-accent); }
.wizard-dot:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 8px; }
.wizard-bar { height: 4px; border-radius: var(--radius-pill); background: var(--app-border); overflow: hidden; }
.wizard-bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transition: width 0.35s ease;
}
.wizard-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.wizard-nav [data-wizard-back] { margin-inline-end: auto; }
.wizard-step.is-entering { animation: wizard-in 0.28s ease both; }
[data-wizard-title]:focus { outline: none; }
@keyframes wizard-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wizard-bar span, .wizard-dot-num { transition: none; }
}
@media (max-width: 600px) {
  .wizard-dots { justify-content: space-between; }
  .wizard-dot-item { flex: none; }
  .wizard-dot-label { display: none; }
}
.ai-step { margin: 0; }
.ai-num {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-inline-end: 4px;
  border-radius: 50%;
  background: rgba(22, 200, 197, 0.16);
  color: var(--color-accent);
  font-size: 0.82rem;
  font-weight: 700;
}

.ai-prompt-wrap { position: relative; }
.ai-prompt {
  max-height: 300px;
  overflow: auto;
  margin: 0;
  padding: 16px;
  padding-block-end: 52px;
  border: 1px solid var(--app-border);
  border-radius: var(--radius-md);
  background: var(--app-bg);
  color: var(--app-ink-soft);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.8rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  /* The prompt is English instructions for a model, so keep it left-to-right in RTL forms too. */
  direction: ltr;
  text-align: start;
}
.ai-copy { position: absolute; inset-block-end: 12px; inset-inline-end: 12px; }

.ai-json {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.82rem;
  line-height: 1.5;
}

/* ==========================================================================
   Plan parity: pricing emphasis + the expired-account screen
   ========================================================================== */
.pricing-diff {
  max-width: 46rem;
  margin: -8px auto 34px;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-primary-dark);
}
.price-list .is-everything {
  font-weight: 700;
  color: var(--color-primary-dark);
}
.included-note { margin-top: 30px; text-align: center; }

.trial-ended { text-align: center; }
.trial-emoji { font-size: 2.6rem; display: block; margin-bottom: 6px; }
.trial-lede { color: var(--color-ink-soft); margin-bottom: 18px; }
.trial-safe {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: start;
  margin-bottom: 18px;
}
.trial-list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: start;
}
.trial-list li {
  position: relative;
  padding-inline-start: 26px;
  color: var(--color-ink);
}
.trial-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  top: 0.45em;
  width: 10px;
  height: 6px;
  border-inline-start: 2px solid var(--color-primary);
  border-block-end: 2px solid var(--color-primary);
  transform: rotate(-45deg);
}
.trial-logout { margin-top: 10px; }

/* Read-only leads after the free week */
.readonly-note { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.readonly-note .icon { width: 18px; height: 18px; flex: none; }
.status-flat { font-size: 0.88rem; color: var(--app-ink-soft); }

.trial-archive { text-align: start; margin-bottom: 22px; }
.trial-archive h2 { font-size: 1rem; margin: 0 0 2px; }
.trial-archive > p { margin: 0 0 10px; font-size: 0.88rem; color: var(--color-ink-soft); }
.trial-archive ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.trial-archive li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}
.archive-name { font-weight: 600; flex: 1; min-width: 0; }
.archive-count { color: var(--color-ink-faint); font-size: 0.82rem; }
.trial-archive li a { font-weight: 600; color: var(--color-primary-dark); }

/* ==========================================================================
   FAQ — native <details>, so answers are readable and findable without JS
   ========================================================================== */
.faq-list { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.faq-item {
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.faq-item[open] { border-color: #c7c4ff; box-shadow: 0 2px 14px rgba(108, 100, 255, 0.07); }
.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  cursor: pointer;
  font-weight: 650;
  color: var(--color-ink);
  list-style: none;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { color: var(--color-primary-dark); }
.faq-item > summary:focus-visible { outline: 3px solid var(--color-accent); outline-offset: -3px; border-radius: 14px; }
.faq-chevron {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--color-ink-faint);
  transition: transform 0.2s ease;
}
.faq-item[open] > summary .faq-chevron { transform: rotate(180deg); }
.faq-item > p {
  margin: 0;
  padding: 0 18px 18px;
  color: var(--color-ink-soft);
  line-height: 1.65;
}
.faq-more { margin-top: 22px; text-align: center; color: var(--color-ink-soft); }

/* ==========================================================================
   Timed invitation modal
   ========================================================================== */
.promo { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.promo[hidden] { display: none !important; }
body.has-promo { overflow: hidden; }

.promo-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 26, 18, 0.55);
  backdrop-filter: blur(3px);
  animation: promo-fade 0.25s ease both;
}

.promo-card {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100svh - 40px);
  overflow-y: auto;
  padding: 30px 26px 24px;
  border-radius: 22px;
  background:
    radial-gradient(28rem 14rem at 50% -12%, rgba(22, 200, 197, 0.22), transparent 70%),
    #fff;
  box-shadow: 0 24px 70px rgba(8, 26, 18, 0.32);
  text-align: center;
  animation: promo-rise 0.34s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

.promo-close {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(9, 30, 20, 0.06);
  color: var(--color-ink-soft);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.promo-close:hover { background: rgba(9, 30, 20, 0.12); color: var(--color-ink); }
.promo-close .icon { width: 18px; height: 18px; }

.promo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-size: 0.76rem;
  font-weight: 700;
}
.promo-badge .icon { width: 14px; height: 14px; }

.promo-title {
  margin: 14px 0 0;
  font-size: 1.5rem;
  line-height: 1.18;
  letter-spacing: -0.03em;
  font-weight: 800;
}
.promo-lede { margin: 8px 0 0; color: var(--color-ink-soft); font-size: 0.95rem; }

.promo-demo { margin: 18px 0 0; display: flex; justify-content: center; }
.promo-bubble {
  position: relative;
  max-width: 300px;
  padding: 12px 14px 20px;
  border-radius: 14px 14px 14px 4px;
  background: var(--color-accent-soft, #dcf8c6);
  text-align: start;
  box-shadow: 0 3px 12px rgba(8, 26, 18, 0.1);
}
.promo-bubble pre {
  margin: 0;
  font-family: inherit;
  font-size: 0.82rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--color-ink);
}
.promo-time {
  position: absolute;
  inset-block-end: 6px;
  inset-inline-end: 10px;
  font-size: 0.68rem;
  color: var(--color-ink-faint);
}

.promo-points {
  list-style: none;
  margin: 18px 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: start;
}
.promo-points li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.92rem; }
.promo-points .icon { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--color-primary); }

.promo-dismiss {
  margin-top: 10px;
  border: 0;
  background: none;
  color: var(--color-ink-faint);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
}
.promo-dismiss:hover { color: var(--color-ink-soft); }

@keyframes promo-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes promo-rise {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .promo-backdrop, .promo-card { animation: none; }
}

/* ==========================================================================
   AI spotlight — the fastest route in, given its own band under the hero
   ========================================================================== */
.ai-band {
  padding: 54px 0;
  background:
    radial-gradient(40rem 20rem at 15% 0%, rgba(22, 200, 197, 0.13), transparent 65%),
    var(--color-bg-soft);
  border-block: 1px solid var(--color-border);
}
.ai-band-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 42px;
}
.ai-band-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-size: 0.78rem;
  font-weight: 700;
}
.ai-band-badge .icon { width: 14px; height: 14px; }
.ai-band-text h2 {
  margin: 14px 0 0;
  font-size: clamp(1.7rem, 3.2vw, 2.3rem);
  line-height: 1.14;
  letter-spacing: -0.03em;
  font-weight: 800;
}
.ai-band-lede { margin: 12px 0 0; color: var(--color-ink-soft); }

.ai-steps { list-style: none; margin: 20px 0 24px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ai-steps li { display: flex; align-items: flex-start; gap: 12px; }
.ai-step-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}
.ai-step-text { font-size: 0.95rem; color: var(--color-ink-soft); }
.ai-step-text strong { color: var(--color-ink); }

.ai-band-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 14px 0 0;
  font-size: 0.84rem;
  color: var(--color-ink-faint);
}
.ai-band-note .icon { width: 15px; height: 15px; flex: none; }

.ai-band-visual { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.ai-chip {
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(9, 30, 20, 0.05);
}
.ai-chip-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-faint);
  margin-bottom: 6px;
}
.ai-chip-you p { margin: 0; font-size: 0.92rem; color: var(--color-ink); }
.ai-chip-json pre {
  margin: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--color-ink-soft);
  direction: ltr;
  text-align: start;
  white-space: pre-wrap;
}
.ai-chip-form { display: flex; flex-direction: column; gap: 7px; }
.ai-chip-row { display: block; height: 11px; border-radius: 5px; background: var(--color-bg-soft); }
.ai-chip-row.is-short { width: 55%; }
.ai-chip-arrow { display: grid; place-items: center; color: var(--color-ink-faint); }
.ai-chip-arrow .icon { width: 18px; height: 18px; transform: rotate(90deg); }
[dir="rtl"] .ai-chip-arrow .icon { transform: rotate(90deg) scaleX(-1); }

@media (max-width: 900px) {
  .ai-band { padding: 34px 0; }
  .ai-band-inner { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}

/* Featured "start with AI" route on the new-form page */
.ai-start {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1.5px solid var(--color-accent);
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(22, 200, 197, 0.1), rgba(22, 200, 197, 0.02));
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.ai-start:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(108, 100, 255, 0.14); }
.ai-start-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--color-primary);
  color: #fff;
}
.ai-start-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ai-start-text strong { color: var(--app-ink, var(--color-ink)); font-size: 1rem; }
.ai-start-text span { color: var(--app-ink-soft, var(--color-ink-soft)); font-size: 0.88rem; }
.ai-start-go { flex: none; color: var(--color-accent); }
[dir="rtl"] .ai-start-go .icon { transform: scaleX(-1); }

.new-form-or {
  margin: 18px 0 10px;
  text-align: center;
  font-size: 0.86rem;
  color: var(--app-ink-faint, var(--color-ink-faint));
}

.empty-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

/* ==========================================================================
   Admin analytics — funnel, trend, adoption (app shell)
   ========================================================================== */
.admin-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 900px) { .admin-cols { grid-template-columns: minmax(0, 1fr); } }
.panel-hint { margin: -6px 0 16px; font-size: 0.85rem; color: var(--app-ink-faint, var(--app-ink-soft)); }

.funnel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.funnel-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.funnel-label { flex: 1; min-width: 0; font-size: 0.92rem; color: var(--app-ink); }
.funnel-count { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--app-ink); }
.funnel-share { min-width: 44px; text-align: end; font-size: 0.82rem; color: var(--app-ink-faint, var(--app-ink-soft)); font-variant-numeric: tabular-nums; }
.funnel-bar { display: block; height: 9px; border-radius: var(--radius-pill); background: var(--app-bg); overflow: hidden; }
.funnel-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transition: width 0.4s ease;
}
[dir="rtl"] .funnel-bar span { background: linear-gradient(270deg, var(--color-primary), var(--color-accent)); }
.funnel-drop { display: block; margin-top: 5px; font-size: 0.78rem; color: #f5c26b; }

.admin-flags { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.admin-flag {
  padding: 12px;
  border: 1px solid var(--app-border);
  border-radius: var(--radius-md);
  background: var(--app-bg);
  text-align: center;
}
.admin-flag strong { display: block; font-size: 1.3rem; font-weight: 800; color: var(--app-ink); }
.admin-flag span { display: block; margin-top: 3px; font-size: 0.76rem; line-height: 1.35; color: var(--app-ink-soft); }
.admin-flag.is-warn { border-color: rgba(245, 194, 107, 0.5); }
.admin-flag.is-warn strong { color: #f5c26b; }
.admin-flag.is-good { border-color: rgba(22, 200, 197, 0.45); }
.admin-flag.is-good strong { color: var(--color-accent); }

.trend { display: flex; align-items: flex-end; gap: 8px; height: 168px; }
.trend-week { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.trend-bars { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 3px; width: 100%; }
.trend-bar { flex: 1; min-height: 2px; border-radius: 3px 3px 0 0; transition: height 0.4s ease; }
.trend-bar.is-signups { background: #7cc4ff; }
.trend-bar.is-forms { background: #b79cff; }
.trend-bar.is-subs { background: var(--color-accent); }
.trend-label { font-size: 0.66rem; color: var(--app-ink-faint, var(--app-ink-soft)); white-space: nowrap; }
.trend-key { list-style: none; display: flex; flex-wrap: wrap; gap: 14px; margin: 14px 0 0; padding: 0; font-size: 0.8rem; color: var(--app-ink-soft); }
.trend-key li { display: flex; align-items: center; gap: 6px; }
.trend-key i { width: 10px; height: 10px; border-radius: 3px; }
.trend-key i.is-signups { background: #7cc4ff; }
.trend-key i.is-forms { background: #b79cff; }
.trend-key i.is-subs { background: var(--color-accent); }

.adoption { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.adoption li { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr) auto; gap: 12px; align-items: center; }
.adoption-label { font-size: 0.9rem; color: var(--app-ink); }
.adoption-bar { display: block; height: 8px; border-radius: var(--radius-pill); background: var(--app-bg); overflow: hidden; }
.adoption-bar span { display: block; height: 100%; border-radius: inherit; background: var(--color-accent); transition: width 0.4s ease; }
.adoption-count { font-size: 0.86rem; font-weight: 700; color: var(--app-ink); font-variant-numeric: tabular-nums; }
.adoption-count em { font-style: normal; font-weight: 500; color: var(--app-ink-faint, var(--app-ink-soft)); margin-inline-start: 5px; }
@media (max-width: 600px) {
  .adoption li { grid-template-columns: 1fr auto; }
  .adoption-bar { grid-column: 1 / -1; order: 3; }
}


/* ==========================================================================
   Analytics consent banner
   ========================================================================== */
.consent {
  position: fixed;
  inset-inline: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 150; /* under the promo dialog, over the page */
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.consent[hidden] { display: none !important; }
.consent-inner {
  pointer-events: auto;
  width: min(780px, 100%);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(8, 26, 18, 0.18);
  animation: promo-rise 0.3s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}
.consent-text { margin: 0; flex: 1; min-width: 0; font-size: 0.88rem; line-height: 1.5; color: var(--color-ink-soft); }
.consent-text strong { color: var(--color-ink); margin-inline-end: 4px; }
.consent-text a { color: var(--color-primary-dark); text-decoration: underline; white-space: nowrap; }
.consent-actions { display: flex; gap: 8px; flex: none; }
@media (max-width: 600px) {
  .consent-inner { flex-direction: column; align-items: stretch; gap: 12px; }
  .consent-actions .btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .consent-inner { animation: none; }
}
/* Settings links stay hidden unless analytics is actually active on the page. */
[data-consent-open][hidden] { display: none !important; }

/* "This page is also available in …" — offered on English marketing pages, never forced. */
.lang-suggest {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 48px;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
}
.lang-suggest-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.lang-suggest-close {
  position: absolute;
  top: 50%;
  inset-inline-end: 10px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
}
.lang-suggest-close:hover { background: rgba(108, 100, 255, 0.12); }

/* The paid done-for-you service: the landing band and the /help page. */
.done-band { background: var(--color-bg-soft); }
.done-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 34px; align-items: center; }
.done-text h2 { margin-top: 10px; font-size: clamp(1.5rem, 3.4vw, 2rem); letter-spacing: -0.02em; }
.done-text p { margin: 12px 0 22px; color: var(--color-ink-soft); }
.done-list { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.done-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.done-list .icon { flex: none; width: 18px; height: 18px; color: var(--color-primary); }

.help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 18px 0 8px; }
.help-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}
.help-card span { color: var(--color-ink-soft); font-size: 0.93rem; line-height: 1.5; }
.help-steps { margin: 18px 0; padding-inline-start: 22px; display: grid; gap: 10px; color: var(--color-ink-soft); }
.help-steps strong { color: var(--color-ink); }
.help-cta { margin-top: 28px; text-align: center; }
.help-cta .form-hint { margin-top: 10px; }
@media (max-width: 900px) {
  .done-inner { grid-template-columns: 1fr; gap: 22px; }
}

/* Settings: the form's own colour. */
.color-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.color-input {
  width: 66px;
  height: 44px;
  padding: 4px;
  border: 1px solid var(--app-border);
  border-radius: var(--radius-sm);
  background: var(--app-surface);
  cursor: pointer;
}
.color-input::-webkit-color-swatch-wrapper { padding: 0; }
.color-input::-webkit-color-swatch { border: 0; border-radius: 7px; }
.color-row .form-check { margin: 0; }

/* "By request" sits where a price would, so the card keeps its shape. */
.price-request { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }

/* Builder: a sample of the form in the owner's colour, so the choice is visible while editing. */
.look-chat { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.look-bubble,
.look-reply,
.look-chip {
  max-width: 100%;
  padding: 8px 14px;
  border-radius: 16px;
  font-size: 0.88rem;
  line-height: 1.35;
}
.look-bubble { background: #f2f4f3; color: #0b1a14; }
.look-reply { align-self: flex-end; background: var(--color-primary); color: #fff; font-weight: 500; }
.look-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--color-primary-dark);
  font-weight: 500;
}
.look-chip::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #dfe3e1; }
.look-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-inline-end: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  vertical-align: -1px;
}
.look-panel .side-meta { margin-top: 12px; }

/* A form's own logo, in place of the AutonomousForm mark. */
.pf-logo { display: block; max-width: 180px; max-height: 64px; margin-bottom: 14px; object-fit: contain; }
.pf-shell.is-chat .pf-logo { max-width: 120px; max-height: 38px; margin: 0; }
.look-logo { max-width: 110px; max-height: 34px; margin-bottom: 4px; object-fit: contain; }
.logo-row { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.logo-preview {
  max-width: 140px;
  max-height: 48px;
  padding: 6px 10px;
  border: 1px solid var(--app-border);
  border-radius: var(--radius-sm);
  background: #fff;
  object-fit: contain;
}
.logo-row .form-check { margin: 0; }

/* Form tree — the branch rules drawn as the path a respondent actually walks.
   Indentation comes from --tree-depth, set per row by the page, and uses logical
   properties so the tree mirrors itself in Hebrew without a second rule set. */
.btn-xs { padding: 5px 10px; font-size: 0.8rem; }
.btn-xs svg { width: 14px; height: 14px; }

.tree { list-style: none; margin: 14px 0 0; padding: 0; }

.tree-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 12px;
  margin-inline-start: calc(var(--tree-depth, 0) * 16px);
  border-inline-start: 2px solid var(--app-border);
}

.tree-row--step {
  background: var(--app-surface-2);
  border-radius: var(--radius-sm);
  margin-block: 4px;
}

.tree-step-head { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--app-ink); }
.tree-step-head svg { width: 16px; height: 16px; color: var(--color-accent); flex: none; }
.tree-step-count { font-size: 0.82rem; color: var(--app-ink-faint); }

.tree-question { display: inline-flex; align-items: center; gap: 8px; color: var(--app-ink-soft); font-size: 0.92rem; }
.tree-question svg { width: 16px; height: 16px; color: var(--color-accent); flex: none; }

.tree-option {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-primary-dark);
  font-size: 0.85rem;
  font-weight: 600;
}

.tree-note { font-size: 0.82rem; color: var(--app-ink-faint); }
.tree-action { margin-inline-start: auto; }

@media (max-width: 640px) {
  .tree-row { margin-inline-start: calc(var(--tree-depth, 0) * 9px); padding: 8px 10px; }
  .tree-action { margin-inline-start: 0; width: 100%; }
}

/* The opening WhatsApp bubbles land one at a time, like the chat rows do. */
.demo-wa-start .wa-bubble.is-new { animation: pf-chat-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .demo-wa-start .wa-bubble.is-new { animation: none; }
}

@media (max-width: 900px) {
  /* Three scenes do not fit a phone screen above the fold, and the message coming back is the one
     that has to be seen. So the opening WhatsApp exchange plays, then folds away and the form
     takes its place. Without JavaScript is-past-intro never lands and all three simply stack. */
  .hero-demo.is-playing .demo-wa-start {
    max-height: 220px;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.35s ease, margin-bottom 0.5s ease, padding 0.5s ease;
  }
  .hero-demo.is-playing.is-past-intro .demo-wa-start {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: -6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-demo.is-playing .demo-wa-start { transition: none; }
}

/* A stat tile's secondary line — e.g. how many of the forms were built by guests. */
.stat-sub {
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--app-ink-faint);
}

/* The plain-fact line under the trust cards — quieter than the cards, still readable. */
.section-note {
  margin-top: 22px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}
.section-note a { color: var(--color-primary); font-weight: 600; }

/* The brand voice lives in the marketing headings. App panels stay on the sans, so the product
   still reads as a tool rather than a brochure. A serif does not want the tight tracking the
   old sans headings had. */
.hero h1,
.section-title,
.content-page h1,
.ex-hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.005em;
}


/* ==========================================================================
   Reference-led pass: the contrast between bands does the work, not the hue.
   Near-white lavender for content, deep navy for the bands between them, one
   vivid CTA, teal for the sharp accent, and headings that are large and light.
   ========================================================================== */

/* Big and light, not big and heavy. The weight is the whole point. */
.hero h1,
.section-title,
.content-page h1,
.ex-hero h1 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.hero h1 { font-size: clamp(2.2rem, 6vw, 4rem); }
.section-title { font-size: clamp(1.8rem, 4vw, 2.75rem); }

/* Filled blocks instead of thin outlines — the "boring borders" problem. */
.feature-card,
.step-item {
  background: var(--color-bg-soft);
  border: none;
  border-radius: 18px;
}
.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(25, 28, 54, 0.1);
  border-color: transparent;
}

/* Buttons: the reference's tight 6px corner, and a hover that goes lighter. */
.btn { border-radius: 6px; }
.btn-primary:hover { background: var(--color-primary-dark); }

/* The dark band. Alternating white / lavender / navy is what gives the
   reference its rhythm, so the two alt sections become the navy. */
.section-alt {
  background: var(--app-bg);
  border-block: none;
  color: var(--app-ink);
}
.section-alt .section-title { color: var(--app-ink); }
.section-alt .section-lede { color: var(--app-ink-soft); }
.section-alt .step-item { background: var(--app-surface); }
.section-alt .step-item h3 { color: var(--app-ink); }
.section-alt .step-item p { color: var(--app-ink-soft); }
.section-alt .step-item code { background: var(--app-surface-2); color: var(--app-ink); }
.section-alt .faq-item {
  background: var(--app-surface);
  border: none;
  color: var(--app-ink);
}
.section-alt .faq-item > summary { color: var(--app-ink); }
.section-alt .faq-item p { color: var(--app-ink-soft); }
.section-alt .faq-more { color: var(--app-ink-soft); }
.section-alt .faq-more a,
.section-alt a:not(.btn) { color: var(--color-accent); }
.section-alt .callout { background: var(--app-surface); color: var(--app-ink); border-color: var(--app-border); }
.section-alt .how-callout,
.section-alt .callout-info { color: var(--app-ink); }


/* ==========================================================================
   Warm pass: light orange as the third voice. Periwinkle still carries every
   action and teal every accent — orange only warms the decorative surfaces,
   so nothing a user clicks changes meaning.
   ========================================================================== */

/* The pill above the headline is the first thing on the page. */
.eyebrow,
.ex-eyebrow {
  background: var(--color-warm-soft);
  color: var(--color-warm-ink);
}

/* The marker behind the highlighted word. The ink goes dark because a light
   periwinkle word on a wash was never readable. */
.hero h1 .hl {
  background: linear-gradient(180deg, transparent 62%, var(--color-warm-soft) 62%);
  color: var(--color-ink);
}

/* Numerals on the navy band: orange on deep blue is where it earns its keep. */
.section-alt .step-num {
  background: var(--color-warm);
  color: var(--color-warm-deep);
}

/* One card in three warms up, which also breaks the identical-grid rhythm. */
.feature-card:nth-child(3n) .feature-icon {
  background: var(--color-warm-soft);
  color: var(--color-warm-ink);
}

/* The one badge on the pricing grid that is meant to be noticed. */
.price-badge {
  background: var(--color-warm);
  color: var(--color-warm-deep);
}

/* The glow over the examples gallery header. */
.ex-hero {
  background:
    radial-gradient(50rem 22rem at 50% -10%, rgba(255, 154, 92, 0.22), transparent 65%),
    var(--color-bg-soft);
}


/* ==========================================================================
   The merged capability grid. Two sections of six became one of six, and the
   card shrinks to match: the icon moves beside its title instead of sitting
   in a 44px block above it, so a card is a line and a sentence rather than a
   panel to wade through.
   ========================================================================== */

#features { padding: 56px 0; }
#features .section-lede { margin-bottom: 30px; }

.feature-grid-tight {
  /* 300px keeps it to three columns at --wrap, so six cards land as 3 + 3 rather
     than an orphaned 4 + 2. */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}
.feature-grid-tight .feature-card {
  padding: 18px 20px;
  border-radius: 14px;
}
.feature-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.feature-grid-tight .feature-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  margin-bottom: 0;
}
.feature-grid-tight .feature-icon svg { width: 16px; height: 16px; }
.feature-grid-tight .feature-card h3 { font-size: 0.98rem; }
.feature-grid-tight .feature-card p {
  margin-top: 0;
  font-size: 0.88rem;
  line-height: 1.5;
}

/* A shorter card does not want the lift; it reads as a jump rather than a hover. */
.feature-grid-tight .feature-card:hover {
  transform: none;
  box-shadow: 0 6px 18px rgba(25, 28, 54, 0.08);
}


/* ==========================================================================
   Slot picker: a day at a time, several times at once. Showing every day at
   once made a 9,000px block that the chat then tried to scroll past.
   ========================================================================== */

.pf-slot-days {
  /* .pf-slots is a flex column with a 300px cap in the chat. Without flex: none the browser
     squashes this row to its padding the moment the times are taller than the cap — which is
     every time on a phone, where the grid is narrower and so taller. Sticky keeps it in view
     while the times scroll under it. */
  flex: none;
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-bg);
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 4px;
  scrollbar-width: thin;
}
.pf-slot-daytab {
  flex: none;
  padding: 7px 13px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-ink-soft);
  font-size: 0.84rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pf-slot-daytab:hover { border-color: var(--pf-primary, var(--color-primary)); }
.pf-slot-daytab.is-on {
  background: var(--pf-primary, var(--color-primary));
  border-color: transparent;
  color: #fff;
}
.pf-slot-daytab:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

/* With one day on screen the date heading above the grid only repeats the active tab. */
.pf-slots:has(.pf-slot-days:not([hidden])) .pf-slot-date { display: none; }

/* A slot chosen on another day is out of sight, so the chosen ones are listed back. */
.pf-chat-options .pf-slot-days { background: #f2f4f3; }

.pf-slot-picked {
  flex: none;
  margin-top: 10px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--pf-primary, var(--color-primary));
}
.pf-slot input:disabled + span {
  opacity: 0.4;
  cursor: not-allowed;
}


/* ==========================================================================
   Public form: the accessibility panel. Each setting is a data attribute on
   the root, so everything below is plain CSS keyed off it. The form has its
   own layout, so scaling the root scales the form and nothing else.
   ========================================================================== */

html[data-pf-text="1"] { font-size: 112.5%; }
html[data-pf-text="2"] { font-size: 125%; }

/* The top size also thickens what a respondent reads and types. Headings and buttons are
   already heavy, and body copy bolder than that helps nobody. */
html[data-pf-text="2"] .pf-chat-bubble,
html[data-pf-text="2"] .pf-label,
html[data-pf-text="2"] .pf-choice,
html[data-pf-text="2"] .pf-slot span,
html[data-pf-text="2"] .pf-body input,
html[data-pf-text="2"] .pf-body textarea,
html[data-pf-text="2"] .pf-body select { font-weight: 500; }

/* Contrast: darken the ink and flatten the soft greys the form leans on. */
html[data-pf-contrast] .pf-body {
  --color-ink: #000000;
  --color-ink-soft: #1a1a1a;
  --color-ink-faint: #333333;
  --color-bg-soft: #ffffff;
  --color-border: #767676;
}
html[data-pf-contrast] .pf-chat-bubble { background: #ffffff; border: 1px solid #767676; }
html[data-pf-contrast] .pf-body input,
html[data-pf-contrast] .pf-body textarea,
html[data-pf-contrast] .pf-body select { border-color: #767676; }

/* Filled elements keep the owner's colour, which measured 4.28:1 against white text — under the
   threshold, in the mode whose whole point is contrast. Brand colour is the right thing to lose
   here: this is the setting someone turns on because they cannot read the default.
   Not the WhatsApp button: it is dark ink on green and already well clear. */
html[data-pf-contrast] .pf-chat-row.is-user .pf-chat-bubble,
html[data-pf-contrast] .pf-chat-restart,
html[data-pf-contrast] .pf-body .btn-primary,
html[data-pf-contrast] .pf-slot-daytab.is-on,
html[data-pf-contrast] .pf-a11y-toggle.is-on,
html[data-pf-contrast] .pf-a11y-steps button[aria-pressed="true"] {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #ffffff;
}
html[data-pf-contrast] .pf-choice:has(input:checked),
html[data-pf-contrast] .pf-slot:has(input:checked) span {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #ffffff;
}

/* Spacing: the one that helps most with dyslexia, and costs nothing to anyone else. */
html[data-pf-spacing] .pf-body {
  line-height: 1.9;
  letter-spacing: 0.03em;
  word-spacing: 0.12em;
}

/* Targets: bigger things to hit, for anyone whose aim is not steady. */
html[data-pf-targets] .pf-choice,
html[data-pf-targets] .pf-slot span,
html[data-pf-targets] .pf-chat-chip,
html[data-pf-targets] .pf-slot-daytab { min-height: 48px; padding-block: 12px; }
html[data-pf-targets] .pf-body .btn { min-height: 52px; }

/* Still: the chat types its messages out and scrolls smoothly. Both are motion. */
html[data-pf-still] *,
html[data-pf-still] *::before,
html[data-pf-still] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* ---- the control itself ---- */
.pf-a11y-toggle {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-ink-soft);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pf-a11y-toggle svg { width: 19px; height: 19px; }
.pf-a11y-toggle:hover { border-color: var(--pf-primary, var(--color-primary)); }
.pf-a11y-toggle.is-on {
  background: var(--pf-primary, var(--color-primary));
  border-color: transparent;
  color: #fff;
}
.pf-a11y-toggle:focus-visible,
.pf-a11y-panel button:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

.pf-a11y-panel {
  position: absolute;
  top: 42px;
  inset-inline-end: 0;
  width: 250px;
  max-width: calc(100vw - 32px);
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-bg);
  box-shadow: 0 18px 44px rgba(25, 28, 54, 0.18);
  text-align: start;
}
.pf-a11y-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pf-a11y-head strong { font-size: 0.92rem; }
.pf-a11y-close {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: var(--color-bg-soft);
  color: var(--color-ink-soft);
  cursor: pointer;
}
.pf-a11y-close svg { width: 14px; height: 14px; }

.pf-a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.pf-a11y-row > span { font-size: 0.84rem; color: var(--color-ink-soft); }
.pf-a11y-steps { display: flex; gap: 4px; }
.pf-a11y-steps button {
  min-width: 34px;
  padding: 5px 7px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-ink-soft);
  font-weight: 700;
  cursor: pointer;
}
.pf-a11y-steps button:nth-child(1) { font-size: 0.68rem; }
.pf-a11y-steps button:nth-child(2) { font-size: 0.8rem; }
.pf-a11y-steps button:nth-child(3) { font-size: 0.92rem; }
.pf-a11y-steps button[aria-pressed="true"] {
  background: var(--pf-primary, var(--color-primary));
  border-color: transparent;
  color: #fff;
}

.pf-a11y-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-bottom: 6px;
  padding: 9px 11px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg);
  color: var(--color-ink-soft);
  font-size: 0.84rem;
  text-align: start;
  cursor: pointer;
}
.pf-a11y-dot {
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-border);
  border-radius: 50%;
}
.pf-a11y-switch[aria-pressed="true"] {
  border-color: var(--pf-primary, var(--color-primary));
  color: var(--color-ink);
}
.pf-a11y-switch[aria-pressed="true"] .pf-a11y-dot {
  border-color: var(--pf-primary, var(--color-primary));
  background: var(--pf-primary, var(--color-primary));
  box-shadow: inset 0 0 0 3px var(--color-bg);
}

.pf-a11y-reset {
  width: 100%;
  margin-top: 4px;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background: var(--color-bg-soft);
  color: var(--color-ink-soft);
  font-size: 0.8rem;
  cursor: pointer;
}


/* ==========================================================================
   The accessibility panel beyond the public form: the marketing pages, the
   dashboard and the sign-in screens.
   ========================================================================== */

/* Light surfaces: the same black on white the form uses. */
html[data-pf-contrast] body {
  --color-ink: #000000;
  --color-ink-soft: #1a1a1a;
  --color-ink-faint: #333333;
  --color-bg-soft: #ffffff;
  --color-border: #767676;
}

/* The dashboard is a dark shell. Forcing it light would be a worse contrast than it already
   has, so it goes the other way: white on black rather than near-white on navy. */
html[data-pf-contrast] .app-body {
  --app-bg: #000000;
  --app-surface: #0d0d0d;
  --app-surface-2: #1a1a1a;
  --app-border: #9a9a9a;
  --app-ink: #ffffff;
  --app-ink-soft: #f0f0f0;
  --app-ink-faint: #d4d4d4;
}

html[data-pf-spacing] body {
  line-height: 1.9;
  letter-spacing: 0.03em;
  word-spacing: 0.12em;
}

/* Bigger things to hit, wherever there are things to hit. */
html[data-pf-targets] .btn,
html[data-pf-targets] .app-nav-item,
html[data-pf-targets] .faq-item > summary,
html[data-pf-targets] .lang-select { min-height: 48px; }

/* ---- placement ---- */
/* In the form's sticky header, where the card already owns the corner. */
.pf-a11y-inline { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 20; }
.pf-shell.is-chat .pf-a11y-inline { top: 12px; inset-inline-end: 56px; }

/* Everywhere else it floats in the bottom corner, which is where people look for it. The
   inline-start side puts it bottom-right in Hebrew and bottom-left in English — conventional
   in both, and out of the way of anything pinned to the opposite corner. */
.pf-a11y-floating {
  position: fixed;
  bottom: 18px;
  inset-inline-start: 18px;
  /* Above the cookie banner (z-index 150). On a first visit the banner covered the bottom of
     an opened panel, hiding the last two settings from someone who had just gone looking for
     them. The panel only shows when it is deliberately opened, so it can win. */
  z-index: 200;
}
.pf-a11y-floating .pf-a11y-toggle {
  width: 44px;
  height: 44px;
  box-shadow: 0 6px 20px rgba(25, 28, 54, 0.22);
}
.pf-a11y-floating .pf-a11y-toggle svg { width: 23px; height: 23px; }
/* Opens upward: there is no room below a button sitting at the bottom of the screen. */
.pf-a11y-floating .pf-a11y-panel {
  top: auto;
  bottom: 54px;
  inset-inline-end: auto;
  inset-inline-start: 0;
}

/* The dashboard sidebar owns the inline-start corner — language picker, account row — in both
   directions, because it mirrors with the page. Over there the button would sit on top of them. */
.app-body .pf-a11y-floating { inset-inline-start: auto; inset-inline-end: 18px; }
.app-body .pf-a11y-floating .pf-a11y-panel { inset-inline-start: auto; inset-inline-end: 0; }

/* The panel keeps its own light palette inside the dark shell, so it stays readable there. */
.app-body .pf-a11y-panel {
  background: #ffffff;
  border-color: #d8dbe8;
  color: #222228;
}
.app-body .pf-a11y-row > span,
.app-body .pf-a11y-switch { color: #3f4367; }
.app-body .pf-a11y-head strong { color: #222228; }

@media (max-width: 480px) {
  .pf-a11y-floating { bottom: 14px; inset-inline-start: 14px; }
  .pf-a11y-floating .pf-a11y-panel { width: calc(100vw - 28px); }
}


/* ==========================================================================
   The landing page. The form is a card floating in the middle of the screen,
   which is right for a form and wrong here: this is somebody's page, so it
   runs top to bottom — a bar with their name, a hero, how it works, a foot.
   ========================================================================== */

/* Out of the form's centred flex box and back into ordinary page flow. */
.pf-landing-body .pf-viewport {
  display: block;
  min-height: 100dvh;
  padding: 0;
}
.pf-landing-body { background: var(--color-bg); }

.lp {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* The bar: who this belongs to, and a hairline of their colour under it. */
.lp-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  box-shadow: inset 0 -3px 0 -1px var(--pf-primary, var(--color-primary));
}
.lp-logo { max-height: 34px; max-width: 170px; display: block; }
.lp-name { font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em; }

.lp-main {
  flex: 1;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  padding: 44px 20px 32px;
}

.lp-hero h1 {
  font-size: clamp(1.7rem, 6.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.lp-lede {
  margin-top: 14px;
  max-width: 46ch;
  color: var(--color-ink-soft);
  font-size: 1.05rem;
  line-height: 1.6;
}
.lp-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
  width: 100%;
  max-width: 320px;
  font-size: 1.05rem;
}
.lp-cta-mark { width: 21px; height: 21px; flex: none; }

/* How it works: a plain numbered list, not a row of chips. */
.lp-how {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--color-border);
}
.lp-how h2 {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
}
.lp-how ol {
  counter-reset: lp;
  margin-top: 14px;
  display: grid;
  gap: 12px;
}
.lp-how li {
  counter-increment: lp;
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: var(--color-ink-soft);
}
.lp-how li::before {
  content: counter(lp);
  flex: none;
  width: 22px;
  font-weight: 700;
  color: var(--pf-primary, var(--color-primary));
}

.lp-foot {
  padding: 20px;
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-size: 0.82rem;
  color: var(--color-ink-faint);
}
.lp-foot a { color: var(--color-primary); font-weight: 600; }

/* The builder shows the form's address and the landing page's one under each other. */
.share-url-second { margin-top: 10px; }