/* === Core OS: responsive rhythm & components patch (non-destructive) === */
:root{
  --maxw: 72rem;
  --pad-x: clamp(1rem, 4vw, 2rem);
  --pad-y: clamp(2rem, 4vw, 4rem);
  --gap: clamp(1rem, 2.5vw, 2rem);
  --teal: #1bb6a8;
}
.page{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x);}
.section{padding:var(--pad-y) 0;}
.stack > * + *{margin-top:var(--gap);}

h1{font-size:clamp(2rem,4.5vw,3.25rem);line-height:1.1;letter-spacing:-0.01em;}
h2{font-size:clamp(1.5rem,3vw,2.25rem);line-height:1.2;}
h3{font-size:clamp(1.125rem,2.2vw,1.35rem);line-height:1.25;}
p,li{font-size:clamp(1rem,1.25vw,1.075rem);line-height:1.6;max-width:68ch;}

.hero{display:grid;gap:var(--gap);align-items:center;}
@media (min-width: 900px){
  .hero{grid-template-columns: 1.2fr 1fr;}
}
.hero img{width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 10px 30px rgba(0,0,0,.5));}

.testimonials{display:grid;gap:var(--gap);}
@media (min-width: 720px){
  .testimonials{grid-template-columns:1fr 1fr 1fr;}
}
.quote{background:#0e0e10;border:1px solid rgba(255,255,255,.06);padding:1rem 1.25rem;border-radius:16px;}
.quote cite{display:block;margin-top:.75rem;color:rgba(255,255,255,.75);}

ul.bullets{display:grid;gap:.5rem;padding-left:1.25rem;}
ul.bullets li{list-style:disc;}

.mobile-cta{position:fixed;left:0;right:0;bottom:0;background:#0b0b0d;border-top:1px solid rgba(255,255,255,.08);padding:.75rem var(--pad-x);display:flex;gap:.75rem;align-items:center;z-index:999;}
.mobile-cta button{flex:1;}
@media (min-width:720px){ .mobile-cta{display:none;} }


/* === Core OS: enhanced responsive media queries & image rules (v2) === */

/* Global responsive media */
img, video, svg, canvas {max-width:100%; height:auto;}

/* Base rhythm tweaks */
body{word-wrap:break-word; overflow-wrap:break-word;}
.page{max-width:72rem;margin:0 auto;padding:0 clamp(1rem,4vw,2rem);}

/* Section spacing scales down on smaller screens */
.section{padding: clamp(1.5rem, 4vw, 4rem) 0;}

/* Type scale that tightens gracefully on very small screens */
@media (max-width: 420px){
  h1{font-size: 1.9rem;}
  h2{font-size: 1.35rem;}
  p, li{font-size: 1rem; line-height: 1.7;}
}

/* Tablet refinements */
@media (min-width: 600px) and (max-width: 899px){
  h1{font-size: 2.4rem;}
  h2{font-size: 1.6rem;}
  p, li{font-size: 1.05rem;}
}

/* Desktop refinements */
@media (min-width: 900px){
  .hero{grid-template-columns: 1.25fr 1fr;}
  .section{padding: clamp(2rem, 4vw, 4.5rem) 0;}
}

/* Testimonials: prevent overly tall cards on phones */
.quote{display:flex; flex-direction:column; justify-content:space-between;}

/* Utility: balanced wrap for long headings */
h1, h2, h3{text-wrap:balance;}
p{text-wrap:pretty;}



/* === Core OS: mobile-safe form styling (v4) === */
form.stack{display:grid; gap: .75rem; width:100%; max-width: 560px;}
form.stack input[type="email"]{
  width:100%;
  padding:.9rem 1rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:#0f0f12;
  color:#fff;
  font-size:16px; /* prevent iOS zoom */
  line-height:1.2;
}
form.stack button{
  width:100%;
  min-height:48px; /* comfy tap target */
  padding:.9rem 1rem;
  border-radius:12px;
  border:1px solid rgba(27,182,168,.85);
  background:transparent;
  color:#fff;
  font-weight:600;
  letter-spacing:.2px;
  cursor:pointer;
}
form.stack button:hover{background:rgba(27,182,168,.08);}
/* Tighten layout on very narrow screens */
@media (max-width:420px){
  form.stack{gap:.6rem;}
  form.stack button{min-height:46px;}
}
/* Align forms within hero/footer blocks */
.hero form.stack{margin-top: .75rem;}
footer form.stack{margin-top: .75rem;}



/* === Core OS: testimonials grid alignment (fix) === */
.testimonials-grid{display:grid; gap: var(--gap);}
@media (min-width: 720px){
  .testimonials-grid{grid-template-columns: repeat(3, 1fr);}
}
.testimonial-card{
  background:#0e0e10;
  border:1px solid rgba(255,255,255,.06);
  padding:1rem 1.25rem;
  border-radius:16px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.testimonial-quote{margin:0;}
.testimonial-author{margin:.75rem 0 0; color:rgba(255,255,255,.75); font-size:0.95em;}



/* === Core OS: Testimonials width & column density tweak (v9) === */
/* Widen overall page max width a bit for roomy 3-up layout */
:root{ --maxw: 84rem; } /* was 72rem */

/* Testimonials grid: tighter gaps, fixed comfortable min widths */
.testimonials-grid{
  max-width: var(--maxw);
  margin-inline: auto;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

/* 2-up on tablets */
@media (min-width: 720px){
  .testimonials-grid{ grid-template-columns: repeat(2, minmax(340px, 1fr)); }
}

/* 3-up on wider desktops with generous min width */
@media (min-width: 1100px){
  .testimonials-grid{ grid-template-columns: repeat(3, minmax(360px, 1fr)); }
}



/* === Core OS: tighten heading-to-grid spacing in Testimonials (v10) === */
section.testimonials h2{ 
  margin-top: 0;
  margin-bottom: .75rem; /* keep a modest visual gap */
}
section.testimonials .testimonials-grid{
  margin-top: 0; /* ensure grid starts right beneath the h2 */
}



/* === Core OS: Testimonials heading and grid vertical alignment (v11) === */
section.testimonials {
  display: block;
}
section.testimonials h2 {
  display: block;
  width: 100%;
  text-align: center;
  margin: 0 0 1rem 0;
}
section.testimonials .testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(0.75rem, 2vw, 1.5rem);
  margin-top: 0;
  justify-items: center;
}



/* === Core OS: Testimonials 3-up desktop, 2-up tablet (v12) === */
/* Tablet: 2 columns */
@media (min-width: 720px) and (max-width: 959px){
  .testimonials-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* Desktop: 3 columns (ensure they sit side-by-side on common laptop widths) */
@media (min-width: 960px){
  .testimonials-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* Equalize card heights */
.testimonials-grid{ align-items: stretch; }
.testimonial-card{ height: 100%; display:flex; flex-direction:column; }



/* === Core OS: Testimonials 3-up breakpoint lowered to 900px (v13) === */
@media (min-width: 900px){
  .testimonials-grid{ grid-template-columns: repeat(3, 1fr); }
}



/* === Core OS: Testimonials slider (v14) === */
.testimonials-scroller{
  position: relative;
  margin: 0 auto;
  max-width: var(--maxw);
}
.testimonials-track{
  display: flex;
  gap: clamp(.75rem, 2vw, 1.25rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: .5rem;
  -webkit-overflow-scrolling: touch;
}
.testimonials-track::-webkit-scrollbar{height:8px;}
.testimonials-track::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:8px;}
/* Cards behave as slides */
.testimonial-card{
  flex: 0 0 auto;
  width: clamp(85%, 48vw, 360px); /* mobile-friendly default */
  scroll-snap-align: start;
}
/* Tablet: show ~2 per view */
@media (min-width: 720px){
  .testimonial-card{ width: clamp(340px, 44vw, 420px); }
}
/* Desktop: show ~3 per view */
@media (min-width: 900px){
  .testimonial-card{ width: clamp(320px, 30vw, 400px); }
}
/* Nav buttons */
.tnav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid rgba(27,182,168,.85);
  background: rgba(11,11,13,.75);
  color: #fff;
  border-radius: 12px;
  width: 40px; height: 40px;
  display: none; /* hidden on mobile */
  align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 5;
}
.tnav.prev{ left: -4px; }
.tnav.next{ right: -4px; }
@media (min-width: 900px){
  .tnav{ display:flex; }
}