/* =========================================================================
   revamp.css - ShiftRanks home page redesign design system
   Palette: "Aurora Borealis". Self-contained, NO Tailwind dependency.
   Everything here is hand-authored CSS. Class vocabulary is a stable
   contract: page templates are built against these names.

   GOO FILTER - include this ONCE per page that uses .rv-goo (drop it near
   the top of <body>). It is inert markup (0x0) that only defines the SVG
   filter id="rv-goo" referenced by .rv-goo { filter: url(#rv-goo) }:

   <svg width="0" height="0" style="position:absolute"><filter id="rv-goo"><feGaussianBlur in="SourceGraphic" stdDeviation="12" result="b"/><feColorMatrix in="b" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="g"/><feBlend in="SourceGraphic" in2="g"/></filter></svg>

   Motion safety: reveal "from" states live behind html.rv-motion (added by
   revamp.js only when motion is allowed). Without that class, or with no JS,
   every [data-reveal] is fully visible.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* Palette */
  --rv-base:#0A0E14;
  --rv-surface:#121824;
  --rv-surface-2:#172032;
  --rv-line:rgba(255,255,255,.08);
  --rv-line-2:rgba(255,255,255,.14);

  --rv-teal:#2DE2C8;
  --rv-blue:#5B8CFF;
  --rv-violet:#A56BFF;
  --rv-magenta:#F45BC4;

  --rv-fg:#E6EAF2;
  --rv-muted:#8A94A6;
  --rv-faint:#5A6273;

  --rv-aurora: linear-gradient(100deg,#2DE2C8,#5B8CFF,#A56BFF,#F45BC4);

  /* Fonts (Inter/Space Grotesk/JetBrains Mono loaded via _revamp_head.html;
     system fallbacks keep the page readable if the CDN is blocked) */
  /* Neutral, consistent type across the whole page (headings + body). */
  --rv-display:'Inter',system-ui,sans-serif;
  --rv-body:'Inter',system-ui,sans-serif;
  --rv-mono:'JetBrains Mono',ui-monospace,monospace;

  /* Radii */
  --rv-r:16px;
  --rv-r-lg:24px;
  --rv-r-pill:999px;

  /* Layout */
  --rv-maxw:1200px;
  --rv-gutter:24px;

  /* Effects */
  --rv-glow-teal:0 0 24px rgba(45,226,200,.35);
  --rv-shadow-lift:0 18px 48px -18px rgba(45,226,200,.25);
}

@media (max-width:640px){
  :root{ --rv-gutter:16px; }
}

/* -------------------------------------------------------------------------
   2. BASE / RESET (scoped to .rv-page to avoid clobbering existing app CSS)
   ------------------------------------------------------------------------- */
.rv-page *,
.rv-page *::before,
.rv-page *::after{ box-sizing:border-box; }

.rv-page{
  min-height:100vh;
  /* transparent so the fixed #rv-space starfield shows through the whole page;
     the base colour is on <body>. */
  background:transparent;
  color:var(--rv-fg);
  font-family:var(--rv-body);
  font-size:16px;
  line-height:1.6;
  /* clip (not hidden) so this doesn't become a scroll container - hidden would
     force overflow-y:auto and break the pinned hero's position:sticky. */
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

.rv-page img,
.rv-page svg,
.rv-page canvas{ display:block; max-width:100%; }

.rv-page a{ color:inherit; text-decoration:none; }

/* -------------------------------------------------------------------------
   3. LAYOUT
   ------------------------------------------------------------------------- */
.rv-section{
  position:relative;
  padding-block:clamp(56px,7vw,100px);
}
.rv-section--tight{
  padding-block:clamp(32px,4.5vw,60px);
}

.rv-container{
  width:100%;
  max-width:var(--rv-maxw);
  margin-inline:auto;
  padding-inline:var(--rv-gutter);
}

.rv-grid{
  display:grid;
  gap:24px;
}
.rv-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.rv-cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.rv-cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }

/* Responsive collapse: 3/4 -> 2 under 1024px; everything -> 1 under 640px */
@media (max-width:1024px){
  .rv-cols-3,
  .rv-cols-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  .rv-cols-2,
  .rv-cols-3,
  .rv-cols-4{ grid-template-columns:minmax(0,1fr); }
}

/* Features: reads like a 3-up grid, but a flex row so an incomplete final
   row (10 cards = 3+3+3+1) centres instead of stranding the last card on
   the left with two empty columns beside it. */
.rv-features-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:24px;
}
.rv-features-grid > *{
  flex:1 1 calc((100% - 48px) / 3);
  min-width:0;
  max-width:calc((100% - 48px) / 3);
}
@media (max-width:1024px){
  .rv-features-grid > *{
    flex-basis:calc((100% - 24px) / 2);
    max-width:calc((100% - 24px) / 2);
  }
}
@media (max-width:640px){
  .rv-features-grid > *{ flex-basis:100%; max-width:100%; }
}

.rv-center{
  text-align:center;
  margin-inline:auto;
  max-width:720px;
}

.rv-stack{
  display:flex;
  flex-direction:column;
  gap:var(--gap,16px);
}

/* -------------------------------------------------------------------------
   4. TYPOGRAPHY
   ------------------------------------------------------------------------- */
.rv-display{
  font-family:var(--rv-display);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-0.02em;
}

.rv-h1{
  /* Neutral, clean sans for the hero headline. */
  font-family:var(--rv-body);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-0.025em;
  font-size:clamp(2.4rem,5.4vw,4.6rem);
  margin:0;
}
.rv-h2{
  font-family:var(--rv-display);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-0.02em;
  font-size:clamp(2rem,4vw,3.2rem);
  margin:0;
}
.rv-h3{
  font-family:var(--rv-display);
  font-weight:600;
  line-height:1.2;
  font-size:1.25rem;
  margin:0;
}

.rv-lead{
  font-family:var(--rv-body);
  font-size:clamp(1.05rem,1.6vw,1.35rem);
  color:var(--rv-muted);
  max-width:60ch;
  line-height:1.6;
}

.rv-muted{ color:var(--rv-muted); }

/* Even line lengths: balance short headings so their lines are similar
   widths, and use pretty wrapping in prose to avoid a single orphan word
   on the last line. */
.rv-h1,.rv-h2,.rv-h3,.rv-orb-tag{ text-wrap:balance; }
.rv-lead,.rv-card__body,.rv-orb-cap-sub{ text-wrap:pretty; }

.rv-mono{
  font-family:var(--rv-mono);
  font-feature-settings:"tnum" 1;
  font-variant-numeric:tabular-nums;
}

/* -------------------------------------------------------------------------
   5. EYEBROW + PULSING DOT
   ------------------------------------------------------------------------- */
.rv-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--rv-body);
  font-size:.85rem;
  font-weight:500;
  /* sentence case, NOT all-caps / tracked */
  color:var(--rv-muted);
  background:var(--rv-surface);
  border:1px solid var(--rv-line);
  border-radius:var(--rv-r-pill);
  padding:6px 14px 6px 12px;
}

.rv-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  flex:0 0 auto;
  background:var(--rv-teal);
  box-shadow:0 0 0 0 rgba(45,226,200,.55);
  animation:rv-pulse 2.4s ease-out infinite;
}

@keyframes rv-pulse{
  0%   { box-shadow:0 0 0 0 rgba(45,226,200,.55); transform:scale(1); }
  70%  { box-shadow:0 0 0 8px rgba(45,226,200,0);  transform:scale(1.15); }
  100% { box-shadow:0 0 0 0 rgba(45,226,200,0);    transform:scale(1); }
}

/* -------------------------------------------------------------------------
   6. BUTTONS
   ------------------------------------------------------------------------- */
.rv-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:var(--rv-body);
  font-weight:600;
  font-size:.98rem;
  line-height:1;
  border-radius:var(--rv-r-pill);
  padding:14px 22px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .25s ease,
             background-color .25s ease, border-color .25s ease;
  -webkit-appearance:none;
  appearance:none;
}
.rv-btn:hover{ transform:translateY(-1px); }
.rv-btn:active{ transform:translateY(0); }

.rv-btn--primary{
  /* solid brand blue, no gradient (matches the blue wordmark) */
  background:#3B82F6;
  color:#ffffff;
  box-shadow:0 8px 26px -12px rgba(59,130,246,.7);
}
.rv-btn--primary:hover{
  background:#2f6ede;
  box-shadow:0 12px 34px -10px rgba(59,130,246,.6);
}

.rv-btn--ghost{
  background:transparent;
  border:1px solid var(--rv-line-2);
  color:var(--rv-fg);
}
.rv-btn--ghost:hover{
  background:rgba(255,255,255,.06);
  border-color:var(--rv-line-2);
}

.rv-btn--lg{
  font-size:1.08rem;
  padding:18px 30px;
}

/* -------------------------------------------------------------------------
   7. CARDS / FEATURES
   Depth from a luminous top-edge hairline + hover lift, not grey shadow.
   ------------------------------------------------------------------------- */
.rv-card,
.rv-feature{
  position:relative;
  background:var(--rv-surface);
  border:1px solid var(--rv-line);
  border-radius:var(--rv-r-lg);
  padding:28px;
  transition:transform .25s ease, border-color .25s ease, box-shadow .3s ease;
}
/* luminous top-edge gradient hairline */
.rv-card::before,
.rv-feature::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  border-radius:var(--rv-r-lg) var(--rv-r-lg) 0 0;
  background:linear-gradient(90deg,transparent,rgba(45,226,200,.6),
             rgba(91,140,255,.6),rgba(165,107,255,.55),transparent);
  opacity:.5;
  transition:opacity .3s ease;
}
.rv-card:hover,
.rv-feature:hover{
  transform:translateY(-4px);
  border-color:rgba(91,140,255,.4);
  box-shadow:0 22px 50px -24px rgba(91,140,255,.45);
}
.rv-card:hover::before,
.rv-feature:hover::before{ opacity:1; }

.rv-card__icon{
  width:44px;
  height:44px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--rv-teal);
  background:
    radial-gradient(120% 120% at 30% 20%,rgba(45,226,200,.22),rgba(91,140,255,.14) 60%,transparent);
  border:1px solid var(--rv-line);
  margin-bottom:18px;
}
.rv-card__title{
  font-family:var(--rv-display);
  font-weight:600;
  font-size:1.2rem;
  line-height:1.25;
  margin:0 0 8px;
}
.rv-card__body{
  color:var(--rv-muted);
  margin:0;
}

/* -------------------------------------------------------------------------
   8. DIVIDERS / GLOW
   ------------------------------------------------------------------------- */
.rv-divider{
  position:relative;
  width:100%;
  height:1px;
  border:0;
  background:var(--rv-line);
}
.rv-divider::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(420px,60%);
  height:2px;
  background:linear-gradient(90deg,transparent,var(--rv-teal),
             var(--rv-blue),var(--rv-violet),transparent);
  filter:blur(1px);
  opacity:.65;
}

.rv-glow{
  position:absolute;
  z-index:0;
  pointer-events:none;
  width:520px;
  height:520px;
  max-width:80vw;
  border-radius:50%;
  background:
    radial-gradient(closest-side,rgba(45,226,200,.30),rgba(91,140,255,.16) 55%,transparent 72%);
  filter:blur(46px);
  opacity:.8;
}

/* -------------------------------------------------------------------------
   9. SEO INSTRUMENTS
   ------------------------------------------------------------------------- */
.rv-stat{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.rv-stat__num{
  font-family:var(--rv-display);
  font-weight:700;
  line-height:1;
  font-size:clamp(2.2rem,4vw,3.4rem);
  letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  background:var(--rv-aurora);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.rv-stat__label{
  font-size:.9rem;
  color:var(--rv-muted);
}

.rv-ring{
  position:relative;
  width:180px;
  height:180px;
  max-width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.rv-ring svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.rv-ring__value{
  position:relative;
  z-index:1;
  font-family:var(--rv-display);
  font-weight:700;
  font-size:2rem;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

.rv-console{
  background:var(--rv-surface);
  border:1px solid var(--rv-line);
  border-radius:var(--rv-r);
  padding:8px 4px;
  font-family:var(--rv-mono);
  font-size:.9rem;
  font-variant-numeric:tabular-nums;
  overflow:hidden;
}
.rv-console__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 16px;
  border-bottom:1px solid var(--rv-line);
  transition:background-color .5s ease;
}
.rv-console__row:last-child{ border-bottom:0; }
.rv-console__row .rv-muted{ color:var(--rv-faint); }

/* JS toggles .rv-flash to flash spectral then fade */
.rv-flash{
  background-color:rgba(45,226,200,.15) !important;
}

.rv-spark{
  display:inline-block;
  vertical-align:middle;
  width:96px;
  height:28px;
  line-height:0;
}
.rv-spark svg{ width:100%; height:100%; overflow:visible; }

/* -------------------------------------------------------------------------
   10. SOCIAL - blobs, goo, marquee, posts
   ------------------------------------------------------------------------- */
/* The blob layer sits at z-index:-1 so page content stays above it. Its
   container must therefore be its own stacking context, otherwise the -1
   pushes the blobs behind the opaque page/body background and they vanish. */
:has(> .rv-blobs){
  position:relative;
  z-index:0;
  isolation:isolate;
}
.rv-blobs{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:-1;
  pointer-events:none;
}
.rv-blob{
  position:absolute;
  width:460px;
  height:460px;
  max-width:90vw;
  border-radius:50%;
  filter:blur(70px);
  mix-blend-mode:screen;
  opacity:.5;
  will-change:transform;
}
.rv-blob--teal{
  background:radial-gradient(closest-side,var(--rv-teal),transparent 70%);
  top:-8%;
  left:-6%;
  animation:rv-blob-a 28s ease-in-out infinite alternate;
}
.rv-blob--violet{
  background:radial-gradient(closest-side,var(--rv-violet),transparent 70%);
  top:20%;
  right:-10%;
  animation:rv-blob-b 34s ease-in-out infinite alternate;
}
.rv-blob--magenta{
  background:radial-gradient(closest-side,var(--rv-magenta),transparent 70%);
  bottom:-12%;
  left:30%;
  animation:rv-blob-c 40s ease-in-out infinite alternate;
}
@keyframes rv-blob-a{
  0%  { transform:translate(0,0) scale(1) rotate(0deg); }
  100%{ transform:translate(80px,60px) scale(1.18) rotate(40deg); }
}
@keyframes rv-blob-b{
  0%  { transform:translate(0,0) scale(1.1) rotate(0deg); }
  100%{ transform:translate(-90px,40px) scale(.9) rotate(-35deg); }
}
@keyframes rv-blob-c{
  0%  { transform:translate(0,0) scale(1) rotate(0deg); }
  100%{ transform:translate(60px,-70px) scale(1.22) rotate(30deg); }
}

/* Gooey merge container - needs id="rv-goo" filter in the page (see top). */
.rv-goo{
  filter:url(#rv-goo);
}

.rv-marquee{
  position:relative;
  overflow:hidden;
  width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.rv-marquee__track{
  display:inline-flex;
  gap:20px;
  will-change:transform;
  white-space:nowrap;
}

.rv-post{
  flex:0 0 auto;
  width:300px;
  white-space:normal;
  background:var(--rv-surface-2);
  border:1px solid var(--rv-line);
  border-radius:var(--rv-r);
  padding:18px;
}
.rv-post__head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.rv-post__head .rv-dot{ animation:none; } /* avatar dot, not a live indicator */
.rv-post__avatar{
  width:34px;
  height:34px;
  border-radius:50%;
  flex:0 0 auto;
  background:var(--rv-aurora);
}
.rv-post__name{
  font-weight:600;
  font-size:.95rem;
}
.rv-post__body{
  color:var(--rv-muted);
  font-size:.92rem;
  margin:0 0 12px;
}
.rv-post__tag{
  display:inline-block;
  font-family:var(--rv-mono);
  font-size:.72rem;
  color:var(--rv-teal);
  background:rgba(45,226,200,.12);
  border:1px solid rgba(45,226,200,.25);
  border-radius:var(--rv-r-pill);
  padding:3px 10px;
}

/* -------------------------------------------------------------------------
   11. PRICING
   ------------------------------------------------------------------------- */
.rv-price{
  position:relative;
  background:var(--rv-surface);
  border:1px solid var(--rv-line);
  border-radius:var(--rv-r-lg);
  padding:32px 28px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.rv-price--featured{
  border:1px solid transparent;
  background:
    linear-gradient(var(--rv-surface),var(--rv-surface)) padding-box,
    var(--rv-aurora) border-box;
  box-shadow:0 24px 60px -28px rgba(165,107,255,.5);
  transform:scale(1.03);
}
@media (max-width:640px){
  .rv-price--featured{ transform:none; }
}
.rv-price__amount{
  font-family:var(--rv-display);
  font-weight:700;
  font-size:clamp(2.4rem,4vw,3rem);
  line-height:1;
  letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;
}
.rv-price__per{
  color:var(--rv-muted);
  font-size:.95rem;
  font-weight:500;
}
.rv-price__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.rv-price__list li{
  position:relative;
  padding-left:28px;
  color:var(--rv-fg);
}
.rv-check::before,
.rv-price__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.15em;
  width:18px;
  height:18px;
  border-radius:50%;
  background:
    radial-gradient(closest-side,rgba(45,226,200,.28),transparent) ,
    var(--rv-surface-2);
}
/* spectral check glyph */
.rv-check::after,
.rv-price__list li::after{
  content:"";
  position:absolute;
  left:6px;
  top:.32em;
  width:5px;
  height:9px;
  border:solid var(--rv-teal);
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.rv-price__cta{
  margin-top:auto;
}

/* Collapsible feature lists for plans with many features. */
.rv-price__list li.rv-feat-hidden{ display:none; }
.rv-price__more{
  margin:10px 0 4px;
  background:none;
  border:none;
  padding:4px 0;
  font:inherit;
  font-weight:600;
  color:var(--rv-teal);
  cursor:pointer;
}
.rv-price__more:hover{ color:#8af0e0; }
.rv-price__more:focus-visible{ outline:2px solid var(--rv-teal); outline-offset:3px; border-radius:4px; }

/* Zan-AI orb showcase */
.rv-orb-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(24px,4vw,64px);
  align-items:center;
}
.rv-orb-stage{
  position:relative;
  width:100%;
  max-width:520px;
  aspect-ratio:1/1;
  margin-inline:auto;
}
.rv-orb-canvas{ width:100%; height:100%; display:block; }
.rv-orb-col{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.rv-orb-cap{ text-align:center; margin-top:-6px; }
.rv-orb-tag{
  margin:0;
  font-size:clamp(1.35rem,2.1vw,2rem);
  line-height:1.12;
  font-weight:800;
  letter-spacing:-.01em;
  background:linear-gradient(100deg,#4d8bff 0%,#a06bff 52%,#f558cd 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.rv-orb-cap-sub{
  margin:8px auto 0;
  max-width:360px;
  font-size:.95rem;
  line-height:1.5;
  color:var(--rv-muted,#98a2b3);
}
@media (max-width:900px){
  .rv-orb-wrap{ grid-template-columns:1fr; }
  .rv-orb-col{ order:-1; }
  .rv-orb-stage{ max-width:420px; }
}

/* Tall, pinned hero: the sticky panel stays in view while you scroll the
   section, giving the orb room to reshape into a spiral galaxy on screen
   (scroll progress read from .rv-hero-tall by orbgalaxy.js). */
.rv-hero-tall{ position:relative; height:200vh; }
.rv-hero-pin{
  position:sticky; top:0; min-height:100vh;
  display:flex; align-items:center; overflow:hidden;
  padding:88px 0 40px;
}
@media (max-width:900px){
  .rv-hero-tall{ height:auto; }
  .rv-hero-pin{ position:static; min-height:0; overflow:visible; padding:64px 0 24px; }
}
@media (prefers-reduced-motion: reduce){
  /* No scroll voyage under reduced motion: a normal-height hero. */
  .rv-hero-tall{ height:auto; }
  .rv-hero-pin{ position:static; min-height:0; overflow:visible; padding:72px 0 32px; }
}

/* -------------------------------------------------------------------------
   12. PILLS / TAGS / BADGES
   ------------------------------------------------------------------------- */
.rv-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.85rem;
  font-weight:500;
  color:var(--rv-fg);
  background:var(--rv-surface);
  border:1px solid var(--rv-line);
  border-radius:var(--rv-r-pill);
  padding:6px 14px;
}
.rv-tag{
  display:inline-block;
  font-family:var(--rv-mono);
  font-size:.75rem;
  color:var(--rv-violet);
  background:rgba(165,107,255,.12);
  border:1px solid rgba(165,107,255,.28);
  border-radius:var(--rv-r-pill);
  padding:3px 10px;
}
.rv-badge-live{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:.8rem;
  font-weight:600;
  color:var(--rv-teal);
  background:rgba(45,226,200,.1);
  border:1px solid rgba(45,226,200,.28);
  border-radius:var(--rv-r-pill);
  padding:5px 12px 5px 10px;
}
.rv-badge-live::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--rv-teal);
  box-shadow:0 0 0 0 rgba(45,226,200,.55);
  animation:rv-pulse 2.4s ease-out infinite;
}

/* -------------------------------------------------------------------------
   13. MOTION BASE - reveal "from" states.
   Content is visible by default. JS *arms* each reveal (adds .rv-armed) to
   hide it, then reveals it (adds .is-in) when it scrolls in; in-view elements
   are revealed at once. Hiding therefore requires JS to have run AND decided
   to hide this specific element, so a slow/failed observer can never leave a
   section stuck dim - the worst case is simply "no animation".
   ------------------------------------------------------------------------- */
html.rv-motion [data-reveal]{
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
html.rv-motion [data-reveal].rv-armed{
  opacity:0;
  transform:translateY(24px);
  will-change:opacity, transform;
}
html.rv-motion [data-reveal].rv-armed.is-in{
  opacity:1;
  transform:none;
}

/* -------------------------------------------------------------------------
   14. ACCESSIBILITY / FOCUS / REDUCED MOTION
   ------------------------------------------------------------------------- */
.rv-page a:focus-visible,
.rv-page button:focus-visible,
.rv-btn:focus-visible,
.rv-price__cta:focus-visible{
  outline:2px solid var(--rv-teal);
  outline-offset:3px;
  border-radius:var(--rv-r-pill);
}

@media (prefers-reduced-motion: reduce){
  .rv-blob{ animation:none !important; }
  .rv-dot{ animation:none; }
  .rv-badge-live::before{ animation:none; }
  .rv-page *{ scroll-behavior:auto; }
}

/* -------------------------------------------------------------------------
   15. SMALL SCREENS (down to 360px)
   ------------------------------------------------------------------------- */
@media (max-width:400px){
  .rv-card,
  .rv-feature,
  .rv-price{ padding:22px 20px; }
  .rv-post{ width:260px; }
}