/* Caught by Cora — public pages (front door, demo form, login).
   Light, warm, phone-first. Navy for trust, amber for the one thing we want
   pressed. The signed-in app keeps its own stylesheet; this one never loads
   there, and style.css never loads here. */

:root {
  --paper: #EEF0F3;
  --card: #FFFFFF;
  --ink: #14202B;
  --soft: #4E5D6C;
  --faint: #7A8794;
  --line: #D9DEE4;
  --navy: #16324F;
  --navy-deep: #0E2238;
  --amber: #F2A93B;
  --amber-deep: #D98C13;
  --green: #1E7F53;
  --green-soft: #E4F3EA;
  --r: 14px;
  --sh: 0 10px 30px rgba(20, 32, 43, .08);
  --sh-lift: 0 16px 40px rgba(20, 32, 43, .14);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { background: var(--paper); }
body {
  font-family: "Manrope", "Segoe UI", -apple-system, Roboto, sans-serif;
  font-size: 18px; line-height: 1.5; color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--navy); font-weight: 700; text-decoration: none; }
a:hover { color: var(--navy-deep); text-decoration: underline; }
b, strong { font-weight: 800; }
.tnum { font-variant-numeric: tabular-nums; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--amber); outline-offset: 2px;
}

/* ---------------- layout ---------------- */
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 0;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800;
         letter-spacing: .08em; font-size: 15px; color: var(--ink); white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand svg { flex-shrink: 0; }
.bar-links { display: flex; align-items: center; gap: 18px; font-size: 16px; }
.bar-links a { color: var(--soft); font-weight: 700; }
.bar-links a.pill { color: var(--navy); border: 2px solid var(--navy);
                    border-radius: 999px; padding: 8px 16px; }
.bar-links a.pill:hover { background: var(--navy); color: #fff; text-decoration: none; }
@media (max-width: 560px) { .bar-links .hide-sm { display: none; } }

/* ---------------- type ---------------- */
h1 { font-size: clamp(38px, 8vw, 62px); line-height: 1.04; letter-spacing: -.02em;
     font-weight: 800; }
h1 em { color: var(--amber-deep); font-style: normal; }
h2 { font-size: clamp(26px, 4.5vw, 34px); line-height: 1.15; letter-spacing: -.01em;
     font-weight: 800; margin-bottom: 16px; }
.lead { font-size: clamp(18px, 2.6vw, 21px); color: var(--soft); line-height: 1.55; }
.eyebrow { font-size: 14px; font-weight: 800; letter-spacing: .1em;
           text-transform: uppercase; color: var(--amber-deep); margin-bottom: 10px; }
.muted { color: var(--soft); }
.small { font-size: 15px; color: var(--faint); line-height: 1.5; }
/* A phone number inside a sentence is part of the sentence. Links are bold
   site-wide, which makes an inline number shout; in the card it only has to
   look tappable, so it keeps the colour and drops the weight. */
.form-card .small a, .form-card .under a { font-weight: inherit; }

/* ---------------- sections ---------------- */
.hero { display: grid; gap: 34px; padding: 30px 0 20px; align-items: start; }
@media (min-width: 880px) {
  .hero { grid-template-columns: 1.05fr .95fr; gap: 48px; padding: 56px 0 30px; }
}
.hero-copy p.lead { margin: 18px 0 22px; }
.sec { padding: 44px 0 0; }
.sec.tight { padding-top: 30px; }
.grid-3 { display: grid; gap: 14px; }
@media (min-width: 720px) { .grid-3 { grid-template-columns: 1fr 1fr 1fr; } }
.grid-2 { display: grid; gap: 14px; }
@media (min-width: 720px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
        padding: 22px; box-shadow: var(--sh); }
.card.navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.card.navy .muted, .card.navy .small { color: rgba(255,255,255,.78); }
.card.navy a { color: var(--amber); }
.card.navy a.btn.primary { color: var(--ink); }   /* amber text on an amber button vanished */
.card.navy h2 { color: #fff; }

/* proof strip */
.proof { display: grid; gap: 12px; margin-top: 26px; }
@media (min-width: 720px) { .proof { grid-template-columns: 1fr 1fr 1fr; } }
.proof div { background: var(--card); border: 1px solid var(--line); border-radius: 12px;
             padding: 14px 16px; font-size: 16px; color: var(--soft); line-height: 1.4; }
.proof b { display: block; color: var(--ink); font-size: 17px; margin-bottom: 2px; }

/* live number */
.live { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
        margin-top: 22px; padding: 16px 18px; border-radius: 12px;
        background: var(--green-soft); border: 1px solid #CBE6D6; }
.live .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green);
             box-shadow: 0 0 0 4px rgba(30,127,83,.18); flex-shrink: 0; }
.live .t { font-size: 15px; color: var(--soft); flex: 1 1 200px; }
.live a.num { font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: .01em;
              white-space: nowrap; }
.live a.num:hover { color: var(--green); text-decoration: none; }

/* how it works */
.steps { display: grid; gap: 0; }
.step { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 18px 0;
        border-top: 1px solid var(--line); }
.step:first-child { border-top: 0; padding-top: 4px; }
.step .t { font-weight: 800; color: var(--amber-deep); font-size: 18px;
           font-variant-numeric: tabular-nums; padding-top: 2px; }
.step b { display: block; font-size: 19px; margin-bottom: 4px; }
.step p { color: var(--soft); font-size: 17px; line-height: 1.45; }

/* testimonials */
.quotes { display: grid; gap: 14px; }
@media (min-width: 720px) { .quotes { grid-template-columns: 1fr 1fr; } }
.quote { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
         padding: 22px; box-shadow: var(--sh); }
.quote p { font-size: 19px; line-height: 1.5; }
.quote p::before { content: "\201C"; color: var(--amber); font-weight: 800; }
.quote p::after { content: "\201D"; color: var(--amber); font-weight: 800; }
.quote .who { margin-top: 12px; font-size: 15px; color: var(--soft); font-weight: 700; }
.quote .who span { color: var(--faint); font-weight: 600; }

/* won't-do list */
.nots { list-style: none; display: grid; gap: 10px; }
.nots li { display: flex; gap: 12px; align-items: flex-start; font-size: 18px;
           color: var(--soft); line-height: 1.45; }
.nots li::before { content: ""; width: 22px; height: 22px; flex-shrink: 0; margin-top: 3px;
  border-radius: 50%; background: var(--navy);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm4.3 6.7-5.6 5.6a1 1 0 0 1-1.4 0l-2.6-2.6 1.4-1.4 1.9 1.9 4.9-4.9 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm4.3 6.7-5.6 5.6a1 1 0 0 1-1.4 0l-2.6-2.6 1.4-1.4 1.9 1.9 4.9-4.9 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat; }
.nots b { color: var(--ink); }

/* pricing */
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 8px 0 4px; }
.price .n { font-size: 54px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.price .per { font-size: 18px; color: rgba(255,255,255,.78); }
.price-notes { list-style: none; display: grid; gap: 8px; margin-top: 16px; font-size: 17px; }
.price-notes li::before { content: "\2713"; color: var(--amber); font-weight: 800; margin-right: 10px; }

/* ---------------- forms ---------------- */
.form-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px;
             padding: 24px; box-shadow: var(--sh-lift); }
.form-card .title { font-size: 22px; font-weight: 800; line-height: 1.2; }
.form-card .under { font-size: 15px; color: var(--soft); margin-top: 6px; line-height: 1.45; }
form.demo { display: grid; gap: 14px; margin-top: 18px; }
label { display: block; font-size: 15px; font-weight: 700; color: var(--soft); margin-bottom: 6px; }
label .opt { color: var(--faint); font-weight: 600; }
input, select {
  width: 100%; font: inherit; font-size: 18px; color: var(--ink);
  background: #fff; border: 2px solid var(--line); border-radius: 12px;
  padding: 13px 14px; min-height: 52px; appearance: none; -webkit-appearance: none;
}
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%234E5D6C' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
         background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
input:focus, select:focus { border-color: var(--navy); outline: none;
                            box-shadow: 0 0 0 4px rgba(22,50,79,.12); }
input::placeholder { color: #A5AEB7; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg label { margin: 0; cursor: pointer; text-align: center; font-size: 17px; font-weight: 700;
             color: var(--ink); border: 2px solid var(--line); border-radius: 12px;
             padding: 12px 10px; background: #fff; }
.seg input:checked + label { border-color: var(--navy); background: var(--navy); color: #fff; }
.seg input:focus-visible + label { outline: 3px solid var(--amber); outline-offset: 2px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 800; font-size: 18px; cursor: pointer;
  border-radius: 12px; padding: 14px 22px; min-height: 54px; border: 2px solid transparent;
  text-decoration: none; transition: transform .06s ease, background .15s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--amber); color: var(--ink); width: 100%; }
.btn.primary:hover { background: var(--amber-deep); color: var(--ink); }
.btn.ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn.ghost:hover { background: var(--navy); color: #fff; }
.btn.navy { background: var(--navy); color: #fff; }
.btn.navy:hover { background: var(--navy-deep); }
.honey { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.flash { background: #FFF1D6; border: 1px solid #F3D9A4; color: var(--ink); font-weight: 700;
         padding: 12px 16px; border-radius: 12px; margin: 16px 0; font-size: 16px; }
.flash.err { background: #FDE7E7; border-color: #F2B8B8; }
.check { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--soft);
         font-weight: 600; margin-top: 4px; }
.check input { width: 22px; height: 22px; min-height: 0; padding: 0; border: 0;
               border-radius: 4px; appearance: auto; -webkit-appearance: auto;
               accent-color: var(--navy); flex-shrink: 0; }

/* password eye */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 52px; }
.pw-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
          background: none; border: 0; color: var(--soft); cursor: pointer; padding: 8px;
          border-radius: 8px; display: flex; }
.pw-eye:hover { color: var(--ink); background: var(--paper); }

/* ---------------- login layout ---------------- */
.login { display: grid; gap: 28px; padding: 28px 0 60px; align-items: start; }
@media (min-width: 880px) { .login { grid-template-columns: 1fr 440px; gap: 56px; padding-top: 56px; } }
.login-side h1 { font-size: clamp(32px, 5vw, 46px); }
.login-side .lead { margin: 14px 0 6px; }
.login .quotes { grid-template-columns: 1fr; margin-top: 22px; }

/* ---------------- footer ---------------- */
.foot { margin-top: 64px; padding: 22px 0 40px; border-top: 1px solid var(--line);
        display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 15px; color: var(--soft); }
.foot a { color: var(--soft); font-weight: 700; }
.foot a:hover { color: var(--ink); }

/* small thanks page */
.thanks { max-width: 620px; padding: 40px 0; }
.thanks .num { display: inline-block; font-size: 30px; font-weight: 800; color: var(--ink);
               margin: 10px 0; font-variant-numeric: tabular-nums; }
.thanks .num:hover { color: var(--navy); text-decoration: none; }

/* ---------------- motion ----------------
   Enough movement that the page feels alive, never so much that it feels
   like an ad. Everything here is CSS; the only script adds a class when a
   section scrolls into view. Off entirely for reduced-motion users. */

/* the live dot: a heartbeat, not a strobe */
@keyframes livepulse {
  0%   { box-shadow: 0 0 0 0 rgba(30,127,83,.45); }
  70%  { box-shadow: 0 0 0 12px rgba(30,127,83,0); }
  100% { box-shadow: 0 0 0 0 rgba(30,127,83,0); }
}
@keyframes liveblink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .2; transform: scale(.7); } }
.live .dot { animation: livepulse 1.6s ease-out infinite, liveblink 1.6s ease-in-out infinite; }

/* soft colour drifting behind the hero. It lives in a layer that clips it:
   the blob that hangs off the right edge used to widen the whole page, and
   a phone would happily drag sideways to look at it. */
.hero { position: relative; }
.hero-glow { position: absolute; top: 0; bottom: 0; left: -20px; right: -20px;
             overflow: hidden; z-index: -1; pointer-events: none; }
.hero-glow::before, .hero-glow::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(60px);
  opacity: .55;
}
.hero-glow::before { width: 420px; height: 420px; left: -120px; top: -80px;
  background: radial-gradient(circle, rgba(242,169,59,.45), transparent 65%);
  animation: drift1 14s ease-in-out infinite alternate; }
.hero-glow::after { width: 480px; height: 480px; right: -140px; bottom: -120px;
  background: radial-gradient(circle, rgba(22,50,79,.30), transparent 65%);
  animation: drift2 18s ease-in-out infinite alternate; }
@keyframes drift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(60px,40px) scale(1.15); } }
@keyframes drift2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-50px,-60px) scale(1.1); } }
/* Sideways is not a direction on this site. The glow layer above removes
   the one thing that used to poke past the screen; this is the belt to
   that brace, on both html and body because a phone ignores it on one. */
html, body { overflow-x: hidden; }
body { position: relative; }
img, svg, video, iframe { max-width: 100%; }
code, kbd { overflow-wrap: anywhere; }

/* the caught-call loop: three lines that light up in order, forever */
.callflow { margin-top: 18px; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 6px 4px; box-shadow: var(--sh); }
.callflow .cf { display: grid; grid-template-columns: 30px 48px 1fr; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px; color: var(--soft); font-size: 16px; line-height: 1.35;
  opacity: .45; }
.callflow .cf b { color: var(--ink); }
.callflow .cf .t { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--faint); font-size: 14px; }
.callflow .cf .i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--paper); color: var(--navy); }
.callflow .cf .i svg { width: 16px; height: 16px; }
.callflow .cf:nth-child(1) { animation: cfstep 7.5s infinite; }
.callflow .cf:nth-child(2) { animation: cfstep 7.5s infinite 2.5s; }
.callflow .cf:nth-child(3) { animation: cfstep 7.5s infinite 5s; }
@keyframes cfstep {
  0%, 100% { opacity: .45; background: transparent; transform: translateX(0); }
  6%, 30%  { opacity: 1; background: #FFF4DF; transform: translateX(4px); }
  36%      { opacity: .45; background: transparent; transform: translateX(0); }
}
.callflow .cf:nth-child(1) .i { animation: ring 7.5s infinite; }
@keyframes ring {
  0%, 2%, 30%, 100% { transform: rotate(0); }
  4%  { transform: rotate(-14deg); } 6% { transform: rotate(14deg); }
  8%  { transform: rotate(-12deg); } 10% { transform: rotate(12deg); }
  12% { transform: rotate(-8deg); } 14% { transform: rotate(8deg); } 16% { transform: rotate(0); }
}
.callflow .cf:nth-child(3) .i { background: var(--green-soft); color: var(--green); }

/* things you can press lift a little */
.btn, .card, .quote, .proof div, .form-card { transition: transform .18s ease, box-shadow .18s ease; }
.btn:hover { transform: translateY(-1px); }
.card:hover, .quote:hover, .proof div:hover { transform: translateY(-3px); box-shadow: var(--sh-lift); }
.btn.primary { position: relative; overflow: hidden; }
.btn.primary::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg); animation: sheen 6s ease-in-out infinite; }
@keyframes sheen { 0%, 70% { left: -60%; } 90%, 100% { left: 130%; } }

/* sections arrive as you reach them */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  /* The live dot keeps blinking on purpose — it is a status light, not
     decoration, and a still light reads as "off". Everything else stops. */
  .hero-glow::before, .hero-glow::after, .callflow .cf, .callflow .cf .i, .btn.primary::after {
    animation: none !important; }
  .callflow .cf { opacity: 1; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .card, .quote, .proof div { transition: none; }
}

/* the counter: one real number, counted up on arrival */
.proof div.count { background: var(--navy); border-color: var(--navy); color: rgba(255,255,255,.8); }
.proof div.count b { color: #fff; font-size: 26px; letter-spacing: -.01em; line-height: 1.1; }
.proof div.count b .n { font-variant-numeric: tabular-nums; color: var(--amber); }

/* ---------------- testimonial strip ----------------
   A list that never stops moving. Two identical runs sit side by side and the
   pair slides left by exactly half its own width, so the seam lands where the
   first card started and the loop cannot be seen. Hover or keyboard focus
   stops it — a sentence you can't finish reading is worse than none. */
.tstrip-wrap { margin-top: 30px; }
.tstrip-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
               margin-bottom: 12px; }
.tstrip-flag { font-size: 12px; font-weight: 800; letter-spacing: .06em;
               text-transform: uppercase; color: var(--amber-deep);
               background: #FFF4DF; border: 1px solid #F3DCAE;
               border-radius: 999px; padding: 4px 10px; }
.tstrip {
  position: relative; overflow: hidden;
  /* full-bleed out of the 1040px column so the cards run off both edges */
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding: 6px 0 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.tstrip-track { display: flex; width: max-content; animation: tmarquee 64s linear infinite; }
.tstrip:hover .tstrip-track,
.tstrip:focus-within .tstrip-track { animation-play-state: paused; }
.tstrip-run { display: flex; gap: 16px; padding-right: 16px; }
@keyframes tmarquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

.tcard {
  flex: 0 0 auto; width: min(360px, 78vw); margin: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 20px; box-shadow: var(--sh);
  display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tcard:hover, .tcard:focus { outline: none; transform: translateY(-3px);
  box-shadow: var(--sh-lift); border-color: var(--bd-strong, #B9C1CA); }
.tcard:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.tcard blockquote { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink); }
.tcard blockquote::before { content: "\201C"; color: var(--amber); font-weight: 800; }
.tcard blockquote::after  { content: "\201D"; color: var(--amber); font-weight: 800; }
.tcard figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
                    font-size: 14px; line-height: 1.3; }
.tcard .tname { font-weight: 800; color: var(--ink); }
.tcard .tbiz { color: var(--soft); font-weight: 700; }
.tcard .ttrade { color: var(--faint); font-weight: 600; text-transform: capitalize; }
.tcard .tbiz::before { content: "\00b7\00a0"; color: var(--faint); }

/* No animation? Then it becomes an ordinary swipeable row rather than a
   frozen one — the words still have to be reachable. */
@media (prefers-reduced-motion: reduce) {
  .tstrip { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tstrip-track { animation: none; }
  .tstrip-run:nth-child(2) { display: none; }
  .tcard { transition: none; }
}

/* ---------------- the calendar, inside the site ----------------
   Calendly in a panel of our own: a plain iframe, no third-party script,
   nothing for the security header to relax beyond letting calendly.com be
   framed here. Full screen on a phone, a centred sheet on a desk. The page
   behind it stops scrolling while it is open, so closing it puts the reader
   back exactly where they were. */
html.cal-open { overflow: hidden; }
.cal-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(20,32,43,.62);
               display: flex; align-items: center; justify-content: center; }
.cal-panel { background: #fff; width: 100%; height: 100%; display: flex;
             flex-direction: column; overflow: hidden; }
@media (min-width: 720px) {
  .cal-overlay { padding: 24px; }
  .cal-panel { width: min(1000px, 100%); height: min(860px, 100%);
               border-radius: 18px; box-shadow: var(--sh-lift); }
}
.cal-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
           padding: 12px 16px; border-bottom: 1px solid var(--line); font-weight: 800;
           flex: none; }
.cal-close { font: inherit; font-weight: 800; font-size: 16px; color: var(--navy);
             background: var(--paper); border: 2px solid var(--line); border-radius: 999px;
             padding: 8px 16px; cursor: pointer; min-height: 44px; }
.cal-close:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.cal-body { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; }
.cal-body iframe { display: block; width: 100%; height: 100%; min-height: 720px; border: 0; }

/* ---------------- the right-hand stack ----------------
   Beside the headline: the card, then the video, then the caught-call loop,
   one under the other, so the column is as tall as the copy and nothing on
   the right is blank. On a phone the same three simply follow the copy. */
.hero-side { display: grid; gap: 18px; align-content: start; }
.hero-side .callflow { margin-top: 0; }
.vsl-frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
             border-radius: 18px; overflow: hidden; background: var(--navy);
             border: 1px solid var(--line); box-shadow: var(--sh-lift); }
.vsl-frame iframe, .vsl-frame video { position: absolute; inset: 0; width: 100%; height: 100%;
                                      display: block; border: 0; background: #000; }
/* no video yet: the play button is real, and it dials the demo line */
.vsl-empty { display: grid; place-items: center; align-content: center; gap: 14px;
             padding: 24px; text-align: center; color: #fff; text-decoration: none;
             background: radial-gradient(circle at 30% 20%, rgba(242,169,59,.28), transparent 55%),
                         var(--navy); }
.vsl-empty:hover { text-decoration: none; }
.vsl-empty .play { width: 68px; height: 68px; border-radius: 50%; background: var(--amber);
                   color: var(--navy); display: grid; place-items: center;
                   box-shadow: 0 10px 28px rgba(0,0,0,.35); transition: transform .18s ease; }
.vsl-empty .play svg { width: 30px; height: 30px; margin-left: 4px; }
.vsl-empty:hover .play { transform: scale(1.07); }
.vsl-empty .cap { font-size: 16px; line-height: 1.4; color: rgba(255,255,255,.82); max-width: 34ch; }
.vsl-empty .cap b { display: block; color: #fff; font-size: 20px; margin-bottom: 4px; }