/* ==========================================================================
   Rovin — turquoise surfaces across the signed-in views
   Matches the turquoise marketing heroes. Restyles the big dark-teal "field"
   surfaces only: page-header banners (diner/account), dashboard top bars and
   sidebars (restaurant + admin), the login and onboarding side panels, the
   restaurant profile hero, the chat header and the marketing closing CTA.
   Dark pills/buttons, chips and cards are left as they were (they now read as
   accents on the turquoise). Loaded last; remove its <link> in index.html to undo.
   ========================================================================== */

:root {
  --tq-grad: linear-gradient(165deg, #6CDAE7 0%, #8FE6EE 62%, #BDF2F5 100%);
  --tq-text: #04262C;
  --tq-soft: #0A4A55;
  --tq-star: #fff;
}

/* ---- diner / account page-header banners ---- */
#view .section-head.align-left:not(.diner-section-head) { background: var(--tq-grad); color: var(--tq-text); }
#view .section-head.align-left:not(.diner-section-head)::after { background: var(--tq-star); opacity: 0.4; }
#view .section-head.align-left:not(.diner-section-head) .eyebrow { color: var(--tq-soft) !important; }
#view .section-head.align-left:not(.diner-section-head) h1,
#view .section-head.align-left:not(.diner-section-head) h2 { color: var(--tq-text); }
#view .section-head.align-left:not(.diner-section-head) .section-lead,
#view .section-head.align-left:not(.diner-section-head) p { color: var(--tq-soft); }
.feed-meta { color: var(--tq-soft); }
.feed-meta-num { color: var(--tq-text); }
.feed-meta-sep { background: var(--tq-text); }

/* ---- restaurant + admin dashboards: top bar ---- */
.dash-topbar { background: var(--tq-grad); color: var(--tq-text); }
.dash-topbar::after { background: var(--tq-star); opacity: 0.4; }
.dash-topbar h1 { color: var(--tq-text); }
.dash-topbar p, .dash-topbar .muted, .dash-topbar small { color: var(--tq-soft); }
.dash-topbar-eyebrow { color: var(--tq-soft); }
.dash-topbar .status-badge, .dash-topbar .plan-pill, .dash-topbar .badge { background: var(--tq-text); color: #6CDAE7; }

/* ---- restaurant + admin dashboards: sidebar ---- */
.dash-sidebar { background: linear-gradient(180deg, #6CDAE7 0%, #8FE6EE 100%); }
.dash-sidebar .brand { color: var(--tq-text); }
.dash-sidebar .dash-restaurant-chip { background: rgba(255, 255, 255, 0.5); border-color: rgba(4, 38, 44, 0.14); }
.dash-sidebar .dash-restaurant-chip:hover { background: rgba(255, 255, 255, 0.7); }
.dash-sidebar .dash-restaurant-chip strong { color: var(--tq-text); }
.dash-sidebar .dash-restaurant-chip span { color: var(--tq-soft); }
.dash-sidebar .dash-nav-label { color: rgba(4, 38, 44, 0.55); }
.dash-sidebar .dash-nav a { color: var(--tq-text); }
.dash-sidebar .dash-nav a:hover { background: rgba(255, 255, 255, 0.55); color: var(--tq-text); }
.dash-sidebar .dash-nav a.active { background: var(--tq-text); color: #6CDAE7; }
.dash-sidebar .dash-nav a.active .badge-count { background: var(--tq-text); color: #fff; }
.dash-sidebar .dash-sidebar-footer { border-top-color: rgba(4, 38, 44, 0.16); }
.dash-sidebar .dash-sidebar-footer a, .dash-sidebar .dash-sidebar-footer button { color: var(--tq-text); }
.dash-sidebar .dash-sidebar-footer a:hover, .dash-sidebar .dash-sidebar-footer button:hover { background: rgba(255, 255, 255, 0.55); color: var(--tq-text); }

/* ---- login + onboarding side panels, restaurant profile hero ---- */
.login-aside, .ob-aside, .restaurant-hero { background: var(--tq-grad); color: var(--tq-text); }
.login-aside h1, .ob-aside h2, .restaurant-hero h1, .restaurant-hero h2 { color: var(--tq-text); }
.login-aside p, .ob-aside .section-lead, .restaurant-hero p, .restaurant-hero-meta, .restaurant-hero-facts { color: var(--tq-soft); }
.login-aside .eyebrow, .ob-aside .eyebrow, .restaurant-hero .eyebrow { color: var(--tq-soft) !important; }
.login-aside-stats div span, .login-tier-item { color: var(--tq-soft); }
.login-aside-stats div b { color: var(--tq-text); }
.login-tier-strip { border-top-color: rgba(4, 38, 44, 0.28); }
.ob-count b { color: var(--tq-text); }
.ob-count span { color: var(--tq-soft); }
.login-aside::after, .ob-aside::after { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.55); }
.restaurant-hero-photo { box-shadow: 8px 9px 0 0 var(--tq-text); border-color: #fff; }

/* ---- chat header + full-screen loading ---- */
.ai-chat-header { background: var(--tq-grad); color: var(--tq-text); }
.ai-chat-header-text strong { color: var(--tq-text); }
.ai-chat-header-text span, .ai-chat-header-text small { color: var(--tq-soft); }
.ai-chat-avatar { background: var(--tq-text); }
.ai-chat-avatar svg { color: #6CDAE7; }
.rv-loading { background: var(--tq-grad); color: var(--tq-text); }

/* ---- marketing closing CTA band ("Your first Drop is waiting") ---- */
.rp-cta { background: var(--tq-grad) !important; color: var(--tq-text); }
.rp-cta .rv-h2, .rp-cta h2 { color: var(--tq-text); }
.rp-cta p { color: var(--tq-soft); }
.dash-sidebar .brand-mark { background: #fff; }

/* closing CTA band: buttons for a turquoise background (same pair as the heroes) */
.rp-cta .rv-btn-ink { background: var(--tq-text); color: var(--rv-cream); box-shadow: 0 14px 26px -14px rgba(4, 38, 44, 0.7); }
.rp-cta .rv-btn-ink .rv-btn-arrow { background: rgba(255, 255, 255, 0.16); color: #fff; }
.rp-cta .rv-btn-ink::before { background: #fff; }
.rp-cta .rv-btn-ink:hover { color: var(--tq-text); }
.rp-cta .rv-btn-line-ink { background: rgba(255, 255, 255, 0.6); color: var(--tq-text); border-color: rgba(4, 38, 44, 0.25); }
.rp-cta .rv-btn-line-ink .rv-btn-arrow { background: rgba(4, 38, 44, 0.1); color: var(--tq-text); }
.rp-cta .rv-btn-line-ink::before { background: var(--tq-text); }
.rp-cta .rv-btn-line-ink:hover { color: var(--rv-cream); border-color: var(--tq-text); }

/* ---- loading screen: dark text and mark on the turquoise (was cream-on-dark) ---- */
.rv-loading-word { color: var(--tq-text); }
.rv-loading-star { background: #fff; box-shadow: 0 14px 28px -12px rgba(4, 38, 44, 0.45); }
.rv-loading-ring { border-color: rgba(4, 38, 44, 0.16); border-top-color: var(--tq-text); }
.rv-loading-line { background: rgba(4, 38, 44, 0.16); }
.rv-loading-line i { background: var(--tq-text); }
.rv-loading-note { color: var(--tq-soft); }

/* ---- home page closing card ("Your first drop is waiting") ---- */
.rv-finale-card { background: linear-gradient(140deg, #6CDAE7 0%, #8FE6EE 55%, #BDF2F5 100%); color: var(--tq-text); }
.rv-finale-glow { background: radial-gradient(closest-side, rgba(255, 255, 255, 0.75), transparent); }
.rv-finale-card .rv-eyebrow.on-dark { color: var(--tq-soft); }
.rv-finale-card .rv-h2.on-dark, .rv-finale-card .rv-h2 { color: var(--tq-text); }
.rv-finale-card .rv-lead-d.on-dark { color: var(--tq-soft); }
.rv-finale-card .rv-btn-hot { background: var(--tq-text); color: var(--rv-cream); box-shadow: 0 14px 26px -14px rgba(4, 38, 44, 0.7); }
.rv-finale-card .rv-btn-hot::before { background: #fff; }
.rv-finale-card .rv-btn-hot:hover { color: var(--tq-text); }
.rv-finale-card .rv-btn-hot .rv-btn-arrow { background: rgba(255, 255, 255, 0.16); }
.rv-finale-card .rv-btn-ghost { background: rgba(255, 255, 255, 0.6); color: var(--tq-text); border-color: rgba(4, 38, 44, 0.25); }
.rv-finale-card .rv-btn-ghost .rv-btn-arrow { background: rgba(4, 38, 44, 0.1); }
.rv-finale-card .rv-btn-ghost::before { background: var(--tq-text); }
.rv-finale-card .rv-btn-ghost:hover { color: var(--rv-cream); border-color: var(--tq-text); }
.rv-finale-ph { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.6); }
.rv-finale-ticket { background: rgba(255, 255, 255, 0.92); color: var(--tq-text); border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 30px 50px -22px rgba(4, 38, 44, 0.55); }

/* ---- marketing mobile menu sheet: turquoise with dark links ---- */
@media (max-width: 860px) {
  .rv-header .nav-links, .rv-header--hero:not(.scrolled) .nav-links.open, .rv-header .nav-links.open {
    background: linear-gradient(165deg, #6CDAE7 0%, #8FE6EE 62%, #BDF2F5 100%) !important; border: 1.5px solid rgba(255, 255, 255, 0.7); color: var(--tq-text);
    box-shadow: 0 30px 50px -24px rgba(4, 38, 44, 0.45);
  }
  .rv-header .nav-links li { border-bottom-color: rgba(4, 38, 44, 0.16); }
  .rv-header .nav-links li:not(.mobile-cta) a { color: var(--tq-text) !important; }
  .rv-header .nav-links li:not(.mobile-cta) a::before, .rv-header .nav-links li:not(.mobile-cta) a.active::before { color: var(--tq-soft); }
  .rv-header .nav-links li:not(.mobile-cta) a::after { color: rgba(4, 38, 44, 0.4); }
  .rv-header .nav-links li:not(.mobile-cta) a:hover::after, .rv-header .nav-links li:not(.mobile-cta) a:active::after { color: var(--tq-text); }
  .rv-header .nav-links li:not(.mobile-cta) a.active, .rv-header .nav-links li:not(.mobile-cta) a.active::after { color: var(--tq-text) !important; }
  .rv-header .nav-links li:not(.mobile-cta) a.active::before { color: var(--tq-text) !important; font-weight: 700; }
  .rv-header .nav-links .mobile-cta a.btn-primary { background: var(--tq-text) !important; color: var(--rv-cream) !important; border: 0 !important; }
}

/* ---- footer: turquoise, dark text, white giant wordmark ---- */
.site-footer, .rv-footer { background: linear-gradient(180deg, #8FE6EE 0%, #6CDAE7 100%); color: var(--tq-soft); }
.site-footer .footer-brand .brand { color: var(--tq-text); }
.site-footer .footer-brand p, .site-footer .footer-newsletter p { color: var(--tq-soft); }
.site-footer .footer-col h4 { color: var(--tq-text); }
.site-footer .footer-col a { color: var(--tq-soft); }
.site-footer .footer-col a:hover, .rv-footer .footer-col a:hover { color: var(--tq-text); text-decoration: underline; text-underline-offset: 3px; }
.site-footer .footer-grid { border-bottom-color: rgba(4, 38, 44, 0.16); }
.site-footer .footer-bottom, .rv-footer .footer-bottom { border-top-color: rgba(4, 38, 44, 0.16); color: var(--tq-soft); }
.site-footer .footer-socials a { background: rgba(255, 255, 255, 0.55); color: var(--tq-text); }
.site-footer .footer-socials a:hover { background: #fff; }
.site-footer .btn-primary, .rv-footer .btn-primary { background: var(--tq-text); color: var(--rv-cream); box-shadow: 0 12px 22px -12px rgba(4, 38, 44, 0.6); }
.site-footer .btn-primary:hover { background: #fff; color: var(--tq-text); }
.rv-wordmark { background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.12) 92%); -webkit-background-clip: text; background-clip: text; }
.rv-wordmark svg { color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.55) 100%); }
.site-footer .footer-col a.btn-primary, .site-footer .footer-newsletter a.btn-primary, .site-footer a.btn-primary { color: var(--rv-cream); text-decoration: none; }
.site-footer .footer-col a.btn-primary:hover, .site-footer a.btn-primary:hover { color: var(--tq-text); text-decoration: none; }

/* ==========================================================================
   Closing CTA band on the marketing pages — new layout
   Text on the left, two overlapping arched photos rising from the bottom on
   the right, big pale stars behind. Same turquoise as before.
   ========================================================================== */
.rp-cta { display: flex; align-items: center; min-height: 480px; padding: 100px 72px; }
.rp-cta-inner { width: 100%; max-width: 1240px; text-align: left; padding-right: 46%; }
.rp-cta .rv-h2, .rp-cta h2 { white-space: normal; max-width: 11ch; margin-left: 0; margin-right: 0; font-size: clamp(2.6rem, 4.6vw, 4.6rem); line-height: 1; text-wrap: balance; }
.rp-cta .rv-hero-actions { justify-content: flex-start; margin-top: 30px; }

/* arched photos: the big one right, the smaller one in front of it */
.rp-cta::after { left: auto; right: 5%; bottom: -70px; width: 300px; height: 410px; rotate: 4deg; z-index: 1;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.7), 0 34px 56px -26px rgba(4, 38, 44, 0.55); }
.rp-cta::before { left: auto; right: 25%; bottom: -90px; width: 210px; height: 300px; rotate: -7deg; z-index: 2;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.7), 0 34px 56px -26px rgba(4, 38, 44, 0.55); }

/* stars: a big pale one top-left, a smaller one near the photos */
.rp-cta-inner::before, .rp-cta-inner::after { background: #fff; opacity: 0.45; }
.rp-cta-inner::before { left: -190px; top: -215px; width: 280px; height: 280px; }
.rp-cta-inner::after { right: 40%; bottom: -70px; left: auto; top: auto; width: 64px; height: 64px; opacity: 0.6; }

@media (max-width: 1000px) {
  .rp-cta { display: block; min-height: 0; padding: 70px 24px 270px; }
  .rp-cta-inner { padding-right: 0; }
  .rp-cta .rv-h2, .rp-cta h2 { max-width: 12ch; font-size: clamp(2.2rem, 9vw, 3.4rem); }
  .rp-cta::after { right: 6%; bottom: -60px; width: 190px; height: 260px; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.7), 0 24px 40px -22px rgba(4, 38, 44, 0.55); }
  .rp-cta::before { right: 42%; bottom: -70px; width: 140px; height: 200px; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.7), 0 24px 40px -22px rgba(4, 38, 44, 0.55); }
  .rp-cta-inner::before { left: -90px; top: -120px; width: 190px; height: 190px; }
  .rp-cta-inner::after { right: 6%; bottom: auto; top: -20px; width: 44px; height: 44px; }
}

/* ==========================================================================
   Large dark-teal sections -> pale aqua wash (#DDF4F6), with dark text
   marketing: scrolling strip, home tier section + dark bento tile, How it works
   (example board + tier scrubber), About (why-Rovin panel + "today" card),
   For restaurants (dashboard tools), Pricing (what plans unlock), demo card.
   app: the dark tile in the dashboard metric grids.
   Small dark buttons / pills / chips are intentionally left dark.
   ========================================================================== */
:root { --tq-wash: #DDF4F6; }

/* ---- home: scrolling strip ---- */
.rv-marquee { background: var(--tq-wash); color: var(--tq-text); }
.rv-marquee span, .rv-marquee b { color: var(--tq-text); }
.rv-marquee em { color: #0B6573; }
.rv-marquee i, .rv-marquee svg { color: #0B6573; }

/* ---- home: tier section ---- */
.rv-tiers { background: var(--tq-wash); color: var(--tq-text); }
.rv-tiers-head .rv-eyebrow.on-dark { color: var(--tq-soft); }
.rv-tiers-head .rv-h2.on-dark, .rv-tiers-head .rv-h2 { color: var(--tq-text); }
.rv-tiers-head .rv-lead-d.on-dark { color: var(--tq-soft); }

/* ---- home: dark bento tile ---- */
.rv-tile-ink { background: #A6EEF4; color: var(--tq-text); }
.rv-tile-ink h3, .rv-tile-ink .rv-tile-zero { color: var(--tq-text); }
.rv-tile-ink p { color: var(--tq-soft); }

/* ---- other marketing sections: text on the wash ---- */
.rp-descent-sec, .rp-today, .rp-tools, .rp-tierprice, .rp-m-panel { background: var(--tq-wash); color: var(--tq-text); }
.rp-m-panel::before { background: radial-gradient(circle, rgba(108, 218, 231, 0.45), transparent 68%); }

:is(.rp-descent-sec, .rp-today, .rp-tools, .rp-tierprice, .rp-m-panel) :is(h1, h2, h3, h4, b, strong, .rv-h2, .rp-m-punch):not(.rv-btn *):not(.rp-scrub-stage *):not(.rp-m-ticket *):not(.rp-pick *):not(.fd-stamp *) { color: var(--tq-text) !important; }
:is(.rp-descent-sec, .rp-today, .rp-tools, .rp-tierprice, .rp-m-panel) :is(p, li, dd, dt, small, label, .rv-lead-d, .rv-eyebrow, .rp-tools-fine, .rp-scrub-foot):not(.rv-btn *):not(.rp-scrub-stage *):not(.rp-m-ticket *):not(.rp-pick *):not(.fd-stamp *) { color: var(--tq-soft) !important; }
.rp-tierprice a, .rp-tools a { color: #0B6573 !important; }

/* ---- How it works: example feed board ---- */
.rp-board { background: #fff; color: var(--tq-text); box-shadow: 0 30px 50px -28px rgba(4, 38, 44, 0.4); }
.rp-board b, .rp-board em { color: var(--tq-text); }
.rp-board .rp-note-tag { color: var(--tq-soft); }

/* ---- demo page: restaurant card ---- */
.rp-demo-rest { background: var(--tq-wash); color: var(--tq-text); border-color: rgba(4, 38, 44, 0.14); }
.rp-demo-rest h2, .rp-demo-rest h3, .rp-demo-rest b, .rp-demo-rest li { color: var(--tq-text); }
.rp-demo-rest p, .rp-demo-rest .rv-eyebrow { color: var(--tq-soft); }

/* ---- dashboards / history: the dark metric tile ---- */
.metric-grid .metric-card:nth-child(4n+2) { background: #A6EEF4; color: var(--tq-text); border-color: var(--tq-text) !important; }
.metric-grid .metric-card:nth-child(4n+2) .metric-value { color: var(--tq-text); }
.metric-grid .metric-card:nth-child(4n+2) .metric-label, .metric-grid .metric-card:nth-child(4n+2) .metric-sub { color: var(--tq-soft); opacity: 1; }
.history-stats-band > div:nth-child(3) { background: #A6EEF4; color: var(--tq-text); }
.rv-marquee { border-block-color: #6CDAE7; }
.rv-marquee-track span { color: var(--tq-text); }
.rv-marquee-track span:nth-of-type(even) { color: #0B6573; }
.rv-marquee-track i { color: #0B6573; }
.rv-tiers { background: #C6EEF2; }

/* tier tabs on pale aqua: inactive pills need dark text + visible outline */
.rp-descent-sec .rp-pick:not(.is-on){color:var(--tq-text);border-color:rgba(4,38,44,.45);background:rgba(255,255,255,.55)}
.rp-descent-sec .rp-pick:not(.is-on):hover{border-color:var(--tq-text);background:#fff}
.rp-descent-sec .rp-pick.is-on{color:var(--tq-text)}
.rp-descent-sec .rp-scrub-foot{color:var(--tq-soft)}

/* statement sentence removed: the section now only holds the marquee strip below the phones */
@media (min-width: 861px) { .rv-statement { padding-top: 250px; padding-bottom: 0; } }
@media (max-width: 860px) { .rv-statement { padding-top: 140px; padding-bottom: 0; } }

/* "For Diners" note: same soft aqua family as the rest of the page instead of the flat saturated cyan */
.rv-note-d { background: linear-gradient(160deg, #BDF2F5 0%, #A6EEF4 100%); }

/* segmented tab switch (wallet, etc.): pale aqua track instead of a dark bar */
.tabs-switch { background: var(--tq-wash); border: 1.5px solid rgba(4,38,44,.14); }
.tabs-switch button { color: var(--tq-soft); }
.tabs-switch button:hover:not(.active) { color: var(--tq-text); background: rgba(255,255,255,.55); }
.tabs-switch button.active { background: #fff; color: var(--tq-text); box-shadow: 0 1px 3px rgba(4,38,44,.18), 0 0 0 1.5px rgba(4,38,44,.16); }

/* history stats: third card is pale aqua now, so its number, label and icon must be dark */
.history-stats-band > div:nth-child(3) b { color: var(--tq-text) !important; }
.history-stats-band > div:nth-child(3) > span:last-child { color: var(--tq-soft) !important; }
.history-stats-band > div:nth-child(3) .history-stat-icon { background: var(--tq-text); color: #A6EEF4; }

/* role toggle: pale track like the other tab switches */
.role-toggle { background: var(--tq-wash); border: 1.5px solid rgba(4,38,44,.14); }
.role-toggle button { color: var(--tq-soft); }
.role-toggle button.active { background: #fff; color: var(--tq-text); box-shadow: 0 1px 3px rgba(4,38,44,.18), 0 0 0 1.5px rgba(4,38,44,.16); }

/* drops board (list view): pale aqua panel instead of dark teal */
.drop-carousel.is-board { background: var(--tq-wash); color: var(--tq-text); }
.is-board .drop-card { color: var(--tq-text); border-bottom-color: rgba(4,38,44,.14); }
.is-board .drop-card :is(h1,h2,h3,h4,b,strong,.drop-price,.drop-title) { color: var(--tq-text); }
.drop-carousel.is-board .drop-countdown { background: #A6EEF4 !important; }
.is-board .drop-countdown .countdown-unit b { color: var(--tq-text); }
.is-board .drop-countdown .countdown-unit span { color: var(--tq-soft); }

/* history stats: one calm look for all three cards (was white / bright cyan / pale mix) */
.history-stats-band > div,
.history-stats-band > div:nth-child(2),
.history-stats-band > div:nth-child(3) { background: var(--tq-wash) !important; background-image: none !important; color: var(--tq-text) !important; }
.history-stats-band b,
.history-stats-band > div:nth-child(3) b { color: var(--tq-text) !important; }
.history-stats-band > div > span:last-child,
.history-stats-band > div:nth-child(3) > span:last-child { color: var(--tq-soft) !important; }
.history-stats-band .history-stat-icon,
.history-stats-band > div:nth-child(2) .history-stat-icon,
.history-stats-band > div:nth-child(3) .history-stat-icon { background: var(--tq-text) !important; color: #A6EEF4 !important; }

/* support chat: calmer pale-aqua palette, visible avatar star, status dot and close button */
.ai-chat-header { background: linear-gradient(180deg, #BDF2F5 0%, #DDF4F6 100%); border-bottom: 1.5px solid rgba(4,38,44,.12); }
.ai-chat-avatar { background: #fff; border: 1.5px solid var(--tq-text); }
.ai-chat-avatar svg { color: var(--tq-text); }
.ai-chat-live { background: #0B8F7B; box-shadow: 0 0 0 0 rgba(11,143,123,.5); }
.ai-chat-close { background: #fff; color: var(--tq-text); border: 1.5px solid rgba(4,38,44,.35); }
.ai-chat-close:hover { background: var(--tq-text); color: #fff; }
.ai-chat-close svg { stroke: currentColor; }
.ai-chat-starter, .ai-chat-action-btn { background: var(--tq-wash); color: var(--tq-text); }
.ai-chat-starter:hover, .ai-chat-action-btn:hover { background: var(--tq-text); color: #fff; }
.ai-chat-msg-user { background: #BDF2F5; color: var(--tq-text); }
.ai-chat-send, #ai-chat-root .ai-chat-send { background: #A6EEF4 !important; color: var(--tq-text) !important; }
.ai-chat-input-row textarea:focus { outline-color: rgba(166,238,244,.9); }

/* role toggle (login / sign-up): clearer selected vs. unselected */
.role-toggle { background: var(--tq-wash); border: 2px solid rgba(4,38,44,.35); }
.role-toggle button { background: #fff; color: var(--tq-text); border: 1.5px solid rgba(4,38,44,.35); font-weight: 800; }
.role-toggle button svg { color: var(--tq-text); }
.role-toggle button.active,
.role-toggle button.active:hover { background: var(--tq-text); color: #fff; border-color: var(--tq-text); box-shadow: none; }
.role-toggle button.active svg { color: #6CDAE7; }
.role-toggle button:not(.active):hover,
.role-toggle button:not(.active):focus-visible { background: #A6EEF4 !important; color: var(--tq-text) !important; border-color: var(--tq-text); }
.role-toggle button:not(.active):hover svg, .role-toggle button:not(.active):focus-visible svg { color: var(--tq-text); }

/* sign-in side panel: calm turquoise with stars (no dark photo), tidy type and stats */
.login-aside::after { inset: 0; right: 0; bottom: 0; width: auto; height: auto; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20600%20700%22%20preserveAspectRatio%3D%22xMaxYMax%20slice%22%3E%0A%3Cg%20fill%3D%22%23fff%22%3E%0A%3Cpath%20transform%3D%22translate%28300%20330%29%20scale%2811%29%22%20opacity%3D%22.38%22%20d%3D%22M12%202%20L14.2%209.8%20L22%2012%20L14.2%2014.2%20L12%2022%20L9.8%2014.2%20L2%2012%20L9.8%209.8%20Z%22/%3E%0A%3Cpath%20transform%3D%22translate%28520%20120%29%20scale%283.2%29%22%20opacity%3D%22.7%22%20d%3D%22M12%202%20L14.2%209.8%20L22%2012%20L14.2%2014.2%20L12%2022%20L9.8%2014.2%20L2%2012%20L9.8%209.8%20Z%22/%3E%0A%3Cpath%20transform%3D%22translate%28120%20600%29%20scale%282.2%29%22%20opacity%3D%22.6%22%20d%3D%22M12%202%20L14.2%209.8%20L22%2012%20L14.2%2014.2%20L12%2022%20L9.8%2014.2%20L2%2012%20L9.8%209.8%20Z%22/%3E%0A%3Cpath%20transform%3D%22translate%28560%20560%29%20scale%281.6%29%22%20opacity%3D%22.8%22%20d%3D%22M12%202%20L14.2%209.8%20L22%2012%20L14.2%2014.2%20L12%2022%20L9.8%2014.2%20L2%2012%20L9.8%209.8%20Z%22/%3E%0A%3Ccircle%20cx%3D%22470%22%20cy%3D%2260%22%20r%3D%224%22%20opacity%3D%22.7%22/%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%22470%22%20r%3D%225%22%20opacity%3D%22.5%22/%3E%3Ccircle%20cx%3D%22430%22%20cy%3D%22650%22%20r%3D%224%22%20opacity%3D%22.7%22/%3E%0A%3C/g%3E%0A%3Cpath%20transform%3D%22translate%28450%20470%29%20scale%284.2%29%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.5%22%20opacity%3D%22.8%22%20d%3D%22M12%202%20L14.2%209.8%20L22%2012%20L14.2%2014.2%20L12%2022%20L9.8%2014.2%20L2%2012%20L9.8%209.8%20Z%22/%3E%0A%3C/svg%3E") right bottom / cover no-repeat; border-radius: 0; transform: none; box-shadow: none; }
.login-aside h1 { font-size: clamp(2.3rem, 3.6vw, 3.5rem); line-height: 1.02; letter-spacing: -0.045em; max-width: 12ch; }
.login-aside p { max-width: 34ch; font-size: 1.05rem; }
.login-aside-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 18px 40px; margin-top: 40px; }
.login-aside-stats div span { display: block; margin-top: 2px; }
.login-tier-strip { margin-top: 36px; padding-top: 22px; border-top: 1.5px solid rgba(4,38,44,.16) !important; }
@media (max-width: 960px) { .login-aside::after { width: auto; height: auto; } }

/* primary buttons: dark teal with white text (matches the hero buttons) instead of flat bright cyan */
.btn-primary { background: var(--tq-text); color: #fff; border: 1.5px solid var(--tq-text); }
.btn-primary:hover { background: #A6EEF4; color: var(--tq-text); border-color: var(--tq-text); }
.btn-primary:disabled, .btn-primary[disabled] { opacity: .55; }

/* sign-in page: one calm turquoise stage with the form in a single centred white card */
.login-wrap { margin: 14px; min-height: calc(100vh - 94px); border-radius: 30px; align-items: center; justify-content: center; padding: clamp(28px, 5vw, 64px) 16px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201440%20900%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cg%20fill%3D%22%23fff%22%3E%0A%3Cpath%20transform%3D%22translate%28190%20260%29%20scale%2813%29%22%20opacity%3D%220.34%22%20d%3D%22M12%202%20L14.2%209.8%20L22%2012%20L14.2%2014.2%20L12%2022%20L9.8%2014.2%20L2%2012%20L9.8%209.8%20Z%22/%3E%3Cpath%20transform%3D%22translate%281260%20640%29%20scale%2815%29%22%20opacity%3D%220.3%22%20d%3D%22M12%202%20L14.2%209.8%20L22%2012%20L14.2%2014.2%20L12%2022%20L9.8%2014.2%20L2%2012%20L9.8%209.8%20Z%22/%3E%3Cpath%20transform%3D%22translate%2890%20720%29%20scale%283.4%29%22%20opacity%3D%220.75%22%20d%3D%22M12%202%20L14.2%209.8%20L22%2012%20L14.2%2014.2%20L12%2022%20L9.8%2014.2%20L2%2012%20L9.8%209.8%20Z%22/%3E%3Cpath%20transform%3D%22translate%28330%20110%29%20scale%282.6%29%22%20opacity%3D%220.7%22%20d%3D%22M12%202%20L14.2%209.8%20L22%2012%20L14.2%2014.2%20L12%2022%20L9.8%2014.2%20L2%2012%20L9.8%209.8%20Z%22/%3E%3Cpath%20transform%3D%22translate%281340%20170%29%20scale%283.8%29%22%20opacity%3D%220.7%22%20d%3D%22M12%202%20L14.2%209.8%20L22%2012%20L14.2%2014.2%20L12%2022%20L9.8%2014.2%20L2%2012%20L9.8%209.8%20Z%22/%3E%3Cpath%20transform%3D%22translate%281130%20820%29%20scale%282.4%29%22%20opacity%3D%220.75%22%20d%3D%22M12%202%20L14.2%209.8%20L22%2012%20L14.2%2014.2%20L12%2022%20L9.8%2014.2%20L2%2012%20L9.8%209.8%20Z%22/%3E%3Cpath%20transform%3D%22translate%28250%20820%29%20scale%282%29%22%20opacity%3D%220.7%22%20d%3D%22M12%202%20L14.2%209.8%20L22%2012%20L14.2%2014.2%20L12%2022%20L9.8%2014.2%20L2%2012%20L9.8%209.8%20Z%22/%3E%3Cpath%20transform%3D%22translate%281230%20330%29%20scale%282%29%22%20opacity%3D%220.8%22%20d%3D%22M12%202%20L14.2%209.8%20L22%2012%20L14.2%2014.2%20L12%2022%20L9.8%2014.2%20L2%2012%20L9.8%209.8%20Z%22/%3E%0A%3Ccircle%20cx%3D%22120%22%20cy%3D%22120%22%20r%3D%225%22%20opacity%3D%22.7%22/%3E%3Ccircle%20cx%3D%22420%22%20cy%3D%22620%22%20r%3D%224%22%20opacity%3D%22.6%22/%3E%3Ccircle%20cx%3D%221050%22%20cy%3D%2290%22%20r%3D%225%22%20opacity%3D%22.7%22/%3E%3Ccircle%20cx%3D%221380%22%20cy%3D%22450%22%20r%3D%224%22%20opacity%3D%22.7%22/%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%22470%22%20r%3D%224%22%20opacity%3D%22.7%22/%3E%3Ccircle%20cx%3D%221180%22%20cy%3D%22720%22%20r%3D%224%22%20opacity%3D%22.6%22/%3E%0A%3C/g%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.5%22%20opacity%3D%22.85%22%3E%0A%3Cpath%20transform%3D%22translate%28300%20480%29%20scale%284.2%29%22%20d%3D%22M12%202%20L14.2%209.8%20L22%2012%20L14.2%2014.2%20L12%2022%20L9.8%2014.2%20L2%2012%20L9.8%209.8%20Z%22/%3E%3Cpath%20transform%3D%22translate%281110%20220%29%20scale%284.6%29%22%20d%3D%22M12%202%20L14.2%209.8%20L22%2012%20L14.2%2014.2%20L12%2022%20L9.8%2014.2%20L2%2012%20L9.8%209.8%20Z%22/%3E%3Cpath%20transform%3D%22translate%28170%2090%29%20scale%282.6%29%22%20d%3D%22M12%202%20L14.2%209.8%20L22%2012%20L14.2%2014.2%20L12%2022%20L9.8%2014.2%20L2%2012%20L9.8%209.8%20Z%22/%3E%3Cpath%20transform%3D%22translate%281300%20800%29%20scale%283%29%22%20d%3D%22M12%202%20L14.2%209.8%20L22%2012%20L14.2%2014.2%20L12%2022%20L9.8%2014.2%20L2%2012%20L9.8%209.8%20Z%22/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat, linear-gradient(180deg, #6CDAE7 0%, #8FE6EE 55%, #BDF2F5 100%); }
.login-split { display: flex; flex-direction: column; align-items: center; gap: 26px; max-width: 520px; width: 100%; margin: 0 auto; }
.login-aside, .login-aside--sent { background: none; margin: 0; padding: 0; min-height: 0; overflow: visible; text-align: center; align-items: center; display: flex; }
.login-aside::after { display: none; }
.login-aside .eyebrow { display: none; }
.login-aside h1, .login-aside--sent h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); max-width: 14ch; margin: 0 auto; }
.login-aside p { margin: 12px auto 0; max-width: 40ch; }
.login-aside-stats, .login-tier-strip { display: none !important; }
.login-card.form-card { width: 100%; max-width: 460px; margin: 0 auto; padding: clamp(24px, 4vw, 38px); background: #fff !important; border: 1.5px solid rgba(4,38,44,.14) !important; border-radius: 30px !important; box-shadow: 0 28px 60px -34px rgba(4,38,44,.55) !important; }
.login-card .section-head { text-align: center; }
.login-card .section-head .eyebrow { display: none; }
.login-card .section-head h2 { margin-top: 0 !important; }
@media (max-width: 960px) { .login-wrap { margin: 10px; } .login-aside { display: flex; margin: 0; padding: 0; min-height: 0; } .login-aside p { display: block; } .login-card.form-card { padding: 24px 20px; } }
.login-aside:not(.login-aside--sent) p { display: none !important; }
.login-wrap { padding-top: clamp(24px, 4vw, 48px); padding-bottom: clamp(24px, 4vw, 48px); }

/* logo hover: the star spins a half-turn with a little spring while the badge pops */
.brand { transition: letter-spacing .35s cubic-bezier(.34, 1.56, .64, 1); }
.brand .brand-mark { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease; }
.brand .brand-mark svg { transition: transform .7s cubic-bezier(.34, 1.56, .64, 1); transform-origin: 50% 50%; }
@media (hover: hover) {
  .brand:hover .brand-mark { transform: scale(1.12) rotate(-8deg); box-shadow: 0 0 0 5px rgba(255, 255, 255, .55); }
  .brand:hover .brand-mark svg { transform: rotate(180deg) scale(1.12); }
  .brand:active .brand-mark { transform: scale(.94); }
}
@media (prefers-reduced-motion: reduce) {
  .brand, .brand .brand-mark, .brand .brand-mark svg { transition: none; }
  .brand:hover .brand-mark, .brand:hover .brand-mark svg { transform: none; }
}

/* ===== sign-in v3: minimal cream page, no panels ===== */
.login-wrap { margin: 0; border-radius: 0; background: none; min-height: calc(100vh - 70px); padding: clamp(36px, 8vh, 96px) 20px 64px; align-items: flex-start; }
.login-split { max-width: 440px; gap: 0; }
.login-aside:not(.login-aside--sent) { display: none !important; }
.login-card.form-card { max-width: 440px; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
.login-card .section-head { margin-bottom: 28px !important; }
.login-card .section-head::before { content: ''; display: block; width: 60px; height: 60px; margin: 0 auto 22px; border-radius: 50%; background: #6CDAE7 url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23082A30%22%20d%3D%22M12%202%20L14.2%209.8%20L22%2012%20L14.2%2014.2%20L12%2022%20L9.8%2014.2%20L2%2012%20L9.8%209.8%20Z%22/%3E%3C/svg%3E") center / 28px no-repeat; }
.login-card .section-head h2 { font-size: clamp(2.2rem, 5vw, 3rem); letter-spacing: -0.045em; line-height: 1.05; }
.login-card .section-head .section-lead { margin: 12px auto 0 !important; font-size: 1.02rem; }
.login-card .role-toggle { margin-bottom: 26px; }
.login-card .demo-divider { margin: 28px 0 14px; }
.login-card .demo-buttons { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px 22px; }
.login-card .demo-buttons .btn { width: auto; flex: none; padding: 4px 2px; min-height: 0; background: none; border: 0; border-radius: 0; box-shadow: none; font-weight: 700; font-size: .92rem; color: var(--tq-text); text-decoration: underline; text-decoration-color: #6CDAE7; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.login-card .demo-buttons .btn:hover { background: none; color: var(--tq-text); text-decoration-color: var(--tq-text); transform: none; }
.login-aside--sent { margin-bottom: 8px; }
@media (max-width: 960px) { .login-wrap { margin: 0; padding-top: 28px; } .login-card.form-card { padding: 0 !important; } }

/* sign-in uses the home-page hero background: turquoise gradient with stars, full width */
.login-wrap { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201440%20900%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cg%20fill%3D%22%23fff%22%3E%0A%3Cpath%20transform%3D%22translate%28190%20300%29%20scale%2814%29%22%20opacity%3D%220.34%22%20d%3D%22M12%202%20L14.2%209.8%20L22%2012%20L14.2%2014.2%20L12%2022%20L9.8%2014.2%20L2%2012%20L9.8%209.8%20Z%22/%3E%3Cpath%20transform%3D%22translate%281270%20620%29%20scale%2816%29%22%20opacity%3D%220.3%22%20d%3D%22M12%202%20L14.2%209.8%20L22%2012%20L14.2%2014.2%20L12%2022%20L9.8%2014.2%20L2%2012%20L9.8%209.8%20Z%22/%3E%3Cpath%20transform%3D%22translate%2890%20740%29%20scale%283.4%29%22%20opacity%3D%220.75%22%20d%3D%22M12%202%20L14.2%209.8%20L22%2012%20L14.2%2014.2%20L12%2022%20L9.8%2014.2%20L2%2012%20L9.8%209.8%20Z%22/%3E%3Cpath%20transform%3D%22translate%28360%20120%29%20scale%282.6%29%22%20opacity%3D%220.7%22%20d%3D%22M12%202%20L14.2%209.8%20L22%2012%20L14.2%2014.2%20L12%2022%20L9.8%2014.2%20L2%2012%20L9.8%209.8%20Z%22/%3E%3Cpath%20transform%3D%22translate%281340%20170%29%20scale%283.8%29%22%20opacity%3D%220.7%22%20d%3D%22M12%202%20L14.2%209.8%20L22%2012%20L14.2%2014.2%20L12%2022%20L9.8%2014.2%20L2%2012%20L9.8%209.8%20Z%22/%3E%3Cpath%20transform%3D%22translate%281130%20820%29%20scale%282.4%29%22%20opacity%3D%220.75%22%20d%3D%22M12%202%20L14.2%209.8%20L22%2012%20L14.2%2014.2%20L12%2022%20L9.8%2014.2%20L2%2012%20L9.8%209.8%20Z%22/%3E%3Cpath%20transform%3D%22translate%28250%20840%29%20scale%282%29%22%20opacity%3D%220.7%22%20d%3D%22M12%202%20L14.2%209.8%20L22%2012%20L14.2%2014.2%20L12%2022%20L9.8%2014.2%20L2%2012%20L9.8%209.8%20Z%22/%3E%3Cpath%20transform%3D%22translate%281230%20350%29%20scale%282%29%22%20opacity%3D%220.8%22%20d%3D%22M12%202%20L14.2%209.8%20L22%2012%20L14.2%2014.2%20L12%2022%20L9.8%2014.2%20L2%2012%20L9.8%209.8%20Z%22/%3E%0A%3Ccircle%20cx%3D%22120%22%20cy%3D%22120%22%20r%3D%225%22%20opacity%3D%22.7%22/%3E%3Ccircle%20cx%3D%22440%22%20cy%3D%22640%22%20r%3D%224%22%20opacity%3D%22.6%22/%3E%3Ccircle%20cx%3D%221050%22%20cy%3D%2290%22%20r%3D%225%22%20opacity%3D%22.7%22/%3E%3Ccircle%20cx%3D%221390%22%20cy%3D%22470%22%20r%3D%224%22%20opacity%3D%22.7%22/%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%22500%22%20r%3D%224%22%20opacity%3D%22.7%22/%3E%3Ccircle%20cx%3D%221180%22%20cy%3D%22730%22%20r%3D%224%22%20opacity%3D%22.6%22/%3E%0A%3C/g%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%22.5%22%20opacity%3D%22.85%22%3E%0A%3Cpath%20transform%3D%22translate%28300%20500%29%20scale%284.2%29%22%20d%3D%22M12%202%20L14.2%209.8%20L22%2012%20L14.2%2014.2%20L12%2022%20L9.8%2014.2%20L2%2012%20L9.8%209.8%20Z%22/%3E%3Cpath%20transform%3D%22translate%281120%20230%29%20scale%284.6%29%22%20d%3D%22M12%202%20L14.2%209.8%20L22%2012%20L14.2%2014.2%20L12%2022%20L9.8%2014.2%20L2%2012%20L9.8%209.8%20Z%22/%3E%3Cpath%20transform%3D%22translate%28170%20110%29%20scale%282.6%29%22%20d%3D%22M12%202%20L14.2%209.8%20L22%2012%20L14.2%2014.2%20L12%2022%20L9.8%2014.2%20L2%2012%20L9.8%209.8%20Z%22/%3E%3Cpath%20transform%3D%22translate%281310%20800%29%20scale%283%29%22%20d%3D%22M12%202%20L14.2%209.8%20L22%2012%20L14.2%2014.2%20L12%2022%20L9.8%2014.2%20L2%2012%20L9.8%209.8%20Z%22/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat, linear-gradient(180deg, #6CDAE7 0%, #8FE6EE 55%, #BDF2F5 100%); }
.login-card .section-head::before { background-color: #fff; }
.login-card .section-lead { color: var(--tq-soft) !important; }
.login-card .field label { color: var(--tq-text); }
.login-card .demo-divider { color: var(--tq-soft); }
.login-card .demo-divider::before, .login-card .demo-divider::after { background: rgba(4,38,44,.22); border-color: rgba(4,38,44,.22); }
.login-card .demo-buttons .btn { text-decoration-color: #fff; }
.login-wrap { margin-top: -40px; margin-bottom: -40px; min-height: calc(100vh - 70px); }

/* no outlined stars anywhere: hidden on the home hero, dropped from the sign-in background */
.rv-dc .rv-dc-doodle { display: none !important; }
.login-wrap { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201440%20900%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cg%20fill%3D%22%23fff%22%3E%0A%3Cpath%20transform%3D%22translate%28190%20300%29%20scale%2814%29%22%20opacity%3D%220.34%22%20d%3D%22M12%202%20L14.2%209.8%20L22%2012%20L14.2%2014.2%20L12%2022%20L9.8%2014.2%20L2%2012%20L9.8%209.8%20Z%22/%3E%3Cpath%20transform%3D%22translate%281270%20620%29%20scale%2816%29%22%20opacity%3D%220.3%22%20d%3D%22M12%202%20L14.2%209.8%20L22%2012%20L14.2%2014.2%20L12%2022%20L9.8%2014.2%20L2%2012%20L9.8%209.8%20Z%22/%3E%3Cpath%20transform%3D%22translate%2890%20740%29%20scale%283.4%29%22%20opacity%3D%220.75%22%20d%3D%22M12%202%20L14.2%209.8%20L22%2012%20L14.2%2014.2%20L12%2022%20L9.8%2014.2%20L2%2012%20L9.8%209.8%20Z%22/%3E%3Cpath%20transform%3D%22translate%28360%20120%29%20scale%282.6%29%22%20opacity%3D%220.7%22%20d%3D%22M12%202%20L14.2%209.8%20L22%2012%20L14.2%2014.2%20L12%2022%20L9.8%2014.2%20L2%2012%20L9.8%209.8%20Z%22/%3E%3Cpath%20transform%3D%22translate%281340%20170%29%20scale%283.8%29%22%20opacity%3D%220.7%22%20d%3D%22M12%202%20L14.2%209.8%20L22%2012%20L14.2%2014.2%20L12%2022%20L9.8%2014.2%20L2%2012%20L9.8%209.8%20Z%22/%3E%3Cpath%20transform%3D%22translate%281130%20820%29%20scale%282.4%29%22%20opacity%3D%220.75%22%20d%3D%22M12%202%20L14.2%209.8%20L22%2012%20L14.2%2014.2%20L12%2022%20L9.8%2014.2%20L2%2012%20L9.8%209.8%20Z%22/%3E%3Cpath%20transform%3D%22translate%28250%20840%29%20scale%282%29%22%20opacity%3D%220.7%22%20d%3D%22M12%202%20L14.2%209.8%20L22%2012%20L14.2%2014.2%20L12%2022%20L9.8%2014.2%20L2%2012%20L9.8%209.8%20Z%22/%3E%3Cpath%20transform%3D%22translate%281230%20350%29%20scale%282%29%22%20opacity%3D%220.8%22%20d%3D%22M12%202%20L14.2%209.8%20L22%2012%20L14.2%2014.2%20L12%2022%20L9.8%2014.2%20L2%2012%20L9.8%209.8%20Z%22/%3E%0A%3Ccircle%20cx%3D%22120%22%20cy%3D%22120%22%20r%3D%225%22%20opacity%3D%22.7%22/%3E%3Ccircle%20cx%3D%22440%22%20cy%3D%22640%22%20r%3D%224%22%20opacity%3D%22.6%22/%3E%3Ccircle%20cx%3D%221050%22%20cy%3D%2290%22%20r%3D%225%22%20opacity%3D%22.7%22/%3E%3Ccircle%20cx%3D%221390%22%20cy%3D%22470%22%20r%3D%224%22%20opacity%3D%22.7%22/%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%22500%22%20r%3D%224%22%20opacity%3D%22.7%22/%3E%3Ccircle%20cx%3D%221180%22%20cy%3D%22730%22%20r%3D%224%22%20opacity%3D%22.6%22/%3E%0A%3C/g%3E%3C/svg%3E") center / cover no-repeat, linear-gradient(180deg, #6CDAE7 0%, #8FE6EE 55%, #BDF2F5 100%); }

/* contact page: tighten the space between the intro and the form */
.fd-page-hero:has(.fd-page-hero-solo) { padding-bottom: 28px !important; min-height: 0 !important; }
.fd-page-hero + .fd-band { padding-top: 20px !important; }
.fd-page-hero:has(.fd-page-hero-solo) { margin-bottom: 0 !important; }

/* ===== sign-in v4: headline with highlight, form on the left, the three app phones on the right ===== */
.login-card .section-head .eyebrow { display: block !important; color: var(--tq-soft); margin-bottom: 14px; }
.login-card .section-head h2 { font-size: clamp(2.5rem, 6vw, 3.6rem); line-height: 1.02; }
.login-hl { display: inline-block; font-style: normal; margin-top: .12em; padding: 0 .2em .08em; color: #6CDAE7; background: #082A30; border-radius: .22em; rotate: -2deg; box-shadow: 6px 7px 0 rgba(4, 38, 44, .28); }
.login-phones { display: none; }
@media (min-width: 1101px) {
  .login-wrap { align-items: center; padding: 40px clamp(24px, 5vw, 80px); overflow: hidden; }
  .login-split { display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: clamp(32px, 5vw, 90px); max-width: 1180px; align-items: center; }
  .login-card.form-card { margin: 0; max-width: 440px; }
  .login-card .section-head { text-align: left; }
  .login-card .section-head::before { margin: 0 0 22px; }
  .login-card .section-head .section-lead { margin: 12px 0 0 !important; text-align: left; }
  .login-phones { display: block; position: relative; justify-self: center; width: 540px; height: 410px; }
  .login-phones .rv-hp { zoom: .62; margin: 0; }
}

/* large cards that used the flat bright cyan now use the same soft aqua as the rest of the project */
.rp-for-card:nth-child(2), .rp-plan-wander, .rp-demo-diner, .rv-tile-aqua,
.mini-plan-card.current, .metric-grid .metric-card:nth-child(4n+1), .metric-card.accent { background: linear-gradient(160deg, #BDF2F5 0%, #A6EEF4 100%); }
.stats-band, .history-stats { background: linear-gradient(160deg, #BDF2F5 0%, #A6EEF4 100%) !important; }

/* ===== "check your email" screen: same stage as sign-in, plus a preview of the email that was just sent ===== */
.sent-card { text-align: center; max-width: 460px; margin: 0 auto; }
.sent-card .eyebrow { display: block !important; color: var(--tq-soft); }
.sent-card h2 { color: var(--tq-text); }
.sent-card .sent-lead { color: var(--tq-soft); }
.sent-icon { background: #fff !important; border: 0 !important; box-shadow: 0 10px 24px -14px rgba(4, 38, 44, .55) !important; rotate: 0deg !important; color: var(--tq-text) !important; margin: 0 auto 22px !important; }
.sent-email { background: #fff !important; border: 1.5px solid var(--tq-text) !important; box-shadow: 3px 4px 0 rgba(4, 38, 44, .22) !important; color: var(--tq-text); }
.sent-steps { text-align: left; max-width: 400px; margin-left: auto !important; margin-right: auto !important; }
.sent-steps li b { background: var(--tq-text) !important; color: #A6EEF4 !important; }
.sent-steps li span { color: var(--tq-text) !important; }
.sent-wait { justify-content: center; color: var(--tq-soft) !important; }
.sent-wait .rv-live-dot { background: #0B8F7B; box-shadow: 0 0 0 0 rgba(11, 143, 123, .5); }
.sent-back { background: none !important; border: 0 !important; box-shadow: none !important; padding: 4px 2px !important; min-height: 0; font-weight: 700; color: var(--tq-text) !important; text-decoration: underline; text-decoration-color: #fff; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.sent-back:hover { background: none !important; text-decoration-color: var(--tq-text); transform: none; }
.sent-mock { display: none; }
.em { width: 400px; rotate: 3deg; background: #FFFFFF; border: 2px solid #082A30; border-radius: 26px; box-shadow: 6px 7px 0 #082A30, 0 40px 60px -30px rgba(4, 38, 44, .5); overflow: hidden; text-align: left; }
.em-head { padding: 22px 26px 26px; background: linear-gradient(180deg, #6CDAE7 0%, #BDF2F5 100%); color: #04262C; }
.em-top { display: flex; align-items: center; gap: 10px; }
.em-badge { width: 36px; height: 36px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.em-top b { font-family: var(--font-head); font-size: 1.35rem; letter-spacing: -0.02em; }
.em-top small { margin-left: auto; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: #0A4A55; }
.em-head h4 { margin: 20px 0 0; font-family: var(--font-head); font-weight: 800; font-size: 2rem; line-height: 1.02; letter-spacing: -0.035em; }
.em-body { padding: 22px 26px 26px; }
.em-body p { margin: 0 0 18px; font-size: .92rem; line-height: 1.6; color: #082A30; }
.em-btn { display: inline-block; padding: 12px 24px; border-radius: 999px; background: #082A30; color: #fff; font-weight: 700; font-size: .92rem; box-shadow: 3px 4px 0 #8FE6EE; }
.em-body small { display: block; margin-top: 14px; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: #14707B; }
@media (min-width: 1101px) {
  .sent-split { display: grid; grid-template-columns: 460px minmax(0, 1fr); gap: clamp(32px, 5vw, 90px); max-width: 1180px; align-items: center; }
  .sent-card { text-align: left; margin: 0; }
  .sent-icon { margin: 0 0 22px !important; }
  .sent-steps { margin-left: 0 !important; }
  .sent-wait { justify-content: flex-start; }
  .sent-mock { display: grid; place-items: center; }
}

/* restaurant profile: logo tile and name on the left, address and hours as two white info cards on the right */
.restaurant-hero { display: flex; align-items: center; gap: clamp(24px, 4vw, 56px); }
.restaurant-hero-body { flex: 1 1 320px; }
.restaurant-hero-facts { flex: 0 1 340px; width: 340px; margin: 0; display: flex; flex-direction: column; gap: 12px; opacity: 1; }
.restaurant-hero-facts > div { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 2px; align-items: center; padding: 14px 18px; border-radius: 20px; background: #fff; border: 1.5px solid rgba(4, 38, 44, .14); box-shadow: 3px 4px 0 rgba(4, 38, 44, .18); color: var(--tq-text); }
.restaurant-hero-facts svg { grid-row: 1 / span 2; width: 36px; height: 36px; padding: 9px; border-radius: 50%; background: #BDF2F5; color: var(--tq-text); opacity: 1; }
.restaurant-hero-facts small { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tq-soft); }
.restaurant-hero-facts span { font-weight: 700; line-height: 1.3; }
@media (max-width: 960px) {
  .restaurant-hero { flex-direction: column; text-align: center; }
  .restaurant-hero-facts { width: 100%; flex-basis: auto; }
  .restaurant-hero-facts > div { text-align: left; }
}
@media (max-width: 960px) { .restaurant-hero-body { flex: 0 0 auto; min-width: 0; } .restaurant-hero-facts { flex: 0 0 auto; } }

/* home hero on phones / tablets: bring the star decoration back (it was hidden below 1040px), scaled and placed in the margins
   so it never sits on the headline, buttons or the small mono line. Solid stars only. */
@media (max-width: 1040px) {
  .rv-dc { display: block; }
  .rv-dc .rv-dc-doodle, .rv-dc .rv-dc-dot { display: none !important; }
  .rv-dc .rv-dc-halo { top: 300px; width: 760px; height: 560px; margin: -280px 0 0 -380px; }
  .rv-dc .rv-dc-big { top: 430px; width: 440px; margin-left: -220px; opacity: .14; }
  .rv-dc > svg.rv-dc-star:nth-of-type(2) { left: -16px !important; right: auto !important; top: 226px !important; width: 84px !important; opacity: .5 !important; }
  .rv-dc > svg.rv-dc-star:nth-of-type(3) { right: -18px !important; left: auto !important; top: 262px !important; width: 90px !important; opacity: .45 !important; }
  .rv-dc > svg.rv-dc-star:nth-of-type(4) { left: 7px !important; right: auto !important; top: 394px !important; width: 46px !important; opacity: .55 !important; }
  .rv-dc > svg.rv-dc-star:nth-of-type(5) { right: 8px !important; left: auto !important; top: 398px !important; width: 36px !important; opacity: .6 !important; }
  .rv-dc > svg.rv-dc-star:nth-of-type(6) { left: 16px !important; right: auto !important; top: 128px !important; width: 26px !important; opacity: .85 !important; }
  .rv-dc > svg.rv-dc-star:nth-of-type(7) { right: 20px !important; left: auto !important; top: 134px !important; width: 22px !important; opacity: .85 !important; }
  .rv-dc > svg.rv-dc-star:nth-of-type(8) { display: none; }
}

/* hero phones on small screens: stop iOS from inflating the tiny screen text (it made the phone contents wrap and look crammed),
   keep each line on one row, and drop the least important bits so what's left has room */
.rv-hp, .rv-hp * { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 640px) {
  .rv-hp-body p, .rv-hp-ticket .top p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rv-hp-actions { display: none; }
  .rv-hp-ticket .meta span { display: none; }
}

/* inner-page heroes (How it works, For restaurants, Pricing, About, legal ...): the same Rovin stars as the home hero.
   Replaces the old grain overlay on .rp-hero::before; .fd-page-hero (contact etc.) gets the same layer. */
.rp-hero::before, .fd-page-hero::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 1; mix-blend-mode: normal;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201440%20760%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cg%20fill%3D%22%23fff%22%3E%0A%3Cpath%20transform%3D%22translate%28-40%20330%29%20rotate%28-12%2012%2012%29%20scale%2813%29%22%20opacity%3D%220.26%22%20d%3D%22M12%201%20L14.6%209.4%20L23%2012%20L14.6%2014.6%20L12%2023%20L9.4%2014.6%20L1%2012%20L9.4%209.4Z%22/%3E%3Cpath%20transform%3D%22translate%28930%2070%29%20rotate%288%2012%2012%29%20scale%283.8%29%22%20opacity%3D%220.7%22%20d%3D%22M12%201%20L14.6%209.4%20L23%2012%20L14.6%2014.6%20L12%2023%20L9.4%2014.6%20L1%2012%20L9.4%209.4Z%22/%3E%3Cpath%20transform%3D%22translate%28760%20420%29%20rotate%280%2012%2012%29%20scale%282.4%29%22%20opacity%3D%220.7%22%20d%3D%22M12%201%20L14.6%209.4%20L23%2012%20L14.6%2014.6%20L12%2023%20L9.4%2014.6%20L1%2012%20L9.4%209.4Z%22/%3E%3Cpath%20transform%3D%22translate%281290%2040%29%20rotate%28-10%2012%2012%29%20scale%285.2%29%22%20opacity%3D%220.5%22%20d%3D%22M12%201%20L14.6%209.4%20L23%2012%20L14.6%2014.6%20L12%2023%20L9.4%2014.6%20L1%2012%20L9.4%209.4Z%22/%3E%3Cpath%20transform%3D%22translate%281380%20470%29%20rotate%280%2012%2012%29%20scale%283%29%22%20opacity%3D%220.6%22%20d%3D%22M12%201%20L14.6%209.4%20L23%2012%20L14.6%2014.6%20L12%2023%20L9.4%2014.6%20L1%2012%20L9.4%209.4Z%22/%3E%3Cpath%20transform%3D%22translate%28520%2060%29%20rotate%280%2012%2012%29%20scale%282.1%29%22%20opacity%3D%220.75%22%20d%3D%22M12%201%20L14.6%209.4%20L23%2012%20L14.6%2014.6%20L12%2023%20L9.4%2014.6%20L1%2012%20L9.4%209.4Z%22/%3E%3Cpath%20transform%3D%22translate%2860%2070%29%20rotate%280%2012%2012%29%20scale%282.2%29%22%20opacity%3D%220.8%22%20d%3D%22M12%201%20L14.6%209.4%20L23%2012%20L14.6%2014.6%20L12%2023%20L9.4%2014.6%20L1%2012%20L9.4%209.4Z%22/%3E%3Cpath%20transform%3D%22translate%281130%20330%29%20rotate%280%2012%2012%29%20scale%282%29%22%20opacity%3D%220.7%22%20d%3D%22M12%201%20L14.6%209.4%20L23%2012%20L14.6%2014.6%20L12%2023%20L9.4%2014.6%20L1%2012%20L9.4%209.4Z%22/%3E%3Cpath%20transform%3D%22translate%281200%20640%29%20rotate%2814%2012%2012%29%20scale%286.6%29%22%20opacity%3D%220.22%22%20d%3D%22M12%201%20L14.6%209.4%20L23%2012%20L14.6%2014.6%20L12%2023%20L9.4%2014.6%20L1%2012%20L9.4%209.4Z%22/%3E%0A%3Ccircle%20cx%3D%22840%22%20cy%3D%22190%22%20r%3D%225%22%20opacity%3D%220.7%22/%3E%3Ccircle%20cx%3D%221070%22%20cy%3D%22120%22%20r%3D%224%22%20opacity%3D%220.6%22/%3E%3Ccircle%20cx%3D%22640%22%20cy%3D%22330%22%20r%3D%224%22%20opacity%3D%220.5%22/%3E%3Ccircle%20cx%3D%221350%22%20cy%3D%22260%22%20r%3D%225%22%20opacity%3D%220.65%22/%3E%3Ccircle%20cx%3D%22220%22%20cy%3D%22620%22%20r%3D%224%22%20opacity%3D%220.5%22/%3E%3Ccircle%20cx%3D%22980%22%20cy%3D%22560%22%20r%3D%224%22%20opacity%3D%220.5%22/%3E%0A%3C/g%3E%3C/svg%3E") center top / cover no-repeat; }
.fd-page-hero > * { position: relative; z-index: 1; }
@media (max-width: 860px) {
  .rp-hero::before, .fd-page-hero::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20400%20760%22%20preserveAspectRatio%3D%22xMidYMin%20slice%22%3E%3Cg%20fill%3D%22%23fff%22%3E%0A%3Cpath%20transform%3D%22translate%28-22%20150%29%20rotate%28-12%2012%2012%29%20scale%284.6%29%22%20opacity%3D%220.42%22%20d%3D%22M12%201%20L14.6%209.4%20L23%2012%20L14.6%2014.6%20L12%2023%20L9.4%2014.6%20L1%2012%20L9.4%209.4Z%22/%3E%3Cpath%20transform%3D%22translate%28332%2090%29%20rotate%2810%2012%2012%29%20scale%283.6%29%22%20opacity%3D%220.45%22%20d%3D%22M12%201%20L14.6%209.4%20L23%2012%20L14.6%2014.6%20L12%2023%20L9.4%2014.6%20L1%2012%20L9.4%209.4Z%22/%3E%3Cpath%20transform%3D%22translate%28352%20330%29%20rotate%280%2012%2012%29%20scale%282.2%29%22%20opacity%3D%220.7%22%20d%3D%22M12%201%20L14.6%209.4%20L23%2012%20L14.6%2014.6%20L12%2023%20L9.4%2014.6%20L1%2012%20L9.4%209.4Z%22/%3E%3Cpath%20transform%3D%22translate%288%20430%29%20rotate%280%2012%2012%29%20scale%282%29%22%20opacity%3D%220.7%22%20d%3D%22M12%201%20L14.6%209.4%20L23%2012%20L14.6%2014.6%20L12%2023%20L9.4%2014.6%20L1%2012%20L9.4%209.4Z%22/%3E%3Cpath%20transform%3D%22translate%28300%20520%29%20rotate%2812%2012%2012%29%20scale%285%29%22%20opacity%3D%220.18%22%20d%3D%22M12%201%20L14.6%209.4%20L23%2012%20L14.6%2014.6%20L12%2023%20L9.4%2014.6%20L1%2012%20L9.4%209.4Z%22/%3E%3Cpath%20transform%3D%22translate%2820%2064%29%20rotate%280%2012%2012%29%20scale%281.2%29%22%20opacity%3D%220.85%22%20d%3D%22M12%201%20L14.6%209.4%20L23%2012%20L14.6%2014.6%20L12%2023%20L9.4%2014.6%20L1%2012%20L9.4%209.4Z%22/%3E%3Cpath%20transform%3D%22translate%28360%2036%29%20rotate%280%2012%2012%29%20scale%281.1%29%22%20opacity%3D%220.85%22%20d%3D%22M12%201%20L14.6%209.4%20L23%2012%20L14.6%2014.6%20L12%2023%20L9.4%2014.6%20L1%2012%20L9.4%209.4Z%22/%3E%0A%3Ccircle%20cx%3D%2260%22%20cy%3D%22330%22%20r%3D%224%22%20opacity%3D%220.55%22/%3E%3Ccircle%20cx%3D%22372%22%20cy%3D%22250%22%20r%3D%223.5%22%20opacity%3D%220.6%22/%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%22560%22%20r%3D%223.5%22%20opacity%3D%220.5%22/%3E%0A%3C/g%3E%3C/svg%3E"); background-position: center top; background-size: 100% auto; background-repeat: repeat-y; }
}
.rp-hero::before, .fd-page-hero::before { display: block; }

/* the old aqua sparkles that sat inside each hero's photo area (About, Pricing, ...) are gone; the white stars behind the whole hero stay */
.rp-hero-art::before, .rp-hero-art::after { display: none !important; }

/* "$0 to list": a small cream ticket in the same style as the other hero cards (ink outline, hard shadow, slight tilt) instead of a dark sticker circle */
.rp-hero .rp-sticker, .rp-hero-art .rp-sticker { width: auto !important; height: auto !important; min-width: 0; border-radius: 22px; padding: 14px 26px 15px; background: #FFFFFF; color: var(--tq-text);
  border: 2px solid var(--tq-text); box-shadow: 5px 6px 0 var(--tq-text); rotate: -4deg; align-items: flex-start; justify-content: flex-start; gap: 4px; }
.rp-hero .rp-sticker span { font-size: 2.6rem; line-height: 0.95; color: var(--tq-text); }
.rp-hero .rp-sticker em { font-size: 0.66rem; letter-spacing: 0.16em; color: #14707B; }
@media (max-width: 860px) {
  .rp-hero-art .rp-sticker { padding: 10px 18px 11px; border-radius: 18px; box-shadow: 4px 5px 0 var(--tq-text); }
  .rp-hero-art .rp-sticker span { font-size: 2rem; } .rp-hero-art .rp-sticker em { font-size: 0.56rem; }
}

/* Pricing hero: the three tier badges move into one tilted cream card ("who can claim what") instead of a pill over two photos */
.rp-hero-art:has(.rp-access) { min-height: 380px; display: grid; place-items: center; }
.rp-access { position: relative; z-index: 2; width: min(400px, 100%); rotate: 3deg; padding: 22px 26px 8px; border-radius: 28px; background: #FFFFFF; border: 2px solid var(--tq-text); box-shadow: 7px 8px 0 var(--tq-text), 0 40px 60px -34px rgba(4, 38, 44, .5); color: var(--tq-text); }
.rp-access small { display: block; padding-bottom: 12px; border-bottom: 2px dashed #B5DDE3; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: #14707B; }
.rp-access-row { display: flex; align-items: center; gap: 18px; padding: 16px 0; }
.rp-access-row + .rp-access-row { border-top: 1px solid #D5E9EC; }
.rp-access-row .fd-stamp { flex: none; width: 56px; height: 56px; margin: 0; }
.rp-access-row b { display: block; font-family: var(--font-head); font-size: 1.35rem; letter-spacing: -0.03em; line-height: 1.05; }
.rp-access-row span { display: block; margin-top: 3px; font-size: .92rem; color: #567074; line-height: 1.35; }
@media (max-width: 860px) {
  .rp-hero-art:has(.rp-access) { min-height: 0; margin-top: 26px; }
  .rp-access { width: min(360px, 100%); padding: 18px 20px 4px; box-shadow: 5px 6px 0 var(--tq-text); }
  .rp-access-row { gap: 14px; padding: 13px 0; } .rp-access-row .fd-stamp { width: 48px; height: 48px; }
}

/* For restaurants hero: a worked example of what a restaurant keeps (replaces the two photos and the "$0 to list" ticket) */
.rp-keep { rotate: -3deg; padding-bottom: 20px; }
.rp-keep-row { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 14px 0; }
.rp-keep-row + .rp-keep-row { border-top: 1px solid #D5E9EC; }
.rp-keep-row span { font-size: .98rem; color: #567074; line-height: 1.3; }
.rp-keep-row b { flex: none; font-family: var(--font-head); font-size: 1.5rem; letter-spacing: -0.03em; color: var(--tq-text); }
.rp-keep-total { margin-top: 6px; padding: 14px 16px; border: 0 !important; border-radius: 16px; background: linear-gradient(160deg, #BDF2F5 0%, #A6EEF4 100%); align-items: center; }
.rp-keep-total span { font-weight: 800; color: var(--tq-text); font-size: 1.05rem; }
.rp-keep-total b { font-size: 2.1rem; }
@media (max-width: 860px) { .rp-keep-row b { font-size: 1.25rem; } .rp-keep-total b { font-size: 1.7rem; } .rp-keep-row span { font-size: .9rem; } }

/* About hero: "Rovin, in short" card (replaces the two candlelit/friends photos) */
.rp-short { rotate: 3deg; padding-bottom: 10px; }
.rp-short-row { display: flex; align-items: center; gap: 16px; padding: 16px 0; }
.rp-short-row + .rp-short-row { border-top: 1px solid #D5E9EC; }
.rp-short-row i { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #BDF2F5; color: var(--tq-text); font-style: normal; }
.rp-short-row b { display: block; font-family: var(--font-head); font-size: 1.3rem; letter-spacing: -0.03em; line-height: 1.05; }
.rp-short-row span { display: block; margin-top: 3px; font-size: .92rem; color: #567074; line-height: 1.35; }
@media (max-width: 860px) { .rp-short-row { gap: 12px; padding: 13px 0; } .rp-short-row i { width: 40px; height: 40px; } }

/* How it works hero: one clear "price steps down" card (replaces the staggered staircase card and the pasta photo) */
.rp-steps { rotate: -3deg; padding-bottom: 16px; }
.rp-steps-row { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 18px; padding: 15px 0; }
.rp-steps-row + .rp-steps-row { border-top: 1px solid #D5E9EC; }
.rp-steps-row .fd-stamp { width: 56px; height: 56px; margin: 0; }
.rp-steps-row b { display: block; font-family: var(--font-head); font-size: 1.3rem; letter-spacing: -0.03em; line-height: 1.05; }
.rp-steps-row span { display: block; margin-top: 3px; font-size: .88rem; color: #567074; }
.rp-steps-row em { font-style: normal; text-align: right; font-family: var(--font-head); font-weight: 800; font-size: 1.9rem; letter-spacing: -0.05em; line-height: 1; }
.rp-steps-row em i { display: block; margin-top: 4px; font-style: normal; font-family: var(--font-mono); font-weight: 600; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: #14707B; }
.rp-steps-foot { margin: 6px 0 0; padding-top: 12px; border-top: 2px dashed #B5DDE3; font-size: .84rem; color: #567074; text-align: center; }
@media (max-width: 860px) { .rp-steps-row { grid-template-columns: 48px 1fr auto; gap: 12px; padding: 12px 0; } .rp-steps-row .fd-stamp { width: 48px; height: 48px; } .rp-steps-row em { font-size: 1.5rem; } }

/* closing call-to-action band: centred, with the Rovin stars and a highlighted last word (replaces the two photos and the left-aligned layout) */
.rp-cta { display: block; min-height: 0; padding: 110px 24px 120px; text-align: center; position: relative; overflow: hidden; }
.rp-cta::before { content: ''; position: absolute; inset: 0; z-index: 0; width: auto; height: auto; left: 0; right: 0; top: 0; bottom: 0; rotate: 0deg; border-radius: 0; box-shadow: none; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201440%20520%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cg%20fill%3D%22%23fff%22%3E%0A%3Cpath%20transform%3D%22translate%28-30%2070%29%20rotate%28-10%2012%2012%29%20scale%2811%29%22%20opacity%3D%220.28%22%20d%3D%22M12%201%20L14.6%209.4%20L23%2012%20L14.6%2014.6%20L12%2023%20L9.4%2014.6%20L1%2012%20L9.4%209.4Z%22/%3E%3Cpath%20transform%3D%22translate%281230%20250%29%20rotate%2812%2012%2012%29%20scale%289%29%22%20opacity%3D%220.24%22%20d%3D%22M12%201%20L14.6%209.4%20L23%2012%20L14.6%2014.6%20L12%2023%20L9.4%2014.6%20L1%2012%20L9.4%209.4Z%22/%3E%3Cpath%20transform%3D%22translate%28250%20380%29%20rotate%280%2012%2012%29%20scale%282.4%29%22%20opacity%3D%220.8%22%20d%3D%22M12%201%20L14.6%209.4%20L23%2012%20L14.6%2014.6%20L12%2023%20L9.4%2014.6%20L1%2012%20L9.4%209.4Z%22/%3E%3Cpath%20transform%3D%22translate%281120%2060%29%20rotate%288%2012%2012%29%20scale%283.6%29%22%20opacity%3D%220.75%22%20d%3D%22M12%201%20L14.6%209.4%20L23%2012%20L14.6%2014.6%20L12%2023%20L9.4%2014.6%20L1%2012%20L9.4%209.4Z%22/%3E%3Cpath%20transform%3D%22translate%28430%2070%29%20rotate%280%2012%2012%29%20scale%282%29%22%20opacity%3D%220.7%22%20d%3D%22M12%201%20L14.6%209.4%20L23%2012%20L14.6%2014.6%20L12%2023%20L9.4%2014.6%20L1%2012%20L9.4%209.4Z%22/%3E%3Cpath%20transform%3D%22translate%281350%20430%29%20rotate%280%2012%2012%29%20scale%282.6%29%22%20opacity%3D%220.75%22%20d%3D%22M12%201%20L14.6%209.4%20L23%2012%20L14.6%2014.6%20L12%2023%20L9.4%2014.6%20L1%2012%20L9.4%209.4Z%22/%3E%3Cpath%20transform%3D%22translate%2890%20440%29%20rotate%280%2012%2012%29%20scale%281.8%29%22%20opacity%3D%220.8%22%20d%3D%22M12%201%20L14.6%209.4%20L23%2012%20L14.6%2014.6%20L12%2023%20L9.4%2014.6%20L1%2012%20L9.4%209.4Z%22/%3E%3Cpath%20transform%3D%22translate%28960%20430%29%20rotate%280%2012%2012%29%20scale%281.9%29%22%20opacity%3D%220.7%22%20d%3D%22M12%201%20L14.6%209.4%20L23%2012%20L14.6%2014.6%20L12%2023%20L9.4%2014.6%20L1%2012%20L9.4%209.4Z%22/%3E%0A%3Ccircle%20cx%3D%22180%22%20cy%3D%22200%22%20r%3D%225%22%20opacity%3D%220.7%22/%3E%3Ccircle%20cx%3D%221290%22%20cy%3D%22120%22%20r%3D%224%22%20opacity%3D%220.65%22/%3E%3Ccircle%20cx%3D%22560%22%20cy%3D%22450%22%20r%3D%224%22%20opacity%3D%220.5%22/%3E%3Ccircle%20cx%3D%22870%22%20cy%3D%2260%22%20r%3D%224%22%20opacity%3D%220.55%22/%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%22300%22%20r%3D%224%22%20opacity%3D%220.6%22/%3E%3Ccircle%20cx%3D%221400%22%20cy%3D%22320%22%20r%3D%225%22%20opacity%3D%220.6%22/%3E%0A%3C/g%3E%3C/svg%3E") center / cover no-repeat; pointer-events: none; }
.rp-cta::after, .rp-cta-inner::before, .rp-cta-inner::after { display: none !important; }
.rp-cta-inner { position: relative; z-index: 1; padding-right: 0; max-width: 900px; margin: 0 auto; text-align: center; }
.rp-cta .rv-h2, .rp-cta h2 { max-width: 16ch; margin: 0 auto; font-size: clamp(2.6rem, 5.4vw, 5rem); }
.rp-cta .rv-hero-actions { justify-content: center; margin-top: 36px; }
.rp-cta .rv-h2 em.rp-hl { display: inline-block; font-style: normal; padding: 0 .2em .08em; margin-top: .06em; background: #082A30; color: #6CDAE7; border-radius: .22em; rotate: -2deg; box-shadow: 6px 7px 0 rgba(4, 38, 44, .26); }
@media (max-width: 1000px) { .rp-cta { padding: 80px 24px 90px; } .rp-cta::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20400%20420%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cg%20fill%3D%22%23fff%22%3E%0A%3Cpath%20transform%3D%22translate%28-16%2040%29%20rotate%28-10%2012%2012%29%20scale%285%29%22%20opacity%3D%220.4%22%20d%3D%22M12%201%20L14.6%209.4%20L23%2012%20L14.6%2014.6%20L12%2023%20L9.4%2014.6%20L1%2012%20L9.4%209.4Z%22/%3E%3Cpath%20transform%3D%22translate%28330%20300%29%20rotate%2812%2012%2012%29%20scale%285.4%29%22%20opacity%3D%220.3%22%20d%3D%22M12%201%20L14.6%209.4%20L23%2012%20L14.6%2014.6%20L12%2023%20L9.4%2014.6%20L1%2012%20L9.4%209.4Z%22/%3E%3Cpath%20transform%3D%22translate%28350%2040%29%20rotate%280%2012%2012%29%20scale%281.6%29%22%20opacity%3D%220.8%22%20d%3D%22M12%201%20L14.6%209.4%20L23%2012%20L14.6%2014.6%20L12%2023%20L9.4%2014.6%20L1%2012%20L9.4%209.4Z%22/%3E%3Cpath%20transform%3D%22translate%2816%20330%29%20rotate%280%2012%2012%29%20scale%281.8%29%22%20opacity%3D%220.75%22%20d%3D%22M12%201%20L14.6%209.4%20L23%2012%20L14.6%2014.6%20L12%2023%20L9.4%2014.6%20L1%2012%20L9.4%209.4Z%22/%3E%3Cpath%20transform%3D%22translate%28300%20380%29%20rotate%280%2012%2012%29%20scale%281.2%29%22%20opacity%3D%220.8%22%20d%3D%22M12%201%20L14.6%209.4%20L23%2012%20L14.6%2014.6%20L12%2023%20L9.4%2014.6%20L1%2012%20L9.4%209.4Z%22/%3E%3Cpath%20transform%3D%22translate%2840%20150%29%20rotate%280%2012%2012%29%20scale%281.2%29%22%20opacity%3D%220.8%22%20d%3D%22M12%201%20L14.6%209.4%20L23%2012%20L14.6%2014.6%20L12%2023%20L9.4%2014.6%20L1%2012%20L9.4%209.4Z%22/%3E%0A%3Ccircle%20cx%3D%2280%22%20cy%3D%22260%22%20r%3D%223.5%22%20opacity%3D%220.6%22/%3E%3Ccircle%20cx%3D%22370%22%20cy%3D%22200%22%20r%3D%223.5%22%20opacity%3D%220.6%22/%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22390%22%20r%3D%223.5%22%20opacity%3D%220.5%22/%3E%0A%3C/g%3E%3C/svg%3E"); } .rp-cta .rv-h2, .rp-cta h2 { max-width: 12ch; font-size: clamp(2.2rem, 9vw, 3.4rem); } }

/* FAQ ("Quick answers"): a soft aqua panel with each question as its own white card, instead of heavy dark rules on cream */
.rp-faq { background: var(--tq-wash); margin: 40px 12px; padding: 90px 24px 100px; border-radius: 36px; }
.rp-faq .accordion.fd-accordion { border-top: 0; display: grid; gap: 12px; }
.rp-faq .fd-accordion .accordion-item { background: #fff; border: 1.5px solid rgba(4, 38, 44, .14); border-radius: 24px; box-shadow: 3px 4px 0 rgba(4, 38, 44, .14); padding: 0 26px; transition: box-shadow .2s, border-color .2s; }
.rp-faq .fd-accordion .accordion-item:hover { box-shadow: 4px 5px 0 rgba(4, 38, 44, .22); }
.rp-faq .fd-accordion .accordion-item.open { background: #fff; border-color: var(--tq-text); box-shadow: 5px 6px 0 var(--tq-text); }
.rp-faq .fd-accordion .accordion-trigger { padding: 22px 0; }
.rp-faq .fd-accordion .accordion-trigger::before { color: #14707B; }
.rp-faq .fd-accordion .accordion-trigger .plus { border: 0; background: var(--tq-text); color: #fff; }
.rp-faq .fd-accordion .accordion-item.open .accordion-trigger .plus { background: #A6EEF4; color: var(--tq-text); }
.rp-faq .fd-accordion .accordion-panel-inner { padding: 0 56px 26px 64px; color: #567074; }
.rp-faq-more { background: #fff; border: 2px solid var(--tq-text); box-shadow: 5px 6px 0 var(--tq-text); }
.rp-faq-more p { color: #567074; }
@media (max-width: 1000px) {
  .rp-faq { margin: 30px 10px; padding: 56px 18px 64px; border-radius: 28px; }
  .rp-faq .fd-accordion .accordion-item { padding: 0 18px; }
  .rp-faq .fd-accordion .accordion-panel-inner { padding: 0 4px 22px 4px; }
}

/* "What a Drop is": stage cards rise in one by one, numbers count up, a gold-silver-bronze line runs under them once; hover lifts a card */
.rp-bar { position: relative; margin-bottom: 14px; }
.rp-seg { transition: transform .25s ease, box-shadow .25s ease; }
.rp-seg:hover { transform: translateY(-6px); box-shadow: 0 20px 30px -20px rgba(4, 38, 44, .55); }
.rp-bar-arm .rp-seg { opacity: 0; transform: translateY(30px) scale(.97); }
.rp-bar-arm.rp-bar-play .rp-seg { opacity: 1; transform: none; transition: opacity .6s ease, transform .75s cubic-bezier(.2, .9, .3, 1.15); transition-delay: calc(var(--n, 0) * .45s); }
.rp-bar-arm.rp-bar-done .rp-seg { transition: transform .25s ease, box-shadow .25s ease; transition-delay: 0s; }
.rp-bar-arm::after { content: ''; position: absolute; left: 0; bottom: -16px; height: 5px; width: 0; border-radius: 5px;
  background: linear-gradient(90deg, #EBB233 0 22%, #9FB4C2 22% 52%, #DE8B62 52%); }
.rp-bar-arm.rp-bar-play::after { width: 100%; transition: width 2.1s cubic-bezier(.45, .05, .35, 1) .1s; }
@media (max-width: 860px) { .rp-bar-arm::after { display: none; } }

/* ===== "What a Drop is" redesign: a soft aqua panel, three equal white stage cards joined by arrows, notes in one white card ===== */
.rp-life { max-width: none; margin: 40px 12px; padding: 90px 24px 100px; background: var(--tq-wash); border-radius: 36px; }
.rp-life-inner { max-width: 1240px; margin: 0 auto; }
.rp-life .rp-life-head .rv-h2 em.rp-hl { display: inline-block; font-style: normal; padding: 0 .2em .08em; background: #082A30; color: #6CDAE7; border-radius: .22em; rotate: -2deg; box-shadow: 6px 7px 0 rgba(4, 38, 44, .26); }
.rp-life .rp-bar { gap: 40px; margin: 44px 0 0; }
.rp-bar .rp-seg { flex: 1 1 0; min-height: 0; padding: 26px 28px 28px; gap: 16px; background: #fff; border: 1.5px solid rgba(4, 38, 44, .14); border-radius: 28px; box-shadow: 4px 5px 0 rgba(4, 38, 44, .16); color: var(--tq-text); position: relative; }
.rp-bar .rp-seg::after { content: ''; position: absolute; left: 28px; right: 28px; top: 0; height: 6px; border-radius: 0 0 6px 6px; background: var(--seg, #EBB233); }
.rp-bar .rp-seg-gold { --seg: #EBB233; } .rp-bar .rp-seg-silver { --seg: #9FB4C2; } .rp-bar .rp-seg-bronze { --seg: #DE8B62; }
.rp-bar .rp-seg .fd-stamp { width: 44px; height: 44px; }
.rp-bar .rp-seg-tag { gap: 12px; font-size: .78rem; }
.rp-bar .rp-seg b { margin-top: 6px; font-size: clamp(3.4rem, 5.6vw, 5.4rem); }
.rp-bar .rp-seg-time { display: inline-flex; align-self: flex-start; padding: 6px 14px; border-radius: 999px; background: var(--tq-wash); font-family: var(--font-mono); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #14707B; }
.rp-bar .rp-seg:not(:first-child)::before { content: '\2192'; position: absolute; left: -38px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; background: var(--tq-text); color: #fff; display: grid; place-items: center; font-size: 1.05rem; line-height: 1; z-index: 2; }
.rp-bar-arm::after { display: none !important; }
.rp-life .rp-life-notes { margin: 30px 0 0; padding: 8px 30px; gap: 0 48px; background: #fff; border: 1.5px solid rgba(4, 38, 44, .14); border-radius: 28px; box-shadow: 4px 5px 0 rgba(4, 38, 44, .12); }
.rp-life .rp-life-notes li { border-top: 1px solid #D5E9EC; color: #567074; }
.rp-life .rp-life-notes li:nth-child(-n+2) { border-top: 0; }
.rp-life .rp-life-notes li::before { background: #A6EEF4; border: 2px solid var(--tq-text); }
@media (max-width: 860px) {
  .rp-life { margin: 30px 10px; padding: 56px 18px 64px; border-radius: 28px; }
  .rp-life .rp-bar { gap: 34px; }
  .rp-bar .rp-seg { flex: none; }
  .rp-bar .rp-seg:not(:first-child)::before { left: 50%; top: -35px; margin: 0 0 0 -18px; transform: rotate(90deg); }
  .rp-life .rp-life-notes { padding: 4px 20px; }
  .rp-life .rp-life-notes li:nth-child(2) { border-top: 1px solid #D5E9EC; }
}

/* ===== Dashboards (restaurant + admin): calmer and lighter ===== */
.dash-shell { background: #EEF6F7; }
/* sidebar: white, with a soft aqua active pill, instead of a solid turquoise slab */
.dash-sidebar { background: #fff !important; background-image: none !important; border-right: 1px solid rgba(4, 38, 44, .08); }
.dash-sidebar .brand-mark { background: #BDF2F5; }
.dash-sidebar .dash-restaurant-chip { background: #EEF6F7; border: 0; }
.dash-sidebar .dash-restaurant-chip .avatar-circle { background: #fff; border: 1.5px solid rgba(4, 38, 44, .18); }
.dash-nav a { color: #567074; border-radius: 14px; }
.dash-nav a .ico { color: #7E9CA1; }
.dash-nav a:hover { background: #EEF6F7; color: var(--tq-text); }
.dash-nav a.active { background: #DDF4F6 !important; color: var(--tq-text) !important; font-weight: 800; box-shadow: inset 3px 0 0 #6CDAE7; }
.dash-nav a.active .ico { color: var(--tq-text); }
.dash-nav-label { color: #8AA5AA; }
.dash-sidebar a:not(.brand) { text-decoration: none; }
/* banner: a quiet aqua wash, no hard outline */
.dash-topbar { background: linear-gradient(135deg, #BDF2F5 0%, #DDF4F6 70%) !important; border: 0 !important; box-shadow: none !important; }
.dash-topbar::after { opacity: .35; }
/* cards: white, hairline border, soft shadow */
.dash-panel, .chart-card, .metric-card, .form-card, .history-table-card { background: #fff !important; background-image: none !important; border: 1px solid rgba(4, 38, 44, .08) !important; border-radius: 24px !important; box-shadow: 0 1px 2px rgba(4, 38, 44, .04), 0 14px 30px -20px rgba(4, 38, 44, .22) !important; color: var(--tq-text); }
.metric-card:hover { box-shadow: 0 1px 2px rgba(4, 38, 44, .05), 0 18px 34px -18px rgba(4, 38, 44, .3) !important; }
.metric-grid .metric-card:nth-child(n) { background: #fff !important; color: var(--tq-text); border-color: rgba(4, 38, 44, .08) !important; }
.metric-grid .metric-card:nth-child(n) .metric-value { color: var(--tq-text); }
.metric-grid .metric-card:nth-child(n) .metric-label, .metric-grid .metric-card:nth-child(n) .metric-sub { color: #567074; }
.metric-card .metric-icon { border: 0; background: #DDF4F6; color: var(--tq-text); }
.metric-card.accent { background: #fff !important; }
.dash-panel-head h3, .chart-card h3 { color: #14707B; }
/* tables */
.dash-table th, .history-table th { color: #7E9CA1; font-weight: 600; background: transparent; border-bottom: 1px solid #E3EFF1; }
.dash-table td, .history-table td { border-bottom: 1px solid #EEF4F5; }
.dash-table tbody tr:hover td, .history-table tbody tr:hover td { background: #F6FBFB; }
/* history / stats bands */
.stats-band, .history-stats { background: #fff !important; border: 1px solid rgba(4, 38, 44, .08) !important; box-shadow: 0 14px 30px -20px rgba(4, 38, 44, .22) !important; }
.history-stats-band > div, .history-stats-band > div:nth-child(2), .history-stats-band > div:nth-child(3) { background: #fff !important; border: 1px solid rgba(4, 38, 44, .08) !important; box-shadow: 0 14px 30px -20px rgba(4, 38, 44, .22) !important; }
.history-stats-band .history-stat-icon, .history-stats-band > div:nth-child(2) .history-stat-icon, .history-stats-band > div:nth-child(3) .history-stat-icon { background: #DDF4F6 !important; color: var(--tq-text) !important; }
.dash-topbar .dash-sidebar-toggle { color: var(--tq-text); background: #fff; border: 1.5px solid rgba(4, 38, 44, .18); }

/* "What a Drop is": no aqua panel here - it sits straight on the page background */
.rp-life { background: none; border-radius: 0; margin: 0; padding: 70px 24px 100px; }
@media (max-width: 860px) { .rp-life { margin: 0; padding: 50px 18px 64px; border-radius: 0; } }

/* Demo page ("Restaurant side" / "Diner side"): two calm white cards in the same style as the rest of the site */
.rp-demo-card, .rp-demo-rest, .rp-demo-diner { background: #fff !important; background-image: none !important; color: var(--tq-text); border: 1.5px solid rgba(4, 38, 44, .12) !important; box-shadow: 0 1px 2px rgba(4, 38, 44, .04), 0 24px 44px -28px rgba(4, 38, 44, .3); }
.rp-demo-card .rv-eyebrow { color: #14707B; }
.rp-demo-card .rv-eyebrow::before { background: #6CDAE7; }
.rp-demo-card h2 { color: var(--tq-text); }
.rp-demo-card p { color: #567074; }
.rp-demo-rest ul { gap: 12px 20px; margin-top: 10px; }
.rp-demo-rest li { color: var(--tq-text); font-weight: 600; padding-left: 34px; position: relative; }
.rp-demo-rest li::before { content: '\2713'; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; background: #DDF4F6; color: var(--tq-text); display: grid; place-items: center; font-size: .78rem; font-weight: 800; }
.rp-demo-rest .rv-btn-hot { background: var(--tq-text); color: #fff; box-shadow: 0 14px 26px -14px rgba(4, 38, 44, .7); }
.rp-demo-rest .rv-btn-hot .rv-btn-arrow { background: rgba(255, 255, 255, .16); color: #fff; }
.rp-demo-rest .rv-btn-hot::before { background: #A6EEF4; }
.rp-demo-rest .rv-btn-hot:hover { color: var(--tq-text); }
.rp-demo-rest .rv-btn-hot:hover .rv-btn-arrow { background: rgba(4, 38, 44, .12); color: var(--tq-text); }
.rp-demo-rest .rp-linkbtn { color: #14707B; text-decoration: underline; text-decoration-color: #6CDAE7; text-decoration-thickness: 3px; text-underline-offset: 4px; font-weight: 700; }
.rp-demo-rest .rp-linkbtn:hover { color: var(--tq-text); }
.rp-demo-plans { gap: 12px; }
.rp-demo-card .rp-demo-plan, .rp-demo-card .rp-demo-plan[data-demo-go] { display: grid; grid-template-columns: 16px 1fr auto; column-gap: 16px; row-gap: 2px; align-items: center; padding: 18px 22px; background: #fff !important; background-image: none !important; color: var(--tq-text) !important; border: 1.5px solid rgba(4, 38, 44, .14) !important; box-shadow: 3px 4px 0 rgba(4, 38, 44, .1); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.rp-demo-card .rp-demo-plan::before { content: ''; grid-row: 1 / span 2; width: 14px; height: 14px; border-radius: 50%; background: #CBD5DB; box-shadow: 0 0 0 4px #EEF3F5; }
.rp-demo-card .rp-demo-plan[data-demo-go="wander"]::before { background: #6CDAE7; box-shadow: 0 0 0 4px #DDF4F6; }
.rp-demo-card .rp-demo-plan[data-demo-go="summit"]::before { background: #082A30; box-shadow: 0 0 0 4px #DDF4F6; }
.rp-demo-card .rp-demo-plan::after { content: '\2192'; grid-row: 1 / span 2; grid-column: 3; font-size: 1.3rem; color: #14707B; transition: transform .2s ease; }
.rp-demo-card .rp-demo-plan b { grid-column: 2; color: var(--tq-text) !important; }
.rp-demo-card .rp-demo-plan span { grid-column: 2; color: #567074 !important; }
.rp-demo-card .rp-demo-plan:hover { transform: translateY(-3px); background: var(--tq-wash) !important; box-shadow: 4px 6px 0 rgba(4, 38, 44, .16); }
.rp-demo-card .rp-demo-plan:hover::after { transform: translateX(4px); }

/* ===== Diner side: same calm look as the dashboards (pale page, white hairline cards, soft aqua accents) ===== */
body:has(.app-main) { background: #EEF6F7; }
/* page banners: quiet aqua wash instead of the saturated gradient */
#view .section-head.align-left:not(.diner-section-head) { background: linear-gradient(135deg, #BDF2F5 0%, #DDF4F6 70%); }
#view .section-head.align-left:not(.diner-section-head)::after { opacity: .3; }
/* top nav: aqua active pill */
.app-nav-links a.active { background: #DDF4F6 !important; color: var(--tq-text) !important; box-shadow: inset 0 0 0 1.5px #6CDAE7; }
/* cards */
.app-main .drop-card, .app-main .filter-panel, .app-main .pass-card, .app-main .checkout-card, .app-main .restaurant-visit-card, .app-main .notif-panel,
.app-main .mini-plan-card, .app-main .fd-risk-card, .app-main .history-table-card, .app-main .empty-state-card, .app-main .plan-card, .app-main .pickup-card {
  background: #fff !important; border: 1px solid rgba(4, 38, 44, .08) !important; border-radius: 24px !important;
  box-shadow: 0 1px 2px rgba(4, 38, 44, .04), 0 14px 30px -20px rgba(4, 38, 44, .22) !important; }
.app-main .drop-card:hover { box-shadow: 0 1px 2px rgba(4, 38, 44, .05), 0 20px 36px -18px rgba(4, 38, 44, .3) !important; }
.app-main .mini-plan-card.current { background: linear-gradient(160deg, #BDF2F5 0%, #DDF4F6 100%) !important; border-color: #6CDAE7 !important; }
/* filter chips + selects: white, soft; selected = aqua */
.app-main .filter-chip, .app-main .filter-panel .filter-chip { background: #fff !important; border: 1px solid rgba(4, 38, 44, .14) !important; color: #567074 !important; }
.app-main .filter-chip:hover, .app-main .filter-panel .filter-chip:hover { border-color: #6CDAE7 !important; color: var(--tq-text) !important; background: #F4FBFC !important; }
.app-main .filter-chip.active, .app-main .filter-panel .filter-chip.active { background: #DDF4F6 !important; color: var(--tq-text) !important; border-color: #6CDAE7 !important; font-weight: 800; }
.app-main .filter-panel .filter-search-input, .app-main .filter-panel select { background: #F4FAFB !important; border: 1px solid rgba(4, 38, 44, .1) !important; }
/* tabs / stats */
.app-main .tabs-switch { background: #fff; }
/* hairline dividers instead of heavy rules */
.app-main hr, .app-main .divider { border-color: #E3EFF1; }
/* diner feed: the "ending soon" row and the countdown blocks inside cards follow the same soft style */
.app-main .diner-section--endingSoon .drop-card, .app-main .diner-section--endingSoon .drop-card-link .drop-card { border: 1px solid rgba(4, 38, 44, .08) !important; box-shadow: 0 1px 2px rgba(4, 38, 44, .04), 0 14px 30px -20px rgba(4, 38, 44, .22) !important; overflow: visible; }
.app-main .diner-section--endingSoon .drop-card .drop-countdown { border-radius: 24px 0 0 24px !important; }
.app-main .drop-card .drop-countdown { background: #EEF6F7 !important; color: var(--tq-text) !important; }
.app-main .drop-card .drop-countdown *:not(svg):not(circle):not(path) { color: var(--tq-text); }
.app-main .diner-section--endingSoon .drop-card .drop-countdown { background: #DDF4F6 !important; }
/* mobile bottom tab bar: white and floating instead of a dark teal slab */
@media (max-width: 900px) {
  .app-nav-links { background: #fff !important; border: 1px solid rgba(4, 38, 44, .08); box-shadow: 0 18px 40px -16px rgba(4, 38, 44, .35) !important; }
  .app-nav-links a { color: #567074 !important; }
  .app-nav-links a:hover { background: #EEF6F7 !important; color: var(--tq-text) !important; }
  .app-nav-links a.active { background: #DDF4F6 !important; color: var(--tq-text) !important; box-shadow: inset 0 0 0 1.5px #6CDAE7; }
}

/* ===== Tutorials (and other pop-up cards): same soft white / aqua look, no gold ===== */
.eb-tutorial-card, .eb-modal, .claim-stamp-card, .ai-chat-panel { background: #fff; border: 1px solid rgba(4, 38, 44, .1); border-radius: 26px; box-shadow: 0 32px 64px -26px rgba(4, 38, 44, .5), 0 2px 6px rgba(4, 38, 44, .06); color: var(--tq-text); }
.eb-tutorial-highlight { box-shadow: 0 0 0 9999px rgba(4, 38, 44, .58), 0 0 0 3px #6CDAE7, 0 0 30px 6px rgba(108, 218, 231, .45); }
@media (max-width: 640px) { .eb-tutorial-highlight { box-shadow: 0 0 0 9999px rgba(4, 38, 44, .62), 0 0 0 3px #6CDAE7; } }
.eb-tutorial-mark { background: #BDF2F5; color: var(--tq-text); }
.eb-tutorial-title { color: var(--tq-text); }
.eb-tutorial-body { color: #567074; }
.eb-tutorial-body a { color: #14707B; }
.eb-tutorial-dot { background: #D5E9EC; }
.eb-tutorial-dot.active { background: #14707B; }
.eb-tutorial-count { color: #7E9CA1; }
.eb-tutorial-close { color: #567074; background: #F1F7F8; }
.eb-tutorial-close:hover { background: var(--tq-text); color: #fff; }
/* pointer arrows: hairline outline + white fill to match the card */
.eb-tutorial-card.placement-bottom .eb-tutorial-arrow { border-bottom-color: #D5E9EC; }
.eb-tutorial-card.placement-bottom .eb-tutorial-arrow::after { border-bottom-color: #fff; }
.eb-tutorial-card.placement-top .eb-tutorial-arrow { border-top-color: #D5E9EC; }
.eb-tutorial-card.placement-top .eb-tutorial-arrow::after { border-top-color: #fff; }
.eb-tutorial-card.placement-right .eb-tutorial-arrow { border-right-color: #D5E9EC; }
.eb-tutorial-card.placement-right .eb-tutorial-arrow::after { border-right-color: #fff; }
.eb-tutorial-card.placement-left .eb-tutorial-arrow { border-left-color: #D5E9EC; }
.eb-tutorial-card.placement-left .eb-tutorial-arrow::after { border-left-color: #fff; }
/* buttons inside the tour: dark primary, quiet text for Back / Skip */
.eb-tutorial-actions #eb-tutorial-next { background: var(--tq-text); color: #fff; border-color: var(--tq-text); }
.eb-tutorial-actions #eb-tutorial-next:hover { background: #A6EEF4; color: var(--tq-text); }
.eb-tutorial-actions #eb-tutorial-back, .eb-tutorial-actions #eb-tutorial-skip { color: #567074; }
.eb-tutorial-actions #eb-tutorial-back:hover, .eb-tutorial-actions #eb-tutorial-skip:hover { color: var(--tq-text); background: #EEF6F7; }

/* ===== Diner account page: profile card on top, grouped white link cards with aqua icon chips ===== */
.app-main .account-hub-header, .app-main .account-nav-card { background: #fff !important; border: 1px solid rgba(4, 38, 44, .08) !important; border-radius: 26px !important; box-shadow: 0 1px 2px rgba(4, 38, 44, .04), 0 14px 30px -20px rgba(4, 38, 44, .22) !important; }
.app-main .account-nav-card:hover { transform: none !important; border-color: rgba(4, 38, 44, .08) !important; }
.app-main .account-hub-header { position: relative; overflow: hidden; padding: 30px 30px 28px; background: linear-gradient(180deg, #E6F8FA 0, #fff 120px) !important; }
.app-main .account-hub-header .avatar-circle { width: 76px; height: 76px; font-size: 1.5rem; background: linear-gradient(135deg, #BDF2F5, #6CDAE7); color: var(--tq-text); border: 3px solid #fff; box-shadow: 0 8px 18px -8px rgba(4, 38, 44, .4); }
.app-main .account-hub-header-info h2 { font-size: 1.6rem; letter-spacing: -0.03em; color: var(--tq-text); }
.app-main .account-hub-header-info p { color: #567074; }
.account-nav-card-title { color: #14707B; }
.app-main .account-nav-row:hover { background: #F4FBFC; transform: none; }
.app-main .account-nav-row + .account-nav-row { border-top: 1px solid #EDF3F4; }
.app-main .account-nav-row-icon { width: 42px; height: 42px; border: 0 !important; border-radius: 14px !important; background: #DDF4F6 !important; color: var(--tq-text) !important; }
.app-main .account-nav-row.is-danger .account-nav-row-icon { background: #FDEBE8 !important; color: #C0392B !important; }
.app-main .account-nav-row-body strong { color: var(--tq-text); }
.app-main .account-nav-row-body span { color: #567074; }
.app-main .account-nav-row-end { color: #8AA5AA; }
.app-main .account-nav-row:hover .account-nav-row-end { color: var(--tq-text); }
/* plan name pills (Free / Wander / Summit): palette colours, not beige */
.app-main .plan-pill.plan-free { background: #E4EEF1; color: var(--tq-text); }
.app-main .plan-pill.plan-wander { background: #A6EEF4; color: var(--tq-text); }
.app-main .plan-pill.plan-summit { background: var(--tq-text); color: #6CDAE7; }

/* ===== No cream anywhere: page background is the pale aqua (--rv-paper / --cream-50), cards and panels are white ===== */
.rv-tk, .rp-receipt, .rp-pass, .rp-plan, .rv-phone-screen, .pickup-card, .order-summary, .dash-drop-row, .sent-email, .rv-hp-screen, .rv-note,
.filter-panel, .pass-card { background-color: #fff; }
@media (max-width: 860px) { .rv-header .nav-links.open, .rv-header--hero:not(.scrolled) .nav-links.open { background: #fff; } }
/* support chat: white panel, light aqua message area, white bubbles, aqua accents */
.ai-chat-panel { background: #fff; }
.ai-chat-messages { background: #F4FAFB; }
.ai-chat-typing { background: #F4FAFB; }
.ai-chat-input-row { background: #fff; border-top: 1px solid #E3EFF1; }
.ai-chat-input-row textarea { background: #F4FAFB; border: 1px solid rgba(4, 38, 44, .14); }
.ai-chat-bubble-assistant { background: #fff; border: 1px solid #DCEBED; box-shadow: 0 2px 6px rgba(4, 38, 44, .06); color: var(--tq-text); }
.ai-chat-msg-user { background: #BDF2F5; border: 1px solid #A6EEF4; box-shadow: none; color: var(--tq-text); }
.ai-chat-msg-system { color: #7E9CA1; }
.ai-chat-starter, .ai-chat-action-btn { background: #fff; border: 1px solid #CFE3E6; box-shadow: none; }
.ai-chat-starter:hover, .ai-chat-action-btn:hover { background: var(--tq-text); color: #fff; border-color: var(--tq-text); }

/* ===== Drop cards (feed, shelves, restaurant pages): lighter, easier to scan ===== */
.drop-grid .drop-card, .drop-carousel:not(.is-board) .drop-card { position: relative; padding: 24px; border-radius: 26px !important; background: linear-gradient(180deg, var(--tier-tint, #F1F8F9) 0, #fff 110px) !important;
  transition: transform .25s cubic-bezier(.2, .8, .3, 1), box-shadow .25s ease; }
.drop-grid .drop-card[data-tier="gold"], .drop-carousel:not(.is-board) .drop-card[data-tier="gold"] { --tier-tint: #FFF4D6; --tier-line: #EBB233; }
.drop-grid .drop-card[data-tier="silver"], .drop-carousel:not(.is-board) .drop-card[data-tier="silver"] { --tier-tint: #E8F0F5; --tier-line: #9FB4C2; }
.drop-grid .drop-card[data-tier="bronze"], .drop-carousel:not(.is-board) .drop-card[data-tier="bronze"] { --tier-tint: #FCE9DF; --tier-line: #DE8B62; }
.drop-grid .drop-card::before, .drop-carousel:not(.is-board) .drop-card::before { content: ''; position: absolute; left: 24px; right: 24px; top: 0; height: 5px; border-radius: 0 0 6px 6px; background: var(--tier-line, #6CDAE7); }
.drop-grid .drop-card-link:hover .drop-card, .drop-carousel:not(.is-board) .drop-card-link:hover .drop-card { transform: translateY(-5px); box-shadow: 0 1px 2px rgba(4, 38, 44, .05), 0 26px 40px -22px rgba(4, 38, 44, .38) !important; }
/* header: tier badge left, spots-left pill right */
.drop-card-top > span:last-child { padding: 4px 11px; border-radius: 999px; background: #fff; border: 1px solid rgba(4, 38, 44, .1); color: var(--tq-text) !important; font-weight: 700 !important; }
.drop-card h4 { font-size: 1.55rem; letter-spacing: -0.035em; line-height: 1.08; color: var(--tq-text); }
.drop-card .dish { color: #567074; }
/* flag tag: flat pill straddling the top-left edge instead of a tilted tab */
.drop-card-link .drop-flag { rotate: 0deg !important; transform: none !important; left: 24px; top: -11px; box-shadow: 0 6px 14px -8px rgba(4, 38, 44, .45); }
/* progress */
.drop-card .spots-bar { height: 8px; background: #E3EFF1; }
.drop-card .spots-bar-fill { background: linear-gradient(90deg, #6CDAE7, #14B8C9) !important; }
.drop-card .spots-label { color: #7E9CA1; }
/* price row: big price, struck-through old price, round arrow on the right */
.drop-grid .drop-card .price-row, .drop-carousel:not(.is-board) .drop-card .price-row { display: flex; align-items: center; gap: 10px; }
.drop-grid .drop-card .price-row::after, .drop-carousel:not(.is-board) .drop-card .price-row::after { content: '\2192'; margin-left: auto; width: 40px; height: 40px; border-radius: 50%; background: var(--tq-text); color: #fff; display: grid; place-items: center; font-size: 1.15rem; transition: transform .2s ease, background .2s ease; }
.drop-grid .drop-card-link:hover .price-row::after, .drop-carousel:not(.is-board) .drop-card-link:hover .price-row::after { transform: translateX(4px); background: #14707B; }
.drop-card .price-now { color: var(--tq-text); }
/* mobile menu (hamburger) button on the restaurant + admin dashboards: dark icon on a white circle so it is always visible */
.dash-topbar .dash-sidebar-toggle svg, .dash-sidebar-toggle svg { color: var(--tq-text) !important; stroke: var(--tq-text); }
.dash-topbar .dash-sidebar-toggle:hover { background: #A6EEF4; }
@media (max-width: 960px) { .dash-topbar .dash-sidebar-toggle { background: #fff; border: 1.5px solid rgba(4, 38, 44, .22); box-shadow: 0 6px 14px -8px rgba(4, 38, 44, .4); } }

/* Drops feed shelves (Ending soon, For you, Near you, All drops): one horizontal row of drop cards you can scroll sideways */
.drop-carousel.is-scroll { padding-top: 20px; }
@media (min-width: 640px) { .drop-carousel.is-scroll .drop-card-link { flex: 0 0 300px; } }
.drop-carousel.is-scroll .drop-card-link { align-self: stretch; }
.drop-carousel.is-scroll .drop-card { height: 100%; }
/* the Ending-soon shelf now uses the same cards as everywhere else, so its countdown box matches too */
.app-main .diner-section--endingSoon .drop-carousel.is-scroll .drop-card .drop-countdown { border-radius: 16px !important; background: #EEF6F7 !important; }

/* date / time pickers (e.g. "Starts" on the new-drop form): always the same width as the other fields, left-aligned, never wider than the card (iPhone Safari sizes these on its own) */
input[type="datetime-local"], input[type="date"], input[type="time"], input[type="month"] {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
  height: auto; min-height: 0; padding: 13px 20px; text-align: center; justify-content: center; border-radius: 999px; font: inherit; line-height: 22px; color: var(--tq-text);
  display: flex; align-items: center; /* iPhone Safari pins the text to the top of a tall box, so the height comes from equal top/bottom padding instead */
}
input[type="datetime-local"]::-webkit-date-and-time-value, input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { text-align: center; flex: 1; height: 22px; min-height: 22px; line-height: 22px; margin: 0; padding: 0; display: block; }
input[type="datetime-local"]::-webkit-calendar-picker-indicator, input[type="date"]::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; }
.field input[type="datetime-local"], .field input[type="date"], .field input[type="time"] { background: #fff; border: 1.5px solid rgba(4, 38, 44, .16); }

/* ===== Diner plan cards (pricing page): soft rounded cards, no hard shadows / colour strips / dashed dividers ===== */
.rp-plan-grid { gap: 24px; align-items: stretch; }
.rp-plan-grid .rp-plan { position: relative; background: #fff; color: var(--tq-text); border: 1px solid rgba(4, 38, 44, .1); border-radius: 32px; box-shadow: 0 1px 2px rgba(4, 38, 44, .04), 0 18px 40px -22px rgba(4, 38, 44, .22); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.rp-plan-grid .rp-plan:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(4, 38, 44, .04), 0 26px 50px -22px rgba(4, 38, 44, .3); }
.rp-plan-grid .rp-plan-wander { background: linear-gradient(170deg, #DDF4F6 0%, #fff 62%); border: 1.5px solid #6CDAE7; }
.rp-plan-grid .rp-plan-summit { background: linear-gradient(170deg, #fff 40%, #E7F7F9 100%); }
.rp-plan-grid .rp-plan header { padding: 34px 30px 22px; border-bottom: 0; }
.rp-plan-grid .rp-plan header::before { content: ''; position: static; display: block; width: 26px; height: 26px; margin-bottom: 18px; background: #BFD9DE; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); border: 0; }
.rp-plan-grid .rp-plan-wander header::before { background: #6CDAE7; }
.rp-plan-grid .rp-plan-summit header::before { background: #04262C; }
.rp-plan-grid .rp-plan-medals { top: 32px; right: 26px; padding: 6px 8px; border-radius: 999px; background: rgba(221, 244, 246, .7); }
.rp-plan-grid .rp-plan h3 { font-size: 1.7rem; letter-spacing: -.04em; color: var(--tq-text); }
.rp-plan-grid .rp-plan-price { margin-top: 10px; }
.rp-plan-grid .rp-plan-price b { font-size: 3.6rem; color: var(--tq-text); }
.rp-plan-grid .rp-plan-price span { font-family: inherit; font-size: .95rem; opacity: .6; }
.rp-plan-grid .rp-plan header p { color: var(--tq-soft); margin-top: 10px; }
.rp-plan-grid .rp-plan dl { margin: 0 30px; padding: 0; border-top: 1px solid rgba(4, 38, 44, .1); }
.rp-plan-grid .rp-plan dl div { padding: 16px 0; border-bottom: 1px solid rgba(4, 38, 44, .07); align-items: flex-start; }
.rp-plan-grid .rp-plan dl div:last-child { border-bottom: 0; }
.rp-plan-grid .rp-plan dt { font-family: inherit; font-size: .84rem; letter-spacing: 0; text-transform: none; opacity: 1; color: var(--tq-soft); max-width: 42%; font-weight: 600; }
.rp-plan-grid .rp-plan dd { font-size: .95rem; color: var(--tq-text); line-height: 1.35; }
.rp-plan-grid .rp-plan .is-none dd { opacity: .4; font-weight: 500; }
.rp-plan-grid .rp-plan .rp-plan-cta, .rp-plan-grid .rp-plan-free .rp-plan-cta, .rp-plan-grid .rp-plan-wander .rp-plan-cta, .rp-plan-grid .rp-plan-summit .rp-plan-cta {
  margin: 12px 30px 30px; padding: 16px; border: 0 !important; border-radius: 999px; background: var(--tq-text) !important; color: #fff !important; box-shadow: none; transition: background .2s, transform .2s;
}
.rp-plan-grid .rp-plan .rp-plan-cta:hover { background: #0A4A55 !important; color: #fff !important; transform: translateY(-1px); }
.rp-plan-grid .rp-plan-free .rp-plan-cta { background: #fff !important; color: var(--tq-text) !important; border: 1.5px solid rgba(4, 38, 44, .22) !important; }
.rp-plan-grid .rp-plan-free .rp-plan-cta:hover { background: #DDF4F6 !important; color: var(--tq-text) !important; }
@media (max-width: 860px) {
  .rp-plan-grid .rp-plan header { padding: 28px 22px 18px; }
  .rp-plan-grid .rp-plan dl { margin: 0 22px; }
  .rp-plan-grid .rp-plan .rp-plan-cta { margin: 12px 22px 24px; }
  .rp-plan-grid .rp-plan-medals { top: 26px; right: 20px; }
}

/* ===== Account → Payment: current plan + plan picker (same soft look as the Pricing page) ===== */
.app-main .current-plan-card { max-width: 560px; padding: 26px 28px 24px !important; border-radius: 28px !important; background: linear-gradient(165deg, #DDF4F6 0%, #fff 70%) !important; border: 1.5px solid #6CDAE7 !important; box-shadow: 0 18px 40px -26px rgba(4, 38, 44, .3) !important; }
.current-plan-card .cp-top, .mini-plan-card .mpc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.current-plan-card .cp-label { display: flex; align-items: center; gap: 8px; font-family: inherit; font-size: .86rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--tq-soft); }
.current-plan-card .cp-label::before { content: ''; width: 16px; height: 16px; background: #6CDAE7; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.current-plan-card .cp-name { margin: 8px 0 0; font-size: 2.1rem; letter-spacing: -.045em; color: var(--tq-text); }
.current-plan-card .mini-plan-tiers, .mini-plan-card .mini-plan-tiers { margin: 0; padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .75); flex-wrap: nowrap; }
.mini-plan-card .mini-plan-tiers { background: #EAF6F8; }
.current-plan-card .cp-meta { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.current-plan-card .mini-plan-price { margin: 0; font-size: 1.5rem; color: var(--tq-text); }
.current-plan-card .mini-plan-tiers-label, .mini-plan-card .mini-plan-tiers-label { font-family: inherit; font-size: .88rem; color: var(--tq-soft); margin: 0; }
.mini-plan-price span { font-weight: 600; color: #567074; }
.current-plan-card .plan-usage-meter-track { background: rgba(4, 38, 44, .08); }
.current-plan-card .plan-usage-meter-fill { background: linear-gradient(90deg, #6CDAE7, #3CBFD0); }

.app-main .mini-plan-grid { gap: 22px; }
.app-main .mini-plan-grid .mini-plan-card { padding: 26px 26px 24px !important; border-radius: 30px !important; border: 1px solid rgba(4, 38, 44, .1) !important; border-top: 1px solid rgba(4, 38, 44, .1) !important; box-shadow: 0 1px 2px rgba(4, 38, 44, .04), 0 18px 40px -24px rgba(4, 38, 44, .24) !important; transition: transform .25s ease, box-shadow .25s ease; }
.app-main .mini-plan-grid .mini-plan-card:hover { transform: translateY(-4px) !important; box-shadow: 0 1px 2px rgba(4, 38, 44, .04), 0 26px 48px -24px rgba(4, 38, 44, .3) !important; border-color: rgba(4, 38, 44, .1) !important; }
.app-main .mini-plan-grid .mini-plan-card.current { background: linear-gradient(170deg, #DDF4F6 0%, #fff 70%) !important; border: 1.5px solid #6CDAE7 !important; }
.mini-plan-card .mpc-name { margin: 0; font-size: 1.55rem; letter-spacing: -.04em; color: var(--tq-text); display: flex; align-items: center; gap: 10px; }
.mini-plan-card .mpc-name::before { content: ''; width: 20px; height: 20px; flex: none; background: #BFD9DE; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.mini-plan-card.plan-card-wander .mpc-name::before, .mini-plan-card.current .mpc-name::before { background: #6CDAE7; }
.mini-plan-card.plan-card-summit .mpc-name::before { background: #04262C; }
.mini-plan-card .mini-plan-price { font-size: 2.6rem; letter-spacing: -.05em; line-height: 1; margin: 14px 0 20px; color: var(--tq-text); }
.mini-plan-card .mini-plan-price span { font-size: .95rem; letter-spacing: 0; }
.mini-plan-card .mini-plan-tiers-label { margin-top: 12px; }
.mini-plan-card .mini-plan-features { gap: 0; margin: 0 0 22px; border-top: 1px solid rgba(4, 38, 44, .1); }
.mini-plan-card .mini-plan-features li { padding: 13px 0; border-bottom: 1px solid rgba(4, 38, 44, .07); font-size: .92rem; color: var(--tq-text); align-items: center; }
.mini-plan-card .mini-plan-features li:last-child { border-bottom: 0; }
.mini-plan-card .mini-plan-features li svg { margin-top: 0; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: #DDF4F6; color: #0B6573; }
.mini-plan-card .btn { border-radius: 999px; padding: 15px; }
.mini-plan-card .btn.btn-dark { background: var(--tq-text); color: #fff; border: 0; }
.mini-plan-card .btn.btn-dark:hover { background: #0A4A55; }
.mini-plan-card .btn.btn-outline[disabled] { background: #fff; color: #0B6573; border: 1.5px solid #6CDAE7; opacity: 1; cursor: default; }
@media (max-width: 640px) { .app-main .current-plan-card { padding: 22px 20px !important; } .app-main .mini-plan-grid .mini-plan-card { padding: 22px 20px !important; } }

/* hero header pill: a touch darker so the light nav text reads clearly over the aqua hero */
.rv-header--hero:not(.scrolled) .nav::before { background: rgba(4, 38, 44, .56); }

/* ===== Audit fixes: contrast ===== */
/* "40% off / 25% off / 15% off" and the 01–05 numbers: dark enough teal on the pale aqua sections */
.rp-tp-list em { color: var(--tq-text) !important; background: #6CDAE7; padding: .02em .28em .1em; border-radius: .32em; line-height: 1.1; }
.rp-tool-list li > span:first-child { color: #0B6573 !important; }

/* ===== Audit fixes: narrow phones (360px and below) ===== */
@media (max-width: 860px) { .rp-demo-grid { grid-template-columns: minmax(0, 1fr); } .rp-demo-card { min-width: 0; } }
@media (max-width: 960px) { .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .metric-card { min-width: 0; } }
@media (max-width: 400px) { .metric-grid { grid-template-columns: minmax(0, 1fr); } }

/* ===== About → "Why Rovin exists": two flat cards joined by a clock ===== */
.rp-manifesto .rp-m-panel { padding: 64px 56px 60px; }
.rp-manifesto .rp-m-panel .rv-eyebrow { margin-bottom: 30px; }
.rp-manifesto .rp-m-stage { grid-template-columns: 1fr auto 1fr; align-items: stretch; }
.rp-manifesto .rp-m-stage::before { left: 8%; right: 8%; top: 50%; border-top: 2px solid rgba(11, 120, 134, .22); }
.rp-manifesto .rp-m-stage .rp-m-ticket {
  position: relative; display: flex; flex-direction: column; transform: none; padding: 34px 34px 30px; border-radius: 30px;
  background: #fff; border: 1px solid rgba(4, 38, 44, .08); box-shadow: 0 1px 2px rgba(4, 38, 44, .04), 0 22px 44px -26px rgba(4, 38, 44, .3);
}
.rp-manifesto .rp-m-ticket p { margin-top: auto; padding-top: 18px; color: var(--tq-soft); }
.rp-manifesto .rp-m-tag { display: inline-flex; align-items: center; gap: 9px; font-family: inherit; font-size: .86rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: #0B6573; margin-bottom: 16px; }
.rp-manifesto .rp-m-tag::before { content: ''; width: 16px; height: 16px; background: #6CDAE7; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.rp-manifesto .rp-m-ticket + .rp-m-clock + .rp-m-ticket .rp-m-tag::before { background: #04262C; }
.rp-manifesto .rp-m-seats i { width: 30px; height: 30px; border: 2px dashed #6CDAE7; background: #F1FAFB; opacity: 1; }
.rp-manifesto .rp-m-list i { background: #E3F3F5; }
.rp-manifesto .rp-m-clock { margin: 0 -18px; align-self: center; width: 124px; height: 124px; background: #fff; border: 5px solid #6CDAE7; box-shadow: 0 0 0 8px rgba(255, 255, 255, .7), 0 20px 36px -18px rgba(4, 38, 44, .4); }
.rp-manifesto .rp-m-clock circle:first-child { stroke: none; }
.rp-manifesto .rp-m-clock .ticks line, .rp-manifesto .rp-m-clock .hand { stroke: #04262C; }
.rp-manifesto .rp-m-clock .pin { fill: #0B7886; }
/* the clock keeps running: minute hand once every 12 seconds, hour hand once every 2.4 minutes */
.rp-manifesto .rp-m-clock .hand.h { animation: rp-m-tick 144s linear infinite; }
@media (prefers-reduced-motion: reduce) { .rp-manifesto .rp-m-clock .hand.h, .rp-manifesto .rp-m-clock .hand.m { animation: none; } }
@media (max-width: 860px) {
  .rp-manifesto .rp-m-panel { padding: 40px 18px 42px; }
  .rp-manifesto .rp-m-stage { grid-template-columns: 1fr; justify-items: stretch; }
  .rp-manifesto .rp-m-stage::before { left: 50%; right: auto; top: 8%; bottom: 8%; border-top: 0; border-left: 2px solid rgba(11, 120, 134, .22); }
  .rp-manifesto .rp-m-stage .rp-m-ticket { padding: 28px 24px 24px; }
  .rp-manifesto .rp-m-clock { margin: -18px auto; width: 104px; height: 104px; }
}

/* ===== Pricing → For restaurants: worked commission example (replaces the formula pill card) ===== */
.rp-rest .rp-formula { display: block; padding: 30px 32px 28px; border-radius: 32px; background: #fff; color: var(--tq-text); border: 1px solid rgba(4, 38, 44, .08); box-shadow: 0 1px 2px rgba(4, 38, 44, .04), 0 26px 50px -28px rgba(4, 38, 44, .32); font-family: var(--font-body); font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.rp-rest .rp-formula b { background: none; border: 0; border-radius: 0; padding: 0; color: var(--tq-text); }
.rp-f-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: .92rem; font-weight: 700; color: #0B6573; }
.rp-f-head::before { content: ''; width: 18px; height: 18px; background: #6CDAE7; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.rp-f-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(4, 38, 44, .1); }
.rp-f-rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(4, 38, 44, .08); }
.rp-f-rows span { color: var(--tq-soft); font-weight: 600; }
.rp-f-rows b { font-family: var(--font-head); font-size: 1.45rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rp-rest .rp-formula .rp-f-minus { color: #0B7886; }
.rp-f-total { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 18px; padding: 18px 22px; border-radius: 22px; background: linear-gradient(160deg, #BDF2F5 0%, #DDF4F6 100%); }
.rp-f-total span { font-weight: 700; color: var(--tq-text); }
.rp-rest .rp-formula .rp-f-total b { font-family: var(--font-head); font-size: 2.3rem; letter-spacing: -.05em; line-height: 1; }
.rp-rest .rp-formula p { margin: 16px 0 0; font-size: .92rem; font-weight: 500; color: #567074; }
@media (max-width: 480px) { .rp-rest .rp-formula { padding: 24px 20px 22px; } .rp-f-total { padding: 16px; } .rp-rest .rp-formula .rp-f-total b { font-size: 1.9rem; } .rp-f-rows b { font-size: 1.25rem; } }

/* ===== Mobile menu: the page you are on gets the same dark pill + turquoise lettering as the "Don't wait." headline ===== */
@media (max-width: 860px) {
  #mkt-nav-links li:not(.mobile-cta) a.active {
    width: calc(100% + 20px); margin: 4px -10px; padding: 14px 14px !important; border-radius: 20px; border-bottom-color: transparent !important;
    background: #082A30; transform: rotate(-1.2deg); box-shadow: 4px 6px 0 0 rgba(4, 38, 44, .28);
  }
  #mkt-nav-links li:not(.mobile-cta) a.active, #mkt-nav-links li:not(.mobile-cta) a.active::before, #mkt-nav-links li:not(.mobile-cta) a.active::after { color: #6CDAE7 !important; }
  #mkt-nav-links li:has(+ li > a.active) > a { border-bottom-color: transparent !important; }
  #mkt-nav-links li:has(> a.active) { border-bottom-color: transparent !important; }
}
@media (max-width: 860px) { #mkt-nav-links li:first-child a.active { margin-top: 10px; } }

/* ===== Diner → Preferences: a label on the left, a white card of controls on the right, one sticky save bar ===== */
.pref-lead { max-width: 640px; margin: 0 0 26px !important; }
.pref-page { display: grid; gap: 22px; }
.pref-row { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; align-items: start; scroll-margin-top: 90px; }
.pref-side { padding-top: 10px; }
.pref-side h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 1.25rem; letter-spacing: -.03em; color: var(--tq-text); }
.pref-side h3::before { content: ''; width: 18px; height: 18px; flex: none; background: #6CDAE7; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.pref-side p { margin: 0; font-size: .92rem; line-height: 1.5; color: #567074; }
.pref-card { padding: 26px 28px; border-radius: 28px; background: #fff; border: 1px solid rgba(4, 38, 44, .08); box-shadow: 0 1px 2px rgba(4, 38, 44, .04), 0 22px 44px -30px rgba(4, 38, 44, .28); }
.pref-card .field { margin: 0 0 22px; padding: 0; border: 0; min-width: 0; }
.pref-card .field:last-child { margin-bottom: 0; }
.pref-card .field legend, .pref-card .field label { padding: 0; margin: 0 0 12px; font-size: .86rem; font-weight: 700; letter-spacing: 0; text-transform: none; font-family: inherit; color: var(--tq-text); }
.pref-card .filter-chips { gap: 8px; }
.pref-card .filter-chip { padding: 9px 16px; font-size: .9rem; font-weight: 600; }
.pref-card .filter-chip.active, .pref-card .filter-chip[aria-pressed="true"] { background: #6CDAE7 !important; border-color: #6CDAE7 !important; color: var(--tq-text) !important; }
.pref-card .filter-chip.active::before, .pref-card .filter-chip[aria-pressed="true"]::before { content: '✓'; margin-right: 7px; font-weight: 800; }
.pref-card select { width: 100%; max-width: 420px; min-height: 52px; padding: 0 20px; border-radius: 999px; background: #fff; border: 1.5px solid rgba(4, 38, 44, .16); font: inherit; color: var(--tq-text); }
.pref-savebar {
  position: sticky; bottom: 14px; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: 16px; width: fit-content; margin-left: auto; padding: 10px 10px 10px 22px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(4, 38, 44, .08); box-shadow: 0 18px 40px -20px rgba(4, 38, 44, .4);
}
.pref-save-status { margin-right: 0; font-size: .86rem; font-weight: 600; color: #0B6573; }
.pref-savebar .btn { padding: 12px 24px; }
@media (max-width: 860px) {
  .pref-row { grid-template-columns: 1fr; gap: 12px; }
  .pref-side { padding-top: 0; }
  .pref-card { padding: 22px 20px; border-radius: 24px; }
  .pref-savebar { bottom: 74px; }
}

/* save bar: just the button floating at the bottom; the "Saved just now." note only appears (as its own small pill) once there is something to say */
.pref-savebar { background: none; border: 0; box-shadow: none; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.pref-savebar .btn { padding: 15px 28px; box-shadow: 0 16px 30px -14px rgba(4, 38, 44, .6); }
.pref-save-status:empty { display: none; }
.pref-save-status:not(:empty) { padding: 11px 16px; border-radius: 999px; background: #fff; border: 1px solid rgba(4, 38, 44, .08); box-shadow: 0 12px 26px -16px rgba(4, 38, 44, .4); }
/* keep the floating save button clear of the support-chat bubble in the bottom-right corner */
.pref-savebar { margin-right: 76px; }
@media (max-width: 860px) { .pref-savebar { margin-right: 72px; } }

/* ===== Diner → Settings + Help & support (same label-beside-card look as Preferences) ===== */
.set-list { margin: 0; padding: 0; }
.set-list > div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 15px 0; border-bottom: 1px solid rgba(4, 38, 44, .08); }
.set-list > div:first-child { padding-top: 0; }
.set-list dt { margin: 0; font-size: .9rem; font-weight: 600; color: #567074; }
.set-list dd { margin: 0; min-width: 0; text-align: right; font-weight: 700; color: var(--tq-text); overflow-wrap: anywhere; }
.set-note { margin: 16px 0 0; padding: 14px 16px; border-radius: 18px; background: #EAF6F8; font-size: .88rem; line-height: 1.5; color: var(--tq-soft); }
.pref-card .set-note:only-child, .set-list + .set-note { margin-top: 18px; }
.btn.set-danger { color: #B3392B; border: 1.5px solid rgba(179, 57, 43, .35); background: #fff; border-radius: 999px; padding: 11px 20px; }
.btn.set-danger:hover { background: #FDEBE8; border-color: rgba(179, 57, 43, .6); }

.help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-bottom: 22px; }
.help-card { display: flex; flex-direction: column; align-items: flex-start; padding: 28px; border-radius: 30px; background: #fff; border: 1px solid rgba(4, 38, 44, .08); box-shadow: 0 1px 2px rgba(4, 38, 44, .04), 0 22px 44px -30px rgba(4, 38, 44, .28); }
.help-card-main { background: linear-gradient(160deg, #BDF2F5 0%, #DDF4F6 70%, #fff 100%); border-color: #6CDAE7; }
.help-ico { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 18px; border-radius: 50%; background: #fff; color: #0B6573; box-shadow: 0 0 0 1px rgba(4, 38, 44, .06); }
.help-card-main .help-ico { background: var(--tq-text); color: #6CDAE7; box-shadow: none; }
.help-card h3 { margin: 0 0 8px; font-size: 1.35rem; letter-spacing: -.03em; color: var(--tq-text); }
.help-card p { margin: 0 0 22px; font-size: .95rem; line-height: 1.55; color: var(--tq-soft); }
.help-card .btn { margin-top: auto; }
.help-links { padding-bottom: 14px; }
.help-links h3 { margin: 0 0 6px; font-size: 1.1rem; letter-spacing: -.02em; color: var(--tq-text); }
.help-links a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 4px; border-top: 1px solid rgba(4, 38, 44, .08); color: var(--tq-text); font-weight: 600; text-decoration: none; }
.help-links a:first-of-type { margin-top: 8px; }
.help-links a i { width: 8px; height: 8px; border-top: 2px solid rgba(4, 38, 44, .35); border-right: 2px solid rgba(4, 38, 44, .35); transform: rotate(45deg); transition: transform .2s ease, border-color .2s ease; }
.help-links a:hover i { transform: translateX(3px) rotate(45deg); border-color: var(--tq-text); }
@media (max-width: 860px) { .help-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 16px; } .help-card { padding: 24px 22px; border-radius: 26px; } }

/* ===== Restaurant onboarding: a welcome + step list on the left, the form card on the right ===== */
.onboarding-wrap.rb-onboard { max-width: 1120px; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 40px; align-items: start; padding: 48px 24px 72px; }
.rb-aside { position: sticky; top: 28px; }
.rb-aside .eyebrow { display: block; margin-bottom: 14px; }
.rb-aside h2 { margin: 0 0 14px; font-size: clamp(2rem, 3.2vw, 2.9rem); line-height: 1.02; letter-spacing: -.045em; color: var(--tq-text); }
.rb-lead { margin: 0 0 30px; font-size: 1rem; line-height: 1.55; color: var(--tq-soft); }
.rb-steps { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 6px; }
.rb-steps::before { content: ''; position: absolute; left: 21px; top: 28px; bottom: 28px; border-left: 2px solid rgba(11, 120, 134, .2); }
.rb-steps li { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 0; border-radius: 22px; }
.rb-dot { position: relative; z-index: 1; display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1.5px solid rgba(4, 38, 44, .14); font-weight: 800; color: #567074; }
.rb-steps b { display: block; font-size: 1rem; letter-spacing: -.01em; color: var(--tq-text); }
.rb-steps small { display: block; margin-top: 2px; font-size: .84rem; color: #567074; }
.rb-steps li.current { background: #fff; padding-right: 16px; box-shadow: 0 14px 30px -20px rgba(4, 38, 44, .4); }
.rb-steps li.current .rb-dot { background: var(--tq-text); border-color: var(--tq-text); color: #6CDAE7; }
.rb-steps li.done .rb-dot { background: #6CDAE7; border-color: #6CDAE7; color: var(--tq-text); }
.rb-steps li:not(.current):not(.done) b { color: #567074; }
.rb-main .form-card { padding: 34px 36px 32px; border-radius: 32px; background: #fff; border: 1px solid rgba(4, 38, 44, .08); box-shadow: 0 1px 2px rgba(4, 38, 44, .04), 0 28px 54px -32px rgba(4, 38, 44, .35); }
.rb-main .form-card h3 { margin: 0 0 18px; font-size: 1.7rem; letter-spacing: -.04em; color: var(--tq-text); }
.rb-main .field label, .rb-main .field legend { margin: 0 0 8px; font-family: inherit; font-size: .86rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--tq-text); }
.rb-main .field input[type="text"], .rb-main .field input[type="email"] { min-height: 52px; padding: 0 20px; border-radius: 999px; background: #fff; border: 1.5px solid rgba(4, 38, 44, .16); }
.rb-main .filter-chip.active, .rb-main .filter-chip[aria-checked="true"] { background: #6CDAE7 !important; border-color: #6CDAE7 !important; color: var(--tq-text) !important; }
.rb-main .btn { border-radius: 999px; padding: 15px 24px; }
@media (max-width: 860px) {
  .onboarding-wrap.rb-onboard { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px 16px 56px; }
  .rb-aside { position: static; }
  .rb-lead { margin-bottom: 20px; }
  .rb-steps { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
  .rb-steps::before { display: none; }
  .rb-steps li { flex-direction: column; align-items: flex-start; gap: 8px; padding: 0; }
  .rb-steps li.current { padding: 0; background: none; box-shadow: none; }
  .rb-steps small { display: none; }
  .rb-dot { width: 38px; height: 38px; }
  .rb-steps b { font-size: .88rem; line-height: 1.2; }
  .rb-main .form-card { padding: 24px 20px; border-radius: 26px; }
}

/* ===== Diner onboarding: same welcome + step list + form card layout as the restaurant one, with a photo under the steps ===== */
.rb-diner .onboarding-illustration { justify-content: flex-start; margin-bottom: 8px; }
.rb-diner .onboarding-illustration svg { width: 92px; }
.rb-main .rb-skip { margin: 14px 0 0 6px; padding: 10px 14px; border-radius: 999px; color: #567074; font-weight: 700; }
.rb-main .rb-skip:hover { background: #fff; color: var(--tq-text); }
.rb-main select { width: 100%; min-height: 52px; padding: 0 20px; border-radius: 999px; background: #fff; border: 1.5px solid rgba(4, 38, 44, .16); font: inherit; color: var(--tq-text); }
.rb-main .filter-chip { padding: 9px 16px; font-size: .9rem; font-weight: 600; }
.rb-main .filter-chip.active, .rb-main .filter-chip[aria-pressed="true"] { background: #6CDAE7 !important; border-color: #6CDAE7 !important; color: var(--tq-text) !important; }
.rb-main .filter-chip.active::before, .rb-main .filter-chip[aria-pressed="true"]::before { content: '✓'; margin-right: 7px; font-weight: 800; }
.rb-main .field { margin-bottom: 22px; padding: 0; border: 0; min-width: 0; }
.rb-main .field legend { padding: 0; }
@media (max-width: 860px) { .rb-main .rb-skip { margin-left: 0; } }

/* How It Works: card 01 (the example feed) gets the same dark outline + hard offset shadow as cards 02-04 */
.rp-chapter .rp-board { border: 2px solid var(--rv-ink); box-shadow: 8px 9px 0 0 var(--rv-ink); rotate: -2deg; }

/* ===== Segmented tabs (Wallet Active/Used/Expired, dispute filters): same look as the diner top nav - white pill, selected tab on pale aqua with a turquoise ring ===== */
.app-main .tabs-switch, .dash-content .tabs-switch { background: #fff; border: 1px solid rgba(4, 38, 44, .08); padding: 5px; box-shadow: 0 1px 2px rgba(4, 38, 44, .04), 0 14px 30px -20px rgba(4, 38, 44, .3); }
.app-main .tabs-switch button, .dash-content .tabs-switch button { color: #567074; font-weight: 600; background: none; box-shadow: none; transform: none; }
.app-main .tabs-switch button:hover:not(.active), .dash-content .tabs-switch button:hover:not(.active) { background: #EEF6F7; color: var(--tq-text); }
.app-main .tabs-switch button.active, .dash-content .tabs-switch button.active { background: #DDF4F6; color: var(--tq-text); font-weight: 700; box-shadow: inset 0 0 0 1.5px #6CDAE7; }

/* ===== Loading screen: pale aqua field with a soft glow, a pinging star badge, the wordmark on a dark pill, a slim white progress track ===== */
.rv-loading { background: radial-gradient(60% 50% at 50% 40%, #BDF2F5 0%, rgba(189, 242, 245, 0) 70%), #EEF6F7; }
.rv-loading-inner { gap: 22px; }
.rv-loading-mark { width: 96px; height: 96px; }
.rv-loading-ring { inset: 0; border: 2px solid rgba(108, 218, 231, .9); border-top-color: rgba(108, 218, 231, .9); animation: rv-load-ping 1.8s ease-out infinite; opacity: 0; }
.rv-loading-mark::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(108, 218, 231, .9); opacity: 0; animation: rv-load-ping 1.8s ease-out .9s infinite; }
.rv-loading-star { width: 76px; height: 76px; background: #fff; box-shadow: 0 0 0 6px rgba(108, 218, 231, .35), 0 20px 36px -16px rgba(4, 38, 44, .5); animation: rv-load-pulse 1.8s ease-in-out infinite; }
.rv-loading-star svg { width: 38px; height: 38px; color: var(--tq-text); animation: rv-load-turn 6s linear infinite; }
.rv-loading-word { padding: 2px 22px 8px; border-radius: 20px; background: #082A30; color: #6CDAE7; font-size: clamp(2.2rem, 7vw, 3.2rem); rotate: -2deg; box-shadow: 5px 7px 0 0 rgba(4, 38, 44, .22); }
.rv-loading-line { width: min(220px, 56vw); height: 6px; background: #fff; box-shadow: inset 0 0 0 1px rgba(4, 38, 44, .08); }
.rv-loading-line i { background: linear-gradient(90deg, #6CDAE7, #0B7886); }
.rv-loading-note { font-family: inherit; font-size: .92rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--tq-soft); }
@keyframes rv-load-ping { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes rv-load-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rv-loading-ring, .rv-loading-mark::after, .rv-loading-star svg { animation: none; } }

/* ===== Legal pages (Terms / Privacy / Restaurant Agreement): each section is its own soft card, a "short version" box up top, a contents list that follows you ===== */
.rp-legal { padding: 56px 24px 24px; }
.lg-docs a { border: 1px solid rgba(4, 38, 44, .1); background: #fff; font-weight: 700; color: var(--tq-soft); }
.lg-docs a:hover { background: #EEF6F7; border-color: rgba(4, 38, 44, .18); color: var(--tq-text); }
.lg-docs a.is-on { background: #DDF4F6; color: var(--tq-text); border-color: #6CDAE7; box-shadow: inset 0 0 0 1px #6CDAE7; }
.lg-print { align-self: flex-start; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(4, 38, 44, .14); background: #fff; font: inherit; font-weight: 700; font-size: .88rem; color: var(--tq-text); cursor: pointer; }
.lg-print:hover { background: #DDF4F6; border-color: #6CDAE7; }
.lg-toc { border-top: 1px solid rgba(4, 38, 44, .1); }
.lg-toc-label { font-family: inherit; font-size: .8rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: #0B6573; }
.lg-toc a { margin: 0 -10px; padding: 7px 10px; border-radius: 12px; font-size: .9rem; }
.lg-toc a b { color: #0B7886; }
.lg-toc a:hover { background: #fff; }
.lg-toc a.is-now { background: #DDF4F6; color: var(--tq-text); box-shadow: inset 0 0 0 1px #6CDAE7; }
.lg-body { max-width: 780px; }
.lg-intro { margin: 0 0 22px; padding: 0 0 0; border: 0; font-size: 1.18rem; line-height: 1.65; color: var(--tq-text); }
.lg-summary { margin: 0 0 26px; padding: 26px 30px 22px; border-radius: 28px; background: linear-gradient(160deg, #BDF2F5 0%, #DDF4F6 70%, #EEF6F7 100%); border: 1px solid #6CDAE7; }
.lg-summary-title { margin: 0 0 14px; font-size: 1.15rem; letter-spacing: -.02em; color: var(--tq-text); }
.lg-summary ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.lg-summary li { position: relative; padding-left: 28px; font-size: 1rem; line-height: 1.5; font-weight: 600; color: var(--tq-text); }
.lg-summary li::before { content: ''; position: absolute; left: 0; top: .32em; width: 15px; height: 15px; background: var(--tq-text); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.lg-summary p { margin: 0; font-size: .86rem; color: var(--tq-soft); }
.lg-sec { margin: 0 0 18px; padding: 30px 34px 18px; border: 1px solid rgba(4, 38, 44, .08); border-bottom: 1px solid rgba(4, 38, 44, .08) !important; border-radius: 28px; background: #fff; box-shadow: 0 1px 2px rgba(4, 38, 44, .04), 0 20px 40px -32px rgba(4, 38, 44, .3); }
.lg-sec:last-child { margin-bottom: 0; }
.lg-sec h2 { margin-bottom: 14px; font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.lg-num { width: 40px; height: 40px; border: 0; box-shadow: none; background: #DDF4F6; color: #0B6573; font-size: .8rem; font-weight: 700; }
.lg-sec p { padding-left: 0; font-size: 1.02rem; color: var(--tq-soft); }
.lg-sec a { color: #0B6573; font-weight: 600; }
@media (max-width: 860px) {
  .rp-legal { padding: 36px 16px 16px; }
  .lg-print { display: none; }
  .lg-sec { padding: 24px 20px 12px; border-radius: 24px; }
  .lg-summary { padding: 22px 20px 18px; border-radius: 24px; }
}
@media print {
  .site-header, .rv-header, .rv-footer, .site-footer, .lg-side, .rp-cta, .rp-hero-legal, .ai-chat-launcher, #ai-chat-launcher { display: none !important; }
  .rp-legal { padding: 0; } .rp-legal-inner { display: block; }
  .lg-sec, .lg-summary { box-shadow: none; border: 0 !important; border-radius: 0; background: #fff; padding: 12px 0; break-inside: avoid; }
  body { background: #fff !important; }
}
.lg-side { max-height: calc(100vh - 120px); overflow-y: auto; padding-right: 6px; scrollbar-width: thin; }
@media (max-width: 860px) { .lg-side { max-height: none; overflow: visible; } }

/* ===== Message threads as a two-way chat (diner My Messages + restaurant Inbox) ===== */
.chat-pane { display: flex; flex-direction: column; gap: 0; padding: 22px 22px 18px; border: 1px solid rgba(4, 38, 44, .08); border-radius: 26px; background: #fff; box-shadow: 0 1px 2px rgba(4, 38, 44, .04), 0 20px 40px -32px rgba(4, 38, 44, .3); }
.chat-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(4, 38, 44, .08); color: var(--tq-text); }
.chat-head strong { font-size: 1.05rem; letter-spacing: -.01em; }
.chat-head-email, .chat-head-drop { font-size: .82rem; color: #5C7E84; }
.chat-head .msg-detail-drop-link { margin-top: 0; color: #0B6573; }
.chat-log { display: flex; flex-direction: column; gap: 10px; max-height: min(52vh, 460px); min-height: 120px; overflow-y: auto; padding: 16px 4px 8px; scroll-behavior: auto; overscroll-behavior: contain; }
.chat-row { display: flex; flex-direction: column; max-width: 82%; gap: 3px; }
.chat-row.is-mine { align-self: flex-end; align-items: flex-end; }
.chat-row.is-theirs { align-self: flex-start; align-items: flex-start; }
.chat-pane .reply-bubble { margin: 0; padding: 10px 15px; border-radius: 20px; font-size: .95rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; animation: none; border: 0; box-shadow: none; }
.chat-row.is-mine .reply-bubble { background: #082A30; color: #fff; border-bottom-right-radius: 7px; }
.chat-row.is-theirs .reply-bubble { background: #DDF4F6; color: var(--tq-text); border-bottom-left-radius: 7px; }
.chat-time { font-size: .72rem; color: #7E9CA1; padding: 0 6px; }
.chat-pane .msg-detail-waiting { margin-top: 6px; background: #EEF6F7; }
.chat-composer { display: flex; align-items: flex-end; gap: 10px; margin-top: 14px; padding: 8px 8px 8px 18px; border-radius: 26px; background: #EEF6F7; box-shadow: inset 0 0 0 1px rgba(4, 38, 44, .1); transition: box-shadow .15s ease, background .15s ease; }
.chat-composer:focus-within { background: #fff; box-shadow: inset 0 0 0 1.5px #6CDAE7; }
.chat-composer textarea { flex: 1; min-width: 0; margin: 0; padding: 9px 0; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; resize: none; font: inherit; font-size: 16px; line-height: 1.4; color: var(--tq-text); max-height: 140px; }
.chat-composer .chat-send { flex: none; margin: 0; min-height: 40px; padding: 0 20px; border-radius: 999px; }
.chat-error { margin: 8px 6px 0; color: #B3261E; font-size: .86rem; }
@media (max-width: 720px) {
  .chat-pane { padding: 16px 14px 14px; border-radius: 22px; }
  .chat-row { max-width: 90%; }
  .chat-log { max-height: 46vh; }
}

/* ===== Demo banner: shown to demo accounts at the top of the restaurant dashboard / onboarding ===== */
.demo-banner { display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 20px; background: #DDF4F6; color: var(--tq-text); box-shadow: inset 0 -1.5px 0 #6CDAE7; font-size: .9rem; line-height: 1.4; }
.demo-banner p { margin: 0; flex: 1; min-width: 0; }
.demo-banner-star { flex: none; width: 16px; height: 16px; background: var(--tq-text); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.demo-banner-exit { flex: none; padding: 6px 14px; border: 0; border-radius: 999px; background: #082A30; color: #fff; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.demo-banner-exit:hover { background: #0A4A55; }
@media (max-width: 720px) { .demo-banner { padding: 10px 14px; align-items: flex-start; } .demo-banner-star { margin-top: 3px; } }
/* ===== "The Solution" (home): a more realistic phone, full app screens, and screen-to-screen transitions =====
   Screens are built in js/marketing.js (rvScreen) and driven by wireHomeMotion: the active step swaps the screen
   (sliding in from the direction of travel), the phone turns with the scroll, and each screen plays a short scene. */
:root { --rv-fallback-gold: #F5B935; --rv-fallback-silver: #AEBFCB; --rv-fallback-bronze: #E48A52; }
.rv-seq-sticky { perspective: 1700px; }
.rv-phone-wrap { position: relative; z-index: 2; }
.rv-phone { width: 330px; height: 676px; padding: 10px; border-radius: 58px; background: linear-gradient(145deg, #55626a 0%, #1d262a 24%, #0c1215 56%, #2c373c 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .2), inset 0 0 0 4.5px #04080a, 0 0 0 1px rgba(4, 38, 44, .55), 0 80px 110px -46px rgba(4, 38, 44, .8), 0 34px 54px -34px rgba(4, 38, 44, .55);
  transform: rotateX(var(--rx, 4deg)) rotateY(var(--ry, -16deg)) rotateZ(var(--rz, -4deg)); transform-style: preserve-3d; transition: transform .45s cubic-bezier(.2, .8, .2, 1); --enter: 14%; --exit: -14%; }
.rv-phone[data-dir="back"] { --enter: -14%; --exit: 14%; }
.rv-phone > i[class^="rv-btn-"] { position: absolute; width: 3.5px; border-radius: 2px; background: linear-gradient(90deg, #2a3438, #5a676d); }
.rv-btn-l1 { left: -3px; top: 104px; height: 26px; } .rv-btn-l2 { left: -3px; top: 160px; height: 52px; } .rv-btn-l3 { left: -3px; top: 224px; height: 52px; }
.rv-btn-r { right: -3px; top: 188px; height: 84px; transform: scaleX(-1); }
.rv-phone-notch { top: 20px; width: 98px; height: 29px; background: #020405; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); z-index: 8; }
.rv-phone-notch::after { content: ''; position: absolute; right: 11px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2f4a63 0%, #0a1620 60%); }
.rv-phone-glass { position: absolute; inset: 10px; z-index: 9; border-radius: 48px; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .08) 100%); mix-blend-mode: soft-light; }
.rv-phone .rv-phone-screen { inset: 10px; border-radius: 48px; padding: 0; overflow: hidden; background: #EEF6F7; opacity: 0; visibility: hidden; transform: translateX(var(--exit)) scale(.93); filter: blur(7px);
  transition: opacity .35s ease, transform .55s cubic-bezier(.4, 0, .2, 1), filter .4s ease, visibility 0s linear .55s; }
.rv-phone .rv-phone-screen.rv-screen-on { opacity: 1; visibility: visible; transform: none; filter: none; transition: none; animation: rv-scr-in .8s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes rv-scr-in { from { opacity: 0; transform: translateX(var(--enter)) scale(.93); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }

/* glow behind the phone shifts with the step; callout chips pop in around it */
.rv-glow { position: absolute; z-index: 0; left: 50%; top: 50%; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; opacity: 0; transition: opacity .9s ease; pointer-events: none; }
.rv-glow.g0 { background: radial-gradient(circle, rgba(108, 218, 231, .75) 0%, rgba(108, 218, 231, 0) 66%); }
.rv-glow.g1 { background: radial-gradient(circle, rgba(245, 185, 53, .42) 0%, rgba(108, 218, 231, .22) 38%, rgba(108, 218, 231, 0) 68%); }
.rv-glow.g2 { background: radial-gradient(circle, rgba(11, 101, 115, .36) 0%, rgba(108, 218, 231, .2) 42%, rgba(108, 218, 231, 0) 70%); }
.rv-seq-sticky[data-step="0"] .g0, .rv-seq-sticky[data-step="1"] .g1, .rv-seq-sticky[data-step="2"] .g2 { opacity: 1; }
.rv-float { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px 9px 13px; border-radius: 99px; background: #fff; color: var(--rv-ink); font-weight: 800; font-size: .84rem; letter-spacing: -.01em; white-space: nowrap;
  border: 1.5px solid var(--rv-ink); box-shadow: 4px 5px 0 0 rgba(8, 42, 48, .92); opacity: 0; transform: translateY(14px) scale(.8) rotate(0deg); transition: opacity .35s ease, transform .6s cubic-bezier(.34, 1.56, .64, 1); pointer-events: none; }
.rv-float b { font-size: 1.05rem; letter-spacing: -.03em; }
.rv-float svg { color: #0B6573; }
.rv-f-a { left: 2%; top: 21%; } .rv-f-b { right: 0%; bottom: 25%; }
.rv-seq-sticky[data-step="0"] .rv-float[data-for="0"], .rv-seq-sticky[data-step="1"] .rv-float[data-for="1"], .rv-seq-sticky[data-step="2"] .rv-float[data-for="2"] { opacity: 1; transition-delay: .35s; }
.rv-seq-sticky .rv-f-a[data-for] { }
.rv-seq-sticky[data-step] .rv-f-a { --r: -4deg; } .rv-seq-sticky[data-step] .rv-f-b { --r: 3deg; }
.rv-seq-sticky[data-step="0"] .rv-float[data-for="0"], .rv-seq-sticky[data-step="1"] .rv-float[data-for="1"], .rv-seq-sticky[data-step="2"] .rv-float[data-for="2"] { transform: translateY(0) scale(1) rotate(var(--r, 0deg)); }
.rv-seq-sticky[data-step="0"] .rv-float[data-for="0"].rv-f-b { transition-delay: .55s; } .rv-seq-sticky[data-step="1"] .rv-float[data-for="1"].rv-f-b { transition-delay: .55s; } .rv-seq-sticky[data-step="2"] .rv-float[data-for="2"].rv-f-b { transition-delay: .55s; }
@media (max-width: 1180px) { .rv-float { display: none; } }

/* ---- screen anatomy ---- */
.rv-phone-screen .rv-sc { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 600px; color: var(--rv-ink); font-size: 12.5px; line-height: 1.35; background: #EEF6F7; }
.rv-sc-status { flex: none; position: relative; z-index: 4; height: 48px; padding: 17px 27px 0; display: flex; justify-content: space-between; align-items: flex-start; font-weight: 800; font-size: 12.5px; letter-spacing: -.01em; }
.rv-sc-sig { display: inline-flex; align-items: center; gap: 3px; margin-top: 1px; }
.rv-sc-sig i { width: 3px; border-radius: 1px; background: currentColor; } .rv-sc-sig i:nth-child(1) { height: 4px; } .rv-sc-sig i:nth-child(2) { height: 6px; } .rv-sc-sig i:nth-child(3) { height: 8px; } .rv-sc-sig i:nth-child(4) { height: 10px; }
.rv-sc-sig svg { margin: 0 2px 0 3px; }
.rv-sc-batt { position: relative; width: 23px; height: 11px; margin-left: 2px; padding: 1.3px; border: 1.4px solid currentColor; border-radius: 4px; opacity: .92; }
.rv-sc-batt::after { content: ''; position: absolute; right: -4px; top: 2.5px; width: 2px; height: 4px; border-radius: 0 2px 2px 0; background: currentColor; }
.rv-sc-batt u { display: block; width: 78%; height: 100%; border-radius: 1.5px; background: currentColor; }
.rv-sc-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 4px 14px 0; overflow: hidden; }
.rv-sc-tabs { flex: none; display: flex; justify-content: space-around; padding: 9px 10px 26px; background: rgba(255, 255, 255, .94); border-top: 1px solid rgba(8, 42, 48, .08); }
.rv-sc-tabs span { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 56px; color: rgba(8, 42, 48, .45); }
.rv-sc-tabs span.on { color: var(--rv-ink); }
.rv-sc-tabs span.on svg { filter: drop-shadow(0 0 0 transparent); }
.rv-sc-tabs em { font-style: normal; font-weight: 800; font-size: .62rem; letter-spacing: .01em; }
.rv-sc-home { position: absolute; z-index: 5; bottom: 8px; left: 50%; width: 112px; height: 4.5px; margin-left: -56px; border-radius: 99px; background: var(--rv-ink); opacity: .85; }
.rv-sc-top { display: flex; justify-content: space-between; align-items: flex-end; padding: 6px 2px 0; }
.rv-sc-top small { display: block; font-family: var(--font-mono, monospace); font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #0B6573; }
.rv-sc-top h4 { margin: 3px 0 0; font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; letter-spacing: -.045em; line-height: 1; }
.rv-sc-bell { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px rgba(8, 42, 48, .1); }
.rv-sc-bell i { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--rv-hot, #FF6B4A); box-shadow: 0 0 0 2px #fff; }
.rv-sc-chip-ok { padding: 6px 12px; border-radius: 99px; background: #DDF4F6; box-shadow: inset 0 0 0 1.5px #6CDAE7; font-weight: 800; font-size: .7rem; }
.rv-sc-chips { display: flex; gap: 6px; }
.rv-sc-chips span { padding: 6px 12px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px rgba(8, 42, 48, .1); font-weight: 700; font-size: .72rem; white-space: nowrap; }
.rv-sc-chips span.on { background: #DDF4F6; box-shadow: inset 0 0 0 1.5px #6CDAE7; }
.rv-sc-feed { display: flex; flex-direction: column; gap: 10px; }
.rv-sc-card { flex: none; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 1px 0 rgba(8, 42, 48, .06), 0 14px 22px -16px rgba(8, 42, 48, .45); }
.rv-sc-card.is-hot { box-shadow: 0 0 0 2px var(--c), 0 14px 22px -16px rgba(8, 42, 48, .45); }
.rv-sc-card .im { position: relative; height: 92px; }
.rv-sc-card .im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-sc-card .tier { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 4px; border-radius: 99px; background: rgba(255, 255, 255, .94); font-weight: 800; font-size: .66rem; }
.rv-sc-card .tier .fd-stamp { transform: scale(.72); margin: -4px 0 -4px -4px; }
.rv-sc-card .left { position: absolute; right: 8px; top: 8px; padding: 3px 9px; border-radius: 99px; background: rgba(255, 255, 255, .94); font-weight: 800; font-size: .64rem; }
.rv-sc-card .bd { padding: 9px 12px 11px; }
.rv-sc-card .t b { display: block; font-size: .86rem; letter-spacing: -.02em; } .rv-sc-card .t span { font-size: .72rem; color: rgba(8, 42, 48, .6); }
.rv-sc-card .r { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.rv-sc-card .price b, .rv-sc-price b { font-family: var(--font-head); font-weight: 800; letter-spacing: -.045em; } .rv-sc-card .price b { font-size: 1.2rem; }
.rv-sc-card .price s, .rv-sc-price s { margin-left: 5px; opacity: .45; font-size: .76rem; }
.rv-sc .clk { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; background: var(--rv-ink); color: #6CDAE7; font-family: var(--font-mono, monospace); font-weight: 700; font-size: .66rem; font-variant-numeric: tabular-nums; }
.rv-sc .clk i { width: 6px; height: 6px; border-radius: 50%; background: #6CDAE7; box-shadow: 0 0 0 0 rgba(108, 218, 231, .7); animation: rv-clk-ping 1.6s ease-out infinite; }
@keyframes rv-clk-ping { 70% { box-shadow: 0 0 0 6px rgba(108, 218, 231, 0); } 100% { box-shadow: 0 0 0 0 rgba(108, 218, 231, 0); } }
.rv-sc-card .bar, .rv-sc-bar { height: 5px; margin-top: 8px; border-radius: 99px; background: rgba(8, 42, 48, .1); overflow: hidden; }
.rv-sc-card .bar i { display: block; height: 100%; border-radius: inherit; background: var(--c); transform-origin: left; }

/* screen 2: the drop */
.rv-sc-1 .rv-sc-status { position: absolute; left: 0; right: 0; top: 0; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
.rv-sc-hero { position: relative; flex: none; height: 232px; overflow: hidden; }
.rv-sc-hero img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); }
.rv-sc-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 38, 44, .45) 0%, rgba(4, 38, 44, 0) 34%, rgba(4, 38, 44, 0) 66%, rgba(4, 38, 44, .4) 100%); }
.rv-sc-hero .back { position: absolute; z-index: 2; top: 54px; left: 14px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .92); }
.rv-sc-hero .tier { position: absolute; z-index: 2; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 5px; border-radius: 99px; background: rgba(255, 255, 255, .95); font-weight: 800; font-size: .72rem; }
.rv-sc-hero .tier .fd-stamp { transform: scale(.78); margin: -4px 0 -4px -3px; }
.rv-sc-hero .off { position: absolute; z-index: 2; right: 12px; bottom: 12px; padding: 5px 12px; border-radius: 99px; background: var(--c); color: var(--rv-ink); font-weight: 800; font-size: .74rem; }
.rv-sc-detail { gap: 9px; padding-top: 12px; }
.rv-sc-detail h4 { margin: 0; font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; letter-spacing: -.04em; line-height: 1.05; }
.rv-sc-detail p { margin: 3px 0 0; font-size: .74rem; color: rgba(8, 42, 48, .6); }
.rv-sc-price { display: flex; align-items: baseline; gap: 2px; } .rv-sc-price b { font-size: 2.1rem; line-height: 1; } .rv-sc-price span { margin-left: auto; font-weight: 800; font-size: .72rem; }
.rv-sc-lad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rv-sc-lad div { display: flex; justify-content: space-between; align-items: center; padding: 7px 9px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px rgba(8, 42, 48, .1); font-size: .7rem; }
.rv-sc-lad div span { font-weight: 700; opacity: .6; } .rv-sc-lad div b { font-weight: 800; }
.rv-sc-lad div.on { background: var(--rv-ink); color: #fff; box-shadow: none; } .rv-sc-lad div.on span { opacity: .75; }
.rv-sc-row { display: flex; justify-content: space-between; align-items: center; font-size: .74rem; font-weight: 700; }
.rv-sc-bar { margin-top: 0; } .rv-sc-bar i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--c); transform-origin: left; transform: scaleX(.5); }
.rv-sc-pay { position: relative; flex: none; height: 46px; margin-top: 2px; border-radius: 99px; overflow: hidden; }
.rv-sc-pay .pay, .rv-sc-pay .done { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 800; font-size: .9rem; }
.rv-sc-pay .pay { background: var(--rv-ink); color: #fff; }
.rv-sc-pay .done { background: #6CDAE7; color: var(--rv-ink); transform: translateY(105%); }
.rv-sc-pay .tap { position: absolute; z-index: 2; right: 26%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0; border-radius: 50%; background: rgba(255, 255, 255, .5); box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); opacity: 0; }
.rv-sc-notif { position: absolute; z-index: 7; left: 9px; right: 9px; top: 50px; display: flex; gap: 10px; padding: 10px 12px; border-radius: 22px; background: rgba(255, 255, 255, .96); box-shadow: 0 18px 34px -14px rgba(4, 38, 44, .6), 0 0 0 1px rgba(8, 42, 48, .06); transform: translateY(-190%) scale(.96); opacity: 0; pointer-events: none; }
.rv-sc-notif .app { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--rv-ink); color: #6CDAE7; }
.rv-sc-notif .app svg { width: 18px; height: 18px; }
.rv-sc-notif b { display: flex; justify-content: space-between; font-size: .76rem; } .rv-sc-notif small { font-weight: 600; opacity: .5; font-size: .66rem; }
.rv-sc-notif div span { display: block; margin-top: 1px; font-size: .72rem; line-height: 1.3; color: rgba(8, 42, 48, .78); }

/* screen 3: the pass */
.rv-sc-2 .rv-sc-body { gap: 11px; }
.rv-sc-ticket { position: relative; flex: none; border-radius: 26px; background: #fff; overflow: hidden; box-shadow: 0 0 0 1px rgba(8, 42, 48, .06), 0 20px 30px -20px rgba(8, 42, 48, .55); }
.rv-sc-ticket .top { padding: 15px 18px 13px; border-top: 7px solid var(--c); }
.rv-sc-ticket .top small { display: flex; align-items: center; gap: 5px; font-family: var(--font-mono, monospace); font-weight: 700; font-size: .6rem; letter-spacing: .14em; color: #0B6573; }
.rv-sc-ticket .top small .fd-stamp { transform: scale(.7); margin: -5px 0 -5px -6px; }
.rv-sc-ticket h5 { margin: 5px 0 0; font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; letter-spacing: -.035em; }
.rv-sc-ticket .top p { margin: 2px 0 0; font-size: .74rem; color: rgba(8, 42, 48, .6); }
.rv-sc-ticket .cut { position: relative; height: 0; margin: 0 16px; border-top: 2px dashed rgba(8, 42, 48, .16); }
.rv-sc-ticket .cut::before, .rv-sc-ticket .cut::after { content: ''; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: #EEF6F7; }
.rv-sc-ticket .cut::before { left: -26px; } .rv-sc-ticket .cut::after { right: -26px; }
.rv-sc-ticket .qrwrap { position: relative; display: grid; place-items: center; padding: 16px 0 8px; }
.rv-sc-ticket .qr { position: relative; width: 154px; height: 154px; padding: 11px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(8, 42, 48, .14); color: var(--rv-ink); overflow: hidden; }
.rv-sc-ticket .qr svg { width: 100%; height: 100%; display: block; }
.rv-sc-ticket .scan { position: absolute; left: 0; right: 0; top: 0; height: 3px; opacity: 0; background: linear-gradient(90deg, rgba(108, 218, 231, 0), #6CDAE7 20%, #6CDAE7 80%, rgba(108, 218, 231, 0)); box-shadow: 0 0 14px 3px rgba(108, 218, 231, .8); }
.rv-sc-ticket .ok { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 62px; height: 62px; margin: -23px 0 0 -31px; border-radius: 50%; background: #6CDAE7; color: var(--rv-ink); box-shadow: 0 0 0 6px rgba(255, 255, 255, .9), 0 14px 24px -10px rgba(4, 38, 44, .6); opacity: 0; transform: scale(.4); }
.rv-sc-ticket .meta { padding: 4px 16px 15px; text-align: center; }
.rv-sc-ticket .meta b { display: block; font-family: var(--font-mono, monospace); font-size: .86rem; letter-spacing: .1em; }
.rv-sc-ticket .meta > span { display: block; margin-top: 3px; font-size: .7rem; color: rgba(8, 42, 48, .6); }
.rv-sc-ticket .meta .rv-clk { font-family: var(--font-mono, monospace); font-weight: 700; color: var(--rv-ink); font-variant-numeric: tabular-nums; }
.rv-sc-saved { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border-radius: 18px; background: #DDF4F6; box-shadow: inset 0 0 0 1.5px #6CDAE7; font-weight: 800; font-size: .76rem; }
.rv-sc-saved span { display: inline-flex; align-items: center; gap: 6px; } .rv-sc-saved b { font-family: var(--font-head); font-size: 1.1rem; letter-spacing: -.03em; }
.rv-sc-acts { display: flex; gap: 8px; } .rv-sc-acts span { flex: 1; padding: 10px 6px; border-radius: 99px; text-align: center; background: #fff; box-shadow: inset 0 0 0 1px rgba(8, 42, 48, .12); font-weight: 800; font-size: .72rem; }

/* ---- scenes: each screen plays when it becomes active ---- */
.rv-screen-on .rv-in { animation: rv-sc-rise .7s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(.18s + var(--i, 0) * .09s); }
@keyframes rv-sc-rise { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: none; } }
.rv-screen-on .rv-sc-card .bar i { animation: rv-fill 1s cubic-bezier(.16, 1, .3, 1) .7s both; }
@keyframes rv-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.rv-screen-on .rv-sc-feed { animation: rv-drift 4.8s cubic-bezier(.45, 0, .2, 1) 1.9s both; }
@keyframes rv-drift { to { transform: translateY(-46px); } }
.rv-screen-on .rv-sc-card.is-hot { animation: rv-sc-rise .7s cubic-bezier(.16, 1, .3, 1) both, rv-press 1s ease-in-out 1.2s both; animation-delay: calc(.18s + var(--i, 0) * .09s), 1.2s; }
@keyframes rv-press { 0%, 100% { transform: none; } 45% { transform: scale(.965); } }
.rv-screen-on .rv-sc-hero img { animation: rv-kenburns 7s ease-out both; }
@keyframes rv-kenburns { from { transform: scale(1.14); } to { transform: scale(1.02); } }
.rv-screen-on .rv-sc-bar i { animation: rv-bar75 1.2s cubic-bezier(.16, 1, .3, 1) .8s both; }
@keyframes rv-bar75 { from { transform: scaleX(.12); } to { transform: scaleX(.75); } }
.rv-screen-on .rv-sc-pay .tap { animation: rv-tap 1.1s ease-out 1.7s both; }
@keyframes rv-tap { 0% { opacity: 0; transform: scale(1.6); } 25% { opacity: 1; transform: scale(1); } 60% { opacity: 1; transform: scale(.82); box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); } 100% { opacity: 0; transform: scale(1.2); box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); } }
.rv-screen-on .rv-sc-pay { animation: rv-sc-rise .7s cubic-bezier(.16, 1, .3, 1) both, rv-btnpress .5s ease-in-out 2.15s both; animation-delay: calc(.18s + var(--i, 0) * .09s), 2.15s; }
@keyframes rv-btnpress { 40% { transform: scale(.96); } }
.rv-screen-on .rv-sc-pay .pay { animation: rv-pay-out .45s ease-in 2.6s both; }
@keyframes rv-pay-out { to { transform: translateY(-105%); } }
.rv-screen-on .rv-sc-pay .done { animation: rv-done-in .55s cubic-bezier(.16, 1, .3, 1) 2.7s both; }
@keyframes rv-done-in { from { transform: translateY(105%); } to { transform: none; } }
.rv-screen-on .rv-sc-notif { animation: rv-notif 4.6s cubic-bezier(.16, 1, .3, 1) 3.5s both; }
@keyframes rv-notif { 0% { opacity: 0; transform: translateY(-190%) scale(.96); } 12%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-190%) scale(.96); } }
.rv-screen-on .rv-sc-ticket .scan { animation: rv-scan 1.15s ease-in-out .95s 2 both; }
@keyframes rv-scan { 0% { top: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: calc(100% - 3px); opacity: 0; } }
.rv-screen-on .rv-sc-ticket .qr svg { animation: rv-qr-dim .5s ease 3.3s both; }
@keyframes rv-qr-dim { to { opacity: .16; filter: blur(1.5px); } }
.rv-screen-on .rv-sc-ticket .ok { animation: rv-pop .6s cubic-bezier(.34, 1.56, .64, 1) 3.3s both; }
@keyframes rv-pop { to { opacity: 1; transform: scale(1); } }
.rv-screen-on .rv-sc-saved { animation: rv-sc-rise .7s cubic-bezier(.16, 1, .3, 1) both; animation-delay: 3.5s; }

/* inline (mobile) screens: the same screens, static, no phone chrome */
.rv-step-shot .rv-phone-screen { padding: 0 !important; overflow: hidden; background: #EEF6F7; }
.rv-step-shot .rv-phone-screen .rv-sc { min-height: 580px; }
.rv-step-shot .rv-sc-notif, .rv-step-shot .rv-sc-ticket .scan, .rv-step-shot .rv-sc-ticket .ok { display: none; }
.rv-step-shot .rv-sc-pay .tap { display: none; }

@media (prefers-reduced-motion: reduce) {
  .rv-phone, .rv-phone .rv-phone-screen, .rv-float, .rv-glow { transition: none !important; }
  .rv-phone .rv-phone-screen.rv-screen-on, .rv-screen-on .rv-in, .rv-screen-on .rv-sc *, .rv-sc .clk i { animation: none !important; }
  .rv-sc-notif, .rv-sc-ticket .scan, .rv-sc-ticket .ok, .rv-sc-pay .tap { display: none; }
}
.rv-sc-saved b { white-space: nowrap; }
.rv-sc-tabs span.on svg { color: var(--rv-ink); }

/* tuning after the first pass: a fuller crossfade between screens, and callout chips kept clear of the screen content */
.rv-phone .rv-phone-screen { filter: blur(4px); transition: opacity .42s ease-in .06s, transform .55s cubic-bezier(.4, 0, .2, 1), filter .45s ease, visibility 0s linear .6s; z-index: 1; }
.rv-phone .rv-phone-screen.rv-screen-on { z-index: 2; animation-duration: .75s; }
@keyframes rv-scr-in { 0% { opacity: 0; transform: translateX(var(--enter)) scale(.94); filter: blur(5px); } 30% { opacity: 1; } 100% { opacity: 1; transform: none; filter: blur(0); } }
.rv-f-a { left: -2%; top: 20%; } .rv-f-b { right: -7%; bottom: 31%; }
/* content starts rising while the screen is still sliding in, so a swap never shows an empty screen */
.rv-screen-on .rv-in { animation-duration: .6s; animation-delay: calc(.02s + var(--i, 0) * .07s); }
.rv-screen-on .rv-sc-card.is-hot { animation-delay: calc(.02s + var(--i, 0) * .07s), 1.2s; }
.rv-screen-on .rv-sc-pay { animation-delay: calc(.02s + var(--i, 0) * .07s), 2.15s; }
@keyframes rv-sc-rise { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.rv-phone .rv-phone-screen.rv-screen-out:not(.rv-screen-on) { visibility: visible; z-index: 1; animation: rv-scr-out .55s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes rv-scr-out { from { opacity: 1; transform: none; filter: blur(0); } to { opacity: 0; transform: translateX(var(--exit)) scale(.93); filter: blur(5px); } }

/* Header "Log In" on the white pill: hovering used to keep dark text on a dark fill (the hover colour from the turquoise button
   rule beat the cream text, while the header rule darkened the fill). Hover now lifts to a lighter teal with white text. */
.rv-header .btn-primary:hover { background: #0A4A55; color: #fff; border-color: #0A4A55; }
.rv-header--hero:not(.scrolled) .btn-primary:hover { background: #fff; color: var(--tq-text); border-color: var(--tq-text); }

/* ===== Home hero phones: choreographed entrance, floating, 3D tilt toward the cursor, scroll fan, and live screens =====
   Motion is built from independent properties so nothing fights: `translate`/`rotate`/`scale` for the entrance and the fan,
   `transform` for parallax + tilt + float (--fy). Wired in wireHomeMotion (marketing.js); all of it is off for reduced motion. */
@property --fy { syntax: '<length>'; inherits: false; initial-value: 0px; }
.rv-hp { perspective: 1600px; --tx: 0deg; --ty: 0deg; }
.rv-hp-phone { --k: .4; --spread: 0px;
  transform: translate3d(calc(var(--px, 0px) + var(--sp, 0) * var(--spread)), calc(var(--py, 0px) + var(--fy, 0px)), 0) rotateX(calc(var(--tx) * var(--k))) rotateY(calc(var(--ty) * var(--k)));
  transform-style: preserve-3d; transition: rotate .7s var(--rv-ease), transform .3s cubic-bezier(.2, .8, .2, 1);
  animation: rv-hp-in 1.5s cubic-bezier(.16, 1, .3, 1) both, rv-hp-float 7s ease-in-out infinite; }
.rv-hp-feed { --spread: -70px; --ex: -170px; --er: -38deg; rotate: calc((-7 - var(--sp, 0) * 5) * 1deg); animation-delay: .1s, 2s; }
.rv-hp-detail { --k: .7; --ex: 0px; --er: 0deg; scale: calc(1.05 + var(--sp, 0) * .035); animation-delay: .35s, 2.4s; animation-duration: 1.5s, 6s; }
.rv-hp-pass { --spread: 70px; --ex: 170px; --er: 38deg; rotate: calc((7 + var(--sp, 0) * 5) * 1deg); animation-delay: .6s, 2.8s; animation-duration: 1.5s, 8s; }
/* hovering the phones does nothing: the original hover tilt is neutralised (same rotation as the resting state) */
.rv-hp:hover .rv-hp-feed { rotate: calc((-7 - var(--sp, 0) * 5) * 1deg); } .rv-hp:hover .rv-hp-pass { rotate: calc((7 + var(--sp, 0) * 5) * 1deg); }
@keyframes rv-hp-in { from { opacity: 0; translate: var(--ex, 0px) 330px; rotate: var(--er, 0deg); scale: .76; filter: blur(10px); } 55% { filter: blur(0); } }
@keyframes rv-hp-float { 0%, 100% { --fy: 0px; } 50% { --fy: -13px; } }

/* a glass sheen drifts across each screen now and then */
.rv-hp-screen::after { content: ''; position: absolute; inset: 0; z-index: 7; pointer-events: none; background: linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, .34) 49%, transparent 60%); transform: translateX(-130%); animation: rv-hp-shine 8s ease-in-out 3s infinite; }
.rv-hp-detail .rv-hp-screen::after { animation-delay: 4.2s; } .rv-hp-pass .rv-hp-screen::after { animation-delay: 5.4s; }
@keyframes rv-hp-shine { 0% { transform: translateX(-130%); } 22%, 100% { transform: translateX(130%); } }

/* screens come alive */
.rv-hp-card { animation: rv-hp-cardin .9s var(--rv-ease) both; animation-delay: 1s; }
.rv-hp-card + .rv-hp-card { animation-delay: 1.18s; }
@keyframes rv-hp-cardin { from { opacity: 0; transform: translateY(26px) scale(.96); } }
.rv-hp-feed .rv-hp-card:first-of-type { animation: rv-hp-cardin .9s var(--rv-ease) 1s both, rv-hp-ring 3.8s ease-in-out 2.6s infinite; }
@keyframes rv-hp-ring { 0%, 100% { box-shadow: 0 0 0 1px rgba(8, 42, 48, .05), 0 12px 20px -16px rgba(8, 42, 48, .4), 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 1px rgba(8, 42, 48, .05), 0 12px 20px -16px rgba(8, 42, 48, .4), 0 0 0 4px rgba(226, 163, 42, .35); } }
.rv-hp .bar i { position: relative; overflow: hidden; transform-origin: left; animation: rv-hp-fill 1.3s cubic-bezier(.16, 1, .3, 1) 1.4s both; transition: width .9s cubic-bezier(.16, 1, .3, 1); }
.rv-hp .bar i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); transform: translateX(-100%); animation: rv-hp-bar-shine 2.8s ease-in-out 2.8s infinite; }
@keyframes rv-hp-fill { from { transform: scaleX(0); } }
@keyframes rv-hp-bar-shine { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
.rv-hp .clk { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.rv-hp .clk::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--rv-hot, #FF6B4A); box-shadow: 0 0 0 0 rgba(255, 107, 74, .6); animation: rv-hp-live 1.6s ease-out infinite; }
@keyframes rv-hp-live { 70% { box-shadow: 0 0 0 6px rgba(255, 107, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 107, 74, 0); } }
.rv-hp-detail .lad div { transition: background .45s ease, border-color .45s ease, box-shadow .45s ease; }
.rv-hp-detail .rv-hp-photo .tier i, .rv-hp-detail .rv-hp-photo .off { transition: background .45s ease; }
.rv-hp-detail .rv-hp-photo .off { background: var(--c); }
.rv-hp-ticket .top { position: relative; overflow: hidden; }
.rv-hp-ticket .top::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .5) 50%, transparent 65%); transform: translateX(-130%); animation: rv-hp-foil 6s ease-in-out 3s infinite; }
@keyframes rv-hp-foil { 0% { transform: translateX(-130%); } 30%, 100% { transform: translateX(130%); } }
.rv-hp-ticket .qr { position: relative; overflow: hidden; border-radius: 12px; }
.rv-hp-ticket .scan { position: absolute; left: 6%; right: 6%; top: 6%; height: 2px; border-radius: 2px; opacity: 0; background: #6CDAE7; box-shadow: 0 0 8px 1px rgba(108, 218, 231, .8); animation: rv-hp-scan 5.4s ease-in-out 2.6s infinite; }
@keyframes rv-hp-scan { 0% { top: 6%; opacity: 0; } 6% { opacity: 1; } 30% { top: 92%; opacity: 1; } 34%, 100% { top: 92%; opacity: 0; } }



@media (prefers-reduced-motion: reduce) {
  .rv-hp-phone, .rv-hp-card, .rv-hp .bar i, .rv-hp .bar i::after, .rv-hp .clk::before, .rv-hp-screen::after, .rv-hp-ticket .top::after, .rv-hp-ticket .scan, .is-story * { animation: none !important; transition: none !important; }
  .rv-hp-ticket .scan { display: none; }
}
@media (max-width: 960px) { .rv-hp-feed { --spread: -30px; } .rv-hp-pass { --spread: 30px; } }
@media (max-width: 640px) { .rv-hp-feed, .rv-hp-pass { --spread: 0px; } }
/* keep the fanned-out phones inside the viewport on laptop-width screens */
@media (max-width: 1180px) { .rv-hp-feed { --spread: -34px; } .rv-hp-pass { --spread: 34px; } }
@media (max-width: 960px) { .rv-hp-feed { --spread: -16px; } .rv-hp-pass { --spread: 16px; } }
@media (max-width: 640px) { .rv-hp-feed, .rv-hp-pass { --spread: 0px; } }
@media (min-width: 961px) and (max-width: 1180px) { .rv-hp { zoom: .92; } .rv-hp-feed { --spread: -20px; } .rv-hp-pass { --spread: 20px; } }

/* ===== Home hero phones: the story loop (tap -> open -> claim -> pass -> scan), driven by classes from wireHomeMotion =====
   Everything staged lives under .is-story, so a page that reuses these phones without the script (the login page) shows the finished state. */
.rv-hp::after { content: ''; position: absolute; z-index: 1; left: 50%; top: 340px; width: 800px; height: 540px; margin: -270px 0 0 -400px; border-radius: 50%; pointer-events: none; filter: blur(8px);
  background: radial-gradient(closest-side at 30% 40%, rgba(255, 255, 255, .55), transparent 70%), radial-gradient(closest-side at 72% 60%, rgba(11, 101, 115, .28), transparent 72%); animation: rv-hp-aurora 12s ease-in-out infinite alternate; }
@keyframes rv-hp-aurora { from { transform: translate3d(-3%, -2%, 0) rotate(-4deg) scale(.96); } to { transform: translate3d(3%, 3%, 0) rotate(5deg) scale(1.06); } }
.rv-hp-screen { transition: opacity .45s ease, filter .9s ease, transform 1s cubic-bezier(.16, 1, .3, 1); }
.is-reset .rv-hp-screen { opacity: 0; }

/* beat 1: a finger taps the Gold card */
.rv-hp-card .tap, .ctaw .tap { position: absolute; z-index: 5; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(8, 42, 48, .24); box-shadow: 0 0 0 0 rgba(8, 42, 48, .25); opacity: 0; pointer-events: none; }
.rv-hp-card .tap { left: 70%; top: 58%; } .ctaw .tap { left: 74%; top: 50%; background: rgba(255, 255, 255, .45); box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); }
.is-story.beat-1 .rv-hp-card .tap, .is-story.beat-3 .ctaw .tap { animation: rv-hp-tap 1s ease-out both; }
@keyframes rv-hp-tap { 0% { opacity: 0; transform: translate(34px, 46px) scale(1.5); } 35% { opacity: 1; transform: translate(0, 0) scale(1); } 55% { opacity: 1; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.1); box-shadow: 0 0 0 28px rgba(8, 42, 48, 0); } }
.is-story.beat-1 .rv-hp-card-gold { animation: rv-hp-press .8s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes rv-hp-press { 0% { transform: none; } 38% { transform: scale(.955); } 100% { transform: none; box-shadow: 0 0 0 3px var(--c), 0 14px 26px -14px rgba(226, 163, 42, .65); } }
.rv-hp-card + .rv-hp-card { transition: opacity .6s ease, filter .6s ease; }
.is-story.beat-2 .rv-hp-card + .rv-hp-card { opacity: .42; filter: saturate(.5); }

/* beat 2: the drop opens on the middle phone (it starts soft and small, like a closed card) */
.is-story:not(.beat-2) .rv-hp-detail .rv-hp-screen { filter: blur(8px) saturate(.45); transform: scale(.95); }
.rv-hp-detail .rv-hp-body { transition: transform 1.1s cubic-bezier(.16, 1, .3, 1) .12s, opacity .6s ease .12s; }
.is-story:not(.beat-2) .rv-hp-detail .rv-hp-body { transform: translateY(48px); opacity: .5; }
.rv-hp-detail .rv-hp-photo img { transition: transform 1.8s cubic-bezier(.16, 1, .3, 1); }
.is-story:not(.beat-2) .rv-hp-detail .rv-hp-photo img { transform: scale(1.28); }
.is-story .rv-hp-detail .price b { font-variant-numeric: tabular-nums; }

/* beats 3-4: Claim is pressed, spins, and locks the spot with a burst */
.rv-hp-body .ctaw { position: relative; }
.rv-hp-body .cta { position: relative; overflow: hidden; display: grid; place-items: center; transition: background .45s ease, color .45s ease; }
.rv-hp-body .cta > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 7px; transition: opacity .3s ease, transform .5s cubic-bezier(.16, 1, .3, 1); }
.rv-hp-body .cta .c-load, .rv-hp-body .cta .c-done { display: none; }
.is-story .rv-hp-body .cta .c-load, .is-story .rv-hp-body .cta .c-done { display: inline-flex; opacity: 0; transform: translateY(12px); }
.is-story .c-load i { width: 6px; height: 6px; margin: 0 2px; border-radius: 50%; background: #fff; animation: rv-hp-dot .7s ease-in-out infinite; } .is-story .c-load i:nth-child(2) { animation-delay: .12s; } .is-story .c-load i:nth-child(3) { animation-delay: .24s; }
@keyframes rv-hp-dot { 50% { transform: translateY(-5px); opacity: .5; } }
.is-story.beat-3 .cta { animation: rv-hp-btnpress .5s ease both; }
@keyframes rv-hp-btnpress { 40% { transform: scale(.94); } }
.is-story.beat-3 .cta .c-claim { opacity: 0; transform: translateY(-12px); } .is-story.beat-3 .cta .c-load { opacity: 1; transform: none; }
.is-story.beat-4 .cta { background: #6CDAE7; color: var(--rv-deep); box-shadow: 0 14px 24px -12px rgba(108, 218, 231, .9); } .is-story.beat-4 .cta .c-load { opacity: 0; transform: translateY(-12px); } .is-story.beat-4 .cta .c-done { opacity: 1; transform: none; }
.rv-hp-body .burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.rv-hp-body .burst i { position: absolute; left: 0; top: 0; width: 13px; height: 13px; margin: -6px; opacity: 0; background: #E2A32A; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.rv-hp-body .burst i:nth-child(even) { background: #6CDAE7; }
.is-story.beat-4 .burst i { animation: rv-hp-burst .95s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes rv-hp-burst { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(.3); } 70% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) rotate(180deg) scale(1.15); } }

/* beat 5: the pass drops into the wallet, the code builds, a scan sweeps it, and the saving pops up */
.rv-hp-slot { position: relative; }
.rv-hp-empty { display: none; position: absolute; left: 14px; right: 14px; top: 6px; bottom: 0; z-index: 1; border-radius: 26px; border: 2px dashed rgba(8, 42, 48, .2); align-content: center; justify-items: center; gap: 10px; color: rgba(8, 42, 48, .45); font-weight: 700; font-size: 12.5px; transition: opacity .5s ease; }
.rv-hp-empty i { display: block; width: 62%; height: 12px; border-radius: 99px; background: linear-gradient(90deg, rgba(8, 42, 48, .06), rgba(8, 42, 48, .14), rgba(8, 42, 48, .06)); background-size: 200% 100%; animation: rv-hp-skel 1.4s linear infinite; } .rv-hp-empty i + i { width: 40%; }
@keyframes rv-hp-skel { to { background-position: -200% 0; } }
.is-story .rv-hp-empty { display: grid; } .is-story.beat-5 .rv-hp-empty { opacity: 0; pointer-events: none; }
.is-story .rv-hp-ticket { position: relative; z-index: 2; transition: transform 1.1s cubic-bezier(.34, 1.45, .64, 1), opacity .5s ease; }
.is-story:not(.beat-5) .rv-hp-ticket { transform: translateY(-86px) scale(.94) rotate(-3deg); opacity: 0; }
.rv-hp-ticket .qr svg { transition: opacity .7s ease .5s, transform .9s cubic-bezier(.16, 1, .3, 1) .5s, filter .9s ease .5s; }
.is-story:not(.beat-5) .rv-hp-ticket .qr svg { opacity: 0; transform: scale(.82); filter: blur(6px); }
.is-story .rv-hp-ticket .scan { animation: none; }
.is-story.beat-5 .rv-hp-ticket .scan { animation: rv-hp-scan1 1.5s ease-in-out 1.5s 1 both; }
@keyframes rv-hp-scan1 { 0% { top: 6%; opacity: 0; } 10% { opacity: 1; } 90% { top: 92%; opacity: 1; } 100% { top: 92%; opacity: 0; } }
.rv-hp-toast { display: none; position: absolute; z-index: 6; left: 16px; right: 16px; bottom: 30px; align-items: center; gap: 8px; padding: 12px 15px; border-radius: 18px; background: var(--rv-deep); color: #fff; font-weight: 800; font-size: 12.5px; box-shadow: 0 18px 30px -14px rgba(4, 38, 44, .75); opacity: 0; transform: translateY(26px) scale(.95); transition: opacity .4s ease, transform .7s cubic-bezier(.34, 1.45, .64, 1); }
.rv-hp-toast svg { color: #6CDAE7; } .rv-hp-toast b { margin-left: auto; color: #6CDAE7; font-family: var(--font-head); letter-spacing: -.02em; }
.is-story .rv-hp-toast { display: flex; } .is-story.beat-5 .rv-hp-toast { opacity: 1; transform: none; transition-delay: 3s; }
@media (prefers-reduced-motion: reduce) { .rv-hp::after { animation: none; } .rv-hp-empty i { animation: none; } }

/* Wander 7-day free trial tag (pricing page + account plan cards) */
.rp-plan-trial, .mini-plan-card .mpc-trial { display: inline-block; margin-top: 10px; padding: 5px 12px; border-radius: 999px; background: #0A4A55; color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .02em; }
.rp-plan-trial { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; }
.mini-plan-card .mpc-price-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mini-plan-card .mpc-trial { margin-top: 0; white-space: nowrap; }

/* Mobile sidebar drawer: 100vh is taller than what Safari actually shows (the
   address bar covers the bottom), so the last item (Sign out) sat under it even
   when scrolled all the way down. Use the real visible height and leave room
   for the browser bar / home indicator. */
@media (max-width: 900px) {
  .dash-sidebar { height: 100vh; height: 100dvh; padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; }
}

/* "The Solution" callout labels: anchored to the phone's own edges (instead of percentages of the whole stage, which let them
   drift far away on wide screens) so each one sits right against the phone it's talking about. */
.rv-seq-sticky .rv-f-a { left: auto; right: calc(50% + 140px); top: 22%; }
.rv-seq-sticky .rv-f-b { right: auto; left: calc(50% + 150px); bottom: 30%; }
@media (max-width: 1360px) {
  .rv-seq-sticky .rv-float { max-width: 150px; white-space: normal; line-height: 1.2; border-radius: 20px; padding: 8px 14px 8px 12px; }
  .rv-seq-sticky .rv-f-b { left: calc(50% + 138px); }
}

/* Closing CTA band + footer read as ONE turquoise block: the band sits flush on the footer (no pale gap, no floating card),
   its gradient ends in exactly the colour the footer starts with, and only its top corners are rounded. */
.rp-cta { margin: 70px 0 0 !important; border-radius: 44px 44px 0 0 !important; background: linear-gradient(180deg, #6CDAE7 0%, #8FE6EE 100%) !important; padding-bottom: 130px; }
@media (max-width: 860px) { .rp-cta { margin: 40px 0 0 !important; border-radius: 30px 30px 0 0 !important; } }

/* Closing CTA buttons: on hover the button fills with the opposite colour, so the arrow has to flip with it
   (it used to stay white-on-white / dark-on-dark and vanish). */
.rp-cta .rv-btn-ink:hover .rv-btn-arrow { background: rgba(4, 38, 44, 0.12); color: var(--tq-text); }
.rp-cta .rv-btn-line-ink:hover .rv-btn-arrow { background: rgba(255, 255, 255, 0.2); color: #fff; }

/* About page: the pale "Where Rovin is today" band runs the full width of the screen and the closing CTA sits directly under it (no gap). */
.rp-today { margin: 0 !important; border-radius: 44px 44px 0 0 !important; }
@media (max-width: 860px) { .rp-today { border-radius: 30px 30px 0 0 !important; } }
/* The banner overlaps the bottom of the pale band by its corner radius, so the band's colour (not the page background) shows
   in the banner's rounded top corners. */
.rp-today + .rp-cta { margin-top: -44px !important; }
@media (max-width: 860px) { .rp-today + .rp-cta { margin-top: -30px !important; } }

/* Pricing: the "What plans unlock" band keeps its full width but gets rounded top and bottom corners. */
.rp-tierprice { border-radius: 44px; }
@media (max-width: 860px) { .rp-tierprice { border-radius: 30px; } }

/* For Restaurants: the "Your dashboard" band runs the full width of the screen (no side margin) and keeps its rounded corners. */
.rp-tools { margin-left: 0 !important; margin-right: 0 !important; }

/* How It Works: the "Watch a price step down" and "Quick answers" bands also run the full width of the screen and keep their rounded corners. */
.rp-descent-sec, .rp-faq { margin-left: 0 !important; margin-right: 0 !important; }
/* Now that these bands are full width, give their content back the side inset the old margin provided. */
.rp-descent-sec, .rp-faq, .rp-tools { padding-left: max(28px, 3.4vw) !important; padding-right: max(28px, 3.4vw) !important; }

/* How It Works: the gap between "Quick answers" and the closing banner is kept, but it is now the same colour as the Quick answers band
   (the band extends down behind the banner) instead of the page background. The banner overlaps the band's bottom by its corner
   radius so the band's colour shows in the banner's rounded corners; the band's own bottom corners are square for the same reason.
   Padding = the band's old bottom padding + the old gap + that overlap, so the spacing looks the same as before. */
.rp-faq { margin-bottom: 0 !important; border-radius: 36px 36px 0 0 !important; padding-bottom: 254px !important; }
.rp-faq + .rp-cta { margin-top: -44px !important; }
@media (max-width: 860px) { .rp-faq { border-radius: 28px 28px 0 0 !important; padding-bottom: 174px !important; } .rp-faq + .rp-cta { margin-top: -30px !important; } }

/* ===== Location & distance fields (diner onboarding + Preferences) ===== */
.loc-block .loc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.loc-block .loc-or { color: var(--tq-soft, #3E5A60); font-size: .86rem; }
.loc-block .loc-zip { width: 120px; min-width: 0; padding: 9px 14px; border-radius: 999px; border: 1.5px solid rgba(4, 38, 44, .22); background: #fff; font: inherit; font-size: .92rem; color: var(--tq-text, #04262C); }
.loc-block .loc-zip:focus { outline: none; border-color: #0B6573; box-shadow: 0 0 0 3px rgba(108, 218, 231, .45); }
.loc-status { margin: 10px 0 0; font-size: .82rem; line-height: 1.45; color: var(--tq-soft, #3E5A60); }
.loc-status.is-error { color: #A8321F; }
.loc-clear { border: 0; background: none; padding: 0 0 0 4px; font: inherit; font-weight: 700; color: #0B6573; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.loc-hint { display: block; margin-top: 6px; font-size: .78rem; color: var(--tq-soft, #3E5A60); }

/* "The Solution" step dots: attached to the phone itself (not the bottom of the whole stage), so they sit the same comfortable distance
   under it on every screen size instead of nearly touching its tilted corner on laptops. */
.rv-phone-wrap .rv-seq-dots { position: absolute; bottom: auto; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 36px; }

/* "The Solution" phone fits the window: on shorter screens the phone (and its step dots, callout labels and spacing) scale down together so
   the phone AND the dots under it are always fully on screen — before, anything under about 850px tall pushed the dots off the bottom.
   --ph-scale is 1 on tall screens and steps down as the window gets shorter. */
.rv-seq-sticky { --ph-scale: 1; min-height: calc(720px * var(--ph-scale)); }
/* `scale` doesn't change the space an element takes up, so the negative margin gives back exactly the space the shrunken phone no longer fills
   (676px tall at full size) — otherwise it would stay parked where the full-size phone was and the dots would still fall off the screen. */
.rv-seq-sticky .rv-phone-wrap { scale: var(--ph-scale); margin-block: calc(-338px * (1 - var(--ph-scale))); }
.rv-seq-sticky { top: max(11vh, 84px); }
@media (max-height: 859px) { .rv-seq-sticky { --ph-scale: .94; } }
@media (max-height: 779px) { .rv-seq-sticky { --ph-scale: .86; } }
@media (max-height: 719px) { .rv-seq-sticky { --ph-scale: .8; } }
@media (max-height: 679px) { .rv-seq-sticky { --ph-scale: .74; } }
@media (max-height: 619px) { .rv-seq-sticky { --ph-scale: .66; } }
@media (max-height: 559px) { .rv-seq-sticky { --ph-scale: .58; } }
/* The callout labels hug the (now scaled) phone's edges. */
.rv-seq-sticky .rv-f-a { right: calc(50% + 165px * var(--ph-scale) - 25px); }
.rv-seq-sticky .rv-f-b { left: calc(50% + 165px * var(--ph-scale) - 15px); }
@media (max-width: 1360px) { .rv-seq-sticky .rv-f-b { left: calc(50% + 165px * var(--ph-scale) - 27px); } }

/* "The Solution" -> "Three tiers": give the section more room below the phone so the phone's shadow and glow have fully faded before the
   next section's edge (before, the next section started ~75px under the phone and sliced the shadow off in a hard line). The phone and
   its shadow are unchanged. */
@media (min-width: 861px) { .rv-seq { padding-bottom: 150px; } }