/*
 * 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;
}
.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;
}