:root{
  --mist:#F7F9FA; --paper:#FFFFFF; --ink:#16263D; --mut:#616F82; --line:#DCE4EA;
  --teal:#0FA79B; --teal-ink:#0A7F76; --sage:#6E9683; --sage-soft:#E4EEE8;
  --navy:#16263D; --navy-2:#1F3352; --navy-mut:#8FA0B5; --navy-line:#2A3C57;
  --f:'Bricolage Grotesque','Bricolage Fallback',system-ui,sans-serif;
  --fd:'Bricolage Grotesque','Bricolage Display Fallback',system-ui,sans-serif;
}
/* Arial resized to Bricolage's widths, so text wraps the same before and after
   the web font swaps in. Unadjusted, the phone hero h1 went 3 lines -> 2 on
   swap and shoved the page up 37px (CLS). Bricolage has optical sizing: text
   sizes run ~5% wider than Arial, display sizes ("opsz" 96) ~8.5% narrower,
   hence a separate display fallback. Ratios measured in Chrome, per weight. */
@font-face{font-family:'Bricolage Fallback';src:local('Arial'),local('ArialMT');font-weight:100 549;size-adjust:105%;ascent-override:88.6%;descent-override:25.7%;line-gap-override:0%}
@font-face{font-family:'Bricolage Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:550 900;size-adjust:100%;ascent-override:93%;descent-override:27%;line-gap-override:0%}
@font-face{font-family:'Bricolage Display Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:100 900;size-adjust:91.5%;ascent-override:101.6%;descent-override:29.5%;line-gap-override:0%}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--f);background:var(--mist);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden;font-size:17px;line-height:1.5}
a{color:inherit}
button{font:inherit;cursor:pointer}
.wrap{max-width:1180px;margin:0 auto;padding:0 6vw}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px}

/* display type */
h1,h2,.display{font-family:var(--fd);font-variation-settings:"opsz" 96;font-weight:700;letter-spacing:-.035em;line-height:.98}
h1{font-size:clamp(2.15rem,6.4vw,5.6rem)}
/* Always a line break: the font scales down far enough that each sentence
   fits its own line at every width, so the headline never orphans a word. */
.brk{display:block;height:0;overflow:hidden}
h2{font-size:clamp(2rem,4.6vw,3.6rem)}
h3{font-variation-settings:"opsz" 40;font-weight:600;font-size:clamp(1.15rem,1.6vw,1.35rem);letter-spacing:-.01em}
p.lead{font-size:clamp(1.05rem,1.55vw,1.28rem);color:var(--mut);max-width:38ch;line-height:1.5}
p.lead b{color:var(--ink);font-weight:600}
.small{font-size:.92rem;color:var(--mut);line-height:1.6}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 6vw;background:color-mix(in srgb,var(--mist) 86%,transparent);backdrop-filter:blur(12px)}
.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--navy);color:#fff;padding:12px 20px;border-radius:0 0 10px 0;text-decoration:none;font-weight:600}
.skip:focus{left:0}
.logo{display:inline-flex;align-items:center;gap:10px;padding:8px 0;margin:-8px 0;font-weight:800;font-variation-settings:"opsz" 40;font-size:1.08rem;letter-spacing:-.025em;text-decoration:none}
.logo img{width:28px;height:28px;border-radius:8px;display:block;flex:0 0 auto}
.logo i{font-style:normal;color:var(--teal)}
.links{display:flex;gap:26px;font-weight:500;font-size:.95rem}
.links a{text-decoration:none;color:var(--mut);white-space:nowrap}
.links a:hover,.links a.on{color:var(--ink)}
.btn{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;font-weight:600;font-size:1rem;padding:15px 26px;border-radius:100px;border:none;transition:background .18s;white-space:nowrap}
.btn:hover{background:var(--teal-ink)}
/* Navy on brand teal is 5.09:1; the white it used to carry was 2.99:1. Fixing
   it this way keeps --teal itself untouched, so every fill, border and cell
   that uses the brand colour is unchanged — only this button's ink moves. */
.btn.teal{background:var(--teal);color:var(--navy)}
.btn.teal:hover{background:var(--teal-ink);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:var(--ink);background:transparent}
.btn.sm{padding:11px 20px;font-size:.92rem}
.burger{display:none;background:none;border:none;font-weight:600;font-size:.95rem;color:var(--ink);padding:11px 12px;margin:-11px -12px}
@media(max-width:1040px){.links,.nav-btn{display:none}.burger{display:block}}
.menu{position:fixed;inset:0;z-index:50;background:var(--navy);color:#fff;display:none;flex-direction:column;justify-content:flex-start;padding:9vh 8vw 6vh;gap:10px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.menu.open{display:flex}
.menu > a{text-decoration:none;font-size:clamp(1.65rem,6.2vw,3rem);font-weight:700;letter-spacing:-.03em;font-variation-settings:"opsz" 96;line-height:1.15;padding:7px 0}
.menu > a.sub{font-size:1.05rem;font-weight:500;color:var(--navy-mut);margin-top:8px;padding:13px 0}
.menu-close{position:absolute;top:12px;right:calc(8vw - 12px);background:none;border:none;color:#fff;font-weight:600;padding:12px}

/* hero */
.hero{min-height:100svh;display:grid;align-items:center;padding:20vh 0 10vh;position:relative}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:5vw;align-items:center}
.hero-copy .btn{margin-top:36px;margin-right:14px}
.hero-copy .lead{margin-top:22px}
.guarantee{margin-top:32px;display:flex;gap:12px;align-items:flex-start;max-width:44ch;font-size:.95rem;color:var(--mut);line-height:1.5}
.guarantee::before{content:"";flex:0 0 10px;height:10px;border-radius:50%;background:var(--teal);margin-top:7px}
.guarantee b{color:var(--ink);font-weight:600}
@media(max-width:820px){.hero .wrap{grid-template-columns:1fr}.hero{padding-top:16vh}}
/* Home H1 (2026-10-01). "Healthcare marketing agency for cash-pay practices" is set in
   three phrase lines with .brk: "Healthcare / marketing agency / for cash-pay practices",
   the same at every width. Left to wrap at 12.2cqi it ran to four or five ragged lines
   that changed from one width to the next and stood taller than the calendar; two lines
   (about 45px at 1440) read too small. Sized from its own column (container query units):
   the widest line, "for cash-pay practices", is about 9.14em, so 10.4cqi leaves ~5% before
   it wraps, about 58px at 1440. "cash-pay" is wrapped in .nowrap so it never splits at
   the hyphen. Phones use the same cqi with a lower floor, so a 320px screen still fits.
   The vw values are fallbacks for browsers without container units.
   An inline-size container has no intrinsic width, so .wrap needs an explicit width.
   Never request a new ?v= stamp before it is deployed: the edge caches whatever the old
   deployment returns under that URL for hours (it happened on 2026-09-18). */
.nowrap{white-space:nowrap}
.hero .wrap{width:100%}
.hero-copy{container-type:inline-size}
.hero h1{font-size:clamp(2.15rem,4vw,4.6rem);font-size:clamp(2.15rem,10.4cqi,4.6rem);text-wrap:balance}
@media(max-width:820px){.hero h1{font-size:clamp(1.85rem,9.1vw,3.9rem);font-size:clamp(1.85rem,10.4cqi,3.9rem)}}

/* the calendar — the one bold element */
.cal{position:relative;width:100%;max-width:470px;margin-left:auto}
.cal-head{display:grid;grid-template-columns:54px repeat(5,1fr);gap:6px;margin-bottom:6px;font-size:.78rem;font-weight:600;color:var(--mut)}
.cal-head span{text-align:center}
.cal-body{display:grid;grid-template-columns:54px repeat(5,1fr);gap:6px}
.cal-time{font-size:.7rem;white-space:nowrap;color:var(--mut);display:flex;align-items:center;justify-content:flex-end;padding-right:6px;font-variant-numeric:tabular-nums}
.slot{aspect-ratio:1/.62;border:1.5px solid var(--line);border-radius:8px;background:var(--paper);transition:background .5s,border-color .5s,transform .5s;position:relative}
.slot.on{background:var(--teal);border-color:var(--teal);transform:scale(1.03)}
.slot.on.rt{background:var(--sage);border-color:var(--sage)}
.slot.on::after{content:"";position:absolute;left:8px;top:8px;width:26%;height:5px;border-radius:3px;background:rgba(255,255,255,.75)}
.cal-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;font-size:.85rem;color:var(--mut)}
.cal-foot .count{font-variation-settings:"opsz" 96;font-weight:700;font-size:1.6rem;color:var(--ink);letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.cal-foot .count small{font-size:.85rem;font-weight:500;color:var(--mut);letter-spacing:0;margin-left:6px;white-space:nowrap}
.legend{display:flex;gap:16px;flex-wrap:wrap}
.legend span{white-space:nowrap}
.legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px;background:var(--teal)}
.legend span.rt::before{background:var(--sage)}
@media(max-width:820px){.cal{max-width:100%;margin-top:6vh}.cal-body>:nth-child(n+37){display:none}}

/* sections */
section{padding:12vh 0}
section.tight{padding:8vh 0}
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:6vw;align-items:start}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:4vh}}
.split h2{max-width:14ch}
.split p{max-width:52ch;color:var(--mut);font-size:1.08rem;line-height:1.6}
.split p b{color:var(--ink);font-weight:600}
.split p + p{margin-top:1.2em}

/* ruled rows */
.rows{border-top:1.5px solid var(--line)}
.row{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1fr);gap:0 4vw;padding:3.4vh 0;border-bottom:1.5px solid var(--line);align-items:baseline}
/* A second paragraph would auto-place into the next grid row's first column,
   under the h3. Pin it beside the first instead; row-gap is 0 so the margin
   alone sets the spacing, as in .split. Undone below for the single column. */
.row > p ~ p{grid-column:2;margin-top:1.2em}
.row h3{transition:color .2s}
.row h3 a{display:inline-block;padding:14px 6px;margin:-14px -6px}
/* standalone call-to-action links that sit alone on their line */
.offer .small a,.embed-alt a{display:inline-block;padding:13px 4px;margin:-13px -4px}
.row:hover h3{color:var(--teal-ink)}
.row p{color:var(--mut);line-height:1.55;font-size:1.02rem}
.row p b{color:var(--ink);font-weight:600}
.row p > a:only-child{display:inline-block;padding:12px 0;margin:-12px 0}
.row.core h3{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:700;font-family:var(--fd);font-variation-settings:"opsz" 96;letter-spacing:-.03em}
@media(max-width:640px){.row{grid-template-columns:1fr;gap:8px}.row > p ~ p{grid-column:auto;margin-top:0}}

/* weeks (pilot sequence) */
.weeks{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1.5px solid var(--line);margin-top:6vh}
.week{padding:4vh 4vw 4vh 0;border-right:1.5px solid var(--line);padding-left:3vw}
.week:first-child{padding-left:0}
.week:last-child{border-right:none}
.week .wk{font-size:.85rem;font-weight:600;color:var(--teal-ink);font-variant-numeric:tabular-nums}
.week h3{margin:12px 0 10px;font-size:1.3rem}
.week p{font-size:.97rem;color:var(--mut);line-height:1.55}
.week p b{color:var(--ink);font-weight:600}
@media(max-width:900px){.weeks{grid-template-columns:1fr 1fr}.week{border-bottom:1.5px solid var(--line)}.week:nth-child(2n){border-right:none}.week:nth-child(odd){padding-left:0}.week:nth-child(even){padding-left:4vw}}
@media(max-width:560px){.weeks{grid-template-columns:1fr}.week{border-right:none;padding-left:0}.week:nth-child(even){padding-left:0}}

/* navy band */
.band{background:var(--navy);color:#fff;padding:14vh 0;border-top:3px solid var(--teal)}
.band .display{font-size:clamp(1.8rem,4vw,3.2rem);line-height:1.25;max-width:26ch;letter-spacing:-.025em}
.band .display span.num{color:var(--teal)}
.band .small{color:var(--navy-mut);margin-top:28px;max-width:50ch}
/* Height raised to clear 44px. Width deliberately left tied to the digits:
   site.js sizes each field to its own content so the blinking caret sits
   flush against the number, and a min-width would strand the caret out at
   the edge of an empty box. An inline field in a sentence is covered by the
   inline exception in WCAG 2.5.8 anyway. */
.num{display:inline-block;background:transparent;border:none;border-bottom:4px solid var(--teal);color:var(--teal);font:inherit;width:3.2ch;text-align:center;padding:3px 0;font-variant-numeric:tabular-nums}
.num:focus{outline:none;border-bottom-color:#fff}
/* editable-number affordance: a caret that blinks until you actually focus the
   field, so the numbers read as inputs rather than as printed text */
.numw{position:relative;display:inline-block;margin-right:.18em}
.numw .num{width:auto;min-width:1ch;text-align:left;caret-color:#fff}
.numw::after{content:"";position:absolute;right:-.08em;top:8%;height:70%;width:.07em;min-width:2px;background:var(--teal);animation:caret 1.06s steps(1) infinite;pointer-events:none}
.numw.typing::after{display:none}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield;appearance:textfield}

/* proof */
/* stat banner: navy field, teal numerals. Colour comes from the numbers rather
   than a flat field — teal reads 5.09:1 here, the muted labels 5.70:1. */
.stats{background:var(--navy);color:#fff;padding:10vh 0;border-top:3px solid var(--teal)}
.stats .proof{border:none;padding:0}
.stats .proof strong{color:var(--teal)}
.stats .proof span{color:var(--navy-mut)}
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:4vw;padding:6vh 0;border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line)}
.proof strong{display:block;font-variation-settings:"opsz" 96;font-weight:700;font-size:clamp(2.4rem,5vw,4rem);letter-spacing:-.035em;line-height:1}
.proof span{display:block;margin-top:8px;color:var(--mut);font-size:.95rem;max-width:22ch}
@media(max-width:640px){.proof{grid-template-columns:1fr;gap:4vh}}

/* the platforms we run */
.platforms{display:flex;align-items:center;justify-content:center;gap:clamp(40px,7vw,110px);flex-wrap:wrap;padding:9vh 0 0}
.platforms a{display:block;padding:9px 0;transition:transform .3s cubic-bezier(.22,.61,.36,1),filter .3s ease}
/* a slow drift, offset per logo so they never bob in lockstep */
.platforms a:nth-of-type(1){animation:drift 7s ease-in-out infinite}
.platforms a:nth-of-type(2){animation:drift 7s ease-in-out -3.5s infinite}
.platforms a:hover{transform:translateY(-6px) scale(1.03)}
.platforms img{display:block;height:clamp(46px,5.2vw,70px);width:auto}
.platforms a:nth-of-type(2) img{height:clamp(26px,3vw,40px)}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.platforms-cap{text-align:center;margin-top:5.5vh;color:var(--mut);font-size:.98rem;line-height:1.6;max-width:46ch;margin-left:auto;margin-right:auto}
@media(max-width:620px){.platforms{gap:34px;padding-top:7vh}}
@media(prefers-reduced-motion:reduce){.platforms a{animation:none}.platforms a:hover{transform:none}}


/* documentary film */
.film{position:relative;aspect-ratio:16/9;background:var(--navy);border-radius:20px;overflow:hidden;border-top:3px solid var(--teal)}
.film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.film-ph{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:12px;text-align:center;padding:6vh 8%;color:var(--navy-mut)}
.film-ph b{color:#fff;font-family:var(--fd);font-variation-settings:"opsz" 96;font-weight:700;font-size:clamp(1.3rem,3vw,2.1rem);letter-spacing:-.025em;max-width:20ch;line-height:1.15}
.film-badge{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.film-note{font-size:.9rem;max-width:44ch;line-height:1.55}
.film-note code{font-family:ui-monospace,monospace;font-size:.85em;color:#fff}
.film.ready{cursor:pointer}
.film.ready .film-ph{background:linear-gradient(180deg,rgba(22,38,61,.15),rgba(22,38,61,.75))}
.film-play{width:74px;height:74px;border-radius:50%;background:var(--teal);display:grid;place-content:center;transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.film.ready:hover .film-play{transform:scale(1.08)}
.film-play::after{content:"";border-left:20px solid var(--navy);border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
@media(prefers-reduced-motion:reduce){.film-play{transition:none}}

/* faq */
.faq{border-top:1.5px solid var(--line);margin-top:5vh}
.q{border-bottom:1.5px solid var(--line)}
.q button{width:100%;text-align:left;background:none;border:none;padding:3vh 0;display:flex;justify-content:space-between;gap:24px;align-items:center;font-weight:600;font-size:1.12rem;color:var(--ink)}
.q button::after{content:"+";font-weight:400;font-size:1.6rem;color:var(--mut);transition:transform .2s}
.q.open button::after{transform:rotate(45deg)}
.q .a{display:grid;grid-template-rows:0fr;opacity:0;color:var(--mut);line-height:1.6;max-width:62ch;transition:grid-template-rows .34s cubic-bezier(.4,0,.2,1),opacity .26s ease}
.q .a>div{overflow:hidden;padding-bottom:0;transition:padding-bottom .34s cubic-bezier(.4,0,.2,1)}
.q.open .a>div{padding-bottom:3.4vh}
.q .a b{color:var(--ink);font-weight:600}
.q.open .a{grid-template-rows:1fr;opacity:1}
div.q>h3{margin:0;font:inherit;letter-spacing:inherit;font-variation-settings:inherit;color:inherit}

/* cost */
.cost{background:var(--paper);border:1.5px solid var(--line);border-top:3px solid var(--teal);border-radius:20px;padding:5vh 5vw;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5vw;align-items:center;margin-top:5vh}
.cost .price{font-variation-settings:"opsz" 96;font-weight:700;font-size:clamp(2.6rem,6vw,4.8rem);letter-spacing:-.04em;line-height:1}
.cost .price.txt{font-size:clamp(1.8rem,3.4vw,2.9rem);max-width:14ch}
.cost .price small{display:block;font-size:1rem;font-weight:500;color:var(--mut);letter-spacing:0;margin-top:10px}
.cost ul{list-style:none;display:grid;gap:14px}
.cost li{padding-left:22px;position:relative;color:var(--mut);line-height:1.5}
.cost li b{color:var(--ink);font-weight:600}
.cost li::before{content:"";position:absolute;left:0;top:10px;width:9px;height:9px;border-radius:50%;background:var(--teal)}
@media(max-width:760px){.cost{grid-template-columns:1fr}}

/* close */
.close{background:var(--navy);color:#fff;padding:18vh 0;border-top:3px solid var(--teal)}
.close h2{font-size:clamp(3rem,9vw,7.6rem);max-width:12ch}
.close .btn{margin-top:36px}
.close .alt{display:block;margin-top:22px;color:var(--navy-mut);font-size:.95rem}
.close .alt a{color:#fff}
.close.light{background:var(--mist);color:var(--ink)}
.close.light .alt{color:var(--mut)}
.close.light .alt a{color:var(--ink)}

/* page heads */
.pg{padding:22vh 0 8vh}
.pg .lead{margin-top:22px}
.pg .btn{margin-top:32px}
/* .pg kept its desktop 22vh on phones, clearing the fixed nav by 121px against
   the hero's 70px — same furniture, nearly twice the gap. Match the hero. Must
   sit after the shorthand above, which would otherwise reset padding-top. The
   floor matters too: 16vh of a 390px-tall landscape phone is 62px, under the
   65px nav, which would slide the title beneath it. */
@media(max-width:820px){.pg{padding-top:max(16vh,96px)}}
.kick{font-size:.95rem;font-weight:600;color:var(--teal-ink);margin-bottom:18px}

/* form */
/* honeypot: never shown, never announced, only bots fill it */
/* step markers make the two-part flow legible without extra chrome */

/* booking — the embed gets the full column width on purpose: Google's
   appointment widget only lays its date grid and time list side by side
   above ~700px, and no sidebar split holds that on a 1280 laptop. */
.book-note{display:flex;gap:12px;align-items:flex-start;max-width:900px;margin:0 auto 3.5vh;font-size:.95rem;color:var(--mut);line-height:1.55}
.book-note::before{content:"";flex:0 0 10px;height:10px;border-radius:50%;background:var(--teal);margin-top:7px}
.book-note b{color:var(--ink);font-weight:600}

.embed{position:relative;max-width:900px;margin-left:auto;margin-right:auto;background:var(--paper);border:1.5px solid var(--line);border-top:3px solid var(--teal);border-radius:20px;overflow:hidden;min-height:660px}
.embed iframe{display:block;width:100%;height:660px;border:0;opacity:0;transition:opacity .35s}
.embed.ready iframe{opacity:1}
.embed.failed iframe{display:none}
.embed .state{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:14px;text-align:center;padding:8vh 8%;color:var(--mut);font-size:.95rem;line-height:1.6}
.embed.ready .state,.embed.failed .load{display:none}
.embed .fail{display:none}
.embed.failed .fail{display:grid}
.embed .state b{color:var(--ink);font-weight:600;font-size:1.05rem}
.fail-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.dots{display:flex;gap:7px}
.dots i{width:9px;height:9px;border-radius:50%;background:var(--line);animation:pulse 1.15s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.16s}
.dots i:nth-child(3){animation-delay:.32s}
@keyframes pulse{0%,100%{background:var(--line);transform:scale(1)}45%{background:var(--teal);transform:scale(1.25)}}
.embed-alt{margin:16px auto 0;max-width:900px;font-size:.9rem;color:var(--mut)}
.embed-alt a{color:var(--ink);font-weight:600}
@media(max-width:900px){.embed{min-height:720px}.embed iframe{height:720px}}
@media(max-width:520px){.embed{min-height:780px}.embed iframe{height:780px}}
@media(prefers-reduced-motion:reduce){.dots i{animation:none}.embed iframe{transition:none}}

footer{padding:5vh 6vw;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.85rem;color:var(--mut);border-top:1.5px solid var(--line)}
footer a{text-decoration:none;display:inline-block;padding:14px 4px;margin:-14px 0}
footer span{display:inline-flex;flex-wrap:wrap;align-items:center;gap:0 20px}
footer a:hover{color:var(--ink)}
/* The copyright line carries a link mid-sentence, so it flows as text rather
   than as flex items (the 20px gap would split the sentence). */
footer .legal{display:block}
footer .legal a{padding:14px 0}
/* ---------- motion ----------------------------------------------------------
   Reveal classes are applied by JS, never in the markup, so if scripts fail or
   are blocked the page renders fully visible rather than blank. ------------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .62s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}

/* hero entrance */
.lift{opacity:0;transform:translateY(18px);animation:lift .78s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes lift{to{opacity:1;transform:none}}

/* nav gains an edge once you leave the top of the page */
nav{transition:box-shadow .25s ease,border-color .25s ease;border-bottom:1px solid transparent}
nav.stuck{border-bottom-color:var(--line);box-shadow:0 1px 18px rgba(22,38,61,.05)}

/* buttons pick up a touch of physicality */
.btn{transition:background .18s ease,transform .18s ease,box-shadow .18s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(22,38,61,.14)}
.btn:active{transform:translateY(0);box-shadow:none}
.row{transition:background .25s ease}
.q button{transition:color .18s ease}
.q button:hover{color:var(--teal-ink)}

/* fixed nav would otherwise cover anchored headings */
[id]{scroll-margin-top:96px}

@media(prefers-reduced-motion:reduce){
  .slot,.btn,.q button::after{transition:none}
  .numw::after{animation:none;opacity:1}
  .reveal{opacity:1;transform:none;transition:none}
  .lift{opacity:1;transform:none;animation:none}
  .btn:hover{transform:none;box-shadow:none}
  .q .a,.q .a>div{transition:none}
}

/* specialty index — the internal-link hub crawlers follow to every vertical */
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:14px}
.spec{display:block;background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:24px 22px 26px;text-decoration:none;transition:background .2s ease,border-color .2s ease,transform .2s ease}
.spec:hover{background:var(--sage-soft);border-color:var(--sage);transform:translateY(-2px)}
.spec h3{font-variation-settings:"opsz" 40;font-weight:600;font-size:1.06rem;letter-spacing:-.01em;margin-bottom:7px}
.spec p{color:var(--mut);font-size:.94rem;line-height:1.5}
.spec::after{content:"\2192";display:block;margin-top:14px;color:var(--teal-ink);font-weight:600;transform:translateX(0);transition:transform .2s ease}
.spec:hover::after{transform:translateX(5px)}
@media(prefers-reduced-motion:reduce){.spec,.spec::after{transition:none}.spec:hover{transform:none}}

/* specialty page: the vertical-specific proof strip */
.vert{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:4vw;padding:6vh 0;border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line)}
.vert h3{font-variation-settings:"opsz" 40;font-weight:600;font-size:1.02rem;margin-bottom:8px}
.vert p{color:var(--mut);font-size:.95rem;line-height:1.55}

/* nav dropdown */
.drop{position:relative;display:inline-flex;align-items:center;gap:5px}
/* the label navigates; the chevron opens the list */
.drop-link{text-decoration:none;color:var(--mut);font-weight:500;font-size:.95rem;white-space:nowrap;transition:color .18s ease}
.drop-link:hover,.drop.open .drop-link,.drop-link.on{color:var(--ink)}
.drop-tog{background:none;border:none;padding:2px;cursor:pointer;color:var(--mut);
  display:inline-flex;align-items:center;transition:color .18s ease}
.drop-tog::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-1px);
  transition:transform .22s ease}
.drop.open .drop-tog{color:var(--ink)}
.drop.open .drop-tog::after{transform:rotate(-135deg) translateY(-1px)}
.drop-tog:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:3px}
.drop-btn{background:none;border:none;font:inherit;font-weight:500;font-size:.95rem;color:var(--mut);cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:6px;transition:color .18s ease}
.drop-btn::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-1px);transition:transform .22s ease}
.drop-btn:hover,.drop.open .drop-btn{color:var(--ink)}
.drop.open .drop-btn::after{transform:rotate(-135deg) translateY(-1px)}
.drop-menu{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(-6px);min-width:252px;background:var(--paper);border:1.5px solid var(--line);border-top:3px solid var(--teal);border-radius:14px;padding:8px;box-shadow:0 18px 44px -18px rgba(22,38,61,.28);opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:60}
.drop.open .drop-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
/* hover bridge so the pointer can cross the gap without closing it */
.drop-menu::before{content:"";position:absolute;top:-18px;left:0;right:0;height:18px}
.drop-menu a{display:block;padding:10px 14px;border-radius:9px;text-decoration:none;color:var(--mut);font-size:.93rem;font-weight:500;white-space:nowrap;transition:background .16s ease,color .16s ease}
.drop-menu a:hover,.drop-menu a:focus-visible{background:var(--sage-soft);color:var(--ink)}
.drop-menu a.on{color:var(--ink);font-weight:600}
@media(prefers-reduced-motion:reduce){.drop-btn::after,.drop-menu{transition:none}}

/* specialties inside the mobile overlay */
/* Collapsible menu sections. Sixteen sub-links laid out flat overflowed a 390x844
   phone by 82px and gave every one a 20px tap target — half the 44px minimum.
   <details> rather than a JS accordion: keyboard and screen-reader behaviour come
   free, and the menu still works if the script fails. */
.menu-group{border-top:1px solid rgba(255,255,255,.15)}
.menu-group summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:15px 0;color:#fff;
  font-size:1.3rem;font-weight:700;letter-spacing:-.02em}
.menu-group summary::-webkit-details-marker{display:none}
.menu-group summary::after{content:"";flex:none;width:10px;height:10px;margin-right:5px;
  border-right:2.5px solid var(--teal);border-bottom:2.5px solid var(--teal);
  transform:translateY(-3px) rotate(45deg);transition:transform .22s ease}
.menu-group[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.menu-group summary:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px}
.menu .menu-sub{display:grid;padding-bottom:8px}
.menu .menu-sub a{font-size:1.02rem;font-weight:500;color:var(--navy-mut);
  line-height:1.25;padding:12px 0;text-decoration:none}
.menu .menu-sub a:hover,.menu .menu-sub a:focus-visible{color:#fff}
@media(prefers-reduced-motion:reduce){.menu-group summary::after{transition:none}}

/* cross-links between specialty pages */
.more{padding-top:5vh;border-top:1.5px solid var(--line)}
.more h2{font-size:clamp(1.3rem,2.4vw,1.7rem);margin-bottom:3vh}
.more-list{display:flex;flex-wrap:wrap;gap:10px}
.more-list a{display:inline-block;padding:11px 16px;border:1.5px solid var(--line);border-radius:100px;text-decoration:none;color:var(--mut);font-size:.92rem;font-weight:500;transition:border-color .18s ease,color .18s ease}
.more-list a:hover{border-color:var(--ink);color:var(--ink)}

/* the pilot price card */
.pilot-card{background:var(--paper);border:1.5px solid var(--line);border-top:3px solid var(--teal);border-radius:20px;padding:5vh 5vw;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:5vw;align-items:center;margin-top:5vh}
.pilot-card .price{font-variation-settings:"opsz" 96;font-weight:700;font-size:clamp(2.8rem,6vw,4.6rem);letter-spacing:-.04em;line-height:1}
.pilot-card .price small{display:block;font-size:1rem;font-weight:500;color:var(--mut);letter-spacing:0;margin-top:12px;line-height:1.5}
.pilot-card ul{list-style:none;display:grid;gap:15px}
.pilot-card li{padding-left:24px;position:relative;color:var(--mut);line-height:1.55}
.pilot-card li b{color:var(--ink);font-weight:600}
.pilot-card li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;background:var(--teal)}
@media(max-width:760px){.pilot-card{grid-template-columns:1fr;padding:5vh 7vw}}

/* ---------- hero texture -------------------------------------------------
   A faint calendar grid — the site's own motif rather than decorative noise.
   Pure gradients, so it costs no request and no bytes beyond this rule. --- */
.hero{position:relative;overflow:hidden}
.hero > .wrap{position:relative;z-index:2}
.hero::before{content:"";position:absolute;inset:-1px;z-index:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,transparent 0 55px,var(--line) 55px 56px),
    repeating-linear-gradient(90deg,transparent 0 55px,var(--line) 55px 56px);
  opacity:.55;
  -webkit-mask-image:radial-gradient(115% 85% at 68% 30%,#000 0%,rgba(0,0,0,.35) 45%,transparent 72%);
  mask-image:radial-gradient(115% 85% at 68% 30%,#000 0%,rgba(0,0,0,.35) 45%,transparent 72%)}
/* a soft teal lift behind the calendar so it sits above the grid */
.hero::after{content:"";position:absolute;z-index:1;pointer-events:none;
  right:-6%;top:8%;width:62%;height:76%;
  background:radial-gradient(closest-side,rgba(15,167,155,.14),transparent 70%)}
@media(max-width:820px){
  .hero::after{right:-20%;top:auto;bottom:2%;width:110%;height:46%}
  .hero::before{background-size:auto;opacity:.4}
}

/* ---------- section rhythm ----------------------------------------------
   Alternating tones give every block a visible edge without adding more
   full-bleed stripes. mist and paper differ by only 1.1:1, which reads as a
   seam rather than a band — the eyebrow labels carry the rest. ---------- */
.pale{background:var(--paper)}
.tint{background:var(--mist)}
.eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--teal-ink);margin-bottom:14px}
/* Inside .split the eyebrow would take a grid cell of its own and push the
   heading into the second column, so it is placed in the same cell above it. */
.split{position:relative}
.split > .eyebrow{grid-column:1;grid-row:1;align-self:start;margin:0}
.split > .eyebrow + h2{grid-column:1;grid-row:1;margin-top:30px}

/* the offer, as an inset dark panel rather than another full-width stripe */
.offer{background:var(--mist)}
.offer > .wrap{background:var(--navy);color:#fff;border-radius:24px;
  border-top:3px solid var(--teal);padding:7vh 5vw;max-width:1100px}
.offer .eyebrow{color:var(--teal)}
.offer h2{color:#fff}
.offer .split p{color:var(--navy-mut)}
.offer .split p b{color:#fff}
.offer .pilot-card{background:transparent;border:none;border-top:1.5px solid var(--navy-line);
  border-radius:0;padding:5vh 0 0;margin-top:4vh}
.offer .pilot-card .price{color:#fff}
.offer .pilot-card .price small{color:var(--navy-mut)}
.offer .pilot-card li{color:var(--navy-mut)}
.offer .pilot-card li b{color:#fff}
.offer .small{color:var(--navy-mut)}
.offer .small a{color:#fff}
@media(max-width:760px){.offer > .wrap{border-radius:18px;padding:6vh 7vw}}

/* The documentary section stays hidden unless site.js finds a video id, or the
   page opts into the in-production card with data-still="on". Default is hidden
   so a live site never shows an accidental "coming soon" panel. */
/* The documentary sits between two white sections, so hiding it leaves #specialties
   and #services meeting white-on-white and the page loses its separator right there.
   Pass the film's tint down to the next section, and that section's white to the one
   after, so the alternation survives the gap. Keyed off the attributes rather than the
   classes site.js adds at runtime, so it is correct at first paint with no colour flash
   — and it reverts on its own the moment a video id or data-still is set. The navy
   stats banner already separates #services from the FAQ below, so only this one
   section needs to change hands. */
.film-section:has(.film[data-yt=""]:not([data-still="on"])) + #services{background:var(--mist)}

.film-section{display:none}
.film-section.has-video,.film-section.has-still{display:block}

/* The in-production card. No poster frame to sit behind it, so it carries its own
   quiet texture rather than reading as an empty navy box, and it takes a shorter
   ratio than the 16/9 player — it is a title card, not a video waiting to load. */
.film-section.has-still .film{aspect-ratio:21/9;cursor:default;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.07) 1px,transparent 0);
  background-size:22px 22px}
.film-section.has-still .film-ph{gap:16px}
.film-section.has-still .film-badge{color:var(--teal)}
@media(max-width:700px){.film-section.has-still .film{aspect-ratio:4/3}}

/* Display leading of .98 is right at 90px and cramped at 34px, where the
   descenders of one line meet the caps of the next. */
@media(max-width:820px){
  h1,h2,.display{line-height:1.06}
  .band .display{line-height:1.28}
}

/* the four weeks draw a rule as each step arrives */
.weeks .week{position:relative}
.weeks .week::after{content:"";position:absolute;left:0;top:0;height:3px;width:0;
  background:var(--teal);transition:width .55s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i,0) * 110ms)}
.weeks .week.drawn::after{width:100%}
@media(max-width:900px){.weeks .week::after{width:0}.weeks .week.drawn::after{width:100%}}
@media(prefers-reduced-motion:reduce){
  .weeks .week::after{transition:none;width:100%}
}
.proof strong{font-variant-numeric:tabular-nums}

/* ---------- page visuals -------------------------------------------------
   Every one has a static resting state: reduced motion, a JS failure or a
   crawler all get a readable diagram. Motion only adds sequence. --------- */

.v-track{fill:var(--line)}
.v-lab{fill:var(--ink);font-size:14px;font-weight:600;text-anchor:middle}
.v-sub{fill:var(--mut);font-size:12px;text-anchor:middle}
.v-head{fill:var(--ink);font-size:13px;font-weight:600;text-anchor:middle}
.v-note{fill:var(--mut);font-size:12.5px;text-anchor:middle;font-style:italic}

/* call recovery */
.v-dot{fill:var(--paper);stroke-width:3}
.v-dot.ring{stroke:var(--teal)}
.v-dot.miss{stroke:#C2521A}
.v-dot.back{stroke:var(--teal)}
.v-dot.ok{stroke:var(--teal);fill:var(--teal)}
.v-flow{stroke:var(--teal);stroke-width:3;fill:none;stroke-dasharray:400;stroke-dashoffset:400}
.v-step{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease;transition-delay:var(--d,0s)}
.hviz.in .v-step{opacity:1;transform:none}
.hviz.in .v-flow{transition:stroke-dashoffset 1.4s ease .3s;stroke-dashoffset:0}

/* follow-up columns */
.v-col{opacity:0;transition:opacity .5s ease;transition-delay:var(--d,0s)}
.hviz.in .v-col{opacity:1}
.v-card{fill:var(--sage-soft);stroke:var(--line);stroke-width:1.5}
.v-card.on{fill:var(--sage-soft)}
.v-card.ok{fill:var(--teal);stroke:var(--teal)}
.v-card.cold{fill:var(--mist);stroke:var(--line);opacity:.5}

/* seo curves */
.v-grid line{stroke:var(--line);stroke-width:1}
.v-axis{stroke:var(--line);stroke-width:1.5}
.v-line{fill:none;stroke-width:3;stroke-linecap:round;stroke-dasharray:700;stroke-dashoffset:700}
.v-line.ads{stroke:var(--mut)}
.v-line.seo{stroke:var(--teal)}
.hviz.in .v-line{transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1) .2s;stroke-dashoffset:0}
.v-end{opacity:0;transition:opacity .4s ease 1.5s}
.v-end.ads{fill:var(--mut)}.v-end.seo{fill:var(--teal)}
.hviz.in .v-end{opacity:1}
.v-key{font-size:12.5px;font-weight:600;text-anchor:start}
.v-key.ads{fill:var(--mut)}.v-key.seo{fill:var(--teal-ink)}

/* reactivation cells, built by script */
.r-cell{fill:var(--mist);stroke:var(--line);stroke-width:1.5;transition:fill .45s ease,stroke .45s ease}
.r-cell.woke{fill:var(--teal);stroke:var(--teal)}


@media(prefers-reduced-motion:reduce){
  .v-step,.v-col,.v-end{opacity:1;transform:none;transition:none}
  .v-flow,.v-line{stroke-dashoffset:0;transition:none}
  .r-cell.woke{transition:none}
}

/* first item in the services menu is the hub itself */
.drop-menu a:first-child{font-weight:600;color:var(--ink);border-bottom:1.5px solid var(--line);
  border-radius:9px 9px 0 0;margin-bottom:4px;padding-bottom:12px}

/* ---------- page hero with a visual alongside ---------------------------- */
.pg.has-viz > .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:5vw;align-items:start}
/* h1's 6.4vw is sized for a full-width hero; in half a column it ran to five
   lines and dwarfed the diagram beside it */
.pg.has-viz h1{font-size:clamp(2rem,4.6vw,4.05rem)}
.pg.has-viz .pg-copy{min-width:0}
/* Centring dropped the diagram well below the heading — on the SEO page by 152px.
   Align to the top instead, then push past the eyebrow so the visual starts level
   with the h1 rather than the label above it. Mirrors .kick exactly; keep in step */
.pg.has-viz .hviz{min-width:0;position:relative;margin-top:0}
.pg.has-viz .hviz svg{width:100%;height:auto;display:block;overflow:visible}
@media(max-width:900px){
  .pg.has-viz > .wrap{grid-template-columns:1fr;gap:5vh}
  .pg.has-viz .hviz{order:2;max-width:460px;margin:0 auto;width:100%}
}

/* Every hero diagram renders at the same CSS width, so identical user-unit type
   came out at 6.4px on the 564-wide missed-call viewBox and 11.5px on the
   328-wide concierge one. --vb (set per diagram, = viewBox width / 420) restates
   each size against one reference so they all render alike; --m lifts them
   together once the column narrows on mobile. */
.hviz{--m:1}
@media(max-width:620px){.hviz{--m:1.18}}
.hviz .hv-lab {font-size:calc(13px   * var(--vb,1) * var(--m))}
.hviz .hv-sub {font-size:calc(11px   * var(--vb,1) * var(--m))}
.hviz .v-lab  {font-size:calc(14px   * var(--vb,1) * var(--m))}
.hviz .v-sub  {font-size:calc(12px   * var(--vb,1) * var(--m))}
.hviz .v-head {font-size:calc(13px   * var(--vb,1) * var(--m))}
.hviz .v-note {font-size:calc(12.5px * var(--vb,1) * var(--m))}
.hviz .v-key  {font-size:calc(12.5px * var(--vb,1) * var(--m))}
/* carries size only — these two sit on navy and keep their own fill attribute */
.hviz .hv-mini{font-size:calc(11px   * var(--vb,1) * var(--m))}

/* shared vocabulary for the hero diagrams */
.hv-lab{fill:var(--ink);font-size:13px;font-weight:600;text-anchor:middle}
.hv-sub{fill:var(--mut);font-size:11px;text-anchor:middle}
.hv-cell{fill:var(--paper);stroke:var(--line);stroke-width:1.5;transition:fill .5s ease,stroke .5s ease}
.hv-cell.on{fill:var(--teal);stroke:var(--teal)}
.hv-cell.alt{fill:var(--sage);stroke:var(--sage)}
/* the undifferentiated enquiry pool, against the deliberate panel beside it */
.hv-speck{fill:var(--mut);opacity:.42}
.hv-line{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:520;stroke-dashoffset:520}
/* A static dashed rule, not a drawn stroke: .hv-line would fight this with
   its own dasharray and dashoffset */
.hv-guide{fill:none;stroke:var(--line);stroke-width:2;stroke-dasharray:6 7;stroke-linecap:round}
.hviz.in .hv-line{transition:stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1) .2s;stroke-dashoffset:0}
.hv-fade{opacity:0;transform:translateY(6px);transition:opacity .55s ease,transform .55s ease;
  transition-delay:var(--d,0s)}
.hviz.in .hv-fade{opacity:1;transform:none}
.hv-ring{fill:none;stroke:var(--teal);stroke-width:2.5}
.hv-muted{fill:var(--mist);stroke:var(--line);stroke-width:1.5}
.hv-dark{fill:var(--navy)}
.hv-accent{fill:var(--teal)}
.hv-warn{stroke:#C2521A;fill:none;stroke-width:2.5}
@media(prefers-reduced-motion:reduce){
  .hv-fade{opacity:1;transform:none;transition:none}
  .hv-line{stroke-dashoffset:0;transition:none}
  .hv-cell{transition:none}
}

/* ---------- blog ------------------------------------------------------------
   Built by scripts/build-blog.py. Posts are a narrow reading column; the index
   reuses the .spec card grid from the homepage. ------------------------------ */
.wrap.narrow{max-width:820px}
.pg.post-hero{padding:20vh 0 3vh}
.post-hero h1{font-size:clamp(2.1rem,5.2vw,3.7rem);max-width:22ch}
.post-hero .lead{max-width:62ch;margin-top:22px}
.kick a{color:inherit;text-decoration:none;display:inline-block;padding:12px 0;margin:-12px 0}
.kick a:hover{text-decoration:underline}
.post-meta{margin-top:20px;font-size:.9rem;color:var(--mut)}
.post-meta a{color:var(--ink);font-weight:600;text-underline-offset:3px}
.toc{background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:20px 24px;margin-bottom:5vh}
.toc p{font-weight:600;margin-bottom:6px}
.toc ul{margin:0;padding:0;list-style:none}
.toc a{display:inline-block;padding:6px 0;color:var(--mut);text-decoration:none;font-size:.98rem}
.toc a:hover{color:var(--ink);text-decoration:underline}
.post{font-size:1.08rem;line-height:1.72;color:var(--ink)}
.post h2{font-size:clamp(1.45rem,2.8vw,2rem);line-height:1.15;letter-spacing:-.02em;margin:7vh 0 1.8vh;scroll-margin-top:96px}
.post h3{margin:4vh 0 1vh}
.post p{margin:0 0 1.1em}
.post ul,.post ol{margin:0 0 1.3em;padding-left:1.3em}
.post ul{list-style:disc}
.post ol{list-style:decimal}
.post li{margin:.4em 0;padding-left:.2em}
.post a{color:var(--teal-ink);text-underline-offset:3px}
.post strong{font-weight:600}
.post .example,.post .callout{border:1.5px solid var(--line);border-radius:12px;padding:18px 22px;margin:2.6vh 0 3vh;background:var(--paper)}
.post .callout{border-left:4px solid var(--teal)}
.post .example > :last-child,.post .callout > :last-child{margin-bottom:0}
.post .example-label{font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink);margin-bottom:6px}
/* Comparison tables. build-blog.py wraps each table in .table-wrap so a wide one
   scrolls inside the column instead of widening the page on phones. */
.post .table-wrap{overflow-x:auto;margin:2.4vh 0 3vh;border:1.5px solid var(--line);border-radius:12px;background:var(--paper)}
.post table{width:100%;border-collapse:collapse;font-size:.95rem;line-height:1.5;min-width:520px}
.post th,.post td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line)}
.post thead th{font-weight:600;background:var(--mist)}
.post tbody tr:last-child td{border-bottom:0}
.post td:first-child,.post th:first-child{font-weight:600}
/* state pages: a cost per click under each search count */
.post td .cpc{display:block;font-size:.82em;color:var(--mut);font-weight:400}
/* A short comparison that has to show every column on a phone (home #agency): no
   min-width, so it fits the column instead of scrolling; tighter cells below 520px. */
.post .table-wrap.fit table{min-width:0}
@media(max-width:520px){.post .table-wrap.fit th,.post .table-wrap.fit td{padding:10px 9px;font-size:.86rem}}
.post-card{display:flex;flex-direction:column}
.post-card-kick{font-size:.8rem;font-weight:600;color:var(--teal-ink);margin-bottom:10px}
.post-card h2{font-variation-settings:"opsz" 40;font-weight:600;font-size:clamp(1.15rem,1.6vw,1.35rem);letter-spacing:-.01em;line-height:1.25;margin-bottom:10px}
.post-card p{color:var(--mut);font-size:.98rem;line-height:1.5}
.post-card-meta{margin-top:auto;padding-top:16px;font-size:.85rem;color:var(--mut)}
@media(max-width:640px){.pg.post-hero{padding-top:16vh}.post{font-size:1.02rem}.toc{padding:16px 18px}}

/* ---------- free audit form (/free-audit) -----------------------------------
   One page, one submit. Inputs are 48px tall and checkboxes sit inside 44px
   pills, so every target meets the touch-size floor. ------------------------ */
.hero-copy .btn.ghost{margin-right:0}
@media(max-width:640px){.hero-copy .btn + .btn{margin-top:12px}}
.pg.audit-hero{padding-bottom:3vh}
.audit-hero h1{font-size:clamp(2.1rem,5.4vw,4rem);max-width:18ch}
.audit-hero .lead{max-width:58ch}
.audit-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr);gap:5vw;align-items:start}
@media(max-width:900px){.audit-grid{grid-template-columns:1fr;gap:6vh}}
.audit-form{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:clamp(22px,3.2vw,40px)}
.audit-form fieldset{border:0;margin:0;padding:0;min-width:0}
.audit-form > fieldset + fieldset{margin-top:4vh;padding-top:3.6vh;border-top:1.5px solid var(--line)}
.audit-form > fieldset > legend{font-weight:700;font-size:1.15rem;letter-spacing:-.01em;margin-bottom:2.2vh;padding:0}
.form-note{font-size:.9rem;color:var(--mut);margin-bottom:3vh}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
@media(max-width:640px){.fields{grid-template-columns:1fr}}
.field-wide{grid-column:1/-1}
.field label,.field legend.sub{display:block;font-size:.92rem;font-weight:600;margin-bottom:7px;padding:0}
.field legend.sub{margin-bottom:10px}
.hint-inline{font-weight:400;color:var(--mut);margin-left:6px}
.req{color:var(--teal-ink)}
.audit-form input[type=text],.audit-form input[type=email],.audit-form input[type=tel],.audit-form select,.audit-form textarea{width:100%;min-height:48px;font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:11px 14px;transition:border-color .15s ease,box-shadow .15s ease;-webkit-appearance:none;appearance:none}
.audit-form select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235b6b7f' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.audit-form textarea{min-height:120px;resize:vertical;line-height:1.5}
.audit-form ::placeholder{color:#7d8896}
.audit-form input:focus,.audit-form select:focus,.audit-form textarea:focus{outline:none;border-color:var(--teal-ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 35%,transparent)}
.audit-form [aria-invalid=true]{border-color:#b42318}
.field-error{color:#b42318;font-size:.86rem;margin-top:6px}
.hint{font-size:.85rem;color:var(--mut);margin-top:6px}
.checks{display:flex;flex-wrap:wrap;gap:10px}
.check{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:8px 14px;border:1.5px solid var(--line);border-radius:100px;background:#fff;font-size:.95rem;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.check:has(input:checked){border-color:var(--teal-ink);background:var(--sage-soft)}
.check:has(input:focus-visible){box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 35%,transparent)}
.check input,.check-inline input{width:18px;height:18px;accent-color:var(--teal-ink);flex:none;margin:0}
.check-inline{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;line-height:1.5;cursor:pointer;padding:6px 0;font-weight:400}
.field .check-inline{font-weight:400;font-size:.95rem}
.check-inline input{margin-top:3px}
.check-inline a{color:var(--teal-ink)}
.consent{margin-top:1vh}
.form-status:not([hidden]){display:block;margin-top:2.4vh;padding:14px 16px;border-radius:10px;border:1.5px solid #f1c0bb;background:#fdf1f0;color:#7a1d14;font-size:.95rem;line-height:1.5}
.form-status a{color:inherit;display:inline-block;padding:10px 0;margin:-10px 0}
.audit-form button[type=submit]{margin-top:3vh;border:0;cursor:pointer;font:inherit;font-weight:600;font-size:1rem}
.audit-form button[disabled]{opacity:.6;cursor:progress}
.form-foot{margin-top:14px}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.audit-aside{position:sticky;top:110px}
@media(max-width:900px){.audit-aside{position:static}}
.audit-aside h2{font-size:clamp(1.3rem,2.2vw,1.7rem);margin-bottom:2.4vh}
.audit-list{list-style:none;margin:0 0 3vh;padding:0}
.audit-list li{padding:16px 0;border-top:1.5px solid var(--line);color:var(--mut);line-height:1.55}
.audit-list li b{display:block;color:var(--ink);font-weight:600;margin-bottom:4px}

/* Section titles: a floated legend stops the browser drawing it on the
   fieldset's top border. Checkboxes: revert whatever the global input rules
   (written for the homepage calculator) do, then size them explicitly. */
.audit-form > fieldset > legend{float:left;width:100%}
.audit-form > fieldset > legend + *{clear:both}
.audit-form input[type=checkbox]{all:revert;width:18px;height:18px;margin:0;flex:none;accent-color:var(--teal-ink);cursor:pointer}
.check-inline input[type=checkbox]{margin-top:3px}
.field .check{display:inline-flex;margin-bottom:0;font-weight:500;font-size:.95rem}
.field .check-inline{display:flex;margin-bottom:0}

/* Keyword H1s (2026-09-16). The H1 itself carries the page's search phrase at display
   size, and the slogan opens the lead paragraph, so the largest text on the page is the
   heading. Specialty and service heroes no longer have a .kick label above the H1. */

/* Social profile links in the footer (2026-09-15). Inline Simple Icons SVGs (CC0),
   so there is no third-party request and no CSP change. Each link is a 44px target;
   the negative margin keeps the glyphs aligned with the footer text. */
footer .social{gap:0;margin:-13px -13px}
footer .social a{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;margin:0;border-radius:10px}
footer .social svg{width:18px;height:18px;fill:currentColor;display:block}
footer .social a:focus-visible{outline:2px solid var(--teal-ink);outline-offset:-4px}

/* ---------- about page (/about; founder rows 2026-09-30) ---------------------
   Each founder is a row: a cut-out portrait standing in a tinted panel (the
   head rises above the panel's top edge), then role, name, bio, the businesses
   they run and their links. Rows alternate sides on desktop and stack on
   phones. Cut-outs are WebP with alpha, made with macOS Vision from the
   originals in archive/assets/photos. Links are 44px targets. ------------- */
.founders{display:grid;gap:clamp(56px,10vh,110px);margin-top:9vh}
.founder{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:clamp(28px,5.5vw,80px);align-items:center;max-width:1060px}
.founder.flip{grid-template-columns:minmax(0,1fr) minmax(0,360px)}
.founder.flip .f-photo{order:2}
.f-photo{position:relative;min-width:0;overflow-x:clip;aspect-ratio:1/1.08;display:flex;align-items:flex-end;justify-content:center;isolation:isolate;clip-path:inset(-40% 0 0 0 round 0 0 26px 26px)}
.f-photo::before{content:"";position:absolute;inset:18% 0 0 0;border-radius:26px;z-index:-1;background:var(--sage-soft)}
.f-photo::after{content:"";position:absolute;left:50%;top:6%;width:78%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;border:1.5px solid rgba(22,38,61,.08);z-index:-1}
.f-photo.sage::before{background:radial-gradient(120% 80% at 25% 10%,#F2F8F4 0%,var(--sage-soft) 55%,#D3E4DA 100%)}
.f-photo.navy::before{background:radial-gradient(120% 80% at 75% 10%,#F1F5FA 0%,#E3EBF4 55%,#D2DEEB 100%)}
.f-photo.teal::before{background:radial-gradient(120% 80% at 25% 10%,#EFF9F7 0%,#DDF1EE 55%,#C9E7E2 100%)}
.f-photo img{display:block;height:100%;width:auto;max-width:none;flex:none;object-fit:contain;object-position:bottom center;filter:drop-shadow(0 18px 24px rgba(22,38,61,.14))}
.f-body .role{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink)}
.f-body h3{font-family:var(--fd);font-variation-settings:"opsz" 96;font-size:clamp(1.8rem,3vw,2.5rem);font-weight:700;letter-spacing:-.025em;line-height:1.05;margin-top:8px}
.f-body > p:not(.role){color:var(--mut);font-size:1.08rem;line-height:1.6;margin-top:14px;max-width:54ch}
.f-venture{display:flex;align-items:center;flex-wrap:wrap;gap:10px 22px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line);max-width:54ch}
.f-venture span{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.f-venture a{display:inline-flex;align-items:center;min-height:44px}
.f-venture img{height:34px;width:auto;display:block;transition:opacity .2s}
.f-venture img[alt="Counsel Clinic"]{height:18px}
.f-venture img[alt="Rapide Technologies"]{height:40px}
.f-venture img[alt="oladoc"]{height:22px}
.f-venture a:hover img{opacity:.7}
.f-links{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:6px}
.f-links a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;color:var(--ink);text-decoration:none}
.f-links svg{width:17px;height:17px;fill:currentColor;flex:none}
.f-links a:hover{color:var(--teal-ink);text-decoration:underline;text-underline-offset:3px}
.founder{scroll-margin-top:110px}
.about-why{font-size:1.08rem;line-height:1.65}
.principles{margin-top:5vh}
.principles h3{margin-top:10px}
.principles p{color:var(--mut);margin-top:8px;line-height:1.55}
.principles a{color:var(--teal-ink);text-underline-offset:3px}
.about-how{max-width:62ch;margin-top:2.4vh;color:var(--mut);font-size:1.05rem;line-height:1.65}
.about-how a{color:var(--teal-ink);text-underline-offset:3px}
@media(max-width:860px){
  .founder,.founder.flip{grid-template-columns:minmax(0,1fr);gap:28px}
  .founder.flip .f-photo{order:0}
  .f-photo{width:min(100%,340px)}
}

/* ---------- calculators (2026-09-24) ----------------------------------------
   /patient-acquisition-cost-calculator and /patient-retention-calculator.
   Inputs are 48px tall (touch floor). Results sit in a sticky navy panel beside
   the inputs on desktop and follow them on phones. Muted labels on navy read
   5.70:1 and teal figures 5.09:1, the same pairings as the stat band. ------- */
.calc{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.95fr);gap:4vw;align-items:start}
@media(max-width:900px){.calc{grid-template-columns:1fr;gap:4vh}}
.calc-in{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:clamp(22px,3vw,36px)}
.calc-note{font-size:.9rem;color:var(--mut);margin-bottom:2.2vh;line-height:1.5}
.calc fieldset{border:0;margin:0;padding:0;min-width:0}
.calc fieldset + fieldset{margin-top:3.4vh;padding-top:3vh;border-top:1.5px solid var(--line)}
.calc legend{font-weight:700;font-size:1.08rem;letter-spacing:-.01em;margin-bottom:1.8vh;padding:0;float:left;width:100%}
.calc legend + *{clear:both}
.calc-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px;align-items:start}
.cf{display:block;font-size:.92rem;font-weight:600}
/* Two-line label box, so a wrapped label never pushes its input below the
   input beside it; hints hang underneath without disturbing the row. */
.cf > span:first-child{display:flex;align-items:flex-end;min-height:2.6em;margin-bottom:7px;line-height:1.3}
@media(max-width:560px){.calc-fields{grid-template-columns:1fr}.cf > span:first-child{min-height:0}}
.cf .hint{display:block;font-weight:400}
.cf-in{position:relative;display:block}
.cf-in input{width:100%;min-height:48px;font:inherit;font-size:1.05rem;font-variant-numeric:tabular-nums;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:11px 14px;transition:border-color .15s ease,box-shadow .15s ease}
.cf-in.money input{padding-left:30px}
.cf-in.money::before{content:"$";position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--mut);pointer-events:none}
.cf-in input:focus{outline:none;border-color:var(--teal-ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 35%,transparent)}
.calc-out{position:sticky;top:110px;background:var(--navy);color:#fff;border-radius:18px;border-top:3px solid var(--teal);padding:clamp(22px,3vw,36px)}
@media(max-width:900px){.calc-out{position:static}}
.calc-out h2{font-size:clamp(1.3rem,2vw,1.6rem);letter-spacing:-.02em;line-height:1.15;margin-bottom:2vh}
.calc-out dl{margin:0}
.calc-out .co{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-top:1px solid var(--navy-line)}
.calc-out dt{color:var(--navy-mut);font-size:.95rem;line-height:1.35}
.calc-out dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.calc-out .co.big dd{font-size:clamp(1.45rem,2.4vw,1.9rem);color:var(--teal);letter-spacing:-.02em}
.calc-sum{margin-top:2.2vh;padding-top:2vh;border-top:1px solid var(--navy-line);line-height:1.55;font-size:1rem}

/* Formulas on the glossary and calculator pages: a quiet chip so the math reads
   as math. Glossary rows are anchor targets, so they clear the fixed nav. */
.row p.formula,.post p.formula{display:inline-block;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:8px;padding:7px 12px;font-size:.95rem;line-height:1.45;font-variant-numeric:tabular-nums}
.row > div > p + p{margin-top:.7em}
.gloss .row,.gloss{scroll-margin-top:96px}
#leaks{scroll-margin-top:96px}

/* ---------- calculator embeds (2026-09-24) ----------------------------------
   /embed/* pages: the calculator form alone, framed on other sites. No nav or
   footer, so the page supplies its own padding. The snippet on each
   calculator page wraps rather than scrolling sideways on phones. ----------- */
body.embed-page{background:var(--mist)}  /* not .embed: that class is the /book calendar card */
.embed-wrap{padding:clamp(14px,3vw,28px)}
.embed-credit{margin-top:18px;font-size:.9rem;color:var(--mut);line-height:1.5}
.embed-credit a{color:var(--teal-ink);font-weight:600}
.post pre.embed-code{background:var(--navy);color:#fff;border-radius:12px;padding:16px 18px;margin:2vh 0 1vh;font-size:.85rem;line-height:1.55;white-space:pre-wrap;word-break:break-all;overflow-wrap:anywhere}
.embed-page .calc-out{top:16px}  /* no fixed nav inside an iframe */

/* ---------- assistant panel (call + chat) -------------------------------------
   "Ask Ava" launcher + panel with a Chat / Call switch, built by the assistant
   section of site.js. Fixed position, added after load: it never moves page
   content (no CLS). --vol (0–1) is the live speaking level during a call.
   Call is meant to be visible and feel live: Call on the launcher Island,
   a teal header card with a pulsing dot, and a "Live" badge on a call.
   Light mode: controls are white or a soft teal tint (--vc-tint #EEF9F7)
   with --teal-ink text (4.6:1 on the tint, 4.9:1 on white); --teal is used
   only for edges, rings and the live meter. No solid teal-on-navy fills. */
.vc{--vol:0;--live:#34D399;--soft:#B9C3D1;--vc-tint:#EEF9F7;--vc-tint-2:#DFF4F0;--live-d:#12A150;position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:45;display:flex;flex-direction:column;align-items:flex-end;gap:10px;font-family:var(--f)}

/* launcher: the "Island". A navy capsule with a thin teal edge and a small
   live meter that opens into Chat | Call — on hover with a mouse, on focus
   from the keyboard, and on the first tap on touch screens (site.js adds
   .vc-isl-on). Navy reads 14.5:1 on light pages; the teal edge (5.1:1 on
   navy) keeps it distinct over navy bands.
   The fade-in lives on .vc-launch, never on .vc: a transform on .vc would make
   it the containing block for the fixed-position phone sheet. */
.vc-launch{display:flex;align-items:center;gap:0;padding:5px;background:var(--navy);border-radius:999px;box-shadow:0 0 0 1.5px rgba(15,167,155,.65),0 18px 36px -14px rgba(22,38,61,.65);animation:vcFabIn .3s ease both}
@keyframes vcFabIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.vc-fab{display:inline-flex;align-items:center;justify-content:center;min-height:46px;border:none;border-radius:999px;background:transparent;color:#fff;font:600 .95rem/1 var(--f);padding:0 14px 0 4px;cursor:pointer;transition:background .18s}
.vc-fab:hover{background:rgba(255,255,255,.08)}
.vc-fab-open{display:inline-flex;align-items:center;gap:10px}
.vc-fab-close{display:none;width:46px;height:46px;align-items:center;justify-content:center}
.vc-fab-close svg{width:22px;height:22px}
.vc-is-open .vc-fab{padding:0;width:46px}
.vc-is-open .vc-fab-open{display:none}
.vc-is-open .vc-fab-close{display:inline-flex}
.vc-eq{display:inline-flex;align-items:center;gap:2px;height:14px;margin-left:-2px}
.vc-eq i{width:2.5px;height:100%;border-radius:2px;background:#5FD3C6;transform-origin:center;animation:vcEq 1.1s ease-in-out infinite}
.vc-eq i:nth-child(2){animation-delay:.18s}.vc-eq i:nth-child(3){animation-delay:.36s}
@keyframes vcEq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.vc-isl{display:flex;gap:6px;max-width:0;overflow:hidden;opacity:0;visibility:hidden;transition:max-width .45s cubic-bezier(.2,.8,.2,1),opacity .25s ease,margin .45s cubic-bezier(.2,.8,.2,1),visibility 0s .45s}
.vc:not(.vc-is-open) .vc-launch:focus-within .vc-isl,.vc-isl-on:not(.vc-is-open) .vc-isl{max-width:200px;opacity:1;visibility:visible;margin-left:2px;transition:max-width .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease .05s,margin .45s cubic-bezier(.2,.8,.2,1),visibility 0s}
@media (hover:hover) and (pointer:fine){.vc:not(.vc-is-open) .vc-launch:hover .vc-isl{max-width:200px;opacity:1;visibility:visible;margin-left:2px;transition:max-width .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease .05s,margin .45s cubic-bezier(.2,.8,.2,1),visibility 0s}}
.vc-isl-b{height:44px;padding:0 16px;border:none;border-radius:999px;font:600 .9rem/1 var(--f);display:inline-flex;align-items:center;gap:7px;cursor:pointer;white-space:nowrap;background:rgba(255,255,255,.1);color:#fff;transition:background .18s}
.vc-isl-b:hover{background:rgba(255,255,255,.18)}
.vc-isl-call{background:var(--vc-tint);color:var(--teal-ink);box-shadow:inset 0 0 0 1px rgba(15,167,155,.45)}
.vc-isl-call:hover{background:var(--vc-tint-2)}
.vc-is-open .vc-isl,.vc-is-open .vc-eq{display:none}
@media (max-width:360px){.vc-isl-on .vc-fab-text,.vc-isl-on .vc-eq{display:none}}

/* avatar + live dot */
.vc-av{position:relative;display:inline-flex;flex:none;width:40px;height:40px}
.vc-av .vc-orb{width:100%;height:100%}
.vc-fab .vc-av{width:36px;height:36px}
.vc-live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--live);flex:none;animation:vcLive 1.8s ease-out infinite}
.vc-av .vc-live{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border:2px solid var(--navy)}
.vc-top .vc-av .vc-live{border-color:var(--paper)}
.vc-fab .vc-av .vc-live{border-color:var(--navy)}
/* on the pale teal tint the bright green dot washes out; use a deeper green */
.vc-isl-call .vc-live,.vc-mode-call .vc-live{background:var(--live-d)}
@keyframes vcLive{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}70%{box-shadow:0 0 0 6px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}

/* panel */
.vc-panel{position:relative;width:min(380px,calc(100vw - 40px));background:var(--paper);border:2px solid var(--navy);border-radius:20px;overflow:hidden;box-shadow:0 24px 48px -12px rgba(22,38,61,.28);animation:vcPop .22s ease}
.vc-panel[hidden],.vc-backdrop[hidden],.vc-view[hidden],.vc-new[hidden]{display:none}
@keyframes vcPop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.vc-top{background:var(--paper);color:var(--ink);padding:14px 10px 14px 16px;display:flex;flex-direction:column;gap:14px;border-bottom:1px solid var(--line)}
.vc-head{display:flex;align-items:center;gap:12px}
.vc-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.2}
.vc-id b{font-weight:700;font-size:1rem}
.vc-id span{font-size:.8rem;color:var(--mut)}
.vc-new{border:none;background:none;color:var(--teal-ink);font:600 .78rem/1 var(--f);cursor:pointer;padding:10px 6px;text-decoration:underline;text-underline-offset:2px}
.vc-new:hover{color:var(--ink)}
.vc-x{flex:none;width:40px;height:40px;border:none;border-radius:12px;background:transparent;color:var(--mut);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.vc-x:hover{background:var(--mist);color:var(--ink)}
.vc-x svg{width:20px;height:20px}
.vc-modes{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;margin-right:6px;background:#EEF2F5;border-radius:16px}
.vc-mode{display:flex;align-items:center;gap:10px;min-height:56px;padding:0 10px;border:none;border-radius:12px;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:background .18s,color .18s,box-shadow .18s}
.vc-mode:hover{background:rgba(22,38,61,.05)}
.vc-mode-ic{width:34px;height:34px;border-radius:10px;background:rgba(22,38,61,.08);display:inline-flex;align-items:center;justify-content:center;flex:none}
.vc-mode-ic svg{width:18px;height:18px}
.vc-mode-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.vc-mode-tx b{display:flex;align-items:center;gap:6px;font-weight:700;font-size:.95rem;line-height:1.1}
.vc-mode-tx small{font-size:.74rem;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.vc-mode-call{background:var(--vc-tint);color:var(--teal-ink);box-shadow:inset 0 0 0 1px rgba(15,167,155,.4)}
.vc-mode-call .vc-mode-ic{background:var(--paper);color:var(--teal-ink)}
.vc-mode-call:hover{background:var(--vc-tint-2)}
.vc-mode-call small{color:var(--teal-ink)}
.vc-mode[aria-selected="true"]{background:#fff;color:var(--navy);box-shadow:0 1px 2px rgba(22,38,61,.08),0 4px 12px -4px rgba(22,38,61,.18)}
.vc-mode[aria-selected="true"] .vc-mode-ic{background:var(--mist);color:var(--navy)}
.vc-mode-call[aria-selected="true"]{box-shadow:inset 0 0 0 1px rgba(15,167,155,.45),0 1px 2px rgba(22,38,61,.08),0 4px 12px -4px rgba(22,38,61,.18)}
.vc-mode-call[aria-selected="true"] .vc-mode-ic{background:var(--vc-tint);color:var(--teal-ink)}
.vc-mode[aria-selected="true"] small{color:var(--mut)}
.vc[data-state="active"] .vc-mode-call small{color:var(--teal-ink);font-weight:600}
.vc[data-state="active"] .vc-mode-call[aria-selected="true"] small{color:var(--teal-ink)}

/* call view */
.vc-body{padding:0 16px}
.vc-call-view{padding:16px 4px 6px;text-align:center}
.vc-time{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.78rem;color:var(--mut);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.vc-onair{display:none;align-items:center;gap:5px;padding:3px 8px;border-radius:999px;background:#FDECEC;color:#B83636;font-weight:700;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}
.vc-onair::before{content:"";width:6px;height:6px;border-radius:50%;background:#D64545;animation:vcBlink 1.2s ease-in-out infinite}
@keyframes vcBlink{50%{opacity:.35}}
.vc[data-state="active"] .vc-onair{display:inline-flex}
.vc[data-state="active"] .vc-time{color:var(--ink)}
.vc:not([data-state="active"]) .vc-time{visibility:hidden}
/* The orb pulses up to 14% larger while Ava speaks (--vol 0–1). Its frame is
   a fixed 1.3 × --orb tall, so even at full size it keeps ≥ 8% of --orb clear
   of the timer above and Ava's name below, and nothing around it moves while
   it pulses. Resize the orb only through --orb; the frame follows. */
.vc-face{--orb:132px;display:flex;align-items:center;justify-content:center;height:calc(var(--orb) * 1.3);margin:0 0 4px}
.vc-face .vc-orb{width:var(--orb);height:var(--orb);transform:scale(calc(1 + var(--vol) * .14));transition:transform .08s linear}
/* The swirl layers are exactly the orb's circle and use plain alpha, no blend
   mode. iPhone Safari skips overflow/border-radius clipping for animated
   layers and draws a blend-mode layer as a faint rectangle, so oversized or
   blended layers showed as a square shadow around the orb. Don't reintroduce
   inset < 0 or mix-blend-mode here. */
.vc-orb{position:relative;display:inline-block;border-radius:50%;overflow:hidden;flex:none;isolation:isolate;-webkit-clip-path:circle(50%);clip-path:circle(50%);-webkit-mask-image:-webkit-radial-gradient(white,black);background:radial-gradient(circle at 30% 28%,#E6F1FF 0%,#A9C8FF 22%,transparent 46%),radial-gradient(circle at 72% 70%,#B04CF0 0%,#8C5CF6 30%,transparent 62%),radial-gradient(circle at 25% 75%,#F5A35C 0%,transparent 45%),linear-gradient(135deg,#7FA6F5,#C4A8F5 50%,#F2B98C);box-shadow:inset 0 0 12px rgba(255,255,255,.45)}
.vc-orb i{position:absolute;inset:0;border-radius:50%;animation:vcSwirl 9s linear infinite;-webkit-mask-image:radial-gradient(circle,transparent 12%,#000 72%);mask-image:radial-gradient(circle,transparent 12%,#000 72%)}
.vc-orb i:nth-child(1){background:conic-gradient(from 0deg,transparent 0deg,rgba(255,255,255,.55) 55deg,transparent 140deg)}
.vc-orb i:nth-child(2){background:conic-gradient(from 120deg,transparent 0deg,rgba(176,76,240,.34) 65deg,transparent 160deg);animation-duration:13s;animation-direction:reverse}
.vc-orb i:nth-child(3){background:conic-gradient(from 240deg,transparent 0deg,rgba(245,163,92,.32) 65deg,transparent 160deg);animation-duration:17s}
@keyframes vcSwirl{to{transform:rotate(360deg)}}
.vc[data-state="connecting"] .vc-face .vc-orb{animation:vcBreathe 1.4s ease-in-out infinite}
@keyframes vcBreathe{50%{transform:scale(.93);opacity:.85}}
.vc-title{font:700 2rem/1.1 var(--fd);color:var(--ink);letter-spacing:-.02em}
.vc-sub{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;font-weight:600;color:var(--teal-ink);margin:8px auto 0}
.vc-dot{width:8px;height:8px;border-radius:50%;background:var(--live-d);flex:none;animation:vcLive 1.8s ease-out infinite}
.vc-actions{display:flex;justify-content:center;align-items:flex-start;gap:18px;margin-top:22px;min-height:96px}
.vc-call{display:inline-flex;flex-direction:column;align-items:center;gap:10px;padding:0;border:none;background:none;color:var(--ink);font:600 .85rem/1 var(--f);cursor:pointer}
.vc-call svg{width:26px;height:26px;padding:21px;box-sizing:content-box;border-radius:50%;background:var(--teal-ink);color:#fff;box-shadow:0 0 0 8px rgba(15,167,155,.12),0 14px 28px -12px rgba(10,127,118,.8);transition:transform .2s,background .18s}
.vc-call:hover svg{transform:scale(1.05);background:#08695F}
.vc-call[disabled]{cursor:progress}
.vc-call[disabled] svg{opacity:.7;transform:none}
.vc-round{width:64px;height:64px;border-radius:50%;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .18s,border-color .18s}
.vc-round:hover{border-color:var(--ink)}
.vc-round[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.vc-round svg{width:22px;height:22px}
.vc-hang{background:#D64545;border-color:#D64545;color:#fff}
.vc-hang:hover{background:#B83636;border-color:#B83636}
.vc-hint{font-size:.76rem;color:var(--mut);margin-top:12px}
.vc[data-state="active"] .vc-hint{visibility:hidden}
.vc-status{font-size:.8rem;color:var(--mut);margin-top:6px;min-height:1.2em}
.vc[data-state="error"] .vc-status{color:#B83636}

/* chat view */
.vc-chat-view{display:flex;flex-direction:column;text-align:left}
.vc-log{height:min(340px,calc(100vh - 330px));min-height:180px;overflow-y:auto;overscroll-behavior:contain;padding:16px 0 12px;display:flex;flex-direction:column;gap:14px}
.vc-msg{max-width:86%;padding:11px 14px;border-radius:16px;font-size:.92rem;line-height:1.45;overflow-wrap:anywhere}
/* Ava's replies read as plain text under her name; the visitor's are light bubbles */
.vc-ava{align-self:flex-start;max-width:100%;padding:0 2px;background:none;border-radius:0;color:var(--ink);font-size:.95rem;line-height:1.55}
.vc-ava.vc-first::before{content:"Ava";display:block;font:700 .8rem/1 var(--f);color:var(--ink);margin-bottom:6px}
.vc-me{align-self:flex-end;background:var(--mist);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);border-bottom-right-radius:4px}
.vc-me a{color:var(--teal-ink)}
.vc-msg a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.vc-ava a{color:var(--teal-ink)}
.vc-chips{display:flex;gap:8px;overflow-x:auto;padding:0 0 2px;scrollbar-width:none}
.vc-chips:empty{display:none}
.vc-chips::-webkit-scrollbar{display:none}
.vc-chip{flex:none;min-height:38px;padding:0 14px;border:none;border-radius:999px;background:var(--vc-tint);color:var(--teal-ink);font:600 .85rem/1 var(--f);cursor:pointer;transition:background .18s}
.vc-chip:hover{background:var(--vc-tint-2)}
.vc-ended{font-size:.8rem;color:var(--mut);text-align:center;margin:6px 0 0}
.vc-link{border:none;background:none;color:var(--teal-ink);font:600 .8rem/1 var(--f);cursor:pointer;padding:6px 2px;text-decoration:underline;text-underline-offset:2px}
.vc-typing{display:inline-flex;gap:4px;padding:8px 2px}
.vc-typing::before{display:none}
.vc-typing i{width:6px;height:6px;border-radius:50%;background:var(--mut);animation:vcDot 1.1s ease-in-out infinite}
.vc-typing i:nth-child(2){animation-delay:.15s}.vc-typing i:nth-child(3){animation-delay:.3s}
@keyframes vcDot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.vc-form{display:flex;align-items:flex-end;gap:8px;padding:10px 0 2px}
.vc-form textarea{flex:1;resize:none;min-height:46px;max-height:120px;border:1.5px solid #CBD3DD;border-radius:24px;padding:11px 18px;font:400 16px/1.35 var(--f);color:var(--ink);background:var(--paper)}
.vc-form textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(15,167,155,.18)}
.vc-form textarea:disabled{background:var(--mist)}
.vc-send{flex:none;width:46px;height:46px;border:none;border-radius:50%;background:var(--teal-ink);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .18s}
.vc-send:hover{background:#08695F}
.vc-send[disabled]{opacity:.45;cursor:default}
.vc-send svg{width:19px;height:19px}
.vc-note{font-size:.7rem;color:var(--mut);text-align:center;margin:0;padding:8px 16px 12px}
.vc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:560px){.vc{right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom))}}

/* Phone / short-screen sheet (site.js adds .vc-sheet while open). Sized to the
   visual viewport (--vv-h/--vv-top) so the iOS keyboard never covers the box.
   Tap targets are 44px minimum. */
.vc-backdrop{position:fixed;inset:0;background:rgba(22,38,61,.5)}
.vc-sheet .vc-launch{display:none}
.vc-sheet .vc-panel{position:fixed;left:8px;right:8px;width:auto;top:calc(var(--vv-top,0px) + max(8px,env(safe-area-inset-top)));height:calc(var(--vv-h,100vh) - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom)));display:flex;flex-direction:column;border-radius:18px;animation:vcRise .22s ease}
@keyframes vcRise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.vc-sheet .vc-body{flex:1;min-height:0;display:flex;flex-direction:column}
.vc-sheet .vc-view:not([hidden]){flex:1;min-height:0;display:flex;flex-direction:column}
/* 'safe' keeps the top reachable if the view ever overflows (plain centre would clip it) */
.vc-sheet .vc-call-view{justify-content:center;justify-content:safe center;overflow-y:auto}
.vc-sheet .vc-log{flex:1;height:auto;min-height:0}
.vc-sheet .vc-x{width:44px;height:44px}
.vc-sheet .vc-new{padding:14px 6px}
html.vc-lock,html.vc-lock body{overflow:hidden}
@media (max-width:360px){.vc-mode-ic{display:none}.vc-mode{padding:0 12px}}
@media (max-height:520px){.vc-sheet .vc-top{padding-top:8px;padding-bottom:8px;gap:8px}.vc-sheet .vc-mode{min-height:46px}.vc-sheet .vc-call-view{padding-top:4px}.vc-sheet .vc-face{--orb:56px;margin:0 0 4px}.vc-sheet .vc-title{font-size:1.35rem}.vc-sheet .vc-hint{display:none}.vc-sheet .vc-call svg{padding:15px}.vc-sheet .vc-actions{min-height:0}.vc-sheet:not([data-state="active"]) .vc-time{display:none}.vc-sheet .vc-sub{display:none}.vc-sheet .vc-actions{margin-top:10px}}
@media (prefers-reduced-motion:reduce){.vc-launch,.vc-panel,.vc-sheet .vc-panel,.vc-isl{transition:none;animation:none}.vc-orb i,.vc-live,.vc-eq i,.vc-onair::before,.vc[data-state="connecting"] .vc-face .vc-orb,.vc-typing i{animation:none}}
@media (prefers-reduced-motion:reduce){.vc .vc-launch .vc-isl{transition:none!important}}
/* shorter phones: shrink the orb (its frame shrinks with it) so the call view fits without scrolling */
@media (max-height:740px){.vc-sheet .vc-face{--orb:100px}}
@media (max-height:620px){.vc-sheet .vc-face{--orb:80px}.vc-sheet .vc-title{font-size:1.6rem}.vc-sheet .vc-hint{display:none}.vc-sheet .vc-actions{margin-top:14px}}
@media (max-height:520px){.vc-sheet .vc-face{--orb:56px}.vc-sheet .vc-title{font-size:1.35rem}.vc-sheet .vc-actions{margin-top:10px}}
/* Landscape phones: ~200px of height can't stack orb, name and button, so the
   call view goes side by side — orb left, everything else right — and the
   pulsing orb has nothing above or below it to run into. */
@media (max-height:520px){
.vc-sheet .vc-call-view:not([hidden]){display:grid;grid-template-columns:auto minmax(0,auto);grid-template-areas:"face time" "face title" "face sub" "face actions" "face status";column-gap:28px;align-content:center;justify-content:center;text-align:left;padding:4px}
.vc-sheet .vc-face{grid-area:face;--orb:92px;margin:0;align-self:center}
.vc-sheet .vc-time{grid-area:time;justify-content:flex-start}
.vc-sheet:not([data-state="active"]) .vc-time{display:flex}
.vc-sheet .vc-title{grid-area:title;font-size:1.5rem;margin-top:2px}
.vc-sheet .vc-sub{grid-area:sub;display:inline-flex;margin:4px 0 0}
.vc-sheet .vc-actions{grid-area:actions;justify-content:flex-start;margin-top:12px;min-height:0}
.vc-sheet .vc-call{flex-direction:row;gap:12px}
.vc-sheet .vc-call svg{padding:13px}
.vc-sheet .vc-round{width:52px;height:52px}
.vc-sheet .vc-hint{display:none}
.vc-sheet .vc-status{grid-area:status;margin-top:4px;text-align:left}
}