/* ===================================================================
   Democratim — display LP.  1440px design canvas, pixel-matched.
   Mandatory-font copy is rendered as outlined SVG (no web licence).
   =================================================================== */

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

:root{
  --navy:#1d316f;
  --blue:#7cd3f8;
  --red:#ef1a22;
  --white:#fff;
  /* brand shear + squash used on almost every block.
     matches Figma's matrix(1,0,0.156434,0.987688) — a forward lean */
  --skew: matrix(1, 0, 0.156434, 0.987688, 0, 0);
  --skew16: matrix(1, 0, 0.28675, 0.96, 0, 0);
  /* exact inverse of --skew. The Mandatory-font SVGs are exported from Figma
     with the shear already baked into their geometry; applying this to the
     <img> cancels the wrapper's --skew on the raster (so it is never sampled
     through a transform → stays crisp) while the coloured box still shears. */
  --unskew: matrix(1, 0, -0.158385, 1.012464, 0, 0);
  --rot: 1.5deg;
}

html,body{ margin:0; padding:0; }
body{
  background:var(--white);
  font-family:'Heebo', system-ui, sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:none; }
a{ color:inherit; }

#root{
  position:relative;
  width:100%;
  margin:0 auto;
  overflow-x:clip;          /* full-bleed slabs never cause a h-scrollbar */
}

/* full-bleed bands; centred 1440 content well */
.band{ position:relative; width:100%; }
.band > .inner{
  position:relative;
  width:1440px;
  margin:0 auto;
  height:100%;
}

.skew{ transform:var(--skew); }

/* pre-sheared Mandatory-font SVGs: undo the wrapper shear on the raster only
   (box stays a parallelogram, glyphs keep Figma's exact baked slant, crisp) */
.hero-title img,
.hero-sub img,
.hero-btn .btn__label,
.duknow__fact img,
.duknow__cta .btn__label,
.count__tag img,
.count__note,
.bar__pct svg,
.form__head img,
.form__submit .btn__label,
.mq-text,
.mq-star{        /* the stars are drawn upright in the design — not sheared */
  transform:var(--unskew);
  transform-origin:center;
}

/* ---------- generic coloured label boxes ---------- */
.box{ display:inline-flex; align-items:center; justify-content:center; }
.box--navy{ background:var(--navy); }
.box--white{ background:var(--white); }
.box--lightblue{ background:var(--blue); }

/* ---------- buttons — one shared style for להרשמה / בואו להשפיע / שליחה ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:9px; text-decoration:none; border:0; cursor:pointer;
  font:inherit; direction:ltr;          /* chevron left, label right */
}
.btn--red{
  background:var(--red);
  padding:14px 22px; min-width:180px;
  box-shadow:4px 4px 0 0 var(--white);  /* same hard white shadow on all three */
  /* `translate` (not `transform`) so it composes with the brand shear */
  transition:translate .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.btn--red:hover{                         /* brighter red + press into the shadow */
  background:#ff3b30;
  translate:2px 2px;
  box-shadow:2px 2px 0 0 var(--white);
}
.btn--red:active{                        /* fully pressed */
  background:#ff3b30;
  translate:4px 4px;
  box-shadow:0 0 0 0 var(--white);
}
.btn:focus-visible{
  outline:3px solid rgba(255,255,255,.7); outline-offset:3px;
}
.btn__chev{ width:34.1px; height:26.3px; flex:none; }
.btn__label{ width:auto; height:39px; } /* every label at the same cap height */

/* =====================================================================
   HERO
   ===================================================================== */
.band--hero{ height:728px; background:var(--navy); overflow:hidden; position:relative; z-index:4; }
.hero-bg{
  position:absolute; inset:0;
  background:url("../assets/img/hero-bg.webp") center/cover no-repeat;
  opacity:.15;
  mix-blend-mode:luminosity;
}
/* Five portraits stacked in one box, cross-faded by js/main.js. They vary in
   aspect (0.617-0.682) and all sit narrower than the box, so `contain` +
   a bottom anchor lines every one of them up on the same floor and centres
   them, rather than making them jump around as the rotation runs. */
.hero-people{
  position:absolute; left:155px; top:89px;
  width:476px; height:639px;
  aspect-ratio:476 / 639;      /* mobile sets width only and takes height here */
  z-index:2;
}
.hero-person{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain; object-position:bottom center;
  opacity:0; transition:opacity .9s ease;
}
.hero-person.is-on{ opacity:1; }
.hero-logo{
  position:absolute; left:566px; top:52px;
  width:274.96px; height:36.64px; z-index:3;
}

/* Figma 22:279 — an un-sheared 541×371.5 column, right-aligned, gap 24.
   Boxes get explicit sizes and the SVGs sit at natural size, centred: an
   <img>'s layout box is the SHEARED ink, which is wider than what --unskew
   actually paints, so sizing a box by padding alone comes out too big. */
.hero-cta{
  position:absolute; left:732px; top:191px; width:541px;
  display:flex; flex-direction:column; align-items:flex-end; gap:24px;
  direction:ltr; z-index:2;
}
/* The hero CTA is the page's primary action, so it deliberately breaks the
   "all three reds match" rule and runs ~28% larger. The other two stay matched
   to each other. */
.hero-btn{ padding:18px 28px; min-width:230px; gap:11px; }
.hero-btn .btn__chev{ width:43.7px; height:33.7px; }
.hero-btn .btn__label{ height:44.9px; }   /* 'התנדבו' at the same type size
                                            the old 'להרשמה' had (50px for its
                                            39px export; this one is 35px) */

.hero-cta__stack{ display:flex; flex-direction:column; align-items:flex-end; width:541px; }
.hero-title{ width:541px; height:204px; margin-bottom:-1px; }
.hero-title img{ width:540px; height:163px; }
.hero-sub{ width:407px; height:86px; }
.hero-sub img{ width:393px; height:57px; }

/* "רגע לפני הקלפי" badge — Figma 131:48, left of the rotating portrait.
   Coordinates are the export's own box (224×219 at 40,80 on the page),
   expressed against .hero-people (155,89). It lands with a stamp, then
   bobs gently so the eye catches it while the portraits cross-fade. */
.hero-badge{
  position:absolute; left:-114.74px; top:-9px;
  width:224px; height:219px; z-index:3;
  transform-origin:55% 55%;
  animation:badge-in .7s cubic-bezier(.2,1.6,.4,1) .5s both,
            badge-bob 5s ease-in-out 1.4s infinite;
}
@keyframes badge-in{
  from{ opacity:0; transform:scale(1.6) rotate(-14deg); }
  to  { opacity:1; transform:none; }
}
@keyframes badge-bob{
  0%, 100%{ transform:rotate(0deg) translateY(0); }
  50%     { transform:rotate(3deg) translateY(-6px); }
}

/* the "אמת" ballot notes. Hero: Figma 131:44 (155×221 at 104.9,515.4,
   −5.89°), against .hero-people; it tucks under the marquee like the
   design. Foot: Figma 131:62, beside the footer logo, cropped by the page
   bottom — .note-crop is that crop. */
.note{
  position:absolute; display:block;
  box-shadow:0 6px 16px rgba(0,0,0,.28);
}
.note--hero{
  left:-50.07px; top:426.36px; width:154.634px; height:220.826px;
  transform:rotate(-5.89deg); z-index:3;
}

/* =====================================================================
   MARQUEE
   ===================================================================== */
.marquee{
  position:absolute; top:674px; left:0;
  width:100%; height:130px; z-index:6; pointer-events:none;
  overflow:visible;         /* the rotated band + its stripes hang outside */
  direction:ltr;            /* seqs tile L→R so the -50% loop is seamless */
}
.marquee__bar{
  position:absolute; top:21px; left:-5%; width:110%;
  height:74px;
  background:var(--red);
  transform:rotate(1.5deg);   /* band drops toward the right, matching Figma */
}
/* Two white accent lines, 1033px each — NOT full-bleed. One runs along the
   bar's bottom edge on the left, the other along its top edge on the right,
   each overhanging the bar slightly. Anchored to the centre of the content
   well so the composition holds at any viewport width. */
.marquee__stripe{
  position:absolute; left:50%; width:1033px; height:8px;
  background:var(--white);
  transform:var(--skew16);
}
.marquee__stripe--a{ margin-left:-787px; top:71px; }
.marquee__stripe--b{ margin-left:-259px; top:-4px; }

.marquee__clip{
  position:absolute; inset:0; overflow:hidden;
  display:flex; align-items:center;
}
.marquee__track{
  display:flex; width:max-content;
  will-change:transform;
  animation:marquee 26s linear infinite;
}
.marquee__seq{
  display:flex; align-items:center; gap:17px;
  padding-right:17px;       /* keeps the rhythm across the loop seam, and keeps
                               each seq exactly half the track so -50% is seamless */
  transform:var(--skew);
}
.mq-unit{ display:flex; align-items:center; gap:17px; flex:none; }
.mq-star{ flex:none; width:34.83px; height:45.95px; }
.mq-text{ flex:none; width:192px; height:51px; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* =====================================================================
   LIGHT-BLUE SECTION
   ===================================================================== */
/* dedicated background layer: light-blue runs the whole way down, *behind*
   the navy slab's angled edge — no white sliver between the sections */
.blue-bg{
  position:absolute; left:0; width:100%;
  top:728px; height:760px;       /* runs past the navy slab's LOWEST top edge
                                    (y≈1390 even on a 4K viewport) so no white
                                    can show; the slab covers the rest */
  background:var(--blue); z-index:0;
}
/* z-order through the blue→navy transition:
   0 blue field · 1 blue-section art (boy, booth, fact) · 2 navy slab
   · 3 navy-section content (counter, form)                            */
.band--blue{ height:464px; position:relative; z-index:1; }
.band--blue > .inner{ overflow:visible; }

/* Fact box + button, right-aligned in a 419px column, gap 20 (Figma 97:902;
   the "הידעת?" tag was dropped in the October revision). The column leans
   about ITS centre, so left/top are solved from the design's bounding box
   centre (432.2, 257.7), not copied. The fact box is WIDER than the column
   (433 vs 419) and overhangs left, as in the design. */
.duknow{
  position:absolute; left:222.7px; top:125.4px; width:419.061px;
  display:flex; flex-direction:column; align-items:flex-end; gap:20px;
  direction:ltr; z-index:4;
}
.duknow__fact{
  width:433.337px; height:186.681px;
  box-shadow:-12.4px 13.4px 0 0 var(--navy);
}
.duknow__fact img{ width:414px; height:157px; }

/* Two booth snapshots (Figma 131:64), white-bordered prints with a small
   hard shadow, tilted +2.72° / −5.41°; the second overlaps the first.
   Boxes are Figma's un-rotated rects (363.9×249 / 362.4×248) at their
   solved centres. The photos are pre-cropped to Figma's framing.
   Effect: each print drops in onto the table (scaled up, over-rotated, then
   settles with a little bounce) as the section scrolls in, the parallax
   moves them at different depths, and hovering one straightens it and
   lifts it toward the viewer. */
.mid-photos{ position:absolute; inset:0; pointer-events:none; }
.mid-photo{ position:absolute; pointer-events:auto; }
.mid-photo--a{ left:837.7px; top:86.5px; width:363.87px; height:249.041px; z-index:2; --r:2.72deg; --r0:-6deg; }
.mid-photo--b{ left:1005.55px; top:211.48px; width:362.428px; height:248.054px; z-index:3; --r:-5.41deg; --r0:7deg; }
.mid-photo__img{
  display:block; width:100%; height:100%; object-fit:cover;
  border:5px solid var(--white);
  box-shadow:-3px 3px 0 0 rgba(22,32,63,.19);
  transform:rotate(var(--r));
  transition:transform .35s cubic-bezier(.2,1.2,.4,1), box-shadow .35s ease;
}
/* the drop: rides the page's .reveal (opacity + slide), adding the
   scale/over-rotation, which settles with an overshoot */
.js .mid-photo__img.reveal{ transform:rotate(var(--r0)) scale(1.18); }
.js .mid-photo__img.reveal.in{
  transform:rotate(var(--r));
  transition:opacity .5s ease, translate .6s ease,
             transform .9s cubic-bezier(.2,1.45,.45,1), box-shadow .35s ease;
}
.js .mid-photo__img.reveal.in.d2{ transition-delay:.18s, .18s, .18s, 0s; }
.mid-photo:hover{ z-index:5; }
.js .mid-photo:hover .mid-photo__img.in,
.mid-photo:hover .mid-photo__img{
  transform:rotate(0deg) scale(1.06);
  box-shadow:-10px 12px 0 0 rgba(22,32,63,.22);
  transition:transform .35s cubic-bezier(.2,1.2,.4,1), box-shadow .35s ease;
}

/* =====================================================================
   NAVY BAND (angled slab behind the counter + form)
   ===================================================================== */
.navy{
  position:absolute; left:0; width:100%;
  top:1248px; height:calc(952px + var(--grow, 0px));     /* the shortened midsection pulls the whole
                                    navy band up 408px; its stripes ride with
                                    it, keeping their offsets from the slab.
                                    Its bottom is the page's bottom — it
                                    is what sets the page's scrollHeight
                                    (53px shorter since the social row
                                    under the logo was dropped). */
  z-index:2;                 /* above the blue section's art — the slab crops
                                the volunteer's legs, as it does in Figma */
  overflow:hidden; pointer-events:none;
}
.navy__slab{
  position:absolute; left:-6%; top:32px; width:112%; height:calc(1200px + var(--grow, 0px));
  background:var(--navy);
  transform:rotate(1.4deg); transform-origin:top left;
}
/* Anchored to the centre of the 1440 content well, not to the viewport edge,
   so the gap between a stripe's inner end and the central text stays fixed at
   every width. They run off-screen outward on wider viewports. */
.navy__stripe{
  position:absolute; left:50%; height:12px; width:1035px; background:var(--white);
  transform:rotate(1.4deg) var(--skew16);
}
.navy__stripe--a{ margin-left:-1532px; top:26px;  margin-top:-6px; }
.navy__stripe--b{ margin-left:530px;   top:78px;  margin-top:-6px; }

/* navy band ends ~82px below the footer logo — no artboard whitespace after it */
/* --grow (set by js/main.js) is how far the registration form has outgrown the
   room the design gives it — e.g. 8 clusters plus the youth box. The band,
   its slab and the footer group below the form all move down by it; at rest
   it's 0 and nothing here differs from the artboard. */
.band--navy{ position:relative; z-index:3; height:calc(1080px + var(--grow, 0px)); margin-top:-72px; }
.band--navy > .inner{ overflow:visible; }

/* ---------- progress bar ----------
   Replaces the old sign-up counter. The tag + white box are ONE sheared plane
   (.count carries the shear), so the two boxes share an edge exactly as they
   do in Figma. Box geometry is Figma's own un-sheared rect (797×192, read off
   the export's <rect>, not its sheared bbox). */
.count{
  position:absolute; top:24px; left:50%;
  transform:translateX(calc(-50% + 7px)) var(--skew);
  display:flex; flex-direction:column; align-items:center; z-index:4;
}
.count__tag{
  width:264px; height:82px;
  position:relative; z-index:1;
  /* the shared shear already lands the tag left of the box centre, as in Figma */
}
.count__tag img{ width:200px; height:47px; }
.count__num{
  width:797px; height:auto;     /* was the design's fixed 192 — the label now
                                   fills the width and is taller than that box */
  flex-direction:column; align-items:stretch; justify-content:center;
  gap:18px; padding:16px 20px;
  box-shadow:10px 9px 0 0 var(--navy);
}

/* The track fills from the RIGHT — it's an RTL page, so progress grows the way
   the language reads. --pct is set on .count (inline in the markup, so the bar
   is already the right width with JS off) and animated by js/main.js. */
.bar{
  position:relative;
  height:88px; padding:5px;
  background:#a1a3a7; overflow:hidden;
  /* direction:ltr + flex-end pins the fill to the RIGHT edge. The page is
     dir="rtl", where flex-end resolves to the LEFT — which put the fill on
     the wrong side. Stating the direction is what makes this unambiguous. */
  display:flex; align-items:center; justify-content:flex-end; direction:ltr;
}
.bar__fill{
  height:100%; background:var(--red);
  width:calc(var(--pct, 0) * 1%);
}
/* Centred in the TRACK, not in the fill, so it stays legible at any value —
   the hard red offset behind the white glyphs is what carries it across the
   grey/red edge. Centring uses `translate` so it composes with --unskew. */
.bar__pct{
  position:absolute; left:50%; top:12px;
  translate:-50% 0;
  font:700 64px/0.8 'Heebo', sans-serif; color:var(--white);  /* no-JS fallback */
}
.bar__pct svg{ display:block; overflow:visible; }
/* Set to fill the box, so it lines up with the bar above it. That scales the
   line UP (~1.4x past the 68px the design set) — which is the point, but it
   means the box can no longer be the design's fixed 192px or the text spills
   out of it, hence height:auto on .count__num. */
.count__note{ width:100%; height:auto; }

/* ---------- form ---------- */
.form{
  position:absolute; top:358px; left:50%; transform:translateX(-50%);
  width:1042px;
  display:flex; flex-direction:column; align-items:center; gap:17px;
  z-index:4;
}
.form__head{ padding:13px 46px; transform-origin:center; }
.form__head img{ width:372px; height:auto; }

.form__row{ display:flex; gap:27px; width:938px; }
.form__row--2 .field{ flex:1; }
.form__row .field{ flex:1; }

.field{
  display:flex; flex-direction:column; align-items:flex-start; gap:9px;
  padding:9px; transform-origin:center;
}
.field__label{
  font-weight:500; font-size:24.3px; line-height:.78; color:var(--white);
  white-space:nowrap;
}
.field input{
  width:100%; height:60.31px; border:0; border-radius:0; background:var(--white);
  box-shadow:3.6px 3.6px 3.6px rgba(0,0,0,.25);
  padding:0 14px; font-family:'Heebo',sans-serif; font-size:20px; color:var(--navy);
  outline:none;
}
.field input:focus{ box-shadow:0 0 0 3px rgba(255,255,255,.55); }

.form__consent{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:938px; transform-origin:center;
}
.form__consent-text{ font-weight:500; font-size:21.6px; line-height:.78; color:var(--white); }
.form__consent-text a{ text-decoration:underline; text-underline-offset:2px; }
.form__consent-text b{ color:var(--red); font-weight:700; }
.checkbox{
  width:24.3px; height:24.3px; flex:none; background:var(--white);
  border-radius:5.4px; transform:skewX(-8.89deg) scaleY(1.01); cursor:pointer;
  position:relative;
}
.checkbox.is-checked::after{
  content:""; position:absolute; left:7px; top:2px;
  width:7px; height:14px; border:solid var(--navy); border-width:0 3px 3px 0;
  transform:rotate(45deg);
}

.form__submit{ margin-top:6px; transform-origin:center; }

/* ---------- multi-step flow (js/join.js) ----------
   The form is one <form> holding six .step sections; only one is ever
   visible. Everything below lives on the navy band, so the palette is
   white-on-navy with red for the one action per step. Boxes carry .skew
   like the rest of the page; their Heebo text leans with them, same as
   the original form's labels did. */

/* a class rule that sets `display` outranks the UA's [hidden] rule */
[hidden]{ display:none !important; }

.step{
  display:flex; flex-direction:column; align-items:center; gap:17px;
  width:100%;
}
.step__title{
  margin:0; color:var(--white); font-weight:800; font-size:30px; line-height:1.15;
  text-align:center;
}
.step__lede{
  margin:0; color:var(--white); font-weight:600; font-size:26px; line-height:1.3;
  text-align:center;
}
.step__lede b{ font-weight:800; direction:ltr; unicode-bidi:isolate; }
.step__body{
  margin:0; max-width:640px; color:rgba(255,255,255,.86);
  font-weight:400; font-size:18px; line-height:1.5; text-align:center;
}
.step__row{ display:flex; align-items:center; justify-content:center; gap:26px; }
.step__row--2{ gap:18px; }

/* quiet secondary actions — "שליחה חוזרת" / "שינוי מספר" */
.linkbtn{
  border:0; background:none; padding:2px 0; cursor:pointer;
  font-family:'Heebo',sans-serif; font-weight:500; font-size:18px; color:var(--white);
  text-decoration:underline; text-underline-offset:4px;
}
.linkbtn:hover{ color:#ffd7d8; }
.linkbtn:focus-visible{ outline:3px solid rgba(255,255,255,.7); outline-offset:3px; }

/* outlined counterpart to .btn--red, for the "or" choices */
.btn--line{
  padding:13px 26px; min-width:180px;
  background:none; border:3px solid var(--white); color:var(--white);
  font-family:'Heebo',sans-serif; font-weight:700; font-size:19px;
  transition:background-color .12s ease, color .12s ease;
}
.btn--line:hover{ background:var(--white); color:var(--navy); }
/* "שבצו אותי היכן שצריך" — the client wants it red, as loud as the main CTA */
.btn--alarm{ background:var(--red); border-color:var(--red); }
.btn--alarm:hover{ background:#ff3b30; border-color:#ff3b30; color:var(--white); }

/* ---------- progress rail ---------- */
.progress{
  display:flex; flex-direction:column; align-items:stretch; gap:7px;
  width:938px; transform-origin:center;
}
.progress__label{
  font-weight:500; font-size:16px; letter-spacing:.02em; color:rgba(255,255,255,.72);
}
.progress__track{
  display:flex; height:6px; background:rgba(255,255,255,.22);
}
.progress__fill{
  /* white, not red — the red bar just above this one is the campaign's
     signup counter, and two red rails in a row read as one thing */
  width:var(--p,20%); background:var(--white);
  transition:width .35s cubic-bezier(.4,0,.2,1);
}

/* ---------- fields ---------- */
.field__hint{
  font-weight:400; font-size:15px; line-height:1.3; color:rgba(255,255,255,.7);
}
.field input[aria-invalid="true"]{ box-shadow:0 0 0 3px var(--red); }
/* "Hebrew only" note, shown for a moment when typed characters are dropped.
   Hangs under the input rather than in the flow, so the row doesn't jump.
   (.field's shear transform makes it the containing block.) */
.field__note{
  position:absolute; top:calc(100% - 4px); right:9px; z-index:21;
  padding:3px 10px; background:var(--red); color:var(--white);
  font-weight:700; font-size:14px; line-height:1.35; white-space:nowrap;
  pointer-events:none;
}

.field--otp{ width:340px; flex:none !important; }
.otp-input{
  text-align:center; direction:ltr;
  font-size:30px !important; font-weight:700; letter-spacing:.35em; text-indent:.35em;
}
.field--house{ flex:0 0 220px !important; }
/* ID gets its own row, half the row's width, sitting at the start (right) */
.field--id{ flex:0 0 calc(50% - 13.5px) !important; }
.field__optional{ font-weight:400; font-size:15px; opacity:.6; margin-inline-start:4px; }

/* ---------- city / street combobox ---------- */
/* every sheared box is its own stacking context, so without this the
   consent row and the submit button — later in the DOM — paint over the
   open dropdown. */
.combo{ position:relative; z-index:20; }
.combo__list{
  position:absolute; z-index:20; top:100%; right:9px; left:9px;
  margin:2px 0 0; padding:0; list-style:none;
  max-height:246px; overflow-y:auto;
  background:var(--white); box-shadow:3.6px 3.6px 3.6px rgba(0,0,0,.25);
}
.combo__opt{
  padding:10px 14px; cursor:pointer;
  font-size:18px; line-height:1.2; color:var(--navy);
}
.combo__opt:hover,
.combo__opt[aria-selected="true"]{ background:var(--blue); }
.combo__opt mark{ background:none; color:var(--red); font-weight:700; }
.combo__none{ padding:10px 14px; font-size:17px; color:#6b7280; }

/* ---------- shifts ---------- */
.shifts{ border:0; margin:0; padding:0; width:938px; }
.shifts .field__label{ padding:0 9px 11px; }
.shifts__opts{ display:flex; flex-wrap:wrap; gap:14px; }
.shift{
  position:relative; cursor:pointer; transform-origin:center;
  border:3px solid var(--white); padding:11px 24px;
  transition:background-color .12s ease, color .12s ease;
}
.shift input{ position:absolute; opacity:0; width:0; height:0; }
.shift span{ font-weight:700; font-size:19px; line-height:1; color:var(--white); }
.shift:hover{ background:rgba(255,255,255,.14); }
.shift:has(input:checked){ background:var(--white); }
.shift:has(input:checked) span{ color:var(--navy); }
.shift:has(input:focus-visible){ outline:3px solid rgba(255,255,255,.7); outline-offset:3px; }

/* ---------- cluster picker ---------- */
.clusters{
  list-style:none; margin:0; padding:0; width:938px;
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
.cluster{
  width:100%; border:0; cursor:pointer; text-align:right;
  display:flex; flex-direction:column; align-items:flex-start; gap:5px;
  padding:17px 21px; background:var(--white);
  box-shadow:6px 6px 0 0 var(--blue);
  transform:var(--skew); transform-origin:center;
  transition:translate .12s ease, box-shadow .12s ease;
}
.cluster:hover{ translate:3px 3px; box-shadow:3px 3px 0 0 var(--red); }
.cluster:focus-visible{ outline:3px solid var(--white); outline-offset:4px; }
.cluster__name{ font-weight:800; font-size:21px; line-height:1.15; color:var(--navy); }
.cluster__meta{ font-weight:400; font-size:16px; line-height:1.3; color:#4b5563; }
.cluster__dist{ font-weight:700; font-size:15px; color:var(--red); }
/* webhook 4's votersPoll — the visitor's own polling station */
.cluster__mine{
  padding:2px 9px; background:var(--navy); color:var(--white);
  font-weight:700; font-size:14px; line-height:1.4;
}
/* "show the other 4" — quiet, it's secondary to picking one of the first 4 */
.clusters__more{ font-size:20px; font-weight:700; margin-top:-2px; }

/* Young Democrats patrol opt-in. Meant to be noticed before a cluster is
   picked (picking one moves on), so it sits above the cards, in light blue
   with the red offset shadow — louder than anything else on this step. */
.youth{
  position:relative; display:flex; align-items:center; gap:16px;
  width:938px; padding:18px 26px; cursor:pointer;
  background:var(--blue); box-shadow:6px 6px 0 0 var(--red);
  transform-origin:center;
}
.youth input{ position:absolute; opacity:0; width:0; height:0; }
.youth__box{
  flex:none; position:relative; width:30px; height:30px;
  background:var(--white); border:3px solid var(--navy);
}
.youth input:checked + .youth__box{ background:var(--navy); }
.youth input:checked + .youth__box::after{
  content:""; position:absolute; left:8px; top:2px; width:8px; height:15px;
  border:solid var(--white); border-width:0 3.5px 3.5px 0; transform:rotate(45deg);
}
.youth input:focus-visible + .youth__box{ outline:3px solid var(--white); outline-offset:3px; }
.youth__text{ font-weight:800; font-size:22px; line-height:1.25; color:var(--navy); }

.clusters__empty{
  margin:0; color:rgba(255,255,255,.8); font-size:19px; text-align:center;
}

/* ---------- finish ---------- */
.step--done{ gap:13px; }
.done-extra{
  display:flex; flex-direction:column; gap:7px;
  color:var(--white); font-size:18px; line-height:1.5; text-align:center;
}
.done-extra a{ color:var(--white); text-decoration:underline; text-underline-offset:3px; }
.done-extra a.done-extra__wa{ align-self:center; margin-top:10px; text-decoration:none; }
/* WhatsApp group — WhatsApp's own green (a shade deeper, for the white text),
   with the same hard white shadow as the red CTA. Label then icon under
   .btn's ltr, so the icon lands on the right, where RTL starts reading. */
.btn--wa{
  padding:13px 24px; gap:11px;
  background:#1fb855; color:var(--white);
  font-family:'Heebo',sans-serif; font-weight:700; font-size:19px;
  box-shadow:4px 4px 0 0 var(--white);
  transition:background-color .12s ease, translate .12s ease, box-shadow .12s ease;
}
.btn--wa svg{ flex:none; width:26px; height:26px; fill:currentColor; }
.btn--wa:hover{ background:#25d366; translate:2px 2px; box-shadow:2px 2px 0 0 var(--white); }
.btn--wa:focus-visible{ outline:3px solid var(--white); outline-offset:4px; }

/* ---------- error + busy ---------- */
.flow-error{
  margin:0; padding:10px 20px; background:var(--red); color:var(--white);
  font-weight:700; font-size:18px; line-height:1.3; text-align:center;
  transform:var(--skew); transform-origin:center;
}
.loading{
  position:fixed; inset:0; z-index:999;
  display:flex; align-items:center; justify-content:center;
  background:rgba(29,49,111,.55);
}
.spinner{
  width:46px; height:46px; border-radius:50%;
  border:5px solid rgba(255,255,255,.3); border-top-color:var(--white);
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){
  .spinner{ animation-duration:2.4s; }
  .progress__fill{ transition:none; }
}

.navy-logo{
  position:absolute; top:calc(952px + var(--grow, 0px)); left:50%; transform:translateX(-50%);
  width:274.96px; height:36.64px; z-index:4;
}
.note-crop{
  position:absolute; left:1150px; top:calc(850px + var(--grow, 0px));
  width:240px; height:230px; overflow:hidden; z-index:4; pointer-events:none;
}
/* 146×209 at 7.3°, bottom ~25px under the page edge (Figma 131:62) */
.note--foot{
  left:47.3px; top:46.4px; width:146.2px; height:208.7px;
  transform:rotate(7.3deg);
}

.footnote{
  position:absolute; top:calc(1003px + var(--grow, 0px)); left:50%; transform:translateX(-50%);
  width:100%; text-align:center; z-index:4;
  font-size:13px; line-height:1.7; color:rgba(255,255,255,.55);
}
.footnote p{ margin:0; }
.footnote a{ color:rgba(255,255,255,.8); text-decoration:underline; text-underline-offset:2px; }
.footnote a:hover{ color:#fff; }

/* =====================================================================
   Scale-down wrapper state (JS sets the inline transform / position)
   ===================================================================== */
#root.is-scaled{ position:absolute; top:0; }

/* parallax — uses the independent `translate` property so it composes
   with each element's own `transform` (skew / rotate) */
.parallax{ translate:0 var(--px, 0); }

/* reveal-on-scroll — `translate`-based so it never clobbers `transform`.
   Only armed when JS is running (html.js), so a JS/IO failure can't leave
   content stuck invisible. */
.js .reveal{ opacity:0; translate:0 22px; }
.js .reveal.in{ opacity:1; translate:0 0; transition:opacity .6s ease, translate .6s ease; }
.js .reveal.d1{ transition-delay:.06s; }
.js .reveal.d2{ transition-delay:.12s; }
.js .reveal.d3{ transition-delay:.18s; }

@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:1; translate:0 0; }
  .parallax{ translate:0 0 !important; }
  .marquee__track{ animation:none; }
  .btn--red{ transition:background-color .12s ease; }
  .btn--red:hover, .btn--red:active{ translate:0 0; box-shadow:4px 4px 0 0 var(--white); }
  .btn--wa:hover{ translate:0 0; box-shadow:4px 4px 0 0 var(--white); }
  .hero-badge{ animation:none; }
}

/* =====================================================================
   MOBILE  ( < 900px )
   The desktop 1440 canvas is a fixed absolutely-positioned layout; below
   900px everything reflows into a single centred column. The brand shear
   is kept on the individual label boxes (their SVGs are baked to the 9°
   angle) but moved OFF the tall column wrappers, and the rotations on the
   marquee / navy edge are eased.
   ===================================================================== */
@media (max-width:899px){
  /* --gut is THE page margin: every block's visual edge — sheared corners
     included — is meant to land on it.
     A sheared group's bbox is wider than its layout box by ~0.078 x the
     group's HEIGHT on each side. That overhang is a near-constant number of
     px (heights barely move with viewport width), so each group is inset with
     `calc(100% - Npx)`, not a percentage — a percentage inset would give a
     different visual margin at every width.
     Each N below is set to that block's MEASURED total overhang, so its bbox
     comes out exactly the content-box width and the visual margin is --gut
     itself — change --gut and every block follows. Where a group's widest
     members sit at different heights (the הידעת pair, the counter) the lean
     is off-centre, so a small margin-right recentres the bbox. */
  :root{ --gut:24px; }

  #root{ width:100%; }
  #root.is-scaled{ position:static; transform:none; left:auto; width:100%; }
  /* full-bleed section backgrounds, but the content column is capped so the
     type doesn't balloon on the wide end of the range (600–899px) */
  .band > .inner{
    width:100%; max-width:500px; height:auto; margin:0 auto; padding:0 var(--gut);
  }
  .parallax{ translate:0 0 !important; }

  /* ---------------- HERO ---------------- */
  /* bottom / top padding here is the marquee's breathing room: the bar still
     butts both sections (no white seam) — it's the CONTENT that's held off it */
  .band--hero{ height:auto; padding:30px 0 38px; }
  .band--hero > .inner{
    display:flex; flex-direction:column; align-items:center; gap:18px;
  }
  .hero-logo{ position:static; order:1; width:200px; height:auto; }
  /* relative, NOT static: the portraits inside are absolutely positioned, so
     going static hands them .band--hero as their containing block and they
     render at its width instead of the box's */
  .hero-people{
    position:relative; left:auto; top:auto;   /* reset the desktop 155/89 —
                                                 inert while static, live once
                                                 positioned again */
    order:2; width:53%; height:auto; margin-bottom:-26px;
  }
  /* Shear the whole CTA as ONE unit (as on desktop), not box-by-box: sheared
     separately, each box leans about its own centre and they stack dead in
     line; sheared together, the title slides left and the button right, so
     the trio reads as a single sheared block.
     ~215px tall → ~17px of overhang each side (title's top-left, button's
     bottom-right), so inset 34px to land both on --gut. */
  /* badge + ballot keep their desktop relation to the portrait, in % of
     its box (476×639) so they scale with it; the badge runs a bit larger
     than a straight scale-down so its text stays legible */
  .hero-badge{ left:-32%; top:-3%; width:58%; height:auto; }
  .note--hero{ left:-12%; top:62%; width:34%; height:auto; aspect-ratio:154.634 / 220.826; }
  .hero-cta{
    position:static; order:3; left:auto; top:auto;
    width:calc(100% - 36px); align-self:center;
    transform:var(--skew); transform-origin:center;
    align-items:flex-end; gap:14px;
  }
  .hero-cta__stack{ width:100%; align-items:flex-end; }
  .hero-title,
  .hero-sub{ height:auto; transform:none; }
  .hero-title{ width:100%; padding:13px 14px; margin-bottom:0; }
  .hero-title img{ width:100%; height:auto; }
  .hero-sub{ width:78%; padding:10px 14px; }   /* shorter line since 'בואו לדוכני…' */
  .hero-sub img{ width:100%; height:auto; }
  .hero-btn{
    align-self:flex-end; transform:none;
    padding:15px 23px; gap:9px;
  }
  .hero-btn .btn__chev{ width:33px; }
  .hero-btn .btn__label{ height:34px; }

  /* buttons: trimmed so the longest label ("בואו להשפיע") clears the page
     edges inside the shrunk columns */
  .btn--red{ min-width:0; padding:12px 18px; gap:7px; }
  .btn__chev{ width:26px; height:auto; }
  .btn__label{ height:30px; }

  /* ---------------- MARQUEE ---------------- */
  /* The bar IS the divider between the navy hero and the light-blue section:
     no white gap above or below. The container carries navy-over-blue split
     at its midline so the 1° tilt's corner slivers fill with the adjacent
     section colour and the seam is invisible. */
  /* stays POSITIONED (in flow, but relative) so z-index still applies — as
     static it painted under .band--hero (z4) and .band--blue (z1), which
     covered the stripe overhang and made the lines look cropped */
  .marquee{
    position:relative; top:0; left:0;   /* reset the desktop top:674px — inert
                                           while static, live once positioned */
    z-index:7; height:auto; margin:0; overflow:visible;
    background:linear-gradient(to bottom, var(--navy) 50%, var(--blue) 50%);
  }
  .marquee__bar{
    position:relative; top:0; left:-5%; width:110%; height:60px;
    transform:rotate(1deg);
  }
  .marquee__clip{ position:absolute; inset:0; }
  /* Like desktop: two ~two-thirds-width accent lines that ride the bar's
     rotation (no separate shear) — one straddling the top edge pushed to the
     right, one straddling the bottom edge pushed to the left, each poking a
     few px past the bar onto the section above / below, and clear of the
     centred text. */
  .marquee__stripe{
    width:66%; height:6px; margin:0; transform:none;
  }
  .marquee__stripe--a{ left:-2%; right:auto; top:auto; bottom:-4px; }
  .marquee__stripe--b{ left:auto; right:-2%; top:-4px; bottom:auto; }
  .marquee__seq{ gap:16px; padding-right:16px; }
  .mq-unit{ gap:16px; }
  .mq-star{ width:20px; height:auto; }
  .mq-text{ width:138px; height:auto; }

  /* ---------------- LIGHT-BLUE SECTION ---------------- */
  .blue-bg{ display:none; }
  /* Bottom padding is deep because the progress block's tag is pulled up into
     it — see the .count rule below; what's left over is the gap between the
     photo and that tag. */
  .band--blue{ background:var(--blue); height:auto; padding:38px 0 114px; }
  .band--blue > .inner{
    display:flex; flex-direction:column; align-items:center; gap:24px;
  }
  /* the two prints overlap below the text block, staggered like desktop:
     first one up-left, second down-right on top of it */
  .mid-photos{
    position:relative; inset:auto; order:2; pointer-events:auto;
    width:100%; height:auto; aspect-ratio:342 / 268; margin:4px 0 -30px;
  }
  .mid-photo{ translate:0 0 !important; }
  .mid-photo--a{ left:2%; top:0; width:68%; height:auto; aspect-ratio:363.87 / 249.041; }
  .mid-photo--b{ left:auto; right:2%; top:auto; bottom:0; width:68%; height:auto; aspect-ratio:362.428 / 248.054; }
  .mid-photo__img{ border-width:4px; }

  /* shear the pair as ONE unit (as on desktop), not box-by-box — sheared
     together the fact box and button stagger and read as one sheared block.
     Dropping the "הידעת?" tag barely changed the inset: the overhang is set
     by the two boxes that remain (~31px total), and the button, at the very
     bottom, still leans further right than the fact box leans left — hence
     the split inset via margin-right rather than a centred one. */
  .duknow{
    position:static; left:auto; top:auto; order:1;
    width:calc(100% - 31px); max-width:none; margin-right:8px;
    transform:var(--skew); transform-origin:center;
    align-items:flex-end; gap:14px;
  }
  .duknow__fact{
    width:100%; height:auto; padding:22px 18px;
    box-shadow:-7px 8px 0 0 var(--navy); transform:none;
  }
  .duknow__fact img{ width:100%; height:auto; }
  .duknow__cta{ align-self:flex-end; transform:none; }

  /* ---------------- NAVY SECTION ---------------- */
  .navy{ display:none; }                  /* replaced by the ::before wedge */
  .band--navy{
    position:relative; z-index:1; height:auto; margin-top:0;
    background:var(--navy); padding:0 0 40px;   /* .count's negative margin
                                                   supplies the top space */
  }
  .band--navy::before{                    /* eased diagonal navy edge */
    content:""; position:absolute; left:-9%; right:-9%; top:-26px; height:64px;
    background:var(--navy); transform:rotate(1.4deg);
  }
  .band--navy > .inner{
    display:flex; flex-direction:column; align-items:center; gap:28px;
  }

  /* Counter — keeps the DESKTOP composition: a wide short white box with the
     label on the LEFT and the number on the RIGHT (desktop's direction:ltr
     does the ordering), tag overlapping above. Stacking them made a tall
     awkward block that read nothing like the design. Widths are % of the
     box's content so the pair scales with the column; the number keeps a
     bigger share than on desktop so it still carries at phone size.
     ~130px tall → ~10px overhang each side. */
  /* Pulled up so the navy "עד כה נרשמו" tag clears the section edge and reads
     against the LIGHT BLUE, with the white box straddling the seam — the same
     relationship it has on desktop. Sitting inside the band it was navy-on-navy
     and only the white text showed.
     position:relative + z-index is required, not cosmetic: the ::before wedge
     is absolutely positioned, so it paints above static content and would
     cover the tag once the tag moves up into it. */
  .count{
    position:relative; z-index:2; left:auto; top:auto;
    width:calc(100% - 17px); margin-right:5px;   /* box sits low in the group,
                                                    so it leans right — recentre */
    margin-top:-96px;
    transform:var(--skew); transform-origin:center; align-items:center;
  }
  .count__tag{ width:auto; height:auto; padding:6px 24px; }
  .count__tag img{ width:150px; height:auto; }
  .count__num{
    width:100%; height:auto; gap:10px;
    padding:12px 12px; box-shadow:6px 5px 0 0 var(--navy);
  }
  .bar{ height:52px; padding:4px; }
  .bar__pct{ top:8px; font-size:38px; }   /* centres the ink in the 52px track */
  .bar__pct svg{ width:auto; height:40px; }

  /* form — every field on its own row. Each .field carries its own shear
     (~95px tall → ~7px per side), so the form is inset 15px and the fields
     run the full width inside it. */
  .form{
    position:static; left:auto; top:auto; transform:none;
    width:calc(100% - 14px); max-width:none; gap:16px;
  }
  .form__head{ padding:12px 32px; }
  .form__head img{ width:220px; height:auto; }
  .form__row,
  .form__row--2{ flex-direction:column; width:100%; gap:16px; }
  .field{ width:100%; padding:7px 0; }
  .field__label{ font-size:16px; }
  .field input{ height:52px; font-size:16px; }
  /* nowrap keeps the checkbox beside the text; the text wraps inside instead
     of the checkbox breaking onto a line of its own */
  .form__consent{
    width:calc(100% + 10px);   /* short row → little overhang; widened so its
                                  edges match the much taller fields' */
    flex-wrap:nowrap; align-items:center;
    justify-content:flex-start; gap:9px; padding:0;
  }
  .form__consent-text{ font-size:13.5px; line-height:1.45; }
  .form__submit{ align-self:center; margin-top:4px; }

  /* multi-step flow — same inset logic: unsheared blocks run the form's full
     width, sheared ones (.shift, .cluster, .flow-error) carry their own
     overhang and so sit a touch narrower. */
  .step{ gap:14px; width:100%; }
  .step__title{ font-size:21px; }
  .step__lede{ font-size:18px; line-height:1.35; }
  .step__body{ font-size:14.5px; }
  .step__row{ gap:18px; flex-wrap:wrap; }
  .step__row--2{ flex-direction:column; gap:12px; width:100%; }
  .step__row--2 .btn--line{ width:100%; }
  .linkbtn{ font-size:15px; }
  .btn--line{ min-width:0; padding:11px 20px; font-size:16px; }

  .progress{ width:100%; gap:6px; }
  .progress__label{ font-size:13.5px; }
  .progress__track{ height:5px; }

  .field__hint{ font-size:13px; }
  .field--otp{ width:100%; }
  .otp-input{ font-size:26px !important; letter-spacing:.3em; text-indent:.3em; }
  .field--house{ flex:none !important; }
  .field--id{ flex:none !important; }
  .combo__list{ right:0; left:0; max-height:210px; }
  .combo__opt{ padding:9px 12px; font-size:16px; }

  .shifts{ width:100%; }
  .shifts .field__label{ padding:0 0 9px; }
  .shifts__opts{ gap:11px 10px; padding:0 6px; }
  .shift{ border-width:2px; padding:9px 16px; }
  .shift span{ font-size:15px; }

  .clusters{ width:calc(100% - 8px); grid-template-columns:1fr; gap:15px; }
  .cluster{ padding:13px 16px; box-shadow:5px 5px 0 0 var(--blue); }
  .cluster__name{ font-size:17px; }
  .cluster__meta{ font-size:14px; }
  .cluster__dist{ font-size:13.5px; }
  .cluster__mine{ font-size:12.5px; padding:1px 8px; }
  .clusters__empty{ font-size:15px; }
  .clusters__more{ font-size:16px; }
  .youth{ width:calc(100% - 8px); padding:13px 16px; gap:12px; box-shadow:5px 5px 0 0 var(--red); }
  .youth__box{ width:26px; height:26px; }
  .youth input:checked + .youth__box::after{ left:7px; top:1px; width:7px; height:13px; border-width:0 3px 3px 0; }
  .youth__text{ font-size:16px; }

  .done-extra{ font-size:15px; }
  .btn--wa{ padding:11px 18px; gap:9px; font-size:16px; }
  .btn--wa svg{ width:22px; height:22px; }
  .flow-error{ font-size:15px; padding:9px 16px; max-width:calc(100% - 12px); }
  .spinner{ width:38px; height:38px; border-width:4px; }

  .navy-logo{
    position:static; left:auto; top:auto; transform:none;
    width:196px; height:auto; margin:4px auto 0;
  }
  /* the foot ballot sits whole beside the logo, bottom-right — the footer
     text below spans nearly the full width on a phone, so it can't bleed
     off the edge the way it does on desktop */
  .note-crop{ left:auto; right:6px; top:auto; bottom:52px; width:84px; height:108px; }
  .note--foot{ left:13px; top:9px; width:60px; height:auto; aspect-ratio:146.2 / 208.7; }
  .footnote{
    position:static; left:auto; top:auto; transform:none;
    margin-top:-4px; font-size:12px; padding:0;   /* .inner already gutters it */
  }
}

/* very small phones — trim the gutter a little, but keep the blocks' own
   insets: they're driven by block height, which barely changes down here */
@media (max-width:380px){
  :root{ --gut:18px; }
}