/* ==========================================================
   cashforpc.com — bespoke landing design (navy / lime).
   Faithful transcription of the approved mockup (C:\git\cashforpc):
   DM Sans body + Space Grotesk headings (self-hosted, CSP-safe),
   dark navy hero with lime accents, ticker, app mock, accordion.
   All selectors are cfp-prefixed / scoped under .cfp so nothing
   leaks into the platform bundle or other sites.
   ========================================================== */

/* ---- Self-hosted fonts (variable; Google Fonts blocked by CSP) ---- */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/cashforpc/dm-sans-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/assets/fonts/cashforpc/space-grotesk-latin.woff2') format('woff2');
}

/* ---- Design tokens (scoped) ---- */
.cfp {
  --navy: #06111f;
  --navy2: #0a1929;
  --lime: #b8f34a;
  --cyan: #62ddff;
  --cfp-spot-rgb: 74, 124, 192;   /* lighter navy-blue spotlight accent */
  --ink: #0b1420;
  --muted: #677386;
  --cream: #f4f6f0;
  --white: #fff;

  font-family: 'DM Sans', sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.5;
}
.cfp * { box-sizing: border-box; }
.cfp a { text-decoration: none; color: inherit; }
.cfp h1, .cfp h2, .cfp h3 { font-family: 'Space Grotesk', sans-serif; margin: 0; letter-spacing: -.045em; }
.cfp em { font-style: normal; color: var(--lime); }
.cfp img { max-width: none; }

.cfpWrap { width: min(1180px, calc(100% - 48px)); margin: auto; }

/* ---- Logo ---- */
.cfpLogo { display: flex; align-items: center; gap: 10px; font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -1px; }
.cfpLogo b { color: var(--lime); }
.cfpMark { width: 34px; height: 34px; color: var(--lime); display: block; }
.cfpMark svg { width: 100%; }
.cfpMark img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 50%; }

/* ---- Header / nav ---- */
.cfpHeader { position: absolute; top: 0; left: 0; width: 100%; z-index: 20; color: #fff; border-bottom: 1px solid #ffffff16; }
.cfpNav { width: min(1280px, calc(100% - 48px)); height: 82px; margin: auto; display: flex; align-items: center; justify-content: space-between; }
.cfpNav nav { display: flex; align-items: center; gap: 36px; font-size: 14px; font-weight: 600; }
.cfpNav nav > a:not(.cfpNavCta) { color: #b9c4cf; }
.cfpNav nav > a:hover { color: white; }
.cfpNavCta, .cfpPrimary { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 8px; background: var(--lime); color: #09131f !important; font-weight: 700; box-shadow: 0 9px 35px #b8f34a22; }
.cfpNavCta { padding: 13px 18px; }
.cfpMenu { display: none; background: none; border: 0; color: #fff; cursor: pointer; }
.cfp svg { flex-shrink: 0; }

/* ---- Hero ---- */
.cfpHero { min-height: 850px; color: white; background: var(--navy); position: relative; overflow: hidden; padding-top: 82px; }
.cfpHeroGrid { position: absolute; inset: 0; background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to right, transparent, black); -webkit-mask-image: linear-gradient(to right, transparent, black); }
.cfpHeroGlow { position: absolute; width: 900px; height: 700px; right: -200px; top: 40px; background: #164779; border-radius: 50%; filter: blur(150px); opacity: .3; }
.cfpHeroInner { height: 700px; display: grid; grid-template-columns: 47% 53%; align-items: center; position: relative; z-index: 2; }
.cfpHeroCopy { padding-top: 30px; }
.cfpEyebrow, .cfpKicker { font-size: 12px; font-weight: 700; letter-spacing: 2.2px; }
.cfpEyebrow { display: flex; align-items: center; gap: 10px; color: #dce7f1; }
.cfpEyebrow span:first-child { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 16px var(--lime); }
.cfp h1 { font-size: clamp(52px, 5.4vw, 78px); line-height: .99; margin: 25px 0 26px; }
.cfpLead { max-width: 590px; font-size: 18px; line-height: 1.65; color: #aebdca; margin: 0; }
.cfpHeroActions { display: flex; align-items: center; gap: 28px; margin-top: 34px; }
.cfpPrimary { padding: 17px 23px; }
.cfpTextLink { font-weight: 700; display: flex; align-items: center; gap: 8px; color: #fff; }
.cfpMicro { display: flex; gap: 25px; margin-top: 35px; color: #8497a8; font-size: 12px; }
.cfpMicro span { display: flex; gap: 12px; align-items: center; }
.cfpMicro svg { width: 16px; height: 16px; color: var(--lime); }
.cfpHeroArt { height: 100%; position: relative; }
.cfpHeroArt > img { position: absolute; height: 100%; width: 125%; max-width: none; object-fit: cover; object-position: center; left: -8%; top: 0; mix-blend-mode: screen; }
.cfpOfferCard, .cfpRating { position: absolute; background: #0c1c2de8; border: 1px solid #ffffff22; backdrop-filter: blur(14px); border-radius: 12px; box-shadow: 0 24px 60px #0008; }
.cfpOfferCard { right: 0; top: 175px; padding: 20px 24px; width: 190px; }
.cfpOfferCard span { font-size: 9px; letter-spacing: 1.5px; color: #9eacb8; font-weight: 700; }
/* LIVE DATA badge (mirrors the getpcparts LIVE DEAL badge) */
.cfpOfferCard .cfpOfferTop { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.cfpOfferCard .cfpLive { font-size: 9px; letter-spacing: 1.5px; color: #a6b4c0; font-weight: 700; white-space: nowrap; }
.cfpOfferCard .cfpLive i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); margin-right: 7px; }
/* Filled lime stars row at the top of the offer card */
.cfpOfferCard .cfpOfferStars { display: flex; gap: 3px; }
.cfpOfferCard .cfpOfferStars svg { fill: var(--lime); }
/* .cfpOfferCard-scoped (0-2-0): the generic `.cfpOfferCard div { display:flex }`
   (0-1-1) would otherwise lay the name and amount out side by side. */
.cfpOfferCard .cfpOfferBody { display: block; transition: opacity .3s ease, transform .3s ease; }
.cfpOfferCard .cfpOfferBody span { display: block; white-space: nowrap; font-size: 13px; letter-spacing: .4px; }
.cfpOfferCard #cfpOfferName b { color: var(--lime); font-weight: 700; }
.cfpOfferCard .cfpOfferBody.cfpFade { opacity: 0; transform: translateY(6px); }
.cfpOfferCard strong { display: block; font: 700 32px 'Space Grotesk', sans-serif; margin: 5px 0; color: white; }
.cfpOfferCard strong small { font-size: 16px; }
.cfpOfferCard div { display: flex; gap: 5px; align-items: center; font-size: 10px; color: #b4c4ce; }
.cfpOfferCard svg { width: 14px; height: 14px; color: var(--lime); }
.cfpRating { left: 5px; bottom: 115px; padding: 13px; display: flex; gap: 12px; align-items: center; }
.cfpAvatars { display: flex; }
.cfpAvatars i { width: 31px; height: 31px; border-radius: 50%; background: #24384b; border: 2px solid var(--navy); font: 600 11px 'DM Sans', sans-serif; font-style: normal; display: grid; place-items: center; margin-left: -7px; }
.cfpRating > div:last-child { display: flex; flex-direction: column; }
.cfpRating span { height: 14px; }
.cfpRating span svg { width: 12px; height: 12px; fill: var(--lime); color: var(--lime); }
.cfpRating b { font-size: 10px; margin-top: 2px; }
.cfpTicker { height: 68px; border-top: 1px solid #ffffff12; display: flex; align-items: center; white-space: nowrap; overflow: hidden; color: #687c8d; font: 600 12px 'Space Grotesk', sans-serif; letter-spacing: 2px; }
.cfpTicker div { word-spacing: 25px; width: max-content; animation: cfpTicker 10s linear infinite; }
.cfpTicker b { color: var(--lime); }
@keyframes cfpTicker { to { transform: translateX(-25%); } }

/* ---- How it works ---- */
.cfpHow { padding: 125px 0; background: var(--cream); }
.cfpSectionHead { display: flex; justify-content: space-between; align-items: end; }
.cfpKicker { color: #6d7a6b; }
.cfpSectionHead h2, .cfpDownload h2, .cfpWhy h2, .cfpFaq h2, .cfpFinalCta h2 { font-size: clamp(40px, 4.3vw, 62px); line-height: 1.03; margin-top: 18px; }
.cfpSectionHead h2 em, .cfpWhy h2 em, .cfpFaq h2 em { color: #4d8b19; }
.cfpSectionHead > p { width: 390px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.cfpSteps { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 72px; border-top: 1px solid #d6dbd1; }
.cfpStep { padding: 42px 55px 0 0; position: relative; }
.cfpStep + .cfpStep { padding-left: 55px; border-left: 1px solid #d6dbd1; }
.cfpStepNo { position: absolute; right: 18px; top: 26px; color: #c5ccc1; font: 700 12px 'Space Grotesk', sans-serif; }
.cfpStepIcon { width: 57px; height: 57px; background: var(--lime); border-radius: 10px; display: grid; place-items: center; }
.cfpStepIcon svg { width: 25px; height: 25px; }
.cfpStep h3 { font-size: 23px; margin: 27px 0 13px; }
.cfpStep p { line-height: 1.7; color: var(--muted); margin: 0; }
.cfpStepArrow { position: absolute; right: -17px; top: 62px; z-index: 2; color: #768276; background: var(--cream); padding: 5px; width: 34px; height: 34px; }

/* ---- Download / app section ---- */
.cfpDownload { padding: 80px 0; background: #e8ecdf; }
.cfpDownloadCard { background: var(--navy); border-radius: 24px; min-height: 590px; color: white; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; position: relative; }
.cfpDownloadCard:before { content: ''; position: absolute; width: 500px; height: 500px; background: #6dba2744; border-radius: 50%; filter: blur(110px); right: -120px; bottom: -220px; }
.cfpDownloadCopy { padding: 78px 30px 65px 76px; position: relative; z-index: 2; }
.cfpDownload .cfpKicker { color: var(--lime); }
.cfpDownload h2 { margin-bottom: 23px; }
.cfpDownloadCopy > p { color: #9bacb9; line-height: 1.7; max-width: 490px; }
.cfpDownloadBtns { display: flex; gap: 12px; margin: 35px 0 22px; }
.cfpDownloadBtns button, .cfpDownloadBtns a { border: 0; background: var(--lime); border-radius: 8px; padding: 13px 20px; display: flex; align-items: center; gap: 12px; font: 600 16px 'DM Sans', sans-serif; cursor: pointer; color: var(--ink); text-decoration: none; }
.cfpDownloadBtns svg { width: 25px; height: 25px; }
.cfpDownloadBtns span { display: flex; flex-direction: column; align-items: start; }
.cfpDownloadBtns small { font-size: 8px; letter-spacing: 1px; }
.cfpDownloadBtns .cfpMuted { background: #ffffff0d; color: #7f8b95; border: 1px solid #ffffff13; }
.cfpFine { display: flex; align-items: center; gap: 8px !important; font-size: 11px; }
.cfpFine svg { width: 15px; height: 15px; color: var(--lime); }
.cfpAppMock { align-self: end; width: 460px; height: 505px; background: #f8faf7; border-radius: 16px 16px 0 0; position: relative; z-index: 2; color: var(--ink); box-shadow: 0 15px 60px #0008; }
.cfpAppTop { height: 56px; display: flex; align-items: center; padding: 0 18px; border-bottom: 1px solid #e5e9e2; }
.cfpAppTop .cfpLogo { font-size: 11px; margin-right: auto; }
.cfpAppTop .cfpMark { width: 20px; height: 20px; color: #69a729; }
.cfpAppTop .cfpLogo b { color: #69a729; }
.cfpAppTop > span { width: 7px; height: 7px; background: #cbd2ca; border-radius: 50%; margin-left: 5px; }
.cfpScan { text-align: center; padding-top: 27px; }
.cfpScanRing { width: 82px; height: 82px; border: 1px solid #b8f34a; border-radius: 50%; display: grid; place-items: center; margin: auto; position: relative; background: #effbdc; }
.cfpScanRing svg { color: #4d8b19; }
.cfpScanRing i { position: absolute; width: 64px; height: 1px; background: #71ae39; box-shadow: 0 0 8px #71ae39; animation: cfpScan 2s infinite; }
@keyframes cfpScan { 0%, 100% { transform: translateY(-20px); } 50% { transform: translateY(20px); } }
.cfpScan h4 { font: 700 18px 'Space Grotesk', sans-serif; margin: 14px 0 3px; }
.cfpScan p { font-size: 11px; color: #7d887e; margin: 0; }
.cfpSpecs { margin: 20px 30px; }
.cfpSpecs div { display: grid; grid-template-columns: 75px 1fr 20px; align-items: center; border-top: 1px solid #e6eae3; padding: 12px 0; }
.cfpSpecs span { font-size: 8px; letter-spacing: 1px; color: #889188; }
.cfpSpecs b { font-size: 12px; }
.cfpSpecs svg { width: 15px; height: 15px; color: #66a630; }
.cfpAppBottom { margin: 0 30px; border-radius: 8px; background: #0d1c2b; color: white; padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; }
.cfpAppBottom span { font-size: 10px; color: #9ba7b0; }
.cfpAppBottom button { border: 0; background: var(--lime); font-weight: 700; border-radius: 5px; padding: 9px 12px; font-size: 10px; cursor: pointer; }
.cfpAppBottom button svg { width: 12px; height: 12px; vertical-align: middle; }

/* ---- Why us ---- */
.cfpWhy { padding: 125px 0; background: #fff; }
.cfpWhyIntro { text-align: center; max-width: 700px; margin: auto; }
.cfpWhyIntro h2 { margin: 16px 0; }
.cfpWhyIntro p { color: var(--muted); font-size: 17px; line-height: 1.6; }
.cfpBenefits { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 65px; border: 1px solid #e1e5dd; border-radius: 15px; overflow: hidden; }
.cfpBenefits article { padding: 36px 29px; min-height: 270px; }
.cfpBenefits article + article { border-left: 1px solid #e1e5dd; }
/* Icon + type sized to match the getpcparts #why section (52px icons, 22px h3, 15px p). */
.cfpBenefits article > div { color: #548e21; }
.cfpBenefits article > div svg { width: 52px; height: 52px; }
.cfpBenefits h3 { font-size: 22px; margin: 24px 0 12px; }
.cfpBenefits p { font-size: 15px; line-height: 1.7; color: var(--muted); }

/* ---- Real payouts carousel (mirrors the getpcparts reviews section; the cards
       are styled like the hero offer card since we show payouts, not reviews) ---- */
.cfpOffers { position: relative; padding: 120px 0; background: var(--navy); color: #fff; overflow: hidden; }
.cfpOffersGridBg { position: absolute; inset: 0; background-image: linear-gradient(#ffffff07 1px, transparent 1px), linear-gradient(90deg, #ffffff07 1px, transparent 1px); background-size: 66px 66px; -webkit-mask-image: linear-gradient(90deg, #000, transparent 82%); mask-image: linear-gradient(90deg, #000, transparent 82%); }
.cfpOffersGlow { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; }
.cfpOffersGlow.one { width: 520px; height: 420px; background: rgba(var(--cfp-spot-rgb), .3); right: -180px; top: 40px; }
.cfpOffersGlow.two { width: 480px; height: 350px; background: #b8f34a18; left: -200px; bottom: -120px; }
.cfpOffersWrap { position: relative; z-index: 1; }
.cfpOffersHead { display: flex; justify-content: space-between; align-items: end; gap: 50px; }
.cfpOffersKicker { font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--lime); }
.cfpOffersHead h2 { font-family: 'Space Grotesk', sans-serif; letter-spacing: -.045em; font-size: clamp(43px, 4.8vw, 68px); line-height: 1.01; margin: 15px 0 0; }
.cfpOffersHead h2 em { color: var(--lime); }
.cfpOffersSummary { display: flex; align-items: center; gap: 17px; padding: 17px 20px; border: 1px solid #ffffff18; background: #ffffff08; border-radius: 12px; backdrop-filter: blur(12px); min-width: 300px; }
.cfpOffersSummary > strong { font: 700 52px/1 'Space Grotesk'; color: var(--lime); letter-spacing: -3px; }
.cfpOffersSummary > strong small { font-size: 26px; }
.cfpOffersSummary > div { display: flex; flex-direction: column; }
.cfpOffersSummary b { font: 600 13px 'Space Grotesk'; margin-top: 4px; }
.cfpOffersSummary small { font-size: 11px; color: #8296a4; margin-top: 4px; }
.cfpOffersToolbar { display: flex; align-items: end; justify-content: space-between; margin-top: 51px; padding-bottom: 17px; border-bottom: 1px solid #ffffff12; }
.cfpOffersToolbar > div:first-child { display: flex; flex-direction: column; }
.cfpOffersToolbar > div:first-child span { display: flex; align-items: center; gap: 8px; font: 800 10px 'Space Grotesk'; letter-spacing: 1.2px; color: var(--lime); }
.cfpOffersToolbar > div:first-child span i { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime); }
.cfpOffersToolbar > div:first-child small { font-size: 11px; color: #708692; margin-top: 6px; }
.cfpOffersToolbar > div:last-child { display: flex; gap: 8px; }
.cfpOffersToolbar button { width: 45px; height: 45px; border: 1px solid #ffffff1c; background: #ffffff08; color: #fff; border-radius: 9px; display: grid; place-items: center; cursor: pointer; transition: .2s; }
.cfpOffersToolbar button:hover { background: var(--lime); border-color: var(--lime); color: var(--navy); transform: translateY(-2px); }
.cfpOffersToolbar button svg { width: 17px; }
.cfpOffersRail { display: flex; gap: 17px; margin-top: 22px; padding: 0 1px 26px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; }
.cfpOffersRail:active { cursor: grabbing; }
.cfpOffersRail::-webkit-scrollbar { display: none; }
.cfpOfferSlide { position: relative; flex: 0 0 calc((100% - 34px) / 3); min-width: 0; min-height: 300px; padding: 26px 27px 24px; border: 1px solid #ffffff18; border-radius: 14px; background: linear-gradient(150deg, #112a3a, #091927 68%); overflow: hidden; scroll-snap-align: start; box-shadow: 0 20px 48px #0004; display: flex; flex-direction: column; transition: transform .3s, border-color .3s, box-shadow .3s; }
.cfpOfferSlide:nth-child(even) { background: linear-gradient(150deg, #102532, #071622 68%); }
.cfpOfferSlide:hover { transform: translateY(-7px); border-color: #b8f34a4d; box-shadow: 0 28px 65px #0007; }
.cfpOfferSlide:before { content: ''; position: absolute; left: 0; top: 24px; width: 3px; height: 52px; background: linear-gradient(var(--lime), rgb(var(--cfp-spot-rgb))); box-shadow: 0 0 18px #b8f34a70; }
.cfpOfferSlideGlow { position: absolute; width: 180px; height: 150px; border-radius: 50%; right: -80px; top: -70px; background: rgba(var(--cfp-spot-rgb), .18); filter: blur(48px); }
.cfpOfferSlide header { position: relative; display: flex; align-items: center; gap: 10px; }
.cfpOfferSlideNo { font: 700 14px 'Space Grotesk'; color: #617a88; }
.cfpOfferSlide .cfpLive { font-size: 9px; letter-spacing: 1.5px; color: #a6b4c0; font-weight: 700; white-space: nowrap; }
.cfpOfferSlide .cfpLive i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); margin-right: 7px; }
.cfpOfferSlideStars { margin-left: auto; display: inline-flex; gap: 3px; }
.cfpOfferSlideStars svg { width: 14px; height: 14px; fill: var(--lime); color: var(--lime); }
.cfpOfferSlideBody { margin-top: 34px; margin-bottom: 6px; }
.cfpOfferSlideBody > span { display: block; white-space: nowrap; font-size: 14px; letter-spacing: .3px; color: #c4d2dc; }
.cfpOfferSlideBody > span b { color: var(--lime); font-weight: 700; }
.cfpOfferSlideBody strong { display: block; font: 700 46px 'Space Grotesk', sans-serif; margin: 6px 0; color: #fff; letter-spacing: -1px; }
.cfpOfferSlide footer { margin-top: auto; padding: 18px 0 0; border-top: 1px solid #ffffff11; display: grid; grid-template-columns: 39px 1fr; gap: 11px; align-items: center; }
.cfpOfferSlide footer > span { width: 39px; height: 39px; border-radius: 50%; background: #1b3442; border: 1px solid #ffffff16; color: var(--lime); display: grid; place-items: center; }
.cfpOfferSlide footer > span svg { width: 22px; height: 22px; }
.cfpOfferSlide footer > div { display: flex; flex-direction: column; min-width: 0; }
.cfpOfferSlide footer b { display: flex; align-items: center; gap: 5px; font: 600 14px 'Space Grotesk'; color: #fff; }
.cfpOfferSlide footer b svg { width: 14px; color: var(--lime); flex: 0 0 auto; }
.cfpOfferSlide footer small { font-size: 12px; color: #6e8491; margin-top: 3px; }
@media (max-width: 1000px) { .cfpOfferSlide { flex-basis: calc((100% - 17px) / 2); } }
@media (max-width: 900px) {
  .cfpOffersHead { align-items: flex-start; }
  .cfpOffersSummary { min-width: 260px; }
}
@media (max-width: 620px) {
  .cfpOffers { padding: 82px 0; }
  .cfpOffersHead { display: block; }
  .cfpOffersSummary { margin-top: 28px; width: 100%; min-width: 0; }
  .cfpOffersGridBg { background-size: 42px 42px; }
  .cfpOffersToolbar { margin-top: 33px; }
  .cfpOffersToolbar button { width: 41px; height: 41px; }
  .cfpOffersRail { gap: 12px; margin-top: 16px; }
  .cfpOfferSlide { flex-basis: 89%; min-height: 290px; padding: 24px 22px; }
}

/* ---- FAQ ---- */
.cfpFaq { padding: 130px 0; }
.cfpFaq > .cfpWrap { display: grid; grid-template-columns: 38% 62%; gap: 80px; }
.cfpFaqTitle h2 { margin: 16px 0 23px; }
.cfpFaqTitle p { color: var(--muted); margin-bottom: 8px; }
.cfpFaqTitle a { font-weight: 700; color: #4d8b19; font-size: 14px; }
.cfpFaqTitle a svg { width: 16px; height: 16px; vertical-align: middle; }
.cfpFaqItem { border-top: 1px solid #d7ddd3; }
.cfpFaqItem:last-child { border-bottom: 1px solid #d7ddd3; }
.cfpFaqItem button { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 25px 0; background: none; border: 0; text-align: left; font: 600 17px 'Space Grotesk', sans-serif; cursor: pointer; color: var(--ink); }
.cfpFaqItem button svg { width: 20px; height: 20px; transition: .3s; }
.cfpFaqItem > div { display: grid; grid-template-rows: 0fr; transition: .3s; }
.cfpFaqItem > div p { overflow: hidden; margin: 0; color: var(--muted); line-height: 1.6; }
.cfpFaqItem.active > div { grid-template-rows: 1fr; }
.cfpFaqItem.active > div p { padding: 0 50px 25px 0; }
.cfpFaqItem.active button svg { transform: rotate(180deg); }

/* ---- Final CTA ---- */
.cfpFinalCta { padding: 110px 0; text-align: center; background: linear-gradient(135deg, #0b1b2b, #07111f); color: white; position: relative; overflow: hidden; }
/* Small, low navy-blue spotlight glow; text/button accents stay lime green. */
.cfpFinalCta:after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 122%, rgba(var(--cfp-spot-rgb), .42), transparent 37%); }
.cfpFinalCta .cfpWrap { position: relative; z-index: 2; }
.cfpFinalCta .cfpKicker { color: var(--lime); }
.cfpFinalCta h2 { margin: 18px 0; }
.cfpFinalCta p { color: #9babb7; margin-bottom: 30px; }
.cfpFinalCta .cfpPrimary { margin: auto; }
.cfpFinalCta small { display: block; color: #718493; margin-top: 20px; }

/* ---- Footer (matches the getpcparts .gpShop footer exactly; cashforpc links) ---- */
.cfpFooter { background: #030a12; color: #8da0af; padding: 80px 0 32px; }
.cfpFooterTop { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 55px; }
.cfpFooterTop > div { display: flex; flex-direction: column; gap: 14px; }
.cfpFooterTop .cfpLogo { color: #fff; margin-bottom: 10px; gap: 12px; font-size: 34px; }
.cfpFooterTop .cfpMark { width: 32px; height: 32px; }
.cfpFooterTop p { max-width: 300px; line-height: 1.6; font-size: 16px; }
.cfpFooterTop > div > b { color: #fff; font-size: 13px; letter-spacing: 1.5px; margin-bottom: 10px; }
.cfpFooterTop a { font-size: 16px; }
.cfpFooterTop a:hover { color: var(--lime); }
.cfpFooterBottom { border-top: 1px solid #ffffff12; margin-top: 60px; padding-top: 26px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: #536978; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .cfpNav nav { display: none; position: absolute; top: 82px; left: 0; width: 100%; padding: 25px; background: var(--navy); flex-direction: column; }
  .cfpNav nav.open { display: flex; }
  .cfpMenu { display: block; }
  .cfpHero { min-height: auto; }
  .cfpHeroInner { height: auto; min-height: 900px; grid-template-columns: 1fr; padding-top: 100px; }
  .cfpHeroCopy { z-index: 3; }
  .cfpHeroArt { height: 430px; }
  .cfpHeroArt > img { width: 110%; left: 0; }
  .cfpOfferCard { top: 50px; }
  .cfpRating { bottom: 50px; }
  .cfpSectionHead { align-items: start; gap: 30px; }
  .cfpSteps { grid-template-columns: 1fr; }
  .cfpStep, .cfpStep + .cfpStep { border-left: 0; border-bottom: 1px solid #d6dbd1; padding: 35px 0; }
  .cfpStepArrow { display: none; }
  .cfpDownloadCard { grid-template-columns: 1fr; }
  .cfpAppMock { justify-self: center; }
  .cfpBenefits { grid-template-columns: 1fr 1fr; }
  .cfpBenefits article:nth-child(3) { border-left: 0; border-top: 1px solid #e1e5dd; }
  .cfpBenefits article:nth-child(4) { border-top: 1px solid #e1e5dd; }
  .cfpFaq > .cfpWrap { grid-template-columns: 1fr; gap: 50px; }
  .cfpFooterTop { grid-template-columns: 2fr 1fr 1fr; }
  .cfpFooterTop > div:last-child { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .cfpWrap, .cfpNav { width: min(100% - 32px, 1180px); }
  .cfpHeroInner { padding-top: 80px; }
  .cfpHeroCopy { text-align: left; }
  .cfpHeroActions { align-items: stretch; flex-direction: column; }
  .cfpTextLink { justify-content: center; }
  .cfpMicro { flex-direction: column; gap: 10px; }
  .cfpHeroArt { height: 380px; margin: 0 -16px; }
  .cfpHeroArt > img { width: 145%; left: -30%; }
  .cfpOfferCard { right: 5px; transform: scale(.85); }
  .cfpRating { display: none; }
  .cfpSectionHead { display: block; }
  .cfpSectionHead > p { width: auto; margin-top: 25px; }
  .cfpHow, .cfpWhy, .cfpFaq { padding: 85px 0; }
  .cfpDownload { padding: 30px 0; }
  .cfpDownloadCard { width: calc(100% - 24px); }
  .cfpDownloadCopy { padding: 55px 24px; }
  .cfpDownloadBtns { flex-direction: column; }
  .cfpAppMock { width: calc(100% - 30px); height: 500px; }
  .cfpBenefits { grid-template-columns: 1fr; }
  .cfpBenefits article + article { border-left: 0; border-top: 1px solid #e1e5dd; }
  .cfpFaq > .cfpWrap { gap: 35px; }
  .cfpFooterTop { grid-template-columns: 1fr 1fr; }
  .cfpFooterTop > div:first-child { grid-column: 1 / -1; }
  .cfpFooterBottom { flex-direction: column; gap: 10px; }
  .cfp h1 { font-size: 49px; }
}

/* ==========================================================
   Full-viewport hero — mirrors the cinematic Flip PC Parts
   layout (mockup override block, appended in cascade order:
   these intentionally override the earlier hero rules).
   ========================================================== */
.cfpHero { min-height: 0; padding-top: 0; }
.cfpHero:after { content: ''; position: absolute; z-index: 1; inset: 0 0 68px; background: linear-gradient(90deg, #06111f 0%, #06111ff5 30%, #06111f9c 50%, transparent 74%), linear-gradient(0deg, #06111f 0%, transparent 36%); pointer-events: none; }
.cfpHeroGlow { z-index: 1; right: 5%; top: 12%; width: 48vw; height: 66vh; background: #245f77; opacity: .22; }
.cfpHeroGrid { z-index: 2; inset: 0 0 68px; background-size: 80px 80px; opacity: .55; mask-image: linear-gradient(90deg, #000, transparent 68%); -webkit-mask-image: linear-gradient(90deg, #000, transparent 68%); }
.cfpHeroInner { width: 100%; max-width: none; height: 100vh; min-height: 880px; grid-template-columns: 1fr; display: flex; align-items: center; padding: 112px 4.5vw 110px; margin: 0; }
.cfpHeroCopy { position: relative; z-index: 4; width: 58%; max-width: 820px; padding-top: 0; }
.cfpHeroCopy h1 { font-size: clamp(64px, 7.2vw, 112px); line-height: .91; margin-top: 28px; margin-bottom: 32px; }
.cfpHeroCopy .cfpLead { max-width: 600px; font-size: 17px; }
.cfpHeroArt { position: absolute; z-index: 0; inset: 0 0 68px; height: auto; margin: 0; }
.cfpHeroArt > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; left: 0; top: 0; mix-blend-mode: normal; opacity: .94; }
.cfpOfferCard { z-index: 5; right: 24px; top: auto; bottom: 24px; width: 280px; padding: 26px 32px; }
.cfpOfferCard span { font-size: 10px; }
.cfpOfferCard strong { font-size: 42px; }
.cfpOfferCard div { font-size: 11px; }
.cfpRating { z-index: 5; left: auto; right: calc(4.5vw + 330px); bottom: 8%; padding: 16px 18px; }
.cfpTicker { position: relative; z-index: 6; height: 68px; background: #06111f; }

@media (max-width: 900px) {
  .cfpHero:after { background: linear-gradient(90deg, #06111f 0%, #06111fdf 52%, transparent), linear-gradient(0deg, #06111f 0%, transparent 50%); }
  .cfpHeroInner { height: auto; min-height: 900px; display: flex; align-items: flex-start; padding: 100px 5vw 260px; }
  .cfpHeroCopy { width: 100%; max-width: 720px; }
  .cfpHeroCopy h1 { font-size: clamp(58px, 11vw, 88px); }
  .cfpHeroArt { height: auto; margin: 0; }
  .cfpHeroArt > img { width: 100%; height: 100%; left: 0; object-position: 68% center; opacity: .62; }
  .cfpOfferCard { right: 5vw; bottom: 58px; top: auto; width: 300px; transform: none; }
  .cfpRating { left: 5vw; right: auto; bottom: 58px; }
}
@media (max-width: 900px) {
  .cfpHeroInner { min-height: 900px; padding: 90px 16px 275px; }
  .cfpHeroCopy h1 { font-size: 56px; line-height: .94; }
  .cfpHeroCopy .cfpLead { font-size: 15px; }
  .cfpHeroActions { align-items: flex-start; }
  .cfpHeroActions .cfpPrimary { width: 100%; }
  .cfpTextLink { justify-content: flex-start; }
  .cfpHeroArt { height: auto; margin: 0; }
  .cfpHeroArt > img { width: 100%; left: 0; object-position: 72% center; }
  .cfpOfferCard { left: 16px; right: 16px; bottom: 48px; width: auto; transform: none; }
  .cfpRating { display: none; }
}

/* ---- Sticky header: stays in the hero-overlay position (negative bottom
   margin cancels its 83px flow height — 82px nav + 1px border) and pins
   to the top on scroll; .cfpStuck (scroll listener in the template) adds
   a readable backdrop. ---- */
.cfp .cfpHeader { position: sticky; top: 0; margin-bottom: -83px; }
.cfp .cfpHeader.cfpStuck { background: #06111f; }

/* ==========================================================
   Family navbar — matches the getpcparts header spec exactly:
   80px bar (70px mobile), 1280px inner, centered 13px #b2bfca
   links at 34px gap, lime rounded CTA far right, SG 20px logo.
   ========================================================== */
.cfp .cfpHeader { height: 80px; } /* border-box: 1px border inside, like getpcparts */
.cfp .cfpNav { height: 100%; justify-content: flex-start; }
.cfp .cfpNav nav { margin: auto; gap: 34px; font-size: 17px; }
.cfp .cfpLogo { font-size: 30px; }
.cfp .cfpMark { width: 52px; height: 52px; }
.cfp .cfpNav nav > a { color: #b2bfca; }
.cfp .cfpNav nav > a:hover { color: #fff; }
.cfp .cfpNav > .cfpNavCta { padding: 12px 17px; font-size: 13px; font-weight: 700; color: #08131e !important; box-shadow: 0 12px 35px #b8f34a1f; }
.cfp .cfpNav > .cfpNavCta svg { width: 17px; height: 17px; }
.cfp .cfpMenu { margin-left: 9px; }
.cfp .cfpHeader { margin-bottom: -80px; }
@media (max-width: 900px) {
  .cfp .cfpHeader { height: 70px; margin-bottom: -70px; }
  .cfp .cfpNav nav { top: 70px; margin: 0; gap: 20px; align-items: flex-start; font-size: 20px; }
  .cfp .cfpNav > .cfpNavCta { display: none; }
  .cfp .cfpLogo { font-size: 30px; } /* match getpcparts navname size on mobile */
  .cfp .cfpMark { width: 44px; height: 44px; }
  .cfp .cfpMenu { margin-left: auto; }
}

/* ---- Family hero/nav type scale (mirrors the getpcparts changes):
   bigger button type at fixed heights, bigger eyebrow/lead/trust row. ---- */
.cfp .cfpNav > .cfpNavCta { height: 48px; padding: 0 20px; font-size: 15px; margin-left: 16px; }
.cfp .cfpNavCta i, .cfp .cfpPrimary i { font-size: 14px; }
.cfp .cfpEyebrow { font-size: 14px; }
.cfp .cfpLead { max-width: 480px; font-size: 20px; line-height: 1.6; }
.cfp .cfpPrimary { height: 58px; padding: 0 26px; font-size: 18px; }
.cfp .cfpTextLink { font-size: 16px; }
.cfp .cfpTextLink i { font-size: 14px; }
.cfp .cfpMicro { flex-direction: column; align-items: flex-start; gap: 12px; font-size: 20px; }
.cfp .cfpMicro svg { width: 22px; height: 22px; }
@media (max-width: 900px) {
  .cfp .cfpLead { font-size: 17px; }
}

/* Full-width navbar: logo left at the 4.5vw hero edge, links centered, CTA right */
.cfp .cfpNav { width: 100%; padding: 0 4.5vw; }

/* Offer card uses a fixed, roomy width on desktop (more white space around the
   text); on mobile it spans full width like the getpcparts/flippcparts hero cards. */
@media (min-width: 901px) {
  .cfp .cfpOfferCard { width: 280px; }
}
@media (max-width: 900px) {
  .cfp .cfpOfferCard { left: 16px; right: 16px; width: auto; }
}

/* Hero offer card scaled ~1.25x (desktop; mobile keeps its own transforms) */
@media (min-width: 901px) {
  .cfp .cfpOfferCard { transform: scale(1.25); transform-origin: bottom right; }
}

/* Hide the hero trust row on mobile */
@media (max-width: 900px) {
  .cfp .cfpMicro { display: none; }
}

/* Secondary hero button: lime outline, transparent fill (matches primary size) */
.cfp .cfpTextLink { height: 58px; padding: 0 26px; border: 2px solid var(--lime); border-radius: 8px; background: transparent; color: var(--lime); justify-content: center; font-size: 18px; }

/* Primary + secondary hero buttons equal size */
@media (min-width: 901px) {
  .cfpHeroActions { max-width: 560px; gap: 16px; }
  .cfp .cfpPrimary { border: 2px solid transparent; }
  .cfp .cfpPrimary, .cfp .cfpTextLink { flex: 1 1 0; min-width: 0; white-space: nowrap; }
}
@media (max-width: 900px) {
  .cfp .cfpTextLink { width: 100%; }
}

/* Mobile: show only the primary CTA (styled like desktop); hide the secondary. */
@media (max-width: 900px) {
  .cfp .cfpHeroActions .cfpPrimary { display: inline-flex; }
  .cfp .cfpHeroActions .cfpTextLink { display: none; }
}

/* Mobile: fit the hero to the viewport so the ticker shows without scrolling,
   and flow the offer card right under the primary button (instead of pinned
   to the bottom of a tall hero). */
@media (max-width: 900px) {
  .cfpHero { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
  .cfpHeroInner { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 90px 16px 24px; }
  .cfpHeroArt { display: contents; }
  .cfpHeroArt > img { inset: 0; }
  .cfp .cfpOfferCard { position: relative; z-index: 5; left: auto; right: auto; top: auto; bottom: auto; width: auto; margin: 26px 0 0; transform: none; }
  .cfpTicker { flex: 0 0 68px; }
}

/* Mobile hero copy: gray + smaller eyebrow, white lead paragraph */
@media (max-width: 900px) {
  .cfp .cfpEyebrow { color: #8a97a5; font-size: 11px; }
  .cfp .cfpHeroCopy .cfpLead { color: #ffffff; }
}

/* Readability panel: a dark backing behind the hero copy (always on). */
.cfp .cfpHeroCopy::before {
  content: '';
  position: absolute;
  inset: -85px -75px;
  z-index: -1;
  background: rgba(6, 17, 31, 0.92);
  border-radius: 70px;
  filter: blur(46px);
}

/* Desktop: keep the ticker pinned to the bottom of the viewport on resize
   (hero fills the window height, ticker is the last 68px). */
@media (min-width: 901px) {
  /* min-height (NOT a fixed height): on a tall viewport the hero is exactly
     100svh (ticker pinned to the bottom, copy centered). On a short viewport the
     hero GROWS to fit the copy and the page scrolls, so the centered copy can
     never overflow upward and the eyebrow stays below the navbar. */
  .cfpHero { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
  .cfpHeroInner { flex: 1 1 auto; height: auto; min-height: 0; }
  /* ticker is its own flex item now — the image can fill to the ticker top
     (heroArt no longer needs to reserve the bottom 68px) */
  .cfpHeroArt { inset: 0; }
  .cfpTicker { flex: 0 0 68px; }
}

/* Hamburger menu from <=1000px (extends the <=900px mobile nav up to 1000) */
@media (min-width: 901px) and (max-width: 1000px) {
  .cfp .cfpNav nav { display: none; position: absolute; top: 100%; left: 0; width: 100%; padding: 25px; background: var(--navy); flex-direction: column; align-items: flex-start; gap: 20px; font-size: 20px; }
  .cfp .cfpNav nav.open { display: flex; }
  .cfp .cfpNav > .cfpNavCta { display: none; }
  .cfp .cfpMenu { display: block; margin-left: auto; }
}

/* Desktop only: larger hero trust row + nav menu links */
@media (min-width: 1001px) {
  .cfp .cfpMicro { font-size: 24px; }
  /* Fluid nav: font is smallest just above the 1001px hamburger cutoff and
     reaches its 22px max by ~1500px; past that the gap keeps opening up so
     wide screens spread the items out rather than enlarging the text further. */
  .cfp .cfpNav nav { font-size: clamp(11px, calc(2.2vw - 11px), 22px); gap: clamp(10px, calc(6vw - 66px), 90px); }
  .cfp .cfpNav nav a, .cfp .cfpLogo, .cfp .cfpNav > .cfpNavCta { white-space: nowrap; }
}

/* Mobile nav menu: lime dropdown to match the login (.nav-panel) menu —
   lime border + rounded bottom corners + lime link text. Scoped to the open
   panel; `.open` is added by the hamburger JS which only runs on mobile. */
.cfpNav nav.open {
  border: 2px solid #b8f34a;
  border-top: 0;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.cfpNav nav.open a:not(.cfpNavCta):not(.cfpPrimary) { color: #b8f34a; }
.cfpNav nav.open a:not(.cfpNavCta):not(.cfpPrimary):hover { color: #d4ff7a; }

/* Mobile hero (2026-07): hide the offer card, fit the hero to the viewport, and
   pin the hero buttons to the bottom just above the ticker. Trust row (.cfpMicro)
   is already hidden on mobile. .cfpHeroInner is a flex ROW, so align-items:stretch
   makes the copy fill the height and margin-top:auto drops the buttons. */
@media (max-width: 900px) {
  .cfp .cfpOfferCard, .cfp .cfpRating { display: none; }
  .cfp .cfpHeroCopy::before { display: none; }
  /* mobile: show the primary CTA (styled like desktop), hide the secondary */
  .cfp .cfpHeroActions .cfpPrimary { display: inline-flex; width: 100%; }
  .cfp .cfpHeroActions .cfpTextLink { display: none; }
  /* readability panel behind just the eyebrow/h1/lead; show the hero image
     between the text and the button */
  .cfp .cfpHero:after { display: none; }
  /* pre-brightened mobile image via background-image (no CSS filter — avoids iOS blur) */
  .cfp .cfpHeroArt > img { display: block; opacity: 1; object-position: 78% 80%; height: 63%; top: auto; bottom: 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%);
    mask-image: linear-gradient(to bottom, transparent, #000 16%); }
  /* panel flush top-left; fade horizontally from 50% viewport width, vertically from 75% panel height */
  .cfp .cfpHeroInner { min-height: calc(100svh - 68px); align-items: stretch; padding: 0; }
  .cfp .cfpEyebrow { display: none; }
  .cfp .cfpHeroText { position: relative; z-index: 0; flex: none; width: 100%; height: 75svh; padding: 90px 24px 40px 22px; }
  .cfp .cfpHeroText h1 { margin-top: 8px; }
  .cfp .cfpHeroText::before { content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to bottom, rgba(6, 17, 31, .9) 58%, transparent);
    -webkit-mask-image: linear-gradient(to right, #000 80%, transparent);
    mask-image: linear-gradient(to right, #000 80%, transparent); }
  .cfp .cfpHeroCopy { flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; }
  .cfp .cfpHeroActions { margin: auto 20px 24px; }
}