/* ============ DESIGN TOKENS — inspired by the CPC Method cover art ============ */
:root{
  --navy:#0A1526;
  --navy-2:#101F38;
  --navy-deep:#050B18;
  --teal:#1FB6B6;
  --teal-bright:#2FD4CE;
  --amber:#F5A623;
  --flame:#FF7A29;
  --flame-bright:#FFB25C;
  --flame-deep:#C4470F;
  --urgent:#FF6A1A;
  --urgent-dark:#C4470F;
  --ink:#26313D;
  --muted:#5a6b7b;
  --muted-2:#8494a4;
  --paper:#F3F7FB;
  --line:#D3DEEA;
  --white:#FFFFFF;

  --radius-sm:8px;
  --radius:14px;
  --radius-lg:18px;
  --radius-xl:24px;
  --radius-full:999px;

  --shadow-soft:0 4px 20px -4px rgba(5,11,24,.12);
  --shadow-medium:0 10px 34px -10px rgba(5,11,24,.22);
  --shadow-teal:0 14px 34px -10px rgba(31,182,182,.45);
  --shadow-urgent:0 14px 30px -8px rgba(255,106,26,.4);
  --shadow-flame:0 0 40px -4px rgba(255,122,41,.55);

  --maxw:1120px;
}

.text-gradient{
  background:linear-gradient(135deg,var(--teal-bright) 0%,var(--teal) 55%,#0E8C8C 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.dark-glow{
  background:
    radial-gradient(900px 420px at 82% -8%, rgba(31,182,182,.16), transparent 60%),
    radial-gradient(600px 380px at 12% 108%, rgba(255,122,41,.10), transparent 62%),
    linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-bottom:0;
}
body.has-mobile-bar{padding-bottom:78px}
h1,h2,h3{font-family:'Poppins','Inter',sans-serif;line-height:1.15;letter-spacing:-0.02em;color:var(--navy)}
img{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.eyebrow{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal);border:1px solid rgba(31,182,182,.4);
  padding:6px 14px;border-radius:var(--radius-full);margin-bottom:22px;
}
section.block{padding:74px 0}
.section-head{text-align:center;max-width:640px;margin:0 auto 46px}
.section-head h2{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:800;margin-bottom:14px}
.section-head p{color:var(--muted);font-size:1.05rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(180deg,var(--teal-bright),var(--teal));
  color:#04222b;font-weight:800;font-size:1.05rem;letter-spacing:.01em;
  padding:17px 34px;border-radius:var(--radius-full);text-decoration:none;border:none;cursor:pointer;
  box-shadow:var(--shadow-teal);transition:transform .15s ease,box-shadow .15s ease;
  position:relative;overflow:hidden;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px -8px rgba(31,182,182,.6)}
.btn .arrow{font-size:1.15rem}
.btn-note{display:block;font-size:.8rem;color:#9fb4c9;margin-top:12px}
.btn-ghost{background:var(--white);color:var(--navy);border:1.5px solid var(--line);box-shadow:none}
.btn-ghost:hover{border-color:var(--teal)}
.btn-gray{background:#E7ECF1;color:#5a6b7b;box-shadow:none}
.btn-gray:hover{background:#dbe2e8;transform:none;box-shadow:none}
.btn-block{width:100%}
.btn-shimmer::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);animation:shimmer 3.2s ease-in-out infinite;
}
@keyframes shimmer{0%{left:-60%}45%{left:130%}100%{left:130%}}

/* ============ ANIMATIONS ============ */
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.animate-float{animation:floatY 4.5s ease-in-out infinite}
@keyframes pulseSoft{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.04)}}
.animate-pulse-soft{animation:pulseSoft 2.6s ease-in-out infinite}
@keyframes ctaPulse{0%,100%{box-shadow:0 0 0 0 rgba(31,182,182,.45)}50%{box-shadow:0 0 0 14px rgba(31,182,182,0)}}
.animate-cta-pulse{animation:ctaPulse 2.2s ease-in-out infinite}
@keyframes pingDot{0%{transform:scale(1);opacity:.9}75%,100%{transform:scale(2.4);opacity:0}}
.ping-dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--teal-bright);display:inline-block}
.ping-dot::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--teal-bright);animation:pingDot 1.6s cubic-bezier(0,0,.2,1) infinite}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.animate-fade-in{animation:fadeIn .25s ease both}
@keyframes scaleIn{from{opacity:0;transform:scale(.94) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}}
.animate-scale-in{animation:scaleIn .28s cubic-bezier(.2,.8,.3,1.2) both}
@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.animate-slide-up{animation:slideUp .32s ease both}
@keyframes bounceSlow{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.animate-bounce-slow{animation:bounceSlow 2.4s ease-in-out infinite}

/* ============ MARQUEE ============ */
.marquee{background:var(--navy-deep);color:#dfeaf5;overflow:hidden;padding:10px 0}
.marquee-track{display:flex;width:max-content;gap:0;animation:marqueeScroll 26s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marqueeScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-item{display:flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;letter-spacing:.03em;padding:0 26px;white-space:nowrap;border-right:1px solid rgba(255,255,255,.12)}
.marquee-item b{color:var(--teal-bright)}

/* ============ HERO ============ */
.hero{
  background:
    radial-gradient(1100px 520px at 82% -12%, rgba(31,182,182,.20), transparent 60%),
    radial-gradient(700px 500px at 8% 105%, rgba(255,122,41,.14), transparent 62%),
    linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%);
  color:#eaf2fa;padding:60px 0 68px;cursor:pointer;position:relative;overflow:hidden;
}
.hero .wrap{cursor:default;position:relative;z-index:1}
.hero-grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:8px 48px;align-items:center;
  grid-template-areas:"top photo" "bottom photo";
}
.hero-copy-top{grid-area:top}
.hero-copy-bottom{grid-area:bottom}
.hero-grid .hero-cover{grid-area:photo;align-self:start}
.hero .eyebrow{color:var(--teal-bright);border-color:rgba(47,212,206,.4)}
.hero h1{color:#fff;font-size:clamp(2.1rem,4.6vw,3.3rem);font-weight:800;margin-bottom:18px}
.hero h1 .num{color:var(--teal-bright)}
.hero h1 .accent{background:linear-gradient(135deg,var(--teal-bright) 0%,var(--teal) 55%,#0E8C8C 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hero p.lead{font-size:1.12rem;color:#c2d4e6;max-width:38ch;margin-bottom:26px}

.hero-benefits{list-style:none;display:grid;gap:14px;margin-bottom:26px}
.hero-benefits li{display:flex;gap:12px;align-items:flex-start}
.hero-benefits .check{flex:none;width:20px;height:20px;border-radius:6px;background:var(--teal);position:relative;margin-top:3px}
.hero-benefits .check::after{content:"";position:absolute;left:6px;top:4px;width:5px;height:9px;border:solid #04222b;border-width:0 2px 2px 0;transform:rotate(45deg)}
.hero-benefits b{color:#fff;font-size:.98rem}
.hero-benefits span{display:block;color:#aebfd1;font-size:.88rem;margin-top:2px}

.hero-formats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.format-tag{font-size:.76rem;font-weight:700;color:#cfe0ee;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);padding:6px 12px;border-radius:var(--radius-full)}

/* authority pillars — lifted straight from the cover's icon-badge language */
.pillars-row{
  display:flex;flex-wrap:wrap;gap:16px 24px;margin-bottom:30px;
  padding:18px 22px;border-radius:var(--radius-lg);
  background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid rgba(47,212,206,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.pillar{display:flex;align-items:center;gap:13px}
.pillar-badge{
  flex:none;width:50px;height:50px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%, rgba(47,212,206,.30), rgba(10,21,38,.7) 72%);
  border:1.5px solid rgba(47,212,206,.6);
  box-shadow:0 0 0 4px rgba(31,182,182,.06), 0 0 22px -4px rgba(31,182,182,.6), inset 0 0 10px rgba(47,212,206,.12);
  display:flex;align-items:center;justify-content:center;
}
.pillar-badge svg{width:22px;height:22px;stroke:var(--teal-bright);fill:none;stroke-width:1.7}
.pillar-label{font-size:.86rem;font-weight:700;color:#eef6fb;line-height:1.2;letter-spacing:.005em}

.hero-cta{position:relative;z-index:1}
.viewer-note{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:.82rem;color:#9fb4c9}

.hero-cover{position:relative;display:flex;justify-content:center;align-items:flex-start}
.hero-photo-wrap{position:relative;width:100%;max-width:420px;aspect-ratio:1/1;align-self:flex-start}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:20px;box-shadow:0 30px 70px -20px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.08);z-index:1}
.cover-glow{position:absolute;inset:-8% -6%;z-index:0;
  background:
    radial-gradient(circle at 30% 20%, rgba(31,182,182,.32), transparent 60%),
    radial-gradient(circle at 75% 85%, rgba(255,122,41,.24), transparent 60%);
  filter:blur(30px)}
.floating-pill{position:absolute;background:var(--white);border-radius:12px;box-shadow:var(--shadow-medium);padding:10px 14px;display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;color:var(--navy);z-index:2}
.floating-pill.p1{top:-14px;right:-18px}
.floating-pill.p2{bottom:14px;left:-24px}
.floating-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--teal)}

/* ============ PHOTO CAROUSELS (Peek Inside / See it in the room) ============ */
.photo-rows{gap:16px}
.photo-card{
  flex:none;width:150px;border-radius:var(--radius);overflow:hidden;background:var(--white);
  border:1px solid var(--line);box-shadow:var(--shadow-soft);transition:transform .2s ease,box-shadow .2s ease;
  aspect-ratio:2/3;
}
.photo-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-teal)}
.photo-card img{width:100%;height:100%;object-fit:cover;display:block}
@media(min-width:640px){.photo-card{width:190px}}
.gallery-cta{text-align:center;margin-top:32px}

/* ============ SCROLL ROW CAROUSELS ============ */
.carousel-rows{display:grid;gap:14px;overflow:hidden}
/* full-bleed on mobile: break the carousel out of .wrap's side padding so cards run edge-to-edge */
@media(max-width:900px){.carousel-rows{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}}
.car-row{overflow:hidden;cursor:pointer}
.car-track{display:flex;gap:12px;width:max-content}
.car-track.fwd{animation:carFwd linear infinite}
.car-track.rev{animation:carRev linear infinite}
@keyframes carFwd{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes carRev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.thumb-card{
  flex:none;width:118px;border-radius:10px;overflow:hidden;background:var(--white);
  border:1px solid var(--line);box-shadow:var(--shadow-soft);transition:transform .2s ease,box-shadow .2s ease;
}
.thumb-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-teal)}
.thumb-card img{width:100%;height:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.showcase-cta{text-align:center;margin-top:30px}
@media(min-width:640px){.thumb-card{width:148px;border-radius:12px}}

/* ============ OCCASIONS / CATEGORIES PILLS ============ */
.pill-cloud{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.pill{
  display:flex;align-items:center;gap:8px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-full);padding:11px 20px;font-size:.92rem;font-weight:600;color:var(--navy);
  box-shadow:var(--shadow-soft);transition:transform .15s ease;
}
.pill:hover{transform:translateY(-2px)}
.pill.hi{
  background:linear-gradient(120deg,var(--navy),var(--navy-2));color:#fff;box-shadow:var(--shadow-teal);position:relative;
}
.pill.hi .new{background:var(--amber);color:#3a2400;font-size:.6rem;font-weight:800;letter-spacing:.06em;padding:2px 7px;border-radius:6px;margin-left:2px}
.pill-note{text-align:center;font-size:.9rem;margin-top:26px;color:var(--muted-2)}

/* ============ STEPS ============ */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{text-align:center;padding:26px 18px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);position:relative;transition:box-shadow .2s ease}
.step:hover{box-shadow:var(--shadow-medium)}
.step .n{width:46px;height:46px;border-radius:50%;background:var(--navy);color:var(--teal-bright);
  font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:1.1rem}
.step h3{font-size:1.05rem;margin-bottom:8px}
.step p{font-size:.88rem;color:var(--muted)}

/* ============ TARGET AUDIENCE ============ */
.audience-card{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%);border-radius:var(--radius-xl);padding:44px 36px;max-width:760px;margin:0 auto}
.audience-list{list-style:none;display:grid;gap:14px;margin-top:8px}
.audience-list li{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:14px 16px}
.audience-list .check{flex:none;width:20px;height:20px;border-radius:6px;background:var(--teal);position:relative;margin-top:2px}
.audience-list .check::after{content:"";position:absolute;left:6px;top:4px;width:5px;height:9px;border:solid #04222b;border-width:0 2px 2px 0;transform:rotate(45deg)}
.audience-list span{color:#e4eef7;font-size:.96rem}
.audience-list-label{font-size:.78rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin:0 0 12px}
.audience-list-label.yes{color:var(--teal-bright)}
.audience-list-label.no{color:var(--flame-bright);margin-top:30px}
.audience-list-no li{background:rgba(255,122,41,.05);border-color:rgba(255,122,41,.14)}
.audience-list-no .x{flex:none;width:20px;height:20px;border-radius:6px;background:rgba(255,122,41,.16);border:1px solid rgba(255,122,41,.4);position:relative;margin-top:2px}
.audience-list-no .x::before,.audience-list-no .x::after{content:"";position:absolute;left:5px;top:9px;width:10px;height:2px;background:var(--flame-bright);border-radius:1px}
.audience-list-no .x::before{transform:rotate(45deg)}
.audience-list-no .x::after{transform:rotate(-45deg)}
.audience-cta{text-align:center;margin-top:28px}
.audience-cta p{color:#aebfd1;font-size:.85rem;margin-top:10px}
.audience .section-head h2, .audience .section-head p{color:#fff}
.audience .section-head p{color:#b9cbde}
.audience .eyebrow{color:var(--teal-bright);border-color:rgba(47,212,206,.4)}

@media(max-width:640px){
  .audience{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%)}
  .audience-card{background:none;border-radius:0;padding:0;max-width:none;margin:0}
  .audience .section-head{margin-bottom:22px}
  .audience .section-head h2{font-size:1.5rem}
  .audience .eyebrow{margin-bottom:14px}
  .audience-list-label{margin-bottom:8px}
  .audience-list-label.no{margin-top:20px}
  .audience-list{gap:10px}
  .audience-list li{padding:11px 14px}
  .audience-list span{font-size:.88rem}
  .audience-cta{margin-top:20px}
  .audience-cta .btn{padding:13px 24px;font-size:.92rem}
}

/* loop banner between audience and second showcase */
.loop-banner{background:var(--white);padding:28px 0;overflow:hidden}


/* ============ VALUE / BENEFITS ============ */
.value{background:var(--white)}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.vcard{padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);transition:box-shadow .2s ease}
.vcard:hover{box-shadow:var(--shadow-medium)}
.vcard .ic{width:46px;height:46px;border-radius:11px;background:var(--navy);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.vcard .ic span{color:var(--teal-bright);font-weight:800;font-size:1.2rem}
.vcard h3{font-size:1.1rem;margin-bottom:8px}
.vcard p{font-size:.92rem;color:var(--muted)}

/* ============ TESTIMONIALS ============ */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1120px;margin:0 auto}
.testi-card{background:var(--white);border:2px solid rgba(31,182,182,.16);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow-soft);position:relative}
.testi-stars{color:var(--amber);font-size:.9rem;letter-spacing:2px;margin-bottom:12px}
.testi-quote{font-size:.94rem;color:var(--ink);margin-bottom:18px;line-height:1.65}
.testi-who{display:flex;align-items:center;gap:10px}
.testi-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--teal));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.82rem;flex:none}
.testi-name{font-weight:700;color:var(--navy);font-size:.88rem}
.testi-role{font-size:.76rem;color:var(--muted-2)}
.testi-badge{position:absolute;top:-10px;right:16px;background:var(--teal);color:#04222b;font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:var(--radius-full)}
.testi-note{text-align:center;color:var(--muted-2);font-size:.85rem;margin-top:26px}

.testi-photo-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.testi-photo{aspect-ratio:4/3;overflow:hidden}
.testi-photo img{width:100%;height:100%;object-fit:cover;display:block}
.testi-body{padding:20px 22px 24px}
.testi-verified{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:800;color:#0E8C8C;letter-spacing:.02em;margin-bottom:8px}

/* ============ BONUSES ============ */
.bonus{background:var(--paper)}
.bonus-grid{display:grid;grid-template-columns:1fr;gap:16px;max-width:760px;margin:0 auto}
.bcard{position:relative;display:flex;gap:20px;align-items:center;background:var(--white);border:2px solid rgba(31,182,182,.28);border-radius:var(--radius-lg);padding:22px;overflow:hidden;box-shadow:var(--shadow-soft)}
.bcard .ribbon{position:absolute;top:-24px;right:-24px;width:70px;height:70px;border-radius:50%;background:rgba(31,182,182,.12)}
.bcard .bonus-thumb{flex:none;width:96px;height:106px;border-radius:12px;overflow:hidden;box-shadow:var(--shadow-medium);border:1px solid rgba(255,255,255,.6);position:relative;z-index:1}
.bcard .bonus-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.bcard .tag{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);background:rgba(31,182,182,.13);padding:4px 11px;border-radius:var(--radius-full)}
.bcard h3{font-size:1.08rem;margin:8px 0 4px}
.bcard p{font-size:.86rem;color:var(--muted)}
.bcard .free{margin-top:10px;font-size:.9rem;font-weight:800;color:var(--navy)}
.bcard .free s{color:var(--muted-2);font-weight:500}
.scarcity{max-width:520px;margin:34px auto 0;text-align:center}
.scarcity .bar{height:9px;background:var(--line);border-radius:var(--radius-full);overflow:hidden;margin-top:10px}
.scarcity .bar i{display:block;height:100%;width:96%;background:linear-gradient(90deg,var(--teal),var(--teal-bright));border-radius:var(--radius-full)}
.scarcity p{font-size:.84rem;color:var(--muted);font-weight:600}
.scarcity b{color:var(--navy)}

/* ============ TIME-SAVED CALCULATOR ============ */
.calc-table{max-width:900px;margin:0 auto;border:2px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-soft);background:var(--white)}
.calc-row{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;align-items:center}
.calc-row.head{background:var(--navy);color:#fff;font-size:.76rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.calc-row.head > div{padding:14px 16px}
.calc-row.body{border-top:1px solid var(--line);position:relative}
.calc-row.body > div{padding:18px 16px;font-size:.92rem;color:var(--ink)}
.calc-row.body .who{font-weight:700;color:var(--navy);display:flex;align-items:center;gap:8px}
.calc-row.body .result{font-weight:800;color:var(--teal);font-size:1.05rem}
.calc-row.body.pop{background:rgba(31,182,182,.05)}
.calc-row.body.pop{border-left:4px solid var(--teal)}
.calc-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--teal);color:#04222b;font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:var(--radius-full);z-index:1}
.calc-note{text-align:center;color:var(--muted-2);font-size:.85rem;margin-top:20px}

/* ============ PRICING ============ */
.pricing{background:var(--paper);position:relative;overflow:hidden}
.price-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:26px;max-width:860px;margin:0 auto;align-items:stretch;position:relative;z-index:1}
.plan{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-xl);padding:34px 30px;display:flex;flex-direction:column;position:relative}

/* Basic — clean and simple, just quietly smaller than Complete */
.plan.basic{background:var(--paper);border-color:var(--line)}
.plan.basic .price .now{font-size:2.1rem}

/* Complete Library — the plan we actually want to sell: rich navy "VIP" card */
.plan.feat{
  border:2.5px solid var(--teal);box-shadow:0 34px 70px -22px rgba(31,182,182,.6),0 0 0 6px rgba(31,182,182,.08);
  position:relative;transform:scale(1.06);z-index:2;
  background:linear-gradient(165deg,var(--navy) 0%,var(--navy-2) 55%,var(--navy-deep) 100%);
}
.plan-decor{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:0}
.plan-decor::before{content:"";position:absolute;top:-60px;right:-70px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(31,182,182,.35),transparent 70%)}
.plan-decor::after{content:"";position:absolute;bottom:-80px;left:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,122,41,.16),transparent 70%)}
.plan.feat .badge{position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  background:var(--teal);color:#04222b;font-size:.72rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;padding:8px 20px;border-radius:var(--radius-full);z-index:3;
  box-shadow:0 8px 18px -6px rgba(31,182,182,.6);white-space:nowrap}
.plan.feat h3{font-size:1.3rem;color:#fff;position:relative;z-index:1}
.plan-photo-wrap{position:relative;width:220px;max-width:75%;aspect-ratio:1/1;margin:6px auto 16px;z-index:1}
.plan-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.plan.feat .sub{color:#b9cbde;position:relative;z-index:1}
.plan.feat ul li{color:#e4eef7;position:relative;z-index:1}
.plan.feat ul li::before{background:rgba(47,212,206,.22)}
.plan.feat .price .was{color:#8ea3b8}
.save-chip{display:inline-flex;align-items:center;gap:5px;background:rgba(47,212,206,.18);color:var(--teal-bright);
  font-size:.72rem;font-weight:800;padding:4px 10px;border-radius:var(--radius-full);margin-left:10px;vertical-align:middle;
  border:1px solid rgba(47,212,206,.4)}

.plan h3{font-size:1.15rem;margin-bottom:6px}
.plan .sub{font-size:.86rem;color:var(--muted);margin-bottom:20px;min-height:38px}
.digital-note{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;
  color:var(--teal-bright);background:rgba(47,212,206,.12);border:1px solid rgba(47,212,206,.3);
  padding:6px 12px;border-radius:var(--radius-full);margin:-8px 0 20px;position:relative;z-index:1}
.plan .price{margin-bottom:20px;position:relative;z-index:1}
.plan .price .was{font-size:.9rem;color:var(--muted-2);text-decoration:line-through}
.plan .price .now{font-size:2.5rem;font-weight:800;color:var(--navy);letter-spacing:-.02em;font-family:'Poppins',sans-serif}
.plan.feat .price .now{font-size:3rem;color:#fff}
.plan .price .cur{font-size:1.1rem;vertical-align:super;font-weight:700;color:var(--navy)}
.plan.feat .price .cur{color:#fff}
.plan ul{list-style:none;display:grid;gap:9px;margin-bottom:26px}
.plan ul li{position:relative;padding-left:26px;font-size:.9rem;color:#3c4a58}
.plan ul li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:5px;background:rgba(31,182,182,.16)}
.plan ul li::after{content:"";position:absolute;left:5px;top:6px;width:4px;height:8px;border:solid var(--teal);border-width:0 2px 2px 0;transform:rotate(45deg)}
.plan .btn{margin-top:auto;width:100%}
.pricing-trust{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;max-width:860px;margin:38px auto 0;position:relative;z-index:1}
.pricing-trust .item{display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;color:var(--muted);justify-content:center}
.guarantee-box{max-width:820px;margin:34px auto 0;background:linear-gradient(120deg,var(--navy),var(--navy-2));
  color:#eaf2fa;border-radius:var(--radius-xl);padding:36px 40px;display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;position:relative;z-index:1}
.guar-seal{width:88px;height:88px;border-radius:50%;border:2px dashed var(--teal-bright);flex:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--teal-bright);text-align:center}
.guar-seal b{font-size:1.7rem;line-height:1;font-weight:800}
.guar-seal span{font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;margin-top:3px}
.guarantee-box h3{color:#fff;font-size:1.2rem;margin-bottom:6px}
.guarantee-box p{color:#bacbde;font-size:.9rem}

/* ============ FAQ ============ */
.faq{background:var(--white)}
.faq-list{max-width:760px;margin:0 auto;display:grid;gap:12px}
details{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:0 20px}
details summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:600;color:var(--navy);
  display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.98rem}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-size:1.4rem;color:var(--teal);font-weight:400;line-height:1}
details[open] summary::after{content:"\2013"}
details .ans{padding:0 0 20px;color:var(--muted);font-size:.92rem}

/* ============ ABOUT / METHOD ORIGIN ============ */
.about{background:var(--paper)}
.about-wrap{max-width:640px;margin:0 auto;text-align:center}
.about-emblem{width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--navy-2));
  border:1.5px solid rgba(47,212,206,.45);
  display:flex;align-items:center;justify-content:center;margin:0 auto 22px;
  box-shadow:var(--shadow-medium),0 0 34px -6px rgba(31,182,182,.55)}
.about-emblem span{color:var(--teal-bright);font-weight:800;font-size:1.6rem;font-family:'Poppins',sans-serif}
.about p{color:var(--muted);font-size:.98rem;margin-bottom:14px}
.about h3{font-size:1.3rem;margin-bottom:16px}

/* ============ TWO PATHS ============ */
.paths-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:920px;margin:0 auto}
.path{border-radius:var(--radius-lg);padding:30px}
.path h3{font-size:1.1rem;margin-bottom:18px}
.path ul{list-style:none;display:grid;gap:12px}
.path li{position:relative;padding-left:28px;font-size:.92rem}
.path.no{background:var(--paper);border:1px solid var(--line)}
.path.no h3{color:var(--muted)}
.path.no li{color:var(--muted)}
.path.no li::before{content:"\2715";position:absolute;left:0;top:0;color:#c85a5a;font-size:.8rem;font-weight:800}
.path.yes{background:var(--white);border:2px solid var(--teal);box-shadow:var(--shadow-teal);cursor:pointer}
.path.yes li{color:var(--ink)}
.path.yes li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:5px;background:rgba(31,182,182,.16)}
.path.yes li::after{content:"";position:absolute;left:5px;top:6px;width:4px;height:8px;border:solid var(--teal);border-width:0 2px 2px 0;transform:rotate(45deg)}
.paths-cta{text-align:center;margin-top:30px}

/* ============ SUPPORT ============ */
.support{background:var(--white);text-align:center}
.support-icon{width:64px;height:64px;border-radius:50%;background:rgba(31,182,182,.12);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:1.5rem}
.support p{color:var(--muted);max-width:46ch;margin:0 auto 22px}

/* ============ FOOTER ============ */
footer.site-footer{background:var(--navy-deep);color:#c9d7e4;padding-top:54px}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:34px;padding-bottom:36px}
.footer-brand h4{color:#fff;font-size:1.15rem;margin-bottom:10px}
.footer-brand p{font-size:.85rem;color:#93a7ba;max-width:32ch}
.footer-col h5{color:#fff;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.pay-badges{display:flex;flex-wrap:wrap;gap:8px}
.pay-badges span{font-size:.76rem;font-weight:600;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:6px 11px;border-radius:8px}
.one-time-note{font-size:.76rem;color:#8fa2b3;margin-top:10px}
.footer-col a{display:block;font-size:.86rem;color:#c9d7e4;text-decoration:none;margin-bottom:8px}
.footer-col a:hover{color:var(--teal-bright)}
footer.legal-wrap{border-top:1px solid rgba(255,255,255,.1)}
footer.legal-wrap .wrap{max-width:820px;text-align:center;padding:28px 22px;font-size:.76rem;color:#7f93a8;line-height:1.7}

.disclaimer-band{background:#eef3f8;color:var(--muted);font-size:.8rem;text-align:center;padding:16px;border-top:1px solid var(--line)}

/* ============ FINAL CTA (kept for completeness, reused inside pricing eyebrow) ============ */
.final{background:linear-gradient(180deg,var(--navy-deep),var(--navy));color:#eaf2fa;text-align:center}
.final .wrap{padding:74px 22px}
.final h2{color:#fff;font-size:clamp(1.8rem,3.6vw,2.5rem);max-width:20ch;margin:0 auto 18px;font-weight:800}
.final p{color:#b9cbde;max-width:48ch;margin:0 auto 30px}

/* ============ FLOATING POPUP ============ */
.popup-overlay{position:fixed;inset:0;background:rgba(6,22,51,.72);z-index:80;display:flex;align-items:center;justify-content:center;padding:16px}
.popup-overlay[hidden]{display:none}
.popup-dialog{position:relative;width:100%;max-width:420px;max-height:90vh;overflow-y:auto;background:var(--white);border-radius:var(--radius-xl);border:2.5px solid var(--urgent);padding:30px 26px;box-shadow:0 40px 80px -20px rgba(0,0,0,.5),0 0 0 6px rgba(255,106,26,.1);animation:popupGlow 2.4s ease-in-out infinite}
@keyframes popupGlow{0%,100%{box-shadow:0 40px 80px -20px rgba(0,0,0,.5),0 0 0 6px rgba(255,106,26,.1)}50%{box-shadow:0 40px 80px -20px rgba(0,0,0,.5),0 0 0 10px rgba(255,106,26,.18)}}
.popup-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;background:var(--paper);border:none;font-size:1rem;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.popup-badge{display:inline-block;background:var(--urgent);color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:6px 14px;border-radius:var(--radius-full);margin-bottom:16px}
.popup-dialog h3{font-size:1.35rem;margin-bottom:12px}
.popup-dialog ul{list-style:none;display:grid;gap:9px;margin:16px 0}
.popup-dialog ul li{position:relative;padding-left:26px;font-size:.9rem;color:#3c4a58}
.popup-dialog ul li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:5px;background:rgba(31,182,182,.16)}
.popup-dialog ul li::after{content:"";position:absolute;left:5px;top:6px;width:4px;height:8px;border:solid var(--teal);border-width:0 2px 2px 0;transform:rotate(45deg)}
.popup-price{display:flex;align-items:baseline;gap:10px;margin:18px 0 8px}
.popup-price .was{font-size:1rem;color:var(--muted-2);text-decoration:line-through}
.popup-price .now{font-size:2.2rem;font-weight:800;color:var(--urgent-dark);font-family:'Poppins',sans-serif}
.popup-urgency{font-size:.8rem;font-weight:600;color:var(--urgent-dark);background:rgba(255,106,26,.08);border:1px solid rgba(255,106,26,.22);border-radius:10px;padding:8px 12px;margin-bottom:18px}
.popup-dialog .btn-gray{margin-top:10px;font-size:.88rem;padding:14px 20px}

/* ============ SOCIAL PROOF TOAST ============ */
.toast-wrap{position:fixed;bottom:80px;left:8px;right:8px;z-index:70;max-width:230px;pointer-events:none}
@media(min-width:768px){.toast-wrap{bottom:20px;left:18px;right:auto;max-width:300px}}
.toast{background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-medium);border-radius:var(--radius-sm);padding:8px 10px;display:flex;gap:8px;align-items:center;pointer-events:auto}
.toast[hidden]{display:none}
.toast.scarcity{background:var(--amber);border-color:var(--amber)}
.toast-ic{flex:none;width:24px;height:24px;border-radius:50%;background:rgba(31,182,182,.14);display:flex;align-items:center;justify-content:center;font-size:.74rem}
.toast.scarcity .toast-ic{background:rgba(0,0,0,.08)}
.toast-title{font-size:.68rem;font-weight:700;color:var(--navy);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.toast.scarcity .toast-title{color:#3a2400}
.toast-sub{font-size:.6rem;color:var(--muted-2);display:none}
.toast.scarcity .toast-sub{color:#5a4200}
@media(min-width:768px){.toast-sub{display:block;font-size:.72rem}}

/* ============ MOBILE BOTTOM BAR ============ */
.mobile-bar{position:fixed;bottom:0;left:0;right:0;z-index:60;background:var(--white);border-top:1px solid var(--line);
  box-shadow:0 -8px 24px -8px rgba(10,31,68,.18);padding:10px 14px;display:none;align-items:center;gap:12px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));}
.mobile-bar.show{display:flex}
@media(min-width:768px){.mobile-bar{display:none !important}}
.mobile-bar{gap:8px;padding-left:10px;padding-right:10px}
.mobile-bar .price-block{flex:none;min-width:0}
.mobile-bar .price-block .label{font-size:.58rem;color:var(--muted-2);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.mobile-bar .price-block .amt{font-weight:800;color:var(--navy);font-size:1.05rem;font-family:'Poppins',sans-serif}
.mobile-bar .urgency-pill{flex:1 1 auto;min-width:0;font-size:.62rem;font-weight:700;color:var(--urgent-dark);background:rgba(255,106,26,.12);padding:6px 6px;border-radius:8px;text-align:center;overflow:hidden;text-overflow:ellipsis}
.mobile-bar .btn{padding:10px 14px;font-size:.8rem;flex:none;white-space:nowrap}
@media(max-width:340px){.mobile-bar .urgency-pill{display:none}}

/* ============ RESPONSIVE ============ */
@media(max-width:980px){
  .value-grid{grid-template-columns:repeat(2,1fr)}
  .testi-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .hero{padding:30px 0 42px}
  .hero .eyebrow{margin-bottom:14px}
  .hero-grid{grid-template-columns:1fr;gap:28px;text-align:center;grid-template-areas:"top" "photo" "bottom"}
  .hero-photo-wrap{max-width:320px;margin:0 auto}
  .hero p.lead,.hero h1{max-width:none}
  .hero-benefits{max-width:420px;margin-left:auto;margin-right:auto;text-align:left}
  .pillars-row{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;max-width:360px;margin:0 auto 22px;
    padding:12px 14px;background:rgba(255,255,255,.03);border-color:rgba(47,212,206,.14);box-shadow:none}
  .pillar{gap:8px}
  .pillar-badge{width:32px;height:32px;box-shadow:none;border-width:1px}
  .pillar-badge svg{width:15px;height:15px;stroke-width:2}
  .pillar-label{font-size:.68rem;line-height:1.15}
  .pill-cloud{gap:8px}
  .pill{padding:7px 13px;font-size:.78rem;gap:6px}
  .pill-note{font-size:.8rem;margin-top:16px}
  .hero-formats{justify-content:center}
  .steps-grid{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr;max-width:420px}
  .plan.feat{transform:none}
  .plan .price .now{font-size:3.4rem}
  .plan.basic .price .now{font-size:2.6rem}
  .plan.feat .price .now{font-size:3.8rem}
  .plan .price .was{font-size:1rem}
  .calc-row.body .result{font-size:1.3rem}
  .pricing-trust{grid-template-columns:repeat(2,1fr)}
  .guarantee-box{grid-template-columns:1fr;text-align:center;justify-items:center}
  .paths-grid{grid-template-columns:1fr}
  .calc-row{grid-template-columns:1.2fr 1fr 1fr}
  .calc-row > div:nth-child(4){display:none}
  .testi-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;text-align:center}
  .footer-brand p{margin:0 auto}
  .pay-badges{justify-content:center}
}
@media(max-width:640px){
  .value-grid{grid-template-columns:1fr}
  section.block{padding:54px 0}
  .pricing-trust{grid-template-columns:1fr 1fr}
}