/*
 * The site's design (the owner's Lovable project, rebuilt as Blade): what public/css/next/lovable.css,
 * the vendored Lovable stylesheet, does not carry. It loads after that file and builds everything from
 * its tokens (its CSS variables), so our own pages and the wizard's newer parts read as the same design.
 *
 *  1. Plus Jakarta Sans, the design's typeface (--font-salient), served from here.
 *  2. The frame our own pages use (the FAQ, contacts, the legal documents, account deletion).
 *  3. The FAQ.
 *  4. Contacts and the lead form.
 *  5. Reading text: the legal documents and account deletion.
 *  6. The footer's extra rows (the legal documents, account deletion, the company line).
 *  7. The driver wizard's parts that Lovable never saw, drawn with its `.driver-application` language.
 *  8. The two beta guides (/onboarding-user, /onboarding-driver).
 *  9. The in-car camera page (/download/android).
 * 10. The beta pitch (/promo).
 * 11. The QR hand-out sheet (/promo/qr).
 * 12. The test page of an application (/driver-joining/test): whose application it is, and the way out.
 *
 * Colours come from Lovable's variables only. Three of them have a darker twin for text: --primary
 * (#994fe7) fills but is 4.27:1 as small text, so text and links take --brand-text.
 */

/* 1. Plus Jakarta Sans: Google's own latin-ext and latin faces of the variable font (weights 200 to
   800) with Google's unicode ranges. Cyrillic is not in the font; Russian falls back exactly as it
   does on Lovable. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../../fonts/PlusJakartaSans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../../fonts/PlusJakartaSans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. The frame of our own pages. They sit in Lovable's application page (its back link, eyebrow, h1
   and intro); the column is the one thing they choose: wide for the FAQ and contacts, the 760px
   reading column for the documents. */
.next-wide {
  width: min(1040px, 100% - 48px);
  margin-inline: auto;
}
.next-page .application-intro {
  max-width: 720px;
}

/* While a dialog or the language list is open the page behind it does not scroll. Radix injects this rule
   when it locks a page; next.js sets the attribute and the scrollbar's width, and the rule is here. */
body[data-scroll-locked] {
  overflow: hidden !important;
  overscroll-behavior: contain;
  position: relative !important;
  margin-right: var(--removed-body-scroll-bar-size, 0px) !important;
}

/* 3. The FAQ: Lovable's help-centre accordion, in groups. */
.next-faq {
  margin-top: 40px;
}
.next-faq__heading {
  margin: 56px 0 18px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.next-faq__group:first-child .next-faq__heading:first-child {
  margin-top: 0;
}
.next-faq .faq-content {
  max-width: 760px;
}
.next-still {
  margin-top: 64px;
  padding: 36px;
  border-radius: 28px;
  background: var(--accent);
}
.next-still h2 {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
}
.next-still p {
  max-width: 560px;
  margin-top: 8px;
  color: var(--muted-foreground);
  line-height: 1.8;
}
.next-still__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
/* A pill button of the design (Lovable's header and hero buttons are pills; its shadcn button is not). */
.next-pill {
  min-height: 48px;
  padding-inline: 24px;
  border-radius: var(--radius-pill);
  font-size: 16px;
}

/* 4. Contacts: the form beside a card with the company and the address. */
.next-contact {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  margin-top: 40px;
}
.next-contact__card {
  padding: 36px;
  border-radius: 28px;
  background: var(--accent);
}
.next-contact__card h2 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}
.next-contact__card p {
  margin-top: 10px;
  color: var(--muted-foreground);
  line-height: 1.8;
}
.next-contact__card a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 14px;
  color: var(--brand-text);
  font-weight: 500;
  overflow-wrap: anywhere;
  transition: color 0.2s;
}
.next-contact__card a:hover {
  color: var(--primary-deep);
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* The lead form (site.partials.lead-form, driven by site.partials.form-script): its markup is the
   current site's, so its states (errors, the thanks panel) are shown and hidden the way that script
   expects, by `display`. */
.next-lead .form-card__body > h3 {
  margin-bottom: 22px;
  font-size: 24px;
  font-weight: 600;
}
.next-lead form label {
  display: block;
  margin: 22px 0 9px;
  font-size: 16px;
  font-weight: 500;
}
.next-lead form > :first-child {
  margin-top: 0;
}
/* Under the phone field: one of email and phone is enough. */
.next-lead .lead-form__hint {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--muted-foreground);
}
.next-lead input:not([type='checkbox']),
.next-lead textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--background);
  color: var(--foreground);
  font: inherit;
  font-size: 16px;
}
.next-lead textarea {
  min-height: 140px;
  resize: vertical;
}
.next-lead input:focus-visible,
.next-lead textarea:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.next-lead .err,
.next-lead .form-error {
  display: none;
  margin-top: 8px;
  color: var(--destructive);
  font-size: 16px;
  line-height: 1.7;
}
.next-lead .consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 24px 0 0;
  font-weight: 400;
  line-height: 1.7;
  cursor: pointer;
}
.next-lead .consent input {
  flex: none;
  width: 18px;
  min-height: 0;
  height: 18px;
  margin-top: 6px;
  accent-color: var(--primary);
}
.next-lead .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.next-lead .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: 24px;
  padding: 12px 20px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--primary-foreground);
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.next-lead .btn:hover:not(:disabled) {
  background: var(--primary-deep);
  box-shadow: var(--shadow-brand);
  transform: translateY(-2px);
}
.next-lead .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.next-lead .form-error {
  text-align: center;
}
.next-lead .form-done {
  display: none;
  padding: 54px 0;
  text-align: center;
}
.next-lead .tickmark {
  margin: 0 auto 20px;
  color: var(--primary);
  font-size: 42px;
  line-height: 1;
}
.next-lead .form-done h3 {
  font-size: 28px;
  font-weight: 600;
}
.next-lead .form-done p {
  margin-top: 16px;
  color: var(--muted-foreground);
  line-height: 1.8;
}

/* 5. Reading text: the four legal documents (cloned from the originals, so every element they use is
   set here) and the account deletion page. */
.next-updated {
  margin-top: 12px;
  color: var(--muted-foreground);
}
.next-prose {
  margin-top: 36px;
  font-size: 16px;
  line-height: 1.8;
  overflow-wrap: break-word;
}
.next-prose h2 {
  margin: 52px 0 14px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
}
.next-prose h3 {
  margin: 38px 0 12px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}
.next-prose h4 {
  margin: 28px 0 10px;
  font-size: 16px;
  font-weight: 600;
}
.next-prose > :first-child,
.next-prose section:first-child > :first-child {
  margin-top: 0;
}
.next-prose p {
  margin: 0 0 16px;
  color: var(--muted-foreground);
}
.next-prose ul,
.next-prose ol {
  margin: 0 0 20px;
  padding-left: 24px;
  color: var(--muted-foreground);
  list-style: disc;
}
.next-prose ol {
  list-style: decimal;
}
.next-prose li {
  margin-bottom: 8px;
}
.next-prose strong,
.next-prose b {
  color: var(--foreground);
  font-weight: 600;
}
.next-prose a:not([class]) {
  color: var(--brand-text);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  overflow-wrap: anywhere;
  transition: color 0.2s;
}
.next-prose a:not([class]):hover {
  color: var(--primary-deep);
}
.next-prose table {
  display: block;
  width: 100%;
  margin-bottom: 22px;
  border-collapse: collapse;
  overflow-x: auto;
}
.next-prose td,
.next-prose th {
  padding: 12px 14px;
  border: 1px solid var(--border);
  text-align: left;
}

/* 6. The footer's extra rows. Lovable's copyright row stays as drawn; the documents, the deletion
   page and the company line sit under it in the same muted ink. */
.site-footer .footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 32px;
  margin-top: 8px;
  color: var(--footer-muted);
  font-size: 14px;
  line-height: 1.6;
}
.site-footer .footer-legal nav,
.site-footer .footer-languages {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
}
.site-footer .footer-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--footer-muted);
  transition: color 0.2s;
}
.site-footer .footer-legal a:hover {
  color: var(--footer-fg);
  text-underline-offset: 5px;
  text-decoration: underline;
}
.site-footer .footer-languages {
  flex-basis: 100%;
}

/* 7. The driver wizard. Lovable drew an older copy of it (its `.driver-application` rules); these are
   the parts that came after: the pieces of the six-step grouping, the photo drop, the colour swatches,
   the second phone's points, the invitation code's answer, the register number, the held result and
   the recorder of the safety test. */
.driver-application .apply-step > h3 + .apply-piece {
  margin-top: 28px;
}
.driver-application .apply-piece > :first-child {
  margin-top: 0;
}
.driver-application .apply-piece + .apply-piece {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.driver-application .apply-piece > p {
  margin-top: 12px;
  color: var(--muted-foreground);
  line-height: 1.8;
}
.driver-application .hint {
  margin-top: 10px;
  color: var(--muted-foreground);
  font-size: 16px;
  line-height: 1.7;
}
.driver-application .apply-points {
  margin: 0 0 8px;
  padding-left: 22px;
  color: var(--foreground);
  line-height: 1.8;
  list-style: disc;
}
.driver-application .apply-points li + li {
  margin-top: 8px;
}
.driver-application .atd-typed,
.driver-application .apply-carrier {
  margin-top: 26px;
}
.driver-application .atd-typed label,
.driver-application .apply-carrier label {
  margin-top: 0;
}
.driver-application .link-list a.link {
  color: var(--brand-text);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.driver-application .err--block {
  display: block;
  margin-top: 14px;
}
.driver-application .btn--block {
  display: flex;
  width: 100%;
}
.driver-application .btn--sm {
  min-height: 40px;
  padding: 8px 18px;
}

/* Colour: one pill per paint, the chip drawn from the value's own colour. */
.driver-application .swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.driver-application .swatch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  padding: 8px 16px 8px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.driver-application .swatch:hover {
  border-color: var(--primary);
}
.driver-application .swatch input {
  position: absolute;
  width: 1px;
  min-height: 0;
  opacity: 0;
  pointer-events: none;
}
.driver-application .swatch__chip {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--foreground) 28%, transparent);
}
.driver-application .swatch__chip--other {
  background: conic-gradient(#d1352c, #f2c94c, #2e8b3d, #2f6fdb, #994fe7, #d1352c);
}
.driver-application .swatch:has(input:checked) {
  border-color: var(--primary);
  background: var(--accent);
}
.driver-application .swatch:has(input:focus-visible) {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.driver-application .swatches.is-missing .swatch__chip,
.driver-application .choices.is-missing .choice {
  box-shadow: 0 0 0 1.5px var(--destructive);
}

/* The face photo: a drop zone that titles itself; the real input hides off-screen and the zone shows
   the focus ring for it. */
.driver-application .photo-drop {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 20px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.driver-application .photo-drop:hover {
  border-color: var(--primary);
  background: color-mix(in oklch, var(--accent) 55%, var(--background));
}
.driver-application .photo-drop input[type='file'] {
  position: absolute;
  width: 1px;
  min-width: 0;
  height: 1px;
  min-height: 0;
  opacity: 0;
}
.driver-application .photo-drop:has(input:focus-visible) {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.driver-application .photo-drop__preview {
  flex: none;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
}
.driver-application .photo-drop__text strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
}
.driver-application .photo-drop__text small {
  display: block;
  margin-top: 4px;
  color: var(--muted-foreground);
  font-size: 16px;
}
.driver-application .photo-actions {
  display: flex;
  justify-content: flex-start;
  margin: 12px 0 0;
}

/* What the script writes under the invitation code, and next to a register number it found. */
.driver-application .ref-answer {
  font-size: 16px;
  line-height: 1.7;
}
.driver-application .ref-answer:not(:empty) {
  margin-top: 12px;
}
.driver-application .ref-answer--bonus p {
  margin: 0;
}
.driver-application .ref-answer--bonus p:first-child {
  color: var(--brand-text);
  font-weight: 600;
}
.driver-application .ref-answer__note {
  margin-top: 4px !important;
  color: var(--muted-foreground);
}
.driver-application .ref-answer--ok {
  color: var(--success);
}
.driver-application .ref-answer--warn {
  color: var(--destructive);
}
.driver-application .atd-found p {
  margin: 0 0 8px;
  color: var(--brand-text);
  font-weight: 600;
}
.driver-application .atd-found .choice {
  background: var(--background);
}

/* The vehicle suggestions: the car mark, then the make with the typed part in bold. */
.driver-application .vehicle-suggest li {
  display: flex;
  align-items: center;
  gap: 12px;
}
.driver-application .vehicle-suggest__car {
  flex: none;
  opacity: 0.65;
}
.driver-application .vehicle-suggest__label {
  min-width: 0;
  overflow: hidden;
  color: var(--muted-foreground);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.driver-application .vehicle-suggest__label strong {
  color: var(--foreground);
  font-weight: 600;
}

/* The safety test: Lovable's question card, plus the voice and video recorder of the live test. */
.driver-application .rec {
  margin-top: 20px;
}
.driver-application .rec__modes .choice {
  align-items: center;
  padding: 10px 18px;
}
.driver-application .rec__row .btn {
  margin-top: 0;
}
.driver-application .rec__preview {
  margin-top: 20px;
}
.driver-application .rec__preview video {
  display: block;
  border-radius: 6px;
  background: #000;
}
.driver-application .rec__hold {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
.driver-application .rec__hold:has(.rec__mic-wrap[hidden]) {
  display: none;
}
.driver-application .rec.is-held .rec__row {
  justify-content: center;
}
.driver-application .rec.is-held .rec__modes {
  visibility: hidden;
}
.driver-application .rec__row:has([data-stop]:not([hidden])) {
  justify-content: center;
}
.driver-application .rec__row:has([data-stop]:not([hidden])) .rec__live {
  flex-basis: 100%;
  justify-content: center;
}
.driver-application .rec__mic-wrap {
  position: relative;
  display: inline-flex;
}
.driver-application .rec__mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-foreground);
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: transform 0.12s, background-color 0.2s, box-shadow 0.2s;
}
.driver-application .rec__mic svg {
  width: 30px;
  height: 30px;
  pointer-events: none;
}
.driver-application .rec__mic:hover {
  background: var(--primary-deep);
}
.driver-application .rec__mic:focus-visible {
  outline: 3px solid var(--primary-deep);
  outline-offset: 3px;
}
.driver-application .rec__mic.is-held {
  background: var(--destructive);
  box-shadow: 0 0 0 10px color-mix(in oklch, var(--destructive) 18%, transparent);
}
.driver-application .rec__lock {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 64px;
  border-radius: var(--radius-pill);
  background: var(--background);
  color: var(--foreground);
  box-shadow: var(--shadow);
  transform: translateX(-50%);
  animation: next-rec-lock-rise 1.2s ease-in-out infinite alternate;
}
.driver-application .rec__lock svg {
  width: 22px;
  height: 40px;
}
@keyframes next-rec-lock-rise {
  to {
    transform: translate(-50%, -6px);
  }
}
.driver-application .rec__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--background);
  color: var(--foreground);
  cursor: pointer;
}
.driver-application .rec__icon svg {
  width: 22px;
  height: 22px;
}
.driver-application .rec__icon:hover {
  border-color: var(--destructive);
  color: var(--destructive);
}
.driver-application .rec__stop svg {
  width: 18px;
  height: 18px;
  color: var(--destructive);
}
.driver-application .rec__hint {
  margin-top: 12px;
  color: var(--muted-foreground);
  text-align: center;
}
.driver-application .rec__live {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.driver-application .rec__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--destructive);
  animation: next-rec-pulse 1s ease-in-out infinite;
}
@keyframes next-rec-pulse {
  50% {
    opacity: 0.25;
  }
}
.driver-application .rec__clock {
  font-variant-numeric: tabular-nums;
}
.driver-application .rec__clock.is-ending {
  color: var(--destructive);
  font-weight: 600;
}
.driver-application .rec__level {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 22px;
}
.driver-application .rec__level i {
  display: block;
  width: 4px;
  height: 22px;
  border-radius: 2px;
  background: var(--primary);
  transform: scaleY(0.15);
  transition: transform 0.1s linear;
}
.driver-application .rec__slide {
  color: var(--muted-foreground);
}
.driver-application .rec__done {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.driver-application .vnote {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 460px;
  padding: 10px 18px 10px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--background);
}
.driver-application .vnote__play {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-foreground);
  cursor: pointer;
}
.driver-application .vnote__play svg {
  width: 20px;
  height: 20px;
}
.driver-application .vnote__track {
  position: relative;
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  cursor: pointer;
}
.driver-application .vnote__track::before {
  content: '';
  position: absolute;
  inset: -12px 0;
}
.driver-application .vnote__track:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 6px;
}
.driver-application .vnote__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}
.driver-application .vnote__time {
  flex: none;
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .driver-application .rec__dot,
  .driver-application .rec__lock {
    animation: none;
  }
}

/* Narrow screens. */
@media (max-width: 900px) {
  .next-contact {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}
@media (max-width: 640px) {
  .next-still,
  .next-contact__card {
    padding: 28px 24px;
  }
  .next-faq__heading {
    margin-top: 44px;
    font-size: 22px;
  }
  .site-footer .footer-legal {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* 8. The two beta guides (/onboarding-user, /onboarding-driver): Lovable's home hero with smaller type,
   then the guide's blocks in whatever order /admin/seo/texts saved, each standing on its own. The topics
   are native <details> drawn as cards. */
.hero--guide {
  padding: 56px 0 72px;
}
.hero--guide .eyebrow {
  margin-bottom: 0;
}
/* Smaller than the home page's, and never under 1.15: a Latvian caron needs the room. */
.hero--guide h1 {
  max-width: 620px;
  margin-top: 22px;
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.guide-hero__lead {
  max-width: 560px;
  margin-top: 20px;
}
.guide-install {
  display: grid;
  justify-items: start;
  gap: 12px;
  margin-top: 32px;
}
.guide-install__lead {
  min-height: 56px;
  padding-inline: 28px;
  font-weight: 600;
  box-shadow: var(--shadow-brand);
  white-space: normal;
}
.guide-install__alt {
  white-space: normal;
}
.guide-install__lead svg,
.guide-install__alt svg {
  width: 18px;
  height: 18px;
}
.guide-install__note,
.guide-install__pending {
  max-width: 460px;
  color: var(--muted-foreground);
  font-size: 15px;
  line-height: 1.6;
}
.guide-install__pending {
  display: grid;
  gap: 2px;
}
.guide-install__pending strong {
  color: var(--ink);
  font-weight: 700;
}
.guide-install__device {
  margin-top: 6px;
}
.hero--guide .hero-image {
  aspect-ratio: 4 / 4.2;
}
.guide-hero__photo--user {
  object-position: 50% 28%;
}
.hero--guide .guide-hero__photo--driver {
  aspect-ratio: 4 / 3;
  object-position: 30% 50%;
}

.guide-section {
  padding: 72px 0;
}
.guide-section--soft {
  background: var(--surface-soft);
}
.guide-section--intro {
  padding: 0 0 8px;
}
.guide-section--note {
  padding: 40px 0;
}
.guide-heading {
  max-width: 760px;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.2;
}
/* The heading (and "Expand all") beside what it heads. */
.guide-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
  gap: 32px 72px;
  align-items: start;
}

.guide-intro {
  max-width: 860px;
  padding: 36px 40px;
  border-radius: 28px;
  background: var(--accent);
  color: var(--muted-foreground);
  font-size: 18px;
  line-height: 1.8;
}
.guide-intro p + p {
  margin-top: 14px;
}

/* "Expand all": shown by the page's script, so a reader without one never meets a dead button. */
.guide-expand {
  min-height: 44px;
  margin-top: 22px;
  padding: 10px 20px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--brand-text);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.guide-expand:hover {
  background: var(--primary);
  color: var(--primary-foreground);
}
.guide-count {
  margin-top: 18px;
  color: var(--muted-foreground);
  font-size: 15px;
  font-weight: 600;
}

/* A topic or a step: a soft card whose head is the whole control; open, it lifts onto white. */
.guide-cards {
  display: grid;
  gap: 12px;
}
.guide-card {
  border-radius: 24px;
  background: var(--surface-soft);
  transition: background-color 0.25s, box-shadow 0.25s;
}
.guide-card:has(> details[open]),
details.guide-card[open] {
  background: var(--background);
  box-shadow: var(--shadow-soft);
}
.guide-disc > summary {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 16px 22px;
  border-radius: 24px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
  transition: color 0.2s;
}
.guide-disc > summary::-webkit-details-marker {
  display: none;
}
.guide-disc > summary::marker {
  content: '';
}
.guide-disc > summary:hover {
  color: var(--brand-text);
}
.guide-disc > summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 30%, transparent);
}
.guide-disc__title {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
}
.guide-disc__chevron {
  flex: none;
  color: var(--brand-text);
  transition: transform 0.25s;
}
.guide-disc[open] > summary .guide-disc__chevron {
  transform: rotate(180deg);
}
.guide-disc__body {
  padding: 0 22px 22px;
  color: var(--muted-foreground);
  font-size: 16px;
  line-height: 1.8;
}
/* The step's text starts under its title, not under its number. */
.guide-step-number {
  flex: none;
  min-width: 44px;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.15;
}
.guide-steps .guide-disc__body {
  padding-left: 82px;
}
.guide-chip {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--brand-text);
}
.guide-chip svg {
  width: 20px;
  height: 20px;
}
.guide-topics .guide-disc__body {
  padding-left: 78px;
}
.guide-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 6px;
  color: var(--brand-text);
  font-weight: 600;
  transition: color 0.2s;
}
.guide-link svg {
  transition: transform 0.2s;
}
.guide-link:hover {
  color: var(--primary-deep);
  text-decoration: underline;
  text-underline-offset: 5px;
}
.guide-link:hover svg {
  transform: translateX(3px);
}

/* The family guide's safety promises: Lovable's list, two columns, the icon in a round chip. */
.guide-safety {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 32px;
  margin-top: 40px;
}
.guide-safety li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 18px;
  border-radius: 20px;
  transition: background-color 0.3s;
}
.guide-safety li:hover {
  background: var(--background);
}
.guide-safety .safety-icon {
  border-radius: 50%;
  color: var(--brand-text);
}
.guide-safety .safety-icon svg {
  width: 22px;
  height: 22px;
}

/* The family guide's topics, under the app's own screen. */
.guide-features {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 40px 72px;
  align-items: center;
  margin-bottom: 48px;
}
.guide-features__shot {
  justify-self: center;
  margin: 0;
}
.guide-features .app-phone {
  width: 270px;
}
.guide-topics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

/* The driver guide's lists: Lovable's checklist and its three-up row, as cards on the soft band. */
.guide-checklist {
  gap: 18px;
}
.guide-checklist p {
  line-height: 1.7;
}
.guide-checklist .guide-link {
  margin-top: 2px;
}
/* Lovable's checklist draws every icon in its list as a chip; the link's arrow is not one. */
.guide-checklist .guide-link svg {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  color: currentColor;
}
.guide-benefits {
  gap: 20px;
  margin-top: 40px;
  padding: 0;
  border-bottom: 0;
}
.guide-benefits li {
  align-items: flex-start;
  padding: 24px;
  border-radius: 24px;
  background: var(--background);
  box-shadow: var(--shadow-soft);
  font-weight: 500;
  line-height: 1.7;
}
.guide-note {
  max-width: 860px;
  margin: 0;
}
.guide-note .guide-link {
  margin-top: 8px;
}

/* The closing pair: the ask for feedback as Lovable's violet panel, then how to reach a person. */
.guide-panel {
  gap: 16px;
  padding: 64px 40px;
}
.guide-panel .section-heading {
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.15;
}
.guide-panel .section-subtitle {
  max-width: 640px;
}
.guide-contact-title {
  margin-top: 64px;
}
.guide-contacts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.guide-contact {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 20px 22px;
  border-radius: 24px;
  background: var(--accent);
}
.guide-contact .guide-chip {
  background: var(--background);
}
.guide-contact__text {
  display: grid;
  min-width: 0;
}
.guide-contact__label {
  color: var(--muted-foreground);
  font-size: 14px;
}
.guide-contact__value {
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}
a.guide-contact__value {
  color: var(--brand-text);
}
/* The whole card is the link's target. */
a.guide-contact__value::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
a.guide-contact__value:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
a.guide-contact__value:focus-visible {
  box-shadow: none;
}
a.guide-contact__value:focus-visible::after {
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 30%, transparent);
}
.guide-legal {
  margin-top: 32px;
  color: var(--muted-foreground);
  font-size: 14px;
  text-align: center;
}

@media (max-width: 1000px) {
  .hero--guide .hero-visual {
    width: 100%;
    max-width: 560px;
  }
}
@media (max-width: 900px) {
  .guide-split,
  .guide-features {
    grid-template-columns: minmax(0, 1fr);
  }
  .guide-split {
    gap: 24px;
  }
  .guide-features__shot {
    justify-self: start;
  }
  .guide-contacts {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  .hero--guide {
    padding: 32px 0 48px;
  }
  .guide-section {
    padding: 48px 0;
  }
  .guide-section--intro {
    padding: 0 0 8px;
  }
  .guide-section--note {
    padding: 24px 0;
  }
  .guide-intro {
    padding: 26px 22px;
    border-radius: 24px;
    font-size: 17px;
  }
  .guide-safety,
  .guide-topics {
    grid-template-columns: minmax(0, 1fr);
  }
  .guide-safety {
    margin-top: 28px;
  }
  .guide-safety li {
    padding: 12px 0;
  }
  .guide-disc > summary {
    gap: 12px;
    padding: 14px 18px;
    font-size: 16px;
  }
  .guide-disc__body,
  .guide-steps .guide-disc__body,
  .guide-topics .guide-disc__body {
    padding: 0 18px 20px;
  }
  .guide-step-number {
    min-width: 36px;
    font-size: 26px;
  }
  .guide-benefits li {
    padding: 20px;
  }
  .guide-panel {
    padding: 40px 22px;
  }
  .guide-contact-title {
    margin-top: 48px;
  }
}

/* Printed, a guide is its words: every topic open (the page's script opens them for the print),
   nothing to press, no site around it. On any page, a part still waiting for its reveal, or for the
   hero's entrance, prints. */
@media print {
  .reveal,
  .hero-inner > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  body:has(.guide) .site-header,
  body:has(.guide) .site-footer,
  body:has(.guide) .skip-link,
  body:has(.guide) .modal-overlay,
  body:has(.guide) .modal,
  body:has(.guide) [data-next-language-list] {
    display: none !important;
  }
  body:has(.guide) #main-content {
    padding-top: 0 !important;
  }
  .guide .hero-blob,
  .guide .hero-visual,
  .guide-features__shot,
  .guide-expand,
  .guide-disc__chevron {
    display: none !important;
  }
  /* The pill's fill is a background too: a rule keeps it a button rather than pale words on paper. */
  .guide-install__lead,
  .guide-install__alt {
    border: 1px solid #999 !important;
    background: none !important;
    box-shadow: none !important;
    color: #000 !important;
  }
  .guide details::details-content {
    content-visibility: visible;
  }
  .hero--guide .hero-layout {
    display: block;
  }
  .hero--guide,
  .guide-section {
    padding: 20px 0;
  }
  .guide-section--soft,
  .guide-card,
  .guide-intro,
  .guide-contact,
  .guide-panel {
    background: none !important;
    box-shadow: none !important;
  }
  .guide-panel .section-heading,
  .guide-panel .section-subtitle {
    color: #000 !important;
  }
  /* A gradient clipped to the glyphs is a background, and paper drops backgrounds. */
  .guide-step-number {
    background: none;
    color: #000;
  }
  .guide-card,
  .guide-contact,
  .guide-safety li,
  .guide-benefits li {
    break-inside: avoid;
  }
}

/* 9. The in-car camera page (/download/android): Lovable's application page, narrow, with the wrong-phone
   panel, the store button, the reasons as a checklist, the steps as numbered cards and the same-app card. */
.android-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--brand-text);
  font-size: 15px;
  font-weight: 600;
}
.android-badge svg {
  width: 18px;
  height: 18px;
}
.android-page .application-intro {
  margin-top: 16px;
}
.android-device {
  margin-top: 32px;
  padding: 26px 28px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface-soft);
}
.android-device--wrong {
  border-color: color-mix(in oklch, var(--primary) 55%, var(--border));
  background: var(--accent);
}
.android-device h2 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}
.android-device p {
  color: var(--muted-foreground);
  line-height: 1.75;
}
.android-device h2 + p {
  margin-top: 8px;
}
.android-share {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.android-url {
  margin-top: 14px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--background);
  font-size: 15px;
  overflow-wrap: anywhere;
}
.android-play {
  display: grid;
  justify-items: start;
  gap: 12px;
  margin-top: 32px;
}
.android-play__button {
  min-height: 56px;
  padding-inline: 28px;
  font-weight: 600;
  box-shadow: var(--shadow-brand);
  white-space: normal;
}
.android-play__button svg {
  width: 18px;
  height: 18px;
}
.android-play p {
  color: var(--muted-foreground);
  font-size: 15px;
}
.android-block {
  margin-top: 56px;
}
.android-block h2,
.android-card h2 {
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 800;
  line-height: 1.25;
}
.android-why {
  margin-top: 24px;
}
.android-why h3 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
}
.android-why p {
  margin-top: 4px;
  color: var(--muted-foreground);
  line-height: 1.75;
}
.android-note {
  margin: 28px 0 0;
}
.android-lead {
  margin-top: 10px;
  color: var(--muted-foreground);
  line-height: 1.75;
}
/* Lovable's numbered cards, one per row in this narrow column: the number beside the step. */
.android-steps {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 24px;
}
.android-steps li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 20px 24px;
}
.android-steps li::before {
  margin: 0;
  font-size: 30px;
}
.android-steps li::after {
  left: 24px;
  top: 20px;
  width: 28px;
  transform: translateY(42px);
}
.android-steps p {
  padding-top: 4px;
  color: var(--foreground);
  line-height: 1.7;
}
.android-card {
  margin-top: 56px;
  padding: 32px 34px;
  border-radius: 28px;
  background: var(--accent);
}
.android-card p {
  margin-top: 10px;
  color: var(--muted-foreground);
  line-height: 1.8;
}
.android-safe {
  margin-top: 32px;
  color: var(--muted-foreground);
  font-size: 14px;
  text-align: center;
}
@media (max-width: 600px) {
  .android-device {
    padding: 22px 20px;
  }
  .android-share .next-pill {
    flex: 1 1 auto;
  }
  .android-steps li {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    padding: 18px 18px;
  }
  .android-steps li::before {
    font-size: 26px;
  }
  .android-steps li::after {
    left: 18px;
    top: 18px;
    transform: translateY(38px);
  }
  .android-card {
    padding: 26px 22px;
  }
}

/* 10. The beta pitch (/promo): a chooser, then the family side or the driver side, one shown at a time by
   the page's script (`showView`, which sets each view's `display`). Everything the script hides inside a
   view it hides with `hidden`, which Lovable's reset keeps hidden whatever `display` is given here. */
.promo-chooser {
  display: flex;
  flex-direction: column;
}
.promo-hero {
  padding: 56px 0 96px;
}
.promo-hero__inner {
  display: grid;
  justify-items: center;
  text-align: center;
}
.promo-hero h1 {
  margin: 24px auto 0;
  line-height: 1.1;
}
.promo-hero .section-subtitle {
  max-width: 560px;
  margin-top: 16px;
}
.promo-langs {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 28px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--background);
  box-shadow: var(--shadow-float);
}
.promo-langs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  color: var(--muted-foreground);
  font-size: 15px;
  font-weight: 700;
  transition: background-color 0.2s, color 0.2s;
}
.promo-langs a:hover {
  color: var(--brand-text);
}
.promo-langs a.on {
  background: var(--brand-text);
  color: var(--primary-foreground);
}
.promo-audiences {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 900px;
  margin-top: 44px;
}
.promo-audience {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 230px;
  padding: 32px 32px 84px;
  border: 0;
  border-radius: 28px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-float);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s;
}
.promo-audience--family {
  background: var(--audience-violet);
  color: var(--audience-on-violet);
}
.promo-audience--driver {
  background: var(--audience-yellow);
  color: var(--ink);
}
.promo-audience:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 70px -24px oklch(0.3 0.15 300 / 35%);
}
.promo-audience__title {
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.promo-audience__sub {
  max-width: 340px;
  font-size: 16px;
  line-height: 1.65;
}
.promo-audience__arrow {
  position: absolute;
  bottom: 30px;
  left: 32px;
  width: 28px;
  height: 28px;
  transition: transform 0.2s;
}
.promo-audience:hover .promo-audience__arrow {
  transform: translateX(5px);
}

/* The bar each view keeps under the site header: back to the choice, its sections, parent or driver. */
.promo-bar {
  position: sticky;
  top: 92px;
  z-index: 30;
  background: color-mix(in oklch, var(--background) 84%, transparent);
  box-shadow: 0 8px 30px -24px color-mix(in oklch, var(--foreground) 45%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
}
.promo-bar__inner {
  display: flex;
  align-items: center;
  gap: 12px 20px;
  min-height: 68px;
  padding-block: 10px;
}
.promo-bar__back {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px 0 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.promo-bar__back:hover {
  background: var(--accent);
  color: var(--brand-text);
}
.promo-bar__links {
  display: flex;
  flex: 1;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.promo-bar__links::-webkit-scrollbar {
  display: none;
}
.promo-bar__links a {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}
.promo-bar__links a:hover {
  background: var(--accent);
  color: var(--brand-text);
}
.promo-seg {
  display: inline-flex;
  flex: none;
  gap: 4px;
  margin-left: auto;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}
.promo-seg button {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--brand-text);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.promo-seg button.on {
  background: var(--brand-text);
  color: var(--primary-foreground);
}

/* A view's hero: the tag, a two-line title (the second line in the design's gradient) and the lead. */
.promo-view-hero {
  padding: 56px 0 72px;
}
.promo-view-hero h1 {
  max-width: 820px;
  margin-top: 22px;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.12;
}
.promo-view-hero .section-subtitle {
  max-width: 640px;
  margin-top: 22px;
}

/* Lovable's `scroll-padding-top` already clears the site header; this clears the bar under it. */
.promo-section {
  padding: 88px 0;
  scroll-margin-top: 68px;
}
.promo-section--soft {
  background: var(--surface-soft);
}
.promo-heading {
  max-width: 780px;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.15;
}
.promo-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 40px;
}
/* Lovable's step card. */
.promo-card {
  padding: 32px;
  border-radius: 24px;
  background: var(--background);
  box-shadow: var(--shadow-soft);
}
.promo-card h3 {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.promo-card p {
  margin-top: 10px;
  color: var(--muted-foreground);
  line-height: 1.8;
}
.promo-card--highlight {
  background: var(--audience-violet);
}
.promo-card--highlight h3,
.promo-card--highlight p {
  color: var(--audience-on-violet);
}
.promo-steps {
  gap: 20px;
  margin-top: 40px;
}
.promo-checks {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.promo-checks li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--muted-foreground);
  line-height: 1.7;
}
.promo-checks svg {
  box-sizing: content-box;
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  padding: 4px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--brand-text);
}

/* The calculator: the question on the left, the answer on the right. */
.promo-calc {
  margin-top: 40px;
  padding: 32px;
  border-radius: 28px;
  background: var(--background);
  box-shadow: var(--shadow-float);
}
.promo-calc .calc-modes {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}
.promo-calc .calc-modes button {
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--brand-text);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.promo-calc .calc-modes button.on {
  background: var(--brand-text);
  color: var(--primary-foreground);
}
.promo-calc .calc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 28px 48px;
  align-items: start;
  margin-top: 28px;
}
.promo-calc .calc-field + .calc-field {
  margin-top: 26px;
}
.promo-calc .calc-field__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
}
.promo-calc .calc-field__head label {
  font-weight: 600;
}
.promo-calc .calc-field__head span {
  color: var(--brand-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.promo-calc input[type='range'] {
  width: 100%;
  height: 28px;
  accent-color: var(--primary);
  cursor: pointer;
}
.promo-calc .addr {
  position: relative;
}
.promo-calc .addr + .addr {
  margin-top: 16px;
}
.promo-calc .addr input[type='text'],
.promo-calc .promo-row input {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--background);
  color: var(--foreground);
  font: inherit;
  font-size: 16px;
}
.promo-calc .addr input[type='text']:focus-visible,
.promo-calc .promo-row input:focus-visible {
  border-color: var(--ring);
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.promo-calc .addr input::placeholder,
.promo-calc .promo-row input::placeholder {
  color: var(--muted-foreground);
  opacity: 0.75;
}
.promo-calc .addr.chosen input[type='text'] {
  border-color: color-mix(in oklch, var(--primary) 55%, var(--border));
  font-weight: 600;
}
.promo-calc .loc-btn {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--brand-text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.promo-calc .loc-btn:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.promo-calc .loc-btn[disabled] {
  color: var(--muted-foreground);
  cursor: default;
  text-decoration: none;
}
.promo-calc .suggest {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 5;
  max-height: 300px;
  margin-top: 6px;
  padding: 6px;
  overflow-y: auto;
  border-radius: 16px;
  background: var(--background);
  box-shadow: var(--shadow-float);
}
.promo-calc .suggest li {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  line-height: 1.4;
  cursor: pointer;
}
.promo-calc .suggest li:hover,
.promo-calc .suggest li[aria-selected='true'] {
  background: var(--accent);
}
.promo-calc .suggest li span {
  display: block;
  color: var(--muted-foreground);
  font-size: 13px;
}
.promo-calc .suggest li.empty {
  color: var(--muted-foreground);
  cursor: default;
}
.promo-calc .suggest li.empty:hover {
  background: transparent;
}
.promo-calc .addr-note {
  min-height: 1.6em;
  margin-top: 14px;
  color: var(--muted-foreground);
  font-size: 14px;
}
.promo-calc .promo {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.promo-calc .promo-row {
  display: flex;
  gap: 10px;
}
.promo-calc .promo-row input {
  flex: 1;
  min-width: 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.promo-calc .promo-row input::placeholder {
  letter-spacing: 0;
  text-transform: none;
}
.promo-calc .promo-apply {
  flex: none;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--brand-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.promo-calc .promo-apply:hover {
  background: var(--primary);
  color: var(--primary-foreground);
}
.promo-calc .promo-status {
  min-height: 1.6em;
  margin-top: 8px;
  color: var(--muted-foreground);
  font-size: 14px;
}
.promo-calc .promo-status.ok {
  color: var(--brand-text);
  font-weight: 600;
}
.promo-calc .promo-status.ok .loc-btn {
  display: block;
}
.promo-calc .promo-status.bad {
  color: var(--destructive);
}
.promo-calc .total-box {
  padding: 26px 28px;
  border-radius: 24px;
  background: var(--primary);
  box-shadow: var(--shadow-brand);
  color: var(--primary-foreground);
}
.promo-calc .total-box p {
  font-size: 15px;
  font-weight: 600;
}
.promo-calc .total-box .amount {
  margin-top: 4px;
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.promo-calc .total-box .was {
  margin-top: 6px;
  font-size: 16px;
  text-decoration: line-through;
}
.promo-calc .total-box .discount,
.promo-calc .total-box .fee,
.promo-calc .total-box .note,
.promo-calc .total-box .route {
  margin-top: 6px;
  font-size: 14px;
}
.promo-calc .total-box .discount {
  font-weight: 700;
}
.promo-calc .total-box .note:empty {
  display: none;
}
.promo-calc .launch-box {
  margin-top: 16px;
  padding: 18px 20px;
  border: 1.5px solid color-mix(in oklch, var(--primary) 45%, transparent);
  border-radius: 20px;
  background: var(--accent);
}
.promo-calc .launch-title {
  color: var(--brand-text);
  font-weight: 700;
}
.promo-calc .launch-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}
.promo-calc .launch-row p:first-child {
  color: var(--muted-foreground);
  font-size: 14px;
}
.promo-calc .launch-row p:last-child {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.promo-calc .phase-title {
  margin-top: 20px;
  color: var(--muted-foreground);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.promo-calc .split {
  display: flex;
  height: 12px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--accent);
}
.promo-calc .driver-bar {
  background: var(--primary);
  transition: width 0.15s ease;
}
.promo-calc .comm-bar {
  background: var(--audience-blue);
  transition: width 0.15s ease;
}
.promo-calc .split-labels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.promo-calc .split-labels .box {
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--surface-soft);
}
.promo-calc .split-labels .box p:first-child {
  color: var(--muted-foreground);
  font-size: 13px;
  line-height: 1.5;
}
/* Each share wears its bar's colour. */
.promo-calc .split-labels .box p:first-child::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--primary);
  vertical-align: 0;
}
.promo-calc .split-labels .box--commission p:first-child::before {
  background: var(--audience-blue);
}
.promo-calc .split-labels .box p:last-child {
  margin-top: 2px;
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.promo-calc .base {
  margin-top: 28px;
  padding: 20px 24px;
  border-radius: 20px;
  background: var(--surface-soft);
}
.promo-calc .base .title {
  margin-bottom: 6px;
  font-weight: 700;
}
.promo-calc .base table {
  width: 100%;
  border-collapse: collapse;
}
.promo-calc .base td {
  padding: 9px 0;
  border-top: 1px solid var(--border);
  color: var(--muted-foreground);
}
.promo-calc .base tr:first-child td {
  border-top: 0;
}
.promo-calc .base td:last-child {
  padding-left: 16px;
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.promo-calc .payment-note {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
  margin-top: 20px;
}
.promo-calc .payment-note p {
  display: grid;
  gap: 2px;
  line-height: 1.6;
}
.promo-calc .payment-note strong {
  font-weight: 700;
}
.promo-calc .payment-note span {
  color: var(--muted-foreground);
}
.promo-download {
  padding: 88px 0;
  scroll-margin-top: 68px;
}
.promo-download .download-copy {
  gap: 4px;
}
.promo-download .store-links {
  flex-wrap: wrap;
  margin-top: 24px;
}

@media (max-width: 1000px) {
  .promo-cards,
  .promo-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .promo-calc .calc-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  .promo-hero {
    padding: 36px 0 64px;
  }
  .promo-audiences {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-top: 32px;
  }
  .promo-audience {
    min-height: 0;
    padding: 24px 24px 68px;
    border-radius: 24px;
  }
  .promo-audience__arrow {
    bottom: 24px;
    left: 24px;
  }
  .promo-bar {
    top: 76px;
  }
  .promo-bar__inner {
    justify-content: space-between;
    min-height: 60px;
    padding-block: 8px;
  }
  .promo-bar__links {
    display: none;
  }
  /* The arrow alone on a phone; its words stay for a screen reader. */
  .promo-bar__back {
    width: 44px;
    padding: 0;
    justify-content: center;
  }
  .promo-bar__back span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .promo-seg button {
    padding: 0 14px;
  }
  .promo-view-hero {
    padding: 36px 0 48px;
  }
  .promo-section,
  .promo-download {
    padding: 56px 0;
    scroll-margin-top: 56px;
  }
  .promo-cards {
    margin-top: 28px;
  }
  .promo-card {
    padding: 24px;
  }
  .promo-calc {
    margin-top: 28px;
    padding: 22px 18px;
    border-radius: 24px;
  }
  .promo-calc .total-box {
    padding: 22px;
  }
  .promo-calc .base {
    padding: 16px 18px;
  }
  .promo-calc .payment-note {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 11. The QR hand-out sheet (/promo/qr): a sheet of its own, shown on a phone for somebody to scan, so
   no site around it. The switch picks one of three codes; printed, the sheet is that code. */
.qr-page {
  min-height: 100vh;
  background: radial-gradient(60% 40% at 15% 0%, var(--glow-violet), transparent 70%), radial-gradient(50% 40% at 90% 100%, var(--glow-blue), transparent 70%), var(--surface-soft);
}
.qr-sheet {
  width: min(460px, calc(100% - 40px));
  margin: 0 auto;
  padding: 28px 0 48px;
  text-align: center;
}
.qr-brand {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}
.qr-brand img {
  width: 120px;
  height: auto;
}
.qr-head h1 {
  margin-top: 14px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.qr-head p {
  max-width: 340px;
  margin: 8px auto 0;
  color: var(--muted-foreground);
  line-height: 1.6;
}
/* Whole words, wide enough to hit with a thumb while the phone is held out to somebody. */
.qr-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 24px 0;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--background);
  box-shadow: var(--shadow-soft);
}
.qr-switch button {
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.qr-switch button:hover {
  color: var(--brand-text);
}
.qr-switch button.on {
  background: var(--brand-text);
  color: var(--primary-foreground);
}
.qr-code {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* The code carries its own quiet zone; the frame is breathing room around it, not the quiet zone. */
.qr-frame {
  max-width: 100%;
  padding: 18px;
  border-radius: 28px;
  background: var(--background);
  box-shadow: var(--shadow-float);
}
.qr-frame img {
  display: block;
  width: 268px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
}
.qr-url {
  margin-top: 18px;
  color: var(--brand-text);
  font-size: 16px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.qr-caption {
  margin-top: 4px;
  color: var(--muted-foreground);
  font-size: 14px;
}
.qr-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
.qr-actions .next-pill {
  min-height: 44px;
  padding-inline: 18px;
  font-size: 15px;
}
@media print {
  .qr-page {
    background: #fff;
  }
  .qr-sheet {
    padding: 0;
  }
  .qr-switch,
  .qr-actions,
  .qr-head p {
    display: none !important;
  }
  .qr-frame {
    padding: 0;
    box-shadow: none;
  }
  .qr-frame img {
    width: 380px;
  }
  .qr-url {
    color: #000;
  }
}

/* 12. The test page of an application (/driver-joining/test): the driver page in resume mode, its head
   and the wizard only. Whose application it is, "Sign out" and the way back to the application
   (site.joining.identity) are drawn by driver-joining.css for the applicant's own pages in the old
   design's tokens, and Lovable's --muted is a background, so here they take the design's colours. */
.driver-test-page .driver-introduction {
  padding-bottom: 8px;
}
.driver-test-page .jn-who {
  margin-top: 24px;
  padding: 0;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 15px;
  color: var(--muted-foreground);
}
.driver-test-page .jn-link {
  min-height: 44px;
  padding: 0;
  color: var(--brand-text);
  font-weight: 700;
}
.driver-test-page .jn-back {
  margin: 0;
  font-size: 15px;
}
.driver-test-page .jn-back a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--brand-text);
  font-weight: 700;
}
.driver-test-page .driver-form-section {
  padding-top: 24px;
}

/* 13. The home page's download panel: under the store buttons, the link to the parents' price
   calculator on /promo (owner, 2026-10-26). White on the panel's violet like the lead above it,
   underlined so it reads as a link beside the two pill buttons, and as tall as a thumb. Text, not
   flex: wrapped on a phone, the arrow stays after the last word instead of at the panel's edge. */
.download-prices {
  padding-block: 10px;
  color: var(--primary-foreground);
  font-weight: 600;
  line-height: 24px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.download-prices:hover {
  text-decoration-thickness: 2px;
}
.download-prices:focus-visible {
  outline: 2px solid var(--primary-foreground);
  outline-offset: 4px;
  border-radius: 4px;
}
.download-prices svg {
  display: inline-block;
  margin-left: 6px;
  vertical-align: -4px;
}

/* 14. The advertising consent (site.layout, public/js/consent.js): a card over the bottom of the page until
   the visitor answers, Accept and Decline side by side and alike in size, and "Cookie settings" in the
   footer's legal row to open it again. Shown by the script only, so a page without one never has it. */
.consent-banner {
  position: fixed;
  z-index: 60;
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-width: 560px;
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--background);
  color: var(--foreground);
  box-shadow: 0 18px 48px rgba(24, 16, 52, 0.18);
  font-size: 15px;
  line-height: 1.5;
}
.consent-banner p {
  margin: 0;
}
.consent-banner a {
  color: var(--brand-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.consent-actions > button {
  flex: 1 1 140px;
}
.footer-consent {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: inherit;
  cursor: pointer;
}
.footer-consent:hover {
  text-decoration: underline;
}

/* 15. The home page's help centre: Lovable rounds everything in it that carries `data-state`
   (`.faq-grid [data-state]`), the answer's panel included, and that panel hides its overflow with no
   padding of its own, so its rounded top-left corner cut the first letter of every answer. The item
   keeps its round corners; the panel inside it is square. */
.faq-grid .faq-item [role="region"] {
  border-radius: 0;
}

/* 16. The drivers page: under "Greater earnings for greater responsibility", the drivers' calculator on
   /promo (owner, 2026-10-26), on a line of its own. Lovable draws every icon in a benefit as a round
   chip, and the second one blue (`li:nth-child(2) svg`); the link's arrow is neither. */
.driver-benefit-link {
  display: flex;
  width: fit-content;
  min-height: 44px;
  align-items: center;
  gap: 6px;
  color: var(--brand-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.driver-benefits li .driver-benefit-link svg.lucide {
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 0;
  background: none;
  color: currentColor;
}

/* The car under the download panel is sized by width alone; with width and height attributes on the
   img (for its aspect ratio), its height must follow the width rather than the attribute. */
.download-car { height: auto; }

/* 17. Cities and partners (owner, 2026-11-02): the hero's second button, the fourth audience card, the
   lead form (`#leads`, site.blocks.home.leads) and the phone's sticky button that leads to it.
   Lovable paints every `.hero-ctas .hero-button` purple, so "Talk to us" is a class of its own: the
   outline pill beside the download button, as tall, and the row wraps when a language runs long. */
.hero-ctas {
  flex-wrap: wrap;
}
.hero-ctas .hero-talk {
  height: 58px;
  padding-inline: 28px;
  border-radius: var(--radius-pill);
  font-size: 16px;
  font-weight: 600;
  box-shadow: none;
}

/* Five entries in the header: the desktop nav exists only above 1400 px, and the container never grows
   past 1248 px, so at Lovable's spacing the logo's column fell to nothing in every language. Less air
   between the entries and the buttons, a narrower language switch, and the entries at 14 px keep all five
   on one line with the logo at its full 132 px (measured at 1401, 1440 and 1600 px in all five
   languages; Russian, the tightest, with 11 px to spare). */
@media (min-width: 1401px) {
  .header-inner {
    column-gap: 16px;
  }
  .desktop-nav {
    gap: 12px;
    font-size: 14px;
  }
  .header-actions {
    gap: 8px;
  }
  .language-trigger {
    min-width: 60px;
  }
}

/* Four cards: four columns, two up to 1100 px, one on a phone (Lovable's own one-column rule is said
   again here, because this file comes later and would otherwise outrank it). The fourth has no photo:
   its colour and the landmark icon fill the photo's box. */
.audience-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.audience-visual {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 24px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--primary), var(--audience-blue));
  color: var(--primary-foreground);
}
.audience-visual .audience-visual-icon {
  width: 72px;
  height: 72px;
  stroke-width: 1.5px;
}

/* The form: the words on the left, the card on the right, one column from 1000 px down. */
.leads-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: 56px;
}
.leads-copy .section-subtitle {
  max-width: 440px;
}
.leads-card {
  padding: 32px;
  border-radius: 28px;
  background: var(--background);
  box-shadow: var(--shadow-float);
}
.leads-group {
  min-width: 0;
  margin: 0 0 24px;
  padding: 0;
  border: 0;
}
.leads-group legend {
  margin-bottom: 12px;
  padding: 0;
  font-size: 16px;
  font-weight: 500;
}
.leads-optional {
  color: var(--muted-foreground);
  font-weight: 400;
}

/* The roles and the interests are buttons: a radio or a checkbox under each pill, so the keyboard,
   the form and a screen reader see the real control. The chosen role is filled; a chosen interest is
   tinted, because several may be chosen. */
.leads-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.leads-choice {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}
.leads-choice input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.leads-choice span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--background);
  color: var(--foreground);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.leads-choice:hover span {
  border-color: var(--primary);
}
.leads-choice input:focus-visible + span {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.leads-choice input:checked + span {
  border-color: var(--primary);
  background: var(--accent);
  color: var(--brand-text);
  font-weight: 600;
}
.leads-choice input[type="radio"]:checked + span {
  background: var(--primary);
  color: var(--primary-foreground);
}
.leads-group .application-error {
  margin-bottom: 0;
}
.leads-consent {
  margin: 4px 0 20px;
}
.leads-consent label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.6;
  cursor: pointer;
}
.leads-consent input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--primary);
}
.leads-consent a {
  color: var(--brand-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.leads-done {
  padding: 40px 8px;
  text-align: center;
}
.leads-done > svg {
  margin: 0 auto 16px;
  color: var(--primary);
}
.leads-done h3 {
  font-size: 26px;
  font-weight: 700;
}
.leads-done p {
  max-width: 420px;
  margin: 12px auto 0;
  color: var(--muted-foreground);
  font-size: 16px;
  line-height: 1.7;
}
.leads-stores {
  margin-top: 24px;
}
.leads-stores .store-links {
  justify-content: center;
}

/* The phone's sticky "Talk to us": shown by public/js/next.js only, on a phone, while neither the
   hero's buttons, the form nor the footer is on screen and the cookie banner is not up. */
.leads-sticky {
  position: fixed;
  z-index: 35;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border-radius: var(--radius-pill);
  background: var(--primary);
  box-shadow: var(--shadow-brand);
  color: var(--primary-foreground);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  transform: translateX(-50%);
}
.leads-sticky:hover {
  background: var(--primary-deep);
}
.leads-sticky:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
}

@media (max-width: 1100px) {
  .audience-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1001px) {
  /* The form is long and the words beside it short: they stay in view while the form scrolls by. */
  .leads-copy {
    position: sticky;
    top: 120px;
  }
}
@media (max-width: 1000px) {
  .leads-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}
@media (max-width: 760px) {
  .hero-ctas .hero-talk {
    height: auto;
    min-height: 50px;
    white-space: normal;
  }
  /* One promise a line on a phone: the arrival one is long, and in two columns it ran to five lines
     (and the Russian "видеоподтверждение" out of the page). */
  .trust-inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .audience-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .leads-card {
    padding: 22px 18px;
    border-radius: 24px;
  }
}
@media (min-width: 761px) {
  .leads-sticky {
    display: none;
  }
}