/* ============================================================================
   lp.css  ·  the VSL landing page
   ----------------------------------------------------------------------------
   Loaded by vsl.html only. Kept out of the shared stylesheets because every
   other page would carry the weight for a layout it never renders.

   The page has one job and one exit. There is no navigation, and every call to
   action on it scrolls to the same form rather than going anywhere else.

   Cards and rows below use the site's CONTEXTUAL tokens (--surface, --fg,
   --border), which flip with .section--dark and .section--light. That is what
   lets the same component sit on alternating bands without a second ruleset.
   ========================================================================= */

/* ---- chrome ------------------------------------------------------------- */
.lp-bar {
  background: var(--bg, #050B18);
  border-bottom: 1px solid rgba(139, 190, 248, .12);
  padding: 1rem 0;
}
.lp-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.lp-bar__brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.lp-bar__mark { width: 26px; height: 26px; flex: 0 0 auto; }
.lp-bar__word {
  font-size: 1.0625rem;
  font-weight: 660;
  letter-spacing: -0.022em;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}
.lp-bar__word i { font-style: normal; opacity: .62; }
.lp-bar__note {
  font-size: var(--fs-nano, .6875rem);
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3, #8FA3BF);
}
@media (max-width: 620px) { .lp-bar__note { display: none; } }

/* ---- hero --------------------------------------------------------------- */
.lp-hero { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.5rem, 5vw, 4rem); }
.lp-hero__copy { max-width: 44rem; margin-inline: auto; text-align: center; }
.lp-line { display: block; }

/* Who the page is for, said before anything else. */
.lp-icp {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 1.1rem;
  padding: .42rem .9rem;
  border-radius: 40px;
  border: 1px solid rgba(139, 190, 248, .28);
  background: rgba(139, 190, 248, .08);
  color: #AFCFF2;
  font-size: var(--fs-nano, .6875rem);
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.lp-icp .ico { color: var(--viz-accent, #5B9BD9); }

.lp-sub {
  margin: 1.15rem auto 0;
  max-width: 34rem;
  font-size: clamp(1rem, 2.4vw, 1.125rem);
  line-height: 1.6;
  color: var(--fg-2, #C6D8F2);
}
.lp-sub--tight {
  margin-top: .5rem;
  font-weight: 620;
  color: var(--fg, #EAF3FF);
}

/* ---- the video ---------------------------------------------------------- */
.lp-video {
  margin: clamp(1.75rem, 4vw, 2.5rem) auto 0;
  max-width: 56rem;
  border-radius: var(--r-lg, 16px);
  overflow: hidden;
  border: 1px solid rgba(139, 190, 248, .18);
  box-shadow:
    0 40px 90px -50px rgba(0, 0, 0, .9),
    inset 0 1px 0 rgba(255, 255, 255, .07);
  background: #0A142B;
}
/* The Wistia custom element sizes itself from its aspect attribute. All this
   has to do is fill the frame and let the frame's radius clip it. */
.lp-video wistia-player {
  display: block;
  width: 100%;
  height: auto;
  background: #0A142B;
}

/* ---- calls to action ----------------------------------------------------- */
.lp-cta { margin-top: clamp(1.5rem, 3.5vw, 2.25rem); text-align: center; }
.lp-cta .btn { display: inline-flex; align-items: center; gap: .55rem; }
.lp-cta__note {
  margin: .85rem 0 0;
  font-size: var(--fs-meta, .8125rem);
  color: var(--fg-3, #8FA3BF);
}
.lp-sect-cta { margin-top: clamp(1.75rem, 4vw, 2.5rem); text-align: center; }
.lp-sect-cta .btn { display: inline-flex; align-items: center; gap: .5rem; }

/* An expanding ring that fades, plus a glow that breathes under it. Reads as
   alive without moving the button, so it never shifts under a tapping thumb. */
.btn--pulse { animation: btn-pulse 2.6s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes btn-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(42, 105, 206, .55),
                0 10px 26px -12px rgba(42, 105, 206, .55);
  }
  55% {
    box-shadow: 0 0 0 14px rgba(42, 105, 206, 0),
                0 14px 34px -10px rgba(42, 105, 206, .8);
  }
}

/* ---- the form band ------------------------------------------------------ */
.lp-form { scroll-margin-top: 1rem; }
.lp-form .sec-head { text-align: center; max-width: 40rem; margin-inline: auto; }
.lp-form .sec-head .eyebrow { justify-content: center; }
.lp-form .quiz { margin-top: clamp(1.75rem, 4vw, 2.5rem); }

/* ---- the booking calendar ----------------------------------------------- */
.quiz-frame {
  display: block;
  width: 100%;
  min-height: 52rem;
  border: 0;
  border-radius: var(--r-md, 12px);
  background: #fff;
}
@media (max-width: 640px) { .quiz-frame { min-height: 48rem; } }

.q__escape {
  margin-top: 1rem;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease;
}
.q__escape.is-on { opacity: 1; visibility: visible; }

/* ---- cards -------------------------------------------------------------- */
.lp-grid { display: grid; gap: 1rem; margin-top: clamp(1.5rem, 3.5vw, 2.25rem); }
@media (min-width: 700px) {
  .lp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.lp-card {
  padding: 1.4rem 1.5rem 1.5rem;
  border-radius: var(--r-md, 12px);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.lp-card__n {
  margin: 0 0 .55rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--fs-nano, .6875rem);
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--viz-accent, #2A69CE);
}
.lp-card__h {
  margin: 0 0 .6rem;
  font-size: 1.0625rem;
  font-weight: 660;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--fg);
}
.lp-card__p {
  margin: 0;
  font-size: var(--fs-sm, .9375rem);
  line-height: 1.6;
  color: var(--fg-2);
}
.lp-card__list { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
.lp-card__list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: var(--fs-sm, .9375rem);
  line-height: 1.5;
  color: var(--fg-2);
}
.lp-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--viz-accent, #2A69CE);
}
.lp-card__foot {
  margin: .9rem 0 0;
  padding-top: .75rem;
  border-top: 1px dashed var(--border);
  font-size: var(--fs-meta, .8125rem);
  font-style: italic;
  color: var(--fg-3);
}

/* ---- comparison rows ----------------------------------------------------- */
.lp-rows { margin: clamp(1.5rem, 3.5vw, 2.25rem) 0 0; padding: 0; list-style: none; }
.lp-row {
  display: grid;
  gap: .3rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}
.lp-row:first-child { border-top: 1px solid var(--border); }
@media (min-width: 700px) {
  .lp-row { grid-template-columns: 10rem minmax(0, 1fr); gap: 1.5rem; align-items: baseline; }
}
.lp-row__k {
  font-size: var(--fs-meta, .8125rem);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--viz-accent, #5B9BD9);
}
.lp-row__v { font-size: var(--fs-sm, .9375rem); line-height: 1.6; color: var(--fg-2); }

.lp-concession {
  margin: 1.75rem 0 0;
  padding: 1.1rem 1.3rem;
  border-radius: var(--r-md, 12px);
  border: 1px solid var(--border);
  background: var(--accent-soft);
  font-size: var(--fs-sm, .9375rem);
  line-height: 1.6;
  color: var(--fg-2);
}

/* ---- footer -------------------------------------------------------------- */
.lp-foot {
  background: var(--bg, #050B18);
  border-top: 1px solid rgba(139, 190, 248, .12);
  padding: 1.5rem 0;
}
.lp-foot .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.lp-foot p { margin: 0; font-size: var(--fs-meta, .8125rem); color: var(--fg-3, #8FA3BF); }
.lp-foot a { color: inherit; }
.lp-foot a:hover { color: var(--fg, #EAF3FF); }

@media (prefers-reduced-motion: reduce) {
  .btn--pulse { animation: none; }
}

/* ---- small phones --------------------------------------------------------
   On a 320px screen the headline ran to six lines and pushed the video below
   the fold. On a page whose entire job is to get the video watched, that is
   the most expensive layout bug available. Tightening the type and the
   spacing pulls the player back above the fold without touching the copy. */
@media (max-width: 400px) {
  .lp-hero { padding-block: 1.1rem 1.9rem; }
  .lp-hero .display { font-size: clamp(1.7rem, 8.4vw, 2.1rem); line-height: 1.06; }
  .lp-icp {
    margin-bottom: .8rem;
    padding: .34rem .72rem;
    /* 11px is the floor for a line anyone is expected to read. 10px tripped
       the readability check and this is the first thing on the page. */
    font-size: .6875rem;
    letter-spacing: .06em;
  }
  .lp-sub { margin-top: .85rem; font-size: .9375rem; line-height: 1.5; }
  .lp-sub--tight { margin-top: .4rem; }
  .lp-video { margin-top: 1.2rem; }
  .lp-cta { margin-top: 1.2rem; }
}

/* ============================================================================
   /vsl/booked  ·  the confirmation page
   ----------------------------------------------------------------------------
   The job of this page is not to confirm. The calendar invite already does
   that. Its job is to make the call worth showing up to, which means getting
   one specific incident into the visitor's head while they are still here.
   Everything is sized so the whole page is scannable without reading.
   ========================================================================= */

.bk-hero { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 4vw, 2.5rem); text-align: center; }

/* The tick draws itself once. A confirmation that animates in reads as an
   event; one that is simply present reads as a static image. */
.bk-tick { width: 72px; height: 72px; margin: 0 auto 1.4rem; }
.bk-tick svg { width: 100%; height: 100%; display: block; }
.bk-tick__ring,
.bk-tick__mark {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bk-tick__ring {
  stroke: var(--viz-accent, #2A69CE);
  stroke-width: 3;
  stroke-dasharray: 202;
  stroke-dashoffset: 202;
  animation: bk-ring .85s cubic-bezier(.2, .8, .25, 1) forwards;
}
.bk-tick__mark {
  stroke: #6EE7A8;
  stroke-width: 5;
  stroke-dasharray: 46;
  stroke-dashoffset: 46;
  animation: bk-mark .45s cubic-bezier(.3, .9, .3, 1) .55s forwards;
}
@keyframes bk-ring { to { stroke-dashoffset: 0; } }
@keyframes bk-mark { to { stroke-dashoffset: 0; } }

.bk-eyebrow {
  margin: 0 0 .6rem;
  font-size: var(--fs-nano, .6875rem);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #6EE7A8;
}
.bk-h { margin: 0 auto; max-width: 22ch; }
.bk-name { color: var(--viz-accent, #8BBEF8); }
.bk-lede {
  margin: 1.1rem auto 0;
  max-width: 34rem;
  font-size: clamp(1rem, 2.4vw, 1.0625rem);
  line-height: 1.6;
  color: var(--fg-2);
}

/* ---- the prep prompt ----------------------------------------------------- */
.bk-pick__inner {
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border-radius: var(--r-lg, 16px);
  border: 1px solid rgba(139, 190, 248, .18);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(42, 105, 206, .16) 0%, transparent 70%),
    rgba(10, 20, 43, .6);
}
.bk-kicker {
  display: inline-flex; align-items: center; gap: .4rem;
  margin: 0 0 .7rem;
  font-size: var(--fs-nano, .6875rem);
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #AFCFF2;
}
.bk-kicker .ico { color: var(--viz-accent, #5B9BD9); }
.bk-sub { margin: .7rem 0 0; font-size: var(--fs-sm, .9375rem); color: var(--fg-3); }

.bk-chips { list-style: none; margin: 1.35rem 0 0; padding: 0; display: grid; gap: .6rem; }
.bk-chip {
  display: flex; align-items: center; gap: .8rem;
  padding: .95rem 1.1rem;
  border-radius: 12px;
  border: 1px solid rgba(139, 190, 248, .18);
  background: rgba(139, 190, 248, .06);
  color: var(--fg, #EAF3FF);
  font-size: var(--fs-sm, .9375rem);
  line-height: 1.45;
  text-align: left;
  opacity: 0;
  transform: translateY(10px);
  animation: bk-rise .5s cubic-bezier(.2, .8, .25, 1) forwards;
  animation-delay: calc(.75s + var(--i) * .12s);
}
.bk-chip__n {
  flex: 0 0 auto;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--fs-nano, .6875rem);
  font-weight: 700;
  color: var(--viz-accent, #5B9BD9);
}
@keyframes bk-rise { to { opacity: 1; transform: none; } }

.bk-note {
  margin: 1.2rem 0 0;
  font-size: var(--fs-meta, .8125rem);
  line-height: 1.6;
  color: var(--fg-3);
}

/* ---- the four cards ------------------------------------------------------ */
.bk-grid {
  display: grid; gap: 1rem;
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
}
@media (min-width: 640px) { .bk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .bk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.bk-card {
  padding: 1.4rem 1.4rem 1.5rem;
  border-radius: var(--r-md, 12px);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.bk-card__ico {
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem;
  margin-bottom: .9rem;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--viz-accent, #2A69CE);
}
.bk-card__ico .ico { width: 1.2rem; height: 1.2rem; }
.bk-card__h {
  margin: 0 0 .45rem;
  font-size: 1rem; font-weight: 660; line-height: 1.3;
  letter-spacing: -0.014em;
  color: var(--fg);
}
.bk-card__p { margin: 0; font-size: var(--fs-sm, .9375rem); line-height: 1.55; color: var(--fg-2); }

.bk-safe {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin: 1.5rem 0 0;
  font-size: var(--fs-meta, .8125rem);
  color: var(--fg-3);
  text-align: center;
}
.bk-safe .ico { color: #6EE7A8; flex: 0 0 auto; }

/* ---- while you wait ------------------------------------------------------ */
.bk-links { display: grid; gap: .7rem; margin-top: clamp(1.5rem, 3.5vw, 2.25rem); }
.bk-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "k go" "v go";
  align-items: center;
  gap: .15rem 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--r-md, 12px);
  border: 1px solid var(--border);
  background: var(--surface);
  text-decoration: none;
  transition: border-color .18s, transform .18s, background .18s;
}
.bk-link:hover { border-color: rgba(139, 190, 248, .45); transform: translateY(-2px); }
.bk-link__k { grid-area: k; font-weight: 640; color: var(--fg); font-size: var(--fs-sm, .9375rem); }
.bk-link__v { grid-area: v; color: var(--fg-3); font-size: var(--fs-meta, .8125rem); line-height: 1.5; }
.bk-link__go { grid-area: go; color: var(--viz-accent, #5B9BD9); transition: transform .18s; }
.bk-link:hover .bk-link__go { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .bk-tick__ring, .bk-tick__mark { animation: none; stroke-dashoffset: 0; }
  .bk-chip { animation: none; opacity: 1; transform: none; }
  .bk-link:hover { transform: none; }
}

/* ==============================================================
   BOOKED  04  The screens themselves
   These are dense dashboards. Three across would shrink them past
   legibility, so each one gets a full row with its caption beside it.
   ============================================================== */
.bk-shots {
  display: grid;
  gap: clamp(2rem, 4.5vw, 3.25rem);
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}
.bk-shot { margin: 0; display: grid; gap: 1rem; align-items: center; }
@media (min-width: 54rem) {
  .bk-shot {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 3.2vw, 2.75rem);
  }
}
.bk-shot__img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-md, 12px);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.bk-shot__cap { display: block; }
.bk-shot__n {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro, .6875rem);
  letter-spacing: .08em;
  padding: .18rem .45rem;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--viz-accent, #2A69CE);
}
/* h3 and p, so the three screen names sit in the heading outline rather than
   only looking like headings. Both need their UA margins cleared. */
.bk-shot__t {
  margin: .6rem 0 .35rem;
  font-size: 1.0625rem; font-weight: 660; line-height: 1.3;
  letter-spacing: -0.014em;
  color: var(--fg);
}
.bk-shot__d {
  margin: 0;
  font-size: var(--fs-sm, .9375rem); line-height: 1.55;
  color: var(--fg-2);
}

/* ===========================================================================
   Below-calendar sections, Oct 2026 revamp. Copy and styles mirror the live
   site (pulsarops.ai) after the Oct 7 and Oct 13 reviews.
   =========================================================================== */

/* ---- four stages, original pulsarops.ai dark-card style (Omar, 13 Oct) ---- */
.st4-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0,1fr); margin-top: clamp(1.5rem, 3.5vw, 2.25rem); }
@media (min-width: 720px) { .st4-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1180px) { .st4-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.st4 { display: flex; flex-direction: column; padding: 28px 26px 22px; border-radius: 14px;
       background: rgba(30, 46, 84, .55); border: 1px solid rgba(120, 150, 210, .22); }
.st4__k { margin: 0 0 14px; font-size: 12px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: #7EA6F5; }
.st4__t { margin: 0 0 14px; font-size: 1.25rem; font-weight: 650; color: #fff; }
.st4__l { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; color: #C9D6EE; font-size: .95rem; }
.st4__f { margin: auto 0 0; padding-top: 18px; border-top: 1px dashed rgba(140, 165, 215, .35); margin-top: 22px;
          font-size: .82rem; font-style: italic; color: #8FA3C6; }

/* ---- four-up grid and the day-in-the-life steps ---- */
@media (min-width: 700px) { .lp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .lp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lp-step__k {
  display: flex; align-items: center; gap: .55rem;
  margin: 0 0 .7rem;
  font-size: var(--fs-nano, .6875rem); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--viz-accent, #2A69CE);
}
.lp-step__n {
  display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--viz-accent, #2A69CE); color: #fff; font-size: .75rem; letter-spacing: 0;
}

/* ---- pain cards: the left rule marks them as problems, not features ---- */
.lp-card--pain { border-left: 3px solid var(--warn, #F59E0B); }

/* ---- device library ---- */
.lp-lib { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
.lp-lib li { font-size: var(--fs-sm, .9375rem); line-height: 1.5; color: var(--fg-2); }
.brand-mark--img { width: auto; height: 17px; margin-block: 11px; object-fit: contain; }

/* ---- comparison table (copied from the site's site.css) ---- */
.cmp {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* Without this the sticky thead cells leak their width into the root
     scrollWidth, which would give the page a horizontal scrollbar the
     moment the body overflow-x:hidden safety net is removed. */
  contain: layout;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  -webkit-overflow-scrolling: touch;
}

.cmp__table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.cmp__table th,
.cmp__table td {
  padding: var(--sp-4) var(--sp-5);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
}

.cmp__table thead th {
  position: sticky;
  top: 0;
  background: var(--surface-2);
  color: var(--fg);
  font-size: var(--fs-meta);
  font-weight: 660;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* The column that is us. */
.cmp__table thead th.is-us,
.cmp__table td.is-us {
  background: var(--accent-soft);
  color: var(--fg);
  font-weight: 640;
}

.cmp__table tbody th {
  font-size: var(--fs-micro);
  font-weight: 680;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
}

.cmp__table td { color: var(--fg-2); }

.cmp__table tbody tr:last-child th,
.cmp__table tbody tr:last-child td { border-bottom: 0; }

.cmp-yes { color: var(--ok); font-weight: 700; }
.cmp-no { color: var(--fg-3); font-weight: 700; }
.cmp-part { color: var(--warn); font-weight: 640; }

.cmp__hint {
  margin-top: var(--sp-3);
  font-size: var(--fs-meta);
  color: var(--fg-3);
}

/* The table only overflows on narrow screens, so the hint retires above them. */
@media (min-width: 880px) {
  .cmp__hint { display: none; }
}

.lp-steps { list-style: none; padding: 0; }