/* ─── global colour tokens (copied from therapistss.css) ─── */
:root{
  --blue:#1e40ff;
  --purple:#7c3aed;
  --black:#0f172a;
  --white:#f8fafc;
  --bubble-radius:18px;   /* still handy for rounded cards */
  --nav-h: 56px;
  --hero-x-desktop: 42%;  /* move subject LEFT by using a value < 50%  */
  --hero-x-mobile: 58%;   /* keep centered on phones */
  color-scheme: dark;  /* hint to the browser to render UI dark */
}

/* ─── base page colours & typography ─── */
html,body{
  margin:0;
  color:var(--white);
  font:16px/1.45 "Inter",system-ui,sans-serif;
  background:#131b2b; /* flat grey-blue used behind your auth cards */
}

/* ── Nav dropdowns (desktop + mobile) ─────────────────────────── */
.nav-menu li.has-submenu{ position: relative; }
.nav-menu .nav-drop{
  display:inline-flex; align-items:center; gap:.35rem;
  background:none; border:0; color:#fff; cursor:pointer;
  font: inherit; padding:.25rem 0;
}
.nav-menu .nav-drop .chev{ display:inline-block; transition:transform .18s; }
.nav-menu li.has-submenu.open .nav-drop .chev{ transform:rotate(90deg); }

.nav-menu .submenu{
  display:none; position:absolute; top: calc(100% + .5rem); left:0;
  min-width: 240px; list-style:none; margin:0; padding:.5rem;
  background: rgba(15,23,42,.96); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.nav-menu li.has-submenu.open > .submenu{ display:block; }
.nav-menu .submenu li a{
  display:block; padding:.55rem .75rem; color:#fff; text-decoration:none;
  border-radius:8px; transition: background .15s;
  overflow-wrap:anywhere;              /* ✅ wrap long words/phrases safely */
  white-space:normal;
}
.nav-menu .submenu li a:hover{ background:rgba(255,255,255,.08); }

/* mobile overlay: make submenu inline/indented */
@media (max-width:1150px){
  .nav-menu li.has-submenu{ width:100%; }
  .nav-menu .submenu{
    position: static;
    display: none;
    box-sizing: border-box;
    width: 100%;
    min-width: 0; /* <-- stops any horizontal growth */

    background: transparent;
    border: 0;
    box-shadow: none;
    padding: .25rem 0 .25rem 1rem;
  }
  .nav-menu li.has-submenu.open > .submenu{ display:block; }
}

/* Auth pages: force white checkboxes (Login + Subscribe) */
.login-page input[type="checkbox"]{
  accent-color: #fff;   /* white box, system tick */
}




/* badge tuned for dark surface */
#hero.hero-dark .hero-badge{
  color: var(--white);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
}
.hero-inner{
  position: relative;
  z-index: 1;
  width: min(100%, 720px);   /* hard cap */
  margin: 0 auto;            /* center the gate */
  padding: 0 1.5rem;         /* default side padding */
  animation: fadeUp .9s .2s both;
}


.hero-cta{ display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; margin: .4rem 0 1rem; }




.hero-inner{
  position:relative;
  z-index:1;
  padding:0 1.5rem;
  max-width:720px;
  animation:fadeUp .9s .2s both;
}

#hero h1{
  font-size:clamp(2.5rem,5vw,4rem);
  line-height:1.15;
  margin:.1rem 0 .6rem;
}

/* — page-specific hero for auth pages — */
#hero.compact{
  min-height:30vh;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:3rem;
}

.hero-inner{
  position:relative;
  z-index:1;
  padding:0 1.5rem;
}

.btn-primary{
  display:inline-block;padding:1rem 2.2rem;font-weight:600;border-radius:9999px;
  background:var(--white);color:var(--black);text-decoration:none;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  transition:transform .2s,box-shadow .2s,filter .2s;
}
.btn-primary:hover{transform:translateY(-4px);box-shadow:0 8px 16px rgba(0,0,0,.35);}
.btn-primary:active{transform:none;box-shadow:0 2px 6px rgba(0,0,0,.4);}


#hero .hero-ctaWrap{
  width: 100%;
  box-sizing: border-box;
  display: grid;
  justify-items: center;     /* center the row inside the wrapper */
}

/* Phones + narrow screens: stack CTA and add real side padding */
@media (max-width: 540px){

  /* row padding is symmetric and safe-area aware */
  #hero .hero-cta{
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    width: 100%;
    box-sizing: border-box;
    padding-left:  max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  /* stronger selector so overrides always win */
  #hero .hero-cta .btn-primary,
  #hero .hero-cta .btn-secondary{
    display: block;
    width: 100%;
    max-width: 260px;      /* fits comfortably with the new padding */
    margin: 0 auto;
    padding: .6rem .1rem;
    
    font-size: .9rem;
  }

  /* keep the heading comfortable on very small widths */
  #hero h1{
    font-size: clamp(1.8rem, 7vw, 2.4rem);
  }
}

/* brief glow when a fresh recap is added */
#notesList li.flash{
  background:linear-gradient(90deg,#fde047,#facc15);   /* soft yellow */
  color:#000;
  transition:background .6s ease;
}



/* ── SITE HEADER ───────────────────────────────── */
:root { --nav-h: 72px; } /* taller bar */

.site-nav{
  position: absolute; top:0; left:0; right:0;   /* moves with the hero */
  z-index: 10005;
  background: transparent;
  backdrop-filter: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 1rem;
  padding: .85rem 1.5rem;
}
/* becomes fixed AFTER the hero */
.site-nav.is-sticky{
  position: fixed; top:0; left:0; right:0;
  background: rgba(9,12,26,.55);
  backdrop-filter: blur(8px);
}

/* Hamburger button (hidden on desktop) */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: none;
  border: none;
  cursor: pointer;
  margin-right: 1rem;
  z-index: 1001;
}
.hamburger span {
  display: block;
  height: 3px;
  width: 26px;
  background: var(--white);
  margin: 5px 0;
  border-radius: 2px;
  transition: all 0.3s;
  transform-origin: center;
  transition: transform 0.3s ease, opacity 0.3s 
}

/* Hamburger open state (optional animation) */
.hamburger.active span:nth-child(1) {
  transform: translateY(12px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: translateY(-12px) rotate(-45deg);
}

.site-nav a.logo{
  grid-column: 1;
  justify-self: start;
  color: var(--white);
  text-decoration: none;
  font-family: "Nunito","Quicksand","Segoe UI Rounded",ui-rounded,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-weight: 900;                         /* thicker */
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);  /* smaller than before */
  letter-spacing: .002em;
  text-rendering: optimizeLegibility;
}

.nav-menu{
  grid-column: 2;
  justify-self: center;
  list-style: none;
  display: flex; align-items: center;
  gap: 3rem;
  margin: 0; padding: 0;
}
.site-nav a.nav-link{
  color: var(--white);
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 600;
  padding: .25rem 0;                 /* no pill; just text */
  transition: opacity .15s ease;
}
.site-nav a.nav-link:hover{ opacity: .85; }

/* CTA lives inside the centered .nav-menu now */
.nav-cta{
  display:inline-block;
  padding:.55rem 1rem;
  border-radius:10px;                     /* a bit squarer */
  background:#fff;
  color:#000;
  text-decoration:none;
  font-weight:700;                        /* less “bubbly” */
  font-family:"Inter",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:.01em;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  transition:transform .15s, box-shadow .15s;
}
.nav-cta:hover{ transform:translateY(-2px); box-shadow:0 8px 16px rgba(0,0,0,.3); }
/* Desktop: hide Subscribe link in the header row */
.nav-menu .subscribe-link{ display:none; }
/* Mobile styles */
@media (max-width: 1150px) {
  /* Show hamburger on mobile */
  .hamburger{
    display: flex;
    grid-column: 3;            /* rightmost header column */
    justify-self: end;         /* hug the right side */
    margin: 0 max(8px, env(safe-area-inset-right)) 0 0; /* a bit closer to the edge, still safe */
    padding: 0;
  }
  /* Make CTA look good in the mobile overlay */
  .nav-menu .nav-cta{
    display:block;
    width:100%;
    margin-top:.75rem;
    padding:.9rem 1rem;
    border-radius:14px;
    background:#fff;
    color:#000 !important;
    text-align:center;
    box-shadow:0 6px 14px rgba(0,0,0,.3);
  }
  /* Full-screen overlay menu on mobile — span entire grid + viewport */
  .nav-menu{
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0; /* beat any grid constraints */
    height: 100svh;
    width: 100dvw;              /* dynamic viewport, avoids iOS gaps */
    max-width: 100dvw;
    box-sizing: border-box;

    /* escape the center column of the header grid */
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;

    background: rgba(15,23,42,.96);
    backdrop-filter: blur(8px);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2rem;
    padding: calc(var(--nav-h,72px) + 1rem)
            clamp(1rem, 4vw, 1.5rem)
            2rem;
    z-index: 998;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease;

    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .nav-menu.active{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  

  .nav-menu li {
    width: 100%;
    margin: 0.5rem 0;
  }

  /* make dropdown trigger look identical to other items in the mobile panel */
  .nav-menu .nav-link,
  .nav-menu .nav-btn,
  .nav-menu .nav-drop{
    background: none !important;
    border: none !important;
    padding: 1rem 0 !important;
    width: 100%;
    text-align: left;
    font-size: 1.3rem !important;
    color: #fff !important;
    opacity: 1;
    box-shadow: none;
  }
  .nav-menu .nav-link:hover,
  .nav-menu .nav-btn:hover,
  .nav-menu .nav-drop:hover{
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
  }
  /* Mobile overlay: show Subscribe, hide Free-trial CTA */
  .nav-menu .subscribe-link{ display:block; }
  .nav-cta{ display:none !important; }
}

body { scroll-padding-top: var(--nav-h); }


/* ── TOS checkbox layout ───────────────────── */
.tos-group{
  margin: 0.9rem 0 1.2rem;
}
.tos-label{
  font-size: 1rem;                 /* darker, larger text */
  color: #111;                     /* solid black */
  user-select: none;
}
.tos-group input[type=checkbox]{
  transform: scale(1.25);
  accent-color:#fff;          /* white so it isn’t mistaken for “off” on dark UI */
  margin-right: 0.5rem;
}

.login-page main > div{
  color-scheme: light;          /* fixes black-looking unchecked boxes */
}

/* Keep our desired white accent when they ARE checked */
.login-page main > div input[type="checkbox"],
.login-page .tos-group input[type="checkbox"]{
  accent-color: #fff;
}

.tos-link{
  color:#2563eb;                   /* bright link blue */
  text-decoration:underline;
}
/* force dark text for the TOS sentence */
.tos-group label{
  color:#111 !important;      /* solid near‑black overrides form default */
}

/* (optional) keep link blue but darker for contrast */
.tos-group .tos-link{
  color:#2563eb;
}

#subscription-form input[type="email"],
#subscription-form input[type="text"],
#subscription-form input[type="password"]{
  width: 100%;          /* stretch to the cell */
  box-sizing: border-box;/* include padding + border in that width */
}

/* baseline style for nav buttons used on auth pages */
/* baseline style for nav buttons (links & dropdown triggers) */
.site-nav a.nav-btn,
.nav-menu .nav-drop{
  color: var(--white);
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 600;
  padding: .25rem 0;
  transition: opacity .15s ease;
  background: none; border: 0;    /* keep <button> looking like a link */
  display: inline-flex; align-items: center; gap: .35rem;
}
.site-nav a.nav-btn:hover,
.nav-menu .nav-drop:hover{ opacity: .85; }

/* ── Auth / non-home pages header skin ───────────────── */
.login-page .site-nav{
  position: fixed; top:0; left:0; right:0;
  background: rgba(15,23,42,.80);         /* translucent black */
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* white text for links on those pages */
.login-page .site-nav a.logo,
.login-page .site-nav a.nav-link,
.login-page .site-nav a.nav-btn{
  color: #fff;
}

/* Allow vertical scroll on auth pages; prevent sideways/off-screen */
.login-page, .login-page body{ overflow-x: hidden; }

@media (max-width: 600px){
  /* keep content clear of the fixed translucent header */
  .login-page main{
    min-height: calc(100vh - var(--nav-h,72px));
    overflow: visible !important;   /* page scrolls, not the inner panel */
  }
}
/* demo strip */
#demoPanel{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:2rem;
  padding:4rem 1.7rem;
  background:#131b2b;              /* matches the card strip */
}

#demoPanel img{flex:1 1 320px;border-radius:22px;max-width:480px;width:100%;box-shadow:0 4px 12px rgba(0,0,0,.5);}
#demoPanel div{flex:1 1 260px;min-width:260px;}
#demoPanel h2{margin:.2rem 0 .6rem;font-size:1.6rem;}


/* ─── Auth page info block ───────────────────────────── */
.plan-details{
  width:clamp(240px, 95%, 480px);       /* fluid 240-480 px */
  margin:.4rem auto -1rem;
  padding:.65rem 1.25rem;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  color:var(--white);
  font-size:clamp(.8rem, 2.5vw, .95rem);
}
.plan-details h3{margin:.1rem 0 .6rem;font-size:1.1rem;}
.plan-details ul{margin:0 0 .8rem 1.1rem;padding:0;line-height:1.45;}
.plan-details li{margin-bottom:.35rem;}
.plan-details .trust-copy{opacity:.85;line-height:1.4;}



/* footer */
#siteFooter {
  background: transparent;
  padding: 2rem;
  text-align: center;
  margin-top: 4rem;
  border-top: 1px solid rgba(255,255,255,.08); /* optional subtle divider */
}

#siteFooter small {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}


/* ── New homepage body ─────────────────────────────────── */
.wrap{ max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }






/* ── New image-driven sections ───────────────────────── */

/* generic secondary button (outside old hero) */
.btn-secondary{
  display:inline-block;
  padding:1rem 2rem;
  border-radius:9999px;
  border:1px solid rgba(255,255,255,.28);
  color:var(--white);
  text-decoration:none;
  transition: border-color .15s, background .15s, transform .15s;
}
.btn-secondary:hover{
  border-color: var(--purple);
  background: rgba(255,255,255,.06);
  transform: translateY(-2px);
}

/* ── Common-Struggles page skin ───────────────────────── */
.cs-hero{
  padding: calc(var(--nav-h,72px) + 2.2rem) 1.25rem 2.2rem;
  text-align: center;
  /* soft color wash using your tokens */
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(30,64,255,.18), transparent 60%),
    radial-gradient(900px 420px at 88% 8%, rgba(124,58,237,.18), transparent 60%),
    #131b2b;
}
.cs-hero h1{ margin:.25rem 0 .5rem; font-size:clamp(2.1rem,4.5vw,3rem); letter-spacing:.01em; }
.cs-hero p{ opacity:.88; max-width:760px; margin:.15rem auto 0; line-height:1.6; }

.cs-main{ background:#131b2b; }

/* two-column content that collapses on mobile */
.cs-grid{
  max-width:1100px; margin:0 auto; padding:1.6rem 1.25rem 3rem;
  display:grid; grid-template-columns: 1.1fr .9fr; gap:2rem;
}
@media (max-width: 960px){
  .cs-grid{ grid-template-columns: 1fr; gap:1.25rem; }
}

/* cards + pills with a touch of color */
.cs-card{
  background:#0f172a;
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  padding:1.25rem 1.25rem 1rem;
}
.cs-pills{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem;
}
@media (max-width: 540px){ .cs-pills{ grid-template-columns:1fr; } }

.cs-pill{
  background:linear-gradient(135deg, rgba(30,64,255,.10), rgba(124,58,237,.10));
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:1rem;
}
.cs-pill strong{ display:block; }

/* outro stripe */
.cs-outro{
  max-width:1000px; margin:0 auto 2rem; padding:0 1.25rem;
}
.cs-outro .cs-note{
  background:linear-gradient(135deg, rgba(30,64,255,.10), rgba(124,58,237,.08));
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  padding:1.25rem 1.4rem;
}



/* ── Emma promo module (common-struggles pages) ───────────────── */
.emma-spotlight{
  max-width: 1100px;
  margin: 1.25rem auto 2.5rem;
  padding: 0 1.25rem;
}

.emma-surface{
  position: relative;
  text-align: center;
  padding: clamp(2rem, 4.5vw, 4rem);
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(1200px 520px at 10% -10%, rgba(124,58,237,.22), transparent 60%),
    radial-gradient(1000px 520px at 90% 110%, rgba(30,64,255,.18), transparent 65%),
    #1a1330; /* deep purple to differentiate from cs-outro */
  box-shadow: 0 16px 32px rgba(0,0,0,.35);
  overflow: hidden;
}

.emma-badge{
  display: inline-block;
  font-size: .9rem;
  letter-spacing: .01em;
  padding: .45rem .75rem;
  border-radius: 9999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  color: var(--white);
}

.emma-surface h2{
  margin: .9rem 0 .5rem;
  font-size: clamp(1.8rem, 4.6vw, 3rem);
  letter-spacing: .01em;
}

.emma-copy{
  max-width: 760px;
  margin: .25rem auto 1.25rem;
  line-height: 1.65;
  opacity: .9;
}

/* gold pill CTA (separate from .btn-primary so we don't alter existing buttons) */
.emma-cta{
  display: inline-block;
  padding: .9rem 1.4rem;
  border-radius: 9999px;
  font-weight: 700;
  text-decoration: none;
  color: #2b203f;                          /* dark text over gold */
  background: linear-gradient(180deg,#f1e2b6,#e8d79c);
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.emma-cta:hover{ transform: translateY(-2px); filter: brightness(1.02); }
.emma-cta:active{ transform: none; box-shadow: 0 4px 10px rgba(0,0,0,.35); }

/* phones: keep spacing comfortable */
@media (max-width: 540px){
  .emma-surface{ padding: 2rem 1.25rem; }
}

@media (max-width: 1150px){
  /* Prevent any sideways nudge when submenus open */
  .nav-menu { overflow-x: hidden; }
  .nav-menu .submenu {
    width: 100%;
    max-width: 100%;   /* belts & suspenders with width:100% */
    min-width: 0;        /* already present above — keep it */
    overflow-x: hidden;  /* guard against long words */
  }
}


/* Remove link underlines inside the mobile overlay */
.nav-menu a,
.nav-menu .nav-btn,
.nav-menu .nav-link {
  text-decoration: none !important;
}

/* Guard against UA states adding it back */
.nav-menu a:link,
.nav-menu a:visited,
.nav-menu a:hover,
.nav-menu a:active,
.nav-menu a:focus {
  text-decoration: none !important;
}



/* ── Therapy article pages ───────────────────────────── */
.therapy-page .site-nav{
  position: fixed; top:0; left:0; right:0;
  background: rgba(15,23,42,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  z-index: 999;
}

.therapy-page body,
.therapy-page{ overflow-x: hidden; }

/* Continuous page gradient (starts beneath the fixed header) */
/* Continuous page gradient with a solid cap under the fixed header */
.therapy-page body{
  /* 1) keep a safe top cap but fade the last 16px so the gradient can "climb" up */
  /* 2) add subtle top color blooms (blue/purple) anchored slightly above the header line */
  /* 3) raise the midtone stop so color appears earlier */
  background:
    linear-gradient(
      180deg,
      #0e1324 0 calc(var(--nav-h) - 16px),
      rgba(14,19,36,.85) calc(var(--nav-h) - 16px),
      rgba(14,19,36,0) var(--nav-h)
    ),
    radial-gradient(1000px 520px at 12% -80px, rgba(30,64,255,.18), transparent 60%),
    radial-gradient(1000px 520px at 88% -40px, rgba(124,58,237,.18), transparent 62%),
    linear-gradient(180deg, #0e1324 0%, #0b1220 35%, #120f22 100%);
  min-height: 100dvh;
}

.therapy-main{
  padding-top: calc(var(--nav-h,72px) + 24px);
  min-height: 100vh;
}
/* main stays transparent so the body gradient is visible */
.therapy-main{
  /* no background */
}
.therapy-wrap{
  max-width: 960px;
  margin: 0 auto;
  padding: 1.25rem;
}

.therapy-wrap h1{
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: .4rem 0 0.6rem;
}

.therapy-wrap p{
  color: #cbd5e1;
  line-height: 1.6;
  margin: 0.6rem 0;
}

.therapy-callout{
  margin: 1rem 0;
  padding: .9rem 1rem;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}

/* ── Therapy gradients + layout (CBT & siblings) ───────────────── */
.therapy-hero{
  padding: calc(var(--nav-h,762px)) clamp(1rem,4vw,2rem) 1.2rem;
  background: transparent; /* fully transparent */
  border-bottom: 0;
}
.therapy-hero .lead{
  max-width: 820px;
  margin: .5rem auto 1rem;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  color: #dbe3f3;
  opacity: .95;
  text-align: center;
}
.grad-text{
  background: linear-gradient(90deg,#a5b4fc,#c084fc);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.therapy-actions{
  display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap;
  margin-top: .6rem;
}

.therapy-sections{
  background: transparent; /* fully transparent */
  padding: 1.4rem 0 2.2rem;
}

.therapy-grid{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 1.25rem;
}
@media (max-width: 960px){
  .therapy-grid{ grid-template-columns: 1fr; }
}

.therapy-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 1rem 1rem 1.1rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
.therapy-card h2{
  margin: .15rem 0 .4rem;
  font-size: clamp(1.15rem, 2.6vw, 1.4rem);
}
.therapy-card p{ color:#cbd5e1; line-height:1.65; }

/* checklist + steps */
.checklist, .steps{ margin:.4rem 0 0; padding-left: 1.1rem; }
.checklist li, .steps li{ margin:.35rem 0; }
/* Center the whole checklist block */
.checklist{
  list-style: none;
  padding-left: 0;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;      /* shrink to content so auto margins center it */
  max-width: 100%;
  text-align: left;        /* keep items left-aligned inside */
}
.checklist li{
  position: relative; padding-left: 1.4rem;
}
.checklist li::before{
  content: "✓";
  position: absolute; left: 0; top: 0; line-height: 1.2;
  color: #a5b4fc; font-weight: 700;
}

/* skill pills */
/* Center the pill chips in their row */
.pills{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .4rem;
  justify-content: center;
}
.pills span{
  padding: .45rem .65rem;
  border-radius: 9999px;
  font-size: .9rem;
  background: linear-gradient(135deg, rgba(30,64,255,.14), rgba(124,58,237,.12));
  border: 1px solid rgba(255,255,255,.12);
  color: #e8ecff;
}

/* CTA band */
/* CTA band — glass card on a rich gradient wash */
.therapy-cta-band{
  background: transparent;
  padding: 2.2rem 0 2.6rem;
  border-top: 1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.therapy-cta-band .cta-inner{
  display: grid;
  place-items: center;
}

.cta-card{
  width: min(100%, 960px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem 1.25rem;
  align-items: center;

  padding: clamp(1rem, 3vw, 1.6rem) clamp(1rem, 4vw, 1.8rem);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
}

.cta-copy h3{
  margin: 0 0 .25rem;
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  letter-spacing: .01em;
  text-align: center;     /* centered heading */
}
.cta-copy p{
  margin: 0;
  color: #e9e1f7;
  opacity: .92;
  text-align: center;     /* centered paragraph */
}

.cta-actions{
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Mobile: stack and center */
@media (max-width: 720px){
  .cta-card{ grid-template-columns: 1fr; text-align: center; }
  .cta-actions{ justify-content: center; }
  .therapy-cta-band .btn-primary,
  .therapy-cta-band .btn-secondary{
    width: 100%;
    max-width: 280px;
    padding: .75rem 1rem;
    font-size: .95rem;
  }
}

/* phones: comfortable spacing + full-width CTAs */
@media (max-width: 540px){
  .therapy-hero{ padding: calc(var(--nav-h,72px) + 1.6rem) 1rem 1.6rem; }
  .therapy-actions .btn-primary,
  .therapy-actions .btn-secondary,
  .therapy-cta-band .btn-primary{
    display:block; width:100%; max-width:280px; margin:0 auto;
    padding:.75rem 1rem; font-size:.95rem;
  }
}
/* Center the CBT page title in the hero */
.therapy-hero .intro h1{
  text-align: center;
  margin: 0 auto .4rem;
}

/* Pricing two-card grid */
.pricing-grid{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;                /* clearer space between cards */
  align-items: stretch;
}

.pricing-grid .cta-card{
  width: auto;                 /* let the grid define the track width */
  box-sizing: border-box;      /* include padding/border inside the track */
}

@media (max-width: 720px){
  .pricing-grid{ grid-template-columns: 1fr; }
}