/* ===========================================================================
   Front site - warm gradient.

   One colour in, a whole palette out: --brand comes from the theme colour in
   Settings and everything else is mixed from it with color-mix(). A plain
   value is declared first in each pair, so a browser that does not know
   color-mix() keeps a sensible pink rather than an invalid one.

   The class vocabulary is the same as the default theme's, because a theme
   only ships the views whose structure differs and inherits the rest - the
   order page, the tracking page, the modal and the footer all render through
   this stylesheet.
   =========================================================================== */
*,*::before,*::after{box-sizing:border-box}
/* A `display` in a rule beats the hidden attribute, and several below
   set one - so say outright that hidden means hidden. */
[hidden]{display:none!important}
:root{
  --brand:#ff1680;

  --brand-2:#ff6845;
  --brand-2:color-mix(in oklab, var(--brand) 58%, #ff9a3c);
  --brand-deep:#8f0d3f;
  --brand-deep:color-mix(in oklab, var(--brand) 56%, #43001c);
  --brand-soft:#fff0f6;
  --brand-soft:color-mix(in srgb, var(--brand) 7%, #fff);
  --brand-line:#ffd0df;
  --brand-line:color-mix(in srgb, var(--brand) 22%, #fff);

  --ink:#17213c; --ink-2:#3c4869; --muted:#71809c;
  /* The page is tinted and a surface is white. A white card on a white
     page is only its 1.5px border, which on a phone is nothing at all -
     the eye cannot find where one card ends and the next begins. The
     tint is mixed from the brand so it warms with it. */
  --bg:#fbf5f8;
  --bg:color-mix(in srgb, var(--brand) 5%, #f6f7fb);
  --surface:#ffffff; --bg-soft:#f7f8fc; --line:#edf0f6;
  --ok:#16a34a; --warn:#f59e0b; --radius:28px;
  --shadow:0 1px 3px rgba(23,33,60,.05), 0 10px 28px rgba(23,33,60,.06);
  --shadow-lg:0 10px 26px rgba(255,22,128,.12), 0 28px 64px rgba(23,33,60,.12);
  --grad:linear-gradient(135deg,var(--brand),var(--brand-2));
  --grad-deep:linear-gradient(125deg,var(--brand-deep) 0%,var(--brand) 55%,var(--brand-2) 100%);
}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.6;overflow-x:hidden;padding-bottom:40px}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.18;letter-spacing:-.025em}
p{margin:0}
button,input,select{font:inherit;color:inherit}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}
.icon{width:1em;height:1em;display:inline-block;vertical-align:-.125em;fill:currentColor;flex:none}

/* ---------- scrollbars ----------
   The browser default is a wide grey slab with arrow buttons, and inside a
   rounded modal it sits right on the corner. This is the one piece of
   browser chrome a page is allowed to restyle, so it is worth doing. */
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px;
  border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--muted);background-clip:padding-box;border-width:2px}
::-webkit-scrollbar-button{display:none}
::-webkit-scrollbar-corner{background:transparent}
/* Keep the modal's bar clear of its rounded corner. */
.modal{scrollbar-gutter:stable}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;
  padding:13px 24px;font-weight:700;font-size:15px;cursor:pointer;white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 2px 6px rgba(255,22,128,.28)}
.btn-primary:hover{box-shadow:0 5px 14px rgba(255,22,128,.38)}
.btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--brand-line);background:var(--brand-soft)}
.btn-wa{background:#25d366;color:#fff;box-shadow:0 8px 22px rgba(37,211,102,.3)}
.btn-lg{padding:16px 32px;font-size:17px}
.btn-block{width:100%}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:18px;height:74px}
.logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:20px;letter-spacing:-.035em}
.logo-mark{width:38px;height:38px;border-radius:12px;flex:none;background:var(--grad);color:#fff;
  display:grid;place-items:center;font-size:19px;box-shadow:0 6px 16px rgba(255,22,128,.32)}
.logo small{display:block;font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.07em;
  text-transform:uppercase;line-height:1}
.nav-links{display:flex;gap:2px;margin-left:14px}
.nav-links a{padding:9px 15px;border-radius:999px;font-weight:600;font-size:15px;color:var(--ink-2)}
.nav-links a:hover,.nav-links a.active{background:var(--brand-soft);color:var(--brand)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.wa-link{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:14px;color:#128c7e}
.wa-link:hover{text-decoration:underline}
.burger{display:none;background:none;border:1.5px solid var(--line);border-radius:12px;padding:9px 11px;cursor:pointer}

/* ---------- hero band ----------
   The gradient runs edge to edge and the chooser below overlaps its bottom,
   so the two read as one unit and picking a platform is the first thing on
   the page. */
.hero{position:relative;background:var(--grad-deep);color:#fff;padding:60px 0 120px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 0 55%,rgba(255,255,255,.06) 55% 100%)}
.hero::after{content:"";position:absolute;width:560px;height:560px;border-radius:50%;
  background:rgba(255,255,255,.08);filter:blur(80px);top:-280px;right:-120px}
.hero .wrap{position:relative;z-index:1}
/* minmax(0,...) rather than a bare 1fr: `1fr` is `minmax(auto,1fr)`, and
   that auto floor is the item's min-content width - a column then refuses
   to go narrower than the widest unbreakable thing inside it and the item
   spills out of the grid, where nothing can scroll to reach it. */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:52px;align-items:center}
.badge-trust{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.26);border-radius:999px;padding:7px 16px 7px 8px;
  font-size:13.5px;font-weight:700;backdrop-filter:blur(6px)}
.stars{display:inline-flex;gap:1px;color:#ffd84d}
.avatars{display:flex;padding-right:9px}
.avatars span{width:24px;height:24px;border-radius:50%;border:2px solid rgba(255,255,255,.85);
  margin-right:-9px;background:rgba(255,255,255,.22);display:grid;place-items:center;
  font-size:10px;color:#fff;font-weight:800}
h1{font-size:clamp(30px,4.6vw,52px);font-weight:800;margin:20px 0 16px}
h1 .grad{color:#ffe6b0;color:color-mix(in srgb, #fff 78%, var(--brand-2))}
.hero-sub{color:rgba(255,255,255,.86);font-size:16px;max-width:54ch}
.hero-sub b{color:#fff}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:28px 0}
.stat{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:18px;
  padding:16px 12px;text-align:center;backdrop-filter:blur(6px)}
.stat .si{width:38px;height:38px;border-radius:12px;margin:0 auto 9px;display:grid;place-items:center;
  background:rgba(255,255,255,.2);color:#fff;font-size:18px}
.stat b{display:block;font-size:14.5px;font-weight:800}
.stat small{color:rgba(255,255,255,.76);font-size:11.5px;font-weight:600}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero .hero-cta .btn-primary{background:#fff;color:var(--brand);box-shadow:0 10px 28px rgba(0,0,0,.18)}
.hero-note{font-size:13px;color:rgba(255,255,255,.8);display:flex;align-items:center;gap:6px;font-weight:600}
.hero .hero-note .icon{color:#9ff5bd!important}

/* profile card */
.pcard{background:#fff;border-radius:26px;padding:24px;box-shadow:0 20px 50px rgba(23,33,60,.25);
  position:relative;color:var(--ink)}
.pcard-top{display:flex;align-items:center;gap:15px}
.pavatar{width:68px;height:68px;border-radius:50%;flex:none;padding:3px;
  background:conic-gradient(from 210deg,#f9ce34,#ee2a7b,#6228d7,#f9ce34)}
.pavatar i{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:#fff;
  font-size:27px;font-style:normal}
.phandle{font-weight:800;font-size:17px;display:flex;align-items:center;gap:6px}
.verified{color:#3897f0;font-size:15px}
.pbio{color:var(--muted);font-size:13px;font-weight:600}
.pstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:20px 0;text-align:center;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:15px 0}
.pstats b{display:block;font-size:19px;font-weight:800;transition:color .3s}
.pstats small{color:var(--muted);font-size:11.5px;font-weight:600}
.pstats .up b{color:var(--ok)}
.pbtns{display:flex;gap:9px}
.pbtns .btn{flex:1;padding:11px;font-size:14px}
.float-pill{position:absolute;top:-16px;right:18px;background:var(--ok);color:#fff;font-weight:800;
  font-size:12.5px;padding:8px 15px;border-radius:999px;box-shadow:0 8px 20px rgba(22,163,74,.35);
  animation:bob 3s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ---------- the platform chooser ----------
   Lifted out of the services section and up onto the hero, because choosing
   the platform is the decision the whole page hangs off. */
.psec{margin-top:-78px;position:relative;z-index:2;padding:0}
.chooser{background:#fff;border-radius:26px;padding:20px;box-shadow:0 14px 44px rgba(23,33,60,.16)}
.chooser-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 4px 14px}
.chooser-head b{font-size:15.5px;font-weight:800}
.chooser-head span{color:var(--muted);font-size:13px;font-weight:600}
.plat-scroll{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.plat-scroll::-webkit-scrollbar{display:none}
.plats{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(118px,1fr);gap:10px;min-width:max-content}
.plat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  background:var(--bg-soft);border:1.5px solid transparent;border-radius:18px;padding:16px 12px;
  font-weight:700;font-size:14px;cursor:pointer;color:var(--ink-2);text-align:center;
  transition:border-color .18s, transform .18s, box-shadow .18s, color .18s}
.plat .icon{font-size:26px;color:var(--pc,var(--brand))}
.plat:hover{transform:translateY(-3px);border-color:var(--brand-line);background:#fff;
  box-shadow:0 10px 24px rgba(23,33,60,.08)}
.plat.active{color:#fff;background:var(--pc,var(--brand));border-color:transparent;
  box-shadow:0 10px 24px -4px var(--pc,var(--brand))}
.plat.active .icon{color:#fff}

/* ---------- services ---------- */
.section{padding:56px 0}
.section-head{text-align:center;max-width:680px;margin:0 auto 32px}
.eyebrow{display:inline-block;background:var(--brand-soft);color:var(--brand);font-weight:800;
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;padding:6px 14px;border-radius:999px;
  margin-bottom:14px}
h2{font-size:clamp(25px,3.4vw,36px);font-weight:800}
.section-head p{color:var(--ink-2);margin-top:12px}
.tabs{display:flex;gap:6px;justify-content:center;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:6px;width:max-content;max-width:100%;margin:0 auto 34px;
  overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{border:0;background:none;border-radius:999px;padding:10px 26px;font-weight:700;font-size:14.5px;
  cursor:pointer;color:var(--ink-2);white-space:nowrap;transition:background .18s, color .18s}
.tab:hover{color:var(--brand)}
.tab.active{background:var(--grad);color:#fff;box-shadow:0 6px 16px rgba(255,22,128,.26)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
  gap:16px;align-items:stretch}
.card{container-type:inline-size;min-width:0;background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);padding:26px;
  display:flex;flex-direction:column;position:relative;box-shadow:var(--shadow);
  transition:transform .2s, box-shadow .2s, border-color .2s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--brand-line)}
.card.featured{border-color:transparent;box-shadow:var(--shadow-lg)}
.card.featured::before{content:"";position:absolute;inset:-1.5px;border-radius:var(--radius);
  background:var(--grad);z-index:-1}
.cbadge{position:absolute;top:-13px;left:24px;background:var(--grad);color:#fff;font-size:11.5px;
  font-weight:800;padding:7px 15px;border-radius:999px;letter-spacing:.03em;
  box-shadow:0 6px 16px rgba(255,22,128,.35)}
.card h3{font-size:19px;margin:8px 0 7px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cdesc{color:var(--muted);font-size:13.5px;font-weight:500;min-height:40px}

/* ---- quantity + amount (kept deliberately plain) ---- */
.qp{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:20px 0 0;min-width:0}
.qp-f{min-width:0}
/* Side by side only where the amount actually fits; stacked otherwise,
   because a cut-off price is worse than a tall card. A browser without
   container queries keeps the stacked default, which is never wrong. */
@container (min-width: 300px){ .qp{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
.qp-f>span{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:8px}
.qp input,.qp .price{width:100%;min-width:0;height:54px;border:1.5px solid var(--line);
  border-radius:14px;padding:0 13px;font-size:18px;font-weight:800;letter-spacing:-.02em;
  outline:none;background:var(--bg-soft);display:flex;align-items:center;font-family:inherit}
.qp .price{white-space:nowrap;display:block;line-height:52px}
.qp input{-moz-appearance:textfield}
.qp input::-webkit-outer-spin-button,.qp input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qp input:focus{border-color:var(--brand);background:#fff}
.qp .price{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand)}
.qp-note{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:10px}
.qp-err{color:#dc2626;font-size:12.5px;font-weight:700;margin-top:7px;display:none}
.qp-err.show{display:block}
.qp-del{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--ok);margin-top:14px}
.feats{list-style:none;padding:0;margin:18px 0;display:grid;gap:9px}
.feats li{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink-2)}
.tick{width:17px;height:17px;border-radius:50%;background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;font-size:11px;flex:none}
.card .btn{margin-top:auto}
.empty{text-align:center;padding:50px 20px;color:var(--muted);font-weight:600;grid-column:1/-1}

/* ---------- preset packages ----------
   The gradient head is the card: the name and the quantity sit on it, so the
   tiers read as a row of price tags rather than a row of paragraphs.

   Heads and the line under them are given a fixed height so the prices line
   up across a row - one card whose name wraps must not push its own price
   half a line below its neighbours'. */
.card.pkg{padding:0;overflow:hidden;border-radius:18px}
.card.pkg:hover{transform:translateY(-3px);box-shadow:0 12px 28px -12px rgba(23,33,60,.3)}
.pkg-head{background:var(--grad);color:#fff;padding:15px 14px 16px;text-align:center;position:relative;
  min-height:86px;display:flex;flex-direction:column;justify-content:center}
.pkg-head b{display:block;font-size:14.5px;font-weight:700;line-height:1.25}
.pkg-qty{display:block;font-size:28px;font-weight:800;font-style:italic;letter-spacing:-.02em;
  line-height:1.1;margin-top:2px}
.pkg-badge{position:absolute;top:0;right:0;background:var(--ok);color:#fff;font-size:10.5px;font-weight:800;
  padding:4px 9px;border-bottom-left-radius:9px;z-index:2;letter-spacing:.01em}
.card.pkg-badged .pkg-head{padding-top:28px}
.pkg-body{padding:15px 14px 16px;display:flex;flex-direction:column;flex:1;text-align:center}
.pkg-line{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.02em;
  color:var(--ok);background:rgba(22,163,74,.12);border-radius:999px;padding:4px 11px;
  margin-bottom:8px}
.pkg-price{font-size:24px;font-weight:800;letter-spacing:-.025em;margin:4px 0 14px;white-space:nowrap}
.pkg-body .feats{text-align:left;margin:0 0 15px;gap:7px}
.pkg-body .feats li{font-size:12.5px}
.pkg-body .qp-del{justify-content:center;margin:0 0 12px;font-size:12px}
.pkg-body .btn{margin-top:auto;padding:12px 16px;font-size:14px}

/* ---------- the custom-quantity panel ----------
   Full width under the tiers, and never as wide as the page: a single form
   centred under a row of cards reads as the alternative to them. */
.customwrap{grid-column:1/-1;display:flex;justify-content:center;margin-top:6px}
.card.custom{width:100%;max-width:440px;text-align:left}
.card.custom h3{justify-content:flex-start}
.pickf{display:block;margin:16px 0 0}
.pickf>span{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:8px}
.pickf select{width:100%;height:50px;border:1.5px solid var(--line);border-radius:14px;
  padding:0 40px 0 13px;font-size:14.5px;font-weight:700;background:var(--bg-soft);color:inherit;
  outline:none;cursor:pointer;appearance:none;font-family:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23838aa0'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:20px}
.pickf select:focus{border-color:var(--brand);background-color:#fff}
.qp-range{font-size:12.5px;font-weight:600;color:var(--muted);margin:8px 0 18px}

/* ---------- how it works ---------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.step{background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);padding:30px 26px;
  box-shadow:var(--shadow)}
.step-n{width:48px;height:48px;border-radius:16px;background:var(--grad);color:#fff;display:grid;
  place-items:center;font-weight:800;font-size:20px;margin-bottom:16px;
  box-shadow:0 8px 20px rgba(255,22,128,.3)}
.step h3{font-size:18px;margin-bottom:8px}
.step p{color:var(--muted);font-size:14px;font-weight:500}

/* ---------- faq ---------- */
.faq{max-width:780px;margin:0 auto;display:grid;gap:12px}
.fitem{background:#fff;border:1.5px solid var(--line);border-radius:18px;overflow:hidden;
  transition:border-color .2s}
.fitem.open{border-color:var(--brand)}
.fq{width:100%;text-align:left;background:none;border:0;padding:18px 22px;font-weight:700;
  font-size:15.5px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px}
.fq i{font-style:normal;font-size:20px;color:var(--brand);transition:transform .25s;flex:none}
.fitem.open .fq i{transform:rotate(45deg)}
.fa{max-height:0;overflow:hidden;transition:max-height .3s ease}
.fa p{padding:0 22px 20px;color:var(--ink-2);font-size:14.5px}

/* ---------- cta band ---------- */
.band{background:var(--grad-deep);border-radius:var(--radius);padding:48px 36px;text-align:center;
  color:#fff;box-shadow:var(--shadow-lg)}
.band h2{margin-bottom:12px}
.band p{color:rgba(255,255,255,.88);max-width:50ch;margin:0 auto 26px}
.band .btn-ghost{background:#fff;color:var(--brand);border-color:#fff}

/* ---------- footer ---------- */
footer{background:var(--surface);border-top:1px solid var(--line);padding:52px 0 28px;margin-top:56px}
.fgrid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:36px}
.fgrid h4{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:16px}
.fgrid ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.fgrid a{font-size:14.5px;font-weight:600;color:var(--ink-2)}
.fgrid a:hover{color:var(--brand)}
.fabout p{color:var(--muted);font-size:14px;margin-top:14px;max-width:34ch}
.pays{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.pay{background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 12px;font-size:11.5px;
  font-weight:800;color:var(--ink-2)}
.fbottom{border-top:1px solid var(--line);margin-top:40px;padding-top:22px;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:13.5px;font-weight:600}

/* ---------- modal ---------- */
.overlay{position:fixed;inset:0;background:rgba(23,33,60,.55);backdrop-filter:blur(5px);z-index:90;
  display:none;align-items:flex-start;justify-content:center;padding:20px;overflow-y:auto}
.overlay.show{display:flex}
/* margin:auto with a flex-start overlay centres the panel while it fits and
   lets the whole of it be reached once it does not - centring alone clips
   the top beyond scrolling. */
.modal{background:var(--surface);border-radius:26px;width:100%;max-width:460px;margin:auto;
  box-shadow:0 30px 70px rgba(0,0,0,.3);
  animation:pop .25s cubic-bezier(.2,.9,.3,1.2);max-height:calc(100vh - 40px);
  max-height:calc(100dvh - 40px);overflow-y:auto}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.mhead{display:flex;align-items:flex-start;gap:14px;padding:24px 24px 0}
.mhead h3{font-size:20px}
.mhead p{color:var(--muted);font-size:13.5px;font-weight:600;margin-top:4px}
.mclose{margin-left:auto;background:var(--bg-soft);border:0;width:34px;height:34px;border-radius:50%;
  font-size:19px;cursor:pointer;color:var(--ink-2);flex:none;line-height:1}
.mclose:hover{background:var(--line)}
.mbody{padding:22px 24px 24px}
.summary{display:flex;align-items:center;gap:13px;background:var(--brand-soft);border-radius:17px;
  padding:15px;margin-bottom:20px}
.summary .si{width:44px;height:44px;border-radius:13px;background:#fff;display:grid;place-items:center;
  font-size:21px;flex:none;color:var(--brand)}
/* Two lines at most. The card the customer just pressed is still behind
   this box and carries the whole name; letting it wrap to four lines here
   pushes the button that places the order off a phone screen. */
.summary b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;font-size:15px;line-height:1.35}
.summary small{color:var(--muted);font-size:12.5px;font-weight:700}
.summary .amt{margin-left:auto;font-size:21px;font-weight:800;color:var(--brand);white-space:nowrap}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:700;margin-bottom:7px}
.field input{width:100%;border:1.5px solid var(--line);border-radius:14px;padding:13px 15px;font-size:15px;
  font-weight:600;outline:none;transition:border-color .15s;background:var(--bg-soft)}
.field input:focus{border-color:var(--brand);background:#fff}
.field small{display:block;color:var(--muted);font-size:12px;font-weight:600;margin-top:6px}
.field label .opt-tag{font-weight:600;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin-left:5px}
.safe-note{display:flex;gap:10px;background:#e8f8ee;border-radius:14px;padding:13px 15px;font-size:13px;
  font-weight:700;color:#146c3a;margin-bottom:18px}

/* ---------- modal: fit the screen it opens on ----------
   A customer who has to scroll to find the button has not found the button.
   The panel is drawn tighter as the viewport gets shorter rather than being
   clipped, and dvh is used because a phone's 100vh counts the URL bar that
   is covering the bottom of the page. */
@media (max-width: 440px){
  /* The rocket tile says nothing the line beside it does not, and it costs
     57px of the width the title needs - which is what wrapped
     "100 x Instagram Followers" onto three lines. */
  .summary .si{display:none}
  .summary b{font-size:14.5px}
  .summary .amt{font-size:19px}
}
@media (max-height: 780px){
  .overlay{padding:12px}
  .mhead{padding:16px 18px 0}
  .mhead h3{font-size:18px}
  .mhead p{display:none}
  .mclose{width:30px;height:30px;font-size:17px}
  .mbody{padding:14px 18px 18px}
  .summary{padding:11px 12px;margin-bottom:12px}
  .summary .si{width:38px;height:38px;font-size:18px}
  .field{margin-bottom:9px}
  .field label{margin-bottom:5px}
  .field input{padding:11px 14px}
  .field small{margin-top:3px;font-size:11.5px}
  .safe-note{padding:10px 12px;font-size:12.5px;margin-bottom:12px}
  .form-err{padding:10px 13px;margin-bottom:12px}
  .btn-lg{padding:13px 24px;font-size:16px}
  .om-done{padding:0}
  .om-done-head{margin-bottom:12px}
  .om-done-rows>div{padding:10px 13px}
  .om-done-note{margin-bottom:11px}
}
@media (max-height: 660px){
  /* Reassurance is the first thing to go: the order page says it again, and
     a button nobody can reach says nothing at all. */
  .safe-note{display:none}
  /* The hints go too. They help, but not as much as a button the thumb can
     reach: the label on the optional field already says it is optional, and
     an error still appears here because .err is a different element. */
  .mbody .field .hint{display:none}
  .mhead{padding:13px 16px 0}
  .mbody{padding:12px 16px 16px}
  .summary{margin-bottom:10px}
  .field{margin-bottom:8px}
}

/* ---------- floating wa ---------- */
.fab{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;align-items:center;gap:10px;
  background:#25d366;color:#fff;border:0;border-radius:999px;padding:14px 20px;font-weight:800;
  font-size:15px;cursor:pointer;box-shadow:0 10px 30px rgba(37,211,102,.45)}
.fab:hover{transform:translateY(-2px)}
.fab .icon{font-size:22px}
.fab::after{content:"";position:absolute;inset:0;border-radius:999px;border:2px solid #25d366;
  animation:ring 2s ease-out infinite}
@keyframes ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.35);opacity:0}}

/* ---------- order / tracking page ---------- */
:root{ --page:var(--bg-soft); --acc:var(--brand); --acc-on:#fff; }
.opage{padding:30px 0 10px}
.obar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.ocode{font-size:clamp(21px,3vw,28px);font-weight:800;letter-spacing:-.02em}
.ocode small{display:block;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:4px}
.sbadge{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:8px 16px;
  font-size:13px;font-weight:800}
.sbadge .d{width:8px;height:8px;border-radius:50%;background:currentColor}
.sb-pending{background:rgba(245,158,11,.14);color:#b45309}
.sb-paid{background:rgba(37,99,235,.14);color:#1d4ed8}
.sb-processing{background:rgba(139,92,246,.16);color:#7c3aed}
.sb-completed{background:rgba(22,163,74,.15);color:#15803d}
.ogrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:22px;align-items:start}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.panel + .panel{margin-top:18px}
.ptitle{font-size:17px;font-weight:800;margin-bottom:4px;display:flex;align-items:center;gap:9px}
.ptitle .icon{color:var(--acc)}
.psubtitle{color:var(--muted);font-size:13.5px;font-weight:600;margin-bottom:18px}
.orow{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);
  font-size:14.5px;font-weight:600}
.orow:last-of-type{border-bottom:0}
.orow span{color:var(--muted);font-weight:700}
.orow b{text-align:right;word-break:break-all;font-weight:800}
.ototal{display:flex;justify-content:space-between;align-items:center;gap:14px;background:var(--grad);
  color:#fff;border-radius:18px;padding:17px 20px;margin-top:16px;font-weight:800}
.ototal .big{font-size:26px;letter-spacing:-.02em}

/* timeline */
.tl{list-style:none;padding:0;margin:4px 0 0}
.tl li{display:flex;gap:15px;padding-bottom:22px;position:relative}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:"";position:absolute;left:13px;top:28px;bottom:2px;width:2px;background:var(--line)}
.tl li:last-child::before{display:none}
.tl li.done::before{background:var(--acc)}
.tl .dot{width:28px;height:28px;border-radius:50%;border:2px solid var(--line);flex:none;display:grid;
  place-items:center;font-size:12px;color:var(--muted);background:var(--surface);z-index:1}
.tl li.done .dot{background:var(--acc);border-color:var(--acc);color:var(--acc-on)}
.tl li.now .dot{border-color:var(--acc);color:var(--acc)}
.tl b{display:block;font-size:14.5px;font-weight:800}
.tl small{color:var(--muted);font-size:12.5px;font-weight:600}
.counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:20px}
.count{background:var(--page);border:1px solid var(--line);border-radius:16px;padding:13px;text-align:center}
.count b{display:block;font-size:19px;font-weight:800}
.count small{color:var(--muted);font-size:11.5px;font-weight:700}
.progress{height:9px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:16px}
.progress i{display:block;height:100%;border-radius:999px;background:var(--grad);width:64%;transition:width .4s}

/* payment methods */
.pm{display:grid;gap:10px}
.pmethod{border:2px solid var(--line);border-radius:18px;overflow:hidden;transition:border-color .2s}
.pmethod.on{border-color:var(--acc)}
.pmhead{width:100%;display:flex;align-items:center;gap:13px;background:none;border:0;padding:15px 17px;
  cursor:pointer;text-align:left;font:inherit;color:inherit}
.pmlogo{width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;font-size:13px;
  font-weight:900;color:#fff;letter-spacing:-.02em}
.pm-jz{background:#c8102e}.pm-ep{background:#0a7d3e}.pm-bank{background:#334155}
.pmhead b{display:block;font-size:15px;font-weight:800}
.pmhead small{color:var(--muted);font-size:12.5px;font-weight:600}
.pmradio{margin-left:auto;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none;
  display:grid;place-items:center}
.pmethod.on .pmradio{border-color:var(--acc);background:var(--acc)}
.pmethod.on .pmradio::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--acc-on)}
.pmbody{display:none;padding:0 17px 17px;border-top:1px dashed var(--line);margin-top:2px;padding-top:15px}
.pmethod.on .pmbody{display:block}
.acct{display:flex;align-items:center;gap:12px;background:var(--page);border-radius:14px;padding:13px 15px;
  margin-bottom:9px}
.acct div{flex:1;min-width:0}
.acct small{display:block;color:var(--muted);font-size:11.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase}
.acct b{font-size:15.5px;font-weight:800;word-break:break-all}
.copy{background:var(--acc);color:var(--acc-on);border:0;border-radius:10px;padding:9px 13px;
  font-size:12.5px;font-weight:800;cursor:pointer;flex:none}
.copy:active{transform:scale(.96)}
.note{display:flex;gap:10px;background:var(--page);border-radius:14px;padding:13px 15px;font-size:13px;
  font-weight:600;color:var(--ink-2);margin-top:12px}
.note .icon{color:var(--acc);font-size:17px;flex:none}
.err{color:#dc2626;font-size:13px;font-weight:800;margin-top:9px;display:none}
.err.show{display:block}
.okmsg{display:none;gap:11px;background:rgba(22,163,74,.12);color:#15803d;border-radius:14px;
  padding:15px 17px;font-size:13.5px;font-weight:800;margin-top:14px}
.okmsg.show{display:flex}
.okmsg .icon{font-size:18px;flex:none}
.stack{display:grid;gap:10px;margin-top:16px}
.help{text-align:center;font-size:13px;font-weight:600;color:var(--muted);margin-top:16px}
.help a{color:var(--acc);font-weight:800}

/* ---------- flashes, forms, static pages, tracking ---------- */
.alert{border-radius:16px;padding:14px 18px;font-size:14.5px;font-weight:600;margin-bottom:18px;
  border:1px solid transparent}
.alert a{text-decoration:underline;font-weight:700}
.alert-success{background:#e8f8ee;border-color:#bfe9cf;color:#146c3a}
.alert-error{background:#fdeaea;border-color:#f6caca;color:#b91c1c}
.alert-warning{background:#fff7e6;border-color:#f6e2b8;color:#8a5d2a}
.alert-info{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-deep)}
.field .err{display:block;color:#dc2626;font-size:12.5px;font-weight:700;margin-top:6px}
.field input[aria-invalid="true"]{border-color:#dc2626}
.form-err{display:none;background:#fdeaea;border:1px solid #f6caca;color:#b91c1c;border-radius:14px;
  padding:12px 15px;font-size:13.5px;font-weight:700;margin-bottom:16px}
.form-err.show{display:block}

/* honeypot: a real person never sees this, a bot fills it in */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

.page-head{padding:60px 0 10px;text-align:center}
.page-head h1{font-size:clamp(28px,4.4vw,42px);margin-bottom:12px;color:var(--ink)}
.page-head h1 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.page-head p{color:var(--ink-2);max-width:58ch;margin:0 auto}
.prose{max-width:72ch;margin:0 auto;color:var(--ink-2);font-size:16px}
.prose h2{font-size:24px;margin:28px 0 12px;color:var(--ink)}
.prose h3{font-size:19px;margin:22px 0 10px;color:var(--ink)}
.prose p{margin:0 0 1em}
.prose ul,.prose ol{margin:0 0 1em;padding-left:22px}
.prose li{margin-bottom:6px}
.prose a{color:var(--brand);font-weight:600}

.track-wrap{max-width:560px;margin:0 auto}
.track-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;
  box-shadow:var(--shadow)}
.track-form{display:flex;gap:10px;flex-wrap:wrap}
.track-form input{flex:1;min-width:180px;border:1.5px solid var(--line);border-radius:14px;
  padding:14px 16px;font-size:16px;font-weight:700;outline:none;background:var(--bg-soft);
  text-transform:uppercase;letter-spacing:.06em}
.track-form input:focus{border-color:var(--brand);background:#fff}

.empty-state{text-align:center;padding:56px 24px;background:var(--surface);border:1px dashed var(--line);
  border-radius:var(--radius);color:var(--muted);font-weight:600;grid-column:1/-1}
.empty-state b{display:block;color:var(--ink);font-size:17px;margin-bottom:6px}

/* the platform chooser and tabs are real links, so they need link resets */
.plat,.tab{text-decoration:none}
a.tab{display:inline-flex;align-items:center}

/* The payment panel follows the checked radio even before the script runs,
   so the details are reachable with JavaScript blocked. */
.pmethod:has([data-pm-radio]:checked){border-color:var(--brand)}
.pmethod:has([data-pm-radio]:checked) .pmbody{display:block}
.pmethod:has([data-pm-radio]:checked) .pmradio{border-color:var(--brand);background:var(--brand)}
.pmethod:has([data-pm-radio]:checked) .pmradio::after{content:"";width:8px;height:8px;border-radius:50%;
  background:#fff}
.pmhead{cursor:pointer}

/* ---------- skeleton while a platform or category is fetched ---------- */
.cards.is-loading{opacity:.9}
.card-skeleton{pointer-events:none;border-color:var(--line)}
.sk{display:block;border-radius:9px;background:linear-gradient(90deg,
    var(--bg-soft) 25%, var(--line) 37%, var(--bg-soft) 63%);
  background-size:400% 100%;animation:sk 1.3s ease-in-out infinite}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}
.sk-badge{width:84px;height:18px;border-radius:999px;margin-bottom:14px}
.sk-title{width:78%;height:22px;margin-bottom:12px}
.sk-line{width:100%;height:12px;margin-bottom:8px}
.sk-line.short{width:62%}
.sk-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin:20px 0 14px}
.sk-box{height:58px;border-radius:14px}
.sk-button{width:100%;height:52px;border-radius:999px;margin-top:18px}

/* mobile drawer */
.drawer{display:none;border-top:1px solid var(--line);background:#fff;padding:12px 20px 18px}
.drawer.show{display:block}
/* :not(.btn) because .drawer a outranks .btn and would otherwise turn any
   button dropped in here into a left-aligned block with no side padding. */
.drawer a:not(.btn){display:block;padding:12px 0;font-weight:700;border-bottom:1px solid var(--line)}
.drawer a:not(.btn):last-child{border-bottom:0}
.drawer .btn{margin-top:14px}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:38px}
  .pcard{max-width:420px}
  .steps{grid-template-columns:minmax(0,1fr)}
  .fgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
  .ogrid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .nav-links,.nav-right .wa-link{display:none}
  .burger{display:block}
  /* Track Order stays in the bar: it is where someone who has already
     paid is heading, and a burger hides it behind a guess. */
  .nav-right{margin-left:auto;gap:8px}
  .nav-right .btn-ghost{padding:9px 14px;font-size:13.5px}
  .nav-right .btn-ghost .icon{display:none}
  /* The profile mock is decoration, and on a phone it is a whole
     screenful of it between the headline and the thing to tap. */
  .pcard{display:none}
  .nav{height:64px}
  .hero{padding:34px 0 104px}
  .stats{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .psec{margin-top:-70px}
  .chooser{padding:16px;border-radius:22px}
  .plats{grid-auto-columns:minmax(104px,1fr);gap:8px}
  .plat{padding:14px 10px;font-size:13px;border-radius:16px}
  .plat .icon{font-size:23px}
  .section{padding:40px 0}
  /* One to a row: at this width two cards squeeze the name, the price and
     every feature line onto two words each. */
  .cards{grid-template-columns:minmax(0,1fr);gap:14px}
  .card.pkg{border-radius:16px}
  .pkg-head{min-height:78px;padding:14px 14px 15px}
  .pkg-qty{font-size:26px}
  .band{padding:34px 22px}
  .fgrid{grid-template-columns:minmax(0,1fr)}
  .fab{padding:14px;border-radius:50%}
  .fab span{display:none}
  .hero-cta .btn{width:100%}
  .opage{padding:20px 0 6px}
  .panel{padding:20px 17px}
  .counts{grid-template-columns:minmax(0,1fr);gap:8px}
  .count{display:flex;align-items:baseline;gap:9px;text-align:left}
  .ototal{flex-direction:column;align-items:flex-start;gap:4px}
}

@media (prefers-reduced-motion: reduce){
  .sk,.float-pill,.fab::after{animation:none}
}

/* --- the order, once it exists --------------------------------------------
   The customer reads their code and amount here before anything navigates. */
.om-done{padding:4px 0 2px}
.om-done-head{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.om-done-head b{font-size:17px;font-weight:800}
.om-tick{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:#e8f8ee;color:var(--ok);font-size:17px}
.om-done-rows{margin:0 0 14px;display:grid;gap:1px;background:var(--line);border-radius:14px;
  overflow:hidden;border:1px solid var(--line)}
.om-done-rows>div{display:flex;justify-content:space-between;gap:14px;background:#fff;
  padding:12px 15px}
.om-done-rows dt{font-size:13px;font-weight:700;color:var(--muted);margin:0}
/* The order code is the one string a customer has to read back or type,
   so it gets a face where 0 and O are not the same shape. */
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.02em;font-variant-numeric:tabular-nums}
.om-done-rows dd{margin:0;font-size:14.5px;font-weight:800;text-align:right;word-break:break-all}
.om-done-note{font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:14px}
.om-done-note.om-done-warn{color:#b45309;background:#fff7e6;border-radius:11px;padding:11px 13px}

/* --- the order code, and saying the order happened ------------------------ */
.oplaced{display:flex;align-items:center;gap:13px;background:#e8f8ee;border-radius:14px;
  padding:14px 17px;margin-bottom:18px}
.oplaced b{display:block;font-size:15.5px;font-weight:800;color:#146c3a}
.oplaced small{color:#1a7a44;font-size:13px;font-weight:600}
.ocode-row{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.ocode-copy{background:var(--brand-soft);color:var(--brand);border:0;border-radius:999px;
  padding:5px 13px;font-size:12px;font-weight:800;cursor:pointer;letter-spacing:.02em}
.ocode-copy:hover{background:var(--brand);color:#fff}