:root {
  --navy: #0b1020;
  --navy-2: #071955;
  --blue: #0090ff;
  --cyan: #05c5ed;
  --violet: #6558ef;
  --ink: #080b12;
  --muted: #4f5665;
  --soft: #f6f7fb;
  --line: #d9dde6;
  --green: #05b889;
  --content: 1200px;
  --radius: 8px;
  --shadow: 0 2px 6px rgba(7, 16, 43, .14);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 70px;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: #fff;
  font-family: "Inter", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

body.menu-open { overflow: hidden; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: "Montserrat", Arial, sans-serif; }

.container {
  width: min(var(--content), calc(100% - 48px));
  margin-inline: auto;
}

.section { padding: 76px 0; }
.section-soft { background: var(--soft); }
.section-dark { color: #fff; }

.kicker {
  margin-bottom: 12px;
  color: var(--blue);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
}

.section-copy h2,
.section-heading h2 {
  margin-bottom: 20px;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.13;
  letter-spacing: -.04em;
}

.section-copy > p:last-of-type,
.section-heading > p:last-child {
  margin-bottom: 0;
  line-height: 1.5;
}

.section-heading.centered {
  margin: 0 auto 38px;
  text-align: center;
}

.section-heading.centered h2 { margin-bottom: 6px; }

.button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 10px 22px;
  font-weight: 700;
  line-height: 1;
  transition: transform .3s var(--ease-out), box-shadow .3s ease, background .3s ease;
}

.button:hover { transform: translateY(-3px) scale(1.015); }
.button:active { transform: translateY(0) scale(.985); }
.button:focus-visible, .primary-nav a:focus-visible, .accordion button:focus-visible, .menu-toggle:focus-visible { outline: 3px solid rgba(0, 144, 255, .38); outline-offset: 3px; }
.button-primary { color: #041021; background: var(--cyan); }
.button-primary:hover { background: #25d4f3; box-shadow: 0 8px 24px rgba(5, 197, 237, .28); }
.button-light { color: #111; background: #fff; }
.button-outline { border-color: #aeb4bf; color: #111; background: #fff; }
.button-small { min-height: 40px; padding: 9px 18px; font-size: 14px; }
.button-large { min-height: 56px; padding: 14px 28px; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; }

.gradient-text {
  color: transparent;
  background: linear-gradient(90deg, #775cff 0%, #3e85ff 54%, #14c8f2 100%);
  background-clip: text;
  -webkit-background-clip: text;
}

/* Header */
.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  height: 70px;
  border-bottom: 1px solid #c9cbd0;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(14px);
  transition: box-shadow .35s ease, background .35s ease;
}

.site-header.scrolled { background: rgba(255, 255, 255, .985); box-shadow: 0 8px 30px rgba(7, 16, 43, .09); }

.nav-shell {
  display: grid;
  width: min(var(--content), calc(100% - 48px));
  height: 70px;
  align-items: center;
  margin: auto;
  grid-template-columns: 210px 1fr auto;
}

.brand { display: inline-flex; align-items: center; gap: 7px; font-family: "Montserrat", sans-serif; font-weight: 700; }
.brand img { flex: 0 0 auto; width: 43px; height: 43px; object-fit: contain; }
.brand span { font-size: 29px; letter-spacing: -.04em; }
.brand-light { color: #fff; }

.primary-nav { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 3vw, 42px); }
.primary-nav a { font-size: 14px; font-weight: 600; transition: color .15s ease; }
.primary-nav a:hover { color: var(--blue); }
.nav-actions { display: flex; gap: 10px; }
.menu-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; }
.menu-toggle span { display: block; width: 24px; height: 2px; margin: 5px auto; border-radius: 2px; background: var(--ink); transition: .2s ease; }

/* Hero */
.hero {
  position: relative;
  min-height: 750px;
  overflow: hidden;
  background: radial-gradient(circle at 86% 48%, rgba(0, 111, 255, .28), transparent 34%), linear-gradient(100deg, #0b1020 9%, #0a1748 65%, #061850 100%);
}

.hero::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, rgba(11, 16, 32, .45), transparent 48%);
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 750px;
  align-items: center;
  grid-template-columns: 59% 41%;
}

.hero-copy { padding: 62px 0 45px; }
.hero h1 {
  margin-bottom: 18px;
  font-size: clamp(43px, 4.3vw, 62px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.045em;
}

.hero h1 b { color: var(--blue); }
.hero-lede { max-width: 610px; margin-bottom: 26px; font-size: 18px; line-height: 1.27; }
.hero h2 { margin-bottom: 24px; font-size: 23px; letter-spacing: -.025em; }
.hero-benefits { display: flex; max-width: 660px; align-items: center; gap: 24px; margin-top: 28px; }
.mini-benefit { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.mini-benefit strong { font-family: "Montserrat", sans-serif; font-size: 12px; line-height: 1.15; }
.mini-icon { display: grid; width: 40px; height: 39px; flex: 0 0 auto; place-items: center; overflow: hidden; border: 1px solid #fff; border-radius: 10px; }
.mini-icon img { width: 30px; height: 30px; object-fit: contain; }
.hero-note { display: none; }

.hero-visual { position: relative; height: 100%; min-height: 680px; }
.phone-glow { position: absolute; top: 50%; left: 45%; width: 455px; height: 455px; transform: translate(-50%, -50%); border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: rgba(0,144,255,.08); box-shadow: 0 0 80px rgba(0,144,255,.2); }
.hero-phone { position: absolute; z-index: 2; bottom: 30px; left: 2%; width: 380px; max-width: none; height: 676px; object-fit: contain; }
.metric-card { position: absolute; z-index: 3; right: -18px; display: flex; width: 168px; min-height: 62px; align-items: center; gap: 8px; border: 1px solid #c8cbd2; border-radius: 12px; padding: 8px 10px; color: #111; background: #fff; box-shadow: 0 4px 8px rgba(0,0,0,.3); }
.metric-card img { width: 39px; height: 39px; flex: 0 0 auto; object-fit: contain; }
.metric-card span { display: flex; min-width: 0; flex-direction: column; }
.metric-card strong { font-size: 17px; line-height: 1.1; white-space: nowrap; }
.metric-card small { font-size: 12px; }
.metric-budget { top: 105px; }
.metric-party { top: 216px; }
.metric-restriction { top: 327px; }
.metric-match { top: 438px; }
.hero-food { position: absolute; z-index: 1; border-radius: 50%; object-fit: cover; opacity: .36; }
.hero-food-top { top: -80px; right: 250px; width: 220px; height: 220px; }
.hero-food-mid { top: 305px; right: 410px; width: 248px; height: 207px; }
.hero-food-bottom { right: 0; bottom: -65px; width: 290px; height: 290px; }

/* Comparison */
.problem-grid { display: grid; align-items: center; grid-template-columns: 32% 34% 34%; }
.problem-copy { max-width: 350px; padding-right: 42px; }
.comparison-card { position: relative; height: 488px; overflow: hidden; border: 1px solid #d8dae0; border-radius: 8px; box-shadow: var(--shadow); }
.comparison-card { transition: transform .45s var(--ease-out), box-shadow .45s ease; }
.comparison-card:hover { transform: translateY(-7px); box-shadow: 0 18px 42px rgba(7, 16, 43, .14); }
.comparison-card h3 { margin: 25px 0 0; text-align: center; font-size: 16px; }
.comparison-bad { background: #fff2f2; }
.comparison-bad h3 { color: #e40000; }
.comparison-good { background: #e5f3ff; }
.comparison-good h3 { color: #0077c8; }
.chat { position: absolute; z-index: 3; border-radius: 7px; padding: 10px 14px; background: #fff; font-size: 12px; line-height: 1.15; }
.chat-customer { top: 68px; left: 18px; width: 68%; }
.chat-staff { top: 158px; right: 16px; width: 42%; }
.chat-smart { top: 137px; left: 18px; width: 64%; }
.food-row { display: flex; gap: 5px; margin-top: 8px; }
.food-row img { width: 29%; aspect-ratio: 1; border-radius: 4px; object-fit: cover; }
.person { position: absolute; z-index: 1; bottom: -20px; object-fit: contain; object-position: bottom; }
.person-left { left: -15px; width: 58%; height: 300px; filter: grayscale(1); }
.person-right { right: -22px; width: 58%; height: 300px; }
.process-list { position: absolute; z-index: 2; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.bad-list { top: 254px; right: 25px; width: 42%; }
.good-list { top: 278px; left: 18px; width: 64%; }
.process-list li { display: flex; align-items: center; min-height: 31px; gap: 9px; }
.process-list li::before { display: grid; width: 18px; height: 18px; flex: 0 0 auto; place-items: center; border-radius: 50%; font-size: 11px; font-weight: 800; content: "•"; }
.bad-list li::before { border: 1px solid #222; }
.good-list li::before { color: #fff; background: var(--green); content: "✓"; }
.result-badge { position: absolute; z-index: 4; bottom: 16px; min-height: 30px; border-radius: 7px; padding: 6px 14px; font-size: 12px; font-weight: 700; }
.result-bad { right: 32px; color: #d40000; background: #ffd3d5; }
.result-good { left: 18px; color: #0077c8; background: #caeaff; }

/* How it works */
.steps-grid { display: grid; gap: 10px; grid-template-columns: repeat(6, 1fr); }
.carousel-controls { display: none; }
.step-card { min-width: 0; min-height: 435px; border: 1px solid #d8dade; border-radius: 8px; padding: 14px 14px 18px; background: #fff; box-shadow: var(--shadow); }
.step-card { transition: transform .4s var(--ease-out), box-shadow .4s ease, border-color .4s ease; }
.step-card:hover { transform: translateY(-8px); border-color: rgba(0, 144, 255, .45); box-shadow: 0 18px 38px rgba(7, 16, 43, .13); }
.step-card h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 14px; }
.step-card h3 span, .detail-steps article > span { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: var(--blue); font-weight: 700; }
.step-image { height: 100%; overflow: hidden; border-radius: 18px 18px 0 0; }
.step-image img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.step-image img { transition: transform .65s var(--ease-out); }
.step-card:hover .step-image img { transform: scale(1.035); }
.step-card p { margin: 16px 0 0; text-align: center; font-size: 13px; line-height: 1.22; }
.info-bar { display: flex; min-height: 48px; align-items: center; justify-content: center; gap: 10px; margin-top: 42px; border-radius: 7px; padding: 10px 20px; background: var(--soft); font-size: 14px; text-align: center; }
.info-bar span { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: #4d91f7; font-weight: 700; }

/* Customer experience */
.experience-grid { display: grid; align-items: center; grid-template-columns: 31% 69%; }
.experience-copy { padding-right: 40px; }
.experience-benefits { margin: 28px 0 0; padding: 0; list-style: none; }
.experience-benefits li { display: flex; align-items: center; gap: 14px; margin: 18px 0; font-family: "Montserrat", sans-serif; font-weight: 700; }
.experience-benefits span { display: grid; width: 50px; height: 50px; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 50%; background: var(--blue); }
.experience-benefits img { width: 34px; height: 34px; object-fit: contain; }
.experience-showcase { display: grid; grid-template-columns: repeat(3, 1fr); }
.experience-tabs { display: none; }
.phone-panel { min-width: 0; height: 489px; overflow: hidden; background: #fff; }
.phone-panel { transition: transform .45s var(--ease-out), box-shadow .45s ease; }
.phone-panel:hover { position: relative; z-index: 2; transform: translateY(-7px); box-shadow: 0 20px 42px rgba(7, 16, 43, .13); }
.phone-panel + .phone-panel { margin-left: 10px; }
.phone-panel h3 { display: flex; height: 58px; align-items: center; gap: 10px; margin: 0; padding: 0 14px; font-size: 16px; white-space: nowrap; }
.phone-panel h3 b { color: var(--blue); font-size: 27px; }
.phone-panel > img { width: 100%; height: 560px; object-fit: cover; object-position: top; }

/* Recommendations */
.recommendations-grid { display: grid; min-height: 700px; align-items: center; grid-template-columns: 34% 40% 26%; }
.recommendations-copy { padding-right: 30px; }
.recommendations-copy .button { margin-top: 34px; }
.recommendation-phone { display: flex; height: 700px; align-items: flex-start; justify-content: center; overflow: hidden; filter: drop-shadow(0 0 25px rgba(0,144,255,.2)); }
.recommendation-phone img { width: 235%; max-width: none; height: auto; flex: 0 0 auto; object-fit: contain; transform: translateY(-13%); }
.recommendation-phone img { transition: transform .7s var(--ease-out), filter .7s ease; }
.recommendation-phone:hover img { transform: translateY(calc(-13% - 8px)) scale(1.02); filter: drop-shadow(0 22px 25px rgba(0, 144, 255, .18)); }
.recommendation-list { margin: 0; padding: 0; list-style: none; }
.recommendation-list li { display: flex; align-items: flex-start; gap: 14px; margin: 34px 0; }
.recommendation-list img { width: 50px; height: 50px; flex: 0 0 auto; object-fit: contain; }
.recommendation-list span { display: flex; flex-direction: column; }
.recommendation-list strong { margin-bottom: 3px; font-family: "Montserrat", sans-serif; font-size: 16px; }
.recommendation-list small { font-size: 13px; line-height: 1.3; }

/* Owners */
.owners { position: relative; overflow: hidden; padding: 70px 0 76px; background: #07133e; }
.owners-backdrop { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,18,61,.9), rgba(5,18,61,.78)), url("/standalone-homepage/assets/business_owners-imgBusinessOwners.png") center/cover; }
.owners-inner { position: relative; z-index: 1; }
.owners-top { display: grid; align-items: center; grid-template-columns: 54% 46%; }
.owners-copy { max-width: 590px; }
.owners-copy h2 { font-size: 34px; }
.owners-copy > p:last-child { max-width: 465px; }
.insights-image { width: 100%; max-height: 260px; border-radius: 10px; object-fit: contain; }
.owner-benefits { display: grid; gap: 10px; margin-top: 28px; grid-template-columns: repeat(4, 1fr); }
.owner-benefits article { min-height: 175px; border-radius: 8px; padding: 25px 15px 18px; color: #111; background: #fff; text-align: center; }
.owner-benefits article { transition: transform .4s var(--ease-out), box-shadow .4s ease; }
.owner-benefits article:hover { transform: translateY(-8px); box-shadow: 0 18px 38px rgba(0, 0, 0, .22); }
.owner-benefits img { width: 50px; height: 50px; margin: 0 auto 8px; object-fit: contain; }
.owner-benefits h3 { margin: 0 0 4px; font-size: 15px; }
.owner-benefits p { margin: 0; font-size: 13px; line-height: 1.25; }

/* Platform */
.platform { padding-bottom: 82px; }
.platform-heading { max-width: 660px; }
.platform-heading p:last-child { font-size: 14px; }
.platform-banner { display: flex; min-height: 192px; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border-radius: 8px; color: #fff; background: linear-gradient(rgba(5,18,61,.8), rgba(5,18,61,.8)), url("/standalone-homepage/assets/platform-imgFrame45.png") center/cover; text-align: center; }
.platform-banner .brand span { font-size: 30px; }
.platform-banner p { margin: 8px 20px 0; font-size: 13px; }
.platform-cards { display: grid; gap: 14px; margin-top: 58px; grid-template-columns: repeat(4, 1fr); }
.platform-card { display: flex; min-height: 243px; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #d3d5da; border-radius: 10px; text-align: center; }
.platform-card { transition: transform .4s var(--ease-out), box-shadow .4s ease, border-color .4s ease; }
.platform-card:hover { transform: translateY(-7px); box-shadow: 0 17px 38px rgba(7, 16, 43, .11); }
.platform-card.active { border-color: var(--blue); }
.platform-card img { width: 90px; height: 90px; object-fit: contain; }
.platform-card h3 { margin: 6px 0 4px; font-size: 16px; }
.platform-card span { border-radius: 20px; padding: 2px 9px; color: #fff; background: #0b75d9; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.platform-card p { max-width: 180px; margin: 7px 0 0; font-size: 12px; }
.platform-card.future img { filter: grayscale(1); opacity: .78; }
.platform-card.future span { color: #555; background: #e6e6e6; }

/* Details + FAQ */
.details { padding-bottom: 42px; }
.details-grid { display: grid; gap: 45px; grid-template-columns: 1fr 1.03fr; }
.details-column > .section-copy { padding-right: 28px; }
.detail-steps { display: grid; gap: 14px; margin-top: 28px; }
.detail-steps article { display: flex; gap: 16px; min-height: 127px; border-radius: 8px; padding: 18px 22px; background: #fff; box-shadow: var(--shadow); }
.detail-steps article { transition: transform .4s var(--ease-out), box-shadow .4s ease; }
.detail-steps article:hover { transform: translateX(6px); box-shadow: 0 14px 30px rgba(7, 16, 43, .12); }
.detail-steps article > span { width: 30px; margin-top: 2px; clip-path: polygon(50% 0, 64% 12%, 82% 10%, 90% 28%, 100% 42%, 93% 59%, 94% 78%, 76% 87%, 62% 100%, 45% 94%, 27% 99%, 16% 82%, 0 71%, 5% 51%, 0 34%, 17% 21%, 29% 5%); }
.detail-steps h3 { margin: 0 0 5px; font-size: 16px; }
.detail-steps p { margin: 0; font-size: 13px; line-height: 1.25; }

.faq-panel { border-radius: 8px; padding: 32px; color: #fff; background: #071957; }
.faq-panel > h2 { margin-bottom: 25px; font-size: 29px; line-height: 1.15; letter-spacing: -.04em; }
.accordion { display: grid; gap: 14px; }
.accordion-item { overflow: hidden; border-radius: 7px; color: #111; background: #fff; }
.accordion-item button { display: flex; width: 100%; min-height: 54px; align-items: center; justify-content: space-between; border: 0; padding: 14px 16px; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.accordion-item button span { padding-right: 15px; font-size: 13px; font-weight: 700; }
.accordion-item button b { font-size: 18px; }
.accordion-answer { max-height: 0; overflow: hidden; opacity: 0; padding: 0 16px; transition: max-height .45s var(--ease-out), opacity .3s ease, padding .45s var(--ease-out); }
.accordion-item.open .accordion-answer { max-height: 360px; opacity: 1; padding-bottom: 16px; }
.accordion-answer p { margin: 0; font-size: 13px; line-height: 1.4; }
.faq-panel > .button { margin-top: 28px; }
.legal-note { display: none; }

/* CTA */
.cta-section { padding: 80px 0; }
.cta-card { position: relative; display: flex; min-height: 382px; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border-radius: 8px; padding: 50px 24px; color: #fff; background: linear-gradient(rgba(5,12,37,.86), rgba(5,12,37,.86)), url("/standalone-homepage/assets/cta-imgFrame55.png") center/cover; text-align: center; }
.cta-card::before, .cta-card::after { position: absolute; width: 380px; height: 380px; border-radius: 50%; content: ""; background: radial-gradient(circle, rgba(67,87,230,.28), transparent 64%); }
.cta-card::before { top: -240px; left: -100px; }
.cta-card::after { right: -80px; bottom: -250px; }
.cta-card > * { position: relative; z-index: 1; }
.cta-card h2 { margin-bottom: 16px; font-size: clamp(32px, 4vw, 47px); line-height: 1.14; letter-spacing: -.04em; }
.cta-card p { margin-bottom: 30px; font-size: 18px; }

/* Footer */
.site-footer { position: relative; overflow: hidden; min-height: 261px; color: #fff; background: linear-gradient(102deg, #0b1020, #292d71); }
.footer-wave { position: absolute; inset: 0; background: url("/standalone-homepage/assets/footer-imgPngwingCom511.png") center 42%/cover; opacity: .1; }
.footer-grid { position: relative; z-index: 1; display: grid; min-height: 261px; align-items: center; grid-template-columns: 70% 30%; }
.footer-legal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 18px; font-family: "Montserrat", sans-serif; font-size: 13px; }
.footer-legal-title { font-weight: 700; color: #fff; }
.footer-legal-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; color: rgba(255,255,255,.45); }
.footer-legal a { color: rgba(255,255,255,.78); text-decoration: none; padding: 4px 0; }
.footer-legal a:hover, .footer-legal a:focus-visible { color: #fff; text-decoration: underline; }
.footer-brand img { width: 66px; height: 66px; }
.footer-brand span { font-size: 48px; }
.tagline { margin: -10px 0 18px 73px; font-size: 13px; }
.footer-benefits { display: flex; gap: 24px; }
.contact-list { display: grid; gap: 12px; font-style: normal; }
.contact-list > div, .contact-list > a { display: flex; align-items: center; gap: 12px; }
.contact-list img { width: 34px; height: 34px; flex: 0 0 auto; object-fit: contain; }
.contact-list p { margin: 0; font-size: 14px; }
.contact-list strong { font-size: 14px; }

/* Scroll and entrance motion */
.motion-ready .reveal {
  opacity: 0;
  filter: blur(3px);
  transform: translate3d(0, 34px, 0);
  transition:
    opacity .75s ease var(--reveal-delay, 0ms),
    transform .85s var(--ease-out) var(--reveal-delay, 0ms),
    filter .65s ease var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.motion-ready .reveal.reveal-left { transform: translate3d(-42px, 0, 0); }
.motion-ready .reveal.reveal-right { transform: translate3d(42px, 0, 0); }
.motion-ready .reveal.reveal-scale { transform: scale(.94); }

.motion-ready .reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

.motion-ready .hero-food { animation: gentle-float 8s ease-in-out infinite alternate; }
.motion-ready .hero-food-mid { animation-delay: -2s; animation-duration: 10s; }
.motion-ready .hero-food-bottom { animation-delay: -5s; animation-duration: 12s; }
.motion-ready .hero-phone { animation: phone-float 5s ease-in-out 1s infinite alternate; }
.motion-ready .phone-glow { animation: glow-pulse 4.5s ease-in-out infinite alternate; }

@keyframes gentle-float {
  from { transform: translate3d(0, -5px, 0) rotate(-1deg); }
  to { transform: translate3d(8px, 10px, 0) rotate(2deg); }
}

@keyframes phone-float {
  from { translate: 0 0; }
  to { translate: 0 -7px; }
}

@keyframes glow-pulse {
  from { opacity: .68; scale: .98; }
  to { opacity: 1; scale: 1.035; }
}

@media (max-width: 1180px) {
  .nav-shell { grid-template-columns: 190px 1fr auto; }
  .primary-nav { gap: 18px; }
  .hero-grid { grid-template-columns: 56% 44%; }
  .hero-benefits { gap: 12px; }
  .mini-benefit strong { font-size: 10px; }
  .metric-card { right: 0; width: 150px; }
  .hero-phone { left: -3%; }
  .steps-grid { grid-template-columns: repeat(3, 1fr); }
  .step-card { min-height: 420px; }
  .phone-panel h3 { font-size: 13px; }
}

@media (max-width: 960px) {
  .site-header, .nav-shell { height: 64px; }
  .nav-shell { display: flex; justify-content: space-between; }
  .site-header { height: 64px; }
  .brand span { font-size: 25px; }
  .brand img { width: 38px; height: 38px; }
  .menu-toggle { display: block; order: 3; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .primary-nav { position: fixed; inset: 64px 0 auto; display: none; flex-direction: column; align-items: stretch; gap: 0; border-bottom: 1px solid var(--line); padding: 12px 24px 22px; background: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.12); }
  .primary-nav { display: flex; visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-14px); transition: opacity .28s ease, transform .38s var(--ease-out), visibility .28s; }
  .primary-nav.open { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); }
  .primary-nav a { padding: 13px 5px; }
  .nav-actions { margin-left: auto; margin-right: 8px; }
  .nav-actions .button-outline { display: none; }

  .hero-grid { min-height: auto; grid-template-columns: 1fr; }
  .hero-copy { padding: 72px 0 30px; }
  .hero-visual { min-height: 640px; }
  .hero-phone { bottom: 0; left: 50%; transform: translateX(-50%); }
  .phone-glow { left: 50%; }
  .metric-card { right: 8%; }
  .hero-food-mid { right: auto; left: -50px; }

  .problem-grid { gap: 16px; grid-template-columns: 1fr 1fr; }
  .problem-copy { max-width: 580px; padding: 0 0 15px; grid-column: 1 / -1; }
  .experience-grid { gap: 34px; grid-template-columns: 1fr; }
  .experience-copy { max-width: 620px; padding: 0; }
  .recommendations-grid { grid-template-columns: 1fr 1fr; }
  .recommendations-copy { grid-column: 1 / -1; }
  .recommendation-list li { margin: 22px 0; }
  .owner-benefits { grid-template-columns: 1fr 1fr; }
  .platform-cards { grid-template-columns: 1fr 1fr; }
  .details-grid { grid-template-columns: 1fr; }
  .details-column > .section-copy { max-width: 680px; }
  .footer-grid { gap: 35px; grid-template-columns: 1fr; padding: 45px 0; }
  .footer-benefits { flex-wrap: wrap; }
  .contact-list { max-width: 420px; }
}

@media (max-width: 680px) {
  .container, .nav-shell { width: min(100% - 32px, var(--content)); }
  .section { padding: 58px 0; }
  .nav-actions { display: none; }
  .brand { gap: 4px; }
  .brand span { font-size: 22px; }

  .hero h1 { font-size: clamp(38px, 10.5vw, 47px); }
  .hero h1 br { display: block; }
  .hero-lede { font-size: 16px; }
  .hero h2 { font-size: 19px; }
  .hero .button-row { display: grid; grid-template-columns: 1fr 1fr; }
  .hero .button-row .button { width: 100%; padding-inline: 14px; font-size: 14px; white-space: nowrap; }
  .hero-benefits { display: grid; grid-template-columns: 1fr 1fr; }
  .mini-benefit { min-width: 0; white-space: normal; }
  .hero-note { margin-top: 34px; }
  .hero-visual { min-height: 540px; }
  .hero-phone { width: 305px; height: 542px; }
  .phone-glow { width: 330px; height: 330px; }
  .metric-card { right: 0; width: 135px; min-height: 53px; padding: 6px 8px; }
  .metric-card img { width: 32px; height: 32px; }
  .metric-card strong { font-size: 14px; }
  .metric-card small { font-size: 10px; }
  .metric-budget { top: 70px; }
  .metric-party { top: 155px; }
  .metric-restriction { top: 240px; }
  .metric-match { top: 325px; }

  .problem-grid { grid-template-columns: 1fr; }
  .comparison-card { height: 480px; }
  .steps-grid {
    grid-auto-columns: min(84%, 320px);
    grid-template-columns: none;
    grid-auto-flow: column;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 2px 2px 14px;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .steps-grid::-webkit-scrollbar { display: none; }
  .step-card { scroll-snap-align: start; scroll-snap-stop: always; }
  .steps-controls { display: grid; align-items: center; gap: 10px; margin-top: 14px; grid-template-columns: 42px 1fr auto 42px; }
  .carousel-arrow { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #cdd4df; border-radius: 50%; color: #071957; background: #fff; font-size: 21px; cursor: pointer; transition: color .25s ease, background .25s ease, transform .25s ease; }
  .carousel-arrow:hover { color: #fff; background: var(--blue); transform: scale(1.06); }
  .carousel-arrow:disabled { opacity: .35; cursor: default; transform: none; }
  .carousel-dots { display: flex; align-items: center; justify-content: center; gap: 7px; }
  .carousel-dots button { width: 7px; height: 7px; border: 0; border-radius: 50%; padding: 0; background: #c7ced9; cursor: pointer; transition: width .3s var(--ease-out), border-radius .3s ease, background .3s ease; }
  .carousel-dots button.active { width: 22px; border-radius: 8px; background: var(--blue); }
  .carousel-count { color: #5d6572; font-size: 12px; font-weight: 700; white-space: nowrap; }
  .info-bar { align-items: flex-start; text-align: left; }
  .experience-tabs { display: grid; gap: 6px; margin-bottom: 12px; padding: 5px; border: 1px solid #dce2ea; border-radius: 12px; background: #fff; grid-template-columns: repeat(3, 1fr); }
  .experience-tabs button { min-height: 44px; border: 0; border-radius: 8px; padding: 8px; color: #555e6d; background: transparent; font-weight: 700; cursor: pointer; transition: color .25s ease, background .25s ease, box-shadow .25s ease; }
  .experience-tabs button.active { color: #fff; background: var(--blue); box-shadow: 0 5px 15px rgba(0, 144, 255, .25); }
  .experience-showcase { display: block; overflow: visible; padding: 0; }
  .phone-panel { display: none; width: min(100%, 390px); height: 520px; margin: 0 auto; border-radius: 10px; box-shadow: 0 14px 35px rgba(7, 16, 43, .12); }
  .phone-panel + .phone-panel { margin-left: auto; }
  .phone-panel.active { display: block; animation: panel-in .48s var(--ease-out) both; }
  .phone-panel h3 { justify-content: center; }
  .phone-panel > img { height: 600px; }
  .recommendations-grid { grid-template-columns: 1fr; }
  .recommendation-phone { width: min(100%, 440px); height: 650px; margin-inline: auto; }
  .recommendation-phone img { width: 250%; }
  .recommendation-phone:hover img { transform: translateY(calc(-13% - 6px)) scale(1.015); }
  .recommendation-list { max-width: 440px; margin: auto; }
  .owners-top { gap: 30px; grid-template-columns: 1fr; }
  .owners-copy h2 { font-size: 28px; }
  .owner-benefits { grid-template-columns: 1fr; }
  .platform-heading p br { display: none; }
  .platform-cards { grid-template-columns: 1fr 1fr; }
  .platform-card { min-height: 205px; }
  .platform-card img { width: 68px; height: 68px; }
  .details { padding-top: 56px; }
  .detail-steps article { padding: 17px; }
  .faq-panel { padding: 24px 16px; }
  .faq-panel > h2 { font-size: 25px; }
  .accordion-item button span { font-size: 12px; }
  .cta-section { padding: 48px 0; }
  .cta-card { min-height: 330px; }
  .cta-card h2 br { display: none; }
  .cta-card p { font-size: 15px; }
  .footer-brand span { font-size: 38px; }
  .footer-benefits { display: grid; grid-template-columns: 1fr 1fr; }
  .contact-list a { overflow-wrap: anywhere; }
}

@media (max-width: 420px) {
  .nav-actions { display: none; }
  .hero-copy { padding-top: 58px; }
  .hero .button-row { grid-template-columns: 1fr; }
  .hero-benefits,
  .footer-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 8px;
    row-gap: 18px;
  }
  .hero-benefits .mini-benefit,
  .footer-benefits .mini-benefit { gap: 8px; }
  .hero-benefits .mini-benefit strong,
  .footer-benefits .mini-benefit strong { font-size: 10px; }
  .hero-visual { min-height: 500px; margin-inline: -12px; }
  .hero-phone { left: 44%; width: 280px; height: 498px; }
  .metric-card { right: 1px; }
  .platform-cards { grid-template-columns: 1fr; }
  .platform-card { min-height: 190px; }
  .tagline { margin-left: 0; }
}

@media (max-width: 380px) {
  .container, .nav-shell { width: min(100% - 24px, var(--content)); }
  .hero h1 { font-size: 36px; }
  .hero h2 { font-size: 17px; }
  .comparison-card { height: 500px; }
  .chat { padding-inline: 10px; }
  .recommendation-phone { height: 580px; }
  .faq-panel { margin-inline: -4px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .motion-ready .reveal { opacity: 1; filter: none; transform: none; }
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==========================================================================
   Request a demo — modal
   ==========================================================================
   Built on <dialog>, so the backdrop, the Escape key, the focus trap and
   inert-ing the page behind are the browser's job rather than ours.

   ::backdrop cannot see the page's custom properties in every engine, so its
   colour is written out literally here. That is deliberate, not an oversight.
   ========================================================================== */

.demo-dialog {
  width: min(560px, calc(100% - 32px));
  max-height: min(88vh, 900px);
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 24px 70px rgba(7, 16, 43, .32);
  overflow: visible;
}

.demo-dialog::backdrop {
  background: rgba(8, 11, 18, .58);
  backdrop-filter: blur(2px);
}

/* The page must not scroll behind an open modal — on iOS especially, it
   otherwise scrolls the body under your finger while the form stays put. */
body.demo-open { overflow: hidden; }

.demo-dialog-close-form { margin: 0; }

.demo-dialog-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.demo-dialog-close:hover { background: var(--soft); color: var(--ink); }

/* The body scrolls, not the dialog, so the close button stays reachable on a
   short screen. */
.demo-dialog-body {
  padding: 30px 30px 26px;
  max-height: min(88vh, 900px);
  overflow-y: auto;
}

.demo-dialog h2 { margin: 0 0 6px; font-size: 26px; letter-spacing: -.01em; }
.demo-dialog-sub { margin: 0 0 20px; color: var(--muted); font-size: 15px; }

.demo-form { display: grid; gap: 14px; }

.demo-field { display: grid; gap: 6px; }
.demo-field > span { font-size: 13px; font-weight: 600; color: var(--ink); }
.demo-field > span b { color: var(--blue); }

.demo-field input,
.demo-field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.demo-field input:focus,
.demo-field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 144, 255, .16);
}

.demo-field textarea { resize: vertical; min-height: 72px; }

.demo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Off-screen rather than display:none — see the comment on the field itself. */
.demo-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.demo-error {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 14px;
  color: #8c1d18;
  background: #fdecea;
  border: 1px solid #f5c6c2;
}

.demo-submit { width: 100%; justify-content: center; margin-top: 4px; }
.demo-submit[disabled] { opacity: .6; cursor: progress; }


.demo-done { text-align: center; padding: 18px 0 8px; }
.demo-done-tick {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  border-radius: 50%;
  font-size: 30px;
  line-height: 58px;
  color: #fff;
  background: var(--green);
}
.demo-done h3 { margin: 0 0 8px; font-size: 21px; }
.demo-done p { margin: 0 0 20px; color: var(--muted); font-size: 15px; }
.demo-done a { color: var(--blue); }

@media (max-width: 560px) {
  .demo-dialog-body { padding: 26px 20px 22px; }
  .demo-dialog h2 { font-size: 22px; }
  /* Two columns at 360px gives two fields too narrow to read what you typed. */
  .demo-row { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   `hidden` has to actually hide.

   The UA stylesheet says [hidden] { display: none }, but that is the WEAKEST
   possible rule and any explicit display beats it. `.demo-form` sets
   display:grid, so `form.hidden = true` set the attribute, passed every test
   that checks the attribute, and left the form on screen underneath the
   thank-you message.

   Scoped to these two rather than a blanket [hidden] rule, because a global
   one would reach into the rest of the page and this stylesheet is shared.
   -------------------------------------------------------------------------- */
.demo-form[hidden],
.demo-done[hidden] { display: none; }

/* ==========================================================================
   Phone mockups: show the whole device, at every width
   ==========================================================================
   Reported 2026-09-15 — the mockups were cut off on desktop and on mobile.
   Measured in the browser rather than guessed at, which turned up two
   different causes wearing the same symptom.

   ---------------------------------------------------------------------------
   THE THREE EXPERIENCE PANELS were cropped twice over by CSS
   ---------------------------------------------------------------------------
   The sources are 941x1672 (ratio 1.78). The panel was a fixed 489px with
   `overflow: hidden`, its heading took 58 of that, and the image was then told
   `height: 560px` with `object-fit: cover`. So `cover` scaled the image up
   until it filled 560px and clipped the sides, and the panel clipped 129px off
   the bottom of what survived. None of those numbers related to each other or
   to the image.

   Both fixed heights are gone. The image is `height: auto`, so it renders at
   its own ratio and there is nothing left to crop. The panels sit in a
   `repeat(3, 1fr)` grid, which equalises their heights by itself.

   NOTE, AND THIS IS NOT A CSS PROBLEM: those three assets are ALSO cropped in
   the files themselves. Scanning each one from the bottom up finds screen
   content on the very last row and zero pixels of background beneath it — the
   handset was exported with its lower bezel already cut off. CSS now shows
   100% of every file; there is no more image to show. Re-export the mockups
   with the whole device in frame and this section needs no further change.

   ---------------------------------------------------------------------------
   THE RECOMMENDATION PHONE is whole in its asset, but mostly empty canvas
   ---------------------------------------------------------------------------
   Its source is a 2433x2433 square, and the handset occupies 1040x1782 in the
   middle of it: 28.6% transparent padding on the left and the right, and about
   13% top and bottom. The phone itself was never cropped in the file.

   That padding is what the old `width: 235%` and `translateY(-13%)` were
   compensating for — they zoomed past the empty margins so the device filled
   the space. The zoom was not the bug. The bug was the 700px window with
   `overflow: hidden` around it, which then sliced the top and bottom off the
   handset the zoom had just enlarged.

   So the zoom stays and the window goes. The image is sized by HEIGHT against
   the measured padding, and the empty canvas is allowed to spill out of the
   column, where it is invisible because it is transparent.

       the handset is 1782 of 2433 rows = 73.2% of the square's height
       to make it fill the container:  100 / 0.732 = 136.6%

   Getting this from a measurement rather than by nudging a number until it
   looked right is the only reason it can be trusted at other viewport widths —
   it is a ratio, so it holds at the 650px and 580px mobile heights too, which
   is why there are no media queries here.

   IF THE ASSET IS EVER REPLACED, re-measure. A new export with different
   padding makes 136.6% wrong, and wrong here means cropped again.

   ---------------------------------------------------------------------------
   NO MEDIA QUERIES BELOW, DELIBERATELY
   ---------------------------------------------------------------------------
   These rules sit after every existing breakpoint and are width-agnostic, so
   they override the mobile fixed heights (520px panels, 600px images) as well
   as the desktop ones. Adding matching breakpoints would mean four more places
   to keep in step with each other.
   ========================================================================== */

.phone-panel { height: auto; }

/* `contain` is belt and braces — with `height: auto` the image is already at
   its own ratio and has nothing to fit inside. It matters only if a fixed
   height is ever reintroduced, at which point it fits rather than crops. */
.phone-panel > img { height: auto; object-fit: contain; }

/*
  THE TRANSPARENT MARGINS ARE REMOVED FROM LAYOUT, NOT HIDDEN BY IT.

  Two earlier attempts are worth recording, because both looked right on a
  desktop screenshot and were wrong.

  Sizing the image by height and letting it spill (`overflow: visible`) showed
  the whole handset — and grew the document from 616px to 904px at a 375px
  viewport, because a 888px-wide transparent square still takes part in layout
  even though none of it can be seen.

  Clipping the spill sideways (`overflow-x: clip`) did not help either, and the
  reason is the interesting one: a grid `1fr` track is `minmax(auto, 1fr)`, so
  its floor is the item's MIN-CONTENT width. Overflow settings do not change
  what an image contributes to that. The mobile column resolved to 887.891px
  inside a 343px grid and pushed the phone off the right of the screen — which
  the desktop view gave no hint of.

  So instead the image is pulled back by its own padding with negative margins.
  Percentage margins resolve against the containing block's WIDTH on all four
  sides, and this canvas is SQUARE, so one basis covers every edge:

      handset occupies 1040 of 2433 columns = 42.7% of the square
      to make the handset exactly as wide as the column:  100 / 0.427 = 234%
      left/right padding to pull back:  28.6% of 234%  =  66.9%
      top padding:                      13.8% of 234%  =  32.3%
      bottom padding:                   13.0% of 234%  =  30.4%

  The image's margin box is then exactly the handset. Nothing overflows,
  nothing is clipped, the intrinsic contribution is the handset's own width,
  and it scales with the column at every breakpoint — which is why there is
  still no media query here.

  THIS ONLY WORKS BECAUSE THE CANVAS IS SQUARE. Replace the asset with one of
  a different ratio and the top and bottom numbers stop meaning what they say.
*/
.recommendation-phone {
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 0;
  overflow: visible;
}

.recommendation-phone img {
  width: 234%;
  height: auto;
  max-width: none;
  margin: -32.3% -66.9% -30.4%;
  transform: none;
}

/* The lift on hover, without the -13% that used to be baked into it. */
.recommendation-phone:hover img {
  transform: translateY(-8px) scale(1.02);
}

/*
  The spilled canvas is transparent but still hit-testable, and it overlaps the
  copy and the bullet list either side of it. Without this, invisible empty
  space would swallow clicks on the Request a Demo button next to it.
*/
.recommendation-phone img { pointer-events: none; }

/* --------------------------------------------------------------------------
   The six "How it works" cards — same crop, third place it appears
   --------------------------------------------------------------------------
   Measured at 1440px: the assets are 941x1672 (ratio 0.563) and the image box
   was 162x423 (ratio 0.383), with `object-fit: cover`. Cover fills the SHORTER
   axis and overflows the other, so it filled the height and threw away the
   sides — 68% of each image visible, the handset bezels sliced off down both
   edges of all six cards.

   These assets have no padding to reclaim: scanning one finds content on every
   edge, the phone runs to all four borders of the canvas. So unlike the
   recommendation mockup there is nothing to pull back, and the only way to show
   the whole device is to let the box take the image's own ratio.

   THE PHONES GET SMALLER, and that is the honest trade. At 162px wide the whole
   device is 288px tall where 423px of a cropped one used to be. Six cards
   across a 1200px container is what makes each one narrow; if they should be
   larger the fix is fewer cards per row, which is a layout decision rather than
   something to smuggle in here.

   Nothing width-specific below, so the 3-across breakpoint at 1180px and the
   swipeable carousel under 680px both inherit it — and both get WIDER cards
   than the desktop row, so the device is bigger there, not smaller.
   -------------------------------------------------------------------------- */

.step-image { height: auto; }
.step-image img { height: auto; object-fit: contain; }

/*
  The 18px radius was shaped for an image that bled past its box on all sides.
  Now that the box is exactly the image, it bites into the handset's own
  corners — a small cut, but a cut.
*/
.step-image { border-radius: 0; }

/*
  The hover zoom has to go, for the same reason. `scale(1.035)` inside
  `overflow: hidden` crops 3.5% off the device every time somebody points at a
  card, which is precisely the thing being fixed — and letting it overflow
  instead would push the phone into the caption underneath.

  The card itself still lifts on hover (`.step-card:hover`), so the affordance
  survives without anything being trimmed to pay for it.
*/
.step-card:hover .step-image img { transform: none; }

/* --------------------------------------------------------------------------
   Request-a-demo dialog: make it fit the phone it is opened on
   --------------------------------------------------------------------------
   Reported 2026-09-15 with a screenshot: on a phone the Request a demo button
   was sliced in half by the bottom edge of the card, and the privacy line under
   it could not be reached at all.

   The cause was two max-heights fighting. `.demo-dialog` was capped at
   min(88vh, 900px) and `.demo-dialog-body` — the element with `overflow-y:
   auto` — was given THE SAME cap. A scroll container only scrolls when
   something bounds it to less than its content, and the body was bounded to
   exactly its parent, so it never became scrollable. The content simply ran
   past the dialog and the dialog clipped it.

   The fix is the standard flex-column dialog: the dialog is the height
   authority, the body takes what is left and scrolls inside it.

   `min-height: 0` IS LOAD-BEARING. A flex item's default `min-height: auto`
   refuses to shrink below its content, which silently defeats `overflow-y:
   auto` and reproduces the exact bug being fixed here.

   `[open]` ON THE DISPLAY RULE IS ALSO LOAD-BEARING. A <dialog> is
   `display: none` until opened; setting `display: flex` unconditionally would
   leave the form sitting in the middle of the page at all times.

   ---------------------------------------------------------------------------
   dvh, NOT vh
   ---------------------------------------------------------------------------
   `vh` on a phone is the height of the viewport with the browser's toolbars
   RETRACTED, so 88vh can be taller than what is actually on screen while the
   address bar is showing — which is exactly the state somebody is in when they
   tap a button to open this. `dvh` tracks the real visible height. The `vh`
   line stays as a fallback for browsers without it; the one after wins where
   it is supported.
   -------------------------------------------------------------------------- */

.demo-dialog[open] {
  display: flex;
  flex-direction: column;
}

.demo-dialog {
  max-height: min(88vh, 900px);
  max-height: min(88dvh, 900px);
}

.demo-dialog-body {
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Momentum scrolling inside the sheet on iOS, and it stops a drag that
     reaches the end of the form from scrolling the page behind the modal. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 560px) {
  /*
    A phone has no room to spend on a decorative gutter. 10px each side instead
    of 16, and nearly the full visible height, because the form is seven fields
    long and every pixel saved is one less scroll.
  */
  .demo-dialog {
    width: calc(100% - 20px);
    max-height: 92vh;
    max-height: 92dvh;
  }

  /* Clear of the close button, which is absolutely positioned at the top. */
  .demo-dialog-body { padding: 24px 18px 20px; }
}

/* --------------------------------------------------------------------------
   The close button must not have text sliding under it
   --------------------------------------------------------------------------
   The close button is positioned against the dialog, and the dialog is now the
   flex parent of the SCROLLING body — so the button correctly stays put while
   the form moves beneath it. With a transparent background that reads as a
   collision: the subtitle slides up and appears THROUGH the cross.

   Two changes, because one alone is not enough. An opaque background masks
   whatever scrolls past, and the white ring extends that mask a few pixels
   further so a descender does not clip the edge of the circle. The heading and
   subtitle also get right padding, so at rest they stop short of the button
   rather than merely being covered by it — being hidden behind a control and
   never reaching it in the first place are different qualities of fix.
   -------------------------------------------------------------------------- */

.demo-dialog-close {
  background: #fff;
  /* The mask, not decoration — a solid ring of page colour around the circle. */
  box-shadow: 0 0 0 7px #fff;
}

.demo-dialog-close:hover {
  background: var(--soft);
  box-shadow: 0 0 0 7px #fff;
}

/* Clear of the button at rest. 46px is its 36px width plus the gap it sits in. */
.demo-dialog h2,
.demo-dialog-sub { padding-right: 46px; }

/* --------------------------------------------------------------------------
   The page must not be wider than the screen
   --------------------------------------------------------------------------
   Reported twice: the demo dialog appearing shoved off the left edge on a
   phone, with the form labels cut in half.

   The dialog was not the problem. A modal <dialog> is `position: fixed` and
   centres itself on the viewport, which it was doing correctly — but the PAGE
   was 565px wide inside a 375px screen, so it could be panned sideways, and a
   phone that has been panned shows a viewport-centred element wherever the pan
   left it.

   `body { overflow-x: hidden }` was already set and does not stop this on its
   own: the propagation from body to the viewport is inconsistent between
   engines, and where it does not apply the document remains pannable. The
   earlier audit of this missed it by treating that very rule as an intentional
   scroller and excusing everything underneath it.

   WHAT WAS ACTUALLY STICKING OUT, measured rather than guessed:

     · the recommendation mockup — the fix above sizes it at 234% and pulls it
       back with negative margins, so its MARGIN box is the handset, but the
       element still PAINTS 755px wide and painted overflow is scrollable
       overflow. left -190, right 565.
     · every `.reveal-right` element, which starts life translated right and
       only settles once scrolled into view. Transient, and enough to make the
       page jiggle sideways while somebody is reading it.

   Both are deliberate visual spill of things that are transparent or about to
   move, so the answer is to stop the document scrolling sideways rather than
   to redesign either.

   `clip`, NOT `hidden`. `overflow: hidden` on the root makes it a scroll
   container, which breaks `position: sticky` on the header — it would start
   scrolling away with the page. `clip` does no such thing: it clips and
   creates no scrollport. Only the X axis is named, so vertical scrolling is
   untouched.
   -------------------------------------------------------------------------- */

html { overflow-x: clip; }

/*
  The dialog moves focus to its heading when it opens, so a screen reader
  announces what just appeared instead of dropping the user into a text box.
  That is right, and it has a side effect: the browser draws a focus ring
  around the heading, which to a sighted user reads as a rendering fault.

  Suppressed only for `tabindex="-1"`, which is the marker for "focusable by
  script, never by the Tab key". Every real control in the dialog keeps its
  ring, because a keyboard user genuinely needs to see where they are.
*/
.demo-dialog [tabindex="-1"]:focus { outline: none; }

/* --------------------------------------------------------------------------
   The demo form, made short enough to see in one go on a phone
   --------------------------------------------------------------------------
   Six stacked fields plus two paragraphs of explanation meant the button sat
   below the fold on every phone, and a call to action nobody scrolls to is a
   call to action nobody presses.

   Business name pairs with Your name, and Email pairs with Mobile number. The
   earlier mobile rule collapsed `.demo-row` back to one column, which is the
   usual instinct and the wrong one here: these are four SHORT values, not
   sentences, and two of them side by side read fine at half width. The labels
   were shortened to match the narrower column, and the examples moved into
   placeholders where they cost no height at all.

   PLACEHOLDERS ARE NOT LABELS. Every field keeps its own visible <span>, so
   the placeholder is free to disappear on focus without leaving somebody
   staring at an unlabelled box, and a screen reader still announces the field.
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
  .demo-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  /* Tighter, because the point of all this is height. */
  .demo-form { gap: 11px; }
  .demo-field > span { font-size: 12.5px; }
  .demo-field input,
  .demo-field textarea {
    padding: 10px 11px;
    /*
      16px exactly, and not one pixel less. iOS Safari zooms the whole page in
      when a focused input is smaller than that, and the page never zooms back
      out — which lands the visitor in a form wider than their screen, the very
      problem the root overflow clip was added to prevent.
    */
    font-size: 16px;
  }
}

/* Visibly a hint rather than a value somebody has already typed. */
.demo-field input::placeholder,
.demo-field textarea::placeholder {
  color: #9aa3b2;
  opacity: 1; /* Firefox dims placeholders by default; this keeps it even. */
}

/* --------------------------------------------------------------------------
   Short screens: close the last 38px
   --------------------------------------------------------------------------
   After pairing the fields the form fits without scrolling on a 390x844 phone,
   but a 360x560 one was still 38px short of showing the button. Keyed on
   HEIGHT rather than width, because that is the actual constraint — a small
   phone in landscape hits this too, and a wide-but-short window on a laptop
   hits it without being a phone at all.

   Nothing here is a different design, only the same one with the air taken
   out: smaller heading, tighter gaps, a slightly shorter button. Taller phones
   never see it and keep the roomier spacing.
   -------------------------------------------------------------------------- */

@media (max-height: 640px) {
  .demo-dialog-body { padding: 16px 16px 14px; }
  .demo-dialog h2 { font-size: 19px; }
  .demo-dialog-sub { margin-bottom: 12px; font-size: 14px; }
  .demo-form { gap: 9px; }
  .demo-row { gap: 9px; }

  /* Still above the 44px minimum touch target. */
  .demo-submit { min-height: 48px; }

  /* The close button shrinks with everything else, and its white mask with it. */
  .demo-dialog-close { top: 6px; right: 8px; width: 32px; height: 32px; font-size: 23px; }
}

/*
  The placeholder may be smaller than the value; the input may not.

  iOS decides whether to zoom a focused field from the INPUT's font-size, not
  its placeholder's, so shrinking this is free — and it is worth doing, because
  at 123px a paired field truncated "you@email.com" to "you@email.co", which
  reads as a typo in an example rather than as a hint that ran out of room.
*/
.demo-field input::placeholder,
.demo-field textarea::placeholder { font-size: 14px; }