/* restaurant-ordering-system.html - the parts the landing does not have: the hero slider, the comparison tables and the
   savings card, the steps, the channel board, the A.I cards and the support cards. Built from the landing's own tokens
   (premium.css :root) so the page is one brand with index; nothing here restyles a landing component. */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Words that sell: the pain struck in red, the line that must be read marked in brand ------------------------ */
.rs-pain { color: var(--ink); text-decoration: line-through; text-decoration-color: var(--brand); text-decoration-thickness: .1em; }
.rs-hero .rs-pain, .cinema .rs-pain { color: #fff; }
.rs-hl { color: var(--ink); font-weight: 500; background: linear-gradient(transparent 62%, rgba(255, 0, 61, .16) 62% 94%, transparent 94%); }
.rs-strike { color: #c4bcc2; text-decoration: line-through; text-decoration-color: var(--brand); text-decoration-thickness: .08em; }
.rs-stars { color: #f5b301; letter-spacing: 2px; }

/* ---- Hero: the landing's film band, one tool at a time ---------------------------------------------------------- */
.rs-hero { position: relative; isolation: isolate; overflow: clip; display: flex; flex-direction: column;
  min-height: clamp(620px, calc(100svh - 115px), 860px); padding-bottom: clamp(24px, 4vh, 44px); background: #0b0810; color: #fff; }
.rs-hero-film { position: absolute; inset: 0; z-index: -2; }
.rs-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.1s ease; }
.rs-slide.is-on { opacity: 1; }
.rs-slide img, .rs-slide video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.rs-slide img { transform: scale(1.08); transition: transform 9s linear; }
.rs-slide.is-on img { transform: scale(1.01); }
.rs-slide video { opacity: 0; transition: opacity .8s ease; }
.rs-slide video.is-playing { opacity: 1; }
.rs-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(9, 5, 11, .9) 0%, rgba(9, 5, 11, .74) 36%, rgba(9, 5, 11, .3) 68%, rgba(9, 5, 11, .14) 100%),
              linear-gradient(0deg, rgba(9, 5, 11, .94) 0%, rgba(9, 5, 11, 0) 46%); }
/* The film is full bleed, so its content runs wider than the sections below: out to the header's edges on a laptop,
   held at 1600 px on a large screen. */
.rs-hero > .wrap { flex: 1; display: flex; flex-direction: column; max-width: 1600px; }
.rs-hero-in { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: center; gap: 56px; padding-block: clamp(40px, 6vh, 72px); }
.rs-hero-in > * { min-width: 0; }
.rs-hero-copy { max-width: 660px; }
.rs-hero .hero-mark { margin-bottom: 20px; color: rgba(255, 255, 255, .74); }
.rs-hero h1 { margin: 0; color: #fff; font-size: clamp(2.6rem, 5.6vw, 5.2rem); font-weight: 700; line-height: .98; letter-spacing: -.045em; }
.rs-hero h1 .accent { background: linear-gradient(100deg, var(--brand) 8%, var(--brand-2) 92%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.rs-feat { min-height: 5.6em; margin-top: 24px; }
.rs-feat-tag { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16); color: #fff; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.rs-feat-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px rgba(255, 0, 61, .28); }
.rs-feat p { max-width: 36em; margin: 14px 0 0; color: rgba(255, 255, 255, .82); font-size: clamp(1.02rem, 1.3vw, 1.16rem); font-weight: 300; line-height: 1.6; }
.rs-feat p b { color: #fff; font-weight: 600; }
.rs-feat.is-swap .rs-feat-tag, .rs-feat.is-swap p { animation: rsIn .6s cubic-bezier(.2, .7, .2, 1) both; }
.rs-feat.is-swap p { animation-delay: .07s; }
@keyframes rsIn { from { opacity: 0; transform: translateY(12px); } }
.rs-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.rs-cta--center { justify-content: center; }
.rs-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 20px 0 0; color: rgba(255, 255, 255, .62); font-size: .88rem; font-weight: 300; }
.rs-proof b { color: #fff; font-weight: 600; }
.rs-li-ico svg, .rs-rt-bike svg, .rs-tab-ico svg, .rs-arrow svg, .rs-chan-ico svg, .rs-card-ico svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* The live panel: what the tool on screen is doing right now (restaurant.js, live). Orders arrive at the bottom and
   rise away; the menu board and the delivery are one card that changes in place. */
.rs-live { padding: 16px; border-radius: 24px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7); }
.rs-live-head { display: flex; align-items: center; gap: 10px; margin: 0 4px 14px; color: #fff; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.rs-live-head i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: rsPulse 1.8s ease-out infinite; }
@keyframes rsPulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .7); } 70%, 100% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } }
.rs-live-body { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; height: 226px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12px); mask-image: linear-gradient(180deg, transparent 0, #000 12px); }
.rs-live-body.is-card { justify-content: center; -webkit-mask-image: none; mask-image: none; }
.rs-li { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; border-radius: 16px; background: #fff; color: var(--ink);
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .55); transition: transform .65s cubic-bezier(.2, .7, .2, 1), opacity .5s ease; }
.rs-li.is-new { opacity: 0; transform: translateY(22px) scale(.96); }
.rs-li.is-gone { opacity: 0; transition: transform .65s cubic-bezier(.2, .7, .2, 1), opacity .22s ease; }
.rs-li-ico { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff0f3; color: var(--brand); }
.rs-li-ico svg { width: 20px; height: 20px; }
.rs-li-body { display: grid; min-width: 0; line-height: 1.3; }
.rs-li-body b { overflow: hidden; font-size: .9rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.rs-li-body small { color: var(--ink-3); font-size: .76rem; }
.rs-li-st { margin-left: auto; padding: 5px 9px; border-radius: 999px; background: #e8f8ef; color: #0d8a52; font-size: .68rem; font-weight: 600; white-space: nowrap; }
.rs-li-st.t-new { background: #e9efff; color: #2457d6; }
.rs-li-st.t-cook { background: #fff3dc; color: #a65f00; }
.rs-li-time { flex: 0 0 auto; display: grid; place-content: center; justify-items: center; width: 48px; height: 44px; border-radius: 12px; background: var(--ink); color: #fff; line-height: 1.05; }
.rs-li-time b { font-size: .92rem; font-weight: 700; }
.rs-li-time small { font-size: .58rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.rs-li--q { align-self: flex-end; max-width: 84%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff;
  font-size: .86rem; font-weight: 500; }
.rs-li--a { align-self: flex-start; align-items: flex-start; max-width: 94%; padding: 10px 14px 10px 10px; border-radius: 16px 16px 16px 4px; font-size: .84rem; line-height: 1.45; }
.rs-li--a .rs-li-ico { width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; }
.rs-li--a .rs-li-ico svg { width: 15px; height: 15px; }
.rs-li--a b { font-weight: 600; }
/* The menu board re-prices itself and the screens follow, one by one. */
.rs-mb { overflow: hidden; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .55); }
.rs-mb-row { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line-2); font-size: .9rem; font-weight: 500; transition: background .4s; }
.rs-mb-row > span { margin-right: auto; transition: color .4s; }
.rs-mb-row.is-hot { background: #fff4f6; }
.rs-mb-row.is-out > span { color: var(--ink-3); text-decoration: line-through; }
.rs-mb-price { display: inline-flex; align-items: baseline; gap: 8px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rs-mb-price s { color: var(--ink-3); font-size: .78rem; font-weight: 400; }
.rs-mb-price em { font-style: normal; animation: rsIn .5s cubic-bezier(.2, .7, .2, 1) both; }
.rs-mb-chip { padding: 4px 8px; border-radius: 999px; background: #ffe5ea; color: var(--brand); font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  animation: rsIn .4s ease both; }
.rs-mb-foot { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--bg-2); }
.rs-mb-pips { display: flex; gap: 6px; }
.rs-mb-pips i { width: 24px; height: 16px; border-radius: 4px; border: 1.5px solid var(--line); background: #fff; transition: background .3s, border-color .3s, transform .3s; }
.rs-mb-pips i.is-on { border-color: transparent; background: linear-gradient(135deg, var(--brand), var(--brand-2)); transform: translateY(-2px); }
.rs-mb-foot small { color: var(--ink-2); font-size: .76rem; }
/* A delivery rides to the door, stop by stop. */
.rs-rt { padding: 18px 18px 16px; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .55); }
.rs-rt-top { display: flex; align-items: center; gap: 10px; }
.rs-rt-top b { font-size: .95rem; font-weight: 600; }
.rs-rt-line { position: relative; height: 4px; margin: 30px 10px 0; border-radius: 4px; background: var(--line-2); }
.rs-rt-line > b { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; border: 2px solid var(--line); transition: border-color .3s, background .3s; }
.rs-rt-line > b.is-on { border-color: var(--brand); background: var(--brand); }
.rs-rt-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transition: width 1.3s cubic-bezier(.4, 0, .2, 1); }
.rs-rt-bike { position: absolute; top: 50%; left: 0; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: #fff;
  color: var(--brand); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .35), 0 0 0 4px rgba(255, 0, 61, .14); transition: left 1.3s cubic-bezier(.4, 0, .2, 1); }
.rs-rt-bike svg { width: 18px; height: 18px; }
.rs-rt-steps { display: flex; justify-content: space-between; list-style: none; margin: 22px 0 0; padding: 0; }
.rs-rt-steps li { color: var(--ink-3); font-size: .68rem; font-weight: 600; transition: color .3s; }
.rs-rt-steps li.is-on { color: var(--ink); }
.rs-rt-eta { display: flex; justify-content: space-between; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line-2); color: var(--ink-3); font-size: .78rem; }
.rs-rt-eta b { color: var(--ink); font-weight: 600; }
/* An exit that leads an owner away from buying: the feature-request pill (Codester comments). */
.qm-suggest { display: none !important; }

/* ---- Buying: the struck list price, a light sweep across the button, the faces of the people who bought ---------- */
.rs-buy { position: relative; overflow: hidden; isolation: isolate; }
.rs-buy s { margin-right: 2px; font-weight: 400; text-decoration-thickness: 1.5px; opacity: .62; }
.rs-buy::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; transform: translateX(-130%);
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .34) 50%, transparent 70%); animation: rsShine 6s ease-in-out 2.5s infinite; }
@keyframes rsShine { 0%, 72% { transform: translateX(-130%); } 88%, 100% { transform: translateX(130%); } }
.rs-faces { display: inline-flex; padding-left: 10px; }
.rs-faces img { width: 30px; height: 30px; margin-left: -10px; border-radius: 50%; border: 2px solid #1a0e14; object-fit: cover; }

/* ---- The buy bar: in reach between the hero and the closing band ----------------------------------------------- */
.rs-buybar { position: fixed; left: 50%; bottom: clamp(16px, 2vw, 26px); z-index: 9988; width: min(640px, calc(100vw - 32px)); transform: translate(-50%, 140%);
  visibility: hidden; transition: transform .45s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .45s; }
.rs-buybar.is-on { transform: translate(-50%, 0); visibility: visible; transition: transform .45s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
.rs-buybar-in { display: flex; align-items: center; gap: 18px; padding: 10px 10px 10px 22px; border-radius: 999px; background: rgba(23, 16, 26, .92); color: #fff;
  border: 1px solid rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 24px 50px -20px rgba(15, 10, 18, .7); }
.rs-buybar-price { display: flex; align-items: baseline; gap: 8px; margin: 0; white-space: nowrap; }
.rs-buybar-price s { color: rgba(255, 255, 255, .5); font-size: .85rem; }
.rs-buybar-price b { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; }
.rs-buybar .buy-count { flex: 1; flex-wrap: nowrap; justify-content: center; gap: 5px; margin: 0; }
.rs-buybar .buy-count-t { margin-right: 4px; color: var(--brand-2); font-size: .64rem; white-space: nowrap; }
.rs-buybar .buy-count-u { min-width: 40px; padding: 4px 5px 3px; border-radius: 9px; background: rgba(255, 255, 255, .08); }
.rs-buybar .buy-count-u b { font-size: .95rem; }
.rs-buybar .buy-count-u small { font-size: .5rem; }
.rs-buybar .btn { flex: 0 0 auto; padding: 11px 20px; font-size: .9rem; }
/* The tool strip: one frosted bar of pill tabs. The shown tool's pill is lit white, its icon in brand red and its timer
   running along its foot; the two arrows are one control at the bar's end. Where the bar is short of room, the other
   tabs fold to their icons and the lit one keeps its name. */
.rs-hero-bar { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 22px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .85); }
.rs-tabs { flex: 1; min-width: 0; display: flex; gap: 4px; scrollbar-width: none; }
.rs-tabs::-webkit-scrollbar { display: none; }
.rs-tabs button { position: relative; flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 0; height: 52px; padding: 0 14px;
  overflow: hidden; border: 0; border-radius: 15px; background: transparent; color: rgba(255, 255, 255, .72); font: inherit; font-size: .84rem; font-weight: 500;
  white-space: nowrap; cursor: pointer; transition: background .3s, color .3s, box-shadow .3s; }
.rs-tabs button:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.rs-tabs button.is-on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .7); }
.rs-tab-ico { display: grid; place-items: center; flex: 0 0 auto; width: 20px; height: 20px; transition: color .3s; }
.rs-tab-ico svg { width: 20px; height: 20px; }
.rs-tabs button.is-on .rs-tab-ico { color: var(--brand); }
.rs-tab-t { max-width: 140px; overflow: hidden; transition: max-width .45s cubic-bezier(.2, .7, .2, 1), opacity .3s; }
.rs-tabs button::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--brand), var(--brand-2));
  transform: scaleX(0); transform-origin: 0 50%; }
.rs-tabs button.is-on::after { animation: rsBar var(--dur, 6.5s) linear forwards; }
.rs-hero.is-paused .rs-tabs button.is-on::after { animation-play-state: paused; }
@keyframes rsBar { to { transform: scaleX(1); } }
.rs-tabs button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.rs-arrows { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .14); }
.rs-arrow { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 14px; background: transparent; color: #fff; cursor: pointer; transition: background .2s, color .2s; }
.rs-arrow svg { width: 20px; height: 20px; transition: transform .2s; }
.rs-arrow:hover { background: #fff; color: var(--brand); }
.rs-arrow[data-dir="-1"]:hover svg { transform: translateX(-2px); }
.rs-arrow[data-dir="1"]:hover svg { transform: translateX(2px); }
.rs-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---- Proof strip ------------------------------------------------------------------------------------------------ */
.rs-proofbar { background: #fff; border-bottom: 1px solid var(--line-2); }
.rs-proofbar-in { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 24px 56px; padding-block: 32px; }
.rs-proofbar-rated { display: grid; gap: 10px; padding-right: 56px; border-right: 1px solid var(--line-2); }
.rs-proofbar-rated p { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--ink-2); font-size: .95rem; font-weight: 300; white-space: nowrap; }
.rs-proofbar-rated b { color: var(--ink); font-size: 1.05rem; font-weight: 600; }
.rs-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.rs-logos li { display: flex; align-items: center; gap: 12px; min-width: 0; height: 56px; padding: 0 18px; border-radius: 16px; background: #fff; border: 1px solid var(--line);
  color: var(--ink); font-size: .92rem; font-weight: 500; white-space: nowrap; box-shadow: var(--sh-s); }
.rs-logos li img { width: auto; height: 26px; }
.rs-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; font-size: .56rem; font-weight: 700; letter-spacing: -.01em; }
.rs-mark--ue { background: #06c167; color: #fff; }
.rs-mark--ud { background: #000; }
main .sub, .rs-step p, .rs-card p { text-wrap: pretty; }

/* ---- Section heads (the landing's own .idx / .display / .sub) --------------------------------------------------- */
.rs-head { margin-bottom: var(--gap-head); }
/* Type scale. The hero's H1 is the largest line on the page; every section heading, index's included (their 80px
   display, the 8.6rem reviews line, the social band's), takes one size a step below it; table and step titles come
   next, card titles after them, then body text. */
main .display, main .proof-say, #social .display, .rs-display-md { font-size: clamp(2.1rem, 4.3vw, 4rem); line-height: 1; }
.rs-head--center .sub, .cinema .sub { text-wrap: balance; }
.rs-head--center { text-align: center; }
.rs-head--center .idx { justify-content: center; }
.rs-head--center .idx::after { display: none; }
.rs-head--center .sub { margin-inline: auto; }
.rs-head .sub b { color: var(--ink); font-weight: 600; }
.cinema .sub b { color: #fff; font-weight: 600; }
.js .rs-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.js .rs-reveal.is-in { opacity: 1; transform: none; }

/* ---- The comparison tables ------------------------------------------------------------------------------------ */
.rs-tablecard { position: relative; border-radius: var(--r-l); background: #fff; border: 1px solid var(--line-2); box-shadow: 0 40px 80px -48px rgba(110, 0, 28, .45), var(--sh-m); }
.rs-tablecard--gap { margin-top: clamp(40px, 4.5vw, 64px); }
/* Each table names itself in its own header: what it compares, in one line, and (the tools table) its key. The cost
   note closes the first card, centred in its footer. */
.rs-tc-head { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 18px; padding: 26px 28px 32px; border-bottom: 1px solid var(--line-2);
  border-radius: var(--r-l) var(--r-l) 0 0; background: linear-gradient(180deg, #fff 0%, #fffafb 100%); }
.rs-tc-ico { display: grid; place-items: center; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 15px; background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff; box-shadow: 0 14px 28px -12px rgba(255, 0, 61, .6); }
.rs-tc-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.rs-tc-title { min-width: 0; }
.rs-tc-title h3 { margin: 0; color: var(--ink); font-size: clamp(1.3rem, 1.7vw, 1.55rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.rs-tc-title p { margin: 5px 0 0; color: var(--ink-3); font-size: .92rem; font-weight: 300; }
.rs-tc-head .rs-legend { margin: 0 0 0 auto; }
.rs-tc-foot { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; padding: 16px 28px; border-top: 1px solid var(--line-2);
  border-radius: 0 0 var(--r-l) var(--r-l); background: var(--bg-2); color: var(--ink-3); font-size: .8rem; font-weight: 300; line-height: 1.55; text-align: center; }
.rs-tc-foot svg { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }
.rs-tbl { width: 100%; border-collapse: separate; border-spacing: 0; color: var(--ink-2); font-size: .95rem; table-layout: fixed; }
.rs-tbl col.rs-c0 { width: 31%; }
.rs-tbl th, .rs-tbl td { padding: 20px 28px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line-2); line-height: 1.4; }
.rs-tbl tbody tr:last-child > * { border-bottom: 0; }
.rs-tbl tbody tr:not(.rs-grp):hover > * { background-color: #fffafb; }
.rs-tbl thead th { position: relative; padding-top: 34px; padding-bottom: 24px; vertical-align: bottom; background: #fff; border-bottom-color: var(--line); }
.rs-tbl tbody tr:last-child > :first-child { border-bottom-left-radius: var(--r-l); }
.rs-tbl tbody tr:last-child > :last-child { border-bottom-right-radius: var(--r-l); }
.rs-tbl tbody th { color: var(--ink); font-size: .92rem; font-weight: 500; }
.rs-tbl td small { display: block; margin-top: 4px; color: var(--ink-3); font-size: .78rem; font-weight: 300; }
.rs-tbl td b { color: var(--ink); font-weight: 600; }
.rs-tbl .qm { background: #fff6f8; }
.rs-tbl thead .qm { background: linear-gradient(180deg, #ffe9ef 0%, #fff6f8 100%); box-shadow: inset 0 3px 0 var(--brand); }
.rs-tbl tbody tr:not(.rs-grp):hover > .qm { background-color: #fff0f4; }
.rs-colname { display: flex; align-items: center; gap: 12px; color: var(--ink); font-size: 1.08rem; font-weight: 600; white-space: nowrap; }
.rs-wm { color: var(--ink); font-weight: 700; letter-spacing: -.02em; }
.rs-wm span { color: var(--brand); }
.rs-badge { position: absolute; top: -13px; left: 28px; padding: 6px 12px; border-radius: 999px; box-shadow: 0 10px 22px -10px rgba(255, 0, 61, .7); background: linear-gradient(100deg, var(--brand) 8%, var(--brand-2) 92%); color: #fff;
  font-size: .64rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.rs-colmark { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; color: #fff; font-size: .58rem; font-weight: 700; box-shadow: 0 0 0 1px var(--line); }
.rs-colmark img { width: 19px; height: 19px; }
.rs-colmark--qm { background: linear-gradient(135deg, var(--brand), var(--brand-2)); font-size: .82rem; box-shadow: none; }
.rs-colmark--dd { background: #fff; }
.rs-colmark--ue { background: #06c167; }
.rs-good { color: #12a865 !important; font-size: 1.4rem; font-weight: 700 !important; letter-spacing: -.02em; }
.rs-cost { color: var(--brand) !important; font-size: 1.08rem; font-weight: 600 !important; }
.rs-grp > th { padding-top: 14px; padding-bottom: 14px; background: var(--bg-2) !important; color: var(--ink-3) !important; font-size: .7rem !important; font-weight: 600 !important;
  letter-spacing: .12em; text-transform: uppercase; }
.rs-st { display: inline-flex; align-items: flex-start; gap: 9px; color: var(--ink); font-size: .9rem; font-weight: 500; line-height: 1.35; }
.rs-st::before { content: ""; flex: 0 0 auto; width: 20px; height: 20px; margin-top: -1px; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: 12px; }
.rs-st--yes::before { background-color: #12a865; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.rs-st--extra { color: #8a5300; }
.rs-st--extra::before { background-color: #fde8c4; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 2.8v6.4M2.8 6h6.4' fill='none' stroke='%238a5300' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E"); }
.rs-st--part { color: var(--ink-2); }
.rs-st--part::before { background-color: #f1ecef; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' fill='none' stroke='%23574c55' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.rs-st--no { color: var(--ink-3); font-weight: 400; }
.rs-st--no::before { background-color: #f4f0f2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 3.5l5 5M8.5 3.5l-5 5' fill='none' stroke='%238b8189' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
/* The long feature table keeps its column heads in view under the site header. */
.rs-tbl--features thead th { position: sticky; top: 70px; z-index: 3; }
.rs-tbl--features.is-stuck .rs-badge { opacity: 0; }
.rs-legend { display: flex; flex-wrap: wrap; gap: 10px 24px; list-style: none; margin: -4px 0 18px; padding: 0; }
.rs-legend .rs-st { font-size: .84rem; }
.rs-vs { display: none; }
.rs-save { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: 28px 40px; margin-top: clamp(48px, 5vw, 72px);
  padding: 36px 44px; border-radius: var(--r-l); background: #fff; border: 1px solid var(--line-2); box-shadow: var(--sh-m); }
.rs-save > * { min-width: 0; }
.rs-save-side p { margin: 0 0 8px; color: var(--ink-2); font-size: .92rem; font-weight: 300; }
.rs-save-big { display: flex; align-items: baseline; gap: 10px; color: var(--ink); font-size: clamp(2.2rem, 3.6vw, 3.4rem); font-weight: 700; letter-spacing: -.045em; line-height: 1;
  font-variant-numeric: tabular-nums; }
.rs-save-big small { color: var(--ink-3); font-size: .95rem; font-weight: 400; letter-spacing: 0; }
.rs-save-big--qm { background: linear-gradient(100deg, var(--brand) 8%, var(--brand-2) 92%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.rs-save-big--qm small { -webkit-text-fill-color: var(--ink-3); }
.rs-save-amt { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.rs-save-range { display: block; width: min(100%, 320px); height: 6px; margin: 4px 0 18px; border-radius: 6px; cursor: pointer; -webkit-appearance: none; appearance: none;
  background: linear-gradient(90deg, var(--brand) 0 var(--p, 14%), var(--line-2) var(--p, 14%)); }
.rs-save-range::-webkit-slider-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--brand); box-shadow: 0 4px 12px -4px rgba(255, 0, 61, .6); -webkit-appearance: none; appearance: none; }
.rs-save-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--brand); box-shadow: 0 4px 12px -4px rgba(255, 0, 61, .6); }
.rs-save-range:focus-visible { outline: 2px solid var(--brand); outline-offset: 6px; }
.rs-save-vs { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink-3); font-size: .74rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; }

/* ---- How it works ------------------------------------------------------------------------------------------------ */
.rs-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; list-style: none; margin: 0; padding: 0; }
.rs-step { position: relative; display: flex; flex-direction: column; padding: 14px 14px 30px; border-radius: var(--r-l); background: #fff; border: 1px solid var(--line-2);
  box-shadow: var(--sh-m); transition: transform .35s ease, box-shadow .35s ease; }
.rs-step:hover { transform: translateY(-6px); box-shadow: var(--sh-l); }
.rs-step:not(:last-child)::after { content: ""; position: absolute; top: 30%; right: -28px; z-index: 2; width: 28px; height: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23ff003d' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat; }
.rs-step-vis { position: relative; display: flex; flex-direction: column; aspect-ratio: 16 / 10.5; overflow: hidden; border-radius: 18px; background: var(--bg-2); border: 1px solid var(--line-2); }
.rs-step-vis > img { flex: 1; min-height: 0; width: 100%; object-fit: cover; object-position: 50% 0; }
.rs-bar { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; height: 30px; padding: 0 12px; background: #fff; border-bottom: 1px solid var(--line-2); color: var(--ink-3); font-size: .68rem; }
.rs-bar i { width: 8px; height: 8px; border-radius: 50%; background: #e6dfe3; }
.rs-bar i:first-child { background: #ff5f57; } .rs-bar i:nth-child(2) { background: #febc2e; } .rs-bar i:nth-child(3) { background: #28c840; }
.rs-bar span { margin-left: 8px; }
.rs-step-vis--inst { justify-content: center; background: linear-gradient(180deg, #fff 0%, var(--bg-2) 100%); }
.rs-inst { padding: 22px 26px; }
.rs-inst-h { margin: 0 0 12px; color: var(--ink-3); font-size: .8rem; font-weight: 300; }
.rs-inst-h b { color: var(--ink); font-weight: 600; }
.rs-inst ul { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.rs-inst li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line-2); color: var(--ink-3);
  font-size: .86rem; transition: color .4s, border-color .4s, box-shadow .4s; }
.rs-inst li i { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); transition: background .3s, border-color .3s; }
.rs-inst li.is-done { color: var(--ink); box-shadow: var(--sh-s); }
.rs-inst li.is-done i { border-color: #12a865; background: #12a865 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.rs-inst li.is-done:last-child { border-color: rgba(18, 168, 101, .4); background: #f0fbf5; }
.rs-step-n { margin: 26px 12px 8px; color: var(--brand); font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.rs-step h3 { margin: 0 12px 10px; color: var(--ink); font-size: clamp(1.3rem, 1.7vw, 1.55rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; }
.rs-step p { margin: 0 12px; color: var(--ink-2); font-size: .95rem; font-weight: 300; line-height: 1.65; }
.rs-step p b { color: var(--ink); font-weight: 600; }
.rs-pill { align-self: flex-start; margin: 20px 12px 0; padding: 6px 12px; border-radius: 999px; background: #fff0f3; color: var(--brand); font-size: .78rem; font-weight: 600; }
.rs-band { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 28px; margin-top: 28px; padding: 22px 28px; border-radius: var(--r-m);
  background: var(--bg-2); border: 1px solid var(--line-2); }
.rs-band p { margin: 0; color: var(--ink-2); font-size: 1.02rem; font-weight: 300; }
.rs-band b { color: var(--ink); font-weight: 600; }

/* ---- Orders from everywhere -------------------------------------------------------------------------------------- */
/* Five channel cards, a gutter the wires cross, the kitchen board. restaurant.js draws each wire from its card's edge
   to the board, so they meet the cards wherever the layout puts them. */
.rs-flow { position: relative; display: grid; grid-template-columns: minmax(0, .82fr) 168px minmax(0, 1.2fr); align-items: center; }
.rs-flow > .rs-chan, .rs-flow > .rs-board { position: relative; z-index: 1; }
.rs-flow > .rs-board { grid-column: 3; }
.rs-chan { display: grid; gap: 20px; list-style: none; margin: 0; padding: 0; }
.rs-chan li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-m); background: #fff; border: 1px solid var(--line-2); box-shadow: var(--sh-s);
  transition: transform .3s ease, box-shadow .3s ease; }
.rs-chan li:hover { transform: translateX(6px); box-shadow: var(--sh-m); }
.rs-chan-ico { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: #fff0f3; color: var(--brand); }
.rs-chan-ico svg { width: 22px; height: 22px; }
.rs-chan-ico--ue { background: #06c167; color: #fff; font-size: .62rem; font-weight: 700; }
.rs-chan li > span:last-child { display: grid; line-height: 1.35; }
.rs-chan b { color: var(--ink); font-size: .95rem; font-weight: 600; }
.rs-chan small { color: var(--ink-3); font-size: .8rem; font-weight: 300; }
.rs-wires { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rs-wires path { fill: none; stroke: rgba(255, 0, 61, .28); stroke-width: 2; stroke-linecap: round; }
.rs-wires .rs-port { fill: #fff; stroke: var(--brand); stroke-width: 2; }
.rs-wires .rs-pulse { fill: var(--brand); filter: drop-shadow(0 0 5px rgba(255, 0, 61, .75)); }
.rs-board { align-self: center; margin: 0; overflow: hidden; border-radius: var(--r-l); background: #fff; border: 1px solid var(--line-2); box-shadow: var(--sh-l); }
.rs-board > img { display: block; width: 100%; height: auto; }
.rs-board figcaption { padding: 16px 20px; border-top: 1px solid var(--line-2); color: var(--ink-2); font-size: .88rem; font-weight: 300; }
.rs-board figcaption b { color: var(--ink); font-weight: 600; }

/* ---- Cards (A.I, support) ------------------------------------------------------------------------------------------ */
.rs-trio { display: grid; gap: 24px; }
.rs-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rs-card { margin: 0; padding: 30px 28px; border-radius: var(--r-l); background: #fff; border: 1px solid var(--line-2); box-shadow: var(--sh-m); transition: transform .35s ease, box-shadow .35s ease; }
.rs-card:hover { transform: translateY(-6px); box-shadow: var(--sh-l); }
.rs-card-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff;
  box-shadow: 0 14px 28px -12px rgba(255, 0, 61, .6); }
.rs-card-ico svg { width: 24px; height: 24px; }
.rs-card h3 { margin: 22px 0 10px; color: var(--ink); font-size: 1.18rem; font-weight: 700; letter-spacing: -.025em; }
.rs-card p { margin: 0; color: var(--ink-2); font-size: .94rem; font-weight: 300; line-height: 1.65; }
.rs-card p b { color: var(--ink); font-weight: 600; }
.rs-card ul { display: grid; gap: 8px; list-style: none; margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line-2); }
.rs-card li { position: relative; padding-left: 26px; color: var(--ink); font-size: .88rem; }
.rs-card li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff0f3
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23ff003d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
/* Support as one grid: the photo of service on the floor with the team's hours on it, the four promises beside it, the
   releases and the review under them. */
.rs-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.rs-bento > * { min-width: 0; }
.rs-bento-photo { position: relative; grid-column: 1 / 7; grid-row: 1 / 3; min-height: 440px; margin: 0; overflow: hidden; border-radius: var(--r-l); background: var(--ink); box-shadow: var(--sh-l); }
.rs-bento-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.rs-bento-photo:hover img { transform: scale(1.04); }
.rs-bento-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(15, 10, 18, 0) 50%, rgba(15, 10, 18, .55) 100%); }
.rs-bento-photo figcaption { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 1; }
.rs-bento-tile { grid-column: span 3; padding: 26px 24px; }
.rs-bento-tile .rs-card-ico { width: 46px; height: 46px; border-radius: 13px; }
.rs-bento-tile h3 { margin: 18px 0 8px; }
.rs-bento-tile p { font-size: .9rem; }
.rs-bento .rs-releases { grid-column: span 7; }
.rs-bento .rs-quote { grid-column: span 5; }
.rs-card-h { margin: 0 0 22px; color: var(--brand); font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.rs-rel { position: relative; display: flex; justify-content: space-between; list-style: none; margin: 0; padding: 0; }
.rs-rel::before { content: ""; position: absolute; left: 12px; right: 12px; top: 11px; height: 2px; background: linear-gradient(90deg, #12a865 0 78%, var(--line) 78%); }
.rs-rel li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 4px; min-width: 24px; padding: 0; }
.rs-rel li::before { content: ""; position: static; width: 14px; height: 14px; margin: 4px 0; border-radius: 50%; background: #12a865; box-shadow: 0 0 0 4px #fff; }
.rs-rel li.is-now::before { width: 22px; height: 22px; margin: 0; background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 0 0 4px #fff, 0 0 0 9px rgba(255, 0, 61, .14); }
.rs-rel li.is-next::before { background: #fff; border: 2px dashed var(--ink-3); }
.rs-rel b { color: var(--ink); font-size: .85rem; font-weight: 600; }
.rs-rel span { color: var(--ink-3); font-size: .64rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.rs-rel li.is-now b, .rs-rel li.is-now span { color: var(--brand); }
.rs-rel-note { margin: 22px 0 0 !important; }
.rs-hours { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0; padding: 14px 18px; border-radius: 18px; background: rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--sh-m); font-size: .9rem; }
.rs-hours svg { width: 24px; height: 24px; fill: none; stroke: var(--brand); stroke-width: 1.75; stroke-linecap: round; }
.rs-hours > span { display: grid; line-height: 1.35; }
.rs-hours > span b { color: var(--ink); font-weight: 600; }
.rs-hours a { margin-left: auto; display: inline-flex; gap: 6px; color: var(--brand); font-weight: 600; text-decoration: none; }
.rs-hours a:hover { text-decoration: underline; }
.rs-quote { display: flex; flex-direction: column; }
.rs-quote blockquote { flex: 1; margin: 14px 0 0; color: var(--ink); font-size: clamp(1.1rem, 1.6vw, 1.32rem); font-weight: 500; line-height: 1.5; letter-spacing: -.01em; }
.rs-quote blockquote::before { content: "\201C"; display: block; margin-bottom: 4px; color: var(--brand); font-size: 3.2rem; font-weight: 700; line-height: .7; }
.rs-quote blockquote { font-size: clamp(1rem, 1.25vw, 1.1rem); font-weight: 400; line-height: 1.6; }
.rs-quote blockquote b { display: block; margin-bottom: 8px; font-size: clamp(1.15rem, 1.6vw, 1.35rem); font-weight: 700; line-height: 1.3; }
.rs-quote figcaption { margin-top: 18px; color: var(--ink-3); font-size: .82rem; font-weight: 300; }
.rs-faq-go { text-decoration: none; color: inherit; }

/* ---- Narrower screens ------------------------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .rs-tabs button:not(.is-on) { flex: 0 0 auto; padding: 0 15px; }
  .rs-tabs button:not(.is-on) .rs-tab-t { max-width: 0; opacity: 0; }
  .rs-tabs { justify-content: space-between; }
  .rs-tabs button:not(.is-on) { gap: 0; }
  .rs-tabs button.is-on { flex: 0 0 auto; padding: 0 18px; }
}
@media (max-width: 1180px) {
  .rs-proofbar-in { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .rs-proofbar-rated { justify-items: center; padding: 0; border: 0; }
  .rs-logos { width: 100%; }
  .rs-tc-head .rs-legend { flex-basis: 100%; margin: 4px 0 0; }
  .rs-bento-photo { grid-column: 1 / -1; grid-row: auto; min-height: 380px; }
  .rs-bento-tile { grid-column: span 6; }
  .rs-save { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .rs-save-cta { grid-column: 1 / -1; justify-self: center; }
}
@media (max-width: 1020px) {
  .rs-hero-in { grid-template-columns: minmax(0, 1fr); }
  .rs-live { display: none; }
  .rs-steps { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin-inline: auto; }
  .rs-step:not(:last-child)::after { top: auto; bottom: -28px; right: 50%; transform: translateX(50%) rotate(90deg); }
  .rs-flow { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .rs-wires { display: none; }
  .rs-flow > .rs-board { grid-column: auto; }
  .rs-trio { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
  .rs-bento .rs-releases, .rs-bento .rs-quote { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .rs-hero { min-height: 0; }
  .rs-hero-in { padding-top: 64px; }
  .rs-hero h1 { font-size: clamp(2.3rem, 10.5vw, 3rem); }
  .rs-feat { min-height: 8.4em; }
  .rs-cta .btn { width: 100%; justify-content: center; }
  .rs-hero-bar { gap: 6px; padding: 6px; border-radius: 20px; }
  .rs-tabs { overflow-x: auto; scroll-snap-type: x mandatory; }
  .rs-tabs button { scroll-snap-align: start; height: 48px; }
  .rs-tabs button:not(.is-on) { padding: 0 13px; }
  .rs-arrows { padding-left: 6px; }
  .rs-arrow { width: 42px; height: 44px; }
  .rs-proofbar-in { padding-block: 26px; }
  .rs-proofbar-rated p { white-space: normal; justify-content: center; text-align: center; }
  .rs-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rs-logos li { height: 48px; gap: 9px; padding: 0 12px; font-size: .8rem; border-radius: 14px; }
  .rs-logos li img { height: 22px; }
  .rs-mark { width: 24px; height: 24px; font-size: .5rem; }
  /* Phones: the table compares Quickmunch with one app at a time, chosen above it. */
  .rs-vs { display: flex; gap: 4px; margin: 14px; padding: 4px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line-2); }
  .rs-vs button { flex: 1; padding: 9px 6px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
  .rs-vs button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: var(--sh-s); }
  .rs-tablecard[data-vs="dd"] :is(.ue, .rs-c-ue), .rs-tablecard[data-vs="ue"] :is(.dd, .rs-c-dd) { display: none; }
  .rs-tbl col.rs-c0 { width: 33%; }
  .rs-tbl th, .rs-tbl td { padding: 14px 10px; font-size: .82rem; }
  .rs-tbl th:first-child, .rs-tbl td:first-child { padding-left: 14px; }
  .rs-tbl thead th { padding-top: 18px; }
  .rs-colname { flex-direction: column; align-items: flex-start; font-size: .86rem; gap: 6px; white-space: normal; }
  .rs-colmark { width: 26px; height: 26px; }
  .rs-badge { display: none; }
  .rs-good { font-size: 1.15rem; }
  .rs-cost { font-size: .95rem; }
  .rs-st { font-size: .82rem; gap: 7px; }
  .rs-st::before { width: 18px; height: 18px; background-size: 11px; }
  .rs-save { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 30px 22px; }
  .rs-save-big { justify-content: center; }
  .rs-save-cta, .rs-save-cta .btn { width: 100%; justify-content: center; }
  .rs-bento { gap: 14px; }
  .rs-bento-photo { min-height: 300px; }
  .rs-bento-photo figcaption { left: 10px; right: 10px; bottom: 10px; }
  .rs-bento-tile { grid-column: 1 / -1; }
  .rs-tc-head { padding: 20px 18px 26px; gap: 12px 14px; }
  .rs-tc-ico { width: 44px; height: 44px; border-radius: 13px; }
  .rs-tc-foot { padding: 14px 18px; text-align: left; }
  .rs-card { padding: 26px 22px; }
  .rs-hours a { margin-left: 0; }
  .rs-band { padding: 22px; }
  .rs-band .btn { width: 100%; justify-content: center; }
  .rs-buybar .buy-count-t { display: none; }
  .rs-buybar-on .to-top { margin-bottom: 76px; }
}
@media (max-width: 560px) {
  .rs-buybar { bottom: 10px; width: calc(100vw - 20px); }
  .rs-buybar-in { justify-content: space-between; padding: 8px 8px 8px 18px; }
  .rs-buybar .buy-count { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rs-slide img, .rs-feat *, .rs-live * { transition: none !important; animation: none !important; }
  .rs-buy::after { display: none; }
  .rs-buybar, .rs-buybar.is-on { transition: none; }
  .rs-tabs button.is-on::after { animation: none; transform: scaleX(1); }
  .rs-tab-t { transition: none; }
  .js .rs-reveal { opacity: 1; transform: none; transition: none; }
  .rs-wires .rs-pulse { display: none; }
}

/* ---- Backgrounds. The page alternates white, a warm blush and the ink band, the way index alternates its bands; the
   films and the red social band keep their own. The comparison sits on a soft stage so its tables don't float in white. */
:root { --rs-blush: linear-gradient(180deg, #fff6f8 0%, #fdeef2 100%); }
#compare { background: radial-gradient(1100px 620px at 90% 14%, rgba(255, 0, 61, .07), transparent 70%),
  radial-gradient(900px 700px at 2% 62%, rgba(255, 77, 109, .08), transparent 70%), linear-gradient(180deg, #fff 0%, #fdf2f5 52%, #fff 100%); }
#compare::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .75;
  background: radial-gradient(circle at 1px 1px, rgba(15, 10, 18, .1) 1px, transparent 1.6px) 0 0 / 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 76%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 76%, transparent 100%); }
#compare > .wrap { position: relative; z-index: 1; }
#everywhere { background: radial-gradient(900px 520px at 96% 40%, rgba(255, 0, 61, .06), transparent 70%), var(--bg-2); }
#pos, #kitchen, #couriers, #catering { background: var(--rs-blush); }
#ai { background: radial-gradient(900px 520px at 92% 8%, rgba(255, 0, 61, .08), transparent 70%), var(--rs-blush); }
.rs-blush { background: radial-gradient(900px 520px at 92% 0%, rgba(255, 0, 61, .07), transparent 70%), linear-gradient(180deg, #fff7f9 0%, #fff 100%); }

/* The ink band (index's reviews band): how it works, white cards on the dark. */
.rs-ink { color: #fff; background: radial-gradient(760px 420px at 6% 108%, color-mix(in srgb, var(--brand) 42%, transparent), transparent 70%),
  radial-gradient(680px 380px at 96% -12%, color-mix(in srgb, var(--brand-2) 30%, transparent), transparent 70%),
  radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .07) 1px, transparent 1.5px) 0 0 / 22px 22px, linear-gradient(135deg, var(--ink) 0%, #2a0c17 100%); }
.rs-ink .display { color: #fff; }
.rs-ink .idx { color: rgba(255, 255, 255, .6); }
.rs-ink .idx::after { background: rgba(255, 255, 255, .2); }
.rs-ink .sub { color: rgba(255, 255, 255, .74); }
.rs-ink .rs-head .sub b { color: #fff; }
.rs-ink .rs-hl { color: #fff; background: linear-gradient(transparent 62%, rgba(255, 0, 61, .55) 62% 94%, transparent 94%); }
.rs-ink .rs-step { border-color: transparent; box-shadow: 0 34px 70px -34px rgba(0, 0, 0, .8); }
.rs-ink .rs-band { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); }
.rs-ink .rs-band p { color: rgba(255, 255, 255, .78); }
.rs-ink .rs-band b { color: #fff; }

/* The reviews band sits straight on the commission band: no air between them, the band at full width, and index's
   Codester tag riding the seam above both (the section is lifted over the film band). */
#rated { z-index: 3; padding-block: 0; }
#ratedBand { clip-path: none !important; }

/* ---- The multi-location page ---------------------------------------------------------------------------------------- */
/* The live panel's group report: takings per branch as bars, the total under them. */
.rs-bars { padding: 16px 18px; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .55); }
.rs-bars-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) 62px; align-items: center; gap: 12px; padding: 8px 0; font-size: .86rem; font-weight: 500; }
.rs-bars-row i { height: 8px; overflow: hidden; border-radius: 8px; background: var(--line-2); }
.rs-bars-row i b { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transition: width .8s cubic-bezier(.2, .7, .2, 1); }
.rs-bars-row em { font-style: normal; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.rs-bars-foot { display: flex; align-items: baseline; justify-content: space-between; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.rs-bars-foot small { color: var(--ink-3); font-size: .78rem; }
.rs-bars-foot b { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* One licence: the number of locations on the left, lit as tiles; what all of them cost on the right. */
.ml-calc { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: 40px; padding: 36px 40px; border-radius: var(--r-l);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.ml-calc > * { min-width: 0; }
.ml-calc-n { display: flex; align-items: baseline; gap: 12px; margin: 0; color: #fff; }
.ml-calc-n output { font-size: clamp(3rem, 6vw, 4.6rem); font-weight: 700; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.ml-calc-n span { color: rgba(255, 255, 255, .7); font-size: 1.1rem; font-weight: 300; }
.ml-range { width: 100%; margin: 20px 0 24px; background: linear-gradient(90deg, var(--brand) 0 var(--p, 14%), rgba(255, 255, 255, .18) var(--p, 14%)); }
.ml-tiles { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; }
.ml-tile { display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; border: 1px dashed rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .35);
  transition: background .25s, border-color .25s, color .25s, transform .25s; }
.ml-tile svg { width: 52%; height: 52%; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ml-tile.is-on { border-style: solid; border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .12); color: #fff; transform: translateY(-2px); }
.ml-tile.is-on:first-child { border-color: transparent; background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 12px 24px -12px rgba(255, 0, 61, .7); }
.ml-calc-r { padding: 30px; border-radius: 22px; background: #fff; color: var(--ink); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.ml-calc-r > p { margin: 0 0 8px; color: var(--ink-2); font-size: .92rem; font-weight: 300; }
.ml-calc-r .ml-per { margin: 12px 0 22px; }
.ml-per b { color: var(--ink); font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ml-calc-r .btn { width: 100%; justify-content: center; }

/* Every branch gets the whole system: one tile per tool, each opening its part of the restaurant page. */
.ml-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0 0 36px; padding: 0; }
.ml-tools a { display: flex; align-items: center; gap: 14px; height: 100%; padding: 20px 22px; border-radius: var(--r-m); background: #fff; border: 1px solid var(--line-2);
  box-shadow: var(--sh-s); color: var(--ink); text-decoration: none; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.ml-tools a:hover { transform: translateY(-4px); box-shadow: var(--sh-m); border-color: rgba(255, 0, 61, .25); }
.ml-tool-ico { display: grid; place-items: center; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; background: #fff0f3; color: var(--brand); }
.ml-tool-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ml-tools b { flex: 1; font-size: .98rem; font-weight: 600; line-height: 1.3; }
.ml-tools i { color: var(--brand); font-style: normal; transition: transform .2s; }
.ml-tools a:hover i { transform: translateX(3px); }
#roles { background: var(--rs-blush); }
/* The licence band's right side: the city at night with riders on their routes, faded into the ink on its left and
   bottom edges, so the heading keeps the dark and the calculator's glass shows the film through it. */
#onelicence, #earn, #clients { overflow: clip; }
#onelicence > .wrap, #earn > .wrap, #clients > .wrap { position: relative; z-index: 1; }
.ml-lic-film { position: absolute; top: 0; right: 0; bottom: 0; z-index: 0; width: 64%; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(180deg, #000 55%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(180deg, #000 55%, transparent 100%); mask-composite: intersect; }
.ml-lic-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; filter: saturate(1.1) brightness(.8); }
@media (max-width: 1020px) {
  .ml-calc { grid-template-columns: minmax(0, 1fr); padding: 28px; }
  .ml-lic-film { width: 100%; bottom: auto; height: 560px; }
  .ml-lic-film video { opacity: .38; }
  .ml-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ml-calc { padding: 20px; gap: 24px; }
  .ml-tiles { gap: 5px; }
  .ml-tile { border-radius: 8px; }
  .ml-calc-r { padding: 22px; }
  .ml-tools { grid-template-columns: minmax(0, 1fr); }
}

/* ---- The marketplace page ------------------------------------------------------------------------------------------ */
/* How the income is generated, worked out in the page: index's revenue model (premium.css .rev-*), out of its off-canvas
   and into a white panel on the ink band. Its own inset, no inner scrolling, the caution and the buy button in its foot. */
.rev-inline { --rev-pad: clamp(22px, 2.6vw, 40px); position: relative; overflow: hidden; border-radius: var(--r-l); background: #fff; color: var(--ink);
  box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .8), 0 30px 60px -40px rgba(255, 0, 61, .35); }
.rev-inline .rev-main { overflow: visible; border-top: 0; padding-top: var(--rev-pad); }
.rev-inline .rev-foot { margin-top: var(--rev-pad); }
@media (max-width: 1099px) { .rev-inline .rev-presets, .rev-inline .rev-hint { margin-left: 0; } }
@media (max-width: 620px) {
  .rev-inline { --rev-pad: 18px; }
  .rev-inline .money-ctl, .rev-inline .rev-price { flex-wrap: wrap; gap: 6px 12px; }
  .rev-inline .rev-ctls label, .rev-inline .rev-price label { width: 100%; }
  .rev-inline .rev-foot { flex-direction: column; align-items: stretch; }
  .rev-inline .rev-foot .btn { justify-content: center; }
  .rev-inline .rev-keep-of { flex: 1 0 100%; }
}

/* Four ways the platform earns: the model runs wider than the sections around it, out to the header's edges on a laptop. */
#earn > .wrap { max-width: 1600px; }

/* How the money moves, on a marketplace: one order followed across three cards - what the guest pays, what the operator
   keeps (brand red, like its share of the bar) and what the restaurant receives (ink) - joined by moving dashes. */
.mk-flow { padding: clamp(24px, 3vw, 40px); border-radius: var(--r-l); background: #fff; border: 1px solid var(--line-2); box-shadow: 0 40px 80px -48px rgba(110, 0, 28, .45), var(--sh-m); }
.mk-flow-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 5vw, 72px); list-style: none; margin: 0; padding: 0; }
.mk-node { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 26px 26px 24px; border-radius: 22px; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--ink); }
.mk-node:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: calc(-1 * clamp(40px, 5vw, 72px)); width: clamp(40px, 5vw, 72px); height: 3px; margin-top: -1.5px;
  background: repeating-linear-gradient(90deg, var(--brand) 0 8px, transparent 8px 14px); background-size: 14px 3px; animation: mkDash .7s linear infinite; }
.mk-node:not(:last-child)::before { content: ""; position: absolute; top: 50%; right: calc(-1 * clamp(40px, 5vw, 72px) - 2px); z-index: 1; width: 10px; height: 10px; margin-top: -5px;
  border-top: 3px solid var(--brand); border-right: 3px solid var(--brand); transform: rotate(45deg); }
@keyframes mkDash { to { background-position: 14px 0; } }
.mk-node-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #fff; border: 1px solid var(--line-2); color: var(--ink); }
.mk-node-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.mk-node-lab { margin-top: 20px; color: var(--ink-3); font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.mk-node-num { margin-top: 6px; font-size: clamp(2rem, 3.2vw, 2.8rem); font-weight: 700; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.mk-node small { margin-top: 10px; color: var(--ink-2); font-size: .86rem; font-weight: 300; line-height: 1.5; }
.mk-node--keep { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%); border-color: transparent; color: #fff; box-shadow: 0 24px 50px -24px rgba(255, 0, 61, .7); }
.mk-node--pass { background: var(--ink); border-color: transparent; color: #fff; box-shadow: 0 24px 50px -28px rgba(15, 10, 18, .8); }
.mk-node--keep .mk-node-ico, .mk-node--pass .mk-node-ico { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .2); color: #fff; }
.mk-node--keep .mk-node-lab, .mk-node--pass .mk-node-lab { color: rgba(255, 255, 255, .72); }
.mk-node--keep small, .mk-node--pass small { color: rgba(255, 255, 255, .82); }
.mk-flow-bar { display: flex; height: 12px; margin: clamp(26px, 3vw, 36px) 0 0; overflow: hidden; border-radius: 99px; background: var(--bg-2); }
.mk-flow-bar span { flex: 0 0 auto; transition: flex-basis .5s cubic-bezier(.4, 0, .2, 1); }
.mk-flow-keep { background: linear-gradient(90deg, var(--brand), var(--brand-2)); }
.mk-flow-pass { background: var(--ink); }
.mk-flow-ctl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px clamp(28px, 4vw, 64px); margin-top: 24px; }
.mk-flow-in { display: flex; align-items: center; gap: 16px; min-width: 0; }
.mk-flow-in > span { flex: 0 0 auto; width: 128px; color: var(--ink-2); font-size: .86rem; }
.mk-flow-in input { flex: 1; width: auto; min-width: 0; margin: 0; }
.mk-flow-in b { flex: 0 0 auto; min-width: 52px; color: var(--ink); font-size: .95rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.mk-flow-caps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 24px 0 0; padding: 0; }
.mk-flow-caps li { position: relative; padding: 18px 20px 18px 50px; border-radius: var(--r-m); background: #fff; border: 1px solid var(--line-2); color: var(--ink-2); font-size: .9rem; font-weight: 300; line-height: 1.45; }
.mk-flow-caps li::before { content: ""; position: absolute; left: 18px; top: 19px; width: 20px; height: 20px; border-radius: 50%; background: #fff0f3
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23ff003d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.mk-flow-caps b { color: var(--ink); font-weight: 600; }
@media (max-width: 1020px) {
  .mk-flow-steps { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .mk-node:not(:last-child)::after { top: auto; right: auto; bottom: -44px; left: 50%; width: 3px; height: 44px; margin: 0 0 0 -1.5px;
    background: repeating-linear-gradient(180deg, var(--brand) 0 8px, transparent 8px 14px); background-size: 3px 14px; animation-name: mkDashV; }
  .mk-node:not(:last-child)::before { top: auto; right: auto; bottom: -44px; left: 50%; margin: 0 0 0 -5px; transform: rotate(135deg); }
  .mk-flow-ctl { grid-template-columns: minmax(0, 1fr); }
  .mk-flow-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@keyframes mkDashV { to { background-position: 0 14px; } }
@media (max-width: 560px) {
  .mk-flow-in { flex-wrap: wrap; gap: 8px 12px; }
  .mk-flow-in > span { width: auto; flex: 1 1 auto; }
  .mk-flow-in input { flex: 1 1 100%; order: 3; }
  .mk-flow-caps { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .mk-node::after { animation: none !important; } }

/* ---- The franchise page ------------------------------------------------------------------------------------------- */
/* Royalties: the money-flow card (the franchisee's share in ink, the royalty in brand red), then the network's royalty. */
#royalty { overflow: clip; }
#royalty > .wrap { position: relative; z-index: 1; max-width: 1600px; }
.fr-net { margin-top: clamp(26px, 3vw, 36px); padding-top: clamp(22px, 2.6vw, 32px); border-top: 1px solid var(--line-2); }
.fr-net-h { margin: 0; color: var(--brand); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.fr-net .mk-flow-ctl { margin-top: 16px; }
.fr-net-out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
#royalty .mk-flow-in > span { width: 156px; }
.fr-net-out p { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0; padding: 18px 22px; border-radius: 18px; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--ink); }
.fr-net-out p:first-child { background: linear-gradient(135deg, var(--brand), var(--brand-2)); border-color: transparent; color: #fff; box-shadow: 0 20px 40px -22px rgba(255, 0, 61, .7); }
.fr-net-out span { font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.fr-net-out b { font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.fr-net-note { margin: 16px 0 0; padding-left: 14px; border-left: 3px solid var(--brand); color: var(--ink-2); font-size: .8rem; font-weight: 300; line-height: 1.6; }
.fr-net-note b { color: var(--brand); font-weight: 700; }
@media (max-width: 560px) { #royalty .mk-flow-in > span { width: auto; } .fr-net-out { grid-template-columns: minmax(0, 1fr); } .fr-net-out p { padding: 16px 18px; } }

/* ---- The developers page ------------------------------------------------------------------------------------------ */
/* Code is set in the landing's own Poppins, like everything else on it, on the ink of the landing's dark bands. */
.dv-code, .dv-code code, .dv-ide-tabs button, .dv-console-tabs button { font-family: inherit; }
.dv-code .dv-col { display: inline-block; min-width: 9.6em; }
.dv-code .dv-col--s { min-width: 4.4em; }
[data-tabset] [data-pane][hidden] { display: none !important; }
.dv-code { margin: 0; overflow-x: auto; color: #efe6ea; font-size: .84rem; font-weight: 400; line-height: 1.75; tab-size: 4; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.dv-code code { display: block; font: inherit; white-space: pre; }
.dv-code .p { color: #ff9ab4; }
.dv-code .s { color: #ffd59e; }
.dv-code .n { color: #9fe3b4; }
.dv-code .k { color: #ff5c86; }
.dv-code .f { color: #8fc8ff; }
.dv-code .c { color: rgba(255, 255, 255, .42); font-style: italic; }

/* The code: the copy on the left, the files in a code window on the right. */
.dv-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: clamp(40px, 5vw, 88px); }
.dv-split .rs-head { margin-bottom: 30px; }
.dv-split .venue-stat { margin: 0 0 26px; }
.dv-ide { position: relative; overflow: hidden; border-radius: var(--r-l); background: #150d14; box-shadow: 0 50px 90px -46px rgba(110, 0, 28, .6), 0 24px 48px -30px rgba(15, 10, 18, .5); }
.dv-ide-bar { display: flex; align-items: flex-end; gap: 18px; padding: 12px 16px 0; background: #1f141c; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.dv-dots { display: inline-flex; gap: 7px; padding-bottom: 14px; }
.dv-dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.dv-dots i:nth-child(2) { background: #febc2e; }
.dv-dots i:nth-child(3) { background: #28c840; }
.dv-ide-tabs { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.dv-ide-tabs button { position: relative; flex: 0 0 auto; padding: 10px 16px 13px; border: 0; border-radius: 10px 10px 0 0; background: transparent; color: rgba(255, 255, 255, .55);
  font-size: .8rem; font-weight: 500; line-height: 1; cursor: pointer; transition: color .15s, background .15s; }
.dv-ide-tabs button:hover { color: #fff; }
.dv-ide-tabs button.is-on { background: #150d14; color: #fff; }
.dv-ide-tabs button.is-on::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 2px; border-radius: 2px; background: var(--brand); }
.dv-ide .dv-code { min-height: 400px; padding: 22px 24px 24px 0; counter-reset: ln; }
.dv-ide .dv-code code { white-space: normal; }   /* the rows are blocks: the line breaks between them are not lines */
.dv-ide .dv-code .ln { position: relative; display: block; min-height: 1.75em; padding-left: 60px; white-space: pre; }
.dv-ide .dv-code .ln::before { counter-increment: ln; content: counter(ln); position: absolute; left: 0; width: 40px; color: rgba(255, 255, 255, .24); text-align: right; }
.dv-ide-foot { display: flex; gap: 20px; margin: 0; padding: 11px 20px; border-top: 1px solid rgba(255, 255, 255, .07); background: #1f141c; color: rgba(255, 255, 255, .5); font-size: .72rem; line-height: 1; }
.dv-ide-foot span:first-child::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #28c840; }

/* API and webhooks: the console on the left, the events and how delivery behaves on the right. */
.dv-api { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; gap: clamp(28px, 4vw, 64px); }
.dv-console { overflow: hidden; border-radius: var(--r-l); background: rgba(12, 5, 10, .78); border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.dv-console-tabs { display: flex; gap: 8px; padding: 14px; border-bottom: 1px solid rgba(255, 255, 255, .08); overflow-x: auto; scrollbar-width: none; }
.dv-console-tabs button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 8px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px;
  background: transparent; color: rgba(255, 255, 255, .78); font-size: .8rem; font-weight: 500; line-height: 1; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.dv-console-tabs button b { padding: 4px 7px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font-size: .66rem; font-weight: 700; letter-spacing: .04em; }
.dv-console-tabs button:hover { border-color: rgba(255, 255, 255, .3); color: #fff; }
.dv-console-tabs button.is-on { background: #fff; border-color: #fff; color: var(--ink); }
.dv-console-tabs button.is-on b { background: var(--brand); }
.dv-req { padding: 18px 22px; border-bottom: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); }
.dv-res-h { display: flex; align-items: center; gap: 12px; margin: 0; padding: 16px 22px 0; color: rgba(255, 255, 255, .55); font-size: .74rem; line-height: 1.2; }
.dv-ok { padding: 5px 9px; border-radius: 6px; background: rgba(40, 200, 64, .16); color: #84e3a0; font-weight: 700; }
.dv-res { min-height: 420px; padding: 12px 22px 24px; font-size: .8rem; }
.dv-side-h { margin: 0 0 14px; color: rgba(255, 255, 255, .6); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.dv-events { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 30px; padding: 0; list-style: none; }
.dv-events li { padding: 8px 11px; border-radius: 9px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); color: #fff; font-size: .76rem; line-height: 1; }
.dv-facts { display: grid; gap: 14px; margin: 0 0 30px; padding: 0; list-style: none; }
.dv-facts li { position: relative; padding-left: 32px; color: rgba(255, 255, 255, .74); font-size: .95rem; font-weight: 300; line-height: 1.5; }
.dv-facts li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--brand)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.dv-facts b { color: #fff; font-weight: 600; }

/* Extending it: one row per registry, what it takes on the left, the product's own lines on the right. */
.dv-ext { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.dv-ext li { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); grid-template-rows: auto auto 1fr; column-gap: clamp(28px, 4vw, 56px); align-items: start;
  padding: clamp(22px, 2.6vw, 32px); border-radius: var(--r-l); background: #fff; border: 1px solid var(--line-2); box-shadow: var(--sh-s); }
.dv-ext li > :not(.dv-snip) { grid-column: 1; }
.dv-ext h3 { margin: 18px 0 8px; color: var(--ink); font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.dv-ext p { margin: 0; color: var(--ink-2); font-size: .95rem; font-weight: 300; line-height: 1.6; }
.dv-ext p b { color: var(--ink); font-weight: 600; }
.dv-snip { grid-column: 2; grid-row: 1 / -1; align-self: center; padding: 20px 22px; border-radius: 16px; background: #150d14; font-size: .8rem; }

/* Client work: the multi-location page's licence calculator, with both sums in its card, and the install under it. */
.ml-calc-r .dv-cl-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line-2); color: var(--ink-2); font-size: .95rem; }
.dv-cl-row b { color: var(--ink); font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dv-cl-row--ext b { color: var(--brand); }
.ml-calc-r .dv-cl-save { margin: 18px 0 20px; padding: 12px 14px; border-radius: 12px; background: #fff0f3; color: var(--ink); font-size: .92rem; font-weight: 400; }
.dv-cl-save b { color: var(--brand); font-weight: 700; }
.ml-calc-r .dv-cl-save.is-reg { background: var(--bg-2); }
.dv-cl-save.is-reg b { color: var(--ink); }
.ml-calc-r .dv-cl-note { margin: 12px 0 0; color: var(--ink-3); font-size: .78rem; text-align: center; }
.dv-install { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 24px 0 0; padding: 0; list-style: none; }
.dv-install li { padding: 18px 20px; border-radius: var(--r-m); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .72); font-size: .9rem; font-weight: 300; line-height: 1.5; }
.dv-install b { display: block; margin-bottom: 2px; color: #fff; font-weight: 600; }

/* Four codebases: the tool tiles, a logo and a line each. */
.dv-eds a { align-items: flex-start; }
.dv-eds .ml-tool-ico img { width: 26px; height: 26px; }
.dv-ed-t { flex: 1; min-width: 0; }
.dv-ed-t b { display: block; }
.dv-ed-t small { display: block; margin-top: 4px; color: var(--ink-3); font-size: .84rem; font-weight: 300; line-height: 1.45; }

@media (max-width: 1100px) {
  .dv-split, .dv-api { grid-template-columns: minmax(0, 1fr); }
  .dv-ext li { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .dv-snip { grid-column: 1; grid-row: auto; margin-top: 20px; }
  .dv-install { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .dv-code { font-size: .74rem; }
  .dv-ide .dv-code, .dv-res { min-height: 0; }
  .dv-ide .dv-code .ln { padding-left: 46px; }
  .dv-ide .dv-code .ln::before { width: 30px; }
  .dv-install { grid-template-columns: minmax(0, 1fr); }
}

/* ---- The company pages (about, work with us, affiliates) ---------------------------------------------------------- */
/* The hero is the landing's film band, with the page's H1 at the section heading size. */
.pg-hero { min-height: clamp(460px, 64vh, 700px); }
.pg-hero .wrap { padding-block: clamp(60px, 8vw, 110px); }
.pg-hero .sub { max-width: 46ch; }
.pg-hero .hero-mark { color: rgba(255, 255, 255, .78); }
.pg-hero .rs-cta { margin-top: 30px; }
.af-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 34px 0 0; padding: 0; list-style: none; }
.af-facts li { display: flex; align-items: baseline; gap: 8px; padding: 12px 18px; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .74); font-size: .88rem; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.af-facts b { color: #fff; font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; }

/* How it works: four numbered cards. */
.af-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.af-steps li { position: relative; display: flex; flex-direction: column; padding: 28px 26px 26px; border-radius: var(--r-l); background: #fff; border: 1px solid var(--line-2); box-shadow: var(--sh-s); }
.af-n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff;
  font-size: 1.1rem; font-weight: 800; box-shadow: 0 12px 24px -10px rgba(255, 0, 61, .7); }
.af-steps h3 { margin: 20px 0 8px; color: var(--ink); font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.af-steps p { margin: 0; color: var(--ink-2); font-size: .95rem; font-weight: 300; line-height: 1.6; }
.af-steps p b { color: var(--ink); font-weight: 600; }
.af-steps p a { color: var(--brand); font-weight: 600; }
.af-steps code, .faq-a code { padding: 2px 7px; border-radius: 6px; background: #fff0f3; color: var(--brand); font-family: inherit; font-size: .9em; font-weight: 600; }
.af-go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px; color: var(--brand); font-size: .92rem; font-weight: 700; text-decoration: none; }
.af-go i { font-style: normal; transition: transform .2s; }
.af-go:hover i { transform: translateX(3px); }

/* Your 20% grows: the licence switch, a bar per price step (today in red, the list price in ink, the planned steps
   outlined), then the month at today's price and at V3.0's. */
.af-calc-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.af-calc.is-extended .lic-switch::before { transform: translateX(100%); background: linear-gradient(100deg, var(--brand) 8%, var(--brand-2) 92%); }
.af-note { margin: 0; color: var(--ink-3); font-size: .84rem; }
.af-ladder { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; gap: clamp(10px, 2vw, 28px); margin: 34px 0 0; padding: 0; list-style: none; }
.af-step { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; color: var(--ink); }
.af-earn { margin-bottom: 10px; font-size: clamp(1.05rem, 1.8vw, 1.5rem); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.af-bar { position: relative; display: block; width: 100%; height: clamp(150px, 18vw, 230px); }
.af-bar i { position: absolute; left: 16%; right: 16%; bottom: 0; height: var(--h, 30%); border-radius: 14px 14px 6px 6px; background: var(--ink);
  transition: height .6s cubic-bezier(.2, .7, .2, 1); }
.af-step.is-now .af-bar i { background: linear-gradient(180deg, var(--brand-2), var(--brand)); box-shadow: 0 18px 36px -14px rgba(255, 0, 61, .7); }
.af-step.is-plan .af-bar i { background: repeating-linear-gradient(135deg, #fff0f3 0 8px, #fff 8px 16px); border: 2px dashed color-mix(in srgb, var(--brand) 55%, #fff); }
.af-step.is-plan .af-earn { color: var(--brand); }
.af-v { margin-top: 12px; font-size: .92rem; font-weight: 700; }
.af-p { margin-top: 2px; color: var(--ink-3); font-size: .8rem; font-variant-numeric: tabular-nums; }
.af-ctl { grid-template-columns: minmax(0, 1fr); }
#grow .mk-flow-in > span { width: 190px; }

/* Your links: the username, then a row per edition with its link and a copy button. */
.af-links { padding: clamp(22px, 3vw, 36px); border-radius: var(--r-l); background: #fff; border: 1px solid var(--line-2); box-shadow: 0 40px 80px -48px rgba(110, 0, 28, .45), var(--sh-m); }
.af-user { display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.af-user span { color: var(--ink-2); font-size: .88rem; font-weight: 600; }
.af-user input { height: 52px; padding: 0 18px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--bg-2); color: var(--ink); font: inherit; font-size: 1rem; outline: 0;
  transition: border-color .15s, box-shadow .15s, background .15s; }
.af-user input:focus { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px rgba(255, 0, 61, .12); }
.af-list { display: grid; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.af-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 16px; border-radius: var(--r-m); background: var(--bg-2); border: 1px solid var(--line-2); }
.af-list .ml-tool-ico img { width: 26px; height: 26px; }
.af-ed { min-width: 0; }
.af-ed b { display: block; color: var(--ink); font-size: .98rem; font-weight: 600; }
.af-ed code { display: block; margin-top: 3px; overflow: hidden; color: var(--ink-3); font-family: inherit; font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
.af-ed code em { color: var(--brand); font-style: normal; font-weight: 600; }
.af-copy { min-width: 96px; justify-content: center; }
.af-copy.is-done { background: var(--brand); border-color: var(--brand); color: #fff; }
.af-hint { margin: 16px 0 0; color: var(--ink-3); font-size: .82rem; }
.af-res { margin-bottom: 0; }

@media (max-width: 1100px) { .af-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .af-ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 26px; }
  .af-bar { height: 120px; }
  .af-list li { grid-template-columns: auto minmax(0, 1fr); }
  .af-copy { grid-column: 1 / -1; width: 100%; }
}
@media (max-width: 560px) { .af-steps { grid-template-columns: minmax(0, 1fr); } #grow .mk-flow-in > span { width: auto; } }

/* The affiliate page's username row: the field on the left, the call to create a Codester account on the right. */
.af-user-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; }
.af-user-row .af-user { flex: 1 1 320px; }
.af-join { flex: 1 1 420px; display: flex; align-items: center; gap: 16px; max-width: 640px; padding: 14px 16px 14px 18px; border-radius: var(--r-m);
  background: #fff0f3; border: 1px solid rgba(255, 0, 61, .16); }
.af-join p { flex: 1; min-width: 0; margin: 0; color: var(--ink-2); font-size: .88rem; line-height: 1.45; }
.af-join p b { display: block; color: var(--ink); font-size: .98rem; font-weight: 700; }
.af-join .ml-tool-ico { background: #fff; }
.af-join .btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 560px) { .af-join { flex-wrap: wrap; } .af-join .btn { width: 100%; justify-content: center; } }

/* ---- About ------------------------------------------------------------------------------------------------------ */
/* The cards' lap: how far they reach up into the hero and down into the next section. */
:root { --ab-lap: clamp(130px, 12vw, 200px); }
.ab-flag-ico { display: inline-block; flex: 0 0 auto; width: 20px; height: 15px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }

/* The hero: the US flag over the film (above its dusk, under the words), turned a little away and rippling, faded out
   towards the words; room at the foot for the cards' upper half. */
.pg-hero.ab-hero { min-height: clamp(560px, 74vh, 820px); }
.ab-hero .wrap { padding-bottom: calc(var(--ab-lap) + 20px); }
.ab-flag { position: absolute; top: -4%; right: -10%; z-index: 1; width: min(66%, 1060px); aspect-ratio: 4 / 3; pointer-events: none; opacity: .42;
  transform: perspective(1400px) rotateY(-20deg) rotateZ(-5deg); transform-origin: right center;
  -webkit-mask-image: radial-gradient(110% 92% at 84% 26%, #000 26%, transparent 72%); mask-image: radial-gradient(110% 92% at 84% 26%, #000 26%, transparent 72%); }
.ab-flag img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ab-flag i { position: absolute; inset: 0;
  background: repeating-linear-gradient(100deg, rgba(10, 4, 8, 0) 0, rgba(10, 4, 8, .5) 110px, rgba(255, 255, 255, .18) 190px, rgba(10, 4, 8, 0) 260px);
  background-size: 520px 100%; animation: abRipple 8s linear infinite; }
@keyframes abRipple { to { background-position: 520px 0; } }

/* The companies: across the seam, half over the hero and half over the next section, above both. Solid ink, so the
   cards read on the film and on the blush alike. */
.ab-straddle { position: relative; z-index: 3; margin: calc(-1 * var(--ab-lap)) 0 calc(-1 * var(--ab-lap)); }
.ab-after { padding-top: calc(var(--sec-pt) + var(--ab-lap)); }
.ab-cos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.ab-cos a { display: flex; flex-direction: column; height: 100%; padding: clamp(24px, 2.6vw, 34px); border-radius: var(--r-l); color: #fff; text-decoration: none;
  background: radial-gradient(120% 80% at 100% 0%, rgba(255, 0, 61, .16), transparent 60%), linear-gradient(160deg, #22101a 0%, #12040a 100%);
  border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 40px 80px -34px rgba(18, 4, 10, .75), 0 10px 26px -12px rgba(18, 4, 10, .5);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.ab-cos a:hover { transform: translateY(-6px); border-color: rgba(255, 255, 255, .24); box-shadow: 0 50px 90px -34px rgba(18, 4, 10, .85), 0 14px 30px -12px rgba(255, 0, 61, .35); }
.ab-logo { display: flex; align-items: center; height: 64px; margin-bottom: 26px; }
.ab-logo img { display: block; width: auto; max-width: 100%; height: auto; max-height: 52px; }
/* Balanced by eye: the heavy Codester wordmark smaller, MetropolitanHost between, the light SlideSigma line full height. */
.ab-logo img[alt="Codester"] { max-height: 36px; }
.ab-logo img[alt="MetropolitanHost"] { max-height: 44px; }
.ab-role { align-self: flex-start; margin-bottom: 14px; padding: 6px 12px; border-radius: 999px; background: var(--brand); color: #fff;
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 10px 22px -10px rgba(255, 0, 61, .8); }
.ab-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 14px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .6); font-size: .82rem; }
.ab-stats b { margin-right: 4px; color: #fff; font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; }
.ab-d { color: rgba(255, 255, 255, .74); font-size: .95rem; font-weight: 300; line-height: 1.6; }
.ab-d b { color: #fff; font-weight: 600; }
.ab-go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 22px; color: #fff; font-size: .88rem; font-weight: 600; }
.ab-go i { font-style: normal; color: var(--brand-2); transition: transform .2s; }
.ab-cos a:hover .ab-go i { transform: translateX(3px); }

/* 01, the bento: the chef on the kitchen photo (tall), the updates, the support, the restaurant system (wide). */
.ab-bento { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.ab-b { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: clamp(24px, 2.4vw, 32px); border-radius: var(--r-l); background: #fff; border: 1px solid var(--line-2); box-shadow: var(--sh-s); }
.ab-b h3 { margin: 18px 0 8px; color: var(--ink); font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.ab-b p { margin: 0; color: var(--ink-2); font-size: .95rem; font-weight: 300; line-height: 1.6; }
.ab-b p b { color: var(--ink); font-weight: 600; }
.ab-b--chef { grid-row: span 2; justify-content: flex-end; min-height: 480px; background: #12040a; border: 0; isolation: isolate; }
.ab-b-photo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.08) brightness(.9); transition: transform .9s ease; }
.ab-b--chef::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, #12040a 0%, rgba(18, 4, 10, .78) 38%, rgba(18, 4, 10, .1) 72%); }
.ab-b--chef:hover .ab-b-photo { transform: scale(1.04); }
.ab-b--chef h3 { color: #fff; font-size: clamp(1.6rem, 2.5vw, 2.3rem); letter-spacing: -.03em; }
.ab-b--chef p { color: rgba(255, 255, 255, .8); }
.ab-b--chef p b { color: #fff; }
.ab-b--sys { grid-column: 2 / 4; }
.ab-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.ab-chips li { padding: 7px 13px; border-radius: 999px; background: #fff0f3; color: var(--brand); font-size: .82rem; font-weight: 600; }

/* 02, Brooklyn: the section stands on Google's map - night (inverted greys), tinted wine, faded under the copy, with
   Google's own corner chip lifted out of view and its attribution left clear at the foot - and a pulsing pin on the
   borough, placed by restaurant.js (aboutMap). */
.ab-mapsec { display: flex; align-items: center; min-height: clamp(600px, 48vw, 760px); overflow: clip; background: #120709; }
.ab-mapsec > .wrap { position: relative; z-index: 2; width: 100%; }
.ab-mapbg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #1b1416; }
.ab-mapbg iframe { position: absolute; left: 0; top: -56px; width: 100%; height: calc(100% + 56px); border: 0; pointer-events: none;
  filter: grayscale(1) invert(.92) contrast(.95) brightness(.8); }
.ab-mapbg::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: #b0002a; mix-blend-mode: color; opacity: .48; }   /* over the attribution too: it stays legible */
.ab-mapbg::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;   /* the whole section, the attribution's strip too */
  background: linear-gradient(90deg, #120709 0%, rgba(18, 7, 9, .94) 30%, rgba(18, 7, 9, .55) 52%, rgba(18, 7, 9, .22) 74%, rgba(18, 7, 9, .22) 100%),
              linear-gradient(0deg, rgba(18, 7, 9, .45), transparent 22%), linear-gradient(180deg, rgba(18, 7, 9, .55), transparent 22%); }
.ab-mapbg-pin { position: absolute; left: 72%; top: 50%; z-index: 2; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--brand); border: 3px solid #fff;
  box-shadow: 0 0 0 10px rgba(255, 0, 61, .22), 0 12px 26px rgba(0, 0, 0, .55); }
.ab-mapbg-pin::before, .ab-mapbg-pin::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 2px solid var(--brand); opacity: 0; animation: abPin 2.4s ease-out infinite; }
.ab-mapbg-pin::after { animation-delay: 1.2s; }
.ab-mapbg-pin b { position: absolute; left: 30px; top: 50%; display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 10px; background: #fff; color: var(--ink);
  font-size: .88rem; font-weight: 700; white-space: nowrap; transform: translateY(-50%); box-shadow: 0 14px 28px -10px rgba(0, 0, 0, .55); }
@keyframes abPin { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
.ab-mapcard { max-width: 560px; }
.ab-where { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ab-where li { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: var(--r-m); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ab-where p { margin: 0; }
.ab-where b { display: block; color: #fff; font-size: 1rem; font-weight: 700; }
.ab-where p span { color: rgba(255, 255, 255, .7); font-size: .9rem; font-weight: 300; }
.ab-mapcard .rs-cta { margin-top: 28px; }

@media (max-width: 1100px) {
  .ab-cos { grid-template-columns: minmax(0, 1fr); }
  .ab-straddle { margin-bottom: 0; }
  .ab-after { padding-top: var(--sec-pt); }
  .ab-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-b--chef { grid-column: 1 / -1; grid-row: auto; min-height: 380px; }
  .ab-b--sys { grid-column: 1 / -1; }
  .ab-flag { width: 110%; right: -34%; opacity: .3; }
  /* The map steps out from behind the copy: a band of its own under it, the pin in its middle. */
  .ab-mapsec { flex-direction: column-reverse; align-items: stretch; min-height: 0; }
  .ab-mapbg { position: relative; inset: auto; height: 380px; margin-top: 36px; }
  .ab-mapbg::before { background: linear-gradient(180deg, #120709 0%, transparent 26%), linear-gradient(0deg, rgba(18, 7, 9, .5), transparent 30%); }
}
@media (max-width: 560px) { .ab-bento { grid-template-columns: minmax(0, 1fr); } .ab-straddle { margin-top: calc(-1 * var(--ab-lap) + 40px); } }
@media (prefers-reduced-motion: reduce) { .ab-flag i, .ab-mapbg-pin::before, .ab-mapbg-pin::after { animation: none; } .ab-b-photo { transition: none; } }

/* ==========================================================================
   UNDER THE HOOD (under-the-hood.html). The sheet's own styles stay in premium.css, where index's kitchen wires share
   them. These are what the page adds: the gateway step in column 02, the "Run as" switch, the settle chip between the
   two money cards, the base row, a link on each part; then the sections that explain each stage.
   ========================================================================== */
/* The widths keep the page's hierarchy: the sheet is the page's main piece and runs the full width at the page gutter;
   the sections after it take the landing's wide step (1600, as the calculators on the other pages), a step inside it. */
#sheet > .wrap { max-width: none; }
#doors > .wrap, #life > .wrap, #money > .wrap, #signals > .wrap, #parts > .wrap { max-width: 1600px; }
#flowSheet [hidden] { display: none !important; }
.flow-wire.is-off { display: none; }

/* The step strip: the steps and the legend on one line, what is happening under them. */
.flow-say { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "steps legend" "text text"; align-items: center; gap: 10px 18px; }
.flow-steps { grid-area: steps; }
.flow-say-text { grid-area: text; padding-inline-start: 6px; }
.flow-legend { grid-area: legend; }

/* How you run it: the pricing page's licence switch (its styles are index's own), with three positions and larger. */
.uh-model-bar { margin-top: 30px; }
.lic-switch--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 6px; }
.lic-switch--3::before { top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / 3); }
.lic-switch--3 button { padding: 16px 34px; font-size: 1.04rem; }
.uh-model-bar[data-model="ow"] .lic-switch::before { transform: translateX(100%); }
.uh-model-bar[data-model="fr"] .lic-switch::before { transform: translateX(200%); }
.uh-model-bar .lic-which { font-size: .96rem; }
@media (max-width: 640px) {
  .uh-model-bar { margin-top: 24px; }
  .lic-switch--3 button { padding: 13px 12px; font-size: .9rem; }
}

/* 02: the order, then the gateways a card order passes through, then the board; room between them for the wire. */
#flowHub { margin-bottom: 12px; }
#flowPay { margin-bottom: 12px; }
.flow-pay-foot { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--line); font-size: .74rem; line-height: 1.45; color: var(--ink-3); }
.flow-pay-foot b { color: var(--ink-2); font-weight: 600; }

/* A part's own section: the arrow in the corner of its card. */
.flow-go { position: absolute; top: 12px; right: 12px; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  color: var(--ink-3); background: #fff; border: 1px solid var(--line); transition: color .2s ease, background .2s ease, border-color .2s ease; }
.flow-go svg { width: 13px; height: 13px; }
.flow-go:hover, .flow-go:focus-visible { color: #fff; background: var(--brand); border-color: var(--brand); }
.flow-card:has(> .flow-go) > .flow-card-h { padding-inline-end: 32px; }
.flow-rail .flow-go { position: static; flex: 0 0 auto; order: 3; }
.flow-kds-go { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.flow-kds-go:hover, .flow-kds-go:focus-visible { color: var(--brand-2); }

/* 04: the model's own page, the settle chip between the two cards, the wallet at rest when nothing is owed. */
.flow-settle { position: relative; z-index: 1; align-self: center; display: inline-flex; align-items: center; gap: 8px; margin: 8px 0; padding: 5px 14px 5px 5px;
  border-radius: 999px; background: #fff; border: 1px solid rgba(22,163,74,.3); font-size: .76rem; font-weight: 600; color: #15803d; white-space: nowrap;
  box-shadow: 0 10px 22px -16px rgba(22,163,74,.6); }
.flow-settle i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: #16a34a; }
.flow-settle svg { width: 14px; height: 14px; transition: transform .3s ease; }
.flow-settle.is-up svg { transform: rotate(180deg); }
.flow-settle.is-none { padding-inline-start: 14px; color: var(--ink-3); border-color: var(--line); box-shadow: none; }
.flow-settle.is-none i { display: none; }
.flow-wallet.is-idle .flow-wallet-card { filter: grayscale(.85); opacity: .5; }
.flow-split-note { margin: 6px 0 0; font-size: .68rem; line-height: 1.35; color: var(--ink-3); }

/* The dashboards and the operations agent sit under columns 03 and 04, which are shorter than the first two: columns 01
   and 02 run down beside them (two rows), so nothing is left as an empty corner and the money cards keep their size. */
.flow-base { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-self: start; }
@media (min-width: 1360px) {
  .flow-say { grid-row: 1; }
  .flow-col--in { grid-column: 1; grid-row: 2 / span 2; }
  .flow-col--core { grid-column: 2; grid-row: 2 / span 2; }
  .flow-col--out { grid-column: 3; grid-row: 2; }
  .flow-col--wallet { grid-column: 4; grid-row: 2; }
  .flow-base { grid-column: 3 / -1; grid-row: 3; }
  .flow-qsband { grid-row: 4; }
  .flow-rail { grid-row: 5; }
}

@media (max-width: 1359px) {
  .flow-say { grid-template-columns: minmax(0, 1fr); grid-template-areas: "steps" "text" "legend"; justify-items: start; }
  .flow-col--core .flow-stage { order: 4; } #flowHub { order: 5; } #flowPay { order: 6; } #flowKds { order: 7; } #flowVenue { order: 8; }
  .flow-col--out .flow-stage { order: 9; } #flowTell, #flowServed, #flowGuest, #flowDelivered, #flowCouriers { order: 10; }
  .flow-col--wallet .flow-stage { order: 11; } #flowWallet, #flowSettle, #flowIncome { order: 12; }
  #flowSettle { justify-self: start; }
  .flow-base { order: 13; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .flow-qsband { order: 14; }
  .flow-rail { order: 15; }
}

/* Quick Social, out and back: a band across the sheet (section 01), under the four columns and over the rail. Six cards
   in a loop (made, Quick Social, out; back, approved, on the page), the wires between them drawn by restaurant.js
   (qsLoop), a post going round; the page card feeds the storefront door (underHood). */
.flow-qsband { position: relative; z-index: 1; grid-column: 1 / -1; padding-top: 6px; }
/* The way back: the restaurant's page into "Orders come from", a solid brand wire with an arrow, and the card's badge. */
.flow-wire--back { stroke: color-mix(in srgb, var(--brand) 62%, transparent); stroke-width: 2; }
.flow-wire--back.is-hot { stroke: var(--brand); stroke-width: 3; }
#flowArrowBack path { fill: var(--brand); }
.flow-return { position: absolute; top: -12px; right: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; border-radius: 999px;
  font-style: normal; font-size: .68rem; font-weight: 700; color: var(--brand); background: #fff; border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
  box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--brand) 70%, transparent); transition: color .35s ease, background .35s ease, box-shadow .35s ease; }
.flow-return svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.flow-return.is-lit { color: #fff; background: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }
#flowChannels { transition: border-color .35s ease, box-shadow .35s ease; }
#flowChannels.is-back { border-color: color-mix(in srgb, var(--brand) 45%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 10%, transparent), 0 18px 40px -26px rgba(31, 11, 18, .35); }
.qsl-tag--back { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 35%, transparent); }
.flow-stage--qs { margin: 0 0 22px; }
.flow .qsl-card { border-radius: 20px; }
.qsl { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .78fr) minmax(0, 1.12fr); grid-template-areas: "make hub out" "page appr back";
  gap: 110px clamp(56px, 6vw, 96px); align-items: start; }
.qsl-wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.qsl-card { position: relative; z-index: 1; padding: 22px; border-radius: var(--r-l); background: #fff; border: 1px solid var(--line-2); box-shadow: 0 18px 40px -28px rgba(31, 11, 18, .35); }
.qsl-make { grid-area: make; } .qsl-out { grid-area: out; } .qsl-back { grid-area: back; } .qsl-approve { grid-area: appr; } .qsl-page { grid-area: page; }
.qsl-h { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.qsl-h i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-style: normal; font-size: .76rem; letter-spacing: 0; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.qsl-sub { margin: 14px 0 8px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.qsl-h + .qsl-sub { margin-top: 0; padding-top: 0; border-top: 0; }
.qsl-note { margin: 12px 0 0; font-size: .76rem; line-height: 1.45; color: var(--ink-3); }

/* 1, the post being made: four steps, lit one after another. */
.qsl-steps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.qsl-steps li, .qsl-src li { display: flex; align-items: center; gap: 12px; margin: 0; padding: 9px 10px; border-radius: 14px; border: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease; }
.qsl-steps i, .qsl-src li > i { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: var(--brand);
  background: color-mix(in srgb, var(--brand) 9%, #fff); transition: background .35s ease, color .35s ease; }
.qsl-steps svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.qsl-steps span, .qsl-src span, .qsl-queue span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.qsl-steps b, .qsl-src b, .qsl-queue b { font-size: .9rem; font-weight: 600; color: var(--ink); }
.qsl-steps small, .qsl-src small, .qsl-queue small { font-size: .74rem; color: var(--ink-3); }
.qsl-steps li.is-lit, .qsl-src li.is-lit { background: color-mix(in srgb, var(--brand) 5%, #fff); border-color: color-mix(in srgb, var(--brand) 30%, transparent); }
.qsl-steps li.is-lit i { color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-2)); }

/* Quick Social itself, between the post and the networks. */
.qsl-hub { position: relative; z-index: 1; grid-area: hub; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 20px 24px;
  border-radius: 26px; text-align: center; color: #fff; background: radial-gradient(260px 160px at 100% 0%, rgba(255, 255, 255, .16), transparent 70%), linear-gradient(140deg, var(--ink) 0%, #3a0f1d 100%);
  box-shadow: 0 30px 60px -30px rgba(15, 10, 18, .8); }
.qsl-hub-mark { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 4px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--brand) 90%, transparent); }
.qsl-hub-mark svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.qsl-hub b { font-size: 1.25rem; font-weight: 700; }
.qsl-hub small { max-width: 22ch; font-size: .78rem; line-height: 1.35; color: rgba(255, 255, 255, .72); }
.qsl-hub::after { content: ""; position: absolute; inset: -7px; border-radius: 32px; border: 2px solid color-mix(in srgb, var(--brand) 45%, transparent); opacity: 0; pointer-events: none; }
.qsl-hub.is-pulse::after { animation: flowPulse .9s ease-out; }

/* 2, the networks: each in its own colour, lit as the post lands. */
.qsl-nets { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.qsl-nets li { --c: #292929; display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 5px 11px 5px 5px; border-radius: 999px; background: #fff; border: 1px solid var(--line);
  font-size: .78rem; font-weight: 500; color: var(--ink-2); transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; }
.qsl-nets i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: var(--c); }
.qsl-nets svg { width: 13px; height: 13px; }
.qsl-nets li.is-lit { border-color: var(--c); color: var(--ink); transform: translateY(-1px); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 16%, transparent); }

/* 3, back from the guests: the eight sources. */
.qsl-src { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.qsl-src li { --c: var(--brand); padding: 7px 8px; gap: 10px; }
.qsl-src li > i { width: 32px; height: 32px; border-radius: 10px; color: var(--c); background: color-mix(in srgb, var(--c) 10%, #fff); }
.qsl-src li > i svg { width: 17px; height: 17px; }
.qsl-src .qsl-logo { background: var(--bg-2); }
.qsl-src .qsl-logo img { width: 20px; height: 20px; object-fit: contain; }
.qsl-src-link > i svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* 4, the approval queue: pending until someone approves it. */
.qsl-queue { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.qsl-queue li { display: flex; align-items: center; gap: 10px; margin: 0; padding: 9px 10px; border-radius: 14px; background: var(--bg-2); border: 1px solid transparent; transition: border-color .35s ease, background .35s ease; }
.qsl-queue img { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.qsl-st { margin-inline-start: auto; flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; font-style: normal; font-size: .7rem; font-weight: 700; color: #92400e; background: #fef3c7; transition: color .3s ease, background .3s ease; }
.qsl-st.is-on { color: #166534; background: #dcfce7; }
.qsl-queue li.is-lit { background: #fff; border-color: rgba(22, 163, 74, .4); }

/* 5, the restaurant's page: a small copy of its guest wall. */
.qsl-page-box { padding: 12px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); }
.qsl-url { margin: 0 0 10px; padding: 6px 10px; border-radius: 8px; font-size: .7rem; color: var(--ink-3); background: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qsl-page-t { display: flex; flex-direction: column; margin: 0 0 10px; line-height: 1.2; }
.qsl-page-t small { font-size: .7rem; color: var(--ink-3); }
.qsl-page-t b { font-size: 1rem; font-weight: 700; color: var(--ink); }
.qsl-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.qsl-wall figure { position: relative; margin: 0; overflow: hidden; aspect-ratio: 3 / 4; border-radius: 10px; background: #fff; transition: box-shadow .4s ease, transform .4s ease; }
.qsl-wall img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qsl-wall figcaption { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 999px; font-size: .62rem; font-weight: 600; color: var(--ink); background: rgba(255, 255, 255, .92); }
.qsl-rev { display: flex; flex-direction: column; gap: 4px; padding: 9px; border: 1px solid var(--line); }
.qsl-rev p { margin: 0; font-size: .72rem; line-height: 1.35; color: var(--ink); }
.qsl-rev .qsl-stars { font-size: .72rem; letter-spacing: .06em; color: #f59e0b; }
.qsl-rev small { margin-top: auto; font-size: .62rem; color: var(--ink-3); }
.qsl-wall figure.is-new { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--brand), 0 14px 26px -14px rgba(255, 0, 61, .7); }
.qsl-page .uh-model-go { margin-top: 14px; }

/* The two moments between the rows: what guests do, and what it brings. */
.qsl-tag { position: absolute; z-index: 2; left: 0; top: 0; margin: 0; padding: 7px 14px; border-radius: 999px; transform: translate(-50%, -50%); white-space: nowrap;
  font-size: .78rem; font-weight: 600; color: var(--ink-2); background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 24px -16px rgba(31, 11, 18, .5);
  transition: color .3s ease, border-color .3s ease; }
.qsl-tag.is-on { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 40%, transparent); }

@media (max-width: 1280px) and (min-width: 1101px) {
  .qsl { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr) minmax(0, 1fr); column-gap: 48px; }
  .qsl-src { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  .qsl { grid-template-columns: minmax(0, 1fr); grid-template-areas: "make" "hub" "out" "back" "appr" "page"; row-gap: 46px; }
  .qsl-hub { align-self: stretch; }
  #qslTagOut { left: 34px !important; transform: translate(-14px, -50%); }
  #qslTagBack { display: none; }
}
@media (max-width: 640px) {
  .qsl { row-gap: 54px; }
  .qsl-src { grid-template-columns: minmax(0, 1fr); }
  .qsl-card { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) { .qsl-steps li, .qsl-src li, .qsl-nets li, .qsl-queue li, .qsl-wall figure, .qsl-tag { transition: none; } }

/* 03 Ways in: a card per door, with when it is paid. */
.uh-doors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.uh-doors li { margin: 0; }
.uh-doors a, .uh-doors li > div { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 22px 22px 20px; border-radius: var(--r-l);
  background: #fff; border: 1px solid var(--line-2); box-shadow: var(--sh-s); color: inherit; text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.uh-doors a:hover { transform: translateY(-4px); box-shadow: var(--sh-m); border-color: rgba(255, 0, 61, .25); }
.uh-door-ico { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 6px; border-radius: 13px; background: #fff0f3; color: var(--brand); }
.uh-door-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.uh-door-ico--brand { overflow: hidden; background: none; }
.uh-door-ico--brand img { display: block; width: 100%; height: 100%; }
.uh-doors b { font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.uh-door-d { flex: 1; font-size: .88rem; line-height: 1.5; font-weight: 300; color: var(--ink-2); }
.uh-paid { align-self: flex-start; margin-top: 6px; padding: 5px 11px; border-radius: 999px; font-style: normal; font-size: .74rem; font-weight: 600; }
.uh-paid--first { color: #15803d; background: rgba(22, 163, 74, .1); }
.uh-paid--later { color: #b45309; background: rgba(245, 158, 11, .14); }
.uh-paid--either { color: #1d4ed8; background: rgba(59, 130, 246, .1); }
.uh-go { position: absolute; top: 22px; right: 22px; font-style: normal; color: var(--brand); transition: transform .2s ease; }
.uh-doors a:hover .uh-go { transform: translateX(3px); }
.uh-door--next > div { border-style: dashed; border-color: color-mix(in srgb, var(--ink) 18%, transparent); background: rgba(255, 255, 255, .6); box-shadow: none; }
.uh-door--next .uh-door-ico { color: var(--ink-3); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.uh-door--next b { display: flex; align-items: center; gap: 8px; color: var(--ink-3); }
.uh-door--next .flow-next-pill { margin: 0; }

/* 04 An order's life: the five statuses in the app's own colours, joined; cancelled under them; the rules. */
.uh-life { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.uh-life::before { content: ""; position: absolute; left: 0; right: 12%; top: 17px; border-top: 2px dashed rgba(255, 255, 255, .22); }
.uh-life li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; }
.uh-life b { margin-top: 8px; font-size: 1.1rem; font-weight: 600; color: #fff; }
.uh-life p { margin: 0; font-size: .86rem; line-height: 1.5; font-weight: 300; color: rgba(255, 255, 255, .72); }
.uh-st { position: relative; z-index: 1; display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.uh-st--grey { color: #374151; background: #e5e7eb; }
.uh-st--amber { color: #92400e; background: #fef3c7; }
.uh-st--blue { color: #1e40af; background: #dbeafe; }
.uh-st--green { color: #166534; background: #dcfce7; }
.uh-st--red { color: #991b1b; background: #fee2e2; }
.uh-life code, .uh-cancel code { margin-top: 2px; padding: 3px 9px; border-radius: 7px; font-family: inherit; font-size: .74rem; font-weight: 500;
  color: rgba(255, 255, 255, .86); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
.uh-cancel { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 30px 0 0; padding: 16px 18px; border-radius: 18px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); font-size: .9rem; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.uh-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 36px 0 0; padding: 0; list-style: none; }
.uh-rules li { margin: 0; padding: 22px 22px 20px; border-radius: var(--r-l); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.uh-rules b { display: block; font-size: 1rem; font-weight: 600; line-height: 1.35; color: #fff; }
.uh-rules p { margin: 8px 0 0; font-size: .86rem; line-height: 1.5; font-weight: 300; color: rgba(255, 255, 255, .7); }

/* 05 The money: the three models side by side, what the cut is taken on, the default plans and placements. */
.uh-models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.uh-model { display: flex; flex-direction: column; padding: 28px 26px 24px; border-radius: var(--r-l); background: #fff; border: 1px solid var(--line-2); box-shadow: var(--sh-s); }
.uh-model-k { align-self: flex-start; margin: 0 0 12px; padding: 5px 12px; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .03em; color: #fff; background: var(--ink); }
.uh-model h3 { margin: 0 0 16px; font-size: 1.2rem; font-weight: 600; line-height: 1.3; }
.uh-model dl { flex: 1; display: grid; margin: 0; }
.uh-model dl > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.uh-model dt { font-size: .78rem; font-weight: 600; color: var(--ink-3); }
.uh-model dd { margin: 0; font-size: .88rem; line-height: 1.45; color: var(--ink); }
.uh-model-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: .88rem; font-weight: 600; color: var(--brand); text-decoration: none; }
.uh-model-go i { font-style: normal; transition: transform .2s ease; }
.uh-model-go:hover i { transform: translateX(3px); }
.uh-base { margin: 24px 0 0; padding: 16px 20px; border-radius: 18px; background: var(--bg-2); font-size: .92rem; line-height: 1.55; color: var(--ink-2); }
.uh-base b { color: var(--ink); font-weight: 600; }
.uh-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.uh-price { padding: 22px 24px; border-radius: var(--r-l); background: #fff; border: 1px solid var(--line-2); }
.uh-price-h { margin: 0 0 10px; font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.uh-price-h span { margin-inline-start: 8px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.uh-price table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.uh-price th, .uh-price td { padding: 10px 0; text-align: start; border-top: 1px solid var(--line); }
.uh-price thead th { border-top: 0; font-size: .74rem; font-weight: 600; color: var(--ink-3); }
.uh-price tbody th { font-weight: 600; color: var(--ink); }
.uh-price td, .uh-price thead th + th { text-align: end; color: var(--ink-2); }

/* 06 What it tells: the twelve events and what hears them; the scheduled jobs by how often they run. */
.uh-sig { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; }
.uh-sig-card { padding: 26px; border-radius: var(--r-l); background: #fff; border: 1px solid var(--line-2); box-shadow: var(--sh-s); }
.uh-sig-h { margin: 0 0 16px; font-size: 1.1rem; font-weight: 600; color: var(--ink); }
.uh-events { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; }
.uh-events li { margin: 0; }
.uh-events code { display: inline-block; padding: 5px 10px; border-radius: 8px; font-family: inherit; font-size: .78rem; font-weight: 500; color: var(--ink); background: var(--bg-2); border: 1px solid var(--line); }
.uh-hears { display: grid; margin: 0; padding: 0; list-style: none; }
.uh-hears li { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 12px; margin: 0; padding: 11px 0; border-top: 1px solid var(--line); font-size: .86rem; line-height: 1.45; color: var(--ink-2); }
.uh-hears b { font-weight: 600; color: var(--ink); }
.uh-jobs { margin: 0; }
.uh-jobs > div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); }
.uh-jobs > div:first-child { padding-top: 0; border-top: 0; }
.uh-jobs dt { font-size: .8rem; font-weight: 700; color: var(--brand); }
.uh-jobs dd { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--ink-2); }
.uh-sig-note { margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--line); font-size: .8rem; color: var(--ink-3); }

/* 07 Every part: the whole system as groups of links, then the pages for each kind of buyer. */
.uh-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 36px; }
.uh-group { padding: 22px 24px; border-radius: var(--r-l); background: #fff; border: 1px solid var(--line-2); box-shadow: var(--sh-s); }
.uh-group-h { margin: 0 0 12px; font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.uh-group ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.uh-group li { margin: 0; }
.uh-group a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: .84rem; color: var(--ink-2); text-decoration: none;
  background: var(--bg-2); border: 1px solid var(--line); transition: color .2s ease, border-color .2s ease, background .2s ease; }
.uh-group a::after { content: "\2192"; color: var(--brand); transition: transform .2s ease; }
.uh-group a:hover { color: var(--ink); background: #fff; border-color: rgba(255, 0, 61, .3); }
.uh-group a:hover::after { transform: translateX(2px); }
.uh-pages { margin-bottom: 0; }

@media (max-width: 1100px) {
  .uh-doors, .uh-rules, .uh-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uh-life { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .uh-life::before { display: none; }
  .uh-models, .uh-sig { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .uh-doors, .uh-life, .uh-rules, .uh-prices, .uh-parts { grid-template-columns: minmax(0, 1fr); }
  .uh-hears li, .uh-jobs > div, .uh-model dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { .uh-doors a, .uh-go, .flow-settle svg { transition: none; } }