/* =========================================================================
   khyp-site.css — Key Hypnotherapy shared styles.
   Design system: calming, clinical-but-warm — sage greens + warm sand
   neutrals. Themeable: change the :root vars only.
   ========================================================================= */
:root{
  --brand:#2F5A63;         /* sage-700 — primary */
  --brand-dark:#23444B;    /* sage-900 */
  --accent:#4E7F87;        /* clay — warm accent */
  --ink:#12252A;           /* ink-900 */
  --muted:#5F7C81;         /* ink-500 */
  --line:#DCE6E7;          /* sand-200 */
  --bg:#EEF4F4;            /* sand-100 — warm background */
  --card:#ffffff;
  --ok:#2F5A63;            /* sage green = positive */
  --warn:#C98A3C;          /* amber */
  --flag:#B4544A;          /* red */
  /* extra palette anchors used by tints below */
  --sage-100:#DCEAEB; --sage-050:#EFF5F5; --sand-050:#F7FAFA; --sand-300:#BFD2D4;
  --clay-050:#E3EDEE; --amber-050:#F7ECD8; --red-050:#F7E0DD; --blue:#5F8A9B; --blue-050:#DCECF1;
  --radius:14px;
  --shadow:0 1px 3px rgba(15,33,38,.07),0 6px 20px rgba(15,33,38,.06);
  --maxw:1100px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--brand-dark);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.7rem;margin:.2em 0}
h2{font-size:1.15rem;margin:0 0 .6em}
hr{border:none;border-top:1px solid var(--line);margin:1em 0}

/* Demo bar */
.khyp-demobar{background:#FFF4E0;border-bottom:1px solid #D2E0E2;color:#23444B;font-size:.85rem;
  padding:6px 18px;text-align:center}
.khyp-demobar__dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--warn);margin-right:6px;vertical-align:middle}
.khyp-demobar a{color:#23444B;text-decoration:underline;margin-left:8px}

/* Top nav */
.khyp-top{display:flex;align-items:center;gap:18px;background:var(--card);border-bottom:1px solid var(--line);
  padding:12px 22px;position:sticky;top:0;z-index:20;flex-wrap:wrap}
.khyp-brand{font-weight:700;font-size:1.1rem;color:var(--ink)}
.khyp-brand span{display:block;font-size:.62rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:600}
.khyp-nav{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.khyp-nav a{color:var(--muted);font-weight:600;font-size:.9rem;padding:6px 11px;border-radius:8px;position:relative}
.khyp-nav a:hover{background:var(--bg);text-decoration:none;color:var(--ink)}
.khyp-nav a.is-active{background:var(--brand);color:#fff}
.khyp-badge{display:inline-block;min-width:17px;height:17px;line-height:17px;text-align:center;font-size:.68rem;
  background:var(--accent);color:#fff;border-radius:9px;padding:0 4px;margin-left:5px}
.khyp-nav a.is-active .khyp-badge{background:#fff;color:var(--brand)}
.khyp-top__right{display:flex;gap:8px;align-items:center}
.khyp-ghost{color:var(--muted);font-size:.85rem}

/* Layout */
.khyp-main{max-width:var(--maxw);margin:0 auto;padding:24px 22px 60px}
.khyp-main--public{max-width:var(--maxw)}
.khyp-pagehead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.khyp-back{font-size:.85rem;color:var(--muted)}
.khyp-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
@media(max-width:760px){.khyp-grid2{grid-template-columns:1fr}}

/* Cards */
.khyp-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;
  box-shadow:var(--shadow);margin-bottom:16px}
.khyp-card__link{float:right;font-size:.8rem;font-weight:600}

/* Tiles */
.khyp-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.khyp-tile{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;
  box-shadow:var(--shadow);display:block;color:var(--ink);transition:transform .08s,box-shadow .12s}
a.khyp-tile:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(15,33,38,.12);text-decoration:none}
.khyp-tile__val{font-size:1.45rem;font-weight:700;line-height:1.1}
.khyp-tile__label{font-size:.78rem;color:var(--muted);margin-top:4px}
.khyp-tile__foot{font-size:.72rem;color:var(--brand);margin-top:8px;font-weight:600;
  border-top:1px solid var(--line);padding-top:7px}
.khyp-tile--accent{border-left:4px solid var(--accent)}
.khyp-tile--ok{border-left:4px solid var(--ok)}
.khyp-tile--flag{border-left:4px solid var(--flag)}
.khyp-tile--flag .khyp-tile__val{color:var(--flag)}
.khyp-tile--warn{border-left:4px solid var(--warn)}
.khyp-tile--warn .khyp-tile__val{color:var(--warn)}

/* Buttons */
.khyp-btn{display:inline-block;background:var(--brand);color:#fff;border:none;border-radius:9px;
  padding:9px 16px;font-size:.9rem;font-weight:600;cursor:pointer;font-family:inherit}
.khyp-btn:hover{background:var(--brand-dark);text-decoration:none;color:#fff}
.khyp-btn--sm{padding:6px 11px;font-size:.8rem}
.khyp-btn--ghost{background:transparent;color:var(--brand-dark);border:1px solid var(--line)}
.khyp-btn--ghost:hover{background:var(--bg);color:var(--brand-dark)}
.khyp-btnrow{display:flex;gap:6px;flex-wrap:wrap}

/* Actions dropdown */
.khyp-actions{position:relative}
.khyp-actions__menu{position:absolute;right:0;top:110%;background:var(--card);border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--shadow);min-width:210px;padding:6px;display:none;z-index:30}
.khyp-actions.is-open .khyp-actions__menu{display:block}
.khyp-actions__menu a{display:block;padding:8px 12px;border-radius:7px;color:var(--ink);font-size:.88rem}
.khyp-actions__menu a:hover{background:var(--bg);text-decoration:none}

/* Tables */
.khyp-table{width:100%;border-collapse:collapse;font-size:.9rem}
.khyp-table th{text-align:left;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;
  padding:8px 10px;border-bottom:1px solid var(--line)}
.khyp-table td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
.khyp-table tr.is-due{background:#F7ECD8}
.khyp-table tr.is-cold{background:#F7E0DD}
.khyp-rowactions{display:flex;gap:6px;align-items:center;justify-content:flex-end}
.khyp-card--muted{background:var(--bg);border-style:dashed}
.khyp-card--muted .khyp-tile{opacity:.7}
.khyp-table tr:hover{background:var(--bg)}

/* Lists / feeds */
.khyp-list{list-style:none;padding:0;margin:0}
.khyp-list li{padding:9px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.khyp-list--tight li{padding:5px 0}
.khyp-list audio{margin-top:6px;max-width:100%}
.khyp-feed{list-style:none;padding:0;margin:0}
.khyp-feed li{padding:8px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.khyp-feed__type{display:inline-block;font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;
  background:var(--bg);color:var(--muted);border-radius:5px;padding:2px 6px;margin-right:6px}
.khyp-attention{list-style:none;padding:0;margin:0}
.khyp-attention li{padding:7px 0;border-bottom:1px solid var(--line)}
.khyp-barlist{list-style:none;padding:0;margin:0}
.khyp-barlist li{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line)}
.khyp-barlist a{display:flex;justify-content:space-between;width:100%;color:var(--ink)}

/* Pills / tags */
.khyp-pill{display:inline-block;min-width:20px;text-align:center;border-radius:10px;padding:1px 7px;font-size:.72rem;
  font-weight:700;background:var(--bg);color:var(--muted);margin-right:6px}
.khyp-pill--warn{background:#F7ECD8;color:var(--warn)}
.khyp-pill--flag{background:#F7E0DD;color:var(--flag)}
.khyp-tag{display:inline-block;font-size:.7rem;font-weight:600;border-radius:6px;padding:2px 8px;background:var(--bg);color:var(--muted)}
.khyp-tag--accent{background:#E3EDEE;color:var(--accent)}
.khyp-tag--warn{background:#F7ECD8;color:var(--warn)}
.khyp-tag--stage{background:#DCEAEB;color:var(--brand-dark)}
.khyp-tag--website{background:#DCEAEB;color:var(--ok)}
.khyp-tag--ad{background:#E3EDEE;color:var(--accent)}
.khyp-tag--referral{background:#DCEAEB;color:#345C68}
.khyp-tag--import{background:var(--bg);color:var(--muted)}
.khyp-tag--inv-paid,.khyp-tag--acct-active{background:#DCEAEB;color:var(--ok)}
.khyp-tag--inv-overdue{background:#F7E0DD;color:var(--flag)}
.khyp-tag--inv-sent{background:#DCEAEB;color:var(--brand-dark)}
.khyp-tag--inv-draft{background:var(--bg);color:var(--muted)}
.khyp-tag--acct-pending{background:#F7ECD8;color:var(--warn)}
.khyp-tag--acct-suspended,.khyp-tag--acct-disabled{background:#F7E0DD;color:var(--flag)}

/* Inline stats */
.khyp-inline-stats{display:flex;gap:22px}
.khyp-inline-stats>div{display:flex;flex-direction:column}
.khyp-inline-stats__n{font-size:1.25rem;font-weight:700}
.khyp-inline-stats .is-warn .khyp-inline-stats__n{color:var(--warn)}
.khyp-inline-stats>div span:last-child{font-size:.75rem;color:var(--muted)}

/* Funnel */
.khyp-funnel{display:flex;align-items:center;gap:10px;margin:6px 0 12px;flex-wrap:wrap}
.khyp-funnel__step{display:flex;flex-direction:column;align-items:center;background:var(--bg);border-radius:10px;
  padding:12px 20px;color:var(--ink);min-width:90px}
.khyp-funnel__step:hover{background:#EAF2F3;text-decoration:none}
.khyp-funnel__n{font-size:1.5rem;font-weight:700;color:var(--brand-dark)}
.khyp-funnel__arrow{color:var(--muted);font-size:1.2rem}

/* Chart */
.khyp-chart{display:flex;align-items:flex-end;gap:10px;height:140px;padding-top:10px}
.khyp-chart__col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.khyp-chart__bar{width:70%;background:linear-gradient(var(--brand),var(--brand-dark));border-radius:6px 6px 0 0;min-height:4px}
.khyp-chart__lbl{font-size:.72rem;color:var(--muted);margin-top:6px}

/* Data-flow map */
.khyp-flowmap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0 20px}
.khyp-flowcol{display:flex;flex-direction:column;gap:10px}
.khyp-flowarrow{color:var(--muted);font-size:1.4rem}
.khyp-node{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--brand);
  border-radius:10px;padding:12px 16px;min-width:150px;color:var(--ink);box-shadow:var(--shadow)}
.khyp-node:hover{transform:translateY(-2px);text-decoration:none}
.khyp-node__t{font-weight:700}
.khyp-node__n{font-size:1.4rem;font-weight:700;color:var(--brand-dark)}
.khyp-node__s{font-size:.72rem;color:var(--muted)}
.khyp-node--src{border-left-color:var(--muted)}
.khyp-node--lead{border-left-color:var(--warn)}
.khyp-node--follow{border-left-color:var(--brand)}
.khyp-node--active{border-left-color:var(--ok)}
.khyp-node--sub{border-left-color:var(--accent)}
.khyp-node--old{border-left-color:var(--muted)}

/* Forms */
.khyp-input{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-family:inherit;
  font-size:.9rem;background:#fff;margin:4px 0}
.khyp-input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(91,110,225,.12)}
textarea.khyp-input{resize:vertical}
.khyp-formgrid{display:flex;flex-direction:column;gap:6px;max-width:520px}
.khyp-formgrid label{font-size:.85rem;color:var(--ink);font-weight:600}
.khyp-lbl{font-size:.85rem;font-weight:600;display:block;margin-top:4px}
.khyp-inline-form{display:inline-flex;gap:6px;align-items:center;margin:0}
.khyp-check{font-weight:500;font-size:.85rem}
.khyp-hint{font-size:.78rem;margin-top:6px}
.khyp-enquiry{max-width:560px}

/* Subnav */
.khyp-subnav{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.khyp-subnav a{font-size:.82rem;font-weight:600;color:var(--muted);padding:5px 12px;border-radius:20px;background:var(--bg)}
.khyp-subnav a.is-active{background:var(--brand);color:#fff}

/* Profile layout
   minmax(0,1fr) not 1fr: a bare 1fr column refuses to shrink below its widest
   content (a table, a long email address), which pushed the 320px side column
   off-screen and made the whole page scroll sideways. Stacking at 1100px rather
   than 840px because the fixed 240px sidebar is still eating space until 900px,
   so 901–1054px was the broken band. */
.khyp-profile{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px}
.khyp-profile > *{min-width:0}
@media(max-width:1100px){.khyp-profile{grid-template-columns:1fr}}
.khyp-dl{display:grid;grid-template-columns:1fr;gap:6px}
.khyp-dl dt{font-weight:600;font-size:.85rem}
.khyp-dl dd{margin:0 0 6px;color:var(--muted)}

/* Portal features */
.khyp-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.khyp-feature{display:flex;flex-direction:column;gap:4px;background:var(--bg);border-radius:10px;padding:14px;color:var(--ink);
  border:1px solid var(--line)}
.khyp-feature:hover{text-decoration:none;background:#EAF2F3}
.khyp-feature__t{font-weight:700}
.khyp-feature__d{font-size:.8rem;color:var(--muted)}
.khyp-feature--locked{opacity:.72;position:relative;cursor:help;background:repeating-linear-gradient(45deg,#f4f2fa,#f4f2fa 10px,#eee 10px,#eee 11px)}
.khyp-feature__lock{font-size:1.1rem}
.khyp-feature__cta{margin-top:6px;font-size:.75rem;font-weight:700;color:var(--accent)}
.khyp-upgrade{display:flex;justify-content:space-between;align-items:center;gap:14px;background:#E3EDEE;
  border:1px solid #f3c6da;border-radius:var(--radius);padding:14px 18px;margin-bottom:16px;flex-wrap:wrap}
.khyp-locked-page{text-align:center;padding:40px 20px}
.khyp-program{padding-left:0;list-style:none}
.khyp-program li{padding:10px 0;border-bottom:1px solid var(--line)}
.khyp-program__wk{display:inline-block;font-size:.7rem;font-weight:700;color:var(--brand-dark);background:#DCEAEB;
  border-radius:5px;padding:1px 7px;margin-right:8px}

/* Messages */
.khyp-thread{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.khyp-bubble{max-width:75%;padding:9px 13px;border-radius:12px;font-size:.9rem;position:relative}
.khyp-bubble--me{align-self:flex-end;background:var(--brand);color:#fff}
.khyp-bubble--them{align-self:flex-start;background:var(--bg)}
.khyp-bubble__who{display:block;font-size:.68rem;opacity:.7;font-weight:700}
.khyp-bubble__t{display:block;font-size:.66rem;opacity:.6;margin-top:3px}
.khyp-msgform{display:flex;gap:8px;align-items:flex-end}
.khyp-msgform .khyp-input{flex:1}

/* Auth */
.khyp-authbox{max-width:420px;margin:40px auto;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.khyp-persona{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.khyp-persona__card{text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:14px;cursor:pointer;display:flex;flex-direction:column;font-family:inherit}
.khyp-persona__card:hover{border-color:var(--brand);background:#EAF2F3}
.khyp-persona__card strong{font-size:.95rem}
.khyp-persona__card span{font-size:.8rem;color:var(--muted)}
.khyp-persona__card--pract{border-left:4px solid var(--brand)}

/* Public marketing */
.khyp-hero{text-align:center;padding:56px 20px 40px;max-width:720px;margin:0 auto}
.khyp-hero h1{font-size:2.3rem}
.khyp-hero p{font-size:1.1rem;color:var(--muted)}
.khyp-hero__cta{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.khyp-band{max-width:var(--maxw);margin:0 auto;padding:30px 22px}
.khyp-band--alt{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  max-width:none}
.khyp-band--alt>h2,.khyp-band--alt>.khyp-cardgrid{max-width:var(--maxw);margin-left:auto;margin-right:auto}
.khyp-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.khyp-steps>div{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.khyp-steps__n{display:inline-flex;width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;
  align-items:center;justify-content:center;font-weight:700;margin-bottom:8px}
.khyp-steps p{color:var(--muted);font-size:.9rem;margin:.3em 0 0}
.khyp-cardgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.khyp-servicecard{display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);color:var(--ink)}
.khyp-servicecard:hover{transform:translateY(-2px);text-decoration:none;border-color:var(--brand)}
.khyp-servicecard strong{font-size:1.05rem}
.khyp-servicecard span{font-size:.86rem;color:var(--muted)}
.khyp-servicecard__more{font-weight:600;color:var(--brand-dark)}
.khyp-prose{max-width:720px;margin:0 auto 8px}
.khyp-prose p{color:#33454A}
.khyp-lead{font-size:1.1rem;color:var(--muted)}

/* Flash */
.khyp-flash{padding:11px 16px;border-radius:10px;margin-bottom:16px;font-size:.9rem;font-weight:500}
.khyp-flash--ok{background:#DCEAEB;color:var(--ok);border:1px solid #B9E0CD}
.khyp-flash--err{background:#F7E0DD;color:var(--flag);border:1px solid #EEB9C1}

/* Utility */
.khyp-muted{color:var(--muted)}

/* Footer */
.khyp-foot{max-width:var(--maxw);margin:0 auto;padding:20px 22px;display:flex;justify-content:space-between;
  color:var(--muted);font-size:.8rem;border-top:1px solid var(--line)}
.khyp-foot__demo{background:#FFF4E0;color:#23444B;border-radius:5px;padding:1px 8px}

/* =========================================================================
   Back-office tools: tools nav cluster, Bug Tracker, QA Suite, Messages
   ========================================================================= */

/* Tools cluster — slim second strip under the CRM nav */
.khyp-tools{display:flex;gap:2px;flex-wrap:wrap;background:#EAF2F3;border-bottom:1px solid var(--line);
  padding:6px 22px}
.khyp-tools a{display:inline-flex;align-items:center;gap:4px;color:var(--brand-dark);font-weight:600;
  font-size:.82rem;padding:5px 12px;border-radius:7px}
.khyp-tools a:hover{background:#fff;text-decoration:none}
.khyp-tools a.is-active{background:var(--brand);color:#fff}
.khyp-tools a.is-active .khyp-badge{background:#fff;color:var(--brand)}

/* Severity + source tags */
.khyp-sev-critical{background:#F7E0DD;color:var(--flag)}
.khyp-sev-high{background:#FBE0D0;color:#C65A1E}
.khyp-sev-medium{background:#FBEECF;color:#2F5A63}
.khyp-sev-low{background:var(--bg);color:var(--muted)}
.khyp-src-auto{background:#DCEAEB;color:var(--brand-dark)}
.khyp-src-qa{background:#DCEAEB;color:var(--ok)}
.khyp-src-user{background:#E3EDEE;color:var(--accent)}

/* Filter + bulk bars */
.khyp-filterbar{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.khyp-filterbar label{font-size:.78rem;font-weight:600;color:var(--muted);display:flex;flex-direction:column;gap:2px}
.khyp-filterbar .khyp-input{width:auto;min-width:130px}
.khyp-bulkbar{display:flex;gap:8px;align-items:center;margin:0 0 12px;padding:0}
.khyp-bulkbar .khyp-input{width:auto}

/* Bug cards */
.khyp-bug{padding:14px 18px}
.khyp-bug__head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.khyp-bug__title{flex:1;min-width:200px}
.khyp-bug__meta{font-size:.76rem;width:100%}
.khyp-bug__body{margin-top:10px}
.khyp-bug__body summary{cursor:pointer;color:var(--brand-dark);font-size:.85rem;font-weight:600}
.khyp-pre{background:#1B2F35;color:#EDF3F3;padding:12px;border-radius:8px;font-size:.78rem;
  white-space:pre-wrap;word-break:break-word;overflow-x:auto;margin:8px 0}
/* B2-3: bug tracker table + detail + copy box */
.khyp-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.76rem}
.khyp-input--sm{padding:4px 8px;font-size:.82rem;width:auto;min-width:120px}
.khyp-bugtable td{vertical-align:middle}
.khyp-bugtable__act{white-space:nowrap;display:flex;gap:6px;align-items:center}
.khyp-bugdetail>td{background:var(--bg);padding:14px 16px}
.khyp-iconbtn{border:1px solid var(--line);background:var(--card);color:var(--muted);border-radius:7px;
  width:30px;height:30px;cursor:pointer;line-height:1;font-size:.9rem}
.khyp-iconbtn:hover{background:#F7E0DD;color:var(--flag);border-color:#EAB5AE}
.khyp-copybox{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.76rem;
  background:#F9FCFC;border:1px solid var(--line);border-radius:8px;padding:10px;resize:vertical;color:var(--ink)}
.khyp-bugdetail h4{margin:6px 0 4px;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}
/* B2-4b: package builder */
.khyp-pkgbuild__row{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;margin-bottom:12px}
.khyp-pkgbuild__row label{font-size:.78rem;font-weight:600;color:var(--muted);display:flex;flex-direction:column;gap:3px}
.khyp-pkgbuild__row .khyp-input{width:auto;min-width:120px}
.khyp-pkgbuild__calc{display:flex;flex-wrap:wrap;gap:18px;align-items:center;padding-top:10px;border-top:1px solid var(--line);font-size:.9rem}
.khyp-pkgbuild__calc strong{color:var(--brand-dark)}
.khyp-pkgbuild__total strong{font-size:1.15rem;color:var(--accent)}
.khyp-pkgbuild__total{margin-left:auto}

/* QA groups + result tags */
.khyp-qagroup{border-bottom:1px solid var(--line);padding:8px 0}
.khyp-qagroup summary{cursor:pointer;display:flex;justify-content:space-between;gap:10px}
.khyp-qa-pass{background:#DCEAEB;color:var(--ok)}
.khyp-qa-fail{background:#F7E0DD;color:var(--flag)}
.khyp-qa-warn{background:#FBEECF;color:#2F5A63}
/* B2-1: QA severity badges + remediation rows */
.khyp-sev--critical{background:#F7DDDA;color:#A3352B}
.khyp-sev--medium{background:#FBEECF;color:#2F5A63}
.khyp-sev--low{background:#E7EEF1;color:#3F6473}
.khyp-sevsummary{display:flex;flex-wrap:wrap;gap:10px}
.khyp-sevchip{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;border-radius:8px;padding:7px 12px;border:1px solid var(--line)}
.khyp-sevchip strong{font-size:1rem}
.khyp-sevchip.khyp-sev--critical{border-color:#EAB5AE}
.khyp-sevchip.khyp-sev--medium{border-color:#C3D5D8}
.khyp-sevchip.khyp-sev--low{border-color:#CDD9DE}
.khyp-sevchip.is-zero{opacity:.5}
.khyp-qaresults{list-style:none;margin:8px 0 0;padding:0}
.khyp-qarow{padding:9px 0;border-top:1px solid var(--line)}
.khyp-qarow:first-child{border-top:0}
.khyp-qarow__head{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.khyp-qarow__name{font-weight:600}
.khyp-qarow__label{font-size:.85rem;margin:3px 0 0 2px}
.khyp-qarow__remedy{font-size:.86rem;margin:5px 0 0;padding:7px 10px;background:var(--bg);border-left:3px solid var(--accent);border-radius:4px}
.khyp-qarow--pass{opacity:.72}
.khyp-ok{color:var(--ok);font-weight:700}
.khyp-bad{color:var(--flag);font-weight:700}

/* Messages layout */
.khyp-msglayout{display:grid;grid-template-columns:300px 1fr;gap:16px}
@media(max-width:760px){.khyp-msglayout{grid-template-columns:1fr}}
.khyp-threadlist .khyp-list a{display:flex;align-items:center;gap:6px;width:100%;color:var(--ink);padding:2px 0}
.khyp-threadlist .khyp-list a.is-active{color:var(--brand-dark);font-weight:700}
.khyp-threadview{min-height:300px}

/* Two-way email thread on the contact profile */
.khyp-thread{display:flex;flex-direction:column;gap:10px;margin:6px 0}
.khyp-msg{border:1px solid var(--line);border-radius:12px;padding:10px 12px;max-width:82%}
.khyp-msg--out{background:var(--sage-050);align-self:flex-end;border-color:var(--sage-100)}
.khyp-msg--in{background:var(--sand-050);align-self:flex-start}
.khyp-msg__head{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:.82rem;margin-bottom:4px}
.khyp-msg__body{white-space:pre-wrap;font-size:.9rem}
.khyp-tag--out{background:var(--sage-100);color:var(--brand-dark)}
.khyp-tag--in{background:var(--sand-300);color:var(--ink)}

/* =========================================================================
   PUBLIC MARKETING SITE — sophisticated, minimalist, slate-green + white.
   Scoped to body.ctx-public so the calm sage/sand app is untouched.
   ========================================================================= */
:root{
  --slate-900:#16343B; --slate-800:#23444B; --slate-700:#2B5159; --slate-600:#35646D;
  --cream:#F2F6F6; --warm-white:#F7FAFA; --gold:#95B2B7; --gold-soft:#C3D5D8;
}
body.ctx-public{background:var(--slate-800);color:var(--warm-white);font-family:var(--font)}
body.ctx-public h1,body.ctx-public h2,body.ctx-public h3,body.ctx-public .pub-serif{
  font-family:'Fraunces',Georgia,'Times New Roman',serif;font-weight:500;letter-spacing:-.01em;line-height:1.12}
body.ctx-public a{color:var(--warm-white)}

/* Public header — transparent over the slate, white text */
.ctx-public .khyp-top--public{background:var(--slate-900);border-bottom:1px solid rgba(255,255,255,.09);
  padding:16px 34px;position:sticky;top:0}
.ctx-public .khyp-brand{color:var(--warm-white);font-family:'Fraunces',serif;font-size:1.25rem;font-weight:500;letter-spacing:.01em}
.ctx-public .khyp-nav a{color:rgba(247,250,250,.82);font-weight:500;font-size:.92rem;padding:6px 12px;border-radius:0}
.ctx-public .khyp-nav a:hover{color:#fff;background:transparent;text-decoration:none}
.ctx-public .khyp-nav a.is-active{background:transparent;color:#fff;box-shadow:inset 0 -2px 0 var(--gold)}
.ctx-public .khyp-top__right .khyp-btn{background:var(--gold);color:var(--slate-900);border-radius:100px;padding:10px 22px;font-weight:600}
.ctx-public .khyp-top__right .khyp-btn:hover{background:var(--gold-soft)}
.ctx-public .khyp-main--public{max-width:none;margin:0;padding:0}

/* Section rhythm */
.pub-section{padding:88px 34px}
.pub-wrap{max-width:1080px;margin:0 auto}
.pub-narrow{max-width:760px;margin:0 auto}
.pub-alt{background:var(--slate-900)}
.pub-cream{background:var(--cream);color:var(--slate-900)}
.pub-cream h1,.pub-cream h2,.pub-cream h3{color:var(--slate-900)}
.pub-eyebrow{font-family:var(--font);text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;
  font-weight:600;color:var(--gold);margin-bottom:18px}
.pub-cream .pub-eyebrow{color:var(--slate-600)}
.pub-lead{font-size:1.15rem;line-height:1.7;color:rgba(247,250,250,.85);max-width:640px}
.pub-cream .pub-lead{color:#4C6A6F}

/* Hero */
.pub-hero{padding:120px 34px 104px;background:
  radial-gradient(120% 90% at 80% -10%, rgba(149,178,183,.16), transparent 55%),var(--slate-800)}
.pub-hero h1{font-size:clamp(2.6rem,5.5vw,4.3rem);margin:0 0 24px;max-width:14ch}
.pub-hero .pub-lead{font-size:1.28rem}
.pub-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.pub-btn{display:inline-block;background:var(--gold);color:var(--slate-900);border-radius:100px;
  padding:14px 30px;font-weight:600;font-size:.98rem;border:1px solid var(--gold)}
.pub-btn:hover{background:var(--gold-soft);text-decoration:none}
.pub-btn--ghost{background:transparent;color:var(--warm-white);border:1px solid rgba(247,250,250,.4)}
.pub-btn--ghost:hover{background:rgba(255,255,255,.06)}
.pub-cream .pub-btn--ghost{color:var(--slate-900);border-color:rgba(15,33,38,.3)}

/* Cards / grids */
.pub-grid{display:grid;gap:22px}
.pub-grid--3{grid-template-columns:repeat(3,1fr)}
.pub-grid--2{grid-template-columns:1fr 1fr}
@media(max-width:820px){.pub-grid--3,.pub-grid--2{grid-template-columns:1fr}}
.pub-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:16px;
  padding:30px 28px;transition:transform .12s,background .12s}
a.pub-card:hover{transform:translateY(-3px);background:rgba(255,255,255,.07);text-decoration:none}
.pub-cream .pub-card{background:#fff;border-color:#D7E3E4;box-shadow:0 1px 3px rgba(15,33,38,.06)}
.pub-card h3{font-size:1.35rem;margin:0 0 10px}
.pub-card p{margin:0;color:rgba(247,250,250,.78);font-size:.96rem;line-height:1.6}
.pub-cream .pub-card p{color:#46656B}
.pub-cream .pub-card .pub-quote{color:var(--warm-white)}  /* quote sits on a dark card */
.pub-card__more{display:inline-block;margin-top:16px;color:var(--gold);font-weight:600;font-size:.9rem}

/* Steps */
.pub-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:44px}
@media(max-width:820px){.pub-steps{grid-template-columns:1fr}}
.pub-step__n{font-family:'Fraunces',serif;font-size:2.4rem;color:var(--gold);display:block;margin-bottom:8px}
.pub-step h3{font-size:1.2rem;margin:0 0 8px}
.pub-step p{color:rgba(247,250,250,.78);line-height:1.6;margin:0}

/* Quote / personality band */
.pub-quote{font-family:'Fraunces',serif;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.4;max-width:16ch;margin:0 auto;text-align:center}
.pub-quote span{color:var(--gold)}

/* Footer */
.ctx-public .khyp-foot{background:var(--slate-900);color:rgba(247,250,250,.6);border-top:1px solid rgba(255,255,255,.08);
  padding:34px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;max-width:none}

/* Public overrides so Services / Service / Contact / Free-tools pages stay
   coherent on the slate-green site (they use the app's generic classes). */
.ctx-public .khyp-main--public{padding:0}
.ctx-public .khyp-back{display:block;max-width:1080px;margin:26px auto 0;padding:0 34px;color:var(--gold-soft);font-weight:600}
.ctx-public .khyp-lead{max-width:860px;margin:0 auto;padding:16px 34px 0;font-size:1.18rem;color:rgba(247,250,250,.85)}
.ctx-public .khyp-prose{max-width:820px;margin:0 auto;padding:24px 34px 56px;line-height:1.85;color:rgba(247,250,250,.9)}
.ctx-public .khyp-prose h1,.ctx-public .khyp-prose h2,.ctx-public .khyp-prose h3{font-family:'Fraunces',serif;color:#fff}
.ctx-public .khyp-cardgrid{max-width:1080px;margin:0 auto;padding:28px 34px 80px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.ctx-public .khyp-servicecard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:16px;padding:26px 24px;color:var(--warm-white);display:block;transition:transform .12s,background .12s}
.ctx-public .khyp-servicecard:hover{background:rgba(255,255,255,.08);transform:translateY(-3px);text-decoration:none}
.ctx-public .khyp-servicecard strong{font-family:'Fraunces',serif;font-size:1.28rem;display:block;margin-bottom:8px}
.ctx-public .khyp-servicecard span{color:rgba(247,250,250,.75);line-height:1.6}
.ctx-public .khyp-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  color:var(--warm-white);max-width:820px;margin:24px auto;box-shadow:none}
.ctx-public .khyp-muted{color:rgba(247,250,250,.62)}
.ctx-public form{max-width:820px;margin:0 auto;padding:8px 34px 60px}
.ctx-public .khyp-input{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);color:#fff;
  border-radius:10px;padding:12px 14px;width:100%;margin:8px 0;font-family:inherit}
.ctx-public .khyp-input::placeholder{color:rgba(247,250,250,.5)}
.ctx-public .khyp-btn{background:var(--gold);color:var(--slate-900);border-radius:100px;padding:13px 28px;font-weight:600}
.ctx-public .khyp-btn:hover{background:var(--gold-soft);color:var(--slate-900)}
.ctx-public .khyp-tag{background:rgba(255,255,255,.1);color:var(--warm-white)}
/* Page intro headings on content pages (not the hero) */
.ctx-public .khyp-pagehead{max-width:1080px;margin:0 auto;padding:48px 34px 0}
.ctx-public .khyp-pagehead h1{font-family:'Fraunces',serif;font-size:2.4rem}

/* =========================================================================
   PRACTITIONER — dark slate vertical sidebar + brand theme carried through.
   ========================================================================= */
.khyp-side{position:fixed;left:0;top:0;width:240px;height:100vh;overflow-y:auto;z-index:40;
  background:linear-gradient(180deg,var(--slate-900,#16343B),#102B32);color:#EDF4F4;
  display:flex;flex-direction:column;padding:22px 14px;border-right:1px solid rgba(255,255,255,.06)}
.khyp-side__brand{display:block;font-family:'Fraunces',Georgia,serif;font-size:1.2rem;font-weight:500;
  color:#fff;padding:6px 12px 4px;line-height:1.15}
.khyp-side__brand span{display:block;font-family:var(--font);font-size:.62rem;text-transform:uppercase;
  letter-spacing:.2em;color:var(--gold,#95B2B7);font-weight:600;margin-top:4px}
.khyp-side__nav{margin-top:22px;flex:1;display:flex;flex-direction:column;gap:2px}
.khyp-side__group{font-size:.64rem;text-transform:uppercase;letter-spacing:.18em;color:rgba(237,244,244,.4);
  font-weight:600;padding:14px 12px 6px}
.khyp-side__nav a{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 12px;border-radius:9px;color:rgba(237,244,244,.82);font-size:.92rem;font-weight:500;
  border-left:2px solid transparent}
.khyp-side__nav a:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.khyp-side__nav a.is-active{background:rgba(149,178,183,.14);color:#fff;border-left-color:var(--gold,#95B2B7)}
.khyp-side__badge{min-width:18px;height:18px;line-height:18px;text-align:center;font-size:.68rem;font-weight:700;
  background:var(--gold,#95B2B7);color:var(--slate-900,#16343B);border-radius:9px;padding:0 5px}
.khyp-side__foot{border-top:1px solid rgba(255,255,255,.08);padding-top:12px;margin-top:12px;display:flex;
  flex-direction:column;gap:2px}
.khyp-side__foot a{color:rgba(237,244,244,.6);font-size:.85rem;padding:6px 12px;border-radius:8px}
.khyp-side__foot a:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}

/* Shift the demo bar + main content clear of the fixed sidebar */
.ctx-practitioner .khyp-demobar{margin-left:240px}
.khyp-main--practitioner{margin-left:240px;max-width:none;padding:28px 40px 70px}

/* Carry the brand typography through the dashboard */
.ctx-practitioner h1{font-family:'Fraunces',Georgia,serif;font-weight:500}
.ctx-practitioner .khyp-card h2,.ctx-practitioner .khyp-pagehead h1{font-family:'Fraunces',Georgia,serif}

/* Mobile: sidebar becomes a scrollable top strip */
@media(max-width:900px){
  .khyp-side{position:static;width:auto;height:auto;flex-direction:column;padding:14px}
  .khyp-side__nav{flex-direction:row;flex-wrap:wrap;margin-top:12px}
  .khyp-side__group{width:100%;padding:8px 12px 2px}
  .ctx-practitioner .khyp-demobar{margin-left:0}
  .khyp-main--practitioner{margin-left:0;padding:20px 16px 50px}
}

/* =========================================================================
   BATCH 1 · Stage 1 — client tiers (B3), actions dropdown (B6), Inactive (B7)
   ========================================================================= */
.khyp-tier{display:inline-block;font-size:.7rem;font-weight:700;border-radius:6px;padding:2px 8px}
.khyp-tier--subscriber{background:var(--clay-050,#E3EDEE);color:var(--accent,#4E7F87)}
.khyp-tier--f2f{background:var(--sage-100,#DCEAEB);color:var(--brand-dark,#23444B)}

/* form buttons inside the actions dropdown (match the menu links) */
.khyp-actions__menu form{margin:0}
.khyp-actions__btn{display:block;width:100%;text-align:left;background:none;border:none;font-family:inherit;
  padding:8px 12px;border-radius:7px;color:var(--ink);font-size:.88rem;cursor:pointer}
.khyp-actions__btn:hover{background:var(--bg)}
.khyp-actions__btn--danger{color:var(--flag)}
.khyp-actions__btn--danger:hover{background:var(--red-050,#F7E0DD)}

/* =========================================================================
   BATCH 1 · Stage 2 — Calendar month/week grid + availability
   ========================================================================= */
.khyp-cal{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.khyp-cal__row{display:grid;grid-template-columns:repeat(7,1fr)}
.khyp-cal__row--head{background:var(--bg)}
.khyp-cal__dow{padding:6px 8px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);text-align:center;border-bottom:1px solid var(--line)}
.khyp-cal__cell{min-height:84px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:4px 5px;
  display:flex;flex-direction:column;gap:3px;background:var(--card)}
.khyp-cal__cell:nth-child(7n){border-right:none}
.khyp-cal__cell.is-out{background:var(--sand-050,#F7FAFA);color:var(--muted)}
.khyp-cal__cell.is-today{background:var(--sage-050,#EFF5F5)}
.khyp-cal__date{font-size:.74rem;font-weight:700;color:var(--muted)}
.khyp-cal__mon{color:var(--brand-dark)}
.khyp-cal__evt{display:block;font-size:.72rem;background:var(--brand);color:#fff;border-radius:5px;
  padding:2px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.khyp-cal__evt:hover{background:var(--brand-dark);text-decoration:none}
.khyp-cal__dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--warn);vertical-align:middle}
@media(max-width:760px){.khyp-cal__cell{min-height:60px}.khyp-cal__evt{font-size:.6rem}}

/* ---- Client self-booking (Stage 3) --------------------------------------- */
.khyp-btn--lg{padding:12px 22px;font-size:1rem;border-radius:11px}
.khyp-book-day h2{margin:0 0 12px}
.khyp-slots{display:flex;flex-wrap:wrap;gap:10px}
.khyp-slot{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:88px;
  background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  color:var(--brand-dark);font-weight:600;transition:.12s}
.khyp-slot:hover{background:var(--brand);color:#fff;border-color:var(--brand);text-decoration:none;transform:translateY(-1px)}
.khyp-slot__time{font-size:.95rem}
.khyp-slot__dur{font-size:.68rem;font-weight:500;opacity:.75}
.khyp-book-confirm{max-width:560px}
.khyp-book-summary{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--bg);border-radius:12px;padding:16px 18px;margin-bottom:16px}
.khyp-book-summary__date{display:block;font-weight:600;font-size:1.05rem}
.khyp-book-summary__time{display:block;color:var(--muted);font-size:.85rem}
.khyp-book-summary__price{text-align:right}
.khyp-book-summary__amt{display:block;font-family:var(--font-head,inherit);font-size:1.5rem;font-weight:600;color:var(--brand-dark)}
.khyp-book-note{margin:4px 0 14px}
.khyp-payopts{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.khyp-payopt{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;cursor:pointer}
.khyp-payopt:hover{border-color:var(--brand)}
.khyp-payopt input{margin:0}
.khyp-payopt__t{font-weight:600}
.khyp-payopt__amt{margin-left:auto;font-weight:600;color:var(--brand-dark)}
.khyp-book-back{display:inline-block;margin-left:14px;font-size:.85rem}
@media(max-width:760px){.khyp-slot{flex:1 0 28%;min-width:0}}

/* ---- Central Asset Library (Stage 4) ------------------------------------ */
.khyp-asset{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.khyp-asset__main{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.khyp-asset__actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.khyp-asset__actions audio{height:34px;max-width:220px}
.khyp-push{gap:8px;margin:4px 0 12px;padding:8px 10px;background:var(--bg);border-radius:9px;flex-wrap:wrap}
.khyp-tag--audio{background:#DCEAEB;color:var(--brand-dark)}
.khyp-tag--pdf{background:#F7E0DD;color:#A6473B}
.khyp-tag--doc{background:#e4ecf5;color:#3a5a80}
.khyp-tag--slides{background:#E6EFF0;color:#2B5159}
.khyp-tag--image{background:#efe9f5;color:#6a4d86}
.khyp-tag--file{background:var(--bg);color:var(--muted)}
.khyp-tag--aud{border:1px solid var(--line);background:#fff;color:var(--muted)}
.khyp-tag--aud-all_subscribers{background:#DCEAEB;color:var(--brand-dark);border-color:transparent}
.khyp-tag--aud-service_subscribers{background:#E3EDEE;color:var(--accent);border-color:transparent}

/* ---- Free Tools Funnel (Stage 5) ---------------------------------------- */
.khyp-servicecard--live{cursor:pointer}
.khyp-servicecard--live:hover .khyp-tag--accent{background:var(--accent);color:#fff}
/* Quiz */
.khyp-quiz{display:flex;flex-direction:column;gap:16px}
.khyp-quiz__q{border:0;border-top:1px solid var(--line);margin:0;padding:14px 0 0}
.khyp-quiz__q:first-of-type{border-top:0}
.khyp-quiz__q legend{font-weight:600;padding:0;margin-bottom:8px}
.khyp-quiz__opts{display:flex;flex-wrap:wrap;gap:8px}
.khyp-quiz__opt{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:9px;
  padding:8px 12px;font-size:.85rem;cursor:pointer}
.khyp-quiz__opt:hover{border-color:var(--brand)}
.khyp-quiz__opt input{margin:0}
/* Gate + result */
.khyp-gate{max-width:520px}
.khyp-result{max-width:560px;text-align:center}
.khyp-result__score{display:flex;flex-direction:column;align-items:center;margin-bottom:6px}
.khyp-result__n{font-family:var(--font-head,inherit);font-size:3rem;font-weight:600;color:var(--brand-dark);line-height:1}
.khyp-result__band{display:inline-block;font-weight:700;border-radius:9px;padding:4px 14px;margin-bottom:10px}
.khyp-result__band--minimal{background:#DCEAEB;color:var(--brand-dark)}
.khyp-result__band--mild{background:#EEF3E6;color:#5A6E2F}
.khyp-result__band--moderate{background:#E9F1F1;color:#2B5159}
.khyp-result__band--elevated{background:#F7E0DD;color:#A6473B}
/* Funnel bars */
.khyp-funnelbars{display:flex;flex-direction:column;gap:12px;margin:6px 0 4px}
.khyp-fbar__label{font-size:.88rem;margin-bottom:4px}
.khyp-fbar__track{background:var(--bg);border-radius:8px;overflow:hidden;height:30px}
.khyp-fbar__fill{background:var(--brand);color:#fff;height:100%;display:flex;align-items:center;justify-content:flex-end;
  padding-right:10px;font-size:.8rem;font-weight:600;min-width:34px;border-radius:8px;transition:width .3s}

/* ---- Stage 6: public consistency polish ---------------------------------- */
.pub-card--soon{opacity:.5}
.pub-card--soon .pub-card__more{color:rgba(247,250,250,.5)}
.pub-cream .pub-card--soon .pub-card__more{color:var(--slate-600)}
/* Enquiry form on the slate theme: labels must be light to read on the dark card. */
.ctx-public .khyp-formgrid label,
.ctx-public .khyp-enquiry label{color:var(--warm-white)}
.ctx-public .khyp-enquiry{max-width:640px}
.ctx-public .khyp-enquiry select.khyp-input option{color:var(--slate-900)}

/* ============================================================================
   V2C RESKIN — practitioner "Slate & Sand" design system (2026-08-01)
   Scoped to .ctx-practitioner so the public site + client portal are untouched.
   ==========================================================================*/
:root{ --gold-050:#E4EDEE; --gold-100:#CFDEE0; --sandc:#E7EFEF; --slate-950:#0F2126; }

body.ctx-practitioner{background:var(--sandc)}

/* Sidebar — deep slate gradient + gold inset active */
.ctx-practitioner .khyp-side{background:linear-gradient(180deg,var(--slate-900),var(--slate-950))}
.ctx-practitioner .khyp-side__brand span{color:var(--gold)}
.ctx-practitioner .khyp-side__nav a{border-radius:10px;margin:1px 10px;padding-left:14px;padding-right:14px}
.ctx-practitioner .khyp-side__nav a.is-active{background:rgba(149,178,183,.16);box-shadow:inset 3px 0 0 var(--gold);border-left-color:transparent}
.ctx-practitioner .khyp-side__badge{background:var(--gold);color:var(--slate-950)}

/* Demo bar — gold tint to match */
.ctx-practitioner .khyp-demobar{background:var(--gold-050);color:#23444B;border-bottom:1px solid var(--gold-soft)}
.ctx-practitioner .khyp-demobar__dot{background:var(--gold)}
.ctx-practitioner .khyp-demobar a{color:#23444B}

/* Module header (khyp-pagehead) — gold eyebrow + serif title + gold underline.
   Every practitioner module carries this signature (matches v2A-modules mock). */
.ctx-practitioner .khyp-pagehead{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:20px;position:relative;align-items:flex-end}
.ctx-practitioner .khyp-pagehead::after{content:"";position:absolute;left:0;bottom:-1px;width:56px;height:3px;background:var(--gold);border-radius:2px}
.ctx-practitioner .khyp-pagehead h1{font-size:1.7rem;margin:0}
/* Gold uppercase eyebrow — forced onto its own full-width row above the title,
   so it renders correctly whether the h1 is a direct child or wrapped in a div. */
.ctx-practitioner .khyp-pagehead__eyebrow{flex:0 0 100%;order:-1;font-size:.66rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:700;margin:0 0 5px}

/* Overview hero banner — scoped to practitioner context so it overrides the
   public-site .khyp-hero (line ~251: text-align:center; max-width:720px; margin:0 auto). */
.ctx-practitioner .khyp-hero{position:relative;overflow:hidden;border-radius:18px;color:#EEF4F4;
  text-align:left;max-width:none;margin:0 0 22px;padding:22px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  background:linear-gradient(100deg,var(--slate-900) 55%,var(--slate-700))}
.ctx-practitioner .khyp-hero::after{content:"";position:absolute;right:0;top:0;bottom:0;width:42%;background:linear-gradient(90deg,transparent,rgba(149,178,183,.16))}
.ctx-practitioner .khyp-hero__l{position:relative;z-index:2}
.ctx-practitioner .khyp-hero__eyebrow{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-soft);font-weight:600}
.ctx-practitioner .khyp-hero h1{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:1.95rem;margin:7px 0 5px;color:#fff}
.ctx-practitioner .khyp-hero p{margin:0;color:#B9CFD2;font-size:.92rem;max-width:560px}
.ctx-practitioner .khyp-hero__stats{display:flex;gap:22px;position:relative;z-index:2;flex-wrap:wrap;margin:0}
.ctx-practitioner .khyp-hero__stat{border-left:2px solid var(--gold);padding:2px 0 2px 13px;text-decoration:none;transition:transform .12s}
.ctx-practitioner a.khyp-hero__stat:hover{transform:translateY(-2px)}
.ctx-practitioner a.khyp-hero__stat:hover b{color:#fff}
.ctx-practitioner .khyp-hero__stat b{font-family:'Fraunces',Georgia,serif;font-size:1.55rem;color:var(--gold-soft);display:block;line-height:1}
.ctx-practitioner .khyp-hero__stat span{font-size:.7rem;color:#9FB7BB;display:block;margin-top:3px}

/* Tiles — smaller, coloured icon chip, serif value */
.ctx-practitioner .khyp-tiles{grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:12px}
.ctx-practitioner .khyp-tile{padding:13px 15px;border-radius:14px;border:1px solid var(--line);
  box-shadow:0 3px 12px rgba(15,33,38,.05);transition:transform .12s,box-shadow .12s}
.ctx-practitioner a.khyp-tile:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,33,38,.1)}
.ctx-practitioner .khyp-tile--accent,.ctx-practitioner .khyp-tile--warn,.ctx-practitioner .khyp-tile--flag,.ctx-practitioner .khyp-tile--ok{border-left:1px solid var(--line)}
.khyp-tile__ic{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  margin-bottom:9px;background:var(--sage-050);color:var(--brand)}
.khyp-tile__ic svg{width:15px;height:15px}
.ctx-practitioner .khyp-tile__val{font-family:'Fraunces',Georgia,serif;font-size:1.5rem;font-weight:600;letter-spacing:-.01em}
.ctx-practitioner .khyp-tile__label{font-size:.72rem}
.ctx-practitioner .khyp-tile__foot{color:var(--muted);font-weight:500}
.khyp-tile--accent .khyp-tile__ic{background:var(--gold-050);color:#35646D}
.khyp-tile--warn .khyp-tile__ic{background:var(--amber-050);color:var(--warn)}
.khyp-tile--warn .khyp-tile__val{color:var(--warn)}
.khyp-tile--flag .khyp-tile__ic{background:#F7E6E2;color:var(--flag)}
.khyp-tile--flag .khyp-tile__val{color:var(--flag)}
.khyp-tile--ok .khyp-tile__ic{background:var(--sage-100);color:var(--ok)}

/* Cards — softer, rounder */
.ctx-practitioner .khyp-card{border-radius:16px;box-shadow:0 3px 12px rgba(15,33,38,.05)}

/* Buttons — slate pill default, gold primary option */
.ctx-practitioner .khyp-btn{background:var(--slate-900);color:var(--gold-soft);border-radius:100px}
.ctx-practitioner .khyp-btn:hover{background:var(--slate-800);color:#fff}
.ctx-practitioner .khyp-btn--gold{background:var(--gold);color:var(--slate-900)}
.ctx-practitioner .khyp-btn--gold:hover{background:var(--gold-soft);color:var(--slate-900)}
.ctx-practitioner .khyp-btn--ghost{background:transparent;color:var(--brand-dark);border:1px solid var(--line)}
.ctx-practitioner .khyp-btn--ghost:hover{background:var(--sage-050);color:var(--brand-dark)}

/* Tables — sage row hover */
.ctx-practitioner .khyp-table tr:hover{background:var(--sage-050)}
.ctx-practitioner .khyp-table th{letter-spacing:.06em}

/* Eyebrow helper reused on cards */
.ctx-practitioner .khyp-eyebrow,.khyp-eyebrow{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:700}

/* ============================================================================
   v19 · BATCH 1 refinements (V2C design audit) — 2026-08-01
   ADDITIVE overrides only; no earlier rule edited. Scoped to .ctx-practitioner
   so the public site + client portal are untouched. Easy full rollback: delete
   this block (or re-upload the v18 khyp-site.css).
   Punch-list items covered: #1 (tile grid), #11 (referral tag), #13/#14 (charts).
   ==========================================================================*/

/* #1 — Even tile rows. The Overview renders 8 tiles; the old auto-fit grid broke
   them as 7 + 1 orphan. Top-level tile rows are now a fixed 4-up grid
   (Overview 8 -> 4x2; module pages 4 -> a single clean row, matching v2A).
   Tiles NESTED inside a card keep the flexible auto-fit so they never squash. */
.ctx-practitioner .khyp-tiles{grid-template-columns:repeat(4,1fr)}
.ctx-practitioner .khyp-card .khyp-tiles{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
@media(max-width:900px){.ctx-practitioner .khyp-tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.ctx-practitioner .khyp-tiles{grid-template-columns:1fr}}

/* #11 — Referral source tag -> gold, matching the v2A mock (was blue-green). */
.ctx-practitioner .khyp-tag--referral{background:var(--gold-050);color:#2B5159}

/* #13/#14 — Reports "Collected by month" chart: slim bars, rounded both ends;
   a --recent modifier paints the latest months gold (markup lands in a later
   batch; the rule ships now so that batch needs no CSS). */
.ctx-practitioner .khyp-chart{gap:14px}
.ctx-practitioner .khyp-chart__bar{width:100%;max-width:46px;margin:0 auto;
  border-radius:8px 8px 3px 3px}
.ctx-practitioner .khyp-chart__bar--recent{background:linear-gradient(var(--gold),var(--gold-soft))}

/* ============================================================================
   v20 · BATCH 2 — Overview matched to the v2C mock (compact hero, mock-sized
   6-up tiles, gold card eyebrows, boxed invoice figures, styled schedule).
   Additive only. Overview-specific tile width is scoped via `.khyp-hero ~`
   (the hero exists ONLY on the Overview) so module pages are untouched.
   ==========================================================================*/

/* Hero — compact + no-wrap so the two stats stay on the right instead of
   dropping to the bottom (that wrap is what made the live hero tall + empty). */
.ctx-practitioner .khyp-hero{flex-wrap:nowrap;gap:24px;padding:20px 26px;align-items:center;margin-bottom:20px}
.ctx-practitioner .khyp-hero__l{flex:1 1 auto;min-width:0}
.ctx-practitioner .khyp-hero h1{font-size:1.7rem;margin:6px 0 4px}
.ctx-practitioner .khyp-hero p{font-size:.88rem;max-width:560px}
.ctx-practitioner .khyp-hero__stats{flex:0 0 auto;gap:20px;flex-wrap:nowrap}
.ctx-practitioner .khyp-hero__stat{border-left:none;border-right:2px solid var(--gold);
  padding:0 14px 0 0;text-align:right}
.ctx-practitioner .khyp-hero__stat b{font-size:1.4rem}
@media(max-width:720px){
  .ctx-practitioner .khyp-hero{flex-wrap:wrap}
  .ctx-practitioner .khyp-hero__stats{flex-basis:100%}
  .ctx-practitioner .khyp-hero__stat{text-align:left;border-right:none;border-left:2px solid var(--gold);padding:0 0 0 13px}
}

/* Overview tiles — 6-up like the mock (page renders 6 tiles). Denser than the
   4-up default so each tile is the mock's size, not oversized. Scoped to the
   Overview via the hero-sibling selector; module pages keep the 4-up default. */
.ctx-practitioner .khyp-hero ~ .khyp-tiles{grid-template-columns:repeat(6,1fr);gap:12px}
.ctx-practitioner .khyp-hero ~ .khyp-tiles .khyp-tile{padding:14px}
@media(max-width:1200px){.ctx-practitioner .khyp-hero ~ .khyp-tiles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.ctx-practitioner .khyp-hero ~ .khyp-tiles{grid-template-columns:repeat(2,1fr)}}

/* Gold card eyebrow (mock: PIPELINE / INVOICING / THIS WEEK above the title) */
.ctx-practitioner .khyp-card__eyebrow{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);font-weight:700;display:block;margin-bottom:2px}

/* Invoicing "this month" -> three bordered boxes (mock) */
.ctx-practitioner .khyp-invboxes{display:flex;gap:10px;margin-top:2px}
.ctx-practitioner .khyp-invbox{flex:1;text-align:center;border:1px solid var(--line);border-radius:12px;padding:12px 6px}
.ctx-practitioner .khyp-invbox b{font-family:'Fraunces',Georgia,serif;font-size:1.25rem;display:block}
.ctx-practitioner .khyp-invbox span{font-size:.68rem;color:var(--muted)}
.ctx-practitioner .khyp-invbox--over b{color:var(--flag)}

/* Funnel -> mock's filled boxes, gold final step */
.ctx-practitioner .khyp-funnel__step{background:var(--sage-050);border-radius:12px;padding:14px 16px;min-width:0;flex:1}
.ctx-practitioner .khyp-funnel__step:last-of-type{background:var(--gold-050)}
.ctx-practitioner .khyp-funnel__n{font-family:'Fraunces',Georgia,serif;font-size:1.6rem;color:var(--slate-800)}

/* Schedule -> dated slate time-chips + right-side tag (mock "Upcoming schedule") */
.ctx-practitioner .khyp-sched{list-style:none;margin:0;padding:0}
.ctx-practitioner .khyp-sched li{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.ctx-practitioner .khyp-sched li:last-child{border-bottom:none}
.ctx-practitioner .khyp-sched__t{font-family:'Fraunces',Georgia,serif;font-size:.78rem;background:var(--slate-900);
  color:var(--gold-soft);border-radius:9px;padding:6px 8px;text-align:center;min-width:56px;line-height:1.15}
.ctx-practitioner .khyp-sched__t b{display:block;color:#fff;font-size:.95rem}
.ctx-practitioner .khyp-sched__n{font-weight:600;font-size:.9rem}
.ctx-practitioner .khyp-sched__n a{color:var(--ink)}
.ctx-practitioner .khyp-sched__n span{display:block;font-size:.74rem;color:var(--muted);font-weight:400}
.ctx-practitioner .khyp-sched__tag{margin-left:auto;font-size:.68rem;background:var(--gold-050);color:#2B5159;border-radius:20px;padding:2px 9px;font-weight:600}

/* ============================================================================
   v21 · BATCH 3 — module pages matched to the v2A mock. Module KPI tiles go
   icon-less (v2A) while the Overview keeps its coloured icon chips (it is the
   only page with a hero, so the hero-sibling selector cleanly separates them).
   ==========================================================================*/
.ctx-practitioner .khyp-tile__ic{display:none}
.ctx-practitioner .khyp-hero ~ .khyp-tiles .khyp-tile__ic{display:inline-flex}
/* Featured KPI on module pages -> gold top border (v2A `kpi--gold`); the
   Overview's accent tile keeps its gold chip and no top border. */
.ctx-practitioner .khyp-tile--accent{border-top:3px solid var(--gold)}
.ctx-practitioner .khyp-hero ~ .khyp-tiles .khyp-tile--accent{border-top:1px solid var(--line)}

/* ============================================================================
   v22 · per-page KPI-row column counts. khyp_head now adds a `page-<slug>` body
   class; use it so every page's top-level tile row forms even columns (the 4-up
   default orphaned pages with 3/5/6 tiles). Scoped to direct children of main so
   tiles nested inside cards keep their own flexible auto-fit.
   ==========================================================================*/
.ctx-practitioner.page-dashboard-master   .khyp-main > .khyp-tiles{grid-template-columns:repeat(6,1fr)}
.ctx-practitioner.page-dashboard-active    .khyp-main > .khyp-tiles{grid-template-columns:repeat(6,1fr)}
.ctx-practitioner.page-dashboard-qa        .khyp-main > .khyp-tiles{grid-template-columns:repeat(6,1fr)}
.ctx-practitioner.page-dashboard-bugs      .khyp-main > .khyp-tiles{grid-template-columns:repeat(5,1fr)}
.ctx-practitioner.page-dashboard-calendar  .khyp-main > .khyp-tiles{grid-template-columns:repeat(5,1fr)}
.ctx-practitioner.page-dashboard-messages  .khyp-main > .khyp-tiles{grid-template-columns:repeat(5,1fr)}
.ctx-practitioner.page-dashboard-inactive  .khyp-main > .khyp-tiles{grid-template-columns:repeat(3,1fr)}
.ctx-practitioner.page-dashboard-packages  .khyp-main > .khyp-tiles{grid-template-columns:repeat(3,1fr)}
.ctx-practitioner.page-dashboard-tasks     .khyp-main > .khyp-tiles{grid-template-columns:repeat(3,1fr)}
/* Responsive collapse for every page's KPI row (overrides the per-page counts). */
@media(max-width:1024px){.ctx-practitioner .khyp-main > .khyp-tiles{grid-template-columns:repeat(3,1fr)!important}}
@media(max-width:600px){ .ctx-practitioner .khyp-main > .khyp-tiles{grid-template-columns:repeat(2,1fr)!important}}

/* ============================================================================
   v23 · PUBLIC SITE reskinned to the v2C slate-sand language (dashboard-matched)
   for consistency. Slim two-tone hero instead of a full-screen banner, gold
   eyebrows, tighter vertical rhythm, and CTAs + services lifted above the fold.
   LAYOUT ONLY — no colour tokens changed.
   ==========================================================================*/
/* Tighter section rhythm (was 88px). */
.pub-section{padding:60px 34px}
/* Slim hero — was 120/104 padding + 4.3rem headline wrapping ~4 lines. */
.pub-hero{padding:60px 34px 52px}
.pub-hero h1{font-size:clamp(2.1rem,3.9vw,3.1rem);max-width:22ch;margin:0 0 16px}
.pub-hero .pub-lead{font-size:1.12rem;max-width:600px}
.pub-hero .pub-eyebrow{color:var(--gold-soft)}
.pub-cta{margin-top:24px}
/* Two CTAs in the header, above the fold on every page. */
.khyp-top--public .khyp-top__right{display:flex;gap:10px;align-items:center}
.ctx-public .khyp-top__right .khyp-btn--ghost{background:transparent;border:1px solid rgba(247,250,250,.4);color:var(--warm-white)}
.ctx-public .khyp-top__right .khyp-btn--ghost:hover{background:rgba(255,255,255,.08)}
@media(max-width:760px){.khyp-top--public .khyp-nav{display:none}}
/* Compact above-the-fold services strip (home). */
.pub-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
@media(max-width:820px){.pub-strip{grid-template-columns:1fr}}
.pub-chipcard{display:block;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:18px 20px;color:var(--warm-white);transition:transform .15s,background .15s}
.pub-chipcard:hover{background:rgba(255,255,255,.09);text-decoration:none;transform:translateY(-2px)}
.pub-chipcard h3{font-size:1.06rem;margin:0 0 6px}
.pub-chipcard p{margin:0;font-size:.9rem;color:rgba(247,250,250,.72);line-height:1.5}
.pub-chipcard__more{color:var(--gold);font-weight:600;font-size:.82rem;display:inline-block;margin-top:10px}

/* ============================================================================
   v24 · compact dashboard-style service tiles on the public site + single
   enquiry form (service dropdown + free-text). Home shows services ONCE as
   small tiles; the card-picker duplication on Contact is replaced by one form.
   ==========================================================================*/
.pub-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:14px}
@media(max-width:820px){.pub-tiles{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pub-tiles{grid-template-columns:1fr}}
.pub-tile{display:block;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:12px;padding:14px 16px;color:var(--warm-white);transition:transform .14s,background .14s}
.pub-tile:hover{background:rgba(255,255,255,.09);text-decoration:none;transform:translateY(-2px)}
.pub-tile h3{font-size:.98rem;margin:0 0 3px;font-family:var(--font);font-weight:600}
.pub-tile p{margin:0;font-size:.82rem;color:rgba(247,250,250,.66);line-height:1.4}
.pub-tile__more{color:var(--gold);font-weight:600;font-size:.76rem;display:inline-block;margin-top:8px}
/* single enquiry form */
.pub-form{max-width:620px;margin:0 auto}
.pub-form .khyp-input,.pub-form select.khyp-input,.pub-form textarea.khyp-input{width:100%}
.pub-form textarea.khyp-input{min-height:120px;resize:vertical;font-family:var(--font)}
.pub-form .khyp-btn{margin-top:4px}
.pub-sent{max-width:620px;margin:0 auto;text-align:center;background:#fff;border:1px solid #D7E3E4;
  border-radius:16px;padding:40px 30px;color:var(--slate-900)}
.pub-sent h2{font-family:'Fraunces',serif;font-weight:500;margin:0 0 10px}

/* v24 fix · the enquiry form sits on a light (cream) section, so its labels and
   inputs must use dark ink — otherwise they inherit the public dark-theme's
   warm-white text and vanish. */
.pub-form.khyp-card{background:#fff;border:1px solid #D7E3E4;color:var(--slate-900)}
.ctx-public .pub-form label{color:var(--slate-900);font-weight:600}
.pub-form .khyp-input,
.pub-form select.khyp-input,
.pub-form textarea.khyp-input{background:#fff;border:1px solid #BFD2D4;color:var(--slate-900)}
.pub-form .khyp-input::placeholder{color:#8DA3A7}
.pub-form .khyp-muted{color:#6C8085}

/* ============================================================================
   v26 · client SEARCH + per-client mini-dashboard (glance) — dashboard-search.php
   ==========================================================================*/
.khyp-toolrow{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:-8px 0 16px;flex-wrap:wrap}
.khyp-searchbar{display:flex;gap:8px;flex:1;min-width:260px;max-width:520px}
.khyp-searchbar .khyp-input{flex:1}
.khyp-searchbar--lg{max-width:none;margin:0 0 20px}
.khyp-glancehead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.khyp-glancehead h2{margin:6px 0 4px}
.khyp-glance{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;align-items:start}
@media(max-width:900px){.khyp-glance{grid-template-columns:1fr}}
.khyp-glance__main{display:flex;flex-direction:column;gap:16px}
.khyp-glance__notes{white-space:pre-line;line-height:1.6;color:var(--ink);background:var(--sand-card,#FAFDFD);
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:0 0 12px}
.khyp-glance__email{margin-top:12px}
/* email correspondence list */
.khyp-emaillist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;max-height:520px;overflow:auto}
.khyp-email{border:1px solid var(--line);border-radius:11px;padding:10px 12px;background:var(--card,#fff);border-left:3px solid var(--line)}
.khyp-email--in{border-left-color:var(--sage,#2F5A63)}
.khyp-email--out{border-left-color:var(--gold,#95B2B7)}
.khyp-email__head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.72rem;margin-bottom:3px}
.khyp-email__dir{font-weight:700;letter-spacing:.02em;color:var(--muted)}
.khyp-email--in .khyp-email__dir{color:var(--sage,#2F5A63)}
.khyp-email--out .khyp-email__dir{color:#35646D}
.khyp-email__subj{font-weight:600;font-size:.9rem;line-height:1.3}
.khyp-email__snip{font-size:.82rem;color:var(--muted);line-height:1.45;margin-top:2px}

/* ── Overflow safety net (v32) ───────────────────────────────────────────────
   Nothing in the practitioner UI may make the PAGE scroll sideways. Wide things
   scroll inside their own box instead. Long unbroken strings — email addresses,
   URLs, payment references — wrap rather than forcing the layout wider. */
.ctx-practitioner .khyp-main{max-width:100%;overflow-x:hidden}
.khyp-card{min-width:0}
.khyp-card .khyp-table{display:block;overflow-x:auto;width:100%}
.khyp-emaillist,.khyp-thread,.khyp-feed,.khyp-glance{min-width:0}
.khyp-email__subj,.khyp-email__head,.khyp-email__snip,
.khyp-feed li,.khyp-dl dd,.khyp-muted{overflow-wrap:anywhere}

/* ── Conversation: one line per message, click to open (v34) ─────────────────
   Replies quote the whole thread, so an untreated list grows without limit.
   Each message collapses to a single row; the quoted history folds separately. */
.khyp-emaillist{list-style:none;padding:0;margin:10px 0 0}
.khyp-emaillist > li{margin:0 0 6px}
details.khyp-email{border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden}
details.khyp-email[open]{background:#FAFDFD}
.khyp-email--in{border-left:3px solid var(--accent,#5A797E)}
.khyp-email--out{border-left:3px solid var(--line)}
.khyp-email__line{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:8px;
  padding:8px 12px;font-size:.88rem}
.khyp-email__line::-webkit-details-marker{display:none}
.khyp-email__line:hover{background:var(--bg)}
.khyp-email__dir{flex:0 0 auto;font-weight:600}
.khyp-email__subj{flex:0 0 auto;font-weight:600;white-space:nowrap;max-width:38%;
  overflow:hidden;text-overflow:ellipsis}
.khyp-email__snip{flex:1 1 auto;color:var(--muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0}
.khyp-email__when{flex:0 0 auto;color:var(--muted);font-size:.78rem;white-space:nowrap}
.khyp-email__body{padding:2px 12px 12px;font-size:.9rem;overflow-wrap:anywhere}
.khyp-email__quoted{margin:0 12px 12px;border-left:2px solid var(--line);padding-left:10px}
.khyp-email__quoted > summary{cursor:pointer;color:var(--muted);font-size:.8rem}
.khyp-email__quoted > div{color:var(--muted);font-size:.82rem;margin-top:6px;overflow-wrap:anywhere}
@media(max-width:700px){
  .khyp-email__line{flex-wrap:wrap}
  .khyp-email__subj{max-width:100%}
  .khyp-email__snip{flex-basis:100%}
}

/* ── Footer clears the fixed sidebar (v37) ──────────────────────────────────
   .khyp-foot is centred inside a 1100px column with no left offset, but on the
   practitioner side the 240px sidebar is position:fixed over the top of it — so
   the first ~90px of "© 2026 Key Hypnotherapy · Eugenie Pepper" was hidden
   underneath it, reading as "…rapy · Eugenie Pepper". Present on every
   practitioner page. Below 900px the sidebar goes static, so the offset is
   removed again there. */
.ctx-practitioner .khyp-foot{margin-left:240px;max-width:none;padding:20px 40px}
@media(max-width:900px){
  .ctx-practitioner .khyp-foot{margin-left:0;max-width:var(--maxw);padding:20px 22px}
}.ctx-practitioner .khyp-foot{margin-left:240px;max-width:none;padding:20px 40px}
@media(max-width:900px){
  .ctx-practitioner .khyp-foot{margin-left:0;max-width:var(--maxw);padding:20px 22px}
}

/* ---- Public site: links on light sections -------------------------------
   `body.ctx-public a{color:var(--warm-white)}` above paints every link on the
   public site near-white, which is right on the dark hero and invisible on the
   cream sections. Its specificity (0,1,2) beats a plain class, so anything
   light-on-light has to be corrected here rather than on the component.

   This is what made the booking calendar look broken: the time slots are links,
   so they were rendering white-on-cream. It affected every link inside a cream
   section, not just those. */
body.ctx-public .pub-cream a{color:var(--slate-700)}
body.ctx-public .pub-cream a:hover{color:var(--slate-900)}

/* The booking calendar itself: white cards, dark text, dark on hover. */
body.ctx-public .pub-cream .khyp-slot{
  background:#fff;border-color:#D7E3E4;color:var(--slate-900);
}
body.ctx-public .pub-cream .khyp-slot:hover{
  background:var(--slate-800);border-color:var(--slate-800);color:var(--warm-white);
}
body.ctx-public .pub-cream .khyp-book-day h2{color:var(--slate-900)}

/* Form fields and buttons inside a cream section keep their own colours —
   the anchor rule above must not bleed into them. */
body.ctx-public .pub-cream .pub-btn{color:var(--slate-900)}
body.ctx-public .pub-cream .pub-btn--ghost{color:var(--slate-900)}
body.ctx-public .pub-cream .khyp-btn{color:#fff}

/* ============================================================================
   v65 · HERO HEIGHT — halved on every public page.
   ----------------------------------------------------------------------------
   The hero was pushing the thing people came for (services, the calendar, the
   form) below the fold on a laptop. Nobody scrolls to find a booking button
   they did not know was there, so the banner is now an introduction rather than
   a screen of its own.

   WHY !important ON THE PADDING
   Four pages set their own hero padding as an inline style attribute, and an
   inline style beats any selector. Rather than ship four more files to change
   one number, this overrides them from here — so the hero is one size,
   controlled in one place, on every page including any added later.
   ==========================================================================*/
.pub-hero{padding:36px 34px 32px!important}
.pub-hero h1{font-size:clamp(1.8rem,3vw,2.55rem);margin:0 0 12px;max-width:24ch}
.pub-hero .pub-lead{font-size:1.04rem;line-height:1.6;max-width:600px}
.pub-hero .pub-eyebrow{margin-bottom:10px}
.pub-hero .pub-cta{margin-top:20px}

/* Sections tightened to match, so the page reads as one rhythm rather than a
   short hero followed by the old generous spacing. */
.pub-section{padding:52px 34px}

/* On a phone the hero is the whole first screen, so it gets tighter still. */
@media(max-width:600px){
  .pub-hero{padding:26px 22px 24px!important}
  .pub-hero h1{font-size:1.65rem}
  .pub-hero .pub-lead{font-size:.98rem}
  .pub-section{padding:38px 22px}
}

/* ============================================================================
   v93 · HERO — two columns, so the banner stops being a dead half-screen.

   The hero was one column of text with the whole right-hand side empty and the
   buttons sitting underneath, which made it tall for no reason and pushed the
   actual content below the fold on every page.

   Now the wording sits left and the actions sit right, vertically centred
   against it. Same information, roughly 40% less height, and the two buttons
   land in the place the eye goes after reading a headline instead of below it.

   CSS-ONLY ON PURPOSE. Every page builds its own hero markup, so doing this
   with a grid on the shared wrapper fixes all of them at once rather than one
   page at a time — and any page added later inherits it.
   ==========================================================================*/
@media(min-width:900px){
  .pub-hero .pub-wrap{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:60px;
    align-items:center;
  }
  /* The words stay in column one. */
  .pub-hero .pub-eyebrow,
  .pub-hero h1,
  .pub-hero .pub-lead{grid-column:1}

  /* The actions move to column two and span the full height, so they sit
     against the middle of the text rather than the top of it. */
  .pub-hero .pub-cta,
  .pub-hero__aside{
    grid-column:2;
    grid-row:1 / -1;
    align-self:center;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    margin:0;
    min-width:210px;
  }
  .pub-hero .pub-cta .pub-btn{text-align:center}

  /* A hero with no actions simply has no second column to fill. */
  .pub-hero h1{margin-bottom:14px}
  .pub-hero .pub-lead{margin-bottom:0}
  .pub-hero .pub-lead + .pub-lead{margin-top:12px}
}

/* The small panel of practicalities that can sit under the buttons — price,
   length, where, how to reach her. The things somebody weighs up in the second
   before they click, which were previously three scrolls away. */
.pub-hero__facts{border:1px solid rgba(247,250,250,.22);border-radius:14px;
  padding:14px 16px;font-size:.84rem;line-height:1.65;color:rgba(247,250,250,.82)}
.pub-hero__facts b{display:block;color:var(--warm-white);font-weight:600;font-size:.9rem;
  margin-bottom:4px}
.pub-hero__facts span{display:block}
.pub-hero__facts a{color:var(--gold);font-weight:600}
@media(max-width:899px){
  .pub-hero__aside{display:flex;flex-direction:column;gap:12px;margin-top:22px}
  .pub-hero__facts{margin-top:4px}
}

/* v98 — login + create-account box. The box is white (--card) but .ctx-public
   made its heading, labels and inputs white for the dark site: white on white.
   Scoped to .khyp-authbox so the dark-section inputs elsewhere are unchanged. */
body.ctx-public .khyp-authbox,
body.ctx-public .khyp-authbox h1,
body.ctx-public .khyp-authbox label{color:var(--ink)}
.ctx-public .khyp-authbox .khyp-muted{color:var(--muted)}
.ctx-public .khyp-authbox form{max-width:none;margin:0;padding:0}
.ctx-public .khyp-authbox label{display:block;font-weight:600;font-size:.9rem;margin:0 0 14px}
.ctx-public .khyp-authbox .khyp-input{background:#fff;border:1px solid #BFD2D4;color:var(--ink);margin:6px 0 0}
.ctx-public .khyp-authbox .khyp-input::placeholder{color:#8DA3A7}
.ctx-public .khyp-authbox .khyp-btn{width:100%;margin-top:6px}

/* v102 — add-a-lead panel, lead Actions menu headings, Google Ads source tag */
.khyp-addlead{padding:0}
.khyp-addlead>summary{cursor:pointer;padding:16px 22px;list-style:none}
.khyp-addlead>summary::-webkit-details-marker{display:none}
.khyp-addlead__form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;padding:4px 22px 22px}
.khyp-addlead__form label{font-size:.85rem;font-weight:600;color:var(--ink)}
.khyp-addlead__form .khyp-input{margin-top:4px}
.khyp-addlead__wide{grid-column:1/-1}
@media(max-width:700px){.khyp-addlead__form{grid-template-columns:1fr}}
.khyp-leadmenu{min-width:210px}
.khyp-leadmenu a,.khyp-leadmenu .khyp-actions__btn{padding:8px 12px;font-size:.88rem;line-height:1.3;border-radius:7px}
.khyp-leadmenu__h{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:8px 12px 2px}
.khyp-tag--google-ads{background:#e3ecfb;color:#2f5aa8}
.khyp-card .khyp-table:has(.khyp-actions.is-open){overflow:visible}   /* open menus were clipped by the table's scroll box */
.khyp-actions.is-up .khyp-actions__menu{top:auto;bottom:110%}   /* v102: set by khyp-app.js when there is no room below */

/* ---------------------------------------------------------------------------
   Deep Teal reskin — two readability corrections.
   Both fix pre-existing rules where `body.ctx-public a{color:var(--warm-white)}`
   overrode the intended dark label, leaving near-white text on a light button.
   --------------------------------------------------------------------------- */
body.ctx-public a.pub-btn:not(.pub-btn--ghost),
body.ctx-public .khyp-top__right .khyp-btn:not(.khyp-btn--ghost),
body.ctx-public .khyp-btn:not(.khyp-btn--ghost){color:var(--slate-900)}
body.ctx-public .khyp-demobar a{color:#23444B}