@font-face {
  font-family: Inter;
  src: url("/assets/fonts/inter/InterVariable.693b77d4f32ee9b8bfc9.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url("/assets/fonts/inter/InterVariable-Italic.e564f652916db6c13957.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --surface-page: #fff;
  --surface-raised: #fff;
  --surface-sunken: color-mix(in srgb, var(--ink) 6%, var(--surface-page));
  --preview-mode-stripes: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--surface-page) 7%, transparent) 0 14px,
    transparent 14px 28px
  );
  --surface-ghost: rgba(37, 48, 68, 0.05);
  --surface-ghost-hover: rgba(37, 48, 68, 0.09);
  --surface-ghost-disabled: rgba(37, 48, 68, 0.03);
  --radius-control: 8px;
  --radius-card: 14px;
  --border-hairline: #e2e5e9;
  --border-card: rgba(37, 48, 68, 0.12);
  --border-card-section: var(--border-light-control);
  --border-field: #d2d7de;
  --border-light-control: rgba(37, 48, 68, 0.1);
  --border-notice: color-mix(in srgb, var(--notice-ink) 14%, transparent);
  --ink: #253044;
  --ink-body: #4e5969;
  --ink-muted: #606975;
  --ink-faint: #a6adb7;
  --ink-placeholder: #b0b7c0;
  --ink-disabled: rgba(37, 48, 68, 0.4);
  --accent: #c43f2d;
  --accent-hover: #ac3525;
  --accent-link: var(--accent);
  --accent-tint: #fcf3f1;
  --brand-facebook: #0866ff;
  --brand-whatsapp: #25d366;
  --status-positive: #23765b;
  --status-positive-tint: color-mix(in srgb, var(--status-positive) 8%, var(--surface-page));
  --avatar-background: var(--border-hairline);
  --accent-wash: var(--surface-sunken);
  --blue-muted: #4b86a5;
  --guide-change-blue: #2d76a0;
  --notice: var(--surface-sunken);
  --notice-ink: var(--ink-body);
  --attention: #995500;
  --danger: #95414e;
  --font-text: Inter, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-text);
  --font-weight-heading: 650;
  --letter-spacing-heading: -0.015em;
  --letter-spacing-display: -0.025em;
  --letter-spacing-display-large: -0.035em;
  --line-height-heading: 1.25;
  --line-height-display: 1.15;
  --line-height-display-large: 1.08;
  --font-size-eyebrow: 0.6875rem;
  --font-size-meta: 0.8125rem;
  --font-size-small: 0.875rem;
  --font-size-button: 0.9375rem;
  --font-size-body: 1rem;
  --font-size-body-large: 1.0625rem;
  --font-size-lead: 1.125rem;
  --font-size-subheading: 1.2rem;
  --font-size-large: 1.25rem;
  --font-size-heading: 1.375rem;
  --font-size-avatar: 2rem;
  --font-size-display-small: 2.25rem;
  --font-size-display-medium: 2.5rem;
  --font-size-display-large: 2.75rem;
  --font-size-display-extra-large: 4.5rem;
  --page-header-height: 64px;
  --page-header-logo-width: 112px;
  --page-header-logo-height: 21px;
  --page-min-inline-padding: 22px;
  --page-sticky-gap: 32px;
  --page-sticky-top: var(--page-sticky-gap);
  --card-gap: 24px;
  --shadow-card: 0 1px 2px rgba(37, 48, 68, 0.05);
  --shadow-content-card: 0 2px 6px rgba(37, 48, 68, 0.07);
  --shadow-content-card-hover: 0 4px 10px rgba(37, 48, 68, 0.1);
  --shadow-modal: 0 24px 64px rgba(37, 48, 68, 0.14);
  --focus-ring: 3px solid var(--accent);
  --focus-field-border: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
  color: var(--ink-body);
  font-family: var(--font-text);
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
}

[hidden] {
  display: none !important;
}

html {
  background: var(--surface-page);
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--surface-page);
  color: var(--ink-body);
  font-size: var(--font-size-body);
  line-height: 1.55;
}

html.has-open-modal {
  overflow: hidden;
}

html.has-open-modal body {
  /* Clipping keeps sticky page elements anchored without allowing background scroll. */
  overflow: clip;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.global-loader {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.card.global-loader-panel {
  display: grid;
  justify-items: center;
  gap: 12px;
  min-width: 144px;
  padding: var(--card-padding);
  background: var(--surface-page);
  box-shadow: 0 4px 10px rgb(0 0 0 / 3%), 0 24px 96px 24px rgb(0 0 0 / 6%);
  color: var(--ink-body);
}

.global-loader-mark {
  display: block;
  width: 72px;
  height: 72px;
  color: var(--accent);
}

.loading-spinner-mask {
  mask-type: luminance;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--accent);
}

a:where(:hover):not(:where(.button, .icon-button)) {
  color: var(--accent-hover);
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  color: var(--ink);
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: var(--font-weight-heading);
  letter-spacing: var(--letter-spacing-heading);
}

:is(h1, h2, h3) a {
  text-decoration: none;
}

h1 {
  margin-bottom: 20px;
  font-size: clamp(
    var(--font-size-display-small),
    6vw,
    var(--font-size-display-large)
  );
  letter-spacing: var(--letter-spacing-display);
  line-height: var(--line-height-display);
}

h2 {
  margin-bottom: 12px;
  font-size: var(--font-size-heading);
  line-height: var(--line-height-heading);
}

h3 {
  margin-bottom: 10px;
  font-size: var(--font-size-large);
  line-height: var(--line-height-heading);
}

h4 {
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 12px;
  font-size: var(--font-size-subheading);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h5 {
  color: var(--ink);
  font-weight: 500;
  font-size: var(--font-size-lead);
  margin-bottom: 8px;
  line-height: 1.2;
}

h6 {
  color: var(--ink);
  font-weight: bold;
  font-size: var(--font-size-body);
  margin-bottom: 8px;
  line-height: 1.2;
}

.skip-link {
  position: fixed;
  z-index: 10;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  transform: translateY(-160%);
  border-radius: var(--radius-control);
  background: var(--ink);
  color: #fff;
  font-weight: 700;
}

.skip-link:focus {
  transform: translateY(0);
}

.page-header {
  --page-header-background: var(--surface-sunken);
  min-height: var(--page-header-height);
  background: var(--page-header-background);
  transition:
    background-color 280ms ease,
    box-shadow 280ms ease;
}

.page-header.is-scrolled {
  box-shadow: 0 1px 0 var(--border-card-section);
}

.page-header-naked {
  --page-header-background: var(--surface-page);
  position: sticky;
  z-index: 5;
  top: 0;
}

.page-header-naked.home-header-sunken {
  --page-header-background: var(--surface-sunken);
}

.page-header-fixed {
  position: fixed;
  z-index: 5;
  inset: 0 0 auto;
}

.page-header-fixed + main {
  --page-sticky-top: calc(var(--page-header-height) + var(--page-sticky-gap));
  margin-top: var(--page-header-height);
  scroll-margin-top: var(--page-header-height);
}

.screen-section-container {
  width: min(100% - 2 * var(--page-min-inline-padding), 1180px);
  margin-inline: auto;
}

.page-header-inner,
.page-back-navigation > .screen-section-container,
:is(.guide-management-main, .guide-visitor-signed-in) > .screen-section-container {
  width: calc(100% - 2 * var(--page-min-inline-padding));
}

.page-header-inner {
  display: flex;
  min-height: var(--page-header-height);
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-inline: auto;
}

.page-header-auth {
  display: flex;
  min-width: 0;
  align-items: center;
}

.public-navigation {
  gap: 20px;
}

.public-navigation .public-navigation-item {
  font-size: var(--font-size-button);
}

.public-navigation-item {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  white-space: nowrap;
}

.app-brand-group,
.app-secondary-navigation {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0;
}

.app-brand-group {
  gap: 12px;
}

.app-secondary-navigation {
  gap: 6px;
}

.app-brand {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  border-radius: var(--radius-control);
  color: var(--ink);
  text-decoration: none;
}

.app-brand {
  flex: 0 0 auto;
}

.app-brand-logo,
.wordmark-image {
  display: block;
  width: var(--page-header-logo-width);
  /* Whole-pixel dimensions avoid fractional SVG image sizing in Safari. */
  height: var(--page-header-logo-height);
  flex: 0 0 auto;
}

.plus-logo {
  width: 112px;
  height: auto;
}

.app-brand,
.app-user-avatar {
  cursor: pointer;
}

.app-user-avatar:not(.raised-selection):hover {
  background: var(--surface-page);
}

.app-positioning-statement {
  flex: 0 0 auto;
  width: min-content;
  margin-inline-start: 3px;
  padding-inline-start: 12px;
  border-inline-start: 1px solid var(--border-card);
  color: var(--ink-muted);
  white-space: normal;
}

.page-header-view-menu {
  display: none;
}

.page-header-view-menu .segmented-control {
  --segmented-control-background: transparent;
}

.search-icon {
  display: block;
  width: 20px;
  height: 20px;
}

.app-user-avatar {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 12px;
  text-decoration: none;
}

.mobile-navigation {
  --mobile-navigation-edge-inset: calc((var(--page-header-height) - 44px) / 2);
  --mobile-navigation-offset: calc(
    var(--header-inline-padding, var(--page-min-inline-padding)) - var(--mobile-navigation-edge-inset)
  );
  position: relative;
  display: none;
  margin-right: calc(-1 * var(--mobile-navigation-offset));
}

.mobile-navigation-toggle {
  transition: border-bottom-right-radius 160ms ease;
}

.mobile-navigation-toggle[aria-expanded="true"] {
  background: var(--surface-ghost-hover);
}

.mobile-navigation-toggle[aria-expanded="true"] {
  border-bottom-right-radius: 0;
}

.mobile-navigation-toggle-icon {
  position: relative;
  display: block;
  width: 21px;
  height: 16px;
}

.mobile-navigation-toggle-icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition:
    top 160ms ease,
    transform 160ms ease,
    opacity 120ms ease;
}

.mobile-navigation-toggle-icon span:first-child {
  top: 0;
}

.mobile-navigation-toggle-icon span:nth-child(2) {
  top: 7px;
}

.mobile-navigation-toggle-icon span:last-child {
  top: 14px;
}

.mobile-navigation-toggle[aria-expanded="true"]
  .mobile-navigation-toggle-icon
  span:first-child,
.mobile-navigation-toggle[aria-expanded="true"]
  .mobile-navigation-toggle-icon
  span:last-child {
  top: 7px;
}

.mobile-navigation-toggle[aria-expanded="true"]
  .mobile-navigation-toggle-icon
  span:first-child {
  transform: rotate(45deg);
}

.mobile-navigation-toggle[aria-expanded="true"]
  .mobile-navigation-toggle-icon
  span:nth-child(2) {
  opacity: 0;
}

.mobile-navigation-toggle[aria-expanded="true"]
  .mobile-navigation-toggle-icon
  span:last-child {
  transform: rotate(-45deg);
}

.mobile-navigation-menu {
  position: absolute;
  z-index: 1;
  top: calc(100% + 1px);
  right: 0;
  display: grid;
  width: calc(
    min(320px, 100vw - 2 * var(--page-min-inline-padding)) + var(--mobile-navigation-offset) - 60px
  );
  padding: 8px;
  border-radius: 14px;
  border-top-right-radius: 0;
  background:
    linear-gradient(var(--surface-ghost-hover), var(--surface-ghost-hover)),
    var(--page-header-background);
  box-shadow: var(--shadow-content-card-hover);
  transform-origin: top right;
  animation: mobile-navigation-menu-enter 160ms
    cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mobile-navigation-menu[hidden] {
  display: none;
}

@keyframes mobile-navigation-menu-enter {
  from {
    transform: scale(0.94);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.mobile-navigation-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  min-width: 0;
  min-height: 48px;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-control);
  color: var(--ink);
  font-size: var(--font-size-body);
  font-weight: 500;
  text-decoration: none;
}

.nav-icon {
  width: 24px;
  height: 24px;
}

.mobile-navigation-item > .nav-icon {
  justify-self: center;
  opacity: 0.5;
}

.mobile-navigation-user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-navigation-item[href]:hover,
.mobile-navigation-item[href]:focus-visible {
  background: var(--surface-ghost-hover);
  color: var(--ink);
}

.mobile-navigation-item[href]:focus-visible {
  outline-color: var(--accent);
}

.mobile-navigation-item.is-placeholder {
  cursor: default;
}

.mobile-navigation-user {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 5%, transparent);
  border-radius: 0 0 var(--radius-control) var(--radius-control);
}

.public-sign-in {
  white-space: nowrap;
}

.page-header .public-sign-in {
  color: var(--accent-link);
}

.two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--two-column-gap, 24px);
}

.two-column-compact {
  --two-column-gap: 12px;
  --two-column-stacked-gap: 12px;
}

.stack {
  display: grid;
  gap: var(--stack-gap, 16px);
}

.list-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cluster {
  display: flex;
  align-items: var(--cluster-align, center);
  gap: var(--cluster-gap, 16px);
}

.cluster-wrap {
  flex-wrap: wrap;
}

.cluster-split {
  justify-content: space-between;
}

.text-truncate {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.section-title {
  margin: 0 0 12px;
  font-family: var(--font-text);
  font-size: var(--font-size-lead);
  font-weight: 700;
  line-height: 1.35;
}

.section-title-large {
  font-size: var(--font-size-heading);
}

.card-title {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--font-size-large);
  font-weight: 700;
  line-height: 1.3;
}

.supporting-copy {
  color: var(--ink-muted);
  font-size: var(--font-size-body);
  line-height: 1.5;
}

.meta-copy {
  color: var(--ink-muted);
  font-size: var(--font-size-small);
  line-height: 1.4;
}

.wordmark {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  text-decoration: none;
}

.error-main {
  display: grid;
  min-height: calc(100vh - var(--page-header-height));
  align-items: center;
  padding-block: 56px;
}

.home-main {
  overflow: clip;
  background: var(--surface-sunken);
}

.home-hero {
  min-height: calc(100svh - var(--page-header-height) - 30px);
  display: flex;
  align-items: center;
  padding-block: clamp(24px, 4svh, 56px) clamp(56px, 6svh, 80px);
  border-radius: 0 0 10vw 10vw;
  background: var(--surface-page);
  scroll-margin-top: var(--page-header-height);
}

.home-scroll-cue {
  position: fixed;
  z-index: 4;
  bottom: max(12px, env(safe-area-inset-bottom));
  left: 50%;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  transform: translateX(-50%);
  color: var(--accent);
  opacity: 0.72;
  pointer-events: none;
  transition: opacity 180ms ease-out;
}

.home-scroll-cue.is-dismissed {
  opacity: 0;
}

.home-scroll-cue-icon {
  width: 30px;
  height: 30px;
  animation: home-scroll-cue-bounce 4.8s ease-in-out infinite;
}

@keyframes home-scroll-cue-bounce {
  0%,
  8%,
  16%,
  24%,
  100% {
    transform: translateY(0);
  }

  4%,
  12%,
  20% {
    transform: translateY(7px);
  }
}

.home-story-layout {
  --home-layout-gap: clamp(56px, 8vw, 112px);
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr);
  align-items: center;
  gap: var(--home-layout-gap);
}

.home-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 64px;
}

.home-hero-copy {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 960px;
  text-align: center;
}

.home-hero h1 {
  max-width: 16ch;
  text-wrap: balance;
  margin: 0 auto 24px;
  font-size: clamp(3.1rem, 5.6vw, calc(var(--font-size-display-extra-large) * 1.4));
  letter-spacing: var(--letter-spacing-display-large);
  line-height: var(--line-height-display-large);
}

.home-hero .lead {
  max-width: 660px;
  margin: 0 auto;
  font-size: clamp(var(--font-size-lead), 1.7vw, var(--font-size-heading));
  line-height: 1.55;
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}

.home-hero .home-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: max-content;
  min-width: min(14rem, 100%);
  max-width: 100%;
  margin-inline: auto;
}

.home-checklist-visual {
  --home-checklist-marker-size: 24px;
  --home-checklist-row-height: 48px;
  position: relative;
  isolation: isolate;
  width: 24.5rem;
  max-width: 100%;
  /* The unshifted photograph ends at the centre of the final row. */
  padding-bottom: calc(var(--home-checklist-row-height) / 2);
}

.home-checklist-portrait {
  --home-portrait-fade: linear-gradient(to bottom, #000 80%, transparent 100%);
  display: block;
  width: 65%;
  height: auto;
  aspect-ratio: 4 / 5;
  margin-inline: auto;
  object-fit: cover;
  object-position: center top;
  -webkit-mask-image: var(--home-portrait-fade);
  mask-image: var(--home-portrait-fade);
}

.home-checklist {
  --home-checklist-gap: 12px;
  --home-checklist-row-step: calc(var(--home-checklist-row-height) + var(--home-checklist-gap));
  --home-checklist-first-row-shift: 2;
  --home-checklist-second-row-shift: 1;
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, var(--home-checklist-row-height));
  gap: var(--home-checklist-gap);
}

/* Start each row at the bottom, then lift earlier rows as the next one appears. */
.home-checklist:has(> .home-checklist-item:nth-child(3).is-checked) {
  --home-checklist-first-row-shift: 1;
}

.home-checklist:has(> .home-checklist-item:nth-child(5).is-checked) {
  --home-checklist-first-row-shift: 0;
  --home-checklist-second-row-shift: 0;
}

.home-checklist-item:nth-child(-n + 2) {
  --home-checklist-shift: calc(var(--home-checklist-first-row-shift) * var(--home-checklist-row-step));
}

.home-checklist-item:nth-child(n + 3):nth-child(-n + 4) {
  --home-checklist-shift: calc(var(--home-checklist-second-row-shift) * var(--home-checklist-row-step));
}

.home-checklist-item {
  display: grid;
  grid-template-columns: var(--home-checklist-marker-size) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 12px;
  color: var(--ink);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-heading);
  letter-spacing: var(--letter-spacing-heading);
  line-height: 1.4;
}

/* These marks illustrate the guide's contents; they are not form controls. */
.home-checklist-marker {
  display: grid;
  width: var(--home-checklist-marker-size);
  height: var(--home-checklist-marker-size);
  place-items: center;
  color: var(--accent);
}

.home-checklist-marker .tick-icon {
  width: 100%;
  height: 100%;
}

.home-checklist-marker .tick-icon path {
  stroke-dasharray: 16;
  stroke-dashoffset: 16;
  transition: stroke-dashoffset 160ms linear;
}

.home-motion-ready .home-checklist-item {
  opacity: 0;
  translate: 0 var(--home-checklist-shift, 0px);
}

.home-checklist-item.is-checked {
  opacity: 1;
  animation: home-checklist-pop 900ms ease-out;
  transition:
    opacity 160ms linear,
    translate 240ms linear;
}

.home-checklist-item.is-checked .tick-icon path {
  stroke-dashoffset: 0;
}

@keyframes home-checklist-pop {
  0%,
  100% {
    transform: scale(1);
  }

  12% {
    transform: scale(1.08);
  }

  68% {
    transform: scale(0.985);
  }

  84% {
    transform: scale(1.01);
  }
}

@media (max-width: 520px) {
  .home-checklist-visual {
    --home-checklist-marker-size: 20px;
    /* Use some of the hero gutters to retain the single-line cards longer. */
    max-width: calc(100% + 32px);
  }

  .home-checklist-item {
    gap: 6px;
    padding: 8px 12px;
    font-size: var(--font-size-body-large);
  }
}

@media (max-width: 423px) {
  .home-checklist-visual {
    --home-checklist-row-height: 64px;
    /* Switch together to a width where all six labels occupy two lines. */
    width: 17.5rem;
    max-width: 100%;
  }

  .home-checklist-portrait {
    aspect-ratio: 2 / 3;
    transform: translateY(-30px);
  }

  .home-checklist-item {
    padding-inline: 16px;
  }
}

.home-story {
  --home-story-padding: clamp(72px, 9vw, 112px);
  padding-block: var(--home-story-padding);
}

.home-story-guide {
  padding-block-start: calc(var(--home-story-padding) + clamp(24px, 3vw, 40px));
}

.home-story-guide .home-story-layout {
  align-items: start;
}

@media (min-width: 960px) {
  .home-story-guide .home-story-layout {
    grid-template-columns: minmax(320px, calc(44% - 150px)) minmax(420px, 1fr);
  }
}

.home-story-audiences {
  padding-block-start: clamp(40px, 6vw, 72px);
}

.home-story-layout.home-audiences-layout {
  grid-template-columns: minmax(520px, 1.3fr) minmax(0, 0.7fr);
  align-items: start;
  gap: clamp(48px, 6vw, 88px);
}

.home-story-audiences .home-story-copy {
  max-width: 480px;
}

.home-story.home-story-audiences h2 {
  font-size: clamp(2.6rem, 4vw, 3.8rem);
}

.home-audience-grid {
  display: grid;
  min-width: 0;
  aspect-ratio: 1 / 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.home-audience-grid li {
  position: relative;
  min-width: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 20px;
  background: color-mix(in srgb, var(--ink) 8%, var(--surface-page));
}

.home-audience-grid li:first-child {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.home-audience-grid figure {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
}

.home-audience-scene {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.home-audience-profile {
  position: absolute;
  z-index: 2;
  right: 10px;
  bottom: 10px;
  padding: 2px;
  border-radius: 8px;
  background: var(--surface-page);
}

.home-audience-profile-compact {
  width: clamp(48px, 22%, 56px);
}

.home-audience-profile-featured {
  right: 18px;
  bottom: 18px;
  width: clamp(80px, 24%, 104px);
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 10px;
}

.home-audience-profile-photo {
  position: relative;
  display: block;
}

.home-audience-profile-photo > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  object-fit: cover;
}

.home-audience-profile-status {
  display: block;
  max-width: 64px;
  margin: 7px 4px 4px 30px;
  color: var(--status-positive);
  font-size: clamp(0.5625rem, 1vw, 0.625rem);
  font-weight: 700;
  line-height: 1.15;
  text-align: left;
  text-wrap: balance;
}

.home-audience-profile-status-dot {
  position: absolute;
  right: auto;
  bottom: 3px;
  left: 3px;
}

.home-audience-profile-featured .home-audience-profile-status-dot {
  --status-mark-size: 24px;
  --status-mark-icon-size: 16px;
  top: calc(100% + 7px);
  right: auto;
  bottom: auto;
  left: 2px;
}

@media (min-width: 960px) {
  .home-audience-profile-compact {
    width: clamp(60px, 27%, 72px);
  }
}

.home-audience-grid figcaption {
  position: absolute;
  top: 10px;
  right: 10px;
  left: 10px;
  width: fit-content;
  max-width: calc(100% - 20px);
  padding: 6px 8px;
  border-radius: 6px;
  background: rgb(0 0 0 / 58%);
  color: #fff;
  font-size: 0.75rem;
  font-weight: var(--font-weight-heading);
  line-height: 1.2;
  white-space: nowrap;
}

.home-story-ties {
  padding-block-end: clamp(56px, 6vw, 80px);
}

.card.home-story-ties-card {
  --card-background: color-mix(in srgb, var(--ink) 11%, var(--surface-page));
  --card-padding: clamp(56px, 7vw, 88px);
  --card-horizontal-padding: clamp(32px, 6vw, 80px);
  border: 0;
  border-radius: 30px;
  overflow: hidden;
}

.home-story-ties .home-story-layout {
  align-items: start;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  gap: clamp(40px, 6vw, 80px);
}

.home-story-ties .home-story-copy {
  max-width: none;
  text-align: left;
}

.home-story-ties .home-network {
  align-self: center;
  justify-self: center;
}

.home-story,
.home-more,
.home-how-it-works,
.home-closing {
  background: var(--surface-sunken);
}

.home-story-layout-reverse {
  grid-template-columns: minmax(420px, 1.12fr) minmax(0, 0.88fr);
}

.home-story-layout-reverse .home-story-copy {
  grid-column: 2;
  grid-row: 1;
}

.home-story-layout-reverse > :last-child {
  grid-column: 1;
  grid-row: 1;
}

.home-story-copy {
  max-width: 500px;
}

.home-story h2,
.home-more h2,
.home-how-it-works h2,
.home-closing h2 {
  font-size: clamp(var(--font-size-display-medium), 4.7vw, 4.35rem);
  letter-spacing: var(--letter-spacing-display-large);
  line-height: var(--line-height-display-large);
}

.home-story-guide h2 {
  font-size: clamp(var(--font-size-display-medium), 4vw, 3.8rem);
}

.home-story-guide .eyebrow {
  color: var(--accent);
}

.home-story-copy > h2 {
  margin-bottom: 20px;
}

.home-story-copy > p:last-of-type {
  margin-bottom: 0;
  color: var(--ink-body);
  font-size: var(--font-size-lead);
  line-height: 1.65;
}

.home-sharing-options {
  --home-sharing-icon-size: 18px;
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-body);
  font-size: var(--font-size-body);
  line-height: 1.5;
}

.home-sharing-options li {
  display: grid;
  grid-template-columns: var(--home-sharing-icon-size) minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}

.home-sharing-options .home-feature-icon {
  width: var(--home-sharing-icon-size);
  height: var(--home-sharing-icon-size);
  margin-top: calc((1.5em - var(--home-sharing-icon-size)) / 2);
  color: inherit;
}

.home-motion-ready .home-reveal {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.home-motion-ready .home-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-home-parallax] {
  --home-parallax-y: 0px;
}

.home-motion-ready .home-reveal[data-home-parallax] {
  transform: translate3d(0, calc(34px + var(--home-parallax-y)), 0);
}

.home-motion-ready .home-reveal[data-home-parallax].is-visible {
  transform: translate3d(0, var(--home-parallax-y), 0);
}

.home-guide-preview-stage {
  --home-guide-device-outline: color-mix(in srgb, var(--ink) 44%, transparent);
  position: relative;
  width: min(100%, 760px);
  margin-inline: auto;
}

.icon-button.home-guide-preview-open {
  --icon-button-background: var(--surface-sunken);
  position: absolute;
  z-index: 4;
  top: -22px;
  right: calc(6% - 22px);
  border: 1px solid var(--home-guide-device-outline);
}

.home-guide-preview-open .feather-zoom-in {
  width: 20px;
  height: 20px;
}

.home-guide-preview {
  --home-guide-large-radius: clamp(12px, 3.65cqi, 24px);
  --home-guide-phone-radius: clamp(16px, 4.55cqi, 30px);
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  width: 100%;
  padding-bottom: clamp(56px, 9vw, 76px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 62%, transparent 82%);
  mask-image: linear-gradient(to bottom, #000 0 62%, transparent 82%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.home-guide-preview-large,
.home-guide-preview-phone {
  overflow: hidden;
}

.home-guide-preview-large {
  position: relative;
  width: 94%;
  border: 8px solid var(--ink);
  border-radius: var(--home-guide-large-radius);
}

.home-guide-preview-large img {
  width: 100%;
  height: auto;
}

.home-guide-preview-phone {
  position: absolute;
  z-index: 2;
  top: 22%;
  right: 3%;
  width: clamp(118px, 29%, 178px);
  border: 4px solid var(--ink);
  border-radius: var(--home-guide-phone-radius);
  outline: 4px solid var(--surface-sunken);
  outline-offset: 0;
}

.home-guide-preview-phone img {
  width: 100%;
  height: auto;
}

.home-network {
  --card-background: var(--surface-page);
  container-type: inline-size;
  position: relative;
  isolation: isolate;
  width: min(100%, 480px);
  aspect-ratio: 720 / 1040;
  margin-inline: auto;
}

.home-town-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.home-town-scene {
  z-index: 1;
  display: block;
}

.home-town-plots {
  opacity: 0;
}

.home-town-plot {
  fill: color-mix(in srgb, var(--status-positive) 20%, var(--surface-page));
}

.home-town-driveways path {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 31%, var(--surface-page));
  stroke-width: 20px;
  stroke-linecap: round;
}

.home-town-parking-bay,
.home-town-road,
.home-town-basketball-court {
  fill: color-mix(in srgb, var(--ink) 31%, var(--surface-page));
}

.home-town-lane-mark {
  fill: none;
  stroke: var(--surface-page);
  stroke-opacity: 0.3;
  stroke-width: 2px;
  stroke-dasharray: 13 17;
  vector-effect: non-scaling-stroke;
}

.home-town-wall {
  fill: var(--surface-page);
}

.home-town-wall-side {
  fill: #dce1e6;
}

.home-town-roof {
  fill: color-mix(in srgb, var(--accent) 57%, #d9a17e);
}

.home-town-roof-side {
  fill: color-mix(in srgb, var(--accent) 37%, var(--ink));
}

.home-town-roof-slate {
  fill: color-mix(in srgb, var(--ink) 64%, var(--surface-page));
}

.home-town-roof-slate-side {
  fill: color-mix(in srgb, var(--ink) 82%, var(--surface-page));
}

.home-town-door {
  fill: color-mix(in srgb, var(--ink) 76%, var(--surface-page));
}

.home-town-window,
.home-town-office-windows,
.home-town-church-window {
  fill: color-mix(in srgb, var(--blue-muted) 72%, var(--surface-page));
}

.home-town-clock-hand {
  fill: none;
  stroke: var(--surface-page);
  stroke-width: 1.5px;
  stroke-linecap: round;
}

.home-town-tree-shadow {
  fill: rgb(37 48 68 / 12%);
}

.home-town-tree-trunk {
  fill: #8b6952;
}

.home-town-tree-leaf-dark {
  fill: #4f7658;
}

.home-town-tree-leaf {
  fill: #6e9364;
}

.home-town-tree-leaf-light {
  fill: #91ac73;
}

.home-town-backboard {
  fill: var(--surface-page);
}

.home-town-hoop-post,
.home-town-hoop-rim {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 76%, var(--surface-page));
  stroke-linecap: round;
}

.home-town-hoop-post {
  stroke-width: 7px;
}

.home-town-hoop-rim {
  stroke-width: 2px;
}

.home-town-steeple {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 72%, var(--surface-page));
  stroke-width: 5px;
  stroke-linecap: round;
}

.home-network-person {
  position: absolute;
  z-index: 7;
  top: 40.5%;
  left: 24.1667%;
  width: 31.25cqw;
  padding: 1.5cqw 1.5cqw 2.2cqw;
  border-radius: 3cqw;
  background: var(--surface-page);
  box-shadow: none;
  text-align: center;
  transform: translate(-50%, -50%);
}

.card.home-network-person {
  border: 0;
}

.home-network-person img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 2.3cqw;
}

.home-network-person span,
.home-network-person strong {
  display: block;
}

.home-network-person span {
  padding-top: 1.4cqw;
  color: var(--status-positive);
  font-size: clamp(0.375rem, 2.4cqw, var(--font-size-meta));
  font-weight: 600;
  line-height: 1.25;
}

.home-network-person strong {
  margin-bottom: 2px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(0.625rem, 3.6cqw, var(--font-size-large));
  font-weight: var(--font-weight-heading);
  letter-spacing: var(--letter-spacing-heading);
  line-height: var(--line-height-heading);
}

.home-town-places,
.home-town-place {
  position: absolute;
}

.home-town-places {
  z-index: 5;
  inset: 0;
  pointer-events: none;
}

.home-town-place {
  width: 42cqw;
  padding: 0.4cqw 1cqw;
  border-radius: 1.2cqw;
  background: transparent;
  color: var(--ink);
  font-size: clamp(0.625rem, 3.6cqw, var(--font-size-body));
  font-weight: var(--font-weight-heading);
  letter-spacing: var(--letter-spacing-heading);
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
  text-wrap: balance;
  transform: translateX(-50%);
  transform-origin: center;
}

.home-town-place-family,
.home-town-place-neighbours,
.home-town-place-friends {
  left: 24.5%;
}

.home-town-place-club,
.home-town-place-classmates,
.home-town-place-teammates,
.home-town-place-coworkers,
.home-town-place-church {
  left: 75.5%;
}

.home-town-place-family,
.home-town-place-club {
  top: 2.1%;
}

.home-town-place-classmates {
  top: 23%;
}

.home-town-place-teammates {
  top: 45.3%;
}

.home-town-place-coworkers {
  top: 64.6%;
}

.home-town-place-neighbours {
  /* Centre the label between the house bases (y=778) and the lower road (y=836). */
  top: 77.6%;
  transform: translate(-50%, -50%);
}

.home-town-place-friends,
.home-town-place-church {
  top: 97.3%;
}

.home-network-car {
  --home-car-body: var(--accent);
  fill: var(--home-car-body);
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}

.home-network-car-side {
  fill: color-mix(in srgb, var(--home-car-body) 82%, var(--ink));
}

.home-network-car-glass {
  fill: color-mix(in srgb, var(--blue-muted) 72%, var(--surface-page));
}

.home-network-car-roof {
  fill: color-mix(in srgb, var(--home-car-body) 94%, var(--surface-page));
}

.home-more {
  --card-background: var(--surface-page);
  padding-block: clamp(72px, 9vw, 112px);
  padding-block-start: clamp(64px, 7vw, 88px);
}

.home-more-heading {
  width: 100%;
  margin-bottom: 48px;
}

.home-more-heading h2 {
  margin-bottom: 20px;
}

.home-more-lead {
  max-width: 720px;
  margin-bottom: 0;
  color: var(--ink-body);
  font-size: var(--font-size-lead);
}

.home-more-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.home-more-card {
  min-width: 0;
}

.home-more-card:nth-child(2) {
  transition-delay: 90ms;
}

.home-more-card:nth-child(3) {
  transition-delay: 180ms;
}

.home-more-marker {
  display: grid;
  width: 44px;
  height: 44px;
  margin-bottom: 24px;
  place-items: center;
  border-radius: 13px;
  background: var(--accent-wash);
  color: var(--accent-hover);
}

.home-more-marker .home-feature-icon {
  width: 28px;
  height: 28px;
}

.home-more-marker .home-feature-icon > * {
  vector-effect: non-scaling-stroke;
}

.home-more-card h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 12px;
  font-size: var(--font-size-heading);
}

.home-more-card p {
  margin-bottom: 0;
  color: var(--ink-body);
}

.home-how-it-works {
  padding-block: clamp(72px, 8vw, 96px) clamp(40px, 5vw, 56px);
}

.home-how-it-works-heading {
  margin-bottom: 48px;
  text-align: center;
}

.home-how-it-works-heading h2 {
  margin-bottom: 0;
}

.home-how-it-works-timeline {
  --home-timeline-gap: clamp(28px, 4vw, 56px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--home-timeline-gap);
}

.home-how-it-works-step {
  position: relative;
  display: grid;
  min-width: 0;
  justify-items: center;
  text-align: center;
}

.home-how-it-works-step:not(:last-child)::after {
  position: absolute;
  z-index: 0;
  top: 23px;
  left: calc(50% + 24px);
  width: calc(100% + var(--home-timeline-gap) - 48px);
  height: 2px;
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  content: "";
}

.home-how-it-works-step:nth-child(2) {
  transition-delay: 90ms;
}

.home-how-it-works-step:nth-child(3) {
  transition-delay: 180ms;
}

.home-how-it-works-marker {
  position: relative;
  z-index: 1;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--accent);
  font-size: var(--font-size-small);
  font-weight: 700;
}

.home-how-it-works-step h3 {
  margin: 24px 0 10px;
  font-size: var(--font-size-heading);
}

.home-how-it-works-step p {
  max-width: 280px;
  margin-bottom: 0;
  color: var(--ink-body);
}

.home-closing {
  padding-block: clamp(40px, 5vw, 56px) clamp(48px, 6vw, 72px);
  text-align: center;
}

.home-closing-inner {
  display: grid;
  width: 100%;
  justify-items: center;
  padding: clamp(56px, 5vw, 72px) clamp(24px, 7vw, 84px);
  color: var(--ink);
}

.home-closing-copy {
  display: grid;
  justify-items: center;
}

.home-closing-copy p {
  max-width: 680px;
  margin-bottom: 0;
  color: var(--ink-body);
  font-size: clamp(var(--font-size-lead), 1.6vw, var(--font-size-large));
  line-height: 1.55;
}

.home-closing-action {
  min-width: 180px;
  margin-top: 28px;
}

.home-closing-note {
  margin: 12px 0 0;
  color: var(--ink-muted);
  font-size: var(--font-size-small);
  font-weight: 600;
  line-height: 1.4;
}

.home-footer {
  padding-block: 76px 44px;
  background: var(--ink);
  color: rgba(255, 255, 255, 0.7);
}

.home-footer-top {
  display: flex;
  min-height: 140px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
}

.home-footer-logo {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-control);
}

.home-footer-logo img {
  filter: brightness(0) invert(1);
  opacity: 0.7;
  display: block;
}

.home-footer-top p {
  max-width: 340px;
  margin-bottom: 0;
  font-size: var(--font-size-lead);
  text-align: right;
}

.home-footer-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.home-footer-navigation a,
.home-footer-navigation button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font: inherit;
  font-size: var(--font-size-small);
  font-weight: 550;
  text-decoration: none;
  cursor: pointer;
}

.home-footer-navigation a:hover,
.home-footer-navigation button:hover {
  color: var(--accent-tint);
}

:is(.settings-main, .find-main, .visitor-reservation-main, .guide-activity-main) {
  position: relative;
}

.settings-main {
  min-height: calc(100dvh - var(--page-header-height));
  padding-block: 56px 80px;
}

.settings-layout {
  width: min(100%, 820px);
  padding-top: 64px;
  margin-inline: auto;
}

.settings-heading {
  margin-bottom: 32px;
}

.settings-heading h1 {
  margin-bottom: 0;
}

.settings-sections {
  display: grid;
  gap: 20px;
}

.settings-card h2 {
  margin-bottom: 24px;
  font-size: var(--font-size-heading);
}

.settings-form {
  min-width: 0;
}

.settings-form > .form-error,
.settings-form > .form-status {
  margin-bottom: 20px;
}

.feedback-message,
.form-status,
.form-error,
.cue {
  padding: 12px 14px;
  border-radius: 8px;
  font-size: var(--font-size-body);
  line-height: 1.45;
}

.feedback-message-success,
.form-status {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent-hover);
}

.feedback-message-error,
.form-error {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
}

.feedback-message-notice,
.cue {
  border: 1px solid color-mix(in srgb, var(--notice-ink) 14%, transparent);
  background: color-mix(in srgb, var(--notice) 62%, var(--surface-raised));
  color: var(--notice-ink);
}

.feedback-message-compact {
  padding: 8px 12px;
  font-size: var(--font-size-small);
  line-height: 1.4;
}

.settings-submit {
  margin-top: 24px;
}

.settings-account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.settings-account-email {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.settings-account-email span {
  color: var(--ink-muted);
  font-size: var(--font-size-small);
}

.settings-account-email strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-weight: 600;
}

.settings-sign-out-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.settings-sign-out-content h2 {
  margin-bottom: 6px;
}

.settings-sign-out-content p {
  margin-bottom: 0;
}

.find-main,
.guides-home-main:has(.guides-empty-state) {
  /* Include collection controls in the shared illustration-to-content waistline. */
  --discovery-scene-height: clamp(180px, 30dvh, 320px);
}

.find-main {
  min-height: calc(100dvh - var(--page-header-height));
  padding-bottom: max(64px, env(safe-area-inset-bottom));
}

.page-back-navigation {
  --page-back-navigation-top: 10px;
  position: absolute;
  z-index: 2;
  inset: var(--page-back-navigation-top) 0 auto;
}

.find-content {
  width: min(100%, 720px);
  margin-inline: auto;
  text-align: center;
}

.find-road-backdrop {
  margin-bottom: 64px;
  background: var(--surface-sunken);
}

.find-road {
  --find-car-width: 220px;
  --find-car-left: calc((100% - var(--find-car-width)) / 2);
  position: relative;
  isolation: isolate;
  width: min(100%, 400px);
  height: var(--discovery-scene-height);
  /* The 400px composition is its resting size; arrival scenery can travel beyond it. */
  overflow: visible;
  margin-inline: auto;
  background: var(--surface-sunken);
}

.find-road-car {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: var(--find-car-left);
  width: var(--find-car-width);
  height: auto;
}

.find-road-body {
  transform-box: view-box;
  transform-origin: 120px 82px;
}

.find-road-wheel {
  transform-box: fill-box;
  transform-origin: center;
}

.find-road-distance,
.find-road-foreground {
  position: absolute;
  bottom: 0;
  pointer-events: none;
}

/* Balance the finite street around the car's centre at every viewport width. */
.find-road-distance {
  left: calc(50% - 200px);
  width: 400px;
  height: 150px;
  background-image: url("/assets/images/find-street-distance.f67de3c6f4b54347e78f.svg");
  background-size: 400px 150px;
  background-repeat: no-repeat;
  background-position: left bottom;
}

.find-road-foreground {
  height: 90px;
  background: var(--surface-page);
  mask-image: url("/assets/images/find-street-near.d3985d0413ddc2ff52a3.svg");
  mask-size: 400px 90px;
  mask-repeat: no-repeat;
  mask-position: left bottom;
}

.find-road-foreground {
  left: calc(50% - 200px);
  width: 400px;
}

.find-content h1 {
  margin-bottom: 12px;
}

.find-introduction {
  margin-bottom: 32px;
  margin-inline: auto;
}

.find-privacy-help {
  margin: 16px 0 0;
  color: var(--ink-body);
  font-size: var(--font-size-body);
}

.find-form-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 12px;
}

.search-field {
  position: relative;
  min-width: 0;
}

.search-field-icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  inset-inline-start: 16px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  opacity: 0.38;
  pointer-events: none;
}

.search-field:focus-within .search-field-icon {
  opacity: 1;
}

.field-control.search-field-input {
  min-height: 52px;
  padding-inline: 48px 18px;
}

.search-field:has(.search-field-clear) .search-field-input {
  padding-inline-end: 56px;
}

.search-field-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.icon-button.search-field-clear {
  position: absolute;
  top: 50%;
  inset-inline-end: 4px;
  transform: translateY(-50%);
}

.find-search-submit {
  min-height: 52px;
}

.find-results {
  text-align: start;
  margin-top: 40px;
}

.find-no-results {
  margin: 0;
  color: var(--ink-body);
}

.find-results-list {
  display: grid;
  gap: 12px;
}

.find-result {
  display: flex;
  min-height: 88px;
  align-items: center;
  gap: 16px;
  color: var(--ink);
  text-decoration: none;
}

.find-result-link:hover {
  color: var(--ink);
}

.avatar-find {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 12px;
  font-size: var(--font-size-body-large);
}

.find-result-name {
  display: block;
  font-size: var(--font-size-body-large);
  font-weight: 600;
}

.find-result-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.find-result-location {
  display: block;
  margin-top: 2px;
  color: var(--ink-body);
}

.guide-search-result-preview {
  display: grid;
  min-width: 0;
  gap: 8px;
  margin: 0;
}

.guide-search-result-preview .card {
  --card-background: var(--surface-raised);
}

.guides-home-main {
  --guides-controls-height: 96px;
  display: flex;
  min-height: calc(100dvh - var(--page-header-height));
  flex-direction: column;
}

.guides-home-controls {
  display: flex;
  min-height: var(--guides-controls-height);
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: center;
  padding: 32px var(--page-min-inline-padding) 12px;
}

.guides-following-visits-region {
  padding-block: var(--card-gap);
}

.guides-following-visits-region-in-collection {
  grid-column: 1 / -1;
  padding: 0;
}

.guides-home-main:has(.guides-empty-state):has(.guides-following-visits-region)
  .guides-home-controls {
  min-height: 0;
  padding-bottom: 0;
}

.guides-home-main:has(.guides-empty-state) .guides-following-visits-region {
  background: var(--surface-sunken);
}

.segmented-control {
  --segmented-control-background: var(--surface-sunken);
  --segmented-control-inset: calc(var(--radius-card) - var(--radius-control));
  display: inline-flex;
  gap: var(--segmented-control-inset);
  padding: var(--segmented-control-inset);
  border-radius: var(--radius-card);
  background: var(--segmented-control-background);
}

.segmented-control-ghost {
  --segmented-control-background: var(--surface-sunken);
}

.segmented-control-bordered,
.segmented-control-bordered.form-fieldset {
  padding: var(--segmented-control-inset);
}

.segmented-control-option {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--font-size-body);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.segmented-control-option:hover {
  color: var(--ink);
}

.segmented-control-option:not(.is-selected):not(:has(.segmented-radio-input:checked, .segmented-radio-input:disabled)):hover {
  background: color-mix(in srgb, var(--surface-raised) 50%, transparent);
}

.segmented-radio-set {
  min-width: 0;
}

.segmented-radio-option {
  min-width: 0;
  flex: 1 1 0;
  justify-content: center;
  padding-block: 8px;
  line-height: 1.25;
  text-align: center;
}

.segmented-control-compact .segmented-control-option {
  min-height: 36px;
  padding: 4px 8px;
}

.segmented-radio-option:has(.segmented-radio-input:checked) {
  background: var(--surface-raised);
  box-shadow: var(--shadow-card);
}

.segmented-radio-option:has(.segmented-radio-input:focus-visible) {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.segmented-radio-option:has(.segmented-radio-input:disabled) {
  color: var(--ink-disabled);
  cursor: not-allowed;
}

.raised-selection {
  background: var(--surface-raised);
  box-shadow: var(--shadow-card);
}

.page-header .raised-selection {
  background: var(--surface-page);
}

.guides-empty-state {
  display: grid;
  flex: 1 1 auto;
  grid-template-rows: calc(var(--discovery-scene-height) - var(--guides-controls-height)) minmax(min-content, 1fr);
}

.guides-home-main:has(.guides-empty-state) .guides-home-controls,
.guides-empty-illustration {
  background: var(--surface-sunken);
}

.guides-empty-illustration {
  display: flex;
  min-height: 0;
  align-items: flex-end;
  justify-content: center;
  padding-inline: var(--page-min-inline-padding);
}

.guides-empty-illustration img {
  width: min(100%, 300px);
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.guides-empty-illustration-following img {
  width: min(100%, 310px);
}

.guides-empty-illustration-managing img {
  margin-bottom: -5px;
}

.guides-empty-copy {
  display: flex;
  justify-content: center;
  padding: 36px var(--page-min-inline-padding) 56px;
  background: var(--surface-page);
  text-align: center;
}

.guides-empty-copy-inner {
  max-width: 420px;
}

.guides-empty-copy h4 {
  margin-bottom: 20px;
  font-size: var(--font-size-heading);
  line-height: 1.2;
}

.guides-empty-copy p {
  max-width: 330px;
  margin: 0 auto 24px;
  color: var(--ink-body);
  font-size: var(--font-size-body);
  line-height: 1.45;
}

.guides-collection {
  flex: 1 1 auto;
  padding-block: 0 72px;
}

.guides-collection-header {
  min-height: 44px;
  margin-top: 24px;
}

.guides-collection-header h1 {
  min-width: 0;
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--font-size-button);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
}

.guides-collection-header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.guides-collection-find-guide {
  white-space: nowrap;
}

.guides-collection-find-guide .button-icon,
.guides-collection-search-toggle .search-icon {
  width: 16px;
  height: 16px;
}

.guides-collection-search-toggle[aria-expanded="true"] {
  background: var(--surface-ghost);
}

.guides-collection-search-panel {
  margin: 0;
}

.guides-collection-search-surface {
  padding-top: 8px;
}

.icon-button.search-clear {
  background: transparent;
  color: var(--ink-muted);
}

.icon-button.search-clear:hover {
  background: transparent;
  color: var(--ink);
}

.search-clear::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--surface-ghost);
  content: "";
}

.search-clear:hover::before {
  background: var(--surface-ghost-hover);
}

.search-clear-icon {
  position: relative;
  width: 8.544px;
  height: 8.544px;
}

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

.guides-collection-search-empty {
  margin: 24px 0 0;
  color: var(--ink-muted);
}

.guides-collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--card-gap);
  margin-top: 24px;
}

.guide-collection-action {
  --card-background: transparent;
  display: flex;
  min-height: 128px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--ink);
  cursor: pointer;
  font-size: var(--font-size-body);
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
}

.guide-collection-action:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.guide-collection-action img {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.guide-collection-card {
  --guide-collection-avatar-size: 88px;
  overflow: hidden;
}

.guide-collection-status-bar {
  position: absolute;
  top: 50%;
  left: 0;
  width: 3px;
  height: var(--guide-collection-avatar-size);
  transform: translateY(-50%);
  border-radius: 0 6px 6px 0;
  background: var(--status-positive);
  pointer-events: none;
}

.guide-collection-card-body {
  position: relative;
  display: flex;
  height: 100%;
  min-height: 128px;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.guide-collection-card-body.is-link:hover {
  color: inherit;
}

.guide-collection-card-body.is-link:hover .guide-collection-disclosure,
.guide-collection-card-body.is-link:focus-visible .guide-collection-disclosure {
  opacity: 1;
}

.guide-collection-card:has(.guide-collection-card-body.is-link:focus-visible) {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

.guide-collection-card-body.is-link:focus-visible {
  outline: none;
}

.card-padding.guide-collection-identity {
  position: relative;
  display: flex;
  min-width: 0;
  flex: 0 0 auto;
  align-items: center;
  gap: 16px;
  padding-right: 56px;
}

.avatar-collection {
  width: var(--guide-collection-avatar-size, 88px);
  height: var(--guide-collection-avatar-size, 88px);
  margin: 0;
  flex: 0 0 auto;
  border-radius: 12px;
  font-size: var(--font-size-large);
}

.guide-collection-summary {
  min-width: 0;
  overflow: hidden;
}

.guide-collection-summary h2 {
  margin-bottom: 2px;
  font-family: var(--font-text);
  font-size: var(--font-size-lead);
  line-height: 1.25;
}

.guide-collection-location {
  margin-bottom: 2px;
  color: var(--ink-muted);
  font-size: var(--font-size-small);
  line-height: 1.3;
}

.guide-collection-visitor-status {
  margin-bottom: 0;
  color: var(--status-positive);
  font-size: var(--font-size-small);
  font-weight: 500;
  line-height: 1.3;
}

.guide-collection-visitor-status.is-not-welcoming {
  color: var(--ink);
  font-weight: 500;
  opacity: 1;
}

.guide-collection-updated-badge {
  margin-top: 4px;
}

.guide-collection-disclosure {
  position: absolute;
  top: 50%;
  right: 15px;
  width: 8px;
  height: 14px;
  transform: translateY(-50%);
  opacity: 0.24;
  transition: opacity 160ms ease;
}

.linked-notice-disclosure {
  display: block;
  width: 8px;
  height: 14px;
  flex: 0 0 8px;
  background: currentColor;
  -webkit-mask: url("/assets/icons/chevron-right.375d5aa20d013575486b.svg") center / contain no-repeat;
  mask: url("/assets/icons/chevron-right.375d5aa20d013575486b.svg") center / contain no-repeat;
  opacity: 0.24;
  transition: opacity 160ms ease;
}

.guide-management-main {
  --guide-toolbar-offset: 0px;
  min-height: calc(100dvh - var(--page-header-height));
  padding-block: 48px 80px;
}

:is(.guide-management-main, .guide-visitor-signed-in):has([data-guide-toolbar]) {
  padding-top: var(--guide-toolbar-offset);
}

@media (min-width: 968px) {
  .page-back-navigation {
    --page-back-navigation-top: 20px;
  }

  .guide-management-main,
  .guide-visitor-signed-in {
    --guide-toolbar-offset: 10px;
  }
}

.guide-management-layout,
.guide-layout.guide-layout-signed-in {
  display: grid;
  width: min(100%, 868px);
  grid-template-columns: 200px minmax(0, 620px);
  align-items: start;
  gap: 48px;
  margin-inline: auto;
}

.guide-management-tabs {
  position: sticky;
  top: var(--page-header-height);
  z-index: 5;
  display: flex;
  width: 100%;
  justify-content: flex-start;
  margin: 0 0 36px;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--surface-page);
  box-shadow: 0 0 0 1px var(--surface-page);
}

.guide-management-tabs.is-stuck {
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}

.guide-management-tabs .segmented-control {
  width: 100%;
  border-radius: var(--radius-card);
}

.guide-management-tabs.is-stuck .segmented-control {
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}

.guide-management-tabs .segmented-control-option {
  flex: 1 1 0;
  justify-content: center;
  gap: 8px;
  padding-inline: 8px;
}

.guide-management-tabs .segmented-control-option .nav-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.guide-identity-header {
  --guide-identity-avatar-size: 88px;
  display: grid;
  grid-template-columns: var(--guide-identity-avatar-size) minmax(0, 1fr);
  align-items: center;
  gap: 20px;
}
.guide-identity-header .avatar {
  width: var(--guide-identity-avatar-size);
  height: var(--guide-identity-avatar-size);
  font-size: var(--font-size-body-large);
}
.guide-identity-body {
  min-width: 0;
}
.guide-identity-name {
  color: var(--ink);
  margin: 0;
  font-size: var(--font-size-body-large);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.guide-identity-header .identity-location {
  margin: 0 0 8px;
}
.guide-management-identity-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.guide-management-identity-actions > .button {
  width: auto;
}
/* Keep anchored requirements visible below the toolbar after it covers the page header. */
.guide-management-main .guide-management-section-row {
  scroll-margin-top: calc(var(--page-header-height) + 24px);
}
@media (max-width: 479px) {
  .guide-management-tabs .segmented-control-option .nav-icon {
    display: none;
  }

  .guide-identity-header {
    gap: 16px;
  }
}

@media (max-width: 639px) {
  .guide-management-tabs {
    width: calc(100% + 2 * var(--page-min-inline-padding));
    margin-inline: calc(-1 * var(--page-min-inline-padding));
    border-radius: 0;
  }

  .guide-management-tabs.is-stuck {
    border-radius: 0;
  }

  .guide-management-tabs .segmented-control {
    padding-inline: var(--page-min-inline-padding);
    border-radius: 0;
  }

  .guide-management-tabs.is-stuck .segmented-control {
    border-radius: 0;
  }
}

/* The same identity becomes a rail only when the guide has two columns. */
@media (min-width: 968px) {
  .guide-identity-header {
    --guide-identity-avatar-size: 200px;
    position: sticky;
    top: var(--page-sticky-top);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 16px;
  }

  .guide-management-main .guide-identity-header {
    top: calc(var(--page-header-height) + 24px);
  }

  .guide-identity-header .avatar {
    font-size: var(--font-size-avatar);
  }

  .guide-identity-name {
    margin-bottom: 16px;
  }

  .guide-management-identity-actions {
    display: grid;
  }

  .guide-management-identity-actions > .button {
    width: 100%;
  }
}

.guide-context-bar {
  min-height: 44px;
}

.guide-toolbar {
  width: 100%;
  margin: 0 auto 32px;
  flex-wrap: wrap;
}

.guide-toolbar-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.guide-toolbar-actions > * {
  flex: 0 0 auto;
}

.guide-toolbar-sticky {
  position: sticky;
  top: 0;
  z-index: 6;
  height: var(--page-header-height);
  flex-wrap: nowrap;
}

.guide-toolbar-sticky::before {
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  background: var(--surface-page);
  pointer-events: none;
  content: "";
}

.guide-toolbar-sticky.is-stuck::before {
  box-shadow: 0 1px 0 var(--border-card-section);
}

.guide-toolbar-title {
  flex: 1;
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--font-size-body);
}

@media (max-width: 967px) {
  .guide-management-identity-actions {
    padding-top: 8px;
  }

  .guide-management-identity-actions .button {
    min-height: 36px;
    gap: 8px;
    padding-inline: 14px;
    font-size: var(--font-size-meta);
  }
}

.guide-layout-signed-in .guide-heading h1,
.guide-management-heading {
  margin-bottom: 12px;
}

.guide-layout-signed-in .guide-updated {
  margin-top: 0;
}

.guide-management-unpublished-status,
.guide-management-published-update {
  color: var(--ink-body);
  font-size: var(--font-size-body);
  line-height: 1.3;
}

.guide-management-unpublished-status {
  margin: 0 0 32px;
  line-height: 1.5;
}

.guide-management-published-update {
  margin: 0 0 32px;
}

.guide-management-photo-form {
  display: grid;
  gap: 8px;
}

.guide-management-photo-form .button:has(+ input:focus-visible) {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

.guide-management-photo-form.htmx-request .button,
.guide-management-photo-form[aria-busy="true"] .button {
  border-color: var(--border-hairline);
  cursor: wait;
  background: transparent;
  color: var(--ink-disabled);
}

.guide-management-photo-progress {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.guide-management-photo-progress-ring {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke-width: 2.5;
  transform: rotate(-90deg);
}

.guide-management-photo-progress-track {
  stroke: currentcolor;
}

.guide-management-photo-progress-value {
  stroke: var(--accent);
  stroke-dasharray: 47.1239;
  stroke-dashoffset: 47.1239;
  stroke-linecap: round;
  transition: stroke-dashoffset 160ms ease-out;
}

.guide-management-photo-error {
  margin: 0;
  font-size: var(--font-size-small);
  line-height: 1.45;
}

.guide-management-content {
  --guide-management-card-gap: var(--two-column-gap, 24px);
  min-width: 0;
}

.guide-management-delete-notice {
  margin-bottom: var(--guide-management-card-gap);
}

.guide-management-welcome {
  margin-bottom: 32px;
}

.guide-management-welcome-content {
  display: grid;
  justify-items: start;
  gap: 12px;
}

.guide-management-welcome-content > :is(h2, p) {
  margin: 0;
}

.guide-management-welcome-content > p {
  color: var(--ink-body);
}

.guide-management-welcome-content > .button {
  margin-top: 4px;
}

.guide-management-overview {
  display: grid;
  gap: var(--guide-management-card-gap);
  margin-bottom: var(--guide-management-card-gap);
}

.guide-management-activity {
  display: grid;
  gap: var(--guide-management-card-gap);
}

.guide-management-overview-columns {
  align-items: stretch;
  --two-column-stacked-gap: var(--guide-management-card-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  row-gap: var(--two-column-stacked-gap);
}

.guide-management-overview-columns > section {
  display: grid;
  min-width: 0;
  grid-template-rows: 1fr;
}

.guide-management-upcoming-engagements {
  margin-bottom: var(--guide-management-card-gap);
}

.guide-management-upcoming-engagements-card {
  container-type: inline-size;
}

.guide-management-upcoming-engagements-content {
  display: grid;
  gap: 20px;
}

.guide-management-upcoming-engagements-main,
.guide-management-upcoming-engagements-copy {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 16px;
}

.guide-management-upcoming-engagements-copy > .meta-copy {
  margin: 0;
}

.guide-management-upcoming-engagements-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.upcoming-engagement-calendar {
  width: min(100%, 340px);
  margin-inline: auto;
}

.upcoming-engagement-calendar-heading {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  min-height: 44px;
  margin-bottom: 12px;
  gap: 8px;
}

.upcoming-engagement-calendar-heading > p {
  margin: 0;
  color: var(--ink);
  font-size: var(--font-size-body);
  font-weight: 700;
  text-align: center;
}

.upcoming-engagement-calendar .calendar-weekdays,
.upcoming-engagement-calendar .calendar-days {
  gap: 4px;
}

.upcoming-engagement-calendar-day {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border-radius: var(--radius-control);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--font-size-body);
  line-height: 1;
}

.button-light.upcoming-engagement-calendar-day {
  cursor: pointer;
}

.button-light.upcoming-engagement-calendar-day.has-engagement {
  color: var(--accent);
}

.upcoming-engagement-calendar-day.is-today {
  font-weight: 800;
}

.button-light.upcoming-engagement-calendar-day:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.upcoming-engagement-calendar-day-past,
.upcoming-engagement-calendar-day-outside {
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  font-weight: 500;
}

.upcoming-engagement-calendar-day-past {
  cursor: default;
}

@container (min-width: 600px) {
  .guide-management-upcoming-engagements-main {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 24px;
  }

  .upcoming-engagement-calendar {
    width: 100%;
    grid-column: 1;
    grid-row: 1;
    margin-inline: 0;
  }

  .upcoming-engagement-calendar .calendar-days {
    gap: 2px;
  }

  .upcoming-engagement-calendar-day {
    min-height: 0;
    aspect-ratio: 1;
  }

  .guide-management-upcoming-engagements-copy {
    grid-column: 2;
    grid-row: 1;
    padding-inline-start: 24px;
    border-inline-start: 1px solid var(--border-card-section);
  }

  .guide-management-upcoming-engagements-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .guide-management-upcoming-engagements-actions > :is(.guide-management-add-engagement, .guide-management-view-engagements) {
    width: 100%;
  }
}

.engagement-calendar-navigation-button.has-later-engagements {
  position: relative;
}

.engagement-calendar-navigation-button.has-later-engagements::after {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  content: "";
}

.guide-management-before-visit {
  margin-bottom: var(--guide-management-card-gap);
}

.guide-management-before-visit-content {
  display: grid;
  justify-items: start;
  gap: 16px;
}

.guide-management-before-visit-header,
.guide-management-visibility-header {
  width: 100%;
  --cluster-align: start;
  --cluster-gap: 16px;
  flex-wrap: wrap;
}

.guide-management-before-visit-actions {
  --cluster-gap: 8px;
  margin-inline-start: auto;
}

.guide-management-before-visit-content > :is(.meta-copy, .guide-prose) {
  margin: 0;
}

.card.guide-management-overview-card {
  display: grid;
  overflow: hidden;
}

.guide-management-overview-card-content {
  display: flex;
  min-height: 164px;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

.guide-management-status-card .guide-management-overview-card-content {
  gap: 12px;
}

.guide-management-upcoming-card-content {
  min-height: 0;
  gap: 16px;
}

.guide-management-upcoming-card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
}

.guide-management-overview-card-content .guide-management-activity-summary {
  margin: 0;
}

.button.guide-management-overview-inline-action,
.button.count-navigation-button {
  flex: 0 0 auto;
  gap: 4px;
  padding-inline-end: 14px;
}

.guide-management-overview-inline-action .right-chevron,
.count-navigation-button .right-chevron {
  stroke-width: 2.2;
}

.count-navigation-button {
  justify-self: start;
  max-width: 100%;
}

.guide-management-status-summary {
  display: flex;
  width: 100%;
  min-height: 70px;
  padding: 16px;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
}

.guide-management-status-copy {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.guide-management-status-copy strong {
  line-height: 1.45;
}

.guide-management-recent-visits-card
  .guide-management-activity-subtitle {
  display: grid;
  width: 100%;
  padding-inline: 24px;
  flex: 1 1 auto;
  align-content: center;
  text-align: center;
}

.guide-management-activity-copy {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.guide-management-request-card,
.guide-management-activity-card {
  color: var(--ink);
}

.guide-management-activity-copy .eyebrow {
  margin: 0;
  color: color-mix(in srgb, var(--notice-ink) 72%, var(--ink));
  letter-spacing: 0.04em;
}

.guide-management-activity-copy strong {
  font-size: var(--font-size-lead);
  line-height: 1.3;
}

.guide-management-activity-notice-action {
  min-width: 116px;
  flex: 0 0 auto;
  pointer-events: none;
}

.guide-management-activity-subtitle {
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.45;
}

.guide-management-activity-summary {
  min-width: 0;
  line-height: 1.45;
}

.guide-management-activity-action {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}

.guide-activity-main {
  min-height: calc(100dvh - var(--page-header-height));
  padding-block: 48px 80px;
}

.guide-activity-layout {
  width: min(100%, 720px);
  margin-inline: auto;
}

.guide-activity-main:has(> .page-back-navigation) .guide-activity-layout {
  padding-top: 56px;
}

.guide-activity-heading {
  margin-bottom: 32px;
}

.guide-activity-heading h1 {
  margin: 12px 0 0;
  font-size: var(--font-size-display-small);
  line-height: var(--line-height-display);
}

.guide-activity-heading.guide-activity-page-heading h1 {
  margin-top: 0;
}

.guide-activity-section + .guide-activity-section {
  margin-top: 40px;
}

.guide-activity-list {
  display: grid;
  gap: 16px;
}

.guide-activity-card {
  overflow: hidden;
}

.guide-activity-card-heading {
  --cluster-align: baseline;
  --cluster-gap: 20px;
}

.guide-activity-card-heading > p {
  flex: 0 0 auto;
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--font-size-small);
}

.guide-activity-definitions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 28px;
  margin-top: 20px;
}

.guide-activity-definitions .definition {
  min-width: 0;
  margin: 0;
}

.guide-activity-definitions dd {
  overflow-wrap: anywhere;
}

.guide-request-actions {
  --cluster-gap: 12px;
  justify-content: flex-end;
}

.guide-activity-empty p {
  margin: 0;
}

.upcoming-visit-actions > form {
  grid-column: 2;
  grid-row: 1;
}

.upcoming-visit-actions > .form-help {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

.upcoming-visit-card .guide-activity-definitions + .form-meta {
  margin-top: 20px;
}

.engagement-card-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}

.engagement-card-actions {
  display: flex;
  gap: 8px;
}

.engagement-card-copy {
  min-width: 0;
}

.engagement-card-copy h2 {
  overflow-wrap: anywhere;
}

.engagement-card-copy p {
  margin: 4px 0 0;
  color: var(--ink-muted);
  font-size: var(--font-size-small);
  line-height: 1.4;
}

.engagement-card-content form {
  display: flex;
}

.engagement-card-remove .x-icon {
  width: 10px;
  height: 10px;
}

.guide-activity-error {
  margin: -12px 0 24px;
}

.visitor-book-list {
  gap: 20px;
}

.visitor-book-entry-heading {
  align-items: flex-start;
}

.visitor-book-entry-visitor {
  min-width: 0;
}

.visitor-book-entry-relationship {
  margin: 2px 0 0;
  color: var(--ink-muted);
  font-size: var(--font-size-small);
}

.visitor-book-entry-copy {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-card-section);
}

.visitor-book-entry-copy h3 {
  margin-bottom: 8px;
  font-size: var(--font-size-body);
}

.visitor-book-entry-copy p {
  margin: 0;
}

.visitor-book-suggestion {
  padding: 16px;
}

.guide-name-body {
  display: grid;
  align-content: start;
  gap: 20px;
}

[data-guide-setup-progress] {
  scroll-margin-block-start: calc(var(--page-header-height) + 16px);
  transform-origin: center;
}

[data-guide-setup-progress].is-shaking {
  animation: guide-setup-progress-shake 360ms ease-in-out;
}

@keyframes guide-setup-progress-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-6px);
  }
  40% {
    transform: translateX(6px);
  }
  60% {
    transform: translateX(-4px);
  }
  80% {
    transform: translateX(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-guide-setup-progress].is-shaking {
    animation: none;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }
}

.guide-publish-form {
  margin: 0;
}

.guide-publish-form .button {
  width: 100%;
}

.guide-management-preview-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

@media (max-width: 419px) {
  .guide-toolbar-actions-activation .button.guide-management-preview-button {
    width: 44px;
    padding-inline: 0;
  }

  .guide-toolbar-actions-activation .guide-management-preview-button > span {
    display: none;
  }

  .guide-publish-form .button {
    padding-inline: 16px;
  }
}

.guide-management-fields {
  --guide-management-icon-label-gap: 20px;
  --guide-management-content-indent: calc(
    44px + var(--guide-management-icon-label-gap)
  );
  display: grid;
  gap: 32px;
}

.guide-management-guide-sections {
  min-width: 0;
}

.guide-management-sections-heading {
  --cluster-align: baseline;
  --cluster-gap: 8px 16px;
  margin-bottom: 12px;
}

.guide-management-sections-progress {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--accent);
  font-size: var(--font-size-body);
  font-weight: 700;
  line-height: 1.35;
}

.guide-management-sections-progress.is-complete {
  color: var(--status-positive);
}

.guide-management-sections-help {
  margin: 0;
}

#guide-management-required-sections-heading,
#guide-management-optional-sections-heading {
  font-size: var(--font-size-heading);
}

.card.guide-section-list,
.card.guide-management-section-list {
  --guide-section-icon-label-gap: 20px;
  --guide-section-content-indent: calc(
    44px + var(--guide-section-icon-label-gap)
  );
  overflow: hidden;
}

.guide-section-row,
.guide-management-section-row {
  position: relative;
  width: 100%;
  min-width: 0;
  scroll-margin-top: calc(var(--page-header-height) + 16px);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
}

.guide-section-row + .guide-section-row,
.guide-management-section-row + .guide-management-section-row {
  border-top: 1px solid var(--border-card-section);
}

.guide-management-section-row.is-added {
  min-height: 112px;
}

.guide-management-section-row[data-guide-section-edit-row]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: pointer;
}

@media (max-width: 639px), (hover: none), (pointer: coarse) {
  .guide-management-section-row[data-guide-section-edit-row]::after {
    display: none;
  }
}

@media (min-width: 640px) and (hover: hover) and (pointer: fine) {
  .guide-management-section-row[data-guide-section-edit-row]:hover:not(
    :has(
      .guide-management-section-actions form:hover,
      .guide-management-section-body a:hover,
      .guide-management-section-body button:hover
    )
  )
    .guide-management-section-edit:not(:disabled):not(:hover) {
    border-color: color-mix(in srgb, var(--ink) 30%, transparent);
  }
}

/* Paint the completion stripe without changing the row's content inset. */
.guide-management-section-row.is-added::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--section-accent);
  pointer-events: none;
}

.guide-section-row > .guide-section-summary > .guide-section-icon,
.guide-management-section-icon,
.guide-management-section-row[data-guide-section-add-row] > .guide-section-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}

.guide-management-section-row[data-guide-section-add-row] > .guide-section-icon {
  opacity: 0.3;
}

.guide-section-summary,
.guide-management-section-summary {
  display: flex;
  min-height: 74px;
  min-width: 0;
  align-items: center;
  gap: var(--guide-section-icon-label-gap);
  padding-block: 15px;
  cursor: pointer;
  list-style: none;
}

.guide-management-section-summary {
  min-height: 0;
  padding-block: 16px 2px;
  cursor: default;
}

.guide-management-section-summary.card-section {
  padding-right: 220px;
}

.guide-management-section-icon {
  position: relative;
}

.guide-management-section-icon > .guide-section-icon {
  width: 100%;
  height: 100%;
}

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

.guide-section-summary h3,
.guide-section-summary h4,
.guide-management-section-summary h3,
.guide-management-section-add-title {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--font-size-body);
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
}

.guide-section-summary:focus-visible,
.guide-management-section-row[data-guide-section-add-row]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: -4px;
}

.guide-section-panel,
.guide-management-section-panel {
  min-width: 0;
}

.guide-section-panel-inner,
.guide-management-section-panel-inner {
  min-width: 0;
  padding: 0 28px 33px
    calc(
      var(--card-horizontal-padding) + var(--guide-section-content-indent)
    );
}

.guide-management-section-panel-inner {
  padding: 12px 28px 33px
    calc(
      var(--card-horizontal-padding) + var(--guide-management-content-indent)
    );
}

.guide-management-section-body {
  min-width: 0;
}

.guide-management-section-body .guide-management-section-content {
  margin: 0;
  color: var(--ink);
  line-height: 1.45;
}

.guide-management-section-actions {
  position: absolute;
  z-index: 2;
  top: 16px;
  right: var(--card-horizontal-padding, 24px);
  display: flex;
  align-items: center;
  gap: 12px;
}

.guide-management-section-actions form {
  display: flex;
}

.guide-management-section-body a {
  position: relative;
  z-index: 2;
}

.guide-management-section-complete {
  --status-mark-background: var(--section-accent);
  position: absolute;
  top: -8px;
  right: -8px;
  border: 2px solid var(--surface-page);
}

.guide-section-trailing {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.guide-section-chevron {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
}

.guide-section-chevron .down-chevron {
  width: 16px;
  transition: transform 160ms ease;
}

.guide-section-row[data-guide-section-expanded="true"]
  .guide-section-chevron
  .down-chevron,
.guide-section-row[open]:not([data-guide-section-expanded])
  .guide-section-chevron
  .down-chevron {
  transform: rotate(180deg);
}

.guide-management-section-row[data-guide-section-add-row] {
  display: grid;
  min-height: 76px;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: var(--guide-management-icon-label-gap);
  padding-block: 16px;
  cursor: pointer;
}

.guide-management-section-add-heading {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.guide-management-section-required {
  color: var(--accent);
}

.guide-management-section-plus {
  justify-self: end;
}

.guide-management-section-plus svg {
  width: 20px;
  height: 20px;
}

[data-guide-onboarding] .guide-management-section-plus {
  --icon-button-background: var(--accent);
  --icon-button-hover-background: var(--accent-hover);
  color: var(--surface-page);
}

.guide-management-section-row[data-guide-section-add-row]:hover
  .icon-button-invisible:not(:disabled) {
  background: var(--icon-button-hover-background, var(--surface-ghost-hover));
}

.guide-management-status-summary .status-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  background: currentcolor;
}

.visiting-status-body {
  padding-top: 28px;
}

.visiting-status-intro {
  max-width: 46ch;
  margin-bottom: 28px;
  color: var(--ink-body);
  line-height: 1.55;
}

.visiting-status-body .form-error {
  margin-bottom: 24px;
}

.form-fieldset.visiting-status-options {
  display: grid;
  gap: 22px;
}

.visiting-status-choice {
  min-height: 44px;
  align-items: center;
  gap: 14px;
  font-weight: 700;
}

.modal-body.visit-duration-body {
  padding: 0;
}

.visit-duration-options-body {
  padding: 0 var(--modal-inline-padding) var(--modal-block-padding);
}

.visit-duration-options {
  min-width: 0;
}

.visit-duration-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.visit-duration-choice-unlimited {
  grid-column: 1 / -1;
}

.visit-duration-choice .choice-target {
  display: grid;
  min-height: 52px;
  place-items: center;
  text-align: center;
}

.visibility-access-body {
  display: grid;
  align-content: start;
  gap: 16px;
  padding-top: 28px;
}

.visibility-access-body .form-error {
  margin: 0;
}

.visibility-access-setting {
  min-width: 0;
}

.visibility-access-setting .switch-setting {
  padding: 0;
  border: 0;
}

.switch-setting {
  display: grid;
  gap: 10px;
  padding: 0 0 28px;
  border-bottom: 1px solid var(--border-hairline);
}

.switch-setting + .switch-setting {
  padding-top: 28px;
}

.switch-setting-heading {
  display: grid;
  min-width: 0;
  min-height: 44px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
}

.switch-setting-title {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 700;
  line-height: 1.3;
}

.switch-setting-description {
  max-width: 46ch;
  margin: 0;
  color: var(--ink-body);
  line-height: 1.5;
}

.guide-management-arrangement-summary {
  --stack-gap: 8px;
  overflow-wrap: anywhere;
}

.card-action-row {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--card-action-row-gap, 24px);
}

.card-action-row-overlay {
  grid-template-columns: minmax(0, 1fr);
}

.card-action-row-overlay > * {
  grid-area: 1 / 1;
}

.card-action-row-overlay > :last-child {
  justify-self: end;
}

.card-action-footer {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border-card-section);
}

.arrangement-icon {
  display: grid;
  border-radius: 10px;
  background: var(--surface-ghost);
  color: var(--ink);
  place-items: center;
}

.guide-section-icon svg,
.arrangement-icon svg {
  width: 22px;
  height: 22px;
}

.guide-section-icon-parking svg {
  width: 23px;
  height: 23px;
}

.count-pill {
  display: inline-flex;
  min-width: 22px;
  min-height: 22px;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--surface-ghost);
  color: var(--ink-body);
  font-size: var(--font-size-meta);
  font-weight: 700;
  line-height: 1;
}

.guide-management-add-engagement-label-short {
  display: none;
}

.modal.engagement-modal {
  /* Keeps both picker columns compact while preserving comfortable cell widths. */
  --modal-max-width: 480px;
}

.engagement-selection-body {
  display: grid;
  align-content: start;
  gap: 16px;
}

.engagement-selection-date {
  margin: 0;
  color: var(--ink-muted);
  font-weight: 600;
}

.engagement-selection-list {
  display: grid;
  gap: 12px;
}

.engagement-selection-option {
  display: flex;
  width: 100%;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--border-light-control);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.engagement-selection-option:hover {
  border-color: var(--ink);
}

.engagement-selection-option:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.engagement-selection-option-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
  overflow-wrap: anywhere;
}

.engagement-selection-option-copy > span {
  color: var(--ink-muted);
  font-size: var(--font-size-small);
}

.engagement-selection-add-content {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.engagement-selection-option .right-chevron {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.engagement-selection-back {
  flex: 0 0 auto;
  padding: 0 var(--modal-inline-padding);
}

.engagement-body {
  display: grid;
  align-content: start;
  gap: 24px;
  padding-top: 28px;
}

.engagement-body .form-error,
.engagement-body .form-status {
  margin: 0;
}

.engagement-layout {
  display: grid;
  align-items: start;
  gap: 32px;
}

.engagement-title-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 8px;
}

.engagement-title-heading .form-label,
.engagement-body .engagement-schedule-label {
  color: var(--ink);
  font-size: var(--font-size-body-large);
  font-weight: 700;
}

.engagement-title-heading .form-label {
  margin: 0;
}

.engagement-title-visibility {
  color: var(--ink-muted);
  font-size: var(--font-size-body);
  text-align: right;
}

.engagement-schedule-fields {
  display: grid;
  gap: 24px;
}

.engagement-schedule-field {
  min-width: 0;
  container: engagement-schedule / inline-size;
}

.engagement-schedule-label {
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 12px;
  line-height: 1.25;
}

.engagement-schedule-date-summary {
  color: var(--ink-muted);
  font-size: var(--font-size-body);
  font-weight: 400;
  text-align: right;
  white-space: nowrap;
}

.engagement-schedule-date-summary-compact {
  display: none;
}

@container engagement-schedule (max-width: 300px) {
  .engagement-schedule-date-summary [data-engagement-date-summary-full] {
    display: none;
  }

  .engagement-schedule-date-summary-compact {
    display: inline;
  }
}

.engagement-schedule-row {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: start;
  gap: 24px;
}

.engagement-schedule-row > .segmented-picker {
  min-width: 0;
}

.engagement-modal .date-picker-controls.segmented-picker-surface {
  min-height: 48px;
  font-size: var(--font-size-body-large);
}

.engagement-modal .date-picker .segmented-picker-value,
.engagement-modal .date-picker .segmented-picker-edit {
  min-height: 46px;
  font-weight: 500;
}

.engagement-modal .time-picker-controls.segmented-picker-surface {
  min-height: 48px;
  font-size: var(--font-size-body-large);
}

.engagement-modal .time-picker .segmented-picker-value,
.engagement-modal .time-picker .segmented-picker-edit {
  min-height: 46px;
  font-weight: 500;
}

.engagement-modal .time-picker-colon {
  flex-basis: 8px;
  gap: 3px;
}

.engagement-modal .time-picker-colon::before,
.engagement-modal .time-picker-colon::after {
  width: 3px;
  height: 4px;
}

.engagement-calendar-shell {
  display: grid;
  width: min(100%, 420px);
  gap: 12px;
  margin-inline: auto;
}

.engagement-calendar-period {
  min-height: 44px;
}

.engagement-calendar-period > p {
  margin: 0;
  color: var(--ink);
  font-size: var(--font-size-lead);
  font-weight: 700;
}

.engagement-calendar-navigation {
  display: flex;
  gap: 4px;
}

.engagement-calendar-navigation-button .down-chevron {
  width: 12px;
  color: currentColor;
}

.engagement-calendar-navigation-button.is-previous .down-chevron {
  transform: rotate(90deg);
}

.engagement-calendar-navigation-button.is-next .down-chevron {
  transform: rotate(-90deg);
}

.engagement-calendar {
  margin: 0;
}

.engagement-calendar-day-button {
  padding: 0;
  appearance: none;
  font-family: inherit;
}

.engagement-calendar-day-button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.modal-body.reservation-management-body {
  padding: 0;
}

.reservation-management-body .form-error {
  margin: 20px var(--modal-inline-padding) 0;
}

.reservation-management-body > .reservation-management-section {
  padding: 28px var(--modal-inline-padding);
}

.reservation-management-section + .reservation-management-section {
  border-top: 1px solid var(--border-hairline);
}

.reservation-management-section .eyebrow {
  margin-bottom: 20px;
  color: var(--ink-muted);
  font-size: var(--font-size-eyebrow);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.reservation-management-section .form-field {
  display: grid;
  width: 100%;
  gap: 8px;
}

.reservation-management-section .form-label {
  color: var(--ink);
  font-weight: 700;
}

.reservation-management-section .select-control {
  width: 100%;
}

.reservation-management-section .select-field {
  width: 100%;
  min-height: 44px;
}

.form-fieldset.reservation-management-options {
  display: grid;
  gap: 24px;
}

.reservation-management-options legend {
  width: 100%;
}

.reservation-management-choice {
  align-items: start;
  gap: 16px;
}

.reservation-management-choice-copy {
  display: grid;
  gap: 6px;
}

.reservation-management-choice-copy strong {
  display: flex;
  min-height: 30px;
  align-items: center;
  color: var(--ink);
  line-height: 1.35;
}

.reservation-management-choice-copy > span {
  color: var(--ink-muted);
  line-height: 1.5;
}

.modal > .arrangement-form {
  min-height: min(400px, calc(100dvh - 152px));
}

.arrangement-form-error {
  margin: 0 0 20px;
}

.form-fieldset.arrangement-mode-options {
  display: grid;
  gap: 12px;
}

.arrangement-mode-option {
  display: grid;
  gap: 0;
  overflow: hidden;
}

.vertical-radio-option.arrangement-mode-choice {
  display: grid;
  min-width: 0;
  min-height: 68px;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
}

.arrangement-mode-choice > .arrangement-icon {
  width: 40px;
  height: 40px;
  grid-column: 1;
  grid-row: 1;
  border-radius: 9px;
}

.arrangement-mode-option:has(.arrangement-mode-input:checked)
  .arrangement-icon {
  background: var(--accent-tint);
  color: var(--accent-hover);
}

.arrangement-mode-choice .vertical-radio-copy {
  grid-column: 2;
  grid-row: 1;
  gap: 3px;
  padding-top: 0;
}

.arrangement-mode-choice .arrangement-mode-input:focus-visible {
  outline: 0;
}

.modal-body.arrangement-scroll-body {
  padding: 0;
}

.arrangement-options-body {
  padding: 4px var(--modal-inline-padding) var(--modal-block-padding);
}

.arrangement-nested-settings {
  padding: 0;
}

.arrangement-nested-settings-inner {
  position: relative;
  padding: 16px;
}

.arrangement-nested-settings-inner::before {
  position: absolute;
  top: 0;
  right: 16px;
  left: 16px;
  border-top: 1px solid var(--border-card-section);
  content: "";
}

.arrangement-nested-settings-inner > .arrangement-contact-fields {
  padding-top: 0;
}

.arrangement-reservation-settings {
  display: grid;
  gap: 0;
  padding-top: 0;
}

.arrangement-reservation-approval-setting .switch-setting {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 12px;
  row-gap: 4px;
  padding: 0;
  border: 0;
}

.arrangement-reservation-approval-setting .switch-setting-heading {
  display: contents;
}

.arrangement-reservation-approval-setting .switch-setting-title {
  grid-column: 1;
  grid-row: 1;
  font-size: var(--font-size-body);
  font-weight: 500;
}

.arrangement-reservation-approval-setting .switch {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  place-items: start center;
}

.arrangement-reservation-approval-setting .switch-setting-description {
  grid-column: 1;
  grid-row: 2;
  color: var(--ink-muted);
  font-size: var(--font-size-small);
  line-height: 1.4;
}

.arrangement-reservation-limit {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-card-section);
}

.arrangement-reservation-limit .form-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  align-items: center;
  gap: 12px;
}

.arrangement-reservation-limit .form-label {
  margin: 0;
  color: var(--ink);
  font-size: var(--font-size-body);
  font-weight: 500;
}

.arrangement-reservation-limit .select-control {
  width: 100%;
}

.arrangement-reservation-limit .select-field {
  width: 100%;
  height: 44px;
}

.arrangement-mode-options .vertical-radio-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--font-size-body-large);
}

.badge {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 2px 7px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--ink) 50%, transparent);
  color: var(--badge-color, var(--surface-raised));
  font-size: var(--font-size-eyebrow);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.badge-small {
  min-height: 18px;
  padding: 1px 5px;
  border-radius: 5px;
}

.badge-very-small {
  min-height: 16px;
  padding: 1px 4px;
  border-radius: 4px;
  font-size: 0.625rem;
}

.guide-change-badge {
  color: var(--surface-page);
  background: var(--guide-change-blue);
}

.required-pill {
  display: inline-flex;
  min-height: 22px;
  flex: 0 0 auto;
  align-items: center;
  padding: 2px 7px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--font-size-eyebrow);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  vertical-align: 0.12em;
  white-space: nowrap;
}

.arrangement-mode-options .vertical-radio-description {
  font-size: var(--font-size-small);
  line-height: 1.4;
}

.arrangement-contact-fields {
  display: grid;
  width: 100%;
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.arrangement-contact-mode,
.arrangement-contact-input {
  width: 100%;
  min-width: 0;
}

.arrangement-contact-value {
  min-width: 0;
}

.arrangement-contact-handle-row {
  display: flex;
  height: 48px;
  min-width: 0;
  align-items: stretch;
  border: 1px solid var(--border-field);
  border-radius: var(--radius-control);
  background: transparent;
}

.arrangement-contact-handle-row:focus-within {
  border-color: transparent;
  background: var(--surface-raised);
  outline: var(--focus-field-border);
  outline-offset: -1px;
}

.arrangement-phone-value,
.arrangement-contact-country-control {
  width: 48px;
  flex: 0 0 48px;
}

.arrangement-contact-country-control {
  height: 100%;
  border-right: 1px solid var(--border-field);
  background: transparent;
}

.arrangement-contact-handle-row > .arrangement-contact-input,
.arrangement-contact-handle-row > .arrangement-contact-input:focus-visible {
  height: 100%;
  min-height: 0;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  outline: none;
}

.arrangement-contact-country {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  cursor: pointer;
  opacity: 0;
}

.arrangement-contact-country-flag {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.arrangement-contact-mode .down-chevron {
  width: 12px;
  flex: 0 0 auto;
  color: var(--ink-muted);
}

.arrangement-contact-preposition {
  color: var(--ink-body);
  text-align: right;
}

.arrangement-plus-settings-inner {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding-top: 0;
}

.arrangement-plus-availability {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--font-size-body);
  line-height: 1.5;
}

.arrangement-upgrade-button {
  min-width: 120px;
}

/* Keep every guide-management modal on the same functional type hierarchy. */
.visiting-status-choice,
.engagement-body .form-label,
.reservation-management-section .form-label,
.reservation-management-choice-copy strong,
.switch-setting-title,
.visibility-access-body .vertical-radio-set-legend,
.visibility-access-body .vertical-radio-label {
  font-size: var(--font-size-body-large);
}

.visiting-status-intro,
.arrangement-contact-preposition,
.reservation-management-choice-copy > span,
.switch-setting-description,
.visibility-access-body .vertical-radio-description {
  font-size: var(--font-size-body);
}

#guide-location-modal {
  --modal-max-width: 550px;
}

.modal-body.guide-location-search-body {
  /* Leave room for the search field's focus outline inside the scroll area. */
  padding-top: 4px;
}

.modal-body.guide-location-selected-body {
  padding-top: 0;
}

.guide-location-search-controls {
  margin-bottom: 20px;
}

.guide-location-results {
  /* Five two-line suggestions plus Google attribution at ordinary viewport heights. */
  height: clamp(180px, calc(100dvh - 288px), 448px);
}

.guide-location-results-content {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.guide-location-results-scroll {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.guide-location-search-loading {
  display: none;
}

.guide-location-results.htmx-request .guide-location-results-content {
  display: none;
}

.guide-location-results.htmx-request .guide-location-search-loading {
  display: grid;
  height: 100%;
  place-items: center;
  margin: 0;
  color: var(--ink-muted);
  text-align: center;
}

.guide-location-search-prompt {
  margin: auto;
  color: var(--ink-muted);
  font-size: var(--font-size-body);
  text-align: center;
}

.guide-location-results-scroll > .cue,
.guide-location-results-scroll > .form-error,
.guide-location-search-empty {
  margin: 0;
}

.guide-location-result-list {
  flex: none;
}

.guide-location-result-list li + li {
  border-top: 1px solid var(--border-hairline);
}

.guide-location-result {
  display: flex;
  width: 100%;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 4px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.guide-location-result:hover:not(:disabled),
.guide-location-result:focus {
  color: var(--accent);
}

.guide-location-result-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.guide-location-result-copy strong {
  font-size: var(--font-size-body-large);
  font-weight: 600;
}

.guide-location-result-copy span {
  color: var(--ink-muted);
  font-size: var(--font-size-small);
  line-height: 1.4;
}

.guide-location-result .right-arrow-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.guide-location-google-attribution {
  display: block;
  width: 98px;
  height: 18px;
  flex: none;
  margin: 12px 0 0 auto;
}

.guide-location-change {
  display: block;
  width: fit-content;
  min-height: 44px;
  margin: 0 0 18px auto;
}

.guide-location-selected-body > .form-error {
  margin-bottom: 20px;
}

.guide-location-selection {
  overflow: hidden;
  border: 1px solid var(--border-field);
  border-radius: var(--radius-control);
  background: var(--surface-raised);
}

.guide-location-selected-map {
  display: block;
  width: 100%;
  height: clamp(220px, 38vh, 300px);
  border: 0;
  background: var(--surface-sunken);
}

.guide-location-selected-copy {
  padding: 18px 20px;
}

.guide-location-selected-copy strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: var(--font-size-body-large);
}

.guide-location-selected-copy p {
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.5;
  white-space: pre-line;
}

.guide-location-precise-field {
  margin-top: 24px;
}

.guide-location-precise-label {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--ink);
}

.guide-location-precise-optional {
  color: var(--ink-muted);
  font-size: var(--font-size-small);
  font-weight: 400;
}

.guide-management-section-content {
  margin: 0 0 0 14px;
  color: var(--ink);
}

.preferred-visit-periods.guide-management-best-time-periods {
  margin-bottom: 0;
}

.guide-management-section-body .preferred-visit-duration:last-child {
  margin-bottom: 0;
}

.guide-section-modal-header-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.guide-section-modal-header-title .guide-section-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 6px;
}

.guide-section-modal-header-title .guide-section-icon svg {
  width: 16px;
  height: 16px;
}

.guide-section-editor-body {
  display: flex;
  min-height: min(320px, calc(100dvh - 190px));
  flex: 1 1 auto;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: var(--modal-block-padding);
  background: var(--surface-raised);
}

.guide-section-editor-body > .form-error {
  margin: var(--modal-block-padding) var(--modal-inline-padding) 16px;
}

.field-control.guide-section-editor-textarea {
  display: block;
  min-height: 220px;
  padding: var(--rich-text-editor-block-padding) var(--modal-inline-padding);
  border: 0;
  border-radius: 0;
  background: var(--surface-ghost);
  resize: vertical;
}

.rich-text-editor {
  --rich-text-editor-block-padding: 20px;
  --rich-text-editor-placeholder: var(--ink-placeholder);
  position: relative;
  min-width: 0;
}

.field-control.guide-section-editor-textarea::placeholder {
  color: var(--rich-text-editor-placeholder);
}

.rich-text-toolbar {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  overflow-x: auto;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  border: 0;
  background: var(--surface-raised);
  scrollbar-width: thin;
}

.rich-text-toolbar-button {
  font: inherit;
  font-size: var(--font-size-body-large);
}

.rich-text-toolbar-button[aria-pressed="true"],
.rich-text-toolbar-button[aria-expanded="true"] {
  --icon-button-background: var(--accent-wash);
  --icon-button-hover-background: var(--accent-wash);
}

.rich-text-toolbar-button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: -3px;
}

.rich-text-toolbar-button svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rich-text-toolbar-button svg.feather {
  width: 20px;
  height: 20px;
  fill: none;
  stroke-width: 2.2;
}

.rich-text-toolbar-button svg.rich-text-numbered-list-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
  stroke: none;
}

.field-control.rich-text-editor-content {
  min-height: 220px;
  max-height: min(420px, calc(100dvh - 280px));
  overflow-y: auto;
  padding: var(--rich-text-editor-block-padding) var(--modal-inline-padding);
  border: 0;
  border-radius: 0;
  background: var(--surface-ghost);
  color: var(--ink);
  font-size: var(--font-size-body-large);
  line-height: 1.5;
  caret-color: var(--accent);
}

.field-control.rich-text-editor-content:focus-visible {
  outline: var(--focus-field-border);
  outline-offset: -2px;
}

.rich-text-editor-content p {
  margin-bottom: 12px;
}

.rich-text-editor-content > :first-child {
  margin-top: 0;
}

.rich-text-editor-content > :last-child {
  margin-bottom: 0;
}

.rich-text-editor-content ul,
.rich-text-editor-content ol {
  margin: 0 0 14px;
  padding-inline-start: 28px;
}

.rich-text-editor-content li + li {
  margin-top: 5px;
}

.rich-text-editor-content a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.rich-text-editor-content p.is-editor-empty:first-child::before {
  height: 0;
  float: left;
  color: var(--rich-text-editor-placeholder);
  content: attr(data-placeholder);
  pointer-events: none;
}

.rich-text-link-panel {
  position: absolute;
  z-index: 1;
  top: 52px;
  right: 0;
  left: 0;
  padding: 14px;
  border: 0;
  border-bottom: 1px solid var(--border-hairline);
  background: var(--surface-raised);
}

.rich-text-link-address {
  background: var(--surface-raised);
}

.rich-text-link-error {
  margin: 10px 0 0;
}

.rich-text-link-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 12px;
}

.rich-text-link-cancel {
  margin-right: auto;
}

.rich-text-link-check-icon {
  width: 20px;
  height: 20px;
}

.guide-section-icon {
  --section-accent: var(--accent);
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 9px;
  background: var(--section-accent);
  color: var(--surface-page);
}

.guide-section-icon-best-time,
.guide-management-section-best-time {
  --section-accent: #98791e;
}

.guide-section-icon-visit-duration,
.guide-management-section-visit-duration {
  --section-accent: #6179a0;
}

.guide-section-icon-arrangement,
.guide-management-section-arrangement {
  --section-accent: #298d82;
}

.guide-section-icon-location,
.guide-management-section-location {
  --section-accent: #ab6c44;
}

.guide-section-icon-parking,
.guide-management-section-parking {
  --section-accent: #5a8b5b;
}

.guide-section-icon-other,
.guide-management-section-other {
  --section-accent: #8a6fa8;
}

.guide-section-icon-pictures,
.guide-management-section-pictures {
  --section-accent: #85803c;
}

.guide-management-visibility-card-content {
  --guide-visibility-content-gap: 8px;
  --guide-visibility-status-icon-size: 20px;
  --guide-visibility-status-gap: 12px;
  display: grid;
  min-height: 84px;
  gap: var(--guide-visibility-content-gap);
}

.guide-management-visibility-header {
  margin-block-end: var(--guide-visibility-content-gap);
}

.guide-management-visibility-card-content > .count-navigation-button {
  margin-inline-start: calc(var(--guide-visibility-status-icon-size) + var(--guide-visibility-status-gap));
  max-width: calc(100% - var(--guide-visibility-status-icon-size) - var(--guide-visibility-status-gap));
}

.guide-management-visibility-edit {
  flex: 0 0 auto;
  margin-inline-start: auto;
}

.guide-management-visibility-summary {
  display: grid;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ink-body);
  font-size: var(--font-size-body);
  line-height: 1.55;
}

.guide-management-visibility-summary li {
  display: flex;
  align-items: center;
  gap: var(--guide-visibility-status-gap);
}

.guide-visibility-status-icon {
  width: var(--guide-visibility-status-icon-size, 20px);
  height: var(--guide-visibility-status-icon-size, 20px);
  flex: 0 0 auto;
}

.guide-management-danger-zone {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: -12px;
}

.guide-management-danger-zone > .button {
  flex-shrink: 0;
}

.guide-management-plus-footer {
  --stack-gap: 8px;
  min-width: 0;
}

.guide-management-plus-header {
  --cluster-align: flex-start;
}

.guide-management-plus-header .card-title {
  min-width: 0;
}

.guide-management-plus-header .plus-logo {
  flex: 0 0 auto;
}

.guide-management-plus-footer .card-title,
.guide-management-plus-footer p {
  margin: 0;
  font-size: var(--font-size-body);
  line-height: 1.5;
}

.lead {
  max-width: 640px;
  color: var(--ink-body);
  font-size: var(--font-size-lead);
  line-height: 1.6;
}

.small-label {
  font-size: var(--font-size-eyebrow);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}

.eyebrow {
  margin-bottom: 16px;
  color: var(--ink-muted);
  font-size: var(--font-size-eyebrow);
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

.eyebrow.above-heading {
  margin-bottom: 20px;
}

.guide-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 620px) minmax(220px, 240px);
  gap: 50px;
  padding-block: 56px 72px;
}

.identity-rail,
.visit-feedback-cta {
  position: sticky;
  top: var(--page-sticky-top);
  align-self: start;
}

.identity-location {
  margin: 0;
  color: var(--ink-body);
  font-size: var(--font-size-body);
  line-height: 1.5;
}

.identity-rail .status-badge {
  margin-top: 16px;
}

.visit-feedback-cta h5 {
  margin-bottom: 16px;
}

.avatar {
  display: grid;
  overflow: hidden;
  place-items: center;
  border-radius: 14px;
  background: var(--avatar-background);
  color: var(--ink);
  font-weight: 700;
}

.avatar.avatar-photo-placeholder {
  background: var(--surface-sunken);
  color: var(--ink-faint);
  box-shadow: 0 0 0 2px var(--surface-page);
}

.avatar-photo-placeholder svg {
  display: block;
  width: 100%;
  height: 100%;
}

.avatar-header {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: var(--font-size-meta);
}

.avatar-large {
  width: 200px;
  height: 200px;
  margin-bottom: 24px;
  font-size: var(--font-size-avatar);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keep alt text accessible without flashing the large initials font while loading. */
  font-size: 0;
}

.status-badge {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 10px;
  font-size: var(--font-size-meta);
  font-weight: 700;
  line-height: 1.35;
}

.status-badge {
  background: var(--status-positive-tint);
  color: var(--status-positive);
}

.guide-management-status-summary.is-welcoming {
  border: 0;
  background: var(--status-positive-tint);
  color: var(--status-positive);
  box-shadow: none;
}

.status-badge-muted {
  background: var(--surface-sunken);
  color: var(--ink-body);
}

.guide-management-status-summary:not(.is-welcoming) {
  color: var(--ink-body);
}

.status-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentcolor;
}

.status-mark {
  --status-mark-size: 20px;
  --status-mark-icon-size: 14px;
  display: grid;
  width: var(--status-mark-size);
  height: var(--status-mark-size);
  flex: 0 0 var(--status-mark-size);
  place-items: center;
  border-radius: 50%;
  background: var(--status-mark-background, var(--status-positive));
  color: var(--status-mark-color, var(--surface-page));
}

.status-mark-small {
  --status-mark-size: 14px;
  --status-mark-icon-size: 10px;
}

.status-mark-large {
  --status-mark-size: 24px;
  --status-mark-icon-size: 16px;
}

.status-mark .tick-icon {
  width: var(--status-mark-icon-size);
  height: var(--status-mark-icon-size);
}

.guide-content {
  min-width: 0;
}

.guide-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 20px;
  margin-bottom: 40px;
}

.guide-heading .eyebrow {
  grid-column: 1;
}

.guide-follow-control {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
}

.guide-heading h1 {
  grid-column: 1;
  margin-bottom: 16px;
  font-size: var(--font-size-display-medium);
  line-height: var(--line-height-display);
  overflow-wrap: anywhere;
}

.guide-heading .text-large {
  grid-column: 1 / -1;
}

.guide-updated {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  color: var(--ink-muted);
  font-size: var(--font-size-small);
  line-height: 1.4;
}

.text-large {
  max-width: 580px;
  margin-bottom: 0;
  color: var(--ink-body);
  font-size: var(--font-size-large);
  line-height: 1.5;
}

.guide-prose {
  white-space: pre-line;
  font-size: var(--font-size-body-large);
  line-height: 1.6;
}

.guide-prose-rich {
  white-space: normal;
}

.guide-prose-rich > :first-child {
  margin-top: 0;
}

.guide-prose-rich > :last-child {
  margin-bottom: 0;
}

.guide-prose-rich p {
  margin-bottom: 14px;
}

.guide-prose-rich ul,
.guide-prose-rich ol {
  margin: 0 0 16px;
  padding-inline-start: 20px;
}

.guide-prose-rich li + li {
  margin-top: 6px;
}

.guide-prose-rich li > p {
  margin-bottom: 0;
}

.guide-prose-rich a {
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.guide-callout {
  margin-bottom: 32px;
}

.linked-card-row {
  overflow: hidden;
}

.linked-card-row > a {
  display: flex;
  min-height: 82px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px;
  color: inherit;
  text-decoration: none;
}

.linked-card-row-compact > a {
  min-height: 64px;
  gap: 16px;
  padding: 10px 20px;
}

.guides-following-visits-notice > a:hover .linked-notice-disclosure,
.guides-following-visits-notice > a:focus-visible .linked-notice-disclosure {
  opacity: 1;
}

.linked-card-row > a:focus-visible {
  outline: var(--focus-ring);
  outline-offset: -3px;
}

.linked-notice-copy {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  gap: 5px;
}

.reminder-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: inherit;
}

.linked-notice-copy .eyebrow {
  color: color-mix(in srgb, var(--notice-ink) 72%, var(--ink));
  letter-spacing: 0.04em;
}

.linked-notice-copy strong {
  font-size: var(--font-size-body-large);
  font-weight: 500;
  line-height: 1.35;
}

.linked-notice-arrow {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--notice-ink) 8%, transparent);
}

.linked-notice-arrow .right-chevron {
  width: 16px;
  height: 16px;
}

.guide-callout h3 {
  margin-bottom: 16px;
}

.guide-callout-card .guide-prose {
  margin-bottom: 0;
}

.guide-unseen-changes-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
}

.guide-unseen-changes-list li {
  padding-left: 4px;
}

.guide-unseen-changes-list time {
  color: var(--ink-muted);
  white-space: nowrap;
}

.guide-identity-change-badge {
  margin-bottom: 8px;
}

.guide-visitor-status {
  display: flex;
  width: fit-content;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.guide-callout-change-badge {
  margin: -5px 0 12px;
}

.guide-planning .guide-prose {
  font-size: var(--font-size-body);
}

.guide-callout-card .text-large {
  font-size: var(--font-size-large);
  line-height: 1.5;
}

.guide-section {
  background: transparent;
}

.guide-section-panel-inner > .guide-prose:last-child {
  margin-bottom: 0;
}

.guide-section-panel-inner > .preferred-visit-periods:last-child {
  margin-bottom: 0;
}

.guide-location-map {
  width: 100%;
  height: 320px;
  margin-top: 20px;
  border: 0;
  border-radius: 10px;
  background: var(--surface-sunken);
}

.guide-sample-location-label {
  margin: 0 0 5px;
  color: var(--ink-muted);
  font-size: var(--font-size-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.guide-sample-map {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  overflow: hidden;
  border: 1px solid var(--border-card-section);
  background:
    linear-gradient(128deg, transparent 0 19%, color-mix(in srgb, var(--surface-raised) 76%, transparent) 19% 23%, transparent 23% 57%, color-mix(in srgb, var(--surface-raised) 72%, transparent) 57% 61%, transparent 61%),
    linear-gradient(36deg, transparent 0 31%, color-mix(in srgb, var(--accent-tint) 76%, transparent) 31% 38%, transparent 38% 72%, color-mix(in srgb, var(--surface-raised) 80%, transparent) 72% 76%, transparent 76%),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--border-hairline) 32%, transparent) 0 1px, transparent 1px 54px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--border-hairline) 32%, transparent) 0 1px, transparent 1px 54px),
    var(--accent-wash);
}

.guide-sample-map::before,
.guide-sample-map::after {
  position: absolute;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 17%, var(--surface-raised));
  content: "";
  transform-origin: center;
}

.guide-sample-map::before {
  top: 36%;
  right: -8%;
  left: -12%;
  transform: rotate(-11deg);
}

.guide-sample-map::after {
  top: 58%;
  right: 16%;
  left: 5%;
  height: 5px;
  transform: rotate(17deg);
}

.guide-sample-map span {
  position: relative;
  z-index: 1;
  padding: 8px 11px;
  border: 1px solid var(--border-card-section);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
  color: var(--ink);
  font-size: var(--font-size-small);
  font-weight: 650;
  box-shadow: var(--shadow-card);
}

.guide-sample-location-notice {
  margin: 10px 0 0;
  color: var(--ink-muted);
  font-size: var(--font-size-small);
  line-height: 1.45;
}

.preferred-visit-periods {
  --stack-gap: 0;
  margin: 0 0 16px;
}

.preferred-visit-duration {
  margin: 0 0 16px;
  font-size: var(--font-size-body);
}

.preferred-visit-row {
  --preferred-visit-columns: minmax(100px, 0.7fr) minmax(0, 1.3fr);
  --preferred-visit-column-gap: 16px;
  position: relative;
  display: grid;
  grid-template-columns: var(--preferred-visit-columns);
  align-items: center;
  column-gap: var(--preferred-visit-column-gap);
  row-gap: 0;
  padding-block: 10px;
}

.preferred-visit-row + .preferred-visit-row {
  border-top: 1px solid var(--border-card-section);
}

.preferred-visit-days {
  color: var(--ink-muted);
  font-weight: 500;
}

.preferred-visit-hours {
  margin: 0;
  color: var(--ink);
  font-weight: 500;
}

.preferred-visit-days {
  grid-column: 1;
  grid-row: 1;
}

.preferred-visit-hours {
  position: relative;
  grid-column: 2;
  grid-row: 1;
}

.preferred-visit-hours:has(.best-time-engagements-trigger) {
  padding-inline-end: 50px;
}

.preferred-visit-engagements {
  min-width: 0;
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
}

.best-time-engagements-trigger {
  --icon-button-color: var(--attention);
  --icon-button-selected-background: var(--attention);
  --icon-button-selected-color: var(--surface-sunken);
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.alert-circle-icon,
.best-time-engagements-trigger .up-chevron-icon {
  width: 20px;
  height: 20px;
}

.best-time-engagements-trigger .up-chevron-icon,
.best-time-engagements-trigger[aria-expanded="true"] .alert-circle-icon {
  display: none;
}

.best-time-engagements-trigger[aria-expanded="true"] .up-chevron-icon {
  display: block;
}

.best-time-engagements-panel {
  width: 100%;
  min-width: 0;
  padding: 0;
  margin: 0;
}

.best-time-engagements-reveal {
  display: flow-root;
  padding-top: 12px;
}

.best-time-engagements-content {
  padding: 0;
  border-inline-start: 2px solid var(--attention);
  color: var(--attention);
  font-size: var(--font-size-body);
}

.best-time-engagements-title {
  padding-inline-start: 12px;
  margin: 0 0 8px;
  color: inherit;
  opacity: 0.8;
}

.best-time-engagement-dates {
  display: grid;
  gap: 6px;
  font-size: inherit;
  font-weight: 400;
}

.best-time-engagement-dates li {
  display: grid;
  grid-template-columns: var(--preferred-visit-columns);
  column-gap: var(--preferred-visit-column-gap);
}

.best-time-engagement-dates time {
  padding-inline-start: 12px;
  color: inherit;
  font-weight: 700;
}

.best-time-engagement-availability {
  color: inherit;
  font-weight: 500;
}

.best-time-engagement-boundary.is-changed {
  font-weight: 700;
}

.sidebar {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 20px;
  font-size: var(--font-size-small);
}

.sidebar-panel .card {
  border: 0;
  background: var(--surface-page);
  box-shadow: none;
}

.sidebar-panel {
  padding: 20px;
}

.sidebar-panel > p {
  margin-bottom: 20px;
  line-height: 1.5;
}

.qr-card {
  padding: 16px;
}

.qr-card p {
  margin-bottom: 16px;
  color: var(--ink);
  line-height: 1.4;
  text-align: center;
}

.guide-qr-code {
  width: 100%;
  height: auto;
  margin-inline: auto;
}

.sidebar-create-panel p {
  margin-bottom: 0;
}

.sidebar-create-illustration {
  width: 90%;
  height: auto;
  margin: 14px auto 20px;
}

.sidebar-action {
  min-height: 48px;
  margin-top: 20px;
}

.card {
  --card-padding: 24px;
  --card-horizontal-padding: 24px;
  border: 1px solid var(--border-light-control);
  border-radius: var(--radius-card);
  background: var(--card-background, transparent);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--ink) 6%, transparent);
}

.card-flat {
  border: 1px solid var(--border-hairline);
  box-shadow: none;
}

.card-selectable {
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.card-selectable:hover {
  border-color: var(--border-field);
}

/* Nested settings may stay checked even when their containing choice is inactive. */
.card-selectable:has([data-card-selection]:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.card-selectable:has([data-card-selection]:focus-visible) {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

.ghost-card {
  border: 0;
  border-radius: 10px;
  background: var(--surface-ghost);
  box-shadow: none;
}

.card-padding {
  padding: var(--card-padding, 24px);
  padding-inline: var(--card-horizontal-padding, 24px);
}

.card-section {
  padding-inline: var(--card-horizontal-padding, 24px);
}

.card-clickable:not(.card-page):not(.card-muted):hover {
  box-shadow: var(--shadow-content-card-hover);
}

.card-notice-accent {
  --card-background: color-mix(in oklch, var(--accent) 10%, transparent);
  color: var(--accent-hover);
  transition: background-color 160ms ease;
}

.card-notice-accent.card-clickable:hover {
  --card-background: color-mix(in oklch, var(--accent) 14%, transparent);
  box-shadow: none;
}

.card-muted {
  border: 0;
  background: var(--surface-sunken);
  box-shadow: none;
}

.card-page {
  border: 0;
  background: var(--surface-sunken);
  box-shadow: none;
}

.card-page .guide-section-icon {
  color: var(--surface-page);
}

.card-page .arrangement-icon {
  color: var(--surface-sunken);
}

.card-page .badge {
  --badge-color: var(--surface-sunken);
}

.card-page.card-clickable:hover {
  background: var(--surface-ghost-hover);
}

.card-notice {
  background: var(--notice);
  color: var(--notice-ink);
}

.location-name {
  color: var(--ink);
  font-weight: 700;
}

.guide-location-lines > .guide-prose {
  margin: 0;
}

.location-detail {
  color: var(--ink);
}

.definition {
  margin: 16px 0 0;
}

.definition dt {
  color: var(--ink-muted);
  font-size: var(--font-size-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.definition dd {
  margin: 2px 0 0;
  color: var(--ink);
}

.error-card {
  max-width: 560px;
}

.button {
  box-sizing: border-box;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius-control);
  font-family: inherit;
  font-size: var(--font-size-button);
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.button-block {
  width: 100%;
}

.button-large {
  min-height: 52px;
  font-size: var(--font-size-body-large);
}

.button-small {
  min-height: 36px;
  gap: 8px;
  padding-inline: 14px;
  font-size: var(--font-size-meta);
}

.sidebar .button {
  font-size: inherit;
}

.button-primary {
  border: 0;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}

.button-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  color: #fff;
}

.button-danger {
  border: 0;
  background: var(--danger);
  color: #fff;
}

.button-danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--danger) 86%, var(--ink));
  color: #fff;
}

.button:disabled,
.button-link:disabled,
.icon-button:disabled {
  cursor: default;
  opacity: 0.68;
}

/* Keep the original content in layout and in the accessibility tree. Only
   direct text nodes need a span; existing icon/label layouts stay intact. */
.button-loading-positioned {
  position: relative;
}

.button-loading > :not(.button-spinner),
.button-loading::before,
.button-loading::after {
  opacity: 0 !important;
}

.button-loading,
.button-loading:disabled {
  cursor: progress;
  opacity: 1;
}

.button-loading > .button-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--button-spinner-size, 24px);
  height: var(--button-spinner-size, 24px);
  max-width: 100%;
  max-height: 100%;
  transform: translate(-50%, -50%);
  color: inherit;
  pointer-events: none;
}

.button-spinner use {
  fill-opacity: 1;
}

.text-action,
.button-link {
  color: var(--accent);
  font: inherit;
  font-size: var(--font-size-body);
  font-weight: 500;
  text-decoration: none;
}

.back-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-control);
  white-space: nowrap;
}

.left-arrow-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.button-link {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.swivel-link-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}

.swivel-link-trigger::-webkit-details-marker {
  display: none;
}

.swivel-link-icon {
  display: inline-flex;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.swivel-link[open] > .swivel-link-trigger:not([aria-expanded="false"]) .swivel-link-icon {
  transform: rotate(90deg);
}

/* Animate only this wrapper; all content spacing belongs to its inner child. */
.swivel-link-panel {
  padding: 0;
  margin: 0;
}

.swivel-link-content {
  display: flow-root;
  padding-top: 8px;
}

.text-action:hover,
a:hover .text-action,
button:hover .text-action {
  color: var(--accent-hover);
}

.button-link:hover:not(:disabled) {
  color: var(--accent-hover);
}

.button-icon {
  display: inline-grid;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  place-items: center;
}

.button-icon > svg,
.button-icon > img {
  width: 100%;
  height: 100%;
}

.icon-button {
  box-sizing: border-box;
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: var(--radius-control);
  cursor: pointer;
}

.icon-button-small {
  width: 36px;
  height: 36px;
}

.icon-button-small .x-icon {
  width: 13px;
  height: 13px;
}

.button-light,
.icon-button-light {
  border: 1px solid var(--border-light-control);
  background: transparent;
  color: var(--ink);
}

.icon-button-light {
  background: var(--icon-button-background, transparent);
  color: var(--icon-button-color, var(--ink));
}

.button-light {
  font-weight: 550;
}

.button-light:hover:not(:disabled),
.icon-button-light:hover:not(:disabled) {
  border-color: var(--ink);
}

/* Keep the outer border at 1px so selecting an option cannot move its label. */
.button-light.is-selected,
.choice-input:checked:not(:disabled) + .button-light,
.best-time-extra-day:has(input:checked) .button-light {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.icon-button-light.raised-selection,
.icon-button-light.raised-selection:hover:not(:disabled) {
  background: var(--icon-button-selected-background, var(--surface-raised));
  color: var(--icon-button-selected-color, var(--ink));
}

.button.button-light:disabled:not(.button-loading),
.button.button-light:disabled:hover:not(.button-loading),
.icon-button.icon-button-light:disabled:not(.button-loading),
.icon-button.icon-button-light:disabled:hover:not(.button-loading),
.button-choice-input:disabled + .button-light,
.button-choice-input:disabled + .button-light:hover {
  border: 1px solid var(--border-hairline);
  background: transparent;
  box-shadow: none;
  color: var(--ink-disabled);
  cursor: default;
  opacity: 1;
}

.icon-button-ghost {
  background: var(--surface-ghost);
  color: var(--ink-muted);
}

.icon-button-ghost:hover:not(:disabled) {
  background: var(--surface-ghost-hover);
  color: var(--ink);
}

.icon-button-invisible {
  background: var(--icon-button-background, transparent);
  color: var(--ink);
}

.icon-button-invisible:hover:not(:disabled),
.icon-button-invisible:focus-visible {
  background: var(--icon-button-hover-background, var(--surface-ghost-hover));
}

.icon-button-inverse {
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--font-size-large);
}

.icon-button-inverse:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.15);
}

.icon-button-inverse:focus-visible {
  outline-color: #fff;
}

.modal {
  --modal-block-padding: 32px;
  --modal-inline-padding: 32px;
  --modal-max-width: 400px;
  container: modal / inline-size;
  isolation: isolate;
  width: min(calc(100% - 32px), var(--modal-max-width));
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: var(--surface-raised);
  color: var(--ink-body);
  box-shadow: var(--shadow-modal);
}

.modal-wide {
  --modal-max-width: 560px;
}

.modal.guide-section-editor-modal {
  --modal-max-width: 500px;
}

.modal-fullscreen {
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  border-radius: 0;
}

@media (max-width: 639px) {
  .modal.guide-preview-modal {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border-radius: 0;
  }
}

@media (min-width: 640px) {
  .modal.guide-preview-modal {
    --guide-preview-inset: clamp(24px, 3vw, 48px);
    width: calc(100% - 2 * var(--guide-preview-inset));
    height: calc(100dvh - 2 * var(--guide-preview-inset));
    max-width: 1400px;
    max-height: none;
  }
}

.modal[open] {
  min-height: 0;
  flex-direction: column;
}

.modal-flow,
.modal > form,
.modal-panes,
.modal-pane {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.create-guide-flow[aria-busy="true"] {
  cursor: wait;
}

.create-guide-step {
  margin: 0 0 10px;
  color: var(--ink-muted);
  font-size: var(--font-size-meta);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.create-guide-statement {
  margin-bottom: 24px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--font-size-display-small);
  font-optical-sizing: auto;
  font-weight: 700;
  letter-spacing: var(--letter-spacing-heading);
  line-height: var(--line-height-heading);
}

.create-guide-statement-line,
.create-guide-name-line {
  display: block;
}

.create-guide-name-line {
  display: flex;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: baseline;
}

.create-guide-name-separator {
  white-space: pre;
}

.create-guide-name-field {
  display: inline-grid;
  max-width: 100%;
  border-bottom: 2px solid var(--ink);
  color: inherit;
  font-weight: 700;
  vertical-align: baseline;
}

.create-guide-name-field::after {
  visibility: hidden;
  min-width: 0;
  content: attr(data-create-guide-name-value);
  grid-area: 1 / 1;
  white-space: pre;
}

.create-guide-name-field:focus-within {
  border-bottom-color: var(--accent);
}

.create-guide-name-input {
  width: 0;
  min-width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  caret-color: var(--accent);
  color: var(--ink);
  font: inherit;
  grid-area: 1 / 1;
  letter-spacing: inherit;
  line-height: inherit;
}

.create-guide-name-input::placeholder {
  color: var(--ink-placeholder);
  opacity: 1;
}

.create-guide-name-field:has(.create-guide-name-input:placeholder-shown)::after,
.create-guide-name-input::placeholder {
  font-weight: 400;
}

.create-guide-name-input:focus-visible {
  outline: none;
}

.create-guide-lead,
.authentication-lead {
  margin-bottom: 28px;
  color: var(--ink-body);
  font-size: var(--font-size-body-large);
  line-height: 1.55;
}

.create-guide-account-step {
  padding: 20px var(--modal-inline-padding) 0;
}

.create-guide-account-back {
  align-self: flex-start;
  margin-left: var(--modal-inline-padding);
}

.create-guide-account-pane .authentication-body {
  padding-top: 8px;
}

.authentication-body h2 {
  margin-bottom: 10px;
}

.authentication-form .form-error,
.authentication-form .form-status {
  margin-bottom: 20px;
}

.authentication-body > .form-field + .form-field {
  margin-top: 20px;
}

.authentication-alternative {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin-top: 24px;
  font-size: var(--font-size-body);
}

.authentication-alternative .button-link {
  min-height: 44px;
}

.verification-code-field {
  margin-top: 4px;
}

.verification-code-field > .form-help {
  margin-top: 16px;
}

.verification-code-control {
  position: relative;
  width: min(100%, 376px);
  margin-inline: auto;
}

.verification-code-input {
  height: 62px;
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  letter-spacing: 0.4em;
  text-align: center;
}

.verification-code-slots {
  display: none;
}

.verification-code-control[data-code-enhanced="true"] {
  --verification-code-gap: clamp(6px, 2vw, 10px);
}

.verification-code-control[data-code-enhanced="true"] .verification-code-input {
  position: absolute;
  z-index: 1;
  inset: 0;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  caret-color: transparent;
  color: transparent;
  outline: none;
}

.verification-code-control[data-code-enhanced="true"] .verification-code-input:focus-visible {
  background: transparent;
  outline: none;
}

.verification-code-control[data-code-enhanced="true"] .verification-code-slots {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--verification-code-gap);
  pointer-events: none;
}

.verification-code-slot {
  display: grid;
  height: clamp(54px, 16vw, 64px);
  place-items: center;
  border: 1px solid var(--border-field);
  border-radius: var(--radius-control);
  background: var(--surface-raised);
  color: var(--ink);
  font-size: clamp(1.75rem, 7vw, 2rem);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  line-height: 1;
}

.verification-code-control:focus-within .verification-code-slot[data-code-active] {
  border-color: transparent;
  outline: var(--focus-field-border);
  outline-offset: -1px;
}

.verification-code-input[aria-invalid="true"] + .verification-code-slots .verification-code-slot {
  border-color: color-mix(in srgb, var(--danger) 60%, var(--border-field));
}

.verification-code-input:disabled + .verification-code-slots .verification-code-slot {
  background: var(--surface-ghost-disabled);
  color: var(--ink-disabled);
}

.authentication-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  margin-top: 20px;
}

.authentication-secondary-actions .button-link {
  font-size: var(--font-size-body);
}

.authentication-resend-help {
  margin: 4px 0 0;
  color: var(--ink-muted);
  font-size: var(--font-size-small);
  line-height: 1.5;
}

.authentication-form.htmx-request {
  opacity: 0.72;
}

.modal[open] {
  position: fixed;
  display: flex;
  animation: modal-enter 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.modal > form {
  position: relative;
  z-index: 0;
}

.modal::backdrop {
  background: rgba(226, 229, 233, 0.85);
}

.modal[open]::backdrop {
  animation: modal-backdrop-enter 220ms ease-out both;
}

.modal[open].modal-closing {
  animation: modal-exit 140ms cubic-bezier(0.64, 0, 0.78, 0) both;
}

.modal[open].modal-closing::backdrop {
  animation: modal-backdrop-exit 140ms ease-in both;
}

@keyframes modal-enter {
  from {
    transform: translateY(16px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes modal-backdrop-enter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modal-exit {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(16px);
    opacity: 0;
  }
}

@keyframes modal-backdrop-exit {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes home-guide-preview-rail-enter {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes home-guide-preview-rail-exit {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100%);
  }
}

@keyframes home-guide-preview-sheet-enter {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes home-guide-preview-sheet-exit {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(100%);
  }
}

@media (min-width: 800px) {
  .modal.home-guide-preview-modal {
    inset: 0 0 0 auto;
    container: home-guide-preview-modal / inline-size;
    width: clamp(520px, 50vw, 840px);
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border-radius: 0;
  }

  .home-guide-preview-modal[open] {
    animation: home-guide-preview-rail-enter 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .home-guide-preview-modal[open].modal-closing {
    animation: home-guide-preview-rail-exit 140ms cubic-bezier(0.64, 0, 0.78, 0) both;
  }

}

@container home-guide-preview-modal (min-width: 680px) {
  .home-sample-guide-body .screen-section-container {
    width: calc(100% - 48px);
  }

  .home-sample-guide-body .guide-layout {
    grid-template-columns: minmax(0, 144px) minmax(0, 1fr);
    gap: 32px 24px;
    padding-block: 40px;
  }

  .home-sample-guide-body .identity-rail {
    position: static;
    grid-column: 1;
    grid-row: 1;
  }

  .home-sample-guide-body .identity-rail .avatar {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  .home-sample-guide-body .guide-content {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .home-sample-guide-body .sidebar {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr);
  }
}

@container home-guide-preview-modal (max-width: 679px) {
  .home-sample-guide-body .screen-section-container {
    width: calc(100% - 2 * var(--page-min-inline-padding));
  }

  .home-sample-guide-body .guide-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding-block: 40px 0;
  }

  .home-sample-guide-body .identity-rail {
    position: static;
    display: flex;
    width: 100%;
    margin-bottom: 30px;
    grid-column: auto;
    grid-row: auto;
    align-items: center;
    flex-direction: column;
    text-align: center;
  }

  .home-sample-guide-body .identity-rail .avatar {
    width: min(200px, 100%);
    height: auto;
    aspect-ratio: 1;
  }

  .home-sample-guide-body .guide-content,
  .home-sample-guide-body .sidebar {
    grid-column: auto;
    grid-row: auto;
  }

  .home-sample-guide-body .sidebar {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-sample-guide-body .visit-feedback-cta {
    position: static;
  }
}

@media (max-width: 799px) {
  .home-guide-preview-modal[open] {
    animation: home-guide-preview-sheet-enter 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .home-guide-preview-modal[open].modal-closing {
    animation: home-guide-preview-sheet-exit 140ms cubic-bezier(0.64, 0, 0.78, 0) both;
  }
}

.modal-header {
  --modal-header-close-inset: 14px;
  --modal-header-right-padding: var(--page-min-inline-padding);
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 0 auto;
  min-height: 60px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: var(--modal-header-close-inset) var(--modal-header-right-padding)
    var(--modal-header-close-inset) 24px;
  border-bottom: 1px solid var(--border-hairline);
  background: var(--surface-raised);
}

.modal-header p {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--font-size-lead);
  line-height: 1.3;
}

.modal-header .modal-close {
  /* Balance the close control's edge spacing without shifting header content. */
  margin-right: calc(var(--modal-header-close-inset) - var(--modal-header-right-padding));
}

.modal-header-ink {
  --modal-header-close-inset: 8px;
  z-index: 2;
  display: block;
  padding-bottom: var(--modal-header-close-inset);
  border-bottom: 0;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 8px 24px rgba(37, 48, 68, 0.14);
}

.modal-header-ink-row {
  min-width: 0;
  min-height: 44px;
}

.modal-header-ink-row p {
  min-width: 0;
  color: #fff;
  font-weight: 700;
}

.modal-header-ink .modal-close {
  background: rgba(255, 255, 255, 0.1);
}

.modal-header-ink .modal-close:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.18);
}

.modal-headline-header {
  position: relative;
  padding: 32px 104px 28px 32px;
}

.modal-headline-header h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: var(--font-size-display-small);
  font-weight: var(--font-weight-heading);
  letter-spacing: var(--letter-spacing-heading);
  line-height: var(--line-height-heading);
}

.modal-close.modal-headline-close {
  position: absolute;
  z-index: 2;
  top: 20px;
  right: 20px;
  background:
    linear-gradient(var(--surface-ghost), var(--surface-ghost)),
    var(--surface-raised);
}

.modal-close.modal-headline-close:hover {
  background:
    linear-gradient(var(--surface-ghost-hover), var(--surface-ghost-hover)),
    var(--surface-raised);
}

.x-icon {
  width: 17px;
  height: 17px;
}

.trash-icon {
  width: 20px;
  height: 20px;
}

.modal-pane[hidden] {
  display: none;
}

.modal-body {
  min-height: 0;
  flex: 1 1 auto;
  padding: var(--modal-block-padding) var(--modal-inline-padding);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal .modal-body.guide-privacy-body {
  padding: 0;
}

.modal.guide-privacy-modal {
  --modal-max-width: 900px;
}

.guide-privacy-content {
  display: grid;
  gap: 32px;
  padding: 12px var(--modal-inline-padding) var(--modal-block-padding);
  color: var(--ink-body);
  font-size: var(--font-size-body);
  line-height: 1.5;
}

.guide-privacy-content p {
  margin: 0;
}

.guide-privacy-section-icon {
  display: block;
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  color: var(--accent);
}

.guide-privacy-section-icon svg {
  width: 100%;
  height: 100%;
}

.guide-privacy-content h3 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
}

@container modal (min-width: 840px) {
  .guide-privacy-content {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.reservation-impact-body > .supporting-copy {
  margin: 0 0 20px;
}

.reservation-impact-list {
  display: grid;
  gap: 12px;
}

.reservation-impact-row {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--border-card-section);
  border-radius: var(--radius-control);
}

.reservation-impact-row time {
  color: var(--ink-muted);
}

.reservation-impact-row form {
  margin-top: 4px;
}

.reservation-impact-row .form-help,
.reservation-impact-row .form-error {
  margin: 0;
}

.guide-preview-body {
  min-height: 0;
  flex: 1 1 auto;
  overscroll-behavior: contain;
  background: var(--surface-page);
}

.guide-preview-modal .guide-preview-body {
  overflow: hidden;
}

.home-sample-guide-body {
  overflow-y: auto;
}

.guide-preview-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--surface-page);
}

.guide-preview-frame-page {
  min-height: 100dvh;
}

.guide-preview-modal {
  --guide-preview-chrome-height: 73px;
  --guide-preview-chrome-font-size: var(--font-size-lead);
}

.guide-preview-modal .modal-header,
.guide-preview-footer {
  min-height: var(--guide-preview-chrome-height);
}

.guide-preview-modal .modal-header p,
.guide-preview-footer .guide-preview-notice {
  font-size: var(--guide-preview-chrome-font-size);
}

@media (max-width: 639px) {
  .guide-preview-modal {
    --guide-preview-chrome-font-size: var(--font-size-body);
    --guide-preview-chrome-height: calc(
      45px + max(14px, env(safe-area-inset-top), env(safe-area-inset-right))
        + max(14px, env(safe-area-inset-top), env(safe-area-inset-right))
    );
  }
}

.preview-mode-cue .cue {
  border-color: var(--ink);
  background-color: var(--ink);
  background-image: var(--preview-mode-stripes);
  color: var(--surface-page);
}

.preview-success-body .preview-mode-cue {
  margin-bottom: 24px;
}

[data-modal-pane="visit-feedback-preview-done"] .preview-success-body {
  padding-top: calc(var(--modal-block-padding) + 48px);
}

.guide-preview-footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 4px max(24px, env(safe-area-inset-right))
    calc(4px + env(safe-area-inset-bottom))
    max(24px, env(safe-area-inset-left));
  background-color: var(--ink);
  background-image: var(--preview-mode-stripes);
}

.guide-preview-footer .guide-preview-notice {
  margin: 0;
  color: var(--surface-page);
  line-height: 1.3;
  text-align: center;
}

.home-sample-guide-body {
  flex: 1 1 auto;
}

.home-sample-guide-body .screen-section-container {
  width: min(100% - 64px, 1240px);
}

.home-sample-guide-body .sidebar {
  grid-template-columns: minmax(0, 1fr);
}

.guide-share-shell {
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface-page);
}

.guide-management-main .guide-share-shell {
  overflow: visible;
}

.guide-share-header {
  display: grid;
  width: min(100% - 128px, 1536px);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 48px;
  margin-inline: auto;
  padding-block: clamp(52px, 7vh, 88px) 36px;
}

.guide-share-heading p {
  max-width: 720px;
  margin-bottom: 0;
  color: var(--ink);
  font-size: clamp(var(--font-size-body-large), 1.7vw, var(--font-size-large));
  line-height: 1.42;
}

.guide-share-heading .guide-share-published-status {
  width: fit-content;
  margin-bottom: 20px;
  padding: 8px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent-hover);
  font-size: var(--font-size-body);
  font-weight: 700;
  line-height: 1.4;
}

.guide-share-done {
  min-width: 152px;
  margin-top: 8px;
}

.guide-share-body {
  display: grid;
  width: min(100% - 128px, 1536px);
  grid-template-columns: minmax(0, 1.1fr) minmax(460px, 0.9fr);
  align-items: start;
  gap: clamp(64px, 8vw, 132px);
  margin-inline: auto;
  padding-block: 30px max(72px, env(safe-area-inset-bottom));
}

#guide-management-tab-content > .guide-share-shell .guide-share-header,
#guide-management-tab-content > .guide-share-shell .guide-share-body {
  width: 100%;
}

#guide-management-tab-content > .guide-share-shell .guide-share-header {
  padding-top: 0;
  padding-bottom: 24px;
}

#guide-management-tab-content > .guide-share-shell .guide-share-body {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--guide-management-card-gap);
  padding-top: 20px;
}

#guide-management-tab-content
  > .guide-share-shell
  :is(
    .guide-share-heading p,
    .guide-share-link,
    .guide-share-message,
    .guide-share-document p
  ) {
  font-size: var(--font-size-body);
}

.guide-share-copy-column {
  display: grid;
  gap: var(--guide-management-card-gap, 24px);
}

.guide-share-option-content {
  display: grid;
  min-width: 0;
  gap: 16px;
}

.guide-share-option-content > .card-title {
  margin: 0;
}

.guide-share-copy-surface {
  --card-action-row-gap: 16px;
  color: var(--ink);
}

.guide-share-link-surface {
  align-items: center;
}

.guide-share-link {
  min-width: 0;
  color: var(--ink);
  font-size: var(--font-size-body-large);
  overflow-wrap: anywhere;
}

.guide-share-message-surface {
  --stack-gap: 16px;
}

.guide-share-message.auto-expanding-textarea {
  min-width: 0;
  min-height: 160px;
  max-height: 400px;
  overflow-wrap: anywhere;
}

.guide-share-option-content > .meta-copy {
  margin: -8px 0 0;
}

.guide-share-copy-button {
  min-width: 84px;
}

.guide-share-actions {
  --stack-gap: 8px;
  container-type: inline-size;
}

.guide-share-destinations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 8px;
}

.guide-share-destination {
  min-width: 0;
  padding-inline: 12px;
  white-space: normal;
  text-align: center;
}

.guide-share-native {
  justify-self: start;
}

.guide-share-destination[data-guide-share-whatsapp] .button-icon {
  --whatsapp-icon-size: 22px;
  width: var(--whatsapp-icon-size);
  height: var(--whatsapp-icon-size);
}

@container (max-width: 300px) {
  .guide-share-destinations > .button {
    flex-direction: column;
    gap: 4px;
    min-height: 72px;
    padding: 8px 4px;
  }
}

.facebook-icon {
  color: var(--brand-facebook);
}

.whatsapp-icon {
  color: var(--brand-whatsapp);
}

.social-icon-mark {
  fill: var(--surface-raised);
}

.guide-share-documents {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: var(--guide-management-card-gap, 24px);
}

.guide-share-document {
  display: grid;
  min-width: 0;
}

.guide-share-document-content {
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.guide-share-document-illustration {
  display: grid;
  width: min(100%, 196px);
  height: 156px;
  margin-bottom: 10px;
  color: var(--ink-faint);
  place-items: center;
}

.guide-share-document-illustration svg {
  width: 100%;
  height: 100%;
}

.guide-share-document-accent {
  color: var(--accent);
}

.guide-share-document h3 {
  margin-bottom: 8px;
}

.guide-share-document p {
  margin: 0 0 16px;
}

.guide-activation-flow,
.guide-activation-form,
.guide-activation-step {
  min-height: 0;
}

.guide-essentials-complete-body {
  padding-top: 0;
}

.guide-essentials-complete-body p {
  margin: 0;
}

.guide-essentials-complete-actions .guide-management-preview-button {
  width: 100%;
  min-height: 52px;
  font-size: var(--font-size-body-large);
}

.guide-activation-body {
  display: grid;
  align-content: start;
  gap: 24px;
}

.modal-body.guide-activation-body > :is(h2, p) {
  margin-bottom: 0;
}

.guide-activation-body > h2 + .lead {
  margin-top: -12px;
}

.guide-activation-search-setting .checkbox-option,
.guide-activation-access-setting .checkbox-option {
  min-height: 0;
  padding: 0;
  border: 0;
}

.reservation-preview-notice {
  margin-bottom: 16px;
}

.modal-footer {
  flex: 0 0 auto;
  padding: 0 var(--modal-inline-padding) var(--modal-block-padding);
  background: var(--surface-raised);
}

.modal-footer.modal-footer-separated {
  padding-top: var(--modal-block-padding);
  border-top: 1px solid var(--border-hairline);
}

.modal-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.modal-actions > * {
  min-width: 0;
}

.modal-actions .button {
  width: 100%;
}

.modal-actions > :only-child {
  grid-column: 1 / -1;
}

@container modal (max-width: 359px) {
  .modal-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

.modal-body > h2 {
  margin-bottom: 20px;
  font-size: 1.8rem;
  line-height: var(--line-height-heading);
}

.form-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.switch {
  display: inline-grid;
  min-width: 52px;
  min-height: 44px;
  place-items: center;
  cursor: pointer;
}

.switch-input {
  position: relative;
  width: 48px;
  height: 28px;
  margin: 0;
  appearance: none;
  border: 1px solid var(--border-field);
  border-radius: 999px;
  background: var(--surface-sunken);
  cursor: pointer;
  transition: background-color 140ms ease;
}

.switch-input::before {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface-raised);
  box-shadow: 0 1px 4px rgba(37, 48, 68, 0.2);
  content: "";
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.switch-input:checked {
  border-color: var(--accent);
  background: var(--accent);
}

.switch-input:checked::before {
  transform: translateX(20px);
}

.switch-input:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

.switch:has(.switch-input:disabled) {
  cursor: not-allowed;
}

.switch-input:disabled {
  background: var(--surface-ghost-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}

.vertical-radio-set {
  display: grid;
  gap: 20px;
}

.vertical-radio-set-legend {
  margin-bottom: 20px;
  color: var(--ink);
  font-size: var(--font-size-heading);
  font-weight: 700;
  line-height: 1.25;
}

.selection-option {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  color: var(--ink);
  cursor: pointer;
}

.selection-option:has(.selection-input:disabled) {
  color: var(--ink-disabled);
  cursor: not-allowed;
}

.selection-input {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  margin: 0;
  appearance: none;
  place-content: center;
  background: var(--surface-raised);
  cursor: pointer;
}

.selection-input:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

.selection-input:disabled {
  border-color: var(--border-field);
  background: var(--surface-ghost-disabled);
  color: var(--ink-disabled);
  cursor: not-allowed;
}

.choice-card {
  min-height: 72px;
  align-items: start;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--border-light-control);
  border-radius: var(--radius-control);
}

.choice-card-center {
  align-items: center;
}

.vertical-radio-option {
  min-height: 44px;
  align-items: start;
  gap: 16px;
}

.vertical-radio-input {
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
}

.vertical-radio-input::before {
  width: 14px;
  height: 14px;
  transform: scale(0);
  border-radius: 50%;
  background: currentcolor;
  content: "";
}

.vertical-radio-input:checked::before {
  transform: scale(1);
}

.vertical-radio-copy {
  display: grid;
  gap: 6px;
  padding-top: 1px;
}

.vertical-radio-label {
  font-size: var(--font-size-lead);
  line-height: 1.4;
}

.vertical-radio-description {
  color: var(--ink-muted);
  font-size: var(--font-size-body-large);
  line-height: 1.5;
}

.horizontal-radio-set {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.horizontal-radio-option:has(.horizontal-radio-input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.horizontal-radio-option > strong {
  font-size: var(--font-size-body-large);
  line-height: 1.35;
}

.checkbox-input {
  border: 1.5px solid var(--border-field);
  border-radius: var(--radius-control);
  color: var(--surface-raised);
}

.checkbox-input::before {
  width: 14px;
  height: 8px;
  transform: translateY(-1px) rotate(-45deg) scale(0);
  border-bottom: 2px solid currentcolor;
  border-left: 2px solid currentcolor;
  content: "";
}

.checkbox-input:checked {
  background: var(--accent);
}

.checkbox-input:checked:not(:disabled) {
  border-color: var(--accent);
}

.checkbox-input:checked::before {
  transform: translateY(-1px) rotate(-45deg) scale(1);
}

.checkbox-copy {
  display: grid;
  gap: 4px;
}

.checkbox-label {
  font-size: var(--font-size-body-large);
  line-height: 1.35;
}

.checkbox-description {
  color: var(--ink-muted);
  font-size: var(--font-size-body);
  line-height: 1.5;
}

.checkbox-option-small {
  min-height: 44px;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-control);
}

.checkbox-input-small,
.checkbox-option-small .checkbox-input {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-control);
}

.checkbox-input-small::before,
.checkbox-option-small .checkbox-input::before {
  width: 11px;
  height: 6px;
}

.checkbox-option-small .checkbox-label {
  font-size: var(--font-size-body);
  font-weight: 500;
}

.checkbox-option-small .checkbox-description {
  font-size: var(--font-size-small);
  line-height: 1.4;
}

.checkbox-option-light .checkbox-input:checked:not(:disabled) {
  border-color: var(--border-field);
  background: transparent;
  color: var(--ink);
}

@media (max-width: 560px) {
  .horizontal-radio-set {
    grid-template-columns: minmax(0, 1fr);
  }
}

#reservation-modal {
  --modal-max-width: 440px;
}

@media (min-width: 800px) {
  #reservation-modal[open]:has([data-modal-pane="choose-time"]) {
    height: min(680px, calc(100dvh - 32px));
  }
}

.reservation-time-body {
  --reservation-inline-left: var(--modal-inline-padding);
  --reservation-inline-right: var(--modal-inline-padding);
  display: flex;
  flex-direction: column;
  padding-block: 0;
  overflow: hidden;
}

.reservation-date-picker,
.reservation-calendar-panel,
.reservation-time-choices {
  margin-left: calc(-1 * var(--reservation-inline-left));
  margin-right: calc(-1 * var(--reservation-inline-right));
  padding-left: var(--reservation-inline-left);
  padding-right: var(--reservation-inline-right);
}

.reservation-date-picker {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  padding-top: var(--modal-block-padding);
  background: var(--surface-raised);
}

.reservation-date-picker:has(.reservation-calendar-panel:not([hidden])) {
  min-height: 0;
  flex: 1 1 auto;
}

.reservation-date-picker:has(.reservation-calendar-panel[hidden]) {
  padding-block: 20px;
  background: var(--surface-sunken);
}

.reservation-calendar-panel {
  min-height: 0;
  flex: 1 1 auto;
  padding-bottom: var(--modal-block-padding);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.reservation-calendar-panel > h2,
.reservation-time-choices > h2 {
  margin-bottom: 20px;
  font-size: 1.8rem;
  line-height: var(--line-height-heading);
}

.reservation-calendar-panel > h2:has(+ .reservation-calendar-subtitle) {
  margin-bottom: 8px;
}

.reservation-calendar-subtitle {
  margin: 0 0 24px;
  color: var(--ink-body);
  font-size: var(--font-size-body);
  line-height: 1.5;
}

.reservation-calendar-month {
  margin: 0 0 16px;
  color: var(--ink-body);
  text-align: center;
}

.reservation-date-navigation {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  gap: 8px;
  align-items: center;
}

.reservation-date-navigation[hidden],
.reservation-calendar-panel[hidden] {
  display: none;
}

.reservation-date-arrow,
.reservation-date-current {
  min-height: 48px;
}

.reservation-date-arrow {
  padding: 0;
}

.reservation-date-arrow .right-chevron {
  width: 20px;
  height: 20px;
}

.reservation-date-arrow[data-reservation-date-step="-1"] .right-chevron {
  transform: rotate(180deg);
}

.reservation-date-current {
  font-weight: 700;
}

.calendar-weekdays,
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.calendar-weekdays {
  margin-bottom: 10px;
  color: var(--ink-muted);
  font-size: var(--font-size-small);
  font-weight: 700;
  text-align: center;
}

.calendar-weekdays abbr {
  text-decoration: none;
}

.calendar-day {
  min-width: 0;
}

.calendar-day-label {
  display: grid;
  width: 100%;
  aspect-ratio: 1;
  place-items: center;
  border-radius: var(--radius-control);
  color: var(--ink);
  font-size: var(--font-size-body-large);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.calendar-day-unavailable {
  color: var(--ink-faint);
  cursor: default;
}

.reservation-calendar .calendar-day-unavailable {
  font-weight: 500;
  opacity: 0.9;
}

.engagement-calendar .calendar-day-unavailable {
  background: var(--surface-ghost);
}

.reservation-time-choices {
  min-height: 0;
  flex: 1 1 auto;
  padding-top: 20px;
  padding-bottom: var(--modal-block-padding);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.reservation-time-choices[hidden] {
  display: none;
}

.reservation-choice-message {
  color: var(--ink-body);
  font-size: var(--font-size-small);
}

.reservation-time-grid {
  display: grid;
  gap: 24px;
}

.reservation-time-section {
  display: grid;
  gap: 12px;
}

.reservation-time-hours {
  margin: 0;
  color: var(--ink-body);
  font-size: var(--font-size-small);
}

.reservation-time-group {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.choice-input:focus-visible + .choice-target {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.reservation-duration-choices {
  margin: 24px 0 0;
}

.reservation-duration-options {
  --stack-gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.reservation-time-choices.htmx-request {
  opacity: 0.6;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  color: var(--ink-muted);
  font-size: var(--font-size-body);
  font-weight: 500;
}

.field-control {
  width: 100%;
  border: 1px solid var(--border-field);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--ink);
  font: inherit;
}

.text-field,
.text-area {
  font-size: var(--font-size-body-large);
}

.text-field {
  min-height: 48px;
  padding: 0 14px;
}

.text-area {
  min-height: 112px;
  padding: 14px;
  resize: vertical;
  line-height: 1.5;
}

.text-area-compact {
  min-height: 0;
}

.text-field::placeholder,
.text-area::placeholder {
  color: var(--ink-placeholder);
  opacity: 1;
}

.field-control:focus-visible {
  border-color: transparent;
  background: var(--surface-raised);
  outline: var(--focus-field-border);
  outline-offset: -1px;
}

.field-control.field-control-no-focus-treatment:focus-visible {
  border-color: var(--border-field);
  outline: none;
}

.guide-section-editor-modal
  .field-control.field-control-no-focus-treatment:focus-visible {
  background: var(--surface-ghost);
}

.auto-expanding-textarea {
  min-height: 48px;
  max-height: 176px;
  overflow-y: hidden;
  resize: none;
}

.select-control {
  position: relative;
}

.select-field {
  height: 48px;
  appearance: none;
  padding: 0 44px 0 14px;
  font-size: var(--font-size-body);
  font-weight: 700;
}

.select-control .down-chevron {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 16px;
  height: 10px;
  transform: translateY(-50%);
  color: var(--ink);
  pointer-events: none;
}

.reservation-result-body > h2,
.reservation-details-body > h2 {
  margin-bottom: 6px;
}

.reservation-result-description {
  color: var(--ink-body);
  font-size: var(--font-size-body);
  line-height: 1.5;
}

.reservation-time-confirmation {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-hairline);
}

.reservation-time-confirmation p {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--font-size-body);
  line-height: 1.45;
}

.reservation-time-confirmation-copy {
  --stack-gap: 2px;
}

.reservation-duration-notices {
  margin-top: 20px;
}

.reservation-duration-notice-copy {
  display: grid;
  gap: 8px;
}

.reservation-duration-notice-copy p {
  margin: 0;
  line-height: 1.45;
}

.cue {
  margin: 0;
  padding: 14px 16px;
  font-size: var(--font-size-small);
}

.reservation-time-confirmation .button-link {
  flex: 0 0 auto;
}

.reservation-details-section {
  padding-top: 20px;
}

.form-help {
  color: var(--ink-muted);
  font-size: var(--font-size-body);
  line-height: 1.35;
  text-align: right;
}

p.form-help {
  margin-top: 8px;
  text-align: start;
}

.reservation-email-help {
  display: flex;
  align-items: center;
  gap: 12px;
}

.reservation-email-help-icon {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-ghost);
}

.reservation-email-help .mail-icon {
  width: 16px;
  height: 16px;
}

.form-meta {
  color: var(--ink-muted);
  font-size: var(--font-size-small);
  font-weight: 400;
  line-height: 1.35;
}

.reservation-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  color: var(--accent);
  font-size: var(--font-size-body);
  font-weight: 700;
}

.reservation-status-icon {
  --status-mark-background: var(--accent);
  --status-mark-color: #fff;
}

.reservation-result-body .form-field {
  margin-top: 24px;
}

.visit-feedback-body {
  --stack-gap: 28px;
  --two-column-stacked-gap: var(--stack-gap);
  padding: 0 var(--modal-inline-padding) var(--modal-block-padding);
}

.visit-feedback-body .field-control {
  display: block;
}

.reservation-visit-report-fields {
  padding: 0;
}

.visit-feedback-body .form-help {
  margin-bottom: 0;
}

.visit-feedback-scroll-body {
  padding: 0;
}

.visit-feedback-body .form-field {
  margin: 0;
}

.visit-feedback-textarea {
  font-size: var(--font-size-large);
}

.visit-feedback-form [type="submit"]:disabled:not(.button-loading) {
  cursor: default;
  opacity: 0.7;
}

.toast-region {
  position: fixed;
  inset: auto 20px 20px auto;
  z-index: 100;
  display: grid;
  width: min(calc(100% - 40px), 440px);
  height: auto;
  gap: 12px;
  padding: 0;
  margin: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.toast {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 12px 14px 18px;
  transform: translateY(12px);
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: var(--font-size-body);
  font-weight: 700;
  line-height: 1.4;
  opacity: 0;
  pointer-events: auto;
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.toast-error {
  background: var(--danger);
}

.toast-visible {
  transform: translateY(0);
  opacity: 1;
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

/* Action and selection controls stay visually steady when focused. */
:is(button, .button, .button-link, .icon-button, summary,
  input[type="checkbox"], input[type="radio"], input[type="file"],
  input[type="button"], input[type="submit"], input[type="reset"],
  .segmented-radio-option, .choice-target, .card-selectable) {
  --focus-ring: none;
}

select.field-control:focus-visible {
  border-color: var(--border-field);
  outline: none;
}

.button-primary:focus-visible {
  outline-color: #fff;
}

@media (max-width: 499px) {
  .guides-home-controls .segmented-control {
    width: 100%;
  }

  .guides-home-controls .segmented-control-option {
    min-width: 0;
    flex: 1 1 0;
    justify-content: center;
  }
}

@media (max-width: 479px) {
  .engagement-title-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .engagement-title-visibility {
    text-align: left;
  }

  .engagement-schedule-row {
    grid-template-columns: minmax(206px, 1.55fr) minmax(142px, 1fr);
    gap: 8px;
  }
}

@container engagement-schedule (max-width: 390px) {
  .engagement-schedule-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .engagement-modal .engagement-schedule-row .date-picker-controls.segmented-picker-surface {
    width: min(280px, 100%);
  }

  .engagement-modal .engagement-schedule-row .time-picker-controls.segmented-picker-surface {
    width: min(220px, 100%);
  }
}

@media (min-width: 800px) {
  .screen-section-container {
    width: min(100% - 100px, 1180px);
  }

  .page-header-inner,
  .page-back-navigation > .screen-section-container,
  :is(.guide-management-main, .guide-visitor-signed-in) > .screen-section-container {
    width: calc(100% - 100px);
  }
}

@media (min-width: 900px) {
  .page-header-inner-with-view-menu {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .page-header-view-menu {
    display: block;
    justify-self: center;
  }

  .page-header-inner-with-view-menu .app-secondary-navigation {
    justify-self: end;
  }

  .guides-home-main {
    --guides-controls-height: 0px;
  }

  .guides-home-controls {
    display: none;
  }
}

@media (min-width: 1080px) {
  .sidebar-panel {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 1px solid var(--border-hairline);
  }
}

@media (max-width: 1079px) {
  .guide-share-header,
  .guide-share-body {
    width: min(100% - 80px, 760px);
  }

  .guide-share-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 64px;
  }

  .guide-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 62px 50px;
  }

  .sidebar {
    grid-column: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .visit-feedback-cta {
    position: static;
  }
}

@media (min-width: 800px) and (max-width: 1079px) {
  .guide-layout {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .identity-rail {
    position: static;
    grid-column: 1;
    grid-row: 1;
  }

  .identity-rail .avatar {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  .guide-content {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .sidebar {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 967px) {
  .guide-management-main {
    padding-block: 24px 64px;
  }

  .guide-management-layout,
  .guide-layout.guide-layout-signed-in {
    width: min(100%, 620px);
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .guide-toolbar {
    width: 100%;
    margin-bottom: 24px;
  }

  .guide-toolbar-title {
    display: none;
  }
}

@media (max-width: 799px) {
  :root {
    --card-gap: 12px;
  }

  .public-navigation {
    display: none;
  }

  .mobile-navigation {
    display: block;
  }

  .public-mobile-navigation .mobile-navigation-item {
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    text-align: left;
  }

  .public-mobile-navigation .mobile-navigation-item:hover {
    background: var(--surface-ghost-hover);
    color: var(--ink);
  }

  /* Match the public guide photo surface when its canvas is exposed by rubber-banding. */
  html:has(body > main > .screen-section-container > .guide-layout) {
    background: linear-gradient(
        to bottom,
        var(--surface-sunken) 0,
        var(--surface-sunken) 50%,
        var(--surface-page) 50%,
        var(--surface-page) 100%
      )
      fixed;
  }

  /* Continue the header ground behind the overlapping guide portrait. */
  main:has(.guide-layout),
  .home-sample-guide-body:has(.guide-layout) {
    background: linear-gradient(
      to bottom,
      var(--surface-sunken) 0,
      var(--surface-sunken) 112px,
      var(--surface-page) 112px,
      var(--surface-page) 100%
    );
  }

  /* Compact identities do not overlap a portrait backdrop. */
  html:has(body > main .guide-layout-signed-in),
  main:has(.guide-layout-signed-in) {
    background: var(--surface-page);
  }

  .home-sample-guide-body:has(.guide-layout) {
    background-attachment: local;
  }

  .guide-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding-block: 40px 0;
  }

  .identity-rail {
    position: static;
    display: flex;
    width: 100%;
    margin-bottom: 30px;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .identity-rail .avatar {
    width: 144px;
    height: 144px;
    margin-bottom: 16px;
  }

  .identity-rail h4 {
    margin-bottom: 0;
    font-size: var(--font-size-body);
    font-weight: 700;
    line-height: 1.35;
  }

  .identity-rail .status-badge {
    margin-top: 8px;
  }

  .identity-rail .status-dot {
    width: 9px;
    height: 9px;
  }

  .sidebar {
    grid-column: auto;
    width: calc(100% + 2 * var(--page-min-inline-padding));
    margin-inline: calc(-1 * var(--page-min-inline-padding));
    padding: 20px var(--page-min-inline-padding) max(56px, env(safe-area-inset-bottom));
    background: var(--surface-sunken);
  }

  .sidebar-qr-panel {
    display: none;
  }
}

@media (max-width: 639px) {
  .find-road-backdrop {
    margin-bottom: 40px;
  }

  .find-road {
    --find-car-width: 180px;
  }

  .guide-management-main {
    padding: 24px 0 56px;
  }

  .guide-management-recent-visits-card .guide-management-overview-card-content {
    min-height: 0;
  }

  :is(.guide-management-main, .guide-visitor-signed-in) .guide-toolbar {
    margin-bottom: 24px;
  }

  .guide-toolbar {
    margin-bottom: 44px;
    gap: 12px;
  }

  .guide-toolbar-actions {
    gap: 8px;
  }

  .guide-share-header,
  .guide-share-body {
    width: calc(100% - 2 * var(--page-min-inline-padding));
  }

  .guide-share-header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    padding-top: max(32px, env(safe-area-inset-top));
    padding-bottom: 24px;
  }

  .guide-share-heading p {
    font-size: var(--font-size-body);
  }

  .guide-share-done {
    min-width: 84px;
    min-height: 44px;
    padding-inline: 18px;
  }

  .guide-share-body {
    gap: 52px;
    padding-top: 20px;
  }

  .guide-share-copy-surface {
    grid-template-columns: minmax(0, 1fr);
  }

  .guide-share-copy-button {
    width: 100%;
  }

  .guide-share-documents {
    gap: 24px;
  }

  .guide-share-document-illustration {
    height: 124px;
  }

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

  .settings-main {
    padding-block: 40px 56px;
  }

  .settings-name-fields {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .settings-sign-out-content {
    align-items: flex-start;
    flex-direction: column;
  }

  .settings-account-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .arrangement-contact-fields {
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 10px 8px;
  }

  .arrangement-contact-preposition,
  .arrangement-contact-value {
    grid-column: 1 / -1;
  }

  .arrangement-contact-preposition {
    position: relative;
    text-align: center;
  }

  .arrangement-contact-preposition::before {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    border-top: 1px solid var(--border-card-section);
    content: "";
  }

  .arrangement-contact-preposition > span {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding-inline: 10px;
    background: var(--surface-raised);
  }

  .guide-management-request-card > a,
  .guide-management-activity-card > a {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
  }

  .guide-management-activity-card > a {
    min-height: 96px;
  }

  .guide-management-activity-notice-action {
    width: 100%;
  }

  .guide-management-activity-action {
    align-self: flex-end;
  }

  .guide-activity-main {
    padding-block: 28px 56px;
  }

  .guide-activity-heading {
    margin-bottom: 24px;
  }

  .guide-activity-heading h1 {
    margin-top: 8px;
    font-size: var(--font-size-display-small);
  }

  .guide-activity-card-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .guide-activity-definitions {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .guide-request-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .guide-request-actions .button,
  .upcoming-visit-actions .button {
    width: 100%;
  }

}

@media (max-width: 399px) {
  .arrangement-contact-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .arrangement-contact-fields > .arrangement-contact-mode,
  .arrangement-contact-fields > .arrangement-contact-input {
    grid-column: 1 / -1;
  }
}

@media (max-width: 479px) {
  .guide-share-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .guide-share-done {
    grid-row: 1;
    justify-self: end;
    margin-bottom: -54px;
  }

  .guide-share-heading {
    grid-row: 2;
  }

  .guide-share-documents {
    grid-template-columns: minmax(0, 1fr);
  }

  .button-block-mobile {
    width: 100%;
  }

  .find-form-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .find-search-submit {
    width: 100%;
  }

  .page-header-inner {
    gap: 8px;
  }

  .guides-home-main {
    --guides-controls-height: 88px;
  }

  .guides-home-controls {
    padding-top: 24px;
  }

  .guides-empty-illustration img,
  .guides-empty-illustration-following img {
    width: min(100%, 260px);
  }

  .guides-empty-copy {
    padding: 32px 60px max(48px, env(safe-area-inset-bottom));
  }

  .guides-collection {
    padding: 0 0 max(48px, env(safe-area-inset-bottom));
  }

  .authentication-secondary-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .modal {
    --modal-block-padding: 24px;
    --modal-inline-padding: var(--page-min-inline-padding);
    width: calc(100% - 16px);
    max-height: calc(100dvh - 16px);
  }

  .modal-fullscreen-mobile {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border-radius: 0;
  }

  .modal-fullscreen-mobile .modal-header {
    --modal-header-close-inset: max(14px, env(safe-area-inset-top), env(safe-area-inset-right));
    --modal-header-right-padding: max(var(--page-min-inline-padding), env(safe-area-inset-right));
    padding-left: max(var(--page-min-inline-padding), env(safe-area-inset-left));
  }

  .modal-fullscreen-mobile .modal-headline-header {
    padding-top: max(24px, calc(env(safe-area-inset-top) + 10px));
    padding-right: max(84px, calc(env(safe-area-inset-right) + 64px));
    padding-bottom: 24px;
    padding-left: max(var(--page-min-inline-padding), env(safe-area-inset-left));
  }

  .modal-fullscreen-mobile .modal-headline-close {
    --modal-headline-close-inset: max(14px, env(safe-area-inset-top), env(safe-area-inset-right));
    top: var(--modal-headline-close-inset);
    right: var(--modal-headline-close-inset);
  }

  .modal-fullscreen-mobile .modal-body,
  .modal-fullscreen-mobile .visit-feedback-body,
  .modal-fullscreen-mobile .modal-footer {
    padding-right: max(var(--modal-inline-padding), env(safe-area-inset-right));
    padding-left: max(var(--modal-inline-padding), env(safe-area-inset-left));
  }

  .modal-fullscreen-mobile .guide-privacy-content {
    padding-right: max(var(--modal-inline-padding), env(safe-area-inset-right));
    padding-bottom: max(var(--modal-block-padding), env(safe-area-inset-bottom));
    padding-left: max(var(--modal-inline-padding), env(safe-area-inset-left));
  }

  .modal-fullscreen-mobile .guide-section-editor-body > .form-error {
    margin-right: max(var(--modal-inline-padding), env(safe-area-inset-right));
    margin-left: max(var(--modal-inline-padding), env(safe-area-inset-left));
  }

  .modal-fullscreen-mobile .rich-text-toolbar {
    padding-right: max(4px, env(safe-area-inset-right));
    padding-left: max(4px, env(safe-area-inset-left));
  }

  .modal-fullscreen-mobile .guide-section-editor-textarea,
  .modal-fullscreen-mobile .rich-text-editor-content {
    padding-right: max(var(--modal-inline-padding), env(safe-area-inset-right));
    padding-left: max(var(--modal-inline-padding), env(safe-area-inset-left));
  }

  .modal-fullscreen-mobile .rich-text-link-panel {
    padding-right: max(14px, env(safe-area-inset-right));
    padding-left: max(14px, env(safe-area-inset-left));
  }

  .modal-fullscreen-mobile .reservation-management-body {
    padding-right: 0;
    padding-left: 0;
  }

  .modal-fullscreen-mobile .visit-feedback-scroll-body,
  .modal-fullscreen-mobile .arrangement-scroll-body {
    padding-right: 0;
    padding-left: 0;
  }

  .modal-fullscreen-mobile .modal-footer {
    padding-bottom: max(
      var(--modal-block-padding),
      env(safe-area-inset-bottom)
    );
  }

  .modal-header {
    min-height: 64px;
    padding-left: var(--page-min-inline-padding);
  }

  .modal-header p {
    font-size: var(--font-size-body);
  }

  .modal-body > h2 {
    font-size: 1.75rem;
  }

  .reservation-calendar-panel > h2,
  .reservation-time-choices > h2 {
    font-size: 1.75rem;
  }

  .modal-fullscreen-mobile .reservation-time-body {
    --reservation-inline-left: max(var(--modal-inline-padding), env(safe-area-inset-left));
    --reservation-inline-right: max(var(--modal-inline-padding), env(safe-area-inset-right));
  }

  .modal-headline-header h2 {
    font-size: 1.75rem;
  }

  .arrangement-modal.modal-fullscreen-mobile .arrangement-options-body {
    padding-right: max(var(--page-min-inline-padding), env(safe-area-inset-right));
    padding-left: max(var(--page-min-inline-padding), env(safe-area-inset-left));
  }

  .vertical-radio-option.arrangement-mode-choice {
    min-height: 60px;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 16px;
    padding: 10px 12px;
  }

  .arrangement-mode-choice > .arrangement-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
  }

  .arrangement-mode-choice > .arrangement-icon svg {
    width: 20px;
    height: 20px;
  }

  .arrangement-nested-settings-inner {
    padding: 12px;
  }

  .arrangement-nested-settings-inner::before {
    right: 12px;
    left: 12px;
  }

  .two-column {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--two-column-stacked-gap, 16px);
  }

  .toast-region {
    right: 16px;
    bottom: max(16px, env(safe-area-inset-bottom));
    width: calc(100% - 32px);
  }

  .calendar-weekdays,
  .calendar-days {
    gap: 6px;
  }

  .calendar-day-label {
    border-radius: var(--radius-control);
    font-size: var(--font-size-body);
  }

  .preferred-visit-row {
    --preferred-visit-columns: minmax(0, 1fr);
    row-gap: 6px;
  }

  .preferred-visit-days {
    grid-row: 1;
  }

  .preferred-visit-hours {
    grid-column: 1;
    grid-row: 2;
  }

  .preferred-visit-engagements {
    grid-row: 3;
  }

  .best-time-engagement-dates li {
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 12px;
  }

  .reservation-time-group {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.segmented-picker {
  --segmented-picker-stepper-size: 44px;
  --segmented-picker-stepper-hit-size: 44px;
  --segmented-picker-stepper-visual-inset: 0px;
  --segmented-picker-stepper-gap: -6px;
  --segmented-picker-selection: color-mix(in srgb, var(--accent) 20%, var(--surface-page));
  position: relative;
  display: inline-grid;
  width: max-content;
  max-width: 100%;
}

.segmented-picker.is-stretched {
  display: grid;
  width: 100%;
}

.segmented-picker-surface.field-control {
  display: flex;
  width: max-content;
  max-width: 100%;
  min-height: 48px;
  align-items: stretch;
  overflow: hidden;
  padding: 0;
  border-radius: var(--radius-control);
  background: var(--surface-raised);
  color: var(--ink);
  font-size: var(--font-size-body-large);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  line-height: 1;
}

.segmented-picker.is-stretched .segmented-picker-surface {
  width: 100%;
}

.segmented-picker-segment {
  --segmented-picker-cell-weight: 3;
  position: relative;
  display: grid;
  min-width: 44px;
  flex: 0 0 max-content;
  place-items: stretch;
  transition: background-color 140ms ease-out;
}

.segmented-picker-segment-month,
.segmented-picker-segment-year {
  --segmented-picker-cell-weight: 4;
}

.segmented-picker.is-stretched .segmented-picker-segment {
  min-width: 44px;
  flex-basis: 0;
  flex-grow: var(--segmented-picker-cell-weight);
}

.segmented-picker-segment + .segmented-picker-segment {
  border-left: 1px solid var(--border-hairline);
}

.segmented-picker-segment.is-active {
  z-index: 2;
  background: var(--surface-ghost);
}

.segmented-picker-value,
.segmented-picker-edit {
  width: 100%;
  min-width: 44px;
  min-height: 46px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  line-height: 1;
  text-align: center;
}

.segmented-picker-value {
  display: grid;
  place-items: center;
  cursor: text;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.segmented-picker-value > span {
  display: inline-grid;
  place-items: center;
  justify-self: center;
  border-radius: 5px;
  padding: 3px 4px;
}

.segmented-picker[data-picker-modality="keyboard"]
  .segmented-picker-segment.is-active
  .segmented-picker-value > span,
.segmented-picker[data-picker-modality="pointer"]
  .segmented-picker-segment.is-active
  .segmented-picker-value > span {
  background: var(--segmented-picker-selection);
}

.segmented-picker-edit {
  display: block;
  outline: 0;
  appearance: none;
}

.segmented-picker-edit::selection {
  background: var(--segmented-picker-selection);
  color: var(--ink);
}

.date-picker-controls.segmented-picker-surface {
  width: 280px;
  min-height: 64px;
  font-size: 24px;
}

.date-picker .segmented-picker-segment.is-active {
  background: transparent;
}

.date-picker .date-picker-controls > .segmented-picker-segment {
  flex: 0 0 44px;
}

.date-picker .date-picker-controls > .segmented-picker-segment-day {
  box-sizing: border-box;
  flex-basis: 49px;
  padding-left: 5px;
}

.date-picker .date-picker-controls > .segmented-picker-segment-year {
  flex: 1 1 0;
}

.date-picker .date-picker-controls > .segmented-picker-segment + .segmented-picker-segment {
  border-left: 0;
}

.date-picker .segmented-picker-value,
.date-picker .segmented-picker-edit {
  min-height: 62px;
  font-weight: 700;
}

.date-picker-slash {
  display: grid;
  flex: 0 0 12px;
  place-items: center;
  color: var(--ink);
  pointer-events: none;
}

.date-picker-slash::before {
  width: 2.5px;
  height: 1em;
  border-radius: 1px;
  background: currentColor;
  content: "";
  transform: rotate(20deg);
}

.date-picker-calendar-toggle {
  display: grid;
  min-width: 64px;
  flex: 0 0 64px;
  place-items: center;
  border: 0;
  padding: 0;
  background: var(--surface-sunken);
  color: var(--ink);
  cursor: pointer;
}

.date-picker-calendar-toggle .feather-calendar-icon {
  width: 20px;
  height: 20px;
  stroke-width: 2.4;
}

.date-picker-calendar-toggle:focus-visible {
  outline: var(--focus-ring);
  outline-offset: -4px;
}

.date-picker-calendar-toggle[aria-expanded="true"],
.date-picker-calendar-toggle:hover:not(:disabled) {
  background: var(--surface-ghost);
}

.date-picker-calendar-toggle:disabled {
  color: var(--ink-disabled);
  cursor: default;
}

.engagement-modal .date-picker-calendar-toggle {
  min-width: 48px;
  flex-basis: 48px;
}

.date-picker-calendar-popover {
  position: fixed;
  inset: auto;
  left: var(--date-calendar-left, 0);
  top: var(--date-calendar-top, 0);
  box-sizing: border-box;
  width: min(344px, 100vw);
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
  margin: 0;
  border: 1px solid var(--border-field);
  border-radius: 12px;
  padding: 12px 16px 8px;
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: var(--shadow-modal);
}

.date-picker-calendar-heading {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  margin-bottom: 8px;
}

.date-picker-calendar-heading p {
  margin: 0;
  font-weight: 700;
  text-align: center;
}

.date-picker-calendar-nav,
.date-picker-calendar-close {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: var(--radius-control);
  padding: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.date-picker-calendar-nav .right-chevron {
  width: 18px;
  height: 18px;
}

.date-picker-calendar-nav[data-date-calendar-step="-1"] .right-chevron {
  transform: rotate(180deg);
}

.date-picker-calendar-nav:disabled {
  color: var(--ink-disabled);
  cursor: default;
}

.date-picker-calendar-close {
  margin: 4px 0 0 auto;
}

.date-picker-calendar-grid {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.date-picker-calendar-grid th {
  height: 32px;
  color: var(--ink-muted);
  font-size: var(--font-size-small);
  font-weight: 700;
  text-align: center;
}

.date-picker-calendar-grid td {
  padding: 0;
  text-align: center;
}

.date-picker-calendar-day {
  display: grid;
  width: 100%;
  min-height: 44px;
  place-items: center;
  border: 0;
  border-radius: var(--radius-control);
  padding: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.date-picker-calendar-day[aria-pressed="true"] {
  background: var(--segmented-picker-selection);
  box-shadow: inset 0 0 0 2px var(--accent);
  font-weight: 700;
}

.date-picker-calendar-day:disabled {
  color: var(--ink-disabled);
  cursor: default;
}

.date-picker-calendar-nav:focus-visible,
.date-picker-calendar-close:focus-visible,
.date-picker-calendar-day:focus-visible {
  outline: var(--focus-ring);
  outline-offset: -3px;
}

@media (hover: hover) {
  .date-picker-calendar-nav:hover:not(:disabled),
  .date-picker-calendar-close:hover,
  .date-picker-calendar-day:hover:not(:disabled):not([aria-pressed="true"]) {
    background: var(--surface-ghost);
  }
}

@media (max-width: 340px) {
  .date-picker-calendar-popover {
    padding-inline: 5px;
  }
}

.time-picker-controls.segmented-picker-surface {
  width: 220px;
  min-height: 72px;
  font-size: 24px;
}

.time-picker .segmented-picker-segment.is-active {
  background: transparent;
}

.time-picker:not(.is-stretched)[data-hour-cycle="24"] .time-picker-controls {
  width: 148px;
}

.time-picker .time-picker-controls > .segmented-picker-segment {
  flex: 1 1 0;
}

.time-picker .time-picker-controls > .segmented-picker-segment + .segmented-picker-segment {
  border-left: 0;
}

.time-picker .segmented-picker-value,
.time-picker .segmented-picker-edit {
  min-height: 70px;
  font-weight: 700;
}

.time-picker .segmented-picker-segment-period,
.time-picker .segmented-picker-segment-period.is-active {
  background: var(--surface-sunken);
}

.time-picker .segmented-picker-segment-period .segmented-picker-value {
  text-transform: uppercase;
}

.time-picker-colon {
  display: grid;
  min-width: 8px;
  flex: 0 1 12px;
  align-content: center;
  justify-items: center;
  gap: 5px;
  color: var(--ink);
  pointer-events: none;
}

.time-picker-colon::before,
.time-picker-colon::after {
  width: 5px;
  height: 6px;
  border-radius: 1px;
  background: currentColor;
  content: "";
}

.segmented-picker-value:focus-visible {
  outline: 0;
}

.segmented-picker-steppers {
  position: fixed;
  inset: auto;
  left: var(--segmented-picker-popover-left, 0);
  top: var(--segmented-picker-popover-top, 0);
  width: var(--segmented-picker-popover-width, 44px);
  height: var(--segmented-picker-popover-height, 48px);
  overflow: visible;
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  pointer-events: none;
}

.segmented-picker-steppers[hidden] {
  display: none;
}

.segmented-picker-steppers[data-picker-popover-open] {
  display: block;
  animation: segmented-picker-controls-in 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

@supports (anchor-name: --segmented-picker-anchor) {
  .segmented-picker-segment {
    anchor-name: var(--segmented-picker-anchor-name);
  }

  .segmented-picker-steppers {
    position-anchor: var(--segmented-picker-anchor-name);
    left: anchor(left);
    top: anchor(top);
    width: anchor-size(width);
    height: anchor-size(height);
  }
}

.segmented-picker-stepper {
  position: absolute;
  left: 50%;
  display: grid;
  width: var(--segmented-picker-stepper-hit-size);
  height: var(--segmented-picker-stepper-hit-size);
  border: 0;
  appearance: none;
  padding: 0;
  place-items: center;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  pointer-events: auto;
  transform: translateX(-50%);
  transition:
    color 120ms ease-out,
    transform 120ms ease-out;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.segmented-picker-stepper::before {
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  width: var(--segmented-picker-stepper-size);
  height: var(--segmented-picker-stepper-size);
  border: 1px solid var(--surface-page);
  border-radius: 50%;
  background: var(--segmented-picker-selection);
  box-shadow: var(--shadow-content-card);
  content: "";
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition:
    border-color 120ms ease-out,
    background-color 120ms ease-out,
    box-shadow 160ms ease-out;
}

.segmented-picker-stepper-increment {
  bottom: calc(100% + var(--segmented-picker-stepper-gap) - var(--segmented-picker-stepper-visual-inset));
}

.segmented-picker-stepper-decrement {
  top: calc(100% + var(--segmented-picker-stepper-gap) - var(--segmented-picker-stepper-visual-inset));
}

.segmented-picker-chevron {
  position: relative;
  width: 18px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.25;
  pointer-events: none;
}

.segmented-picker-stepper:active,
.segmented-picker-stepper[data-pressed="true"] {
  color: var(--ink);
}

.segmented-picker-stepper:active::before,
.segmented-picker-stepper[data-pressed="true"]::before {
  background: var(--segmented-picker-selection);
}

.segmented-picker-stepper:disabled {
  color: var(--ink-disabled);
  cursor: default;
}

.segmented-picker-stepper:disabled::before {
  background: var(--surface-ghost-disabled);
}

.segmented-picker.is-disabled .segmented-picker-surface {
  background: var(--surface-ghost-disabled);
}

.segmented-picker.is-disabled .segmented-picker-value,
.segmented-picker.is-disabled .segmented-picker-edit {
  color: var(--ink-disabled);
  cursor: default;
}

.segmented-picker-segment.is-changing-up .segmented-picker-value > span {
  animation: segmented-picker-value-up 140ms cubic-bezier(0.22, 1, 0.36, 1);
}

.segmented-picker-segment.is-changing-down .segmented-picker-value > span {
  animation: segmented-picker-value-down 140ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes segmented-picker-value-up {
  from {
    transform: translateY(4px);
    opacity: 0.55;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes segmented-picker-controls-in {
  from {
    opacity: 0;
    transform: scale(0.94);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes segmented-picker-value-down {
  from {
    transform: translateY(-4px);
    opacity: 0.55;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (hover: hover) and (pointer: fine) {
  .segmented-picker-stepper:not(:disabled):hover {
    color: var(--ink);
  }

  .segmented-picker-stepper:not(:disabled):hover::before {
    border-color: var(--accent);
    background: var(--segmented-picker-selection);
    box-shadow: var(--shadow-content-card-hover);
  }
}

@media (pointer: fine) {
  .segmented-picker {
    --segmented-picker-stepper-size: 30.8px;
    /* Half the difference from the 44px hit target keeps the visible gap at -6px. */
    --segmented-picker-stepper-visual-inset: 6.6px;
  }

  .segmented-picker-chevron {
    transform: scale(0.7);
  }
}

@media (pointer: coarse), (any-pointer: coarse) {
  .segmented-picker[data-picker-modality="touch"] {
    --segmented-picker-stepper-size: 56px;
    --segmented-picker-stepper-hit-size: 56px;
    --segmented-picker-stepper-visual-inset: 0px;
  }

  .segmented-picker[data-picker-modality="touch"] .segmented-picker-chevron {
    transform: none;
  }
}

@media (max-width: 639px) {
  .guide-section > .guide-section-summary.card-section {
    padding-right: 20px;
  }

  .guide-section .guide-section-panel-inner {
    padding: 0 20px 33px
      calc(
        var(--card-horizontal-padding) + var(--guide-section-content-indent)
      );
  }

  .guide-management-sections-heading {
    padding-inline: 2px;
  }

  .guide-management-section-row.is-added {
    min-height: 0;
  }

  .guide-management-section-summary {
    min-height: 74px;
    padding-block: 15px;
    cursor: pointer;
  }

  .guide-management-section-summary.card-section {
    padding-right: 20px;
  }

  .guide-management-section-panel-inner {
    padding: 0 20px 33px
      calc(
        var(--card-horizontal-padding) + var(--guide-management-content-indent)
      );
  }

  .guide-management-add-engagement-label-full {
    display: none;
  }

  .guide-management-add-engagement-label-short {
    display: inline;
  }

  .guide-management-section-actions {
    position: relative;
    top: auto;
    right: auto;
    justify-content: flex-start;
    margin-top: 14px;
  }
}

@media (max-width: 399px) {
  .guides-collection-find-guide {
    width: 44px;
    padding: 0;
  }

  .guides-collection-find-guide-label {
    display: none;
  }

  .guide-section .guide-section-panel-inner {
    padding-left: var(--card-horizontal-padding);
  }

  .guide-management-section-panel-inner {
    padding-left: var(--card-horizontal-padding);
  }
}

@media (min-width: 760px) and (max-width: 1999px) {
  .home-hero {
    padding-block: 24px 48px;
  }

  .home-hero-layout {
    gap: 32px;
  }

  .home-hero h1 {
    max-width: 100%;
    margin-bottom: 20px;
    font-size: clamp(3.1rem, 4vw, var(--font-size-display-extra-large));
  }

  .home-hero .lead {
    max-width: 760px;
    font-size: var(--font-size-lead);
  }

  .home-hero .home-actions {
    margin-top: 24px;
  }
}

@media (min-width: 760px) and (max-width: 1999px) and (max-height: 899px) {
  .home-hero {
    padding-block: 16px 24px;
  }

  .home-hero-layout {
    gap: 16px;
  }

  .home-hero h1 {
    margin-bottom: 16px;
    font-size: clamp(var(--font-size-display-medium), 6svh, 3.1rem);
  }

  .home-hero .lead {
    font-size: var(--font-size-body-large);
  }

  .home-hero .home-actions {
    margin-top: 16px;
  }

  .home-scroll-cue {
    display: none;
  }
}

@media (max-width: 959px) {
  .home-story-layout,
  .home-story-layout-reverse {
    --home-layout-gap: 48px;
    grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
    gap: var(--home-layout-gap);
  }

  .home-story-layout-reverse {
    grid-template-columns: minmax(360px, 1.08fr) minmax(0, 0.92fr);
  }

  .home-story-layout.home-audiences-layout {
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    gap: 40px;
  }

  .home-audience-grid {
    aspect-ratio: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 10px;
  }

  .home-audience-grid li:first-child {
    grid-column: auto;
    grid-row: auto;
  }

  .home-audience-profile-featured {
    right: 10px;
    bottom: 10px;
    width: clamp(48px, 22%, 56px);
    padding: 2px;
    border: 0;
    border-radius: 8px;
  }

  .home-audience-profile-featured .home-audience-profile-status {
    display: none;
  }

  .home-audience-profile-featured .home-audience-profile-status-dot {
    --status-mark-size: 14px;
    --status-mark-icon-size: 10px;
    top: auto;
    right: auto;
    bottom: 3px;
    left: 3px;
  }

  .home-more-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 759px) {
  :is(.page-header-public-light, .page-header-public-full),
  :is(.page-header-public-light, .page-header-public-full) + main {
    --page-min-inline-padding: 32px;
  }

  .home-hero {
    min-height: 0;
    padding-block: 32px 48px;
  }

  .home-story {
    --home-story-padding: 24px;
  }

  .home-story-ties {
    padding-block-end: 20px;
  }

  .home-story-ties > .screen-section-container {
    width: 100%;
  }

  .card.home-story-ties-card {
    border-radius: 0;
  }

  .home-story-guide {
    padding-block-start: 32px;
  }

  .home-story-audiences {
    padding-block-start: 48px;
  }

  .home-more,
  .home-how-it-works,
  .home-closing {
    padding-block: 24px;
  }

  .home-more {
    padding-block-start: 20px;
  }

  .home-closing {
    padding-block-end: 32px;
  }

  .home-closing-inner {
    padding: 0 20px;
  }

  .home-story-layout,
  .home-story-layout-reverse {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .home-story-layout.home-audiences-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .home-story-ties .home-story-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .home-story-copy {
    max-width: 620px;
  }

  .home-story-layout-reverse .home-story-copy,
  .home-story-layout-reverse > :last-child {
    grid-column: 1;
    grid-row: auto;
  }

  .home-story-layout-reverse .home-story-copy {
    grid-row: 1;
  }

  .home-story-layout-reverse > :last-child {
    grid-row: 2;
  }

  .home-guide-preview-stage {
    width: min(calc(100% + 32px), 640px);
    margin-inline: 0;
    justify-self: center;
  }

  .home-guide-preview-open {
    right: calc(4% - 22px);
  }

  .home-more-card:nth-child(2),
  .home-more-card:nth-child(3) {
    transition-delay: 0ms;
  }

  .home-how-it-works-heading {
    margin-bottom: 36px;
    text-align: left;
  }

  .home-how-it-works-timeline {
    --home-timeline-gap: 32px;
    grid-template-columns: minmax(0, 1fr);
  }

  .home-how-it-works-step {
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 20px;
    justify-items: start;
    text-align: left;
  }

  .home-how-it-works-step:not(:last-child)::after {
    top: 24px;
    bottom: calc(-1 * var(--home-timeline-gap) - 24px);
    left: 23px;
    width: 2px;
    height: auto;
  }

  .home-how-it-works-marker {
    grid-row: 1 / span 2;
  }

  .home-how-it-works-step h3 {
    margin: 0 0 8px;
  }

  .home-how-it-works-step p {
    max-width: 420px;
  }

  .home-how-it-works-step:nth-child(2),
  .home-how-it-works-step:nth-child(3) {
    transition-delay: 0ms;
  }
}

@media (max-width: 609px) {
  .home-more-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .home-more-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    column-gap: 20px;
  }

  .home-more-marker {
    grid-row: 1 / span 2;
    margin-bottom: 0;
  }

  .home-more-card h3,
  .home-more-card p {
    grid-column: 2;
  }
}

@media (max-width: 519px) {
  .home-hero-layout {
    gap: 48px;
  }

  .home-hero h1 {
    font-size: clamp(var(--font-size-display-medium), 11vw, 3.1rem);
  }

  .home-hero h1,
  .home-story h2,
  .home-more h2,
  .home-how-it-works h2,
  .home-closing h2 {
    letter-spacing: var(--letter-spacing-display);
    line-height: var(--line-height-display);
  }

  .home-hero .lead,
  .home-story-copy > p:last-of-type {
    font-size: var(--font-size-body-large);
  }

  .home-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .home-actions .button {
    width: 100%;
  }

  .home-hero .home-actions {
    width: 100%;
  }

  .home-story-layout,
  .home-story-layout-reverse {
    gap: 48px;
  }

  .home-story h2,
  .home-more h2,
  .home-how-it-works h2,
  .home-closing h2 {
    font-size: clamp(2.65rem, 13vw, 3.45rem);
  }

  .home-story-guide h2 {
    font-size: clamp(2.35rem, 11vw, 3rem);
  }

  .home-story-audiences h2 {
    font-size: clamp(2.35rem, 11vw, 3rem);
  }

  .home-audience-grid li {
    border-radius: 14px;
  }

  .home-audience-grid figcaption {
    top: 8px;
    right: 8px;
    left: 8px;
    max-width: calc(100% - 16px);
    padding: 5px 7px;
  }

  .home-audience-profile {
    right: 8px;
    bottom: 8px;
  }

  .home-guide-preview-large {
    width: 96%;
  }

  .home-guide-preview-phone {
    right: 2%;
    width: clamp(110px, 32%, 142px);
  }

  .home-more-heading {
    margin-bottom: 42px;
  }

  .home-closing-action {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .home-footer {
    padding-block: 60px 36px;
  }

  .home-footer-top {
    min-height: 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    padding-bottom: 40px;
  }

  .home-footer-logo img {
    width: 84px;
    height: auto;
  }

  .home-footer-top p {
    max-width: 310px;
    text-align: center;
  }

  .home-footer-navigation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 799px) {
  .home-sample-guide-body .screen-section-container {
    width: calc(100% - 2 * var(--page-min-inline-padding));
  }

  .home-sample-guide-body .guide-layout {
    padding-bottom: max(32px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 519px) {
  .guide-sample-map {
    height: 240px;
    padding: 14px;
  }
}

@media (max-width: 359px) {
  .home-hero {
    --page-min-inline-padding: 20px;
  }

  .home-story-ties {
    --page-min-inline-padding: 20px;
  }

  .home-hero-layout {
    gap: 32px;
  }

  .home-hero h1 {
    font-size: var(--font-size-display-small);
  }

  .home-hero .lead {
    font-size: var(--font-size-body);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .home-motion-ready .home-reveal,
  .home-motion-ready .home-reveal[data-home-parallax],
  .home-motion-ready .home-checklist-item {
    opacity: 1;
    transform: none;
    translate: none;
  }

  .home-checklist-item.is-checked,
  .home-scroll-cue-icon {
    animation: none;
  }

  .home-network-car {
    display: none;
  }
}

/* The canonical guide layout contains only generic instructional content here. */
.guide-access-main {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - var(--page-header-height));
  padding-block: 0 64px;
}
.guide-access-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: clip;
  pointer-events: none;
  user-select: none;
}
.guide-access-backdrop > .screen-section-container {
  filter: blur(7px);
  opacity: 0.64;
}
.guide-access-backdrop .identity-rail,
.guide-access-backdrop .visit-feedback-cta { position: static; }
.guide-access-panel {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.12fr) 248px;
  max-width: 1120px;
  margin-inline: auto;
  background: var(--surface-raised);
  border-radius: 0 0 28px 28px;
  overflow: hidden;
  box-shadow: var(--shadow-modal);
}
.guide-access-introduction { padding: 48px 24px 48px 44px; }
.guide-access-introduction h1 {
  font-size: var(--font-size-display-small);
  line-height: 1.25;
  margin-block: 20px 24px;
}
.guide-access-introduction .eyebrow { color: var(--accent); }
.guide-access-form-region { padding: 48px 40px 48px 20px; min-width: 0; }
.guide-access-form { --stack-gap: 24px; }
.guide-access-form > .stack { --stack-gap: 8px; }
.guide-access-form .text-area { min-height: 88px; resize: vertical; }
.guide-access-form .button { margin-top: 8px; }
.guide-access-form-region .form-error,
.guide-access-form-region .cue { margin-bottom: 24px; }
.guide-access-email-label { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.guide-access-email-label .form-meta { font-size: var(--font-size-small); }
.guide-access-identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 48px 32px;
  background: var(--surface-ghost);
}
.guide-access-identity .avatar { width: 100%; height: auto; aspect-ratio: 1; }
.guide-access-identity h2 { font: 700 var(--font-size-large)/1.4 var(--font-text); margin-block: 0 4px; }
.guide-access-identity p { margin: 0; }
.guide-access-identity a { display: inline-flex; align-items: center; min-height: 44px; }
.guide-access-panel-confirmation { max-width: 880px; }
@media (min-width: 1021px) {
  .guide-access-panel-confirmation { grid-template-columns: minmax(0, 1fr) 248px; }
  .guide-access-panel-confirmation .guide-access-introduction { padding: 48px 44px 0; }
  .guide-access-panel-confirmation .guide-access-form-region { grid-column: 1; padding: 24px 44px 48px; }
  .guide-access-panel-confirmation .guide-access-identity { grid-column: 2; grid-row: 1 / 3; }
}
@media (max-width: 1020px) {
  .guide-access-panel { grid-template-columns: minmax(0, 1fr) 240px; }
  .guide-access-introduction { padding: 32px 32px 0; }
  .guide-access-form-region { padding: 24px 32px 32px; grid-column: 1; }
  .guide-access-identity { grid-column: 2; grid-row: 1 / 3; padding: 36px 24px; }
}
@media (max-width: 620px) {
  .guide-access-main { padding-block: 20px 40px; }
  .guide-access-panel { display: flex; flex-direction: column; border-radius: 20px; }
  .guide-access-introduction { padding: 28px 24px 0; }
  .guide-access-introduction h1 { font-size: 1.875rem; }
  .guide-access-form-region { padding: 24px; }
  .guide-access-identity { padding: 24px; display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 12px 20px; }
  .guide-access-identity a { grid-column: 1 / -1; }
}

.guide-visitor-signed-in {
  --guide-toolbar-offset: 0px;
}

.guide-visitor-signed-in .guide-layout {
  padding-top: 0;
}

.guide-toolbar-visitor .guide-toolbar-actions {
  margin-inline-start: auto;
}

.guide-toolbar .guide-follow-control {
  align-self: center;
}

.guide-toolbar .guide-follow-control .button {
  min-height: 44px;
  font-size: var(--font-size-button);
}

@media (max-width: 799px) {
  .guide-visitor-signed-in .sidebar {
    display: none;
  }
}

@media (min-width: 968px) {
  .guide-visitor-signed-in {
    --guide-toolbar-offset: 10px;
  }
}

@media (max-width: 479px) {
  .guide-toolbar .back-button {
    min-width: 44px;
    flex: 0 0 auto;
    justify-content: center;
    gap: 0;
  }

  .guide-toolbar .back-button > span {
    display: none;
  }

  .guide-toolbar-visitor {
    gap: 8px;
  }

}

.guide-layout.guide-layout-signed-in {
  grid-template-rows: auto;
  padding-bottom: 64px;
}

.guide-layout-signed-in .guide-content {
  grid-column: auto;
  grid-row: auto;
}

.guide-take-with-you-card {
  margin-top: 32px;
}

.guide-take-with-you-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 184px;
  align-items: center;
  gap: 24px;
}

.guide-take-with-you-content h2 {
  font-family: var(--font-text);
  font-size: var(--font-size-lead);
}

.guide-take-with-you-content p {
  color: var(--ink-body);
}

.guide-take-with-you-content p:last-child {
  margin-bottom: 0;
}

.guide-take-with-you-content .guide-qr-code {
  width: 184px;
  max-width: 100%;
  height: 184px;
}

@media (max-width: 479px) {
  .guide-take-with-you-content {
    grid-template-columns: minmax(0, 1fr);
  }

  .guide-take-with-you-content .guide-qr-code {
    justify-self: center;
  }
}

/* The icon keeps its full target without increasing the standard label height. */
.form-label-with-tooltip {
  position: relative;
  padding-inline-end: 52px;
  margin-bottom: 8px;
}

.form-label-with-tooltip > label {
  margin-bottom: 0;
}

.form-label-with-tooltip > .tooltip-trigger {
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
}

.tooltip-trigger {
  background: transparent;
  color: var(--ink-muted);
  opacity: 1;
}

.tooltip-trigger:hover:not(:disabled),
.tooltip-trigger:focus-visible {
  background: transparent;
  color: var(--ink);
}

.tooltip {
  position: fixed;
  inset: auto;
  margin: 0;
  width: max-content;
  max-width: min(320px, calc(100vw - 32px));
  padding: 12px 16px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-control);
  background: var(--surface-raised);
  color: var(--ink-body);
  font: inherit;
  font-size: var(--font-size-body);
  line-height: 1.5;
  box-shadow: var(--shadow-content-card-hover);
  overflow-wrap: anywhere;
}

/* Quiet, single-purpose pages reached from reservation emails. */
.reservation-signup-main,
.visitor-reservation-main {
  padding-block: 48px;
}

.reservation-signup-panel {
  max-width: 560px;
  margin-inline: auto;
  --stack-gap: 24px;
}

.visitor-reservation-panel {
  max-width: 640px;
  padding-top: 56px;
  margin-inline: auto;
}

.visitor-reservation-panel > h1 {
  margin-bottom: 12px;
  font-size: var(--font-size-display-small);
}

.visitor-reservation-subtitle {
  margin: 0 0 28px;
}

.visitor-reservation-message {
  margin-bottom: 20px;
}

.visitor-reservation-list {
  display: grid;
  gap: 16px;
}

.visitor-reservation-card-heading {
  --cluster-align: flex-start;
}

.visitor-reservation-card-identity {
  min-width: 0;
  --cluster-gap: 14px;
}

.avatar-visitor-reservation {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: 12px;
  font-size: var(--font-size-body-large);
}

.visitor-reservation-details {
  margin: 20px 0 0;
}

.visitor-reservation-details .definition {
  margin-top: 0;
}

.visitor-reservation-when .definition dd {
  font-size: var(--font-size-body-large);
}

.visitor-reservation-calendar-action {
  margin-top: 12px;
}

.visitor-reservation-calendar-action .button-icon {
  width: 14px;
  height: 14px;
}

.visitor-reservation-card-actions {
  --cluster-gap: 12px;
}

.visitor-reservation-cancel-trigger {
  margin-inline-start: auto;
}

.visitor-reservation-guide-action-compact {
  display: none;
}

.visitor-reservation-guide-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-top: 24px;
}

.visitor-reservation-empty p {
  margin: 0;
}

.visitor-reservation-cancel-body .lead {
  margin-bottom: 16px;
}

@media (max-width: 479px) {
  .visitor-reservation-card-heading {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: start;
    column-gap: 14px;
    row-gap: 8px;
  }

  .visitor-reservation-card-identity {
    display: contents;
  }

  .visitor-reservation-card-heading .avatar {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .visitor-reservation-card-heading h2 {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .visitor-reservation-card-heading > .status-badge {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
  }

  .visitor-reservation-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .visitor-reservation-card-actions > * {
    width: 100%;
    min-width: 0;
  }

  .visitor-reservation-card-actions > :only-child {
    grid-column: 1 / -1;
  }

  .visitor-reservation-cancel-trigger {
    margin-inline-start: 0;
  }

  .visitor-reservation-guide-action-wide {
    display: none;
  }

  .visitor-reservation-guide-action-compact {
    display: inline;
  }

}

.reservation-signup-panel .authentication-body,
.reservation-signup-panel .modal-footer {
  padding-inline: 0;
}

/* Visiting-time editor. The guide's read-only hours use separate primitives. */
.modal.best-time-modal {
  width: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}
.best-time-form {
  --best-time-mask: rgb(34 39 46 / 66%);
  --best-time-sign-background: var(--status-positive);
  --best-time-sign-border: color-mix(in srgb, var(--status-positive) 84%, var(--ink));
  --best-time-sign-shadow: 0 10px 18px rgb(0 0 0 / 18%);
  --best-time-overview-sign-width: 70px;
  --best-time-overview-sign-height: 105px;
  --best-time-overview-sign-gap: 10px;
  --best-time-day-gap: 16px;
  --best-time-day-inline-padding: 20px;
  --best-time-day-width: calc(var(--best-time-overview-sign-width) + var(--best-time-overview-sign-width) + var(--best-time-overview-sign-width) + var(--best-time-overview-sign-gap) + var(--best-time-overview-sign-gap) + var(--best-time-day-inline-padding) + var(--best-time-day-inline-padding));
  --best-time-modal-width: calc(var(--best-time-day-width) + var(--best-time-day-width) + var(--best-time-day-width) + var(--best-time-day-width) + var(--best-time-day-gap) + var(--best-time-day-gap) + var(--best-time-day-gap) + var(--modal-inline-padding) + var(--modal-inline-padding));
  --best-time-panel-width: clamp(340px, 38vw, 480px);
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.best-time-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--best-time-modal-width);
  max-height: 100%;
  min-height: 0;
  border-radius: 14px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}

.best-time-overview {
  display: flex;
  min-height: 0;
  flex-direction: column;
}
.best-time-form[data-mode] .best-time-overview > .modal-headline-close {
  visibility: hidden;
}
.best-time-overview-body {
  overflow: auto;
}
.best-time-overview-content {
  padding: 0 max(var(--modal-inline-padding), env(safe-area-inset-right)) 16px max(var(--modal-inline-padding), env(safe-area-inset-left));
}
.best-time-intro {
  margin: 8px 0 0;
  color: var(--ink-body);
}
.best-time-tap-copy {
  display: none;
}
@media (pointer: coarse) {
  .best-time-click-copy {
  display: none;
}
  .best-time-tap-copy {
  display: inline;
}
}
.best-time-days {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--best-time-day-gap);
}
.best-time-day {
  min-width: 0;
  min-height: 203px;
  padding: 16px var(--best-time-day-inline-padding) 24px;
  background: var(--surface-sunken);
  border-radius: var(--radius-control);
}
.best-time-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}
.best-time-day-header h4 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--ink);
}
.best-time-day-header .icon-button {
  flex: 0 0 44px;
  color: var(--accent);
}
.best-time-day-header .nav-icon {
  width: 28px;
  height: 28px;
}
.best-time-empty {
  display: grid;
  min-height: var(--best-time-overview-sign-height);
  place-items: center;
  margin: 0;
  text-align: center;
  color: var(--ink-body);
}
.best-time-periods {
  display: flex;
  flex-wrap: wrap;
  gap: var(--best-time-overview-sign-gap);
}
.best-time-period-item {
  position: relative;
}
.best-time-period {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}
.best-time-period-delete {
  position: absolute;
  z-index: 1;
  top: -13px;
  right: -13px;
  display: none;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  box-shadow: var(--shadow-content-card);
}
.best-time-period-delete .x-icon {
  display: none;
}
.best-time-period-delete::before,
.best-time-period-delete::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}
.best-time-period-delete::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.best-time-period-delete::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
@media (hover: hover) and (pointer: fine) {
  .best-time-period-delete {
  display: grid;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: transform 160ms ease-out, box-shadow 160ms ease-out, opacity 160ms ease-out;
  transform-origin: center;
}
  .best-time-period {
  transition: transform 160ms ease-out;
  transform-origin: center;
}
  .best-time-period-item:hover .best-time-period-delete {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
  .best-time-period-delete:hover {
  transform: scale(1.15);
  box-shadow: var(--shadow-content-card-hover);
}
  .best-time-period-item:hover .best-time-period {
  transform: scale(1.08);
}
}
.best-time-sign {
  display: flex;
  width: 3.5em;
  height: 5.25em;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .18em;
  border: .14em solid var(--best-time-sign-border);
  border-radius: .48em;
  background: var(--best-time-sign-background);
  color: #fff;
  font-family: var(--font-text);
  font-size: 24px;
  line-height: 1;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.045em;
  text-align: center;
  transform-origin: top left;
}
.best-time-day .best-time-sign {
  font-size: 20px;
}
.best-time-sign-boundary {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.best-time-sign-clock {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.best-time-sign-period {
  font-size: .7em;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  line-height: 1.05;
}
.best-time-sign-period:empty {
  display: none;
}
.best-time-sign-arrow {
  display: block;
  width: 0;
  height: 0;
  border-left: .26em solid transparent;
  border-right: .26em solid transparent;
  border-top: .32em solid currentColor;
}
.best-time-sign-arrow {
  margin: .15em 0;
  color: rgb(255 255 255 / 65%);
}
.best-time-overview-footer {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  flex: none;
  padding: 16px var(--modal-inline-padding) 24px;
}
.best-time-overview-footer .button {
  min-width: 130px;
}
.best-time-overview-footer [data-best-time-delete-all] {
  margin-right: auto;
}
.best-time-editor {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  grid-template-columns: var(--best-time-panel-width) minmax(0, 1fr);
  isolation: isolate;
}
.best-time-mask {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--best-time-mask);
}
.best-time-editor-form {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  background: var(--surface-raised);
}
.best-time-sheet-close {
  position: absolute;
  z-index: 1;
  top: 20px;
  right: 20px;
}
.best-time-editor-body {
  display: flex;
  padding: 36px;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  overflow: auto;
}
.best-time-editor-body h2 {
  margin: 0;
  font-size: 1.7rem;
}
.best-time-editor-range {
  display: grid;
  align-content: center;
  justify-content: center;
  gap: 16px;
  flex: 1 1 auto;
  min-height: max-content;
  margin: 16px auto;
}
.best-time-editor-range .form-label {
  display: block;
  margin-bottom: 12px;
}
.best-time-editor-range .time-picker {
  width: 190px;
  max-width: 100%;
}
.best-time-editor-range .time-picker-controls.segmented-picker-surface {
  min-height: 60px;
}
.best-time-editor-range .time-picker .segmented-picker-value,
.best-time-editor-range .time-picker .segmented-picker-edit {
  min-height: 58px;
}
@media (min-width: 1024px) {
  .best-time-editor-range > [data-best-time-start],
  .best-time-editor-range > [data-best-time-end] {
    display: grid;
    grid-template-columns: 60px 190px;
    align-items: center;
    column-gap: 16px;
  }
  .best-time-editor-range .form-label {
    margin-bottom: 0;
  }
}
.best-time-duration {
  margin: 4px 0 0;
  color: var(--status-positive);
  font-size: var(--font-size-body);
  font-weight: 650;
}
.best-time-duration.is-invalid {
  color: var(--attention);
}
.best-time-extra-days {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.best-time-also-add {
  flex: none;
  margin-top: auto;
}
.best-time-also-add legend {
  margin-bottom: 14px;
}
.best-time-extra-day {
  cursor: pointer;
  min-width: 0;
}
.best-time-extra-day .button {
  width: 100%;
  min-height: 48px;
  padding: 8px;
  gap: 4px;
}
.best-time-extra-day .tick-icon {
  display: none;
  width: 16px;
  height: 16px;
}

.best-time-extra-day:has(input:checked) .tick-icon {
  display: block;
}
.best-time-extra-day:has(input:focus-visible) .button {
  outline: var(--focus-ring);
  outline-offset: 3px;
}
.best-time-editor-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  flex: none;
  padding: 20px 36px max(24px, env(safe-area-inset-bottom));
}
.best-time-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 80px 24px 32px;
}
.best-time-preview .best-time-sign {
  font-size: clamp(40px, min(5vw, 10vh), 80px);
  box-shadow: var(--best-time-sign-shadow);
}
.best-time-delete.button {
  min-width: 140px;
  color: #fff;
  border-color: rgb(255 255 255 / 40%);
}
.best-time-delete .trash-icon {
  width: 18px;
  height: 18px;
}
.best-time-delete:focus-visible {
  outline-color: #fff;
}
.best-time-form[data-mode="add"] .best-time-preview, .best-time-form[data-mode="add"] [data-best-time-save-label], .best-time-form[data-mode="edit"] [data-best-time-add-label] {
  display: none;
}
.best-time-form[aria-busy="true"] .best-time-editor {
  cursor: progress;
}
[data-best-time-error]:empty, [data-best-time-overview-error]:empty {
  display: none;
}
[data-best-time-error] {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 12px;
}
@media (max-width: 1247px) {
  .best-time-days {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 961px) {
  .best-time-days {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 680px) {
  .best-time-form {
  padding: 0;
}
  .best-time-stage {
  height: 100%;
  width: 100%;
  border-radius: 0;
}

  .best-time-overview {
  flex: 1 1 auto;
}
  .best-time-overview-footer {
  padding: 12px max(var(--modal-inline-padding), env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(var(--modal-inline-padding), env(safe-area-inset-left));
}
  .best-time-overview-footer .button {
  width: 100%;
}
  .best-time-overview-footer:has([data-best-time-delete-all]) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
  .best-time-days {
  grid-template-columns: minmax(0, 1fr);
}
  .best-time-day {
  min-height: 0;
  padding: 12px 16px 20px;
}
  .best-time-day.is-empty {
  padding-bottom: 12px;
}
  .best-time-day.is-empty .best-time-day-header {
  margin-bottom: 0;
}
  .best-time-empty {
  min-height: 0;
  justify-items: start;
  text-align: start;
  font-size: var(--font-size-small);
}
  .best-time-editor {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
  .best-time-preview {
  order: -1;
  flex: 1 1 auto;
  min-height: 0;
  padding: 20px 24px;
  flex-direction: column;
  gap: 16px;
  pointer-events: none;
}
  .best-time-preview .best-time-sign {
  font-size: clamp(28px, 8vw, 40px);
}
  .best-time-delete.button {
  min-width: 0;
  min-height: 52px;
  pointer-events: auto;
}
  .best-time-editor-form {
  flex: 0 1 auto;
  max-height: calc(100% - 170px);
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}
  .best-time-form[data-mode="add"] .best-time-editor-form {
  max-height: 100%;
}
  .best-time-sheet-close {
  position: absolute;
  z-index: 1;
  top: 16px;
  right: 16px;
}
  .best-time-editor-body {
  flex: 0 1 auto;
  overflow: auto;
  padding: 24px 24px 32px;
}
  .best-time-editor-body h2 {
  padding-right: 52px;
}
  .best-time-editor-range {
  flex: none;
  min-height: 0;
  margin: 28px auto;
  gap: 16px;
}
  .best-time-editor-footer {
  flex: none;
  padding: 16px 24px max(20px, env(safe-area-inset-bottom));
  background: var(--surface-raised);
}
}
@media (min-width: 360px) and (max-width: 680px) {
  .best-time-editor-range {
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
}