/* checkout.css — builds on top of styles.css (shared brand tokens, buttons, starburst)

   REBUILT 2026-08-14: the 3-step wizard is gone (progress track, locked/
   completed step cards, the collapsible summary sidebar) and the page is now
   one scrollable order summary with a sticky Place Order bar, in the shape
   PH buyers already know from TikTok Shop. Every `.step-*`, `.progress-*`
   and `.summary-toggle` rule that used to live here was deleted with it —
   don't resurrect them piecemeal, they have no markup left. */

/* Sticky footer bar sits over the page — the spacer + this padding are what
   keep the last card reachable above it. */
body.checkout-body{padding-bottom:132px;}
body.checkout-body.oc-paid{padding-bottom:30px;}

.checkout-header .wrap{gap:10px;}
.checkout-secure{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--navy);}
.checkout-secure [data-lucide]{width:14px;height:14px;color:var(--orange);}

.checkout-flash-strip{
  background:linear-gradient(90deg,var(--orange-dark),var(--orange));color:#fff;
  text-align:center;padding:6px 10px;font-size:12.5px;font-weight:800;letter-spacing:.3px;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.checkout-flash-strip [data-lucide]{color:var(--yellow);}

/* ================= ONE-PAGE SHELL ================= */
/* SPACING PASS (2026-08-18d) — the page had every element at 8–12px from its
   neighbour regardless of whether they were related, so rows, cards, pills
   and banners all visually mashed together. The rule now: space scales with
   how UNRELATED two things are. Cards 18px apart, groups inside a card 14px,
   rows in a list 10px, atoms inside a row 2–6px. Don't reintroduce a flat
   gap everywhere — that's what caused the complaint. */
.oc-wrap{padding-top:16px;max-width:640px;}
.oc-card{
  background:var(--white);border:1px solid var(--line);border-radius:16px;
  padding:18px;margin-bottom:18px;box-shadow:0 10px 24px rgba(26,43,76,.05);
}
.oc-card[hidden]{display:none;}
.oc-card-title{font-size:14.5px;color:var(--navy);margin-bottom:14px;}
.oc-bottom-spacer{height:8px;}

/* ---- 1. delivery / contact, top of page (TikTok puts the address here) ---- */
.oc-deliver{display:flex;align-items:flex-start;gap:12px;}
.oc-deliver[hidden]{display:none;}
.oc-deliver-icon{
  width:38px;height:38px;border-radius:10px;flex:none;
  background:linear-gradient(135deg,var(--orange),var(--orange-dark));
  display:flex;align-items:center;justify-content:center;
}
.oc-deliver-icon [data-lucide]{width:18px;height:18px;color:#fff;}
.oc-deliver-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px;}
.oc-deliver-label{font-size:12px;font-weight:800;color:var(--navy);}
.oc-deliver-label .req{color:var(--danger);}
.oc-deliver-input{
  width:100%;padding:12px 13px;border-radius:10px;border:1.5px solid var(--line);
  font-family:inherit;font-size:15px;color:var(--navy);background:var(--cream);
}
.oc-deliver-input:focus{outline:none;border-color:var(--orange);background:var(--white);}
.oc-deliver-input.is-valid{border-color:#2d8a45;background:rgba(45,138,69,.06);}
.oc-deliver-input.is-invalid{border-color:var(--danger);background:rgba(220,38,38,.05);}
.oc-deliver-name{font-size:14px;padding:10px 13px;}
.oc-deliver-ok{
  display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:#2d8a45;
}
.oc-deliver-ok[hidden]{display:none;}
.oc-deliver-ok [data-lucide]{width:14px;height:14px;flex:none;}
/* An invalid email tapped from the sticky bar has to physically pull the
   buyer back up the page — the shake is what makes that jump legible. */
.oc-deliver-shake{animation:nudgeShake .35s ease 2;}

/* ---- 2. seller strip ---- */
.oc-seller{display:flex;align-items:center;gap:8px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.oc-seller-badge{
  background:var(--navy);color:#fff;font-size:9.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.4px;padding:3px 8px;border-radius:6px;
}
.oc-seller-name{font-size:12.5px;font-weight:800;color:var(--navy);letter-spacing:.2px;}
.oc-seller-note{display:flex;align-items:center;gap:4px;font-size:10.5px;color:var(--muted);margin-left:auto;}
.oc-seller-note [data-lucide]{width:12px;height:12px;color:#2d8a45;}

/* One-time + instant access are the two objections this product has to beat —
   one chip, one line. */
.oc-instant{
  display:inline-flex;align-items:center;gap:4px;align-self:flex-start;margin-top:5px;
  background:rgba(45,138,69,.12);border:1px solid rgba(45,138,69,.28);border-radius:20px;
  padding:2px 8px;font-size:9.5px;font-weight:800;color:#2d8a45;white-space:nowrap;
}
.oc-instant [data-lucide]{width:10px;height:10px;flex:none;}
.oc-qty-chip{font-size:10.5px;color:var(--muted);margin-top:2px;}
.oc-qty-chip b{color:var(--navy);}

/* bundled-in freebie — deliberately NOT in the $ totals table (it's not a
   paid line item like the bump), just a clear "this is included" callout. */
/* ---------- AUTOMATIC BIR FORMS — special add-on (2026-09-05) ----------
   Welded under the Tier 2 card. Deliberately the loudest thing in this column
   AFTER the tier card itself and before the ladder — it is the only tier-locked
   item on the page and has to read as a different class of thing, not as a
   fourth checkbox. Navy ground (the tier card's own family) rather than the
   orange used by the ladder rows, so it reads as an extension of the tier
   above it instead of competing with the add-on list below. */
.birforms-card{
  position:relative;margin:14px 0 0;border-radius:14px;
  background:linear-gradient(135deg,var(--navy),var(--navy-light));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 6px 20px rgba(12,26,58,.22);
  overflow:hidden;
}
.bf-flag{
  display:inline-flex;align-items:center;gap:5px;
  font-size:9.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
  color:var(--navy);background:linear-gradient(90deg,#f7c948,#f0a500);
  padding:5px 10px;border-radius:0 0 9px 0;
}
.bf-flag [data-lucide]{width:11px;height:11px;}

.bf-main{display:flex;align-items:center;gap:11px;padding:12px 14px 13px;cursor:pointer;}
.bf-check{position:absolute;opacity:0;width:0;height:0;}
/* The box is the affordance — on a dark navy card a faint white outline reads
   as a disabled field rather than "tick me". Solid white fill + a gold hover
   ring makes it unmistakably clickable, and `align-self:center` keeps it
   optically level with the title now that the body is two lines, not four. */
.bf-box{
  flex:none;width:22px;height:22px;align-self:center;border-radius:6px;
  border:2px solid rgba(255,255,255,.75);background:rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,border-color .15s,transform .1s;
}
.bf-main:hover .bf-box{border-color:#f7c948;background:rgba(247,201,72,.18);}
.bf-main:active .bf-box{transform:scale(.94);}
.bf-box [data-lucide]{width:14px;height:14px;color:var(--navy);opacity:0;transition:.15s;stroke-width:3.5;}
.bf-check:checked + .bf-box{background:#f7c948;border-color:#f7c948;}
.bf-check:checked + .bf-box [data-lucide]{opacity:1;}
/* Keyboard users get the same affordance as the mouse — the input itself is
   visually hidden, so the ring has to live on its rendered proxy. */
.bf-check:focus-visible + .bf-box{outline:2px solid #f7c948;outline-offset:2px;}

.bf-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;}
.bf-title{font-size:13.5px;font-weight:900;color:#fff;line-height:1.3;}
.bf-sub2{font-weight:700;color:rgba(255,255,255,.72);font-size:11.5px;}
.bf-list{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;
  font-size:11.5px;line-height:1.4;color:rgba(255,255,255,.82);
}
.bf-list li{position:relative;padding-left:13px;}
.bf-list li::before{
  content:'';position:absolute;left:0;top:6px;width:5px;height:5px;
  border-radius:50%;background:#f7c948;
}
.bf-list b{color:#fff;}

.bf-desc{font-size:11.5px;line-height:1.5;color:rgba(255,255,255,.80);}
.bf-desc b{color:#f7c948;}

.bf-price{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;}
.bf-amt{font-size:16px;font-weight:900;color:#f7c948;line-height:1;white-space:nowrap;}
.bf-once{font-size:9.5px;font-weight:700;color:rgba(255,255,255,.62);white-space:nowrap;}

.bf-foot{
  display:flex;align-items:flex-start;gap:6px;
  padding:8px 14px 10px;font-size:10px;line-height:1.45;font-weight:600;
  color:rgba(255,255,255,.70);background:rgba(0,0,0,.18);
}
.bf-foot [data-lucide]{width:12px;height:12px;flex:none;margin-top:1px;}
.bf-foot b{color:#f7c948;}

@media (max-width:420px){
  .bf-main{flex-wrap:wrap;}
  .bf-price{width:100%;flex-direction:row;align-items:baseline;justify-content:flex-start;gap:8px;padding-left:32px;}
}

.freebie-note{
  display:flex;align-items:center;gap:7px;font-size:12px;font-weight:800;color:#2d8a45;
  background:rgba(45,138,69,.1);border:1px solid rgba(45,138,69,.25);border-radius:10px;
  padding:10px 12px;margin:16px 0 0;
}
.freebie-note [data-lucide]{width:14px;height:14px;flex:none;}

/* ---- order rows ---- */
.order-row{display:flex;align-items:flex-start;gap:12px;padding:14px;background:var(--cream);border-radius:13px;}
.order-row[hidden]{display:none;}
.order-thumb{
  width:44px;height:44px;border-radius:10px;flex:none;
  background:linear-gradient(135deg,var(--orange),var(--orange-dark));
  display:flex;align-items:center;justify-content:center;
}
.order-thumb [data-lucide]{width:20px;height:20px;color:#fff;}
.order-info{flex:1;min-width:0;display:flex;flex-direction:column;}
.order-info b{font-size:13px;color:var(--navy);line-height:1.35;}
.order-info span{font-size:11px;color:var(--muted);}
.order-price{display:flex;flex-direction:column;align-items:flex-end;line-height:1.3;flex:none;}
.order-price .op-old{font-size:11px;color:var(--muted);text-decoration:line-through;}
.order-price .op-old[hidden]{display:none;}
.order-price .op-new{font-weight:800;color:var(--navy);font-size:14px;}

/* custom icon sprite (ci-check) — see checkout.html's inline <symbol> def */
.ci{width:16px;height:16px;flex:none;display:inline-block;vertical-align:-3px;}

/* ---- TIER SELECTOR (2026-08-18d) ----
   Back to two real, side-by-side CHOICE CARDS (a "lite" version of the
   original picker) rather than a compact segmented control — the segmented
   version read as just another pill in a page already full of pills, and
   gave no clear "this is the one I picked" signal. Each card now carries an
   explicit check badge, a title, one line of what you get, and a price, so
   selection state is unmistakable at a glance. The upgrade card is
   deliberately heavier at rest (gold, crown, badge) to pull toward it. */
.tier-switch{
  display:flex;flex-direction:column;gap:10px;
  margin:16px 0 4px;
}
.tier-seg{
  position:relative;display:flex;flex-direction:column;align-items:stretch;gap:6px;width:100%;
  padding:14px 13px 13px;border:2px solid var(--line);border-radius:13px;
  background:var(--white);cursor:pointer;font-family:inherit;text-align:left;
  transition:border-color .18s, box-shadow .18s, background .18s, transform .18s;
}
.tier-seg:hover{transform:translateY(-1px);}
.tier-seg:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}
/* Explicit selection badge — the "which one did I pick" signal. */
.tier-seg::after{
  content:'';position:absolute;top:9px;right:9px;width:19px;height:19px;border-radius:50%;
  border:2px solid var(--line);background:var(--white);transition:.18s;
}
.tier-seg-check{
  position:absolute;top:9px;right:9px;width:19px;height:19px;border-radius:50%;z-index:2;
  display:flex;align-items:center;justify-content:center;color:#fff;
  opacity:0;transform:scale(.6);transition:opacity .18s, transform .18s;
}
/* The global .ci rule carries `vertical-align:-3px` for inline use, which
   pushed the glyph off-centre inside this circle. Reset it here and let flex
   do the centring. Lucide's own <svg> also needs display:block for the same
   reason. */
.tier-seg-check [data-lucide],
.tier-seg-check svg{
  display:block;vertical-align:0;width:12px;height:12px;
  stroke:#fff;stroke-width:3.5;
}
/* The Complete card has a top row (offer flag + countdown) that the Standard
   card does not, so a badge pinned at the card's own top-right sat 7.5px ABOVE
   the countdown chip beside it and read as misaligned. Only this variant moves;
   Standard's badge still aligns to its eyebrow line. Value tuned by measuring
   the badge centre against the chip centre, not guessed - re-measure if the
   chip's padding or font-size changes. */
.tier-seg-up::after,
.tier-seg-up .tier-seg-check{top:16px;}

/* ---- delta-led price while unselected ----
   The gap is the number that decides an upgrade, so it gets the type size the
   absolute price would otherwise have. */
.tier-seg.on::after{background:var(--orange);border-color:var(--orange);}
.tier-seg.on .tier-seg-check{opacity:1;transform:scale(1);}
.tier-seg.on{border-color:var(--orange);box-shadow:0 8px 20px rgba(249,115,22,.16);}

.tier-seg-eyebrow{
  display:block;font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;
  color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding-right:26px;margin-bottom:1px;
}
@media(max-width:430px){
  /* Keeps "MOST COMPLETE · THE COMPLIANT EMPLOYER" on one line at 375px. */
  .tier-seg-eyebrow{font-size:7.5px;letter-spacing:.2px;}
}
.tier-seg-name{
  display:flex;align-items:center;gap:5px;font-size:13px;font-weight:800;color:var(--navy);
  line-height:1.25;padding-right:22px;
}
.tier-seg-name [data-lucide]{width:13px;height:13px;color:#B8860B;flex:none;}
.tier-seg-sub{font-size:9.5px;color:var(--muted);line-height:1.3;}
.tier-seg-price{
  font-size:20px;font-weight:800;color:var(--navy);flex:none;text-align:right;
  display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;
}
.tier-seg-price s{font-size:11px;font-weight:600;color:var(--muted);}

/* The upgrade card — heavier at rest so the eye lands there first. */
.tier-seg-up{border-color:#E4C77A;background:linear-gradient(170deg,#FFFBEF,#FFF6DC);}
.tier-seg-up .tier-seg-eyebrow{color:#B8860B;}
.tier-seg-up .tier-seg-price{color:#8a6300;}
.tier-seg-up.on{border-color:#B8860B;box-shadow:0 10px 24px rgba(184,134,11,.26);}
.tier-seg-up.on::after{background:#B8860B;border-color:#B8860B;}
/* Badge and countdown share ONE top row in normal flow. Both used to be
   absolutely positioned and the timer sat straight on top of the ₱3,299
   anchor — the single most important number on the card. In flow they can't
   collide with anything, and the countdown is now beside the badge where it
   actually gets seen. */
.tier-seg-toprow{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding-right:26px;margin-bottom:2px;
}
.tier-seg-badge{
  background:linear-gradient(135deg,#B8860B,#D4A017);color:#fff;
  font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;
  padding:4px 9px;border-radius:20px;box-shadow:0 3px 8px rgba(184,134,11,.35);
  white-space:nowrap;flex:none;
}
/* Breathes only while NOT chosen — once the buyer says yes, it goes quiet. */
.tier-seg-up:not(.on){animation:tierSegBreathe 2.6s ease-in-out infinite;}
@keyframes tierSegBreathe{
  0%,100%{box-shadow:0 0 0 0 rgba(184,134,11,.30);}
  50%{box-shadow:0 0 0 6px rgba(184,134,11,.07);}
}
/* Overlaid on the card's bottom-right corner rather than flowing as another
   line — it's an urgency stamp, not a content row, and giving it its own line
   pushed the price block around and made the card taller than the Standard
   one beside it. Bottom-right is the only free corner (the check badge owns
   top-right). */
.tier-seg-timer{
  display:inline-flex;align-items:center;gap:4px;flex:none;
  background:#8a2b2b;color:#fff;border-radius:20px;padding:4px 9px;
  font-size:9px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.2px;
  box-shadow:0 3px 8px rgba(138,43,43,.35);
}
.tier-seg-timer b{font-size:10px;}
.tier-seg-timer[hidden]{display:none;}
.tier-seg-timer [data-lucide]{width:9px;height:9px;}

/* Morph, don't re-render: on a tier switch the product row animates in place
   (thumbnail crossfade + price settle) instead of being rebuilt, so nothing
   below it jumps. Row height is driven by content that doesn't change size,
   so the page stays anchored. */
@keyframes tierMorph{
  0%{opacity:.55;transform:translateY(-2px);}
  100%{opacity:1;transform:translateY(0);}
}
.order-row.tier-morph .order-info b,
.order-row.tier-morph .order-price{animation:tierMorph .32s cubic-bezier(.2,.9,.3,1);}
@media(prefers-reduced-motion:reduce){
  .tier-seg.tier-seg-up:not(.on),
  .order-row.tier-morph .order-info b,
  .order-row.tier-morph .order-price{animation:none;}
}
/* NOTE (2026-08-20): the old <=400px rule here forced .tier-seg to
   flex-direction:row. That was correct for the compact side-by-side segmented
   control, but the card is stacked full-width now and carries a feature list,
   a proof line and a category-anchor line — as a row those laid out
   HORIZONTALLY and ran ~290px past a 375px viewport. The cards are already
   one-per-row at every width, so no direction override is needed; only the
   head is tightened on very narrow screens. */
@media(max-width:400px){
  .tier-seg-head{gap:8px;}
  .tier-seg-name{font-size:12.5px;}
  .tier-seg-price{font-size:18px;}
}

/* ---- 4. auto-applied discounts ---- */
.oc-coupon-head{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;
}
.oc-coupon-head > span:first-child{
  display:flex;align-items:center;gap:6px;font-size:13px;font-weight:800;color:var(--navy);
}
.oc-coupon-head [data-lucide]{width:15px;height:15px;color:var(--orange);}
.oc-coupon-auto{
  font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;
  color:#2d8a45;background:rgba(45,138,69,.12);border:1px solid rgba(45,138,69,.28);
  padding:3px 8px;border-radius:20px;
}
.oc-coupon-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.oc-coupon-list li{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:12px;color:#4a4438;
}
.oc-coupon-list li b{color:#2d8a45;font-weight:800;white-space:nowrap;}

/* ---- 5. order summary lines ---- */
.order-totals{margin-bottom:16px;}
/* The amount column must never wrap — "− ₱3,800.00" was breaking after the
   minus sign and stacking onto two lines, and long labels were pushing it
   there. Label takes the slack (flex:1 + min-width:0 so it can shrink and
   wrap), amount is fixed-width and nowrap. */
.tline{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:12.5px;color:#4a4438;padding:7px 0;
}
.tline > span:first-child{flex:1;min-width:0;line-height:1.4;}
.tline > span:last-child{flex:none;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums;}
.tline.discount{color:#2d8a45;font-weight:700;}
.tline.bump-line{color:var(--orange-dark);}
.tline.addon-line{color:var(--orange-dark);}
.tline.total{font-weight:800;font-size:15px;color:var(--navy);border-top:1px dashed var(--line);margin-top:4px;padding-top:9px;}
/* .tline's own display:flex ties in specificity with the UA [hidden] rule and
   wins on source order — without this, a hidden .tline stays visible. */
.tline[hidden]{display:none;}
/* Grand-total-of-discounts row. Visually a SUMMARY, not a third deduction —
   it restates the two rows above it, so it gets its own tinted band and a
   separating rule rather than sitting in the same plain list. */
.tline.tline-saved{
  margin-top:10px;padding:11px 13px;border-radius:10px;align-items:center;
  background:linear-gradient(135deg,#B8860B,#D4A017);color:#fff;font-weight:800;font-size:13px;
}
.tline.tline-saved span:last-child{font-size:15px;}
.oc-free{color:#2d8a45;font-weight:800;}

/* Value recap — anchors the total against a real reference price and lists
   what's included. Only ever shows a strikethrough anchor/save pill when
   it's a true number — never fabricated. See CLAUDE.md's honesty rule. */
.pay-recap{background:var(--cream);border-radius:14px;padding:16px;}
.pay-recap-anchor{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding-bottom:8px;border-bottom:1px dashed rgba(26,43,76,.15);}
.pay-recap-anchor[hidden]{display:none;}
.pay-recap-anchor span{font-size:12px;color:var(--muted);}
.pay-recap-anchor b{font-size:14px;color:var(--muted);text-decoration:line-through;}
.pay-recap-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.pay-recap-list li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--navy);font-weight:600;}
.pay-recap-list li [data-lucide]{width:15px;height:15px;color:#2d8a45;flex:none;}
.pay-recap-save{
  display:flex;align-items:center;gap:6px;margin-top:10px;padding:8px 12px;border-radius:10px;
  background:linear-gradient(135deg,#B8860B,#D4A017);color:#fff;font-size:13px;font-weight:700;
}
.pay-recap-save[hidden]{display:none;}
.pay-recap-save [data-lucide]{width:15px;height:15px;flex:none;}
.pay-recap-save b{font-weight:800;}

/* ---- 6. payment method (QR Ph is the only approved method on this account) ---- */
.oc-pm{
  display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;
  border:2px solid var(--line);background:var(--white);
}
.oc-pm-selected{border-color:var(--orange);background:rgba(249,115,22,.045);}
.oc-pm-logo{width:52px;height:auto;flex:none;}
.oc-pm-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.oc-pm-body b{font-size:12.5px;color:var(--navy);}
.oc-pm-body span{font-size:10.5px;color:var(--muted);line-height:1.35;}
.oc-pm-radio{
  width:18px;height:18px;border-radius:50%;flex:none;border:2px solid var(--orange);
  background:radial-gradient(circle,var(--orange) 0 5px,transparent 5px);
}
/* Delivery is the Vault, and QR Ph often completes on a different device —
   so "come back here" has to be said out loud, before payment. */
.oc-after-pay{
  display:flex;align-items:flex-start;gap:8px;margin-top:12px;padding:10px 12px;border-radius:12px;
  background:rgba(249,115,22,.08);border:1px dashed var(--orange-light);
  font-size:11.5px;line-height:1.45;color:#4a4438;
}
.oc-after-pay [data-lucide]{width:15px;height:15px;color:var(--orange-dark);flex:none;margin-top:1px;}
.oc-after-pay b{color:var(--navy);font-weight:800;}

.oc-pm-trust{display:flex;flex-wrap:wrap;gap:12px;margin-top:11px;font-size:10.5px;color:var(--muted);}
.oc-pm-trust span{display:flex;align-items:center;gap:5px;}
.oc-pm-trust [data-lucide]{width:13px;height:13px;color:var(--orange);}

/* ---- 7. state banners ---- */
.step-pending-note:not([hidden]){
  display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:12px;color:#8a5a00;
  background:#fff3d9;border:1px solid #f3d99a;border-radius:12px;padding:11px 13px;line-height:1.45;
}
.step-pending-note [data-lucide]{width:15px;height:15px;color:#c98a00;flex:none;}

.confirmed-card{text-align:center;border-color:#2d8a45;}
.confirmed-card p{font-size:13px;color:#4a4438;line-height:1.55;margin:8px 0 14px;}
.confirmed-card p b{color:var(--navy);}
.oc-vault-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px;}
.oc-vault-btn [data-lucide]{width:17px;height:17px;}
.confirmed-card .edit-email-link{display:inline-block;margin-top:12px;font-size:11.5px;color:var(--muted);font-weight:600;}
.confirm-icon.small{font-size:0;margin-bottom:4px;}
.confirm-icon.small [data-lucide]{width:28px;height:28px;color:var(--orange);}

/* form error — [hidden] vs display:block is same specificity and source order
   decides, which once shipped the email error visible on page load. Explicit
   override always needed alongside a display: rule on the same selector. */
.field-error{display:block;font-size:11.5px;color:var(--danger);margin-top:2px;font-weight:600;}
.field-error[hidden]{display:none;}

/* ================= STICKY PLACE-ORDER BAR ================= */
@keyframes spin{to{transform:rotate(360deg);}}
.btn-spin{animation:spin 1s linear infinite;}

.pay-error{
  color:var(--danger);font-size:12px;font-weight:700;margin-bottom:12px;
  background:rgba(220,38,38,.07);border:1px solid rgba(220,38,38,.25);border-radius:10px;padding:10px 12px;
  animation:nudgeShake .35s ease;
}
.pay-error[hidden]{display:none;}
@keyframes nudgeShake{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-4px);}
  75%{transform:translateX(4px);}
}

/* Never `left:0;right:0` + max-width + margin:auto on a fixed element — it's
   over-constrained and some browsers render it wider than the real viewport,
   which is what caused the old sticky-bar horizontal-scroll sliver. */
.oc-sticky{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:640px;z-index:60;
  background:var(--white);border-top:1px solid var(--line);
  border-radius:16px 16px 0 0;box-shadow:0 -8px 28px rgba(26,43,76,.14);
  padding-bottom:env(safe-area-inset-bottom);
}
.oc-sticky[hidden]{display:none;}
/* Must stay ONE line — it's a glance-value strip, not a paragraph. The font
   is sized so the full sentence fits a 375px viewport without wrapping, and
   steps down again below 360px rather than being allowed to wrap. */
/* Must stay ONE line — it is a glance-value strip, not a paragraph, and it
   truncates rather than wrapping. See the note in renderSticky(). */
.oc-sticky-strip{
  display:flex;align-items:center;justify-content:center;gap:5px;text-align:center;
  background:linear-gradient(90deg,#FFF3D0,#FFE8A8);
  color:#8a6300;font-size:10.5px;font-weight:700;line-height:1.3;white-space:nowrap;
  padding:7px 8px;border-radius:16px 16px 0 0;overflow:hidden;
}
.oc-sticky-strip [data-lucide]{width:13px;height:13px;}
.oc-sticky-strip [data-lucide]{width:13px;height:13px;}
@media(max-width:360px){
  .oc-sticky-strip{font-size:9.5px;letter-spacing:-.1px;}
}
.oc-sticky-strip [data-lucide]{width:14px;height:14px;flex:none;}
.oc-sticky-strip b{font-weight:800;color:#6b4c00;}
.oc-sticky-bar{display:flex;align-items:center;gap:12px;padding:10px 14px 12px;}
/* Total takes the slack so the button sits hard against the right edge. */
.oc-sticky-total{display:flex;flex-direction:column;line-height:1.2;flex:1 1 auto;min-width:0;}
.oc-sticky-total-label{font-size:10.5px;color:var(--muted);font-weight:600;}
.oc-sticky-price{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;}
.oc-sticky-price b{font-size:20px;font-weight:800;color:var(--navy);}
.oc-sticky-old{font-size:11.5px;font-weight:700;color:var(--muted);text-decoration:line-through;}
.oc-sticky-old[hidden]{display:none;}
/* Right-aligned and sized to its own content — a full-bleed button crowded
   the total out. */
.oc-sticky-btn{
  flex:0 0 auto;max-width:64%;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;padding:11px 12px;line-height:1.2;
}
.oc-sticky-btn:disabled{opacity:.75;}
.oc-sticky-btn-main{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:800;}
.oc-sticky-btn-main [data-lucide]{width:15px;height:15px;}
.oc-sticky-btn-sub{font-size:9.5px;font-weight:600;opacity:.85;}

/* ================= SUITE PROGRESS LADDER ================= (redesigned
   2026-08-18b to a single dark navy header card, one pip row + one track,
   after the first pass — a light card glued onto three separate legacy
   sections — read as fractured.) "Complete the set" mechanic: a fixed-size,
   named collection with a permanent progress ladder above the checkboxes.
   Never says "buy more"; it says how many rungs remain to a thing that has
   a name. Built once in checkout.html and mutated in place from
   js/checkout.js — see that file's renderSuiteLadder(). Don't reintroduce
   innerHTML='' here, that's the bug that makes a mid-tap toggle jump under
   the buyer's finger. */
/* The suite card carries the ladder as a welded header band: the card kills
   its own padding so the dark band can run edge-to-edge and share the card's
   top radius, making the two read as ONE object rather than a progress
   widget sitting on top of an unrelated list. */
.oc-card-suite{padding:0;overflow:hidden;}
.suite-body{padding:18px;}

.suite-ladder{
  background:linear-gradient(150deg,var(--navy),#0F1B33);color:#fff;
  padding:16px 18px 18px;
}
/* Standalone use (if ever placed outside .oc-card-suite) keeps its own radius. */
.oc-card:not(.oc-card-suite) > .suite-ladder{border-radius:14px;margin-bottom:12px;}
.suite-ladder-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
.suite-ladder-top b{font-size:12.5px;font-weight:800;letter-spacing:.1px;}
.suite-ladder-pips{display:flex;gap:5px;}
.suite-pip{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25);transition:.25s;}
.suite-pip.on{background:#E9C98A;box-shadow:0 0 8px rgba(233,201,138,.7);}
.suite-ladder-track{height:7px;border-radius:100px;background:rgba(255,255,255,.16);overflow:hidden;}
.suite-ladder-fill{
  height:100%;width:0;border-radius:100px;
  background:linear-gradient(90deg,#B8860B,#E9C98A);
  transition:width .45s cubic-bezier(.2,.9,.3,1);box-shadow:0 0 12px rgba(233,201,138,.6);
}
@media(prefers-reduced-motion:reduce){
  .suite-ladder-fill{transition:none;}
}

/* ---- unified addon list (2026-08-18b) ----
   Replaces the old 2-tier-card + bump-card + 2-xsell-card layout with ONE
   list, every row the same shape: checkbox, a real product thumbnail (or a
   plain icon tile for the PDF guide, never a fabricated screenshot), a
   one-line label + rating/sold line, a price cell. Rows are built ONCE by
   js/checkout.js's buildAddonRows() and only ever mutated in place after —
   toggle classes, rewrite the price cell — never re-created. */
.addon-list-head{
  display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:800;color:var(--navy);
  margin-bottom:14px;
}
.addon-list-head [data-lucide]{width:15px;height:15px;color:var(--orange);}

.addon{
  display:flex;align-items:center;gap:13px;padding:14px 13px;
  border:1.5px solid var(--line);border-radius:13px;margin-bottom:10px;cursor:pointer;
  background:var(--white);transition:border-color .15s,background .15s;
}
.addon:last-of-type{margin-bottom:0;}
.addon.on{border-color:var(--orange);background:rgba(249,115,22,.05);}
.addon input{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
.addon-box{
  width:21px;height:21px;border-radius:6px;border:1.5px solid var(--line);background:var(--white);
  flex:none;display:flex;align-items:center;justify-content:center;color:transparent;transition:.15s;
}
.addon.on .addon-box{background:var(--orange);border-color:var(--orange);color:#fff;}
.addon-box .ci{width:12px;height:12px;color:inherit;}
.addon-thumb{
  width:52px;height:39px;border-radius:9px;flex:none;overflow:hidden;
  background:var(--navy);display:flex;align-items:center;justify-content:center;
}
.addon-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.addon-thumb-ico{background:linear-gradient(135deg,var(--navy),var(--navy-light));color:#D4A017;}
.addon-thumb-ico [data-lucide]{width:19px;height:19px;}
.addon-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.addon-body b{font-size:12.5px;color:var(--navy);line-height:1.3;font-weight:700;}
.addon-sub{font-size:10px;color:var(--muted);line-height:1.3;}
.addon-rating{
  display:flex;align-items:center;gap:4px;font-size:9.5px;font-weight:700;color:#8a6300;margin-top:2px;
}
.addon-rating [data-lucide]{width:10px;height:10px;color:#D4A017;fill:#D4A017;}
.addon-rating i{font-style:normal;color:var(--muted);}
.addon-timer{
  display:inline-flex;align-items:center;gap:3px;align-self:flex-start;margin-top:4px;
  background:#8a2b2b;color:#fff;border-radius:20px;padding:2px 7px;
  font-size:8.5px;font-weight:800;letter-spacing:.2px;font-variant-numeric:tabular-nums;
}
.addon-timer [data-lucide]{width:9px;height:9px;}
.addon.on .addon-timer{display:none;}
.addon-price{
  flex:none;color:var(--navy);text-align:right;line-height:1.3;
  display:flex;flex-direction:column;align-items:flex-end;gap:4px;
}
.addon.on .addon-price{color:var(--orange-dark);}
.addon-price s{color:var(--muted);font-weight:600;font-size:10.5px;}
/* Price and its badge sit on one line WITH a real gap — they used to render
   as a single jammed "₱499SAVE 50%" string. */
.addon-price-row{display:flex;align-items:center;justify-content:flex-end;gap:8px;}
.addon-price-row b{font-size:15px;font-weight:800;}
.addon-price small.save{
  background:var(--orange);color:#fff;white-space:nowrap;
  font-size:8.5px;font-weight:800;letter-spacing:.3px;padding:4px 8px;border-radius:100px;
}
/* The spotlighted row (bestNextStep()'s pick) — a gentle breathing glow, not
   a shout. Only one row gets this at a time. */
.addon.spot{border-color:var(--orange);animation:addonBreathe 2.2s ease-in-out infinite;}
@keyframes addonBreathe{0%,100%{box-shadow:0 0 0 3px rgba(249,115,22,.14);}50%{box-shadow:0 0 0 7px rgba(249,115,22,.05);}}
/* A genuine steal — the ticked cost undercuts the item's own real price.
   The gold "pop" badge + "was ₱X" line only ever renders when that's
   actually true (js/checkout.js's `steal` check), never decoratively. */
.addon.steal{background:linear-gradient(100deg,#FFF3E0,#fff);}
.addon-price .pop{
  display:inline-block;background:#B8860B;color:#fff;font-size:12px;font-weight:800;
  padding:3px 9px;border-radius:100px;animation:addonPopPulse 1.5s ease-in-out infinite;
}
@keyframes addonPopPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}
.addon-price small{display:block;font-size:9px;font-weight:700;color:var(--muted);text-align:right;margin-top:2px;}
@media(prefers-reduced-motion:reduce){
  .addon.spot,.addon-price .pop{animation:none;}
}

/* Live "one tick away" nudge banner — louder than the row price cells, with
   its own Add CTA, ported from the TAX WORKBOOK BUNDLE project's
   renderNudge(). Built once in checkout.html, mutated in place. Same navy
   card as the ladder above, so the two read as one connected mechanic. */
.suite-nudge{
  display:flex;align-items:flex-start;gap:11px;color:#fff;
  background:linear-gradient(150deg,var(--navy),#0F1B33);border-radius:13px;
  padding:14px;margin-top:16px;
}
.suite-nudge[hidden]{display:none;}
.suite-nudge-ico{
  flex:none;width:28px;height:28px;border-radius:9px;
  background:rgba(255,255,255,.14);color:#E9C98A;
  display:flex;align-items:center;justify-content:center;
}
.suite-nudge-ico [data-lucide]{width:15px;height:15px;}
.suite-nudge-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.suite-nudge-body b{font-size:12.5px;font-weight:800;line-height:1.35;}
.suite-nudge-body b u{text-decoration-color:#E9C98A;}
.suite-nudge-body > span{font-size:11px;opacity:.85;line-height:1.4;}
/* "Hot" = the tick that beats its own price — the moment the nudge is
   actually worth the buyer's attention, not just informational. */
.suite-nudge.suite-nudge-hot{background:linear-gradient(150deg,#8A5F1E,#B8860B);}
.suite-nudge-cta{
  margin-top:8px;align-self:flex-start;display:inline-flex;align-items:center;gap:5px;
  background:#B8860B;color:#fff;border:none;border-radius:100px;
  padding:7px 13px;font-size:11.5px;font-weight:800;cursor:pointer;transition:.15s;
}
.suite-nudge-cta:hover{background:#8A5F1E;}
.suite-nudge-cta [data-lucide]{width:12px;height:12px;}
.suite-nudge.suite-nudge-won{background:linear-gradient(150deg,#256048,#2E6B4F);}

/* Sticky-bar total physically moves on every toggle, so the cart reads as
   alive rather than a static number that silently updates underneath. */
@keyframes suiteTotalBump{
  0%{transform:scale(1);}
  40%{transform:scale(1.14);}
  100%{transform:scale(1);}
}
@keyframes suiteBarLift{
  0%{transform:translateY(0);}
  35%{transform:translateY(-3px);}
  100%{transform:translateY(0);}
}
.oc-sticky-price b.suite-bump-anim{animation:suiteTotalBump .32s ease;}
.oc-sticky-bar.suite-bump-anim{animation:suiteBarLift .32s ease;}
@media(prefers-reduced-motion:reduce){
  .oc-sticky-price b.suite-bump-anim,.oc-sticky-bar.suite-bump-anim{animation:none;}
}

/* ================= DESKTOP ================= */
@media(min-width:860px){
  .oc-wrap{max-width:680px;}
  .oc-sticky{max-width:680px;}
}


/* ================= 2026-08-20 RECOVERY PASS =================
   Everything below restores or adds upsell machinery that the 2026-08-18
   redesign stripped. Post-launch data: AOV P909->P790, Command Center attach
   67.8%->25%, bump attach 30.5%->20.6%, step1->email 79.8%->60.8%. Conversion
   itself improved (revenue per checkout visitor P212->P312), so the shell is
   kept and only the monetisation is rebuilt on top of it. */

/* ---- tier card internals (stacked layout) ---- */
.tier-seg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-right:26px;}
.tier-seg-titles{display:flex;flex-direction:column;gap:2px;min-width:0;}
.tier-seg-up /* The six compliance reasons. This list IS the P600 justification — shorten
   it again and expect the attach rate to fall with it. */
.tier-seg-feats{
  list-style:none;margin:4px 0 0;padding:9px 0 0;border-top:1px dashed rgba(184,134,11,.35);
  display:flex;flex-direction:column;gap:4px;
}
.tier-seg-feats li{
  font-size:10.5px;line-height:1.5;color:#6b5a3a;padding-left:17px;position:relative;text-align:left;
}
/* ⭐ bullets, per the supplied copy. Rendered as text so they inherit colour
   and never depend on an icon font loading. */
/* A real gold star drawn as an inline SVG data URI, NOT the U+2B50 emoji.
   Two reasons: the CSS escape for it kept mis-parsing, and this project
   already learned (see the ci-check sprite in checkout.html) that emoji
   glyphs render inconsistently across mobile OS/browser combos. This
   version is identical everywhere and needs no font. */
.tier-seg-feats li::before{
  content:'';position:absolute;left:0;top:3px;width:11px;height:11px;
  background-repeat:no-repeat;background-size:11px 11px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23D4A017'%3E%3Cpath d='M12 2.4l2.9 6 6.5.9-4.7 4.6 1.1 6.5-5.8-3.1-5.8 3.1 1.1-6.5L2.6 9.3l6.5-.9z'/%3E%3C/svg%3E");
}
.tier-seg-feats-head{
  display:block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;
  color:var(--muted);margin:4px 0 -2px;
}
.tier-seg-feats li b{color:#8a6300;}
/* align-items:flex-start + a wrapping <span> for the copy. These were
   `align-items:center` with a bare <b> as a sibling, so the bold fragment
   became its own flex COLUMN and split each sentence in half
   ("127 sa huling 200" | "na bumili, Command Center ang pinili"). */
.tier-seg-proof{
  display:flex;align-items:flex-start;gap:7px;font-size:10px;font-weight:600;line-height:1.45;
  color:#6b5a3a;text-align:left;
}
.tier-seg-proof > span{flex:1;min-width:0;}
.tier-seg-proof{
  margin-top:9px;background:rgba(184,134,11,.12);border-radius:8px;padding:8px 10px;
}
.tier-seg-proof b{color:#8a6300;font-weight:800;}

/* Rating card on the flagship tier (2026-08-20). Same Raket PH figures the
   add-on rows carry, rendered larger here because this is the card the whole
   upsell rests on. Replaced the "127 of the last 200 orders" copy. */
.tier-seg-rating{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:10px;padding:9px 11px;border-radius:10px;
  background:rgba(184,134,11,.12);border:1px solid rgba(184,134,11,.28);
}
.tsr-stars{display:inline-flex;align-items:center;gap:1px;flex:none;}
.tsr-stars [data-lucide]{
  width:13px;height:13px;color:#D4A017;fill:#D4A017;stroke:#D4A017;stroke-width:1.5;
}
.tsr-score{font-size:14px;font-weight:800;color:#8a6300;line-height:1;}
.tsr-sold{font-size:10.5px;font-weight:700;color:#6b5a3a;}
.tsr-sold::before{content:'·';margin-right:6px;color:var(--muted);}

/* same treatment inside the exit-intent modal, centred */
.exit-rating{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:10px;
  padding:7px 12px;border-radius:100px;background:rgba(184,134,11,.14);
  font-size:11.5px;color:#6b5a3a;font-weight:700;
}
.exit-rating b{font-size:13.5px;color:#8a6300;font-weight:800;}
.tier-seg-proof [data-lucide]{width:12px;height:12px;flex:none;color:#B8860B;margin-top:1px;}

/* ---- standalone order bump ---- */
.bump-card{
  display:flex;align-items:center;gap:12px;cursor:pointer;
  background:var(--cream);border:2px dashed var(--orange-light);border-radius:14px;
  padding:15px 14px;margin-bottom:18px;transition:.15s;
}
/* OPAQUE, not a translucent tint. This card sits directly on <main>, not
   inside a white .oc-card — so rgba(249,115,22,.06) let the page's navy
   body background straight through, and the title (var(--navy),
   rgb(26,43,76)) became navy-on-navy and vanished the moment the buyer
   ticked it. Any state on this card must use a solid light colour. */
.bump-card.on{border-style:solid;border-color:var(--orange);background:#FFF1E3;}
.bump-card input{position:absolute;opacity:0;width:0;height:0;}
.bump-box{
  width:22px;height:22px;border-radius:6px;border:2px solid #CFD6E2;background:#fff;
  flex:none;display:flex;align-items:center;justify-content:center;color:transparent;transition:.15s;
}
.bump-card.on .bump-box{background:var(--orange);border-color:var(--orange);color:#fff;}
.bump-box .ci{width:12px;height:12px;color:inherit;vertical-align:0;display:block;}
.bump-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.bump-body b{font-size:12.5px;color:var(--navy);line-height:1.3;}
.bump-body span{font-size:10.5px;color:var(--muted);line-height:1.35;}
.bump-price{font-size:15px;font-weight:800;color:var(--orange-dark);flex:none;}

/* ---- upgrade moment (#7) ---- */
.upsell-moment{
  display:flex;gap:12px;align-items:flex-start;margin-bottom:18px;padding:15px 14px;
  border-radius:14px;color:#fff;background:linear-gradient(150deg,#8A5F1E,#B8860B);
  box-shadow:0 10px 24px rgba(184,134,11,.28);
}
.upsell-moment[hidden]{display:none;}
.upsell-ico{
  width:32px;height:32px;border-radius:9px;flex:none;background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
}
.upsell-ico [data-lucide]{width:17px;height:17px;color:#fff;}
.upsell-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.upsell-body b{font-size:13px;font-weight:800;line-height:1.3;}
.upsell-body > span{font-size:11px;line-height:1.45;opacity:.92;}
.upsell-cta{
  margin-top:9px;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
  background:#fff;color:#8a6300;border:none;border-radius:100px;
  padding:8px 14px;font-size:12px;font-weight:800;cursor:pointer;font-family:inherit;
}
.upsell-cta [data-lucide]{width:13px;height:13px;}

/* ---- risk reversal (#12) ---- */
.oc-guarantee{
  display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:13px;
  background:rgba(45,138,69,.08);border:1px solid rgba(45,138,69,.3);border-radius:12px;
}
.oc-guarantee-seal{
  width:34px;height:34px;border-radius:50%;flex:none;background:#2d8a45;
  display:flex;align-items:center;justify-content:center;
}
.oc-guarantee-seal [data-lucide]{width:18px;height:18px;color:#fff;}
.oc-guarantee-body{display:flex;flex-direction:column;gap:2px;min-width:0;}
.oc-guarantee-body b{font-size:12.5px;color:#1f6b36;}
.oc-guarantee-body span{font-size:10.5px;color:#4a4438;line-height:1.4;}

/* ---- email sheet (#1) + exit modal (#14) share the backdrop ---- */
.sheet-backdrop{
  position:fixed;inset:0;z-index:70;background:rgba(16,27,48,.55);
  opacity:0;transition:opacity .2s ease;
}
.sheet-backdrop.open{opacity:1;}
.sheet-backdrop[hidden]{display:none;}
body.sheet-open{overflow:hidden;}
.email-sheet{
  position:fixed;left:50%;bottom:0;transform:translate(-50%,100%);
  width:100%;max-width:640px;z-index:80;
  background:var(--white);border-radius:20px 20px 0 0;
  padding:18px 18px calc(20px + env(safe-area-inset-bottom));
  box-shadow:0 -14px 40px rgba(16,27,48,.3);
  transition:transform .24s cubic-bezier(.2,.9,.3,1);
}
.email-sheet.open{transform:translate(-50%,0);}
.email-sheet[hidden]{display:none;}
.sheet-grip{width:38px;height:4px;border-radius:100px;background:var(--line);margin:0 auto 12px;}
.sheet-close{
  position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;
  border:none;background:var(--cream);color:var(--muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.sheet-close [data-lucide]{width:15px;height:15px;}
.sheet-title{font-size:16px;font-weight:800;color:var(--navy);line-height:1.3;margin-bottom:4px;}
.sheet-sub{font-size:12px;color:var(--muted);margin-bottom:14px;}
.sheet-sub b{color:var(--navy);}
.sheet-label{display:block;font-size:11px;font-weight:800;color:var(--navy);margin-bottom:6px;}
.sheet-label .req{color:var(--danger);}
.email-sheet .oc-deliver-input + .oc-deliver-input{margin-top:8px;}
.sheet-cta{
  width:100%;margin-top:14px;display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:13px 14px;line-height:1.2;
}
.sheet-cta:disabled{opacity:.7;}
.sheet-cta-main{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:800;}
.sheet-cta-main [data-lucide]{width:16px;height:16px;}
.sheet-cta-sub{font-size:10px;font-weight:600;opacity:.9;}
.sheet-fineprint{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:10px;font-size:10.5px;color:var(--muted);font-weight:600;
}
.sheet-fineprint [data-lucide]{width:12px;height:12px;color:#2d8a45;}

/* ---- exit-intent modal (#14) ---- */
.exit-modal{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-46%);opacity:0;
  width:calc(100% - 32px);max-width:420px;z-index:80;
  background:linear-gradient(170deg,#FFFBEF,#FFF3D6);
  border:2px solid #B8860B;border-radius:18px;padding:22px 18px 18px;text-align:center;
  box-shadow:0 22px 60px rgba(16,27,48,.4);
  transition:transform .22s cubic-bezier(.2,.9,.3,1), opacity .22s ease;
}
.exit-modal.open{transform:translate(-50%,-50%);opacity:1;}
.exit-modal[hidden]{display:none;}
.exit-crown{
  width:46px;height:46px;border-radius:50%;margin:0 auto 10px;
  background:linear-gradient(135deg,#B8860B,#D4A017);
  display:flex;align-items:center;justify-content:center;
}
.exit-crown [data-lucide]{width:23px;height:23px;color:#fff;}
.exit-title{font-size:16px;font-weight:800;color:var(--navy);line-height:1.35;margin-bottom:8px;}
.exit-title b{color:#8a6300;}
.exit-sub{font-size:12px;color:#6b5a3a;line-height:1.5;margin-bottom:16px;}
.exit-sub b{color:#8a6300;}
.exit-actions{display:flex;flex-direction:column;gap:9px;}
.exit-yes{width:100%;font-size:14px;font-weight:800;padding:13px;}
.exit-no{
  background:none;border:none;font-family:inherit;cursor:pointer;
  font-size:11.5px;font-weight:700;color:var(--muted);text-decoration:underline;
}

/* ---- post-purchase upsell (#15) ---- */
.post-upsell{
  margin-top:18px;padding:15px 14px;border-radius:14px;text-align:left;
  background:linear-gradient(170deg,#FFFBEF,#FFF3D6);border:1.5px solid #E4C77A;
}
.post-upsell[hidden]{display:none;}
.post-upsell-head{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--navy);margin-bottom:6px;}
.post-upsell-head [data-lucide]{width:15px;height:15px;color:#B8860B;}
.post-upsell p{font-size:11.5px;color:#6b5a3a;line-height:1.5;margin-bottom:12px;}
.post-upsell p b{color:#8a6300;}
.post-upsell-cta{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;}
.post-upsell-cta [data-lucide]{width:16px;height:16px;}

@media(prefers-reduced-motion:reduce){
  .email-sheet,.exit-modal,.sheet-backdrop{transition:none;}
}

/* ---- narrow-phone add-on rows (2026-08-20) ----
   At 375px the price column was claiming 109px of a 301px row and squeezing
   the product name into a 52px gutter — "Stock &/Inventory" over two lines,
   the sub-line over four, a 164px-tall row. Stacking the price above its SAVE
   pill halves that column and hands the space back to the text. */
/* 520px, not 430px: media queries resolve against the viewport INCLUDING
   the scrollbar, so a 420px content box reports 435px here and a 430px
   breakpoint left a dead zone (~431-500px) where the row was still
   cramped — body 97px against a 109px price column. Measured, not guessed. */
@media(max-width:520px){
  .addon{gap:10px;padding:12px 11px;}
  .addon-thumb{width:46px;height:35px;}
  .addon-price-row{flex-direction:column;align-items:flex-end;gap:4px;}
  .addon-price small.save{font-size:8px;padding:3px 6px;}
  .addon-price-row b{font-size:14px;}
  .addon-body b{font-size:12px;}
}

/* ---- last-chance upgrade inside the payment sheet (2026-08-20) ----
   Post-recovery data: 7 of 12 orders were a bare ₱399 with no add-ons at all.
   Deferring email removed the scroll that used to expose the tier cards, so
   the fast path to Place Order runs at the lowest price. This catches those
   buyers at maximum commitment. Styled as a tappable row, not a second CTA —
   the primary action in this sheet must stay "pay". */
.sheet-upsell{margin-bottom:14px;}
.sheet-upsell[hidden]{display:none;}
.sheet-upsell-btn{
  width:100%;display:flex;align-items:center;gap:11px;text-align:left;cursor:pointer;
  font-family:inherit;padding:12px;border-radius:12px;
  background:linear-gradient(170deg,#FFFBEF,#FFF3D6);border:1.5px solid #E4C77A;
  transition:border-color .15s, box-shadow .15s;
}
.sheet-upsell-btn:hover{border-color:#B8860B;box-shadow:0 6px 16px rgba(184,134,11,.22);}
.sheet-upsell-ico{
  width:30px;height:30px;border-radius:8px;flex:none;
  background:linear-gradient(135deg,#B8860B,#D4A017);
  display:flex;align-items:center;justify-content:center;
}
.sheet-upsell-ico [data-lucide]{width:16px;height:16px;color:#fff;}
.sheet-upsell-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.sheet-upsell-body b{font-size:12px;color:var(--navy);line-height:1.3;}
.sheet-upsell-body > span{font-size:10px;color:#6b5a3a;line-height:1.4;}
.sheet-upsell-body > span b{color:#8a6300;font-size:10px;}
.sheet-upsell-add{
  flex:none;background:#B8860B;color:#fff;border-radius:100px;
  padding:6px 12px;font-size:11px;font-weight:800;white-space:nowrap;
}


/* Narrow phones: the summary labels are long ("Launch discount — 50% off
   bawat add-on"), so give them a little more room and drop the label a
   notch rather than letting the amount column get squeezed. */
@media(max-width:430px){
  .tline{font-size:11.5px;gap:10px;}
  .tline > span:last-child{font-size:12px;}
  .tline.total{font-size:14.5px;}
  .tline.tline-saved{font-size:12px;}
  .tline.tline-saved span:last-child{font-size:14px;}
}


/* "One-time payment" under the ₱999. Deliberately NOT a pill: as a solid
   badge it competed with the price it sits beneath and read as a second
   header element mid-card. Now it is body-scale text — same size and weight
   family as .tier-seg-sub — so it reads as a plain reassurance line. Pulses
   on OPACITY only; scaling a text run mid-card looked like a glitch. */
.tier-seg-once{
  display:inline-flex;align-items:center;gap:4px;margin-top:5px;
  font-size:10px;font-weight:700;line-height:1.35;
  text-transform:none;letter-spacing:0;white-space:nowrap;
  color:#2d8a45;background:none;box-shadow:none;padding:0;border-radius:0;
  animation:oncePulse 2.4s ease-in-out infinite;
}
.tier-seg-once [data-lucide]{width:11px;height:11px;flex:none;}
@keyframes oncePulse{
  0%,100%{opacity:.72;}
  50%{opacity:1;}
}
@media(prefers-reduced-motion:reduce){
  .tier-seg-once{animation:none;opacity:1;}
}

/* ---- TIER PICKER READS AS A CHOICE (2026-08-20) ----
   Feedback: "a dumb customer wouldn't think this is a better tier — there's no
   switch or lipat or upgrade wording." The two cards were rendering as one
   stacked information block. Three signals added:
     1. a heading that names the action ("tap para palitan"),
     2. an explicit verb on every card saying what tapping DOES,
     3. the unselected card is visually RECESSED so the pair reads as
        one-of-two, not two-of-two. */
/* The choice prompt is the thing that makes the two cards read as options
   rather than one stacked block, so it carries real weight: headline-scale
   main line, short sub-line under it, and an icon tile. Kept to two short
   lines — the earlier single 11.5px muted sentence was easy to skip. */
.tier-pick-head{
  display:flex;align-items:center;gap:10px;margin:20px 0 12px;
}
.tph-ico{
  width:30px;height:30px;border-radius:9px;flex:none;
  background:linear-gradient(135deg,var(--orange),var(--orange-dark));
  display:flex;align-items:center;justify-content:center;
}
.tph-ico [data-lucide]{width:15px;height:15px;color:#fff;}
.tph-text{display:flex;flex-direction:column;min-width:0;}
.tph-main{
  font-size:15.5px;font-weight:800;color:var(--navy);line-height:1.2;letter-spacing:-.2px;
}
.tph-sub{font-size:10.5px;font-weight:600;color:var(--muted);line-height:1.3;margin-top:2px;}
@media(max-width:400px){
  .tph-main{font-size:14px;}
}

/* Unselected sits back: flatter, dimmer, no lift. Selected keeps full contrast
   and elevation, so at a glance exactly one card looks "live". */
.tier-seg:not(.on){background:#FAFAFB;opacity:.82;}
.tier-seg:not(.on):hover{opacity:1;}
.tier-seg.tier-seg-up:not(.on){background:linear-gradient(170deg,#FFFDF7,#FFF9EC);opacity:.92;}
.tier-seg.on{box-shadow:0 10px 24px rgba(249,115,22,.18);}

.tier-seg-action{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:11px;padding:8px 10px;border-radius:9px;
  font-size:10.5px;font-weight:800;letter-spacing:.2px;
  background:var(--navy);color:#fff;
}
.tier-seg-action [data-lucide]{width:13px;height:13px;flex:none;}
/* The upgrade prompt is gold — it is the one we want tapped. */
.tier-seg-up .tier-seg-action{background:linear-gradient(135deg,#B8860B,#D4A017);}
/* Once chosen it stops being a prompt and becomes a confirmation: quiet,
   green, no longer competing for the tap. */
.tier-seg-action.is-on{
  background:rgba(45,138,69,.12);color:#1f6b36;
}
.tier-seg-up .tier-seg-action.is-on{background:rgba(45,138,69,.14);color:#1f6b36;}

/* ---- same-device QR tip (2026-08-29) ----
   Was a wallet picker plus a per-app three-step tutorial; cut on sight because
   PH buyers use QR codes daily and the page copy rule is "tight". Only the one
   non-obvious fact survives: you cannot scan a QR on the screen you are
   holding. One line, one row, no picker. */
.oc-qr-tip{
  display:flex;align-items:flex-start;gap:8px;
  margin:12px 0 0;padding:10px 12px;
  border-radius:10px;background:#fff8e8;border:1px solid #f0dcae;
  font-size:12px;color:#6b5a3a;line-height:1.45;
}
.oc-qr-tip [data-lucide]{width:14px;height:14px;color:#c98a00;flex:none;margin-top:1px;}
.oc-qr-tip b{color:var(--navy);font-weight:800;}

/* ---- resume a canceled PayMongo session instead of minting a new one ---- */
.resume-pay-btn:not([hidden]){
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  margin-top:9px;width:100%;cursor:pointer;font-family:inherit;
  padding:11px 13px;border-radius:10px;border:1.5px solid #c98a00;
  background:var(--white);color:#8a5a00;font-size:13px;font-weight:800;
  transition:background .18s ease;
}
.resume-pay-btn:hover{background:#fff8e8;}
.resume-pay-btn [data-lucide]{width:15px;height:15px;}

/* ---- exit-intent SAVE branch (shown to a tier2 cart on the way out) ----
   Inherits .exit-modal for position/size/animation and its [hidden] override;
   only the parts that differ are declared here. */
.exit-save .exit-crown{background:linear-gradient(135deg,#2d8a45,#4bb96a);}
.exit-save #exit-save-form:not([hidden]){display:flex;flex-direction:column;gap:9px;}
.exit-save .oc-deliver-input{text-align:center;font-size:14px;}
.exit-save .field-error{justify-content:center;text-align:center;}
.exit-save .exit-yes{background:linear-gradient(135deg,#2d8a45,#4bb96a);border-color:#2d8a45;}
.exit-save-done:not([hidden]){
  display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:13px;font-weight:800;color:#2d8a45;padding:14px 0 6px;
}
.exit-save-done [data-lucide]{width:17px;height:17px;}

/* ---- endowed-progress pip: the FREE 13th Month Calculator, always on ----
   Display only; never counted in LADDER_ITEMS (which drives suiteComplete()).
   Given a slightly different treatment so it reads as "already yours", not as
   a thing the buyer ticked. */
.suite-pip-free{
  background:#E9C98A;
  box-shadow:0 0 8px rgba(233,201,138,.7);
  outline:1.5px solid rgba(255,255,255,.5);outline-offset:1px;
}

/* ---- confirmation: one concrete next action under the identity payoff ---- */
.confirmed-card .confirm-next{
  font-size:12.5px;color:#6b6455;margin:0 0 14px;line-height:1.5;
}
.confirmed-card .confirm-next b{color:var(--navy);}

@media(prefers-reduced-motion:reduce){
  .resume-pay-btn{transition:none;}
}

/* ---- ADD-ON DECISION ROW (2026-09-09) --------------------------------------
   Attach was 16%. This makes the add-on list impossible to scroll past without
   seeing it once — WITHOUT pre-ticking anything. Declining is one tap and it
   sits right here, because friction on a decline is the dark-pattern version
   of this mechanic. */
.addon-decision{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:12px;padding:11px 13px;border-radius:12px;
  background:var(--cream);border:1.5px dashed var(--line);
}
.addon-decision .ad-q{
  font-size:12.5px;font-weight:700;color:var(--navy);
  /* min-width:0 so the question shrinks before the button does — the CLAUDE.md
     flex/nowrap rule. */
  min-width:0;
}
.ad-skip{
  flex:none;background:var(--white);border:1.5px solid var(--line);
  border-radius:9px;padding:8px 13px;cursor:pointer;
  font-family:inherit;font-size:12px;font-weight:700;color:var(--muted);
  white-space:nowrap;
}
.ad-skip:hover{border-color:var(--navy);color:var(--navy);}
.ad-skip:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}

/* Once decided, the row stops asking. It is not removed — a row that vanishes
   under the finger is the jump this page already avoids elsewhere. */
.addon-decision.decided{opacity:.5;border-style:solid;}
.addon-decision.decided .ad-skip{visibility:hidden;}

/* One pulse when the gate sends them here, so it is obvious WHY the page moved.
   Disabled under reduced-motion like every other animation on this page. */
@keyframes adFlash{
  0%,100%{border-color:var(--line);background:var(--cream);}
  30%{border-color:var(--orange);background:rgba(249,115,22,.12);}
}
.addon-decision.flash{animation:adFlash .9s ease-in-out 2;}
@media(prefers-reduced-motion:reduce){ .addon-decision.flash{animation:none;border-color:var(--orange);} }