/* ============================================================
   REVERSE VIDEO SEARCH — Complete Stylesheet
   Converted from React/Tailwind to plain CSS
   ============================================================ */

/* ============================================================
   1. CSS CUSTOM PROPERTIES
   ============================================================ */
/* ============================================================
   0. METRIC-MATCHED FONT FALLBACKS  (Cumulative Layout Shift)
   ============================================================

   Sora and Inter are fetched from Google Fonts ASYNCHRONOUSLY (see the
   preload/onload pattern in head.blade.php). That keeps them off the
   render-blocking path, but it means the first paint uses a system font and
   the real fonts swap in afterwards — and Sora/Inter are markedly wider than
   the system fallback, so the swap REFLOWS the page.

   Measured on the live homepage at 375px: the hero subtitle gained a whole
   line when the fonts arrived, the hero grew 842px -> 867px, and everything
   below it moved down 25px. Lighthouse scored the resulting Cumulative Layout
   Shift at 0.559 (score 13/100) with `div.hero-bg-glow-right` named as the
   culprit and the two gstatic font URLs as the trigger.

   The fix is not to stop loading fonts asynchronously — that would trade CLS
   for First Contentful Paint. It is to make the fallback occupy the SAME
   space as the real font, so there is nothing to reflow when it arrives.

   The numbers below are measured, not copied: each web font and the local
   fallback were rendered to a canvas at 100px and compared.

   They are banded BY WEIGHT because the ratio is not constant — the system
   fallback gets proportionally wider at bold than Inter and Sora do, so a
   single figure fixes body copy and leaves headings and bold text shifting.
   A first pass with one band left the Discord promo bar wrapping to two lines
   in one state and one in the other, worth 13px on its own.

       weight        Inter vs fallback     Sora vs fallback
       400-500          106.7%                115.3%
       600-700          100.7%                106.8%
       800-900           87.7%                 93.8%

   ascent/descent are divided by that same factor, because size-adjust scales
   the em box: a declared ascent of A renders at A x size-adjust. Inter's own
   ascent/descent measure 0.97/0.24em, Sora's 0.97/0.29em.

   These families are ONLY ever painted before the web font arrives; once Sora
   and Inter load they win outright, so this cannot change the finished design.
   ============================================================ */

/* ── Inter (body) ── */
@font-face {
  font-family: "Inter Fallback";
  font-weight: 400 500;
  src: local("Arial"), local("Helvetica"), local("Roboto");
  size-adjust: 106.7%;
  ascent-override: 90.9%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  font-weight: 600 700;
  src: local("Arial"), local("Helvetica"), local("Roboto");
  size-adjust: 100.7%;
  ascent-override: 96.3%;
  descent-override: 23.8%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  font-weight: 800 900;
  src: local("Arial"), local("Helvetica"), local("Roboto");
  size-adjust: 87.7%;
  ascent-override: 110.6%;
  descent-override: 27.4%;
  line-gap-override: 0%;
}

/* ── Sora (display / headings) ── */
@font-face {
  font-family: "Sora Fallback";
  font-weight: 400 500;
  src: local("Arial"), local("Helvetica"), local("Roboto");
  size-adjust: 115.3%;
  ascent-override: 84.1%;
  descent-override: 25.1%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Sora Fallback";
  font-weight: 600 700;
  src: local("Arial"), local("Helvetica"), local("Roboto");
  size-adjust: 106.8%;
  ascent-override: 90.8%;
  descent-override: 27.1%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Sora Fallback";
  font-weight: 800 900;
  src: local("Arial"), local("Helvetica"), local("Roboto");
  size-adjust: 93.8%;
  ascent-override: 103.4%;
  descent-override: 30.9%;
  line-gap-override: 0%;
}

:root {
  --radius: 0.875rem;

  /* Core palette */
  --background:        #FFFFFF;
  --foreground:        #0F172A;
  --surface:           #FFFFFF;

  --section-1:         #F1F5F9;
  --section-2:         #ECFEFF;
  --section-3:         #EFF6FF;

  --card:              #FFFFFF;
  --card-foreground:   #0F172A;

  --primary:           #2563EB;
  --primary-foreground:#FFFFFF;
  --primary-soft:      #DBEAFE;

  --secondary:         #F1F5F9;
  --secondary-foreground: #0F172A;

  --muted:             #F1F5F9;
  --muted-foreground:  #64748B;
  --light-text:        #94A3B8;

  --accent:            #DBEAFE;
  --accent-foreground: #2563EB;

  --sky:               #60A5FA;
  --cyan:              #06B6D4;
  --teal:              #14B8A6;
  --purple:            #8B5CF6;
  --success:           #22C55E;
  --destructive:       #EF4444;
  --chart-4:           #F59E0B;

  --border:            #E2E8F0;
  --input:             #E2E8F0;
  --ring:              #2563EB;

  /* Shadows */
  --shadow-soft:   0 4px 24px -8px rgba(37, 99, 235, 0.12);
  --shadow-glow:   0px 0px 60px 0px rgba(7, 182, 213, 0.25);
  --shadow-card:   0 1px 2px rgba(0,0,0,0.04), 0 8px 32px -12px rgba(37, 99, 235, 0.08);
  --shadow-scanner:0 0 60px -5px rgba(6,182,212,0.55), 0 0 30px -3px rgba(20,184,166,0.45);

  /* Gradients */
  --gradient-hero:    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(219,234,254,0.7), transparent 60%),
                      linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
  --gradient-primary: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
  --gradient-accent:  linear-gradient(135deg, #06B6D4 0%, #7C3AED 100%);
  --gradient-scanner: linear-gradient(135deg, #06B6D4 0%, #8B5CF6 100%);
  --gradient-mesh:    radial-gradient(at 20% 10%, rgba(219,234,254,0.6) 0, transparent 50%),
                      radial-gradient(at 80% 0%,  rgba(103,232,249,0.35) 0, transparent 50%),
                      radial-gradient(at 0% 90%,  rgba(167,139,250,0.3) 0, transparent 50%);

  /* Typography
     The "… Fallback" families are metric-matched stand-ins defined just below
     this block. They are what the browser paints before Sora/Inter arrive, and
     they exist to stop the swap moving the page. See that comment for why. */
  --font-display: "Sora", "Sora Fallback", system-ui, sans-serif;
  --font-sans:    "Inter", "Inter Fallback", system-ui, sans-serif;

  /* Compatibility aliases — legacy pages use these names */
  --text-dark:     var(--foreground);
  --text-mid:      var(--muted-foreground);
  --text-light:    var(--light-text);
  --bg:            var(--background);
  --bg-white:      var(--background);
  --bg-section:    var(--secondary);
  --radius-lg:     1.25rem;
  --radius-md:     0.75rem;
  --primary-rgb:   37, 99, 235;
  --primary-dark:  #1D4ED8;
  --primary-light: #60A5FA;
  --shadow-sm:     0 1px 3px rgba(0,0,0,.08);
  --shadow-md:     0 4px 16px rgba(0,0,0,.12);
  --shadow-lg:     0 12px 40px rgba(0,0,0,.16);
  --transition:    all .2s ease;
}

/* ============================================================
   2. DARK MODE
   ============================================================ */
[data-theme="dark"] {
  --background:        #020617;
  --foreground:        #F8FAFC;
  --surface:           #1E293B;

  --section-1:         #0F172A;
  --section-2:         #0F172A;
  --section-3:         #1E293B;

  --card:              #111827;
  --card-foreground:   #F8FAFC;

  --primary:           #3B82F6;
  --primary-foreground:#FFFFFF;
  --primary-soft:      rgba(59,130,246,0.18);

  --secondary:         #1E293B;
  --secondary-foreground: #F8FAFC;

  --muted:             #1E293B;
  --muted-foreground:  #CBD5E1;
  --light-text:        #94A3B8;

  --accent:            rgba(59,130,246,0.22);
  --accent-foreground: #F8FAFC;

  --sky:               #38BDF8;
  --cyan:              #22D3EE;
  --teal:              #2DD4BF;
  --purple:            #8B5CF6;
  --success:           #22C55E;
  --destructive:       #F87171;

  --border:            #1E293B;
  --input:             #1E293B;
  --ring:              #3B82F6;

  --gradient-hero:    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(37,99,235,0.28), transparent 65%),
                      linear-gradient(180deg, #020617 0%, #0F172A 100%);
  --gradient-primary: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
  --gradient-accent:  linear-gradient(135deg, #22D3EE 0%, #8B5CF6 100%);
  --gradient-scanner: linear-gradient(135deg, #22D3EE 0%, #8B5CF6 100%);
  --gradient-mesh:    radial-gradient(at 20% 10%, rgba(37,99,235,0.3) 0, transparent 50%),
                      radial-gradient(at 80% 0%,  rgba(34,211,238,0.2) 0, transparent 50%),
                      radial-gradient(at 0% 90%,  rgba(139,92,246,0.25) 0, transparent 50%);

  /* Compatibility aliases — dark overrides */
  --bg-white:      var(--surface);
  --bg-section:    var(--secondary);
  --primary-rgb:   59, 130, 246;
  --primary-dark:  #2563EB;
  --primary-light: #93C5FD;
}

/* ============================================================
   3. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid var(--border); }

html {
  scroll-behavior: smooth;
  overflow-x: clip; /* clip instead of hidden — hidden breaks position:sticky on child elements */
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: clip;   /* clip instead of hidden — hidden makes body a scroll container, breaking position:sticky */
  max-width: 100vw;   /* hard cap so nothing can widen the body beyond viewport */
}

h1,h2,h3,h4,h5 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

img { display: block; max-width: 100%; }

a { text-decoration: none; color: inherit; }

button { cursor: pointer; font-family: inherit; background: none; border: none; }

input, textarea, select {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--foreground);
  outline: none;
}

ul { list-style: none; }

details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }

/* ============================================================
   4. LAYOUT UTILITIES
   ============================================================ */
.container {
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.section {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

/* ============================================================
   5. VISUAL UTILITIES
   ============================================================ */
.glass-card {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(226,232,240,0.7);
  box-shadow: var(--shadow-card);
}
[data-theme="dark"] .glass-card {
  background: rgba(30,41,59,0.7);
  border-color: rgba(30,41,59,0.7);
}

.glass-search {
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
}
[data-theme="dark"] .glass-search {
  background: rgba(15,23,42,0.8);
}

.bg-gradient-primary  { background: var(--gradient-primary); }
.bg-gradient-scanner  { background: var(--gradient-scanner); }
.bg-gradient-accent   { background: var(--gradient-accent); }
.bg-gradient-mesh     { background: var(--gradient-mesh); }

.text-gradient-primary {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-gradient-scanner {
  background: var(--gradient-scanner);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Gradient links on all custom / legal / static pages ────────────────
   Covers database-driven content where adding a class to <a> isn't possible.
   Selectors match every content wrapper used across the page templates.     */
.legal-content a,
.about-hero .container a,
.sp-prose-wrap a,
.cp-content-card a {
  font-weight: bold;
  background: var(--primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-decoration-color: color-mix(in srgb, var(--primary) 40%, transparent);
  transition: opacity .2s;
}
.legal-content a:hover,
.about-hero .container a:hover,
.sp-prose-wrap a:hover,
.cp-content-card a:hover {
  opacity: .75;
}

.shadow-soft   { box-shadow: var(--shadow-soft); }
.shadow-glow   { box-shadow: var(--shadow-glow); }
.shadow-card   { box-shadow: var(--shadow-card); }
.shadow-scanner{ box-shadow: var(--shadow-scanner); }

/* ============================================================
   6. ANIMATIONS & KEYFRAMES
   ============================================================ */
@keyframes float-slow {
  0%,100% { transform: translateY(0px) rotate(0deg); }
  50%      { transform: translateY(-24px) rotate(4deg); }
}
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes spin-slow-reverse {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0deg); }
}
@keyframes scan-line {
  0%   { transform: translateY(0%);    opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}
@keyframes scan-sweep {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes pulse-ring {
  0%   { transform: scale(0.85); opacity: 0.8; }
  100% { transform: scale(1.8);  opacity: 0; }
}
@keyframes loader-bar {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scale-in {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes drift-x {
  0%,100% { transform: translateX(0); }
  50%      { transform: translateX(20px); }
}
@keyframes ping {
  75%,100% { transform: scale(2); opacity: 0; }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

.animate-float-slow   { animation: float-slow 8s ease-in-out infinite; }
.animate-spin-slow    { animation: spin-slow 12s linear infinite; }
.animate-spin-reverse { animation: spin-slow-reverse 16s linear infinite; }
.animate-scan         { animation: scan-line 2.5s ease-in-out infinite; }
.animate-scan-sweep   { animation: scan-sweep 3s linear infinite; }
.animate-pulse-ring   { animation: pulse-ring 2.2s cubic-bezier(0.4,0,0.6,1) infinite; }
.animate-loader-bar   { animation: loader-bar 1.8s ease-in-out infinite; }
.animate-fade-in      { animation: fade-in 0.25s ease-out; }
.animate-scale-in     { animation: scale-in 0.3s cubic-bezier(0.16,1,0.3,1); }
.animate-marquee      { animation: marquee 30s linear infinite; }
.animate-drift-x      { animation: drift-x 10s ease-in-out infinite; }
.animate-ping         { animation: ping 1s cubic-bezier(0,0,0.2,1) infinite; }
.animate-spin         { animation: spin 1s linear infinite; }
.animate-pulse        { animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }

/* ============================================================
   7. EYEBROW + SECTION HEADING
   ============================================================ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--primary);
}
.eyebrow::before {
  content: '';
  display: block;
  height: 1px;
  width: 1.5rem;
  background: var(--primary);
  flex-shrink: 0;
}

.section-heading {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--foreground);
}

/* ============================================================
   8. NAVBAR
   ============================================================ */
#navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
}

.nav-wrap {
  margin-top: 1rem;
  position: relative;
}

.nav-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: calc(var(--radius) + 8px);
  padding: 0.625rem 1rem;
}

.nav-logo {
  display: flex;
  align-items: center;
  /* gap: 0.625rem; */
}
.nav-logo-img {
  height: 3.25rem;
  width: 3.25rem;
  object-fit: contain;
}
.nav-logo-text {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--foreground);
}
.nav-logo-text .text-primary { color: var(--primary); }

.nav-links {
  display: none;
  align-items: center;
  gap: 0.25rem;
}
.nav-links a {
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  color: #4f6070;
  transition: background 0.15s, color 0.15s;
}
/* The colour above is a hardcoded literal, so it was identical in both
   themes. Measured: #4f6070 gives 6.48:1 on the light ground (fine) but only
   3.11:1 on the dark one — below the 4.5:1 WCAG AA needs for 16px text, and
   visibly dim. Overridden only for dark so the approved light nav is
   untouched; #94A3B8 measures 7.87:1 there and still reads as secondary
   against the #F8FAFC primary text. */
[data-theme="dark"] .nav-links a {
  color: #94A3B8;
}

.nav-links a:hover {
  background: var(--primary-soft);
  color: var(--primary);
}
.nav-links a.active {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 700;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#theme-toggle {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--foreground);
  transition: border-color 0.15s, color 0.15s;
}
#theme-toggle:hover {
  border-color: rgba(37,99,235,0.4);
  color: var(--primary);
}
#theme-toggle .icon-sun,
#theme-toggle .icon-moon {
  position: absolute;
  transition: transform 0.25s cubic-bezier(.4,0,.2,1), opacity 0.25s;
  display: flex;
}
/* ── LIGHT MODE: moon visible (hint = click to go dark), sun hidden ── */
html:not([data-theme=”dark”]) #theme-toggle .icon-sun  { opacity: 0; transform: scale(0) rotate(-90deg); }
html:not([data-theme=”dark”]) #theme-toggle .icon-moon { opacity: 1; transform: scale(1) rotate(0deg);   }
/* ── DARK MODE: sun visible (hint = click to go light), moon hidden ── */
html[data-theme=”dark”] #theme-toggle .icon-moon { opacity: 0; transform: scale(0) rotate(90deg);  }
html[data-theme=”dark”] #theme-toggle .icon-sun  { opacity: 1; transform: scale(1) rotate(0deg);  }

.nav-cta {
  display: none;
  border-radius: calc(var(--radius) + 4px);
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  background: var(--gradient-primary);
  box-shadow: var(--shadow-soft);
  transition: transform 0.15s, box-shadow 0.15s;
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(37,99,235,.45), 0 2px 8px rgba(0,0,0,.12); }

#mobile-menu-btn {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--foreground);
}

/* Mobile menu backdrop — dims + blurs page behind open menu */
#mobile-menu-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 49; /* below navbar (50) but above all page content */
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
#mobile-menu-backdrop.open { display: block; }

/* Scroll lock when mobile menu is open — html needed for iOS Safari */
html.menu-open,
html.menu-open body {
  overflow: hidden;
  touch-action: none;
}

/*
 * ⚠️ The scroll lock above BREAKS #navbar's `position: sticky`, and this rule
 * is what puts it back. Do not remove one without the other.
 *
 * A sticky element sticks to its nearest scrollport. `overflow: hidden` on
 * html/body removes that scrollport, so #navbar silently falls back to its
 * STATIC position in the document — which is off-screen above the fold the
 * moment the user has scrolled at all. `.nav-mobile` is absolutely positioned
 * inside it, so the menu goes with it and opens half off the top of the screen.
 *
 * Measured on production at 320px wide, scrolled to y=400: navbar top -83px,
 * and the menu's first item ("Home") at -16px — only the last two rows were
 * visible, which is exactly what was reported.
 *
 * Fixed positioning does not depend on a scrollport, so it survives the lock.
 */
html.menu-open #navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* Going fixed takes #navbar out of the flow, so without this the page behind
   the menu jumps up by the header's height as the menu opens. --nav-block is
   the header's real measured height plus its margin, set by site-ui.js. */
html.menu-open body {
  padding-top: var(--nav-block, 0px);
}

.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 0.125rem;
  border-radius: 1rem;
  padding: 0.5rem;
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 1rem;
  right: 1rem;
  z-index: 999;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(226,232,240,0.7);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  animation: mobileMenuSlide 0.18s ease;
}
[data-theme="dark"] .nav-mobile {
  background: rgba(30,41,59,0.85);
  border-color: rgba(30,41,59,0.7);
}
@keyframes mobileMenuSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-mobile.open { display: flex; }

/* All nav-mobile items unified */
.nav-mobile a,
.nav-mobile form button {
  display: flex;
  align-items: center;
  width: 100%;
  border-radius: 0.5rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--foreground);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  min-height: 44px;
  transition: background 0.12s, color 0.12s;
}
.nav-mobile a:hover,
.nav-mobile form button:hover {
  background: var(--primary-soft);
  color: var(--primary);
}
.nav-mobile a.active {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 700;
}

.nav-mobile .nav-mobile-divider {
  height: 1px;
  background: var(--border);
  margin: 0.25rem 0.875rem;
}

.nav-mobile .nav-mobile-signout {
  color: #ef4444;
}
.nav-mobile .nav-mobile-signout:hover {
  background: rgba(239,68,68,0.08);
  color: #ef4444;
}

.nav-mobile .nav-mobile-cta {
  margin-top: 0.25rem;
  border-radius: 0.5rem;
  padding: 0.625rem 0.875rem;
  text-align: center;
  justify-content: center;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff !important;
  background: var(--gradient-primary);
  transition: opacity 0.15s;
}
.nav-mobile .nav-mobile-cta:hover {
  opacity: 0.9;
  background: var(--gradient-primary);
}

/* ============================================================
   9. HERO SECTION
   ============================================================ */
.hero-section {
  position: relative;
  overflow: hidden;
}

.hero-content {
  position: relative;
  padding-top: 4rem;
  padding-bottom: 6rem;
}

.hero-inner {
  max-width: 56rem;
  margin: 0 auto;
  text-align: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.7);
  padding: 0.375rem 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--foreground);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(8px);
  animation: fade-in 0.25s ease-out;
}
[data-theme="dark"] .hero-badge { background: rgba(30,41,59,0.7); }

.hero-badge-dot {
  position: relative;
  display: flex;
  width: 0.5rem;
  height: 0.5rem;
}
.hero-badge-dot-ping {
  position: absolute;
  display: inline-flex;
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  background: var(--success);
  opacity: 0.75;
  animation: ping 1s cubic-bezier(0,0,0.2,1) infinite;
}
.hero-badge-dot-core {
  position: relative;
  display: inline-flex;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--success);
}

.hero-h1 {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--foreground);
}
/* "Video" italic span inside hero h1 */
.hero-h1-video-span {
  font-style: italic;
  display: inline-block;
  padding-right: 0.5rem;   /* mobile: tight */
  padding-bottom: 0.25rem;
}
@media (min-width: 768px) {
  .hero-h1-video-span { padding-right: 0.5rem; } /* desktop: original */
}

.hero-desc {
  margin: 1.5rem auto 0;
  max-width: 50rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--muted-foreground);
}

.hero-badges {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.5rem;
}
.hero-badge-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--light-text);
}
.hero-badge-item svg { color: var(--success); }

/* ============================================================
   10. HERO BACKGROUND
   ============================================================ */
.hero-bg {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  contain: layout paint;
}

.hero-bg-mesh {
  position: absolute;
  inset: 0;
  background: var(--gradient-mesh);
  opacity: 0.9;
}

.hero-bg-glow-top {
  position: absolute;
  top: -8rem;
  left: 50%;
  transform: translateX(-50%) translateZ(0);
  width: 32.5rem;
  height: 32.5rem;
  border-radius: 9999px;
  background: rgba(37,99,235,0.15);
  filter: blur(3rem);
  will-change: transform;
}
.hero-bg-glow-left {
  position: absolute;
  top: 33%;
  left: -6rem;
  width: 24rem;
  height: 24rem;
  border-radius: 9999px;
  background: rgba(6,182,212,0.2);
  filter: blur(3rem);
  transform: translateZ(0);
  will-change: transform;
}
.hero-bg-glow-right {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 28rem;
  height: 28rem;
  border-radius: 9999px;
  background: rgba(139,92,246,0.15);
  filter: blur(3rem);
  transform: translateZ(0);
  will-change: transform;
}

.hero-bg-grid {
  position: absolute;
  inset: 0;
  opacity: 0.06;
}

.hero-bg-line-1 {
  position: absolute;
  left: 0; right: 0;
  top: 36.33%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(6,182,212,0.3), transparent);
}
.hero-bg-line-2 {
  position: absolute;
  left: 0; right: 0;
  top: 66.66%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(37,99,235,0.2), transparent);
}

.hero-float-icon {
  position: absolute;
}
.hero-float-icon-inner {
  display: grid;
  place-items: center;
  border-radius: 1rem;
  border: 1px solid rgba(226,232,240,0.6);
  background: rgba(255,255,255,0.4);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
  opacity: 0.85;
}
[data-theme="dark"] .hero-float-icon-inner {
  background: rgba(30,41,59,0.3);
  border-color: rgba(30,41,59,0.6);
}

/* ============================================================
   11. SEARCH BOX
   ============================================================ */
#search { position: relative; }

.search-outer-glow {
  position: absolute;
  inset: -2rem;
  border-radius: 2.5rem;
  background: linear-gradient(135deg, rgba(37,99,235,0.1), rgba(6,182,212,0.15), rgba(20,184,166,0.1));
  filter: blur(2rem);
  pointer-events: none;
}
.search-inner-glow {
  position: absolute;
  inset: -0.5rem;
  border-radius: 2rem;
  background: var(--gradient-primary);
  opacity: 0.2;
  filter: blur(2rem);
  pointer-events: none;
}

.search-box {
  position: relative;
  border-radius: 1.5rem;
  border: 1px solid rgba(226,232,240,0.7);
  padding: 0.625rem;
  box-shadow: var(--shadow-card);
}
[data-theme="dark"] .search-box { border-color: rgba(30,41,59,0.7); }

/* Tabs */
.search-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)); /* minmax(0) prevents 1fr expanding to min-content */
  gap: 0.25rem;
  border-radius: 1rem;
  background: rgba(255,255,255,0.5);
  padding: 0.375rem;
}
[data-theme="dark"] .search-tabs { background: rgba(15,23,42,0.5); }

.search-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  border-radius: calc(var(--radius) + 4px);
  padding: 0.625rem 0.5rem;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  color: var(--muted-foreground);
  background: none;
  border: none;
  cursor: pointer;
}
.search-tab:hover { background: var(--secondary); }
.search-tab.active {
  background: var(--gradient-primary);
  color: #fff;
  box-shadow: var(--shadow-soft);
}

.search-tab-icon {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  flex-shrink: 0;
  background: var(--primary-soft);
  color: var(--primary);
}
.search-tab.active .search-tab-icon {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

.search-tab-label {
  display: none;
  min-width: 0;
  text-align: left;
}
.search-tab-name {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-tab.active .search-tab-name { color: #fff; }
.search-tab-sub {
  display: block;
  font-size: 0.5625rem;
  color: var(--light-text);
  white-space: nowrap;
}
.search-tab.active .search-tab-sub { color: rgba(255,255,255,0.7); }

/* Tab panels */
.search-panels { padding: 0.75rem; }

.search-panel { display: none; }
.search-panel.active { display: block; }

/* Drop zone (screenshot + upload) */
.drop-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  border-radius: 1rem;
  border: 2px dashed rgba(37,99,235,0.3);
  padding: 2.5rem 1.5rem;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
  background: linear-gradient(135deg,
    rgba(37,99,235,0.06),
    rgba(6,182,212,0.06),
    rgba(139,92,246,0.06)
  );
}
.drop-zone:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-glow);
}
.drop-zone-upload {
  background: rgba(219,234,254,0.3);
}
[data-theme="dark"] .drop-zone-upload { background: rgba(59,130,246,0.08); }

.drop-zone-icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: calc(var(--radius) + 8px);
  background: var(--gradient-scanner);
  color: #fff;
  box-shadow: var(--shadow-glow);
}

.drop-zone-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--foreground);
}
.drop-zone-title span { color: var(--primary); }
.drop-zone-hint {
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: var(--light-text);
}
.drop-zone input[type="file"] { display: none; }

/* Keywords / URL panels */
.search-input-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.search-input-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.8);
  padding: 1rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
[data-theme="dark"] .search-input-field { background: rgba(15,23,42,0.8); }
.search-input-field:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
}
.search-input-field svg { color: var(--light-text); flex-shrink: 0; }
.search-input-field input {
  flex: 1;
  background: transparent;
  font-size: 1rem;
  font-weight: 500;
  /* color: var(--primary); */
  min-width: 0;
}
[data-theme="dark"] .search-input-field input {  }
.search-input-field input::placeholder { color: var(--light-text); font-weight: 400; }

.search-platform-select {
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.8);
  padding: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
  cursor: pointer;
  transition: border-color 0.15s;
}
[data-theme="dark"] .search-platform-select { background: rgba(15,23,42,0.8); color: var(--foreground); }
.search-platform-select:focus { border-color: var(--primary); }

.search-url-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.25rem;
}
.search-url-chips-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--light-text);
}
.chip {
  border-radius: 9999px;
  background: var(--primary-soft);
  padding: 0.125rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--primary);
}

/* Transcript panel */
.search-textarea-wrap {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.8);
  padding: 0.75rem 1rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
[data-theme="dark"] .search-textarea-wrap { background: rgba(15,23,42,0.8); }
.search-textarea-wrap:focus-within {
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px rgba(6,182,212,0.15);
}
.search-textarea-wrap svg { color: var(--light-text); flex-shrink: 0; margin-top: 0.25rem; }
.search-textarea-wrap textarea {
  flex: 1;
  resize: none;
  background: transparent;
  font-size: 1rem;
  font-weight: 500;
  /* color: var(--primary); */
  min-width: 0;
}
[data-theme="dark"] .search-textarea-wrap textarea { color: var(--primary); }
.search-textarea-wrap textarea::placeholder { color: var(--light-text); font-weight: 400; }
.search-word-count {
  display: flex;
  justify-content: flex-end;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--light-text);
  margin-top: 0.25rem;
}

/* Search button */
.search-btn {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  border-radius: 1rem;
  background: var(--gradient-primary);
  padding: 1rem 1.5rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  box-shadow: var(--shadow-soft);
  transition: transform 0.15s, box-shadow 0.15s;
  margin-top: 1rem;
  cursor: pointer;
}
.search-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(37,99,235,.45), 0 2px 8px rgba(0,0,0,.12);
}
.search-btn .arrow-icon { transition: transform 0.15s; }
.search-btn:hover .arrow-icon { transform: translateX(4px); }

.search-meta {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--light-text);
}
.search-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  background: var(--primary-soft);
  padding: 0.25rem 0.625rem;
  color: var(--primary);
}
.search-meta-item { display: inline-flex; align-items: center; gap: 0.375rem; }
.search-meta-item .cyan { color: var(--cyan); }

/* ============================================================
   12. SEARCH MODAL
   ============================================================ */
#search-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
#search-modal.open {
  display: flex;
  animation: fade-in 0.25s ease-out;
}

#modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,0.7);
  backdrop-filter: blur(20px);
}

.modal-wrapper {
  position: relative;
  width: 100%;
  max-width: 48rem;
  animation: scale-in 0.3s cubic-bezier(0.16,1,0.3,1);
}

#modal-close {
  position: absolute;
  top: -0.75rem;
  right: -0.75rem;
  z-index: 20;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(6,182,212,0.4);
  background: #111827;
  color: #fff;
  box-shadow: var(--shadow-scanner);
  transition: transform 0.15s, border-color 0.15s, color 0.15s;
  cursor: pointer;
}
#modal-close:hover {
  transform: scale(1.1);
  border-color: var(--cyan);
  color: var(--cyan);
}

.modal-outer-glow {
  position: absolute;
  inset: -0.25rem;
  border-radius: 1.75rem;
  background: var(--gradient-scanner);
  opacity: 0.3;
  filter: blur(2rem);
}

.modal-inner {
  position: relative;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid rgba(6,182,212,0.3);
  background: #111827;
  color: #fff;
  box-shadow: var(--shadow-scanner);
}

.modal-top-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--cyan), transparent);
}
.modal-bottom-line {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--teal), transparent);
}

.modal-body {
  display: grid;
}

/* Scanner left panel */
.modal-scanner-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  border-bottom: 1px solid rgba(6,182,212,0.15);
}

.scanner-orbit {
  position: relative;
  display: grid;
  place-items: center;
  width: 13rem;
  height: 13rem;
}

.scanner-ring-outer {
  position: absolute;
  inset: 0;
  animation: spin-slow 12s linear infinite;
}
.scanner-ring-outer-inner {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: 2px dashed rgba(6,182,212,0.3);
}

.scanner-ring-mid {
  position: absolute;
  inset: 0.75rem;
  animation: spin-slow-reverse 16s linear infinite;
}
.scanner-ring-mid-inner {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: 1px solid rgba(20,184,166,0.4);
}

.scanner-pulse-1 {
  position: absolute;
  inset: 1.5rem;
  border-radius: 9999px;
  background: rgba(6,182,212,0.2);
  animation: pulse-ring 2.2s cubic-bezier(0.4,0,0.6,1) infinite;
}
.scanner-pulse-2 {
  position: absolute;
  inset: 1.5rem;
  border-radius: 9999px;
  background: rgba(20,184,166,0.2);
  animation: pulse-ring 2.2s cubic-bezier(0.4,0,0.6,1) 0.8s infinite;
}

.scanner-sweep {
  position: absolute;
  inset: 1rem;
  animation: scan-sweep 3s linear infinite;
}
.scanner-sweep-line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 50%;
  transform-origin: top center;
  background: linear-gradient(to bottom, var(--cyan), transparent);
}

.scanner-equator {
  position: absolute;
  left: 1rem; right: 1rem;
  top: 50%;
  height: 3rem;
  transform: translateY(-50%);
  border-radius: 100%;
  border: 1px solid rgba(6,182,212,0.3);
}

.scanner-brackets {
  position: absolute;
  inset: -0.5rem;
}
.scanner-bracket {
  position: absolute;
  width: 1rem;
  height: 1rem;
}
.scanner-bracket.tl { top:0; left:0; border-top: 2px solid var(--cyan); border-left: 2px solid var(--cyan); }
.scanner-bracket.tr { top:0; right:0; border-top: 2px solid var(--cyan); border-right: 2px solid var(--cyan); }
.scanner-bracket.bl { bottom:0; left:0; border-bottom: 2px solid var(--teal); border-left: 2px solid var(--teal); }
.scanner-bracket.br { bottom:0; right:0; border-bottom: 2px solid var(--teal); border-right: 2px solid var(--teal); }

.scanner-center {
  position: relative;
  z-index: 10;
  display: grid;
  place-items: center;
  width: 6rem;
  height: 6rem;
  border-radius: 9999px;
  background: var(--gradient-scanner);
  box-shadow: var(--shadow-scanner);
}
.scanner-center-inner {
  display: grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  border-radius: 9999px;
  background: #111827;
  padding: 0.75rem;
}
.scanner-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: float-slow 8s ease-in-out infinite;
}

/* Modal right panel */
.modal-status-panel {
  position: relative;
  padding: 1.5rem;
}

.modal-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(6,182,212,0.3);
  background: rgba(6,182,212,0.1);
  padding: 0.25rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cyan);
}
.live-dot {
  position: relative;
  display: flex;
  width: 0.5rem;
  height: 0.5rem;
}
.live-dot-ping {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: var(--cyan);
  opacity: 0.75;
  animation: ping 1s cubic-bezier(0,0,0.2,1) infinite;
}
.live-dot-core {
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--cyan);
}

.modal-title {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
}

.modal-step-text {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: rgba(6,182,212,0.8);
}

.modal-steps {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.modal-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: calc(var(--radius) + 4px);
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  transition: all 0.15s;
}
.modal-step.step-done   { color: rgba(255,255,255,0.6); }
.modal-step.step-active { border: 1px solid rgba(6,182,212,0.4); background: rgba(6,182,212,0.1); font-weight: 600; color: #fff; }
.modal-step.step-pending{ color: rgba(255,255,255,0.4); }

.step-icon {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  flex-shrink: 0;
}
.step-done .step-icon svg  { color: var(--teal); }
.step-active .step-icon svg { color: var(--cyan); animation: spin 1s linear infinite; }
.step-pending .step-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: rgba(255,255,255,0.2); }

.modal-progress-bar-wrap {
  margin-top: 1.25rem;
}
.modal-progress-track {
  height: 0.375rem;
  border-radius: 9999px;
  background: rgba(255,255,255,0.1);
  overflow: hidden;
}
#modal-progress-bar {
  height: 100%;
  border-radius: 9999px;
  background: var(--gradient-scanner);
  transition: width 0.2s;
  width: 0%;
}
.modal-progress-meta {
  margin-top: 0.5rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
}
.modal-progress-meta span:first-child { color: rgba(255,255,255,0.6); }
#modal-progress-text { font-weight: 600; color: var(--cyan); }

.modal-query-display {
  margin-top: 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  padding: 0.375rem 0.75rem;
  font-size: 0.6875rem;
  font-family: monospace;
  color: rgba(6,182,212,0.8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Modal footer */
.modal-footer {
  border-top: 1px solid rgba(6,182,212,0.15);
  background: rgba(2,6,23,0.8);
  padding: 1rem 1.25rem;
}

.modal-footer-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.8);
}
.teal-dot {
  position: relative;
  display: flex;
  width: 0.625rem;
  height: 0.625rem;
  flex-shrink: 0;
}
.teal-dot-ping {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: var(--teal);
  opacity: 0.75;
  animation: ping 1s cubic-bezier(0,0,0.2,1) infinite;
}
.teal-dot-core {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 9999px;
  background: var(--teal);
  position: relative;
}
#modal-scan-count { font-weight: 600; color: #fff; }

.modal-marquee-wrap {
  margin-top: 0.75rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.modal-marquee {
  display: flex;
  width: max-content;
  gap: 0.5rem;
  animation: marquee 30s linear infinite;
}
.platform-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  padding: 0.375rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
}
.platform-chip-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: var(--cyan);
}

.modal-footer-privacy {
  margin-top: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  color: rgba(255,255,255,0.5);
}

/* ============================================================
   13. WHAT IS SECTION
   ============================================================ */
.whatis-grid {
  display: grid;
  align-items: start;
  gap: 3rem;
}

.whatis-text p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--muted-foreground);
}
.whatis-text p + p { margin-top: 1rem; }
.whatis-text em { color: var(--foreground); font-style: normal; }

.whatis-card-wrap {
  position: relative;
}
.whatis-card-glow {
  position: absolute;
  inset: -1rem;
  border-radius: 1.5rem;
  background: var(--gradient-primary);
  opacity: 0.1;
  filter: blur(2rem);
}
.whatis-card {
  position: relative;
  border-radius: 1.5rem;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 2rem;
  box-shadow: var(--shadow-card);
}

.platform-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
.platform-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: var(--background);
  padding: 1rem;
}
.platform-icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: calc(var(--radius) + 4px);
  color: #fff;
  flex-shrink: 0;
}
.platform-icon.blue   { background: var(--primary); }
.platform-icon.cyan   { background: var(--cyan); }
.platform-icon.purple { background: var(--purple); }
.platform-icon.green  { background: var(--success); }
.platform-name { font-size: 0.875rem; font-weight: 600; color: var(--foreground); }
.platform-status{ font-size: 0.75rem; color: var(--light-text); }

.scan-status {
  margin-top: 1rem;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: var(--background);
  padding: 1rem;
}
.scan-status-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.scan-status-label { font-size: 0.75rem; font-weight: 500; color: var(--light-text); }
.scan-status-live  { font-size: 0.75rem; font-weight: 600; color: var(--success); }
.scan-bar-track {
  margin-top: 0.75rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--secondary);
  overflow: hidden;
}
.scan-bar-fill {
  height: 100%;
  width: 75%;
  border-radius: 9999px;
  background: var(--gradient-primary);
}
.scan-frames { margin-top: 0.5rem; font-size: 0.75rem; color: var(--light-text); }

/* ============================================================
   14. HOW TO SECTION
   ============================================================ */
.howto-steps { margin-top: 5rem; position: relative; }

.howto-rail {
  display: none;
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent, rgba(37,99,235,0.3), transparent);
  pointer-events: none;
}

.howto-step {
  position: relative;
  display: grid;
  align-items: center;
  gap: 2.5rem;
}
.howto-step + .howto-step { margin-top: 5rem; }

.howto-visual {
  position: relative;
}
.howto-visual-glow {
  position: absolute;
  inset: -1.5rem;
  z-index: 0;
  border-radius: 40% 60% 55% 45% / 55% 45% 60% 40%;
  opacity: 0.2;
  filter: blur(2rem);
}
.howto-img-wrap {
  position: relative;
  aspect-ratio: 4/3;
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 40% 60% 55% 45% / 55% 45% 60% 40%;
  box-shadow: var(--shadow-glow);
}
.howto-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.howto-img-overlay {
  position: absolute;
  inset: 0;
  opacity: 0.25;
  mix-blend-mode: multiply;
}
.howto-img-badge {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background: rgba(255,255,255,0.9);
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--foreground);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(8px);
}
.howto-img-badge svg { color: var(--primary); }

.howto-dot {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
.howto-dot-inner {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  color: #fff;
  box-shadow: var(--shadow-glow);
  outline: 0.5rem solid var(--background);
}

.howto-text { position: relative; }
.howto-number {
  font-family: var(--font-display);
  font-size: 4.5rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(37,99,235,0.3);
  -webkit-text-stroke: 1.5px rgba(37,99,235,0.3);
}
.howto-title {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--foreground);
}
.howto-body {
  margin-top: 0.75rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--muted-foreground);
  max-width: 28rem;
}
.howto-link {
  margin-top: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary);
}
.howto-link-line {
  display: block;
  height: 1px;
  width: 2.5rem;
}

/* Accent gradients for steps */
.accent-blue-sky   { background: linear-gradient(135deg, var(--primary), var(--sky)); }
.accent-sky-cyan   { background: linear-gradient(135deg, var(--sky), var(--cyan)); }
.accent-cyan-teal  { background: linear-gradient(135deg, var(--cyan), var(--teal)); }
.accent-teal-blue  { background: linear-gradient(135deg, var(--teal), var(--primary)); }

/* ============================================================
   15. HOW IT WORKS SECTION
   ============================================================ */
.howitworks-grid {
  display: grid;
  align-items: center;
  gap: 3rem;
}

.scanner-viz-wrap {
  position: relative;
}
.scanner-viz-glow {
  position: absolute;
  inset: -1.5rem;
  border-radius: 2rem;
  background: var(--gradient-accent);
  opacity: 0.1;
  filter: blur(3rem);
}
.scanner-viz-card {
  position: relative;
  aspect-ratio: 1/1;
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
  border-radius: 1.5rem;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}
.scanner-screen {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  border-radius: 1rem;
  background: rgba(15,23,42,0.95);
}
.frame-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 0.25rem;
  padding: 0.75rem;
  opacity: 0.4;
}
.frame-cell {
  border-radius: 0.25rem;
  background: linear-gradient(135deg, rgba(37,99,235,0.4), rgba(139,92,246,0.4));
}
.scan-beam {
  position: absolute;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--cyan), transparent);
  box-shadow: 0 0 20px 3px rgba(6,182,212,0.5);
  animation: scan-line 2.5s ease-in-out infinite;
}
.scanner-center-pulse {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.pulse-rings { position: relative; }
.pulse-ring-bg {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: rgba(6,182,212,0.4);
  animation: pulse-ring 2.2s cubic-bezier(0.4,0,0.6,1) infinite;
}
.pulse-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  border-radius: 9999px;
  background: var(--gradient-primary);
  box-shadow: var(--shadow-glow);
  color: #fff;
}
.scanner-status {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  right: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.5rem;
  background: rgba(0,0,0,0.4);
  padding: 0.5rem 0.75rem;
  font-size: 0.6875rem;
  font-family: monospace;
  color: #fff;
  backdrop-filter: blur(8px);
}
.scanner-status .cyan-text { color: var(--cyan); }

.hiw-text p {
  margin-top: 1rem;
  color: var(--muted-foreground);
}
.hiw-signals { margin-top: 2rem; }
.hiw-signals-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--light-text);
}
.tag-cloud {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.tag {
  border-radius: 9999px;
  border: 1px solid rgba(37,99,235,0.2);
  background: var(--primary-soft);
  padding: 0.375rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--primary);
}
.hiw-traces { margin-top: 1.5rem; }
.traces-list {
  margin-top: 0.75rem;
  display: grid;
  gap: 0.5rem;
}
.trace-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  color: var(--foreground);
}
.trace-item svg { color: var(--success); flex-shrink: 0; }

/* ============================================================
   16. FEATURES SECTION
   ============================================================ */
.features-grid {
  margin-top: 3.5rem;
  display: grid;
  gap: 1.25rem;
}

.feature-card {
  position: relative;
  border-radius: 1.5rem;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 1.75rem;
  transition: transform 0.2s, box-shadow 0.2s;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }

.feature-card.featured {
  background: var(--gradient-primary);
  border-color: transparent;
  color: #fff;
}

.feature-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  background: var(--primary-soft);
  color: var(--primary);
}
.feature-card.featured .feature-icon {
  background: rgba(255,255,255,0.15);
  color: #fff;
  backdrop-filter: blur(4px);
}

.feature-title {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--foreground);
}
.feature-card.featured .feature-title { color: #fff; }

.feature-body {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}
.feature-card.featured .feature-body { color: rgba(255,255,255,0.8); }

/* ============================================================
   17. WHO BENEFITS SECTION
   ============================================================ */
.benefits-grid {
  margin-top: 3.5rem;
  display: grid;
  gap: 1.25rem;
}

.benefit-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 1.5rem;
  transition: transform 0.2s, box-shadow 0.2s;
}
.benefit-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }

.benefit-card-glow {
  position: absolute;
  top: -2.5rem;
  right: -2.5rem;
  width: 8rem;
  height: 8rem;
  border-radius: 9999px;
  opacity: 0.1;
  filter: blur(2rem);
  transition: opacity 0.2s;
}
.benefit-card:hover .benefit-card-glow { opacity: 0.2; }

.benefit-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  color: #fff;
  box-shadow: var(--shadow-soft);
}

.benefit-title {
  position: relative;
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--foreground);
}
.benefit-body {
  position: relative;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}

/* ============================================================
   18. TRUSTED STATS SECTION
   ============================================================ */
.trusted-card {
  position: relative;
  overflow: hidden;
  border-radius: 2rem;
  background: var(--foreground);
  padding: 2.5rem;
}

.trusted-mesh {
  position: absolute;
  inset: 0;
  background: var(--gradient-mesh);
  opacity: 0.2;
}
.trusted-glow-top {
  position: absolute;
  top: -5rem; right: 0;
  width: 16rem; height: 16rem;
  border-radius: 9999px;
  background: rgba(37,99,235,0.3);
  filter: blur(3rem);
}
.trusted-glow-bottom {
  position: absolute;
  bottom: -5rem; left: 0;
  width: 16rem; height: 16rem;
  border-radius: 9999px;
  background: rgba(139,92,246,0.3);
  filter: blur(3rem);
}

.trusted-header {
  position: relative;
  text-align: center;
}
.trusted-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  padding: 0.375rem 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #fff;
  backdrop-filter: blur(4px);
}
.trusted-badge svg { color: var(--cyan); }
.trusted-title {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 700;
  color: #fff;
}

.stats-grid {
  position: relative;
  margin-top: 3rem;
  display: grid;
  gap: 1.5rem;
}
.stat-card {
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  padding: 1.5rem;
  text-align: center;
  backdrop-filter: blur(8px);
}
.stat-value {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  background: linear-gradient(to right, var(--cyan), #fff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-label {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.7);
}

/* ============================================================
   19. LIVE DEMO SECTION
   ============================================================ */
.demo-browser {
  margin-top: 3.5rem;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--secondary);
  padding: 0.75rem 1rem;
}
.browser-dots { display: flex; gap: 0.375rem; }
.browser-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 9999px;
}
.browser-dot.red    { background: rgba(239,68,68,0.7); }
.browser-dot.yellow { background: var(--chart-4); }
.browser-dot.green  { background: rgba(34,197,94,0.7); }

.browser-url {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  color: var(--light-text);
  margin-left: 0.75rem;
}
.browser-url svg { color: var(--light-text); }

.demo-body { display: grid; }

.demo-left {
  border-bottom: 1px solid var(--border);
  padding: 1.5rem;
}
.demo-step-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--light-text);
}
.demo-step-num {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.25rem;
  background: var(--primary);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
}
.demo-url-row {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid var(--border);
  background: var(--background);
  padding: 0.75rem;
}
.demo-url-row svg { color: var(--light-text); flex-shrink: 0; }
.demo-url-text { font-size: 0.875rem; font-family: monospace; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.demo-frames {
  margin-top: 1.5rem;
}
.frame-thumbs {
  margin-top: 0.75rem;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.375rem;
}
.frame-thumb {
  aspect-ratio: 1;
  border-radius: 0.375rem;
  background: linear-gradient(135deg, rgba(37,99,235,0.3), rgba(139,92,246,0.3));
}
.frame-thumb.active { outline: 2px solid var(--primary); }
.frame-thumb.dim { opacity: 0.5; }

.demo-progress { margin-top: 1.5rem; }
.demo-progress-item { }
.demo-progress-item + .demo-progress-item { margin-top: 0.5rem; }
.demo-progress-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  margin-bottom: 0.25rem;
}
.demo-progress-head span:first-child { color: var(--muted-foreground); }
.demo-progress-head span:last-child  { font-weight: 500; color: var(--foreground); }
.demo-prog-track {
  height: 0.375rem;
  border-radius: 9999px;
  background: var(--secondary);
  overflow: hidden;
}
.demo-prog-fill {
  height: 100%;
  border-radius: 9999px;
  background: var(--gradient-primary);
}

.demo-right {
  background: rgba(241,245,249,0.4);
  padding: 1.5rem;
}
[data-theme="dark"] .demo-right { background: rgba(30,41,59,0.4); }
.demo-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.demo-results-title {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
}
.found-badge {
  border-radius: 9999px;
  background: rgba(34,197,94,0.15);
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--success);
}
.result-cards { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.result-card {
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 1rem;
  transition: box-shadow 0.15s;
}
.result-card:hover { box-shadow: var(--shadow-soft); }
.result-card-inner { display: flex; align-items: flex-start; gap: 0.75rem; }
.result-thumb {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: calc(var(--radius) + 4px);
  background: linear-gradient(135deg, rgba(37,99,235,0.2), rgba(139,92,246,0.2));
  flex-shrink: 0;
  color: var(--primary);
}
.result-meta { flex: 1; min-width: 0; }
.result-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.result-src { font-size: 0.875rem; font-weight: 600; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-badge {
  border-radius: 9999px;
  padding: 0.125rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  flex-shrink: 0;
}
.badge-green  { background: var(--success); }
.badge-blue   { background: var(--primary); }
.badge-purple { background: var(--purple); }
.result-title { font-size: 0.75rem; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-conf {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.conf-track {
  flex: 1;
  height: 0.25rem;
  border-radius: 9999px;
  background: var(--secondary);
  overflow: hidden;
}
.conf-fill { height: 100%; background: var(--gradient-primary); }
.conf-pct { font-size: 0.75rem; font-weight: 600; color: var(--foreground); }

/* ============================================================
   20. TESTIMONIALS SECTION
   ============================================================ */
.testimonials-grid {
  margin-top: 3.5rem;
  display: grid;
  gap: 1.25rem;
}

.testimonial-card {
  position: relative;
  border-radius: 1.5rem;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 1.75rem;
  transition: transform 0.2s, box-shadow 0.2s;
}
.testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }

.testimonial-quote-badge {
  position: absolute;
  top: -0.75rem;
  left: 1.75rem;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background: var(--gradient-primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow: var(--shadow-soft);
}

.stars { display: flex; gap: 0.125rem; }
.stars svg { color: var(--chart-4); fill: var(--chart-4); }

.testimonial-text {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--foreground);
}

.testimonial-author {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.author-avatar {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: var(--gradient-primary);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.author-name { font-size: 0.875rem; font-weight: 600; color: var(--foreground); }
.author-role { font-size: 0.75rem; color: var(--light-text); }

/* ============================================================
   21. FAQ SECTION
   ============================================================ */
.faq-grid {
  display: grid;
  gap: 3rem;
}

.faq-sidebar-text {
  margin-top: 1rem;
  color: var(--muted-foreground);
}

.faq-list { display: flex; flex-direction: column; gap: 0.75rem; }

.faq-item {
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 1.25rem;
  transition: box-shadow 0.15s;
}
.faq-item[open] { box-shadow: var(--shadow-soft); }

.faq-summary {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.faq-q {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--foreground);
}
.faq-chevron {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: var(--primary-soft);
  color: var(--primary);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.faq-item[open] .faq-chevron { transform: rotate(90deg); }

.faq-a {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--muted-foreground);
}

/* ============================================================
   22. FINAL CTA SECTION
   ============================================================ */
.cta-card {
  position: relative;
  overflow: hidden;
  border-radius: 2rem;
  border: 1px solid var(--border);
  background: var(--gradient-primary);
  padding: 2.5rem;
  text-align: center;
  color: #fff;
}
.cta-mesh {
  position: absolute;
  inset: 0;
  background: var(--gradient-mesh);
  opacity: 0.3;
}
.cta-top-line {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 1px;
  width: 66.66%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent);
}
.cta-inner { position: relative; }
.cta-title {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}
.cta-desc {
  margin: 1rem auto 0;
  max-width: 36rem;
  font-size: 1rem;
  color: rgba(255,255,255,0.8);
}
.cta-btns {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.cta-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 1rem;
  background: var(--gradient-primary);
  padding: 0.875rem 1.5rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  box-shadow: var(--shadow-glow);
  transition: transform .2s, box-shadow .2s;
}
.cta-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(37,99,235,.45), 0 2px 8px rgba(0,0,0,.12);
  color: #fff;
}
.cta-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.1);
  padding: 0.875rem 1.5rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  backdrop-filter: blur(8px);
  transition: background 0.15s;
}
.cta-btn-secondary:hover { background: rgba(255,255,255,0.2); }

/* ============================================================
   23. FOOTER
   ============================================================ */
footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.footer-inner {
  padding-top: 4rem;
  padding-bottom: 4rem;
  /* horizontal padding comes from .container (1rem each side) */
}
.footer-grid {
  display: grid;
  gap: 3rem;
}

.footer-brand {}
.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.footer-logo-icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: calc(var(--radius) + 4px);
  background: var(--gradient-primary);
  box-shadow: var(--shadow-soft);
  color: #fff;
}
.footer-logo-text {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--foreground);
}
.footer-logo-text .text-primary { color: var(--primary); }

.footer-desc {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--muted-foreground);
}

.footer-social {
  margin-top: 1.5rem;
  display: flex;
  gap: 0.5rem;
}
.social-link {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  transition: border-color 0.15s, color 0.15s;
}
.social-link:hover { border-color: var(--primary); color: var(--primary); }

.footer-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.footer-col-title {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
}
.footer-col-links { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.625rem; }
.footer-col-links a {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  transition: color 0.15s;
}
.footer-col-links a:hover { color: var(--primary); }

.footer-newsletter {}
.footer-newsletter-title {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
}
.footer-newsletter-desc {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.newsletter-form {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.newsletter-input {
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid var(--border);
  background: var(--background);
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.newsletter-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
}
.newsletter-btn {
  border-radius: calc(var(--radius) + 4px);
  background: var(--gradient-primary);
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  transition: transform .2s, box-shadow .2s;
  cursor: pointer;
}
.newsletter-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(37,99,235,.45), 0 2px 8px rgba(0,0,0,.12);
}

.footer-bottom {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-top: 1px solid var(--border);
  padding-top: 2rem;
  font-size: 0.75rem;
  color: var(--light-text);
}

/* ============================================================
   24. COOKIE BAR
   ============================================================ */
#cookie-bar {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2rem);
  max-width: 42rem;
  z-index: 50;
}

.cookie-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  border-radius: 1rem;
  padding: 1rem;
}
.cookie-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}
.cookie-icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: calc(var(--radius) + 4px);
  background: var(--primary-soft);
  color: var(--primary);
  flex-shrink: 0;
}
.cookie-text {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.cookie-btns {
  display: flex;
  width: 100%;
  gap: 0.5rem;
}
.btn-decline {
  flex: 1;
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
  cursor: pointer;
  transition: background 0.15s;
}
.btn-decline:hover { background: var(--secondary); }
.btn-accept {
  flex: 1;
  border-radius: calc(var(--radius) + 4px);
  background: var(--gradient-primary);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.btn-accept:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(37,99,235,.45), 0 2px 8px rgba(0,0,0,.12);
}
#cookie-close {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  color: var(--light-text);
  transition: color 0.15s;
  cursor: pointer;
}
#cookie-close:hover { color: var(--foreground); }

/* ============================================================
   25. SECTION BACKGROUNDS
   ============================================================ */
.bg-section-1 { background-color: var(--section-1); }
.bg-section-2 { background-color: var(--section-2); }
.bg-section-3 { background-color: var(--section-3); }
.bg-background { background-color: var(--background); }

/* ============================================================
   26. RESPONSIVE
   ============================================================ */

/* sm: 640px */
@media (min-width: 640px) {
  .section { padding-top: 7rem; padding-bottom: 7rem; }
  .hero-h1 { font-size: 3.75rem; }
  .hero-desc { font-size: 1.125rem; }
  .section-heading { font-size: 2.25rem; }
  .howto-number { font-size: 6rem; }
  .howto-title { font-size: 1.875rem; }
  .trusted-card { padding: 4rem; }
  .trusted-title { font-size: 2.25rem; }
  .stat-value { font-size: 3rem; }
  .cta-card { padding: 4rem; }
  .cta-title { font-size: 3rem; }
  .cta-desc { font-size: 1.125rem; }
  .cookie-inner { flex-direction: row; align-items: center; }
  .cookie-btns { width: auto; }
  #cookie-close { display: none; }
  .search-tab { flex-direction: row; gap: 0.5rem; padding: 0.75rem 0.75rem; }
  .search-tab-label { display: block; }
  .search-panels { padding: 1rem; }
  .search-input-row { flex-direction: row; }
  /* nav-links / CTA moved to ≥1000px — tablets use hamburger */
  .modal-status-panel { padding: 2rem; }
  .modal-title { font-size: 1.875rem; }
  .footer-bottom { flex-direction: row; }
}

/*
 * nav: ≥1024px — full desktop nav revealed, hamburger hidden.
 *
 * This was ≥900px, which was far too optimistic. Measured at 1024px (iPad
 * landscape and the common small-laptop width): the nav card gets 977px but
 * its content needs 1001px. Flexbox resolved that deficit by shrinking every
 * child below its content width — the logo clipped mid-word
 * ("ReverseVideoSearc"), and "Sign In" and "Get Registered Free" each wrapped
 * onto two lines. At 940px the logo lost 51px.
 *
 * 1024 rather than 1000 because of the LOGGED-IN nav, which is the real worst
 * case: a premium account renders a credits pill plus a user pill, and with a
 * long first name (the name is capped at 6rem, so anything from ~11 characters
 * hits the cap) it needs 977px even after the tightening below. At a 1000px
 * viewport only 953px is available, so that combination still clipped. 1024 is
 * the narrowest width where every combination fits with real margin.
 *
 * Below this the hamburger — which already works there — takes over.
 */
@media (min-width: 1024px) {
  .nav-links        { display: flex; }
  .nav-cta          { display: inline-flex; }
  #mobile-menu-btn  { display: none; }
}

/*
 * nav: 1024–1149px — the desktop nav fits here, but only just, so tighten it.
 *
 * Space comes from the three places that have it to give without looking
 * cramped: link padding (each of the 5 links carries 16px either side, so
 * 160px of the nav's 415px is padding — 10px frees 60px), the gap, and the
 * logo wordmark. The 36px link hit area is unchanged. Above 1150px the nav
 * already has ~52px of slack and is left exactly as it was.
 */
@media (min-width: 1024px) and (max-width: 1149.98px) {
  .nav-links      { gap: 0.125rem; }
  .nav-links a    { padding-left: 0.625rem; padding-right: 0.625rem; }
  .nav-logo-text  { font-size: 1.0625rem; }
  .nav-user-name  { max-width: 5rem; }
}

/* md: 768px */
@media (min-width: 768px) {
  .hero-h1 { font-size: 4.5rem; }
  .hero-content { padding-top: 5rem; }
  .section-heading { font-size: 3rem; }
  .trusted-title { font-size: 3rem; }
  .cta-title { font-size: 3.75rem; }
  .modal-body { grid-template-columns: 280px 1fr; }
  .modal-scanner-panel {
    border-bottom: none;
    border-right: 1px solid rgba(6,182,212,0.15);
  }
  .howitworks-grid { grid-template-columns: repeat(2, 1fr); }
  .hiw-visual { order: 1; }
  .hiw-text { order: 2; }
  .traces-list { grid-template-columns: repeat(2, 1fr); }
  .demo-body { grid-template-columns: repeat(2, 1fr); }
  .demo-left { border-bottom: none; border-right: 1px solid var(--border); }
  .footer-cols { grid-template-columns: repeat(3, 1fr); }
}

/* lg: 1024px */
@media (min-width: 1024px) {
  .whatis-grid { grid-template-columns: repeat(2, 1fr); gap: 5rem; }
  .howto-step { grid-template-columns: repeat(2, 1fr); gap: 5rem; }
  .howto-step.flip > .howto-visual { order: 2; }
  .howto-step.flip > .howto-text  { order: 1; }
  .howto-step.flip .howto-text { padding-right: 3rem; text-align: right; }
  .howto-step.flip .howto-body  { margin-left: auto; }
  .howto-step.flip .howto-link  { float: right; }
  .howto-step:not(.flip) .howto-text { padding-left: 3rem; }
  .howto-rail { display: block; }
  .howto-dot  { display: block; }
  .features-grid { grid-template-columns: repeat(3, 1fr); }
  .feature-card.featured { grid-column: span 2; }
  .benefits-grid { grid-template-columns: repeat(4, 1fr); }
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .testimonials-grid { grid-template-columns: repeat(3, 1fr); }
  .faq-grid { grid-template-columns: 4fr 8fr; }
  .footer-grid { grid-template-columns: 4fr 5fr 3fr; }
  .footer-cols { gap: 2rem; }
  .features-grid { gap: 1.25rem; }
}

/* xl: 1280px */
@media (min-width: 1280px) {
  .benefits-grid { grid-template-columns: repeat(4, 1fr); }
}


/* ============================================================
   UTILITY CLASSES — Tailwind-compatible helpers
   Used by the redesigned home page sections
   ============================================================ */

/* ── Design token aliases ── */
.bg-grad-brand { background: var(--gradient-primary); }
.bg-grad-brand-scanner { background: var(--gradient-scanner); }
.text-gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.glass {
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
}
[data-theme="dark"] .glass {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
}

/* ── Display ── */
.flex        { display: flex; }
.inline-flex { display: inline-flex; }
.grid        { display: grid; }

/* ── Position ── */
.relative  { position: relative; }
.absolute  { position: absolute; }
.inset-0   { inset: 0; }
.-inset-4  { inset: -1rem; }
.-inset-6  { inset: -1.5rem; }
.-inset-8  { inset: -2rem; }
.-inset-10 { inset: -2.5rem; }
.top-2     { top: 0.5rem; }
.top-1\.5  { top: 0.375rem; }
.right-0   { right: 0; }
.right-2   { right: 0.5rem; }
.right-1\.5 { right: 0.375rem; }
.bottom-0  { bottom: 0; }
.bottom-2  { bottom: 0.5rem; }
.left-0    { left: 0; }
.left-2    { left: 0.5rem; }
.-left-3   { left: -0.75rem; }
.-top-20   { top: -5rem; }
.-right-20 { right: -5rem; }
.-bottom-20 { bottom: -5rem; }
.-left-20  { left: -5rem; }

/* ── Flex / Grid alignment ── */
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.place-items-center { place-items: center; }
.flex-1          { flex: 1 1 0%; }
.flex-col        { flex-direction: column; }
.shrink-0        { flex-shrink: 0; }
.min-w-0         { min-width: 0; }

/* ── Grid columns ── */
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ── Gap ── */
.gap-0\.5 { gap: 0.125rem; }
.gap-1    { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2    { gap: 0.5rem; }
.gap-2\.5 { gap: 0.625rem; }
.gap-3    { gap: 0.75rem; }
.gap-4    { gap: 1rem; }
.gap-6    { gap: 1.5rem; }
.gap-8    { gap: 2rem; }
.gap-10   { gap: 2.5rem; }
.gap-12   { gap: 3rem; }
.gap-16   { gap: 4rem; }

/* ── Space-Y ── */
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-20 > * + * { margin-top: 5rem; }

/* ── Overflow ── */
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ── Object fit ── */
.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }

/* ── Size ── */
.w-full { width: 100%; }
.h-full { height: 100%; }
.h-px   { height: 1px; }
.w-5    { width: 1.25rem; }
.w-6    { width: 1.5rem; }
.w-8    { width: 2rem; }
.w-9    { width: 2.25rem; }
.w-10   { width: 2.5rem; }
.w-11   { width: 2.75rem; }
.w-14   { width: 3.5rem; }
.w-20   { width: 5rem; }
.w-72   { width: 18rem; }
.h-1    { height: 0.25rem; }
.h-2    { height: 0.5rem; }
.h-5    { height: 1.25rem; }
.h-8    { height: 2rem; }
.h-9    { height: 2.25rem; }
.h-10   { height: 2.5rem; }
.h-11   { height: 2.75rem; }
.h-14   { height: 3.5rem; }
.h-20   { height: 5rem; }
.h-72   { height: 18rem; }

/* ── Max-width ── */
.max-w-full { max-width: 100%; }
.max-w-sm   { max-width: 24rem; }
.max-w-md   { max-width: 28rem; }
.max-w-xl   { max-width: 36rem; }
.max-w-2xl  { max-width: 42rem; }
.max-w-3xl  { max-width: 48rem; }
.max-w-5xl  { max-width: 64rem; }
.max-w-6xl  { max-width: 72rem; }
.mx-auto    { margin-left: auto; margin-right: auto; }

/* ── Margin ── */
.mb-2  { margin-bottom: 0.5rem; }
.mb-3  { margin-bottom: 0.75rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-14 { margin-bottom: 3.5rem; }
.mb-16 { margin-bottom: 4rem; }
.mt-1  { margin-top: 0.25rem; }
.mt-2  { margin-top: 0.5rem; }
.mt-3  { margin-top: 0.75rem; }
.mt-4  { margin-top: 1rem; }
.mt-5  { margin-top: 1.25rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-8  { margin-top: 2rem; }
.-mt-2 { margin-top: -0.5rem; }

/* ── Padding ── */
.p-3    { padding: 0.75rem; }
.p-4    { padding: 1rem; }
.p-5    { padding: 1.25rem; }
.p-6    { padding: 1.5rem; }
.p-7    { padding: 1.75rem; }
.p-10   { padding: 2.5rem; }
.p-14   { padding: 3.5rem; }
.p-16   { padding: 4rem; }
.px-2   { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3   { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4   { padding-left: 1rem; padding-right: 1rem; }
.px-6   { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-7   { padding-left: 1.75rem; padding-right: 1.75rem; }
.py-1   { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2   { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3   { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.py-16  { padding-top: 4rem; padding-bottom: 4rem; }
.py-20  { padding-top: 5rem; padding-bottom: 5rem; }
.pb-2   { padding-bottom: 0.5rem; }
.pb-3   { padding-bottom: 0.75rem; }
.pb-4   { padding-bottom: 1rem; }
.pb-6   { padding-bottom: 1.5rem; }
.pt-3   { padding-top: 0.75rem; }

/* ── Typography ── */
.font-display  { font-family: var(--font-display); }
.font-bold     { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium   { font-weight: 500; }
.italic        { font-style: italic; }
.uppercase     { text-transform: uppercase; }
.text-center   { text-align: center; }
.text-left     { text-align: left; }
.leading-relaxed  { line-height: 1.625; }
.leading-none     { line-height: 1; }
.leading-tight    { line-height: 1.25; }
.tracking-tighter { letter-spacing: -0.05em; }
.tracking-wider   { letter-spacing: 0.05em; }
.truncate         { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whitespace-nowrap { white-space: nowrap; }
.text-xs   { font-size: 0.75rem; }
.text-sm   { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-xl   { font-size: 1.25rem; }
.text-2xl  { font-size: 1.5rem; }
.text-3xl  { font-size: 1.875rem; }
.text-4xl  { font-size: 2.25rem; }
.text-5xl  { font-size: 3rem; }

/* ── Text colors ── */
.text-white            { color: #fff; }
.text-primary          { color: var(--primary); }
.text-foreground       { color: var(--foreground); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-light-text       { color: var(--light-text); }
.text-background       { color: var(--background); }
.text-amber-400        { color: #fbbf24; }

/* ── Background colors ── */
.bg-card       { background-color: var(--card); }
.bg-secondary  { background-color: var(--secondary); }
.bg-foreground { background-color: var(--foreground); }
.bg-success    { background-color: var(--success); }

/* ── Border ── */
.border        { border-width: 1px; border-style: solid; }
.border-border { border-color: var(--border); }
.border-white  { border-color: #fff; }
.border-2      { border-width: 2px; }
.border-t-2    { border-top-width: 2px; }
.border-r-2    { border-right-width: 2px; }
.border-b-2    { border-bottom-width: 2px; }
.border-l-2    { border-left-width: 2px; }
.border-t      { border-top-width: 1px; border-style: solid; }

/* ── Border radius ── */
.rounded-full { border-radius: 9999px; }
.rounded-xl   { border-radius: 0.75rem; }
.rounded-2xl  { border-radius: 1rem; }
.rounded-3xl  { border-radius: 1.5rem; }

/* ── Effects ── */
.blur-3xl      { filter: blur(64px); }
.opacity-20    { opacity: 0.4; }
.opacity-30    { opacity: 0.3; }
.opacity-80    { opacity: 0.8; }
.backdrop-blur { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* ── Transition / Animation ── */
.transition        { transition: all 0.15s ease; }
.transition-all    { transition: all 0.3s ease; }
.transition-colors { transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }
.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }

/* ── Cursor ── */
.cursor-pointer { cursor: pointer; }

/* ── Hover utilities ── */
.hover\:shadow-soft:hover        { box-shadow: var(--shadow-soft); }
.hover\:-translate-y-1:hover     { transform: translateY(-0.25rem); }
.hover\:-translate-y-0\.5:hover  { transform: translateY(-0.125rem); }
.hover\:scale-105:hover          { transform: scale(1.05); }
.hover\:bg-card:hover            { background-color: var(--card); }
.hover\:text-primary:hover       { color: var(--primary); }
.hover\:opacity-95:hover         { opacity: 0.95; }
.hover\:bg-white\/20:hover       { background-color: rgba(255,255,255,0.2); }
.hover\:border-primary\/40:hover { border-color: rgba(37,99,235,0.4); }

/* ── Group hover ── */
.group:hover .group-hover\:scale-110  { transform: scale(1.1); }
.group:hover .group-hover\:bg-primary { background: var(--gradient-scanner); }
.group:hover .group-hover\:text-white { color: #fff; }
.group:hover .group-hover\:translate-x-1 { transform: translateX(0.25rem); }

/* SVG stroke transition: smooth on both hover-in and hover-out */
.group-hover\:bg-primary svg,
.group-hover\:bg-primary svg * {
  transition: stroke 0.15s ease, color 0.15s ease;
}
/* On hover: force white stroke on svg AND all child elements (beats inline presentation attrs) */
.group:hover .group-hover\:bg-primary svg,
.group:hover .group-hover\:bg-primary svg * {
  stroke: #fff !important;
  color: #fff !important;
}

/* ── Marquee hover-pause ── */
.hover\:\[animation-play-state\:paused\]:hover { animation-play-state: paused; }

/* ── Responsive: sm ≥ 640px ── */
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:flex-row    { flex-direction: row; }
  .sm\:text-2xl    { font-size: 1.5rem; }
}

/* ── Responsive: md ≥ 768px ── */
@media (min-width: 768px) {
  .md\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:grid-cols-5  { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .md\:col-span-2   { grid-column: span 2; }
  .md\:col-span-3   { grid-column: span 3; }
  .md\:order-2      { order: 2; }
  .md\:py-28        { padding-top: 7rem; padding-bottom: 7rem; }
  .md\:p-14         { padding: 3.5rem; }
  .md\:p-16         { padding: 4rem; }
  .md\:text-3xl     { font-size: 1.875rem; }
  .md\:text-4xl     { font-size: 2.25rem; }
  .md\:text-5xl     { font-size: 3rem; }
  .md\:text-sm      { font-size: 0.875rem; }
  .md\:gap-16       { gap: 4rem; }
  .md\:pl-6         { padding-left: 1.5rem; }
  .md\:pr-6         { padding-right: 1.5rem; }
  .md\:space-y-28 > * + * { margin-top: 7rem; }
}

/* ── Responsive: lg ≥ 1024px ── */
@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ── Gradient utilities ── */
.bg-gradient-to-t { background-image: linear-gradient(to top, var(--bg-from, transparent), var(--bg-to, transparent)); }
/* Compound gradient overlay (Who Benefits photo cards) */
.bg-gradient-to-t.from-background.to-transparent {
  background: linear-gradient(to top, var(--background) 0%, color-mix(in srgb, var(--background) 70%, transparent) 50%, transparent 100%);
}

/* ── Opacity color variants (used with /N suffix classes) ── */
.bg-card\/60        { background-color: color-mix(in srgb, var(--card) 60%, transparent); }
.bg-secondary\/60   { background-color: color-mix(in srgb, var(--secondary) 60%, transparent); }
.bg-foreground\/10  { background-color: color-mix(in srgb, var(--foreground) 10%, transparent); }
.bg-white\/10       { background-color: rgba(255,255,255,0.1); }
.bg-primary\/10     { background-color: color-mix(in srgb, var(--primary) 10%, transparent); }
.border-border\/70  { border-color: color-mix(in srgb, var(--border) 70%, transparent); }
.border-border\/60  { border-color: color-mix(in srgb, var(--border) 60%, transparent); }
.border-white\/30   { border-color: rgba(255,255,255,0.3); }
.text-muted-foreground\/25 { color: color-mix(in srgb, var(--muted-foreground) 25%, transparent); }
.text-white\/85     { color: rgba(255,255,255,0.85); }

/* ── Arbitrary-value classes ── */
.w-\[320px\]   { width: 320px; }
.w-\[340px\]   { width: 340px; }
.text-\[11px\] { font-size: 11px; }
.text-\[10px\] { font-size: 10px; }
.text-\[9px\]  { font-size: 9px; }
.border-\[6px\] { border-width: 6px; border-style: solid; }

/* ── md:gap-10 ── */
@media (min-width: 768px) {
  .md\:gap-10 { gap: 2.5rem; }
}

/* ── New-design FAQ accordion (div-based) ── */
.faq-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  text-align: left;
  gap: 1rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-sans);
}
.faq-icon-wrap {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  flex-shrink: 0;
  background-color: var(--secondary);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  transition: background 0.2s, color 0.2s;
}
.faq-item.open .faq-icon-wrap {
  background: var(--gradient-primary);
  color: #fff;
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 1.5rem;
  color: var(--muted-foreground);
  font-size: 0.9rem;
  line-height: 1.75;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.faq-item.open .faq-answer {
  max-height: 200px;
  padding: 0 1.5rem 1.5rem;
}

/* ============================================================
   LARAVEL-SPECIFIC EXTENSIONS
   ============================================================ */

/* Navbar scroll */
#navbar.scrolled .nav-card {
  box-shadow: 0 8px 32px -8px rgba(37,99,235,0.14), 0 2px 8px rgba(0,0,0,0.06);
}

/* Sign-in link */
.nav-signin-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
  opacity: 0.75;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  transition: opacity 0.15s, color 0.15s;
}
.nav-signin-link:hover { opacity: 1; color: var(--primary); }

/* Credits pill */
.nav-credits-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.875rem;
  border-radius: 50px;
  border: 1px solid transparent;
  background: var(--gradient-primary);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.15s, box-shadow 0.15s;
}
.nav-credits-pill:hover { opacity: 0.88; box-shadow: 0 0 0 3px rgba(34,211,238,0.18); }
.nav-credits-pill.nav-credits-empty { background: linear-gradient(135deg,#ef4444 0%,#b91c1c 100%); border-color: transparent; color: #fff; }
.nav-credits-pill.nav-credits-low   { background: linear-gradient(135deg,#f59e0b 0%,#d97706 100%); border-color: transparent; color: #fff; }

/* User dropdown */
.nav-user-wrap { position: relative; }
.nav-user-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem 0.35rem 0.35rem;
  border-radius: 50px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--foreground);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.nav-user-pill:hover { border-color: rgba(37,99,235,0.35); box-shadow: 0 0 0 3px rgba(37,99,235,0.08); }
.nav-user-ava { width:1.75rem;height:1.75rem;border-radius:50%;object-fit:cover; }
.nav-user-initial {
  width:1.75rem;height:1.75rem;border-radius:50%;
  background:var(--gradient-scanner);color:#fff;
  font-size:0.8rem;font-weight:700;display:grid;place-items:center;flex-shrink:0;
}
.nav-user-name { max-width:6rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.nav-user-dropdown {
  display:none;position:absolute;top:calc(100% + 0.5rem);right:0;
  min-width:220px;background:var(--surface);border:1px solid var(--border);
  border-radius:1rem;box-shadow:0 20px 60px -12px rgba(0,0,0,0.15);
  padding:0.5rem;z-index:200;animation:ddFadeIn 0.15s ease;
}
.nav-user-dropdown.open { display:block; }
[data-theme="dark"] .nav-user-dropdown { box-shadow:0 20px 60px -12px rgba(0,0,0,0.5); }
@keyframes ddFadeIn { from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);} }
.nav-user-hd { display:flex;align-items:center;gap:0.75rem;padding:0.6rem 0.75rem; }
.nav-user-hd-ava {
  width:2.25rem;height:2.25rem;border-radius:50%;
  background:var(--gradient-primary);color:#fff;
  font-size:0.9rem;font-weight:700;display:grid;place-items:center;
  flex-shrink:0;overflow:hidden;
}
.nav-user-hd-ava img { width:100%;height:100%;object-fit:cover; }
.nav-user-hd-name  { font-size:0.875rem;font-weight:700;color:var(--foreground); }
.nav-user-hd-email { font-size:0.75rem;color:var(--muted-foreground); }
.nav-dd-sep { border:none;border-top:1px solid var(--border);margin:0.4rem 0; }
.nav-dd-item {
  display:flex;align-items:center;gap:0.625rem;
  padding:0.55rem 0.75rem;border-radius:0.625rem;
  font-size:0.875rem;font-weight:500;color:var(--foreground);
  text-decoration:none;cursor:pointer;background:none;border:none;width:100%;
  transition:background 0.12s,color 0.12s;
}
.nav-dd-item:hover { background:var(--muted); }
.nav-dd-item svg   { color:var(--muted-foreground);flex-shrink:0; }
.nav-dd-upgrade    { color:#d97706; }
.nav-dd-upgrade svg{ color:#d97706; }
.nav-dd-logout:hover { background:rgba(239,68,68,0.08);color:#ef4444; }
.nav-dd-logout:hover svg { color:#ef4444; }

/* Mobile form — no extra spacing */
.nav-mobile form { margin:0; padding:0; }

/* Back to top */
#backToTop {
  position:fixed;bottom:2rem;right:2rem;z-index:100;
  width:2.75rem;height:2.75rem;border-radius:50%;
  background:var(--gradient-primary);color:#fff;border:none;
  display:none;place-items:center;cursor:pointer;
  box-shadow:0 4px 20px rgba(37,99,235,0.35);
  transform:rotate(-90deg);
  transition:opacity 0.2s,box-shadow 0.2s;
}
#backToTop.show { display:grid; }
#backToTop:hover { box-shadow:0 6px 28px rgba(37,99,235,0.5); }

/* Alert popup overlay */
#rvs-popup-overlay {
  display:none;position:fixed;inset:0;z-index:99997;
  background:rgba(6,15,28,0.82);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  align-items:center;justify-content:center;padding:16px;
}
#rvs-popup-overlay.active { display:flex; }

/* platform-icon green variant */
.platform-icon.green { background:rgba(34,197,94,0.12);color:#16a34a; }

/* Low credits banner */
.low-credits-banner {
  background:linear-gradient(135deg,rgba(217,119,6,0.12),rgba(180,83,9,0.08));
  border-bottom:1px solid rgba(217,119,6,0.2);
  padding:0.5rem 1rem;text-align:center;
  font-size:0.82rem;color:#92400e;font-weight:500;
}
[data-theme="dark"] .low-credits-banner {
  color:#fbbf24;
  background:linear-gradient(135deg,rgba(217,119,6,0.15),rgba(180,83,9,0.1));
  border-bottom-color:rgba(217,119,6,0.25);
}

/* ══════════════════════════════════════════════════════════════
   HERO TOOL RESKIN — 100% reference-identical
   Tool section is transparent; .rvs-search-widget is styled to
   be pixel-perfect identical to .search-box.glass-search.
   Dark mode uses [data-theme="dark"] (app) instead of .dark (ref).
   All !important needed to beat tool.css which loads after.
   ══════════════════════════════════════════════════════════════ */

/* 1 ── hero-section: structural only, hero-bg provides background */
.hero-section {
  background: none !important;
  position: relative;
  overflow: hidden;
}

/* 2 ── hero-content: reduce bottom padding — search box is outside */
.hero-section .hero-content {
  padding-bottom: 1.5rem !important;
}
@media (min-width: 1024px) {
  .hero-section .hero-content { padding-top: 5rem !important; }
}

/* 3 ── Tool section: fully transparent, no padding — card-wrap handles spacing */
.hero-section .rvs-tool-section {
  background: transparent !important;
  padding: 0 !important;
  position: relative;
  z-index: 1;
}

/* 4 ── Kill all dark decorative layers — light bg from hero-bg shows */
.hero-section .rvs-aurora,
.hero-section .rvs-scan-beam,
.hero-section .rvs-radar-rings,
.hero-section .rvs-ghost-frames,
.hero-section .rvs-dots,
.hero-section .rvs-platforms-bg,
.hero-section .rvs-widget-aurora {
  display: none !important;
}

/* 5 ── Hide the tool's own heading — hero-content shows it */
.hero-section .rvs-header-wrap { display: none !important; }

/* 6 ── Card wrap: mirrors reference #search wrapper with outer + inner glow */
.hero-section .rvs-card-wrap {
  position: relative !important;
  max-width: 56rem !important;
  margin: 0 auto 0 !important;
  padding: 0 1rem !important;
}
/* outer glow — matches .search-outer-glow */
.hero-section .rvs-card-wrap::before {
  content: '';
  position: absolute;
  inset: -2rem;
  border-radius: 2.5rem;
  background: linear-gradient(135deg, rgba(37,99,235,0.1), rgba(6,182,212,0.15), rgba(20,184,166,0.1));
  filter: blur(2rem);
  pointer-events: none;
  z-index: 0;
}
/* inner glow — matches .search-inner-glow */
.hero-section .rvs-card-wrap::after {
  content: '';
  position: absolute;
  inset: -0.5rem 1rem;
  border-radius: 2rem;
  background: var(--gradient-primary);
  opacity: 0.2;
  filter: blur(2rem);
  pointer-events: none;
  z-index: 0;
}

/* 7 ── Search widget: EXACT .search-box.glass-search values */
.hero-section .rvs-search-widget {
  position: relative !important;
  z-index: 1 !important;
  max-width: none !important;
  background: rgba(255,255,255,0.8) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  border: 1px solid rgba(226,232,240,0.7) !important;
  border-radius: 1.5rem !important;
  padding: 0.625rem !important;
  box-shadow: var(--shadow-card) !important;
  overflow: visible !important;
}
.hero-section .rvs-search-widget::before { display: none !important; }
[data-theme="dark"] .hero-section .rvs-search-widget {
  background: rgba(15,23,42,0.8) !important;
  border-color: rgba(30,41,59,0.7) !important;
}

/* 8 ── Mode row: EXACT .search-tabs values */
.hero-section .rvs-mode-row {
  display: grid !important;
  grid-template-columns: repeat(5,1fr) !important;
  gap: 0.25rem !important;
  border-radius: 1rem !important;
  background: rgba(255,255,255,0.5) !important;
  padding: 0.375rem !important;
  border-bottom: none !important;
  margin: 0 !important;
}
[data-theme="dark"] .hero-section .rvs-mode-row {
  background: rgba(15,23,42,0.5) !important;
}
.hero-section .rvs-mode-sep { display: none !important; }

/* 9 ── Mode tiles: EXACT .search-tab values */
.hero-section .rvs-mode-tile {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.25rem !important;
  border-radius: calc(var(--radius) + 4px) !important;
  padding: 0.625rem 0.5rem !important;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s !important;
  color: var(--muted-foreground) !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
}
.hero-section .rvs-mode-tile::after { display: none !important; }
.hero-section .rvs-mode-tile:hover { background: var(--secondary) !important; }
.hero-section .rvs-mode-tile.active {
  background: var(--gradient-primary) !important;
  color: #fff !important;
  box-shadow: var(--shadow-soft) !important;
}
/* 768px+: tabs go horizontal like reference */
@media (min-width: 768px) {
  .hero-section .rvs-mode-tile {
    flex-direction: row !important;
    gap: 0.5rem !important;
    padding: 0.75rem !important;
  }
  .hero-section .rvs-mt-label { display: flex !important; }
}

/* 10 ── Tile icons: EXACT .search-tab-icon values */
.hero-section .rvs-mt-icon {
  display: grid !important;
  place-items: center !important;
  width: 1.75rem !important;
  height: 1.75rem !important;
  border-radius: 0.5rem !important;
  flex-shrink: 0 !important;
  background: var(--primary-soft) !important;
  color: var(--primary) !important;
  box-shadow: none !important;
}
.hero-section .rvs-mode-tile.active .rvs-mt-icon {
  background: rgba(255,255,255,0.2) !important;
  color: #fff !important;
}

/* 11 ── Tile text: EXACT .search-tab-name + .search-tab-sub */
.hero-section .rvs-mt-label {
  display: none !important; /* icon-only on mobile, text shown at 768px+ */
  min-width: 0 !important;
  text-align: left !important;
  flex-direction: column !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  color: var(--foreground) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.hero-section .rvs-mode-tile.active .rvs-mt-label { color: #fff !important; }
.hero-section .rvs-mt-sub {
  display: none !important; /* shown at 768px+ alongside label */
  font-size: 0.5625rem !important;
  color: var(--light-text) !important;
  white-space: nowrap !important;
}
.hero-section .rvs-mode-tile.active .rvs-mt-sub { color: rgba(255,255,255,0.7) !important; }
@media (min-width: 768px) {
  .hero-section .rvs-mt-sub { display: block !important; }
}

/* 12 ── Search stage: EXACT .search-panels padding */
.hero-section .rvs-search-stage {
  padding: 0.75rem !important;
  margin: 0 !important;
}
@media (min-width: 768px) {
  .hero-section .rvs-search-stage { padding: 1rem !important; }
}

/* 13 ── Command row (URL / keyword input): mirrors .search-input-field */
.hero-section .rvs-cmd-row {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  border-radius: 1rem !important;
  border: 1px solid var(--border) !important;
  background: rgba(255,255,255,0.8) !important;
  padding: 1rem !important;
  box-shadow: none !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
[data-theme="dark"] .hero-section .rvs-cmd-row {
  background: rgba(15,23,42,0.8) !important;
}
.hero-section .rvs-cmd-row:focus-within {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px var(--primary-soft) !important;
}
.hero-section .rvs-cmd-icon { color: var(--light-text) !important; flex-shrink: 0 !important; }
.hero-section .rvs-cmd-row:focus-within .rvs-cmd-icon { color: var(--light-text) !important; }
.hero-section .rvs-cmd-input {
  flex: 1 !important;
  background: transparent !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  color: var(--primary) !important;
  caret-color: var(--primary) !important;
  min-width: 0 !important;
}
.hero-section .rvs-cmd-input::placeholder {
  color: var(--light-text) !important;
  font-weight: 400 !important;
}
/* Hide the inline search btn — main search button handles submit */
.hero-section .rvs-cmd-btn   { display: none !important; }
.hero-section .rvs-btn-shimmer { display: none !important; }

/* 14 ── Platform select: EXACT .search-platform-select */
.hero-section select.rvs-plat-select,
.hero-section .rvs-plat-select {
  border-radius: 1rem !important;
  border: 1px solid var(--border) !important;
  background: rgba(255,255,255,0.8) !important;
  padding: 1rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--foreground) !important;
  cursor: pointer !important;
  transition: border-color 0.15s !important;
}
[data-theme="dark"] .hero-section select.rvs-plat-select,
[data-theme="dark"] .hero-section .rvs-plat-select {
  background: rgba(15,23,42,0.8) !important;
  color: var(--foreground) !important;
}
.hero-section .rvs-plat-select:focus { border-color: var(--primary) !important; }

/* 15 ── Drop zones: EXACT .drop-zone values */
.hero-section .rvs-drop-zone,
.hero-section .rvs-dz-secondary {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.75rem !important;
  border-radius: 1rem !important;
  border: 2px dashed rgba(37,99,235,0.3) !important;
  padding: 2.5rem 1.5rem !important;
  text-align: center !important;
  background: linear-gradient(135deg,
    rgba(37,99,235,0.06),
    rgba(6,182,212,0.06),
    rgba(139,92,246,0.06)
  ) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  cursor: pointer !important;
}
.hero-section .rvs-dz-secondary {
  background: rgba(219,234,254,0.3) !important;
}
[data-theme="dark"] .hero-section .rvs-dz-secondary {
  background: rgba(59,130,246,0.08) !important;
}
.hero-section .rvs-drop-zone:hover,
.hero-section .rvs-dz-secondary:hover,
.hero-section .rvs-dz-secondary.dragover,
.hero-section .rvs-drop-zone.over {
  border-color: var(--primary) !important;
  box-shadow: var(--shadow-glow) !important;
}

/* Drop zone icon: EXACT .drop-zone-icon */
.hero-section .rvs-dz-icon,
.hero-section .rvs-dz-secondary-icon {
  display: grid !important;
  place-items: center !important;
  width: 3.5rem !important;
  height: 3.5rem !important;
  border-radius: 1rem !important;
  background: var(--gradient-primary) !important;
  color: #fff !important;
  box-shadow: var(--shadow-glow) !important;
}
.hero-section .rvs-dz-icon svg,
.hero-section .rvs-dz-secondary-icon svg { color: #fff !important; }

/* Drop zone text */
.hero-section .dz-main,
.hero-section .rvs-dz-secondary-main {
  font-family: var(--font-display) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--foreground) !important;
}
.hero-section .dz-main strong,
.hero-section .rvs-dz-secondary-main strong { color: var(--primary) !important; }
.hero-section .dz-hint,
.hero-section .rvs-dz-secondary-hint {
  margin-top: 0.375rem !important;
  font-size: 0.75rem !important;
  color: var(--light-text) !important;
}

/* 16 ── Platform badges chip row */
.hero-section .plat-lbl { color: var(--light-text) !important; font-size: 0.75rem !important; font-weight: 500 !important; }
.hero-section .rvs-pbadge {
  border-radius: 9999px !important;
  background: var(--primary-soft) !important;
  padding: 0.125rem 0.625rem !important;
  font-size: 0.6875rem !important;
  font-weight: 500 !important;
  color: var(--primary) !important;
  border: none !important;
}

/* 17 ── Full-width search button: EXACT .search-btn values */
.hero-section .rvs-search-full {
  display: inline-flex !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.625rem !important;
  border-radius: 1rem !important;
  background: var(--gradient-primary) !important;
  padding: 1rem 1.5rem !important;
  font-family: var(--font-display) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  border: none !important;
  box-shadow: var(--shadow-soft) !important;
  transition: transform 0.15s, box-shadow 0.15s !important;
  margin-top: 1rem !important;
  cursor: pointer !important;
  letter-spacing: 0 !important;
}
.hero-section .rvs-search-full:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(37,99,235,.45), 0 2px 8px rgba(0,0,0,.12) !important;
}

/* 18 ── Meta bar below button: EXACT .search-meta values */
.hero-section .rvs-widget-foot,
.hero-section .rvs-meta-bar {
  margin-top: 1rem !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem 1.25rem !important;
  font-size: 0.6875rem !important;
  font-weight: 500 !important;
  color: var(--light-text) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}
.hero-section .rvs-meta-bar * { color: var(--light-text) !important; }
.hero-section .rvs-meta-bar a { color: var(--primary) !important; text-decoration: underline; }

/* 19 ── Screenshot thumbnails */
.hero-section .rvs-ss-thumb {
  border-color: rgba(37,99,235,0.3) !important;
  background: rgba(37,99,235,0.05) !important;
}
.hero-section .rvs-ss-tip {
  background: var(--primary-soft) !important;
  color: var(--primary) !important;
}
.hero-section .rvs-ss-add-row {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  margin-top: 0.75rem !important;
}
.hero-section .rvs-ss-add-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  border-radius: calc(var(--radius) + 4px) !important;
  padding: 0.625rem 1rem !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  background: var(--gradient-primary) !important;
  box-shadow: var(--shadow-soft) !important;
  border: none !important;
  cursor: pointer !important;
  transition: transform 0.15s, box-shadow 0.15s !important;
}
.hero-section .rvs-ss-add-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(37,99,235,.45), 0 2px 8px rgba(0,0,0,.12) !important;
}
.hero-section .rvs-ss-count {
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: var(--light-text) !important;
}

/* 20 ── Hero badges below tool: EXACT reference .hero-badges values */
.hero-tool-badges { position: relative; z-index: 1; }
.hero-badges {
  margin-top: 2rem !important;
  margin-bottom: 3rem !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem 1.5rem !important;
  padding: 0 !important;
}
.hero-badge-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: var(--light-text) !important;
}
.hero-badge-item svg { color: var(--success) !important; flex-shrink: 0; }

/* ── hero-h1: fluid, always single line ─────────────────────────
   clamp ensures the three words fit on one line at every viewport.
   white-space: nowrap enforces it; overflow stays hidden via hero-section. */
.hero-h1 {
  font-size: clamp(1.5rem, 7.5vw, 4.5rem) !important;
  white-space: nowrap !important;
  overflow: visible !important;
}
/* Kill the fixed-size breakpoint overrides so clamp stays in control */
@media (min-width: 640px)  { .hero-h1 { font-size: clamp(1.5rem, 7.5vw, 4.5rem) !important; } }
@media (min-width: 768px)  { .hero-h1 { font-size: clamp(1.5rem, 7.5vw, 4.5rem) !important; } }

/* ── hero-desc: fluid, max 2 visible lines ───────────────────── */
.hero-desc {
  /* font-size: clamp(0.875rem, 2.2vw, 1.125rem) !important;
  line-height: 1.65 !important;
  max-width: 38rem !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important; */
}
@media (min-width: 640px) { .hero-desc { font-size: clamp(0.875rem, 2.2vw, 1.125rem) !important; } }

/* ── hero-content: reduce top padding on mobile ─────────────── */
@media (max-width: 640px) {
  .hero-section .hero-content {
    padding-top: 2rem !important;
    padding-bottom: 0.5rem !important;
  }
}

/* ── #reverse-search mobile: kill overflow-causing glows,
      fix drop zone padding and text wrapping ────────────────── */
@media (max-width: 640px) {
  /* Remove decorative glows that extend -2rem beyond the card wrap */
  .hero-section .rvs-card-wrap::before,
  .hero-section .rvs-card-wrap::after { display: none !important; }

  /* Ensure widget chain is fully constrained */
  .hero-section .rvs-card-wrap {
    padding: 0 0.5rem !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  .hero-section .rvs-search-widget {
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 0.375rem !important;
  }
  .hero-section .rvs-mode-row {
    padding: 0.25rem !important;
    gap: 0.125rem !important;
  }
  .hero-section .rvs-mode-tile {
    padding: 0.5rem 0.25rem !important;
  }
  .hero-section .rvs-search-stage {
    padding: 0.5rem !important;
  }

  /* Drop zone: compact padding, ensure text wraps */
  .hero-section .rvs-drop-zone,
  .hero-section .rvs-dz-secondary {
    padding: 1.25rem 0.75rem !important;
  }
  .hero-section .dz-main,
  .hero-section .rvs-dz-secondary-main {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  .hero-section .dz-main strong,
  .hero-section .dz-main a,
  .hero-section .rvs-dz-secondary-main strong,
  .hero-section .rvs-dz-secondary-main a {
    white-space: normal !important;
    word-break: break-word !important;
  }
  .hero-section .dz-hint,
  .hero-section .rvs-dz-secondary-hint {
    font-size: 0.68rem !important;
    word-break: break-all !important;
  }

  /* Keyword / URL / Transcript panels: compact padding */
  #reverse-search #rvs-panel-keyword,
  #reverse-search #rvs-panel-url,
  #reverse-search #rvs-panel-transcript {
    padding: 1rem 0.75rem !important;
  }

  /* Search button: standard padding */
  .hero-section .rvs-search-full {
    padding: 0.875rem 1rem !important;
    font-size: 0.9rem !important;
  }

  /* Meta bar: allow smaller gap on very narrow screens */
  .hero-section .rvs-widget-foot,
  .hero-section .rvs-meta-bar {
    gap: 0.25rem 0.75rem !important;
    font-size: 0.6rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   NEW #reverse-search SECTION — override tool.css conflicts
   The new HTML uses reference classes (.search-tab, .search-panel,
   .drop-zone etc.) with old JS selectors (.rvs-tab, .rvs-panel)
   as co-classes. These overrides fix tool.css rules that would
   otherwise break the reference visual layout.
   ══════════════════════════════════════════════════════════════ */

/* Zero-CLS tab switching via CSS grid stacking.
   All panels share grid cell (row 1 / col 1) — container height never changes.
   visibility:hidden keeps inactive panels in layout so the grid row height is
   always locked to the tallest panel; only the active one is visible. */
#reverse-search .search-panels {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
}
#reverse-search .rvs-panel {
  grid-row: 1 !important;
  grid-column: 1 !important;
  display: block !important;
  position: static !important;
  inset: auto !important;
  opacity: 1 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;
}
#reverse-search .rvs-panel.active {
  visibility: visible !important;
  pointer-events: auto !important;
}
/* Explicit row placement for post-panel elements so they never shift */
#reverse-search .search-btn      { grid-row: 2 !important; grid-column: 1 !important; }
#reverse-search .rvs-credit-hint { grid-row: 3 !important; grid-column: 1 !important; }
#reverse-search .search-meta     { grid-row: 4 !important; grid-column: 1 !important; }

/* tool.css: .rvs-cmd-row { dark glass bg + cyan border }
   Reset to match .search-input-field reference styles */
#reverse-search .rvs-cmd-row {
  background: rgba(255,255,255,0.8) !important;
  border: 1px solid var(--border) !important;
  border-radius: 1rem !important;
  overflow: visible !important;
  box-shadow: none !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
[data-theme="dark"] #reverse-search .rvs-cmd-row {
  background: rgba(15,23,42,0.8) !important;
}
#reverse-search .rvs-cmd-row:focus-within {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px var(--primary-soft) !important;
  background: rgba(255,255,255,0.8) !important;
}
[data-theme="dark"] #reverse-search .rvs-cmd-row:focus-within {
  background: rgba(15,23,42,0.8) !important;
}

/* Ensure #search div sits above the hero-bg layers */
#search { position: relative; z-index: 1; }

/* Fix "file selected" state text colours on light drop zone */
#rvsZone .up-main         { color: var(--foreground) !important; }
#rvsZone .up-main strong  { color: var(--primary) !important; }
#rvsZone .up-hint         { color: var(--light-text) !important; }

/* tool.css gives .rvs-prem-tile.active a faint gold bg and a gold ::after stripe —
   override both so URL/Transcript tabs use the same blue-purple gradient as other tabs */
#reverse-search .rvs-prem-tile.active {
  background: var(--gradient-primary) !important;
  box-shadow: var(--shadow-soft) !important;
}
#reverse-search .rvs-prem-tile.active::after {
  display: none !important;
}
#reverse-search .rvs-prem-tile.active .search-tab-icon {
  background: rgba(255,255,255,0.2) !important;
  color: #fff !important;
}
#reverse-search .rvs-prem-tile.active .search-tab-name { color: #fff !important; }
#reverse-search .rvs-prem-tile.active .search-tab-sub  { color: rgba(255,255,255,0.7) !important; }

/* Keyword, URL, and Transcript panels: wrap in the same dashed-border + gradient
   container as the drop zones so all tabs look visually consistent at any height */
#reverse-search #rvs-panel-keyword,
#reverse-search #rvs-panel-url,
#reverse-search #rvs-panel-transcript {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  border-radius: 1rem;
  border: 2px dashed rgba(37,99,235,0.3);
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg,
    rgba(37,99,235,0.06),
    rgba(6,182,212,0.06),
    rgba(139,92,246,0.06));
}
[data-theme="dark"] #reverse-search #rvs-panel-keyword,
[data-theme="dark"] #reverse-search #rvs-panel-url,
[data-theme="dark"] #reverse-search #rvs-panel-transcript {
  border-color: rgba(37,99,235,0.2);
  background: linear-gradient(135deg,
    rgba(37,99,235,0.08),
    rgba(6,182,212,0.05),
    rgba(139,92,246,0.07));
}
/* .search-input-field has flex:1 globally — fine in row layouts, but
   inside the URL panel flex-column it would stretch to fill all height */
#reverse-search #rvs-panel-url .search-input-field {
  flex: none !important;
}

/* ============================================================
   AUTH PAGES  (login, register, forgot-password, reset-password)
   ============================================================ */
.auth-section {
  min-height: calc(100vh - 80px);
  display: flex; align-items: center; justify-content: center;
  padding: 48px 16px;
  background: var(--section-3);
  position: relative; overflow: hidden;
}
.auth-section::before {
  content: ''; position: absolute;
  width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.12) 0%, transparent 65%);
  top: -200px; left: -200px; pointer-events: none;
}
.auth-section::after {
  content: ''; position: absolute;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,.09) 0%, transparent 65%);
  bottom: -150px; right: -150px; pointer-events: none;
}
[data-theme="dark"] .auth-section {
  background: var(--background);
}

/* Card */
@keyframes authCardIn {
  from { opacity:0; transform:translateY(28px) scale(.97); }
  to   { opacity:1; transform:none; }
}
.auth-card {
  background: var(--card);
  border-radius: 24px;
  overflow: hidden;
  width: 100%; max-width: 460px;
  box-shadow: 0 24px 64px rgba(6,14,30,.18), 0 0 0 1px rgba(37,99,235,.1), 0 4px 16px rgba(0,0,0,.07);
  position: relative; z-index: 1;
  animation: authCardIn .4s cubic-bezier(.34,1.56,.64,1) both;
}

/* Hero header */
.auth-hero {
  background: linear-gradient(145deg, #060e1e 0%, #0d2240 45%, #0d1f4a 100%);
  position: relative; overflow: hidden;
  padding: 28px 28px 24px;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 6px;
}

/* Animated orbs */
@keyframes authOrb {
  0%,100% { transform: scale(1) translate(0,0); }
  33%      { transform: scale(1.12) translate(6px,-8px); }
  66%      { transform: scale(.92) translate(-5px,5px); }
}
.auth-orb { position:absolute; border-radius:50%; filter:blur(40px); pointer-events:none; }
.auth-orb-1 { width:140px; height:140px; background:radial-gradient(circle,rgba(37,99,235,.55),transparent 70%); top:-30px; left:-30px; animation:authOrb 7s ease-in-out infinite; }
.auth-orb-2 { width:110px; height:110px; background:radial-gradient(circle,rgba(139,92,246,.45),transparent 70%); bottom:-15px; right:5px; animation:authOrb 9s ease-in-out infinite reverse; }
.auth-orb-3 { width:90px;  height:90px;  background:radial-gradient(circle,rgba(6,182,212,.35),transparent 70%); top:50%; right:22%; animation:authOrb 11s ease-in-out infinite 2s; }

/* Pulsing rings */
@keyframes authRingPulse {
  0%   { transform:translate(-50%,-50%) scale(.8); opacity:.55; }
  100% { transform:translate(-50%,-50%) scale(1.65); opacity:0; }
}
.auth-ring { position:absolute; top:50%; left:50%; border-radius:50%; border:1px solid rgba(37,99,235,.25); pointer-events:none; animation:authRingPulse 3.5s ease-out infinite; }
.auth-ring-1 { width:120px; height:120px; animation-delay:0s; }
.auth-ring-2 { width:120px; height:120px; animation-delay:1.15s; }
.auth-ring-3 { width:120px; height:120px; animation-delay:2.3s; }

/* Quantum pulse scanner */
.auth-scan-wrap {
  position:relative;
  width:120px; height:120px;
  display:flex; align-items:center; justify-content:center;
  perspective:600px;
  flex-shrink:0;
  z-index:2;
}
.auth-scan-core {
  position:absolute;
  width:58px; height:58px; border-radius:50%;
  background:radial-gradient(circle,rgba(37,99,235,.72) 0%,rgba(37,99,235,.38) 40%,rgba(37,99,235,.08) 68%,transparent 100%);
  animation:authCorePulse 1.9s ease-in-out infinite;
  z-index:1;
}
@keyframes authCorePulse {
  0%,100% { transform:scale(1);    opacity:.62; }
  50%     { transform:scale(1.72); opacity:1;   }
}
.auth-scan-ring-outer {
  position:absolute;
  width:114px; height:114px; border-radius:50%;
  background:conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(37,99,235,0) 14deg,
    rgba(37,99,235,1) 52deg,
    rgba(6,182,212,.88) 82deg,
    rgba(139,92,246,.72) 122deg,
    rgba(37,99,235,.1) 176deg,
    transparent 242deg,
    rgba(37,99,235,.58) 294deg,
    rgba(37,99,235,1) 338deg,
    transparent 360deg
  );
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));
  mask:        radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));
  animation:authSpin 2s linear infinite;
  z-index:3;
}
.auth-scan-ring-inner {
  position:absolute;
  width:94px; height:94px; border-radius:50%;
  background:conic-gradient(
    from 180deg,
    transparent 0deg,
    rgba(139,92,246,0) 18deg,
    rgba(139,92,246,.95) 58deg,
    rgba(167,139,250,.72) 88deg,
    rgba(6,182,212,.48) 128deg,
    transparent 198deg,
    rgba(139,92,246,.5) 298deg,
    rgba(139,92,246,.95) 344deg,
    transparent 360deg
  );
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  mask:        radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  animation:authSpin 2.6s linear infinite reverse;
  z-index:3;
}
@keyframes authSpin { to { transform:rotate(360deg); } }
.auth-scan-atom-1,.auth-scan-atom-2,.auth-scan-atom-3 {
  position:absolute; width:100px; height:100px;
  border-radius:50%; z-index:2;
}
.auth-scan-atom-1 { border:1.5px solid rgba(37,99,235,.62);  animation:authAtom1 3.4s linear infinite; }
.auth-scan-atom-2 { border:1.5px solid rgba(139,92,246,.55); animation:authAtom2 4.8s linear infinite; }
.auth-scan-atom-3 { border:1px   solid rgba(6,182,212,.38);  animation:authAtom3 2.9s linear infinite reverse; }
@keyframes authAtom1 { from{transform:rotateX(72deg) rotateZ(0deg)}   to{transform:rotateX(72deg) rotateZ(360deg)} }
@keyframes authAtom2 { from{transform:rotateX(72deg) rotateZ(60deg)}  to{transform:rotateX(72deg) rotateZ(420deg)} }
@keyframes authAtom3 { from{transform:rotateX(72deg) rotateZ(120deg)} to{transform:rotateX(72deg) rotateZ(480deg)} }
.auth-scan-center {
  position:relative; z-index:10;
  animation:authLogoFloat 2.8s ease-in-out infinite;
}
@keyframes authLogoFloat {
  0%,100% { transform:translateY(0);    filter:drop-shadow(0 4px 18px rgba(37,99,235,.9))  drop-shadow(0 0 38px rgba(37,99,235,.48)); }
  50%     { transform:translateY(-7px); filter:drop-shadow(0 12px 30px rgba(37,99,235,1))  drop-shadow(0 0 60px rgba(37,99,235,.72)); }
}
.auth-scan-logo {
  height:50px; width:auto; max-width:68px;
  object-fit:contain; display:block;
}

.auth-badge {
  font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.68);
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15);
  border-radius:50px; padding:3px 14px;
  position:relative; z-index:2;
}
.auth-hero-title {
  font-size:1.3rem; font-weight:800; color:#fff; margin:0;
  letter-spacing:-.02em; position:relative; z-index:2;
}
.auth-hero-sub {
  font-size:.8rem; color:rgba(255,255,255,.52); margin:0;
  position:relative; z-index:2;
}

/* Form body */
.auth-body { padding:1.6rem 1.75rem 1.75rem; }

/* Divider */
.auth-divider {
  display:flex; align-items:center; gap:.75rem;
  margin:1rem 0; color:#94a3b8; font-size:.78rem; font-weight:500; letter-spacing:.02em;
}
.auth-divider::before,.auth-divider::after {
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg,transparent,var(--border),transparent);
}

/* Social OAuth grid */
.social-auth-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-bottom:.25rem;
}
.btn-social {
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  background:var(--card); border:1.5px solid var(--border);
  color:var(--foreground); border-radius:12px; padding:.6rem .5rem;
  font-size:.82rem; font-weight:600; cursor:pointer;
  transition:all .2s ease; text-decoration:none;
  box-shadow:0 1px 6px rgba(0,0,0,.06); white-space:nowrap;
}
.btn-social:hover {
  color:var(--foreground); transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,.1);
}
.btn-social-google:hover    { border-color:#4285F4; background:var(--section-3); }
.btn-social-microsoft:hover { border-color:#00A4EF; background:var(--section-3); }
.btn-social-linkedin:hover  { border-color:#0A66C2; background:var(--section-3); }

/* Labels */
.auth-label {
  font-size:.75rem; font-weight:700; color:var(--muted-foreground);
  margin-bottom:.3rem; display:block;
  text-transform:uppercase; letter-spacing:.04em;
}

/* Inputs */
.auth-input {
  width:100%; border:1.5px solid var(--border); border-radius:12px;
  padding:.68rem 1rem; font-family:'DM Sans',sans-serif; font-size:.92rem;
  color:var(--foreground); background:var(--section-1); transition:all .2s ease;
}
.auth-input:focus {
  outline:none; border-color:rgba(37,99,235,.6); background:var(--card);
  box-shadow:0 0 0 4px rgba(37,99,235,.1), 0 2px 10px rgba(37,99,235,.07);
}
.auth-input::placeholder { color:var(--light-text); }
.auth-input.is-invalid { border-color:rgba(220,38,38,.55); box-shadow:0 0 0 4px rgba(220,38,38,.07); }
.auth-feedback { color:#ef4444; font-size:.77rem; margin-top:.3rem; font-weight:500; }

/* Neutralize browser autofill's own background (it ignores author background otherwise, causing a white box in dark mode) */
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--foreground) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--section-1) inset !important;
  box-shadow: 0 0 0 1000px var(--section-1) inset !important;
  caret-color: var(--foreground);
  transition: background-color 9999s ease-in-out 0s;
}

/* Password show/hide toggle — own tinted chip so it stays visible regardless of the
   input's actual painted background (autofill/password-manager highlighting can
   override an input's author background independently of theme). */
.auth-pwd-wrap { position:relative; }
.auth-pwd-wrap .auth-input { padding-right:2.75rem; }
.auth-pwd-toggle {
  position:absolute; top:50%; right:.5rem; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center;
  width:1.9rem; height:1.9rem; padding:0; border:none; border-radius:50%;
  background:rgba(37,99,235,.12); color:var(--primary); cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.auth-pwd-toggle:hover { background:rgba(37,99,235,.2); color:var(--primary); }
.auth-pwd-toggle:focus-visible { outline:2px solid rgba(37,99,235,.5); outline-offset:2px; }
.auth-pwd-toggle svg { width:18px; height:18px; }
.auth-pwd-toggle .auth-pwd-icon-off { display:none; }
.auth-pwd-toggle.is-visible .auth-pwd-icon-on { display:none; }
.auth-pwd-toggle.is-visible .auth-pwd-icon-off { display:block; }

/* Submit button */
.btn-auth {
  width:100%;
  background: var(--gradient-primary);
  color:#fff; border:none; border-radius:12px;
  padding:.78rem 1.5rem; font-size:.95rem; font-weight:700;
  font-family:'DM Sans',sans-serif; cursor:pointer;
  transition: transform .2s, box-shadow .2s;
  box-shadow:0 4px 16px rgba(37,99,235,.35), 0 1px 4px rgba(0,0,0,.1);
  letter-spacing:.01em; margin-top:.15rem;
  display:block; text-align:center; text-decoration:none;
}
.btn-auth:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(37,99,235,.45), 0 2px 8px rgba(0,0,0,.12);
  color:#fff;
}
.btn-auth:active { transform:translateY(0); box-shadow:0 2px 8px rgba(37,99,235,.3); }

/* ── Gradient button shine — ::after slide (all gradient buttons) ──────
   Background stays at 100% so full gradient is always visible.
   Shine is a separate translucent overlay that sweeps left→right on hover.
   ─────────────────────────────────────────────────────────────────────── */
@keyframes btnShineSlide {
  0%   { transform: skewX(-20deg) translateX(-200%); }
  100% { transform: skewX(-20deg) translateX(400%); }
}
.search-btn,
.btn-auth,
.btn-primary-custom,
.btn-pricing-primary,
.btn-accept,
.newsletter-btn,
.cta-btn-primary,
.cp-cta-btn-primary,
.nav-cta,
.nav-mobile .nav-mobile-cta,
.hero-section .rvs-search-full {
  position: relative;
  overflow: hidden;
}
.search-btn::after,
.btn-auth::after,
.btn-primary-custom::after,
.btn-pricing-primary::after,
.btn-accept::after,
.newsletter-btn::after,
.cta-btn-primary::after,
.cp-cta-btn-primary::after,
.nav-cta::after,
.nav-mobile .nav-mobile-cta::after,
.hero-section .rvs-search-full::after {
  content: '';
  position: absolute;
  top: -50%; left: 0;
  width: 40%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-20deg) translateX(-200%);
  pointer-events: none;
}
.search-btn:hover::after,
.btn-auth:hover::after,
.btn-primary-custom:hover::after,
.btn-pricing-primary:hover::after,
.btn-accept:hover::after,
.newsletter-btn:hover::after,
.cta-btn-primary:hover::after,
.cp-cta-btn-primary:hover::after,
.nav-cta:hover::after,
.nav-mobile .nav-mobile-cta:hover::after,
.hero-section .rvs-search-full:hover::after {
  animation: btnShineSlide 1.2s linear infinite;
}

/* Hint/info box (used on forgot-password page) */
.auth-hint {
  background:rgba(37,99,235,.06); border:1px solid rgba(37,99,235,.18);
  border-radius:10px; padding:.85rem 1rem;
  font-size:.82rem; color:var(--muted-foreground); line-height:1.6; margin-bottom:1rem;
}
[data-theme="dark"] .auth-hint {
  background:rgba(37,99,235,.1); border-color:rgba(37,99,235,.25);
}

/* ============================================================
   BILLING — subscription-history, subscription-cancel/success
   ============================================================ */

/* Status badges */
.status-badge {
  display:inline-flex; align-items:center;
  padding:.15rem .65rem; border-radius:50px;
  font-size:.75rem; font-weight:700; text-transform:capitalize;
  border:1px solid transparent;
}
.status-active, .status-completed   { background:rgba(34,197,94,.1);   color:#16a34a; border-color:rgba(34,197,94,.22); }
.status-cancelled, .status-failed   { background:rgba(239,68,68,.08);  color:#dc2626; border-color:rgba(239,68,68,.15); }
.status-expired, .status-chargeback { background:rgba(100,116,139,.1); color:var(--muted-foreground); border-color:rgba(100,116,139,.2); }
.status-pending                     { background:rgba(245,158,11,.08); color:#d97706; border-color:rgba(245,158,11,.18); }
.status-refunded                    { background:rgba(37,99,235,.08);  color:#2563eb; border-color:rgba(37,99,235,.18); }

/* Billing hero header */
.billing-hero {
  background: linear-gradient(135deg, var(--section-3) 0%, var(--section-1) 100%);
  border-bottom:1px solid var(--border); padding:2.5rem 0 2rem; margin-bottom:2.5rem;
}
.billing-hero h1 { font-size:1.8rem; font-weight:800; color:var(--foreground); margin:0 0 .35rem; }
.billing-hero p  { color:var(--muted-foreground); font-size:.95rem; margin:0; }
[data-theme="dark"] .billing-hero {
  background: linear-gradient(135deg, var(--section-1) 0%, var(--surface) 100%);
}

/* Billing section wrapper */
.billing-section { padding:50px 0 80px; }

/* Account card */
.account-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-md); box-shadow:var(--shadow-sm); overflow:hidden;
}
.account-card .card-head {
  padding:1rem 1.25rem; border-bottom:1px solid var(--border);
  font-size:.9rem; font-weight:700; color:var(--foreground);
  background:var(--secondary); display:flex; align-items:center; justify-content:space-between;
}
.account-card .card-body-inner { padding:1.25rem; }

/* Usage / billing table */
.usage-table { width:100%; border-collapse:collapse; }
.usage-table th {
  font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted-foreground); padding:.6rem 1rem;
  background:var(--secondary); border-bottom:1px solid var(--border); text-align:left;
}
.usage-table td {
  padding:.65rem 1rem; border-bottom:1px solid var(--border);
  font-size:.875rem; color:var(--muted-foreground);
}
.usage-table tr:last-child td { border-bottom:none; }

/* Result pages (success / cancel after checkout) */
.result-section {
  min-height:calc(100vh - 80px);
  display:flex; align-items:center; justify-content:center;
  padding:60px 16px;
  background: var(--section-3);
}
[data-theme="dark"] .result-section {
  background: var(--background);
}
.result-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:0px;
  text-align:center; max-width:500px; width:100%;
  box-shadow:var(--shadow-lg);
}
.result-card .result-icon { font-size:3.5rem; margin-bottom:1rem; }
.result-card h1 { font-size:1.75rem; font-weight:800; margin-bottom:.75rem; }
.result-card > p { color:var(--muted-foreground); line-height:1.7; margin-bottom:1.75rem; }

/* ============================================================
   AUTH PAGE — TWO-COLUMN LAYOUT
   ============================================================ */
.page-auth {
  position: relative;
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 3rem 0 4rem;
  background: var(--background);
}

.auth-layout {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 900px) {
  .auth-layout { grid-template-columns: 1fr 460px; }
}

.auth-aside { display: none; }
@media (min-width: 900px) { .auth-aside { display: block; } }

.auth-aside-tagline {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.8vw, 2.4rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--foreground);
  margin: 0.75rem 0 1rem;
}
.auth-aside-sub {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted-foreground);
  max-width: 28rem;
  margin-bottom: 2rem;
}
.auth-aside-features {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2rem;
}
.auth-aside-feature {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: transform 0.2s, box-shadow 0.2s;
}
.auth-aside-feature:hover { transform: translateX(4px); box-shadow: var(--shadow-soft); }
.auth-aside-feature-icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: calc(var(--radius) + 4px);
  flex-shrink: 0;
}
.auth-aside-feature-text h4 {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--foreground);
  margin: 0 0 0.15rem;
}
.auth-aside-feature-text p {
  font-size: 0.8rem;
  color: var(--muted-foreground);
  margin: 0;
  line-height: 1.5;
}
.auth-aside-stats {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.auth-stat-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 0.6rem 1.1rem;
  border-radius: 50px;
  background: var(--primary-soft);
  border: 1px solid rgba(37,99,235,0.2);
}
.auth-stat-pill .val {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
}
.auth-stat-pill .lbl {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0.2rem;
}

/* Form panel (right side) */
.auth-form-panel {
  border-radius: 1.5rem;
  padding: 2.5rem;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}
.auth-form-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.75rem;
  text-decoration: none;
}
.auth-form-logo img { height: 2.25rem; width: 2.25rem; object-fit: contain; }
.auth-form-logo-text {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--foreground);
  letter-spacing: -0.01em;
}
.auth-form-logo-text .text-primary { color: var(--primary); }

.auth-form-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--foreground);
  margin: 0 0 0.35rem;
  letter-spacing: -0.02em;
}
.auth-form-sub {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin: 0 0 1.5rem;
  line-height: 1.5;
}
.auth-form-group { margin-bottom: 1rem; }
.auth-footer-text {
  text-align: center;
  margin-top: 1.1rem;
  font-size: 0.84rem;
  color: var(--muted-foreground);
}
.auth-footer-text a { color: var(--primary); font-weight: 600; }
.auth-footer-text a:hover { text-decoration: underline; }
.auth-remember {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  color: var(--muted-foreground);
  cursor: pointer;
}
.auth-remember input { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; }
.auth-forgot-link {
  font-size: 0.75rem;
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}
.auth-forgot-link:hover { text-decoration: underline; }

/* Hint box (forgot-password page) */
.auth-hint-box {
  background: rgba(37,99,235,.05);
  border: 1px solid rgba(37,99,235,.18);
  border-radius: 12px;
  padding: .9rem 1rem;
  margin-bottom: 1rem;
  font-size: .82rem;
  color: var(--muted-foreground);
  line-height: 1.55;
  display: flex;
  gap: .6rem;
  align-items: flex-start;
}
.auth-hint-box .hint-icon { font-size: 1rem; flex-shrink: 0; margin-top: 0.05rem; }
[data-theme="dark"] .auth-hint-box {
  background: rgba(37,99,235,.1);
  border-color: rgba(37,99,235,.25);
}

/* Free tier badge (register) */
.free-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(37,99,235,.06);
  border: 1px solid rgba(37,99,235,.22);
  color: var(--primary);
  border-radius: 50px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 5px 14px;
  margin-bottom: 1rem;
}
.free-tier-badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.2);
  position: relative;
}
/* Pulse on transform/opacity only (composited) — animating box-shadow
   repainted every frame on the main thread and hurt INP. */
.free-tier-badge .dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: rgba(37,99,235,.2);
  animation: freeDotPulse 2s ease-in-out infinite;
}
@keyframes freeDotPulse {
  0%,100% { transform: scale(1.85); opacity: 1; }
  50%      { transform: scale(2.7);  opacity: .4; }
}
.terms-note {
  text-align: center;
  margin-top: 0.65rem;
  font-size: 0.76rem;
  color: var(--light-text);
  line-height: 1.5;
}
.terms-note a { color: var(--primary); }

/* ============================================================
   IN-PAGE AUTH MODAL (guest "Get Started" → sign in / create
   account without leaving the page — see partials/_auth_modal)
   ============================================================ */
.rvs-auth-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(8, 10, 20, .6);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  align-items: flex-start; justify-content: center;
  padding: 5vh 16px;
  overflow-y: auto;
}
.rvs-auth-overlay.active { display: flex; animation: rvsAuthFadeIn .18s ease; }
@keyframes rvsAuthFadeIn { from { opacity: 0; } to { opacity: 1; } }

.rvs-auth-box {
  position: relative;
  width: 100%; max-width: 440px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  box-shadow: 0 30px 80px rgba(0,0,0,.35), 0 4px 20px rgba(0,0,0,.15);
  padding: 2.25rem 2rem 1.75rem;
  animation: rvsAuthBoxIn .24s cubic-bezier(.34,1.56,.64,1);
}
@keyframes rvsAuthBoxIn {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.rvs-auth-close {
  position: absolute; top: 1.1rem; right: 1.1rem;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--muted-foreground); cursor: pointer;
  transition: all .15s;
}
.rvs-auth-close:hover { color: var(--foreground); border-color: var(--primary); transform: rotate(90deg); }

.rvs-auth-plan-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  background: color-mix(in srgb, var(--primary) 10%, var(--card));
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  color: var(--primary);
  font-size: .72rem; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase;
  padding: .35rem .85rem; border-radius: 50px;
  margin-bottom: 1rem;
}
.rvs-auth-plan-arrow { font-weight: 700; }

.rvs-auth-title {
  font-family: var(--font-display);
  font-size: 1.35rem; font-weight: 800; color: var(--foreground);
  margin: 0 0 .35rem; letter-spacing: -0.01em;
}
.rvs-auth-sub {
  font-size: .85rem; color: var(--muted-foreground);
  line-height: 1.5; margin: 0 0 1.25rem;
}

.rvs-auth-tabs {
  display: flex; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 4px; gap: 2px; margin-bottom: 1.1rem;
}
.rvs-auth-tab {
  flex: 1; padding: .55rem .75rem; border: none; border-radius: 9px;
  background: transparent; color: var(--muted-foreground);
  font-size: .85rem; font-weight: 700; font-family: var(--font-sans);
  cursor: pointer; transition: all .18s;
}
.rvs-auth-tab.active {
  background: var(--gradient-primary); color: #fff;
  box-shadow: var(--shadow-soft);
}

.rvs-auth-google {
  width: 100%; padding: .75rem 1rem; font-size: .88rem;
  margin-bottom: .25rem;
}
.rvs-auth-google svg { flex-shrink: 0; }

.rvs-auth-box .auth-divider { margin: .9rem 0; }

.rvs-auth-panel { display: none; }
.rvs-auth-panel.active { display: block; animation: rvsAuthPanelIn .16s ease; }
@keyframes rvsAuthPanelIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.rvs-auth-box .auth-form-group { margin-bottom: .85rem; }
.rvs-auth-box .btn-auth { width: 100%; margin-top: .25rem; }
.rvs-auth-box .terms-note { margin-top: .85rem; }

.rvs-auth-switch {
  text-align: center; margin: 1rem 0 0;
  font-size: .82rem; color: var(--muted-foreground);
}
.rvs-auth-switch a { color: var(--primary); font-weight: 700; text-decoration: none; }
.rvs-auth-switch a:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .rvs-auth-overlay { padding: 0; align-items: flex-end; }
  .rvs-auth-box { border-radius: 1.5rem 1.5rem 0 0; max-width: 100%; padding: 1.75rem 1.25rem 1.5rem; max-height: 92vh; overflow-y: auto; }
}

/* ============================================================
   PRICING PAGE
   ============================================================ */
.pricing-page-section {
  position: relative;
  padding: 4rem 0 6rem;
  overflow: hidden;
  background: var(--background);
}
.pricing-page-hero {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1;
}
.pricing-page-hero p {
  font-size: 1.05rem;
  color: var(--muted-foreground);
  margin: 0.75rem auto 0;
  max-width: 38rem;
}

/* Cycle toggle */
.cycle-toggle {
  display: flex;
  justify-content: center;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1;
}
.cycle-toggle-inner {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: 4px;
  gap: 2px;
  box-shadow: var(--shadow-card);
}
.cycle-btn {
  padding: 0.45rem 1.5rem;
  border-radius: 50px;
  border: none;
  background: transparent;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  font-family: var(--font-sans);
}
.cycle-btn.active {
  background: var(--gradient-primary);
  color: #fff;
  box-shadow: var(--shadow-soft);
}
.cycle-btn .save-badge {
  display: inline-block;
  background: var(--success);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 50px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
}

/* Plans grid */
.plans-panel { display: none; position: relative; z-index: 1; }
.plans-panel.active { display: block; }
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}
@media (max-width: 900px) { .plans-grid { grid-template-columns: 1fr; } }

/* Plans grid variant that also carries a Free card as its first column.
   Four narrower columns need a slightly smaller type scale than the
   original 3-column layout so the price/credits numbers don't crowd the
   card — this only touches this grid, not the 3-column checkout pages. */
.plans-grid-with-free { grid-template-columns: repeat(4, 1fr); }
.plans-grid-with-free .pricing-price { font-size: 2.2rem; }
.plans-grid-with-free .pcb-num { font-size: 1.5rem; }
@media (max-width: 1180px) { .plans-grid-with-free { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .plans-grid-with-free { grid-template-columns: 1fr; } }

/* Free plan card — same shell as .pricing-card, dialed down: no gradient,
   a neutral badge instead of "Most Popular", and greyed "limited" rows so
   the paid cards keep reading as the upgrade path. */
.pricing-card-free {
  background: color-mix(in srgb, var(--muted-foreground) 4%, var(--surface));
  border: 1px dashed var(--border);
}
/* Compound selector (not just .featured-label-free) so this beats the base
   .featured-label { background/color ... !important } rules on specificity
   rather than source order — that mismatch is what made this badge render
   as a blank pill (its own fill winning over ours, text along with it)
   before. The "Free Forever" text itself is a nested .text-gradient-scanner
   span (see blade), so this only needs to own the pill's shell. */
.featured-label.featured-label-free {
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  box-shadow: none;
}
.pricing-credits-box-free {
  background: color-mix(in srgb, var(--muted-foreground) 6%, var(--card));
}
.pricing-credits-box-free .pcb-num {
  background: none; -webkit-text-fill-color: var(--foreground); color: var(--foreground);
}
.pricing-features .feat-limited { color: var(--muted-foreground); }
.pricing-features .feat-limited .feat-text strong { color: var(--foreground); font-weight: 650; }
/* Compound selector — beats the later, equal-specificity .pricing-features
   .check rule on specificity instead of depending on source order (that
   mismatch is what let the blue "enabled" gradient win here before). */
.pricing-features .check.check-limited {
  background: linear-gradient(135deg, #f87171, #dc2626);
  color: #fff;
  box-shadow: 0 2px 5px rgba(220, 38, 38, 0.25);
}

/* Plan card */
.pricing-card {
  position: relative;
  border-radius: 1.5rem;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
}
.pricing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.pricing-card.featured {
  background: var(--gradient-primary);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 40px rgba(37,99,235,.35);
}
.pricing-card.featured * { color: #fff; }

.featured-label {
  position: absolute;
  top: -16px; left: 50%;
  transform: translateX(-50%);
  background: var(--gradient-scanner);
  color: #fff !important;
  font-size: 0.78rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.42rem 1.25rem; border-radius: 50px;
  white-space: nowrap;
  border: 2px solid #fff;
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.4), 0 2px 5px rgba(0, 0, 0, 0.15);
}
.pricing-card.featured .featured-label {
  background: var(--gradient-scanner);
  border: 2px solid #fff;
}

.pricing-name {
  font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted-foreground);
  margin-bottom: 0.5rem;
}
.pricing-card.featured .pricing-name { color: rgba(255,255,255,.7) !important; }

.pricing-price {
  font-family: var(--font-display);
  font-size: 2.8rem; font-weight: 800;
  color: var(--foreground); line-height: 1; margin-bottom: 0.2rem;
}
.pricing-price sub {
  font-size: 1rem; font-weight: 500;
  color: var(--muted-foreground);
  vertical-align: baseline; bottom: 0; margin-left: 2px;
  font-family: var(--font-sans);
}
.pricing-card.featured .pricing-price sub { color: rgba(255,255,255,.65) !important; }

.pricing-billed {
  font-size: 0.78rem; line-height: 1.5; color: var(--muted-foreground);
  margin-bottom: 0.85rem; font-weight: 500;
}
.pricing-card.featured .pricing-billed { color: rgba(255,255,255,.75) !important; }

.pricing-tax-note {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.76rem; font-weight: 600; color: var(--muted-foreground);
  background: color-mix(in srgb, var(--muted-foreground) 10%, transparent);
  border: 1px solid var(--border);
  padding: 0.24rem 0.7rem; border-radius: 50px;
  margin-bottom: 0.75rem;
}
.pricing-tax-note svg { flex-shrink: 0; }
.pricing-card.featured .pricing-tax-note {
  color: rgba(255,255,255,.85) !important;
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.3) !important;
}

/* Credits stat box — the plan's headline number gets its own beat instead
   of being crammed into a single-line pill with two other stats. */
.pricing-credits-box {
  text-align: center;
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--primary) 7%, var(--card)),
      color-mix(in srgb, var(--purple) 7%, var(--card)));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0.7rem 0.85rem 0.6rem;
  margin-bottom: 0.85rem;
}
.pcb-num {
  font-family: var(--font-display);
  font-size: 1.7rem; font-weight: 800; line-height: 1.1;
  background: var(--gradient-primary);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--primary);
}
.pcb-label {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--muted-foreground);
  margin-top: 0.1rem;
}
.pcb-detail {
  font-size: 0.74rem; color: var(--muted-foreground);
  margin-top: 0.4rem; padding-top: 0.4rem;
  border-top: 1px dashed var(--border);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pricing-card.featured .pricing-credits-box {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.25) !important;
}
.pricing-card.featured .pcb-num {
  background: none !important; -webkit-text-fill-color: #fff !important; color: #fff !important;
}
.pricing-card.featured .pcb-label,
.pricing-card.featured .pcb-detail { color: rgba(255,255,255,.75) !important; }
.pricing-card.featured .pcb-detail { border-top-color: rgba(255,255,255,.25) !important; }

.pricing-divider {
  border: none; border-top: 1px solid var(--border); margin: 0.75rem 0;
}
.pricing-card.featured .pricing-divider { border-color: rgba(255,255,255,.2) !important; }

.pricing-features {
  list-style: none; padding: 0; margin: 0 0 1.15rem; flex: 1;
  display: flex; flex-direction: column; gap: 0.1rem;
}
.pricing-features li {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-size: 0.82rem; line-height: 1.35;
  color: var(--muted-foreground); padding: 0.34rem 0;
}
.pricing-features li + li { border-top: 1px dashed color-mix(in srgb, var(--border) 60%, transparent); }
.pricing-features .feat-text {
  min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; cursor: default;
}
.pricing-features .feat-text strong { font-weight: 650; color: var(--foreground); }
.pricing-features .check {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 17px; height: 17px; margin-top: 2px;
  border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, var(--primary, #2563EB), var(--purple, #8B5CF6));
  box-shadow: 0 2px 5px rgba(37, 99, 235, 0.25);
}
.pricing-card.featured .pricing-features li {
  color: rgba(255,255,255,.82) !important;
  border-top-color: rgba(255,255,255,.14);
}
.pricing-card.featured .pricing-features li:first-child { border-top: none; }
.pricing-card.featured .pricing-features .feat-text strong { color: #fff; }
.pricing-card.featured .pricing-features .check {
  background: rgba(255,255,255,.22);
  color: #a7f3d0;
  box-shadow: none;
}

/* Pricing buttons */
.btn-pricing {
  display: block; text-align: center; border-radius: 50px;
  padding: 0.75rem 1rem; font-size: 0.9rem; font-weight: 700;
  text-decoration: none; transition: all 0.2s; cursor: pointer;
  border: none; font-family: var(--font-sans);
}
.btn-pricing-primary {
  background: var(--gradient-primary);
  color: #fff !important; box-shadow: var(--shadow-soft);
  transition: transform .2s, box-shadow .2s;
}
.btn-pricing-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(37,99,235,.45), 0 2px 8px rgba(0,0,0,.12);
}
.pricing-card.featured .btn-pricing-primary {
  background: #fff; color: var(--primary) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.pricing-card.featured .btn-pricing-primary:hover { background: #f0f9ff; }
.btn-pricing-outline {
  border: 2px solid var(--border); color: var(--muted-foreground) !important;
  background: transparent;
}
.btn-pricing-outline:hover { border-color: var(--primary); color: var(--primary) !important; }
.btn-pricing-current {
  background: var(--secondary); color: var(--primary) !important;
  border: 2px solid rgba(37,99,235,.3); border-radius: 50px;
  text-align: center; padding: 0.7rem 1rem;
  font-size: 0.9rem; font-weight: 700;
  display: block;
}

/* Free plan strip */
.free-plan-strip {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 1.25rem; padding: 1.5rem 2rem;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem;
  position: relative; z-index: 1;
}
.free-plan-strip h4 { font-size: 1.05rem; font-weight: 700; margin: 0; color: var(--foreground); }
.free-plan-strip p  { font-size: 0.85rem; color: var(--muted-foreground); margin: 0.2rem 0 0; }
@media (max-width: 640px) {
  .free-plan-strip { flex-direction: column; text-align: center; }
  .cycle-btn { padding: .4rem 1rem; font-size: .82rem; }
  .pricing-page-hero .section-heading { font-size: 1.7rem; }
}

/* Top-up section */
.topup-section { margin-top: 3rem; position: relative; z-index: 1; }
.topup-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 1.25rem; padding: 2rem 2.5rem;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1.5rem;
}
.topup-info h3 { font-size: 1.2rem; font-weight: 800; color: var(--foreground); margin: 0 0 0.3rem; }
.topup-info p  { font-size: 0.875rem; color: var(--muted-foreground); margin: 0; }
.topup-packs   { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.topup-packs form { margin: 0; padding: 0; }
.topup-pack {
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: 1rem; padding: 0.8rem 1.2rem; text-align: center;
  cursor: pointer; transition: all 0.2s; min-width: 100px;
  font-family: var(--font-sans);
}
.topup-pack:hover { border-color: var(--primary); box-shadow: var(--shadow-soft); }
.topup-pack .tp-credits { font-size: 1.2rem; font-weight: 800; color: var(--foreground); display: block; }
.topup-pack .tp-price   { font-size: 0.8rem; font-weight: 600; color: var(--primary); display: block; margin-top: 1px; }
.topup-pack .tp-equiv   { font-size: 0.72rem; color: var(--muted-foreground); display: block; margin-top: 2px; }
.topup-note { font-size: 0.78rem; color: var(--muted-foreground); margin-top: 0.75rem; }

/* One-Time Trial Search Pass — prominent standalone promo card between the
   plan grid and the FAQ. Deliberately louder than the plain .topup-card
   above: a full gradient surface with glow blobs, not just a bordered box,
   since this is the page's one non-subscription upsell. */
.ots-promo-section { margin-top: 2.25rem; position: relative; z-index: 1; }
.ots-promo-card {
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  background: var(--gradient-primary);
  border-radius: 1.25rem;
  padding: 1.35rem 1.75rem;
  box-shadow: 0 14px 40px rgba(37,99,235,.25), 0 4px 12px rgba(0,0,0,.1);
}
.ots-promo-card * { color: #fff; position: relative; z-index: 1; }

/* "One-time payment" trust seal, hung off the promo card's top-right corner
   so the same badge the locked results page shows also appears at the point
   of sale.

   Anchored to .ots-promo-section, NOT .ots-promo-card, for two reasons: the
   card sets overflow:hidden to contain its glow blobs and would cut the seal
   in half, and `.ots-promo-card *` above forces position:relative on every
   descendant, which would defeat the absolute positioning at equal
   specificity.

   Colours are pinned rather than theme-reactive because the card beneath is
   the primary gradient in both themes, so the backdrop never changes.
   results/signal.blade.php swaps them per theme only because the seal sits on
   a themed surface there. */
.ots-promo-section .rp-st-trust-seal {
  --st-trust-grad-a: #2563EB;
  --st-trust-grad-b: #7C3AED;
  --st-trust-face:   #ffffff;
  position: absolute;
  top: -1.5rem;
  right: -0.7rem;
  z-index: 3;
  width: 96px;
  height: 96px;
  filter: drop-shadow(0 8px 18px rgba(37, 99, 235, .3));
  pointer-events: none;
}
.ots-promo-section .rp-st-trust-seal svg { display: block; width: 100%; height: 100%; }
.ots-promo-glow {
  position: absolute; z-index: 0; pointer-events: none;
  width: 14rem; height: 14rem; right: -4rem; top: -6rem;
  background: radial-gradient(circle, rgba(255,255,255,.2), transparent 70%);
  border-radius: 9999px;
}
.ots-promo-glow::after {
  content: ''; position: absolute; width: 11rem; height: 11rem;
  left: -7rem; bottom: -7rem;
  background: radial-gradient(circle, rgba(6,182,212,.3), transparent 70%);
  border-radius: 9999px;
}

.ots-promo-content { flex: 1 1 420px; min-width: 0; }
.ots-promo-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.32);
  border-radius: 50px; padding: .22rem .7rem;
  font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  margin-bottom: .7rem;
}
.ots-promo-headline {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 800;
  line-height: 1.15; margin: 0 0 .4rem; max-width: 44ch;
  letter-spacing: -.01em;
}
.ots-promo-bolt {
  display: inline-flex; filter: drop-shadow(0 2px 6px rgba(0,0,0,.15));
  font-size: 1.4rem;
}
.ots-promo-subheadline {
  font-size: .92rem; font-weight: 600; line-height: 1.5; opacity: .95;
  margin: 0 0 1rem; max-width: 48ch;
}
.ots-promo-lead {
  font-size: .78rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  opacity: .8; margin: 0 0 .55rem;
}
.ots-promo-features {
  list-style: none; margin: 0 0 1rem; padding: 0;
  display: flex; flex-direction: column;
  gap: .5rem;
  max-width: 56ch;
}
.ots-promo-features li {
  position: relative; padding-left: 1.5rem;
  font-size: .82rem; line-height: 1.45; font-weight: 500; opacity: .96;
}
.ots-promo-features li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  width: 1.05rem; height: 1.05rem; line-height: 1.05rem; text-align: center;
  border-radius: 50%; background: rgba(255,255,255,.22);
  font-size: .62rem; font-weight: 900;
}
.ots-promo-tagline {
  font-family: var(--font-display); font-size: .98rem; font-weight: 800;
  margin: .3rem 0 .35rem;
}
.ots-promo-desc {
  font-size: .76rem; line-height: 1.5; opacity: .85;
  margin: 0; max-width: 60ch;
}

.ots-promo-buy {
  flex: 0 0 auto;
  display: flex; flex-direction: row; align-items: center; gap: 1rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 1rem;
  padding: .75rem 1rem;
}
.ots-promo-price-tag { text-align: center; line-height: 1.1; }
.ots-promo-cta-group { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.ots-promo-price {
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 800;
  line-height: 1; display: block;
}
.ots-promo-price-sub {
  display: block; font-size: .64rem; font-weight: 600; opacity: .8;
  margin-top: .15rem; white-space: nowrap;
}
.ots-promo-cta {
  border: none; border-radius: 50px; white-space: nowrap;
  background: #fff; color: var(--primary) !important;
  font-size: .86rem; font-weight: 800; font-family: var(--font-sans);
  padding: .65rem 1.25rem; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  transition: transform .2s, box-shadow .2s;
}
.ots-promo-cta:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.ots-promo-cta:disabled { opacity: .7; cursor: wait; }
.ots-promo-secure {
  font-size: .64rem; opacity: .85; margin: 0; white-space: nowrap;
  display: flex; align-items: center; gap: .25rem;
}
.ots-promo-err {
  font-size: .76rem; margin: .5rem 0 0; color: #fff !important;
  background: rgba(0,0,0,.2); border-radius: 8px; padding: .4rem .6rem;
  display: none;
  flex-basis: 100%;
}

@media (max-width: 860px) {
  .ots-promo-buy { flex-direction: column; width: 100%; text-align: center; }
  .ots-promo-secure { justify-content: center; }
}
@media (max-width: 640px) {
  .ots-promo-card { padding: 1.5rem; flex-direction: column; align-items: stretch; }
  /* Same reduction the results page uses at its own breakpoint — at full size
     the seal reaches far enough across a narrow card to sit on the headline. */
  .ots-promo-section .rp-st-trust-seal {
    width: 68px; height: 68px; top: -1.1rem; right: -0.45rem;
  }
}

/* FAQ */
.pricing-faq { margin-top: 5rem; position: relative; z-index: 1; }
.faq-heading { text-align: center; margin-bottom: 2.5rem; }
.faq-heading h2 {
  font-family: var(--font-display);
  font-size: 1.9rem; font-weight: 800; color: var(--foreground); margin-bottom: 0.5rem;
}
.faq-heading p  { font-size: 0.95rem; color: var(--muted-foreground); }
.pricing-faq .faq-grid {
  display: grid; grid-template-columns: 1fr; gap: 1rem;
  max-width: 780px; margin: 0 auto;
}
.faq-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 1.25rem; overflow: hidden; transition: box-shadow 0.2s;
}
.faq-card:hover { box-shadow: var(--shadow-soft); }
.faq-question {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.15rem 1.4rem; cursor: pointer; gap: 12px; user-select: none;
}
.faq-question h5 {
  font-size: 0.92rem; font-weight: 700; color: var(--foreground);
  margin: 0; line-height: 1.4; flex: 1;
}
.faq-question .faq-icon {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  background: var(--primary-soft); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; transition: transform 0.25s, background 0.2s;
}
.faq-card.open .faq-icon { transform: rotate(45deg); background: rgba(37,99,235,.2); }
.faq-answer {
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s ease, padding 0.25s; padding: 0 1.4rem;
}
.faq-card.open .faq-answer { max-height: 300px; padding-bottom: 1.2rem; }
.faq-answer p { font-size: 0.875rem; color: var(--muted-foreground); margin: 0; line-height: 1.7; }
.faq-answer a { color: var(--primary); text-decoration: none; }
.faq-answer a:hover { text-decoration: underline; }
.faq-divider { border: none; border-top: 1px solid var(--border); margin: 0 1.4rem; }

/* ============================================================
   BILLING HISTORY (new class names)
   ============================================================ */
.billing-page-hero {
  padding: 2.5rem 0 2rem;
  background: linear-gradient(135deg, var(--section-3) 0%, var(--section-1) 100%);
  border-bottom: 1px solid var(--border);
  margin-bottom: 2.5rem;
}
[data-theme="dark"] .billing-page-hero {
  background: linear-gradient(135deg, var(--section-1) 0%, var(--surface) 100%);
}
.billing-page-hero h1 {
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 800; color: var(--foreground); margin: 0 0 0.35rem;
}
.billing-page-hero p { color: var(--muted-foreground); font-size: 0.95rem; margin: 0; }
.billing-page-nav { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }
.billing-page-nav a { font-size: 0.875rem; color: var(--primary); font-weight: 600; text-decoration: none; }
.billing-page-nav a:hover { text-decoration: underline; }
.billing-page-nav .sep { color: var(--muted-foreground); }
.billing-page-nav .cur { font-size: 0.875rem; color: var(--muted-foreground); }
.billing-page-section { padding: 0 0 5rem; }
.rounded-\[2rem\] {
  border-radius: 2rem;
}
.rounded-\[2\.5rem\] {
  border-radius: 2.5rem;
}
.rounded-\[3rem\] {
  border-radius: 3rem;
}
.glass {
  background: hsl(0 0% 100 / 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid hsl(var(--border) / 0.6);
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.top-1\/3 {
  top: 33.333333%;
}

/* ============================================================
   STATIC PAGES — shared utilities (contact, privacy, terms)
   ============================================================ */

/* ── Spacing ─────────────────────────────────────────────── */
.section-pad    { padding: 80px 0; }
.section-pad-sm { padding: 50px 0; }
@media (max-width: 991px) { .section-pad { padding: 60px 0; } .section-pad-sm { padding: 40px 0; } }
@media (max-width: 767px) { .section-pad { padding: 48px 0; } .section-pad-sm { padding: 32px 0; } }

/* ── Page hero (dark, used by contact / privacy / terms / custom) ── */
.page-header {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
  padding: 80px 0 64px;
  position: relative; overflow: hidden;
  text-align: center;
}
.page-header::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 120% 70% at 50% -10%, rgba(37,99,235,.28) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 90% 20%, rgba(139,92,246,.20) 0%, transparent 50%),
    radial-gradient(ellipse 40% 50% at 5%  80%, rgba(6,182,212,.12) 0%, transparent 50%);
  pointer-events: none;
}
.page-header > .container { position: relative; z-index: 2; }
.page-header h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800; color: #fff; line-height: 1.15; margin-bottom: 14px;
}
.page-header p {
  font-size: 1.05rem; color: rgba(255,255,255,.65);
  max-width: 580px; margin: 0 auto; line-height: 1.7;
}
.page-header .badge-pill {
  background: rgba(6,182,212,.12);
  color: var(--cyan);
  border-color: rgba(6,182,212,.25);
}
/* Custom page hero: even larger gradient title */
.page-header.cp-hero h1 {
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  font-weight: 800; line-height: 1.1; margin-bottom: 18px;
  background: linear-gradient(130deg, #ffffff 20%, rgba(6,182,212,.92) 60%, rgba(139,92,246,.88) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.page-header.cp-hero p {
  font-size: 1.08rem; color: rgba(255,255,255,.68);
  max-width: 580px; margin: 0 auto; line-height: 1.75;
}
@media (max-width: 768px) {
  .page-header { padding: 52px 0 40px; }
  .page-header h1 { font-size: 1.75rem; }
  .page-header p  { font-size: .95rem; }
  .page-header.cp-hero h1 { font-size: 1.9rem; }
}

/* ── Shared custom-page content card ────────────────────── */
.cp-content-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 32px; padding: 52px 60px; box-shadow: var(--shadow-sm);
}
@media (max-width: 991px) { .cp-content-card { padding: 36px 32px; } }
@media (max-width: 576px)  { .cp-content-card { padding: 24px 20px; border-radius: 20px; } }

/* ── Shared CTA section (about / legal pages) ────────────── */
.cp-cta-section { padding: 80px 0; background: var(--section-1, #f1f5f9); }
[data-theme="dark"] .cp-cta-section { background: var(--section-1, #0f172a); }
.cp-cta-card {
  position: relative; overflow: hidden;
  background: var(--gradient-primary); border-radius: 40px;
  padding: 72px 56px; text-align: center;
  box-shadow: 0 24px 64px rgba(37,99,235,.38);
}
.cp-cta-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.18) 1px, transparent 1px),
    radial-gradient(circle at 82% 72%, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 38px 38px;
}
.cp-cta-card::after {
  content: ''; position: absolute; pointer-events: none;
  width: 400px; height: 400px; border-radius: 50%;
  background: rgba(139,92,246,.25); filter: blur(80px);
  top: -100px; right: -80px;
}
.cp-cta-card h2 {
  position: relative; z-index: 2;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800; color: #fff; line-height: 1.2; margin-bottom: 16px;
}
.cp-cta-card > p {
  position: relative; z-index: 2;
  font-size: 1rem; color: rgba(255,255,255,.8);
  max-width: 520px; margin: 0 auto 36px; line-height: 1.75;
}
.cp-cta-btns {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap;
}
.cp-cta-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gradient-primary);
  color: #fff;
  padding: 15px 34px; border-radius: 16px;
  font-family: var(--font-display); font-size: .95rem; font-weight: 700;
  text-decoration: none; transition: transform .2s, box-shadow .2s;
}
.cp-cta-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(37,99,235,.45), 0 2px 8px rgba(0,0,0,.12);
  color: #fff; text-decoration: none;
}
.cp-cta-btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.12); backdrop-filter: blur(8px);
  color: #fff; border: 1.5px solid rgba(255,255,255,.32);
  padding: 15px 34px; border-radius: 16px;
  font-family: var(--font-display); font-size: .95rem; font-weight: 700;
  text-decoration: none; transition: background .2s, transform .2s;
}
.cp-cta-btn-secondary:hover {
  background: rgba(255,255,255,.24); transform: translateY(-2px);
  color: #fff; text-decoration: none;
}
@media (max-width: 767px) {
  .cp-cta-card { padding: 44px 24px; border-radius: 24px; }
  .cp-cta-btns { flex-direction: column; }
  .cp-cta-btn-primary, .cp-cta-btn-secondary { width: 100%; justify-content: center; }
}

/* ── Light hero — about / legal pages (matches about.html reference) ── */
.cp-light-hero {
  background: var(--background);
  padding: 80px 0 56px;
}
.cp-light-hero .cp-hero-inner {
  max-width: 780px;
  /* intentionally NOT centered — left-aligned like the reference */
}
.cp-eyebrow {
  display: block;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--primary); margin-bottom: 18px;
}
.cp-light-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 7vw, 4.6rem);
  font-weight: 800; line-height: 1.08;
  letter-spacing: -.025em; margin-bottom: 28px;
  color: var(--foreground);
}
/* gradient only on the highlighted span inside the h1 */
.cp-light-hero h1 .cp-grad-text {
  background: var(--gradient-primary, linear-gradient(135deg,#2563eb,#8b5cf6,#06b6d4));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.cp-light-hero .cp-hero-desc {
  font-size: 1.1rem; color: var(--muted-foreground);
  line-height: 1.8; max-width: 640px;
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .cp-light-hero { padding: 56px 0 36px; }
  .cp-light-hero h1 { font-size: 2.4rem; letter-spacing: -.015em; }
  .cp-light-hero .cp-hero-desc { font-size: 1rem; }
}

/* ── Badge pill ─────────────────────────────────────────── */
.badge-pill {
  display: inline-block;
  background: rgba(37,99,235,.1);
  color: var(--primary);
  border: 1px solid rgba(37,99,235,.2);
  padding: 4px 14px; border-radius: 50px;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 14px;
}

/* ── Legal content typography ───────────────────────────── */
.legal-content { max-width: 800px; }
.legal-content h2 {
  font-family: var(--font-display);
  font-size: 1.4rem; font-weight: 700; color: var(--foreground);
  margin: 40px 0 12px; padding-bottom: 8px;
  border-bottom: 2px solid var(--border);
}
.legal-content h3 {
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 700; color: var(--foreground);
  margin: 28px 0 8px;
}
.legal-content p, .legal-content li {
  font-size: .93rem; color: var(--muted-foreground);
  line-height: 1.8; margin-bottom: 12px;
}
.legal-content ul  { padding-left: 20px; }
.legal-content a   { color: var(--primary); text-underline-offset: 3px; }
.legal-content .last-updated {
  display: inline-block;
  background: var(--secondary); color: var(--muted-foreground);
  border: 1px solid var(--border); border-radius: 50px;
  padding: 4px 14px; font-size: .78rem; font-weight: 600;
  margin-bottom: 24px;
}
@media (max-width: 768px) {
  .legal-content h2 { font-size: 1.2rem; margin-top: 30px; }
  .legal-content h3 { font-size: 1rem; margin-top: 20px; }
  .legal-content p, .legal-content li { font-size: .9rem; }
}

/* ── Sidebar card ───────────────────────────────────────── */
.sidebar-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 20px 22px;
  margin-bottom: 20px; box-shadow: var(--shadow-sm);
}
.sidebar-card h6 {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--muted-foreground);
  margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.sidebar-tool-link {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 6px; font-size: .85rem; font-weight: 500;
  color: var(--muted-foreground); text-decoration: none;
  border-radius: 8px; transition: background .15s, color .15s;
}
.sidebar-tool-link:hover { background: var(--secondary); color: var(--primary); }
.sidebar-tool-link .icon { font-size: 1rem; }

/* ── Section headings & divider (shared) ───────────────── */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800; color: var(--foreground); margin-bottom: 8px;
}
.section-subtitle {
  font-size: .97rem; color: var(--muted-foreground);
  max-width: 480px; margin: 0 auto;
}
.divider-accent {
  width: 48px; height: 4px;
  background: var(--gradient-primary);
  border-radius: 2px; margin: 12px auto 16px;
}

/* ── Centered prose wrapper (about / legal / custom pages) ─ */
.sp-prose-wrap {
  max-width: 760px;
  margin: 0 auto;
}

/* ── Contact info card grid ──────────────────────────────── */
.info-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.info-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 24px 22px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s;
}
.info-card:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(37,99,235,.1); }
.info-card-icon {
  width: 44px; height: 44px; border-radius: 14px;
  background: var(--gradient-scanner);
  display: grid; place-items: center;
  color: #fff; margin-bottom: 14px; flex-shrink: 0;
}
.info-card-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted-foreground); margin-bottom: 4px;
}
.info-card-value {
  font-size: .95rem; font-weight: 600; color: var(--foreground); margin: 0;
}
.info-card-sub {
  font-size: .82rem; color: var(--muted-foreground); margin: 4px 0 0;
}
@media (max-width: 600px) {
  .info-card-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .info-card-grid { grid-template-columns: 1fr; }
}

/* ── Contact form glass wrapper ──────────────────────────── */
.contact-form-glass {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 40px;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 767px) { .contact-form-glass { padding: 24px 18px; } }

/* ── Outline button ─────────────────────────────────────── */
.btn-outline-custom {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  color: var(--primary); border: 2px solid var(--primary);
  padding: 10px 26px; border-radius: var(--radius-md);
  font-family: var(--font-display); font-size: .9rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: background .2s, color .2s, transform .2s;
}
.btn-outline-custom:hover {
  background: var(--primary-soft); transform: translateY(-2px); color: var(--primary);
  box-shadow: 0 8px 28px rgba(37,99,235,.25), 0 2px 8px rgba(0,0,0,.08);
}

/* ── Feat items (tool sidebar) ──────────────────────────── */
.feat-item {
  display: flex; gap: 12px; align-items: flex-start;
}
.feat-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--secondary); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.feat-item h6 { font-size: .84rem; font-weight: 700; color: var(--foreground); margin-bottom: 2px; }
.feat-item p  { font-size: .8rem; color: var(--muted-foreground); margin: 0; line-height: 1.5; }

/* ── White button (used on gradient card backgrounds) ───── */
.btn-white {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  color: #fff; border: 1px solid rgba(255,255,255,.3);
  padding: 10px 22px; border-radius: var(--radius-md);
  font-size: .88rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: background .2s;
}
.btn-white:hover { background: rgba(255,255,255,.25); color: #fff; }

/* ── Accordion (shared — contact FAQ, tool FAQ) ─────────── */
.accordion-custom .accordion-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md) !important;
  margin-bottom: 10px; overflow: hidden;
  box-shadow: var(--shadow-sm); background: var(--card);
}
.accordion-custom .accordion-button {
  font-family: var(--font-display);
  font-size: .95rem; font-weight: 700;
  color: var(--foreground); background: var(--card);
  padding: 18px 22px; box-shadow: none;
}
.accordion-custom .accordion-button:not(.collapsed) {
  color: var(--primary); background: var(--card); box-shadow: none;
}
[data-theme="dark"] .accordion-custom .accordion-button::after { filter: invert(1); }
.accordion-custom .accordion-body {
  font-size: .9rem; line-height: 1.75;
  color: var(--muted-foreground);
  padding: 0 22px 20px; background: var(--card);
  border-top: 1px solid var(--border);
}

/* ── Primary button (shared across static pages) ────────── */
.btn-primary-custom {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gradient-primary);
  color: #fff; border: none;
  padding: 12px 28px; border-radius: var(--radius-md);
  font-family: var(--font-display); font-size: .9rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 4px 16px rgba(37,99,235,.25);
}
.btn-primary-custom:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(37,99,235,.45), 0 2px 8px rgba(0,0,0,.12);
  color: #fff;
}
.btn-primary-custom:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(37,99,235,.3); }

/* ============================================================
   GLOBAL POPUP / MODAL SYSTEM
   (mirrors inline CSS in _search_tool.blade.php so these
    modals look correct on every page, including auth pages)
   ============================================================ */

/* ── Shared keyframes ── */
@keyframes rvsAsyncFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes rvsAsyncSlideUp {
  from { opacity: 0; transform: translateY(28px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)     scale(1);  }
}
@keyframes rvsAsyncOrb {
  0%, 100% { transform: translate(0,0) scale(1); }
  33%       { transform: translate(12px,-14px) scale(1.12); }
  66%       { transform: translate(-10px,8px)  scale(.9); }
}
@keyframes rvsAsyncRingPulse {
  0%   { transform: translate(-50%,-50%) scale(.85); opacity: .7; }
  100% { transform: translate(-50%,-50%) scale(1.55); opacity: 0; }
}
@keyframes rvsAsyncHeroFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
@keyframes rvsCaptchaFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes rvsCaptchaSlideUp {
  from { opacity: 0; transform: translateY(22px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* ── Alert popup overlay (also defined inline; kept in sync) ── */
#rvs-popup-overlay.active { animation: rvsAsyncFadeIn .2s ease; }

/* ── Alert popup box ── */
.rvs-popup-box {
  background: var(--card, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 24px;
  box-shadow: 0 32px 80px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.06);
  max-width: 440px;
  width: 100%;
  overflow: hidden;
  animation: rvsAsyncSlideUp .26s cubic-bezier(.34,1.56,.64,1);
  position: relative;
}
.rvs-popup-header {
  background: var(--gradient-primary);
  position: relative; overflow: hidden;
  padding: 38px 28px 30px;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 11px;
}
[data-theme="dark"] .rvs-popup-header { background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%); }
.rvs-popup-orb {
  position: absolute; border-radius: 50%;
  filter: blur(40px); pointer-events: none;
}
.rvs-popup-orb-1 { width:130px;height:130px; top:-20px;left:-20px; animation:rvsAsyncOrb 7s ease-in-out infinite; }
.rvs-popup-orb-2 { width:100px;height:100px; bottom:-10px;right:10px; animation:rvsAsyncOrb 9s ease-in-out infinite reverse; }
.rvs-popup-orb-3 { width:80px;height:80px; top:40%;right:25%; animation:rvsAsyncOrb 11s ease-in-out infinite 2s; }
.rvs-popup-ring {
  position: absolute; top: 50%; left: 50%;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.14);
  pointer-events: none;
  animation: rvsAsyncRingPulse 3.5s ease-out infinite;
}
.rvs-popup-ring-1 { width:90px;height:90px; animation-delay:0s; }
.rvs-popup-ring-2 { width:90px;height:90px; animation-delay:1.15s; }
.rvs-popup-ring-3 { width:90px;height:90px; animation-delay:2.3s; }
.rvs-popup-hero {
  position: relative; z-index: 2;
  width: 70px; height: 70px;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.15);
  border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.85rem;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: rvsAsyncHeroFloat 4s ease-in-out infinite;
}
.rvs-popup-badge {
  font-size: .68rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.13);
  border-radius: 50px; padding: 3px 12px;
  position: relative; z-index: 2;
}
.rvs-popup-body { padding: 24px 26px 22px; position: relative; }
.rvs-popup-title {
  font-family: var(--font-display, 'Sora', sans-serif);
  font-size: 1.18rem; font-weight: 800;
  color: var(--foreground, #0f172a);
  margin: 0 0 .4rem; letter-spacing: -.02em; line-height: 1.2;
}
.rvs-popup-msg {
  font-size: .83rem; color: var(--muted-foreground, #64748b);
  line-height: 1.65; margin: 0 0 1.3rem;
}
.rvs-popup-actions { display: flex; flex-direction: column; gap: .6rem; }

/* ── Primary action button ───────────────────────────────── */
.rvs-popup-btn-primary {
  position: relative; overflow: hidden;
  width: 100%; display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem 1.75rem;
  /* background/box-shadow set inline by JS per type — CSS controls shape/font/effects */
  color: #fff !important; border: none; border-radius: 14px;
  font-family: var(--font-display, 'Sora', sans-serif);
  font-size: .9rem; font-weight: 700; cursor: pointer;
  text-decoration: none !important; letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  transition: transform .22s cubic-bezier(.4,0,.2,1), filter .22s, opacity .15s;
}
/* Animated shimmer sweep */
.rvs-popup-btn-primary::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    105deg,
    transparent            0%,
    transparent           36%,
    rgba(255,255,255,.22) 50%,
    transparent           64%,
    transparent          100%
  );
  background-size: 300% 100%;
  border-radius: inherit; pointer-events: none;
  animation: rvsPopupBtnShimmer 2.8s ease-in-out infinite;
}
@keyframes rvsPopupBtnShimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
/* Subtle top-edge gleam */
.rvs-popup-btn-primary::after {
  content: '';
  position: absolute; top: 0; left: 12px; right: 12px; height: 1px;
  background: rgba(255,255,255,.38); border-radius: 0 0 4px 4px;
  pointer-events: none;
}
.rvs-popup-btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.1) saturate(1.05);
  opacity: 1 !important;
}
.rvs-popup-btn-primary:active { transform: translateY(0); filter: brightness(.97); }

/* ── Gold upgrade button (kept, only overrides bg/shadow) ── */
.rvs-popup-btn-upgrade {
  background: linear-gradient(135deg,#b87008 0%,#e8a838 50%,#b87008 100%) !important;
  background-size: 200% auto !important;
  box-shadow: 0 4px 20px rgba(184,112,8,.3) !important;
}
.rvs-popup-btn-upgrade:hover { filter: brightness(1.1) !important; box-shadow: 0 8px 32px rgba(184,112,8,.5) !important; }

/* ── Dismiss / secondary text link ──────────────────────── */
.rvs-popup-btn-dismiss {
  display: block; width: 100%;
  background: var(--secondary, rgba(148,163,184,.08));
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 10px;
  color: var(--muted-foreground, #94a3b8);
  font-family: var(--font-display, 'Sora', sans-serif);
  font-size: .82rem; font-weight: 600; cursor: pointer;
  padding: .65rem 1rem; text-align: center;
  transition: background .18s, color .18s, border-color .18s, transform .18s;
  letter-spacing: -.01em; text-decoration: none;
}
.rvs-popup-btn-dismiss:hover {
  background: var(--border, #e2e8f0);
  color: var(--foreground, #0f172a);
  border-color: var(--primary, #2563eb);
  transform: translateY(-1px);
}

/* ── Close ✕ button ─────────────────────────────────────── */
.rvs-popup-close {
  position: absolute; top: 12px; right: 14px;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.22);
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: rgba(255,255,255,.7);
  font-size: .72rem; transition: all .18s ease;
  padding: 0; line-height: 1; z-index: 10;
}
.rvs-popup-close:hover {
  background: rgba(255,255,255,.24);
  color: #fff; transform: scale(1.08);
}

.rvs-popup-upgrade-hint {
  font-size: .75rem; color: var(--muted-foreground, #94a3b8); margin: -.1rem 0 .1rem;
}
.rvs-popup-divider { border: none; border-top: 1px solid var(--border, #e2e8f0); margin: .4rem 0; }

/* ── Captcha overlay & box ── */
#rvs-captcha-overlay {
  display: none; position: fixed; inset: 0; z-index: 99999;
  background: rgba(6,15,28,.82); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  align-items: center; justify-content: center; padding: 16px;
}
#rvs-captcha-overlay.active { display: flex; animation: rvsCaptchaFadeIn .22s ease; }
#rvs-captcha-box {
  background: var(--card, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0,0,0,.28), 0 4px 18px rgba(0,0,0,.1);
  padding: 36px 32px 28px;
  max-width: 380px; width: 100%; text-align: center;
  animation: rvsCaptchaSlideUp .28s cubic-bezier(.34,1.4,.64,1);
}
.rvs-captcha-title {
  font-family: var(--font-display, 'Sora', sans-serif);
  font-size: 1.1rem; font-weight: 700;
  color: var(--foreground, #0f172a); margin: 0 0 .4rem;
}
.rvs-captcha-sub {
  font-size: .84rem; color: var(--muted-foreground, #64748b);
  margin: 0 0 1.2rem; line-height: 1.6;
}

/* ── Upgrade overlay & box ── */
#rvs-upgrade-overlay {
  display: none; position: fixed; inset: 0; z-index: 99998;
  background: rgba(6,15,28,.82); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  align-items: center; justify-content: center; padding: 16px;
}
#rvs-upgrade-overlay.active { display: flex; animation: rvsCaptchaFadeIn .22s ease; }
.rvs-upgrade-box {
  background: var(--card, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 24px;
  box-shadow: 0 32px 80px rgba(0,0,0,.28), 0 4px 18px rgba(0,0,0,.1);
  padding: 40px 32px 32px;
  max-width: 440px; width: 100%; text-align: center;
  animation: rvsCaptchaSlideUp .28s cubic-bezier(.34,1.4,.64,1);
  position: relative; overflow: hidden;
}
.rvs-upgrade-box::before {
  content: ''; position: absolute;
  top: -80px; left: 50%; transform: translateX(-50%);
  width: 280px; height: 200px;
  background: radial-gradient(ellipse, rgba(232,168,56,.12), transparent 68%);
  pointer-events: none;
}
.rvs-upgrade-close {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none;
  font-size: 1rem; color: var(--muted-foreground, #a0aec0);
  cursor: pointer; padding: 6px; border-radius: 50%;
  transition: all .2s ease; line-height: 1;
}
.rvs-upgrade-close:hover { color: var(--foreground, #0f172a); background: var(--secondary, #f1f5f9); }
.rvs-upgrade-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, #c8860a, #e8a838);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; margin: 0 auto 1.1rem;
  box-shadow: 0 10px 28px rgba(200,134,10,.3);
}
.rvs-upgrade-mode-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  background: linear-gradient(135deg, rgba(200,134,10,.1), rgba(232,168,56,.12));
  border: 1px solid rgba(200,134,10,.22);
  color: #9a6000;
  font-size: .75rem; font-weight: 700;
  padding: 4px 14px; border-radius: 50px; margin-bottom: 1rem;
}
.rvs-upgrade-title {
  font-family: var(--font-display, 'Sora', sans-serif);
  font-size: 1.35rem; font-weight: 700;
  color: var(--foreground, #0f172a); margin: 0 0 .55rem;
}
.rvs-upgrade-sub {
  font-size: .88rem; color: var(--muted-foreground, #64748b);
  line-height: 1.7; margin: 0 0 1.6rem;
}
.rvs-upgrade-perks { display: flex; flex-direction: column; gap: .4rem; margin: 0 0 1.6rem; text-align: left; }
.rvs-upgrade-perk { display: flex; align-items: center; gap: .6rem; font-size: .83rem; color: var(--foreground, #0f172a); }
.rvs-upgrade-perk-icon {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--gradient-primary, linear-gradient(135deg, #2563eb, #8b5cf6));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .6rem; flex-shrink: 0;
}
.rvs-upgrade-actions { display: flex; flex-direction: column; gap: .6rem; }
.rvs-upgrade-cta {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.5rem; font-size: .9rem; font-weight: 700;
  color: #1e2a35;
  background: linear-gradient(135deg, #c8860a 0%, #e8a838 35%, #f5c96a 55%, #e8a838 80%, #c8860a 100%);
  background-size: 200% auto;
  border: none; border-radius: 50px;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 5px 18px rgba(200,134,10,.32);
  transition: all .22s ease; font-family: inherit;
  animation: rvsBtnPan 3s linear infinite;
}
@keyframes rvsBtnPan { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }
.rvs-upgrade-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(200,134,10,.42); color: #1e2a35; }
.rvs-upgrade-dismiss {
  background: none; border: 1.5px solid var(--border, #dde3e8); border-radius: 50px;
  padding: .6rem 1.5rem; font-size: .84rem; font-weight: 600;
  color: var(--muted-foreground, #64748b); cursor: pointer; transition: all .2s ease;
  width: 100%; font-family: inherit;
}
.rvs-upgrade-dismiss:hover { border-color: var(--primary, #2563eb); color: var(--primary, #2563eb); background: var(--primary-soft, rgba(37,99,235,.06)); }

/* ══════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS — Global gap fixes
   Applied on top of component-level breakpoints above.
══════════════════════════════════════════════════════════ */

/* ── Overflow safety on prose/content wrappers ─────────── */
.sp-prose-wrap { overflow-x: hidden; }
.legal-content { overflow-x: auto; word-break: break-word; }

/* ── footer-cols: 2-col default → 1-col at ≤ 480px ─────── */
@media (max-width: 480px) {
  .footer-cols { grid-template-columns: 1fr; }
  .footer-grid { gap: 2rem; }
  .footer-inner { padding-top: 3rem; padding-bottom: 2rem; }
}

/* ── py-20: reduce heavy section padding on small screens ─ */
@media (max-width: 640px) {
  .py-20 { padding-top: 3rem; padding-bottom: 3rem; }
}

/* ── Navbar: all mobile phones (< 900px) ─────────────────── */
@media (max-width: 899px) {
  .nav-logo-img  { height: 2rem; width: 2rem; }
  .nav-logo-text { font-size: 1rem; }
}

/* ── Navbar: medium phones 481–640px ─────────────────────── */
@media (max-width: 640px) {
  .nav-logo-img  { height: 1.75rem; width: 1.75rem; }  /* 28px */
  .nav-logo-text { font-size: 0.9375rem; }
}

/* ── Navbar: small phones ≤480px ─────────────────────────── */
@media (max-width: 480px) {
  .nav-card      { padding: 0.5rem 0.875rem; }
  .nav-actions   { gap: 0.375rem; }
  .nav-signin-link { display: none; }
  .nav-logo-img  { height: 1.625rem; width: 1.625rem; }  /* 26px */
  .nav-logo-text { font-size: 0.875rem; }
}

/* ── Navbar: very tight screens ≤360px ───────────────────── */
@media (max-width: 360px) {
  .nav-card        { padding: 0.5rem 0.75rem; }
  .nav-logo-img    { height: 1.375rem; width: 1.375rem; }  /* 22px */
  .nav-logo-text   { font-size: 0.75rem; }
  .nav-actions     { gap: 0.2rem; }
  #theme-toggle    { width: 2rem; height: 2rem; }
  #mobile-menu-btn { width: 2rem; height: 2rem; }
}

/* ── Navbar: compact auth items on mobile ────────────────── */
@media (max-width: 639px) {
  /* Hide user name text — keep avatar + chevron only */
  .nav-user-name    { display: none; }
  /* Hide credits pill entirely on mobile */
  .nav-credits-pill { display: none; }
  /* Tighten user pill padding */
  .nav-user-pill    { padding: 0.28rem 0.5rem 0.28rem 0.28rem; gap: 0.3rem; }
}
@media (max-width: 380px) {
  /* User pill: no text, minimal padding */
  .nav-user-pill         { padding: 0.25rem 0.3rem; gap: 0.2rem; }
  /* Chevron in user pill: hide on tightest screens */
  .nav-user-pill > svg   { display: none; }
}

/* ── Auth pages: mobile layout fixes ────────────────────── */
@media (max-width: 639px) {
  /* Reduce panel padding so content isn't squeezed */
  .auth-form-panel  { padding: 1.5rem; border-radius: 1.25rem; }
  /* Social auth: 3-col overflows at narrow widths — stack to 1 col */
  .social-auth-grid { grid-template-columns: 1fr; gap: .45rem; }
  .btn-social       { justify-content: center; padding: .625rem 1rem; font-size: .85rem; }
  /* Reduce page vertical padding */
  .page-auth        { padding: 1.75rem 0 2.5rem; }
  /* Slightly smaller heading */
  .auth-form-title  { font-size: 1.4rem; }
}
@media (max-width: 420px) {
  .auth-form-panel  { padding: 1.25rem; border-radius: 1rem; }
  .auth-form-title  { font-size: 1.25rem; }
  .auth-form-sub    { font-size: .8rem; margin-bottom: 1rem; }
  .page-auth        { padding: 1.25rem 0 2rem; }
  /* Tighter form group spacing */
  .auth-form-group  { margin-bottom: .75rem; }
}

/* ── About page hero: extra-small screens ───────────────── */
@media (max-width: 480px) {
  .about-hero h1 { font-size: 1.9rem; letter-spacing: -.01em; }
  .about-hero { padding: 48px 0; }
}

/* ── Blog: smaller card radius on phones ────────────────── */
@media (max-width: 480px) {
  .blog-card { border-radius: 20px; }
  .blog-hero { padding: 48px 0 36px; }
}

/* ── CTA card: safe padding at very narrow screens ───────── */
@media (max-width: 420px) {
  .cp-cta-card { padding: 36px 16px; border-radius: 20px; }
  .cp-cta-btn-primary,
  .cp-cta-btn-secondary { padding: 13px 20px; font-size: .88rem; }
}

/* ── Prose wrap: a touch of side breathing room on phones ── */
@media (max-width: 480px) {
  .sp-prose-wrap { padding-left: 4px; padding-right: 4px; }
}

/* ── Contact page: hero + form safe at ≤ 360px ─────────── */
@media (max-width: 360px) {
  .ct-hero h1 { font-size: 1.8rem; }
  .ct-form-card { padding: 20px 14px; }
  .ct-submit { width: 100%; text-align: center; }
}

/* ── Hero floating icons: hide below 900px to prevent overlap ─ */
@media (max-width: 899px) {
  .hero-float-icon { display: none; }
}

/* ── Global: any section-level overflow guard ───────────── */
/* Ensures decorative absolute blobs never add horizontal scroll */
.hero-section { overflow: hidden; }

/* Sections that use absolute-positioned glow blobs but lack overflow:hidden —
   adding it here prevents them from widening the scroll container */
.bg-section-1,
.bg-section-3,
.bg-background {
  overflow-x: hidden;
}

/* Hard containment on all top-level sections so glow blobs / marquees
   can never contribute to body scroll width */
@media (max-width: 768px) {
  section {
    overflow-x: hidden;
    max-width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════
   #reverse-search HERO WIDGET — tablet containment (641–900px)
   The outer glow (inset:-2rem) bleeds 32px past #search on each
   side. At 768px that makes the rendered width 784px > viewport,
   which creates internal scroll on the section. Hide both glows
   and clip #search at tablet widths to prevent any overflow.
══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  #search .search-outer-glow,
  #search .search-inner-glow { display: none !important; }
  #search {
    overflow: hidden;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
  }
}

/* ══════════════════════════════════════════════════════════
   #reverse-search HERO WIDGET — comprehensive mobile fix
   (all 5 modes: upload, screenshot, keyword, url, transcript)
══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── 1. Container: give the widget 14px breathing room on each side ── */
  /* glow hiding moved to ≤900px block above */
  #search {
    padding-left:  0.875rem !important;
    padding-right: 0.875rem !important;
    box-sizing: border-box !important;
    overflow: hidden !important; /* final safety clip */
  }

  /* ── 2. Grid: minmax(0,1fr) prevents track expanding to min-content ── */
  #reverse-search .search-panels {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 0.5rem !important;
  }

  /* ── 2b. Drop zone height fix.
         Visibility-stacking keeps ALL panels in the grid at row 1, so row height =
         tallest panel (URL panel with 8 chips). Upload/screenshot panels have less
         content → dead whitespace below the drop zone.
         Fix: make those two panels flex-column, then give the drop zone flex:1 so
         it stretches to fill the full grid-row height. Visibility system untouched. ── */
  #reverse-search #rvs-panel-upload,
  #reverse-search #rvs-panel-screenshot {
    display: flex !important;
    flex-direction: column !important;
  }
  #reverse-search #rvs-panel-upload .drop-zone,
  #reverse-search #rvs-panel-screenshot .drop-zone {
    flex: 1 !important;
    min-height: 0 !important;
  }

  /* ── 3. UPLOAD / SCREENSHOT modes — drop zones ── */
  #reverse-search .drop-zone {
    padding: 1.25rem 0.875rem !important;
    gap: 0.5rem !important;
  }
  #reverse-search .drop-zone-icon {
    width: 2.75rem !important;
    height: 2.75rem !important;
  }
  #reverse-search .drop-zone-icon svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }
  #reverse-search .drop-zone-title {
    font-size: 0.875rem !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  #reverse-search .drop-zone-hint {
    font-size: 0.68rem !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }
  /* Screenshot thumbnail grid: 2 col max on mobile */
  #reverse-search .rvs-ss-thumbs {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── 4. KEYWORD mode ── */
  /* Input row: column layout (already default), ensure no overflow */
  #reverse-search .search-input-row {
    overflow: hidden !important;
  }
  /* Input field: keep flex:1 but cap to available width */
  #reverse-search .search-input-field {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  #reverse-search .search-input-field input,
  #reverse-search .search-input-field textarea {
    min-width: 0 !important; /* allow shrinking in flex */
    max-width: 100% !important;
  }
  /* Platform select: full width under the input */
  #reverse-search .search-platform-select {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 0.875rem !important;
    padding: 0.75rem !important;
  }
  /* Chips: tool.css forces flex-wrap:nowrap which crushes chip width to ~45px.
     Override with wrap so pills stay pill-shaped. */
  #reverse-search .rvs-kw-chips {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    padding-right: 0 !important;
  }
  #reverse-search .rvs-kw-chips .chip {
    flex-shrink: 0 !important; /* pills never shrink */
    white-space: nowrap !important;
  }

  /* ── 5. URL mode — url chips already wrap, just ensure padding ── */
  #reverse-search .search-url-chips {
    flex-wrap: wrap !important;
  }
  #reverse-search .search-url-chips .chip {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  /* ── 6. TRANSCRIPT mode — textarea full width ── */
  #reverse-search .search-textarea-wrap {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.75rem !important;
  }
  #reverse-search .search-textarea-wrap textarea {
    min-width: 0 !important;
    width: 100% !important;
    font-size: 0.875rem !important;
  }

  /* ── 7. Keyword / URL / Transcript panel containers ── */
  #reverse-search #rvs-panel-keyword,
  #reverse-search #rvs-panel-url,
  #reverse-search #rvs-panel-transcript {
    padding: 1rem 0.75rem !important;
  }

  /* ── 8. Search button — full width, compact ── */
  #reverse-search .search-btn {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.875rem 1rem !important;
    font-size: 0.9rem !important;
    border-radius: 0.875rem !important;
  }

  /* ── 9. Meta bar — wrap, smaller text, centered ── */
  #reverse-search .search-meta {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.25rem 0.625rem !important;
    font-size: 0.6rem !important;
    margin-top: 0.5rem !important;
  }
  #reverse-search .search-meta-chip,
  #reverse-search .search-meta-item {
    font-size: 0.6rem !important;
  }
}

/* ============================================================
   27. FLUID TYPOGRAPHY — responsive headings (all pages)
   ============================================================ */
/*
  Home page headings use Tailwind-compat utility classes:
    h2.text-3xl  = all section headings (1.875rem base)
    h3.text-2xl  = how-to step titles   (1.500rem base)
  At 320px these wrap to 5+ lines. Fix: clamp() inside
  max-width:767px so ≥768px breakpoints remain untouched.

  Semantic classes (.section-heading etc.) cover other pages.
  !important beats the existing non-important breakpoint rules.
*/

/* ── 1. Utility + semantic classes: 320–767px ──────────────── */
@media (max-width: 767px) {

  /* Tailwind-compat heading classes (home page) */
  .text-3xl {
    font-size: clamp(1.25rem, 5.5vw, 1.875rem) !important;
    /* 320px → 20px | 400px → 22px | 545px+ → 30px (cap) */
  }
  .text-2xl {
    font-size: clamp(1rem, 4.5vw, 1.5rem) !important;
    /* 320px → 16px | 400px → 18px | 533px+ → 24px (cap) */
  }

  /* Semantic heading classes (shared / other pages) */
  .section-heading {
    font-size: clamp(1.375rem, 4.5vw, 1.875rem) !important;
  }
  .cta-title {
    font-size: clamp(1.25rem, 5vw, 2.25rem) !important;
  }
  .trusted-title {
    font-size: clamp(1.25rem, 4.5vw, 1.875rem) !important;
  }
  .stat-value {
    font-size: clamp(1.375rem, 5vw, 2.5rem) !important;
  }
  .howto-number {
    font-size: clamp(2.5rem, 10vw, 4.5rem) !important;
  }
  .howto-title {
    font-size: clamp(1.125rem, 3.5vw, 1.5rem) !important;
  }
  .modal-title {
    font-size: clamp(1.25rem, 3.5vw, 1.875rem) !important;
  }

  /* Pricing / shared FAQ section heading */
  .faq-heading h2 {
    font-size: clamp(1.125rem, 4.5vw, 1.9rem) !important;
  }
}

/* ── 2. CTA card heading — about / legal pages ─────────────── */
/* Base clamp(1.8rem,4vw,2.8rem) → min 1.8rem too large at 320px.
   "Start Your Reverse Video Search Now" wraps 3+ lines.        */
.cp-cta-card h2 {
  font-size: clamp(1.25rem, 4.5vw, 2.8rem) !important;
  /* 320px → 20px (2 lines) | 640px → 29px | 1200px+ → 45px  */
}

/* ── 3. About-page hero: fix @push 2.4rem at ≤640px ─────────── */
/* @push applies 2.4rem at ≤768px without !important.
   This !important wins at ≤640px; 641–767px keeps 2.4rem.     */
@media (max-width: 640px) {
  .about-hero h1 {
    font-size: clamp(1.375rem, 6vw, 2.4rem) !important;
    /* 320px → 22px (2 lines) | 533px → 32px | 640px → 2.4rem */
  }
}

/* ── 4. Blog-index hero: fix @push 2.2rem at ≤640px ─────────── */
@media (max-width: 640px) {
  .blog-hero h1 {
    font-size: clamp(1.375rem, 6vw, 2.2rem) !important;
    /* 320px → 22px (2 lines) | 533px → 32px | 640px → 2.2rem */
  }
}

/* ============================================================
   28. FOOTER — tablet 2-column layout (640–1023px)
   ============================================================ */
/*
  Default: .footer-grid is single-column (all stacked).
  1024px+: existing lg rule → 3-col (4fr 5fr 3fr).
  640–1023px: add 2-col layout — brand left, links right —
  with newsletter spanning full width below.
*/
@media (min-width: 640px) and (max-width: 1023px) {
  .footer-grid {
    grid-template-columns: 2fr 3fr;
    gap: 2rem;
  }
  /* Newsletter spans both columns, sitting below brand + links */
  .footer-newsletter {
    grid-column: 1 / -1;
  }
  /* footer-cols: keep 3 sub-cols at 640–1023px */
  .footer-cols {
    grid-template-columns: repeat(3, 1fr);
  }
  /* Tighten inner padding (horizontal stays from .container) */
  .footer-inner {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* ============================================================
   29. DEMO SECTION — mobile overflow fix (≤767px)
   ============================================================ */
/*
  At 320px the phone mockup fills the 288px content area edge-to-edge.
  Two decorative absolutely-positioned elements bleed outside:
    1. Glow blob (.-inset-10.opacity-30): extends inset:-40px on all sides
       → bleeds into container padding and toward viewport edges.
    2. Badge icon (.-left-3.bg-success): left:-12px → only 4px clearance
       from left viewport edge.
  Additionally at mobile:
    3. Phone wrapper (mx-auto in grid) can fail to centre when the grid's
       default justify-items:stretch overrides margin:auto. Fix with
       justify-self:center explicitly.
    4. The gradient CTA card (last stats item) overflows right:
       "Original video source found on YouTube" (~285px text) + SVG +
       gap = ~315px in a 248px content box. Fix: flex-wrap + min-width:0.
*/
@media (max-width: 767px) {
  /* 1. Hide decorative glow blob */
  .-inset-10.opacity-30 {
    display: none !important;
  }
  /* 2. Hide floating badge icon */
  .-left-3.bg-success {
    display: none !important;
  }
  /* 3. Phone wrapper: centre in grid cell.
     NOTE: Chrome normalises style="width:320px" → style="width: 320px"
     so [style*="width:320px"] never matches. Use [style*="320px"] instead. */
  .relative.mx-auto.max-w-full[style*="320px"] {
    max-width: calc(100% - 2rem) !important;
    justify-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* 4. Gradient CTA card — prevent right overflow.
     flex-wrap + overflow:hidden belt-and-suspenders:
     min-width:0 lets the span shrink; overflow:hidden clips whatever remains. */
  .bg-grad-brand.text-white.flex.items-center.gap-3 {
    flex-wrap: wrap !important;
    overflow: hidden !important;
    max-width: 100% !important;
  }
  .bg-grad-brand.text-white.flex.items-center.gap-3 > span {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}
/* ══════════════════════════════════════════════
   Discord community strip (below hero search tool)
   ══════════════════════════════════════════════ */
.discord-strip {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  max-width: 560px;
  margin: 0.5rem auto 13px;
  padding: 0.75rem 1rem 0.75rem 0.75rem;
  border-radius: 999px;
  text-decoration: none;
  background: color-mix(in srgb, var(--card, #fff) 78%, transparent);
  border: 1px solid color-mix(in srgb, #5865F2 28%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 3px rgba(88, 101, 242, 0.08), 0 8px 28px rgba(88, 101, 242, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.discord-strip:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, #5865F2 55%, transparent);
  box-shadow: 0 2px 6px rgba(88, 101, 242, 0.12), 0 14px 40px rgba(88, 101, 242, 0.22);
}
.discord-strip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #5865F2, #7B5CF0);
  box-shadow: 0 4px 12px rgba(88, 101, 242, 0.35);
}
.discord-strip-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
}
.discord-strip-text strong {
  font-size: 0.925rem;
  font-weight: 700;
  color: var(--foreground, #0f172a);
  line-height: 1.25;
}
.discord-strip-text small {
  font-size: 0.775rem;
  color: var(--muted-foreground, #64748b);
  line-height: 1.3;
}
.discord-strip-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  font-size: 0.83rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #5865F2, #4752C4);
  transition: filter 0.2s ease;
  white-space: nowrap;
}
.discord-strip:hover .discord-strip-cta { filter: brightness(1.08); }
.discord-strip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3BA55D;
  position: relative;
}
.discord-strip-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: rgba(59, 165, 93, 0.55);
  animation: discord-dot-pulse 2s ease-out infinite;
}
@keyframes discord-dot-pulse {
  0%        { transform: scale(1);   opacity: 1; }
  70%, 100% { transform: scale(2.7); opacity: 0; }
}
[data-theme="dark"] .discord-strip {
  background: color-mix(in srgb, #0b1120 72%, transparent);
  border-color: color-mix(in srgb, #5865F2 38%, transparent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 10px 34px rgba(88, 101, 242, 0.18);
}
[data-theme="dark"] .discord-strip-text strong { color: #f1f5f9; }
[data-theme="dark"] .discord-strip-text small { color: #94a3b8; }
@media (max-width: 560px) {
  .discord-strip { max-width: 100%; gap: 0.7rem; }
  .discord-strip-text small { display: none; }
  .discord-strip-cta { padding: 0.45rem 0.8rem; font-size: 0.78rem; }
}

/* ══════════════════════════════════════════════════════════════
   One-Time Unlock promo strip — free/guest branding for the
   single-search full-unlock purchase. Mirrors .discord-strip's
   pill layout but themed with the site's own scanner gradient
   instead of a third-party brand color.
   ══════════════════════════════════════════════════════════════ */
.ots-strip {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  max-width: 620px;
  margin: 0.9rem auto 1.4rem;
  padding: 0.7rem 0.9rem 0.7rem 0.7rem;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  background: color-mix(in srgb, var(--card, #fff) 80%, transparent);
  border: 1px solid color-mix(in srgb, #8B5CF6 30%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 3px rgba(139, 92, 246, 0.08), 0 8px 28px rgba(6, 182, 212, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.ots-strip:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, #8B5CF6 55%, transparent);
  box-shadow: 0 2px 6px rgba(139, 92, 246, 0.14), 0 14px 40px rgba(6, 182, 212, 0.2);
}
.ots-strip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  color: #fff;
  background: var(--gradient-scanner);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35);
}
.ots-strip-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
}
.ots-strip-text strong {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--foreground, #0f172a);
  line-height: 1.25;
}
.ots-strip-text small {
  font-size: 0.76rem;
  color: var(--muted-foreground, #64748b);
  line-height: 1.3;
}
.ots-strip-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  color: #fff;
  background: var(--gradient-scanner);
  white-space: nowrap;
  transition: filter 0.2s ease;
}
.ots-strip:hover .ots-strip-cta { filter: brightness(1.08); }
.ots-strip-price {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.6rem;
  margin-left: 0.35rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  background: var(--gradient-scanner);
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.35);
  vertical-align: middle;
}
[data-theme="dark"] .ots-strip {
  background: color-mix(in srgb, #0b1120 74%, transparent);
  border-color: color-mix(in srgb, #8B5CF6 40%, transparent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 10px 34px rgba(6, 182, 212, 0.16);
}
[data-theme="dark"] .ots-strip-text strong { color: #f1f5f9; }
[data-theme="dark"] .ots-strip-text small { color: #94a3b8; }
@media (max-width: 560px) {
  .ots-strip { max-width: 100%; gap: 0.65rem; }
  .ots-strip-text small { display: none; }
  .ots-strip-cta { padding: 0.4rem 0.75rem; font-size: 0.76rem; }
}

/* ── Checkout redirect state (pricing Subscribe buttons) ── */
.plans-panel.checkout-lock .btn-pricing {
  pointer-events: none;
}
.plans-panel.checkout-lock .btn-pricing-primary:not(.is-loading) {
  opacity: 0.45;
  filter: saturate(0.6);
  transform: none !important;
}
.btn-pricing-primary.is-loading {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  cursor: wait;
  animation: checkout-pulse 1.6s ease-in-out infinite;
}
.btn-pricing-primary.is-loading::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: checkout-shimmer 1.1s linear infinite;
}
.checkout-spinner {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  animation: checkout-spin 0.7s linear infinite;
}
.pricing-card.featured .btn-pricing-primary.is-loading .checkout-spinner {
  border-color: rgba(37,99,235,0.25);
  border-top-color: var(--primary, #2563EB);
}
@keyframes checkout-spin { to { transform: rotate(360deg); } }
@keyframes checkout-shimmer { to { background-position: -200% 0; } }
@keyframes checkout-pulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35); }
  50%      { box-shadow: 0 4px 26px rgba(139, 92, 246, 0.55); }
}

/* ─────────────────────────────────────────────────────────────────────────
   Accessibility utilities
   Added after a QA pass found (a) no way for a keyboard user to skip the
   header on any page — WCAG 2.4.1 Bypass Blocks, Level A — and (b) the
   footer newsletter field carrying only a placeholder, no label.
   New class names only; nothing existing is redefined.
   ───────────────────────────────────────────────────────────────────────── */

/* Available to assistive technology, invisible on screen. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Hidden until focused, then a real, visible control. It must NOT use
   display:none — a hidden element cannot receive focus, which would leave
   the link unreachable and defeat the point. */
.skip-link {
  position: absolute;
  top: 0; left: 0;
  z-index: 10000;
  transform: translateY(-120%);
  padding: 12px 20px;
  background: var(--primary, #2563EB);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  border-radius: 0 0 10px 0;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid #fff;
  outline-offset: -6px;
}

/* The skip target itself takes focus programmatically; it is not a control,
   so it must not paint a focus ring. */
#main-content:focus { outline: none; }

/* ─────────────────────────────────────────────────────────────────────────
   Below-the-fold rendering  (Style & Layout cost)
   The homepage is ~21 viewports tall and every one of them was laid out and
   painted during load: Lighthouse measured 1.1s of Style & Layout on mobile.
   content-visibility lets the browser skip that work for sections the visitor
   has not reached, and do it when they approach instead.
   `auto` on contain-intrinsic-size means the real height is remembered after
   a section renders once, so the scrollbar settles instead of jumping.
   Content stays in the DOM and in the accessibility tree throughout — this
   changes when layout happens, never whether the content exists.

   SCOPED TO THE HOMEPAGE ON PURPOSE. The same selector applied site-wide also
   matched the tool pages' loader and alert modals (#vteLoader, #vtePopup) and
   the pricing auth overlays, which must paint the moment they are shown, and
   the blog article body, which sits above the fold. `main[data-page="home"]`
   comes from home/main.blade.php and only the homepage carries it.
   ───────────────────────────────────────────────────────────────────────── */
main[data-page="home"] > div:not(:first-of-type) {
  content-visibility: auto;
  contain-intrinsic-size: auto 1200px;
}

/* ── Footer language switcher ──────────────────────────────────────────
   Only rendered when more than one locale has published content (see
   home/includes/_language_switcher.blade.php). */
.footer-lang {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin-top: 0.5rem; font-size: 0.8125rem;
}
.footer-lang-label { opacity: 0.7; }
.footer-lang-link {
  color: inherit; opacity: 0.75; text-decoration: none;
  padding: 0.125rem 0.5rem; border-radius: 999px;
  border: 1px solid transparent; transition: opacity .15s, border-color .15s;
}
.footer-lang-link:hover { opacity: 1; text-decoration: underline; }
.footer-lang-link.is-current {
  opacity: 1; font-weight: 600; border-color: currentColor;
}
/* ─────────────────────────────────────────────────────────────────────────
   Promotional offers (Admin → Offers)
   One visual system for every placement: the bar, the pricing strip, the
   struck-through prices, the seal and the small nudge tags. Brand gradient
   only as an accent line or seal fill — never a full red "SALE" treatment.
   ───────────────────────────────────────────────────────────────────────── */

/* Announcement bar — one confident line: glowing pill, the offer, a countdown
   chip and a solid CTA, over a deep ink band with soft brand light and a slow
   shimmer. Phones get a short pitch so it never wraps. */
.offer-bar {
  position: relative; z-index: 70; overflow: hidden;
  background:
    radial-gradient(ellipse 38% 180% at 12% 50%, rgba(6,182,212,.30), transparent 70%),
    radial-gradient(ellipse 38% 180% at 88% 50%, rgba(139,92,246,.34), transparent 70%),
    linear-gradient(90deg, #060A16, #0B1024 50%, #060A16);
  color: #E2E8F0; font-size: .86rem; line-height: 1.3;
}
.offer-bar[hidden] { display: none !important; }
.offer-bar::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 200%;
  background: linear-gradient(90deg, #06B6D4, #8B5CF6, #2563EB, #06B6D4, #8B5CF6, #2563EB, #06B6D4);
}
.offer-bar-shine {
  position: absolute; top: 0; bottom: 0; left: -30%; width: 30%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.10), transparent);
  transform: skewX(-20deg);
}
.offer-bar-inner {
  position: relative; display: flex; align-items: center; justify-content: center; gap: .8rem;
  padding: .55rem 3.2rem; color: inherit; text-decoration: none;
}
.offer-bar-pill {
  position: relative; flex: none; display: inline-flex; align-items: center; padding: .18rem .6rem; border-radius: 50px;
  background: linear-gradient(135deg, #06B6D4, #8B5CF6); color: #fff;
  font-weight: 800; font-size: .76rem; font-variant-numeric: tabular-nums; letter-spacing: .01em;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset, 0 4px 14px rgba(139,92,246,.45);
}
.offer-bar-text { font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.offer-bar-grad {
  background: linear-gradient(90deg, #67E8F9, #C4B5FD); -webkit-background-clip: text; background-clip: text;
  color: transparent; font-weight: 800;
}
.offer-bar-count {
  flex: none; display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 50px;
  background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  color: #CBD5E1; font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.offer-bar-count svg { color: #67E8F9; }
.offer-bar-cta {
  flex: none; display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .85rem; border-radius: 50px;
  background: #fff; color: #0B1220; font-weight: 700; font-size: .8rem; white-space: nowrap;
  box-shadow: 0 6px 18px -6px rgba(139,92,246,.6); transition: transform .15s ease, box-shadow .15s ease;
}
.offer-bar-cta svg { transition: transform .2s ease; }
.offer-bar-inner:hover .offer-bar-cta { transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(6,182,212,.7); }
.offer-bar-inner:hover .offer-bar-cta svg { transform: translateX(3px); }
.offer-bar-inner:focus-visible { outline: 2px solid #67E8F9; outline-offset: -3px; }
.offer-bar .ob-short { display: none; }

.offer-bar-close {
  position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); z-index: 1;
  width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.06); color: #94A3B8; font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.offer-bar-close:hover { background: rgba(255,255,255,.14); color: #fff; }
.offer-bar-close:focus-visible { outline: 2px solid #67E8F9; outline-offset: 2px; }

/* Light variant */
.offer-bar-light {
  background:
    radial-gradient(ellipse 38% 180% at 12% 50%, rgba(6,182,212,.20), transparent 70%),
    radial-gradient(ellipse 38% 180% at 88% 50%, rgba(139,92,246,.20), transparent 70%),
    linear-gradient(90deg, #ECFEFF, #F5F3FF);
  color: #334155;
}
.offer-bar-light .offer-bar-text { color: #0F172A; }
.offer-bar-light .offer-bar-grad { background-image: linear-gradient(90deg, #0891B2, #7C3AED); }
.offer-bar-light .offer-bar-count { background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px #E2E8F0; color: #334155; }
.offer-bar-light .offer-bar-count svg { color: #0891B2; }
.offer-bar-light .offer-bar-cta { background: #0F172A; color: #fff; }
.offer-bar-light .offer-bar-close { background: rgba(15,23,42,.05); color: #64748B; }
.offer-bar-light .offer-bar-shine { background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent); }

@media (prefers-reduced-motion: no-preference) {
  /* transform/opacity only: these run on every page while an offer is live,
     and animating background-position / left / box-shadow repainted the bar
     on the main thread every frame. */
  .offer-bar::after { animation: offer-bar-flow 8s linear infinite; }
  .offer-bar-shine { animation: offer-bar-shine 6s ease-in-out 1.5s infinite; }
  .offer-bar-pill::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    box-shadow: 0 4px 22px rgba(6,182,212,.65); opacity: 0;
    animation: offer-bar-glow 2.8s ease-in-out infinite;
  }
  @keyframes offer-bar-flow  { to { transform: translateX(-50%); } }
  @keyframes offer-bar-shine { 0%, 60% { transform: translateX(0) skewX(-20deg); } 100% { transform: translateX(534%) skewX(-20deg); } }
  @keyframes offer-bar-glow  { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
}

/* Phones: short pitch, compact countdown, short CTA — one line */
@media (max-width: 760px) {
  .offer-bar .ob-long { display: none; }
  .offer-bar .ob-short { display: inline; }
  .offer-bar-inner { justify-content: flex-start; gap: .5rem; padding: .5rem 2.5rem .55rem .7rem; }
  .offer-bar-text { flex: 1 1 auto; font-size: .8rem; }
  .offer-bar-pill { padding: .14rem .45rem; font-size: .7rem; }
  .offer-bar-count { padding: .16rem .45rem; font-size: .72rem; gap: .25rem; }
  .offer-bar-count svg { width: 11px; height: 11px; }
  .offer-bar-cta { padding: .26rem .6rem; font-size: .74rem; gap: .2rem; }
  .offer-bar-close { right: .35rem; width: 26px; height: 26px; }
}
@media (max-width: 380px) {
  .offer-bar-pill { display: none; }   /* the pitch already says "25% off" */
}

/* Pricing page offer callout — the offer, front and centre */
.offer-callout {
  position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1.1rem 1.4rem;
  max-width: 880px; margin: 1.9rem auto 0; padding: 1.15rem 1.5rem 1.15rem 1.2rem; border-radius: 1.5rem;
  text-align: left; isolation: isolate;
  background:
    radial-gradient(ellipse 50% 120% at 0% 0%, rgba(6,182,212,.14), transparent 60%),
    radial-gradient(ellipse 50% 120% at 100% 100%, rgba(139,92,246,.16), transparent 60%),
    var(--surface);
  box-shadow: 0 24px 60px -28px rgba(37,99,235,.45), 0 2px 6px rgba(15,23,42,.05);
}
.offer-callout.has-timer { grid-template-columns: auto 1fr auto; }
.offer-callout::before {   /* gradient border */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: -1;
  background: linear-gradient(120deg, #06B6D4, #8B5CF6 50%, #2563EB);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.offer-callout::after {    /* soft halo */
  content: ""; position: absolute; inset: 10% 6% -18%; z-index: -2; border-radius: 50%;
  background: linear-gradient(90deg, rgba(6,182,212,.35), rgba(139,92,246,.35)); filter: blur(38px); opacity: .45;
}
.offer-callout-seal .offer-seal-callout { width: 92px; height: 92px; }
.offer-seal-callout .offer-seal-text b { font-size: 1.45rem; }
.offer-seal-callout .offer-seal-text b.is-long { font-size: 1.05rem; }
.offer-seal-callout .offer-seal-text small { font-size: .62rem; }

.offer-callout-eyebrow {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .68rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--primary);
}
.offer-callout-eyebrow i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #22C55E; }
.offer-callout-title {
  margin: .25rem 0 .3rem; font-family: var(--font-display); font-weight: 800; color: var(--foreground);
  font-size: clamp(1.25rem, 2.6vw, 1.7rem); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance;
}
.offer-callout .offer-grad { background: var(--gradient-scanner); -webkit-background-clip: text; background-clip: text; color: transparent; }
.offer-callout-sub {
  margin: 0; display: flex; align-items: flex-start; gap: .4rem;
  font-size: .86rem; line-height: 1.45; color: var(--muted-foreground);
}
.offer-callout-sub svg { flex: none; margin-top: .15rem; color: #16A34A; }

.offer-callout-timer { display: grid; justify-items: center; gap: .35rem; }
.offer-callout-timer-label { font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-foreground); }
.offer-callout .offer-pop-timer-boxes span { min-width: 54px; }
.offer-callout .offer-pop-timer-boxes[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .offer-callout-eyebrow i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(34,197,94,.55); animation: offer-pop-pulse 1.8s ease-out infinite; }
  .offer-callout::after { animation: offer-callout-breathe 5s ease-in-out infinite; }
  @keyframes offer-callout-breathe { 0%, 100% { opacity: .35; } 50% { opacity: .6; } }
}

@media (max-width: 760px) {
  .offer-callout, .offer-callout.has-timer { grid-template-columns: auto 1fr; padding: 1rem; gap: .9rem 1rem; border-radius: 1.25rem; }
  .offer-callout-seal .offer-seal-callout { width: 70px; height: 70px; }
  .offer-seal-callout .offer-seal-text b { font-size: 1.1rem; }
  .offer-callout-timer {
    grid-column: 1 / -1; grid-template-columns: auto 1fr; justify-items: stretch; align-items: center; gap: .6rem;
    padding-top: .8rem; border-top: 1px dashed var(--border);
  }
  .offer-callout .offer-pop-timer-boxes span { flex: 1; min-width: 0; }
}

/* Discounted plan card */
.pricing-was {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem;
  font-size: .95rem; color: var(--light-text); font-variant-numeric: tabular-nums;
}
.pricing-was s { text-decoration-thickness: 1.5px; }
.pricing-was-tag {
  padding: .08rem .45rem; border-radius: 50px; font-size: .7rem; font-weight: 700;
  background: var(--primary-soft); color: var(--primary);
}
.pricing-saving {
  display: flex; align-items: center; gap: .4rem; margin: .35rem 0 .15rem;
  font-size: .8rem; font-weight: 600; color: #16A34A; font-variant-numeric: tabular-nums;
}
.pricing-saving::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pricing-card.featured .pricing-was { color: rgba(255,255,255,.65) !important; }
.pricing-card.featured .pricing-was s { color: rgba(255,255,255,.65) !important; }
.pricing-card.featured .pricing-was-tag { background: rgba(255,255,255,.2); color: #fff !important; }
.pricing-card.featured .pricing-saving { color: #BBF7D0 !important; }
.pricing-card.featured .pricing-saving::before { background: #BBF7D0; }
.offer-terms {
  margin: 1.25rem auto 0; max-width: 60ch; text-align: center;
  font-size: .8rem; color: var(--muted-foreground);
}
.ots-promo-price-was { display: block; font-size: .85rem; opacity: .7; margin-bottom: .1rem; }

/* Seal — sibling of .rp-st-trust-seal */
.offer-seal {
  position: relative; display: inline-block; width: 86px; height: 86px;
  filter: drop-shadow(0 8px 16px rgba(124,58,237,.28));
  pointer-events: none;
}
.offer-seal svg { width: 100%; height: 100%; display: block; }
.offer-seal-text {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; color: #fff !important; line-height: 1;
}
.offer-seal-text b {
  font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em;
  color: #fff !important;
}
.offer-seal-text b.is-long { font-size: .95rem; }
.offer-seal-text small { font-size: .56rem; font-weight: 700; letter-spacing: .16em; margin-top: 2px; color: #fff !important; }
.pricing-card .offer-seal-card { position: absolute; top: -26px; right: -14px; z-index: 3; }
@media (max-width: 640px) { .pricing-card .offer-seal-card { right: -4px; width: 74px; height: 74px; } }
@media (prefers-reduced-motion: no-preference) {
  .offer-seal svg { animation: offer-seal-turn 40s linear infinite; }
  @keyframes offer-seal-turn { to { transform: rotate(360deg); } }
}

/* Header "Upgrade to Pro" nudge */
.nav-offer-tag {
  margin-left: auto; padding: .08rem .45rem; border-radius: 50px;
  background: var(--gradient-scanner); color: #fff !important;
  font-size: .68rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────────────────
   Landing offer popup
   A calm, premium card rather than a sale shout: brand mesh + seal on top,
   one concrete saving, an honest countdown, one gradient CTA. Tokens only,
   so it follows the site's light/dark theme. Bottom sheet on phones.
   ───────────────────────────────────────────────────────────────────────── */
html.offer-pop-lock, html.offer-pop-lock body { overflow: hidden; }

.offer-pop { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 1rem; }
.offer-pop[hidden] { display: none !important; }

.offer-pop-backdrop {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(37,99,235,.22), transparent 70%), rgba(2,6,23,.62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .26s ease;
}

.offer-pop-dialog {
  position: relative; width: min(100%, 460px); max-height: calc(100dvh - 2rem); overflow: auto;
  border-radius: 1.6rem; background: var(--surface); color: var(--foreground);
  box-shadow: 0 40px 90px -30px rgba(15,23,42,.55), 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent);
  opacity: 0; transform: translateY(18px) scale(.96);
  transition: opacity .26s ease, transform .34s cubic-bezier(.2,.9,.25,1.15);
  outline: none; scrollbar-width: none;
}
.offer-pop-dialog::-webkit-scrollbar { display: none; }
.offer-pop-dialog::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 2;
  background: linear-gradient(140deg, rgba(6,182,212,.9), rgba(139,92,246,.9) 45%, rgba(37,99,235,.15) 75%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.offer-pop.is-open .offer-pop-backdrop { opacity: 1; }
.offer-pop.is-open .offer-pop-dialog { opacity: 1; transform: none; }

.offer-pop-x {
  position: absolute; top: .8rem; right: .8rem; z-index: 3; width: 34px; height: 34px;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--muted-foreground);
  box-shadow: 0 0 0 1px var(--border); transition: color .15s, transform .15s;
}
.offer-pop-x:hover { color: var(--foreground); transform: rotate(90deg); }

/* Hero */
.offer-pop-hero { position: relative; overflow: hidden; padding: 2.1rem 1.75rem 1.3rem; text-align: center; }
.offer-pop-mesh {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 70% 60% at 15% 0%, rgba(6,182,212,.26), transparent 62%),
    radial-gradient(ellipse 70% 60% at 90% 10%, rgba(139,92,246,.26), transparent 62%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(37,99,235,.10), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--section-2) 70%, var(--surface)), var(--surface));
}
.offer-pop-mesh::after {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(color-mix(in srgb, var(--foreground) 6%, transparent) 1px, transparent 1px),
                    linear-gradient(90deg, color-mix(in srgb, var(--foreground) 6%, transparent) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000, transparent 75%);
}
.offer-pop-hero > *:not(.offer-pop-mesh):not(.offer-pop-spark) { position: relative; z-index: 1; }

.offer-pop-seal-wrap { position: relative; width: 116px; height: 116px; margin: 0 auto .9rem; display: grid; place-items: center; }
.offer-pop-seal-wrap .offer-seal-pop { width: 116px; height: 116px; filter: drop-shadow(0 14px 26px rgba(124,58,237,.38)); }
.offer-seal-pop .offer-seal-text b { font-size: 1.75rem; }
.offer-seal-pop .offer-seal-text b.is-long { font-size: 1.25rem; }
.offer-seal-pop .offer-seal-text small { font-size: .7rem; }
.offer-pop-ring {
  position: absolute; inset: -10px; border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--purple) 45%, transparent);
}

.offer-pop-spark { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--gradient-scanner); opacity: .8; }
.offer-pop-spark.s1 { top: 22%; left: 16%; }
.offer-pop-spark.s2 { top: 14%; right: 20%; width: 4px; height: 4px; }
.offer-pop-spark.s3 { top: 48%; right: 12%; width: 5px; height: 5px; }

.offer-pop-eyebrow {
  display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .8rem; border-radius: 50px;
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--primary); background: color-mix(in srgb, var(--surface) 80%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent);
}
.offer-pop-eyebrow i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #22C55E; }

.offer-pop-title {
  margin: .8rem 0 .45rem; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.5rem, 5.2vw, 1.95rem); line-height: 1.15; letter-spacing: -.02em;
  color: var(--foreground); text-wrap: balance;
}
.offer-pop-grad { background: var(--gradient-scanner); -webkit-background-clip: text; background-clip: text; color: transparent; }
.offer-pop-body { margin: 0 auto; max-width: 34ch; font-size: .93rem; line-height: 1.55; color: var(--muted-foreground); }

/* Main */
.offer-pop-main { padding: .2rem 1.5rem 1.4rem; display: grid; gap: .8rem; }

.offer-pop-plan {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .2rem 1rem;
  padding: .85rem 1rem; border-radius: 1rem;
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 16%, var(--border));
}
.offer-pop-plan-name span { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.offer-pop-plan-name small { color: var(--muted-foreground); font-size: .76rem; }
.offer-pop-plan-price { text-align: right; font-variant-numeric: tabular-nums; line-height: 1.1; }
.offer-pop-plan-price s { display: block; font-size: .85rem; color: var(--light-text); text-decoration-thickness: 1.5px; }
.offer-pop-plan-price strong { font-family: var(--font-display); font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; }
.offer-pop-plan-price sub { font-size: .8rem; font-weight: 500; color: var(--muted-foreground); bottom: 0; margin-left: 1px; font-family: var(--font-sans); }
.offer-pop-save {
  grid-column: 1 / -1; display: flex; align-items: center; gap: .4rem; margin-top: .25rem;
  font-size: .8rem; font-weight: 600; color: #16A34A; font-variant-numeric: tabular-nums;
}
.offer-pop-save::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.offer-pop-timer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.offer-pop-timer-label { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-foreground); }
.offer-pop-timer-boxes { display: flex; gap: .4rem; }
.offer-pop-timer-boxes span {
  min-width: 52px; padding: .4rem .3rem .35rem; border-radius: .7rem; text-align: center;
  background: #0B1220; color: #fff; box-shadow: inset 0 -2px 0 rgba(139,92,246,.55);
}
.offer-pop-timer-boxes b { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; color: #fff; }
.offer-pop-timer-boxes i { display: block; font-style: normal; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: #94A3B8; }

.offer-pop-cta {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1.2rem; border-radius: .95rem; text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: #fff !important;
  background: var(--gradient-primary); box-shadow: 0 14px 30px -12px rgba(37,99,235,.65);
  transition: transform .15s ease, box-shadow .15s ease;
}
.offer-pop-cta:hover { transform: translateY(-1px); box-shadow: 0 18px 36px -12px rgba(124,58,237,.7); }
.offer-pop-cta svg { transition: transform .2s ease; }
.offer-pop-cta:hover svg { transform: translateX(3px); }
.offer-pop-cta::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg);
}
.offer-pop-cta:focus-visible, .offer-pop-later:focus-visible, .offer-pop-x:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.offer-pop-later {
  justify-self: center; border: 0; background: none; padding: .2rem .5rem; cursor: pointer;
  font-size: .85rem; color: var(--muted-foreground); text-decoration: underline; text-underline-offset: 3px;
}
.offer-pop-later:hover { color: var(--foreground); }

.offer-pop-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem 1rem; font-size: .76rem; color: var(--muted-foreground); }
.offer-pop-trust span { display: inline-flex; align-items: center; gap: .35rem; }
.offer-pop-terms { margin: -.2rem 0 0; text-align: center; font-size: .7rem; line-height: 1.45; color: var(--light-text); }

@media (prefers-reduced-motion: no-preference) {
  .offer-pop.is-open .offer-pop-seal-wrap { animation: offer-pop-drop .6s cubic-bezier(.2,.9,.25,1.3) .08s both; }
  .offer-pop-ring { animation: offer-seal-turn 26s linear infinite reverse; }
  .offer-pop-eyebrow i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(34,197,94,.55); animation: offer-pop-pulse 1.8s ease-out infinite; }
  .offer-pop-spark { animation: offer-pop-float 5s ease-in-out infinite; }
  .offer-pop-spark.s2 { animation-delay: -1.6s; }
  .offer-pop-spark.s3 { animation-delay: -3.1s; }
  .offer-pop.is-open .offer-pop-cta::after { animation: offer-pop-shine 3.6s ease-in-out 1s infinite; }
  .offer-pop-timer-boxes b.tick { animation: offer-pop-tick .35s ease; }
  @keyframes offer-pop-drop  { from { opacity: 0; transform: translateY(-14px) scale(.7) rotate(-18deg); } to { opacity: 1; transform: none; } }
  @keyframes offer-pop-pulse { 0% { transform: scale(1); opacity: 1; } 80%, 100% { transform: scale(3.3); opacity: 0; } }
  @keyframes offer-pop-float { 0%, 100% { transform: translateY(0); opacity: .8; } 50% { transform: translateY(-8px); opacity: .35; } }
  @keyframes offer-pop-shine { 0%, 55% { transform: translateX(0) skewX(-18deg); } 100% { transform: translateX(475%) skewX(-18deg); } }
  @keyframes offer-pop-tick  { from { transform: translateY(-4px); opacity: .4; } to { transform: none; opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  .offer-pop-dialog, .offer-pop-backdrop { transition: none; }
}

/* Phones: a bottom sheet within thumb reach */
@media (max-width: 640px) {
  .offer-pop { place-items: end center; padding: 0; }
  .offer-pop-dialog {
    width: 100%; max-height: 92dvh; border-radius: 1.4rem 1.4rem 0 0;
    transform: translateY(100%); transition: opacity .2s ease, transform .38s cubic-bezier(.2,.9,.25,1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .offer-pop-hero { padding: 1.7rem 1.2rem 1rem; }
  .offer-pop-seal-wrap, .offer-pop-seal-wrap .offer-seal-pop { width: 92px; height: 92px; }
  .offer-seal-pop .offer-seal-text b { font-size: 1.4rem; }
  .offer-pop-main { padding: .1rem 1.1rem 1.1rem; }
  .offer-pop-timer { flex-direction: column; align-items: stretch; gap: .35rem; }
  .offer-pop-timer-boxes span { flex: 1; min-width: 0; }
}

/* ── Live chat button (header) ─────────────────────────────────────────────
   The ONLY entry point to Tawk (the widget itself stays hidden all visit), so
   it is the second most inviting thing in the bar: a lit gradient-outlined
   pill with a live "we're online" dot. Sized to the sign-up CTA beside it —
   same height, font size and weight — so the two read as one pair, while the
   outline keeps the solid CTA the single strongest call to action. */
.nav-chat{
  position:relative;
  display:none;
  align-items:center;
  gap:.5rem;
  height:37px;                        /* matches .nav-cta exactly */
  padding:0 1rem 0 .4rem;
  border-radius:999px;
  border:1px solid transparent;
  font-family:inherit;
  font-size:0.875rem;
  font-weight:600;
  line-height:1;
  color:var(--primary);
  background:linear-gradient(var(--card),var(--card)) padding-box,var(--gradient-primary) border-box;
  box-shadow:0 4px 14px -6px rgba(37,99,235,.5);
  cursor:pointer;
  transition:transform .18s cubic-bezier(.34,1.4,.64,1),box-shadow .18s;
}
.nav-chat::before{content:"";position:absolute;inset:-4px;border-radius:inherit;pointer-events:none;background:var(--gradient-primary);filter:blur(10px);opacity:.18;z-index:-1;transition:opacity .18s;}
.nav-chat .nav-chat-ico{position:relative;display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;color:#fff;background:var(--gradient-primary);box-shadow:0 4px 12px -4px rgba(37,99,235,.75);}
/* "Someone is there" — the one thing that turns a link into an offer of help. */
.nav-chat .nav-chat-ico::after{content:"";position:absolute;right:-1px;bottom:-1px;width:.45rem;height:.45rem;border-radius:50%;background:#22C55E;box-shadow:0 0 0 2px var(--card);}
.nav-chat .nav-chat-label{background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;color:transparent;}
.nav-chat:hover{transform:translateY(-2px);box-shadow:0 10px 26px -8px rgba(37,99,235,.65);}
.nav-chat:hover::before{opacity:.32;}
.nav-chat:active{transform:translateY(0);}
.nav-chat:focus-visible{outline:2px solid var(--primary);outline-offset:3px;}
.nav-chat[disabled]{cursor:progress;}
.nav-chat.is-loading .nav-chat-ico{animation:rvsChatPulse 1s ease-in-out infinite;}
@media (prefers-reduced-motion:no-preference){
  /* One slow breath of the glow — enough to catch the eye, never a flashing badge. */
  .nav-chat::before{animation:rvsChatGlow 3.6s ease-in-out infinite;}
  .nav-chat .nav-chat-ico::after{animation:rvsChatLive 2.4s ease-out infinite;}
}
@keyframes rvsChatGlow{0%,100%{opacity:.16}50%{opacity:.34}}
@keyframes rvsChatLive{0%{box-shadow:0 0 0 2px var(--card),0 0 0 0 rgba(34,197,94,.55)}70%,100%{box-shadow:0 0 0 2px var(--card),0 0 0 6px rgba(34,197,94,0)}}
@keyframes rvsChatPulse{50%{opacity:.4}}
[data-theme="dark"] .nav-chat{box-shadow:0 4px 16px -6px rgba(99,102,241,.6);}
/* Shown with the rest of the desktop nav; below that the mobile menu carries
   its own "Live chat" row. */
@media (min-width:1024px){.nav-chat{display:inline-flex;}}
@media (prefers-reduced-motion:reduce){.nav-chat,.nav-chat.is-loading .nav-chat-ico{transition:none;animation:none;}}

.nav-mobile-chat{display:flex;align-items:center;gap:.6rem;width:100%;padding:.6rem .75rem;border:0;border-radius:.5rem;background:transparent;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;text-align:left;cursor:pointer}
.nav-mobile-chat svg{color:var(--primary)}
.nav-mobile-chat:hover{background:color-mix(in srgb,var(--primary) 8%,transparent);color:var(--primary)}
.nav-mobile-chat.is-loading{opacity:.6;cursor:progress}
@media (prefers-reduced-motion:reduce){.nav-chat,.nav-chat.is-loading .nav-chat-ico{transition:none;animation:none}}