/* ============================================================
   Siddur Ariel – Home Page Styles
   ============================================================ */

/* Home-only header background (this file loads only on the front page) */
.site-header { background: #fbf0e6; }

/* ── HOME HERO ── */
.home-hero {
  position: relative;
  min-height: 580px;
  overflow: visible;
  display: flex;
  align-items: stretch;
}

/* Background image layer */
.home-hero-bg {
  position: absolute;
  inset: 0;
  background: url('../images/home-hero-bg.png') center top / cover no-repeat;
  z-index: 0;
}

/* Content container */
.home-hero-inner {
  position: relative;
  z-index: 1;
  padding: 48px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

/* ── RIGHT: Text ── */
.home-hero-text {
  max-width: 600px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: -100px;
}

.hero-heading {
  font-size: 64px;
  font-weight: 700;
  color: var(--navy-dark);
  line-height: 1.15;
  margin-bottom: 14px;
  text-align: right;
}

.hero-sub {
  font-size: 26px;
  color: #555;
  line-height: 1.7;
  margin-bottom: 40px;
  text-align: right;
}

/* Feature icons row — RTL flex row already flows right→left, no reverse needed */
.hero-features {
  display: flex;
  gap: 0;
  margin-bottom: 28px;
}

.hero-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  flex: 1;
  padding: 0 20px;
  border-left: 1.5px solid rgba(0,0,0,0.10);
}
.hero-feature:last-child {
  border-left: none;
}

.hero-feature-icon {
  width: auto;
  height: auto;
  border-radius: 50%;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(34.94deg 46.75% 66.86%);
}
.hero-feature-icon svg {
  width: 38px;
  height: 38px;
}

.hero-feature-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hft-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
}

.hft-sub {
  font-size: 16px;
  color: #777;
}

/* ── CTA Buttons ── */
.hbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 12px;
  font-family: 'Assistant', sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  width: 100%;
}

/* WhatsApp button */
.hbtn-wa {
  background: #308637;
  color: #fff;
  padding: 10px 24px 10px 18px;
  margin-bottom: 20px;
  font-size: 17px;
  gap: 12px;
  border-radius: 14px;
}
.hbtn-wa:hover { background: #1ebe5d; color: #fff; }
.hbtn-wa-icon {
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hbtn-wa-icon svg {
  width: 38px;
  height: 38px;
}

/* Row of two buttons — RTL: first child (order) → RIGHT, second (preview) → LEFT */
.hbtn-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  direction: rtl;
}
.hbtn-row .hbtn { flex: 1; }

/* Order button */
.hbtn-order {
  background: var(--navy-dark);
  color: #fff;
  padding: 13px 20px;
}
.hbtn-order:hover { background: #0a1535; color: #fff; }

/* Preview button */
.hbtn-preview {
  background: transparent;
  color: var(--navy);
  padding: 13px 20px;
  border: 1.5px solid var(--navy);
}
.hbtn-preview:hover { background: var(--navy); color: #fff; }

/* Installments button */
.hbtn-installments {
  background: transparent;
  color: var(--navy);
  padding: 12px 20px;
  border: 1.5px solid #ccc;
  font-size: 14px;
  font-weight: 600;
}
.hbtn-installments:hover { border-color: var(--navy); }

/* ── LEFT: Book image ── */
.home-hero-book {
  flex: 0 0 420px;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  align-self: flex-end;
}

.book-img {
  max-height: 520px;
  width: auto;
  display: block;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.18));
  position: relative;
  z-index: 1;
}

/* Bestseller badge */
.bestseller-badge {
  position: absolute;
  top: 33px;
  left: 67px;
  z-index: 2;
}
.bestseller-badge-img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  display: block;
}

/* ══════════════════════════════════════
   ABOUT SECTION
══════════════════════════════════════ */
.about-section {
  background: #fbf6f4;
  padding: 72px 24px;
}
.about-inner {
  display: flex;
  align-items: center;
  gap: 60px;
}
.about-text {
  flex: 1;
  text-align: center;
}
.about-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--navy-dark);
  margin-bottom: 18px;
}
.about-desc {
  font-size: 22px;
  color: #555;
  line-height: 1.4;
  margin-bottom: 20px;
}
.about-signature {
  font-size: 22px;
  color: var(--gold-dark);
  font-style: italic;
  font-weight: 600;
  font-family: 'Assistant', cursive;
}
.about-img-wrap {
  flex: 0 0 460px;
}
.about-img {
  width: 100%;
  border-radius: 16px;
  display: block;
  object-fit: cover;
  max-height: 320px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

/* ══════════════════════════════════════
   WHY UNIQUE SECTION
══════════════════════════════════════ */
.why-section {
  background: #fbf6f4;
  padding: 0 24px 40px;
}
.why-inner {
}
.why-title {
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  color: var(--navy-dark);
  margin-bottom: 36px;
}
.why-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.why-card {
  background: transparent;
  border: 1.5px solid #e8e2d8;
  border-radius: 16px;
  padding: 12px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: box-shadow 0.2s, transform 0.2s;
}
.why-card:hover {
  box-shadow: 0 8px 24px rgba(27,45,107,0.10);
  transform: translateY(-3px);
}
.why-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.why-icon svg {
  width: 35px;
  height: 35px;
}
.why-card-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
}
.why-card-desc {
  font-size: 20px;
  color: #777;
  line-height: 1.6;
  font-weight: 500;
}

/* ══════════════════════════════════════
   WHAT'S INSIDE SECTION
══════════════════════════════════════ */
.inside-section {
  background: #fbf6f4;
  padding: 0 24px 25px;
}
.inside-inner {
  display: flex;
  align-items: self-start;
  gap: 60px;
}
.inside-text {
  flex: 1;
  text-align: right;
}
.inside-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--navy-dark);
  margin-bottom: 28px;
}
.inside-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.inside-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 22px;
  color: #444;
  line-height: 1.6;
  text-align: right;
}
.check-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #d3964f;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.inside-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid #2f8135;
  color: #2f8135;
  background: transparent;
  border-radius: 22px;
  padding: 12px 35px;
  font-size: 20px;
  font-weight: 600;
  font-family: 'Assistant', sans-serif;
  text-decoration: none;
  transition: all 0.2s;
}
.inside-wa-btn:hover { background: #2f8135; color: #fff; }
.inside-wa-btn:hover svg path { fill: #fff; }

.inside-book-wrap {
  flex: 0 0 50%;
}
.inside-book-img {
  width: 100%;
  display: block;
  border-radius: 12px;
}

/* ══════════════════════════════════════
   TESTIMONIALS SECTION
══════════════════════════════════════ */
.testimonials-section {
  background: #fbf6f4;
  padding: 30px 0;
}

.testi-heading {
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  color: var(--navy-dark);
  margin-bottom: 28px;
}
.testi-heading--slider {
  margin-top: 20px;
}

/* ── Grid cards ── */
.testi-grid {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1.2fr 0.9fr;
  gap: 0;
  align-items: center;
}

.testi-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 16px;
}

/* Card 4: image only, no text */
.testi-card--img-only {
  justify-content: flex-start; /* RTL: flex-start = right edge */
}

.testi-card-body {
  flex: 1;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.testi-quote {
  font-size: 18px;
  color: #333;
  line-height: 1.6;
}

.testi-name {
  font-size: 13px;
  color: #999;
}

.testi-stars {
  display: flex;
  gap: 2px;
}

/* Small image for cards 2 & 3 */
.testi-img {
  width: 120px;
  height: 130px;
  object-fit: cover;
  border-radius: 12px;
  flex-shrink: 0;
}

/* Large image for cards 1 & 4 */
.testi-img--big {
  width: 209px;
  height: 130px;
  border-radius: 14px;
}

/* ── Slider ── */
.testi-slider-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.testi-slides {
  flex: 1;
  display: flex;
  align-items: stretch;
  border: 1px solid #e8e2d8;
  border-radius: 40px;
  overflow: hidden;
  min-height: 140px;
  padding: 0 58px; /* inner space for overlay buttons on each side */
}

/* Each pair wraps two slides side-by-side */
.testi-pair {
  display: none;
  flex: 1;
  align-items: center;
}
.testi-pair--active {
  display: flex;
}

.testi-slide {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 28px 65px;
}

.testi-avatar {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #e8e2d8;
}

.testi-slide-body {
  flex: 1;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.testi-slide-quote {
  font-size: 18px;
  color: #444;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.testi-slide-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--navy);
}

.testi-sep {
  width: 1px;
  height: 70px;
  background: #ddd6cc;
  flex-shrink: 0;
}

.testi-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 54px;
  height: 54px;
  border-radius: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  flex-shrink: 0;
  transition: color 0.2s;
}
/* prev (›) sits on the RIGHT edge */
.testi-nav--prev { right: 15px; }
/* next (‹) sits on the LEFT edge */
.testi-nav--next { left: 15px; }

.testi-nav:hover {
  color: var(--gold);
}

/* ══════════════════════════════════════
   ENDORSEMENTS SECTION
══════════════════════════════════════ */
.endorsements-section {
  background: #fbf6f4;
  padding: 0;
}

.endorse-heading {
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  color: var(--navy-dark);
  margin-bottom: 28px;
}

.endorse-heading--families {
  margin-top: 25px;
  margin-bottom: 24px;
}

/* ── Rabbis 6-column grid ── */
.rabbis-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 40px;
}

.rabbi-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  border-radius: 20px;
  border: 1px solid #e8e2d8;
  overflow: hidden;
}

.rabbi-img {
  width: 100%;
  aspect-ratio: 1 / 0.8;
  object-fit: cover;
  object-position: top;
  border-radius: 16px 16px 0 0;
  background: #ede8e0;
}

.rabbi-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy-dark);
  line-height: 1.3;
}

.rabbi-role {
  font-size: 15px;
  color: #999;
  margin-bottom: 5px;
}

/* ── Families photo strip ── */
.families-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
}

.family-img {
  width: 100%;
  aspect-ratio: 1.5;
  object-fit: cover;
  border-radius: 12px;
}

/* ══════════════════════════════════════
   FAQ + CTA SECTION
══════════════════════════════════════ */
.faq-cta-section {
  position: relative;
  background:
    linear-gradient(to top, rgb(182 158 128) 0%, transparent 180px),
    #fbf6f4 url('../images/cts-last-bg.png') right -305px / 80% auto no-repeat;
}

/* ══════════════════════════════════════
   FAQ SECTION
══════════════════════════════════════ */
.faq-section {
  background: transparent;
  padding: 48px 0 0;
}

.faq-heading {
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  color: var(--navy-dark);
  margin-bottom: 28px;
}

.faq-inner {
  display: flex;
  align-items: center;
  gap: 48px;
  justify-content: end;
}

/* RTL: book FIRST → RIGHT */
.faq-book-wrap {
  flex: 0 0 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-book-img {
  width: 100%;
  max-width: 240px;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.12));
}

/* FAQ list — constrained width, right side open for bg tree */
.faq-list {
  flex: 0 0 82%;
  max-width: 90%;
}

.faq-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 30px 4px 50px;
  border: 1px solid #e8e2d8;
  border-bottom: 0;
  border-radius: 6px;
  cursor: pointer;
  gap: 16px;
}

.faq-item--last {
  border-bottom: 1px solid #e8e2d8;
}

.faq-q {
  font-size: 18px;
  font-weight: 600;
  color: var(--navy-dark);
  text-align: right;
  flex: 1;
}

.faq-toggle {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  font-size: 24px;
  font-weight: 800;
  color: var(--navy);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.2s;
}

.faq-toggle.open {
  transform: rotate(45deg);
}

.faq-answer {
  display: none;
  padding: 12px 0 16px;
  font-size: 16px;
  color: #666;
  line-height: 1.7;
  text-align: right;
  border-bottom: 1px solid #e8e2d8;
}

.faq-answer.open {
  display: block;
}

/* When open: connect the question to the answer (square bottom corners),
   and box the open answer with left/right + bottom borders */
.faq-item.active {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.faq-item.active + .faq-answer.open {
  border-left: 1px solid #e8e2d8;
  border-right: 1px solid #e8e2d8;
  border-bottom: 1px solid #e8e2d8;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  padding-inline: 30px;
}

/* ══════════════════════════════════════
   CTA STRIP
══════════════════════════════════════ */
.cta-section {
  background: transparent;
  padding: 10px 0 14px;
}

.cta-inner {
  position: relative;
  z-index: 1;
}

.cta-inner {
  display: flex;
  align-items: center;
  gap: 32px;
}

/* RTL: book FIRST → RIGHT */
.cta-book-wrap {
  flex: 0 0 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cta-book-img {
  width: 100%;
  max-width: 340px;
  object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.14));
  position: absolute;
  bottom: 5px;
}

/* CTA content CENTER */
.cta-content {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.cta-title {
  font-size: 30px;
  font-weight: 700;
  color: var(--navy-dark);
  line-height: 1.2;
}

.cta-sub {
  font-size: 26px;
  color: var(--navy-dark);
  margin-bottom: 14px;
}

.cta-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 40px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
}

.cta-btn--primary {
  background: var(--navy-dark);
  color: #fff;
  border: 2px solid var(--navy-dark);
}

.cta-btn--primary:hover {
  background: var(--navy);
  border-color: var(--navy);
}

.cta-btn--outline {
  background: #f3f0edab;
  color: var(--navy-dark);
  border: 2px solid #b0a99e;
}

.cta-btn--outline:hover {
  border-color: var(--navy);
  color: var(--navy);
}

/* Badge: text block RIGHT (first in DOM), image+label LEFT (last in DOM) */
.cta-badge-wrap {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  margin-left: -50px;
}

.cta-badge-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  max-width: 110px;
}

.cta-badge-img-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.cta-badge-img {
  width: 125px;
  height: 125px;
  object-fit: contain;
  border-radius: 50%;
}

.cta-badge-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy-dark);
  line-height: 1.3;
  text-align: center;
}

.cta-guarantee-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy-dark);
  line-height: 1.3;
  text-align: left;
}

.cta-guarantee-text {
  font-size: 14px;
  color: var(--navy-dark);
  line-height: 1.4;
  text-align: left;
  font-weight: 600;
}

/* ══════════════════════════════════════
   VIDEO SECTION
══════════════════════════════════════ */
.video-section {
  background: var(--navy-dark);
  overflow: hidden;
}

.video-inner {
  display: flex;
  align-items: stretch;
}

/* RIGHT: Text (RTL first child) */
.video-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 60px;
  gap: 14px;
}

.video-title {
  font-size: 32px;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
  margin: 0;
}

.video-sub {
  font-size: 16px;
  color: rgba(255,255,255,0.75);
  margin: 0;
}

.video-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid rgba(255,255,255,0.6);
  color: #fff;
  background: transparent;
  border-radius: 10px;
  padding: 10px 30px;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Assistant', sans-serif;
  text-decoration: none;
  transition: all 0.2s;
  margin-top: 6px;
}
.video-btn:hover {
  background: rgba(255,255,255,0.12);
}

/* LEFT: Thumbnail (RTL second child) */
.video-thumb {
  flex: 0 0 380px;
  position: relative;
  overflow: hidden;
  clip-path: inset(0);
  background: #000;
  border-radius: 12px;
  margin: 28px 0;
}

.video-embed-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}

.video-embed-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 12px;
}

.video-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
  transition: opacity 0.3s;
}

.video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.20);
  transition: opacity 0.3s;
}
.video-play-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  flex-shrink: 0;
}
.video-embed-wrap:hover .video-play-btn {
  background: rgba(0,0,0,0.80);
  transform: scale(1.08);
}

/* ══════════════════════════════════════
   RESPONSIVE – HOME PAGE
══════════════════════════════════════ */

/* ── Between 1200px and 900px ── */
@media (max-width: 1200px) and (min-width: 900px) {
  .cta-badge-wrap { margin-left: 0; }

  /* Testi grid: drop to 2 cols, hide card 3 & 4 */
  .testi-grid { grid-template-columns: 1fr 1fr; }
  .testi-card:nth-child(3),
  .testi-card:nth-child(4) { display: none; }
  .testi-img--big { width: 160px; }
  .testi-quote { font-size: 16px; }
}

/* ── Tablet: 1024px ── */
@media (max-width: 1024px) {
  .home-hero-inner { padding: 40px 28px; gap: 28px; }
  .hero-heading { font-size: 48px; }
  .home-hero-book { flex: 0 0 340px; }
  .book-img { max-height: 420px; }

  /* About */
  .about-inner { gap: 36px; }
  .about-img-wrap { flex: 0 0 360px; }

  /* Why cards */
  .why-cards { grid-template-columns: repeat(2, 1fr); }

  /* Inside */
  .inside-inner { gap: 36px; }

  /* Endorsements */
  .rabbis-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .families-grid { grid-template-columns: repeat(4, 1fr); }

  /* FAQ CTA */
  .faq-list { flex: 0 0 90%; max-width: 95%; }
}

/* ── Tablet: 900px ── */
@media (max-width: 900px) {
  /* Hero */
  .home-hero-inner { flex-direction: column-reverse; padding: 32px 20px; gap: 20px; }
  .home-hero-text { max-width: 100%; margin-bottom: 0; }
  .home-hero-book { flex: none; width: 100%; max-width: 300px; margin: 0 auto; }
  .hero-heading { font-size: 38px; }
  .hero-sub { font-size: 20px; margin-bottom: 24px; }
  .book-img { max-height: 340px; }
  .bestseller-badge { top: 20px; left: 40px; }
  .bestseller-badge-img { width: 80px; height: 80px; }
  .hero-features { flex-wrap: wrap; gap: 0; }
  .hero-feature { flex: 1 1 33%; padding: 8px 12px; border-left: none; border-bottom: 1.5px solid rgba(0,0,0,0.08); }
  .hft-title { font-size: 14px; }
  .hft-sub { font-size: 13px; }

  /* About */
  .about-section { padding: 40px 20px; }
  .about-inner { flex-direction: column; gap: 24px; }
  .about-img-wrap { flex: none; width: 100%; }
  .about-desc { font-size: 18px; }

  /* Why */
  .why-section { padding: 0 20px 32px; }
  .why-cards { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .why-card-title { font-size: 17px; }
  .why-card-desc { font-size: 17px; }

  /* Inside */
  .inside-section { padding: 0 20px 20px; }
  .inside-inner { flex-direction: column; gap: 24px; }
  .inside-book-wrap { flex: none; width: 100%; }
  .inside-list li { font-size: 18px; }

  /* Video */
  .video-section { padding: 32px 20px; }
  .video-inner { flex-direction: column-reverse; gap: 24px; }
  .video-thumb { flex: none; width: 100%; max-width: 480px; margin: 0 auto; }
  .video-content { max-width: 100%; }
  .video-text { padding: 30px 0; }

  /* Testimonials */
  .testi-grid { grid-template-columns: 1fr 1fr; }
  .testi-card--img-only { display: none; }
  .testi-slide { padding: 20px 30px; gap: 14px; }
  .testi-slides { padding: 0 20px; }

  /* Endorsements */
  .rabbis-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .families-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }

  /* FAQ CTA */
  .faq-cta-section { background-position: right -100px top; background-size: 60% auto; }
  .faq-inner { justify-content: flex-start; }
  .faq-list { flex: 0 0 100%; max-width: 100%; }
  .faq-item { padding: 4px 20px 4px 30px; }
  .cta-inner { flex-wrap: wrap; gap: 20px; justify-content: center; }
  .cta-book-wrap { flex: 0 0 120px; }
  .cta-book-img { max-width: 220px; position: static; }
  .cta-badge-wrap { margin-left: 0; }
}

/* ── Mobile: 768px ── */
@media (max-width: 768px) {
  /* Hero */
  .home-hero { min-height: auto; }
  .home-hero-inner { padding: 24px 16px; gap: 16px; }
  .hero-heading { font-size: 32px; }
  .hero-sub { font-size: 17px; margin-bottom: 20px; }
  .home-hero-book { max-width: 260px; }
  .book-img { max-height: 280px; }
  .hbtn { font-size: 15px; }
  .hbtn-wa { font-size: 15px; padding: 10px 18px 10px 14px; }
  .hbtn-wa-icon { width: 32px; height: 32px; }
  .hbtn-row { gap: 12px; margin-bottom: 14px; }

  /* Why */
  .why-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* Testimonials slider */
  .testi-slides { border-radius: 20px; padding: 0 10px; }
  .testi-pair { flex-direction: column; }
  .testi-sep { display: none; }
  .testi-slide { padding: 18px 20px; gap: 12px; }
  .testi-slide-quote { font-size: 15px; }
  .testi-nav { width: 40px; height: 40px; }

  /* Endorsements */
  .rabbis-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .families-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }

  /* CTA section */
  .cta-section { padding: 20px 0; }
  .cta-inner { flex-direction: column; align-items: center; text-align: center; }
  .cta-content { width: 100%; }
  .cta-title { font-size: 22px; }
  .cta-sub { font-size: 20px; }
  .cta-btns { flex-direction: column; gap: 10px; }
  .cta-btn { width: 100%; justify-content: center; }
  .cta-badge-wrap { flex-direction: row; align-items: center; margin-left: 0; width: auto; justify-content: center; gap: 16px; margin: 0 auto; }
  .cta-badge-text { text-align: right; flex: 0 0 auto; }
  .cta-badge-img-group { flex-shrink: 0; }

  /* FAQ */
  .faq-section { padding: 28px 0 0; }
  .faq-item { padding: 4px 14px 4px 20px; }
  .faq-q { font-size: 15px; }
  .faq-cta-section { background-image: none; background: #fbf6f4; }
  .faq-cta-section { background: linear-gradient(to top, rgb(182 158 128) 0%, transparent 180px), #fbf6f4; }
}

/* ── Small Mobile: 480px ── */
@media (max-width: 480px) {
  /* Hero */
  .home-hero-inner { padding: 18px 12px; }
  .hero-heading { font-size: 26px; }
  .hero-sub { font-size: 15px; }
  .home-hero-book { max-width: 220px; }
  .book-img { max-height: 240px; }
  /* 2-col grid: items 1 & 2 side by side, item 3 full width */
  .hero-features { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .hero-feature { flex: none; width: 100%; border-bottom: none; border-left: none; border-right: none; padding: 10px 8px; }
  .hero-feature:nth-child(1) { border-left: 1.5px solid rgba(0,0,0,0.08); }
  .hero-feature:nth-child(3) { grid-column: 1 / -1; border-left: none; }
  .hbtn-row { flex-direction: column; gap: 10px; }
  .hbtn-installments { font-size: 13px; }

  /* About */
  .about-title { font-size: 22px; }
  .about-desc { font-size: 16px; }

  /* Why */
  .why-cards { grid-template-columns: 1fr; gap: 10px; }
  .why-card-title { font-size: 16px; }
  .why-card-desc { font-size: 15px; }

  /* Inside */
  .inside-list li { font-size: 15px; }
  .inside-title { font-size: 22px; }

  /* Video */
  .video-thumb { max-width: 100%; }

  /* Testimonials */
  .testi-grid { grid-template-columns: 1fr; }
  .testi-heading { font-size: 20px; }
  .testi-slide { flex-direction: column; align-items: center; text-align: center; padding: 16px; }
  .testi-avatar { width: 60px; height: 60px; }

  /* Endorsements */
  .rabbis-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .families-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .endorse-heading { font-size: 20px; }

  /* FAQ */
  .faq-q { font-size: 14px; }
  .faq-answer p { font-size: 14px; }
  .cta-title { font-size: 18px; }
  .cta-sub { font-size: 16px; }
  .cta-btns { flex-direction: column; gap: 10px; width: 100%; }
  .cta-btn { width: 100%; justify-content: center; }
}