/* 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 {
  position: relative;
  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;
}

/* The whole card still hands off to /chat (the spec'd tap target) — as a
 * zero-content overlay link under the card's interactive controls. */
.lp-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.lp-cta-row,
.lp-voice-btn,
.lp-start {
  position: relative;
  z-index: 2;
}
.lp-cta-row {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ── Start form: engagement starts on the card ── */
.lp-start {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.lp-start-input {
  flex: 1;
  min-width: 0;
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 14.5px;
  color: #f2efe6;
  background: rgba(23, 37, 31, 0.45);
  border: 1px solid rgba(242, 239, 232, 0.25);
  border-radius: 999px;
  padding: 12px 18px;
  outline: none;
  transition: border-color 0.15s;
}
.lp-start-input::placeholder { color: rgba(159, 184, 169, 0.75); }
.lp-start-input:focus { border-color: rgba(242, 239, 232, 0.6); }
.lp-start-send {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(242, 239, 232, 0.25);
  background: rgba(242, 239, 232, 0.07);
  color: #f2efe6;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.lp-start-send:hover { background: #c2603e; border-color: #c2603e; }
.lp-start-send svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lp-voice-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Gabarito', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #f2efe6;
  background: #c2603e;
  border: none;
  border-radius: 999px;
  padding: 16px 28px;
  cursor: pointer;
  transition: background 0.15s;
}
.lp-voice-btn:hover { background: #e8b49a; }
.lp-voice-btn svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lp-voice-status {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 40px;
  z-index: 30;
  font-size: 13.5px;
  font-weight: 600;
  color: #f2efe6;
  background: rgba(23, 37, 31, 0.9);
  border: 1px solid rgba(242, 239, 232, 0.2);
  border-radius: 999px;
  padding: 10px 18px;
  pointer-events: none;
}
.lp-voice-status:empty { display: none; }
.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;
  margin-top: 22px;
  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;
}
/* The "client on hold" banner a prospect sees on the login page after clicking
   a demand-backed claim-offer email — the pre-login context that turns a
   clicked claim into an accepted one. Same beige/ink/coral family as the card
   it sits in. */
.lp-claim {
  background: rgba(247, 242, 233, 0.72);
  border: 1px solid rgba(179, 85, 47, 0.35);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lp-claim-tag {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b3552f;
}
.lp-claim-line {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #241f19;
}
.lp-claim-note {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #6b5d48;
}
.lp-claim-note strong { color: #241f19; }

/* ── Site footer (legal links, Terms & Conditions, Privacy Policy) ── */
.lp-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  padding: 26px 40px 34px;
  font-size: 13px;
  font-weight: 600;
  color: #8a7c6a;
}
.lp-footer .lp-faq-link { color: #8a7c6a; }
.lp-footer .lp-faq-link:hover { color: #c2603e; }

/* ── Closing "work with Isaak" band (booking CTA, after the SEO sections) ──
   Same shell width as the other sections; a hairline divider spans the shell
   so the section change reads as a deliberate close. */
.lp-book {
  max-width: var(--lp-shell);
  margin: 0 auto;
  padding: 40px var(--lp-shell-pad) 72px;
  text-align: center;
  box-sizing: border-box;
  position: relative;
}
.lp-book::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--lp-shell-pad);
  right: var(--lp-shell-pad);
  height: 1px;
  background: #e7dfd0;
}
.lp-book .lp-seo-head {
  text-align: center;
}
.lp-book .lp-seo-lead {
  margin: 0 auto 6px;
  max-width: 640px;
}

/* ── Built-in-the-open changelog band (landing → /blog) ── */
.lp-changelog {
  max-width: var(--lp-shell);
  margin: 34px auto 10px;
  padding: 38px var(--lp-shell-pad);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: center;
  background: #f3eee4;
  border: 1px solid #e7dfd0;
  border-radius: 18px;
  box-sizing: border-box;
}
.lp-changelog-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b3552f;
  margin: 0 0 10px;
}
.lp-changelog-title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: #241f19;
  margin: 0 0 12px;
}
.lp-changelog-body {
  color: #6b5d48;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 18px;
}
.lp-changelog-cta {
  display: inline-block;
  font-weight: 800;
  font-size: 15px;
  color: #fffdf8;
  background: #c2603e;
  border-radius: 12px;
  padding: 13px 22px;
  text-decoration: none;
  box-shadow: 0 4px 0 #8c4322;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.lp-changelog-cta:hover {
  transform: translateY(1px);
  box-shadow: 0 3px 0 #8c4322;
}
.lp-changelog-label {
  display: block;
  font-weight: 700;
  color: #241f19;
  font-size: 14px;
  margin: 0 0 10px;
}
.lp-changelog .newsletter-row {
  flex-direction: column;
  align-items: stretch;
}
.lp-changelog .newsletter-row input[type="email"] {
  border: 1px solid #d8cdb8;
  border-radius: 10px;
  padding: 11px 14px;
  font: inherit;
  font-size: 15px;
  color: #241f19;
  background: #fffdf8;
}
.lp-changelog .newsletter-row input[type="email"]:focus {
  outline: 2px solid #c2603e;
  outline-offset: 1px;
}
.lp-changelog .lp-book-btn { justify-content: center; }
.lp-changelog .newsletter-status { font-size: 13px; }

/* ── 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; }
  .lp-footer { padding: 22px 24px 28px; gap: 14px; }
}
@media (max-width: 760px) {
  .lp { padding: 14px; }
  .lp-topbar { padding: 12px 16px; }
  .lp-changelog { grid-template-columns: 1fr; padding: 26px 20px; }
  .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;
}

/* ── Shared desktop content shell ──
   Every below-the-fold section (changelog, about, FAQ, book band) sits on the
   same width + horizontal padding, so their edges align into one grid instead
   of each section drifting at its own max-width. The split cards above are
   intentionally full-bleed; the shell picks the line back up underneath. */
.lp {
  --lp-shell: 1200px;
  --lp-shell-pad: 40px;
}
.lp-shell {
  max-width: var(--lp-shell);
  margin-inline: auto;
  padding-inline: var(--lp-shell-pad);
  box-sizing: border-box;
}

/* ── SEO body-copy section (crawlable, on-brand, visually muted) ── */
.lp-seo {
  max-width: var(--lp-shell);
  margin: 56px auto 8px;
  padding: 0 var(--lp-shell-pad);
  box-sizing: border-box;
}
.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;
  line-height: 1.25;
  color: #241f19;
  margin: 0 0 8px;
  /* Two-line headroom keeps every column's body copy top-aligned when one
     heading wraps and its neighbours don't. */
  min-height: 2.5em;
}
.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 { --lp-shell-pad: 22px; }
  .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 ──
   Two-column grid on desktop so the section uses the shell width; single
   column on narrow screens. */
.lp-faq {
  max-width: var(--lp-shell);
  margin: 40px auto 72px;
  padding: 0 var(--lp-shell-pad);
  box-sizing: border-box;
}
.lp-faq-lead {
  font-size: 15px;
  line-height: 1.6;
  color: #6b5d48;
  margin: 0 0 22px;
}
.lp-faq-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 22px;
}
@media (max-width: 900px) {
  .lp-faq-list { grid-template-columns: 1fr; }
}
.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;
}