/* ==========================================================================
   Rovin — Design V4 "Signal"
   Art-directed marketing layer. Loaded AFTER style.css/app.css/dashboard.css
   so it wins over the V3 marketing rules; it only touches the marketing
   shell (.rv-header, .rv-footer, .rv-home, and the marketing page heroes).
   The diner app and the restaurant/admin dashboards are not restyled here.
   See DESIGN_DIRECTION_V4.md for the reasoning.
   ========================================================================== */

:root {
  --rv-deep: #04262C;
  --rv-deep-2: #063842;
  --rv-teal: #0B6573;
  --rv-aqua: #6CDAE7;
  --rv-aqua-2: #A6EEF4;
  --rv-wash: #DDF4F6;
  --rv-cream: #EEF6F7;
  --rv-paper: #EEF6F7;
  --rv-ink: #082A30;
  --rv-hot: #FF6B4A;       /* one warm spot color: CTAs + "live" only */
  --rv-hot-2: #FF8A6E;
  --rv-radius-xl: 44px;
  --rv-radius-lg: 30px;
  --rv-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Shared bits ---------- */
.rv-home { background: var(--rv-paper); color: var(--rv-ink); overflow-x: clip; }
.rv-home img { display: block; max-width: 100%; }
.rv-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--rv-teal);
}
.rv-eyebrow.on-dark { color: var(--rv-aqua); }
.rv-live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--rv-hot); box-shadow: 0 0 0 0 rgba(255,107,74,0.6);
  animation: rv-ping 1.8s ease-out infinite;
}
@keyframes rv-ping { 70% { box-shadow: 0 0 0 9px rgba(255,107,74,0); } 100% { box-shadow: 0 0 0 0 rgba(255,107,74,0); } }
.rv-h2 {
  font-family: var(--font-head); font-weight: 800; font-size: clamp(2.3rem, 5.4vw, 5rem);
  line-height: 0.98; letter-spacing: -0.035em; margin: 14px 0 0; max-width: 15ch;
}
.rv-h2.on-dark { color: var(--rv-cream); }
.rv-lead-d { font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.6; color: rgba(8,42,48,0.66); max-width: 52ch; margin: 22px 0 0; }
.rv-lead-d.on-dark { color: rgba(238, 246, 247,0.72); }

/* ---------- Buttons: pills with a sliding fill ---------- */
.rv-btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 10px 10px 26px; border-radius: 999px;
  font-family: var(--font-body); font-weight: 700; font-size: 1rem; line-height: 1;
  border: 1.5px solid transparent; white-space: nowrap;
  transition: color 0.35s var(--rv-ease), border-color 0.35s var(--rv-ease), transform 0.35s var(--rv-ease);
}
.rv-btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  transform: translateY(102%); transition: transform 0.45s var(--rv-ease);
}
.rv-btn:hover::before, .rv-btn:focus-visible::before { transform: translateY(0); }
.rv-btn:active { transform: scale(0.97); }
.rv-btn-arrow {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0,0,0,0.14); transition: background 0.35s var(--rv-ease), transform 0.45s var(--rv-ease);
}
.rv-btn:hover .rv-btn-arrow { transform: rotate(-45deg); }
.rv-btn-hot { background: var(--rv-aqua); color: var(--rv-ink); }
.rv-btn-hot::before { background: var(--rv-cream); }
/* A subtle dark backdrop of its own, not just a transparent outline: this button sits on a background that isn't always the
   same shade (a hero image, or — on the shorter inner-page heroes — wherever in the gradient it happens to land), so it needs
   to stay readable on its own rather than depending on tuning the gradient to always be dark enough at that exact spot. */
.rv-btn-ghost { color: var(--rv-cream); border-color: rgba(238, 246, 247,0.4); background: rgba(3,34,42,0.32); padding-left: 26px; }
.rv-btn-ghost .rv-btn-arrow { background: rgba(255,255,255,0.14); }
.rv-btn-ghost::before { background: var(--rv-cream); }
.rv-btn-ghost:hover { color: var(--rv-deep); border-color: var(--rv-cream); }
.rv-btn-ink { background: var(--rv-ink); color: var(--rv-cream); padding: 6px 6px 6px 18px; font-size: 0.9rem; }
.rv-btn-ink .rv-btn-arrow { width: 30px; height: 30px; background: rgba(255,255,255,0.14); }
.rv-btn-ink::before { background: var(--rv-aqua); }
.rv-btn-ink:hover { color: var(--rv-ink); }
.rv-btn:focus-visible { outline: 3px solid var(--rv-aqua); outline-offset: 3px; }

/* ==========================================================================
   NAV — floating pill
   ========================================================================== */
.rv-header {
  position: fixed; top: 14px; left: 0; right: 0; z-index: 100;
  background: none; border: 0; box-shadow: none; pointer-events: none; padding: 0 16px;
}
.rv-header.scrolled { box-shadow: none; }
.rv-header .nav {
  pointer-events: auto; position: relative; isolation: isolate; max-width: 1180px; margin: 0 auto; padding: 8px 8px 8px 22px;
  border-radius: 999px; color: inherit;
}
/* the glass lives on a pseudo-element: backdrop-filter on .nav itself would
   make it the containing block for the position:fixed mobile menu sheet */
.rv-header .nav::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  border: 1px solid rgba(8,42,48,0.08); background: rgba(255, 255, 255,0.86);
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: 0 10px 30px -14px rgba(4,38,44,0.35);
  transition: background 0.4s var(--rv-ease), border-color 0.4s var(--rv-ease), box-shadow 0.4s var(--rv-ease);
}
.rv-header .brand { font-weight: 800; letter-spacing: -0.02em; }
.rv-header .brand-mark { width: 34px; height: 34px; }
.rv-header .nav-links a { font-family: var(--font-body); font-size: 0.93rem; font-weight: 600; letter-spacing: 0; }
.rv-header .nav-links a::after { bottom: -2px; }
.rv-header .btn-primary { background: var(--rv-ink); color: var(--rv-cream); box-shadow: none; padding: 12px 22px; }
.rv-header .btn-primary:hover { background: var(--rv-deep); transform: translateY(-1px); box-shadow: none; }
/* Over the hero (top of the home page) the pill reads as smoked glass. */
.rv-header--hero:not(.scrolled) .nav::before {
  background: rgba(4,38,44,0.42); border-color: rgba(255,255,255,0.16); box-shadow: none;
}
.rv-header--hero:not(.scrolled) .nav { color: var(--rv-cream); }
.rv-header--hero:not(.scrolled) .brand,
.rv-header--hero:not(.scrolled) .nav-links a,
.rv-header--hero:not(.scrolled) .nav-links a.active { color: var(--rv-cream); }
.rv-header--hero:not(.scrolled) .btn-primary { background: var(--rv-cream); color: var(--rv-ink); }
.rv-header--hero:not(.scrolled) .btn-primary:hover { background: #fff; }
.rv-header--hero:not(.scrolled) .nav-toggle { border-color: rgba(255,255,255,0.4); }
.rv-header--hero:not(.scrolled) .nav-toggle span { background: var(--rv-cream); }
/* keep the pill mid-air on every marketing page: pages start below it */
.rv-header ~ #view { padding-top: 0; padding-bottom: 0; }

/* ==========================================================================
   1 · HERO
   ========================================================================== */
.rv-hero {
  position: relative; z-index: 2; isolation: isolate;
  min-height: max(100svh, 860px); padding: 118px 20px 0;
  color: var(--rv-cream);
  background:
    radial-gradient(70% 50% at 50% 104%, rgba(255,255,255,0.55), rgba(255,255,255,0) 70%),
    radial-gradient(45% 40% at 12% 8%, rgba(108,218,231,0.16), transparent 70%),
    radial-gradient(40% 35% at 90% 22%, rgba(255,107,74,0.10), transparent 70%),
    linear-gradient(180deg, #03222A 0%, #05323B 34%, #0A5866 62%, #35B7C7 88%, #86E4EE 100%);
}
.rv-hero::after { content: ''; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 240px; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255,0) 0%, var(--rv-paper) 100%); }
/* A lit storefront, in its own real colors, edge to edge behind the hero. Plain opacity over the gradient (no blend mode,
   no grayscale) — the warm window light stays warm, not recolored into the page's teal. .rv-lead/.rv-fine carry their own
   text-shadow so they stay readable wherever the photo's bright spots (the neon sign) happen to land. */
.rv-hero-photo { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
/* Measured against the source file directly (the OPEN sign spans roughly x=675–1180 of a 1800px-wide photo, center
   ≈928 vs. the photo's own center at 900) — "center" already puts the sign itself almost exactly in the middle; nudging
   the crop either way pushes the SIGN off-center instead of fixing anything. The lopsided feel is the bright green shop
   light on the right having nothing to balance it on the left, so that gets its own dimming overlay below instead of
   moving the crop and un-centering the sign. */
.rv-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 53% top; opacity: 0.6; }
/* Dims the green light specifically (right third only) so it stops pulling the eye, without touching the sign's own
   position or the photo's colors anywhere else. */
.rv-hero-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, rgba(3,34,42,0.55) 78%, rgba(3,34,42,0.75) 100%); }
.rv-hero-grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 -0.2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.rv-hero-glow {
  position: absolute; z-index: -1; left: 50%; top: 4%; width: 90vw; height: 46vw; max-height: 620px;
  transform: translateX(-50%); pointer-events: none; filter: blur(60px); opacity: 0.55;
  background: conic-gradient(from 210deg at 50% 50%, transparent 0deg, rgba(108,218,231,0.35) 60deg, transparent 130deg, rgba(255,255,255,0.14) 210deg, transparent 300deg);
}
.rv-hero-inner { position: relative; z-index: 3; max-width: 1120px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }

.rv-pill {
  display: inline-flex; align-items: center; gap: 12px; padding: 6px 6px 6px 8px;
  border-radius: 999px; background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.2);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 0.86rem; font-weight: 600; color: var(--rv-cream);
  transition: background 0.3s var(--rv-ease), transform 0.3s var(--rv-ease);
}
.rv-pill:hover { background: rgba(255,255,255,0.16); transform: translateY(-2px); }
.rv-pill-faces { display: flex; }
.rv-pill-faces img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid #0a4552; margin-left: -9px; }
.rv-pill-faces img:first-child { margin-left: 0; }
.rv-pill-txt { display: inline-flex; align-items: center; gap: 8px; }
.rv-pill-go { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--rv-aqua); color: var(--rv-ink); font-weight: 800; font-size: 0.8rem; }
.rv-pill-go .rv-arrow { width: 13px; height: 13px; transition: transform 0.3s var(--rv-ease); }
.rv-pill:hover .rv-arrow { transform: translateX(3px); }

.rv-h1 {
  margin: 20px 0 0; font-family: var(--font-head); font-weight: 800;
  font-size: clamp(2.7rem, 6.8vw, 7rem); line-height: 0.95; letter-spacing: -0.03em;
}
.rv-h1-line { display: block; white-space: nowrap; }
.rv-h1 em { font-style: italic; font-weight: 600; color: var(--rv-aqua); letter-spacing: -0.03em; padding-right: 0.04em; }
.rv-inline-img {
  display: inline-block; width: 1.5em; height: 0.74em; border-radius: 999px; overflow: hidden;
  vertical-align: -0.04em; margin: 0 0.04em; box-shadow: 0 0 0 0.05em rgba(255,255,255,0.9), 0 18px 30px -14px rgba(0,0,0,0.6);
  transition: transform 0.6s var(--rv-ease);
}
.rv-inline-img img { width: 100%; height: 100%; object-fit: cover; }
.rv-ii-1 { transform: rotate(-4deg); }
.rv-ii-2 { transform: rotate(3deg); }
.rv-h1:hover .rv-ii-1 { transform: rotate(3deg) scale(1.06); }
.rv-h1:hover .rv-ii-2 { transform: rotate(-4deg) scale(1.06); }
/* A soft dark shadow, not a boxed backdrop — with a full-bleed photo now behind the hero, this text needs to stay legible
   wherever the photo's brighter spots (the neon sign) happen to land, on any screen width, without visibly changing how
   the text looks against the plain gradient parts. */
.rv-lead { max-width: 620px; margin: 10px 0 0; font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.55; color: rgba(238, 246, 247,0.8); text-shadow: 0 1px 16px rgba(3,34,42,0.9), 0 1px 3px rgba(3,34,42,0.9); }
.rv-hero-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; justify-content: center; }
.rv-fine { margin: 14px 0 0; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(238, 246, 247,0.78); text-shadow: 0 1px 12px rgba(3,34,42,0.95), 0 1px 2px rgba(3,34,42,0.95); }

/* floating product UI, tilted and cropped by the viewport edge */
.rv-float { position: absolute; z-index: 1; transform: translate3d(var(--px, 0px), var(--py, 0px), 0); transition: transform 0.25s linear; will-change: transform; }
.rv-float-a { left: -64px; top: 150px; }
.rv-float-b { right: -56px; top: 132px; }
.rv-float-c { left: -46px; top: 500px; }
.rv-float-d { right: -64px; top: 470px; }
.rv-ui {
  width: 300px; padding: 18px 20px; border-radius: 26px; color: var(--rv-cream);
  background: linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.22);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,0.55);
  animation: rv-bob 9s ease-in-out infinite alternate;
}
.rv-float-a .rv-ui { transform: rotate(-9deg); }
.rv-float-b .rv-ui { transform: rotate(8deg); animation-delay: -3s; width: 280px; }
.rv-float-c .rv-ui { transform: rotate(6deg); animation-delay: -5s; width: 290px; }
.rv-float-d .rv-ui { transform: rotate(-7deg); animation-delay: -2s; width: 290px; }
@keyframes rv-bob { from { translate: 0 -6px; } to { translate: 0 8px; } }
.rv-ui-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rv-ui-tag { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }
.rv-ui h4 { margin: 12px 0 0; font-size: 1.2rem; letter-spacing: -0.02em; font-weight: 800; }
.rv-ui p { margin: 2px 0 0; font-size: 0.8rem; opacity: 0.72; }
.rv-ui-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; gap: 8px; }
.rv-ui-row b { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 600; letter-spacing: 0.02em; }
.rv-ui-row span { font-size: 0.72rem; opacity: 0.7; }
.rv-ui-bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,0.18); margin-top: 10px; overflow: hidden; }
.rv-ui-bar i { display: block; height: 100%; border-radius: inherit; background: var(--rv-aqua); }
.rv-ui-price { display: inline-flex; align-items: baseline; gap: 8px; margin-top: 12px; }
.rv-ui-price b { font-size: 1.7rem; letter-spacing: -0.03em; font-weight: 800; }
.rv-ui-price s { font-size: 0.9rem; opacity: 0.55; }
.rv-ui-big { font-family: var(--font-head); font-weight: 800; font-size: 5.2rem; line-height: 0.9; letter-spacing: -0.06em; margin-top: 16px; }
.rv-ui-big small { font-size: 1.3rem; letter-spacing: -0.02em; margin-left: 4px; opacity: 0.8; }
.rv-ui-pass { display: flex; align-items: center; gap: 16px; }
.rv-ui-pass b { display: block; font-size: 1.15rem; font-weight: 800; margin-top: 6px; letter-spacing: -0.02em; }
.rv-ui-qr { width: 84px; height: 84px; padding: 8px; border-radius: 14px; background: var(--rv-cream); color: var(--rv-ink); flex-shrink: 0; }
.rv-ui-qr svg { width: 100%; height: 100%; display: block; }
.rv-ui-ladder { display: grid; gap: 12px; }
.rv-lad { display: grid; grid-template-columns: 52px 1fr 36px; align-items: center; gap: 10px; font-size: 0.78rem; }
.rv-lad em { font-style: normal; font-weight: 700; }
.rv-lad i { display: block; height: 8px; border-radius: 99px; }
.rv-lad b { text-align: right; font-weight: 800; }
.rv-lad .g ~ i { background: #E8B94A; } .rv-lad .s ~ i { background: #B8C4CE; } .rv-lad .b ~ i { background: #D9825B; }

/* three drops rise out of the field and overlap the next section. Extra room above them (was 26px) so they sit fully below
   a typical first screenful — landing on the hero used to show the top sliver of the center phone cut off by the fold,
   which read as an accident, not something rewarding a scroll. They're still there, just not peeking in uninvited. */
.rv-rise {
  position: relative; z-index: 4; display: flex; align-items: flex-end; justify-content: center; gap: 26px;
  margin: 360px auto -190px; max-width: 980px; padding-top: 0;
}
.rv-drop {
  position: relative; margin: 0; width: 260px; height: 540px; border-radius: 48px; overflow: hidden;
  background: #0b1418; box-shadow: 0 0 0 8px #0b1418, 0 0 0 9px rgba(255,255,255,0.16), 0 50px 80px -30px rgba(3,34,42,0.7);
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  animation: rv-rise 1.1s var(--rv-ease) both;
}
.rv-drop::before { content: ''; position: absolute; z-index: 3; top: 12px; left: 50%; width: 84px; height: 24px; border-radius: 99px; background: #0b1418; transform: translateX(-50%); }
.rv-drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--rv-ease); }
.rv-drop:hover img { transform: scale(1.06); }
.rv-drop-c { width: 320px; height: 660px; animation-delay: 0.1s; }
.rv-drop-l { animation-delay: 0.22s; margin-bottom: -6px; }
.rv-drop-r { animation-delay: 0.34s; margin-bottom: -34px; }
@keyframes rv-rise { from { opacity: 0; translate: 0 90px; } to { opacity: 1; translate: 0 0; } }
.rv-drop figcaption {
  position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 14px; padding: 12px 14px; border-radius: 22px;
  display: flex; align-items: center; gap: 8px; color: var(--rv-cream);
  background: rgba(8,20,24,0.55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.16);
}
.rv-drop-tier { flex: 1; display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; }
.rv-drop figcaption b { font-size: 1.25rem; letter-spacing: -0.03em; font-weight: 800; }
.rv-drop figcaption s { font-size: 0.75rem; opacity: 0.55; }
.rv-drop figcaption em { font-style: normal; font-size: 0.68rem; font-weight: 800; padding: 4px 8px; border-radius: 99px; background: var(--rv-hot); color: var(--rv-ink); }

/* ==========================================================================
   2 · STATEMENT + MARQUEE
   ========================================================================== */
.rv-statement { position: relative; z-index: 1; padding: 290px 24px 90px; overflow-x: clip; overflow-y: visible; background: var(--rv-paper); }
.rv-statement-text {
  max-width: 1240px; margin: 0 auto; font-family: var(--font-head); font-weight: 700;
  font-size: clamp(2rem, 5.6vw, 5.6rem); line-height: 1.04; letter-spacing: -0.03em;
}
.rv-w { opacity: 0.14; transition: opacity 0.35s ease; }
.rv-w.lit { opacity: 1; }
.rv-marquee {
  margin: 110px -6vw 0; padding: 20px 0; background: var(--rv-deep); color: var(--rv-cream);
  transform: rotate(-2.4deg); overflow: hidden; border-block: 3px solid var(--rv-aqua);
}
.rv-marquee-track { display: flex; align-items: center; gap: 30px; width: max-content; animation: rv-marq 38s linear infinite; }
.rv-marquee:hover .rv-marquee-track { animation-play-state: paused; }
.rv-marquee-track span { font-family: var(--font-head); font-weight: 800; font-size: clamp(2rem, 4.4vw, 4rem); letter-spacing: -0.04em; white-space: nowrap; }
.rv-marquee-track span:nth-of-type(even) { font-style: italic; font-weight: 500; color: var(--rv-aqua); }
.rv-marquee-track i { color: var(--rv-aqua); display: inline-flex; }
@keyframes rv-marq { to { transform: translateX(-50%); } }

/* ==========================================================================
   3 · TWO-SIDED COLLAGE
   ========================================================================== */
.rv-problem { padding: 150px 24px 130px; max-width: 1240px; margin: 0 auto; }
.rv-collage { margin-top: 70px; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; row-gap: 0; align-items: start; }
.rv-ph { margin: 0; overflow: hidden; border-radius: var(--rv-radius-xl); background: var(--rv-deep); }
.rv-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--rv-ease); }
.rv-ph:hover img { transform: scale(1.05); }
.rv-ph-chef { grid-column: 1 / 6; grid-row: 1 / 4; aspect-ratio: 4 / 5.3; transform: rotate(-2deg); }
.rv-ph-table { grid-column: 7 / 13; grid-row: 2 / 5; aspect-ratio: 5 / 4.4; margin-top: 30px; transform: rotate(1.6deg); }
.rv-note {
  position: relative; z-index: 3; padding: 30px 32px 34px; border-radius: var(--rv-radius-lg);
  background: #fff; border: 1.5px solid var(--rv-ink); box-shadow: 8px 8px 0 0 var(--rv-ink);
}
.rv-note-tag { display: inline-block; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 12px; border-radius: 99px; background: var(--rv-ink); color: var(--rv-cream); }
.rv-note p { margin: 18px 0 0; font-size: 1.12rem; line-height: 1.55; font-weight: 500; }
.rv-note-r { grid-column: 5 / 11; grid-row: 1; margin-top: 70px; transform: rotate(1.4deg); }
.rv-note-d { grid-column: 2 / 8; grid-row: 4; margin-top: -110px; background: var(--rv-aqua); transform: rotate(-1.4deg); }
.rv-collage-line {
  grid-column: 1 / 13; grid-row: 5; margin: 90px 0 0; font-family: var(--font-head); font-weight: 800; font-style: italic;
  font-size: clamp(1.8rem, 4vw, 3.6rem); letter-spacing: -0.04em; color: var(--rv-teal); text-align: right;
}

/* ==========================================================================
   4 · STICKY PHONE — how a drop works
   ========================================================================== */
.rv-seq { background: var(--rv-wash); border-radius: var(--rv-radius-xl) var(--rv-radius-xl) 0 0; padding: 120px 24px 40px; position: relative; z-index: 1; }
/* .rv-tiers right below has rounded TOP corners of its own (a black card sitting on the page), but this section's own
   bottom edge is a plain square — so those corner cutouts were revealing the page's cream background, not this
   section's blue, right where the two sections meet. Extends this section's own background straight down behind that
   seam (z-index below .rv-tiers' own 2, so its black fill still paints on top everywhere it actually covers) without
   touching layout/spacing — a decorative pseudo-element, not a margin/padding change that would also shift .rv-tiers
   itself and eat into this section's real content above. */
.rv-seq::after { content: ''; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--rv-radius-xl)); height: var(--rv-radius-xl); background: var(--rv-wash); z-index: 0; }
.rv-seq-head { max-width: 1240px; margin: 0 auto; }
.rv-seq-grid { max-width: 1240px; margin: 40px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch; }
.rv-step { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; opacity: 0.28; transition: opacity 0.5s ease; }
.rv-step.is-active { opacity: 1; }
.rv-step-num { font-family: var(--font-head); font-weight: 800; font-size: clamp(5rem, 11vw, 9rem); line-height: 0.85; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 2px var(--rv-ink); }
.rv-step h3 { font-size: clamp(1.8rem, 3vw, 2.7rem); letter-spacing: -0.04em; font-weight: 800; margin: 18px 0 0; line-height: 1; }
.rv-step p { font-size: 1.1rem; line-height: 1.6; color: rgba(8,42,48,0.68); max-width: 40ch; margin: 14px 0 0; }
.rv-step-shot { display: none; }
.rv-seq-stage { position: relative; }
.rv-seq-sticky { position: sticky; top: 11vh; height: 78vh; min-height: 620px; display: grid; place-items: center; }
.rv-phone { position: relative; width: 318px; height: 640px; border-radius: 52px; padding: 11px; background: #0b1418; box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 60px 90px -30px rgba(4,38,44,0.7); transform: rotate(-3deg); }
.rv-phone-notch { position: absolute; z-index: 5; top: 20px; left: 50%; width: 86px; height: 25px; border-radius: 99px; background: #0b1418; transform: translateX(-50%); }
.rv-phone .rv-phone-screen { position: absolute; inset: 11px; border-radius: 42px; opacity: 0; transform: translateY(18px) scale(0.98); transition: opacity 0.5s ease, transform 0.6s var(--rv-ease); pointer-events: none; }
.rv-phone .rv-phone-screen.rv-screen-on { opacity: 1; transform: none; }
.rv-phone-screen { background: var(--rv-paper); padding: 56px 18px 20px; overflow: hidden; color: var(--rv-ink); }
.rv-seq-dots { position: absolute; bottom: 0; display: flex; gap: 8px; }
.rv-seq-dots i { width: 8px; height: 8px; border-radius: 99px; background: rgba(8,42,48,0.25); transition: all 0.4s var(--rv-ease); }
.rv-seq-dots i.on { width: 30px; background: var(--rv-ink); }
.rv-scr-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.rv-scr-title { font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.04em; }
.rv-scr-chip { font-size: 0.66rem; font-weight: 800; padding: 5px 10px; border-radius: 99px; background: var(--rv-hot); }
.rv-chip-ok { background: var(--rv-aqua); }
.rv-scr-row { display: grid; grid-template-columns: 50px 30px 1fr auto; align-items: center; gap: 10px; padding: 9px; margin-bottom: 10px; border-radius: 20px; background: #fff; border: 1px solid rgba(8,42,48,0.08); }
.rv-scr-row img { width: 50px; height: 50px; border-radius: 14px; object-fit: cover; }
.rv-scr-row .fd-stamp { transform: scale(0.8); transform-origin: center; margin: 0; }
.rv-scr-row b { display: block; font-size: 0.86rem; letter-spacing: -0.01em; }
.rv-scr-row span { font-size: 0.72rem; color: rgba(8,42,48,0.6); }
.rv-scr-row em { font-style: normal; font-weight: 800; font-size: 1.05rem; letter-spacing: -0.03em; }
.rv-scr-hero { position: relative; height: 210px; border-radius: 24px; overflow: hidden; margin-bottom: 14px; }
.rv-scr-hero img { width: 100%; height: 100%; object-fit: cover; }
.rv-scr-tag { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 6px; border-radius: 99px; background: rgba(255, 255, 255,0.92); font-size: 0.72rem; font-weight: 800; }
.rv-scr-h { margin: 0; font-size: 1.35rem; letter-spacing: -0.04em; font-weight: 800; }
.rv-scr-p { margin: 4px 0 0; font-size: 0.82rem; color: rgba(8,42,48,0.62); line-height: 1.45; }
.rv-scr-price { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; }
.rv-scr-price b { font-size: 2rem; letter-spacing: -0.05em; font-weight: 800; }
.rv-scr-price s { opacity: 0.45; }
.rv-scr-price span { margin-left: auto; font-size: 0.72rem; font-weight: 700; }
.rv-scr-bar { height: 7px; border-radius: 99px; background: rgba(8,42,48,0.1); margin-top: 8px; overflow: hidden; }
.rv-scr-bar i { display: block; height: 100%; background: var(--rv-teal); border-radius: inherit; }
.rv-scr-cta { margin-top: 18px; padding: 15px; text-align: center; border-radius: 99px; background: var(--rv-ink); color: var(--rv-cream); font-weight: 800; font-size: 0.92rem; }
.rv-scr-cta-ghost { background: var(--rv-aqua); color: var(--rv-ink); }
.rv-scr-qr { width: 190px; height: 190px; margin: 6px auto 14px; padding: 16px; border-radius: 28px; background: #fff; border: 1px solid rgba(8,42,48,0.1); color: var(--rv-ink); }
.rv-scr-qr svg { width: 100%; height: 100%; display: block; }

/* ==========================================================================
   5 · STACKED TIERS
   ========================================================================== */
.rv-tiers { background: #04262C; color: var(--rv-cream); padding: 130px 24px 22vh; border-radius: var(--rv-radius-xl) var(--rv-radius-xl) 0 0; margin-top: -1px; position: relative; z-index: 2; }
.rv-tiers-head { max-width: 1240px; margin: 0 auto; }
.rv-stack { max-width: 1240px; margin: 70px auto 0; }
.rv-panel {
  --i: 0; position: sticky; top: calc(88px + var(--i) * 30px);
  display: grid; grid-template-columns: 1fr 1.25fr 0.8fr; align-items: center; gap: 24px;
  min-height: min(74vh, 560px); margin-bottom: 40px; padding: 44px 44px 44px 52px; border-radius: var(--rv-radius-xl);
  color: var(--rv-ink); box-shadow: 0 -20px 50px -20px rgba(0,0,0,0.5); overflow: hidden;
}
.rv-panel:nth-child(2) { --i: 1; } .rv-panel:nth-child(3) { --i: 2; }
.rv-panel-gold { background: linear-gradient(135deg, #F6CB55 0%, #E2A32A 100%); }
.rv-panel-silver { background: linear-gradient(135deg, #D7E0E7 0%, #AAB8C4 100%); }
.rv-panel-bronze { background: linear-gradient(135deg, #EA9970 0%, #C4643B 100%); }
.rv-panel-copy h3 { font-size: clamp(1.8rem, 3vw, 2.8rem); letter-spacing: -0.045em; font-weight: 800; margin: 16px 0 0; line-height: 1; }
.rv-panel-copy p { margin: 10px 0 0; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; }
.rv-panel-flag { display: inline-block; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 12px; border-radius: 99px; background: var(--rv-ink); color: #F6CB55; }
.rv-panel-medal { margin-top: 28px; display: inline-block; transform: scale(1.5); transform-origin: left center; }
.rv-panel-num { font-family: var(--font-head); font-weight: 800; font-size: clamp(9rem, 20vw, 19rem); line-height: 0.78; letter-spacing: -0.06em; display: flex; align-items: flex-start; justify-content: center; }
.rv-panel-num small { font-size: 0.15em; line-height: 1.05; letter-spacing: -0.01em; margin: 0.9em 0 0 0.5em; }
.rv-panel-ph { margin: 0; height: 100%; min-height: 380px; border-radius: 999px 999px 32px 32px; overflow: hidden; transform: rotate(3deg); box-shadow: 0 0 0 6px rgba(255, 255, 255,0.85), 0 30px 50px -20px rgba(0,0,0,0.45); }
.rv-panel-silver .rv-panel-ph { transform: rotate(-3deg); }
.rv-panel-ph img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   6 · LIVE DROPS
   ========================================================================== */
.rv-live { padding: 140px 24px 120px; background: var(--rv-paper); border-radius: var(--rv-radius-xl) var(--rv-radius-xl) 0 0; margin-top: -44px; position: relative; z-index: 3; }
.rv-live-head { max-width: 1240px; margin: 0 auto; }
.rv-live-strip { max-width: 1240px; margin: 56px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.rv-live-strip .rv-ticket:nth-child(2) { margin-top: 60px; }
.rv-live-strip .rv-ticket:nth-child(3) { margin-top: 24px; }
.rv-live-empty { grid-column: 1 / -1; font-size: 1.2rem; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.rv-ticket { background: #fff; border-radius: var(--rv-radius-lg); overflow: hidden; border: 1.5px solid var(--rv-ink); box-shadow: 8px 8px 0 0 var(--rv-ink); transition: transform 0.5s var(--rv-ease), box-shadow 0.5s var(--rv-ease); }
.rv-ticket:hover { transform: translate(-4px, -6px) rotate(-0.8deg); box-shadow: 14px 16px 0 0 var(--rv-ink); }
.rv-ticket-ph { position: relative; margin: 0; aspect-ratio: 4 / 3.3; overflow: hidden; }
.rv-ticket-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--rv-ease); }
.rv-ticket:hover .rv-ticket-ph img { transform: scale(1.07); }
.rv-ticket-left { position: absolute; right: 12px; bottom: 12px; padding: 6px 12px; border-radius: 99px; background: var(--rv-ink); color: var(--rv-cream); font-size: 0.74rem; font-weight: 800; }
.rv-ticket-ph .drop-flag { position: absolute; left: 12px; top: 12px; }
.rv-ticket-body { padding: 20px 22px 22px; }
.rv-ticket-body .rv-ui-top, .rv-ticket-body .rv-ui-tag { color: var(--rv-ink); }
.rv-ticket-body h4 { margin: 12px 0 0; font-size: 1.4rem; letter-spacing: -0.035em; font-weight: 800; }
.rv-ticket-body p { margin: 3px 0 0; font-size: 0.9rem; color: rgba(8,42,48,0.62); }
.rv-ticket-body .rv-ui-row { margin-top: 16px; }
.rv-ticket-body .rv-ui-row b { font-size: 1.3rem; }
.rv-ticket-body .rv-ui-bar { background: rgba(8,42,48,0.1); }
.rv-ticket-body .rv-ui-bar i { background: var(--rv-teal); }
.rv-ticket-gold { border-top: 8px solid #E2A32A; } .rv-ticket-silver { border-top: 8px solid #9AA9B5; } .rv-ticket-bronze { border-top: 8px solid #C4643B; }
.rv-ticket-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.rv-ticket-foot .rv-ui-price { margin: 0; }

/* ==========================================================================
   7 · BENTO
   ========================================================================== */
.rv-why { padding: 30px 24px 140px; max-width: 1240px; margin: 0 auto; }
.rv-bento { margin-top: 56px; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 300px 300px; gap: 16px; }
.rv-tile { position: relative; border-radius: var(--rv-radius-xl); overflow: hidden; padding: 30px; display: flex; flex-direction: column; margin: 0; }
.rv-tile h3 { font-size: 1.6rem; letter-spacing: -0.04em; font-weight: 800; margin: 0; line-height: 1.05; }
.rv-tile p { margin: 10px 0 0; line-height: 1.55; font-size: 1rem; }
.rv-tile-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,0.9); color: var(--rv-ink); margin-bottom: auto; }
.rv-tile-photo { grid-column: 1 / 6; grid-row: 1 / 3; justify-content: flex-end; color: var(--rv-cream); padding: 0; }
.rv-tile-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--rv-ease); }
.rv-tile-photo:hover > img { transform: scale(1.05); }
.rv-tile-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,38,44,0) 35%, rgba(4,38,44,0.9) 100%); }
.rv-tile-cap { position: relative; z-index: 2; padding: 30px; display: flex; flex-direction: column; height: 100%; }
.rv-tile-aqua { grid-column: 6 / 10; grid-row: 1 / 3; background: var(--rv-aqua); }
.rv-tile-clock { margin-top: 30px; display: flex; flex-direction: column; }
.rv-tile-clock b { font-family: var(--font-mono); font-weight: 600; font-size: clamp(2rem, 3.3vw, 3.1rem); letter-spacing: -0.03em; line-height: 1; }
.rv-tile-clock span { font-size: 0.78rem; font-weight: 700; margin-top: 8px; opacity: 0.7; }
.rv-ui-bar-l { background: rgba(4,38,44,0.16); margin: 22px 0 auto; }
.rv-tile-aqua h3 { margin-top: 26px; }
.rv-ui-bar-l i { background: var(--rv-ink); }
.rv-tile-ink { grid-column: 10 / 13; grid-row: 1; background: var(--rv-ink); color: var(--rv-cream); padding: 26px; }
.rv-tile-ink p { font-size: 0.9rem; color: rgba(238, 246, 247,0.7); }
.rv-tile-zero { font-family: var(--font-head); font-weight: 800; font-size: 5.6rem; letter-spacing: -0.07em; line-height: 0.85; color: var(--rv-aqua); margin: 6px 0 10px; }
.rv-tile-ink .rv-tile-ico { margin-bottom: 0; position: absolute; right: 22px; top: 22px; }
.rv-tile-wide { grid-column: 10 / 13; grid-row: 2; padding: 0; justify-content: flex-end; color: var(--rv-cream); }
.rv-tile-wide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--rv-ease); }
.rv-tile-wide:hover img { transform: scale(1.06); }
.rv-tile-wide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.75)); }
.rv-tile-wide figcaption { position: relative; z-index: 2; padding: 24px; font-family: var(--font-head); font-weight: 800; font-size: 1.45rem; letter-spacing: -0.04em; line-height: 1.05; }

/* ==========================================================================
   8 · FINALE
   ========================================================================== */
.rv-finale { padding: 0 20px 90px; background: var(--rv-paper); }
.rv-finale-card {
  position: relative; max-width: 1240px; margin: 0 auto; min-height: 520px; overflow: hidden; isolation: isolate;
  border-radius: var(--rv-radius-xl); padding: 70px 64px; color: var(--rv-cream);
  display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center;
  background: linear-gradient(140deg, #03222A 0%, #06424E 48%, #0E7C8C 100%);
}
.rv-finale-glow { position: absolute; z-index: -1; left: 18%; bottom: -40%; width: 70%; height: 90%; background: radial-gradient(closest-side, rgba(134,228,238,0.7), transparent); filter: blur(30px); }
.rv-finale-copy .rv-hero-actions { justify-content: flex-start; }
.rv-finale-card .rv-h2 { max-width: 12ch; font-size: clamp(2.6rem, 5.6vw, 5.4rem); }
.rv-finale-art { position: absolute; right: -40px; bottom: -70px; width: 46%; height: 108%; }
.rv-finale-ph { position: absolute; right: 0; bottom: 0; width: 76%; height: 100%; margin: 0; border-radius: 999px 999px 0 0; overflow: hidden; transform: rotate(4deg); transform-origin: bottom center; box-shadow: 0 0 0 8px rgba(255,255,255,0.14); }
.rv-finale-ph img { width: 100%; height: 100%; object-fit: cover; }
.rv-finale-ticket { position: absolute; left: -6%; bottom: 25%; width: 250px; animation: none; transform: rotate(-7deg); background: rgba(4,38,44,0.72); }

/* ==========================================================================
   FOOTER — giant wordmark
   ========================================================================== */
.rv-footer { background: var(--rv-deep); padding: 90px 0 30px; position: relative; overflow: hidden; }
.rv-footer .footer-grid { border-bottom: 0; padding-bottom: 60px; }
.rv-footer .footer-col a:hover { color: var(--rv-aqua); }
.rv-footer .btn-primary { background: var(--rv-aqua); box-shadow: none; color: var(--rv-ink); }
.rv-wordmark {
  display: flex; align-items: center; justify-content: center; gap: 0.04em; white-space: nowrap; user-select: none;
  font-family: var(--font-head); font-weight: 800; font-size: clamp(6rem, 24vw, 23rem); line-height: 1; letter-spacing: -0.045em;
  margin: 0 -2vw -0.1em; height: 0.78em; padding-top: 0.06em; overflow: hidden; color: transparent;
  background: linear-gradient(180deg, var(--rv-aqua) 0%, rgba(108,218,231,0.08) 92%); -webkit-background-clip: text; background-clip: text;
}
.rv-wordmark svg { color: var(--rv-aqua); width: 0.3em; height: 0.3em; margin: -0.3em 0 0 0.04em; flex-shrink: 0; }
.rv-footer .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 34px; }

/* ==========================================================================
   OTHER MARKETING PAGES — shared page-hero in the same language
   ========================================================================== */
.fd-page-hero {
  padding: 150px 0 110px !important; color: var(--rv-cream) !important; position: relative; isolation: isolate;
  /* Same straight-down wash as .rp-hero (no diagonal hue shift, no rounded bottom corners) — this card used to run its own
     170deg gradient with a rounded bottom edge, which is exactly the seam/banding look already fixed everywhere else.
     ONE gradient, ending in --rv-cream itself, rather than a hue gradient plus a separate ::after opacity fade layered on
     top: this card is much shorter than .rp-hero, so squeezing a whole separate fade into the little room left below the
     copy — even an eased one — still landed as a visible seam where the two layers' independent rates met (confirmed by
     scanning actual rendered pixels; a plain 2-stop fade jumped ~12x, an eased one still ~5x). Compressing the hue stops
     into the first 60% and letting the last 40% run as a single, plain step straight to cream keeps one continuous curve
     with no seam anywhere, and — being %-based — this also auto-scales to the mobile card's own (shorter) height with no
     extra media-query rule needed, unlike the fixed-px fade it replaces. */
  background:
    radial-gradient(45% 55% at 10% 6%, rgba(108,218,231,0.18), transparent 70%),
    radial-gradient(40% 45% at 92% 14%, rgba(255,107,74,0.1), transparent 70%),
    linear-gradient(180deg, #03222A 0%, #04303A 10%, #06424E 20%, #0A5866 32%, #14707B 44%, #2C93A0 54%, #3FA9B4 60%, var(--rv-cream) 100%) !important;
}
.fd-page-hero .fd-halftone { opacity: 0.35; mix-blend-mode: overlay; }
.fd-page-hero .fd-h1 { color: var(--rv-cream); font-size: clamp(2.8rem, 7vw, 6.4rem); letter-spacing: -0.05em; line-height: 0.92; }
.fd-page-hero .fd-accent { color: var(--rv-aqua); font-style: italic; }
/* Both sit low enough in the hero that the gradient underneath them has already lightened most of the way to cream by
   that point (see the gradient's own comment above) — light-on-light. The outline-shadow trick tried first fixed the
   contrast number but looked like sticker/caption text, not a real solution. Dark ink instead of cream reads cleanly with
   no shadow at all, because that lightened backdrop is exactly where dark text is naturally the right choice. */
.fd-page-hero .fd-lead { color: rgba(8,42,48,0.85); }
.fd-page-hero .fd-eyebrow { color: var(--rv-aqua); }
.fd-btn { border-radius: 999px !important; }
.fd-page-hero { overflow: visible !important; margin-bottom: 70px; }
.fd-page-hero .fd-h1 { letter-spacing: -0.032em; margin-bottom: 0.32em; padding-bottom: 0.06em; }
.fd-page-hero .fd-mono-tag { color: rgba(8,42,48,0.7); }
.rv-page-ph { position: absolute; z-index: 2; margin: 0; overflow: hidden; width: 230px; height: 310px; bottom: -80px; border-radius: 999px 999px 34px 34px; box-shadow: 0 0 0 6px rgba(255, 255, 255,0.9), 0 40px 60px -28px rgba(4,38,44,0.6); }
.rv-page-ph img { width: 100%; height: 100%; object-fit: cover; }
.rv-pp-left { left: -50px; transform: rotate(-6deg); }
.rv-pp-right { right: -50px; transform: rotate(6deg); }
.rv-pp-mid { right: 31%; transform: rotate(5deg); }
@media (max-width: 1100px) { .rv-pp-left, .rv-pp-right { display: none; } .rv-pp-mid { right: 6%; } }
@media (max-width: 860px) { .rv-page-ph { display: none; } .fd-page-hero { margin-bottom: 40px; } }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .rv-float-a, .rv-float-c { left: -150px; } .rv-float-b, .rv-float-d { right: -150px; }
  .rv-panel { grid-template-columns: 1fr 1fr; }
  .rv-panel-ph { display: none; }
  .rv-bento { grid-template-rows: auto; }
}
@media (max-width: 860px) {
  .rv-pill { max-width: 100%; }
  .rv-pill-faces { display: none; }
  .rv-pill-txt { font-size: 0.78rem; padding-left: 8px; white-space: nowrap; }
  .rv-pill-go { white-space: nowrap; }
  .rv-panel-copy p { max-width: 58%; }
  /* Mobile only: nudges the crop window a little to the left through the source, which shifts the photo's fixed content
     (the OPEN sign) a little to the right on screen — object-position's X% and on-screen position move opposite ways here
     because the rendered image is wider than the container (see object-fit:cover's crop math), same reasoning as the
     desktop value's own comment above .rv-hero-photo img. */
  .rv-hero-photo img { object-position: 51% top; }
  /* mobile menu: a floating rounded sheet under the pill */
  .rv-header .nav-links {
    top: 86px; left: 12px; right: 12px; bottom: auto; max-height: calc(100dvh - 100px);
    border-radius: 30px; padding: 14px 24px 24px; background: var(--rv-paper);
    box-shadow: 0 40px 80px -30px rgba(4,38,44,0.55); transform: translateY(-14px) scale(0.98); opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform 0.4s var(--rv-ease), opacity 0.3s ease, visibility 0.3s;
  }
  .rv-header .nav-links.open { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
  .rv-header .nav-links a { color: var(--rv-ink) !important; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
  .rv-header .nav-links .mobile-cta a.btn-primary { background: var(--rv-ink) !important; color: var(--rv-cream) !important; }
  .rv-header--hero:not(.scrolled) .nav-links.open { background: var(--rv-paper); }
  .rv-hero { padding-top: 112px; min-height: 0; }
  .rv-float { display: none; }
  .rv-h1 { font-size: clamp(2.3rem, 11.6vw, 4.4rem); }
  .rv-h1-line { white-space: normal; }
  .rv-rise { gap: 10px; margin-top: 70px; margin-bottom: -110px; }
  .rv-drop { width: 30vw; height: 62vw; border-radius: 26px; box-shadow: 0 0 0 4px #0b1418, 0 30px 50px -20px rgba(3,34,42,0.7); }
  .rv-drop::before { width: 34%; height: 12px; top: 7px; }
  .rv-drop-c { width: 38vw; height: 78vw; }
  .rv-drop figcaption { left: 6px; right: 6px; bottom: 6px; padding: 7px 8px; border-radius: 14px; flex-wrap: wrap; gap: 3px 6px; }
  .rv-drop-tier { flex-basis: 100%; font-size: 0.62rem; } .rv-drop figcaption b { font-size: 0.95rem; } .rv-drop figcaption s, .rv-drop figcaption em { font-size: 0.58rem; }
  .rv-drop .fd-stamp { display: none; }
  .rv-statement { padding-top: 216px; }
  .rv-marquee { margin-top: 70px; }
  .rv-problem { padding: 90px 20px 80px; }
  .rv-collage { display: flex; flex-direction: column; gap: 0; margin-top: 44px; }
  .rv-ph-chef { width: 86%; aspect-ratio: 4 / 4.6; }
  .rv-note-r { margin: -50px 0 0 8%; } .rv-ph-table { width: 88%; align-self: flex-end; margin-top: 26px; aspect-ratio: 4 / 3.4; }
  .rv-note-d { margin: -50px 8% 0 0; } .rv-collage-line { margin-top: 50px; text-align: left; }
  .rv-seq { padding: 90px 20px 30px; }
  .rv-seq-grid { grid-template-columns: 1fr; }
  .rv-seq-stage { display: none; }
  .rv-step { min-height: 0; opacity: 1; padding: 34px 0 44px; border-top: 1.5px solid rgba(8,42,48,0.14); }
  .rv-step-num { font-size: 4.6rem; }
  .rv-step-shot { display: block; margin-top: 26px; }
  .rv-step-shot .rv-phone-screen { position: relative; border-radius: 34px; padding: 22px 16px 20px; border: 8px solid #0b1418; max-width: 320px; box-shadow: 0 30px 50px -24px rgba(4,38,44,0.5); }
  .rv-tiers { padding: 90px 20px 12vh; }
  .rv-panel { position: sticky; top: calc(76px + var(--i) * 18px); grid-template-columns: 1fr; min-height: 0; padding: 30px 26px 26px; gap: 4px; border-radius: 32px; }
  .rv-panel-num { font-size: clamp(7rem, 38vw, 11rem); justify-content: flex-start; order: 2; }
  .rv-panel-copy { order: 1; } .rv-panel-medal { position: absolute; right: 30px; top: 24px; margin: 0; transform: scale(1.25); transform-origin: top right; }
  .rv-live { padding: 90px 0 80px; margin-top: -32px; }
  .rv-live-head { padding: 0 20px; }
  .rv-live-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding: 10px 20px 26px; margin-top: 30px; -webkit-overflow-scrolling: touch; }
  .rv-live-strip .rv-ticket { flex: 0 0 82%; scroll-snap-align: center; margin-top: 0 !important; }
  .rv-why { padding: 10px 20px 90px; }
  .rv-bento { display: flex; flex-direction: column; }
  .rv-tile { min-height: 300px; } .rv-tile-photo { min-height: 420px; } .rv-tile-wide { min-height: 240px; }
  .rv-finale { padding: 0 12px 60px; }
  .rv-finale-card { grid-template-columns: 1fr; padding: 46px 26px 300px; }
  .rv-finale-art { width: 100%; height: 300px; right: -20px; bottom: -40px; }
  .rv-finale-ph { width: 62%; } .rv-finale-ticket { left: 4%; bottom: 46px; width: 210px; }
  .fd-page-hero { padding: 118px 0 70px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .rv-marquee-track, .rv-ui, .rv-drop, .rv-live-dot { animation: none !important; }
  .rv-float { transition: none; }
  .rv-w { opacity: 1; }
}

/* ==========================================================================
   PUBLIC PAGES v2 — How It Works / For Restaurants / Pricing / About / Demo
   (.rp-*). Same V4 language as the homepage: deep field hero with rising arch
   photos, paper sections, ink-bordered tickets, aqua + deep bands.
   ========================================================================== */
.rv-btn-line-ink { color: var(--rv-ink); border-color: var(--rv-ink); background: transparent; }
.rv-btn-line-ink .rv-btn-arrow { background: rgba(8,42,48,0.12); }
.rv-btn-line-ink::before { background: var(--rv-ink); }
.rv-btn-line-ink:hover { color: var(--rv-cream); }
.rv-btn-ink .rv-btn-arrow { background: var(--rv-aqua); color: var(--rv-ink); }
button.rv-btn { cursor: pointer; font: inherit; font-weight: 700; }

/* small ticket used inside illustrations */
.rv-tk { background: var(--rv-paper); color: var(--rv-ink); border: 2px solid var(--rv-ink); border-radius: 26px; padding: 20px 22px; box-shadow: 8px 9px 0 0 var(--rv-ink); width: min(320px, 100%); }
.rv-tk-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rv-tag { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.rv-tk h4 { margin: 12px 0 0; font-size: 1.5rem; letter-spacing: -0.04em; font-weight: 800; }
.rv-tk p { margin: 2px 0 0; font-size: 0.86rem; color: rgba(8,42,48,0.62); }
.rv-tk-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; gap: 8px; }
.rv-tk-row b { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 600; }
.rv-tk-row span { font-size: 0.74rem; color: rgba(8,42,48,0.62); }
.rv-bar { height: 10px; border-radius: 99px; background: rgba(8,42,48,0.12); margin-top: 10px; overflow: hidden; }
.rv-bar i { display: block; height: 100%; background: var(--rv-deep); border-radius: inherit; }
.rv-tk-price { display: inline-flex; align-items: baseline; gap: 8px; margin-top: 12px; }
.rv-tk-price b { font-family: var(--font-head); font-size: 2.8rem; letter-spacing: -0.05em; font-weight: 800; line-height: 1; }
.rv-tk-price s { opacity: 0.5; }
.rp-note-tag { display: inline-block; margin-top: 16px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(8,42,48,0.5); }

/* ---- hero ---- */
/* Same look as the homepage's full-bleed .rv-hero — a diagonal wash that lightens toward turquoise at the bottom, with the same
   corner glows and film-grain texture — scaled down into this shorter, rounded card used at the top of every inner page. */
.rp-hero {
  position: relative; isolation: isolate; overflow: hidden; padding: 128px 24px 110px; color: var(--rv-cream); margin-bottom: 50px;
  /* Fewer, evenly-spaced stops on purpose: the earlier 6-stop version shifted hue (teal → cyan) at the same time the ::after
     fade below was shifting lightness (teal → cream) over the same short stretch, and the two together showed as visible bands
     rather than a smooth wash. One steady navy-to-teal transition here, then a single transparent-to-cream fade at the bottom
     — only one thing changing at a time — reads smooth instead of stepped. */
  /* The homepage's own hero gets its smoothness from ONE thing: the color keeps changing, gently, all the way to the very
     bottom — never a flat run of solid color anywhere. This card is much shorter, so a 2-3 stop version of the same idea
     used to go flat around the halfway mark, THEN the fade below kicked in and started changing it again — that hand-off
     from "not changing" to "changing" is what read as a seam/kink, even with no visible color banding. More, closer stops
     here so it keeps gently lightening the whole way down, with no flat stretch for the fade below to visibly "start" from. */
  background:
    radial-gradient(45% 55% at 10% 6%, rgba(108,218,231,0.18), transparent 70%),
    radial-gradient(40% 45% at 92% 14%, rgba(255,107,74,0.1), transparent 70%),
    linear-gradient(180deg, #03222A 0%, #04303A 20%, #06424E 40%, #0A5866 58%, #14707B 76%, #2C93A0 92%, #3FA9B4 100%);
  /* No rounded bottom corners — a plain straight edge fading into the page, same as the homepage's own full-bleed hero. */
}
.rp-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.24; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 -0.2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.rp-hero > * { position: relative; z-index: 1; }
/* The card has rounded bottom corners sitting directly on the cream page — without this, the turquoise stops dead at that
   curve, reading as two flat colors touching rather than one wash settling into the page. Mirrors .rv-hero::after's own fade,
   scaled to this shorter card: the last stretch of the gradient eases into the exact page color first, so the rounded edge
   itself is barely visible by the time you reach it. */
/* Fades to --rv-cream, not --rv-paper: unlike the homepage (wrapped in .rv-home, which sets --rv-paper), these inner pages sit
   directly on <body>'s own background (--cream-50, the same color as --rv-cream) — fading to the wrong one of the two nearly-
   identical creams left a faint seam right where the rounded corner met the page.
   Kept to the bottom quarter (not the near-half it started as): the headline/copy/buttons above it need to stay on solidly dark
   background — the cream-bordered "ghost" button in particular reads fine on teal but disappears once the page behind it is
   this light, which is what pushing the fade higher was doing. */
.rp-hero::after {
  content: ''; position: absolute; z-index: 0; left: 0; right: 0; bottom: -1px; height: calc(34% + 1px); pointer-events: none;
  background: linear-gradient(180deg, rgba(238, 246, 247,0) 0%, var(--rv-cream) 100%);
}
.rp-hero-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 30px; align-items: center; min-height: 420px; position: relative; }
.rp-h1 { margin: 22px 0 0; font-family: var(--font-head); font-weight: 800; font-size: clamp(3rem, 6.6vw, 6.8rem); line-height: 0.94; letter-spacing: -0.035em; }
.rp-h1 em { font-style: italic; font-weight: 600; color: var(--rv-aqua); padding-right: 0.05em; }
.rp-lead { max-width: 560px; margin: 24px 0 0; font-size: clamp(1.02rem, 1.3vw, 1.2rem); line-height: 1.55; color: rgba(238, 246, 247,0.8); }
.rp-hero-art { position: relative; min-height: 380px; }
.rp-arch { position: absolute; margin: 0; overflow: hidden; border-radius: 999px 999px 34px 34px; box-shadow: 0 0 0 6px rgba(255, 255, 255,0.9), 0 40px 60px -28px rgba(0,0,0,0.6); background: var(--rv-deep); }
.rp-arch img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-arch-a { right: 4%; top: -10px; width: 250px; height: 340px; rotate: 4deg; }
.rp-arch-b { right: 46%; bottom: -70px; width: 200px; height: 270px; rotate: -6deg; }
.rp-sticker { position: absolute; left: 4%; top: 0; width: 118px; height: 118px; border-radius: 50%; background: var(--rv-aqua); color: var(--rv-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; rotate: -12deg; box-shadow: 0 16px 30px -12px rgba(0,0,0,0.5); }
.rp-sticker span { font-family: var(--font-head); font-weight: 800; font-size: 2.6rem; letter-spacing: -0.05em; line-height: 0.9; }
.rp-sticker em { font-family: var(--font-mono); font-style: normal; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; }
.rp-medals { position: absolute; left: 2%; bottom: 10px; display: flex; gap: 18px; z-index: 4; padding: 14px 22px; border-radius: 999px; background: var(--rv-paper); border: 2px solid var(--rv-ink); box-shadow: 6px 7px 0 0 var(--rv-ink); rotate: -3deg; }
.rp-medals span { display: block; scale: 1; margin: 0; }

/* how it works: the descent card in the hero */
.rp-descent { position: absolute; left: -6%; bottom: -60px; width: 300px; padding: 18px 18px 14px; border-radius: 26px; background: var(--rv-paper); color: var(--rv-ink); border: 2px solid var(--rv-ink); box-shadow: 8px 9px 0 0 var(--rv-ink); rotate: -3deg; z-index: 4; }
.rp-descent-tag { display: block; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(8,42,48,0.55); margin-bottom: 8px; }
.rp-step { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; padding: 12px 8px 12px calc(8px + var(--i) * 14px); border-top: 1.5px solid rgba(8,42,48,0.14); }
.rp-step b { display: block; font-size: 1rem; letter-spacing: -0.02em; } .rp-step span { font-size: 0.74rem; color: rgba(8,42,48,0.6); }
.rp-step em { font-style: normal; font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; letter-spacing: -0.05em; }

/* ---- how it works: journey ---- */
.rp-journey { max-width: 1240px; margin: 0 auto; padding: 60px 24px 100px; }
.rp-journey-head { margin-bottom: 30px; }
.rp-chapter { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding: 60px 0; border-top: 2px solid var(--rv-ink); }
.rp-chapter-flip .rp-chapter-copy { order: 2; }
.rp-num { font-family: var(--font-head); font-weight: 800; font-size: clamp(5rem, 11vw, 9rem); line-height: 0.85; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 2px var(--rv-ink); }
.rp-chapter h3 { margin: 16px 0 0; font-size: clamp(2rem, 3.6vw, 3.4rem); letter-spacing: -0.04em; font-weight: 800; line-height: 1; }
.rp-chapter p { margin: 16px 0 0; font-size: 1.12rem; line-height: 1.6; color: rgba(8,42,48,0.72); max-width: 44ch; }
.rp-chapter-art { display: flex; flex-direction: column; align-items: center; }
.rp-board { width: min(460px, 100%); padding: 10px 22px 6px; border-radius: 30px; background: var(--rv-deep); color: var(--rv-cream); }
.rp-board-row { display: grid; grid-template-columns: 96px 1fr auto; gap: 14px; align-items: center; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,0.16); }
.rp-board-row:last-of-type { border-bottom: 0; }
.rp-board-row b { font-size: 1.05rem; letter-spacing: -0.02em; } .rp-board-row em { font-style: normal; font-family: var(--font-head); font-weight: 800; font-size: 1.7rem; letter-spacing: -0.05em; color: var(--rv-aqua); }
.rp-tier { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; }
.rp-board .rp-note-tag { color: rgba(238, 246, 247,0.5); }
.rp-ticket-demo { rotate: 2deg; }
.rp-receipt { width: min(400px, 100%); padding: 24px 26px; border-radius: 26px; background: var(--rv-paper); border: 2px solid var(--rv-ink); box-shadow: 8px 9px 0 0 var(--rv-ink); rotate: -2deg; }
.rp-receipt-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed rgba(8,42,48,0.25); font-size: 0.98rem; }
.rp-receipt-total { border-bottom: 0; padding-top: 16px; font-weight: 800; font-size: 1.1rem; } .rp-receipt-total b { font-family: var(--font-head); font-size: 2.4rem; letter-spacing: -0.05em; line-height: 1; }
.rp-pass { width: min(300px, 100%); padding: 22px; border-radius: 26px; background: var(--rv-paper); border: 2px solid var(--rv-ink); box-shadow: 8px 9px 0 0 var(--rv-ink); text-align: center; rotate: 3deg; position: relative; overflow: hidden; padding-top: 34px; }
.rp-pass::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: #E2A32A; }
.rp-pass-head { display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }
.rp-pass-qr { width: 190px; height: 190px; margin: 18px auto 12px; padding: 14px; border: 2px solid var(--rv-ink); border-radius: 18px; background: #fff; color: var(--rv-ink); }
.rp-pass-qr svg { width: 100%; height: 100%; display: block; }
.rp-pass p { margin: 0; font-size: 0.9rem; color: rgba(8,42,48,0.66); }

/* ---- descent scrubber ---- */
.rp-descent-sec { background: var(--rv-deep); color: var(--rv-cream); padding: 120px 24px; border-radius: var(--rv-radius-xl); margin: 0 12px; }
.rp-descent-head { max-width: 1240px; margin: 0 auto; }
.rp-scrub { max-width: 1240px; margin: 54px auto 0; --tc: #E2A32A; }
.rp-scrub[data-tier="silver"] { --tc: #B8C4CE; } .rp-scrub[data-tier="bronze"] { --tc: #DE8B62; }
.rp-scrub-tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.rp-pick { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px 12px 14px; border-radius: 999px; border: 1.5px solid rgba(238, 246, 247,0.4); background: none; color: var(--rv-cream); font: inherit; font-weight: 800; cursor: pointer; transition: background 0.3s, color 0.3s, border-color 0.3s; }
.rp-pick:hover { border-color: var(--rv-cream); }
.rp-pick.is-on { background: var(--tc); color: var(--rv-ink); border-color: var(--tc); }
.rp-pick:focus-visible { outline: 3px solid var(--rv-aqua); outline-offset: 3px; }
.rp-scrub-stage { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 6vw, 90px); align-items: center; margin-top: 36px; padding: clamp(24px, 4vw, 48px); border-radius: 30px; background: var(--tc); color: var(--rv-ink); transition: background 0.4s; }
.rp-scrub-num { font-family: var(--font-head); font-weight: 800; font-size: clamp(9rem, 20vw, 18rem); line-height: 0.8; letter-spacing: -0.06em; display: flex; align-items: flex-start; }
.rp-scrub-num small { font-size: 0.15em; line-height: 1.05; letter-spacing: -0.01em; margin: 0.9em 0 0 0.5em; }
.rp-scrub-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rp-scrub-price b { font-family: var(--font-head); font-size: clamp(3rem, 6vw, 5.4rem); letter-spacing: -0.055em; line-height: 1; font-weight: 800; }
.rp-scrub-price s { font-size: 1.3rem; opacity: 0.55; } .rp-scrub-price span { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; }
.rp-scrub-info dl { margin: 22px 0 0; display: grid; gap: 0; border-top: 2px solid var(--rv-ink); }
.rp-scrub-info dl div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid rgba(8,42,48,0.25); }
.rp-scrub-info dt { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; align-self: center; }
.rp-scrub-info dd { margin: 0; font-weight: 800; text-align: right; }
.rp-scrub-foot { margin: 22px 0 0; max-width: 62ch; color: rgba(238, 246, 247,0.75); line-height: 1.6; }

/* ---- good to know / rules ---- */
.rp-know { max-width: 1240px; margin: 0 auto; padding: 130px 24px 60px; }
.rp-know-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.rp-know-side { position: sticky; top: 100px; }
.rp-rules, .rp-tool-list, .rp-believe-list, .rp-tp-list { list-style: none; margin: 0; padding: 0; }
.rp-rules { border-top: 2px solid var(--rv-ink); }
.rp-rules li { display: grid; grid-template-columns: minmax(150px, 0.8fr) 1.4fr; gap: 24px; padding: 26px 0; border-bottom: 2px solid var(--rv-ink); align-items: baseline; }
.rp-rules b { font-family: var(--font-head); font-size: clamp(1.4rem, 2.2vw, 2rem); letter-spacing: -0.04em; line-height: 1.05; }
.rp-rules span { line-height: 1.55; color: rgba(8,42,48,0.74); } .rp-rules a { color: var(--rv-teal); font-weight: 700; }
.rp-faq { padding: 80px 24px 100px; } .rp-faq-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }

/* ---- CTA band ---- */
.rp-cta { background: var(--rv-aqua); border-block: 2px solid var(--rv-ink); padding: 100px 24px; }
.rp-cta-inner { max-width: 1240px; margin: 0 auto; } .rp-cta .rv-h2 { font-size: clamp(2.6rem, 6vw, 5.6rem); max-width: 14ch; } .rp-cta .rv-hero-actions { margin-top: 34px; }

/* ---- for restaurants ---- */
.rp-life { max-width: 1240px; margin: 0 auto; padding: 70px 24px 120px; }
.rp-bar { display: flex; gap: 10px; margin-top: 44px; }
.rp-seg { flex: var(--w) 1 0; min-width: 0; padding: 22px 22px 26px; border-radius: 26px; border: 2px solid var(--rv-ink); color: var(--rv-ink); display: flex; flex-direction: column; gap: 10px; min-height: 230px; }
.rp-seg-gold { background: #EBB233; } .rp-seg-silver { background: #C5D0D9; } .rp-seg-bronze { background: #DE8B62; }
.rp-seg-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; }
.rp-seg b { font-family: var(--font-head); font-size: clamp(3rem, 6vw, 5.6rem); letter-spacing: -0.06em; line-height: 0.9; font-weight: 800; margin-top: auto; }
.rp-seg b small { font-size: 0.22em; letter-spacing: 0; margin-left: 6px; }
.rp-seg-time { font-weight: 800; font-size: 1.1rem; }
.rp-life-notes { margin: 34px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; }
.rp-life-notes li { padding: 18px 0 18px 30px; border-top: 1.5px solid rgba(8,42,48,0.22); line-height: 1.55; position: relative; color: rgba(8,42,48,0.78); }
.rp-life-notes li::before { content: ''; position: absolute; left: 0; top: 26px; width: 14px; height: 14px; border-radius: 50%; background: var(--rv-aqua); border: 2px solid var(--rv-ink); }
.rp-tools { background: var(--rv-deep); color: var(--rv-cream); padding: 120px 24px; border-radius: var(--rv-radius-xl); margin: 0 12px; }
.rp-tools-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.rp-tools-side { position: sticky; top: 100px; } .rp-tools-fine { margin-top: 16px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(238, 246, 247,0.55); }
.rp-tool-list li { display: grid; grid-template-columns: 60px 1fr; gap: 12px; padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,0.18); }
.rp-tool-list li:first-child { border-top: 1px solid rgba(255,255,255,0.18); }
.rp-tool-list span { font-family: var(--font-mono); color: var(--rv-aqua); padding-top: 6px; }
.rp-tool-list b { font-family: var(--font-head); font-size: clamp(1.5rem, 2.4vw, 2.2rem); letter-spacing: -0.04em; font-weight: 800; }
.rp-tool-list p { margin: 6px 0 0; color: rgba(238, 246, 247,0.72); line-height: 1.55; max-width: 52ch; }
.rp-deal { max-width: 1240px; margin: 0 auto; padding: 130px 24px 110px; }
.rp-deal-list { margin-top: 44px; border-top: 2px solid var(--rv-ink); }
.rp-deal-row { display: grid; grid-template-columns: minmax(200px, 0.6fr) 1.4fr; gap: 30px; align-items: center; padding: 30px 0; border-bottom: 2px solid var(--rv-ink); }
.rp-deal-row b { font-family: var(--font-head); font-size: clamp(4rem, 9vw, 8rem); letter-spacing: -0.07em; line-height: 0.85; font-weight: 800; color: var(--rv-teal); }
.rp-deal-row b small { font-size: 0.2em; letter-spacing: 0; margin-left: 8px; color: var(--rv-ink); }
.rp-deal-row h3 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.3rem); letter-spacing: -0.04em; font-weight: 800; } .rp-deal-row p { margin: 8px 0 0; max-width: 56ch; line-height: 1.55; color: rgba(8,42,48,0.72); }
.rp-deal-fine { margin: 22px 0 0; color: rgba(8,42,48,0.66); } .rp-deal-fine a { color: var(--rv-teal); font-weight: 700; }

/* ---- pricing ---- */
.rp-plans { max-width: 1240px; margin: 0 auto; padding: 70px 24px 110px; }
.rp-plan-grid { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.rp-plan { display: grid; grid-template-rows: subgrid; grid-row: span 3; border: 2px solid var(--rv-ink); border-radius: 30px; overflow: hidden; background: var(--rv-paper); }
.rp-plan header { padding: 26px 26px 22px; border-bottom: 2px solid var(--rv-ink); }
.rp-plan-medals { display: flex; gap: 6px; margin-bottom: 14px; min-height: 30px; }
.rp-plan h3 { margin: 0; font-size: 2.2rem; letter-spacing: -0.05em; font-weight: 800; }
.rp-plan-price { display: flex; align-items: baseline; gap: 4px; margin-top: 6px; } .rp-plan-price b { font-family: var(--font-head); font-size: 4.2rem; letter-spacing: -0.06em; line-height: 1; font-weight: 800; } .rp-plan-price span { font-family: var(--font-mono); font-size: 0.8rem; opacity: 0.7; }
.rp-plan header p { margin: 8px 0 0; color: rgba(8,42,48,0.7); }
.rp-plan dl { margin: 0; padding: 6px 26px; }
.rp-plan dl div { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-bottom: 1px solid rgba(8,42,48,0.16); }
.rp-plan dl div:last-child { border-bottom: 0; }
.rp-plan dt { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; } .rp-plan dd { margin: 0; font-weight: 800; }
.rp-plan .is-none dd { opacity: 0.35; font-weight: 500; }
.rp-plan-cta { display: block; text-align: center; padding: 18px; margin: 0; border-top: 2px solid var(--rv-ink); font-weight: 800; background: var(--rv-ink); color: var(--rv-cream); transition: background 0.3s, color 0.3s; }
.rp-plan-cta:hover { background: var(--rv-aqua); color: var(--rv-ink); }
.rp-plan-wander { background: var(--rv-aqua); } .rp-plan-wander .rp-plan-cta { background: var(--rv-ink); }
.rp-plan-summit { background: var(--rv-deep); color: var(--rv-cream); border-color: var(--rv-deep); } .rp-plan-summit header { border-color: rgba(255,255,255,0.2); } .rp-plan-summit header p { color: rgba(238, 246, 247,0.72); } .rp-plan-summit dl div { border-color: rgba(255,255,255,0.16); } .rp-plan-summit .rp-plan-cta { background: var(--rv-aqua); color: var(--rv-ink); border-color: var(--rv-deep); } .rp-plan-summit .rp-plan-cta:hover { background: var(--rv-cream); }
.rp-plans-fine { margin: 26px 0 0; color: rgba(8,42,48,0.62); font-size: 0.95rem; }
.rp-tierprice { background: var(--rv-ink); color: var(--rv-cream); padding: 110px 24px; }
.rp-tierprice-inner { max-width: 1240px; margin: 0 auto; }
.rp-tp-list { margin-top: 40px; display: grid; gap: 0; border-top: 1px solid rgba(255,255,255,0.2); }
.rp-tp-list li { display: grid; grid-template-columns: 40px 1fr auto auto; gap: 26px; align-items: center; padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,0.2); }
.rp-tp-list b { font-family: var(--font-head); font-size: clamp(1.6rem, 3vw, 2.6rem); letter-spacing: -0.04em; font-weight: 800; }
.rp-tp-list em { font-style: normal; font-family: var(--font-head); font-size: clamp(2rem, 4vw, 3.6rem); font-weight: 800; letter-spacing: -0.05em; color: var(--rv-aqua); } .rp-tp-list span { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
.rp-tierprice a { color: var(--rv-aqua); font-weight: 700; }
.rp-rest { max-width: 1240px; margin: 0 auto; padding: 120px 24px; } .rp-rest-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.rp-formula { padding: 34px; border-radius: 30px; background: var(--rv-wash); border: 2px solid var(--rv-ink); box-shadow: 10px 12px 0 0 var(--rv-ink); display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-family: var(--font-head); font-weight: 800; font-size: clamp(1.3rem, 2.2vw, 2rem); letter-spacing: -0.03em; }
.rp-formula i { font-style: normal; color: var(--rv-teal); } .rp-formula b { background: var(--rv-aqua); padding: 4px 14px; border: 2px solid var(--rv-ink); border-radius: 999px; }
.rp-formula p { flex-basis: 100%; margin: 6px 0 0; font-family: var(--font-body); font-weight: 500; font-size: 0.95rem; letter-spacing: 0; color: rgba(8,42,48,0.66); }

/* ---- about ---- */
.rp-manifesto { max-width: 1240px; margin: 0 auto; padding: 90px 24px 70px; }

.rp-believe { max-width: 1240px; margin: 0 auto; padding: 30px 24px 120px; }
.rp-believe-list { margin-top: 44px; border-top: 2px solid var(--rv-ink); }
.rp-believe-list li { display: grid; grid-template-columns: 90px 1fr; gap: 24px; padding: 40px 0 44px; border-bottom: 2px solid var(--rv-ink); }
.rp-believe-list span { font-family: var(--font-mono); font-weight: 700; color: var(--rv-teal); padding-top: 12px; }
.rp-believe-list h3 { margin: 0; font-size: clamp(2rem, 4vw, 3.8rem); letter-spacing: -0.045em; line-height: 0.98; font-weight: 800; max-width: 18ch; } .rp-believe-list p { margin: 14px 0 0; font-size: 1.14rem; line-height: 1.6; max-width: 54ch; color: rgba(8,42,48,0.72); }
.rp-today { background: var(--rv-deep); color: var(--rv-cream); padding: 120px 24px; border-radius: var(--rv-radius-xl); margin: 0 12px; }
.rp-today-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 70px; align-items: center; }
.rp-today-ph { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px 34px 34px; box-shadow: 0 0 0 6px rgba(255, 255, 255,0.9); rotate: -3deg; } .rp-today-ph img { width: 100%; height: 100%; object-fit: cover; }

/* ---- demo ---- */
.rp-demo { max-width: 1240px; margin: 0 auto; padding: 60px 24px 130px; }
.rp-demo-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; align-items: stretch; }
.rp-demo-card { padding: clamp(28px, 4vw, 48px); border-radius: 30px; border: 2px solid var(--rv-ink); display: flex; flex-direction: column; gap: 14px; }
.rp-demo-card h2 { margin: 6px 0 0; font-size: clamp(2.4rem, 4.6vw, 4.2rem); letter-spacing: -0.05em; line-height: 0.95; font-weight: 800; } .rp-demo-card p { margin: 0; line-height: 1.6; max-width: 46ch; }
.rp-demo-rest { background: var(--rv-deep); color: var(--rv-cream); border-color: var(--rv-deep); } .rp-demo-rest p { color: rgba(238, 246, 247,0.78); }
.rp-demo-rest ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; } .rp-demo-rest li { padding-left: 22px; position: relative; font-weight: 600; } .rp-demo-rest li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 10px; height: 10px; border-radius: 50%; background: var(--rv-aqua); }
.rp-demo-actions { margin-top: auto; padding-top: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.rp-linkbtn { background: none; border: 0; padding: 0; color: var(--rv-aqua); font: inherit; font-weight: 700; cursor: pointer; text-align: left; } .rp-linkbtn:hover { text-decoration: underline; }
.rp-demo-diner { background: var(--rv-aqua); }
.rp-demo-plans { margin-top: auto; display: grid; gap: 10px; padding-top: 18px; }
.rp-demo-plan { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 16px 20px; border-radius: 22px; border: 2px solid var(--rv-ink); background: var(--rv-paper); font: inherit; cursor: pointer; text-align: left; transition: transform 0.3s var(--rv-ease), background 0.2s; }
.rp-demo-plan:hover { transform: translateY(-3px); background: #fff; } .rp-demo-plan:focus-visible { outline: 3px solid var(--rv-ink); outline-offset: 3px; }
.rp-demo-plan b { font-family: var(--font-head); font-size: 1.5rem; letter-spacing: -0.04em; } .rp-demo-plan span { font-size: 0.86rem; color: rgba(8,42,48,0.66); }

/* ---- responsive ---- */
@media (max-width: 1100px) {
  .rp-hero-inner { grid-template-columns: 1fr; } .rp-hero-art { min-height: 340px; margin-top: 30px; }
  .rp-descent { left: 0; } .rp-know-grid, .rp-tools-inner, .rp-faq-inner, .rp-rest-inner { grid-template-columns: 1fr; gap: 30px; } .rp-know-side, .rp-tools-side { position: static; }
  .rp-demo-grid { grid-template-columns: 1fr; } .rp-today-inner { grid-template-columns: 1fr; gap: 36px; } .rp-today-ph { max-width: 420px; }
}
@media (max-width: 860px) {
  .rp-hero { padding: 104px 20px 70px; }
  .rp-h1 { font-size: clamp(2.7rem, 13vw, 4.6rem); }
  .rp-hero-art { min-height: 300px; } .rp-arch-a { width: 190px; height: 260px; right: 0; } .rp-arch-b { width: 150px; height: 200px; right: 36%; bottom: -50px; } .rp-descent { width: 250px; bottom: -40px; }
  .rp-journey { padding: 30px 20px 60px; } .rp-chapter { grid-template-columns: 1fr; gap: 30px; padding: 44px 0; } .rp-chapter-flip .rp-chapter-copy { order: 0; } .rp-num { font-size: 4.6rem; }
  .rp-descent-sec, .rp-tools, .rp-today { padding: 80px 20px; margin: 0 8px; border-radius: 32px; }
  .rp-scrub-stage { grid-template-columns: 1fr; } .rp-scrub-num { font-size: clamp(8rem, 40vw, 12rem); }
  .rp-know { padding: 80px 20px 30px; } .rp-rules li { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; } .rp-faq { padding: 50px 20px 70px; } .rp-cta { padding: 70px 20px; }
  .rp-life { padding: 40px 20px 80px; } .rp-bar { flex-direction: column; } .rp-seg { min-height: 0; flex: none; } .rp-life-notes { grid-template-columns: 1fr; }
  .rp-deal { padding: 80px 20px; } .rp-deal-row { grid-template-columns: 1fr; gap: 10px; }
  .rp-plans { padding: 40px 20px 70px; } .rp-plan-grid { grid-template-columns: 1fr; } .rp-plan { grid-template-rows: none; grid-row: auto; }
  .rp-tierprice { padding: 80px 20px; } .rp-tp-list li { grid-template-columns: 34px 1fr auto; } .rp-tp-list span { display: none; }
  .rp-rest { padding: 70px 20px; } .rp-manifesto { padding: 70px 20px 50px; } .rp-believe { padding: 20px 20px 80px; } .rp-believe-list li { grid-template-columns: 1fr; gap: 6px; }
  .rp-demo { padding: 30px 20px 90px; } .rp-demo-rest ul { grid-template-columns: 1fr; } .rp-board-row { grid-template-columns: 84px 1fr auto; gap: 10px; }
}

/* closing CTA bands: one centered line, buttons centered beneath */
.rp-cta-inner { text-align: center; }
.rp-cta .rv-h2 { max-width: none; margin-left: auto; margin-right: auto; font-size: clamp(1.9rem, 3.5vw, 3.9rem); line-height: 1.05; white-space: nowrap; }
.rp-cta .rv-hero-actions { justify-content: center; }
@media (max-width: 860px) {
  .rp-cta .rv-h2 { white-space: normal; font-size: clamp(2rem, 9vw, 3rem); text-wrap: balance; }
}

/* full-width section headings fill the row (they were capped at 15ch and wrapped early) */
.rp-believe-head .rv-h2, .rp-journey-head .rv-h2, .rp-plans-head .rv-h2, .rp-life-head .rv-h2,
.rp-deal-head .rv-h2, .rp-descent-head .rv-h2, .rp-tierprice-inner > div > .rv-h2, .rp-problem-head .rv-h2 {
  max-width: none; font-size: clamp(2.1rem, 4.3vw, 4.6rem); text-wrap: balance;
}
.rp-life-head .rv-lead-d, .rp-descent-head .rv-lead-d { max-width: 62ch; }
@media (max-width: 860px) { .rp-believe-head .rv-h2, .rp-journey-head .rv-h2, .rp-plans-head .rv-h2, .rp-life-head .rv-h2, .rp-deal-head .rv-h2, .rp-descent-head .rv-h2, .rp-tierprice-inner > div > .rv-h2 { font-size: clamp(2rem, 9vw, 3rem); } }
.rp-believe-list h3 { max-width: none; font-size: clamp(1.9rem, 3.6vw, 3.6rem); }

/* button rows under left-aligned copy start at the text's left edge (only the closing .rp-cta bands are centered) */
.rp-hero .rv-hero-actions, .rp-tools-side .rv-hero-actions, .rp-rest-inner .rv-hero-actions, .rp-today-inner .rv-hero-actions { justify-content: flex-start; }

/* breathing room between the dark rounded "today" card and the closing CTA band */
.rp-today { margin-bottom: 90px; }
@media (max-width: 860px) { .rp-today { margin-bottom: 64px; } }

/* discount pill on home drop cards: turquoise, one line, text centred */
.rv-drop figcaption em { background: var(--rv-aqua); color: var(--rv-ink); display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; line-height: 1; flex: none; }

/* phone step dots: sit clear below the tilted phone, with more contrast */
.rv-seq-sticky { min-height: 720px; }
.rv-seq-dots { bottom: 6px; }
.rv-seq-dots i { background: rgba(8,42,48,0.45); }
.rv-seq-dots i.on { background: var(--rv-ink); }

/* Tier badges (redesign): SVG coins replace the old hexagon medals. */
.fd-stamp .fd-badge-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.fd-stamp-gold, .fd-stamp-silver, .fd-stamp-bronze { transform: none; }
.fd-stamp-gold { transform: rotate(-5deg); }
.fd-stamp-bronze { transform: rotate(4deg); }
.fd-stamp-silver:hover, .fd-stamp-bronze:hover { transform: rotate(0) scale(1.06); }
.fd-stamp-gold:hover { transform: rotate(3deg) scale(1.06); }
.fd-stamp { transition: transform 0.35s var(--rv-ease, ease); }

/* pricing hero badge pill: badges truly centred (the stamps carried a bottom margin) */
.rp-medals { align-items: center; justify-content: center; padding: 16px 28px; }
.rp-medals .fd-stamp { margin: 0; }

/* stacked layout: centre the pair of arch photos under the hero text */
@media (max-width: 860px) {
  .rp-arch-a { right: auto; left: calc(50% - 15px); width: 190px; height: 260px; }
  .rp-arch-b { right: auto; left: calc(50% - 175px); width: 150px; height: 200px; bottom: -50px; }
}

/* hamburger: no outline box, just the three lines */
.nav-toggle, .rv-header--hero:not(.scrolled) .nav-toggle { border: 0 !important; box-shadow: none !important; background: transparent !important; }
.nav-toggle:focus-visible { outline: 2px solid var(--rv-aqua); outline-offset: 2px; }

/* Closing CTA bands: a little more life — arch photos rising from the edges + ink sparkles */
.rp-cta { position: relative; overflow: hidden; padding: 120px 24px; isolation: isolate; }
.rp-cta-inner { position: relative; z-index: 2; }
.rp-cta::before, .rp-cta::after {
  content: ''; position: absolute; z-index: 1; bottom: -70px; width: 190px; height: 260px;
  border-radius: 999px 999px 0 0; background-size: cover; background-position: center;
  box-shadow: 0 0 0 6px rgba(255, 255, 255,0.92), 0 30px 50px -24px rgba(4,38,44,0.55);
}
.rp-cta::before { left: 6%; background-image: url('../assets/photos/plating.jpg'); rotate: -6deg; }
.rp-cta::after { right: 6%; background-image: url('../assets/photos/friends-tacos.jpg'); rotate: 6deg; }
.rp-cta-inner::before, .rp-cta-inner::after {
  content: ''; position: absolute; width: 34px; height: 34px; background: var(--rv-ink);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.rp-cta-inner::before { left: 24%; top: -34px; }
.rp-cta-inner::after { right: 25%; bottom: -30px; width: 22px; height: 22px; }
@media (max-width: 1000px) {
  .rp-cta { padding: 90px 20px; }
  .rp-cta::before, .rp-cta::after { width: 110px; height: 150px; bottom: -50px; box-shadow: 0 0 0 4px rgba(255, 255, 255,0.92); }
  .rp-cta::before { left: -14px; } .rp-cta::after { right: -14px; }
  .rp-cta-inner::before { left: 8%; top: -44px; } .rp-cta-inner::after { right: 10%; bottom: -44px; }
}

/* Hero floating cards: always fully on screen. Tucked inside the gutters on wide screens; hidden where they'd have to be cropped or would crowd the headline. */
@media (min-width: 1300px) {
  .rv-float-a, .rv-float-c { left: 16px; } .rv-float-b, .rv-float-d { right: 16px; }
  .rv-float .rv-ui { width: 226px !important; }
}
@media (max-width: 1299px) { .rv-float { display: none; } }

/* Plan cards: three matching tickets — a colour band on top, medals tucked beside the name, a perforated tear line, spec rows, and a pill button */
.rp-plan-grid { gap: 28px; }
.rp-plan, .rp-plan-wander, .rp-plan-summit { background: var(--rv-paper); color: var(--rv-ink); border: 2px solid var(--rv-ink); border-radius: 28px; box-shadow: 7px 8px 0 0 var(--rv-ink); overflow: hidden; }
.rp-plan header, .rp-plan-summit header { position: relative; padding: 46px 28px 24px; border-bottom: 2px dashed rgba(8,42,48,0.28); }
.rp-plan header::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 16px; background: var(--rv-tier-bronze, #E48A52); border-bottom: 2px solid var(--rv-ink); }
.rp-plan-wander header::before { background: var(--rv-aqua); }
.rp-plan-summit header::before { background: var(--rv-deep); }
.rp-plan header p, .rp-plan-summit header p { color: rgba(8,42,48,0.7); }
.rp-plan-medals { position: absolute; right: 24px; top: 40px; margin: 0; min-height: 0; gap: 4px; }
.rp-plan-medals .fd-stamp-mini { width: 30px; height: 30px; }
.rp-plan h3 { font-size: 2rem; }
.rp-plan-price b { font-size: 4rem; }
.rp-plan dl { padding: 8px 28px 4px; }
.rp-plan dl div { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 18px; padding: 15px 0; border-bottom: 1px solid rgba(8,42,48,0.12); }
.rp-plan dt { flex: none; max-width: 46%; opacity: 0.6; }
.rp-plan dd { text-align: right; font-size: 0.95rem; }
.rp-plan-cta, .rp-plan-wander .rp-plan-cta, .rp-plan-summit .rp-plan-cta { margin: 14px 28px 28px; border: 2px solid var(--rv-ink); border-radius: 999px; padding: 15px; background: var(--rv-aqua); color: var(--rv-ink); align-self: end; }
.rp-plan-cta:hover { background: var(--rv-ink); color: var(--rv-cream); }
@media (max-width: 860px) { .rp-plan-grid { gap: 22px; } .rp-plan header, .rp-plan-summit header { padding: 44px 22px 20px; } .rp-plan dl { padding: 6px 22px 2px; } .rp-plan-cta { margin: 12px 22px 22px; } .rp-plan-medals { right: 18px; top: 38px; } }

/* Mobile menu: a deep-teal sheet with big numbered links */
@media (max-width: 860px) {
  .rv-header .nav-links, .rv-header--hero:not(.scrolled) .nav-links.open {
    background: var(--rv-field, var(--rv-deep)); color: var(--rv-cream); counter-reset: navitem; padding: 10px 22px 22px; border-radius: 30px; overflow: hidden;
  }
  .rv-header .nav-links li { list-style: none; border-bottom: 1px solid rgba(238, 246, 247,0.14); }
  .rv-header .nav-links li.mobile-cta { border-bottom: 0; padding-top: 20px; }
  .rv-header .nav-links li:not(.mobile-cta) a {
    counter-increment: navitem; display: flex !important; align-items: center; gap: 16px; padding: 16px 2px !important; width: 100%;
    color: var(--rv-cream) !important; font-family: var(--font-head); font-size: 1.7rem !important; font-weight: 800; letter-spacing: -0.04em !important; line-height: 1;
  }
  .rv-header .nav-links li:not(.mobile-cta) a::before {
    content: '0' counter(navitem); position: static; width: auto; flex: none; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; font-weight: 400; color: var(--rv-aqua);
  }
  .rv-header .nav-links li:not(.mobile-cta) a::after {
    content: '→'; position: static !important; margin-left: auto; width: auto !important; height: auto !important; background: none !important; font-family: var(--font-body); font-size: 1.3rem; font-weight: 400; color: rgba(238, 246, 247,0.4); transition: transform 0.25s ease, color 0.2s ease;
  }
  .rv-header .nav-links li:not(.mobile-cta) a:hover::after, .rv-header .nav-links li:not(.mobile-cta) a:active::after { transform: translateX(4px); color: var(--rv-aqua); }
  .rv-header .nav-links a.active { color: var(--rv-aqua) !important; }
  .rv-header .nav-links a.active::after { color: var(--rv-aqua); }
  .rv-header .nav-links .mobile-cta a { display: flex; justify-content: center; width: 100%; padding: 16px !important; font-size: 1.05rem !important; }
  .rv-header .nav-links .mobile-cta a.btn-primary { background: var(--rv-aqua) !important; color: var(--rv-ink) !important; border: 1.5px solid var(--rv-ink) !important; }
}
@media (max-width: 860px) {
  .rv-header .nav-links, .rv-header--hero:not(.scrolled) .nav-links.open, .rv-header .nav-links.open { background: #04262C !important; border: 1.5px solid rgba(108,218,231,0.35); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .rv-header .nav-links li:not(.mobile-cta) a.active::before {
    content: '0' counter(navitem); position: static; width: auto; height: auto; background: none; border-radius: 0; box-shadow: none; transform: none; top: auto; left: auto; color: var(--rv-aqua);
  }
  .rv-header .nav-links li.mobile-cta { border-top: 0 !important; margin-top: 0; }
}
@media (max-width: 860px) {
  .rv-header .nav-links li:not(.mobile-cta) a.active, .rv-header .nav-links li:not(.mobile-cta) a.active::after { color: var(--rv-aqua) !important; }
  .rv-header .nav-links { box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55), 0 0 0 4px rgba(4,38,44,0.25); }
}

/* How It Works hero on phones: the price card + photo arch sit as one centred group */
@media (max-width: 860px) {
  .rp-hero-art { min-height: 330px; }
  .rp-descent { left: calc(50% - 178px); width: 240px; bottom: -34px; padding: 16px 14px 10px; }
  .rp-hero-art .rp-arch-a { left: calc(50% + 8px); right: auto; width: 170px; height: 235px; top: 0; }
  .rp-step { grid-template-columns: 30px 1fr auto; gap: 10px; padding: 10px 4px 10px calc(4px + var(--i) * 6px); }
  .rp-step span { white-space: nowrap; font-size: 0.7rem; }
  .rp-step em { font-size: 1.35rem; }
}
@media (max-width: 380px) {
  .rp-descent { left: calc(50% - 158px); width: 216px; }
  .rp-hero-art .rp-arch-a { left: calc(50% + 4px); width: 148px; height: 210px; }
  .rp-step em { font-size: 1.2rem; } .rp-step span { font-size: 0.66rem; }
}

/* Home "How a drop works": the inline phone screens are centred on mobile */
@media (max-width: 860px) {
  .rv-step-shot { display: flex; justify-content: center; }
  .rv-step-shot .rv-phone-screen { width: 100%; margin-inline: auto; }
}

/* Footer tagline fills the full width on phones */
@media (max-width: 860px) { .footer-brand p, .rv-footer .footer-brand p { max-width: none; width: 100%; } }

/* tighter space between the ticker band and "The problem" */
.rv-statement { padding-bottom: 44px; }
.rv-problem { padding-top: 84px; }
@media (max-width: 860px) { .rv-statement { padding-bottom: 36px; } .rv-problem { padding-top: 44px; } }

/* Two-photo hero art on phones: one centred, overlapping cluster (tall photo right, shorter photo lower-left, sticker on its corner) */
@media (max-width: 860px) {
  .rp-hero-art:has(.rp-arch-b) { min-height: 330px; }
  .rp-hero-art:has(.rp-arch-b) .rp-arch-a { left: calc(50% + 0px); right: auto; top: 0; bottom: auto; width: 168px; height: 236px; }
  .rp-hero-art:has(.rp-arch-b) .rp-arch-b { left: calc(50% - 164px); right: auto; top: 92px; bottom: auto; width: 150px; height: 208px; }
  .rp-hero-art .rp-sticker { left: calc(50% - 172px); top: 14px; width: 92px; height: 92px; z-index: 3; }
  .rp-hero-art .rp-sticker span { font-size: 2rem; } .rp-hero-art .rp-sticker em { font-size: 0.56rem; }
}
@media (max-width: 380px) {
  .rp-hero-art:has(.rp-arch-b) .rp-arch-a { left: calc(50% + 2px); width: 148px; height: 210px; }
  .rp-hero-art:has(.rp-arch-b) .rp-arch-b { left: calc(50% - 146px); width: 134px; height: 186px; top: 84px; }
  .rp-hero-art .rp-sticker { left: calc(50% - 154px); }
}

/* Pricing hero on phones: photo + badge pill as one centred, overlapping cluster (no big empty corner) */
@media (max-width: 860px) {
  .rp-hero-art:has(.rp-medals) { min-height: 310px; }
  .rp-hero-art:has(.rp-medals) .rp-arch-a { left: calc(50% - 56px); right: auto; top: 0; width: 188px; height: 252px; }
  .rp-hero-art:has(.rp-medals) .rp-medals { left: 50%; right: auto; bottom: 4px; translate: -50% 0; padding: 12px 20px; gap: 12px; }
  .rp-hero-art:has(.rp-medals) .rp-medals .fd-stamp { width: 60px; height: 60px; }
}
@media (max-width: 380px) {
  .rp-hero-art:has(.rp-medals) .rp-arch-a { width: 156px; height: 216px; left: calc(50% - 40px); }
  .rp-hero-art:has(.rp-medals) .rp-medals { padding: 10px 16px; gap: 8px; }
  .rp-hero-art:has(.rp-medals) .rp-medals .fd-stamp { width: 50px; height: 50px; }
}

/* About / Demo hero art on phones: photos overlap into a compact cluster, turquoise sparkles fill the corner */
@media (max-width: 860px) {
  .rp-hero-art:has(.rp-arch-b):not(:has(.rp-sticker)) { min-height: 300px; }
  .rp-hero-art:has(.rp-arch-b):not(:has(.rp-sticker)) .rp-arch-a { left: calc(50% - 30px); width: 182px; height: 248px; top: 0; z-index: 1; }
  .rp-hero-art:has(.rp-arch-b):not(:has(.rp-sticker)) .rp-arch-b { left: calc(50% - 150px); width: 156px; height: 212px; top: 96px; z-index: 2; }
  .rp-hero-art:has(.rp-arch-b):not(:has(.rp-sticker))::before, .rp-hero-art:has(.rp-arch-b):not(:has(.rp-sticker))::after {
    content: ''; position: absolute; background: var(--rv-aqua); z-index: 0;
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  }
  .rp-hero-art:has(.rp-arch-b):not(:has(.rp-sticker))::before { width: 44px; height: 44px; left: calc(50% - 142px); top: 18px; }
  .rp-hero-art:has(.rp-arch-b):not(:has(.rp-sticker))::after { width: 22px; height: 22px; left: calc(50% - 80px); top: 62px; opacity: 0.7; }
}
@media (max-width: 380px) {
  .rp-hero-art:has(.rp-arch-b):not(:has(.rp-sticker)) .rp-arch-a { left: calc(50% - 30px); width: 156px; height: 214px; }
  .rp-hero-art:has(.rp-arch-b):not(:has(.rp-sticker)) .rp-arch-b { left: calc(50% - 142px); width: 134px; height: 184px; top: 84px; }
  .rp-hero-art:has(.rp-arch-b):not(:has(.rp-sticker))::before { left: calc(50% - 136px); }
  .rp-hero-art:has(.rp-arch-b):not(:has(.rp-sticker))::after { left: calc(50% - 80px); }
}

/* Closing CTA: a deep-teal rounded card floating on the cream page (replaces the flat turquoise band) */
.rp-cta { background: var(--rv-field) !important; border: 0 !important; border-radius: 36px; margin: 70px 12px 80px; padding: 120px 24px 130px; color: var(--rv-cream); }
.rp-cta .rv-h2 { color: var(--rv-cream); }
.rp-cta .rv-btn-ink { background: var(--rv-aqua); color: var(--rv-ink); }
.rp-cta .rv-btn-ink .rv-btn-arrow { background: rgba(4,38,44,0.16); }
.rp-cta .rv-btn-ink::before { background: var(--rv-cream); }
.rp-cta .rv-btn-line-ink { color: var(--rv-cream); border-color: rgba(238, 246, 247,0.5); }
.rp-cta .rv-btn-line-ink .rv-btn-arrow { background: rgba(255,255,255,0.14); }
.rp-cta .rv-btn-line-ink::before { background: var(--rv-cream); }
.rp-cta .rv-btn-line-ink:hover { color: var(--rv-deep); border-color: var(--rv-cream); }
.rp-cta-inner::before, .rp-cta-inner::after { background: var(--rv-aqua); }
@media (max-width: 1000px) { .rp-cta { padding: 90px 20px 110px; } }
@media (max-width: 860px) { .rp-cta { margin: 40px 8px 60px; border-radius: 30px; } .rp-today { margin-bottom: 0; } }

/* About / Demo hero art on desktop: the same turquoise sparkles that fill the corner on phones */
@media (min-width: 861px) {
  .rp-hero-art:has(.rp-arch-b):not(:has(.rp-sticker)):not(:has(.rp-medals))::before,
  .rp-hero-art:has(.rp-arch-b):not(:has(.rp-sticker)):not(:has(.rp-medals))::after {
    content: ''; position: absolute; background: var(--rv-aqua); z-index: 0;
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  }
  .rp-hero-art:has(.rp-arch-b):not(:has(.rp-sticker)):not(:has(.rp-medals))::before { width: 58px; height: 58px; left: calc(54% - 190px); top: 96px; }
  .rp-hero-art:has(.rp-arch-b):not(:has(.rp-sticker)):not(:has(.rp-medals))::after { width: 26px; height: 26px; left: calc(54% - 108px); top: 52px; opacity: 0.7; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .rp-hero-art:has(.rp-arch-b):not(:has(.rp-sticker)):not(:has(.rp-medals)) { min-height: 400px; }
  .rp-hero-art:has(.rp-arch-b):not(:has(.rp-sticker)):not(:has(.rp-medals)) .rp-arch-a { left: calc(50% - 40px); right: auto; top: 0; bottom: auto; width: 236px; height: 322px; z-index: 1; }
  .rp-hero-art:has(.rp-arch-b):not(:has(.rp-sticker)):not(:has(.rp-medals)) .rp-arch-b { left: calc(50% - 230px); right: auto; top: 130px; bottom: auto; width: 200px; height: 272px; z-index: 2; }
  .rp-hero-art:has(.rp-arch-b):not(:has(.rp-sticker)):not(:has(.rp-medals))::before { left: calc(50% - 220px); top: 36px; }
  .rp-hero-art:has(.rp-arch-b):not(:has(.rp-sticker)):not(:has(.rp-medals))::after { left: calc(50% - 140px); top: 84px; }
}

/* Pricing hero (desktop): sparkles like the other heroes; badge pill overlaps the lower edge of the photos instead of covering one */
@media (min-width: 861px) {
  .rp-hero-art:has(.rp-medals)::before, .rp-hero-art:has(.rp-medals)::after {
    content: ''; position: absolute; background: var(--rv-aqua); z-index: 0;
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  }
  .rp-hero-art:has(.rp-medals)::before { width: 58px; height: 58px; left: calc(54% - 190px); top: 96px; }
  .rp-hero-art:has(.rp-medals)::after { width: 26px; height: 26px; left: calc(54% - 108px); top: 52px; opacity: 0.7; }
  .rp-hero-art .rp-medals { left: 6%; bottom: -46px; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .rp-hero-art:has(.rp-medals) { min-height: 400px; }
  .rp-hero-art:has(.rp-medals) .rp-arch-a { left: calc(50% - 40px); right: auto; top: 0; bottom: auto; width: 236px; height: 322px; z-index: 1; }
  .rp-hero-art:has(.rp-medals) .rp-arch-b { left: calc(50% - 230px); right: auto; top: 110px; bottom: auto; width: 200px; height: 262px; z-index: 2; }
  .rp-hero-art:has(.rp-medals) .rp-medals { left: 50%; translate: -50% 0; bottom: -10px; z-index: 4; }
  .rp-hero-art:has(.rp-medals)::before { left: calc(50% - 220px); top: 36px; }
  .rp-hero-art:has(.rp-medals)::after { left: calc(50% - 140px); top: 84px; }
}

/* Footer wordmark: the star fades top-to-bottom exactly like the letters beside it (the letters run turquoise 100% -> 8% over the word's height; the star sits at ~21-55% of that) */
.rv-wordmark svg { background: linear-gradient(180deg, rgba(108,218,231,0.79) 0%, rgba(108,218,231,0.45) 100%); clip-path: polygon(50% 4.2%, 60.8% 39%, 95.8% 50%, 60.8% 61%, 50% 95.8%, 39.2% 61%, 4.2% 50%, 39.2% 39%); }
.rv-wordmark svg path { fill: transparent; }

/* Pricing hero (desktop): the badge pill sits in the open space lower-right, overlapping only a photo corner */
@media (min-width: 1101px) {
  .rp-hero-art .rp-medals { left: auto; right: 0; bottom: -44px; padding: 10px 20px; gap: 12px; rotate: -3deg; }
  .rp-hero-art .rp-medals .fd-stamp { width: 52px; height: 52px; }
}
@media (min-width: 1101px) {
  .rp-hero-art .rp-medals { right: -8px; bottom: -34px; padding: 16px 32px; gap: 20px; box-shadow: 8px 9px 0 0 var(--rv-ink); }
  .rp-hero-art .rp-medals .fd-stamp { width: 82px; height: 82px; }
}

/* Pricing hero badge pill: same larger size on tablet and phones */
@media (min-width: 861px) and (max-width: 1100px) {
  .rp-hero-art:has(.rp-medals) .rp-medals { padding: 16px 32px; gap: 20px; box-shadow: 8px 9px 0 0 var(--rv-ink); }
  .rp-hero-art:has(.rp-medals) .rp-medals .fd-stamp { width: 82px; height: 82px; }
}
@media (max-width: 860px) {
  .rp-hero-art:has(.rp-medals) .rp-medals { padding: 14px 24px; gap: 14px; box-shadow: 6px 7px 0 0 var(--rv-ink); bottom: -6px; }
  .rp-hero-art:has(.rp-medals) .rp-medals .fd-stamp { width: 72px; height: 72px; }
}
@media (max-width: 380px) {
  .rp-hero-art:has(.rp-medals) .rp-medals { padding: 12px 18px; gap: 10px; }
  .rp-hero-art:has(.rp-medals) .rp-medals .fd-stamp { width: 62px; height: 62px; }
}

/* ==========================================================================
   LEGAL PAGES — Terms, Privacy, Restaurant Agreement
   short teal hero · sticky contents list beside a clean reading column
   ========================================================================== */
.rp-hero-legal .rp-hero-inner { grid-template-columns: 1fr; min-height: 0; }
.rp-hero-legal .rp-hero-art { display: none; }
.rp-hero-legal { padding-bottom: 70px; }
.rp-hero-legal .rp-h1 { font-size: clamp(2.8rem, 7vw, 5.6rem); }
.rp-legal { padding: 70px 24px 40px; }
.rp-legal-inner { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 64px; align-items: start; }
.lg-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 26px; }
.lg-docs { display: flex; flex-direction: column; gap: 6px; }
.lg-docs a { padding: 12px 18px; border-radius: 999px; border: 1.5px solid rgba(8,42,48,0.18); font-weight: 700; color: var(--rv-ink); transition: background 0.2s, border-color 0.2s; }
.lg-docs a:hover { border-color: var(--rv-ink); background: rgba(108,218,231,0.2); }
.lg-docs a.is-on { background: var(--rv-deep); color: var(--rv-cream); border-color: var(--rv-deep); }
.lg-toc { display: flex; flex-direction: column; gap: 2px; padding-top: 22px; border-top: 1.5px dashed rgba(8,42,48,0.25); }
.lg-toc-label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rv-teal); margin-bottom: 8px; }
.lg-toc a { display: flex; gap: 12px; align-items: baseline; padding: 8px 0; color: rgba(8,42,48,0.78); font-weight: 600; font-size: 0.94rem; line-height: 1.3; }
.lg-toc a b { font-family: var(--font-mono); font-size: 0.72rem; color: var(--rv-teal); font-weight: 500; }
.lg-toc a:hover { color: var(--rv-ink); }
.lg-body { max-width: 760px; }
.lg-intro { font-size: 1.2rem; line-height: 1.65; color: var(--rv-ink); margin: 0 0 48px; padding-bottom: 40px; border-bottom: 2px solid var(--rv-ink); }
.lg-sec { padding: 34px 0; border-bottom: 1px solid rgba(8,42,48,0.14); scroll-margin-top: 100px; }
.lg-sec:last-child { border-bottom: 0; }
.lg-sec h2 { display: flex; align-items: center; gap: 16px; margin: 0 0 16px; font-family: var(--font-head); font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -0.04em; line-height: 1.1; font-weight: 800; }
.lg-num { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--rv-aqua); border: 1.5px solid var(--rv-ink); box-shadow: 2px 3px 0 0 var(--rv-ink); font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500; letter-spacing: 0; }
.lg-sec p { margin: 0 0 14px; font-size: 1.04rem; line-height: 1.75; color: rgba(8,42,48,0.78); padding-left: 62px; }
@media (max-width: 960px) {
  .rp-legal { padding: 44px 20px 20px; }
  .rp-legal-inner { grid-template-columns: 1fr; gap: 32px; }
  .lg-side { position: static; }
  .lg-docs { flex-direction: row; flex-wrap: wrap; }
  .lg-toc { display: none; }
  .lg-sec p { padding-left: 0; }
  .lg-sec h2 { gap: 12px; } .lg-num { width: 38px; height: 38px; }
  .lg-intro { font-size: 1.08rem; margin-bottom: 30px; padding-bottom: 28px; }
}

/* Mobile menu icon: three bars pinned to one shared center. Open state = the two outer bars rotate into an X and the middle bar is
   collapsed AND hidden (not just faded), so no browser can leave a stray horizontal bar through the X. The old version stacked the
   bars with flex gaps and offset them by hand, which depended on exact pixel math and on an opacity fade that some mobile Safari
   builds don't repaint inside a blurred header. */
.nav-toggle { position: relative; }
.nav-toggle span { position: absolute; left: 50%; top: 50%; display: block; width: 20px; height: 2px; margin: -1px 0 0 -10px; border-radius: 2px;
  transition: transform 0.28s var(--ease-spring), opacity 0.12s ease, visibility 0s linear 0.12s; }
.nav-toggle span:nth-child(1) { transform: translateY(-7px); }
.nav-toggle span:nth-child(2) { transform: none; opacity: 1; visibility: visible; }
.nav-toggle span:nth-child(3) { transform: translateY(7px); }
.nav-toggle.is-open span:nth-child(1) { transform: rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { transform: scaleX(0); opacity: 0; visibility: hidden; }
.nav-toggle.is-open span:nth-child(3) { transform: rotate(-45deg); }


/* About: "Why Rovin exists" — the idea as a picture: a restaurant ticket and a diner ticket with a clock between them. */
.rp-m-panel { position: relative; overflow: hidden; background: #04262C; color: #EEF6F7; border-radius: 40px; padding: 64px 56px 60px; }
.rp-m-panel::before { content: ''; position: absolute; right: -80px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(108,218,231,0.22), transparent 68%); pointer-events: none; }
.rp-m-panel .rv-eyebrow { display: block; margin-bottom: 34px; color: #6CDAE7; }
.rp-m-stage { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0; }
.rp-m-stage::before { content: ''; position: absolute; left: 6%; right: 6%; top: 50%; border-top: 2px dashed rgba(108,218,231,0.35); z-index: 0; }
.rp-m-ticket { position: relative; z-index: 1; background: #FFFFFF; color: #082A30; border: 2px solid #082A30; border-radius: 26px; box-shadow: 6px 7px 0 0 #6CDAE7; padding: 30px 30px 28px; }
.rp-m-ticket:first-child { transform: rotate(-1.4deg); }
.rp-m-ticket:last-child { transform: rotate(1.4deg); }
.rp-m-tag { display: inline-block; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: #14707B; margin-bottom: 14px; }
.rp-m-ticket h3 { margin: 0 0 18px; font-family: var(--font-head); font-weight: 800; font-size: clamp(1.5rem, 2.5vw, 2.15rem); line-height: 1.06; letter-spacing: -0.025em; }
.rp-m-ticket h3 em { color: #14707B; font-style: italic; }
.rp-m-ticket p { margin: 16px 0 0; font-size: 0.95rem; line-height: 1.55; color: #567074; }
.rp-m-seats { display: flex; gap: 10px; }
.rp-m-seats i { width: 30px; height: 30px; border-radius: 50%; border: 2px dashed #082A30; opacity: 0.35; }
.rp-m-list { display: grid; gap: 9px; }
.rp-m-list i { display: block; height: 10px; border-radius: 999px; background: #DCEBED; }
.rp-m-list i:nth-child(1) { width: 92%; } .rp-m-list i:nth-child(2) { width: 74%; } .rp-m-list i:nth-child(3) { width: 84%; }
.rp-m-clock { position: relative; z-index: 2; margin: 0 -14px; width: 128px; height: 128px; border-radius: 50%; background: #6CDAE7; border: 2px solid #082A30; box-shadow: 4px 5px 0 0 #EEF6F7; display: grid; place-items: center; }
.rp-m-clock svg { width: 100%; height: 100%; display: block; }
.rp-m-clock circle:first-child { fill: none; stroke: #082A30; stroke-width: 2; }
.rp-m-clock .ticks line { stroke: #082A30; stroke-width: 3; stroke-linecap: round; }
.rp-m-clock .hand { stroke: #082A30; stroke-width: 5; stroke-linecap: round; transform-origin: 60px 60px; }
.rp-m-clock .hand.m { animation: rp-m-tick 12s linear infinite; }
.rp-m-clock .pin { fill: #082A30; }
@keyframes rp-m-tick { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rp-m-clock .hand.m { animation: none; } }
.rp-m-punch { margin: 48px 0 0; text-align: center; font-family: var(--font-head); font-weight: 800; font-size: clamp(1.7rem, 3.6vw, 3.1rem); line-height: 1.08; letter-spacing: -0.03em; color: #EEF6F7; }
.rp-m-punch mark { color: #04262C; background: #6CDAE7; border-radius: 12px; padding: 0 0.22em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (max-width: 860px) {
  .rp-manifesto { padding: 56px 16px 40px; }
  .rp-m-panel { border-radius: 30px; padding: 40px 22px 42px; }
  .rp-m-stage { grid-template-columns: 1fr; gap: 0; justify-items: center; }
  .rp-m-stage::before { left: 50%; right: auto; top: 6%; bottom: 6%; border-top: 0; border-left: 2px dashed rgba(108,218,231,0.35); }
  .rp-m-ticket { width: 100%; }
  .rp-m-clock { margin: -16px 0; width: 104px; height: 104px; }
  .rp-m-punch { margin-top: 38px; }
}


/* About: at-a-glance strip, who-it's-for cards, fairness rules. */
.rp-for, .rp-promises { max-width: 1240px; margin: 0 auto; padding: 70px 24px 20px; }
.rp-for-head { margin-bottom: 34px; }
.rp-for-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.rp-for-card { background: #FFFFFF; border: 2px solid #082A30; border-radius: 28px; box-shadow: 6px 7px 0 0 #082A30; padding: 34px 32px 32px; }
.rp-for-card:nth-child(2) { background: #6CDAE7; }
.rp-for-card:nth-child(2) .rp-m-tag { color: #04262C; }
.rp-for-card h3 { margin: 0 0 18px; font-family: var(--font-head); font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.05; letter-spacing: -0.03em; }
.rp-for-card ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; }
.rp-for-card li { position: relative; padding-left: 26px; font-size: 0.98rem; line-height: 1.55; }
.rp-for-card li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 12px; height: 12px; border-radius: 50%; background: #04262C; }
.rp-promises-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 2px solid var(--rv-ink); }
.rp-promises-grid > div { padding: 28px 24px 8px 0; }
.rp-promises-grid > div + div { padding-left: 24px; border-left: 2px solid var(--rv-ink); }
.rp-promises-grid h3 { margin: 0 0 10px; font-family: var(--font-head); font-weight: 800; font-size: 1.25rem; line-height: 1.12; letter-spacing: -0.02em; }
.rp-promises-grid p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: #3E5A60; }
@media (max-width: 900px) {
  .rp-promises-grid { grid-template-columns: 1fr 1fr; }
  .rp-promises-grid > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .rp-promises-grid > div:nth-child(n+3) { border-top: 2px solid var(--rv-ink); }
  .rp-for-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .rp-for, .rp-promises, .rp-values, .rp-people { padding-left: 16px; padding-right: 16px; }
  .rp-for-card { padding: 26px 22px 24px; border-radius: 24px; }
  .rp-promises-grid > div { padding: 22px 12px 8px 0; } .rp-promises-grid > div + div { padding-left: 14px; }
}

.rp-for-card { display: flex; flex-direction: column; }
.rp-for-card .rv-hero-actions { margin-top: auto; justify-content: flex-start; }

/* About: mission, who we build for, values (meaning, not mechanics). */
.rp-mission { max-width: 1240px; margin: 0 auto; padding: 50px 24px 30px; }
.rp-mission-inner .rv-eyebrow { display: block; margin-bottom: 22px; }
.rp-mission-h { margin: 0; max-width: 17em; font-family: var(--font-head); font-weight: 800; font-size: clamp(2.2rem, 5vw, 4.6rem); line-height: 1.02; letter-spacing: -0.04em; text-wrap: balance; }
.rp-mission-h em { color: var(--rv-teal); font-style: italic; }
.rp-mission-sub { margin: 26px 0 0; max-width: 34em; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.55; color: #3E5A60; }
.rp-vision { margin-top: 54px; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 2px solid var(--rv-ink); }
.rp-vision > div { padding: 28px 40px 0 0; }
.rp-vision > div + div { padding: 28px 0 0 40px; border-left: 2px solid var(--rv-ink); }
.rp-vision h3 { margin: 0 0 12px; font-family: var(--font-head); font-weight: 800; font-size: 1.35rem; letter-spacing: -0.02em; }
.rp-vision p { margin: 0; font-size: 1.05rem; line-height: 1.65; color: #3E5A60; }
.rp-people { max-width: 1240px; margin: 0 auto; padding: 70px 24px 10px; }
.rp-people .rp-for-card p { margin: 0; font-size: 1.02rem; line-height: 1.65; }
.rp-values { max-width: 1240px; margin: 0 auto; padding: 50px 24px 30px; }
@media (max-width: 760px) {
  .rp-mission { padding: 30px 16px 20px; }
  .rp-vision { grid-template-columns: 1fr; }
  .rp-vision > div, .rp-vision > div + div { padding: 24px 0 0; border-left: 0; }
  .rp-vision > div + div { margin-top: 24px; border-top: 2px solid var(--rv-ink); }
  .rp-people { padding-top: 50px; }
}

/* About spacing: the beliefs used to lead straight into a dark section (hence the big bottom padding); now the "who we build for"
   cards follow, so the gaps between these sections are trimmed to one even rhythm. */
.rp-believe { padding-bottom: 30px; }
.rp-people { padding-top: 40px; }
.rp-values { padding-bottom: 80px; }
@media (max-width: 900px) { .rp-believe { padding-bottom: 20px; } .rp-people { padding-top: 30px; } .rp-values { padding-bottom: 60px; } }


/* FAQ (How It Works): an editorial list instead of stacked boxes — numbered rows, a bold question, a round plus button. */
.rp-faq-side { position: sticky; top: 110px; align-self: start; }
.rp-faq-more { margin-top: 34px; max-width: 320px; padding: 22px 24px 24px; border: 2px solid var(--rv-ink); border-radius: 24px; background: #FFFFFF; box-shadow: 4px 5px 0 0 #6CDAE7; }
.rp-faq-more b { display: block; font-family: var(--font-head); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; }
.rp-faq-more p { margin: 6px 0 16px; font-size: 0.95rem; line-height: 1.5; color: #3E5A60; }
.rp-faq .accordion.fd-accordion { max-width: none; margin: 0; gap: 0; counter-reset: faq; border-top: 2px solid var(--rv-ink); }
.rp-faq .fd-accordion .accordion-item { counter-increment: faq; background: transparent; border: 0; border-bottom: 2px solid var(--rv-ink); border-radius: 0; box-shadow: none; transform: none; }
.rp-faq .fd-accordion .accordion-item:hover { transform: none; box-shadow: none; }
.rp-faq .fd-accordion .accordion-item.open { background: transparent; border-color: var(--rv-ink); box-shadow: none; }
.rp-faq .fd-accordion .accordion-trigger { display: grid; grid-template-columns: 56px 1fr 46px; align-items: center; column-gap: 8px; width: 100%; text-align: left; padding: 26px 0; background: transparent; font-family: var(--font-head); font-weight: 800; font-size: clamp(1.15rem, 1.9vw, 1.55rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--rv-ink); }
.rp-faq .fd-accordion .accordion-trigger:hover { background: transparent; }
.rp-faq .fd-accordion .accordion-trigger::before { content: counter(faq, decimal-leading-zero); font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; color: var(--rv-teal); }
.rp-faq .fd-accordion .accordion-trigger .plus { width: 46px; height: 46px; margin: 0; padding: 12px; box-sizing: border-box; border: 2px solid var(--rv-ink); border-radius: 50%; color: var(--rv-ink); background: transparent; transition: transform 0.3s var(--ease-spring), background 0.2s ease; }
.rp-faq .fd-accordion .accordion-item.open .accordion-trigger .plus { transform: rotate(45deg); background: #6CDAE7; color: var(--rv-ink); }
.rp-faq .fd-accordion .accordion-panel-inner { padding: 0 60px 28px 64px; font-family: var(--font-body); font-size: 1.05rem; line-height: 1.65; color: #3E5A60; }
@media (max-width: 900px) {
  .rp-faq-side { position: static; }
  .rp-faq-more { max-width: none; }
  .rp-faq .fd-accordion .accordion-trigger { grid-template-columns: 34px 1fr 42px; padding: 20px 0; }
  .rp-faq .fd-accordion .accordion-trigger .plus { width: 42px; height: 42px; padding: 11px; }
  .rp-faq .fd-accordion .accordion-panel-inner { padding: 0 8px 22px 42px; font-size: 1rem; }
}

/* Home: a little more room between the hero phone and the "Somewhere nearby…" statement on desktop (phones keep their own spacing). */
@media (min-width: 861px) { .rv-statement { padding-top: 340px; } }


/* ---------- Home hero edit: no background photo; highlighted "Don't wait." ---------- */
.rv-h1 em.rv-hl {
  display: inline-block; font-style: normal; font-weight: 800; letter-spacing: -0.035em;
  color: var(--rv-deep); background: var(--rv-aqua);
  padding: 0.02em 0.2em 0.1em; margin-top: 0.06em; border-radius: 0.2em; transform: rotate(-2deg);
  box-shadow: 0 0.14em 0 rgba(4, 38, 44, 0.35), 0 0.5em 1.2em -0.3em rgba(108, 218, 231, 0.55);
}

/* ---------- Home hero background: Rovin turquoise, dark text ----------
   Replaces the multi-stop dark teal gradient (blotchy light patches, film grain, glow layer). */
.rv-hero {
  background: linear-gradient(180deg, #6CDAE7 0%, #8FE6EE 60%, #BDF2F5 100%);
  color: var(--rv-deep);
}
.rv-hero-glow, .rv-hero-grain { display: none; }
.rv-hero .rv-h1 { color: var(--rv-deep); }
.rv-hero .rv-h1 em.rv-hl { background: var(--rv-deep); color: var(--rv-aqua); box-shadow: 0 0.14em 0 rgba(4, 38, 44, 0.25); }
.rv-hero .rv-lead, .rv-hero .rv-fine { color: #0A4A55; text-shadow: none; }
.rv-hero .rv-pill { background: rgba(255, 255, 255, 0.6); color: var(--rv-deep); border-color: rgba(4, 38, 44, 0.12); }
.rv-hero .rv-pill-go { background: var(--rv-deep); color: var(--rv-aqua); }
.rv-hero .rv-btn-hot { background: var(--rv-deep); color: var(--rv-cream); box-shadow: 0 14px 26px -14px rgba(4, 38, 44, 0.7); }
.rv-hero .rv-btn-hot::before { background: #fff; }
.rv-hero .rv-btn-hot:hover { color: var(--rv-deep); }
.rv-hero .rv-btn-hot .rv-btn-arrow { background: rgba(255, 255, 255, 0.16); }
.rv-hero .rv-btn-ghost { background: rgba(255, 255, 255, 0.6); color: var(--rv-deep); border-color: rgba(4, 38, 44, 0.25); }
.rv-hero .rv-btn-ghost .rv-btn-arrow { background: rgba(4, 38, 44, 0.1); }
.rv-hero .rv-btn-ghost::before { background: var(--rv-deep); }
.rv-hero .rv-btn-ghost:hover { color: var(--rv-cream); border-color: var(--rv-deep); }

/* Hero spacing: text block sits a little lower, and the sub-line clears the highlighted "Don't wait." */
@media (min-width: 861px) { .rv-hero { padding-top: 150px; } }
@media (max-width: 860px) { .rv-hero { padding-top: 128px; } }
.rv-hero .rv-h1 em.rv-hl { margin-bottom: 0.14em; }
.rv-hero .rv-lead { margin-top: 28px; }

/* ---------- Other marketing pages: same turquoise hero as the home page ----------
   Covers the inner-page heroes (.rp-hero: How it works, For restaurants, Pricing, About, Demo, legal) and the Contact hero
   (.fd-page-hero). Replaces the dark teal gradient, noise/halftone overlays and aqua italic accent words. */
.rp-hero {
  background: linear-gradient(180deg, #6CDAE7 0%, #8FE6EE 60%, #BDF2F5 100%);
  color: var(--rv-deep);
}
.rp-hero::before { display: none; }
.rp-hero .rv-eyebrow.on-dark { color: #0A4A55; }
.rp-hero .rp-h1 { color: var(--rv-deep); }
.rp-hero .rp-lead { color: #0A4A55; }
.rp-hero .rp-h1 em, .fd-page-hero .fd-accent {
  display: inline-block; font-style: normal; font-weight: 800; letter-spacing: -0.035em;
  background: var(--rv-deep); color: var(--rv-aqua);
  padding: 0.02em 0.2em 0.1em; margin: 0.04em 0 0.1em; border-radius: 0.2em; transform: rotate(-2deg);
  box-shadow: 0 0.14em 0 rgba(4, 38, 44, 0.25);
}
.rp-hero .rv-btn-hot { background: var(--rv-deep); color: var(--rv-cream); box-shadow: 0 14px 26px -14px rgba(4, 38, 44, 0.7); }
.rp-hero .rv-btn-hot::before { background: #fff; }
.rp-hero .rv-btn-hot:hover { color: var(--rv-deep); }
.rp-hero .rv-btn-hot .rv-btn-arrow { background: rgba(255, 255, 255, 0.16); }
.rp-hero .rv-btn-ghost { background: rgba(255, 255, 255, 0.6); color: var(--rv-deep); border-color: rgba(4, 38, 44, 0.25); }
.rp-hero .rv-btn-ghost .rv-btn-arrow { background: rgba(4, 38, 44, 0.1); }
.rp-hero .rv-btn-ghost::before { background: var(--rv-deep); }
.rp-hero .rv-btn-ghost:hover { color: var(--rv-cream); border-color: var(--rv-deep); }

.fd-page-hero {
  color: var(--rv-deep) !important;
  background: linear-gradient(180deg, #6CDAE7 0%, #8FE6EE 50%, #BDF2F5 70%, var(--rv-cream) 100%) !important;
}
.fd-page-hero .fd-halftone { display: none; }
.fd-page-hero .fd-h1 { color: var(--rv-deep); }
.fd-page-hero .fd-eyebrow { color: #0A4A55; }
.fd-page-hero .fd-lead { color: #0A4A55; }
.fd-page-hero .fd-mono-tag { color: #0A4A55; }
.rp-hero .rp-sticker { background: var(--rv-deep); color: var(--rv-aqua); box-shadow: 0 18px 30px -14px rgba(4, 38, 44, 0.6); }