/* Match the layer order Tailwind declares, so loading this file first never reorders the app's layers */
@layer properties, theme, base, components, utilities;

/* Execute Leads Landing Page — Plan Then Execute brand (light theme, PTE gold)
   Tokens match planthenexecute.com. Everything is scoped to body.landing-page
   so the signed-in app keeps its own dark theme. Component rules sit in the
   components layer so Tailwind utilities in the view can still override them. */

.landing-page {
  --pte-ink: #0d0d0d;
  --pte-heading-muted: #666666;
  --pte-body: #555555;
  --pte-subtle: #6b6b6b;
  --pte-mist: #eaf1f8;
  --pte-mist-deep: #dde8f1;
  --pte-line: #d7dfe0;
  --pte-card: #ffffff;
  --pte-gold: #f5b714;
  --pte-gold-deep: #b8870b;
  --pte-gold-text: #8a6304; /* small gold text: 5.4:1 on white */
  --pte-night: #0d0d0d;
  --font-display: 'Instrument Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  font-family: var(--font-body);
  color: var(--pte-body);
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
}

/* The app's base layer paints html dark; keep overscroll white on the landing page */
html:has(> body.landing-page) {
  background-color: #ffffff;
  color-scheme: light;
}

@layer components {
  /* Container */
  .landing-page .landing-container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  @media (min-width: 640px) {
    .landing-page .landing-container { padding-left: 1.5rem; padding-right: 1.5rem; }
  }

  @media (min-width: 1024px) {
    .landing-page .landing-container { padding-left: 2rem; padding-right: 2rem; }
  }

  /* Typography */
  .landing-page .landing-heading {
    font-family: var(--font-display);
    color: var(--pte-ink);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.05;
  }

  .landing-page .heading-muted {
    color: var(--pte-heading-muted);
  }

  .landing-page .text-gold {
    color: var(--pte-gold-text);
  }

  /* Wordmark: echoes the caps PLAN THEN EXECUTE mark */
  .landing-page .el-wordmark {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pte-ink);
    white-space: nowrap;
  }

  .landing-page .el-wordmark-accent {
    color: var(--pte-gold-deep);
  }

  /* Eyebrows: a bordered pill above centered headings, gold text above left-aligned ones */
  .landing-page .pill-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.85rem;
    border: 1px solid var(--pte-line);
    border-radius: 9999px;
    background: #ffffff;
    color: var(--pte-ink);
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
  }

  .landing-page .pill-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--pte-gold);
    box-shadow: 0 0 0 3px rgba(245, 183, 20, 0.2);
  }

  .landing-page .section-label {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    color: var(--pte-gold-text);
  }

  /* Buttons */
  .landing-page .btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(180deg, #e6ab13 0%, #b07f08 100%);
    color: #ffffff !important;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 2px rgba(90, 60, 0, 0.45);
    border-radius: 10px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      0 6px 18px -6px rgba(184, 135, 11, 0.65);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  }

  .landing-page .btn-gold:hover {
    transform: translateY(-2px);
    filter: brightness(1.04);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      0 10px 24px -8px rgba(184, 135, 11, 0.75);
  }

  .landing-page .btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #ffffff;
    color: var(--pte-ink) !important;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
    border: 1px solid var(--pte-line);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(27, 29, 30, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  }

  .landing-page .btn-ghost:hover {
    transform: translateY(-2px);
    border-color: #c3cdd0;
    box-shadow: 0 8px 20px -10px rgba(27, 29, 30, 0.25);
  }

  /* White pill with a black arrow disc, as in the PTE "Let's Talk" button */
  .landing-page .btn-pill-light {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.375rem 0.375rem 0.375rem 1.5rem;
    background: #ffffff;
    color: var(--pte-ink) !important;
    font-family: var(--font-display);
    font-weight: 600;
    border-radius: 9999px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .landing-page .btn-pill-light:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px -10px rgba(245, 183, 20, 0.6);
  }

  .landing-page .btn-pill-light .arrow-disc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background: var(--pte-ink);
    color: #ffffff;
  }

  /* CTA Pulse Animation */
  .landing-page .btn-cta-pulse {
    animation: ctaPulse 3.8s ease-in-out infinite;
  }

  @keyframes ctaPulse {
    0%   { box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 0 0 0 rgba(245,183,20,0.45); }
    50%  { box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 0 0 10px rgba(245,183,20,0); }
    100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 0 0 0 rgba(245,183,20,0); }
  }

  /* Navbar */
  .landing-page .landing-nav {
    background: transparent;
    transition: background-color 0.3s, backdrop-filter 0.3s, box-shadow 0.3s;
  }

  .landing-page .landing-nav.nav-scrolled {
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(27, 29, 30, 0.08);
  }

  .landing-page .nav-pill {
    background: #ffffff;
    border: 1px solid var(--pte-line);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(27, 29, 30, 0.05);
  }

  .landing-page .landing-nav-link {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.95rem;
    color: #3a3a3a;
    transition: color 0.2s;
  }

  .landing-page .landing-nav-link:hover {
    color: var(--pte-ink);
  }

  .landing-page .mobile-menu-overlay {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
  }

  /* Hero: pale blue wash with the PTE grid fading out */
  .landing-page .hero-bg {
    background: linear-gradient(180deg, var(--pte-mist) 0%, #f6f9fc 55%, #ffffff 100%);
  }

  .landing-page .hero-grid {
    background-image:
      linear-gradient(rgba(27, 29, 30, 0.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(27, 29, 30, 0.045) 1px, transparent 1px);
    background-size: 64px 64px;
    background-position: center top;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 25%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 25%, transparent 75%);
  }

  /* Stacked sheets: each section after the hero overlaps the one above with a rounded top */
  .landing-page .pte-sheet {
    position: relative;
    margin-top: -2.5rem;
    border-radius: 2rem 2rem 0 0;
    padding-top: 6rem;
    padding-bottom: 8.5rem;
  }

  @media (min-width: 768px) {
    .landing-page .pte-sheet {
      border-radius: 2.75rem 2.75rem 0 0;
      padding-top: 7rem;
      padding-bottom: 9.5rem;
    }
  }

  .landing-page .sheet-white { background: #ffffff; }
  .landing-page .sheet-mist { background: var(--pte-mist); }

  .landing-page .sheet-night {
    background:
      radial-gradient(ellipse 60% 70% at 50% 0%, rgba(245, 183, 20, 0.22) 0%, transparent 70%),
      radial-gradient(ellipse 50% 60% at 85% 100%, rgba(184, 135, 11, 0.18) 0%, transparent 70%),
      var(--pte-night);
  }

  .landing-page .sheet-footer {
    background: linear-gradient(180deg, var(--pte-mist) 0%, #f7fafd 100%);
    padding-bottom: 3rem;
  }

  /* Cards */
  .landing-page .landing-card {
    background: var(--pte-card);
    border: 1px solid var(--pte-line);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(27, 29, 30, 0.04);
    transition: border-color 0.2s, box-shadow 0.2s;
  }

  .landing-page .landing-card:hover {
    border-color: #c3cdd0;
    box-shadow: 0 14px 30px -18px rgba(27, 29, 30, 0.35);
  }

  .landing-page .sheet-mist .landing-card {
    border-color: transparent;
  }

  .landing-page .sheet-mist .landing-card:hover {
    border-color: transparent;
  }

  .landing-page .media-frame {
    border-radius: 18px;
    overflow: hidden;
    background: #ffffff;
    border: 6px solid #ffffff;
    box-shadow: 0 30px 60px -30px rgba(27, 29, 30, 0.45), 0 0 0 1px rgba(27, 29, 30, 0.06);
  }

  /* Gold disc for icons and step numbers */
  .landing-page .gold-disc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 9999px;
    background: var(--pte-gold);
    color: #1b1d1e;
    font-family: var(--font-display);
    font-weight: 700;
  }

  .landing-page .check-icon {
    color: var(--pte-gold-deep);
    flex-shrink: 0;
  }

  /* How-it-works step ring, with the dashed connector PTE uses */
  .landing-page .step-ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 9999px;
    background: #ffffff;
    border: 1px solid var(--pte-line);
    box-shadow: 0 10px 24px -14px rgba(27, 29, 30, 0.4);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--pte-ink);
    position: relative;
    z-index: 1;
  }

  .landing-page .step-connector {
    position: absolute;
    top: 2.25rem;
    left: calc(50% + 2.75rem);
    width: calc(100% - 5.5rem + 1.5rem);
    border-top: 2px dashed var(--pte-line);
  }

  /* FAQ Accordion */
  .landing-page .faq-item {
    background: linear-gradient(180deg, #ffffff 0%, #f3f7fb 100%);
    border: 1px solid var(--pte-line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 14px -10px rgba(27, 29, 30, 0.3);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .landing-page .faq-item-open {
    border-color: rgba(184, 135, 11, 0.45);
    box-shadow: 0 10px 24px -16px rgba(184, 135, 11, 0.6);
  }

  .landing-page .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    padding: 0 1.5rem;
  }

  .landing-page .faq-answer.open {
    max-height: 400px;
    padding-bottom: 1.25rem;
  }

  .landing-page .faq-chevron {
    color: var(--pte-ink);
    transition: transform 0.3s ease;
  }

  .landing-page .faq-chevron.rotated {
    transform: rotate(180deg);
  }

  /* Video thumbnail: poster frame, a soft shade for the title, and the PTE gold play button */
  .landing-page .video-cover {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    color: #ffffff;
    text-align: left;
    cursor: pointer;
  }

  .landing-page .video-cover:focus-visible {
    outline: 3px solid var(--pte-gold);
    outline-offset: 3px;
  }

  .landing-page .video-cover-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 13, 13, 0) 40%, rgba(13, 13, 13, 0.78) 100%);
    transition: background-color 0.3s;
  }

  .landing-page .video-cover:hover .video-cover-shade {
    background-color: rgba(13, 13, 13, 0.12);
  }

  .landing-page .video-play {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 9999px;
    background: linear-gradient(180deg, #e6ab13 0%, #b07f08 100%);
    box-shadow: 0 0 0 8px rgba(245, 183, 20, 0.28), 0 18px 40px -12px rgba(0, 0, 0, 0.6);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  .landing-page .video-play svg {
    width: 1.75rem;
    height: 1.75rem;
    margin-left: 0.2rem;
  }

  .landing-page .video-cover:hover .video-play {
    transform: scale(1.07);
    box-shadow: 0 0 0 12px rgba(245, 183, 20, 0.22), 0 18px 40px -12px rgba(0, 0, 0, 0.6);
  }

  .landing-page .video-cover-text {
    position: absolute;
    left: 1.25rem;
    right: 4.5rem;
    bottom: 1.1rem;
    display: grid;
    gap: 0.25rem;
  }

  .landing-page .video-cover-eyebrow {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #f5cf63;
  }

  .landing-page .video-cover-title {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 2.6vw, 1.75rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    text-wrap: balance;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
  }

  .landing-page .video-cover-time {
    position: absolute;
    right: 1.1rem;
    bottom: 1.1rem;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    background: rgba(13, 13, 13, 0.6);
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  /* The portrait testimonial is narrow: tighter type, smaller button */
  .landing-page .aspect-\[9\/16\] .video-play {
    position: absolute;
    top: 64%; /* below the speaker's face and mic, on the shirt */
    left: 50%;
    width: 3.75rem;
    height: 3.75rem;
    margin: -1.875rem 0 0 -1.875rem;
  }
  .landing-page .aspect-\[9\/16\] .video-cover-text { left: 1rem; bottom: 1rem; right: 3.75rem; }
  .landing-page .aspect-\[9\/16\] .video-cover-title { font-size: 1.05rem; }
  .landing-page .aspect-\[9\/16\] .video-cover-time { right: 0.9rem; bottom: 1rem; }

  /* ---------- Lead race: one request, five businesses, one booking ----------
     The controller sets data-stage (0 = step 1 at rest, then 1-4) on .lead-race.
     Every stage's text is already in the markup, stacked in one grid cell, so
     rows never change height between steps; only the matching variant shows. */
  .landing-page .lead-race {
    background: var(--pte-mist);
    border-radius: 1.75rem;
    padding: 1.25rem 1rem 1.5rem;
  }

  @media (min-width: 768px) {
    .landing-page .lead-race {
      border-radius: 2.25rem;
      padding: 2.25rem 2.5rem 2rem;
    }
  }

  .landing-page .lr-stack {
    display: grid;
  }

  .landing-page .lr-variant {
    grid-area: 1 / 1;
    visibility: hidden;
    opacity: 0;
  }

  .landing-page .lead-race:is([data-stage="0"], [data-stage="1"]) .lr-variant[data-at="1"],
  .landing-page .lead-race[data-stage="2"] .lr-variant[data-at="2"],
  .landing-page .lead-race[data-stage="3"] .lr-variant[data-at="3"],
  .landing-page .lead-race[data-stage="4"] .lr-variant[data-at="4"] {
    visibility: visible;
    opacity: 1;
    animation: lr-pop 0.35s ease both;
  }

  /* Replies land one business at a time; until its reply lands, a row keeps its step-1 text */
  .landing-page .lead-race[data-stage="2"] .lr-row .lr-variant[data-at="2"] {
    animation-delay: calc(var(--i) * 0.6s + 0.3s);
  }

  .landing-page .lead-race[data-stage="2"] .lr-row .lr-variant[data-at="1"] {
    visibility: visible;
    animation: lr-leave 0.2s ease calc(var(--i) * 0.6s + 0.3s) both;
  }

  /* Step tracker */
  .landing-page .lr-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 1.75rem;
  }

  .landing-page .lr-step {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    padding: 0.25rem 0;
    text-align: left;
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--pte-subtle);
    cursor: pointer;
    transition: color 0.3s;
  }

  .landing-page .lr-step:hover,
  .landing-page .lr-step:is([data-state="active"], [data-state="done"]) {
    color: var(--pte-ink);
  }

  .landing-page .lr-step:focus-visible {
    outline: 2px solid var(--pte-gold-deep);
    outline-offset: 4px;
    border-radius: 6px;
  }

  .landing-page .lr-step-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
  }

  @media (max-width: 479px) {
    .landing-page .lr-step { font-size: 0.75rem; }
    .landing-page .lr-step-label { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  }

  .landing-page .lr-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 9999px;
    background: #ffffff;
    border: 1px solid var(--pte-line);
    color: var(--pte-ink);
    font-size: 0.6875rem;
    transition: background-color 0.3s, border-color 0.3s;
  }

  .landing-page .lr-step:is([data-state="active"], [data-state="done"]) .lr-step-num {
    background: var(--pte-gold);
    border-color: var(--pte-gold);
    color: #1b1d1e;
  }

  .landing-page .lr-step-track {
    display: block;
    align-self: stretch;
    width: 100%;
    height: 3px;
    border-radius: 3px;
    background: rgba(27, 29, 30, 0.1);
    overflow: hidden;
  }

  .landing-page .lr-step-fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--pte-gold-deep);
  }

  .landing-page .lr-step:is([data-state="active"], [data-state="done"]) .lr-step-fill {
    width: 100%;
  }

  .landing-page .lead-race[data-playing="true"] .lr-step[data-state="active"] .lr-step-fill {
    width: 0;
    animation: lr-fill var(--lr-step-ms, 3s) linear forwards;
  }

  .landing-page .lr-captions {
    margin-bottom: 1.75rem;
  }

  /* Board: the request on the left (top on phones), the five businesses beside it */
  .landing-page .lr-board {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  @media (min-width: 900px) {
    .landing-page .lr-board {
      grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
      column-gap: clamp(4rem, 8vw, 7rem);
      align-items: center;
    }
  }

  .landing-page .lr-wires {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }

  .landing-page .lr-lead,
  .landing-page .lr-rows {
    position: relative;
    z-index: 1;
  }

  .landing-page .lr-lead {
    background: #ffffff;
    border: 1px solid var(--pte-line);
    border-radius: 1.25rem;
    padding: 1.25rem;
    box-shadow: 0 20px 40px -28px rgba(27, 29, 30, 0.45);
    transition: border-color 0.4s, box-shadow 0.4s;
  }

  .landing-page .lead-race[data-stage="4"] .lr-lead {
    border-color: #e3c26a;
    box-shadow: 0 0 0 3px rgba(245, 183, 20, 0.2), 0 20px 40px -28px rgba(184, 135, 11, 0.6);
  }

  .landing-page .lr-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
  }

  .landing-page .lr-avatar-lead {
    background: var(--pte-ink);
    color: #ffffff;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.8125rem;
  }

  .landing-page .lr-avatar-them {
    background: #e6ecee;
    color: var(--pte-subtle);
  }

  .landing-page .lr-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.25;
    color: var(--pte-ink);
  }

  .landing-page .lr-sub {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--pte-subtle);
  }

  .landing-page .lr-row[data-outcome="win"] .lr-sub {
    color: var(--pte-gold-text);
    font-weight: 500;
  }

  .landing-page .lr-bubble {
    background: var(--pte-mist);
    color: var(--pte-ink);
    border-radius: 1rem 1rem 1rem 0.25rem;
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .landing-page .lr-lead-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--pte-ink);
  }

  .landing-page .lr-live-dot {
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--pte-gold);
    animation: lr-ping 1.6s ease-out infinite;
  }

  .landing-page .lead-race[data-stage="4"] .lr-live-dot {
    animation: none;
    background: var(--pte-gold-deep);
  }

  .landing-page .lr-rows {
    display: grid;
    gap: 0.625rem;
    padding-left: 1.75rem; /* room for the phone rail drawn by the controller */
  }

  @media (min-width: 900px) {
    .landing-page .lr-rows { padding-left: 0; }
  }

  .landing-page .lr-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: #ffffff;
    border: 1px solid transparent;
    border-radius: 1rem;
    padding: 0.75rem 0.875rem;
    box-shadow: 0 1px 2px rgba(27, 29, 30, 0.05);
    transition: opacity 0.5s ease, filter 0.5s ease, border-color 0.4s, box-shadow 0.4s, transform 0.4s;
  }

  .landing-page .lr-row-main {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 0.375rem;
  }

  .landing-page .lr-row-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .landing-page .lr-chips {
    flex-shrink: 0;
    justify-items: end;
  }

  /* Narrow phones: the status chip drops under the business name */
  @media (max-width: 479px) {
    .landing-page .lr-row-head { flex-direction: column; gap: 0.4rem; }
    .landing-page .lr-chips { justify-items: start; }
  }

  .landing-page .lr-chip {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    border-radius: 9999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
  }

  .landing-page .lr-chip-new   { background: var(--pte-mist); color: var(--pte-ink); }
  .landing-page .lr-chip-gold  { background: #fff3cc; color: #6b4d03; box-shadow: inset 0 0 0 1px #f0d27a; }
  .landing-page .lr-chip-muted { background: #eef1f2; color: #555555; }
  .landing-page .lr-chip-ink   { background: var(--pte-ink); color: #ffffff; }
  .landing-page .lr-chip-win   { background: linear-gradient(180deg, var(--pte-gold), #e3a912); color: #1b1d1e; }
  .landing-page .lr-chip-faded { background: #eef1f2; color: var(--pte-subtle); }
  .landing-page .lr-chip-lost  { background: transparent; color: var(--pte-subtle); box-shadow: inset 0 0 0 1px var(--pte-line); }

  .landing-page .lr-msg {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--pte-body);
  }

  .landing-page .lr-row[data-outcome="win"] .lr-msg {
    color: #2b2b2b;
  }

  /* Step 3: Sarah answers two. Step 4: the best reply wins, the rest go gray. */
  .landing-page .lead-race[data-stage="3"] .lr-row[data-outcome="lost"] {
    opacity: 0.5;
  }

  .landing-page .lead-race[data-stage="3"] .lr-row:not([data-outcome="lost"]) {
    border-color: var(--pte-line);
  }

  .landing-page .lead-race[data-stage="4"] .lr-row:not([data-outcome="win"]) {
    opacity: 0.4;
    filter: grayscale(1);
  }

  .landing-page .lead-race[data-stage="4"] .lr-row[data-outcome="win"] {
    border-color: #e3c26a;
    box-shadow: 0 0 0 3px rgba(245, 183, 20, 0.22), 0 18px 36px -20px rgba(184, 135, 11, 0.7);
    transform: scale(1.02);
  }

  /* Wires and the pulses that travel along them (pathLength=100 on each pulse) */
  .landing-page .lr-wire {
    fill: none;
    stroke: #c5cfd2;
    stroke-width: 1.5;
    transition: stroke 0.4s, stroke-width 0.4s, opacity 0.5s;
  }

  .landing-page .lr-pulse {
    fill: none;
    stroke: var(--pte-gold);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 8 100;
    stroke-dashoffset: 8;
    opacity: 0;
  }

  .landing-page .lead-race[data-stage="1"] .lr-pulse {
    opacity: 1;
    animation: lr-forward 1.25s ease-in-out calc(var(--i) * 0.07s) 2 both;
  }

  .landing-page .lead-race[data-stage="2"] .lr-pulse {
    opacity: 1;
    stroke: #9aa4a7;
    animation: lr-backward 1s ease-in-out calc(var(--i) * 0.6s + 0.3s) both;
  }

  .landing-page .lead-race[data-stage="2"] .lr-pulse[data-outcome="win"] {
    stroke: var(--pte-gold);
  }

  .landing-page .lead-race[data-stage="3"] .lr-pulse:not([data-outcome="lost"]) {
    opacity: 1;
    stroke: var(--pte-ink);
    animation: lr-forward 1.1s ease-in-out 0.25s 2 both;
  }

  .landing-page .lead-race[data-stage="3"] .lr-wire[data-outcome="lost"] {
    opacity: 0.35;
  }

  .landing-page .lead-race[data-stage="4"] .lr-wire:not([data-outcome="win"]) {
    opacity: 0.15;
  }

  .landing-page .lead-race[data-stage="4"] .lr-wire[data-outcome="win"] {
    stroke: var(--pte-gold-deep);
    stroke-width: 2.5;
  }

  .landing-page .lr-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(27, 29, 30, 0.08);
  }

  .landing-page .lr-replay {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    background: #ffffff;
    border: 1px solid var(--pte-line);
    border-radius: 9999px;
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--pte-ink);
    cursor: pointer;
    transition: border-color 0.2s;
  }

  .landing-page .lr-replay:hover {
    border-color: #c3cdd0;
  }

  .landing-page .lr-replay:focus-visible {
    outline: 2px solid var(--pte-gold-deep);
    outline-offset: 2px;
  }

  @keyframes lr-pop {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
  }

  @keyframes lr-leave {
    from { opacity: 1; visibility: visible; }
    to   { opacity: 0; visibility: hidden; }
  }

  @keyframes lr-fill {
    from { width: 0; }
    to   { width: 100%; }
  }

  @keyframes lr-forward {
    from { stroke-dashoffset: 8; }
    to   { stroke-dashoffset: -100; }
  }

  @keyframes lr-backward {
    from { stroke-dashoffset: -100; }
    to   { stroke-dashoffset: 8; }
  }

  @keyframes lr-ping {
    from { box-shadow: 0 0 0 0 rgba(245, 183, 20, 0.55); }
    to   { box-shadow: 0 0 0 8px rgba(245, 183, 20, 0); }
  }

  /* Fade-Up Scroll Animation */
  .landing-page .fade-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }

  .landing-page .fade-up.visible {
    opacity: 1;
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: reduce) {
    .landing-page .fade-up { opacity: 1; transform: none; transition: none; }
    .landing-page .btn-cta-pulse { animation: none; }
    .landing-page .landing-card, .landing-page .btn-gold, .landing-page .btn-ghost, .landing-page .btn-pill-light { transition: none; }
    /* The story holds still: steps change only when a visitor picks one */
    .landing-page .lead-race, .landing-page .lead-race * { animation: none !important; transition: none !important; }
    .landing-page .lead-race[data-stage="2"] .lr-row .lr-variant[data-at="1"] { visibility: hidden; }
    .landing-page .lr-pulse { display: none; }
  }
}

/* Sign-in page: the landing hero wash with the form card centered on every screen size */
@layer components {
  .landing-page .auth-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
  }

  .landing-page .auth-card,
  .landing-page .auth-card:hover {
    border-color: var(--pte-line);
    box-shadow: 0 24px 60px -32px rgba(27, 29, 30, 0.35);
  }

  .landing-page .auth-link {
    color: var(--pte-gold-text);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: rgba(138, 99, 4, 0.35);
    text-underline-offset: 4px;
  }

  .landing-page .auth-link:hover {
    text-decoration-color: currentColor;
  }

  .landing-page .auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8125rem;
    color: var(--pte-subtle);
  }

  .landing-page .auth-divider::before,
  .landing-page .auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--pte-line);
  }

  .landing-page .auth-flash {
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    line-height: 1.45;
  }

  .landing-page .auth-flash-alert {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
  }

  .landing-page .auth-flash-notice {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
  }
}

/* Sign-in form controls. The app's dark input and label styles are unlayered, so these are too;
   the .landing-page prefix gives them the higher specificity that wins. */
.landing-page .auth-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--pte-ink);
}

.landing-page .auth-label-inline {
  display: inline;
  font-family: var(--font-body);
  font-weight: 400;
}

.landing-page .auth-input {
  display: block;
  width: 100%;
  margin-top: 0.375rem;
  padding: 0.75rem 0.875rem;
  font-size: 1rem; /* 16px keeps iOS from zooming in on focus */
  background-color: #ffffff;
  color: var(--pte-ink);
  border: 1px solid var(--pte-line);
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.landing-page .auth-input:focus {
  outline: none;
  border-color: var(--pte-gold-deep);
  box-shadow: 0 0 0 3px rgba(245, 183, 20, 0.25);
}

.landing-page .auth-check {
  width: 1rem;
  height: 1rem;
  accent-color: var(--pte-gold-deep);
}