/* ============================================================================
   Loyalty Cards — marketing site
   Brand: green #075A51 · orange #E06136 · sky #83C7C7 · mustard #EBB95C
          cream #FFEECD · ink #070E0F        Type: Rubik
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap');

:root{
  --green:#075A51; --green-deep:#053F39; --green-soft:#E8F1EF;
  --orange:#E06136; --orange-deep:#C44A22; --orange-soft:#FDEDE7;
  --sky:#83C7C7; --mustard:#EBB95C; --cream:#FFEECD; --ink:#070E0F;
  --text:#14201F; --muted:#5F6C6B; --faint:#8D9998;
  --bg:#FFFFFF; --bg-2:#FBFAF7; --line:#E6EAE9;
  --r:12px; --r-lg:20px; --r-xl:28px;
  --shadow:0 2px 8px rgba(7,90,81,.05), 0 18px 44px -22px rgba(7,32,30,.22);
  --font:'Rubik',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-size:16.5px;line-height:1.6;color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased}
a{color:var(--orange);text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.028em;line-height:1.12;text-wrap:balance}
h1{font-size:clamp(34px,5.4vw,58px)}
h2{font-size:clamp(27px,3.6vw,40px)}
h3{font-size:20px;letter-spacing:-.018em}
p{margin:0 0 16px;text-wrap:pretty}
img{max-width:100%}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.muted{color:var(--muted)}
.center{text-align:center}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font);
  font-weight:500;font-size:16px;padding:14px 26px;border-radius:14px;border:1.5px solid transparent;
  cursor:pointer;transition:.16s;text-decoration:none;white-space:nowrap;line-height:1.2}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:none}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 8px 20px -8px rgba(224,97,54,.55)}
.btn-primary:hover{background:var(--orange-deep);color:#fff}
.btn-outline{border-color:var(--line);color:var(--text);background:#fff}
.btn-outline:hover{border-color:var(--green);color:var(--green)}
.btn-ghost-light{color:#fff;border-color:rgba(255,255,255,.32)}
.btn-ghost-light:hover{background:rgba(255,255,255,.12);color:#fff}
.btn-sm{padding:10px 18px;font-size:14.5px;border-radius:11px}

/* ── Header ────────────────────────────────────────────────────────────── */
header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:22px;height:70px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo:hover{text-decoration:none}
.logo-txt{font-size:20px;font-weight:600;letter-spacing:-.03em;color:var(--green);white-space:nowrap}
.logo-txt em{font-style:normal;color:var(--orange)}
.nav-links{display:flex;gap:26px;margin-left:14px}
.nav-links a{color:var(--muted);font-size:15px;font-weight:400}
.nav-links a:hover{color:var(--green);text-decoration:none}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:10px}
@media(max-width:860px){.nav-links{display:none}}
@media(max-width:520px){.nav-cta .hide-xs{display:none}}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero{padding:76px 0 20px;background:
  radial-gradient(900px 420px at 78% -8%, var(--cream), transparent 62%),
  radial-gradient(700px 380px at 8% 4%, #EAF4F2, transparent 60%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:38px}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--green-soft);color:var(--green);
  font-size:13.5px;font-weight:500;padding:7px 14px;border-radius:30px;margin-bottom:22px}
.hero p.lead{font-size:19px;color:var(--muted);max-width:33em;margin-bottom:28px}
/* ── Phone mock ─────────────────────────────────────────────────────────
   An actual device, not a rounded rectangle: real 9:19.5 proportions, a
   titanium-ish rim, side buttons, a Dynamic Island, and a screen that clips
   its contents. The caption moves outside the device — a phone doesn't have
   grey explanatory text printed under its screen. */
/* Sized from height, not width. The device is the tallest thing in the hero:
   let it size off the column and it out-grows the copy beside it, so centring
   the row opens a large gap under the buttons — which is exactly what it did.
   Binding it to viewport height keeps the two columns comparable and stops the
   hero growing past the screen. */
.phone{container-type:inline-size;
  position:relative;height:clamp(380px,55svh,580px);width:auto;aspect-ratio:9/19.5;
  max-width:100%;margin:0 auto;
  border-radius:44px;padding:9px;
  background:linear-gradient(150deg,#4A5654 0%,#161F1E 26%,#0B1211 52%,#2C3735 78%,#101817 100%);
  box-shadow:0 2px 3px rgba(255,255,255,.16) inset,
             0 50px 90px -38px rgba(4,20,18,.75),
             0 18px 36px -20px rgba(4,20,18,.5)}
/* Side buttons. */
.phone:before,.phone:after{content:'';position:absolute;width:3px;border-radius:3px;
  background:linear-gradient(180deg,#39433F,#1B2322)}
.phone:before{left:-3px;top:23%;height:6.5%;box-shadow:0 4.2em 0 #2A3331,0 7.4em 0 #2A3331}
.phone:after{right:-3px;top:31%;height:10%}

.phone-screen{position:relative;height:100%;border-radius:36px;overflow:hidden;
  background:linear-gradient(168deg,#FFFFFF 0%,#F4F8F7 100%);
  display:flex;flex-direction:column;padding:0}
/* Dynamic Island. */
.phone-screen:before{content:'';position:absolute;top:3.2cqw;left:50%;transform:translateX(-50%);
  width:31%;height:7cqw;background:#080D0C;border-radius:14px;z-index:3}

/* A status bar sells the illusion more than any amount of bezel detail. */
.phone-status{display:flex;justify-content:space-between;align-items:center;
  padding:4.6cqw 6.5cqw 0;font-size:3.9cqw;font-weight:600;color:#0C1613;letter-spacing:.01em;
  position:relative;z-index:2}
.phone-status .sig{display:flex;gap:2.5px;align-items:flex-end}
.phone-status .sig i{display:block;width:2.5px;background:#0C1613;border-radius:1px}
.phone-status .sig i:nth-child(1){height:4px}
.phone-status .sig i:nth-child(2){height:6px}
.phone-status .sig i:nth-child(3){height:8px}
.phone-status .sig i:nth-child(4){height:10px}
.phone-status .bat{width:19px;height:10px;border:1.2px solid #0C1613;border-radius:3px;
  position:relative;padding:1.4px}
.phone-status .bat span{display:block;height:100%;width:72%;background:#0C1613;border-radius:1px}
.phone-status .bat:after{content:'';position:absolute;right:-3px;top:3px;width:1.6px;height:4px;
  background:#0C1613;border-radius:0 1px 1px 0}

/* The card page is taller than the screen — as it is in real life — so the
   screen scrolls its own content rather than clipping it dead. */
.phone-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:5cqw 5cqw 9cqw;display:flex;flex-direction:column;gap:4cqw;
  scrollbar-width:none}
.phone-body::-webkit-scrollbar{display:none}
/* The page continues past the screen; fade the cut so the last row reads as
   "there's more" rather than "this is broken". */
.phone-screen{position:relative}
.phone-screen .fade{position:absolute;left:0;right:0;bottom:0;height:12%;z-index:4;
  pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,0),#F6F9F8 78%)}
/* Flex children shrink by default, so in a scrolling column the first block
   gets crushed to a sliver instead of the column scrolling. */
.phone-body > *{flex-shrink:0}
/* Home indicator. */
.phone-screen:after{content:'';position:absolute;bottom:2.4cqw;left:50%;transform:translateX(-50%);
  width:34%;height:1.5cqw;border-radius:3px;background:#0C1613;opacity:.28}

/* ── The card page, inside the device ───────────────────────────────────
   A replica of what app/card.html actually renders — same order, same
   components: the card, the in-store hint, the personal QR, the help panel,
   visit history. The real page can't be iframed here: it lives on another
   origin and the app sends X-Frame-Options SAMEORIGIN, which is worth keeping
   on a surface behind a login.

   Everything is in cqw — container units — so the whole page holds its
   proportions whether the device renders at 190px on a short laptop or 272px
   on a large screen. */

.mk-card{position:relative;border-radius:6cqw;padding:5.5cqw 6cqw 6cqw;color:#fff;overflow:hidden;
  background:linear-gradient(158deg,var(--green) 0%,var(--green-deep) 58%,var(--green) 100%);
  box-shadow:0 14px 30px -14px rgba(7,32,30,.6),0 1px 0 rgba(255,255,255,.10) inset;
  border:1px solid rgba(255,255,255,.16)}
/* The real card's inset hairline and diagonal sheen. */
.mk-card:before{content:'';position:absolute;inset:2cqw;border-radius:4cqw;pointer-events:none;
  border:1px solid rgba(255,255,255,.18)}
.mk-card:after{content:'';position:absolute;top:-40%;left:-15%;width:60%;height:180%;
  transform:rotate(18deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent)}
.mk-top{display:flex;align-items:center;justify-content:space-between;gap:2.5cqw}
.mk-wordmark{font-size:4.6cqw;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.mk-chip{font-size:2.7cqw;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mustard);border:1px solid rgba(255,255,255,.34);padding:1cqw 2.4cqw;
  border-radius:20px;white-space:nowrap}
.mk-name{font-size:8cqw;font-weight:600;line-height:1;letter-spacing:-.02em;margin:4cqw 0 4.4cqw;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-stamps{display:grid;grid-template-columns:repeat(6,1fr);gap:2.2cqw}
.mk-st{aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1.5px dashed rgba(255,255,255,.42);font-size:3.6cqw;color:rgba(255,255,255,.5)}
.mk-st.on{background:var(--orange);border:none;color:#fff}
.mk-st.rw{background:var(--mustard);border:none;color:#5A3B0C}
.mk-status{font-size:3.7cqw;text-align:center;margin-top:4cqw;color:rgba(255,255,255,.86)}
.mk-status b{color:var(--mustard);font-weight:600}

.mk-hint{font-size:3.5cqw;text-align:center;color:#7C8D89;margin:0;line-height:1.45}

.mk-panel{background:#fff;border:1px solid #E4EBE9;border-radius:4.5cqw;padding:4.5cqw 4.5cqw 5cqw}
.mk-panel.mk-qr{text-align:center}
.mk-qr img{width:48%;height:auto;display:block;margin:0 auto 3cqw}
.mk-qcap{font-size:3.3cqw;letter-spacing:.1em;text-transform:uppercase;color:#9AA9A5}
.mk-h{display:block;font-size:4.4cqw;font-weight:600;color:var(--green-deep);margin-bottom:2cqw}
.mk-note{font-size:3.4cqw;color:#7C8D89;margin:2cqw 0 0;line-height:1.5}
.mk-btns{display:flex;gap:2.2cqw;flex-wrap:wrap;margin-top:3.4cqw}
.mk-btn{display:inline-flex;align-items:center;gap:1.4cqw;font-size:3.3cqw;font-weight:500;
  color:var(--green-deep);border:1px solid #DCE6E3;border-radius:20px;padding:1.8cqw 3cqw;
  white-space:nowrap}
.mk-btn i{font-size:3.8cqw;color:var(--orange)}
.mk-visit{display:flex;justify-content:space-between;align-items:center;gap:2cqw;
  padding:2.6cqw 0;border-bottom:1px solid #EFF4F3;font-size:3.4cqw;color:#7C8D89}
.mk-visit:last-child{border-bottom:none}
.mk-visit b{display:block;font-size:3.9cqw;color:#0C1613;font-weight:500;margin-bottom:.4cqw}
.mk-plus{color:var(--green);font-weight:600;font-size:3.6cqw}

/* Outside the device, where a caption belongs. */
.phone-cap{text-align:center;font-size:13.5px;color:rgba(255,255,255,.62);margin:20px auto 0;
  max-width:26ch;line-height:1.5}

/* ── Logos / trust strip ───────────────────────────────────────────────── */
/* ── Sections ──────────────────────────────────────────────────────────── */
section{padding:82px 0}
.sec-head{max-width:640px;margin:0 auto 46px;text-align:center}
.sec-head .kicker{font-size:13px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--orange);margin-bottom:14px}
.sec-head p{font-size:17.5px;color:var(--muted);margin-top:14px}

.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.feature-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.feature-grid{grid-template-columns:1fr}}
.feature{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px;transition:.18s}
.feature:hover{border-color:var(--sky);transform:translateY(-2px);box-shadow:var(--shadow)}
.feature .ic{width:44px;height:44px;border-radius:13px;background:var(--green-soft);color:var(--green);
  display:flex;align-items:center;justify-content:center;font-size:21px;margin-bottom:16px}
.feature.accent .ic{background:var(--orange-soft);color:var(--orange)}
.feature h3{margin-bottom:8px}
.feature p{font-size:15px;color:var(--muted);margin:0}

/* ── Steps ─────────────────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:s}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding-top:8px}
.step .n{width:42px;height:42px;border-radius:14px;background:var(--green);color:#fff;font-weight:600;
  font-size:18px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.step h3{margin-bottom:8px}
.step p{color:var(--muted);font-size:15.5px;margin:0}

/* ── Pricing ───────────────────────────────────────────────────────────── */
.pricing{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
:root{--price-col:820px}
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;
  max-width:var(--price-col);margin:0 auto}
@media(max-width:760px){.plans{grid-template-columns:1fr}}
.plan{background:#fff;border:1.5px solid var(--line);border-radius:var(--r-xl);padding:32px 28px;
  display:flex;flex-direction:column;position:relative}
.plan.featured{border-color:var(--green);box-shadow:var(--shadow)}
.plan .flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--green);
  color:#fff;font-size:12px;font-weight:500;padding:5px 15px;border-radius:20px;white-space:nowrap}
.plan h3{font-size:21px;margin-bottom:5px}
.plan .desc{font-size:14.5px;color:var(--muted);margin-bottom:20px;min-height:42px}
.price{display:flex;align-items:baseline;gap:5px;margin-bottom:6px}
.price .cur{font-size:19px;font-weight:500;color:var(--muted)}
.price .amt{font-size:46px;font-weight:600;letter-spacing:-.035em;color:var(--green);line-height:1}
.price .per{font-size:15px;color:var(--muted)}
.plan .addon{font-size:14px;color:var(--orange);font-weight:500;margin-bottom:22px;min-height:21px}
.plan ul{list-style:none;padding:0;margin:0 0 26px;flex:1;display:flex;flex-direction:column;gap:11px}
.plan li{display:flex;gap:10px;font-size:15px;align-items:flex-start;color:var(--text)}
.plan li i{color:var(--green);font-size:17px;flex-shrink:0;margin-top:1px}
.plan li.off{color:var(--faint)}
.plan li.off i{color:var(--faint)}
.pricing-note{max-width:var(--price-col);margin:22px auto 0;text-align:center;font-size:15px;color:var(--muted);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 22px}
.pricing-note strong{color:var(--text);font-weight:500}

/* ── Outlet calculator ─────────────────────────────────────────────────── */
.calc{max-width:var(--price-col);margin:22px auto 0;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:22px 24px}
.calc-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.calc-row label{font-size:15px;font-weight:500;margin:0}
.stepper{display:flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:11px;overflow:hidden}
.stepper button{width:40px;height:40px;border:none;background:#fff;font-size:19px;color:var(--green);
  cursor:pointer;font-family:var(--font);transition:.14s}
.stepper button:hover{background:var(--green-soft)}
.stepper button:disabled{color:var(--faint);cursor:default;background:#fff}
.stepper .val{width:46px;text-align:center;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.calc-total{margin-left:auto;text-align:right}
.calc-total .t{font-size:29px;font-weight:600;color:var(--green);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.calc-total .s{font-size:13px;color:var(--muted)}
.calc-break{font-size:13.5px;color:var(--faint);margin-top:12px}

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq{max-width:760px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{list-style:none;cursor:pointer;padding:18px 2px;font-size:17px;font-weight:500;
  display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{color:var(--faint);transition:.2s;flex-shrink:0}
.faq details[open] summary i{transform:rotate(180deg)}
.faq .a{padding:0 2px 20px;color:var(--muted);font-size:16px}
.faq .a p:last-child{margin-bottom:0}

/* ── CTA band ──────────────────────────────────────────────────────────── */
.cta{background:linear-gradient(140deg,var(--green) 0%,var(--green-deep) 100%);color:#fff;
  border-radius:var(--r-xl);padding:60px 40px;text-align:center;position:relative;overflow:hidden}
.cta:after{content:'';position:absolute;right:-70px;bottom:-90px;width:290px;height:290px;border-radius:50%;
  background:rgba(235,185,92,.16)}
.cta h2{color:#fff;margin-bottom:14px;position:relative;z-index:1}
.cta p{color:rgba(255,255,255,.82);font-size:18px;max-width:34em;margin:0 auto 28px;position:relative;z-index:1}
.cta .btn{position:relative;z-index:1}

/* ── Footer ────────────────────────────────────────────────────────────── */
footer{background:var(--bg-2);border-top:1px solid var(--line);padding:52px 0 34px;margin-top:80px}
.foot{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap;margin-bottom:34px}
.foot-col h4{font-size:13px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);margin-bottom:14px}
.foot-col a{display:block;color:var(--muted);font-size:15px;margin-bottom:9px}
.foot-col a:hover{color:var(--green);text-decoration:none}
.foot-brand{max-width:280px}
.foot-brand p{font-size:14.5px;color:var(--muted);margin:12px 0 0}
.foot-bottom{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:14px;color:var(--faint)}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============================================================================
   Cinematic layer
   ----------------------------------------------------------------------------
   The subject of this product is the counter — the small ritual between a shop
   and its regulars. So the photography is of counters and hands, not of the
   software, and it runs full-bleed at scale rather than sitting in tidy little
   cards. A green scrim over every image keeps stock photography inside the
   brand instead of looking borrowed.
   ========================================================================== */
:root{
  --night:#04211E;
  --night-2:#0A2F2A;
  --scrim:linear-gradient(180deg,rgba(4,33,30,.30) 0%,rgba(4,33,30,.72) 58%,rgba(4,33,30,.93) 100%);
}

/* This supersedes the pill-shaped .eyebrow above, so every property that rule
   sets has to be unset here — otherwise the pill's green background survives
   and shows up behind uppercase mustard text on a photograph. */
.eyebrow{display:block;background:none;padding:0;border-radius:0;gap:0;
  font-size:12.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mustard);margin-bottom:16px}
.eyebrow.dark{color:var(--orange)}

/* ── Cinematic hero ────────────────────────────────────────────────────── */
.cine{position:relative;background:var(--night);color:#fff;overflow:hidden;isolation:isolate}
/* Explicit positive stacking, not z-index:-2. A negative-index layer paints
   behind its parent, and once the image inside gains a filter (its own
   stacking context) the whole layer disappears behind the section's green. */
.cine-media{position:absolute;inset:0;z-index:0}
.cine-media img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
/* Two scrims: one down the page, one from the left. The copy sits on the left,
   and without the horizontal one a bright patch in the photograph — a stack of
   pale cups, a window — lands behind the eyebrow and eats it. */
.cine-media:after{content:'';position:absolute;inset:0;z-index:2;background:var(--scrim)}
.cine-media .side{position:absolute;inset:0;z-index:3;
  background:linear-gradient(90deg,rgba(4,33,30,.82) 0%,rgba(4,33,30,.55) 34%,rgba(4,33,30,0) 66%)}
@media(max-width:900px){
  .cine-media .side{background:linear-gradient(90deg,rgba(4,33,30,.72),rgba(4,33,30,.5))}
}
/* A wash of brand green over the photograph, so a warm café shot and a cool
   salon shot end up in the same world. */
/* A green wash over the photograph, so a warm café shot and a cool salon shot
   end up in the same world.
   Deliberately NOT mix-blend-mode: the filter below makes the image its own
   stacking context, and multiply then composites against the wrong backdrop
   and floods the hero solid green. A plain alpha gradient is predictable. */
.cine-media:before{content:'';position:absolute;inset:0;z-index:1;
  background:radial-gradient(125% 95% at 18% 0%,rgba(7,90,81,.34) 0%,rgba(4,33,30,.06) 64%)}
/* The scrim flattens a warm shot to grey, so put contrast and colour back. */
.cine-media img{filter:saturate(1.18) contrast(1.06)}
/* padding-block, not the shorthand: .cine-in also carries .wrap, and a
   `padding:118px 0 104px` here would silently reset .wrap's 22px side
   padding to zero and jam the copy against the screen edge on mobile.
   The padding scales with viewport HEIGHT, not width. A 13" laptop is wide
   but short, and fixed vertical padding is what pushes the call to action
   below the fold on exactly the machines most people are browsing on. */
.cine-in{position:relative;z-index:2;padding-block:clamp(38px,6vh,96px)}

/* The whole hero fits the screen, so the CTA is always visible without
   scrolling — and the proof row peeks above the fold to show there's more. */
.cine{min-height:min(100svh,900px);display:flex;align-items:center}
@supports not (height:100svh){.cine{min-height:min(100vh,900px)}}

@media(max-width:760px){.cine{min-height:0;display:block}}

.cine h1{color:#fff;font-weight:700;font-size:clamp(36px,4.6vw,60px);letter-spacing:-.035em;
  line-height:1.06;max-width:14ch}
.cine .lede{color:rgba(255,255,255,.84);font-size:clamp(16.5px,1.5vw,19px);max-width:42ch;
  margin:18px 0 26px;line-height:1.58}
.cine .actions{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.cine .note{color:rgba(255,255,255,.6);font-size:14.5px;margin:20px 0 0}

/* Small proof row sitting under the hero copy. */
/* A grid, not flex-wrap. These four are one unit; with wrapping, the fourth
   drops onto a line of its own and reads as an orphan rather than a set. */
.provebar{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,30px);
  margin-top:clamp(22px,3vh,38px);padding-top:20px;
  border-top:1px solid rgba(255,255,255,.16)}
@media(max-width:820px){.provebar{grid-template-columns:repeat(2,1fr);row-gap:20px}}
.provebar .n{font-size:25px;font-weight:600;letter-spacing:-.02em;color:var(--mustard);
  font-variant-numeric:tabular-nums}
.provebar .l{font-size:13.5px;color:rgba(255,255,255,.62);margin-top:2px}

/* ── Editorial image + copy blocks ─────────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:34px}}
.split.flip .split-media{order:2}
@media(max-width:900px){.split.flip .split-media{order:0}}

.shot{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--night-2);
  aspect-ratio:4/3;box-shadow:0 30px 70px -34px rgba(4,33,30,.55)}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot.tall{aspect-ratio:3/4}
.shot.wide{aspect-ratio:16/9}
/* A whisper of brand over every photograph. */
.shot:after{content:'';position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(7,90,81,.20),rgba(224,97,54,.10));pointer-events:none}

.shot-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 22px;color:#fff;
  background:linear-gradient(0deg,rgba(4,33,30,.9),transparent);font-size:14.5px}

/* ── Step cards over photography ───────────────────────────────────────── */
.steps-cine{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:860px){.steps-cine{grid-template-columns:1fr}}
.stepc{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:3/4;
  background:var(--night-2);display:flex;align-items:flex-end;isolation:isolate}
.stepc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.stepc:before{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(4,33,30,.10) 0%,rgba(4,33,30,.62) 52%,rgba(4,33,30,.93) 100%)}
/* Some of these photographs are naturally very dark; without this the third
   card reads as a plain green rectangle.
   Note every layer here uses a POSITIVE z-index. A negative one paints behind
   its parent, and combined with a filter (which makes the image its own
   stacking context) the photograph intermittently vanishes. */
.stepc img{filter:saturate(1.12) contrast(1.04) brightness(1.12)}
.stepc .body{position:relative;z-index:2;padding:26px 24px;color:#fff}
.stepc .num{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:10px;background:var(--orange);color:#fff;font-size:14.5px;font-weight:600;margin-bottom:14px}
.stepc h3{color:#fff;font-size:19.5px;margin-bottom:7px}
.stepc p{color:rgba(255,255,255,.76);font-size:14.8px;margin:0;line-height:1.55}

/* ── Pull quote over an image ──────────────────────────────────────────── */
.quote-cine{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--night);
  isolation:isolate;padding:clamp(48px,7vw,88px) clamp(28px,5vw,72px);color:#fff}
.quote-cine img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:saturate(1.12) contrast(1.04)}
.quote-cine:before{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(105deg,rgba(4,33,30,.94) 0%,rgba(4,33,30,.72) 55%,rgba(7,90,81,.5) 100%)}
.quote-cine .eyebrow,.quote-cine blockquote,.quote-cine .who{position:relative;z-index:2}
.quote-cine blockquote{margin:0;max-width:24ch;font-size:clamp(23px,3.4vw,36px);font-weight:500;
  line-height:1.25;letter-spacing:-.025em;text-wrap:balance}
.quote-cine .who{margin-top:22px;font-size:15px;color:rgba(255,255,255,.72)}
.quote-cine .who strong{color:var(--mustard);font-weight:500}

/* ── Section rhythm ────────────────────────────────────────────────────── */
.band{padding:clamp(64px,8vw,104px) 0}
.band.tight{padding:clamp(44px,5vw,64px) 0}
.band.night{background:var(--night);color:#fff}
.band.night h2{color:#fff}
.band.night p{color:rgba(255,255,255,.74)}
.band.cream{background:var(--cream)}

@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}
}

/* Laptops are wide but short. Below this height the hero trims itself rather
   than letting the button fall off the bottom of the screen. */
@media(min-width:901px) and (max-height:820px){
  .cine h1{font-size:clamp(34px,3.6vw,46px)}
  .cine .lede{font-size:16.5px;margin:14px 0 20px;max-width:40ch}
  .cine .note{margin-top:14px;font-size:13.5px}
  .provebar{margin-top:22px;padding-top:16px;gap:22px}
  .provebar .n{font-size:21px}
  .phone-cap{margin-top:10px;font-size:12px}
}

/* ============================================================================
   Conversion sections
   ========================================================================== */

/* ── Sticky mobile call to action ───────────────────────────────────────
   On a phone the hero CTA scrolls away and never comes back until the very
   bottom. This keeps the one action always reachable — it is the single
   highest-leverage change on a mobile landing page. */
.stickycta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  gap:10px;align-items:center;padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .28s cubic-bezier(.4,0,.2,1)}
.stickycta.in{transform:none}
.stickycta .price{font-size:13px;color:var(--muted);line-height:1.3;flex:1;min-width:0}
.stickycta .price b{display:block;color:var(--text);font-size:14.5px;font-weight:600}
.stickycta .btn{flex-shrink:0}
@media(max-width:760px){.stickycta{display:flex}
  footer{padding-bottom:96px}}

/* ── Mobile menu ────────────────────────────────────────────────────────
   The nav links were simply hidden under 860px, which left a phone with no
   way to reach pricing or the FAQ at all. */
.burger{display:none;background:none;border:1px solid var(--line);border-radius:10px;
  width:40px;height:40px;align-items:center;justify-content:center;font-size:20px;
  color:var(--text);cursor:pointer;flex-shrink:0}
@media(max-width:860px){.burger{display:flex}}
.mobnav{position:fixed;inset:0;z-index:70;background:rgba(7,32,30,.5);
  opacity:0;pointer-events:none;transition:opacity .2s}
.mobnav.open{opacity:1;pointer-events:auto}
.mobnav-panel{position:absolute;top:0;right:0;bottom:0;width:min(310px,84%);background:var(--bg);
  padding:20px 22px;display:flex;flex-direction:column;gap:4px;
  transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1)}
.mobnav.open .mobnav-panel{transform:none}
.mobnav-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.mobnav a.item{display:block;padding:14px 2px;font-size:17px;color:var(--text);
  border-bottom:1px solid var(--line)}
.mobnav a.item:hover{text-decoration:none;color:var(--green)}
.mobnav .btn{margin-top:18px}

/* ── Card design gallery ────────────────────────────────────────────────
   Six layouts, each in a different business's colours, because the point being
   made is "it looks like your shop" — showing six greens would prove nothing. */
.cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.cardgrid{grid-template-columns:repeat(2,1fr);gap:16px}}
@media(max-width:560px){
  /* A 1-column stack of six cards is a lot of scrolling on a phone; swiping
     through them reads as a gallery and keeps the section short. */
  .cardgrid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;
    margin-inline:-22px;padding:4px 22px 14px;scrollbar-width:none}
  .cardgrid::-webkit-scrollbar{display:none}
  .cardgrid > *{flex:0 0 78%;scroll-snap-align:center}
}

/* The stamps are the product, so they are the loudest thing on the card, then
   the shop, then the reward. The customer's name is incidental here — this
   gallery is showing a shop what THEIR card looks like, not whose it is. */
.samp{border-radius:20px;padding:20px 22px;color:#fff;position:relative;overflow:hidden;
  aspect-ratio:1.62/1;display:flex;flex-direction:column;gap:14px;
  box-shadow:0 18px 38px -20px rgba(4,33,30,.62);border:1px solid rgba(255,255,255,.17)}
.samp:before{content:'';position:absolute;inset:7px;border-radius:14px;pointer-events:none;
  border:1px solid rgba(255,255,255,.17)}
/* A sheen, so the six don't read as flat swatches. */
.samp:after{content:'';position:absolute;top:-45%;left:-18%;width:55%;height:190%;
  transform:rotate(18deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}

.samp-top{display:flex;align-items:center;gap:10px;position:relative;z-index:2}
/* The trade mark. A coffee cup or a pair of scissors tells a shop owner "this
   is a card for a shop like mine" faster than any caption. */
.samp-trade{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;font-size:16px;background:rgba(255,255,255,.16);flex-shrink:0}
.samp-chip{margin-left:auto;font-size:8px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;border:1px solid rgba(255,255,255,.32);padding:3px 9px;
  border-radius:20px;white-space:nowrap;opacity:.9}
.samp-who{font-size:11.5px;opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── The hero: the stamps ── */
.samp-dots{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;
  position:relative;z-index:2;margin-top:auto}
.samp-dots i{aspect-ratio:1;border-radius:50%;display:flex;align-items:center;
  justify-content:center;border:1.5px dashed rgba(255,255,255,.4);font-size:12px;
  font-style:normal;color:rgba(255,255,255,.55)}
.samp-dots i.on{border:none;box-shadow:0 3px 10px -3px rgba(0,0,0,.45)}
.samp-dots i.rw{border:none}

.samp-foot{position:relative;z-index:2;display:flex;align-items:baseline;
  justify-content:space-between;gap:12px}
.samp-mark{font-size:16px;font-weight:600;letter-spacing:-.015em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.samp-goal{font-size:11.5px;opacity:.82;white-space:nowrap}

.samp-label{margin-top:14px;font-size:13.5px;color:var(--muted);text-align:center}
.samp-label b{display:block;color:var(--text);font-weight:500;font-size:15px}

/* Layout variants — the same six the app ships. */
.samp[data-tpl="centre"]{align-items:center;text-align:center}
.samp[data-tpl="centre"] .samp-top{flex-direction:column;gap:8px;width:100%}
.samp[data-tpl="centre"] .samp-chip{margin-left:0}
.samp[data-tpl="centre"] .samp-foot{flex-direction:column;gap:4px;align-items:center}

.samp[data-tpl="split"] .samp-top{align-items:flex-start}
.samp[data-tpl="split"] .samp-dots{grid-template-columns:repeat(6,1fr);gap:6px}
.samp[data-tpl="split"] .samp-foot{align-items:center}

.samp[data-tpl="minimal"]:before{inset:0;border:none;
  border-top:1px solid rgba(255,255,255,.15)}
.samp[data-tpl="minimal"]:after{display:none}
.samp[data-tpl="minimal"] .samp-trade{background:rgba(255,255,255,.09);border-radius:50%}
.samp[data-tpl="minimal"] .samp-chip{border:none;padding:0;opacity:.55;letter-spacing:.22em}
.samp[data-tpl="minimal"] .samp-mark{font-weight:500;letter-spacing:.04em}
.samp[data-tpl="minimal"] .samp-dots i{border-style:solid;border-color:rgba(255,255,255,.22)}

.samp[data-tpl="bold"] .samp-mark{font-size:21px;font-weight:700;letter-spacing:-.03em}
.samp[data-tpl="bold"] .samp-dots{padding:12px 22px;margin:0 -22px;
  background:rgba(0,0,0,.28);border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1)}

.samp[data-tpl="ticket"]{border-radius:15px}
.samp[data-tpl="ticket"]:before{inset:0;border:none;border-radius:0;left:auto;right:58px;
  width:0;border-left:2px dashed rgba(255,255,255,.4)}
.samp[data-tpl="ticket"] .samp-top,
.samp[data-tpl="ticket"] .samp-dots,
.samp[data-tpl="ticket"] .samp-foot{padding-right:52px}

/* ── The stamp, animated ────────────────────────────────────────────────
   One full-width panel rather than a box beside a list: the two columns were
   different heights and never lined up, and the steps read as a caption to the
   animation instead of being part of it. Now the steps are tabs along the top
   of the same panel and advance with the animation, so the panel is one object.
   The card sits in a phone, because that is where a customer sees it. */
.demo{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--night-2);
  isolation:isolate}
.demo:before{content:'';position:absolute;inset:0;z-index:0;
  background:radial-gradient(110% 130% at 50% -20%,rgba(7,90,81,.62),transparent 68%)}

/* ── Tabs ── */
.dtabs{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid rgba(255,255,255,.13)}
.dtab{position:relative;background:none;border:none;cursor:pointer;font-family:var(--font);
  text-align:left;padding:20px 22px;color:rgba(255,255,255,.55);transition:color .25s,background .25s;
  border-left:1px solid rgba(255,255,255,.09)}
.dtab:first-child{border-left:none}
.dtab .n{display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;
  border-radius:7px;background:rgba(255,255,255,.13);font-size:12px;font-weight:600;
  margin-bottom:9px;transition:.25s}
.dtab strong{display:block;font-size:15.5px;font-weight:600;color:rgba(255,255,255,.82);
  letter-spacing:-.01em;transition:.25s}
.dtab span{display:block;font-size:13.5px;line-height:1.45;margin-top:3px}
.dtab.on{background:rgba(255,255,255,.07);color:rgba(255,255,255,.82)}
.dtab.on .n{background:var(--orange);color:#fff}
.dtab.on strong{color:#fff}
/* The progress rule under the active tab. */
.dtab.on:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--orange)}
@media(max-width:860px){
  .dtabs{grid-template-columns:repeat(2,1fr)}
  .dtab:nth-child(3){border-left:none}
  .dtab:nth-child(n+3){border-top:1px solid rgba(255,255,255,.09)}
  .dtab span{display:none}          /* the label alone carries it on a phone */
}
@media(max-width:460px){
  .dtabs{grid-template-columns:repeat(4,1fr)}
  .dtab{padding:14px 8px;text-align:center;border-top:none!important;border-left:none}
  .dtab .n{margin:0 auto 6px}
  .dtab strong{font-size:12px}
}

/* ── Stage ── */
.stage{position:relative;z-index:2;padding:clamp(30px,5vw,54px) 22px clamp(34px,5vw,58px);
  display:flex;flex-direction:column;align-items:center;gap:22px}

/* The phone. Proportions of a real handset, sized from height so the panel
   never grows taller than it needs to. */
.dphone{position:relative;height:clamp(300px,42svh,380px);aspect-ratio:9/17.5;width:auto;
  border-radius:34px;padding:8px;
  background:linear-gradient(150deg,#4A5654,#161F1E 28%,#0B1211 55%,#2C3735 80%,#101817);
  box-shadow:0 2px 3px rgba(255,255,255,.14) inset,0 40px 70px -30px rgba(0,0,0,.7)}
.dscreen{position:relative;height:100%;border-radius:27px;overflow:hidden;
  background:linear-gradient(168deg,#FFFFFF,#F3F8F6);display:flex;flex-direction:column;
  padding:26px 14px 14px;gap:12px;container-type:inline-size}
.dscreen:before{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:30%;height:16px;background:#080D0C;border-radius:12px;z-index:3}

.dcard{position:relative;border-radius:6cqw;padding:6cqw 6cqw 6.5cqw;color:#fff;overflow:hidden;
  background:linear-gradient(158deg,var(--green) 0%,var(--green-deep) 60%,var(--green) 100%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 12px 26px -12px rgba(7,32,30,.6)}
.dcard-top{display:flex;justify-content:space-between;align-items:center;
  font-size:4.1cqw;color:rgba(255,255,255,.82)}
.dcard-top b{color:#fff;font-weight:600}
.dcard-name{font-size:8.4cqw;font-weight:600;margin:3.4cqw 0 4.4cqw;letter-spacing:-.02em;
  line-height:1.05}
.dstamps{display:grid;grid-template-columns:repeat(6,1fr);gap:2.2cqw}
.dslot{position:relative;aspect-ratio:1;border-radius:50%;
  border:1.5px dashed rgba(255,255,255,.42);display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.55);font-size:3.7cqw;font-weight:600}
.dslot.on{background:var(--orange);border:none;color:#fff}
.dslot.rw{background:var(--mustard);border:none;color:#5A3B0C}
@media(prefers-reduced-motion:no-preference){
  .dslot.pop{animation:pop .42s cubic-bezier(.34,1.56,.64,1)}
}
@keyframes pop{0%{transform:scale(.4);opacity:.2}60%{transform:scale(1.14)}100%{transform:scale(1)}}
.dcard-foot{font-size:3.8cqw;text-align:center;margin-top:4.2cqw;color:rgba(255,255,255,.86);
  min-height:5cqw;line-height:1.35}
.dcard-foot b{color:var(--mustard)}

/* What the staff screen is doing, under the card, so the phone isn't a void. */
.dhint{font-size:3.6cqw;text-align:center;color:#7C8D89;margin:0;line-height:1.45;
  min-height:5cqw;transition:opacity .2s}
.dsearch{display:flex;align-items:center;gap:2.5cqw;border:1px solid #E1E9E7;border-radius:4cqw;
  padding:3cqw 3.5cqw;font-size:4cqw;color:#9AA9A5;background:#fff}
.dsearch i{font-size:4.4cqw;color:#B7C4C0}
.dsearch .cursor{width:1.5px;height:4.4cqw;background:var(--orange);
  animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* The thumb that presses. */
.thumb{position:absolute;z-index:4;width:46px;height:46px;border-radius:50%;
  background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:21px;box-shadow:0 10px 22px -6px rgba(0,0,0,.6);opacity:0;pointer-events:none}
@media(prefers-reduced-motion:no-preference){
  .thumb.show{animation:press .5s ease}
}
@keyframes press{0%{transform:translate(-50%,-50%) scale(1.5);opacity:0}
  40%{transform:translate(-50%,-50%) scale(.86);opacity:1}
  100%{transform:translate(-50%,-50%) scale(1);opacity:0}}

.replay{background:none;border:none;cursor:pointer;font-family:var(--font);font-size:14px;
  color:rgba(255,255,255,.62);display:inline-flex;gap:8px;align-items:center;padding:6px 2px}
.replay:hover{color:#fff}

/* ── Founding shops ─────────────────────────────────────────────────────
   Stands where testimonials normally would. The offer carries the section, so
   it is set as an editorial two-column rather than a row of cards. */
.founding{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,56px);align-items:start}
@media(max-width:900px){.founding{grid-template-columns:1fr;gap:30px}}

.ticks{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.ticks li{display:flex;gap:12px;font-size:16px;line-height:1.55;color:var(--muted);
  max-width:var(--measure,52ch)}
.ticks i{color:var(--green);font-size:19px;flex-shrink:0;margin-top:1px}
.ticks strong{color:var(--text);font-weight:600}

.founder{background:var(--cream);border-radius:var(--r-xl);padding:30px 30px 26px;
  position:relative}
.fmark{width:52px;height:52px;border-radius:50%;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:18px;
  letter-spacing:.02em;margin-bottom:18px}
.founder blockquote{margin:0;font-size:18px;line-height:1.55;color:var(--green-deep);
  font-weight:500;text-wrap:pretty}
.fwho{margin:20px 0 0;font-size:14.5px;line-height:1.4}
.fwho b{display:block;color:var(--text);font-weight:600}
.fwho span{color:var(--muted);font-size:13.5px}
.fnote{margin:18px 0 0;font-size:13.5px;color:var(--muted);line-height:1.55;
  border-top:1px solid rgba(7,90,81,.14);padding-top:14px}

/* ── Objection handling ─────────────────────────────────────────────────── */
.objgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:760px){.objgrid{grid-template-columns:1fr}}
.obj{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px}
.obj .q{font-size:16px;font-weight:600;margin-bottom:8px;display:flex;gap:10px;align-items:flex-start}
.obj .q i{color:var(--orange);font-size:19px;flex-shrink:0;margin-top:1px}
.obj p{font-size:15px;color:var(--muted);margin:0;line-height:1.6}

/* ── Guarantee strip ────────────────────────────────────────────────────── */
/* Reassurance, not a banner. It sits on the same column as the plans and the
   calculator, with hairline dividers instead of a coloured slab — a cream block
   here competed with the prices it was meant to support. */
.guarantee{display:grid;grid-template-columns:repeat(4,1fr);
  max-width:var(--price-col);margin:16px auto 0;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden}
.guarantee div{display:flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 14px;font-size:14px;font-weight:500;color:var(--green-deep);
  text-align:center;line-height:1.35;border-left:1px solid var(--line)}
.guarantee div:first-child{border-left:none}
.guarantee i{font-size:17px;color:var(--green);flex-shrink:0}
@media(max-width:820px){
  .guarantee{grid-template-columns:repeat(2,1fr)}
  .guarantee div:nth-child(3){border-left:none}
  .guarantee div:nth-child(n+3){border-top:1px solid var(--line)}
}
@media(max-width:460px){
  .guarantee{grid-template-columns:1fr}
  .guarantee div{border-left:none;justify-content:flex-start;text-align:left}
  .guarantee div+div{border-top:1px solid var(--line)}
}

/* ── No app store ───────────────────────────────────────────────────────
   A four-up of plain statements. No cards with accent rails — the claims are
   the point and they are short enough to stand on their own. */
.noapp{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,34px)}
@media(max-width:940px){.noapp{grid-template-columns:repeat(2,1fr);gap:28px}}
@media(max-width:560px){.noapp{grid-template-columns:1fr;gap:24px}}
.noapp .ic{width:44px;height:44px;border-radius:13px;background:var(--green-soft);
  color:var(--green);display:flex;align-items:center;justify-content:center;
  font-size:21px;margin-bottom:14px}
.noapp h3{font-size:17px;font-weight:600;margin-bottom:7px;letter-spacing:-.015em}
.noapp p{font-size:15px;color:var(--muted);line-height:1.55;margin:0}