/* Written by hand (not generated). Home: online booking for car rental companies (October 2026).
   Loaded on the front page only, after site.css. Reuses site.css's tokens, type roles (h-*, text-*), btn,
   l-section / l-container and media-cover; the classes here are this page's blocks.
   Breakpoints as in site.css: 991 / 767 / 479. */

/* ---------- Shared ---------- */

.section_head {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 760px;
}

.pf input[type="text"],
.pf input[type="email"],
.pf input[type="tel"],
.pf select {
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background-color: var(--surface);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  color: var(--text-on-light);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.pf select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23022449' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.pf input:focus,
.pf select:focus {
  border-color: var(--text-on-light);
  box-shadow: 0 0 0 3px var(--primary);
}

/* ---------- 1. Hero ---------- */

.hero .l-container {
  grid-template-rows: 1fr;
}

/* One rounded photo card for the whole hero, the booking demo's hero: Las Teresitas under the demo's own overlay.
   No overflow:hidden on desktop, so the form's calendars can drop out of it; photo and overlay round themselves. */
.hero_grid {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* text and booking widget each get half (Daria, 23 Oct 2026) */
  gap: var(--space-2xs);
  min-height: 100%;
  padding: var(--space-md) var(--space-md) var(--space-md) var(--space-lg);
  border-radius: 20px;
}

.hero_bg,
.hero_bg_scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.hero_bg {
  object-fit: cover;
  object-position: 50% 60%;
}

.hero_bg_scrim {
  background: linear-gradient(0deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .5) 35%, rgba(0, 0, 0, .45) 65%, rgba(0, 0, 0, .1) 100%);
}

.hero_copy {
  display: flex;
  flex-direction: column;
  padding-right: var(--space-sm);
}

.hero .logo {
  width: 112px;
  height: auto;
}

.hero_text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-top: auto;
  margin-bottom: auto;
  padding: var(--space-xl) 0;
}

.hero_text .h-xl {
  max-width: 640px;
}

.hero_lead {
  max-width: 480px;
}

.hero_points {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero_points li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-on-dark);
}

.hero_points li::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: var(--pill);
  background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%23022449' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center;
}

.hero_cta {
  margin-top: var(--space-2xs);
}

.hero_visual {
  position: relative;
  z-index: 0;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 100%;
  padding: var(--space-md) 0;
}

.hero_tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 12px;
  border-radius: var(--pill);
  background-color: #ffffffe6;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px #020d1833;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1;
  color: var(--text-on-light);
  white-space: nowrap;
}

.hero_tag::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--pill);
  background-color: var(--whatsapp);
}

.hero_caption {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 300;
  color: var(--text-on-dark);
}

/* Tablet and phone: one column, the marquee of photos instead of the example booking (site.css styles .hero-cards). */
.hero_tag.is-card {
  position: absolute;
  z-index: 2;
  bottom: 12px;
  left: 12px;
  padding: 7px 12px 7px 10px;
  font-size: var(--fs-micro);
}

/* The same gap after every card, so the second half of the track starts exactly at -50% (seamless loop). */
.hero-cards-track .card-hero {
  margin-right: var(--space-2xs);
}

@media screen and (max-width: 991px) {
  .hero.l-section {
    min-height: 0;
    padding-top: 96px;
    padding-bottom: var(--space-lg);
  }

  .hero_grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
    padding: var(--space-lg) 20px 20px;
    border-radius: 16px;
    overflow: hidden; /* no form here, so nothing has to drop out; the marquee is clipped to the card */
  }

  .hero .hero-cards {
    margin-right: -20px;
    margin-left: -20px;
  }

  .hero_copy {
    padding-right: 0;
  }

  .hero_text {
    padding: 0;
  }
}

/* ---------- 2. Story ---------- */

.story_scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(90deg, #020d1833 0%, #020d1866 40%, #020d18e6 70%);
}

.story_body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-self: center;
  justify-self: end;
  max-width: 560px;
}

.story_timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 0;
  padding: 0 0 0 34px;
  list-style: none;
}

.story_timeline::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 30px;
  left: 5px;
  width: 1px;
  background-color: #ffffff59;
}

.story_timeline li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.story_timeline li::before {
  content: "";
  position: absolute;
  top: 7px;
  left: -34px;
  width: 11px;
  height: 11px;
  border-radius: var(--pill);
  background-color: var(--primary);
  box-shadow: 0 0 0 4px #020d18;
}

.story_time {
  font-family: var(--font-display);
  font-size: var(--fs-s);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--text-on-dark);
}

.story_timeline li.is-lost::before {
  background-color: var(--accent);
}

.story_timeline li.is-lost .story_time {
  color: var(--accent);
}

@media screen and (max-width: 767px) {
  .story_scrim {
    background-image: linear-gradient(#020d18b3, #020d18d9);
  }

  .story_body {
    justify-self: stretch;
  }
}

/* ---------- 3. Solution ---------- */

.solution_body {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.solution_cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2xs);
}

.solution_card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: #f6f9fc;
}

.solution_num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 10px;
  border-radius: var(--pill);
  background-color: var(--primary);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  color: var(--text-on-light);
}

@media screen and (max-width: 991px) {
  .solution_cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- 4. Try it ---------- */

.tryit.l-section {
  background-color: var(--surface-dark);
}

.tryit_grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: var(--space-xl);
  align-items: center;
}

.tryit_copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  max-width: 560px;
}

.tryit_cta {
  margin-top: var(--space-xs);
}

.tryit_phone {
  justify-self: center;
  width: min(320px, 80%);
  aspect-ratio: 390 / 760;
  border: 10px solid #0a1624;
  border-radius: 44px;
  background-color: var(--surface);
  box-shadow: 0 40px 80px #020d1880, 0 0 0 1px #ffffff1f;
  overflow: hidden;
}

.tryit_screen {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

@media screen and (max-width: 767px) {
  .tryit_grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- The example booking in the hero (parts/booking-demo.php) ---------- */

/* The booking form in the booking demo's look (its theme: Inter Tight, warm greys, black buttons). The plugin's
   booking.css reads these tokens; the values are the demo theme's (esplori-demo/style.css + theme.json). */
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

.hero .esb {
  --esb-primary: #121212;
  --esb-primary-text: #ffffff;
  --esb-text: #121212;
  --esb-muted: #6f6f6b;
  --esb-faint: #b9b9b9;
  --esb-border: #e7e7e4;
  --esb-fill: #f3f3f1;
  --esb-panel: transparent;
  --esb-aside: #f3f3f1;
  --esb-icon: #121212;
  --esb-accent: #121212;
  --esb-radius: 12px;
  --esb-radius-btn: 12px;
  --esb-radius-card: 22px;
  --esb-shadow: none;
  --esb-studio: radial-gradient(120% 70% at 50% 40%, #ffffff 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #f3f3f1 0%, #ebebe8 60%, #dededa 100%);
  --esb-font: "Inter Tight", system-ui, sans-serif;
  --esb-picked: #121212;
  --esb-picked-bg: #f3f3f1;
  --esb-picked-text: #ffffff;
  position: relative;
  z-index: 2;
  width: 100%; /* the plugin centres it with auto margins, which would shrink it to its content in this flex column */
  background-color: #ffffff;
  border: 1px solid #e7e7e4;
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 30px 80px rgba(0, 0, 0, .3);
  scroll-margin-top: 96px;
}

.hero .esb-pick {
  --esb-surface: #ffffff;
  --esb-border: #d9d9d5;
  --esb-field-bg: #f3f3f1;
  --esb-field-border: transparent;
  --esb-field-divider: rgba(18, 18, 18, .08);
  --esb-cta: #121212;
  --esb-cta-text: #ffffff;
  --esb-today: #121212;
}

.hero .esb-pick__label {
  font-weight: 500;
}

.hero .esb-aside {
  border-radius: 18px;
}

/* The car panel runs the full height of the card, top to bottom, beside the form (Daria, 23 Oct 2026) */
.hero .esb > .esb-aside {
  position: static;
  align-self: stretch;
}

/* More room between "← All cars" and the step tabs */
.hero .esb .hero-back {
  margin-bottom: 20px;
}

/* The plugin gives the car panel 320-460px, sized for a full-width page; in the hero's column the steps need the room. */
@media (min-width: 900px) {
  .hero .esb {
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    gap: 24px;
    padding: 24px;
  }
}

.hero .esb-done__nav {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 24px;
}

.hero .esb-done--example a.esb-btn {
  text-decoration: none;
}

@media (max-width: 559px) {
  .hero .esb {
    border-radius: 20px;
  }
}

/* ---------- 5. Price and guarantee ---------- */

.price_grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: var(--space-lg);
  align-items: start;
}

.price_main {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.price_table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--border);
}

.price_table th,
.price_table td {
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.price_table th {
  width: 42%;
  padding-right: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  color: var(--text-on-light-muted);
}

.price_table td {
  font-family: var(--font-display);
  font-size: var(--fs-s);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.3;
  color: var(--text-on-light);
}

.price_note.text-small {
  color: var(--text-on-light-muted);
  line-height: 1.5;
}

.guarantee {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background-color: var(--surface-dark);
}

.guarantee_seal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 128px;
  aspect-ratio: 1;
  color: var(--text-on-light);
  text-align: center;
}

.guarantee_star {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.guarantee_days,
.guarantee_unit {
  position: relative;
  z-index: 1;
}

.guarantee_days {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 300;
  letter-spacing: -.04em;
  line-height: 1;
}

.guarantee_unit {
  font-family: var(--font-decorative);
  font-size: 22px;
  line-height: 1;
}

@media screen and (max-width: 991px) {
  .price_grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media screen and (max-width: 479px) {
  .price_table th,
  .price_table td {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
  }

  .price_table th {
    padding-top: 16px;
  }

  .price_table td {
    padding: 4px 0 16px;
    border-bottom: 1px solid var(--border);
  }
}

/* ---------- 6. Websites ---------- */

.websites.l-section {
  padding-top: 0;
}

.websites_grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: var(--space-xl);
  align-items: center;
}

.websites_copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

.websites_cta {
  margin-left: -8px;
}

@media screen and (max-width: 767px) {
  .websites_grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- 7. FAQ ---------- */

.faq.l-section {
  background-color: #f6f9fc;
}

.faq_body {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
}

.faq_list {
  border-top: 1px solid var(--border);
}

.faq_item {
  border-bottom: 1px solid var(--border);
}

.faq_item summary {
  position: relative;
  padding: 24px 56px 24px 0;
  cursor: pointer;
  list-style: none;
}

.faq_item summary::-webkit-details-marker {
  display: none;
}

.faq_item summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 4px;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  border-radius: var(--pill);
  background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' fill='none' stroke='%23022449' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center;
  transition: transform .2s;
}

.faq_item[open] summary::after {
  transform: rotate(45deg);
}

.faq_item summary:hover {
  opacity: .8;
}

.faq_item p {
  max-width: 720px;
  padding: 0 0 28px;
}

/* ---------- 8. Free preview ---------- */

.preview.l-section {
  padding-top: var(--padding-lg);
}

.preview_card {
  position: relative;
  z-index: 0;
  isolation: isolate;
  padding: clamp(28px, 5vw, 80px);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.preview_scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(90deg, #020d18cc 0%, #020d1899 55%, #020d1866 100%);
}

.preview_grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
  gap: var(--space-xl);
  align-items: center;
}

.preview_copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 520px;
}

.preview_person {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: var(--space-2xs);
}

.preview_avatar {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: var(--pill);
  object-fit: cover;
  background-color: var(--border-on-dark);
}

.preview_alt a {
  color: var(--text-on-dark);
  text-underline-offset: 4px;
}

.preview_panel {
  padding: var(--space-sm);
  border-radius: 24px;
  background-color: var(--surface);
  box-shadow: 0 30px 60px #020d1840;
}

@media screen and (max-width: 991px) {
  .preview_grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media screen and (max-width: 479px) {
  .preview_card {
    margin-right: calc(var(--padding-page) * -1);
    margin-left: calc(var(--padding-page) * -1);
    padding: 40px var(--padding-page);
    border-radius: 0;
  }

  .preview_panel {
    padding: 22px;
  }
}

/* ---------- Preview form (popup and inline) ---------- */

.pf {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pf[hidden],
.pf_thanks[hidden] {
  display: none;
}

.pf_row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

.pf_field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.pf_field label {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--text-on-light);
}

.pf_field small,
.pf_optional {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 300;
  color: var(--text-on-light-muted);
}

.pf_hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pf_consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.45;
  color: var(--text-on-light-muted);
  cursor: pointer;
}

.pf_consent input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--text-on-light);
}

.pf_consent a {
  color: var(--text-on-light);
}

.pf_submit {
  justify-content: center;
  width: 100%;
  border: 0;
}

.pf_submit[disabled] {
  opacity: .6;
  cursor: progress;
}

.pf_error {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: #c62828;
}

.pf_thanks {
  padding: var(--space-sm) 0;
}

@media screen and (max-width: 479px) {
  .pf_row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Popup ---------- */

.preview-dialog {
  box-sizing: border-box;
  width: min(580px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 40px;
  border: 0;
  border-radius: 24px;
  background-color: var(--surface);
  color: var(--text-on-light);
  overflow: auto;
  overscroll-behavior: contain;
}

.preview-dialog::backdrop {
  background-color: #020d1899;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.preview-dialog .h-m {
  padding-right: 40px;
  font-size: clamp(28px, 2.4vw, 36px);
  line-height: 1.15;
}

.preview-dialog_sub {
  margin: 12px 0 24px;
}

.preview-dialog_close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--pill);
  background-color: #f1f4f8;
  font-size: 24px;
  line-height: 1;
  color: var(--text-on-light);
  cursor: pointer;
}

html:has(.preview-dialog[open]) {
  overflow: hidden;
}

@media screen and (max-width: 479px) {
  .preview-dialog {
    padding: 28px 20px;
  }
}

/* Websites: the example site's screenshot, linked to it. Its own proportions, so nothing is cropped. */
.mockup.is-wide.websites_shot {
  display: block;
  aspect-ratio: 3392 / 1968;
  transition: transform .2s, box-shadow .2s;
}

.mockup.is-wide.websites_shot:hover {
  transform: translateY(-2px);
  box-shadow: 0 30px 60px #02244940;
}

/* =====================================================================================================
   October 2026 redesign: editorial and photographic (references: "Discovery" and "Terra Cultiva").
   Headlines in the site's Roboto Light with a blue accent word, two-tone headings, overlapping photo collages. All blue.
   Photos in assets/media/photos/ are from Unsplash (free licence), sources in photos/SOURCES.json.
   ===================================================================================================== */

:root {
  --font-serif: var(--font-display); /* the site's own Roboto (Daria: keep the font I had) */
  --ocean: #2b6cb0;       /* the accent word on white */
  --sky: #a9cdf5;         /* the accent word on dark */
  --soft-blue: #7f9fc4;   /* the second, quieter half of a heading */
  --line-on-dark: rgba(255, 255, 255, .14);
  --mist: #eef4fb;        /* pale blue sections */
}

/* ---------- Type ---------- */

.h-xl em,
.h-l em,
.h-m em {
  font-style: normal;
  color: var(--ocean);
}

.h-xl.is-inverse em,
.h-l.is-inverse em,
.h-m.is-inverse em {
  color: var(--sky);
}

.u-soft {
  color: var(--soft-blue);
}

/* ---------- Hero ---------- */

.hero_text {
  gap: var(--space-xs);
}

.hero .hero_visual,
.hero .hero_copy {
  position: relative;
  z-index: 2;
}

/* ---------- Stats (under the hero) ---------- */

.stats.l-section {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.stats_list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.stats_list li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 var(--space-sm);
  border-left: 1px solid var(--border);
}

.stats_list li:first-child {
  padding-left: 0;
  border-left: 0;
}

.stats_num {
  font-family: var(--font-serif);
  font-size: clamp(44px, 4.4vw, 72px);
  font-weight: 300;
  line-height: .95;
  letter-spacing: -.05em;
  color: var(--text-on-light);
}

.stats_text {
  max-width: 200px;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1.4;
  color: var(--text-on-light-muted);
}

@media screen and (max-width: 767px) {
  .stats_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm) 0;
  }

  .stats_list li:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
}

/* ---------- Story ---------- */

.story .l-container {
  z-index: 2;
}

.story_body {
  gap: var(--space-sm);
}

.story_time {
  font-family: var(--font-serif);
  font-size: clamp(22px, 1.8vw, 28px);
  font-weight: 400;
  letter-spacing: -.03em;
}

.story_timeline li.is-lost .story_time {
  color: var(--sky);
}

.story_timeline li.is-lost::before {
  background-color: var(--sky);
  box-shadow: 0 0 0 4px #020d18, 0 0 0 9px rgba(169, 205, 245, .35);
}

/* ---------- Solution: collage beside the head, staggered cards ---------- */

.solution_intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: center;
}

.section_head {
  gap: var(--space-xs);
}

.collage {
  position: relative;
  aspect-ratio: 1 / 1;
}

.collage_img {
  position: absolute;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 30px 60px rgba(2, 36, 73, .18);
}

.collage_img.is-a { top: 0;   right: 0;   width: 62%; height: 78%; }
.collage_img.is-b { bottom: 0; left: 0;   width: 48%; height: 46%; }
.collage_img.is-c { top: 14%; left: 8%;   width: 30%; height: 30%; border: 6px solid var(--surface); }

.solution_cards {
  align-items: start;
}

.solution_card {
  background-color: var(--mist);
  border-color: transparent;
}

.solution_card:nth-child(2) { margin-top: var(--space-lg); }
.solution_card:nth-child(3) { margin-top: calc(var(--space-lg) * 2); }

.solution_num {
  background-color: var(--surface);
  font-family: var(--font-serif);
  font-size: var(--fs-small);
}

@media screen and (max-width: 991px) {
  .solution_intro {
    grid-template-columns: minmax(0, 1fr);
  }

  .solution_card:nth-child(2),
  .solution_card:nth-child(3) {
    margin-top: 0;
  }
}

/* ---------- Try it: photo under navy ---------- */

.tryit.l-section {
  overflow: hidden;
}

.tryit .media-cover {
  z-index: 0;
}

.tryit_scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(2, 32, 63, .94) 0%, rgba(2, 32, 63, .82) 50%, rgba(2, 32, 63, .55) 100%);
}

.tryit .l-container {
  z-index: 2;
}

/* ---------- Guarantee: a photo on top of the card ---------- */

.guarantee {
  padding-top: 0;
  overflow: hidden;
}

.guarantee_photo {
  display: block;
  max-width: none;
  width: calc(100% + 2 * var(--space-md));
  height: 220px;
  margin: 0 calc(var(--space-md) * -1);
  object-fit: cover;
}

.guarantee_seal {
  margin-top: -84px;
}

/* ---------- Websites: a photo behind the screenshot ---------- */

.websites_visual {
  position: relative;
  padding: var(--space-lg) 0 0 var(--space-lg);
}

.websites_photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 46%;
  height: 70%;
  object-fit: cover;
  border-radius: var(--radius);
}

.websites_visual .websites_shot {
  z-index: 1;
}

/* ---------- FAQ: head and a tall photo beside the questions ---------- */

.faq.l-section {
  background-color: var(--mist);
}

.faq_body {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-xl);
  align-items: start;
  max-width: none;
}

.faq_side {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.faq_photo {
  width: 78%;
  aspect-ratio: 4 / 5;
  margin-top: var(--space-sm);
  object-fit: cover;
  border-radius: var(--radius);
}

@media screen and (max-width: 991px) {
  .faq_body {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
  }

  .faq_side {
    position: static;
  }

  .faq_photo {
    display: none;
  }
}

/* ---------- Free preview ---------- */

.preview_scrim {
  background-image: linear-gradient(90deg, rgba(2, 13, 24, .85) 0%, rgba(2, 32, 63, .6) 55%, rgba(2, 32, 63, .35) 100%);
}

.preview_grid {
  position: relative;
  z-index: 2;
}


/* ---------- The problem: a framed photo with a message on it, the story beside it (no full-width photo) ---------- */

.story.l-section {
  background-color: var(--surface-dark);
}

.story_grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--space-xl);
  align-items: center;
}

.story_photo {
  position: relative;
  margin: 0;
}

.story_img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 48% 50%;
  border-radius: var(--radius-lg);
}

/* The 21:40 WhatsApp, as a chat bubble hanging off the photo's edge. */
.story_bubble {
  position: absolute;
  right: -28px;
  bottom: 18%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 240px;
  padding: 12px 14px 8px;
  border-radius: 16px 16px 4px 16px;
  background-color: #dcf8c6;
  box-shadow: 0 20px 40px rgba(2, 13, 24, .45);
  font-family: var(--font-body);
  color: #111b21;
}

.story_bubble_text {
  font-size: 15px;
  line-height: 1.35;
}

.story_bubble_time {
  align-self: flex-end;
  font-size: 11px;
  color: #53bdeb;
}

.story_body {
  justify-self: stretch;
  max-width: 600px;
}

@media screen and (max-width: 767px) {
  .story_grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }

  .story_img {
    aspect-ratio: 4 / 3.4;
  }

  .story_bubble {
    right: 12px;
    bottom: -20px;
  }
}

/* ---------- Hero booking form: a glowing Continue (stops for reduced motion) ---------- */

@keyframes esplori-glow {
  0%   { box-shadow: 0 0 0 0 rgba(43, 108, 176, .55), 0 6px 18px rgba(43, 108, 176, .35); }
  70%  { box-shadow: 0 0 0 12px rgba(43, 108, 176, 0), 0 6px 26px rgba(43, 108, 176, .55); }
  100% { box-shadow: 0 0 0 0 rgba(43, 108, 176, 0), 0 6px 18px rgba(43, 108, 176, .35); }
}



.hero .esb [data-next] {
  animation: esplori-glow 2.2s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hero .esb [data-next] {
    animation: none;
  }
}

/* ---------- Hero photo: full width at every screen size (side margins only) ---------- */

.hero .l-container {
  max-width: none;
}

/* ---------- Guide in the example booking: a red glowing dot on each step's main button, with a bubble on step 1.
   Put in by home.js. Pointer events off, so a click on them is a click on the button. ---------- */

@keyframes esplori-dot {
  0%   { box-shadow: 0 0 0 0 rgba(229, 72, 77, .7); }
  70%  { box-shadow: 0 0 0 12px rgba(229, 72, 77, 0); }
  100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); }
}

.hero .esb [data-coach] {
  position: relative;
  overflow: visible;
}

.coach_dot {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 14px;
  height: 14px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background-color: #e5484d;
  pointer-events: none;
  animation: esplori-dot 1.6s ease-out infinite;
}

.coach_tip {
  position: absolute;
  top: 50%;
  right: calc(100% + 16px);
  width: max-content;
  max-width: 220px;
  padding: 10px 14px;
  border-radius: 12px;
  background-color: var(--surface-dark);
  box-shadow: 0 12px 30px rgba(2, 13, 24, .3);
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  color: var(--text-on-dark);
  pointer-events: none;
}

/* The little arrow pointing at the button. */
.coach_tip::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -6px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background-color: var(--surface-dark);
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .coach_dot {
    animation: none;
  }
}

/* ---------- The problem on pale blue (Daria: "this blue", the FAQ's) ---------- */

.story.l-section {
  background-color: var(--mist);
}

.story .story_timeline::before {
  background-color: #c5d6ea;
}

.story .story_timeline li::before {
  background-color: var(--ocean);
  box-shadow: 0 0 0 4px var(--mist);
}

.story .story_time {
  color: var(--text-on-light);
}

.story .story_timeline li.is-lost::before {
  background-color: #e5484d;
  box-shadow: 0 0 0 4px var(--mist), 0 0 0 9px rgba(229, 72, 77, .25);
}

.story .story_timeline li.is-lost .story_time {
  color: #e5484d;
}

.story_bubble {
  box-shadow: 0 20px 40px rgba(2, 36, 73, .2);
}

/* Guide bubble: bigger and green so it catches the eye (Daria). */

.coach_tip {
  max-width: 250px;
  padding: 14px 18px;
  border-radius: 14px;
  background-color: #16a34a;
  box-shadow: 0 14px 34px rgba(22, 163, 74, .4);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  color: #ffffff;
}

.coach_tip::after {
  width: 14px;
  height: 14px;
  right: -7px;
  margin-top: -7px;
  background-color: #16a34a;
}



/* ---------- OPTION, off by default: headings like the "Atlas" reference (Daria, kept as an option) ----------
   General Sans Medium, tight letters and lines. Switched on by the class "font-general" on <body>: add ?font=general to
   any URL to preview it, or set ESPLORISTUDIO_FONT to 'general' in functions.php to make it the site's look.
   General Sans: Fontshare, free for commercial use (ITF Free Font License), self-hosted. */
@font-face {
  font-family: "General Sans";
  src: url("../fonts/general-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

.font-general {
  --font-heading: "General Sans", "Inter", Arial, sans-serif;
}

.font-general .h-xl,
.font-general .h-l,
.font-general .h-m,
.font-general .h-s,
.font-general .stats_num,
.font-general .story_time,
.font-general .text-quote {
  font-family: var(--font-heading);
  font-weight: 500;
}

.font-general .h-xl { letter-spacing: -.04em; line-height: 1.04; }
.font-general .h-l { letter-spacing: -.035em; line-height: 1.06; }
.font-general .h-m { letter-spacing: -.03em; line-height: 1.1; }
.font-general .h-s { letter-spacing: -.02em; line-height: 1.2; }
.font-general .stats_num { letter-spacing: -.04em; line-height: 1; }
.font-general .story_time { letter-spacing: -.02em; }
.font-general .text-quote { letter-spacing: -.025em; line-height: 1.2; }

/* ---------- OPTION: Poppins Medium headings + Inter text (Daria's pair; ExtraBold, then SemiBold, were too heavy), class "font-poppins" on <body> ----------
   Poppins: Google Fonts, SIL Open Font License, self-hosted. Body text is already Inter. */
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

.font-poppins .h-xl,
.font-poppins .h-l,
.font-poppins .h-m,
.font-poppins .h-s,
.font-poppins .stats_num,
.font-poppins .story_time,
.font-poppins .text-quote {
  font-family: "Poppins", "Inter", Arial, sans-serif;
  font-weight: 500;
}

.font-poppins .h-xl { letter-spacing: -.035em; line-height: 1.04; }
.font-poppins .h-l { letter-spacing: -.03em; line-height: 1.08; }
.font-poppins .h-m { letter-spacing: -.025em; line-height: 1.12; }
.font-poppins .h-s { letter-spacing: -.015em; line-height: 1.25; }
.font-poppins .stats_num { letter-spacing: -.04em; line-height: 1; }
.font-poppins .story_time { letter-spacing: -.01em; }
.font-poppins .text-quote { letter-spacing: -.02em; line-height: 1.25; }

/* ---------- OPTION: Didact Gothic headings (Daria: "less bold"), class "font-didact" on <body> ----------
   One weight only (400). Google Fonts, SIL Open Font License, self-hosted. */
@font-face {
  font-family: "Didact Gothic";
  src: url("../fonts/didact-gothic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.font-didact .h-xl,
.font-didact .h-l,
.font-didact .h-m,
.font-didact .h-s,
.font-didact .stats_num,
.font-didact .story_time,
.font-didact .text-quote {
  font-family: "Didact Gothic", "Inter", Arial, sans-serif;
  font-weight: 400;
}

.font-didact .h-xl { letter-spacing: -.035em; line-height: 1.05; }
.font-didact .h-l { letter-spacing: -.03em; line-height: 1.08; }
.font-didact .h-m { letter-spacing: -.025em; line-height: 1.12; }
.font-didact .h-s { letter-spacing: -.015em; line-height: 1.25; }
.font-didact .stats_num { letter-spacing: -.04em; line-height: 1; }
.font-didact .story_time { letter-spacing: -.01em; }
.font-didact .text-quote { letter-spacing: -.02em; line-height: 1.25; }

/* ---------- Hero, step 0: the car list (the plugin's fleet cards, three across, in the demo's look) ---------- */

.hero .hero-fleet {
  --esb-text: #121212;
  --esb-muted: #6f6f6b;
  --esb-border: #e7e7e4;
  --esb-icon: #121212;
  --esb-studio: radial-gradient(120% 70% at 50% 40%, #ffffff 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #f3f3f1 0%, #ebebe8 60%, #dededa 100%);
  --esb-font: "Inter Tight", system-ui, sans-serif;
  position: relative;
  z-index: 2;
  width: 100%;
  gap: 16px;
  padding: 22px;
  border: 1px solid #e7e7e4;
  border-radius: 24px;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 30px 80px rgba(0, 0, 0, .3);
}

.hero .hero-fleet[hidden],
.hero .esb[hidden] {
  display: none;
}

.hero-fleet__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.hero-fleet__title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.02em;
}

.hero-fleet__dates {
  margin: 0;
  padding: 7px 12px;
  border: 1px solid #e7e7e4;
  border-radius: 999px;
  font-size: 13px;
  color: #121212;
}

.hero .hero-fleet .esb-fleet {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.hero .hero-fleet .esb-car__media {
  aspect-ratio: 16 / 9;
}

.hero .hero-fleet .esb-car__body {
  padding: 10px 4px 4px;
}

.hero .hero-fleet .esb-car__name {
  font-size: 16px;
}

.hero .hero-fleet .esb-car__specs {
  margin-top: 6px;
}

.hero .hero-fleet .esb-car__specs li {
  font-size: 12px;
}

.hero .hero-fleet .esb-car__buy {
  padding-top: 10px;
}

.hero .hero-fleet .esb-car__price strong {
  font-size: 20px;
}

.hero .hero-fleet .esb-car__cta {
  position: relative;
}

/* The guide on the list: a green pill in the head row. */
.hero-fleet__tip {
  margin: 0 auto 0 4px;
  padding: 8px 14px;
  border-radius: 999px;
  background-color: #16a34a;
  box-shadow: 0 10px 24px rgba(22, 163, 74, .35);
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
}

.hero-fleet__head {
  align-items: center;
}

/* The green guide pills get a touch icon in front: Material Symbols "touch_app" (Apache 2.0), white (Daria, 23 Oct 2026) */
.hero-fleet__tip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hero-fleet__tip::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: no-repeat center / 18px 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23FFFFFF'%3E%3Cpath d='M419-80q-28 0-52.5-12T325-126L107-403l19-20q20-21 48-25t52 11l74 45v-328q0-17 11.5-28.5T340-760q17 0 29 11.5t12 28.5v472l-97-60 104 133q6 7 14 11t17 4h221q33 0 56.5-23.5T720-240v-160q0-17-11.5-28.5T680-440H461v-80h219q50 0 85 35t35 85v160q0 66-47 113T640-80H419ZM167-620q-13-22-20-47.5t-7-52.5q0-83 58.5-141.5T340-920q83 0 141.5 58.5T540-720q0 27-7 52.5T513-620l-69-40q8-14 12-28.5t4-31.5q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 17 4 31.5t12 28.5l-69 40Zm335 280Z'/%3E%3C/svg%3E");
}

.hero-back {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #121212;
  cursor: pointer;
}

.hero-back:hover {
  opacity: .7;
}

/* "← Change dates" and "← All cars": grey, so they read as a way back, not as a main action (Daria, 23 Oct 2026) */
.hero .hero-back {
  color: #6f6f6b;
}

.hero-fleet__head {
  flex-wrap: wrap;
}

.hero-fleet__title,
.hero-fleet__dates {
  white-space: nowrap;
}

@media (max-width: 1365px) {
  .hero-fleet__tip {
    order: 3;
    margin: 0;
  }
}


/* ---------- Hero, step 0: the search bar (the plugin's .esb-search, in the demo's look) ---------- */

.hero .hero-search {
  --esb-primary: #121212;
  --esb-cta: #121212;
  --esb-cta-text: #ffffff;
  --esb-today: #121212;
  --esb-text: #121212;
  --esb-muted: #6f6f6b;
  --esb-faint: #b9b9b9;
  --esb-fill: #f3f3f1;
  --esb-radius: 12px;
  --esb-font: "Inter Tight", system-ui, sans-serif;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  padding: 22px;
  border: 1px solid #e7e7e4;
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 30px 80px rgba(0, 0, 0, .3);
}

.hero .hero-search[hidden] {
  display: none;
}

.hero .hero-search .esb-search__submit {
  position: relative;
  overflow: visible;
  width: 100%;
  animation: esplori-glow 2.2s ease-out infinite;
}

/* The car list: two cars across (Daria). */
.hero .hero-fleet .esb-fleet {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (prefers-reduced-motion: reduce) {
  .hero .hero-search .esb-search__submit {
    animation: none;
  }
}

.hero .hero-fleet .hero-back {
  justify-self: start;
  margin: 0;
}

/* Search card: narrower than the column (Daria), heights as the demo's. 580px keeps the pickers' two-column layout
   (it switches at 520px inside). */
.hero .hero-search,
.hero .hero-fleet,
.hero .esb {
  width: 100%;
  max-width: 720px;
}

/* The booking widget sits in the centre of its half of the hero (Daria, 23 Oct 2026; it used to sit at the right). */
.hero .hero_visual {
  align-items: center;
}

/* ---------- Hero booking: one size for every step, so nothing jumps (Daria) ----------
   720 wide, 700 high: search, car list, form steps and the end screen all fill the same card. */
.hero .hero-search,
.hero .hero-fleet,
.hero .esb {
  box-sizing: border-box;
  height: 700px;
}

/* Search: only as tall as its fields and "Show cars", no empty space (Daria, 23 Oct 2026). It is the one step with
   its own height; from the car list on, every step keeps the same 700px card, so nothing jumps after "Show cars". */
.hero .hero-search {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: auto;
}

/* With the hero split in half, the card is narrower than 640px on laptop screens: there the car panel beside the form
   is hidden, so the driver form keeps its two columns and its buttons stay inside the card. The Summary step still
   shows the car and the price. Measured on the card's column, not the window. */
.hero .hero_visual {
  container-type: inline-size;
}

@container (max-width: 660px) {
  .hero .esb {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero .esb-aside {
    display: none;
  }
}

/* Car list: two cars filling the card. */
.hero .hero-fleet {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.hero .hero-fleet .esb-fleet {
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
}

.hero .hero-fleet .esb-car__media {
  flex: 1;
  aspect-ratio: auto;
  min-height: 0;
}

.hero .hero-fleet .esb-car__name {
  font-size: 20px;
}

/* Form: Notes is optional, so it stays off the example; Summary scrolls inside its box; the end screen is centred. */
.hero .esb .esb-field--wide:has(#esb-notes) {
  display: none;
}

.hero .esb {
  padding: 20px;
}

.hero .esb-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.hero .esb-review__body {
  max-height: 316px;
  overflow-y: auto;
}

.hero .esb-done {
  margin: auto 0;
}

/* Each step fills the card and its buttons (Back, Continue, Proceed to payment) sit on the card's bottom edge, the same
   place in every step (Daria, 23 Oct 2026). */
.hero .esb-form,
.hero .esb-step:not([hidden]) {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.hero .esb-step > .esb-nav {
  margin-top: auto;
}


/* No button glow (Daria); the guide is the red dot, bigger. */
.hero .esb [data-next],
.hero .hero-search .esb-search__submit {
  animation: none;
}

.coach_dot {
  top: -9px;
  right: -9px;
  width: 22px;
  height: 22px;
  border-width: 3px;
}

@keyframes esplori-dot {
  0%   { box-shadow: 0 0 0 0 rgba(229, 72, 77, .7); }
  70%  { box-shadow: 0 0 0 16px rgba(229, 72, 77, 0); }
  100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); }
}

/* Summary step: Back, payment logos and the button on one row, so the step fits the card. */
.hero .esb-nav--submit {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hero .esb-nav--submit .esb-btn {
  width: auto;
}

.hero .esb-review__body {
  max-height: 300px;
}

/* The red dot sits inline, right after the button's arrow (Daria). */
.coach_dot {
  position: relative;
  top: auto;
  right: auto;
  display: inline-block;
  flex: none;
  width: 14px;
  height: 14px;
  margin-left: 10px;
  border-width: 2px;
  vertical-align: middle;
}

/* Summary step: the car panel gives way (plugin), so the summary takes the full card width. */
@media (min-width: 900px) {
  .hero .esb.is-summary {
    grid-template-columns: minmax(0, 1fr);
  }
}

.hero .esb .hero-back {
  align-self: flex-start;
}

/* The arrow is the button's ::after; the dot comes after it. */
.hero [data-coach]::after {
  order: 1;
}

.hero [data-coach] .coach_dot {
  order: 2;
}

.hero .esb [data-submit] {
  white-space: nowrap;
}

.hero .esb-review__body {
  max-height: 400px;
}

/* Fill the fixed card height with photos, not empty space. */
.hero .hero-fleet .esb-car {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.hero .hero-fleet .esb-car__body {
  flex: none;
}




/* Car list: four cars, two rows of two, filling the fixed card (Daria: more than two). */
.hero .hero-fleet .esb-fleet {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.hero .hero-fleet .esb-car__body {
  padding-top: 8px;
}

.hero .hero-fleet .esb-car__specs {
  display: none;
}

.hero .hero-fleet .esb-car__buy {
  padding-top: 6px;
}

.hero .hero-fleet .esb-car__name {
  font-size: 17px;
}

/* No jump between steps (Daria): the form sits where the search and car list sit (the plugin centres .esb with
   auto margins), and the Summary fits the 700px card. */
.hero .esb {
  margin: 0;
}

/* Summary: the summary box takes all the room between the title and the consent line, so nothing scrolls inside it
   early and no white space is left above the buttons (Daria, 23 Oct 2026). */
.hero .esb-review__body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  scrollbar-width: none; /* still scrolls with a wheel or a swipe; no bar (Daria, 23 Oct 2026) */
}

.hero .esb-review__body::-webkit-scrollbar {
  display: none;
}

/* The plugin's morph into the Summary grows the summary box out of the car panel; while it grows, its content would
   spill past the 700px card. Clip it on that step only (no calendars there that need to drop out). */
.hero .esb.is-summary,
.hero .esb.is-summary .esb-main {
  overflow: hidden;
}



/* ---------- Hero booking, end screen (Daria, 23 Oct 2026): no Start again / All cars, one CTA, and mock-ups of the
   booking landing in the company's sheet and the customer's confirmation e-mail ---------- */
.hero .esb:has([data-done]:not([hidden])) .hero-back {
  display: none;
}

/* The end screen fills the card: the mock-ups at the top, title, text and CTA at the bottom, so the card's own
   padding is the same on all four sides (Daria, 23 Oct 2026) */
.hero .esb-done--example {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 24px; /* the plugin's 32px top/bottom made it 8px deeper than the sides */
}

.hero .esb-done--example .esb-done__head {
  margin-top: auto;
}

.hero .esb-done--example .esb-title {
  margin: 0;
}

.hero .esb-done--example > p {
  margin: 0;
}

.hero .esb-done__nav {
  margin-top: 8px;
}

/* The small grey note under the CTA */
.hero .esb-done--example .esb-done__note {
  margin: 0 0 -4px; /* above the sheet now (Daria, 23 Oct 2026) */
  font-size: 13px;
  color: #6f6f6b;
}

.done-viz {
  position: relative;
  margin-bottom: 18px;
  font-family: "Inter Tight", system-ui, sans-serif;
}

.viz-sheet {
  overflow: hidden;
  border: 1px solid #e7e7e4;
  border-radius: 14px;
  background-color: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
}

.viz-sheet__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #e7e7e4;
  font-size: 13px;
  font-weight: 600;
  color: #121212;
}

.viz-sheet__app {
  font-weight: 400;
  color: #6f6f6b;
}

.viz-sheet__icon {
  width: 14px;
  height: 18px;
  border-radius: 3px;
  background:
    linear-gradient(#ffffff, #ffffff) 3px 6px / 8px 1.5px no-repeat,
    linear-gradient(#ffffff, #ffffff) 3px 9px / 8px 1.5px no-repeat,
    linear-gradient(#ffffff, #ffffff) 3px 12px / 8px 1.5px no-repeat,
    #1e8e3e;
}

.viz-sheet table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.viz-sheet th,
.viz-sheet td {
  padding: 7px 10px;
  border-bottom: 1px solid #f0f0ee;
  text-align: left;
  white-space: nowrap;
}

.viz-sheet th {
  background-color: #f7f7f5;
  font-weight: 500;
  color: #6f6f6b;
}

.viz-sheet td {
  color: #6f6f6b;
}

.viz-sheet tr.is-new td {
  border-bottom: 0;
  background-color: #eef5ff;
  font-weight: 500;
  color: #121212;
}

.viz-chip {
  padding: 2px 8px;
  border-radius: 999px;
  background-color: #1e8e3e;
  font-size: 11px;
  color: #ffffff;
}

/* The e-mail sits under the sheet, offset to the right, so the new row stays fully visible */
.viz-mail {
  position: relative;
  width: min(330px, 78%);
  margin: 12px 12px 0 auto;
  padding: 14px 16px;
  border: 1px solid #e7e7e4;
  border-radius: 14px;
  background-color: #ffffff;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .16);
}

.viz-mail__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.viz-mail__head p {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-size: 12px;
  color: #6f6f6b;
}

.viz-mail__head strong {
  font-size: 13px;
  color: #121212;
}

.viz-mail__avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background-color: #b6d1f0;
  font-size: 13px;
  font-weight: 600;
  color: #121212;
}

.viz-mail__subject {
  margin: 10px 0 2px;
  font-size: 14px;
  font-weight: 600;
  color: #121212;
}

.viz-mail__body {
  margin: 0;
  font-size: 13px;
  color: #6f6f6b;
}

/* A stagger (Daria, 23 Oct 2026): the sheet rises in and its new row lights up, then the e-mail arrives, then the title,
   text and CTA follow one after another */
.esb-done:not([hidden]) .viz-sheet {
  animation: viz-mail .55s 0s cubic-bezier(.25, 1, .5, 1) both;
}

.esb-done:not([hidden]) .viz-sheet tr.is-new td {
  animation: viz-row 1s .3s ease-out both;
}

.esb-done:not([hidden]) .viz-mail {
  animation: viz-mail .55s .5s cubic-bezier(.25, 1, .5, 1) both;
}

.esb-done:not([hidden]) .esb-done__head {
  animation: viz-mail .55s .85s cubic-bezier(.25, 1, .5, 1) both;
}

.esb-done:not([hidden]) > p {
  animation: viz-mail .55s .95s cubic-bezier(.25, 1, .5, 1) both;
}

.esb-done:not([hidden]) .esb-done__nav {
  animation: viz-mail .55s 1.05s cubic-bezier(.25, 1, .5, 1) both;
}

.esb-done:not([hidden]) .esb-done__note {
  animation: viz-mail .55s 0s cubic-bezier(.25, 1, .5, 1) both;
}

@keyframes viz-row {
  from { background-color: #ffffff; color: #ffffff; }
  40%  { background-color: #d8e8ff; }
  to   { background-color: #eef5ff; }
}

@keyframes viz-mail {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .esb-done:not([hidden]) .viz-sheet,
  .esb-done:not([hidden]) .viz-sheet tr.is-new td,
  .esb-done:not([hidden]) .viz-mail,
  .esb-done:not([hidden]) .esb-done__head,
  .esb-done:not([hidden]) > p,
  .esb-done:not([hidden]) .esb-done__nav,
  .esb-done:not([hidden]) .esb-done__note {
    animation: none;
  }
}

@container (max-width: 560px) {
  .viz-sheet th:nth-child(4),
  .viz-sheet td:nth-child(4) {
    display: none;
  }
}

/* The title is always two lines now, so the sheet always shows four rows and the spacing is tighter: everything fits
   the 700px card at every width */
@container (min-width: 0px) {
  .viz-sheet tr:nth-child(2) {
    display: none;
  }

  .done-viz {
    margin-bottom: 6px;
  }

  .viz-mail {
    margin-top: 8px;
  }
}


/* ---------- Free-preview forms: our own dropdown, never the browser's (Daria, 23 Oct 2026) ----------
   home.js builds it from the <select>: a button that shows the choice and a list of options. The <select> stays in the
   form, invisible and laid over the button, so the form still sends its value and the browser's "please choose"
   message still points at the right place. */
.pf_select {
  position: relative;
}

.pf_select select {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}

.pf_select__button {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  padding: 0 40px 0 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface) no-repeat 9px center / 28px 28px;
  font: inherit;
  font-family: var(--font-body);
  font-size: 15px;
  text-align: left;
  color: var(--text-on-light);
  cursor: pointer;
}

.pf_select__button.is-placeholder {
  color: var(--text-on-light-muted);
}

.pf_select__button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 12px;
  height: 8px;
  margin-top: -4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231B1B1A' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center;
  transition: transform .2s;
}

.pf_select.is-open .pf_select__button::after {
  transform: rotate(180deg);
}

.pf_select__list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  z-index: 20;
  max-height: 260px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 16px;
  background-color: #ffffff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
  list-style: none;
}

.pf_select__list[hidden] {
  display: none;
}

.pf_select__option {
  padding: 10px 12px;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-on-light);
  cursor: pointer;
}

.pf_select__option.is-active {
  background-color: #f2f2f0;
}

.pf_select__option[aria-selected="true"] {
  font-weight: 600;
}

.pf_select.is-up .pf_select__list {
  top: auto;
  bottom: calc(100% + 6px);
}


/* ---------- Free-preview forms: the website hint as an info icon with a tooltip (Daria, 23 Oct 2026) ----------
   Shown on hover and on keyboard focus; the input still points at the text with aria-describedby. */
.pf_label_row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pf_info {
  position: relative;
  display: inline-flex;
  outline: none;
  cursor: help;
}

/* Drawn as an SVG, so the "i" sits exactly in the middle of the circle */
.pf_info_icon {
  display: block;
  width: 15px;
  height: 15px;
  color: #8a8a85;
}

.pf_info:hover .pf_info_icon,
.pf_info:focus-visible .pf_info_icon {
  color: #1b1b1a;
}

.pf_tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  z-index: 30;
  width: max-content;
  max-width: 220px;
  padding: 8px 12px;
  border-radius: 10px;
  background-color: #1b1b1a;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.35;
  color: #ffffff;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 4px);
  transition: opacity .15s, transform .15s, visibility .15s;
  pointer-events: none;
}

.pf_tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: #1b1b1a;
}

.pf_info:hover .pf_tip,
.pf_info:focus-visible .pf_tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* "Other": the field that asks what exactly, right under the dropdown */
.pf .pf_other {
  margin-top: 8px;
}

.pf .pf_other[hidden] {
  display: none;
}


/* ---------- Free-preview forms in two steps (Daria, 23 Oct 2026) ---------- */
.pf_step {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pf_step[hidden],
.pf_next[hidden],
.pf_back[hidden] {
  display: none;
}

.pf_progress {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-on-light-muted);
}

.preview_panel > .pf_progress,
dialog > .pf_progress {
  margin-bottom: 18px;
}

.pf_progress_bar {
  display: flex;
  flex: 1;
  gap: 4px;
}

.pf_progress_bar i {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background-color: #e2e2df;
  transition: background-color .3s;
}

.pf_progress_bar i:first-child,
.pf_progress.is-2 .pf_progress_bar i {
  background-color: #b6d1f0;
}

.pf_next {
  justify-content: center;
  width: 100%;
  margin-top: 4px;
}

.pf.is-stepped .pf_step:not([hidden]) {
  flex: 1;
}

.pf_step_nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: auto; /* on the card's bottom edge, where Continue was */
}

.pf_step_nav .pf_submit {
  flex: 1;
}

/* Just the arrow, in a round outline the height of the submit button (the word was removed, Daria 23 Oct 2026) */
.pf_back {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid #e2e2df;
  border-radius: 999px;
  background: none;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  color: var(--text-on-light-muted);
  cursor: pointer;
}

.pf_back:hover {
  color: var(--text-on-light);
}

/* More room between the bookings dropdown and the consent checkbox (Daria, 23 Oct 2026) */
.pf_step .pf_consent {
  margin-top: 12px;
}

/* Logos in the bookings dropdown */
.pf_select__option,
.pf_select__button > span {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pf_opt_icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
}

.pf_opt_icon svg {
  width: 18px;
  height: 18px;
}

/* ---------- Hero booking in a phone-sized card (Daria, 23 Oct 2026) ----------
   Measured on the card's column, so it applies wherever the card is this narrow. The fixed 700px card is for wide
   screens, where the widget sits beside the text; on a phone it sits under the text, so each step takes the height it
   needs and nothing is cut off. */
@media screen and (max-width: 991px) {
  /* Under the hero text (tablets and phones): each step takes the height it needs; the car panel beside the form is
     left out, the Summary still shows the car and price */
  .hero .hero-search,
  .hero .hero-fleet,
  .hero .esb {
    height: auto;
    min-height: 0;
  }

  .hero .esb {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero .esb-aside {
    display: none;
  }

  .hero .esb-review__body {
    max-height: none;
    overflow: visible;
  }
}

@container (max-width: 520px) {
  .hero .hero-search,
  .hero .hero-fleet,
  .hero .esb {
    padding: 16px;
  }

  /* Car cards: price on top, a full-width Book button under it */
  .hero .hero-fleet .esb-fleet {
    gap: 8px;
  }

  .hero .hero-fleet .esb-car__buy {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .hero .hero-fleet .esb-car__cta {
    justify-content: center;
    white-space: nowrap;
  }

  .hero .hero-fleet .esb-car__name {
    font-size: 16px;
  }

  .hero .esb-done--example {
    padding: 8px;
  }
}

/* Phones: two cars in the list, not four (Daria, 23 Oct 2026) */
@container (max-width: 520px) {
  .hero .hero-fleet .esb-car:nth-child(n+3) {
    display: none;
  }

  /* and no empty second row where they were */
  .hero .hero-fleet,
  .hero .hero-fleet .esb-fleet {
    grid-template-rows: none;
  }
}

/* Phones (Daria, 23 Oct 2026): no "Included at no extra cost" in the Summary, the payment logos on their own line under
   Back and "Proceed to payment", and the confirmation e-mail on the end screen full width */
@container (max-width: 520px) {
  .hero .esb-review__incl {
    display: none;
  }

  .hero .esb-nav--submit {
    flex-wrap: wrap;
  }

  .hero .esb-nav--submit .esb-paymarks {
    order: 3;
    flex-basis: 100%;
    justify-content: center;
  }

  .hero .esb-nav--submit {
    gap: 8px;
  }

  .hero .esb-nav--submit .esb-btn--ghost {
    flex: none;
    width: auto;
    padding-right: 14px;
    padding-left: 14px;
  }

  .hero .esb-nav--submit .esb-btn:not(.esb-btn--ghost) {
    padding-right: 12px;
    padding-left: 12px;
    font-size: 14px;
    white-space: nowrap;
  }

  .hero .esb-nav--submit .esb-btn:not(.esb-btn--ghost) {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }

  .viz-mail {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }
}

/* Phones: the two cars in one column, each card full width with its price and Book button side by side
   (Daria, 23 Oct 2026) */
@container (max-width: 520px) {
  .hero .hero-fleet .esb-fleet {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .hero .hero-fleet .esb-car__media {
    aspect-ratio: 16 / 8;
  }

  .hero .hero-fleet .esb-car__buy {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* Phones: each car card in one row, the photo on the left, category, name, seats and gearbox, price and Book on the
   right (Daria, 23 Oct 2026) */
@container (max-width: 520px) {
  .hero .hero-fleet .esb-car {
    display: grid;
    grid-template-columns: 42% minmax(0, 1fr);
    align-items: center;
    gap: 12px;
  }

  .hero .hero-fleet .esb-car__media {
    height: 100%;
    min-height: 110px;
    aspect-ratio: auto;
  }

  .hero .hero-fleet .esb-car__body {
    padding: 4px 4px 4px 0;
  }

  /* seats and gearbox, hidden on the wider card, shown here (Daria, 23 Oct 2026) */
  .hero .hero-fleet .esb-car__specs {
    display: flex;
    margin-top: 6px;
  }

  .hero .hero-fleet .esb-car__specs li {
    padding: 0 8px;
    font-size: 12px;
  }

  .hero .hero-fleet .esb-car__specs li:first-child {
    padding-left: 0;
  }

  .hero .hero-fleet .esb-car__buy {
    flex-direction: column;
    align-items: stretch;
    gap: 12px; /* more room between the price and Book */
    padding-top: 8px;
  }

  .hero .hero-fleet .esb-car__price strong {
    font-size: 18px;
  }

  .hero .hero-fleet .esb-car__cta {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}


/* Summary, Trip and Driver folded on phones (home.js adds the toggles in the title rows) */
.esb-fold-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.esb-fold-toggle {
  display: none;
}

@container (max-width: 520px) {
  .hero .esb-foldable:not(.is-open) .esb-review__list > div:nth-child(n+2) {
    display: none;
  }

  .hero .esb-fold-toggle {
    display: inline-flex;
    flex: none;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    color: #121212;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }

  /* no line above Back / Proceed to payment */
  .hero .esb-review__cols,
  .hero .esb-review__body {
    border-bottom: 0;
  }
}

/* Desktop: the first step (the search card) narrower than the later steps (Daria, 23 Oct 2026) */
@media screen and (min-width: 992px) {
  .hero .hero-search {
    max-width: 480px;
  }
}

/* Phones: each car card has the photo beside the category, name and seats/gearbox; price and Book run under both
   across the full card (Daria, 23 Oct 2026) */
@container (max-width: 520px) {
  .hero .hero-fleet .esb-car {
    grid-template-columns: 38% minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 10px;
  }

  .hero .hero-fleet .esb-car__media {
    grid-column: 1;
    grid-row: 1 / 4;
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .hero .hero-fleet .esb-car__body {
    display: contents;
  }

  .hero .hero-fleet .esb-car__cat,
  .hero .hero-fleet .esb-car__name,
  .hero .hero-fleet .esb-car__specs {
    grid-column: 2;
    margin: 0;
  }

  .hero .hero-fleet .esb-car__cat { grid-row: 1; align-self: end; }
  .hero .hero-fleet .esb-car__name { grid-row: 2; }
  .hero .hero-fleet .esb-car__specs { grid-row: 3; align-self: start; }

  .hero .hero-fleet .esb-car__buy {
    grid-column: 1 / -1;
    grid-row: 4;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 4px 2px;
    border-top: 1px solid #ececea;
  }

  .hero .hero-fleet .esb-car__cta {
    padding-right: 20px;
    padding-left: 20px;
  }
}


/* Phones: the bookings sheet on the end screen shows the previous booking and the new one only (Daria, 23 Oct 2026) */
@container (max-width: 520px) {
  .viz-sheet tr:nth-child(n+2):nth-child(-n+4) {
    display: none;
  }
}

/* ---------- The free-preview popup on phones: full screen (Daria, 23 Oct 2026) ----------
   Edge to edge and full height, scrolling inside itself, the close button always in reach. Fields at 16px, so iOS
   doesn't zoom the page in when one is tapped (that zoom made filling it in feel broken). */
@media screen and (max-width: 767px) {
  .preview-dialog {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border-radius: 0;
  }

  .preview-dialog_close {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    right: 12px;
  }

  .pf input[type="text"],
  .pf input[type="email"],
  .pf input[type="tel"],
  .pf select,
  .pf_select__button {
    font-size: 16px;
  }
}

/* Phones: the booking's Back buttons are just the arrow, no word and no outline (Daria, 23 Oct 2026). The word
   stays for screen readers (aria-label added in home.js). */
@container (max-width: 520px) {
  .hero .esb .esb-nav [data-back] {
    flex: none;
    width: 44px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font-size: 0;
    color: #121212;
  }

  .hero .esb .esb-nav [data-back]::before {
    margin: 0;
    font-size: 22px;
  }
}

/* Phones: the popup sits inside a 12px margin with rounded corners again, not full screen (Daria, 23 Oct 2026). It
   still scrolls inside itself; the fields keep 16px so iOS doesn't zoom. */
@media screen and (max-width: 767px) {
  .preview-dialog {
    width: calc(100vw - 24px);
    height: auto;
    max-height: calc(100dvh - 24px);
    margin: auto;
    border-radius: 20px;
  }

  .preview-dialog_close {
    position: absolute;
  }
}