/* audit 10: fallback faces sized to the web fonts' measured widths (Inter 1.072x Arial, 1.076x Roboto; Inter 600
   1.011x Arial Bold; Be Vietnam Pro 700 1.056x Arial Bold, 1.127x Roboto Bold), so text wraps the same before and after
   the fonts arrive and nothing below it jumps. Android has no Arial, so its Roboto twins come next in each stack. */
/* size-adjust per weight, measured 2026-09-23 as Inter width / Arial width in Chrome (400 107.6, 500 108.6, 600 101.9,
   700 102.9): one face for 600 to 900 left bold text 1.8 percent narrow, enough to move a line break when Inter lands. */
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("ArialMT");font-weight:100 449;size-adjust:107.6%}
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("ArialMT");font-weight:450 549;size-adjust:108.6%}
@font-face{font-family:"Inter Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:550 649;size-adjust:101.9%}
@font-face{font-family:"Inter Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:650 900;size-adjust:102.9%}
@font-face{font-family:"Inter Fallback R";src:local("Roboto"),local("Roboto-Regular");font-weight:100 500;size-adjust:107.6%}
@font-face{font-family:"BVP Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:600 900;size-adjust:105.6%}
@font-face{font-family:"BVP Fallback R";src:local("Roboto Bold"),local("Roboto-Bold");font-weight:600 900;size-adjust:112.7%}
/* Dental Link design system. Quiet luxury concierge: warm ivory ground, midnight sections, gold hairlines.
   One file, every page. Extend here, never fork per page. No dashes anywhere in this file. */

/* ============================================================ tokens */
:root {
  --ink: #0B1F3A;
  --midnight: #071428;
  --midnight-2: #0C2244;
  --ivory: #F4F8FE;
  --bone: #E6F0FF;
  --paper: #FFFFFF;
  --gold: #155EDB;
  --gold-2: #8FC2FF;
  --gold-soft: rgba(21, 94, 219, .14);
  --teal: #17B3A6;
  --teal-2: #6FE0D2;
  --teal-deep: #0E8F85;
  --gold-text: #0F4DB8;   /* gold is 2.16 as text on ivory, this is 5.43 */
  --teal-text: #0B7A71;   /* teal-deep is 3.59 as a link on ivory, this is 4.70 */
  --slate: #2B3A4E;
  --muted: #5A6A80;
  --line: rgba(11, 31, 58, .10);
  --line-2: rgba(11, 31, 58, .18);
  --line-dark: rgba(255, 255, 255, .14);
  --danger: #C0392B;
  --danger-soft: #FCEDEB;
  --warn: #B45F06;
  --warn-soft: #FFF3E0;
  --ok: #136B46;
  --ok-soft: #E4F5EC;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 30px 70px rgba(4, 14, 32, .16);
  --radius: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --wrap: 1200px;
  --pad: 24px;
  --sans: Inter, "Inter Fallback", "Inter Fallback R", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Be Vietnam Pro", "BVP Fallback", "BVP Fallback R", Inter, "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ============================================================ base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ivory); color: var(--slate);
  font-family: var(--sans); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video, svg, canvas { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }

h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 600; text-wrap: balance; overflow-wrap: break-word; }
@media (max-width: 480px) { h1, h2, h3, h4 { hyphens: auto; } }
h1 { font-family: var(--display); font-weight: 700; font-size: clamp(40px, 5.2vw, 72px); line-height: 1.04; letter-spacing: -.025em; }
h2 { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -.025em; }
h3 { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.25; font-weight: 700; }
h4 { font-size: 16px; font-weight: 700; }
p { margin: 0 0 14px; max-width: 62ch; }
p:last-child { margin-bottom: 0; }
small { font-size: 13px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong, b { font-weight: 700; color: var(--ink); }

/* ============================================================ layout */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.wrap-sm { max-width: 860px; }
.wrap-xs { max-width: 640px; }
.section { padding: clamp(64px, 8vw, 112px) 0; position: relative; }
.section-sm { padding: clamp(44px, 5vw, 72px) 0; }
.section--bone { background: var(--bone); }
.section--paper { background: var(--paper); }
.section--dark { background: var(--midnight); color: #CBDAEE; }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #FFFFFF; }
.section--dark strong, .section--dark b { color: #FFFFFF; }

.grid { display: grid; gap: 24px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.stack { display: grid; gap: 16px; }
.stack-sm { display: grid; gap: 8px; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; }
.center { text-align: center; } .center p { margin-left: auto; margin-right: auto; }
.nowrap { white-space: nowrap; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
}

/* ============================================================ type helpers */
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 14px; display: block;
}
.section--dark .eyebrow { color: var(--gold-2); }
.eyebrow .n { font-family: var(--mono); margin-right: 10px; opacity: .85; }
.rule { width: 56px; height: 1px; background: var(--gold); border: 0; margin: 20px 0; }
.lede { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.5; color: var(--slate); }
.section--dark .lede { color: #CBDAEE; }
.muted { color: var(--muted); }
.section--dark .muted { color: #93A9C4; }
.fine { font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.mono { font-family: var(--mono); }
.num { font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.bracket { font-family: var(--mono); font-size: .82em; color: var(--warn); background: var(--warn-soft);
  padding: 1px 6px; border-radius: 4px; letter-spacing: .04em; }
.quote { font-family: var(--display); font-size: clamp(21px, 2.4vw, 30px); line-height: 1.3; color: var(--ink); }
.section--dark .quote { color: #FFFFFF; }

/* ============================================================ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 26px; border-radius: var(--radius-pill); border: 0;
  background: #155EDB; color: #FFFFFF; border: 1px solid #124FBA;
  font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), opacity .2s var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn--gold { background: #155EDB; color: #FFFFFF; border: 1px solid #124FBA; }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); box-shadow: none; }
.btn--ghost:hover { border-color: var(--ink); box-shadow: var(--shadow-sm); }
.section--dark .btn--ghost { color: #FFFFFF; border-color: var(--line-dark); }
.section--dark .btn--ghost:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, .06); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 14px; border-radius: 10px; box-shadow: none; }
.btn--danger { background: var(--danger); box-shadow: none; }
.btn--block { width: 100%; }
.link { color: var(--teal-deep); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(14, 143, 133, .3); }
.link:hover { border-bottom-color: var(--teal-deep); }
.section--dark .link { color: var(--teal-2); border-bottom-color: rgba(111, 224, 210, .35); }

/* ============================================================ cards */
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow); position: relative;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.card--flat { box-shadow: none; }
.card--hover:hover { transform: translateY(-4px); box-shadow: 0 28px 60px rgba(0, 0, 0, 0.12); }
.card--glass {
  background: linear-gradient(160deg, rgba(12, 34, 68, .88), rgba(7, 20, 40, .82));
  border: 1px solid var(--line-dark); color: #CBDAEE; box-shadow: var(--shadow-lg);
  backdrop-filter: blur(10px);
}
.card--glass h3, .card--glass h4, .card--glass strong, .card--glass b { color: #FFFFFF; }
.card--gold { border-color: rgba(21, 94, 219, .5); background: linear-gradient(180deg, #F5F9FF, var(--paper)); }
.card__label { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.card__body { color: var(--slate); font-size: 15px; }
.card--glass .card__body { color: #C9D9EC; }

/* ============================================================ pills, tags, badges */
.pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: var(--radius-pill);
  background: var(--paper); border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.section--dark .pill { background: rgba(255, 255, 255, .06); border-color: var(--line-dark); color: #EAF2FC; }
.pill--teal { background: rgba(23, 179, 166, .1); border-color: rgba(23, 179, 166, .3); color: var(--teal-deep); }
.pill--gold { background: var(--gold-soft); border-color: rgba(21, 94, 219, .4); color: #0F4DB8; }
.tag {
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10.5px;
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 5px;
  background: #EEF2F7; color: var(--slate); white-space: nowrap;
}
.tag--hot { background: #FDEBE8; color: #B3301F; }
.tag--warm { background: var(--warn-soft); color: #8F4A00; } /* 6.08:1 on warn-soft; --warn was 4.18 */
.tag--cool { background: #EAF1F8; color: #46617F; }
.tag--ok { background: var(--ok-soft); color: var(--ok); }
.tag--urgent { background: #B3301F; color: #FFFFFF; }
.tag--info { background: #E6EFFB; color: #0B4FA8; }

/* ============================================================ tables */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); padding: 12px 16px; border-bottom: 1px solid var(--line-2); white-space: nowrap;
  background: #F7FAFD; position: sticky; top: 0; z-index: 1;
}
td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.clickable { cursor: pointer; transition: background .15s var(--ease); }
tbody tr.clickable:hover { background: #F7FAFD; }
@media (max-width: 640px) {
  table.stacky thead { display: none; }
  table.stacky tr { display: block; border-bottom: 1px solid var(--line-2); padding: 8px 0; }
  table.stacky td { display: flex; justify-content: space-between; gap: 16px; border: 0; padding: 6px 16px; }
  table.stacky td::before { content: attr(data-label); font-weight: 700; color: var(--muted); font-size: 12px;
    text-transform: uppercase; letter-spacing: .06em; }
}

/* ============================================================ forms */
.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field > label { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.field .hint { font-size: 12.5px; color: var(--muted); }
.input, select.input, textarea.input {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 10px; background: var(--paper);
  border: 1px solid var(--line-2); font-size: 15px; transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
textarea.input { min-height: 100px; resize: vertical; }
.input:focus { outline: 0; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.064); }
.input--error { border-color: var(--danger); }
.choices { display: grid; gap: 10px; }
.choice {
  display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-radius: 14px;
  background: var(--paper); border: 1px solid var(--line-2); cursor: pointer; font-weight: 600; color: var(--ink);
  transition: border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
  min-height: 56px; text-align: left; width: 100%;
}
.choice:hover { border-color: var(--teal); transform: translateX(2px); }
.choice[aria-checked="true"], .choice.is-selected { border-color: var(--teal); background: rgba(23, 179, 166, .07);
  box-shadow: 0 0 0 1px var(--teal) inset; }
.choice .k { flex: none; width: 26px; height: 26px; border-radius: 8px; background: #EEF2F7; color: var(--muted);
  display: grid; place-items: center; font-size: 12px; font-weight: 700; font-family: var(--mono); }
.choice.is-selected .k { background: var(--teal); color: #FFFFFF; }
.errmsg { color: var(--danger); font-size: 13px; font-weight: 600; }

/* ============================================================ progress, steps */
.progress { height: 4px; background: var(--bone); border-radius: 999px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--teal-deep));
  border-radius: 999px; transition: width .4s var(--ease); }
.steps { display: grid; gap: 0; }
.step { display: grid; grid-template-columns: 34px 1fr; gap: 14px; position: relative; padding-bottom: 22px; }
.step:last-child { padding-bottom: 0; }
.step::before { content: ""; position: absolute; left: 16px; top: 34px; bottom: 0; width: 1px; background: var(--line-2); }
.step:last-child::before { display: none; }
.step .dot { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; font-size: 13px;
  font-weight: 700; font-family: var(--mono); background: var(--bone); color: var(--muted); border: 1px solid var(--line-2); }
.step.is-done .dot { background: var(--teal); color: var(--ink); border-color: var(--teal); }
.step.is-now .dot { background: var(--gold); color: #FFFFFF; border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.step .t { font-weight: 700; color: var(--ink); }
.step .d { font-size: 14px; color: var(--muted); }

/* ============================================================ diagram primitives */
.flow { display: grid; grid-template-columns: 1fr 44px 1fr 44px 1fr; align-items: stretch; }
.flow .node {
  border-radius: 16px; padding: 16px; background: var(--paper); border: 1px solid var(--line-2);
  display: flex; gap: 12px; align-items: center; box-shadow: var(--shadow-sm);
}
.section--dark .flow .node { background: var(--gold-soft); border-color: rgba(143, 194, 255, .5); }
.flow .node .n { flex: none; width: 34px; height: 34px; border-radius: 999px; background: var(--gold);
  color: #FFFFFF; font-weight: 700; display: grid; place-items: center; font-size: 14px; }
.flow .node b { display: block; color: var(--ink); font-size: 15.5px; line-height: 1.2; }
.section--dark .flow .node b { color: #FFFFFF; }
.flow .node small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.section--dark .flow .node small { color: #C9D9EC; }
.flow .conn { position: relative; display: flex; align-items: center; justify-content: center; }
.flow .conn::before { content: ""; height: 2px; width: 100%;
  background: linear-gradient(90deg, rgba(21, 94, 219, .25), var(--gold)); transform-origin: left center; }
.flow .conn::after { content: ""; position: absolute; right: 6px; width: 8px; height: 8px;
  border-top: 2px solid var(--gold); border-right: 2px solid var(--gold); transform: rotate(45deg); }
@media (max-width: 760px) {
  .flow { grid-template-columns: 1fr; gap: 6px; }
  .flow .conn { height: 24px; }
  .flow .conn::before { width: 2px; height: 100%; background: linear-gradient(180deg, rgba(21, 94, 219, .25), var(--gold)); }
  .flow .conn::after { right: auto; bottom: 2px; transform: rotate(135deg); }
}
.swimlane { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.swimlane .lrow { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.swimlane .lcell { background: var(--paper); padding: 14px 18px; font-size: 14.5px; }
.swimlane .lcell.you { background: #F7FAFD; }
.swimlane .lhead { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 640px) { .swimlane .lrow { grid-template-columns: 1fr; } }
.bars { display: grid; gap: 14px; }
.bar { display: grid; gap: 6px; }
.bar .lbl { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.bar .track { height: 14px; border-radius: 999px; background: var(--bone); overflow: hidden; }
.bar .fill { height: 100%; border-radius: 999px; width: 0; transition: width 1s var(--ease); }
.bar .fill--home { background: linear-gradient(90deg, #C97C6B, #A85846); }
.bar .fill--vn { background: linear-gradient(90deg, var(--teal-2), var(--teal-deep)); }

/* ============================================================ stats */
.stat { display: grid; gap: 4px; }
.stat .v { font-family: var(--display); font-size: clamp(30px, 3.4vw, 44px); font-weight: 600; color: var(--ink);
  line-height: 1; letter-spacing: -.02em; }
.section--dark .stat .v { color: #FFFFFF; }
.stat .k { font-size: 13px; color: var(--muted); }
.section--dark .stat .k { color: #93A9C4; }

/* ============================================================ app shell (team CRM) */
.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; background: var(--ivory); }
.app__side { background: var(--midnight); color: #CBDAEE; padding: 20px 14px; position: sticky; top: 0; height: 100vh;
  overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.app__brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; }
.app__brand b { color: #FFFFFF; font-size: 15px; }
.navlink { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; font-size: 14.5px;
  font-weight: 600; color: #A9BDD6; text-decoration: none; transition: background .15s var(--ease), color .15s var(--ease); }
.navlink:hover { background: rgba(255, 255, 255, .06); color: #FFFFFF; }
.navlink.is-active { background: rgba(23, 179, 166, .16); color: #FFFFFF; box-shadow: inset 2px 0 0 var(--teal-2); }
.navlink .c { margin-left: auto; font-family: var(--mono); font-size: 11.5px; background: rgba(255, 255, 255, .1);
  padding: 1px 7px; border-radius: 999px; }
.app__main { min-width: 0; padding: 26px clamp(16px, 3vw, 34px) 80px; }
.app__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 22px; }
.app__head h1 { font-size: clamp(24px, 2.4vw, 32px); }
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .app__side { position: fixed; inset: 0 auto 0 0; width: 232px; transform: translateX(-100%);
    transition: transform .25s var(--ease); z-index: 60; }
  .app.is-open .app__side { transform: none; }
  .app__main { padding-top: 68px; }
}
.appbar { display: none; position: fixed; inset: 0 0 auto 0; height: 56px; background: var(--midnight); color: #FFFFFF;
  align-items: center; gap: 12px; padding: 0 14px; z-index: 61; }
@media (max-width: 860px) { .appbar { display: flex; } }

/* ============================================================ misc */
.avatar { border-radius: 999px; object-fit: cover; background: var(--bone); }
.initials { display: grid; place-items: center; border-radius: 999px; background: linear-gradient(135deg, #DCEBFF, #9CC7FF);
  color: var(--ink); font-weight: 700; font-size: 12.5px; }
.divider { height: 1px; background: var(--line); border: 0; margin: 22px 0; }
.section--dark .divider { background: var(--line-dark); }
.empty { padding: 44px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--line-2);
  border-radius: var(--radius-sm); background: var(--paper); }
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(12px); opacity: 0;
  background: var(--ink); color: #FFFFFF; padding: 13px 20px; border-radius: 12px; font-size: 14.5px; font-weight: 600;
  box-shadow: var(--shadow-lg); z-index: 200; pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease); }
.toast.is-on { opacity: 1; transform: translateX(-50%); }
.modal { position: fixed; inset: 0; background: rgba(7, 20, 40, .5); display: grid; place-items: center; padding: 20px;
  z-index: 150; opacity: 0; pointer-events: none; transition: opacity .2s var(--ease); }
.modal.is-on { opacity: 1; pointer-events: auto; }
.modal__box { background: var(--paper); border-radius: var(--radius); padding: 26px; width: min(560px, 100%);
  max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-lg); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skel { background: linear-gradient(90deg, var(--bone), #F2F7FF, var(--bone)); background-size: 200% 100%;
  animation: skel 1.2s linear infinite; border-radius: 8px; min-height: 14px; }
@keyframes skel { to { background-position: -200% 0; } }

/* ============================================================ motion */
[data-reveal] { opacity: 1; transform: none; }
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ============================================================================
   .mk- block, appended by Agent D (discovery pages).
   Shared site chrome (nav, footer, sticky CTA, breadcrumbs) plus the editorial
   components the public marketing pages need. Prefix every class here with mk-
   so nothing collides with the core system above. No dashes in this file.
   ============================================================================ */

/* ---------------------------------------------------------------- nav */
.mk-skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #FFFFFF;
  padding: 12px 18px; border-radius: 0 0 10px 0; z-index: 300; font-weight: 700; }
.mk-skip:focus { left: 0; }

.mk-nav { position: sticky; top: 0; z-index: 90; background: rgba(244, 248, 254, .88);
  backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line); }
.mk-nav__in { display: flex; align-items: center; gap: 18px; min-height: 72px; }
.mk-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-weight: 700; color: var(--ink); font-size: 16px; letter-spacing: -.01em; flex: none; }
.mk-brand img { width: 34px; height: 34px; border-radius: 9px; }
.mk-nav__links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.mk-nav__links a { text-decoration: none; color: var(--slate); font-size: 14.5px; font-weight: 600;
  padding: 10px 12px; border-radius: 9px; min-height: 44px; display: inline-flex; align-items: center;
  transition: color .15s var(--ease), background .15s var(--ease); }
.mk-nav__links a:hover { color: var(--ink); background: rgba(11, 31, 58, .05); }
.mk-nav__links a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--gold); border-radius: 9px 9px 0 0; }
.mk-nav__cta { margin-left: 8px; }
.mk-burger { display: none; margin-left: auto; width: 46px; height: 46px; border-radius: 12px;
  border: 1px solid var(--line-2); background: var(--paper); align-items: center; justify-content: center;
  flex-direction: column; gap: 4px; cursor: pointer; }
.mk-burger i { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; }
.mk-nav__panel { display: none; border-top: 1px solid var(--line); background: var(--paper); }
.mk-nav.is-open .mk-nav__panel { display: block; }
.mk-nav__panel a { display: flex; align-items: center; min-height: 52px; text-decoration: none;
  color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--line); }
.mk-nav__panel a:last-child { border-bottom: 0; }
@media (max-width: 1040px) {
  .mk-nav__links { display: none; }
  .mk-burger { display: flex; }
}

/* ---------------------------------------------------------------- crumbs */
.mk-crumbs { font-size: 12.5px; color: var(--muted); padding: 16px 0 0; }
/* audit 10: the crumbs are filled in by site.js after first paint; hold their 50 px so nothing below jumps */
[data-crumbs]:empty { min-height: 50px; }
.mk-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mk-crumbs a { color: var(--muted); text-decoration: none; }
.mk-crumbs a:hover { color: var(--ink); }
.mk-crumbs .sep { opacity: .5; }
.mk-crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.section--dark .mk-crumbs, .mk-hero--dark .mk-crumbs { color: #93A9C4; }
.section--dark .mk-crumbs a, .mk-hero--dark .mk-crumbs a { color: #93A9C4; }
.section--dark .mk-crumbs a:hover, .mk-hero--dark .mk-crumbs a:hover { color: #FFFFFF; }
.section--dark .mk-crumbs [aria-current], .mk-hero--dark .mk-crumbs [aria-current] { color: #FFFFFF; }

/* ---------------------------------------------------------------- page hero */
.mk-hero { padding: clamp(30px, 4vw, 52px) 0 clamp(44px, 5vw, 72px); }
.mk-hero--dark { background: radial-gradient(1100px 560px at 14% -18%, #12325F 0%, var(--midnight) 62%); }
.mk-hero__grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (max-width: 940px) { .mk-hero__grid { grid-template-columns: 1fr; } }
.mk-hero h1 { max-width: 17ch; }
.mk-hero .lede { max-width: 54ch; margin-top: 18px; }

/* the answer box: the question is answered before the fold */
.mk-answer { border: 1px solid var(--line); background: var(--paper); border-radius: 14px;
  padding: 18px 22px; box-shadow: var(--shadow-sm); margin-top: 26px; }
.mk-answer .q { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); display: block; margin-bottom: 8px; }
.mk-answer p { font-size: 16.5px; color: var(--ink); max-width: 64ch; }
.section--dark .mk-answer, .mk-hero--dark .mk-answer { background: rgba(255, 255, 255, .06); box-shadow: none; }
.section--dark .mk-answer p, .mk-hero--dark .mk-answer p { color: #FFFFFF; }

.mk-ctarow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 26px; }
.mk-ctanote { font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.mk-hero--dark .mk-ctanote { color: #93A9C4; }

/* ---------------------------------------------------------------- media */
.mk-media { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--bone);
  box-shadow: var(--shadow); border: 1px solid var(--line); }
.mk-media img, .mk-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-media--tall { aspect-ratio: 4 / 5; }
.mk-media--wide { aspect-ratio: 16 / 10; }
.mk-media--sq { aspect-ratio: 1 / 1; }
.mk-media__cap { position: absolute; left: 14px; bottom: 14px; right: 14px; color: #FFFFFF; z-index: 2;
  font-size: 12.5px; font-weight: 600; text-shadow: 0 1px 10px rgba(4, 14, 32, .95), 0 0 2px rgba(4, 14, 32, .8);
  display: flex; align-items: center; gap: 8px; }
.mk-media__cap .n { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  background: rgba(4, 14, 32, .55); border: 1px solid rgba(255, 255, 255, .28); padding: 2px 7px; border-radius: 4px; }
.mk-media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 52%; pointer-events: none;
  z-index: 1; background: linear-gradient(180deg, rgba(4, 14, 32, 0), rgba(4, 14, 32, .82)); }
.mk-media--plain::after { display: none; }

/* ---------------------------------------------------------------- price cards */
.mk-price { display: grid; gap: 6px; padding: 20px; border-radius: var(--radius-sm); background: var(--paper);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.mk-price .k { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mk-price .v { font-family: var(--display); font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; color: var(--ink);
  line-height: 1.05; letter-spacing: -.02em; }
.mk-price .d { font-size: 13px; color: var(--muted); }
.mk-price--gold { border-color: rgba(21, 94, 219, .5); background: linear-gradient(180deg, #F5F9FF, var(--paper)); }
.mk-price--dark { background: rgba(255, 255, 255, .05); border-color: var(--line-dark); }
.mk-price--dark .v { color: #FFFFFF; }
.mk-price--dark .k, .mk-price--dark .d { color: #93A9C4; }

/* ---------------------------------------------------------------- compare bars */
.mk-vs { display: grid; gap: 18px; }
.mk-vsrow { display: grid; gap: 7px; }
.mk-vsrow .lbl { display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.section--dark .mk-vsrow .lbl { color: #FFFFFF; }
.mk-vsrow .track { height: 18px; border-radius: 999px; background: var(--bone); overflow: hidden; }
.section--dark .mk-vsrow .track { background: rgba(255, 255, 255, .1); }
.mk-vsrow .fill { height: 100%; width: 0; border-radius: 999px; transition: width 1.1s var(--ease); }
.mk-vsrow .fill.home { background: linear-gradient(90deg, #C97C6B, #A85846); }
.mk-vsrow .fill.vn { background: linear-gradient(90deg, var(--teal-2), var(--teal-deep)); }
.mk-vsrow .fill.mid { background: linear-gradient(90deg, var(--gold-2), var(--gold)); }
.mk-vsnote { font-size: 12.5px; color: var(--muted); }

/* ---------------------------------------------------------------- check list */
.mk-checks { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-sm); overflow: hidden; }
.mk-check { display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: start;
  background: var(--paper); padding: 16px 18px; }
.mk-check .ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: var(--ok-soft); color: var(--ok); font-weight: 700; font-size: 14px; }
.mk-check.is-out .ic { background: var(--danger-soft); color: var(--danger); }
.mk-check b { display: block; color: var(--ink); font-size: 15.5px; line-height: 1.3; }
.mk-check small { display: block; color: var(--muted); font-size: 13.5px; margin-top: 4px; }
.mk-check .ev { align-self: center; }
@media (max-width: 640px) {
  .mk-check { grid-template-columns: 26px 1fr; }
  .mk-check .ev { grid-column: 2; justify-self: start; }
}
.mk-groupbar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--midnight);
  color: #FFFFFF; }
.mk-groupbar .g { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--gold-2);
  border: 1px solid rgba(143, 194, 255, .45); border-radius: 5px; padding: 2px 8px; }
.mk-groupbar b { color: #FFFFFF; font-size: 15px; }

/* ---------------------------------------------------------------- faq */
.mk-faq { display: grid; gap: 0; border-top: 1px solid var(--line-2); }
.mk-faq details { border-bottom: 1px solid var(--line-2); }
.mk-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 18px;
  cursor: pointer; list-style: none; padding: 20px 0; font-weight: 700; color: var(--ink);
  font-size: clamp(16px, 1.4vw, 18px); min-height: 44px; }
.mk-faq summary::marker, .mk-faq summary::-webkit-details-marker { display: none; }
.mk-faq summary::after { content: "+"; font-family: var(--mono); font-size: 22px; color: var(--gold); flex: none;
  transition: transform .2s var(--ease); line-height: 1; }
.mk-faq details[open] summary::after { transform: rotate(45deg); }
.mk-faq .a { padding: 0 0 22px; max-width: 72ch; }
.mk-faq .a p { font-size: 15.5px; }
.section--dark .mk-faq { border-color: var(--line-dark); }
.section--dark .mk-faq details { border-color: var(--line-dark); }
.section--dark .mk-faq summary { color: #FFFFFF; }

/* ---------------------------------------------------------------- link cards */
.mk-links { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .mk-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mk-links { grid-template-columns: 1fr; } }
.mk-link { display: block; text-decoration: none; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 18px 20px; box-shadow: var(--shadow-sm); min-height: 44px;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); }
.mk-link:hover { transform: translateY(-3px); box-shadow: 0 22px 44px rgba(0, 0, 0, 0.1); border-color: var(--line-2); }
.mk-link .t { font-weight: 700; color: var(--ink); font-size: 16px; display: flex; align-items: center; gap: 8px; }
.mk-link .t::after { content: "\2192"; color: var(--gold); font-weight: 400; }
.mk-link .d { font-size: 13.5px; color: var(--muted); margin-top: 5px; }
.section--dark .mk-link { background: rgba(255, 255, 255, .05); border-color: var(--line-dark); box-shadow: none; }
.section--dark .mk-link .t { color: #FFFFFF; }
.section--dark .mk-link .d { color: #93A9C4; }

/* ---------------------------------------------------------------- promise strip */
.mk-promises { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; font-size: 13.5px;
  font-weight: 600; color: var(--ink); }
.mk-promises span { display: inline-flex; align-items: center; gap: 8px; }
.mk-promises span::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--gold); flex: none; }
.section--dark .mk-promises, .mk-foot .mk-promises { color: #EAF2FC; }

/* ---------------------------------------------------------------- end cta */
.mk-cta { background: radial-gradient(900px 460px at 20% -30%, #12325F 0%, var(--midnight) 64%); color: #CBDAEE; }
.mk-cta h2 { color: #FFFFFF; max-width: 20ch; }
.mk-cta__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (max-width: 900px) { .mk-cta__grid { grid-template-columns: 1fr; } }
.mk-team { display: flex; align-items: center; gap: 12px; }
.mk-team img { width: 52px; height: 52px; border-radius: 999px; object-fit: cover; border: 2px solid rgba(143, 194, 255, .5); }
.mk-team b { color: #FFFFFF; display: block; font-size: 14.5px; }
.mk-team small { color: #93A9C4; font-size: 12.5px; }

/* ---------------------------------------------------------------- footer */
.mk-foot { background: var(--midnight); color: #A9BDD6; padding: clamp(48px, 5vw, 72px) 0 32px; }
.mk-foot h4 { color: #FFFFFF; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; }
.mk-foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 860px) { .mk-foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .mk-foot__grid { grid-template-columns: 1fr; } }
.mk-foot a { color: #A9BDD6; text-decoration: none; display: inline-flex; align-items: center; min-height: 34px; font-size: 14px; }
.mk-foot a:hover { color: #FFFFFF; }
.mk-foot__links { display: grid; }
.mk-foot__base { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  border-top: 1px solid var(--line-dark); margin-top: 34px; padding-top: 20px; font-size: 12.5px; color: #7E93AE; }

/* ---------------------------------------------------------------- sticky cta */
.mk-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: none; gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(244, 248, 254, .95);
  backdrop-filter: blur(12px); border-top: 1px solid var(--line-2); }
.mk-sticky .btn { flex: 1; min-height: 50px; font-size: 15px; box-shadow: none; }
.mk-sticky .mk-wa { flex: 0 0 54px; padding: 0; }
@media (max-width: 760px) { .mk-sticky { display: flex; } body { padding-bottom: 76px; } }

/* ---------------------------------------------------------------- misc editorial */
.mk-kicker { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mk-note { font-size: 12.5px; line-height: 1.6; color: var(--muted); max-width: 78ch; }
.section--dark .mk-note { color: #93A9C4; }
.mk-ol { counter-reset: mk; display: grid; gap: 14px; }
.mk-ol li { counter-increment: mk; position: relative; padding-left: 44px; }
.mk-ol li::before { content: counter(mk, decimal-leading-zero); position: absolute; left: 0; top: 0;
  font-family: var(--mono); font-size: 12px; line-height: 2.1; color: var(--gold); font-weight: 700; }
.mk-ul { display: grid; gap: 11px; }
.mk-ul li { position: relative; padding-left: 32px; font-size: 15.5px; }
.mk-ul li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--teal-deep); font-weight: 700; }
.section--dark .mk-ul li::before { color: var(--teal-2); }
.mk-ul--x li::before { content: "\2715"; color: #A85846; }
.mk-toc { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); padding: 18px 20px; }
.mk-toc h4 { margin-bottom: 10px; color: var(--muted); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }
.mk-toc a { display: flex; align-items: center; min-height: 40px; text-decoration: none; color: var(--ink);
  font-weight: 600; font-size: 14.5px; border-bottom: 1px solid var(--line); }
.mk-toc a:last-child { border-bottom: 0; }
.mk-toc a:hover { color: var(--teal-deep); }
.mk-guide { display: grid; grid-template-columns: 260px 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.mk-guide__side { position: sticky; top: 96px; }
@media (max-width: 900px) { .mk-guide { grid-template-columns: 1fr; } .mk-guide__side { position: static; } }
.mk-prose h3 { margin-top: 34px; margin-bottom: 10px; scroll-margin-top: 96px; }
.mk-prose h3:first-child { margin-top: 0; }
.mk-prose p { font-size: 16.5px; }
.mk-quotecard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow-sm); display: grid; gap: 14px; }
.mk-stars { color: var(--gold); letter-spacing: 2px; font-size: 15px; }
.mk-who { display: flex; align-items: center; gap: 11px; }
.mk-who .initials { width: 40px; height: 40px; flex: none; }
.mk-who b { display: block; color: var(--ink); font-size: 14.5px; }
.mk-who small { color: var(--muted); font-size: 12.5px; }
.mk-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.mk-scroll > * { scroll-snap-align: start; }
@media (min-width: 900px) { .mk-scroll { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; } }
.mk-figrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .mk-figrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mk-statrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 860px) { .mk-statrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mk-tablenote { font-size: 12.5px; color: var(--muted); margin-top: 12px; }
.mk-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
  background: var(--gold-soft); border: 1px solid rgba(21, 94, 219, .4); color: #0F4DB8;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; }

/* ---------------------------------------------------------------- calculator */
.mk-calc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 40px); align-items: start; }
@media (max-width: 940px) { .mk-calc { grid-template-columns: 1fr; } }
.mk-calc__out { position: sticky; top: 96px; display: grid; gap: 20px; }
@media (max-width: 940px) { .mk-calc__out { position: static; } }
.mk-step { border-top: 1px solid var(--line); padding: 20px 0; }
.mk-step:first-of-type { border-top: 0; padding-top: 0; }
.mk-step__h { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.mk-step__n { width: 26px; height: 26px; border-radius: 999px; background: var(--gold-soft); color: #0F4DB8;
  font-family: var(--mono); font-size: 12px; font-weight: 700; display: grid; place-items: center; flex: none; }
.mk-step__h h3 { font-size: 16.5px; }
.mk-opts { display: flex; flex-wrap: wrap; gap: 9px; }
.mk-opt { position: relative; }
.mk-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.mk-opt span { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px;
  border-radius: 999px; border: 1px solid var(--line-2); background: var(--paper); font-weight: 600;
  font-size: 14px; color: var(--ink); cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease); }
.mk-opt input:checked + span { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.mk-opt input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }
.mk-money { position: relative; max-width: 320px; }
.mk-money .cur { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); font-weight: 700;
  color: var(--muted); font-size: 15px; pointer-events: none; }
.mk-money input { padding-left: 44px; }
.mk-big { font-family: var(--display); font-weight: 600; font-size: clamp(30px, 5vw, 46px); line-height: 1.03;
  letter-spacing: -.02em; color: var(--ink); }
.mk-rows { display: grid; }
.mk-rows .r { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0;
  border-bottom: 1px solid var(--line); font-size: 14.5px; }
.mk-rows .r:last-child { border-bottom: 0; }
.mk-rows .r b { color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.mk-buys { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .mk-buys { grid-template-columns: 1fr; } }
.mk-buy { display: flex; gap: 11px; align-items: flex-start; padding: 13px 14px; border-radius: 12px; background: var(--bone); }
.mk-buy .t { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.mk-buy .d { font-size: 12.5px; color: var(--muted); }

/* ---------------------------------------------------------------- 404 */
.mk-404 { min-height: 62vh; display: grid; place-items: center; text-align: center; }
.mk-404 .code { font-family: var(--mono); font-size: 13px; letter-spacing: .3em; color: var(--gold); }

/* ==================================================================================================
   AGENT B, patient side. Appended block. Prefixes: .q- quiz, .bk- booking, .pt- portal.
   Nothing above this line is modified. No dashes anywhere.
   ================================================================================================== */

/* ------------------------------------------------------------------ quiz */
.q-page { background: var(--ivory); min-height: 100vh; }
/* Every tap target on the patient side is 44px or taller, so the shared small button is lifted on these pages
   only. Other agents' pages keep the 40px .btn--sm. */
.q-page .btn--sm, .bk-page .btn--sm, .pt-page .btn--sm { min-height: 44px; padding: 0 18px; }
.q-top {
  position: fixed; inset: 0 0 auto 0; z-index: 40; background: rgba(244, 248, 254, .94);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.q-top__in { display: flex; align-items: center; gap: 14px; min-height: 58px; }
.q-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 700;
  color: var(--ink); font-size: 15px; flex: none; min-height: 44px; }
.q-brand img { width: 28px; height: 28px; border-radius: 8px; }
.q-top__count { margin-left: auto; font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  color: var(--muted); text-transform: uppercase; white-space: nowrap; }
.q-top__save { font-size: 12px; color: var(--muted); display: none; }
@media (min-width: 720px) { .q-top__save { display: inline; } }
.q-prog { height: 3px; background: var(--bone); }
.q-prog > i { display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--gold-2), var(--teal)); transition: width .45s var(--ease); }

.q-main { padding: 92px 0 120px; }
@media (min-width: 1040px) {
  .q-main { min-height: 100vh; display: flex; align-items: safe center; padding: 110px 0 90px; }
  .q-main > .wrap { width: 100%; }
}
.q-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
@media (min-width: 1040px) { .q-grid { grid-template-columns: minmax(0, 1fr) 316px; gap: 56px; } }

.q-card { animation: qIn .45s var(--ease) both; }
@keyframes qIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.q-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.q-eyebrow::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, rgba(21, 94, 219, .45), transparent); }
.q-q { font-family: var(--display); font-weight: 700; font-size: clamp(27px, 3.6vw, 42px); line-height: 1.1; letter-spacing: -.025em;
  color: var(--ink); margin: 0; max-width: 20ch; }
/* The heading takes focus on every step so a screen reader reads the new question. A ring on a heading only
   confuses sighted users, so it is suppressed here and nowhere else. */
.q-q:focus, .q-q:focus-visible, .q-res h1:focus, .q-res h1:focus-visible { outline: none; }
.q-help { font-size: 15px; color: var(--muted); margin: 12px 0 0; max-width: 52ch; }
.q-choices { display: grid; gap: 10px; margin-top: 26px; max-width: 620px; }
.q-choices .choice { font-size: 16px; }
.q-choices .choice .lbl { flex: 1; min-width: 0; }
.q-choices .choice .sub { display: block; font-weight: 500; font-size: 13px; color: var(--muted); margin-top: 2px; }
.q-choices .choice.is-selected .sub { color: var(--teal-deep); }
.q-form { margin-top: 26px; max-width: 620px; }
.q-2col { display: grid; gap: 0 16px; }
@media (min-width: 620px) { .q-2col { grid-template-columns: 1fr 1fr; } }
.q-money { display: grid; grid-template-columns: 1fr 118px; gap: 10px; }
.q-nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.q-back { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 4px; background: none;
  border: 0; color: var(--muted); font-size: 14.5px; font-weight: 600; cursor: pointer; text-decoration: none; }
.q-back:hover { color: var(--ink); }
.q-skip { margin-left: auto; }
.q-kbd { margin-top: 18px; font-size: 12.5px; color: var(--muted); display: none; }
.q-kbd kbd { font-family: var(--mono); font-size: 12px; background: var(--paper); border: 1px solid var(--line-2);
  border-bottom-width: 2px; border-radius: 5px; padding: 2px 6px; color: var(--slate); }
@media (min-width: 900px) and (pointer: fine) { .q-kbd { display: block; } }

.q-side { display: none; }
/* The reassurance rail belongs to the questions. The result screen has its own two column layout. */
.q-page.q-done .q-side { display: none; }
@media (min-width: 1040px) { .q-page.q-done .q-grid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1040px) { .q-side { display: block; position: sticky; top: 96px; } }
.q-side__card { padding: 22px; }
.q-side__who { display: flex; align-items: center; gap: 12px; }
.q-side__who img { width: 52px; height: 52px; flex: none; }
.q-side__name { font-weight: 700; color: var(--ink); font-size: 15px; line-height: 1.2; }
.q-side__role { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold); margin-top: 3px; }
/* The quiz sidebar carries the founder first, then both Patient Link Advisors on ONE line under a
   single role label, rather than repeating the same job title down the card. */
.q-advisors { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--line); }
.q-advisors__head { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--gold); }
.q-advisors__row { display: flex; flex-wrap: wrap; gap: 9px 18px; align-items: center; }
.q-who { display: inline-flex; align-items: center; gap: 8px; }
.q-who img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none;
  border: 2px solid rgba(21, 94, 219, .45); }
.q-who b { font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.q-advisors__does { margin: 11px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--slate); }
.q-promise { display: grid; gap: 9px; margin: 0; }
.q-promise li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; font-weight: 600; color: var(--slate); }
.q-promise svg { flex: none; margin-top: 3px; }

.q-drop { display: block; border: 1px dashed var(--line-2); border-radius: 14px; background: var(--paper);
  padding: 20px; text-align: center; cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease); }
.q-drop:hover, .q-drop.is-over { border-color: var(--teal); background: rgba(23, 179, 166, .05); }
.q-drop b { display: block; color: var(--ink); font-size: 14.5px; }
.q-drop span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.q-file { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px;
  background: var(--ok-soft); border: 1px solid rgba(26, 127, 85, .25); font-size: 14px; font-weight: 600; color: var(--ok); }
.q-file button { margin-left: auto; background: none; border: 0; color: var(--muted); cursor: pointer;
  font-size: 13px; font-weight: 700; min-height: 44px; padding: 0 6px; }
.q-consent { display: flex; gap: 11px; align-items: flex-start; font-size: 13px; color: var(--muted); line-height: 1.5; }
.q-consent input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--teal-deep); }

.q-load { display: grid; gap: 16px; place-items: center; padding: 60px 0; text-align: center; }
.q-spin { width: 38px; height: 38px; border-radius: 999px; border: 3px solid var(--bone);
  border-top-color: var(--teal); animation: qSpin .9s linear infinite; }
@keyframes qSpin { to { transform: rotate(360deg); } }

.q-res { animation: qIn .5s var(--ease) both; }
.q-res__tier { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px; border-radius: var(--radius-pill);
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em; }
.q-res__grid { display: grid; gap: 20px; margin-top: 26px; }
@media (min-width: 900px) { .q-res__grid { grid-template-columns: 1.25fr .75fr; align-items: start; } }
/* The team, on the result screen. Three faces, one line, one promise. */
.q-team { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; background: var(--card); }
.q-team__faces { display: flex; flex-wrap: wrap; gap: 14px 26px; }
.q-team__p { display: flex; align-items: center; gap: 10px; }
.q-team__p img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(21, 94, 219, .55); flex: none; }
.q-team__p b { display: block; font-size: 14px; color: var(--ink); line-height: 1.2; }
.q-team__p span { display: block; font-size: 11.5px; color: var(--muted); letter-spacing: .02em; }
.q-team__line { display: flex; gap: 9px; align-items: flex-start; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 14.5px; color: var(--slate); }
.q-team__line svg { flex: none; margin-top: 3px; }
.q-team__line b { color: var(--ink); }

/* The portal strip. It used to be a dashed grey box with a ghost button, which is a way of saying "skip
   this". It is the single most useful thing on the page for the patient, so it looks like it. */
.q-portal { display: grid; gap: 22px; padding: 26px 28px; border-radius: 18px; color: #FFFFFF;
  background: radial-gradient(900px 300px at 8% 0%, #1A3F73 0%, #0B1F3A 60%);
  border: 1px solid rgba(143, 194, 255, .45); box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 26px 48px -26px rgba(0, 0, 0, 0.6); }
@media (min-width: 820px) { .q-portal { grid-template-columns: 1.4fr .8fr; align-items: center; } }
.q-portal__k { margin: 0; font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: #8FC2FF; }
.q-portal__h { margin: 8px 0 0; font-family: var(--display); font-weight: 600; font-size: clamp(20px, 2.2vw, 25px); line-height: 1.22; color: #FFFFFF; letter-spacing: -.012em; }
.q-portal__list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.q-portal__list li { display: flex; gap: 9px; align-items: flex-start; font-size: 14.5px; color: rgba(255, 255, 255, .88); }
.q-portal__list svg { flex: none; margin-top: 3px; color: #8FC2FF; }
.q-portal__ref { margin: 14px 0 0; color: rgba(255, 255, 255, .72); }
.q-portal__ref b { color: #FFFFFF; font-weight: 600; }
.q-portal__cta { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.q-portal__btn { min-height: 60px; font-size: 17px; display: inline-flex; justify-content: center; gap: 10px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 18px 34px -16px rgba(0, 0, 0, 0.45); }
.q-portal__btn:hover { transform: translateY(-2px); }
.q-portal__arrow { font-size: 19px; line-height: 1; transition: transform .2s var(--ease); }
.q-portal__btn:hover .q-portal__arrow { transform: translateX(4px); }
.q-portal__note { margin: 0; text-align: center; color: rgba(255, 255, 255, .62); }
@media (prefers-reduced-motion: reduce) { .q-portal__btn, .q-portal__arrow { transition: none; } }

.q-res__who { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.q-res__who img { width: 62px; height: 62px; flex: none; border: 2px solid var(--gold-2); }
.q-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.q-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 15px;
  border-radius: 12px; background: var(--paper); border: 1px solid var(--line-2); font-size: 14px; font-weight: 700;
  color: var(--ink); text-decoration: none; transition: border-color .15s var(--ease), transform .15s var(--ease); }
.q-chip:hover { border-color: var(--teal); transform: translateY(-2px); }
.q-chip .d { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.q-wa { background: linear-gradient(135deg, #15803D, #0F6B33); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15); }
.q-wa:hover { box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18); }
.q-nl { display: grid; gap: 10px; max-width: 460px; }
@media (min-width: 560px) { .q-nl { grid-template-columns: 1fr auto; align-items: start; } }

/* ------------------------------------------------------------------ booking */
.bk-page { background: var(--ivory); min-height: 100vh; }
.bk-grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 1000px) { .bk-grid { grid-template-columns: 330px minmax(0, 1fr); gap: 40px; } }
.bk-adv { padding: 22px; }
@media (min-width: 1000px) { .bk-adv { position: sticky; top: 24px; } }
.bk-adv__who { display: flex; align-items: center; gap: 14px; }
.bk-adv__who img { width: 66px; height: 66px; flex: none; border: 2px solid var(--gold-2); }
.bk-adv__name { font-weight: 700; color: var(--ink); font-size: 17px; line-height: 1.2; }
.bk-adv__role { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold); margin-top: 3px; }
.bk-list { display: grid; gap: 10px; }
.bk-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--slate); line-height: 1.45; }
.bk-list svg { flex: none; margin-top: 3px; }
.bk-tzline { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 11px 14px; border-radius: 12px;
  background: var(--gold-soft); border: 1px solid rgba(21, 94, 219, .35); font-size: 13.5px; font-weight: 600; color: #0F4DB8; }
.bk-days { display: grid; gap: 22px; }
.bk-day__h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 11px; }
.bk-day__d { font-weight: 700; color: var(--ink); font-size: 15.5px; }
.bk-day__n { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.bk-day__tag { margin-left: auto; }
.bk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.bk-slot { min-height: 46px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--paper);
  font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease); }
.bk-slot:hover { border-color: var(--teal); transform: translateY(-1px); }
.bk-slot[aria-pressed="true"] { background: var(--teal-deep); border-color: var(--teal-deep); color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(14, 143, 133, .28); }
.bk-more { min-height: 44px; background: none; border: 0; color: var(--teal-deep); font-weight: 700; font-size: 14px;
  cursor: pointer; padding: 0; margin-top: 10px; }
.bk-chans { display: grid; gap: 10px; }
@media (min-width: 520px) { .bk-chans { grid-template-columns: 1fr 1fr; } }
.bk-chan { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 12px 16px; border-radius: 14px;
  background: var(--paper); border: 1px solid var(--line-2); cursor: pointer; text-align: left; width: 100%;
  transition: border-color .15s var(--ease), background .15s var(--ease); }
.bk-chan[aria-checked="true"] { border-color: var(--teal); background: rgba(23, 179, 166, .07);
  box-shadow: 0 0 0 1px var(--teal) inset; }
.bk-chan b { display: block; color: var(--ink); font-size: 15px; }
.bk-chan span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.bk-chan svg { flex: none; }
.bk-confirm { position: sticky; bottom: 0; z-index: 20; margin-top: 26px; padding: 16px 0;
  background: var(--ivory); }
.bk-confirm::before { content: ""; position: absolute; left: 0; right: 0; top: -30px; height: 30px;
  background: linear-gradient(180deg, rgba(244, 248, 254, 0), var(--ivory)); pointer-events: none; }
.bk-picked { font-size: 14px; color: var(--muted); margin-bottom: 10px; }
.bk-picked b { color: var(--ink); }

.bk-hero { padding: clamp(30px, 5vw, 52px); text-align: center; }
.bk-tick { width: 66px; height: 66px; border-radius: 999px; margin: 0 auto 20px; display: grid; place-items: center;
  background: var(--ok-soft); border: 1px solid rgba(26, 127, 85, .3); animation: bkPop .5s var(--ease) both .1s; }
@keyframes bkPop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
.bk-when { display: inline-flex; flex-direction: column; gap: 4px; padding: 16px 26px; border-radius: 16px;
  background: var(--midnight); color: #FFFFFF; margin-top: 8px; }
.bk-when b { font-family: var(--display); font-size: clamp(21px, 2.6vw, 28px); color: #FFFFFF; line-height: 1.1; }
.bk-when span { font-size: 12.5px; color: #A9BDD6; }
.bk-media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--bone); }
.bk-media video, .bk-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* ------------------------------------------------------------------ portal */
.pt-page { background: var(--ivory); min-height: 100vh; }
.pt-hero { background: var(--midnight); color: #CBDAEE; padding: 26px 0 30px; position: relative; overflow: hidden; }
.pt-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.pt-hero h1 { color: #FFFFFF; font-size: clamp(25px, 3vw, 36px); }
.pt-hero .muted { color: #A9BDD6; }
.pt-ref { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-2); }
.pt-people { display: flex; gap: 10px; flex-wrap: wrap; }
.pt-person { display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .07); border: 1px solid var(--line-dark); }
.pt-person img { width: 38px; height: 38px; flex: none; }
.pt-person b { display: block; color: #FFFFFF; font-size: 13.5px; line-height: 1.2; }
.pt-person span { display: block; font-size: 12px; color: #93A9C4; margin-top: 1px; }
.pt-tabs { position: sticky; top: 0; z-index: 30; background: rgba(244, 248, 254, .95); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.pt-tabs::-webkit-scrollbar { display: none; }
.pt-tabs__in { display: flex; gap: 4px; min-width: max-content; }
.pt-tab { display: inline-flex; align-items: center; min-height: 50px; padding: 0 14px; font-size: 14px; font-weight: 600;
  color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; background: none;
  border-top: 0; border-left: 0; border-right: 0; cursor: pointer; }
.pt-tab:hover { color: var(--ink); }
.pt-tab.is-on { color: var(--ink); border-bottom-color: var(--teal); }
.pt-sec { padding: 30px 0; scroll-margin-top: 62px; }
.pt-sec + .pt-sec { border-top: 1px solid var(--line); }
.pt-h { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.pt-h h2 { font-size: clamp(22px, 2.4vw, 30px); }

.pt-steps { display: grid; gap: 0; }
@media (min-width: 860px) { .pt-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; } }
.pt-step { display: grid; grid-template-columns: 34px 1fr; gap: 14px; position: relative; padding-bottom: 20px; }
@media (min-width: 860px) {
  .pt-step { grid-template-columns: 1fr; gap: 10px; padding: 0 10px 0 0; align-content: start; }
  .pt-step::before { content: ""; position: absolute; left: 34px; top: 17px; right: 0; height: 2px; background: var(--line-2); }
  .pt-step:last-child::before { display: none; }
  .pt-step.is-done::before { background: var(--teal); }
}
@media (max-width: 859px) {
  .pt-step::before { content: ""; position: absolute; left: 16px; top: 36px; bottom: 0; width: 2px; background: var(--line-2); }
  .pt-step:last-child::before { display: none; }
  .pt-step.is-done::before { background: var(--teal); }
}
.pt-step__dot { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; flex: none;
  background: var(--bone); color: var(--muted); border: 1px solid var(--line-2); font-family: var(--mono);
  font-size: 12px; font-weight: 700; position: relative; z-index: 1; }
.pt-step.is-done .pt-step__dot { background: var(--teal); color: #FFFFFF; border-color: var(--teal); }
.pt-step.is-now .pt-step__dot { background: var(--gold); color: var(--ink); border-color: var(--gold);
  box-shadow: 0 0 0 5px var(--gold-soft); }
.pt-step__t { font-weight: 700; color: var(--ink); font-size: 14.5px; line-height: 1.25; }
.pt-step.is-todo .pt-step__t { color: var(--muted); }
.pt-step__d { font-size: 12.5px; color: var(--muted); line-height: 1.4; margin-top: 3px; }
.pt-now { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 14px;
  background: var(--gold-soft); border: 1px solid rgba(21, 94, 219, .4); margin-top: 22px; }
.pt-now b { color: var(--ink); display: block; font-size: 14.5px; }
.pt-now p { font-size: 13.5px; color: var(--slate); margin: 3px 0 0; }

.pt-quotes { display: grid; gap: 18px; }
@media (min-width: 820px) { .pt-quotes { grid-template-columns: 1fr 1fr; } }
.pt-quote { display: flex; flex-direction: column; gap: 14px; }
.pt-quote.is-chosen { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.12), var(--shadow); }
/* Cards in a row are equal height, so the action sits on the same line in both. */
.pt-quote__act { margin-top: auto; }
.pt-quote__vid { border-radius: 14px; overflow: hidden; background: var(--bone); position: relative; }
.pt-quote__vid video, .pt-quote__vid img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.pt-quote__price { font-family: var(--display); font-size: clamp(28px, 3.2vw, 38px); font-weight: 600; color: var(--ink);
  line-height: 1; letter-spacing: -.02em; }
.pt-rows { display: grid; gap: 0; }
.pt-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px dashed var(--line-2);
  font-size: 14px; }
.pt-row:first-child { border-top: 0; }
.pt-row .k { color: var(--muted); font-weight: 600; flex: none; }
.pt-row .v { color: var(--ink); font-weight: 700; text-align: right; min-width: 0; }
.pt-row--stack { display: grid; gap: 5px; }
.pt-row--stack .k { font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; }
.pt-row--stack .v { text-align: left; font-weight: 600; line-height: 1.5; }
.pt-doc { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); }
.pt-doc:first-child { border-top: 0; }
.pt-doc__i { width: 38px; height: 38px; border-radius: 10px; background: var(--bone); display: grid; place-items: center; flex: none; }
.pt-doc__n { font-weight: 600; color: var(--ink); font-size: 14.5px; word-break: break-word; }
.pt-doc__m { font-size: 12px; color: var(--muted); }
.pt-thread { display: grid; gap: 14px; max-height: 460px; overflow-y: auto; padding-right: 4px; }
.pt-msg { display: flex; gap: 11px; align-items: flex-start; }
.pt-msg img, .pt-msg .initials { width: 36px; height: 36px; flex: none; }
.pt-msg__b { background: var(--paper); border: 1px solid var(--line-2); border-radius: 16px 16px 16px 5px;
  padding: 12px 15px; font-size: 14.5px; color: var(--slate); min-width: 0; }
.pt-msg__n { font-weight: 700; font-size: 12.5px; color: var(--ink); margin-bottom: 3px; }
.pt-msg__t { font-size: 12px; color: var(--muted); margin-top: 5px; }
.pt-msg--me { flex-direction: row-reverse; }
.pt-msg--me .pt-msg__b { background: rgba(23, 179, 166, .09); border-color: rgba(23, 179, 166, .3);
  border-radius: 16px 16px 5px 16px; }
.pt-msg--me .pt-msg__n, .pt-msg--me .pt-msg__t { text-align: right; }
.pt-send { display: grid; gap: 10px; margin-top: 16px; }
@media (min-width: 620px) { .pt-send { grid-template-columns: 1fr auto; align-items: end; } }
.pt-care { display: grid; gap: 12px; }
@media (min-width: 700px) { .pt-care { grid-template-columns: repeat(3, 1fr); } }
.pt-care__d { padding: 16px 18px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line-2); }
.pt-care__d.is-done { border-color: rgba(26, 127, 85, .35); background: var(--ok-soft); }
.pt-care__k { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* .bracket is sized in em, so it has to be pinned inside this small label to stay at 12px. */
.pt-care__k .bracket { font-size: 12px; }
.pt-care__v { font-weight: 700; color: var(--ink); font-size: 15px; margin-top: 4px; }
.pt-feel { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pt-feel button { min-height: 44px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--line-2);
  background: var(--paper); font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.pt-feel button[aria-pressed="true"] { border-color: var(--teal); background: rgba(23, 179, 166, .1); color: var(--teal-deep); }
.pt-gate { display: grid; place-items: center; min-height: 70vh; padding: 40px 0; }

/* ============================================================================
   CRM (Agent C). Team app only, every class prefixed .crm- so nothing collides.
   Appended block, do not interleave with the design system above.
   == CRM start ==
   ============================================================================ */

/* ---------------------------------------------------------------- app chrome */
.crm-burger { width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--line-dark);
  background: transparent; color: #FFFFFF; display: grid; place-items: center; cursor: pointer; flex: none; }
.crm-appbar-t { font-weight: 700; font-size: 15px; color: #FFFFFF; }
.crm-appbar-r { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.crm-scrim { position: fixed; inset: 0; background: rgba(7, 20, 40, .55); z-index: 55; opacity: 0;
  pointer-events: none; transition: opacity .2s var(--ease); }
@media (max-width: 860px) { .app.is-open .crm-scrim { opacity: 1; pointer-events: auto; } }
@media (min-width: 861px) { .crm-scrim { display: none; } }
.crm-navgroup { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #6D84A3; padding: 14px 12px 6px; }
.crm-me { margin-top: auto; border-top: 1px solid var(--line-dark); padding-top: 12px; display: flex;
  gap: 10px; align-items: center; }
.crm-me .initials { width: 34px; height: 34px; flex: none; }
.crm-me .who { min-width: 0; }
.crm-me b { color: #FFFFFF; font-size: 13.5px; display: block; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.crm-me small { color: #93A9C4; font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; }
.crm-out { margin-left: auto; background: transparent; border: 1px solid var(--line-dark); color: #A9BDD6;
  border-radius: 8px; padding: 6px 9px; font-size: 12px; cursor: pointer; flex: none; }
.crm-out:hover { color: #FFFFFF; border-color: #FFFFFF; }

/* ---------------------------------------------------------------- notices */
.crm-banner { border-radius: 10px; padding: 11px 15px; font-size: 13.5px; font-weight: 600;
  margin-bottom: 16px; background: var(--warn-soft); border: 1px solid rgba(180, 95, 6, .35); color: var(--warn); }
.crm-banner--danger { background: var(--danger-soft); border-color: rgba(192, 57, 43, .35); color: var(--danger); }
.crm-banner--info { background: #E6EFFB; border-color: rgba(11, 79, 168, .28); color: #0B4FA8; }
.crm-urgent { border-radius: var(--radius-sm); padding: 15px 18px; margin-bottom: 18px;
  background: linear-gradient(135deg, #B3301F, #8A2115); color: #FFFFFF; display: flex; gap: 14px;
  align-items: center; justify-content: space-between; flex-wrap: wrap;
  box-shadow: 0 12px 28px rgba(179, 48, 31, .26); }
.crm-urgent b, .crm-urgent strong { color: #FFFFFF; }
.crm-urgent .u1 { font-family: var(--display); font-size: 21px; font-weight: 600; line-height: 1.15; }
.crm-urgent .u2 { font-size: 13px; color: rgba(255, 255, 255, .82); }
/* R3.7: the flat ".btn:not(.btn--ghost){color:#FFF}" rule (defined later in this file, so it wins at equal
   specificity) was painting this solid white button's label white on white. Matching its specificity here
   lets the dark red label win, so the HOT banner's button is readable. */
.crm-urgent .btn:not(.btn--ghost) { background: #FFFFFF; color: #8A2115; box-shadow: none; min-height: 44px; }
.crm-urgent .btn:not(.btn--ghost):hover { box-shadow: 0 8px 18px rgba(0, 0, 0, .2); }

/* ---------------------------------------------------------------- kpi cards */
.crm-kpis { display: grid; gap: 12px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1180px) { .crm-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .crm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.crm-kpi { display: block; text-decoration: none; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 13px 15px; box-shadow: var(--shadow-sm); min-width: 0;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
a.crm-kpi:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.1); }
.crm-kpi .v { font-family: var(--display); font-size: clamp(28px, 3vw, 38px); font-weight: 600; line-height: 1;
  color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.crm-kpi .k { font-size: 12px; color: var(--muted); margin-top: 5px; font-weight: 600; }
.crm-kpi.is-alert { border-color: rgba(192, 57, 43, .45); background: var(--danger-soft); }
.crm-kpi.is-alert .v { color: #B3301F; }
.crm-kpi.is-alert .k { color: #8A2115; }
.crm-kpi.is-warn { border-color: rgba(180, 95, 6, .4); background: var(--warn-soft); }
.crm-kpi.is-warn .v { color: var(--warn); }
.crm-kpi.is-ok { border-color: rgba(26, 127, 85, .35); background: var(--ok-soft); }
.crm-kpi.is-ok .v { color: var(--ok); }

/* ---------------------------------------------------------------- panels */
.crm-panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 18px 20px; box-shadow: var(--shadow-sm); min-width: 0; }
.crm-panel > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 14px; }
.crm-panel h2, .crm-panel h3 { font-family: var(--sans); font-size: 15px; font-weight: 700; letter-spacing: 0;
  line-height: 1.2; }
.crm-panel .hint { font-size: 12px; color: var(--muted); }
.crm-cols { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.crm-cols--13 { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
@media (max-width: 980px) { .crm-cols, .crm-cols--13 { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- funnel */
.crm-funnel { display: grid; gap: 7px; }
.crm-frow { display: grid; grid-template-columns: 118px minmax(0, 1fr) 46px; gap: 12px; align-items: center;
  text-decoration: none; border-radius: 8px; padding: 2px 4px; }
.crm-frow:hover { background: #F7FAFD; }
.crm-frow .fl { font-size: 13px; font-weight: 600; color: var(--ink); }
.crm-frow .ft { height: 20px; border-radius: 6px; background: var(--bone); overflow: hidden; }
.crm-frow .ff { display: block; height: 100%; border-radius: 6px; min-width: 3px;
  background: linear-gradient(90deg, var(--teal-2), var(--teal-deep)); transition: width .6s var(--ease); }
.crm-frow .fc { font-family: var(--mono); font-size: 13px; font-weight: 700; text-align: right; color: var(--ink); }
.crm-frow.is-exit .ff { background: linear-gradient(90deg, #D7C6C2, #A85846); }
@media (max-width: 520px) { .crm-frow { grid-template-columns: 92px minmax(0, 1fr) 38px; gap: 8px; }
  .crm-frow .fl { font-size: 12px; } }

/* ---------------------------------------------------------------- today strip */
/* Wraps rather than scrolls, so nothing is ever half cut off at the edge of the panel. */
.crm-strip { display: flex; gap: 10px; flex-wrap: wrap; }
.crm-slot { flex: 1 1 168px; min-width: 0; border: 1px solid var(--line); border-left: 3px solid var(--muted);
  border-radius: 10px; padding: 10px 12px; background: var(--paper); text-decoration: none; }
.crm-slot .t, .crm-slot .w { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-slot .h { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.crm-slot .t { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.25; margin-top: 2px; }
.crm-slot .w { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.crm-slot:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.crm-slot--call { border-left-color: var(--teal-deep); }
.crm-slot--appointment { border-left-color: var(--gold); }
.crm-slot--pickup { border-left-color: #0B4FA8; }
.crm-slot--checkin { border-left-color: var(--ok); }

/* ---------------------------------------------------------------- tasks */
.crm-task { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0;
  border-bottom: 1px solid var(--line); }
.crm-task:last-child { border-bottom: 0; }
.crm-check { flex: none; width: 28px; height: 28px; border-radius: 9px; border: 1.5px solid var(--line-2);
  background: var(--paper); cursor: pointer; display: grid; place-items: center; color: transparent;
  transition: background .15s var(--ease), border-color .15s var(--ease); }
.crm-check:hover { border-color: var(--teal); }
.crm-check[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #FFFFFF; }
.crm-task .tb { min-width: 0; flex: 1; }
.crm-task .tt { font-weight: 600; color: var(--ink); font-size: 14.5px; line-height: 1.3; }
.crm-task .tm { font-size: 12.5px; color: var(--muted); margin-top: 3px; display: flex; gap: 8px;
  flex-wrap: wrap; align-items: center; }
.crm-task .tm .over { color: var(--danger); font-weight: 700; }
.crm-task.is-done { opacity: .42; }
.crm-task.is-done .tt { text-decoration: line-through; }
.crm-task .tlink { color: #0B6F67; font-weight: 600; text-decoration: none; } /* 6.03:1; teal-deep was 3.97 */
.crm-task .tlink:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- activity feed */
.crm-feed { display: grid; }
.crm-fi { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 11px; padding: 9px 0;
  border-bottom: 1px solid var(--line); font-size: 14px; align-items: start; }
.crm-fi:last-child { border-bottom: 0; }
.crm-fi .fd { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center;
  background: var(--bone); font-size: 12px; }
.crm-fi .ft { color: var(--slate); line-height: 1.35; }
.crm-fi .ft a { color: var(--ink); font-weight: 700; text-decoration: none; }
.crm-fi .ft a:hover { text-decoration: underline; }
.crm-fi .fw { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* ---------------------------------------------------------------- toolbar */
.crm-toolbar { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.crm-toolbar .input, .crm-toolbar select.input { min-height: 42px; width: auto; min-width: 118px;
  font-size: 14px; padding: 8px 12px; }
.crm-search { flex: 1 1 210px; min-width: 0; }
.crm-search .input { width: 100%; }
.crm-seg { display: inline-flex; background: var(--bone); border-radius: 999px; padding: 3px; gap: 2px; }
.crm-seg button { border: 0; background: transparent; border-radius: 999px; padding: 7px 15px; font-size: 13.5px;
  font-weight: 600; color: var(--muted); cursor: pointer; min-height: 36px; white-space: nowrap; }
.crm-seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); }
.crm-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600;
  color: var(--ink); background: var(--paper); border: 1px solid var(--line-2); border-radius: 999px;
  padding: 8px 14px; cursor: pointer; min-height: 42px; }
.crm-toggle[aria-pressed="true"] { border-color: var(--teal); background: rgba(23, 179, 166, .08);
  color: var(--teal-deep); }
.crm-count { font-size: 13px; color: var(--muted); margin-left: auto; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- table extras */
th .crm-sort { background: transparent; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer;
  display: inline-flex; gap: 4px; align-items: center; letter-spacing: inherit; text-transform: inherit; }
th .crm-sort .ar { font-size: 9px; opacity: 0; }
th .crm-sort.is-on { color: var(--ink); }
th .crm-sort.is-on .ar { opacity: 1; color: #0B6F67; }
.crm-stale { color: var(--danger); font-weight: 700; }
.crm-nowrap { white-space: nowrap; }
.crm-who { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.crm-who .initials { width: 24px; height: 24px; font-size: 10.5px; flex: none; }
.crm-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-score { display: inline-flex; align-items: center; gap: 8px; }
.crm-score .t { width: 56px; height: 7px; border-radius: 999px; background: var(--bone); overflow: hidden;
  flex: none; }
.crm-score .f { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--teal-2), var(--teal-deep)); }
.crm-score.is-hot .f { background: linear-gradient(90deg, #E2705C, #B3301F); }
.crm-score.is-warm .f { background: linear-gradient(90deg, #E8B057, var(--warn)); }
.crm-score b { font-family: var(--mono); font-size: 12.5px; color: var(--ink); }

/* The leads table carries twelve columns. Default table padding pushes it past 1440 and clips the
   two money columns on the right, so this one table runs tighter and keeps every cell on one line.
   The name is the only cell allowed to wrap, and under 640px the stacked card layout resets it. */
.crm-leads th, .crm-leads td { padding: 10px 9px; white-space: nowrap; }
.crm-leads th { white-space: normal; line-height: 1.25; }
.crm-leads .ts { display: grid; gap: 4px; justify-items: start; }
.crm-leads td:first-child, .crm-leads th:first-child { white-space: normal; min-width: 132px; }
.crm-leads .flags { display: inline-flex; gap: 4px; flex-wrap: wrap; margin-left: 6px;
  vertical-align: 1px; }
/* R1.3: the generic stacked layout gives each of the eleven columns its own full width row, so one lead is
   a tall block on a phone. Here each lead is a compact card instead: the name on its own line, then the
   other facts flow inline as small "label value" pairs that wrap over a few lines, not eleven. */
@media (max-width: 640px) {
  .crm-leads.stacky tr { display: block; padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--line-2);
    border-radius: 12px; background: var(--paper); box-shadow: var(--shadow-sm); }
  .crm-leads.stacky td { display: inline-flex; align-items: baseline; gap: 5px; width: auto;
    padding: 2px 0; margin-right: 14px; border: 0; justify-content: flex-start; white-space: normal; }
  .crm-leads.stacky td::before { content: attr(data-label); font-weight: 700; color: var(--muted);
    font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
  .crm-leads.stacky td:first-child { display: block; width: 100%; min-width: 0; margin: 0 0 4px; padding: 0; }
  .crm-leads.stacky td:first-child::before { display: none; }
  .crm-leads.stacky td:first-child strong { font-size: 16px; }
}

/* Same treatment for the clinic table: nine columns, and a code like VC-001 must never wrap. */
.crm-clinics th, .crm-clinics td { padding: 10px 10px; }
.crm-clinics td:first-child, .crm-clinics .nw { white-space: nowrap; }

/* ---------------------------------------------------------------- board */
.crm-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 14px; scroll-snap-type: x proximity; }
.crm-col { flex: 0 0 258px; background: var(--bone); border-radius: var(--radius-sm); padding: 10px;
  scroll-snap-align: start; min-height: 120px; }
.crm-col > h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px;
  padding: 0 3px; }
.crm-col > h3 .n { font-family: var(--mono); background: rgba(11, 31, 58, .08); border-radius: 999px;
  padding: 1px 7px; letter-spacing: 0; }
.crm-lc { display: block; background: var(--paper); border: 1px solid var(--line); border-radius: 11px;
  padding: 11px 12px; margin-bottom: 8px; text-decoration: none; box-shadow: var(--shadow-sm);
  transition: transform .15s var(--ease); }
.crm-lc:hover { transform: translateY(-2px); }
.crm-lc.is-urgent { border-left: 3px solid #B3301F; }
.crm-lc .n { font-weight: 700; color: var(--ink); font-size: 14px; line-height: 1.25; }
.crm-lc .m { font-size: 12px; color: var(--muted); margin-top: 3px; }
.crm-lc .r { display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- customer 360 */
.crm-360 { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 18px; align-items: start; }
/* Both columns must be allowed to shrink. Without this the tab strip, which is a nowrap flex row,
   sets a min-content width of roughly 950px and pushes the whole page sideways on a phone. */
.crm-360 > * { min-width: 0; }
@media (max-width: 1100px) { .crm-360 { grid-template-columns: 1fr; } }
.crm-hero { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; box-shadow: var(--shadow-sm); margin-bottom: 18px; }
.crm-hero h1 { font-size: clamp(26px, 3vw, 36px); line-height: 1.05; }
.crm-hero .crm-tagrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.crm-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.crm-steps { display: flex; gap: 5px; flex-wrap: wrap; padding: 4px 0 8px; }
.crm-stepbtn { flex: none; border: 1px solid var(--line-2); background: var(--paper); border-radius: 999px;
  padding: 7px 13px; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer;
  white-space: nowrap; min-height: 36px; }
.crm-stepbtn:hover { border-color: var(--teal); color: var(--teal-deep); }
.crm-stepbtn.is-done { background: rgba(23, 179, 166, .12); color: var(--teal-deep);
  border-color: rgba(23, 179, 166, .38); }
.crm-stepbtn.is-now { background: var(--gold); border-color: var(--gold); color: #FFFFFF; /* 5.74:1; ink was 2.88 */
  box-shadow: 0 0 0 3px var(--gold-soft); }
/* R3.6: a stage the case never entered (a lead created or imported straight into a later stage) is not
   "done", it was skipped. Muted, dashed and struck through so it reads as passed over, distinct from a
   completed stage (teal) and from an upcoming one (plain). */
.crm-stepbtn.is-skipped { background: var(--paper); border-color: var(--line); color: var(--muted);
  border-style: dashed; text-decoration: line-through; }
.crm-kv { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px 12px; font-size: 13.5px; margin: 0; }
.crm-kv dt { color: var(--muted); font-size: 12.5px; }
.crm-kv dd { margin: 0; color: var(--ink); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 420px) { .crm-kv { grid-template-columns: 1fr; gap: 2px; }
  .crm-kv dd { margin-bottom: 9px; } }
/* Wraps rather than scrolls. A tab parked off the right edge is a tab nobody finds. */
.crm-tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--line-2);
  margin-bottom: 16px; }
.crm-tab { flex: none; background: transparent; border: 0; padding: 11px 12px; font-size: 14px; font-weight: 600;
  color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap;
  min-height: 44px; }
.crm-tab:hover { color: var(--ink); }
.crm-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--teal); }
.crm-parts { display: grid; gap: 5px; }
.crm-part { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 5px 0;
  border-bottom: 1px dashed var(--line); }
.crm-part b { font-family: var(--mono); font-size: 12.5px; color: var(--teal-deep); }
.crm-qa { display: grid; gap: 0; }
.crm-qa .q { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 11px 0;
  border-bottom: 1px solid var(--line); font-size: 14px; align-items: baseline; }
.crm-qa .q span { color: var(--muted); font-size: 13px; }
.crm-qa .q b { color: var(--ink); text-align: right; }
.crm-note { background: #F7FAFD; border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px;
  margin-bottom: 9px; font-size: 14px; }
.crm-note .meta { font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.crm-msg { border: 1px solid var(--line); border-radius: 11px; padding: 13px 15px; margin-bottom: 10px;
  background: var(--paper); }
.crm-msg pre { margin: 9px 0 0; white-space: pre-wrap; font-family: var(--sans); font-size: 13.5px;
  line-height: 1.5; color: var(--slate); background: #F7FAFD; border-radius: 8px; padding: 11px 13px;
  overflow-wrap: anywhere; }
.crm-msg .r { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }

/* A queue of forty messages, each printed in full, is a wall nobody reads. One preview line,
   the actions, and the full text one tap away. */
.crm-preview { font-size: 13px; color: var(--muted); margin-top: 8px; overflow: hidden;
  text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.crm-more { margin-top: 8px; }
.crm-more > summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--teal-deep);
  list-style: none; display: inline-flex; align-items: center; gap: 5px; min-height: 30px; }
.crm-more > summary::-webkit-details-marker { display: none; }
.crm-more > summary::before { content: "+"; font-family: var(--mono); font-weight: 700; }
.crm-more[open] > summary::before { content: "-"; }
.crm-more[open] > summary { color: var(--muted); }

/* ---------------------------------------------------------------- calendar */
.crm-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.crm-cal .hd { background: #F7FAFD; padding: 8px 6px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted); text-align: center; font-weight: 700; }
.crm-day { background: var(--paper); min-height: 108px; padding: 6px; display: flex; flex-direction: column;
  gap: 4px; min-width: 0; }
.crm-day.is-out { background: #F5F7FA; }
.crm-day .dn { font-family: var(--mono); font-size: 11.5px; color: var(--muted); width: 22px; height: 20px;
  display: grid; place-items: center; flex: none; }
.crm-day.is-out .dn { opacity: .5; }
.crm-day.is-today { background: #F2F7FF; }
.crm-day.is-today .dn { background: var(--gold); color: var(--ink); border-radius: 999px; font-weight: 700; }
.crm-cal--week .crm-day { min-height: 320px; }
.crm-ev { display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid var(--muted);
  background: #EEF2F7; border-radius: 5px; padding: 4px 6px; font-size: 11.5px; line-height: 1.25;
  cursor: pointer; color: var(--ink); overflow: hidden; }
.crm-ev b { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-ev i { font-style: normal; font-family: var(--mono); font-size: 10px; color: var(--muted); }
.crm-ev:hover { filter: brightness(.97); }
.crm-ev--call { border-left-color: var(--teal-deep); background: rgba(23, 179, 166, .13); }
.crm-ev--appointment { border-left-color: var(--gold); background: var(--gold-soft); }
.crm-ev--pickup { border-left-color: #0B4FA8; background: #E6EFFB; }
.crm-ev--checkin { border-left-color: var(--ok); background: var(--ok-soft); }
.crm-ev--task { border-left-color: #7C5BA6; background: #F1ECF8; }
.crm-ev--done { opacity: .5; }
.crm-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted);
  margin-top: 12px; }
.crm-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; margin-right: 6px;
  vertical-align: -1px; }
.crm-agenda { display: none; }
.crm-agenda .ad { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); padding: 14px 0 7px; border-bottom: 1px solid var(--line-2); }
.crm-agenda .ad.is-today { color: var(--warn); }
.crm-agenda .crm-ev { margin-top: 7px; padding: 9px 11px; font-size: 13px; border-radius: 8px; }
@media (max-width: 640px) {
  .crm-cal { display: none; }
  .crm-agenda { display: block; }
}

/* ---------------------------------------------------------------- money and reports */
.crm-money { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .crm-money { grid-template-columns: 1fr; } }
.crm-mcard { border-radius: var(--radius-sm); padding: 16px 18px; border: 1px solid rgba(21, 94, 219, .45);
  background: linear-gradient(180deg, #F5F9FF, var(--paper)); }
.crm-mcard .v { font-family: var(--display); font-size: clamp(26px, 3vw, 34px); font-weight: 600;
  color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.crm-mcard .k { font-size: 12px; color: var(--muted); margin-top: 6px; font-weight: 600; }
.crm-mcard .s { font-size: 11.5px; color: var(--gold); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 8px; }
.crm-conv { display: grid; gap: 8px; }
.crm-mtrack { display: block; height: 8px; border-radius: 999px; background: var(--bone); overflow: hidden;
  margin: 5px 0 4px; }
.crm-mfill { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--teal-2), var(--teal-deep)); }
/* Two money columns on the right. Narrower than this and the words "Commission" and "Platform"
   run into each other in the header row. */
.crm-crow { display: grid; grid-template-columns: minmax(0, 1fr) 88px 80px; gap: 10px; align-items: center;
  font-size: 13.5px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.crm-crow b { font-family: var(--mono); font-size: 13px; text-align: right; color: var(--ink);
  white-space: nowrap; }
.crm-crow .pc { font-family: var(--mono); font-size: 12.5px; text-align: right; color: var(--teal-deep);
  font-weight: 700; white-space: nowrap; }
@media (max-width: 520px) {
  .crm-crow { grid-template-columns: minmax(0, 1fr) 74px 68px; gap: 8px; font-size: 12.5px; }
  .crm-crow b, .crm-crow .pc { font-size: 11.5px; }
}

/* ---------------------------------------------------------------- small bits */
.crm-mini { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px;
  border-radius: 9px; border: 1px solid var(--line-2); background: var(--paper); font-size: 13px;
  font-weight: 600; color: var(--ink); cursor: pointer; text-decoration: none; }
.crm-mini:hover { border-color: var(--ink); }
.crm-mini--wa { border-color: rgba(37, 211, 102, .5); color: #0F7A3D; background: rgba(37, 211, 102, .08); }
.crm-mini--danger { border-color: rgba(192, 57, 43, .4); color: var(--danger); }
.crm-select { min-height: 40px; padding: 8px 11px; border-radius: 9px; border: 1px solid var(--line-2);
  background: var(--paper); font-size: 13.5px; width: 100%; }
.crm-select:focus { outline: 0; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.064); }
.crm-skelrow { display: grid; gap: 9px; }
.crm-skelrow .skel { height: 15px; }
.crm-pageinfo { display: flex; gap: 12px; align-items: center; justify-content: space-between;
  margin-top: 16px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); }
.crm-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600;
  color: var(--muted); text-decoration: none; margin-bottom: 10px; }
.crm-back:hover { color: var(--ink); }
.crm-login { min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(1100px 600px at 50% -10%, rgba(23, 179, 166, .1), transparent 60%), var(--midnight); }
.crm-login .box { width: min(420px, 100%); background: var(--paper); border-radius: var(--radius);
  padding: clamp(24px, 4vw, 36px); box-shadow: var(--shadow-lg); }
.crm-login .mark { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.crm-login .mark b { font-family: var(--display); font-size: 20px; color: var(--ink); }
.crm-avail { display: grid; grid-template-columns: 120px 1fr 1fr 44px; gap: 8px; align-items: center;
  margin-bottom: 8px; }
.crm-avail .d { font-size: 13.5px; font-weight: 600; color: var(--ink); }
@media (max-width: 520px) { .crm-avail { grid-template-columns: 92px 1fr 1fr 36px; gap: 6px; }
  .crm-avail .crm-select, .crm-avail .input { font-size: 12.5px; padding: 7px 8px; } }
/* == CRM end == */
/* ---------------------------------------------- tap targets, 44px minimum
   Measured at 390 px with a DOM probe: brand lockups, footer links, table of
   contents links, breadcrumbs and standalone text links were all under 44 px.
   Inline links inside a sentence keep their natural height (WCAG inline exception). */
.mk-brand { min-height: 44px; }
.mk-foot a { min-height: 44px; }
.mk-toc a { min-height: 44px; }
.mk-crumbs { padding: 6px 0 0; }
.mk-crumbs ol { align-items: center; }
.mk-crumbs a, .mk-crumbs li { display: inline-flex; align-items: center; min-height: 44px; }
.mk-crumbs .sep { min-height: 0; }
p > .link:only-child { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------------------------------------------- stacked tables on phones
   Core .stacky turns each td into a flex row, which makes every inline child
   (a <strong>, a <br>, a <small>) its own flex item and spreads them across
   the row. Discovery tables use .mk-stack as well: the label sits on its own
   line and the cell content flows normally underneath it. */
@media (max-width: 640px) {
  table.mk-stack tr { padding: 6px 0; }
  table.mk-stack td { display: block; padding: 9px 16px; text-align: left; }
  table.mk-stack td::before { display: block; margin-bottom: 3px; }
}

/* A .split whose media column is a 4:5 portrait leaves a large gap above short
   copy when both columns are centred. Top align those pairs instead. */
.split:has(.mk-media--tall) { align-items: start; }

/* Core .step keeps its title and description as inline spans, so they run
   together in a sentence. Discovery pages add .mk-steps to break them apart. */
.mk-steps .step .t, .mk-steps .step .d { display: block; }
.mk-steps .step .d { margin-top: 3px; }

/* ==================== thin trust rail (Ken 2026-09-08) ====================
   Sits between the hero and the proof strip. Replaces the six badge block that repeated
   the promise pills and the we-do list. Muted by default so it reads as a rail, not a claim. */
.mk-rail { background: var(--bone); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mk-rail-row { display: flex; align-items: center; justify-content: space-between; gap: 40px;
  list-style: none; margin: 0; padding: 20px 0; }
.mk-rail-item { display: inline-flex; align-items: center; gap: 10px; color: var(--ink);
  opacity: .52; transition: opacity .25s var(--ease); white-space: nowrap; }
.mk-rail-item:hover { opacity: 1; }
.mk-rail-item svg { flex: none; }
.mk-rail-item span { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 1100px) { .mk-rail-row { gap: 28px; } .mk-rail-item span { font-size: 10.5px; letter-spacing: .07em; } }
@media (max-width: 860px) {
  .mk-rail .wrap { padding-right: 0; }
  .mk-rail-row { justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; padding: 16px 24px 16px 0; gap: 26px; }
  .mk-rail-row::-webkit-scrollbar { display: none; }
  .mk-rail-item { opacity: .62; }
}

/* Two column quiz rows must end level even when one field has no hint, otherwise the next row
   starts against a ragged edge. Reserve the hint line and align both columns to the top. */
.q-2col { align-items: start; row-gap: 0; }
.q-2col > .field { display: grid; align-content: start; grid-template-rows: auto auto 1fr; }
.q-2col > .field > .hint { min-height: 1.4em; }
@media (max-width: 619px) { .q-2col > .field > .hint { min-height: 0; } }

/* Money tables lost the platform column: that figure is the operator's, not the team's. */
.crm-crow--2 { grid-template-columns: minmax(0, 1fr) 110px; }
@media (max-width: 640px) { .crm-crow--2 { grid-template-columns: minmax(0, 1fr) 88px; } }

/* The final CTA band paints a dark ground but never carried .section--dark, so every text colour
   inside it stayed on the light-ground value and the copy, the ghost button and the promise line
   were close to invisible. This was on all 22 discovery pages. Scope the dark treatment to the band. */
.mk-cta { color: #CBDAEE; }
.mk-cta h1, .mk-cta h2, .mk-cta h3, .mk-cta h4, .mk-cta strong, .mk-cta b { color: #FFFFFF; }
.mk-cta p, .mk-cta li, .mk-cta .lede, .mk-cta .body { color: #CBDAEE; }
.mk-cta .muted, .mk-cta .fine, .mk-cta .mk-ctanote { color: #93A9C4; }
.mk-cta .eyebrow { color: var(--gold-2); }
.mk-cta .mk-promises { color: #EAF2FC; }
.mk-cta .btn--ghost { color: #FFFFFF; border-color: rgba(255, 255, 255, .28); background: transparent; }
.mk-cta .btn--ghost:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, .07); }
.mk-cta .link { color: var(--teal-2); border-bottom-color: rgba(111, 224, 210, .35); }
.mk-cta .card { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: #CBDAEE; }
.mk-cta .card h3, .mk-cta .card h4, .mk-cta .card strong { color: #FFFFFF; }

/* ==================== contrast corrections ====================
   Found by tests/contrast_probe.js against the live pages. Two classes of defect:
   (1) a light surface dropped inside a dark band kept the dark band's text colours, which is how a
       white comparison table ended up with invisible rows, and
   (2) three palette tokens that were never legible enough as text on the light grounds. */

/* (1) a light surface inside a dark band returns to the light ground palette */
.section--dark .tablewrap,
.mk-cta .tablewrap { color: var(--slate); }
.section--dark .tablewrap th, .mk-cta .tablewrap th { color: var(--muted); background: #F7FAFD; }
.section--dark .tablewrap td, .mk-cta .tablewrap td { color: var(--slate); }
.section--dark .tablewrap strong, .section--dark .tablewrap b,
.mk-cta .tablewrap strong, .mk-cta .tablewrap b { color: var(--ink); }
.section--dark .tablewrap a, .mk-cta .tablewrap a { color: var(--teal-text); }
.section--dark .card:not(.card--glass) { color: var(--slate); }
.section--dark .card:not(.card--glass) h3, .section--dark .card:not(.card--glass) h4,
.section--dark .card:not(.card--glass) strong, .section--dark .card:not(.card--glass) b { color: var(--ink); }
.section--dark .card:not(.card--glass) .muted, .section--dark .card:not(.card--glass) .fine { color: var(--muted); }
.section--dark .card:not(.card--glass) .card__label { color: var(--gold-text); }
.section--dark .card:not(.card--glass) .stat .v { color: var(--ink); }
.section--dark .card:not(.card--glass) .stat .k { color: var(--muted); }

/* (2) small uppercase gold and inline links need the darker text tones on light grounds */
.eyebrow { color: var(--gold-text); }
.section--dark .eyebrow, .mk-cta .eyebrow, .card--glass .eyebrow { color: var(--gold-2); }
.link { color: var(--teal-text); border-bottom-color: rgba(11, 122, 113, .34); }
.link:hover { border-bottom-color: var(--teal-text); }
.section--dark .link, .mk-cta .link { color: var(--teal-2); border-bottom-color: rgba(111, 224, 210, .35); }

/* The last three from the probe: a gold card label, the SAMPLE mark, and a note that sat on a dark
   band while still using the light ground muted tone. */
.card__label { color: var(--gold-text); }
.section--dark .card__label, .mk-cta .card__label, .card--glass .card__label { color: var(--gold-2); }
.bracket { color: #8A4704; }
.section--dark .mk-tablenote, .section--dark .fine, .mk-cta .mk-tablenote { color: #A9BDD6; }

/* ==================== dark band component overrides ====================
   Components below set a light ground colour directly. Dropped into a dark band they went
   invisible, which is what happened to the numbered steps on the for clinics page. Anything
   that can sit on a dark ground needs its pair here. */
.section--dark .step .t, .mk-cta .step .t { color: #FFFFFF; }
.section--dark .step .d, .mk-cta .step .d { color: #A9BDD6; }
.section--dark .step .dot, .mk-cta .step .dot { background: rgba(255, 255, 255, .1); color: #CBDAEE;
  border-color: rgba(255, 255, 255, .22); }
.section--dark .step.is-done .dot, .mk-cta .step.is-done .dot { background: var(--teal); color: var(--ink); border-color: var(--teal); }
.section--dark .step.is-now .dot, .mk-cta .step.is-now .dot { background: var(--gold); color: #FFFFFF; border-color: var(--gold); }
.section--dark .step::before, .mk-cta .step::before { background: rgba(255, 255, 255, .16); }

.section--dark .bar .lbl, .mk-cta .bar .lbl { color: #EAF2FC; }
.section--dark .bar .track, .mk-cta .bar .track { background: rgba(255, 255, 255, .1); }
.section--dark .swimlane, .mk-cta .swimlane { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .14); }
.section--dark .swimlane .lrow, .mk-cta .swimlane .lrow { background: rgba(255, 255, 255, .14); }
.section--dark .swimlane .lcell, .mk-cta .swimlane .lcell { background: #0E2444; color: #CBDAEE; }
.section--dark .swimlane .lcell.you, .mk-cta .swimlane .lcell.you { background: #0A1C36; }
.section--dark .swimlane .lhead, .mk-cta .swimlane .lhead { color: #93A9C4; }
.section--dark .tag, .mk-cta .tag { background: rgba(255, 255, 255, .12); color: #EAF2FC; }
.section--dark .mk-check b, .mk-cta .mk-check b { color: #FFFFFF; }
.section--dark .mk-check small, .mk-cta .mk-check small { color: #A9BDD6; }
.section--dark .mk-who b, .mk-cta .mk-who b { color: #FFFFFF; }
.section--dark .mk-who small, .mk-cta .mk-who small { color: #93A9C4; }
.section--dark .mk-price .v, .mk-cta .mk-price .v, .section--dark .mk-big, .mk-cta .mk-big { color: #FFFFFF; }
.section--dark .mk-price .k, .section--dark .mk-price .d,
.mk-cta .mk-price .k, .mk-cta .mk-price .d { color: #93A9C4; }
.section--dark .mk-buy .t, .mk-cta .mk-buy .t { color: #FFFFFF; }
.section--dark .mk-buy .d, .mk-cta .mk-buy .d { color: #A9BDD6; }
.section--dark .mk-rows .r b, .mk-cta .mk-rows .r b { color: #FFFFFF; }
.section--dark .mk-toc a, .mk-cta .mk-toc a { color: #EAF2FC; }
.section--dark .mk-toc h4, .mk-cta .mk-toc h4 { color: #93A9C4; }
.section--dark .mk-vsnote, .mk-cta .mk-vsnote { color: #93A9C4; }
.section--dark .mk-money .cur, .mk-cta .mk-money .cur { color: #93A9C4; }
.section--dark .mk-opt span, .mk-cta .mk-opt span { color: #EAF2FC; }
/* The gold marks read fine on a dark ground, so they take the lighter brand gold rather than the text tone. */
.section--dark .mk-stars, .mk-cta .mk-stars,
.section--dark .mk-answer .q, .mk-cta .mk-answer .q,
.section--dark .mk-ol li::before, .mk-cta .mk-ol li::before,
.section--dark .q-eyebrow, .mk-cta .q-eyebrow { color: var(--gold-2); }

/* Facebook review card gallery on /reviews/. The cards are square social images, so the grid keeps
   them square and lets the row count fall from three to two to one. */
.mk-fbgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mk-fbcard { display: block; border-radius: 16px; overflow: hidden; background: var(--paper);
  border: 1px solid var(--line-2); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.mk-fbcard:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.16); }
.mk-fbcard img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .mk-fbgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 560px) { .mk-fbgrid { grid-template-columns: minmax(0, 1fr); } }

/* Ulla's card carries a before and after pair, so it is given more width than the square cards. */
.mk-fbcard--wide { grid-column: span 2; }
@media (max-width: 560px) { .mk-fbcard--wide { grid-column: span 1; } }

/* The one line Ken wants carried through the whole funnel: two things from the patient, everything
   else from us, and someone beside them from the moment they land. */
.mk-refrain { margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--ink); max-width: 62ch; }
.section--dark .mk-refrain, .mk-cta .mk-refrain, .band--midnight .mk-refrain { color: #EAF2FC; }

/* ==================== CRM: routing, notifications, the assignment control (appended) ====================
   Team app only. Every class is prefixed .crm- so nothing here collides with the public site. */

/* Who gets what: one row per pipeline stage on /app/team/. */
.crm-route { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 3px 14px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--line); }
.crm-route:last-child { border-bottom: 0; }
.crm-route .st { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.crm-route .crm-select { min-height: 44px; }
.crm-route .rs { grid-column: 2; font-size: 12px; color: var(--muted); min-height: 16px; }
.crm-route .rs b { color: var(--ink); font-weight: 600; }
@media (max-width: 560px) {
  .crm-route { grid-template-columns: 1fr; gap: 5px; padding: 11px 0; }
  .crm-route .rs { grid-column: 1; }
}
.crm-routebar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.crm-routebar .fine { flex: 1 1 220px; }

/* Email me when a customer moves: a switch the size of a thumb. */
.crm-switch { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0;
  background: transparent; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink);
  text-align: left; }
.crm-switch .k { position: relative; width: 42px; height: 24px; border-radius: 999px; background: var(--line-2);
  flex: none; transition: background .15s var(--ease); }
.crm-switch .k::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 999px; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
  transition: transform .15s var(--ease); }
.crm-switch[aria-checked="true"] .k { background: var(--teal); }
.crm-switch[aria-checked="true"] .k::after { transform: translateX(18px); }
.crm-switch:focus-visible { outline: 0; }
.crm-switch:focus-visible .k { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.112); }
.crm-switch[disabled] { opacity: .55; cursor: not-allowed; }

/* Under the team member select on the customer 360: automatic or pinned, and the way back. */
.crm-assign { display: flex; gap: 4px 12px; align-items: center; flex-wrap: wrap; font-size: 12.5px;
  color: var(--muted); margin: -8px 0 12px; }
.crm-assign b { color: var(--ink); font-weight: 600; }
.crm-linkbtn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; border: 0;
  background: transparent; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--teal-text);
  cursor: pointer; text-decoration: underline; text-decoration-color: rgba(11, 122, 113, .35); }
.crm-linkbtn:hover { text-decoration-color: var(--teal-text); }

/* The notifications list. */
.crm-notif { border: 1px solid var(--line); border-radius: 11px; padding: 13px 15px; margin-bottom: 10px;
  background: var(--paper); }
.crm-notif.is-queued { border-left: 3px solid #0B4FA8; }
.crm-notif.is-failed { border-left: 3px solid var(--danger); }
.crm-notif .hd { display: flex; gap: 8px 12px; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; }
.crm-notif .hd > div { min-width: 0; flex: 1 1 240px; }
.crm-notif .hd strong { display: block; font-size: 15px; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.crm-notif .pills { display: flex; gap: 6px; flex-wrap: wrap; flex: none; }
.crm-notif .meta { font-size: 12.5px; color: var(--muted); margin-top: 4px; display: flex; gap: 4px 10px;
  flex-wrap: wrap; align-items: center; }
.crm-notif .err { font-size: 12.5px; font-weight: 600; color: var(--danger); margin-top: 8px; overflow-wrap: anywhere; }
.crm-notif .why { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.crm-notif .r { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }
.crm-notif .r .crm-mini { min-height: 44px; }
.crm-notif .meta a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }
.crm-notif .crm-more > summary { min-height: 44px; }
.crm-pill--failed { background: var(--danger-soft); color: var(--danger); }
/* Thumb sized segment on screens Mikey reads on a phone. */
.crm-seg--tall button { min-height: 44px; padding: 7px 18px; }

/* Waiting on you: the signed in person's leads, grouped by stage, on the dashboard. */
.crm-mine { display: grid; gap: 14px 18px; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); }
.crm-mine-g { min-width: 0; }
.crm-mine-g h4 { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--sans);
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  padding: 0 3px 6px; border-bottom: 1px solid var(--line-2); margin-bottom: 4px; }
.crm-mine-g h4 .n { font-family: var(--mono); background: rgba(11, 31, 58, .08); border-radius: 999px;
  padding: 1px 7px; letter-spacing: 0; }
.crm-mine-a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 6px; border-radius: 8px;
  text-decoration: none; color: var(--ink); }
.crm-mine-a:hover { background: #F7FAFD; }
.crm-mine-a .n { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.crm-mine-a .lc { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.crm-mine-more { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-size: 12.5px;
  font-weight: 700; color: var(--teal-text); text-decoration: none; }
.crm-mine-more:hover { text-decoration: underline; }

/* ==================== calculator layout ====================
   The answer column runs long while the question column ends early, which left a large void on the
   left. The questions now stick while the answer scrolls beside them, and the closing CTA is a full
   width strip under both columns rather than a third card stacked on one side. */
.calc-cta { display: grid; grid-template-columns: 1fr auto; gap: 20px 40px; align-items: center;
  margin-top: clamp(24px, 3vw, 36px); padding: 26px clamp(22px, 3vw, 34px); border-radius: var(--radius);
  background: linear-gradient(120deg, #0C2244, var(--midnight)); color: #CBDAEE; box-shadow: var(--shadow-lg); }
.calc-cta h3 { color: #FFFFFF; }
.calc-cta p { margin: 8px 0 0; color: #A9BDD6; max-width: 56ch; font-size: 15px; }
.calc-cta__act { display: grid; gap: 10px; justify-items: end; }
.calc-cta__act .mk-note { margin: 0; color: #93A9C4; font-size: 12.5px; text-align: right; }
@media (max-width: 860px) {
  .calc-cta { grid-template-columns: minmax(0, 1fr); }
  .calc-cta__act { justify-items: stretch; }
  .calc-cta__act .btn { width: 100%; }
  .calc-cta__act .mk-note { text-align: left; }
}
@media (min-width: 1000px) {
  .calc-grid > :first-child, .mk-calc > :first-child { position: sticky; top: 92px; align-self: start; }
}

/* ==================== the short answer block, rebuilt ====================
   It was a flat 3px gold rule against a white box, which is the single most template looking element
   on the site. Now the card sits on the page with real depth, and it carries no accent rail: the gradient spine, its glow
   and the sheen were removed on 2026-09-22 (anti slop audit). */
.mk-answer {
  position: relative; border-left: 0; border-radius: 16px; overflow: hidden;
  background: linear-gradient(158deg, #FFFFFF 0%, #F5F9FF 58%, #EAF2FF 100%);
  padding: 24px 28px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 14px 30px -12px rgba(0, 0, 0, 0.16),
    0 34px 60px -30px rgba(0, 0, 0, 0.132);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.mk-answer > * { position: relative; z-index: 1; }

/* On a dark band the same card is glass. */
.section--dark .mk-answer, .mk-hero--dark .mk-answer, .mk-cta .mk-answer, .band--midnight .mk-answer {
  background: linear-gradient(158deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .04));
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 24px 50px -18px rgba(0, 0, 0, .55);
}

/* The same treatment for the CRM's coloured left rules, which had the identical flat look. */
.crm-slot, .crm-ev, .crm-notif.is-queued, .crm-notif.is-failed, .crm-lc.is-urgent { position: relative; }
.crm-slot::before, .crm-ev::before, .crm-notif.is-queued::before, .crm-notif.is-failed::before,
.crm-lc.is-urgent::before {
  content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px; border-radius: 3px;
  background: currentColor; opacity: .85;
}

@media (prefers-reduced-motion: reduce) {
  .mk-answer { transition: none; }
}

/* The primary call to action is gold, the same accent as the hairlines, the city pills and the ticks.
   Teal was the one colour outside the navy and gold system and it read as a stock button. Teal stays
   where it belongs: success marks, checks and the "we handle this" side of a comparison. */
.btn { font-weight: 700; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14); }
.btn:where(:not(.btn--ghost)):hover { background: #1557C9; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); transform: translateY(-1px); }
.btn--gold { background: #155EDB; color: #FFFFFF; border: 1px solid #124FBA; }
.section--dark .btn:not(.btn--ghost), .mk-cta .btn:not(.btn--ghost),
.band--midnight .btn:not(.btn--ghost) { color: #FFFFFF; }

/* Never white type on the gold button: it is the lowest contrast pairing in the palette. */
.btn:not(.btn--ghost), .btn--gold, .mk-nav .btn:not(.btn--ghost), .nav-cta { color: #FFFFFF; }
/* Ken 2026-09-27: the "Get Linked" nav CTA (solid #275D99, 6px corners, sampled from dentallinkvn.com).
   Defined here for any page that loads dl.css and carries a .nav-cta--linked in its top nav; the marketing
   top nav currently lives only on the home page (index.html, which styles this inline). Inert elsewhere. */
.nav-cta--linked { background: #275D99; color: #fff; border-radius: 6px; padding: 10px 26px; font-weight: 600; letter-spacing: .005em; box-shadow: none; opacity: 1; }
.nav-cta--linked:hover { background: #1F4C80; color: #fff; }
.mk-nav__guide { color: var(--gold-text); border-bottom: 1px solid rgba(21, 94, 219, .45); border-radius: 0;
  background: transparent; padding: 8px 4px; font-weight: 600; }

/* An outline button on a dark band is always light type. Never inherits the gold button's dark ink. */
.section--dark .btn--ghost, .mk-cta .btn--ghost, .band--midnight .btn--ghost,
.vs-card--dl .btn--ghost, .hl-card--we .btn--ghost {
  color: #FFFFFF; border-color: rgba(255, 255, 255, .32); background: transparent; }
.section--dark .btn--ghost:hover, .mk-cta .btn--ghost:hover, .band--midnight .btn--ghost:hover {
  color: #FFFFFF; border-color: var(--gold-2); background: rgba(255, 255, 255, .08); }

/* Today screen: prep cards, heating list, fact grids. Added 2026-09-09 with the Today and Engagement screens. */
.crm-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); text-decoration: none; color: inherit; margin-bottom: 8px; }
.crm-row:hover { border-color: var(--teal-deep); }
.crm-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 16px; margin: 12px 0 0; }
.crm-dl dt { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.crm-dl dd { margin: 2px 0 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.crm-list { margin: 12px 0 0; padding-left: 18px; font-size: 14px; }
.crm-list li + li { margin-top: 4px; }

/* ---------- audit 10 2026-09-23: on phones, rows of cards swipe sideways instead of stacking ----------
   Only grids whose children are cards, the reviews page's quote and Facebook cards, and the vetting figure row.
   The next card peeks in so the row reads as swipeable. No script. */
@media (max-width: 640px) {
  .grid:has(> .card), .grid:has(> .mk-quotecard), .mk-fbgrid, .mk-figrow {
    display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 84%;
    gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scrollbar-width: none; padding-bottom: 8px; align-items: start;
  }
  .grid:has(> .card)::-webkit-scrollbar, .grid:has(> .mk-quotecard)::-webkit-scrollbar,
  .mk-fbgrid::-webkit-scrollbar, .mk-figrow::-webkit-scrollbar { display: none; }
  .grid:has(> .card) > *, .grid:has(> .mk-quotecard) > *, .mk-fbgrid > *, .mk-figrow > * { scroll-snap-align: start; min-width: 0; }
}

/* ---------------------------------------------- audit 10 swipe tables 2026-09-23
   On a phone a stacked table or the 18 check list was up to 4,578 px of scrolling. Each table row, and each check,
   becomes a card in a sideways swipe row, the same 84 percent cards with the next one peeking in as the other swipe
   rows. Scoped to .section and the journey page's .cv-canvas, so the CRM tables (neither) keep their stacked rows. Labels get a 12 px floor. */
@media (max-width: 640px) {
  :is(.section, .cv-canvas) .tablewrap:has(> table.stacky) { overflow: visible; border: 0; background: transparent; border-radius: 0; }
  :is(.section, .cv-canvas) table.stacky { display: block; }
  :is(.section, .cv-canvas) table.stacky tbody {
    display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px; align-items: start;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 8px;
  }
  :is(.section, .cv-canvas) table.stacky tbody::-webkit-scrollbar { display: none; }
  :is(.section, .cv-canvas) table.stacky tr { min-width: 0; scroll-snap-align: start; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--paper); padding: 8px 0; }
  :is(.section, .cv-canvas) table.stacky tbody tr:last-child td { border-bottom: 0; }
  .mk-checks { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px; align-items: stretch;
    background: transparent; border: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scrollbar-width: none; padding: 12px 0 8px; }
  .mk-checks::-webkit-scrollbar { display: none; }
  .mk-checks > .mk-check { min-width: 0; scroll-snap-align: start; border: 1px solid var(--line); border-radius: 12px; }
  .tag, .mk-media__cap .n, .mk-rail-item span, .card__label { font-size: 12px; }
  .mk-buys { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mk-buy { padding: 12px; }
}