/* Perk Infinity landing — shared polish layer. Loaded last on every page.
   Adds atmosphere, depth and rhythm without touching page structure. */
body{--pa:#2f7a5c}
.household-page{--pa:#b58a45}.newcomer-page{--pa:#8a74a8}.business-page{--pa:#3f7f94}
.spreadsheet-page{--pa:#5f8a58}.lifestyle-page{--pa:#c0864a}.annual-fee-page{--pa:#4d8a5c}
.family-page{--pa:#6b8f66}.minimalist-page{--pa:#7a9a5e}.traveler-page{--pa:#5a6fb0}
.after-bonus-page{--pa:#a0709a}.pagehub{--pa:#4f8a5c}

/* 1. Atmosphere behind the first screen */
body{position:relative;isolation:isolate}
body::before{content:"";position:absolute;inset:0 0 auto 0;height:1180px;z-index:-1;pointer-events:none;
  background:
   radial-gradient(52% 48% at 80% 30%,color-mix(in srgb,var(--pa) 24%,transparent),transparent 72%),
   radial-gradient(40% 40% at 6% 6%,color-mix(in srgb,var(--pa) 13%,transparent),transparent 70%),
   radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--pa) 14%,transparent) 1px,transparent 1.6px) 0 0/26px 26px;
  -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}

/* 2. Headlines: tighter, larger, more confident */
:is(h1){font-size:clamp(46px,5.4vw,78px);line-height:1.02;letter-spacing:-.052em;text-wrap:balance}
:is(main h2){text-wrap:balance;letter-spacing:-.045em}
@media(min-width:900px){main section h2{font-size:clamp(38px,3.7vw,54px);line-height:1.06}}
[class*="hero"] :is(p){max-width:34em}

/* 3. Buttons with presence */
.button-primary,.af-primary{box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 10px 24px -8px color-mix(in srgb,var(--green) 70%,transparent),0 2px 4px rgba(0,0,0,.12);transition:transform .18s,box-shadow .18s}
.button-primary:hover,.af-primary:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 16px 30px -10px color-mix(in srgb,var(--green) 80%,transparent),0 2px 4px rgba(0,0,0,.12)}
.button{min-height:54px}

/* 4. Hero product window: real depth */
:is([class*="hero"]) :is([class$="-app"],[class$="workbench"],[class$="paper"],[class$="dashboard"],[class$="review-book"],.hero-visual>div){
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 40px 80px -28px rgba(18,44,34,.45),0 14px 30px -14px rgba(18,44,34,.3),0 0 0 1px rgba(18,44,34,.07);
  border-radius:20px}

/* 5. Trust strip becomes a floating card */
:is([class*="trust"]):not(.trust-item):not(.trust-items){position:relative;z-index:2}
:is(section[class*="trust"]){margin-top:-12px}

/* 6. Feature rows: richer panels, bigger mockups, depth */
:is([class*="feature-art"],.feature-art){position:relative;border-radius:28px;min-height:360px;display:grid;place-items:center;
  box-shadow:0 0 0 1px rgba(18,44,34,.06) inset,0 30px 60px -36px rgba(18,44,34,.35);overflow:hidden}
:is([class*="feature-art"],.feature-art)::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 75% 10%,rgba(255,255,255,.55),transparent 70%),radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--pa) 18%,transparent) 1px,transparent 1.6px) 0 0/22px 22px;opacity:.7}
:is([class*="feature-art"],.feature-art)>*{position:relative}
:is([class*="mini-window"],.art-window,[class*="mini-card"]){transform:scale(1.07);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 34px 56px -22px rgba(18,44,34,.4),0 10px 20px -10px rgba(18,44,34,.25),0 0 0 1px rgba(18,44,34,.07)}
@media(max-width:700px){:is([class*="mini-window"],.art-window){transform:none}}

/* 7. Step labels read as markers, not fine print */
:is([class*="feature-number"],.step-number){display:inline-flex;align-items:center;gap:10px;font-weight:700;color:color-mix(in srgb,var(--pa) 70%,#14281f)!important}
:is([class*="feature-number"],.step-number)::before{content:"";width:28px;height:2px;border-radius:2px;background:var(--pa)}

/* 8. Checklists: real check marks */
:is(.check-list,[class*="checks"]) li{font-size:17px;padding-block:3px}

/* 9. Section label gets a chip */
.section-label{display:inline-block;padding:7px 14px;border-radius:99px;background:color-mix(in srgb,var(--pa) 14%,#fff);color:color-mix(in srgb,var(--pa) 62%,#10241b)!important;font-weight:700}

/* 10. Final call to action */
:is([class*="final"]){position:relative;isolation:isolate;overflow:hidden}
:is([class*="final"])::before{content:"";position:absolute;inset:-20% -10% auto auto;width:70%;height:140%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--pa) 38%,transparent),transparent 72%)}
:is([class*="final"]) h2{font-size:clamp(40px,5vw,68px)!important;line-height:1.03}

/* 11. FAQ and pricing cards */
.faq details{border-radius:14px;transition:background .2s}
.faq details[open]{background:color-mix(in srgb,var(--pa) 7%,#fff)}
:is([class*="pricing"]) :is([class*="card"],[class*="plan"],[class*="price-box"]){box-shadow:0 30px 60px -34px rgba(18,44,34,.4),0 0 0 1px rgba(18,44,34,.06)}

@media(prefers-reduced-motion:reduce){.button-primary:hover,.af-primary:hover{transform:none}}

/* 12. Fix overlaps in hero/feature mockups */
.tr-visual{padding-bottom:86px}.tr-pocket-note{bottom:10px}
:is([class*="feature-art"],.feature-art):has(.floating-note){padding-bottom:78px}
:is([class*="feature-art"],.feature-art) .floating-note{bottom:18px}
.fm-demo-stage{column-gap:16px}.fm-manager{width:100%}

/* 13. Make the household handoff demo read as interactive */
@keyframes hh-ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--pa) 55%,transparent)}100%{box-shadow:0 0 0 16px transparent}}
.hh-phone [data-review-use]{animation:hh-ring 2.2s ease-out 3}
.hh-phone.hh-nudge{outline:3px solid color-mix(in srgb,var(--pa) 60%,transparent);outline-offset:6px;border-radius:30px}
@media(prefers-reduced-motion:reduce){.hh-phone [data-review-use]{animation:none}}