/* ==== Email updates CTA section ==== */
.cta-signup {
  padding: 80px 16px;
  background: #f2f2e8;
  color: #404040;
}

.cta-signup .cta-inner {
  max-width: 480px;
  margin: 0 auto;
  text-align: left;
}

.cta-signup h2 {
  font-size: clamp(24px, 3vw, 32px);
  margin-bottom: 8px;
  color: #404040;
}

.cta-signup p {
  margin-bottom: 24px;
  color: #404040;
}

.cta-form label {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 8px;
  color: #404040;
}

.cta-form input[type="email"] {
  width: 100%;
  padding: 14px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.8);
  background: rgba(183, 244, 197, 0.9);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.04);
  outline: none;
  margin-bottom: 16px;
  color: #404040;
}

.cta-form input[type="email"]::placeholder {
  color: rgba(64,64,64,0.6);
}

.cta-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.85rem;
  margin-bottom: 20px;
  color: #404040;
}

.cta-checkbox input[type="checkbox"] {
  margin-top: 2px;
}

.cta-submit {
  display: inline-block;
  padding: 12px 36px;
  border-radius: 999px;
  border: none;
  background: #2f6b5a;
  color: #f2f2e8;
  font-weight: 600;
  cursor: pointer;
}

.cta-submit:hover {
  filter: brightness(1.05);
}


/* Replace CTA button background with new image */
header nav .cta {
    background-image: url("../assets/get_access_btn.png") !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border-radius: 999px !important;
    padding: 18px 48px !important;
    color: #404040 !important;
    font-weight: 700 !important;
}

/* Fill all page background with #f2f2e8 */
body, html {
    background: #f2f2e8 !important;
}


/* Footer text to #404040 */
footer, footer *, .footer, .footer * {
    color: #404040 !important;
    font-family: Inter, sans-serif !important;
}


/* Force nav text to #404040 and correct font */
header nav a,
header nav a:visited,
header nav a:active {
    color: #404040 !important;
    font-family: Inter, sans-serif !important;
    font-weight: 600 !important;
}

/* CTA button text */
header nav .cta,
header nav .cta span {
    color: #404040 !important;
    font-family: Inter, sans-serif !important;
    font-weight: 700 !important;
}


/* Increase phone size in carousel */
.features-carousel .phone-wrap img,
.features-carousel .carousel img {
    transform: scale(1.25) !important;
    transform-origin: center center !important;
}


/* Global background update */
body {
  background: #f2f2e8 !important;
}

/* Carousel text color */
.features-carousel .feature-copy *,
.features-carousel h3,
.features-carousel p {
  color: #f2f2e8 !important;
}

body, p, h1, h2, h3, h4, h5, h6, span, li, a { color:#404040 !important; }

:root{
  --sage-ink:#0b1f1a;
  --sage-deep:#1e5f57;
  --sage-mid:#2f7d71;
  --sage-mint:#e8f3ef;
  --sage-cream:#fefefe;
  --sage-accent:#7ac0a6;
  --ink:#0b1f1a;
  --bg:#ffffff;
  --shadow:0 10px 20px rgba(11,31,26,.08), 0 3px 6px rgba(11,31,26,.06);
}

/* === Stolzl Custom Font === */
@font-face {
  font-family: 'Stolzl';
  src: url('../assets/fonts/stolzl_regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Stolzl';
  src: url('../assets/fonts/stolzl_light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Stolzl';
  src: url('../assets/fonts/stolzl_medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Stolzl';
  src: url('../assets/fonts/stolzl_bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


*{box-sizing:border-box}
html,body{  font-family: 'Stolzl', -apple-system, system-ui, sans-serif;

  background-color: #ffffff; color:#e5fff8;
}
body{
  background-color: #ffffff; color:#e5fff8;
}
.container{width:min(1100px,92vw);margin:auto}

/* Header */
.site-header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(180%) blur(8px);background:#0a6150;border-bottom:1px solid color-mix(in oklab, var(--sage-mint), #000 5%)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{font-weight:800;font-size:22px;letter-spacing:.5px;color:var(--sage-deep);text-decoration:none}
.nav-links{display:flex;gap:20px;align-items:center;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--ink);text-decoration:none;font-weight:600}
.nav-links a:hover{color:var(--sage-deep)}
.nav-toggle{display:none;background:transparent;border:0;width:44px;height:44px;position:relative}
.nav-toggle span{position:absolute;left:10px;right:10px;height:2px;background:#1a2;top:14px}
.nav-toggle span:nth-child(2){top:21px}
.nav-toggle span:nth-child(3){top:28px}
@media (max-width: 860px){
  .nav-toggle{display:block}
  .nav-links{position:fixed;inset:60px 0 auto 0;background:#2d7d6e;padding:20px;display:grid;gap:12px;transform:translateY(-120%);transition:.35s ease;border-bottom:1px solid var(--sage-mint)}
  .nav-links.open{transform:translateY(0)}
}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;font-weight:700;text-decoration:none;border:2px solid transparent;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--sage-deep);color:white}
.btn--primary:hover{background:var(--sage-mid)}
.btn--ghost{background:#0a6150;border-color:var(--sage-mint);color:var(--sage-deep)}
.btn--ghost:hover{background:var(--sage-mint)}

/* Sections */
.section{padding: clamp(56px, 8vw, 110px) 0;background:#2d7d6e}
.section--alt{background:var(--sage-cream)}
.section-head{text-align:center;margin-bottom:28px;position:relative;z-index:2}
.eyebrow{font-weight:800;color:var(--sage-deep);text-transform:uppercase;letter-spacing:.08em;font-size:13px;margin:0 0 8px}
.h1{font-family:"Playfair Display",serif;font-size: clamp(28px, 5vw, 44px);line-height:1.15;margin:0 0 10px}
.subhead{max-width:800px;margin:0 auto;color:color-mix(in oklab,var(--ink),#000 10%)}

/* How it works (first) */
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap: clamp(24px, 4vw, 48px);align-items:center}
.two-col__copy,.two-col__media{position:relative;z-index:2}
.two-col__media img{width:100%;border-radius:24px;border:0;display:block}
@media (max-width: 980px){.two-col{grid-template-columns:1fr}.two-col__media{order:-1}}

/* Hero (second) */
.hero{padding: clamp(48px, 6vw, 96px) 0 24px;background-image: noneforestbackground-size: cover, cover;background-position: center, center;background-attachment: scroll, fixed;overflow: clip}
.hero-grid{display:grid;grid-template-columns:1fr;gap:20px;align-items:center}
.display{font-family:"Playfair Display", serif;font-size: clamp(42px, 7vw, 76px);line-height:1.05;letter-spacing:-.5px;margin:0 0 12px;color:var(--sage-deep)}
.lead{font-size: clamp(16px, 2.2vw, 20px);color:color-mix(in oklab,var(--ink),#000 12%);margin:0 0 18px}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.badge{background:#0a6150;color:var(--sage-deep);padding:8px 12px;border-radius:999px;font-weight:700;font-size:13px}

/* Marquee (phrases repeat infinitely) */
.marquee{overflow:hidden;border-top:1px solid rgba(229,255,248,0.3);border-bottom:1px solid rgba(229,255,248,0.3);background:transparent}

.marquee__track span{white-space:nowrap}
}

/* Feature grid */
.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem;justify-items:center}
.card{background:#2d7d6e;border:1px solid var(--sage-mint);border-radius:18px;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-4px);width:100%;height:auto;border:0}
.card-body{
  background-color: #ffffff; color:#e5fff8;
}
.card-body h4{margin:0 0 6px;font-size:18px;color:var(--sage-deep)}
.card-body p{margin:0;color:color-mix(in oklab,var(--ink),#000 14%)}
@media (max-width: 980px){.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem;justify-items:center}}
@media (max-width: 640px){.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem;justify-items:center}}

/* Early stories bubbles */
.stories-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  width:min(1100px,92vw);
  margin: 14px auto 0;
  position: relative;
  z-index: 2;
}
.bubble{
  background:#2d7d6e;
  border:1px solid var(--sage-mint);
  border-radius: 18px;
  padding: 24px;
  
  transition: transform .25s ease, box-shadow .25s ease;
}
.bubble p{ font-size: 20px; margin:0 0 10px; }
.bubble cite{ opacity:.8; font-style: normal; font-weight:700; }
.bubble:hover{ transform: scale(1.02);  }
@media (max-width: 980px){ .stories-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .stories-grid{ grid-template-columns: 1fr; } }

/* FAQ */




/* CTA */
.cta{background:linear-gradient(180deg,#0a6150,#2d7d6e), var(--sage-mint))}
.cta-box{background:#2d7d6e;border:1px solid var(--sage-mint);border-radius:22px;padding:24px;text-align:center;width:min(760px,92vw);margin:0 auto}
.form{display:flex;gap:10px;justify-content:center;margin-top:12px}
.form input{padding:12px 14px;border-radius:999px;border:1px solid var(--sage-mint);min-width:240px}
.form button{white-space:nowrap}
@media (max-width:640px){.form{flex-direction:column}}

/* Footer */
.footer{padding:36px 0;margin:0;width:100%;background:#2c776c;border-top:1px solid var(--sage-mint)}
.footer-grid{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.footer-nav{display:flex;gap:14px}
.footer a{color:var(--ink);text-decoration:none}
.footer a:hover{color:var(--sage-deep)}

/* Reveal util */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--sage-deep);color:white;padding:10px 14px;border-radius:12px;opacity:0;transition:.3s ease;transform:translateX(-50%) translateY(0)}

/* Phones: spin animation (applies to all .phone) */
@keyframes spinOnce{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
.phone.spin{animation:spinOnce .9s ease-in-out 1}

/* No-overlap hardening */
section,.section{overflow:clip}
img{max-width:100%;height:auto;display:block;border:0}

/* === Seamless Gapless Marquee === */
.marquee{overflow:hidden;border-top:1px solid rgba(229,255,248,0.3);border-bottom:1px solid rgba(229,255,248,0.3);background:transparent}

@keyframes marqueeLoop {
  from {transform:translateX(0);}
  to {transform:translateX(-50%);}
}
.marquee--animate 
@media (prefers-reduced-motion: reduce){
  .marquee--animate 
}

/* === Phone grid normalization (consistent, centered phones like the reference) === */
.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem;justify-items:center}
@media (max-width: 980px){
  .feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem;justify-items:center}
}
@media (max-width: 640px){
  .feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem;justify-items:center}
}
.card{ display:flex; flex-direction:column; }
.card picture{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 16px;
  background: var(--sage-cream, #f6f7f2);
}
/* Use a consistent visual size for phones; preserve aspect and center */
.card picture img.phone{
  height: clamp(260px, 28vw, 420px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display:block;
}
.card .card-body{
  background-color: #ffffff; color:#e5fff8;
}

/* === Marquee: screenshot-matched typography + gapless loop === */
.marquee{overflow:hidden;border-top:1px solid rgba(229,255,248,0.3);border-bottom:1px solid rgba(229,255,248,0.3);background:transparent}
.marquee__track{
  display:flex;
  gap: 64px;                /* roomy spacing between phrases */
  padding: 0; margin: 0;
  white-space: nowrap;
  will-change: transform;
}
.marquee__track span{
  font-weight: 800;         /* bold like the screenshot */
  font-size: 20px;          /* adjust if you want bigger/smaller */
  line-height: 1.2;
  color: var(--sage-deep, #1e5f57);
  text-transform: none;     /* keep exact casing */
  letter-spacing: 0;        /* tight like the screenshot */
}
@keyframes marqueeLoop { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee--animate .marquee__track{ animation: marqueeLoop 22s linear infinite; }
@media (prefers-reduced-motion: reduce){
  .marquee--animate .marquee__track{ animation: none; }
}

/* === Extra white space between badges and marquee === */
.feature-badges, .features-overview, .badge-row, .badge-section {
  margin-bottom: 80px !important; /* spacious margin for visual breathing room */
}

/* === Extra EXTRA spacing above the marquee (strong selectors) === */
.hero-badges,
.hero .hero-badges,
.feature-badges,
.features-overview,
.badge-row,
.badge-section {
  margin-bottom: 30px !important; /* larger breathing room */
}
/* Ensure space even if the badges class name differs — push the marquee itself down */
.marquee {
  margin-top: clamp(40px, 8vw, 30px) !important;
}

/* === Adjusted spacing: reduced to about 75% less === */

/* === Feature badge styling update (25% larger) === */
.feature-badges .badge,
.badge-row .badge,
.badge-section .badge {
  font-size: 1.25em !important;
  padding: 14px 28px !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  color: var(--sage-deep, #1e5f57);
  background-color: rgba(30,95,87,0.08);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.feature-badges .badge:hover,
.badge-row .badge:hover,
.badge-section .badge:hover {
  background-color: rgba(30,95,87,0.15);
  transform: translateY(-2px);
}

/* === "Read early stories" matches 'See what's inside' === */
button.read-stories,
a.read-stories,
.read-stories {
  display: inline-block;
  background-color: #f9faf9;
  border: 2px solid rgba(30,95,87,0.15);
  color: var(--sage-deep, #1e5f57);
  font-weight: 700;
  font-size: 1.1em;
  padding: 14px 32px;
  border-radius: 50px;
  transition: all 0.2s ease;
  text-align: center;
  text-decoration: none;
}
button.read-stories:hover,
a.read-stories:hover,
.read-stories:hover {
  background-color: rgba(30,95,87,0.1);
  color: var(--sage-deep, #1e5f57);
  border-color: rgba(30,95,87,0.25);
}

/* === Uniform button behaviors & ghost style match === */
a.btn, button.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 700;
  border-radius: 9999px;
  border: 2px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
  will-change: transform;
}
/* Ghost style (matches "See what's inside") */
.btn--ghost {
  background: #f9faf9;
  border-color: rgba(30,95,87,0.15);
  color: var(--sage-deep, #1e5f57);
  padding: 14px 32px; /* match padding exactly */
  
}
.btn--ghost:hover {
  background: rgba(30,95,87,0.08);
  border-color: rgba(30,95,87,0.25);
}
/* Hover lift for ALL buttons using .btn */
a.btn:hover, button.btn:hover {
  transform: translateY(-2px);
  
}

/* === Read early stories button identical to See what's inside === */
a.read-stories.btn--ghost {
  background: #f9faf9;
  border: 2px solid rgba(30,95,87,0.15);
  color: var(--sage-deep, #1e5f57);
  font-weight: 700;
  font-size: 1.1em;
  padding: 14px 32px;
  border-radius: 9999px;
  
  text-decoration: none;
  transition: all 0.2s ease;
}
a.read-stories.btn--ghost:hover {
  background: rgba(30,95,87,0.08);
  border-color: rgba(30,95,87,0.25);
  transform: translateY(-2px);
  
}

/* === Apply same hover lift to all buttons === */
a.btn:hover, button.btn:hover {
  transform: translateY(-2px);
  
}

/* === Phone hover spin-once === */
 to { transform: rotateY(360deg); } }
img.phone { cursor: pointer; transform-style: preserve-3d; }
img.phone

/* === Phone Modal (zoom + rotate) === */
#phoneModal {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: none; align-items: center; justify-content: center;
  z-index: 9999; padding: 24px;
}
#phoneModal.open { display: flex; }
#phoneModal .modal-box {
  background: #fff; border-radius: 16px; width: min(1000px, 92vw); max-height: 92vh;
   display: grid; grid-template-rows: 1fr auto;
}
#phoneModal .canvas {
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background: #f6f7f2; border-bottom: 1px solid rgba(0,0,0,.06);
}
#phoneModal .canvas img {
  max-height: 80vh; max-width: 100%; object-fit: contain; transform-origin: center;
}
#phoneModal .controls {
  display:flex; gap:10px; align-items:center; justify-content:space-between;
  padding: 12px 14px;
}
#phoneModal .controls .left, #phoneModal .controls .right { display:flex; gap:10px; align-items:center; }
#phoneModal .btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius: 10px; border:1px solid rgba(0,0,0,.12);
  background:#fff; cursor:pointer; font-weight:700;
  
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
#phoneModal .btn:hover { transform: translateY(-1px);  }
#phoneModal input[type="range"] { width: 180px; }
#phoneModal .label { font-weight:700; color:#1e5f57; }

/* === Phone Modal with Section Details === */
#phoneModal .modal-box { grid-template-columns: 1.1fr .9fr; grid-template-rows: auto 56px; }
#phoneModal .canvas { grid-column: 1 / 2; grid-row: 1 / 2; }
#phoneModal .details { grid-column: 2 / 3; grid-row: 1 / 2; padding: 18px 18px 12px; overflow:auto; }
#phoneModal .details h3 { margin: 0 0 8px; color: var(--sage-deep, #1e5f57); font-size: 22px; }
#phoneModal .details p { margin: 0 0 10px; color: color-mix(in oklab, #0b1f1a, #000 15%); }
#phoneModal .controls { grid-column: 1 / 3; grid-row: 2 / 3; }
@media (max-width: 880px){
  #phoneModal .modal-box { grid-template-columns: 1fr; grid-template-rows: auto auto 56px; width: min(720px, 92vw); }
  #phoneModal .details { grid-column: 1 / 2; grid-row: 2 / 3; }
  #phoneModal .controls { grid-column: 1 / 2; grid-row: 3 / 4; }
}

/* === Modal carousel arrows === */
#phoneModal .canvas { position: relative; }
#phoneModal .nav-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:999px; border:1px solid rgba(0,0,0,.15);
  background:#fff; 
  display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; color:#1e5f57; cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  user-select:none;
}
#phoneModal .nav-btn:hover{ transform:translateY(-50%) scale(1.05);  }
#phoneModal .nav-btn.prev{ left:10px; }
#phoneModal .nav-btn.next{ right:10px; }

/* Keep existing phone hover spin */
 to { transform: rotateY(360deg); } }
img.phone { cursor:pointer; transform-style: preserve-3d; }
img.phone

/* === Force 2 per row for phone grids === */
#features .feature-grid,
.phones-grid {
  display:grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 3rem !important;
  justify-items: center !important;
}
@media (max-width: 980px){
  #features .feature-grid,
  .phones-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 640px){
  #features .feature-grid,
  .phones-grid{ grid-template-columns: 1fr !important; }
}

/* === Bigger, uniform phone sizing === */
.card picture img.phone,
#features img.phone,
.phones-grid img.phone {
  height: clamp(420px, 46vw, 640px) !important; /* bigger and consistent */
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  display:block;
}

/* === Phone tilt frame + slider === */




/* Ensure hover spin still applies to IMG, tilt sits on the parent frame */
.card picture{ display:flex; flex-direction:column; align-items:center; }
.card picture 

/* === Remove all phone shadows === */
img.phone, .phone-frame img, .phones-grid img.phone {
  
  filter: none !important;
}

/* === Phone rotation frame + slider (rotate around center) === */




.card picture{ display:flex; flex-direction:column; align-items:center; }
.card picture 

/* === 3D Phone rotation (rotateX) === */





/* === Drag 3D rotation for phones (±15° on X/Y/Z) === */
.phone-frame{
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotateZ(var(--rz, 0deg));
  transform-style: preserve-3d;
  transition: transform .12s ease;
  will-change: transform;
  perspective: 1000px;
}
.card picture{ display:flex; flex-direction:column; align-items:center; }
.card picture .phone-frame{ display:flex; align-items:center; justify-content:center; }

/* === Remove all shadows globally (phones, frames, images, etc.) === */
img.phone, .phone-frame img, .phones-grid img.phone, .card img.phone, picture img.phone {
  box-shadow: none !important;
  filter: none !important;
}
.phone-frame, .phones-grid, .card, picture {
  box-shadow: none !important;
  filter: none !important;
}

/* === Dynamic phone shadows (react to rotation) === */
.card picture{ position: relative; display:flex; flex-direction:column; align-items:center; }
.card picture .phone-frame{ position: relative; z-index: 2; } /* above shadow */
.phone-shadow{
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 65%;
  width: 62%;
  height: 18%;
  transform: translate(-50%, 0) scale(1, .5);
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
              rgba(0,0,0,0.28) 0%,
              rgba(0,0,0,0.22) 35%,
              rgba(0,0,0,0.12) 55%,
              rgba(0,0,0,0.00) 80%);
  filter: blur(10px);
  opacity: .32; /* base opacity; JS adjusts with tilt */
  transition: transform .12s ease, opacity .12s ease, filter .12s ease;
}
/* Ensure our custom shadow remains even if global 'no shadow' overrides exist */
.phone-shadow{ box-shadow: none !important; filter: blur(10px) !important; }


/* Custom: Replace top section background with uploaded image */
#how{
  background-image: url("../assets/top-portion.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}


/* --- Features Carousel (single-slide) --- */
.features-carousel{ padding:56px 0; position:relative; background-image: noneforest background-size: cover, cover; background-position: center, center; background-attachment: scroll, fixed; background-repeat: no-repeat; }
.features-carousel .container{max-width:800px;margin:0 auto;padding:0 20px;}
.features-carousel .section-title{font-size:28px;font-weight:800;margin:0 0 20px; color:var(--sage-ink);}
.carousel{position:relative;overflow:hidden}
.carousel .nav{position:absolute; top:45%; transform:translateY(-50%); border:none; background:#2d7d6e; padding:10px 14px; border-radius:999px; box-shadow:0 4px 14px rgba(0,0,0,.1); cursor:pointer; z-index:2}
.carousel .nav.prev{ left:8px}
.carousel .nav.next{ right:8px}
.track-wrap{overflow:hidden}
.track{display:flex; gap:20px; scroll-behavior:smooth; touch-action:pan-x pinch-zoom}
.slide{flex:0 0 100%; max-width:100%; background:#2d7d6e; border-radius:24px; box-shadow:0 10px 28px rgba(0,0,0,.06); padding:20px; margin:10px 0}
.phone-wrap{width:100%; display:flex; justify-content:center; align-items:center; border-radius:18px; overflow:hidden; background:#2d7d6e; padding:12px; margin-bottom:14px}
.phone-wrap img{width:100%; height:auto; display:block;}
.feature-copy h3{font-size:22px; margin:0 0 8px; color:var(--sage-deep)}
.feature-copy p{margin:0; color:#26423d; line-height:1.6}
.dots{display:flex; gap:8px; justify-content:center; margin-top:16px}
.dots button{width:8px; height:8px; border-radius:999px; border:none; background:#cfe4e0}
.dots button.active{background:var(--sage-deep)}


/* === Fit phones+blurb in one screen (no scroll on single slide) === */
:root {
  --phone-carousel-scale: 0.92; /* reduce overall size ~22% */
}

/* Generic container adjustment */
.phone-carousel, .phones-carousel, .device-carousel, .carousel, .swiper, .slick-slider, .glide, .splide {
  max-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 32px);
  box-sizing: border-box;
}

/* Scale down phones within common wrappers */
.phone, .phone-img, .device, .mockup, .phone-wrapper, .device-wrapper, .slide .phone, .slide .device, .swiper-slide .phone, .slick-slide .phone {
  transform: scale(var(--phone-carousel-scale));
  transform-origin: center center;
}

/* Ensure images size down responsively */
.phone img, .phone-img img, .device img, .mockup img, .phone-wrapper img, .device-wrapper img, .slide img {
  max-width: min(420px, 36vw);
  height: auto;
}

/* Layout: phone alongside blurb fits within viewport */
.carousel-slide, .slide, .swiper-slide, .slick-slide, .glide__slide, .splide__slide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(12px, 3vw, 32px);
}

/* Blurb text constraints */
.blurb, .description, .copy, .text, .details, .slide-text {
  max-height: 80vh;
  overflow: auto;
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 1.45;
}

/* On small screens, stack vertically but keep both visible */
@media (max-width: 900px) {
  .carousel-slide, .slide, .swiper-slide, .slick-slide, .glide__slide, .splide__slide {
    grid-template-columns: 1fr;
  }
  .phone img, .phone-img img, .device img, .mockup img {
    max-width: min(360px, 80vw);
  }
  .blurb, .description, .copy, .text, .details, .slide-text {
    max-height: unset;
  }
}


/* Additional exact-class targeting based on document scan */
.features-carousel{ padding:56px 0; position:relative; background-image: noneforest background-size: cover, cover; background-position: center, center; background-attachment: scroll, fixed; background-repeat: no-repeat; }

.feature-copy {
  max-height: 80vh;
  overflow: auto;
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 1.45;
}


/* === Floating phones: remove any backgrounds/frames around phone elements === */
.features-carousel, .carousel, .slide, .swiper, .slick-slider, .glide, .splide,
.phone, .phone-wrap, .device, .mockup, .phone-wrapper, .device-wrapper {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

/* Remove inner card backgrounds that might wrap the phones */
.slide .card, .carousel .card, .feature-grid .card, .feature-grid .feature, .hero, .hero-left {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* If any pseudo-elements add frames or glows, reset them */
.features-carousel::before, .features-carousel::after,
.slide::before, .slide::after,
.phone::before, .phone::after,
.phone-wrap::before, .phone-wrap::after {
  content: none !important;
}

/* Keep spacing clean when backgrounds are removed */
.slide, .carousel .slide {
  padding: clamp(8px, 2vw, 24px) !important;
}

/* Maintain readable text over the page background */
.feature-copy, .slide-text, .blurb, .description, .copy, .text, .details {
  background: transparent !important;
}

/* Ensure the section behind the carousel can show the page background */
section.hero, section.features, .features-section {
  background: transparent !important;
}


/* ChatGPT: Lightened hero text for contrast on forest backdrop */
.hero .display, .hero h1, .hero h2, .hero p, .hero .lead{ color: #e5fff8 !important; }
.hero .badge{ background: rgba(229,255,248,0.15) !important; color: #e5fff8 !important; border-color: rgba(229,255,248,0.35) !important; }
.hero .btn--primary{ background: #58a897 !important; color:#073c34 !important; border:0 !important; }
.hero .btn--primary:hover{ background:#2d7d6e !important; color:#eafff7 !important; }
.hero .btn--ghost{ background: rgba(229,255,248,0.18) !important; border-color: rgba(229,255,248,0.4) !important; color:#e5fff8 !important; }
.hero .btn--ghost:hover{ background: rgba(229,255,248,0.3) !important; color:#073c34 !important; }
.marquee__track span{ color: #e5fff8 !important; }

*, p, h1, h2, h3, h4, h5, h6 { color: #e5fff8 !important; }

/* ChatGPT: remove phone modal */
#phoneModal, #phoneModal.open{ display:none !important; }

/* cleanup */
#reviews, .reviews, .viewer, .viewer-controls, .rotate, .zoom { display: none !important; }


/* ===== Forest FAQ background (Bottom Portion) ===== */
section
section

/* ===== First carousel phone tweaks ===== */
img.first-phone {
  transform: none !important;
  animation: none !important;
  -webkit-animation: none !important;
  transition: none !important;
  filter: none !important;
  width: 75% !important; /* 25% smaller */
  height: auto !important;
}
/* also handle if container animates child phones */
.first-phone, .first-phone * {
  animation: none !important;
  transition: none !important;
}

/* === Patch: Keep first phone in layout but invisible (forest shows between header and carousel) === */
#how .phone {
  opacity: 0;           /* hide visually */
  visibility: hidden;   /* but preserve layout flow */
  pointer-events: none; /* avoid capturing clicks while hidden */
}

/* === Patch: Wizard waving animation in forest section === */
#how .two-col__media {
  position: relative;
}
#how .wizard {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(160px, 22vw, 320px);
  pointer-events: none;
}
/* Set transform origin roughly near the wand hand so rotation reads like waving */
#how .wizard.wizard--wave {
  transform-origin: 78% 25%;
  animation: wizard-wave 1.8s ease-in-out infinite;
}
@keyframes wizard-wave {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  20%  { transform: translate(-50%, -50%) rotate(8deg); }
  40%  { transform: translate(-50%, -50%) rotate(-8deg); }
  60%  { transform: translate(-50%, -50%) rotate(6deg); }
  80%  { transform: translate(-50%, -50%) rotate(-6deg); }
  100% { transform: translate(-50%, -50%) rotate(0deg); }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #how .wizard.wizard--wave { animation: none; }
}

/* === Patch Update: Wizard moved up, only hand waves === */
#how .wizard {
  top: 42%; /* moved up slightly */
}

#how .wizard.wizard--wave {
  animation: wizard-hand-wave 2s ease-in-out infinite;
}

/* Create a gentle waving hand illusion using a smaller rotation */
@keyframes wizard-hand-wave {
  0%   { transform: translate(-50%, -42%) rotate(0deg); }
  25%  { transform: translate(-50%, -42%) rotate(3deg); }
  50%  { transform: translate(-50%, -42%) rotate(-3deg); }
  75%  { transform: translate(-50%, -42%) rotate(3deg); }
  100% { transform: translate(-50%, -42%) rotate(0deg); }
}

/* === Patch Update: Wizard positioned higher in forest section === */
#how .wizard {
  top: 20%; /* moved significantly higher while preserving forest background space */
}

#how .wizard.wizard--wave {
  animation: wizard-hand-wave 2s ease-in-out infinite;
}

@keyframes wizard-hand-wave {
  0%   { transform: translate(-50%, -20%) rotate(0deg); }
  25%  { transform: translate(-50%, -20%) rotate(3deg); }
  50%  { transform: translate(-50%, -20%) rotate(-3deg); }
  75%  { transform: translate(-50%, -20%) rotate(3deg); }
  100% { transform: translate(-50%, -20%) rotate(0deg); }
}

/* === Patch: Lower carousel to avoid overlapping title === */
.features-carousel {
  margin-top: 80px; /* adds vertical spacing below heading */
}
@media (max-width: 768px) {
  .features-carousel {
    margin-top: 60px;
  }
}

/* === Patch: Responsive protections to prevent overlap between title and carousel === */

/* Keep the title visually above carousel content and add flexible spacing */
.features-carousel .section-title{
  position: relative;
  z-index: 3;
  margin-bottom: clamp(16px, 3vw, 40px);
  font-size: clamp(28px, 5vw, 64px); /* scale title text */
  line-height: 1.1;
  word-break: normal;
}

/* Ensure carousel content sits underneath title and scales */
.features-carousel .container{ overflow: visible; }

.phone-wrap{ position: relative; z-index: 1; }
.phone-wrap img{
  width: 100%;
  height: auto;
  max-width: min(520px, 72vw);
  display: block;
  margin-inline: auto;
}

/* Flexible spacing above carousel so it moves away from the title as viewports change */
.features-carousel{
  margin-top: clamp(48px, 8vh, 120px);
}

/* Prevent nav arrows / slide contents from covering the title text */
.carousel .nav{ z-index: 2; }
.features-carousel .section-title{ z-index: 3; }
.carousel, .track, .slide{ z-index: 1; }

/* Tweak at desktop/tablet ranges */
@media (max-width: 1200px){
  .phone-wrap img{ max-width: min(480px, 70vw); }
}
@media (max-width: 992px){
  .phone-wrap img{ max-width: min(440px, 78vw); }
  .features-carousel{ margin-top: clamp(40px, 6vh, 80px); }
}
@media (max-width: 768px){
  .phone-wrap img{ max-width: min(400px, 84vw); }
  .features-carousel .section-title{ font-size: clamp(26px, 7vw, 44px); }
  .features-carousel{ margin-top: clamp(32px, 5vh, 64px); }
}

/* Respect reduced motion users; nothing animated here but keep for safety */
@media (prefers-reduced-motion: reduce){
  .carousel *{ animation: none !important; transition: none !important; }
}

/* === Patch: Blurbs to the side on smaller windows + move Insights title further up === */

/* Base: use grid so phone and blurb sit side-by-side cleanly */
.slide{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr; /* phone a bit wider than text */
  gap: clamp(16px, 3vw, 36px);
  align-items: center;
}

/* Ensure the blurb is readable and can shrink gracefully */
.feature-copy{
  min-width: 0;
}
.feature-copy h3{
  font-size: clamp(22px, 2.8vw, 36px);
  line-height: 1.15;
}
.feature-copy p{
  font-size: clamp(14px, 1.8vw, 18px);
  line-height: 1.5;
}

/* When the window gets smaller (<= 1100px), keep side-by-side but tighten spacing */
@media (max-width: 1100px){
  .slide{
    grid-template-columns: 1fr 1fr;
    gap: clamp(12px, 2.5vw, 24px);
  }
}

/* Stack only on very small screens, with blurb to the side otherwise */
@media (max-width: 700px){
  .slide{
    grid-template-columns: 1fr;
  }
  .feature-copy{
    text-align: left;
    margin-top: 8px;
  }
}

/* Move the Insights title further up and add larger spacing below it so it never overlaps the phone */
.features-carousel .section-title{
  margin-top: 0;
  margin-bottom: clamp(56px, 10vh, 160px); /* much larger gap under title */
}

/* Add safety top spacing for the entire carousel section so elements below never crash into title */
.features-carousel{
  margin-top: clamp(48px, 8vh, 120px);
}

/* === Patch: Enlarge carousel and blurbs by 25% === */
.features-carousel {
  transform: scale(1.25);
  transform-origin: top center;
}
.features-carousel .section-title { display: none; } /* hide title if still present */

/* === Patch: Responsive grid (no overlap) + 25% larger elements, without using transform scale === */

/* Ensure no legacy transform scaling applies */
.features-carousel { 
  transform: none !important; 
  transform-origin: initial !important;
}

/* Responsive grid layout: phone + blurb */
.slide{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(18px, 3.5vw, 40px);
  align-items: center;
}

/* Bigger phone image with responsive clamps */
.phone-wrap img{
  width: 100%;
  height: auto;
  max-width: min(650px, 85vw); /* ~25% larger than previous 520px/72vw */
  display: block;
  margin-inline: auto;
}

/* Larger, clamped text sizes for blurbs */
.feature-copy h3{
  font-size: clamp(28px, 3.5vw, 45px); /* previously ~22->36 */
  line-height: 1.15;
  margin: 0 0 8px;
}
.feature-copy p{
  font-size: clamp(16px, 2.1vw, 22px); /* previously 14->18 */
  line-height: 1.5;
  margin: 0;
}

/* Title is intentionally removed/hidden */
.features-carousel .section-title{ display: none !important; }

/* Safe spacing for the carousel section */
.features-carousel{
  margin-top: clamp(40px, 8vh, 120px);
}

/* Medium screens tighten columns but keep side-by-side */
@media (max-width: 1100px){
  .slide{
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(14px, 3vw, 28px);
  }
  .phone-wrap img{ max-width: min(600px, 88vw); }
}

/* Stack on small screens to prevent overlap */
@media (max-width: 700px){
  .slide{
    grid-template-columns: 1fr;
  }
  .feature-copy{ margin-top: 10px; }
  .phone-wrap img{ max-width: min(520px, 94vw); }
}

/* Ensure nav arrows never cover text */
.carousel .nav{ z-index: 2; }
.feature-copy, .phone-wrap{ z-index: 1; position: relative; }

/* === Patch: Remove carousel dots === */
.carousel .dots,
.carousel .indicators,
.carousel .pagination,
.carousel-dots,
.splide__pagination,
.slick-dots {
  display: none !important;
  visibility: hidden !important;
}

/* === Patch: Wizard thought/speech bubble with toggle === */
#how .bubble{
  position: absolute;
  left: 58%;
  top: 16%;
  transform: translate(-50%, -50%);
  max-width: min(540px, 60vw);
  background: #f5fff9;
  color: #0b4239;
  border-radius: 18px;
  padding: clamp(10px, 1.8vw, 18px) clamp(14px, 2.2vw, 24px);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  pointer-events: auto;
  cursor: pointer;
  z-index: 4;
}
#how .bubble .bubble-title{
  display:block;
  font-weight: 800;
  font-size: clamp(22px, 3vw, 40px);
  line-height:1.1;
  margin: 0 0 6px;
}
#how .bubble .bubble-sub{
  font-size: clamp(14px, 1.8vw, 20px);
  line-height:1.45;
}
/* Thought dots leading from the wizard */
#how .bubble .dots{
  position:absolute;
  left: -42px;
  top: 50%;
  transform: translateY(-50%);
  display:flex;
  gap:6px;
}
#how .bubble .dots span{
  width: 10px; height: 10px; border-radius:50%;
  background:#f5fff9;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  opacity: 0; transform: scale(.5);
  animation: dot-pop 1s ease-in-out forwards;
}
#how .bubble .dots span:nth-child(1){ animation-delay:.25s; }
#how .bubble .dots span:nth-child(2){ animation-delay:.45s; }
#how .bubble .dots span:nth-child(3){ animation-delay:.65s; }

@keyframes dot-pop{
  to{ opacity:1; transform: scale(1); }
}
/* Bubble entrance */
#how .bubble.pop-in{ animation: bubble-in .6s ease-out both .35s; }
@keyframes bubble-in{
  0%{ transform: translate(-50%, -50%) scale(.88); opacity:0; }
  100%{ transform: translate(-50%, -50%) scale(1); opacity:1; }
}

/* Alternative (click) state: show the 'So who is this guy?' copy in a different bubble style */
#how .bubble.alt{
  background: #ffffff;
}

/* Responsiveness */
@media (max-width: 900px){
  #how .bubble{ left: 58%; top: 22%; max-width: 82vw; }
}
@media (max-width: 640px){
  #how .bubble{ left: 50%; top: 28%; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #how .bubble.pop-in{ animation: none; }
  #how .bubble .dots span{ animation: none; opacity:1; transform:none; }
}

/* === Patch: Match bubble text color to carousel blurbs & reposition to right === */
#how .bubble {
  left: 72%; /* moved further right */
  top: 16%;
  color: var(--sage-ink, #1b463d); /* same tone as carousel blurbs */
}
#how .bubble .bubble-title,
#how .bubble .bubble-sub {
  color: inherit; /* ensure consistency */
}
@media (max-width: 900px){
  #how .bubble { left: 68%; top: 22%; }
}
@media (max-width: 640px){
  #how .bubble { left: 60%; top: 26%; }
}

/* === Patch: Move bubble over tree, double its size, and darken text === */
#how .bubble {
  left: 86%; /* moved farther right over the tree */
  top: 14%;
  transform: translate(-50%, -50%) scale(2.0); /* double the size */
  transform-origin: center center;
  color: #0a2e23; /* deep forest green */
}

#how .bubble .bubble-title,
#how .bubble .bubble-sub {
  color: #0a2e23; /* ensure all text adopts forest green */
}

@media (max-width: 900px) {
  #how .bubble {
    left: 78%;
    top: 18%;
    transform: translate(-50%, -50%) scale(1.6);
  }
}

@media (max-width: 640px) {
  #how .bubble {
    left: 70%;
    top: 22%;
    transform: translate(-50%, -50%) scale(1.3);
  }
}

/* === Patch: Make second bubble wider and all text black === */
#how .bubble,
#how .bubble .bubble-title,
#how .bubble .bubble-sub {
  color: #000000 !important;
}

/* Make the alt bubble (second text) wider horizontally */
#how .bubble.alt {
  max-width: min(900px, 85vw); /* much wider */
}

/* === Patch: Make both text bubbles 150% wider for horizontal display === */
#how .bubble {
  max-width: min(1200px, 95vw); /* 150% wider */
}

#how .bubble.alt {
  max-width: min(1200px, 95vw); /* ensure alternate bubble matches */
}

/* === Patch: Center-aligned paragraph inside bubble; keep text contained === */
#how .bubble .bubble-inner{
  max-width: min(900px, 88%);
  margin: 0 auto;
  text-align: center;
}
#how .bubble .bubble-sub{
  white-space: normal;   /* allow natural wrapping */
  text-wrap: pretty;     /* nicer line breaks where supported */
  line-height: 1.4;
  margin: 0 auto;
}

/* === Patch: Move dots and bubble further right so wizard isn't covered === */
#how .bubble {
  left: 90%; /* moved farther right */
}

#how .bubble .dots {
  left: -36px; /* move connector dots slightly right as well */
}

/* === Patch: Move dots and bubble even further right === */
#how .bubble {
  left: 96%; /* moved farther right */
}

#how .bubble .dots {
  left: -24px; /* adjust dots closer to the bubble */
}

/* === Patch: Move thought bubble right, make 50% wider & slightly taller, black text === */
#how .bubble {
  left: 100%; /* moved more to the right */
  max-width: min(1800px, 140%); /* 50% wider */
  transform: translate(-50%, -50%) scale(2.0);
  padding: clamp(20px, 3vw, 40px) clamp(28px, 4vw, 48px); /* expand height proportionally */
  color: #000000 !important; /* all text black */
}

#how .bubble .bubble-title,
#how .bubble .bubble-sub {
  color: #000000 !important;
}

#how .bubble .bubble-inner {
  max-width: 95%;
  margin: 0 auto;
  text-align: center;
}

@media (max-width: 900px) {
  #how .bubble {
    left: 85%;
    transform: translate(-50%, -50%) scale(1.6);
  }
}

@media (max-width: 640px) {
  #how .bubble {
    left: 72%;
    transform: translate(-50%, -50%) scale(1.3);
  }
}

/* === Patch: Make thought bubbles 50% less tall, 50% wider, and all text black === */
#how .bubble {
  max-width: min(2100px, 160%); /* 50% wider */
  transform: translate(-50%, -50%) scale(2.0);
  padding: clamp(10px, 1.5vw, 20px) clamp(40px, 5vw, 60px); /* reduce height but increase horizontal padding */
  color: #000000 !important;
}

#how .bubble .bubble-title,
#how .bubble .bubble-sub,
#how .bubble h1,
#how .bubble h3 {
  color: #000000 !important;
}

#how .bubble .bubble-inner {
  max-width: 90%;
  margin: 0 auto;
  text-align: center;
}

/* === Patch: Move bubble slightly right to clear wizard's star === */
#how .bubble {
  left: 105%; /* nudged right enough to clear the star */
}

@media (max-width: 900px) {
  #how .bubble { left: 92%; }
}

@media (max-width: 640px) {
  #how .bubble { left: 80%; }
}

/* === Patch: Reduce vertical padding to tighten bubble height (keep rounded corners) === */
#how .bubble {
  padding: clamp(4px, 0.8vw, 10px) clamp(40px, 5vw, 60px); /* much less vertical padding */
  border-radius: 18px; /* preserve rounded corners */
}

/* === Patch: Make thought bubble even snugger vertically around text === */
#how .bubble {
  padding: clamp(2px, 0.5vw, 6px) clamp(40px, 5vw, 60px); /* nearly flush vertical space */
  border-radius: 18px; /* keep rounded corners */
}

/* Ensure media container is positioning context for wizard bubble */
#how .two-col__media{ position: relative; }

/* === Patch: Tree anchor—position for the 3rd tree to the right (responsive) === */
#how .two-col__media{ position: relative; }
#tree-anchor{
  position: absolute;
  left: 76%;   /* desktop default */
  top: 22%;
  width: 2px; height: 2px;
  pointer-events: none;
}

/* Tune anchor for various widths/aspect ratios */
@media (max-width: 1200px){
  #tree-anchor{ left: 78%; top: 23%; }
}
@media (max-width: 900px){
  #tree-anchor{ left: 74%; top: 24%; }
}
@media (max-width: 700px){
  #tree-anchor{ left: 70%; top: 26%; }
}
@media (max-width: 520px){
  #tree-anchor{ left: 66%; top: 28%; }
}

/* === Patch: Pin thought bubble to the far right within the forest section === */
#how .bubble.position-right{
  position: absolute;
  right: clamp(12px, 3vw, 28px); /* fixed to the inner right edge */
  left: auto;                    /* ignore any left positioning */
  transform: translate(0, -50%) scale(2.0);
  transform-origin: right center;
}

/* === Patch: Center bubble horizontally within forest section === */
#how .bubble.position-center{
  position: absolute;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%) scale(2.0);
  transform-origin: center center;
}

/* === Patch: Anchor bubble to the right of the wizard's star (no touching) === */
#how .two-col__media { position: relative; }

/* Neutralize prior horizontal pin classes; JS will set explicit left */
#how .bubble.position-right,
#how .bubble.position-center {
  left: auto !important;
  right: auto !important;
  transform: translate(0, -50%) scale(2.0) !important;
  transform-origin: left center !important;
}


/* === Patch (2025-11-10): Move wizard thought & text bubbles very close to the right of the wizard's star (small gap) === */
@media (min-width: 901px){
  /* Target the primary and alternate bubbles in the wizard section */
  #how #wizard-bubble,
  #how .bubble.alt {
    left: 84% !important;   /* push bubble further right to sit just off the star */
    top: 15% !important;    /* slight vertical nudge to align with star height */
  }
}

/* Tighter but still safe on medium screens */
@media (max-width: 900px) and (min-width: 641px){
  #how #wizard-bubble,
  #how .bubble.alt {
    left: 78% !important;
    top: 18% !important;
  }
}

/* Phone: keep readable and prevent clipping */
@media (max-width: 640px){
  #how #wizard-bubble,
  #how .bubble.alt {
    left: 68% !important;
    top: 22% !important;
  }
}

/* Ensure bubble width/scale don't cause overlap; keep it tight */
#how #wizard-bubble .bubble-inner,
#how .bubble.alt .bubble-inner {
  max-width: 92%;
  margin: 0 auto;
}



/* === Patch (2025-11-10b): Move wizard bubbles further right to fully clear the star === */
@media (min-width: 901px){
  #how #wizard-bubble,
  #how .bubble.alt {
    left: 90% !important;   /* pushed further right */
    top: 15% !important;
  }
}
@media (max-width: 900px) and (min-width: 641px){
  #how #wizard-bubble,
  #how .bubble.alt {
    left: 84% !important;
    top: 18% !important;
  }
}
@media (max-width: 640px){
  #how #wizard-bubble,
  #how .bubble.alt {
    left: 74% !important;
    top: 22% !important;
  }
}



/* === Patch (2025-11-10c): Move wizard bubbles even more to the right for extra clearance === */
@media (min-width: 901px){
  #how #wizard-bubble,
  #how .bubble.alt {
    left: 95% !important;   /* moved significantly farther right */
    top: 15% !important;
  }
}
@media (max-width: 900px) and (min-width: 641px){
  #how #wizard-bubble,
  #how .bubble.alt {
    left: 89% !important;
    top: 18% !important;
  }
}
@media (max-width: 640px){
  #how #wizard-bubble,
  #how .bubble.alt {
    left: 80% !important;
    top: 22% !important;
  }
}



/* === Patch (2025-11-10d): Move wizard bubbles near far-right edge for maximum clearance === */
@media (min-width: 901px){
  #how #wizard-bubble,
  #how .bubble.alt {
    left: 98% !important;   /* almost at far right edge */
    top: 15% !important;
  }
}
@media (max-width: 900px) and (min-width: 641px){
  #how #wizard-bubble,
  #how .bubble.alt {
    left: 93% !important;
    top: 18% !important;
  }
}
@media (max-width: 640px){
  #how #wizard-bubble,
  #how .bubble.alt {
    left: 84% !important;
    top: 22% !important;
  }
}








/* Extra mobile responsiveness hardening */
@media (max-width: 600px){
  .container,
  main,
  .hero-inner,
  .wizard-layout,
  .features-carousel .container{
    padding-left:16px;
    padding-right:16px;
  }

  .features-carousel .carousel{
    grid-template-columns:1fr;
  }

  .phone-wrap img{
    max-width:260px;
    margin-left:auto;
    margin-right:auto;
  }

  .feature-copy{
    text-align:left;
  }

  #how-it-works img,
  .meet-sage-video img{
    width:100%;
    height:auto;
  }
}

.coming-soon { text-align:center; padding:40px 0; font-size:32px; font-weight:600; color:#2F4A41; }

/* Center Early Access section */
.cta-signup .cta-inner { text-align: center; }

/* Enlarge Join the Sage community text */
.cta-signup .cta-inner p { font-size: 1.4em; }

/* Remove image backgrounds and apply solid color */
.meet-sage-video {
  background-image: none !important;
  background-color: #427a72 !important;
}

.cta-signup {
  background-image: none !important;
  background-color: #427a72 !important;
}

/* Forest background spanning video through early access */
.meet-sage-video,
.cta-signup {
  background-image: url('../assets/sage website Background 4+5.png') !important;
  background-size: cover !important;
  background-position: top center !important;
  background-repeat: no-repeat !important;
}

/* Corrected forest background image path */
.meet-sage-video,
.cta-signup {
  background-image: url('../assets/forest-bg-4-5.png') !important;
  background-size: cover !important;
  background-position: top center !important;
  background-repeat: no-repeat !important;
}

footer { background: #f2f2e8 !important; }

#cta { scroll-margin-top: 200px; }


/* Mobile full-width images */

@media (max-width: 768px){
  img, section img, .features-carousel img, .meet-sage-video img, .cta-signup img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }
  .phone-wrap img {
    width: 100% !important;
    height: auto !important;
  }
  section, .container, .combined-bg {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
}




/* === Full-bleed art panels (hero, forest strip, CTA) === */

/* Remove default body margins and hide stray horizontal scroll */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* Generic helper: sections that should bleed edge‑to‑edge */
#how-it-works,
section#insights,
section#cta.early-access-image {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw); /* center 100vw block inside centered layout */
  margin-right: calc(50% - 50vw);
}

/* Hero image as full‑bleed background */
#how-it-works {
  padding: 0;
  background: url('../assets/howitworks_full.jpg') center top / cover no-repeat;
}
#how-it-works img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;             /* keep image for accessibility/layout but visually replace with background */
  pointer-events: none;
}

/* Forest strip behind features carousel */
section#insights,
section#insights.features-carousel,
section.features-carousel#insights {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}

/* CTA early access artwork full‑bleed */
section#cta.early-access-image {
  background: url('../assets/early_access.png') center top / cover no-repeat;
}
section#cta.early-access-image img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  pointer-events: none;
}

/* Mobile: keep the same full‑bleed behavior but allow inner content padding */
@media (max-width: 768px) {
  #how-it-works,
  section#insights,
  section#cta.early-access-image {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}