:root{
  --cream:#FFF8F0;
  --peach:#FFE8D2;
  --peach-deep:#FFD9B3;
  --orange:#F97316;
  --orange-dark:#EA580C;
  --orange-light:#FFB27A;
  --navy:#1A2B4C;
  --navy-light:#2A3D63;
  --yellow:#FFD24C;
  --yellow-deep:#F2B600;
  --white:#ffffff;
  --ink:#1A2B4C;
  --muted:#7A7368;
  --line:#EFE3D3;
  --card:#ffffff;
  --danger:#E0473C;
  --success:#1E8E5A;
  --success-light:#E4F6EC;
  --gold:#B8860B;
  --gold-light:#D4A017;
  --gold-bg:#FFF7E0;
  --frame:440px;
  --img-hero:url("../assets/images/landing-page-bg/hero-bg.webp");
  --img-body:url("../assets/images/landing-page-bg/body-bg.webp");
  --img-body-2:url("../assets/images/landing-page-bg/body-bg-2.webp");
  --img-footer:url("../assets/images/landing-page-bg/footer.webp");
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;overflow-x:hidden;}

/* ================= SCROLL PROGRESS BAR ================= */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;background:rgba(26,43,76,.08);}
.scroll-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--orange),var(--yellow-deep));transition:width .1s linear;}

/* ================= SCROLL REVEAL ================= */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;}
[data-reveal].in-view{opacity:1;transform:translateY(0);}
@media(prefers-reduced-motion:reduce){
  [data-reveal]{transition:none;opacity:1;transform:none;}
}

/* ambient backdrop behind the mobile frame — same asset, heavily faded */
html, body{background:var(--navy);}
body{
  font-family:'Poppins','Segoe UI','Inter',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  overflow-x:hidden;
  padding-bottom:78px;
  background-image:var(--img-footer);
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}
img,svg{display:block;max-width:100%;}

/* ---- skeleton loading — shimmer placeholder while an image hasn't painted yet ---- */
img.img-skeleton{background:linear-gradient(90deg,#EFE3D3 25%,#FFF8F0 37%,#EFE3D3 63%);background-size:400% 100%;animation:imgShimmer 1.4s ease-in-out infinite;}
@keyframes imgShimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
@media(prefers-reduced-motion:reduce){ img.img-skeleton{animation:none;} }
a{color:inherit;text-decoration:none;}
ul{list-style:none;}

/* ---- mobile-native frame: fixed narrow column, always, regardless of viewport ---- */
.wrap{max-width:var(--frame);margin:0 auto;padding:0 18px;}
.frame{max-width:var(--frame);margin:0 auto;background:var(--cream);box-shadow:0 0 60px rgba(0,0,0,.35);}

/* lucide icon defaults */
[data-lucide], svg.lucide{width:16px;height:16px;flex:none;}
[data-lucide]{display:inline-block;vertical-align:-3px;}

/* ================= ANNOUNCEMENT BAR (single, cycling, FLASHY) ================= */
.ann-bar{
  background:linear-gradient(90deg,var(--danger),var(--orange));
  color:#fff;padding:10px 16px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-weight:700;font-size:13px;letter-spacing:.2px;text-align:center;
  position:relative;overflow:hidden;
}
.ann-cycle{display:flex;align-items:center;gap:7px;min-height:20px;}
.ann-cycle span{opacity:0;animation:annFade 3.6s ease-in-out infinite;}
.ann-cycle [data-lucide]{color:var(--yellow);width:15px;height:15px;}
@keyframes annFade{
  0%{opacity:0;transform:translateY(4px);}
  8%{opacity:1;transform:translateY(0);}
  30%{opacity:1;}
  38%{opacity:0;transform:translateY(-4px);}
  100%{opacity:0;}
}
.ann-timer{display:flex;align-items:center;gap:6px;font-weight:800;white-space:nowrap;font-size:13.5px;}
.ann-timer .flame{color:var(--yellow);}
.ann-timer b{
  font-variant-numeric:tabular-nums;background:rgba(0,0,0,.28);padding:2px 9px;border-radius:6px;
}

/* ================= HEADER / NAV ================= */
header.site{
  position:sticky;top:0;z-index:40;
  background:rgba(255,248,240,.95);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
nav.wrap{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;}
.logo{display:flex;align-items:center;gap:9px;}
.logo .badge{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
}
.logo .badge img{width:100%;height:100%;object-fit:contain;display:block;}
.logo .word{font-weight:800;font-size:16px;letter-spacing:.2px;color:var(--navy);}
.logo .word b{color:var(--orange);}
.nav-cta{
  background:var(--orange);color:#fff;font-weight:700;
  padding:8px 15px;border-radius:30px;font-size:13px;
  box-shadow:0 6px 16px rgba(249,115,22,.3);
}

/* ================= HERO ================= */
.hero{
  position:relative;
  background-image:
    linear-gradient(180deg, rgba(255,248,240,.18), rgba(255,232,210,.4) 70%),
    var(--img-hero);
  background-size:cover;background-position:center;
  padding:36px 0 24px;
}
.hero-grid{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;}

/* emphasized social-proof row — the first thing a buyer should notice */
.hero-rating{
  display:inline-flex;align-items:center;gap:clamp(2px,1.2vw,5px);flex-wrap:nowrap;justify-content:center;
  background:var(--white);border:1px solid rgba(249,115,22,.25);
  padding:3px clamp(5px,1.8vw,8px);border-radius:20px;width:fit-content;max-width:94vw;margin:0 auto;
  box-shadow:0 8px 18px rgba(26,43,76,.07);
}
.stars{display:inline-flex;gap:1px;flex:none;}
.stars [data-lucide]{width:clamp(8px,2.2vw,11px);height:clamp(8px,2.2vw,11px);}
[data-lucide].star-filled{color:var(--yellow-deep);fill:var(--yellow-deep);}
[data-lucide="star"]:not(.star-filled){color:var(--line);}
.hero-rating-text{font-size:clamp(7px,1.8vw,9px);color:var(--navy);font-weight:600;white-space:nowrap;}
.hero-rating-text b{color:var(--orange-dark);font-size:clamp(8px,2vw,10px);}

/* THE HOOK — primary attention-getter above the (now subline) headline; unused in current markup, kept for reference */
.hero-hook{
  width:100%;min-width:0;display:flex;flex-direction:column;align-items:center;gap:0;
  margin:2px 0 4px;container-type:inline-size;
}
.hook-line1{display:flex;align-items:center;justify-content:center;white-space:nowrap;min-width:0;line-height:1;}
.hook-text{
  font-weight:900;color:var(--orange-dark);text-transform:uppercase;letter-spacing:-.01em;
  white-space:nowrap;font-size:6.9cqi;line-height:1;margin-left:-2px;position:relative;z-index:1;
}
.hook-line2{
  font-weight:900;color:var(--orange-dark);text-transform:uppercase;letter-spacing:.5px;
  white-space:nowrap;font-size:6.9cqi;line-height:1;text-align:center;margin-top:-.05em;
}

/* platform-recognition badge — instant "this is for my exact stack" cue, above the headline */
.works-with{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:2px;}
.ww-label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;}
.ww-icons{display:flex;align-items:center;gap:6px;}
.ww-icons img{width:26px;height:26px;border-radius:7px;object-fit:contain;background:var(--white);padding:2px;box-shadow:0 3px 8px rgba(26,43,76,.12);}
.ww-chip{
  width:26px;height:26px;border-radius:7px;background:var(--white);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 8px rgba(26,43,76,.12);
}
.ww-chip [data-lucide]{width:14px;height:14px;color:var(--orange-dark);}

h1.title{font-weight:800;line-height:1.12;margin:4px 0 2px;color:var(--navy);animation:titleIn .6s ease both;min-width:0;width:100%;container-type:inline-size;}
h1.title .accent{color:var(--orange);}
/* Headline hierarchy, rebuilt on vw-based clamp() instead of the old cqi system.
   The old 3cqi rule was tuned for a short badge-style phrase in a different container
   context — it silently computed to ~10px (smaller than the body text around it) once
   real headline copy went through it, which is the actual "no hierarchy" bug: the H1
   was rendering as the *smallest* text on the page, not just under-emphasized. Sizes
   below are chosen to form a clear, checked scale: kicker(13) < subhead(14) <
   value-anchor(13, same tier as kicker) < subtitle(15–19) < headline(26–36), so the
   actual headline is unmistakably the biggest, boldest thing in the block. Normal
   wrapping (no nowrap) is intentional — vw-based sizing doesn't need the rigid
   single-line trick the old system used to avoid overflow, and wrapping is safer. */
.title-line{display:block;font-size:clamp(34px,10vw,50px);letter-spacing:-.02em;font-weight:800;line-height:1.08;white-space:nowrap;}
.title-line.title-sub{font-size:clamp(15px,4vw,19px);font-weight:600;letter-spacing:normal;line-height:1.35;margin-top:5px;}
@keyframes titleIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* fear-opener kicker — small, above the headline, loss-aversion framing */
.hero-fear-kicker{
  font-size:13px;font-weight:700;color:var(--danger);text-align:center;
  max-width:480px;line-height:1.4;margin:0 0 6px;text-transform:uppercase;letter-spacing:.2px;
}
/* mechanism subhead — sits right under the headline, states the actual product */
.hero-subhead{font-size:14px;color:#3d3830;text-align:center;max-width:480px;line-height:1.35;margin:0 0 4px;}
/* price-anchor line — makes ₱399 feel cheap by contrast before the price is even shown */
.hero-value-anchor{font-size:12.5px;font-weight:700;color:var(--muted);text-align:center;margin:0 0 4px;}
/* small secondary note inline with the CTA price (e.g. "Isang Bayad Lang") */
.bb-note{display:block;font-size:10px;font-weight:700;opacity:.85;letter-spacing:.2px;text-transform:uppercase;}
/* stamp badge — rotated, sits on top and slightly invades the hook text next to it */
.super-badge{
  display:inline-block;flex:none;position:relative;z-index:2;
  background:linear-gradient(135deg,#FFF04C,#FFD100);
  color:var(--navy);font-weight:900;font-size:6.4cqi;letter-spacing:.5px;
  padding:.05em .35em;border-radius:.3em;transform:rotate(-8deg);
  box-shadow:0 6px 14px rgba(255,209,0,.55);
  vertical-align:middle;white-space:nowrap;
  animation:badgePulse 1.8s ease-in-out infinite;
}
@keyframes badgePulse{
  0%,100%{box-shadow:0 6px 14px rgba(255,209,0,.55);transform:rotate(-8deg) scale(1);}
  50%{box-shadow:0 6px 22px rgba(255,209,0,.85);transform:rotate(-8deg) scale(1.06);}
}
/* hero media gallery — main viewer + thumbnail strip, store-website style */
.hero-visual{width:100%;margin-top:4px;}

.gallery-main{
  position:relative;width:100%;aspect-ratio:16/9;border-radius:20px;overflow:hidden;
  box-shadow:0 20px 45px rgba(26,43,76,.15);background:var(--navy-deep,var(--navy));
}
.gallery-main img{width:100%;height:100%;object-fit:contain;display:block;}
.gallery-video-wrap{position:absolute;inset:0;}
.gallery-video-wrap iframe{width:100%;height:100%;border:0;display:block;}

.gallery-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.9);color:var(--navy);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(0,0,0,.2);transition:.15s;
}
.gallery-nav:hover{background:#fff;transform:translateY(-50%) scale(1.06);}
.gallery-nav.prev{left:10px;}
.gallery-nav.next{right:10px;}
.gallery-nav [data-lucide]{width:20px;height:20px;}

.gallery-thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;-ms-overflow-style:none;}
.gallery-thumbs::-webkit-scrollbar{display:none;}
.gallery-thumb{
  position:relative;flex:none;width:64px;height:44px;border-radius:10px;overflow:hidden;
  border:2px solid transparent;cursor:pointer;background:var(--navy);padding:0;
}
.gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85;}
.gallery-thumb.active{border-color:var(--orange);}
.gallery-thumb.active img{opacity:1;}
.gallery-thumb .thumb-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(26,43,76,.35);color:#fff;
}
.gallery-thumb .thumb-play [data-lucide]{width:16px;height:16px;fill:#fff;}

/* compact CTA block right under the photo */
.hero-cta{width:100%;display:flex;flex-direction:column;align-items:center;gap:4px;}
.hero-cta .btn{max-width:360px;}

/* rich buy button — price + slashed original inline with the label */
/* stacks label above price at every width instead of forcing one nowrap row --
   the label text got meaningfully longer ("Kunin ang KitaAgad Payroll" vs "Buy Now")
   and a single forced-nowrap row was overflowing the button (confirmed via
   scrollWidth > clientWidth at both 375px and 1280px, not just mobile). */
.btn-buy-rich{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:14px 16px;text-align:center;width:100%;max-width:100%;}
/* clamp() + overflow-wrap:anywhere is a hard safety net: even if a future copy edit
   makes this text longer again, or webfont metrics differ from whatever this was last
   measured against, it degrades to wrapping/shrinking instead of silently overflowing
   the button — this exact class of bug has recurred twice already, see CHANGELOG.md. */
.bb-label{display:flex;align-items:center;justify-content:center;gap:6px;font-size:clamp(17px,5.2vw,21px);font-weight:900;flex-wrap:wrap;overflow-wrap:anywhere;max-width:100%;}
.bb-label [data-lucide]{width:18px;height:18px;flex:none;}
.bb-price{display:flex;align-items:baseline;justify-content:center;gap:6px;flex-wrap:wrap;max-width:100%;}
.bb-price b{font-size:clamp(14px,4.5vw,16px);font-weight:900;}
.bb-price s{font-size:11.5px;font-weight:600;opacity:.75;}
/* freebie callout under the price line — bold + yellow so it reads as a bonus,
   not fine print; no animation, matches the site's "honest, static" badge style. */
.bb-freebie{display:flex;align-items:center;justify-content:center;gap:5px;font-size:clamp(11.5px,3.4vw,13px);font-weight:800;color:var(--yellow);letter-spacing:.1px;flex-wrap:wrap;max-width:100%;}
.bb-freebie [data-lucide]{width:14px;height:14px;flex:none;}

/* milestone badge under the CTA — honest, static, no fabricated countdown */
.timer-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(90deg,var(--orange-dark),var(--orange));color:#fff;
  font-size:12px;font-weight:800;padding:6px 14px;border-radius:20px;
  box-shadow:0 8px 18px rgba(224,71,60,.22);
}
.timer-badge [data-lucide]{width:13px;height:13px;color:var(--yellow);}
.timer-badge b{font-variant-numeric:tabular-nums;}

.hero-microline{
  font-size:12px;color:var(--orange-dark);font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;
}
.hero-microline [data-lucide]{width:14px;height:14px;}

/* risk reversal — the actual, mechanic-tied guarantee */
.risk-reversal{
  width:100%;max-width:400px;background:var(--white);border:1.5px solid rgba(45,138,69,.3);
  border-radius:14px;padding:7px 12px;margin-top:0;
  box-shadow:0 10px 24px rgba(26,43,76,.06);
}
.rr-badge{
  display:inline-flex;align-items:center;gap:6px;background:rgba(45,138,69,.12);color:#2d8a45;
  font-size:11.5px;font-weight:800;padding:4px 11px;border-radius:20px;margin-bottom:0;
}
.rr-badge [data-lucide]{width:13px;height:13px;}
.risk-reversal p{font-size:11.5px;color:#3d3830;line-height:1.25;text-align:left;margin-top:4px;}

/* compact objection-killer FAQ, right under the hero CTA — same pattern as
   the KitaAgad Payroll fork's, ported over 2026-08-05 */
.hero-faq-strip{
  width:100%;max-width:400px;margin:8px auto 0;text-align:left;
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  padding:2px 14px;box-shadow:0 8px 18px rgba(26,43,76,.06);
}
.hero-faq-strip .faq-item{padding:10px 0;}
.hero-faq-strip .faq-item:last-child{border-bottom:none;}
.hero-faq-strip .faq-item summary{font-size:12.5px;}

/* recurring starburst price badge — true 5-point star, content sized to fit its inner circle */
.starburst{
  width:108px;height:108px;flex:none;
  background:radial-gradient(circle at 38% 32%, var(--yellow), var(--yellow-deep) 78%);
  clip-path:polygon(
    50% 0%, 61.8% 33.8%, 97.6% 34.5%, 69% 56.2%, 79.4% 90.5%,
    50% 70%, 20.6% 90.5%, 31% 56.2%, 2.4% 34.5%, 38.2% 33.8%
  );
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transform:rotate(-6deg);
  box-shadow:0 10px 22px rgba(219,163,0,.4);
}
.starburst b{color:var(--navy);font-size:16px;line-height:1;letter-spacing:-.2px;}
.starburst small{color:#7a5b00;font-size:8px;font-weight:700;text-decoration:line-through;margin-top:3px;line-height:1;}
.starburst.light{margin:18px auto;transform:rotate(-4deg);}

.btn{border:none;border-radius:12px;font-weight:800;font-size:15px;padding:15px 24px;cursor:pointer;width:100%;text-align:center;display:inline-flex;align-items:center;justify-content:center;gap:8px;}
.btn [data-lucide]{width:17px;height:17px;}
.btn-buy{
  background:linear-gradient(135deg,var(--orange),var(--orange-dark));color:#fff;
}
/* reserved for the single most important CTA on screen at a time — not every buy button */
.btn-buy-pulse{animation:pulseBtn 1.6s infinite;}
@keyframes pulseBtn{
  0%{box-shadow:0 0 0 0 rgba(249,115,22,.5);transform:scale(1);}
  70%{box-shadow:0 0 0 16px rgba(249,115,22,0);transform:scale(1.015);}
  100%{box-shadow:0 0 0 0 rgba(249,115,22,0);transform:scale(1);}
}
.btn-cart{background:transparent;border:1.5px solid var(--navy);color:var(--navy);}
/* pill grid on mobile so items align cleanly regardless of label length —
   plain wrapped text looked ragged/inconsistent depending on screen width */
.trust-row{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;
  width:100%;max-width:380px;margin:2px auto 0;
}
.trust-row span{
  display:flex;align-items:center;gap:6px;
  background:var(--white);border:1px solid var(--line);border-radius:10px;
  padding:6px 9px;font-size:10.5px;font-weight:700;color:var(--navy);
  box-shadow:0 3px 8px rgba(26,43,76,.04);
}
.trust-row span:last-child:nth-child(odd){grid-column:1 / -1;justify-content:center;}
.trust-row [data-lucide]{width:14px;height:14px;color:var(--orange);flex:none;}

/* ================= SECTIONS shared ================= */
section{padding:44px 0;}
.section-tag{
  display:inline-block;background:rgba(249,115,22,.1);color:var(--orange-dark);
  font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;
  padding:4px 11px;border-radius:20px;margin-bottom:12px;
}
h2.section-title{font-size:23px;font-weight:800;margin-bottom:10px;color:var(--navy);}
.section-lede{color:#514b42;font-size:13.5px;line-height:1.6;margin-bottom:24px;}

/* FEATURES — subtle brand pattern background */
.features{
  position:relative;
  background-image:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.96)), var(--img-body);
  background-size:auto, 340px;
  background-position:center;
}
/* photo + testimonial, wrapped in one card like the other feature cards */
.feat-showcase{
  background:var(--white);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  margin-bottom:18px;box-shadow:0 20px 45px rgba(26,43,76,.1);
}
.feat-photo{width:100%;aspect-ratio:1/1;max-height:320px;}
.feat-photo img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}
.feat-testimonial{padding:18px;}
.ft-stars{display:flex;gap:2px;margin-bottom:10px;}
.ft-stars [data-lucide]{width:15px;height:15px;}
.ft-quote{font-size:13.5px;color:#3d3830;line-height:1.6;font-style:italic;margin-bottom:14px;}
.ft-author{display:flex;align-items:center;gap:10px;}
.ft-avatar{
  width:36px;height:36px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--orange),var(--yellow));
  display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--navy);font-size:13px;
}
.ft-author b{display:block;font-size:13px;color:var(--navy);}
.ft-author span{font-size:11px;color:var(--muted);}

.feat-grid{display:flex;flex-direction:column;gap:12px;}
.feat-card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;align-items:center;gap:14px;transition:.2s;}
.feat-card:active{border-color:var(--orange);}
.feat-icon{
  width:42px;height:42px;border-radius:12px;flex:none;
  background:linear-gradient(135deg,var(--orange),var(--orange-dark));
  display:flex;align-items:center;justify-content:center;
}
.feat-icon [data-lucide]{width:20px;height:20px;color:#fff;}
.feat-card h3{font-size:14px;margin-bottom:2px;color:var(--navy);}
.feat-card p{font-size:12px;color:var(--muted);line-height:1.4;}

/* ALL 19 TABS — compact, always 2-up (mobile included) to keep the full list skimmable without endless scroll */
.tab-tag{margin-top:8px;}
.tab-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  margin-bottom:18px;
}
.tab-item{
  background:var(--white);border:1px solid var(--line);border-radius:12px;
  padding:10px 11px;display:flex;align-items:flex-start;gap:8px;text-align:left;
}
.tab-icon{
  width:26px;height:26px;border-radius:8px;flex:none;
  background:linear-gradient(135deg,var(--orange),var(--orange-dark));
  display:flex;align-items:center;justify-content:center;
}
.tab-icon [data-lucide]{width:13px;height:13px;color:#fff;}
.tab-item{align-items:center;}
.tab-item h4{
  font-size:12px;font-weight:800;color:var(--navy);line-height:1.25;
  display:flex;align-items:center;gap:5px;
}

/* info icon + tap/hover tooltip — replaces the always-visible description so the list stays skimmable */
.info-btn{
  position:relative;flex:none;width:16px;height:16px;padding:0;border:none;border-radius:50%;
  background:var(--line);color:var(--muted);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}
.info-btn [data-lucide]{width:10px;height:10px;pointer-events:none;}
.info-tip{
  position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(4px);
  width:200px;max-width:60vw;background:var(--navy);color:#fff;
  font-size:11px;font-weight:500;line-height:1.4;text-align:left;
  padding:9px 11px;border-radius:10px;box-shadow:0 10px 24px rgba(26,43,76,.25);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease, transform .15s ease;
  z-index:5;
}
.info-tip::after{
  content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--navy);
}
.info-btn:hover .info-tip,.info-btn:focus .info-tip,.info-btn:focus-visible .info-tip{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}

/* automation bonus callout — sits under the tab grid, single wide card */
.automation-callout{
  display:flex;align-items:flex-start;gap:14px;text-align:left;
  background:linear-gradient(135deg,var(--navy),var(--navy-deep,var(--navy)));
  border-radius:18px;padding:18px;margin-bottom:18px;
  box-shadow:0 16px 34px rgba(26,43,76,.18);
}
.ac-icon{
  width:40px;height:40px;border-radius:12px;flex:none;
  background:linear-gradient(135deg,var(--yellow),var(--orange));
  display:flex;align-items:center;justify-content:center;
}
.ac-icon [data-lucide]{width:20px;height:20px;color:var(--navy);}
.automation-callout h3{font-size:15px;color:#fff;display:flex;align-items:center;gap:7px;}

/* package comparison — compact all-columns-visible table, no horizontal scroll, mobile-first */
.compare{background:var(--white);}
.cmp2-wrap{margin-top:16px;}
.cmp2-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;}
.cmp2-table colgroup col:first-child{width:30%;}
.cmp2-table colgroup col:not(:first-child){width:17.5%;}
.cmp2-table th, .cmp2-table td{padding:7px 2px;text-align:center;vertical-align:middle;}
.cmp2-table thead th{vertical-align:bottom;padding-bottom:8px;}
.cmp2-head{text-align:center;}
.cmp2-head > *{display:block;margin:0 auto;}
.cmp2-name{font-weight:800;font-size:10.5px;color:var(--navy);}
.cmp2-price{font-weight:800;font-size:13px;color:var(--orange-dark);}
.cmp2-row{
  text-align:left !important;font-weight:600;font-size:10.5px;color:var(--navy);
  line-height:1.25;padding-right:6px !important;word-break:break-word;
}
.cmp2-table tbody tr{border-top:1px solid var(--line);}
.cmp2-yes{width:14px;height:14px;color:#1a9e5c;}
.cmp2-no{width:12px;height:12px;color:#d8d3c8;}
.cmp2-text{font-size:10px;font-weight:700;color:var(--navy);}
.cmp2-badges{display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:3px;}
.cmp2-badges-spacer{visibility:hidden;}
.cmp2-winner{background:var(--gold-bg);border-left:2px solid var(--gold);border-right:2px solid var(--gold);}
.cmp2-table thead th.cmp2-winner{border-top:2px solid var(--gold);border-radius:10px 10px 0 0;}
.cmp2-table tbody tr:last-child td.cmp2-winner{border-bottom:2px solid var(--gold);border-radius:0 0 10px 10px;}
.cmp2-note{font-size:10.5px;color:#8a8a8a;margin-top:8px;}
.cmp2-nudge{
  display:flex;align-items:center;justify-content:center;gap:5px;text-align:center;flex-wrap:wrap;
  margin-top:10px;padding:9px 12px;border-radius:12px;border:1.5px dashed var(--gold-light);
  background:var(--gold-bg);color:var(--gold);font-weight:700;font-size:11.5px;
}
.cmp2-nudge b{color:var(--gold);}
.cmp2-nudge [data-lucide]{width:13px;height:13px;}
.compare-badge{
  display:inline-flex;align-items:center;gap:3px;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.2px;
  background:var(--orange);color:#fff;border-radius:999px;padding:2px 7px;white-space:nowrap;
}
.compare-badge-gold{background:linear-gradient(135deg,var(--gold-light),var(--gold));color:#fff;}
.cmp2-ctas{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:16px;}
.cmp2-ctas .btn{font-size:12px;line-height:1.3;padding:10px 8px;}
.btn-buy-outline{background:#fff;color:var(--orange-dark);border:2px solid var(--orange);}
.btn-buy-gold{background:linear-gradient(135deg,var(--gold-light),var(--gold));color:#fff;}
@media (min-width:640px){
  .cmp2-table th, .cmp2-table td{padding:9px 6px;}
  .cmp2-name{font-size:13px;}
  .cmp2-price{font-size:16px;}
  .cmp2-row{font-size:12.5px;}
  .cmp2-yes{width:18px;height:18px;}
  .cmp2-no{width:15px;height:15px;}
  .cmp2-text{font-size:12px;}
  .compare-badge{font-size:9.5px;padding:3px 9px;}
  .cmp2-ctas{grid-template-columns:repeat(4,1fr);}
  .msg-grid{columns:2;}
}

/* info button variant for use on the dark navy automation-callout background */
.info-btn-light{background:rgba(255,255,255,.18);color:#fff;}

/* deliverables — what actually lands in the buyer's inbox */
.deliverables-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;
}
.dv-item{
  background:var(--white);border:1px solid var(--line);border-radius:12px;
  padding:10px 11px;display:flex;align-items:center;gap:8px;text-align:left;
}
.dv-item [data-lucide]{width:16px;height:16px;color:var(--orange-dark);flex:none;margin-top:1px;}
.dv-item h4{
  font-size:11.5px;font-weight:800;color:var(--navy);line-height:1.25;
  display:flex;align-items:center;gap:5px;
}
.dv-bonus{grid-column:1 / -1;border-color:rgba(45,138,69,.35);background:rgba(45,138,69,.06);}
.dv-bonus [data-lucide]{color:#2d8a45;}

/* HOW IT WORKS — guided step-flow */
.how{background:var(--white);}
.delivery{background:var(--cream);}
.how-track{display:flex;flex-direction:column;gap:0;position:relative;}
.how-step{position:relative;padding-left:52px;padding-bottom:16px;display:flex;align-items:center;min-height:40px;}
.how-step:last-child{padding-bottom:0;}
.how-step::before{
  content:'';position:absolute;left:19px;top:40px;bottom:0;width:2px;
  background:linear-gradient(var(--orange-light),var(--line));
}
.how-step:last-child::before{display:none;}
.how-node{
  position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,var(--orange),var(--orange-dark));color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;
  box-shadow:0 8px 18px rgba(249,115,22,.3);
}
.how-step h3{font-size:15px;color:var(--navy);margin:0;}

/* CREDIBILITY */
.credibility{background:var(--cream);}
.cred-grid{display:flex;flex-direction:column;gap:20px;}
.cred-copy p{font-size:13.5px;color:#4a4438;line-height:1.65;}
.cred-stat{
  background:var(--white);border:1px solid var(--line);border-radius:18px;
  padding:22px;text-align:center;box-shadow:0 16px 34px rgba(26,43,76,.08);
}
.cred-stat-num{font-size:44px;font-weight:900;color:var(--orange);line-height:1;margin-bottom:8px;}
.cred-stat-label{font-size:12.5px;color:var(--muted);line-height:1.5;}
.cred-stat-label b{color:var(--navy);}

@media(min-width:860px){
  .cred-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:50px;align-items:center;}
  .how-track{display:flex;flex-direction:row;gap:24px;}
  .how-step{display:block;padding-left:0;padding-bottom:0;flex:1;text-align:center;min-height:0;}
  .how-step::before{left:50%;top:20px;bottom:auto;width:100%;height:2px;transform:translateX(20px);}
  .how-step:last-child::before{display:none;}
  .how-node{position:static;margin:0 auto 14px;}
}

/* DESCRIPTION / STORY */
.story{
  background-image:linear-gradient(135deg, rgba(255,232,210,.93), rgba(255,248,240,.95)), var(--img-body-2);
  background-size:auto, 480px;background-position:center;
}
.story-grid{display:flex;flex-direction:column;gap:22px;}
.story-copy p{color:#4a4438;font-size:14px;line-height:1.7;margin-bottom:12px;font-weight:600;}
.story-copy strong{color:var(--orange-dark);}
.story-visual{background:var(--white);border-radius:20px;padding:20px;border:1px solid var(--line);box-shadow:0 20px 40px rgba(26,43,76,.08);}
.story-visual .stat-row{display:flex;justify-content:space-between;margin-bottom:16px;padding-bottom:16px;border-bottom:1px dashed var(--line);}
.story-visual .stat-row.last{border-bottom:none;margin-bottom:0;padding-bottom:0;}
.story-visual .stat b{display:block;font-size:22px;color:var(--orange);}
.story-visual .stat small{font-size:10.5px;color:var(--muted);}

/* TESTIMONIALS */
.reviews{background:var(--white);}

/* featured/hero review — the Angela Ramos photo testimonial, given top billing above the carousel */
.review-featured{
  background:var(--white);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  margin-bottom:20px;box-shadow:0 20px 45px rgba(26,43,76,.1);
}
.rf-photo{width:100%;aspect-ratio:1/1;max-height:320px;}
.rf-photo img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}

.review-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin-bottom:18px;
}
.review-filters{display:flex;gap:6px;flex-wrap:wrap;}
.rf-chip{
  background:var(--cream);border:1.5px solid var(--line);color:var(--navy);
  font-size:12px;font-weight:700;padding:6px 13px;border-radius:20px;cursor:pointer;
  transition:.15s;
}
.rf-chip:hover{border-color:var(--orange-light);}
.rf-chip.active{background:var(--orange);border-color:var(--orange);color:#fff;}
.review-sort{
  background:var(--cream);border:1.5px solid var(--line);color:var(--navy);
  font-size:12px;font-weight:700;padding:7px 10px;border-radius:10px;cursor:pointer;
  font-family:inherit;
}

/* horizontal scroller — fixed section height regardless of review count, chevron-driven instead of a visible drag scrollbar */
.review-carousel{position:relative;}
.review-grid{
  display:flex;flex-direction:row;gap:14px;
  overflow-x:auto;scroll-snap-type:x proximity;
  padding-bottom:2px;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
}
.review-grid::-webkit-scrollbar{display:none;}
.review-carousel .gallery-nav{background:rgba(255,255,255,.95);}
.review-card{
  flex:0 0 78vw;max-width:280px;scroll-snap-align:start;
  background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:16px;
  transition:transform .25s ease, box-shadow .25s ease, opacity .2s ease;
  animation:cardIn .35s ease both;
}
.review-card:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(26,43,76,.1);border-color:var(--orange-light);}
.review-card.rc-hidden{display:none;}
@keyframes cardIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.review-empty{text-align:center;color:var(--muted);font-size:13px;padding:20px 0;}

.review-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.avatar{
  width:36px;height:36px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--orange),var(--yellow));
  display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--navy);font-size:13px;
}
.rname{font-size:13px;font-weight:700;color:var(--navy);}
.rmeta{font-size:10.5px;color:var(--muted);display:flex;align-items:center;gap:5px;}
.verified{color:var(--orange-dark);font-size:10px;font-weight:700;display:inline-flex;align-items:center;gap:3px;}
.verified [data-lucide]{width:11px;height:11px;}
.review-stars{display:flex;gap:2px;margin-bottom:6px;}
.review-stars [data-lucide]{width:13px;height:13px;}
.review-body{font-size:12.5px;color:#4a4438;line-height:1.55;margin-bottom:8px;}
.review-foot{display:flex;align-items:center;justify-content:space-between;font-size:10.5px;color:var(--muted);}
.review-foot span{display:inline-flex;align-items:center;gap:4px;}
.review-foot [data-lucide]{width:11px;height:11px;}

.helpful-btn{
  display:inline-flex;align-items:center;gap:5px;
  background:transparent;border:1px solid var(--line);border-radius:20px;
  padding:4px 10px;font-size:10.5px;font-weight:700;color:var(--muted);
  cursor:pointer;transition:.15s;font-family:inherit;
}
.helpful-btn:hover{border-color:var(--orange-light);color:var(--orange-dark);}
.helpful-btn.liked{background:rgba(249,115,22,.12);border-color:var(--orange);color:var(--orange-dark);}
.helpful-btn.liked [data-lucide]{color:var(--orange-dark);fill:var(--orange-dark);}
.helpful-btn .hcount{transition:transform .2s;}

/* REAL MESSAGES — raw Messenger screenshots, masonry-ish grid (columns handle the uneven heights) */
.real-msgs{background:var(--cream);}
.real-msgs .section-tag{display:inline-flex;align-items:center;gap:5px;}
.real-msgs .section-tag [data-lucide]{width:12px;height:12px;}
.msg-grid{
  columns:1;column-gap:14px;
}
.msg-card{
  position:relative;break-inside:avoid;margin:0 0 14px;
  background:var(--white);border:1px solid var(--line);border-radius:16px;
  padding:14px 14px 16px;box-shadow:0 14px 30px rgba(26,43,76,.07);
}
.msg-card img{display:block;width:100%;height:auto;border-radius:4px;}
.msg-badge{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--orange);color:#fff;font-size:10px;font-weight:800;
  letter-spacing:.3px;text-transform:uppercase;
  padding:4px 10px;border-radius:20px;margin-bottom:10px;
  box-shadow:0 6px 14px rgba(249,115,22,.3);
}
.msg-badge [data-lucide]{width:11px;height:11px;}
.helpful-btn.bump .hcount{animation:hbump .3s ease;}
@keyframes hbump{0%{transform:scale(1);}40%{transform:scale(1.35);}100%{transform:scale(1);}}

/* FAQ / GUARANTEE */
.guarantee{background:var(--white);}
.g-grid{display:flex;flex-direction:column;gap:28px;}
.badge-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.g-badge{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:14px;text-align:center;}
.g-badge .ic{margin-bottom:6px;display:flex;justify-content:center;}
.g-badge .ic [data-lucide]{width:22px;height:22px;color:var(--orange);}
.g-badge b{display:block;font-size:12px;margin-bottom:3px;color:var(--navy);}
.g-badge p{font-size:10.5px;color:var(--muted);line-height:1.4;}
.faq-item{border-bottom:1px solid var(--line);padding:14px 0;}
.faq-item summary{cursor:pointer;font-weight:700;font-size:13.5px;list-style:none;display:flex;justify-content:space-between;color:var(--navy);}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+';color:var(--orange);font-size:19px;}
.faq-item[open] summary::after{content:'–';}
.faq-item p{margin-top:8px;font-size:12.5px;color:var(--muted);line-height:1.6;}

/* FINAL CTA */
.final-cta{background:linear-gradient(135deg,var(--navy),var(--navy-light));text-align:center;}
.final-cta-inner{display:flex;flex-direction:column;align-items:center;}
.final-cta h2{font-size:26px;font-weight:800;margin-bottom:10px;color:#fff;}
.final-cta p{color:rgba(255,255,255,.85);font-size:13.5px;margin-bottom:4px;}

footer{
  background-image:linear-gradient(180deg, rgba(26,43,76,.88), rgba(26,43,76,.94)), var(--img-footer);
  background-size:cover;background-position:center;
  padding:34px 0 26px;text-align:center;color:#b9c2d6;font-size:12px;
}
footer .flogo{font-weight:800;color:#fff;margin-bottom:8px;font-size:15px;display:flex;align-items:center;justify-content:center;gap:8px;}
footer .fbadge{
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
}
footer .fbadge img{width:100%;height:100%;object-fit:contain;display:block;}
footer .flinks{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:12px 0;font-size:11.5px;}
footer .flinks a:hover{color:var(--orange-light);}
footer .fcopy{color:#8794ac;font-size:11px;}

/* ================= LEGAL PAGES (Terms / Privacy / Refund) ================= */
.legal-hero{padding:28px 0 10px;text-align:center;}
.legal-hero .back-link{
  display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;
  color:var(--muted);margin-bottom:14px;
}
.legal-hero .back-link [data-lucide]{width:14px;height:14px;}
.legal-hero h1{font-size:26px;color:var(--navy);margin-bottom:6px;}
.legal-hero .legal-updated{font-size:11.5px;color:var(--muted);}
.legal-body{padding:10px 0 50px;}
.legal-body .wrap{max-width:640px;}
.legal-card{
  background:var(--white);border:1px solid var(--line);border-radius:18px;
  padding:26px 22px;box-shadow:0 10px 30px rgba(26,43,76,.06);
}
.legal-card h2{font-size:16px;color:var(--navy);margin:26px 0 8px;}
.legal-card h2:first-child{margin-top:0;}
.legal-card p{font-size:13.5px;color:#4a4438;line-height:1.7;margin-bottom:10px;}
.legal-card ul{margin:0 0 10px 18px;}
.legal-card li{font-size:13.5px;color:#4a4438;line-height:1.7;margin-bottom:5px;}
.legal-card b{color:var(--navy);}
.legal-card a{color:var(--orange-dark);font-weight:700;}
.legal-note{
  display:flex;gap:10px;align-items:flex-start;background:var(--cream);border:1px solid var(--line);
  border-radius:12px;padding:12px 14px;margin:16px 0;font-size:12.5px;color:#4a4438;line-height:1.6;
}
.legal-note [data-lucide]{width:16px;height:16px;color:var(--orange-dark);flex:none;margin-top:1px;}

/* STICKY BOTTOM BAR */
.sticky-bar{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);z-index:50;
  width:100%;max-width:var(--frame);
  background:var(--white);border-top:1px solid var(--line);
  padding:10px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  box-shadow:0 -10px 30px rgba(26,43,76,.12);
}
.sticky-bar .sinfo{display:flex;flex-direction:column;}
.sticky-bar .sprice{color:var(--orange-dark);font-weight:800;font-size:15px;}
.sticky-bar .sold{font-size:10.5px;color:var(--muted);}
.sticky-bar .btn-buy{width:auto;flex:none;padding:12px 20px;font-size:13.5px;}

/* ================================================================
   DESKTOP — everything above this line is the mobile-native layout
   and stays untouched below this breakpoint. This block only ADDS
   wider-screen treatment; it never overrides the mobile experience.
   ================================================================ */
@media(min-width:860px){
  :root{--frame:1180px;}

  .hero{padding:40px 0 48px;}
  .hero-grid{
    display:grid;grid-template-columns:1.05fr 440px;column-gap:56px;row-gap:0;
    align-items:start;max-width:1180px;
  }
  .hero-rating,h1.title,.hero-cta{grid-column:1;}
  .hero-visual{grid-column:2;grid-row:1/5;align-self:center;}
  .hero-rating{padding:4px 10px;}
  .hero-rating-text{font-size:9.5px;}
  .stars [data-lucide]{width:12px;height:12px;}

  .hero-cta .btn{width:auto;min-width:260px;}

  /* plenty of horizontal room on desktop — a single relaxed row reads cleaner than the mobile pill grid */
  .trust-row{
    display:flex;flex-wrap:nowrap;justify-content:center;gap:20px;max-width:none;
  }
  .trust-row span{
    background:none;border:none;box-shadow:none;padding:0;font-size:12.5px;color:var(--muted);font-weight:600;
  }
  .trust-row span:last-child:nth-child(odd){grid-column:auto;}

  section{padding:80px 0;}
  h2.section-title{font-size:32px;}
  .section-lede{font-size:15px;max-width:600px;}

  .msg-grid{columns:3;}

  .review-featured{max-width:420px;margin-left:auto;margin-right:auto;}
  .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .feat-card{flex-direction:column;align-items:flex-start;text-align:left;padding:24px;}
  .feat-icon{margin-bottom:16px;}

  .story-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
  .story-copy p{font-size:16px;}

  .review-card{flex:0 0 320px;max-width:320px;}

  .g-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;}

  .final-cta-inner{max-width:560px;margin:0 auto;}
  .final-cta .btn{width:auto;}

  .sticky-bar{display:none;} /* header CTA is already visible and reachable on desktop */
  body{padding-bottom:0;}
}

@media(min-width:860px) and (max-width:1219px){
  .hero-grid{max-width:100%;}
}

/* ================= SHARED: 6-digit code input row (vault + admin gate) ================= */
.code-row{display:flex;gap:8px;justify-content:center;}
.code-box{
  width:44px;height:52px;text-align:center;font-size:22px;font-weight:800;color:var(--navy);
  border:1.5px solid var(--line);border-radius:10px;background:var(--cream);
  font-variant-numeric:tabular-nums;
}
.code-box:focus{outline:none;border-color:var(--orange);background:var(--white);}
.code-box.shake{animation:codeShake .4s ease;}
@keyframes codeShake{
  0%,100%{transform:translateX(0);}
  20%,60%{transform:translateX(-6px);}
  40%,80%{transform:translateX(6px);}
}
.code-error{color:var(--danger);font-size:13px;font-weight:600;text-align:center;min-height:18px;margin-top:12px;}
.code-lockout{
  text-align:center;font-size:12.5px;color:#8a5a00;background:#fff3d9;border:1px solid #f3d99a;
  border-radius:10px;padding:10px 12px;margin-top:12px;
}

/* ================= PACKAGE PICKER — "Choose Your Bundle" ================= */
.packages{background:var(--white);}
.pkg-icon{
  width:36px;height:36px;border-radius:10px;flex:none;
  background:linear-gradient(135deg,var(--orange),var(--orange-dark));
  display:flex;align-items:center;justify-content:center;
}
.pkg-icon [data-lucide]{width:18px;height:18px;color:#fff;}
.pkg-cta{margin-top:8px;}
.pkg-name{display:flex;align-items:center;gap:10px;}
.pkg-name > div:last-child{display:flex;flex-direction:column;gap:1px;min-width:0;}
.pkg-name b{font-size:14px;color:var(--navy);line-height:1.3;}
.pkg-name span{font-size:11.5px;color:var(--muted);line-height:1.3;}

/* ---- checkbox-based picker (Financial / Inventory / Payroll) ---- */
.pkg-check-grid{
  display:flex;flex-direction:column;gap:2px;margin-top:6px;position:relative;
  border:2.5px solid transparent;border-radius:20px;transition:border-color .25s ease,background .25s ease,padding .25s ease,box-shadow .25s ease;
}
.pkg-plus{display:flex;align-items:center;justify-content:center;color:var(--muted);padding:2px 0;}
.pkg-plus [data-lucide]{width:15px;height:15px;}
.pkg-plus-payroll{color:var(--orange-dark);}

/* Progressive box-enclosure: financial+inventory get their own teal box the
   moment both are checked; adding payroll draws a second, bigger gold box
   around the whole grid (pair box nests inside it) — see render()'s
   boxed / boxed-gold toggling in js/script.js. */
.pkg-group{position:relative;}
.pkg-group-pair{
  display:flex;flex-direction:column;gap:2px;border-radius:16px;
  border:2px solid transparent;transition:border-color .25s ease,background .25s ease,padding .25s ease,margin .25s ease;
}
.pkg-group-pair.boxed{
  border-color:var(--success);background:rgba(30,142,90,.05);
  padding:16px 10px 10px;margin:14px 0 4px;
}
.pkg-check-grid.boxed-gold{
  border-color:var(--gold);background:linear-gradient(180deg,var(--gold-bg),rgba(255,247,224,.35));
  padding:30px 12px 14px;box-shadow:0 16px 38px rgba(184,134,11,.28);
}

.pkg-group-badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;
  font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap;
  box-shadow:0 4px 10px rgba(0,0,0,.18);z-index:2;
  animation:pkgBadgePop .25s ease;
}
.pkg-group-badge[hidden]{display:none;}
.pkg-group-badge-teal{background:linear-gradient(135deg,var(--success),#1a9e5c);color:#fff;}
.pkg-group-badge-gold{
  top:-16px;font-size:11.5px;padding:7px 18px;
  background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#fff;
  box-shadow:0 10px 24px rgba(184,134,11,.45);
}
.pkg-badge-gold-text{display:flex;align-items:center;gap:5px;}
.pkg-badge-gold-text [data-lucide]{width:13px;height:13px;}
.pkg-badge-save-pill{
  background:rgba(255,255,255,.3);padding:2px 8px;border-radius:12px;font-size:9px;font-weight:800;
}
.pkg-group-badge-gold .pkg-badge-save-pill{font-size:10px;}
@keyframes pkgBadgePop{
  from{opacity:0;transform:translateX(-50%) scale(.8);}
  to{opacity:1;transform:translateX(-50%) scale(1);}
}

.pkg-check-card{
  position:relative;display:flex;flex-direction:column;gap:9px;cursor:pointer;user-select:none;
  background:var(--cream);border:2px solid var(--line);border-radius:16px;
  padding:14px 16px;transition:.15s ease;
}
.pkg-check-card.selected{border-color:var(--success);background:var(--white);box-shadow:0 10px 24px rgba(30,142,90,.12);}
.pkg-check-card-payroll{opacity:.6;position:relative;}
.pkg-check-card-payroll.unlocked{opacity:1;}
.pkg-check-card-payroll:not(.unlocked){cursor:not-allowed;}
/* Payroll is the piece that completes the 5-in-1 — give it its own gold
   identity once checked, distinct from the green used everywhere else, so
   the flagship combination visually stands out instead of reading as "just
   another checkbox." */
.pkg-check-card-payroll.selected{
  border-color:var(--gold-light);background:var(--gold-bg);
  box-shadow:0 10px 26px rgba(184,134,11,.22);
}
.pkg-check-card-payroll.selected .pkg-status-badge.included{background:var(--gold-bg);color:var(--gold);}
.pkg-checkbox{position:absolute;opacity:0;width:1px;height:1px;}

.pkg-check-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.pkg-icon-payroll{background:linear-gradient(135deg,var(--navy),var(--navy-light));}
.pkg-check-card-payroll.selected .pkg-icon-payroll{background:linear-gradient(135deg,var(--gold),var(--gold-light));}

/* flex:none + white-space:nowrap here used to force this column past the
   card's right edge once the gold box-enclosure padding narrowed the card
   (real overflow, not a rendering artifact — confirmed via screenshot).
   flex-shrink + wrap lets the note fall to 2 lines instead of spilling out. */
.pkg-price{text-align:right;flex:0 1 auto;min-width:0;max-width:44%;display:flex;flex-direction:column;gap:1px;}
.pkg-price .now{font-size:15px;font-weight:800;color:var(--orange-dark);white-space:nowrap;}
.pkg-price-note{font-size:9.5px;color:var(--gold);font-weight:700;white-space:normal;line-height:1.25;}
.pkg-price .was{font-size:11px;font-weight:600;color:var(--muted);text-decoration:line-through;white-space:nowrap;}
.pkg-price .was[hidden]{display:none;}

/* Cross-promotion badge — "you're already halfway to the bundle" — appears
   on the OTHER tracker card the moment just one is checked, same pattern as
   the KitaAgad Payroll fork's checkout xsell cards. Positioned top-left so
   it doesn't collide with the status badge (top-right via flex order). */
.pkg-corner-badge{
  position:absolute;top:-10px;left:14px;z-index:2;
  background:linear-gradient(135deg,var(--gold),#D4A017);color:#fff;
  font-size:10px;font-weight:800;letter-spacing:.2px;text-transform:uppercase;
  padding:3px 10px;border-radius:20px;box-shadow:0 4px 10px rgba(184,134,11,.35);
}
.pkg-corner-badge[hidden]{display:none;}

.pkg-status-badge{
  display:inline-flex;align-items:center;gap:5px;align-self:flex-start;
  font-size:10.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;
  padding:3px 10px;border-radius:20px;transition:.15s ease;
}
.pkg-status-badge [data-lucide]{width:10px;height:10px;}
.pkg-status-badge.included{background:var(--success-light);color:var(--success);}
.pkg-status-badge.not-included{background:#F5EFE3;color:var(--muted);}

.pkg-summary{
  margin-top:14px;background:linear-gradient(135deg,var(--navy),var(--navy-light));
  border-radius:16px;padding:16px 18px;color:#fff;
  display:flex;flex-direction:column;gap:10px;
  transition:background .2s ease;
}
.pkg-summary-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 14px;}
.pkg-summary.gold{background:linear-gradient(135deg,var(--gold),var(--gold-light));}
.pkg-summary.gold .pkg-summary-save{color:#fff;}
.pkg-summary.gold .pkg-summary-price .now{color:var(--navy);}
.pkg-summary.gold .pkg-summary-price .was{color:rgba(26,43,76,.55);}
.pkg-summary.gold .pkg-summary-list{border-top-color:rgba(26,43,76,.2);}
.pkg-summary.gold .pkg-summary-list li{color:var(--navy);}
.pkg-summary.gold .pkg-summary-list li [data-lucide]{color:var(--navy);}

/* Itemized "what you get" list — grows with the cart. Reinforces value at
   the exact moment the buyer is deciding, not just a price swap. */
.pkg-summary-list{
  list-style:none;margin:0;padding-top:10px;border-top:1px solid rgba(255,255,255,.18);
  display:flex;flex-direction:column;gap:5px;
}
.pkg-summary-list li{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:#fff;}
.pkg-summary-list li [data-lucide]{width:13px;height:13px;color:var(--yellow);flex:none;}
.pkg-nudge{
  display:flex;align-items:center;justify-content:center;gap:6px;width:100%;
  margin-top:8px;padding:9px 12px;border:none;border-radius:12px;cursor:pointer;
  background:var(--gold-bg);color:var(--gold);font-weight:700;font-size:12.5px;
  border:1.5px dashed var(--gold-light);transition:background .15s ease;
}
.pkg-nudge[hidden]{display:none;}
.pkg-nudge:hover{background:#FFF0C2;}
.pkg-nudge b{color:var(--gold);}
.pkg-nudge [data-lucide]{width:14px;height:14px;}
.pkg-summary-title{font-size:14.5px;font-weight:800;}
.pkg-summary-save{font-size:11.5px;color:var(--yellow);font-weight:700;margin-top:2px;}
.pkg-summary-price{display:flex;align-items:baseline;gap:8px;flex:none;}
.pkg-summary-price .was{font-size:13px;color:rgba(255,255,255,.55);text-decoration:line-through;}
.pkg-summary-price .now{font-size:23px;font-weight:900;color:var(--yellow);}

@media(min-width:860px){
  .pkg-check-grid{flex-direction:row;align-items:stretch;}
  .pkg-check-card{flex:1;}
  .pkg-plus{padding:0 4px;}
  .pkg-group-pair{flex-direction:row;flex:2 1 0;align-items:stretch;}
  .pkg-group-pair.boxed{margin:0 4px 0 0;padding:20px 10px 10px;}
}

/* ---- checkout single-select package list (radio behavior, not checkboxes) ---- */
.pkg-list{display:flex;flex-direction:column;gap:10px;margin-bottom:4px;}
.pkg-row{
  position:relative;text-align:left;width:100%;cursor:pointer;font-family:inherit;
  background:var(--cream);border:2px solid var(--line);border-radius:14px;
  padding:13px 14px;display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  transition:.15s ease;
}
.pkg-row.selected{border-color:var(--orange);background:var(--white);box-shadow:0 10px 24px rgba(249,115,22,.14);}

/* Deliberately a CSS-only ::after dot, not a lucide <i>/<svg> icon — see the
   HTML comment above #checkout-pkg-grid for why an icon-based radio state
   silently breaks here (lucide swaps <i> for <svg> at render time, and any
   opacity rule keyed to the original tag stops matching). This can never
   have that failure mode: it's one element, no icon swap involved. */
.pkg-radio-dot{
  width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex:none;
  position:relative; background:var(--white);
}
.pkg-row.selected .pkg-radio-dot{border-color:var(--orange);}
.pkg-radio-dot::after{
  content:"";position:absolute;inset:4px;border-radius:50%;background:var(--orange);
  opacity:0;transition:opacity .15s;
}
.pkg-row.selected .pkg-radio-dot::after{opacity:1;}

.pkg-row-info{display:flex;flex-direction:column;flex:1;min-width:0;}
.pkg-row-info b{font-size:14px;color:var(--navy);}
.pkg-row-sub{font-size:11.5px;color:var(--muted);}
.pkg-row-price{flex:none;text-align:right;}
.pkg-row-price .now{font-size:17px;font-weight:800;color:var(--orange-dark);}
.pkg-row-price .was{font-size:11px;color:var(--muted);text-decoration:line-through;display:block;}

.pkg-row-badge{
  position:absolute;top:-9px;left:14px;background:var(--orange);color:#fff;
  font-size:9.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;
  padding:2.5px 9px;border-radius:20px;box-shadow:0 4px 10px rgba(249,115,22,.3);
  /* Long text (e.g. "All-In-One System Sale Bundle") + this pill's fixed
     left position + the separate .pkg-save-badge pinned at the row's right
     edge meant nothing stopped the two from colliding/overflowing the card
     on a narrow phone — confirmed via screenshot, not just a theoretical
     risk. Constrain the width and let it wrap instead. */
  max-width:calc(100% - 96px);white-space:normal;line-height:1.25;text-align:center;
}
.pkg-row-badge-dark{background:var(--navy);box-shadow:0 4px 10px rgba(26,43,76,.3);}
.pkg-row-badge-gold{background:linear-gradient(135deg,var(--gold),var(--gold-light));box-shadow:0 4px 10px rgba(184,134,11,.4);}

/* The flagship tier gets gold treatment even before it's selected — subtle
   ring + tint at rest, full gold once picked — so it visually outranks the
   other three rows instead of blending in until clicked. */
.pkg-row-gold{border-color:var(--gold-light);background:var(--gold-bg);padding-top:26px;}
.pkg-row-gold .pkg-row-price .now{color:var(--gold);}
.pkg-row-gold .pkg-radio-dot{border-color:var(--gold-light);}
.pkg-row-gold .pkg-radio-dot::after{background:var(--gold);}
.pkg-row-gold.selected{
  border-color:var(--gold);background:var(--white);
  box-shadow:0 12px 28px rgba(184,134,11,.28);
}
.pkg-row-gold.selected .pkg-radio-dot{border-color:var(--gold);}
.pkg-row-gold .pkg-icon-payroll{background:linear-gradient(135deg,var(--gold),var(--gold-light));}
.pkg-row-gold .pkg-inc-save{color:var(--gold);}
.pkg-row-gold .pkg-inc-save [data-lucide]{color:var(--gold);}
.pkg-save-badge{
  position:absolute;top:-9px;right:14px;background:var(--success);color:#fff;
  font-size:9.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;
  padding:2.5px 9px;border-radius:20px;box-shadow:0 4px 10px rgba(30,142,90,.35);
}

/* Only the selected row's list is un-hidden (js/checkout.js toggles this) —
   unselected rows stay compact so the picker reads as "pick one," not a
   wall of every package's full feature list stacked on top of each other. */
.pkg-included{
  width:100%;display:flex;flex-direction:column;gap:5px;
  margin-top:8px;padding-top:10px;border-top:1px dashed var(--line);
}
.pkg-included[hidden]{display:none;}
.pkg-inc-item{display:flex;align-items:center;gap:6px;font-size:12px;color:#514b42;}
.pkg-inc-item [data-lucide]{width:13px;height:13px;color:var(--success);flex:none;}
.pkg-inc-save{color:var(--orange-dark);font-weight:700;}
.pkg-inc-save [data-lucide]{color:var(--orange-dark);}
.pkg-nudge-inline{
  display:flex;align-items:center;justify-content:center;gap:5px;margin-top:10px;
  padding:8px 10px;border-radius:10px;border:1.5px dashed var(--gold-light);
  background:var(--gold-bg);color:var(--gold);font-weight:700;font-size:11.5px;cursor:pointer;
}
.pkg-nudge-inline:hover{background:#FFF0C2;}
.pkg-nudge-inline b{color:var(--gold);}
.pkg-nudge-inline [data-lucide]{width:13px;height:13px;}