*{box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-bottom, 75px) + 16px);}
body{margin:0;background:#FBF5E9;color:#14151C;font-family:'Archivo',sans-serif;}
a{color:#2A3BD0;text-decoration:none;}
a:hover{color:#1B2694;}
::selection{background:#C6CEF4;color:#14151C;}
input::placeholder{color:#8C877D;}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--r,0deg));}50%{transform:translateY(-14px) rotate(var(--r,0deg));}}
@keyframes floatyB{0%,100%{transform:translateY(0) rotate(var(--r,0deg));}50%{transform:translateY(12px) rotate(var(--r,0deg));}}
@keyframes nudge{0%,100%{transform:translateX(0);}50%{transform:translateX(8px);}}
/* shared fluid container: MPC model */
.wrap{width:100%;max-width:2250px;margin-left:auto;margin-right:auto;padding-left:40px;padding-right:40px;}
@media (max-width:900px){.wrap{padding-left:calc(24px + (100vw - 600px)*16/300);padding-right:calc(24px + (100vw - 600px)*16/300);}}
@media (max-width:600px){.wrap{padding-left:24px;padding-right:24px;}}
/* Anchor-scroll offset is handled once, container-side, by html{scroll-padding-top}
   above (references the nav's real height via --nav-bottom), so individual scroll
   targets need no per-element scroll-margin. */
@media (max-width:900px){.stack900{grid-template-columns:1fr !important;}.flip-img{order:0 !important;}}
.flip-img{order:2;}
.cA-wrap{display:grid;grid-template-columns:minmax(0,0.86fr) minmax(0,1.3fr);gap:clamp(16px,1.6vw,26px);align-items:start;}
.cA-right{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,1.6vw,26px);}
.cB-band{position:relative;min-height:clamp(340px,40vw,540px);overflow:hidden;}
/* Band 01 headline: break "Single Jews" / "are hard to find." on mobile only.
   The <br> is inert above 600px, so the line flows as one there. */
.hb1-break{display:none;}
@media(max-width:600px){.hb1-break{display:inline;}}
.cC-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,72px) clamp(24px,3vw,56px);align-items:start;}
.cC-unit{position:relative;}
.cC-photo{border:7px solid #FBF5E9;border-radius:9px;overflow:hidden;box-shadow:0 26px 54px -18px rgba(10,12,40,0.55);}
.cC-note{position:relative;z-index:2;width:86%;margin-top:-15%;background:#FBF5E9;border-radius:12px;padding:clamp(16px,1.3vw,22px) clamp(18px,1.4vw,24px);box-shadow:0 18px 38px -14px rgba(10,12,40,0.5);}
@media(max-width:900px){.cA-wrap{grid-template-columns:1fr;}.cA-right{grid-template-columns:1fr;}.cB-band{min-height:78vw;}.cC-unit{transform:rotate(0deg) translateY(0) !important;}.cC-note{margin-top:-11%;}}
@media(max-width:600px){.cC-grid{grid-template-columns:1fr;}.cC-note{width:92%;margin-top:-9%;}}
.jbub{position:relative;font-family:'Archivo',sans-serif;font-size:clamp(14px,1vw,16px);line-height:1.45;padding:14px 17px;}
.jbub.rep{background:#FBF5E9;color:#14151C;border-radius:16px 16px 16px 5px;box-shadow:0 10px 26px -14px rgba(10,12,40,0.5);}
.jbub.rep::before{content:"";position:absolute;left:-6px;bottom:0;width:16px;height:16px;background:#FBF5E9;border-bottom-right-radius:14px;clip-path:polygon(100% 0,100% 100%,0 100%);}
.jbub.mem{background:#C6CEF4;color:#14151C;border-radius:16px 16px 5px 16px;box-shadow:0 10px 26px -14px rgba(10,12,40,0.4);}
.jbub.mem::before{content:"";position:absolute;right:-6px;bottom:0;width:16px;height:16px;background:#C6CEF4;border-bottom-left-radius:14px;clip-path:polygon(0 0,100% 100%,0 100%);}
.jmsg{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease;}
.jmsg.in{opacity:1;transform:none;}
@keyframes jtype{0%,60%,100%{transform:translateY(0);opacity:.45;}30%{transform:translateY(-4px);opacity:1;}}
.jdot{width:7px;height:7px;border-radius:50%;background:rgba(20,21,28,0.55);display:inline-block;animation:jtype 1.3s ease-in-out infinite;}
.hero-img{height:auto;min-height:0;}
@media (max-width:900px){.hero-img{position:static !important;height:auto;inset:auto;}}
/* Below 900px the nav is logo + Join now only: hide the three text links (the
   Join now button stays, it lives in .nav-desktop too). Desktop (>=900) shows
   the full nav unchanged. The mobile Menu button and overlay are removed from
   the markup, so no toggle rule is needed. */
@media (max-width:899.98px){.nav-text-link{display:none;}}

/* Hover states (were `style-hover` attributes in the design canvas, which the
   canvas runtime applied as inline styles). !important is required: the base
   `background` is an inline style on each control and would otherwise win. */
.btn-accent:hover{background:#F7D6B8 !important;transform:translateY(-1px);}
.btn-primary:hover{background:#1B2694 !important;transform:translateY(-1px);}

/* ---- Hero containment ----------------------------------------------------
   Everything in the blue panel is sized against the panel, never against the
   viewport. The panel is a fixed-height flex box (flex:1 of a 100vh-24px
   container) with overflow:hidden, so anything taller than it gets centred and
   clipped off BOTH edges — which is how the headline used to disappear.

   The nav is fixed and overlays this panel, so --nav-h (how far the nav reaches
   into the panel, measured in JS against the panel's fill) is reserved at the
   top. What is left — nav's bottom edge down to the panel's bottom edge — is
   THE reference: the headline and image are one group centred in it.

   --hero-inset is the 12px gutter the hero already works in (the nav's own
   `top`, and the hero .wrap's padding). Applying it to both ends of the region
   means the space above the headline and below the image is the same value plus
   an equal share of any slack, so the group always reads centred. */
/* Hero shell height: at least the viewport, but allowed to GROW so a short
   screen scrolls instead of crushing the image (see the mobile image floor).
   dvh tracks iOS Safari's collapsing toolbar (the visible height); the plain vh
   line is the fallback for browsers without dvh. Was a fixed `height:100vh`,
   which on iOS is the toolbar-hidden (larger) height — taller than what's on
   screen, which pushed the form below the fold and squeezed the panel. */
.hero-shell{
  min-height:calc(100vh - 24px);
  min-height:calc(100dvh - 24px);
}
/* Desktop: the cobalt panel fills the shell and may shrink freely (min-height:0),
   so the image caps at the region. Mobile override (media query) sets
   min-height:auto so it won't shrink below its floored content — that's what
   lets the shell grow and the page scroll instead of clipping the picture. */
.hero-cobalt{flex:1;min-height:0;}
.hero-inner{
  --hero-pad: clamp(24px,4vw,56px);
  --hero-inset: 12px;
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding: calc(var(--nav-h, 62px) + var(--hero-inset)) var(--hero-pad) var(--hero-inset);
}
/* Definite height = the region. The group is sized by its contents and centred
   in it (align-content), rather than stretched to fill it. */
.hero-grid{
  display:grid;
  align-items:center;
  align-content:center;
  gap:clamp(24px,3vw,56px);
  flex:1;
  min-height:0;
}
/* Fluid preferred height, hard-capped at the region (100% resolves against the
   grid, whose height IS the region) so it can never leave the panel. */
.hero-img{height:min(clamp(300px,60vh,620px), 100%);height:min(clamp(300px,60dvh,620px), 100%);}
.hero-img img{height:100%;width:100%;object-fit:contain;}
@media (max-width:900px){
  /* Stacked: a true vertical column — headline at its intrinsic height, image
     below it, the two centred as a group. The image yields first (flex:0 1 auto
     + min-height:0) so a short viewport shrinks the picture, never the headline,
     and the group can never overflow the region. */

  /* Stacked, the picture reads tight against the headline above it and the
     panel's edge below it, so it breathes against the panel's own padding token
     rather than the bare 12px gutter. Reusing --hero-pad keeps the air fluid
     with the panel instead of being a value per breakpoint, and keeps it modest
     enough that a short phone still has a picture — the image is what yields
     here, so every pixel of air comes out of it. Applied to both ends of the
     region and to the row-gap, so the group stays centred.

     --hero-air-extra adds a further ~12px of air at the middle of the sub-900
     range (≈640px, where 1.85vw ≈ 12px), tapering to 8px on the narrowest
     phones and 16px approaching the breakpoint. Same clamp(px,vw,px) idiom as
     the rest of the hero, so it tracks width fluidly rather than being a literal
     per breakpoint. It comes out of the image too. */
  .hero-inner{
    --hero-air-extra: clamp(8px, 1.85vw, 16px);
    --hero-air: calc(var(--hero-pad) + var(--hero-air-extra));
    padding-top: calc(var(--nav-h, 62px) + var(--hero-air));
    padding-bottom: var(--hero-air);
  }
  .hero-grid{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    /* `safe` centring: if a short viewport leaves the column taller than the
       region even with the image fully collapsed, fall back to start-aligned
       rather than centring the overflow — which would push the headline back up
       under the nav. */
    justify-content:safe center;
    row-gap: var(--hero-air);
  }
  /* Mobile: panel fills the viewport region (flex:1) but min-height:auto stops
     it shrinking below its floored content. So the image shrinks to fit when
     there's room, and when there isn't the shell grows (page scrolls) rather
     than the panel clipping the picture. */
  .hero-cobalt{min-height:auto;}
  .hero-grid > h1{flex:0 0 auto;}
  /* Image sizing: the cluster is wider than tall, so in the full-width stacked
     column it is width-constrained — its natural height is what reads. Let it
     take that natural height (img height:auto) instead of a viewport-fraction
     box that would either crush it (the ~120px bug) or waste height as letterbox
     and balloon the hero. flex:0 0 auto so it is never shrunk below natural;
     min-height is a floor for the very narrowest phones. */
  .hero-img{flex:0 0 auto;min-height:200px;}
  /* height:auto = natural (width-driven) height; the 600px cap keeps the image
     from getting oversized on wide tablets (object-fit:contain keeps aspect).
     Phones are far below the cap, so they are unaffected. */
  .hero-img img{height:auto;max-height:600px;}
  /* Longer measure = fewer lines = a shorter cream zone, which gives the blue
     panel back its vertical room. Desktop keeps the design's 48ch. */
  .hero-copy{max-width:72ch !important;}
}

/* ---- Footer: one row, three zones, at every width ------------------------
   3-column grid rather than flex space-between: the side tracks are equal
   (1fr each), so the centre track is truly centred against the footer even
   though brand and links have different widths. Brand pins to the start of the
   left track, links to the end of the right track.

   Everything is fluid so the three zones fit on one line down to 375 without
   wrapping: type and gaps scale with clamp(px,vw,px) — the same idiom used
   across the site — bottoming out just small enough to fit the narrowest
   phone and reaching the design's values by ~600px up. */
.footer-inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:clamp(6px,1.6vw,20px);
}
.footer-brand{justify-self:start;}
.footer-copy{justify-self:center;white-space:nowrap;}
.footer-links{justify-self:end;gap:clamp(4px,1.4vw,20px) !important;white-space:nowrap;}
.footer-brand span{font-size:clamp(13px,1.5vw,18px) !important;}
.footer-copy,
.footer-links a{font-size:clamp(8px,1.35vw,12px) !important;}

/* Signup rows: one line, input flexing to fill, button at its intrinsic width.
   The field must be free to shrink (min-width:0) or it would push the button
   onto a second line wherever its column is narrow. Stacking is mobile-only. */
.signup-row{flex-wrap:nowrap;}
.signup-btn{flex-shrink:0;white-space:nowrap;}
@media (max-width:600px){
  .signup-row{flex-direction:column;}
  .signup-btn{width:100%;}
}

/* Honour a reduced-motion preference: the design canvas exposed motion as an
   author toggle, so the animated reveals are decorative by intent. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}