/* Invite-only landing page (`/`) — loaded only by that page, via its own HeadContent.
   Ported from the React bundle in design/acre-landing-page-code.zip.

   That bundle's index.css re-declared the brand tokens as literal values, which forks the
   design system: acre-tokens.css is linked in from Acre.PMS.UI and shared verbatim with the
   PMS, so a token change there has to reach this page too. Everything below consumes the real
   tokens instead. The bundle was also light-only; both themes work here.

   Class names carry an lp- prefix because the bundle used bare names (.btn, .hero, .section,
   .pill, .field, .kpi) that would collide with the .acre-* styles Privacy and Terms still use.

   Three values had no token in the sheet and are declared here for both themes. */
/* box-sizing and the body margin are both load-bearing here, and neither is set anywhere else in
   this app - there is no global reset, and acre-tokens.css does not style body.

   .lp-wrap is width:100% plus a 24px gutter each side. Under the default content-box that is
   parent width + 48px, which pushed the document 48px wider than a 320px viewport and scrolled
   the whole page sideways. The old .acre-* containers never hit this because they size from
   max-width alone and shrink to fit.

   The 8px UA margin on body has always been there; it only became visible once this page put a
   full-bleed sticky header and a 100%-width container against the viewport edge. Zeroing it in
   landing.css and not marketing.css keeps Privacy and Terms rendering exactly as they do today.
   Both were found by ResrvAI.E2E.Marketing's horizontal-overflow theory at 320px. */
body { margin: 0; }
.lp-wrap { box-sizing: border-box; }
.acre-app {
  --lp-ink-soft: oklch(0.42 0.012 145);
  --lp-line-soft: oklch(0.95 0.006 145);
  --lp-shadow-lift: 0 18px 40px -18px rgba(27, 94, 32, 0.28);
}
.acre-app[data-acre-theme="dark"] {
  --lp-ink-soft: oklch(0.72 0.012 145);
  --lp-line-soft: oklch(0.24 0.008 145);
  --lp-shadow-lift: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
}

.lp-wrap { width: 100%; max-width: 75rem; margin: 0 auto; padding: 0 var(--space-6); }
.lp-page h1, .lp-page h2, .lp-page h3 {
  font-family: var(--font-heading); font-weight: 700;
  letter-spacing: -0.022em; line-height: 1.1;
}
.lp-page ::selection { background: var(--acre-green-pale); color: var(--acre-green-deep); }

/* ---- Header ---- */
.lp-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in oklch, var(--background) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.lp-header__row { display: flex; align-items: center; gap: var(--space-6); min-height: 4.25rem; }
.lp-lockup { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--acre-green-deep); }
.lp-lockup svg { width: 1.875rem; height: 1.875rem; }
.acre-app[data-acre-theme="dark"] .lp-lockup { color: var(--acre-green-light); }
.lp-word {
  font-family: var(--font-heading); font-weight: 800; font-size: 1.1875rem;
  letter-spacing: 0.10em; color: var(--foreground);
}
.lp-nav { display: flex; gap: var(--space-6); margin-left: var(--space-3); }
.lp-nav a, .lp-login {
  color: var(--lp-ink-soft); font-size: var(--text-sm); font-weight: 500;
  transition: color var(--duration-press) var(--ease-out);
}
.lp-nav a:hover, .lp-login:hover { color: var(--acre-green-primary); }
.lp-header__actions { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }

.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  box-sizing: border-box; padding: var(--space-3) var(--space-4);
  border: 1px solid transparent; border-radius: var(--radius-control);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  text-decoration: none;
  transition: background var(--duration-press) var(--ease-out),
              border-color var(--duration-press) var(--ease-out),
              color var(--duration-press) var(--ease-out),
              box-shadow var(--duration-press) var(--ease-out),
              transform var(--duration-press) var(--ease-out);
}
.lp-btn:active { transform: scale(var(--scale-press)); }
.lp-btn--primary { background: var(--acre-green-primary); color: var(--primary-foreground); box-shadow: var(--shadow-card); }
.lp-btn--primary:hover { background: var(--acre-green-deep); box-shadow: var(--shadow-card-hover); }
.lp-btn--ghost { background: var(--card); border-color: var(--border); color: var(--foreground); }
.lp-btn--ghost:hover { border-color: var(--acre-green-light); color: var(--acre-green-primary); }
.lp-btn--lg { padding: var(--space-4) var(--space-6); font-size: var(--text-body); }
.lp-btn svg { flex: none; }

/* Mobile nav is a <details> disclosure, not a scripted toggle: this page is static SSR, and a
   JS-driven menu leaves a phone with no navigation at all if the script fails to load.
   <summary> is focusable and Enter/Space-operable with no code. */
.lp-menu { display: none; margin-left: auto; }
.lp-menu > summary {
  display: grid; place-items: center; width: var(--tap-target-min); height: var(--tap-target-min);
  border-radius: var(--radius-control); color: var(--foreground); cursor: pointer; list-style: none;
}
.lp-menu > summary::-webkit-details-marker { display: none; }
.lp-menu > summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.lp-menu__panel {
  position: absolute; left: 0; right: 0; z-index: 61; display: grid; gap: 2px;
  padding: var(--space-2) var(--space-6) var(--space-4);
  background: var(--background); border-bottom: 1px solid var(--border);
}
.lp-menu__panel a {
  padding: var(--space-3) 0; border-bottom: 1px solid var(--lp-line-soft);
  font-size: var(--text-body); font-weight: 500; color: var(--foreground);
}

/* ---- Section furniture ---- */
.lp-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3);
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--acre-green-primary);
}
.lp-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acre-green-light); }
.lp-eyebrow svg { flex: none; }
.lp-section { padding: clamp(4.5rem, 9vw, 7.25rem) 0; }
.lp-section--tint { background: var(--muted); border-block: 1px solid var(--lp-line-soft); }
.lp-head { max-width: 39rem; }
.lp-head h2, .lp-h2 { margin: 0 0 var(--space-3); font-size: clamp(1.9rem, 3.1vw, 2.6rem); }
.lp-head p, .lp-lede { margin: 0; color: var(--muted-foreground); font-size: var(--text-lg); }

/* ---- Hero ---- */
.lp-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(4rem, 7.5vw, 6.5rem) 0 clamp(4.5rem, 8.5vw, 7.375rem);
}
.lp-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(680px 340px at 88% -8%, color-mix(in oklch, var(--acre-green-light) 13%, transparent), transparent 68%),
    linear-gradient(180deg, var(--acre-green-pale) 0%, transparent 46%);
}
.acre-app[data-acre-theme="dark"] .lp-hero::after {
  background:
    radial-gradient(680px 340px at 88% -8%, color-mix(in oklch, var(--acre-green-light) 14%, transparent), transparent 68%),
    linear-gradient(180deg, color-mix(in oklch, var(--acre-green-deep) 34%, transparent) 0%, transparent 46%);
}
.lp-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2.5rem, 5vw, 4.75rem); align-items: center; }
.lp-hero h1 { margin: 0 0 var(--space-4); font-size: clamp(2.6rem, 5vw, 4.15rem); letter-spacing: -0.035em; }
.lp-hero h1 span { color: var(--acre-green-primary); }
.acre-app[data-acre-theme="dark"] .lp-hero h1 span { color: var(--acre-green-light); }
.lp-hero__sub { margin: 0; max-width: 30rem; color: var(--muted-foreground); font-size: var(--text-lg); line-height: 1.66; }
.lp-hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.lp-hero__fine {
  display: flex; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 0;
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted-foreground);
}
.lp-hero__fine svg { color: var(--acre-green-primary); flex: none; }

.lp-chip {
  display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4);
  padding: 7px 14px 7px 10px; border: 1px solid var(--acre-green-pale);
  border-radius: var(--radius-badge); background: var(--acre-green-pale);
  font-family: var(--font-mono); font-size: 0.71875rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--acre-green-deep);
}
.lp-chip i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--acre-green-light);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--acre-green-light) 22%, transparent);
}

.lp-hero__media { position: relative; }
.lp-hero__media picture { display: block; }
.lp-hero__media img {
  width: 100%; height: clamp(22.5rem, 42vw, 29.375rem); object-fit: cover;
  border-radius: var(--radius-card); box-shadow: var(--lp-shadow-lift); display: block;
}

/* Product chrome floating over the photo. The figures are illustrative, and the markup says so
   in a visually-hidden caption rather than leaving a visitor to assume it is a live feed. */
.lp-float {
  position: absolute; z-index: 3; background: var(--card); color: var(--card-foreground);
  border: 1px solid var(--border); border-radius: var(--radius-card);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.22); padding: var(--space-3) var(--space-4);
}
.lp-float--occupancy { left: -1.375rem; top: 2.125rem; min-width: 12.125rem; }
.lp-float__label {
  display: block; margin-bottom: var(--space-2); font-family: var(--font-mono);
  font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground);
}
.lp-float--occupancy strong { font-family: var(--font-heading); font-size: 1.625rem; letter-spacing: -0.03em; }
.lp-float--occupancy em { font-style: normal; font-size: 0.75rem; color: var(--muted-foreground); margin-left: var(--space-1); }
.lp-occupancy { height: 6px; margin-top: var(--space-3); border-radius: var(--radius-badge); background: var(--lp-line-soft); overflow: hidden; }
.lp-occupancy > i { display: block; height: 100%; width: 78%; border-radius: var(--radius-badge); background: var(--gradient-occupancy); }
.lp-float--status { right: -1.125rem; bottom: 1.875rem; display: grid; gap: var(--space-2); min-width: 13.125rem; }
.lp-status-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.lp-site { font-family: var(--font-mono); font-size: 0.75rem; color: var(--foreground); }

.lp-pill {
  padding: 3px 9px; border-radius: var(--radius-badge); font-family: var(--font-body);
  font-size: 0.65625rem; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap;
}
.lp-pill--confirmed { background: var(--status-confirmed-bg); color: var(--status-confirmed-fg); }
.lp-pill--pending { background: var(--status-pending-bg); color: var(--status-pending-fg); }
.lp-pill--checkedin { background: var(--status-checkedin-bg); color: var(--status-checkedin-fg); }

/* ---- Capability cards ---- */
.lp-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: var(--space-8); }
.lp-cards > :nth-child(even) { transform: translateY(20px); }
.lp-card {
  padding: var(--space-card); background: var(--card); color: var(--card-foreground);
  border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  transition: border-color var(--duration-entrance) var(--ease-out),
              box-shadow var(--duration-entrance) var(--ease-out),
              transform var(--duration-entrance) var(--ease-out);
}
.lp-card:hover { border-color: var(--border-card-hover); box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.lp-card__icon {
  display: grid; place-items: center; width: var(--icon-chip); height: var(--icon-chip);
  margin-bottom: var(--space-4); border-radius: 10px;
  background: var(--acre-green-pale); color: var(--acre-green-primary);
}
.lp-card h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.lp-card p { margin: 0; color: var(--muted-foreground); font-size: var(--text-sm); line-height: 1.6; }

/* ---- Interface showcase ---- */
.lp-showcase { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(2.5rem, 5vw, 4.75rem); align-items: center; }
.lp-list { margin: var(--space-6) 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.lp-list li { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--border); font-size: var(--text-body); }
.lp-list li:last-child { border-bottom: 1px solid var(--border); }
.lp-list svg { flex: none; margin-top: 2px; color: var(--acre-green-primary); }
.lp-list strong { display: block; font-family: var(--font-heading); font-size: var(--text-body); }
.lp-list span { color: var(--muted-foreground); font-size: var(--text-sm); }

.lp-frame {
  border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--card); box-shadow: var(--lp-shadow-lift); overflow: hidden;
}
.lp-frame__bar {
  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4);
  background: var(--sidebar); color: var(--sidebar-foreground);
}
.lp-frame__bar svg { width: var(--icon-sm); height: var(--icon-sm); flex: none; }
.lp-frame__title { font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; }
.lp-frame__meta {
  margin-left: auto; font-family: var(--font-mono); font-size: 0.6875rem;
  color: color-mix(in oklch, var(--sidebar-foreground) 66%, transparent);
}
.lp-frame__body { padding: var(--space-4); }
.lp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-bottom: var(--space-4); }
.lp-kpi { padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--muted); }
.lp-kpi span {
  display: block; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted-foreground);
}
.lp-kpi strong { display: block; margin-top: var(--space-1); font-family: var(--font-heading); font-size: 1.375rem; letter-spacing: -0.03em; }
.lp-kpi em { font-style: normal; font-size: 0.6875rem; font-weight: 600; color: var(--acre-green-primary); }

.lp-table { border: 1px solid var(--border); border-radius: var(--radius-control); overflow: hidden; }
.lp-row {
  display: grid; grid-template-columns: 4.625rem 1fr 6rem 5.75rem; gap: var(--space-3); align-items: center;
  padding: 11px var(--space-3); border-top: 1px solid var(--lp-line-soft); font-size: 0.8125rem;
}
.lp-row:first-child { border-top: 0; }
.lp-row--head {
  background: var(--muted); font-family: var(--font-mono); font-size: 0.625rem;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted-foreground);
}
.lp-row .lp-site { font-weight: 500; }
.lp-amount { font-family: var(--font-mono); text-align: right; }

/* ---- Acre AI panel ---- */
.lp-ai {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2.25rem, 5vw, 4.25rem);
  align-items: center; padding: clamp(2.125rem, 4.4vw, 3.5rem);
  border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--card); box-shadow: var(--shadow-card);
}
.lp-ai::before {
  content: ""; position: absolute; right: -120px; top: -120px; width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklch, var(--acre-green-light) 14%, transparent), transparent 66%);
}
.lp-ai > * { position: relative; }

/* ---- Invite ---- */
.lp-invite { background: var(--sidebar); color: var(--sidebar-foreground); }
.lp-invite h2 { color: var(--sidebar-foreground); }
.lp-invite .lp-eyebrow { color: var(--acre-green-light); }
.lp-invite__grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
.lp-invite__lede {
  margin: 0; color: color-mix(in oklch, var(--sidebar-foreground) 74%, transparent);
  font-size: var(--text-lg); line-height: 1.66;
}
.lp-criteria { margin: var(--space-6) 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.lp-criteria li {
  display: flex; gap: var(--space-3); padding: 13px 0;
  border-top: 1px solid color-mix(in oklch, var(--sidebar-foreground) 14%, transparent);
  font-size: var(--text-body); color: color-mix(in oklch, var(--sidebar-foreground) 86%, transparent);
}
.lp-criteria li:last-child { border-bottom: 1px solid color-mix(in oklch, var(--sidebar-foreground) 14%, transparent); }
.lp-criteria svg { flex: none; margin-top: 2px; color: var(--acre-green-light); }

.lp-form-card {
  padding: clamp(var(--space-6), 3vw, 2.125rem); background: var(--card); color: var(--card-foreground);
  border-radius: var(--radius-card); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.5);
}
.lp-form-card h3 { margin: 0 0 var(--space-1); font-size: 1.375rem; }
.lp-form-card > p { margin: 0 0 var(--space-6); color: var(--muted-foreground); font-size: var(--text-sm); }
.lp-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.lp-field { display: grid; gap: var(--space-1); }
.lp-field--full { grid-column: 1 / -1; }
.lp-field label {
  font-family: var(--font-mono); font-size: 0.65625rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted-foreground);
}
.lp-field label em { font-style: normal; opacity: 0.6; }
.lp-field input, .lp-field textarea, .lp-field select {
  width: 100%; box-sizing: border-box; padding: 11px 13px; border: 1px solid var(--border);
  border-radius: var(--radius-field); background: var(--background); color: var(--foreground);
  font-family: var(--font-body); font-size: var(--text-sm);
  transition: border-color var(--duration-press) var(--ease-out), box-shadow var(--duration-press) var(--ease-out);
}
.lp-field textarea { min-height: 5.75rem; resize: vertical; }
.lp-field input:focus, .lp-field textarea:focus, .lp-field select:focus {
  outline: none; border-color: var(--acre-green-light);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--acre-green-light) 16%, transparent);
}
.lp-submit { width: 100%; margin-top: var(--space-4); }
.lp-form-fine { margin: var(--space-3) 0 0; font-size: 0.71875rem; line-height: 1.55; color: var(--muted-foreground); }

/* The honeypot the contact pipeline already validates on. Off-screen rather than
   display:none so a bot that filters hidden inputs still fills it. */
.lp-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lp-done { display: grid; gap: var(--space-3); place-items: start; padding: var(--space-3) 0 var(--space-1); }
.lp-done__badge {
  display: grid; place-items: center; width: 2.875rem; height: 2.875rem;
  border-radius: 50%; background: var(--acre-green-pale); color: var(--acre-green-primary);
}
.lp-done h3 { margin: 0; font-size: 1.375rem; }
.lp-done p { margin: 0; color: var(--muted-foreground); font-size: var(--text-body); }
.lp-done--warn .lp-done__badge { background: var(--status-pending-bg); color: var(--status-pending-fg); }
.lp-done--error .lp-done__badge { background: var(--status-cancelled-bg); color: var(--status-cancelled-fg); }

/* ---- Footer ---- */
.lp-footer { padding: var(--space-8) 0 var(--space-6); border-top: 1px solid var(--border); }
.lp-footer__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.lp-footer__note { color: var(--muted-foreground); font-size: 0.8125rem; }
.lp-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-left: auto; font-size: 0.8125rem; color: var(--muted-foreground); }
.lp-footer__links a:hover { color: var(--acre-green-primary); }
.lp-footer__legal {
  margin: var(--space-4) 0 0; padding-top: var(--space-4);
  border-top: 1px solid var(--lp-line-soft); font-size: 0.75rem; color: var(--muted-foreground);
}

/* ---- Motion ---- */
@media (prefers-reduced-motion: no-preference) {
  .lp-reveal { animation: lp-rise 520ms var(--ease-out) both; }
  .lp-reveal--1 { animation-delay: 60ms; }
  .lp-reveal--2 { animation-delay: 120ms; }
  .lp-reveal--3 { animation-delay: 180ms; }
  @keyframes lp-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}

/* ---- Responsive ---- */
@media (max-width: 62.5rem) {
  .lp-hero__grid, .lp-showcase, .lp-ai, .lp-invite__grid { grid-template-columns: 1fr; }
  .lp-hero__media { margin-top: var(--space-2); }
  .lp-cards { grid-template-columns: 1fr 1fr; }
  .lp-cards > :nth-child(even) { transform: none; }
  .lp-float--occupancy { left: 12px; }
  .lp-float--status { right: 12px; }
}
@media (max-width: 45rem) {
  .lp-nav, .lp-login { display: none; }
  .lp-menu { display: block; }
  .lp-header { position: relative; }
  .lp-header__actions { margin-left: 0; }
  .lp-header__row { gap: var(--space-3); }
  .lp-cards { grid-template-columns: 1fr; }
  .lp-kpis { grid-template-columns: 1fr; }
  .lp-row { grid-template-columns: 4rem 1fr 5.25rem; }
  .lp-row > :nth-child(4) { display: none; }
  .lp-fields { grid-template-columns: 1fr; }
  .lp-hero__media img { height: 18.75rem; }
  .lp-float { padding: 11px 13px; }
  .lp-float--occupancy { left: 10px; top: 10px; min-width: 0; transform: scale(0.88); transform-origin: top left; }
  .lp-float--occupancy strong { font-size: 1.375rem; }
  .lp-float--status { right: 10px; bottom: 10px; min-width: 0; transform: scale(0.88); transform-origin: bottom right; }
  .lp-footer__links { margin-left: 0; }
}

/* ---- Acre AI self-running demo ----
   The full transcript is rendered in the markup and this script only replays it, so a visitor
   with no JS, or with reduced motion set, reads the whole thread immediately. The React bundle
   built the thread from a JS array, which showed an empty panel in both of those cases. */
.lp-ask {
  border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card);
  box-shadow: var(--lp-shadow-lift); overflow: hidden;
}
.lp-ask__bar {
  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4);
  background: var(--sidebar); color: var(--sidebar-foreground);
}
.lp-ask__bar svg { color: var(--acre-green-light); flex: none; }
.lp-ask__bar strong { font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 600; }
.lp-ask__bar em {
  margin-left: auto; font-family: var(--font-mono); font-style: normal; font-size: 0.6875rem;
  color: color-mix(in oklch, var(--sidebar-foreground) 66%, transparent);
}
.lp-ask__body {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4); background: var(--muted); scroll-behavior: smooth;
}
/* Fixed viewport only while the script is driving playback. Without JS the panel grows to fit
   the transcript instead of clipping it. */
.lp-ask__body.is-playing { height: 23.25rem; overflow: hidden; }
.lp-ask__body.is-done { height: 23.25rem; overflow-y: auto; overscroll-behavior: contain; }
.lp-ask__body.is-done::-webkit-scrollbar { width: 8px; }
.lp-ask__body.is-done::-webkit-scrollbar-thumb {
  border: 2px solid var(--muted); border-radius: var(--radius-badge); background: oklch(0.84 0.02 145);
}
.lp-ask__body.is-done::-webkit-scrollbar-thumb:hover { background: var(--acre-green-light); }

.lp-bubble {
  max-width: 82%; padding: 11px var(--space-3); border-radius: var(--radius-field);
  font-size: var(--text-sm); line-height: 1.5;
}
.lp-ask__body.is-playing .lp-bubble, .lp-ask__body.is-done .lp-bubble {
  animation: lp-bubble-in 260ms var(--ease-out) both;
}
.lp-bubble > span {
  display: block; margin-bottom: var(--space-1); font-family: var(--font-mono);
  font-size: 0.59375rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.lp-bubble--you { align-self: flex-end; background: var(--card); border: 1px solid var(--border); color: var(--foreground); }
.lp-bubble--you > span { color: var(--muted-foreground); }
.lp-bubble--acre { align-self: flex-start; background: var(--acre-green-deep); color: var(--acre-white); }
.lp-bubble--acre > span { color: var(--acre-green-light); }

.lp-caret {
  display: inline-block; width: 2px; height: 14px; margin-left: 2px; vertical-align: -2px;
  background: var(--acre-green-primary); animation: lp-caret 900ms steps(1, end) infinite;
}
.lp-thinking { display: inline-flex; align-items: baseline; gap: var(--space-1); padding-bottom: 13px; }
.lp-thinking > span { flex-basis: 100%; }
.lp-thinking i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--acre-green-light);
  animation: lp-dot 1.1s var(--ease-out) infinite;
}
.lp-thinking i:nth-of-type(2) { animation-delay: 150ms; }
.lp-thinking i:nth-of-type(3) { animation-delay: 300ms; }

.lp-ask__foot {
  padding: 11px var(--space-4); border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 0.65625rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted-foreground);
}

@keyframes lp-bubble-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes lp-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes lp-dot { 0%, 100% { opacity: 0.35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

@media (prefers-reduced-motion: reduce) {
  .lp-ask__body, .lp-ask__body.is-playing, .lp-ask__body.is-done { height: auto; overflow: visible; }
  .lp-bubble { animation: none; }
  .lp-caret, .lp-thinking i { animation: none; }
  .lp-reveal { animation: none; }
}
@media (max-width: 45rem) {
  .lp-ask__body.is-playing, .lp-ask__body.is-done { height: 18.75rem; }
  .lp-ask__body { padding: var(--space-3); }
  .lp-bubble { max-width: 90%; }
}

/* Same 320px overflow as .acre-header: brand + toggle + hamburger + a full-size button do not
   fit one row. The button is the part that goes, and it reappears as the first item of the
   disclosure panel so the invite path is still one tap away rather than lost. */
@media (max-width: 45rem) {
  .lp-header__actions .lp-btn { display: none; }
  .lp-menu__panel .lp-btn { display: inline-flex; margin-top: var(--space-2); border-bottom: 0; }
}

/* ---- Turnstile widget containment ----
   Cloudflare sizes the widget from its own injected CSS, and data-size="flexible" only takes
   effect once the widget has actually rendered. When it does not render - an invalid or
   misconfigured sitekey, a Turnstile outage, a hostname missing from Turnstile:AllowedHostnames,
   a privacy blocker that allows the script but blocks the challenge - the container keeps
   Cloudflare's 300px default. That is wider than this form at a 320px viewport, and it dragged
   the entire document sideways: removing the element in the browser took scrollWidth from 372
   back to 320.

   Capping it, and letting the card shrink, means a CAPTCHA that fails to load can no longer
   break the layout of the form it sits in. Found by ResrvAI.E2E.Marketing's horizontal-overflow
   theory once the suite ran with Turnstile configured - with no keys set the widget never renders
   at all and the whole failure mode is invisible. */
/* min-width:0 lets the card shrink out of its grid track (grid items default to min-width:auto,
   which refuses to go below content min-content). overflow-x on the card is what actually
   contains the widget: a percentage max-width does not constrain an element's min-content
   contribution, so capping .cf-turnstile changed nothing. Scrolling inside the card - rather
   than clipping - keeps a rendered CAPTCHA reachable, which matters because Cloudflare floors
   flexible mode at 300px and this card is narrower than that at a 320px viewport. */
.lp-invite__grid > * { min-width: 0; }
.lp-form-card { overflow-x: auto; }