/* ————— Rizecart marketing site · Merchant Bento —————
   Design language (Jul 2026 rebuild, Shopify/Aino-Agency references):
   warm sand-to-sage wash, real GCC merchant photography in an asymmetric
   bento, live proof cards floating over the imagery, and a tight grotesk
   for headlines.

   --brand vs --disp is deliberate: the Rizecart wordmark IS a serif
   (see assets/brand/rizecart-logo-ink.png), so the logo stays Fraunces
   while every headline moves to the grotesk. Serif mark + grotesk voice. */
:root{
  --lime:#2E5BFF; --lime-hover:#1F49E6;
  --g:#2447E0; --g-dark:#1A38B8; --g-deep:#101019; --g-soft:#EAF0FF; --g-mid:#5B7FFF; --violet:#7C5CFF;
  --ink:#16161A; --text-2:#4A4B52; --text-3:#8E8F96;
  --bg:#FBFAF7; --alt:#F2F0EA; --card:#FFFFFF; --line:#E7E4DD;
  --terra:#D93025; --gold:#C25E3D; --sky:#0B6BCB;
  /* Merchant Bento wash — the sand/sage of the photography, not a slab. */
  --sand:#F0EAE0; --sage:#DDE6DC; --mint:#E4EFE8; --clay:#E8DCCF;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue","IBM Plex Sans Arabic",sans-serif;
  --disp:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  --brand:"Fraunces","Georgia",serif;
  --ar:"Noto Kufi Arabic",sans-serif;
  --sh-sm:0 1px 3px rgba(15,27,45,.08);
  --sh-md:0 6px 24px -6px rgba(15,27,45,.14);
  --sh-lg:0 24px 64px -16px rgba(15,27,45,.22);
  --sh-photo:0 30px 70px -22px rgba(46,36,22,.32);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
b,strong{font-weight:650}

.sr{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.23,1,.32,1),transform .6s cubic-bezier(.23,1,.32,1)}
.sr.in{opacity:1;transform:none}

/* nav */
.snav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:34px;
  padding:13px 40px;background:rgba(255,255,255,.88);backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);border-bottom:1px solid var(--line)}
.snav-logo{display:flex;align-items:center;gap:10px}
/* Wordmark keeps the brand serif — it is the logo, not a headline. */
.snav-logo b{font-family:var(--brand);font-variation-settings:"opsz" 144;font-optical-sizing:none;font-weight:650;font-size:2.1rem;letter-spacing:-.03em;color:var(--ink);line-height:1;white-space:nowrap}
.kflag{width:.38em;height:.38em;display:inline-block;margin-inline-start:.1em;transform:translateY(-.62em)}
.snav-logo i{font-family:var(--ar);font-style:normal;font-size:.6rem;color:var(--text-3);white-space:nowrap}
.logo-mark{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,var(--g-mid),var(--g-dark))}
.logo-mark svg{width:16px;height:16px}
.snav-links{display:flex;gap:26px;font-size:.88rem;color:var(--text-2);font-weight:500}
.snav-links a:hover{color:var(--g-dark)}
.snav-cta{margin-left:auto;display:flex;gap:10px}

/* buttons */
.sbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:10px;
  font-size:.9rem;font-weight:650;transition:transform .12s,background .18s,box-shadow .2s;white-space:nowrap;cursor:pointer;border:0}
.sbtn:active{transform:scale(.97)}
.sbtn-white{background:linear-gradient(135deg,#3D63FF 0%,#5B54FF 100%);color:#fff;box-shadow:0 8px 22px -8px rgba(70,80,255,.55)}
.sbtn-white:hover{background:linear-gradient(135deg,#3457F0 0%,#5147F0 100%);box-shadow:0 10px 26px -8px rgba(70,80,255,.6)}
.sbtn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.sbtn-ghost:hover{border-color:var(--g);color:var(--g-dark)}
.sbtn.lg{padding:14px 28px;font-size:1rem;border-radius:12px}
.sbtn.full{width:100%}

/* hero */
.hero{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:150px 24px 40px;overflow:hidden;
  background:radial-gradient(900px 420px at 50% -10%,var(--g-soft),transparent 70%)}
.eyebrow{font-size:.74rem;letter-spacing:.18em;color:var(--g);font-weight:750;margin-bottom:20px;text-transform:uppercase}
.hero h1{font-family:var(--disp);font-weight:560;font-size:clamp(2.9rem,6.4vw,4.7rem);letter-spacing:-.02em;line-height:1.06;max-width:22ch}
.hero h1 em{font-style:normal;color:var(--g)}
.hero-sub{max-width:58ch;margin-top:24px;font-size:1.12rem;line-height:1.7;color:var(--text-2)}
.hero-cta{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap;justify-content:center}
.hero-note{margin-top:16px;font-size:.8rem;color:var(--text-3)}

/* sections */
.sect{max-width:1120px;margin:0 auto;padding:96px 32px}
.sect.alt{max-width:none;background:var(--alt)}
.sect.alt>.sect-inner{max-width:1120px;margin:0 auto;padding:0 32px}
.sect h2{font-family:var(--disp);font-weight:560;font-size:clamp(1.9rem,4vw,2.9rem);letter-spacing:-.015em;line-height:1.12}
.sect .dim{color:var(--text-3)}
.sect-sub{max-width:62ch;margin-top:18px;font-size:1.04rem;line-height:1.7;color:var(--text-2)}
.sect-sub b{color:var(--ink)}
.center{text-align:center}
.center .sect-sub{margin-inline:auto}

/* logo bar */
.logobar{display:flex;align-items:center;justify-content:center;gap:44px;flex-wrap:wrap;
  padding:34px 24px 60px;color:var(--text-3);font-size:.85rem}
.logobar .lb-mark{font-weight:750;font-size:1.02rem;color:#9AA4B2;letter-spacing:.02em}
.logobar .lb-mark.ar{font-family:var(--ar);font-size:.95rem}

/* feature rows */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;padding:64px 0}
.frow+.frow{border-top:1px solid var(--line)}
@media(max-width:960px){.frow{grid-template-columns:1fr;gap:34px}}
.frow.flip .ftext{order:2}
@media(max-width:960px){.frow.flip .ftext{order:0}}
.ftag{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;font-weight:750;color:var(--g);
  background:var(--g-soft);padding:6px 13px;border-radius:99px;margin-bottom:18px;letter-spacing:.06em}
.ftext h3{font-family:var(--disp);font-weight:560;font-size:1.9rem;letter-spacing:-.015em;line-height:1.18}
.ftext p{margin-top:16px;font-size:1rem;line-height:1.7;color:var(--text-2)}
.ftext .flink{display:inline-flex;align-items:center;gap:7px;margin-top:20px;font-weight:650;color:var(--g);font-size:.94rem}
.ftext .flink:hover{color:var(--g-dark)}
.fbullets{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.fbullets li{list-style:none;display:flex;gap:10px;font-size:.92rem;color:var(--text-2);line-height:1.5}
.fbullets li::before{content:"✓";color:var(--g);font-weight:750;flex-shrink:0}

/* stats band */
.stats-band{background:var(--g-deep);color:#fff;padding:78px 24px}
.stats-inner{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;text-align:center}
@media(max-width:800px){.stats-inner{grid-template-columns:1fr}}
.stat-big b{font-family:var(--disp);font-weight:560;font-size:3.1rem;letter-spacing:-.02em;display:block}
.stat-big b i{font-style:normal}
.stat-big span{display:block;margin-top:8px;font-size:.9rem;color:rgba(255,255,255,.65);line-height:1.5}

/* testimonial */
.testi{max-width:840px;margin:0 auto;text-align:center;padding:96px 32px}
.testi blockquote{font-family:var(--disp);font-weight:520;font-size:clamp(1.4rem,2.8vw,2rem);line-height:1.42;letter-spacing:-.01em}
.testi blockquote em{font-style:normal;color:var(--g)}
.testi .t-who{margin-top:28px;display:flex;align-items:center;justify-content:center;gap:13px}
.t-ava{width:46px;height:46px;border-radius:50%;background:linear-gradient(150deg,#C4A24C,#6B4E1E);
  color:#fff;display:grid;place-items:center;font-weight:700;font-size:.8rem}
.t-who div{text-align:start;font-size:.86rem}
.t-who b{display:block}
.t-who small{color:var(--text-3)}

/* final CTA */
.final-cta{text-align:center;padding:110px 24px;background:linear-gradient(160deg,var(--g-deep),#0A4A28);color:#fff}
.final-cta h2{font-family:var(--disp);font-weight:560;font-size:clamp(2rem,4.4vw,3.1rem);letter-spacing:-.015em;line-height:1.12;margin-bottom:30px}
.final-cta .sbtn-white{background:#fff;color:var(--g-deep)}
.final-cta .sbtn-white:hover{background:var(--g-soft)}
.final-cta p{margin-top:16px;font-size:.82rem;color:rgba(255,255,255,.55)}

/* footer */
.sfoot{background:#0B1420;color:rgba(255,255,255,.65);padding:64px 40px 40px}
.sfoot-grid{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
@media(max-width:800px){.sfoot-grid{grid-template-columns:1fr 1fr}}
.sfoot-brand b{font-family:var(--disp);font-variation-settings:"opsz" 144;font-optical-sizing:none;font-weight:640;color:#fff;font-size:1.9rem;letter-spacing:-.025em;white-space:nowrap}
.sfoot-brand i{font-family:var(--ar);font-style:normal;margin-inline-start:8px;white-space:nowrap}
.sfoot-brand p{margin-top:14px;font-size:.84rem;line-height:1.65;max-width:30ch;color:rgba(255,255,255,.45)}
.sfoot h5{color:#fff;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.sfoot ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:.88rem}
.sfoot a:hover{color:#fff}
.sfoot-base{max-width:1120px;margin:44px auto 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.76rem;color:rgba(255,255,255,.35)}
.sfoot-social{display:flex;gap:14px;margin-block-start:14px}
.sfoot-social a{color:inherit;transition:color .18s ease}
.sfoot-social svg{width:18px;height:18px;display:block}

/* full-width feature row: pattern break inside the product tour */
.frow.full{grid-template-columns:1fr;gap:38px;text-align:center;justify-items:center}
.frow.full .ftext{max-width:62ch}
.frow.full .mock{width:min(560px,100%)}
.frow.full .ftag{margin-inline:auto}

/* proof strip: rating + friction badges, lives below the hero */
.proof-strip{text-align:center;padding:4px 24px 0}

/* accessibility: collapse all motion for users who ask for it */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}
.frow.full .mock{text-align:start}

/* keyboard focus (a11y): visible ring, only for keyboard users */
:focus-visible{outline:2px solid var(--lime);outline-offset:2px;border-radius:4px}

/* laptop tier: the full link row fits without horizontal overflow down to the 900px burger cutoff */
@media(max-width:1120px){
  .snav{gap:18px;padding:13px 20px}
  .snav-links{gap:16px;font-size:.85rem}
}

/* mobile navigation: burger + dropdown panel (burger injected by site.js) */
.snav{position:relative}
.snav-burger{display:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink);place-items:center}
@media(max-width:980px){
  .snav-links{display:none}
  .snav-burger{display:grid}
  .snav.open .snav-links{display:flex;flex-direction:column;align-items:flex-start;gap:4px;
    position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);
    padding:14px 20px 18px;box-shadow:0 24px 48px -18px rgba(16,16,25,.18);z-index:60}
  .snav.open .snav-links>a,.snav.open .nav-dd>a{padding:10px 6px;font-size:1rem;width:100%}
  .snav .nav-dd .dd-menu{position:static;box-shadow:none;border:0;padding:0 0 0 12px;display:none}
  .snav-cta .sbtn-ghost:not(.lang-link){display:none}
}

/* compact mobile nav: everything fits at 390px, language switch moves into the menu */
@media(max-width:640px){
  .snav{padding:12px 14px;gap:8px}
  .snav-logo b{font-size:1.6rem}
  .snav-cta{gap:7px}
  .snav-cta .sbtn{padding:10px 12px;font-size:.78rem}
}
.dd-lang{display:none}
@media(max-width:480px){
  .snav-cta .lang-link{display:none}
  .snav.open .dd-lang{display:block;font-weight:700}
}

/* the journey (#product): the features told as one loop, in the order it runs.
   jmap = sticky scrollspy strip · jchap = big chapter numeral · jloop = the closer */
/* default: a generous in-flow stepper above the rows — part of the page, cannot overlap or squeeze */
.jmap{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:32px 0 8px}
.jmap a{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:99px;background:var(--card);
  border:1px solid var(--line);font-size:.85rem;font-weight:650;color:var(--text-2);
  transition:border-color .18s,color .18s,background .18s}
.jmap a b{width:22px;height:22px;border-radius:50%;background:var(--g-soft);color:var(--g);display:grid;place-items:center;
  font-size:.7rem;font-weight:750;flex-shrink:0;transition:background .18s,color .18s}
.jmap a:hover{border-color:var(--g);color:var(--g-dark)}
.jmap a.on{background:var(--g);border-color:var(--g);color:#fff}
.jmap a.on b{background:rgba(255,255,255,.22);color:#fff}
.frow{scroll-margin-top:96px}

.jchap{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.jc-n{font-family:var(--disp);font-variation-settings:"opsz" 144;font-optical-sizing:none;font-weight:560;
  font-size:3.3rem;line-height:.85;letter-spacing:-.02em;color:var(--g)}
.jc-t{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.jc-v{font-weight:750;font-size:1.04rem;letter-spacing:.01em}
.fhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.fhead .ftag,.jc-t .ftag{margin-bottom:0}
.frow.full .fhead{justify-content:center}
.jloop{display:flex;align-items:flex-start;gap:14px;justify-content:center;border-top:1px solid var(--line);padding:46px 24px 6px;color:var(--text-2)}
.jloop p{max-width:56ch;font-size:.98rem;line-height:1.68;text-align:start}
.jloop b{color:var(--ink)}
.jl-ic{width:34px;height:34px;flex-shrink:0;border-radius:50%;background:var(--g-soft);color:var(--g);display:grid;place-items:center}
.jl-ic svg{width:17px;height:17px}

/* ═══════════════════════════════════════════════════════════════════
   MERCHANT BENTO — the Jul 2026 redesign.
   Reference: Shopify's homepage (gradient wash + merchant photo grid +
   floating metric card) crossed with Aino Agency's asymmetric bento
   floating in generous negative space, which keeps it Apple-minimal
   instead of a dense photo wall.
   ═══════════════════════════════════════════════════════════════════ */

/* The wash. Sand at the top-left, sage at the right, fading to paper by
   the fold — so the hero feels lit rather than painted. */
/* The wash applies to EVERY hero (index, salla, zid, shopify) so the whole
   marketing site shares one atmosphere. */
.hero{
  background:
    radial-gradient(120% 90% at 8% 0%,   var(--clay) 0%, transparent 55%),
    radial-gradient(90% 80% at 100% 10%, var(--mint) 0%, transparent 60%),
    radial-gradient(80% 70% at 60% 100%, var(--sand) 0%, transparent 70%),
    var(--bg);
  padding:112px 40px 72px;
  overflow:visible;
}
/* The split LAYOUT is scoped to heroes that actually carry a bento. The
   platform pages (salla/zid/shopify) have no .hero-inner and must keep their
   centred column — unscoping this blanked their right half. */
.hero:has(.hero-inner){
  position:relative;
  display:block;
  align-items:normal;
  text-align:start;
}
/* Kill the old centred hero: this layout is a split, not a column. */
.hero-inner{
  max-width:1280px;margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:56px;align-items:center;
}
/* No ch-cap here: at this type size a 32ch column broke the headline onto
   three lines ("We run / your / marketing."). The grid column is the measure. */
.hero-copy{max-width:none}
.hero-copy .eyebrow{margin-bottom:14px}
/* Every hero headline takes the grotesk; only the bento hero re-measures. */
.hero h1{font-family:var(--disp);font-weight:800;letter-spacing:-.032em;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--g)}
.hero-copy h1{
  font-size:clamp(2.3rem,3.5vw,3.35rem);line-height:1.06;
  color:var(--ink);
  max-width:none; /* the old rule capped this at 22ch for a centred column */
}
.hero-copy .hero-sub{
  margin-top:20px;font-size:clamp(1rem,1.25vw,1.14rem);line-height:1.55;
  color:var(--text-2);max-width:34ch;
}
.hero-copy .hero-cta{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start}

/* The proof cards are absolutely positioned against THIS box, so it has to
   be the containing block — not .hero, or they'd fly to the page edges. */
.bento-wrap{position:relative}

/* ——— the bento ———
   Geometry note: two 1:1 tiles stacked in the right column beside a tile
   spanning both rows makes this box ALWAYS a square — its height equals its
   width. So on a wide screen it grows tall and shoves the hero past the fold
   (it overflowed a 1440x780 laptop by 126px). Bound it by viewport height,
   not just by the column, and let it sit against the far edge. */
.bento{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-template-rows:auto auto;
  gap:16px;
  position:relative;
  max-width:min(100%, calc(100vh - 330px));
  margin-inline-start:auto;
}
.bento-cell{
  position:relative;border-radius:22px;overflow:hidden;
  background:var(--alt);box-shadow:var(--sh-photo);
  /* Each tile lifts on its own beat, so the grid assembles rather than pops. */
  animation:bentoIn .8s cubic-bezier(.23,1,.32,1) both;
}
.bento-cell img{width:100%;height:100%;object-fit:cover;display:block}
/* The two squares set the row heights; the portrait spans both and stretches
   to match. No aspect-ratio here on purpose — it would fix the height and
   leave the tall tile short of the stack beside it. */
.bento-tall{grid-row:1 / span 2;height:100%}
.bento-sq{aspect-ratio:1/1}
.bento-cell:nth-child(1){animation-delay:.05s}
.bento-cell:nth-child(2){animation-delay:.16s}
.bento-cell:nth-child(3){animation-delay:.27s}
@keyframes bentoIn{from{opacity:0;transform:translateY(20px) scale(.97)}}

/* A caption that sits ON the photo (IKEA pattern): eyebrow + one line. */
.bento-cap{
  position:absolute;inset-inline:14px;inset-block-end:14px;
  padding:12px 14px;border-radius:14px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
}
.bento-cap small{display:block;font-size:.64rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--g);margin-bottom:2px}
.bento-cap b{font-size:.86rem;font-weight:650;color:var(--ink);line-height:1.3}

/* ——— proof cards floating over the bento ——— */
/* These carry the numbers; the photos carry the feeling. */
.bento-proof{
  position:absolute;z-index:3;
  display:flex;align-items:center;gap:11px;
  padding:12px 15px;border-radius:15px;
  background:#fff;box-shadow:0 18px 44px -12px rgba(46,36,22,.36);
  animation:proofIn .7s cubic-bezier(.23,1,.32,1) both;
}
@keyframes proofIn{from{opacity:0;transform:translateY(14px) scale(.94)}}
.bento-proof b{display:block;font-family:var(--disp);font-weight:800;font-size:1.06rem;
  letter-spacing:-.02em;color:var(--ink);line-height:1.15;font-variant-numeric:tabular-nums}
.bento-proof small{display:block;font-size:.7rem;color:var(--text-3);margin-top:1px}
.bp-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
/* Anchored to the grid's edges so they read as floating above it. */
.bp-1{inset-block-start:-18px;inset-inline-start:-26px;animation-delay:.5s}
.bp-2{inset-block-end:64px;inset-inline-end:-30px;animation-delay:.66s}
/* Starts past the portrait tile's caption — at 34% it sat on top of it and
   clipped "Sunday brief, read in 2 minutes". */
.bp-3{inset-block-end:-22px;inset-inline-start:56%;animation-delay:.82s}

/* The one dark object on the page: the live profit number. Earns its
   weight by being the single thing the whole hero is arguing for. */
.bento-proof.hot{background:var(--g-deep);box-shadow:0 22px 52px -12px rgba(16,16,25,.55)}
.bento-proof.hot b{color:#fff}
.bento-proof.hot small{color:rgba(255,255,255,.6)}

@media (max-width:1080px){
  .hero-inner{grid-template-columns:1fr;gap:52px}
  .hero-copy{max-width:none}
  .bento-proof{position:static;animation-delay:0s}
  .bento-wrap{display:flex;flex-direction:column;gap:14px}
  .bento-floats{display:flex;flex-wrap:wrap;gap:10px}
}
@media (max-width:560px){
  /* The nav is only 65px here — 110px of padding left a dead band under it
     and pushed the photos past the fold (hero was 1232px on an 812px phone). */
  .hero{padding:88px 20px 52px}
  .hero-inner{gap:32px}
  .hero-copy h1{font-size:2.05rem;line-height:1.08}
  .hero-copy .hero-sub{margin-top:14px;font-size:1rem;max-width:none}
  .hero-copy .hero-cta{margin-top:22px}
  /* Two full-width taps beat two half-width ones that wrap anyway. */
  .hero-copy .hero-cta .sbtn{flex:1 1 100%}
  .bento{gap:10px}
  .bento-cap{inset-inline:8px;inset-block-end:8px;padding:9px 11px}
  .bento-cap b{font-size:.8rem}
}

/* ——— carrying the language down the page ———
   Headlines move to the grotesk weight/tracking set by the hero, section
   cards gain the same 22px radius + warm shadow as the bento tiles, and the
   old ink slabs soften into the wash. */
/* font-weight:560 was Fraunces' display weight and it is the default across
   this whole stylesheet set. --disp is a grotesk now, where 560 renders light,
   so every display element needs pulling to 800 — miss one and it visibly sits
   lighter than its neighbours. This list is every one that shows on a
   marketing page that site.css can actually reach. .iso-copy h2 (site-fx.css)
   and .price b (site-mock.css) are fixed in their own files instead: those
   load AFTER this one, so a rule here loses the tie and does nothing. */
.sect h2,
.pain-strip h2,
.final-cta h2,
.ftext h3,
.testi blockquote,
.stat-big b,
.pcard h4,
.jc-n,
.hm-num{
  font-family:var(--disp);
  font-weight:800;
  letter-spacing:-.03em;
  /* Fraunces variable-axis settings; inert on a grotesk but misleading. */
  font-variation-settings:normal;
  font-optical-sizing:auto;
}
/* Was inline: font-weight:560 (a Fraunces weight) in EN and 700 in AR, so this
   headline sat lighter than every other one AND the two languages disagreed.
   Owned here now. The measure is wide because the line is a full sentence —
   at 26ch it broke into five. */
.pain-strip h2{
  font-size:clamp(1.55rem,2.7vw,2.15rem);
  line-height:1.16;
  text-wrap:balance;
  max-inline-size:44ch;
  margin-inline:auto;
}
/* .dim only ever existed as `.sect .dim`, and .pain-strip is not a .sect — so
   the second line here was never actually dim. The old lighter inline weight
   hid that. */
.pain-strip .dim{color:var(--text-3)}
.sect h2{font-size:clamp(1.85rem,3.2vw,2.6rem);line-height:1.1;text-wrap:balance}
.ftext h3{font-size:clamp(1.45rem,2.1vw,1.85rem);line-height:1.16;text-wrap:balance}
.testi blockquote{font-weight:700;letter-spacing:-.02em}

/* Cards inherit the bento's warmth instead of the old hairline look. */
.pain-card,.step-card,.pcard,.t-card{
  border-radius:20px;
  border:1px solid rgba(20,20,26,.06);
  box-shadow:0 10px 30px -14px rgba(46,36,22,.18);
}
.step-card:hover,.pcard:hover{box-shadow:0 18px 44px -16px rgba(46,36,22,.28)}

/* Section wash: alternate bands pick up the sand, not a grey. */
.sect.alt{background:linear-gradient(180deg,var(--sand) 0%,var(--bg) 100%)}
/* The wash belongs on a full-bleed band, NOT on .pain-strip — that element is
   a centred max-width:1120px container (site-fx.css), so a background on it
   rendered as a floating box with white either side. Same band+inner split
   .sect.alt already uses. The strip also has no bottom padding of its own,
   hence the padding here. */
.pain-band{
  background:linear-gradient(180deg,var(--bg) 0%,var(--mint) 100%);
  padding-block-end:70px;
}

/* The eyebrow is the one place the old letterspaced caps still work. */
.eyebrow{font-weight:800;letter-spacing:.16em}

/* ═══════════════════════════════════════════════════════════════════
   THE METHOD, APPLIED BELOW THE HERO
   Same three moves as the bento: a photograph in a rounded tile, a
   frosted caption ON the image, and a white card floating over it.
   References: Zipline (numbered caption on a photo tile) for the steps,
   Blue Apron (white CTA card floating on a full-bleed photo) for the band.
   ═══════════════════════════════════════════════════════════════════ */

/* ——— steps as photo tiles ——— */
.steps3{margin-top:44px}
.step-tile{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  aspect-ratio:4/5;
  background:var(--alt);
  box-shadow:var(--sh-photo);
  animation:bentoIn .8s cubic-bezier(.23,1,.32,1) both;
}
.step-tile:nth-child(1){animation-delay:.04s}
.step-tile:nth-child(2){animation-delay:.14s}
.step-tile:nth-child(3){animation-delay:.24s}
.step-tile img{width:100%;height:100%;object-fit:cover;display:block}
/* A wash under the caption so text stays legible on a bright photo without
   dimming the whole image. */
/* These photos are deliberately bright and sand-toned, so a soft wash left the
   white caption barely legible on tiles 2 and 3. Deeper, and starting higher. */
.step-tile::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 28%,rgba(24,18,10,.42) 58%,rgba(24,18,10,.86) 100%);
}
.st-cap{
  position:absolute;z-index:2;inset-inline:16px;inset-block-end:16px;
  color:#fff;
}
.st-num{
  display:inline-block;margin-block-end:8px;
  padding:3px 9px;border-radius:99px;
  background:rgba(255,255,255,.22);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-family:var(--disp);font-weight:800;font-size:.72rem;letter-spacing:.04em;
}
.st-cap b{display:block;font-family:var(--disp);font-weight:800;font-size:1.12rem;
  letter-spacing:-.02em;line-height:1.2}
.st-cap small{display:block;margin-block-start:5px;font-size:.82rem;line-height:1.45;
  color:rgba(255,255,255,.82)}
.st-time{
  display:inline-block;margin-block-start:10px;
  padding:4px 10px;border-radius:99px;
  background:rgba(255,255,255,.92);color:var(--ink);
  font-size:.7rem;font-weight:700;
}

/* The final CTA keeps its original dark band with the drifting channel logos
   (site-mock.css / site-fx.css own it). The photo-band experiment that briefly
   replaced it is gone — only the headline takes the new grotesk weight. */
.final-cta h2{
  font-family:var(--disp);font-weight:800;letter-spacing:-.03em;text-wrap:balance;
}

@media (max-width:900px){
  .steps3{gap:12px}
  .step-tile{aspect-ratio:3/2}
}
@media (max-width:560px){
  .cta-card{margin-inline:16px;margin-block:40px;padding:26px 22px}
  .step-tile{aspect-ratio:4/3}
}

/* Platform-page heroes (salla/zid/shopify) carry more furniture than the index
   hero — a platform badge, a rating row and a badge row. Measured: 622px of
   copy against a 450px bento, so the COPY drives the height and the hero ran
   806px in a 780px fold. Tighten the vertical rhythm; the index hero has room
   to spare either way. */
.hero-copy .plat-hero-badge{margin-bottom:18px}
.hero-copy .hero-sub{margin-top:16px}
.hero-copy .rate-row{margin-top:14px}
.hero-copy .hero-cta{margin-top:24px}
.hero-copy .badge-row{margin-top:14px;gap:8px}

/* ═══════════════════════════════════════════════════════════════════
   REAL PRODUCT SHOTS
   These replace the hand-drawn CSS mockups in the journey rows. They are
   actual screenshots of app.rizecart.com, cropped to one panel each —
   Better Stack's pattern (a real UI fragment per claim) rather than a whole
   dashboard nobody can read at this size, and Linear's framing (the fragment
   floats, no fake browser chrome).
   ═══════════════════════════════════════════════════════════════════ */
.shot{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(20,20,26,.07);
  box-shadow:0 26px 60px -20px rgba(46,36,22,.3);
}
.shot img{width:100%;height:auto;display:block}
/* A second, smaller panel tucked under the first — the product answering the
   claim twice. Only where there is room. */
.shot-stack{display:flex;flex-direction:column;gap:14px}
.shot-stack .shot:nth-child(2){
  inline-size:88%;
  margin-inline-start:auto;
}
/* Caption tying the screenshot to the merchant's own store, so it reads as a
   real account rather than a stock render. */
.shot-cap{
  display:flex;align-items:center;gap:7px;
  margin-block-start:12px;
  font-size:.74rem;color:var(--text-3);
}
.shot-cap i{
  inline-size:6px;block-size:6px;border-radius:50%;
  background:var(--g);flex-shrink:0;
}
@media (max-width:960px){
  .shot-stack .shot:nth-child(2){inline-size:100%}
}

/* ——— hero "Made for" + official platform logos ———
   Replaces the plain "Salla · Zid · Shopify" text. Logos run in full colour:
   this is the trust signal that says "your platform", and recognition beats
   the greyscale restraint the logo bar below uses. */
.made-for{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
/* Hairline between the wordmarks. A real element, not a border on the images:
   Shopify renders taller than the other two, so borders would give uneven
   lines. This keeps every divider the same height. */
.mf-sep{
  inline-size:1px;
  block-size:15px;
  background:rgba(20,20,26,.18);
  flex-shrink:0;
}
/* The eyebrow's uppercase + letterspacing belongs to the words only — it must
   not leak onto the images' alt text or spacing. */
.made-for span{
  text-transform:uppercase;
  letter-spacing:.16em;
}
.made-for img{
  height:19px;
  width:auto;
  display:block;
  /* Each wordmark is drawn to a different optical weight; nudge to match. */
}
.made-for .mf-shopify{height:23px}

@media (max-width:560px){
  .made-for{gap:11px}
  .made-for img{height:16px}
  .made-for .mf-shopify{height:19px}
}

/* ═══════════════════════════════════════════════════════════════════
   WITHOUT / WITH — the "what is this, in one glance" section.
   The page never plainly said what Rizecart IS: it went hero -> pain
   quotes -> jargon (ROAS, COD, CAPI, llms.txt). This is the fix, and it is
   the most-proven shape in the category: incident.io ("The PagerDuty way" vs
   "The incident.io way"), Contractbook ("Without" / "With"), Descript
   (13 hours vs 4 hours), Visitors (messy vs clean). You understand it
   without reading.
   ═══════════════════════════════════════════════════════════════════ */
.vs-band{
  background:linear-gradient(180deg,var(--bg) 0%,var(--sand) 100%);
  padding:86px 32px 96px;
}
.vs-inner{max-width:1120px;margin-inline:auto}
.vs-head{text-align:center;margin-block-end:44px}
.vs-head h2{
  font-family:var(--disp);font-weight:800;
  font-size:clamp(1.85rem,3.2vw,2.6rem);letter-spacing:-.03em;line-height:1.1;
  text-wrap:balance;
}
.vs-head p{margin-block-start:12px;font-size:1rem;color:var(--text-2)}

.vs-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch;
  position:relative;
}
@media (max-width:860px){.vs-grid{grid-template-columns:1fr;gap:16px}}

.vs-card{
  display:flex;flex-direction:column;
  padding:26px 24px;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(20,20,26,.07);
}
/* The "with" side is the only thing on the page carrying an accent ring —
   it is the answer, and it should look like one. */
.vs-card.win{
  border-color:var(--g);
  box-shadow:0 0 0 1px var(--g), 0 26px 60px -22px rgba(46,91,255,.42);
}
.vs-tag{
  align-self:flex-start;
  padding:5px 12px;border-radius:99px;
  font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(20,20,26,.05);color:var(--text-3);
  margin-block-end:16px;
}
.vs-card.win .vs-tag{background:var(--g-soft);color:var(--g)}

/* ——— the "without" side: four platforms, four contradicting claims ——— */
.vs-claims{display:flex;flex-direction:column;gap:8px}
.vs-claim{
  display:flex;align-items:center;gap:11px;
  padding:10px 12px;border-radius:12px;
  background:var(--alt);
}
.vs-claim .ch-tile{
  inline-size:26px;block-size:26px;border-radius:7px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid rgba(20,20,26,.08);
}
.vs-claim .ch-tile svg{inline-size:62%;block-size:62%}
.vs-claim .ch-tile.snap{background:#FFFC00}
.vs-claim b{font-size:.84rem;font-weight:650;flex:1}
.vs-claim span{font-size:.8rem;font-weight:700;color:var(--g)}
.vs-foot{
  margin-block-start:auto;padding-block-start:18px;
  font-size:.84rem;line-height:1.5;color:var(--text-3);
}
.vs-foot b{color:var(--terra);font-weight:700}

/* ——— the "with" side: the real screen ——— */
.vs-shot{
  border-radius:14px;overflow:hidden;
  border:1px solid rgba(20,20,26,.07);
  box-shadow:0 14px 34px -14px rgba(46,36,22,.28);
}
.vs-shot img{width:100%;height:auto;display:block}
.vs-card.win .vs-foot b{color:var(--g)}

@media (max-width:560px){
  .vs-band{padding:64px 20px 72px}
  .vs-card{padding:20px 18px}
}

/* ═══════════════════════════════════════════════════════════════════
   COMPARISON TABLE — rebuilt.
   Mobbin: Apollo, ClickUp, beehiiv and Seed all do the same thing — your
   column is a tinted panel running the FULL height of the table, every
   competitor stays muted, and the marks are circled rather than bare glyphs.
   The eye lands on one column and the argument is made before you read.

   Fixes two real defects in the old rules (site-mock.css):
   - .cmp-rizecart's border was rgba(150,180,30) — olive, a leftover from the
     pre-cobalt "lime" palette, sitting on a cobalt-soft fill.
   - .cmp-logo carried Fraunces' opsz/optical-sizing, but --disp is a grotesk
     now, so those did nothing but confuse the next reader.
   ═══════════════════════════════════════════════════════════════════ */
.cmp-wrap{
  border:0;
  background:none;
  box-shadow:none;
  padding:0;
  margin-top:44px;
}
.cmp-table{border-collapse:separate;border-spacing:0}

/* The claim column reads as prose, not a cell. */
.cmp-table td:first-child,.cmp-table th:first-child{
  color:var(--text-2);
  font-size:.88rem;
}
.cmp-table thead th{
  color:var(--text-3);
  font-weight:700;
  letter-spacing:.01em;
  padding-bottom:14px;
}
.cmp-table th,.cmp-table td{border-top:1px solid rgba(20,20,26,.07)}
.cmp-table thead th{border-top:0}

/* ——— the one column that matters ——— */
.cmp-rizecart{
  background:var(--g-soft);
  border-inline:0;
  position:relative;
}
thead .cmp-rizecart{
  border-top:0;
  border-start-start-radius:16px;
  border-start-end-radius:16px;
  padding-top:18px;
}
tr:last-child .cmp-rizecart{
  border-end-start-radius:16px;
  border-end-end-radius:16px;
  padding-bottom:18px;
}
/* One ring around the whole column, drawn from the header cell so it does not
   repeat per row. */
thead .cmp-rizecart::after{
  content:"";
  position:absolute;
  inset-block-start:0;
  inset-inline:0;
  block-size:calc(100% + 1px);
  pointer-events:none;
}
.cmp-logo{
  font-family:var(--disp);
  font-variation-settings:normal;
  font-optical-sizing:auto;
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--g-dark);
  font-size:1.06rem;
}

/* ——— marks as PILLS, not fixed circles ———
   These cells hold three different things: a bare glyph (✓ / ✕), a glyph plus
   words ("✓ built in"), and words alone ("ROAS only", "last-click"). A fixed
   22px circle only ever fitted the first and spilled the rest. A pill with a
   min-width collapses to a circle around a single glyph and grows for words,
   so one rule covers all three and they still read as one family. */
.cmp-table i{
  display:inline-flex;align-items:center;justify-content:center;
  min-inline-size:24px;block-size:24px;
  padding-inline:8px;
  border-radius:99px;
  font-size:.72rem;font-weight:700;line-height:1;
  white-space:nowrap;
}
/* Filled in our column, quiet everywhere else — the difference IS the point.
   Specificity note: site-mock.css loads AFTER this file and carries
   `.cmp-table i.y{color:var(--g)}` at the same weight, so a plain
   `.cmp-rizecart i.y` lost the colour on source order and rendered a cobalt
   tick on a cobalt fill — invisible. Qualifying with .cmp-table wins it back. */
.cmp-table i.y{background:rgba(36,71,224,.12);color:var(--g)}
.cmp-table .cmp-rizecart i.y{background:var(--g);color:#fff}
.cmp-table i.p{background:rgba(194,94,61,.14);color:var(--gold)}
.cmp-table i.n{background:rgba(20,20,26,.05);color:#AEB6C2;font-weight:600}

.cmp-price .cmp-rizecart b{color:var(--g-dark)}

/* ═══════════════════════════════════════════════════════════════════
   FILM SECTION — split, not a lone centred player.
   Mobbin: David ("About our bar" — copy left, player right) and Grain do the
   same thing. A headline floating above a video leaves the row empty and makes
   the reader do the work of guessing what they are about to watch. Tell them,
   then show them.
   ═══════════════════════════════════════════════════════════════════ */
.film-sect{padding-block:56px 44px}
.film-split{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:52px;
  align-items:center;
}
@media (max-width:960px){
  .film-split{grid-template-columns:1fr;gap:30px}
}
.film-copy h2{margin-block-start:10px}
.film-copy p{
  margin-block-start:14px;
  font-size:1rem;line-height:1.6;color:var(--text-2);
  max-inline-size:34ch;
}
/* The three beats of the loop, in the plainest words on the page. */
.film-beats{
  list-style:none;margin:20px 0 0;padding:0;
  display:flex;flex-direction:column;gap:11px;
}
.film-beats li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:.93rem;line-height:1.5;color:var(--text-2);
}
.film-beats b{color:var(--ink);font-weight:700}
.film-beats i{
  inline-size:21px;block-size:21px;border-radius:50%;flex-shrink:0;
  margin-block-start:1px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--g-soft);color:var(--g);
  font-style:normal;font-size:.66rem;font-weight:800;
  font-family:var(--disp);
}
/* The wrapper was centred with its own top margin for the old stacked layout. */
.film-split .film-wrap{max-width:none;margin:0}
.film-split .film-cap{justify-content:flex-start;gap:18px}