/* tx.css - the treatments layer (R19, 2026-08-23)
   Loads AFTER yaara.css + shell.css. Bound by build/DESIGN_LANGUAGE.md: nothing
   here renders under 14px, there are no chips, no pills, no boxed panels, no
   kickers and no hint lines. Four things only: the circular before/after
   slider, the two-column acts, the plain FAQ, the circle index.
   ASCII comments only - the console is cp1252. */

/* --- the before/after slider, always inside a circle --------------------
   The AFTER is clipped from the left edge to the divider, so on a Hebrew page
   the untreated side sits where the eye starts and dragging leftward uncovers
   the result. One custom property drives clip and divider together. */
.ba{--x:52%;position:relative;display:block;margin:0;aspect-ratio:1;
  clip-path:circle(50% at 50% 50%);background:var(--card);
  cursor:ew-resize;touch-action:pan-y;isolation:isolate}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .after{clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.ba.is-grab{cursor:grabbing}
.ba:focus-visible{outline:2px solid var(--honey-deep);outline-offset:6px;border-radius:50%}
.ba--still{cursor:default}

/* the divider: a hairline and a small grip, nothing more */
.ba__h{position:absolute;top:0;bottom:0;left:var(--x);width:1.5px;z-index:3;
  background:rgba(255,252,246,.9);pointer-events:none;transform:translateX(-.75px);
  box-shadow:0 0 0 .5px rgba(84,64,40,.2),0 0 16px rgba(20,16,11,.22)}
.ba__h::after{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:13px;height:13px;border-radius:50%;background:rgba(255,252,246,.96);
  box-shadow:0 2px 10px rgba(60,40,26,.4)}

/* the two sizes the page uses */
.ba--lg{width:min(100%,clamp(300px,36vw,520px));margin-inline:auto}
.ba--md{width:clamp(200px,20vw,290px);flex:0 0 auto}

/* the halo the hero circle floats in */
.thero .media{position:relative;isolation:isolate}
.thero .media::before{content:"";position:absolute;inset:-8%;z-index:-1;
  background:radial-gradient(58% 58% at 50% 46%,rgba(217,190,147,.34),transparent 70%);
  filter:blur(10px)}

/* --- act 1: the hero, light porcelain, never a dark plate --------------- */
.thero{padding-top:clamp(40px,6.5vh,88px);padding-bottom:clamp(48px,7.5vh,96px)}
.thero .in{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(34px,5vw,86px);
  align-items:center;min-height:min(64vh,600px)}
.thero h1.h2{font-size:clamp(38px,5.2vw,80px);line-height:1.06}
.thero .lead{font-size:clamp(17px,1.35vw,20px);line-height:1.85;color:var(--ink-2);
  max-width:34em;margin:22px 0 0}
.thero .cta{margin-top:34px}
@media(max-width:920px){
  .thero .in{grid-template-columns:1fr;gap:34px}
  .thero .media{order:-1;max-width:360px;margin-inline:auto;width:100%}
  /* the halo may bleed up and down, never sideways: at 390px a horizontal
     bleed pushes the document past the viewport */
  .thero .media::before{inset:-7% 0}
}

/* --- acts --------------------------------------------------------------- */
.tsec{padding-block:clamp(60px,8vh,112px)}
.tsec+.tsec{padding-top:0}
.grid2{display:grid;grid-template-columns:.92fr 1fr;gap:clamp(32px,4.4vw,76px);
  align-items:center}
@media(max-width:920px){.grid2{grid-template-columns:1fr;gap:30px}}
.say .h2{margin-bottom:6px}
.tbody{font-size:17px;line-height:1.9;color:var(--ink-2);max-width:36em;margin:18px 0 0}
.tbody p{margin:0 0 1.15em}
.tbody p:last-child{margin-bottom:0}
.figw{position:relative;border-radius:5px;overflow:hidden;box-shadow:var(--glow-soft);
  background:var(--card);margin:0}
.figw img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;display:block}

/* --- act 3: her other pairs, circles in a row --------------------------- */
.res{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;
  gap:clamp(24px,3.4vw,58px);margin-top:clamp(34px,4vw,52px)}

/* --- act 4: the FAQ, plain --------------------------------------------- */
.faq{margin-top:clamp(30px,3.4vw,42px);border-top:1px solid var(--line);max-width:68ch}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;position:relative;
  padding-block:22px;padding-inline:0 46px;
  font:600 clamp(16.5px,1.35vw,19px)/1.5 var(--f);color:var(--ink);
  transition:color var(--t-ui) var(--ease-out)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;inset-inline-end:8px;top:calc(50% - 6px);
  width:9px;height:9px;border-inline-end:1.5px solid var(--honey);
  border-bottom:1.5px solid var(--honey);transform:rotate(45deg);
  transition:transform var(--t-ui) var(--ease-out)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover,.faq details[open] summary{color:var(--honey-deep)}
.faq .a{padding:0 0 26px;font-size:16.5px;line-height:1.9;color:var(--ink-2);max-width:62ch}

/* --- act 5: related, three circles, names only -------------------------- */
.rel3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,40px);
  margin-top:clamp(34px,4vw,52px);max-width:900px}
@media(max-width:760px){.rel3{grid-template-columns:1fr;max-width:300px;margin-inline:auto}}
@media(max-width:560px){.res{justify-content:center}}
.rcard{display:block;color:var(--ink)}
.rcard .rph{display:block;position:relative;aspect-ratio:1;border-radius:50%;overflow:hidden;
  box-shadow:0 18px 42px -22px rgba(60,40,26,.5);background:var(--card);
  transition:transform var(--t-reveal) var(--ease-out),box-shadow var(--t-reveal) var(--ease-out)}
.rcard:hover .rph{transform:translateY(-5px);box-shadow:0 26px 56px -22px rgba(60,40,26,.58)}
.rcard .rph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rcard .rph .after{transition:opacity .55s var(--ease-out)}
.rcard:hover .rph .after{opacity:0}
.rcard .rn{display:block;font:600 clamp(15px,1.2vw,17.5px)/1.45 var(--f);
  margin-top:16px;text-align:center}

/* --- act 6: the closing line -------------------------------------------- */
.tcta{border-top:1px solid var(--line);padding-block:clamp(60px,8vh,104px)}
.tcta .in{max-width:740px}
.tcta .cta{margin-top:30px}

/* === the index: circles that heal as they cross the screen ============== */
.tindex .grid-in{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(26px,3vw,50px) clamp(16px,2.2vw,34px);margin-top:clamp(40px,5vw,64px)}
@media(max-width:1060px){.tindex .grid-in{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.tindex .grid-in{grid-template-columns:1fr 1fr;gap:30px 14px}}
@media(min-width:1061px){
  .tindex .grid-in .c:nth-child(4n+2){margin-top:40px}
  .tindex .grid-in .c:nth-child(4n+3){margin-top:16px}}
.c{display:block;text-align:center;color:var(--ink)}
.c__ph{display:block;position:relative;aspect-ratio:1;border-radius:50%;overflow:hidden;
  --x:0%;cursor:ew-resize;touch-action:pan-y;background:var(--card);
  box-shadow:0 20px 46px -22px rgba(60,40,26,.5);
  transition:transform var(--t-reveal) var(--ease-out),box-shadow var(--t-reveal) var(--ease-out)}
.c:hover .c__ph{transform:translateY(-5px);box-shadow:0 30px 60px -24px rgba(60,40,26,.6)}
.c__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.c__ph .after{clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.c__ph.is-grab{cursor:grabbing}
.c__ph:focus-visible{outline:2px solid var(--honey-deep);outline-offset:4px}
/* on a 230px circle the grip is a hint that the circle can be taken over */
.c__ph .ba__h{background:rgba(255,252,246,.78);box-shadow:0 0 0 .5px rgba(84,64,40,.14)}
.c__ph .ba__h::after{width:11px;height:11px;opacity:.8;box-shadow:0 2px 8px rgba(60,40,26,.3)}
.c:hover .c__ph .ba__h::after{opacity:1}
.c__ph--none{cursor:default}
.c__t{display:block;font:600 clamp(15px,1.15vw,17.5px)/1.45 var(--f);
  margin-top:18px;color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .c__ph .after,.ba .after{clip-path:none}
}

/* =======================================================================
   PHONE LAYER (2026-08-23). The doctrine: adapt, never hide. Every desktop
   act stays on the phone; the circles get real fingers, the related row
   becomes a rail you swipe, the buttons grow into the thumb zone. Nothing
   added here renders under 14px and nothing added here is a chip, a pill,
   a boxed panel or a hint line (build/DESIGN_LANGUAGE.md).
   ======================================================================= */

/* --- touch equivalents for every hover-only affordance ------------------ */
@media (hover:none){
  /* a card that lifts on a tap and never comes back down is worse than a
     card that never lifts. The lift becomes a press instead. */
  .c:hover .c__ph{transform:none;box-shadow:0 20px 46px -22px rgba(60,40,26,.5)}
  .rcard:hover .rph{transform:none;box-shadow:0 18px 42px -22px rgba(60,40,26,.5)}
  .c__ph.is-grab,.c:active .c__ph,.rcard:active .rph{transform:scale(.985)}
  /* the grip is the only thing that says "this circle is yours to move",
     and there is no cursor on a phone to say it instead */
  .c__ph .ba__h::after{opacity:1}
  /* turning a related circle back to its before was hover-only. On touch the
     card sitting in the middle of the rail does it as you swipe past. */
  .rcard:hover .rph .after{opacity:1}
  .rcard.is-rev .rph .after{opacity:0}
  .faq summary:hover{color:var(--ink)}
  .tx a,.tx button,.tx summary{-webkit-tap-highlight-color:transparent}
  /* the name under an index circle is the door once the photograph is a
     flip, so it needs a full 44px of its own. Padding, never a flex box: a
     flex box makes the name one unbreakable item and her longer names then
     run off the side of the circle instead of wrapping under it. */
  .c__t{padding-block:12px;margin-top:6px}
  .rcard .rn{margin-top:14px}
}

/* --- the WhatsApp buttons: her one action, sized for a thumb ------------ */
.tx .btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px}

@media(max-width:620px){
  .tx .wrap{padding-inline:max(var(--gutter),env(safe-area-inset-left),
    env(safe-area-inset-right))}

  /* act 1: the circle is the first thing she shows, so give it the width */
  .thero{padding-top:clamp(24px,3.4vh,44px);padding-bottom:clamp(40px,6vh,72px)}
  .thero .in{gap:30px;min-height:0}
  .thero .media{max-width:min(84vw,360px)}
  .ba--lg{width:100%}
  .thero .lead{margin-top:18px;line-height:1.8}
  .thero .cta{margin-top:26px}
  .tx .cta .btn{min-height:54px;width:min(100%,340px);font-size:16px}

  /* act 2 */
  .tsec{padding-block:clamp(52px,7vh,80px)}
  .tbody{font-size:16.5px;line-height:1.85}

  /* act 3: her other pairs. They stay a "row" in the flex sense but each
     circle takes the width, because a horizontal rail and a horizontal
     drag-to-reveal cannot share the same finger. */
  .res{gap:34px;justify-content:center;margin-top:32px}
  .ba--md{width:min(80vw,330px)}

  /* act 4 */
  .faq summary{font-size:17px;padding-block:20px}
  .faq .a{font-size:16.5px;padding-bottom:24px}
}

/* --- act 5: the three related circles become a swipeable rail ----------- */
@media(max-width:760px){
  .rel3{display:flex;grid-template-columns:none;max-width:none;margin-inline:0;
    gap:16px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding-bottom:4px}
  .rel3::-webkit-scrollbar{display:none}
  .rcard{flex:0 0 clamp(148px,50vw,215px);scroll-snap-align:center}
  .rcard .rn{font-size:15px}
}
/* full bleed, so the third circle reads as "there is more to the side" */
@media(max-width:620px){
  .rel3{margin-inline:calc(max(var(--gutter),env(safe-area-inset-left)) * -1);
    padding-inline:max(var(--gutter),env(safe-area-inset-left))}
}

@media (prefers-reduced-motion:reduce){
  .rcard .rph .after,.c__ph .after{transition:none}
}

/* reveal-safe: show reveal WRAPPERS only; never touch .ba slider clip/transform */
.rv,[data-rv],.wipe,.figw{opacity:1!important;visibility:visible!important}
.rv,[data-rv]{transform:none!important}
.wipe:not(.ba):not(.ba *){clip-path:none!important}