/* 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 (scoped to this landing route)
   Editorial-brutalist palette + type system shared with /pros and lite. The
   site-gen loader, preview placeholder, and welcome eyebrow lean on these
   tokens. Variables stay namespaced under :root but are referenced only by
   the blocks that opt in, so the rest of the file (which uses raw hex)
   continues to render unchanged.
   ========================================================================== */
:root {
  --ink:       #000;
  --ink-2:     #1e1e1e;
  --ink-3:     #282828;
  --ink-4:     #333333;
  --rule:      #444;
  --rule-2:    #3d3d3d;
  --pink:      #ED166C;
  --pink-2:    #c41058;
  --pink-3:    #ff3d8b;
  --pink-glow: rgba(237, 22, 108, 0.30);
  --hi:        #fde047;
  --hi-2:      #facc15;
  --good:      #10b981;
  --text:      #fff;
  --text-2:    #ccc;
  --text-3:    #888;

  --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: #282828;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
      background: #282828;
      color: #fff;
      height: 100vh;
      overflow: hidden;
    }

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

    /* Chat Sidebar — solid ink-2 (#1e1e1e) 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 /stores. */
    .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 `DS` mark + uppercase wordmark.
       Adopted from /pros .logo so the visual identity is continuous across
       the marketing landing, lite, and stores. */
    .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. 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(2.1rem, 3.2vw, 2.6rem);
      line-height: 1.1;
      letter-spacing: -0.005em;
      margin: 0 0 18px;
      color: var(--text);
      padding-bottom: 12px;
    }

    /* Pink gradient underbar — the single brand accent under the H2. 48px ×
       3px is small enough not to compete with the title; the eye registers
       it as "brand". */
    .welcome-message h2::after {
      content: '';
      display: block;
      width: 48px;
      height: 3px;
      background: linear-gradient(135deg, var(--pink) 0%, var(--pink-2) 100%);
      margin: 12px auto 0;
      border-radius: 2px;
    }

    .welcome-message p {
      color: #d8d8d8;
      line-height: 1.6;
      margin: 0;
      font-size: 1.08rem;
    }

    /* Digital-only scope strip — mono, muted, with a hairline divider so it
       reads as a quiet spec line under the pitch, not body copy. The middot
       separators in the copy carry the rhythm; no extra markup needed.
       Scoped under .welcome-message p so it wins over the generic paragraph
       rule above without needing !important. */
    .welcome-message p.welcome-scope {
      margin: 16px auto 0;
      max-width: 30rem;
      padding-top: 12px;
      border-top: 1px solid var(--rule);
      font-family: var(--font-mono);
      font-size: 0.8rem;
      font-weight: 500;
      letter-spacing: 0.04em;
      line-height: 1.55;
      color: var(--text-2);
    }

    /* 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
       handle the 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 — secondary surface (#282828) with 12px radius.
       translateY(-2px) hover with subtle pink border lift. 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: #555;
      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,
       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, JS removes .chat-empty and the sidebar
       returns to conventional chat layout (messages scroll, input at
       bottom). Mobile keeps its sticky-bottom input for thumb reach. */
    @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. */
      .chat-sidebar.chat-empty .chat-footer {
        order: 3;
      }
    }

    /* Pre-message empty state: the welcome eyebrow + H2 + suggestion chips are
       static content that may exceed .chat-messages height on shorter
       viewports. The scrollbar gutter is visually distracting before the user
       has typed anything (it suggests there's a long history to scroll
       through). Hide the bar in chat-empty mode; wheel/touch scrolling still
       works if the content actually does overflow. Once the user sends a
       message and chat-empty is removed, the standard scrollbar returns. */
    .chat-sidebar.chat-empty .chat-messages {
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .chat-sidebar.chat-empty .chat-messages::-webkit-scrollbar {
      display: none;
    }

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

    .message.user {
      align-self: flex-end;
      background: linear-gradient(135deg, #ED166C 0%, #c41058 100%);
      color: #fff;
    }

    .message.assistant {
      align-self: flex-start;
      background: #333333;
      color: #e0e0e0;
    }

    /* 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: #282828;
      padding: 0.2em 0.4em;
      border-radius: 4px;
      font-family: 'Consolas', 'Monaco', monospace;
      font-size: 0.9em;
    }
    .message.assistant pre {
      background: #282828;
      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: #ED166C;
      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 — secondary surface (#282828) with 12px radius. Pink
       border on focus-within (style-guide focus-ring pattern). The mono
       label + green dot inside the card mirrors /pros' kicker pattern. */
    .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. */
    .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 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: #555;
    }

    /* 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 — primary CTA: pink gradient, 8px radius, translateY(-2px)
       hover, scale(0.98) active. */
    .send-button {
      background: linear-gradient(135deg, var(--pink) 0%, var(--pink-2) 100%);
      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: linear-gradient(135deg, var(--pink-2) 0%, #a00d48 100%);
      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. */
    .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 {
      color: var(--text-3);
      text-decoration: none;
      transition: color 150ms ease;
    }

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

    .chat-footer-sep {
      color: #555;
    }

    /* Preview Area */
    .preview-area {
      flex: 1;
      background: #333333;
      display: flex;
      flex-direction: column;
    }

    .preview-header {
      padding: 12px 20px;
      border-bottom: 1px solid #444;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #282828;
    }

    .preview-url {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #333333;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 0.85rem;
      color: #b0b0b0;
    }

    .preview-url .dot {
      width: 8px;
      height: 8px;
      background: #444;
      border-radius: 50%;
    }

    .preview-url.live .dot {
      background: #10b981;
    }

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

    .preview-action-btn {
      background: #3d3d3d;
      border: none;
      padding: 8px 16px;
      border-radius: 6px;
      color: #ccc;
      font-size: 0.85rem;
      cursor: pointer;
      transition: all 0.2s;
    }

    .preview-action-btn:hover {
      background: #444;
      color: #fff;
    }

    .preview-action-btn.primary {
      background: linear-gradient(135deg, #ED166C 0%, #c41058 100%);
      color: #fff;
    }

    /* Save CTA in the preview header — pink gradient with leading cloud icon.
       Replaces the former floating button overlaid on the iframe (which read
       as part of the generated site). Sits next to Edit Sections / Publish
       so the toolbar groups all "save the work" actions in one place. */
    .preview-action-btn.preview-save-btn {
      background: linear-gradient(135deg, var(--pink) 0%, var(--pink-2) 100%);
      color: #fff;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 4px 12px rgba(237, 22, 108, 0.30);
    }

    .preview-action-btn.preview-save-btn:hover {
      background: linear-gradient(135deg, var(--pink-2) 0%, #a00d48 100%);
      color: #fff;
      transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(237, 22, 108, 0.40);
    }

    .preview-action-btn.preview-save-btn i {
      font-size: 0.9rem;
    }

    .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. A soft pink wash inside the card hints at "this
       will be your storefront" 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%;
    }

    /* ======================================================================
       FIRST-RUN PANEL — fills the empty preview pane before generation with a
       video tour, the earn model, and social proof. Lives inside
       #previewPlaceholder; collapses automatically when showPreviewLoader()
       swaps the innerHTML for the spinner. Editorial-brutalist: ink surfaces,
       pink primary + yellow secondary, condensed display type. Larger,
       higher-contrast type throughout (readability feedback).
       ====================================================================== */

    /* While the rich panel is mounted, let the pane scroll top-aligned instead
       of vertically centering. The :has() guard means that the moment the
       loader replaces the content, the pane reverts to its centered default. */
    .preview-content.firstrun-host:has(.firstrun) {
      align-items: flex-start;
      justify-content: center;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 36px 28px 56px;
    }

    .firstrun {
      width: 100%;
      max-width: 600px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 38px;
      text-align: start;
      animation: firstrunIn 0.5s ease-out both;
    }

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

    .firstrun-intro { text-align: center; }

    .firstrun-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      font-family: var(--font-mono);
      font-size: 0.74rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--hi);
      background: var(--ink-2);
      border: 1px solid var(--rule);
      padding: 0.42rem 0.72rem;
      border-radius: 2px;
      margin-bottom: 16px;
    }

    .firstrun-eyebrow-dot {
      width: 7px;
      height: 7px;
      background: var(--hi);
      border-radius: 50%;
      animation: pulse-hi 2.4s ease-in-out infinite;
    }

    .firstrun-intro h3 {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: clamp(1.7rem, 2.6vw, 2.05rem);
      line-height: 1.12;
      letter-spacing: -0.005em;
      color: var(--text);
      margin: 0 0 12px;
    }

    .firstrun-intro p {
      color: #d8d8d8;
      line-height: 1.6;
      font-size: 1.05rem;
      max-width: 38ch;
      margin: 0 auto;
    }

    /* ---- Video tour --------------------------------------------------- */
    .firstrun-video { margin: 0; }

    .firstrun-video-frame {
      position: relative;
      aspect-ratio: 16 / 9;
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid var(--rule);
      background: var(--ink-3);
      box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
      cursor: pointer;
    }

    .firstrun-video-frame video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      background: #000;
      z-index: 1;
    }

    /* Tap-to-unmute control over the autoplaying (muted) video. */
    .firstrun-mute {
      position: absolute;
      bottom: 12px;
      inset-inline-end: 12px;
      z-index: 2;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: none;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(4px);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 0.95rem;
      transition: background 0.18s ease, transform 0.18s ease;
    }
    .firstrun-mute:hover { background: var(--pink); transform: scale(1.06); }
    .firstrun-mute:focus-visible { outline: 2px solid var(--hi); outline-offset: 2px; }
    .firstrun-mute[aria-pressed="true"] { background: var(--pink); }

    /* CSS-composed storefront poster so the frame is never blank. A pink wash,
       a faux nav bar, a hero block, two product cards, and a buy button —
       softly drifting so the pane has motion. Sits behind the video (z-index 0)
       as the fallback if the video can't load. */
    .firstrun-poster {
      position: absolute;
      inset: 0;
      z-index: 0;
      background:
        radial-gradient(140% 120% at 80% 0%, rgba(237, 22, 108, 0.22), transparent 55%),
        radial-gradient(120% 120% at 0% 100%, rgba(253, 224, 71, 0.1), transparent 50%),
        linear-gradient(160deg, #232327 0%, #161618 100%);
    }
    .firstrun-poster span { position: absolute; display: block; border-radius: 4px; }
    .firstrun-poster-bar {
      top: 0; left: 0; right: 0; height: 13%;
      background: rgba(255, 255, 255, 0.05);
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 0;
    }
    .firstrun-poster-hero {
      top: 22%; left: 9%; width: 46%; height: 12%;
      background: linear-gradient(90deg, var(--pink), var(--pink-3));
      box-shadow: 0 0 22px -4px var(--pink-glow);
    }
    .firstrun-poster-card {
      top: 44%; width: 26%; height: 34%;
      background: rgba(255, 255, 255, 0.07);
      border: 1px solid rgba(255, 255, 255, 0.08);
      animation: firstrunFloat 5s ease-in-out infinite;
    }
    .firstrun-poster-card-1 { left: 9%; }
    .firstrun-poster-card-2 { left: 39%; animation-delay: -2.5s; }
    .firstrun-poster-buy {
      top: 52%; right: 9%; width: 20%; height: 9%;
      background: var(--hi);
      border-radius: 3px;
    }
    @keyframes firstrunFloat {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-5px); }
    }

    .firstrun-play {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 68px; height: 68px;
      border-radius: 50%;
      border: none;
      background: var(--pink);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 0 0 0 var(--pink-glow);
      animation: firstrunPulse 2.6s ease-out infinite;
      transition: background 0.18s ease, transform 0.18s ease;
    }
    .firstrun-play svg { width: 26px; height: 26px; margin-inline-start: 3px; }
    .firstrun-play:hover { background: var(--pink-3); transform: translate(-50%, -50%) scale(1.06); }
    .firstrun-play:focus-visible { outline: 2px solid var(--hi); outline-offset: 3px; }
    @keyframes firstrunPulse {
      0%   { box-shadow: 0 0 0 0 rgba(237, 22, 108, 0.45); }
      70%  { box-shadow: 0 0 0 18px rgba(237, 22, 108, 0); }
      100% { box-shadow: 0 0 0 0 rgba(237, 22, 108, 0); }
    }

    .firstrun-video-badge {
      position: absolute;
      bottom: 12px; inset-inline-start: 12px;
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      font-family: var(--font-mono);
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      color: #fff;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(4px);
      padding: 0.34rem 0.6rem;
      border-radius: 4px;
    }
    .firstrun-video-badge i { color: var(--pink-3); }

    .firstrun-video-note {
      position: absolute;
      bottom: 12px; inset-inline-end: 12px;
      max-width: 60%;
      font-size: 0.8rem;
      line-height: 1.4;
      color: #fff;
      background: rgba(0, 0, 0, 0.72);
      padding: 0.4rem 0.6rem;
      border-radius: 4px;
      text-align: end;
    }

    .firstrun-video-cap {
      margin-top: 12px;
      text-align: center;
      font-size: 0.98rem;
      color: var(--text-2);
      line-height: 1.5;
    }

    /* ---- Shared section heading --------------------------------------- */
    .firstrun-section-eyebrow {
      font-family: var(--font-mono);
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--hi);
      margin-bottom: 10px;
    }
    .firstrun-earn h4,
    .firstrun-proof h4 {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: clamp(1.5rem, 2.4vw, 1.9rem);
      line-height: 1.14;
      letter-spacing: -0.005em;
      color: var(--text);
      margin: 0 0 12px;
    }

    /* ---- Earn / fee ladder -------------------------------------------- */
    .firstrun-earn {
      background:
        radial-gradient(160% 120% at 100% 0%, rgba(16, 185, 129, 0.08), transparent 55%),
        var(--ink-2);
      border: 1px solid var(--rule);
      border-radius: 14px;
      padding: 24px 22px;
    }
    .firstrun-earn-sub {
      color: #d2d2d2;
      font-size: 1rem;
      line-height: 1.55;
      margin: 0 0 20px;
    }

    .firstrun-fee-ladder {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      align-items: end;
    }
    .firstrun-fee {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      text-align: center;
    }
    .firstrun-fee-bar {
      width: 100%;
      max-width: 46px;
      height: 88px;
      background: var(--ink-4);
      border-radius: 6px;
      display: flex;
      align-items: flex-end;
      overflow: hidden;
    }
    .firstrun-fee-fill {
      width: 100%;
      border-radius: 6px 6px 0 0;
      background: linear-gradient(180deg, var(--pink-3), var(--pink-2));
      transform-origin: bottom;
      animation: firstrunGrow 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    /* Fee shrinks Free → Business; the pink fill shrinks with it, and the
       zero-fee tier flips to green to read as the win. */
    .firstrun-fee-1 .firstrun-fee-fill { height: 100%; animation-delay: 0.05s; }
    .firstrun-fee-2 .firstrun-fee-fill { height: 55%;  animation-delay: 0.15s; }
    .firstrun-fee-3 .firstrun-fee-fill { height: 28%;  animation-delay: 0.25s; }
    .firstrun-fee-zero .firstrun-fee-fill {
      height: 8%;
      background: linear-gradient(180deg, #34d399, var(--good));
      animation-delay: 0.35s;
    }
    @keyframes firstrunGrow {
      from { transform: scaleY(0); opacity: 0.4; }
      to   { transform: scaleY(1); opacity: 1; }
    }
    .firstrun-fee-name {
      font-family: var(--font-mono);
      font-size: 0.74rem;
      letter-spacing: 0.04em;
      color: var(--text-2);
    }
    .firstrun-fee-val {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 1.05rem;
      color: var(--text);
    }
    .firstrun-fee-zero .firstrun-fee-val { color: #34d399; }

    .firstrun-fee-caption {
      margin: 12px 0 0;
      text-align: center;
      font-family: var(--font-mono);
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-3);
    }

    .firstrun-earn-foot {
      margin: 14px 0 0;
      font-size: 0.92rem;
      line-height: 1.55;
      color: var(--text-3);
    }

    /* ---- Three steps -------------------------------------------------- */
    .firstrun-steps {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .firstrun-step {
      display: flex;
      align-items: flex-start;
      gap: 14px;
    }
    .firstrun-step-num {
      flex: 0 0 auto;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 1.1rem;
      color: var(--pink-3);
      background: var(--ink-2);
      border: 1px solid var(--rule);
    }
    .firstrun-step-body { display: flex; flex-direction: column; gap: 3px; }
    .firstrun-step-body strong {
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--text);
    }
    .firstrun-step-body span {
      font-size: 0.96rem;
      line-height: 1.5;
      color: var(--text-2);
    }

    /* ---- Social proof ------------------------------------------------- */
    .firstrun-proof-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin-top: 4px;
    }
    .firstrun-proof-card {
      display: flex;
      align-items: center;
      gap: 11px;
      width: 100%;
      padding: 14px 14px;
      background: var(--ink-2);
      border: 1px solid var(--rule);
      border-radius: 10px;
      font-family: inherit;
      font-size: 0.96rem;
      font-weight: 500;
      color: var(--text);
      line-height: 1.35;
      text-align: start;
      cursor: pointer;
      -webkit-appearance: none;
      appearance: none;
      transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
    }
    .firstrun-proof-card:hover { border-color: var(--pink); transform: translateY(-2px); }
    .firstrun-proof-card:active { transform: translateY(0); background: var(--ink-3); }
    .firstrun-proof-card:focus-visible { outline: 2px solid var(--hi); outline-offset: 2px; }
    .firstrun-proof-card > span { flex: 1 1 auto; }
    /* "build this" arrow at the trailing edge — slides in on hover so the card
       reads as an action that kicks off generation, not a static badge. */
    .firstrun-proof-go {
      font-size: 0.9rem !important;
      color: var(--text-3) !important;
      opacity: 0;
      transform: translateX(-4px);
      transition: opacity 0.18s ease, transform 0.18s ease, color 0.18s ease;
    }
    .firstrun-proof-card:hover .firstrun-proof-go,
    .firstrun-proof-card:focus-visible .firstrun-proof-go {
      opacity: 1;
      transform: translateX(0);
      color: var(--pink-3) !important;
    }
    [dir="rtl"] .firstrun-proof-go { transform: scaleX(-1) translateX(-4px); }
    [dir="rtl"] .firstrun-proof-card:hover .firstrun-proof-go,
    [dir="rtl"] .firstrun-proof-card:focus-visible .firstrun-proof-go { transform: scaleX(-1) translateX(0); }
    .firstrun-proof-card i {
      flex: 0 0 auto;
      font-size: 1.05rem;
      color: var(--pink-3);
    }
    .firstrun-proof-trust {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      margin-top: 16px;
      font-family: var(--font-mono);
      font-size: 0.8rem;
      letter-spacing: 0.04em;
      color: var(--text-2);
    }
    .firstrun-proof-trust i { color: var(--good); }

    /* ---- Closing CTA -------------------------------------------------- */
    .firstrun-cta {
      text-align: center;
      font-size: 1rem;
      line-height: 1.5;
      color: #d8d8d8;
      padding-top: 6px;
      border-top: 1px solid var(--rule);
    }

    @media (prefers-reduced-motion: reduce) {
      .firstrun,
      .firstrun-poster-card,
      .firstrun-play,
      .firstrun-fee-fill { animation: none; }
    }

    /* ----------------------------------------------------------------------
       FIRST-RUN PANEL ON MOBILE — the panel is reparented (landing-builder.js)
       into the chat scroll, the only surface phones see. It must read as part
       of the conversation: full-width blocks, generous touch targets, and
       noticeably larger type than desktop (most traffic is mobile, and the
       feedback was "make it easier to read"). Hidden the instant a build
       begins (chat leaves .chat-empty).
       ---------------------------------------------------------------------- */
    @media (max-width: 768px) {
      .chat-sidebar:not(.chat-empty) .firstrun-inline { display: none; }

      .firstrun.firstrun-inline {
        max-width: 100%;
        gap: 30px;
        margin: 6px 0 4px;
        text-align: start;
        animation: none;
      }

      .firstrun-inline .firstrun-intro { text-align: start; }
      .firstrun-inline .firstrun-intro h3 { font-size: 1.55rem; margin-bottom: 10px; }
      .firstrun-inline .firstrun-intro p { font-size: 1.1rem; max-width: none; margin: 0; }

      .firstrun-inline .firstrun-video-cap { font-size: 1.04rem; text-align: start; }
      .firstrun-inline .firstrun-play { width: 60px; height: 60px; }
      .firstrun-inline .firstrun-play svg { width: 23px; height: 23px; }

      .firstrun-inline .firstrun-section-eyebrow { font-size: 0.76rem; }
      .firstrun-inline .firstrun-earn { padding: 22px 18px; }
      .firstrun-inline .firstrun-earn h4,
      .firstrun-inline .firstrun-proof h4 { font-size: 1.5rem; }
      .firstrun-inline .firstrun-earn-sub { font-size: 1.08rem; line-height: 1.6; }
      .firstrun-inline .firstrun-fee-bar { height: 100px; max-width: 52px; }
      .firstrun-inline .firstrun-fee-name { font-size: 0.82rem; }
      .firstrun-inline .firstrun-fee-val { font-size: 1.18rem; }
      .firstrun-inline .firstrun-earn-foot { font-size: 1rem; line-height: 1.6; }

      .firstrun-inline .firstrun-steps { gap: 18px; }
      .firstrun-inline .firstrun-step-num { width: 38px; height: 38px; font-size: 1.2rem; }
      .firstrun-inline .firstrun-step-body strong { font-size: 1.14rem; }
      .firstrun-inline .firstrun-step-body span { font-size: 1.06rem; line-height: 1.55; }

      .firstrun-inline .firstrun-proof-card {
        font-size: 1.06rem;
        padding: 16px 16px;
        min-height: 58px;
      }
      .firstrun-inline .firstrun-proof-card i { font-size: 1.15rem; }
      .firstrun-inline .firstrun-proof-trust { font-size: 0.92rem; }
      .firstrun-inline .firstrun-cta { font-size: 1.08rem; line-height: 1.55; }
    }

    /* Single-column proof cards on the narrowest phones so the labels never
       truncate. */
    @media (max-width: 380px) {
      .firstrun-inline .firstrun-proof-grid { grid-template-columns: 1fr; }
      .firstrun-inline .firstrun-fee-name { font-size: 0.76rem; }
    }

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

    /* 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: #666;
      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: #555;
      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: #555;
      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: #b0b0b0;
    }

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

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

    .section-pricing .subtitle {
      color: #666;
      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: #b0b0b0;
      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: #555;
      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: #666;
      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, #ED166C);
      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, #ED166C);
    }

    .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;
      opacity: 0;
      transition: opacity 0.3s;
    }

    .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, #ED166C);
      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, #ED166C);
      margin-bottom: 1rem;
    }

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

    .service-item .service-cta:hover {
      background: #c41058;
    }

    /* 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, #ED166C);
      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, #ED166C);
      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, #ED166C);
      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: #c41058;
    }

    .section-footer {
      padding: 2rem;
      background: #282828;
      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: #000;
    }
    .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, #ED166C);
      color: #fff;
    }
    .section-cta.layout-banner h2 { color: #fff; }
    .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, #ED166C); }
    .section-cta.layout-banner .cta-btn-outline { background: transparent; color: #fff; 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: #fff;
      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: #fff;
      gap: 1rem;
    }
    .animation-spinner {
      width: 36px;
      height: 36px;
      border: 3px solid rgba(255,255,255,0.3);
      border-top-color: #fff;
      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 */
    .preview-mode-banner {
      display: none;
      background: linear-gradient(135deg, #ED166C 0%, #c41058 100%);
      color: white;
      padding: 8px 16px;
      text-align: center;
      font-size: 0.875rem;
      font-weight: 500;
    }

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

    .preview-mode-banner i {
      margin-right: 6px;
    }

    /* 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 + lite:
       softer overlay with blur, ink-3 surface with a quiet pink wash, sharp
       rule border, modalCardIn rise-in animation. */
    .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;
    }

    [dir="rtl"] .auth-modal-close {
      right: auto;
      left: 12px;
    }

    .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 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 — pink gradient, translateY(-2px) hover, scale(0.98)
       active. Display-font caps label carries the editorial polish. */
    .auth-modal .auth-button {
      width: 100%;
      padding: 14px 32px;
      background: linear-gradient(135deg, var(--pink) 0%, var(--pink-2) 100%);
      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: linear-gradient(135deg, var(--pink-2) 0%, #a00d48 100%);
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(237, 22, 108, 0.40);
    }

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

    /* Trust panel — three short, honest reassurances stacked under the CTA.
       ✓ 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: var(--good);
      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 — editorial card surface (#282828, 12px radius, dark
       border) with a yellow "BUILDING" tag pinned to the corner. Yellow tag
       is the bridge accent from /pros / lite, surfaced at the most-watched
       moment of the page (the agent actively working). Caption uses
       JetBrains Mono so the live status reads as a system trace, not a
       marketing line. */
    .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;
    }

    [dir="rtl"] .generating-indicator::before {
      left: auto;
      right: -1px;
      border-radius: 0 12px 0 12px;
    }

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

    [dir="rtl"] .generating-content {
      text-align: right;
    }

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

    /* Caution-dot: a single yellow dot pulses next to the mono caption.
       Calmer than a rotating ring and consistent with /pros + lite. */
    .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, #ED166C 0%, #c41058 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 #444;
      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: #ccc;
      text-decoration: none;
      font-size: 0.85rem;
      transition: background 0.15s, color 0.15s;
    }

    .user-dropdown-item:hover {
      background: #333;
      color: #fff;
    }

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

    .user-dropdown-divider {
      height: 1px;
      background: #444;
      margin: 4px 0;
    }

    .user-dropdown-logout:hover {
      color: #ED166C;
    }

    /* My Sites Link */
    .my-sites-link {
      display: none;
      padding: 8px 16px;
      background: #333333;
      border: 1px solid #444;
      border-radius: 8px;
      color: #ccc;
      text-decoration: none;
      font-size: 0.85rem;
      transition: all 0.2s;
    }

    .my-sites-link:hover {
      background: #3d3d3d;
      color: #fff;
    }

    .my-sites-link.show {
      display: block;
    }

    /* Chat-sidebar context: sidebar is fixed 400px wide on desktop, so the
       "My Stores" pill + lang-select + avatar combination overflows and
       clips the avatar at the sidebar edge. The avatar's dropdown menu
       already exposes "My Stores" as its first item, so the pill is
       redundant here — hide it at every width. */
    .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-link {
      padding: 8px 16px;
      background: #333333;
      border: 1px solid #444;
      border-radius: 8px;
      color: #ccc;
      text-decoration: none;
      font-size: 0.85rem;
      transition: all 0.2s;
    }

    .sign-in-link:hover {
      background: #3d3d3d;
      color: #fff;
    }

    /* Language selector dropdown — ported from lite-bedrockexpress.
       Replaces the former single-glyph "עב" toggle so non-Hebrew readers
       can read the option labels instead of guessing what the button does. */
    .lang-select {
      position: relative;
    }
    .lang-select-trigger {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 0.5rem 0.85rem 0.5rem 1rem;
      background: #2a2a2a;
      border: 1px solid #3a3a3a;
      border-radius: 8px;
      color: #d0d0d0;
      font-family: inherit;
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1;
      cursor: pointer;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }
    .lang-select-trigger:hover,
    .lang-select-trigger:focus-visible {
      outline: none;
      background: #353535;
      color: #fff;
    }
    .lang-select.open .lang-select-trigger {
      border-color: var(--primary-color, #ED166C);
      background: #353535;
      color: #fff;
    }
    .lang-select-icon {
      font-size: 0.85rem;
      color: #9a9aa3;
    }
    .lang-select.open .lang-select-icon,
    .lang-select-trigger:hover .lang-select-icon {
      color: var(--primary-color, #ED166C);
    }
    .lang-select-current {
      white-space: nowrap;
    }
    .lang-select-chevron {
      font-size: 0.7rem;
      color: #9a9aa3;
      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 #3a3a3a;
      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: #fff;
    }
    .lang-select-option.active {
      color: #fff;
    }
    .lang-select-check {
      font-size: 0.75rem;
      color: var(--primary-color, #ED166C);
      opacity: 0;
    }
    .lang-select-option.active .lang-select-check {
      opacity: 1;
    }
    /* RTL — menu anchors left edge 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) */
    @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 #444;
        overflow: hidden;
      }

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

      .chat-header {
        padding: 12px 56px 12px 16px;
        position: sticky;
        top: 0;
        background: #000;
        z-index: 10;
      }

      .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: clamp(1.6rem, 6vw, 1.95rem);
      }

      .welcome-message p {
        font-size: 1.1rem;
        line-height: 1.6;
      }

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

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

      /* Hint label — visible on mobile */
      .chat-input-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 8px 0 10px;
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        animation: hintWiggle 3s ease-in-out infinite;
        background: linear-gradient(135deg, #ED166C, #ff6b9d);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        filter: drop-shadow(0 0 6px rgba(237, 22, 108, 0.4));
      }

      .chat-input-hint i {
        font-size: 0.85rem;
        -webkit-text-fill-color: #ED166C;
        animation: arrowBounce 1s ease-in-out infinite;
      }

      @keyframes arrowBounce {
        0%, 100% { transform: translateY(0); }
        40% { transform: translateY(6px); }
        60% { transform: translateY(2px); }
        80% { transform: translateY(5px); }
      }

      @keyframes hintWiggle {
        0%, 100% { transform: translateX(0) scale(1); }
        15% { transform: translateX(-3px) scale(1.03); }
        30% { transform: translateX(3px) scale(1); }
        45% { transform: translateX(-2px) scale(1.02); }
        60% { transform: translateX(2px) scale(1); }
        75% { transform: translateX(0) scale(1); }
      }

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

      .send-button {
        width: 52px;
        height: 52px;
        flex-shrink: 0;
        animation: sendPulse 2.5s ease-in-out infinite;
      }

      .send-button:disabled {
        animation: none;
      }

      @keyframes sendPulse {
        0%, 100% { box-shadow: none; }
        50% { box-shadow: 0 0 14px rgba(237, 22, 108, 0.5); }
      }

      .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: 12px 56px 12px 12px;
      }

      .logo-img {
        height: 32px;
      }

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

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

      .example-prompt {
        padding: 13px 14px;
        font-size: 0.95rem;
      }
    }

    /* 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: #333333;
        border-color: #444;
      }

      .example-prompt:active {
        background: #2a2a2a;
        border-color: #ED166C;
        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: #666;
      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: #ED166C;
      border-top-color: #ED166C;
      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 — FAB + full-screen overlay approach */
    @media (max-width: 768px) {
      .mobile-toggle-bar {
        display: none !important;
      }

      /* ===== Mobile prompt bar ===== */
      .mobile-prompt-bar {
        display: flex;
        flex-direction: column;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 200;
        padding: 8px 14px 14px;
        padding-bottom: max(14px, env(safe-area-inset-bottom, 14px));
        background: linear-gradient(180deg, #1a1028 0%, #120b1e 100%);
        border-top: 2px solid #ED166C;
        box-shadow: 0 -4px 20px rgba(237, 22, 108, 0.15);
      }

      .mobile-prompt-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 4px 0 6px;
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        background: linear-gradient(135deg, #ED166C, #ff6b9d);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        filter: drop-shadow(0 0 6px rgba(237, 22, 108, 0.4));
        animation: promptHintWiggle 3s ease-in-out infinite;
      }

      .mobile-prompt-hint i {
        font-size: 0.7rem;
        -webkit-text-fill-color: #ED166C;
        animation: promptArrowBounce 1s ease-in-out infinite;
      }

      .mobile-prompt-input {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 10px;
        background: rgba(255, 255, 255, 0.08);
        border: 2px solid rgba(237, 22, 108, 0.4);
        border-radius: 12px;
        padding: 14px 16px;
        color: #fff;
        font-size: 15px;
        font-weight: 500;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        animation: promptBarGlow 3s ease-in-out infinite;
      }

      .mobile-prompt-input i {
        color: #ED166C;
        font-size: 1.1rem;
      }

      .mobile-prompt-input:active {
        background: rgba(237, 22, 108, 0.15);
        border-color: #ED166C;
      }

      @keyframes promptBarGlow {
        0%, 100% { border-color: rgba(237, 22, 108, 0.4); box-shadow: none; }
        50% { border-color: #ED166C; box-shadow: 0 0 12px rgba(237, 22, 108, 0.3); }
      }

      @keyframes promptHintWiggle {
        0%, 100% { transform: translateX(0) scale(1); }
        15% { transform: translateX(-3px) scale(1.03); }
        30% { transform: translateX(3px) scale(1); }
        45% { transform: translateX(-2px) scale(1.02); }
        60% { transform: translateX(2px) scale(1); }
        75% { transform: translateX(0) scale(1); }
      }

      @keyframes promptArrowBounce {
        0%, 100% { transform: translateY(0); }
        40% { transform: translateY(4px); }
        60% { transform: translateY(1px); }
        80% { transform: translateY(3px); }
      }

      .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: #ccc;
      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: #ED166C;
      cursor: pointer;
      padding: 0;
    }

    .terms-checkbox-label a {
      color: #ED166C;
      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; }
}

/* ==========================================================================
   MOBILE BUILDER OVERRIDES — placed at the very end so they win the cascade
   over the earlier @media (max-width:768px) blocks (the original mobile rules
   live around line ~3760 and would otherwise override the same selectors).
   Two fixes from on-device testing:
   1. Sign-In was overflowing the viewport — reclaim the 56px the header
      reserved for the overlay close button (only needed in mobile-chat-open),
      make the language selector icon-only, let the wordmark truncate.
   2. Lead with the storefront video. Collapse the (now empty) welcome wrapper
      so there's no large gap between the header and the "How it works" eyebrow,
      and keep only that eyebrow above the video.
   ========================================================================== */
@media (max-width: 768px) {
  /* (1) Keep the Sign-In button on screen */
  .chat-header { padding: 12px 16px; }
  .builder-container.mobile-chat-open .chat-header { padding-right: 56px; }
  .header-right-section { gap: 8px; }
  .chat-header .lang-select-current { display: none; }
  .chat-header .lang-select-trigger { padding: 0.5rem 0.62rem; gap: 4px; }
  .logo { min-width: 0; flex-shrink: 1; }
  .logo-text { font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; }

  /* (2) Video on top, no large gap. Hide the hero + chips and fully collapse
     the empty welcome wrapper (this is what was leaving the whitespace). */
  .welcome-hero { display: none; }
  #examplePrompts { display: none !important; }
  .welcome-message { padding: 0 !important; gap: 0 !important; margin: 0 !important; }
  .chat-sidebar.chat-empty .chat-messages { padding-top: 14px; }

  /* Keep only the "How it works" eyebrow above the video */
  .firstrun-inline .firstrun-intro h3,
  .firstrun-inline .firstrun-intro p { display: none; }
  .firstrun-inline .firstrun-intro { text-align: start; margin-bottom: -18px; }
  .firstrun-inline { margin-top: 0; }
}