/* ============================================================
   TouchStone — marketing site
   Design system: calm, flat, modernist. Mobile-first.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root{
  /* palette */
  --deep:#1E7A20;      /* deep green   */
  --brand:#4FC033;     /* brand green  */
  --soft:#7BD45F;      /* soft green   */
  --char:#1A2530;      /* charcoal text*/
  --muted:#5C6B7A;     /* muted text   */
  --wash:#F6FBF4;      /* pale card wash */
  --white:#FFFFFF;
  --line:#E2EEDC;      /* hairline border */
  --line-2:#D4E7CB;
  --chip:#EAF3DE;      /* chip wash */
  --deep-ink:#13501A;  /* darkest green for AA on wash */
  --shadow-sm:0 1px 2px rgba(26,37,48,.04), 0 2px 8px rgba(26,37,48,.04);
  --shadow-md:0 6px 18px rgba(26,37,48,.07), 0 2px 6px rgba(26,37,48,.05);
  --shadow-lg:0 18px 48px rgba(20,72,30,.12), 0 6px 16px rgba(26,37,48,.06);
  --ring:0 0 0 3px rgba(79,192,51,.35);

  /* type */
  --font-head:"Quicksand", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --font-body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* fluid type scale */
  --fs-display:clamp(2.4rem, 1.4rem + 4.4vw, 4.4rem);
  --fs-h1:clamp(2rem, 1.3rem + 3vw, 3.2rem);
  --fs-h2:clamp(1.7rem, 1.25rem + 1.9vw, 2.5rem);
  --fs-h3:clamp(1.25rem, 1.05rem + 0.8vw, 1.55rem);
  --fs-lead:clamp(1.12rem, 1rem + 0.55vw, 1.45rem);
  --fs-body:clamp(1.05rem, 1rem + 0.2vw, 1.18rem);
  --fs-small:0.95rem;

  /* spacing & shape */
  --r-sm:12px; --r-md:18px; --r-lg:26px; --r-pill:999px;
  --maxw:1180px;
  --gut:clamp(1.1rem, 0.6rem + 2.2vw, 2.4rem);
  --sect:clamp(3.6rem, 2.4rem + 5vw, 7rem);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--char);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
a{color:var(--deep);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--char);line-height:1.12;margin:0;font-weight:600;letter-spacing:-0.01em}
p{margin:0}
:focus-visible{outline:none;box-shadow:var(--ring)}
a:not([class]):focus-visible{border-radius:6px} /* round the ring on plain text links only — don't reshape pills/cards */

/* skip link */
.skip{position:absolute;left:-999px;top:0;background:var(--deep);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;z-index:200}
.skip:focus{left:0}

/* ---------- Layout helpers ---------- */
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.section{padding-block:var(--sect)}
.eyebrow{
  font-family:var(--font-head);font-weight:600;font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--deep);margin:0 0 .9rem
}
.lead{font-size:var(--fs-lead);color:var(--muted);line-height:1.6}
.center{text-align:center}
.measure{max-width:62ch}
.measure-narrow{max-width:48ch}
.mx-auto{margin-inline:auto}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-head);font-weight:600;font-size:1.05rem;
  padding:.92em 1.5em;min-height:54px;border-radius:var(--r-pill);
  border:2px solid transparent;cursor:pointer;text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--deep);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:#1a6a1c;transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-secondary{background:#fff;color:var(--deep);border-color:var(--line-2)}
.btn-secondary:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn-ghost{background:transparent;color:var(--deep);padding-inline:.4em;min-height:auto;border-radius:8px}
.btn-ghost:hover{text-decoration:underline}
.btn-lg{font-size:1.12rem;padding:1.05em 1.8em;min-height:60px}
.btn-block{width:100%}
.btn .arr{transition:transform .18s ease}
.btn:hover .arr{transform:translateX(3px)}

/* ---------- Wordmark (text-based, crisp & scalable) ---------- */
.wordmark{
  font-family:var(--font-head);font-weight:700;letter-spacing:-0.02em;
  display:inline-flex;align-items:baseline;line-height:1;white-space:nowrap;
}
.wordmark .w-touch{color:var(--deep)}
.wordmark .w-stone{color:var(--brand)}
.wordmark .w-pebble{
  display:inline-block;background:var(--deep);border-radius:50%;
  width:.62em;height:.62em;vertical-align:baseline;margin:0 .015em;
  transform:translateY(.02em);
}

/* cairn mark */
.cairn{flex:none}

/* ---------- Header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.82);backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid transparent;transition:border-color .25s ease, box-shadow .25s ease;
}
.site-header.scrolled{border-color:var(--line);box-shadow:var(--shadow-sm)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:74px}
.brand-link{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none}
.brand-link:hover{text-decoration:none}
.brand-link .cairn{width:30px;height:30px}
.brand-link .wordmark{font-size:1.55rem}
.nav-links{display:none;align-items:center;gap:.4rem}
.nav-links a{
  font-family:var(--font-head);font-weight:500;font-size:1rem;color:var(--char);
  padding:.5rem .8rem;border-radius:var(--r-pill);text-decoration:none;
}
.nav-links a:hover{background:var(--wash);color:var(--deep);text-decoration:none}
.nav-cta{display:none;align-items:center;gap:.6rem}
.nav-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border:1px solid var(--line-2);border-radius:12px;background:#fff;cursor:pointer;color:var(--deep)
}
.nav-toggle svg{width:22px;height:22px}
.mobile-menu{display:none;border-top:1px solid var(--line);background:#fff;padding:.6rem var(--gut) 1.2rem}
.mobile-menu.open{display:block}
.mobile-menu a{
  display:block;font-family:var(--font-head);font-weight:500;font-size:1.15rem;
  padding:.95rem .4rem;border-bottom:1px solid var(--line);color:var(--char);text-decoration:none
}
.mobile-menu a:last-of-type{border-bottom:none}
.mobile-menu .btn{margin-top:.9rem}
@media(min-width:920px){
  .nav-links{display:flex}
  .nav-cta{display:flex}
  .nav-toggle{display:none}
}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding-top:clamp(2.4rem,1.5rem+3vw,4rem)}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(1100px 520px at 80% -8%, rgba(123,212,95,.18), transparent 60%),
    radial-gradient(900px 480px at 10% 0%, rgba(79,192,51,.10), transparent 55%),
    linear-gradient(180deg, var(--wash) 0%, #fff 62%);
}
.hero-top{text-align:center;max-width:760px;margin:0 auto;padding-bottom:clamp(2rem,1rem+3vw,3.2rem)}
.hero-mark{display:flex;justify-content:center;margin-bottom:1.2rem}
.hero-mark .cairn{width:66px;height:66px;animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.hero .wordmark{font-size:clamp(2.6rem,1.7rem+4vw,4rem);margin-bottom:1.1rem}
.hero h1{font-size:var(--fs-h1);margin-bottom:1rem;max-width:18ch;margin-inline:auto}
.hero .lead{margin-inline:auto;max-width:50ch}
.badge{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--chip);color:var(--deep-ink);border:1px solid var(--line-2);
  font-family:var(--font-head);font-weight:600;font-size:.82rem;letter-spacing:.04em;
  padding:.45rem .95rem;border-radius:var(--r-pill);margin-bottom:1.4rem
}
.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--brand)}

/* Mentor gallery (centerpiece) */
.gallery-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.gallery-head h2{font-size:var(--fs-h3)}
.gallery-head .hint{color:var(--muted);font-size:var(--fs-small)}
.mentor-grid{
  display:grid;gap:clamp(.9rem,.5rem+1.4vw,1.4rem);
  grid-template-columns:1fr;
}
@media(min-width:560px){.mentor-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.mentor-grid{grid-template-columns:repeat(3,1fr)}}

.mentor-card{
  position:relative;display:flex;flex-direction:column;gap:.85rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.4rem 1.4rem 1.5rem;text-align:left;cursor:pointer;width:100%;
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  font-family:inherit;color:inherit;
}
.mentor-card::before{
  content:"";position:absolute;left:0;top:0;height:100%;width:5px;
  background:var(--accent,var(--brand));border-radius:var(--r-lg) 0 0 var(--r-lg);
  opacity:.9;
}
.mentor-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.mentor-card:focus-visible{box-shadow:var(--ring),var(--shadow-md)}
.mentor-card .top{display:flex;align-items:center;gap:.9rem}
.mentor-avatar{
  flex:none;width:58px;height:58px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-wash,#EAF3DE);color:var(--accent,var(--brand));
}
.mentor-avatar svg{width:34px;height:34px}
.mentor-card h3{font-size:1.22rem;margin-bottom:.1rem}
.mentor-card .specialty{color:var(--muted);font-size:.95rem;font-family:var(--font-head);font-weight:500}
.mentor-card .voice{
  color:var(--char);font-size:.98rem;line-height:1.5;font-style:italic;
  border-left:3px solid var(--accent-wash,#EAF3DE);padding-left:.8rem;margin-top:.2rem
}
.mentor-card .cardfoot{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  margin-top:auto;padding-top:.4rem
}
.mentor-card .lockchip{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.82rem;color:var(--muted);font-family:var(--font-head);font-weight:500
}
.mentor-card .lockchip svg{width:14px;height:14px}
.mentor-card .start{
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--font-head);font-weight:600;font-size:.98rem;color:var(--deep)
}
.mentor-card .start .arr{transition:transform .18s ease}
.mentor-card:hover .start .arr{transform:translateX(3px)}
.placeholder-note{
  text-align:center;color:var(--muted);font-size:var(--fs-small);margin-top:1.1rem
}

/* secondary CTAs under gallery */
.audience-ctas{
  display:grid;gap:1rem;margin-top:clamp(1.8rem,1rem+2vw,2.6rem);
  grid-template-columns:1fr;
}
@media(min-width:680px){.audience-ctas{grid-template-columns:1fr 1fr}}
.aud-card{
  display:flex;align-items:center;gap:1rem;
  background:var(--wash);border:1px solid var(--line);border-radius:var(--r-md);
  padding:1.1rem 1.25rem;text-decoration:none;color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease
}
.aud-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--line-2);text-decoration:none}
.aud-icon{flex:none;width:46px;height:46px;border-radius:12px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--deep)}
.aud-icon svg{width:24px;height:24px}
.aud-card .t{font-family:var(--font-head);font-weight:600;font-size:1.05rem;color:var(--char)}
.aud-card .d{font-size:.92rem;color:var(--muted)}
.aud-card .arr{margin-left:auto;color:var(--deep)}

/* ---------- Generic content sections ---------- */
.section-head{max-width:60ch;margin:0 auto clamp(2rem,1.2rem+2.5vw,3.4rem)}
.section-head.center{text-align:center}
.section-head h2{font-size:var(--fs-h2);margin-bottom:.9rem}
.tint{background:var(--wash)}
.tint-deep{background:var(--char);color:#fff}

/* What it is — ask -> cited answer demo */
.demo{
  display:grid;gap:1.2rem;align-items:stretch;
  grid-template-columns:1fr;max-width:880px;margin-inline:auto
}
@media(min-width:760px){.demo{grid-template-columns:1fr auto 1fr;align-items:center}}
.demo-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.4rem 1.5rem;box-shadow:var(--shadow-sm)}
.demo-label{font-family:var(--font-head);font-weight:600;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--deep);margin-bottom:.7rem;display:flex;align-items:center;gap:.5rem}
.demo-q{font-size:1.18rem;color:var(--char);line-height:1.5}
.demo-a p{margin-bottom:.7rem}
.demo-a p:last-child{margin-bottom:0}
.cite{
  display:inline-flex;align-items:center;gap:.4rem;vertical-align:baseline;
  background:var(--chip);color:var(--deep-ink);border:1px solid var(--line-2);
  font-family:var(--font-head);font-weight:600;font-size:.72rem;border-radius:var(--r-pill);
  padding:.05rem .5rem;margin-left:.15rem
}
.demo-source{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted);display:flex;align-items:center;gap:.5rem}
.demo-arrow{display:flex;align-items:center;justify-content:center;color:var(--brand)}
.demo-arrow svg{width:38px;height:38px}
@media(max-width:759px){.demo-arrow{transform:rotate(90deg)}}

/* How it works — steps */
.steps{display:grid;gap:clamp(1rem,.6rem+1.5vw,1.6rem);grid-template-columns:1fr}
@media(min-width:780px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.7rem 1.5rem;box-shadow:var(--shadow-sm)
}
.step .num{
  width:44px;height:44px;border-radius:50%;background:var(--deep);color:#fff;
  font-family:var(--font-head);font-weight:700;font-size:1.2rem;
  display:flex;align-items:center;justify-content:center;margin-bottom:1rem
}
.step h3{font-size:var(--fs-h3);margin-bottom:.5rem}
.step p{color:var(--muted);font-size:1.02rem}

/* trust — feature grid */
.feature-grid{display:grid;gap:clamp(1rem,.6rem+1.4vw,1.5rem);grid-template-columns:1fr}
@media(min-width:640px){.feature-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.feature-grid.cols-3{grid-template-columns:repeat(3,1fr)}}
.feature{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:1.4rem 1.45rem;
  box-shadow:var(--shadow-sm);transition:transform .18s ease, box-shadow .18s ease
}
.feature:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.feature .ficon{
  width:48px;height:48px;border-radius:13px;background:var(--chip);color:var(--deep);
  display:flex;align-items:center;justify-content:center;margin-bottom:1rem
}
.feature .ficon svg{width:26px;height:26px}
.feature h3{font-size:1.2rem;margin-bottom:.45rem}
.feature p{color:var(--muted);font-size:1rem}

/* For creators — split */
.split{display:grid;gap:clamp(1.6rem,1rem+3vw,3.4rem);align-items:center;grid-template-columns:1fr}
@media(min-width:900px){.split{grid-template-columns:1.05fr .95fr}}
.creator-points{display:flex;flex-direction:column;gap:1.2rem;margin-top:1.6rem}
.creator-point{display:flex;gap:1rem;align-items:flex-start}
.creator-point .cp-icon{flex:none;width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.12);color:var(--soft);display:flex;align-items:center;justify-content:center}
.tint-deep .creator-point .cp-icon{background:rgba(255,255,255,.10)}
.creator-point .cp-icon svg{width:24px;height:24px}
.creator-point h3{font-size:1.18rem;margin-bottom:.3rem}
.tint-deep h2,.tint-deep h3{color:#fff}
.tint-deep .creator-point p{color:rgba(255,255,255,.78)}
.tint-deep .lead{color:rgba(255,255,255,.82)}
.tint-deep .eyebrow{color:var(--soft)}
.revshare{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);
  padding:2rem;text-align:center
}
.revshare .big{font-family:var(--font-head);font-weight:700;font-size:clamp(3.2rem,2rem+6vw,5.2rem);color:var(--soft);line-height:1}
.revshare .big small{font-size:.42em;vertical-align:top;margin-left:.1em}
.revshare .cap{color:rgba(255,255,255,.8);font-size:1.05rem;margin-top:.4rem}
.revshare .sub{color:rgba(255,255,255,.6);font-size:.9rem;margin-top:.9rem}
.tint-deep .btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.tint-deep .btn-secondary:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.tint-deep .btn-primary{background:var(--brand);color:var(--char)}
.tint-deep .btn-primary:hover{background:var(--soft)}

/* Built for clinicians — list with icons */
.clin-grid{display:grid;gap:clamp(1rem,.6rem+1.4vw,1.5rem);grid-template-columns:1fr}
@media(min-width:640px){.clin-grid{grid-template-columns:1fr 1fr}}
.clin-item{display:flex;gap:1rem;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:1.3rem 1.35rem;box-shadow:var(--shadow-sm)}
.clin-item .ci{flex:none;width:50px;height:50px;border-radius:13px;background:var(--chip);color:var(--deep);display:flex;align-items:center;justify-content:center}
.clin-item .ci svg{width:27px;height:27px}
.clin-item h3{font-size:1.14rem;margin-bottom:.3rem}
.clin-item p{color:var(--muted);font-size:.98rem}

/* Pricing */
.price-grid{display:grid;gap:clamp(1.1rem,.6rem+1.6vw,1.8rem);grid-template-columns:1fr;max-width:860px;margin-inline:auto}
@media(min-width:720px){.price-grid{grid-template-columns:1fr 1fr}}
.price-card{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:2rem 1.8rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column
}
.price-card.featured{border-color:var(--brand);box-shadow:var(--shadow-md)}
.price-tag{position:absolute;top:-14px;left:1.8rem;background:var(--brand);color:var(--char);font-family:var(--font-head);font-weight:700;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;padding:.3rem .8rem;border-radius:var(--r-pill)}
.price-card h3{font-size:1.4rem;margin-bottom:.3rem}
.price-card .who{color:var(--muted);font-size:.96rem;margin-bottom:1.2rem}
.price-card .amount{font-family:var(--font-head);font-weight:700;font-size:2.8rem;color:var(--char);line-height:1}
.price-card .amount .per{font-size:1rem;font-weight:500;color:var(--muted)}
.price-card .tbd{font-family:var(--font-head);font-weight:700;font-size:1.6rem;color:var(--deep)}
.price-list{list-style:none;padding:0;margin:1.3rem 0 1.6rem;display:flex;flex-direction:column;gap:.7rem}
.price-list li{display:flex;gap:.6rem;align-items:flex-start;font-size:1rem;color:var(--char)}
.price-list li svg{flex:none;width:20px;height:20px;color:var(--brand);margin-top:.15rem}
.price-card .btn{margin-top:auto}
.price-note{text-align:center;color:var(--muted);font-size:var(--fs-small);max-width:54ch;margin:1.6rem auto 0}

/* FAQ */
.faq{max-width:780px;margin-inline:auto;display:flex;flex-direction:column;gap:.8rem}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--font-head);font-weight:600;font-size:1.1rem;color:var(--char);
  padding:1.25rem 1.4rem;min-height:60px
}
.faq-q:hover{color:var(--deep)}
.faq-icon{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--line-2);position:relative;transition:transform .25s ease,border-color .2s ease}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;background:var(--deep);border-radius:2px}
.faq-icon::before{width:11px;height:2px;left:50%;top:50%;transform:translate(-50%,-50%)}
.faq-icon::after{width:2px;height:11px;left:50%;top:50%;transform:translate(-50%,-50%);transition:transform .25s ease,opacity .2s ease}
.faq-item.open .faq-icon{border-color:var(--brand)}
.faq-item.open .faq-icon::after{transform:translate(-50%,-50%) scaleY(0);opacity:0}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a-inner{padding:0 1.4rem 1.3rem;color:var(--muted);font-size:1.03rem}
.faq-a-inner a{color:var(--deep);text-decoration:underline}

/* closing CTA band */
.cta-band{
  background:linear-gradient(135deg, var(--deep) 0%, #2a9530 55%, var(--brand) 130%);
  border-radius:clamp(20px,1rem+2vw,34px);color:#fff;text-align:center;
  padding:clamp(2.4rem,1.6rem+3vw,4.2rem) var(--gut);box-shadow:var(--shadow-lg)
}
.cta-band h2{color:#fff;font-size:var(--fs-h2);margin-bottom:.8rem;max-width:20ch;margin-inline:auto}
.cta-band p{color:rgba(255,255,255,.9);max-width:48ch;margin:0 auto 1.8rem;font-size:var(--fs-lead)}
.cta-band .btn-primary{background:#fff;color:var(--deep)}
.cta-band .btn-primary:hover{background:var(--wash)}
.cta-band .btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.cta-band .btn-secondary:hover{border-color:#fff;background:rgba(255,255,255,.10)}
.cta-actions{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}

/* hero CTA row */
.hero-actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.6rem}

/* ---------- Footer ---------- */
.site-footer{background:var(--char);color:rgba(255,255,255,.72);padding-block:clamp(2.6rem,1.8rem+2vw,3.6rem)}
.footer-grid{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:760px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr}}
.footer-brand .wordmark{font-size:1.6rem;margin-bottom:.8rem}
.footer-brand .wordmark .w-touch{color:#fff}
.footer-brand .wordmark .w-stone{color:var(--soft)}
.footer-brand .wordmark .w-pebble{background:#fff}
.footer-brand .cairn{width:30px;height:30px}
.footer-brand p{color:rgba(255,255,255,.6);font-size:.96rem;max-width:34ch;margin-top:.4rem}
.footer-col h4{font-family:var(--font-head);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:1rem;font-weight:600}
.footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.7rem}
.footer-col a{color:rgba(255,255,255,.8);font-size:1rem}
.footer-col a:hover{color:#fff}
.footer-bottom{
  margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  font-size:.88rem;color:rgba(255,255,255,.55)
}
.footer-disclaimer{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:var(--r-md);
  padding:1rem 1.2rem;margin-top:1.8rem;font-size:.9rem;color:rgba(255,255,255,.65);line-height:1.6
}

/* persistent educational note */
.edu-note{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--chip);color:var(--deep-ink);border:1px solid var(--line-2);
  border-radius:var(--r-pill);padding:.5rem 1rem;font-size:.9rem;font-family:var(--font-head);font-weight:500
}
.edu-note svg{width:16px;height:16px;flex:none}

/* ---------- Modal (mentor unlock) ---------- */
.modal-overlay{
  position:fixed;inset:0;z-index:300;display:none;
  align-items:center;justify-content:center;padding:1.2rem;
  background:rgba(20,40,24,.5);backdrop-filter:blur(3px)
}
.modal-overlay.open{display:flex;animation:fade .2s ease both}
.modal{
  background:#fff;border-radius:var(--r-lg);max-width:460px;width:100%;
  padding:1.8rem;box-shadow:var(--shadow-lg);position:relative;
  animation:pop .26s cubic-bezier(.2,.7,.2,1) both;max-height:92vh;overflow:auto
}
.modal-close{
  position:absolute;top:.85rem;right:.85rem;width:48px;height:48px;border-radius:12px;
  background:var(--wash);border:1px solid var(--line);cursor:pointer;color:var(--char);
  display:flex;align-items:center;justify-content:center
}
.modal-close svg{width:20px;height:20px}
.modal .m-top{display:flex;align-items:center;gap:.9rem;margin-bottom:1.1rem}
.modal .mentor-avatar{width:54px;height:54px}
.modal h3{font-size:1.35rem;margin-bottom:.1rem}
.modal .m-spec{color:var(--muted);font-size:.95rem;font-family:var(--font-head);font-weight:500}
.modal p{color:var(--muted);font-size:1rem;margin-bottom:1.1rem}
.modal label{display:block;font-family:var(--font-head);font-weight:600;font-size:.9rem;color:var(--deep);margin-bottom:.5rem}
.modal input{
  width:100%;padding:.95rem 1rem;border:1.5px solid var(--line-2);border-radius:12px;
  font-size:1.05rem;font-family:inherit;letter-spacing:.08em;text-transform:uppercase;color:var(--char);margin-bottom:1rem
}
.modal input::placeholder{letter-spacing:.04em;text-transform:none;color:#9aa8b2}
.modal input:focus-visible{border-color:var(--brand)}
.modal .m-actions{display:flex;flex-direction:column;gap:.7rem}
.modal .m-or{text-align:center;color:var(--muted);font-size:.88rem;margin:.2rem 0}
.modal .m-help{font-size:.88rem;color:var(--muted);text-align:center;margin-top:.4rem;margin-bottom:0}

/* ---------- Motion / reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.40s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .hero-mark .cairn{animation:none}
  .btn,.mentor-card,.feature,.aud-card{transition:none}
  *{scroll-behavior:auto!important}
}

/* ---------- Mentor selection state ---------- */
.mentor-card .cardfoot .selecttag{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--font-head);font-weight:600;font-size:.98rem;color:var(--deep)
}
.seldot{
  flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--line-2);
  display:inline-flex;align-items:center;justify-content:center;color:#fff;
  transition:background .16s ease, border-color .16s ease
}
.seldot svg{width:14px;height:14px;opacity:0;transition:opacity .16s ease}
.mentor-card[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent), var(--shadow-md)}
.mentor-card[aria-pressed="true"] .seldot{background:var(--accent);border-color:var(--accent)}
.mentor-card[aria-pressed="true"] .seldot svg{opacity:1}

/* Ask the panel tile (full-width) */
.panel-tile{
  grid-column:1 / -1;display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;
  background:var(--wash);border:1.5px dashed var(--line-2);border-radius:var(--r-lg);
  padding:1.15rem 1.35rem;cursor:pointer;text-align:left;width:100%;color:inherit;font-family:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease
}
.panel-tile:hover{border-color:var(--brand);background:#fff;box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.panel-tile:focus-visible{box-shadow:var(--ring)}
.panel-tile .pt-ic{flex:none;width:56px;height:56px;border-radius:15px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--deep)}
.panel-tile .pt-ic svg{width:30px;height:30px}
.pt-text{display:flex;flex-direction:column;gap:.2rem;flex:1;min-width:200px}
.pt-title{font-family:var(--font-head);font-weight:700;font-size:1.22rem;color:var(--char)}
.pt-sub{color:var(--muted);font-size:.96rem;line-height:1.45}
.pt-toggle{margin-left:auto;display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-head);font-weight:600;color:var(--deep);white-space:nowrap}
.panel-tile[aria-pressed="true"]{border-style:solid;border-color:var(--brand);background:#fff;box-shadow:0 0 0 2px var(--brand)}
.panel-tile[aria-pressed="true"] .seldot{background:var(--brand);border-color:var(--brand)}
.panel-tile[aria-pressed="true"] .seldot svg{opacity:1}
@media(max-width:560px){.pt-toggle{margin-left:0}}

/* Ask composer */
.composer{
  margin-top:clamp(1.4rem,1rem+1.4vw,2rem);background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(1.1rem,.8rem+1vw,1.5rem);box-shadow:var(--shadow-sm)
}
.composer-summary{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;min-height:34px;margin-bottom:.85rem}
.cs-empty{color:var(--muted);font-size:1rem}
.cs-label{font-family:var(--font-head);font-weight:600;color:var(--char);font-size:1rem;margin-right:.15rem}
.cs-chip{display:inline-flex;align-items:center;gap:.45rem;background:var(--chip);color:var(--deep-ink);border:1px solid var(--line-2);border-radius:var(--r-pill);padding:.32rem .75rem;font-family:var(--font-head);font-weight:600;font-size:.86rem}
.cs-chip .dot{width:10px;height:10px;border-radius:50%;background:var(--cc,var(--brand));flex:none}
.composer-q{
  width:100%;border:1.5px solid var(--line-2);border-radius:14px;padding:.95rem 1.05rem;
  font-family:inherit;font-size:1.1rem;color:var(--char);background:#fff;resize:vertical;min-height:66px;line-height:1.5
}
.composer-q::placeholder{color:#9aa8b2}
.composer-q:focus-visible{border-color:var(--brand);box-shadow:none;outline:none}
.composer-actions{display:flex;align-items:center;gap:.7rem;margin-top:.85rem;flex-wrap:wrap}
.composer-mic{flex:none;width:54px;height:54px;border-radius:14px;border:1.5px solid var(--line-2);background:#fff;color:var(--deep);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.composer-mic svg{width:24px;height:24px}
.composer-mic:hover{border-color:var(--brand)}
.composer-mic.live{background:var(--deep);color:#fff;border-color:var(--deep)}
.composer-hint{color:var(--muted);font-size:.9rem;flex:1;min-width:190px}
.composer-ask[disabled]{opacity:.45;cursor:default;transform:none;box-shadow:none}

/* Modal: panel chips + question echo */
.m-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.05rem}
.m-chip{display:inline-flex;align-items:center;gap:.45rem;background:var(--chip);color:var(--deep-ink);border:1px solid var(--line-2);border-radius:var(--r-pill);padding:.34rem .75rem;font-family:var(--font-head);font-weight:600;font-size:.86rem}
.m-chip .dot{width:10px;height:10px;border-radius:50%;background:var(--cc,var(--brand));flex:none}
.m-question{margin:0 0 1.1rem;padding:.75rem .95rem;border-left:3px solid var(--brand);background:var(--wash);border-radius:0 12px 12px 0;color:var(--char);font-size:1.02rem;font-style:italic;line-height:1.5}

/* ---------- Utilities ---------- */
/* [hidden] must always win, even over display:flex on the same element
   (author display rules otherwise override the UA's [hidden] style —
   this kept #panelTile and #modalChips visible before JS ran) */
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.stack-sm>*+*{margin-top:.8rem}
.mt-2{margin-top:1.4rem}.mt-3{margin-top:2rem}
.divider{height:1px;background:var(--line);border:0;margin-block:0}