{%- comment -%}cb-3-2026-05-08T07-22Z{%- endcomment -%}
<!-- cache-bust:3 -->
<!-- Ripple Drop · Headless · No-scroll viewport fit · 2026-05-08 -->
<!-- Klaviyo company_id Sn4Deg · list URsnJ6 (Ripple Drop Early Access, double opt-in) -->
<!-- BACKGROUND IMAGE: edit --rd-bg-image below to swap. Use Shopify CDN URL or any https:// asset. -->
<style>
  /* Hide theme chrome for headless · scoped to #ripple-drop-takeover */
  body:has(#ripple-drop-takeover) header,
  body:has(#ripple-drop-takeover) .header-wrapper,
  body:has(#ripple-drop-takeover) .site-header,
  body:has(#ripple-drop-takeover) [data-section-type*="header"],
  body:has(#ripple-drop-takeover) [class*="announcement-bar"],
  body:has(#ripple-drop-takeover) footer,
  body:has(#ripple-drop-takeover) .footer-wrapper,
  body:has(#ripple-drop-takeover) .site-footer,
  body:has(#ripple-drop-takeover) [data-section-type*="footer"] { display: none !important; }
  body:has(#ripple-drop-takeover) main,
  body:has(#ripple-drop-takeover) .main-content,
  body:has(#ripple-drop-takeover) #MainContent { padding: 0 !important; margin: 0 !important; max-width: 100vw !important; }
  body:has(#ripple-drop-takeover) { margin: 0; padding: 0; background: #000; }
  html:has(#ripple-drop-takeover) { background: #000; }

  :root {
    /* SWAP THIS URL when Jack uploads the new background asset.
       Use a Shopify-hosted image (cdn.shopify.com/s/files/...) or any https URL.
       Solid black is the fallback if URL fails. */
    --rd-bg-image: url('');
    --rd-ink: #F5F5F1;
    --rd-muted: rgba(245, 245, 241, 0.55);
    --rd-paper-border: rgba(255, 255, 255, 0.12);
    --rd-teal: #008670;
    --rd-teal-deep: #00A488;
    --rd-warn: #E36758;
  }

  #ripple-drop-takeover * { box-sizing: border-box; }
  #ripple-drop-takeover {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: #000 var(--rd-bg-image) center / cover no-repeat;
    color: var(--rd-ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    overflow: hidden;
    z-index: 1;
  }

  /* Veil for legibility over Jack's bg image */
  .rd-veil {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.6) 70%, rgba(0, 0, 0, 0.85) 100%),
      linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
  }

  .rd-shell {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    max-width: 460px;
    margin: 0 auto;
    padding: max(28px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom)) 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .rd-top { flex: 0 0 auto; }
  .rd-mark {
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--rd-muted);
  }

  .rd-mid {
    flex: 0 0 auto;
    margin: 12px 0 18px 0;
  }
  .rd-headline {
    font-family: 'Fraunces', 'Times New Roman', serif;
    font-size: 38px;
    line-height: 1.04;
    letter-spacing: -0.02em;
    font-weight: 500;
    margin: 0 0 12px 0;
    color: var(--rd-ink);
  }
  .rd-sub {
    font-size: 15px;
    color: rgba(245, 245, 241, 0.78);
    margin: 0;
  }

  .rd-bottom {
    flex: 0 0 auto;
  }
  form.rd-form { margin: 0; }
  .rd-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0 0 10px 0;
  }
  .rd-input {
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    padding: 13px 12px;
    border: 1px solid var(--rd-paper-border);
    border-radius: 4px;
    background: rgba(0,0,0,0.55);
    color: var(--rd-ink);
    -webkit-appearance: none;
    appearance: none;
  }
  .rd-input::placeholder { color: rgba(245, 245, 241, 0.4); }
  .rd-input:focus {
    outline: none;
    border-color: var(--rd-teal);
    box-shadow: 0 0 0 3px rgba(0,134,112,0.25);
    background: rgba(0,0,0,0.7);
  }

  .rd-check-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 8px 0 12px 0;
  }
  .rd-check-row input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: var(--rd-teal);
    width: 15px;
    height: 15px;
  }
  .rd-check-text {
    font-size: 12px;
    color: rgba(245, 245, 241, 0.78);
    line-height: 1.45;
  }

  .rd-cta {
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 15px 22px;
    border: 0;
    border-radius: 4px;
    background: var(--rd-teal);
    color: #FFF;
    cursor: pointer;
    transition: background 120ms ease, transform 80ms ease;
  }
  .rd-cta:hover { background: var(--rd-teal-deep); }
  .rd-cta:active { transform: scale(0.99); }
  .rd-cta:disabled { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.4); cursor: not-allowed; }

  .rd-fine {
    font-size: 11px;
    color: rgba(245, 245, 241, 0.45);
    line-height: 1.5;
    margin: 10px 0 0 0;
    text-align: center;
  }
  .rd-fine a { color: rgba(245, 245, 241, 0.65); text-decoration: underline; }

  .rd-msg {
    margin: 10px 0 0 0;
    font-size: 13px;
    line-height: 1.45;
    padding: 10px 12px;
    border-radius: 4px;
    display: none;
  }
  .rd-msg.show { display: block; }
  .rd-msg.success {
    background: rgba(0,134,112,0.18);
    color: #6BD6BC;
    border: 1px solid rgba(0,134,112,0.35);
  }
  .rd-msg.error {
    background: rgba(227,103,88,0.12);
    color: var(--rd-warn);
    border: 1px solid rgba(227,103,88,0.35);
  }

  /* Mobile narrow */
  @media (max-width: 380px) {
    .rd-headline { font-size: 32px; }
    .rd-sub { font-size: 14px; }
  }
  /* Short viewport (landscape phones) */
  @media (max-height: 640px) {
    .rd-shell { padding-top: 16px; padding-bottom: 16px; }
    .rd-mid { margin: 6px 0 10px 0; }
    .rd-headline { font-size: 28px; }
    .rd-sub { font-size: 13px; }
    .rd-row { margin-bottom: 6px; }
    .rd-check-row { margin: 4px 0 8px 0; }
  }
  /* Stack to single column on very narrow if grid feels cramped */
  @media (max-width: 340px) {
    .rd-row { grid-template-columns: 1fr; }
  }
</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap">

<div id="ripple-drop-takeover">
  <div class="rd-veil"></div>
  <div class="rd-shell">

    <div class="rd-top">
      <div class="rd-mark">Ripple · The Smart Sups</div>
    </div>

    <div class="rd-mid">
      <h1 class="rd-headline">Ripple is back. Be first in.</h1>
      <p class="rd-sub">Watermelon Yuzu. Peach Mango. The early-access list gets in 24 hours before public.</p>
    </div>

    <div class="rd-bottom">
      <form class="rd-form" id="rdForm" novalidate>
        <div class="rd-row">
          <input class="rd-input" type="email" id="rdEmail" name="email" autocomplete="email" inputmode="email" placeholder="Email" required aria-label="Email">
          <input class="rd-input" type="tel" id="rdPhone" name="phone" autocomplete="tel" inputmode="tel" placeholder="Phone (optional)" aria-label="Phone for SMS">
        </div>

        <label class="rd-check-row">
          <input type="checkbox" id="rdSmsConsent" name="sms_consent">
          <span class="rd-check-text">Yes, text me 1 to 2 SMS for the drop. Reply STOP any time. Msg and data rates may apply.</span>
        </label>

        <button class="rd-cta" type="submit" id="rdSubmit">Get me on the list</button>

        <div class="rd-msg" id="rdMsg"></div>

        <p class="rd-fine">Marketing email from The Smart Sups. SMS consent independent. <a href="/policies/privacy-policy" rel="noopener">Privacy</a> · <a href="/policies/terms-of-service" rel="noopener">Terms</a></p>
      </form>
    </div>

  </div>
</div>

<script>
(function () {
  var KLAVIYO_COMPANY_ID = "Sn4Deg";
  var RIPPLE_DROP_LIST_ID = "URsnJ6";
  var SUBSCRIPTIONS_ENDPOINT = "https://a.klaviyo.com/client/subscriptions/?company_id=" + KLAVIYO_COMPANY_ID;

  var form = document.getElementById("rdForm");
  if (!form) return;
  var emailEl = document.getElementById("rdEmail");
  var phoneEl = document.getElementById("rdPhone");
  var smsEl = document.getElementById("rdSmsConsent");
  var msgEl = document.getElementById("rdMsg");
  var submitBtn = document.getElementById("rdSubmit");

  function setMsg(type, text) {
    msgEl.className = "rd-msg show " + type;
    msgEl.textContent = text;
  }
  function clearMsg() {
    msgEl.className = "rd-msg";
    msgEl.textContent = "";
  }
  function normalisePhone(raw) {
    if (!raw) return "";
    var trimmed = raw.replace(/\s|-|\(|\)/g, "");
    if (!trimmed) return "";
    if (trimmed.charAt(0) === "+") return trimmed;
    if (trimmed.charAt(0) === "0" && trimmed.length === 10) return "+61" + trimmed.substring(1);
    if (trimmed.charAt(0) === "4" && trimmed.length === 9) return "+61" + trimmed;
    return trimmed.charAt(0) === "+" ? trimmed : "+" + trimmed;
  }

  form.addEventListener("submit", function (e) {
    e.preventDefault();
    clearMsg();

    var email = (emailEl.value || "").trim();
    var phoneRaw = (phoneEl.value || "").trim();
    var smsOptIn = !!smsEl.checked;

    if (!email || email.indexOf("@") < 0) {
      setMsg("error", "Need an email to put you on the list.");
      emailEl.focus();
      return;
    }
    if (smsOptIn && !phoneRaw) {
      setMsg("error", "Add a phone number, or untick the SMS box.");
      phoneEl.focus();
      return;
    }

    submitBtn.disabled = true;
    submitBtn.textContent = "Submitting...";

    var phone = phoneRaw ? normalisePhone(phoneRaw) : "";
    var subscriptions = { email: { marketing: { consent: "SUBSCRIBED" } } };
    var profileAttrs = { email: email };
    if (phone && smsOptIn) {
      profileAttrs.phone_number = phone;
      subscriptions.sms = { marketing: { consent: "SUBSCRIBED" } };
    } else if (phone) {
      profileAttrs.phone_number = phone;
    }
    profileAttrs.subscriptions = subscriptions;

    var payload = {
      data: {
        type: "subscription",
        attributes: {
          custom_source: "Ripple Drop Landing Page",
          profile: { data: { type: "profile", attributes: profileAttrs } }
        },
        relationships: {
          list: { data: { type: "list", id: RIPPLE_DROP_LIST_ID } }
        }
      }
    };

    fetch(SUBSCRIPTIONS_ENDPOINT, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "revision": "2025-04-15"
      },
      body: JSON.stringify(payload)
    })
    .then(function (resp) {
      if (resp.status === 202 || resp.status === 200) {
        setMsg("success", smsOptIn
          ? "You are in. Check your email and phone for the confirmation."
          : "You are in. Check your email for the confirmation.");
        form.reset();
        submitBtn.textContent = "On the list";
        if (window.posthog && typeof window.posthog.capture === "function") {
          window.posthog.capture("Ripple Drop Capture", { sms_opt_in: smsOptIn });
        }
        return null;
      }
      return resp.json().then(function (j) {
        var detail = (j && j.errors && j.errors[0] && j.errors[0].detail) || "Could not subscribe. Try again in a minute.";
        setMsg("error", detail);
        submitBtn.disabled = false;
        submitBtn.textContent = "Get me on the list";
      });
    })
    .catch(function () {
      setMsg("error", "Network hiccup. Try again in a minute.");
      submitBtn.disabled = false;
      submitBtn.textContent = "Get me on the list";
    });
  });
})();
</script>