/*
 * callsaul.co page styles, loaded after site.css (the trimmed callsaul.io copy).
 * Part 1: the homepage's live-demo styles (orb + "Call me"), copied from the inline
 * <style> in frontend/public/landing.html, without its two-column layout.
 * Part 2: this page. Every animation is CSS; reduced motion shows end states.
 */

/* ── Part 1 · Live demo (from landing.html) ────────────────────────────── */
#voice-demo .vd-orb-col { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
#voice-demo .vd-orb { position: relative; width: clamp(200px, 24vw, 288px); aspect-ratio: 1; display: grid; place-items: center; outline: none; }
#voice-demo .vd-orb:focus-visible { box-shadow: 0 0 0 4px oklch(0.76 0.142 73 / 0.4); border-radius: 50%; }
#voice-demo .vd-glow { position: absolute; inset: -8%; border-radius: 50%; z-index: 0; filter: blur(14px); opacity: .3;
  background: radial-gradient(circle, oklch(0.76 0.142 73 / .55), oklch(0.60 0.105 44 / .24) 60%, transparent 72%);
  animation: vdGlow 7s ease-in-out infinite; }
#voice-demo .vd-sphere { position: absolute; inset: 0; z-index: 1; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 58%, #fdf3e2 0%, #f6ddb4 42%, #eec48a 100%);
  box-shadow: inset 0 0 40px rgba(255,255,255,.55), 0 22px 55px -22px oklch(0.45 0.09 55 / .45);
  animation: vdMorph 8s ease-in-out infinite, vdBreathe 12s linear infinite; }
#voice-demo .vd-blob { position: absolute; border-radius: 50%; filter: blur(30px); opacity: .92; mix-blend-mode: multiply; }
#voice-demo .vd-b1 { width: 76%; height: 76%; left: -10%; top: -8%; background: #f6c874; animation: vdB1 6.5s ease-in-out infinite; }
#voice-demo .vd-b2 { width: 82%; height: 82%; right: -18%; top: 0%; background: #e08e2c; animation: vdB2 8.2s ease-in-out infinite; }
#voice-demo .vd-b3 { width: 70%; height: 70%; left: 14%; bottom: -22%; background: #fce7c2; animation: vdB3 7.1s ease-in-out infinite; }
#voice-demo .vd-b4 { width: 62%; height: 62%; right: -2%; bottom: -6%; background: #c9762c; animation: vdB4 9.4s ease-in-out infinite; }
/* the silhouette itself wobbles: this is what makes it read as a blob
   rather than a ball with a pattern on it */
@keyframes vdMorph {
  0%,100% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
  20% { border-radius: 63% 37% 44% 56% / 57% 42% 58% 43%; }
  40% { border-radius: 39% 61% 66% 34% / 42% 64% 36% 58%; }
  60% { border-radius: 57% 43% 35% 65% / 37% 53% 47% 63%; }
  80% { border-radius: 44% 56% 59% 41% / 62% 38% 62% 38%; }
}
@keyframes vdBreathe {
  0%   { transform: rotate(0deg)   scale(1); }
  50%  { transform: rotate(180deg) scale(1.06); }
  100% { transform: rotate(360deg) scale(1); }
}
/* the colour inside travels far enough, and fast enough, to be obvious */
@keyframes vdB1 {
  0%,100% { transform: translate(0,0) scale(1); }
  25%  { transform: translate(46%, 30%)  scale(1.38); }
  50%  { transform: translate(18%, 58%)  scale(0.68); }
  75%  { transform: translate(-34%, 26%) scale(1.24); }
}
@keyframes vdB2 {
  0%,100% { transform: translate(0,0) scale(1); }
  25%  { transform: translate(-44%, 34%) scale(0.7); }
  50%  { transform: translate(-12%, -42%) scale(1.42); }
  75%  { transform: translate(28%, -14%) scale(0.86); }
}
@keyframes vdB3 {
  0%,100% { transform: translate(0,0) scale(1); }
  25%  { transform: translate(38%, -48%) scale(1.34); }
  50%  { transform: translate(-28%, -16%) scale(0.66); }
  75%  { transform: translate(-48%, 24%) scale(1.2); }
}
@keyframes vdB4 {
  0%,100% { transform: translate(0,0) scale(1); }
  25%  { transform: translate(-38%, -34%) scale(1.26); }
  50%  { transform: translate(44%, 28%)   scale(0.72); }
  75%  { transform: translate(12%, 48%)   scale(1.4); }
}
@keyframes vdGlow { 0%,100%{opacity:.4;transform:scale(1)} 50%{opacity:.78;transform:scale(1.12)} }
#voice-demo .vd-orb[data-speaking="true"] .vd-sphere { animation-duration: 3.4s, 6s; }
#voice-demo .vd-orb[data-speaking="true"] .vd-b1 { animation-duration: 2.4s; }
#voice-demo .vd-orb[data-speaking="true"] .vd-b2 { animation-duration: 3s; }
#voice-demo .vd-orb[data-speaking="true"] .vd-b3 { animation-duration: 2.6s; }
#voice-demo .vd-orb[data-speaking="true"] .vd-b4 { animation-duration: 3.3s; }
#voice-demo .vd-orb[data-speaking="true"] .vd-glow { animation: vdGlow 1s ease-in-out infinite; opacity: .75; }
/* the ring pulses out of the orb once when a callback is requested */
#voice-demo .vd-ring { position: absolute; inset: 0; z-index: 2; border-radius: 50%; pointer-events: none;
  border: 2px solid var(--amber); opacity: 0; }
#voice-demo .vd-orb[data-active="true"] .vd-ring { animation: vdRing 1.5s cubic-bezier(0.2,0.7,0.2,1) 2; }
@keyframes vdRing { 0% { transform: scale(0.92); opacity: .75; } 100% { transform: scale(1.28); opacity: 0; } }

/* phone capture */
#voice-demo .vd-form { margin-top: 26px; width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 12px; text-align: left; }
#voice-demo .vd-field { display: flex; flex-direction: column; gap: 7px; }
#voice-demo .vd-field-label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-soft); }
#voice-demo .vd-field input {
  font-family: var(--font-body); font-size: 16px; color: var(--ink);
  padding: 13px 16px; border-radius: 12px; background: #fff;
  border: 1px solid var(--line); transition: border-color .15s ease, box-shadow .15s ease;
}
#voice-demo .vd-field input::placeholder { color: var(--text-dim); }
#voice-demo .vd-field input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px oklch(0.76 0.142 73 / 0.22); }
#voice-demo .vd-form.invalid .vd-field input { border-color: oklch(0.55 0.19 25); }
#voice-demo .vd-form.invalid .vd-field input:focus { box-shadow: 0 0 0 3px oklch(0.55 0.19 25 / 0.2); }
/* Country selector row, injected by the phone-widget module. The row wraps
   select + input; the input keeps its full styling and takes the free space. */
#voice-demo .vd-field-row { display: flex; gap: 8px; }
#voice-demo .vd-field-row input { flex: 1; min-width: 0; }
#voice-demo .vd-cc {
  font-family: var(--font-body); font-size: 15px; color: var(--on-dark);
  padding: 13px 10px; border-radius: 12px; max-width: 118px;
  background: oklch(0.262 0.016 56); border: 1px solid var(--line-dark);
  transition: border-color .15s ease, box-shadow .15s ease; cursor: pointer;
}
#voice-demo .vd-cc:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px oklch(0.76 0.142 73 / 0.22); }
#voice-demo .vd-status { margin: 14px 0 0; max-width: 400px; font-size: 14px; line-height: 1.5; color: var(--text-soft); min-height: 1.2em; }
#voice-demo .vd-transcript { margin-top: 18px; width: 100%; max-width: 400px; max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; text-align: left; }
#voice-demo .vd-row { display: flex; }
#voice-demo .vd-row.vd-user { justify-content: flex-end; }
#voice-demo .vd-bubble { max-width: 82%; padding: 9px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; }
#voice-demo .vd-user .vd-bubble { background: var(--ink); color: var(--cream); border-bottom-right-radius: 5px; }
#voice-demo .vd-agent .vd-bubble { background: var(--cream-2); color: var(--ink); border-bottom-left-radius: 5px; }
/* divider between the live mic demo and the (stubbed) callback request */
#voice-demo .vd-or { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 400px; margin: 30px 0 4px; }
#voice-demo .vd-or::before, #voice-demo .vd-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
#voice-demo .vd-or span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
/* the callback button is secondary to the live demo above it */
#voice-demo .vd-cb-btn {
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  padding: 12px 22px; border-radius: 999px; width: 100%;
  background: transparent; color: var(--ink); border: none;
  box-shadow: inset 0 0 0 2px var(--line-dark);
  transition: box-shadow .15s ease, color .15s ease, background .15s ease;
}
#voice-demo .vd-cb-btn:hover { box-shadow: inset 0 0 0 2px var(--ink); }
#voice-demo .vd-cb-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px oklch(0.76 0.142 73 / 0.4); }
#voice-demo .vd-cb-btn[data-state="connecting"] { color: var(--text-dim); cursor: progress; }
#voice-demo .vd-cb-status { margin-top: 10px; }
#voice-demo .vd-status.err { color: oklch(0.50 0.19 25); }
#voice-demo .vd-status a { color: var(--clay); text-decoration: underline; text-underline-offset: 3px; }
/* The orb is the control. It is a <button>, so it gets the reset here and
   the label lives at its centre instead of on a pill floating over it. */
#voice-demo .vd-orb {
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s cubic-bezier(0.2,0.7,0.2,1);
}
#voice-demo .vd-orb:hover { transform: scale(1.025); }
#voice-demo .vd-orb:active { transform: scale(0.995); }
#voice-demo .vd-core {
  position: relative; z-index: 3; display: flex; flex-direction: column;
  align-items: center; gap: 7px; pointer-events: none;
}
#voice-demo .vd-core-name {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em;
  font-size: clamp(30px, 3.6vw, 42px); line-height: 1;
  color: oklch(0.29 0.055 55);
  text-shadow: 0 1px 0 oklch(1 0 0 / 0.35);
}
#voice-demo .vd-core-hint {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.13em;
  text-transform: uppercase; color: oklch(0.38 0.05 52 / 0.82);
  transition: color .18s ease, opacity .18s ease;
}
#voice-demo .vd-orb:hover .vd-core-hint { color: oklch(0.29 0.055 55); }
#voice-demo .vd-core-ico { width: 13px; height: 13px; flex: none; }
/* connecting: the mic glyph becomes a spinner and the orb stops inviting clicks */
#voice-demo .vd-orb[data-state="connecting"] { cursor: progress; }
#voice-demo .vd-orb[data-state="connecting"]:hover { transform: none; }
#voice-demo .vd-orb[data-state="connecting"] .vd-core-ico { display: none; }
#voice-demo .vd-orb[data-state="connecting"] .vd-core-hint::before {
  content: ''; width: 11px; height: 11px; border-radius: 999px; flex: none;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: vdSpin .7s linear infinite;
}
/* live: the mic glyph becomes a stop square, in the same red as the old pill */
#voice-demo .vd-orb[data-state="live"] .vd-core-ico { display: none; }
#voice-demo .vd-orb[data-state="live"] .vd-core-hint { color: oklch(0.45 0.19 25); }
#voice-demo .vd-orb[data-state="live"] .vd-core-hint::before {
  content: ''; width: 9px; height: 9px; border-radius: 2px; flex: none; background: currentColor;
}
@keyframes vdSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #voice-demo .vd-orb { transition: none; }
  #voice-demo .vd-orb:hover, #voice-demo .vd-orb:active { transform: none; }
  #voice-demo .vd-orb[data-state="connecting"] .vd-core-hint::before { animation: none; }
}
#voice-demo .vd-mic { width: 18px; height: 18px; }

/* ---- dark-section overrides ----
   The section moved onto the ink ground, so every piece of chrome inside it
   that assumed cream is repointed here rather than being restyled above. */
#voice-demo .vd-field-label { color: var(--on-dark-soft); }
#voice-demo .vd-field input { background: oklch(0.262 0.016 56); border-color: var(--line-dark); color: var(--on-dark); }
#voice-demo .vd-field input::placeholder { color: oklch(0.58 0.014 64); }
#voice-demo .vd-field input:focus { border-color: var(--amber); }
#voice-demo .vd-or::before, #voice-demo .vd-or::after { background: var(--line-dark); }
#voice-demo .vd-or span { color: var(--on-dark-soft); }
#voice-demo .vd-status { color: var(--on-dark-soft); }
#voice-demo .vd-status.err { color: oklch(0.72 0.15 28); }
#voice-demo .vd-status a { color: var(--amber); }
#voice-demo .vd-fineprint { color: oklch(0.62 0.012 64); }
#voice-demo .vd-timer { color: var(--amber); background: oklch(0.76 0.142 73 / 0.16); }
#voice-demo .vd-cb-btn { color: var(--on-dark); box-shadow: inset 0 0 0 2px oklch(0.5 0.02 60); }
#voice-demo .vd-cb-btn:hover { box-shadow: inset 0 0 0 2px var(--on-dark); }
#voice-demo .vd-cb-btn[data-state="connecting"] { color: var(--on-dark-soft); }
/* transcript bubbles invert: Saul is the panel, the visitor is the light chip */
#voice-demo .vd-agent .vd-bubble { background: var(--ink-2); color: var(--on-dark); }
#voice-demo .vd-user .vd-bubble { background: var(--cream); color: var(--ink); }
/* the orb glows harder against ink than it ever could against cream */
#voice-demo .vd-glow { opacity: .5; filter: blur(20px); }
#voice-demo .vd-sphere { box-shadow: inset 0 0 40px rgba(255,255,255,.35), 0 26px 70px -20px oklch(0.76 0.142 73 / .45); }
#voice-demo .vd-timer { margin-top: 12px; font-family: var(--font-mono); font-size: 14px; color: var(--amber-deep); background: oklch(0.76 0.142 73 / 0.14); padding: 7px 13px; border-radius: 999px; }
#voice-demo .vd-fineprint { margin: 16px 0 0; font-size: 12.5px; color: var(--text-soft); }
@media (prefers-reduced-motion: reduce) {
  #voice-demo .vd-sphere, #voice-demo .vd-blob, #voice-demo .vd-glow { animation: none !important; }
  #voice-demo .vd-sphere { border-radius: 50% !important; }
}
@media (max-width: 860px) {
  #voice-demo .vd-transcript { margin-left: auto; margin-right: auto; max-width: 520px; }
}

/* ── Part 2 · This page ────────────────────────────────────────────────── */

/* No mono webfont on this page (budget): the mono role uses the system's. */
:root { --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace; --green: oklch(0.70 0.15 148); --red: oklch(0.64 0.19 27); }
[hidden] { display: none !important; }
[id] { scroll-margin-top: 80px; }
.co-nav .co-nav-cta { padding: 11px 20px; font-size: 15px; }
.co-sec { padding: clamp(64px, 8vw, 104px) 0; }
.co-tint { background: var(--cream-2); }
.co-center { text-align: center; margin: 0 auto; }
.h2 .amber, .co-h1 .amber { color: var(--amber); }
.co-tint .h2 .amber, #tiles .h2 .amber { color: var(--amber-deep); }

/* 1 · Hero: copy left, the live orb right (stacked on phones). */
.co-hero { padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 7vw, 96px); overflow: hidden; }
.co-hero-in { display: grid; grid-template-columns: 1fr minmax(300px, 420px); gap: clamp(32px, 6vw, 88px); align-items: center; }
.co-h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(44px, 6.4vw, 84px); line-height: 1; letter-spacing: -0.03em; color: var(--on-dark); margin: 0; text-wrap: balance; }
.co-hero .hero-actions { margin-top: 32px; justify-content: flex-start; }
.co-small { margin: 18px 0 0; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; color: var(--on-dark-soft); }
.co-demo { min-width: 0; }
.co-orb-stage { position: relative; display: grid; place-items: center; width: 100%; padding: 8px 0; }
/* The ticker runs behind the orb: every time stamp is a call Saul took. */
.co-ticker { position: absolute; left: -40vw; right: -40vw; top: 50%; transform: translateY(-50%); overflow: hidden; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); }
.co-ticker-track { display: flex; gap: 48px; width: max-content; animation: coTick 28s linear infinite; }
.co-ticker span { font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.08em; color: oklch(0.76 0.142 73 / 0.42); white-space: nowrap; }
@keyframes coTick { to { transform: translateX(-50%); } }
#voice-demo .vd-orb { z-index: 1; }
.co-pulse { position: absolute; inset: 0; border-radius: 50%; z-index: 0; box-shadow: 0 0 0 0 oklch(0.76 0.142 73 / 0.45); animation: coPulse 2.6s ease-out infinite; }
@keyframes coPulse { 0% { box-shadow: 0 0 0 0 oklch(0.76 0.142 73 / 0.45); } 100% { box-shadow: 0 0 0 34px oklch(0.76 0.142 73 / 0); } }
#voice-demo .vd-orb[data-active="true"] .co-pulse { animation: none; }

/* 2 · Split loop: the same 7:42 PM call, twice. 9 s, three beats, then the verdict. */
.co-split { background: var(--ink); padding-top: 0; }
.co-lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.co-lane { background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: var(--radius); padding: 22px; display: grid; gap: 16px; }
.co-screen { position: relative; display: grid; gap: 10px; min-height: 186px; }
.co-step { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: oklch(0.30 0.016 56); color: var(--on-dark); animation: 9s ease-in-out infinite both; }
.co-step b { font-weight: 600; font-size: 15px; }
.co-step i { font-style: normal; font-family: var(--font-mono); font-size: 12px; color: var(--on-dark-soft); }
.co-s1 { animation-name: coS1; } .co-s2 { animation-name: coS2; } .co-s3 { animation-name: coS3; }
@keyframes coS1 { 0% { opacity: 0; transform: translateY(6px); } 5%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes coS2 { 0%, 22% { opacity: 0; transform: translateY(6px); } 28%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes coS3 { 0%, 46% { opacity: 0; transform: translateY(6px); } 52%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.co-bad { background: oklch(0.64 0.19 27 / 0.16); box-shadow: inset 0 0 0 1px oklch(0.64 0.19 27 / 0.5); }
.co-cal { background: oklch(0.70 0.15 148 / 0.14); box-shadow: inset 0 0 0 1px oklch(0.70 0.15 148 / 0.45); }
.co-cap { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -0.01em; animation: coCap 9s ease-in-out infinite both; }
.co-cap-bad { color: var(--red); } .co-cap-good { color: var(--green); }
@keyframes coCap { 0%, 62% { opacity: 0.12; } 68%, 92% { opacity: 1; } 100% { opacity: 0.12; } }
/* Small drawn icons, shared by the loop and the tiles. */
.co-phone { width: 22px; height: 30px; border: 2.5px solid currentColor; border-radius: 6px; display: inline-block; position: relative; justify-self: center; }
.co-phone::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 6px; height: 2px; margin-left: -3px; background: currentColor; border-radius: 2px; }
.co-ring { animation: coRing 1.2s ease-in-out infinite; }
@keyframes coRing { 0%, 60%, 100% { transform: rotate(0); } 10%, 30%, 50% { transform: rotate(-12deg); } 20%, 40% { transform: rotate(12deg); } }
.co-vm { width: 30px; height: 14px; justify-self: center; border: 2.5px solid currentColor; border-top: 0; border-radius: 0 0 4px 4px; position: relative; }
.co-vm::before, .co-vm::after { content: ""; position: absolute; top: -9px; width: 10px; height: 10px; border: 2.5px solid currentColor; border-radius: 50%; }
.co-vm::before { left: -2px; } .co-vm::after { right: -2px; }
.co-bad .co-phone { color: var(--red); }
.co-dot { width: 22px; height: 22px; justify-self: center; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fbe3b8, var(--amber) 70%); box-shadow: 0 0 14px oklch(0.76 0.142 73 / 0.6); }
.co-grid { display: grid; grid-template-columns: repeat(3, 8px); gap: 3px; justify-self: center; }
.co-grid i { width: 8px; height: 8px; border-radius: 2px; background: oklch(0.42 0.02 56); }
.co-grid .co-fill { background: var(--green); animation: coFill 9s ease-in-out infinite both; }
@keyframes coFill { 0%, 54% { background: oklch(0.42 0.02 56); } 60%, 92% { background: var(--green); } 100% { background: oklch(0.42 0.02 56); } }

/* 3 · Videos */
.co-vids { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 44px; }
.co-vid { margin: 0; display: grid; gap: 14px; min-width: 0; }
.co-vid video { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; border-radius: 14px; background: oklch(0.92 0.012 78); border: 1px solid var(--line); box-shadow: 0 30px 60px -36px oklch(0.205 0.014 58 / 0.45); }

/* Products: title, one line, the loop (a button that opens the full cut). */
.co-vid { display: grid; gap: 0; align-content: start; }
.co-vid h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.02em; color: var(--ink); }
.co-vid > p { margin: 6px 0 16px; color: var(--text-soft); font-size: 17px; line-height: 1.45; }
.co-vid-open { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 14px; }
.co-vid-open:focus-visible { outline: 3px solid var(--amber-deep); outline-offset: 4px; }
.co-vid-play { position: absolute; right: 14px; bottom: 14px; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; box-shadow: 0 8px 20px -8px oklch(0.205 0.014 58 / 0.6); transition: transform .15s; }
.co-vid-play span { width: 0; height: 0; border-left: 14px solid var(--amber); border-top: 8.5px solid transparent; border-bottom: 8.5px solid transparent; margin-left: 4px; }
.co-vid-open:hover .co-vid-play { transform: scale(1.08); }
/* Lightbox: the full-length cut, with controls. */
.co-lightbox { width: min(1200px, calc(100vw - 32px)); max-width: none; max-height: none; padding: 0; border: 0; border-radius: 14px; background: #000; overflow: visible; }
.co-lightbox::backdrop { background: oklch(0.15 0.01 58 / 0.86); }
.co-lightbox video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 14px; background: #000; }
.co-lb-close { position: absolute; top: -48px; right: 0; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--cream); color: var(--ink); font-size: 26px; line-height: 1; cursor: pointer; }
.co-lb-close:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
/* 4 · Sample calls: six cards (3x2; a swipe row on phones), one shared caption panel. */
.co-call-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1080px; margin: 36px auto 0; }
.co-call { display: grid; grid-template-columns: 48px 1fr; grid-template-areas: "tag tag" "play head" "desc desc" "foot foot"; align-items: center; gap: 10px 14px;
  padding: 18px 20px; background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: var(--radius); transition: border-color .2s, box-shadow .2s; }
.co-call[data-state="playing"] { border-color: oklch(0.76 0.142 73 / 0.7); }
.co-call-play { grid-area: play; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--amber); cursor: pointer; display: grid; place-items: center; }
.co-call-play:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.co-call-play span { width: 0; height: 0; border-left: 14px solid var(--ink); border-top: 8.5px solid transparent; border-bottom: 8.5px solid transparent; margin-left: 4px; }
.co-call[data-state="playing"] .co-call-play span { width: 13px; height: 15px; border: 0; margin: 0; background: linear-gradient(90deg, var(--ink) 0 4.5px, transparent 4.5px 8.5px, var(--ink) 8.5px); }
.co-call-tag { grid-area: tag; margin: 0; font-size: 12.5px; font-weight: 500; letter-spacing: 0.01em; color: var(--on-dark-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-call h3 { grid-area: head; min-width: 0; margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: var(--on-dark); }
.co-call-desc { grid-area: desc; margin: 0; font-size: 14.5px; line-height: 1.4; color: var(--on-dark-soft); }
.co-call-foot { grid-area: foot; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.co-call-time { font-family: var(--font-mono); font-size: 13px; color: var(--on-dark-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.co-wave { display: flex; align-items: center; gap: 3px; height: 20px; }
.co-wave i { width: 3px; height: 30%; border-radius: 2px; background: oklch(0.55 0.02 60); }
.co-wave i:nth-child(2), .co-wave i:nth-child(6) { height: 55%; } .co-wave i:nth-child(3), .co-wave i:nth-child(5) { height: 80%; } .co-wave i:nth-child(4) { height: 100%; }
.co-call[data-state="playing"] .co-wave i { background: var(--amber); animation: coWave 0.9s ease-in-out infinite alternate; }
.co-call[data-state="playing"] .co-wave i:nth-child(2n) { animation-duration: 0.7s; } .co-call[data-state="playing"] .co-wave i:nth-child(3n) { animation-duration: 1.1s; animation-delay: -0.3s; }
@keyframes coWave { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }
/* Captions: collapsed until a call plays. */
.co-call-caps { display: grid; grid-template-rows: 0fr; max-width: 1080px; margin: 0 auto; transition: grid-template-rows .3s ease, margin-top .3s ease; }
.co-call-caps > div { overflow: hidden; }
.co-call-caps.open { grid-template-rows: 1fr; margin-top: 16px; }
.co-call-line { margin: 0; padding: 16px 20px; min-height: 3.4em; border-radius: var(--radius); background: oklch(0.19 0.012 58); border: 1px solid var(--line-dark);
  font-size: 17px; line-height: 1.55; color: oklch(0.6 0.02 60); }
.co-call-line .who { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); margin-bottom: 4px; }
.co-call-line .w.on { color: var(--on-dark); }
/* ?ind=…: the matching card lights up for a few seconds. */
.co-call.co-hl { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber), 0 0 28px -6px oklch(0.76 0.142 73 / 0.55); }
.co-calls-cta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 20px; margin-top: 36px; }
.co-calls-cta p { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--on-dark); }
/* Price chips, under the estimator. */
.co-price-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.co-price-chips > * { font: 600 14.5px/1 var(--font-body); color: var(--ink); background: var(--cream); border: 1px solid var(--line); border-radius: 999px; padding: 11px 18px; }
.co-price-chips a { color: var(--amber-deep); border-color: var(--amber-deep); transition: color .15s, background .15s; }
.co-price-chips a:hover { color: var(--ink); background: var(--amber); border-color: var(--amber); }
.co-price-chips a:focus-visible { outline: 2px solid var(--amber-deep); outline-offset: 3px; }
#voice-demo .vd-fineprint a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* 5 · Tiles: each animates once when the grid scrolls in (.in). */
.co-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.co-tile { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: grid; gap: 18px; justify-items: start; }
.co-tile p { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); }
.co-art { height: 64px; width: 100%; display: flex; align-items: center; gap: 10px; color: var(--ink); }
.co-clock { position: relative; width: 60px; height: 60px; border: 3px solid var(--ink); border-radius: 50%; }
.co-clock i { position: absolute; left: 50%; bottom: 50%; width: 3px; margin-left: -1.5px; background: var(--ink); border-radius: 2px; transform-origin: 50% 100%; transition: transform 1.6s cubic-bezier(.3,.7,.2,1); }
.co-clock .h { height: 15px; transform: rotate(-60deg); } .co-clock .m { height: 22px; background: var(--amber-deep); transform: rotate(-120deg); }
.in .co-clock .h { transform: rotate(60deg); } .in .co-clock .m { transform: rotate(360deg); }
.co-lines .co-phone { width: 26px; height: 38px; animation: none; } .co-lines .co-late { animation-delay: .35s; }
.in .co-lines .co-phone { animation: coRing 1.2s ease-in-out 3; } .in .co-lines .co-late { animation-delay: .35s; }
.co-flip { perspective: 600px; }
.co-card { position: relative; width: 210px; height: 52px; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.3,.7,.2,1) .3s; }
.co-card span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 10px; backface-visibility: hidden; font-weight: 600; font-size: 15px; }
.co-front { background: var(--cream-2); border: 1px solid var(--line); font-family: var(--font-mono); font-weight: 500; font-size: 14px; }
.co-back { background: var(--ink); color: var(--amber); transform: rotateY(180deg); }
.in .co-card { transform: rotateY(180deg); }
.co-cal2 { display: grid; grid-template-columns: repeat(4, 22px); gap: 5px; height: auto; width: auto; }
.co-cal2 i { width: 22px; height: 22px; border-radius: 5px; background: var(--cream-2); border: 1px solid var(--line); transition: background .5s ease .6s, border-color .5s ease .6s; }
.in .co-cal2 .co-fill { background: var(--green); border-color: var(--green); }
.co-notes { flex-direction: column; align-items: flex-start; justify-content: center; gap: 9px; }
.co-notes i { height: 8px; border-radius: 4px; background: var(--ink); width: 0; transition: width .7s ease; }
.in .co-notes i:nth-child(1) { width: 170px; } .in .co-notes i:nth-child(2) { width: 120px; transition-delay: .25s; } .in .co-notes i:nth-child(3) { width: 150px; transition-delay: .5s; background: var(--amber-deep); }
.co-xfer > i { flex: 0 0 100px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--amber-deep) 50%, var(--line) 50%) 100% 0 / 200% 100%; transition: background-position 1s ease .3s; }
.in .co-xfer > i { background-position: 0 0; }
.co-xfer .co-phone { color: var(--ink); }

/* 6 · Estimator */
.co-est { max-width: 640px; margin: 40px auto 0; display: grid; gap: 22px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 4vw, 34px); }
.co-est label { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; font-weight: 600; color: var(--ink); }
.co-est output { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.co-est input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--amber-deep); }
.co-est-result { margin: 4px 0 0; font-size: 20px; color: var(--text-soft); }
.co-est-result b { font-family: var(--font-display); font-size: 40px; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.co-est .btn { justify-self: start; }

/* 7 · Hire in 5 minutes */
.co-hire { display: grid; justify-items: center; text-align: center; gap: 30px; }
.co-hire .h2 { margin: 0; }
.co-watch { width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; border: 3px solid var(--line-dark); box-shadow: inset 0 0 0 8px var(--ink-2); }
.co-watch span { font-family: var(--font-display); font-weight: 700; font-size: 40px; color: var(--on-dark); font-variant-numeric: tabular-nums; }
.co-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; counter-reset: step; }
.co-steps li { counter-increment: step; padding: 12px 18px; border-radius: 12px; border: 1px solid var(--line-dark); color: var(--on-dark-soft); transition: color .4s, background .4s, border-color .4s; }
.co-steps li::before { content: counter(step) "  "; font-family: var(--font-mono); color: var(--amber); }
.co-steps li.on { color: var(--ink); background: var(--amber); border-color: var(--amber); }
.co-steps li.on::before { color: var(--ink); }

/* 8 · Form */
.co-form form { display: flex; flex-direction: column; gap: 14px; }
.co-form .btn { align-self: flex-start; }
.co-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; opacity: 0; }
.co-step2-title { margin: 0 0 2px; font-size: 17px; color: var(--on-dark); outline: none; }
.co-form-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.co-form .btn-ghost { color: var(--on-dark); box-shadow: inset 0 0 0 2px oklch(0.5 0.02 60); }
.co-form .btn-ghost:hover { color: var(--on-dark); box-shadow: inset 0 0 0 2px var(--on-dark); }
.co-form-err { color: oklch(0.75 0.13 40); }
.co-form-err a, .co-form .form-micro a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.co-done { margin: 0; font-size: 19px; line-height: 1.5; color: var(--amber); outline: none; }
.inquiry-intro .lead { margin-top: 18px; color: var(--on-dark-soft); max-width: 30em; }

/* 9 · Footer */
.co-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; }
.co-footer .logo { margin-bottom: 0; }
.co-foot > a[href^="mailto:"], .co-legal a { color: var(--on-dark-soft); }
.co-foot > a[href^="mailto:"]:hover, .co-legal a:hover { color: var(--on-dark); }
.co-legal { display: flex; gap: 22px; flex-wrap: wrap; }
.co-legal a { font-size: 15px; }
.co-footer .footer-bottom { margin-top: 32px; }

@media (max-width: 900px) {
  .co-call-cards { grid-template-columns: 1fr 1fr; }
  .co-hero-in { grid-template-columns: 1fr; }
  .co-hero-copy { text-align: center; } .co-hero .hero-actions { justify-content: center; }
  .co-tiles { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .co-lanes, .co-vids { grid-template-columns: 1fr; }
  .co-call-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 10px; scrollbar-width: thin; }
  .co-call { flex: 0 0 82%; scroll-snap-align: center; }
  .co-call-tag { white-space: normal; }
  .co-screen { min-height: 0; }
}
@media (max-width: 560px) {
  .co-tiles { grid-template-columns: 1fr; }
  .co-nav .co-nav-cta { padding: 10px 16px; font-size: 14.5px; }
  .co-foot { flex-direction: column; align-items: flex-start; }
  .co-lb-close { top: -46px; }
}
/* Reduced motion: every animation sits at its end state. */
@media (prefers-reduced-motion: reduce) {
  .co-ticker-track, .co-pulse, .co-step, .co-cap, .co-ring, .co-grid .co-fill { animation: none !important; }
  .co-grid .co-fill { background: var(--green); }
  .co-tiles * { transition: none !important; }
  .co-call .co-wave i { animation: none !important; }
  .co-call-caps { transition: none; }
}