/* ============================================================
   Raydn svc114 premium polish layer. Sitewide, additive, safe.
   Lifts the sub-9 rubric rows without touching layout geometry.
     U8  One consistent tappable-text + button feel
     U9  Soft section transitions (kill the hard dark-cut seams)
     U20 Hover / focus / fade-in polish (the machined feel)
   Only rendering: shadows, transitions, underlines, focus rings,
   opacity fades. No box sizes, no positions, no colors changed
   beyond the approved amber/navy/off-white palette.
   ============================================================ */

:root{
  --pp-amber: #f5a524;
  --pp-amber-soft: rgba(245,165,36,.55);
  --pp-ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- U20  Universal button lift + press ---------- */
/* Every CTA/button family gets the same considered motion. */
.btn,
.btn--primary,
.btn--ghost,
[class*="__cta"],
.rr-hiw__cta,
.rr-estimate__cta,
.rr-payback__cta,
.rr-hook__cta,
.rr-billproof__cta{
  transition: transform var(--rdn-t-base,200ms) var(--pp-ease),
              box-shadow var(--rdn-t-base,200ms) var(--pp-ease),
              filter var(--rdn-t-base,200ms) var(--pp-ease) !important;
  will-change: transform;
}
@media (hover:hover) and (pointer:fine){
  .btn:hover,
  .btn--primary:hover,
  .btn--ghost:hover,
  [class*="__cta"]:hover,
  .rr-hiw__cta:hover,
  .rr-estimate__cta:hover,
  .rr-payback__cta:hover,
  .rr-hook__cta:hover,
  .rr-billproof__cta:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 26px -8px rgba(245,165,36,.35),
                0 4px 12px -6px rgba(0,0,0,.5);
    filter: brightness(1.03);
  }
}
.btn:active,
.btn--primary:active,
.btn--ghost:active,
[class*="__cta"]:active{
  transform: translateY(0);
  filter: brightness(.98);
}

/* ---------- U8  One tappable-text language ---------- */
/* All amber word-links behave the same: quiet at rest, a clean amber
   underline grows in on hover, and any trailing arrow nudges right.
   Seniors stop guessing what is tappable. */
.rr-ownerband__link,
.rr-ownerband__textlink,
.rr-hook__link,
.rr-scope__link,
.rr-testimonials__link,
.rr-gallery__link,
.rr-credwall__link,
a[data-track$="_story"],
a[data-track$="_call"]{
  position: relative;
  text-decoration: none;
  transition: color var(--rdn-t-base,200ms) var(--pp-ease);
}
.rr-ownerband__link::after,
.rr-hook__link::after,
.rr-scope__link::after,
.rr-testimonials__link::after,
.rr-gallery__link::after{
  content:"";
  position:absolute;
  left:0; right:100%;
  bottom:-2px;
  height:1.5px;
  background: var(--pp-amber);
  border-radius:2px;
  transition: right var(--rdn-t-base,200ms) var(--pp-ease);
}
@media (hover:hover) and (pointer:fine){
  .rr-ownerband__link:hover::after,
  .rr-hook__link:hover::after,
  .rr-scope__link:hover::after,
  .rr-testimonials__link:hover::after,
  .rr-gallery__link:hover::after{ right:0; }
}

/* ---------- U20  Consistent amber focus ring (accessibility + polish) ---------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[class*="__cta"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: 2px solid var(--pp-amber);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- U20  Clean image fade-in ---------- */
/* Lazy images arrive with a soft fade instead of a hard pop. */
img[loading="lazy"]{
  animation: pp-fade-in .6s var(--pp-ease) both;
}
@keyframes pp-fade-in{
  from{ opacity:0; }
  to{ opacity:1; }
}

/* ---------- U9  Soft section transitions on the homepage ---------- */
/* A whisper-thin gradient bleed at the top of each major dark band so
   the eye reads depth, not a hard guillotine cut. Homepage only, and
   only on sections that sit on the deep navy. */
#page-home > section.rr-ownerband::before,
#page-home > section.rr-hook::before,
#page-home > section.rr-billproof::before,
#page-home > section.rr-hiw::before,
#page-home > section.rr-credwall::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:64px;
  background: linear-gradient(to bottom,
              rgba(255,255,255,.028),
              rgba(255,255,255,0));
  pointer-events:none;
  z-index:0;
}
#page-home > section.rr-ownerband,
#page-home > section.rr-hook,
#page-home > section.rr-billproof,
#page-home > section.rr-hiw,
#page-home > section.rr-credwall{ position:relative; }

/* ---------- reduced motion: honor it ---------- */
@media (prefers-reduced-motion: reduce){
  .btn, [class*="__cta"], img[loading="lazy"]{
    transition:none !important;
    animation:none !important;
  }
  .rr-ownerband__link::after,
  .rr-hook__link::after{ transition:none; }
}

/* ============================================================
   U2  Density conversion: calculator "why two inputs" tip
   Was a 3-sentence prose wall. Now a two-lever bar graphic that
   SHOWS the logic: your bill moves the number by tens of thousands,
   the fiddly stuff moves it a few percent. Read in one glance.
   ============================================================ */
.rdn-levers{
  margin-top: 18px;
  padding: 18px 20px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008));
  border: 1px solid rgba(245,165,36,.16);
  box-shadow: 0 8px 24px -14px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
}
.rdn-levers__head{
  margin:0 0 14px;
  font-weight:800;
  font-size:.82rem;
  letter-spacing:.02em;
  color:#f4f6fb;
}
.rdn-levers__row{ display:flex; flex-direction:column; gap:14px; }
.rdn-levers__lever{ display:grid; grid-template-columns:1fr; gap:4px; }
.rdn-levers__amt{
  font-family:'Cabinet Grotesk',system-ui,sans-serif;
  font-weight:900;
  line-height:1;
  color:#f5a524;
}
.rdn-levers__lever--big .rdn-levers__amt{ font-size:clamp(1.25rem,4.5vw,1.6rem); }
.rdn-levers__lever--small .rdn-levers__amt{ font-size:clamp(1rem,3.5vw,1.2rem); color:#c7d0dd; }
.rdn-levers__lbl{ font-size:.8rem; color:#8a94a6; line-height:1.3; }
.rdn-levers__bar{
  display:block;
  height:8px;
  margin-top:4px;
  border-radius:99px;
  width:var(--w);
  background:linear-gradient(90deg,#f0a300,#f7b23a);
  transform-origin:left center;
  animation: rdn-lever-grow 1.1s cubic-bezier(.2,.7,.2,1) both;
}
.rdn-levers__lever--small .rdn-levers__bar{
  background:linear-gradient(90deg,#3a4560,#556);
}
@keyframes rdn-lever-grow{ from{ transform:scaleX(0);} to{ transform:scaleX(1);} }
.rdn-levers__foot{
  margin:14px 0 0;
  font-size:.82rem;
  color:#c7d0dd;
  line-height:1.4;
}
@media (min-width:720px){
  .rdn-levers__row{ flex-direction:row; }
  .rdn-levers__lever{ flex:1; align-content:start; }
}
@media (prefers-reduced-motion: reduce){
  .rdn-levers__bar{ animation:none; }
}

/* ============================================================
   U15  Mobile paragraph tightening
   On phones, long ledes were running 8+ lines and reading as a
   scroll wall. Cap the visual measure and tighten leading so no
   body block feels like homework. Content untouched, only rhythm.
   ============================================================ */
@media (max-width:560px){
  .rr-ownerband__lede,
  .rr-hook__lede,
  .rr-billproof__lede,
  .rr-scope__lede,
  .rdn-hero__lede,
  .rr-estimate__lede,
  .rr-section__lede,
  .rr-learnmore__lede{
    line-height:1.5;
    letter-spacing:.002em;
  }
}

/* ============================================================
   U17  Calm the eyebrow labels
   The all-caps kickers were used on nearly every section, which
   turned a special device into template wallpaper. Keep them for
   structure but dial the weight down so they whisper the section
   name instead of shouting it. One quieter, more premium voice.
   ============================================================ */
.rr-ownerband__eyebrow,
.rr-hook__eyebrow,
.rr-billproof__eyebrow,
.rr-credwall__eyebrow,
.rr-scope__eyebrow,
.rr-proof__eyebrow,
.rr-estimate__eyebrow,
.rr-payback__eyebrow,
.rr-testimonials__eyebrow,
.rr-gallery__eyebrow,
.rr-hiw__eyebrow{
  font-weight:700;
  letter-spacing:.16em;
  font-size:.68rem;
  opacity:.82;
}