: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;
  /* Teal. The files-muna FUNNEL was removed on 2026-09-09, but the vault's
     locked view is deliberately kept alive until the last outstanding
     reservation link expires (2026-10-08) so those buyers can still pay — see
     CLAUDE.md. These tokens exist for that view and can go with it. */
  --fmbb:#0F5D51;
  --fmbb-deep:#0A4A40;
  --fmbb-tint:#E7F4F0;
  --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;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---- 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(11px,2.8vw,14px);color:var(--navy);font-weight:600;white-space:nowrap;}
.hero-rating-text b{color:var(--orange-dark);font-size:clamp(12px,3.1vw,15px);}

/* 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);}

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 */
/* 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;}

/* ══════════ the tap-to-play facade ══════════
   Slide 0 is the demo video. It ships as an ordinary poster webp like every
   other slide and js/script.js injects the iframe only on click, so the hero's
   LCP stays an image and a visitor who never presses play never downloads a
   third-party player at all.

   This REPLACES the muted-autoplay build (2026-08-13 → 2026-09-08). If you are
   about to reinstate autoplay, know what it costs: the Bunny player bundle
   loaded on every single landing pageview, and `muted=true` was load-bearing
   because every browser blocks unmuted autoplay — so the video was silent
   anyway. The facade lets it start WITH sound, on a real tap.

   ⚠️ vercel.json's CSP must keep `frame-src https://iframe.mediadelivery.net`.
   Without it the iframe is blocked with NO visible error — the poster simply
   vanishes on click and nothing appears. Check read_console_messages, don't
   eyeball it. */
.gallery-play{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;width:100%;height:100%;
  border:0;padding:0;cursor:pointer;
  background:linear-gradient(180deg,rgba(26,43,76,.06),rgba(26,43,76,.44));
  -webkit-tap-highlight-color:transparent;
}
/* `.gallery-play` sets its own display, so the UA's [hidden] rule ties on
   specificity and loses on source order — without this the button renders over
   every image slide. Same class of bug as .field-error / .order-row before it. */
.gallery-play[hidden]{display:none;}
.gp-ring{
  display:grid;place-items:center;
  width:72px;height:72px;border-radius:50%;
  background:var(--yellow,#FFD24C);color:var(--navy);
  box-shadow:0 10px 30px rgba(26,43,76,.35);
  transition:transform .18s ease, box-shadow .18s ease;
}
.gp-ring [data-lucide]{width:28px;height:28px;margin-left:3px;/* optical centring of the ▶ */}
.gp-lab{
  font-weight:800;font-size:.82rem;letter-spacing:.02em;
  color:#fff;text-shadow:0 1px 10px rgba(26,43,76,.65);
}
.gallery-play:hover .gp-ring{transform:scale(1.07);box-shadow:0 14px 38px rgba(26,43,76,.45);}
.gallery-play:focus-visible{outline:3px solid var(--yellow,#FFD24C);outline-offset:-4px;}

.gallery-embed{position:absolute;inset:0;z-index:4;background:#000;}
.gallery-embed[hidden]{display:none;}
.gallery-embed iframe{width:100%;height:100%;border:0;display:block;}

@media (prefers-reduced-motion:reduce){
  .gallery-play:hover .gp-ring{transform:none;}
  .gp-ring{transition:none;}
}

.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;}

/* One line of Taglish under the strip saying what the slide actually proves.
   `min-height` reserves both lines so stepping through the gallery never
   shifts the CTA underneath it. */
.gallery-cap{
  margin:9px 2px 0;font-size:.85rem;line-height:1.55;color:var(--muted);
  text-align:left;min-height:2.6em;
}

/* 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:300px;margin:0 auto;background:var(--white);border:1.5px solid rgba(45,138,69,.3);
  border-radius:14px;padding:7px 12px;box-shadow:0 10px 24px rgba(26,43,76,.06);
  text-align:center;
}
.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:center;margin-top:4px;}

/* compact objection-killer FAQ, right under the hero CTA — same 3 questions
   that live in the full FAQ near the bottom, surfaced here so a skeptical
   visitor doesn't have to scroll the whole page to get unblocked */
.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;}

/* summarized, scannable feature checklist — one card per group, tight rows,
   no per-item borders/tooltips (replaced the old bordered-card-per-item +
   hover-tooltip layout, which was too much visual noise to scan quickly) */
.feature-list-card{
  background:var(--white);border:1px solid var(--line);border-radius:16px;
  padding:14px 16px 6px;margin-bottom:12px;
}
.flc-label{
  display:block;font-size:10.5px;font-weight:800;color:var(--orange-dark);
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;
}
/* deliverables list (tightened 2026-08-06, expanded to real sub-items
   2026-08-06) — 3 grouped rows (Sheets / PDF Guides / Free Bonus), each
   with a short sub-list of the actual files inside, instead of either a
   flat 7-item checklist or a single vague summary line per row. Replaces
   the old "7 Tabs" checklist + "Protected Formulas" callout entirely —
   redundant with the tier-compare section right after this one. */
.deliverables{display:flex;flex-direction:column;gap:4px;}
.deliv-row{display:flex;align-items:flex-start;gap:12px;padding:12px 2px;}
.deliv-row + .deliv-row{border-top:1px dashed var(--line);}
.deliv-icon{
  width:38px;height:38px;border-radius:11px;flex:none;margin-top:1px;
  background:linear-gradient(135deg,var(--orange),var(--orange-dark));
  display:flex;align-items:center;justify-content:center;
}
.deliv-icon [data-lucide]{width:18px;height:18px;color:#fff;}
.deliv-copy{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0;}
.deliv-copy b{font-size:13px;color:var(--navy);}
.deliv-sublist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;}
.deliv-sublist li{font-size:11.5px;color:var(--muted);line-height:1.4;padding-left:13px;position:relative;}
.deliv-sublist li::before{content:'';position:absolute;left:0;top:6px;width:5px;height:5px;border-radius:50%;background:var(--orange);}
.deliv-row.deliv-bonus .deliv-icon{background:linear-gradient(135deg,#2d8a45,#1f6b34);}
.deliv-row.deliv-bonus .deliv-sublist li::before{background:#2d8a45;}

/* ================= TIER COMPARE — Base vs Tier 2 =================
   The old tier-cards pricing-card picker (2026-08-06) was removed
   2026-08-13 — redundant once the .cmp-table below carries name/price/
   badge in its own header row. .tier-badge survives because the table
   header reuses it (.cmp-th-flagship .tier-badge); .ci/.ci-check/.ci-warn/
   .ci-x survive because they're the shared icon-sprite system used
   throughout this section (and .tier-value-pill below), not specific to
   the cards that got deleted. */
.tier-compare{background:var(--cream);}
.tier-badge{
  display:inline-block;background:linear-gradient(135deg,#B8860B,#D4A017);color:#fff;
  font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;
  padding:4px 10px;border-radius:20px;box-shadow:0 4px 10px rgba(184,134,11,.35);margin-bottom:8px;
}

/* custom icon sprite (ci-check/ci-warn/ci-x) — see index.html's inline
   <symbol> defs. Self-contained, theme-colored via currentColor, crisp at
   any size — replaces both lucide and raw ✅/❌/⚠️ emoji for this section
   (emoji glyph rendering varies wildly across mobile OS/browser combos,
   which is what made the old comparison table look broken on mobile). */
.ci{width:16px;height:16px;flex:none;display:inline-block;vertical-align:-3px;}
.ci-check{color:#2d8a45;}
.ci-warn{color:#c98a00;}
.ci-x{color:var(--danger);}

/* ================= COMPARISON TABLE — always side-by-side (2026-08-13) =================
   Replaces the FAQ-accordion differentiator block above (2026-08-06 version,
   which itself replaced an even earlier grid/table — see CHANGELOG). Back to
   a real table by request, but built to dodge the reason the *old* table got
   ripped out: this one never needs a 520px min-width or horizontal scroll.
   It's a real <table> (this genuinely is tabular data — a screen reader gets
   real header/row semantics for free), table-layout:fixed with 3 fixed-%
   columns sized to fit inside the 404px mobile-frame content width (440px
   frame − 18px×2 .wrap padding) all the way down to a 320px phone. Labels
   and value text are allowed to WRAP (no nowrap/ellipsis/overflow anywhere)
   instead of being clipped or pushed into a scroll container — "always 100%
   seen even if smaller" means the row grows taller, never that content gets
   hidden. Flagship (Tier 2) column stays visually distinct via a flat gold
   tint + side borders running the full column height, not per-cell cards —
   at this cell size a bordered card-per-cell reads as visual noise, a flat
   column tint reads instantly as "this column is the highlighted one" (same
   pattern as the Ultimate Bookkeeping Planner reference table this was
   modeled on). Corner rounding is handled once, on the .cmp-table-wrap
   overflow:hidden wrapper — cleaner than chasing first/last-row corner
   classes that would silently break the moment a row is added or removed. */
.cmp-table-wrap{
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  margin:18px 0 14px;background:var(--white);
}
.cmp-table{width:100%;border-collapse:collapse;table-layout:fixed;}
.cmp-table col.cmp-col-feat{width:42%;}
.cmp-table col.cmp-col-a,.cmp-table col.cmp-col-b{width:29%;}
.cmp-table th,.cmp-table td{
  padding:7px 5px;border-bottom:1px dashed var(--line);
  text-align:center;vertical-align:middle;
  font-size:10px;line-height:1.35;color:#4a4438;
  word-break:break-word;overflow-wrap:break-word;
}
.cmp-table tbody tr:nth-child(even){background:rgba(26,43,76,.02);}
.cmp-table tbody tr:last-child th,.cmp-table tbody tr:last-child td{border-bottom:none;}
.cmp-table th[scope="row"]{
  text-align:left;font-weight:700;font-size:10px;color:var(--navy);
  border-right:1px solid var(--line);padding-left:10px;
}
.cmp-thead th{border-bottom:1px solid var(--line);vertical-align:top;padding:12px 6px 10px;text-align:center;}
.cmp-th-feat{border-right:1px solid var(--line);}
.cmp-th-tag{display:block;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-bottom:3px;}
.cmp-th-name{display:block;font-size:12.5px;font-weight:800;color:var(--navy);margin-bottom:2px;}
.cmp-th-price{display:block;font-size:15px;font-weight:800;color:var(--navy);}
/* Regular price of Tier 2 — a real pre-launch price, not a decorative anchor.
   Mirrors checkout.html's .tier-price-old; keep the two numbers in sync. */
.cmp-th-price-old{display:block;font-size:10.5px;font-weight:700;color:var(--muted);text-decoration:line-through;}
.cmp-th-flagship .tier-badge{margin-bottom:6px;padding:3px 8px;font-size:9px;}
.cmp-th-flagship .cmp-th-tag{color:#B8860B;}
.cmp-th-flagship .cmp-th-price{color:#B8860B;font-size:16px;}
/* flat column tint — every flagship cell shares it, so consecutive cells
   with no gap between them (border-collapse) read as one continuous
   highlighted column rather than separate tinted boxes. A cell's own
   background always paints over its row's background per the CSS table
   background-layering order (table < row-group < row < cell) regardless
   of selector specificity, so this stays a flat gold column unbroken by
   the tbody tr:nth-child(even) zebra-striping above — no !important
   needed to win that fight. */
.cmp-col-b-cell{background:rgba(184,134,11,.07);border-left:1px solid rgba(184,134,11,.35);border-right:1px solid rgba(184,134,11,.35);}
.cmp-table .ci{width:13px;height:13px;flex:none;vertical-align:-2px;}
.cmp-legend{display:flex;align-items:center;gap:14px;justify-content:center;margin-bottom:10px;font-size:10.5px;color:var(--muted);flex-wrap:wrap;}
.cmp-legend span{display:flex;align-items:center;gap:4px;}

/* Section header rows inside the comparison table (2026-08-14). The table
   grew from a flat 29-row list into 5 labelled groups (BIR & Tax, Labor Code
   & DOLE, Contributions, Records & Payroll Ops, Reports & Output) so a buyer
   hunting for one specific form number can find it by section instead of
   reading every row. Redundant rows were merged at the same time — the four
   separate ✗/✓ report rows became one, Pay Type + Day Factor became one, and
   ledger columns + row capacity became one. */
/* The border MUST be a real solid navy border, not `none`. The table is
   `border-collapse:collapse`, so a cell with no border loses every edge
   conflict to its neighbours — the gold .cmp-col-b-cell left/right borders
   and the dashed row borders above and below then paint straight across the
   navy bar, which reads as a stripey rendering glitch. Matching the fill
   colour makes this cell win the collapse and the bar renders flat. */
.cmp-section th{
  background:var(--navy) !important;color:#fff;text-align:left;
  font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;
  padding:7px 10px !important;border:1px solid var(--navy) !important;
}
/* The plain-language gloss under a form number or law — this is what makes a
   row like "1604-C" mean something to a buyer who doesn't already know it. */
.cmp-row-sub{
  display:block;font-size:9.5px;font-weight:500;color:var(--muted);
  line-height:1.3;margin-top:2px;text-transform:none;letter-spacing:0;
}

.tier-value-pill{
  display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;
  background:linear-gradient(135deg,#B8860B,#D4A017);color:#fff;font-size:13px;font-weight:700;
  border-radius:12px;padding:12px 16px;margin-bottom:8px;
}
.tier-value-pill [data-lucide]{width:16px;height:16px;flex:none;}
.tier-value-pill b{font-weight:800;}
.tier-value-note{font-size:10.5px;color:var(--muted);text-align:center;}

/* 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;}
.helpful-btn.bump .hcount{animation:hbump .3s ease;}
@keyframes hbump{0%{transform:scale(1);}40%{transform:scale(1.35);}100%{transform:scale(1);}}

/* ================= TESTIMONIAL GALLERY — real chat screenshots, right after hero =================
   Horizontal scroll-snap "wall of screenshots", same UX pattern as .review-grid (chevron-driven,
   no visible scrollbar) but each card is a real Messenger screenshot instead of a text card. Cards
   alternate a slight tilt (polaroid/wall-of-love feel) and straighten + lift on hover/tap. */
.testi-gallery{background:var(--cream);padding-bottom:36px;}
.testi-gallery .wrap{padding-bottom:22px;}
.testi-scroller{
  display:flex;gap:16px;overflow-x:auto;
  padding:10px 18px 14px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
}
.testi-scroller::-webkit-scrollbar{display:none;}
.testi-track{display:flex;gap:16px;}
.testi-card{
  position:relative;flex:0 0 224px;max-width:224px;scroll-snap-align:start;
  background:var(--white);border-radius:16px;padding:8px 8px 10px;
  box-shadow:0 14px 30px rgba(26,43,76,.14);border:1px solid var(--line);
  transform:rotate(var(--tilt,0deg));
  transition:transform .25s ease, box-shadow .25s ease;
  animation:cardIn .35s ease both;
}
.testi-track .testi-card:nth-child(6n+1){--tilt:-2.5deg;}
.testi-track .testi-card:nth-child(6n+2){--tilt:2deg;}
.testi-track .testi-card:nth-child(6n+3){--tilt:-1.5deg;}
.testi-track .testi-card:nth-child(6n+4){--tilt:2.5deg;}
.testi-track .testi-card:nth-child(6n+5){--tilt:-2deg;}
.testi-track .testi-card:nth-child(6n+6){--tilt:1.5deg;}
.testi-card:hover{transform:rotate(0deg) translateY(-5px);box-shadow:0 20px 40px rgba(26,43,76,.22);z-index:1;}
.testi-card img{width:100%;border-radius:11px;display:block;}
.testi-badge{
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
  background:linear-gradient(135deg,var(--orange),var(--orange-dark));color:#fff;
  font-size:10px;font-weight:800;letter-spacing:.2px;padding:4px 10px;border-radius:20px;
  box-shadow:0 4px 10px rgba(234,88,12,.35);
}
.testi-badge [data-lucide]{width:11px;height:11px;}

/* 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;}

/* 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:14px;}
  .hero-rating-text b{font-size:15px;}
  .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;}

  .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;}

  .testi-scroller{justify-content:center;flex-wrap:wrap;overflow:visible;padding:14px 0 10px;}
  .testi-track{flex-wrap:wrap;justify-content:center;max-width:1040px;margin:0 auto;}
  .testi-card{flex:0 0 260px;max-width:260px;}

  .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;
}


/* Comparison table — the Automatic BIR Forms add-on cell (2026-09-05).
   Deliberately NOT a plain check: it is the one row where Tier 2 unlocks a
   PURCHASE rather than a feature, and showing a tick there would imply it is
   included in the ₱999. */
/* Automatic BIR Forms is AVAILABLE on Command Center, not INCLUDED in it.
   The check answers "can this workbook do it?" (which is what the column is
   asking) and the price chip stops that check from reading as "free" - it is a
   separate PHP999 purchase. Never ship the check on its own here: a bare tick
   in a priced comparison column is a claim that it is bundled, on a page whose
   next click is a payment. The row's sub-line repeats the same thing in words. */
.cmp-yes-addon{
  display:inline-flex;align-items:center;justify-content:center;
  gap:6px;flex-wrap:wrap;
}
.cmp-yes-addon .ci{vertical-align:0;}

.cmp-addon{
  display:inline-block;padding:3px 9px;border-radius:999px;
  font-size:11px;font-weight:800;letter-spacing:.01em;
  color:#7c2d12;background:#ffedd5;border:1px solid #fdba74;white-space:nowrap;
}