/* ==========================================================================
   Brave Cave — shared styles  (edit once, applies everywhere)
   ========================================================================== */
:root{
  --bg:#f7f5f1;
  --el:#ffffff;
  --deep:#efece6;
  --ink:#1a1714;
  --ink2:#403a34;
  --ink3:#736c64;
  --ink4:#a8a29a;
  --line:rgba(26,23,20,0.09);
  --line2:rgba(26,23,20,0.14);
  --green:#3d5c38;
  --green2:#4f7349;
  --green-t:#eaf0e8;
  --amber:#b07d2a;
  --cave:#16130f;
  --cave2:#211c16;
  --cave-line:rgba(255,255,255,0.10);
  --cave-ink:#e8e3da;
  --cave-ink2:#9c948a;
  --cave-green:#7fa978;
  /* --ui  = Switzer: display face, nav, buttons, labels
     --serif = Source Serif 4: reading copy (paragraphs and lists) */
  --ui:'Switzer',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --serif:'Source Serif 4',Georgia,serif;
  --r:6px;
  --mx:clamp(20px,5vw,72px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--ui);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--ui);font-weight:700;letter-spacing:-0.02em;line-height:1.08}
/* Reading copy sets in the serif. Anything that already declares var(--ui)
   (.eyebrow, .tm, .btn, form controls) keeps Switzer — a class beats an
   element selector, so those rules win without needing to be repeated. */
p,li,blockquote{font-family:var(--serif)}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--mx)}
.narrow{max-width:760px;margin:0 auto;padding:0 var(--mx)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--green);font-family:var(--ui)}
.tm{font-family:var(--ui);font-size:0.42em;font-weight:600;vertical-align:0.72em;letter-spacing:0.02em;margin-left:1px}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--ui);font-size:15px;font-weight:600;
  letter-spacing:0.01em;padding:14px 26px;border-radius:var(--r);cursor:pointer;border:1px solid transparent;
  transition:background .18s,border-color .18s,color .18s;white-space:nowrap}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green2)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line2)}
.btn-ghost:hover{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.btn-quiet{padding:0;font-weight:500;color:var(--ink3);font-size:15px;background:none;border:none}
.btn-quiet:hover{color:var(--ink)}
.arr{display:inline-block;transition:transform .18s}
.btn:hover .arr{transform:translateX(3px)}

/* ── nav ── */
nav{position:sticky;top:0;z-index:200;background:var(--bg);border-bottom:1px solid transparent;
  transition:border-color .2s,box-shadow .2s;height:66px;display:flex;align-items:center}
nav.sc{border-color:var(--line);box-shadow:0 1px 12px -4px rgba(26,23,20,.08)}
.nav-i{display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{font-family:var(--ui);font-size:20px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:9px;letter-spacing:-0.01em}
.logo-b{width:32px;height:32px;border-radius:50%;display:block;flex-shrink:0;object-fit:cover}
.nav-c{display:flex;align-items:center;gap:36px}
.nav-c a{font-size:14px;font-weight:400;color:var(--ink3);transition:color .15s;letter-spacing:0.01em}
.nav-c a:hover{color:var(--ink)}
.nav-cta{background:transparent!important;color:var(--ink)!important;padding:7px 16px!important;border-radius:var(--r)!important;font-weight:500!important;font-size:14px!important;border:1px solid var(--line2)!important;transition:border-color .18s,color .18s!important}
.nav-cta:hover{border-color:var(--ink)!important;color:var(--ink)!important;background:transparent!important}
.ham{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:none}
.ham span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
#mobile{display:none;flex-direction:column}

/* ── hero ── */
.phero{padding:88px 0 76px;border-bottom:1px solid var(--line)}
.phero-inner{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center}
/* grid items default to min-width:auto, which stops the column shrinking below
   the widest unbreakable run in the headline and blows the layout out on
   narrow screens */
.phero-inner>*{min-width:0}
.phero .eyebrow{margin-bottom:18px}
.phero h1{font-size:clamp(2.1rem,3.7vw,3.05rem);font-weight:700;line-height:1.16;margin-bottom:22px;letter-spacing:-0.025em}
.phero .sub{font-size:17.5px;color:var(--ink2);line-height:1.7;margin-bottom:34px;max-width:46ch}
.pcta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.proof-strip{display:flex;align-items:center;gap:20px;margin-top:32px;padding-top:28px;border-top:1px solid var(--line)}
.proof-strip p{font-size:13.5px;color:var(--ink3)}
.proof-strip strong{color:var(--ink);font-weight:600}

/* ── the truth section (light, between the hero and the book strip) ──
   Same light ground, reading measure and type scale as the other prose
   sections; it introduces no colour of its own. */
.truth{padding:72px 0;border-bottom:1px solid var(--line)}
.truth .eyebrow{display:block;margin-bottom:16px}
.truth h2{font-size:clamp(1.8rem,3vw,2.4rem);margin-bottom:20px}
.truth p{font-size:17.5px;color:var(--ink2);line-height:1.75}

/* ── book credibility strip ── */
.bookstrip{border-bottom:1px solid var(--line);background:var(--bg)}
.bookstrip .wrap{padding-top:17px;padding-bottom:17px}
.bookstrip p{font-size:14.5px;color:var(--ink3);text-align:center;line-height:1.55;margin:0}
.bookstrip cite{font-style:italic;color:var(--ink);font-weight:500}
.bookstrip a{font-family:var(--ui);font-weight:600;color:var(--green);white-space:nowrap}
.bookstrip a:hover{text-decoration:underline}

/* ── today rhythm band (dark, one row) ── */
.rhythm{background:var(--cave);color:var(--cave-ink);padding:0;border-bottom:1px solid var(--cave-line)}
.rhythm-row{display:flex;align-items:center;gap:18px;padding-top:15px;padding-bottom:15px}
.rhythm-tag{flex-shrink:0;font-family:var(--ui);font-size:10.5px;font-weight:700;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--cave-green);background:rgba(127,169,120,.12);
  border:1px solid rgba(127,169,120,.22);border-radius:20px;padding:4px 12px;white-space:nowrap}
.rhythm-msg{flex:1;min-width:0;font-size:14px;color:var(--cave-ink2);line-height:1.45;margin:0}
.rhythm-more{flex-shrink:0;font-family:var(--ui);font-size:12px;font-weight:500;color:var(--cave-ink2);
  opacity:.5;transition:opacity .18s,color .18s;white-space:nowrap}
.rhythm-more:hover{opacity:1;color:var(--cave-ink)}
.rhythm :focus-visible{outline-color:var(--cave-green)}
@media(max-width:760px){
  .rhythm-row{flex-wrap:wrap;gap:9px 14px}
  .rhythm-msg{flex-basis:100%;order:3;font-size:13.5px}
}

/* cave-mock styles removed — replaced by cave-widget.js */

/* ── section base ── */
section{padding:80px 0}
.sec-head{margin-bottom:52px}
.sec-head h2{font-size:clamp(2rem,3.5vw,2.8rem);margin-bottom:12px}
.sec-head p{font-size:17px;color:var(--ink2);max-width:54ch}

/* ── sort grid ── */
.sort-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:40px}
.sort-card{background:var(--el);border:1px solid var(--line);border-radius:10px;padding:28px 30px}
.sort-card h3{font-size:1.05rem;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.sort-card ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.sort-card ul li{font-size:15px;color:var(--ink2);padding-left:18px;position:relative;line-height:1.45}
.sort-card ul li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--green)}
.sort-card.no ul li::before{background:var(--ink4)}
.sort-disq{font-size:14px;color:var(--ink3);padding:16px 20px;border:1px solid var(--line);border-radius:8px;font-style:italic}

/* ── paths ── */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.path-card{background:var(--el);border:1px solid var(--line);border-radius:10px;padding:32px;display:flex;flex-direction:column;gap:16px}
.path-card.hero-path{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.path-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  background:var(--green-t);color:var(--green);padding:4px 10px;border-radius:4px}
.path-tag.amber{background:#fdf3e0;color:var(--amber)}
.path-price{font-family:var(--ui);font-size:2rem;font-weight:600;color:var(--ink)}
.path-price span{font-size:1rem;font-weight:400;color:var(--ink3);font-family:var(--ui)}
.path-card h3{font-size:1.2rem}
.path-card p{font-size:15px;color:var(--ink2);line-height:1.55}
.path-card ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:4px}
.path-card ul li{font-size:14.5px;color:var(--ink2);padding-left:20px;position:relative}
.path-card ul li::before{content:'✓';position:absolute;left:0;color:var(--green);font-weight:700;font-size:13px}
.path-card .btn{margin-top:auto}

/* ── cave section (dark) ── */
.cave-sec{background:var(--cave);color:var(--cave-ink);padding:80px 0}
.cave-sec .eyebrow{color:var(--cave-green)}
.cave-sec h2{color:var(--cave-ink)}
.cave-sec .sec-head p{color:var(--cave-ink2)}
.cave-features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cave-feat{background:var(--cave2);border:1px solid var(--cave-line);border-radius:10px;padding:24px}
.cave-feat-icon{font-size:22px;margin-bottom:12px}
.cave-feat h3{font-size:1rem;color:var(--cave-ink);margin-bottom:8px}
.cave-feat p{font-size:14px;color:var(--cave-ink2);line-height:1.55}

/* ── async access band (light, sits between the Cave section and the Intensive) ──
   A slim proof band, not a capture point: text only, no widget and no button.
   It carries no colour of its own — the sage is the same var(--green) the rest
   of the site uses, and the short rule under the eyebrow is that sage at one
   hairline. */
.async{padding:64px 0;border-bottom:1px solid var(--line)}
.async-card{display:grid;grid-template-columns:1fr 1.15fr;gap:40px 56px;align-items:start;
  background:var(--el);border:1px solid var(--line);border-radius:10px;padding:38px 40px}
/* grid items default to min-width:auto, which would stop either column
   shrinking below its longest unbreakable run on a narrow screen */
.async-card>*{min-width:0}
.async .eyebrow::after{content:'';display:block;width:34px;height:1px;background:var(--green);margin-top:14px}
.async h2{font-size:clamp(1.45rem,2.4vw,1.9rem);line-height:1.14;margin-top:16px}
.async-body p{font-size:16.5px;color:var(--ink2);line-height:1.72}
/* class+class, so it wins over the .async-body p rule above */
.async .async-note{font-size:13.5px;color:var(--ink3);margin-top:18px}

/* ── newsletter ── */
.news-sec{background:var(--green);padding:72px 0}
.news-sec .eyebrow{color:rgba(255,255,255,.7)}
.news-sec h2{color:#fff;font-size:clamp(1.6rem,2.8vw,2.2rem);margin-bottom:10px}
.news-sec p{color:rgba(255,255,255,.8);font-size:16px;max-width:46ch;margin-bottom:30px}
.news-form{display:flex;gap:10px;flex-wrap:wrap;max-width:480px}
.news-form input{flex:1;min-width:200px;padding:15px 18px;border-radius:var(--r);
  border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;
  font-family:var(--ui);font-size:15.5px}
.news-form input::placeholder{color:rgba(255,255,255,.55)}
.news-form input:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.14)}
.news-form button{background:#fff;color:var(--green);border:none;padding:15px 26px;border-radius:var(--r);
  font-family:var(--ui);font-weight:600;font-size:15.5px;cursor:pointer;transition:opacity .18s}
.news-form button:hover{opacity:.88}
.news-note{font-size:13px;color:rgba(255,255,255,.6);margin-top:14px}
.news-ok{display:none;font-size:16px;color:#fff;margin-top:8px}
.news-ok.show{display:block}
.news-err{display:none;font-size:15px;color:#fff;margin-top:12px;padding:10px 14px;
  background:rgba(0,0,0,.22);border-left:3px solid #fff;border-radius:var(--r)}
.news-err.show{display:block}

/* ── footer ── */
footer{padding:60px 0 50px;border-top:1px solid var(--line);background:var(--bg)}
.foot-grid{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap}
.foot-links{display:flex;gap:28px;flex-wrap:wrap}
.foot-links a{font-size:14.5px;color:var(--ink3);transition:color .18s}
.foot-links a:hover{color:var(--ink)}
.foot-meta{margin-top:30px;font-size:13px;color:var(--ink4);max-width:60ch}

/* ── page hero (inner pages) ── */
.page-hero{padding:72px 0 60px;border-bottom:1px solid var(--line)}
.page-hero .eyebrow{margin-bottom:14px}
.page-hero h1{font-size:clamp(2rem,3.5vw,2.8rem);margin-bottom:16px}
.page-hero .lead{font-size:19px;color:var(--ink2);max-width:52ch;line-height:1.6}

/* ── content blocks ── */
.content-grid{display:grid;grid-template-columns:2fr 1fr;gap:60px;align-items:start}
.prose h2{font-size:1.5rem;margin:40px 0 14px}
.prose h3{font-size:1.1rem;margin:28px 0 10px}
.prose p{margin-bottom:16px;color:var(--ink2);line-height:1.7}
.prose ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:20px}
.prose ul li{padding-left:20px;position:relative;color:var(--ink2);font-size:16px;line-height:1.5}
.prose ul li::before{content:'✓';position:absolute;left:0;color:var(--green);font-weight:700}
.sticky-card{position:sticky;top:86px;background:var(--el);border:1px solid var(--line);border-radius:12px;padding:30px;display:flex;flex-direction:column;gap:16px}
.sticky-card .price{font-family:var(--ui);font-size:2.2rem;font-weight:600}
.sticky-card .price span{font-size:1rem;font-weight:400;color:var(--ink3);font-family:var(--ui)}
.sticky-card ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.sticky-card ul li{font-size:14px;color:var(--ink2);padding-left:18px;position:relative}
.sticky-card ul li::before{content:'✓';position:absolute;left:0;color:var(--green);font-weight:700;font-size:12px}
.divider{border:none;border-top:1px solid var(--line);margin:14px 0}

/* ── about ── */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.about-img{background:var(--deep);border-radius:12px;aspect-ratio:4/5;display:flex;align-items:center;
  justify-content:center;font-size:60px;color:var(--ink4)}
.creds{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.cred{padding:14px 16px;background:var(--el);border:1px solid var(--line);border-radius:8px;font-size:14px;color:var(--ink2)}
.cred strong{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}

/* ── reveal ──
   Progressive enhancement: .rv content is visible by default. It is only
   hidden-then-revealed when JS is running, which sets .js-reveal on <html>
   (see partials/head-assets.html). If site.js never loads or throws, nothing
   is left invisible. */
.js-reveal .rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js-reveal .rv.in{opacity:1;transform:none}

/* Pure-CSS net. Until JS proves the reveal actually works (it sets .rv-ok on
   <html> the first time it reveals something), every .rv fades itself in after
   3s with no JS involvement at all. Once .rv-ok is present this stops applying,
   so normal scroll reveals are untouched. */
@keyframes rv-failsafe{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.js-reveal:not(.rv-ok) .rv{animation:rv-failsafe .45s ease 3s both}

/* The hero and the two bands under it must never depend on JS to be visible.
   They carry no .rv, and this rule makes it impossible to hide them by
   reintroducing one. transition:none also rules out a stalled transition
   leaving them stuck part-way. */
.phero .eyebrow,.phero h1,.phero .sub,.phero .pcta,.phero .proof-strip,.phero .cave-widget,
.bookstrip,.bookstrip p,
.rhythm,.rhythm-row,.rhythm-tag,.rhythm-msg,.rhythm-more{
  opacity:1 !important;transform:none !important;transition:none !important;animation:none !important}

/* ── responsive ── */
@media(max-width:900px){
  .phero-inner,.content-grid,.about-grid{grid-template-columns:1fr}
  .phero-inner .cave-mock{display:none}
  .sticky-card{position:static}
  .cave-features{grid-template-columns:1fr 1fr}
}
@media(max-width:880px){
  .nav-c{display:none}.ham{display:flex}
  #mobile{position:fixed;inset:66px 0 auto 0;background:var(--bg);border-bottom:1px solid var(--line);
    padding:18px var(--mx) 26px;flex-direction:column;gap:4px;z-index:199;box-shadow:0 20px 30px -24px rgba(0,0,0,.3)}
  #mobile.open{display:flex}
  #mobile a{padding:13px 0;font-size:16px;font-weight:500;border-bottom:1px solid var(--line)}
  #mobile a.m-cta{color:var(--green);font-weight:600;border-bottom:none}
  .sort-grid,.paths{grid-template-columns:1fr}
  .async-card{grid-template-columns:1fr;gap:24px;padding:32px 28px}
  .cave-features{grid-template-columns:1fr}
}
@media(max-width:560px){
  .pcta{flex-direction:column;align-items:stretch}
  .pcta .btn{justify-content:center}
  .news-form button{width:100%}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto}
  .js-reveal .rv{opacity:1;transform:none;transition:none;animation:none}
  .btn,.arr{transition:none}
}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:3px}

/* ── testimonials ── */
.testi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;align-items:start;justify-items:center}
.testi-phone{width:100%;max-width:220px}
.testi-phone-frame{background:#111;border-radius:36px;padding:10px;border:1px solid rgba(255,255,255,0.12);box-shadow:0 24px 48px -8px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,0.04);position:relative}
.testi-phone-frame::before{content:'';position:absolute;top:14px;left:50%;transform:translateX(-50%);width:60px;height:5px;background:rgba(255,255,255,0.15);border-radius:3px;z-index:2}
.testi-screen{border-radius:28px;overflow:hidden;position:relative;padding-bottom:177.78%;height:0;background:#000}
.testi-screen iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}
.testi-screen img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.testi-yt-bar{position:absolute;top:0;left:0;right:0;padding:10px 12px;
  background:linear-gradient(to bottom,rgba(0,0,0,0.72) 0%,rgba(0,0,0,0) 100%);
  display:flex;align-items:center;gap:8px;z-index:3}
.testi-yt-logo{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:block}
.testi-yt-text{line-height:1.25;min-width:0}
.testi-yt-name{font-size:12px;font-weight:700;color:#fff;font-family:-apple-system,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.testi-yt-channel{font-size:10px;color:rgba(255,255,255,0.78);font-family:-apple-system,sans-serif}
.testi-name{font-size:13px;font-weight:600;color:var(--ink3);margin-top:14px;text-align:center}
.testi-quote{margin-top:10px;text-align:center;padding:0 4px}
.testi-quote p{font-family:var(--serif);font-size:1rem;font-style:italic;color:var(--ink);margin-bottom:4px;line-height:1.4}
.testi-quote span{font-size:12px;color:var(--ink3);font-weight:600}
.keynote-img{width:100%;border-radius:10px;margin:32px 0 8px;object-fit:cover}
@media(max-width:840px){.testi-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.testi-grid{grid-template-columns:1fr}}