/* comptoir: shared styles for /au and /fr.
   One idea carries the brand: the thermal order docket. Everything else stays quiet. */
:root {
  --white: #ffffff;
  --black: #000000;
  --zinc: #deddd8;      /* the zinc bar top */
  --paper: #fbfbf6;     /* thermal receipt paper */
  --glaze: #3b6fe6;     /* the one accent (comptoir blue), used sparingly */
  --on-glaze: #ffffff;  /* text on the accent */
  --grey: #6f6f6a;
  --rule: rgba(0, 0, 0, 0.14);
  --sans: "Hanken Grotesk", system-ui, sans-serif;
  --docket: "Courier Prime", "Courier New", monospace;
  --gutter: clamp(16px, 4vw, 48px);
  --section: clamp(88px, 11vw, 150px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--white); color: var(--black);
  font-family: var(--sans); font-size: 17px; line-height: 1.5; font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }
.hero :focus-visible, .dark :focus-visible, .join :focus-visible { outline-color: var(--white); }

/* Type scale: 13 / 17 / 22 / 34 / 56 / 96 */
h1, h2, h3 { font-weight: 500; letter-spacing: -0.035em; line-height: 1; margin: 0; }
h1 { font-size: clamp(44px, 6.6vw, 96px); }
h2 { font-size: clamp(34px, 4.6vw, 60px); }
h3 { font-size: 21px; letter-spacing: -0.015em; line-height: 1.2; }
p { margin: 0; }
.small { font-size: 13px; line-height: 1.45; color: var(--grey); }
.muted { color: var(--grey); }
.measure { max-width: 34em; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 99; background: var(--white); padding: 8px 12px; }

.pad { padding: var(--section) var(--gutter); }
.zinc { background: var(--zinc); --grey: #53534e; } /* darker grey keeps body text above 4.5:1 on zinc */
.dark { background: var(--black); color: var(--white); }
.dark .muted { color: #a9a9a3; }
.head-row { display: flex; justify-content: space-between; align-items: end; gap: 24px 48px; flex-wrap: wrap; margin-bottom: 56px; }
.head-row p { max-width: 28em; color: var(--grey); }
.dark .head-row p { color: #a9a9a3; }

/* Header */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px var(--gutter); color: var(--white);
  transition: background .25s ease, color .25s ease;
}
.top.solid { background: var(--white); color: var(--black); border-bottom: 1px solid var(--rule); }
.wordmark { display: inline-flex; text-decoration: none; }
/* The comptoir wordmark (brand/wordmark, one-stroke "m"), painted in the text colour
   through a mask, so it turns white or black with the header. */
.brandmark { display: inline-block; aspect-ratio: 4440 / 941; background-color: currentColor;
  -webkit-mask: url("logos/comptoir-wordmark.svg") no-repeat center / contain;
          mask: url("logos/comptoir-wordmark.svg") no-repeat center / contain; }
.wordmark .brandmark { height: 25px; }
.top nav { display: flex; gap: 28px; font-size: 15px; }
.top nav a, .lang a { text-decoration: none; }
.top nav a:hover, .lang a:hover { text-decoration: underline; text-underline-offset: 4px; }
.lang { display: flex; gap: 12px; font-size: 15px; }
.lang a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
/* Below wide desktops: country codes (AU FR DE) instead of the full names, so the header fits. */
@media (max-width: 1200px) {
  .lang { gap: 14px; }
  .lang a[data-short] { font-size: 0; }
  .lang a[data-short]::after { content: attr(data-short); font-size: 14px; font-weight: 500; letter-spacing: .02em; }
}
.top .actions { display: flex; align-items: center; gap: 28px; }
.top.solid .button.light { background: var(--black); color: var(--white); }

/* Buttons */
.button {
  display: inline-block; padding: 15px 26px; border-radius: 999px;
  background: var(--black); color: var(--white); border: 0;
  font: 500 16px/1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.button.light { background: var(--white); color: var(--black); }
.button:hover { opacity: .85; }
.button.ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.sim-layout { display: grid; grid-template-columns: 1fr 440px; gap: clamp(40px, 7vw, 120px); align-items: start; }
.sim-copy { position: sticky; top: 120px; }
.sim-copy h2 { margin: 20px 0 24px; max-width: 10em; }
.sim-copy .intro { color: #b5b5b0; max-width: 28em; }
.direct { display: flex; align-items: flex-start; gap: 16px; margin-top: 32px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.16); max-width: 30em; }
.direct img { flex: none; width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 0 0 1px rgba(255,255,255,.22); }
.direct p { color: #b5b5b0; font-size: 15px; }
.direct b { display: block; margin-bottom: 4px; color: var(--white); font-size: 17px; font-weight: 600; }
.sim-frame { border-radius: 24px; overflow: hidden; background: #1b1714; }
.sim-frame iframe { display: block; width: 100%; height: 760px; border: 0; }
.link { font-size: 16px; text-underline-offset: 4px; }

/* Hero */
.hero { position: relative; color: var(--white); overflow: hidden; background: #3a3530; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,.6), rgba(0,0,0,.15) 65%), linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0) 22%); }
.hero-inner { position: relative; z-index: 1; min-height: min(100svh, 940px); display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: end; padding: 140px var(--gutter) clamp(40px, 6vw, 80px); }
.hero h1 { max-width: 9.5em; text-wrap: balance; margin-bottom: 24px; }
.hero .lead { font-size: 19px; max-width: 30em; margin-bottom: 32px; opacity: .92; }
.hero .row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.trust-line { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 36px; font-size: 14px; opacity: .85; }
.trust-line span::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--glaze); margin-right: 8px; vertical-align: middle; }
.hero-stage { position: relative; justify-self: center; align-self: center; }
.hero-stage .docket { position: absolute; left: -262px; bottom: 30px; transform: rotate(-4deg); z-index: 0; }
.hero-stage .device { position: relative; z-index: 1; }

/* Docket: thermal-paper order ticket */
.docket {
  width: 240px; background: var(--paper); color: #1b1b1b;
  font-family: var(--docket); font-size: 13px; line-height: 1.45;
  padding: 16px 16px 22px;
  box-shadow: 0 1px 1px rgba(0,0,0,.08), 0 18px 40px -18px rgba(0,0,0,.45);
  -webkit-mask: radial-gradient(6px at 50% 100%, transparent 98%, #000) 50% 100% / 12px 100%;
          mask: radial-gradient(6px at 50% 100%, transparent 98%, #000) 50% 100% / 12px 100%;
}
.docket .head { text-align: center; font-weight: 700; font-size: 14.5px; }
.docket .cut { border-top: 1.5px dashed #1b1b1b; margin: 9px 0; opacity: .7; }
.docket .line { display: flex; justify-content: space-between; gap: 12px; }
.docket .big { font-size: 20px; font-weight: 700; }
.docket .note { padding-left: 1.2em; }

/* Device mockup */
.device {
  width: 270px; aspect-ratio: 9 / 19.2; background: #111; border-radius: 44px; padding: 9px;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.55), inset 0 0 0 1.5px #3a3a3a; flex: none;
}
.scr { position: relative; height: 100%; border-radius: 36px; overflow: hidden; background: var(--white); color: var(--black); font-size: 12px; line-height: 1.35; display: flex; flex-direction: column; }
.scr::before { content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 84px; height: 24px; border-radius: 14px; background: #111; z-index: 3; }
.status { display: flex; justify-content: space-between; padding: 12px 22px 0; font-size: 11px; font-weight: 600; height: 38px; position: relative; z-index: 2; }
.scr-pad { padding: 8px 14px 14px; display: grid; gap: 10px; align-content: start; }
.scr .title { font-size: 19px; font-weight: 600; letter-spacing: -0.03em; }
.scr .sub { color: var(--grey); font-size: 11px; }
.reward-card { background: var(--glaze); color: var(--on-glaze); border-radius: 16px; padding: 12px; display: grid; gap: 8px; }
.reward-card b { font-size: 14px; letter-spacing: -0.02em; }
.reward-card .sub { color: var(--on-glaze); opacity: .85; }
.meter { height: 6px; border-radius: 6px; background: rgba(0,0,0,.12); overflow: hidden; }
.meter i { display: block; height: 100%; width: 70%; background: var(--black); border-radius: 6px; }
.usual { display: flex; gap: 10px; align-items: center; border: 1px solid var(--rule); border-radius: 14px; padding: 8px; }
.usual img, .item img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; flex: none; }
.usual .go { margin-left: auto; background: var(--black); color: var(--white); border-radius: 999px; padding: 6px 10px; font-weight: 600; font-size: 11px; }
.chips { display: flex; gap: 6px; overflow: hidden; }
.chips span { border: 1px solid var(--rule); border-radius: 999px; padding: 5px 10px; white-space: nowrap; font-size: 11px; }
.chips span:first-child { background: var(--black); color: var(--white); border-color: var(--black); }
.feature-img { border-radius: 14px; overflow: hidden; height: 120px; }
.feature-img img { width: 100%; height: 100%; object-fit: cover; }
.item { display: flex; gap: 10px; align-items: center; padding-bottom: 9px; border-bottom: 1px solid var(--rule); }
.item div { flex: 1; }
.item b { display: block; font-size: 12.5px; }
.item .sub { display: block; }
.item .add { width: 24px; height: 24px; border-radius: 50%; background: var(--black); color: var(--white); display: grid; place-items: center; font-weight: 600; }
.tabbar { margin-top: auto; display: flex; justify-content: space-around; padding: 10px 6px 18px; border-top: 1px solid var(--rule); font-size: 10px; color: var(--grey); }
.tabbar b { color: var(--black); font-weight: 600; }
.sheet-dim { position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--white); border-radius: 22px 22px 0 0; padding: 16px 16px 22px; display: grid; gap: 10px; z-index: 2; }
.sheet .line { display: flex; justify-content: space-between; }
.sheet .total { font-weight: 700; font-size: 15px; border-top: 1px solid var(--rule); padding-top: 8px; }
.pay-btn { background: var(--black); color: var(--white); border-radius: 12px; text-align: center; padding: 12px; font-weight: 600; font-size: 14px; }
.pay-alt { text-align: center; color: var(--grey); font-size: 11px; }
.track { display: grid; gap: 0; margin-top: 4px; }
.track div { display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding-bottom: 14px; position: relative; }
.track div::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--black); margin-top: 2px; background: var(--white); position: relative; z-index: 1; }
.track div.done::before { background: var(--black); }
.track div:not(:last-child)::after { content: ""; position: absolute; left: 7px; top: 14px; bottom: 0; width: 2px; background: var(--rule); }
.eta { font-size: 34px; font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
.lock { background: linear-gradient(180deg, #6b5a4c, #2b2420); color: var(--white); }
.lock .clock { text-align: center; font-size: 58px; font-weight: 500; letter-spacing: -0.05em; margin-top: 18px; line-height: 1; }
.lock .date { text-align: center; font-size: 12px; opacity: .85; margin-bottom: 18px; }
.notif { background: rgba(255,255,255,.82); color: var(--black); border-radius: 16px; padding: 10px 12px; margin: 0 10px 8px; display: grid; grid-template-columns: 30px 1fr; gap: 9px; backdrop-filter: blur(8px); }
.notif .icon { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; }
.notif b { font-size: 11.5px; display: flex; justify-content: space-between; }
.notif b small { font-weight: 400; color: var(--grey); }
.notif p { font-size: 11.5px; }

/* A phone running the real app (app-preview/), drawn at 390 px and scaled to the screen by site.js */
.device.live { position: relative; }
.live-scr { position: absolute; inset: 9px; border-radius: 36px; overflow: hidden; background: var(--white); }
.live-scr iframe { position: absolute; left: 0; top: 0; width: 390px; height: 844px; border: 0; transform-origin: top left; }
@media (max-width: 760px) { .live-scr { border-radius: 30px; } }

/* Hero phone: four screens that play in sequence, like a screen recording */
.device.cycle { position: relative; width: 290px; }
.device.cycle .scr { position: absolute; inset: 9px; opacity: 0; animation: screen-cycle 14s infinite; }
.device.cycle .scr:nth-child(2) { animation-delay: 3.5s; }
.device.cycle .scr:nth-child(3) { animation-delay: 7s; }
.device.cycle .scr:nth-child(4) { animation-delay: 10.5s; }
@keyframes screen-cycle {
  0% { opacity: 0; transform: translateY(14px) scale(.985); }
  3.75% { opacity: 1; transform: none; }
  23.75% { opacity: 1; transform: none; }
  27.5% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .device.cycle .scr { animation: none; }
  .device.cycle .scr:last-child { opacity: 1; }
}
.loc { display: grid; }
.loc b { font-size: 15px; letter-spacing: -0.02em; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid2 > div { display: grid; gap: 2px; font-size: 11.5px; }
.grid2 img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; margin-bottom: 4px; }
.grid2 span { color: var(--grey); }
.grid2 .sold img { filter: grayscale(1); opacity: .5; }
.grid2 .sold span { color: #b4443a; font-weight: 600; }
.hero-img { position: relative; height: 40%; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; }
.hero-img .earn { position: absolute; right: 10px; bottom: 10px; background: rgba(0,0,0,.65); color: var(--white); font-size: 10.5px; padding: 4px 8px; border-radius: 999px; }
.row-between { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.opt-head { display: flex; justify-content: space-between; border-top: 1px solid var(--rule); padding-top: 8px; }
.opts { display: flex; gap: 6px; flex-wrap: wrap; }
.opts span { border: 1px solid var(--rule); border-radius: 10px; padding: 6px 9px; font-size: 11px; }
.opts .on { border-color: var(--black); background: var(--black); color: var(--white); }
.cta-bar { margin: auto 14px 18px; background: var(--black); color: var(--white); border-radius: 14px; padding: 13px 16px; display: flex; justify-content: space-between; font-weight: 600; font-size: 13px; }
.cta-bar.ghost { background: transparent; color: var(--black); border: 1.5px solid var(--black); justify-content: center; }
.done-tick { width: 52px; height: 52px; border-radius: 50%; background: var(--glaze); margin: 10px auto 2px; position: relative; }
.done-tick::after { content: ""; position: absolute; left: 17px; top: 15px; width: 18px; height: 10px; border-left: 3px solid var(--on-glaze); border-bottom: 3px solid var(--on-glaze); transform: rotate(-45deg); }
.map { height: 110px; border-radius: 14px; position: relative; overflow: hidden;
  background: repeating-linear-gradient(35deg, #ecebe6 0 18px, #e3e2dc 18px 20px), #ecebe6; }
.map::before { content: ""; position: absolute; left: -10%; right: -10%; top: 55%; height: 10px; background: var(--white); transform: rotate(-8deg); }
.map i { position: absolute; left: 50%; top: 42%; width: 16px; height: 16px; border-radius: 50% 50% 50% 0; background: var(--black); transform: translate(-50%, -50%) rotate(-45deg); }
.balances { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule); border-radius: 14px; }
.balances div { padding: 10px; display: grid; text-align: center; }
.balances div + div { border-left: 1px solid var(--rule); }
.balances b { font-size: 20px; letter-spacing: -0.03em; }
.balances span { font-size: 10.5px; color: var(--grey); }

/* Manifesto */
.manifesto p { font-size: clamp(30px, 4.2vw, 56px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 500; max-width: 19em; }
.manifesto p + p { margin-top: .6em; color: var(--grey); }

/* Three pillars, each with its own small scene */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px); }
.scene { background: var(--zinc); height: 360px; display: grid; place-items: center; overflow: hidden; margin-bottom: 24px; position: relative; }
.pillars h3 { margin-bottom: 8px; }
.pillars p { color: #3d3d3a; max-width: 28em; }
.scene .docket { transform: rotate(1.5deg); }
.scene .mini-sheet { width: 250px; background: var(--white); border-radius: 22px; padding: 18px; display: grid; gap: 10px; box-shadow: 0 30px 50px -30px rgba(0,0,0,.45); font-size: 13px; }
.scene .mini-sheet .line { display: flex; justify-content: space-between; }
.scene .card-stamps { width: 260px; background: var(--glaze); color: var(--on-glaze); border-radius: 22px; padding: 20px; display: grid; gap: 14px; box-shadow: 0 30px 50px -30px rgba(0,0,0,.45); }
.scene .card-stamps b { font-size: 20px; letter-spacing: -0.03em; font-weight: 500; line-height: 1.1; }
.cups { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.cups span { aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--black); }
.cups span.full { background: var(--black); }

/* Venue types */
.venues-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.venues-grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; margin-bottom: 18px; background: #cfcec9; }
.venues-grid h3 { margin-bottom: 8px; }
.venues-grid p { color: #3d3d3a; font-size: 16px; }
.sheet .seg { display: grid; grid-template-columns: repeat(3, 1fr); background: #efefec; border-radius: 10px; padding: 3px; text-align: center; font-size: 11.5px; }
.sheet .seg span { padding: 6px 0; border-radius: 8px; }
.sheet .seg .on { background: var(--white); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.12); }

/* Pillar scenes: product UI over a real photo */
.scene.photo { background: #2b2622 var(--bg) center / cover no-repeat; }
.scene.photo::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.18); }
.scene.photo > * { position: relative; }
.tablet { width: 300px; background: #121212; border-radius: 18px; padding: 8px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); color: var(--white); font-size: 11px; }
.kds-head { display: flex; justify-content: space-between; padding: 6px 8px 8px; font-size: 12px; }
.kds-head span { color: #9a9a95; }
.kds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tk { background: #f4f4f1; color: var(--black); border-radius: 8px; padding: 7px; display: grid; gap: 3px; align-content: start; min-height: 120px; }
.tk-h { display: flex; align-items: center; gap: 4px; padding-bottom: 5px; border-bottom: 1px solid var(--rule); margin-bottom: 2px; }
.tk-h b { font-size: 12px; }
.tk .src { font-size: 9px; background: var(--black); color: var(--white); border-radius: 4px; padding: 1px 4px; }
.tk .t { margin-left: auto; font-size: 9.5px; font-variant-numeric: tabular-nums; color: #1f7a3f; font-weight: 700; }
.tk .t.warn { color: #b4443a; }
.tk small { margin-top: auto; color: var(--grey); font-size: 9.5px; }
.pay-card, .loyalty-card { width: 270px; background: var(--white); color: var(--black); border-radius: 22px; padding: 18px; display: grid; gap: 10px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.55); font-size: 13px; }
.pay-card .line { display: flex; justify-content: space-between; }
.pay-card .total { font-weight: 700; border-top: 1px solid var(--rule); padding-top: 8px; }
.merchant { display: flex; gap: 10px; align-items: center; padding-bottom: 6px; }
.merchant img { width: 38px; height: 38px; border-radius: 10px; }
.merchant div { display: grid; }
.merchant span { color: var(--grey); font-size: 11.5px; }
.loyalty-card { background: var(--glaze); color: var(--on-glaze); }
.loyalty-card .big { font-size: 20px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.loyalty-card .merchant span { color: rgba(255,255,255,.75); }

/* Square mark next to integration mentions (replace with Square's official asset) */
.sq-mark { width: 1em; height: 1em; display: inline-block; vertical-align: -0.12em; margin-right: .4em; filter: invert(1); }
.zinc .sq-mark, .panel .sq-mark, .spot .sq-mark { filter: none; }
.trust-line .with-sq::before, .built-on .with-sq::before { display: none; }
.connect .sq { display: inline-flex; align-items: center; }

/* Facts band */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.facts div { border-top: 1px solid rgba(255,255,255,.25); padding-top: 20px; }
.facts strong { display: block; font-size: clamp(40px, 5vw, 72px); font-weight: 500; letter-spacing: -0.05em; line-height: 1; margin-bottom: 12px; }
.facts span { color: #c9c9c3; }
.built-on { margin-top: 56px; display: flex; flex-wrap: wrap; gap: 12px 40px; align-items: center; color: #c9c9c3; font-size: 15px; }
.built-on b { color: var(--white); font-weight: 500; font-size: 20px; letter-spacing: -0.02em; }

/* App tour: a strip of screens */
.tour { display: flex; gap: 28px; overflow-x: auto; padding: 8px var(--gutter) 24px; margin: 0 calc(var(--gutter) * -1); scroll-snap-type: x mandatory; scrollbar-width: thin; }
.tour figure { margin: 0; scroll-snap-align: start; }
.tour figcaption { margin-top: 18px; max-width: 270px; }
.tour figcaption b { display: block; font-weight: 500; font-size: 18px; letter-spacing: -0.02em; margin-bottom: 4px; }
.tour figcaption span { color: var(--grey); font-size: 15px; }

/* Regulars */
.strip { display: grid; grid-template-columns: 1.15fr .85fr 1fr; gap: 16px; align-items: start; }
.strip figure { margin: 0; }
.strip figure:nth-child(2) { margin-top: 18%; }
.strip figure:nth-child(3) { margin-top: 6%; }
.strip img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--zinc); }
.strip figcaption { margin-top: 12px; font-family: var(--docket); font-size: 13.5px; line-height: 1.45; }

/* Split: text and a scene */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 120px); align-items: center; }
.split h2 { margin-bottom: 24px; }
.split .stage { background: var(--zinc); min-height: 620px; display: flex; justify-content: center; align-items: center; gap: 24px; padding: 48px 24px; overflow: hidden; }
.dark .split .stage { background: #1c1c1b; }
.ticks { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 14px; }
.ticks li { padding-left: 28px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.wallet-badges { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.wallet-badges img { width: auto; display: block; user-select: none; }
.wallet-badges .apple { height: 44px; }
.wallet-badges .google { height: 69px; margin: -12px 0 -12px -10px; }
.credits-page { max-width: 760px; }
.credits-page h1 { margin: 64px 0 24px; font-size: clamp(36px, 5vw, 56px); }
.credits-page p { color: var(--grey); margin-bottom: 24px; }
.credits-page h2 { margin: 40px 0 12px; font-size: 24px; letter-spacing: -.02em; }
.credits-page h2 { font-size: 22px; margin: 32px 0 10px; letter-spacing: -0.02em; }
.credits-page a { text-underline-offset: 3px; }

/* Proof: quotes and stories */
.tag { display: inline-block; font: 600 11px/1 var(--sans); background: var(--glaze); color: var(--on-glaze); padding: 5px 8px; border-radius: 4px; vertical-align: middle; }
.stories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.story { display: flex; flex-direction: column; }
.story img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 18px; }
.story h3 { margin-bottom: 8px; }
.story p { color: var(--grey); font-size: 16px; }
.story .metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; border-top: 1px solid var(--rule); padding-top: 16px; }
.story .metrics strong { display: block; font-size: 34px; font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.story .metrics span { font-size: 13px; color: var(--grey); }

/* Reviews: rating line and two rows of review dockets that drift past */
.rating { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 22px; font-size: 16px; }
.stars { color: var(--black); letter-spacing: 2px; font-size: 19px; line-height: 1; }
.stars .off { opacity: .2; }
.reviews, .marquee { display: grid; gap: 20px; overflow: hidden; margin: 0 calc(var(--gutter) * -1);
  -webkit-mask: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
.reviews .row, .marquee .row { display: flex; gap: 20px; width: max-content; animation: drift 70s linear infinite; }
.reviews .row .dup, .marquee .row .dup { display: contents; }
.reviews .row.rev, .marquee .row.rev { animation-direction: reverse; }
.reviews:hover .row, .marquee:hover .row { animation-play-state: paused; }
@keyframes drift { to { transform: translateX(calc(-50% - 10px)); } }
.review { margin: 0; width: 360px; flex: none; background: var(--white); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.review blockquote { margin: 0; font-size: 18px; line-height: 1.4; letter-spacing: -0.01em; flex: 1; }
.review figcaption { display: flex; gap: 12px; align-items: center; border-top: 1px solid var(--rule); padding-top: 14px; }
.review figcaption div { display: grid; gap: 2px; }
.review figcaption b { font-weight: 600; font-size: 15px; }
.review figcaption span { font-size: 13px; color: var(--grey); }
.review .avatar { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; flex: none; }
.review .avatar.person { border-radius: 50%; }

/* Customer logos band */
.logos-band { background: var(--black); color: var(--white); padding: clamp(72px, 9vw, 120px) 0; }
.logos-band h2 { padding: 0 var(--gutter); margin-bottom: 48px; text-align: center; }
.marquee { margin: 0; }
.marquee .row { gap: 0; animation-name: drift-flush; animation-duration: 55s; }
@keyframes drift-flush { to { transform: translateX(-50%); } }
.marquee .logo { flex: none; width: 220px; height: 96px; display: grid; place-items: center; padding: 0 24px; text-align: center; font-size: 21px; letter-spacing: -0.03em; color: #d8d8d2; border-left: 1px solid rgba(255,255,255,.12); }
.marquee .logo img { max-height: 44px; max-width: 150px; filter: grayscale(1) brightness(0) invert(1); opacity: .8; }
.marquee .logo.s1 { font-family: var(--docket); font-size: 17px; letter-spacing: 0; text-transform: uppercase; }
.marquee .logo.s2 { font-weight: 700; text-transform: lowercase; }
.marquee .logo.s3 { font-style: italic; font-weight: 500; }
.marquee .logo.s4 { font-weight: 300; letter-spacing: .08em; text-transform: uppercase; font-size: 15px; }
@media (prefers-reduced-motion: reduce) {
  .reviews .row, .marquee .row { animation: none; }
  .reviews, .marquee { overflow-x: auto; }
}

/* Customer apps list: icon tile and name, three columns */
.app-list { list-style: none; margin: 0 auto; padding: 0 var(--gutter); max-width: 1240px; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 48px; }
.app-list li { border-bottom: 1px solid rgba(255,255,255,.1); }
.app-list a, .app-list .entry { display: flex; align-items: center; gap: 20px; padding: 16px; border: 1px solid transparent; border-radius: 16px; text-decoration: none; color: var(--white); }
.app-list a:hover { border-color: var(--glaze); }
.app-icon { width: 72px; height: 72px; flex: none; border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.06); display: grid; place-items: center; font-size: 26px; font-weight: 600; letter-spacing: -0.04em; }
.app-icon img { width: 100%; height: 100%; object-fit: cover; }
.app-list .name { font-size: 19px; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* "Works with" POS band under the hero */
.pos-band { display: flex; align-items: center; gap: 32px; padding: 26px var(--gutter); border-bottom: 1px solid var(--rule); overflow: hidden; }
.pos-title { flex: none; color: var(--grey); font-size: 15px; }
.pos-marquee { flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.pos-marquee .row { display: flex; gap: 64px; width: max-content; animation: pos-drift 30s linear infinite; }
.pos-marquee .row .dup { display: contents; }
.pos-marquee:hover .row { animation-play-state: paused; }
@keyframes pos-drift { to { transform: translateX(calc(-50% - 32px)); } }
.pos-marquee.still { -webkit-mask: none; mask: none; }
.pos-marquee.still .row { animation: none; }
.pos-item { display: inline-flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 600; letter-spacing: -0.03em; color: #2b2b28; white-space: nowrap; }
.pos-item img { width: 26px; height: 26px; }
@media (prefers-reduced-motion: reduce) { .pos-marquee .row { animation: none; } .pos-marquee { overflow-x: auto; } }

/* Three benefits */
.b-num { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid currentColor; font-weight: 500; font-size: 17px; margin-bottom: 22px; }
.b-num.light { border-color: rgba(255,255,255,.6); }
.upsell { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--rule); }
.upsell img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.upsell div { display: grid; flex: 1; }
.upsell span { color: var(--grey); font-size: 11px; }
.upsell .add { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--black); position: relative; }
.upsell .add::before, .upsell .add::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--black); transform: translate(-50%, -50%); }
.upsell .add::after { transform: translate(-50%, -50%) rotate(90deg); }
.upsell .add.on { background: var(--black); }
.upsell .add.on::before { width: 5px; background: var(--white); transform: translate(-90%, 10%) rotate(45deg); }
.upsell .add.on::after { width: 9px; background: var(--white); transform: translate(-30%, -40%) rotate(-50deg); }
.big-stat { margin-top: 36px; display: grid; gap: 4px; border-top: 1px solid var(--rule); padding-top: 24px; max-width: 30em; }
.big-stat strong { font-size: clamp(64px, 8vw, 112px); font-weight: 500; letter-spacing: -0.06em; line-height: .9; }
.big-stat span { font-size: 19px; }
.big-stat small { color: var(--grey); font-size: 13px; }
.stage.retain { position: relative; justify-content: flex-start; padding-left: 7%; }
@media (max-width: 1100px) { .stage.retain { justify-content: center; padding-left: 24px; } }
/* Apple Wallet store card, laid out like the real pass (see wallet/*.pass/pass.json) */
.wstack { position: relative; padding-top: 30px; width: 100%; }
.wstack .peek { position: absolute; left: 4%; right: 4%; top: 0; height: 50px; border-radius: 14px 14px 0 0; }
.wstack .peek.two { left: 2%; right: 2%; top: 14px; }
.wpass { position: relative; background: var(--wbg); color: var(--wfg); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 50px -20px rgba(0,0,0,.6); font-family: -apple-system, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; }
.wp-top { display: flex; align-items: center; gap: 8px; padding: 11px 12px; }
.wp-top img { width: 26px; height: 26px; border-radius: 6px; }
.wp-name { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
.wp-field { display: grid; gap: 1px; font-size: 15px; line-height: 1.15; }
.wp-field small { font-size: 8.5px; font-weight: 600; letter-spacing: .06em; color: var(--wlabel); }
.wp-field.r { margin-left: auto; text-align: right; }
.wp-strip { position: relative; aspect-ratio: 375 / 123; background: center / cover no-repeat; }
.wp-strip .wp-field { position: absolute; left: 12px; top: 7px; font-size: 24px; color: var(--wfg); }
.wp-strip .wp-field small { color: var(--wfg); opacity: .85; }
.wp-row { display: flex; padding: 10px 12px 4px; }
.wp-code { margin: 10px auto 14px; width: max-content; background: #fff; border-radius: 8px; padding: 9px 9px 6px; display: grid; justify-items: center; gap: 4px; color: #000; }
.wp-code img { width: 92px; height: 92px; }
.wp-code small { font-size: 9px; color: #555; }

/* Wallet loyalty pass, with two more passes stacked behind it */
.wallet.floating { position: absolute; right: 4%; top: 50%; margin-top: -190px; width: 260px; transform: rotate(3deg); display: grid; justify-items: center; gap: 12px; }
.pass { position: relative; width: 100%; background: var(--pass); color: var(--pass-ink, #fff); border-radius: 16px; padding: 14px 14px 12px; display: grid; gap: 12px; box-shadow: 0 24px 50px -20px rgba(0,0,0,.55); font-size: 12px; }
.pass.behind { position: absolute; left: 0; top: -22px; height: 60px; padding: 0; transform: scale(.94); box-shadow: none; opacity: .95; }
.pass.behind.two { top: -11px; transform: scale(.97); }
.pass-top { display: flex; align-items: center; gap: 8px; }
.pass-top img { width: 28px; height: 28px; border-radius: 7px; }
.pass-top b { font-size: 14px; letter-spacing: -0.02em; }
.pass-field { display: grid; gap: 1px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.pass-field small { font-size: 8.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.pass-field.right { margin-left: auto; text-align: right; }
.pass-row { display: flex; }
.pass-stamps { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.pass-stamps i { aspect-ratio: 1; border-radius: 50%; border: 1.5px solid currentColor; opacity: .6; }
.pass-stamps i.on { background: currentColor; opacity: 1; }
.pass-code { background: #fff; color: var(--black); border-radius: 10px; padding: 10px; display: grid; justify-items: center; gap: 6px; }
.pass-code img { width: 92px; height: 92px; }
.pass-code small { font-size: 9.5px; color: var(--grey); }
.wallet.floating .wallet-badges { margin-top: 0; justify-content: center; }

/* Steps */
.steps { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(40px, 6vw, 96px); }
.steps ol { list-style: none; padding: 0; margin: 0; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 56px 1fr; padding: 28px 0; border-top: 1px solid var(--rule); }
.steps li:last-child { border-bottom: 1px solid var(--rule); }
.steps li::before { content: counter(s); font-size: 22px; font-weight: 500; }
.steps li p { color: var(--grey); margin-top: 6px; max-width: 30em; }
.steps .from { margin-top: 28px; font-size: 19px; }

/* Launch steps: each step framed in a round crop of the product */
.spots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); counter-reset: spot; }
.spots li { counter-increment: spot; }
.spots h3 { margin: 28px 0 8px; display: flex; gap: 14px; align-items: baseline; }
.spots h3::before { content: counter(spot); font-size: 15px; width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1.5px solid var(--black); display: grid; place-items: center; transform: translateY(-2px); }
.spots li > p { color: #3d3d3a; max-width: 28em; padding-left: 42px; }
.spot { aspect-ratio: 1; border-radius: 50%; overflow: hidden; position: relative; }
.spot.ink { background: var(--black); }
.spot.glaze { background: var(--glaze); }
.spot.zinc-dark { background: #b9b7b0; }
.spot .panel { position: absolute; left: 18%; top: 22%; width: 92%; min-height: 90%; background: var(--white); border-radius: 26px; padding: 26px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); font-size: 14px; color: var(--black); }
.connect .pair { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.connect .wm { display: inline-flex; }
.connect .sq { white-space: nowrap; }
.connect .wm .brandmark { height: 21px; }
.connect .sq { font-weight: 600; font-size: 18px; border: 2px solid var(--black); border-radius: 8px; padding: 2px 8px; }
.connect .link-icon { width: 22px; height: 10px; border: 2px solid var(--grey); border-radius: 6px; position: relative; }
.connect b { display: block; font-size: 26px; font-weight: 500; letter-spacing: -0.035em; margin-bottom: 8px; }
.connect p { color: var(--grey); max-width: 22em; margin-bottom: 18px; }
.connect .btn { display: inline-block; background: var(--black); color: var(--white); border-radius: 10px; padding: 10px 16px; font-weight: 600; font-size: 13px; }
.items { padding: 16px 18px; }
.items .ihead { display: grid; grid-template-columns: 1fr 76px 44px; color: var(--grey); font-size: 11.5px; padding: 0 0 8px 46px; border-bottom: 1px solid var(--rule); }
.items .irow { display: grid; grid-template-columns: 36px 1fr 76px 44px; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 13px; }
.items .irow img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; }
.items em { font-style: normal; font-size: 11px; color: var(--grey); }
.tog { width: 34px; height: 20px; border-radius: 999px; background: #d4d3ce; position: relative; }
.tog::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.tog.on { background: var(--black); }
.tog.on::after { left: 16px; }
.store { display: grid; gap: 16px; align-content: start; }
.store .srow { display: flex; gap: 14px; align-items: center; }
.store .srow .sicon { width: 64px; height: 64px; flex: none; border-radius: 16px; background: var(--black); color: var(--white); display: grid; place-items: center; font-weight: 600; font-size: 22px; letter-spacing: -0.04em; }
.store .srow div { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.store .srow img.sicon { object-fit: cover; }
.store .srow b { font-size: 17px; }
.store .srow span { color: var(--grey); font-size: 12px; }
.store .srow .status { color: #1f7a3f; font-weight: 600; }
.store .get { justify-self: start; background: #efefec; border-radius: 999px; padding: 6px 18px; font-weight: 700; font-size: 13px; }
.store .shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.store .shots img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; }

/* Comparison table */
.compare { width: 100%; border-collapse: collapse; font-size: 16px; }
.compare th, .compare td { text-align: left; padding: 18px 16px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.compare thead th { font-weight: 500; font-size: 18px; letter-spacing: -0.02em; border-bottom: 1px solid var(--black); }
.compare tbody th { font-weight: 400; color: var(--grey); width: 22%; }
.compare .us { background: var(--paper); }
.compare thead .us { background: var(--black); color: var(--white); }
.table-wrap { overflow-x: auto; }

/* Calculator */
input[type=range] { width: 100%; accent-color: var(--white); }

/* PayTo note under the commission calculator (AU) */
.payto-note { display: flex; gap: 18px; align-items: center; margin-top: 28px; padding: 18px 20px; border: 1px solid rgba(255,255,255,.2); border-radius: 16px; max-width: 520px; }
.payto-note img { width: 112px; flex: none; background: #fff; border-radius: 12px; padding: 10px 12px; box-sizing: content-box; }
.payto-note div { display: grid; gap: 4px; }
.payto-note b { font-weight: 600; font-size: 18px; }
.payto-note span { color: #b5b5b0; font-size: 15px; }

/* Pricing: three plan cards, the recommended one in black */
.plans { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.plan { border: 1px solid var(--rule); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 22px; background: var(--white); }
.plan.featured { background: var(--black); color: var(--white); border-color: var(--black); }
.plan-head { display: grid; gap: 6px; }
.plan-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.plan-tag { font-size: 12px; font-weight: 600; letter-spacing: 0; padding: 4px 10px; border-radius: 999px; background: var(--glaze); color: var(--on-glaze); }
.plan-for { color: var(--grey); font-size: 15px; }
.plan.featured .plan-for, .plan.featured .plan-price small { color: #a9a9a3; }
.plan-price { font-size: clamp(36px, 3.4vw, 46px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan-price small { margin-left: 6px; font-size: 15px; letter-spacing: 0; font-weight: 400; color: var(--grey); }
.plan .button { text-align: center; }
.plan-features { list-style: none; margin: 0; padding: 22px 0 0; border-top: 1px solid var(--rule); display: grid; gap: 12px; font-size: 15px; }
.plan.featured .plan-features { border-top-color: rgba(255,255,255,.18); }
.plan-features li { position: relative; padding-left: 26px; }
.plan-features li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 11px; height: 6px; border-left: 2px solid var(--glaze); border-bottom: 2px solid var(--glaze); transform: rotate(-45deg); }
.plan.featured .plan-features li::before { border-color: #8fb0ff; }
.plan-features li.lead-in { padding-left: 0; font-weight: 600; }
.plan-features li.lead-in::before { display: none; }
.assurances { list-style: none; margin: 36px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 36px; font-weight: 500; }
.assurances li { position: relative; padding-left: 26px; }
.assurances li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 11px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.promise-note { margin-top: 12px; max-width: 62em; font-size: 14px; color: var(--grey); }

/* Browser-frame dashboard mockup */
.browser { width: 100%; max-width: 640px; background: var(--white); border-radius: 12px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(0,0,0,.5); color: var(--black); font-size: 12px; }
.browser .bar { display: flex; gap: 6px; padding: 10px 12px; background: #efefec; align-items: center; }
.browser .bar i { width: 9px; height: 9px; border-radius: 50%; background: #c9c9c4; }
.browser .bar span { margin-left: 12px; background: var(--white); border-radius: 6px; padding: 3px 10px; color: var(--grey); font-size: 11px; flex: 1; }
.dash { display: grid; grid-template-columns: 120px 1fr; min-height: 340px; }
.dash nav { border-right: 1px solid var(--rule); padding: 14px; display: grid; gap: 10px; align-content: start; color: var(--grey); }
.dash nav b { color: var(--black); font-weight: 600; }
.dash .main { padding: 16px; display: grid; gap: 14px; align-content: start; }
.dash .kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dash .kpis div { border: 1px solid var(--rule); border-radius: 10px; padding: 10px; }
.dash .kpis strong { display: block; font-size: 20px; font-weight: 600; letter-spacing: -0.03em; }
.dash .chart { height: 120px; border: 1px solid var(--rule); border-radius: 10px; padding: 10px; display: flex; align-items: flex-end; gap: 6px; }
.dash .chart i { flex: 1; background: var(--black); border-radius: 3px 3px 0 0; }
.dash .chart i:nth-child(odd) { background: var(--glaze); }
.dash .venues div { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--rule); }
.illus { font-size: 12px; color: var(--grey); margin-top: 12px; }

/* Merchant dashboard (realistic layout) */
.browser { max-width: 720px; }
.dash2 { display: grid; grid-template-columns: 150px 1fr; background: #f7f7f5; min-height: 460px; font-size: 11.5px; }
.dash2 aside { background: var(--white); border-right: 1px solid var(--rule); padding: 14px 10px; display: grid; gap: 4px; align-content: start; color: #555; }
.dash2 .dwm { font-size: 16px; letter-spacing: -0.05em; padding: 0 8px 12px; color: var(--black); }
.dash2 aside span { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; }
.dash2 aside span i { width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid currentColor; opacity: .7; }
.dash2 aside span.on { background: #f1f0ec; color: var(--black); font-weight: 600; }
.dmain { padding: 14px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.dtop { display: flex; align-items: center; gap: 8px; }
.dtop b { font-size: 16px; letter-spacing: -0.02em; margin-right: auto; }
.dtop .sel { background: var(--white); border: 1px solid var(--rule); border-radius: 8px; padding: 5px 9px; }
.dtop .sel::after { content: " ▾"; color: var(--grey); }
.dkpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dkpis div { background: var(--white); border: 1px solid var(--rule); border-radius: 10px; padding: 9px; display: grid; gap: 2px; }
.dkpis .k { color: var(--grey); font-size: 10.5px; }
.dkpis strong { font-size: 17px; font-weight: 600; letter-spacing: -0.03em; }
.delta { font-size: 10.5px; font-weight: 600; }
.delta.up { color: #1f7a3f; }
.delta.down { color: #b4443a; }
.dcard { background: var(--white); border: 1px solid var(--rule); border-radius: 10px; padding: 10px; min-width: 0; }
.dcard-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.legend { display: flex; align-items: center; gap: 6px; color: var(--grey); font-size: 10px; }
.legend i { width: 12px; height: 2px; display: inline-block; }
.legend i.cur { background: var(--black); }
.legend i.prev { background: #b9b7b0; margin-left: 6px; }
.line-chart { width: 100%; height: 120px; display: block; }
.xl { display: flex; justify-content: space-between; color: var(--grey); font-size: 9.5px; padding: 2px 4px 0; }
.dcols { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px; }
.tbl .th, .tbl .tr { display: grid; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--rule); align-items: center; }
.tbl .tr:last-child { border-bottom: 0; }
.tbl .th { color: var(--grey); font-size: 10px; }
.tbl.topitems .th, .tbl.topitems .tr { grid-template-columns: 1fr 40px 60px; }
.tbl.topitems .tr span:not(:first-child), .tbl.topitems .th span:not(:first-child) { text-align: right; }
.tbl.orders .tr { grid-template-columns: 42px 54px 1fr 52px; }
.tbl.orders .tr span:last-child { text-align: right; }
.chip { background: #f1f0ec; border-radius: 6px; padding: 2px 6px; font-size: 10px; justify-self: start; }
.st { font-size: 10px; font-weight: 600; justify-self: start; padding: 2px 6px; border-radius: 6px; }
.st.warn { background: #fdecd8; color: #9a5a12; }
.st.ok { background: #dcf3e3; color: #1f7a3f; }
.st.info { background: #e1ebf7; color: #24558f; }
.st.muted { background: #f1f0ec; color: var(--grey); }

/* Trust grid */
.trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.trust div { border-top: 1px solid var(--black); padding-top: 20px; }
.trust h3 { margin-bottom: 10px; font-size: 19px; }
.trust p { color: var(--grey); font-size: 16px; }

/* FAQ */
.faq { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(40px, 6vw, 96px); }
.faq details { border-top: 1px solid var(--rule); padding: 22px 0; }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; font-size: 19px; font-weight: 500; letter-spacing: -0.01em; display: flex; justify-content: space-between; gap: 24px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--grey); margin-top: 12px; max-width: 36em; }

/* Join */
.join { position: relative; min-height: 80vh; color: var(--white); display: flex; align-items: flex-end; background: #2e2a26; }
.join > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.join::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,.62), rgba(0,0,0,.18) 70%); }
.join .inner { position: relative; z-index: 1; padding: var(--gutter); padding-bottom: clamp(40px, 6vw, 80px); max-width: 760px; }
.join h2 { margin-bottom: 20px; }
.join p { max-width: 30em; }
.signup { display: flex; gap: 10px; margin-top: 32px; max-width: 520px; }
.signup input { flex: 1; min-width: 0; border: 0; border-radius: 999px; padding: 15px 22px; font: 16px var(--sans); background: var(--white); color: var(--black); }
.form-note { margin-top: 12px; font-size: 15px; min-height: 22px; }

/* "Get my order app" request dialog */
html:has(.lead-dialog[open]) { overflow: hidden; }
.lead-dialog { width: min(640px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 24px; background: var(--paper); color: var(--black); overflow: auto; }
/* The form is longer than most screens: keep the send button in reach while scrolling the fields. */
.lead-dialog form > .button[type=submit] { position: sticky; bottom: 12px; width: 100%; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); }
.lead-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.lead-inner { position: relative; padding: clamp(24px, 4vw, 40px); }
.lead-label { font: 14px var(--docket); text-transform: uppercase; letter-spacing: .04em; color: var(--grey); margin: 0; padding-right: 48px; }
.lead-dialog h2 { font-size: clamp(30px, 4vw, 42px); margin: 10px 0 10px; }
.lead-intro { color: var(--grey); margin: 0; max-width: 30em; }
.lead-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--zinc); color: var(--black); font: 24px/1 var(--sans); cursor: pointer; }
.lead-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; margin: 28px 0 24px; }
.lead-fields .full { grid-column: 1 / -1; }
.lead-fields > label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }
.lead-dialog .opt { color: var(--grey); font-weight: 400; }
.lead-dialog input:not([type=radio]):not([type=range]), .lead-dialog select, .lead-dialog textarea { width: 100%; border: 1px solid var(--rule); border-radius: 14px; padding: 13px 16px; font: 16px var(--sans); background: var(--white); color: var(--black); }
.lead-dialog textarea { resize: vertical; min-height: 88px; }
.lead-dialog input:focus-visible, .lead-dialog select:focus-visible, .lead-dialog textarea:focus-visible, .choices label:has(input:focus-visible) { outline: 2px solid var(--glaze); outline-offset: 1px; }
.lead-dialog fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.lead-dialog legend { font-size: 14px; font-weight: 500; padding: 0; margin-bottom: 6px; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choices label { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border: 1px solid var(--rule); border-radius: 999px; background: var(--white); cursor: pointer; }
.choices label:has(input:checked) { border-color: var(--black); box-shadow: inset 0 0 0 1px var(--black); }
.choices input { margin: 0; accent-color: var(--black); }
.lead-dialog button[disabled] { opacity: .5; cursor: wait; }
.lead-done { display: none; }
.lead-dialog.sent form { display: none; }
.lead-dialog.sent .lead-done { display: block; }
.lead-done .button { margin-top: 28px; }
.lead-pay { display: grid; gap: 4px; margin-top: 22px; }
/* The pay button is the one blue thing on the screen. A deeper blue than --glaze keeps white text above 4.5:1. */
.lead-pay .button { display: grid; gap: 4px; margin: 6px 0 0; padding: 18px 24px; text-align: center; white-space: normal; background: #2c5bd6; color: var(--on-glaze); box-shadow: 0 10px 24px rgba(44, 91, 214, .3); }
.lead-pay .button:hover { opacity: 1; background: #234cba; }
.lead-pay .button small { font-size: 14px; font-weight: 400; opacity: .85; }
.lead-pay [hidden] { display: none; }
/* Monthly / yearly switch. */
.bill-toggle { justify-self: center; display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--zinc); }
.bill-toggle[hidden] { display: none; }
.bill-toggle button { border: 0; border-radius: 999px; padding: 9px 16px; font: 500 14px var(--sans); background: transparent; color: var(--black); cursor: pointer; }
.bill-toggle button[aria-pressed="true"] { background: var(--white); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.bill-toggle em { font-style: normal; color: #1d7a3e; font-weight: 600; }
/* Orders slider in the form. */
.range-field > span { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.range-field output { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.range-field input[type=range] { width: 100%; margin: 8px 0 0; accent-color: #2c5bd6; height: 28px; }
.pay-note [data-lead-sim] { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pay-note { margin: 8px 0 0; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--grey); text-align: center; }

/* Footer */
.foot { padding: 64px var(--gutter) 24px; }
.foot .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; font-size: 15px; }
.foot .cols.five { grid-template-columns: 2fr 1.2fr 1fr 1fr 1fr; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot .heading { color: var(--grey); margin-bottom: 12px; }
.foot .signup input { background: var(--zinc); }
.foot .signup { margin-top: 16px; }
.giant { margin: 72px 0 40px; line-height: 0; }
.giant .brandmark { display: block; width: 100%; height: auto; }
.foot .legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.credits { margin-top: 12px; }
.credits a { text-decoration: underline; }

/* Responsive */
@media (max-width: 1100px) {
  .venues-grid { grid-template-columns: repeat(3, 1fr); }
  .hero-stage .docket { display: none; }
  .trust, .facts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .spots { grid-template-columns: 1fr; max-width: 460px; }
  .plans { grid-template-columns: 1fr; max-width: 520px; }
  .sim-layout { grid-template-columns: 1fr; }
  /* the join copy spans the full width here: darken the whole photo, not just the left */
  .join::after { background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.78) 45%); }
  .sim-copy { position: static; }
  .sim-frame { max-width: 560px; }
  .plan.featured { order: -1; }
  .app-list { grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .top nav { display: none; }
  .hero-inner { grid-template-columns: 1fr; padding-top: 110px; }
  .hero::after { background: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,.55) 45%, rgba(0,0,0,.75)); }
  .hero .lead, .trust-line { opacity: 1; }
  .hero-stage { justify-self: start; }
  .pillars, .stories { grid-template-columns: 1fr; }
  .split, .steps, .faq { grid-template-columns: 1fr; }
  .split .stage { min-height: 0; order: 2; }
  .strip { grid-template-columns: 1fr 1fr; }
  .strip figure:nth-child(2) { margin-top: 24%; }
  .strip figure:nth-child(3) { display: none; }
  .foot .cols, .foot .cols.five { grid-template-columns: 1fr 1fr; }
  .foot .cols > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .pos-band { gap: 16px; padding: 18px var(--gutter); }
  .pos-title { font-size: 13px; }
  .pos-item { font-size: 19px; }
  /* Phones: notifications on the left, the wallet pass (smaller) overlapping on the right. */
  .stage.retain { justify-content: flex-start; padding: 40px 16px 190px; }
  .stage.retain .wallet.floating { right: 12px; top: auto; bottom: 28px; margin-top: 0; transform: rotate(3deg) scale(.62); transform-origin: bottom right; }
  .dash2 { grid-template-columns: 1fr; }
  .dash2 aside { display: none; }
  .dkpis { grid-template-columns: 1fr 1fr; }
  .dcols { grid-template-columns: 1fr; }
  .tablet { width: 92%; }
  /* Two columns of smaller app icons: one long column ran past 1 700px on a phone. */
  .app-list { grid-template-columns: 1fr 1fr; column-gap: 14px; }
  .app-list a, .app-list .entry { gap: 12px; padding: 12px 0; }
  .app-list .app-icon { width: 44px; height: 44px; border-radius: 12px; }
  .app-list .name { font-size: 15px; }
  .device.cycle { width: 250px; }
  .venues-grid { grid-template-columns: 1fr 1fr; gap: 24px 14px; }
  .venues-grid p { font-size: 14px; }
  body { font-size: 16px; }
  .top .actions .button { display: none; }
  .device { width: 230px; border-radius: 38px; }
  .scr { border-radius: 30px; }
  .split .stage .device + .device { display: none; }
  .signup { flex-direction: column; }
  .trust, .facts { grid-template-columns: 1fr; }
  .dash { grid-template-columns: 1fr; }
  .dash nav { display: none; }
  .scene { height: 320px; }
}

/* text and marks that sit on the blue accent */
.reward-card .meter { background: rgba(255,255,255,.3); }
.reward-card .meter i { background: var(--on-glaze); }
.scene .card-stamps .cups span { border-color: var(--on-glaze); }
.spot.glaze .sq-mark { filter: invert(1); }
.scene .card-stamps .cups span.full { background: var(--on-glaze); }

/* Guides (/au/<topic>/): long-form pages under the solid header. */
.guide { max-width: 760px; margin: 0 auto; padding-top: calc(var(--section) + 40px); }
.guide .kicker { font-family: var(--docket); font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--grey); }
.guide h1 { font-size: clamp(38px, 5.4vw, 68px); margin: 16px 0 24px; }
.guide .lead { font-size: 20px; color: var(--grey); margin-bottom: 40px; }
.guide h2 { font-size: clamp(26px, 3vw, 36px); margin: 56px 0 16px; }
.guide h3 { font-size: 21px; margin: 32px 0 8px; letter-spacing: -0.02em; }
.guide p, .guide li { color: #3a3a37; }
.guide p { margin: 0 0 16px; }
.guide ul, .guide ol { padding-left: 22px; display: grid; gap: 8px; }
.guide a { text-underline-offset: 3px; }
.guide .table-wrap { overflow-x: auto; margin: 24px 0; }
.guide table { width: 100%; border-collapse: collapse; font-size: 16px; }
.guide th, .guide td { text-align: left; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.guide th { font-weight: 600; }
.guide .note { font-size: 14px; color: var(--grey); }
.guide .cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0; }
.guide .faq { display: block; margin-top: 16px; }
.guide-sim { margin-top: var(--section); }
.related { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; list-style: none; padding: 0 !important; }
.related a { display: block; padding: 20px; border: 1px solid var(--rule); border-radius: 16px; text-decoration: none; height: 100%; }
.related a b { display: block; margin-bottom: 6px; color: var(--black); }
.related a span { color: var(--grey); font-size: 15px; }

/* Launch offer countdown (data-countdown): a docket-style tag, filled in by site.js. */
.offer-clock { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 22px 0 0; padding: 10px 16px; border: 0; border-radius: 14px; background: #fdecea; color: #5c1712; font: 500 15px/1.3 var(--sans); }
.offer-clock[hidden] { display: none; }
.offer-clock s { font-weight: 400; opacity: .65; }
.offer-clock b { font-size: 16px; font-weight: 700; color: #b3261e; font-variant-numeric: tabular-nums; white-space: nowrap; }
#menu > .offer-clock { margin: 0 0 28px; }
.lead-dialog .offer-clock { margin: 4px 0 14px; }

/* A "Réserver ma place" bar pinned to the bottom of every screen size, with the free-setup countdown.
   The page gets matching bottom padding so the footer is never hidden behind it. */
.mobile-cta { position: fixed; inset: auto 0 0 0; z-index: 35; display: flex; align-items: center; justify-content: center; gap: 14px 24px;
  padding: 10px var(--gutter) max(10px, env(safe-area-inset-bottom)); background: var(--white); color: var(--black);
  border-top: 1px solid var(--rule); box-shadow: 0 -8px 24px rgba(0, 0, 0, .08); }
.mobile-cta .button { padding: 15px 32px; text-align: center; }
.mobile-cta .offer-clock { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; display: flex; align-items: baseline; gap: 4px 10px; font: 15px/1.25 var(--sans); text-transform: none; letter-spacing: 0; }
.mobile-cta .offer-clock span { color: var(--grey); }
.mobile-cta .offer-clock b { font-size: 17px; font-weight: 700; color: #b3261e; font-variant-numeric: tabular-nums; }
body:has(.mobile-cta) { padding-bottom: 76px; }
html:has(.lead-dialog[open]) .mobile-cta { display: none; }
@media (max-width: 600px) {
  .mobile-cta { justify-content: space-between; gap: 14px; }
  .mobile-cta .button { flex: 1; padding: 16px 20px; }
  .mobile-cta { gap: 10px; }
  .mobile-cta .offer-clock { display: grid; gap: 0; font-size: 12px; min-width: 0; flex: 1 1 auto; }
  .mobile-cta .offer-clock b { font-size: 15px; }
  .mobile-cta .button { flex: 0 0 auto; padding: 15px 18px; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .mobile-cta { transition: none; } }
/* Touch screens: small text links get a finger-sized hit area without moving the layout. */
@media (pointer: coarse) {
  .lang a { padding: 12px 4px; margin: -12px -4px; }
  .foot ul { gap: 0; }
  .foot ul a, .foot .legal a { display: inline-block; padding: 10px 0; }
}

/* Phones: the request form fits one screen. Full-screen sheet, compact header, short fields two
   per row, the optional message hidden (the team follows up anyway), the send button pinned. */
@media (max-width: 600px) {
  .lead-dialog { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
  .lead-dialog:not(.sent) .lead-inner { min-height: 100%; display: flex; flex-direction: column; padding: max(16px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom)); }
  .lead-dialog:not(.sent) form { flex: 1; display: flex; flex-direction: column; }
  .lead-dialog form .lead-label, .lead-dialog form .lead-intro { display: none; }
  .lead-dialog form h2 { font-size: 26px; margin: 2px 56px 6px 0; }
  .lead-dialog form .offer-clock { margin: 0 0 8px; padding: 8px 12px; font-size: 13px; border-radius: 12px; gap: 0 10px; }
  .lead-dialog form .offer-clock b { font-size: 15px; }
  .lead-close { top: max(12px, env(safe-area-inset-top)); right: 12px; width: 36px; height: 36px; }
  .lead-fields { grid-template-columns: 1fr 1fr; gap: 10px 10px; margin: 0 0 12px; }
  .lead-fields > label { gap: 4px; font-size: 13px; }
  .lead-dialog legend { font-size: 13px; margin-bottom: 4px; }
  .lead-dialog input:not([type=radio]):not([type=range]), .lead-dialog select { padding: 10px 12px; border-radius: 12px; }
  .lead-fields label:has(textarea) { display: none; }
  .choices { gap: 6px; }
  .choices label { padding: 8px 14px; }
  .range-field output { font-size: 16px; }
  .range-field input[type=range] { margin-top: 2px; }
  .lead-dialog form > .button[type=submit] { margin-top: auto; bottom: 0; }
  .lead-dialog form .form-note:empty { display: none; }
}
@media (max-width: 600px) and (min-height: 640px) {
  /* Taller phones have room for the one-line reason to sign up now. */
  .lead-dialog form .lead-intro { display: block; font-size: 14px; margin: 0 0 12px; }
}

/* Thank-you screen: the saving vs Uber Eats as a plain statement, then one pricing choice. */
.pay-save { margin: 4px 0 18px; padding: 0 0 16px; border-bottom: 1px solid var(--rule); }
.pay-save > span { font-size: 14px; color: var(--grey); }
.pay-save strong { display: block; margin-top: 2px; font-size: clamp(34px, 9vw, 42px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; color: #1d7a3e; font-variant-numeric: tabular-nums; }
.pay-save strong small { font-size: 16px; font-weight: 500; letter-spacing: 0; margin-left: 2px; }
.pay-save p { margin: 6px 0 0; font-size: 13px; color: var(--grey); }
.lead-pay .bill-toggle { justify-self: start; margin: 0 0 10px; }
/* Plan rows: radio, name, price; only the picked row opens to show what it includes. */
.pick-list { display: grid; gap: 8px; margin-bottom: 14px; }
.pick-row { display: grid; grid-template-columns: 20px 1fr auto; column-gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 16px; background: var(--white); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.pick-row:hover { border-color: rgba(0, 0, 0, .3); }
.pick-row:focus-visible { outline: 2px solid #2c5bd6; outline-offset: 2px; }
.pick-row[aria-checked="true"] { border-color: #2c5bd6; box-shadow: inset 0 0 0 1px #2c5bd6; }
.pick-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .3); }
.pick-row[aria-checked="true"] .pick-dot { border: 6px solid #2c5bd6; }
.pick-name { display: grid; gap: 1px; }
.pick-name b { font-size: 17px; font-weight: 600; }
.pick-name small { font-size: 13px; color: var(--grey); }
.pick-name .pick-tag { justify-self: start; padding: 2px 8px; border-radius: 999px; background: #e8eefc; color: #2c5bd6; font-weight: 500; font-size: 12px; }
.pick-price { text-align: right; font-size: 14px; color: var(--grey); white-space: nowrap; }
.pick-price b { font-size: 20px; font-weight: 600; color: var(--black); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pick-price small { display: block; font-size: 12px; }
.pick-price [hidden] { display: none; }
.pick-features { grid-column: 2 / -1; list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--rule); display: grid; gap: 6px; font-size: 14px; }
.pick-row[aria-checked="false"] .pick-features { display: none; }
.pick-features li { position: relative; padding-left: 22px; }
.pick-features li::before { content: ""; position: absolute; left: 2px; top: .32em; width: 11px; height: 6px; border-left: 2px solid #2c5bd6; border-bottom: 2px solid #2c5bd6; transform: rotate(-45deg); }
.pick-features li.lead-in { padding-left: 0; font-weight: 600; }
.pick-features li.lead-in::before { display: none; }
.lead-pay .button { margin-top: 0; position: sticky; bottom: 12px; z-index: 1; }
.pay-terms { margin: 10px 0 0; font-size: 13px; color: var(--grey); text-align: center; }
.pay-terms [hidden] { display: none; }
.lead-pay .pay-note { margin-top: 12px; padding-top: 12px; }

/* Phones: the thank-you screen fits one screen, the pay button pinned. */
@media (max-width: 600px) {
  .lead-dialog.sent .lead-inner { padding: max(16px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom)); }
  .lead-done h2 { font-size: 24px; margin: 2px 52px 4px 0; }
  .lead-done .lead-intro { display: none; }
  .pay-save strong { font-size: 32px; }
  .pick-name { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
  .lead-pay { margin-top: 12px; }
  .pay-save { margin: 0 0 12px; padding-bottom: 12px; }
  .pay-save p { font-size: 12px; }
  .lead-pay .bill-toggle { margin-bottom: 8px; }
  .lead-pay .bill-toggle button { padding: 7px 14px; font-size: 13px; }
  .pick-list { gap: 6px; margin-bottom: 10px; }
  .pick-row { padding: 11px 14px; column-gap: 10px; }
  .pick-features { margin-top: 8px; padding-top: 8px; gap: 3px; font-size: 13px; }
  .lead-pay .button { position: sticky; bottom: 8px; padding: 16px 20px; }
  .pay-terms { margin-top: 8px; font-size: 12px; }
  .lead-pay .pay-note { margin-top: 8px; padding-top: 8px; font-size: 12px; }
}

/* Phones: the first screen shows the app itself. Headline, then the phone mock-up (its top half,
   fading out), then both buttons side by side; the long intro paragraph waits for larger screens. */
@media (max-width: 600px) {
  .hero-inner { min-height: 0; gap: 0; padding: 92px var(--gutter) 28px; }
  .hero-inner > div:first-child { display: contents; }
  .hero h1 { order: 1; font-size: clamp(32px, 9.4vw, 40px); margin-bottom: 18px; }
  .hero .lead { display: none; }
  .hero-stage { order: 2; justify-self: center; align-self: start; width: 100%; display: flex; justify-content: center;
    height: clamp(190px, calc(100svh - 400px), 330px); overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent); }
  .hero-stage .device.cycle { width: 236px; flex: none; }
  .hero .row { order: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
  .hero .row .button { padding: 14px 10px; font-size: 15px; text-align: center; white-space: normal; line-height: 1.2; }
  .trust-line { order: 4; margin-top: 18px; gap: 6px 16px; font-size: 13px; }
}
@media (max-width: 600px) and (max-height: 620px) {
  /* Short phones (iPhone SE): a smaller crop of the mock-up so the buttons stay above the bottom bar. */
  .hero-inner { padding-top: 84px; }
  .hero h1 { font-size: 30px; margin-bottom: 12px; }
  .hero-stage { height: 190px; }
}
/* Desktop: the whole phone mock-up sits in the first screen, above the bottom bar, whatever the window height. */
@media (min-width: 961px) {
  .hero-inner { padding-bottom: calc(clamp(40px, 6vw, 80px) + 64px); }
  .hero-stage .device.cycle { width: clamp(220px, calc((100svh - 230px) * .468), 290px); }
}
@media (min-width: 961px) and (max-height: 720px) {
  /* Short laptop screens: tighter top padding, headline and phone so both fit above the bar. */
  .hero-inner { padding-top: 96px; padding-bottom: 88px; align-items: center; }
  .hero h1 { font-size: clamp(40px, 7.4svh, 64px); margin-bottom: 16px; }
  .hero .lead { margin-bottom: 20px; }
  .trust-line { margin-top: 20px; }
  .hero-stage .device.cycle { width: clamp(190px, calc((100svh - 190px) * .468), 290px); }
}
/* Laptops and wide tablets: the request form fits one view. Wider window, title and countdown on one
   line, fields three per row, locations next to the orders slider, a shorter message box. */
@media (min-width: 761px) {
  .lead-dialog:not(.sent) { width: min(920px, calc(100% - 48px)); }
  .lead-dialog form { display: grid; grid-template-columns: 1fr auto; column-gap: 20px; align-items: center; }
  .lead-dialog form > * { grid-column: 1 / -1; }
  .lead-dialog form .lead-label { display: none; }
  .lead-dialog form h2 { grid-column: 1; margin: 0; padding-right: 0; }
  .lead-dialog form .offer-clock { grid-column: 2; margin: 0 56px 0 0; }
  .lead-dialog form .lead-intro { margin: 10px 0 0; font-size: 15px; }
  .lead-dialog .lead-fields { grid-template-columns: repeat(3, 1fr); gap: 12px 14px; margin: 18px 0 18px; }
  .lead-dialog .lead-fields fieldset.full { grid-column: span 1; }
  .lead-dialog .lead-fields .range-field { grid-column: span 2; align-self: end; }
  .lead-dialog .lead-fields label.full:has(textarea) { grid-column: 1 / -1; }
  .lead-dialog input:not([type=radio]):not([type=range]), .lead-dialog select { padding: 11px 14px; }
  .lead-dialog textarea { min-height: 0; height: 64px; }
  .lead-dialog .choices label { padding: 9px 14px; }
}
@media (min-width: 761px) {
  .lead-dialog form h2 { font-size: 34px; }
  .lead-dialog form .lead-intro { max-width: none; }
  .lead-dialog .choices { flex-wrap: nowrap; gap: 6px; }
  .lead-dialog .choices label { padding: 9px 12px; }
}
@media (min-width: 761px) and (max-height: 780px) {
  /* Short laptop screens: the optional message box goes, as on phones, so the form needs no scrolling. */
  .lead-dialog .lead-fields label.full:has(textarea) { display: none; }
}
.lead-dialog form .form-note:empty { display: none; }

/* Laptops and wide tablets: the thank-you screen uses the same wide window as the form. The saving vs
   Uber Eats sits on the left, the plan choice and pay button on the right, so it all shows at once. */
@media (min-width: 761px) {
  .lead-dialog { width: min(920px, calc(100% - 48px)); }
  .lead-done h2 { margin: 0 56px 6px 0; font-size: 34px; }
  .lead-done .lead-intro { max-width: none; }
  .lead-pay { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); grid-template-areas: "save toggle" "save list" "note pay" ". terms"; column-gap: 32px; align-items: start; margin-top: 20px; }
  .lead-pay .pay-save { grid-area: save; margin: 0; padding: 20px 22px; border: 0; border-radius: 18px; background: #e9f4ec; }
  .lead-pay .pay-save > span { color: #2f5a3b; }
  .lead-pay .pay-save strong { font-size: 44px; margin-top: 6px; }
  .lead-pay .pay-save p { margin-top: 10px; color: #2f5a3b; line-height: 1.45; }
  .lead-pay .bill-toggle { grid-area: toggle; }
  .lead-pay .pick-list { grid-area: list; margin-bottom: 12px; }
  .lead-pay .button { grid-area: pay; position: static; }
  .lead-pay .pay-terms { grid-area: terms; }
  .lead-pay .pay-note { grid-area: note; align-self: center; margin: 0; padding: 0; border: 0; font-size: 13px; text-align: left; }
}
@media (min-width: 761px) and (max-height: 720px) {
  /* Short laptop screens: a tighter thank-you screen so the pay button and terms stay in view. */
  .lead-dialog.sent .lead-inner { padding: 24px 32px; }
  .lead-done h2 { font-size: 30px; margin-bottom: 4px; }
  .lead-pay { margin-top: 14px; }
  .lead-pay .bill-toggle { margin-bottom: 8px; }
  .pick-row { padding: 11px 16px; }
  .pick-features { margin-top: 8px; padding-top: 8px; gap: 3px; }
}

/* PayTo (AU home, #payto): the card fees saved on orders paid by bank */
.pt-logo { display: block; width: 132px; height: auto; margin-bottom: 20px; }
.trust-line a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.split .pt-stage { position: relative; justify-content: flex-start; padding-left: clamp(24px, 11%, 90px); }
.pt-scr { padding: 46px 16px 18px; gap: 10px; background: #f4f4f1; }
.pt-scr .status { position: absolute; top: 14px; left: 22px; right: 22px; display: flex; justify-content: space-between; font-weight: 600; }
.pt-head { display: grid; gap: 2px; }
.pt-head b { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.pt-head span, .pt-label { color: var(--grey); font-size: 11.5px; }
.pt-label { margin: 6px 0 -2px; }
.pt-total { display: flex; justify-content: space-between; align-items: baseline; background: var(--white); border-radius: 14px; padding: 12px 14px; }
.pt-total b { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.pt-opt { position: relative; display: grid; grid-template-columns: 52px 1fr 16px; align-items: center; gap: 10px; background: var(--white); border: 1.5px solid transparent; border-radius: 14px; padding: 11px 12px; }
.pt-opt.is-on { border-color: var(--black); }
.pt-opt img { width: 52px; height: auto; }
.pt-opt div { display: grid; gap: 1px; min-width: 0; }
.pt-opt b { font-weight: 600; font-size: 12.5px; }
.pt-opt small { color: var(--grey); font-size: 10.5px; }
.pt-opt i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #b9b9b4; }
.pt-opt.is-on i { border: 5px solid var(--black); }
.pt-opt em { grid-column: 1 / -1; justify-self: start; font-style: normal; font-weight: 600; font-size: 10.5px; color: #135c2f; background: #dff3e5; border-radius: 999px; padding: 3px 9px; }
.pt-mark { justify-self: center; display: inline-flex; align-items: center; justify-content: center; }
.pt-cardic svg { width: 28px; height: 28px; color: #111; }
.pt-apay { gap: 1px; height: 26px; padding: 0 8px; border: 1px solid #111; border-radius: 6px; background: #fff; color: #111; font-weight: 600; font-size: 14px; letter-spacing: -.01em; }
.pt-apay svg { width: 12px; height: 14px; fill: currentColor; margin-top: -3px; }
.pt-brands { display: flex; gap: 4px; margin-top: 3px; }
.pt-brand { width: 30px; height: 19px; display: block; }
.pt-pay { margin-top: auto; display: flex; justify-content: center; align-items: center; gap: 6px; background: var(--black); color: var(--white); border-radius: 999px; padding: 13px; font-weight: 600; font-size: 13px; }
.pt-pay img { height: 15px; width: auto; filter: invert(1); }
.pt-bank { position: absolute; right: clamp(8px, 4%, 40px); bottom: 120px; width: 250px; background: rgba(255,255,255,.96); border-radius: 18px; padding: 14px 16px; box-shadow: 0 18px 40px rgba(0,0,0,.18); display: grid; gap: 10px; font-size: 13px; }
.pt-bank-top { display: flex; align-items: center; gap: 8px; }
.pt-bank-top small { margin-left: auto; color: var(--grey); }
.pt-bank-ic { width: 22px; height: 22px; border-radius: 6px; background: #1d3f8f; color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.pt-bank p { margin: 0; color: var(--grey); line-height: 1.4; }
.pt-bank p b { display: block; color: var(--black); font-weight: 600; }
.pt-bank-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pt-bank-btns span { text-align: center; padding: 8px; border-radius: 10px; background: #ececea; font-weight: 600; }
.pt-bank-btns .ok { background: var(--black); color: var(--white); }
@media (max-width: 960px) {
  .pt-bank { position: relative; right: auto; bottom: auto; width: min(100%, 300px); }
  .split .pt-stage { flex-direction: column; justify-content: center; padding-left: 24px; }
}

/* Hero headline with a second, smaller line (AU: "save more. sell more." / "without Uber Eats' 30%.") */
.hero h1 .h1-sub { display: block; margin-top: .18em; font-size: .56em; letter-spacing: -0.03em; color: rgba(255,255,255,.8); }