/* ==========================================================================
   Tevarer Landing Page Redesign (home-redesign.css)
   Based on the high-converting modern mockup with Hebrew RTL design
   ========================================================================== */

:root {
    --tv-navy: #0f5c4c;
    --tv-navy-dark: #0a4539;
    --tv-navy-deep: #0b4a3d;
    --tv-orange: #0f5c4c;
    --tv-orange-hover: #0a4539;
    --tv-orange-gradient: linear-gradient(135deg, #11695a 0%, #0f5c4c 100%);
    /* Design system "pine and marker" (Roy, 2026-10-13, DECISIONS.md): the main buttons are pine
       with white text, 6.6:1 or more across the gradient; the note under the label is #cfe5dc, 6:1.
       The --tv-orange* names stay so the cascade doesn't change; the values are pine. */
    --tv-on-orange: #ffffff;
    --tv-on-orange-soft: #cfe5dc;
    --tv-amber: #eba545;
    --tv-marker: #f6d58f;
    --tv-mist: #e4efea;
    --tv-green: #00b894;
    --tv-green-mint: #eefaf4;
    --tv-green-pill: #d1fae5;
    --tv-green-text: #065f46;
    --tv-ink: #14231f;
    --tv-muted: #4a5a55;
    --tv-card-border: #dde5e1;
    --tv-card-border-soft: #e8eeeb;
    --tv-card-shadow: 0 4px 20px -2px rgba(20,35,31, 0.05);
    --tv-card-shadow-hover: 0 14px 34px -4px rgba(20,35,31, 0.1);
    --tv-container-max: 76rem;
}

html {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Accessibility & SEO utility for screen readers and search bots */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

body.ds-page {
    font-family: 'Rubik', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--tv-ink);
    /* Pale pine field on the home page (Roy, 2026-10-13) */
    background-color: var(--tv-mist);
    background-image: none;
    background-attachment: fixed;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    max-width: 100vw;
}

/* ── Container ── */
.mock-container {
    max-width: var(--tv-container-max);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ── Typography & Accents ── */
.mock-section-header {
    text-align: center;
    max-width: 44rem;
    margin: 0 auto 3rem;
}

.mock-section-title {
    font-size: clamp(1.85rem, 3.2vw, 2.4rem);
    font-weight: 800;
    color: var(--tv-ink);
    line-height: 1.2;
    margin: 0 0 0.75rem;
    letter-spacing: -0.01em; /* Hebrew: never tighter than -0.01em */
}

.mock-section-subtitle {
    font-size: 1.0625rem;
    color: var(--tv-muted);
    line-height: 1.55;
    margin: 0;
}

/* ── Site Header Overrides & Branding ── */
.site-header {
    background: rgba(228, 239, 234, 0.94); /* the page's mist, not white (Roy, 2026-10-13) */
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(221,229,225, 0.85);
    box-shadow: 0 2px 10px rgba(20,35,31, 0.03);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.site-header-inner {
    max-width: var(--tv-container-max);
    margin: 0 auto;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    position: relative;
}

.site-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
}

.site-brand picture {
    display: inline-flex;
    align-items: center;
}

.site-header-logo-img {
    height: 46px;
    width: auto;
    max-width: 175px;
    object-fit: contain;
    display: block;
    transition: transform 0.2s ease;
}

@media (hover: hover) and (pointer: fine) { .site-brand:hover .site-header-logo-img {
    transform: scale(1.03);
} }

.site-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    flex: 1 1 auto;
}

.site-nav-link {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #4a5a55;
    text-decoration: none;
    padding: 0.4rem 0.65rem;
    border-radius: 0.5rem;
    white-space: nowrap;
    transition: color 0.15s ease, background 0.15s ease;
}

@media (hover: hover) and (pointer: fine) { .site-nav-link:hover {
    color: var(--tv-navy);
    background: #eef3f1;
} }

.site-header-actions {
    position: static !important;
    inset-inline-end: auto !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.75rem !important;
    flex-shrink: 0 !important;
}

#headerLangSlot {
    display: flex;
    align-items: center;
}

.site-header .lang-switch,
.lang-switch {
    position: relative !important;
    top: auto !important;
    inset-inline-end: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 100 !important;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.site-header .lang-trigger,
.lang-trigger {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    height: 2.35rem !important;
    padding: 0 0.65rem !important;
    border: 1px solid #dde5e1 !important;
    border-radius: 0.6rem !important;
    background: #ffffff !important;
    color: var(--tv-navy, #0f5c4c) !important;
    font-family: inherit !important;
    font-size: var(--ds-text-sm) !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease !important;
    line-height: 1 !important;
}

@media (hover: hover) and (pointer: fine) { .site-header .lang-trigger:hover,
.lang-trigger:hover {
    background: #f6f8f7 !important;
    border-color: #c9d3cf !important;
} }

.site-header .lang-switch.is-open .lang-trigger,
.lang-switch.is-open .lang-trigger,
.lang-trigger[aria-expanded="true"] {
    background: #ecfdf5 !important;
    border-color: #059669 !important;
    color: #059669 !important;
}

.site-header .lang-dropdown,
.lang-dropdown {
    position: absolute !important;
    top: calc(100% + 5px) !important;
    inset-inline-end: 0 !important;
    min-width: 8.5rem !important;
    background: #ffffff !important;
    border: 1px solid #dde5e1 !important;
    border-radius: 0.75rem !important;
    padding: 0.35rem !important;
    box-shadow: 0 10px 25px -4px rgba(20,35,31, 0.12), 0 4px 6px -2px rgba(20,35,31, 0.05) !important;
    z-index: 1000 !important;
    display: none !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.site-header .lang-switch.is-open .lang-dropdown,
.lang-switch.is-open .lang-dropdown {
    display: flex !important;
    animation: langDropdownFade 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.site-header .lang-option,
.lang-option {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 0.45rem 0.65rem !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0.5rem !important;
    font-family: inherit !important;
    font-size: var(--ds-text-sm) !important;
    font-weight: 500 !important;
    color: #2c3a36 !important;
    cursor: pointer !important;
    text-align: start !important;
    transition: background 0.12s ease, color 0.12s ease !important;
}

.site-header .lang-option:hover,
.lang-option:hover,
.lang-option:focus-visible {
    background: #eef3f1 !important;
    color: #14231f !important;
    outline: none !important;
}

.site-header .lang-option.is-active,
.lang-option.is-active {
    background: #ecfdf5 !important;
    color: #059669 !important;
    font-weight: 700 !important;
}

.site-header-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1.5rem;
    border-radius: 999px;
    background: var(--tv-navy);
    color: #ffffff !important;
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(15,92,76, 0.2);
    transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

@media (hover: hover) and (pointer: fine) { .site-header-cta-btn:hover {
    background: var(--tv-navy-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(15,92,76, 0.3);
} }

.site-nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--tv-card-border);
    padding: 0.45rem;
    border-radius: 0.5rem;
    cursor: pointer;
    color: var(--tv-navy);
}

.site-nav-toggle svg {
    width: 22px;
    height: 22px;
    display: block;
}

/* Mobile drawer */
.site-nav-drawer {
    display: none;
    background: #ffffff;
    border-bottom: 1px solid var(--tv-card-border);
    padding: 1.25rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}

.site-nav-drawer.is-open {
    display: block;
}

.site-drawer-nav {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.site-drawer-link {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--tv-ink);
    text-decoration: none;
    padding: 0.6rem 0.8rem;
    border-radius: 0.5rem;
}

@media (hover: hover) and (pointer: fine) { .site-drawer-link:hover {
    background: #eef3f1;
} }

.site-drawer-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.5rem;
    padding: 0.85rem;
    border-radius: 999px;
    background: var(--tv-orange-gradient);
    color: var(--tv-on-orange);
    font-weight: 800;
    text-decoration: none;
}

/* ==========================================================================
   Section 1: Hero Section
   ========================================================================== */
.mock-hero-section {
    padding: 3.5rem 0 4.5rem;
    position: relative;
    overflow: visible;
}

.mock-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem;
}

/* Left Hero Column: Content */
.mock-hero-content {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.mock-hero-title {
    font-size: clamp(2.35rem, 4.4vw, 3.65rem);
    font-weight: 900;
    color: var(--tv-ink);
    line-height: 1.14;
    letter-spacing: -0.01em; /* Hebrew: never tighter than -0.01em */
    margin: 0 0 2.25rem;
}

.hero-word-accent {
    position: relative;
    display: inline-block;
    color: var(--tv-ink);
    white-space: nowrap;
}

.hero-underline-svg {
    position: absolute;
    bottom: -10px;
    right: 0;
    width: 100%;
    height: 16px;
    pointer-events: none;
}

.mock-hero-subtitle {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--tv-muted);
    margin: 1.25rem 0 0;
    line-height: 1.5;
    max-width: 30rem;
}

.mock-hero-desc {
    font-size: 1.125rem;
    line-height: 1.65;
    color: #4a5a55;
    max-width: 32rem;
    margin: 0 0 2rem;
}

.hero-desc-sub {
    display: block;
    margin-top: 0.5rem;
    color: var(--tv-muted);
    font-size: 0.98rem;
    font-weight: 500;
}

/* Primary Hero CTA Button */
.mock-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--tv-orange-gradient);
    color: var(--tv-on-orange) !important;
    font-size: 1.25rem;
    font-weight: 800;
    padding: 1.05rem 2.65rem;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 10px 28px -4px rgba(15,92,76, 0.45);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

@media (hover: hover) and (pointer: fine) { .mock-hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px -4px rgba(15,92,76, 0.58);
} }

.mock-hero-cta .cta-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    line-height: 1.2;
}

.mock-hero-cta .cta-note {
    font-size: var(--ds-text-sm);
    font-weight: 500;
    color: var(--tv-on-orange-soft);
}

.mock-hero-cta .cta-arrow {
    font-size: 1.35rem;
    transition: transform 0.18s ease;
}

@media (hover: hover) and (pointer: fine) { .mock-hero-cta:hover .cta-arrow {
    transform: translateX(-4px);
} }

.mock-hero-note {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--tv-muted);
    margin: 0.85rem 0 0;
}

/* 3 Feature Badges under Hero CTA */
.mock-hero-badges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.9rem;
    width: 100%;
    max-width: 33rem;
}

.mock-badge-card {
    background: #ffffff;
    border: 1px solid var(--tv-card-border);
    border-radius: 1rem;
    padding: 0.9rem 0.85rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 2px 10px rgba(20,35,31, 0.03);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

@media (hover: hover) and (pointer: fine) { .mock-badge-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -4px rgba(20,35,31, 0.07);
    border-color: #c9d3cf;
} }

.mock-badge-card--privacy {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

@media (hover: hover) and (pointer: fine) { .mock-badge-card--privacy:hover {
    border-color: #86efac;
    box-shadow: 0 8px 24px -4px rgba(22, 101, 52, 0.12);
} }

.mock-badge-card--privacy .mock-badge-icon {
    color: #16a34a;
}

.mock-badge-icon {
    width: 24px;
    height: 24px;
    color: var(--tv-navy);
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mock-badge-icon svg {
    width: 22px;
    height: 22px;
}

.mock-badge-title {
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--tv-ink);
    line-height: 1.25;
    margin-bottom: 0.2rem;
}

.mock-badge-sub {
    font-size: var(--ds-text-xs);
    color: var(--tv-muted);
    line-height: 1.2;
}

/* Right Hero Column: Visual Composition with Central Logo & 4 Floating Cards */
.mock-hero-visual {
    position: relative;
    width: 100%;
    min-height: 440px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 4 Surrounding Floating Cards */
.hero-float-card {
    position: absolute;
    z-index: 4;
    background: #ffffff;
    border: 1px solid #e8eeeb;
    border-radius: 1.1rem;
    padding: 1rem 1.25rem;
    box-shadow: 0 10px 30px -4px rgba(20,35,31, 0.09);
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 160px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Hero motion plays once when the page loads and is over within 5 seconds, then the hero
   stays still so the CTA leads (WCAG 2.2.2; design review, phase 3). Off for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
    .hero-float-card {
        animation:
            heroCardIn 300ms cubic-bezier(0.23, 1, 0.32, 1) both,
            heroFloat 3.6s ease-in-out 350ms 1;
    }
    .hero-float-card--btl {
        animation-delay: 50ms, 550ms;
        animation-duration: 300ms, 4s;
    }
    .hero-float-card--insurance {
        animation-delay: 100ms, 750ms;
        animation-duration: 300ms, 3.8s;
    }
    .hero-float-card--employer {
        animation-delay: 150ms, 950ms;
        animation-duration: 300ms, 4s;
    }
}

@keyframes heroCardIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

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

.float-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.float-icon-box svg,
.float-icon-box img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.float-card-info {
    display: flex;
    flex-direction: column;
    text-align: right;
}

.float-card-title {
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--tv-ink);
    line-height: 1.25;
}

.float-card-sub {
    font-size: 0.75rem;
    color: var(--tv-muted);
    line-height: 1.25;
    margin-top: 2px;
}

/* Positioning & Floating Animations for 4 Cards */
.hero-float-card--tax {
    top: 25px;
    right: 35px;
}


.hero-float-card--tax .float-icon-box {
    background: #eef5f1;
    color: #0d6650;
}

.hero-float-card--btl {
    top: 25px;
    left: 35px;
}


.hero-float-card--btl .float-icon-box {
    background: #e4efea;
    color: #0d6650;
}

.hero-float-card--insurance {
    bottom: 25px;
    right: 35px;
}


.hero-float-card--insurance .float-icon-box {
    background: #fef3c7;
    color: #d97706;
}

.hero-float-card--employer {
    bottom: 25px;
    left: 35px;
}


.hero-float-card--employer .float-icon-box {
    background: #ecfdf5;
    color: #059669;
}

/* ==========================================================================
   Section: בסוף הבדיקה תדעו (The Payoff / Outcomes)
   ========================================================================== */
.mock-payoff-section {
    padding: 4.5rem 0 4rem;
    background: transparent; /* sits on the page's mist; the cards stay white */
    border-top: 1px solid rgba(15,92,76, 0.06);
    border-bottom: 1px solid rgba(15,92,76, 0.06);
}

.payoff-badge {
    display: inline-block;
    background: #e4efea;
    color: #0a4539;
    font-size: var(--ds-text-sm);
    font-weight: 800;
    padding: 0.35rem 1rem;
    border-radius: 9999px;
    margin-bottom: 0.75rem;
    letter-spacing: 0.02em;
}

.mock-payoff-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-top: 2.25rem;
}

.payoff-card {
    background: #ffffff;
    border: 1px solid #dde5e1;
    border-radius: 1.25rem;
    padding: 1.5rem 1.6rem;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    box-shadow: 0 4px 18px rgba(20,35,31, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

@media (hover: hover) and (pointer: fine) { .payoff-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(20,35,31, 0.08);
    border-color: #c9d3cf;
} }

.payoff-card--wide {
    grid-column: span 2;
}

.payoff-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.payoff-card-icon svg {
    width: 26px;
    height: 26px;
}

.payoff-card-icon--green {
    background: var(--tv-mist);
    color: var(--tv-navy);
}

.payoff-card-icon--blue {
    background: var(--tv-mist);
    color: var(--tv-navy);
}

.payoff-card-icon--orange {
    background: var(--tv-mist);
    color: var(--tv-navy);
}

.payoff-card-icon--purple {
    background: var(--tv-mist);
    color: var(--tv-navy);
}

.payoff-card-icon--navy {
    background: var(--tv-mist);
    color: var(--tv-navy);
}

.payoff-card-content {
    flex: 1;
    min-width: 0;
}

.payoff-card-title {
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--tv-ink);
    line-height: 1.35;
    margin-bottom: 0.35rem;
}

.payoff-card-desc {
    font-size: 0.875rem;
    color: #4a5a55;
    line-height: 1.5;
    margin: 0;
}

.payoff-bottom-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 2.75rem;
    gap: 0.5rem;
}

.payoff-btn {
    padding: 0.95rem 2.65rem;
}

/* The claim-path link is a secondary action: outlined, so the page has one orange CTA (phase 4) */
.mock-hero-cta.payoff-btn {
    background: #ffffff;
    color: var(--tv-navy) !important;
    border: 2px solid var(--tv-navy);
    box-shadow: none;
    font-size: 1.1rem;
}

@media (hover: hover) and (pointer: fine) { .mock-hero-cta.payoff-btn:hover {
    background: #eff4f2;
    box-shadow: none;
} }

/* ==========================================================================
   Section 2: "כל הגופים הרלוונטיים. בתמונה אחת."
   ========================================================================== */
.mock-entities-section {
    padding: 4.5rem 0 3.5rem;
}

.mock-entities-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.15rem;
}

.mock-entity-card {
    background: #ffffff;
    border: 1px solid var(--tv-card-border);
    border-radius: 1.15rem;
    padding: 1.75rem 0.9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.9rem;
    box-shadow: 0 2px 12px rgba(20,35,31, 0.03);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) and (pointer: fine) { .mock-entity-card:hover {
    transform: translateY(-4px);
    border-color: #c9d3cf;
    box-shadow: 0 12px 28px -4px rgba(20,35,31, 0.09);
} }

.entity-icon-wrap {
    width: 60px;
    height: 60px;
    border-radius: 1.15rem;
    background: #ffffff;
    border: 1px solid #dde5e1;
    box-shadow: 0 2px 8px rgba(20,35,31, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}

@media (hover: hover) and (pointer: fine) { .mock-entity-card:hover .entity-icon-wrap {
    background: #ffffff;
    border-color: #9cc5b2;
    box-shadow: 0 8px 20px -2px rgba(13,102,80, 0.18);
    transform: scale(1.1);
} }

.entity-icon-wrap img,
.entity-icon-wrap svg {
    width: 38px;
    height: 38px;
    object-fit: contain;
    transition: transform 0.25s ease;
}

.entity-logo-img {
    display: block;
    max-width: 100%;
    height: auto;
}

.entity-name {
    font-size: 1rem;
    font-weight: 800;
    color: var(--tv-ink);
    line-height: 1.25;
}

/* ==========================================================================
   Section 3: "איך זה עובד?" (4 Steps Process with Dynamic Animation)
   ========================================================================== */
.mock-steps-section {
    padding: 5rem 0;
    position: relative;
}

/* «איך זה עובד»: one path with four stops (Emil's redesign, same copy, 2026-10-13).
   No tabs, no auto-cycle: all four steps are on screen, so the order is told by the line and the numbers. */
.how-path {
    --how-num: 44px;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
    position: relative;
}

/* The line: one segment from each number to the next (RTL: right to left) */
.how-step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: calc(var(--how-num) / 2 - 1px);
    inset-inline-start: 50%;
    width: calc(100% + 2rem);
    height: 2px;
    background: #9fbfb3;
    transform-origin: right center;
}
[dir="ltr"] .how-step:not(:last-child)::before { transform-origin: left center; }

.how-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.how-step-num {
    width: var(--how-num);
    height: var(--how-num);
    border-radius: 50%;
    background: var(--tv-navy);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 6px var(--tv-mist);
    position: relative;
    margin-bottom: 1.25rem;
}

/* The last stop is where the person acts: the amber marker, as on the design system's "next step" */
.how-step:last-child .how-step-num {
    background: var(--tv-amber);
    color: var(--tv-ink);
}

.how-step-label {
    font-size: var(--ds-text-sm);
    font-weight: 700;
    color: var(--tv-navy);
    margin-bottom: 0.35rem;
}

.how-step-title {
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--tv-ink);
    margin: 0 0 0.5rem;
    text-wrap: balance;
}

.how-step-desc {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--tv-muted);
    margin: 0;
    max-width: 30ch;
}

/* Phone and narrow tablet: the path turns vertical, numbers on the start side */
@media (max-width: 860px) {
    .how-path {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.75rem;
        max-width: 34rem;
        margin-inline: auto;
    }
    .how-step:not(:last-child)::before,
    [dir="ltr"] .how-step:not(:last-child)::before {
        top: calc(var(--how-num) / 2);
        inset-inline-start: calc(var(--how-num) / 2 - 1px);
        width: 2px;
        height: calc(100% + 1.75rem);
        transform-origin: center top;
    }
    .how-step {
        padding-inline-start: calc(var(--how-num) + 1rem);
        min-height: var(--how-num);
        align-items: flex-start;
        text-align: start;
    }
    .how-step-num {
        position: absolute;
        inset-inline-start: 0;
        top: 0;
        margin: 0;
    }
    .how-step-label { line-height: var(--how-num); margin: 0 0 -0.2rem; }
    .how-step-desc { max-width: none; }
}

/* One reveal the first time the section scrolls in: the line draws, the stops follow it.
   js/home.js adds .will-reveal only when it can also reveal (IntersectionObserver, motion allowed). */
.how-step::before,
.how-step {
    transition: transform 700ms cubic-bezier(0.23, 1, 0.32, 1), opacity 400ms cubic-bezier(0.23, 1, 0.32, 1);
}
.how-step { transition-duration: 400ms; }
.mock-steps-section.will-reveal:not(.is-revealed) .how-step::before { transform: scaleX(0); }
.mock-steps-section.will-reveal:not(.is-revealed) .how-step { opacity: 0; transform: translateY(8px); }
.mock-steps-section.will-reveal .how-step[data-step="2"] { transition-delay: 120ms; }
.mock-steps-section.will-reveal .how-step[data-step="3"] { transition-delay: 240ms; }
.mock-steps-section.will-reveal .how-step[data-step="4"] { transition-delay: 360ms; }
.mock-steps-section.will-reveal .how-step[data-step="1"]::before { transition-delay: 150ms; }
.mock-steps-section.will-reveal .how-step[data-step="2"]::before { transition-delay: 270ms; }
.mock-steps-section.will-reveal .how-step[data-step="3"]::before { transition-delay: 390ms; }
@media (max-width: 860px) {
    .mock-steps-section.will-reveal:not(.is-revealed) .how-step::before { transform: scaleY(0); }
}

/* Reduced Motion & A11y */
@media (prefers-reduced-motion: reduce) {
    .how-step::before,
    .how-step {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

html.a11y-no-anim .how-step::before,
html.a11y-no-anim .how-step {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

@media (hover: hover) and (pointer: fine) { [dir="ltr"] .mock-hero-cta:hover .cta-arrow,
[dir="ltr"] .callout-btn:hover span:last-child,
[dir="ltr"] .prefooter-cta-btn:hover .cta-arrow {
    transform: translateX(4px);
} }

/* ==========================================================================
   Section 4: Live Demo Showcase ("רואים את התמונה. מקבלים בהירות.")
   ========================================================================== */
/* ==========================================================================
   Section 5: "למי זה מתאים?" (Target Audiences)
   ========================================================================== */
.mock-audience-section {
    padding: 4.5rem 0;
}

.mock-audience-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.15rem;
}

.mock-audience-card {
    background: #ffffff;
    border: 1px solid var(--tv-card-border);
    border-radius: 1.25rem;
    padding: 2.25rem 1.15rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 2px 14px rgba(20,35,31, 0.03);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) and (pointer: fine) { .mock-audience-card:hover {
    transform: translateY(-4px);
    border-color: #c9d3cf;
    box-shadow: 0 12px 28px -4px rgba(20,35,31, 0.09);
} }

.audience-icon-wrap {
    width: 58px;
    height: 58px;
    border-radius: 1rem;
    background: #f6f8f7;
    border: 1px solid #e8eeeb;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tv-navy);
    margin-bottom: 1.25rem;
    transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease;
}

@media (hover: hover) and (pointer: fine) { .mock-audience-card:hover .audience-icon-wrap {
    transform: scale(1.08);
    color: #0d6650;
    background: #eef5f1;
} }

.audience-icon-wrap svg {
    width: 28px;
    height: 28px;
}

.audience-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--tv-ink);
    margin: 0 0 0.4rem;
}

.audience-desc {
    font-size: var(--ds-text-sm);
    color: var(--tv-muted);
    line-height: 1.45;
    margin: 0;
}

/* ==========================================================================
   Section 6: Social Proof (Testimonials & Stats)
   ========================================================================== */
.mock-proof-section {
    padding: 3rem 0 5rem;
}

.mock-proof-grid {
    display: flex;
    justify-content: center;
}

/* Testimonial Card */
.mock-quote-card {
    background: #ffffff;
    border: 1px solid var(--tv-card-border);
    border-radius: 1.5rem;
    padding: 2.75rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 6px 24px rgba(20,35,31, 0.04);
    position: relative;
    width: 100%;
    max-width: 48rem;
    margin: 0 auto;
}

.quote-mark {
    font-size: 3.5rem;
    font-family: Georgia, serif;
    color: #c9d3cf;
    line-height: 1;
    margin-bottom: -0.5rem;
}

.quote-text {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--tv-ink);
    margin: 0 0 1.25rem;
    text-align: right;
}

.quote-author {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--tv-muted);
    text-align: left;
    margin-bottom: 1.25rem;
}

.quote-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.quote-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c9d3cf;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.quote-dot.is-active {
    background: #0d6650;
    transform: scale(1.3);
}

/* Stats Cards */
.mock-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.mock-stat-card {
    background: #ffffff;
    border: 1px solid var(--tv-card-border);
    border-radius: 1.25rem;
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 4px 18px rgba(20,35,31, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) and (pointer: fine) { .mock-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px -4px rgba(20,35,31, 0.08);
} }

.stat-icon {
    margin-bottom: 0.75rem;
}

.stat-icon--star { color: #a8700d; }
.stat-icon--users { color: #0d6650; }
.stat-icon--heart { color: #8a5300; }

.stat-icon svg {
    width: 28px;
    height: 28px;
}

.stat-num {
    font-size: 1.85rem;
    font-weight: 900;
    color: var(--tv-ink);
    line-height: 1.1;
    margin-bottom: 0.4rem;
    direction: ltr;
}

.stat-label {
    font-size: var(--ds-text-sm);
    font-weight: 600;
    color: var(--tv-muted);
}

/* ==========================================================================
   Section 7: FAQ ("שאלות נפוצות")
   ========================================================================== */
.mock-faq-section {
    padding: 5rem 0;
}

.mock-faq-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 2.5rem;
    align-items: flex-start;
}

/* FAQ Accordion List */
.mock-faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.mock-faq-item {
    background: #ffffff;
    border: 1px solid var(--tv-card-border);
    border-radius: 1rem;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mock-faq-item[open] {
    border-color: #c9d3cf;
    box-shadow: 0 8px 24px -4px rgba(20,35,31, 0.06);
}

.mock-faq-summary {
    padding: 1.25rem 1.4rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--tv-ink);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    transition: color 0.15s ease;
}

.mock-faq-summary::-webkit-details-marker {
    display: none;
}

@media (hover: hover) and (pointer: fine) { .mock-faq-summary:hover {
    color: #0d6650;
} }

.faq-chevron {
    width: 20px;
    height: 20px;
    color: var(--tv-muted);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.mock-faq-item[open] .faq-chevron {
    transform: rotate(180deg);
    color: var(--tv-navy);
}

.mock-faq-body {
    padding: 0 1.4rem 1.35rem;
    font-size: 0.95rem;
    line-height: 1.65;
    color: #4a5a55;
}

/* FAQ Help Callout Card */
.mock-faq-callout {
    background: #fff;
    border: 1px solid #c3dccf;
    border-radius: 1.5rem;
    padding: 3rem 2.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 4px 20px rgba(6, 95, 70, 0.04);
}

/* Line illustration (design system: ink outline, at most one per screen) */
.callout-illustration {
    display: block;
    width: 160px;
    height: auto;
    margin-bottom: 1rem;
}

.callout-title {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--tv-ink);
    margin: 0 0 0.5rem;
}

.callout-desc {
    font-size: 0.95rem;
    color: #4a5a55;
    line-height: 1.5;
    margin: 0 0 1.75rem;
    max-width: 18rem;
}

.callout-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.6rem;
    border-radius: 999px;
    border: 1.5px solid var(--tv-navy);
    background: transparent;
    color: var(--tv-navy);
    font-size: 0.9375rem;
    font-weight: 800;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease;
}

@media (hover: hover) and (pointer: fine) { .callout-btn:hover {
    background: var(--tv-navy);
    color: #ffffff;
} }

/* ==========================================================================
   Section 8: Pre-Footer Banner ("אל תשאירו כסף על השולחן")
   ========================================================================== */
.mock-prefooter-section {
    padding: 2.5rem 0 4.5rem;
}

.mock-prefooter-banner {
    background: var(--tv-navy-deep);
    border-radius: 1.75rem;
    padding: 3rem 3.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    box-shadow: 0 16px 40px -8px rgba(20,35,31, 0.25);
}

.prefooter-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-shrink: 0;
}

.prefooter-logo-img {
    height: 52px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    display: block;
}

.prefooter-content {
    text-align: center;
    flex: 1;
}

.prefooter-title {
    font-size: clamp(1.5rem, 2.5vw, 1.95rem);
    font-weight: 900;
    color: #ffffff;
    margin: 0 0 0.35rem;
}

.prefooter-sub {
    font-size: 1.05rem;
    color: #c9d3cf;
    margin: 0;
}

.prefooter-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    /* On the pine band the button is the logo amber with ink text (7.75:1); amber against the band is 3.8:1 */
    background: var(--tv-amber);
    color: var(--tv-ink) !important;
    font-size: 1.15rem;
    font-weight: 800;
    padding: 0.95rem 2.25rem;
    border-radius: 999px;
    text-decoration: none;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(5,30,25, 0.35);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

@media (hover: hover) and (pointer: fine) { .prefooter-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(15,92,76, 0.55);
} }

/* ==========================================================================
   Footer
   ========================================================================== */
.mock-footer {
    border-top: 1px solid var(--tv-card-border);
    padding: 2rem 0 3rem;
    background: var(--tv-mist);
}

.mock-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.footer-copy {
    font-size: var(--ds-text-sm);
    color: var(--tv-muted);
}

.footer-links {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.footer-links a,
.footer-links button {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: #4a5a55;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) { .footer-links a:hover,
.footer-links button:hover {
    color: var(--tv-navy);
} }

.footer-socials {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.social-link {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #eef3f1;
    color: #4a5a55;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) { .social-link:hover {
    background: var(--tv-navy);
    color: #ffffff;
} }

.social-link svg {
    width: 18px;
    height: 18px;
}

/* ==========================================================================
   Responsive Adaptations (Mobile & Tablet)
   ========================================================================== */
@media (max-width: 1024px) {
    .mock-hero-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .mock-hero-content {
        align-items: center;
        text-align: center;
    }
    
    .mock-hero-desc {
        max-width: 100%;
    }
    
    .mock-hero-badges {
        margin: 0 auto;
    }
    
    .mock-entities-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    
    
    
    .mock-audience-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .mock-proof-grid {
        grid-template-columns: 1fr;
    }
    
    .mock-faq-grid {
        grid-template-columns: 1fr;
    }
    
    .mock-prefooter-banner {
        flex-direction: column;
        text-align: center;
        padding: 2.5rem 1.5rem;
    }
}

@media (max-width: 992px) {
    .site-nav {
        display: none !important;
    }

    /* The menu has its own "נגישות" section at this width. */
    .site-a11y-btn {
        display: none !important;
    }
    
    .site-nav-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .mock-container {
        padding: 0 1rem;
    }
    
    .site-header-inner {
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
    }
    
    .site-header-logo-img {
        height: 32px;
        max-width: 115px;
    }
    
    .site-header-actions {
        gap: 0.35rem !important;
    }
    
    .site-header .lang-trigger,
    .lang-trigger {
        height: 2.15rem !important;
        padding: 0 0.5rem !important;
        font-size: var(--ds-text-sm) !important;
    }
    
    .site-nav-toggle {
        padding: 0.35rem !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }
    
    .mock-hero-title {
        font-size: 1.85rem;
        line-height: 1.25;
        word-break: normal;
        overflow-wrap: break-word;
    }
    
    .mock-hero-badges {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
    
    .mock-entities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    
    .mock-audience-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mock-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .mock-footer-inner {
        flex-direction: column;
        text-align: center;
        gap: 1.25rem;
    }
    
    .mock-hero-visual {
        min-height: 360px;
        transform: scale(0.88);
        transform-origin: center top;
        margin: 0 auto;
        max-width: 100%;
    }

    /* Each card stays inside its half of the hero so the long titles wrap instead of running into the next card */
    .hero-float-card {
        padding: 0.5rem 0.65rem;
        gap: 0.5rem;
        min-width: 0;
        box-sizing: border-box;
        max-width: calc(50% - 12px);
    }

    .hero-float-card--tax {
        top: 10px;
        right: 8px;
    }
    
    .hero-float-card--btl {
        top: 10px;
        left: 8px;
    }
    
    .hero-float-card--insurance {
        bottom: 10px;
        right: 8px;
    }
    
    .hero-float-card--employer {
        bottom: 10px;
        left: 8px;
    }
    
    .float-card-title {
        font-size: var(--ds-text-sm);
    }
    
    .float-card-sub {
        font-size: var(--ds-text-xs);
    }
    
    .float-icon-box {
        width: 28px;
        height: 28px;
        border-radius: 0.6rem;
    }
    
    .float-icon-box svg,
    .float-icon-box img {
        width: 16px;
        height: 16px;
    }

}

@media (max-width: 768px) {
    .mock-payoff-grid {
        grid-template-columns: 1fr;
    }
    
    .payoff-card--wide {
        grid-column: span 1;
    }
    
    .mock-hero-subtitle {
        font-size: 1.05rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

html.a11y-no-anim *,
html.a11y-no-anim ::before,
html.a11y-no-anim ::after,
html.a11y-no-anim .hero-float-card {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

/* Accessibility focus styles for hero buttons and cards */
.mock-hero-cta:focus-visible {
    outline: 3px solid #ffe600 !important;
    outline-offset: 3px !important;
}
.site-nav-link:focus-visible,
.site-drawer-link:focus-visible {
    outline: 2px solid #ffe600 !important;
    outline-offset: 2px !important;
}


/* ==========================================================================
   Hidden-for-now sections (2026-09-29): testimonials and footer socials sit behind `hidden`.
   Their own display rules would otherwise override the attribute.
   ========================================================================== */
.mock-proof-section[hidden],
.footer-socials[hidden] {
    display: none !important;
}

/* ==========================================================================
   Trust block (replaces testimonials): short factual points, design-system tokens.
   ========================================================================== */
/* Who we are + trust, right under the hero (phase 4): story on one side, the trust points on the other */
.home-about-section {
    padding: 3rem 0 3.5rem;
}

.home-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}

.home-about-illustration {
    display: block;
    width: 200px;
    max-width: 60%;
    height: auto;
    margin: 0 0 1rem;
}

.home-about-title {
    margin: 0 0 0.85rem;
    font-size: var(--ds-text-2xl);
    font-weight: 800;
    color: var(--tv-ink);
}

.home-about-text {
    margin: 0 0 1rem;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--ds-ink);
    max-width: 34rem;
}

.home-about-link {
    font-weight: 700;
    color: var(--tv-navy);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
}

@media (hover: hover) and (pointer: fine) { .home-about-link:hover {
    text-decoration-thickness: 2px;
} }

.home-trust-title {
    margin: 0 0 1rem;
    font-size: var(--ds-text-lg);
    font-weight: 800;
    color: var(--ds-ink);
}

.home-trust-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

.home-trust-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.35rem 0;
}

.home-trust-icon {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-page);
    color: var(--ds-primary);
}

.home-trust-icon svg {
    width: 1.15rem;
    height: 1.15rem;
}

.home-trust-text {
    font-size: var(--ds-text-sm);
    font-weight: 600;
    line-height: 1.5;
    color: var(--ds-ink);
}

@media (max-width: 900px) {
    .home-about-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }
}


/* ==========================================================================
   Hero, stacked (Roy, phase 4): the copy on top, then the four bodies around the bureaucratic city
   (Vered, 2026-10-15), then the CTA at the end of the city's lit path. On load the motion leads to
   it: Tevarer's pin flashes its lighthouse beam three times, a dashed path draws down from the end
   of the lit path, a spark drops along it and the CTA answers once. Over in about 4.2s, nothing
   loops (WCAG 2.2.2).
   ========================================================================== */
.mock-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

.mock-hero-content {
    align-items: center;
    text-align: center;
}

.mock-hero-content .mock-hero-subtitle {
    margin: 0;
    max-width: 36rem;
}

/* --hero-orbit-gap: from the end of the city's lit path to the bottom of the visual, where the dashed path starts */
.mock-hero-section {
    --hero-orbit-gap: 20px;
    --hero-path: calc(var(--hero-orbit-gap) + 2.5rem);
}

.mock-hero-visual {
    max-width: 52rem;
    min-height: 460px;
    margin: 0 auto;
}

/* The four cards are one size, with 14px subtitles (expert review); 0.6cm narrower, centred text and
   a thin ink edge like the CTA's (Vered, 2026-10-15) */
.hero-float-card {
    width: calc(13.5rem - 0.6cm);
    border: 1.5px solid var(--ds-ink);
    justify-content: center;
    min-height: 6.85rem;
    box-sizing: border-box;
}

.float-card-sub {
    font-size: 0.875rem;
}

.hero-float-card .float-card-info {
    text-align: center;
    text-wrap: balance;
}

/* The bureaucratic city (Vered, 2026-10-15): an isometric line illustration in the palette, the four
   bodies as buildings and Tevarer as the pin in the square. Inline in index.html so its logos load
   and the beam can animate. */
.hero-city-wrap {
    position: relative;
    z-index: 3;
    width: min(600px, 100%);
    margin-top: 8px;
}

.hero-city {
    display: block;
    width: 100%;
    height: auto;
}

/* The lighthouse: the pin's beam and halo flash three times on load, then stay lit */
@media (prefers-reduced-motion: no-preference) {
    .hero-city .city-beam,
    .hero-city .city-halo {
        animation: cityBeam 1.4s ease-in-out 3;
    }
}

@keyframes cityBeam {
    50% { opacity: 0.1; }
}

html.a11y-no-anim .hero-city .city-beam,
html.a11y-no-anim .hero-city .city-halo {
    animation: none !important;
}

/* «You are not alone» between the end of the path and the CTA */
.hero-guide-line {
    margin: 0.25rem auto 0.85rem;
    max-width: 44rem;
    padding-inline: 16px;
    text-align: center;
    font-size: var(--ds-text-md);
    line-height: 1.55;
    font-weight: 500;
    color: var(--ds-ink);
    text-wrap: balance;
}

.hero-guide-line strong {
    font-weight: 800;
    background: linear-gradient(transparent 55%, var(--ds-marker) 55%);
    padding-inline: 2px;
}

/* Wide screens: room for every title on one line, so the cards are one height without padding */
@media (min-width: 1100px) {
    .mock-hero-visual {
        max-width: 64rem;
    }

    .hero-float-card {
        width: calc(17rem - 0.6cm);
        min-height: 0;
    }
}

/* The CTA under the city, on the end of a dashed path that continues the city's lit path */
.hero-cta-zone {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-cta-path {
    position: relative;
    display: block;
    width: 10px;
    height: var(--hero-path);
    /* back up over the grid gap (1.5rem) and the space under the city, to the end of its lit path */
    margin-top: calc(-1 * (var(--hero-orbit-gap) + 1.5rem + 5px));
    pointer-events: none;
}

.hero-cta-path::before {
    content: "";
    position: absolute;
    inset: 0 4px;
    background: repeating-linear-gradient(to bottom, rgba(15,92,76, 0.22) 0 6px, transparent 6px 11px);
    transform-origin: center top;
}

.hero-cta-spark {
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--tv-amber);
    box-shadow: 0 0 10px var(--tv-amber), 0 0 4px var(--tv-amber);
    opacity: 0;
}

.hero-cta-zone .mock-hero-cta {
    position: relative;
}

.hero-cta-zone .mock-hero-cta::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    border: 2px solid #0f5c4c;
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
    .hero-cta-path::before {
        animation: heroPathDraw 450ms cubic-bezier(0.23, 1, 0.32, 1) 1.1s both;
    }

    .hero-cta-spark {
        animation: heroSparkDrop 700ms cubic-bezier(0.77, 0, 0.175, 1) 1.3s 1;
    }

    .hero-cta-zone .mock-hero-cta {
        animation: heroCtaAnswer 420ms cubic-bezier(0.77, 0, 0.175, 1) 1.95s 1;
    }

    .hero-cta-zone .mock-hero-cta::after {
        animation: heroCtaRing 650ms cubic-bezier(0.23, 1, 0.32, 1) 1.95s 1;
    }
}

@keyframes heroPathDraw {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

@keyframes heroSparkDrop {
    0% { opacity: 0; transform: translateY(0); }
    12% { opacity: 1; }
    88% { opacity: 1; transform: translateY(calc(var(--hero-path) - 10px)); }
    100% { opacity: 0; transform: translateY(calc(var(--hero-path) - 10px)) scale(0.6); }
}

@keyframes heroCtaAnswer {
    0%, 100% { transform: scale(1); }
    45% { transform: scale(1.04); }
}

@keyframes heroCtaRing {
    from { opacity: 0.7; transform: scale(1); }
    to { opacity: 0; transform: scale(1.12, 1.3); }
}

html.a11y-no-anim .hero-cta-path::before,
html.a11y-no-anim .hero-cta-spark,
html.a11y-no-anim .hero-cta-zone .mock-hero-cta,
html.a11y-no-anim .hero-cta-zone .mock-hero-cta::after {
    animation: none !important;
}

/* Laptops with a short screen: a smaller city so the CTA is still above the fold */
@media (min-width: 769px) and (max-height: 860px) {
    .mock-hero-visual {
        min-height: 380px;
    }

    .hero-city-wrap {
        width: min(520px, 100%);
    }
}

@media (max-width: 768px) {
    .mock-hero-section {
        --hero-orbit-gap: 10px;
        --hero-path: calc(var(--hero-orbit-gap) + 2.25rem);
    }

    /* Phones: the four cards in a 2x2 grid above the city, so they don't cover it */
    .mock-hero-visual {
        transform: none;
        min-height: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        align-items: stretch;
    }

    .hero-float-card {
        position: static;
        width: auto;
        max-width: none;
        min-height: 0;
        align-items: center;
    }

    .hero-city-wrap {
        grid-column: 1 / -1;
        order: 1; /* after the cards, so its lit path runs straight down to the CTA */
        width: 100%;
        margin-top: 4px;
    }

    .hero-cta-zone .mock-hero-cta {
        font-size: 1.1rem;
        padding: 0.85rem 1.5rem;
    }
}