/*
 * MecaLink public mobile foundation
 *
 * Shared only by the customer-facing booking and vehicle-tracking pages.
 * It keeps the light, calm mobile language from the product references while
 * preserving the workshop's navy/orange identity.
 */

@media (max-width: 768px) {
  :root {
    --mobile-surface: #ffffff;
    --mobile-bg: #f7f8fa;
    --mobile-ink: #172033;
    --mobile-muted: #687384;
    --mobile-line: rgba(23, 32, 51, .11);
    --mobile-orange: #e6781a;
    --mobile-navy: #1b2e4a;
    --mobile-radius: 18px;
    --mobile-shadow: 0 12px 32px rgba(23, 32, 51, .08);
  }

  html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    background: var(--mobile-bg);
  }

  button,
  input,
  select,
  textarea {
    touch-action: manipulation;
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Public OS tracking */
  body:has(.tracking-top) .page {
    width: 100%;
    max-width: 560px;
    padding-bottom: 40px;
  }

  body:has(.tracking-top) .tracking-top {
    padding: 20px 16px 58px;
  }

  body:has(.tracking-top) .tracking-shop {
    align-items: flex-start;
  }

  body:has(.tracking-top) .mecalink-mark {
    flex-shrink: 0;
    font-size: .68rem;
  }

  body:has(.tracking-top) .vehicle-card,
  body:has(.tracking-top) .tracking-price-card {
    margin-left: 12px;
    margin-right: 12px;
    border-radius: 22px;
    box-shadow: var(--mobile-shadow);
  }

  body:has(.tracking-top) .vehicle-card {
    padding: 20px 16px;
  }

  body:has(.tracking-top) .vehicle-placa {
    font-size: clamp(1.35rem, 8vw, 1.8rem);
    letter-spacing: .045em;
  }

  body:has(.tracking-top) .section {
    margin-left: 12px;
    margin-right: 12px;
  }

  body:has(.tracking-top) .progress-card {
    border-radius: 22px;
    padding: 18px 16px;
    box-shadow: var(--mobile-shadow);
  }

  body:has(.tracking-top) .service-item {
    grid-template-columns: 32px minmax(0, 1fr);
    border-radius: 15px;
    padding: 13px;
  }

  body:has(.tracking-top) .service-item-value {
    grid-column: 2;
    text-align: left;
    margin-top: -5px;
  }

  body:has(.tracking-top) .whats-cta {
    margin-left: 12px;
    margin-right: 12px;
  }

  body:has(.tracking-top) .whats-btn {
    min-height: 52px;
    border-radius: 16px;
    box-shadow: 0 9px 20px rgba(37, 211, 102, .18);
  }

  body:has(.tracking-top) .photos-group,
  body:has(.tracking-top) .history-section {
    padding-left: 12px;
    padding-right: 12px;
  }

  body:has(.tracking-top) .photo-item {
    width: 132px;
    border-radius: 14px;
  }

  /* Public appointment wizard */
  body:has(.form-area) .container {
    width: 100%;
    max-width: 560px;
    min-height: 100dvh;
    background: var(--mobile-surface);
  }

  body:has(.form-area) .header {
    padding: 18px 16px 14px;
  }

  body:has(.form-area) .schedule-info {
    margin-left: 16px;
    margin-right: 16px;
    border-radius: 14px;
  }

  body:has(.form-area) .welcome-screen {
    padding: 28px 16px 22px;
  }

  body:has(.form-area) .stepper {
    padding-left: 20px;
    padding-right: 20px;
  }

  body:has(.form-area) .step-labels {
    padding-left: 16px;
    padding-right: 16px;
  }

  body:has(.form-area) .form-area {
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 118px;
  }

  body:has(.form-area) .form-row,
  body:has(.form-area) .form-row-3 {
    grid-template-columns: 1fr;
    gap: 0;
  }

  body:has(.form-area) .vehicle-card,
  body:has(.form-area) .summary-card {
    border-radius: 18px;
  }

  body:has(.form-area) .sticky-bottom {
    left: 0;
    transform: none;
    width: 100%;
    max-width: none;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  }

  body:has(.form-area) .sticky-bottom .btn {
    min-height: 48px;
    flex: 1 1 0;
    border-radius: 14px;
  }

  /* Public named booking link */
  body:has(.shell) .shell {
    display: block;
    min-height: 100dvh;
  }

  body:has(.shell) .shop {
    min-height: auto;
    padding: 28px 20px 30px;
  }

  body:has(.shell) .shop-info,
  body:has(.shell) .powered {
    display: none;
  }

  body:has(.shell) .shop h1 {
    max-width: 28rem;
    margin-top: 16px;
    font-size: 1.45rem;
  }

  body:has(.shell) .logo {
    width: 138px;
    height: 70px;
    border-radius: 16px;
  }

  body:has(.shell) .booking {
    padding: 18px 12px 28px;
  }

  body:has(.shell) .panel {
    width: 100%;
    padding: 20px 16px;
    border-radius: 22px;
    box-shadow: var(--mobile-shadow);
  }

  body:has(.shell) .head {
    flex-direction: column;
    gap: 12px;
  }

  body:has(.shell) .progress {
    width: 100%;
  }

  body:has(.shell) .progress i {
    width: auto;
    flex: 1 1 0;
  }

  body:has(.shell) .services,
  body:has(.shell) .form-grid,
  body:has(.shell) .summary-grid {
    grid-template-columns: 1fr;
  }

  body:has(.shell) .field.wide {
    grid-column: auto;
  }

  body:has(.shell) .dates {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body:has(.shell) .dates::-webkit-scrollbar {
    display: none;
  }

  body:has(.shell) .date {
    flex: 0 0 74px;
    min-height: 62px;
  }

  body:has(.shell) .slots {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body:has(.shell) .footer {
    position: sticky;
    bottom: 0;
    margin-left: -16px;
    margin-right: -16px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  body:has(.shell) .footer .btn {
    min-height: 48px;
    flex: 1 1 0;
    border-radius: 14px;
  }
}

@media (max-width: 420px) {
  body:has(.tracking-top) .tracking-shop {
    gap: 8px;
  }

  body:has(.tracking-top) .mecalink-mark {
    max-width: 84px;
    white-space: normal;
    text-align: right;
  }

  body:has(.shell) .slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  body:has(.tracking-top) *,
  body:has(.form-area) *,
  body:has(.shell) * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

/* Shared public mobile layer.  It is deliberately additive: desktop rules
   remain untouched, while every public page gets the same touch targets,
   safe widths and navigation behavior. */
.ml-mobile-public,
.ml-mobile-public body {
  min-width: 0;
}

.ml-mobile-public img,
.ml-mobile-public svg,
.ml-mobile-public video,
.ml-mobile-public canvas {
  max-width: 100%;
}

.ml-mobile-public pre,
.ml-mobile-public code {
  max-width: 100%;
}

/* The shared script prepares the mobile menu for every viewport so it can
   also respond to a resize. Keep its controls out of the desktop layout; the
   mobile media block below turns them on at the phone breakpoint. */
.ml-mobile-public nav.ml-mobile-nav .ml-mobile-menu-toggle,
.ml-mobile-public .ml-mobile-nav-scrim {
  display: none;
}

@media (max-width: 768px) {
  .ml-mobile-public,
  .ml-mobile-public body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  .ml-mobile-public body {
    min-width: 0;
  }

  .ml-mobile-public .container {
    width: min(calc(100% - 32px), 1180px);
    max-width: 100%;
  }

  /* The marketing hero uses a generous desktop type scale. On a phone the
     previous 17vw minimum could make “Sua oficina” wider than the viewport,
     which looked like a broken zoom instead of an intentional headline. */
  .ml-mobile-public .h3-hero-copy,
  .ml-mobile-public .h3-hero-stage,
  .ml-mobile-public .h3-hero-stage figure {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .ml-mobile-public .h3-hero h1 {
    max-width: 100%;
    font-size: clamp(2.65rem, 13.2vw, 4.3rem);
    line-height: .94;
    overflow-wrap: normal;
  }

  .ml-mobile-public .h3-hero-lead {
    max-width: 100%;
    font-size: 1rem;
    overflow-wrap: anywhere;
  }

  .ml-mobile-public .h3-hero-stage img,
  .ml-mobile-public .h3-product-shot img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  /* Grid children default to min-width:auto. A long English headline could
     therefore widen its track by a few pixels even though the outer grid was
     constrained, producing a subtle horizontal crop on very small phones. */
  .ml-mobile-public .hero-grid > *,
  .ml-mobile-public .hero-grid > div,
  .ml-mobile-public .hero-copy,
  .ml-mobile-public .hero-content,
  .ml-mobile-public .hero-media {
    min-width: 0;
    max-width: 100%;
  }

  .ml-mobile-public .hero h1,
  .ml-mobile-public .hero-grid h1 {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .ml-mobile-public input,
  .ml-mobile-public select,
  .ml-mobile-public textarea {
    max-width: 100%;
    min-width: 0;
    font-size: 16px !important;
    touch-action: manipulation;
  }

  .ml-mobile-public button,
  .ml-mobile-public .btn,
  .ml-mobile-public .nav-cta,
  .ml-mobile-public [role="button"] {
    touch-action: manipulation;
  }

  .ml-mobile-public .hero-actions,
  .ml-mobile-public .cta-row,
  .ml-mobile-public .h3-actions,
  .ml-mobile-public .h3-price-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .ml-mobile-public .hero-actions > .btn,
  .ml-mobile-public .cta-row > .btn,
  .ml-mobile-public .h3-actions > .h3-button,
  .ml-mobile-public .h3-price-actions > .h3-button {
    width: 100%;
    min-height: 48px;
  }

  .ml-mobile-public table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ml-mobile-public pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .ml-mobile-public .article-content,
  .ml-mobile-public .article-header,
  .ml-mobile-public .update-card,
  .ml-mobile-public .card,
  .ml-mobile-public .faq-item {
    overflow-wrap: anywhere;
  }

  /* SEO landing pages use a 12-column editorial grid on desktop. Collapse it
     explicitly on phones; merely spanning the children still leaves zero-size
     tracks that can make cards wider than a 320px viewport. */
  .ml-mobile-public.ml-seo .grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    min-width: 0;
  }

  .ml-mobile-public.ml-seo .grid > * {
    grid-column: 1 / -1 !important;
    width: 100%;
    min-width: 0;
  }

  /* SEO heroes also use a multi-column desktop grid.  `1fr` alone keeps an
     automatic minimum based on the longest child, so a long headline/CTA can
     still create a 294px track inside a 244px phone content column. */
  .ml-mobile-public.ml-seo .hero .container {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .ml-mobile-public.ml-seo .hero .container > *,
  .ml-mobile-public.ml-seo .hero .container > :not(.ml-seo-visual):not(.proof),
  .ml-mobile-public.ml-seo .hero .proof,
  .ml-mobile-public.ml-seo .ml-seo-visual {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .ml-mobile-public.ml-seo .hero .proof {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Blog articles keep a two-column grid on desktop.  At narrow widths a
     grid item with an intrinsic width can force the one-column track wider
     than the viewport (especially when the article contains a long CTA or
     summary).  Collapse the layout and reset those intrinsic widths so every
     block follows the padded page column. */
  .ml-mobile-public.ml-article .article-grid {
    display: block !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .ml-mobile-public.ml-article .article-grid > .content,
  .ml-mobile-public.ml-article .article-grid > article,
  .ml-mobile-public.ml-article .article-content,
  .ml-mobile-public.ml-article .post-content,
  .ml-mobile-public.ml-article article {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .ml-mobile-public.ml-article .side-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 24px 0 0;
  }

  .ml-mobile-public.ml-article .cta,
  .ml-mobile-public.ml-article .cta .btn,
  .ml-mobile-public.ml-article .article .btn {
    max-width: 100%;
    box-sizing: border-box;
  }

  .ml-mobile-public.ml-article .cta .btn,
  .ml-mobile-public.ml-article .article .btn {
    width: 100%;
    white-space: normal;
  }

  /* A few legacy articles call their dark conversion panel `.cta-box`
     instead of `.cta`. The pill button has an intrinsic text width, so make
     it obey the padded article column on 320px screens too. */
  .ml-mobile-public.ml-article .cta-box,
  .ml-mobile-public.ml-article .cta-box .btn {
    max-width: 100%;
    box-sizing: border-box;
  }

  .ml-mobile-public.ml-article .cta-box .btn {
    display: flex;
    width: 100%;
    white-space: normal;
  }

  /* Pages that use the simple public navigation now have a real menu instead
     of disappearing links on touch screens. */
  .ml-mobile-public body > nav#navbar,
  .ml-mobile-public body > .site-header,
  .ml-mobile-public body > .navbar,
  .ml-mobile-public nav.ml-mobile-nav {
    width: 100%;
    max-width: none;
    margin: 0;
    top: 0;
  }

  /* Fixed desktop headers used to cover the first heading on phones. Sticky
     keeps the header reachable while reserving its height in normal flow. */
  .ml-mobile-public body > nav#navbar,
  .ml-mobile-public body > .site-header,
  .ml-mobile-public body > .navbar {
    position: sticky !important;
  }

  .ml-mobile-public nav.ml-mobile-nav {
    position: sticky;
    z-index: 100;
  }

  /* Keep the shared brand row inside the viewport even on pages whose
     desktop container carries 2rem horizontal padding. */
  .ml-mobile-public body > nav#navbar .container,
  .ml-mobile-public body > .site-header > .container,
  .ml-mobile-public body > .navbar > .container {
    width: min(calc(100% - 32px), 1180px);
    max-width: 100%;
    padding-inline: 0;
    margin-inline: auto;
  }

  /* The Portuguese landing keeps its navy header on mobile. Its legacy
     hamburger inherited the light-page text token, which made the control
     nearly disappear against that header. */
  .ml-mobile-public body > nav#navbar .nav-toggle {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    color: #fff;
  }

  .ml-mobile-public body > nav#navbar .nav-toggle svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
  }

  /* The blog and article navigation sits on a light surface.  Keep its menu
     control dark; the same selector above intentionally remains white for
     the navy marketing home. */
  .ml-mobile-public.ml-blog-index body > nav#navbar .nav-toggle,
  .ml-mobile-public.ml-article body > nav#navbar .nav-toggle {
    border-color: rgba(23, 32, 51, .14);
    background: rgba(255, 255, 255, .9);
    color: var(--mobile-ink, #172033);
  }

  /* A few public pages only define the support link's colors. Give it a
     consistent, reachable mobile affordance instead of letting it sit in the
     document flow as a stray text link. */
  .ml-mobile-public .support-float {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 120;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    min-height: 52px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 999px;
    box-shadow: 0 12px 28px rgba(23,32,51,.18);
    font-size: 0;
    line-height: 0;
  }

  .ml-mobile-public .support-float > span {
    display: none;
  }

  .ml-mobile-public .support-float > svg {
    display: block;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }

  .ml-mobile-public .support-float:not(:has(> svg))::before {
    content: "";
    width: 20px;
    height: 20px;
    border: 2px solid currentColor;
    border-radius: 50%;
    opacity: .98;
  }

  .ml-mobile-public .support-float:not(:has(> svg))::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 5px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    border-radius: 0 0 0 4px;
    transform: translate(-2px, 2px) rotate(-18deg);
  }

  .ml-mobile-public nav.ml-mobile-nav .ml-mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 8px 11px;
    border: 1px solid rgba(23, 32, 51, .14);
    border-radius: 13px;
    color: var(--mobile-ink, #172033);
    background: rgba(255, 255, 255, .9);
    font: inherit;
    font-size: .78rem;
    font-weight: 800;
    cursor: pointer;
  }

  .ml-mobile-public nav.ml-mobile-nav .ml-mobile-menu-toggle > span {
    display: grid;
    gap: 3px;
    width: 17px;
  }

  .ml-mobile-public nav.ml-mobile-nav .ml-mobile-menu-toggle i {
    display: block;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
  }

  .ml-mobile-public nav.ml-mobile-nav .nav-links {
    position: absolute;
    z-index: 110;
    top: calc(100% + 10px);
    right: 0;
    left: 0;
    display: none;
    align-items: stretch;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    border: 1px solid var(--mobile-line, rgba(23, 32, 51, .11));
    border-radius: 18px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 18px 48px rgba(23, 32, 51, .16);
  }

  .ml-mobile-public nav.ml-mobile-nav.ml-mobile-nav-open .nav-links {
    display: flex;
  }

  .ml-mobile-public nav.ml-mobile-nav .nav-links a {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 10px 12px;
    border-radius: 12px;
    line-height: 1.2;
  }

  .ml-mobile-public nav.ml-mobile-nav .nav-links a:hover,
  .ml-mobile-public nav.ml-mobile-nav .nav-links a:focus-visible {
    background: rgba(230, 120, 26, .09);
  }

  .ml-mobile-public nav.ml-mobile-nav .nav-links .nav-cta {
    justify-content: center;
    margin-top: 5px;
    color: #fff !important;
    background: var(--mobile-orange, #e6781a);
  }

  .ml-mobile-public .ml-mobile-nav-scrim {
    position: fixed;
    z-index: 90;
    inset: 0;
    display: none;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(15, 23, 42, .22);
  }

  .ml-mobile-public .ml-mobile-nav-scrim.is-open {
    display: block;
  }

  .ml-mobile-public body.ml-mobile-menu-open {
    overflow: hidden;
  }

  .ml-mobile-public .logo-board {
    width: min(calc(100% - 28px), 1200px);
    padding: 34px 0 64px;
  }

  .ml-mobile-public .logo-header,
  .ml-mobile-public .logo-board-grid,
  .ml-mobile-public .tool-grid,
  .ml-mobile-public .preview {
    grid-template-columns: 1fr;
  }

  .ml-mobile-public .logo-header {
    gap: 18px;
    margin-bottom: 24px;
  }

  .ml-mobile-public .logo-header h1 {
    font-size: clamp(3.1rem, 17vw, 5rem);
  }

  .ml-mobile-public .logo-option {
    min-height: 300px;
    padding: 20px;
  }

  .ml-mobile-public .preview {
    gap: 26px;
    padding: 28px 16px 70px;
  }

  .ml-mobile-public .checkout {
    width: 100%;
  }
}

@media (max-width: 380px) {
  .ml-mobile-public nav.ml-mobile-nav .nav-links {
    right: -2px;
    left: -2px;
  }

  .ml-mobile-public .container {
    width: min(calc(100% - 24px), 1180px);
  }
}

/* Keep the public hero uncluttered: the persistent marketing CTA appears
   only after the visitor scrolls beyond the first viewport. The stronger
   selector and !important intentionally override each page's legacy inline
   mobile rule without changing its desktop presentation. */
@media (max-width: 768px) {
  .ml-mobile-public .mobile-sticky {
    display: none !important;
  }

  .ml-mobile-public.ml-mobile-sticky-visible .mobile-sticky {
    display: flex !important;
  }

  .ml-mobile-public.ml-mobile-sticky-visible .support-float {
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }
}

/* The legacy marketing home uses the same nav links as desktop, but its
   mobile flyout is a white surface.  Override the desktop light-on-navy
   tokens inside that surface so every link remains readable on touch. */
@media (max-width: 768px) {
  .ml-mobile-public body > nav#navbar .nav-links.open {
    color: var(--mobile-ink, #172033) !important;
    background: #fff !important;
    border: 1px solid var(--mobile-line, rgba(23, 32, 51, .11)) !important;
    box-shadow: 0 18px 48px rgba(23, 32, 51, .16) !important;
  }

  .ml-mobile-public body > nav#navbar .nav-links.open a,
  .ml-mobile-public body > nav#navbar .nav-links.open a.nav-login {
    color: var(--mobile-ink, #172033) !important;
    background: transparent !important;
  }

  .ml-mobile-public body > nav#navbar .nav-links.open a:hover,
  .ml-mobile-public body > nav#navbar .nav-links.open a:focus-visible {
    color: var(--mobile-orange, #e6781a) !important;
    background: rgba(230, 120, 26, .08) !important;
  }

  .ml-mobile-public body > nav#navbar .nav-links.open a.nav-cta {
    color: #fff !important;
    background: var(--mobile-orange, #e6781a) !important;
  }
}

/* Demo scheduling is a bottom sheet on phones. Keep the heading and close
   control in separate, predictable rows so the Portuguese title never gets
   clipped beside the button on 320px devices. */
@media (max-width: 768px) {
  #demo-schedule-modal {
    align-items: flex-end;
    padding: 8px;
  }

  #demo-schedule-modal .demo-schedule-dialog {
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - 16px);
    border-radius: 22px 22px 0 0;
  }

  #demo-schedule-modal .demo-form-card {
    padding: 18px 16px;
    border-radius: 22px 22px 0 0;
  }

  #demo-schedule-modal .demo-form-card::before {
    margin: -18px -16px 16px;
  }

  #demo-schedule-modal .demo-form-title {
    display: block;
    min-width: 0;
    padding-right: 42px;
  }

  #demo-schedule-modal .demo-form-title > div {
    min-width: 0;
  }

  #demo-schedule-modal #demo-schedule-title {
    max-width: 100%;
    font-size: clamp(1.2rem, 6vw, 1.5rem);
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  #demo-schedule-modal .demo-form-badge {
    display: inline-flex;
    margin-top: 9px;
  }

  #demo-schedule-modal .demo-modal-close {
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
  }
}