/* =====================================================================
   site.css — My Foundational Healing
   THE single stylesheet. Every public page links this file; nothing
   defines its own palette any more.

   Before this file existed, each page carried its own inline <style>
   block. They had drifted: 10 different :root blocks, 15 different
   `body` rules, 11 different `.wrap` widths, 10 different `.btn`s.
   Two golds and two ivories were in circulation. Unified here on the
   education/packages/post values, which were the most considered.

   Structure
     1. Tokens
     2. Base + reset
     3. Layout
     4. Typography
     5. Buttons
     6. Header / nav        (was copy-pasted into 15 files)
     7. Footer
     8. Cards + grids
     9. Article             (post.php prose)
    10. Forms + app surface (intake, portal)
    11. Utilities

   Page-specific rules stay in that page's own <style>, AFTER this link.
   ===================================================================== */


/* --- 1. TOKENS ---------------------------------------------------- */
:root{
  /* brand */
  --crimson:#8C1414;
  --crimson-d:#6E0F0F;
  --gold:#C6942E;
  --gold-l:#D9A94A;
  --oxblood:#1E0A0A;

  /* surfaces */
  --ivory:#FBF7EF;
  --ivory-2:#F4ECDD;
  --cream:#F7EEDD;
  --white:#fff;

  /* text */
  --ink:#2E1B14;
  --ink-soft:#5c4a41;
  --muted:#7A6A60;

  /* lines + shadow */
  --line:rgba(140,20,20,.14);
  --line-solid:#E7DCC9;
  --shadow-card:0 1px 2px rgba(46,27,20,.04);
  --shadow-pop:0 22px 44px -26px rgba(0,0,0,.4);

  /* semantic panels */
  --warn-bg:#FFF8EC;   --warn-line:#F0DCB4;  --warn-bar:#D99A2B;
  --alert-bg:#FDF3F3;  --alert-line:#F0CCCC; --alert-bar:#B53B3B; --alert-ink:#5B3030;
  --ok-bg:#E7F6EC;     --ok-ink:#15803D;
  --bad-bg:#FDECEC;    --bad-ink:#A12B2B;
  --warn-ink:#B4432B;  /* portal: a down-trend / error figure */
  --accent-soft:#F4ECDD; /* portal: incoming chat bubble */

  /* type */
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;

  /* metrics */
  --wrap:1080px;
  --wrap-narrow:720px;
  --nav-h:70px;
  --radius:10px;
  --radius-lg:16px;
}


/* --- 2. BASE + RESET ---------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* Visible focus for keyboard users. Was missing site-wide. */
:focus-visible{outline:2px solid var(--crimson);outline-offset:2px;border-radius:4px}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}


/* --- 3. LAYOUT ----------------------------------------------------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}
.wrap-narrow{max-width:var(--wrap-narrow);margin:0 auto;padding:0 22px}
section.block{padding:76px 0}
@media(max-width:760px){ section.block{padding:52px 0} }


/* --- 4. TYPOGRAPHY -------------------------------------------------- */
.serif{font-family:var(--serif)}
.eyebrow{
  font-size:12px;font-weight:800;letter-spacing:.24em;
  color:var(--gold);text-transform:uppercase;
}
h2.sec{
  font-family:var(--serif);font-weight:500;font-size:42px;
  text-align:center;margin:0 0 14px;color:var(--ink);line-height:1.1;
}
.kicker{text-align:center;margin-bottom:10px}
.sub{max-width:660px;margin:0 auto 40px;text-align:center;color:var(--muted);font-size:17px}
.rule{width:60px;height:2px;background:var(--gold);margin:26px 0}
.pull{
  max-width:760px;margin:36px auto 0;text-align:center;
  font-family:var(--serif);font-size:27px;line-height:1.32;
  color:var(--ink);padding:26px 10px;
}
.pull b{color:var(--crimson)}
.muted{color:var(--muted)}
@media(max-width:760px){ h2.sec{font-size:32px} .pull{font-size:22px} }


/* --- 5. BUTTONS ----------------------------------------------------- */
.btn{
  display:inline-block;font-weight:700;font-size:15px;
  padding:13px 26px;border-radius:var(--radius);
  cursor:pointer;transition:.15s;border:1px solid transparent;
  font-family:inherit;text-align:center;
}
.btn-primary{background:var(--crimson);color:#fff}
.btn-primary:hover{background:var(--crimson-d)}
.btn-gold{background:var(--gold);color:var(--oxblood)}
.btn-gold:hover{background:var(--gold-l)}
.btn-ghost{border-color:var(--gold);color:var(--ink)}
.btn-ghost:hover{background:var(--ivory-2)}
.btn[disabled],.btn:disabled{opacity:.5;cursor:not-allowed}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}


/* --- 6. HEADER / NAV ------------------------------------------------ */
/* Pairs with inc/nav_public.php. Previously duplicated in 15 files. */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(251,247,239,.9);
  backdrop-filter:saturate(1.4) blur(8px);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:11px}
.brand img{height:40px;width:auto}
.brand .wm{display:flex;flex-direction:column;line-height:1.1}
.brand .wm b{font-size:13px;letter-spacing:.12em;color:var(--crimson);font-weight:800}
.brand .wm span{font-size:10.5px;letter-spacing:.18em;color:var(--muted)}
.navlinks{display:flex;align-items:center;gap:26px}
.navlinks a{font-size:14px;color:var(--ink);font-weight:500}
.navlinks a:hover{color:var(--crimson)}
.navtoggle{
  display:none;background:none;border:0;cursor:pointer;
  padding:6px 4px;font-size:24px;line-height:1;color:var(--crimson);
}
@media(max-width:760px){
  .navtoggle{display:block}
  .navlinks{
    position:absolute;top:var(--nav-h);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(251,247,239,.98);
    backdrop-filter:saturate(1.4) blur(8px);
    border-top:1px solid rgba(140,20,20,.12);
    box-shadow:var(--shadow-pop);
    padding:6px 20px 16px;display:none;
  }
  .navlinks.open{display:flex}
  .navlinks a{padding:14px 2px;font-size:16px;border-bottom:1px solid rgba(140,20,20,.06)}
  .navlinks a.btn{margin-top:12px;text-align:center;border-bottom:0}
}


/* --- 7. FOOTER ------------------------------------------------------ */
/* Pairs with inc/footer_public.php. One footer, every public page.
   Six variants used to be in circulation; this replaced all of them. */
footer{background:#170707;color:#B79C8F;padding:46px 0 40px;margin-top:0}
.foot{
  display:grid;grid-template-columns:auto 1fr;gap:10px 34px;
  align-items:center;
}
.foot-brand{grid-row:span 2;align-self:start}
.foot img{height:52px;width:auto;display:block}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 22px;align-self:end}
.foot-links a{
  font-size:14px;font-weight:600;color:#E4D3C4;
  padding:2px 0;border-bottom:1px solid transparent;
}
.foot-links a:hover{color:#fff;border-bottom-color:var(--gold-l)}
.foot a{color:var(--gold-l)}
.foot .small{font-size:13px;line-height:1.65;color:#8F7168;align-self:start}
.foot .small a{color:var(--gold-l)}
.foot .small a:hover{color:var(--gold-l);text-decoration:underline}
.foot-nap{color:#C7AE9D}
.foot-nap b{color:#E4D3C4;font-weight:700}

@media(max-width:760px){
  footer{padding:36px 0 32px}
  .foot{grid-template-columns:1fr;gap:18px;text-align:center;justify-items:center}
  .foot-brand{grid-row:auto}
  .foot-links{justify-content:center;gap:10px 18px}
}


/* --- 8. CARDS + GRIDS ----------------------------------------------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:30px}
@media(max-width:760px){ .grid,.grid-2{grid-template-columns:1fr} }

.card{
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:30px;box-shadow:var(--shadow-card);
}
.card h3{font-family:var(--serif);font-size:26px;font-weight:600;color:var(--crimson);margin:0 0 10px}
.card p{margin:0 0 14px;color:var(--ink-soft);font-size:15.5px}

/* Gold-dot list, used in the method cards and the packages page. */
.dotlist{margin:0;padding-left:0;list-style:none}
.dotlist li{padding:8px 0 8px 26px;position:relative;font-size:15px;color:var(--ink)}
.dotlist li:before{
  content:"";position:absolute;left:0;top:15px;
  width:9px;height:9px;border-radius:50%;background:var(--gold);
}

/* Dark call-to-action band. */
.cta{background:var(--oxblood);color:var(--cream)}
.cta .in{padding:84px 26px;text-align:center;position:relative;overflow:hidden}
.cta .eyebrow{color:var(--gold-l)}
.cta h2{font-family:var(--serif);font-weight:500;font-size:52px;margin:14px 0 12px;color:#fff}
.cta p{color:#C3AB9E;max-width:540px;margin:0 auto 28px;font-size:17px}
@media(max-width:760px){ .cta .in{padding:56px 22px} .cta h2{font-size:36px} }


/* --- 9. ARTICLE ------------------------------------------------------ */
.article{max-width:var(--wrap-narrow);margin:0 auto;padding:40px 22px 10px;line-height:1.65}
.article h1{
  font-family:var(--serif);font-weight:600;font-size:46px;
  line-height:1.06;margin:10px 0 6px;color:var(--ink);
}
.article .lede{font-size:19px;color:var(--ink-soft);margin:6px 0 26px}
.article h2{
  font-family:var(--serif);font-weight:600;font-size:31px;
  color:var(--crimson);margin:34px 0 10px;line-height:1.15;
}
.article h3{font-size:20px;color:var(--ink);margin:24px 0 6px}
.article p{margin:13px 0;font-size:17.5px}
.article ul,.article ol{margin:13px 0;padding-left:22px}
.article li{margin:6px 0;font-size:17.5px}
.article a{color:var(--crimson);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.article blockquote{
  border-left:3px solid var(--gold);margin:18px 0;
  padding:6px 18px;color:var(--ink-soft);font-size:18px;
}
.article img,.article svg{max-width:100%;height:auto;border-radius:var(--radius)}
.article figure{margin:22px 0}
.article figcaption{font-size:13px;color:var(--muted);text-align:center;margin-top:6px}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:2px}
.crumbs a{color:var(--crimson);font-weight:600}
@media(max-width:760px){
  .article h1{font-size:34px}
  .article h2{font-size:25px}
  .article p,.article li{font-size:17px}
}


/* --- 10. FORMS + APP SURFACE ----------------------------------------- */
/* The intake flow and patient portal. These pages used to run a separate
   blue-grey palette with a green accent; they are on the brand now. */

label{display:block;font-weight:600;font-size:14px;margin-top:12px}
input,select,textarea{
  width:100%;padding:11px;border:1px solid var(--line-solid);
  border-radius:9px;font-size:16px;margin-top:4px;
  font-family:inherit;color:var(--ink);background:var(--white);
}
input:focus,select:focus,textarea:focus{
  outline:0;border-color:var(--crimson);
  box-shadow:0 0 0 3px rgba(140,20,20,.10);
}
input[type=checkbox],input[type=radio]{width:auto;margin-top:0}
button.btn{border:0;padding:13px 18px;font-size:16px}

/* Panel used as a form container. */
.panel{
  background:var(--white);border:1px solid var(--line);
  border-radius:12px;padding:20px;margin-top:16px;
}

/* Side-by-side left/right number inputs. */
.lr{display:flex;gap:12px}
.lr>div{flex:1}
.lr label{margin-top:0;font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.lr input{margin-top:4px;text-align:center;font-size:17px;padding:12px}

/* Instructional panel (amber). */
.howto{
  background:var(--warn-bg);border:1px solid var(--warn-line);
  border-left:4px solid var(--warn-bar);border-radius:var(--radius);
  padding:14px 16px;margin-top:14px;font-size:14px;line-height:1.55;
}
.howto b{display:block;margin-bottom:6px;font-size:14.5px}
.howto ol{margin:0;padding-left:20px}
.howto li{margin:4px 0}

/* Medical disclaimer (crimson). */
.disc{
  background:var(--alert-bg);border:1px solid var(--alert-line);
  border-left:4px solid var(--alert-bar);border-radius:var(--radius);
  padding:13px 16px;margin:0 0 16px;font-size:13.5px;
  line-height:1.55;color:var(--alert-ink);
}
.disc b{display:block;margin-bottom:4px;font-size:14px;color:var(--crimson)}

/* Grounding / explanation panel — was blue, now gold on ivory. */
.gnd{
  background:var(--ivory-2);border:1px solid var(--line);
  border-left:4px solid var(--gold);border-radius:var(--radius);
  padding:16px 18px;margin-top:16px;
}
.gnd h3{margin:0 0 8px;font-size:16.5px;color:var(--crimson);font-family:var(--serif);font-weight:600}
.gnd p{font-size:14.5px;line-height:1.62;margin:0 0 11px}
.gnd .rule{
  background:var(--white);border:1px solid var(--line);border-radius:8px;
  padding:12px 14px;margin-top:12px;width:auto;height:auto;
}
.gnd .rule b{color:var(--crimson)}

.hint{
  background:var(--ivory-2);border:1px solid var(--line);
  border-radius:8px;padding:10px 12px;font-size:13.5px;margin-top:10px;
}
.err{background:#FDE7E2;color:#B4432B;padding:10px 12px;border-radius:9px;margin:12px 0}

/* Data tables. */
.numtab{width:100%;border-collapse:collapse;margin-top:10px;font-size:14.5px}
.numtab th{
  text-align:left;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:800;padding:0 8px 7px 0;
  border-bottom:1px solid var(--line);
}
.numtab td{padding:10px 8px 10px 0;border-bottom:1px solid var(--line)}
.numtab td.n{text-align:center;font-variant-numeric:tabular-nums;width:52px}

.rom{width:100%;border-collapse:collapse;margin-top:8px;font-size:14px}
.rom th,.rom td{border:1px solid var(--line);padding:7px 8px;text-align:center}
.rom td.m{text-align:left;font-weight:600}
.rom input{width:78px;text-align:center}

.pill{display:inline-block;font-size:11px;font-weight:800;padding:2px 8px;border-radius:10px}
.pill.lo{background:var(--bad-bg);color:var(--bad-ink)}
.pill.hi{background:var(--ok-bg);color:var(--ok-ink)}

/* Findings / locked preview. */
.find{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-top:16px}
.find h3{margin:0 0 4px;font-size:16px}
.find .row{padding:11px 0;border-bottom:1px solid var(--line)}
.find .row:last-child{border-bottom:0}
.find .k{font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.find .v{font-size:16px;font-weight:700;margin-top:3px}
.locked{
  background:var(--ivory-2);border:1px dashed var(--gold);
  border-radius:var(--radius);padding:14px 16px;margin-top:14px;font-size:14px;
}
.locked .lk{font-weight:800;margin-bottom:6px}
.locked ul{margin:0;padding-left:20px}
.locked li{margin:3px 0;color:var(--muted)}

/* Pricing options. */
.pay{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.opt{flex:1;min-width:220px;border:2px solid var(--line);border-radius:12px;padding:16px;text-align:center;background:var(--white)}
.opt.best{border-color:var(--crimson)}
.opt .price{font-size:30px;font-weight:800;color:var(--crimson)}
.opt .muted{color:var(--muted);font-size:13px}

/* Test cards + the "watch how to test" button. */
.tcard{border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:12px;background:var(--white)}
.tcard .tname{font-weight:700;font-size:15.5px}
.tcard .ttarget{color:var(--muted);font-weight:400;font-size:13.5px}
.wbtn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;margin:11px 0 12px;padding:13px 14px;
  background:var(--ivory-2);border:2px solid var(--crimson);
  border-radius:var(--radius);color:var(--crimson);
  font-weight:800;font-size:15px;text-decoration:none;transition:.12s;
}
.wbtn:hover{background:var(--crimson);color:#fff}
.wbtn .play{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:var(--crimson);color:#fff;font-size:12px;flex:0 0 auto;
}
.wbtn:hover .play{background:#fff;color:var(--crimson)}
.watch{color:var(--crimson);font-weight:700;text-decoration:none}

/* Posture photo upload. */
.photos{border:1px solid var(--line);border-radius:12px;padding:16px;margin-top:22px;background:var(--white)}
.photos h3{margin:0 0 4px;font-size:16px}
.shot{border:1px solid var(--line);border-radius:var(--radius);padding:12px;margin-top:11px;background:var(--ivory)}
.shot .sn{font-weight:700;font-size:14.5px}
.shot .sd{font-size:13px;color:var(--muted);margin:3px 0 9px;line-height:1.5}
.shot input[type=file]{font-size:13.5px;padding:9px;background:var(--white);border:1px dashed var(--line-solid)}
.shot .thumb{display:none;margin-top:9px;max-width:110px;border-radius:8px;border:1px solid var(--line)}
.howshoot{
  background:var(--ivory-2);border:1px solid var(--line);border-radius:9px;
  padding:12px 14px;margin-top:12px;font-size:13.5px;line-height:1.55;
}
.howshoot b{display:block;margin-bottom:5px}
.howshoot ul{margin:0;padding-left:18px}
.howshoot li{margin:3px 0}

.consent{
  display:flex;gap:10px;align-items:flex-start;margin-top:14px;
  padding:13px 14px;background:var(--ivory);
  border:1px solid var(--line-solid);border-radius:9px;
}
.consent input{width:19px;height:19px;flex:0 0 auto;margin-top:2px}
.consent label{margin:0;font-weight:400;font-size:13.5px;line-height:1.55;color:var(--ink-soft)}

.read h3{margin:26px 0 6px;font-size:17px}
.read p{font-size:15px;line-height:1.65;margin:0 0 12px}


/* --- 11. UTILITIES ---------------------------------------------------- */
.center{text-align:center}
.nowrap{white-space:nowrap}
.small{font-size:13px}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--crimson);color:#fff;padding:10px 16px;
  border-radius:0 0 var(--radius) 0;font-weight:700;
}
.skip-link:focus{left:0}

/* Narrow single-column wrapper for the intake / portal / utility pages,
   which previously redefined .wrap to 680px for themselves. */
.wrap-form{max-width:680px;margin:0 auto;padding:26px 18px 60px}


/* --- 12. ARTICLE COMPONENTS ------------------------------------------
   Callouts, reference lists, tables of contents, stat rows and the
   chain diagram used inside the education articles.

   These used to live in each article page's own <style>, which is why
   the same callout was defined eight times. Collected here once so the
   posts can live in the database as content and pick up their styling
   from the site instead of carrying a copy of it.
   -------------------------------------------------------------------- */

/* Emphasis panel — crimson left bar. */
.callout{
  background:var(--white);border:1px solid var(--line);
  border-left:4px solid var(--crimson);border-radius:12px;
  padding:22px 24px;margin:26px 0;
}
.callout p:last-child{margin-bottom:0}

/* Quiet trailing note (sources, caveats). */
.note{font-size:13px;color:var(--muted);font-style:italic;margin-top:28px}

/* Reference list with gold bullets. */
.refs{margin:0;padding-left:0;list-style:none}
.refs li{font-size:14.5px;color:var(--muted);position:relative;padding:6px 0 6px 20px}
.refs li:before{
  content:"";position:absolute;left:0;top:14px;
  width:7px;height:7px;border-radius:50%;background:var(--gold);
}
.refs a{color:var(--crimson);font-weight:600}

/* In-article table of contents. */
.toc{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin:22px 0}
.toc b{color:var(--crimson);font-size:13px;text-transform:uppercase;letter-spacing:.05em}
.toc ul{margin:8px 0 0;padding-left:20px;columns:2;font-size:14.5px}
.toc a{color:var(--ink)}
.toc a:hover{color:var(--crimson)}
@media(max-width:600px){ .toc ul{columns:1} }

/* Numbered steps. */
.step{position:relative;padding:6px 0 6px 40px;margin:0 0 10px;font-size:16.5px}
.step .num{
  position:absolute;left:0;top:4px;width:27px;height:27px;border-radius:50%;
  background:var(--crimson);color:#fff;font-weight:800;font-size:14px;
  display:flex;align-items:center;justify-content:center;
}

/* Bordered sub-box with an uppercase heading. */
.box{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.box h3{margin:0 0 8px;font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--crimson)}
.box ul{margin:0}
.box li{font-size:15px;padding:5px 0 5px 22px}
.box li:before{top:13px;width:7px;height:7px}

/* Two-column block. */
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}
@media(max-width:600px){ .twocol{grid-template-columns:1fr} }

/* Stat row. */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0}
.stat{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:16px 12px;text-align:center}
.stat .n{font-family:var(--serif);font-size:34px;font-weight:600;color:var(--crimson);line-height:1}
.stat .l{font-size:12px;color:var(--muted);margin-top:4px;font-weight:600}
@media(max-width:760px){ .stats{grid-template-columns:repeat(2,1fr)} }

/* Cause-and-effect chain diagram. */
.chain{margin:12px 0 8px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--white)}
.chain .step{padding:11px 15px;font-size:14.5px;position:relative;margin:0}
.chain .step + .step{border-top:1px solid var(--line)}
.chain .step .lab{
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold);font-weight:800;display:block;margin-bottom:2px;
}
.chain .step.root{background:var(--ivory-2);font-weight:700;color:var(--ink)}
.chain .step.path{color:var(--muted)}
.chain .step.result{background:#FBEDEA;font-weight:700;color:var(--crimson)}

/* Figure with caption. */
.figure{
  background:var(--white);border:1px solid var(--line);border-radius:18px;
  padding:14px;margin:26px 0;box-shadow:0 22px 50px -40px rgba(140,20,20,.4);
}
.figure svg{width:100%;height:auto;display:block}
.figcap{font-size:13px;color:var(--muted);text-align:center;margin:8px 6px 4px;font-style:italic}

/* Small amber "how to read this" strip. */
.model{
  background:#FFF7E6;border:1px solid #F0D9A8;border-radius:9px;
  padding:9px 13px;font-size:13.5px;color:#7A5A12;margin:6px 0 14px;
}
.zoneintro{color:var(--muted);font-size:16px;margin:0 0 6px}
.sublabel{font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--gold)}

/* Responsive 16:9 video embed. */
.video{
  position:relative;width:100%;aspect-ratio:16/9;margin:6px 0 8px;
  border-radius:14px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(30,10,10,.12);background:#000;
}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}


/* --- 13. FORM / PORTAL PAGE SCOPE -------------------------------------
   The intake flow and patient portal are single-column app screens, not
   marketing pages. A few shared class names mean something tighter there
   (a .card is a form panel, .sub is a short left-aligned subtitle), so
   those are scoped to .wrap-form rather than given new names -- it keeps
   the markup on those pages unchanged.
   -------------------------------------------------------------------- */

.wrap-form h1{font-size:26px;margin:14px 0 6px;font-family:var(--serif);font-weight:600}
.wrap-form h2{font-size:20px;margin:22px 0 6px}

/* Short left-aligned subtitle, not the centered marketing subhead. */
.wrap-form .sub{
  color:var(--muted);font-size:15px;margin:0 0 8px;
  max-width:none;text-align:left;
}

/* Form panel: tighter than a marketing card. */
.wrap-form .card{border-radius:12px;padding:20px;margin-top:16px;box-shadow:none}
.wrap-form .card h3{font-size:16px;margin:0 0 8px}

/* App buttons carry no modifier class, so give the bare one a real look. */
.wrap-form button.btn,
.wrap-form .btn:not(.btn-gold):not(.btn-ghost){
  background:var(--crimson);color:#fff;border:0;
}
.wrap-form button.btn:hover,
.wrap-form .btn:not(.btn-gold):not(.btn-ghost):hover{background:var(--crimson-d)}
.wrap-form button.btn.small,
.wrap-form .btn.small{padding:9px 14px;font-size:14px}

/* The portal pages print (visit summaries, programs). */
@media print{
  header,footer,.navlinks,.navtoggle,.noprint{display:none !important}
  .wrap-form{max-width:none;padding:0}
  body{background:#fff}
  .card,.panel{break-inside:avoid;border-color:#ccc}
}


/* --- 14. PROTOCOLS ----------------------------------------------------
   The protocol library (protocols.php) and a single protocol
   (protocol.php). A protocol is opened when something has gone wrong, so
   everything here leads with the trigger -- the situation that sends you
   to it -- rather than the title.
   -------------------------------------------------------------------- */

/* The "reach for this when" strip under a protocol title. */
.trigger{
  background:var(--ivory-2);border:1px solid var(--line);
  border-left:4px solid var(--crimson);border-radius:var(--radius);
  padding:13px 16px;margin:14px 0 26px;font-size:16px;color:var(--ink);
}
.trigger .lab,.trigger-mini .lab{
  display:block;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--crimson);font-weight:800;margin-bottom:3px;
}

/* Library list. */
.protolist{display:grid;gap:18px;max-width:var(--wrap-narrow);margin:0 auto}
.proto{
  display:block;position:relative;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:22px 24px;transition:.15s;box-shadow:var(--shadow-card);
}
.proto:hover{border-color:var(--gold);box-shadow:0 14px 30px -22px rgba(140,20,20,.5)}
.trigger-mini{
  background:var(--ivory-2);border-radius:8px;padding:9px 12px;
  font-size:14.5px;color:var(--ink-soft);margin-bottom:12px;
}
.proto h3{
  font-family:var(--serif);font-weight:600;font-size:25px;
  color:var(--crimson);margin:0 0 8px;line-height:1.15;
}
.proto p{margin:0 0 14px;color:var(--ink-soft);font-size:15.5px}
.proto .go{color:var(--crimson);font-weight:700;font-size:14.5px}
.proto .draft{
  position:absolute;top:14px;right:16px;background:#8A5A12;color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border-radius:20px;
}

/* Divider shown once the gated half is open. */
.protocol-open{
  border-top:2px solid var(--gold);margin:38px 0 4px;padding-top:14px;
}
.protocol-open .lab{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);font-weight:800;
}

/* The email gate. */
.gate{
  background:var(--ivory-2);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:30px 28px;margin:38px 0 10px;
}
.gate h2{
  font-family:var(--serif);font-weight:600;font-size:27px;
  color:var(--ink);margin:8px 0 10px;line-height:1.15;
}
.gate p{font-size:16px;color:var(--ink-soft);margin:0 0 12px}
.gate p.why{font-size:14.5px;color:var(--muted)}
.gateform{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.gateform input[type=email]{
  flex:1;min-width:220px;margin-top:0;background:var(--white);
  border-color:var(--line-solid);
}
.gateform button{flex:0 0 auto;margin-top:0}
.gatemsg{margin-top:10px;font-size:14.5px;min-height:1.2em}
@media(max-width:600px){
  .gate{padding:24px 20px}
  .gateform button{width:100%}
}

/* Closing call-to-action band, shared by protocols.php and protocol.php. */
.closing-band{background:var(--ivory-2);margin-top:44px;padding:52px 0;text-align:center}
.closing-band h2{
  font-family:var(--serif);font-weight:600;font-size:32px;
  color:var(--ink);margin:0 0 8px;
}
.closing-band p{color:var(--ink-soft);max-width:560px;margin:0 auto 22px;font-size:17px}

/* Shown to a reader who unlocked but has not clicked the confirmation
   link. They can read everything; they just are not on the list yet. */
.confirm-nudge{
  background:var(--warn-bg);border:1px solid var(--warn-line);
  border-left:4px solid var(--warn-bar);border-radius:var(--radius);
  padding:13px 16px;margin:30px 0 0;font-size:14.5px;line-height:1.55;
}
.confirm-nudge b{display:block;margin-bottom:3px}

/* Attribution block — used when a protocol teaches material that came
   from someone else. Says so plainly and sends the reader to the source. */
.credit{
  background:var(--white);border:1px solid var(--line);
  border-left:4px solid var(--gold);border-radius:var(--radius);
  padding:16px 18px;margin:30px 0 18px;
}
.credit b{
  display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);font-weight:800;margin-bottom:6px;
}
.credit p{margin:0;font-size:15px;color:var(--ink-soft);line-height:1.6}
.credit a{color:var(--crimson);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* Video link inside an article or protocol, not just the intake form. */
.article .wbtn{margin:14px 0 4px;text-decoration:none}