/* ============================================================================
   SWABE COSTING - checkout and vault.

   Loaded LAST, after css/styles.css, css/tier-pick.css and css/swabe.css.
   styles.css and tier-pick.css are copied VERBATIM from the reference line and
   are never edited here, so an upstream fix can be re-copied over the top
   without a merge. Everything this project changes lives in this file.

   ⚠️ --gold, --gold-bg and --success ARE LOAD-BEARING AND styles.css :root DOES
   NOT DEFINE THEM. tier-pick.css uses all three. Diffed 10 Sep 2026:
   tier-pick.css reads --cream --gold --gold-bg --ink --line --muted --orange
   --orange-dark --orange-light --success --white, and styles.css :root defines
   every one of those EXCEPT --gold, --gold-bg and --success. Without the three
   redeclared below, var(--gold) resolves to nothing and the gold badge renders
   as white text on a transparent background: invisible, no error, no console
   warning. Diff any further borrowed file's var() list against styles.css
   :root before trusting it.

   PALETTE (BRAND.md 6). The inherited token NAMES are kept and remapped to the
   Swabe greens rather than renamed, so every rule in this file and in the two
   verbatim stylesheets picks up the brand with no edit and nothing can be
   missed. --orange* is therefore GREEN here, on purpose. Read it as "the
   primary accent", not as a colour.
   ========================================================================== */
:root{
  --cream:#FAFAF7;        /* paper, off-white, never pure white */
  --peach:#E8F5EC;        /* light green wash */
  --orange:#34A853;       /* accent, Sheets green */
  --orange-dark:#1E7B45;  /* primary, deep green */
  --orange-light:#8FD3A8;
  --navy:#1A1A1A; --ink:#1A1A1A; --muted:#5A6560;
  --line:#DCE5DE; --white:#fff; --danger:#C62828;   /* red is ONLY for lugi */
  --gold:#8A6200;         /* tito's gold, darkened so text on cream passes contrast */
  --gold-light:#F6C453; --gold-bg:#FDF6E3;
  --success:#1E7B45; --success-bg:#E8F5EC;
}
*{box-sizing:border-box;margin:0;padding:0;}
/* overflow-x:CLIP, not HIDDEN. `hidden` computes overflow-y to `auto`, which
   makes html/body a scrolling container — and a position:sticky child then
   sticks to THAT rather than the viewport, i.e. not at all. Verified here:
   with `hidden` the sticky header sat at y=-1200 after scrolling 1200px; with
   the guard relaxed it pinned at y=0. `clip` still prevents a horizontal
   scroll sliver but creates no scroll container, so sticky keeps working. */
html{overflow-x:clip;}
body{
  font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--cream);color:var(--ink);line-height:1.55;
  padding-bottom:130px;overflow-x:clip;
}
body.sheet-open{overflow:hidden;}

/* NO FLASH STRIP AND NO COUNTDOWN CSS. PRODUCT_SPEC 6: there is no timer on
   this funnel, because every other number on the page is checkable and a timer
   that expires nothing would be the one that is not. The reference funnel's
   .co-flash / .co-timer rules were deleted rather than left dead, so nobody
   re-adds the markup and finds it already styled. If a real launch-price end
   date ever exists, add both back together and say so in CLAUDE.md. */

/* The header stays pinned. One sticky PARENT rather than stacked sticky
   children. I13: html and body are overflow-x CLIP, never HIDDEN - `hidden`
   computes overflow-y to auto, which makes them a scroll container and a
   sticky child then sticks to THAT instead of the viewport. Measured on the
   reference funnel: with `hidden` the sticky header sat at y=-1200 after
   scrolling 1200px. */
.co-top{position:sticky;top:0;z-index:45;}

/* -------------------------------------------------------------- header */
.co-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;background:var(--white);border-bottom:1px solid var(--line);
}
.co-logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-weight:800;}
.co-logo img{width:26px;height:26px;object-fit:contain;}
.co-secure{font-size:.75rem;color:var(--muted);}

.co-wrap{max-width:580px;margin:0 auto;padding:14px 13px 8px;display:flex;flex-direction:column;gap:13px;}
.co-card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:17px 15px;}
.co-h1{font-size:1.15rem;line-height:1.3;margin-bottom:8px;}
.co-h2{font-size:1rem;margin-bottom:13px;}
.co-h2-hook{
  font-size:1.12rem;font-weight:800;letter-spacing:.01em;
  background:linear-gradient(90deg,var(--orange-dark),var(--gold-light));
  -webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:4px;
}
.co-h2-get{display:flex;align-items:center;gap:7px;}
.co-cardtop{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.co-cardtop .co-h2{margin-bottom:0;}
/* .co-mini-timer deleted with the countdown. See the note above: no timer
   markup exists on this funnel and none should find itself already styled. */

/* ------------------------------------------------------------ item rows */
.co-tiers,.co-addons{display:flex;flex-direction:column;gap:10px;}
.co-tier,.co-addon{
  position:relative;display:block;border:2px solid var(--line);border-radius:14px;
  padding:12px;cursor:pointer;background:var(--white);
  transition:border-color .15s,background .15s,box-shadow .15s;
}
.co-tier.on,.co-addon.on{border-color:var(--orange);background:#FFF9F4;box-shadow:0 2px 10px rgba(249,115,22,.13);}
.co-tier input,.co-addon input,.co-bump input{position:absolute;opacity:0;width:0;height:0;}

.co-row{display:flex;gap:9px;align-items:flex-start;}
.co-check{
  flex:0 0 auto;width:21px;height:21px;border-radius:50%;border:2px solid var(--line);
  background:var(--white);margin-top:2px;position:relative;transition:.15s;
}
.on .co-check,.co-bump.on .co-check{background:var(--orange);border-color:var(--orange);}
.on .co-check::after,.co-bump.on .co-check::after{
  content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.co-thumb{
  flex:0 0 auto;width:52px;height:52px;object-fit:cover;border-radius:9px;
  border:1px solid var(--line);background:var(--cream);
}
.co-thumb-lg{width:62px;height:62px;}
.co-row-body{display:flex;flex-direction:column;gap:3px;min-width:0;}
.co-row-body>b{font-size:.96rem;line-height:1.3;}
.co-row-sub{font-size:.81rem;color:var(--muted);line-height:1.45;}
.co-stars{font-size:.72rem;color:var(--gold-light);letter-spacing:-1px;}
.co-stars span{color:var(--muted);letter-spacing:0;margin-left:4px;}
.co-row-price{
  margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  text-align:right;white-space:nowrap;
}
.co-row-price s{font-size:.75rem;color:var(--muted);}
.co-row-price b{font-size:1.05rem;font-weight:800;font-variant-numeric:tabular-nums;}
.on .co-row-price b{color:var(--orange-dark);}
.co-save-pill{
  font-size:.62rem;font-weight:800;letter-spacing:.04em;color:#fff;
  background:var(--success);padding:2px 6px;border-radius:5px;
}
.co-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:3px;}
.co-tag{
  font-size:.63rem;font-weight:800;letter-spacing:.04em;padding:2px 7px;border-radius:5px;
  background:var(--success-bg);color:var(--success);
}
.co-tag-hot{background:#FDE7E1;color:#C2410C;}

.co-flag{
  position:absolute;top:-9px;left:14px;background:var(--gold);color:#fff;
  font-size:.62rem;font-weight:800;letter-spacing:.07em;padding:3px 9px;border-radius:20px;z-index:2;
}

/* ------------------------------------------- the done-for-you hero offer */
.co-addon-hero{
  border-width:2px;border-color:var(--gold-light);
  background:linear-gradient(160deg,#FFFCF2,#FFF6E2);
  overflow:hidden;
}
.co-addon-hero.on{
  border-color:var(--gold);background:linear-gradient(160deg,#FFF9EA,#FFF1D2);
  box-shadow:0 3px 16px rgba(184,134,11,.22);
}
.co-hero-ribbon{
  position:absolute;top:12px;right:-32px;transform:rotate(38deg);
  background:linear-gradient(90deg,#C2410C,#F97316);color:#fff;
  font-size:.6rem;font-weight:800;letter-spacing:.08em;padding:3px 34px;z-index:2;
}
/* The corner ribbon sits exactly where the price column starts, and at 375px
   it clipped the ₱9,995 clean in half. Push this card's price below it. */
.co-addon-hero .co-row-price{padding-top:26px;}
.co-dfy{
  font-size:.58rem;font-weight:800;letter-spacing:.07em;color:#fff;background:var(--navy);
  padding:2px 6px;border-radius:4px;vertical-align:2px;margin-left:5px;
}
.co-hero-list{display:flex;flex-direction:column;gap:2px;margin-top:5px;}
.co-hero-list span{font-size:.78rem;color:#6B5A2A;}

/* --------------------------------------------------------- order bump */
.co-bump{border:2px dashed var(--orange-light);border-radius:16px;background:#FFFDF7;padding:13px;}
.co-bump.on{border-style:solid;border-color:var(--orange);background:#FFF6EC;}
.co-bump-label{display:block;cursor:pointer;}
.co-bump-body{display:flex;gap:10px;align-items:flex-start;}
.co-bump-img{width:46px;height:46px;object-fit:cover;border-radius:8px;flex:0 0 auto;border:1px solid var(--line);}
.co-bump-body b{font-size:.92rem;display:block;}
.co-bump-sub{font-size:.81rem;color:var(--muted);display:block;margin-top:2px;}

/* ------------------------------------------------------ progress ladder */
.co-ladder-card{border-color:var(--gold-light);background:linear-gradient(180deg,#FFFDF6,var(--white) 120px);}
.co-ladder-head{margin-bottom:14px;}
.co-ladder-sub{font-size:.83rem;color:var(--muted);}
.co-ladder-sub b{color:var(--orange-dark);}
.co-ladder-sub b.ok{color:var(--success);}

/* Milestone rail. The track sits BEHIND the stops and the fill runs between
   the first and last dot centres, so a filled segment visibly connects two
   stops instead of floating above them. Stops are a real <ol>: this is a
   sequence and the order carries meaning. */
.co-prog{margin:2px 0 18px;}
.co-prog-rail{position:relative;padding:0 4px;}
.co-prog-track{
  position:absolute;left:calc(16.66% + 4px);right:calc(16.66% + 4px);top:15px;
  height:6px;border-radius:20px;background:#F0E6D2;overflow:hidden;
}
.co-prog-fill{
  height:100%;width:0;border-radius:20px;
  background:linear-gradient(90deg,var(--orange),var(--gold-light));
  transition:width .45s cubic-bezier(.34,1.3,.5,1);
}
.co-prog.done .co-prog-fill{background:linear-gradient(90deg,var(--success),#5FCB98);}

.co-prog-stops{
  position:relative;display:grid;grid-template-columns:repeat(3,1fr);
  list-style:none;margin:0;padding:0;
}
.co-stop{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;}
.co-stop-dot{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--white);border:2px solid #E3D5BC;color:var(--muted);
  font-size:.82rem;font-weight:800;
  transition:transform .25s cubic-bezier(.34,1.5,.5,1),background .2s,border-color .2s,color .2s,box-shadow .2s;
}
.co-stop-lab{display:flex;flex-direction:column;line-height:1.25;font-size:.68rem;color:var(--muted);}
.co-stop-lab em{font-style:normal;font-weight:800;font-size:.74rem;color:var(--muted);}
/* The rung reward: "+P99" over a small DISCOUNT caption. Both are rendered by
   js/checkout.js from SET_STEPS -- never type an amount into the markup. */
.co-stop-lab em{display:flex;flex-direction:column;align-items:center;gap:1px;}
.co-stop-lab em i{font-style:normal;font-weight:800;font-size:.58rem;letter-spacing:.06em;
  color:var(--muted);opacity:.75;}
.co-stop.hit .co-stop-lab em i{color:var(--orange-dark);opacity:1;}
.co-stop-goal .co-stop-lab em i{color:var(--gold);opacity:1;}
.co-prog.done .co-stop-lab em i{color:var(--success);opacity:1;}

/* reached */
.co-stop.hit .co-stop-dot{
  background:var(--orange);border-color:var(--orange);color:#fff;
  box-shadow:0 3px 10px rgba(249,115,22,.32);
}
.co-stop.hit .co-stop-lab em{color:var(--orange-dark);}

/* the next one to reach for — the only stop that moves */
.co-stop.next .co-stop-dot{
  border-color:var(--orange);color:var(--orange-dark);
  animation:stopPulse 1.9s ease-in-out infinite;
}
@keyframes stopPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(249,115,22,.42);}
  60%{box-shadow:0 0 0 8px rgba(249,115,22,0);}
}

/* the prize */
.co-stop-goal .co-stop-dot{border-style:dashed;border-color:var(--gold-light);color:var(--gold);}
.co-stop-goal .co-stop-lab em{color:var(--gold);}
.co-prog.done .co-stop.hit .co-stop-dot{
  background:var(--success);border-color:var(--success);border-style:solid;
  box-shadow:0 3px 10px rgba(30,142,90,.3);
}
.co-prog.done .co-stop-goal .co-stop-dot{transform:scale(1.14);}
.co-prog.done .co-stop-lab em{color:var(--success);}

@keyframes progPop{0%{transform:scale(1)}45%{transform:scale(1.03)}100%{transform:scale(1)}}
.co-prog.pop{animation:progPop .5s ease;}

@media (max-width:400px){
  .co-stop-dot{width:30px;height:30px;font-size:.76rem;}
  .co-prog-track{top:13px;}
  .co-stop-lab{font-size:.64rem;}
}

/* ------------------------------------------------------- what you get */
.co-get{list-style:none;display:flex;flex-direction:column;gap:9px;}
.co-get li{display:flex;align-items:center;gap:9px;font-size:.88rem;}
.co-get-i{flex:0 0 auto;font-size:.9rem;}
.co-get li.is-free{color:var(--muted);}
.co-libre{
  font-size:.6rem;font-weight:800;letter-spacing:.05em;
  background:var(--success-bg);color:var(--success);padding:2px 7px;border-radius:5px;
}

/* ------------------------------------------------------- order summary */
.co-sum{list-style:none;display:flex;flex-direction:column;gap:11px;}
.co-sum li{display:flex;justify-content:space-between;gap:12px;font-size:.89rem;align-items:flex-start;}
.co-sum-l{display:flex;flex-direction:column;}
.co-sum li.is-free .co-sum-l{flex-direction:row;align-items:center;gap:7px;color:var(--muted);}
.co-gift{flex:0 0 auto;}
.co-sum-lede{font-size:.8rem;color:var(--muted);margin:-8px 0 13px;}
/* hairline between what is charged and what is thrown in */
.co-sum li.is-free:first-of-type{margin-top:4px;padding-top:11px;border-top:1px dashed var(--line);}
.co-sum-l small{font-size:.72rem;color:var(--success);font-weight:600;margin-top:1px;}
.co-sum-r{display:flex;flex-direction:column;align-items:flex-end;white-space:nowrap;}
.co-sum-r s{font-size:.73rem;color:var(--muted);}
.co-sum-r b{font-variant-numeric:tabular-nums;}
.co-sum-row{display:flex;justify-content:space-between;gap:12px;font-size:.89rem;margin-top:11px;}
.co-free-txt{color:var(--success);font-weight:700;}

.co-voucher{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  margin-top:12px;padding:10px 12px;border-radius:11px;
  background:var(--gold-bg);border:1px dashed var(--gold-light);
}
.co-voucher-l{display:flex;flex-direction:column;font-size:.85rem;}
.co-voucher-l b{color:var(--gold);}
.co-voucher-l span{font-size:.7rem;color:#9B7A2A;font-variant-numeric:tabular-nums;}
.co-voucher-amt{color:var(--success);font-weight:800;white-space:nowrap;}

.co-savings-band{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:12px;padding:11px 13px;border-radius:11px;color:#fff;font-weight:700;font-size:.9rem;
  background:linear-gradient(90deg,var(--gold),var(--gold-light));
}
.co-savings-band b{font-size:1.05rem;font-variant-numeric:tabular-nums;}

.co-total{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:13px;padding-top:13px;border-top:2px solid var(--line);
  font-size:1.02rem;font-weight:800;
}
.co-total b{font-size:1.42rem;color:var(--orange-dark);font-variant-numeric:tabular-nums;}

.co-guarantee{
  margin-top:15px;padding:12px 13px;border-radius:11px;
  background:var(--success-bg);border:1px solid #CFE8DA;font-size:.85rem;color:#2F5D48;
}
.co-guarantee b{display:block;color:var(--success);}
.co-qr{margin-top:13px;font-size:.85rem;font-weight:600;}
.co-pm{margin-top:5px;font-size:.77rem;color:var(--muted);}
.co-legal{text-align:center;font-size:.76rem;color:var(--muted);padding:4px 0 10px;}
.co-legal a{color:var(--orange-dark);}

/* --------------------------------------------------- savings pill + bar */
.co-savepill{
  position:fixed;bottom:76px;left:50%;transform:translateX(-50%);
  width:calc(100% - 22px);max-width:558px;z-index:39;
  background:var(--navy);color:#fff;text-align:center;
  font-size:.79rem;padding:7px 12px;border-radius:10px 10px 0 0;
}
.co-savepill b{color:#FFD24C;}

/* left:50% + translateX, never left:0+right:0+max-width — that combination is
   over-constrained and renders wider than the viewport in some browsers,
   exposing a horizontal-scroll sliver. */
.co-bar{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:580px;display:flex;align-items:center;gap:12px;
  padding:11px 13px;background:var(--white);border-top:1px solid var(--line);
  box-shadow:0 -6px 20px rgba(26,43,76,.09);z-index:40;
}
.co-bar-info{display:flex;flex-direction:column;line-height:1.2;position:relative;}
.co-bar-info b{
  font-size:1.28rem;color:var(--orange-dark);
  /* tabular-nums is load-bearing while the total tweens: without it the digits
     are proportional and the number visibly jitters as it counts. */
  font-variant-numeric:tabular-nums;
  transform-origin:left center;
}
.co-bar-info>span{font-size:.72rem;color:var(--success);font-weight:700;}

/* price pop — green on a drop, orange on a rise */
@keyframes pricePop{0%{transform:scale(1)}38%{transform:scale(1.10)}100%{transform:scale(1)}}
@keyframes priceDrop{
  0%{transform:scale(1)}
  38%{transform:scale(1.10);color:var(--success)}
  100%{transform:scale(1)}
}
.co-bar-info b.pop{animation:pricePop .38s ease;}
.co-bar-info b.drop{animation:priceDrop .46s ease;}

/* the floating delta chip */
.co-bar-delta{
  position:absolute;left:0;top:-6px;z-index:1;pointer-events:none;white-space:nowrap;
  font-size:.72rem;font-weight:800;padding:2px 8px;border-radius:20px;
  font-variant-numeric:tabular-nums;opacity:0;
}
.co-bar-delta.up{background:#FDE7E1;color:#C2410C;}
.co-bar-delta.down{background:var(--success-bg);color:var(--success);}
@keyframes deltaFloat{
  0%{opacity:0;transform:translateY(8px) scale(.9)}
  20%{opacity:1;transform:translateY(-12px) scale(1)}
  70%{opacity:1;transform:translateY(-16px)}
  100%{opacity:0;transform:translateY(-26px)}
}
.co-bar-delta.go{animation:deltaFloat 1.15s cubic-bezier(.3,1.2,.5,1) forwards;}
.co-pay{
  margin-left:auto;font:inherit;font-weight:800;font-size:1rem;color:#fff;
  background:linear-gradient(90deg,var(--orange),var(--orange-dark));
  border:0;border-radius:12px;padding:14px 26px;cursor:pointer;min-height:48px;
}
.co-pay:hover{filter:brightness(1.05);}
.co-pay:disabled{opacity:.65;cursor:default;}
.co-pay-link{display:inline-block;text-decoration:none;text-align:center;}

/* ---------------------------------------------------------- email sheet */
.co-sheet-scrim{position:fixed;inset:0;background:rgba(26,43,76,.5);z-index:50;}
.co-sheet{
  position:fixed;left:50%;bottom:0;transform:translateX(-50%);
  width:100%;max-width:580px;z-index:51;
  background:var(--white);border-radius:20px 20px 0 0;padding:22px 18px 26px;
  box-shadow:0 -10px 40px rgba(26,43,76,.25);
  animation:sheetUp .22s ease;
}
@keyframes sheetUp{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}
.co-sheet-x{
  position:absolute;top:12px;right:14px;border:0;background:transparent;
  font-size:1rem;color:var(--muted);cursor:pointer;padding:6px;line-height:1;
}
.co-label{display:block;font-size:.8rem;font-weight:600;color:var(--muted);margin:12px 0 6px;}
.co-input{
  width:100%;font:inherit;font-size:16px;   /* 16px stops iOS zooming on focus */
  padding:13px 14px;border:2px solid var(--line);border-radius:12px;
  background:var(--cream);color:var(--ink);
}
.co-input:focus{outline:none;border-color:var(--orange);background:var(--white);}
.co-err{color:var(--danger);font-size:.82rem;margin-top:7px;font-weight:600;}
.co-hint{color:var(--muted);font-size:.82rem;}
.co-sheet-pay{width:100%;margin-top:14px;margin-left:0;}
.co-sheet-note{text-align:center;font-size:.74rem;color:var(--muted);margin-top:9px;}

.co-done{text-align:center;}
.co-done p{margin-top:10px;color:var(--muted);font-size:.92rem;}

.co-toast{
  position:fixed;left:50%;transform:translateX(-50%);bottom:120px;z-index:60;
  background:var(--navy);color:#fff;padding:11px 16px;border-radius:11px;
  font-size:.86rem;max-width:90vw;text-align:center;
}

/* Any class that sets its own display needs an explicit [hidden] override:
   the UA sheet's [hidden]{display:none} ties on specificity with an author
   rule and loses on source order. Has bitten the sibling codebases 4+ times. */
.co-toast[hidden],.co-bar[hidden],.co-err[hidden],.co-sheet[hidden],
.co-sheet-scrim[hidden],.co-voucher[hidden],.co-savings-band[hidden],
.co-savepill[hidden],.co-flash[hidden],.co-bar-delta[hidden]{display:none !important;}

@media (prefers-reduced-motion:reduce){
  .co-prog.pop,.co-sheet{animation:none;}
  .co-prog-fill{transition:none;}
  /* JS already skips the tween and the chip under this setting; belt and
     braces so a class left on an element cannot animate anyway. */
  .co-bar-info b.pop,.co-bar-info b.drop,.co-bar-delta.go{animation:none;}
  .co-stop.next .co-stop-dot{animation:none;}
  .co-stop-dot,.co-prog-fill{transition:none;}
  .co-bar-delta{display:none !important;}
}
@media (max-width:420px){
  .co-pay{padding:13px 18px;font-size:.94rem;}
  .co-bar-info b{font-size:1.14rem;}
  .co-thumb{width:44px;height:44px;}
  .co-thumb-lg{width:52px;height:52px;}
  .co-check{width:19px;height:19px;}
  .on .co-check::after,.co-bump.on .co-check::after{left:5px;top:1px;height:9px;}
  .co-row{gap:8px;}
  .co-row-body>b{font-size:.92rem;}
  .co-row-sub{font-size:.78rem;}
  .co-row-price b{font-size:1rem;}
  .co-wrap{padding-left:10px;padding-right:10px;}
  .co-card{padding:15px 12px;}
}

/* ============================================================================
   SWABE OVERRIDES. Everything below is either a hardcoded colour inherited
   from the reference funnel's orange palette, or markup this funnel adds.
   ========================================================================== */

/* Inherited hardcoded hexes, repainted green. These were literals rather than
   tokens upstream, so the :root remap above could not reach them. */
.co-tier.on,.co-addon.on{background:#F3FAF5;box-shadow:0 2px 10px rgba(30,123,69,.13);}
.co-bump{background:#F7FBF8;}
.co-bump.on{background:#EDF7F0;}
.co-prog-track{background:#E4EDE7;}
.co-bar-delta.up{background:#FBE9E9;color:var(--danger);}
.co-savepill b{color:var(--gold-light);}
.co-sheet-scrim{background:rgba(26,26,26,.5);}
.co-bar{box-shadow:0 -6px 20px rgba(26,26,26,.09);}
.co-sheet{box-shadow:0 -10px 40px rgba(26,26,26,.25);}

/* The bump card is DASHED and visually foreign from the tier rows on purpose.
   MEASURED: attach fell 30.5% -> 20.6% on a sibling funnel when the equivalent
   item was homogenised into a normal product row. */
.co-bump{border-color:var(--gold-light);}
.co-bump.on{border-color:var(--orange-dark);}

/* "Ano ang dagdag" list inside the Buo tier row. The difference between the
   two tiers is the entire reason a buyer picks one, so it is listed rather
   than summarised. */
.co-more{display:flex;flex-direction:column;gap:2px;margin-top:6px;}
.co-more i{
  font-style:normal;font-size:.66rem;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--orange-dark);margin-bottom:2px;
}
.co-more span{font-size:.76rem;color:var(--muted);line-height:1.4;padding-left:14px;position:relative;}
.co-more span::before{content:"+";position:absolute;left:0;color:var(--orange);font-weight:800;}

.co-note-quiet{margin-top:12px;font-size:.77rem;color:var(--muted);line-height:1.45;}

/* The setup service is a different KIND of thing: it costs real hours. Quieter
   than the two file add-ons, last in the list, and never pre-ticked. */
.co-addon-quiet{background:#FCFCFA;}
.co-addon-quiet .co-row-body>b{font-weight:700;}
.co-addon-quiet.on{background:#F3FAF5;}

/* The one requirement, under the picker. Quiet, but not hidden: an Excel-only
   buyer who finds out AFTER paying is a refund. Slightly stronger than
   .co-note-quiet on purpose. */
.co-note-need{
  margin-top:6px;font-size:.8rem;font-weight:600;color:var(--orange-dark);
}

/* --------------------------------------------------------------- vault */

/* THE TEMPLATE BLOCK. First thing on the page after unlock, and deliberately
   the loudest: since PRODUCT_SPEC 2 changed, the Google Sheet template IS the
   product and the PDFs below are supporting material. */
.v-tpl{
  margin:-4px -4px 22px;padding:18px 16px 16px;border-radius:16px;
  background:var(--success-bg);border:1px solid var(--orange-light);
}
.v-tpl-lead{margin-top:8px;}
.v-tpl-btn{
  width:100%;margin-top:12px;font-size:1.02rem;
}
/* The three steps. Numbered, because the buyer performs them in order and the
   Setup Guide PDF numbers them the same way. */
.v-steps{
  margin:16px 0 0;padding-left:1.15rem;display:grid;gap:7px;
  font-size:.86rem;color:var(--ink);line-height:1.5;
}
.v-steps li::marker{color:var(--orange-dark);font-weight:800;}
.v-steps b{font-weight:700;}
/* The honest not-ready state. Deliberately NOT styled as an error: nothing has
   gone wrong for the buyer, the order is recorded and the link is coming. */
.v-wait{
  padding:14px;border-radius:13px;background:var(--white);
  border:1px dashed var(--gold-light);
  font-size:.86rem;color:var(--ink);line-height:1.55;
}
.v-wait b{display:block;margin-bottom:5px;font-size:.93rem;}
.v-dl-head{margin-top:4px;}

/* I15 again, and it matters MORE here than anywhere else on the site: #tpl-ready
   and #tpl-wait are toggled with el.hidden and they are mutually exclusive. If
   a display rule ever wins over [hidden] on these two, the buyer sees BOTH the
   live button and the "hindi pa handa" notice at once, which reads as broken on
   the one page a paying customer must be able to trust. Assert it here rather
   than relying on these staying plain blocks. */
#tpl-ready[hidden],#tpl-wait[hidden],.v-tpl[hidden],.v-steps[hidden],
.v-wait[hidden],.v-tpl-btn[hidden]{display:none !important;}

@media (max-width:400px){
  /* 375px: the button label and the step lines must not force a horizontal
     scroll (acceptance 7). */
  .v-tpl{margin-left:-2px;margin-right:-2px;padding:14px 12px 12px;}
  .v-tpl-btn{font-size:.95rem;}
  .v-steps{padding-left:1.05rem;font-size:.83rem;}
}

.v-file{
  display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);
  border-radius:13px;background:var(--white);margin-bottom:10px;
  text-decoration:none;color:var(--ink);
}
.v-file:hover{border-color:var(--orange);}
.v-file b{display:block;font-size:.95rem;}
.v-file span{font-size:.8rem;color:var(--muted);}
.v-file .v-dl{margin-left:auto;font-weight:800;color:var(--orange-dark);white-space:nowrap;}
.v-note{font-size:.82rem;color:var(--muted);margin-top:10px;}
/* Anything bought that has no file in the vault today gets a sentence. A buyer
   who paid for a human service and sees no matching download has no reason not
   to ask for a refund. */
.v-human{
  margin-top:12px;padding:12px 14px;border:1px dashed var(--gold-light);
  border-radius:12px;background:var(--gold-bg);
}
.v-human p{font-size:.83rem;color:var(--ink);line-height:1.5;}
.v-human p+p{margin-top:8px;}

/* I15 - any class that sets its own display needs an explicit [hidden]
   override, or el.hidden = true silently does nothing. The UA sheet's
   [hidden]{display:none} ties on specificity with an author rule and loses on
   source order. This has bitten the sibling codebases at least four times. */
.v-human[hidden],.v-file[hidden]{display:none !important;}

/* ==========================================================================
   13 Sep 2026 tighten: store header, icons, thumbnails, dock band, anchors.
   ========================================================================== */
.ic{width:1em;height:1em;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;vertical-align:-.12em;}

/* Header: the store's own header.site + nav.wrap, plus the secure chip. */
.co-top header.site{position:static;}
.co-top nav.wrap{max-width:580px;padding:9px 13px;}
.co-secure{
  display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;
  color:var(--orange-dark);background:var(--success-bg);border:1px solid #CFE8DA;
  padding:4px 9px;border-radius:999px;white-space:nowrap;
}

/* Cards: tighter. */
.co-card{padding:15px 14px;}
.co-h2{margin-bottom:11px;}
.co-thumb{
  width:56px;height:56px;border-radius:9px;object-fit:cover;flex:0 0 56px;
  border:1px solid var(--line);background:#fff;
}
.co-row{align-items:center;}
.co-row-sub{font-size:.79rem;line-height:1.4;}
.co-more{margin-top:3px;}
.co-more span{font-size:.74rem;line-height:1.35;}
.co-note-need{display:flex;align-items:center;gap:6px;margin-top:10px;}
.co-note-need .ic{font-size:1rem;}
.co-bump-body{align-items:center;}
.co-bump-text{min-width:0;}

/* Summary trust rows + payment strip. */
.co-trust{list-style:none;margin-top:13px;display:grid;gap:7px;}
.co-trust li{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--ink);}
.co-trust .ic{font-size:1.05rem;color:var(--orange-dark);}
.co-paywith{
  margin-top:13px;padding:9px 11px;border:1px solid var(--line);border-radius:11px;
  display:flex;align-items:center;gap:10px;background:#fff;
}
.co-paywith img{height:20px;width:auto;flex:0 0 auto;}
.co-paywith span{font-size:.75rem;color:var(--muted);line-height:1.35;}
.co-qr{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:.78rem;font-weight:500;color:var(--muted);}
.co-qr .ic{font-size:1rem;color:var(--orange-dark);}
.co-legal{font-size:.72rem;}

/* DOCK: band on top of the bar. .co-bar is still the fixed element the paid
   state hides, so the whole dock goes with it. */
body{padding-bottom:150px;}
.co-bar{flex-direction:column;gap:0;padding:0;align-items:stretch;}
.co-band{
  display:flex;justify-content:space-between;gap:6px;
  padding:6px 13px;background:var(--success-bg);border-bottom:1px solid #CFE8DA;
  font-size:.68rem;font-weight:700;color:var(--orange-dark);line-height:1.2;
}
.co-band>span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;min-width:0;}
.co-band>span i{font-style:normal;opacity:.6;margin:0 1px;}
.co-band .ic{font-size:.9rem;}
.co-band-save b{color:var(--danger);}
.co-bar-main{display:flex;align-items:center;gap:12px;padding:10px 13px;}
.co-bar-price{display:flex;align-items:baseline;gap:7px;}
.co-bar-price s{font-size:.8rem;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums;}
.co-bar-price s:empty{display:none;}
@media(max-width:380px){
  .co-band{font-size:.63rem;padding:5px 10px;}
  .co-thumb{width:48px;height:48px;flex-basis:48px;}
}

/* Email sheet: tighter. */
.co-sheet .co-h1{margin-bottom:12px;}
.co-sheet-note{display:flex;align-items:center;justify-content:center;gap:6px;}
.co-bump-sub b{display:inline;color:var(--orange-dark);}
.co-band>span:first-child{color:var(--gold);}
/* Rotating band: one message at a time, cross-fade every 3s (js/checkout.js). */
.co-band{display:grid;justify-content:center;text-align:center;min-height:30px;align-items:center;}
.co-band>span{grid-area:1/1;justify-content:center;opacity:0;transition:opacity .45s ease;pointer-events:none;}
.co-band>span.show{opacity:1;}
.co-band{font-size:.74rem;}
.co-gold-pulse{color:var(--gold);animation:goldPulse 1.2s ease-in-out infinite;display:inline-block;}
@keyframes goldPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.18);opacity:.75}}
@media(prefers-reduced-motion:reduce){.co-gold-pulse{animation:none;}.co-band>span{transition:none;}}
.co-row-price s{display:block;font-size:.72rem;color:var(--muted);text-align:right;line-height:1;}
.co-row-price s:empty{display:none;}
.co-band-save{color:var(--gold);}
.co-band-save .ic{color:var(--gold);}

/* 9 Oct 2026, SWABE_DESIGN_CONTRACT.md: QR Ph logo inside every pay button.
   A pseudo-element because js/checkout.js rewrites the button's textContent
   ("Bayaran, ₱X") on every render; an <img> child would be wiped. */
.co-pay:not(.co-pay-link){display:inline-flex;align-items:center;justify-content:center;gap:8px;}
.co-pay:not(.co-pay-link)::after{
  content:"";flex:0 0 auto;width:52px;height:18px;border-radius:5px;
  background:#fff url(/assets/brand/qrph.svg) center/44px auto no-repeat;
}
.co-pay:disabled::after{opacity:.7;}
.co-flag{text-transform:none;letter-spacing:.01em;font-size:.7rem;color:#1A1A1A;background:#F6C453;border:1.5px solid var(--gold);}