/* ringly.io/demo — the shareable one-screen call page.
   HARD RULES: it NEVER scrolls, and it stays stupidly simple. Mark, orb, headline, button.
   Every size is clamp()'d off viewport height so a short screen shrinks the type instead of
   spawning a scrollbar. Loads AFTER fold.css and overrides only what this layout needs. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: #1C1917;
  background:
    radial-gradient(120% 90% at 50% 0%, #FFFFFF 0%, rgba(244,240,233,0.55) 60%, rgba(240,235,226,0.8) 100%),
    #FFFFFF;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(18px, 3vh, 34px) clamp(18px, 4vw, 40px);
}

.stage {
  min-height: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  gap: clamp(12px, 2vh, 24px);
}

/* the wordmark sits in the stack, not in a header bar — one less thing on the page */
.mark { height: clamp(26px, 3.4vh, 36px); width: auto; display: block; opacity: .92; }

.stage h1 {
  font-family: 'Geist', 'Inter', sans-serif;
  font-weight: 600; letter-spacing: -0.033em; line-height: 1.06;
  color: #0A0A0A;
  font-size: clamp(30px, 6.4vh, 62px);
  max-width: 18ch;
}

/* the Shopify bag, set inline in the headline like the approved homepage hero */
.bag {
  height: 0.86em; width: auto;
  display: inline-block; vertical-align: -0.1em;
  margin-right: 0.06em;
}

/* the resting orb — steps aside once the call takes over */
.orb {
  position: relative;
  width: clamp(74px, 11.5vh, 108px); height: clamp(74px, 11.5vh, 108px);
  border-radius: 999px; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 32% 28%, #22B85A 0%, #16A34A 52%, #12833C 100%);
  box-shadow: 0 14px 30px -10px rgba(18,131,60,.6), 0 2px 6px rgba(12,74,36,.28);
}
.orb svg { width: 44%; height: 44%; }
.orb::before, .orb::after {
  content: ''; position: absolute; inset: 0; border-radius: 999px;
  border: 1.5px solid rgba(22,163,74,.42);
  animation: dmRipple 2.9s ease-out infinite;
}
.orb::after { animation-delay: 1.45s; }
@keyframes dmRipple {
  0%   { transform: scale(1);    opacity: .75; }
  100% { transform: scale(1.72); opacity: 0; }
}

/* ── the one button (overrides fold.css sizing for this page) ────── */
.rhd--demo { display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1.2vh, 14px); width: 100%; }
.rhd--demo .rhd-bar { display: flex; justify-content: center; margin: 0; }
/* a green PILL starts a call — the design system's rule, and it reads as a call button
   rather than a form submit */
.rhd--demo .rhd-btn {
  height: clamp(54px, 7.6vh, 68px);
  padding: 0 clamp(30px, 3.8vw, 48px);
  border-radius: 999px;
  font: 600 clamp(16.5px, 2.2vh, 20px)/1 'Inter', sans-serif;
  gap: 11px;
}
.rhd--demo .rhd-under { margin: 0; }
.rhd--demo .rhd-under-txt { font: 400 clamp(12px, 1.6vh, 14px)/1.4 'Inter', sans-serif; color: #78716C; }

/* the phone alternative — quiet, one line, never competing with the green button */
.orcall {
  font: 400 clamp(13px, 1.75vh, 15px)/1.4 'Inter', sans-serif;
  color: #78716C; margin: 0;
}
.orcall a {
  color: #1C1917; font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(28,25,23,.25); padding-bottom: 1px;
  white-space: nowrap;
}
.orcall a:hover { border-bottom-color: #1C1917; }

/* Errors must be UNMISSABLE. Ruben, 2026-07-23: a cap trip reset the button and printed a
   faint grey line, so the page read as "I clicked and nothing happened" — the single worst
   thing that can happen to a stranger from a community link. It is a card now, not a whisper. */
.rhd--demo .rhd-error {
  font: 500 clamp(13.5px, 1.8vh, 15.5px)/1.5 'Inter', sans-serif;
  color: #1C1917; max-width: 40ch; margin: 0;
  background: #fff; border: 1px solid #E7E5E4; border-left: 3px solid #D97706;
  border-radius: 12px; padding: 12px 16px; text-align: left;
  box-shadow: 0 1px 2px rgba(28,25,23,.05), 0 12px 28px -14px rgba(28,25,23,.25);
}
.rhd--demo .rhd-error a { color: #16A34A; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.rhd--demo .rhd-error a:hover { color: #15803D; }

/* ── ON CALL: the page gets out of the way ──────────────────────── */
/* fold.js puts .rhd-oncall on <html> from the first tap. Nothing is removed from the DOM,
   it just stops competing with the live call. The CTA is never inside a reveal. */
html.rhd-oncall .orb,
html.rhd-oncall .orcall,
html.rhd-oncall .mark { display: none; }
html.rhd-oncall .stage h1 { font-size: clamp(20px, 3.2vh, 30px); max-width: 22ch; opacity: .45; }

@media (prefers-reduced-motion: reduce) {
  .orb::before, .orb::after { animation: none; opacity: 0; }
}