/* ==========================================================================
   PAGE / home — SITE HOME PAGE (רווחה היא לכולם)
   Figma: "HP" (Home Page)
   No literal Figma spec dump was provided — values matched by eye from
   the screenshot. Reuses components/_circle-photo-hero.css,
   components/_content-card.css, components/_newsletter-card.css.
   The bubble tag-cloud, Venn diagram, and sticky-note testimonials are
   custom to this page (no other page needs them) — built as simple,
   reasonable approximations rather than pixel-exact recreations of the
   scattered/rotated Figma layout.
   ========================================================================== */

/* Figma "Hero" — confirmed against the real reference screenshot
   (HP__-_7.jpg): photo circle on the left, text on the right; a
   hidden "stats" row (8+/2,000+/50+) and a hidden quote-card layer
   exist in the Figma file but are switched off (visibility:hidden)
   and do not appear in the rendered design, so neither is built here. */
.home-hero {
  max-width: 1820px;
  margin: 0 auto;
  padding: 0px 0px 40px 200px;
  display: flex;
  direction: rtl;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.home-hero-body {
  flex: 1;
  min-width: 0;
  max-width: 647px;
  text-align: right;
}

/* Figma: font-size 86 / line-height 88 / weight 300 / letter-spacing -0.43,
   width 635px. "רווחה היא" is Navy Blue; "לכולם" is Hopbush pink (#CB6DA7)
   — confirmed by sampling the reference screenshot's pixels directly. */
.home-hero-title {
  font-family: var(--font-main);
  font-weight: 300;
  font-size: clamp(44px, 4.4vw, 86px);
  line-height: 1.03;
  letter-spacing: -0.43px;
  color: var(--color-primary-navy);
  margin-bottom: 20px;
}

.home-hero-title-accent {
  color: var(--color-pink-accent);
}

/* Figma: font-size 24 / line-height 33 / weight 400, color Navy Blue. */
.home-hero-subtitle {
  font-family: var(--font-main);
  font-weight: 400;
  font-size: 24px;
  line-height: 33px;
  color: var(--color-primary-navy);
  margin-bottom: 24px;
  max-width: 647px;
}

/* Figma: gap 14, padding-top 8. DOM order matches visual order in a
   direction:rtl row: solid "התחילו ללמוד" renders rightmost, outline
   "מהי שיטת PIVOT" to its left — verified against the reference image. */
.home-hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 8px;
}

.home-hero-btn {
  font-family: var(--font-main);
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  border-radius: 999px;
  padding: 14px 32px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  white-space: nowrap;
}

/* Figma: outline button 213x50, border 1px solid Navy Blue, radius 999,
   font 20/24 SemiBold, color Navy Blue. */
.home-hero-btn--outline {
  background: transparent;
  border: 1px solid var(--color-primary-navy);
  color: var(--color-primary-navy);
  width: 213px;
}

/* Figma: solid button 179x50, bg #CB6DA7, shadow 0 12px 26px -10px rgba(194,45,175,.5), white text. */
.home-hero-btn--solid {
  background: var(--color-pink-accent);
  border: none;
  color: var(--color-white);
  width: 179px;
  box-shadow: 0px 12px 26px -10px rgba(194, 45, 175, 0.5);
}

/* --- Hero media: circular photo (Figma "Ellipse 57", 613x613, border
   4px #E89DC4, shadow 0 18px 30px -10px rgba(86,41,80,.66)) + a round
   pink play button (76x76) sitting mostly outside the circle at its
   bottom-left. No real photography asset exists for this hero shot
   (to be swapped in by hand), so a soft gradient placeholder stands
   in for the 613x613 image itself. */
.home-hero-media {
  position: relative;
  flex-shrink: 0;
  width: clamp(300px, 32vw, 613px);
  aspect-ratio: 1 / 1;
  margin-inline-start: 56px;
}

.home-hero-media-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid #E89DC4;
  box-shadow: 0px 18px 30px -10px rgba(86, 41, 80, 0.66);
  background: linear-gradient(135deg, #F4D9E8 0%, #CFE7F0 60%, #DCEEE6 100%);
  overflow: hidden;
  box-sizing: border-box;
}

/* TEMP hero photo — swap the <img src> in index.html by hand. */
.home-hero-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-hero-media-play {
  position: absolute;
  left: 50px;
  bottom: 50px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: none;
  background: var(--color-pink-accent);
  color: var(--color-white);
  box-shadow: 0px 18px 30px -10px rgba(194, 45, 175, 0.667);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* --- Tagline block ---
   Figma: wordmark "P I V O T" — font 56 / line 68 / weight 500 /
   letter-spacing 19.04, Navy Blue. h2 — font 40 / line 50 / weight
   400, Navy Blue, width 490 (centered). No vector logo asset exists,
   so the wordmark is set as styled text instead of an <img>. */
.home-tagline {
  max-width: 560px;
  margin: 56px auto;
  text-align: center;
}

.home-tagline-logo {
  font-family: var(--font-main);
  font-weight: 500;
  font-size: 56px;
  line-height: 1.2;
  letter-spacing: 8px;
  color: var(--color-primary-navy);
  margin-bottom: 16px;
}

.home-tagline-text {
  font-family: var(--font-main);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.25;
  color: var(--color-primary-navy);
  max-width: 490px;
  margin: 0 auto;
}

/* --- Bubble tag cloud ---
   Layout: a 20-column x 10-row CSS grid — NO position:absolute. Every
   bubble (and the centred prompt) is placed with grid-column/grid-row,
   so the whole cloud stretches edge-to-edge across the section: the
   outermost bubbles sit flush against the right and left edges exactly
   like the Figma frame, and the scatter scales with the viewport width.

   Each bubble spans 2 columns x 3 rows and is centred in that area, so
   a bubble starting at column N is centred on the N/20 line (measured
   from the right, since the page is RTL). Positions were read off the
   Figma screenshot and snapped to that grid. Edge bubbles override
   justify-self/align-self to touch the frame edge. */
.home-bubble-section {
  width: calc(100% - 80px);
  max-width: 1600px;
  margin: 0 auto 56px;
}

.home-bubble-cloud {
  display: grid;
  grid-template-columns: repeat(20, minmax(0, 1fr));
  grid-template-rows: repeat(10, 56px);
}

.home-bubble-prompt {
  grid-column: 8 / span 6;
  grid-row: 3 / span 5;
  align-self: center;
  justify-self: center;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}

.home-bubble-prompt-flower {
  width: 150px;
  height: auto;
  margin-bottom: 4px;
}

/* Figma: font-size 52 / line-height 62 / weight 500 / letter-spacing -0.26, Navy Blue. */
.home-bubble-prompt-title {
  font-family: var(--font-main);
  font-weight: 500;
  font-size: clamp(30px, 2.8vw, 52px);
  line-height: 1.19;
  letter-spacing: -0.26px;
  color: var(--color-primary-navy);
  margin: 0;
  white-space: nowrap;
}

/* Figma: font-size 24 / weight 400, Navy Blue. */
.home-bubble-prompt-sub {
  font-family: var(--font-main);
  font-weight: 400;
  font-size: clamp(18px, 1.3vw, 24px);
  color: var(--color-primary-navy);
  margin: 8px 0 0;
}

.home-bubble {
  --rim: var(--color-bubble-rose-border);
  position: relative; /* anchor for the ::before stitch ring only */
  grid-column-end: span 2;
  grid-row-end: span 3;
  justify-self: center;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1.5px solid var(--rim);
  box-shadow: 0 6px 14px -6px rgba(0, 0, 80, 0.28);
  font-family: var(--font-main);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: var(--color-primary-navy);
  padding: 18px;
  line-height: 1.2;
  transition: transform 0.2s ease;
}

.home-bubble:hover,
.home-bubble:focus-visible {
  transform: scale(1.06);
}

.home-bubble:focus-visible {
  outline: 2px solid var(--color-primary-navy);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .home-bubble { transition: none; }
  .home-bubble:hover, .home-bubble:focus-visible { transform: none; }
}

/* TEMP "embroidered rim" — Figma bubbles are stitched fabric patches
   (Frame---CircleNN.png). Until the real per-colour patch images are
   exported, a ring of radial stitch marks is drawn in CSS so every
   bubble has a frame. Replace with background-image once the assets
   exist (like --rose / --purple below). */
.home-bubble::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--rim) 0 2.2deg, transparent 2.2deg 7.5deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
  pointer-events: none;
}

.home-bubble--sm { width: 88px;  height: 88px;  font-size: 14px; padding: 14px; }
.home-bubble--md { width: 118px; height: 118px; font-size: 15px; }
.home-bubble--lg { width: 138px; height: 138px; font-size: 16px; }

.home-bubble--rose   { --rim: var(--color-bubble-rose-border);   background-color: var(--color-bubble-rose-bg); }
.home-bubble--olive  { --rim: var(--color-bubble-olive-border);  background-color: var(--color-bubble-olive-bg); }
.home-bubble--navy   { --rim: var(--color-bubble-navy-border);   background-color: var(--color-bubble-navy-bg); }
.home-bubble--purple { --rim: var(--color-bubble-purple-border); background-color: var(--color-bubble-purple-bg); }
.home-bubble--maroon { --rim: var(--color-bubble-maroon-border); background-color: var(--color-bubble-maroon-bg); }
.home-bubble--tan    { --rim: var(--color-bubble-tan-border);    background-color: var(--color-bubble-tan-bg); }

/* Real Figma patch textures exist for these two colour families only
   (Circle02 = pink, Circle01 = lavender) — they carry their own stitched
   edge, so the CSS stitch ring is switched off for them. */
.home-bubble--rose,
.home-bubble--purple {
  background-size: cover;
  background-position: center;
  border-color: transparent;
}
.home-bubble--rose   { background-image: url(../../images/backgrounds/Circle02.png); }
.home-bubble--purple { background-image: url(../../images/backgrounds/Circle01.png); }
.home-bubble--rose::before,
.home-bubble--purple::before { content: none; }

/* Grid placement (column counted from the RIGHT edge because of RTL;
   row counted from the top). Left cluster = columns 14–20, right
   cluster = columns 1–7, prompt = columns 8–13. */
.home-bubble--pos-1  { grid-column-start: 19; grid-row-start: 1; justify-self: end; align-self: start; } /* מיניות — flush left edge */
.home-bubble--pos-2  { grid-column-start: 17; grid-row-start: 1; }  /* שינה */
.home-bubble--pos-3  { grid-column-start: 14; grid-row-start: 2; }  /* ויסות חושי */
.home-bubble--pos-4  { grid-column-start: 18; grid-row-start: 4; }  /* תקשורת */
.home-bubble--pos-5  { grid-column-start: 15; grid-row-start: 5; }  /* פתרון משברים */
.home-bubble--pos-6  { grid-column-start: 17; grid-row-start: 8; align-self: end; }  /* גמילה וצרכים */
.home-bubble--pos-7  { grid-column-start: 14; grid-row-start: 8; }  /* היגיינה */
.home-bubble--pos-8  { grid-column-start: 6;  grid-row-start: 2; }  /* החזקה והעסקה */
.home-bubble--pos-9  { grid-column-start: 1;  grid-row-start: 2; justify-self: start; } /* תקשורת — flush right edge */
.home-bubble--pos-10 { grid-column-start: 3;  grid-row-start: 4; }  /* אכילה */
.home-bubble--pos-11 { grid-column-start: 5;  grid-row-start: 5; }  /* מיניות */
.home-bubble--pos-12 { grid-column-start: 1;  grid-row-start: 6; justify-self: start; } /* ויסות חושי — flush right edge */
.home-bubble--pos-13 { grid-column-start: 7;  grid-row-start: 8; }  /* אינטרוספציה */
.home-bubble--pos-14 { grid-column-start: 3;  grid-row-start: 8; align-self: end; }  /* התנהגות גולמית */

@media (max-width: 1279px) {
  .home-bubble-cloud { grid-template-rows: repeat(10, 48px); }
  .home-bubble--md { width: 104px; height: 104px; font-size: 14px; }
  .home-bubble--lg { width: 120px; height: 120px; font-size: 15px; }
  .home-bubble--sm { width: 80px;  height: 80px;  font-size: 13px; }
  .home-bubble-prompt-flower { width: 110px; }
}

@media (max-width: 1023px) {
  /* Too narrow for the scatter — fall back to a centred wrap so
     bubbles never overlap. Prompt stays first. */
  .home-bubble-section { width: calc(100% - 40px); }

  .home-bubble-cloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 20px;
  }

  .home-bubble-prompt {
    flex: 0 0 100%;
    margin-bottom: 16px;
  }

  .home-bubble-prompt-title { white-space: normal; }
}

/* --- Founder quote ---
   Reuses the shared "polaroid photo + text" component
   (assets/css/components/_detailed-value.css, .cat-value__* — the same
   dashed-border/play-button pattern already built for Category.html /
   Tool.html) instead of a bespoke card, per instruction. Only the
   page-specific sizing (288x435 photo vs. that component's 688x500
   default) and the founder quote's own type (42/59) are overridden here. */
.home-founder-section {
  max-width: 1362px;
  margin: 0 auto 64px !important;
}

.home-founder-container {
  flex-direction: row-reverse;
  align-items: center;
  gap: 49px !important;
  margin: 0 !important;
  justify-content: flex-start !important;
}

.home-founder-media {
  flex: 0 0 288px !important;
  width: 288px !important;
  height: 435px !important;
}

.home-founder-media .cat-value__polaroid-bg {
  border-radius: 20px;
  background: transparent;
}

.home-founder-media .cat-value__image-card {
  border-radius: 14px;
  box-shadow: 0px 0px 0px;
}

.home-founder-photo-placeholder {
  width: 100%;
  height: 100%;
  /* background: linear-gradient(135deg, #CFE7F0, #F4D9E8); */
}

.home-founder-caption {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  z-index: 4;
  text-align: center;
}

.home-founder-name {
  font-family: var(--font-main);
  font-weight: 500;
  font-size: 22px;
  color: var(--color-primary-navy);
}

.home-founder-role {
  font-family: var(--font-main);
  font-weight: 500;
  font-size: 18px;
  text-transform: uppercase;
  color: var(--color-primary-navy);
}

.home-founder-content {
  /* align-items: flex-end !important; */
  gap: 25px !important;
  max-width: 972px;
  width: 100%;
}

/* Figma: 964px wide, font 42 / line 59 / weight 400, Navy Blue —
   overrides the shared component's own (smaller, 21px) .cat-value__text. */
.home-founder-quote.cat-value__text {
  font-size: clamp(24px, 2.4vw, 42px);
  line-height: 1.4;
  color: var(--color-primary-navy);
  /* max-width: 964px; */
}

.home-founder-quote-accent {
  color: var(--color-pink-accent);
}

.home-founder-cta {
  align-self: flex-start;
}

/* --- Popular knowledge grid --- */
.home-section {
  max-width: var(--container-inner-max);
  margin: 0 auto 56px;
}

/* Figma "ידע פופולרי" heading: font 36 / line 48 / weight 500 / letter-spacing 1px,
   text-align CENTER (this section and "קולות של שינוי" are centered-column
   layouts; only the "לומדים מהחיים" header+button row stays right-aligned —
   see the .home-section-header-row override below). */
.home-section-title {
  font-family: var(--font-main);
  font-weight: 500;
  font-size: 36px;
  line-height: 48px;
  letter-spacing: 1px;
  color: var(--color-primary-navy);
  text-align: center;
  margin-bottom: 24px;
}

/* "קולות של שינוי" / "לומדים מהחיים" headings run bigger (font 42). */
.home-testimonials-body .home-section-title,
.home-section-header-row .home-section-title {
  font-size: 42px;
  line-height: 1.1;
  text-align: start;
  margin-bottom: 8px;
}

/* Figma "ידע פופולרי" cards — now the shared
   assets/css/components/_badge-card.css (.badge-card / .badge-card__*)
   component; see that file's header comment for why it was promoted
   out of this page. Nothing card-specific is left to override here. */

.home-see-all-row {
  text-align: center;
  margin-top: 100px;
}

/* --- Why Pivot / Venn diagram --- */
.home-why-section {
  max-width: 1362px;
  margin: 0 auto 64px;
  display: flex;
  direction: rtl;
  align-items: center;
  gap: 100px;
  justify-content: center;
}

.home-why-body {
  min-width: 0;
  text-align: right;
}

/* Figma: "למה לבחור בגישת PIVOT? התשובה נמצאת ב-DNA שלנו" — font 42 / weight 500, Navy Blue. */
.home-why-title {
  font-family: var(--font-main);
  font-weight: 500;
  font-size: clamp(28px, 2.8vw, 42px);
  line-height: 0.88; /* Figma: 42px font / 37px line-height (tight, two lines) */
  color: var(--color-primary-navy);
  margin: 0;
}

/* Figma: font 24 / line 35 / weight 400, color #183B51 (Text Slate). */
.home-why-text {
  font-family: var(--font-main);
  font-weight: 400;
  font-size: 24px;
  line-height: 35px;
  color: var(--color-text-slate);
  margin: 20px 0 24px;
  max-width: 568px;
}

.home-venn {
  position: relative;
  width: 380px;
  height: 340px;
  flex-shrink: 0;
}

/* Figma labels ("הומאנית", "אפירמיטיבית", "אקולוגית"): font 24 / line 36 / weight 500, Navy Blue. */
.home-venn-circle {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 1.5px dashed;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-main);
  font-weight: 500;
  font-size: 24px;
  color: var(--color-primary-navy);
  text-align: center;
  opacity: 0.9;
}

.home-venn-circle--top-left { top: 0; left: 0; background: rgba(231, 169, 201, 0.55); border-color: #E7A9C9; }
.home-venn-circle--top-right { top: 0; right: 0; background: rgba(184, 168, 217, 0.55); border-color: #B8A8D9; }
.home-venn-circle--bottom { bottom: 0; left: 80px; background: rgba(155, 138, 196, 0.6); border-color: #9B8AC4; }

/* Figma center wordmark: "P I V O T" font 30 / weight 700 / letter-spacing 11, Navy Blue. */
.home-venn-center {
  position: absolute;
  top: 90px;
  left: 110px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 6px;
  color: var(--color-primary-navy);
  z-index: 2;
}

/* --- Testimonials (sticky notes) --- */
.home-testimonials-section {
  max-width: 1362px;
  margin: 0 auto 64px;
  display: flex;
  direction: rtl;
  gap: 48px;
  justify-content: space-between;
}

.home-testimonials-body {
  /* flex: 1; */
  min-width: 0;
  text-align: start;
  align-self: center;
  width: 560px;
  max-width: 100%;
}

/* Figma: intro line font 24 / line 32 / weight 500, Navy Blue, centered. */
.home-testimonials-intro {
  font-family: var(--font-main);
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  color: var(--color-primary-navy);
  margin: 0;
}

/* Figma: body paragraph font 21 / line 32 / weight 400, color #183B51,
   right-aligned (the one right-aligned element inside this centered column). */
.home-testimonials-text {
  font-family: var(--font-main);
  font-weight: 400;
  font-size: 21px;
  line-height: 32px;
  color: var(--color-text-slate);
  text-align: right;
  margin-top: 8px;
}

/* Figma "Frame 1215883153": cards ~491px wide (305px / 270px tall),
   gap 20, radius 18, translucent glass background (the real design
   uses blurred-photo PNGs we don't have — a soft tinted gradient +
   backdrop-blur stands in), all text Navy Blue (not slate, unlike
   most other cards on this page). */
.home-testimonials-swiper {
  width: 491px;
  height: 900px; /* required for Swiper's vertical direction */
  flex-shrink: 0;
  overflow: hidden;
}

.home-testimonials-swiper .swiper-slide {
  height: auto;
}

.home-testimonials-stepper {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

/* Figma "Frame 31": the two circular nav buttons, rotated -90deg as a
   group (i.e. arranged as an up/down pair) — Ellipse 6 (filled navy)
   is "prev", Ellipse 7 (outline) is "next". */
.home-testimonials-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.home-testimonials-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-heading);
}

.home-testimonials-nav-btn--prev {
  background: var(--color-text-heading);
  color: var(--color-white);
}

.home-testimonials-nav-btn--next {
  background: transparent;
  border: 1.5px solid var(--color-text-heading);
}

.home-sticky-note {
  width: 491px;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 18px;
  padding: 20px 24px 22px 23px;
  background: linear-gradient(121.59deg, rgba(200, 242, 210, 0.55) 0%, rgba(255, 218, 185, 0.25) 100%);
  /* backdrop-filter: blur(9px); */
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0px 14px 30px -14px rgba(0, 0, 128, 0.27), 0px 2px 6px rgba(0, 0, 128, 0.082);
  position: relative;
  background: transparent;
}

.swiper-slide:nth-child(odd) .home-sticky-note { transform: rotate(0.5deg); }
.swiper-slide:nth-child(even) .home-sticky-note { transform: rotate(-0.5deg); }

/* Figma: quote line font 24 / weight 500; body font 20 / line 28 /
   weight 400 — both Navy Blue (not the #183B51 slate used elsewhere). */
.home-sticky-note-quote {
  font-family: var(--font-main);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.3;
  color: var(--color-primary-navy);
  margin: 0 0 8px;
}

.home-sticky-note-body {
  font-family: var(--font-main);
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  color: var(--color-primary-navy);
  margin: 0;
}

/* Figma: name font 18 / line 24 / weight 500, Navy Blue; the "role"
   line under the name is display:none in Figma, so it's left out. */
.home-sticky-note-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 500;
  color: var(--color-primary-navy);
}

.home-sticky-note-avatar {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-main);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-primary-navy);
  flex-shrink: 0;
}

/* --- Articles row --- */
.home-section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  width: 1360px;
  max-width: 100%;
  margin: 48px auto;
}

.home-section-header-row .home-section-title {
  margin-bottom: 0;
  text-align: right;
}

.home-articles-grid {
  display: flex;
  direction: rtl;
  gap: 24px;
  align-items: flex-start;
  width: 1360px;
  max-width: 100%;
  margin: 0 auto;
}

.home-articles-small-col {
  width: 650px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Figma: small card pair — media 260x287, text col max-width 332. */
.cat-case-item--small {
  flex: 0 0 auto;
  max-width: none;
  width: 100%;
  align-items: flex-start;
}

.cat-case-item--small .cat-case-item__media {
  width: 260px;
  flex: 0 0 260px;
  height: 287px;
  padding: 14px;
}

.cat-case-item--small .cat-case-item__media-inner {
  height: 100%;
}

.cat-case-item--small .cat-case-item__text {
  max-width: 332px;
  padding-top: 0;
}

/* Figma: featured pair — media ~638x255, text col ~668 wide. flex:1 here
   is this item's OWN behavior as a child of the outer .home-articles-grid
   row (grow to fill remaining width beside the small column) — distinct
   from .cat-case-item's internal text+media layout, which is untouched. */
.cat-case-item--featured {
  flex: 1 1 686px;
  min-width: 0;
  max-width: none;
  align-items: flex-start;
  flex-direction: column-reverse;
  /* width: 686px; */
  /* max-width: 100%; */
}

.cat-case-item--featured .cat-case-item__media {
  width: auto;
  flex: 0 0 284px;
  height: 284px;
  width: 100%;
}

.cat-case-item--featured .cat-case-item__media-inner {
  height: 100%;
}

.cat-case-item--featured .cat-case-item__text {
  max-width: 668px;
  padding-top: 0;
}

@media (max-width: 1023px) {
  .home-hero,
  .home-why-section,
  .home-founder-container,
  .home-testimonials-section {
    flex-direction: column;
  }

  .home-articles-grid {
    flex-direction: column;
  }

  .home-articles-small-col {
    width: 100%;
  }

  /* --- Testimonials stepper, mobile: horizontal swiper ---
     home.js switches Swiper to direction: 'horizontal' below 1024px, so
     the fixed 900px height (only needed for vertical mode) goes, the
     arrows move under the cards as a side-by-side pair, and each note
     fills its slide. */
  .home-testimonials-stepper {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    min-width: 0;
  }

  .home-testimonials-swiper {
    width: 100%;
    height: auto;
    /* room for the notes' drop shadow + tilt inside overflow: hidden */
    padding-block: 6px 18px;
    padding-inline: 4px;
  }

  .home-testimonials-swiper .swiper-slide {
    height: auto;
    display: flex;
  }

  .home-sticky-note {
    width: 100%;
    height: 100%;
    padding: 18px 18px 20px;
  }

  .home-sticky-note-quote {
    font-size: 21px;
  }

  .home-sticky-note-body {
    font-size: 18px;
    line-height: 26px;
  }

  .home-testimonials-nav {
    flex-direction: row;
    justify-content: center;
  }

  /* The chevrons are drawn pointing up/down for the vertical desktop
     stepper. Turn them sideways: in RTL, "prev" points right and
     "next" points left. */
  .home-testimonials-nav-btn svg {
    transform: rotate(90deg);
  }

  .home-testimonials-nav-btn {
    width: 44px;
    height: 44px;
  }

  .home-testimonials-body {
    width: 100%;
  }

  .home-venn {
    margin: 0 auto;
  }

  .home-hero,
  .home-testimonials-section,
  .home-why-section,
  .home-section,
  .home-founder-content {
    width: calc(100% - 40px);
  }

  .home-hero{
    padding-inline: 0;
  }

  .home-tagline-text {
      font-size: 26px;
  }

  .home-founder-quote.cat-value__text br {
    display: none;
  }

  .cat-case-item--small .cat-case-item__media {
      width: 100%;
  }

}

/* ==========================================================================
   Figma-accurate type overrides for shared components reused on this page
   (content-card, newsletter-card) — scoped to the home sections so other
   pages that also use these components are left untouched.
   ========================================================================== */

/* Figma: title 22/27 (500) and tag already match the shared
   .cat-case-item__title / __tag defaults exactly — only the
   description color needs a page-specific tweak (this page's copy
   uses the lighter #3A3A55, not the shared component's #183B51). */
.home-articles-grid .cat-case-item__desc {
  color: #3A3A55;
}

/* --- Newsletter: this page now reuses the shared, already-built
   assets/css/components/_newsletter.css component (same markup as
   GeneralContent.html) instead of page-specific styling. --- */