/* AthletiGo, קליסטניקס בצור הדסה.
   ---------------------------------------------------------------------------
   The one light page on the site. Everything else runs on the void; this one
   is cream, because it is read by parents deciding on an after-school class,
   often outdoors with a phone in one hand.

   The header and footer are the site's own, so this file only owns what is
   between them, plus the registration dialog.
   --------------------------------------------------------------------------- */

:root{
  --zur-bg:#FBF3EA;
  --zur-card:#FFFFFF;
  --zur-ink:#17150F;
  --zur-body:#6b655c;
  --zur-line:#e6dbcc;
  --zur-orange:#FF6F20;
  --zur-orange-d:#e0561a;
  --zur-green:#2f7d4f;
  --zur-shadow:0 2px 10px rgba(23,21,15,.06);
  --zur-maxw:1080px;
  --zur-gutter:clamp(18px,5vw,44px);
}

html{background:var(--zur-bg)}
body.athletigo-zur{background:var(--zur-bg)}

.zur{
  background:var(--zur-bg);
  color:var(--zur-ink);
  direction:rtl;
  font-family:"Heebo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:400;
  line-height:1.6;
}
.zur .wrap{max-width:var(--zur-maxw);margin:0 auto;padding:0 var(--zur-gutter)}
.zur a{color:inherit}
.zur :focus-visible{outline:2px solid var(--zur-orange);outline-offset:3px}

/* ===== type ============================================================= */
.zur-eyebrow{
  font-family:"Barlow Condensed","Heebo",sans-serif;font-weight:700;
  letter-spacing:.2em;font-size:14px;color:var(--zur-orange-d);margin:0 0 12px;
}
.zur-h1{font-size:clamp(30px,7vw,54px);line-height:1.08;font-weight:900;
  letter-spacing:-.02em;margin:0 0 14px;color:var(--zur-ink)}
.zur-h2{font-size:clamp(22px,4.2vw,34px);line-height:1.15;font-weight:900;
  letter-spacing:-.015em;margin:0 0 20px;color:var(--zur-ink)}
.zur-sub{font-size:clamp(18px,3.4vw,24px);font-weight:700;line-height:1.35;
  margin:0 0 12px;color:var(--zur-ink)}
.zur-lead{font-size:clamp(16px,2.6vw,19px);color:var(--zur-body);margin:0 0 26px;
  max-width:46ch}
.zur h3{margin:0;font-size:clamp(17px,2.8vw,20px);font-weight:700;color:var(--zur-ink)}

/* ===== buttons ========================================================== */
.zur-btn{
  display:inline-block;border:0;cursor:pointer;
  background:var(--zur-orange);color:#fff;
  font-family:inherit;font-weight:700;font-size:clamp(16px,2.4vw,18px);
  padding:14px 34px;border-radius:999px;
  box-shadow:0 6px 18px rgba(255,111,32,.28);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),background .2s ease;
}
.zur-btn:hover{background:var(--zur-orange-d);transform:translateY(-2px)}
.zur-cta{margin:0}

/* ===== sections and cards =============================================== */
.zur-head{padding:clamp(34px,7vh,72px) 0 clamp(24px,4vw,40px)}
.zur-sec{padding:clamp(26px,5vh,52px) 0}
.zur-close{padding-bottom:clamp(46px,9vh,96px)}

.zur-cards{display:grid;gap:clamp(12px,2vw,18px)}
.zur-cards.four{grid-template-columns:1fr}
.zur-cards.two{grid-template-columns:1fr}
.zur-card{
  background:var(--zur-card);
  border-radius:16px;
  box-shadow:var(--zur-shadow);
  padding:clamp(18px,3vw,24px);
}
.zur-card h2{margin:0 0 6px;font-size:clamp(17px,2.8vw,20px);font-weight:700;color:var(--zur-ink)}
.zur-card p{margin:0;color:var(--zur-body);font-size:clamp(15px,2.3vw,16.5px)}

.zur-step{display:flex;align-items:baseline;gap:14px}
.zur-n{font-family:"Barlow Condensed","Heebo",sans-serif;font-weight:700;
  font-size:clamp(22px,4vw,30px);line-height:1;color:var(--zur-orange);flex:0 0 auto}

/* ===== the group chooser =============================================== */
.zur-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0}
.zur-chip{
  border:1px solid var(--zur-line);background:var(--zur-card);cursor:pointer;
  font-family:inherit;font-size:15px;color:var(--zur-ink);
  padding:9px 18px;border-radius:999px;
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.zur-chip:hover{border-color:var(--zur-orange)}
.zur-chip.on{background:var(--zur-orange);border-color:var(--zur-orange);color:#fff;font-weight:700}
.zur-panel[hidden]{display:none}

.zur-group h3{margin:0 0 14px;font-size:clamp(20px,3.4vw,26px);font-weight:900}
.zur-tag{
  display:inline-block;margin:0 0 10px;padding:5px 12px;border-radius:999px;
  font-size:13px;font-weight:700;
}
.zur-tag.open{background:rgba(47,125,79,.12);color:var(--zur-green)}
.zur-tag.soon{background:rgba(255,111,32,.12);color:var(--zur-orange-d)}
.zur-soon-line{color:var(--zur-body);margin:0 0 18px;font-size:16px}

.zur-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0 0 18px}
.zur-facts dt{font-family:"Barlow Condensed","Heebo",sans-serif;font-weight:700;
  letter-spacing:.1em;font-size:12px;color:var(--zur-orange-d);padding-top:3px}
.zur-facts dd{margin:0;color:var(--zur-ink);font-size:16px}

.zur-prices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 20px}
.zur-price{
  position:relative;display:block;cursor:pointer;
  border:1px solid var(--zur-line);border-radius:14px;
  padding:16px 14px;text-align:center;background:var(--zur-bg);
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.zur-price:hover{border-color:rgba(255,111,32,.55)}
/* the radio itself is off screen rather than display:none, so it stays in the
   tab order and keeps its native keyboard behaviour */
.zur-price-in{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.zur-price:has(.zur-price-in:checked){
  border-color:var(--zur-orange);
  background:rgba(255,111,32,.10);
  box-shadow:0 2px 12px rgba(255,111,32,.16);
}
.zur-price:has(.zur-price-in:focus-visible){
  outline:2px solid var(--zur-orange);outline-offset:3px;
}
/* the check mark, in the corner nearest the page edge */
.zur-tick{
  position:absolute;top:10px;inset-inline-end:10px;
  width:20px;height:20px;border-radius:50%;
  border:1px solid var(--zur-line);background:#fff;
  transition:background .2s ease,border-color .2s ease;
}
.zur-tick::after{
  content:"";position:absolute;inset:0;margin:auto;
  width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;
  transform:translateY(-1px) rotate(45deg);opacity:0;transition:opacity .2s ease;
}
.zur-price:has(.zur-price-in:checked) .zur-tick{
  background:var(--zur-orange);border-color:var(--zur-orange);
}
.zur-price:has(.zur-price-in:checked) .zur-tick::after{opacity:1}
.zur-best{
  position:absolute;top:-11px;inset-inline-start:50%;transform:translateX(50%);
  background:var(--zur-orange);color:#fff;font-size:12px;font-weight:700;
  padding:3px 12px;border-radius:999px;white-space:nowrap;
}
.zur-price-n{display:block;font-family:"Barlow Condensed","Heebo",sans-serif;font-weight:700;
  font-size:clamp(30px,6vw,40px);line-height:1;color:var(--zur-ink);margin:0 0 4px}
.zur-price-n span{font-size:.5em;margin-inline-start:2px;color:var(--zur-body)}
.zur-price-per{display:block;margin:0 0 2px;color:var(--zur-body);font-size:13px}
.zur-price-l{display:block;margin:0;color:var(--zur-ink);font-size:14.5px;font-weight:700}

/* ===== trust =========================================================== */
.zur-trust-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin:0 0 18px}
.zur-score{display:flex;align-items:baseline;gap:8px;margin:0}
.zur-score b{font-size:30px;font-weight:900;color:var(--zur-orange);line-height:1}
.zur-score span[aria-hidden]{color:var(--zur-orange);letter-spacing:.14em;font-size:14px}
.zur-of{color:var(--zur-body);font-size:15px}
.zur-cert{margin:0;color:var(--zur-body);font-size:15px}
.zur-cert::before{content:"·";margin-inline-end:10px;color:var(--zur-line)}
.zur-quote blockquote{margin:0 0 10px;color:var(--zur-ink);font-size:16px;line-height:1.6}
.zur-name{margin:0;color:var(--zur-body);font-size:14px;font-weight:700}

/* ===== faq ============================================================= */
.zur-faq details{margin:0 0 10px}
.zur-faq summary{cursor:pointer;list-style:none;font-size:clamp(16px,2.6vw,18px);
  font-weight:700;color:var(--zur-ink);position:relative;padding-inline-end:28px}
.zur-faq summary::-webkit-details-marker{display:none}
.zur-faq summary::after{content:"+";position:absolute;inset-inline-end:0;top:-2px;
  color:var(--zur-orange);font-size:20px;line-height:1;transition:transform .2s ease}
.zur-faq details[open] summary::after{transform:rotate(45deg)}
.zur-faq details p{margin:12px 0 0;color:var(--zur-body);font-size:16px;line-height:1.7}
/* the first links to live inside an answer; everything else about the
   answers is unchanged */
.zur-faq details p a{color:var(--zur-ink);font-weight:500;
  border-bottom:1px solid rgba(255,111,32,.55);transition:color .2s ease}
.zur-faq details p a:hover,.zur-faq details p a:focus{color:var(--zur-orange)}

/* ===== the registration dialog ========================================= */
.zur-dialog{
  border:0;padding:0;margin:auto;
  width:min(560px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);
  background:var(--zur-bg);color:var(--zur-ink);
  border-radius:18px;box-shadow:0 30px 80px rgba(23,21,15,.28);
  direction:rtl;font-family:"Heebo",system-ui,sans-serif;
  overflow:auto;
}
.zur-dialog::backdrop{background:rgba(23,21,15,.55)}
.zur-close{
  position:sticky;top:0;margin-inline-start:auto;display:block;
  background:transparent;border:0;cursor:pointer;
  font-size:30px;line-height:1;color:var(--zur-body);padding:10px 16px;
}
.zur-form,.zur-done{padding:0 clamp(18px,4vw,30px) clamp(22px,4vw,30px)}
.zur-chosen{
  margin:0 0 10px;display:inline-block;background:rgba(255,111,32,.12);
  color:var(--zur-orange-d);font-size:13.5px;font-weight:700;
  padding:5px 12px;border-radius:999px;
}
.zur-form .zur-h2{font-size:clamp(20px,3.6vw,26px);margin:0 0 6px}
.zur-form-lead{margin:0 0 18px;color:var(--zur-body);font-size:15.5px}

.zur-fld{margin:0 0 14px}
.zur-fld label{display:block;font-size:14.5px;font-weight:700;margin:0 0 6px;color:var(--zur-ink)}
.zur-opt{font-weight:400;color:var(--zur-body);font-size:13px}
.zur-fld input,.zur-fld select,.zur-fld textarea{
  width:100%;box-sizing:border-box;
  background:var(--zur-card);color:var(--zur-ink);
  border:1px solid var(--zur-line);border-radius:12px;
  padding:12px 14px;font-family:inherit;font-size:16px;line-height:1.45;
  transition:border-color .2s ease;
}
.zur-fld select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-inline-end:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b655c' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 14px center;
  min-height:48px;
}
.zur-fld input:focus,.zur-fld select:focus,.zur-fld textarea:focus{
  border-color:var(--zur-orange);outline:0}
.zur-fld input.bad,.zur-fld select.bad{border-color:#c0392b}
.zur-hint{margin:6px 0 0;color:var(--zur-body);font-size:13px}
.zur-consent{display:flex;align-items:flex-start;gap:10px;margin:4px 0 18px;
  font-size:14.5px;color:var(--zur-body);cursor:pointer}
.zur-consent input{margin-top:3px;accent-color:var(--zur-orange);width:18px;height:18px}
.zur-submit{width:100%;padding:15px 20px}
.zur-err{
  background:rgba(192,57,43,.08);border:1px solid rgba(192,57,43,.3);
  color:#8e2a20;border-radius:12px;padding:12px 14px;margin:0 0 14px;font-size:14.5px;
}
.zur-err ul{margin:0;padding-inline-start:18px}

.zur-done{text-align:center}
.zur-done-mark{
  width:56px;height:56px;margin:0 auto 14px;border-radius:50%;
  background:rgba(47,125,79,.12);color:var(--zur-green);
  font-size:28px;line-height:56px;
}
.zur-done .zur-h2{font-size:clamp(19px,3.4vw,24px);margin:0 0 18px}
.zur-done .zur-facts{text-align:start;max-width:340px;margin:0 auto 20px}
.zur-wa{display:inline-block;text-decoration:none}

/* ===== wider screens =================================================== */
@media (min-width:700px){
  .zur-cards.four{grid-template-columns:repeat(2,1fr)}
  .zur-cards.two{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1000px){
  .zur-cards.four{grid-template-columns:repeat(4,1fr)}
  .zur-group{padding:clamp(24px,3vw,34px)}
  .zur-prices{max-width:420px}
}

@media (prefers-reduced-motion:reduce){
  .zur *{transition:none !important;animation:none !important}
}


/* The two line trust card above the FAQ. Same surface as every other card on
   the page; the only new thing is the hairline between the two lines. */
.zur-why-card p{margin:0;color:var(--zur-ink);font-size:clamp(15px,2.4vw,17px);
  font-weight:500;line-height:1.55}
.zur-why-card p + p{margin-top:12px;padding-top:12px;border-top:1px solid var(--zur-line)}

/* ===== the photograph bands ============================================
   Three of them, at three moments: the scene under the head, a breath before
   the group chooser, and one more before the closing button.

   Full bleed with no corners, and masked at both edges so the picture melts
   into the cream instead of cutting the page. The scrim only exists on the
   bands that carry a sentence, and it is radial and centred on that sentence,
   so the bars stay bright everywhere else. */
.zur-band{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  margin:0;
  border-radius:0;
}
.zur-band-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  /* the bars and the caps are the subject: not the sky, not the floor */
  object-position:center 46%;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 88%,transparent 100%);
}
.zur-band.has-line::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(58% 62% at 50% 50%,
    rgba(8,6,4,.84) 0%,rgba(8,6,4,.68) 46%,rgba(8,6,4,0) 76%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 88%,transparent 100%);
}
.zur-band-line{
  position:relative;z-index:2;margin:0;
  color:#fff;text-align:center;
  padding:0 var(--zur-gutter);max-width:22ch;
  text-shadow:0 2px 22px rgba(0,0,0,.55);
}

.band-a{height:60vh;min-height:380px;max-height:760px}
.band-a .zur-band-line{font-size:clamp(24px,4.4vw,46px);font-weight:700;line-height:1.25}

.band-b{height:46vh;min-height:300px;max-height:580px}
.band-b .zur-band-line{font-size:clamp(21px,3.6vw,36px);font-weight:700;line-height:1.28}

.band-c{height:34vh;min-height:210px;max-height:440px}
/* B and C are daylight photographs of other parks: grey and red hardware, a
   building behind one and a skyline behind the other. The crops push both
   down onto the bars, and the tone is pulled towards the dusk of band A so
   the three read as one page rather than three stock pictures. */
.band-b .zur-band-img{object-position:center 60%;filter:saturate(.68) brightness(.88) contrast(1.06)}
.band-c .zur-band-img{object-position:center 50%;filter:saturate(.62) brightness(.84) contrast(1.08)}

@media (max-width:760px){
  .band-a{height:45vh;min-height:300px}
  .band-b{height:36vh;min-height:240px}
  .band-c{height:26vh;min-height:170px}
  /* the sentence covers more of a shorter band, so the scrim reaches further */
  .zur-band.has-line::after{
    background:radial-gradient(88% 74% at 50% 50%,
      rgba(8,6,4,.86) 0%,rgba(8,6,4,.72) 52%,rgba(8,6,4,.08) 92%);
  }
  .band-a .zur-band-img{filter:brightness(1.45) contrast(1.03)}
  .band-b .zur-band-img{filter:saturate(.68) brightness(1.02) contrast(1.06)}
  .band-c .zur-band-img{filter:saturate(.62) brightness(.98) contrast(1.08)}
}

/* ===== payment terms, the family offer, and the one yes/no in the form ===
   Added 2026-08-26 alongside the price change. The offer is not a new surface:
   it is the same rounded card the page already uses, with the orange edge on
   the side the Hebrew starts from, so it reads as an offer and not a warning.
   The yes/no pair borrows the chip styling from the group chooser rather than
   inventing a third control for the form. */
.zur-prices:has(+ .zur-terms){margin-bottom:10px}
.zur-terms{margin:0 0 16px;color:var(--zur-body);font-size:13.5px}

.zur-family{
  border:1px solid rgba(255,111,32,.30);
  border-inline-start:4px solid var(--zur-orange);
  border-radius:14px;
  background:rgba(255,111,32,.07);
  padding:14px 16px;
  margin:0 0 20px;
}
.zur-family-l{margin:0;font-weight:700;line-height:1.45;
  font-size:clamp(15px,2.4vw,16.5px);color:var(--zur-ink)}
.zur-family-s{margin:6px 0 0;color:var(--zur-body);font-size:13.5px}

.zur-fld-q{display:block;font-size:14.5px;font-weight:700;margin:0 0 6px;
  color:var(--zur-ink)}
.zur-yesno{display:flex;flex-wrap:wrap;gap:8px}
.zur-yn{position:relative;flex:0 0 auto}
/* off screen rather than display:none, so it keeps its native keyboard
   behaviour, exactly as the price radios do */
.zur-yn input{position:absolute;opacity:0;width:1px;height:1px;margin:0;
  pointer-events:none}
.zur-yn span{
  display:block;cursor:pointer;
  border:1px solid var(--zur-line);background:var(--zur-card);
  color:var(--zur-ink);font-size:15px;font-weight:500;
  padding:9px 26px;border-radius:999px;
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.zur-yn span:hover{border-color:var(--zur-orange)}
.zur-yn input:checked + span{
  background:var(--zur-orange);border-color:var(--zur-orange);
  color:#fff;font-weight:700;
}
.zur-yn input:focus-visible + span{
  outline:2px solid var(--zur-orange);outline-offset:3px;
}
