/* Snipit website: the pages other than Home (Oct 2026 revamp). Loaded after styles.css, which holds the tokens, fonts,
   header, buttons and motion. Everything here sits under .pg / .pg-hero / .site-foot, so the phone mockups on Home
   (which also use .card, .row, .big…) are never touched. */
:root{--gold:#9A6A12;--gold-tint:#F7EFDD;--lift:0 1px 2px rgba(23,32,28,.04),0 8px 22px -10px rgba(23,32,28,.16)}
:root[data-theme="dark"]{--gold:#E3B65E;--gold-tint:#2A2314;--lift:0 1px 0 rgba(255,255,255,.03),0 10px 24px -12px rgba(0,0,0,.6)}

/* ---------- header on the pages: the tabs are pages ---------- */
.tabs a[aria-current="page"]{color:var(--ink);background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.08),0 4px 10px -4px rgba(0,0,0,.12)}
.tabs a.nav-sp{color:var(--gold)}
.mobile-tabs a[aria-current="page"]{color:var(--ink);border-color:var(--accent)}
.mobile-tabs a.nav-sp{color:var(--gold)}
#theme .sun{display:none}
:root[data-theme="dark"] #theme .sun{display:block}
:root[data-theme="dark"] #theme .moon{display:none}
@media (max-width:1100px){.tabs a{padding:0 11px;font-size:.9rem}}

/* ---------- page hero: words on the left, a Snipit sticker on the right ---------- */
.pg-hero{position:relative;overflow:clip;padding:clamp(28px,5vw,64px) 0 clamp(20px,3vw,36px)}
.pg-hero::before{content:"";position:absolute;inset:0 0 auto;height:100%;background:radial-gradient(60% 80% at 85% 30%,var(--green-tint),transparent 70%);pointer-events:none}
.pg-hero .wrap,.pg .wrap{width:min(1040px,100% - 32px)}
.pg-hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,220px);gap:clamp(16px,4vw,48px);align-items:center}
.pg-hero h1{font-size:clamp(2.3rem,5.4vw,4rem);margin-top:14px;overflow-wrap:break-word}
.pg-hero .lead{margin-top:16px}
.pg-hero .cta-row{margin-top:24px}
.pg-hero .fine{margin-top:14px}
.pg-art{--mx:0;--my:0;position:relative;display:grid;place-items:center;aspect-ratio:1;width:100%;max-width:220px;justify-self:end}
.pg-art .blob{inset:10%}
.pg-art .sticker{position:relative;width:86%;filter:drop-shadow(0 18px 22px rgba(0,0,0,.18));animation:bob 5.5s ease-in-out infinite;
  translate:calc(var(--mx) * -12px) calc(var(--my) * -9px);transition:translate .3s ease-out}
.pg-art .blob{translate:calc(var(--mx) * 10px) calc(var(--my) * 8px);transition:translate .35s ease-out}
.pg-art .sq.s1{top:6%;left:8%}.pg-art .sq.s2{bottom:12%;right:2%}.pg-art .sq.s3{top:40%;left:-2%}
@media (max-width:720px){
  .pg-hero .wrap{grid-template-columns:minmax(0,1fr) 112px;gap:12px;align-items:start}
  .pg-art{max-width:112px}
  .pg-art .sq{display:none}
  .pg-hero h1{font-size:clamp(2rem,9vw,2.6rem)}
  .pg-hero .lead{font-size:1.05rem}
  .pg-hero .cta-row{grid-column:1/-1}
}
/* a compact hero (Support): the QR code shows without scrolling on a phone */
.pg-hero.compact{padding-bottom:8px}
@media (max-width:720px){
  .pg-hero.compact{padding-top:16px}
  .pg-hero.compact .wrap{grid-template-columns:72px minmax(0,1fr)}
  .pg-hero.compact .pg-art{order:-1;max-width:72px}
  .pg-hero.compact .eyebrow{display:none}
  .pg-hero.compact h1{font-size:1.75rem;margin:0}
  .pg-hero.compact .lead{font-size:.95rem;margin-top:6px}
}

/* ---------- page body ---------- */
.pg{padding:8px 0 clamp(48px,8vw,96px)}
.pg p{margin:10px 0 0}
.pg :where(p,li) a:not(.btn){color:var(--accent);font-weight:600;text-underline-offset:3px}
.pg h2{font-size:clamp(1.55rem,3.2vw,2.2rem);margin:clamp(36px,6vw,64px) 0 6px}
.pg h2 + .lead,.pg h2 + p{margin-top:8px}
.pg h3{font-size:1.2rem}
.pg .lead{font-size:1.1rem}
.pg .muted{color:var(--muted)}
.pg .small{font-size:.9rem}
.pg code{font-family:ui-monospace,Consolas,monospace;font-size:.92em;background:var(--sunk);padding:1px 6px;border-radius:6px}
.prose{max-width:46em}
.pg .btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.btn-gold{background:var(--gold);color:var(--paper)}
.btn-gold:hover{transform:translateY(-2px)}

/* cards */
.pg .card{background:var(--surface);border-radius:22px;padding:clamp(18px,3vw,26px);box-shadow:var(--lift);margin-top:16px;font-size:1rem;position:relative}
.pg .card.green{background:var(--green-tint);box-shadow:none}
.pg .card.blue{background:var(--blue-tint);box-shadow:none}
.pg .card.gold{background:var(--gold-tint);box-shadow:none}
.pg .card > :first-child{margin-top:0}
.pg .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:14px;margin-top:16px}
.pg .grid .card{margin-top:0}
.ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--green-tint);color:var(--accent);margin-bottom:14px}
.ic svg{width:24px;height:24px}
.card.green .ic,.card.blue .ic{background:var(--surface)}
.ic.blue{background:var(--blue-tint);color:var(--blue)}
.ic.gold{background:var(--gold-tint);color:var(--gold)}
.lift-hover{transition:transform .25s,box-shadow .25s}
.lift-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card .sticker-peek{position:absolute;right:14px;bottom:-6px;width:96px;pointer-events:none;filter:drop-shadow(0 10px 12px rgba(0,0,0,.15))}
.card.has-peek{padding-right:120px}
@media (max-width:560px){.card.has-peek{padding-right:clamp(18px,3vw,26px);padding-bottom:96px}.card .sticker-peek{width:84px}}

/* "In short" */
.short{display:flex;gap:14px;align-items:flex-start}
.short b{color:var(--accent)}

/* lists */
.pg ul.clean{list-style:none;padding:0;margin:10px 0 0}
.pg ul.clean li{position:relative;padding:12px 0 12px 22px;border-top:1px solid var(--line);color:var(--ink2)}
.pg ul.clean li:first-child{border-top:0}
.pg ul.clean li::before{content:"";position:absolute;left:2px;top:calc(12px + .55em);width:9px;height:9px;border-radius:2px;background:var(--blue)}
.pg ol.steps{list-style:none;counter-reset:st;padding:0;margin:12px 0 0;display:grid;gap:10px}
.pg ol.steps li{counter-increment:st;position:relative;padding:4px 0 4px 46px;min-height:36px;color:var(--ink2)}
.pg ol.steps li::before{content:counter(st);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);font:800 .95rem var(--f-head)}

/* numbered step cards (Download) */
.step-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px;counter-reset:sc;list-style:none;padding:0}
.step-cards li{counter-increment:sc;background:var(--surface);border-radius:22px;padding:22px;box-shadow:var(--lift);color:var(--ink2)}
.step-cards li::before{content:counter(sc);display:block;font:800 3rem/1 var(--f-head);color:var(--accent);letter-spacing:-.04em;margin-bottom:10px}
.step-cards b:first-child{display:block;color:var(--ink);font:800 1.15rem/1.2 var(--f-head);margin-bottom:6px}
@media (max-width:820px){.step-cards{grid-template-columns:minmax(0,1fr)}.step-cards li{position:relative;padding-left:66px}.step-cards li::before{position:absolute;left:22px;top:18px;font-size:2.4rem}}

/* the download panel */
.dl-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;background:var(--accent);color:var(--accent-ink);border-radius:28px;padding:clamp(22px,4vw,36px);position:relative;overflow:hidden}
.dl-panel h2{margin:0;font-size:clamp(1.5rem,3vw,2.1rem)}
.dl-panel p{opacity:.92}
.dl-panel .btn-light{background:var(--accent-ink);color:var(--accent)}
.dl-panel .btn-light:hover{transform:translateY(-2px)}
.dl-panel a:not(.btn){color:inherit!important}
.dl-panel .ver-big{font:800 clamp(3rem,8vw,5rem)/1 var(--f-head);letter-spacing:-.04em;opacity:.95}
.dl-panel .sq{background:#fff;opacity:.85}
@media (max-width:640px){.dl-panel{grid-template-columns:minmax(0,1fr)}.dl-panel .ver-big{display:none}}

/* FAQ (Help, Download) */
.faq-list{padding:6px clamp(16px,3vw,26px)!important}
.pg details.faq{border-top:1px solid var(--line)}
.pg details.faq:first-child{border-top:0}
.pg details.faq summary{cursor:pointer;font:700 1.05rem/1.35 var(--f-body);min-height:56px;display:flex;align-items:center;gap:12px;list-style:none;padding:8px 0}
.pg details.faq summary::-webkit-details-marker{display:none}
.pg details.faq summary::after{content:"";flex:none;margin-left:auto;width:28px;height:28px;border-radius:9px;background:var(--sunk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6A64' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/16px no-repeat;transition:rotate .25s}
.pg details.faq[open] summary::after{rotate:45deg}
.pg details.faq p{margin:0 0 16px;color:var(--ink2);max-width:44em}
.finder{display:flex;align-items:center;gap:10px;background:var(--surface);border:1.5px solid var(--line2);border-radius:14px;padding:0 14px;min-height:52px;margin-top:6px;max-width:520px}
.finder[hidden]{display:none}
.finder:focus-within{border-color:var(--accent)}
.finder svg{width:20px;height:20px;color:var(--muted);flex:none}
.finder input{flex:1;min-width:0;border:0;background:transparent;font:500 1rem var(--f-body);color:var(--ink);min-height:48px;outline:none}

/* guide: contents beside the sections */
.guide-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:start;margin-top:12px}
.toc{position:sticky;top:calc(var(--head) + 18px);display:grid;gap:2px;background:var(--surface);border-radius:20px;padding:10px;box-shadow:var(--lift)}
.toc .toc-h{font:700 .74rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:10px 12px 8px}
.pg .toc a{display:flex;align-items:center;min-height:40px;padding:7px 12px;line-height:1.3;border-radius:10px;text-decoration:none;color:var(--ink2);font-weight:600;font-size:.95rem}
.pg .toc a:hover{background:var(--sunk)}
.pg .toc a[aria-current="true"]{background:var(--green-tint);color:var(--accent)}
.guide-sec{background:var(--surface);border-radius:22px;padding:clamp(18px,3vw,28px);box-shadow:var(--lift);margin-bottom:16px}
.guide-sec h2{margin:0 0 6px!important;font-size:clamp(1.35rem,2.6vw,1.75rem)!important}
.guide-sec h2 .n{color:var(--accent);margin-right:.3em}
@media (max-width:860px){
  .guide-layout{grid-template-columns:minmax(0,1fr)}
  .toc{position:relative;top:auto;grid-template-columns:1fr 1fr}
  .toc .toc-h{grid-column:1/-1}
}
@media (max-width:480px){.toc{grid-template-columns:minmax(0,1fr)}}

/* updates: a timeline */
.latest{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.timeline{position:relative;margin-top:22px;padding-left:34px}
.timeline::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:var(--line2);border-radius:2px}
.post{position:relative;background:var(--surface);border-radius:22px;padding:clamp(18px,3vw,24px);box-shadow:var(--lift);margin-bottom:16px}
.post::before{content:"";position:absolute;left:-29px;top:26px;width:14px;height:14px;border-radius:4px;background:var(--surface);border:3px solid var(--line2)}
.post.is-new::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 6px var(--green-tint)}
.post time{font-size:.9rem;color:var(--muted);font-weight:600}
.post h3{margin-top:8px;font-size:1.3rem}
.post ul{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.post li{position:relative;padding-left:18px;color:var(--ink2)}
.post li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:2px;background:var(--accent)}
.badge{display:inline-flex;align-items:center;font-size:.8rem;font-weight:700;border-radius:8px;padding:3px 9px;background:var(--sunk);color:var(--ink2);margin-left:6px}
.badge.new{background:var(--accent);color:var(--accent-ink)}

/* Support: one wallet at a time (radio switch, no script) */
.wallets{margin-top:14px}
.wallets > input{position:absolute;opacity:0;pointer-events:none}
.wallets > label{display:inline-flex;align-items:center;justify-content:center;min-height:46px;min-width:116px;padding:0 18px;margin:0 6px 12px 0;border-radius:12px;background:var(--sunk);color:var(--ink2);font-weight:700;cursor:pointer;transition:background .2s}
.wallets > input:focus-visible + label{outline:3px solid var(--blue);outline-offset:2px}
#w-gcash:checked + label{background:#0059D6;color:#fff}
#w-maya:checked + label{background:#007A43;color:#fff}
.tip-panel{display:none;background:var(--surface);border-radius:24px;box-shadow:var(--lift);overflow:hidden;max-width:720px}
#w-gcash:checked ~ #p-gcash,#w-maya:checked ~ #p-maya{display:block;animation:pop .35s cubic-bezier(.3,1.3,.5,1)}
.tip-band{padding:12px 20px;color:#fff;font:800 1.25rem var(--f-head);letter-spacing:-.01em}
#p-gcash .tip-band{background:#0059D6}
#p-maya .tip-band{background:#007A43}
.tip-body{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;padding:20px}
.tip-qr{background:#fff;border-radius:18px;padding:12px;border:1px solid var(--line)}
.tip-qr img{width:240px;height:240px}
.pg .tip-steps{margin:0;padding-left:20px;color:var(--ink2)}
.pg .tip-steps li{margin:8px 0}
.tip-save{margin:0 20px 20px}
@media (max-width:560px){
  .tip-body{grid-template-columns:minmax(0,1fr);justify-items:center;padding:14px}
  .tip-qr img{width:min(240px,66vw);height:auto}
  .tip-save{display:flex}
}

/* sponsors */
.sp-eyebrow{font:700 .76rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.sp-tag{display:inline-block;font-size:.8rem;font-weight:700;border-radius:8px;padding:3px 9px;background:var(--sunk);color:var(--ink2);margin:6px 4px 0 0}
.sp-tag.gold{background:var(--gold-tint);color:var(--gold)}
.sp-spot{margin-top:20px}
.sp-spot > .sp-feat + .sp-feat{display:none}
.sp-spot.js > .sp-feat{display:none}
.sp-spot.js > .sp-feat.on{display:grid}
.sp-feat{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);background:var(--surface);border:2px solid var(--gold);border-radius:26px;overflow:hidden;box-shadow:var(--lift)}
.sp-cover{display:grid;place-items:center;min-height:220px;position:relative}
.sp-cover img{width:150px;height:150px;border-radius:30px;border:5px solid #fff;box-shadow:0 14px 30px rgba(0,0,0,.3);object-fit:cover;animation:bob 6s ease-in-out infinite}
.sp-feat .sp-body{padding:clamp(20px,3vw,32px);display:block}
.sp-feat .sp-body h3{font:800 clamp(1.5rem,3vw,2rem)/1.1 var(--f-head);letter-spacing:-.02em;margin:8px 0 4px}
.sp-feat .sp-body p{margin:6px 0;color:var(--ink2)}
.sp-feat .sp-body a.btn{color:#fff;margin-top:14px;font-weight:700}
.sp-visit{background:#1877F2;color:#fff}
.sp-visit:hover{transform:translateY(-2px)}
@media (max-width:680px){.sp-feat,.sp-spot.js > .sp-feat.on{grid-template-columns:minmax(0,1fr);text-align:center}.sp-cover{min-height:150px}.sp-cover img{width:112px;height:112px}}
.sp-strip{background:var(--gold-tint);border-radius:22px;padding:16px 18px;margin-top:22px}
.sp-logos{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0 8px}
.sp-logos a{display:block;border-radius:14px;transition:transform .2s}
.sp-logos a:hover{transform:translateY(-3px) rotate(-2deg)}
.sp-logos img{width:56px;height:56px;border-radius:14px;object-fit:cover;box-shadow:0 2px 6px rgba(0,0,0,.14);display:block}
.sp-all{color:var(--gold)!important;font-weight:700;font-size:.92rem;text-decoration:none}
.sp-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px;margin-top:16px}
.sp-card{display:flex;align-items:center;gap:16px;background:var(--surface);border-radius:22px;padding:16px;box-shadow:var(--lift);text-decoration:none;color:var(--ink);min-height:108px;transition:transform .25s,box-shadow .25s}
.sp-card:hover{transform:translateY(-4px) rotate(-.3deg);box-shadow:var(--shadow)}
.sp-card img{width:76px;height:76px;border-radius:18px;object-fit:cover;flex:none}
.sp-card.small img{width:52px;height:52px}
.sp-text{display:flex;flex-direction:column;align-items:flex-start;flex:1;min-width:0}
.sp-text b{font:800 1.1rem/1.2 var(--f-head)}
.sp-text .muted{font-size:.95rem}
.sp-go{color:var(--accent);font-weight:800;font-size:1.4rem}
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}
.tier{background:var(--surface);border-radius:22px;padding:22px;box-shadow:var(--lift);display:flex;flex-direction:column;gap:6px}
.tier.top{border:2px solid var(--gold)}
.tier h3{font-size:1.25rem}
.tier .what{color:var(--ink2);font-size:.98rem}
@media (max-width:820px){.tiers{grid-template-columns:minmax(0,1fr)}}
.join{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:18px;align-items:center;background:var(--gold-tint);border-radius:28px;padding:clamp(22px,4vw,36px);margin-top:18px}
.join img{width:100%;animation:wiggle 5s ease-in-out infinite;transform-origin:50% 90%}
@media (max-width:640px){.join{grid-template-columns:minmax(0,1fr) 96px}}

/* 404 */
.lost{text-align:center;padding:clamp(40px,8vw,96px) 0}
.lost img{width:min(200px,50vw);margin:0 auto 12px;animation:bob 5s ease-in-out infinite}
.lost h1{font-size:clamp(2.2rem,6vw,3.6rem)}
.lost .lead{margin:14px auto 0}
.lost .btns{justify-content:center}

/* ---------- footer (every page) ---------- */
.site-foot{background:var(--sunk);border-top:1px solid var(--line);padding:clamp(36px,6vw,64px) 0 28px;color:var(--muted);font-size:.95rem;margin-top:0}
.site-foot .wrap{width:min(1160px,100% - 32px)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:24px 32px}
.foot-brand{position:relative;padding-right:90px;max-width:380px}
.foot-brand .brand{margin-bottom:10px;color:var(--ink)}
.foot-brand p{margin:0;color:var(--muted)}
.foot-brand .sticker{position:absolute;right:0;top:-10px;width:84px;animation:wiggle 4.5s ease-in-out infinite;transform-origin:50% 90%}
.site-foot nav{display:flex;flex-direction:column;align-items:flex-start}
.site-foot .foot-h{font:700 .74rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin:6px 0 6px}
.site-foot nav a{display:inline-flex;align-items:center;min-height:40px;text-decoration:none;font-weight:600;color:var(--ink2)}
.site-foot a:hover{color:var(--accent)}
.foot-base{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:center;margin-top:28px;padding-top:20px;border-top:1px solid var(--line2)}
.foot-base a{color:var(--ink2);font-weight:600;text-decoration:none}
.site-foot .sp-strip{background:var(--surface);margin:0 0 32px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.site-foot .sp-strip .sp-logos{margin:0}
.site-foot .sp-strip .sp-logos img{width:44px;height:44px;border-radius:11px}
@media (max-width:820px){.foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.foot-brand{grid-column:1/-1}}
@media (max-width:420px){.foot-brand{padding-right:76px}.foot-brand .sticker{width:68px}}

@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
[id]{scroll-margin-top:calc(var(--head) + 12px)}
@media (max-width:980px){[id]{scroll-margin-top:calc(var(--head) + 56px)}}
@media (prefers-reduced-motion:reduce){.pg-art .sticker,.pg-art .blob{translate:none}}
/* stickers keep their shape (the img tags carry width/height for layout, CSS sets the size) */
.pg-art .sticker,.sticker-peek,.foot-brand .sticker,.join img,.lost img{height:auto;aspect-ratio:1}