/* ===========================================================================
   trade2profit - light theme
   ---------------------------------------------------------------------------
   Serves the NEW pages only: /, /tools, /guides.
   /bio and /landing keep their own dark stylesheets (style.css, landing.css)
   and must not be touched from here - loading both on one page is what caused
   the CSS-ownership bug class already documented in the CRM.

   Every contrast ratio in this file was measured, not estimated. Do not adjust
   a colour without re-running the check; three specific traps are marked below.
   =========================================================================== */

:root {
    /* --- surfaces --- */
    --bg:           #FFFFFF;
    --bg-alt:       #F8FAFC;   /* alternating section bands */
    --surface:      #FFFFFF;   /* cards */
    --border:       #E2E8F0;
    --border-str:   #CBD5E1;

    /* --- text ---
       ratios are stated as (on --bg / on --bg-alt) */
    --ink:          #0F172A;   /* 17.85 / 17.06 */
    --ink-2:        #475569;   /*  7.58 /  7.24 */

    /* TRAP 1: #64748B is the obvious pick for muted text. It passes on white
       (4.76) but FAILS on --bg-alt (4.43). There is deliberately no separate
       muted token - --ink-2 serves both surfaces. */

    /* --- brand --- */
    --navy:         #1E3A8A;   /* 10.36 /  9.90 */
    --navy-lt:      #1D4ED8;   /*  6.70 /  6.41 - links, hover */
    --navy-soft:    #EFF4FF;   /* tinted card background */

    /* --- accent: the bridge to the brand's existing gold --- */
    --gold:         #A16207;   /*  4.92 /  4.71 - passes as text, barely */
    --gold-soft:    #FFFBF2;   /* tinted badge ground; --gold on it = 4.77 */
    --gold-dk:      #8A5406;   /* accent button hover; white on it = 6.27 */

    /* TRAP 2: --gold clears 4.5:1 on --bg-alt by 0.21 only. Never lighten it
       and never place it on a surface darker than --bg-alt.
       TRAP 3: #CA8A04 reads as the "nicer" gold and scores 2.94 on white - 
       it fails outright. Do not reintroduce it. */

    /* --- semantic --- */
    --success:      #0F7B4F;   /*  5.29 /  5.06 */
    --danger:       #B91C1C;   /*  6.47 /  6.18 */

    /* white on a filled button: navy 10.36, gold 4.92, success 5.29 */
    --on-fill:      #FFFFFF;

    /* --- accessibility high-contrast mode ---
       Pure black on pure white, 21:1. This mode exists for users who cannot
       read the normal palette, so it intentionally ignores the brand. */
    --a11y-ink:     #000000;
    --a11y-bg:      #FFFFFF;

    /* --- spacing: "spacious" scale, 8px base --- */
    --space-1: 8px;   --space-2: 16px;  --space-3: 24px;  --space-4: 32px;
    --space-5: 48px;  --space-6: 64px;  --space-7: 96px;  --space-8: 128px;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;

    --shadow-card: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
    --shadow-lift: 0 2px 4px rgba(15, 23, 42, .05), 0 16px 40px rgba(15, 23, 42, .10);

    --container: 1140px;
    --measure: 68ch;           /* reading width for guide body copy */

    --font: 'IBM Plex Sans Hebrew', 'Assistant', system-ui, -apple-system, sans-serif;
    --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ===========================================================================
   base
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    font-weight: 400;

    /* Hebrew typography. These three override the Latin defaults:
       - line-height 1.7, not 1.5 - Hebrew needs more air
       - letter-spacing 0 - NEVER track Hebrew, it breaks letterforms
       - word-spacing 0.05em - measurably improves RTL readability */
    line-height: 1.7;
    letter-spacing: 0;
    word-spacing: .05em;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--navy-lt); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--navy); }

/* Visible keyboard focus on every interactive element. Never remove this. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--navy-lt);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Numerals share one advance width so prices and calculator output don't jitter. */
.num, .price, table, input[type="number"] { font-variant-numeric: tabular-nums; }

/* ===========================================================================
   typography
   ---------------------------------------------------------------------------
   IBM Plex Sans Hebrew stops at 700 - there is no 800/900 in the Hebrew family.
   Hierarchy therefore comes from size and colour, not from extreme weight.
   =========================================================================== */

h1, h2, h3, h4 {
    margin: 0 0 var(--space-2);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;          /* restated: never track Hebrew headings */
    color: var(--ink);
    text-wrap: balance;
}

h1 { font-size: clamp(30px, 5.2vw, 52px); }
h2 { font-size: clamp(25px, 3.6vw, 38px); }
h3 { font-size: clamp(19px, 2.2vw, 23px); font-weight: 600; }
h4 { font-size: 17px; font-weight: 600; }

p  { margin: 0 0 var(--space-2); }

.lead {
    font-size: clamp(17px, 2.1vw, 20px);
    color: var(--ink-2);
    line-height: 1.7;
}

.eyebrow {
    font-size: 14px;
    font-weight: 600;
    color: var(--gold);
    margin: 0 0 var(--space-1);
}

.muted { color: var(--ink-2); }

/* ===========================================================================
   layout
   =========================================================================== */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-3);
}

.section { padding-block: var(--space-7); }
.section--tight { padding-block: var(--space-6); }
.section--alt { background: var(--bg-alt); }

.section__head {
    max-width: 62ch;
    margin: 0 auto var(--space-5);
    text-align: center;
}
.section__head p { color: var(--ink-2); margin-bottom: 0; }

.grid { display: grid; gap: var(--space-3); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.stack > * + * { margin-top: var(--space-2); }

/* ===========================================================================
   buttons
   =========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);

    /* 48px tall - clears the 44x44 minimum touch target */
    min-height: 48px;
    padding: 12px var(--space-4);

    border: 1px solid transparent;
    border-radius: var(--radius-sm);

    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;

    transition: background-color .2s var(--ease), border-color .2s var(--ease),
                transform .2s var(--ease), box-shadow .2s var(--ease);
}

.btn--primary { background: var(--navy); color: var(--on-fill); }      /* 10.36 */
.btn--primary:hover { background: var(--navy-lt); color: var(--on-fill); transform: translateY(-1px); box-shadow: var(--shadow-lift); }

.btn--accent { background: var(--gold); color: var(--on-fill); }       /*  4.92 */
.btn--accent:hover { background: var(--gold-dk); color: var(--on-fill); transform: translateY(-1px); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--border-str); }
.btn--ghost:hover { background: var(--bg-alt); color: var(--ink); border-color: var(--ink-2); }

.btn--wide { width: 100%; }

/* ===========================================================================
   cards
   =========================================================================== */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    transition: box-shadow .2s var(--ease), transform .2s var(--ease),
                border-color .2s var(--ease);
}
.card h3 { margin-bottom: var(--space-1); }
.card p:last-child { margin-bottom: 0; }

.card--link:hover {
    border-color: var(--border-str);
    box-shadow: var(--shadow-card);
    transform: translateY(-2px);
}

.card--soft { background: var(--navy-soft); border-color: transparent; }

/* Proof images arrive at different aspect ratios. Without a fixed box the cards
   end up different heights and the captions stop lining up. contain, not cover:
   these are certificates, and cropping one to fill a box hides the evidence. */
.proof-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: var(--bg-alt);
    border-radius: var(--radius-sm);
}

/* ===========================================================================
   badge / price
   =========================================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--navy-soft);
    color: var(--navy);
    font-size: 14px;
    font-weight: 600;
}
.badge--gold { background: var(--gold-soft); color: var(--gold); }

.price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    font-weight: 700;
}
.price__amount { font-size: clamp(38px, 6vw, 56px); line-height: 1; color: var(--ink); }
.price__period { font-size: 17px; color: var(--ink-2); font-weight: 400; }

/* ===========================================================================
   forms
   =========================================================================== */

.field { margin-bottom: var(--space-2); }

/* Visible labels, never placeholder-only - a placeholder disappears the moment
   the user types, taking the question with it. */
.field label {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}

.field input, .field textarea, .field select {
    width: 100%;
    min-height: 48px;
    padding: 12px var(--space-2);
    border: 1px solid var(--border-str);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--ink);
    font-family: inherit;
    font-size: 16px;          /* 16px stops iOS Safari zooming on focus */
    line-height: 1.5;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field textarea:focus {
    border-color: var(--navy-lt);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .12);
    outline: none;
}
.field input[aria-invalid="true"] { border-color: var(--danger); }

.field__hint { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); }
.field__error { margin: 6px 0 0; font-size: 14px; color: var(--danger); font-weight: 600; }

.checkbox {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 10px;
    align-items: start;
    margin-bottom: var(--space-2);
    font-size: 15px;
    line-height: 1.55;
}
.checkbox input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--navy); }

/* ===========================================================================
   accordion - native <details>
   ---------------------------------------------------------------------------
   Deliberately NOT reusing the .accordion-* class names: style.css and app.js
   also load on other pages, and sharing those names drags the old page's look
   and behaviour along with them. Native <details> is accessible with no JS.
   =========================================================================== */

.faq { max-width: 76ch; margin-inline: auto; }

.faq details {
    border-bottom: 1px solid var(--border);
    padding: var(--space-2) 0;
}
.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    cursor: pointer;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "";
    flex: 0 0 10px;
    width: 10px; height: 10px;
    /* Physical sides on purpose. The logical properties flip with direction,
       which in RTL turned this chevron sideways instead of down. */
    border-right: 2px solid var(--ink-2);
    border-bottom: 2px solid var(--ink-2);
    transform: rotate(45deg);
    transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details p { margin: var(--space-2) 0 0; color: var(--ink-2); }

/* ===========================================================================
   article byline + sources (GEO audit, 5 Sep 2026)
   ---------------------------------------------------------------------------
   The audit found zero "last updated" dates and zero outbound citations on
   every page. Both are separate rules from .legal-meta on purpose: that class
   belongs to the legal pages, and this project has already paid once for two
   components sharing a selector (the CRM's KanbanCard bug, documented there).
   .sources is deliberately plain - a bordered list, not a card - so it never
   competes visually with the guide's own content for attention.
   =========================================================================== */

.article-meta { font-size: 15px; color: var(--ink-2); margin: 0 0 var(--space-4); }
.article-meta a { color: var(--navy-lt); }

.sources {
    margin-top: var(--space-5);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
}
.sources h2 { font-size: 18px; margin-bottom: var(--space-2); }
.sources ol { margin: 0; padding-inline-start: 1.2em; color: var(--ink-2); font-size: 15px; }
.sources li { margin-bottom: var(--space-1); }
.sources a { color: var(--navy-lt); }

/* ===========================================================================
   nav / footer
   =========================================================================== */

.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}
.nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 68px;
}
.nav__logo { font-size: 20px; font-weight: 700; color: var(--navy); text-decoration: none; }
.nav__links { display: flex; align-items: center; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.nav__links a { color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 600; }
.nav__links a:hover { color: var(--navy); }

.footer {
    background: var(--bg-alt);
    border-top: 1px solid var(--border);
    padding-block: var(--space-6) var(--space-4);
    font-size: 15px;
    color: var(--ink-2);
}
.footer a { color: var(--ink-2); text-decoration: none; }
.footer a:hover { color: var(--navy); text-decoration: underline; }

.footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--space-5) var(--space-4);
    padding-bottom: var(--space-5);
}

.footer__logo { display: inline-block; font-size: 20px; font-weight: 700; color: var(--navy); }
.footer__logo:hover { color: var(--navy); text-decoration: none; }
.footer__tagline { max-width: 32ch; margin: var(--space-1) 0 var(--space-3); font-size: 14px; }

.footer__social-label { margin: 0 0 var(--space-1); font-size: 13px; font-weight: 700; color: var(--ink); }
.footer__social { display: flex; gap: var(--space-3); }
.footer__social-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--ink-2);
    text-decoration: none;
}
.footer__social-link:hover { color: var(--navy); text-decoration: none; }
.footer__social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border);
}
.footer__social-link:hover .footer__social-icon { background: var(--navy-soft); border-color: var(--navy-soft); }
.footer__social-name { font-size: 12px; font-weight: 600; }

.footer__col-title { margin: 0 0 var(--space-2); font-size: 14px; font-weight: 700; color: var(--ink); }
.footer__links { display: flex; flex-direction: column; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }

.footer__bottom {
    border-top: 1px solid var(--border);
    padding-top: var(--space-3);
    font-size: 13px;
}
.footer__bottom p { margin: 0; }

/* ===========================================================================
   utilities
   =========================================================================== */

.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.measure { max-width: var(--measure); }

/* ===========================================================================
   hero art (5 Sep 2026, images added same day)
   ---------------------------------------------------------------------------
   /courses, /mentoring, /group-mentoring and /tools shipped with zero images.
   No photograph exists for any of them (unlike /about and the home page,
   which use real, verifiable proof), so a fabricated "photo" would be a worse
   choice than no image at all. /courses, /mentoring and /tools now carry a
   purpose-made illustration Ariel generated and approved (navy/gold,
   on-brand, admits it's an illustration rather than posing as evidence).
   The first /mentoring attempt rendered four disconnected floating heads
   instead of two people and was rejected rather than shipped broken; the
   retry came back clean. /group-mentoring still uses the plain inline-SVG
   badge below - it already has a real photo (session-group.jpg) elsewhere
   on the page and didn't need one here too.
   =========================================================================== */

.hero-art {
    width: 128px;
    height: 128px;
    margin: 0 auto var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--navy-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.hero-art svg { width: 64px; height: 64px; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; }
.icon-navy { stroke: var(--navy); }
.icon-gold { stroke: var(--gold); }

/* ===========================================================================
   home hero, redesigned (5 Sep 2026), rebuilt and full-bleed (7 Sep 2026)
   ---------------------------------------------------------------------------
   Four rounds landed here: a two-column layout (text beside an image)
   couldn't fit a screen once the image carried its own height alongside
   the text column, no matter how the image was cropped. Ariel picked the
   full-bleed pattern from three static mockups (Struktura reference) -
   the image is the section, text and CTA sit on top of it, so there's
   only one height to fit, not two stacked ones. See the HTML comment
   above the hero section for the full history of what didn't work first.
   =========================================================================== */

/* Fills exactly what's left of the screen below the sticky nav (68px inner
   height + 1px border), on every device. dvh (dynamic viewport height)
   accounts for the browser chrome that shows/hides on scroll on mobile -
   plain vh there either leaves a gap or clips content as the address bar
   moves. The vh line first is the fallback for browsers without dvh
   support; they ignore the second declaration and keep the first. max()
   keeps a 480px floor so a short landscape phone doesn't crush the stats
   row against the buttons. */
.hero-full {
    position: relative;
    min-height: calc(100vh - 69px);
    min-height: max(480px, calc(100dvh - 69px));
    display: flex;
    align-items: center;
    overflow: hidden;
}
.hero-full img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
}
/* Scrim, not a flat tint. The content used to sit at the bottom, so a
   bottom-to-top gradient was enough. Centered content sits over the
   middle of the frame instead - including the bright monitor screen -
   so the scrim now also darkens right-to-left (RTL: text lives on the
   right) on top of a lighter vertical pass, rather than relying on one
   axis alone. */
.hero-full::after {
    content: "";
    position: absolute; inset: 0;
    /* Centered composition needs a centered scrim, not the right-weighted
       one built for right-aligned text - a radial dark patch under where
       the text now sits (regardless of LTR/RTL), plus a mild vertical
       pass so the stats row's border-top still reads against the image.
       Note: the stats row's contrast currently survives only because the
       photo itself is dark at the bottom - the linear pass fades to just
       .05 there, and the radial patch has already faded to .1 by 80% from
       center. Swapping in a brighter-at-the-bottom hero image later could
       wash out the stats numbers with no visual warning; re-check contrast
       at that point rather than assuming this scrim covers it. */
    background:
        radial-gradient(ellipse 70% 60% at center, rgba(2,6,23,.78) 0%, rgba(2,6,23,.45) 50%, rgba(2,6,23,.1) 80%),
        linear-gradient(0deg, rgba(2,6,23,.4) 0%, rgba(2,6,23,.15) 50%, rgba(2,6,23,.05) 100%);
}
.hero-full__content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-block: var(--space-6) var(--space-5);
    color: var(--on-fill);
    text-align: center;
}
.hero-full__content .eyebrow { color: var(--gold); }
.hero-full__content h1 { color: var(--on-fill); max-width: 18ch; margin-inline: auto; }
.hero-full__content .lead { color: rgba(255, 255, 255, .82); max-width: 55ch; margin-inline: auto; }
.hero-full__ghost { border-color: rgba(255, 255, 255, .4); color: var(--on-fill); }
.hero-full__ghost:hover { background: rgba(255, 255, 255, .1); color: var(--on-fill); }

.hero-full__stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-5);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid rgba(255, 255, 255, .2);
}
.hero-full__stats strong {
    display: block;
    font-size: 26px;
    font-weight: 700;
    color: var(--on-fill);
    font-variant-numeric: tabular-nums;
}
.hero-full__stats span { font-size: 14px; color: rgba(255, 255, 255, .7); margin-top: 4px; }

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ===========================================================================
   responsive
   =========================================================================== */

@media (max-width: 768px) {
    .section { padding-block: var(--space-5); }
    .section--tight { padding-block: var(--space-4); }
    .btn { width: 100%; }
    .btn--inline { width: auto; }

    .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-3); }
    .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
    .footer__grid { grid-template-columns: 1fr; }
}

/* ===========================================================================
   motion
   =========================================================================== */

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

/* ===========================================================================
   accessibility widget + cookie banner
   ---------------------------------------------------------------------------
   These two are driven by app.js, which is shared with /bio. The class and id
   names below are therefore fixed by that script and must not be renamed:
   #a11yTrigger #a11yPanel #a11yClose #a11yBtn* #cookieBanner #acceptCookiesBtn,
   plus the five body state classes it toggles.

   They are restyled here rather than inherited, because style.css (which dresses
   them on /bio) is a dark theme and is deliberately not loaded on these pages.
   An accessibility widget is a legal requirement in Israel - shipping it
   unstyled would be worse than not shipping the page.
   =========================================================================== */

.a11y-trigger {
    position: fixed;
    inset-block-end: 20px;
    inset-inline-start: 20px;
    z-index: 90;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--navy);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.a11y-trigger:hover { transform: scale(1.05); box-shadow: var(--shadow-lift); }

.a11y-panel {
    position: fixed;
    inset-block-end: 84px;
    inset-inline-start: 20px;
    z-index: 91;
    width: min(300px, calc(100vw - 40px));
    padding: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lift);

    /* opacity+visibility rather than display, so the panel can animate.
       visibility also keeps it out of the tab order while closed. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.a11y-panel.active { opacity: 1; visibility: visible; transform: translateY(0); }

.a11y-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}
.a11y-panel-header h3 { margin: 0; font-size: 17px; }

.a11y-close {
    width: 32px; height: 32px;
    border: 0; border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink-2);
    font-size: 24px; line-height: 1;
    cursor: pointer;
}
.a11y-close:hover { background: var(--bg-alt); color: var(--ink); }

.a11y-panel button:not(.a11y-close) {
    display: block;
    width: 100%;
    min-height: 44px;
    margin-bottom: var(--space-1);
    padding: 10px var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
    transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.a11y-panel button:not(.a11y-close):hover { background: var(--bg-alt); border-color: var(--border-str); }

/* --- the five body states app.js toggles --- */

body.a11y-large-text { font-size: 19px; }

body.a11y-high-contrast {
    background: var(--a11y-bg);
    color: var(--a11y-ink);
}
body.a11y-high-contrast :where(p, li, span, h1, h2, h3, h4, .lead, .muted) { color: var(--a11y-ink); }
body.a11y-high-contrast :where(.card, .section--alt, .nav, .footer) { background: var(--a11y-bg); border-color: var(--a11y-ink); }

body.a11y-grayscale { filter: grayscale(1); }

body.a11y-highlight-links a { text-decoration: underline; outline: 2px solid var(--gold); outline-offset: 2px; }

/* Arial is requested here on purpose: the readable-font mode exists for people
   who find the site face hard to parse, so it must NOT fall back to var(--font). */
body.a11y-readable-font, body.a11y-readable-font :where(h1, h2, h3, h4, p, a, button, input, label, li) {
    font-family: Arial, 'Assistant', sans-serif;
}

/* --- cookie banner --- */

.cookie-banner {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 80;

    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    flex-wrap: wrap;

    padding: var(--space-2) var(--space-3);
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: var(--shadow-lift);
    font-size: 15px;
}
.cookie-banner.active { display: flex; }
.cookie-banner p { margin: 0; color: var(--ink-2); }
.cookie-banner button {
    min-height: 44px;
    padding: 10px var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--navy);
    color: var(--on-fill);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.cookie-banner button:hover { background: var(--navy-lt); }

@media (max-width: 600px) {
    /* Keep the two fixed widgets from stacking on top of each other. */
    .a11y-trigger { inset-block-end: 88px; }
    .a11y-panel { inset-block-end: 152px; }
}

/* A pair of buttons that sit side by side and wrap to a column only when the
   viewport genuinely cannot fit them. Using .grid--2 here stacked them at every
   width, because its 280px minimum never fits twice inside a narrow container. */
.cta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
}
@media (max-width: 520px) {
    .cta-row { flex-direction: column; }
    .cta-row .btn--inline { width: 100%; }
}

/* A number glued to its unit. In an RTL paragraph "%" is a bidi-neutral
   character, so "0.5%" renders as "%0.5" unless the run is isolated. Same
   applies to any latin fragment sitting inside Hebrew prose. */
.ltr {
    direction: ltr;
    unicode-bidi: isolate;
}

/* ===========================================================================
   pricing plans + comparison table
   =========================================================================== */

.plan { display: flex; flex-direction: column; }
.plan .badge { align-self: flex-start; }

/* The featured plan is lifted with a border rather than a colour wash: the
   card already sits on --navy-soft, and stacking a second tint on it would
   push the body text below the contrast contract. */
.plan--featured { border: 2px solid var(--navy); }

.plan__list {
    list-style: none;
    margin: var(--space-3) 0;
    padding: 0;
    flex: 1;                      /* pushes the button to the bottom so two
                                     cards of unequal length still line up */
}
.plan__list li {
    position: relative;
    padding-inline-start: 26px;
    margin-bottom: 10px;
    color: var(--ink-2);
    line-height: 1.55;
}
.plan__list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 4px;
    top: 9px;
    width: 6px;
    height: 11px;
    /* a check mark drawn from two borders, rotated. Physical sides, so RTL
       does not mirror it into a backwards tick. */
    border-right: 2px solid var(--success);
    border-bottom: 2px solid var(--success);
    transform: rotate(45deg);
}

/* Wide content must scroll inside its own box, never make the page scroll. */
.table-wrap {
    max-width: 900px;
    margin-inline: auto;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.compare {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    background: var(--surface);
    font-size: 15px;
}
.compare th, .compare td {
    padding: 14px var(--space-2);
    text-align: start;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.compare thead th {
    background: var(--bg-alt);
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
}
.compare tbody th { font-weight: 600; color: var(--ink); }
.compare td { color: var(--ink-2); }
.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: 0; }

/* ===========================================================================
   legal pages and 404
   ---------------------------------------------------------------------------
   /terms, /privacy, /accessibility and /404 shipped the dark style.css, so a
   visitor clicking "מדיניות פרטיות" in the footer of any light page dropped
   into a black page mid-journey - and /404 caught every mistyped URL on the
   whole site.

   The rules live here once, not in a <style> block per page. All three legal
   pages carried their own near-identical copy, which is the CSS-ownership bug
   class already documented in the CRM: one selector with two owners, and
   whichever sheet loads last silently wins.

   ⛔ billing-terms.html deliberately keeps style.css and its own David Libre
   type. It is the binding purchase agreement, it is linked from GROW's
   checkout rather than from this site, and its layout went through legal
   review. Do not fold it in here.
   =========================================================================== */

.legal-container {
    max-width: 820px;
    margin: var(--space-6) auto var(--space-5);
    padding: var(--space-5) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.legal-title {
    font-size: clamp(28px, 4vw, 34px);
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 var(--space-1);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border);
}

.legal-meta { font-size: 15px; color: var(--ink-2); margin-bottom: var(--space-4); }

.legal-content h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    margin: var(--space-4) 0 var(--space-2);
}
.legal-content h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    margin: var(--space-3) 0 var(--space-1);
}
.legal-content p,
.legal-content li { color: var(--ink-2); }
.legal-content p { font-size: 16px; margin-bottom: var(--space-2); }
.legal-content ul { margin: 0 0 var(--space-3); padding-inline-start: var(--space-3); list-style: disc; }
.legal-content li { font-size: 16px; margin-bottom: var(--space-1); }
.legal-content strong { color: var(--ink); font-weight: 600; }
.legal-content a { color: var(--navy-lt); }
.legal-content a:hover { color: var(--navy); }

/* Was a red-tinted panel on black. On white the same weight of red reads as an
   error state rather than as emphasis, so the tint is quiet and the heading
   carries the colour. */
.highlight-box {
    background: rgba(185, 28, 28, .05);
    border: 1px solid rgba(185, 28, 28, .25);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin: var(--space-3) 0;
    color: var(--ink);
}
.highlight-box h3 { color: var(--danger); font-size: 18px; font-weight: 700; margin: 0 0 var(--space-1); }
.highlight-box p:last-child { margin-bottom: 0; }

.back-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--navy-lt);
    text-decoration: none;
    font-weight: 600;
    margin-bottom: var(--space-3);
}
.back-btn:hover { color: var(--navy); }

.legal-footer {
    background: var(--bg-alt);
    border-top: 1px solid var(--border);
    padding: var(--space-4) var(--space-3);
    text-align: center;
}
.legal-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-1) var(--space-3);
    margin-bottom: var(--space-2);
}
.legal-footer-links a { color: var(--ink-2); text-decoration: none; font-size: 15px; }
.legal-footer-links a:hover { color: var(--navy); text-decoration: underline; }
.legal-footer-meta { color: var(--ink-2); font-size: 14px; margin: 0; }

/* --- 404 --- */

.error-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    padding: var(--space-3);
    background: var(--bg-alt);
}
/* The dark page rendered this as gradient-clipped text, which is invisible to
   a forced-colours mode and to the a11y widget's high-contrast setting. Plain
   navy instead - it is a decorative number, not something to fight over. */
.error-code {
    font-size: clamp(72px, 16vw, 120px);
    font-weight: 700;
    line-height: 1;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
    margin-bottom: var(--space-2);
}
.error-title { font-size: clamp(24px, 4vw, 32px); font-weight: 700; color: var(--ink); margin-bottom: var(--space-2); }
.error-desc { font-size: 18px; color: var(--ink-2); max-width: 520px; margin: 0 auto var(--space-4); }
.error-btn { text-decoration: none; }


/* ===========================================================================
   the two founders on /about
   ---------------------------------------------------------------------------
   The first attempt put a 200px square above each name and let the two
   stories run as bare grid columns. It read as disconnected, and the
   diagnosis was in the photo's job: a portrait on an about page exists to
   attach a face to a name, and a floating square above a block of text does
   not do that. Here it is set as a byline instead, face beside name, the way
   a magazine credits a writer. The two columns then start on the same line
   however long the stories are.

   The eyebrow "מייסד שותף" that used to sit above each name is gone: the
   page's own lead already says both men founded the business, so the label
   repeated the sentence directly above it twice.
   =========================================================================== */

.founder__byline {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.founder__portrait {
    width: 88px;
    height: 88px;
    flex: 0 0 88px;
    object-fit: cover;
    border-radius: var(--radius-md);
    background: var(--navy-soft);
}

.founder__name { font-size: 24px; font-weight: 700; margin: 0; }
.founder__role { font-size: 14px; font-weight: 600; color: var(--gold); margin: 2px 0 0; }
.founder__trade { font-size: 15px; color: var(--ink-2); margin: 2px 0 0; }

.founder p { margin-bottom: var(--space-2); }

/* Both columns are ragged at the bottom because one man has more road behind
   him than the other. This line closes the section across the full width and
   carries a fact the page needed anyway. */
.founders__note {
    margin-top: var(--space-5);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
    color: var(--ink-2);
    text-align: center;
}


/* ===========================================================================
   mobile navigation
   ---------------------------------------------------------------------------
   The old rule hid .nav__links under 768px and put nothing in their place, so
   a phone visitor could reach no page but the one they landed on. The links
   now collapse into a panel behind a toggle.

   The join button stays outside the panel and visible in the bar: it is the
   page's conversion action, and burying it behind a menu costs more than the
   space it takes.
   =========================================================================== */

.nav__toggle {
    display: none;
    flex: none;              /* the bar is a flex row; without this the button
                                is squeezed and the bars come out stubby */
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 5px;
    width: 44px;             /* the 44x44 touch minimum, exactly */
    height: 44px;
    padding: 0 9px;
    background: none;
    border: 0;
    cursor: pointer;
}
.nav__toggle span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--navy);
    transition: transform .2s var(--ease), opacity .15s var(--ease);
}

/* The three bars fold into an X, so the control shows its own state rather
   than relying on the panel below it to say whether it is open. */
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
    .nav__toggle { display: flex; order: 3; }

    .nav__links {
        display: none;
        position: absolute;
        inset-inline: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--space-1) var(--space-3) var(--space-2);
        background: var(--bg);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-card);
    }
    .nav__links.is-open { display: flex; }

    .nav__links li + li { border-top: 1px solid var(--border); }
    .nav__links a {
        display: block;
        padding: 14px 4px;   /* comfortably over 44px tall */
        font-size: 17px;
    }
}

/* ===========================================================================
   lead form success state
   =========================================================================== */

.success-message {
    text-align: center;
    padding: var(--space-4) var(--space-2);
}

.success-icon {
    width: 64px;
    height: 64px;
    background: var(--navy-soft);
    color: var(--success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-3) auto;
}

.success-icon svg {
    width: 32px;
    height: 32px;
}

.success-message h4 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: var(--space-2);
    color: var(--ink);
}

.success-message p {
    color: var(--ink-2);
    font-size: 15px;
    margin-bottom: 0;
    line-height: 1.7;
}