Embed

<section id="careplus" class="cp-root" aria-labelledby="cp-title">
  <style>
    /* Scoped to #careplus to prevent leaking styles */
    #careplus { --cp-radius: 16px; --cp-gap: 1.25rem; }

    /* Light theme defaults */
    #careplus { --cp-bg: transparent; --cp-surface: #ffffff; --cp-text: #0b0d11; --cp-muted: #5b6472; --cp-border: #e7e9ee; --cp-accent: #3b82f6; }

    /* Dark mode */
    @media (prefers-color-scheme: dark) {
      #careplus { --cp-surface: #0f1115; --cp-text: #e8eaef; --cp-muted: #9aa3b2; --cp-border: #1c2430; --cp-accent: #60a5fa; }
    }

    #careplus .cp-container { margin: 0 auto; max-width: 1200px; padding: 2.5rem 1rem; }
    @media (min-width: 768px) { #careplus .cp-container { padding: 3rem 1.25rem; } }

    #careplus .cp-header { display: grid; gap: 0.75rem; margin-bottom: 1.5rem; text-align: left; }
    #careplus .cp-eyebrow { font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-muted); }
    #careplus .cp-title { font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem); line-height: 1.2; color: var(--cp-text); margin: 0; }
    #careplus .cp-intro { color: var(--cp-muted); font-size: 1rem; max-width: 65ch; }

    #careplus .cp-grid { display: grid; gap: var(--cp-gap); grid-template-columns: 1fr; }
    @media (min-width: 1024px) { #careplus .cp-grid { grid-template-columns: repeat(3, 1fr); } }

    #careplus .cp-card {
      background: var(--cp-surface);
      color: var(--cp-text);
      border: 1px solid var(--cp-border);
      border-radius: var(--cp-radius);
      padding: 1.25rem;
      min-height: 100%;
      box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.06);
    }

    #careplus .cp-card h3 { margin: 0 0 .75rem 0; font-size: 1.05rem; }
    #careplus .cp-card p { margin: 0 0 .75rem 0; color: var(--cp-muted); }

    #careplus .cp-list { margin: 0; padding-left: 1.1rem; display: grid; gap: .5rem; }
    #careplus .cp-list li { line-height: 1.4; }

    /* Optional: checked list style without external icons */
    #careplus .cp-list--checks { list-style: none; padding-left: 0; }
    #careplus .cp-list--checks li { position: relative; padding-left: 1.5rem; }
    #careplus .cp-list--checks li::before {
      content: "✔"; /* Why: improves scannability without extra assets */
      position: absolute; left: 0; top: 0; line-height: 1.2; color: var(--cp-accent);
      aria-hidden: true;
    }

    /* Subtle divider for smaller screens */
    #careplus .cp-divider { height: 1px; background: var(--cp-border); margin: 1rem 0; display: none; }
    @media (max-width: 1023.98px) { #careplus .cp-divider { display: block; } }
  </style>

  <div class="cp-container">
    <header class="cp-header">
      <span class="cp-eyebrow">After your first visit</span>
      <h2 id="cp-title" class="cp-title">Unlock <strong>CarePlus</strong></h2>
      <p class="cp-intro">Once you’ve had your first job with RPM Sussex, we’ll offer you CarePlus—an optional, per-vehicle membership that keeps costs down and aftercare easy. It takes 60 seconds to join, and you can cancel anytime.</p>
    </header>

    <div class="cp-grid" role="list">
      
      <article class="cp-card" role="listitem" aria-label="What you get">
        <h3>What you get</h3>
        <ul class="cp-list cp-list--checks">
          <li>Lower member labour rate on every visit</li>
          <li>Discounts on ECU/TCU software (maps &amp; functions, with sensible caps)</li>
          <li>Priority booking when you need us</li>
          <li>Booking Protection: one short-notice reschedule included (more on Pro)</li>
          <li>Lifetime Map File Backup of your stock &amp; tuned files</li>
          <li>Free OBD reverts where possible (bench revert fixed price)</li>
          <li>Unlimited discounted jobs while you’re a member</li>
        </ul>
      </article>

      
      <article class="cp-card" role="listitem" aria-label="How it works">
        <h3>How it works</h3>
        <ol class="cp-list">
          <li>After your first visit, we send you a join link.</li>
          <li>Choose Essential or Pro and add your registration.</li>
          <li>Book as normal—your member rate and perks apply automatically.</li>
        </ol>
      </article>

      
      <article class="cp-card" role="listitem" aria-label="Good to know">
        <h3>Good to know</h3>
        <ul class="cp-list">
          <li>CarePlus is per vehicle (locked to your reg).</li>
          <li>Discounts apply to labour and software; parts/hardware aren’t discounted.</li>
          <li>Priority is best-effort during opening hours.</li>
        </ul>
      </article>
    </div>

    <div class="cp-divider" aria-hidden="true"></div>

    
    <p class="cp-intro" style="margin-top:.25rem">Have questions about Essential vs Pro? Ask us when you book—CarePlus activates after your first job.</p>
  </div>
</section>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Pricing</title>

    
    <style>
      /* Why: eliminate default spacing and ensure predictable sizing */
      *, *::before, *::after { box-sizing: border-box; }
      html, body { height: 100%; }
      body {
        margin: 0;
        display: flex;
        min-height: 100vh;          /* Fallback */
        min-height: 100svh;         /* Mobile dynamic viewport */
        background: #0b0d11;        /* Subtle backdrop so edges are invisible */
      }

      .page {
        flex: 1;
        display: flex;
        align-items: stretch;
        justify-content: center;
        padding: 0;                 /* Avoid accidental horizontal scroll */
      }

      /* Make the custom element full-width and at least full-viewport tall */
      stripe-pricing-table {
        display: block;
        width: 100%;
        min-height: 100vh;          /* Fallback height */
        min-height: 100svh;         /* Mobile-aware height */
        background: transparent;
      }

      /* Desktop: ensure true full-screen feel (incl. large viewport units) */
      @media (min-width: 1024px) {
        body { min-height: 100lvh; }
        stripe-pricing-table { min-height: 100lvh; }
      }

      /* Optional: tiny, non-blocking loading indicator */
      .loader {
        position: fixed;
        inset: 0;
        display: grid;
        place-items: center;
        pointer-events: none;       /* Let clicks pass through once table loads */
        opacity: 1;
        transition: opacity 200ms ease-out;
        background: transparent;
      }
      .loader.hidden { opacity: 0; }
      .spinner {
        width: 40px; height: 40px;
        border-radius: 50%;
        border: 3px solid rgba(255,255,255,0.15);
        border-top-color: rgba(255,255,255,0.9);
        animation: spin 0.8s linear infinite;
      }
      @keyframes spin { to { transform: rotate(360deg); } }
    </style>

    
    <script async src="https://js.stripe.com/v3/pricing-table.js"></script>
  </head>
  <body>
    <div class="page">
      
      <div id="pricing-loader" class="loader" aria-hidden="true">
        <div class="spinner" role="status" aria-label="Loading pricing..."></div>
      </div>

      
      <stripe-pricing-table
        pricing-table-id="prctbl_1RzxE5KFQw411YPOMzXfNUIG"
        publishable-key="pk_test_51RzwtmKFQw411YPOZhLXfrXvV1dAXtQeutoMtaez4Vrb8PfWsiF0ErXyqPWsSGAlsR1dkseelrtbF9y9QlxP3RVY00Xihf8X3M">
      </stripe-pricing-table>
    </div>

    <script>
      // Why: provide a graceful loading state until Stripe hydrates the web component
      (function () {
        const loader = document.getElementById('pricing-loader');
        const table = document.querySelector('stripe-pricing-table');

        // Heuristic: hide the loader when the element is upgraded or after a timeout
        const hide = () => loader && loader.classList.add('hidden');

        // Custom elements API upgrade detection
        if (window.customElements && window.customElements.whenDefined) {
          window.customElements.whenDefined('stripe-pricing-table').then(() => {
            // Give Stripe a tick to mount the internal iframe
            requestAnimationFrame(() => setTimeout(hide, 150));
          });
        }

        // Fallback timeout in case the event above doesn't fire for any reason
        setTimeout(hide, 4000);

        // Defensive: hide the loader if the element signals readiness via events in future versions
        table?.addEventListener?.('load', hide, { once: true });
      })();
    </script>
  </body>
</html>