/* Molokheya landing styles.
 *
 * Shared by landing/index.html and landing/ar/index.html. Extracted from the
 * English page's inline <style> blocks on 2026-09-27, when the Arabic homepage
 * was built: duplicating ~900 lines into a second file is how two pages that
 * are meant to look identical stop looking identical.
 *
 * RTL is handled by landing/ar/rtl.css, layered on top of this. Prefer logical
 * properties here (inset-inline, margin-inline) over left/right so the Arabic
 * page needs as few overrides as possible.
 */

    :root {
      --primary-green: #1E8449;
      /* Text-only variant of the brand green. #1E8449 scores 4.47 on cream,
         just under the 4.5 AA floor for small text, so anything set in green
         ON a light background uses this instead. Fills keep --primary-green. */
      --green-text: #1C7A43;
      --secondary-green: #2F6B3A;
      --accent-gold: #F4C542;
      --cream: #FFF8EE;
      /* The page background. Warmer than white but far less yellow than
         --cream, which sits at 100% saturation. --cream is NOT changed: it
         is also the text colour on the green buttons and the floating
         scroll cue, so repointing it would repaint type as well as
         surfaces. Matches AppTheme.surfaceLight in the app. */
      --surface: #FBF6EF;
      --dark: #122016;
      /* --terracotta and --berry were removed. The app dropped both in
         September because together with the greens they read as a rainbow,
         and app_theme.dart now says the brand has exactly three greens in
         total, with categories told apart by their labels rather than by
         colour. Gold stays as the one accent. */
      --flag-red: #CE1126;
    }

    * { box-sizing: border-box; }

    html {
      scroll-behavior: smooth;
      overflow-x: hidden;
    }

    html, body {
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'IBM Plex Sans Arabic', sans-serif;
      background: var(--surface);
      color: var(--dark);
    }
    a { color: inherit; }

    /* ---------- shared section rhythm ---------- */
    .wrap {
      max-width: 1040px;
      margin: 0 auto;
      padding: 0 24px;
    }

    section { position: relative; }

    .section-head {
      text-align: center;
      max-width: 620px;
      margin: 0 auto 44px;
    }

    .section-head .eyebrow {
      display: inline-block;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--secondary-green);
      margin-bottom: 10px;
    }

    .section-head h2 {
      font-size: clamp(26px, 4vw, 34px);
      font-weight: 700;
      margin: 0 0 8px;
      color: var(--dark);
    }

    .section-head .ar {
      font-size: 16px;
      color: #766f60;
      direction: rtl;
      margin: 0;
    }

    /* ---------- scroll-reveal ---------- */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }
    /* Section headers travel a bit further so a new section reads as its
       own arriving beat, not just a continuation of the one above it —
       stands in for a hard divider line between sections that share the
       same background. */
    .section-head.reveal {
      transform: translateY(44px);
      transition-duration: 0.8s;
    }
    .section-head.reveal.visible {
      transform: translateY(0);
    }

    /* ---------- nav ---------- */
    .nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 50;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 24px;
      background: transparent;
      transition: background 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
    }
    .nav.scrolled {
      background: rgba(18, 32, 22, 0.92);
      backdrop-filter: blur(8px);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
      padding: 10px 24px;
    }
    .nav-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      color: #ffffff;
      font-weight: 700;
      font-size: 17px;
    }
    .nav-brand img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #ffffff;
      padding: 3px;
    }
    .nav-links {
      display: flex;
      gap: 28px;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .nav-links a {
      text-decoration: none;
      color: rgba(255, 255, 255, 0.78);
      font-size: 14px;
      font-weight: 600;
      transition: color 0.2s ease;
      position: relative;
    }
    .nav-links a::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -6px;
      width: 0;
      height: 2px;
      background: var(--accent-gold);
      transition: width 0.25s ease;
    }
    .nav-links a:hover,
    .nav-links a.active { color: #ffffff; }
    .nav-links a.active::after { width: 100%; }

    @media (max-width: 620px) {
      /* Hide the section links on mobile, but keep the CTA: it is the only
         persistent way back to the app once the hero scrolls out of view. */
      .nav-links { display: flex; gap: 0; }
      .nav-links li { display: none; }
      .nav-links li.nav-cta-item { display: block; }
      .nav-cta { font-size: 12px; padding: 7px 15px; }
    }

    /* ---------- hero ---------- */
    .hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 120px 24px 80px;
      background: linear-gradient(160deg, var(--primary-green), var(--dark) 85%);
      color: #ffffff;
      overflow: hidden;
    }
    .hero-texture {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image: radial-gradient(circle, rgba(244, 197, 66, 0.09) 1.5px, transparent 1.5px);
      background-size: 34px 34px;
      animation: driftTexture 40s linear infinite;
    }
    @keyframes driftTexture {
      from { background-position: 0 0; }
      to { background-position: 340px 340px; }
    }
    .hero-glow {
      position: absolute;
      width: 620px;
      height: 620px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(244, 197, 66, 0.16), transparent 70%);
      top: -220px;
      right: -180px;
      pointer-events: none;
    }
    .hero-content {
      position: relative;
      z-index: 1;
      max-width: 560px;
    }
    .logo-ring {
      width: 108px;
      height: 108px;
      border-radius: 50%;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 24px;
      padding: 8px;
      box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
      animation: floatY 5s ease-in-out infinite;
    }
    @keyframes floatY {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }
    .logo-ring img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
    }
    .badge {
      display: inline-block;
      background: var(--accent-gold);
      color: var(--dark);
      font-weight: 700;
      font-size: 12px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      padding: 7px 18px;
      border-radius: 999px;
      margin-bottom: 22px;
    }
    .hero h1 {
      font-size: clamp(32px, 6vw, 44px);
      font-weight: 700;
      margin: 0 0 6px;
      letter-spacing: 0.3px;
    }
    .hero .arabic-name {
      font-size: 21px;
      font-weight: 600;
      color: #ffffff;
      margin: 0 0 22px;
    }
    .hero-motto {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--accent-gold);
      margin: 0 0 32px;
    }
    .hero-motto::before,
    .hero-motto::after {
      content: '';
      width: 24px;
      height: 1px;
      background: rgba(244, 197, 66, 0.5);
    }
    .hero-tagline {
      font-size: clamp(16px, 2.3vw, 18px);
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.86);
      max-width: 470px;
      margin: 0 auto 30px;
    }
    .scroll-cue {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      text-decoration: none;
      color: rgba(255, 255, 255, 0.75);
      font-size: 12px;
      letter-spacing: 1px;
      text-transform: uppercase;
      font-weight: 600;
    }
    .scroll-cue .chevron {
      width: 10px;
      height: 10px;
      border-right: 2px solid rgba(255, 255, 255, 0.75);
      border-bottom: 2px solid rgba(255, 255, 255, 0.75);
      transform: rotate(45deg);
      animation: bounceDown 1.8s ease-in-out infinite;
    }
    @keyframes bounceDown {
      0%, 100% { transform: rotate(45deg) translate(0, 0); }
      50% { transform: rotate(45deg) translate(4px, 4px); }
    }

    /* ---------- intro strip / dish rotator ---------- */
    .intro {
      padding: 56px 24px;
      text-align: center;
      background: var(--surface);
    }
    .intro p {
      max-width: 620px;
      margin: 0 auto 4px;
      font-size: 17px;
      line-height: 1.7;
      color: #3a3630;
    }
    .intro .ar {
      max-width: 620px;
      margin: 0 auto 26px;
      font-size: 14px;
      color: #756f65;
      direction: rtl;
    }
    .dish-rotator {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: #ffffff;
      border: 1px solid rgba(30, 77, 43, 0.12);
      border-radius: 999px;
      padding: 10px 22px;
      font-size: 14px;
      color: #6b6558;
      box-shadow: 0 4px 16px rgba(30, 77, 43, 0.06);
    }
    .dish-rotator .dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--accent-gold);
      flex-shrink: 0;
      animation: pulseDot 1.6s ease-in-out infinite;
    }
    @keyframes pulseDot {
      0%, 100% { opacity: 0.4; transform: scale(0.85); }
      50% { opacity: 1; transform: scale(1.1); }
    }
    .dish-rotator #dish-name {
      font-weight: 700;
      color: var(--green-text);
      display: inline-block;
      min-width: 130px;
      text-align: left;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .dish-rotator #dish-name.swap {
      opacity: 0;
      transform: translateY(4px);
    }


    /* ---------- features ---------- */
    .features {
      padding: 90px 24px 100px;
      background: var(--surface);
    }
    .feature-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }
    @media (max-width: 680px) {
      .feature-grid { grid-template-columns: 1fr; }
    }
    /* Five cards in two columns leaves the fifth alone on its own row. It
       spans the full width instead, and cost is the right one to hand the
       extra room to: no other Egyptian recipe app publishes cost per
       serving, so it is the strongest claim on this page rather than the
       leftover. Laid out as icon beside text, since a full-width card with
       the icon stacked above would just be a wide short box.

       Grid rather than flex because the card's children are a sibling icon,
       h3 and p with no wrapper, so the icon has to span two rows instead of
       the three of them sharing one row. No markup change needed. */
    @media (min-width: 681px) {
      .feature-card:last-child {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 22px;
        align-items: start;
      }
      .feature-card:last-child .feature-icon {
        grid-row: 1 / span 2;
        margin-bottom: 0;
      }
    }
    .feature-card {
      background: #ffffff;
      border-radius: 20px;
      padding: 28px 26px;
      box-shadow: 0 6px 24px rgba(30, 77, 43, 0.07);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .feature-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 14px 34px rgba(30, 77, 43, 0.14);
    }
    .feature-icon {
      width: 52px;
      height: 52px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px;
    }
    .feature-card h3 {
      font-size: 18px;
      font-weight: 700;
      margin: 0 0 8px;
      color: var(--dark);
    }
    .feature-card p {
      font-size: 14.5px;
      line-height: 1.6;
      color: #6b6558;
      margin: 0;
    }

    /* ---------- how it works ---------- */
    .how {
      padding: 90px 24px 100px;
      background: #ffffff;
    }
    .steps {
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
    }
    @media (max-width: 720px) {
      .steps { grid-template-columns: 1fr; gap: 40px; }
    }
    .steps::before {
      content: '';
      position: absolute;
      top: 26px;
      left: 12%;
      right: 12%;
      height: 2px;
      background: repeating-linear-gradient(to right, rgba(30, 77, 43, 0.25) 0 8px, transparent 8px 16px);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 1.1s ease;
    }
    .steps.visible::before { transform: scaleX(1); }
    @media (max-width: 720px) {
      .steps::before { display: none; }
    }
    .step {
      text-align: center;
      position: relative;
    }
    .step .num {
      width: 54px;
      height: 54px;
      border-radius: 50%;
      background: var(--primary-green);
      color: #ffffff;
      font-weight: 700;
      font-size: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 18px;
      box-shadow: 0 8px 20px rgba(30, 77, 43, 0.25);
      position: relative;
      z-index: 1;
    }
    .step:nth-child(2) .num { background: var(--secondary-green); }
    .step h3 {
      font-size: 17px;
      font-weight: 700;
      margin: 0 0 8px;
    }
    .step p {
      font-size: 14px;
      line-height: 1.6;
      color: #6b6558;
      margin: 0;
      max-width: 240px;
      margin-inline: auto;
    }

    /* ---------- Molokheya+ teaser ---------- */
    .plus {
      padding: 90px 24px;
      background: linear-gradient(135deg, #fff6e0, #fff0cc);
    }
    .plus-card {
      max-width: 760px;
      margin: 0 auto;
      background: var(--dark);
      border-radius: 28px;
      padding: 48px 40px;
      color: #ffffff;
      position: relative;
      overflow: hidden;
    }
    .plus-card::before {
      content: '';
      position: absolute;
      width: 340px;
      height: 340px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(244, 197, 66, 0.18), transparent 70%);
      top: -120px;
      left: -80px;
    }
    .plus-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--accent-gold);
      color: var(--dark);
      font-weight: 700;
      font-size: 13px;
      padding: 7px 16px;
      border-radius: 999px;
      margin-bottom: 20px;
      position: relative;
      z-index: 1;
      background-size: 200% 100%;
      animation: shimmer 3.5s ease-in-out infinite;
      background-image: linear-gradient(110deg, var(--accent-gold) 40%, #fff2c2 50%, var(--accent-gold) 60%);
    }
    @keyframes shimmer {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
    .plus-card h2 {
      font-size: 26px;
      font-weight: 700;
      margin: 0 0 12px;
      position: relative;
      z-index: 1;
    }
    .plus-card > p {
      font-size: 15px;
      line-height: 1.7;
      color: rgba(255, 255, 255, 0.75);
      margin: 0 0 26px;
      max-width: 480px;
      position: relative;
      z-index: 1;
    }
    .plus-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
      position: relative;
      z-index: 1;
    }
    @media (max-width: 560px) {
      .plus-list { grid-template-columns: 1fr; }
    }
    .plus-list li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 14.5px;
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.92);
    }
    .plus-list .check {
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: rgba(244, 197, 66, 0.18);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 1px;
    }
    .plus-list .check svg { width: 11px; height: 11px; }

    /* ---------- buttons ---------- */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 14px 26px;
      border-radius: 999px;
      font-family: 'IBM Plex Sans Arabic', sans-serif;
      font-weight: 700;
      font-size: 15px;
      text-decoration: none;
      cursor: pointer;
      border: 1.5px solid transparent;
      transition: transform 0.16s ease, box-shadow 0.22s ease,
                  background-color 0.22s ease, border-color 0.22s ease;
    }
    .btn svg { width: 17px; height: 17px; flex-shrink: 0; }
    .btn-primary {
      background: var(--accent-gold);
      color: var(--dark);
      box-shadow: 0 10px 26px rgba(244, 197, 66, 0.28);
    }
    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 32px rgba(244, 197, 66, 0.4);
    }
    .btn-ghost {
      background: rgba(255, 255, 255, 0.07);
      color: #ffffff;
      border-color: rgba(255, 255, 255, 0.28);
    }
    .btn-ghost:hover {
      background: rgba(255, 255, 255, 0.14);
      border-color: rgba(255, 255, 255, 0.5);
      transform: translateY(-2px);
    }
    .btn-solid {
      background: var(--primary-green);
      color: var(--cream);
      box-shadow: 0 10px 26px rgba(30, 77, 43, 0.28);
    }
    .btn-solid:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 32px rgba(30, 77, 43, 0.4);
    }
    .btn:focus-visible {
      outline: 3px solid var(--accent-gold);
      outline-offset: 3px;
    }

    /* ---------- hero call-to-action ---------- */
    .hero-cta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin: 0 0 18px;
    }
    .hero-trust {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 8px 18px;
      margin: 0 0 34px;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.72);
    }
    .hero-trust span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .hero-trust .tick {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--accent-gold);
    }

    /* ---------- nav CTA ---------- */
    .nav-cta {
      padding: 8px 18px;
      border-radius: 999px;
      background: var(--accent-gold);
      color: var(--dark) !important;
      font-weight: 700;
      font-size: 13px;
      text-decoration: none;
      white-space: nowrap;
      transition: transform 0.15s ease;
    }
    .nav-cta:hover { transform: translateY(-1px); }

    /* ---------- install / everywhere ---------- */
    .install {
      padding: 76px 24px;
      background: var(--surface);
    }
    .install-card {
      max-width: 880px;
      margin: 0 auto;
      background: #ffffff;
      border-radius: 20px;
      padding: 40px 34px;
      text-align: center;
      box-shadow: 0 10px 30px rgba(30, 77, 43, 0.1);
      border: 1px solid rgba(30, 77, 43, 0.08);
    }
    .install-card h2 {
      font-size: clamp(22px, 3.4vw, 28px);
      font-weight: 700;
      margin: 0 0 10px;
      color: var(--green-text);
    }
    .install-card > p {
      font-size: 15.5px;
      line-height: 1.65;
      color: rgba(18, 32, 22, 0.75);
      max-width: 560px;
      margin: 0 auto 30px;
    }
    .platforms {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: 16px;
      text-align: left;
    }
    .platform {
      display: flex;
      gap: 13px;
      align-items: flex-start;
      padding: 18px;
      border-radius: 14px;
      background: var(--surface);
      border: 1px solid rgba(30, 77, 43, 0.1);
    }
    .platform svg {
      width: 21px;
      height: 21px;
      flex-shrink: 0;
      margin-top: 2px;
    }
    .platform h3 {
      margin: 0 0 4px;
      font-size: 15px;
      font-weight: 700;
      color: var(--green-text);
    }
    .platform p {
      margin: 0;
      font-size: 13.5px;
      line-height: 1.55;
      color: rgba(18, 32, 22, 0.7);
    }

    /* ---------- closing CTA ---------- */
    .cta-final {
      padding: 82px 24px;
      text-align: center;
      /* Vertical, unlike the hero's 160deg. This section sits directly on
         top of the footer, and a leaning gradient's bottom edge is not one
         colour: it runs lighter on one side and darker on the other, so the
         footer's flat --dark met it at a visible diagonal seam. Vertical
         means the whole bottom edge is exactly --dark, which the footer
         continues with nothing to see. */
      background: linear-gradient(180deg, var(--primary-green), var(--dark) 88%);
      color: #ffffff;
    }
    .cta-final h2 {
      font-size: clamp(24px, 4vw, 33px);
      font-weight: 700;
      margin: 0 0 10px;
      max-width: 620px;
      margin-inline: auto;
    }
    .cta-final .ar {
      font-size: 16px;
      font-weight: 600;
      color: var(--accent-gold);
      margin: 0 0 30px;
    }
    .cta-final .fine {
      margin: 18px 0 0;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.55);
    }

    /* ---------- footer ---------- */
    footer {
      padding: 24px 24px 18px;
      /* Solid dark, not its own gradient. The closing CTA above already
         fades to --dark, so restarting at --primary-green here drew a hard
         bright line across the page at the boundary. This lets the two
         read as one continuous field. */
      background: var(--dark);
    }
    .footer-row {
      max-width: 1040px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 12px;
    }
    .footer-links {
      display: flex;
      align-items: center;
      gap: 20px;
      font-size: 13px;
    }
    footer a {
      text-decoration: none;
      color: rgba(255, 255, 255, 0.75);
      transition: color 0.2s ease;
    }
    footer a:hover { color: var(--accent-gold); }
    .toast {
      position: fixed;
      left: 50%;
      bottom: 28px;
      transform: translateX(-50%) translateY(12px);
      background: var(--primary-green);
      color: var(--cream);
      font-family: 'IBM Plex Sans Arabic', sans-serif;
      font-size: 15px;
      font-weight: 600;
      padding: 12px 18px;
      border-radius: 14px;
      box-shadow: 0 8px 24px rgba(30, 77, 43, 0.35);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease, transform 0.25s ease;
      z-index: 500;
      white-space: nowrap;
    }
    .toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
    .footer-copy {
      max-width: 1040px;
      margin: 14px auto 0;
      text-align: center;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.4);
    }

    @media (max-width: 420px) {
      .hero { padding-top: 100px; }
    }

    .waitlist { padding: 90px 22px; background: var(--cream); }
    .waitlist-card {
      max-width: 700px; margin: 0 auto; background: #ffffff;
      border-radius: 20px; padding: 44px 34px; text-align: center;
      box-shadow: 0 10px 30px rgba(30, 77, 43, 0.1);
      border: 1px solid rgba(30, 77, 43, 0.08);
    }
    .waitlist-card h2 { margin: 0 0 6px; }
    .waitlist-card .ar { font-size: 1rem; color: var(--green-text); margin: 0 0 18px; }
    .waitlist-offer {
      display: inline-block; background: var(--accent-gold); color: var(--dark);
      font-weight: 700; padding: 10px 20px; border-radius: 999px;
      margin: 0 0 20px; font-size: 0.98rem; line-height: 1.5;
    }
    .waitlist-form { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
    .waitlist-form input[type="email"] {
      flex: 1 1 260px; min-width: 0; padding: 14px 16px; font: inherit;
      border: 1px solid rgba(30, 77, 43, 0.25); border-radius: 14px; background: #fff;
    }
    .waitlist-form input[type="email"]:focus {
      outline: none; border-color: var(--primary-green);
      box-shadow: 0 0 0 3px rgba(30, 132, 73, 0.15);
    }
    .waitlist-form button { flex: 0 0 auto; }
    .waitlist-note { margin-top: 16px; font-size: 0.86rem; color: #6B6558; }
    .waitlist-msg { margin-top: 14px; font-size: 0.95rem; font-weight: 600; min-height: 1.4em; }
    .waitlist-msg.ok { color: var(--green-text); }
    .waitlist-msg.err { color: #CE1126; }
    @media (max-width: 560px) { .waitlist-form button { width: 100%; } }

    .wl-dialog {
      border: none; padding: 0; border-radius: 20px; max-width: 460px; width: calc(100% - 32px);
      box-shadow: 0 24px 60px rgba(18, 32, 22, 0.35); background: #fff; color: var(--dark);
    }
    .wl-dialog::backdrop { background: rgba(18, 32, 22, 0.55); }
    .wl-dialog-inner { padding: 30px 26px 26px; text-align: center; position: relative; }
    .wl-close {
      position: absolute; top: 10px; inset-inline-end: 12px; background: none; border: none;
      font-size: 1.5rem; line-height: 1; cursor: pointer; color: #6B6558; padding: 4px 8px;
    }
    .wl-dialog h2 { margin: 0 0 6px; font-size: 1.35rem; }
    .wl-dialog .ar { font-size: 0.98rem; color: var(--green-text); margin: 0 0 16px; }
    .wl-dialog p { margin: 0 0 14px; }