/* conicore.io — generated by cloudflare-deploy/build.py, r2 */

@font-face { font-family: 'Archivo Disp'; font-style: normal; font-weight: 600 900; font-stretch: 125%; src: url(/assets/fonts/archivo-disp.86b5bbe2.woff2) format('woff2'); }
@font-face { font-family: 'Archivo Body'; font-style: normal; font-weight: 400 600; src: url(/assets/fonts/archivo-body.7150c0ec.woff2) format('woff2'); }
@font-face { font-family: 'Plex Mono'; font-style: normal; font-weight: 400; src: url(/assets/fonts/plex-mono-400.c36f509c.woff2) format('woff2'); }
@font-face { font-family: 'Plex Mono'; font-style: normal; font-weight: 600; src: url(/assets/fonts/plex-mono-600.ad4580d8.woff2) format('woff2'); }

:root {
  color-scheme: dark;
  --base:      #0A0C0E;
  --base-2:    #0E1216;
  --surface:   #12171C;
  --surface-2: #161C22;
  --line:      #232B31;
  --line-soft: #1A2127;
  --text:      #F3F6F5;
  --text-2:    #AEB7B8;
  --text-3:    #6E7A7C;
  --teal:      #19D3BE;
  --teal-2:    #12B7E0;
  --teal-deep: #0B7C86;
  --teal-ink:  #05201F;
  --wrap: 1240px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
/* body already had overflow-x:hidden, but <html> — not <body> — is the actual
   scrolling element in most browsers, so decorative absolutely-positioned glow
   blobs bleeding past their container edge (.glow-a right:-8%, .glow-b left:-16%,
   both sized in vw) were still expanding the page's true scrollable width by
   ~30px on mobile — a real, if modest, horizontal-overflow bug on every page. */
body {
  margin: 0;
  background: var(--base);
  color: var(--text);
  font-family: 'Archivo Body', -apple-system, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.mono { font-family: 'Plex Mono', ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 3px;
}
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { text-wrap: balance; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 2.2rem; }

/* ---------- buttons ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: 'Archivo Body', sans-serif; font-weight: 600; font-size: 0.95rem;
  padding: 0.8rem 1.5rem; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent; text-align: center;
  transition: transform .18s ease, box-shadow .25s ease, background .2s, border-color .2s, color .2s;
  white-space: nowrap;
}
.btn-primary {
  color: var(--teal-ink);
  background: linear-gradient(180deg, #2AE6CE 0%, var(--teal) 45%, var(--teal-deep) 130%);
  box-shadow: 0 6px 24px -6px rgba(25,211,190,.55), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 62%);
  transform: translateX(-130%); transition: transform .6s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 38px -8px rgba(25,211,190,.75), inset 0 1px 0 rgba(255,255,255,.45); }
.btn-primary:hover::after { transform: translateX(130%); }
.btn-ghost { color: var(--text); background: rgba(255,255,255,.03); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--teal); background: rgba(25,211,190,.08); transform: translateY(-2px); }
.btn-ring { color: var(--teal); background: var(--base); border-color: var(--teal); }
.btn-ring:hover { color: #eafffb; background: rgba(25,211,190,.12); transform: translateY(-2px); box-shadow: 0 10px 28px -12px rgba(25,211,190,.6); }
.btn-lg { padding: 0.95rem 1.8rem; font-size: 1.02rem; }
.btn-sm { padding: 0.58rem 1.1rem; font-size: 0.86rem; }

/* ---------- header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(10,12,14,.72); backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .3s, background .3s;
}
.site-header.scrolled { border-bottom-color: var(--line-soft); background: rgba(10,12,14,.9); }
.nav { display: flex; align-items: center; gap: 2rem; padding: 1.15rem 0; }
.brand {
  cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: stretch; line-height: 1;
  width: max-content;
}
/* THE OFFICIAL MARK replaces the typed CONICORE wordmark (2026-09-30).
   Sized by height so the strapline below can justify to whatever width the
   artwork happens to be. The lockup that includes the tagline is NOT used in
   the header: the tagline is 7% of that artwork's height, so at any sane header
   size it renders about 3px tall. The strapline stays as live text instead,
   which is legible, selectable and searchable. */
/* WIDTH is the fixed dimension, not height. .brand is a flex COLUMN, so a
   height-sized image with width:auto gets stretched across the column by the
   default align-items:stretch: it rendered 166x34 on desktop and 190x30 on a
   phone against a true 4.5:1, so the mark was 8% and 40% too wide. An explicit
   width (plus align-self) pins the aspect, and it also makes the mark the thing
   that sets .brand's width, which is what the strapline justifies itself to. */
.brand-logo { display: block; width: 176px; height: auto; align-self: flex-start; }
.foot .brand-logo { width: 161px; }
.nav-links { display: flex; gap: 2.2rem; margin-left: 1.2rem; }
.nav-links a {
  position: relative; font-size: 1rem; font-weight: 600; color: var(--text-2);
  padding: 0.3rem 0; transition: color .2s;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: linear-gradient(90deg, var(--teal), var(--teal-2)); transition: right .25s ease;
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after, .nav-links a.active::after { right: 0; }
.nav-links a.active { color: var(--text); }
.nav-spacer { flex: 1; }
.nav-cta { display: inline-flex; }
/* Nav dropdown. Built from the header's own material: surface gradient, hairline
   border, teal accent. Desktop only; below 1150px the burger drawer takes over.
   Sits above the sticky header (z-40) but below the drawer (z-60). */
.nav-item { position: relative; display: inline-flex; }
.nav-links .nav-item > a { display: inline-flex; align-items: center; gap: 0.38rem; }
.nav-caret { width: 10px; height: 10px; flex: none; opacity: .65; transition: transform .25s ease, opacity .2s; }
.nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret { transform: rotate(180deg); opacity: 1; }
.nav-sub {
  position: absolute; top: calc(100% + 14px); left: -14px; min-width: 272px; z-index: 45;
  background: linear-gradient(180deg, var(--surface), var(--base-2));
  border: 1px solid var(--line); border-radius: 14px; padding: 0.5rem;
  box-shadow: 0 26px 60px -28px rgba(0,0,0,.95), 0 0 0 1px rgba(25,211,190,.05);
  backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
/* keeps the gap between trigger and panel hoverable */
.nav-sub::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.nav-item:hover .nav-sub, .nav-item:focus-within .nav-sub { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-links .nav-sub a { display: flex; flex-direction: column; gap: 2px; padding: 0.62rem 0.75rem;
  border-radius: 10px; color: var(--text-2); transition: background .18s, color .18s; }
.nav-links .nav-sub a::after { display: none; }
.nav-links .nav-sub a:hover, .nav-links .nav-sub a.active { background: rgba(25,211,190,.08); }
.nav-sub .ns-t { font-size: 0.95rem; font-weight: 600; color: var(--text); transition: color .18s; }
.nav-sub a:hover .ns-t, .nav-sub a.active .ns-t { color: var(--teal); }
.nav-sub .ns-d { font-size: 0.78rem; font-weight: 500; color: var(--text-3); line-height: 1.35; }
@media (prefers-reduced-motion: reduce) { .nav-sub, .nav-caret { transition: none; } }
/* drawer: nested items, since there is no hover on touch */
.sheet a.sheet-sub { position: relative; padding-left: 0.95rem; font-size: 0.98rem; color: var(--text-3); }
.sheet a.sheet-sub::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 2px; height: 1.1rem; background: var(--teal-deep); border-radius: 2px; }
.burger {
  display: none; flex-direction: column; gap: 5px; background: none; border: 0;
  cursor: pointer; padding: 6px; margin-left: auto;
}
.burger span { width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: .25s; }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* mobile sheet */
.sheet {
  position: fixed; inset: 0 0 0 auto; width: min(82vw, 340px); z-index: 60;
  background: linear-gradient(180deg, var(--surface), var(--base));
  border-left: 1px solid var(--line); padding: 5.5rem 1.8rem 2rem;
  transform: translateX(100%); transition: transform .3s ease; display: flex; flex-direction: column; gap: 0.4rem;
}
.sheet.open { transform: translateX(0); }
/* :not(.btn) — this rule styled EVERY link in the sheet, and "Book a call" is an
   <a>. So the button inherited 1.1rem text and 0.85rem 0 padding (no horizontal
   padding at all) plus a bottom border, which rendered it oversized with its
   label crowding its own edges. The nav rows keep exactly what they had. */
.sheet a:not(.btn) { padding: 0.85rem 0; font-size: 1.1rem; border-bottom: 1px solid var(--line-soft); color: var(--text-2); }
.sheet a:not(.btn).active, .sheet a:not(.btn):hover { color: var(--teal); }
.sheet .btn { margin-top: 1.2rem; font-size: 0.95rem; padding: 0.85rem 1.5rem;
  border-bottom: 0; align-self: stretch; }
.overlay {
  position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.6);
  opacity: 0; visibility: hidden; transition: .3s; backdrop-filter: blur(2px);
}
.overlay.open { opacity: 1; visibility: visible; }

/* ---------- routing ---------- */
[data-route] { display: none; }
[data-route].active { display: block; animation: fadein .4s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-route].active { animation: none; }
}

/* ---------- hero ---------- */
.hero { position: relative; }
.glow { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; filter: blur(30px); }
.glow-a {
  width: 60vw; height: 60vw; max-width: 820px; max-height: 820px; top: -14%; right: -8%;
  background: radial-gradient(circle at center, rgba(25,211,190,.34) 0%, rgba(18,183,224,.16) 38%, transparent 66%);
}
.glow-b {
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; top: 32%; left: -16%;
  background: radial-gradient(circle at center, rgba(18,120,180,.20) 0%, transparent 64%);
}
.hero-inner { position: relative; z-index: 2; display: flex; align-items: stretch; justify-content: space-between; gap: 1.5rem; min-height: 74vh; padding-top: 0.5rem; transform: translateX(1.5cm); }
.hero-copy { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; flex: 0 0 58%; max-width: 58%; padding: 1.5rem 0 0; text-align: left; transform: translateX(calc(10.5vw - 38px)); }
/* Very wide screens: freeze the hero grouping at its ~1440px look so the vw-based
   shift can't keep pushing the headline into the founder's face. */
@media (min-width: 1441px) {
  .hero-copy { transform: translateX(113px); }
  .portrait { transform: translateX(-130px) translateY(-3.5rem) scale(1.2); }
}
h1 {
  font-family: 'Archivo Body', sans-serif; font-weight: 700;
  font-size: clamp(3.4rem, 6.4vw, 5.7rem); line-height: 1.03;
  letter-spacing: -0.03em; margin: 0 0 1.7rem;
}
.grad {
  background: linear-gradient(100deg, var(--teal) 10%, var(--teal-2) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* background-clip:text paints only the line box, so descenders (the y in
     "automatically") get sheared at tight line-heights. Fixed with line-height
     on the headings rather than inline-block, which would make the span an
     atomic box and force ugly wraps like an orphaned ", 24/7.". */
  /* The painted box for an inline element is the font's em box plus padding, and
     this display face's descenders overshoot it — hence the sheared y. */
  padding-bottom: 0.2em;
}
.hero-sub { font-size: 1.32rem; color: var(--text-2); margin: 0 0 2.6rem; max-width: 27rem; align-self: flex-start; }
.cta-group { display: flex; gap: 1.1rem; align-items: center; justify-content: flex-start; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 2rem; justify-content: space-between; max-width: 860px; margin: 0 auto; padding: 2.2rem 0 0; border-top: 1px solid var(--line-soft); }
.hero-stats .s { text-align: center; flex: 0 0 auto; }
.hero-stats .s .n { font-family: 'Archivo Disp', sans-serif; font-stretch: 108%; font-weight: 800; font-size: clamp(2.4rem, 4.2vw, 3.6rem); line-height: 1; letter-spacing: -0.01em; }
.hero-stats .s .l { font-size: 1.05rem; color: var(--text-3); margin-top: 0.5rem; }

.hero-photo { position: relative; display: flex; justify-content: center; align-items: stretch; flex: 0 0 40%; align-self: stretch; margin-left: -4%; pointer-events: none; }
.portrait-ring {
  position: absolute; z-index: 0; left: 50%; top: 45%; transform: translate(-50%,-50%) scale(1.1);
  width: 150%; aspect-ratio: 1 / 1.02; border-radius: 50%;
  background: radial-gradient(circle at 50% 46%, rgba(25,211,190,.34), rgba(18,120,180,.14) 42%, transparent 64%);
  filter: blur(30px);
}
.hero-backdrop {
  position: absolute; z-index: 0; left: 46%; top: 44%; transform: translate(-50%,-50%);
  width: 175%; height: 95%; pointer-events: none;
}
.portrait {
  position: relative; z-index: 1; width: 100%; height: 100%; max-height: 88vh;
  object-fit: contain; object-position: center top;
  transform: translateX(calc(-9vw + 1.2cm - 45px)) translateY(-3.5rem) scale(1.2); transform-origin: center top;
  filter: drop-shadow(0 20px 44px rgba(0,0,0,.5));
}

/* ---------- generic sections ---------- */
.section { position: relative; padding: 3.4rem 0; border-top: 1px solid var(--line-soft); }
.section.tint {
  /* Option B "elevated band": flat surface tone lifts the section off the base so
     alternating sections read as separate bands, plus a crisp top hairline. */
  background: radial-gradient(80% 120% at 82% 0%, rgba(18,183,224,.07), transparent 55%), var(--surface);
  border-top-color: var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.section-head { max-width: 46rem; margin: 0 auto 2.2rem; text-align: center; }
.kicker { font-family: 'Plex Mono', monospace; font-size: 0.76rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal); margin: 0 0 1rem; }
.section-head h2 { font-family: 'Archivo Body', sans-serif; font-weight: 600; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 1rem; }
.section-head p { color: var(--text-2); font-size: 1.1rem; margin: 0; }

/* page hero (inner pages) */
.page-hero { position: relative; padding: 3rem 0 2.2rem; border-bottom: 1px solid var(--line-soft); overflow: hidden; }
.page-hero .glow-a { top: -30%; right: 6%; opacity: .8; }
.page-hero-inner { position: relative; z-index: 2; max-width: 52rem; }
/* FAQ-only faint "?" backdrop: sits ABOVE the glow, BELOW the content (z-index 1),
   clustered on the right and masked to fade out toward the left. */
.faq-qmarks, .price-syms, .hiw-cogs { position: absolute; z-index: 1; inset: 0; width: 100%; pointer-events: none;
  /* covers the right ~70%; fades fully out at 25% from the left, solid past ~55% */
  -webkit-mask-image: linear-gradient(90deg, transparent 25%, #000 55%);
          mask-image: linear-gradient(90deg, transparent 25%, #000 55%); }
.faq-qmarks text, .price-syms text { fill: var(--teal); font-family: 'Archivo Disp', sans-serif; font-weight: 800; }
.hiw-cogs { fill: var(--teal); }
@media (max-width: 900px) { .faq-qmarks, .price-syms, .hiw-cogs { display: none; } }
/* Same 1.5cm inset as the two-column heroes, so every inner page starts its
   headline on the same vertical line. The two-column heroes shift their copy
   column instead — shifting the whole inner would drag their phone/photo too.
   Margin, not transform: these elements carry .reveal, whose .in state sets
   transform:none and would wipe a translate out the moment it animated in. */
.page-hero-inner:not(.lead-hero):not(.recept-hero) { margin-left: 57px; }
@media (max-width: 900px) {
  .page-hero-inner:not(.lead-hero):not(.recept-hero) { margin-left: 0; }
}
.page-hero h1 { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.14; margin-bottom: 1.2rem; text-align: left; }
.page-hero p { font-size: 1.24rem; color: var(--text-2); max-width: 38rem; margin: 0 0 2rem; }

/* spotlight cards */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; max-width: 1080px; margin: 0 auto; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; max-width: 940px; margin: 0 auto; }
.card {
  position: relative; padding: 2rem 1.8rem; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  border: 1px solid var(--line); overflow: hidden;
  transition: transform .25s ease, border-color .25s ease;
}
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: radial-gradient(240px circle at var(--mx, -100px) var(--my, -100px), rgba(25,211,190,.6), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(300px circle at var(--mx, -100px) var(--my, -100px), rgba(25,211,190,.10), transparent 55%);
  opacity: 0; transition: opacity .25s ease;
}
.card:hover { transform: translateY(-4px); border-color: rgba(25,211,190,.25); }
.card:hover::before, .card:hover::after { opacity: 1; }
.card .ico {
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 1.3rem;
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
  background: linear-gradient(160deg, rgba(25,211,190,.22), rgba(18,120,180,.12)); border: 1px solid rgba(25,211,190,.25);
  color: var(--teal);
}
.card .ico svg { width: 24px; height: 24px; display: block; }
.card .k { font-family: 'Plex Mono', monospace; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); margin-bottom: 1rem; }
.card h3 { font-family: 'Archivo Body', sans-serif; font-weight: 600; font-size: 1.3rem; margin: 0 0 0.7rem; letter-spacing: -0.01em; }
.card p { color: var(--text-2); font-size: 0.98rem; margin: 0 0 1.2rem; }
.card ul { margin: 0 0 1.4rem; padding: 0; list-style: none; }
.card ul li { position: relative; padding-left: 1.5rem; margin-bottom: 0.55rem; color: var(--text-2); font-size: 0.96rem; }
.card ul li::before { content: "→"; position: absolute; left: 0; color: var(--teal); }
.card .more { color: var(--teal); font-weight: 600; font-size: 0.95rem; display: inline-flex; gap: 0.4rem; align-items: center; }
.card .more::after { content: "→"; transition: transform .2s; }
.card:hover .more::after { transform: translateX(4px); }

/* big stat / 5-minute */
.lead-figure { display: grid; grid-template-columns: auto 1fr; gap: 2.4rem; align-items: center; max-width: 62rem; margin: 0 auto; }
.big-stat {
  font-family: 'Archivo Disp', sans-serif; font-stretch: 112%; font-weight: 800;
  font-size: clamp(4rem, 12vw, 8.5rem); line-height: 0.85; letter-spacing: -0.03em;
  background: linear-gradient(160deg, var(--teal) 0%, var(--teal-2) 60%, var(--teal-deep) 120%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lead-figure .txt h2 { font-family: 'Archivo Body', sans-serif; font-weight: 600; font-size: clamp(1.5rem, 2.8vw, 2.2rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 0.8rem; }
.lead-figure .txt p { color: var(--text-2); margin: 0 0 0.6rem; max-width: 34rem; font-size: 1.08rem; }
.cite { font-size: 0.74rem !important; color: var(--text-3) !important; margin: 0.6rem 0 0 !important; }

/* dashboard mock */
.dash {
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, var(--surface), var(--base-2)); max-width: 1000px; margin: 0 auto;
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.8);
}
.dash-top { display: flex; align-items: center; gap: 0.6rem; padding: 1rem 1.3rem; border-bottom: 1px solid var(--line); }
.dash-top .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.dash-top .dot.g { background: #2fd08a; } .dash-top .dot.y { background: #e4c15a; } .dash-top .dot.r { background: #e46a6a; }
.dash-top .title { margin-left: 0.8rem; font-family: 'Plex Mono', monospace; font-size: 0.8rem; color: var(--text-2); }
.dash-top .pill { margin-left: auto; font-family: 'Plex Mono', monospace; font-size: 0.72rem; color: var(--teal); border: 1px solid rgba(25,211,190,.3); background: rgba(25,211,190,.08); padding: 0.25rem 0.7rem; border-radius: 999px; }
.dash-scroll { overflow-x: auto; }
table.log { width: 100%; border-collapse: collapse; font-family: 'Plex Mono', monospace; font-size: 0.84rem; min-width: 640px; }
table.log th { text-align: left; font-weight: 400; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); padding: 0.9rem 1.3rem; border-bottom: 1px solid var(--line); }
table.log td { padding: 0.85rem 1.3rem; border-bottom: 1px solid var(--line-soft); color: var(--text-2); white-space: nowrap; }
table.log tr:last-child td { border-bottom: 0; }
table.log td.src { color: var(--text); }
.tag { display: inline-block; padding: 0.18rem 0.6rem; border-radius: 999px; font-size: 0.72rem; }
.tag.booked { color: #6ff0c0; background: rgba(47,208,138,.12); border: 1px solid rgba(47,208,138,.3); }
.tag.followup { color: #7fd6ea; background: rgba(18,183,224,.12); border: 1px solid rgba(18,183,224,.3); }
.tag.new { color: #e4c15a; background: rgba(228,193,90,.12); border: 1px solid rgba(228,193,90,.3); }

/* dashboard grid + phone mockup */
.dash-grid { display: grid; grid-template-columns: 300px 1fr; gap: 2rem; align-items: center; max-width: 1000px; margin: 0 auto; }
/* phone lifted directly under the hero */
.lead-phone-hero { display: flex; justify-content: center; margin: -0.6rem auto 0; }
/* lone lead-log table (phone now lives up by the hero) */
.dash-only { max-width: 760px; margin: 0 auto; }
.phone { position: relative; width: 300px; justify-self: center; border-radius: 38px; padding: 12px; background: linear-gradient(160deg, #23292e, #0c0f12); border: 1px solid #2c343a; box-shadow: 0 40px 90px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06); }
.phone-notch { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 96px; height: 20px; background: #0c0f12; border-radius: 0 0 14px 14px; z-index: 3; }
.phone-screen { border-radius: 28px; overflow: hidden; background: radial-gradient(120% 80% at 80% 0%, rgba(25,211,190,.12), transparent 55%), var(--base); padding: 1.5rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 1rem; min-height: 520px; }
.ph-top { display: flex; align-items: center; justify-content: space-between; margin-top: 0.4rem; }
.ph-brand { font-family: 'Archivo Disp', sans-serif; font-stretch: 108%; font-weight: 800; font-size: 0.82rem; letter-spacing: 0.12em; }
.ph-live { font-family: 'Plex Mono', monospace; font-size: 0.62rem; color: var(--teal); border: 1px solid rgba(25,211,190,.3); background: rgba(25,211,190,.08); padding: 0.15rem 0.5rem; border-radius: 999px; }
.ph-label { font-size: 0.72rem; color: var(--text-3); }
.ph-big { font-family: 'Archivo Disp', sans-serif; font-stretch: 108%; font-weight: 800; font-size: 2.6rem; line-height: 1; margin: 0.15rem 0; }
.ph-delta { font-size: 0.72rem; color: #6ff0c0; }
.ph-spark { width: 100%; height: 60px; margin-top: 0.6rem; display: block; }
.ph-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.ph-tile { border: 1px solid var(--line); border-radius: 12px; padding: 0.7rem 0.8rem; background: rgba(255,255,255,.02); }
.ph-tile-n { font-family: 'Archivo Disp', sans-serif; font-stretch: 108%; font-weight: 700; font-size: 1.3rem; color: var(--teal); }
.ph-tile-l { font-size: 0.68rem; color: var(--text-3); margin-top: 0.15rem; }
.ph-rows { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.2rem; }
.ph-row { display: flex; align-items: center; gap: 0.55rem; font-size: 0.74rem; color: var(--text-2); }
.ph-row-t { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-row-x { color: var(--text-3); }
.ph-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.ph-dot.g { background: #6ff0c0; } .ph-dot.t { background: var(--teal); } .ph-dot.y { background: #e4c15a; }

/* proof band */
.proof-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; max-width: 1000px; margin: 0 auto; }
.pb-tile { position: relative; padding: 1.8rem 1.7rem; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); overflow: hidden; }
.pb-n { font-family: 'Archivo Disp', sans-serif; font-stretch: 108%; font-weight: 800; font-size: clamp(2.2rem, 3.6vw, 3rem); line-height: 1; color: var(--teal); }
.pb-l { color: var(--text-2); font-size: 0.92rem; margin-top: 0.5rem; }
.pb-spark { width: 100%; height: 40px; margin-top: 1rem; display: block; }
.pb-bars { display: flex; align-items: flex-end; gap: 5px; height: 44px; margin-top: 1rem; }
.pb-bars i { flex: 1; background: linear-gradient(180deg, var(--teal), var(--teal-deep)); border-radius: 3px; opacity: 0.85; }
.pb-tile.pb-center { text-align: center; }
.pb-donut { position: relative; width: 96px; height: 96px; margin: 0.3rem auto; }
.pb-donut svg { width: 100%; height: 100%; }
.pb-donut-arc { transition: stroke-dashoffset 1.4s cubic-bezier(.3,0,.2,1); }
.pb-donut-c { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; color: var(--text); }
@media (prefers-reduced-motion: reduce) { .pb-donut-arc { transition: none; } }

/* calculator */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; max-width: 1000px; margin: 0 auto; align-items: stretch; }
.calc-figure { position: relative; z-index: 0; max-width: 1000px; height: 200px; margin: 0 auto 1.6rem; }
.calc-figure::before { content: ''; position: absolute; inset: -18% -8%; z-index: -1; pointer-events: none;
  background: radial-gradient(58% 72% at 50% 50%, rgba(25,211,190,.34), transparent 70%); filter: blur(38px); }
.calc-figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; opacity: 0.82;
  -webkit-mask-image: radial-gradient(120% 145% at 50% 42%, #000 38%, transparent 82%);
          mask-image: radial-gradient(120% 145% at 50% 42%, #000 38%, transparent 82%); }
.calc-figure::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 90% at 50% 42%, rgba(25,211,190,.16), transparent 62%), linear-gradient(180deg, transparent 42%, rgba(10,12,14,.6)); }
.calc-prompt { font-family: 'Plex Mono', monospace; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); margin: 0; display: flex; align-items: center; gap: 0.55rem; }
.calc-prompt::before { content: ''; width: 26px; height: 1px; background: linear-gradient(90deg, var(--teal), transparent); }
.calc-controls { display: flex; flex-direction: column; justify-content: center; gap: 2rem; padding: 2.4rem; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); }
.ctrl-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; gap: 1rem; }
.ctrl-top label { color: var(--text-2); font-size: 0.98rem; }
.ctrl-top output { font-family: 'Plex Mono', monospace; font-size: 1.35rem; font-weight: 600; color: var(--teal); font-variant-numeric: tabular-nums; }
.calc-note { font-size: 0.78rem; color: var(--text-3); margin: 0.4rem 0 0; }
input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; margin: 0;
  background: linear-gradient(90deg, var(--teal) 0%, var(--teal-2) var(--pct,50%), var(--line) var(--pct,50%));
  cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #4defd9, var(--teal-deep));
  box-shadow: 0 2px 12px -2px rgba(25,211,190,.9), 0 0 0 5px rgba(25,211,190,.14);
  border: 0;
}
input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px; border: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #4defd9, var(--teal-deep));
  box-shadow: 0 2px 12px -2px rgba(25,211,190,.9), 0 0 0 5px rgba(25,211,190,.14);
}
.calc-result {
  display: flex; flex-direction: column; align-items: flex-start; padding: 2.4rem; border-radius: 20px;
  border: 1px solid rgba(25,211,190,.28);
  background: radial-gradient(130% 130% at 100% 0%, rgba(25,211,190,.16), transparent 55%), linear-gradient(160deg, var(--surface), var(--base-2));
  box-shadow: 0 24px 70px -40px rgba(25,211,190,.4);
}
.res-label { font-family: 'Plex Mono', monospace; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.res-big { font-family: 'Archivo Disp', sans-serif; font-stretch: 108%; font-weight: 800; font-size: clamp(2.8rem, 5vw, 4rem); line-height: 1; margin: 0.5rem 0 0.4rem; letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; }
.res-sub { color: var(--text-2); font-size: 0.98rem; }
.res-divider { width: 100%; height: 1px; background: var(--line); margin: 1.6rem 0; }
.res-recover { font-family: 'Archivo Disp', sans-serif; font-stretch: 108%; font-weight: 800; font-size: clamp(2.4rem, 4.4vw, 3.4rem); line-height: 1; margin: 0.5rem 0 0.4rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  background: linear-gradient(100deg, var(--teal), var(--teal-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.calc-result .btn { margin-top: 1.8rem; }
.calc-bars { width: 100%; margin-top: 1.4rem; display: flex; flex-direction: column; gap: 0.7rem; }
.cbar { display: flex; flex-direction: column; gap: 0.3rem; }
.cbar-l { font-size: 0.74rem; color: var(--text-3); }
.cbar-track { width: 100%; height: 9px; border-radius: 999px; background: rgba(255,255,255,.05); overflow: hidden; }
.cbar-fill { height: 100%; width: 0; border-radius: 999px; transition: width .5s cubic-bezier(.4,0,.2,1); }
.cbar-fill.lost { background: linear-gradient(90deg, #7a4a4a, #b56b6b); }
.cbar-fill.won { background: linear-gradient(90deg, var(--teal-deep), var(--teal)); }
@media (prefers-reduced-motion: reduce) { .cbar-fill { transition: none; } }

/* transcript */
.transcript { max-width: 640px; margin: 0 auto; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.02); padding: 1.6rem; }
.transcript .turn { margin-bottom: 1rem; }
.transcript .who { font-family: 'Plex Mono', monospace; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; display: block; margin-bottom: 0.25rem; }
.transcript .turn.ai .who { color: var(--teal); }
.transcript .turn.caller .who { color: var(--text-3); }
.transcript .turn p { margin: 0; }
.transcript .result { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px dashed var(--line); display: flex; justify-content: space-between; font-size: 0.9rem; }
.transcript .result b { color: #6ff0c0; }
/* collapsible sample-call transcript (saves vertical space) */
details.transcript-collapse { padding: 0; }
details.transcript-collapse > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.6rem; font-weight: 600; color: var(--text-1); }
details.transcript-collapse > summary::-webkit-details-marker { display: none; }
details.transcript-collapse > summary .ts-chev { color: var(--teal); font-size: 1.1rem; transition: transform .2s; }
details.transcript-collapse[open] > summary .ts-chev { transform: rotate(180deg); }
details.transcript-collapse > summary .ts-hint { font-family: 'Plex Mono', monospace; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-left: auto; }
details.transcript-collapse .transcript-body { padding: 0.4rem 1.6rem 1.6rem; }
/* orange attention glow on the receptionist "hear a live call" button */
a.btn[data-transcript], a.btn[data-demo-board] { border-color: #F97316; color: #F97316; animation: btnGlowOrange 1.8s ease-in-out infinite; }
a.btn[data-transcript]:hover, a.btn[data-demo-board]:hover { background: rgba(249,115,22,.12); }
@keyframes btnGlowOrange { 0%,100% { box-shadow: 0 0 16px -4px rgba(249,115,22,.55); } 50% { box-shadow: 0 0 30px 0 rgba(249,115,22,.9); } }
@media (prefers-reduced-motion: reduce) { a.btn[data-transcript], a.btn[data-demo-board] { animation: none; box-shadow: 0 0 18px -4px rgba(249,115,22,.6); } }
/* "In your pocket": the real demo running inside the phone graphic.
   The dashboard's mobile layout only resolves cleanly at ~520px, so the frame is
   rendered at that width and scaled down. transform keeps it fully interactive. */
.pocket-demo { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
/* Sized so the whole phone sits inside a laptop viewport alongside the heading —
   the frame was previously taller than the screen, forcing a scroll to see its foot. */
/* As tall as the viewport allows while still showing the whole frame: the screen
   tracks vh, and the iframe height is that divided back out by the scale. */
.phone.phone-lg { width: 420px; }
.phone-screen-live { padding: 0; min-height: 0; height: min(760px, 72vh); position: relative; }
.pocket-frame {
  position: absolute; top: 0; left: 0; border: 0;
  width: 520px; height: calc(min(760px, 72vh) / 0.76154);
  transform: scale(0.76154); transform-origin: top left;
}
.pocket-note { font-family: 'Plex Mono', monospace; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin: 0; }
@media (max-width: 460px) {
  .phone.phone-lg { width: min(92vw, 380px); }
}

/* Receptionist hero: copy left, cut-out photo right */
.recept-hero { max-width: none; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1.4rem; align-items: center; }
.recept-hero .recept-hero-copy { max-width: 45rem; transform: translateX(57px); }
.recept-hero .recept-hero-photo { display: flex; justify-content: flex-end; }
/* The original studio photo, white background and all, held in a circular frame. */
.recept-hero .recept-hero-photo img {
  width: clamp(300px, 28vw, 380px); aspect-ratio: 1; display: block;
  object-fit: cover; object-position: 50% 42%;
  border-radius: 50%; border: 1px solid rgba(25,211,190,.35);
  box-shadow: 0 0 0 10px rgba(25,211,190,.06), 0 30px 70px -28px rgba(0,0,0,.85);
}
@media (max-width: 900px) {
  .recept-hero { grid-template-columns: 1fr; gap: 1rem; }
  .recept-hero .recept-hero-copy { transform: none; }
  .recept-hero .recept-hero-photo { justify-content: center; }
  .recept-hero .recept-hero-photo img { width: min(78vw, 340px); }
}

/* Lead-gen hero: copy left, phone right */
.lead-hero { max-width: none; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1.4rem; align-items: center; }
/* Copy runs wider than the default page-hero so it reaches toward the phone —
   the visible gap was dead space in the 1fr column, not the grid gap. */
.lead-hero .lead-hero-copy { max-width: 45rem; transform: translateX(57px); }
.lead-hero .lead-hero-copy h1 { font-size: clamp(2.6rem, 5.6vw, 4.6rem); }
.lead-hero .lead-hero-copy > p { font-size: 1.3rem; max-width: 42rem; }
.lead-hero .lead-hero-phone { display: flex; justify-content: flex-end; transform: translateX(-76px); position: relative; }
/* Teal wash behind the hero phone, echoing the home hero's backdrop. */
.lead-hero .lead-hero-phone::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  width: 130%; aspect-ratio: 1; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle at center, rgba(25,211,190,.26) 0%, rgba(18,120,180,.12) 42%, transparent 68%);
  filter: blur(6px);
}
.lead-hero .lead-hero-phone .phone { position: relative; z-index: 1; }
/* Same lead-data plate that sits behind the founder on the home hero. */
.lead-hero .lead-backdrop {
  position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 210%; height: 130%;
}
@media (max-width: 900px) { .lead-hero .lead-backdrop { display: none; } }
@media (max-width: 900px) {
  .lead-hero { grid-template-columns: 1fr; gap: 1.6rem; }
  .lead-hero .lead-hero-copy { transform: none; }
  .lead-hero .lead-hero-phone { justify-content: center; transform: none; }
}

/* steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; counter-reset: step; }
.step { position: relative; padding: 2rem 1.5rem; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008)); }
.step .num { font-family: 'Archivo Disp', sans-serif; font-weight: 800; font-size: 2.6rem; line-height: 1; background: linear-gradient(160deg, var(--teal), var(--teal-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 0.9rem; }
.step h3 { font-size: 1.15rem; font-weight: 600; margin: 0 0 0.5rem; }
.step p { color: var(--text-2); font-size: 0.95rem; margin: 0; }
.step:not(:last-child)::after { content: ''; position: absolute; top: 2.55rem; right: -1.15rem; width: 1.2rem; height: 1.2rem; z-index: 3; pointer-events: none;
  background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2319D3BE' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4 16 12 8 20'/%3E%3C/svg%3E");
  animation: stepArrow 1.4s ease-in-out infinite; }
@keyframes stepArrow { 0%,100% { transform: translateX(-3px); opacity: .5; } 50% { transform: translateX(3px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .step::after { animation: none; transform: translateX(0); opacity: .8; } }

/* pricing */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.4rem; max-width: 1120px; margin: 0 auto; }
.price-card { position: relative; padding: 2.4rem 2rem; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); overflow: hidden; display: flex; flex-direction: column; }
.price-card .btn { margin-top: auto; align-self: flex-start; }
.price-card.feature { border-color: rgba(25,211,190,.35); box-shadow: 0 20px 60px -30px rgba(25,211,190,.4); }
.price-card .svc { font-family: 'Plex Mono', monospace; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); margin-bottom: 1rem; }
.price-card h3 { font-size: 1.5rem; font-weight: 600; margin: 0 0 0.4rem; }
.price-card .from { font-family: 'Archivo Disp', sans-serif; font-weight: 800; font-size: 1.7rem; margin: 1rem 0 0.2rem; }
.price-card .note { color: var(--text-3); font-size: 0.9rem; margin-bottom: 1.4rem; }
.price-card ul { list-style: none; padding: 0; margin: 0 0 1.8rem; }
.price-card ul li { position: relative; padding-left: 1.7rem; margin-bottom: 0.7rem; color: var(--text-2); }
.price-card ul li::before { content: "✓"; position: absolute; left: 0; color: var(--teal); font-weight: 700; }
.included { max-width: 900px; margin: 2.5rem auto 0; padding: 1.6rem 2rem; border: 1px dashed var(--line); border-radius: 16px; color: var(--text-2); text-align: center; }
.included b { color: var(--text); }

/* FAQ */
.faq-wrap { max-width: 780px; margin: 0 auto; }
.faq-group { margin-bottom: 2.6rem; }
.faq-group > h3 { font-family: 'Plex Mono', monospace; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); margin: 0 0 1rem; }
details.qa { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 0.7rem; background: rgba(255,255,255,.02); overflow: hidden; transition: border-color .2s; }
details.qa[open] { border-color: rgba(25,211,190,.3); }
details.qa summary { list-style: none; cursor: pointer; padding: 1.1rem 1.3rem; font-weight: 600; font-size: 1.05rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary .plus { color: var(--teal); font-size: 1.3rem; transition: transform .25s; flex-shrink: 0; }
details.qa[open] summary .plus { transform: rotate(45deg); }
details.qa .a { padding: 0 1.3rem 1.2rem; color: var(--text-2); }

/* generic content prose */
.prose { max-width: 720px; margin: 0 auto; }
.prose p { color: var(--text-2); font-size: 1.06rem; margin: 0 0 1.3rem; }
.prose h2 { font-size: 1.6rem; font-weight: 600; margin: 2.4rem 0 1rem; letter-spacing: -0.01em; }
.prose h3 { font-size: 1.15rem; font-weight: 600; margin: 1.8rem 0 0.6rem; }
.prose a.inline { color: var(--teal); border-bottom: 1px solid rgba(25,211,190,.4); }

/* about */
.about-lede { max-width: 68ch; }
.about-close { margin-top: 2.2rem !important; }
/* Full-width room shot: proof on the landing page, establishing shot on About. */
.section-shot { position: relative; max-width: 940px; margin: 2.8rem auto 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); line-height: 0; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.section-shot.lede { margin: 0 auto 2.8rem 0; }
.section-shot img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }

/* closer CTA */
.closer {
  margin-top: 0; padding: 3rem 2.5rem; border-radius: 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  background: radial-gradient(120% 180% at 0% 0%, rgba(25,211,190,.16), transparent 55%), linear-gradient(120deg, var(--surface), var(--base-2));
  border: 1px solid var(--line); position: relative; overflow: hidden;
}
.closer h2 { font-family: 'Archivo Body', sans-serif; font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -0.02em; margin: 0 0 0.5rem; }
.closer p { color: var(--text-2); margin: 0; }

/* footer */
.foot { border-top: 1px solid var(--line-soft); background: var(--base-2); }
.foot-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2rem; padding: 4rem 0 2.5rem; }
.foot h4 { font-family: 'Plex Mono', monospace; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin: 0 0 1.1rem; }
.foot .brand { margin-bottom: 0.8rem; }
.foot p { color: var(--text-2); font-size: 0.92rem; margin: 0 0 0.6rem; max-width: 22rem; }
.foot a.fl { display: block; color: var(--text-2); font-size: 0.92rem; padding: 0.3rem 0; transition: color .2s; }
.foot a.fl:hover { color: var(--teal); }
.foot-bottom { border-top: 1px solid var(--line-soft); padding: 1.3rem 0; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-family: 'Plex Mono', monospace; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }

/* modal */
.modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(4,6,8,.7); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 1.5rem; opacity: 0; visibility: hidden; transition: .25s; }
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal { width: min(560px, 100%); max-height: 92vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(180deg, var(--surface), var(--base-2)); padding: 2.2rem; transform: translateY(14px) scale(.98); transition: .25s; }
.modal-overlay.open .modal { transform: none; }
.modal h3 { font-size: 1.6rem; font-weight: 600; margin: 0 0 0.4rem; letter-spacing: -0.01em; }
.modal .sub { color: var(--text-2); margin: 0 0 1.6rem; }
.modal .close { position: absolute; top: 1.2rem; right: 1.4rem; background: none; border: 0; color: var(--text-2); font-size: 1.6rem; cursor: pointer; line-height: 1; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: 0.82rem; color: var(--text-2); margin-bottom: 0.4rem; letter-spacing: .02em; }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.8rem 0.95rem; border-radius: 10px; border: 1px solid var(--line);
  background: rgba(255,255,255,.03); color: var(--text); font-family: inherit; font-size: 0.98rem; transition: border-color .2s, background .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--teal); background: rgba(25,211,190,.04); }
.field textarea { resize: vertical; min-height: 70px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.form-msg { margin-top: 0.8rem; font-size: 0.9rem; min-height: 1.2rem; }
.form-msg.err { color: #f0a0a0; }
.modal .success { text-align: center; padding: 1.5rem 0; }
.modal .success .check { width: 66px; height: 66px; margin: 0 auto 1.2rem; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #33e6cc, var(--teal-deep)); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--teal-ink); box-shadow: 0 0 30px -4px rgba(25,211,190,.7); }
.modal .success h3 { margin-bottom: 0.5rem; }
.disclaimer { font-size: 0.78rem; color: var(--text-3); margin-top: 1rem; text-align: center; }
/* contact page */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 2.6rem; align-items: start; max-width: 1000px; margin: 0 auto; }
.contact-info h3 { font-size: 1.4rem; margin: 0 0 0.5rem; }
.contact-info > p { color: var(--text-2); margin: 0 0 1.2rem; }
.contact-list { list-style: none; padding: 0; margin: 0 0 1.6rem; display: flex; flex-direction: column; gap: 0.7rem; }
.contact-list li { display: flex; gap: 1rem; align-items: baseline; color: var(--text); border-bottom: 1px solid var(--line-soft); padding-bottom: 0.7rem; }
.contact-list .ci-l { font-family: 'Plex Mono', monospace; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); width: 5.5rem; flex: 0 0 auto; }
.contact-form { padding: 2rem; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); }
.contact-success { text-align: center; padding: 1rem 0; }
.contact-success .check { width: 66px; height: 66px; margin: 0 auto 1rem; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #33e6cc, var(--teal-deep)); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--teal-ink); box-shadow: 0 0 30px -4px rgba(25,211,190,.7); }
.contact-success h3 { margin-bottom: 0.4rem; }
/* back-to-home footer bar on inner pages */
.back-home { border-top: 1px solid var(--line-soft); padding: 1.9rem 0 2.6rem; text-align: center; }
.back-home-link { color: var(--teal); font-weight: 600; font-size: 0.98rem; display: inline-flex; gap: 0.45rem; align-items: center; cursor: pointer; transition: color .2s; }
.back-home-link::before { content: "\2190"; display: inline-block; transition: transform .2s; }
.back-home-link:hover::before { transform: translateX(-3px); }

/* audio player */
.player { border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.2rem; background: linear-gradient(180deg, rgba(25,211,190,.06), rgba(255,255,255,.012)); margin-bottom: 1.3rem; }
.trans-head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.4rem; }
.recept-avatar { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(25,211,190,.4); background: radial-gradient(circle at 40% 30%, rgba(25,211,190,.35), rgba(11,124,134,.5)); box-shadow: 0 0 0 4px rgba(25,211,190,.1); }
.recept-avatar img { width: 100%; height: 100%; object-fit: cover; }
.recept-avatar span { font-family: 'Archivo Disp', sans-serif; font-weight: 800; font-size: 0.9rem; color: var(--teal-ink); letter-spacing: 0.04em; }
.player-top { display: flex; align-items: center; gap: 1rem; }
.player-ico { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--teal-ink); font-size: 1.05rem; background: linear-gradient(180deg,#2AE6CE,var(--teal-deep)); box-shadow: 0 4px 18px -4px rgba(25,211,190,.6); transition: transform .15s; user-select: none; }
.player-ico:hover { transform: scale(1.06); }
.player-meta { display: flex; flex-direction: column; gap: 0.15rem; }
.player-meta b { font-size: 0.95rem; font-weight: 600; }
.player-meta span { font-size: 0.8rem; color: var(--text-3); }
.player-bar { margin-top: 1rem; height: 7px; border-radius: 999px; background: var(--line); cursor: pointer; overflow: hidden; }
.player-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--teal), var(--teal-2)); border-radius: 999px; transition: width .1s linear; }
.read-toggle { margin-bottom: 0.6rem; }
.read-toggle button { background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 0.95rem; padding: 0; }

/* reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

.mt { margin-top: 3rem; }
.center { text-align: center; }
.lead-link { color: var(--teal); font-weight: 600; display: inline-flex; gap: .4rem; align-items: center; }
.lead-link.lg { font-size: 1.22rem; font-weight: 700; }
.audit-note { font-size: 0.86rem; color: var(--text-3); margin: 0.9rem 0 0; }
.audit-note b { color: var(--teal); font-weight: 700; }
.num-k { font-family: 'Archivo Disp', sans-serif; font-weight: 800; font-size: 2.5rem; line-height: 1; margin-bottom: 0.7rem;
  background: linear-gradient(160deg, var(--teal), var(--teal-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead-link::after { content:"→"; transition: transform .2s; }
.lead-link:hover::after { transform: translateX(4px); }

@media (max-width: 940px) {
  .section-shot { margin-top: 2rem; }
  .section-shot.lede { margin-bottom: 2rem; }
  .contact-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .foot-inner { grid-template-columns: 1fr 1fr; }
}
/* PHONE: the team photo leads the section instead of closing it. On a desktop
   the three service cards sit in one row and the photo underneath reads as part
   of the same block. On a phone they stack into a long column, so the photo
   landed below all three and most people never scrolled far enough to see it,
   which defeats the reason it is there: real people, before the pitch. Source
   order is unchanged (it still reads in order to a screen reader, and desktop
   is untouched); only the visual order moves, at the same 900px where .grid-3
   collapses to one column. */
@media (max-width: 900px) {
  .svc-wrap { display: flex; flex-direction: column; }
  .svc-wrap .section-shot { order: -1; margin: 0 auto 2.2rem; }
}
@media (max-width: 1200px) and (min-width: 901px) {
  .hero-sub { max-width: 20rem; }
  .hero-copy { transform: translateX(calc(9vw - 38px)); }
  .portrait { transform: translateX(calc(-8vw + 1.2cm - 45px)) translateY(-3.5rem) scale(1.12); }
}
/* Nav dead zone: from just above the mobile burger breakpoint (901px) up to
   ~1150px, the 7 nav links + logo + CTA don't fit on one line and wrap into a
   ragged 2-3 row stack (measured: single row only from ~1200px). Reuse the
   mobile burger pattern here WITHOUT touching hero/section layout, which
   already reads correctly in this range — this is a nav-only fix. */
@media (max-width: 1150px) and (min-width: 901px) {
  .nav-links, .nav-cta { display: none; }
  .burger { display: flex; }
}
@media (max-width: 900px) {
  .wrap { padding: 0 1.3rem; }
  .nav-links, .nav-cta { display: none; }
  .burger { display: flex; }
  .brand-logo { width: 150px; }
  .hero-inner { min-height: auto; padding-top: 0.4rem; gap: 0.7rem; transform: none; }
  .hero-copy { padding: 0.4rem 0 1rem; transform: none; flex: 1 1 100%; max-width: 100%; }
  h1 { text-wrap: normal; font-size: clamp(2rem, 7.5vw, 3.4rem); margin-bottom: 0.9rem; }
  .hero-sub { font-size: 0.86rem; margin-bottom: 1.2rem; }
  /* EVERY CTA THE SAME WIDTH. .btn is inline-flex, so each button sized itself
     to its own text: "Book a call" came out visibly narrower than the three
     longer labels beneath it, which reads as a mistake rather than a hierarchy.
     One column, all stretched, so the stack is a tidy set of equal buttons. */
  .cta-group { gap: 0.55rem; width: 100%; justify-content: center;
    flex-direction: column; align-items: stretch; }
  .cta-group .btn { width: 100%; }
  .btn-lg { padding: 0.65rem 1rem; font-size: 0.8rem; }
  .page-hero h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .page-hero p { font-size: 1.08rem; }
  /* Mobile: drop the founder cutout entirely so the hero text is the feature.
     Desktop is unaffected — this lives only inside the max-width:900px query. */
  .hero-photo { display: none; }
  .hero-stats { gap: 0.8rem; padding-top: 1.4rem; max-width: none; }
  .hero-stats .s .n { font-size: 1.6rem; }
  .hero-stats .s .l { font-size: 0.72rem; }
  .grid-3, .grid-2, .price-grid, .calc, .dash-grid { grid-template-columns: 1fr; }
  /* ONE TILE PER ROW. Three columns on a phone gave each about 100px, so
     "calls answered for clients" broke across four lines and the headline
     figure (18,400) was clipped to "18,". These are the numbers the section
     exists to show. */
  .proof-band { grid-template-columns: 1fr; gap: 1rem; }
  .pb-tile { padding: 1.4rem 1.5rem; }
  .steps { grid-template-columns: 1fr 1fr; }
  .step::after { display: none; }
  .calc-figure { height: 150px; }
  .lead-figure { grid-template-columns: 1fr; gap: 1rem; text-align: center; }
  .big-stat { margin: 0 auto; }
  .page-hero h1 { text-align: left; }
  .closer { padding: 2rem 1.5rem; }
  .row2 { grid-template-columns: 1fr; }
  /* Lead Gen page, phones only: the wide lead-log table gets cut off, so hide it
     (the phone graphic up top already shows the dashboard). */
  [data-route="/lead-generation"] .dash-only { display: none; }
  /* teal outline on the Capture / Follow up / Log cards */
  [data-route="/lead-generation"] .grid-3 .card {
    border-color: rgba(25,211,190,.55);
    box-shadow: 0 0 0 1px rgba(25,211,190,.25), 0 0 30px -14px rgba(25,211,190,.6);
  }
  .lead-phone-hero { margin-top: 0.4rem; }
}
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } .foot-inner { grid-template-columns: 1fr; } }

/* ============================================================
   Mobile proportion pass. Everything above was written desktop-first
   and then squeezed; on a 390px screen that left the hero headline at
   ~1.9rem, the hero ending less than two-thirds down the first screen,
   and the receptionist photo / lead-gen phone straddling the fold.
   svh, not vh: mobile browsers count vh against the *expanded* viewport,
   so 100vh hides content behind the address bar on first paint.
   ============================================================ */
@media (max-width: 700px) {
  /* --- home hero owns the first screen --- */
  /* No founder photo on mobile now, so the hero fits its text instead of
     reserving the photo's full-screen height (which left a big empty gap). */
  .hero-inner { min-height: calc(100svh - 8.5rem); justify-content: flex-start; }
  h1 { font-size: clamp(3rem, 14vw, 4.6rem); line-height: 1.0; margin-bottom: 1.3rem; }
  .hero-sub { font-size: 1rem; margin-bottom: 1.5rem; max-width: 22rem; }
  .hero-note { font-size: 0.84rem; }
  .btn-lg { padding: 0.78rem 1.15rem; font-size: 0.9rem; }
  .hero-stats { padding-top: 1.8rem; }

  /* --- inner-page heroes: headline up, media down, whole hero in one screen --- */
  .page-hero { padding: 2.2rem 0 2rem; }
  .page-hero h1 { font-size: clamp(2rem, 8.6vw, 2.7rem); }
  .page-hero p { font-size: 1.02rem; }

  /* The photo and the phone were ~305px and ~330px tall on a 390px screen,
     which pushed each hero across the fold. */
  .recept-hero { gap: 1.4rem; }
  .recept-hero .recept-hero-photo img { width: min(52vw, 200px); }
  .lead-hero .lead-hero-phone .phone { width: 210px; padding: 8px; border-radius: 28px; }
  .lead-hero .lead-hero-phone .phone-screen { min-height: 0; padding: 0.95rem 0.75rem 0.85rem; gap: 0.6rem; }
  .lead-hero .lead-hero-phone .phone-notch { width: 66px; height: 13px; top: 14px; }
  .ph-big { font-size: 1.9rem; }
  .ph-spark { height: 36px; }
  /* The activity feed is the first thing to go — the headline number and the two
     tiles carry the idea, and this is what keeps the phone inside the fold. */
  .lead-hero .lead-hero-phone .ph-rows { display: none; }

  /* Lead Gen's copy is the longest on the site; without this the phone starts
     below the fold no matter how small it gets. */
  .lead-hero .kicker { font-size: 0.64rem; letter-spacing: 0.14em; margin-bottom: 0.7rem; }
  .lead-hero .lead-hero-copy > p { font-size: 0.95rem; }
  .lead-hero .cta-group [data-link="/how-it-works"] { display: none; }

  /* --- the pocket demo is redundant on a phone --- */
  .pocket-section { display: none; }

  /* --- calculator: sliders and the total belong on one screen --- */
  .calc-figure { display: none; }
  .calc { gap: 0.8rem; }
  .calc-controls { padding: 1.25rem 1.15rem; gap: 1.15rem; border-radius: 16px; }
  .calc-prompt { font-size: 0.66rem; }
  .calc-note { display: none; }
  .calc-result { padding: 1.25rem 1.15rem; border-radius: 16px; }
  .res-big { font-size: 2.5rem; margin: 0.3rem 0 0.25rem; }
  .res-recover { font-size: 2.1rem; margin: 0.3rem 0 0.25rem; }
  .res-sub { font-size: 0.88rem; }
  .res-divider { margin: 1rem 0; }
  .calc-bars { margin-top: 0.9rem; gap: 0.5rem; }
  .calc-result .btn { margin-top: 1.1rem; }
}