/* DevOpser Landing Builder CSS - External file for strict CSP compliance */

/* Preview Image Loader — shimmer overlay for images still being generated */
.img-loader-wrap {
  position: relative;
  overflow: hidden;
  min-height: 120px;
  border-radius: 8px;
}
.img-loader-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #e2e2e2 25%, #efefef 50%, #e2e2e2 75%);
  background-size: 200% 100%;
  animation: img-shimmer 1.5s ease-in-out infinite;
  z-index: 2;
  transition: opacity 0.3s;
}
.img-loader-shimmer.img-loader-done {
  opacity: 0;
  pointer-events: none;
}
.img-loader-failed {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  z-index: 2;
}
.img-loader-retry-btn {
  padding: 6px 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  color: #333;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.img-loader-retry-btn:hover {
  background: #e8e8e8;
  border-color: #999;
}
@keyframes img-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* Context-aware shimmer sizing for different section types */
.gallery-item .img-loader-wrap {
  position: absolute;
  inset: 0;
  min-height: 0;
  border-radius: 0;
}
.team-member-photo .img-loader-wrap {
  min-height: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.testimonial-avatar .img-loader-wrap {
  min-height: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.about-image .img-loader-wrap {
  min-height: 200px;
  border-radius: 12px;
}
.section-hero > .img-loader-wrap {
  position: absolute;
  inset: 0;
  min-height: 0;
  border-radius: 0;
  z-index: 0;
}
.section-hero > .img-loader-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section-hero > .img-loader-wrap .img-loader-shimmer {
  background: linear-gradient(90deg, rgba(255,255,255,0) 25%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 75%);
  background-size: 200% 100%;
}
.section-hero > .img-loader-wrap .img-loader-failed {
  background: transparent;
}
    /* ==========================================================================
       DESIGN TOKENS — bridges three surfaces:
         /pros            → editorial-brutalist marketing landing (navy + yellow)
         /                → THIS PAGE — bridge between marketing and product
         /sites & builder → logged-in product (DevOpser style-guide dark mode)

       The dark-mode palette here matches devopser-style-guide.md (#000 /
       #1e1e1e / #282828 / #333 / #3d3d3d / #444 / #ccc / #888) so visiting
       / → /sites feels seamless. Display + mono fonts are carried OVER from
       /pros so a visitor arriving from the marketing page sees recognizable
       typographic character (Saira headings, JetBrains captions). Yellow
       --hi is kept as a single bridge accent on eyebrows; pink --pink is
       the primary brand color used everywhere. Body font reverts to the
       system stack to match /sites.
       ========================================================================== */
    :root {
      --ink:       #000;    /* darkest — page body, hero bg, nav */
      --ink-2:     #1e1e1e; /* section bg / sidebar bg */
      --ink-3:     #282828; /* card / modal / dropdown surface */
      --ink-4:     #333333; /* input field / secondary button */
      --rule:      #444;    /* card border, dividers */
      --rule-2:    #3d3d3d; /* hover surface for cards/buttons */
      --pink:      #ED166C; /* primary brand */
      --pink-2:    #c41058; /* brand hover / gradient end */
      --pink-3:    #ff3d8b; /* brand bright — used sparingly */
      --pink-glow: rgba(237, 22, 108, 0.30);
      --pink-grad: linear-gradient(135deg, #ED166C 0%, #c41058 100%);
      --pink-grad-hover: linear-gradient(135deg, #c41058 0%, #a00d48 100%);
      --hi:        #fde047; /* yellow — eyebrow + caution-dot bridge from /pros */
      --hi-2:      #facc15;
      --good:      #10b981; /* success green — style-guide canonical */
      --warn:      #f97316;
      --bad:       #ff6b6b; /* error red — style-guide canonical */
      --text:      #fff;    /* primary text on dark */
      --text-2:    #ccc;    /* secondary — descriptions, subtitles */
      --text-3:    #888;    /* muted — footer, hints, placeholders */
      --text-4:    #555;    /* subdued / disabled */

      /* Body uses the system stack (matches /sites and the style guide).
         Display + mono carry over from /pros so the editorial polish on
         headings + kickers persists across the marketing → product bridge. */
      --font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
      --font-display: 'Saira Condensed', 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --font-mono:    'JetBrains Mono', 'Heebo', ui-monospace, SFMono-Regular, Menlo, monospace;
    }

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

    html {
      height: 100%;
      overflow: hidden;
      background: var(--ink-2);
    }

    /* Body — style-guide hero gradient (#000 → #1e1e1e) is the foundation.
       A faint pink radial in the upper-right is the only nod to /pros'
       atmospheric layering — enough that someone arriving from the
       marketing page sees a hint of continuity, but quiet enough that the
       page reads as the same dark-mode product as /sites. */
    body {
      font-family: var(--font-body);
      background:
        radial-gradient(800px 400px at 95% -5%, rgba(237, 22, 108, 0.10), transparent 65%),
        linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
      color: var(--text);
      height: 100vh;
      overflow: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    ::selection { background: var(--pink); color: var(--text); }

    .builder-container {
      display: flex;
      height: 100vh;
    }

    /* Chat Sidebar — solid ink-2 (#1e1e1e) per style guide, with a single
       quiet pink radial at the bottom-right for atmospheric depth. No grid
       overlay, no yellow trace — keeps the sidebar reading as the same
       dark-mode chrome users see on /sites. */
    .chat-sidebar {
      width: 400px;
      min-width: 350px;
      background:
        radial-gradient(360px 240px at 110% 110%, rgba(237, 22, 108, 0.10), transparent 72%),
        var(--ink-2);
      border-right: 1px solid var(--rule);
      display: flex;
      flex-direction: column;
    }

    .chat-header {
      padding: 16px 20px;
      border-bottom: 1px solid var(--rule-2);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      background: var(--ink);
    }

    /* Inline brand wordmark — square `DL` mark + uppercase wordmark.
       Adopted from /pros .logo so the visual identity is continuous between
       the marketing landing and the builder. */
    .logo {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      text-decoration: none;
      color: var(--text);
    }

    .logo-mark {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      font-family: var(--font-display);
      font-weight: 900;
      font-size: 1rem;
      letter-spacing: -0.04em;
      background: var(--pink);
      color: #fff;
      border-radius: 4px;
      box-shadow:
        0 0 0 4px rgba(237, 22, 108, 0.28),
        0 8px 22px -10px rgba(237, 22, 108, 0.6);
    }

    .logo-text {
      font-family: var(--font-display);
      font-weight: 900;
      font-size: 0.95rem;
      letter-spacing: 0.08em;
      color: var(--text);
      white-space: nowrap;
    }

    .chat-messages {
      flex: 1;
      overflow-y: auto;
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .welcome-message {
      padding: 0 4px;
      display: flex;
      flex-direction: column;
      gap: 28px;
    }

    .welcome-hero {
      text-align: center;
      padding: 8px 12px 4px;
    }

    /* Yellow eyebrow + caution-dot above the welcome H2 — same kicker
       pattern /pros uses on the hero. The yellow text on dark bg is the
       SECONDARY brand accent (pink is primary); seeing both pulls the
       palette together. */
    .welcome-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      font-family: var(--font-mono);
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--hi);
      background: var(--ink-2);
      border: 1px solid var(--rule);
      padding: 0.4rem 0.7rem;
      border-radius: 2px;
      margin-bottom: 14px;
    }

    .welcome-eyebrow-dot {
      width: 7px;
      height: 7px;
      background: var(--hi);
      border-radius: 50%;
      box-shadow: 0 0 0 0 rgba(253, 224, 71, 0.5);
      animation: pulse-hi 2.4s ease-in-out infinite;
    }

    .welcome-message h2 {
      position: relative;
      font-family: var(--font-display);
      font-weight: 800;
      font-size: clamp(1.85rem, 2.8vw, 2.3rem);
      line-height: 1.1;
      letter-spacing: -0.005em;
      margin: 0 0 18px;
      color: var(--text);
      padding-bottom: 12px;
    }

    /* Pink gradient underbar — single brand accent under the H2 that mirrors
       /pros' .hero-title .rings underline. 48px × 3px is small enough not to
       compete with the title; it's the only purely decorative element on
       this page so the eye registers it as "brand". */
    .welcome-message h2::after {
      content: '';
      display: block;
      width: 48px;
      height: 3px;
      background: var(--pink-grad);
      margin: 12px auto 0;
      border-radius: 2px;
    }

    .welcome-message p {
      color: var(--text-2);
      line-height: 1.55;
      margin: 0;
      font-size: 0.98rem;
    }

    /* Suggestion chips — hidden until the user's been idle long enough that
       we think they'd welcome a nudge. Starting with display:none (rather than
       opacity:0) prevents an empty placeholder from occupying the sidebar on
       first load. Once revealed, the staggered chipIn keyframes on each chip
       handle the visual fade-in. */
    .example-prompts {
      display: none;
      flex-direction: column;
      gap: 8px;
      padding: 0 4px;
    }

    .example-prompts.revealed {
      display: flex;
      animation: promptsFadeIn 0.35s ease-out both;
    }

    @keyframes promptsFadeIn {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .example-prompts-header {
      font-family: var(--font-mono);
      font-size: 0.7rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--hi);
      padding: 0 4px 2px;
    }

    /* Example-prompt chips — style-guide secondary surface (#282828) with
       12px radius. translateY(-2px) hover with subtle pink border lift —
       same pattern as logged-in /sites cards. The ▸ leader fades in on
       hover (implicit affordance, no explicit icon). */
    .example-prompt {
      position: relative;
      background: var(--ink-3);
      border: 1px solid var(--rule);
      padding: 13px 30px 13px 16px;
      border-radius: 12px;
      cursor: pointer;
      text-align: left;
      color: var(--text-2);
      font-family: var(--font-body);
      font-size: 0.92rem;
      line-height: 1.4;
      letter-spacing: 0.005em;
      transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
    }

    .example-prompt::after {
      content: '›';
      position: absolute;
      top: 50%;
      right: 12px;
      transform: translateY(-50%);
      font-family: var(--font-display);
      font-weight: 900;
      font-size: 1.1rem;
      color: var(--text-4);
      opacity: 0;
      transition: opacity 150ms ease, transform 150ms ease;
    }

    .example-prompt:hover {
      background: var(--ink-4);
      border-color: var(--pink);
      color: var(--text);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(237, 22, 108, 0.12);
    }

    .example-prompt:hover::after {
      color: var(--pink);
      opacity: 1;
      transform: translateY(-50%) translateX(2px);
    }

    .example-prompt:active {
      transform: translateY(0);
    }

    /* RTL: arrow flips direction so it points away from the text edge */
    [dir="rtl"] .example-prompt {
      padding: 12px 14px 12px 30px;
    }
    [dir="rtl"] .example-prompt::after {
      content: '‹';
      right: auto;
      left: 12px;
    }
    [dir="rtl"] .example-prompt:hover::after {
      transform: translateY(-50%) translateX(-2px);
    }

    /* Stagger the reveal so chips don't pop in at once */
    .example-prompts.revealed .example-prompt:nth-child(2) { animation: chipIn 0.4s ease-out 0.00s both; }
    .example-prompts.revealed .example-prompt:nth-child(3) { animation: chipIn 0.4s ease-out 0.06s both; }
    .example-prompts.revealed .example-prompt:nth-child(4) { animation: chipIn 0.4s ease-out 0.12s both; }
    .example-prompts.revealed .example-prompt:nth-child(5) { animation: chipIn 0.4s ease-out 0.18s both; }

    @keyframes chipIn {
      from { opacity: 0; transform: translateY(4px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* Initial state (DESKTOP ONLY) — before the user has sent any message, we
       flip the flex order so the input bar sits directly under the header
       (where the eye lands first). The welcome message + suggestions live
       below. Once a message exists we remove .chat-empty and the sidebar
       returns to conventional chat layout (messages scroll, input at bottom).
       Mobile keeps its sticky-bottom input for thumb reach. */
    /* Empty-state: hide the scrollbar so the suggestion chips revealing
       don't trigger a useless full-track scrollbar from a few px of overflow.
       Keep scrolling functional (`overflow-y: auto`) — only the visual bar
       is suppressed — so phones with reduced viewport (X / Twitter in-app
       browser, mobile Safari with toolbars expanded) can still reach the
       example prompts when they overflow. Setting `overflow-y: hidden` here
       would block scroll entirely on those viewports. */
    .chat-sidebar.chat-empty .chat-messages {
      overflow-y: auto;
      scrollbar-width: none;       /* Firefox */
      -ms-overflow-style: none;    /* IE / old Edge */
    }
    .chat-sidebar.chat-empty .chat-messages::-webkit-scrollbar {
      display: none;               /* Chrome / Safari / WebKit */
    }

    @media (min-width: 769px) {
      .chat-sidebar.chat-empty .chat-messages {
        order: 2;
        flex: 1;
        justify-content: flex-start;
        padding-top: 32px;
      }

      .chat-sidebar.chat-empty .chat-input-container {
        order: 1;
        border-top: none;
        border-bottom: 1px solid var(--rule);
        padding: 18px 20px 20px;
      }

      /* Footer must stay at the bottom of the sidebar in BOTH modes.
         Non-empty mode: source order puts it last (order 0 inheriting),
         which is correct. Empty mode pushes input to order:1 + messages
         to order:2, so the footer (default 0) would land between header
         and input. Bumping it to order:3 keeps it last. */
      .chat-sidebar.chat-empty .chat-footer {
        order: 3;
      }
    }

    .message {
      max-width: 90%;
      padding: 12px 16px;
      border-radius: 12px;
      line-height: 1.5;
    }

    .message.user {
      align-self: flex-end;
      background: linear-gradient(135deg, var(--pink) 0%, var(--pink-2) 100%);
      color: var(--text);
    }

    .message.assistant {
      align-self: flex-start;
      background: var(--ink-3);
      color: var(--text-2);
    }

    /* "Check the preview" pill — appended after assistant messages that
       just updated the preview. Mobile-only via @media below; on desktop
       the preview is permanently visible in the right pane. Editorial
       mono-uppercase treatment matches the chat-footer-links + tab bar. */
    .preview-check-cta {
      align-self: flex-start;
      display: none; /* shown on mobile only — see @media below */
      align-items: center;
      gap: 8px;
      margin: 2px 0 6px;
      padding: 9px 14px;
      /* Filled pink tint — the previous transparent + faint border had
         poor contrast on the chat-messages grey background (#1e1e1e).
         A subtle pink wash + stronger border + lighter text reads as
         a definite button without going as loud as a solid-pink CTA. */
      background: rgba(237, 22, 108, 0.22);
      color: #ff7ab0;
      border: 1px solid rgba(237, 22, 108, 0.72);
      border-radius: 999px;
      font-family: var(--font-mono, inherit);
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
    }

    .preview-check-cta svg { flex-shrink: 0; }

    .preview-check-cta:hover {
      background: rgba(237, 22, 108, 0.32);
      border-color: var(--pink, #ED166C);
      color: #ffffff;
    }

    .preview-check-cta:active {
      background: rgba(237, 22, 108, 0.42);
      color: #ffffff;
    }

    .preview-check-cta:focus-visible {
      outline: 2px solid var(--pink, #ED166C);
      outline-offset: 2px;
    }

    /* Markdown styling for assistant messages */
    .message.assistant p { margin-bottom: 0.75em; }
    .message.assistant p:last-child { margin-bottom: 0; }
    .message.assistant h1, .message.assistant h2, .message.assistant h3 {
      margin: 0.5em 0;
      font-weight: 600;
    }
    .message.assistant h1 { font-size: 1.3em; }
    .message.assistant h2 { font-size: 1.15em; }
    .message.assistant h3 { font-size: 1em; }
    .message.assistant ul, .message.assistant ol {
      margin: 0.5em 0;
      padding-left: 1.5em;
    }
    .message.assistant li { margin: 0.25em 0; }
    .message.assistant code {
      background: var(--ink-2);
      padding: 0.2em 0.4em;
      border-radius: 4px;
      font-family: 'Consolas', 'Monaco', monospace;
      font-size: 0.9em;
    }
    .message.assistant pre {
      background: var(--ink-2);
      padding: 1em;
      border-radius: 8px;
      overflow-x: auto;
      margin: 0.5em 0;
    }
    .message.assistant pre code {
      background: transparent;
      padding: 0;
    }
    .message.assistant strong { font-weight: 600; }
    .message.assistant a {
      color: var(--pink);
      text-decoration: none;
    }
    .message.assistant a:hover { text-decoration: underline; }

    /* ────────────────────────────────────────────────────────────────
       In-chat upgrade prompt.
       Editorial layout: hairline → mono kicker → message → dash-bullet
       benefits → CTA. Staggered reveal on mount; shimmer sweep on CTA
       hover. Scoped under .message.assistant so the link-color rule
       above can't override the button text (was rendering pink-on-pink
       and invisible). Works LTR + RTL. */
    .message.assistant .chat-upgrade {
      margin: 0.25rem 0 0;
      padding: 0;
      position: relative;
    }
    .message.assistant .chat-upgrade::before {
      content: '';
      display: block;
      height: 1px;
      margin-bottom: 0.85rem;
      background: linear-gradient(90deg,
        transparent 0%,
        var(--pink) 20%,
        var(--pink-3, #ff3d8b) 50%,
        var(--pink) 80%,
        transparent 100%);
      opacity: 0.55;
    }

    .message.assistant .chat-upgrade__kicker {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      margin: 0 0 0.55rem;
      font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
      font-size: 0.66rem;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--pink-3, #ff3d8b);
      opacity: 0;
      animation: cuRise 0.32s ease-out 0.05s forwards;
    }
    .message.assistant .chat-upgrade__kicker::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--pink-3, #ff3d8b);
      box-shadow: 0 0 8px var(--pink-3, #ff3d8b);
      flex-shrink: 0;
    }
    /* Heebo at 0.66rem mono-uppercase looks cramped — bump up and ease
       the tracking. Same pattern as other RTL kicker overrides. */
    html[dir="rtl"] .message.assistant .chat-upgrade__kicker {
      font-family: 'Heebo', ui-monospace, monospace;
      font-size: 0.78rem;
      letter-spacing: 0.10em;
    }

    .message.assistant .chat-upgrade__text {
      margin: 0 0 0.85rem;
      font-size: 0.92rem;
      line-height: 1.45;
      color: var(--text);
      opacity: 0;
      animation: cuRise 0.32s ease-out 0.1s forwards;
    }

    .message.assistant .chat-upgrade__benefits {
      list-style: none;
      padding: 0;
      margin: 0 0 1rem;
      display: grid;
      gap: 0.42rem;
    }
    .message.assistant .chat-upgrade__benefits li {
      display: flex;
      align-items: baseline;
      gap: 0.7rem;
      font-size: 0.88rem;
      line-height: 1.4;
      color: var(--text-2);
      opacity: 0;
      animation: cuRise 0.32s ease-out forwards;
    }
    .message.assistant .chat-upgrade__benefits li:nth-child(1) { animation-delay: 0.16s; }
    .message.assistant .chat-upgrade__benefits li:nth-child(2) { animation-delay: 0.20s; }
    .message.assistant .chat-upgrade__benefits li:nth-child(3) { animation-delay: 0.24s; }
    .message.assistant .chat-upgrade__benefits li:nth-child(4) { animation-delay: 0.28s; }
    .message.assistant .chat-upgrade__benefits li:nth-child(5) { animation-delay: 0.32s; }
    .message.assistant .chat-upgrade__benefits li::before {
      content: '';
      flex-shrink: 0;
      width: 14px;
      height: 2px;
      background: var(--pink);
      border-radius: 2px;
      align-self: center;
      transform: translateY(-1px);
    }
    .message.assistant .chat-upgrade__benefits b {
      font-weight: 600;
      color: var(--text);
      font-style: normal;
    }

    /* Upgrade CTA — fixed contrast (was inheriting var(--pink) on pink
       gradient and invisible). Triple-scoped so it wins over the
       inherited link color regardless of source order. */
    .message.assistant a.chat-upgrade-btn,
    .message.assistant a.chat-upgrade-btn:visited,
    .message.assistant a.chat-upgrade-btn:hover,
    .message.assistant a.chat-upgrade-btn:focus,
    a.chat-upgrade-btn,
    a.chat-upgrade-btn:visited,
    a.chat-upgrade-btn:hover {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      padding: 0.62rem 1.3rem;
      background: linear-gradient(135deg, var(--pink) 0%, var(--pink-2) 100%);
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 0.92rem;
      font-weight: 700;
      letter-spacing: 0.01em;
      text-decoration: none;
      cursor: pointer;
      overflow: hidden;
      box-shadow:
        0 8px 22px -10px rgba(237, 22, 108, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
      transition: transform 0.16s ease, box-shadow 0.2s ease;
      opacity: 0;
      animation: cuRise 0.34s ease-out 0.4s forwards;
    }
    .message.assistant a.chat-upgrade-btn:hover,
    a.chat-upgrade-btn:hover {
      transform: translateY(-1px);
      box-shadow:
        0 12px 28px -10px rgba(237, 22, 108, 0.72),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
    }
    .message.assistant a.chat-upgrade-btn:focus-visible,
    a.chat-upgrade-btn:focus-visible {
      outline: 2px solid var(--pink-3, #ff3d8b);
      outline-offset: 3px;
    }
    /* Top CTA — appears right after the message, before the benefits.
       Bottom CTA keeps the original timing (after the last benefit).
       Desktop hides the top CTA since the whole block fits without
       scrolling — only mobile needs the mirrored button above the list. */
    .message.assistant a.chat-upgrade-btn--top {
      margin-top: 0.25rem;
      margin-bottom: 1rem;
      animation-delay: 0.15s;
    }
    .message.assistant a.chat-upgrade-btn--bottom {
      animation-delay: 0.4s;
    }
    @media (min-width: 769px) {
      .message.assistant a.chat-upgrade-btn--top {
        display: none;
      }
    }
    .message.assistant a.chat-upgrade-btn::before,
    a.chat-upgrade-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.22) 50%,
        transparent 100%);
      transform: translateX(-110%);
      transition: transform 0.7s ease;
      pointer-events: none;
    }
    .message.assistant a.chat-upgrade-btn:hover::before,
    a.chat-upgrade-btn:hover::before {
      transform: translateX(110%);
    }

    .chat-upgrade-btn__arrow {
      display: inline-block;
      transition: transform 0.16s ease;
      font-weight: 600;
    }
    .message.assistant a.chat-upgrade-btn:hover .chat-upgrade-btn__arrow,
    a.chat-upgrade-btn:hover .chat-upgrade-btn__arrow {
      transform: translateX(3px);
    }
    html[dir="rtl"] .chat-upgrade-btn__arrow {
      transform: scaleX(-1);
    }
    html[dir="rtl"] .message.assistant a.chat-upgrade-btn:hover .chat-upgrade-btn__arrow,
    html[dir="rtl"] a.chat-upgrade-btn:hover .chat-upgrade-btn__arrow {
      transform: scaleX(-1) translateX(3px);
    }

    @keyframes cuRise {
      from { opacity: 0; transform: translateY(4px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    @media (prefers-reduced-motion: reduce) {
      .message.assistant .chat-upgrade__kicker,
      .message.assistant .chat-upgrade__text,
      .message.assistant .chat-upgrade__benefits li,
      .message.assistant a.chat-upgrade-btn,
      a.chat-upgrade-btn {
        animation: none;
        opacity: 1;
        transform: none;
      }
      .message.assistant a.chat-upgrade-btn::before,
      a.chat-upgrade-btn::before { display: none; }
      .message.assistant a.chat-upgrade-btn:hover,
      a.chat-upgrade-btn:hover { transform: none; }
    }

    .chat-input-container {
      padding: 18px 20px 22px;
      border-top: 1px solid var(--rule-2);
    }

    /* Prompt card — style-guide card surface (#282828) with 12px radius.
       Pink border on focus-within (style-guide focus-ring pattern). Carries
       /pros' kicker label + green-dot pattern inside, so the card itself
       feels like /sites but the editorial typography stays. */
    .chat-input-card {
      position: relative;
      background: var(--ink-3);
      border: 1px solid var(--rule);
      border-radius: 12px;
      padding: 14px 16px 14px;
      transition: border-color 0.2s, box-shadow 0.2s;
    }

    .chat-input-card:focus-within {
      border-color: var(--pink);
      box-shadow: 0 0 0 3px rgba(237, 22, 108, 0.15);
    }

    /* The label is a real <label for="chatInput">, so clicking anywhere
       on the caption focuses the textarea below — native browser behavior,
       no JS. cursor:pointer signals the affordance. */
    .chat-input-label {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-family: var(--font-mono);
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--text-3);
      margin-bottom: 8px;
      cursor: pointer;
      user-select: none;
    }

    .chat-input-label:hover {
      color: var(--text-2);
    }

    .chat-input-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      background: var(--good);
      border-radius: 50%;
      box-shadow: 0 0 8px var(--good);
    }

    .chat-input-wrapper {
      display: flex;
      gap: 10px;
      align-items: flex-end;
    }

    /* Textarea — sits flush inside the card. No border/bg of its own; the
       card frame provides them. Min-height ensures the field never collapses
       below ~3 lines, max-height caps growth before the layout shifts. */
    .chat-input {
      flex: 1;
      background: transparent;
      border: 0;
      border-radius: 0;
      padding: 4px 4px 0;
      color: var(--text);
      font-family: var(--font-body);
      font-size: 16px; /* Prevents zoom on iOS — required, do not lower */
      line-height: 1.55;
      resize: none;
      min-height: 64px;
      max-height: 150px;
      overflow-y: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
      -webkit-appearance: none;
    }

    .chat-input:focus {
      outline: none;
    }

    .chat-input::-webkit-scrollbar {
      display: none;
    }

    .chat-input::placeholder {
      color: var(--text-4);
    }

    /* Prevent autofill from changing the card surface */
    .chat-input:-webkit-autofill,
    .chat-input:-webkit-autofill:hover,
    .chat-input:-webkit-autofill:focus {
      -webkit-text-fill-color: var(--text);
      -webkit-box-shadow: 0 0 0px 1000px var(--ink-3) inset;
      transition: background-color 5000s ease-in-out 0s;
    }

    /* Send button — style-guide primary CTA: pink gradient, 8px radius,
       translateY(-2px) hover, scale(0.98) active. The SVG path explicitly
       fills currentColor so it always paints reliably across browsers. */
    .send-button {
      background: var(--pink-grad);
      color: #fff;
      border: 0;
      border-radius: 8px;
      width: 52px;
      height: 52px;
      flex-shrink: 0;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(237, 22, 108, 0.30);
      transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    }

    .send-button:hover {
      background: var(--pink-grad-hover);
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(237, 22, 108, 0.40);
    }

    .send-button:active {
      transform: scale(0.98);
    }

    .send-button:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    .send-button svg {
      width: 20px;
      height: 20px;
      transition: transform 0.2s;
    }

    .send-button svg path {
      fill: currentColor;
    }

    .send-button:hover svg {
      transform: translateX(2px) translateY(-2px);
    }

    /* Sidebar footer — minimal legitimacy strip below the input. The page
       previously had no footer (body { overflow: hidden }), so visitors saw
       nothing about who runs the product or how to find legal info. Living
       INSIDE the sidebar (not at body bottom) preserves the locked-viewport
       app-shell layout while still giving the page a foot. Mono caption
       matches the /pros editorial tone. */
    .chat-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 20px 12px;
      border-top: 1px solid var(--rule);
      background: var(--ink);
      flex-wrap: wrap;
      flex-shrink: 0;
    }

    .chat-footer-brand {
      font-family: var(--font-mono);
      font-size: 0.66rem;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text-3);
    }

    .chat-footer-links {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-mono);
      font-size: 0.66rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .chat-footer-links a,
    .chat-footer-links .chat-footer-link {
      color: var(--text-3);
      text-decoration: none;
      transition: color 150ms ease;
      /* Reset button chrome so .chat-footer-link looks identical to <a>. */
      background: none;
      border: 0;
      padding: 0;
      margin: 0;
      font: inherit;
      letter-spacing: inherit;
      text-transform: inherit;
      cursor: pointer;
    }

    .chat-footer-links a:hover,
    .chat-footer-links .chat-footer-link:hover {
      color: var(--text);
    }

    .chat-footer-sep {
      color: var(--text-4);
    }

    /* Preview Area */
    .preview-area {
      flex: 1;
      background: var(--ink-3);
      display: flex;
      flex-direction: column;
    }

    .preview-header {
      padding: 12px 20px;
      border-bottom: 1px solid var(--rule);
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--ink-2);
    }

    .preview-url {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--ink-3);
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 0.85rem;
      color: var(--text-2);
    }

    .preview-url .dot {
      width: 8px;
      height: 8px;
      background: var(--rule-2);
      border-radius: 50%;
    }

    .preview-url.live .dot {
      background: var(--good);
    }

    .preview-actions {
      display: flex;
      gap: 8px;
    }

    .preview-action-btn {
      background: var(--ink-4);
      border: none;
      padding: 8px 16px;
      border-radius: 6px;
      color: var(--text-2);
      font-size: 0.85rem;
      cursor: pointer;
      transition: all 0.2s;
    }

    .preview-action-btn:hover {
      background: var(--rule-2);
      color: var(--text);
    }

    .preview-action-btn.primary {
      background: linear-gradient(135deg, var(--pink) 0%, var(--pink-2) 100%);
      color: var(--text);
    }

    .preview-content {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px;
    }

    .preview-placeholder {
      text-align: center;
      max-width: 520px;
      padding: 0 var(--pad, 1.5rem);
    }

    /* Browser-frame icon — quiet placeholder card. Ink-3 surface, rule
       border, 12px radius (style-guide card spec). Soft pink wash inside
       the card hints at "this will be your website" without shouting. */
    .preview-placeholder .icon {
      width: 100px;
      height: 80px;
      background:
        radial-gradient(120px 80px at 50% 100%, rgba(237, 22, 108, 0.08), transparent 70%),
        var(--ink-3);
      border: 1px solid var(--rule);
      border-radius: 12px;
      margin: 0 auto 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .preview-placeholder .icon svg {
      width: 56px;
      height: 42px;
      color: var(--text-3);
      stroke: currentColor;
    }

    .preview-placeholder h3 {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: clamp(1.4rem, 2.2vw, 1.65rem);
      line-height: 1.15;
      letter-spacing: -0.005em;
      margin-bottom: 14px;
      color: var(--text);
    }

    .preview-placeholder p {
      color: var(--text-2);
      line-height: 1.6;
      font-size: 0.98rem;
    }

    .preview-placeholder-mobile {
      display: none;
    }

    .preview-loader-spinner {
      width: 48px;
      height: 48px;
      border: 4px solid var(--rule);
      border-top-color: var(--pink);
      border-right-color: var(--pink-3);
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin: 0 auto 24px;
    }

    .preview-content-container {
      flex: 1;
      display: none;
      background: #fff;
      overflow: hidden;
      position: relative;
    }

    .preview-content-container.active {
      display: flex;
      flex-direction: column;
    }

    .preview-inner {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      width: 100%;
    }

    .preview-inner .site-preview {
      min-height: 100%;
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
    }

    /* Site Preview Styles */
    .site-preview {
      --primary-color: #3B82F6;
      --secondary-color: #10B981;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: #1a1a1a;
      line-height: 1.6;
    }

    /* === Site nav (mirrors builder.css .site-nav* rules) ============= */
    /* Baseline rules so the wordmark + nav links render in the / preview
       even though builder.css isn't loaded on this page. Per-config
       overrides come from generateNavStyles() via the dynamic CSS blob. */
    .site-preview .site-nav {
      background: #ffffff;
      padding: 1rem 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #e5e7eb;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    .site-preview .site-nav-logo {
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--primary-color, #ED166C);
      text-decoration: none;
    }
    .site-preview .site-nav-links {
      display: flex;
      gap: 1.5rem;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .site-preview .site-nav-links a {
      color: #374151;
      text-decoration: none;
      font-size: 0.95rem;
      font-weight: 500;
      transition: color 0.2s;
    }
    .site-preview .site-nav-links a:hover {
      color: var(--primary-color, #ED166C);
    }

    /* Hamburger is desktop-hidden; the preview never goes narrow enough
       to need it, but we keep the markup for parity with the published site. */
    .site-preview .nav-hamburger {
      display: none;
    }

    /* === Wordmark text styling (mirrors rendererUtils.js generateLogoCSS) === */
    /* Long wordmarks must clip rather than push the layout; per-font tunings
       give each logo font the size/weight/spacing/case it was designed for. */
    .site-preview .site-nav-logo--text {
      display: inline-flex;
      align-items: center;
      min-width: 0;
      flex-shrink: 1;
      overflow: clip;
    }
    .site-preview .site-nav-logo-text {
      font-family: 'Bebas Neue', 'Heebo', system-ui, -apple-system, sans-serif;
      font-weight: 700;
      font-size: 1.65rem;
      line-height: 1.4;
      white-space: nowrap;
      overflow: clip;
      text-overflow: ellipsis;
      max-width: 100%;
      padding: 4px 0;
    }
    .site-preview .site-nav-logo-text[data-logo-font="Bebas Neue"] {
      font-family: 'Bebas Neue', 'Heebo', sans-serif;
      font-weight: 400;
      font-size: 1.95rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .site-preview .site-nav-logo-text[data-logo-font="Anton"] {
      font-family: 'Anton', 'Heebo', sans-serif;
      font-weight: 400;
      font-size: 1.85rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .site-preview .site-nav-logo-text[data-logo-font="Playfair Display"] {
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 800;
      font-size: 1.7rem;
      letter-spacing: 0;
      font-style: normal;
      line-height: 1.25;
      padding: 4px 0;
    }
    .site-preview .site-nav-logo-text[data-logo-font="Fraunces"] {
      font-family: 'Fraunces', Georgia, serif;
      font-weight: 800;
      font-size: 1.65rem;
      letter-spacing: 0.005em;
      font-variation-settings: 'opsz' 144, 'SOFT' 50, 'WONK' 1;
      line-height: 1.2;
      padding: 3px 0;
    }
    .site-preview .site-nav-logo-text[data-logo-font="Bricolage Grotesque"] {
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-weight: 800;
      font-size: 1.55rem;
      letter-spacing: -0.025em;
    }
    .site-preview .site-nav-logo-text[data-logo-font="Rubik"] {
      font-family: 'Rubik', 'Heebo', system-ui, sans-serif;
      font-weight: 800;
      font-size: 1.55rem;
      letter-spacing: -0.005em;
    }
    .site-preview .site-nav-logo-text[data-logo-font="Frank Ruhl Libre"] {
      font-family: 'Frank Ruhl Libre', 'Heebo', Georgia, serif;
      font-weight: 700;
      font-size: 1.7rem;
      letter-spacing: 0;
    }
    .site-preview .site-nav-logo-text[data-logo-font="Heebo"] {
      font-family: 'Heebo', system-ui, sans-serif;
      font-weight: 800;
      font-size: 1.55rem;
      letter-spacing: -0.005em;
    }

    /* Make all preview sections responsive to container width */
    .site-preview .section-features,
    .site-preview .section-services,
    .site-preview .section-team,
    .site-preview .section-testimonials,
    .site-preview .section-pricing,
    .site-preview .section-story,
    .site-preview .section-gallery,
    .site-preview .section-contactForm,
    .site-preview .section-about,
    .site-preview .section-video,
    .site-preview .section-gated-resource {
      max-width: 100%;
      padding-left: 20px;
      padding-right: 20px;
      box-sizing: border-box;
    }

    .site-preview .features-grid,
    .site-preview .services-grid,
    .site-preview .team-grid,
    .site-preview .testimonials-grid,
    .site-preview .pricing-grid {
      max-width: 100%;
    }

    .site-preview .section-hero {
      padding-left: 20px;
      padding-right: 20px;
    }

    /* Container queries for preview - make content adapt to preview width */
    @container (max-width: 900px) {
      .site-preview .section-about {
        flex-direction: column !important;
        text-align: center;
        gap: 20px;
      }
      .site-preview .section-about .about-content {
        text-align: center;
      }
      .site-preview .section-about .about-image {
        flex: none;
        width: 100%;
        max-width: 100%;
      }
    }

    /* Fallback for browsers without container queries - use preview-inner width */
    .preview-inner {
      container-type: inline-size;
      container-name: preview;
    }

    /* About section stacks at narrower widths in preview */
    .preview-inner .section-about {
      flex-wrap: wrap;
    }

    .preview-inner .section-about .about-image {
      min-width: 200px;
      flex: 1 1 300px;
    }

    .preview-inner .section-about .about-content {
      min-width: 250px;
      flex: 1 1 400px;
    }

    /* Make grids responsive in narrow preview */
    .preview-inner .features-grid,
    .preview-inner .services-grid,
    .preview-inner .team-grid {
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .preview-inner .testimonials-grid,
    .preview-inner .pricing-grid {
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    /* Container query for very narrow previews */
    @container preview (max-width: 600px) {
      .site-preview .features-grid,
      .site-preview .services-grid,
      .site-preview .team-grid,
      .site-preview .testimonials-grid,
      .site-preview .pricing-grid {
        grid-template-columns: 1fr;
      }

      .site-preview .section-hero h1 {
        font-size: 1.75rem;
      }

      .site-preview .section-hero p {
        font-size: 1rem;
      }

      .site-preview .section-about,
      .site-preview .section-features,
      .site-preview .section-services {
        padding: 40px 15px;
      }
    }

    .section-hero {
      padding: 80px 40px;
      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
      color: white;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .section-hero.dark-bg {
      color: white;
    }

    /* Hero background image support - using img tag */
    .section-hero.has-bg-image {
      background: transparent;
    }

    /* Ensure hero text is always light/white when there's a background image */
    .section-hero.has-bg-image,
    .section-hero.has-bg-image h1,
    .section-hero.has-bg-image p {
      color: white !important;
    }

    .section-hero.has-bg-image .cta-btn {
      background: white;
      color: #1a1a1a;
    }

    .section-hero.has-bg-image .cta-btn:hover {
      background: rgba(255, 255, 255, 0.9);
    }

    .hero-bg-img {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
    }

    .hero-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
      /* Dark overlay to ensure text readability - always applied */
      background: linear-gradient(
        135deg,
        var(--overlay-start, rgba(0, 0, 0, 0.5)),
        var(--overlay-end, rgba(0, 0, 0, 0.6))
      );
    }

    /* Ensure dark overlay for better text contrast on any image */
    .section-hero.has-bg-image .hero-overlay::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.35);
      pointer-events: none;
    }

    .hero-content {
      position: relative;
      z-index: 2;
    }

    .section-hero h1 {
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 1rem;
    }

    .section-hero p {
      font-size: 1.25rem;
      opacity: 0.9;
      margin-bottom: 2rem;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
    }

    .cta-btn {
      display: inline-block;
      padding: 14px 32px;
      background: white;
      color: var(--primary-color);
      text-decoration: none;
      border-radius: 8px;
      font-weight: 600;
      font-size: 1rem;
      transition: transform 0.2s;
    }

    .cta-btn:hover {
      transform: translateY(-2px);
    }

    .cta-btn-white {
      background: white;
      color: #1a1a1a;
    }

    .section-features {
      padding: 60px 40px;
      background: #f8f9fa;
      text-align: center;
    }

    .section-features h2 {
      font-size: 2rem;
      margin-bottom: 2rem;
      color: #1a1a1a;
    }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
      max-width: 1000px;
      margin: 0 auto;
    }

    .feature-item {
      padding: 1.5rem;
      text-align: center;
    }

    .feature-icon {
      width: 60px;
      height: 60px;
      background: var(--primary-color);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1rem;
      color: white;
      font-size: 1.5rem;
    }

    .feature-item h3 {
      font-size: 1.25rem;
      margin-bottom: 0.5rem;
      color: #1a1a1a;
    }

    .feature-item p {
      color: var(--text-3);
      font-size: 0.95rem;
    }

    .feature-image {
      width: 100%;
      max-width: 200px;
      height: auto;
      border-radius: 0.5rem;
      margin: 0 auto 1rem;
      display: block;
    }

    .animation-container {
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .feature-animation {
      width: 100%;
      max-width: 200px;
      height: 150px;
      margin: 0 auto 1rem;
      border-radius: 0.5rem;
    }

    .section-about {
      padding: 60px 40px;
      max-width: 1100px;
      margin: 0 auto;
      display: flex;
      gap: 40px;
      align-items: center;
    }

    .section-about.about-image-left {
      flex-direction: row-reverse;
    }

    .section-about.about-image-right {
      flex-direction: row;
    }

    .section-about .about-content {
      flex: 1;
      text-align: left;
    }

    .section-about .about-image {
      flex: 0 0 40%;
      max-width: 400px;
    }

    .section-about .about-image img {
      width: 100%;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    }

    .section-about h2 {
      font-size: 2rem;
      margin-bottom: 1.5rem;
      color: #1a1a1a;
    }

    .section-about p {
      color: var(--text-4);
      font-size: 1.1rem;
      line-height: 1.8;
    }

    @media (max-width: 768px) {
      .section-about {
        flex-direction: column !important;
        text-align: center;
      }
      .section-about .about-content {
        text-align: center;
      }
      .section-about .about-image {
        flex: none;
        width: 100%;
        max-width: 100%;
      }
      .contactForm-container {
        grid-template-columns: 1fr;
      }
      .section-contactForm {
        padding: 2rem 1rem;
      }
    }

    .section-testimonials {
      padding: 60px 40px;
      background: #f8f9fa;
      text-align: center;
    }

    .section-testimonials h2 {
      font-size: 2rem;
      margin-bottom: 2rem;
      color: #1a1a1a;
    }

    .testimonials-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem;
      justify-content: center;
      max-width: 1000px;
      margin: 0 auto;
    }

    .testimonial-item {
      flex: 1;
      min-width: 280px;
      max-width: 350px;
      padding: 2rem;
      background: white;
      border-radius: 12px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    }

    .testimonial-quote {
      font-size: 1rem;
      font-style: italic;
      color: var(--text-4);
      margin-bottom: 1.5rem;
      line-height: 1.7;
    }

    .testimonial-author-info {
      display: flex;
      align-items: center;
      gap: 1rem;
      text-align: left;
    }

    .testimonial-avatar {
      width: 48px;
      height: 48px;
      min-width: 48px;
      border-radius: 50%;
      overflow: hidden;
      background: var(--primary-color, #3B82F6);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: 600;
      font-size: 1.1rem;
    }

    .testimonial-avatar img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
    }

    .testimonial-name {
      font-weight: 600;
      color: #1a1a1a;
    }

    .testimonial-role {
      font-size: 0.875rem;
      color: var(--text-2);
    }

    .section-pricing {
      padding: 60px 40px;
      text-align: center;
    }

    .section-pricing h2 {
      font-size: 2rem;
      margin-bottom: 0.5rem;
      color: #1a1a1a;
    }

    .section-pricing .subtitle {
      color: var(--text-3);
      margin-bottom: 2rem;
    }

    .pricing-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem;
      justify-content: center;
      max-width: 1000px;
      margin: 0 auto;
    }

    .pricing-item {
      flex: 1;
      min-width: 250px;
      max-width: 300px;
      padding: 2rem;
      background: white;
      border: 1px solid #e0e0e0;
      border-radius: 12px;
      text-align: center;
    }

    .pricing-item.highlighted {
      border-color: var(--primary-color);
      box-shadow: 0 4px 20px rgba(59, 130, 246, 0.2);
      transform: scale(1.02);
    }

    .pricing-name {
      font-size: 1.25rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
      color: #1a1a1a;
    }

    .pricing-price {
      font-size: 2.5rem;
      font-weight: 700;
      color: var(--primary-color);
    }

    .pricing-period {
      font-size: 1rem;
      color: var(--text-2);
      margin-left: 0.5rem;
    }

    .pricing-features {
      list-style: none;
      padding: 0;
      margin: 1.5rem 0;
      text-align: left;
    }

    .pricing-features li {
      padding: 0.5rem 0;
      color: var(--text-4);
      border-bottom: 1px solid #f0f0f0;
    }

    .pricing-features li::before {
      content: '✓';
      color: var(--primary-color);
      margin-right: 0.5rem;
    }

    .pricing-cta {
      display: inline-block;
      padding: 12px 24px;
      background: var(--primary-color);
      color: white;
      text-decoration: none;
      border-radius: 8px;
      font-weight: 600;
    }

    .section-contact {
      padding: 60px 40px;
      text-align: center;
      background: #f8f9fa;
    }

    .section-contact h2 {
      font-size: 2rem;
      margin-bottom: 0.5rem;
      color: #1a1a1a;
    }

    .section-contact p {
      color: var(--text-3);
      margin-bottom: 1rem;
    }

    /* Team Section */
    .section-team {
      padding: 60px 40px;
      background: #f8f9fa;
      text-align: center;
    }

    .section-team h2 {
      font-size: 2rem;
      margin-bottom: 0.5rem;
      color: #1a1a1a;
    }

    .section-team .subtitle {
      color: #6c757d;
      margin-bottom: 2rem;
    }

    .team-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
      max-width: 1200px;
      margin: 0 auto;
    }

    .team-member {
      background: white;
      border-radius: 0.5rem;
      padding: 1.5rem;
      text-align: center;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }

    .team-member-photo {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      margin: 0 auto 1rem;
      background: #e9ecef;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .team-member-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .team-member-photo i {
      font-size: 3rem;
      color: #adb5bd;
    }

    .team-member h3 {
      font-size: 1.125rem;
      margin-bottom: 0.25rem;
      color: #1a1a1a;
    }

    .team-member .role {
      color: var(--primary-color, var(--pink));
      font-size: 0.875rem;
      margin-bottom: 0.75rem;
    }

    .team-member .bio {
      color: #6c757d;
      font-size: 0.875rem;
      line-height: 1.5;
    }

    /* Story Section */
    .section-story {
      padding: 60px 40px;
      background: white;
    }

    .story-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      max-width: 1200px;
      margin: 0 auto;
      align-items: center;
    }

    .story-container.image-left {
      direction: rtl;
    }

    .story-container.image-left > * {
      direction: ltr;
    }

    .story-content h2 {
      margin-bottom: 1rem;
      color: #1a1a1a;
    }

    .story-content .story-text {
      color: #4b5563;
      line-height: 1.8;
      margin-bottom: 2rem;
    }

    .story-highlights {
      display: flex;
      gap: 2rem;
    }

    .story-highlight {
      text-align: center;
    }

    .story-highlight .value {
      font-size: 2rem;
      font-weight: 700;
      color: var(--primary-color, var(--pink));
    }

    .story-highlight .label {
      font-size: 0.875rem;
      color: #6c757d;
    }

    .story-image {
      border-radius: 0.5rem;
      overflow: hidden;
      background: #e9ecef;
      aspect-ratio: 4/3;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .story-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .story-image i {
      font-size: 4rem;
      color: #adb5bd;
    }

    /* Gallery Section */
    .section-gallery {
      padding: 60px 40px;
      background: #f8f9fa;
      text-align: center;
    }

    .section-gallery h2 {
      font-size: 2rem;
      margin-bottom: 0.5rem;
      color: #1a1a1a;
    }

    .section-gallery .subtitle {
      color: #6c757d;
      margin-bottom: 2rem;
    }

    .gallery-grid {
      display: grid;
      gap: 1rem;
      max-width: 1200px;
      margin: 0 auto;
    }

    .gallery-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
    .gallery-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
    .gallery-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

    .gallery-item {
      position: relative;
      aspect-ratio: 1;
      border-radius: 0.5rem;
      overflow: hidden;
      background: #e9ecef;
    }

    .gallery-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s;
    }

    .gallery-item:hover img {
      transform: scale(1.05);
    }

    .gallery-item .caption {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 1rem;
      background: linear-gradient(transparent, rgba(0,0,0,0.7));
      color: white;
      font-size: 0.875rem;
      line-height: 1.4;
      opacity: 0;
      transition: opacity 0.3s;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      line-clamp: 3;
      overflow: hidden;
      overflow-wrap: break-word;
    }

    .gallery-item:hover .caption {
      opacity: 1;
    }

    .gallery-captions-always .gallery-item .caption {
      opacity: 1;
    }

    .gallery-item .placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      color: #adb5bd;
      font-size: 2rem;
    }

    /* Services Section */
    .section-services {
      padding: 60px 40px;
      background: white;
      text-align: center;
    }

    .section-services h2 {
      font-size: 2rem;
      margin-bottom: 0.5rem;
      color: #1a1a1a;
    }

    .section-services .subtitle {
      color: #6c757d;
      margin-bottom: 2rem;
    }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.5rem;
      max-width: 1200px;
      margin: 0 auto;
    }

    .service-item {
      background: #f8f9fa;
      border-radius: 0.5rem;
      padding: 2rem;
      text-align: left;
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .service-item:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    }

    .service-item .service-icon {
      width: 60px;
      height: 60px;
      background: var(--primary-color, var(--pink));
      color: white;
      border-radius: 0.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      margin-bottom: 1rem;
    }

    .service-item h3 {
      font-size: 1.25rem;
      margin-bottom: 0.5rem;
      color: #1a1a1a;
    }

    .service-item .description {
      color: #6c757d;
      font-size: 0.9rem;
      line-height: 1.6;
      margin-bottom: 1rem;
    }

    .service-item .price {
      font-size: 1.125rem;
      font-weight: 600;
      color: var(--primary-color, var(--pink));
      margin-bottom: 1rem;
    }

    .service-item .service-cta {
      display: inline-block;
      padding: 0.5rem 1rem;
      background: var(--primary-color, var(--pink));
      color: white;
      text-decoration: none;
      border-radius: 0.375rem;
      font-size: 0.875rem;
      transition: background 0.2s;
    }

    .service-item .service-cta:hover {
      background: var(--pink-2);
    }

    /* Contact Form Section */
    .section-contactForm {
      padding: 4rem 2rem;
      background: white;
    }

    .contactForm-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      max-width: 1000px;
      margin: 0 auto;
    }

    .contactForm-content h2 {
      margin-bottom: 0.5rem;
      color: #1a1a1a;
    }

    .contactForm-content .subtitle {
      color: #6c757d;
      margin-bottom: 2rem;
    }

    .contactForm-info {
      margin-top: 2rem;
    }

    .contactForm-info .info-item {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      margin-bottom: 1rem;
    }

    .contactForm-info .info-item i {
      color: var(--primary-color, var(--pink));
      font-size: 1.25rem;
      width: 24px;
    }

    .contactForm-info .info-item span {
      color: #4b5563;
    }

    .contact-form .form-group {
      margin-bottom: 1rem;
    }

    .contact-form label {
      display: block;
      font-size: 0.875rem;
      font-weight: 500;
      margin-bottom: 0.25rem;
      color: #374151;
    }

    .contact-form input,
    .contact-form textarea,
    .contact-form select {
      width: 100%;
      padding: 0.75rem;
      border: 1px solid #d1d5db;
      border-radius: 0.375rem;
      font-size: 0.9rem;
      transition: border-color 0.2s, box-shadow 0.2s;
    }

    .contact-form input:focus,
    .contact-form textarea:focus,
    .contact-form select:focus {
      outline: none;
      border-color: var(--primary-color, var(--pink));
      box-shadow: 0 0 0 3px rgba(237, 22, 108, 0.1);
    }

    .contact-form textarea {
      resize: vertical;
      min-height: 120px;
    }

    .contact-form .submit-btn {
      width: 100%;
      padding: 0.75rem;
      background: var(--primary-color, var(--pink));
      color: white;
      border: none;
      border-radius: 0.375rem;
      font-size: 1rem;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.2s;
    }

    .contact-form .submit-btn:hover {
      background: var(--pink-2);
    }

    .section-footer {
      padding: 2rem;
      background: var(--ink-2);
      color: white;
      text-align: center;
    }

    .section-footer p {
      margin: 0;
      opacity: 0.8;
    }

    /* Video Section */
    .section-video {
      padding: 5rem 2rem;
      background: #fff;
    }
    .section-video h2 {
      text-align: center;
      font-size: 2.25rem;
      margin-bottom: 0.5rem;
    }
    .section-video .subtitle {
      text-align: center;
      color: #6b7280;
      margin-bottom: 2rem;
    }
    .video-container {
      max-width: 960px;
      margin: 0 auto;
    }
    .video-wrapper {
      position: relative;
      width: 100%;
      padding-bottom: 56.25%;
      height: 0;
      overflow: hidden;
      border-radius: 0.75rem;
      background: var(--ink);
    }
    .video-wrapper.ratio-4-3 { padding-bottom: 75%; }
    .video-wrapper.ratio-1-1 { padding-bottom: 100%; }
    .video-wrapper.ratio-9-16 { padding-bottom: 177.78%; max-width: 400px; margin: 0 auto; }
    .video-wrapper iframe {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }
    .video-placeholder {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #9ca3af;
      gap: 0.5rem;
      font-size: 1.25rem;
    }
    .video-placeholder i {
      font-size: 3rem;
    }

    /* Gated Resource Section */
    .section-gated-resource {
      padding: 5rem 2rem;
      background: #f9fafb;
    }
    .gated-resource-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      max-width: 1000px;
      margin: 0 auto;
      align-items: center;
    }
    .gated-resource-content h2 {
      font-size: 2rem;
      margin-bottom: 1rem;
    }
    .gated-resource-content .description {
      color: #6b7280;
      margin-bottom: 2rem;
      line-height: 1.7;
    }
    .gated-resource-preview {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 250px;
      background: #e5e7eb;
      border-radius: 1rem;
      overflow: hidden;
    }
    .gated-resource-preview img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 1rem;
    }
    .gated-resource-preview .resource-icon {
      font-size: 4rem;
      color: #9ca3af;
    }
    .gated-resource-form .form-group {
      margin-bottom: 1rem;
    }
    .gated-resource-form label {
      display: block;
      margin-bottom: 0.25rem;
      font-weight: 500;
      font-size: 0.9rem;
    }
    .gated-resource-form input {
      width: 100%;
      padding: 0.75rem;
      border: 1px solid #d1d5db;
      border-radius: 0.375rem;
      font-size: 1rem;
    }
    .gated-resource-form .gate-btn {
      width: 100%;
      padding: 0.875rem;
      background: var(--primary-color, #3B82F6);
      color: white;
      border: none;
      border-radius: 0.5rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s;
      font-size: 1rem;
      margin-top: 0.5rem;
    }
    .gated-resource-form .gate-btn:hover {
      opacity: 0.9;
    }

    /* Media Section */
    .section-media {
      padding: 3rem 2rem;
    }
    .section-media .media-container {
      max-width: 900px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
    }
    .section-media .media-visual {
      max-width: 100%;
      border-radius: 12px;
      overflow: hidden;
    }
    .section-media .media-visual img {
      max-width: 100%;
      max-height: 70vh;
      width: auto;
      height: auto;
      display: block;
      border-radius: 12px;
    }
    .section-media .media-visual video {
      max-width: 100%;
      max-height: 70vh;
      width: auto;
      height: auto;
      display: block;
      border-radius: 12px;
    }
    .section-media.layout-full {
      padding: 0;
    }
    .section-media.layout-full .media-container {
      max-width: none;
    }
    .section-media.layout-full .media-visual,
    .section-media.layout-full .media-visual img,
    .section-media.layout-full .media-visual video {
      border-radius: 0;
    }
    .section-media .media-caption {
      text-align: center;
      color: #6b7280;
      font-size: 0.9rem;
      margin-top: 0.75rem;
    }

    /* CTA Section */
    .section-cta {
      padding: 4rem 2rem;
    }
    .section-cta .cta-container {
      max-width: 900px;
      margin: 0 auto;
      text-align: center;
    }
    .section-cta h2 {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 0.75rem;
    }
    .section-cta .cta-description {
      font-size: 1.125rem;
      color: #6b7280;
      margin-bottom: 1.5rem;
      line-height: 1.6;
    }
    .section-cta .cta-buttons {
      display: flex;
      gap: 0.75rem;
      justify-content: center;
      flex-wrap: wrap;
    }
    .section-cta .cta-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 1rem;
    }
    .section-cta.layout-banner {
      background: var(--primary-color, var(--pink));
      color: var(--text);
    }
    .section-cta.layout-banner h2 { color: var(--text); }
    .section-cta.layout-banner .cta-description { color: rgba(255,255,255,0.9); }
    .section-cta.layout-banner .cta-btn { background: #fff; color: var(--primary-color, var(--pink)); }
    .section-cta.layout-banner .cta-btn-outline { background: transparent; color: var(--text); border: 2px solid #fff; }
    .section-cta.layout-centered .cta-container {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 1rem;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
      padding: 3rem;
      max-width: 640px;
    }
    .section-cta.layout-split .cta-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      align-items: center;
      max-width: 1100px;
      text-align: left;
    }
    .section-cta.layout-split .cta-buttons { justify-content: flex-start; }
    .section-cta.layout-minimal { background: transparent; padding: 2.5rem 2rem; }
    .section-cta.layout-minimal .cta-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
      text-align: left;
    }
    .section-cta.layout-minimal h2 { font-size: 1.5rem; margin-bottom: 0.5rem; }
    .section-cta.layout-minimal .cta-description { margin-bottom: 0; font-size: 1rem; }
    .section-cta.layout-minimal .cta-buttons { flex-shrink: 0; }
    @media (max-width: 768px) {
      .section-cta.layout-split .cta-container { grid-template-columns: 1fr; text-align: center; }
      .section-cta.layout-split .cta-buttons { justify-content: center; }
      .section-cta.layout-minimal .cta-content { flex-direction: column; text-align: center; }
      .section-cta.layout-minimal .cta-buttons { justify-content: center; }
    }

    /* Motion Animation Section - Two Column Layout */
    .section-motion-animation {
      padding: 5rem 2rem;
      overflow: hidden;
    }
    .motion-anim-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      max-width: 1100px;
      margin: 0 auto;
      align-items: center;
    }
    .motion-anim-container.anim-right {
      direction: rtl;
    }
    .motion-anim-container.anim-right > * {
      direction: ltr;
    }
    .motion-anim-text .motion-anim-headline {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 1rem;
      line-height: 1.2;
    }
    .motion-anim-text .motion-anim-desc {
      font-size: 1.1rem;
      line-height: 1.7;
      color: #4b5563;
    }
    .motion-anim-visual .animation-display {
      width: 100%;
      border-radius: 12px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 300px;
    }
    .motion-anim-visual .animation-display video {
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 12px;
      display: block;
    }
    .motion-anim-visual .animation-display svg {
      max-width: 100%;
      height: auto;
    }
    .motion-anim-visual .animation-display,
    .motion-anim-visual .animation-display * {
      touch-action: pan-y;
      pointer-events: none;
    }
    .motion-anim-visual .section-media-video {
      width: 100%;
      aspect-ratio: 16/9;
      border-radius: 12px;
      overflow: hidden;
    }
    .motion-anim-visual .section-media-video iframe {
      width: 100%;
      height: 100%;
      border: none;
    }
    .motion-anim-visual .animation-placeholder {
      background: linear-gradient(135deg, #667eea, #764ba2);
      width: 100%;
      min-height: 300px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .motion-anim-visual .animation-placeholder-text {
      color: var(--text);
      font-size: 1.2rem;
    }
    .motion-anim-visual .animation-loading {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 300px;
      background: linear-gradient(135deg, #667eea, #764ba2);
      border-radius: 12px;
      color: var(--text);
      gap: 1rem;
    }
    .animation-spinner {
      width: 36px;
      height: 36px;
      border: 3px solid rgba(255,255,255,0.3);
      border-top-color: var(--text);
      border-radius: 50%;
      animation: anim-spin 0.8s linear infinite;
    }
    @keyframes anim-spin {
      to { transform: rotate(360deg); }
    }
    .animation-loading p {
      margin: 0;
      font-size: 0.95rem;
      opacity: 0.9;
    }
    @media (max-width: 768px) {
      .motion-anim-container {
        grid-template-columns: 1fr;
        gap: 2rem;
      }
      .motion-anim-container.anim-right {
        direction: ltr;
      }
      .section-motion-animation {
        padding: 3rem 1rem;
      }
    }

    /* Preview Mode Indicator — replaces the loud pink-gradient banner with
       a quieter ink-2 status strip + caution-dot, mirroring /pros .hero-eyebrow.
       The mode is informational ("you can edit by typing"), not alarming —
       the banner shouldn't feel like a system warning. */
    .preview-mode-banner {
      display: none;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      background: var(--ink-2);
      border-bottom: 1px solid var(--rule);
      color: var(--text-2);
      padding: 9px 16px;
      text-align: center;
      font-family: var(--font-mono);
      font-size: 0.74rem;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .preview-mode-banner.active {
      display: flex;
    }

    .preview-mode-banner::before {
      content: '';
      display: inline-block;
      width: 8px;
      height: 8px;
      background: var(--hi);
      border-radius: 50%;
      box-shadow: 0 0 0 0 rgba(253, 224, 71, 0.5);
      animation: pulse-hi 2.4s ease-in-out infinite;
    }

    /* Hide the legacy FA icon — the caution-dot replaces it */
    .preview-mode-banner i {
      display: none;
    }

    /* Header Save CTA — lives in the preview toolbar (NOT overlaid on iframe, so
       users can't mistake it for part of their generated site). Shown for
       unauthenticated users after site generation; hidden once signed in. */
    .preview-save-btn {
      display: none;
      align-items: center;
      gap: 8px;
      padding: 10px 20px;
      background: linear-gradient(135deg, var(--pink) 0%, var(--pink-2) 100%);
      color: var(--text);
      border: none;
      border-radius: 8px;
      font-size: 0.92rem;
      font-weight: 600;
      letter-spacing: 0.01em;
      cursor: pointer;
      box-shadow: 0 2px 10px rgba(237, 22, 108, 0.28);
      transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    .preview-save-btn:not(.btn-hidden) {
      display: inline-flex;
    }

    .preview-save-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(237, 22, 108, 0.42);
    }

    .preview-save-btn:active {
      transform: translateY(0);
    }

    .preview-save-btn i {
      font-size: 0.95rem;
      opacity: 0.95;
    }

    /* Preview mode click indicator */
    .preview-inner.preview-mode {
      cursor: pointer;
    }

    /* Edit tooltip on hover for preview mode */
    .preview-inner.preview-mode .site-preview {
      position: relative;
    }

    .preview-inner.preview-mode .site-preview::before {
      content: var(--preview-mode-tooltip, 'Click anywhere to edit - Sign up required');
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(0, 0, 0, 0.85);
      color: white;
      padding: 14px 24px;
      border-radius: 10px;
      font-size: 1rem;
      font-weight: 500;
      opacity: 0;
      transition: opacity 0.3s;
      pointer-events: none;
      white-space: nowrap;
      z-index: 100;
    }

    .preview-inner.preview-mode:hover .site-preview::before {
      opacity: 1;
    }

    /* Auth Modal — editorial-brutalist treatment matching /pros: square-ish
       corners, sharp rule-2 border, ink-2 surface, soft pink-glow shadow on
       the card so it reads as elevated without floating. */
    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(10, 14, 26, 0.78);
      z-index: 1000;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .modal-overlay.active {
      display: flex;
      animation: modalOverlayIn 220ms ease-out both;
    }

    @keyframes modalOverlayIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    .auth-modal {
      background: var(--ink-3);
      background-image:
        radial-gradient(420px 200px at 100% -10%, rgba(237, 22, 108, 0.10), transparent 60%);
      border-radius: 16px;
      padding: 36px 32px 28px;
      max-width: 440px;
      width: 90%;
      border: 1px solid var(--rule);
      position: relative;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.30);
      animation: modalCardIn 320ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }

    @keyframes modalCardIn {
      from { opacity: 0; transform: translateY(12px) scale(0.98); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    .auth-modal-close {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 32px;
      height: 32px;
      background: transparent;
      border: 1px solid var(--rule);
      border-radius: 50%;
      color: var(--text-3);
      font-size: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      line-height: 1;
    }

    .auth-modal-close:hover {
      background: var(--ink-4);
      color: var(--text);
      border-color: var(--rule-2);
    }

    /* Yellow eyebrow above the auth-modal H2 — same /pros .hero-eyebrow
       pattern as .welcome-eyebrow. Single bridge accent: the editorial
       polish persists in this small piece even though the rest of the
       modal uses style-guide dark-mode chrome. */
    .auth-modal .auth-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      font-family: var(--font-mono);
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--hi);
      background: var(--ink);
      border: 1px solid var(--rule);
      padding: 0.4rem 0.7rem;
      border-radius: 4px;
      margin: 0 auto 14px;
    }

    .auth-step {
      text-align: center;
    }

    .auth-step > * {
      text-align: left;
    }

    .auth-step .auth-eyebrow,
    .auth-step h2,
    .auth-step .subtitle {
      text-align: center;
    }

    .auth-modal .auth-eyebrow-dot {
      width: 6px;
      height: 6px;
      background: var(--hi);
      border-radius: 50%;
      box-shadow: 0 0 0 0 rgba(253, 224, 71, 0.5);
      animation: pulse-hi 2.4s ease-in-out infinite;
    }

    .auth-modal h2 {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 1.85rem;
      line-height: 1.15;
      letter-spacing: -0.005em;
      margin: 0 0 10px;
      text-align: center;
      color: var(--text);
    }

    .auth-modal .subtitle {
      color: var(--text-2);
      text-align: center;
      margin-bottom: 24px;
      font-size: 0.92rem;
      line-height: 1.5;
    }

    .auth-modal .form-group {
      margin-bottom: 16px;
    }

    .auth-modal label {
      display: block;
      margin-bottom: 8px;
      color: var(--text-3);
      font-family: var(--font-mono);
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .auth-modal input {
      width: 100%;
      padding: 14px 16px;
      background: var(--ink-4);
      border: 1px solid var(--rule);
      border-radius: 8px;
      color: var(--text);
      font-family: var(--font-body);
      font-size: 16px; /* Prevents zoom on iOS — required, do not lower */
      -webkit-appearance: none;
      touch-action: manipulation;
      position: relative;
      z-index: 1;
      transition: border-color 0.2s, box-shadow 0.2s;
    }

    .auth-modal input::placeholder {
      color: var(--text-3);
    }

    .auth-modal input:focus {
      outline: none;
      border-color: var(--pink);
      box-shadow: 0 0 0 3px rgba(237, 22, 108, 0.15);
    }

    /* Prevent autofill styling on auth inputs */
    .auth-modal input:-webkit-autofill,
    .auth-modal input:-webkit-autofill:hover,
    .auth-modal input:-webkit-autofill:focus {
      -webkit-text-fill-color: var(--text);
      -webkit-box-shadow: 0 0 0px 1000px var(--ink-3) inset;
      transition: background-color 5000s ease-in-out 0s;
    }

    /* Primary modal CTA — style-guide primary button: pink gradient,
       translateY(-2px) hover, scale(0.98) active. Display-font caps label
       carries the editorial polish over from /pros without changing the
       button's behavior. */
    .auth-modal .auth-button {
      width: 100%;
      padding: 14px 32px;
      background: var(--pink-grad);
      border: none;
      border-radius: 8px;
      color: #fff;
      font-family: var(--font-display);
      font-weight: 900;
      font-size: 1.05rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(237, 22, 108, 0.30);
      transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    }

    .auth-modal .auth-button:hover {
      background: var(--pink-grad-hover);
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(237, 22, 108, 0.40);
    }

    .auth-modal .auth-button:active {
      transform: scale(0.98);
    }

    /* Reassurance line below the primary CTA — highest-anxiety moment on the
       page, so one specific, truthful sentence cuts bounce rate more than any
       decorative flourish. Small, muted, close to the button so the eye reads
       them as a pair. */
    .auth-modal .auth-reassurance {
      margin: 12px 0 0;
      text-align: center;
      color: var(--text-3);
      font-size: 0.82rem;
      line-height: 1.4;
    }

    /* Trust panel — three short, honest reassurances stacked under the CTA.
       Style matches the /pros landing convention: ✓ marks in --good, mono
       caption type, muted color so they sit below the button without
       competing for attention. Each claim must remain VERIFIABLY TRUE:
       magic-link auth (no password), no card on signup, privacy policy. */
    .auth-modal .auth-trust-panel {
      list-style: none;
      margin: 18px 0 0;
      padding: 14px 0 0;
      border-top: 1px solid var(--rule);
      display: flex;
      flex-direction: column;
      gap: 8px;
      font-family: var(--font-mono);
      font-size: 0.74rem;
      line-height: 1.45;
      color: var(--text-2);
      letter-spacing: 0.005em;
    }

    .auth-modal .auth-trust-panel li {
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }

    .auth-modal .auth-trust-panel .auth-trust-check {
      color: var(--good);
      font-weight: 700;
      font-size: 0.82rem;
      flex: 0 0 auto;
      line-height: 1.45;
    }

    .auth-modal .auth-trust-panel a {
      color: var(--text);
      text-decoration: underline;
      text-decoration-color: var(--rule-2);
      text-underline-offset: 2px;
      transition: text-decoration-color 150ms ease, color 150ms ease;
    }

    .auth-modal .auth-trust-panel a:hover {
      color: var(--pink-3);
      text-decoration-color: var(--pink);
    }

    .auth-modal .auth-button:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
    }

    .auth-modal .error-message {
      background: #3d1f1f;
      color: #ff6b6b;
      padding: 12px;
      border-radius: 8px;
      margin-bottom: 16px;
      font-size: 0.9rem;
      display: none;
    }

    .auth-modal .error-message.show {
      display: block;
    }

    .auth-modal .success-message {
      background: #1f3d2a;
      color: #10b981;
      padding: 12px;
      border-radius: 8px;
      margin-bottom: 16px;
      font-size: 0.9rem;
      display: none;
    }

    .auth-modal .success-message.show {
      display: block;
    }

    .auth-modal .code-input {
      font-size: 1.5rem;
      letter-spacing: 8px;
      text-align: center;
      font-family: 'Courier New', monospace;
      touch-action: manipulation;
    }

    .auth-step {
      display: none;
    }

    .auth-step.active {
      display: block;
    }

    .auth-modal .back-link {
      text-align: center;
      margin-top: 16px;
    }

    .auth-modal .back-link a {
      color: var(--pink);
      text-decoration: none;
      font-size: 0.9rem;
    }

    .auth-modal .back-link a:hover {
      text-decoration: underline;
    }

    /* Generating state — style-guide card (#282828, 12px radius, dark
       border) with a yellow "BUILDING" tag in the corner. Yellow tag is
       the single bridge accent from /pros — appears at the most-watched
       moment of the page (the agent actively working). */
    .generating-indicator {
      display: none;
      padding: 22px 22px 20px;
      background: var(--ink-3);
      border-radius: 12px;
      border: 1px solid var(--rule);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.30);
      position: relative;
    }

    .generating-indicator::before {
      content: 'BUILDING';
      position: absolute;
      top: -1px;
      left: -1px;
      padding: 5px 11px 6px;
      background: var(--hi);
      color: var(--ink);
      font-family: var(--font-mono);
      font-weight: 700;
      font-size: 0.66rem;
      letter-spacing: 0.18em;
      border-radius: 12px 0 12px 0;
    }

    .generating-indicator.active {
      display: block;
      animation: gen-fade-in 220ms ease-out both;
    }

    @keyframes gen-fade-in {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .generating-content {
      text-align: left;
      padding-top: 8px;
    }

    .generating-icon {
      display: flex;
      align-items: center;
      gap: 0.55rem;
      margin-bottom: 14px;
    }

    /* Replaces the rotating-ring spinner with the /pros caution-dot pattern:
       one yellow dot pulses (the "alive" signal) next to a mono caption.
       Calmer than a spinning ring and consistent with /pros visual language. */
    .generating-indicator .spinner {
      width: 10px;
      height: 10px;
      background: var(--hi);
      border: 0;
      border-radius: 50%;
      box-shadow: 0 0 0 0 rgba(253, 224, 71, 0.5);
      animation: pulse-hi 2.4s ease-in-out infinite;
    }

    @keyframes pulse-hi {
      0%, 100% { box-shadow: 0 0 0 0 rgba(253, 224, 71, 0.5); }
      50%      { box-shadow: 0 0 0 10px rgba(253, 224, 71, 0); }
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    .generating-title {
      font-family: var(--font-display);
      font-weight: 800;
      letter-spacing: -0.005em;
      color: var(--text);
      font-size: 1.5rem;
      line-height: 1.15;
      margin: 0 0 12px 0;
    }

    .generating-status {
      font-family: var(--font-mono);
      font-size: 0.78rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--pink-3);
      margin: 0 0 18px 0;
      min-height: 1.4em;
    }

    .generating-progress {
      width: 100%;
      height: 4px;
      background: var(--ink-3);
      border: 1px solid var(--rule);
      border-radius: 2px;
      overflow: hidden;
      margin-bottom: 14px;
    }

    .generating-progress-bar {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--pink), var(--pink-3), var(--pink));
      background-size: 200% 100%;
      border-radius: 2px;
      transition: width 0.5s ease;
      animation: shimmer 2s infinite linear;
      box-shadow: 0 0 12px var(--pink-glow);
    }

    @keyframes shimmer {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    .generating-time {
      font-family: var(--font-mono);
      color: var(--text-3);
      font-size: 0.74rem;
      letter-spacing: 0.04em;
      margin: 0;
      font-weight: 400;
    }

    /* User menu */
    .user-menu {
      display: none;
    }

    .user-menu.authenticated {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .user-menu {
      position: relative;
    }

    .user-avatar {
      width: 32px;
      height: 32px;
      background: linear-gradient(135deg, var(--pink) 0%, var(--pink-2) 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 0.85rem;
      cursor: pointer;
      transition: box-shadow 0.2s;
    }

    .user-avatar:hover {
      box-shadow: 0 0 0 2px rgba(237, 22, 108, 0.4);
    }

    .user-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      background: #2a2a2a;
      border: 1px solid var(--rule);
      border-radius: 8px;
      min-width: 180px;
      padding: 6px 0;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
      z-index: 1000;
    }

    .user-dropdown.open {
      display: block;
    }

    .user-dropdown-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 16px;
      color: var(--text-2);
      text-decoration: none;
      font-size: 0.85rem;
      transition: background 0.15s, color 0.15s;
    }

    .user-dropdown-item:hover {
      background: var(--ink-3);
      color: var(--text);
    }

    .user-dropdown-item i {
      width: 16px;
      text-align: center;
      font-size: 0.8rem;
    }

    .user-dropdown-divider {
      height: 1px;
      background: var(--rule-2);
      margin: 4px 0;
    }

    .user-dropdown-logout:hover {
      color: var(--pink);
    }

    /* My Sites Link */
    /* Header utility links — style-guide secondary button pattern:
       #333 fill, #444 border, 8px radius, 0.875rem text, hover to #3d3d3d.
       Same look users will see on /sites in the logged-in product, so the
       transition feels seamless. */
    .my-sites-link {
      display: none;
      padding: 0.5rem 1rem;
      background: var(--ink-4);
      border: 1px solid var(--rule);
      border-radius: 8px;
      color: var(--text-2);
      text-decoration: none;
      font-family: var(--font-body);
      font-size: 0.875rem;
      font-weight: 500;
      transition: all 0.2s;
    }

    .my-sites-link:hover {
      background: var(--rule-2);
      color: var(--text);
    }

    .my-sites-link.show {
      display: inline-flex;
      align-items: center;
    }

    /* Chat-sidebar context: sidebar is fixed 400px wide on desktop, so the
       "My Sites" pill + lang-select + avatar combination overflowed and
       clipped the avatar at the sidebar edge. The avatar's dropdown menu
       already exposes "My Sites" as its first item, so the pill is
       redundant in this context — hide it at every width. /pros and other
       full-width nav contexts (where this pattern isn't used) keep their
       pills via their own scoped styles. */
    .chat-header .my-sites-link,
    .chat-header .my-sites-link.show {
      display: none !important;
    }

    /* Tighten the lang-select trigger inside the chat-header so the right
       cluster has comfortable breathing room next to the wordmark. */
    .chat-header .lang-select-trigger {
      padding: 0.45rem 0.7rem;
      gap: 6px;
    }
    .chat-header .lang-select-current {
      font-size: 0.82rem;
    }
    .chat-header .lang-select-chevron {
      font-size: 0.62rem;
    }

    /* Right cluster never compresses below its content width. */
    .chat-header .header-right-section {
      flex-shrink: 0;
    }
    .chat-header .user-menu.authenticated,
    .chat-header .user-avatar {
      flex-shrink: 0;
    }

    /* sign-in trigger — rendered as a <button> (not <a href="#">) so the
       default click action is "do nothing" rather than "navigate to #" if
       the JS handler ever fails to attach. Style-guide secondary button. */
    .sign-in-link {
      padding: 0.5rem 1rem;
      background: var(--ink-4);
      border: 1px solid var(--rule);
      border-radius: 8px;
      color: var(--text-2);
      text-decoration: none;
      font-family: var(--font-body);
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
    }

    .sign-in-link:hover {
      background: var(--rule-2);
      color: var(--text);
    }

    .sign-in-link:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(237, 22, 108, 0.15);
    }

    /* Language selector — replaces the single-button toggle that could strand
       non-Hebrew readers. Dropdown shows both options with the current language
       checked, so switching is reversible without reading the UI. */
    .lang-select {
      position: relative;
    }

    .lang-select-trigger {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 0.5rem 0.85rem 0.5rem 1rem;
      background: var(--ink-4);
      border: 1px solid var(--rule);
      border-radius: 8px;
      color: var(--text-2);
      font-family: var(--font-body);
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1;
      cursor: pointer;
      transition: all 0.2s;
    }

    .lang-select-trigger:hover,
    .lang-select-trigger:focus-visible {
      outline: none;
      background: var(--rule-2);
      color: var(--text);
    }

    .lang-select.open .lang-select-trigger {
      border-color: var(--pink);
      background: var(--rule-2);
      color: var(--text);
    }

    .lang-select-icon {
      font-size: 0.85rem;
      color: var(--text-3);
    }

    .lang-select.open .lang-select-icon,
    .lang-select-trigger:hover .lang-select-icon {
      color: var(--pink);
    }

    .lang-select-current {
      white-space: nowrap;
    }

    .lang-select-chevron {
      font-size: 0.7rem;
      color: var(--text-3);
      transition: transform 0.2s ease;
    }

    .lang-select.open .lang-select-chevron {
      transform: rotate(180deg);
    }

    .lang-select-menu {
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      min-width: 160px;
      margin: 0;
      padding: 6px;
      list-style: none;
      background: #2a2a2a;
      border: 1px solid var(--rule);
      border-radius: 10px;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
      opacity: 0;
      transform: translateY(-4px);
      pointer-events: none;
      transition: opacity 0.15s ease, transform 0.15s ease;
      z-index: 200;
    }

    .lang-select.open .lang-select-menu {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .lang-select-option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 8px 10px;
      border-radius: 6px;
      color: #d0d0d0;
      font-size: 0.88rem;
      cursor: pointer;
      transition: background 0.12s ease, color 0.12s ease;
    }

    .lang-select-option:hover,
    .lang-select-option:focus-visible {
      outline: none;
      background: #3a3a3a;
      color: var(--text);
    }

    .lang-select-option.active {
      color: var(--text);
    }

    .lang-select-check {
      font-size: 0.75rem;
      color: var(--pink);
      opacity: 0;
    }

    .lang-select-option.active .lang-select-check {
      opacity: 1;
    }

    /* RTL support — menu anchors left edge when page is RTL so it doesn't overflow */
    [dir="rtl"] .lang-select-menu {
      right: auto;
      left: 0;
    }

    /* Header right section */
    .header-right-section {
      margin-left: auto;
      display: flex;
      gap: 12px;
      align-items: center;
    }

    /* Hidden buttons */
    .btn-hidden {
      display: none;
    }

    /* Mobile-First Responsive Design */

    /* Safe area support for notched devices (iPhone X+, Android) */
    @supports (padding: env(safe-area-inset-top)) {
      body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
      }

      .chat-input-container {
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
      }
    }

    /* Touch optimizations */
    * {
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
    }

    /* Momentum scrolling for smooth iOS experience */
    .chat-messages,
    .preview-content-container {
      -webkit-overflow-scrolling: touch;
    }

    /* Mobile view (default for mobile-first).
       Keep the chat-as-app fixed-viewport layout: the page itself does not
       scroll on mobile — instead, .chat-messages scrolls internally so the
       sticky input stays anchored at the bottom. This requires the
       chat-sidebar to have an explicit height (otherwise the inner
       overflow:auto has nothing to overflow against). */
    @media (max-width: 768px) {
      body {
        height: 100vh;
        height: 100dvh;
        height: -webkit-fill-available;
        overflow: hidden;
      }

      .builder-container {
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
        height: -webkit-fill-available;
      }

      .chat-sidebar {
        width: 100%;
        min-width: auto;
        height: 100vh;
        height: 100dvh; /* Dynamic viewport height for mobile browsers */
        max-height: -webkit-fill-available;
        border-right: none;
        border-bottom: 1px solid var(--rule);
        overflow: hidden;
      }

      /* Hide preview on mobile - focus on chat */
      .preview-area {
        display: none;
      }

      .chat-header {
        /* Reclaimed the legacy 56px right padding — its absolute-positioned
           neighbour was retired and it was eating the space the avatar needed.
           12px keeps the avatar's hover ring (2px) clear of the viewport edge. */
        padding: 12px 12px 12px 16px;
        position: sticky;
        top: 0;
        background: var(--ink);
        z-index: 10;
        gap: 8px;
      }

      /* Wordmark hides on phones — the DL square mark carries the brand and
         saves ~120px so the right-side cluster (lang + avatar) breathes. */
      .chat-header .logo-text {
        display: none;
      }

      /* Right-side cluster: tighter gap and no shrink so nothing crops. */
      .header-right-section {
        gap: 8px;
        flex-shrink: 0;
      }

      /* "My Sites" link is redundant on phones — the avatar dropdown already
         exposes it. Removing it reclaims a full pill of horizontal space. */
      .chat-header .my-sites-link {
        display: none !important;
      }

      /* Lang select collapses to icon + 2-letter code (EN / עב). The chevron
         hides; the menu still opens on tap and shows full language names. */
      .lang-select-trigger {
        padding: 0.45rem 0.6rem;
        gap: 6px;
      }

      .lang-select-current {
        font-size: 0.78rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }

      .lang-select-chevron {
        display: none;
      }

      /* Avatar gets a small flex-shrink guard so it never compresses below
         32px even when the user's browser narrows the column. */
      .user-menu.authenticated {
        flex-shrink: 0;
      }

      .user-avatar {
        flex-shrink: 0;
      }

      /* Dropdown stays anchored to the avatar's right edge. With the new
         12px right padding, the 180px menu still has full clearance. */
      .user-dropdown {
        right: 0;
      }

      /* RTL: dropdown should anchor to the avatar's *visual* right (which is
         the start side in RTL) so it doesn't overflow the left viewport edge. */
      [dir="rtl"] .user-dropdown {
        right: auto;
        left: 0;
      }

      .logo-img {
        height: 36px;
      }

      .logo-lite {
        bottom: -4px;
        right: 40px;
        font-size: 0.8rem;
      }

      .chat-messages {
        padding: 16px;
        flex: 1;
        min-height: 0; /* Important for flex scrolling */
      }

      .welcome-message {
        padding: 20px 10px;
      }

      .welcome-message h2 {
        font-size: 1.25rem;
      }

      .example-prompt {
        padding: 14px 16px;
        font-size: 0.95rem;
        /* Larger touch target */
        min-height: 48px;
        display: flex;
        align-items: center;
      }

      .chat-input-container {
        padding: 12px 16px;
        padding-bottom: env(safe-area-inset-bottom, 12px);
        position: sticky;
        bottom: 0;
        background: var(--ink-2);
      }

      /* Reorder the sidebar on mobile so the legal/cookie-prefs footer sits
         ABOVE the chat input. Without this, the sticky-bottom input ends up
         visually on top of the footer (sidebar is overflow:hidden so the
         footer just gets eaten). With explicit order: messages → footer →
         input → bottom of viewport. The input stays at thumb reach; the
         footer is the last thing the user can scroll past in the messages
         column. */
      .chat-sidebar .chat-header        { order: 1; }
      .chat-sidebar .chat-messages      { order: 2; }
      .chat-sidebar .chat-footer        { order: 3; }
      .chat-sidebar .chat-input-container { order: 4; }

      /* Trim the footer's vertical footprint on phones so it doesn't steal
         space from the messages area. Single-line, small padding. */
      .chat-footer {
        padding: 8px 16px;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
      }

      .chat-input {
        padding: 14px 16px;
        min-height: 64px;
        font-size: 16px;
      }

      .send-button {
        width: 52px;
        height: 64px;
        flex-shrink: 0;
      }

      .message {
        max-width: 85%;
        padding: 10px 14px;
      }

      /* Auth modal mobile adjustments */
      .auth-modal {
        width: 95%;
        max-width: none;
        padding: 24px;
        margin: 16px;
        max-height: 90vh;
        overflow-y: auto;
      }

      .auth-modal h2 {
        font-size: 1.25rem;
      }

      .auth-modal input {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 16px;
      }

      .auth-modal .auth-button {
        padding: 16px;
        font-size: 1rem;
        min-height: 52px;
      }

      .my-sites-link {
        padding: 6px 12px;
        font-size: 0.8rem;
      }
    }

    /* Small mobile (iPhone SE, small Android) */
    @media (max-width: 375px) {
      .chat-header {
        padding: 10px 10px 10px 12px;
      }

      .logo-img {
        height: 32px;
      }

      .logo-lite {
        bottom: -4px;
        right: 36px;
        font-size: 0.75rem;
      }

      .welcome-message h2 {
        font-size: 1.1rem;
      }

      .example-prompt {
        padding: 12px 14px;
        font-size: 0.85rem;
      }
    }

    /* Tablet and larger - show split view */
    @media (min-width: 769px) {
      .builder-container {
        flex-direction: row;
      }

      .chat-sidebar {
        width: 400px;
        min-width: 350px;
        height: 100vh;
      }

      .preview-area {
        display: flex;
        flex: 1;
        height: 100vh;
      }
    }

    /* Large desktop */
    @media (min-width: 1200px) {
      .chat-sidebar {
        width: 450px;
      }
    }

    /* Touch device specific (no hover) */
    @media (hover: none) and (pointer: coarse) {
      .example-prompt:hover {
        background: var(--ink-3);
        border-color: #444;
      }

      .example-prompt:active {
        background: #2a2a2a;
        border-color: var(--pink);
        transform: scale(0.98);
      }

      .send-button:hover {
        transform: none;
      }

      .send-button:active {
        transform: scale(0.95);
      }

      .auth-modal .auth-button:hover {
        transform: none;
      }

      .auth-modal .auth-button:active {
        transform: scale(0.98);
      }
    }

    /* Reduced motion preference */
    @media (prefers-reduced-motion: reduce) {
      * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

    /* High contrast mode */
    @media (prefers-contrast: high) {
      .chat-input {
        border-width: 2px;
      }

      .example-prompt {
        border-width: 2px;
      }

      .message.assistant {
        border: 1px solid #666;
      }
    }

    /* Landscape mobile - adjust layout */
    @media (max-width: 768px) and (orientation: landscape) {
      .chat-sidebar {
        height: 100vh;
        height: -webkit-fill-available;
      }

      .welcome-message {
        padding: 10px;
      }

      .chat-messages {
        padding: 10px 16px;
      }
    }

    /* Mobile Toggle Bar - Tab Style */
    .mobile-toggle-bar {
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 56px;
      background: #1e1e1e;
      border-top: 1px solid #333;
      padding-bottom: env(safe-area-inset-bottom, 0px);
      z-index: 100;
    }

    .mobile-toggle-tabs {
      display: flex;
      width: 100%;
    }

    .mobile-toggle-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 20px;
      background: transparent;
      border: none;
      border-top: 3px solid transparent;
      color: var(--text-3);
      font-size: 0.95rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .mobile-toggle-btn i {
      font-size: 1.1rem;
    }

    .mobile-toggle-btn.active {
      color: var(--pink);
      border-top-color: var(--pink);
      background: rgba(237, 22, 108, 0.08);
    }

    .mobile-toggle-btn:not(.active):active {
      background: rgba(255, 255, 255, 0.05);
    }

    /* Mobile prompt bar - hidden by default on desktop */
    .mobile-prompt-bar {
      display: none;
    }

    .mobile-prompt-bar.hidden {
      display: none !important;
    }

    /* Mobile Chat Close Button */
    .mobile-chat-close {
      display: none;
      position: fixed;
      top: 12px;
      right: 12px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.15);
      color: white;
      border: none;
      cursor: pointer;
      z-index: 302;
      font-size: 1.1rem;
      align-items: center;
      justify-content: center;
    }

    .mobile-chat-close:active {
      background: rgba(255, 255, 255, 0.25);
    }

    /* Mobile view adjustments — persistent top tab bar that switches
       between Chat and Preview. The legacy FAB + full-screen overlay
       affordances (.mobile-prompt-bar + .mobile-chat-close) are retired
       once .builder-container.show-toggle is active, because they're
       mutually exclusive (you only ever see one direction at a time) and
       leave users stuck if either gets clipped or misfires. */
    @media (max-width: 768px) {
      /* Default: tab bar hidden until the user is past the empty welcome
         state. JS adds .builder-container.show-toggle to reveal it. */
      .mobile-toggle-bar {
        display: none;
      }

      .builder-container.show-toggle .mobile-toggle-bar {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 305; /* above chat-sidebar (301) and mobile-chat-close (302) */
        padding: 8px 12px;
        padding-top: max(8px, env(safe-area-inset-top, 0px));
        background: linear-gradient(180deg, rgba(8, 4, 14, 0.96), rgba(8, 4, 14, 0.86));
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid rgba(237, 22, 108, 0.22);
      }

      /* Three-column grid keeps Chat and Preview at the outer edges and
         the Save CTA centered. The Save column collapses to zero when
         #mobileSaveBtn carries .btn-hidden (auth users / pre-preview),
         so the two tabs span the full width with no awkward gap. */
      .mobile-toggle-tabs {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 4px;
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
        background: rgba(255, 255, 255, 0.04);
        border-radius: 10px;
        padding: 4px;
      }

      .mobile-toggle-tabs:has(#mobileSaveBtn.btn-hidden) {
        grid-template-columns: 1fr 1fr;
      }

      /* Mobile Save CTA — visually distinct from the two tabs but uses
         the same mono-uppercase pill geometry so the bar reads as one
         cohesive row. Always pink-filled (it's an action, not a tab),
         with a subtle outer ring so it doesn't read as "currently
         active" the way a real selected tab does. */
      .mobile-toggle-btn.mobile-save-btn {
        background: var(--pink, #ED166C);
        color: #fff;
        box-shadow: 0 0 0 1px rgba(237, 22, 108, 0.35),
                    0 4px 12px -4px rgba(237, 22, 108, 0.55);
      }
      .mobile-toggle-btn.mobile-save-btn:hover {
        background: var(--pink-2, #c41058);
      }
      .mobile-toggle-btn.mobile-save-btn.btn-hidden {
        display: none;
      }

      /* The full preview-toolbar (with the desktop Edit Sections / Save /
         Publish trio) is heavy on mobile and duplicates the top tab bar.
         Hide it — Save now lives in the tab bar, Publish has its own
         confirm modal flow, and Edit Sections is desktop-only by intent. */
      .preview-header {
        display: none;
      }

      /* The "Describe your changes" banner that used to sit above the
         iframe is removed entirely (DOM gone). Nothing else needs it. */

      .mobile-toggle-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 12px;
        border: 0;
        background: transparent;
        color: var(--text-3);
        font-family: var(--font-mono, inherit);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        border-radius: 8px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
      }

      .mobile-toggle-btn i { font-size: 0.85rem; }

      .mobile-toggle-btn.active {
        background: var(--pink, #ED166C);
        color: #fff;
        box-shadow: 0 4px 12px -4px rgba(237, 22, 108, 0.55);
      }

      .mobile-toggle-btn:not(.active):active {
        background: rgba(255, 255, 255, 0.06);
      }

      /* Reserve room at the top of the visible pane for the fixed tab bar
         so it never covers content. 56px = tab bar height including
         vertical padding. */
      .builder-container.show-toggle .chat-sidebar,
      .builder-container.show-toggle .preview-area {
        padding-top: calc(56px + env(safe-area-inset-top, 0px));
      }

      /* The close-overlay X is retired — the persistent tab bar at the
         top is the canonical chat-exit affordance now. The mobile prompt
         bar at the bottom is RE-PURPOSED: it surfaces only on the Preview
         tab as a "tap to ask the AI" CTA that flips to Chat (see JS). */
      .builder-container.show-toggle .mobile-chat-close {
        display: none !important;
      }

      /* The missing pair to .show-chat. Without these rules the tab bar's
         "Preview" tap has no visible effect because no CSS hides the chat
         when .show-preview is on .builder-container. */
      .builder-container.show-preview .chat-sidebar { display: none; }
      .builder-container.show-preview .preview-area { display: flex; }

      /* Bottom prompt bar — visible on the Preview tab so users can
         jump back into chat without going up to the top tab bar. Hidden
         on the Chat tab (the real chat input is right there) and during
         the empty welcome state (no toggle yet). */
      .builder-container.show-toggle.show-chat .mobile-prompt-bar {
        display: none !important;
      }
      .builder-container.show-toggle.show-preview .mobile-prompt-bar {
        display: flex !important;
      }

      /* Symmetric to the bottom prompt bar — visible on the Chat tab
         as an inline pill below post-preview assistant messages,
         giving users a one-tap path back to the Preview tab. */
      .preview-check-cta {
        display: inline-flex;
      }

      /* ===== Mobile prompt bar =====
         Sits at the bottom of the Preview tab as a quiet "the AI is one
         tap away" CTA. Replaces the previous attention-grabbing FAB
         (gradient text + wiggle + glow loop) with a refined dark-glass
         strip that reads as part of the product chrome, not a flashing
         interrupt. Single brand-pink hairline on top; the only motion
         is a slow opacity breath on the wand icon. */
      .mobile-prompt-bar {
        display: flex;
        flex-direction: column;
        gap: 6px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 200;
        padding: 10px 14px;
        padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
        background:
          linear-gradient(180deg, rgba(10, 6, 18, 0.78) 0%, rgba(10, 6, 18, 0.96) 60%, rgba(10, 6, 18, 1) 100%);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-top: 1px solid rgba(237, 22, 108, 0.35);
      }

      .mobile-prompt-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 0;
        font-family: var(--font-mono, inherit);
        font-size: 0.62rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--text-3);
      }

      .mobile-prompt-hint i {
        font-size: 0.62rem;
        color: var(--pink);
      }

      .mobile-prompt-input {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 12px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(237, 22, 108, 0.32);
        border-radius: 10px;
        padding: 13px 14px;
        color: var(--text-2);
        font-family: var(--font-body, inherit);
        font-size: 15px;
        font-weight: 400;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: border-color 180ms ease, background 180ms ease;
      }

      .mobile-prompt-input i {
        color: var(--pink);
        font-size: 1rem;
        animation: promptIconBreath 2.4s ease-in-out infinite;
      }

      .mobile-prompt-input:active {
        background: rgba(237, 22, 108, 0.08);
        border-color: var(--pink);
      }

      .mobile-prompt-placeholder {
        color: var(--text-3);
      }

      /* The only motion: a slow opacity breath on the wand icon so the
         bar reads as interactive without animating the whole strip. */
      @keyframes promptIconBreath {
        0%, 100% { opacity: 0.6; }
        50%      { opacity: 1; }
      }

      @media (prefers-reduced-motion: reduce) {
        .mobile-prompt-input i { animation: none; opacity: 1; }
      }

      .preview-placeholder-desktop {
        display: none;
      }

      .preview-placeholder-mobile {
        display: block;
      }

      .builder-container {
        padding-bottom: 0;
      }

      /* On mobile, default: show preview, hide chat */
      .chat-sidebar {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        z-index: 301;
        padding-bottom: 0;
        animation: chatOverlayIn 0.25s ease;
      }

      @keyframes chatOverlayIn {
        from { opacity: 0; transform: translateY(30px); }
        to { opacity: 1; transform: translateY(0); }
      }

      .preview-area {
        display: flex;
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
        width: 100%;
        min-height: 0;
        overflow: hidden;
      }

      .preview-content-container {
        width: 100%;
        max-width: 100%;
        flex: 1 1 0;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
      }

      .preview-inner {
        width: 100%;
        max-width: 100%;
        flex: 1 1 0;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
      }

      .chat-input-container {
        margin-bottom: 0;
        padding-bottom: 12px;
      }

      .chat-messages {
        padding-bottom: 10px;
      }

      /* When mobile chat overlay is open */
      .builder-container.mobile-chat-open .chat-sidebar {
        display: flex;
      }

      .builder-container.mobile-chat-open .mobile-chat-close {
        display: flex;
      }

      .builder-container.mobile-chat-open .mobile-prompt-bar {
        display: none !important;
      }

      /* Before first preview, show chat by default (for initial prompt entry) */
      .builder-container.show-chat .chat-sidebar {
        display: flex;
        position: relative;
        height: 100vh;
        height: 100dvh;
      }

      .builder-container.show-chat .preview-area {
        display: none;
      }

      .builder-container.show-chat .mobile-prompt-bar {
        display: none !important;
      }

      /* Mobile preview content responsive styles */
      .preview-area .site-preview {
        width: 100%;
        max-width: 100%;
      }

      .preview-area .section-hero {
        padding: 40px 20px;
      }

      .preview-area .section-hero h1 {
        font-size: 1.75rem;
      }

      .preview-area .section-hero p {
        font-size: 1rem;
      }

      .preview-area .features-grid,
      .preview-area .services-grid,
      .preview-area .team-grid,
      .preview-area .testimonials-grid,
      .preview-area .pricing-grid {
        grid-template-columns: 1fr;
        padding: 0 16px;
      }

      .preview-area .section-features,
      .preview-area .section-services,
      .preview-area .section-team,
      .preview-area .section-testimonials,
      .preview-area .section-pricing,
      .preview-area .section-story,
      .preview-area .section-gallery,
      .preview-area .section-contactForm,
      .preview-area .section-video,
      .preview-area .section-gated-resource {
        padding: 2rem 1rem;
      }

      .preview-area .gated-resource-container {
        grid-template-columns: 1fr;
        gap: 2rem;
      }

      .preview-area .contactForm-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0;
      }

      .preview-area .story-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
      }

      .preview-area .gallery-grid {
        grid-template-columns: 1fr 1fr;
      }

      .preview-area .site-nav {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.75rem;
      }

      .preview-area .site-nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
      }

      .preview-area .site-nav-links a {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
      }

      /* Global site-preview responsive styles (works regardless of parent container) */
      .site-preview {
        width: 100% !important;
        max-width: 100% !important;
      }

      .site-preview .section-hero {
        padding: 40px 20px !important;
      }

      .site-preview .section-hero h1 {
        font-size: 1.75rem !important;
      }

      .site-preview .section-hero p {
        font-size: 1rem !important;
      }

      .site-preview .features-grid,
      .site-preview .services-grid,
      .site-preview .team-grid,
      .site-preview .testimonials-grid,
      .site-preview .pricing-grid {
        grid-template-columns: 1fr !important;
        padding: 0 16px !important;
      }

      .site-preview .section-features,
      .site-preview .section-services,
      .site-preview .section-team,
      .site-preview .section-testimonials,
      .site-preview .section-pricing,
      .site-preview .section-story,
      .site-preview .section-gallery,
      .site-preview .section-contactForm,
      .site-preview .section-video,
      .site-preview .section-gated-resource {
        padding: 2rem 1rem !important;
      }

      .site-preview .gated-resource-container {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
      }

      .site-preview .contactForm-container {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        padding: 0 !important;
      }

      .site-preview .story-container {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
      }

      .site-preview .gallery-grid {
        grid-template-columns: 1fr 1fr !important;
      }

      .site-preview .gallery-grid.cols-3,
      .site-preview .gallery-grid.cols-4 {
        grid-template-columns: 1fr 1fr !important;
      }

      .site-preview .section-about {
        flex-direction: column !important;
        padding: 2rem 1rem !important;
      }

      .site-preview .section-about .about-image {
        max-width: 100% !important;
        width: 100% !important;
      }

      .site-preview .testimonial-item,
      .site-preview .pricing-item {
        min-width: auto !important;
        max-width: 100% !important;
      }

      .site-preview .section-footer {
        padding: 1.5rem 1rem !important;
      }
    }

    /* Landscape mobile — prompt bar adjustment */
    @media (max-width: 768px) and (orientation: landscape) {
      .mobile-prompt-bar {
        padding: 6px 14px 8px;
        width: 48px;
        height: 48px;
        font-size: 1.1rem;
      }
    }

    /* Terms Popup Checkbox Styles */
    .terms-checkbox-label {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      cursor: pointer;
      color: var(--text-2);
      font-size: 0.9rem;
      line-height: 1.5;
    }

    .terms-checkbox-label input[type="checkbox"] {
      -webkit-appearance: checkbox;
      appearance: checkbox;
      width: 18px;
      min-width: 18px;
      height: 18px;
      margin-top: 3px;
      accent-color: var(--pink);
      cursor: pointer;
      padding: 0;
    }

    .terms-checkbox-label a {
      color: var(--pink);
      text-decoration: none;
    }

    .terms-checkbox-label a:hover {
      text-decoration: underline;
    }

    .terms-optional-note {
      display: block;
      color: #777;
      font-size: 0.8rem;
      margin-top: 4px;
      padding-left: 28px;
    }

    #termsModal .auth-modal {
      max-width: 440px;
    }

    #termsModal .form-group {
      margin-bottom: 18px;
    }

    .terms-form-group {
      text-align: start;
    }

/* In-app browser banner (X/Twitter, Instagram, etc.) */
.iab-banner {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 9999;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  min-height: 44px;
  background: linear-gradient(90deg, #ED166C 0%, #c41058 100%);
  color: #fff;
  font-family: 'Public Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15), 0 6px 16px -8px rgba(196, 16, 88, 0.45);
  animation: iab-slide-in 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.iab-banner__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
}

.iab-banner__icon svg {
  width: 14px;
  height: 14px;
}

.iab-banner__text {
  text-align: center;
  padding: 6px 4px;
  line-height: 1.35;
}

.iab-banner__close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  color: #fff;
  cursor: pointer;
  border-radius: 999px;
  transition: background-color 140ms ease-out;
  -webkit-tap-highlight-color: transparent;
}

.iab-banner__close:hover,
.iab-banner__close:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  outline: 0;
}

.iab-banner__close:active {
  background: rgba(0, 0, 0, 0.15);
}

.iab-banner__close svg {
  width: 14px;
  height: 14px;
}

@keyframes iab-slide-in {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .iab-banner { animation: none; }
}