/* Near-black theme (round 2): Linear/Vercel/Attio-dark. Green appears only where a call is answered (and in the logo),
   amber only where a job is booked. Everything else is neutral. Headlines: Plus Jakarta Sans. Text: Inter.
   Loaded after site.css. */
:root {
  --bg: #08090A; --bg-surface: #0E0F11; --bg-elevated: #131416; --bg-hover: #18191C;
  --ink-1: #F7F8F8; --ink-2: #A8A8B0; --ink-3: #8A8A93; --text-1: #F7F8F8; --text-2: #A8A8B0; --text-3: #8A8A93; --rd-soft: #8A8A93;
  --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .14);
  --border: rgba(255, 255, 255, .08); --border-mid: rgba(255, 255, 255, .11); --border-strong: rgba(255, 255, 255, .16);
  --accent: #E4E4E7; --accent-hover: #FFFFFF; --accent-hi: #FFFFFF; --accent-soft: rgba(255, 255, 255, .08);
  --accent-dim: rgba(255, 255, 255, .06); --accent-border: rgba(255, 255, 255, .2); --accent-glow: rgba(255, 255, 255, .12);
  --answered: #34D399; --answered-soft: rgba(52, 211, 153, .12); --booked: #FBBF24; --booked-soft: rgba(251, 191, 36, .12);
  --green: #34D399; --green-dim: rgba(52, 211, 153, .12); --amber: #FBBF24; --amber-dim: rgba(251, 191, 36, .12);
  --rd-win: #111214; --rd-line: rgba(255, 255, 255, .08);
  --head: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
}
html, body { background: var(--bg); }
body::after { opacity: .03; }
.rd-h1, .rd-h2, .fc-h, .sv-h, .fq h2, .jade-sec h2, .bk-title, .ct-form h2, .hw-s h3, .rd-card h3, .cx-n b, .tp-call b, .nav-logo, .hz-t, .sx b {
  font-family: var(--head); }
.rd-h1 { font-weight: 800; letter-spacing: -.04em; }
.rd-h2, .fc-h, .sv-h { font-weight: 700; letter-spacing: -.035em; }
.rd-h2 span { color: var(--ink-3); }
.rd-k::before { background: var(--line-2); }
.rd-k { color: var(--ink-3); }

/* buttons: white on near-black (Linear/Vercel), ink text */
.btn-primary { color: #08090A; background: #F7F8F8; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .5); font-weight: 600; }
.btn-primary:hover { color: #08090A; background: #FFFFFF; box-shadow: 0 2px 8px rgba(0, 0, 0, .5), 0 0 0 4px rgba(255, 255, 255, .08); }
.btn-ghost { background: rgba(255, 255, 255, .04); border-color: var(--line-2); }
.nav { background: rgba(8, 9, 10, .76); }
.nav-jade-dot, .cj-dot { background: var(--answered); box-shadow: 0 0 8px rgba(52, 211, 153, .8); }
.nav-logo svg { width: 24px; height: 24px; }
.nav-call { display: none !important; }
a:focus-visible, button:focus-visible, .btn:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline-color: #FFFFFF; }
.w, .w-glass, .rd-card, .hw-s, .rd-stat, .ct-opt, .ct-form, .tr-proof { background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01)), #0E0F11; }
.m-out .m-b, .sm-out { background: #27272A; }
.cl-new { background: linear-gradient(135deg, rgba(251, 191, 36, .22), rgba(251, 191, 36, .12)); border-left-color: var(--booked); color: #FDE68A; }

/* ---------- hero: the system comes online ---------- */
.rd-hero.hx-hero { min-height: 0; display: block; padding: 120px 0 48px; text-align: center; }
.rd-hero.hx-hero::before { top: 0; height: 900px; transform: translate(-50%, -20%);
  background: radial-gradient(ellipse 46% 38% at 50% 50%, rgba(255, 255, 255, .07), transparent 70%); }
.hx-hero .rd-h1 { max-width: 15ch; font-size: clamp(2.5rem, 1.3rem + 4vw, 4.4rem); margin-bottom: 20px; }
.hx-hero .rd-lede { max-width: 36rem; margin-bottom: 28px; }
.hx-hero .rd-calljade { margin-top: 14px; }
.hx { position: relative; max-width: 1080px; height: 560px; margin: 56px auto 0; text-align: left; --sy: 0; }
.hx-w { position: absolute; border-radius: var(--r); border: 1px solid var(--line); color: var(--ink-1);
  background: linear-gradient(180deg, #17181B, #111214);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 2px rgba(0, 0, 0, .4), 0 30px 70px -28px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .35);
  opacity: 0; transform: translateY(26px) scale(.97); filter: blur(6px);
  transition: opacity .8s var(--ease), transform 1s var(--ease), filter .8s var(--ease); will-change: transform, opacity; }
/* depth while scrolling (desktop only): front windows drift up a little faster than the dashboard behind */
@media (min-width: 900px) { .hx-w { translate: 0 calc(var(--sy) * var(--dz, 0) * -1px); } }
.hx.s1 .hx-dash, .hx.s2 .hx-call, .hx.s4 .hx-tx, .hx.s5 .hx-book { opacity: 1; transform: none; filter: none; }
.hx-bar { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.hx-bar b { color: var(--ink-1); font-weight: 600; }
.hx-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.hx-live i { width: 7px; height: 7px; border-radius: 50%; background: #34D399; box-shadow: 0 0 8px rgba(52, 211, 153, .9); }

/* dashboard (back) */
.hx-dash { left: 150px; top: 46px; width: 780px; overflow: hidden; }
.hx-db { display: grid; grid-template-columns: 150px 1fr; min-height: 420px; }
.hx-side { list-style: none; margin: 0; padding: 14px 10px; border-right: 1px solid var(--line); }
.hx-side li { font-size: 13.5px; color: var(--ink-3); padding: 8px 10px; border-radius: 8px; }
.hx-side li.on { color: var(--ink-1); background: rgba(255, 255, 255, .06); }
.hx-main { padding: 18px 20px; }
.hx-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.hx-kpi { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.hx-kpi b { display: block; font-family: var(--head); font-size: 26px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hx-kpi span { font-size: 13px; color: var(--ink-3); }
.hx-kpi.bump b { color: var(--booked); transition: color .6s; }
.hx-feed { list-style: none; margin: 0; padding: 0; }
.hx-feed li { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.hx-feed .av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 600; background: rgba(255, 255, 255, .08); color: var(--ink-2); }
.hx-feed small { display: block; font-size: 13px; color: var(--ink-3); }
.hx-feed .t { font-size: 13px; color: var(--ink-3); }
.hx-feed .new { max-height: 0; opacity: 0; padding: 0; overflow: hidden; border-top-color: transparent;
  transition: max-height .7s var(--ease), opacity .6s var(--ease) .15s, padding .7s var(--ease), background 1.6s ease; }
.hx.s5 .hx-feed .new { max-height: 70px; opacity: 1; padding: 10px 8px; margin: 0 -8px; border-top-color: var(--line); border-radius: 8px; background: var(--booked-soft); }
.hx.s6 .hx-feed .new { background: transparent; }
.hx-feed .new .av { background: var(--booked); color: #2A1A00; }
.hx-feed .new .t { color: var(--booked); }

/* the call: rings, then Jade answers (the green light is the signature moment) */
.hx-call { left: 0; top: 0; width: 360px; height: 88px; }
.hx-cs { position: absolute; inset: 0; display: flex; align-items: center; gap: 14px; padding: 0 18px; transition: opacity .5s var(--ease); }
.hx-cs small { display: block; font-size: 13px; color: var(--ink-3); }
.hx-cs b { display: block; font-size: 17px; font-weight: 600; }
.hx-ring { opacity: 1; }
.hx-ans { opacity: 0; }
.hx.s3 .hx-ring { opacity: 0; }
.hx.s3 .hx-ans { opacity: 1; }
.hx-ic { position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.hx-ic::after { content: ''; position: absolute; inset: 0; background: center / 21px no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/></svg>"); }
.hx-ring .hx-ic i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(241, 245, 249, .5); animation: hxRing 1.6s var(--ease) infinite; }
.hx-ring .hx-ic i + i { animation-delay: .8s; }
@keyframes hxRing { from { transform: scale(1); opacity: .9; } to { transform: scale(1.8); opacity: 0; } }
.hx-ans .hx-ic { background: #34D399; box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); }
.hx-ans .hx-ic::after { filter: brightness(0) saturate(100%); opacity: .82; }
.hx.s3 .hx-ans .hx-ic { animation: hxAnswer 1.6s var(--ease) 1 forwards; }
@keyframes hxAnswer { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .65), 0 0 0 rgba(52, 211, 153, 0); } 60% { box-shadow: 0 0 0 14px rgba(52, 211, 153, 0), 0 0 40px rgba(52, 211, 153, .55); } 100% { box-shadow: 0 0 0 6px rgba(52, 211, 153, .16), 0 0 26px rgba(52, 211, 153, .45); } }
.hx.s3 .hx-call { border-color: rgba(52, 211, 153, .45); transition: border-color .6s, opacity .8s var(--ease), transform 1s var(--ease), filter .8s; }
.hx-ans .hx-wave { margin-left: auto; display: flex; align-items: center; gap: 3px; height: 22px; }
.hx-wave i { width: 3px; height: 100%; border-radius: 2px; background: var(--answered); transform: scaleY(.3); }
.hx.s3 .hx-wave i { animation: hxWave 1.1s ease-in-out infinite; }
.hx-wave i:nth-child(2) { animation-delay: .15s !important; } .hx-wave i:nth-child(3) { animation-delay: .3s !important; } .hx-wave i:nth-child(4) { animation-delay: .45s !important; }
@keyframes hxWave { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.hx.s6 .hx-wave i { animation: none; transform: scaleY(.3); }
.hx.s6 .hx-ans small:first-child::after { content: ' · ended, 1:12'; }

/* transcript (front, right) */
.hx-tx { right: 0; top: 150px; width: 370px; padding: 0 0 6px; }
.hx-l { padding: 10px 18px 0; opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.hx-l.on { opacity: 1; transform: none; }
.hx-l b { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
.hx-l span { font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.hx-l.j b { color: var(--answered); }
.hx-l.j span { color: var(--ink-1); }

/* the booked job (front, bottom left) */
.hx-book { left: 70px; bottom: 0; width: 430px; padding: 16px 18px; display: flex; align-items: center; gap: 14px; }
.hx-cal { flex: none; width: 50px; height: 54px; border-radius: 10px; border: 1px solid rgba(251, 191, 36, .4); background: rgba(251, 191, 36, .1);
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hx-cal small { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: #FBBF24; text-transform: uppercase; }
.hx-cal b { font-family: var(--head); font-size: 21px; line-height: 1; }
.hx-book .who small { display: block; font-size: 13px; color: var(--ink-3); }
.hx-book .who b { display: block; font-size: 17px; font-weight: 600; white-space: nowrap; }
.hx-pill { margin-left: auto; font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 999px; color: var(--booked); background: var(--booked-soft); white-space: nowrap; }
.hx-note { position: absolute; right: 0; bottom: -34px; font-size: 13px; color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  .hx-w, .hx-l { transition: none; filter: none; }
  .hx-ring .hx-ic i, .hx-wave i, .hx.s3 .hx-ans .hx-ic { animation: none !important; }
}

/* ---------- dashboard section: the main product moment ---------- */
.rd-dash.hm-dash { border-top: 1px solid var(--line); }
.hm-dash .rd-dash-head { text-align: center; }
.hm-dash .rd-dash-head .rd-h2 { margin: 14px auto 12px; max-width: 18ch; }
.hm-dash .rd-dash-head p { max-width: 34rem; margin: 0 auto 32px; color: var(--ink-2); }
.dash-window, .dash-window-lg { background: #0E0F11; border-color: var(--line); }
.dash-titlebar { background: rgba(255, 255, 255, .02); }
.dash-sbl.active { background: rgba(255, 255, 255, .06); color: var(--ink-1); }
.dash-kcard.booked { border-color: rgba(251, 191, 36, .5); }

/* ---------- film and orb in Night Shift colours ---------- */
.lg-a { background: radial-gradient(circle, rgba(59, 90, 170, .42), rgba(59, 90, 170, 0) 62%); }
.lg-b { background: radial-gradient(circle, rgba(52, 211, 153, .14), rgba(52, 211, 153, 0) 62%); }
.lg-sun { background: radial-gradient(closest-side, rgba(251, 191, 36, .45), rgba(251, 146, 60, .18) 45%, rgba(10, 16, 32, 0) 75%); }
.film-pin { background: var(--bg); }
.jade-fallback { background: radial-gradient(closest-side at 50% 50%, rgba(167, 243, 208, .3), rgba(52, 211, 153, .2) 30%, rgba(52, 211, 153, .06) 55%, rgba(52, 211, 153, 0) 75%); }
.jade-pill:hover { background: rgba(52, 211, 153, .1); border-color: rgba(52, 211, 153, .45); box-shadow: 0 10px 30px -10px rgba(52, 211, 153, .5); }
.cc-orb { background: radial-gradient(circle at 38% 34%, #fff, #A7F3D0 22%, #10B981 55%, rgba(16, 185, 129, 0) 72%); box-shadow: 0 0 30px rgba(52, 211, 153, .55); }
.cc-av { background: linear-gradient(135deg, #34D399, #2DD4BF); }
.mo-ok { background: #34D399; }

/* ---------- who it's for ---------- */
.hz { padding: 8px 0 24px; }
.hz-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 26px; color: var(--ink-3); font-size: 15px; }
.hz-in b { color: var(--ink-2); font-weight: 500; }
.hz-t { color: var(--ink-3); font-size: 14px; font-weight: 500; font-family: inherit; }

/* ---------- everything we run for you: the parts above the interactive dashboard ---------- */
.sx { list-style: none; margin: 0 auto 36px; padding: 0; display: grid; gap: 1px; max-width: 1080px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.sx li { background: var(--bg); padding: 18px 18px 20px; }
.sx b { display: block; font-size: 16px; font-weight: 700; color: var(--ink-1); letter-spacing: -.01em; margin-bottom: 4px; }
.sx span { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.sx .ans b::before, .sx .bk b::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin: 0 8px 2px 0; vertical-align: middle; }
.sx .ans b::before { background: var(--answered); box-shadow: 0 0 8px rgba(52, 211, 153, .7); }
.sx .bk b::before { background: var(--booked); }
.sx-more { text-align: center; color: var(--ink-3); font-size: 15px; margin: -16px 0 36px; }
.sx-more b { color: var(--ink-2); font-weight: 500; }
@media (min-width: 700px) { .sx { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .sx { grid-template-columns: repeat(3, 1fr); } }

/* ---------- how it works: plain numbers, thin dividers, full width ---------- */
.hiw { padding: var(--sect) 0; border-top: 1px solid var(--line); }
.hiw ol { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--line); }
.hiw li { display: grid; grid-template-columns: 48px 1fr; gap: 4px 16px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.hiw .n { grid-row: span 2; font-family: var(--head); font-size: 15px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top: 3px; }
.hiw h3 { margin: 0; font-family: var(--head); font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--ink-1); }
.hiw p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 46rem; }
.hiw .pilot { margin-top: 28px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r); font-size: 16px; color: var(--ink-2); background: rgba(255, 255, 255, .02); }
.hiw .pilot b { color: var(--ink-1); }
@media (min-width: 900px) {
  .hiw li { grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1.6fr); gap: 0 32px; align-items: baseline; padding: 30px 0; }
  .hiw .n { grid-row: auto; }
}

/* ---------- try Jade yourself: smaller and optional ---------- */
.jade-sec.try { padding-top: var(--sect); padding-bottom: calc(var(--sect) * .5); }
.jade-sec.try .jade-stage { width: min(560px, 100vw); }
.jade-sec.try .rd-h2 { font-size: clamp(1.8rem, 1.1rem + 2.4vw, 2.8rem); }
@media (max-width: 600px) { .jade-sec.try .jade-stage { width: 100vw; } }

/* ---------- founder ---------- */
.fd { padding: var(--sect) 0; border-top: 1px solid var(--line); }
.fd-in { display: grid; gap: 32px; align-items: start; }
.fd p { font-size: 17px; line-height: 1.65; color: var(--ink-2); max-width: 40rem; margin: 0 0 16px; }
.fd p b { color: var(--ink-1); font-weight: 600; }
@media (min-width: 900px) { .fd-in { grid-template-columns: .8fr 1.2fr; gap: 64px; } }

/* ---------- final call to action: the phone option lives here ---------- */
.rd-cta .cta-phone { margin: 22px auto 0; max-width: 34rem; font-size: 15px; color: var(--ink-3); }
.rd-cta .cta-phone a { color: var(--ink-1); border-bottom: 1px solid rgba(255, 255, 255, .3); padding: 10px 0 2px; display: inline-block; }

/* ======================================================================================================
   Round 3: live hero state, the "Built for" row, marketing, and a phone design of its own (Linear-like:
   small type, tight spacing, left-aligned, one idea at a time, product cropped off the edge).
   ====================================================================================================== */

/* hero live state: new rows slide into the feed, the KPI that changed flashes once */
.hx-feed li.live { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; border-top-color: transparent;
  transition: max-height .7s var(--ease), opacity .6s var(--ease) .1s, padding .7s var(--ease), border-color .7s; }
.hx-feed li.live.in { max-height: 70px; opacity: 1; padding-top: 10px; padding-bottom: 10px; border-top-color: var(--line); }
.hx-feed li.live.ans .av { background: var(--answered-soft); color: var(--answered); }
.hx-feed li.live.bk .av { background: var(--booked-soft); color: var(--booked); }
.hx-feed li.live.in:first-child .t { color: var(--ink-1); }
.hx-kpi.tick b { animation: hxTick 1.2s var(--ease); }
@keyframes hxTick { 0% { color: var(--ink-1); } 25% { color: #FFFFFF; text-shadow: 0 0 18px rgba(255, 255, 255, .45); } 100% { color: var(--ink-1); text-shadow: none; } }
.hx-kpi.bump.tick b { animation: none; }
.hx-ls { display: contents; }

/* "Built for": one row that glides sideways */
.hz { padding: 72px 0 28px; }
.hz-in { flex-wrap: nowrap; gap: 18px; justify-content: center; max-width: 820px; }
.hz-t { flex: none; }
.hz-vp { position: relative; min-width: 0; flex: 1; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.hz-track { display: flex; width: max-content; animation: hzGlide 34s linear infinite; }
.hz-row { display: flex; gap: 30px; padding-right: 30px; white-space: nowrap; }
.hz-row b { color: var(--ink-2); font-weight: 500; font-size: 15px; }
@keyframes hzGlide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .hz-track { animation: none; }
  .hz-vp { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
  .hz-vp::-webkit-scrollbar { display: none; }
  .hz-row[aria-hidden] { display: none; }
}

/* marketing: its own row in "Everything we run", clearly optional */
.sx li.mk { position: relative; grid-column: 1 / -1; padding-right: 110px; background: linear-gradient(90deg, rgba(255, 255, 255, .025), transparent 70%), var(--bg); }
.sx li.mk em { position: absolute; top: 18px; right: 18px; font-style: normal; font-size: 12.5px; font-weight: 500; color: var(--ink-2);
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line-2); }

.hm-swipe { display: none; }

/* ---------------------------------------- phones ---------------------------------------- */
@media (max-width: 768px) {
  /* header: logo left, a small "Book a call" pill and a two-line menu icon right */
  .nav { height: 60px; }
  .nav-inner { padding: 0 16px; gap: 6px; }
  .nav-logo { font-size: 15px; }
  .nav .nav-cta { display: inline-flex !important; align-items: center; position: relative; margin-left: auto; height: 32px; padding: 0 13px !important;
    font-size: 13px !important; font-weight: 600; border-radius: 999px; }
  .nav .nav-cta::after { content: ''; position: absolute; inset: -6px -4px; }
  .nav-toggle { margin-left: 2px !important; width: 44px; height: 44px; align-items: center !important; justify-content: center; gap: 6px; padding: 0; }
  .nav-toggle span { width: 18px !important; height: 1.5px; transition: transform .3s var(--ease); }
  .nav-toggle.open span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 1; transform: translateY(-3.75px) rotate(-45deg); }

  /* menu: small grouped links with small labels, buttons at the bottom */
  .mobile-menu { padding: 76px 20px calc(20px + env(safe-area-inset-bottom)); background: rgba(8, 9, 10, .97); }
  html.menu-open .nav { background: rgba(8, 9, 10, .97); }
  .mm2 { display: flex; flex-direction: column; gap: 26px; overflow-y: auto; }
  .mm2-g { display: flex; flex-direction: column; }
  .mm2-l { margin: 0 0 6px; font-size: 13px; font-weight: 500; color: var(--ink-3); }
  .mm2 a { display: flex; align-items: center; min-height: 42px; font-size: 18px; font-weight: 500; letter-spacing: -.01em; color: var(--ink-1); text-decoration: none;
    opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .45s var(--ease), color .2s; }
  .mobile-menu.open .mm2 a { opacity: 1; transform: none; transition-delay: .05s; }
  .mm2 a:active { color: var(--ink-2); }
  .mm-actions { flex-direction: row; gap: 10px; padding-top: 16px; }
  .mm-jade, .mm-book { flex: 1; height: 44px; border-radius: 10px; font-size: 14.5px !important; }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) { .mm2 a { transform: none; transition: none; } }

/* ====================================================================================================
   PHONE SYSTEM (under 700px). One rule set for every section, measured against linear.app at 390px.
   Alignment: one rule per section. Left: hero, everything we run, how it works, about, FAQ, closing.
              Centered: try Jade only. Every heading, paragraph and button in a section shares one edge.
   Spacing scale: 8 / 12 / 16 / 24 / 32 / 72.  Sections: 72px top and bottom.
              label -> title 12, title -> text 12, text -> button or content 24, content blocks 32.
   Type: headline 32, section titles 24, body 15 (1.55), small 13. Buttons: 44px tall, compact.
   ==================================================================================================== */
.d-only { } .m-only { display: none; }
.hx-tick { display: none; }
@media (max-width: 699px) {
  :root { --sect: 72px; }
  .d-only { display: none; } .m-only { display: inline; }
  body { font-size: 15px; }
  .container { padding: 0 20px; }

  /* type */
  .rd-k { font-size: 13px; margin: 0; }
  .rd-h2, .fc-h, .sv-h, .fq h2, .jade-sec.try .rd-h2, .rd-cta .rd-h2 { font-size: 24px; line-height: 1.2; letter-spacing: -.025em; }
  .rd-k + .rd-h2, .rd-h2[style*="margin-top"] { margin-top: 12px !important; }
  .btn-lg, .rd-cta .btn-lg { height: 44px; min-height: 44px; padding: 0 18px !important; font-size: 15px; border-radius: 10px; }

  /* ---------- hero (left) ---------- */
  .rd-hero.hx-hero { padding: 112px 0 0; text-align: left; }
  .rd-hero.hx-hero::before { height: 560px; }
  .hx-hero .rd-hero-in > * { margin-left: 0; margin-right: 0; max-width: none; }
  .hx-hero .rd-eyebrow { margin: 0 0 16px; font-size: 13px; line-height: 1.5; color: var(--ink-3); text-wrap: pretty; }
  .hx-hero .rd-h1 { margin: 0; font-size: 32px; line-height: 1.1; letter-spacing: -.035em; }
  .hx-hero .rd-lede { margin: 16px 0 0; font-size: 15px; line-height: 1.55; }
  .hx-hero .rd-ctas { flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 8px 20px; margin: 24px 0 0; }
  .hx-hero .rd-link { font-size: 15px; padding: 10px 0; }

  @keyframes hxIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

  /* "Built for": clear space above, away from the demo */
  .hz { padding: 72px 0 0; }
  .hz-in { gap: 16px; justify-content: flex-start; }
  .hz-t { font-size: 13px; }
  .hz-row { gap: 24px; padding-right: 24px; }
  .hz-row b { font-size: 14px; }
  .hz-vp { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }

  /* ---------- everything we run (left) ---------- */
  .rd-dash.hm-dash { padding-top: var(--sect); padding-bottom: var(--sect); }
  .hm-dash .rd-dash-head { text-align: left; }
  .hm-dash .rd-dash-head > * { margin-left: 0 !important; margin-right: 0 !important; max-width: none; }
  .hm-dash .rd-dash-head .rd-h2 { margin-top: 12px; margin-bottom: 0; }
  .hm-dash .rd-dash-head p:not(.rd-k) { margin: 12px 0 0; font-size: 15px; line-height: 1.55; }
  .hm-dash .sx { margin: 24px 0 32px; }
  .sx li { padding: 14px 16px; }
  .sx b { font-size: 15px; margin-bottom: 2px; }
  .sx span { font-size: 14px; line-height: 1.5; }
  .sx li.mk { padding-right: 16px; }
  .sx li.mk b { padding-right: 80px; }
  .sx li.mk em { top: 12px; right: 12px; font-size: 12px; padding: 2px 9px; }
  /* the dashboard: fitted to the phone, tabs scroll on top, nothing past the edge */
  .rd-dash .dash-showcase-inner { padding: 0 20px; }
  .rd-dash .dash-example-label { text-align: left; margin-bottom: 8px; }
  .rd-dash .dash-window-lg { width: 100%; }
  .rd-dash .dash-window-lg .dash-main { height: auto; min-height: 280px; padding: 14px; }
  .rd-dash .dash-window-lg .dash-kpi-lbl { font-size: 12px; line-height: 1.3; }
  .rd-dash .dash-window-lg .dash-fd-desc { white-space: normal; overflow: visible; text-overflow: clip; }
  .rd-dash .dash-window-lg .dash-sidebar { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding: 0 4px; }
  .rd-dash .dash-window-lg .dash-sbl { flex: none; padding: 12px 10px; font-size: 13px; }
  .hm-dash .dash-showcase::after, .dash-showcase.hm-dash::after { display: none; }

  /* ---------- how it works (left) ---------- */
  .hiw ol { margin-top: 24px; }
  .hiw li { display: block; padding: 16px 0; }
  .hiw .n { display: inline; margin-right: 10px; font-size: 14px; padding: 0; }
  .hiw h3 { display: inline; }
  .hiw p { margin-top: 6px; }
  .hiw h3 { font-size: 16px; line-height: 1.35; }
  .hiw p { font-size: 15px; line-height: 1.55; }
  .hiw .pilot { margin-top: 24px; padding: 16px; font-size: 15px; line-height: 1.55; }

  /* ---------- try Jade (centered: label, title, line, orb, button) ---------- */
  .jade-sec.try { padding: var(--sect) 0 32px; text-align: center; }
  .jade-sec.try .jade-inner { align-items: center; text-align: center; }
  .jade-sec.try .jade-inner > * { margin-left: auto; margin-right: auto; text-align: center; }
  .jade-sec.try .rd-k { justify-content: center; }
  .jade-sec.try .jade-sub { margin-top: 12px; font-size: 15px; line-height: 1.55; max-width: 22rem; }
  .jade-sec.try .jade-stage { width: 100vw; aspect-ratio: 1 / 1.16; margin-top: -44px; }
  .jade-sec.try .jade-controls { top: 86%; }
  .jade-sec.try .jade-note { top: calc(86% + 50px); }
  .jade-sec.try .jade-pill { height: 44px; padding: 0 18px; font-size: 15px; }
  .jade-sec.try .jade-alt { margin-top: 0; font-size: 13px; }

  /* ---------- about (left) ---------- */
  .fd-in { gap: 0; }
  .fd .rd-h2 { margin-bottom: 0; }
  .fd .rd-link, .fq-more .rd-link, .hx-hero .rd-link { padding-left: 0; padding-right: 0; }
  .fd-in > div + div { margin-top: 12px; }
  .fd p { font-size: 15px; line-height: 1.55; margin: 0 0 12px; }
  .fd .rd-link { margin-top: 8px; font-size: 15px; }

  /* ---------- FAQ (left) ---------- */
  .fq-in { gap: 0 !important; }
  .fq-head > * { margin-left: 0; margin-right: 0; text-align: left; }
  .fq-head .rd-h2 { margin-bottom: 0; }
  .fq-more { margin-top: 12px; font-size: 15px; }
  .fq-list { margin-top: 24px; }
  .faq-btn { font-size: 15px; line-height: 1.4; padding-top: 16px; padding-bottom: 16px; }
  .faq-body-inner p { font-size: 15px; line-height: 1.55; }

  /* ---------- closing (left: title, line, button, phone line share one edge) ---------- */
  .rd-cta { padding: var(--sect) 0; text-align: left; }
  .rd-cta::before { opacity: .5; }
  .rd-cta .container > * { margin-left: 0 !important; margin-right: 0 !important; max-width: none; text-align: left; }
  .rd-cta .rd-h2 { margin: 0; }
  .rd-cta p { margin: 12px 0 0; font-size: 15px; line-height: 1.55; }
  .rd-cta .container > div { margin-top: 24px; }
  .rd-cta .btn-lg { display: inline-flex; width: auto; }
  .rd-cta .cta-phone { margin-top: 16px; font-size: 14px; color: var(--ink-3); }
  .rd-cta .cta-phone a { padding: 10px 0 2px; }

  /* footer: tight two-column groups with small labels (kept from round 3) */
  .footer { padding: 48px 0 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; border-bottom: 0; padding-bottom: 0; }
  .footer-grid > :first-child { padding-bottom: 24px; }
  .footer-tagline { font-size: 13.5px; line-height: 1.5; margin-top: 12px; max-width: 30rem; }
  .footer-col-head { font-size: 13px; color: var(--ink-3); margin-bottom: 4px; letter-spacing: 0; text-transform: none; }
  .footer-link { min-height: 34px !important; font-size: 14px; color: var(--ink-2); }
  .footer-grid > :last-child { grid-column: 1 / -1; }
  .footer-bottom { text-align: left; align-items: flex-start; font-size: 13px; margin-top: 24px; padding-top: 16px; }
}
@media (max-width: 699px) and (prefers-reduced-motion: reduce) {
  .hx[data-hx] .hx-w, .hx-ls .hx-l.cur, .hx-tick .hx-in.swap { transition: none; animation: none; }
}

/* the orb carries its own light: no extra haze behind it */
.jade-sec.try::before { display: none; }
/* once the real orb runs, the CSS placeholder glow is gone completely (its breathing animation kept it faintly visible) */
.jade-stage.webgl .jade-fallback { animation: none; opacity: 0; visibility: hidden; }

/* ======================================================================================================
   Inner pages (Services, About, Contact, Book, Privacy, 404): the same system as the homepage.
   ====================================================================================================== */
.pg-hero .rd-eyebrow { color: var(--ink-3); }
.legal { padding: 24px 0 var(--sect); }
.legal-in > * { max-width: 46rem; }
.legal h2 { margin: 40px 0 12px; font-family: var(--head); font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--ink-1); }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 18px; }
.legal li { margin-bottom: 8px; }
.legal b { color: var(--ink-1); font-weight: 600; }
.legal a { color: var(--ink-1); border-bottom: 1px solid rgba(255, 255, 255, .3); text-decoration: none; }
.pg-hero.nf { min-height: 62vh; }
.fd .sv-inc { margin-top: 20px; }

@media (max-width: 699px) {
  .pg-hero { padding: 112px 0 8px; }
  .pg-hero .rd-eyebrow { margin: 0 0 16px; font-size: 13px; }
  .pg-hero .rd-h1 { margin: 0; font-size: 32px; line-height: 1.1; letter-spacing: -.035em; max-width: none; }
  .pg-hero .rd-lede { margin: 16px 0 0; font-size: 15px; line-height: 1.55; }
  .pg-hero .rd-ctas { flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 8px 20px; margin: 24px 0 0; max-width: none; }
  .pg-hero .rd-link { font-size: 15px; padding: 10px 0; }
  .pg-hero + section, .pg-hero + .sv-sec { padding-top: 56px; }
  /* Services parts */
  .sv-sec { padding: 56px 0; }
  .sv-txt .rd-k { margin: 0; }
  .sv-h { font-size: 24px; line-height: 1.2; letter-spacing: -.025em; margin: 12px 0 0; max-width: none; }
  .sv-txt p, .sv-txt-p, .ct-form p, .bk p { font-size: 15px; line-height: 1.55; }
  .sv-txt p { margin: 12px 0 0; }
  .sv-inc { margin: 20px 0 0; }
  .sv-inc li { font-size: 15px; }
  .sv-win { margin-top: 32px; }
  .rd-dash .rd-dash-head .rd-h2, .dash-showcase .rd-h2 { font-size: 24px; line-height: 1.2; }
  /* Privacy */
  .legal { padding: 40px 0 var(--sect); }
  .legal h2 { font-size: 18px; margin-top: 32px; }
  .legal p, .legal li { font-size: 15px; line-height: 1.6; }
  /* Contact and Book */
  .ct-grid { padding-top: 40px; gap: 32px; }
  .ct-form h2 { font-size: 24px; line-height: 1.2; }
  .bk { padding-top: 40px; }
}
/* footer and menu links land on each Services section below the fixed header */
section[id] { scroll-margin-top: 76px; }

/* ======================================================================================================
   Round 6: the original blue-to-purple as ONE brand accent (the "Fills Your Calendar" gradient).
   Near-black stays. Green only for "call answered" status dots; amber only for booked jobs.
   ====================================================================================================== */
:root {
  --brand-1: #A78BFA; --brand-2: #60A5FA; --brand-3: #5E6AD2;
  --brand: #8B9CF8; --brand-soft: rgba(139, 156, 248, .14); --brand-line: rgba(139, 156, 248, .4);
  --brand-grad: linear-gradient(90deg, #A78BFA 0%, #60A5FA 40%, #5E6AD2 70%, #A78BFA 100%);
}
.rd-h1 .g-text { font-weight: inherit; letter-spacing: inherit; padding-right: .04em; }
/* small highlights */
.nav-jade-dot, .cj-dot, .hx-live i { background: var(--brand); box-shadow: 0 0 8px rgba(139, 156, 248, .85); }
.rd-k::before { background: linear-gradient(90deg, var(--brand-1), var(--brand-2)); opacity: .8; }
.rd-cta .cta-phone a, .legal a { border-bottom-color: var(--brand-line); }
.btn-primary:hover { box-shadow: 0 0 0 4px rgba(139, 156, 248, .16), 0 10px 32px -8px rgba(124, 108, 240, .65); }
.btn-ghost:hover, .jade-pill:hover { border-color: var(--brand-line); background: var(--brand-soft); box-shadow: 0 10px 30px -10px rgba(124, 108, 240, .55); }
.mm-jade:active { background: var(--brand-soft); }
.jade-fallback { background: radial-gradient(closest-side at 50% 50%, rgba(196, 181, 253, .26), rgba(124, 108, 240, .18) 30%, rgba(94, 106, 210, .05) 55%, rgba(94, 106, 210, 0) 75%); }
.tp-call { background: var(--brand-soft); border-color: var(--brand-line); }
.tp-call:hover { background: rgba(139, 156, 248, .2); }
.tp-ic { background: linear-gradient(135deg, var(--brand-1), var(--brand-3)); box-shadow: 0 0 0 5px rgba(139, 156, 248, .16); }
.bk-check { background: linear-gradient(135deg, var(--brand-1), var(--brand-3)) !important; }
a:focus-visible, button:focus-visible, .btn:focus-visible { outline-color: var(--brand-1); }
/* the system rows: icon, short outcome, the part's name */
.sx li { display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; align-items: start; }
.sx li > b, .sx li > span:not(.sx-ic) { grid-column: 2; }
.sx-ic { grid-row: span 2; width: 22px; height: 22px; color: var(--brand); margin-top: 1px; }
.sx-ic svg { width: 22px; height: 22px; display: block; }
.sx b { font-size: 16px; }
.sx li > span:not(.sx-ic) { font-size: 13.5px; color: var(--ink-3); }
.sx .ans b::before, .sx .bk b::before { display: none; }
.sx .ans .sx-ic { color: var(--answered); }
.sx li.mk { padding-right: 18px; }
.sx li.mk em { display: none; }
/* the hero product on phones is its own compact card stack */
.hx-m { display: none; }

/* magnetic main button (desktop pointer only; js/redesign.js) */
.btn-mag { transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s; will-change: transform; }

/* ---------------- phones ---------------- */
@media (max-width: 768px) {
  /* header in Linear's proportions: 64px tall, logo 23px in and 22px tall, a 32px pill, a 64px menu target flush right */
  .nav { height: 64px; }
  .nav-inner { padding: 0 0 0 23px !important; gap: 0; }
  .nav-logo { font-size: 15px; gap: 8px; min-height: 44px; }
  .nav-logo svg { width: 20px; height: 20px; }
  .nav .nav-cta { height: 32px; padding: 0 12px !important; font-size: 13px !important; font-weight: 500; background: #E5E5E6; color: #08090A; border-radius: 9999px; box-shadow: none; }
  .nav .nav-cta::after { inset: -6px -2px; }
  .nav-toggle { width: 59px !important; height: 64px !important; margin: 0 !important; gap: 5.5px; }
  .nav-toggle span { width: 15px !important; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
  .mobile-menu { padding-top: 84px; }
}
@media (max-width: 699px) {


  /* "One system, in one place": a compact two-column grid that fits one screen */
}
@media (max-width: 699px) and (prefers-reduced-motion: reduce) {
  .hm-r, .hm-live.swap, .hm-kpis .tick b { transition: none; animation: none; }
  .hm-call .hx-ic i { animation: none; }
}
.sx .sx-ic { color: var(--brand); }
.sx .ans .sx-ic { color: var(--answered); }
.hx-l.j b, .hm-line .hm-who { color: var(--brand) !important; }
@media (max-width: 768px) { .nav-toggle span { height: 1px !important; } }

/* ---------- final phone hero: the first screen is the label, headline, subhead and buttons only; the demo card
   starts just below it and builds in one row at a time when it scrolls into view (js/redesign.js runPhone) ---------- */
@media (max-width: 699px) {
  .rd-hero.hx-hero { padding-top: 64px; }
  .hx-hero .rd-hero-in { display: flex; flex-direction: column; justify-content: center; padding-top: 8px; padding-bottom: 72px;
    min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); }
  .hx-hero .rd-eyebrow { margin-bottom: 20px; }
  .hx-hero .rd-h1 { font-size: 40px; line-height: 1.05; letter-spacing: -.04em; }
  .hx-hero .rd-lede { margin-top: 20px; }
  .hx-hero .rd-ctas { margin-top: 28px; }
}
@media (max-width: 699px) and (prefers-reduced-motion: reduce) {
  .hx-m .hm-r { transition: none; transform: none; }
  .hx.s2:not(.s3) .hm-call .hx-ic, .hm-line .typing::after { animation: none; }
}

/* ======================================================================================================
   Round 8 (live-site fixes): hero demo button with a real box, round orb at every size, readable phone dashboard,
   Services cut down to a headline, a line and one visual each, the hero call told as a conversation.
   ====================================================================================================== */
/* "Hear a live demo": a real outlined button that always contains its label */
.hx-hero .hx-demo { gap: 10px; white-space: nowrap; color: var(--ink-1); }
.hx-hero .hx-demo .nav-jade-dot { flex: none; }
@media (max-width: 699px) {
  .hx-hero .rd-ctas.rd-ctas-1 { flex-direction: column; align-items: stretch; gap: 10px; max-width: none; }
  .hx-hero .rd-ctas-1 .btn { width: 100%; height: 52px; justify-content: center; padding: 0 20px; }
}

/* the orb's placeholder light is a circle, never stretched to the (taller) stage */
.jade-fallback { background: radial-gradient(circle closest-side at 50% 50%, rgba(196, 181, 253, .26), rgba(124, 108, 240, .18) 30%, rgba(94, 106, 210, .05) 55%, rgba(94, 106, 210, 0) 75%); }


/* ---------- the example dashboard on phones: aligned rows, the desktop status colours ---------- */
@media (max-width: 699px) {
  .rd-dash .dash-section-lbl { font-size: 11px; letter-spacing: .06em; margin-bottom: 4px; }
  /* Inbox: one fixed-width type tag, then who and what, then when */
  .rd-dash .dash-ib-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0; padding: 11px 0; border-radius: 0; }
  .rd-dash .dash-ib-ch { width: 64px; flex: none; font-size: 11px; padding: 5px 0; border-radius: 6px; }
  .rd-dash .dash-ib-main { min-width: 0; }
  .rd-dash .dash-ib-name { font-size: 14px; }
  .rd-dash .dash-ib-txt { font-size: 13px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rd-dash .dash-ib-time { font-size: 12px; }
  /* Pipeline: the four stages stacked, each in its colour, leads side by side */
  .rd-dash .dash-journey .dash-kanban { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .rd-dash .dash-journey .dash-kcol { padding: 10px; gap: 8px; border-left: 2px solid var(--stc, var(--border-strong)); }
  .rd-dash .dash-journey .dash-kcol-h { font-size: 12.5px; color: var(--stc, var(--ink-2)); justify-content: flex-start; gap: 8px; margin: 0; padding: 0; }
  .rd-dash .dash-journey .dash-kcol-h span { font-size: 12px; color: var(--ink-3); }
  .rd-dash .dash-journey .dash-kcol-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .rd-dash .dash-journey .dash-kslot { height: 44px; }
  .rd-dash .dash-journey .dash-kcard, .rd-dash .dash-jcard { padding: 7px 9px; }
  .rd-dash .dash-journey .dash-kcard b, .rd-dash .dash-jcard b { font-size: 12.5px; }
  .rd-dash .dash-journey .dash-kcard span, .rd-dash .dash-jcard span { font-size: 11.5px; }
  .rd-dash .dash-journey .dash-kcard.booked { border-color: rgba(52, 211, 153, .4); background: linear-gradient(0deg, var(--green-dim), var(--green-dim)), var(--bg-elevated); }
  .rd-dash .dash-kcol[data-stage="new"] { --stc: var(--ink-2); }
  .rd-dash .dash-kcol[data-stage="contacted"] { --stc: var(--amber); }
  .rd-dash .dash-kcol[data-stage="nurturing"] { --stc: var(--accent); }
  .rd-dash .dash-kcol[data-stage="booked"] { --stc: var(--green); }
  /* My Leads: name and trade on the left, the stage on the right, progress underneath */
  .rd-dash .dash-lead-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) 92px; grid-template-areas: "dot name badge" ". ind badge" ". bar bar";
    column-gap: 10px; row-gap: 2px; align-items: center; padding: 11px 0; }
  .rd-dash .dash-lead-row .dash-fd-dot { grid-area: dot; align-self: center; }
  .rd-dash .dash-ld-name { grid-area: name; min-width: 0; font-size: 14px; }
  .rd-dash .dash-ld-ind { grid-area: ind; min-width: 0; font-size: 12.5px; }
  .rd-dash .dash-ld-bar { grid-area: bar; width: auto; margin-top: 7px; }
  .rd-dash .dash-ld-badge { grid-area: badge; width: 92px; min-width: 0; font-size: 12px; padding: 5px 0; border-radius: 6px; justify-self: end; }
}

/* ---------- Services: each part is a headline, one line and one visual that shows it working ---------- */
.sv2 .sv-txt > p { max-width: 30rem; }
.sv2 .sv { position: relative; }
.sv2 .toast { display: flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; margin: 14px auto 0; padding: 9px 14px; border-radius: 999px;
  font-size: 13px; color: var(--ink-1); background: #17181B; border: 1px solid var(--line-2); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .8); }
.sv2 .toast i { width: 7px; height: 7px; border-radius: 50%; background: var(--answered); box-shadow: 0 0 8px rgba(52, 211, 153, .8); }
.sv2 .w .toast { margin-top: 14px; }
.v-av { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, .08); color: var(--ink-2); }
.v-tag { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  color: var(--green); background: var(--green-dim); }
.v-tag i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.v-tag-bk { color: var(--booked); background: var(--booked-soft); }

/* 01 website: a phone showing the client's own site (light, with a big readable Call now) */
.v-phone { width: 248px; margin: 0 auto; padding: 9px; border-radius: 38px; background: #1B1C1F; border: 1px solid var(--line-2);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .04); }
.v-ph-scr { position: relative; border-radius: 30px; background: #FAFAF9; color: #111318; padding: 34px 16px 18px; text-align: left; overflow: hidden; }
.v-ph-scr::before { content: ''; position: absolute; top: 9px; left: 50%; width: 72px; height: 20px; border-radius: 12px; background: #1B1C1F; transform: translateX(-50%); }
.v-ph-nav { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid #E7E5E4; }
.v-ph-nav b { font-size: 13px; font-weight: 700; color: #111318; }
.v-ph-menu { display: grid; gap: 4px; }
.v-ph-menu i { display: block; width: 16px; height: 1.5px; background: #111318; }
.v-ph-k { margin: 16px 0 0; font-size: 11px; color: #57534E; }
.v-ph-h { margin: 6px 0 14px; font-family: var(--head); font-size: 21px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: #111318; }
.v-ph-call, .v-ph-book { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: 10px; font-size: 15px; font-weight: 700; }
.v-ph-call { color: #FFFFFF; background: #111318; }
.v-ph-call i { width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat; }
html.rd-js .v-ph-call.pb { opacity: 1; transform: none; }
html.rd-js .v-ph-call.pb.on { animation: rdTap .6s var(--rd-ease) 1; }
.v-ph-book { margin-top: 8px; color: #111318; border: 1.5px solid #D6D3D1; }
.v-ph-list { margin-top: 16px; display: grid; }
@media (max-width: 699px) { .v-ph-list { display: none; } .v-ph-scr { padding-bottom: 16px; } }
.v-ph-list span { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid #E7E5E4; font-size: 12.5px; color: #292524; }
.v-ph-list span::after { content: '›'; color: #A8A29E; }

/* 02 follow-up: an email thread */
.v-subj { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--ink-1); }
.v-mail { padding: 12px 0; border-top: 1px solid var(--line); }
.v-mail-h { display: flex; align-items: center; gap: 10px; }
.v-mail-h b { font-size: 13px; font-weight: 600; color: var(--ink-1); }
.v-mail-h small { margin-left: auto; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.v-mail p { margin: 6px 0 0 38px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.v-mail-in .v-av { background: rgba(139, 156, 248, .16); color: var(--brand, #8B9CF8); }

/* 03 CRM: the pipeline, one lane per stage, in the dashboard's status colours */
.v-pipe { display: grid; gap: 8px; }
.v-lane { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px;
  background: rgba(255, 255, 255, .02); border: 1px solid var(--line); border-left: 2px solid var(--stc); }
.v-lane-h { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--stc); }
.v-lane-h i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--stc); }
.v-lane-h em { font-style: normal; font-weight: 500; color: var(--ink-3); }
.v-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.v-chip { padding: 4px 9px; border-radius: 6px; font-size: 12px; color: var(--ink-1); background: var(--bg-elevated); border: 1px solid var(--line-2); white-space: nowrap; }
.v-new { --stc: var(--ink-2); } .v-contacted { --stc: var(--amber); } .v-nurturing { --stc: var(--accent); } .v-booked { --stc: var(--green); }
.v-booked .v-chip { border-color: rgba(52, 211, 153, .35); background: var(--green-dim); }
.v-chip-new { box-shadow: 0 0 0 3px rgba(52, 211, 153, .15); }

/* 04 Jade: a call transcript */
.v-tx-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 12px; color: var(--ink-3); }
.v-ans { display: inline-flex; align-items: center; gap: 7px; color: var(--answered); font-weight: 600; }
.v-ans i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px rgba(52, 211, 153, .8); }
.v-tx { list-style: none; margin: 0; padding: 0; }
.v-tx li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; color: var(--ink-1); }
.v-tx time { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top: 1px; }
.v-tx b { display: block; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
.v-tx li.j b { color: var(--brand, #8B9CF8); }

/* 05 reviews: a 5-star review arriving */
.v-rev-sent { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 12px; color: var(--ink-3); }
.v-rev-sent i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.v-rev { padding: 16px; border-radius: 12px; background: var(--bg-elevated); border: 1px solid var(--line-2); }
.v-rev-top { display: flex; align-items: center; gap: 10px; }
.v-rev-who b { display: block; font-size: 13.5px; color: var(--ink-1); }
.v-rev-who small { font-size: 11.5px; color: var(--ink-3); }
.v-stars { display: flex; gap: 2px; margin: 12px 0 8px; font-size: 18px; line-height: 1; color: var(--booked); }
.v-stars i { font-style: normal; }
html.rd-js .v-rev .v-stars i { opacity: .15; transition: opacity .3s ease; }
html.rd-js .v-rev.on .v-stars i { opacity: 1; }
.v-rev.on .v-stars i:nth-child(2) { transition-delay: .15s; } .v-rev.on .v-stars i:nth-child(3) { transition-delay: .3s; }
.v-rev.on .v-stars i:nth-child(4) { transition-delay: .45s; } .v-rev.on .v-stars i:nth-child(5) { transition-delay: .6s; }
.v-rev p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }

/* 06 report: a simple monthly summary */
.v-rp li { grid-template-columns: 1fr auto; font-size: 13px; }

/* 07 marketing: where the calls came from */
.v-src { list-style: none; margin: 0; padding: 0; }
.v-src li { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.v-src li:first-child { border-top: 0; }
.v-src b { font-variant-numeric: tabular-nums; color: var(--ink-1); }

@media (min-width: 900px) { .sv2.sv-sec { padding-top: 72px; padding-bottom: 72px; } .sv2 .sv-win { max-width: 440px; } }
@media (max-width: 699px) {
  .sv2.sv-sec { padding: 36px 0; }
  .sv2 .sv-grid { gap: 0; }
  .v-phone { width: 232px; }
  .sv2 + .sv2 { border-top: 1px solid var(--line); }
  .sv2 .sv-win { margin-top: 20px; }
  .sv2 .sv-win::before { display: none; }
  .sv2 .w-body { padding: 14px; }
  .sv2 .rd-sample { margin-top: 10px; }
  .v-lane { grid-template-columns: 84px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { html.rd-js .v-rev .v-stars i { opacity: 1; transition: none; } }
@media (max-width: 699px) {
  .rd-dash [data-panel="leads"] .dash-section-lbl { display: none; }
  .rd-dash .dash-journey.focus .dash-kcard { opacity: .62; }
  .nav .nav-cta { white-space: nowrap; min-width: max-content; }
}

/* ======================================================================================================
   Round 9 (phones): the top half reads like the bottom half. Text first, thin dividers, generous space,
   never two bordered boxes back to back. Desktop (900px and up) is unchanged.
   ====================================================================================================== */
/* hero demo: the desktop's layered scene, scaled down as one picture a little wider than the screen.
   js/redesign.js sets --hxk = screen width x 1.1 / 1080, so the call card and the transcript run off the edges. */
@media (max-width: 899px) {
  .hx-hero .hx-stage { overflow: hidden; max-width: none; padding: 0 0 4px; }
  .hx-hero .hx { --hxk: .4; position: relative; left: 50%; width: 1080px; max-width: none; height: 560px; display: block;
    margin: 24px 0 calc(560px * var(--hxk) - 560px + 52px); transform: translateX(-50%) scale(var(--hxk)); transform-origin: 50% 0; }
  .hx-hero .hx-note { left: 50%; right: auto; bottom: calc(-38px / var(--hxk)); transform: translateX(-50%); font-size: calc(12px / var(--hxk)); white-space: nowrap; }
  .hx-hero .hx-tick { display: none; }
}

@media (max-width: 699px) {
  /* "Built for": glides sideways like desktop; faded edges, so no word ever looks cut */
  .hz { padding: 96px 0 0; }
  .hz-in { flex-direction: column; align-items: flex-start; gap: 14px; flex-wrap: nowrap; max-width: none; }
  .hz-t { font-size: 13px; }
  .hz-vp { width: 100%; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
  .hz-track { animation: hzGlide 30s linear infinite; }
  .hz-row { gap: 28px; padding-right: 28px; flex-wrap: nowrap; white-space: nowrap; }
  .hz-row b { font-size: 15px; }

  /* "One system, in one place": a plain list like How it works. Small purple icon, bold line, short grey line, thin dividers */
  .rd-dash.hm-dash { padding-top: 96px; border-top: 0; }
  .hm-dash .sx { display: block; margin: 32px 0 0; background: none; border: 0; border-radius: 0; overflow: visible; border-top: 1px solid var(--line); }
  .hm-dash .sx li, .hm-dash .sx li.mk { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 14px; row-gap: 3px; padding: 18px 0;
    background: none; border-bottom: 1px solid var(--line); }
  .hm-dash .sx-ic { grid-row: span 2; width: 20px; height: 20px; margin: 2px 0 0; }
  .hm-dash .sx-ic svg { width: 20px; height: 20px; }
  .hm-dash .sx b, .hm-dash .sx li.mk b { font-size: 16px; line-height: 1.35; margin: 0; padding: 0; }
  .hm-dash .sx li > span:not(.sx-ic) { font-size: 14px; line-height: 1.45; color: var(--ink-3); }

  /* the dashboard is its own section: a heading and one line, with real space before it */
  .hm-dash .hm-dash-h.m-only { display: block; padding-top: 96px; margin-bottom: 24px; }
  .hm-dash-h .rd-h2 { margin: 12px 0 0; }
  .hm-dash-h p:not(.rd-k) { margin: 12px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
  .rd-dash .dash-showcase-inner { padding-top: 0; }
}
@media (max-width: 699px) and (prefers-reduced-motion: reduce) {
  /* Reduce Motion: the row holds still and wraps, every word whole */
  .hz-track { animation: none !important; width: auto; }
  .hz-vp { -webkit-mask-image: none; mask-image: none; overflow: visible; }
  .hz-row[aria-hidden] { display: none; }
  .hz-row { flex-wrap: wrap; gap: 6px 18px; padding: 0; white-space: normal; }
}
@media (max-width: 699px) {
  /* page heroes: the same big step down to the first section on every inner page */
  .pg-hero { padding-bottom: 48px; }
  .pg-hero + section, .pg-hero + .sv-sec, .pg-hero + .sv2.sv-sec { padding-top: 56px; }
  /* Services: every part at least 96px from the next */
  .sv2.sv-sec { padding: 48px 0; }
  /* the pilot note is a line of text under the list, not another box */
  .hiw .pilot { margin-top: 0; padding: 20px 0 0; border: 0; border-radius: 0; background: none; }
  /* About and the homepage About: text first, a thin divider above, room to breathe */
  .fd .fd-in > div + div { margin-top: 20px; }
  .fd p { font-size: 16px; line-height: 1.6; }
  .fd .rd-link { margin-top: 12px; }
  /* Contact: the three ways to reach us are a plain list; the form sits on the page, not in another box */
  .ct-grid { gap: 0; padding-bottom: 96px; }
  .ct-opts { gap: 0; border-top: 1px solid var(--line); }
  .ct-opt { padding: 20px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
  .ct-opt:hover { transform: none; }
  .ct-ic { width: 22px; height: 22px; border: 0; border-radius: 0; background: none; color: var(--brand); }
  .ct-ic svg { width: 20px; height: 20px; }
  .ct-form { margin-top: 96px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
}
@media (max-width: 699px) {
  /* the cards' drawn edge (a pseudo-element ring) goes too, so nothing reads as a box */
  .ct-opt::after, .ct-form::after { display: none; }
  .ct-opt { isolation: auto; }
}

/* ======================================================================================================
   Round 10 (phones, under 700px): the hero scene at real size so every word is readable. Same layers as desktop:
   the call card top left, the dashboard in the middle, the transcript just over its lower edge, the booking card
   over the transcript's lower left. Overlaps only fall on empty padding. The note sits below everything.
   Tablets (700-899px) keep the scaled picture; desktop is unchanged.
   ====================================================================================================== */
@media (max-width: 699px) {
  .hx-hero .hx-stage { overflow: visible; padding: 0 16px; }
  .hx-hero .hx { position: relative; left: auto; width: auto; height: auto; max-width: none; transform: none; margin: 24px 0 0;
    display: flex; flex-direction: column; }
  .hx-hero .hx .hx-w { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; height: auto; }
  /* the call: fully on screen, top left, overlapping only the dashboard's empty top strip */
  .hx-hero .hx .hx-call { order: 1; z-index: 3; width: min(300px, calc(100% - 36px)); height: 64px; margin: 0 0 -20px 6px; }
  .hx-hero .hx-cs { padding: 0 14px; gap: 12px; }
  .hx-hero .hx-ic { width: 38px; height: 38px; }
  .hx-hero .hx-ic::after { background-size: 17px; }
  .hx-hero .hx-cs small { font-size: 12.5px; }
  .hx-hero .hx-cs b { font-size: 15px; }
  /* the dashboard: one column, four rows that refresh in place (fixed height, nothing jumps) */
  .hx-hero .hx-dash { order: 2; z-index: 1; }
  .hx-hero .hx-dash .hx-bar { height: 52px; align-items: flex-end; padding: 0 14px 11px; font-size: 12.5px; }
  .hx-hero .hx-db { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hx-hero .hx-side { display: none; }
  .hx-hero .hx-main { padding: 14px 14px 40px; }
  .hx-hero .hx-kpis { gap: 8px; margin-bottom: 10px; }
  .hx-hero .hx-kpi { padding: 10px 11px; }
  .hx-hero .hx-kpi b { font-size: 22px; }
  .hx-hero .hx-kpi span { font-size: 12px; line-height: 1.3; display: block; }
  .hx-hero .hx-feed { height: 208px; overflow: hidden; }
  .hx-hero .hx-feed li { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; height: 52px; padding: 0; font-size: 14px; box-sizing: border-box; overflow: hidden; }
  .hx-hero .hx-feed li b { display: block; line-height: 1.3; }
  .hx-hero .hx-feed small { line-height: 1.3; }
  .hx-hero .hx-feed li > span:nth-child(2) { min-width: 0; }
  .hx-hero .hx-feed small { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hx-hero .hx-feed .t { font-size: 12px; }
  .hx-hero .hx-feed li.new { height: auto; }
  .hx-hero .hx-feed li.live, .hx-hero .hx-feed li.live.in { padding-top: 0; padding-bottom: 0; }
  .hx-hero .hx-feed li.live.in { max-height: 52px; }
  .hx-hero.hx-hero .hx.s5 .hx-feed .new { max-height: 52px; height: 52px; padding: 0 8px; }
  /* the transcript: fully on screen, just over the dashboard's lower edge */
  .hx-hero .hx-tx { order: 3; z-index: 3; margin: -28px 0 0 28px; padding: 0 0 34px; }
  .hx-hero .hx-tx .hx-bar { height: 36px; padding: 0 14px; font-size: 12.5px; }
  .hx-hero .hx-l { padding: 9px 14px 0; }
  .hx-hero .hx .hx-ls { display: block; height: 304px; overflow: hidden; }
  .hx-hero .hx-l b { font-size: 11.5px; }
  .hx-hero .hx-l span { font-size: 14px; line-height: 1.42; }
  .hx-hero .hx-ls { transition: opacity .4s var(--ease); }
  .hx-hero .hx.fade .hx-ls { opacity: 0; }
  /* the booking: over the transcript's empty lower strip, bottom left */
  .hx-hero .hx .hx-book { order: 4; z-index: 4; margin: -26px 34px 0 0; padding: 12px 14px; min-height: 100px; box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center; }
  .hx-hero .hx-book .hx-cal { grid-row: span 2; width: 44px; height: 48px; }
  .hx-hero .hx-book .hx-cal b { font-size: 19px; }
  .hx-hero .hx-book .who small { font-size: 12.5px; }
  .hx-hero .hx-book .who b { font-size: 15.5px; }
  .hx-hero .hx-book .hx-pill { grid-column: 2; justify-self: start; margin: 0; font-size: 12px; padding: 3px 9px; }
  .hx-hero .hx.s5 .hx-book.out { opacity: 0; transform: translateY(10px) scale(.97); transition: opacity .35s var(--ease), transform .45s var(--ease); }
  .hx-hero .hx-tick { display: none; }
  /* the note: below the whole scene, never covered */
  .hx-hero .hx-note { order: 5; position: static; transform: none; align-self: center; margin: 36px 0 0; font-size: 12.5px; }
}
@media (max-width: 699px) {
  /* example dashboard tabs: room around each one, one clean row that scrolls sideways if it needs to */
  .rd-dash .dash-window-lg .dash-sidebar { gap: 4px; padding: 6px 10px; scroll-padding: 0 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .rd-dash .dash-window-lg .dash-sbl { padding: 12px 16px; font-size: 14px; border-radius: 9px; scroll-snap-align: start; white-space: nowrap; }
}

/* ======================================================================================================
   Round 10: Services demos (phones and desktop)
   ====================================================================================================== */
/* 01 website: a realistic phone with a contractor's site; the visitor taps Call and the call goes through */
.vd { display: flex; justify-content: center; }
.vd-frame { position: relative; width: 268px; padding: 9px; border-radius: 46px; background: linear-gradient(145deg, #2A2B30, #141518 60%, #222328);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .1), 0 0 0 1px #000, 0 50px 90px -40px rgba(0, 0, 0, .95), 0 30px 60px -30px rgba(94, 106, 210, .25); }
.vd-frame::before, .vd-frame::after { content: ''; position: absolute; width: 3px; border-radius: 2px; background: #2A2B30; }
.vd-frame::before { left: -3px; top: 110px; height: 52px; box-shadow: 0 66px 0 #2A2B30; }
.vd-frame::after { right: -3px; top: 140px; height: 74px; }
.vd-screen { position: relative; height: 540px; border-radius: 38px; overflow: hidden; background: #FBFAF8; color: #14161A; text-align: left; font-family: Inter, system-ui, sans-serif; }
.vd-island { position: absolute; z-index: 5; top: 10px; left: 50%; width: 84px; height: 24px; border-radius: 14px; background: #000; transform: translateX(-50%); }
.vd-status { display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 4px 24px 0 28px; font-size: 13px; }
.vd-status b { font-weight: 600; }
.vd-ind { display: flex; align-items: center; gap: 5px; }
.vd-sig { display: flex; align-items: flex-end; gap: 1.5px; height: 10px; }
.vd-sig i { width: 3px; border-radius: 1px; background: #14161A; }
.vd-sig i:nth-child(1) { height: 4px; } .vd-sig i:nth-child(2) { height: 6px; } .vd-sig i:nth-child(3) { height: 8px; } .vd-sig i:nth-child(4) { height: 10px; }
.vd-wifi { width: 13px; height: 10px; background: #14161A; -webkit-mask: radial-gradient(circle at 50% 100%, #000 0 2px, transparent 2.5px 4.5px, #000 5px 7px, transparent 7.5px 9.5px, #000 10px 12px, transparent 12.5px) ; mask: radial-gradient(circle at 50% 100%, #000 0 2px, transparent 2.5px 4.5px, #000 5px 7px, transparent 7.5px 9.5px, #000 10px 12px, transparent 12.5px); }
.vd-bat { position: relative; width: 22px; height: 11px; border: 1.3px solid rgba(20, 22, 26, .45); border-radius: 3.5px; padding: 1.2px; }
.vd-bat i { display: block; width: 78%; height: 100%; border-radius: 1.5px; background: #14161A; }
.vd-site { padding: 2px 14px 0; }
.vd-hdr { display: flex; align-items: center; gap: 9px; padding: 8px 0 12px; }
.vd-logo { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: 11px; font-weight: 800; letter-spacing: .02em; color: #fff; background: linear-gradient(135deg, #E25A2B, #B8361A); }
.vd-name { line-height: 1.15; }
.vd-name b { display: block; font-size: 14px; font-weight: 700; }
.vd-name small { font-size: 11px; color: #6B6F76; }
.vd-hcall { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #14161A; }
.vd-hcall svg, .vd-call svg { width: 15px; height: 15px; }
/* the hero "photo": a warm interior in late light, built from layered gradients, darkened for the headline */
.vd-hero { position: relative; border-radius: 14px; overflow: hidden; padding: 124px 14px 13px; background: #1B1F26; }
.vd-art { position: absolute; left: 0; top: 0; width: 100%; height: 112px; display: block; }
.vd-tag { position: absolute; z-index: 1; right: 10px; top: 10px; font-size: 10.5px; font-weight: 600; color: #fff; background: rgba(20, 22, 26, .82); padding: 3px 8px; border-radius: 999px; }
.vd-h { position: relative; z-index: 1; margin: 0; font-family: var(--head); font-size: 19px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.vd-rate { display: flex; align-items: center; gap: 6px; margin: 12px 0 12px; font-size: 12px; }
.vd-stars { color: #F5A524; letter-spacing: 1px; font-size: 13px; }
.vd-rate b { font-size: 12.5px; }
.vd-rate small { color: #6B6F76; font-size: 11.5px; }
.vd-call, .vd-book { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 12px; font-size: 15px; font-weight: 700; }
.vd-call { color: #fff; background: linear-gradient(180deg, #2B8A57, #1F7346); box-shadow: 0 6px 16px -6px rgba(31, 115, 70, .7); }
html.rd-js .vd-call.pb { opacity: 1; transform: none; }
.vd-book { margin-top: 8px; color: #14161A; border: 1.5px solid #DAD7D2; background: #fff; height: 42px; font-size: 14px; }
.vd-svc { display: grid; margin-top: 12px; }
.vd-svc span { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid #EAE7E2; font-size: 12.5px; color: #2A2C31; }
.vd-svc span::after { content: '›'; color: #A5A29C; }
/* the call going through: a sheet slides up over the lower half, the site stays visible above it */
.vd-calling { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; flex-direction: column; align-items: stretch; gap: 14px;
  padding: 10px 18px 22px; border-radius: 24px 24px 0 0; color: #fff; background: #1C1E24; box-shadow: 0 -18px 40px -10px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html.rd-js .vd-calling.pb { opacity: 0; transform: translateY(100%); transition: opacity .3s ease, transform .7s var(--rd-ease, cubic-bezier(.22, 1, .36, 1)); }
html.rd-js .vd-calling.pb.on { opacity: 1; transform: none; }
.vd-grab { align-self: center; width: 36px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .25); }
.vd-crow { display: flex; align-items: center; gap: 12px; }
.vd-cav { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 700; background: linear-gradient(135deg, #E25A2B, #B8361A); }
.vd-crow b { display: block; font-size: 17px; font-weight: 600; }
.vd-crow small { display: block; margin-top: 1px; font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.vd-ctrl { display: flex; align-items: center; justify-content: space-between; }
.vd-ctrl i { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .14); display: grid; place-items: center; color: #fff; }
.vd-ctrl i svg { width: 20px; height: 20px; }
.vd-end { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #EB4D3D; }
.vd-end svg { width: 22px; height: 22px; transform: rotate(135deg); }

/* 02 follow-up: a real inbox, newest at the bottom, the thread on a rail */
.vi { list-style: none; margin: 0; padding: 0; position: relative; }
.vi::before { content: ''; position: absolute; left: 15px; top: 24px; bottom: 24px; width: 1px; background: var(--line-2); }
.vi-r { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 10px 0; }
.vi-av { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.vi-in .vi-av { color: var(--ink-1); background: #2A2C33; box-shadow: 0 0 0 4px var(--rd-win, #111214); }
.vi-out .vi-av { color: #0B0C10; background: var(--brand); box-shadow: 0 0 0 4px var(--rd-win, #111214); }
.vi-m { min-width: 0; padding: 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.vi-new .vi-m { border-color: rgba(139, 156, 248, .45); background: var(--brand-soft); }
.vi-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vi-top b { font-size: 13px; color: var(--ink-1); white-space: nowrap; }
.vi-top em { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px; color: var(--ink-2); background: rgba(255, 255, 255, .06); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vi-new .vi-top em { color: var(--brand); background: rgba(139, 156, 248, .16); }
.vi-out .vi-top em { color: var(--answered); background: var(--answered-soft); }
.vi-top time { margin-left: auto; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.vi-p { display: block; margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }

/* 03 CRM: a three-stage pipeline; one card slides New -> Contacted -> Booked, then starts again */
.vk { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; --vk-gap: 8px; }
.vk-col { display: grid; align-content: start; gap: 6px; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, .02); border: 1px solid var(--line); min-width: 0; }
.vk-h { display: flex; align-items: center; gap: 6px; margin: 0 0 2px; font-size: 12px; font-weight: 600; color: var(--stc); }
.vk-h i { width: 6px; height: 6px; border-radius: 50%; background: var(--stc); flex: none; }
.vk-new { --stc: var(--ink-2); } .vk-contacted { --stc: var(--amber); } .vk-booked { --stc: var(--green); }
.vk-slot { height: 46px; border-radius: 8px; border: 1px dashed var(--line-2); }
.vk-card { display: block; min-width: 0; padding: 7px 9px; border-radius: 8px; background: var(--bg-elevated); border: 1px solid var(--line-2); }
.vk-card b { display: block; font-size: 12.5px; color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vk-card small { display: block; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vk-booked .vk-card { border-color: rgba(52, 211, 153, .35); background: var(--green-dim); }
/* the moving card sits on the New column's empty slot (8px column padding + header row) */
.vk-mv { position: absolute; left: 9px; top: 34px; width: calc((100% - 2 * var(--vk-gap)) / 3 - 18px); height: 46px; box-sizing: border-box; z-index: 2;
  border-color: rgba(139, 156, 248, .55); background: #1C1E27; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .8); }
.vk-note { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 12.5px; color: var(--green); opacity: 0; }
.vk-note i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sv.played .vk-mv { animation: vkMove 9s cubic-bezier(.65, 0, .35, 1) .6s infinite; }
.sv.played .vk-note { animation: vkNote 9s ease .6s infinite; }
@keyframes vkMove {
  0%, 18% { transform: translateX(0); border-color: rgba(139, 156, 248, .55); }
  28%, 50% { transform: translateX(calc(100% + 18px + var(--vk-gap))); border-color: rgba(251, 191, 36, .6); }
  60%, 90% { transform: translateX(calc(200% + 36px + 2 * var(--vk-gap))); border-color: rgba(52, 211, 153, .6); opacity: 1; }
  96% { transform: translateX(calc(200% + 36px + 2 * var(--vk-gap))); opacity: 0; }
  97% { transform: translateX(0); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; } }
@keyframes vkNote { 0%, 60% { opacity: 0; } 64%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .sv .vk-mv, .sv.played .vk-mv { animation: none; transform: translateX(calc(200% + 36px + 2 * var(--vk-gap))); border-color: rgba(52, 211, 153, .6); }
  .sv .vk-note, .sv.played .vk-note { animation: none; opacity: 1; }
}

/* 04 Jade: a live call, each line typing out as it's said; the full line reserves its space so nothing jumps */
.vt { position: relative; display: block; }
.vt-ghost { visibility: hidden; }
.vt .typed { position: absolute; inset: 0; }
.vt-list li.typing .typed::after, .vt-list li.on .typed:not(:empty)::after { content: ''; }
.vj-book { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center; margin-top: 12px; padding: 12px; border-radius: 12px;
  border: 1px solid rgba(251, 191, 36, .35); background: var(--booked-soft); }
.vj-book .hx-cal { grid-row: span 2; width: 44px; height: 48px; }
.vj-book .hx-cal b { font-size: 19px; }
.vj-who small { display: block; font-size: 12px; color: var(--ink-3); }
.vj-who b { display: block; font-size: 15px; color: var(--ink-1); }
.vj-pill { grid-column: 2; justify-self: start; font-size: 12px; font-weight: 600; color: var(--booked); }

/* 07 marketing: an ad and a Google listing bring leads; Jade answers; jobs get booked */
.vm-src { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vm-ad, .vm-gbp { min-width: 0; padding: 10px 11px; border-radius: 10px; background: #F7F6F3; color: #1A1C20; }
.vm-ad small { display: block; font-size: 10.5px; font-weight: 700; color: #1A1C20; }
.vm-ad b { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.25; color: #1A4FB4; }
.vm-ad span { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.35; color: #4A4D55; }
.vm-gbp b { display: block; font-size: 13px; }
.vm-st { display: block; margin-top: 2px; font-size: 11.5px; color: #B7791F; }
.vm-btns { display: flex; gap: 5px; margin-top: 7px; }
.vm-btns i { font-style: normal; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; color: #1A4FB4; border: 1px solid #C9D3E8; background: #fff; }
.vm-arrow { display: flex; align-items: center; gap: 8px; margin: 12px 0 8px; font-size: 12px; color: var(--ink-3); }
.vm-arrow::before { content: '↓'; font-size: 14px; color: var(--brand); }
.vm-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vm-flow li { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.vm-l { font-size: 13px; color: var(--ink-2); }
.vm-flow b { font-family: var(--head); font-size: 17px; color: var(--ink-1); font-variant-numeric: tabular-nums; }
.vm-flow i { grid-column: 1 / -1; height: 5px; border-radius: 4px; width: var(--w); background: var(--brand-grad, linear-gradient(90deg, #A78BFA, #60A5FA)); transform-origin: left; }
.vm-flow li:last-child b { color: var(--booked); }
.vm-flow li:nth-child(2) b { color: var(--answered); }
html.rd-js .vm-flow li i { transform: scaleX(0); transition: transform 1.2s var(--rd-ease, ease) .2s; }
html.rd-js .vm-flow li.on i { transform: none; }
@media (prefers-reduced-motion: reduce) { html.rd-js .vm-flow li i { transform: none; } }
@media (max-width: 380px) { .vd-frame { width: 252px; } .vd-screen { height: 520px; } }
.vt-list li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
@media (max-width: 699px) {
  .rd-dash .dash-window-lg .dash-sidebar { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent); }
}

/* About · Why we exist: a short headline at a smaller size, both columns centred on each other */
.fd-why .rd-h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; max-width: 14ch; }
.fd-why .fd-in > div:last-child p:last-child { margin-bottom: 0; }
@media (min-width: 900px) { .fd-why .fd-in { grid-template-columns: 1fr 1fr; align-items: center; } }
@media (max-width: 699px) { .fd-why .rd-h2 { font-size: 30px; } }

/* optional text-message opt-in on forms that take a phone number (unchecked by default) */
.sms-opt label { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; cursor: pointer; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.sms-opt input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent, #5E6AD2); }
.sms-opt b { color: var(--ink-2); font-weight: 600; }
.sms-opt a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 380px) { .vd-h { font-size: 17px; } }