/* Landing page — classed design (split-seam).
   Everything is scoped under `.lp` so these rules never leak into the rest
   of the app. Fixed hex values keep the design intact in dark mode (where
   the --avi-* tokens flip). */

.lp {
  background: #f7f2e9;
  color: #241f19;
  font-family: 'Gabarito', system-ui, sans-serif;
  min-height: 100vh;
  padding: clamp(20px, 3vw, 40px);
}

/* The hidden attribute must always win — several components set display
   explicitly (e.g. .lp-login-form, .lp-login-field) and without this the
   "check your inbox" swap (form hidden → note shown) would never visually
   take effect. */
[hidden] {
  display: none !important;
}

/* ── Element defaults inside .lp ── */
.lp header,
.lp main,
.lp footer {
  width: 100%;
  margin: 0;
  padding: 0;
}
.lp footer {
  border-top: none;
  font-size: 13px;
  color: #8a7c6a;
}
.lp a {
  color: #241f19;
}

/* ── Top bar ── */
.lp-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 16px 40px;
}
.lp-topbar-meta {
  font-size: 13px;
  font-weight: 600;
  color: #8a7c6a;
  justify-self: start;
}
.lp-logo {
  font-weight: 900;
  font-size: 21px;
  letter-spacing: -0.02em;
  color: #241f19;
  text-decoration: none;
  justify-self: center;
  transition: opacity 0.15s;
}
.lp-logo:hover { opacity: 0.75; }
.lp-logo-dot { color: #c2603e; }
.lp-topbar-link {
  justify-self: end;
  color: #241f19;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: color 0.15s;
}
.lp-topbar-link:hover { color: #c2603e; }

/* ── Split cards ── */
.lp-split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.lp-card {
  text-decoration: none;
  padding: 64px 56px 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 520px;
  box-sizing: border-box;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lp-card:hover { transform: translateY(-3px); }
.lp-card-seeker {
  background: #17251f;
  color: #f2efe6;
}
.lp-card-seeker .lp-card-title { color: #fff; }
.lp-card-seeker:hover { box-shadow: 0 14px 34px rgba(23, 37, 31, 0.24); }
.lp-card-provider {
  background: #eadfc9;
  color: #241f19;
  align-items: flex-end;
  text-align: right;
}
.lp-card-provider:hover { box-shadow: 0 14px 34px rgba(36, 31, 25, 0.14); }

.lp-kicker {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9fb8a9;
}
.lp-kicker-coral { color: #b3552f; }

.lp-card-title {
  font-weight: 800;
  font-size: 72px;
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0;
}

.lp-card-body {
  font-size: 17px;
  line-height: 1.55;
  max-width: 360px;
}
.lp-card-seeker .lp-card-body { color: #b9c8be; }
.lp-card-provider .lp-card-body { color: #6b5d48; }

.lp-card-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.lp-card-foot-right { align-items: flex-end; }
.lp-card-meta { font-size: 13px; color: #9fb8a9; }
.lp-card-meta-provider { color: #8a7c6a; }

.lp-cta {
  background: #f2efe6;
  color: #17251f;
  font-weight: 700;
  font-size: 16px;
  padding: 16px 32px;
  border-radius: 999px;
}
.lp-cta-dark {
  background: #241f19;
  color: #f2efe6;
}

/* ── Centre seam orb ── */
.lp-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e8b49a, #c2603e 62%, #9e4a2e);
  border: 5px solid #f7f2e9;
  box-shadow: rgba(194, 96, 62, 0.12) 0 0 0 12px;
  z-index: 2;
}

/* ── Trust bar ── */
.lp-trustbar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  padding: 18px 40px;
  font-size: 13px;
  font-weight: 600;
  color: #8a7c6a;
}
.lp-dot { color: #8a7c6a; }
.lp-faq-link {
  color: #241f19;
  text-decoration: none;
  transition: color 0.15s;
}
.lp-faq-link:hover { color: #c2603e; }

/* ── Fragment panels (htmx swaps these into #lp-split) ── */
.lp-panel {
  grid-column: 1 / -1;
  min-height: 520px;
  padding: 72px 64px 56px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lp-panel-seeker { background: #17251f; color: #f2efe6; }
.lp-panel-provider { background: #eadfc9; color: #241f19; }
.lp-panel-title {
  margin: 0;
  font-weight: 800;
  font-size: 52px;
  line-height: 1;
  letter-spacing: -0.03em;
}
.lp-panel-body {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  max-width: 420px;
  color: #b9c8be;
}
.lp-panel-provider .lp-panel-body { color: #6b5d48; }

.lp-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
  max-width: 420px;
}
.lp-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 17px 20px;
  border-radius: 14px;
  background: rgba(242, 239, 232, 0.14);
  border: 1px solid rgba(242, 239, 232, 0.34);
  color: #f2efe6;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  transition: background 0.2s, transform 0.15s;
}
.lp-option:hover { background: rgba(242, 239, 232, 0.22); transform: translateY(-1px); }
.lp-option-arrow { color: #c2603e; flex-shrink: 0; }
.lp-panel-provider .lp-option {
  background: #241f19;
  border: none;
  color: #f2efe6;
}
.lp-panel-provider .lp-option:hover { background: #332c24; }

.lp-panel-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 22px;
}
.lp-panel-foot-right { justify-content: flex-end; }
.lp-back {
  background: none;
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  cursor: pointer;
  font-family: 'Gabarito', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #8a7c6a;
  transition: color 0.15s;
}
.lp-panel-seeker .lp-back { color: #9fb8a9; }
.lp-back:hover { color: #c2603e; }

.lp.htmx-swapping { opacity: 0.55; transition: opacity 0.15s; }

/* ── Provider login (email-only: one field, magic link, straight in) ── */
.lp-main-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 40px 0;
}
.lp-login {
  width: 100%;
  max-width: 460px;
  background: #eadfc9;
  color: #241f19;
  border-radius: 20px;
  padding: 48px 44px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lp-login .lp-kicker-coral { color: #b3552f; }
.lp-login-title {
  margin: 0;
  font-weight: 800;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #241f19;
}
.lp-login-body {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: #6b5d48;
}
.lp-login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}
.lp-login-field { display: flex; flex-direction: column; gap: 8px; }
.lp-login-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b5d48;
}
.lp-login-input {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(36, 31, 25, 0.2);
  background: rgba(247, 242, 233, 0.6);
  color: #241f19;
  font-family: 'Gabarito', system-ui, sans-serif;
  font-size: 16px;
  outline: none;
  transition: border-color 0.15s;
}
.lp-login-input::placeholder { color: #8a7c6a; }
.lp-login-input:focus { border-color: #c2603e; }
.lp-login-submit { border: none; cursor: pointer; margin-top: 4px; }
.lp-login-submit:disabled { opacity: 0.6; cursor: default; }
.lp-login-note {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: #6b5d48;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .lp-card { padding: 48px 36px 40px; }
  .lp-card-title { font-size: 56px; }
  .lp-panel { padding: 48px 36px 40px; }
  .lp-panel-title { font-size: 44px; }
  .lp-topbar { padding: 14px 24px; }
  .lp-trustbar { padding: 16px 24px; gap: 20px; }
}
@media (max-width: 760px) {
  .lp { padding: 14px; }
  .lp-topbar { padding: 12px 16px; }
  .lp-split { grid-template-columns: 1fr; }
  .lp-card {
    min-height: 0;
    padding: 48px 28px 36px;
  }
  .lp-card-seeker { padding-bottom: 92px; }
  .lp-card-provider { padding-top: 92px; }
  .lp-card-title { font-size: 48px; }
  .lp-card-body { font-size: 15.5px; }
  .lp-panel { min-height: 0; padding: 48px 28px 36px; }
  .lp-panel-title { font-size: 40px; }
  .lp-panel-foot { flex-wrap: wrap; gap: 16px; }
  .lp-orbit {
    width: 72px;
    height: 72px;
    box-shadow: rgba(194, 96, 62, 0.12) 0 0 0 9px;
  }
  .lp-trustbar {
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 14px 16px 28px;
    line-height: 1.6;
  }
  .lp-main-login { padding: 24px 0; }
  .lp-login { padding: 40px 26px; }
}

/* ── Hero headline (the page H1) ── */
.lp-hero {
  text-align: center;
  max-width: 760px;
  margin: 8px auto 40px;
  padding: 0 24px;
}
.lp-hero-title {
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #241f19;
  margin: 0;
}
.lp-hero-title em {
  font-style: italic;
  color: #c2603e;
}
.lp-hero-sub {
  font-size: 16.5px;
  line-height: 1.6;
  color: #6b5d48;
  max-width: 620px;
  margin: 16px auto 0;
}

/* ── SEO body-copy section (crawlable, on-brand, visually muted) ── */
.lp-seo {
  max-width: 940px;
  margin: 56px auto 8px;
  padding: 0 24px;
}
.lp-seo-head {
  font-weight: 800;
  font-size: 18px;
  color: #241f19;
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.lp-seo-lead,
.lp-seo-note {
  font-size: 15px;
  line-height: 1.65;
  color: #6b5d48;
  max-width: 820px;
  margin: 0 0 16px;
}
.lp-seo a {
  color: #241f19;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s;
}
.lp-seo a:hover { color: #c2603e; }
.lp-seo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 22px 0 20px;
}
.lp-seo-col h3 {
  font-weight: 700;
  font-size: 15.5px;
  color: #241f19;
  margin: 0 0 8px;
}
.lp-seo-col p {
  font-size: 14px;
  line-height: 1.6;
  color: #6b5d48;
  margin: 0;
}
.lp-seo-col strong { color: #241f19; font-weight: 600; }

@media (max-width: 760px) {
  .lp-hero { margin: 8px auto 28px; }
  .lp-seo-grid { grid-template-columns: 1fr; gap: 22px; }
}

/* ── Hero booking CTA ── */
.lp-hero-actions {
  margin: 22px 0 0;
  display: flex;
  justify-content: center;
}
.lp .lp-book-btn {
  display: inline-block;
  background: #241f19;
  color: #f2efe6;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  padding: 13px 22px;
  border-radius: 999px;
  transition: transform 0.15s, background 0.15s;
}
.lp-book-btn:hover {
  background: #332c24;
  transform: translateY(-1px);
}

/* ── FAQ ── */
.lp-faq {
  max-width: 820px;
  margin: 40px auto 64px;
  padding: 0 24px;
}
.lp-faq-lead {
  font-size: 15px;
  line-height: 1.6;
  color: #6b5d48;
  margin: 0 0 22px;
}
.lp-faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lp-faq-item {
  background: #faf8f4;
  border: 1px solid #d6ccbf;
  border-radius: 14px;
  overflow: hidden;
}
.lp-faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  font-weight: 700;
  font-size: 15.5px;
  color: #241f19;
  transition: color 0.15s;
}
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-item summary::after {
  content: '+';
  font-size: 20px;
  font-weight: 600;
  color: #c2603e;
  line-height: 1;
  transition: transform 0.15s;
}
.lp-faq-item[open] summary::after { transform: rotate(45deg); }
.lp-faq-item summary:hover { color: #c2603e; }
.lp-faq-item p {
  margin: 0;
  padding: 0 20px 18px;
  font-size: 14.5px;
  line-height: 1.65;
  color: #5d5345;
}