/* Site additions on top of the Webflow stylesheet. Brand: header gradient #001d51 -> #003085, gold #ffae00, font Varela Round.
   Linked from every page as site.css?v=N: raise N in every .html after changing this file (it is cached for a year). */

/* ---------- Lesson sign-up form (form.eb-signup, on home, get-started, 404, under-construction) ---------- */
form.eb-signup {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 32px 24px 28px;
  border-radius: 28px;
  direction: rtl;
  text-align: right;
  color: #fff;
  font-family: "Varela Round", Arial, sans-serif;
  background: radial-gradient(circle at 80% 0, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 55%), linear-gradient(143deg, #001d51, #003085);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45), 0 0 0 2px rgba(255, 174, 0, .6);
}
form.eb-signup *, form.eb-signup *::before, form.eb-signup *::after { box-sizing: border-box; }

/* desktop: half the screen wide, two fields per row; grows leftwards out of the narrow form column (same as the thank-you panel) */
@media (min-width: 992px) {
  form.eb-signup {
    --w: clamp(640px, 50vw, 880px);
    width: var(--w);
    max-width: none;
    margin: 0 0 0 min(0px, calc(100% - var(--w)));
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
    padding: 44px 48px 40px;
  }
}
form.eb-signup .eb-wide, form.eb-signup .eb-form-head, form.eb-signup .eb-actions { grid-column: 1 / -1; }

form.eb-signup .eb-form-head { text-align: center; margin-bottom: 6px; }
form.eb-signup .eb-form-icon {
  width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%;
  background: #ffae00; color: #001d51; font: 36px/64px Arial, sans-serif;
  box-shadow: 0 0 0 8px rgba(255, 174, 0, .16);
}
form.eb-signup .eb-form-head :is(h1, h2) { margin: 0 0 8px; font-size: 32px; line-height: 1.2; font-weight: 700; color: #fff; }
form.eb-signup .eb-form-head p { margin: 0; font-size: 17px; line-height: 1.5; color: #dce6ff; }

form.eb-signup .eb-field label {
  display: block; margin: 0 0 8px; padding: 0;
  font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.3; color: #dce6ff; text-align: right;
}
form.eb-signup .eb-field label sub { font-size: 12px; font-weight: 400; color: #9fb3e0; vertical-align: baseline; margin-right: 4px; }

form.eb-signup .w-input, form.eb-signup .w-select {
  display: block; width: 100%; height: 52px; margin: 0; padding: 0 16px;
  border: 2px solid transparent; border-radius: 14px;
  background-color: #fff; color: #001d51;
  font-family: inherit; font-size: 16px; line-height: 1.4; text-align: right; direction: rtl;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08);
  transition: border-color .2s, box-shadow .2s;
}
form.eb-signup textarea.w-input { height: auto; min-height: 112px; padding: 14px 16px; resize: vertical; }
form.eb-signup .w-select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-left: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23001d51' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 16px center;
}
form.eb-signup .w-input::placeholder { color: #8a98b8; }
form.eb-signup .w-input:focus, form.eb-signup .w-select:focus {
  outline: none; border-color: #ffae00; box-shadow: 0 0 0 4px rgba(255, 174, 0, .28);
}

form.eb-signup .eb-actions { margin-top: 6px; }
form.eb-signup .eb-actions .w-button {
  display: block; width: 100%; height: 58px; margin: 0; padding: 0 24px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: #ffae00; color: #001d51;
  font-family: inherit; font-size: 19px; font-weight: 700;
  box-shadow: 0 10px 24px rgba(255, 174, 0, .35);
  transition: transform .15s, box-shadow .15s, background-color .15s;
}
form.eb-signup .eb-actions .w-button:hover { background: #ffbd2e; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(255, 174, 0, .45); }
form.eb-signup .eb-actions .w-button:disabled { opacity: .75; cursor: wait; transform: none; }

/* error message under the sign-up form */
.w-form-fail.eb-fail {
  margin-top: 16px; padding: 14px 18px; border-radius: 14px;
  background: #fff1f0; color: #9b1c1c; border: 1px solid #f5c2c0;
  font-family: "Varela Round", Arial, sans-serif; font-size: 16px; text-align: right; direction: rtl;
}
@media (min-width: 992px) {
  .w-form-fail.eb-fail { --w: clamp(640px, 50vw, 880px); width: var(--w); margin-left: min(0px, calc(100% - var(--w))); }
}

@media (max-width: 479px) {
  form.eb-signup { padding: 26px 18px 22px; border-radius: 22px; gap: 16px; }
  form.eb-signup .eb-form-head :is(h1, h2) { font-size: 26px; }
}

/* ---------- Sign-up sections: at least 80% of the screen tall, photo fading into the brand's dark blue (was black) ---------- */
/* get-started: studio entrance photo on the left */
body .section-10 {
  min-height: 80vh;
  background-color: #001d51;
  background-image: linear-gradient(272deg, #001d51 30%, rgba(0, 29, 81, .85) 44%, rgba(0, 29, 81, 0) 68%),
    url("/assets/66aaeb733f87bdd64315f980/6755ee4dae334f39cac24481_Erez-Baram-%D7%91%D7%99%D7%AA-%D7%A1%D7%A4%D7%A8-%D7%9C%D7%9E%D7%95%D7%A1%D7%99%D7%A7%D7%94.jpg");
  background-position: 0 0, left center;
  background-repeat: no-repeat, no-repeat;
  background-size: auto, auto 100%;
}
/* home: house photo behind the sign-up block */
body .section-11 {
  min-height: 80vh;
  background-color: #001d51;
  background-image: linear-gradient(261deg, #001d51 32%, rgba(0, 29, 81, .8) 46%, rgba(0, 29, 81, 0) 75%),
    url("/assets/66aaeb733f87bdd64315f980/6755ea52460406cc64693942_%D7%90%D7%A8%D7%96-%D7%91%D7%A8%D7%A2%D7%9D---%D7%91%D7%99%D7%AA-%D7%A1%D7%A4%D7%A8-%D7%9C%D7%9E%D7%95%D7%A1%D7%99%D7%A7%D7%94-%D7%A9%D7%99%D7%A2%D7%95%D7%A8%D7%99-%D7%92%D7%99%D7%98%D7%A8%D7%94-%D7%97%D7%A9%D7%9E%D7%9C%D7%99%D7%AA-%D7%A4%D7%A8%D7%98%D7%99%D7%99%D7%9D-%D7%95%D7%9C%D7%A7%D7%91%D7%95%D7%A6%D7%95%D7%AA-%D7%91%D7%9B%D7%9C-%D7%94%D7%A8%D7%9E%D7%95%D7%AA-%D7%94%D7%A6%D7%A4%D7%A6%D7%A4%D7%94-16.jpg");
  background-position: 0 0, 0 0;
  background-repeat: no-repeat, no-repeat;
  background-size: auto, cover;
  background-attachment: scroll, fixed;
}
@media (max-width: 991px) {
  /* tablets: photo fills the section, a stronger blue veil keeps the form readable */
  body .section-10 {
    background-image: linear-gradient(rgba(0, 29, 81, .55), rgba(0, 29, 81, .55)),
      url("/assets/66aaeb733f87bdd64315f980/6755ee4dae334f39cac24481_Erez-Baram-%D7%91%D7%99%D7%AA-%D7%A1%D7%A4%D7%A8-%D7%9C%D7%9E%D7%95%D7%A1%D7%99%D7%A7%D7%94.jpg");
    background-position: 0 0, center; background-size: auto, cover;
  }
  body .section-11 { background-image: none; }
}
@media (max-width: 479px) {
  body .section-10 { min-height: 0; background-image: none; }
  body .section-11 { min-height: 0; background-color: #001d51; }
}
@media (min-width: 480px) and (max-width: 991px) {
  /* tablets: Webflow keeps the get-started form column at 300px; give the card room */
  body .section-10 .form-block { width: min(560px, calc(100% - 64px)); margin-left: auto; margin-right: auto; }
}

/* ---------- Gallery: latest YouTube videos (section.eb-latest, newest first) ---------- */
.eb-latest {
  padding: 64px 20px 72px; direction: rtl; color: #fff; font-family: "Varela Round", Arial, sans-serif;
  background: radial-gradient(circle at 85% 0, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 50%), linear-gradient(143deg, #001d51, #003085);
  border-top: 4px solid #ffae00;
}
.eb-latest-inner { max-width: 1200px; margin: 0 auto; }
.eb-latest-head { text-align: center; margin-bottom: 36px; }
.eb-kicker {
  display: inline-block; margin-bottom: 12px; padding: 6px 16px; border-radius: 999px;
  border: 1.5px solid #ffae00; color: #ffc547; font-size: 14px; letter-spacing: .5px;
}
.eb-latest-head h2 { margin: 0 0 8px; font-size: 40px; line-height: 1.2; font-weight: 700; color: #fff; }
.eb-latest-head p { margin: 0; font-size: 18px; color: #dce6ff; }
.eb-videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.eb-video { margin: 0; }
.eb-yt, .eb-video iframe {
  display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0;
  border-radius: 20px; overflow: hidden; background: #000; cursor: pointer;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .4), 0 0 0 2px rgba(255, 174, 0, .45);
}
.eb-yt img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease, filter .3s; }
.eb-yt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 29, 81, 0) 55%, rgba(0, 29, 81, .55)); }
.eb-play {
  position: absolute; z-index: 1; top: 50%; left: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%;
  background: #ffae00; box-shadow: 0 0 0 10px rgba(255, 174, 0, .22), 0 10px 24px rgba(0, 0, 0, .35); transition: transform .2s;
}
.eb-play::before {
  content: ""; position: absolute; top: 50%; left: 50%; margin: -13px 0 0 -8px;
  border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent #001d51;
}
.eb-yt:hover img, .eb-yt:focus-visible img { transform: scale(1.04); filter: brightness(1.08); }
.eb-yt:hover .eb-play, .eb-yt:focus-visible .eb-play { transform: scale(1.1); }
.eb-yt:focus-visible { outline: 3px solid #ffae00; outline-offset: 4px; }
.eb-video figcaption { margin-top: 16px; text-align: right; font-size: 17px; line-height: 1.4; color: #dce6ff; }
.eb-video figcaption b { display: block; font-size: 22px; color: #fff; margin-bottom: 2px; }
.eb-channel {
  display: table; margin: 44px auto 0; padding: 14px 30px; border-radius: 999px;
  background: #ffae00; color: #001d51 !important; font-size: 18px; font-weight: 700; text-decoration: none;
  box-shadow: 0 10px 24px rgba(255, 174, 0, .3); transition: transform .15s, background-color .15s;
}
.eb-channel:hover { background: #ffbd2e; transform: translateY(-2px); }
@media (max-width: 991px) { .eb-videos { grid-template-columns: 1fr 1fr; } .eb-video:first-child { grid-column: 1 / -1; } }
@media (max-width: 600px) {
  .eb-latest { padding: 48px 16px 56px; }
  .eb-latest-head h2 { font-size: 30px; }
  .eb-videos { grid-template-columns: 1fr; gap: 26px; }
}

/* ---------- Desktop: the whole sign-up block fits on one screen below the menu bar (89px) ---------- */
@media (min-width: 992px) {
  body .section-10, body .section-11 { min-height: calc(100vh - 89px); padding-top: 32px; padding-bottom: 32px; box-sizing: border-box; }
  body .section-10 .form-block, body .section-11 .form-block { margin-top: 0; margin-bottom: 0; }
  body .section-11 .heading-10 { margin-top: 0; margin-bottom: 6px; }
  body .section-11 .paragraph-10 { margin-bottom: 22px; }
  /* compact form */
  form.eb-signup { gap: 14px 22px; padding: 30px 40px 30px; }
  form.eb-signup .eb-field label { margin-bottom: 6px; font-size: 14px; }
  form.eb-signup .w-input, form.eb-signup .w-select { height: 46px; }
  form.eb-signup textarea.w-input { min-height: 80px; }
  form.eb-signup .eb-actions { margin-top: 4px; }
  form.eb-signup .eb-actions .w-button { height: 52px; font-size: 18px; }
  form.eb-signup .eb-form-head { margin-bottom: 0; }
  form.eb-signup .eb-form-icon { width: 50px; height: 50px; margin-bottom: 10px; font-size: 28px; line-height: 50px; box-shadow: 0 0 0 6px rgba(255, 174, 0, .16); }
  form.eb-signup .eb-form-head :is(h1, h2) { font-size: 28px; margin-bottom: 4px; }
  form.eb-signup .eb-form-head p { font-size: 16px; }
}
@media (min-width: 992px) and (max-height: 820px) {
  /* short laptop screens (e.g. 1366x768): tighter still, so the button stays on screen */
  body .section-10, body .section-11 { padding-top: 20px; padding-bottom: 20px; }
  form.eb-signup { gap: 10px 20px; padding: 22px 36px 24px; }
  form.eb-signup .w-input, form.eb-signup .w-select { height: 42px; }
  form.eb-signup textarea.w-input { min-height: 64px; }
  form.eb-signup .eb-actions .w-button { height: 48px; }
  form.eb-signup .eb-form-icon { display: none; }
  body .section-11 .paragraph-10 { margin-bottom: 14px; }
}

/* ---------- Sign-up form: "how did you hear" choice buttons with logos, and the student-name hint ---------- */
form.eb-signup .eb-label { display: block; margin: 0 0 8px; font-size: 15px; font-weight: 700; line-height: 1.3; color: #dce6ff; }
form.eb-signup .eb-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
form.eb-signup .eb-field label.eb-choice {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; margin: 0; padding: 8px 14px; border-radius: 14px; cursor: pointer;
  background: #fff; border: 2px solid transparent; color: #001d51;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08); transition: border-color .15s, box-shadow .15s, transform .15s;
}
form.eb-signup .eb-field label.eb-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; bottom: 6px; left: 50%; margin: 0; }
form.eb-signup .eb-field label.eb-choice .eb-ico { display: inline-flex; gap: 4px; flex: none; }
form.eb-signup .eb-field label.eb-choice .eb-ico svg { display: block; }
form.eb-signup .eb-field label.eb-choice b { font-size: 16px; font-weight: 700; line-height: 1.2; color: #001d51; white-space: nowrap; }
form.eb-signup .eb-field label.eb-choice:hover { transform: translateY(-1px); }
form.eb-signup .eb-field label.eb-choice:has(input:checked) { border-color: #ffae00; box-shadow: 0 0 0 4px rgba(255, 174, 0, .3); background: #fff8e6; }
form.eb-signup .eb-field label.eb-choice:has(input:focus-visible) { border-color: #ffae00; }
form.eb-signup .eb-field label.eb-choice:has(input:checked)::after {
  content: "✓"; position: absolute; top: -9px; left: -9px; width: 22px; height: 22px; border-radius: 50%;
  background: #ffae00; color: #001d51; font: 700 13px/22px Arial, sans-serif; text-align: center;
}
form.eb-signup .eb-hint { display: block; margin-top: 6px; font-size: 13px; line-height: 1.4; color: #9fb3e0; }
@media (min-width: 992px) {
  form.eb-signup .eb-field label.eb-choice { min-height: 46px; padding: 6px 12px; }
  form.eb-signup .eb-label { margin-bottom: 6px; font-size: 14px; }
}
@media (min-width: 992px) and (max-height: 820px) { form.eb-signup .eb-field label.eb-choice { min-height: 42px; } form.eb-signup .eb-hint { display: none; } }
@media (max-width: 600px) {
  form.eb-signup .eb-choices { grid-template-columns: 1fr; gap: 10px; }
  form.eb-signup .eb-field label.eb-choice { justify-content: flex-start; }
}

/* ---------- Sign-up card: more air, bigger head (scales with screen height), 20px further in from the right ---------- */
@media (min-width: 992px) {
  body .section-10, body .section-11 { padding-top: 24px; padding-bottom: 24px; }
  body .section-10 .form-block { margin-right: 240px; }
  body .section-11 .div-block-19 { margin-right: 240px; }
  form.eb-signup { padding-top: clamp(28px, 4vh, 60px); padding-bottom: clamp(28px, 4vh, 60px); }
  form.eb-signup .eb-form-icon { width: clamp(50px, 6.5vh, 84px); height: clamp(50px, 6.5vh, 84px); font-size: clamp(28px, 3.8vh, 48px); line-height: clamp(50px, 6.5vh, 84px); margin-bottom: clamp(10px, 1.6vh, 18px); }
  form.eb-signup .eb-form-head :is(h1, h2) { font-size: clamp(28px, 3.4vh, 44px); }
  form.eb-signup .eb-form-head p { font-size: clamp(16px, 1.9vh, 19px); }
}

/* ---------- Home "שיעורי גיטרה לכל רמה": readable text, lined up with the menu's right edge ---------- */
@media (min-width: 480px) {
  body .section-8 .div-block-13 { padding-right: calc(10vw + 20px); }
  body .section-8 .div-block-14 { width: clamp(380px, 32vw, 620px); }
  body .section-8 .heading-6 { font-size: clamp(34px, 2.6vw, 54px); line-height: 1.2; color: #ffae00; }
  body .section-8 .paragraph-4 { font-size: clamp(17px, .85vw + 5px, 22px); line-height: 1.75; color: #e6ecff; margin-top: 18px; }
}
@media (max-width: 479px) {
  body .section-8 .paragraph-4 { font-size: 16px; line-height: 1.7; }
}

/* ---------- Phones: photo banner fading into the blue, card with side margins, shorter form ---------- */
@media (max-width: 600px) {
  body .section-10 {
    display: block; min-height: 0; padding: 150px 0 36px;
    background-color: #001d51;
    background-image: linear-gradient(180deg, rgba(0, 29, 81, 0) 0, rgba(0, 29, 81, .35) 120px, #001d51 250px),
      url("/assets/66aaeb733f87bdd64315f980/6755ee4dae334f39cac24481_Erez-Baram-%D7%91%D7%99%D7%AA-%D7%A1%D7%A4%D7%A8-%D7%9C%D7%9E%D7%95%D7%A1%D7%99%D7%A7%D7%94-p-800.jpg");
    background-size: auto, 100% auto; background-position: 0 0, center top; background-repeat: no-repeat, no-repeat; background-attachment: scroll, scroll;
  }
  body .section-11 {
    min-height: 0; padding: 170px 0 36px;
    background-color: #001d51;
    background-image: linear-gradient(180deg, rgba(0, 29, 81, 0) 0, rgba(0, 29, 81, .45) 110px, #001d51 245px),
      url("/assets/66aaeb733f87bdd64315f980/6755ea52460406cc64693942_%D7%90%D7%A8%D7%96-%D7%91%D7%A8%D7%A2%D7%9D---%D7%91%D7%99%D7%AA-%D7%A1%D7%A4%D7%A8-%D7%9C%D7%9E%D7%95%D7%A1%D7%99%D7%A7%D7%94-%D7%A9%D7%99%D7%A2%D7%95%D7%A8%D7%99-%D7%92%D7%99%D7%98%D7%A8%D7%94-%D7%97%D7%A9%D7%9E%D7%9C%D7%99%D7%AA-%D7%A4%D7%A8%D7%98%D7%99%D7%99%D7%9D-%D7%95%D7%9C%D7%A7%D7%91%D7%95%D7%A6%D7%95%D7%AA-%D7%91%D7%9B%D7%9C-%D7%94%D7%A8%D7%9E%D7%95%D7%AA-%D7%94%D7%A6%D7%A4%D7%A6%D7%A4%D7%94-16.jpg");
    background-size: auto, 100% auto; background-position: 0 0, center top; background-repeat: no-repeat, no-repeat; background-attachment: scroll, scroll;
  }
  body .section-11 .div-block-19, body .section-11 .div-block-20 { width: 100%; margin: 0; }
  body .section-11 .heading-10 { margin: 0 20px 6px; font-size: 30px; line-height: 1.2; text-align: center; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }
  body .section-11 .paragraph-10 { margin: 0 24px 22px; font-size: 16px; line-height: 1.55; text-align: center; color: #dce6ff; }
  body .section-10 .form-block, body .section-11 .form-block { width: auto; margin: 0 14px; }

  form.eb-signup { padding: 24px 18px 22px; gap: 14px; border-radius: 24px; }
  form.eb-signup .eb-form-head { margin-bottom: 2px; }
  form.eb-signup .eb-form-icon { width: 54px; height: 54px; margin-bottom: 10px; font-size: 30px; line-height: 54px; }
  form.eb-signup .eb-form-head :is(h1, h2) { font-size: 27px; }
  form.eb-signup .eb-form-head p { font-size: 15px; }
  form.eb-signup .eb-field label { margin-bottom: 6px; font-size: 14px; }
  form.eb-signup .w-input, form.eb-signup .w-select { height: 48px; font-size: 16px; } /* 16px: iPhones zoom in on smaller text */
  form.eb-signup textarea.w-input { min-height: 88px; }
  form.eb-signup .eb-hint { font-size: 12px; margin-top: 5px; }
  /* how-did-you-hear: three tiles in a row, logo above the text */
  form.eb-signup .eb-choices { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  form.eb-signup .eb-field label.eb-choice { flex-direction: column; justify-content: center; gap: 6px; min-height: 76px; padding: 10px 6px; text-align: center; }
  form.eb-signup .eb-field label.eb-choice b { font-size: 13px; white-space: normal; }
  form.eb-signup .eb-actions .w-button { height: 54px; font-size: 18px; }
}

/* ---------- Card lines up with the menu's right edge at every desktop/tablet width; narrower on tablets ---------- */
@media (min-width: 992px) {
  body .section-10 .form-block, body .section-11 .div-block-19 { margin-right: calc(10vw + 20px); }
}
@media (min-width: 992px) and (max-width: 1279px) {
  /* tablets in landscape (e.g. Galaxy Tab S10+ ~1244px): keep the photo visible */
  body form.eb-signup, body .eb-cel, body .w-form-fail.eb-fail { --w: max(520px, 46vw); }
  body form.eb-signup { padding-left: 28px; padding-right: 28px; gap: 12px 16px; }
}
@media (min-width: 992px) {
  /* home: the form box kept Webflow's 220px right margin on top of the column's; the column alone sets the edge now */
  body .section-11 .form-block { margin-right: 0; }
}
@media (min-width: 992px) {
  body .section-11 .heading-10, body .section-11 .paragraph-10 { margin-right: 0; }
  body .section-11 .paragraph-10 { width: auto; max-width: 520px; }
}

/* ---------- Privacy policy page (privacy.html) ---------- */
.eb-legal {
  padding: 56px 20px 72px; direction: rtl; font-family: "Varela Round", Arial, sans-serif;
  background: radial-gradient(circle at 85% 0, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 45%), linear-gradient(143deg, #001d51, #003085);
}
.eb-legal-head { max-width: 860px; margin: 0 auto 28px; text-align: center; color: #fff; }
.eb-legal-head h1 { margin: 12px 0 6px; font-size: 44px; line-height: 1.2; color: #fff; }
.eb-legal-head p { margin: 0; color: #c6d4f5; font-size: 16px; }
.eb-legal-card {
  max-width: 860px; margin: 0 auto; padding: 44px 52px; border-radius: 24px; background: #fff; color: #1f2a44;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35), 0 0 0 2px rgba(255, 174, 0, .55); text-align: right;
}
.eb-legal-card h2 { margin: 34px 0 10px; padding-bottom: 8px; border-bottom: 2px solid #ffae00; font-size: 24px; line-height: 1.3; color: #001d51; }
.eb-legal-card h2:first-of-type { margin-top: 26px; }
.eb-legal-card p, .eb-legal-card li { font-size: 17px; line-height: 1.8; color: #2b3652; }
.eb-legal-card p { margin: 0 0 12px; }
.eb-legal-card ul { margin: 0 0 14px; padding: 0 22px 0 0; }
.eb-legal-card li { margin-bottom: 6px; }
.eb-legal-card li::marker { color: #ffae00; }
.eb-legal-card a { color: #003085; text-decoration: underline; }
.eb-legal-card strong { color: #001d51; }
.eb-legal-contact { padding: 18px 22px; border-radius: 16px; background: #f2f5fc; }
@media (max-width: 600px) {
  .eb-legal { padding: 36px 12px 48px; }
  .eb-legal-head h1 { font-size: 32px; }
  .eb-legal-card { padding: 26px 20px; border-radius: 20px; }
  .eb-legal-card h2 { font-size: 20px; }
  .eb-legal-card p, .eb-legal-card li { font-size: 16px; }
}

/* ---------- Accessibility: skip link, menu (assets/site/a11y.js), modes, contrast fixes ---------- */
.eb-skip {
  position: fixed; z-index: 100000; top: 8px; right: 8px; padding: 12px 20px; border-radius: 12px;
  background: #ffae00; color: #001d51 !important; font: 700 16px/1.2 "Varela Round", Arial, sans-serif; text-decoration: none;
  transform: translateY(-300%);
}
.eb-skip:focus { transform: none; outline: 3px solid #001d51; outline-offset: 2px; }
main:focus { outline: none; }

.eb-a11y-btn {
  position: fixed; z-index: 99990; left: 0; top: 62%; width: 52px; height: 52px; padding: 0; border: 0; cursor: pointer;
  border-radius: 0 16px 16px 0; background: #003085; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35), inset -3px 0 0 #ffae00; transition: width .15s;
}
.eb-a11y-btn:hover, .eb-a11y-btn:focus-visible { width: 58px; }
.eb-a11y-btn:focus-visible, .eb-a11y-panel button:focus-visible, .eb-a11y-panel a:focus-visible { outline: 3px solid #ffae00; outline-offset: 2px; }
.eb-a11y-panel {
  position: fixed; z-index: 99991; left: 12px; top: 50%; transform: translateY(-50%); width: 300px; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); overflow: auto;
  padding: 18px; border-radius: 22px; direction: rtl; text-align: right; color: #fff; font-family: "Varela Round", Arial, sans-serif;
  background: linear-gradient(143deg, #001d51, #003085); box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 0 2px rgba(255, 174, 0, .6);
}
.eb-a11y-panel[hidden] { display: none; }
.eb-a11y-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.eb-a11y-head b { font-size: 20px; }
.eb-a11y-x { width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 24px; line-height: 36px; cursor: pointer; }
.eb-a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.eb-a11y-grid button {
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 92px; padding: 12px 8px; border-radius: 14px; cursor: pointer;
  border: 2px solid transparent; background: #fff; color: #001d51; font: 700 14px/1.25 "Varela Round", Arial, sans-serif; text-align: center;
}
.eb-a11y-grid button small { font-size: 12px; color: #6b7a99; min-height: 14px; }
.eb-a11y-grid button[aria-pressed="true"] { border-color: #ffae00; background: #fff4d9; box-shadow: 0 0 0 3px rgba(255, 174, 0, .35); }
.eb-a11y-link { display: block; margin-top: 14px; text-align: center; color: #ffc547 !important; text-decoration: underline; font-size: 15px; }

/* modes */
html.eb-a11y-zoom body { zoom: var(--eb-zoom, 1); }
html.eb-a11y-contrast main, html.eb-a11y-contrast .w-nav, html.eb-a11y-contrast .footer-light { filter: contrast(1.4) saturate(1.15); }
html.eb-a11y-contrast main p, html.eb-a11y-contrast main li { text-shadow: 0 0 1px currentColor; }
html.eb-a11y-links a:not(.eb-a11y-btn):not(.eb-skip) { text-decoration: underline !important; text-underline-offset: 3px; outline: 2px dashed #ffae00; outline-offset: 2px; }
html.eb-a11y-font body, html.eb-a11y-font body * { font-family: Arial, "Segoe UI", Helvetica, sans-serif !important; letter-spacing: .01em; }
html.eb-a11y-still *, html.eb-a11y-still *::before, html.eb-a11y-still *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

/* contrast fixes found by the audit */
.pricing-tag { background-color: #0056b3 !important; }

@media (max-width: 600px) {
  .eb-a11y-btn { top: auto; bottom: 96px; width: 46px; height: 46px; }
  .eb-a11y-panel { left: 6px; right: 6px; width: auto; top: auto; bottom: 10px; transform: none; }
}
@media (max-width: 479px) { .button-primary-2._2 { color: #001d51 !important; } }

/* ---------- Intro "sliding doors" (section.logo-intro.eb-doors, driven by assets/site/intro.js) ---------- */
/* Base = the opened scene: studio entrance photo, brand text on top. Doors only appear when the script runs (html.eb-doors-on). */
section.logo-intro.eb-doors { height: auto; overflow: visible; position: relative; margin: 0; }
.eb-doors .eb, .eb-doors .eb-mobile { position: relative; height: calc(100vh - 89px); min-height: 520px; overflow: hidden; margin: 0; }
.eb-doors .eb, .eb-doors .eb-mobile { background: #000; }
.eb-doors .div-block-6 {
  position: absolute !important; inset: 0 !important; top: 0 !important; z-index: 1; margin: 0 !important; padding: 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: #000;
}
.eb-doors .div-block-6 > * { position: relative; z-index: 1; will-change: opacity, transform; }
.eb-doors .image-12 { position: absolute !important; inset: -38% 0 auto !important; z-index: 0 !important; opacity: .55; pointer-events: none; }
.eb-doors .erez-baram { margin-bottom: 0; }
.eb-doors .heading-2 { color: #71abff; margin: 0; }
.eb-doors .heading-11 { margin-top: 0; }
.eb-doors .paragraph-8, .eb-doors .paragraph-11 { color: #fff; font-size: 20px; line-height: 1.6; max-width: 560px; width: auto; text-shadow: 0 2px 12px rgba(0, 0, 0, .55); }
.eb-doors .erez-baram, .eb-doors .heading-2, .eb-doors .heading-11 { text-shadow: 0 3px 18px rgba(0, 0, 0, .5); }
@media (max-width: 479px) { .eb-doors .paragraph-8, .eb-doors .paragraph-11 { font-size: 16px; } }
.eb-doors .div-block-4, .eb-doors .div-block-4-copy { display: none; }

html.eb-doors-on section.logo-intro.eb-doors { height: 230vh; }
html.eb-doors-on .eb-doors .eb, html.eb-doors-on .eb-doors .eb-mobile { position: sticky; top: var(--eb-nav, 89px); height: calc(100vh - var(--eb-nav, 89px)); }
html.eb-doors-on .eb-doors .div-block-4, html.eb-doors-on .eb-doors .div-block-4-copy {
  display: flex; position: absolute; inset: 0; z-index: 2; height: 100%; margin: 0; pointer-events: none;
}
html.eb-doors-on .eb-doors .div-block-3, html.eb-doors-on .eb-doors .div-block-2 { will-change: transform; box-shadow: 0 0 40px rgba(0, 0, 0, .45); }
.eb-doors-hint {
  position: absolute; z-index: 3; left: 50%; bottom: 118px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: #fff; font: 700 15px/1.2 "Varela Round", Arial, sans-serif; letter-spacing: .5px; direction: rtl; text-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}
.eb-doors-hint svg { animation: ebHint 1.6s ease-in-out infinite; }
@keyframes ebHint { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (max-width: 479px) {
  .eb-doors .eb-mobile { height: calc(100vh - 90px); min-height: 480px; }
  html.eb-doors-on section.logo-intro.eb-doors { height: 200vh; }
  .eb-doors .image-12 { inset: -12% 0 auto !important; width: 800px; left: 50% !important; transform: translateX(-50%); }
}
.eb-doors .div-block-22 { margin: 0 auto !important; width: auto; max-width: 640px; }
.eb-doors .div-block-22 .div-block-22 { margin: 0 !important; }
.eb-doors .heading-11 { margin-bottom: 18px; line-height: 1.2; }
.eb-doors .text-span-4, .eb-doors .subscript-2 { color: #9cc3ff !important; }

/* doors: one continuous gradient across both halves (no seam), no gap; shadow only while opening (intro.js) */
html.eb-doors-on .eb-doors .div-block-3, html.eb-doors-on .eb-doors .div-block-2 {
  padding: 0 !important; background-image: linear-gradient(143deg, #001d51, #003085) !important; background-color: #001d51 !important;
  background-size: 100vw 100% !important; background-repeat: no-repeat !important; box-shadow: none;
}
html.eb-doors-on .eb-doors .div-block-3[data-dir="-1"], html.eb-doors-on .eb-doors .div-block-2[data-dir="-1"] { background-position: 0 0 !important; }
html.eb-doors-on .eb-doors .div-block-3[data-dir="1"], html.eb-doors-on .eb-doors .div-block-2[data-dir="1"] { background-position: 100% 0 !important; }
.eb-doors-cta {
  display: inline-block; margin-top: 10px; padding: 16px 44px; border-radius: 999px; background: #ffae00; color: #001d51 !important;
  font: 700 21px/1.2 "Varela Round", Arial, sans-serif; text-decoration: none; box-shadow: 0 10px 28px rgba(255, 174, 0, .35); transition: transform .15s, background-color .15s;
}
.eb-doors-cta:hover { background: #ffbd2e; transform: translateY(-2px); }
.eb-doors-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 479px) { .eb-doors-cta { font-size: 18px; padding: 13px 34px; } }

html.eb-doors-on .eb-doors .div-block-3, html.eb-doors-on .eb-doors .div-block-2 { position: relative; overflow: hidden; }
html.eb-doors-on .eb-doors .div-block-3 > img, html.eb-doors-on .eb-doors .div-block-2 > img { visibility: hidden; }
html.eb-doors-on .eb-doors [data-dir]::after {
  content: ""; position: absolute; top: 50%; width: var(--eb-logo-w, min(800px, 74vw)); aspect-ratio: 1492 / 816;
  background: url("/assets/site/eb-mark.png") center / 100% 100% no-repeat; transform: translateY(-50%); pointer-events: none;
}
html.eb-doors-on .eb-doors [data-dir="-1"]::after { right: calc(var(--eb-logo-w, min(800px, 74vw)) / -2); }
html.eb-doors-on .eb-doors [data-dir="1"]::after { left: calc(var(--eb-logo-w, min(800px, 74vw)) / -2); }
@media (max-width: 479px) { .eb-doors { --eb-logo-w: 250px; } }

/* ---------- Section-to-section scrolling (assets/site/sections.js) ---------- */
html { scroll-behavior: smooth; }
html.eb-stepping { scroll-behavior: auto; }                         /* computers: sections.js glides from section to section */
@media (hover: none), (pointer: coarse) { html.eb-snapping { scroll-snap-type: y proximity; } }   /* touch: gentle snapping */
html.eb-snapping .eb-snap { scroll-snap-align: start; }
html.eb-snapping { scroll-padding-top: var(--eb-nav, 89px); }   /* touch snapping lands under the sticky menu */
html.eb-snapping .footer-light { scroll-snap-align: end; }
.eb-fill { min-height: calc(100vh - var(--eb-nav, 89px)); box-sizing: border-box; }
.eb-fill.eb-fill-col { display: flex; flex-direction: column; justify-content: center; }
.eb-fill.eb-fill-row { align-items: center; }
.eb-fill.eb-fill-grid { align-content: center; }
section.logo-intro.eb-doors .eb-snap-open, section.logo-intro.eb-doors .eb-snap-top { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }
section.logo-intro.eb-doors .eb-snap-open { top: calc(100% - 100vh + var(--eb-nav, 89px)); }
section.logo-intro.eb-doors .eb-snap-top { top: 0; }
html.eb-snapping.eb-doors-on .eb-snap-open, html.eb-snapping.eb-doors-on .eb-snap-top { scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html.eb-a11y-still { scroll-behavior: auto; }

/* intro logo: starts centred in the visible part of the screen, with a thin gap down the middle like the header logo */
html.eb-doors-on .eb-doors [data-dir]::after {
  top: var(--eb-cy, 50%); width: calc(var(--eb-logo-w, min(800px, 74vw)) / 2); aspect-ratio: 746 / 816; background-size: 200% 100%;
}
html.eb-doors-on .eb-doors [data-dir="-1"]::after { right: var(--eb-gap, 5px); left: auto; background-position: left center; }
html.eb-doors-on .eb-doors [data-dir="1"]::after { left: var(--eb-gap, 5px); right: auto; background-position: right center; }
@media (max-width: 479px) { .eb-doors { --eb-gap: 2px; } }
.eb-doors-hint { bottom: var(--eb-hint-b, 118px) !important; }

/* accessibility button: bottom left; on phones it moves up while the cookie banner is open */
.eb-a11y-btn { top: auto !important; bottom: 18px; }
html.eb-consent-up .eb-a11y-btn { bottom: 18px; }
@media (max-width: 640px) { .eb-a11y-btn { bottom: 14px; } html.eb-consent-up .eb-a11y-btn { bottom: 236px; } }
.eb-a11y-panel { top: auto !important; bottom: 80px; transform: none !important; }
@media (max-width: 600px) { .eb-a11y-panel { bottom: 10px; } }

/* ---------- Footer: logo on one edge, newsletter on the other; social icons on the right; light-blue footer links ---------- */
@media (min-width: 768px) {
  .footer-wrapper-two { justify-content: space-between !important; align-items: center !important; flex-wrap: nowrap !important; }
  .footer-wrapper-two .footer-brand, .footer-wrapper-two .footer-brand.w--current { margin: 0 !important; }
  .footer-wrapper-two .footer-form { margin: 0 !important; }
  .footer-bottom { direction: ltr; flex-direction: row !important; justify-content: space-between !important; }   /* copyright left, social icons right */
  .footer-bottom .footer-social-block-two { margin: 0 !important; }
  .footer-bottom .footer-copyright { margin: 0 0 0 64px !important; }   /* clear of the accessibility button */
}
.eb-foot-link { color: #9cc3ff !important; text-decoration: none; }
.eb-foot-link:hover, .eb-foot-link:focus-visible { color: #fff !important; text-decoration: underline; }

/* ---------- Home: "בואו ללמוד מוסיקה" text as a box over the live-performance photo (section-6.eb-live) ---------- */
.section-6.eb-live { display: flex; align-items: center; justify-content: center; padding: 48px 20px; box-sizing: border-box; }
.eb-live-box {
  margin: 0 !important; padding: 40px 48px !important; max-width: 640px; width: 100% !important; box-sizing: border-box; border-radius: 26px;
  direction: rtl; text-align: center; background: rgba(0, 29, 81, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 0 2px rgba(255, 174, 0, .55);
}
.eb-live-box .heading-4 { margin-top: 0; color: #9cc3ff; font-size: 38px; line-height: 1.2; }
.eb-live-box .paragraph-3, .eb-live-box .paragraph-6 { width: auto; max-width: none; text-align: center; color: #fff; }
.eb-live-box .paragraph-3 { margin-top: 18px; }
.eb-live-box .bold-text-2 { font-size: 20px; line-height: 1.5; }
.eb-live-box .paragraph-6 { font-size: 17px; line-height: 1.7; color: #dce6ff; }
@media (max-width: 479px) {
  .section-6.eb-live { height: auto; min-height: 0; background-size: cover; background-attachment: scroll; padding: 32px 12px; }
  .eb-live-box { padding: 26px 18px !important; border-radius: 20px; }
  .eb-live-box .heading-4 { font-size: 26px; }
}

/* ---------- Piano hero (section-21): photo fills the left half only, fading into black; text 10% in from the right ---------- */
@media (min-width: 992px) {
  body .section-21 { position: relative; background-image: none !important; background-color: #000 !important; }
  body .section-21::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 50%; z-index: 0; pointer-events: none;
    background: linear-gradient(to left, #000 0, rgba(0, 0, 0, 0) 35%),
      url("/assets/66aaeb733f87bdd64315f980/69376492390fac678d5fe98f_z-baram-music-school--%D7%90%D7%A8%D7%96-%D7%91%D7%A8%D7%A2%D7%9D-%D7%91%D7%99%D7%AA-%D7%A1%D7%A4%D7%A8-%D7%9C%D7%9E%D7%95%D7%A1%D7%99%D7%A7-Piano-Lessones.jpg") center / cover no-repeat;
  }
  body .section-21 .div-block-41 { position: relative; z-index: 1; width: min(600px, 38vw); margin: auto 10vw auto auto; }
}

/* ---------- Desktop layout rule (Adam): floating content stays inside the middle 80% of the screen ----------
   Sections keep full-bleed backgrounds; their content gets 10vw side padding. Exempt: intro doors, full-width banner,
   video band, and the piano hero (its text is placed at 10vw itself). */
@media (min-width: 992px) {
  #main > section:not(.logo-intro):not(.section-21):not(.section-8):not([data-eb-free]):not(.section-3),
  #main > div.eb-snap:not(.logo-intro) { padding-left: 10vw !important; padding-right: 10vw !important; box-sizing: border-box; }
  .footer-light { padding-left: 10vw !important; padding-right: 10vw !important; box-sizing: border-box; }
  .footer-light .container-2 { width: 100% !important; max-width: none; }
  .footer-bottom .footer-copyright { margin: 0 !important; }
}
/* live box sits on the left edge of the 80% band so the stage and guitarist stay visible */
@media (min-width: 992px) { .section-6.eb-live { justify-content: flex-end; } .eb-live-box { max-width: 560px; } }

/* text first: when a photo sits beside text, the text gets its width and the photo takes what's left */
@media (min-width: 992px) {
  body .section-22 { gap: 48px; align-items: center; }
  body .section-22 .div-block-39-copy { flex: 0 0 min(560px, 42%); max-width: none; margin: 0 !important; }
  body .section-22 .div-block-42 { flex: 1 1 0; min-width: 0; max-width: none; }
  body .section-22 .image-28 { width: 100% !important; max-width: 100%; height: auto; max-height: 70vh; object-fit: cover; border-radius: 18px; }
  /* guitar "ללמוד גיטרה": Webflow's 220px right margin came on top of the 10vw band */
  body .section-15-copy .div-block-26 { margin-right: 0 !important; }
}

/* live video band: show the whole 16:9 frame (Adam's original framing, letterbox included) */
@media (min-width: 480px) {
  body .section-3, body .section-3 .background-video { height: 56.25vw; }
  body .section-3 .background-video video { object-fit: cover; }
}
/* home "שיעורי גיטרה לכל רמה": Erez photo full height on the left edge, no white line above; text stays 10vw from the right */
@media (min-width: 992px) {
  body #main > .section-8 { padding: 0 !important; }
  body .section-8 .div-block-13 { width: 100%; margin: 0; border-top: 0; height: 100%; min-height: calc(100vh - var(--eb-nav, 89px)); align-items: stretch; padding-right: 10vw; }
  body .section-8 .div-block-15 { flex: 0 0 50%; height: auto; margin-right: auto; }
  body .section-8 .image-8 { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
  body .section-8 .div-block-14 { align-self: center; margin-left: 4vw; }
}
/* Erez photo flows into the black background (no hard edge): photo layer behind, fading out under the text */
@media (min-width: 992px) {
  body .section-8 .div-block-13 { position: relative; background: #000; }
  body .section-8 .div-block-15 { position: absolute; inset: 0 auto 0 0; width: 68%; height: 100%; z-index: 0; margin: 0;
    -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 100%); mask-image: linear-gradient(to right, #000 55%, transparent 100%); }
  body .section-8 .image-8 { object-position: 20% top; }
  body .section-8 .div-block-14 { position: relative; z-index: 1; margin-left: auto; }
}
@media (min-width: 992px) {
  body .section-8 .div-block-13 { justify-content: flex-end; }
  body .section-8 .div-block-14 { margin: 0 !important; }
  body .section-8 .div-block-15 { width: 62%; }
}

/* ---------- Gallery: Erez's videos + even photo grid with lightbox ---------- */
.eb-erez { border-top: 0; }
.eb-videos.eb-videos-2 { grid-template-columns: repeat(2, 1fr); max-width: 1000px; margin: 0 auto; }
.eb-photos { padding: 64px 20px 72px; background: #000; direction: rtl; font-family: "Varela Round", Arial, sans-serif; }
.eb-photos .eb-latest-head h2 { color: #fff; }
.eb-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1200px; margin: 0 auto; }
.eb-photo { display: block; padding: 0; border: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; cursor: zoom-in; background: #111;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 174, 0, .35); }
.eb-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; transition: transform .4s; }
.eb-photo:hover img, .eb-photo:focus-visible img { transform: scale(1.05); }
.eb-photo:focus-visible { outline: 3px solid #ffae00; outline-offset: 3px; }
.eb-lightbox { border: 0; padding: 0; background: transparent; max-width: 92vw; max-height: 90vh; overflow: visible; }
.eb-lightbox::backdrop { background: rgba(0, 12, 40, .88); }
.eb-lightbox img { display: block; max-width: 92vw; max-height: 86vh; border-radius: 14px; }
.eb-lb-x { position: absolute; top: -14px; left: -14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #ffae00; color: #001d51; font: 700 24px/40px Arial; cursor: pointer; }
@media (max-width: 767px) { .eb-photo-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .eb-videos.eb-videos-2 { grid-template-columns: 1fr; } }
.eb-videos.eb-videos-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 991px) { .eb-videos.eb-videos-3 { grid-template-columns: 1fr 1fr; } .eb-videos.eb-videos-3 .eb-video:first-child { grid-column: 1 / -1; } }
@media (max-width: 600px) { .eb-videos.eb-videos-3 { grid-template-columns: 1fr; } }

/* ---------- Price cards (guitar, singing): all three fit ~80% of the screen height, even spacing, brand style ---------- */
@media (min-width: 768px) {
  body .pricing-comparison { padding-top: 3vh !important; padding-bottom: 3vh !important; }
  body .pricing-comparison .container-4 { max-width: 1100px; width: 100%; }
  body .pricing-wrapper { align-items: stretch; column-gap: clamp(16px, 2.2vw, 36px); }
  body .pricing-card, body .pricing-card.featured-pricing {
    position: relative; width: auto; margin: 0 !important; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    max-height: 80vh; padding: clamp(18px, 3vh, 32px) clamp(14px, 1.6vw, 26px) clamp(16px, 2.6vh, 28px) !important;
    border: 2px solid #9cc3ff; border-radius: 22px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); box-sizing: border-box;
  }
  body .pricing-card.featured-pricing { border: 3px solid #ffae00; box-shadow: 0 0 0 6px rgba(255, 174, 0, .18), 0 22px 50px rgba(0, 0, 0, .45); transform: translateY(-1.5vh); }
  body .pricing-tag { top: -16px; left: 50%; transform: translateX(-50%); background: #ffae00; color: #001d51; font-weight: 700; font-size: 14px; padding: 6px 18px; white-space: nowrap; }
  body .pricing-image { width: auto !important; height: clamp(70px, 15vh, 150px) !important; max-width: 85%; object-fit: contain; margin: 0 0 1vh; }
  body .pricing-title { font-size: clamp(26px, 4.4vh, 42px); line-height: 1.15; margin: .4vh 0 .6vh; white-space: nowrap; }
  body .pricing-price { font-size: clamp(18px, 2.6vh, 24px); line-height: 1.3; margin-bottom: .3vh; }
  body .pricing-price.strike { font-size: clamp(14px, 2vh, 18px); }
  body .pricing-card .paragraph-regular { font-size: 14px; color: #3b4a6b; }
  body .pricing-divider { margin: 1.6vh 12% 1.2vh; background: #9cc3ff; }
  body .pricing-feature-list { padding: 0; margin: 0 0 auto; align-self: stretch; gap: .9vh; }
  body .pricing-feature-list li { margin: 0; }
  body .pricing-feature, body .pricing-feature.d {
    background-size: 22px 22px !important; background-position: right center !important; padding: 2px 32px 2px 0 !important;
    min-height: 24px; font-size: clamp(14px, 1.9vh, 16px); line-height: 1.4; text-align: right;
  }
  body .pricing-card .b-n-w { display: flex; gap: 10px; width: 100%; margin-top: 2vh; }
  body .pricing-card .b-n-w .button-primary-2 {
    flex: 1 1 0; margin: 0; padding: 12px 8px; border-radius: 999px; text-align: center; letter-spacing: .5px;
    font: 700 15px/1.2 "Varela Round", Arial, sans-serif; text-transform: none;
  }
  body .pricing-card .b-n-w .button-primary-2:not(.l) { background: #ffae00; color: #001d51; border: 2px solid #ffae00; }
  body .pricing-card .b-n-w .button-primary-2:not(.l):hover { background: #ffbd2e; }
  body .pricing-card .b-n-w .button-primary-2.l { background: transparent; color: #001d51; border: 2px solid #001d51; }
  body .pricing-card .b-n-w .button-primary-2.l:hover { background: #001d51; color: #fff; }
}
@media (min-width: 768px) {
  body .pricing-wrapper { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  body .pricing-card .pricing-tag { background: #ffae00 !important; color: #001d51 !important; }
  body .pricing-card .b-n-w .button-primary-2 { white-space: nowrap; font-size: clamp(13px, 1.15vw, 15px); padding-left: 6px; padding-right: 6px; }
}
@media (max-width: 767px) {
  body .pricing-card .pricing-tag { background: #ffae00 !important; color: #001d51 !important; font-weight: 700; }
  body .pricing-card.featured-pricing { border-color: #ffae00; }
  body .pricing-card .b-n-w { display: flex; gap: 10px; width: 100%; }
  body .pricing-card .b-n-w .button-primary-2 { flex: 1 1 0; margin: 0; border-radius: 999px; text-transform: none; letter-spacing: 0; font: 700 15px/1.2 "Varela Round", Arial, sans-serif; padding: 12px 6px; }
  body .pricing-card .b-n-w .button-primary-2:not(.l) { background: #ffae00; color: #001d51; border: 2px solid #ffae00; }
  body .pricing-card .b-n-w .button-primary-2.l { background: transparent; color: #001d51; border: 2px solid #001d51; }
}
body .pricing-card .b-n-w .button-primary-2 { flex: 1 1 100%; font-size: 16px; padding-top: 13px; padding-bottom: 13px; }
@media (min-width: 768px) {
  body #main > .pricing-comparison { min-height: calc(100vh - var(--eb-nav, 89px)); height: auto; display: flex !important; flex-direction: column; justify-content: center !important; align-items: center !important; box-sizing: border-box; }
  body .pricing-comparison .container-4 { margin: 0 auto !important; }
}

/* SEO heading levels changed without changing looks: same specificity as the tag defaults (later file wins), Webflow class styles still win */
h2:where(.eb-h1to2) { font-size: 38px; line-height: 44px; margin-top: 20px; }
h1:where(.eb-h2to1) { font-size: 32px; line-height: 36px; margin-top: 20px; margin-bottom: 10px; }
.eb-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none; }
/* bigger "מומלץ" badge */
@media (min-width: 768px) {
  body .pricing-card .pricing-tag { top: -24px; font-size: 19px !important; padding: 10px 30px !important; box-shadow: 0 6px 18px rgba(255, 174, 0, .4); }
  body .pricing-card.featured-pricing { margin-top: 10px !important; }
}
@media (max-width: 767px) { body .pricing-card .pricing-tag { font-size: 17px; padding: 8px 24px; } }