/* Extracted from resources/views/services/ppf.blade.php. */

html { scroll-behavior: smooth; scroll-padding-top: 6rem; }

    body {
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      color: #f6f4f5;
    }

    h1, h2, h3 {
      font-family: system-ui, sans-serif;
      letter-spacing: -0.02em;
    }

    /* Body copy sits below headings, not level with them.
       The old page forced .text-muted to pure white, which removed
       every level of hierarchy on the page. */
    .lede { color: #cfc9cb; }
    .copy { color: #a8a1a4; }

    .eyebrow {
      font-size: .75rem;
      font-weight: 600;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: #ffd900;
    }

    .rule-gold { background: linear-gradient(90deg, #ffd900, rgba(255,217,0,0)); height: 2px; }

    :where(a, button, summary, input, select, textarea):focus-visible {
      outline: 2px solid #ffd900;
      outline-offset: 3px;
      border-radius: .5rem;
    }

    /* In-page nav active state */
    .subnav a[aria-current="true"] { color: #ffd900; border-color: #ffd900; }

    /* Before / after comparison slider */
    .compare { position: relative; overflow: hidden; }
    .compare .after-img {
      position: absolute; inset: 0;
      clip-path: inset(0 0 0 var(--pos, 50%));
    }
    .compare .divider {
      position: absolute; top: 0; bottom: 0;
      left: var(--pos, 50%);
      width: 2px; background: #ffd900;
      transform: translateX(-1px);
      pointer-events: none;
    }
    .compare .knob {
      position: absolute; top: 50%; left: var(--pos, 50%);
      transform: translate(-50%, -50%);
      height: 2.75rem; width: 2.75rem; border-radius: 999px;
      background: #ffd900; color: #120f11;
      display: grid; place-items: center; font-weight: 700;
      pointer-events: none;
      box-shadow: 0 6px 20px rgba(0,0,0,.6);
    }
    .compare input[type="range"] {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      margin: 0; opacity: 0; cursor: ew-resize;
    }

    /* Process rail */
    @media (min-width: 1024px) {
      .rail > li { position: relative; }
      .rail > li:not(:last-child)::after {
        content: ""; position: absolute; top: 1.375rem; left: 3.25rem; right: -1.25rem;
        height: 1px; background: rgba(255,255,255,.12);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
    }