/* Be With You — homepage revamp (index.html only) */

:root{
  --ink: #22261D;
  --ink-soft: #55594C;
  --ink-faint: #8A8C7C;
  --bg: #FBF7F0;
  --bg-alt: #F1ECE3;
  --card: #FFFFFF;
  --line: #E6E0D2;
  --line-soft: #EFE9DD;
  --sage-deep: #45542E;
  --sage: #5C6E3E;
  --panel-osho: #F1E6D3;
  --panel-alan: #DDE3E6;
  --rose: #B5695B;
  --shadow: 0 24px 50px -28px rgba(40,35,20,.22);
}

body.home{ background:var(--bg); font-family:'Montserrat', sans-serif; }
body.home h1,
body.home h2,
body.home h3,
body.home .brand-text,
body.home .persona-card-content h3,
body.home .testi-quote-mark{
  font-family:'Montserrat', sans-serif;
  font-weight:700;
  letter-spacing:-0.01em;
}
/* Subtle divider lines between sections — a short centered rule, not a
   full-width border. */
body.home #carry,
body.home #avatars,
body.home #testimonials,
body.home #faq,
body.home .share-band{ position:relative; }
body.home #carry::before,
body.home #avatars::before,
body.home #testimonials::before,
body.home #faq::before,
body.home .share-band::before{
  content:''; position:absolute; top:0; left:25%; right:25%; height:1px; background:var(--line);
}
/* Small — the same size as .mini-divider right below the heading — instead
   of the other sections' full-width (50%) line. */
body.home #avatars::before{ left:50%; right:auto; width:42px; transform:translateX(-50%); }

body.home .btn{ border-radius:14px; gap:8px; }
body.home .floating-cta-inner{ gap:8px; }
body.home .btn-arrow{ width:15px; height:15px; flex:none; }
body.home .btn-call{ width:14px; height:14px; flex:none; }
body.home .btn-headphone{ width:15px; height:15px; flex:none; }

/* Normal body copy: at least as heavy as the button text (600) everywhere */
body.home p,
body.home .lead,
body.home .persona-card-content p,
body.home .testi-quote,
body.home .faq-answer p,
body.home .footer-v2-links a,
body.home .footer-v2-tag,
body.home .testi-role{
  font-weight:600;
}

/* A bold sub-heading, one step down from a full section heading — used for
   the hero's "Sometimes, you just want..." line and "Who would you like to
   talk to?" — sized to match what the "Every burden..." line used to be. */
body.home .section-sub,
body.home .hero-v2-sub{
  font-family:'Montserrat', sans-serif; font-weight:700;
  font-size:clamp(20px,2.6vw,28px); color:var(--ink); margin:30px 0 0;
}

/* Header — floats transparently over the hero photo instead of pushing it
   down, so the hero image starts at the very top of the viewport. */
body.home .site-header{
  background:transparent; border-bottom:none; backdrop-filter:none;
  position:absolute; top:0; left:0; right:0; z-index:50;
}
body.home .site-header.nav-fixed{
  position:fixed; background:rgba(251,247,240,.92); backdrop-filter:blur(10px);
}
body.home .nav{ padding:10px clamp(20px, 5vw, 72px); }
body.home .brand img{ width:44px; height:44px; }
body.home .brand-text{ font-family:'Pacifico', cursive; font-weight:400; font-size:26px; letter-spacing:0; }
body.home .nav-cta .btn{ padding:9px 20px; font-size:13.5px; }
@media (max-width:700px){
  body.home .brand-text{ font-size:15.4px; }
  body.home .brand img{ width:48.4px; height:48.4px; }
}
@media (max-width:480px){
  body.home .nav{ padding:9px 20px; }
}

/* "Login" text link, left of the nav CTA button, on both desktop and
   mobile. */
body.home .nav-login-link{
  font-family:'Montserrat', sans-serif; font-weight:600; font-size:14px;
  color:var(--ink); text-decoration:none; white-space:nowrap; margin-right:14px;
}
body.home .nav-login-link:hover{ color:var(--sage-deep); text-decoration:underline; }
@media (max-width:600px){
  body.home .nav-login-link{ font-size:13px; }
}

/* Nav "Get Started" button on mobile: icon-only, no circular background or
   glow ring — just the bare call icon, animated like a ringing phone
   (buzz for 2s, pause for 1s, repeat) instead. */
.call-wave{ display:none; }
@media (max-width:600px){
  body.home .nav-cta-glow{ border-radius:0; padding:0; }
  body.home .nav-cta-glow::before{ display:none; }
  body.home .nav-cta-glow .btn{
    width:40px; height:40px; padding:0; border-radius:0; gap:0;
    background:transparent; box-shadow:none;
  }
  body.home .nav-cta-glow .btn:hover{ background:transparent; }
  body.home .nav-cta-glow .btn-label{ display:none; }
  body.home .nav-cta-glow .btn-call{
    width:22px; height:22px; color:var(--sage-deep);
    animation:phone-ring-vibrate 3s ease-in-out infinite;
  }
  /* Two small curved "signal" lines on each side of the icon, staggered
     one second apart, visible only while the icon is buzzing (0-66% of
     the 3s cycle) and gone during the 1s pause. */
  body.home .nav-cta-glow .call-wave{
    display:block; width:7px; height:14px; flex:none; color:var(--sage-deep);
  }
  body.home .nav-cta-glow .call-wave path{ opacity:0; }
  body.home .nav-cta-glow .call-wave .wave-line-1{ animation:call-wave-1 3s ease-in-out infinite; }
  body.home .nav-cta-glow .call-wave .wave-line-2{ animation:call-wave-2 3s ease-in-out infinite; }
}
/* Every CTA's phone icon (nav, hero, final band) vibrates on desktop like
   a ringing phone — same keyframe as the mobile nav version, just applied
   broadly instead of only to the nav-cta-glow wrapper. */
@media (min-width:601px){
  body.home .btn-call{
    animation:phone-ring-vibrate 3s ease-in-out infinite;
  }
}
@keyframes phone-ring-vibrate{
  0%, 66%, 100%{ transform:rotate(0deg); }
  2%{ transform:rotate(-16deg); } 5%{ transform:rotate(14deg); }
  8%{ transform:rotate(-16deg); } 11%{ transform:rotate(14deg); }
  14%{ transform:rotate(-16deg); } 17%{ transform:rotate(14deg); }
  20%{ transform:rotate(-14deg); } 23%{ transform:rotate(12deg); }
  26%{ transform:rotate(-12deg); } 29%{ transform:rotate(10deg); }
  32%{ transform:rotate(-10deg); } 35%{ transform:rotate(8deg); }
  38%{ transform:rotate(-8deg); } 41%{ transform:rotate(6deg); }
  44%{ transform:rotate(-6deg); } 47%{ transform:rotate(4deg); }
  50%{ transform:rotate(-4deg); } 53%{ transform:rotate(0deg); }
}
@keyframes call-wave-1{
  0%{ opacity:0; } 4%{ opacity:1; } 62%{ opacity:1; } 66%{ opacity:0; } 100%{ opacity:0; }
}
@keyframes call-wave-2{
  0%{ opacity:0; } 33%{ opacity:0; } 37%{ opacity:1; } 62%{ opacity:1; } 66%{ opacity:0; } 100%{ opacity:0; }
}

/* Anchor jumps (Get Started -> #avatars, etc.) on mobile: the nav bar
   switches from position:absolute to position:fixed and shows/hides itself
   in response to scroll events (see main.js), which fights the animated
   native smooth-scroll mid-flight and produces a visible "jump to top,
   then scroll back down" correction. Instant jump avoids that feedback
   loop entirely; desktop keeps the smooth animation. */
@media (max-width:600px){
  html{ scroll-behavior:auto; }
}

/* Breathing CTAs — the button itself pulses (a gentle scale), not a ring
   around it. Applies to every primary CTA, including Talk to Osho/Alan, so
   they all share the exact same animation. */
/* Stronger pulse than the original (1.035 -> 1.07 peak scale). */
@keyframes cta-breathe{
  0%, 100%{ transform:scale(1); }
  50%{ transform:scale(1.07); }
}
body.home .get-started-glow .btn-primary,
body.home .persona-card-cta .btn-primary{
  display:inline-flex; animation:cta-breathe 2.2s ease-in-out infinite;
}

/* Talk to Osho / Talk to Alan: no glow ring (that class was dropped from
   the wrapper in index.html), a touch shorter, and the label text flows
   with a gradient instead of being flat white — the icon stays plain white
   via currentColor, only .btn-label-gradient gets the gradient fill. */
.persona-card-cta .btn-primary{ padding-top:9px; padding-bottom:9px; }
@keyframes persona-cta-label-flow{ to{ background-position:200% 50%; } }
.persona-card-cta .btn-label-gradient{
  background-image:linear-gradient(90deg, #fff, var(--gold-brand,#D9BE87), #fff, var(--gold-brand,#D9BE87));
  background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:persona-cta-label-flow 3.5s linear infinite;
}

/* ---------- Hero (full-bleed, blended photo) ---------- */
/* One constant heading size, shared by the hero h1 and every section h2 —
   85% of the hero size for the section headings. */
/* All-caps headings read visually larger than mixed case at the same
   font-size, so sizes here are trimmed ~10% to land at the same pixel
   width/footprint as the previous mixed-case headings. */
/* Desktop only — 15% heavier than the site's usual 700 heading weight. */
body.home .hero-full-content h1{ font-size:clamp(32px,4.9vw,52px); line-height:1.15; white-space:nowrap; text-transform:uppercase; font-weight:800; }
body.home .section-head h2{ font-size:clamp(28px,4.1vw,44px); line-height:1.18; text-transform:uppercase; }
@media (max-width:700px){
  /* One shared size for every section heading, small enough that the
     longest one ("You might be wondering...") fits on a single line —
     bumped 10% (18px -> 20px base * 1.1) from the original fitted size. */
  body.home .section-head h2{ font-size:22px; line-height:1.3; }
}
.hero-full-content h1{ margin:0 0 36px; color:var(--sage-deep); }
/* Single sub-heading (no separate lighter "lead" line anymore) — reads as
   one continuous paragraph, so no extra gap between its own wrapped lines. */
body.home .hero-full-content .hero-v2-sub{
  margin:0 0 42px; font-size:clamp(17px,1.68vw,19px); font-weight:700; line-height:1.45; white-space:nowrap;
}
.mobile-break{ display:none; }
.desktop-break{ display:inline; }
/* Hero text block: a contained column, sitting toward the bottom of the
   frame so the CTA lands near the section's edge, and the photo's lower
   half stays visible above it. */
.hero-full-content{ display:block; max-width:740px; }
/* min-height:100svh (small viewport height) after the 100vh fallback is
   load-bearing on iOS/in-app-browser webviews (WhatsApp's included): a
   bare 100vh there is calculated against the LARGEST possible viewport
   (address bar hidden), so the hero reserves more vertical space than is
   ever visible, which can show up as unexplained blank space further down
   the page once the real (smaller, bar-visible) viewport is accounted
   for. svh tracks the actual visible viewport instead. */
.hero-full{ display:flex; align-items:flex-end; min-height:100vh; min-height:100svh; }
.hero-full-bg.is-desktop{ object-position:50% 54%; }
/* Tablet-portrait's own dedicated hero photo — hidden everywhere except
   the tablet-portrait media query further down this file, which shows it
   and hides the desktop/mobile images instead. */
.hero-full-bg.is-tablet-portrait{ display:none; }
.hero-full-overlay{
  background:linear-gradient(100deg, rgba(251,247,240,.85) 0%, rgba(251,247,240,.6) 32%, rgba(251,247,240,.22) 56%, rgba(251,247,240,0) 76%),
             linear-gradient(to top, rgba(251,247,240,.22) 0%, rgba(251,247,240,0) 26%);
}
/* Left edge aligns with the nav's own left padding. Pulled a bit further
   down toward the section's bottom edge than before. */
body.home .hero-full-content{
  padding-left:clamp(20px, 5vw, 72px); padding-top:140px; padding-bottom:26px;
}
/* Softer merge into the next section instead of a hard photo edge — kept
   short so it doesn't wash out the lower part of the photo. */
.hero-full::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:56px; z-index:1;
  background:linear-gradient(to bottom, rgba(251,247,240,0) 0%, var(--bg) 100%);
  pointer-events:none;
}
@media (max-width:700px){
  .mobile-break{ display:inline; }
  .desktop-break{ display:none; }
  .hero-full{ min-height:100vh; min-height:100svh; align-items:flex-start; }
  body.home .hero-full-content{
    padding:64px clamp(20px, 5vw, 72px) 40px; max-width:100%;
  }
  /* Fixed (not fluid) mobile sizes — the "must be N lines" rules below are
     absolute, so the size is picked to fit typical phone widths rather than
     scaled to try to always fit. */
  body.home .hero-full-content h1{ font-size:29px; white-space:nowrap; font-weight:800; }
  .hero-full-content h1{ margin-bottom:44px; }
  /* One paragraph, wraps naturally (no forced line breaks) — reads as a
     single block of text, not two separate lines with a gap. */
  body.home .hero-full-content .hero-v2-sub{
    white-space:normal; font-size:16px; line-height:1.35; margin-bottom:32px;
  }
  .hero-full-bg.is-mobile{
    object-position:center 22%;
  }
  /* Text overlays the top of the photo directly, over the open sky —
     blended only into the bottom of the photo, not the sides. */
  .hero-full-overlay{
    background:linear-gradient(to bottom,
      rgba(251,247,240,.88) 0%,
      rgba(251,247,240,.72) 20%,
      rgba(251,247,240,.32) 38%,
      rgba(251,247,240,.06) 55%,
      rgba(251,247,240,0) 70%);
  }
  .hero-full::after{ height:70px; }
}

/* ---------- Live stats band (sessions/people-helped counters) ---------- */
/* Mobile-first: stacked, centered — text above, number rows below. */
body.home .stats-band{ padding:56px 0; }
body.home .stats-wrap{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:32px;
}
body.home .stats-text{ position:relative; }
/* Three-line fanned "spark" mark — scattered above-left of the heading,
   outside its corner, not overlapping into it. */
.stats-spark{
  position:absolute; top:-20px; left:-14px; width:26px; height:26px;
  color:#4b4a45; opacity:.8; pointer-events:none;
}
body.home .stats-text p{
  font-weight:700; font-size:clamp(28px,4.1vw,44px); line-height:1.18;
  text-transform:uppercase; letter-spacing:.01em;
  color:var(--ink); max-width:34ch; margin:0;
}
@media (max-width:700px){
  body.home .stats-text p{ font-size:22px; line-height:1.3; }
}
body.home .stats-rows{ width:100%; max-width:380px; }
/* align-items:center is load-bearing: without it, the column flex layout's
   default stretch makes .stats-number's box span the row's full width, so
   its ::after divider (positioned at left:0 of that box) lands at the
   row's left edge instead of under the number, which only reads centered
   because text-align centers its text content within that full-width box. */
body.home .stats-row{ display:flex; flex-direction:column; align-items:center; padding:16px 0; }
body.home .stats-number{
  display:inline-block; position:relative;
  font-weight:700; font-size:clamp(28px,4.1vw,44px); line-height:1.18;
  color:var(--sage-deep); font-variant-numeric:tabular-nums; letter-spacing:-0.01em;
  padding-bottom:10px;
}
/* The divider sits right under the number itself (not the full row width),
   sized in `ch` so it scales with the number's own font-size and stays
   just long enough for one extra digit beyond whatever's currently
   showing — not a full-width rule across the section. */
body.home .stats-number::after{
  content:''; position:absolute; left:0; bottom:0; width:7.5ch; height:1px; background:var(--line);
}
body.home .stats-label{ font-size:13.5px; font-weight:600; color:var(--ink-soft); margin-top:4px; }
/* Each digit (and the comma) is its own inline span so an update can roll
   just the characters that actually changed — see the matching JS, which
   adds .is-swapping to a single .sn-char, waits for the transition, swaps
   that one character while invisible just below the baseline, then
   removes it so it transitions back up into place. Unaffected digits
   never move. */
body.home .sn-char{
  display:inline-block; position:relative; overflow:hidden;
  transition:transform .22s cubic-bezier(.4,0,.2,1), opacity .22s ease;
}
body.home .sn-char.is-swapping{ transform:translateY(-6px); opacity:0; }
/* Desktop (and tablet-portrait, which falls through to this same rule):
   side by side — text left, number rows right — same left/right split as
   every other heading-beside-content section (e.g. #avatars). */
@media (min-width:701px){
  body.home .stats-wrap{
    flex-direction:row; align-items:center; justify-content:space-between; text-align:left; gap:64px;
  }
  body.home .stats-text{ flex:0 0 auto; max-width:440px; }
  body.home .stats-text p{ text-align:left; }
  body.home .stats-rows{ flex:1 1 auto; max-width:480px; }
  body.home .stats-row{ align-items:flex-start; }
}

/* ---------- We all have things we carry quietly ---------- */
/* Same side gutter as the hero text, so the grid lines up with it. */
body.home #carry .wrap{ padding-left:clamp(20px, 5vw, 72px); padding-right:clamp(20px, 5vw, 72px); }
@media (min-width:701px){
  /* Cards ~30% larger than the previous (already ~15%-larger-than-usual)
     column — capped with min() so it can't force horizontal overflow on
     narrower desktop windows. */
  body.home #carry .wrap{ max-width:min(calc(var(--maxw) * 1.495), 94vw); }
  /* Row 1 is the first two cards plus the heading sharing the row; row 2
     is the remaining four cards spanning the full width underneath. Every
     card is the same size — a 4-column grid where each card is exactly 1
     column, whichever row it's in, and the heading fills the 2 columns
     left over in row 1 (since row 2's 4 equal cards must span the same
     total width as row 1's 2 cards + heading, the heading is necessarily
     2 columns wide). .carry-viewport/.carry-grid are flattened with
     display:contents so every card becomes a direct grid item alongside
     the heading, all placed by hand below. */
  body.home #carry .wrap{
    display:grid; grid-template-columns:repeat(4,1fr); align-items:center; gap:16px;
  }
  #carry .section-head{ grid-column:3 / 5; grid-row:1; text-align:right; margin:0; }
  #carry .section-head::before{ left:auto; right:0; margin-left:0; }
  /* Higher specificity than the base (unscoped) .carry-viewport/.carry-grid
     rules further down this file — those come later in source order and
     would otherwise win the display:grid/overflow:visible tie despite this
     media query being the intended override. */
  #carry .carry-viewport{ display:contents; overflow:visible; }
  #carry .carry-grid{ display:contents; }
  #carry .carry-card:nth-child(1){ grid-column:1; grid-row:1; }
  #carry .carry-card:nth-child(2){ grid-column:2; grid-row:1; }
  #carry .carry-card:nth-child(3){ grid-column:1; grid-row:2; }
  #carry .carry-card:nth-child(4){ grid-column:2; grid-row:2; }
  #carry .carry-card:nth-child(5){ grid-column:3; grid-row:2; }
  #carry .carry-card:nth-child(6){ grid-column:4; grid-row:2; }
}
@media (max-width:700px){
  /* No divider line directly under the hero on mobile — just more breathing
     room instead. */
  body.home #carry::before{ display:none; }
  #carry{ padding-top:40px; padding-bottom:32px; }
}
.carry-viewport{ overflow:visible; }
.carry-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px 4px; }
/* No card container at all — the illustrations are transparent PNGs with the
   caption text already baked in (own pastel blob included), placed directly
   on the page background. */
.carry-card{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden; }
.carry-card img{
  display:block; width:100%; height:100%; object-fit:contain; margin:0; transition:transform .4s ease;
}
/* Mobile has its own illustration set (own baked-in card shape + caption);
   swapped in below max-width:700px instead of the desktop topic-*.png set. */
.carry-card .carry-img-mobile{ display:none; }
@media (hover:hover) and (pointer:fine){
  .carry-card:hover img{ transform:scale(1.03); }
}
.carry-card-overlay{ display:none; }
.carry-mobile-controls{ display:none; }
.carry-card-clone{ display:none; }
/* Mobile: plain stacked layout — heading centered on top, then all six
   cards in a static 2-column x 3-row grid underneath (no scroll-driven
   "picker wheel" animation; main.js's watch-wheel JS no-ops here since it
   only measures/updates when a mobile matchMedia check for the *old*
   .carry-viewport scroller is true, and that scroller no longer exists at
   this breakpoint). */
@media (max-width:700px){
  #carry .wrap{ display:flex; flex-direction:column; align-items:center; gap:24px; }
  #carry .section-head{ margin:0; text-align:center; }
  #carry .section-head::before{ left:50%; right:auto; transform:translateX(-50%); margin-left:0; }
  .carry-viewport{ width:100%; overflow:visible; }
  .carry-grid{
    display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; gap:10px; width:100%;
  }
  /* Portrait to match the new illustration set's own shape (~493:694), sized
     up from the old 16:9 landscape cards so the artwork fills the cell
     cleanly instead of letterboxing. */
  .carry-card{ width:100%; aspect-ratio:3/4.1; opacity:1; }
  .carry-card .carry-img-desktop{ display:none; }
  .carry-card .carry-img-mobile{ display:block; }
}

.mini-divider{ display:block; width:42px; height:2px; background:var(--line); margin:22px auto 0; }

/* ---------- Who would you like to talk to (text overlaid on the photo) ---------- */
.persona-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:48px; }
.persona-card{
  position:relative; display:block; border-radius:20px; overflow:hidden;
  aspect-ratio:1/1; box-shadow:var(--shadow); transition:transform .3s ease;
}
.persona-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; margin:0;
  transition:transform .5s ease;
}
/* Mobile uses its own photo, swapped in below max-width:700px. */
.persona-card .persona-img-mobile{ display:none; }
.persona-card:hover{ transform:translateY(-3px); }
.persona-card:hover img{ transform:scale(1.04); }
.persona-card-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(10,9,8,.88) 0%, rgba(10,9,8,.4) 42%, rgba(10,9,8,.05) 68%);
}
.persona-card-content{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:28px; padding-bottom:96px; }
@media (min-width:701px){
  .persona-card-content{ padding-bottom:72px; }
}
.persona-card-content h3{ font-size:26px; letter-spacing:.03em; margin-bottom:8px; color:#fff; }
.persona-card-content p{
  font-size:14px; line-height:1.4; color:rgba(255,255,255,.85); margin-bottom:18px; max-width:40ch; text-align:left;
}
.btn-sm{ padding:11px 18px; font-size:13px; align-self:flex-start; }
/* More air above "Who would you like to talk to?" (after the divider), less
   below it, so it reads as a lead-in to the cards right underneath. */
#avatars .section-head{ margin-bottom:32px; }
#avatars .section-head .section-sub{ color:var(--sage-deep); margin-top:34px; }
/* Three panels — "Some begin with a question." / "Some with a story." /
   "Some with nothing more than, ...". Each is a short line of the site's
   own heading font sitting above a photo whose edges are already feathered
   to transparent in the source PNG, so it blends into the page background
   on every side with no card, no border, no dividing line — panels are
   simply separated by empty grid gap. */
.persona-quote{ position:relative; max-width:1160px; margin:56px auto 0; padding-top:40px; }
.persona-quote::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:42px; height:2px; background:var(--line);
}
.pq-grid{ display:grid; grid-template-columns:repeat(3,1fr); align-items:center; gap:12px 26px; }
/* Text sits in a fixed-height box (room for up to 3 lines) so every panel's
   image starts at the exact same vertical position regardless of how many
   lines its neighbor's text wraps to — and every image is a fixed pixel
   width (not a % of its column) so all three render at identical size. */
.pq-panel{ display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:16px; }
.pq-text{
  flex:1 1 auto; min-height:4em;
  font-family:'Montserrat', sans-serif; font-weight:600; color:var(--ink);
  font-size:clamp(17px,1.7vw,20px); line-height:1.4; margin:0; text-align:left;
}
.pq-text strong{ font-weight:700; color:var(--sage-deep); }
.pq-img-wrap{ position:relative; flex:0 0 auto; width:128px; border-radius:16px; overflow:hidden; }
.pq-img{ display:block; width:100%; height:auto; margin:0; }
/* Subtle wash so the photos read as calm background texture rather than
   competing with the section's own text. */
.pq-img-wrap::after{
  content:''; position:absolute; inset:0; background:rgba(251,247,240,.03); pointer-events:none;
}
/* text-align:center on a nowrap line that's wider than its container can
   render off-center (the overflow lands asymmetrically to the right in some
   browsers/widths) — centering via transform instead is immune to that,
   since it's based on the element's own box, not line-wrapping. */
#avatars .section-head h2.one-liner{
  display:inline-block; position:relative; left:50%; transform:translateX(-50%); white-space:nowrap;
}
.persona-card-wrap{ position:relative; }
.persona-card-cta{ position:absolute; left:28px; bottom:28px; z-index:3; }
@media (min-width:701px){
  /* Heading sits left-aligned, vertically centered, beside the two persona
     cards (rather than stacked above them). The quote block underneath
     stays exactly where it was — full width, centered, same as before. */
  #avatars .wrap{
    display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto;
    align-items:center; gap:40px;
  }
  #avatars .section-head{ grid-column:1; grid-row:1; text-align:left; margin:0; }
  #avatars .section-head h2.one-liner{
    display:block; position:static; left:auto; transform:none; white-space:normal;
  }
  #avatars .section-head .mini-divider{ margin-left:0; }
  #avatars .persona-grid{ grid-column:2; grid-row:1; margin-bottom:0; }
  /* max-width/margin:auto on the base (non-desktop) rule shrink this to its
     own content width and center it, overriding the grid item's default
     stretch — reset both here so it spans the full grid area instead,
     landing flush with the heading's left edge and the Alan card's right
     edge, exactly like the row above it. */
  #avatars .persona-quote{ grid-column:1 / span 2; grid-row:2; max-width:none; margin-left:0; margin-right:0; width:100%; }
  /* A bit smaller to comfortably fit beside the heading column, but tall
     enough that the full (unclamped) description never gets clipped. */
  #avatars .persona-card{ aspect-ratio:1/1.55; }
  #avatars .persona-card-content h3{ font-size:23px; }
  #avatars .persona-card-content p{ max-width:none; }
  /* Image on top, its text below — a simple stacked column instead of the
     side-by-side row, with the image 30% larger (128px -> 166px), then 50%
     larger again (166px -> 249px). Text sits in a fixed-height box above
     each image (see .pq-text), so all three images still land with their
     bottom edges on the same line despite the bigger size. */
  .pq-panel{ flex-direction:column; align-items:center; gap:14px; }
  .pq-img-wrap{ width:249px; }
  .pq-text{ text-align:center; flex:0 0 auto; min-height:0; }
  /* Panels 1 and 3's image stays flush to the row's outer edge (so the
     whole row spans the same width as the persona-grid row above — panel
     1's image left edge on the heading's left edge, panel 3's image right
     edge on the Alan card's right edge). Their text is given the image's
     own fixed width instead of shrink-wrapping to its content, so
     text-align:center centers it directly over the image rather than
     over a differently-sized box that merely starts at the same edge. */
  .pq-panel:nth-child(1){ align-items:flex-start; }
  .pq-panel:nth-child(1) .pq-text{ width:249px; }
  .pq-panel:nth-child(3){ align-items:flex-end; }
  .pq-panel:nth-child(3) .pq-text{ width:249px; }
}
@media (max-width:700px){
  #avatars .section-head .section-sub{ margin-top:28px; }
  .persona-grid{ gap:12px; margin-bottom:34px; }
  /* 30% taller than before (4.4 -> 5.72), then another 25% taller (5.72 -> 7.15). */
  .persona-card{ aspect-ratio:3/7.15; }
  .persona-card .persona-img-desktop{ display:none; }
  .persona-card .persona-img-mobile{ display:block; }
  .persona-card-content{ padding:18px; padding-bottom:72px; }
  .persona-card-content h3{ font-size:18px; margin-bottom:4px; }
  .persona-card-content p{
    font-size:12px; line-height:1.4; margin-bottom:12px; max-width:none;
    display:block; -webkit-line-clamp:unset; overflow:visible; min-height:0;
  }
  .btn-sm{ padding:9px 14px; font-size:11.5px; }
  .persona-card-cta{ left:18px; bottom:18px; }
  /* Same size as the other section headings — allowed to wrap across the
     two mobile-break points above into 3 balanced lines. */
  #avatars .section-head h2.one-liner{ display:block; position:static; left:auto; transform:none; white-space:normal; }
  #avatars .section-head{ margin-top:16px; margin-bottom:28px; }
  /* "Some begin with a question..." stacks one row per panel, alternating
     sides: card 1 text-left/image-right, card 2 image-left/text-right,
     card 3 back to text-left/image-right. space-between (not flex-start)
     pins each side's element flush to that edge of the row rather than
     packed toward the left. */
  .persona-quote{ max-width:none; margin:40px 0 0; padding-top:32px; }
  /* align-items:stretch overrides the desktop rule's align-items:center
     (never reset here before) — without it, each panel shrink-wraps to its
     own content width instead of stretching to the row's full width, so
     panels with shorter text ended up NARROWER, throwing their image out of
     alignment with the others' even after the min-width:0/flex-grow fix
     below. Stretching first is what makes that fix actually take effect. */
  .pq-grid{ display:flex; flex-direction:column; align-items:stretch; gap:22px; }
  /* Same column split AND gap as .persona-grid (the Osho/Alan cards) above
     it — both sit directly in the same .wrap, so this isn't just a visual
     match, the columns land at the exact same x as Osho's/Alan's card
     edges: panel 1/3's image (2nd column) starts flush on Alan's card's
     left edge, and panel 2's image (1st column, justify-self:end) ends
     flush on Osho's card's right edge. */
  .pq-panel{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:12px; }
  .pq-text{ font-size:16px; min-height:0; min-width:0; text-align:center; }
  /* No justify-self here — a fixed-width item left in a grid cell defaults
     to start-aligned, which for panels 1 and 3 (image in the 2nd column)
     puts the image's LEFT edge exactly on Alan's card's left edge. */
  /* Fills its grid column instead of a small fixed size, so the image takes
     up nearly the whole width of its half of the row. */
  .pq-img-wrap{ width:100%; }
  /* Panel 2's image sits in the 1st column instead (order:-1) — there,
     start-aligned would flush it to the true left page edge, so it needs
     justify-self:end to put its RIGHT edge on Osho's card's right edge
     instead, mirroring panels 1/3. */
  .pq-panel:nth-child(2) .pq-img-wrap{ order:-1; justify-self:end; }
}

/* ---------- Testimonials (a side heading + a train of cards) ---------- */
.testi-section{ overflow:hidden; }
/* Desktop: heading sits beside the card train, on the right (order:2 flips
   it past the carousel without changing the DOM's heading-first source
   order, which stays natural for a screen reader). Mobile: flex-direction
   changes to column below, so source order alone puts the heading on top. */
.testi-stage{ display:flex; align-items:center; gap:44px; }
.testi-head{
  order:2; flex:0 0 auto; width:180px;
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
}
.testi-heart-stack{ position:relative; height:30px; width:34px; }
.testi-heart-stack svg{ position:absolute; width:17px; height:17px; color:var(--rose); }
.testi-heart-stack svg:nth-child(1){ top:0; left:1px; opacity:.55; transform:rotate(-10deg); }
.testi-heart-stack svg:nth-child(2){ top:6px; left:8px; opacity:.8; transform:rotate(6deg) scale(.92); }
.testi-heart-stack svg:nth-child(3){ top:12px; left:4px; opacity:1; transform:rotate(-3deg); }
.testi-head-title{
  font-size:clamp(20px,2.2vw,26px); line-height:1.15; color:var(--ink);
  text-transform:uppercase; letter-spacing:-0.01em;
}

/* The cards run past like a train, endlessly — main.js drives .testi-track's
   transform directly (rAF loop) rather than a CSS keyframe animation, since
   that's also what lets a manual drag take over the same property without
   fighting a competing animation. A mask fades cards out as they travel in
   behind the corner ribbon. Height is the card's own height plus enough
   headroom for its shadow — shorter than that clipped the cards' top/bottom
   edges via this element's overflow:hidden. */
.testi-carousel{
  order:1; position:relative; width:100%; min-width:0; flex:1 1 auto; height:360px; overflow:hidden;
  touch-action:pan-y;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.testi-track{
  display:flex; align-items:center; gap:24px; width:max-content; height:100%;
  cursor:grab; user-select:none; -webkit-user-select:none;
}
.testi-track:active{ cursor:grabbing; }
/* Fixed height (not min-height) so every card is exactly the same size no
   matter how long its quote is. Sized generously enough (with the quote's
   line-clamp removed below) that even the longest testimonial fits in full
   without being cut off — shorter quotes just leave the footer pinned to
   the bottom via margin-top:auto on .testi-foot. */
.testi-card{
  flex:0 0 auto; width:400px; height:340px;
  background:var(--card); border:1px solid var(--line-soft); border-radius:36px;
  padding:30px 34px;
  display:flex; flex-direction:column;
  position:relative;
}
.testi-rating{ color:#D3A44C; font-size:13px; letter-spacing:.15em; margin-bottom:10px; }
.testi-quote-mark{ font-size:36px; color:var(--sage-deep); line-height:1; margin-bottom:4px; }
.testi-quote{
  font-size:15px; color:var(--ink-soft); line-height:1.6; flex:1; margin-bottom:16px;
}
.testi-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; gap:10px; }
.testi-person{ display:flex; align-items:center; gap:9px; min-width:0; }
.testi-avatar{ width:36px; height:36px; border-radius:50%; object-fit:cover; flex:none; border:1px solid var(--line-soft); }
.testi-name{ display:block; font-size:13.5px; font-weight:600; color:var(--ink); white-space:nowrap; }
/* Bigger than before (16 -> 22 -> 66, 200% bigger again), and a larger tap
   target since it's now a direct like/unlike toggle, not just part of the
   double-tap surface. */
.testi-heart{ width:36px; height:36px; color:var(--rose); flex:none; transition:transform .2s ease; cursor:pointer; padding:4px; margin:-4px; }
.testi-heart.is-liked{ fill:var(--rose); transform:scale(1.2); }
/* Instagram-style heart burst on double-tap/double-click. */
.testi-like-burst{
  position:absolute; top:50%; left:50%; width:64px; height:64px; margin:-32px 0 0 -32px;
  color:var(--rose); pointer-events:none; z-index:5;
  animation:testi-like-pop .7s ease forwards;
}
.testi-like-burst svg{ width:100%; height:100%; }
@keyframes testi-like-pop{
  0%{ transform:scale(.3); opacity:0; }
  30%{ transform:scale(1.15); opacity:1; }
  50%{ transform:scale(1); opacity:1; }
  100%{ transform:scale(1); opacity:0; }
}
@media (max-width:700px){
  /* Heading stacks on top, centered — flex-direction:column means source
     order (heading, then carousel) already puts it there; order:2 from the
     desktop rule is cleared so nothing overrides that. */
  .testi-stage{ flex-direction:column; gap:18px; }
  .testi-head{ order:0; width:auto; }
  .testi-head-title{ font-size:22px; }
  /* Card height (260) + headroom for the shadow, same fix as desktop. */
  .testi-carousel{ order:0; height:284px; }
  /* Smaller card and content than desktop's, not just a scaled-down copy. */
  .testi-card{ width:72vw; max-width:290px; padding:20px 18px; height:260px; border-radius:30px; }
  .testi-rating{ font-size:11.5px; margin-bottom:8px; }
  .testi-quote-mark{ font-size:30px; margin-bottom:2px; }
  .testi-quote{ font-size:12.5px; margin-bottom:12px; }
  .testi-avatar{ width:30px; height:30px; }
  .testi-name{ font-size:12px; }
  .testi-heart{ width:30px; height:30px; }
}

/* ---------- FAQ ---------- */
/* Heading matches every other section heading's size — no special case. */
/* Answers match the questions' weight, a size down, in green. */
body.home .faq-answer p{ font-weight:600; color:var(--sage-deep); font-size:15px; }
@media (max-width:700px){
  body.home .faq-answer p{ font-size:13.5px; }
}

/* ---------- Share ---------- */
/* Mobile-first: collage stacked above the text/button, both centered. */
.share-band{ padding:64px 0; overflow:hidden; background-color:#F9F4EB; }
.share-wrap{ display:flex; flex-direction:column; align-items:center; gap:40px; text-align:center; }
.share-content{ max-width:440px; }
/* Same size/weight/case as every other section heading — reused as-is. */
body.home .final-band-title{
  font-size:clamp(28px,4.1vw,44px); line-height:1.18; font-weight:700; color:var(--ink);
  margin-bottom:14px; white-space:normal; text-transform:uppercase; letter-spacing:-0.01em;
}
.share-note{ font-size:15px; color:var(--ink-soft); margin-bottom:26px; }
.btn-share-icon{ width:15px; height:15px; flex:none; }
/* Same flowing-gradient text treatment as the persona cards' "Free Trial"
   label — icon stays solid white (plain currentColor), only the label text
   itself shimmers. */
#share-btn .btn-label-gradient{
  background-image:linear-gradient(90deg, #fff, var(--gold-brand,#D9BE87), #fff, var(--gold-brand,#D9BE87));
  background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:persona-cta-label-flow 3.5s linear infinite;
}
/* Single pre-composed collage image (photos + decorative strokes already
   baked in) — no hand-built card positioning needed. */
.share-collage{ width:100%; max-width:380px; }
.share-collage-img{ display:block; width:100%; height:auto; }
@media (max-width:700px){
  body.home .final-band-title{ font-size:22px; line-height:1.3; }
}
/* Desktop: collage left, text/button right. */
@media (min-width:701px){
  .share-band{ padding:100px 0; }
  .share-wrap{ flex-direction:row; align-items:center; justify-content:center; gap:72px; text-align:left; }
  .share-content{ text-align:left; }
  .share-collage{ flex:0 0 auto; max-width:460px; }
}

/* ---------- Footer v2 ---------- */
/* A partial-width divider (75%, centered) instead of a full-bleed border. */
.footer-v2{ position:relative; background:var(--bg); padding:16px 0; color:var(--ink); }
@media (min-width:701px){
  /* Minimal footer on desktop — smaller type, tighter vertical padding. */
  .footer-v2{ padding:10px 0; }
  .footer-v2-links{ gap:14px; }
  .footer-v2-links a{ font-size:11px; }
  .footer-v2-tag{ font-size:10.5px; }
}
.footer-v2::before{
  content:''; position:absolute; top:0; left:12.5%; right:12.5%; height:1px; background:var(--line); opacity:.45;
}
/* Full-width row with the same responsive gutter as the nav above it (not
   the site's fixed 1160px .wrap column), so the logo/copyright stay pinned
   to the actual viewport edges at every screen size instead of sitting in a
   centered column with growing empty margins on wide screens. */
body.home .footer-v2-row.wrap{
  max-width:none; padding-left:clamp(20px, 5vw, 72px); padding-right:clamp(20px, 5vw, 72px);
}
.footer-v2-row{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:nowrap; }
.footer-v2-brand{ display:flex; align-items:center; gap:7px; flex:none; margin-right:auto; }
body.home .footer-v2-brand .brand-text{ font-size:16.56px; }
/* Groups the links row and the copyright line together on the right, so
   they can stack (mobile) or sit side by side (desktop) as one unit. */
.footer-v2-right{ display:flex; align-items:center; gap:16px; flex:none; }
.footer-v2-links{ display:flex; align-items:center; gap:8px; }
.footer-v2-links a{ font-size:12px; color:var(--ink-soft); }
.footer-v2-links a:hover{ color:var(--ink); }
.footer-v2-sep{ font-size:11px; color:var(--line); }
.footer-v2-tag{ font-size:11.5px; color:var(--ink-soft); flex:none; }
@media (max-width:700px){
  /* Mobile wordmark sizes are swapped vs. before: nav 14px, footer 26px
     (same 14px in every page's nav — see body.home .brand-text below and the
     osho/alan/account pages). The right-hand stack (links + copyright) is
     sized so its two lines together are about as tall as the wordmark. */
  .footer-v2-row{ flex-direction:row; align-items:center; text-align:left; gap:6px; }
  body.home .footer-v2-row.wrap{ padding-left:16px; padding-right:16px; }
  .footer-v2{ padding:12px 0; }
  .footer-v2-brand{ margin-right:0; }
  body.home .footer-v2-brand .brand-text{ font-size:18.7px; line-height:1.15; }
  .footer-v2-right{ flex-direction:column; align-items:flex-end; text-align:right; gap:2px; min-width:0; }
  .footer-v2-links{ gap:6px; }
  .footer-v2-links a{ font-size:min(10px, 2.6vw); line-height:1.15; }
  .footer-v2-sep{ font-size:min(10px, 2.6vw); line-height:1.15; }
  .footer-v2-tag{ font-size:min(9px, 2.3vw); line-height:1.15; white-space:nowrap; }
  .footer-v2::before{ opacity:.55; }
}
}

/* ---------- Legal pages (terms / privacy): same nav + footer as home ---------- */
body.legal-page .site-header{
  position:relative; background:rgba(251,247,240,.92); border-bottom:1px solid var(--line-soft);
}
body.legal-page .site-header.nav-fixed{ position:fixed; }
body.legal-page .page-hero{ padding-top:56px; }

/* ---------- Mobile persona cards: justified subtext, full-width CTA ---------- */
@media (max-width:700px){
  .persona-card-content p{ text-align:left; }
  .persona-card-cta{ left:18px; right:18px; display:block; }
  .persona-card-cta > .btn{ display:flex; width:100%; justify-content:center; }
}

/* ---------- Tablet portrait only (iPad-width, taller-than-wide — e.g.
   834x1194). Landscape tablet/desktop/mobile are untouched — every rule
   below is scoped to this one media query. Addressed section by section
   per explicit request. */
@media (min-width:701px) and (max-width:1024px) and (orientation:portrait){
  /* 1. Hero: a dedicated photo already composed for a tall portrait frame
     (no crop/zoom math needed on it), swapped in for both the desktop and
     mobile images here. */
  .hero-full-bg.is-desktop{ display:none; }
  .hero-full-bg.is-mobile{ display:none; }
  .hero-full-bg.is-tablet-portrait{ display:block; }
  .hero-full-overlay{
    background:linear-gradient(to bottom,
      rgba(251,247,240,.88) 0%,
      rgba(251,247,240,.72) 20%,
      rgba(251,247,240,.32) 38%,
      rgba(251,247,240,.06) 55%,
      rgba(251,247,240,0) 70%);
  }
  /* Text/CTA kept at their existing (desktop) font sizes — only repositioned
     to sit near the top-left like the mobile layout does, instead of
     bottom-anchored, moved up a little further from there. Horizontal
     position (left padding) is untouched, same axis as before. */
  .hero-full{ align-items:flex-start; }
  body.home .hero-full-content{ padding-top:90px; padding-bottom:0; }

  /* Live stats band: left on the desktop side-by-side split (the general
     min-width:701px rule above already applies here) instead of stacking
     like mobile, per explicit request. */

  /* "Everyone has things they carry quietly": mobile's illustration set and
     stacked layout (heading centered above, cards in a 2-col grid below)
     instead of the desktop asymmetric 4-col grid — that grid only gave each
     card a quarter of the row's width here, reading too small. Cards keep
     their own portrait orientation, just scaled up to fill the wider
     tablet-portrait wrap. */
  body.home #carry .wrap{
    display:flex; flex-direction:column; align-items:center; gap:28px;
    max-width:760px;
  }
  #carry .section-head{ grid-column:auto; grid-row:auto; margin:0; text-align:center; }
  #carry .section-head::before{ left:50%; right:auto; transform:translateX(-50%); margin-left:0; }
  #carry .carry-viewport{ width:100%; }
  #carry .carry-grid{
    display:grid; grid-template-columns:1fr 1fr 1fr; grid-auto-rows:1fr; gap:14px; width:100%;
  }
  #carry .carry-card:nth-child(n){ grid-column:auto; grid-row:auto; }
  .carry-card .carry-img-desktop{ display:none; }
  .carry-card .carry-img-mobile{ display:block; }
  #carry .carry-card{ width:100%; aspect-ratio:3/4.1; }

  /* Navbar CTA: mobile's icon-only vibrating call button instead of the
     desktop pill with the "FREE Therapy Session" label. */
  body.home .nav-cta-glow{ border-radius:0; padding:0; }
  body.home .nav-cta-glow::before{ display:none; }
  body.home .nav-cta-glow .btn{
    width:40px; height:40px; padding:0; border-radius:0; gap:0;
    background:transparent; box-shadow:none;
  }
  body.home .nav-cta-glow .btn:hover{ background:transparent; }
  body.home .nav-cta-glow .btn-label{ display:none; }
  body.home .nav-cta-glow .btn-call{
    width:22px; height:22px; color:var(--sage-deep);
    animation:phone-ring-vibrate 3s ease-in-out infinite;
  }
  body.home .nav-cta-glow .call-wave{
    display:block; width:7px; height:14px; flex:none; color:var(--sage-deep);
  }
  body.home .nav-cta-glow .call-wave path{ opacity:0; }
  body.home .nav-cta-glow .call-wave .wave-line-1{ animation:call-wave-1 3s ease-in-out infinite; }
  body.home .nav-cta-glow .call-wave .wave-line-2{ animation:call-wave-2 3s ease-in-out infinite; }

  /* Every section heading at this width/orientation shares one size (this
     rule's selector matches the carry/avatars/FAQ headings all at once) —
     except the hero heading above, which is deliberately left alone. */
  body.home .section-head h2{ font-size:22px; line-height:1.3; }

  /* 3. Osho/Alan: mobile's stacked orientation (heading above, full-width,
     instead of beside the cards) — the cards themselves are left on their
     desktop sizing/image/content rules (nothing below overrides those, so
     they keep the desktop aspect-ratio, desktop photo and desktop CTA
     position already in effect at this width). */
  #avatars .wrap{ display:block; }
  #avatars .section-head{ grid-column:auto; grid-row:auto; text-align:center; margin:0 0 28px; }
  #avatars .section-head h2.one-liner{ display:block; position:static; left:auto; transform:none; white-space:normal; }
  #avatars .section-head .mini-divider{ margin-left:auto; margin-right:auto; }
  /* Osho/Alan cards 25% smaller — shrinking the grid's own width (not the
     cards directly) keeps both cards equal and centered, same as the
     stats-text column-width trick used elsewhere in this file. */
  #avatars .persona-grid{
    grid-column:auto; grid-row:auto; max-width:75%; margin:0 auto 34px;
  }
  #avatars .persona-quote{ grid-column:auto; grid-row:auto; }

  /* 4. Quote panels: desktop's 3-column layout stays (already correct), no
     side padding of its own — it spans edge-to-edge of #avatars .wrap, same
     as .persona-grid above it, so its left/right edges land exactly on the
     Osho card's left edge and the Alan card's right edge. Each photo is 20%
     smaller (249px -> ~199px), which is what actually stopped the third
     panel overflowing the viewport (the side padding tried before this
     wasn't the real fix and is dropped now that it's misaligning the row). */
  .pq-img-wrap{ width:199px; }
  /* Less empty space between this section and Community Love underneath. */
  #avatars{ padding-bottom:48px; }
  /* A short centered divider above Community Love, matching the one above
     the quote panels (#avatars::before) instead of the wider full-section
     line #testimonials::before normally draws. */
  body.home #testimonials::before{ left:50%; right:auto; width:42px; transform:translateX(-50%); }
  /* Keep this width/orientation's own quote panels centered as they already
     were — the new desktop-only flush-left/flush-right rule for the outer
     two panels (added for desktop alongside this request) is scoped to the
     general min-width:701px rule and would otherwise also reach here. */
  .pq-panel:nth-child(1),
  .pq-panel:nth-child(3){ align-items:center; }
  .pq-panel:nth-child(1) .pq-text,
  .pq-panel:nth-child(3) .pq-text{ text-align:center; }

  /* 5. Testimonials: mobile's stacked heading-above-cards orientation, with
     mobile's own smaller card size (not a scaled copy of the desktop card)
     so two full cards sit in view at once instead of one oversized one. */
  .testi-stage{ flex-direction:column; gap:18px; }
  .testi-head{ order:0; width:auto; }
  .testi-head-title{ font-size:22px; }
  .testi-carousel{ order:0; height:284px; }
  .testi-card{ width:72vw; max-width:290px; padding:20px 18px; height:260px; border-radius:30px; }
  .testi-rating{ font-size:11.5px; margin-bottom:8px; }
  .testi-quote-mark{ font-size:30px; margin-bottom:2px; }
  .testi-quote{ font-size:12.5px; margin-bottom:12px; }
  .testi-avatar{ width:30px; height:30px; }
  .testi-name{ font-size:12px; }
  .testi-heart{ width:30px; height:30px; }

  /* 6. FAQ: the list shrinks to exactly the width of its longest question
     (width:max-content on the list, with every row still width:100% of
     that list) and is centered as a whole — which puts the longest question
     visually centered on the page, every other question starting flush at
     that same left edge, and the divider line under each row (full-width
     of its own row) landing at that same width too, instead of stretching
     edge-to-edge like before. */
  .faq-list{ width:max-content; max-width:100%; margin:0 auto; }
  .faq-question{ justify-content:space-between; text-align:left; }
  .faq-answer p{ text-align:left; margin:0; }

  /* 7. Final CTA heading: same shared heading size as the rest (see above),
     and allowed to wrap to a second line instead of being forced onto one
     and clipped past the viewport edge. */
  body.home .final-band-title{ white-space:normal; font-size:22px; line-height:1.3; }
}