/* =====================================================================
   Text reviews, lifted from the landing page so the three unlisted product
   pages can carry them. Tokens (--ink, --muted, --hair, --card) come from the
   page they load on.
   ===================================================================== */
.testi2__scroll{
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 4px 10px; scrollbar-width:none; -ms-overflow-style:none;
}
.testi2__scroll::-webkit-scrollbar{display:none;}
.testi2__card{
  position:relative; overflow:hidden;
  flex:0 0 min(320px, 84vw); scroll-snap-align:start;
  background:linear-gradient(155deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border:1px solid var(--hair); border-radius:var(--r-lg);
  padding:30px 26px; box-shadow:0 22px 48px rgba(0,0,0,0.4); display:flex; flex-direction:column;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease, background .4s ease;
}
.testi2__card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--amber), transparent);
  opacity:0; transition:opacity .4s ease;
}
.testi2__card:hover{
  transform:translateY(-6px);
  background:linear-gradient(155deg, rgba(255,255,255,0.08), rgba(226,116,44,0.05));
  border-color:rgba(201,139,77,0.35);
  box-shadow:0 28px 56px rgba(201,139,77,0.14), 0 28px 56px rgba(0,0,0,0.4);
}
.testi2__card:hover::before{opacity:0.8;}
.testi2__card p{font-family:'Source Serif 4', serif; font-style:italic; font-weight:400; font-size:16px; line-height:1.6; color:var(--ink); min-height:132px;}
.testi2__person{display:flex; align-items:center; gap:12px; margin-top:20px; padding-top:20px; border-top:1px solid var(--hair);}
.testi2__avatar{
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(155deg, var(--amber), var(--orange-deep));
  box-shadow:0 6px 16px rgba(201,139,77,0.35), inset 0 1px 0 rgba(255,255,255,0.3);
  color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:600; font-size:13px;
  font-family:'Source Serif 4', serif; flex:0 0 auto;
}
.testi2__person b{font-size:13.5px; font-weight:600; display:block;}
.testi2__person span{font-size:12px; color:var(--muted);}
/* ---------- carousel nav ----------
   These were missing when this component was extracted: the markup carried
   .testi2__nav, arrows and dots, but none of their styling and none of the
   code that drives them, so on the plan pages the controls only worked
   because those pages define the same rules inline. On a page.css page they
   rendered as bare buttons. Ported verbatim so this file is the whole
   component; testimonials.js supplies the behaviour. */
.testi2__nav{display:flex; align-items:center; justify-content:center; gap:16px; margin-top:6px;}
.testi2__arrow{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--hair);
  background:var(--paper); color:var(--orange-deep);
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto;
  font-size:15px; line-height:1;
  transition:background .3s ease, transform .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.testi2__arrow:hover,
.testi2__arrow:active,
.testi2__arrow:focus-visible{
  background:linear-gradient(155deg, var(--amber), var(--orange-deep));
  color:#fff; border-color:transparent; transform:scale(1.08);
  box-shadow:0 10px 22px rgba(201,139,77,0.4);
}
.testi2__arrow:disabled{opacity:.35; cursor:default; transform:none; box-shadow:none;}

.scroll-dots{display:flex; align-items:center; gap:8px;}
.scroll-dot{
  width:7px; height:7px; padding:0; border:none; border-radius:999px;
  background:var(--hair); cursor:pointer; position:relative;
  transition:background .3s ease, width .3s ease;
}
.scroll-dot.is-active{
  width:22px;
  background:linear-gradient(90deg, var(--amber), var(--orange-deep));
}
/* 7x7 is fine to look at and far too small for a thumb; the hit area is
   expanded with a pseudo-element so the visual stays as designed. */
.scroll-dot::after{content:""; position:absolute; inset:-14px -4px;}

/* ---------- eyebrow ----------
   The transformations block is lifted from the plan pages, which style these
   inline. page.css defines .eyebrow but neither of its children, so on the
   cookbook page "Real results" rendered as an unstyled line of body text and
   the underline SVG fell back to the 300x150 default. */
.eyebrow__label{
  font-family:'Bodoni Moda', Georgia, serif; font-style:italic; font-weight:500;
  font-size:19px; color:var(--ink); display:block; margin-bottom:8px;
}
.eyebrow__stroke{display:block; height:10px; width:118px;}
.eyebrow__stroke path{stroke:var(--orange); stroke-width:3; fill:none; stroke-linecap:round;}