/* ===== Your AI Secretary ===== */

:root {
  /* Daylight Inverse recolor, Sept 2026. Same variable names, new values. */
  --navy: #0F1A2E;            /* Daylight navy-ink */
  --slate: #0F1A2E;           /* Daylight slate (kept for parity, unused directly) */
  --purple: #0F1A2E;          /* Daylight plum: decorative ink, never a button fill */
  --purple-dim: #0F1A2E;      /* lighter plum, for badge/label text (button hovers are hardcoded navy) */
  --gray-light: #E2E5EF;      /* Daylight silver-line */
  --lavender: #EFECFE;        /* Daylight lavender-wash: chip/pill/band backgrounds */
  --amber: #F2C14E;           /* Daylight honey: navy grounds only, never light-ground type or fill */

  /* semantic tokens */
  --bg: #FBFBFD;               /* Daylight paper, decoupled from --lavender (now the wash token) */
  --bg-alt: #EFECFE;           /* Daylight lavender-wash */
  --bg-deep: #E2E5EF;          /* Daylight lavender-line */
  --text-heading: var(--navy);
  --text-body: #0F1A2E;
  --text-muted: #0F1A2E;
  --border: rgba(15, 26, 46, 0.09);  /* Daylight navy-tinted hairline */
  --card-bg: #FBFBFD;          /* Daylight paper */

  --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-body);
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 40px;
  background: rgba(251, 251, 253, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}

.nav .logo {
  font-weight: 800;
  font-size: 2.1rem;
  letter-spacing: -0.01em;
  color: var(--text-heading);
  white-space: nowrap;
}
@media (max-width: 560px) {
  .nav .logo { font-size: clamp(1rem, 6.2vw, 2.1rem); }
}
.nav .logo span { color: var(--purple); }
#logo-rotate { color: #A79BF0; }
.logo-rotate {
  display: inline-block;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.logo-rotate.swap {
  opacity: 0;
  transform: translateY(4px);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 10px 26px;
  border: 1px solid rgba(91,63,168,0.35);
  background: rgba(91,63,168,0.08);
  border-radius: 999px;
}
.nav-links a {
  color: var(--text-body);
  opacity: 0.85;
  transition: opacity 0.2s, color 0.2s;
}
.nav-links a:hover { opacity: 1; color: var(--navy); }

.nav-cta {
  background: #A79BF0;
  color: var(--bg);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  /* Stays on one line. On narrow phones the label wrapped to two lines and the
     button grew tall enough to stretch the nav. */
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.2s;
}
@media (max-width: 400px) {
  .nav-cta { padding: 9px 14px; font-size: 0.82rem; }
  /* The nowrap CTA plus the nowrap logo need the row to give up some padding
     on the narrowest phones, or the layout viewport stretches past the device. */
  .nav { padding: 12px 14px; gap: 8px; }
  .nav-burger { width: 28px; }
}
/* Below 340px the logo, burger and CTA together are wider than the screen even
   at the reduced sizes above, so the CTA gives up a little more. */
@media (max-width: 340px) {
  .nav { padding: 12px 10px; gap: 6px; }
  .nav-cta { padding: 8px 11px; font-size: 0.78rem; }
}
.nav-cta:hover { background: #9484ED; transform: translateY(-1px); }

/* ---------- Mobile menu ----------
   Two-line burger beside the logo below 821px, opening a panel that slides in
   from the left edge. Everything here is inert at 821px and up. */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-burger span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--text-heading);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-burger.is-open span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-burger.is-open span:last-child { transform: translateY(-4px) rotate(-45deg); }

.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 390;
  background: rgba(15,26,46, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s ease;
}
.mobile-menu-backdrop.is-open { opacity: 1; pointer-events: auto; }

.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 400;
  width: min(78vw, 320px);
  padding: 84px 22px 24px;
  background: var(--bg);
  border-right: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(15,26,46, 0.22);
  transform: translateX(-100%);
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
  overflow-y: auto;
}
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--bg-deep);
  color: var(--text-heading);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.mobile-menu-list { display: flex; flex-direction: column; }
.mobile-menu-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 2px;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text-heading);
}
.mobile-menu-list a:active { color: var(--navy); }
/* Book a Demo sits below FAQ and is the one menu item meant to be picked out:
   bold deep violet, icon included, against the navy-ink of the rest. */
.mobile-menu-list a.mm-demo {
  color: #6B5BD6;
  font-weight: 800;
}
.mobile-menu-list a.mm-demo .mm-icon { color: #6B5BD6; }
.mobile-menu-list a.mm-demo:active { color: #5546BC; }
.mm-icon {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  color: var(--navy);
}
/* The up arrow trails the "Top" label, so it keeps a tighter gap than the
   leading icons get. */
.mm-arrow {
  color: #A79BF0;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-left: -4px;
  color: var(--navy);
}

@media (max-width: 820px) {
  .nav-burger { display: flex; }
  /* burger and logo sit together on the left, CTA keeps the right edge */
  .nav { justify-content: flex-start; gap: 10px; }
  .nav-cta { margin-left: auto; }
}
@media (min-width: 821px) {
  .mobile-menu,
  .mobile-menu-backdrop { display: none; }
}

/* ---------- Footer nav and social ---------- */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-body);
}
.footer-nav a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.footer-nav a:hover { color: var(--navy); }
/* Sits inline at the end of the Privacy / Terms row, so it is sized to that
   row rather than standing on its own. */
.footer-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--text-heading);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.footer-x:hover { color: var(--navy); border-color: var(--navy); }
.footer-x svg { width: 12px; height: 12px; }
@media (max-width: 820px) {
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-right { align-items: flex-start; }
  .footer-copy { text-align: left; }
}

/* ---------- Hero / Frame 1 ---------- */
.hero {
  position: relative;
  min-height: auto;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 130px;
  padding-bottom: 60px;
  background: var(--bg);
}

.matrix-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.16;
  z-index: 0;
}

/* Solid flat cover so the hero reads as the same plain lavender as every other
   section, rather than the canvas animation/gradient wash showing through. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: 0 32px;
}
/* Direct children only. The Answer/Qualify/Schedule/Record rotator now lives inside
   .hero-content and its chat bubbles are <p> elements; a descendant selector here would
   restyle every bubble. */
.hero-content > h1,
.hero-content > p {
  max-width: 780px;
}

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--purple);
  border: 1px solid rgba(91,63,168,0.35);
  background: rgba(91,63,168,0.08);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 24px;
}

.hero h1 {
  /* Lets the browser even out the lines instead of leaving a single orphaned word.
     Matters most between ~375px and ~479px, where "lead." would otherwise sit alone
     on line two. Unsupported browsers just wrap normally. */
  text-wrap: balance;
  font-size: clamp(2.3rem, 5.2vw, 4rem);
  font-weight: 800;
  line-height: 1.08;
  color: var(--text-heading);
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}

.highlight {
  background: linear-gradient(90deg, #A79BF0, #F2C14E);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  white-space: nowrap;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.highlight.swap {
  opacity: 0;
  transform: translateY(4px);
}

.hero-content > p {
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  color: var(--text-body);
  margin-bottom: 32px;
  line-height: 1.6;
}

/* Hero subtext. This copy used to be the Preview section's <h2>; it now sits under the
   hero headline, a step down in size from a section header but still larger than body. */
.hero-content p.hero-sub {
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  line-height: 1.5;
  color: var(--text-body);
  max-width: 900px;
  margin-bottom: 0;
}

/* The Answer/Qualify/Schedule/Record rotator now lives inside the hero. */
.hero-content .np {
  margin-top: clamp(68px, 9vw, 128px);
}

.hero-ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-primary, .btn-secondary {
  padding: 14px 28px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 0.98rem;
  transition: transform 0.2s, background 0.2s, border-color 0.2s;
  display: inline-block;
}
.btn-primary {
  background: #A79BF0;
  color: #160F38;
  box-shadow: 0 8px 24px rgba(167,155,240,0.35);
}
.btn-primary:hover { background: #9484ED; transform: translateY(-2px); }
/* Honey variant: the hero's Try Ours color, used for Book a Demo in the home
   Get Started section and on /contact. */
.btn-primary.btn-honey {
  background: #F2C14E;
  color: #0F1A2E;
  box-shadow: 0 8px 24px rgba(242,193,78,0.35);
}
.btn-primary.btn-honey:hover { background: #F7CE6E; }

/* A <button> does not inherit the page font and arrives with its own border
   and cursor, so these classes render differently on a button than on a link
   unless that is undone. */
button.btn-primary,
button.btn-secondary {
  font-family: inherit;
  border: 0;
  cursor: pointer;
}

.btn-secondary {
  background: transparent;
  color: var(--text-heading);
  border: 1px solid rgba(15,26,46,0.18);
}
.btn-secondary:hover { border-color: var(--navy); color: var(--navy); transform: translateY(-2px); }

/* Forces each manually-authored line of a headline to stay intact (no internal wrap) so a
   line never breaks down to an orphan word or two. */
.hero h1 .line { white-space: nowrap; }

@media (max-width: 680px) {
  /* Hero runs larger than the standard mobile section-heading size on purpose, it's
     the first thing visitors see. */
  #capture-hero h1 { font-size: 2.2rem; }
  #capture-hero p.hero-sub { font-size: 1.15rem; }
}

.scroll-cue {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.scroll-cue::after {
  content: '';
  width: 1px;
  height: 28px;
  background: linear-gradient(180deg, rgba(91,63,168,0.8), transparent);
  animation: scrollpulse 1.8s ease-in-out infinite;
}
@keyframes scrollpulse {
  0% { opacity: 0.2; }
  50% { opacity: 1; }
  100% { opacity: 0.2; }
}

/* ---------- Section shared ---------- */
/* The nav is fixed, so an anchor jump would otherwise park the section heading
   underneath it. Offset every jump by a little more than the nav's height. */
section { position: relative; padding: 64px 0; scroll-margin-top: 88px; }
.section-slate { background: var(--bg); }
/* Stronger wash than .section-slate — used right under the hero, where the hero's own
   fade-to-background gradient would otherwise leave almost no visible seam. */
.section-deep { background: var(--bg); }

/* ---------- Anonymous Zone (funnel diagram) ---------- */
/* Nested inside #impact rather than a sibling <section>, so it doesn't pick up
   the site-wide `section + section` top rule automatically, and the div.wrap
   parent caps its width to 1180px. Same full-bleed pseudo-element trick as
   .yas-impact .stats-head::before, so the line runs edge to edge. */
#anonymous-zone {
  position: relative;
}
#anonymous-zone::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  border-top: 1px solid var(--rule);
}
/* .yas-impact h2 (unscoped, same specificity as .section-head h2 but declared
   later) was zeroing out this section's header-to-subtext gap. Restore it with
   a more specific selector so the spacing matches every other section. */
#anonymous-zone h2 {
  margin: 0 0 14px;
}
.anon-zone-panel {
  /* Matches the larger headline-to-content gap used elsewhere on the site
     (e.g. .yas-hiw__spine), rather than the plain .section-head 40px. */
  margin-top: 76px;
  background: #0F1A2E;
  border-radius: 24px;
  padding: 32px;
  overflow: hidden;
}
.anon-zone-panel svg {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 720px) {
  .anon-zone-panel { padding: 20px; }
}

.section-head {
  max-width: 640px;
  margin: 0 0 40px;
}
.section-tag {
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #F2C14E;
  font-weight: 700;
  margin-bottom: 14px;
}
.section-head h2 {
  /* Ceiling matches The Impact's 56px header so section headers read the same size
     site-wide instead of Impact standing out as larger. */
  font-size: clamp(1.8rem, 3.9vw, 3.5rem);
  color: var(--text-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.live-capture-cta {
  text-align: center;
  margin-top: 32px;
}

/* ---------- Breather block (The Difference) ----------
   Namespaced section ported as-is from the design handoff. Colors are the exact
   hex values from that file (the gold glow/link pairing is a deliberate accent
   distinct from the site's --amber, not a site-wide token). */
.yas-breather{position:relative;overflow:hidden;background:#EFECFE;font-family:Manrope,system-ui,-apple-system,sans-serif;padding:44px 40px;-webkit-font-smoothing:antialiased}
.yas-breather *{box-sizing:border-box}
.yas-breather__layer{position:absolute;inset:0;pointer-events:none}
.yas-breather__grid{background:none}
.yas-breather__spot{background:none}
.yas-breather__warm{background:none}
.yas-breather__inner{position:relative;z-index:5;max-width:1020px;margin:0 auto;text-align:center}
.yas-breather__statement{margin:0;font-size:64px;line-height:1.1;font-weight:800;letter-spacing:-.03em;color:#0F1A2E;text-wrap:balance}
.yas-breather__statement em{font-style:normal;font-weight:800;color:#0F1A2E}
.yas-breather__accent{color:#F2C14E;text-decoration:underline;text-decoration-color:#F2C14E;text-decoration-thickness:3px;text-underline-offset:0.1em}
/* Lead sentence gets its own block box so text-wrap:balance (inherited from
   .yas-breather__statement) balances its lines independently of the forced
   <br> + "Of course you would." line that follows it. */
.yas-breather__statement-lead{display:block}
#close-more-business .yas-breather__statement em,
#close-more-business .yas-breather__statement-second{display:inline-block;margin-top:26px}
@media(max-width:1024px){#close-more-business .yas-breather__statement em,#close-more-business .yas-breather__statement-second{margin-top:18px}}
@media(max-width:680px){#close-more-business .yas-breather__statement em,#close-more-business .yas-breather__statement-second{margin-top:13px}}
.yas-breather__link{display:inline-block;margin:16px 0 0;font-size:25.5px;font-weight:700;letter-spacing:.02em;color:#F2C14E;text-decoration:none;border-bottom:2px solid rgba(242,193,78,.6);padding-bottom:4px;transition:border-color .2s ease}
.yas-breather__link:hover,.yas-breather__link:focus-visible{border-bottom-color:#F2C14E}
@media(max-width:1024px){.yas-breather{padding:32px 24px}.yas-breather__statement{font-size:46px}}
@media(max-width:680px){.yas-breather{padding:24px 22px}.yas-breather__statement{font-size:33px;letter-spacing:-.02em}.yas-breather__link{margin-top:12px}}

/* "Close More Business" breather (Pricing -> FAQ): statement font-size reduced
   25% from the shared .yas-breather__statement default, scoped to this section
   only so the "Generic vs. Trained" breather above is untouched. */
#close-more-business .yas-breather__statement{font-size:48px}
@media(max-width:1024px){#close-more-business .yas-breather__statement{font-size:34.5px}}
@media(max-width:680px){#close-more-business .yas-breather__statement{font-size:24.75px}}
#generic-vs-trained .yas-breather__statement{font-size:48px}
@media(max-width:1024px){#generic-vs-trained .yas-breather__statement{font-size:34.5px}}
@media(max-width:680px){#generic-vs-trained .yas-breather__statement{font-size:24.75px}}

/* Rotator: both statement variants share one grid cell (grid-area:1/1), so the
   row auto-sizes to whichever is tallest at the current viewport width — no JS
   height measurement needed. is-active sits centered/visible; is-next waits
   off-screen right; is-leaving is the outgoing one, sliding off left. Timing
   (dwell + swap) lives in script.js (initBreatherRotator). */
#close-more-business .yas-breather__rotator{display:grid}
/* Full-width "race" slide: is-next/is-leaving sit a full container-width off
   to either side (translateX is relative to the element's own width, which
   spans the grid cell), so incoming/outgoing copy visibly travels the whole
   block instead of nudging in from just off-frame. Fast-start/settle easing
   plus a blur that's only present mid-flight (0 at rest, sharp again once
   .is-active lands) sells the speed. */
#close-more-business .yas-breather__rotator .yas-breather__statement{grid-area:1/1;transform:translateX(0);opacity:1;filter:blur(0px);transition:transform .65s cubic-bezier(.33,1,.68,1),opacity .45s ease,filter .55s ease}
#close-more-business .yas-breather__rotator .yas-breather__statement.is-next{transform:translateX(100%);opacity:0;filter:blur(14px);pointer-events:none}
#close-more-business .yas-breather__rotator .yas-breather__statement.is-leaving{transform:translateX(-100%);opacity:0;filter:blur(14px)}
@media(prefers-reduced-motion:reduce){
  #close-more-business .yas-breather__rotator .yas-breather__statement{transition:opacity .3s ease}
  #close-more-business .yas-breather__rotator .yas-breather__statement.is-next,
  #close-more-business .yas-breather__rotator .yas-breather__statement.is-leaving{transform:none;filter:none}
}

/* ---------- Book a Meeting modal ---------- */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal.is-open { display: flex; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15,26,46, 0.6);
  backdrop-filter: blur(2px);
}
/* Wraps the panel so the close button can float just above it, fully outside the
   iframe's own bounds — Chatbase renders its own controls (menu, expand, etc.) inside
   the iframe's top-right corner, and sitting our close button on top of that overlapped
   it. Keeping the button entirely outside the iframe avoids that no matter what
   Chatbase's own header looks like. */
.modal-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
}
.modal-panel {
  width: 100%;
  height: min(80vh, 760px);
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(15,26,46,0.35);
}
.modal-panel iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.modal-close {
  position: absolute;
  top: -46px;
  right: 0;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: var(--text-heading);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(15,26,46,0.25);
  transition: background 0.15s ease;
}
.modal-close:hover { background: #F1F2F7; }

/* Mobile: percentage/vh-based heights get miscalculated by mobile browsers once the
   address bar collapses/expands, which was pushing Chatbase's message input below the
   visible area. A fixed pixel height avoids that ambiguity and reliably leaves room for
   the input field. */
@media (max-width: 768px) {
  .modal {
    padding: 64px 12px 12px;
    align-items: flex-start;
  }
  .modal-shell {
    max-width: 100%;
  }
  .modal-panel {
    height: 600px;
    max-height: calc(100vh - 90px);
  }
  .modal-close {
    top: -44px;
  }
}


/* ---------- Book a Meeting modal ---------- */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal.is-open { display: flex; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15,26,46, 0.6);
  backdrop-filter: blur(2px);
}
/* Wraps the panel so the close button can float just above it, fully outside the
   iframe's own bounds — Chatbase renders its own controls (menu, expand, etc.) inside
   the iframe's top-right corner, and sitting our close button on top of that overlapped
   it. Keeping the button entirely outside the iframe avoids that no matter what
   Chatbase's own header looks like. */
.modal-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
}
.modal-panel {
  width: 100%;
  height: min(80vh, 760px);
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(15,26,46,0.35);
}
.modal-panel iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.modal-close {
  position: absolute;
  top: -46px;
  right: 0;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: var(--text-heading);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(15,26,46,0.25);
  transition: background 0.15s ease;
}
.modal-close:hover { background: #F1F2F7; }

/* Mobile: percentage/vh-based heights get miscalculated by mobile browsers once the
   address bar collapses/expands, which was pushing Chatbase's message input below the
   visible area. A fixed pixel height avoids that ambiguity and reliably leaves room for
   the input field. */
@media (max-width: 768px) {
  .modal {
    padding: 64px 12px 12px;
    align-items: flex-start;
  }
  .modal-shell {
    max-width: 100%;
  }
  .modal-panel {
    height: 600px;
    max-height: calc(100vh - 90px);
  }
  .modal-close {
    top: -44px;
  }
}

/* ---------- Cal.com booking panel ----------
   Sits in normal flow at the bottom of #contact and pushes the footer down when
   it opens, rather than covering the page. The chat is a separate surface
   entirely: Chatbase's own widget on desktop, .modal below 821px. */
.drop-panel {
  max-width: 760px;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
              margin-top 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.drop-panel.is-open {
  max-height: 780px;
  margin-top: 36px;
  visibility: visible;
}
.drop-panel-inner {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(15,26,46, 0.18);
}
/* Header bar sits outside the iframe on purpose. Chatbase draws its own controls
   in the iframe's top-right corner, so our close button has to stay clear of it. */
.drop-panel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(90deg, #A79BF0 0%, #9484ED 100%);
  color: #fff;
}
.drop-panel-title { font-weight: 700; font-size: 0.95rem; }
.drop-panel-close {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}
.drop-panel-close:hover { background: rgba(255, 255, 255, 0.32); }
/* Cal renders its own iframe into #cal-inline and takes its height from the
   container, so the height lives here rather than on the iframe. */
#cal-inline {
  height: 700px;
  overflow-y: auto;
  background: #fff;
}
#cal-inline iframe { height: 100%; }
@media (max-width: 768px) {
  .drop-panel.is-open { max-height: 720px; margin-top: 28px; }
  #cal-inline { height: min(620px, calc(100vh - 160px)); }
}

/* ---------- Floating live chat bubble ---------- */
.chat-bubble {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 200;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(15,26,46,0.35);
  transition: background 0.15s ease, transform 0.15s ease;
}
.chat-bubble:hover { background: #0F1A2E; transform: translateY(-2px); }
.chat-bubble svg { width: 26px; height: 26px; }
@media (max-width: 560px) {
  .chat-bubble { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .chat-bubble svg { width: 22px; height: 22px; }
}
/* At 821px+ Chatbase's own native widget (loaded in script.js) provides the
   floating bubble instead, so our custom one steps aside to avoid stacking. */
@media (min-width: 821px) {
  .chat-bubble { display: none; }
}

.section-head p {
  color: var(--text-body);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* ---------- Works Across chip strip ----------
   Stacked (label above icons) below 821px, inline (label left of icons) above it —
   matches the .yas-hiw section's own small/large breakpoint. Always left-justified. */
.channel-strip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 28px;
}
.channel-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
@media (min-width: 821px) {
  .channel-strip {
    flex-direction: row;
    align-items: center;
  }
}
.channel-label {
  color: var(--text-heading);
  font-weight: 600;
  font-size: 0.9rem;
  margin-right: 4px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-heading);
  box-shadow: 0 2px 6px rgba(15,26,46,0.04);
}
.chip svg { width: 16px; height: 16px; stroke: #A79BF0; }

/* ---------- Frame 2: Define the concierge ---------- */
.flash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 16px;
}

.flash-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 24px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  box-shadow: 0 2px 10px rgba(15,26,46,0.04);
}
.flash-card.in-view {
  opacity: 1;
  transform: translateY(0);
}
.flash-card .num {
  font-size: 0.8rem;
  color: var(--purple);
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
}
.flash-card h3 {
  color: var(--text-heading);
  font-size: 1.15rem;
  margin-bottom: 8px;
  font-weight: 600;
}
.flash-card p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* ---------- Buzzword marquee ---------- */
.marquee-wrap {
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 20px 0;
  background: var(--bg);
}
.marquee-track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee-track span {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0 13px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 26px;
}
.marquee-track span::after {
  content: '\2022';
  color: var(--purple);
  opacity: 0.7;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Frame 3: Quote + where it lives ---------- */
.quote-block {
  max-width: 780px;
  margin: 0 auto 56px;
  text-align: center;
}
.quote-block blockquote {
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  color: var(--text-heading);
  font-weight: 500;
  line-height: 1.5;
  font-style: italic;
  margin-bottom: 18px;
}
.quote-block cite {
  font-style: normal;
  color: #F2C14E;
  font-size: 0.9rem;
  font-weight: 600;
}

/* ── Impact section (Every Visitor Is a Lead) ──────────────────────
   Scoped under .yas-impact so it can't touch the rest of the site.
   Rows are authored as weakness/opportunity PAIRS, so the two-column
   desktop grid collapses into vertically paired rows on small screens. */
.yas-impact{--ink:#0F1A2E;--panel:#0F1A2E;--purple:#A79BF0;--amber:#F2C14E;--muted:#0F1A2E;--body:#0F1A2E;font-family:Manrope,system-ui,-apple-system,sans-serif;background:var(--bg);color:#fff;-webkit-font-smoothing:antialiased}
.yas-impact *,.yas-impact *::before,.yas-impact *::after{box-sizing:border-box}
/* Matches .container's box model (max-width:1180/padding:0 32px) so this section's
   left edge lines up with every other section. */
.yas-impact .wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.yas-impact h2{margin:0;font-weight:600;font-size:clamp(1.8rem,3.9vw,3.5rem);line-height:1.04;letter-spacing:-.01em;text-wrap:pretty;max-width:760px;color:var(--ink)}
.yas-impact .lede{margin:20px 0 0;font-weight:400;font-size:1.05rem;line-height:1.6;color:var(--body);max-width:900px;text-wrap:pretty}
@media(min-width:1024px){.yas-impact .lede{max-width:none;white-space:nowrap}}
/* .yas-impact redeclares --amber to a local gold (#FBBF24) for its own stat numbers,
   which shadows the site-wide --amber (#F59E0B) the .section-tag class relies on —
   pin this tag to the same orange used by every other section's eyebrow, and center it
   like the rest of this section. */
.yas-impact .section-tag{color:#F2C14E}

/* sticky stack: the header pins to the top of the viewport (clearing the
   fixed nav) the instant the section arrives, and holds there until the
   eight cards below have scrolled fully past. Each card is itself sticky,
   catching 10px lower and one z-index higher than the last, so a sliver of
   every collected card stays visible while the stack converges on the
   navy payoff card. CSS position:sticky only, no JS. */
.yas-impact .impact-head{position:sticky;top:72px;z-index:20;background:var(--bg);padding:14px 0 10px}
.yas-impact .impact-head::before{content:"";position:absolute;top:0;left:50%;width:100vw;height:100%;margin-left:-50vw;background:var(--bg);z-index:-1}
.yas-impact .impact-head .section-tag{margin:0}
.yas-impact .impact-head h2{margin:8px 0 0;max-width:none}
.yas-impact .impact-pin{position:relative;margin-top:16px}
.yas-impact .lede{margin-top:8px}
.yas-impact .impact-card{position:sticky;min-height:112px;border-radius:20px;padding:26px 36px;margin-bottom:10px;display:grid;grid-template-columns:1fr 1.15fr;gap:14px;align-items:start;box-shadow:0 12px 28px rgba(15,23,42,.08)}
.yas-impact .impact-card--1,.yas-impact .impact-card--3,.yas-impact .impact-card--5,.yas-impact .impact-card--7{background:var(--card-bg)}
.yas-impact .impact-card--2,.yas-impact .impact-card--4,.yas-impact .impact-card--6,.yas-impact .impact-card--8{background:var(--bg-alt)}
.yas-impact .impact-card--1{top:200px;z-index:1}
.yas-impact .impact-card--2{top:210px;z-index:2}
.yas-impact .impact-card--3{top:220px;z-index:3}
.yas-impact .impact-card--4{top:230px;z-index:4}
.yas-impact .impact-card--5{top:240px;z-index:5}
.yas-impact .impact-card--6{top:250px;z-index:6}
.yas-impact .impact-card--7{top:260px;z-index:7}
.yas-impact .impact-card--8{top:270px;z-index:8}
.yas-impact .impact-card--9{top:280px;z-index:9}
.yas-impact .impact-legend{display:none}
.yas-impact .impact-card--tagline{background:var(--panel);box-shadow:0 24px 64px rgba(15,23,42,.35);display:flex;align-items:center;justify-content:center;min-height:112px;padding:20px 36px;text-align:center}
.yas-impact .impact-tagline{margin:0;font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:800;letter-spacing:-.01em;color:#fff;line-height:1.15;text-wrap:pretty}
.yas-impact .impact-side{display:block;margin-bottom:6px;font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.yas-impact .impact-side--opp{color:var(--purple)}
.yas-impact .impact-weak{margin:0;font-size:1.15rem;font-weight:500;line-height:1.45;color:var(--body);text-wrap:pretty}
.yas-impact .impact-opp{margin:0;font-size:1.15rem;font-weight:700;line-height:1.35;color:var(--ink);text-wrap:pretty}
.yas-impact .impact-weak b,.yas-impact .impact-opp b{font-weight:800;color:var(--ink)}
.yas-impact .impact-runway{height:60px}
@media (max-width:900px){
.yas-impact .impact-head{top:63px}
.yas-impact .impact-card{grid-template-columns:1fr;gap:10px;padding:18px 20px}
.yas-impact .impact-card .impact-side{display:none}
.yas-impact .impact-weak::before{content:"↓ ";color:#DC2626;font-weight:800}
.yas-impact .impact-opp::before{content:"↑ ";color:var(--purple);font-weight:800}
.yas-impact .impact-card--tagline{min-height:180px;padding:26px 24px}
}

/* stats */
.yas-impact .stats-head{position:relative;margin-top:64px;padding-top:32px;font-weight:700;font-size:18px;letter-spacing:.16em;text-transform:uppercase;color:#F2C14E}
.yas-impact .stats-head::before{content:"";position:absolute;top:0;left:50%;width:100vw;margin-left:-50vw;border-top:1px solid rgba(15,26,46,0.09)}
.yas-impact .stats{margin-top:28px;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border)}
.yas-impact .stat{background:var(--bg);padding:8px 28px}
.yas-impact .stats .stat:first-child{padding-left:0}
.yas-impact .stats .stat:last-child{padding-right:0}
.yas-impact .stat b{display:block;font-weight:800;font-size:76px;line-height:1;letter-spacing:-.04em;color:#F2C14E}
.yas-impact .stat p{margin:14px 0 0;font-weight:600;font-size:0.95rem;line-height:1.4;color:var(--body);text-wrap:pretty}

/* cta */
.yas-impact .cta{margin-top:56px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.yas-impact .cta a{display:inline-flex;align-items:center;background:#F2C14E;color:var(--ink);font-weight:800;font-size:17px;padding:16px 30px;border-radius:10px;text-decoration:none;transition:background .15s ease}
.yas-impact .cta a:hover,.yas-impact .cta a:focus-visible{background:var(--amber)}
.yas-impact .cta span{font-weight:500;font-size:16px;color:var(--muted)}

@media (max-width:1024px){
.yas-impact .stats{grid-template-columns:repeat(2,1fr)}
.yas-impact .stat{padding:24px}
.yas-impact .stats .stat:nth-child(odd){padding-left:0}
.yas-impact .stats .stat:nth-child(even){padding-right:0}
.yas-impact .stat b{font-size:60px}
}

/* stacked: each opportunity sits directly under its weakness */
@media (max-width:900px){
.yas-impact .compare{grid-template-columns:1fr;gap:0}
.yas-impact .head--weak,.yas-impact .head--opp{display:none}
.yas-impact .head--stack{display:flex;background:var(--bg-alt);padding:0 24px 18px}
.yas-impact .row{padding:18px 24px;min-height:0}
.yas-impact .row--opp{border-bottom:10px solid var(--bg-alt);border-radius:0 0 14px 14px}
.yas-impact .row--weak{border-radius:14px 14px 0 0}
.yas-impact .compare>.row:nth-last-child(2){border-bottom:0}
.yas-impact .compare>.row:nth-last-child(-n+3){padding-bottom:18px}
.yas-impact .seam{display:none}
.yas-impact .compare{border-radius:14px;background:transparent}
}
@media (max-width:760px){
.yas-impact .stats{grid-template-columns:1fr}
.yas-impact .stat{padding:22px 0}
}

/* ---------- Pricing ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 280px));
  gap: 24px;
  max-width: 900px;
  margin: 0;
  justify-content: start;
  align-items: stretch;
}
.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 28px;
  text-align: left;
  box-shadow: 0 2px 10px rgba(15,26,46,0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(15,26,46,0.08);
}
.pricing-card.featured {
  border: 2px solid var(--purple);
  box-shadow: 0 14px 34px rgba(91,63,168,0.16);
}
.pricing-card.featured:hover {
  box-shadow: 0 18px 40px rgba(91,63,168,0.22);
}
.pricing-card-badge {
  align-self: flex-start;
  background: var(--purple);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.pricing-card h4 { color: var(--text-heading); font-size: 1.2rem; margin-bottom: 8px; font-weight: 700; }
.pricing-card .pricing-desc { color: var(--text-muted); font-size: 0.95rem; line-height: 1.55; margin-bottom: 20px; }
.pricing-price {
  padding: 16px 0;
  margin-bottom: 20px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.pricing-price-amount { color: var(--text-heading); font-size: 1.15rem; font-weight: 700; }
.pricing-features {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  flex: 1;
}
.pricing-features li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  font-size: 0.95rem;
  color: var(--text-body);
  line-height: 1.4;
}
.pricing-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--purple);
  font-weight: 800;
}
.pricing-card-cta {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: auto;
}
.pricing-cta { margin-top: 28px; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 760px; }
.faq-item {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 12px;
  padding: 4px 22px;
}
.faq-item summary {
  padding: 16px 0;
  cursor: pointer;
  font-weight: 600;
  color: var(--text-heading);
  list-style: none;
  position: relative;
  padding-right: 30px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 16px;
  color: var(--purple);
  font-weight: 700;
  font-size: 1.2rem;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; padding-bottom: 16px; }
/* Same treatment as the "chat's fastest" link in the FAQ section-head above:
   bold, gold/orange, border-bottom underline. */
.faq-link {
  color: #F2C14E;
  text-decoration: none;
  border-bottom: 2px solid rgba(242, 193, 78, 0.5);
  padding-bottom: 2px;
  font-weight: 700;
}

/* ---------- Stats strip ---------- */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
  text-align: center;
}
.stat-item .stat-num {
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 700;
  background: linear-gradient(90deg, #A79BF0, #F2C14E);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-item .stat-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 6px;
}

/* ---------- Final CTA ---------- */
.final-cta {
  background: radial-gradient(ellipse at 50% 0%, rgba(91,63,168,0.12), transparent 60%);
}
/* Same oval pill treatment as the pricing cards (.pr-pill), scaled up to
   carry a full line of copy and straddling the footer's top border the way
   a term badge straddles a card's border. Lavender matches the Book a Demo
   button (.btn-primary). */
.final-cta-pill {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  /* Scales down with the viewport instead of wrapping, floor and ceiling keep
     it from ever getting unreadably small or larger than the desktop size. */
  font-size: clamp(0.55rem, 2.4vw, 0.95rem);
  font-weight: 600;
  padding: 10px clamp(10px, 3vw, 22px);
  border-radius: 999px;
  background: #A79BF0;
  color: #FBFBFD;
  box-shadow: 0 8px 24px rgba(167,155,240,0.35);
}
.final-cta h2 {
  font-size: clamp(1.8rem, 3.9vw, 3.5rem);
  color: var(--text-heading);
  font-weight: 600;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
  max-width: 640px;
}
.final-cta p {
  color: var(--text-body);
  font-size: 1.05rem;
  margin-bottom: 30px;
  max-width: 560px;
}

/* ---------- Footer ---------- */
footer {
  position: relative;
  border-top: 1px solid var(--border);
  padding: 40px 0 24px;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.footer-inner .logo { color: var(--text-heading); font-weight: 700; }
.footer-inner .logo span { color: #A79BF0; }
.footer-right { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.footer-links { display: flex; align-items: center; gap: 20px; font-size: 0.8rem; color: var(--text-muted); }
.footer-links a:hover { color: var(--navy); }
.footer-copy { font-size: 0.8rem; color: var(--text-muted); opacity: 0.7; text-align: center; }

/* ---------- Our Work page ---------- */
.work-header { padding: 150px 0 56px; text-align: center; }
.work-header .eyebrow { margin-bottom: 20px; }
.work-header h1 { color: var(--text-heading); font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 800; margin-bottom: 14px; letter-spacing: -0.02em; }
.work-header p { color: var(--text-body); font-size: 1.05rem; max-width: 560px; margin: 0 auto; }

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  padding-bottom: 90px;
}
.work-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease;
  box-shadow: 0 2px 12px rgba(15,26,46,0.05);
}
.work-card:hover { transform: translateY(-6px); border-color: rgba(91,63,168,0.4); }
.work-card-visual {
  height: 200px;
  background: linear-gradient(135deg, rgba(91,63,168,0.28), rgba(242,193,78,0.18));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.1rem;
  color: var(--text-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.work-card-body { padding: 24px; }
.work-card-tag {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #F2C14E;
  font-weight: 700;
  margin-bottom: 10px;
}
.work-card h3 { color: var(--text-heading); font-size: 1.2rem; margin-bottom: 8px; font-weight: 600; }
.work-card p { color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; margin-bottom: 14px; }
.work-card .work-stats { display: flex; gap: 20px; }
.work-card .work-stats div { font-size: 0.82rem; color: var(--text-muted); }
.work-card .work-stats strong { display: block; color: var(--text-heading); font-size: 1.1rem; }

.work-card.placeholder { opacity: 0.6; }
.work-card.placeholder .work-card-visual { background: var(--bg-alt); color: var(--text-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .nav-links { display: none; }
  .flash-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .nav { padding: 14px 20px; }
  .flash-grid { grid-template-columns: 1fr; }
  section { padding: 48px 0; }
}

/* ===== Narrative pane (Core Features) ===== */
.np{display:grid;grid-template-columns:minmax(280px,0.82fr) 1.18fr;gap:clamp(32px,5vw,72px);align-items:center;margin-top:8px}
.np-steps{display:flex;flex-direction:column}
.np-step{display:grid;grid-template-columns:2px 1fr;gap:26px;align-items:stretch;padding:14px 0;background:none;border:0;font-family:inherit;text-align:left;cursor:pointer;color:inherit}
.np-rail{position:relative;background:var(--border)}
.np-rail i{position:absolute;top:0;left:0;right:0;height:0;background:linear-gradient(180deg,#A79BF0,#F2C14E)}
.np-step-text{display:block}
.np-step-head{display:flex;align-items:baseline;gap:12px}
.np-num{font-size:0.78rem;font-weight:800;letter-spacing:0.14em;color:var(--text-muted)}
.np-label{font-size:clamp(1.4rem,2.4vw,2rem);font-weight:700;letter-spacing:-0.02em;line-height:1.1;color:var(--text-muted);transition:color .35s ease}
.np-step.is-active .np-label{color:var(--text-heading)}
/* Reserved at natural (auto) height from the very first render, for every step,
   regardless of shown state — this is what keeps the column height constant as
   steps reveal, instead of animating height (which caused page jump) or forcing
   a shared fixed height (which left dead space under shorter copy). Only opacity
   transitions; a step's copy stays revealed (.is-shown) once it has appeared, and
   is cleared only when a new business-example cycle begins (see script.js). */
.np-copy{display:block;opacity:0;margin-top:8px;font-size:1.02rem;line-height:1.6;color:var(--text-body);max-width:34ch;text-wrap:pretty;transition:opacity .35s ease}
.np-step.is-shown .np-copy{opacity:1}
.np-cat-label{font-size:0.78rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:18px}
.np-cat-name{display:inline-block;color:#6B5BD6;font-weight:800;transition:opacity .35s ease,transform .35s ease}
.np-cat-name.swap{opacity:0;transform:translateY(4px)}
.np-panels{position:relative;height:clamp(420px,46vw,520px)}
.np-panel{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;background:var(--card-bg);border:1px solid var(--border);border-radius:20px;box-shadow:0 10px 30px rgba(15,26,46,0.06);opacity:0;transform:translateY(14px) scale(0.985);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.np-panel.is-active{opacity:1;transform:none}
.np-panel[data-panel="0"]{z-index:4}.np-panel[data-panel="1"]{z-index:3}.np-panel[data-panel="2"]{z-index:2}.np-panel[data-panel="3"]{z-index:1}
.np-meta{font-size:0.78rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-muted)}
.np-foot{padding:18px 28px;border-top:1px solid var(--border);font-size:0.95rem;color:var(--text-body)}
.np-cat{display:none}
.np-bar{display:flex;align-items:center;gap:10px;padding:18px 24px;border-bottom:1px solid var(--border)}
.np-live{width:8px;height:8px;border-radius:999px;background:#22C55E}
.np-thread-wrap{flex:1;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 40px);mask-image:linear-gradient(180deg,transparent 0,#000 40px)}
.np-thread.is-active{display:flex;flex-direction:column;gap:12px;padding:20px 24px}
.np-msg{max-width:78%;padding:12px 16px;font-size:0.95rem;line-height:1.5;opacity:0;animation:npPop .45s ease forwards;animation-delay:var(--d)}
.np-in{align-self:flex-start;background:var(--bg);border:1px solid var(--border);border-radius:14px 14px 14px 4px;color:var(--text-heading)}
.np-out{align-self:flex-end;background:var(--lavender);border:1px solid rgba(107,91,214,0.30);border-radius:14px 14px 4px 14px;color:#0F1A2E}
.np-typing{align-self:flex-start;display:flex;gap:5px;padding:14px 16px;background:var(--bg);border:1px solid var(--border);border-radius:14px 14px 14px 4px;opacity:0;animation:npPop .45s ease forwards;animation-delay:var(--d)}
.np-typing i{width:6px;height:6px;border-radius:999px;background:var(--purple);animation:npDot 1.2s infinite}
.np-typing i:nth-child(2){animation-delay:.15s}.np-typing i:nth-child(3){animation-delay:.3s}
@keyframes npPop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes npDot{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-4px);opacity:1}}
.np-record.is-active,.np-cal.is-active,.np-crm.is-active{display:flex;flex-direction:column;flex:1;min-height:0}
.np-record-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:22px 28px;border-bottom:1px solid var(--border)}
.np-who{font-size:1.3rem;font-weight:800;letter-spacing:-0.02em;color:var(--text-heading)}
.np-src{font-size:0.9rem;color:var(--text-muted);margin-top:2px}
.np-score-wrap{text-align:right}
.np-score{font-size:2.5rem;font-weight:800;line-height:1;letter-spacing:-0.02em;background:linear-gradient(90deg,#A79BF0,#F2C14E);-webkit-background-clip:text;background-clip:text;color:transparent}
.np-score-wrap .np-meta{font-size:0.72rem;margin-top:4px}
.np-fields{flex:1;display:flex;flex-direction:column;justify-content:center}
.np-field{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 28px;border-bottom:1px solid var(--border);opacity:0}
.np-field:last-child{border-bottom:0}
.np-val{font-size:1.02rem;font-weight:600;color:var(--text-heading)}
.np-cal-head{padding:22px 28px;border-bottom:1px solid var(--border)}
.np-cal-grid{flex:1;display:grid;grid-template-columns:88px 1fr;min-height:0}
.np-times{display:flex;flex-direction:column;border-right:1px solid var(--border)}
.np-times div{flex:1;padding:14px 16px;font-size:0.9rem;color:var(--text-muted);border-bottom:1px solid var(--border)}
.np-times div:last-child{border-bottom:0}
.np-slots{display:flex;flex-direction:column}
.np-slot{flex:1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;font-size:1rem;color:var(--text-body);border-bottom:1px solid var(--border)}
.np-slot:last-child{border-bottom:0}
.np-slot-open{color:var(--text-muted)}
.np-slot-booked{background:rgba(167,155,240,0.20);box-shadow:inset 3px 0 0 #A79BF0;font-weight:700;color:var(--text-heading);animation:npSlotPulse 1.4s ease-out 2}
@keyframes npSlotPulse{0%{box-shadow:inset 3px 0 0 #A79BF0,0 0 0 0 rgba(167,155,240,.4)}70%{box-shadow:inset 3px 0 0 #A79BF0,0 0 0 12px rgba(167,155,240,0)}100%{box-shadow:inset 3px 0 0 #A79BF0,0 0 0 0 rgba(167,155,240,0)}}
.np-badge{font-size:0.72rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--purple);white-space:nowrap}
.np-crm-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 28px;border-bottom:1px solid var(--border)}
.np-chip{font-size:0.72rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--purple);background:rgba(91,63,168,0.08);border:1px solid rgba(91,63,168,0.35);border-radius:999px;padding:6px 14px;white-space:nowrap}
.np-crm-grid{display:grid;grid-template-columns:1fr 1fr}
.np-cell{padding:16px 28px;border-bottom:1px solid var(--border);opacity:0}
.np-cell:nth-child(odd){border-right:1px solid var(--border)}
.np-cell .np-meta{font-size:0.72rem}
.np-cell .np-val{margin-top:5px;font-size:0.98rem}
/* field/cell "populating live" fade-in, shared by the Qualify and Record visuals */
.np-record.is-active .np-field,
.np-crm.is-active .np-cell{animation:npPop .7s ease forwards}
.np-record.is-active .np-field:nth-child(1),
.np-crm.is-active .np-cell:nth-child(1){animation-delay:.28s}
.np-record.is-active .np-field:nth-child(2),
.np-crm.is-active .np-cell:nth-child(2){animation-delay:.84s}
.np-record.is-active .np-field:nth-child(3),
.np-crm.is-active .np-cell:nth-child(3){animation-delay:1.4s}
.np-crm.is-active .np-cell:nth-child(4){animation-delay:1.96s}
.np-quote-wrap{flex:1;display:flex;flex-direction:column;gap:10px;padding:20px 28px;min-height:0}
.np-quote{border-left:2px solid rgba(91,63,168,0.35);padding-left:16px;font-size:0.98rem;line-height:1.55;color:var(--text-body);font-style:normal}
.np-note{max-width:780px;margin:44px auto 0;text-align:center;font-size:1.05rem;line-height:1.6;color:var(--text-body);text-wrap:pretty}
@media (max-width:820px){
  .np{grid-template-columns:1fr;gap:32px}
  .np-panels{height:clamp(440px,86vw,540px)}
  .np-copy,.np-step.is-active .np-copy{max-width:none}
  /* On phones all four descriptions stay visible the whole time, including
     across business-example cycles. On desktop they fade in as the highlight
     reaches each step (.np-step.is-shown) and reset each cycle, which on a
     narrow screen reads as text appearing and vanishing under a moving bar.
     The JS still toggles is-shown; this just makes it visually inert here. */
  .np-copy,
  .np-step.is-shown .np-copy{opacity:1;transition:none}
}
@media (max-width:560px){
  /* Tighter on phones so the top of the animated panel is closer to the fold and the
     four step labels read as one group rather than four separate blocks. */
  .np-step{gap:18px;padding:6px 0}
  .np-copy{margin-top:6px;font-size:0.95rem;line-height:1.45}
  .np-cat-label{margin-bottom:12px}
  .np{gap:24px}
  .np-record-head,.np-crm-head,.np-field,.np-cell,.np-foot,.np-quote-wrap,.np-cal-head{padding-left:20px;padding-right:20px}
  .np-crm-grid{grid-template-columns:1fr}
  .np-cell:nth-child(odd){border-right:0}
  /* Below this width the CRM/Record panel's table drops to one column (4 stacked
     rows instead of 2x2) and picks up extra wrapped lines in its "Conversation
     copy" quote, so the shared panel height from the 820px breakpoint above is no
     longer tall enough — its bottom line (the "Full transcript attached..." foot)
     was getting clipped by .np-panel's overflow:hidden. Sized to fit that panel's
     content down to a 320px-wide phone; the other three panels (chat/qualify/
     schedule) just get extra breathing room at the bottom, which is harmless. */
  .np-panels{height:620px}
}

/* ---------- Hairline section rules ---------- */
:root{--rule:rgba(15,26,46,0.07);--rule-strong:rgba(15,26,46,0.12)}
body{background:#FBFBFD}
section + section{border-top:1px solid var(--rule)}
.marquee-wrap + section{border-top:0}
footer{border-top:1px solid var(--rule-strong)}

/* ---------- How It Works (yas-hiw) ----------
   Namespaced section from the design handoff, ported as-is. Colors mapped to the
   site's existing tokens instead of redeclaring :root (--navy/--purple/--bg/--text-body
   are the same hex values as the handoff's --yas-navy/--yas-purple/--yas-lav/--yas-body).
   Do not change copy, colors, sizes, spacing, or the two breakpoints below. */
.yas-hiw{background:var(--bg);font-family:Manrope,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
.yas-hiw *{box-sizing:border-box}
/* Matches .container's box model exactly (max-width:1180/padding:0 32px) so this
   section's left edge lines up with every other section instead of its own
   narrower, independently-centered column. */
.yas-hiw__in{max-width:1180px;margin:0 auto;padding:0 32px}
.yas-hiw__title{margin:0;font-size:clamp(1.8rem,3.9vw,3.5rem);line-height:1.08;font-weight:600;letter-spacing:-.01em;color:var(--navy)}
.yas-hiw__lede{margin:20px 0 0;font-size:1.05rem;line-height:1.6;color:var(--text-body);max-width:56ch;text-wrap:pretty}
.yas-hiw__spine{position:relative;margin:76px 0 0;padding-left:96px}
.yas-hiw__spine::before{content:"";position:absolute;left:27px;top:8px;bottom:8px;width:2px;background:rgba(91,63,168,.22)}
.yas-hiw__fill{position:absolute;left:27px;top:8px;width:2px;height:0;background:linear-gradient(180deg,rgba(91,63,168,.55),var(--purple));box-shadow:0 0 10px rgba(91,63,168,.35)}
.yas-hiw__step{position:relative;padding:0 0 52px}
.yas-hiw__step:last-child{padding-bottom:0}
.yas-hiw__dot{position:absolute;left:-96px;top:-2px;width:56px;height:56px;border-radius:50%;background:#fff;border:2px solid rgba(91,63,168,.32);display:grid;place-items:center;font-size:17px;font-weight:800;color:#0F1A2E;font-variant-numeric:tabular-nums;transition:background .45s ease,border-color .45s ease,color .45s ease,box-shadow .45s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.yas-hiw__dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--purple);opacity:0;transform:scale(1)}
.yas-hiw__step.is-active .yas-hiw__dot{background:#A79BF0;border-color:#A79BF0;color:#0F1A2E;box-shadow:0 0 0 6px rgba(167,155,240,.28);transform:scale(1.06)}
.yas-hiw__step.is-past .yas-hiw__dot{background:#fff;border-color:rgba(91,63,168,.5);color:#0F1A2E}
.yas-hiw__step h3,.yas-hiw__step p{transition:color .45s ease,opacity .45s ease}
.yas-hiw__step:not(.is-active) h3{color:#0F1A2E}
.yas-hiw__step:not(.is-active) p{opacity:.62}
.yas-hiw__step h3{margin:0;font-size:25px;line-height:1.25;font-weight:700;letter-spacing:-.01em;color:var(--navy)}
.yas-hiw__step p{margin:12px 0 0;font-size:0.95rem;line-height:1.6;color:var(--text-body);max-width:58ch;text-wrap:pretty}
@media(max-width:820px){.yas-hiw__spine{padding-left:64px;margin-top:54px}.yas-hiw__spine::before{left:19px}.yas-hiw__dot{left:-64px;width:40px;height:40px;font-size:14px}.yas-hiw__step h3{font-size:22px}.yas-hiw__step{padding-bottom:40px}}
@media(prefers-reduced-motion:no-preference){
.yas-hiw--anim .yas-hiw__step{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.yas-hiw--anim .yas-hiw__step.is-in{opacity:1;transform:none}
.yas-hiw--anim .yas-hiw__step.is-active .yas-hiw__dot::after{animation:yas-ping 1.1s cubic-bezier(.22,1,.36,1) 1}
@keyframes yas-ping{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(1.8)}}
}

/* Works-across chip strip, relocated to the foot of this section */
.yas-hiw .channel-strip{margin:64px 0 0;padding-left:96px}
@media(max-width:820px){.yas-hiw .channel-strip{margin-top:48px;padding-left:0;align-items:center;text-align:center}.yas-hiw .channel-strip .channel-chips{justify-content:center}}

/* ---------- Who It's For ----------
   Namespaced section ported from the design handoff. The intro block (eyebrow/title/
   lede) is left-justified instead of the handoff's centered version, to match every
   other section's left edge — the card grid itself is left as designed. */
.yas-whofor{background:#FBFBFD;font-family:Manrope,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
.yas-whofor *{box-sizing:border-box}
.yas-whofor__inner{max-width:1180px;margin:0 auto;padding:0 32px}
.yas-whofor__intro{max-width:640px}
.yas-whofor__eyebrow{font-size:clamp(0.95rem,1.6vw,1.15rem);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#F2C14E}
.yas-whofor__title{margin:14px 0 0;font-size:clamp(1.8rem,3.9vw,3.5rem);font-weight:600;line-height:1.16;letter-spacing:-0.01em;color:#0F1A2E;text-wrap:pretty}
.yas-whofor__lede{margin:16px 0 0;font-size:1.05rem;line-height:1.6;color:#0F1A2E;text-wrap:pretty}
.yas-whofor__grid{margin-top:44px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.yas-card{display:flex;flex-direction:column;background:#EFECFE;border:1px solid rgba(15,26,46,0.09);border-radius:16px;overflow:hidden;box-shadow:0 2px 10px rgba(15,26,46,0.04);transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.yas-card:hover{border-color:rgba(91,63,168,0.40);transform:translateY(-4px);box-shadow:0 12px 28px rgba(15,26,46,0.09)}
.yas-card__rule{border-top:4px solid #0F1A2E}
.yas-card__bandwrap{padding:24px 26px 0}
.yas-card__band{display:flex;align-items:center;gap:14px;background:#F2C14E;border-radius:12px;padding:14px 18px}
.yas-card__icon{display:flex;flex:none;width:28px;height:28px;align-items:center;justify-content:center;color:#0F1A2E}
.yas-card__label{margin:0;font-size:1rem;font-weight:800;letter-spacing:0.07em;text-transform:uppercase;color:#0F1A2E;line-height:1.2;text-wrap:balance}
.yas-card__body{flex:1;padding:24px 26px 28px}
.yas-card__lead{margin:0;font-size:0.95rem;line-height:1.55;color:#0F1A2E;font-weight:600}
.yas-card__sub{margin:8px 0 0;font-size:0.95rem;line-height:1.55;color:#0F1A2E}
.yas-whofor a{color:#0F1A2E}
.yas-whofor a:hover{color:#0F1A2E}
@media (max-width:900px){.yas-whofor__grid{grid-template-columns:1fr}}
/* ==========================================================================
   Pricing page. All classes prefixed pr- to avoid collisions.
   Append to the end of styles.css.
   ========================================================================== */

.pr-header {
  padding-top: 130px;
  padding-bottom: 40px;
}

.pr-header h1 {
  margin: 0 0 16px;
}
/* .highlight is white-space: nowrap sitewide, which is right for the one-word
   homepage uses ("Secretary"). "Professionally Managed." at h1 size is wider
   than a 390px phone, and the nowrap pushed the layout viewport to 407px.
   The gradient still spans the whole inline-block when it wraps. */
.pr-header h1 .highlight {
  white-space: normal;
}

.pr-tagline {
  max-width: 640px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-heading);
}

.pr-lede {
  max-width: 620px;
  color: var(--text-body);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.pr-config {
  max-width: 760px;
}

.pr-step {
  margin-bottom: 32px;
}

.pr-step-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 12px;
}

/* ---------- Channels ---------- */

.pr-channel {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  margin-bottom: 12px;
}

.pr-channel:hover {
  border-color: #9484ED;
}

.pr-channel.pr-on {
  border-color: #9484ED;
  box-shadow: 0 0 0 1px #9484ED;
}

.pr-channel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.pr-channel-name {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-heading);
}

.pr-pill {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: #9484ED;
  color: #fff;
  white-space: nowrap;
}

/* Straddles the card's top border, same treatment as .pr-term-badge, but
   pinned to the right edge instead of the left. */
.pr-channel-pill {
  position: absolute;
  top: 0;
  right: 20px;
  transform: translateY(-50%);
}

.pr-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #9484ED;
  color: #fff;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pr-channel:not(.pr-on) .pr-check {
  background: transparent;
  color: transparent;
  border: 1px solid var(--gray-light);
}

.pr-channel-sub {
  font-size: 0.9375rem;
  color: var(--text-body);
  margin: 6px 0 16px;
}

.pr-included {
  list-style: none;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px 20px;
}

.pr-included li {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-body);
  padding-left: 24px;
  position: relative;
}

.pr-included li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  color: #A79BF0;
  font-weight: 800;
}

.pr-soon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.pr-soon {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  cursor: default;
}

.pr-soon-name {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-heading);
}

.pr-soon-tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--purple-dim);
  background: var(--lavender);
  border-radius: 999px;
  padding: 3px 9px;
  margin-top: 8px;
}

.pr-note {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 12px 0 0;
}

.pr-error {
  font-size: 0.875rem;
  color: #B91C1C;
  margin: 8px 0 0;
  visibility: hidden;
}

.pr-error.pr-show {
  visibility: visible;
}

/* Shown in the Monthly slot until a term is picked: same slot, but plainly not
   a price. */
.pr-total-hint {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #6B5BD6;
}

/* ---------- Terms ---------- */

.pr-term-grid {
  margin-top: 6px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.pr-term {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pr-term:hover {
  border-color: #9484ED;
}

.pr-term.pr-on {
  border-color: #9484ED;
  box-shadow: 0 0 0 1px #9484ED;
}

.pr-term-check {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 20px;
  height: 20px;
  font-size: 0.7rem;
}

.pr-term:not(.pr-on) .pr-term-check {
  background: transparent;
  color: transparent;
  border: 1px solid var(--gray-light);
}

.pr-term-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
}
/* Straddles the card's top border. Absolutely positioned so it costs no height
   and the three cards stay identical. left matches the card's 20px padding, so
   it lines up with the text below it rather than floating centered. */
.pr-term-badge {
  position: absolute;
  top: 0;
  left: 20px;
  transform: translateY(-50%);
  background: #A79BF0;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
/* Quieter variant for the cards that are not the headline offer. */
.pr-term-badge--soft {
  background: #EFECFE;
  color: #9484ED;
}

.pr-term-price {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-heading);
  margin-top: 4px;
  line-height: 1.1;
}

.pr-term-price span {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
}

.pr-term-save {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--purple-dim);
  margin-top: 4px;
}

/* ---------- Add-on ---------- */

.pr-addon {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 16px;
}

.pr-addon:hover {
  border-color: var(--purple);
}

.pr-addon.pr-on {
  border-color: var(--purple);
  box-shadow: 0 0 0 1px var(--purple);
}
/* The add-on is a toggle whose only feedback was a border colour, so a stray
   second click turned it off without anyone noticing. It now carries the same
   check indicator as the Website channel card above it. */

.pr-addon-check {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 20px;
  height: 20px;
  font-size: 0.7rem;
}
.pr-addon:not(.pr-on) .pr-addon-check {
  background: transparent;
  color: transparent;
  border: 1px solid var(--gray-light);
}

.pr-addon-name {
  grid-column: 1;
  grid-row: 1;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-heading);
}

.pr-addon-sub {
  grid-column: 1;
  grid-row: 2;
  font-size: 0.875rem;
  color: var(--text-body);
  margin: 4px 0 0;
}

.pr-addon-price {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  justify-self: end;
  text-align: right;
  flex-shrink: 0;
}

.pr-addon-amount {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-heading);
  line-height: 1.1;
}

/* Matches the /mo treatment on the term cards. */
.pr-addon-amount span {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
}

/* ---------- Summary ---------- */

.pr-summary {
  background: var(--bg-alt);
  border-radius: 16px;
  padding: 28px;
  margin-top: 40px;
}

.pr-summary-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 16px;
}

.pr-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-heading);
  padding: 6px 0;
}

/* Group headings inside the order summary (Implementation, Ongoing). Same weight
   as the paid line above them, with room to read as their own block. */
.pr-line-group {
  margin-top: 10px;
}
.pr-line-inc {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.8125rem;
  color: var(--text-muted);
  padding: 3px 0 3px 18px;
}

.pr-empty {
  font-size: 0.9375rem;
  color: var(--text-muted);
  padding: 6px 0;
}

.pr-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
  margin-top: 16px;
  padding-top: 16px;
}

.pr-total-label {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-body);
}

.pr-total {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--text-heading);
  line-height: 1;
}

/* Overrides .pr-total's font-size when the hint is shown; needs the combined
   selector since .pr-total is declared after .pr-total-hint in this file. */
.pr-total.pr-total-hint {
  font-size: 0.9375rem;
}

.pr-sub-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.875rem;
  color: var(--text-body);
  margin-top: 8px;
}
/* Sits directly under the Due today row, where the objection forms. */
.pr-due-note {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.pr-promise {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 16px;
  margin-top: 20px;
  font-size: 0.875rem;
  color: var(--text-body);
  line-height: 1.6;
}

.pr-promise strong {
  color: var(--text-heading);
}

.pr-pay {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 20px;
}

.pr-book {
  text-align: center;
  margin-top: 14px;
}

.pr-book a {
  font-size: 0.875rem;
  color: var(--purple-dim);
  text-decoration: none;
}

.pr-book a:hover {
  text-decoration: underline;
}

/* ---------- Timeline ---------- */

.pr-timeline {
  margin-top: 32px;
  max-width: 820px;
  counter-reset: pr-step;
}

.pr-tl-item {
  counter-increment: pr-step;
  position: relative;
  display: grid;
  grid-template-columns: 48px 168px 1fr;
  align-items: center;
  gap: 20px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 12px;
}

.pr-tl-item::after {
  content: "";
  position: absolute;
  left: 47px;
  top: 100%;
  width: 1px;
  height: 12px;
  background: var(--gray-light);
}

.pr-tl-item:last-child {
  margin-bottom: 0;
}

.pr-tl-item:last-child::after {
  display: none;
}

.pr-tl-item::before {
  content: counter(pr-step);
  grid-column: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--lavender);
  color: var(--purple-dim);
  font-size: 0.875rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pr-tl-when {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-heading);
}

.pr-tl-what {
  font-size: 0.9375rem;
  color: var(--text-body);
  line-height: 1.6;
}

/* ---------- Terms cards ---------- */

.pr-terms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 32px;
}

.pr-term-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
}

.pr-term-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 8px;
}

.pr-term-card p {
  font-size: 0.9375rem;
  color: var(--text-body);
  line-height: 1.65;
  margin: 0;
}

/* ---------- FAQ ---------- */

/* ---------- Closing ---------- */



.pr-close p {
  max-width: 560px;
  margin: 12px 0 0;
  color: var(--text-body);
  font-size: 1.0625rem;
}

.pr-close-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.pr-close-row p {
  max-width: 460px;
  margin: 0;
  text-align: left;
}

.pr-close-row .btn-primary {
  flex-shrink: 0;
}

/* ---------- Homepage teaser block ---------- */

/* ---------- Inline booking panel ---------- */

@media (max-width: 640px) {
  .pr-header {
    padding-top: 104px;
  }
  .pr-tl-item {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .pr-addon {
    grid-template-columns: 1fr;
  }
  .pr-addon-price {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    justify-self: start;
    text-align: left;
    margin-top: 8px;
  }
  .pr-summary {
    padding: 20px;
  }
  .pr-tagline {
    font-size: 1.0625rem;
  }
  .pr-tl-item {
    grid-template-columns: 40px 1fr;
    gap: 0 12px;
    padding: 16px;
  }
  .pr-tl-item::before {
    width: 28px;
    height: 28px;
    grid-row: 1 / 3;
    align-self: center;
  }
  .pr-tl-item::after {
    left: 30px;
  }
  .pr-tl-when {
    grid-column: 2;
    grid-row: 1;
  }
  .pr-tl-what {
    grid-column: 2;
    grid-row: 2;
  }
  .pr-close-row p {
    text-align: center;
  }
}


.pr-chat-link {
  color: #F2C14E;
  text-decoration: none;
  border-bottom: 2px solid rgba(242, 193, 78, .35);
  padding-bottom: 2px;
  font-weight: 700;
}
.pr-chat-link:hover,
.pr-chat-link:focus-visible {
  border-bottom-color: #F2C14E;
}

/* ---------- Thanks page ---------- */
.thanks-cal-wrap {
  max-width: 760px;
}
#thanks-cal {
  height: 700px;
  overflow-y: auto;
  background: #fff;
}
#thanks-cal iframe { height: 100%; }
@media (max-width: 768px) {
  #thanks-cal { height: min(620px, calc(100vh - 160px)); }
}
/* pr-pay is a <button> now rather than a link, so it needs the anchor styling
   that .btn-primary assumes. */
button.pr-pay {
  font-family: inherit;
  border: 0;
  cursor: pointer;
}
button.pr-pay[disabled] { opacity: 0.6; cursor: default; }
.pr-pay-error {
  margin: 8px 0 0;
  font-size: 0.8125rem;
  color: #B42318;
}

/* Staging badge. Renders only on Vercel preview hostnames, never on
   youraisecretary.co, so this can live in main without affecting the live site.
   Bottom LEFT on purpose: the Chatbase widget owns bottom right at 821px+.
   pointer-events:none so it can never intercept a click. */
.staging-badge {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #7C2D12;
  color: #FED7AA;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.staging-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FB923C;
  flex: none;
}
@media (max-width: 480px) {
  .staging-badge { font-size: 0.6875rem; padding: 6px 10px; }
}

/* ---------- Legal pages (/terms-and-privacy) ----------
   One page carrying both documents. Sections use the sitewide 88px
   scroll-margin-top so the fixed nav never covers a heading the footer
   links jump to. */
.legal-header {
  padding: 130px 0 40px;
}
.legal-header h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-heading);
  margin-bottom: 16px;
}
.legal-header h1 .highlight {
  white-space: normal;
}
.legal-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.legal-jump a {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(139, 92, 246, 0.35);
  background: rgba(139, 92, 246, 0.08);
  color: var(--purple-dim);
  font-size: 0.9375rem;
  font-weight: 700;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.legal-jump a:hover {
  background: rgba(139, 92, 246, 0.16);
  border-color: rgba(139, 92, 246, 0.55);
}
.legal-updated {
  margin-top: 20px;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.legal-section {
  scroll-margin-top: 88px;
}
.legal-doc {
  /* Fills the container on desktop and narrows with it. The inner padding
     scales with the viewport so the text never runs to the card edge. */
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 48px clamp(28px, 5vw, 72px) 52px;
}
.legal-doc-head {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.legal-doc-head h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-heading);
}
.legal-doc h3 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 36px 0 14px;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-heading);
  /* Anchored jumps land on a section, not a heading, but keep this in case a
     deep link to a numbered clause is ever added. */
  scroll-margin-top: 96px;
}
.legal-doc h3 span {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--lavender);
  color: var(--purple-dim);
  font-size: 0.8125rem;
  font-weight: 800;
  align-self: center;
}
.legal-doc p {
  margin-bottom: 14px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-body);
}
.legal-doc p:last-child {
  margin-bottom: 0;
}
.legal-doc strong {
  color: var(--text-heading);
  font-weight: 700;
}
.legal-doc a {
  color: var(--purple-dim);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-callout {
  padding: 14px 18px;
  border-left: 3px solid var(--purple);
  background: var(--lavender);
  border-radius: 0 10px 10px 0;
  font-weight: 600;
  color: var(--text-heading) !important;
}
.legal-contact {
  margin-top: 4px;
  padding: 18px 20px;
  border-radius: 12px;
  background: var(--lavender);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-body);
}
.legal-contact-name {
  font-weight: 800;
  color: var(--text-heading);
}

@media (max-width: 820px) {
  .legal-header {
    padding-top: 104px;
  }
  .legal-doc {
    padding: 28px 22px 32px;
    border-radius: 16px;
  }
  .legal-doc h3 {
    margin-top: 30px;
    font-size: 1.0625rem;
  }
  .legal-doc p {
    font-size: 0.9688rem;
  }
}

/* ---------- Message Us panel (/terms-and-privacy) ----------
   Collapsed until asked for, so the page reads as two documents rather than
   as a form with legal text stacked above it. */
.legal-msg {
  max-width: 640px;
}
.legal-msg h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-heading);
  margin-bottom: 10px;
}
.legal-msg-form {
  margin-top: 22px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px clamp(20px, 3vw, 32px) 30px;
}
.legal-msg-row {
  margin-bottom: 18px;
}
.legal-msg-row label {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 7px;
}
.legal-msg-row label .req {
  color: #DC2626;
  font-weight: 700;
}
.legal-msg-row input,
.legal-msg-row textarea {
  width: 100%;
  font-family: var(--font);
  font-size: 1rem;
  color: var(--text-heading);
  background: #FFFFFF;
  border: 1px solid var(--gray-light);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.legal-msg-row textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}
.legal-msg-row input:focus,
.legal-msg-row textarea:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.16);
}

/* Off-screen rather than display:none. Some bots skip hidden fields but fill
   anything that is merely positioned away. */
.legal-msg-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.legal-msg-send {
  margin-top: 4px;
}
.legal-msg-send:disabled {
  opacity: 0.6;
  cursor: default;
}

.legal-msg-status {
  margin-top: 14px;
  font-size: 0.9375rem;
  font-weight: 600;
  min-height: 1.4em;
  color: var(--text-muted);
}
.legal-msg-status.is-ok { color: #15803D; }
.legal-msg-status.is-err { color: #B91C1C; }
.legal-msg-status.is-busy { color: var(--text-muted); }

@media (max-width: 820px) {
  .legal-msg-form {
    padding: 22px 18px 24px;
    border-radius: 14px;
  }
}

/* ============================================================
   Night hero + transparent-to-paper header
   Ported from handoff/hero-block.html (Claude Design).
   Night is the hero only; everything below it stays on paper.
   ============================================================ */

:root {
  --night-navy: #0F1A2E;
  --night-paper: #FBFBFD;
  --night-silver-mist: #F1F2F7;
  --night-silver-line: #E2E5EF;
  --night-body: #C9CFE4;
  --night-lavender: #A79BF0;
  --night-plum: #5B3FA8;
  --night-honey: #F2C14E;
  --night-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}

/* ---- The aura ground. Eleven blooms, stacked in this order on purpose. ---- */
.hero-night {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: block;
  align-items: initial;
  min-height: auto;
  padding: 180px 0 70px;           /* top clears the 76px fixed header; bottom trimmed 50px when the "Live in days" line was added, so the hero keeps its old height */
  background-color: var(--night-navy);
  background-image:
    radial-gradient(30% 40% at 90% 2%,#FBFBFD 0%,rgba(251,251,253,.5) 26%,rgba(251,251,253,0) 62%),
    radial-gradient(44% 50% at 80% 16%,rgba(241,242,247,.6) 0%,rgba(241,242,247,0) 70%),
    radial-gradient(40% 44% at 100% -4%,rgba(91,63,168,.5) 0%,rgba(91,63,168,0) 74%),
    radial-gradient(62% 70% at 78% 44%,rgba(239,236,254,.9) 0%,rgba(167,155,240,.72) 32%,rgba(167,155,240,0) 76%),
    radial-gradient(42% 46% at 24% -2%,rgba(167,155,240,.3) 0%,rgba(167,155,240,0) 72%),
    radial-gradient(34% 40% at 62% 102%,rgba(255,233,163,.26) 0%,rgba(255,233,163,0) 74%),
    radial-gradient(52% 58% at 48% 84%,rgba(221,214,251,.44) 0%,rgba(221,214,251,0) 72%),
    radial-gradient(54% 58% at 12% 110%,#5B3FA8 0%,rgba(91,63,168,.44) 38%,rgba(91,63,168,0) 78%),
    radial-gradient(42% 44% at -2% 92%,#FFE9A3 0%,rgba(242,193,78,.8) 34%,rgba(242,193,78,0) 72%),
    radial-gradient(26% 30% at 34% 112%,rgba(242,193,78,.3) 0%,rgba(242,193,78,0) 76%),
    radial-gradient(60% 46% at 48% 116%,rgba(201,207,228,.3) 0%,rgba(201,207,228,0) 74%);
}
/* The old flat paper cover would paint straight over the ground. */
.hero-night::after { content: none; }

/* ---- Drifting orbs. Translate and scale only: a rotating radial gradient
       reads as a spinning object rather than moving light. ---- */
.hero-night .orb { position: absolute; pointer-events: none; will-change: transform; }
.hero-night .orb-lav {
  right: -8%; top: -26%; width: 52%; height: 124%;
  background-image: radial-gradient(38% 38% at 50% 50%,rgba(239,236,254,.42) 0%,rgba(167,155,240,.26) 44%,rgba(167,155,240,0) 80%);
  animation: orbA 6.5s ease-in-out infinite;
}
.hero-night .orb-honey {
  left: -12%; bottom: -42%; width: 46%; height: 112%;
  background-image: radial-gradient(34% 34% at 50% 50%,rgba(255,233,163,.34) 0%,rgba(242,193,78,.18) 46%,rgba(242,193,78,0) 80%);
  animation: orbB 8s ease-in-out -2s infinite;
}
@keyframes orbA {
  0%,100% { transform: translate(-8%,6%) scale(1); }
  33% { transform: translate(10%,-10%) scale(1.14); }
  66% { transform: translate(6%,12%) scale(.94); }
}
@keyframes orbB {
  0%,100% { transform: translate(12%,-6%) scale(1.06); }
  30% { transform: translate(-10%,8%) scale(.92); }
  70% { transform: translate(-4%,-12%) scale(1.16); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-night .orb { animation: none !important; }
}

/* ---- Overlays, in order: scrim carries the headline contrast. ---- */
.hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(104deg,rgba(15,26,46,.92) 0%,rgba(15,26,46,.8) 34%,rgba(15,26,46,.38) 60%,rgba(15,26,46,0) 86%);
}
.hero-scan {
  position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 1px,transparent 1px 3px);
}
.hero-grain {
  position: absolute; inset: -10%; pointer-events: none;
  background-image: var(--night-grain);
  opacity: .34;
  mix-blend-mode: overlay;
}

/* ---- Type on Night ---- */
.hero-night .hero-content { position: relative; z-index: 1; }
.hero-night .hero-content > h1 {
  max-width: 15ch;
  font-size: clamp(2.4rem,6vw,4.4rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--night-paper);
  text-wrap: normal;
}
/* Two lines on phones and tablets, one line once there is room for it. */
@media (min-width: 900px) {
  .hero-night .hero-content > h1 { max-width: none; }
  .hero-night .hero-content > h1 .h1-br { display: none; }
}
.hero-night .hero-content > p {
  max-width: 34ch;
  margin: 20px 0 0;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--night-body);
  text-wrap: pretty;
}
@media (min-width: 900px) {
  /* Two lines on a wide screen. Below this the 34ch cap keeps it on the dark
     end of the scrim. */
  .hero-night .hero-content > p { max-width: 68ch; }
}
/* The rotating word is a gradient-clipped span everywhere else; on Night it is
   flat lavender, which is what reads against the scrim. */
.hero-night .hero-content > p .highlight {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--night-lavender);
}
.hero-night .hero-content > p b { color: var(--night-paper); font-weight: 700; }

/* Hero CTAs. Honey is allowed here because the ground is navy. */
/* The two stay side by side at every width; they shrink instead of stacking. */
.hero-cta { display: flex; flex-wrap: nowrap; gap: 14px; margin-top: 32px; }
.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 24px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.005em;
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.hero-btn--honey { background: var(--night-honey); color: var(--night-navy); }
.hero-btn--honey:hover { background: #F7CE6E; transform: translateY(-1px); }
.hero-btn--ghost {
  background: rgba(251,251,253,.08);
  border-color: rgba(251,251,253,.45);
  color: var(--night-paper);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-btn--ghost:hover {
  background: rgba(251,251,253,.16);
  border-color: var(--night-paper);
  transform: translateY(-1px);
}
@media (max-width: 480px) {
  .hero-cta { gap: 10px; }
  .hero-btn { padding: 12px 16px; font-size: .92rem; }
}
@media (max-width: 360px) {
  .hero-btn { padding: 11px 12px; font-size: .85rem; }
}

/* The rotator now sits on paper in its own section below the hero. */
.np-section { background: var(--bg); }
.np-intro { max-width: 720px; margin-bottom: 36px; }
.np-eyebrow {
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #F2C14E;
  margin-bottom: 14px;
}
.np-title {
  margin: 0;
  font-size: clamp(1.8rem, 3.9vw, 3.5rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--night-navy);
  text-wrap: pretty;
}
.np-lede {
  margin: 14px 0 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--night-navy);
  text-wrap: pretty;
}
@media (max-width: 820px) {
  .np-intro { margin-bottom: 24px; }
}

/* ============================================================
   Header: transparent over Night, condensing to a paper bar
   past 48px of scroll. State comes from data-scrolled on .nav,
   set in script.js; pages with no Night hero start scrolled.
   ============================================================ */
.nav {
  height: 76px;
  padding: 0 max(32px, calc((100% - 1180px) / 2));
  justify-content: flex-start;
  gap: 24px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  transition: background 220ms ease, border-color 220ms ease;
}
.nav .logo { margin-right: auto; color: var(--night-paper); transition: color 220ms ease; }
.nav .logo span,
.nav #logo-rotate { color: var(--night-lavender); transition: color 220ms ease; }
.nav-links {
  border-color: transparent;
  background: rgba(15,26,46,.34);
  box-shadow: inset 0 0 0 1px rgba(251,251,253,.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 220ms ease, box-shadow 220ms ease;
}
.nav-links a { color: var(--night-paper); opacity: 1; transition: color 220ms ease; }
.nav-links a:hover { color: var(--night-paper); opacity: .8; }
.nav-burger span { background: var(--night-paper); transition: background 220ms ease; }

/* Design system Button, size sm. */
.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 9px;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.005em;
  line-height: 1.2;
  border: none;
  background: var(--night-honey);
  color: var(--night-navy);
  box-shadow: none;
  transition: background .2s ease, transform .2s ease, box-shadow .25s ease, color .22s ease;
}
.nav-cta:hover { background: #F7CE6E; transform: translateY(-1px); }

.nav[data-scrolled="true"] {
  background: rgba(251,251,253,.82);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom-color: var(--night-silver-line);
}
.nav[data-scrolled="true"] .logo { color: var(--night-navy); }
/* The rotating word stays lavender in both states; only the static wordmark
   crosses to navy. */
.nav[data-scrolled="true"] .logo span { color: var(--night-plum); }
.nav[data-scrolled="true"] #logo-rotate { color: var(--night-lavender); }
.nav[data-scrolled="true"] .nav-links {
  background: rgba(241,242,247,.9);
  box-shadow: inset 0 0 0 1px var(--night-silver-line);
}
.nav[data-scrolled="true"] .nav-links a { color: var(--night-navy); }
.nav[data-scrolled="true"] .nav-burger span { background: var(--night-navy); }
/* The CTA stays honey with a navy label in both header states. */

@media (max-width: 820px) {
  /* Slightly more room on the right than the left: the CTA is the last thing in
     the row and was sitting on the edge. */
  .nav { gap: 10px; padding: 0 22px 0 16px; }
  .nav .logo { margin-right: 0; }
  .nav-cta { margin-left: auto; }
}
@media (max-width: 820px) {
  .hero-night { padding: 132px 0 38px; }
}

/* The Night header's .nav-cta rule sits later in this file than the old
   narrow-phone overrides, so it was cancelling them and the button ran past the
   right edge. Re-stated here, after it. */
@media (max-width: 480px) {
  .nav { padding: 0 16px 0 12px; gap: 8px; }
  .nav .logo { min-width: 0; }
  .nav-burger { width: 28px; }
  .nav-cta { padding: 9px 13px; font-size: .84rem; }
}
@media (max-width: 360px) {
  .nav { padding: 0 12px 0 10px; gap: 6px; }
  .nav-cta { padding: 8px 11px; font-size: .78rem; }
  /* At 320px the wordmark at 6.2vw plus the burger and the CTA are wider than
     the row, and the longest rotations ran under the button. */
  .nav .logo { font-size: clamp(0.95rem, 5.2vw, 1.3rem); overflow: hidden; }
}

/* "How It Works" label between the We Manage It lede and the step spine.
   Larger and heavier than the lede so it reads as a label, well under the
   section title, and plum with a trailing hairline so it is not mistaken for
   one of the step headings below it. */
.yas-hiw__label {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 56px 0 0;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.005em;
  color: #A79BF0;
  /* Ends where the step copy below it ends: the spine's 96px indent plus the
     step paragraph's 58ch at 0.95rem, restated in this element's 1.3rem ch. */
  max-width: calc(96px + 42.4ch);
}
.yas-hiw__label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #E2E5EF;
}
.yas-hiw__label + .yas-hiw__spine { margin-top: 36px; }
@media (max-width: 820px) {
  .yas-hiw__label { margin-top: 40px; font-size: 1.15rem; max-width: calc(64px + 47.9ch); }
  .yas-hiw__label + .yas-hiw__spine { margin-top: 28px; }
}

/* Section headers on desktop: a header runs on one line until it would pass two
   thirds of the page width, and only wraps past that. The intro blocks that
   used to cap headers at 640-720px now cap only their paragraphs. */
@media (min-width: 1024px) {
  .np-intro,
  .yas-whofor__intro,
  .section-head { max-width: none; }

  .np-title,
  .yas-whofor__title,
  .section-head h2,
  .yas-hiw__title,
  .yas-impact .impact-head h2,
  .final-cta h2 { max-width: 66.667vw; }

  .np-lede,
  .yas-whofor__lede,
  .section-head > p { max-width: 640px; }
}

/* First breather: the two accent phrases drop the honey underline for navy
   type under a hand-drawn honey highlighter. The mark is an irregular SVG
   stroke (wobbly top and bottom edges, ragged ends, a slight rise left to
   right) stretched to each phrase, sitting on the lower part of the letters.
   box-decoration-break:clone gives every wrapped line its own stroke. */
#close-more-business .yas-breather__accent {
  color: #0F1A2E;
  text-decoration: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'><path d='M6 14 C 60 8, 118 13, 176 9 S 290 6, 344 8 S 388 5, 396 9 L 392 17 L 399 24 L 395 38 C 396 44, 392 50, 388 52 C 330 55, 272 51, 214 55 S 104 52, 52 56 S 14 54, 4 53 L 8 44 L 1 36 L 5 26 Z' fill='%23F2C14E' fill-opacity='0.85'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 74%;
  background-position: 0 78%;
  padding: 0 .16em;
  margin: 0 -.08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ============================================================
   Pricing: ROI calculator ("What are missed visitors costing you?")
   Inputs left, results right; one column on phones.
   ============================================================ */
.roi { background: var(--bg); }
.roi-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  align-items: end;
  margin-bottom: 40px;
}
.roi-head > .roi-head-main { padding-right: 32px; }
.roi-eyebrow {
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #F2C14E;
  margin-bottom: 14px;
}
.roi-head > .roi-sub { justify-self: center; padding: 0 32px; }
.roi-title {
  margin: 0;
  font-size: clamp(1.8rem, 3.3vw, 2.7rem);
  text-wrap: balance;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: #0F1A2E;
}
.roi-sub {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #0F1A2E;
  opacity: .78;
  max-width: 52ch;
}

.roi-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: #FFFFFF;
  border: 1px solid #E2E5EF;
  border-radius: 24px;
  box-shadow: 0 0 0 6px #F1F2F7, 0 18px 40px rgba(15, 26, 46, .06);
  overflow: hidden;
}
.roi-inputs { padding: 32px; border-right: 1px solid #E2E5EF; }
.roi-results { padding: 32px; }

.roi-label { display: block; font-size: .92rem; font-weight: 500; color: #0F1A2E; opacity: .72; margin-bottom: 10px; }
.roi-money {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  padding: 0 16px;
  height: 48px;
  border: 1px solid #E2E5EF;
  border-radius: 999px;
  background: #FFFFFF;
  font-size: 1.05rem;
  color: #0F1A2E;
}
.roi-money span { opacity: .6; }
.roi-money input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-weight: 600;
  color: #0F1A2E;
}
.roi-money:focus-within { border-color: #A79BF0; box-shadow: 0 0 0 3px rgba(167, 155, 240, .25); }

.roi-field {
  margin-top: 20px;
  padding: 20px 22px 22px;
  border: 1px solid #E2E5EF;
  border-radius: 18px;
  background: #FFFFFF;
}
.roi-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.roi-name { font-size: 1.02rem; font-weight: 600; color: #0F1A2E; }
.roi-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  height: 42px;
  padding: 0 14px 0 8px;
  border: 1px solid #E2E5EF;
  border-radius: 999px;
  background: #F1F2F7;
  font-size: .98rem;
  color: #0F1A2E;
}
.roi-pill span { opacity: .6; }
.roi-pill input {
  width: 4.2ch;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-weight: 600;
  color: #0F1A2E;
  text-align: right;
  -moz-appearance: textfield;
}
.roi-pill input::-webkit-outer-spin-button,
.roi-pill input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.roi-pill:focus-within { border-color: #A79BF0; box-shadow: 0 0 0 3px rgba(167, 155, 240, .25); }

/* Slider: lavender fill up to the thumb, silver-line after. --pct is set in JS. */
.roi-range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 6px;
  margin: 22px 0 0;
  border-radius: 999px;
  background: linear-gradient(to right, #A79BF0 0 var(--pct, 0%), #E2E5EF var(--pct, 0%) 100%);
  cursor: pointer;
}
.roi-range:focus { outline: none; }
.roi-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #A79BF0;
  border: 3px solid #FFFFFF;
  box-shadow: 0 0 0 1px #9484ED, 0 2px 6px rgba(15, 26, 46, .2);
}
.roi-range::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #A79BF0;
  border: 3px solid #FFFFFF;
  box-shadow: 0 0 0 1px #9484ED, 0 2px 6px rgba(15, 26, 46, .2);
}
.roi-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px #9484ED, 0 0 0 6px rgba(167, 155, 240, .45); }

.roi-assume {
  margin-top: 20px;
  padding: 20px 22px;
  border: 1px solid #E2E5EF;
  border-radius: 18px;
  background: #FFFFFF;
}
.roi-assume-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  color: #0F1A2E;
  text-align: left;
}
.roi-assume-title { font-size: 1.02rem; font-weight: 600; }
.roi-assume-icon { font-size: 1.3rem; line-height: 1; opacity: .6; transition: transform .2s ease; }
.roi-assume-toggle[aria-expanded="true"] .roi-assume-icon { transform: rotate(45deg); }
.roi-assume-note { margin: 6px 0 0; font-size: .92rem; line-height: 1.55; color: #0F1A2E; opacity: .72; }
.roi-assume-body .roi-field:first-child { margin-top: 18px; }

.roi-result-card {
  padding: 28px 30px;
  border: 1px solid #E2E5EF;
  border-radius: 20px;
  background: #EFECFE;
}
.roi-r-label { font-size: 1.02rem; font-weight: 500; color: #0F1A2E; opacity: .78; }
.roi-big {
  margin-top: 10px;
  font-size: clamp(2.8rem, 5.4vw, 4.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
  color: #0F1A2E;
  font-variant-numeric: tabular-nums;
}
.roi-per { margin-top: 12px; font-size: 1.05rem; color: #0F1A2E; opacity: .7; }
.roi-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(15, 26, 46, .12);
}
.roi-k { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #0F1A2E; opacity: .7; }
.roi-v { margin-top: 8px; font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; color: #0F1A2E; font-variant-numeric: tabular-nums; }
.roi-v small { font-size: 1rem; font-weight: 500; opacity: .7; }
.roi-disclaimer { margin: 16px 2px 0; font-size: .86rem; line-height: 1.55; color: #0F1A2E; opacity: .65; }

@media (max-width: 860px) {
  .roi-head { grid-template-columns: 1fr; gap: 14px; margin-bottom: 28px; }
  .roi-card { grid-template-columns: 1fr; }
  .roi-inputs { border-right: 0; border-bottom: 1px solid #E2E5EF; padding: 22px; }
  .roi-results { padding: 22px; }
  .roi-field, .roi-assume { padding: 18px; }
  .roi-result-card { padding: 22px; }
}
@media (max-width: 400px) {
  .roi-name { font-size: .95rem; }
  .roi-pill { height: 38px; font-size: .92rem; }
}


/* Card borders take the pricing builder's lavender (#9484ED, as on a selected
   channel or term card). */
.roi-card,
.roi-field,
.roi-assume,
.roi-result-card { border-color: #9484ED; }
.roi-inputs { border-right-color: #9484ED; }
@media (max-width: 860px) {
  .roi-head { grid-template-columns: 1fr; }
  .roi-head > .roi-head-main { padding-right: 0; }
  .roi-head > .roi-sub { justify-self: start; padding: 0; }
  .roi-inputs { border-bottom-color: #9484ED; }
}

/* Standalone ROI page: clears the fixed 76px header. */
.roi--page { padding-top: 140px; }
@media (max-width: 820px) { .roi--page { padding-top: 112px; } }

/* Pricing page: toggle under the tagline that opens the calculator. */
.roi-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 11px 18px;
  border: 1px solid #9484ED;
  border-radius: 999px;
  background: #EFECFE;
  font: inherit;
  font-size: .95rem;
  font-weight: 700;
  color: #0F1A2E;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.roi-open:hover { background: #E4DFFD; transform: translateY(-1px); }
.roi-open svg { transition: transform .25s ease; }
.roi-open[aria-expanded="true"] svg { transform: rotate(180deg); }
.roi--collapsible { padding-top: 24px; }

/* ---------- Desktop nav: Overview dropdown ----------
   Opens on hover and keyboard focus, and on click for touch screens and
   trackpad taps (script.js toggles .is-open). The menu sits on paper in both
   header states, so its links stay navy. */
.nav-drop { position: relative; display: flex; align-items: center; }
.nav-drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--night-paper);
  cursor: pointer;
  transition: color 220ms ease, opacity .2s ease;
}
.nav-drop-btn:hover { opacity: .8; }
.nav[data-scrolled="true"] .nav-drop-btn { color: var(--night-navy); }
.nav-drop-chev { transition: transform .2s ease; }

.nav-drop-menu {
  position: absolute;
  top: calc(100% + 16px);
  left: -20px;
  min-width: 200px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  background: #FBFBFD;
  border: 1px solid #E2E5EF;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(15, 26, 46, .16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index: 120;
}
/* Invisible bridge over the gap so the menu doesn't close on the way down. */
.nav-drop-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu,
.nav-drop.is-open .nav-drop-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
.nav-drop:hover .nav-drop-chev,
.nav-drop:focus-within .nav-drop-chev,
.nav-drop.is-open .nav-drop-chev { transform: rotate(180deg); }

.nav .nav-links .nav-drop .nav-drop-menu a {
  padding: 10px 12px;
  border-radius: 9px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--night-navy);
  opacity: 1;
  white-space: nowrap;
}
.nav .nav-links .nav-drop .nav-drop-menu a:hover,
.nav .nav-links .nav-drop .nav-drop-menu a:focus-visible { background: #EFECFE; color: var(--night-navy); outline: none; }

/* ROI calculator: booking value field and its label. Label in navy ink at
   full strength; field narrower, with the same lavender border as the cards. */
.roi-label { color: #0F1A2E; opacity: 1; font-weight: 600; }
.roi-money { max-width: 160px; border-color: #9484ED; }

/* Short pages on tall screens: the page fills the window and the last section
   stretches, so the footer sits on the bottom edge instead of leaving blank
   page below it. */
body.page-fill { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.page-fill > section:last-of-type { flex-grow: 1; }
body.page-fill > * { min-width: 0; }

/* Overview is now a link to the top of the home page; the chevron beside it
   is the button that opens the section list on touch screens. Hover still
   opens it everywhere. */
.nav-drop { gap: 4px; }
.nav-drop-btn { padding: 4px 2px; }

/* ---------- Footer layout ----------
   Left: wordmark, then Privacy / Terms / X, then the copyright line.
   Right: two link columns, home-page sections first, other pages second. */
.footer-inner { align-items: flex-start; gap: 32px 48px; }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer-brand .footer-copy { text-align: left; }
.footer-cols { display: flex; gap: 56px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; font-size: .85rem; font-weight: 600; }
.footer-col a { display: inline-flex; align-items: center; gap: 5px; color: var(--text-heading); }
.footer-col a:hover { color: #6B5BD6; }
@media (max-width: 768px) {
  .footer-inner { flex-direction: column; gap: 28px; }
  .footer-cols { gap: 40px; }
}

/* ---------- Where It Works (anonymous zone) ----------
   The section sits inside #impact's .wrap, which already provides the page
   gutter; its own .container was adding a second one, pushing the header and
   the navy card 32px right of every other section and narrowing the card. */
#anonymous-zone > .container { max-width: none; padding: 0; }

.anon-zone-mobile { display: none; }
@media (max-width: 820px) {
  .anon-zone-panel .anon-zone-svg-d { display: none; }
  .anon-zone-mobile { display: block; }
  /* Card bleeds most of the way to the screen edges and keeps only a thin
     inner margin, so the diagram gets every pixel of width. */
  .anon-zone-panel { margin-top: 44px; margin-left: -16px; margin-right: -16px; padding: 24px 10px 18px; border-radius: 20px; }
  .anon-zone-m-title { margin: 0 8px; font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; color: #FBFBFD; }
  .anon-zone-m-copy { margin: 10px 8px 18px; font-size: .95rem; line-height: 1.55; color: #C9CFE4; }
  .anon-zone-svg-m { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; }
}

/* ===== Accessibility helpers ===== */
/* Skip link: first thing a keyboard user reaches. Sits off screen until it
   receives focus, then drops in at the top left. */
.skip-link{position:absolute;left:12px;top:-64px;z-index:10000;padding:10px 16px;border-radius:10px;background:#0F1A2E;color:#fff;font-weight:700;font-size:15px;text-decoration:none;box-shadow:0 0 0 2px #F2C14E;transition:top .15s ease}
.skip-link:focus{top:12px;outline:none}
/* Text read by screen readers and search tools but not shown on screen. */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===== Hero: "Live in days, not weeks." =====
   White type under a hand-drawn lavender highlighter, same irregular stroke as
   the first breather's honey mark, recolored for the navy hero. */
.hero-night .hero-content > p.hero-live{margin:24px 0 0;max-width:none;font-size:1.1rem;font-weight:700;line-height:1.5;color:#fff;letter-spacing:-.005em}
.hero-live__mark{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'><path d='M6 14 C 60 8, 118 13, 176 9 S 290 6, 344 8 S 388 5, 396 9 L 392 17 L 399 24 L 395 38 C 396 44, 392 50, 388 52 C 330 55, 272 51, 214 55 S 104 52, 52 56 S 14 54, 4 53 L 8 44 L 1 36 L 5 26 Z' fill='%237E6FE0' fill-opacity='0.85'/></svg>");
  background-repeat:no-repeat;background-size:100% 105%;background-position:0 60%;
  padding:.05em .3em;margin:0 -.12em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ===== Measured results source line =====
   Right-aligned under the last stat column while stats sit in columns;
   left-aligned under the 82% stat once they stack to one column. */
.yas-impact .stats-source{margin:14px 0 0;font-size:.75rem;font-weight:500;line-height:1.4;color:#6B7280;text-align:right}
@media (max-width:760px){.yas-impact .stats-source{text-align:left;margin-top:0}}

/* ===== Pricing: hourly equivalent at the bottom of each term card ===== */
.pr-term{display:flex;flex-direction:column;padding-bottom:12px}
/* Pinned to the bottom of the card so the three line up, sitting just above
   the card's bottom border. */
/* Cards lead with the hourly rate; the monthly amount sits under it. */
.pr-term-billed{margin-top:6px;font-size:.8125rem;font-weight:600;color:var(--text-muted)}
.pr-term-save{margin-top:auto;padding-top:6px}
.pr-term-save:last-of-type{margin-bottom:0}


/* ---------- Contact Us page (/contact) ----------
   Header with Book a Demo and its calendar, then the Send a message form
   (reuses the .legal-msg form styles from the Terms page). */
.ct-header .pr-tagline { margin-bottom: 28px; font-weight: 400; color: var(--text-body); }
.ct-header .drop-panel.is-open { margin-top: 28px; }
.ct-message { padding-top: 48px; }

/* Phone menu Book a Demo: white text on the lavender freehand highlighter
   (same stroke as .hero-live__mark). */
.mobile-menu-list a.mm-demo .mm-demo__mark{
  color:#FBFBFD;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'><path d='M6 14 C 60 8, 118 13, 176 9 S 290 6, 344 8 S 388 5, 396 9 L 392 17 L 399 24 L 395 38 C 396 44, 392 50, 388 52 C 330 55, 272 51, 214 55 S 104 52, 52 56 S 14 54, 4 53 L 8 44 L 1 36 L 5 26 Z' fill='%237E6FE0' fill-opacity='0.85'/></svg>");
  background-repeat:no-repeat;background-size:100% 105%;background-position:0 60%;
  padding:.1em .4em;margin:0 -.2em}

/* Footer pill on phones: wraps to two balanced lines at a readable size
   instead of shrinking to fit one line. */
@media (max-width: 820px) {
  .final-cta-pill {
    white-space: normal;
    text-wrap: balance;
    text-align: center;
    width: max-content;
    max-width: calc(100vw - 48px);
    font-size: 0.875rem;
    line-height: 1.35;
    padding: 9px 20px;
    border-radius: 20px;
  }
  /* The two-line pill is taller, so the footer content starts lower. */
  footer { padding-top: 58px; }
}

/* Pricing page: "Our pricing explained" box under the h1.
   Same look as the .pending-box on the demo pages. */
.pr-why {
  max-width: 680px;
  margin-top: 16px;
  background: #EFECFE;
  border: 1px solid rgba(167,155,240,.22);
  border-radius: 16px;
  padding: 20px 22px;
}
.pr-why p {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-body);
  margin: 0 0 16px;
}
.pr-why .pr-why-lead { font-weight: 700; color: var(--text-heading); }
.pr-why .pr-why-close { font-weight: 700; color: var(--text-heading); margin-bottom: 0; }
.pr-why-list { list-style: none; margin: 0 0 16px; padding: 0; }
.pr-why-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 14px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-body);
}
.pr-why-list li:last-child { margin-bottom: 0; }
.pr-why-list li strong { color: var(--text-heading); font-weight: 700; }
.pr-why-list li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  top: 0;
  color: #A79BF0;
  font-weight: 800;
  font-size: 1.05rem;
}
@media (max-width: 640px) {
  .pr-why { padding: 18px 18px; }
  .pr-why-list li { padding-left: 26px; }
}