/* Lihyot BeTov: the red/wine palette and the rules only this page has.
   Loaded by /lihyot-betov after tokens, base, landing, popup and popup-one-step, so every
   rule here wins over the shared sheets. Sources: the old /lihyot-betov/lihyot.css (palette,
   .rung__tag, #donate colours) and the old page's inline style block (gradients, buttons,
   .facts-sec, .toll*, the hero quote lines, the FAQ quotes, the icon order).
   Three blocks: (1) token overrides, (2) overrides of olive values the shared sheets hard-code,
   (3) Lihyot-only classes. Contrast ratios are the old file's, checked against WCAG 2.1 AA.
   Direction comes from <html dir>; only logical properties here. */

/* ---------- 1 · tokens ----------
   tokens.css names the colours by the Nefesh roles; the same roles, in wine. */
:root {
    --olive-black: #170A0E;   /* faq section, rights bar        white on it 19.3:1 */
    --olive-deep: #2A0A12;    /* gradient starts                white on it 18.3:1 */
    --olive: #C8143C;         /* main colour: dial numbers      on white     5.8:1 */
    --olive-mid: #7B1E1E;     /* footer body, focus rings       white on it 10.3:1 */
    --olive-lite: #E85A50;    /* h1 rule, faq chevrons, quotes  on #12070A   5.7:1 */
    --sand: #F2C4BC;          /* kicker, cites, faq head        on the dark wine 8.6:1 and up */
    --sand-lite: #FBEFEC;
    --cta-on-dark: #F2C4BC;   /* goal bar fill: --olive-black text on it 12.3:1 */
    --cta-on-dark-h: #F7D6D0;
    --cta-on-light: #C8143C;
    --cta-on-light-h: #7B1E1E;
    --crimson: #C8143C;       /* every donate button, white on it 5.8:1 */
    --coral: #E85A50;
    --maroon: #7B1E1E;        /* button hover */
    --purple: #8B2E3C;        /* popup links and focused fields  on white 8.2:1 */
}
#donate { --pink: var(--crimson); --pink-d: var(--maroon); }

/* ---------- 2 · olive values the shared sheets hard-code ---------- */
:focus-visible { outline-color: var(--coral); }
.cd { background: linear-gradient(103deg, #5E0F1C 0%, #98122E 46%, #C8143C 100%); }
/* Stops at #5A1424: white on it 13.5:1, and the red button still stands out. */
.hero { background: linear-gradient(158deg, #170A0E 0%, #2A0A12 38%, #44101D 72%, #5A1424 100%); }
.hero .goal-label { margin-block-start: 1.4rem; }
.hero__pic .ph {
    background:
        radial-gradient(72% 62% at 50% 36%, rgba(232, 90, 80, .22), transparent 70%),
        linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .2));
}
/* The ladder keeps the blue-purple of the old /betov page, also the blue of the logo. */
.tiers-sec { background: linear-gradient(158deg, #141E4A 0%, #2A2559 38%, #4E3F70 70%, #6A5486 100%); }
/* Coral on white was 3.5:1 in this small size; red on white is 5.8:1. */
.rung__tag { background: var(--crimson); color: #fff; }
.rung__who i { box-shadow: 0 0 0 3px rgba(232, 90, 80, .22); }

/* Every donate button is red with a white border, on dark sections too (the shared sheets
   turn them light with dark text there). */
.on-dark .btn-coral { background: var(--crimson); color: #fff; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .45); }
.tiers-sec .btn-pill-w { background: var(--crimson); color: #fff; box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .6); }
.on-dark .btn-coral:hover, .tiers-sec .btn:hover { background: var(--maroon); }
.voice__cta { background: var(--crimson); color: #fff; border: 2px solid #fff; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .7); }
.voice__cta:hover { background: var(--maroon); }
.foot__cta { background: var(--crimson); color: #fff; }
.foot__cta:hover { background: var(--maroon); }
#donate .btn { box-shadow: 0 4px 16px rgba(0, 0, 0, .28); }
/* Heart and lock after the text, on the inline-end side; the shared sheets put the icon first. */
.lp [data-donate] > svg, #donate button > svg { order: 1; }

.voice__card { background: #12070A; }
.voice__card::before { background: radial-gradient(46% 58% at 14% 42%, rgba(232, 90, 80, .2), transparent 68%); }
.voice__ph {
    background: linear-gradient(160deg, #44101D, #170A0E);
    box-shadow: 0 0 0 3px var(--sand), 0 0 0 10px rgba(242, 196, 188, .16), 0 22px 44px -20px rgba(0, 0, 0, .8);
}
/* The dial section follows the voice card, which also sits on white: half the top padding. */
.eq-sec--light { padding-block-start: clamp(1.6rem, 3.4vw, 2.6rem); }
/* Air between the dial and the paragraphs under it: they open another subject. */
.dial { margin-block-end: clamp(2rem, 4.4vw, 2.8rem); }
.qa { background: #12070A; }
.foot { background: var(--olive-mid); }

/* The circle mark at 1.35x the wordmark's height, as the old page had it: at equal height the
   circle looks far lighter because it covers less area. */
.lp .marks__mark { max-height: 51px !important; max-width: 51px !important; }
.lp .marks--big .marks__mark { max-height: 76px !important; max-width: 76px !important; }
#donate .marks__mark { max-height: 51px !important; max-width: 51px !important; }
@media (max-width: 520px) {
    /* base.css lets its 420px .marks img rule outrank .marks--big img; the old page kept the
       big pair at 42px / 140px down to 320px. */
    .lp .marks--big img { max-height: 42px; max-width: 140px; }
    .lp .marks--big .marks__mark { max-height: 57px !important; max-width: 57px !important; }
}
@media (max-width: 420px) {
    .lp .marks__mark, #donate .marks__mark { max-height: 42px !important; max-width: 42px !important; }
}

/* ---------- 3 · Lihyot-only classes ---------- */
/* Lior's words in the hero, first person, with her name under them. */
.hero .sub--lead { margin-block-start: 1rem; color: rgba(255, 255, 255, .82); }
.hero__cite { margin: -.3rem 0 1.3rem; font-size: clamp(.84rem, 1.5vw, .95rem); font-weight: 700; color: var(--sand); }

/* The numbers section (the old /betov facts band). */
.facts-sec { background: linear-gradient(178deg, #8B3348 0%, #98303F 45%, #A2333B 100%); }
.facts-sec::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(70% 50% at 20% 10%, rgba(255, 255, 255, .1), transparent 62%);
}
.facts-sec .facts > p { color: rgba(255, 255, 255, .96); }
.facts-sec .facts > p b { font-weight: 800; color: #fff; }

/* Quotes inside the FAQ answers. The long selectors beat the two resets above them. */
.qa .qa__a p { margin: 0; }
.qa .qa__q { margin: 0; padding: 0; }
.qa .qa__q p + p { margin-block-start: .75rem; }
.qa .qa__a > p + .qa__q, .qa .qa__a > .qa__q + p { margin-block-start: 1rem; }
.qa .qa__q cite { display: block; margin-block-start: .55rem; font-style: normal; font-size: .88em; font-weight: 700; color: var(--sand); }

/* The toll: two counters with the label between them, then the daily rate as a heading. */
.toll { text-align: center; margin-block-end: clamp(1.8rem, 3.6vw, 2.6rem); }
.toll__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(.5rem, 2.4vw, 1.8rem); }
.toll__when { margin: 0 0 .2rem; font-size: clamp(.74rem, 1.6vw, .86rem); font-weight: 700; letter-spacing: .08em; color: rgba(255, 255, 255, .72); }
.toll__num {
    margin: 0; font-size: clamp(1.9rem, 7vw, 3.7rem); font-weight: 800; line-height: 1;
    letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .56);
}
.toll__cell--now .toll__when, .toll__cell--now .toll__num { color: #fff; }
.toll__unit {
    margin: .9rem 0 0; font-size: clamp(.72rem, 1.7vw, .92rem); font-weight: 700; line-height: 1.3; color: rgba(255, 255, 255, .8);
    padding-inline: clamp(.4rem, 1.6vw, 1rem); border-inline: 1px solid rgba(255, 255, 255, .22);
}
.toll__rate {
    margin: clamp(1.4rem, 3vw, 2rem) auto 0; max-width: 34rem; text-align: center;
    padding-block-start: clamp(1.2rem, 2.6vw, 1.6rem); border-block-start: 1px solid rgba(255, 255, 255, .3);
}
.toll__rate b { display: block; font-size: clamp(3rem, 11vw, 4.8rem); font-weight: 800; line-height: .95; letter-spacing: -.03em; color: #fff; }
.toll__rate span { display: block; margin-block-start: .25rem; font-size: clamp(1.02rem, 2.3vw, 1.32rem); font-weight: 800; line-height: 1.35; color: #fff; }
.toll__rate em {
    display: block; margin-block-start: .45rem; font-style: normal;
    font-size: clamp(.86rem, 1.8vw, 1rem); font-weight: 700; letter-spacing: .06em; color: rgba(255, 255, 255, .78);
}
@media (max-width: 420px) {
    .toll__row { gap: .35rem; }
    .toll__unit { margin-block-start: .75rem; }
}