/* DealHub — discounts, plainly presented.

   Light and soft on purpose. The business loses sales because a Discord
   server looks like a risk, so the site has to read like a shop: a calm
   background, generous type, real faces of proof, and nothing that looks
   like it was made to disappear tomorrow.

   Coupon-forward: the price is a torn ticket, savings are the loudest thing
   on the card, and the shapes borrow from vouchers people already trust. */

:root {
  /* Warm off-white rather than pure white — easier to read for longer. */
  /* Dialled down a step: the paper is warmer, cards sit just off white and
     the greens are muted. Still light and friendly, less glare. */
  --paper:#F4F1EA; --card:#FBF9F4; --sink:#EAE6DC;
  --ink:#23262C; --ink-2:#555C69; --ink-3:#848B97;
  --line:#DBD5C8; --line-2:#C9C2B2;

  --mint:#2E8B6B; --mint-soft:#E4F0EA; --mint-line:#AFD3C3; --mint-deep:#1F6650;
  --berry:#C9566A; --berry-soft:#F8EAED;
  --sun:#D99A2B; --sun-soft:#FAF1E0;
  --sky:#4A7FBF; --sky-soft:#EAF0F8;

  --f:"Nunito Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --display:"Fraunces","Georgia",serif;
  --r:16px; --rl:22px; --rs:10px;
  --shadow:0 1px 2px rgba(35,38,44,.03), 0 5px 14px rgba(35,38,44,.045);
  --shadow-lift:0 2px 5px rgba(35,38,44,.05), 0 12px 28px rgba(35,38,44,.08);
  color-scheme: light;
}

* { box-sizing:border-box; }
html, body { margin:0; max-width:100%; overflow-x:hidden; }
body {
  background:var(--paper); color:var(--ink);
  font:400 17px/1.65 var(--f);
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
a { color:var(--mint-deep); text-decoration:none; }
a:hover { text-decoration:underline; }
h1, h2, h3 { font-family:var(--display); font-weight:600; letter-spacing:-.01em;
             line-height:1.15; margin:0; }
.wrap { width:100%; max-width:1060px; margin-inline:auto; padding-inline:20px; }

/* --- bar ------------------------------------------------------------------ */
.topbar { background:rgba(246,244,239,.93); border-bottom:1px solid var(--line);
          position:sticky; top:0; z-index:30;
          backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
          transform:translateZ(0); }
.topbar-in { display:flex; align-items:center; gap:18px; height:68px; }
.mark { display:flex; align-items:center; gap:10px; font-weight:800;
        font-size:20px; letter-spacing:-.02em; color:var(--ink);
        font-family:var(--display); }
.mark:hover { text-decoration:none; }
.mark-img { display:block; border-radius:8px; }
.topnav { margin-left:auto; display:flex; gap:20px; font-size:15px;
          font-weight:600; align-items:center; }
.topnav a { color:var(--ink-2); }
.topnav a:hover { color:var(--ink); text-decoration:none; }

/* A thin reassurance strip, always visible. */

/* --- messages ------------------------------------------------------------- */
.flash { margin:18px 0 0; padding:13px 17px; border-radius:var(--r);
         font-size:15px; font-weight:650; border:1px solid var(--line);
         background:var(--card); box-shadow:var(--shadow); }
.flash-good { border-color:var(--mint-line); background:var(--mint-soft);
              color:var(--mint-deep); }
.flash-warn { border-color:#F3D6A6; background:var(--sun-soft); color:#8A5B08; }

/* --- hero ----------------------------------------------------------------- */
.hero { padding:56px 0 8px; max-width:40ch; }

/* Two columns, so the deals aren't pushed below the fold by whitespace. */
.hero-grid { display:grid; gap:34px; padding:48px 0 10px;
             grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
             align-items:center; }
.hero-grid h1 { font-size:clamp(2rem, 4.6vw, 3rem); }
.hero-grid p { margin:16px 0 0; font-size:17.5px; color:var(--ink-2);
               max-width:46ch; }
.hero-grid p strong { color:var(--ink); font-weight:800; }
.hero-card { border-radius:var(--rl); background:var(--card);
             border:1px solid var(--line); box-shadow:var(--shadow);
             display:flex; flex-direction:column; }
@media (max-width:820px) {
  .hero-grid { grid-template-columns:1fr; gap:26px; padding-top:34px; }
  .hero-card { order:2; }
}
.hero h1 { font-size:clamp(2.1rem, 5.6vw, 3.3rem); }
.hero .em { color:var(--mint); }
.hero p { margin:16px 0 0; font-size:18px; color:var(--ink-2); max-width:54ch; }
.hero-actions { display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }

/* --- coupon cards --------------------------------------------------------- */
.section-head { display:flex; align-items:baseline; gap:14px; margin:46px 0 4px;
                flex-wrap:wrap; }
.section-head h2 { font-size:1.75rem; }
.section-head p { margin:0; color:var(--ink-3); font-size:15px; }

.cards { display:grid; gap:20px; margin:22px 0 10px;
         grid-template-columns:repeat(auto-fit, minmax(290px, 1fr)); }

/* The coupon: a card with a notch punched out of each side, the way a torn
   ticket looks. Pure CSS so it stays crisp at any size. */
.coupon { position:relative; display:flex; flex-direction:column;
          background:var(--card); border:1px solid var(--line);
          border-radius:var(--rl); padding:24px 24px 22px;
          box-shadow:var(--shadow); transition:box-shadow .2s ease,
          transform .2s ease, border-color .2s ease; }
.coupon:hover { box-shadow:var(--shadow-lift); transform:translateY(-3px);
                border-color:var(--line-2); }
.coupon::before, .coupon::after {
  content:""; position:absolute; top:calc(50% - 11px); width:22px; height:22px;
  background:var(--paper); border:1px solid var(--line); border-radius:50%; }
.menu-shot { width:100%; margin-top:16px; border-radius:12px;
             border:1px solid var(--line); display:block; }
.coupon::before { left:-12px; clip-path:inset(0 0 0 50%); }
.coupon::after { right:-12px; clip-path:inset(0 50% 0 0); }

.coupon-top { display:flex; align-items:flex-start; gap:12px; }

/* The percentage is why anyone reads the card, so it is the loudest thing
   in it — a stamped flash rather than a line of small print. */
.flash-off { flex:none; margin-left:auto; text-align:center; padding:8px 13px;
             border-radius:14px; background:var(--berry); color:#fff;
             transform:rotate(2deg); box-shadow:0 4px 12px rgba(224,69,95,.28); }
.flash-off b { display:block; font-family:var(--display); font-size:1.45rem;
               font-weight:700; line-height:1; }
.flash-off span { display:block; font-size:10.5px; font-weight:800;
                  letter-spacing:.1em; text-transform:uppercase;
                  opacity:.92; margin-top:2px; }
.coupon-note { margin:12px 0 0; font-size:15.5px; color:var(--ink-2);
               line-height:1.6; }
.coupon-note strong { color:var(--ink); font-weight:750; }
.coupon-rule { margin:20px 0 16px; border:0; border-top:2px dashed var(--line-2); }
.coupon-foot { margin-top:auto; display:flex; align-items:center; gap:14px;
               flex-wrap:wrap; }
.save-big { font-family:var(--display); font-size:1.5rem; font-weight:700;
            color:var(--mint); line-height:1; }
.save-sub { font-size:13px; color:var(--ink-3); display:block;
            font-family:var(--f); font-weight:600; margin-top:3px; }

.tag { font-size:12px; font-weight:800; letter-spacing:.05em; padding:5px 11px;
       border-radius:99px; text-transform:uppercase; }
.tag-on { color:var(--mint-deep); background:var(--mint-soft);
          border:1px solid var(--mint-line); }
.tag-off { color:var(--ink-3); background:var(--sink); border:1px solid var(--line); }
.tag-hot { color:#8A5B08; background:var(--sun-soft); border:1px solid #F3D6A6; }

/* --- buttons -------------------------------------------------------------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px;
       padding:13px 24px; border-radius:99px; font:700 16px var(--f);
       border:1px solid var(--line-2); background:var(--card); color:var(--ink);
       cursor:pointer; box-shadow:var(--shadow);
       transition:transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn:hover { text-decoration:none; transform:translateY(-1px);
             box-shadow:var(--shadow-lift); }
.btn-go { background:var(--mint); border-color:var(--mint); color:#fff; }
.btn-go:hover { background:#0C8C61; color:#fff; }
.btn-wide { width:100%; }
.btn-lg { padding:16px 30px; font-size:17px; }
.btn[disabled] { opacity:.5; cursor:not-allowed; transform:none;
                 box-shadow:none; }
.btn-quiet { background:transparent; box-shadow:none; }

/* --- panels --------------------------------------------------------------- */
.panel { background:var(--card); border:1px solid var(--line);
         border-radius:var(--rl); padding:30px; margin:24px 0;
         box-shadow:var(--shadow); }
.panel h2 { font-size:1.6rem; margin-bottom:6px; }
.panel-sub { margin:0 0 22px; color:var(--ink-2); font-size:16px; }

/* --- numbered steps ------------------------------------------------------- */
/* The flow reads as three things in order, rather than one long form where
   it isn't clear what's still being asked. */
.step { display:grid; grid-template-columns:38px 1fr; gap:16px;
        padding:24px 0; border-top:1px solid var(--line); }
.step:first-of-type { border-top:0; padding-top:12px; }
.step-last { padding-bottom:4px; }
.step-n { width:34px; height:34px; border-radius:50%; flex:none;
          display:flex; align-items:center; justify-content:center;
          background:var(--mint-soft); color:var(--mint-deep);
          border:1px solid var(--mint-line);
          font:800 16px var(--f); }
.step-body { min-width:0; }
.step-h { font-size:1.2rem; margin:2px 0 14px; }
.step-note { font-size:13.5px; margin:12px 0 0; text-align:center; }
.pick-qty { max-width:220px; }
.pick-qty small { font-size:12.5px; margin-top:2px; display:block; }
.pick em { font-style:normal; color:var(--ink-3); font-weight:600; }

/* --- choosing an amount ---------------------------------------------------
   Tappable tiles rather than a dropdown: every option visible, one tap to
   pick, and ordinary radios underneath so it works without JavaScript. */
.chips { display:grid; gap:10px; margin:0 0 18px;
         grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); }
.chip { position:relative; display:flex; flex-direction:column; gap:1px;
        padding:14px 12px; border-radius:14px; cursor:pointer;
        background:var(--card); border:1.5px solid var(--line-2);
        text-align:center; transition:border-color .15s ease,
        background .15s ease, transform .1s ease; }
.chip:hover { border-color:var(--mint); transform:translateY(-1px); }
.chip input { position:absolute; opacity:0; width:0; height:0; }
.chip-face { font:700 1.25rem var(--display); color:var(--ink);
             line-height:1.1; }
.chip-pay { font-size:13px; font-weight:650; color:var(--ink-3); }
.chip-left { margin-top:4px; font-size:10.5px; font-weight:750;
             letter-spacing:.04em; text-transform:uppercase;
             color:var(--ink-3); }
.chip-left.is-low { color:#8A5B08; font-weight:800; }
/* :has keeps the checked state on the label without extra classes. */
.chip:has(input:checked) { border-color:var(--mint); background:var(--mint-soft);
                           box-shadow:0 0 0 3px rgba(46,139,107,.12); }
.chip:has(input:checked) .chip-face { color:var(--mint-deep); }
.chip:has(input:checked) .chip-pay { color:var(--mint-deep); }
.chip:has(input:focus-visible) { outline:3px solid var(--mint-soft);
                                 outline-offset:2px; }

/* What the choice means, spelled out under the tiles. */
.chosen { padding:16px 18px; border-radius:14px; background:var(--sink);
          border:1px solid var(--line); margin:0 0 6px; }
.chosen-line { margin:0; font-size:15px; color:var(--ink-2); }
.chosen-line b { font:700 1.7rem var(--display); color:var(--ink);
                 margin-right:6px; }
.chosen-sub { margin:10px 0 0; display:flex; gap:8px; flex-wrap:wrap;
              align-items:center; font-size:14px; }
/* Both of these are reasons to buy, so they read as badges rather than as
   a run-on line of grey text under the price. */
.chosen-save, .chosen-ship {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:99px; font-size:13px; font-weight:750;
}
.chosen-save { color:#fff; background:var(--mint);
               box-shadow:0 1px 3px rgba(46,139,107,.3); }
.chosen-ship { color:var(--mint-deep); background:var(--card);
               border:1px solid var(--mint-line); }

/* Free shipping is a reason to buy, so it gets said rather than implied. */
.ship-tag { display:inline-flex; align-items:center; gap:6px; font-size:12px;
            font-weight:750; padding:5px 11px; border-radius:99px;
            color:var(--mint-deep); background:var(--mint-soft);
            border:1px solid var(--mint-line); }

/* --- the picker ----------------------------------------------------------- */
.buy-head { display:flex; align-items:center; gap:14px; flex-wrap:wrap;
            margin-bottom:6px; }
.pick { display:block; margin:0 0 20px; }
.pick > span { display:block; font-size:14px; font-weight:750; color:var(--ink-2);
               margin-bottom:8px; }
select, input[type=text], input[type=email], input[type=number],
input[type=password] {
  font:600 17px var(--f); color:var(--ink); background:var(--card);
  border:1.5px solid var(--line-2); border-radius:var(--rs);
  padding:15px 16px; width:100%; appearance:none; }
select {
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%237A8394' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
  padding-right:44px; cursor:pointer; }
select:focus, input:focus { outline:3px solid var(--mint-soft);
                            border-color:var(--mint); }
.qty-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* The live total, as a ticket. */
.ticket { margin:22px 0; padding:20px 22px; border-radius:var(--r);
          background:var(--mint-soft); border:1.5px dashed var(--mint-line); }
.ticket-row { display:flex; justify-content:space-between; align-items:baseline;
              gap:16px; font-size:15.5px; color:var(--ink-2); }
.ticket-row + .ticket-row { margin-top:9px; }
.ticket-total { margin-top:14px; padding-top:14px;
                border-top:1.5px dashed var(--mint-line);
                font-size:19px; font-weight:800; color:var(--ink); }
.ticket-total b { font-family:var(--display); font-size:1.7rem;
                  color:var(--mint-deep); }
.ticket-save { color:var(--mint); font-weight:750; }

/* Said where the money decision is made, not only in the footer. */
.secure { display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:center;
          margin:16px 0 0; font-size:13px; font-weight:650;
          color:var(--mint-deep); }
.secure span { display:inline-flex; align-items:center; gap:6px; }

.menu-shot + .menu-shot { margin-top:12px; }

/* --- paying by hand --------------------------------------------------------
   Every value that has to be copied gets its own row and its own button.
   Nobody should be retyping a handle off a screen. */
.paybox { display:flex; align-items:center; gap:14px; padding:15px 17px;
          border-radius:14px; background:var(--sink);
          border:1px solid var(--line); margin:0 0 10px; }
.paybox > div { min-width:0; flex:1 1 auto; }
.paybox-k { display:block; font-size:12px; font-weight:750; color:var(--ink-3);
            text-transform:uppercase; letter-spacing:.06em; }
.paybox-v { display:block; font:700 1.35rem var(--display); color:var(--ink);
            line-height:1.25; margin-top:3px; word-break:break-all;
            user-select:all; }
.mono-ish { letter-spacing:.01em; }
.paybox-link { font:600 13px ui-monospace, SFMono-Regular, Menlo, monospace;
               word-break:break-all; }
.paybox-alt { background:transparent; border-style:dashed; }
.paybox-key { background:var(--mint-soft); border-color:var(--mint-line); }
.paybox-key .paybox-v { color:var(--mint-deep); }
/* The hold, counting down. Green while there's plenty, amber near the end. */
.holdbar { margin:0 0 20px; padding:14px 17px; border-radius:14px;
           background:var(--mint-soft); border:1px solid var(--mint-line);
           transition:background .3s ease, border-color .3s ease; }
.hold-face { display:flex; align-items:baseline; justify-content:space-between;
             gap:14px; }
.hold-k { font-size:14px; font-weight:650; color:var(--ink-2); }
.hold-face b { font:700 1.6rem var(--display); color:var(--mint-deep);
               font-variant-numeric:tabular-nums; line-height:1; }
.hold-track { margin-top:10px; height:5px; border-radius:99px;
              background:rgba(46,139,107,.18); overflow:hidden; }
.hold-track span { display:block; height:100%; width:100%; border-radius:99px;
                   background:var(--mint); transition:width 1s linear; }
.hold-note { margin:8px 0 0; font-size:13px; color:var(--ink-2); }
.holdbar.is-low { background:var(--sun-soft); border-color:#EEDDBB; }
.holdbar.is-low .hold-face b { color:#8A5B08; }
.holdbar.is-low .hold-track span { background:var(--sun); }
.holdbar.is-out { background:var(--berry-soft);
                  border-color:rgba(201,86,106,.35); }
.holdbar.is-out .hold-face b { color:var(--berry); }

.paybox-note { font-size:13.5px; margin:0 0 16px; }

/* A condition that gets the payment rejected if missed sits on the handle. */
.paybox-ruled { border-color:#EEDDBB; background:var(--sun-soft); }
.rule-flag { color:#8A5B08; font-weight:800; text-transform:none;
             letter-spacing:0; }
.rule-note { display:block; margin-top:5px; font-size:13px; color:#6B4708;
             line-height:1.5; }

/* The step everything else depends on. */
.must { margin:0 0 14px; padding:15px 17px; border-radius:14px;
        background:var(--berry-soft); border:1.5px solid rgba(201,86,106,.35);
        font-size:15px; line-height:1.55; color:#7A2634; }
.must b { color:var(--berry); }
.copy-btn { flex:none; padding:11px 20px; }

/* Says the shop is doing the work, so nobody sits wondering. */
.waiting { display:flex; gap:14px; align-items:flex-start; margin-top:22px;
           padding:16px 18px; border-radius:14px; background:var(--sun-soft);
           border:1px solid #EEDDBB; }
.waiting b { display:block; font-size:15.5px; }
.waiting p { margin:3px 0 0; font-size:14px; }
.waiting-dot { width:10px; height:10px; border-radius:99px; flex:none;
               margin-top:6px; background:var(--sun);
               animation:pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.3; } }

/* --- trust ---------------------------------------------------------------- */
.proof { display:grid; gap:18px; margin:22px 0 0;
         grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
.vouch { background:var(--card); border:1px solid var(--line);
         border-radius:var(--r); padding:20px; box-shadow:var(--shadow);
         display:flex; flex-direction:column; }
.vouch-stars { color:var(--sun); font-size:15px; letter-spacing:2px; }
.vouch-text { margin:10px 0 0; font-size:16.5px; line-height:1.6;
              color:var(--ink); font-family:var(--display); }
.vouch-shot { margin-top:14px; width:100%; border-radius:var(--rs);
              border:1px solid var(--line); display:block; }
.vouch-who { margin:14px 0 0; font-size:13.5px; color:var(--ink-3);
             font-weight:650; display:flex; align-items:center; gap:7px; }

/* A review is the best argument on the page, so it leads somewhere. */
.vouch-link { text-decoration:none; color:inherit; cursor:pointer;
              transition:border-color .15s ease, transform .15s ease,
              box-shadow .15s ease; }
.vouch-link:hover { text-decoration:none; border-color:var(--mint);
                    transform:translateY(-2px); box-shadow:var(--shadow-lift); }
.vouch-cta { display:block; margin-top:12px; font-size:14px; font-weight:750;
             color:var(--mint-deep); }
.vouch-link:hover .vouch-cta { color:var(--mint); }
.verified { color:var(--mint-deep); font-weight:800; }

.assure { display:grid; gap:16px; margin:24px 0 0;
          grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); }
.assure div { padding:20px; border-radius:var(--r); background:var(--sink);
              border:1px solid var(--line); }
.assure b { display:block; font-size:16px; margin-bottom:4px; }
.assure p { margin:0; font-size:14.5px; color:var(--ink-2); line-height:1.55; }

.steps { margin:0; padding:0; list-style:none; font-size:16.5px;
         line-height:1.85; color:var(--ink-2); }
.steps strong { color:var(--ink); }
.steps li + li { margin-top:4px; }

/* --- codes ---------------------------------------------------------------- */
.codes { display:flex; flex-direction:column; gap:12px; margin:20px 0; }
.code { display:flex; align-items:center; justify-content:space-between;
        gap:16px; padding:18px 20px; border-radius:var(--r);
        background:var(--mint-soft); border:1.5px dashed var(--mint-line); }
.code code { font:800 21px var(--display); color:var(--mint-deep);
             letter-spacing:.06em; user-select:all; word-break:break-all; }
.copy { font-size:13.5px; font-weight:750; padding:9px 16px; border-radius:99px;
        border:1px solid var(--line-2); background:var(--card); color:var(--ink);
        cursor:pointer; flex:none; }
.copy:hover { background:var(--sink); }
.warnbox { margin:20px 0 0; padding:17px 19px; border-radius:var(--r);
           background:var(--sun-soft); border:1px solid #F3D6A6;
           font-size:15.5px; color:#6B4708; }
.warnbox b { color:#8A5B08; }

/* --- status --------------------------------------------------------------- */
.status { display:inline-flex; align-items:center; gap:8px; font-size:13px;
          font-weight:800; padding:6px 14px; border-radius:99px;
          text-transform:uppercase; letter-spacing:.05em; }
.status-pending { color:#8A5B08; background:var(--sun-soft); }
.status-paid, .status-delivered { color:var(--mint-deep); background:var(--mint-soft); }
/* Paid, but we still owe them the goods. */
.status-fulfilling { color:#8A5B08; background:var(--sun-soft); }
.status-cancelled { color:var(--berry); background:var(--berry-soft); }
.dot { width:7px; height:7px; border-radius:99px; background:currentColor; }

/* --- tables --------------------------------------------------------------- */
table { width:100%; border-collapse:collapse; font-size:14.5px; }
th { text-align:left; font-size:12px; text-transform:uppercase;
     letter-spacing:.07em; color:var(--ink-3); padding:10px;
     border-bottom:1px solid var(--line); }
td { padding:12px 10px; border-bottom:1px solid var(--line); color:var(--ink-2); }
.mono { font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size:13px; }

.rows { display:flex; flex-direction:column; gap:3px; }
.row { display:flex; justify-content:space-between; gap:16px; padding:13px 16px;
       border-radius:var(--rs); background:var(--sink); font-size:15.5px; }
.row-total { background:var(--mint-soft); font-weight:800; }
.row-k { color:var(--ink-2); }

.field { display:flex; flex-direction:column; gap:7px; margin:0 0 18px; }
.field span { font-size:14px; font-weight:700; color:var(--ink-2); }
.pay-choice { display:grid; gap:14px;
              grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
              margin:8px 0 22px; }
.pay-opt { display:block; padding:18px; border-radius:var(--r);
           border:1.5px solid var(--line-2); background:var(--card);
           cursor:pointer; transition:border-color .15s ease; }
.pay-opt:hover { border-color:var(--mint); }
.pay-opt input { margin-right:9px; accent-color:var(--mint); }
.pay-opt b { display:block; font-size:16.5px; }
.pay-opt small { color:var(--ink-3); font-size:13.5px; line-height:1.5;
                 display:block; margin-top:3px; }

/* --- footer --------------------------------------------------------------- */
.foot { margin:60px 0 40px; padding-top:26px; border-top:1px solid var(--line);
        font-size:14.5px; color:var(--ink-3); }
.foot p { margin:0 0 6px; }

/* Quiet, but not hidden: 13.5px and real contrast. A disclaimer set in
   grey 10px is a disclaimer that wasn't meant to be read. */
.legal { font-size:13.5px; line-height:1.65; color:var(--ink-3);
         max-width:78ch; margin-top:14px; }
.legal strong { color:var(--ink-2); }

/* --- questions ------------------------------------------------------------ */
.qa { display:flex; flex-direction:column; gap:10px; margin:26px 0 0; }
.qa-item { background:var(--card); border:1px solid var(--line);
           border-radius:14px; padding:4px 20px; box-shadow:var(--shadow); }
.qa-item summary { cursor:pointer; padding:16px 0; font-size:17px;
                   font-weight:700; color:var(--ink); list-style:none;
                   display:flex; align-items:center; gap:10px; }
.qa-item summary::-webkit-details-marker { display:none; }
.qa-item summary::before { content:"+"; flex:none; width:22px; height:22px;
  border-radius:50%; background:var(--mint-soft); color:var(--mint-deep);
  display:flex; align-items:center; justify-content:center;
  font:800 15px var(--f); }
.qa-item[open] summary::before { content:"−"; }
.qa-body { padding:0 0 18px 32px; color:var(--ink-2); font-size:16px;
           line-height:1.65; }
.qa-edit { padding:18px 0; border-top:1px solid var(--line); }
textarea { font:400 15px var(--f); color:var(--ink); background:var(--card);
           border:1.5px solid var(--line-2); border-radius:var(--rs);
           padding:12px 14px; width:100%; resize:vertical; }
textarea:focus { outline:3px solid var(--mint-soft); border-color:var(--mint); }

.reassure { background:linear-gradient(170deg, var(--mint-soft), var(--card) 62%);
            border-color:var(--mint-line); }

/* The Discord-only proof: smaller cards, since it's an invitation rather
   than the main argument. */
.more-panel { margin-top:38px;
              background:linear-gradient(170deg, var(--sky-soft), var(--card) 60%);
              border-color:#C9DAF0; }
.proof-tight { grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
               gap:12px; }
.proof-tight .vouch { padding:13px 14px; }
.proof-tight .vouch-text { font-size:14.5px; }
.proof-tight .vouch-shot { max-height:150px; object-fit:cover; }

.footnav { display:flex; gap:20px; flex-wrap:wrap; margin-bottom:16px;
           font-weight:650; }
.footnav a { color:var(--ink-2); }

.price-group { padding:22px 0; border-top:1px solid var(--line); }
.price-group:first-of-type { border-top:0; padding-top:6px; }
.price-group table { margin-top:12px; }

/* --- a bit of life --------------------------------------------------------
   Small and quick. Anything slower than ~250ms on a phone reads as lag
   rather than polish, and all of it is off under reduced motion. */
@keyframes rise { from { opacity:0; transform:translateY(10px); } }
/* Arrival is handled by reveal.js, which only animates what's actually
   below the fold. `rise` stays for the pieces that appear in place — a new
   chat message, a flash. */

/* Something has to happen when a thumb lands on it. */
.btn:active, .chip:active, .vouch-link:active, .coupon:active {
  transform:translateY(1px) scale(.994); }
.btn, .chip, .coupon, .vouch-link { -webkit-tap-highlight-color:transparent; }

/* The discount flash catches the eye once, then stops. */
@keyframes pop { 0% { transform:rotate(2deg) scale(.86); opacity:0; }
                 60% { transform:rotate(2deg) scale(1.06); }
                 100% { transform:rotate(2deg) scale(1); opacity:1; } }
.flash-off { animation:pop .42s cubic-bezier(.2,.8,.2,1) both .12s; }

/* Stock that's nearly gone should read as nearly gone. */
@keyframes breathe { 50% { opacity:.55; } }
.tag-hot { animation:breathe 2.6s ease-in-out infinite; }

.muted { color:var(--ink-3); }
.back { display:inline-block; margin:26px 0 0; font-size:15px; font-weight:650; }

/* On a phone the total and the button sit far below the choice, so they
   follow you down. Desktop already shows everything at once. */
.stickybar { display:none; }
@media (max-width:760px) {
  .stickybar { display:block; position:fixed; left:0; right:0; bottom:0;
               z-index:40; background:var(--card);
               border-top:1px solid var(--line-2);
               box-shadow:0 -4px 16px rgba(35,38,44,.08);
               padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .stickybar-in { display:flex; align-items:center; gap:14px;
                  max-width:600px; margin-inline:auto; }
  .stickybar-k { display:block; font-size:12px; font-weight:700;
                 color:var(--ink-3); text-transform:uppercase;
                 letter-spacing:.06em; }
  .stickybar b { font-family:var(--display); font-size:1.5rem;
                 color:var(--mint-deep); line-height:1.1; }
  .stickybar .btn { margin-left:auto; flex:none; }
  /* Room for the bar, so it never covers the footer or the last field. */
  body:has(.stickybar) { padding-bottom:86px; }
  /* The in-form button is redundant once the bar is there. */
  .step-last .btn-wide { display:none; }
  .step-last .step-note { text-align:left; }
}

/* Phones. Most visitors are here, so this is the layout that matters. */
@media (max-width:760px) {
  body { font-size:15.5px; line-height:1.55; }
  .wrap { padding-inline:15px; }
  h1 { letter-spacing:-.02em; }
  .hero-grid h1 { font-size:clamp(1.65rem, 7.4vw, 2.1rem); }
  .hero-grid p { font-size:15.5px; }
  .hero-card { padding:16px 18px; }
  .hero-stat { padding:9px 0; }
  .hero-stat b { font-size:1.15rem; }
  .hero-stat span { font-size:12.5px; }

  .section-head { margin:30px 0 2px; }
  .section-head h2 { font-size:1.35rem; }
  .section-head p { font-size:13.5px; }

  .panel { padding:18px 16px; border-radius:16px; }
  .panel h2 { font-size:1.3rem; }
  .panel-sub { font-size:14.5px; margin-bottom:16px; }
  .coupon { padding:18px 18px 16px; }
  .coupon h3 { font-size:1.15rem; }
  .coupon-note { font-size:14.5px; }
  .save-big { font-size:1.25rem; }
  .flash-off b { font-size:1.3rem; }
  .steps { font-size:15px; line-height:1.7; }
  .assure div { padding:15px 16px; }
  .assure b { font-size:15px; }
  .assure p { font-size:13.5px; }
  .legal { font-size:12.5px; }
  .foot { font-size:13px; margin-top:38px; }

  /* Reviews: a capped, cropped photo so a card is a card rather than a
     full screen of somebody's freezer. */
  .proof { grid-template-columns:1fr; gap:12px; }
  .vouch { padding:15px 16px; }
  .vouch-text { font-size:15.5px; line-height:1.5; }
  .vouch-shot { max-height:200px; object-fit:cover; object-position:center; }
  .vouch-who { font-size:12.5px; margin-top:10px; }
  .vouch-cta { font-size:13.5px; margin-top:9px; }
  .vouch-stars { font-size:13px; }
}

@media (max-width:560px) {
  body { font-size:15.5px; }
  .hero { padding:36px 0 4px; }
  .panel { padding:22px; }
  .qty-row { grid-template-columns:1fr; }
  /* Narrower gutters buy back the width the chips need. */
  .wrap { padding-inline:16px; }
  .chips { gap:8px; grid-template-columns:repeat(auto-fill, minmax(88px, 1fr)); }
  .step { grid-template-columns:30px 1fr; gap:12px; padding:20px 0; }
  .step-n { width:28px; height:28px; font-size:14px; }
  .step-h { font-size:1.1rem; }
  .pick-qty { max-width:none; }
  .coupon::before, .coupon::after { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  * { transition:none !important; animation:none !important; }
  /* Without the animation the elements would keep its opening opacity. */
  .coupon, .vouch, .panel, .flash-off { opacity:1 !important;
                                        transform:none !important; }
}

/* --- the review count, now that it goes somewhere ------------------------- */
.head-go { font-weight:750; white-space:nowrap; }

/* --- reviews on a phone: a row you swipe, not a wall you scroll -----------
   Nine cards stacked in one column is nine screens of reviews before the
   page moves on. Side by side, the section costs one screen and the ones
   nobody reads cost nothing. */
.proof-more { margin:18px 0 0; }
.swipe-hint { display:none; }

@media (max-width:760px) {
  .proof-swipe, .proof-tight {
    display:grid; grid-auto-flow:column;
    grid-template-columns:none;       /* every column implicit, so all equal */
    grid-auto-columns:82%;            /* the next card peeks, which is the cue */
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    gap:12px; padding:4px 20px 14px;
    /* Break out of .wrap so cards can run to both edges. */
    margin-inline:-20px; width:calc(100% + 40px);
    scroll-padding-inline:20px;       /* a snapped card lines up with the text */
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .proof-swipe::-webkit-scrollbar,
  .proof-tight::-webkit-scrollbar { display:none; }
  .proof-swipe .vouch, .proof-tight .vouch { scroll-snap-align:start; }
  /* Equal height whatever the review's length, so the row doesn't lurch as
     you swipe past a one-word rave. */
  .proof-swipe .vouch, .proof-tight .vouch { height:100%; }
  .proof-swipe .vouch-text, .proof-tight .vouch-text {
    display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;
    overflow:hidden;
  }
  /* The photo is the proof, so it takes the slack rather than the text. */
  .proof-swipe .vouch-shot { margin-top:auto; }
  .proof-swipe .vouch-shot { max-height:180px; }
  /* The Discord cards are an invitation rather than the argument, so they
     take less room again. */
  .proof-tight { grid-auto-columns:72%; scroll-padding-inline:16px;
                 margin-inline:-16px; width:calc(100% + 32px);
                 padding-inline:16px; }
  .proof-tight .vouch-shot { max-height:150px; }
  .swipe-hint { display:block; margin:0; text-align:center;
                font-size:12.5px; font-weight:700; color:var(--ink-3); }
  .proof-more .btn { width:100%; }
  .head-go { display:block; margin-top:4px; }
}

/* --- the reviews page ----------------------------------------------------- */
.rv-head { display:grid; grid-template-columns:auto 1fr; gap:26px;
           align-items:center; padding:30px 0 6px; }
.rv-head h1 { font-size:2.1rem; }
.rv-head p { margin:10px 0 0; color:var(--ink-2); font-size:16.5px;
             max-width:56ch; }
.rv-score { text-align:center; background:var(--card);
            border:1px solid var(--line); border-radius:var(--rl);
            padding:18px 22px; box-shadow:var(--shadow); }
.rv-score b { display:block; font:700 2.4rem var(--display);
              color:var(--mint-deep); line-height:1; }
.rv-score span { display:block; margin-top:4px; font-size:13px;
                 color:var(--ink-2); font-weight:650; }
.rv-stars { color:var(--sun); letter-spacing:2px; font-size:16px; }

.rv-filters { display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 0; }
.rv-chip { font:650 14px var(--f); color:var(--ink-2); cursor:pointer;
           background:var(--card); border:1px solid var(--line);
           border-radius:999px; padding:8px 15px;
           transition:border-color .15s ease, background .15s ease; }
.rv-chip span { color:var(--ink-3); font-weight:750; margin-left:3px; }
.rv-chip:hover { border-color:var(--mint-line); }
.rv-on, .rv-on:hover { background:var(--mint-soft); border-color:var(--mint);
                       color:var(--mint-deep); }
.rv-on span { color:var(--mint-deep); }

.rv-list { display:grid; gap:16px; margin:22px 0 0;
           grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
           align-items:start; }
.rv-card[hidden] { display:none; }
.rv-more-wrap { margin-top:22px; text-align:center; }
.rv-more { width:100%; max-width:420px; }
.rv-empty { margin:26px 0; text-align:center; color:var(--ink-3); }
.rv-foot { margin-top:38px; text-align:center; }
.rv-foot .btn { margin:6px 5px 0; }

/* --- asking for help ------------------------------------------------------ */
.ask { display:grid; grid-template-columns:1.45fr 1fr; gap:22px;
       align-items:start; margin-top:24px; }
.ask-form { display:flex; flex-direction:column; gap:16px; }
.ask-side { display:flex; flex-direction:column; gap:16px; }
.ask-about { margin:0; padding:12px 14px; background:var(--mint-soft);
             border:1px solid var(--mint-line); border-radius:var(--rs);
             font-size:14.5px; }
.ask-ref { display:inline-block; margin-left:6px; font-family:ui-monospace,
           "SFMono-Regular",Menlo,monospace; font-size:13px;
           color:var(--mint-deep); }
.ask-note { margin:0; font-size:13.5px; color:var(--ink-3); }
.ask-list { margin:12px 0 0; padding-left:18px; }
.ask-list li { margin:7px 0; }

.fld { display:flex; flex-direction:column; gap:6px; }
.fld > span { font-size:14.5px; font-weight:750; color:var(--ink-2); }
.fld > span i { font-style:normal; font-weight:600; color:var(--ink-3); }
.fld input, .fld textarea, .thread-send textarea {
  font:400 16px/1.5 var(--f); color:var(--ink);
  background:var(--paper); border:1px solid var(--line-2);
  border-radius:var(--rs); padding:11px 13px; width:100%;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.fld input:focus, .fld textarea:focus, .thread-send textarea:focus {
  outline:none; border-color:var(--mint);
  box-shadow:0 0 0 3px var(--mint-soft);
}
.fld textarea, .thread-send textarea { resize:vertical; }

/* The file input itself is hidden and driven by its label, because the
   native control cannot be styled and reads as unfinished next to the rest. */
.drop-input { position:absolute; width:1px; height:1px; opacity:0;
              pointer-events:none; }
.drop { display:flex; flex-direction:column; align-items:center; gap:3px;
        padding:18px; cursor:pointer; text-align:center;
        background:var(--sink); border:2px dashed var(--line-2);
        border-radius:var(--rs); color:var(--ink-2);
        transition:border-color .15s ease, background .15s ease; }
.drop:hover { border-color:var(--mint); background:var(--mint-soft); }
.drop b { font-size:15px; }
.drop small { font-size:12.5px; color:var(--ink-3); }
.drop-input:focus-visible ~ .drop { outline:3px solid var(--mint-soft); }
.drop-slim { flex-direction:row; padding:10px 14px; font-size:14px;
             font-weight:700; border-width:1px; }

.shots { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.shots:empty { display:none; }
.shot img { width:72px; height:72px; object-fit:cover; border-radius:var(--rs);
            border:1px solid var(--line); display:block; }
.shot-count { font-size:12.5px; font-weight:700; color:var(--mint-deep); }

/* --- a conversation ------------------------------------------------------- */
.thread-head { display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap;
               padding:26px 0 0; }
.thread-head h1 { font-size:1.9rem; }
.thread-head .btn { margin-left:auto; }
.thread-sub { margin:8px 0 0; font-size:14.5px; color:var(--ink-2); }
.live-dot { display:inline-block; width:8px; height:8px; border-radius:50%;
            background:var(--mint); margin-right:5px;
            animation:pulse 1.8s ease-in-out infinite; }
.thread-keep { margin:16px 0 0; padding:11px 14px; font-size:14px;
               background:var(--sun-soft); border:1px solid #EBD6A8;
               border-radius:var(--rs); color:#7A5405; }

.thread { display:flex; flex-direction:column; gap:12px; margin:20px 0 0; }
.msg { max-width:min(560px, 88%); padding:13px 16px; border-radius:var(--r);
       background:var(--card); border:1px solid var(--line);
       box-shadow:var(--shadow); }
.msg-you { margin-left:auto; background:var(--mint-soft);
           border-color:var(--mint-line); }
.msg-who { font-size:11.5px; font-weight:800; letter-spacing:.04em;
           text-transform:uppercase; color:var(--ink-3); }
.msg-you .msg-who { color:var(--mint-deep); }
.msg-body { margin:5px 0 0; font-size:16px; line-height:1.55;
            white-space:pre-wrap; overflow-wrap:anywhere; }
.msg-shot { display:block; margin-top:9px; max-width:100%; max-height:300px;
            border-radius:var(--rs); border:1px solid var(--line); }
.msg-at { display:block; margin-top:7px; font-size:11.5px; color:var(--ink-3); }
.msg-new { animation:rise .3s cubic-bezier(.2,.8,.2,1) both; }
.thread-typing { margin:10px 0 0; font-size:13.5px; color:var(--ink-3); }

.thread-send { margin:20px 0 0; padding:15px; background:var(--card);
               border:1px solid var(--line); border-radius:var(--r);
               box-shadow:var(--shadow); display:flex; flex-direction:column;
               gap:11px; }
.thread-tools { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.thread-tools .btn { margin-left:auto; }

/* --- questions ------------------------------------------------------------ */
.qa-head { padding:30px 0 0; }
.qa-head h1 { font-size:2.1rem; }
.qa-head p { margin:10px 0 0; color:var(--ink-2); max-width:58ch; }
.qa-find { margin:18px 0 0; max-width:420px; }
.qa-find input { font:400 16px/1.5 var(--f); color:var(--ink); width:100%;
                 background:var(--card); border:1px solid var(--line-2);
                 border-radius:999px; padding:11px 18px; }
.qa-find input:focus { outline:none; border-color:var(--mint);
                       box-shadow:0 0 0 3px var(--mint-soft); }
.qa-group { margin-top:30px; }
.qa-group[hidden] { display:none; }
.qa-group-title { font-size:1.05rem; font-weight:700; letter-spacing:.02em;
                  text-transform:uppercase; color:var(--ink-3);
                  font-family:var(--f); }
.qa-group .qa { margin-top:10px; }
.qa-item[hidden] { display:none; }
.qa-item summary:hover { color:var(--mint-deep); }
.qa-none { margin:26px 0; text-align:center; color:var(--ink-3); }
.qa-foot { margin-top:38px; text-align:center; }
.qa-foot .btn { margin:6px 5px 0; }

@media (max-width:760px) {
  .rv-head { grid-template-columns:1fr; gap:16px; padding-top:22px; }
  .rv-head h1 { font-size:1.7rem; }
  .rv-head p { font-size:15.5px; }
  .rv-score { display:flex; align-items:center; justify-content:center;
              gap:10px; padding:12px 16px; }
  .rv-score b { font-size:1.6rem; }
  .rv-score span { margin-top:0; font-size:12.5px; }
  .rv-list { grid-template-columns:1fr; gap:12px; }
  .rv-filters { gap:6px; margin-top:18px; }
  .rv-chip { font-size:13px; padding:7px 12px; }

  .ask { grid-template-columns:1fr; }
  .qa-head h1 { font-size:1.7rem; }
  .qa-group-title { font-size:.95rem; }
  .thread-head h1 { font-size:1.55rem; }
  .thread-head .btn { margin-left:0; }
  .msg { max-width:92%; padding:11px 13px; }
  .msg-body { font-size:15.5px; }
  .msg-shot { max-height:230px; }
}

/* --- how many codes ------------------------------------------------------
   The old number field asked someone to think about typing. This asks them
   how much credit they want, which is the question that sells a second
   code — and every button is a thumb-sized target on a phone. */
.qty-box { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.qty-h { display:block; font-size:15px; font-weight:750; color:var(--ink-2); }

.stepper { display:inline-flex; align-items:stretch; margin-top:10px;
           border:1px solid var(--line-2); border-radius:999px;
           background:var(--card); overflow:hidden; }
.stepper-b { width:48px; border:0; background:transparent; cursor:pointer;
             font:700 22px/1 var(--f); color:var(--mint-deep);
             transition:background .12s ease; }
.stepper-b:hover { background:var(--mint-soft); }
.stepper-b:active { background:var(--mint-line); }
.stepper-b:disabled { color:var(--ink-3); cursor:not-allowed;
                      background:transparent; }
.stepper input {
  width:62px; border:0; border-inline:1px solid var(--line);
  background:transparent; text-align:center; color:var(--ink);
  font:700 20px/1 var(--display); padding:12px 0;
  /* The spinners duplicate the buttons either side of them. */
  -moz-appearance:textfield; appearance:textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.stepper input:focus { outline:none; background:var(--mint-soft); }

.qty-quick { display:flex; gap:7px; margin-top:11px; flex-wrap:wrap; }
.qty-quick button { font:700 14px var(--f); color:var(--ink-2);
                    cursor:pointer; background:var(--card);
                    border:1px solid var(--line); border-radius:999px;
                    padding:7px 15px;
                    transition:border-color .13s ease, background .13s ease; }
.qty-quick button em { font-style:normal; font-size:10.5px; font-weight:800;
                       letter-spacing:.03em; text-transform:uppercase;
                       color:var(--sun); margin-left:3px; }
.qty-quick button:hover { border-color:var(--mint-line); }
.qty-quick button.is-on { background:var(--mint-soft); border-color:var(--mint);
                          color:var(--mint-deep); }
.qty-quick button.is-on em { color:var(--mint-deep); }
.qty-quick button:disabled { opacity:.38; cursor:not-allowed;
                             border-color:var(--line); background:transparent; }

/* Beside the stepper, not under it. The stepper leaves most of its row
   empty and the pitch was claiming a block of its own below — which on a
   phone pushed the payment step off the screen. */
.qty-row { display:flex; align-items:center; gap:14px; margin-top:10px; }
.qty-row .stepper { flex:none; margin-top:0; }
.qty-up { flex:1; min-width:0; margin:0; font-size:14px; line-height:1.5;
          color:var(--ink-2); }
.qty-up:empty { display:none; }
.qty-up b { font-weight:850; color:var(--ink); }
.qty-up.is-good { padding:10px 12px; border-radius:var(--rs);
                  background:var(--mint-soft); border:1px solid var(--mint-line);
                  color:var(--mint-deep); font-weight:600; }
.qty-up.is-good b { color:var(--mint-deep); }

@media (max-width:560px) {
  /* The stepper gives back the width it doesn't need, so the pitch beside
     it has room to be read in two or three lines rather than six. */
  .stepper-b { width:42px; }
  .stepper input { width:50px; font-size:19px; padding:10px 0; }
  .qty-row { gap:11px; align-items:stretch; }
  .qty-quick { gap:6px; }
  .qty-quick button { flex:1 1 auto; padding:9px 10px; font-size:13.5px; }
  .qty-up { font-size:13px; line-height:1.45; display:flex;
            flex-direction:column; justify-content:center; }
}

/* --- the trust strip, rebuilt --------------------------------------------
   It was a flat row where "instant delivery" read exactly like a list of
   payment methods. Each claim now leads with its own mark and carries the
   part that matters in bold, with hairline dividers so they read as
   separate facts rather than one run-on sentence. */
.trustbar { background:linear-gradient(180deg, #E9F3EE, var(--mint-soft));
            border-bottom:1px solid var(--mint-line);
            font-size:13px; color:var(--mint-deep); font-weight:600; }
.trustbar-in { display:flex; gap:0; justify-content:center; flex-wrap:wrap;
               padding:8px 20px; text-align:center; }
.tb { display:inline-flex; align-items:center; gap:7px; padding:2px 18px;
      color:var(--mint-deep); white-space:nowrap; }
.tb + .tb { border-left:1px solid var(--mint-line); }
.tb b { font-weight:800; }
.tb-link { text-decoration:none; }
.tb-link:hover { text-decoration:none; }
.tb-link:hover b { text-decoration:underline; }

/* Little round marks rather than raw emoji: the emoji were three different
   sizes and colours and made the row look assembled from parts. */
.tb-i { display:inline-flex; align-items:center; justify-content:center;
        width:17px; height:17px; border-radius:50%; flex:none;
        font-size:10.5px; font-style:normal; font-weight:900;
        line-height:1; }
.tb-go { background:var(--mint); color:#fff; }
.tb-star { background:var(--sun); color:#fff; font-size:10px; }
.tb-lock, .tb-box { background:transparent; font-size:12px; }

/* On a phone the four claims wrapped to three lines and pushed the shop
   down the page. They take turns on one line instead — same claims, a
   fifth of the height. */
@media (max-width:760px) {
  /* Tall enough for two lines. The claims are absolutely positioned so the
     box can't grow to fit them, and it clips what it can't show — on a
     narrow phone the longest claim wraps, and half a sentence disappearing
     is worse than the six pixels this costs. */
  .trustbar-in { position:relative; display:block; padding:7px 14px;
                 height:40px; overflow:hidden; }
  .tb { position:absolute; inset:0; display:flex; justify-content:center;
        align-items:center; text-align:center; line-height:1.3;
        padding:0 14px; font-size:12.5px;
        opacity:0; transform:translateY(6px);
        transition:opacity .45s ease, transform .45s ease;
        pointer-events:none; white-space:normal; }
  .tb + .tb { border-left:0; }
  .tb.is-on { opacity:1; transform:none; pointer-events:auto; }
  /* With no JavaScript nothing would ever get the class, so the first one
     shows by default and the script takes over from there. */
  .trustbar-in:not(.is-live) .tb:first-child { opacity:1; transform:none; }
}

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

/* --- the add-on menu, from inside the form -------------------------------
   The menu is the reason to buy the credit at all, and it lived below the
   whole checkout. This puts a way to it right where someone is deciding how
   many to take, and a way back at the other end. */
/* Blue, not amber. It now sits directly under the upsell, and two warm
   boxes in a row read as one block — this is a way to look at something,
   not another pitch. */
.menu-peek { display:flex; align-items:center; gap:12px; margin-top:12px;
             padding:13px 15px; border-radius:var(--rs);
             background:var(--sky-soft); border:1px solid #C9DAF0;
             color:#2C5282; text-decoration:none;
             transition:border-color .15s ease, transform .15s ease,
                        box-shadow .15s ease; }
.menu-peek:hover { text-decoration:none; border-color:var(--sky);
                   transform:translateY(-1px); box-shadow:var(--shadow); }
.menu-peek-i { font-size:21px; flex:none; }
.menu-peek b { display:block; font-size:15px; font-weight:800; }
.menu-peek em { display:block; font-style:normal; font-size:13px;
                opacity:.82; margin-top:1px; }
.menu-peek-go { margin-left:auto; font-size:19px; font-weight:800;
                flex:none; opacity:.66; }

/* --- support hours -------------------------------------------------------- */
.hours { margin:14px 0 0; padding:11px 14px; border-radius:var(--rs);
         font-size:14.5px; line-height:1.55; }
.hours.is-open { background:var(--mint-soft); border:1px solid var(--mint-line);
                 color:var(--mint-deep); }
.hours.is-shut { background:var(--sky-soft); border:1px solid #C9DAF0;
                 color:#2C5282; }
.hours b { font-weight:800; }

@media (max-width:560px) {
  .menu-peek { padding:11px 12px; gap:10px; }
  .menu-peek b { font-size:14px; }
  .menu-peek em { font-size:12.5px; }
  .hours { font-size:13.5px; }
}

/* --- credit amounts, on a phone ------------------------------------------
   Seven tiers wrapped to three rows and pushed the rest of the form off the
   screen, so choosing an amount meant scrolling past the thing you were
   choosing for. One swipeable row instead — the same gesture as the
   reviews, and the whole form fits again. */
@media (max-width:760px) {
  .chips-swipe {
    display:flex; flex-wrap:nowrap; gap:8px;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x proximity; scroll-padding-inline:20px;
    margin-inline:-20px; width:calc(100% + 40px);
    padding:4px 20px 10px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .chips-swipe::-webkit-scrollbar { display:none; }
  .chips-swipe .chip { flex:0 0 auto; min-width:92px; scroll-snap-align:start;
                       padding:11px 13px; }
  .chips-swipe .chip-face { font-size:1.08rem; }
  .chips-swipe .chip-pay { font-size:12px; }
  .chips-swipe .chip-left { font-size:9.5px; }
}

/* --- the volume discount -------------------------------------------------- */
.qty-quick button em { font-style:normal; font-size:10.5px; font-weight:800;
                       letter-spacing:.02em; color:var(--berry);
                       margin-left:3px; }
.qty-quick button.is-on em { color:var(--mint-deep); }

/* The push variant: this is the one that's making an offer, so it reads
   warmer than the plain confirmation. */
.qty-up.is-push { padding:10px 12px; border-radius:var(--rs);
                  background:var(--sun-soft); border:1px solid #EBD6A8;
                  color:#7A5405; }
.qty-up.is-push b { font-weight:850; color:#5E4104; }

.total-off { color:var(--berry); font-weight:750; font-size:13.5px; }
.total-off:empty { display:none; }

/* --- reviews on a desktop -------------------------------------------------
   A plain grid makes every row as tall as its tallest card, so a one-line
   review next to a full receipt screenshot left a column of dead space. CSS
   columns let each card take only the height it needs and the next one
   close the gap. */
@media (min-width:761px) {
  .rv-list { display:block; columns:3; column-gap:16px; }
  .rv-card { display:inline-block; width:100%; margin:0 0 16px;
             break-inside:avoid; -webkit-column-break-inside:avoid; }
  /* A tall receipt screenshot shouldn't own a third of the page. The photo
     is proof, and proof reads fine at a glance. */
  .rv-card .vouch-shot { max-height:340px; object-fit:cover;
                         object-position:top; }
}
@media (min-width:761px) and (max-width:1000px) {
  .rv-list { columns:2; }
}

/* The pick of the bunch, given the room it earns. */
.rv-star { break-inside:avoid; }
.rv-star .vouch-shot { max-height:none; }
@media (min-width:761px) {
  .rv-best { display:grid; gap:16px; margin:22px 0 0;
             grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
}
.rv-best { display:grid; gap:12px; margin:18px 0 0; }
.rv-best-head { margin:26px 0 0; font-size:1.05rem; font-weight:700;
                letter-spacing:.02em; text-transform:uppercase;
                color:var(--ink-3); font-family:var(--f); }

/* --- what the reviews add up to ------------------------------------------ */
.rv-gist { margin:18px 0 0; padding:16px 18px; border-radius:var(--r);
           background:var(--mint-soft); border:1px solid var(--mint-line); }
.rv-gist h3 { font-family:var(--f); font-size:14px; font-weight:800;
              letter-spacing:.03em; text-transform:uppercase;
              color:var(--mint-deep); margin:0 0 8px; }
.rv-gist p { margin:0; color:var(--ink-2); font-size:15.5px; line-height:1.6; }
.rv-gist ul { margin:10px 0 0; padding-left:20px; color:var(--ink-2);
              font-size:15px; }
.rv-gist li { margin:4px 0; }
.rv-gist-note { display:block; margin-top:10px; font-size:12.5px;
                color:var(--ink-3); }

@media (max-width:560px) {
  .rv-gist { padding:13px 15px; }
  .rv-gist p, .rv-gist ul { font-size:14.5px; }
}

/* --- Discord in the bar --------------------------------------------------- */
.nav-dc { display:inline-flex; align-items:center; gap:6px;
          padding:6px 12px; border-radius:999px;
          background:var(--sky-soft); border:1px solid #C9DAF0;
          color:#2C5282 !important; font-weight:750; }
.nav-dc em { font-style:normal; font-size:11px; font-weight:700; opacity:.75; }
.nav-dc:hover { background:#DFEAF7; text-decoration:none; }

/* --- "I've paid" ---------------------------------------------------------- */
.waiting .btn { margin-top:12px; }
.ipaid-note { display:block; margin-top:9px; font-size:13.5px;
              color:var(--ink-2); line-height:1.5; }
.ipaid-note:empty { display:none; }
.ipaid-note.is-busy { color:var(--mint-deep); font-weight:650; }
.ipaid-note.is-good { color:var(--mint-deep); font-weight:750; }
.ipaid-note.is-warn { color:#8A5B08; font-weight:650; }

/* While a check is running, the dot stops idling and gets on with it. */
.waiting.is-checking .waiting-dot { animation-duration:.6s; }

/* --- a basket ------------------------------------------------------------
   Mixing amounts in one order is the thing nobody expects a site like this
   to allow, so it's shown rather than implied — otherwise a second amount
   looks like it replaced the first. */
.basket { margin-top:14px; padding:13px 15px; border-radius:var(--rs);
          background:var(--sink); border:1px solid var(--line); }
.basket[hidden] { display:none; }
.basket-h { display:block; font-size:12px; font-weight:800;
            letter-spacing:.04em; text-transform:uppercase;
            color:var(--ink-3); }
.basket-list { list-style:none; margin:9px 0 0; padding:0; }
.basket-hint { margin:10px 0 0; font-size:12.5px; color:var(--ink-3);
               line-height:1.5; }

/* A tick or a count on every amount that's in the order. */
.chip { position:relative; }
.chip-count { position:absolute; top:-7px; right:-6px; z-index:2;
              min-width:20px; height:20px; padding:0 5px;
              display:flex; align-items:center; justify-content:center;
              border-radius:999px; background:var(--mint); color:#fff;
              font:800 11px/1 var(--f); box-shadow:var(--shadow); }
.chip-count[hidden] { display:none; }

.qty-h b { font-weight:850; color:var(--ink); }

/* The lines of an order, on the order and pay pages. */
.order-lines { list-style:none; margin:14px 0 0; padding:0; }
.order-lines li { display:flex; align-items:baseline; gap:10px;
                  padding:8px 0; font-size:15.5px; color:var(--ink-2);
                  border-top:1px solid var(--line); }
.order-lines li b { margin-left:auto; color:var(--ink);
                    font:700 15.5px var(--display); }

@media (max-width:560px) {
  .basket { padding:11px 13px; }
  .order-lines li { font-size:14.5px; }
}

/* --- a photo, full size --------------------------------------------------
   The photos are the argument, and a freezer full of ribeye at thumbnail
   size is a brown rectangle. Opened up it's the reason someone buys — so
   the buy button is here, where they're looking, rather than back up the
   page they've scrolled away from. */
.lb { position:fixed; inset:0; z-index:100;
      display:flex; align-items:center; justify-content:center;
      padding:20px; background:rgba(24,26,30,.86);
      -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
      animation:lb-in .18s ease both; }
.lb[hidden] { display:none; }
@keyframes lb-in { from { opacity:0; } }
body.lb-open { overflow:hidden; }

.lb-in { margin:0; max-width:760px; width:100%; max-height:100%;
         display:flex; flex-direction:column; gap:0;
         background:var(--card); border-radius:var(--rl); overflow:hidden;
         box-shadow:0 24px 64px rgba(0,0,0,.4);
         animation:lb-rise .26s cubic-bezier(.2,.8,.2,1) both; }
@keyframes lb-rise { from { opacity:0; transform:translateY(14px) scale(.98); } }

.lb-cap { padding:18px 20px 20px; display:flex; flex-direction:column;
          gap:9px; }
.lb-quote { font:600 19px/1.4 var(--display); color:var(--ink); }
.lb-quote:empty { display:none; }
.lb-who { font-size:13.5px; color:var(--ink-3); font-weight:650; }
.lb-who em { font-style:normal; }
.lb-cta { margin-top:4px; }

.lb-x { position:absolute; top:14px; right:16px; z-index:2;
        width:42px; height:42px; border-radius:50%; cursor:pointer;
        border:1px solid rgba(255,255,255,.25);
        background:rgba(0,0,0,.45); color:#fff;
        font:300 26px/1 var(--f);
        display:flex; align-items:center; justify-content:center;
        transition:background .15s ease, transform .15s ease; }
.lb-x:hover { background:rgba(0,0,0,.7); transform:scale(1.06); }
.lb-x:focus-visible { outline:3px solid var(--mint); outline-offset:2px; }

.vouch-shot { cursor:zoom-in; }

@media (max-width:560px) {
  .lb { padding:0; align-items:flex-end; }
  .lb-in { max-height:94vh; border-radius:var(--rl) var(--rl) 0 0; }
  .lb-img { max-height:52vh; }
  .lb-cap { padding:15px 16px 22px; }
  .lb-quote { font-size:17px; }
  .lb-cta { width:100%; }
}

/* --- movement, kept to what earns its place -------------------------------
   The audience is adults deciding whether to trust a stranger with money.
   Motion here is there to make the page feel built rather than to entertain:
   things arrive as you reach them, nothing bounces, nothing loops, and the
   whole lot is off for anyone who asks for less. */
@media (prefers-reduced-motion:no-preference) {
  /* Sections lift in as they come into view. The class is added by script
     only once an observer is available, so with no JS everything is simply
     visible from the start. */
  .js-rise { opacity:0; transform:translateY(14px);
             transition:opacity .5s cubic-bezier(.2,.7,.3,1),
                        transform .5s cubic-bezier(.2,.7,.3,1); }
  .js-rise.is-in { opacity:1; transform:none; }

  /* Staggered by a hair, so a row of cards reads left to right rather than
     landing as one block. */
  .js-rise[data-step="1"] { transition-delay:.05s; }
  .js-rise[data-step="2"] { transition-delay:.1s; }
  .js-rise[data-step="3"] { transition-delay:.15s; }

  /* The first screen doesn't wait to be scrolled to. */
  .hero-grid > div, .hero-card {
    animation:first-in .6s cubic-bezier(.2,.7,.3,1) both;
  }
  .hero-card { animation-delay:.08s; }
  @keyframes first-in {
    from { opacity:0; transform:translateY(16px); }
  }

  /* A quiet lift on the things you're meant to press. */
  .coupon { transition:transform .18s cubic-bezier(.2,.8,.2,1),
                       box-shadow .18s ease, border-color .18s ease; }
  .coupon:hover { transform:translateY(-3px); box-shadow:var(--shadow-lift); }
  .btn { transition:transform .14s cubic-bezier(.2,.8,.2,1),
                    box-shadow .14s ease, background .14s ease,
                    border-color .14s ease; }
  .btn-go:hover { transform:translateY(-1px); box-shadow:var(--shadow-lift); }
  .chip { transition:transform .14s cubic-bezier(.2,.8,.2,1),
                     border-color .14s ease, background .14s ease; }

  /* The saving is the whole pitch, so it gets the one flourish on the page. */
  .flash-off { animation:pop .5s cubic-bezier(.2,1.3,.4,1) both; }
  @keyframes pop {
    from { opacity:0; transform:scale(.82) rotate(-4deg); }
  }
}

/* Anything above is movement, so all of it goes when movement isn't wanted. */
@media (prefers-reduced-motion:reduce) {
  .js-rise { opacity:1 !important; transform:none !important; }
  .lb, .lb-in { animation:none; }
}

html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* --- the deal cards, rebuilt ---------------------------------------------
   The title ran the brand, the word "Credits" and a stray emoji together at
   heading size, and the middle of the card was one sentence — which on two
   cards said much the same thing. The brand is now the loud part with a
   quiet kicker above it, and the space in the middle carries the amounts
   actually on the shelf, which is what someone is scanning for anyway. */
.coupon-name { display:flex; flex-direction:column; gap:1px; min-width:0; }
.coupon-kicker { font-size:11px; font-weight:800; letter-spacing:.07em;
                 text-transform:uppercase; color:var(--ink-3); }
.coupon-kicker:empty { display:none; }
/* The header had the brand on the left and the badge on the right with a
   wide gap of nothing between them. The brand is bigger, and the range of
   amounts sits under it — so the title block has the height of the badge
   beside it rather than floating against it. */
.coupon-top h3 { font-size:clamp(1.55rem, 3.4vw, 1.9rem);
                 letter-spacing:-.025em; line-height:1.05; }
.coupon-range { display:block; margin-top:5px; font-size:13.5px;
                font-weight:750; color:var(--ink-3); }

.coupon-tags { margin:14px 0 0; display:flex; gap:7px; flex-wrap:wrap; }

.coupon-note { margin:13px 0 0; }

@media (max-width:560px) {
  .coupon-top h3 { font-size:1.45rem; }
  .coupon-kicker { font-size:10px; }
  .coupon-range { font-size:12.5px; margin-top:4px; }
}

/* --- bulk pricing controls ------------------------------------------------ */
.markup { margin:18px 0 0; padding:15px 16px; border-radius:var(--rs);
          background:var(--sink); border:1px solid var(--line); }
.markup-form { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.markup-note { margin:10px 0 0; font-size:13px; color:var(--ink-3);
               line-height:1.55; }
.markup-note code { background:var(--card); padding:1px 5px;
                    border-radius:4px; border:1px solid var(--line);
                    font-size:12.5px; }

/* The fast lane, said where someone is about to settle for a slow one. */
.hours-dc { display:block; margin-top:8px; font-weight:750; font-size:14px; }

/* --- card payment, once Stripe is on -------------------------------------
   The marks are drawn in CSS rather than fetched as logos: no third-party
   requests from a checkout page, nothing to break the content policy, and
   nobody's brand assets hotlinked. They're recognisable shapes that say
   "the normal ways to pay work here", which is all they need to do. */
.pay-card { display:block; }
.pay-head { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.pay-head b { display:inline; font-size:16.5px; }
.pay-head input { margin:0; }
.pay-fast { margin-left:auto; font-size:11px; font-weight:800;
            letter-spacing:.04em; text-transform:uppercase;
            color:var(--mint-deep); background:var(--mint-soft);
            border:1px solid var(--mint-line);
            padding:3px 9px; border-radius:99px; }

.pay-marks { display:flex; gap:6px; flex-wrap:wrap; margin:11px 0 0; }
.mark-pay { display:inline-flex; align-items:center; justify-content:center;
            height:26px; min-width:42px; padding:0 8px; border-radius:5px;
            background:var(--card); border:1px solid var(--line-2);
            font:800 10.5px/1 var(--f); letter-spacing:.04em;
            color:var(--ink-2); }
.mark-visa { color:#1A1F71; letter-spacing:.09em; font-style:italic; }
.mark-amex { color:#006FCF; }
.mark-apple { color:#111; font-weight:600; font-size:12px;
              letter-spacing:0; }
.mark-google { color:#3C4043; letter-spacing:0; font-size:12px; }
/* Mastercard's two discs, as two overlapping circles. */
.mark-mc { gap:0; }
.mark-mc i { width:13px; height:13px; border-radius:50%; display:block; }
.mark-mc i:first-child { background:#EB001B; }
.mark-mc i:last-child { background:#F79E1B; margin-left:-5px;
                        mix-blend-mode:multiply; }

@media (max-width:560px) {
  .pay-fast { margin-left:0; }
  .mark-pay { height:24px; min-width:38px; padding:0 7px; font-size:10px; }
}

/* --- the cart ------------------------------------------------------------
   It used to be a read-only list: the only control was the stepper above,
   which edits whichever amount is *selected* — so wanting one fewer $174
   meant first working out you had to re-select $174. Every row now carries
   its own controls. */
.basket-h { display:flex; align-items:baseline; gap:10px; }
.basket-h b { margin-left:auto; color:var(--ink); font:700 14px var(--display);
              text-transform:none; letter-spacing:0; }

.cart-row { display:flex; align-items:center; gap:10px;
            padding:9px 0; font-size:15px; color:var(--ink-2); }
.cart-row + .cart-row { border-top:1px dashed var(--line); }
.cart-what { font-weight:750; color:var(--ink); min-width:56px; }
.cart-cost { margin-left:auto; color:var(--ink);
             font:700 15px var(--display); }

.cart-tools { display:inline-flex; align-items:center;
              border:1px solid var(--line-2); border-radius:99px;
              background:var(--card); overflow:hidden; }
.cart-b { width:30px; height:28px; border:0; background:transparent;
          cursor:pointer; color:var(--mint-deep);
          font:700 16px/1 var(--f); transition:background .12s ease; }
.cart-b:hover:not(:disabled) { background:var(--mint-soft); }
.cart-b:disabled { color:var(--ink-3); cursor:not-allowed; }
.cart-n { min-width:22px; text-align:center; font:700 14px var(--display);
          color:var(--ink); border-inline:1px solid var(--line); }

.cart-x { width:26px; height:26px; flex:none; border-radius:50%;
          border:1px solid var(--line); background:var(--card);
          cursor:pointer; color:var(--ink-3);
          font:400 17px/1 var(--f);
          display:flex; align-items:center; justify-content:center;
          transition:color .12s ease, border-color .12s ease,
                     background .12s ease; }
.cart-x:hover { color:var(--berry); border-color:var(--berry);
                background:var(--berry-soft); }

/* --- stock urgency --------------------------------------------------------
   Running out is the one thing on a card worth interrupting someone for, so
   it's the only tag allowed to shout. The "sold this week" figure beside it
   is counted from real sales, never a claim — if nothing moved, the card
   says nothing. */
.tag-low { color:#fff; background:var(--berry);
           border:1px solid var(--berry);
           box-shadow:0 1px 4px rgba(201,86,106,.35);
           animation:low-pulse 2.4s ease-in-out infinite; }
@keyframes low-pulse {
  0%, 100% { box-shadow:0 1px 4px rgba(201,86,106,.35); }
  50%      { box-shadow:0 1px 10px rgba(201,86,106,.6); }
}
@media (prefers-reduced-motion:reduce) {
  .tag-low { animation:none; }
}
.tag-fast { color:#8A5B08; background:var(--sun-soft);
            border:1px solid #EBD6A8; font-weight:800; }

@media (max-width:560px) {
  .cart-row { font-size:14.5px; gap:8px; }
  .cart-what { min-width:48px; }
  .cart-b { width:28px; }
}

/* --- the headline --------------------------------------------------------
   The discount is the whole proposition, so the headline shows it rather
   than describing it: a stroke draws itself through "fraction" the way a
   marked-down price gets crossed out. Drawn with a gradient rather than
   text-decoration so it can sit at an angle, overshoot the word slightly
   the way a pen would, and animate in. */
.cut { position:relative; display:inline-block; white-space:nowrap; }
.cut::after {
  content:""; position:absolute; left:-.05em; right:-.05em; top:55%;
  /* Thin, and not quite solid. A heavy stroke crossed the word out; this
     marks it down and leaves it readable, which is the point — "fraction"
     is the word doing the selling. */
  height:.055em; border-radius:99px; transform-origin:left center;
  opacity:.85;
  /* Tapered at both ends, so it reads as a stroke and not a rule. */
  background:linear-gradient(90deg,
    rgba(201,86,106,0) 0%, var(--berry) 8%,
    var(--berry) 92%, rgba(201,86,106,0) 100%);
  transform:rotate(-2.4deg) scaleX(0);
  /* Waits two seconds so it happens *while* you're reading rather than
     before you've arrived, then draws, holds, clears and comes back. */
  animation:cut-loop 7.5s cubic-bezier(.3,.9,.35,1) 2s infinite;
}
@keyframes cut-loop {
  0%   { transform:rotate(-2.4deg) scaleX(0); opacity:.85; }
  9%   { transform:rotate(-2.4deg) scaleX(1); opacity:.85; }
  52%  { transform:rotate(-2.4deg) scaleX(1); opacity:.85; }
  62%  { transform:rotate(-2.4deg) scaleX(1); opacity:0; }
  /* Reset while it can't be seen, so the next pass draws from the left
     again instead of snapping back. */
  63%  { transform:rotate(-2.4deg) scaleX(0); opacity:0; }
  99%  { transform:rotate(-2.4deg) scaleX(0); opacity:0; }
  100% { transform:rotate(-2.4deg) scaleX(0); opacity:.85; }
}

/* A line that draws and redraws forever is motion; anyone who's asked for
   less gets it drawn once and left alone. */
@media (prefers-reduced-motion:reduce) {
  .cut::after { transform:rotate(-2.4deg) scaleX(1); opacity:.85;
                animation:none; }
}

/* --- the hero panel ------------------------------------------------------
   It was three rows of text separated by rules, which made the numbers and
   their descriptions read as one grey block. Each row now leads with its
   own mark, so the three reasons are three things rather than a list. */
.hero-card { padding:10px 24px 12px; }
.hero-stat { display:flex; align-items:flex-start; gap:14px;
             padding:18px 0; }
.hero-stat + .hero-stat { border-top:1px solid var(--line); }
.hero-stat > div { min-width:0; }
/* Round and quiet. Square colour tiles made three plain facts look like a
   feature grid. */
.hero-i { flex:none; width:30px; height:30px; border-radius:50%;
          display:flex; align-items:center; justify-content:center;
          font-size:14px; font-style:normal; margin-top:5px;
          background:var(--sink); opacity:.9; }
.hero-i-star { background:var(--sun-soft); }

.hero-stat b { display:block; font:600 1.4rem var(--display);
               color:var(--ink); line-height:1.1; letter-spacing:-.01em; }
.hero-stat span { display:block; font-size:13.5px; color:var(--ink-2);
                  margin-top:4px; line-height:1.5; }

/* The one row that goes somewhere says so. */
.hero-stat-go { color:inherit; }
.hero-stat-go em { display:inline-block; margin-top:6px; font-style:normal;
                   font-weight:800; font-size:12.5px;
                   color:var(--mint-deep); }
.hero-stat-go:hover { text-decoration:none; }
.hero-stat-go:hover em { text-decoration:underline; }
.hero-stat-go:hover .hero-i-star { transform:scale(1.06); }
.hero-i-star { transition:transform .15s ease; }

@media (max-width:560px) {
  .hero-card { padding:16px 17px 18px; }
  .hero-stat { padding:12px 0; gap:11px; }
  .hero-i { width:30px; height:30px; border-radius:9px; font-size:14px; }
  .hero-stat b { font-size:1.25rem; }
  .hero-stat span { font-size:13px; }
}

/* --- the lightbox, for two different jobs --------------------------------
   A review photo opens to be looked at: it fits the screen and the buy
   button sits under it. A menu page opens to be *read*, so it takes the
   full width and the panel scrolls — pinching a wall of small print is the
   thing this is here to avoid. */
.lb-scroll { overflow:auto; -webkit-overflow-scrolling:touch;
             background:var(--sink); }
.lb-img { display:block; width:100%; max-height:62vh; object-fit:contain; }

/* Menu pages: full width, scroll to read, no shrinking to fit. */
.lb-tall .lb-scroll { max-height:74vh; }
.lb-tall .lb-img { max-height:none; object-fit:fill; height:auto; }
.lb-tall .lb-in { max-width:860px; }

.lb-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:2;
          width:46px; height:46px; border-radius:50%; cursor:pointer;
          border:1px solid rgba(255,255,255,.25);
          background:rgba(0,0,0,.45); color:#fff;
          font:300 30px/1 var(--f);
          display:flex; align-items:center; justify-content:center;
          transition:background .15s ease, transform .15s ease; }
.lb-nav:hover { background:rgba(0,0,0,.72); }
.lb-nav[hidden] { display:none; }
.lb-prev { left:14px; }
.lb-next { right:14px; }
.lb-nav:focus-visible { outline:3px solid var(--mint); outline-offset:2px; }

.lb-who span { color:var(--ink-3); }

@media (max-width:560px) {
  .lb-tall .lb-scroll { max-height:66vh; }
  .lb-nav { width:40px; height:40px; font-size:26px;
            top:auto; bottom:calc(100% + 10px); transform:none; }
  .lb-prev { left:10px; }
  .lb-next { right:10px; }
}

/* The menu images on the page itself are now a way in, not just a picture. */
.menu-shot { cursor:zoom-in; }

/* --- the card option, before its keys arrive ------------------------------ */
.pay-soon { opacity:.72; border-style:dashed; cursor:default; }
.pay-soon:hover { border-color:var(--line-2); }
.pay-soon-flag { display:block; margin-bottom:10px; padding:6px 10px;
                 border-radius:6px; background:var(--sun-soft);
                 border:1px solid #EBD6A8; color:#7A5405;
                 font-size:11.5px; font-weight:750; line-height:1.4; }

/* --- how it works, in a quarter of the space -----------------------------
   Three numbered lines plus six reassurance blocks sat between the deals
   and the reviews. The reviews are the better argument, so this gets out of
   their way: one row of three, and the reassurances as a single line under
   it. */
.how { list-style:none; counter-reset:how; margin:16px 0 0; padding:0;
       display:grid; gap:14px;
       grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); }
.how li { counter-increment:how; position:relative; padding-left:34px; }
.how li::before {
  content:counter(how); position:absolute; left:0; top:-1px;
  width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--mint-soft); color:var(--mint-deep);
  font:800 12px/1 var(--f);
}
.how b { display:block; font-size:15.5px; color:var(--ink); }
.how span { display:block; margin-top:2px; font-size:14px;
            color:var(--ink-2); line-height:1.5; }
.how-fine { margin:18px 0 0; padding-top:15px;
            border-top:1px solid var(--line);
            font-size:13.5px; line-height:1.6; color:var(--ink-3); }
.how-fine a { font-weight:750; white-space:nowrap; }

@media (min-width:761px) {
  .how { gap:24px; margin-top:20px; }
  .how li { padding-left:42px; }
  .how li::before { width:30px; height:30px; font-size:14px; top:-2px; }
  .how b { font-size:17px; }
  .how span { font-size:15px; margin-top:4px; }
  .how-fine { margin-top:24px; padding-top:20px; font-size:15px;
              color:var(--ink-2); max-width:none; }
}

@media (max-width:760px) {
  /* One column reads better than two cramped ones, and the steps are
     short enough that stacking them costs almost nothing. */
  .how { gap:11px; margin-top:13px; grid-template-columns:1fr; }
  .how li { padding-left:30px; }
  .how li::before { width:21px; height:21px; font-size:11px; }
  .how b { font-size:14.5px; }
  .how span { font-size:13.5px; margin-top:1px; }
  .how-fine { margin-top:14px; padding-top:12px; font-size:12.5px;
              line-height:1.55; }
}

/* --- the add step ---------------------------------------------------------
   Looking at an amount and buying it are different actions. The stepper
   above offers a number; this is where it becomes an order. */
.add-btn { margin-top:14px; }
.add-btn:disabled { opacity:.55; cursor:default; transform:none;
                    box-shadow:none; }
.add-btn.is-done, .add-btn.is-done:disabled {
  opacity:1; background:var(--mint-deep); border-color:var(--mint-deep);
}
.go-hint { margin:10px 0 0; font-size:13.5px; color:var(--ink-3);
           text-align:center; }
.go-hint[hidden] { display:none; }
#go-btn:disabled { opacity:.5; cursor:default; transform:none;
                   box-shadow:none; }

/* --- a quieter sales figure ----------------------------------------------
   A counted number doesn't need to shout to be persuasive, and next to the
   red low-stock tag it was competing for the same attention. */
.tag-fast { color:var(--ink-3); background:transparent;
            border:1px solid var(--line); font-weight:700; }