/* /time-zone-meeting-planner — a single responsive page combining the desktop
   planner (multi-city-planner.css/.js, built at /worldtimebuddy-v2) and
   the touch-first mobile planner (multi-city-planner-mobile.css/.js,
   built at /worldtimebuddy-v2-mobile). Both markups are always in the
   DOM and both scripts always fully initialize — this file is the only
   thing deciding which one is visible, at the same 900px breakpoint the
   desktop planner already used for its old "please use desktop" notice.
   (An earlier version gated each script to only initialize for its own
   shell, as an optimization — removed because it broke on orientation
   change: CSS switches shells instantly on rotation, but that one-time
   JS check never re-ran, leaving the newly-shown shell never actually
   initialized.) */
@media (min-width: 901px) {
  .v3-mobile-shell { display: none; }
}
@media (max-width: 900px) {
  .v3-desktop-shell { display: none; }
}

/* ---- page heading, shared by both shells ---- */
.v3-page-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--foreground);
  margin: 40px 24px 4px;
}
.v3-page-subtitle {
  font-size: 0.9rem;
  color: var(--muted-foreground);
  margin: 0 24px 20px;
}

/* ---- landing content, below the planner tool ---- */
.v3-landing {
  max-width: 1100px;
  margin: 64px auto;
  padding: 0 24px;
}
.v3-landing-section + .v3-landing-section {
  margin-top: 56px;
  padding-top: 56px;
  border-top: 1px solid var(--border);
}
.v3-landing-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--foreground);
  text-align: center;
  margin: 0 0 32px;
}

.v3-landing-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.v3-landing-step { text-align: center; }
.v3-landing-step-text code {
  background: var(--accent);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.85em;
}
.v3-landing-step-num {
  width: 32px;
  height: 32px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--foreground);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
}
.v3-landing-step-title { font-weight: 600; color: var(--foreground); margin: 0 0 4px; }
.v3-landing-step-text { color: var(--muted-foreground); font-size: 0.88rem; margin: 0; line-height: 1.4; }

.v3-landing-section-description {
  color: var(--muted-foreground);
  font-size: 0.92rem;
  text-align: center;
  max-width: 640px;
  margin: -16px auto 28px;
  line-height: 1.5;
}

.v3-landing-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.v3-landing-feature {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.v3-landing-feature-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius) - 4px);
  margin: 0 0 14px;
}
.v3-landing-feature-title { font-weight: 600; color: var(--foreground); margin: 0 0 6px; font-size: 0.95rem; }
.v3-landing-feature-text { color: var(--muted-foreground); font-size: 0.85rem; margin: 0; line-height: 1.45; }

.v3-landing-devices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.v3-landing-device {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
}
.v3-landing-device-title { font-weight: 700; color: var(--foreground); margin: 0 0 8px; font-size: 1.05rem; }
.v3-landing-device-text { color: var(--muted-foreground); font-size: 0.9rem; margin: 0; line-height: 1.5; }

.v3-landing-inspiration-text {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  color: var(--muted-foreground);
  font-size: 0.92rem;
  line-height: 1.6;
}
.v3-landing-inspiration-text a {
  color: var(--foreground);
  font-weight: 600;
  text-decoration: underline;
}

@media (max-width: 900px) {
  .v3-landing-steps,
  .v3-landing-features,
  .v3-landing-devices {
    grid-template-columns: 1fr;
  }
}