/* RevenueGuard visual pass v1 (RG Design, 21 Oct 2026). Night Shift: brand_v1 tokens only, some at reduced opacity via color-mix.
   Load after brand-site.css. Motion is opt-in: every animation sits inside prefers-reduced-motion: no-preference.
   Only transform and opacity are animated. The page reads fully without JavaScript: .rg-rv (hidden start state) is only ever
   added by visual-pass.js, under html.rg-js. */

/* ---------- 1. Page shell: sticky glass header, no sideways scroll from full-bleed layers ---------- */
main{overflow-x:clip}
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--rg-bg) 80%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
section,[id]{scroll-margin-top:84px}
.site-nav a{position:relative;color:var(--rg-text-muted)}
.site-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;opacity:.7}
.site-nav a:hover,.site-nav a:focus-visible{color:var(--rg-text);text-decoration:none}
.site-nav a:hover::after,.site-nav a:focus-visible::after{transform:scaleX(1)}

/* ---------- 2. Hero: grid, grain and glow (CSS and one 330-byte SVG) ---------- */
.hero{position:relative;isolation:isolate;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--rg-space-12);padding-top:var(--rg-space-16);padding-bottom:var(--rg-space-16)}
.hero::before{content:"";position:absolute;z-index:-2;inset:0 auto 0 50%;width:100vw;transform:translateX(-50%);pointer-events:none;
  background-image:url("grain.svg"),
    linear-gradient(color-mix(in srgb,var(--rg-border) 75%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--rg-border) 75%,transparent) 1px,transparent 1px);
  background-size:160px 160px,56px 56px,56px 56px;background-position:0 0,center top,center top;
  -webkit-mask-image:radial-gradient(ellipse 62% 70% at 62% 42%,#000 25%,transparent 78%);mask-image:radial-gradient(ellipse 62% 70% at 62% 42%,#000 25%,transparent 78%)}
.hero::after{content:"";position:absolute;z-index:-1;right:-12%;top:2%;width:min(760px,90vw);aspect-ratio:1;pointer-events:none;
  background:var(--rg-shadow-glow-field);opacity:.9}
.hero .eyebrow{display:inline-flex;align-items:center;gap:var(--rg-space-2);background:color-mix(in srgb,var(--rg-surface) 70%,transparent);
  color:var(--rg-text);border:var(--rg-border-width-hairline) solid var(--rg-border-strong);font-family:var(--rg-font-mono);font-size:var(--rg-text-label);
  letter-spacing:var(--rg-tracking-label);text-transform:uppercase;font-weight:500;padding:6px 12px}
.hero .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--rg-accent);box-shadow:0 0 0 4px var(--rg-glow)}
.hero h1{background:linear-gradient(180deg,var(--rg-text) 35%,color-mix(in srgb,var(--rg-text) 62%,var(--rg-text-muted)));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--rg-text);padding-bottom:.06em}
.hero-form input{background:color-mix(in srgb,var(--rg-surface) 88%,transparent)}
.hero-form input:focus-visible{box-shadow:0 0 0 4px var(--rg-glow)}

/* ---------- 3. DEMO scan graphic (fictional site, real check names) ---------- */
.rg-scan{margin:0;position:relative;min-width:0}
.rg-scan__win{position:relative;border-radius:var(--rg-radius-xl);padding:0 0 var(--rg-space-5);
  background:linear-gradient(var(--rg-surface),var(--rg-surface)) padding-box,
    linear-gradient(155deg,color-mix(in srgb,var(--rg-accent) 55%,transparent),var(--rg-border-strong) 30%,var(--rg-border) 70%,color-mix(in srgb,var(--rg-text) 18%,transparent)) border-box;
  border:var(--rg-border-width-hairline) solid transparent;box-shadow:var(--rg-shadow-raised),var(--rg-shadow-glow);overflow:hidden}
.rg-scan__bar{display:flex;align-items:center;gap:var(--rg-space-3);padding:var(--rg-space-3) var(--rg-space-4);border-bottom:var(--rg-border-width-hairline) solid var(--rg-border);
  background:var(--rg-surface-2);font-family:var(--rg-font-mono);font-size:var(--rg-text-label);line-height:var(--rg-leading-label)}
.rg-scan__dots{display:inline-flex;gap:6px;flex:none}
.rg-scan__dots i{width:9px;height:9px;border-radius:50%;background:var(--rg-border-strong)}
.rg-scan__url{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--rg-text-muted);
  padding:3px 10px;border-radius:var(--rg-radius-pill);background:var(--rg-bg);border:var(--rg-border-width-hairline) solid var(--rg-border)}
.rg-scan__label{flex:none;padding:3px 8px;border-radius:var(--rg-radius-xs);border:var(--rg-border-width-hairline) dashed var(--rg-border-strong);
  color:var(--rg-text);letter-spacing:.02em;text-transform:none}
.rg-scan__progress{display:block;height:2px;background:linear-gradient(90deg,transparent,var(--rg-accent));transform-origin:left}
.rg-scan__body{display:grid;grid-template-columns:168px minmax(0,1fr);gap:var(--rg-space-5);align-items:start;padding:var(--rg-space-5) var(--rg-space-5) 0}

/* fictional site on a phone, drawn in CSS (no text, no logos) */
.rg-phone{position:relative;border-radius:26px;padding:7px;background:var(--rg-surface-2);border:var(--rg-border-width-hairline) solid var(--rg-border-strong);
  box-shadow:var(--rg-shadow-card)}
.rg-phone__screen{position:relative;overflow:hidden;border-radius:20px;aspect-ratio:9/18.5;background:var(--rg-bg);padding:12px 10px;display:flex;flex-direction:column;gap:7px}
.rg-phone__nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.rg-phone__nav b{width:44%;height:9px;border-radius:3px;background:var(--rg-border-strong)}
.rg-phone__menu{display:grid;gap:3px}.rg-phone__menu i{width:14px;height:2px;border-radius:1px;background:var(--rg-text-muted)}
.rg-phone__img{height:30%;border-radius:10px;background:radial-gradient(120% 90% at 20% 10%,var(--rg-border-strong),var(--rg-surface-2) 60%);flex:none}
.rg-sk{display:block;height:6px;border-radius:3px;background:var(--rg-border)}
.rg-sk--h{height:10px;background:var(--rg-border-strong);width:88%}
.rg-sk--s{width:62%}
.rg-phone__slot{position:relative;margin-top:6px;height:30px;border-radius:var(--rg-radius-pill);border:var(--rg-border-width-strong) dashed var(--rg-med);
  background:color-mix(in srgb,var(--rg-med) 9%,transparent)}
.rg-chip{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;display:inline-flex;align-items:center;gap:6px;
  padding:4px 9px;border-radius:var(--rg-radius-pill);background:var(--rg-med-bg);color:var(--rg-med);border:var(--rg-border-width-hairline) solid color-mix(in srgb,var(--rg-med) 45%,transparent);
  font-family:var(--rg-font-mono);font-size:10.5px;line-height:1.3;font-weight:500;box-shadow:var(--rg-shadow-card)}
.rg-chip b{font-weight:500;color:var(--rg-text-muted)}
.rg-phone__beam{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent 62%,color-mix(in srgb,var(--rg-accent) 14%,transparent) 94%,var(--rg-accent) 99.4%,transparent 100%)}

/* scan log: real check names, ticked one by one */
.rg-log{list-style:none;margin:0;padding:0;display:grid;gap:var(--rg-space-2);font-family:var(--rg-font-mono);font-size:12px;line-height:1.45;color:var(--rg-text-muted)}
.rg-log li{position:relative;padding:7px 10px 7px 34px;border-radius:var(--rg-radius-sm);background:var(--rg-surface-2);border:var(--rg-border-width-hairline) solid var(--rg-border)}
.rg-log li::before{content:"\2713";position:absolute;left:9px;top:7px;width:17px;height:17px;border-radius:50%;display:grid;place-content:center;
  font-size:10px;line-height:1;font-weight:500;color:var(--rg-ok);background:var(--rg-ok-bg)}
.rg-log li.rg-log__flag{color:var(--rg-text);background:var(--rg-med-bg);border-color:color-mix(in srgb,var(--rg-med) 45%,transparent)}
.rg-log li.rg-log__flag::before{content:"!";color:var(--rg-med-bg);background:var(--rg-med);font-weight:600}
.rg-log li.rg-log__flag strong{color:var(--rg-med);font-weight:500}

/* ---------- 4. "What you get" band below the hero ---------- */
.rg-get{position:relative;margin:0 0 var(--rg-space-12)}
.rg-get .chain{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--rg-space-4);margin-top:var(--rg-space-4)}
.rg-get .chain li{flex-direction:column;gap:var(--rg-space-3);border:0;border-left:var(--rg-border-width-hairline) solid var(--rg-border);padding:var(--rg-space-1) 0 var(--rg-space-1) var(--rg-space-4)}
.rg-get .chain li:first-child{border-left:0;padding-left:0}
.rg-get .dot{font-family:var(--rg-font-mono);font-weight:500}

/* ---------- 5. Cards, steps, plans: border light and lift on hover AND keyboard focus ---------- */
.card,.steps li,.plan,.cta{position:relative}
.card,.steps li,.plan{transition:transform var(--rg-motion-base) var(--rg-motion-ease)}
.card::after,.steps li::after,.plan::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;
  border:var(--rg-border-width-hairline) solid color-mix(in srgb,var(--rg-text) 22%,transparent);
  box-shadow:var(--rg-shadow-raised);transition:opacity var(--rg-motion-base) var(--rg-motion-ease)}
.card::before,.plan::before{content:"";position:absolute;left:12%;right:12%;top:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--rg-text) 30%,transparent),transparent)}
.card:hover,.card:focus-within,.steps li:hover,.steps li:focus-within,.plan:hover,.plan:focus-within{transform:translateY(-3px)}
.card:hover::after,.card:focus-within::after,.steps li:hover::after,.steps li:focus-within::after,.plan:hover::after,.plan:focus-within::after{opacity:1}
.steps li::before{font-family:var(--rg-font-mono);font-weight:500}
.faq details{transition:transform var(--rg-motion-base) var(--rg-motion-ease)}
.faq details:hover,.faq details:focus-within{border-color:var(--rg-border-strong)}

/* buttons: lift plus a soft glow layer (opacity only) */
.btn,form.rg button{position:relative;isolation:isolate;transition:transform var(--rg-motion-fast) var(--rg-motion-ease)}
.btn::after,form.rg button::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;
  box-shadow:0 10px 30px -6px var(--rg-glow),0 0 0 4px color-mix(in srgb,var(--rg-accent) 16%,transparent);transition:opacity var(--rg-motion-base) var(--rg-motion-ease)}
.btn.secondary::after{box-shadow:0 0 0 4px color-mix(in srgb,var(--rg-text) 10%,transparent)}
.btn:hover,.btn:focus-visible,form.rg button:hover,form.rg button:focus-visible{transform:translateY(-1px)}
.btn:hover::after,.btn:focus-visible::after,form.rg button:hover::after,form.rg button:focus-visible::after{opacity:1}
.btn:active,form.rg button:active{transform:translateY(0)}
.btn.secondary:hover,.btn.secondary:focus-visible{border-color:var(--rg-text-muted)}
/* links: hover and focus get the same underline */
main a:not(.btn):focus-visible,.site-footer a:focus-visible{text-decoration-color:currentColor}

/* ---------- 6. DEMO finding page: glow field and a gentle float ---------- */
.rg-finding-demo{position:relative;isolation:isolate}
.rg-finding-demo picture{position:relative}
.rg-finding-demo::before{content:"";position:absolute;z-index:-1;left:-10%;right:-10%;top:4%;height:70%;background:var(--rg-shadow-glow-field);opacity:.55;pointer-events:none}

/* ---------- 7. Closing CTA: same grid and glow language as the hero ---------- */
.cta{overflow:hidden;isolation:isolate;background:var(--rg-surface)}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(color-mix(in srgb,var(--rg-border) 80%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--rg-border) 80%,transparent) 1px,transparent 1px);
  background-size:40px 40px;background-position:center;-webkit-mask-image:radial-gradient(ellipse 60% 90% at 50% 0%,#000,transparent 75%);mask-image:radial-gradient(ellipse 60% 90% at 50% 0%,#000,transparent 75%)}
.cta::after{content:"";position:absolute;z-index:-1;left:50%;top:-60%;width:640px;height:420px;transform:translateX(-50%);background:var(--rg-shadow-glow-field);opacity:.8;pointer-events:none}

/* ---------- 8. /order and /signup (Pages Function screens): background language and form panel ---------- */
main.legal{position:relative;isolation:isolate}
main.legal::before{content:"";position:absolute;z-index:-2;top:0;left:50%;width:100vw;height:560px;transform:translateX(-50%);pointer-events:none;
  background-image:url("grain.svg"),linear-gradient(color-mix(in srgb,var(--rg-border) 70%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--rg-border) 70%,transparent) 1px,transparent 1px);
  background-size:160px 160px,56px 56px,56px 56px;background-position:0 0,center top,center top;
  -webkit-mask-image:radial-gradient(ellipse 55% 85% at 50% 0%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 55% 85% at 50% 0%,#000 20%,transparent 75%)}
main.legal::after{content:"";position:absolute;z-index:-1;top:-180px;left:50%;width:min(820px,100vw);height:520px;transform:translateX(-50%);background:var(--rg-shadow-glow-field);opacity:.6;pointer-events:none}
main.legal form.rg{position:relative;max-width:680px;margin-top:var(--rg-space-6);padding:var(--rg-space-4) var(--rg-space-8) var(--rg-space-8);border-radius:var(--rg-radius-xl);
  background:linear-gradient(var(--rg-surface),var(--rg-surface)) padding-box,
    linear-gradient(170deg,color-mix(in srgb,var(--rg-accent) 50%,transparent),var(--rg-border-strong) 28%,var(--rg-border) 100%) border-box;
  border:var(--rg-border-width-hairline) solid transparent;box-shadow:var(--rg-shadow-raised),var(--rg-shadow-glow)}
main.legal form.rg input[type=text],main.legal form.rg input[type=url],main.legal form.rg input[type=email],main.legal form.rg select{max-width:none;background:var(--rg-bg)}
main.legal form.rg input:focus-visible,main.legal form.rg select:focus-visible{box-shadow:0 0 0 4px var(--rg-glow)}
main.legal form.rg .check{max-width:none}
@media (max-width:600px){main.legal form.rg{padding:var(--rg-space-2) var(--rg-space-5) var(--rg-space-6);border-radius:var(--rg-radius-lg)}}

/* ---------- 9. Responsive ---------- */
@media (max-width:900px){.rg-get .chain{grid-template-columns:repeat(2,minmax(0,1fr))}.rg-get .chain li:nth-child(odd){border-left:0;padding-left:0}}
@media (max-width:820px){.hero{grid-template-columns:minmax(0,1fr);gap:var(--rg-space-10);padding-top:var(--rg-space-10);padding-bottom:var(--rg-space-10)}
  .hero::after{right:-40%;top:38%}}
@media (max-width:560px){
  .rg-scan__body{grid-template-columns:118px minmax(0,1fr);gap:var(--rg-space-3);padding:var(--rg-space-4) var(--rg-space-4) 0}
  .rg-scan__win{padding-bottom:var(--rg-space-4)}
  .rg-scan__bar{padding:var(--rg-space-2) var(--rg-space-3);gap:var(--rg-space-2)}
  .rg-scan__dots{display:none}
  .rg-phone{border-radius:20px;padding:5px}.rg-phone__screen{border-radius:15px;padding:9px 7px;gap:5px}
  .rg-phone__slot{height:22px}
  .rg-chip{font-size:9.5px;padding:3px 7px;top:calc(100% + 6px)}
  .rg-log{font-size:11px;gap:6px}.rg-log li{padding:6px 8px 6px 28px}.rg-log li::before{left:6px;top:6px;width:15px;height:15px}
  .rg-log li.rg-log__extra{display:none}
  .rg-get .chain{grid-template-columns:minmax(0,1fr)}.rg-get .chain li{border-left:0;padding-left:0;flex-direction:row;border-top:var(--rg-border-width-hairline) dashed var(--rg-border);padding-top:var(--rg-space-3)}
  .rg-get .chain li:first-child{border-top:0;padding-top:0}}

/* ---------- 10. Motion (opt-in). With reduced motion, everything above shows its final, static state. ---------- */
@media (prefers-reduced-motion:no-preference){
  /* hero entrance */
  .hero-copy > *{animation:rg-rise .7s var(--rg-motion-ease) both}
  .hero-copy > :nth-child(2){animation-delay:.06s}.hero-copy > :nth-child(3){animation-delay:.12s}.hero-copy > :nth-child(n+4){animation-delay:.18s}
  .rg-scan{animation:rg-rise .9s .15s var(--rg-motion-ease) both}
  .hero::after{animation:rg-drift 16s ease-in-out infinite alternate}
  .hero .eyebrow::before{animation:rg-pulse 2.4s ease-in-out infinite}
  /* the scan loop: 12 s. Beam sweeps the phone, progress fills, checks tick in, RG-C01 is flagged, hold, reset */
  .rg-phone{animation:rg-float 7s ease-in-out infinite}
  .rg-phone__beam{animation:rg-beam 12s linear infinite}
  .rg-scan__progress{animation:rg-progress 12s var(--rg-motion-ease) infinite both}
  .rg-phone__slot{animation:rg-slot 12s var(--rg-motion-ease) infinite both}
  .rg-chip{animation:rg-chip 12s var(--rg-motion-ease) infinite both}
  @keyframes rg-l0{0%,5.0%{opacity:0;transform:translateX(-8px)}8.0%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
  .rg-log li:nth-child(1){animation:rg-l0 12s var(--rg-motion-ease) infinite both}
  @keyframes rg-l1{0%,11.25%{opacity:0;transform:translateX(-8px)}14.25%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
  .rg-log li:nth-child(2){animation:rg-l1 12s var(--rg-motion-ease) infinite both}
  @keyframes rg-l2{0%,17.5%{opacity:0;transform:translateX(-8px)}20.5%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
  .rg-log li:nth-child(3){animation:rg-l2 12s var(--rg-motion-ease) infinite both}
  @keyframes rg-l3{0%,23.75%{opacity:0;transform:translateX(-8px)}26.75%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
  .rg-log li:nth-child(4){animation:rg-l3 12s var(--rg-motion-ease) infinite both}
  @keyframes rg-l4{0%,30.0%{opacity:0;transform:translateX(-8px)}33.0%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
  .rg-log li:nth-child(5){animation:rg-l4 12s var(--rg-motion-ease) infinite both}
  @keyframes rg-l5{0%,36.25%{opacity:0;transform:translateX(-8px)}39.25%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
  .rg-log li:nth-child(6){animation:rg-l5 12s var(--rg-motion-ease) infinite both}
  @keyframes rg-l6{0%,42.5%{opacity:0;transform:translateX(-8px)}45.5%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
  .rg-log li:nth-child(7){animation:rg-l6 12s var(--rg-motion-ease) infinite both}
  .rg-scan.rg-paused *,.rg-scan.rg-paused{animation-play-state:paused}
  /* DEMO finding page float */
  .rg-finding-demo picture{animation:rg-float-lg 9s ease-in-out infinite}
  /* scroll reveal, only when visual-pass.js has marked an element (never without JS) */
  .rg-js .rg-rv{opacity:0;transform:translateY(22px) scale(.985);transition:opacity .7s var(--rg-motion-ease),transform .7s var(--rg-motion-ease);transition-delay:calc(var(--rg-rv-i,0) * 70ms)}
  .rg-js .rg-rv.rg-in{opacity:1;transform:none}
  .rg-js .steps > li.rg-rv{transform:translateY(34px) rotate(-1.2deg)}
  .rg-js .steps > li.rg-rv.rg-in{transform:none}
}
@keyframes rg-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes rg-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(-6%,5%) scale(1.08)}}
@keyframes rg-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes rg-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes rg-float-lg{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes rg-beam{0%{opacity:0;transform:translateY(-100%)}4%{opacity:1}44%{opacity:1;transform:translateY(0)}50%,100%{opacity:0;transform:translateY(0)}}
@keyframes rg-progress{0%{transform:scaleX(0);opacity:1}44%,92%{transform:scaleX(1);opacity:1}97%,100%{transform:scaleX(1);opacity:0}}
@keyframes rg-slot{0%,30%{opacity:0;transform:scale(.94)}33%,92%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes rg-chip{0%,32%{opacity:0;transform:translateX(-50%) translateY(6px) scale(.9)}36%,92%{opacity:1;transform:translateX(-50%)}97%,100%{opacity:0;transform:translateX(-50%)}}
@media print{.rg-rv{opacity:1!important;transform:none!important}.site-header{position:static}}