/* CSS variables from dashboard */
    :root {
      --bg: #ffffff;
      --text: #242d26;
      --text-olive: #464c1c;
      --text-muted: #5f6460;
      --text-faint: rgba(36, 45, 38, 0.35);
      --border: rgba(218, 223, 186, 0.5);
      --border-med: rgba(218, 223, 186, 0.8);
      --accent-bg: rgba(218, 223, 186, 0.15);
      --accent-bg-hover: rgba(218, 223, 186, 0.3);
      --radius: 25px;
      --font: 'Geist', -apple-system, sans-serif;
      --bg-alt: #fcfcfa;
      --sec-pad-y: 72px;
    }
    
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    button, input, select, textarea { font-family: inherit; }
    html { scroll-behavior: smooth; scroll-padding-top: 80px; }
    body :lang(ar), body [lang="ar"] { font-family: 'Geist UI', 'Tajawal UI', 'Tajawal', -apple-system, sans-serif; }
    body {
      font-family: var(--font);
      background: var(--bg-alt);
      color: var(--text);
      min-height: 100vh;
      overflow-x: hidden;
      line-height: 1.5;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }
    .page-wrapper {
      background: var(--bg-alt);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    a { text-decoration: none; color: inherit; }
    ul { list-style: none; }
    
    
    /* Marketing-site nav (shared: landing, legal) */
    .nav {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      border-bottom: 0.87px solid var(--border);
      padding: 16px 24px;
    }
    .nav-content {
      max-width: 1200px;
      margin: 0 auto;
      width: 100%;
      display: grid;
      grid-template-columns: auto 1fr auto;
      column-gap: 48px;
      align-items: center;
      padding-left: 32px;
      padding-right: 32px;
      box-sizing: border-box;
    }
    .nav-content > .logo { justify-self: start; }
    .nav-content > .nav-links { justify-self: start; }
    .nav-content > .nav-actions { grid-column: 3; justify-self: end; }
    .logo {
      font-family: var(--font);
      font-size: 20px;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--text);
    }
    .nav-actions { display: flex; align-items: center; gap: 16px; }
    .nav-account { font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap; }
    .btn-outline {
      padding: 8px 16px;
      border: 0.87px solid var(--border);
      border-radius: var(--radius);
      font-size: 14px;
      font-weight: 500;
      color: var(--text);
      background: transparent;
      cursor: pointer;
      transition: all 0.15s;
    }
    .btn-outline:hover { background: var(--accent-bg); border-color: var(--border-med); color: var(--text-olive); }
    @media (max-width: 1024px) {
      .nav-content {
        padding-left: 0;
        padding-right: 0;
        display: flex;
        justify-content: space-between;
      }
    }

    /* Landing-only nav bits (menu links + gradient CTA + mobile hamburger stack) */
    .nav-links {
      display: flex;
      gap: 32px;
    }
    .nav-links a {
      font-size: 14px;
      color: var(--text-muted);
      transition: color 0.15s;
    }
    .nav-links a:hover { color: var(--text); }
    .btn-nav-cta {
      padding: 8px 16px;
      border-radius: var(--radius);
      font-size: 14px;
      font-weight: 500;
      border: none;
      background: #DADFBA;
      color: var(--text);
      transition: background 0.2s;
      white-space: nowrap;
    }
    .btn-nav-cta:hover { background: #c5d4b2; }
    @media (max-width: 1024px) {
      .desktop-nav-auth { display: none !important; }
    }

    /* Avatar + dropdown for a signed-in visitor — same visual language as the
       dashboard's .user-avatar/.user-dropdown-menu and /setup's mirror of it
       (this page has its own inline script, not dashboard.js/setup-page.js;
       lib/user-avatar-nav.js is the shared markup builder so all three don't
       drift). Literal values below match those pages' design-system tokens,
       which this page's own :root doesn't define. */
    .user-avatar {
      width: 32px; height: 32px; border-radius: 50%; background: var(--accent-bg-hover);
      flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: 500; color: var(--text-olive); cursor: pointer;
    }
    .user-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .user-dropdown-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10005; }
    .user-dropdown-menu {
      display: none; position: fixed; z-index: 10006; min-width: 220px; max-width: min(320px, calc(100vw - 32px));
      background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      padding: 4px; font-family: var(--font); animation: dropdownFade 0.15s ease-out forwards;
    }
    @keyframes dropdownFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
    .user-dropdown-header { padding: 12px; }
    .user-email-menu { font-size: 13px; font-weight: 500; color: var(--text); word-break: break-all; line-height: 1.4; }
    .user-plan-menu { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
    .user-dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; }
    .user-dropdown-item { display: block; padding: 10px 12px; font-size: 13px; font-weight: 500; color: var(--text); text-decoration: none; border-radius: 6px; cursor: pointer; transition: background 0.15s; }
    .user-dropdown-item:hover { background: var(--accent-bg); }
    .user-dropdown-item.text-danger { color: #e11d48; }
    .user-dropdown-item.text-danger:hover { background: rgba(225,29,72,0.08); }

    /* Resume banner (returning user with an unfinished site). Two actions —
       Continue (into the wizard) and Cancel (discards the pending session) —
       so a signed-in visitor with an abandoned onboarding is never forced
       anywhere; see lib/resume-banner.js for why this markup is shared
       verbatim across '/', '/dashboard', and '/setup'. */
    .resume-banner {
      display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
      padding: 12px 24px; background: var(--accent-bg); color: var(--text-olive);
      border-bottom: 0.87px solid var(--border-med); font-size: 14px; font-weight: 500;
    }
    .resume-banner strong { font-weight: 600; }
    .resume-banner-actions { display: flex; align-items: center; gap: 8px; }
    .resume-banner-continue, .resume-banner-cancel {
      padding: 6px 14px; border-radius: 80px; font-size: 13px; font-weight: 500;
      text-decoration: none; transition: background 0.15s;
    }
    .resume-banner-continue { background: var(--text-olive); color: #fff; }
    .resume-banner-continue:hover { background: var(--text); }
    .resume-banner-cancel { color: var(--text-olive); }
    .resume-banner-cancel:hover { background: var(--accent-bg-hover); }

    /* Layout */
    .section { padding: var(--sec-pad-y) 0; }
    .container { max-width: 1200px; margin: 0 auto; width: 100%; text-align: left; padding-inline: clamp(16px, 4vw, 32px); box-sizing: border-box; }
    .section-title { font-size: 40px; font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; text-align: center; }
    .landing-section-title { font-size: 50px; }

    /* Scroll reveal: elements start faded/nudged down and ease in when they enter
       the viewport (class toggled by an IntersectionObserver in the script below).
       The .reveal class is added by JS only, so with JS disabled — or if the
       observer/reduced-motion path bails — content stays fully visible (no FOUC,
       nothing ever stuck hidden). */
    .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
    .reveal.is-visible { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1; transform: none; transition: none; }
    }
    
    /* Hero */
    .hero { background: var(--bg-alt); padding: 150px 0; }
    .hero-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
    .mobile-only { display: none; }
    @media (max-width: 1024px) {
      .hero { padding: 96px 0; }
      .hero-grid { gap: 48px; }
      .desktop-only { display: none; }
      br.mobile-only { display: inline; }
      .hero-title { font-size: 40px !important; }
    }
    .hero-title {
      font-size: clamp(20px, 5vw, 64px);
      font-weight: 600;
      line-height: 1.05;
      margin-bottom: 12px;
      letter-spacing: -0.04em;
    }
    .hero-title strong {
      font-weight: 600;
    }
    /* Hero content is centered (title, sub, input form, help link, status). */
    .hero-content { text-align: center; }
    .hero-sub {
      font-size: 18px;
      color: var(--text-muted);
      margin-bottom: 24px;
      max-width: 580px;
      margin-left: auto;
      margin-right: auto;
      font-weight: 400;
    }
    
    /* Input Form */
    .input-form {
      max-width: 680px;
      margin: 0 auto 12px auto;
      display: flex;
      gap: 12px;
    }
    .input-form input {
      flex: 1;
      padding: 16px 20px;
      border: 0.87px solid var(--border);
      border-radius: var(--radius);
      font-size: 16px;
      background: #fff;
      color: var(--text);
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
      direction: ltr;
      unicode-bidi: plaintext;
      text-align: start;
    }
    .input-form input:focus {
      border-color: var(--text-olive);
      box-shadow: 0 0 0 3px var(--accent-bg);
    }
    .input-form input.error {
      border-color: #e11d48;
      box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.15);
    }
    /* Business search: visible red glow on the pill when a click lands with
       no selection. The shared picker (public/css/business-search.css) forces
       "box-shadow: none !important" on the input, so the glow lives on the
       outer pill (desktop) and - in the 480px block below - on the input,
       which carries the pill on mobile. */
    .business-search-control:has([data-business-search-input].error) {
      border-color: #e11d48;
      box-shadow: 0 0 0 4px rgba(225, 29, 72, 0.18), 0 10px 26px rgba(225, 29, 72, 0.12);
    }
    .input-form input::placeholder { color: var(--text-faint); }
    .btn-primary {
      padding: 16px 32px;
      background: #DADFBA;
      color: var(--text);
      font-size: 14px;
      font-weight: 500;
      border: none;
      border-radius: var(--radius);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background 0.2s;
      white-space: nowrap;
    }
    .btn-primary:hover { background: #c5d4b2; }
    .btn-primary:disabled { background: #f2f3ec; color: var(--text-muted); cursor: not-allowed; }
    @keyframes rocket-launch {
      0%, 100% { transform: translate(0, 0) rotate(0deg); }
      50% { transform: translate(2px, -3px) rotate(10deg); }
    }
    .btn-primary svg { transform: translateZ(0); overflow: visible; transform-origin: center; }
    .business-search-launch.is-ready:hover svg {
      animation: rocket-launch 1.2s ease-in-out infinite;
    }
    
    .help-link { font-size: 13px; color: var(--text-muted); text-decoration: underline; }
    .help-link:hover { color: var(--text); }
    
    /* Status */
    .status { font-size: 14px; color: var(--text-muted); margin-top: 16px; }
    .status:empty { display: none; }
    .status.error { color: #e11d48; }

    /* Featured sites — compact proof links using the homepage's calm olive and
       warm-neutral palette. Cards stay still; desktop hover only changes color. */
    .featured-sites-section { background: var(--bg-alt); padding: var(--sec-pad-y) 24px; border-top: 1px solid var(--border); }
    .featured-sites-title { margin: 0 0 40px; }
    .featured-sites-scroll { position: relative; }
    /* Auto-scrolling strip at every width (script at the bottom of the page).
       No scroll-snap: snapping pulls every small scroll step back to the
       nearest card, which freezes the auto-scroll and fights mouse drags.
       safe-center keeps a short list centered when it fits. */
    .featured-sites-row {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      scrollbar-width: none;
      justify-content: safe center;
    }
    .featured-sites-row::-webkit-scrollbar { display: none; }
    .featured-site-item { flex: 0 0 min(76vw, 284px); min-width: 0; }
    .featured-site-card { display: flex; flex-direction: column; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); transition: none; text-decoration: none; padding: 18px; box-sizing: border-box; }
    .featured-site-card:hover { background: var(--accent-bg); border-color: var(--border-med); }
    .featured-site-card:focus-visible { outline: 3px solid rgba(70, 76, 28, 0.34); outline-offset: 3px; }
    .featured-site-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; min-width: 0; }
    .featured-site-header-text { min-width: 0; flex: 1; }
    .featured-site-name { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); margin: 0; }
    .featured-site-location { margin-top: 4px; color: #707e7b; font-size: 14px; font-weight: 400; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .featured-site-image-wrap { flex: 1; min-height: 0; border-radius: 16px; overflow: hidden; background: var(--accent-bg); }
    .featured-site-image-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; }
    /* Phones + tablets: run the strip edge to edge (full-bleed) instead of
       inside the page's side padding, so cards never clip behind container
       padding in the 769-1024 range. */
    @media (max-width: 1024px) {
      .featured-sites-scroll { margin-inline: calc(50% - 50vw); }
    }

    /* Why Colen — restrained, code-native product surfaces. These are not
       screenshots: keeping them in the DOM gives us exact type, spacing and
       responsive behaviour at every viewport. */
    #why-colen { background: var(--bg-alt); border-top: 1px solid var(--border); padding: var(--sec-pad-y) 0; }
    .why-section-title { margin-bottom: 40px; }
    .why-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 300px; column-gap: clamp(32px, 6vw, 88px); }
    .why-row-copy { display: flex; flex-direction: column; justify-content: center; padding: 48px 0; }
    .why-row-title { font-size: 40px; font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; color: var(--text); margin: 0 0 12px; }
    .why-row-desc { max-width: 480px; font-size: 16px; color: var(--text-muted); line-height: 1.6; margin: 0; }
    .why-row-graphic { display: flex; align-items: center; justify-content: flex-end; padding: 40px 0; min-width: 0; }
    .why-product { width: 100%; max-width: 540px; overflow: hidden; border: 1px solid rgba(26, 32, 30, 0.08); border-radius: 24px; box-sizing: border-box; box-shadow: 0 22px 48px rgba(25, 31, 25, 0.08); color: #172019; font-family: inherit; }
    /* The three review cards sit inside a grainy #fbe1a1 stage, matching the
       warm tactile illustration styling and site-core review-card specs. */
    .why-review-stage,
    .why-menu-stage,
    .why-actions-stage {
      position: relative;
      width: 100%;
      max-width: 520px;
      min-height: 320px;
      height: 320px;
      padding: 24px 28px;
      border-radius: 25px;
      background-color: #f1f3e8;
      box-sizing: border-box;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 22px 48px rgba(25, 31, 25, 0.08);
    }
    .why-review-stage::before,
    .why-menu-stage::before,
    .why-actions-stage::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      opacity: 0.22;
      pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
      mix-blend-mode: multiply;
    }
    .why-review-stack { position: relative; width: 100%; max-width: 480px; height: 289px; z-index: 1; transform: scale(0.95); transform-origin: center center; }
    .why-review-card { position: absolute; display: flex; flex-direction: column; gap: 8px; box-sizing: border-box; padding: 20px 24px 18px; border: none; border-radius: 25px; background: #fff; box-shadow: 0 4px 18px rgba(90, 60, 15, 0.09), 0 1px 3px rgba(90, 60, 15, 0.04); color: var(--text); }
    .why-review-card--far { inset: 0 44px 14px 44px; z-index: 1; border-radius: 25px 25px 0 0; background: rgba(255, 255, 255, 0.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
    .why-review-card--middle { inset: 52px 22px 8px 22px; z-index: 2; border-radius: 25px 25px 0 0; background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
    .why-review-card--front { inset: 96px 0 auto 0; z-index: 3; background: #ffffff; }
    .why-review-card--far .why-review-topic { color: rgba(30, 35, 25, 0.45); font-size: 20px; font-weight: 500; line-height: 0.8; }
    .why-review-card--middle .why-review-topic { color: rgba(30, 35, 25, 0.7); font-size: 20px; font-weight: 500; line-height: 0.5; }
    .why-review-topic { margin: 0; color: var(--text); font-size: 20px; font-weight: 500; line-height: 1.3; }
    .why-review-sub { margin: 0; color: #151313; font-size: 15px; font-weight: 400; line-height: 1.5; max-width: 34ch; }
    .why-review-quote-row { display: flex; align-items: flex-start; margin-top: 2px; }
    .why-review-quote { margin: 0; color: var(--text-muted); font-size: 14px; font-weight: 400; line-height: 1.65; }
    .why-review-author { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--text-muted); font-size: 12px; font-weight: 400; }
    .why-review-avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; overflow: hidden; display: block; object-fit: cover; }
    /* Row 2 — zoomed-in snapshot of the live menu feature */
    .why-menu-snapshot { position: relative; width: 100%; max-width: 460px; z-index: 1; display: flex; flex-direction: column; gap: 20px; }
    .why-menu-cats { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; user-select: none; }
    .why-menu-cats::-webkit-scrollbar { display: none; }
    .why-menu-cat-pill {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 32px;
      padding: 0 16px;
      box-sizing: border-box;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 500;
      color: #1a2219;
      background: rgba(255, 255, 255, 0.88);
      border: 1px solid rgba(26, 34, 26, 0.16);
      box-shadow: 0 2px 8px rgba(20, 28, 20, 0.04), inset 0 1px 1px rgba(255, 255, 255, 0.95);
      letter-spacing: 0.01em;
      line-height: 1;
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
    }
    .why-menu-cat-pill.is-active {
      background: #182218;
      border-color: #182218;
      color: #ffffff;
      font-weight: 600;
      box-shadow: none;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
    .why-menu-list { display: flex; flex-direction: column; gap: 14px; }
    .why-menu-item { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
    .why-menu-item-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
    .why-menu-item-name { font-size: 17px; font-weight: 600; color: #1b241a; line-height: 1.25; }
    .why-menu-item-desc { font-size: 13px; font-weight: 400; color: #4e5a4d; line-height: 1.4; }
    .why-menu-item-price { font-size: 17px; font-weight: 600; color: #1b241a; font-variant-numeric: tabular-nums; flex-shrink: 0; }
    /* Row 3 — actions pill cluster */
    .why-actions-stage {
      justify-content: flex-start;
      padding: 24px 0 24px 24px;
    }
    .why-actions-cluster {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: 16px;
      width: max-content;
      margin-inline-start: 18px;
    }
    .why-actions-row {
      display: flex;
      gap: 14px;
      align-items: center;
      white-space: nowrap;
    }
    .why-actions-row--2 {
      margin-inline-start: 0;
    }
    .why-action-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 15px 30px;
      border-radius: 999px;
      font-size: 20px;
      font-weight: 400;
      line-height: 1;
      letter-spacing: -0.01em;
      white-space: nowrap;
      box-sizing: border-box;
      user-select: none;
      flex-shrink: 0;
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
    }
    .why-action-pill--white {
      background: rgba(255, 255, 255, 0.88);
      border: 1px solid rgba(26, 26, 26, 0.18);
      color: #1a1a1a;
      box-shadow: 0 4px 16px rgba(25, 30, 25, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.95);
    }
    .why-action-pill--doordash {
      background: rgba(255, 48, 8, 0.94);
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: #ffffff;
      box-shadow: 0 6px 20px rgba(255, 48, 8, 0.26), inset 0 1px 1px rgba(255, 255, 255, 0.35);
    }
    .why-action-pill--glovo {
      background: rgba(255, 194, 68, 0.94);
      border: 1px solid rgba(255, 255, 255, 0.45);
      color: #007a63;
      box-shadow: 0 6px 20px rgba(255, 194, 68, 0.28), inset 0 1px 1px rgba(255, 255, 255, 0.6);
    }
    .why-action-pill--facebook {
      background: rgba(24, 119, 242, 0.9);
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: #ffffff;
      box-shadow: 0 5px 16px rgba(24, 119, 242, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.35);
    }
    .why-action-pill--instagram {
      background: linear-gradient(135deg, rgba(240, 148, 51, 0.9), rgba(220, 39, 67, 0.9) 50%, rgba(188, 24, 136, 0.9));
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: #ffffff;
      box-shadow: 0 5px 16px rgba(220, 39, 67, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.35);
    }
    .why-action-pill--talabat {
      background: rgba(255, 90, 0, 0.9);
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: #ffffff;
      box-shadow: 0 5px 16px rgba(255, 90, 0, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.35);
    }
    .why-action-pill--ubereats {
      background: rgba(6, 193, 103, 0.94);
      border: 1px solid rgba(255, 255, 255, 0.35);
      color: #ffffff;
      box-shadow: 0 6px 20px rgba(6, 193, 103, 0.24), inset 0 1px 1px rgba(255, 255, 255, 0.4);
    }
    .why-action-pill--fading {
      opacity: 0.6;
    }
    .why-action-pill-icon {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
      display: block;
    }
    .why-action-pill-icon--glovo {
      fill: #00a082;
    }
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
    .why-tabs { background: transparent; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
    /* Cap the tab bar at the standard 1200px content column with 32px side
       padding, matching .container — so tabs and their progress tracks align
       with everything else on the page instead of hugging the viewport edges. */
    .why-tabs-inner { display: flex; max-width: 1136px; margin: 0 auto; box-sizing: border-box; border-inline-start: 1px solid var(--border); border-inline-end: 1px solid var(--border); }
    .why-tab { position: relative; flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 30px 24px 30px; background: transparent; border: none; border-inline-end: 1px solid var(--border); cursor: pointer; font-family: inherit; text-align: start; }
    .why-tab:last-child { border-inline-end: none; }
    .why-tab-head { display: flex; align-items: center; gap: 8px; }
    .why-tab-num { font-size: 11px; font-weight: 500; color: #687069; letter-spacing: 0.04em; }
    .why-tab-label { font-size: 14px; font-weight: 500; color: var(--text-muted); }
    .why-tab.active .why-tab-num { color: var(--text-olive); }
    .why-tab.active .why-tab-label { color: var(--text); }
    .why-tab:hover .why-tab-label { color: var(--text); }
    .why-tab-progress { position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: transparent; overflow: hidden; }
    .why-tab-progress-fill { position: absolute; inset-block: 0; inset-inline-start: 0; width: 100%; background: var(--text-olive); transform: scaleX(0); transform-origin: left center; }
    .why-tab-progress-fill.why-progress-cycle-a { animation: whyTabProgressA var(--why-tab-duration, 9000ms) linear forwards; }
    .why-tab-progress-fill.why-progress-cycle-b { animation: whyTabProgressB var(--why-tab-duration, 9000ms) linear forwards; }
    @keyframes whyTabProgressA { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    @keyframes whyTabProgressB { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    .why-panels { margin-top: 40px; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; box-sizing: border-box; }
    .why-panel { display: none; grid-template-columns: 1fr 1fr; gap: 0; align-items: center; }
    .why-panel .why-text { padding-inline-start: 48px; }
    .why-panel.active { display: grid; }
    .why-panel .why-title { font-size: 24px; font-weight: 600; color: var(--text); line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 10px; }
    .why-panel .why-desc { font-size: 16px; color: var(--text-muted); line-height: 1.65; max-width: 420px; }
    /* The illustration fills a plain rounded card edge-to-edge, no padding,
       and each card just sizes itself to its content. Static, no motion.
       Two layers: .why-visual carries a soft blurred brand-tinted glow behind
       the card (::before, not clipped), .why-visual-inner does the actual
       corner-clipping (overflow: hidden) — one element can't do both, since
       clipping the glow would defeat it. */
    .why-visual { position: relative; border-radius: var(--radius); }
    .why-visual::before {
      content: '';
      position: absolute;
      inset: -18px;
      background: radial-gradient(closest-side, rgba(70, 76, 28, 0.16), rgba(70, 76, 28, 0) 72%);
      filter: blur(18px);
      z-index: 0;
    }
    /* Fixed height (row 1's natural height) so all 3 illustration cards are
       the exact same size — the shorter row 2/3 content is centered inside
       it (row 3's .why-cp-layout overrides this to stretch full-height, see
       below), instead of each card sizing to its own content. */
    .why-visual-inner { position: relative; z-index: 1; background: #fff; border: 0.87px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: 0 16px 32px -16px rgba(36, 45, 38, 0.22), 0 2px 6px rgba(36, 45, 38, 0.06); padding: 18px; display: flex; flex-direction: column; justify-content: center; gap: 12px; height: 307px; }

    /* Why Colen — hand-built illustrations recreating REAL parts of the
       product (not invented mockup UI): the generated site's gallery/review
       (template.js, site-core.css), the dashboard Menu Manager modal
       (dashboard.html/.css), and the Customize panel's palette sidebar +
       inline-edit dashed outline (dashboard.js). Values below are copied as
       literals from those real stylesheets, since the landing page doesn't
       load dashboard.css/site-core.css. Real DOM instead of a screenshot, so
       it stays sharp at any zoom/DPI and its text translates per locale. */

    /* Row 1 — condensed gallery (cornerstone + 3 cells) + one review card,
       matching the real .gallery-cell / .review-card recipe. */
    .why-gallery { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; gap: 6px; }
    .why-gallery-cell { border-radius: 10px; overflow: hidden; }
    .why-gallery-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .why-gr-heading { font-size: 14px; font-weight: 500; color: #161616; }
    .why-gr-sub { font-size: 12px; color: #151313; max-width: 28ch; }
    .why-gr-quote { font-size: 11px; color: #5f6460; line-height: 1.6; }
    .why-gr-author-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
    .why-gr-avatar-init { width: 22px; height: 22px; border-radius: 50%; background: #555; color: #fff; font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .why-gr-author { font-size: 10px; color: #5f6460; }

    /* Row 2 — condensed Menu Manager modal (own header + one category card)
       + the real "Image to Text" upload-btn pill, matching .mm-* / .upload-btn. */
    .why-mm-wrap { background: #fbfbfb; border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
    .why-mm-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; border-bottom: 1px solid rgba(218, 223, 186, 0.5); }
    .why-mm-title { font-size: 13px; font-weight: 500; color: var(--text); }
    .why-mm-close { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.08); display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
    .why-mm-close svg { width: 10px; height: 10px; }
    .why-mm-card { background: #fff; border: 1px solid rgba(218, 223, 186, 0.5); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
    .why-mm-cat-header { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(218, 223, 186, 0.2); padding-bottom: 8px; font-size: 13px; font-weight: 500; color: var(--text); }
    .why-mm-cat-header svg { width: 13px; height: 13px; color: var(--text-faint); }
    .why-mm-items { display: flex; flex-direction: column; gap: 6px; padding-inline-start: 20px; }
    .why-mm-item-row { display: flex; gap: 6px; align-items: center; }
    .why-mm-item-name, .why-mm-item-desc, .why-mm-item-price { border: 1px solid rgba(218, 223, 186, 0.5); border-radius: 6px; padding: 3px 6px; }
    .why-mm-item-name { flex: 3; font-weight: 500; font-size: 11px; }
    .why-mm-item-desc { flex: 5; font-size: 10px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .why-mm-item-price { width: 44px; font-size: 11px; text-align: end; }
    .why-upload-pill { display: flex; align-items: center; justify-content: center; gap: 6px; background: #fff; border: 0.87px solid rgba(218, 223, 186, 0.5); border-radius: 8px; font-size: 12px; font-weight: 500; color: var(--text-olive); padding: 8px 12px; }
    .why-upload-pill svg { width: 13px; height: 13px; }

    /* Row 3 — condensed Customize panel: palette sidebar + preview pane with
       the real .colen-editable dashed-outline hint. */
    .why-visual-inner.why-visual-inner-flush { padding: 0; }
    .why-cp-layout { display: flex; align-items: stretch; flex: 1; }
    .why-cp-sidebar { flex: 0 0 40%; border-inline-end: 0.87px solid var(--border); padding: 14px 12px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
    .why-cp-sidebar-label { font-size: 13px; font-weight: 500; color: var(--text); padding: 0 14px; }
    .why-cp-accordion-body { background: #fff; padding: 14px; display: flex; flex-direction: column; gap: 10px; border-radius: 6px; }
    .why-palette-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 8px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); }
    .why-palette-item.selected { border-color: #1a1a1a; box-shadow: 0 0 0 1px #1a1a1a; background: #fafafa; }
    .why-palette-label { font-size: 12px; font-weight: 500; color: #1a1a1a; }
    .why-palette-swatches { display: flex; gap: 4px; }
    .why-palette-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
    .why-cp-preview { flex: 1; padding: 20px; display: flex; flex-direction: column; justify-content: center; background: #faf8f5; }
    /* Mirrors the real generated-site hero recipe (.hero-heading/.hero-desc in
       site-core.css), scaled down, so this reads as "an actual site" rather
       than illustration-only type. */
    .why-cp-heading, .why-cp-para { outline: 1.5px dashed color-mix(in srgb, currentColor 18%, transparent); outline-offset: 5px; border-radius: 6px; }
    .why-cp-heading { font-size: 32px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; color: var(--text); margin-bottom: 14px; }
    .why-cp-para { font-size: 16px; font-weight: 400; line-height: 1.4; color: var(--text-muted); }

    /* ---- "Why Colen" cursor animations --------------------------------
       Purely decorative CSS-only loop simulating a visitor using each real
       panel (hovering the gallery photos, tapping "Image to Text", picking
       a palette). No JS, no state. To remove entirely: delete this block
       plus the .why-cursor markup appended by lib/why-illustrations.js —
       nothing else depends on it. Disabled under prefers-reduced-motion,
       where every element below falls back to its original static rule. */
    /* Windows-style cursor: white arrow with dark outline, always visible for
       the full tab duration — no opacity tricks, no ripple effects. */
    .why-cursor { position: absolute; width: 13px; height: 18px; pointer-events: none; z-index: 5; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); }
    .why-cursor svg { width: 100%; height: 100%; display: block; }

    .why-gallery-cell:nth-child(1) img { animation: whyCellZoom1 9s ease-in-out infinite; }
    .why-gallery-cell:nth-child(2) img { animation: whyCellZoom2 9s ease-in-out infinite; }
    @keyframes whyCellZoom1 { 0%, 8% { transform: scale(1); } 15%, 27% { transform: scale(1.08); } 34%, 100% { transform: scale(1); } }
    @keyframes whyCellZoom2 { 0%, 30% { transform: scale(1); } 37%, 52% { transform: scale(1.08); } 60%, 100% { transform: scale(1); } }

    /* Row 2 — instead of a fake cursor, the 2nd item's description types
       itself out (as if someone is filling in the menu), then holds, then
       clears for the next loop. The span's own width is what's animated
       (not the fixed-width .why-mm-item-desc box it sits in, which stays
       put) so this can't disturb the row's flex layout. */
    .why-mm-item-desc-text, .why-mm-name-text { display: inline-block; }
    .why-mm-item-desc-text { overflow: hidden; white-space: nowrap; vertical-align: bottom; }
    .why-mm-items .why-mm-item-row:nth-child(2) .why-mm-item-desc-text {
      /* max-width (not width) animates so the span stays naturally sized to its
         text content — once max-width >= text's natural width the box is exactly
         as wide as the text, caret sits flush after the last character.
         --mm-typing-width is set by JS (document.fonts.ready) to the measured
         scrollWidth so steps(22) equals roughly one character per step. */
      width: max-content;
      max-width: 0;
      animation: whyMenuTyping 9s linear infinite;
    }
    /* Caret lives outside the overflow:hidden text span so it's visible
       even when max-width is 0 — that's the blinking-before-typing phase. */
    .why-mm-caret {
      display: inline-block;
      width: 1px;
      height: 9px;
      margin-inline-start: 1px;
      background: var(--text-olive);
      vertical-align: -1px;
      animation: whyCaretBlink 0.8s step-end infinite;
    }
    /* Hidden on desktop; shown only on mobile where the desc column is hidden. */
    .why-mm-name-caret { display: none; }
    @keyframes whyMenuTyping {
      /* Pre-type pause: caret blinks, no text */
      0%  { max-width: 0; animation-timing-function: steps(1, end); }
      /* Typing phase: 22 steps, target = measured scrollWidth set by JS so each
         step ≈ one character's worth of pixels. Fallback 120px covers "Served warm
         with honey" at ~10px font before fonts are measured. */
      12% { max-width: 0; animation-timing-function: steps(22, end); }
      55% { max-width: var(--mm-typing-width, 120px); animation-timing-function: steps(1, end); }
      85% { max-width: var(--mm-typing-width, 120px); animation-timing-function: steps(1, end); }
      100% { max-width: 0; }
    }
    @keyframes whyCaretBlink {
      0%, 49% { opacity: 1; }
      50%, 100% { opacity: 0; }
    }

    /* Gallery cursor: enters top-left photo, drifts to top-right photo,
       then settles on the review card. Stays visible the full 10s. */
    .why-cursor--gallery { animation: whyCursorGallery 9s ease-in-out infinite; }
    @keyframes whyCursorGallery {
      0%   { top: 20%; left: 24%; }
      28%  { top: 20%; left: 24%; }   /* hold at photo 1 */
      42%  { top: 32%; left: 54%; }   /* arrived at photo 2 */
      65%  { top: 32%; left: 54%; }   /* hold at photo 2 */
      78%  { top: 62%; left: 36%; }   /* arrived at review card */
      100% { top: 62%; left: 36%; }   /* stay for rest of tab */
    }

    /* Customize cursor: hovers Terra (already selected), moves down to
       Midnight (4th item), clicks it — palette + preview swap at 48%/58%.
       Stays at Midnight for the rest of the tab. Always visible. */
    .why-cursor--customize { animation: whyCursorCustomize 9s ease-in-out infinite; }
    @keyframes whyCursorCustomize {
      0%   { top: 44%; left: 20%; }
      34%  { top: 44%; left: 20%; }   /* hold at Terra */
      48%  { top: 80%; left: 20%; }   /* arrived at Midnight — click fires here */
      100% { top: 80%; left: 20%; }   /* stay at Midnight */
    }
    .why-cp-accordion-body .why-palette-item:nth-child(2) { animation: whyDeselectTerra 9s ease-in-out infinite; }
    .why-cp-accordion-body .why-palette-item:nth-child(4) { animation: whySelectMidnight 9s ease-in-out infinite; }
    @keyframes whyDeselectTerra {
      0%, 48% { border-color: #1a1a1a; box-shadow: 0 0 0 1px #1a1a1a; background: #fafafa; }
      58%, 100% { border-color: rgba(0,0,0,0.08); box-shadow: none; background: #fff; }
    }
    @keyframes whySelectMidnight {
      0%, 48% { border-color: rgba(0,0,0,0.08); box-shadow: none; background: #fff; }
      58%, 100% { border-color: #1a1a1a; box-shadow: 0 0 0 1px #1a1a1a; background: #fafafa; }
    }
    /* Preview pane's background swaps from Terra's to Midnight's tint at the
       same 48%/58% breakpoints as the palette-list selection swap above. */
    .why-cp-preview { animation: whyPreviewBgSwap 9s ease-in-out infinite; }
    @keyframes whyPreviewBgSwap {
      0%, 48% { background: #faf8f5; }
      58%, 100% { background: #f6f8fa; }
    }
    @media (prefers-reduced-motion: reduce) {
      .why-cursor { display: none; }
      .why-gallery-cell img,
      .why-cp-accordion-body .why-palette-item, .why-cp-preview,
      .why-mm-item-desc-text { animation: none; max-width: none; }
      .why-mm-name-text { animation: none; max-width: none; }
      .why-mm-caret, .why-mm-name-caret { display: none; }
      .why-tab-progress-fill { animation: none !important; }
    }

    /* The 2-column layout has no usable second column on tablets. Keep one
       bounded column centered, then use the same order on every narrow view. */
    @media (max-width: 1024px) {
      .why-row { grid-template-columns: minmax(0, 640px); justify-content: center; min-height: 0; }
      .why-row-copy { order: 1; align-items: center; text-align: center; padding: 32px 0; }
      .why-row-desc { margin-inline: auto; }
      .why-row-graphic { order: 2; padding: 0 0 32px; justify-content: center; }
      .why-actions-stage { justify-content: center; padding-inline: 24px; }
      .why-actions-cluster { margin-inline: 0; }
    }

    @media (max-width: 768px) {
      .why-row-title { font-size: 24px; }
      .why-review-stage,
      .why-menu-stage,
      .why-actions-stage {
        height: 290px;
        min-height: 290px;
        max-height: 290px;
        padding: 20px;
        overflow: hidden;
      }
      .why-actions-stage {
        padding: 20px;
      }
      .why-actions-cluster {
        width: 100%;
        align-items: center;
        gap: 12px;
        margin: 0;
        padding-inline: 0;
        transform: none;
      }
      .why-actions-row { gap: 12px; justify-content: center; flex-wrap: wrap; white-space: normal; }
      .why-actions-row--2 { margin-inline-start: 0; }
      .why-action-pill { padding: 12px 22px; font-size: 17px; font-weight: 400; line-height: 1; gap: 8px; }
      .why-action-pill-icon { width: 18px; height: 18px; display: block; }
      .why-review-stack {
        height: auto;
        padding-top: 56px;
        position: relative;
        width: 100%;
      }
      .why-menu-snapshot { gap: 16px; }
      .why-menu-cats { gap: 8px; overflow: hidden; }
      .why-menu-cat-pill {
        height: 28px;
        padding: 0 12px;
        font-size: 12px;
        line-height: 1;
      }
      .why-menu-list { gap: 12px; }
      .why-menu-item-name { font-size: clamp(15px, 4.2vw, 16px); }
      .why-menu-item-desc { font-size: clamp(11.5px, 3.2vw, 12.5px); }
      .why-menu-item-price { font-size: clamp(15px, 4.2vw, 16px); }
      .why-review-card { min-height: 0; padding: 14px 16px 12px; gap: 5px; }
      .why-review-card--far { inset: 0 20px auto 20px; height: 60px; border-radius: 22px 22px 0 0; padding-top: 10px; }
      .why-review-card--middle { inset: 28px 10px auto 10px; height: 60px; border-radius: 22px 22px 0 0; padding-top: 10px; }
      .why-review-card--front { position: relative; inset: auto; border-radius: 22px; }
      .why-review-card--far .why-review-topic,
      .why-review-card--middle .why-review-topic {
        font-size: clamp(13px, 4vw, 15px);
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .why-review-topic { font-size: clamp(16px, 4.5vw, 18px); }
      .why-review-sub { font-size: 14px; }
      .why-review-quote { font-size: 13px; }
      .why-tabs-inner { max-width: none; padding: 0; border-inline-start: none; border-inline-end: none; }
      .why-tab { padding: 22px 16px 22px; align-items: flex-start; text-align: start; }
      .why-panels { padding-left: 16px; padding-right: 16px; }
      /* Stack the number above the label on mobile so narrow tabs stay
         readable and every tab reads at a glance. Left-aligned labels;
         the panel content below is centered (see .why-panel rules). */
      .why-tab-head { flex-direction: column; align-items: flex-start; gap: 6px; }
      .why-tab-label { font-size: 13px; text-align: start; }
      .why-panels { margin-top: 24px; }
      /* Stack, text (heading + desc) above the visual, centered on mobile. */
      .why-panel { grid-template-columns: 1fr; gap: 20px; }
      .why-panel .why-text { order: 1; padding-inline-start: 0; text-align: center; }
      .why-panel .why-desc { margin-left: auto; margin-right: auto; }
      .why-panel .why-visual { order: 2; }
      .why-panel .why-title { font-size: 20px; }
      .why-visual-inner { padding: 12px; height: 272px; }
      .why-gallery { grid-auto-rows: 90px; }
      .why-mm-item-desc { display: none; }
      .why-mm-item-row:nth-child(3) { display: none; }
      /* Desc hidden on mobile — animate the name instead ("Grilled Halloumi", 16 chars).
         --mm-name-typing-width is set by JS to the measured scrollWidth. */
      .why-mm-items .why-mm-item-row:nth-child(2) .why-mm-name-text {
        display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom;
        width: max-content; max-width: 0;
        animation: whyMenuTypingName 9s linear infinite;
      }
      .why-mm-name-caret {
        display: inline-block; width: 1px; height: 9px; margin-inline-start: 1px;
        background: var(--text-olive); vertical-align: -1px;
        animation: whyCaretBlink 0.8s step-end infinite;
      }
      @keyframes whyMenuTypingName {
        0%  { max-width: 0; animation-timing-function: steps(1, end); }
        12% { max-width: 0; animation-timing-function: steps(16, end); }
        55% { max-width: var(--mm-name-typing-width, 90px); animation-timing-function: steps(1, end); }
        85% { max-width: var(--mm-name-typing-width, 90px); animation-timing-function: steps(1, end); }
        100% { max-width: 0; }
      }
      .why-cp-sidebar { padding: 10px 8px; gap: 4px; }
      .why-cp-accordion-body { padding-top: 4px; }
      .why-cp-preview { padding: 14px; }
      .why-cp-heading { font-size: 24px; }
      .why-cp-para { font-size: 14px; }
    }

    /* Google listing statistics — a quiet continuation of the Why Colen
       section. Each row uses the shared page rail and divider language, with
       the proof point kept deliberately more prominent than its explanation. */
    #google-stats {
      background: var(--bg-alt);
      border-top: 1px solid var(--border);
      padding: var(--sec-pad-y) 0;
    }
    .google-stats-intro { max-width: 680px; margin: 0 auto 48px; text-align: center; }
    .google-stats-intro p { margin: 16px 0 0; color: var(--text-muted); font-size: 18px; line-height: 1.55; }
    .google-stat {
      display: grid;
      grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
      align-items: center;
      gap: clamp(32px, 6vw, 88px);
      padding: 48px 0;
      border-bottom: 1px solid var(--border);
    }
    .google-stat:last-child { border-bottom: none; }
    .google-stat-value { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
    .google-stat-number {
      color: var(--text-olive);
      font-size: clamp(64px, 9vw, 112px);
      font-weight: 600;
      letter-spacing: 0;
      line-height: 0.9;
      font-variant-numeric: tabular-nums;
      font-kerning: normal;
    }
    .google-stat-value h3 { margin: 0; color: var(--text); font-size: 22px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; }
    .google-stat-copy p { margin: 0; color: var(--text-muted); font-size: 16px; line-height: 1.55; }
    .google-stat-copy span { display: block; margin-top: 10px; color: var(--text-faint); font-size: 13px; font-weight: 500; }
    @media (max-width: 768px) {
      .google-stats-intro { margin-bottom: 32px; }
      .google-stats-intro p { font-size: 16px; }
      .google-stat { grid-template-columns: minmax(118px, 0.8fr) minmax(0, 1.2fr); gap: 20px; padding: 36px 0; }
      .google-stat-value { gap: 12px; }
      .google-stat-number { font-size: clamp(50px, 15vw, 80px); }
      .google-stat-value h3 { font-size: 17px; }
      .google-stat-copy p { font-size: 14px; }
    }

    /* How it works */
    #how-it-works { background: var(--bg-alt); border-top: 1px solid var(--border); padding-top: 0; padding-bottom: 0; }
    .how-it-works-layout { display: flex; gap: 0; align-items: stretch; }
    .how-left { flex: 1; max-width: 50%; padding-inline-end: 48px; display: flex; flex-direction: column; justify-content: center; padding-top: var(--sec-pad-y); padding-bottom: var(--sec-pad-y); }
    .how-title { font-size: 50px; font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; margin-bottom: 8px; color: var(--text); margin-top: 0; }
    .how-desc { font-size: 16px; color: var(--text-muted); line-height: 1.6; margin: 0; }
    .how-right { flex: 1; max-width: 50%; border-inline-start: 1px solid var(--border); display: flex; flex-direction: column; justify-content: center; padding-top: var(--sec-pad-y); padding-bottom: var(--sec-pad-y); }
    .how-step { padding: 48px 48px; border-bottom: 1px solid var(--border); display: flex; gap: 32px; align-items: center; }
    .how-step:first-child { padding-top: 0; }
    .how-step:last-child { border-bottom: none; padding-bottom: 0; }
    .step-icon { 
      width: 44px; height: 44px; flex-shrink: 0; border-radius: 8px; 
      background: var(--accent-bg); color: var(--text-olive); 
      display: flex; align-items: center; justify-content: center;
    }
    .step-content { display: flex; flex-direction: column; gap: 4px; }
    .step-title { font-size: 18px; font-weight: 600; margin: 0; color: var(--text); line-height: 1.3; }
    .step-desc { font-size: 14px; color: var(--text-muted); margin: 0; line-height: 1.6; }

    @media (max-width: 1024px) {
      .how-it-works-layout { flex-direction: column; gap: 0; }
      .how-title { font-size: 30px; }
      .how-left { flex: 1; max-width: 100%; padding-inline-end: 0; padding-bottom: 48px; text-align: center; align-items: center; }
      .how-right { flex: 1; max-width: 100%; border-inline-start: none; border-top: 1px solid var(--border); padding-top: 48px; padding-bottom: var(--sec-pad-y); }
      .how-step { padding: 32px 0; }
      .how-step:first-child { padding-top: 0; }
    }

    /* Pricing */
    #pricing {
      background: var(--bg-alt);
      border-top: 1px solid var(--border);
      padding: var(--sec-pad-y) 0;
    }
    .pricing-cards {
      display: flex;
      flex-direction: column;
      gap: 24px;
      margin-top: 32px;
      width: 100%;
    }
    @media (min-width: 1024px) {
      .pricing-cards {
        flex-direction: row;
        align-items: stretch;
        margin-top: 48px;
        gap: 48px;
      }
    }
    .pricing-card {
      flex: 1;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 32px 24px;
      display: flex;
      flex-direction: column;
      position: relative;
    }
    @media (min-width: 1024px) {
      .pricing-card {
        padding: 40px 32px;
      }
    }
    .pricing-card.pro {
      border: 1px solid rgba(70,76,28, 0.4);
      box-shadow: 0 12px 32px rgba(70,76,28,0.1);
      background: #f1f3e8;
    }
    .pro-badge {
      position: absolute;
      top: -14px;
      right: 32px;
      left: auto;
      transform: none;
      background: var(--text-olive);
      color: #fff;
      font-size: 12px;
      font-weight: 500;
      padding: 6px 16px;
      border-radius: 20px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      box-shadow: 0 4px 12px rgba(70,76,28,0.2);
    }
    .plan-header {
      text-align: left;
      margin-bottom: 24px;
      padding-bottom: 24px;
      border-bottom: 1px solid var(--border);
    }
    .plan-name { font-size: 22px; font-weight: 600; color: var(--text); margin-bottom: 12px; }
    .plan-price { font-size: 48px; font-weight: 600; color: var(--text); margin-bottom: 8px; line-height: 1; letter-spacing: -1px; }
    .plan-price span { font-size: 16px; color: var(--text-muted); font-weight: 500; letter-spacing: normal; }
    .plan-desc { font-size: 15px; color: var(--text-muted); margin: 0; }
    .pro-header-top { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; gap: 16px; }
    @media (max-width: 1024px) {
      .pro-header-top { flex-direction: column-reverse; align-items: flex-start; gap: 12px; }
    }
    /* Monthly/Yearly toggle on the Pro pricing card. Whichever side the visitor
       leaves it on is saved (localStorage) and carried into the dashboard as
       their preselected billing interval — see setLandingProInterval() below
       and dashboard.js boot(). */
    .plan-billing-toggle {
      display: inline-flex;
      background: rgba(70, 76, 28, 0.05);
      border: 1px solid rgba(70, 76, 28, 0.06);
      border-radius: 999px;
      padding: 4px;
      gap: 2px;
    }
    .plan-toggle-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      border: none;
      background: transparent;
      border-radius: 999px;
      padding: 6px 16px;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-muted);
      cursor: pointer;
      font-family: inherit;
      transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    }
    .plan-toggle-btn.active { 
      background: #fff; 
      color: var(--text-olive); 
      box-shadow: 0 2px 8px rgba(70, 76, 28, 0.1);
    }
    .plan-toggle-btn.active .plan-toggle-badge { color: var(--text-olive); background: rgba(70, 76, 28, 0.08); }
    .plan-toggle-badge {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-olive);
      background: rgba(70, 76, 28, 0.08);
      border-radius: 999px;
      padding: 1px 7px;
      /* "Save $45/year" is longer than the previous "31% off" — keep the pill
         on one line even on the narrowest mobile viewports. */
      white-space: nowrap;
    }
    .plan-features {
      list-style: none;
      padding: 0;
      margin: 0;
      flex-grow: 1;
    }
    .plan-features li {
      display: flex;
      align-items: flex-start;
      font-size: 15px;
      color: var(--text);
      margin-bottom: 16px;
      line-height: 1.4;
    }
    .plan-features .icon-check {
      color: var(--text-olive);
      margin-right: 12px;
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      margin-top: 1px;
    }
    .plan-features .tip { align-self: center; }
    .plan-features li.missing {
      color: var(--text-muted);
      opacity: 0.8;
    }
    .plan-features .icon-x {
      color: var(--text-muted);
      opacity: 0.5;
      margin-right: 12px;
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      margin-top: 1px;
    }
    .pricing-section-header {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      margin-bottom: 24px;
      text-align: center;
    }
    .pricing-section-header p { text-align: center; }
    @media (max-width: 640px) {
      .pricing-section-header { flex-direction: column; align-items: center; }
    }
    .pricing-unified-cta {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: 48px;
      margin-bottom: 80px;
    }
    .pricing-unified-cta .price-btn {
      width: 100%;
      padding: 16px 40px;
    }
    .pricing-cta-note { margin: 8px 0 0; color: var(--text-muted); font-size: 13px; }
    @media (min-width: 768px) {
      .pricing-unified-cta .price-btn {
        width: auto;
        min-width: 360px;
        margin: 0;
      }
    }
    .price-btn {
      display: block; width: 100%; text-align: center; padding: 14px; border-radius: var(--radius); font-size: 16px; font-weight: 500; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; text-decoration: none;
    }
    .price-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0,0,0,0.06);
    }
    .price-btn.outline { border: 1px solid var(--border); background: #fff; color: var(--text); }
    .compare-section {
      margin-top: 80px;
    }
    .compare-section-title { font-size: 40px; }
    .compare-table-reveal-container {
      position: relative;
      max-height: 250px;
      overflow: hidden;
      transition: max-height 0.8s ease;
    }
    .compare-table-reveal-container.expanded {
      max-height: 2000px;
    }
    .compare-table-fade {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 120px;
      background: linear-gradient(to bottom, rgba(252,252,250,0) 0%, #fcfcfa 100%);
      pointer-events: none;
      transition: opacity 0.5s ease;
    }
    .compare-table-reveal-container.expanded .compare-table-fade {
      opacity: 0;
    }
    .compare-table-wrapper {
      overflow-x: auto;
      background: #fff;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      box-shadow: 0 4px 24px rgba(0,0,0,0.02);
    }
    .compare-table {
      width: 100%;
      border-collapse: collapse;
      text-align: left;
      min-width: 640px;
    }
    .compare-table th, .compare-table td {
      padding: 16px;
      border-bottom: 1px solid var(--border);
      white-space: nowrap;
    }
    @media (min-width: 768px) {
      .compare-table th, .compare-table td {
        padding: 20px 24px;
      }
    }
    .compare-table th {
      font-size: 18px;
      font-weight: 500;
      color: var(--text);
    }
    .compare-table tr:last-child td {
      border-bottom: none;
    }
    .compare-table td:first-child, .compare-table th:first-child {
      background: rgba(70,76,28,0.02);
      font-weight: 500;
      width: 40%;
      color: var(--text);
      border-right: 1px solid var(--border);
    }
    .compare-table td:nth-child(2), .compare-table th:nth-child(2) {
      background: #fff;
    }
    .compare-table td:nth-child(2) {
      color: var(--text-muted);
      font-weight: 400;
    }
    .compare-table-pro-col {
      background: #f1f3e8;
    }
    .compare-table td:nth-child(3), .compare-table th:nth-child(3) {
      border-left: 1px solid var(--border);
      color: var(--text);
    }
    .compare-table td:nth-child(3) {
      font-weight: 400;
    }
    .compare-table .icon-check {
      color: var(--text-olive);
      width: 20px; height: 20px;
      display: inline-block;
      vertical-align: middle;
    }
    .tip {
      display: inline-flex;
      align-items: center;
      vertical-align: middle;
      position: relative;
      margin-left: 6px;
      cursor: help;
    }
    .tip svg {
      width: 14px;
      height: 14px;
      color: var(--text-olive);
      opacity: 0.6;
      flex-shrink: 0;
      transition: opacity 0.15s ease;
    }
    .tip:hover svg, .tip.open svg { opacity: 1; }
    .tip::after {
      content: attr(data-tip);
      position: absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%);
      background: var(--text);
      color: #fff;
      font-size: 13px;
      font-weight: 400;
      padding: 6px 12px;
      border-radius: 6px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.15s ease;
      z-index: 20;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .tip:hover::after, .tip.open::after { opacity: 1; }
    .compare-table .icon-x {
      color: #c0c6cc;
      width: 20px; height: 20px;
      display: inline-block;
      vertical-align: middle;
    }
    @keyframes gradientWave {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    .price-btn.solid {
      display: flex; align-items: center; justify-content: center; gap: 6px;
      background: #DADFBA;
      color: var(--text);
      border-radius: var(--radius);
    }
    .price-btn.solid:hover { background: #c5d4b2; }
    .price-btn.solid svg { transition: transform 0.25s ease-out; }
    .price-btn.solid:hover svg { transform: scale(1.15) rotate(10deg); }

    /* FAQ */
    #faq { background: var(--bg-alt); border-top: 1px solid var(--border); padding-top: 0; padding-bottom: 0; }
    .faq-grid { display: flex; gap: 0; align-items: stretch; }
    .faq-title { font-size: 50px; font-weight: 600; margin-bottom: 12px; letter-spacing: -0.04em; line-height: 1.05; }
    .faq-desc { color: var(--text-muted); font-size: 16px; margin: 0; }
    .faq-header { flex: 1; max-width: 50%; padding-inline-end: 48px; display: flex; flex-direction: column; justify-content: center; position: static; text-align: start; margin: 0; padding-top: var(--sec-pad-y); padding-bottom: var(--sec-pad-y); }
    .faq-container { flex: 1; max-width: 50%; border-inline-start: 1px solid var(--border); display: flex; flex-direction: column; justify-content: center; text-align: start; margin: 0; padding-top: var(--sec-pad-y); padding-bottom: var(--sec-pad-y); }
    .faq-item { background: transparent; border-bottom: 1px solid var(--border); padding-inline-start: 48px; padding-inline-end: 48px; }
    @media (max-width: 1024px) {
      :root { --sec-pad-y: 48px; }
      .faq-grid { flex-direction: column; gap: 0; }
      .faq-header { flex: 1; max-width: 100%; padding-inline-end: 0; padding-bottom: 48px; text-align: center; align-items: center; }
      .faq-title { font-size: 30px; }
      .section-title { font-size: 24px; }
      .landing-section-title { font-size: 30px; }
      .compare-section-title, .why-row-title { font-size: 24px; }
      .faq-container { flex: 1; max-width: 100%; border-inline-start: none; border-top: 1px solid var(--border); padding-top: 48px; padding-bottom: var(--sec-pad-y); }
      .faq-item { padding-inline-start: 0; padding-inline-end: 0; }
    }
    .faq-item:last-child { border-bottom: none; }
    .faq-q {
      width: 100%; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
      padding: 20px 0; background: none; border: none; font-size: 18px; font-weight: 500; color: var(--text);
      cursor: pointer; text-align: start; font-family: var(--font); line-height: 1.3;
      -webkit-tap-highlight-color: transparent;
    }
    .faq-q .icon { transition: transform 0.2s; color: var(--text-muted); flex-shrink: 0; margin-top: 2px; }
    .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.2s ease, padding 0.2s ease, opacity 0.2s ease; font-size: 16px; color: var(--text-muted); line-height: 1.6; opacity: 0; }
    .faq-item.active .faq-a { max-height: 300px; padding-bottom: 20px; opacity: 1; }
    .faq-item.active .faq-q .icon { transform: rotate(180deg); }

    /* Bottom CTA */
    .bottom-cta { background: var(--bg-alt); border-top: 1px solid var(--border); padding: 150px 0; text-align: center; }
    .bottom-cta .container { text-align: center; }
    /* Shared site footer (columns + lang dropdown) */
    
    /* Site footer (shared: landing, legal, blog) */
    .site-footer { background: #fff; border-top: 1px solid var(--border); padding: 48px 24px 32px; margin-top: auto; }
    .site-footer-inner { max-width: 1200px; margin: 0 auto; width: 100%; }
    .site-footer-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(160px, 220px));
      gap: 56px;
    }
    .site-footer-bottom-brand { display: flex; align-items: center; gap: 24px; }
    .site-footer-bottom-brand .logo { font-size: 20px; }
    .site-footer-col-title { font-size: 13px; font-weight: 600; color: var(--text); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 16px; }
    .site-footer-col-links { display: flex; flex-direction: column; align-items: flex-start; }
    .site-footer-col-links a { font-size: 14px; color: var(--text-muted); line-height: 2; }
    .site-footer-col-links a:hover { color: var(--text); }
    .site-footer-bottom {
      border-top: 1px solid var(--border); margin-top: 40px; padding-top: 24px;
      display: flex; justify-content: space-between; align-items: center;
      font-size: 13px; color: var(--text-muted);
    }
    @media (max-width: 768px) {
      .site-footer { padding: 32px 16px 24px; }
      .site-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
      .site-footer-bottom { gap: 16px; }
      .site-footer-bottom-brand { gap: 16px; }
    }

    /* Lang dropdown (verbatim behavior/markup from pages.js) */
    .site-footer-bottom-brand .lang-dropdown { width: fit-content; }
    .lang-dropdown { position: relative; }
    .lang-btn {
      display: flex; align-items: center; gap: 6px; background: none; border: none; font-size: 13px;
      color: var(--text-muted); cursor: pointer; font-family: inherit; padding: 6px 12px; border-radius: 8px;
      transition: background 0.2s, color 0.2s; margin-left: -10px;
    }
    .lang-btn svg { flex-shrink: 0; }
    .lang-btn:hover { background: rgba(0,0,0,0.05); color: var(--text); }
    .lang-menu {
      position: absolute; top: auto; bottom: calc(100% + 4px); left: 0; background: #fff; border: 1px solid var(--border);
      border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); padding: 6px; display: flex; flex-direction: column;
      min-width: 120px; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s;
      transform: translateY(4px); z-index: 10;
    }
    .lang-dropdown.open .lang-menu { opacity: 1; pointer-events: auto; transform: translateY(0); }
    .lang-menu a { padding: 8px 12px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 13px; transition: background 0.2s; }
    .lang-menu a:hover { background: rgba(0,0,0,0.04); }

    /* RTL */
    [dir="rtl"] .lang-dropdown { right: auto; left: 0; text-align: right; }
    [dir="rtl"] .lang-btn { margin-left: 0; margin-right: -10px; }
    [dir="rtl"] .lang-menu { left: auto; right: 0; }


    /* Responsive */
    /* Backdrop sits BELOW the sticky header (z-index 100) so the header
       — with the morphing hamburger/X — stays sharp and clickable while
       the drawer is open. */
    .mobile-nav-backdrop {
      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.4); z-index: 98;
      opacity: 0; visibility: hidden; pointer-events: none;
      transition: opacity 0.22s ease, visibility 0s linear 0.22s;
    }
    .mobile-nav-backdrop.open {
      opacity: 1; visibility: visible; pointer-events: auto;
      transition: opacity 0.22s ease, visibility 0s;
    }
    /* Hamburger: three bars that morph into an X when .open is toggled on
       by the mobile-nav JS. Same source of truth as .mobile-drawer.open —
       no separate flag that can drift (CLAUDE.md rule 18). */
    .hamburger {
      display: none;
      position: relative;
      width: 36px; height: 36px;
      background: none; border: none; cursor: pointer;
      padding: 0; border-radius: 6px;
      color: var(--text);
      transition: background 0.15s;
    }
    .hamburger:hover { background: var(--accent-bg); }
    .hamburger-bar {
      position: absolute;
      left: 8px; right: 8px;
      height: 2px;
      background: currentColor;
      border-radius: 1px;
      transition: top 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                  transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                  opacity 0.18s ease;
    }
    .hamburger-bar:nth-child(1) { top: 11px; }
    .hamburger-bar:nth-child(2) { top: 17px; }
    .hamburger-bar:nth-child(3) { top: 23px; }
    .hamburger.open .hamburger-bar:nth-child(1) { top: 17px; transform: rotate(45deg); }
    .hamburger.open .hamburger-bar:nth-child(2) { opacity: 0; }
    .hamburger.open .hamburger-bar:nth-child(3) { top: 17px; transform: rotate(-45deg); }
    @media (max-width: 1024px) {
      .hamburger { display: inline-block; }
      .nav-links { display: none; }
      .steps { grid-template-columns: 1fr; }
      .input-form { flex-direction: column; }
    }

    /* Phones: stack the CTA button under the search field. The shared picker
       (public/css/business-search.css) draws one pill around input + button;
       here the pill moves onto the input and the button gets its own row.
       The ".input-form.business-search" prefix out-ranks the shared file's
       selectors (including its 480px block) without touching that file.
       The two !important box-shadows are needed only because the shared file
       sets "box-shadow: none !important" on the input. */
    @media (max-width: 640px) {
      .input-form.business-search .business-search-control {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 12px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
      }
      .input-form.business-search .business-search-control:focus-within {
        box-shadow: none;
      }
      .input-form.business-search .business-search-control [data-business-search-input] {
        border: 1px solid var(--border);
        border-radius: 25px;
        background: #fff;
        box-shadow: 0 8px 22px rgba(218, 223, 186, 0.32) !important;
      }
      .input-form.business-search .business-search-control:focus-within [data-business-search-input] {
        border-color: var(--text-olive);
        box-shadow: 0 0 0 4px rgba(218, 223, 186, 0.42), 0 10px 26px rgba(218, 223, 186, 0.36) !important;
      }
      .input-form.business-search .business-search-control [data-business-search-input].error {
        border-color: #e11d48;
        box-shadow: 0 0 0 4px rgba(225, 29, 72, 0.18), 0 10px 26px rgba(225, 29, 72, 0.12) !important;
      }
      /* Centre the icon on the 56px input row, not the whole stacked control. */
      .input-form.business-search .business-search-control .search-icon {
        top: 28px;
      }
      .input-form.business-search .business-search-control .btn-primary {
        width: 100%;
        min-height: 52px;
        margin: 0;
        padding: 0 16px;
        border-radius: 25px;
      }
      /* Open the suggestions just under the input row, not under the button.
         The flipped (is-above) tray keeps the shared bottom-anchored rule. */
      .input-form.business-search .business-search-control .business-search-results:not(.is-above) {
        top: 60px;
      }
    }

    /* Mobile drawer — slides straight down from the top of the viewport.
       Sits BELOW the sticky header (z-index 100) so the header's own logo
       and the morphing hamburger stay visible and clickable; the drawer's
       padding-top clears the header area so content doesn't hide behind it.
       Keeps display:flex through the exit so the transition can play
       (transitionend flips inert/aria-hidden via JS). */
    .mobile-drawer {
      display: flex;
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: #fff;
      z-index: 99;
      flex-direction: column;
      overflow-y: auto;
      padding-top: 72px;
      transform: translateY(-100%);
      visibility: hidden;
      pointer-events: none;
      transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                  visibility 0s linear 0.32s;
    }
    .mobile-drawer.open {
      transform: translateY(0);
      visibility: visible;
      pointer-events: auto;
      transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                  visibility 0s;
    }
    .mobile-drawer-links {
      display: flex;
      flex-direction: column;
      padding: 8px 24px 0;
    }
    .mobile-drawer-links > a {
      padding: 18px 4px;
      border-bottom: 0.5px solid var(--border);
      font-size: 18px;
      font-weight: 500;
      color: var(--text);
    }
    .mobile-drawer-links > a:last-of-type { border-bottom: none; }
    .mobile-drawer-auth {
      display: flex;
      flex-direction: column;
      padding: 20px 0 24px;
      margin: 8px 24px 0;
      border-top: 0.5px solid var(--border);
    }
    .mobile-drawer-auth .mobile-nav-signin {
      display: block;
      width: 100%;
      text-align: center;
      padding: 12px 20px;
      font-size: 15px;
      font-weight: 500;
    }
    .mobile-drawer-auth .mobile-nav-user {
      font-size: 14px;
      font-weight: 500;
      color: var(--text);
      padding-bottom: 12px;
      border-bottom: 0.5px solid var(--border);
    }
    .mobile-drawer-auth .mobile-nav-logout {
      text-align: left;
      padding: 12px 0 0 0;
    }
    [dir="rtl"] .mobile-drawer-auth .mobile-nav-logout { text-align: right; }

    /* RTL Overrides */
    [dir="rtl"] { direction: rtl; font-family: 'Geist UI', 'Tajawal UI', 'Tajawal', -apple-system, sans-serif; }
    [dir="rtl"] body { font-family: 'Geist UI', 'Tajawal UI', 'Tajawal', -apple-system, sans-serif; }
    [dir="rtl"] .logo { display: inline-block; font-family: 'Geist UI', 'Tajawal UI', 'Tajawal', -apple-system, sans-serif; font-size: 24px; }
    [dir="rtl"] .hero-title, [dir="rtl"] .hero-sub { text-align: center; }
    [dir="rtl"] .why-tab-progress-fill { transform-origin: right center; }
    [dir="rtl"] .plan-features .icon-check, [dir="rtl"] .plan-features .icon-x { margin-right: 0; margin-left: 12px; }
    [dir="rtl"] .pro-badge { right: auto; left: 32px; }
    [dir="rtl"] .why-panel, [dir="rtl"] .steps, [dir="rtl"] .plan-header, [dir="rtl"] .pricing-card { text-align: right; }
    [dir="rtl"] .container { text-align: right; }
    /* Bottom CTA (heading + input form + link) stays centered in RTL too;
       this beats the generic rtl .container rule above via specificity. */
    [dir="rtl"] .bottom-cta .container { text-align: center; }
    [dir="rtl"] .compare-table th, [dir="rtl"] .compare-table td { text-align: right; }
    [dir="rtl"] .faq-header { text-align: right; }
    [dir="rtl"] .faq-container { text-align: right; }
    [dir="rtl"] .faq-q { text-align: right; }
    [dir="rtl"] .footer-nav, [dir="rtl"] .footer-desc { text-align: right; }
    [dir="rtl"] .user-dropdown-header { text-align: right; }
    [dir="rtl"] .input-form input { direction: rtl; text-align: right; }
    /* The address itself must stay LTR (email locals are always LTR) while
       the box aligns to the right edge in Arabic — otherwise RTL bidi
       reorders the string, same fix as /setup's mirror of this component. */
    [dir="rtl"] .user-email-menu { direction: ltr; text-align: right; unicode-bidi: plaintext; }
    :lang(ar) .user-dropdown-item[href="/auth/logout"] svg { transform: scaleX(-1); }