/* A small, local rehearsal of the booking flow; each state keeps the same space. */
.landing-v2 .landing-tryout,
.landing-v2 .landing-tryout * { box-sizing: border-box; }

.landing-v2 .landing-tryout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  width: calc(100% - 40px);
  max-width: 1040px;
  min-width: 0;
  margin: auto;
  padding-block: 6px;
}

.landing-v2:has(.landing-tryout) .hero { padding-bottom: 0; }

.landing-v2 .booking-preview {
  display: grid;
  grid-template-rows: 18px 44px;
  gap: 8px;
  min-width: 0;
  height: 92px;
  padding: 10px 12px;
  border: 1px solid #cddcbe;
  border-radius: 12px;
  background: linear-gradient(115deg, #eaf2e1, #f5f9ed);
  color: var(--experience-ink, #12362b);
  box-shadow: 0 3px 12px rgb(7 61 50 / 3%);
}

.landing-v2 .preview-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.landing-v2 .preview-topbar > strong {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: #28563b;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.3;
  white-space: nowrap;
}

.landing-v2 .preview-topbar > strong::before {
  content: '';
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: #52833f;
  box-shadow: 0 0 0 3px rgb(82 131 63 / 9%);
}

.landing-v2 .preview-simulation {
  display: inline-flex;
  align-items: center;
  min-height: 17px;
  flex: 0 0 auto;
  padding: 1px 5px;
  border: 1px solid #d7e3ca;
  border-radius: 5px;
  background: rgb(255 255 255 / 65%);
  color: #687f57;
  font-size: 8.5px;
  font-weight: 500;
  line-height: 1.2;
}

.landing-v2 .preview-content {
  min-width: 0;
  min-height: 0;
  border-radius: 8px;
}

.landing-v2 .preview-content:focus-visible {
  outline: 2px solid #769d57;
  outline-offset: 3px;
}

.landing-v2 .booking-preview button {
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.landing-v2 .booking-preview button:focus-visible,
.landing-v2 .landing-tryout .flow-cue:focus-visible {
  outline: 2px solid #618d43;
  outline-offset: 3px;
}

.landing-v2 .preview-times {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  height: 44px;
  min-width: 0;
}

.landing-v2 .preview-time {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  min-height: 44px;
  padding: 7px;
  border: 1px solid #c5d8b4;
  border-radius: 8px;
  background: #fff;
  color: #0c5d49;
  font-size: 13px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgb(7 61 50 / 3%);
  transition: background .16s, border-color .16s, transform .16s;
}

.landing-v2 .preview-time > svg { width: 13px; height: 13px; flex: 0 0 13px; color: #7b9d60; }
.landing-v2 .preview-time:hover { border-color: #7b9d60; background: #edf6df; }
.landing-v2 .preview-time:active { transform: translateY(1px); }

.landing-v2 .preview-confirmation,
.landing-v2 .preview-message {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 44px;
}

.landing-v2 .preview-confirmation-icon,
.landing-v2 .preview-message-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  background: var(--experience-lime, #c9f970);
  color: #396531;
}

.landing-v2 .preview-confirmation-icon > svg,
.landing-v2 .preview-message-icon > svg { width: 20px; height: 20px; }

.landing-v2 .preview-confirmation-copy {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  text-align: left;
}

.landing-v2 .preview-confirmation-copy > strong {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #0c5d49;
  font-size: 14px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.landing-v2 .preview-confirmation-copy > strong > svg { width: 13px; height: 13px; flex: 0 0 13px; color: #6d8f55; }
.landing-v2 .preview-confirmation-copy:hover > strong { color: #073d32; }
.landing-v2 .preview-confirmation-copy > small {
  max-width: 100%;
  overflow: hidden;
  color: #617857;
  font-size: 10px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-v2 .preview-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 88px;
  min-height: 44px;
  flex: 0 0 auto;
  padding: 8px 9px;
  border: 1px solid #0c5d49;
  border-radius: 8px;
  background: #0c5d49;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: background .16s, border-color .16s;
}

.landing-v2 .preview-next:hover { border-color: #073d32; background: #073d32; }
.landing-v2 .preview-next > svg { width: 14px; height: 14px; }
.landing-v2 .preview-message-icon { width: 24px; flex-basis: 24px; border-radius: 8px; background: #dcebc9; }

.landing-v2 .preview-message > p {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  color: #365c3d;
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.landing-v2 .preview-message > p > strong { color: #1f5134; font-weight: 650; white-space: nowrap; }

.landing-v2 .preview-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  flex: 0 0 44px;
  padding: 0;
  border: 1px solid #d1dfc5;
  border-radius: 8px;
  background: rgb(255 255 255 / 65%);
  color: #557c3f;
  transition: background .16s, border-color .16s;
}

.landing-v2 .preview-reset:hover { border-color: #a8c18c; background: #e1edcf; }
.landing-v2 .preview-reset > svg { width: 16px; height: 16px; }

.landing-v2 .landing-tryout > .landing-flow {
  align-self: stretch;
  gap: 8px;
  width: 100%;
  max-width: none;
  margin: 0;
}

.landing-v2 .landing-tryout .flow-cue {
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 56px;
  min-height: 56px;
  padding: 4px 6px;
}

.landing-v2 .landing-tryout .flow-cue-icon { width: 16px; height: 16px; flex: 0 0 16px; border-radius: 5px; }
.landing-v2 .landing-tryout .flow-cue-icon > svg { width: 16px; height: 16px; }
.landing-v2 .landing-tryout .flow-cue-copy { flex: 0 1 auto; width: 100%; text-align: center; }
.landing-v2 .landing-tryout .flow-cue-copy > strong { font-size: 11px; line-height: 1.2; white-space: nowrap; overflow-wrap: normal; }
.landing-v2 .landing-tryout .flow-cue-copy > small { margin-top: 1px; font-size: 9px; line-height: 1.2; white-space: nowrap; overflow-wrap: normal; }
.landing-v2 .landing-tryout .flow-cue > svg { display: none; }
.landing-v2 .landing-tryout .flow-cue.is-complete { border-color: #b6cda0; background: #edf4e5; }
.landing-v2 .landing-tryout .flow-cue.is-complete .flow-cue-icon { background: #dfebce; color: #507b3d; }
.landing-v2 .landing-tryout .flow-cue.is-complete::after { content: ''; position: absolute; top: 6px; right: 6px; width: 4px; height: 4px; border-radius: 50%; background: #739e4e; }
.landing-v2 .landing-tryout .flow-cue:disabled { opacity: .52; cursor: default; }
.landing-v2 .landing-tryout .flow-cue:disabled:hover { border-color: #d1e1c3; background: #edf4e6; }

@media (min-width: 768px) {
  .landing-v2 .landing-tryout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; width: calc(100% - 64px); }
  .landing-v2 .booking-preview { grid-template-columns: 124px minmax(0, 1fr); grid-template-rows: 44px; gap: 10px; height: 64px; padding: 9px 10px; }
  .landing-v2 .preview-topbar { flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; }
  .landing-v2 .preview-topbar > strong { gap: 6px; font-size: 10px; }
  .landing-v2 .preview-times { gap: 6px; }
  .landing-v2 .preview-time { gap: 4px; padding-inline: 6px; font-size: 12px; }
  .landing-v2 .preview-time > svg { width: 12px; height: 12px; flex-basis: 12px; }
  .landing-v2 .preview-confirmation, .landing-v2 .preview-message { gap: 6px; }
  .landing-v2 .preview-confirmation-icon { width: 24px; flex-basis: 24px; }
  .landing-v2 .preview-confirmation-copy > small { font-size: 9.5px; }
  .landing-v2 .preview-next { min-width: 76px; gap: 4px; padding-inline: 6px; font-size: 9px; }
  .landing-v2 .preview-next > svg { width: 12px; height: 12px; }
  .landing-v2 .preview-message-icon { width: 20px; flex-basis: 20px; }
  .landing-v2 .landing-tryout .flow-cue { height: 64px; min-height: 64px; gap: 3px; padding: 4px 6px; }
  .landing-v2 .landing-tryout .flow-cue-icon { width: 20px; height: 20px; flex-basis: 20px; border-radius: 6px; }
  .landing-v2 .landing-tryout .flow-cue-icon > svg { width: 18px; height: 18px; }
  .landing-v2 .landing-tryout .flow-cue-copy > strong { font-size: 12px; }
  .landing-v2 .landing-tryout .flow-cue-copy > small { margin-top: 2px; font-size: 10px; }
}

@media (min-width: 1000px) {
  .landing-v2 .landing-tryout { width: calc(100% - 80px); }
  .landing-v2 .booking-preview { grid-template-columns: 140px minmax(0, 1fr); }
  .landing-v2 .preview-topbar > strong { font-size: 11px; }
  .landing-v2 .preview-time { font-size: 13px; }
  .landing-v2 .preview-confirmation-copy > small { font-size: 10px; }
  .landing-v2 .preview-next { min-width: 88px; font-size: 10px; }
  .landing-v2 .preview-next > svg { width: 14px; height: 14px; }
  .landing-v2 .preview-message > p { font-size: 12px; }
  .landing-v2 .landing-tryout .flow-cue { flex-direction: row; justify-content: flex-start; gap: 8px; padding-inline: 10px; }
  .landing-v2 .landing-tryout .flow-cue-icon { width: 23px; height: 23px; flex-basis: 23px; }
  .landing-v2 .landing-tryout .flow-cue-icon > svg { width: 20px; height: 20px; }
  .landing-v2 .landing-tryout .flow-cue-copy { flex: 1 1 0; width: auto; text-align: left; }
}

@media (max-width: 359px) {
  .landing-v2 .landing-tryout { width: calc(100% - 32px); }
  .landing-v2 .booking-preview { padding-inline: 10px; }
  .landing-v2 .preview-confirmation-copy > small { font-size: 9.5px; }
  .landing-v2 .landing-tryout > .landing-flow { gap: 6px; }
}

@media (max-width: 319px) {
  .landing-v2 .preview-topbar > strong { gap: 6px; font-size: 10px; }
  .landing-v2 .preview-time { gap: 4px; padding-inline: 6px; font-size: 12px; }
  .landing-v2 .preview-time > svg { width: 12px; height: 12px; flex-basis: 12px; }
  .landing-v2 .preview-confirmation-icon { width: 24px; flex-basis: 24px; }
  .landing-v2 .preview-next { min-width: 76px; gap: 4px; padding-inline: 7px; }
  .landing-v2 .preview-next > svg { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-v2 .landing-tryout * { transition: none !important; }
}