/* Isolated Growth concept: no shared activation styles.
 * Commerce art arrives once in 2.8s; copy and navigation stay stationary.
 * Paper colors belong to illustrative commerce artifacts. */
@font-face {
  font-family:Inter;
  src:url('/assets/fonts/InterVariable.woff2') format('woff2');
  font-weight:100 900;
  font-display:swap}

:root {
  color-scheme:dark;
  --canvas:#111113;
  --surface:#1b1b1e;
  --label:#f5f5f7;
  --secondary:#acacb2;
  --separator:rgba(255,255,255,.12);
  --accent:#0a84ff;
  --paper:#ede7da;
  --ink:#292b27;
  --sage:#c8d2b7;
  --pink:#e8c1ae;
  --motion-fast:120ms;
  --motion-surface:240ms;
  --commerce-duration:2800ms}

* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:32px}
body {
  margin:0;
  background:var(--canvas);
  color:var(--label);
  font-family:Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased}
a {
  color:inherit;
  text-decoration:none}
button,a {
  -webkit-tap-highlight-color:transparent}
a:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:6px;
  border-radius:4px}
p,h1,h2,h3 {
  margin:0}
em {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400}
h1,h2 {
  text-wrap:balance}
.skip {
  position:fixed;
  left:16px;
  top:-90px;
  z-index:10;
  padding:16px;
  background:var(--label);
  color:var(--canvas)}
.skip:focus {
  top:16px}
.masthead {
  height:80px;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:3}
.masthead img {
  display:block;
  width:94px;
  height:auto}
.header-link {
  font-size:12px;
  color:var(--secondary)}
.header-link span {
  margin-left:8px}
.hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:840px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  text-align:center}
.hero-content {
  position:relative;
  z-index:2;
  padding:40px 20px 0;
  width:100%;
  pointer-events:none}
.hero-content a {
  pointer-events:auto}
.eyebrow {
  font-size:10px;
  letter-spacing:.18em;
  font-weight:600;
  line-height:1.5}
.hero .eyebrow {
  margin-bottom:22px;
  color:var(--secondary)}
h1 {
  font-size:clamp(44px,7vw,86px);
  line-height:1.02;
  font-weight:550;
  letter-spacing:-.065em}
h1 em {
  letter-spacing:-.055em}
.hero-copy {
  font-size:16px;
  line-height:1.6;
  color:var(--secondary);
  margin:24px 0 28px}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:32px;
  min-height:56px;
  padding:0 26px;
  border-radius:12px;
  background:var(--label);
  color:var(--canvas);
  font-size:14px;
  font-weight:600;
  transition:background var(--motion-fast),transform var(--motion-fast)}
.button:hover {
  background:var(--paper)}
.button:active {
  transform:scale(.985)}
.button span {
  font-size:19px;
  font-weight:400}
.cta-note {
  font-size:10px;
  color:var(--secondary);
  margin-top:14px;
  line-height:1.5}
.commerce-world {
  position:absolute;
  z-index:0;
  inset:470px 0 30px;
  transform:translate(0,0);
  animation:commerce-arrive var(--commerce-duration) cubic-bezier(.2,.6,.2,1) both;
  pointer-events:none}
.commerce-photo {
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.7;
  mask-image:linear-gradient(transparent,#000 25%,#000 75%,transparent)}
.artifact {
  position:absolute;
  color:var(--ink);
  text-align:left;
  box-shadow:0 12px 30px #0005}
.artifact-top,.artifact-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px}
.artifact-top {
  font-size:9px;
  letter-spacing:.1em;
  font-weight:600}
.artifact-top>span+span {
  font-size:22px;
  line-height:1}
.artifact-bottom {
  font-size:8px}
.loyalty {
  width:244px;
  background:var(--sage);
  border-radius:12px;
  padding:20px}
.loyalty p {
  font-family:Georgia,serif;
  font-size:32px;
  line-height:1.06;
  margin:20px 0 18px;
  letter-spacing:-.035em}
.stamps {
  display:flex;
  gap:6px;
  margin-bottom:18px}
.stamps i {
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  font-style:normal;
  border:1px solid currentColor;
  border-radius:50%;
  font-size:21px}
.stamps .empty {
  opacity:.5;
  font:10px Inter;
  border-style:dashed}
.hero-loyalty {
  left:-32px;
  top:40px;
  transform:rotate(-13deg) scale(.78)}
.coupon {
  width:216px;
  padding:20px;
  background:var(--pink);
  border-radius:3px;
  clip-path:polygon(0 0,100% 0,100% 61%,96% 64%,100% 67%,100% 100%,0 100%,0 67%,4% 64%,0 61%)}
.coupon>span {
  font-size:8px;
  letter-spacing:.1em}
.coupon p {
  font:italic 31px/1.08 Georgia;
  margin:22px 0}
.coupon-rule {
  border-top:1px dashed #292b2755;
  margin-bottom:16px}
.coupon b {
  font-size:24px;
  font-weight:500}
.hero-coupon {
  right:-32px;
  top:25px;
  transform:rotate(13deg) scale(.78)}
.receipt {
  width:185px;
  padding:22px 18px;
  background:var(--paper);
  font:9px/1.8 monospace;
  clip-path:polygon(0 0,100% 0,100% 98%,95% 100%,90% 98%,85% 100%,80% 98%,75% 100%,70% 98%,65% 100%,60% 98%,55% 100%,50% 98%,45% 100%,40% 98%,35% 100%,30% 98%,25% 100%,20% 98%,15% 100%,10% 98%,5% 100%,0 98%)}
.receipt-brand,.receipt-small {
  display:block;
  text-align:center}
.receipt-brand {
  font-size:16px;
  font-family:Inter;
  letter-spacing:-.05em}
.receipt-small {
  font-size:7px;
  letter-spacing:.13em;
  margin-top:6px}
.receipt-rule {
  border-top:1px dashed #292b2755;
  margin:14px 0}
.receipt-row {
  display:flex;
  justify-content:space-between;
  font-size:8px}
.receipt-status {
  display:block;
  text-align:center}
.barcode {
  height:25px;
  width:80%;
  margin:18px auto 0;
  background:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 3px,var(--ink) 3px 5px,transparent 5px 6px)}
.hero-receipt {
  display:none}
.reminder {
  background:var(--paper);
  padding:16px;
  border-radius:12px;
  display:flex;
  align-items:center;
  gap:12px;
  width:270px}
.message-icon {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--sage);
  font-size:22px}
.reminder span {
  font-size:12px;
  font-weight:600}
.reminder p {
  font-size:10px;
  margin:5px 0 10px}
.reminder small {
  font-size:9px;
  text-decoration:underline}
.hero-reminder {
  display:none}
.reward {
  background:var(--paper);
  padding:18px 20px;
  border-radius:12px;
  display:flex;
  align-items:center;
  gap:12px}
.reward-symbol {
  font-size:36px}
.reward small {
  font-size:7px;
  letter-spacing:.1em}
.reward p {
  font:20px Georgia;
  margin-top:5px}
.hero-reward {
  left:calc(50% - 132px);
  top:205px;
  transform:rotate(-4deg);
  width:264px}
.tag {
  background:var(--sage);
  padding:32px 20px 22px;
  text-align:center;
  border-radius:3px;
  width:128px}
.tag:before {
  content:'';
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--canvas);
  top:12px;
  left:calc(50% - 4px)}
.tag span {
  font-size:7px;
  letter-spacing:.14em}
.tag p {
  font:italic 32px Georgia;
  margin:10px 0}
.hero-tag {
  display:none}
.discover {
  position:absolute;
  z-index:2;
  bottom:4px;
  font-size:10px;
  color:var(--secondary);
  display:flex;
  gap:16px;
  align-items:center}
.discover span {
  font-size:18px}
.content-width {
  max-width:1120px;
  margin:0 auto;
  padding-left:24px;
  padding-right:24px}
.possibilities {
  padding-top:90px;
  padding-bottom:64px}
.section-heading {
  max-width:680px;
  margin-bottom:40px}
.section-heading .eyebrow {
  color:var(--secondary);
  margin-bottom:20px}
h2 {
  font-size:38px;
  line-height:1.1;
  font-weight:500;
  letter-spacing:-.05em}
.section-heading>p:last-child {
  font-size:15px;
  line-height:1.7;
  color:var(--secondary);
  margin-top:24px}
.benefits {
  display:grid;
  gap:44px}
.benefit-art {
  height:260px;
  border-radius:16px;
  background:var(--surface);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  margin-bottom:24px;
  position:relative;
  border:1px solid var(--separator)}
.benefit-art .artifact {
  position:relative;
  box-shadow:none}
.art-return .loyalty {
  transform:rotate(-7deg);
  width:250px}
.benefit-label {
  font-size:9px;
  letter-spacing:.14em;
  color:var(--secondary);
  margin-bottom:12px}
.benefit h3 {
  font-size:21px;
  font-weight:500;
  letter-spacing:-.04em;
  margin-bottom:12px}
.benefit>p:last-child {
  font-size:14px;
  line-height:1.7;
  color:var(--secondary)}
.cart-paper,.source-paper {
  width:256px;
  padding:24px;
  background:var(--paper);
  color:var(--ink);
  border-radius:8px;
  transform:rotate(5deg)}
.cart-paper>p,.source-paper>p {
  font:27px/1.1 Georgia;
  margin:18px 0}
.cart-item {
  display:flex;
  gap:10px;
  align-items:center;
  font-size:8px;
  padding:14px 0;
  border-top:1px solid #292b2722}
.cart-item small {
  display:block;
  font-size:7px;
  margin-top:5px}
.item-swatch {
  width:32px;
  height:32px;
  border-radius:4px;
  background:var(--sage)}
.paper-button {
  background:var(--ink);
  color:var(--paper);
  font-size:9px;
  padding:10px;
  text-align:center;
  border-radius:5px}
.source-paper {
  background:var(--pink);
  transform:rotate(-5deg)}
.source-paper .artifact-top {
  font-size:7px}
.source-step {
  font-size:10px;
  display:flex;
  align-items:center;
  gap:10px}
.source-step i {
  font-style:normal;
  border:1px solid #292b2744;
  border-radius:50%;
  width:22px;
  height:22px;
  display:grid;
  place-items:center}
.source-line {
  height:12px;
  width:1px;
  background:#292b2744;
  margin-left:10px}
.source-foot {
  font-size:8px;
  border-top:1px solid #292b2722;
  padding-top:12px;
  margin-top:16px}
.illustration-note {
  color:var(--secondary);
  font-size:10px;
  line-height:1.7;
  margin-top:28px}
.next-step {
  padding-top:60px;
  padding-bottom:64px;
  border-top:1px solid var(--separator);
  display:flex;
  flex-direction:column;
  gap:32px}
.next-step .eyebrow {
  color:var(--secondary);
  margin-bottom:18px}
.next-step h2 {
  font-size:34px}
.plan-link {
  display:block;
  font-size:12px;
  color:var(--secondary);
  margin-top:20px}
.footer {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:24px;
  padding-top:28px;
  padding-bottom:28px;
  border-top:1px solid var(--separator)}
.footer>span {
  font-size:11px;
  color:var(--secondary)}
.footer nav {
  display:flex;
  gap:24px;
  font-size:11px;
  color:var(--secondary);
  margin-left:auto}
.footer img {
  display:block}
.header-link:hover,.plan-link:hover,.footer a:hover {
  color:var(--label)}

@keyframes commerce-arrive {
  from {
  transform:translate(-22px,32px) scale(1.035)}
to {
  transform:translate(0,0) scale(1)}
}

@media(min-width:600px) {
  .hero {
  min-height:880px}
.hero-content {
  padding-top:60px}
.commerce-world {
  inset:510px 0 30px}
.hero-loyalty {
  left:3%;
  transform:rotate(-13deg)}
.hero-coupon {
  right:4%;
  transform:rotate(13deg)}
.hero-reward {
  top:205px}
.masthead {
  padding:0 40px}
.header-link {
  font-size:13px}
.hero-copy {
  font-size:18px}
.content-width {
  padding-left:40px;
  padding-right:40px}
.benefits {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px}
.benefit-art {
  height:220px}
.benefit-art>div {
  zoom:.7}
h2 {
  font-size:48px}
.next-step {
  flex-direction:row;
  justify-content:space-between;
  align-items:center}
.next-step h2 {
  font-size:40px}
}

@media(min-width:1000px) {
  .masthead {
  height:88px;
  padding:0 48px}
.masthead img {
  width:106px}
.hero {
  min-height:740px;
  height:calc(100svh - 88px);
  max-height:900px;
  align-items:center}
.hero-content {
  padding:0 20px 52px;
  width:630px}
.hero .eyebrow {
  margin-bottom:26px}
.hero-copy {
  margin-top:26px}
.commerce-world {
  inset:-70px -30px 0}
.commerce-photo {
  opacity:.62;
  mask-image:linear-gradient(transparent,#000 12%,#000 82%,transparent)}
.hero-loyalty {
  left:6%;
  top:22%;
  transform:rotate(-15deg)}
.hero-coupon {
  right:5%;
  top:15%;
  transform:rotate(13deg)}
.hero-receipt {
  display:block;
  left:3%;
  top:62%;
  transform:rotate(10deg)}
.hero-reminder {
  display:flex;
  right:0%;
  top:53%;
  transform:rotate(-9deg)}
.hero-reward {
  left:auto;
  right:17%;
  top:83%;
  transform:rotate(8deg)}
.hero-tag {
  display:block;
  left:26%;
  top:80%;
  transform:rotate(-13deg)}
.discover {
  bottom:28px;
  font-size:11px}
.possibilities {
  padding-top:100px;
  padding-bottom:90px}
.section-heading {
  margin-bottom:52px}
.benefits {
  gap:28px}
.benefit-art {
  height:284px}
.benefit-art>div {
  zoom:1}
.next-step {
  padding-top:72px;
  padding-bottom:80px}
.next-step h2 {
  font-size:44px}
.footer {
  padding-top:32px;
  padding-bottom:32px}
}

@media(min-width:1500px) {
  .hero-loyalty {
  left:12%}
.hero-coupon {
  right:12%}
.hero-receipt {
  left:9%}
.hero-reminder {
  right:5%}
}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
.commerce-world {
  animation:none}
* {
  transition:none!important}
}


/* Store and Operations share the composition, with their own commerce artifacts. */
.commerce-paper { width:244px; padding:22px; color:var(--ink); background:var(--paper); border-radius:10px; text-align:left; }
.commerce-paper>p {font:32px/1.08 Georgia,serif; letter-spacing:-.035em; margin:22px 0;}
.paper-sage {background:var(--sage)}
.paper-pink {background:var(--pink)}
.paper-rows {border-top:1px solid #292b2725;padding-top:8px}
.paper-row {display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:9px;padding:9px 0;border-bottom:1px solid #292b2715}
.paper-row b {font-weight:500;white-space:nowrap}
.paper-footer {font-size:9px;margin-top:20px}
.benefit-art>.commerce-paper {transform:rotate(-6deg);flex-shrink:0}
.benefit:nth-child(2) .commerce-paper {transform:rotate(5deg)}
body[data-plan="store"] h1 {font-size:clamp(34px,5.5vw,64px)}
body[data-plan="store"] .hero-copy {font-size:15px}
body[data-plan="operations"] h1 {font-size:clamp(42px,6.3vw,78px)}
body[data-plan="store"] .hero-receipt,body[data-plan="operations"] .hero-receipt {width:auto;background:none;padding:0;clip-path:none}
@media(min-width:1000px) {
 body[data-plan="store"] .hero-copy {font-size:17px}
 body[data-plan="store"] .hero-receipt,body[data-plan="operations"] .hero-receipt {transform:rotate(8deg) scale(.85);transform-origin:left top}
 body[data-plan="store"] .hero-loyalty,body[data-plan="operations"] .hero-loyalty {left:4%}
 body[data-plan="store"] .hero-coupon,body[data-plan="operations"] .hero-coupon {right:3%}
}
@media(min-width:1500px) {
 body[data-plan="store"] .hero-loyalty,body[data-plan="operations"] .hero-loyalty {left:12%}
 body[data-plan="store"] .hero-coupon,body[data-plan="operations"] .hero-coupon {right:10%}
}

/* The what section explains capabilities; decorative mock cards add no evidence. */
.benefit-facts {border-top:1px solid var(--separator);padding-top:24px;display:flex;flex-direction:column;align-items:flex-start}
.feature-number {font-size:11px;color:var(--secondary);font-variant-numeric:tabular-nums;margin-bottom:24px}
.benefit-facts h3 {font-size:24px;line-height:1.2;letter-spacing:-.04em;margin-bottom:16px}
.benefit-facts>p {font-size:14px;line-height:1.7;color:var(--secondary);margin-bottom:24px}
.benefit-facts ul {padding:0;margin:0 0 28px;list-style:none;width:100%}
.benefit-facts li {font-size:12px;line-height:1.65;padding:12px 0;border-top:1px solid var(--separator);color:var(--label)}
.feature-link {font-size:12px;line-height:1.6;margin-top:auto;display:flex;align-items:center;gap:12px;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--separator)}
.feature-link:hover {text-decoration-color:var(--label)}

/* Compact, literal feature previews. All values belong to the illustrative shop. */
.benefit-compact{display:flex;flex-direction:column;align-items:flex-start}
.feature-preview{width:100%;min-height:228px;border:1px solid var(--separator);border-radius:14px;background:var(--surface);padding:22px;margin-bottom:24px;color:var(--label);font-size:11px;text-align:left}
.preview-label{font-size:8px;letter-spacing:.09em;color:var(--secondary);display:block;margin-bottom:22px}
.catalog-example{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.catalog-example img{width:84px;height:84px;object-fit:cover;border-radius:8px;flex-shrink:0}
.catalog-example>div{display:grid;gap:7px}.catalog-example strong{font-size:14px;font-weight:500}.catalog-example span{font-size:9px;color:var(--secondary)}.catalog-example b{font-size:13px;font-weight:500}.catalog-example small{font-size:8px;color:var(--sage)}
.preview-action{background:var(--label);color:var(--canvas);border-radius:6px;padding:10px 12px;display:flex;justify-content:space-between;font-size:10px}
.payment-total{display:flex;align-items:center;justify-content:space-between;margin:24px 0}.payment-total strong{font-size:24px;letter-spacing:-.04em;font-weight:500}.payment-total>span{color:var(--secondary)}
.payment-method{display:flex;align-items:center;gap:12px;margin-bottom:22px}.payment-method div{display:grid;gap:5px}.payment-method strong{font-size:11px;font-weight:500}.payment-method div>span{font-size:9px;color:var(--secondary)}
.payment-confirmed{border-top:1px solid var(--separator);padding-top:14px;font-size:10px}.payment-confirmed>span{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--sage);color:var(--ink);margin-right:6px}
.delivery-option{display:flex;align-items:center;gap:10px;padding:16px 10px;border:1px solid var(--separator);border-radius:7px;margin-bottom:8px}.delivery-option.selected{border-color:var(--secondary);background:#ffffff06}.delivery-option div{display:grid;gap:5px}.delivery-option strong{font-size:11px;font-weight:500}.delivery-option div>span{font-size:8px;color:var(--secondary)}.delivery-radio{width:12px;height:12px;border:1px solid var(--secondary);border-radius:50%;flex-shrink:0}.selected .delivery-radio{border:4px solid var(--label)}.delivery-tick{margin-left:auto}.delivery-foot{display:block;font-size:9px;color:var(--secondary);margin-top:16px}
.benefit-compact h3{font-size:23px;line-height:1.2;margin-bottom:12px}.benefit-compact>p{font-size:14px;line-height:1.7;color:var(--secondary);margin-bottom:20px}
@media(min-width:600px){.feature-preview{padding:16px;min-height:232px}.catalog-example{gap:10px}.catalog-example img{width:54px;height:74px}.catalog-example strong{font-size:12px}.preview-label{font-size:7px}.delivery-option{padding:14px 7px;gap:7px}.delivery-option strong{font-size:10px}}
@media(min-width:1000px){.feature-preview{padding:22px;min-height:252px}.catalog-example{gap:16px}.catalog-example img{width:84px;height:84px}.catalog-example strong{font-size:14px}.preview-label{font-size:8px}.delivery-option{padding:16px 10px;gap:10px}.delivery-option strong{font-size:11px}}
.mini-loyalty{background:var(--sage);color:var(--ink);border-radius:9px;padding:20px}.mini-loyalty>span{font-size:9px}.mini-loyalty>strong{display:block;font-size:21px;letter-spacing:-.04em;margin-top:8px;font-weight:500}.mini-loyalty small{font-size:8px}.mini-stamps{font-size:24px;letter-spacing:2px;margin:18px 0}.mini-stamps i{font:11px Inter;border:1px dashed currentColor;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;vertical-align:middle}
.preview-message{font-size:10px;line-height:1.7;padding:12px 0;border-top:1px solid var(--separator)}.preview-message span{display:inline-block;margin-top:8px;text-decoration:underline;text-underline-offset:3px}
.preview-record{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:19px 0;border-bottom:1px solid var(--separator)}.preview-record>span{color:var(--secondary);font-size:9px}.preview-record strong{font-size:10px;font-weight:500;text-align:right}
.sync-step{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--separator)}.sync-step>b{font-size:10px;color:var(--sage)}.sync-step strong{display:block;font-size:10px;font-weight:500}.sync-step span{display:block;font-size:8px;color:var(--secondary);margin-top:6px}

/* Align preview, title, description and link across each three-column row. */
@media(min-width:600px){
 .benefits:has(.benefit-compact){grid-template-rows:repeat(4,auto);row-gap:0}
 .benefit-compact{display:grid;grid-row:span 4;grid-template-rows:subgrid;align-items:start}
 .benefit-compact .feature-preview{align-self:stretch}
 .benefit-compact .feature-link{align-self:end}
 .mini-stamps{font-size:clamp(12px,1.65vw,24px);white-space:nowrap;letter-spacing:1px}
}