/* ==========================================================================
   Kleenick AI — shared stylesheet for the Hebrew (/) and English (/en/) pages.
   Direction-sensitive rules use CSS logical properties, so the same file
   drives both left-to-right and right-to-left layouts.
   ========================================================================== */

/* ===== RESET & BASE ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Every colour on the page lives here — hues and neutrals both, with no
   exceptions left, so "never write a colour literal outside :root" can be
   read as the flat rule it is. The `-rgb` companions exist because shadows,
   borders, gradients and washes need the same colour at partial alpha:
   writing rgba(var(--rose-rgb), 0.08) instead of rgba(169, 78, 103, 0.08)
   keeps this block the single source of truth. It was not always so — the
   previous palette had 22 hue literals scattered through the file, so a
   palette change silently left old colours in every gradient.

   Contrast floor: any pairing that carries text clears 4.5:1 (WCAG AA).
   Measured — rose on light-gray 4.53, on cream 4.99, white on rose 5.29;
   eucalyptus on white 4.55; white on navy 14.69; slate on cream 5.61. */
:root {
    /* Structure */
    --navy: #14274E;
    --navy-rgb: 20, 39, 78;
    --navy-hover: #1E3358;
    --cream: #FAF8F5;
    --cream-rgb: 250, 248, 245;
    --light-gray: #F0EDE8;
    --slate: #5F6376;

    /* Rose carries the call to action. --rose-light is the variant for use
       ON navy: full-strength rose separates only 2.78 from it. The -hover
       pair is a hand-darkened / hand-lightened step for the pressed state,
       following --navy-hover above; neither is ever used at partial alpha,
       so neither needs an -rgb companion. */
    --rose: #A94E67;
    --rose-rgb: 169, 78, 103;
    --rose-hover: #96425A;
    --rose-light: #D08A97;
    --rose-light-hover: #DC9CA8;

    /* Eucalyptus marks confirmation — ✓ bullets, the "relief" section.
       Deliberately not a vivid green: it has to stay distinguishable from
       WhatsApp green rather than compete with it. */
    --eucalyptus: #3A8271;
    --eucalyptus-rgb: 58, 130, 113;

    /* WhatsApp's own green, and the one rule about it: it appears on the
       floating mobile bubble and nowhere else. The product is web chat —
       a page dressed in this green reads as a WhatsApp tool, which it is not. */
    --whatsapp: #25D366;
    --whatsapp-rgb: 37, 211, 102;

    /* The neutrals. White is both a raised surface (cards, the language pill)
       and an ink (text on rose or navy) — the same white in both roles, so one
       token covers both. Black never appears at full strength: it is only ever
       depth, in shadows and hairline borders, which is why --black-rgb has no
       solid companion. Unlike the hues, these do not change when the palette
       does; they live here for consistency, not because they would break. */
    --white: #fff;
    --white-rgb: 255, 255, 255;
    --black-rgb: 0, 0, 0;

    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'DM Sans', -apple-system, sans-serif;
}

/* Hebrew needs typefaces that actually contain Hebrew glyphs — Playfair
   Display and DM Sans have none, and would silently fall back to a system
   font. One family covers both roles here: hierarchy comes from weight
   rather than a serif/sans contrast, which reads warmer and less editorial
   than the English pairing — the page is meant to sound like a person, not
   a masthead. Arial Hebrew is the fallback that actually carries the glyphs. */
[lang="he"] {
    --font-heading: 'Noto Sans Hebrew', 'Arial Hebrew', sans-serif;
    --font-body: 'Noto Sans Hebrew', 'Arial Hebrew', sans-serif;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    color: var(--navy);
    background-color: var(--cream);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Noto Sans Hebrew has a large x-height and sets tighter than the Latin
   faces, so Hebrew body copy needs the extra leading to breathe. */
[lang="he"] body {
    line-height: 1.75;
}

/* ===== UTILITY ===== */
.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Keeps the fixed navbar from covering a section scrolled to by anchor. */
section {
    scroll-margin-top: 90px;
}

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

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

.section-label {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--rose);
    margin-bottom: 16px;
}

/* Hebrew has no uppercase, and wide tracking hurts its legibility. */
[lang="he"] .section-label {
    letter-spacing: 1px;
    text-transform: none;
}

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

.section-head h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 16px;
}

.section-head p {
    font-size: 1.1rem;
    color: var(--slate);
    line-height: 1.7;
}

/* ===== BUTTONS =====
   One base geometry, three colour variants, so the primary and demo buttons
   stay visually in sync while remaining clearly distinct. The primary CTA is
   rose, not WhatsApp green: the glyph inside it carries the "this opens
   WhatsApp" affordance, so the colour is free to belong to the brand. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 600;
    padding: 16px 32px;
    border-radius: 50px;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.btn-primary {
    background-color: var(--rose);
    color: var(--white);
    box-shadow: 0 4px 20px rgba(var(--rose-rgb), 0.3);
}

.btn-primary:hover {
    background-color: var(--rose-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(var(--rose-rgb), 0.4);
}

/* Full-strength rose separates only 2.78 from the navy band, which reads
   muddy. The lighter rose gets 5.43 against it, with navy text on top. */
.final-cta .btn-primary {
    background-color: var(--rose-light);
    color: var(--navy);
    box-shadow: 0 4px 20px rgba(var(--black-rgb), 0.25);
}

.final-cta .btn-primary:hover {
    background-color: var(--rose-light-hover);
    box-shadow: 0 8px 30px rgba(var(--black-rgb), 0.3);
}

/* Navy, so the demo reads as secondary to the rose CTA above it. */
.btn-demo {
    background-color: var(--navy);
    color: var(--white);
    box-shadow: 0 4px 20px rgba(var(--navy-rgb), 0.18);
}

.btn-demo:hover {
    background-color: var(--navy-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(var(--navy-rgb), 0.28);
}

.btn-outline {
    background-color: transparent;
    color: var(--navy);
    border-color: rgba(var(--navy-rgb), 0.18);
}

.btn-outline:hover {
    border-color: var(--navy);
    background-color: rgba(var(--navy-rgb), 0.04);
}

.btn-lg {
    font-size: 1.15rem;
    padding: 18px 40px;
}

.btn-block {
    display: flex;
    width: 100%;
}

/* ===== NAVIGATION ===== */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 20px 0;
    transition: all 0.3s ease;
}

.nav.scrolled {
    background: rgba(var(--cream-rgb), 0.95);
    backdrop-filter: blur(10px);
    padding: 14px 0;
    box-shadow: 0 2px 20px rgba(var(--black-rgb), 0.06);
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.nav-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--navy);
    text-decoration: none;
    /* The brand name stays Latin on both pages, so it always reads LTR — which
       also keeps the mark before the wordmark in Hebrew, as a lockup should. */
    direction: ltr;
    unicode-bidi: isolate;
}

.nav-logo img {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

/* The wordmark is wrapped so the flex `gap` above separates mark from text and
   nothing else. Without the wrapper, "Kleenick" and the rose "AI" would each be
   a flex item and the gap would prise the brand name apart. */
.nav-logo .wordmark span {
    color: var(--rose);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* The language switch is a plain link — no JavaScript, and each language
   keeps its own shareable, indexable address. */
.nav-lang {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--navy);
    text-decoration: none;
    padding: 8px 16px;
    border: 1px solid rgba(var(--navy-rgb), 0.18);
    border-radius: 50px;
    background: rgba(var(--white-rgb), 0.6);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.nav-lang:hover {
    border-color: var(--navy);
    background: var(--white);
}

.nav-lang svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.6;
}

.nav-cta {
    display: none;
    align-items: center;
    gap: 8px;
    background-color: var(--rose);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.nav-cta:hover {
    background-color: var(--rose-hover);
}

@media (min-width: 768px) {
    .nav-cta {
        display: inline-flex;
    }
}

/* ===== 1. HEADER HOOK ===== */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 120px 0 80px;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -20%;
    inset-inline-end: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(var(--rose-rgb), 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: -10%;
    inset-inline-start: -5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(var(--eucalyptus-rgb), 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--light-gray);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--slate);
    margin-bottom: 28px;
}

/* A plain accent dot, not a status light. It used to pulse, which read as
   "live" next to the old social-proof badge; the badge now carries a value
   claim, where a blinking indicator says nothing true. */
.hero-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--eucalyptus);
    border-radius: 50%;
    flex-shrink: 0;
}

.hero h1 {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 5.5vw, 4rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--navy);
    margin-bottom: 24px;
}

/* The English headline emphasises with an italic phrase. Hebrew typography
   has no italics, so both pages emphasise with colour instead. */
.hero h1 em {
    font-style: normal;
    color: var(--rose);
}

/* Hebrew headings and body share one family, so colour alone carries the
   emphasis. The extra weight gives it a second signal. */
[lang="he"] .hero h1 em {
    font-weight: 900;
}

.hero-sub {
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    color: var(--slate);
    line-height: 1.7;
    margin-bottom: 40px;
    max-width: 560px;
}

.hero-visual {
    position: absolute;
    inset-inline-end: -40px;
    top: 50%;
    transform: translateY(-50%);
    width: 420px;
    height: 420px;
    display: none;
}

@media (min-width: 1024px) {
    .hero-visual {
        display: block;
    }
}

.hero-visual-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--light-gray) 0%, rgba(var(--rose-rgb), 0.06) 100%);
    border: 1px solid rgba(var(--rose-rgb), 0.1);
    position: relative;
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.hero-visual-circle::before {
    content: '';
    position: absolute;
    top: 20%;
    inset-inline-start: 20%;
    width: 60%;
    height: 60%;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(var(--eucalyptus-rgb), 0.15) 0%, rgba(var(--rose-rgb), 0.1) 100%);
}

.hero-visual-circle::after {
    content: '💬';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem;
}

/* ===== 2. THE PAIN ===== */
.pain {
    padding: 100px 0;
    background: var(--light-gray);
}

/* Shared card grid for the two sections below the hero. Deliberately the
   same geometry as .pricing-grid so all three card sections read as one
   system rather than three separate designs. */
.point-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .point-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.point {
    padding: 32px 28px;
    border-radius: 20px;
    background: var(--white);
    border: 1px solid rgba(var(--black-rgb), 0.06);
    box-shadow: 0 2px 12px rgba(var(--black-rgb), 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.point:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(var(--black-rgb), 0.08);
}

.point h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--navy);
    margin-bottom: 12px;
    position: relative;
    padding-inline-start: 22px;
}

/* Logical inset, so the dot sits left in English and right in Hebrew
   off one rule. Same pattern as .plan-features li::before. */
.point h3::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0.5em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--rose);
}

.point p {
    font-size: 0.98rem;
    color: var(--slate);
    line-height: 1.7;
}

.pain-closer {
    text-align: center;
    max-width: 620px;
    margin: 44px auto 0;
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.75;
    color: var(--navy);
}

/* ===== 3. TRY THE DEMO ===== */
.demo {
    padding: 100px 0;
    background: var(--cream);
}

.demo-panel {
    max-width: 860px;
    margin: 0 auto;
    padding: 64px 32px;
    border-radius: 24px;
    text-align: center;
    background: linear-gradient(135deg, rgba(var(--eucalyptus-rgb), 0.12) 0%, rgba(var(--rose-rgb), 0.08) 100%);
    border: 1px solid rgba(var(--eucalyptus-rgb), 0.25);
    position: relative;
    overflow: hidden;
}

.demo-panel h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.7rem, 3.6vw, 2.4rem);
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 16px;
    position: relative;
}

.demo-panel p {
    font-size: 1.1rem;
    color: var(--slate);
    line-height: 1.7;
    max-width: 480px;
    margin: 0 auto 36px;
    position: relative;
}

.demo-panel .btn {
    position: relative;
}

.demo-hint {
    display: block;
    margin-top: 20px;
    font-size: 0.85rem;
    color: var(--slate);
}

/* Two columns once there is room: copy and CTA beside the phone. Below that
   it stacks, and the copy comes FIRST in the DOM so a ~660px device frame
   never pushes the CTA down the page on a phone. */
.demo-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 44px;
    position: relative;
}

.demo-copy {
    width: 100%;
}

@media (min-width: 1024px) {
    .demo-panel {
        max-width: 960px;
        padding: 56px 48px;
    }

    .demo-layout {
        flex-direction: row;
        align-items: center;
        gap: 56px;
        text-align: start;
    }

    .demo-copy {
        flex: 1;
    }

    .demo-copy p {
        margin-inline: 0;
    }
}

/* ----- 3b. The phone mock -----
   A CSS device frame around a scripted conversation. Deliberately not a
   video or a GIF: every bubble is real selectable text, so it is readable,
   translatable, reachable by a screen reader and greppable when a claim on
   this page changes. The only raster is the photo the client "sends".
   The booking pill and the confirmation card mirror what the product
   actually renders (see frontend/index.html in ../WhatsApp-assistant) —
   Cal.com opens as a MODAL over the chat, so a calendar never appears
   inside the message flow and none is faked here. */

.demo-mock {
    flex-shrink: 0;
}

.phone {
    width: 300px;
    max-width: 100%;
    aspect-ratio: 9 / 20;
    background: var(--navy);
    border-radius: 42px;
    padding: 11px;
    position: relative;
    box-shadow: 0 24px 60px rgba(var(--navy-rgb), 0.22),
                0 2px 6px rgba(var(--navy-rgb), 0.12);
}

/* Physical left/transform, not logical: the island is centred on the device,
   so it must resolve identically in both directions. Same reasoning as
   .plan-badge. */
.phone::before {
    content: '';
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    width: 74px;
    height: 7px;
    border-radius: 999px;
    background: rgba(var(--cream-rgb), 0.22);
    z-index: 2;
}

.phone-screen {
    height: 100%;
    background: var(--cream);
    border-radius: 32px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* White-label header, and deliberately not WhatsApp-shaped: navy, not green.
   A phone frame with a chat in it is one step from reading as a WhatsApp
   screenshot, which is exactly the misread this site avoids. */
.chat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 30px 16px 12px;
    background: var(--navy);
    color: var(--cream);
    flex-shrink: 0;
}

.chat-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--rose-light);
    flex-shrink: 0;
}

.chat-title {
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.3;
}

.chat-status {
    font-size: 0.65rem;
    color: rgba(var(--cream-rgb), 0.72);
    display: flex;
    align-items: center;
    gap: 5px;
}

.chat-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--eucalyptus);
    flex-shrink: 0;
}

/* The log really scrolls: it starts at the top so the conversation begins
   where a reader expects, and main.js walks it down and back on a loop.
   Manual scrolling works and pauses the loop. The scrollbar is hidden
   because a scrollbar inside a device frame reads as a rendering bug — the
   auto-scroll is what signals there is more to see. */
.chat-log {
    flex: 1;
    min-height: 0;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

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

.msg {
    max-width: 82%;
    padding: 8px 12px;
    border-radius: 16px;
    font-size: 0.75rem;
    line-height: 1.5;
}

/* Logical, so Hebrew puts the client on the right and English on the left
   with no second rule. */
.msg-client {
    margin-inline-start: auto;
    background: var(--rose);
    color: var(--cream);              /* 5.29:1 */
    border-end-end-radius: 5px;
}

.msg-bot {
    margin-inline-end: auto;
    background: var(--light-gray);
    color: var(--navy);               /* 13.9:1 */
    border-end-start-radius: 5px;
}

.msg-client.has-img {
    padding: 4px;
}

.msg-img {
    display: block;
    width: 116px;
    height: auto;
    border-radius: 12px;
}

/* The booking affordance the product really renders: a pill in the message
   flow that opens the Cal.com modal.

   Navy, not rose, and on the assistant's side. In the product this pill is
   rose and sits on the patient's side, but in a silent mock that made it
   indistinguishable from the client's own bubbles — the one thing the whole
   frame exists to make legible. So the mock keeps one colour per role:
   rose = the client, light-gray = the assistant, navy = the thing that acts,
   eucalyptus = confirmed. */
.msg-booking {
    margin-inline-end: auto;
    display: flex;
    align-items: center;
    gap: 7px;
    width: max-content;
    max-width: 85%;
    padding: 8px 15px;
    border-radius: 999px;
    border-start-start-radius: 5px;
    background: var(--navy);
    color: var(--cream);              /* 14.7:1 */
    font-size: 0.72rem;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(var(--navy-rgb), 0.18);
}

.msg-booking svg {
    width: 15px;
    height: 15px;
    fill: var(--cream);
    flex-shrink: 0;
}

/* Eucalyptus is the confirmation colour. */
.msg-booked {
    margin-inline-end: auto;
    max-width: 85%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 16px;
    border-start-start-radius: 5px;
    background: rgba(var(--eucalyptus-rgb), 0.12);
    border: 1px solid rgba(var(--eucalyptus-rgb), 0.3);
    color: var(--navy);
    font-size: 0.72rem;
    font-weight: 500;
}

.msg-booked svg {
    width: 15px;
    height: 15px;
    fill: var(--eucalyptus);
    flex-shrink: 0;
}

/* Composer: decorative only. Never a real <input> — a focusable field that
   does nothing is a keyboard trap. The whole bar is aria-hidden. */
.chat-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 16px;
    background: var(--cream);
    border-top: 1px solid rgba(var(--navy-rgb), 0.08);
}

.chat-field {
    flex: 1;
    background: var(--light-gray);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.7rem;
    color: var(--slate);
}

.chat-send {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--rose);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.chat-send svg {
    width: 14px;
    height: 14px;
    fill: var(--cream);
}

/* The arrow points "forward", which flips with the text direction. */
[dir="rtl"] .chat-send svg {
    transform: scaleX(-1);
}

/* ===== 4. HOW IT FEELS ===== */
.how {
    padding: 100px 0;
    background: var(--light-gray);
}

/* The pain cards mark problems, these mark relief — same card, different
   accent, so the shift is legible without a second component. */
.how .point h3::before {
    background: var(--eucalyptus);
}

/* ===== 5. PRICING PLANS =====
   Sits below the demo: the price only means something once she has seen
   what the assistant actually does. */
.pricing {
    padding: 100px 0;
    background: var(--cream);
}

.pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 860px;
    margin: 0 auto;
    align-items: stretch;
}

@media (min-width: 768px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.plan {
    display: flex;
    flex-direction: column;
    padding: 40px 32px;
    border-radius: 20px;
    background: var(--white);
    border: 1px solid rgba(var(--black-rgb), 0.06);
    box-shadow: 0 2px 12px rgba(var(--black-rgb), 0.03);
    transition: all 0.3s ease;
    position: relative;
}

.plan:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(var(--black-rgb), 0.08);
}

.plan.featured {
    border-color: var(--rose);
    box-shadow: 0 8px 32px rgba(var(--rose-rgb), 0.14);
}

.plan.featured:hover {
    box-shadow: 0 16px 44px rgba(var(--rose-rgb), 0.2);
}

/* Physical left/transform, not logical — this centres identically in both
   text directions, which inset-inline-start would not. */
.plan-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--rose);
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 6px 18px;
    border-radius: 50px;
    white-space: nowrap;
}

.plan-name {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.plan-tagline {
    font-size: 0.95rem;
    color: var(--slate);
    line-height: 1.6;
    margin-bottom: 24px;
    min-height: 3rem;
}

.plan-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(var(--black-rgb), 0.07);
}

/* A currency symbol next to digits is bidi-neutral, so in Hebrew it drifts to
   the wrong side of the number. Isolating the amount pins "₪1,200" together
   regardless of the surrounding text direction. */
.plan-amount {
    font-family: var(--font-heading);
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    color: var(--navy);
    direction: ltr;
    unicode-bidi: isolate;
}

/* The pre-offer price. Isolated for the same reason as .plan-amount above — a
   struck-through ₪299 drifts off its digits just as readily. --slate on the
   card's white is 5.95:1. */
.plan-was {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--slate);
    text-decoration: line-through;
    direction: ltr;
    unicode-bidi: isolate;
}

/* flex-basis pushes the label onto its own line inside .plan-price, so it sits
   with the price and above that block's bottom border rather than under it.
   --rose on white is 5.26:1. Promotional copy: this and the .plan-was beside
   it come out of both pages together when the offer ends. */
.plan-offer {
    flex-basis: 100%;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--rose);
}

.plan-period {
    font-size: 0.95rem;
    color: var(--slate);
}

.plan-features {
    list-style: none;
    margin-bottom: 32px;
    display: grid;
    gap: 12px;
}

.plan-features li {
    position: relative;
    padding-inline-start: 28px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--navy);
}

.plan-features li::before {
    content: '✓';
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    color: var(--eucalyptus);
    font-weight: 700;
}

/* Pins every card's button to the bottom so they line up across the row. */
.plan .btn {
    margin-top: auto;
}

.pricing-note {
    text-align: center;
    font-size: 0.9rem;
    color: var(--slate);
    margin-top: 32px;
}

/* ===== 6. FINAL CTA ===== */
.final-cta {
    padding: 100px 0;
    background: var(--navy);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.final-cta::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(var(--rose-rgb), 0.08) 0%, transparent 60%);
    border-radius: 50%;
    pointer-events: none;
}

.final-cta h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    color: var(--white);
    margin-bottom: 16px;
    position: relative;
}

.final-cta p {
    font-size: 1.1rem;
    color: rgba(var(--white-rgb), 0.7);
    margin: 0 auto 40px;
    max-width: 480px;
    position: relative;
}

.final-cta .btn {
    position: relative;
}

/* ===== FOOTER ===== */
.footer {
    padding: 40px 0;
    background: var(--navy);
    border-top: 1px solid rgba(var(--white-rgb), 0.06);
    text-align: center;
}

/* 0.4 alpha gave 3.55 against navy, under the 4.5 floor for text this size.
   0.55 reads as the same quiet grey and clears it at 5.45. */
.footer p {
    font-size: 0.85rem;
    color: rgba(var(--white-rgb), 0.55);
}

/* ===== STICKY WHATSAPP (MOBILE) ===== */
.sticky-whatsapp {
    position: fixed;
    bottom: 20px;
    inset-inline-end: 20px;
    z-index: 999;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--whatsapp);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(var(--whatsapp-rgb), 0.4);
    transition: all 0.3s ease;
    text-decoration: none;
}

.sticky-whatsapp:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 28px rgba(var(--whatsapp-rgb), 0.5);
}

.sticky-whatsapp svg {
    width: 30px;
    height: 30px;
}

@media (min-width: 768px) {
    .sticky-whatsapp {
        display: none;
    }
}

/* ===== RESPONSIVE TWEAKS ===== */
@media (max-width: 767px) {
    .hero {
        min-height: auto;
        padding: 140px 0 72px;
    }

    .hero h1 {
        font-size: 2.2rem;
    }

    .pain, .how, .pricing, .demo, .final-cta {
        padding: 72px 0;
    }

    .demo-panel {
        padding: 48px 24px;
    }

    .point {
        padding: 28px 24px;
    }

    .pain-closer {
        margin-top: 36px;
        font-size: 1rem;
    }

    .plan-tagline {
        min-height: 0;
    }

    .btn {
        padding: 14px 28px;
        font-size: 1rem;
    }

    .btn-lg {
        font-size: 1.05rem;
        padding: 16px 32px;
    }

    .nav-lang {
        padding: 7px 14px;
        font-size: 0.8rem;
    }
}