/* The t2 template: the olive new-template pages /en/otzma and /en/otzma-lanefesh on
   donate-with-heart.com, ported from the old site's /en/otzma/v2/v2.css (Ron's template, 29.10).
   Loaded only by those two pages, after tokens, base and popup; they do not load landing.css.
   Every class is prefixed t2-; .t2 carries its own --t2-* palette (Otzma olive) and the page's
   18px base size, and Heebo variable is the display face (the @font-face is below). Later
   blocks override earlier ones on purpose: the cascade order is the design, kept as in the
   source. The .lp prefix on some margin rules beats base.css's `:where(.lp) p { margin: 0 }`.
   Contrast ratios are the source file's, checked against WCAG 2.1 AA.
   Direction comes from <html dir>; only logical properties here. */

.t2 {
    --t2-ink: #1F2414;       /* body text on white 15:1 */
    --t2-muted: #4B5240;     /* secondary text on white 7.9:1 */
    --t2-head: #3F4E1B;      /* headings on white 10.3:1 */
    --t2-red: #4E6126;       /* buttons, white on it 5.8:1 */
    --t2-red-d: #3F4E1B;
    --t2-cream: #F7F5EC;
    --t2-blush: #ECE7D3;
    --t2-wine: #1C220C;      /* dark backgrounds, white on it 18.3:1 */
    --t2-wine-2: #2B3410;
    --t2-rose: #D6C89A;      /* accent on wine 8.6:1 */
    background: #fff; color: var(--t2-ink);
    font-size: 18px;
}
/* base.css makes .narrow 940px; the template is a touch narrower. */
.t2 .narrow { width: min(900px, 92vw); }

/* ---------- the donate button: a pill with a heart ---------- */
.t2-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    font: inherit; font-weight: 800; font-size: clamp(1.02rem, 2vw, 1.18rem); line-height: 1.2;
    padding: .95rem 2.1rem; border-radius: 999px; border: 2px solid #fff; cursor: pointer;
    background: var(--t2-red); color: #fff; text-align: center;
    box-shadow: 0 10px 26px -10px rgba(28, 34, 12, .6);
    transition: transform .16s ease, background .2s ease, box-shadow .2s ease;
}
.t2-btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
.t2-btn:hover { transform: translateY(-2px); background: var(--t2-red-d); }
.t2-btn:focus-visible { outline: 3px solid var(--t2-head); outline-offset: 3px; }
.t2-btn--w { background: #fff; color: var(--t2-red); border-color: #fff; }
.t2-btn--w:hover { background: var(--t2-blush); color: var(--t2-red-d); }
.t2-center { display: flex; justify-content: center; margin-block-start: 2rem; }

/* ---------- sections ---------- */
.t2-sec { padding: clamp(2.6rem, 7vw, 4.8rem) 0; }
.t2-sec--tint { background: var(--t2-cream); }
.t2-h2 { color: var(--t2-head); font-size: clamp(1.6rem, 3.6vw, 2.3rem); text-align: center; margin: 2.8rem 0 1rem; }
.t2-sec--tint .t2-h2:first-child, .t2-marks + .t2-h2 { margin-block-start: 1.2rem; }
.t2-body { font-size: 1.08rem; }
.t2-body { text-align: center; color: var(--t2-ink); line-height: 1.75; }
.t2-body p + p { margin-block-start: .9rem; }

/* ---------- the transparency band ---------- */
.t2-band {
    background: var(--t2-wine); color: #fff; border-radius: 22px; padding: 1.4rem 1.6rem; text-align: center;
    font-size: clamp(1.05rem, 2.2vw, 1.25rem); line-height: 1.5;
}
.t2-band b { color: var(--t2-rose); }

/* ---------- the card: light, cream and olive, with a round picture ---------- */
.t2-card {
    background: #fff; border-radius: 28px; padding: clamp(1.6rem, 4vw, 2.6rem);
    border: 1px solid #DDD6BD; box-shadow: 0 30px 60px -40px rgba(28, 34, 12, .55); position: relative; overflow: hidden;
}
.t2-card::before {
    content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 6px;
    background: linear-gradient(90deg, var(--t2-red), #93AE4C, var(--t2-red-d));
}
.t2-card__top { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.2rem, 3.5vw, 2.4rem); align-items: center; }
.t2-card__pic {
    width: clamp(130px, 20vw, 200px); aspect-ratio: 1; border-radius: 50%; padding: 8px;
    background: conic-gradient(from 200deg, var(--t2-red), #93AE4C, var(--t2-blush), var(--t2-red));
}
.t2-card__pic img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: #fff; border: 4px solid #fff; }
.t2-card__kicker { color: var(--t2-red); font-weight: 800; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; margin-block-end: .35rem; }
.t2-card h2 { color: var(--t2-head); font-size: clamp(1.45rem, 3vw, 2rem); margin-block-end: .9rem; }
.t2-card__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.t2-card__lines li { position: relative; padding-inline-start: 1.6rem; line-height: 1.55; }
.t2-card__lines li::before {
    content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .45em; width: .8rem; height: .8rem; border-radius: 50%;
    background: var(--t2-blush); border: 3px solid var(--t2-red);
}
.t2-card__close {
    margin-block-start: 1.6rem; padding-block-start: 1.3rem; border-block-start: 1px dashed #D3CBAE; text-align: center;
    font-size: clamp(1.05rem, 2.2vw, 1.2rem); font-weight: 700; color: var(--t2-ink); line-height: 1.55;
}

/* ---------- the amount dial (t2-dial.js) ---------- */
.t2-dial { margin-block-start: 2.4rem; text-align: center; }
.t2-dial__lbl { font-weight: 800; color: var(--t2-head); font-size: clamp(1.15rem, 2.4vw, 1.4rem); }
.t2-dial__row { display: flex; align-items: baseline; justify-content: center; gap: .9rem; flex-wrap: wrap; margin: .8rem 0 1.2rem; }
.t2-dial__sum { font-size: 1.8rem; font-weight: 800; color: var(--t2-red); line-height: 1; }
.t2-dial__sum b { font-size: clamp(3rem, 8vw, 4.4rem); font-variant-numeric: tabular-nums; }
.t2-dial__what { color: var(--t2-muted); font-weight: 700; }
.t2-dial__range {
    --t2-fill: 0%; -webkit-appearance: none; appearance: none; width: min(560px, 100%); height: 12px; border-radius: 999px; cursor: pointer;
    background: linear-gradient(90deg, var(--t2-red) var(--t2-fill), #E6E1CC var(--t2-fill));
}
.t2-dial__range::-webkit-slider-thumb {
    -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: #fff;
    border: 6px solid var(--t2-red); box-shadow: 0 4px 12px rgba(28, 34, 12, .35);
}
.t2-dial__range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 6px solid var(--t2-red); }
.t2-dial__range:focus-visible { outline: 3px solid var(--t2-head); outline-offset: 6px; }
.t2-dial__ticks { display: flex; justify-content: space-between; width: min(560px, 100%); margin: .6rem auto 0; font-size: .85rem; color: var(--t2-muted); }
.t2-dial__ticks .is-on { color: var(--t2-red); font-weight: 800; }
.t2-dial .t2-center { margin-block-start: 1.4rem; }
.t2-dial__fine { margin-block-start: .8rem; font-size: .92rem; color: var(--t2-muted); }

.t2-tiers__fine { text-align: center; font-size: .9rem; color: #E9ECDF; margin-block-start: .6rem; }

/* ---------- who we are ---------- */
.t2-marks { display: flex; align-items: center; justify-content: center; gap: 1.4rem; }
.t2-marks img { height: 76px; width: auto; }

/* ---------- the tiers ---------- */
.t2-sec--dark { background: linear-gradient(160deg, var(--t2-wine) 0%, var(--t2-wine-2) 100%); color: #fff; }
.t2-ask { text-align: center; margin-block-end: 2rem; }
.t2-ask__l1 { color: var(--t2-rose); font-weight: 700; font-size: 1.1rem; margin-block-end: .4rem; }
.t2-ask h2 { font-size: clamp(1.7rem, 3.8vw, 2.4rem); color: #fff; }
.t2-tiers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: stretch; }
.t2-tiers li {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center;
    border: 1px solid rgba(255, 255, 255, .22); border-radius: 22px; padding: 1.6rem 1rem; background: rgba(255, 255, 255, .06);
}
.t2-tiers li.is-pick { background: rgba(255, 255, 255, .12); border-color: var(--t2-rose); }
.t2-tiers__tag {
    position: absolute; inset-block-start: -.8rem; background: var(--t2-red); color: #fff; font-size: .85rem; font-weight: 800;
    padding: .2rem .8rem; border-radius: 999px; border: 2px solid #fff;
}
.t2-tiers__price { font-size: 1.2rem; }
.t2-tiers__price b { font-size: 2.6rem; line-height: 1; }
.t2-tiers__who { color: var(--t2-rose); font-weight: 700; margin-block-end: .6rem; }
.t2-tiers .t2-btn { margin-block-start: auto; font-size: 1rem; padding: .75rem 1.4rem; }
.t2-other {
    font: inherit; font-weight: 700; color: #fff; background: none; border: 0; text-decoration: underline;
    text-underline-offset: 4px; cursor: pointer; padding: .4rem;
}
.t2-other:focus-visible { outline: 3px solid var(--t2-rose); outline-offset: 3px; }

/* ---------- footer ---------- */
.t2-foot { background: var(--t2-wine); color: #fff; text-align: center; }
.t2-foot__in { padding: 3rem 0 2.4rem; display: flex; flex-direction: column; align-items: center; gap: 1.4rem; }
.t2-foot__logo { background: #fff; border-radius: 16px; padding: .7rem 1.1rem; }
.t2-foot__logo img { height: 58px; width: auto; }
.t2-foot__in p { max-width: 640px; line-height: 1.7; color: #E9ECDF; }
.t2-foot__bar { background: #10140A; padding: .9rem 4vw; font-size: .9rem; color: #DCE0CF; }
.t2-foot__bar a { color: #fff; text-underline-offset: 3px; }

/* ---------- the floating button (CSS only, always visible) ---------- */
.t2-float { position: fixed; inset-inline-end: 20px; inset-block-end: 20px; z-index: 45; }
.t2-float .t2-btn { padding: .75rem 1.5rem; font-size: 1rem; }

/* ---------- mobile ---------- */
@media (max-width: 800px) {
    .t2 { font-size: 17px; }
    .t2-tiers { grid-template-columns: 1fr; gap: 1.4rem; }
    .t2-card__top { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .t2-card__lines { text-align: start; }
    .t2-float {
        inset-inline: 0; inset-block-end: 0; padding: .6rem 4vw calc(.6rem + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .96); box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, .25);
    }
    .t2-float .t2-btn { width: 100%; }
    .t2-foot__bar { padding-block-end: 5.5rem; }
}
@media (prefers-reduced-motion: reduce) { .t2-btn { transition: none; } .t2-btn:hover { transform: none; } }

/* ============================================================
   The hero of 29.10: month countdown, large display heading, Heebo.
   Dark background with the photo at the side on the Otzma page.
   ============================================================ */
@font-face {
    font-family: 'Heebo';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/fonts/heebo-var-latin.woff2) format('woff2');
}

.t2-cd { background: linear-gradient(90deg, #1C220C, #3F4E1B 50%, #1C220C); color: #fff; text-align: center; padding: .7rem 4vw .6rem; }
.t2-cd__in { display: flex; justify-content: center; gap: clamp(1rem, 4vw, 3rem); }
.t2-cd__note { font-size: .85rem; color: #D6C89A; margin-block-start: .2rem; letter-spacing: .04em; }

.t2-x { position: relative; overflow: hidden; background: #10140A; color: #fff; isolation: isolate; }
.t2-x__bg {
    position: absolute; inset-block: 0; inset-inline-end: 0; width: min(58%, 820px); height: 100%; object-fit: cover; object-position: 50% 20%;
    z-index: -2; filter: grayscale(.35) contrast(1.05);
}
.t2-x::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, #10140A 0%, #10140A 38%, rgba(16, 20, 10, .86) 55%, rgba(16, 20, 10, .35) 80%, rgba(16, 20, 10, .55) 100%),
                linear-gradient(0deg, rgba(16, 20, 10, .9), transparent 30%);
}
[dir=rtl] .t2-x::before { transform: scaleX(-1); }
.t2-x__in { width: min(1200px, 92vw); margin-inline: auto; padding: clamp(2.2rem, 6vw, 4.5rem) 0 clamp(2.6rem, 6vw, 4.8rem); max-width: none; }
.t2-x__in > * { max-width: 680px; }
.t2-x__h1 {
    font-family: 'Heebo', system-ui, sans-serif; font-weight: 800; color: #fff;
    font-size: clamp(2.2rem, 5.4vw, 4.1rem); line-height: 1.08; letter-spacing: -.01em; margin-block-end: 1.1rem;
}
.t2-x__num { color: #D9C27A; display: inline-block; }
.t2-x__sub { font-size: clamp(1.05rem, 2.2vw, 1.3rem); line-height: 1.6; color: #E9ECDF; margin-block-end: 1.8rem; }
.t2-btn--xl { font-size: clamp(1.08rem, 2.2vw, 1.35rem); padding: 1.15rem 2.4rem; box-shadow: 0 18px 40px -14px rgba(147, 174, 76, .75); }
@media (max-width: 800px) {
    .t2-cd__note { font-size: .75rem; }
    .t2-x__bg { width: 100%; height: 58%; inset-block-start: 0; inset-block-end: auto; opacity: .55; }
    .t2-x::before { background: linear-gradient(0deg, #10140A 0%, #10140A 52%, rgba(16, 20, 10, .55) 75%, rgba(16, 20, 10, .3) 100%); }
    .t2-x__in { padding-block-start: 2rem; text-align: center; }
    .t2-x__in > * { margin-inline: auto; }
    .t2-btn--xl { width: 100%; }
}
/* base.css zeroes the margin of every p and h inside .lp, so the hero spacing needs the stronger selector. */
.lp .t2-x__h1 { margin-block-end: 1.2rem; }
.lp .t2-x__sub { margin-block-end: 2rem; }
.lp .t2-cd__note { margin-block-start: .2rem; }
@media (max-width: 800px) {
    .t2-x__bg { height: 62%; opacity: .75; object-position: 50% 45%; }
    .t2-x::before { background: linear-gradient(0deg, #10140A 0%, #10140A 45%, rgba(16, 20, 10, .6) 68%, rgba(16, 20, 10, .25) 100%); }
}

/* ---------- 1b · "for them it is not over" ---------- */
.t2-never {
    background: #0D1108; color: #fff; padding: clamp(3rem, 8vw, 5.5rem) 0; text-align: center;
    background-image: radial-gradient(60% 50% at 50% 0%, rgba(147, 174, 76, .22), transparent 70%);
}
.lp .t2-never__kicker { font-family: 'Heebo', system-ui, sans-serif; font-weight: 800; color: #D9C27A; letter-spacing: .3em; font-size: 1rem; margin-block-end: .8rem; }
.lp .t2-never__h { font-family: 'Heebo', system-ui, sans-serif; font-weight: 800; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.1; color: #fff; margin-block-end: 1.6rem; }
.t2-never__body { max-width: 720px; margin-inline: auto; font-size: clamp(1.05rem, 2.2vw, 1.25rem); line-height: 1.7; color: #DCE0CF; }
.lp .t2-never__body p + p { margin-block-start: 1rem; }
.lp .t2-never__line {
    margin: 2rem auto 0; max-width: 720px; padding-block-start: 1.6rem; border-block-start: 1px solid rgba(255, 255, 255, .18);
    font-weight: 800; font-size: clamp(1.15rem, 2.6vw, 1.45rem); line-height: 1.5; color: #fff;
}
@media (max-width: 800px) { .t2-marks { flex-wrap: wrap; } }

/* ============================================================
   Heebo across the page, numbers included, and a clean hero (Ron, 29.10: "cleaner, clearer,
   let the message work"): heading, one sentence, button. #donate is the popup: its headings
   and labels switch to Heebo; popup.css keeps the fields and buttons on var(--font).
   ============================================================ */
.t2, .t2 .t2-btn, .t2 .t2-other, .t2 h1, .t2 h2, .t2 h3, #donate { font-family: 'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; }
.t2 b, .t2 h1, .t2 h2, .t2 h3 { font-variant-numeric: lining-nums; }

.t2-cd { padding: .55rem 4vw; background: #3F4E1B; }
.lp .t2-cd__in { display: flex; align-items: baseline; justify-content: center; gap: .25rem; flex-wrap: wrap; font-size: 1rem; color: #DCE0CF; }
.t2-cd__in b { font-size: 1.25rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.t2-cd__in span { margin-inline-end: .35rem; }
.lp .t2-cd__note { font-size: 1rem; margin: 0; margin-inline-end: .5rem; color: #DCE0CF; letter-spacing: 0; }

.t2-x__in { padding: clamp(3rem, 9vw, 6.5rem) 0; }
.t2-x__in > * { max-width: 600px; }
.lp .t2-x__h1 { font-weight: 800; font-size: clamp(2.3rem, 5.4vw, 4rem); line-height: 1.08; letter-spacing: -.02em; margin-block-end: 1.3rem; }
.t2-x__num { display: block; color: #D9C27A; }
.lp .t2-x__sub { font-size: clamp(1.15rem, 2.4vw, 1.4rem); line-height: 1.5; color: #E9ECDF; margin-block-end: 1.8rem; }
.t2-x__sub b { color: #fff; }
.t2-x .t2-btn--xl { padding: 1.1rem 2.6rem; }
@media (max-width: 800px) {
    .t2-x__in { padding: 2.4rem 0 2.8rem; }
    .t2-x__bg { height: 55%; }
    .t2-x::before { background: linear-gradient(0deg, #10140A 0%, #10140A 50%, rgba(16, 20, 10, .55) 75%, rgba(16, 20, 10, .2) 100%); }
    .lp .t2-x__h1 { margin-block-start: 11rem; }
    .t2-cd__in b { font-size: 1.1rem; }
}

/* Ron's hero photo (29.10): a portrait, the face in the upper third. */
.t2-x__bg { object-position: 50% 22%; filter: grayscale(.15) contrast(1.05); }
@media (max-width: 800px) { .t2-x__bg { object-position: 50% 18%; } }

/* ============================================================
   Otzma: a gold-sand button with dark olive text, on every background. Olive on olive sinks,
   so the button is light. #1C220C on #D9C27A: 9.6:1.
   ============================================================ */
.t2-btn { background: #D9C27A; color: #1C220C; border-color: #fff; box-shadow: 0 10px 26px -10px rgba(28, 34, 12, .55); }
.t2-btn:hover { background: #E6D294; color: #1C220C; }
.t2-btn--w { background: #fff; color: #2B3410; }
.t2-btn--w:hover { background: #F0EBDC; color: #1C220C; }
.t2-x .t2-btn--xl { box-shadow: 0 18px 40px -14px rgba(217, 194, 122, .45); }
.t2-tiers__tag { color: #1C220C; background: #D9C27A; }
.t2-cd { background: #2B3410; }
/* Hero without a photo (Otzma LaNefesh): an olive gradient and a faint texture of map lines. */
.t2-x--plain { background: radial-gradient(70% 90% at 85% 30%, #3F4E1B 0%, #1C220C 60%, #10140A 100%); }
.t2-x--plain::before { background: repeating-linear-gradient(135deg, rgba(214, 200, 154, .045) 0 2px, transparent 2px 22px); }
.t2-x--plain .t2-x__in > * { max-width: 760px; }
.t2-x__stat { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-block-end: 2rem; }
.t2-x__stat b { font-size: clamp(2.6rem, 6vw, 3.6rem); font-weight: 900; color: #D9C27A; line-height: 1; }
.t2-x__stat span { font-size: 1.05rem; color: #DCE0CF; max-width: 28ch; line-height: 1.4; }
.t2-logo-img { height: 68px; width: auto; }
.t2-foot__logo .t2-logo-img { height: 54px; }
@media (max-width: 800px) { .lp .t2-x--plain .t2-x__h1 { margin-block-start: 0; } }
@media (max-width: 800px) {
    .t2-x__stat { justify-content: center; text-align: center; flex-direction: column; align-items: center; gap: .3rem; }
    .t2-x__stat span { max-width: none; }
}

/* Hero with a photo (Otzma LaChayal, Ron's photo of 29.10): the soldier and the child from behind, in the doorway. */
.t2-x--photo { background: #10140A; }
.t2-x--photo .t2-x__bg { object-position: 50% 40%; filter: none; }
@media (max-width: 800px) {
    .t2-x--photo .t2-x__bg { height: 60%; opacity: .8; object-position: 50% 35%; }
    .lp .t2-x--photo .t2-x__h1 { margin-block-start: 12rem; }
}
.lp .t2-x__stat { margin-block-end: 2rem; }

/* The old page's inline LTR rule: the heart (and the popup's lock) after the text, on the
   inline-end side; the shared sheets put the icon first. */
.t2 .t2-btn > svg, #donate button > svg { order: 1; }