/* RewardHound shared web skin — mirrors the current app theme */
:root{
  --rh-bg:#07111F;
  --rh-bg-raised:#0A1726;
  --rh-navy:#07111F;
  --rh-navy-raised:#0B1B2D;
  --rh-navy-border:#1E4F78;
  --rh-blue:#1495FF;
  --rh-blue-bright:#39C4FF;
  --rh-blue-text:#66C7FF;
  --rh-surface:#0D1C2C;
  --rh-surface-glass:rgba(13,28,44,.96);
  --rh-text:#F7FBFF;
  --rh-text-secondary:#C4D6E8;
  --rh-muted:#88A1B9;
  --rh-muted-light:#7290AA;
  --rh-border:#17324A;
  --rh-border-strong:#245274;
  --rh-success:#31D69B;
  --rh-success-soft:rgba(49,214,155,.12);
  --rh-warning:#F7B955;
  --rh-warning-soft:rgba(247,185,85,.12);
  --rh-danger:#FF6574;
  --rh-danger-soft:rgba(255,101,116,.12);

  /* Override older page variables without rewriting every demo screen. */
  --ink:var(--rh-text);
  --ink2:var(--rh-text-secondary);
  --blue:var(--rh-blue);
  --blue2:var(--rh-blue-bright);
  --cyan:var(--rh-blue-text);
  --bg:var(--rh-bg);
  --surface:var(--rh-surface-glass);
  --white:var(--rh-text);
  --muted:var(--rh-muted);
  --line:var(--rh-border);
  --green:var(--rh-success);
  --greenbg:var(--rh-success-soft);
  --amber:var(--rh-warning);
  --card:rgba(13,28,44,.9);
  --text:var(--rh-text);
  --purple:#9F8CFF;
  --shadow:0 24px 70px rgba(0,8,20,.38);
  --shadow2:0 12px 34px rgba(0,8,20,.28);
}
html{background:var(--rh-bg)}
body{
  color:var(--rh-text)!important;
  background:
    radial-gradient(circle at 82% -4%,rgba(20,149,255,.20),transparent 30rem),
    radial-gradient(circle at 8% 12%,rgba(57,196,255,.075),transparent 28rem),
    linear-gradient(180deg,var(--rh-bg) 0%,#050B14 100%)!important;
}
::selection{background:rgba(20,149,255,.35);color:#fff}
a{color:inherit}

/* Shared header / brand */
header,.top{
  background:rgba(7,17,31,.86)!important;
  border-bottom:1px solid rgba(23,50,74,.86)!important;
  backdrop-filter:blur(20px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(20px) saturate(145%)!important;
}
.brand{color:var(--rh-text)!important;letter-spacing:-.035em!important}
header .brand .logo,
header .brand .mark,
.top .brand .logo,
.top .brand .mark{
  width:42px!important;height:42px!important;border-radius:14px!important;
  background:url('/favicon.svg') center/cover no-repeat!important;
  box-shadow:0 10px 26px rgba(0,8,20,.40)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  color:transparent!important;font-size:0!important;overflow:hidden!important;
}
.navlinks>a:not(.btn),.links>a,.navlinks a{
  color:var(--rh-muted)!important;
}
.navlinks>a:not(.btn):hover,.links>a:hover,.navlinks a:hover{
  color:var(--rh-text)!important;background:rgba(20,149,255,.08)!important;
}
.menu summary{
  color:var(--rh-text)!important;background:var(--rh-surface)!important;
  border-color:var(--rh-border)!important;
}
.menu-panel{
  background:var(--rh-surface)!important;border-color:var(--rh-border)!important;
  box-shadow:var(--shadow)!important;
}
.menu-panel a{color:var(--rh-text-secondary)!important}
.menu-panel a:hover{background:rgba(20,149,255,.11)!important;color:var(--rh-blue-text)!important}

/* Controls */
.btn,.button{
  border-radius:17px!important;
  border-color:var(--rh-border-strong)!important;
}
.btn.primary{
  background:linear-gradient(145deg,var(--rh-navy-raised),#12345B)!important;
  color:#fff!important;border-color:var(--rh-navy-border)!important;
  box-shadow:0 12px 30px rgba(0,8,20,.34)!important;
}
.btn.blue,.button{
  background:var(--rh-blue)!important;color:#fff!important;border-color:rgba(255,255,255,.10)!important;
  box-shadow:0 12px 28px rgba(20,149,255,.20)!important;
}
.btn.soft{
  background:var(--rh-surface)!important;color:var(--rh-text-secondary)!important;
  border-color:var(--rh-border)!important;box-shadow:0 8px 22px rgba(0,8,20,.18)!important;
}
button,input,select,textarea{font-family:inherit}
input,select,textarea{
  background:var(--rh-surface)!important;color:var(--rh-text)!important;
  border-color:var(--rh-border)!important;
}
input::placeholder,textarea::placeholder{color:var(--rh-muted-light)!important}

/* Homepage */
.hero{padding-top:68px!important}
.eyebrow{
  background:rgba(20,149,255,.10)!important;color:var(--rh-blue-text)!important;
  border-color:rgba(20,149,255,.24)!important;box-shadow:none!important;
}
.hero h1,h1,h2,h3{color:var(--rh-text)}
.hero h1 span,.kicker{color:var(--rh-blue-text)!important}
.lead,.section-copy p,.feature p,.price p,.panel.light p{color:var(--rh-muted)!important}
.micro span{color:var(--rh-muted)!important}
.phone{
  background:linear-gradient(145deg,#10263F,#050B14)!important;
  border:1px solid var(--rh-border-strong)!important;
  box-shadow:0 38px 95px rgba(0,8,20,.48)!important;
}
.phone-screen{
  color:var(--rh-text)!important;
  background:linear-gradient(180deg,var(--rh-bg-raised),var(--rh-bg))!important;
  border:1px solid var(--rh-border)!important;
}
.phone-screen:before{background:radial-gradient(circle,rgba(20,149,255,.16),transparent 67%)!important}
.avatar{
  border-radius:12px!important;background:url('/favicon.svg') center/cover no-repeat!important;
  color:transparent!important;font-size:0!important;border:1px solid rgba(255,255,255,.10)!important;
}
.balance-label{color:var(--rh-blue-text)!important;font-weight:700!important}
.mini-action{
  background:var(--rh-surface)!important;border-color:var(--rh-border)!important;
  color:var(--rh-text-secondary)!important;box-shadow:0 8px 20px rgba(0,8,20,.22)!important;
  border-radius:16px!important;
}
.mini-action b{background:rgba(20,149,255,.14)!important;color:var(--rh-blue-text)!important}
.phone-card.blue{background:linear-gradient(145deg,#0D1C2C,#123B61)!important;border:1px solid var(--rh-navy-border)!important}
.phone-card.navy{background:linear-gradient(145deg,#0B1B2D,#102943)!important;border:1px solid var(--rh-border)!important}
.float-card{
  background:rgba(13,28,44,.94)!important;border-color:var(--rh-border)!important;
  color:var(--rh-text)!important;box-shadow:var(--shadow2)!important;
}
.float-card span{color:var(--rh-success)!important}
.quick-card,.finder,.feature,.price,.panel.light{
  background:var(--rh-surface-glass)!important;border-color:var(--rh-border)!important;
  color:var(--rh-text)!important;box-shadow:0 10px 30px rgba(0,8,20,.20)!important;
}
.quick-card:hover,.merchant:hover,.feature:hover{
  border-color:var(--rh-border-strong)!important;box-shadow:0 14px 34px rgba(0,8,20,.30)!important;
}
.quick-icon,.feature-icon{
  background:rgba(20,149,255,.14)!important;color:var(--rh-blue-text)!important;
}
.arrow{color:var(--rh-blue-text)!important}
.searchbar input{
  background:var(--rh-bg-raised)!important;border-color:var(--rh-border)!important;color:var(--rh-text)!important;
}
.searchbar input:focus{
  border-color:var(--rh-blue)!important;box-shadow:0 0 0 4px rgba(20,149,255,.12)!important;
}
.searchmark{color:var(--rh-blue-text)!important}
.merchant{
  background:linear-gradient(145deg,rgba(13,28,44,.98),rgba(10,23,38,.98))!important;
  border-color:var(--rh-border)!important;box-shadow:0 8px 22px rgba(0,8,20,.18)!important;
}
.merchant-logo{
  background:rgba(20,149,255,.12)!important;color:var(--rh-blue-text)!important;
  border:1px solid rgba(20,149,255,.18)!important;
}
.tag{background:rgba(20,149,255,.11)!important;color:var(--rh-blue-text)!important}
.tag.good{background:var(--rh-success-soft)!important;color:#7AF0C3!important}
.panel{
  background:linear-gradient(145deg,#0B1B2D,#102D4A)!important;
  border:1px solid var(--rh-navy-border)!important;box-shadow:0 18px 44px rgba(0,8,20,.32)!important;
}
.panel p,.cta-box p{color:var(--rh-muted)!important}
.price.featured{
  border-color:var(--rh-blue)!important;
  box-shadow:0 16px 42px rgba(20,149,255,.12)!important;
}
.annual{color:var(--rh-success)!important}
.cta-box{
  background:
    radial-gradient(circle at 100% 0,rgba(57,196,255,.16),transparent 24rem),
    linear-gradient(145deg,#0B1B2D,#102D4A)!important;
  border:1px solid var(--rh-navy-border)!important;
  box-shadow:0 26px 65px rgba(0,8,20,.40)!important;
}
.signup-input{background:var(--rh-bg-raised)!important;color:var(--rh-text)!important;border:1px solid var(--rh-border)!important}
footer{border-color:var(--rh-border)!important;color:var(--rh-muted)!important}
.footer-links a{color:var(--rh-text-secondary)!important}

/* Existing dark product/demo pages: make the surfaces match the app exactly. */
.card,.item,.legend div,.panel,.sheet,.warning,.contact,details,.flow div,.toolbar,.search{
  border-color:var(--rh-border)!important;
}
.card,.item,.legend div,details,.flow div{
  background:rgba(13,28,44,.90)!important;
}
.toolbar,.search{background:rgba(7,17,31,.94)!important}
.status.live,.live{background:var(--rh-success)!important;color:var(--rh-bg)!important}
.status.wallet,.badge.wallet,.wallet{color:var(--rh-blue-text)!important}
.badge.route,.route{color:var(--rh-blue-text)!important}
.warning{background:var(--rh-warning-soft)!important;border-color:rgba(247,185,85,.28)!important;color:#FFD18A!important}
.contact{background:rgba(20,149,255,.08)!important;border-color:rgba(20,149,255,.28)!important}
.sheet{background:var(--rh-bg-raised)!important}

/* Install page used to be beige/green. */
body>main:only-child{
  color:var(--rh-text);
}
body>main:only-child img{
  border-radius:24px;
  box-shadow:0 18px 45px rgba(0,8,20,.42);
}
body>main:only-child p{color:var(--rh-muted)!important}
body>main:only-child .install{
  background:var(--rh-blue)!important;color:#fff!important;border-radius:17px!important;
  box-shadow:0 12px 30px rgba(20,149,255,.22)!important;
}
body>main:only-child .install:focus-visible{outline:3px solid var(--rh-blue-bright)!important}

/* Accessibility / polish */
:focus-visible{outline:3px solid rgba(57,196,255,.70)!important;outline-offset:3px!important}
@media (max-width:560px){
  header .brand .logo,header .brand .mark,.top .brand .logo,.top .brand .mark{
    width:38px!important;height:38px!important;border-radius:13px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

/* Current app-style homepage preview */
.brand-word>span,.phone-title>span{color:var(--rh-blue)}
.phone-brand{display:flex;align-items:center;gap:9px;min-width:0}
.phone-brand-mark{width:38px;height:38px;border-radius:13px;background:url('/favicon.svg') center/cover no-repeat;box-shadow:0 8px 20px rgba(0,8,20,.32);border:1px solid rgba(255,255,255,.10);flex:0 0 auto}
.phone-title{font-size:1rem!important;font-weight:800!important;letter-spacing:-.025em!important;color:var(--rh-text)!important}
.phone-tagline{margin-top:2px;color:var(--rh-muted);font-size:.56rem;font-weight:700;white-space:nowrap}
.app-balance-card{min-height:116px;margin:18px 0 10px;padding:17px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:25px;background:linear-gradient(145deg,#07111F,#0B1B2D);border:1px solid var(--rh-navy-border);box-shadow:0 16px 34px rgba(0,8,20,.34);position:relative;overflow:hidden}
.app-balance-card:after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;right:-62px;top:-94px;background:rgba(20,149,255,.16)}
.phone-muted{color:#B4C8DF;font-size:.64rem;font-weight:700;margin-top:1px}
.phone-scan{position:relative;z-index:1;width:61px;height:61px;border-radius:20px;background:var(--rh-blue);display:grid;place-items:center;color:#fff;font-size:1.4rem;font-weight:800;box-shadow:0 10px 24px rgba(20,149,255,.22)}
.phone-scan small{display:block;font-size:.52rem;line-height:.6;margin-top:-14px}
.app-lanes{display:grid;gap:7px}
.app-lane{min-height:53px;display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:16px;background:var(--rh-surface);border:1px solid var(--rh-border);box-shadow:0 7px 18px rgba(0,8,20,.16)}
.app-lane>b{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:rgba(20,149,255,.14);color:var(--rh-text);font-size:.76rem}
.app-lane:nth-child(2)>b,.app-lane:nth-child(3)>b{background:rgba(159,140,255,.14)}
.app-lane:nth-child(4)>b{background:rgba(73,185,255,.12)}
.app-lane>span{display:block;flex:1;min-width:0}
.app-lane strong{display:block;color:var(--rh-text);font-size:.72rem}
.app-lane small{display:block;color:var(--rh-muted);font-size:.55rem;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-lane em{font-style:normal;color:var(--rh-blue-text);font-weight:800;font-size:.82rem}
@media(max-width:560px){.phone-tagline{font-size:.52rem}.app-lane{min-height:49px}.app-balance-card{min-height:108px}}

.error-mark{width:70px;height:70px;border-radius:22px;display:block;margin:0 auto 24px;box-shadow:0 15px 35px rgba(20,149,255,.20);border:1px solid rgba(255,255,255,.10)}

/* User-friendly website walkthroughs */
.family-actions{margin-top:18px;display:flex;justify-content:flex-start}
.walkthrough-modal[hidden]{display:none!important}
.walkthrough-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:18px}
.walkthrough-backdrop{position:absolute;inset:0;background:rgba(0,4,10,.76);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.walkthrough-sheet{position:relative;width:min(880px,100%);max-height:92vh;overflow:auto;border-radius:28px;padding:24px;background:linear-gradient(180deg,#0B1B2D,#07111F);border:1px solid var(--rh-border-strong);box-shadow:0 30px 90px rgba(0,0,0,.52)}
.walkthrough-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}
.walkthrough-top h2{font-size:clamp(1.9rem,4vw,3rem);margin:6px 0 0}
.walkthrough-close{width:42px;height:42px;border-radius:14px;border:1px solid var(--rh-border);background:var(--rh-surface);color:#fff;font-size:1.5rem;cursor:pointer;flex:0 0 auto}
.walkthrough-layout{display:grid;grid-template-columns:1fr 330px;gap:24px;align-items:center}
.walkthrough-copy h3{font-size:clamp(1.5rem,3vw,2.15rem);margin:12px 0 8px}
.walkthrough-copy>p{color:var(--rh-muted);font-size:1rem;line-height:1.65;margin:0}
.walkthrough-progress{display:flex;gap:7px;margin-bottom:15px}
.walkthrough-progress span{height:6px;flex:1;border-radius:999px;background:#17324A}
.walkthrough-progress span.active{background:var(--rh-blue)}
.walkthrough-step-label{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--rh-blue-text);font-weight:900}
.walkthrough-actions{display:flex;gap:9px;margin-top:22px}
.walkthrough-actions .btn{min-width:105px}
.walkthrough-actions .btn:disabled{opacity:.35;cursor:default;transform:none}
.walkthrough-disclaimer{font-size:.74rem!important;line-height:1.45!important;margin-top:14px!important;color:var(--rh-muted-light)!important}
.walkthrough-phone{background:#050B14;border:1px solid var(--rh-border-strong);border-radius:34px;padding:13px;box-shadow:0 22px 48px rgba(0,0,0,.35)}
.walkthrough-phone-top{display:flex;align-items:center;gap:8px;padding:7px 8px 11px;color:#fff;font-size:.78rem}
.walkthrough-phone-top strong span{color:var(--rh-blue)}
.walkthrough-mini-mark{width:27px;height:27px;border-radius:9px;background:url('/favicon.svg') center/cover no-repeat;display:block}
.walkthrough-screen{min-height:390px;border-radius:24px;padding:18px;background:linear-gradient(180deg,#0D1C2C,#07111F);border:1px solid var(--rh-border);display:grid;align-content:center}
.demo-camera{text-align:center;position:relative;border:1px dashed #2C6088;border-radius:22px;padding:38px 15px 20px;overflow:hidden}
.demo-scan-line{position:absolute;left:14%;right:14%;top:48%;height:2px;background:var(--rh-blue);box-shadow:0 0 14px rgba(20,149,255,.9)}
.demo-card-face{width:82%;margin:auto;border-radius:18px;padding:22px 18px;text-align:left;background:linear-gradient(145deg,#162C43,#0B1B2D);border:1px solid #2B5A82}
.demo-card-face span,.demo-eyebrow{display:block;font-size:.62rem;letter-spacing:.14em;color:var(--rh-blue-text);font-weight:900}
.demo-card-face strong{display:block;font-size:1.45rem;margin:18px 0 3px}
.demo-card-face small,.demo-camera p,.demo-help{color:var(--rh-muted);font-size:.7rem}
.demo-detected,.demo-saved,.demo-gift{text-align:center}
.demo-status{display:inline-flex;border-radius:999px;padding:6px 9px;background:rgba(20,149,255,.12);color:var(--rh-blue-text);font-size:.62rem;font-weight:900;letter-spacing:.08em}
.demo-status.good{background:var(--rh-success-soft);color:#79F0C2}
.demo-merchant{width:68px;height:68px;margin:18px auto 10px;border-radius:21px;background:rgba(20,149,255,.14);display:grid;place-items:center;color:#fff;font-size:1.2rem;font-weight:950}
.demo-detected h4,.demo-saved h4,.demo-gift h4{font-size:1.25rem;margin:8px 0}
.demo-detected p,.demo-saved p,.demo-gift p{color:var(--rh-muted);font-size:.78rem;line-height:1.45}
.demo-confidence,.demo-route{margin-top:13px;border-radius:13px;padding:10px;background:rgba(255,255,255,.04);border:1px solid var(--rh-border);font-size:.7rem;color:var(--rh-text-secondary)}
.demo-saved strong{display:block;font-size:2.4rem;letter-spacing:-.05em;margin-top:15px}
.demo-form{display:grid;gap:8px}
.demo-form label{font-size:.58rem;color:var(--rh-muted);letter-spacing:.12em;font-weight:900;margin-top:4px}
.demo-form>div{border:1px solid var(--rh-border);background:var(--rh-surface);border-radius:13px;padding:12px;color:#fff;font-size:.78rem}
.demo-form>div span{float:right;color:var(--rh-success)}
.demo-form button,.demo-gift button,.demo-danger{border:0;border-radius:13px;padding:12px;font:inherit;font-weight:900;margin-top:6px;cursor:default}
.demo-form button,.demo-primary,.demo-gift>button{background:var(--rh-blue);color:#fff}
.demo-form small,.demo-gift small{display:block;color:var(--rh-muted);font-size:.66rem;text-align:center}
.demo-family{display:grid;gap:10px}
.demo-share-card,.demo-person{display:flex;align-items:center;gap:10px;border:1px solid var(--rh-border);background:var(--rh-surface);border-radius:16px;padding:11px}
.demo-share-card.selected,.demo-person.selected{border-color:var(--rh-blue);background:rgba(20,149,255,.08)}
.demo-share-card>b,.demo-person>b{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:rgba(20,149,255,.13);color:#fff}
.demo-share-card span,.demo-person span{flex:1;min-width:0}
.demo-share-card strong,.demo-person strong{display:block;font-size:.77rem}
.demo-share-card small,.demo-person small{display:block;color:var(--rh-muted);font-size:.64rem;margin-top:2px}
.demo-share-card em,.demo-person em{font-style:normal;color:var(--rh-blue-text);font-size:.7rem;font-weight:900}
.demo-danger{background:var(--rh-danger-soft);color:#FF9BA5;border:1px solid rgba(255,101,116,.22)}
.demo-gift-icon{font-size:2.2rem;margin-bottom:8px}
.demo-gift button{display:block;width:100%}
.demo-secondary{background:var(--rh-surface)!important;color:var(--rh-text)!important;border:1px solid var(--rh-border)!important}
.modal-open{overflow:hidden}

/* Mobile cleanup: straight, centered and clear under sticky header */
.phone{transform:none!important}
.phone:hover{transform:translateY(-2px)!important}
section[id]{scroll-margin-top:90px}
@media(max-width:980px){
  .hero{padding-top:54px!important}
  .hero-grid{gap:28px!important}
  .hero-copy{max-width:760px;margin:0 auto}
  .phone-stage{width:100%;justify-self:center}
}
@media(max-width:820px){
  .walkthrough-layout{grid-template-columns:1fr}
  .walkthrough-phone{width:min(340px,100%);margin:0 auto}
  .walkthrough-copy{order:2}
  .walkthrough-phone{order:1}
}
@media(max-width:560px){
  .hero{padding-top:34px!important}
  .hero h1{font-size:clamp(2.6rem,12.5vw,3.7rem)!important;line-height:.97!important;letter-spacing:-.06em!important;margin-top:18px!important}
  .hero .lead{font-size:1rem!important;line-height:1.55!important}
  .hero-actions{display:grid!important;grid-template-columns:1fr!important}
  .hero-actions .btn{width:100%!important}
  .phone-stage{min-height:0!important;margin-top:14px}
  .phone{width:min(340px,96%)!important}
  .walkthrough-modal{padding:10px}
  .walkthrough-sheet{padding:17px;border-radius:22px;max-height:95vh}
  .walkthrough-top{margin-bottom:10px}
  .walkthrough-top h2{font-size:1.75rem}
  .walkthrough-phone{width:min(300px,100%);border-radius:29px}
  .walkthrough-screen{min-height:330px;padding:15px}
  .family-actions .btn{width:100%}
}

/* Safe-area and tutorial button polish */
html{scroll-padding-top:calc(84px + env(safe-area-inset-top))}
.top,header{padding-top:env(safe-area-inset-top)}
.family-actions{gap:10px;flex-wrap:wrap}
@media(max-width:560px){
  .family-actions{display:grid;grid-template-columns:1fr}
  .family-actions .btn{width:100%}
}

.consent-copy{flex-basis:100%;margin:2px 0 0;color:var(--rh-muted);font-size:.7rem;line-height:1.45}.consent-copy a{color:var(--rh-blue-text);text-decoration:underline;text-underline-offset:2px}

/* iPhone safe-area polish */
html{scroll-padding-top:calc(86px + env(safe-area-inset-top))}
.top,header.top{padding-top:env(safe-area-inset-top)}
.top nav,header.top nav{min-height:72px}
section[id]{scroll-margin-top:calc(88px + env(safe-area-inset-top))!important}
.walkthrough-sheet{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
@media(max-width:560px){
  .hero{padding-top:42px!important}
  .walkthrough-modal{padding-top:calc(10px + env(safe-area-inset-top));padding-bottom:calc(10px + env(safe-area-inset-bottom))}
}