/*
 * The platform's own pages: the front page, /cloud-kitchen, /pricing, /contact,
 * the legal pages and the frame around sign-up. Loaded after app.css, whose
 * tokens it re-tunes for these pages only (html.site).
 *
 * The colours are the logo's: its red-orange (#F04A2F) running to orange
 * (#F58A1F) for accents, on warm dark grounds: espresso, cocoa and ember-lit
 * bands, with one cream band and one loud orange strip between them. These pages are
 * always dark (site-head.php sets it); the staff app keeps its own light/dark choice. Buttons and coloured text use a slightly deeper
 * red-orange so white lettering stays readable on them. Bricolage Grotesque
 * sets the headings, Inter Tight everything else. Pictures are real
 * screens of the app and the photographs the super admin uploads in Settings,
 * each seated in a frame (.bz, .bz-browser, .bz-phone). A .lp-ink block wears the dark set in either
 * theme, so a charcoal band and everything in it need no colours of their own.
 */

/* ------------------------------------------------------------------ tokens */
:root.site {
  --background: 30 43% 97%;
  --card: 0 0% 100%;
  --surface-2: 26 36% 92%;
  --foreground: 345 6% 13%;
  --muted-foreground: 345 4% 32%;
  --faint: 345 3% 40%;
  --accent: 26 36% 92%;
  --border: 28 22% 87%;
  --border-strong: 24 10% 64%;
  --primary: 10 78% 48%;
  --primary-foreground: 0 0% 100%;
  --ember: 10 78% 44%;
  --amber: 28 90% 32%;
  --veg: 142 55% 26%;
  --danger-text: 4 78% 40%;
  --brand: 8 87% 56%;
  --sun: 30 92% 54%;
  --coal: 345 6% 13%;
  --rice: 30 43% 97%;
  --ink: 345 6% 13%;
  --tint: 26 40% 93%;
  --brand-wash: linear-gradient(100deg, hsl(8 87% 56%), hsl(30 92% 54%));
  --canvas-wash: none;
  --shadow-ember: 0 14px 28px -14px hsl(10 80% 40% / 0.6), 0 2px 5px -2px hsl(345 6% 10% / 0.2);
  --shadow-lift: 0 24px 50px -28px hsl(345 10% 10% / 0.35), 0 4px 10px -6px hsl(345 10% 10% / 0.12);
  --shadow-stage: 0 60px 100px -50px hsl(345 10% 5% / 0.55), 0 20px 40px -26px hsl(345 10% 5% / 0.35);
  --scrim: 345 6% 8% / 0.5;
  --lp-max: 76rem;
  --lp-gutter: clamp(1.25rem, 5vw, 2.5rem);
  --lp-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --lp-display: 'Bricolage Grotesque', 'Inter Tight', sans-serif;
  color-scheme: light;
  caret-color: hsl(var(--ember));
  scrollbar-color: hsl(var(--border-strong)) transparent;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  background-color: hsl(var(--background));
}
:root.site[data-theme='dark'], .site .lp-ink, .site .lp-foot, .site .lp-sun {
  --card: 18 24% 10%;
  --surface-2: 18 20% 15%;
  --foreground: 30 30% 97%;
  --muted-foreground: 28 14% 77%;
  --faint: 26 10% 62%;
  --accent: 18 20% 15%;
  --border: 18 18% 16%;
  --border-strong: 20 12% 34%;
  --primary: 10 78% 48%;
  --primary-foreground: 0 0% 100%;
  --ember: 18 92% 62%;
  --amber: 30 92% 62%;
  --veg: 120 40% 72%;
  --danger-text: 4 90% 76%;
  --shadow-ember: 0 14px 28px -14px hsl(10 80% 36% / 0.8);
  --shadow-lift: 0 24px 50px -28px hsl(18 40% 2% / 0.9), 0 4px 10px -6px hsl(18 40% 2% / 0.6);
  --scrim: 18 30% 3% / 0.7;
}
/* The grounds. Espresso is the page; cocoa is a tinted band; the dark bands glow like a tandoor, ember at one corner and saffron at the other. */
:root.site { --espresso: 18 30% 6%; --cocoa: 16 30% 9.5%;
  --glow-band: radial-gradient(60rem 32rem at 88% 0%, hsl(12 88% 46% / 0.34), transparent 62%), radial-gradient(44rem 28rem at 0% 100%, hsl(30 92% 54% / 0.16), transparent 62%), linear-gradient(160deg, hsl(8 46% 12%), hsl(var(--espresso)) 70%); }
.site .lp-ink, .site .lp-foot, .site .lp-sun { --background: var(--espresso); background: hsl(var(--background)); color: hsl(var(--foreground)); }
.site .lp-ink { background: var(--glow-band); }
/* The page itself is dark. */
:root.site[data-theme='dark'] { --background: var(--espresso); --tint: var(--cocoa); --rice: var(--espresso); color-scheme: dark; }
/* A cream band wears the light set in either theme: the one bright room in a dark house. */
.site .lp-cream {
  --background: 32 52% 94%; --card: 0 0% 100%; --surface-2: 26 36% 90%; --foreground: 345 6% 13%; --muted-foreground: 345 4% 30%; --faint: 345 3% 40%;
  --accent: 26 36% 90%; --border: 28 26% 82%; --border-strong: 24 10% 60%; --ember: 10 78% 44%; --amber: 28 90% 32%; --sun: 24 92% 46%; --tint: 26 40% 90%;
  background: linear-gradient(180deg, hsl(32 60% 95%), hsl(28 62% 90%)); color: hsl(var(--foreground)); }
.lp-hero, .lp-band, .lp-sun, .lp-strip, .lp-cream { position: relative; isolation: isolate; overflow: clip; }
/* A photograph behind the hero (the super admin's, from Settings), sunk into its colour. */
.lp-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.lp-hero > .lp-bg { opacity: 0.32; -webkit-mask-image: linear-gradient(#000 45%, transparent 92%); mask-image: linear-gradient(#000 45%, transparent 92%); }
/* The plain sections each get a low light from one side, so the page is never one flat field. */
[data-theme='dark'] #who, [data-theme='dark'] #commission, [data-theme='dark'] #contact, [data-theme='dark'] .lp-page-head, [data-theme='dark'] .su-main, [data-theme='dark'] .ct-main { background: radial-gradient(52rem 30rem at 100% 0%, hsl(12 88% 46% / 0.16), transparent 65%); }
[data-theme='dark'] #features, [data-theme='dark'] #questions { background: radial-gradient(48rem 30rem at 0% 12%, hsl(30 92% 54% / 0.1), transparent 65%), radial-gradient(48rem 34rem at 100% 78%, hsl(12 88% 46% / 0.12), transparent 65%); }
/* A tinted band is cocoa, pricked with a grid of dots like a perforated bill. */
.site .lp-tint { background-image: radial-gradient(hsl(var(--foreground) / 0.075) 1px, transparent 1.5px); background-size: 1.375rem 1.375rem; }
@media (prefers-reduced-motion: reduce) { :root.site { scroll-behavior: auto; } }

/* A little grain, fixed over the page, so the big flat fields feel like paper and not like a screen. */
.site body::before { content: ''; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0.05; 
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.site ::selection { background: hsl(var(--sun)); color: hsl(var(--ink)); }
.site :focus-visible { outline: 2px solid hsl(var(--ember)); outline-offset: 3px; }
.site .linkish { color: hsl(var(--ember)); text-decoration: underline; text-decoration-color: hsl(var(--ember) / 0.45); text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
.site .linkish:hover { text-decoration-color: currentColor; }

.lp-skip { position: absolute; left: 1rem; top: -4rem; z-index: 60; padding: 0.75rem 1rem; border-radius: 99px; background: hsl(var(--foreground)); color: hsl(var(--background)); font-weight: 600; }
.lp-skip:focus { top: 1rem; }
.lp-wrap { width: 100%; max-width: calc(var(--lp-max) + 2 * var(--lp-gutter)); margin: 0 auto; padding-left: var(--lp-gutter); padding-right: var(--lp-gutter); }

/* Buttons are pills; on the big ones the arrow rides in its own circle. */
.site .btn { border-radius: 99px; font-weight: 700; letter-spacing: -0.005em; transition: transform 500ms var(--lp-ease), background-color 300ms var(--lp-ease), border-color 300ms var(--lp-ease), color 300ms var(--lp-ease); }
.site .btn:hover { background: hsl(10 80% 42%); }
.site .lp-ink .btn:not(.btn-outline):hover, .site[data-theme='dark'] .btn:not(.btn-outline):hover { background: hsl(10 82% 54%); }
.site .btn:active { transform: scale(0.97); }
.site .btn-lg { height: 3.25rem; max-height: 3.25rem; padding: 0 1.5rem; font-size: 1rem; border-radius: 99px; }
.site .btn-lg > .i:last-child { box-sizing: content-box; padding: 0.625rem; margin-right: -1.125rem; border-radius: 50%; background: hsl(var(--primary-foreground) / 0.16); transition: transform 500ms var(--lp-ease); }
.site .btn-lg:hover > .i:last-child { transform: translateX(3px) scale(1.06); }
.site .btn-block.btn-lg > .i:last-child { margin-right: -0.5rem; }
.site .btn-outline { background: transparent; color: hsl(var(--foreground)); border-color: hsl(var(--foreground) / 0.3); box-shadow: none; }
.site .btn-outline:hover, .site .lp-ink .btn-outline:hover { background: hsl(var(--foreground) / 0.07); border-color: hsl(var(--foreground)); color: hsl(var(--foreground)); }
.lp-textlink { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 600; text-decoration: underline; text-decoration-color: hsl(var(--foreground) / 0.3); text-decoration-thickness: 2px; text-underline-offset: 0.3em; transition: text-decoration-color 300ms var(--lp-ease); }
.lp-textlink:hover { text-decoration-color: hsl(var(--ember)); }
.lp-textlink .i { transition: transform 500ms var(--lp-ease); }
.lp-textlink:hover .i { transform: translateX(4px); }

/* ------------------------------------------------------------------ frames */
/* A picture never lies flat on the page: it sits in a tray, with a hair of space around it. */
.bz, .bz-browser, .bz-phone { position: relative; margin: 0; padding: 0.4375rem; border-radius: 1.75rem; background: hsl(var(--foreground) / 0.06); box-shadow: inset 0 0 0 1px hsl(var(--foreground) / 0.08), var(--shadow-lift); }
.bz img, .bz-browser img, .bz-phone img { display: block; width: 100%; height: auto; border-radius: 1.3125rem; }
.bz img { height: 100%; object-fit: cover; }
.bz figcaption { position: absolute; left: 1.25rem; bottom: 1.25rem; padding: 0.4375rem 0.875rem; border-radius: 99px; background: #fff; color: #141414; font-size: 0.8125rem; font-weight: 700; }
.lp-ink .bz, .lp-ink .bz-browser, .lp-ink .bz-phone, [data-theme='dark'] .bz, [data-theme='dark'] .bz-browser { background: hsl(0 0% 100% / 0.08); box-shadow: inset 0 0 0 1px hsl(0 0% 100% / 0.12), var(--shadow-stage); }
/* A screen of the staff app, in a browser's window. */
.bz-browser { padding-top: 2.125rem; border-radius: 1.25rem; }
.bz-browser img { border-radius: 0.375rem 0.375rem 0.875rem 0.875rem; }
.bz-browser::before { content: ''; position: absolute; left: 1rem; top: 0.8125rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: hsl(var(--foreground) / 0.25); box-shadow: 0.875rem 0 0 hsl(var(--foreground) / 0.25), 1.75rem 0 0 hsl(var(--foreground) / 0.25); }
/* A guest's or a waiter's phone. */
.bz-phone { padding: 0.3125rem; border-radius: 11% / 5.5%; background: hsl(345 8% 8%); box-shadow: inset 0 0 0 1px hsl(30 43% 97% / 0.12), var(--shadow-lift); }
.lp-ink .bz-phone { background: hsl(345 8% 5%); }
.bz-phone img { border-radius: 9.5% / 4.75%; }

/* ------------------------------------------------------------------ nav */
/* A floating bar, clear of the top edge, over whatever is under it. */
.lp-nav { position: sticky; top: 0.75rem; z-index: 40; padding: 0 var(--lp-gutter); margin-bottom: -4.5rem; pointer-events: none; }
.lp-nav-in { position: relative; display: flex; align-items: center; gap: 0.375rem; max-width: var(--lp-max); height: 3.75rem; margin: 0 auto; padding: 0 0.5rem 0 1.5rem; border-radius: 99px; background: hsl(var(--card) / 0.9); backdrop-filter: saturate(1.4) blur(14px); box-shadow: inset 0 0 0 1px hsl(var(--foreground) / 0.08), 0 16px 34px -20px hsl(345 10% 8% / 0.45); pointer-events: auto; }
.lp-nav + main > :first-child, .lp-nav ~ main > .lp-offer + * { padding-top: 7rem; }
.lp-brand { display: inline-flex; align-items: center; margin-right: auto; }
.lp-word { font-family: var(--lp-display); font-weight: 800; font-size: 1.5rem; line-height: 1; letter-spacing: -0.04em; }
.lp-word i { font-style: normal; color: hsl(var(--brand)); }
.lp-brand .brand-logo { width: auto; max-width: min(11rem, 44vw); height: 1.75rem; object-fit: contain; object-position: left center; border-radius: 0; }
.lp-foot-brand .lp-brand .brand-logo { height: 2rem; }
.lp-links { display: none; align-items: center; gap: 0.125rem; margin-right: 0.25rem; }
.lp-links a, .lp-login { padding: 0.5rem 0.875rem; border-radius: 99px; font-size: 0.9375rem; font-weight: 500; color: hsl(var(--muted-foreground)); transition: color 300ms var(--lp-ease), background-color 300ms var(--lp-ease); }
.lp-links a:hover, .lp-login:hover { color: hsl(var(--foreground)); background: hsl(var(--foreground) / 0.06); }
/* The link for this page, or for the section on screen (site.js moves that one as the page scrolls). */
.lp-links a[aria-current], .lp-login[aria-current] { color: hsl(var(--foreground)); background: hsl(var(--foreground) / 0.1); font-weight: 600; }
.lp-login { display: none; color: hsl(var(--foreground)); font-weight: 600; }
.lp-nav-cta { display: none; }
.site .lp-nav-cta { height: 2.75rem; padding: 0 1.25rem; font-size: 0.9375rem; }
.brand-logo.on-dark, [data-theme='dark'] .brand-logo.on-light, .lp-foot .brand-logo.on-light { display: none; }
[data-theme='dark'] .brand-logo.on-dark, .lp-foot .brand-logo.on-dark { display: block; }

/* The phone menu: a <details>, so it opens without any script. Its links arrive one after another. */
.lp-menu > summary { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; list-style: none; cursor: pointer; }
.lp-menu > summary::-webkit-details-marker { display: none; }
.lp-menu .shut, .lp-menu[open] .open { display: none; }
.lp-menu[open] .shut { display: block; }
.lp-menu > nav { position: absolute; left: 0; right: 0; top: calc(100% + 0.5rem); display: grid; padding: 0.75rem 1.5rem 1.5rem; border-radius: 1.75rem; background: hsl(var(--card)); box-shadow: inset 0 0 0 1px hsl(var(--foreground) / 0.08), var(--shadow-stage); }
.lp-menu > nav a:not(.btn) { display: flex; align-items: center; justify-content: space-between; min-height: 3.5rem; border-bottom: 1px solid hsl(var(--border)); font-family: var(--lp-display); font-weight: 700; font-size: 1.5rem; }
.lp-menu > nav a .i { color: hsl(var(--faint)); }
.lp-menu > nav a[aria-current]:not(.btn), .lp-menu > nav a[aria-current] .i { color: hsl(var(--brand)); }
.lp-menu > nav .btn { margin-top: 1.25rem; }
.lp-menu[open] > nav > * { animation: lp-up 600ms var(--lp-ease) both; }
.lp-menu[open] > nav > :nth-child(2) { animation-delay: 50ms; } .lp-menu[open] > nav > :nth-child(3) { animation-delay: 100ms; } .lp-menu[open] > nav > :nth-child(4) { animation-delay: 150ms; }
.lp-menu[open] > nav > :nth-child(5) { animation-delay: 200ms; } .lp-menu[open] > nav > :nth-child(6) { animation-delay: 250ms; } .lp-menu[open] > nav > :nth-child(n+7) { animation-delay: 300ms; }
@keyframes lp-up { from { opacity: 0; transform: translateY(1.25rem); } }
@media (min-width: 480px) { .lp-nav-cta { display: inline-flex; } }
@media (min-width: 980px) { .lp-links { display: flex; } .lp-login { display: inline-block; } .lp-menu { display: none; } .lp-nav-cta { margin-left: 0.25rem; } }

/* The offer band: the public coupon, above the hero. */
.lp-offer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 1rem; padding: 5.25rem var(--lp-gutter) 0.875rem; background: hsl(var(--sun)); color: hsl(var(--ink)); font-size: 0.9375rem; text-align: center; }
.lp-offer-tag { margin-right: 0.25rem; padding: 0.125rem 0.625rem; border-radius: 99px; background: hsl(var(--ink)); color: hsl(var(--rice)); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.lp-offer-note { opacity: 0.8; }
.lp-nav ~ main > .lp-offer + * { padding-top: clamp(2.5rem, 6vw, 4.5rem); }

/* ------------------------------------------------------------ shared type */
.lp h1, .lp h2, .lp-feat h3, .lp-plan h3, .lp-who-card h3, .lp-reel h3, .lp-india h3 { font-family: var(--lp-display); font-weight: 700; letter-spacing: -0.035em; text-wrap: balance; }
.lp h2 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: 1.08; }
.lp-head { max-width: 48rem; }
.lp-head p, .lp-lead { margin-top: 1.25rem; max-width: 36rem; font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.55; color: hsl(var(--muted-foreground)); text-wrap: pretty; }
.lp-section { padding: clamp(4rem, 8vw, 7rem) 0; }
.lp-section-tight { padding-top: 0; }
.lp-tint { background: hsl(var(--tint)); }
.lp-ticks { display: grid; gap: 0.75rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.lp-ticks li { display: flex; gap: 0.75rem; align-items: flex-start; line-height: 1.4; }
.lp-ticks .i { flex-shrink: 0; margin-top: 0.15rem; padding: 0.1875rem; box-sizing: content-box; border-radius: 99px; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); stroke-width: 3; }
.lp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.lp-eyebrow { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: hsl(var(--ember)); }
.lp-head .lp-eyebrow { margin-top: 0; max-width: none; font-size: 0.8125rem; line-height: 1.4; color: hsl(var(--ember)); }
.lp-eyebrow + h1, .lp-eyebrow + h2 { margin-top: 0.875rem; }
.lp-sun .lp-head .lp-eyebrow { color: hsl(var(--sun)); }
.lp-caption { margin-top: 1rem; font-size: 0.875rem; color: hsl(var(--faint)); text-align: center; }

/* Things arrive: up out of a soft blur, once (site.js adds .lp-anim; without it nothing is hidden). */
.lp-anim [data-reveal] { opacity: 0; transform: translateY(1.25rem); transition: opacity 600ms var(--lp-ease), transform 600ms var(--lp-ease); }
.lp-anim [data-reveal].in { opacity: 1; transform: none; }

/* ----------------------------------------------------------------- hero */
.lp-hero { padding-bottom: 0; }
.site .lp-hero { background: radial-gradient(64rem 36rem at 92% 4%, hsl(12 90% 48% / 0.42), transparent 60%), radial-gradient(40rem 30rem at 4% 70%, hsl(30 92% 54% / 0.14), transparent 62%), linear-gradient(170deg, hsl(8 50% 13%), hsl(var(--espresso)) 72%); }
.lp-hero::after { content: ''; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: clamp(5rem, 16vw, 15rem); background: hsl(var(--rice)); }
.lp-hero-grid { display: grid; gap: 3rem; align-items: center; padding-bottom: clamp(3rem, 6vw, 5rem); }
.lp-hero h1 { font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1; letter-spacing: -0.04em; }
.lp-hero h1 em { font-style: normal; color: hsl(var(--sun)); }
.lp-hero .lp-lead { margin-top: 1.5rem; max-width: 34rem; }
.lp-hero .lp-eyebrow { color: hsl(var(--sun)); }
.lp-hero .lp-actions { margin-top: 2.25rem; }
.lp-hero-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0; margin-top: 2rem; padding-top: 1.25rem; max-width: 34rem; border-top: 1px solid hsl(var(--foreground) / 0.14); font-size: 0.9375rem; font-weight: 500; color: hsl(var(--foreground) / 0.86); }
.lp-hero-price b { flex-basis: 100%; color: hsl(var(--foreground)); font-family: var(--lp-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; }
.lp-hero-price span + span::before { content: '·'; margin: 0 0.625rem; opacity: 0.6; }
@media (min-width: 480px) { .lp-hero-price b { flex-basis: auto; } .lp-hero-price span::before { content: '·'; margin: 0 0.625rem; opacity: 0.6; } }
.lp-hero-copy > * { animation: lp-up 700ms var(--lp-ease) both; }
.lp-hero-copy > :nth-child(2) { animation-delay: 90ms; } .lp-hero-copy > :nth-child(3) { animation-delay: 180ms; } .lp-hero-copy > :nth-child(4) { animation-delay: 270ms; } .lp-hero-copy > :nth-child(5) { animation-delay: 360ms; }
/* A dish, the page a guest orders it from, and the promise, stacked like things on a counter. */
.lp-hero-art { position: relative; max-width: 26rem; width: 100%; margin: 0 auto; padding: 0 1.5rem 2.5rem 3.5rem; animation: lp-up 1100ms var(--lp-ease) 200ms both; }
.lp-hero-photo { aspect-ratio: 4 / 5; transform: rotate(2.5deg); }
.lp-hero-phone { position: absolute; left: 0; bottom: 0; width: 42%; transform: rotate(-4deg); }
.lp-stamp { position: absolute; right: -0.25rem; top: -1.25rem; display: grid; place-content: center; justify-items: center; width: 7.5rem; height: 7.5rem; border-radius: 50%; background: var(--brand-wash); color: hsl(var(--ink)); text-align: center; transform: rotate(10deg); box-shadow: var(--shadow-lift); }
.lp-stamp b { font-family: var(--lp-display); font-weight: 700; font-size: 2.5rem; line-height: 1; }
.lp-stamp span { font-size: 0.6875rem; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.04em; }
/* With no photograph yet, the phone stands on its own. */
.lp-hero-art.solo { max-width: 17rem; padding: 0; }
.lp-hero-art.solo .lp-hero-phone { position: relative; width: 100%; transform: rotate(-3deg); }
.lp-hero-art.solo .lp-stamp { right: -2.5rem; }
.lp-hero-board { z-index: 1; }
.lp-hero-board img { aspect-ratio: 16 / 8.4; object-fit: cover; object-position: top; }
.lp-hero-board video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 0.375rem 0.375rem 0.875rem 0.875rem; background: hsl(var(--foreground) / 0.06); }
@media (min-width: 1000px) {
  .lp-hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 4rem; }
  .lp-hero-art { max-width: 30rem; margin-right: 0; }
  .lp-stamp { width: 9rem; height: 9rem; } .lp-stamp b { font-size: 2.75rem; } .lp-stamp span { font-size: 0.75rem; }
}
@media (max-width: 767px) { .lp-hero-photo, .lp-hero-phone, .lp-stamp { transform: none; } }
@media (prefers-reduced-motion: reduce) { .lp-hero-copy > *, .lp-hero-art, .lp-menu[open] > nav > *, .ct-done { animation: none; } }

/* The story: where orders come from, the one system they pass through, and what the owner runs from it. */
.lp-story { margin-top: clamp(1rem, 3vw, 2.5rem); }
/* Lines between the boxes of a diagram. site.js draws them from where the boxes sit, and marks a line "on" (lit) and "go" (a spark runs along it; "late" for the second leg). */
.lp-wires { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; pointer-events: none; --wire: hsl(var(--foreground) / 0.16); --wire-on: hsl(var(--brand) / 0.8); --wire-run: hsl(var(--sun)); }
.lp-wires path { fill: none; stroke-linecap: round; }
.lp-wires .w-line { stroke: var(--wire); stroke-width: 1.5; transition: stroke 400ms var(--lp-ease); }
.lp-wires .w-end { fill: var(--wire); transition: fill 400ms var(--lp-ease); }
.lp-wires .on .w-line { stroke: var(--wire-on); } .lp-wires .on .w-end { fill: var(--wire-on); }
.lp-wires .w-run { stroke: var(--wire-run); stroke-width: 3; opacity: 0; filter: drop-shadow(0 0 5px var(--wire-run)); }
.lp-wires .go .w-run { stroke-dasharray: 28px calc(var(--len, 400px) + 28px); animation: lp-run 2.6s ease-in-out infinite; }
.lp-wires .go.late .w-run { animation-name: lp-run-late; }
@keyframes lp-run { 0% { stroke-dashoffset: 28px; opacity: 0; } 4% { opacity: 1; } 40% { stroke-dashoffset: calc(var(--len, 400px) * -1); opacity: 1; } 44%, 100% { stroke-dashoffset: calc(var(--len, 400px) * -1); opacity: 0; } }
@keyframes lp-run-late { 0%, 38% { stroke-dashoffset: 28px; opacity: 0; } 42% { opacity: 1; } 80% { stroke-dashoffset: calc(var(--len, 400px) * -1); opacity: 1; } 84%, 100% { stroke-dashoffset: calc(var(--len, 400px) * -1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lp-wires .go .w-run { animation: none; } }

/* On a phone the sources sit in a row above the hub and what you run sits in a row below; on a desk they stand either side of it.
   --wires tells site.js which way the lines run, so a wide phone draws them the same way as a narrow one. */
.lp-flow { --wires: down; position: relative; isolation: isolate; display: grid; max-width: 62rem; margin: clamp(2.5rem, 5vw, 4rem) auto 0; text-align: center; }
.lp-flow h3 { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: hsl(var(--faint)); }
.lp-flow h3.out { order: 5; margin-top: 1rem; }
.lp-flow-side { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.375rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.lp-flow-side.out { order: 4; margin: 0; }
.lp-flow-side li { display: grid; justify-items: center; }
.lp-flow-side button { display: grid; justify-items: center; align-content: start; gap: 0.4375rem; padding: 0; font-size: 0.6875rem; font-weight: 700; line-height: 1.2; color: hsl(var(--muted-foreground)); cursor: pointer; transition: color 300ms var(--lp-ease), transform 500ms var(--lp-ease); }
.lp-flow-side.in button .i { order: 2; }
.lp-flow-side button .i { box-sizing: content-box; width: 1.25rem; height: 1.25rem; padding: 0.75rem; border-radius: 50%; background: hsl(var(--background)); color: hsl(var(--faint)); box-shadow: inset 0 0 0 1px hsl(var(--foreground) / 0.16); transition: background-color 300ms var(--lp-ease), box-shadow 300ms var(--lp-ease), color 300ms var(--lp-ease); }
.lp-flow-side button:hover .i { box-shadow: inset 0 0 0 1px hsl(var(--foreground) / 0.45); }
.lp-flow-side button.lit { color: hsl(var(--foreground)); }
.lp-flow-side button.lit .i { color: hsl(var(--ember)); box-shadow: inset 0 0 0 1px hsl(var(--brand) / 0.55); }
.lp-flow-side button[aria-pressed='true'] { color: hsl(var(--foreground)); }
.lp-flow-side button[aria-pressed='true'] .i { background: var(--brand-wash); color: #fff; box-shadow: var(--shadow-ember); }
/* The hub is the logo itself, standing in its own light: no card around it. */
.lp-flow-hub { order: 3; position: relative; justify-self: center; display: grid; justify-items: center; gap: 0.5rem; margin: 3.5rem 0; padding: 0.75rem 1.25rem; }
.lp-flow-hub::before { content: ''; position: absolute; inset: -1.75rem -2.5rem; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, hsl(var(--brand) / 0.42), transparent); filter: blur(14px); opacity: 0.75; pointer-events: none; }
.lp-flow-hub.beat::before { animation: lp-beat 2.6s ease-out infinite; }
@keyframes lp-beat { 0%, 34% { transform: none; opacity: 0.75; } 46% { transform: scale(1.18); opacity: 1; } 76%, 100% { transform: none; opacity: 0.75; } }
.lp-flow-hub img { width: auto; height: 2.25rem; max-width: min(11rem, 46vw); object-fit: contain; } .lp-flow-hub .lp-word { font-size: 1.75rem; white-space: nowrap; }
.lp-flow-hub > span:last-child { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: hsl(var(--ember)); }
.lp-flow-note { order: 6; min-height: 3em; margin: 1.75rem auto 0; max-width: 30rem; line-height: 1.5; color: hsl(var(--muted-foreground)); text-wrap: balance; }
@media (prefers-reduced-motion: reduce) { .lp-flow-hub.beat::before { animation: none; } }
@media (min-width: 900px) {
  .lp-flow { --wires: across; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
  .lp-flow h3 { grid-row: 1; margin-bottom: 1.25rem; } .lp-flow h3.in { grid-column: 1; text-align: right; } .lp-flow h3.out { grid-column: 3; order: 0; margin-top: 0; text-align: left; }
  .lp-flow-side { grid-row: 2; grid-auto-flow: row; gap: 0.625rem; margin: 0; } .lp-flow-side.in { grid-column: 1; } .lp-flow-side.out { grid-column: 3; order: 0; }
  .lp-flow-side.in li { justify-items: end; } .lp-flow-side.out li { justify-items: start; }
  .lp-flow-side button { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 2.875rem; padding: 0 1.125rem 0 0.375rem; border-radius: 99px; background: hsl(var(--background)); box-shadow: inset 0 0 0 1px hsl(var(--foreground) / 0.14); font-size: 1rem; font-weight: 600; color: hsl(var(--foreground)); }
  .lp-flow-side.in button .i { order: 0; }
  .lp-flow-side button .i { order: 0; width: 1.125rem; height: 1.125rem; padding: 0.5rem; box-shadow: none; background: hsl(var(--foreground) / 0.07); }
  .lp-flow-side button:hover { box-shadow: inset 0 0 0 1px hsl(var(--foreground) / 0.4); } .lp-flow-side button:hover .i { box-shadow: none; }
  .lp-flow-side.in button:hover { transform: translateX(4px); } .lp-flow-side.out button:hover { transform: translateX(-4px); }
  .lp-flow-side button.lit { box-shadow: inset 0 0 0 1px hsl(var(--brand) / 0.5); } .lp-flow-side button.lit .i { box-shadow: none; }
  .lp-flow-side button[aria-pressed='true'] { background: hsl(var(--brand) / 0.16); box-shadow: inset 0 0 0 1px hsl(var(--brand)), 0 14px 30px -18px hsl(var(--brand)); }
  .lp-flow-hub { grid-column: 2; grid-row: 2; order: 0; margin: 0 clamp(4rem, 10vw, 9rem); padding: 1.25rem 1.75rem; } .lp-flow-hub img { height: 3rem; max-width: 14rem; } .lp-flow-hub .lp-word { font-size: 2.25rem; }
  .lp-flow-note { grid-column: 1 / -1; grid-row: 3; min-height: 1.5em; margin-top: 2.5rem; max-width: none; font-size: 1.0625rem; }
}

/* ------------------------------------------------------------- solutions */
/* Three ways of selling: one under another on a phone, two across on a tablet, three on a desk. */
.lp-who { display: grid; gap: 2.75rem clamp(1.25rem, 3vw, 2.5rem); margin-top: clamp(2.5rem, 6vw, 5rem); }
.lp-who-card { display: flex; flex-direction: column; align-items: flex-start; }
.lp-who-card .bz img { height: auto; aspect-ratio: 4 / 3; }
.lp-who-card .bz { width: 100%; transition: transform 700ms var(--lp-ease); }
.lp-who-card:hover .bz { transform: translateY(-6px) rotate(-1deg); }
/* A screen of the app standing in for a photograph: shown from its top. */
.bz.shot img { object-position: top; }
.lp-who-card h3 { margin-top: 1.5rem; font-size: clamp(1.5rem, 2.2vw, 1.875rem); line-height: 1.05; }
.lp-who-card > p { margin: 0.75rem 0 1.5rem; color: hsl(var(--muted-foreground)); line-height: 1.55; }
.lp-who-card .lp-textlink { margin-top: auto; }
@media (max-width: 699px) { .lp-who-card .bz img { aspect-ratio: 16 / 10; } .lp-who-card > p { margin-bottom: 1.125rem; } }
@media (min-width: 700px) { .lp-who { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1025px) { .lp-who { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lp-who-foot { margin-top: 3.5rem; color: hsl(var(--muted-foreground)); }

/* -------------------------------------------------------------- workflow */
/* One order as a reel of real screens. It scrolls sideways, off the edge of the page. */
.lp-reelband { overflow: clip; }
.lp-reel { display: flex; gap: clamp(1.25rem, 3vw, 2.25rem); margin: clamp(3rem, 6vw, 5rem) 0 0; padding: 0.5rem max(var(--lp-gutter), calc((100vw - var(--lp-max)) / 2)) 2rem; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; counter-reset: step; --h: clamp(19rem, 34vw, 26rem); }
.lp-reel li { flex: 0 0 auto; width: calc(var(--h) / 2 + 0.875rem); scroll-snap-align: center; counter-increment: step; }
.lp-reel li.wide { width: calc(var(--h) * 1.5); max-width: 82vw; }
.lp-reel figure { height: var(--h); overflow: hidden; }
.lp-reel .bz-browser img { height: 100%; object-fit: cover; object-position: left top; }
.lp-reel h3 { margin-top: 1.25rem; font-size: 1.25rem; line-height: 1.15; }
.lp-reel h3::before { content: counter(step); display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; margin-right: 0.625rem; border-radius: 50%; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-family: 'Inter Tight', sans-serif; font-size: 0.875rem; font-weight: 700; vertical-align: 0.2em; }
.lp-reel p { margin-top: 0.5rem; color: hsl(var(--muted-foreground)); line-height: 1.5; }

/* -------------------------------------------------------------- features */
.lp-feat { display: grid; gap: 2.75rem; align-items: center; padding: clamp(3.5rem, 7vw, 6rem) 0; border-top: 1px solid hsl(var(--border)); scroll-margin-top: 5rem; }
.lp-feat:first-of-type { margin-top: clamp(3rem, 6vw, 5rem); }
.lp-feat:last-child { padding-bottom: 0; }
.lp-feat h3 { font-size: clamp(1.625rem, 2.8vw, 2.25rem); line-height: 1.1; }
.lp-feat-copy > p:not(.lp-url) { margin-top: 1.125rem; max-width: 30rem; font-size: 1.0625rem; line-height: 1.55; color: hsl(var(--muted-foreground)); }
/* Each job is numbered, in the order an owner meets them. */
#features { counter-reset: job; } .lp-feat { counter-increment: job; }
.lp-feat-copy > p.lp-feat-no { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1.125rem; max-width: none; font-size: 0.8125rem; font-weight: 700; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: hsl(var(--ember)); }
.lp-feat-no::before { content: counter(job); display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--brand-wash); color: #fff; font-family: var(--lp-display); font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; box-shadow: var(--shadow-ember); }
.lp-url { display: inline-block; margin-top: 2rem; padding: 0.625rem 1.125rem; border-radius: 99px; background: hsl(var(--tint)); color: hsl(var(--muted-foreground)); font-size: 0.9375rem; overflow-wrap: anywhere; }
.lp-url b { color: hsl(var(--ember)); }
.lp-feat-art { position: relative; isolation: isolate; }
/* Each picture stands in a pool of warm light, ember on one side of the page and saffron on the other. */
.lp-feat-art::before { content: ''; position: absolute; inset: -6% -4%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, hsl(var(--brand) / 0.34), transparent); filter: blur(28px); pointer-events: none; }
.lp-feat-flip .lp-feat-art::before { background: radial-gradient(closest-side, hsl(var(--sun) / 0.26), transparent); }
/* A dish and a phone: the photo tilts one way, the phone leans on it the other. */
.lp-feat-art.duo { padding: 0 0 2.5rem 22%; }
.lp-feat-art.duo .bz { aspect-ratio: 5 / 4; transform: rotate(1.5deg); }
.lp-feat-art.duo .bz-phone { position: absolute; left: 0; bottom: 0; width: 34%; transform: rotate(-3deg); }
.lp-feat-flip .lp-feat-art.duo { padding: 0 22% 2.5rem 0; }
.lp-feat-flip .lp-feat-art.duo .bz { transform: rotate(-1.5deg); }
.lp-feat-flip .lp-feat-art.duo .bz-phone { left: auto; right: 0; transform: rotate(3deg); }
.lp-feat-art.solo { display: grid; justify-items: center; }
.lp-feat-art.solo .bz-phone { width: min(16rem, 70%); transform: rotate(-2deg); }
.lp-feat-flip .lp-feat-art.solo .bz-phone { transform: rotate(2deg); }
/* The dining room: a square picture, the phone on its right so the QR stands on the tables stay in view. */
#tables .lp-feat-art.duo { padding: 0 20% 2.5rem 0; } #tables .lp-feat-art.duo .bz { aspect-ratio: 1; transform: rotate(-1.5deg); }
#tables .lp-feat-art.duo .bz-phone { left: auto; right: 0; width: 32%; transform: rotate(3deg); }
@media (max-width: 767px) { .lp-feat-art.solo .bz-phone, .lp-feat-flip .lp-feat-art.solo .bz-phone, .lp-hero-art.solo .lp-hero-phone { transform: none; } .lp-hero-art.solo .lp-stamp { right: -0.75rem; } }
@media (max-width: 767px) { #tables .lp-feat-art.duo .bz, #tables .lp-feat-art.duo .bz-phone, .lp-feat-art.duo .bz, .lp-feat-art.duo .bz-phone, .lp-feat-flip .lp-feat-art.duo .bz, .lp-feat-flip .lp-feat-art.duo .bz-phone { transform: none; } }
/* In one column the picture comes first, then the words about it. */
@media (max-width: 899px) { .lp-feat-art { order: -1; } }
@media (min-width: 900px) {
  .lp-feat { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(3rem, 7vw, 6.5rem); }
  .lp-feat-flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
  .lp-feat-flip .lp-feat-copy { order: 2; }
}

/* ---------------------------------------------------------- cloud kitchen */

/* ------------------------------------------------------- made for India */
.lp-india { display: grid; gap: 0 1rem; margin-top: clamp(2rem, 4vw, 3rem); text-align: center; }
.lp-india > div { padding: 1.5rem 1.25rem; border-top: 1px solid hsl(var(--border-strong) / 0.5); }
@media (min-width: 1100px) { .lp-india > div { padding: 0.5rem 1.5rem; border-top: 0; } .lp-india > div + div { border-left: 1px solid hsl(var(--border-strong) / 0.5); } }
.india-big { font-family: var(--lp-display); font-weight: 700; font-size: clamp(2rem, 3.2vw, 2.625rem); line-height: 1; color: hsl(var(--ember)); white-space: nowrap; }
.india-big i { font-style: normal; margin: 0 0.1em; color: hsl(var(--sun)); }
.lp-india h3 { margin-top: 1rem; font-size: 1.3125rem; }
.lp-india h3 + p { margin: 0.5rem auto 0; color: hsl(var(--muted-foreground)); line-height: 1.55; max-width: 22rem; }
@media (min-width: 640px) { .lp-india { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .lp-india { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } }

/* ---------------------------------------------------------- customer data */
/* A statement on embers, edge to edge: deep red running to the logo's orange. */
.site .lp-sun { background: linear-gradient(115deg, hsl(4 66% 17%), hsl(12 74% 28%) 55%, hsl(26 86% 40%)); }
.lp-sun .lp-ticks .i { background: #fff; color: hsl(10 78% 40%); }
.lp-sun h2 em { font-style: normal; color: hsl(var(--sun)); }
.lp-sun .lp-head h2 { font-size: clamp(2rem, 4.2vw, 3.375rem); line-height: 1.04; }
.lp-sun .lp-head p:not(.lp-eyebrow) { color: hsl(var(--foreground) / 0.9); }
/* The statement and what it means in practice on one side; the owner's own customer list on the other. */
.lp-split { display: grid; gap: 2.5rem; align-items: center; }
.lp-split .lp-ticks { margin-top: 2rem; }
.lp-split .bz-browser img { aspect-ratio: 4 / 3; object-fit: cover; object-position: left top; }
@media (min-width: 960px) { .lp-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(3rem, 6vw, 5.5rem); } .lp-split .bz-browser { transform: rotate(1.5deg); } }
/* Under the statement, the proof: the list of guests the restaurant keeps. */

/* ------------------------------------------------------------ commission */
/* Delivery apps beside direct orders: two columns, ours lit. */
.lp-head-mid { margin-left: auto; margin-right: auto; text-align: center; } .lp-head-mid p { margin-left: auto; margin-right: auto; }
.lp-vs { margin-top: clamp(2.5rem, 5vw, 4rem); }
.lp-vs table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.9375rem; line-height: 1.4; }
.lp-vs caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.lp-vs th, .lp-vs td { padding: 1.625rem 1.25rem; border-bottom: 1px solid hsl(var(--border)); text-align: left; vertical-align: middle; }
.lp-vs thead th { font-family: var(--lp-display); font-weight: 700; font-size: 1.125rem; color: hsl(var(--muted-foreground)); }
.lp-vs tbody th { width: 24%; padding-left: 0; font-weight: 700; } .lp-vs thead th:not(.us), .lp-vs tbody td:not(.us) { width: 30%; }
.lp-vs .us span { display: block; margin-top: 0.25rem; font-size: 0.875rem; font-weight: 400; line-height: 1.45; color: hsl(var(--muted-foreground)); }
.lp-vs tbody td { color: hsl(var(--muted-foreground)); }
.lp-vs .us { background: hsl(var(--brand) / 0.14); border-left: 1px solid hsl(var(--brand) / 0.5); border-right: 1px solid hsl(var(--brand) / 0.5); border-bottom-color: hsl(var(--brand) / 0.25); color: hsl(var(--foreground)); font-weight: 600; }
.lp-vs thead .us { border-top: 1px solid hsl(var(--brand) / 0.5); border-radius: 1.25rem 1.25rem 0 0; color: hsl(var(--foreground)); }
.lp-vs tbody tr:last-child .us { border-bottom: 1px solid hsl(var(--brand) / 0.5); border-radius: 0 0 1.25rem 1.25rem; }
.lp-vs tbody tr:last-child th, .lp-vs tbody tr:last-child td:not(.us) { border-bottom: 0; }
.lp-vs .us b { font-family: var(--lp-display); font-size: 1.75rem; line-height: 1; color: hsl(var(--sun)); }
/* On a phone each row becomes its own small card: the question, then the two answers side by side. */
@media (max-width: 639px) {
  .lp-vs table { display: block; } .lp-vs thead { display: none; } .lp-vs tbody { display: grid; gap: 0.75rem; }
  .lp-vs tbody tr { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); border-radius: 1rem; overflow: hidden; box-shadow: inset 0 0 0 1px hsl(var(--border)); }
  .lp-vs tbody th { grid-column: 1 / -1; width: auto; padding: 1rem 1rem 1.125rem; border: 0; font-size: 1rem; } .lp-vs tbody td:not(.us) { width: auto; }
  .lp-vs tbody td, .lp-vs tbody tr:last-child .us { padding: 0.875rem 1rem 1rem; border: 0; border-radius: 0; font-size: 0.875rem; }
  .lp-vs tbody td::before { content: 'Delivery apps'; display: block; margin-bottom: 0.25rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: hsl(var(--faint)); }
  .lp-vs tbody td.us::before { content: 'Direct orders'; color: hsl(var(--sun)); }
}
.lp-demo-note { margin-top: 1.75rem; font-size: 0.9375rem; color: hsl(var(--muted-foreground)); text-align: center; } .lp-demo-note .icon { vertical-align: -0.15em; color: hsl(var(--sun)); }
.lp-vs-note { margin-top: 1.25rem; font-size: 0.9375rem; color: hsl(var(--muted-foreground)); }
/* The sum that makes 0% plain: what the guest pays is what the restaurant gets. */
.lp-keep { display: grid; gap: 1rem 3rem; align-items: center; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid hsl(var(--border)); }
.lp-keep-sum { display: flex; align-items: center; gap: clamp(0.625rem, 3vw, 1.25rem); font-size: clamp(0.8125rem, 3.4vw, 1rem); font-weight: 600; color: hsl(var(--muted-foreground)); }
.lp-keep-sum span { display: grid; gap: 0.25rem; } .lp-keep-sum .i { width: 1.75rem; height: 1.75rem; color: hsl(var(--sun)); }
.lp-keep-sum b { font-family: var(--lp-display); font-weight: 700; font-size: clamp(1.75rem, 8vw, 3.25rem); line-height: 1; letter-spacing: -0.03em; color: hsl(var(--foreground)); font-variant-numeric: tabular-nums; }
.lp-keep-sum .i { flex-shrink: 0; }
.lp-keep-sum span:last-child b { color: hsl(var(--sun)); }
.lp-keep > p:last-child { max-width: 30rem; line-height: 1.55; color: hsl(var(--muted-foreground)); }
@media (min-width: 900px) { .lp-keep { grid-template-columns: auto minmax(0, 1fr); } .lp-keep > p:last-child { justify-self: end; } }

/* ---------------------------------------------------------------- pricing */
.lp-page-head { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.lp-page-head h1 { max-width: 20ch; font-size: clamp(2.125rem, 4.4vw, 3.5rem); line-height: 1.04; }
.lp-page-head .lp-lead { margin-top: 1.5rem; }
.lp-plans { display: grid; gap: 1.25rem; margin-top: clamp(3rem, 6vw, 4.5rem); align-items: stretch; }
.lp-page-head + .lp-section .lp-plans { margin-top: 0; }
@media (min-width: 720px) { .lp-plans-2, .lp-plans-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lp-plans-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lp-plans-3 .lp-plan-lead { margin: -1.25rem 0; padding-top: 3.25rem; padding-bottom: 3.25rem; } }
.lp-plan { display: flex; flex-direction: column; padding: clamp(1.75rem, 3vw, 2.25rem); border-radius: 2rem; background: hsl(var(--card)); box-shadow: inset 0 0 0 1px hsl(var(--foreground) / 0.08); scroll-margin-top: 7rem; transition: transform 700ms var(--lp-ease); }
.lp-plan:hover { transform: translateY(-4px); }
.site .lp-plan-lead { box-shadow: var(--shadow-stage); }
[data-theme='dark'] .lp-plan-lead { background: linear-gradient(165deg, hsl(10 62% 17%), hsl(var(--card)) 62%); box-shadow: inset 0 0 0 1px hsl(var(--sun) / 0.6), 0 30px 60px -34px hsl(12 88% 46% / 0.55); }
.lp-plan h3 { font-size: 1.5rem; line-height: 1.1; }
.lp-plan-tag { display: inline-block; margin-bottom: 0.875rem; padding: 0.3125rem 0.75rem; border-radius: 99px; background: hsl(var(--sun)); color: hsl(var(--ink)); font-family: 'Inter Tight', sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0; }
.lp-plan-desc { margin-top: 0.5rem; min-height: 2.9em; color: hsl(var(--muted-foreground)); line-height: 1.45; }
.lp-price { margin-top: 1.25rem; color: hsl(var(--muted-foreground)); }
.lp-price span { font-family: var(--lp-display); font-weight: 700; font-size: clamp(2.5rem, 4vw, 3rem); line-height: 1; color: hsl(var(--foreground)); font-variant-numeric: tabular-nums; }
.lp-plan-feats { display: grid; gap: 0.6875rem; margin: 1.75rem 0 2rem; padding: 1.75rem 0 0; border-top: 1px solid hsl(var(--border)); list-style: none; font-size: 0.9375rem; line-height: 1.4; }
.lp-plan-feats li { display: flex; gap: 0.625rem; } .lp-plan-feats .i { flex-shrink: 0; margin-top: 0.2rem; color: hsl(var(--ember)); stroke-width: 3; }
.lp-plan .btn { margin-top: auto; }
.lp-plans-note { margin-top: 1.75rem; font-size: 0.9375rem; color: hsl(var(--muted-foreground)); text-align: center; }
.lp-fold { margin-top: 2.5rem; border-top: 1px solid hsl(var(--border-strong)); border-bottom: 1px solid hsl(var(--border-strong)); }
.lp-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; list-style: none; cursor: pointer; font-family: var(--lp-display); font-weight: 700; font-size: 1.1875rem; }
.lp-fold > summary::-webkit-details-marker { display: none; }
.lp-fold > summary .i { transition: transform 500ms var(--lp-ease); } .lp-fold[open] > summary .i { transform: rotate(180deg); }
/* Plans side by side. Scrolls sideways on a phone, the feature names staying put. */
.lp-compare-scroll { position: relative; overflow-x: auto; margin-bottom: 1.5rem; scrollbar-width: thin; }
.lp-compare { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 0.9375rem; }
.lp-compare th, .lp-compare td { padding: 0.9375rem 1rem; border-bottom: 1px solid hsl(var(--border)); text-align: center; vertical-align: middle; }
.lp-compare thead th { font-family: var(--lp-display); font-weight: 700; font-size: 1.25rem; }
.lp-compare th small { display: block; font-family: 'Inter Tight', sans-serif; font-weight: 400; font-size: 0.8125rem; color: hsl(var(--muted-foreground)); }
.lp-compare tbody th { position: sticky; left: 0; z-index: 1; min-width: 11rem; max-width: 18rem; padding-left: 0; background: hsl(var(--tint)); text-align: left; font-weight: 600; }
.lp-page-head ~ .lp-section .lp-compare tbody th { background: hsl(var(--background)); }
.lp-compare .lead { background: hsl(var(--sun) / 0.16); }
.lp-compare .yes { color: hsl(var(--ember)); stroke-width: 3; margin-inline: auto; } .lp-compare .no { color: hsl(var(--faint)); }
.lp-compare td { font-weight: 600; font-variant-numeric: tabular-nums; }
/* On a phone the whole table fits the screen, up to three plans: nothing to scroll sideways for. A fourth plan brings the scroll back. */
@media (max-width: 639px) {
  .lp-compare { min-width: 0; table-layout: fixed; font-size: 0.8125rem; }
  .lp-compare:has(thead th:nth-child(5)) { min-width: 30rem; }
  .lp-compare th, .lp-compare td { padding: 0.75rem 0.125rem; }
  .lp-compare td svg { display: block; margin-inline: auto; }
  .lp-compare thead th { font-size: 0.6875rem; line-height: 1.25; letter-spacing: 0; overflow-wrap: anywhere; }
  .lp-compare thead th:first-child { width: 32%; }
  .lp-compare th small { margin-top: 0.1875rem; font-size: 0.625rem; line-height: 1.3; }
  .lp-compare tbody th { min-width: 0; max-width: none; padding-right: 0.5rem; line-height: 1.3; }
  .lp-compare tbody th small { display: none; }
}
.lp-closer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; padding: clamp(2rem, 6vw, 4.5rem); border-radius: 2rem; }
.lp-closer h2 { font-size: clamp(1.625rem, 3vw, 2.375rem); } .lp-closer p { margin-top: 0.75rem; color: hsl(var(--muted-foreground)); }
.lp-section-last { padding-top: 0; }

/* -------------------------------------------------------------------- FAQ */
.lp-faq-in { display: grid; gap: 2.5rem; }
@media (min-width: 960px) { .lp-faq-in { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 5rem; align-items: start; } .lp-faq .lp-head { position: sticky; top: 7.5rem; } }
.lp-qa { border-top: 2px solid hsl(var(--foreground)); }
.lp-qa details { border-bottom: 1px solid hsl(var(--border-strong)); }
.lp-qa summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.75rem; padding: 1.125rem 0; list-style: none; cursor: pointer; }
.lp-qa summary::-webkit-details-marker { display: none; }
.lp-qa summary h3 { font-weight: 600; font-size: clamp(1rem, 1.4vw, 1.125rem); line-height: 1.3; transition: color 300ms var(--lp-ease); }
.lp-qa summary .i { flex-shrink: 0; box-sizing: content-box; width: 1.125rem; height: 1.125rem; padding: 0.5rem; border-radius: 50%; background: hsl(var(--tint)); color: hsl(var(--ember)); transition: transform 500ms var(--lp-ease), background-color 300ms var(--lp-ease), color 300ms var(--lp-ease); }
.lp-qa details[open] summary .i { transform: rotate(45deg); background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.lp-qa summary:hover h3 { color: hsl(var(--ember)); }
/* Answers ease open and shut where the browser can animate to a natural height; elsewhere they simply open. */
:root.site { interpolate-size: allow-keywords; }
.lp-qa details::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size 420ms var(--lp-ease), opacity 420ms var(--lp-ease), content-visibility 420ms allow-discrete; }
.lp-qa details[open]::details-content { block-size: auto; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .lp-qa details::details-content { transition: none; } }
.lp-qa details > p { max-width: 40rem; padding: 0 3.5rem 1.75rem 0; line-height: 1.65; color: hsl(var(--muted-foreground)); text-wrap: pretty; }

/* -------------------------------------------------------- start (sign-up) */
.lp-band .lp-head p { color: hsl(var(--muted-foreground)); }
/* The closing ask: one bright card in the logo's colours, the first step of sign-up laid along a white bar. */
.lp-cta { padding: clamp(1.75rem, 5vw, 4rem); border-radius: 2rem; color: #fff; background: radial-gradient(42rem 26rem at 100% 0%, hsl(34 96% 56% / 0.5), transparent 65%), linear-gradient(115deg, hsl(4 78% 36%), hsl(12 84% 44%) 55%, hsl(24 90% 46%)); box-shadow: 0 50px 90px -50px hsl(12 88% 46% / 0.75), inset 0 0 0 1px hsl(0 0% 100% / 0.12); }
.lp-cta { position: relative; overflow: hidden; }
.lp-cta-copy { position: relative; }
.site .lp-cta-form { position: relative; z-index: 1; }
/* A guest's phone showing the ordering page, rising from behind the white bar, with the promise stamped beside it. */
.lp-cta-art { display: none; }
@media (min-width: 1040px) { .lp-cta-art { display: block; position: absolute; right: clamp(0rem, 4vw, 4rem); top: -3.5rem; bottom: -4.5rem; width: 24rem; overflow: hidden; }
  .lp-cta-art .bz-phone { width: 15rem; margin: 3.75rem 2.5rem 0 auto; transform: rotate(7deg); transform-origin: top right; box-shadow: 0 40px 70px -30px hsl(4 80% 12% / 0.8); }
  .lp-cta-art .lp-stamp { left: 0; right: auto; top: 5.5rem; width: 8.5rem; height: 8.5rem; background: #fff; color: hsl(10 78% 40%); transform: rotate(-12deg); } }
.lp-cta h2 { max-width: 16ch; font-size: clamp(2rem, 4.4vw, 3.5rem); line-height: 1.02; }
.lp-cta-copy p { margin-top: 1rem; max-width: 30rem; font-size: clamp(1rem, 1.3vw, 1.1875rem); line-height: 1.5; color: hsl(0 0% 100% / 0.92); }
.site .lp-cta-form { display: grid; gap: 1rem; align-items: end; margin-top: clamp(1.75rem, 4vw, 2.75rem); padding: 1.25rem; border-radius: 1.5rem; background: #fff; box-shadow: 0 30px 60px -34px hsl(4 80% 14% / 0.8); }
.site .lp-cta-form .field label { font-size: 0.8125rem; font-weight: 700; }
@media (min-width: 700px) { .site .lp-cta-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site .lp-cta-form .btn { grid-column: 1 / -1; } }
@media (min-width: 1040px) { .site .lp-cta-form { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } .site .lp-cta-form .btn { grid-column: auto; } }
.lp-cta-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0; font-weight: 600; }
.lp-cta-copy p.lp-cta-price { margin-top: 1.5rem; font-size: 1rem; color: #fff; }
.lp-cta-price b { font-family: var(--lp-display); font-size: 1.375rem; letter-spacing: -0.02em; }
.lp-cta-price span::before { content: '·'; margin: 0 0.625rem; opacity: 0.7; }
.lp-cta-solo { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; }
.site .lp-cta-solo .btn { background: #fff; color: hsl(10 78% 40%); }
.site .lp-cta-form .input, .site .lp-cta-form .select, .ct-form .input, .ct-form .select, .ct-form .textarea { height: 3.125rem; font-size: 1rem; border-radius: 0.875rem; border-color: hsl(var(--border-strong)); background-color: hsl(var(--background)); color: hsl(var(--foreground)); }
.site .input:focus-visible, .site .select:focus-visible, .site .textarea:focus-visible { outline: 2px solid hsl(var(--ember)); outline-offset: 1px; }

/* ----------------------------------------------- staff login (/login) */
.sl-main { padding-bottom: clamp(4rem, 8vw, 6rem); }
[data-theme='dark'] .sl-main { background: radial-gradient(52rem 30rem at 50% 0%, hsl(12 88% 46% / 0.2), transparent 65%); }
.sl-card { max-width: 38rem; margin: clamp(1rem, 4vw, 3rem) auto 0; padding: clamp(1.75rem, 4vw, 3rem); border-radius: 2rem; background: hsl(var(--card)); box-shadow: inset 0 0 0 1px hsl(var(--foreground) / 0.08), var(--shadow-stage); }
.sl-card h1 { font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.04; }
.sl-card .lp-lead { margin-top: 0.875rem; }
.sl-label { flex-basis: 100%; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: hsl(var(--faint)); }
.sl-card .lp-find { margin-top: 2rem; }
.sl-card .lp-find-field { flex-basis: 100%; }
.sl-card .lp-find .btn { flex: 1 1 100%; }
/* The restaurants this device has opened before: one tap each. */
.sl-recent { margin-top: 2rem; }
.sl-recent ul { display: grid; gap: 0.5rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }
.sl-recent a { display: flex; align-items: center; gap: 0.875rem; min-height: 4rem; padding: 0.75rem 1.25rem; border-radius: 1.25rem; background: hsl(var(--brand) / 0.12); box-shadow: inset 0 0 0 1px hsl(var(--brand) / 0.45); font-weight: 700; overflow-wrap: anywhere; transition: background-color 300ms var(--lp-ease), transform 500ms var(--lp-ease); }
.sl-recent a:hover { background: hsl(var(--brand) / 0.2); } .sl-recent a:active { transform: scale(0.99); }
.sl-recent a small { display: block; font-size: 0.8125rem; font-weight: 400; color: hsl(var(--muted-foreground)); }
.sl-recent a .i { margin-left: auto; flex-shrink: 0; color: hsl(var(--ember)); }
.sl-recent a .sl-in { margin-left: auto; padding: 0.1875rem 0.625rem; border-radius: 99px; background: hsl(var(--veg) / 0.16); color: hsl(var(--veg)); font-size: 0.75rem; font-weight: 700; white-space: nowrap; } .sl-recent a .sl-in + .i { margin-left: 0; }
.sl-recent[hidden] { display: none; }
.sl-help { margin-top: 1.5rem; font-size: 0.9375rem; line-height: 1.55; color: hsl(var(--muted-foreground)); }
.sl-foot { max-width: 38rem; margin: 1.5rem auto 0; text-align: center; font-size: 0.9375rem; color: hsl(var(--muted-foreground)); }

.lp-find { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.lp-find-field { transition: border-color 200ms var(--lp-ease), box-shadow 200ms var(--lp-ease); flex: 1 1 15rem; display: flex; align-items: center; min-width: 0; height: 3.5rem; padding-left: 1.5rem; border: 1px solid hsl(var(--border-strong)); border-radius: 99px; background: hsl(var(--card)); }
/* A field with its own frame takes the focus ring on the frame; the input inside stays bare. */
.lp-find-field:focus-within, .su-slug:focus-within { outline: none; border-color: hsl(var(--ember)); box-shadow: 0 0 0 3px hsl(var(--ember) / 0.28); }
.site .lp-find-field input:focus-visible, .site .su-slug input:focus-visible { outline: none; }
.lp-find-field span { color: hsl(var(--faint)); white-space: nowrap; }
.lp-find-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; padding: 0 1.25rem 0 0.125rem; color: hsl(var(--foreground)); font: inherit; font-weight: 600; }
.lp-miss { flex-basis: 100%; font-size: 0.9375rem; color: hsl(var(--danger-text)); }

/* On a phone the start button follows the page once the hero's own is out of sight. */
.lp-sticky { position: fixed; left: 0.75rem; right: 0.75rem; bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.625rem 0.625rem 0.625rem 1.5rem; border-radius: 99px; background: hsl(var(--card) / 0.96); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px hsl(var(--foreground) / 0.08), var(--shadow-stage); transform: translateY(160%); transition: transform 700ms var(--lp-ease); }
.lp-sticky p { font-weight: 700; font-size: 0.9375rem; line-height: 1.25; } .lp-sticky p span { display: block; font-size: 0.8125rem; font-weight: 400; color: hsl(var(--muted-foreground)); }
.lp-stuck .lp-sticky { transform: none; }
@media (min-width: 860px) { .lp-sticky { display: none; } }
@media (max-width: 859px) { .lp-stuck .lp-foot { padding-bottom: 6rem; } }

/* ---------------------------------------------------------------- footer */
.lp-foot { padding: clamp(3.5rem, 7vw, 5.5rem) 0 2rem; }
.site .lp-foot { --background: 18 34% 4%; background: var(--brand-wash) top / 100% 3px no-repeat, radial-gradient(50rem 22rem at 12% 0%, hsl(12 88% 46% / 0.14), transparent 65%), hsl(var(--background)); }
.lp-foot-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.5rem; max-width: calc(var(--lp-max) + 2 * var(--lp-gutter)); margin: 0 auto; padding: 0 var(--lp-gutter); }
.lp-foot-brand { grid-column: 1 / -1; }
.lp-foot-brand .lp-word { font-size: clamp(2rem, 4vw, 2.75rem); }
.lp-foot-brand > p { margin-top: 1rem; max-width: 22rem; color: hsl(var(--muted-foreground)); line-height: 1.55; }
.lp-contact { display: grid; gap: 0.375rem; justify-items: start; }
.lp-contact a { display: inline-flex; align-items: center; gap: 0.5rem; color: hsl(var(--foreground)); font-weight: 600; }
/* Where to follow the platform: round icon buttons, a thumb wide. */
.lp-follow { margin-top: 1.75rem; }
.lp-social { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.25rem 0 0; padding: 0; list-style: none; }
.lp-social a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; box-shadow: inset 0 0 0 1px hsl(var(--foreground) / 0.16); color: hsl(var(--muted-foreground)); transition: color 300ms var(--lp-ease), background-color 300ms var(--lp-ease), box-shadow 300ms var(--lp-ease), transform 500ms var(--lp-ease); }
.lp-social a:hover, .lp-social a:focus-visible { background: hsl(var(--brand) / 0.16); box-shadow: inset 0 0 0 1px hsl(var(--brand) / 0.6); color: hsl(var(--foreground)); }
.lp-social a:active { transform: scale(0.94); }
.lp-social .i { width: 1.25rem; height: 1.25rem; }
.lp-foot-nav { display: grid; align-content: start; justify-items: start; }
.lp-foot-h { margin-bottom: 0.5rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: hsl(var(--sun)); }
/* Links a thumb can hit: a taller tap area without more space between the lines. */
.lp-foot-nav a { padding: 0.4375rem 0; color: hsl(var(--muted-foreground)); transition: color 300ms var(--lp-ease); }
.lp-foot-nav a:hover, .lp-contact a:hover { color: hsl(var(--foreground)); text-decoration: underline; text-underline-offset: 0.25em; }
.lp-copy { max-width: calc(var(--lp-max) + 2 * var(--lp-gutter)); margin: 3rem auto 0; padding: 1.5rem var(--lp-gutter) 0; border-top: 1px solid hsl(var(--border)); font-size: 0.875rem; color: hsl(var(--faint)); }
@media (min-width: 860px) { .lp-foot-in { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); } .lp-foot-brand { grid-column: auto; } }

/* ---------------------------------------------------------------- contact */
.ct-main { padding-bottom: clamp(4rem, 8vw, 6rem); }
/* One card in two halves: who answers, on embers; the form beside it. */
.ct-panel { display: grid; border-radius: 2rem; overflow: hidden; background: hsl(var(--card)); box-shadow: inset 0 0 0 1px hsl(var(--foreground) / 0.08), var(--shadow-stage); }
@media (min-width: 960px) { .ct-panel { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); } }
.ct-side { display: flex; flex-direction: column; padding: clamp(1.75rem, 4vw, 3.25rem); background: radial-gradient(28rem 20rem at 0% 0%, hsl(14 90% 50% / 0.55), transparent 70%), linear-gradient(165deg, hsl(8 62% 21%), hsl(16 44% 11%)); }
.ct-side h1, .ct-side h2 { font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1.04; }
.ct-side .lp-lead { margin-top: 1.25rem; color: hsl(var(--foreground) / 0.88); }
.ct-side .lp-ticks { margin-top: 1.75rem; }
.ct-side .lp-ticks .i { background: #fff; color: hsl(10 78% 40%); }
.ct-side .ct-ways { margin-top: auto; padding-top: 2.5rem; border-top: 0; }
.ct-side .ct-ways > div { border-color: hsl(var(--foreground) / 0.18); } .ct-side .ct-ways > div:first-child { border-top: 1px solid hsl(var(--foreground) / 0.18); }
.ct-side .ct-ways dt { color: hsl(var(--foreground) / 0.8); } .ct-side .ct-ways dt .i { color: hsl(var(--sun)); }
.ct-panel .ct-card { padding: clamp(1.5rem, 3.5vw, 3rem); border-radius: 0; background: none; box-shadow: none; }
.ct-ways { margin: 2.5rem 0 0; border-top: 2px solid hsl(var(--foreground)); }
.ct-ways > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding: 1.125rem 0; border-bottom: 1px solid hsl(var(--border)); }
.ct-ways dt { display: inline-flex; align-items: center; gap: 0.625rem; align-self: start; font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
.ct-ways dt .i { color: hsl(var(--ember)); }
.ct-ways dd { margin: 0; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.ct-ways a { text-decoration: underline; text-decoration-color: hsl(var(--ember) / 0.5); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.ct-ways a:hover { color: hsl(var(--ember)); }
.ct-note { display: flex; gap: 0.625rem; margin-top: 1.5rem; font-size: 0.875rem; line-height: 1.5; color: hsl(var(--muted-foreground)); }
.ct-note .i { flex-shrink: 0; margin-top: 0.2rem; }
.ct-card { padding: clamp(1.5rem, 3.5vw, 2.5rem); border-radius: 2rem; background: hsl(var(--card)); box-shadow: 0 0 0 0.4375rem hsl(var(--foreground) / 0.05), inset 0 0 0 1px hsl(var(--foreground) / 0.08), var(--shadow-lift); }
.ct-form { display: grid; gap: 1.125rem; }
.ct-form h2, .ct-form h3, .ct-done h2, .ct-done h3 { font-family: var(--lp-display); font-weight: 700; font-size: 1.75rem; line-height: 1.1; }
.ct-row { display: grid; gap: 1.125rem; }
@media (min-width: 560px) { .ct-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ct-form .textarea { height: auto; min-height: 7rem; padding-top: 0.75rem; line-height: 1.5; }
.ct-form .field-error { font-size: 0.8125rem; color: hsl(var(--danger-text)); }
.ct-opt { margin-left: 0.25rem; font-weight: 400; font-size: 0.8125rem; color: hsl(var(--faint)); }
.ct-under { display: flex; justify-content: space-between; gap: 1rem; }
.ct-count { margin-left: auto; font-size: 0.75rem; color: hsl(var(--faint)); font-variant-numeric: tabular-nums; }
.ct-fail { padding: 0.75rem 1rem; border-radius: 0.875rem; background: hsl(var(--destructive) / 0.12); box-shadow: inset 0 0 0 1px hsl(var(--destructive) / 0.4); color: hsl(var(--danger-text)); font-size: 0.9375rem; }
.ct-small { font-size: 0.8125rem; color: hsl(var(--faint)); text-align: center; }
.ct-done { display: grid; justify-items: start; gap: 0.75rem; padding: 1rem 0; outline: none; animation: lp-up 700ms var(--lp-ease); }
.ct-done-ic { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-bottom: 0.5rem; border-radius: 50%; background: hsl(var(--veg) / 0.14); color: hsl(var(--veg)); }
.ct-done-ic .i { width: 1.5rem; height: 1.5rem; }
.ct-done p { max-width: 26rem; line-height: 1.6; color: hsl(var(--muted-foreground)); overflow-wrap: anywhere; }
.ct-done p b { color: hsl(var(--foreground)); font-weight: 600; }
.ct-done .btn { margin-top: 0.75rem; }

/* ---------------------------------------------------------------- sign-up */
.su-main { max-width: calc(64rem + 2 * var(--lp-gutter)); margin: 0 auto; padding: 0 var(--lp-gutter) 4rem; }
.su-grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 960px) { .su-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 3.5rem; } }
.su-intro h1 { margin-top: 0.75rem; font-family: var(--lp-display); font-weight: 700; font-size: clamp(1.875rem, 4vw, 2.625rem); line-height: 1.05;  text-wrap: balance; }
.su-intro > p:not(.lp-eyebrow) { margin-top: 0.75rem; color: hsl(var(--muted-foreground)); line-height: 1.6; }
.su-card { margin-top: 1.75rem; padding: clamp(1.25rem, 3vw, 1.75rem); border: 1px solid hsl(var(--border)); border-radius: 1.25rem; background: hsl(var(--card)); box-shadow: var(--shadow-lift); }
.su-slug { display: flex; align-items: center; min-width: 0; height: 2.75rem; border: 1px solid hsl(var(--border-strong)); border-radius: 0.625rem; background: hsl(var(--background)); overflow: hidden; }
.su-slug span { padding-left: 0.75rem; color: hsl(var(--faint)); font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.su-slug input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; padding: 0 0.75rem 0 0.125rem; color: hsl(var(--foreground)); font: inherit; font-size: 0.9375rem; }
.su-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.5rem; }
.su-plan { display: grid; gap: 0.125rem; align-content: start; text-align: left; padding: 0.625rem 0.75rem; border: 1px solid hsl(var(--border-strong)); border-radius: 0.625rem; background: hsl(var(--background)); color: hsl(var(--foreground)); font: inherit; cursor: pointer; }
.su-plan:hover { border-color: hsl(var(--ember) / 0.6); }
.su-plan[aria-checked="true"] { border-color: hsl(var(--ember)); box-shadow: inset 0 0 0 1px hsl(var(--ember)); background: hsl(var(--ember) / 0.08); }
.su-plan:focus-visible { outline: 2px solid hsl(var(--ember)); outline-offset: 1px; }
.su-status { display: flex; align-items: center; gap: 0.375rem; min-height: 1.25rem; margin-top: 0.375rem; font-size: 0.8125rem; color: hsl(var(--muted-foreground)); }
.su-status.ok { color: hsl(var(--veg)); }
.su-status.bad { color: hsl(var(--danger-text)); }
.su-trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.su-side { display: grid; gap: 1rem; }
@media (min-width: 960px) { .su-side { position: sticky; top: 5.5rem; padding-top: 4.75rem; } }
.su-side h2 { font-family: var(--lp-display); font-weight: 700; font-size: 1.125rem;  }
.su-side ul { display: grid; gap: 0.75rem; list-style: none; padding: 0; margin: 0; }
.su-side li { display: flex; gap: 0.625rem; font-size: 0.9375rem; line-height: 1.5; color: hsl(var(--muted-foreground)); }
.su-side li .i { flex-shrink: 0; margin-top: 0.2rem; color: hsl(var(--ember)); }
.su-side li b { color: hsl(var(--foreground)); font-weight: 600; }

/* ------------------------------------------------------------ legal pages */
.lg-main { max-width: calc(44rem + 2 * var(--lp-gutter)); margin: 0 auto; padding: 0 var(--lp-gutter) 4rem; }
.lg-main h1 { margin-top: 0.875rem; font-family: var(--lp-display); font-weight: 700; font-size: clamp(1.875rem, 4.5vw, 2.75rem); line-height: 1.08;  text-wrap: balance; }
.lg-updated { margin-top: 0.5rem; font-size: 0.875rem; color: hsl(var(--faint)); }
.lg-lead { margin-top: 0.875rem; font-size: 1.0625rem; color: hsl(var(--muted-foreground)); text-wrap: pretty; }
.lg-body { margin-top: 1.75rem; color: hsl(var(--foreground) / 0.9); line-height: 1.7; }
.lg-body h2 { margin: 2rem 0 0.5rem; font-family: var(--lp-display); font-weight: 700; font-size: 1.1875rem;  color: hsl(var(--foreground)); }
.lg-body p, .lg-body ul { margin: 0 0 1rem; text-wrap: pretty; overflow-wrap: anywhere; }
.lg-body ul { padding-left: 1.25rem; list-style: disc; }
.lg-body li + li { margin-top: 0.375rem; }
.lg-note { margin-top: 1.5rem; font-size: 0.875rem; color: hsl(var(--muted-foreground)); }