/* ==========================================================================
   landing.css — Experworks landing-page modernization
   --------------------------------------------------------------------------
   Scoped via body.landing + .lp-* prefixes. Coexists with w3.css, which is
   still loaded globally and used by the registration form on this same page.
   Palette is sourced verbatim from styles/w3-theme.css.
   ========================================================================== */

/* ---------- Tokens ---------- */

body.landing {
  /* Palette — direct from w3-theme.css */
  --lp-green:        #01b524;
  --lp-green-dark:   #097012;
  --lp-green-deep:   #194412;
  --lp-green-light:  #aaea8c;
  --lp-green-mint:   #d2f7bf;
  --lp-green-lime:   #88d866;
  --lp-yellow:       #fcd703;
  --lp-yellow-soft:  #fff09c;

  /* Neutrals — all combinations verified ≥4.5:1 (WCAG AA) on every
     background they appear on; most exceed 7:1 (AAA). */
  --lp-ink:          #194412;  /* primary body / headlines     */
  --lp-ink-muted:    #325029;  /* muted body, 8.5:1+ on cream  */
  --lp-paper:        #ffffff;
  --lp-cream:        #fafff2;
  --lp-cream-deep:   #f1faea;
  --lp-line:         #d5e8c5;  /* hairline only; decorative   */

  /* Elevation */
  --lp-shadow-sm: 0 2px 8px -2px rgba(25, 68, 18, 0.10);
  --lp-shadow-md: 0 8px 24px -8px rgba(25, 68, 18, 0.18);
  --lp-shadow-lg: 0 16px 48px -16px rgba(25, 68, 18, 0.22);

  /* Radii */
  --lp-radius-sm:   12px;
  --lp-radius:      20px;
  --lp-radius-lg:   28px;
  --lp-radius-pill: 999px;

  /* Layout */
  --lp-max:           1200px;
  --lp-section-pad-y: clamp(56px, 8vw, 112px);
  --lp-section-pad-x: clamp(20px, 4vw, 48px);
  --lp-gap:           clamp(20px, 3vw, 32px);
  --lp-gap-sm:        clamp(12px, 2vw, 20px);

  /* Type */
  --lp-font:         "Open Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lp-display-w:    800;

  /* Motion */
  --lp-ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --lp-duration: 200ms;
}

/* ---------- Base ---------- */

body.landing {
  font-family: var(--lp-font);
  color: var(--lp-ink);
  background: var(--lp-paper);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Skip-to-content affordance — invisible until keyboard focus reveals it.
   Lets keyboard users bypass the nav and trust strip when they Tab into
   the page. */
.lp-skip {
  position: absolute;
  top: -100px;
  left: 12px;
  background: var(--lp-green);
  color: #fff;
  padding: 10px 18px;
  border-radius: 4px;
  z-index: 1000;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: top 0.15s ease;
}
.lp-skip:focus {
  top: 12px;
  outline: 3px solid var(--lp-gold);
  outline-offset: 2px;
}

body.landing a {
  color: var(--lp-green-dark);
  font-weight: 600;
  text-decoration: none;
}
/* Underline-on-hover affordance for inline links only — buttons opt out via
   :not(.lp-btn) so their all-around border stays consistent. */
body.landing a:not(.lp-btn) {
  border-bottom: 1px solid transparent;
  transition: border-color var(--lp-duration) var(--lp-ease);
}
body.landing a:not(.lp-btn):hover {
  border-bottom-color: currentColor;
}

body.landing :where(h1, h2, h3, h4) {
  /* :where() contributes zero specificity, so section-specific overrides
     like .lp-trust__cell h3 { color:#fff } and .lp-feature--accent h2
     { color:#fff } actually beat this default without needing artificially
     chained selectors. */
  font-family: var(--lp-font);
  color: var(--lp-ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

body.landing p {
  margin: 0;
  line-height: 1.55;
}

body.landing img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Base list reset. Wrapped in :where() so the reset contributes zero to
   specificity beyond the bare `ul`/`ol` element — otherwise the
   body.landing prefix bumps this to (0,1,2) and silently overrides any
   class-level component margin/padding (which is what was forcing the
   use-case chips to the left). */
:where(body.landing) ul,
:where(body.landing) ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Focus indicators — WCAG 2.4.11 requires ≥3:1 against adjacent colors.
   Default uses deep forest (11:1 on white, 9.5:1 on mint). Dark-bg sections
   override to yellow (7.9:1 on deep forest). */
body.landing :focus-visible {
  outline: 3px solid var(--lp-green-deep);
  outline-offset: 2px;
  border-radius: 6px;
}
.lp-nav :focus-visible,
.lp-trust :focus-visible,
.lp-feature--accent :focus-visible {
  outline-color: var(--lp-yellow);
}

/* Make room for the fixed nav */
body.landing {
  padding-top: clamp(64px, 8vh, 80px);
}

/* ---------- Section primitives ---------- */

.lp-section {
  padding: var(--lp-section-pad-y) var(--lp-section-pad-x);
}

.lp-container {
  max-width: var(--lp-max);
  margin-inline: auto;
}

.lp-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lp-green-dark);
  margin-bottom: 16px;
}

.lp-section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(32px, 5vw, 56px);
}
.lp-section-head h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 800;
}
.lp-section-head p {
  margin-top: 12px;
  color: var(--lp-ink-muted);
  font-size: 1.05rem;
}

/* ---------- Buttons ---------- */

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  border: 2px solid transparent;
  border-radius: var(--lp-radius-pill);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--lp-duration) var(--lp-ease),
              background-color var(--lp-duration) var(--lp-ease),
              color var(--lp-duration) var(--lp-ease),
              border-color var(--lp-duration) var(--lp-ease),
              box-shadow var(--lp-duration) var(--lp-ease);
  white-space: nowrap;
}
.lp-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--lp-shadow-sm);
}
.lp-btn:active {
  transform: translateY(0);
}

.lp-btn--primary {
  background: var(--lp-yellow);
  color: var(--lp-green-deep);
}
.lp-btn--primary:hover {
  background: #ffe445;
}

.lp-btn--ghost {
  background: transparent;
  color: var(--lp-green-deep);
  border-color: var(--lp-green-dark);
}
.lp-btn--ghost:hover {
  background: var(--lp-green-mint);
}

.lp-btn--on-dark {
  background: var(--lp-yellow);
  color: var(--lp-green-deep);
}
.lp-btn--ghost-on-dark {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}
.lp-btn--ghost-on-dark:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: #fff;
}

.lp-btn--lg {
  padding: 16px 32px;
  font-size: 1.05rem;
}

/* ---------- Nav ---------- */

.lp-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px clamp(16px, 3vw, 32px);
  background: var(--lp-green-deep);
  color: #fff;
  box-shadow: var(--lp-shadow-md);
}

.lp-nav__brand {
  display: flex;
  align-items: center;
  border-bottom: none;
}
.lp-nav__brand img {
  height: 40px;
  width: auto;
}

.lp-nav__spacer {
  flex: 1;
}

.lp-nav__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Sign-in: <details> drawer. On desktop the summary is the trigger toggle for
   a popover that overlays under the bar; on mobile same thing but full-width. */
.lp-signin {
  position: relative;
}
.lp-signin > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--lp-radius-pill);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background var(--lp-duration) var(--lp-ease),
              border-color var(--lp-duration) var(--lp-ease);
}
.lp-signin > summary::-webkit-details-marker { display: none; }
.lp-signin > summary::after {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  margin-left: 4px;
  transition: transform var(--lp-duration) var(--lp-ease);
}
.lp-signin[open] > summary::after {
  transform: rotate(180deg);
}
.lp-signin > summary:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: #fff;
}

.lp-signin__form {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 280px;
  padding: 16px;
  background: #fff;
  color: var(--lp-ink);
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow-lg);
}
.lp-signin__form input {
  height: 40px;
  padding: 0 14px;
  font: inherit;
  font-size: 0.95rem;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-pill);
  background: var(--lp-cream);
  color: var(--lp-ink);
}
.lp-signin__form input:focus {
  outline: none;
  border-color: var(--lp-green-dark);
  background: #fff;
}
.lp-signin__form button {
  margin-top: 4px;
}

/* Subtle scrim under the open drawer to soften the floating panel */
.lp-signin[open] > summary {
  background: rgba(255, 255, 255, 0.18);
  border-color: #fff;
}

/* ---------- Hero ---------- */

.lp-hero {
  position: relative;
  padding: clamp(40px, 8vw, 88px) var(--lp-section-pad-x) clamp(56px, 9vw, 112px);
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, var(--lp-green-mint) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 90% 80%, var(--lp-yellow-soft) 0%, transparent 65%),
    var(--lp-cream);
}

.lp-hero__inner {
  position: relative;
  max-width: var(--lp-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

@media (min-width: 900px) {
  .lp-hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

.lp-hero__content {
  max-width: 560px;
}

.lp-hero__headline {
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.lp-hero__headline em {
  font-style: normal;
  color: var(--lp-green-dark);
  position: relative;
  white-space: nowrap;
}
.lp-hero__headline em::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.05em;
  height: 0.3em;
  background: var(--lp-yellow);
  z-index: -1;
  border-radius: 4px;
  opacity: 0.7;
}

.lp-hero__subhead {
  margin-top: 20px;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--lp-ink-muted);
  line-height: 1.55;
}

.lp-hero__ctas {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.lp-hero__pillars {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lp-hero__pillars li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 12px;
  border-radius: var(--lp-radius-pill);
  background: var(--lp-green-mint);
  color: var(--lp-green-deep);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid rgba(25, 68, 18, 0.08);
}
.lp-hero__pillar-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lp-green);
  box-shadow: 0 0 0 3px rgba(1, 181, 36, 0.18);
  flex: 0 0 7px;
}

.lp-hero__meta {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 0.85rem;
  color: var(--lp-ink-muted);
}
.lp-hero__meta li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lp-hero__meta li::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 40%, var(--lp-green) 0 4px, transparent 4.5px),
    rgba(1, 181, 36, 0.10);
  flex: 0 0 14px;
}

.lp-hero__art {
  position: relative;
  min-height: 280px;
}
.lp-hero__art img {
  width: 100%;
  border-radius: var(--lp-radius-lg);
  box-shadow: var(--lp-shadow-lg);
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* ---------- Trust strip ---------- */

.lp-trust {
  background: var(--lp-green-deep);
  color: #fff;
  padding: clamp(40px, 6vw, 64px) var(--lp-section-pad-x);
}

.lp-trust__inner {
  max-width: var(--lp-max);
  margin-inline: auto;
}

.lp-trust__heading {
  text-align: center;
  margin-bottom: clamp(28px, 4vw, 40px);
}
.lp-trust__heading h2 {
  color: #fff;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 800;
}
.lp-trust__heading p {
  /* Mint (#d2f7bf) on deep-forest gives 9.48:1 AAA, plus the analogous-
     harmonic tint feels more in-palette than achromatic rgba whites. */
  margin-top: 8px;
  color: var(--lp-green-mint);
  font-size: 0.98rem;
}

.lp-trust__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--lp-gap);
}
@media (min-width: 800px) {
  .lp-trust__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.lp-trust__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.lp-trust__icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  /* Pale-mint disc — icons inside are dark forest green strokes hardcoded
     in the SVG (PROMPTS.md §2). A near-solid mint backdrop gives them a
     readable surface against the deep-forest band; the gold border preserves
     the brand-yellow accent without competing with the icon strokes. */
  background: #d2f7bf;
  border: 1px solid rgba(252, 215, 3, 0.6);
  border-radius: 18px;
  color: var(--lp-yellow);
}
.lp-trust__icon img,
.lp-trust__icon svg {
  width: 32px;
  height: 32px;
}

.lp-trust__cell h3 {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
}

.lp-trust__cell p {
  color: var(--lp-green-mint);  /* 9.48:1 on deep forest — AAA */
  font-size: 0.92rem;
  line-height: 1.45;
}

/* ---------- Pillars (Connect / Share / Discover) ---------- */

.lp-pillars {
  padding: var(--lp-section-pad-y) var(--lp-section-pad-x);
  background: var(--lp-cream);
}

.lp-pillars__grid {
  max-width: var(--lp-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--lp-gap);
}
@media (min-width: 700px) {
  .lp-pillars__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.lp-pillar {
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-lg);
  padding: 28px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform var(--lp-duration) var(--lp-ease),
              box-shadow var(--lp-duration) var(--lp-ease),
              border-color var(--lp-duration) var(--lp-ease);
}
.lp-pillar:hover {
  transform: translateY(-2px);
  box-shadow: var(--lp-shadow-md);
  border-color: var(--lp-green-light);
}

.lp-pillar__art {
  aspect-ratio: 1 / 1;
  border-radius: var(--lp-radius);
  overflow: hidden;
  background: var(--lp-green-mint);
}
.lp-pillar__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp-pillar h3 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--lp-green-deep);
}

.lp-pillar p {
  color: var(--lp-ink-muted);
  font-size: 0.98rem;
}

/* ---------- Feature rows ---------- */

.lp-features {
  padding: var(--lp-section-pad-y) var(--lp-section-pad-x);
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 5vw, 56px);
  background: var(--lp-paper);
}

.lp-feature {
  max-width: var(--lp-max);
  width: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  background: var(--lp-cream-deep);
  border-radius: var(--lp-radius-lg);
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--lp-line);
}
/* ---- Accent (dark-green) feature panel ----
   Color theory: the brand has a warm dark forest (#194412) anchor. White text
   on it is technically high-contrast but feels achromatically detached from
   the palette — clinical, cold. Instead we use an analogous harmonic: tint
   the same hue toward light (mint #d2f7bf) for body text, keep pure white
   only for the headline where impact matters, and let yellow (the warm
   complement to forest-green) carry eyebrow + bullets so the accent reads as
   "lit from within" rather than "stamped on top of." */
.lp-feature--accent {
  background:
    radial-gradient(ellipse 70% 60% at 15% 20%, rgba(170, 234, 140, 0.10) 0%, transparent 60%),
    var(--lp-green-deep);
  border-color: var(--lp-green-deep);
}
.lp-feature--accent .lp-feature__eyebrow {
  color: var(--lp-yellow);
}
.lp-feature--accent h2 {
  color: #ffffff;
}
/* Higher-specificity selectors beat the .lp-feature__text p rule that
   would otherwise paint body copy in --lp-ink-muted (a dark olive intended
   for cream-bg sections). On the deep-forest accent band, body copy needs
   near-white to read; pale mint claimed AAA on paper but subjectively
   reads as faint at body-text weight on so dark a surface. */
.lp-feature--accent .lp-feature__text p,
.lp-feature--accent .lp-feature__text li {
  color: rgba(255, 255, 255, 0.92);
}
.lp-feature--accent .lp-feature__text h2 {
  color: #ffffff;
}
.lp-feature--accent li::marker {
  color: var(--lp-yellow);
}

@media (min-width: 800px) {
  .lp-feature {
    grid-template-columns: 1fr 1fr;
  }
  .lp-feature--text-first .lp-feature__text { order: 1; }
  .lp-feature--text-first .lp-feature__art  { order: 2; }
  .lp-feature--art-first  .lp-feature__art  { order: 1; }
  .lp-feature--art-first  .lp-feature__text { order: 2; }
}

.lp-feature__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 520px;
}

.lp-feature__eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lp-green-dark);
}

.lp-feature__text h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  line-height: 1.15;
}

.lp-feature__text p {
  color: var(--lp-ink-muted);
  font-size: 1rem;
}

.lp-feature__text ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.lp-feature__text li {
  position: relative;
  padding-left: 24px;
  color: var(--lp-ink-muted);
  font-size: 0.98rem;
}
.lp-feature__text li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--lp-green-lime);
  box-shadow: inset 0 0 0 3px var(--lp-cream-deep);
}
.lp-feature--accent .lp-feature__text li::before {
  background: var(--lp-yellow);
  box-shadow: 0 0 0 3px rgba(252, 215, 3, 0.18);
  width: 10px;
  height: 10px;
  top: 0.6em;
}

.lp-feature__art {
  border-radius: var(--lp-radius);
  overflow: hidden;
  background: var(--lp-green-mint);
}
.lp-feature__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  display: block;
}

/* Minimal feature (used for "No advertising" — image plus one line) */
.lp-feature--minimal .lp-feature__text p {
  font-size: 1.1rem;
  color: var(--lp-ink);
}

/* ---------- Use-cases band ---------- */

.lp-usecases {
  padding: var(--lp-section-pad-y) var(--lp-section-pad-x);
  background: var(--lp-green-mint);
}

.lp-usecases__chips {
  /* Narrower than .lp-max so the chip cluster relates visually to the
     section heading (which is capped at 720px) instead of spilling 240px
     wider on each side. */
  max-width: 880px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.lp-usecases__chips li {
  margin: 0;
  padding: 10px 20px;
  background: #fff;
  border-radius: var(--lp-radius-pill);
  color: var(--lp-green-deep);
  font-weight: 600;
  font-size: 0.95rem;
  /* Hairline border alone has only 1.1:1 contrast vs the mint section bg;
     the drop shadow provides the spatial separation that the eye reads
     as "this is a discrete chip, not painted-on text." */
  border: 1px solid var(--lp-line);
  box-shadow: 0 1px 4px rgba(25, 68, 18, 0.10);
  transition: transform var(--lp-duration) var(--lp-ease),
              background var(--lp-duration) var(--lp-ease),
              box-shadow var(--lp-duration) var(--lp-ease);
}
.lp-usecases__chips li:hover {
  transform: translateY(-1px);
  background: var(--lp-yellow-soft);
  box-shadow: 0 3px 8px rgba(25, 68, 18, 0.14);
}

/* ---------- How it works ---------- */

.lp-how {
  padding: var(--lp-section-pad-y) var(--lp-section-pad-x);
  background: var(--lp-paper);
}

.lp-how__steps {
  max-width: var(--lp-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--lp-gap);
  counter-reset: lp-step;
}
@media (min-width: 800px) {
  .lp-how__steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.lp-how__step {
  position: relative;
  background: var(--lp-cream);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  counter-increment: lp-step;
}
.lp-how__step::before {
  content: counter(lp-step);
  position: absolute;
  top: -14px;
  left: 24px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--lp-yellow);
  color: var(--lp-green-deep);
  font-weight: 800;
  font-size: 1rem;
  border-radius: 50%;
  box-shadow: var(--lp-shadow-sm);
}

.lp-how__art {
  aspect-ratio: 1 / 1;
  max-width: 180px;
  margin-top: 8px;
}
.lp-how__art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lp-how__step h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--lp-green-deep);
}

.lp-how__step p {
  color: var(--lp-ink-muted);
  font-size: 0.96rem;
}

/* ---------- Closing CTA ---------- */

.lp-cta {
  padding: clamp(56px, 8vw, 96px) var(--lp-section-pad-x);
  background:
    radial-gradient(ellipse 50% 80% at 10% 50%, rgba(255, 255, 255, 0.4) 0%, transparent 70%),
    radial-gradient(ellipse 60% 80% at 90% 50%, rgba(255, 255, 255, 0.3) 0%, transparent 70%),
    var(--lp-yellow);
  color: var(--lp-green-deep);
  text-align: center;
}

.lp-cta__inner {
  max-width: 720px;
  margin-inline: auto;
}

.lp-cta h2 {
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--lp-green-deep);
}

.lp-cta p {
  margin-top: 16px;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  color: var(--lp-green-deep);
  max-width: 580px;
  margin-inline: auto;
}

.lp-cta__actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.lp-cta .lp-btn--primary {
  background: var(--lp-green-deep);
  color: var(--lp-yellow);
}
.lp-cta .lp-btn--primary:hover {
  background: #0e2e08;
}
.lp-cta .lp-btn--ghost {
  color: var(--lp-green-deep);
  border-color: var(--lp-green-deep);
}
.lp-cta .lp-btn--ghost:hover {
  background: rgba(25, 68, 18, 0.08);
  color: var(--lp-green-deep);
}

/* ---------- Invite/error message integration ---------- */

.lp-message {
  max-width: var(--lp-max);
  margin: clamp(20px, 3vw, 32px) auto;
  padding: 0 var(--lp-section-pad-x);
}

/* ---------- Registration form ---------- */

.lp-register {
  position: relative;
  margin: clamp(40px, 6vw, 80px) auto;
  padding: clamp(24px, 4vw, 48px) var(--lp-section-pad-x);
}
.lp-register::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 50% 0%, rgba(170, 234, 140, 0.18) 0%, transparent 70%),
    var(--lp-cream);
  z-index: -1;
}
.lp-register__inner {
  max-width: 720px;
  margin: 0 auto;
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-lg);
  box-shadow: var(--lp-shadow-md);
  padding: clamp(28px, 4vw, 48px);
  position: relative;
  overflow: hidden;
}
.lp-register__inner::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, var(--lp-green) 0%, var(--lp-yellow) 100%);
}

.lp-register__head {
  text-align: center;
  margin-bottom: clamp(24px, 3vw, 36px);
  padding-top: 8px;
}
.lp-register__head h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
  color: var(--lp-ink);
  margin-top: 8px;
}
.lp-register__head .lp-eyebrow {
  color: var(--lp-green-dark);
  margin-bottom: 0;
}

.lp-register__invite {
  margin: 20px auto 0;
  max-width: 540px;
  background: var(--lp-cream-deep);
  border: 1px solid var(--lp-line);
  border-left: 4px solid var(--lp-green);
  border-radius: var(--lp-radius-sm);
  padding: 14px 18px;
  color: var(--lp-ink);
  font-size: 0.95rem;
  text-align: left;
}
.lp-register__invite p { margin: 0; line-height: 1.55; }
.lp-register__invite p + p { margin-top: 8px; }
.lp-register__invite-help {
  font-size: 0.85rem;
  color: var(--lp-ink-muted);
}
.lp-register__invite-help a {
  color: var(--lp-green-dark);
  font-weight: 600;
}

.lp-register__hint {
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--lp-ink-muted);
}

.lp-required-dot {
  color: var(--lp-green);
  font-weight: 700;
}

/* Form structure */
.lp-form {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 32px);
}

.lp-form__group {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lp-form__legend {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lp-green-dark);
  padding: 0;
  margin-bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lp-form__legend-aside {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--lp-ink-muted);
  background: var(--lp-cream-deep);
  border-radius: var(--lp-radius-pill);
  padding: 2px 10px;
}

.lp-form__hint {
  font-size: 0.85rem;
  color: var(--lp-ink-muted);
  margin: -8px 0 0;
}

.lp-form__row {
  display: grid;
  gap: 16px;
}
.lp-form__row--2 { grid-template-columns: 1fr 1fr; }
.lp-form__row--name { grid-template-columns: 1fr 1fr 1fr; }
.lp-form__row--csz { grid-template-columns: 2fr 1fr 1fr; }

@media (max-width: 560px) {
  .lp-form__row--2,
  .lp-form__row--name,
  .lp-form__row--csz {
    grid-template-columns: 1fr;
  }
}

/* Field */
.lp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
.lp-field__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--lp-ink);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.lp-field__required {
  color: var(--lp-green);
  font-weight: 700;
}
.lp-field__optional {
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--lp-ink-muted);
  text-transform: lowercase;
}

.lp-field__input,
.lp-field__control input {
  width: 100%;
  padding: 12px 14px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--lp-ink);
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-sm);
  box-shadow: inset 0 1px 0 rgba(25, 68, 18, 0.02);
  transition: border-color var(--lp-duration) var(--lp-ease),
              box-shadow var(--lp-duration) var(--lp-ease),
              background var(--lp-duration) var(--lp-ease);
  -webkit-appearance: none;
  appearance: none;
}
.lp-field__input::placeholder {
  color: rgba(50, 80, 41, 0.5);
}
.lp-field__input:hover {
  border-color: rgba(1, 181, 36, 0.45);
}
.lp-field__input:focus,
.lp-field__input:focus-visible {
  outline: none;
  border-color: var(--lp-green);
  box-shadow: 0 0 0 4px rgba(1, 181, 36, 0.15);
  background: var(--lp-cream);
}
.lp-field__input:disabled {
  background: var(--lp-cream-deep);
  color: var(--lp-ink-muted);
  cursor: not-allowed;
}

.lp-field__control {
  position: relative;
  display: block;
}
.lp-field__control .lp-field__input {
  padding-right: 44px;
}
.lp-field__toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--lp-ink-muted);
  border-radius: var(--lp-radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: color var(--lp-duration) var(--lp-ease),
              background var(--lp-duration) var(--lp-ease);
}
.lp-field__toggle:hover {
  color: var(--lp-green-dark);
  background: rgba(1, 181, 36, 0.08);
}
.lp-field__toggle:focus-visible {
  outline: 2px solid var(--lp-green);
  outline-offset: 2px;
}

.lp-field__error {
  font-size: 0.82rem;
  color: #b3261e;
  padding: 4px 0 0;
  display: block;
}

/* Checkbox */
.lp-checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  padding: 8px 4px;
  user-select: none;
}
.lp-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.lp-checkbox__box {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.5px solid var(--lp-line);
  background: var(--lp-paper);
  flex: 0 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  transition: border-color var(--lp-duration) var(--lp-ease),
              background var(--lp-duration) var(--lp-ease),
              box-shadow var(--lp-duration) var(--lp-ease);
}
.lp-checkbox__box::after {
  content: "";
  width: 12px;
  height: 12px;
  background-color: var(--lp-paper);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M6.2 11.5 2.5 7.8 4 6.3l2.2 2.2L12 2.7l1.5 1.5z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M6.2 11.5 2.5 7.8 4 6.3l2.2 2.2L12 2.7l1.5 1.5z'/></svg>") center / contain no-repeat;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity var(--lp-duration) var(--lp-ease),
              transform var(--lp-duration) var(--lp-ease);
}
.lp-checkbox input:checked + .lp-checkbox__box {
  background: var(--lp-green);
  border-color: var(--lp-green);
}
.lp-checkbox input:checked + .lp-checkbox__box::after {
  opacity: 1;
  transform: scale(1);
}
.lp-checkbox input:focus-visible + .lp-checkbox__box {
  box-shadow: 0 0 0 4px rgba(1, 181, 36, 0.18);
  border-color: var(--lp-green);
}
.lp-checkbox__label {
  font-size: 0.92rem;
  color: var(--lp-ink);
  line-height: 1.45;
}

/* Actions */
.lp-form__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 8px;
}
.lp-form__actions .lp-btn {
  min-width: 220px;
  text-align: center;
  justify-content: center;
}
.lp-form__legal {
  font-size: 0.78rem;
  color: var(--lp-ink-muted);
  text-align: center;
  margin: 0;
  max-width: 420px;
}

/* ---------- Legacy member navbar (.w3-top) compatibility ----------
   When a page uses displayNavBar() under body.landing, the legacy
   W3.CSS navbar markup sits inside .w3-top. The landing base styles
   (body.landing a, body.landing img, body.landing :where(h1-h4), etc.)
   would otherwise leak in and break the navbar's tight inline layout,
   dropdown spacing, and avatar sizing. Reset them here, and reserve
   top space so the fixed bar doesn't overlap the hero.

   Notes:
   - .w3-top is position:fixed; top:0 in w3.css — the bar height varies
     by viewport so we push the first landing surface down with a fixed
     reservation tuned to the bar's largest height (~58px).
   - :has() is used to detect the presence of .w3-top so pages don't
     need an extra body class. Supported in all modern browsers.
*/

body.landing:has(.w3-top) {
  padding-top: 58px;
}

/* Anchors inside the legacy navbar opt out of the landing underline-on-hover
   affordance — they're already styled as w3-buttons or hover-painted by w3.css. */
body.landing .w3-top a,
body.landing .w3-top a:not(.lp-btn) {
  color: inherit;
  font-weight: normal;
  border-bottom: 0;
  text-decoration: none;
}
body.landing .w3-top a:hover,
body.landing .w3-top a:not(.lp-btn):hover {
  border-bottom: 0;
  text-decoration: none;
}

/* Avatar images, dropdown thumbnails, and the brand logo stay inline-rendered
   at their declared sizes. Base body.landing img rule would convert them to
   block + 100% max-width, collapsing the inline alignment of the profile
   button. */
body.landing .w3-top img {
  display: inline-block;
  max-width: none;
  height: auto;
  vertical-align: middle;
}

/* Reset heading styles inside the navbar's profile dropdown — the dropdown
   uses w3.css typography conventions, not landing tokens. */
body.landing .w3-top :where(h1, h2, h3, h4, h5, h6) {
  font-family: inherit;
  color: inherit;
  line-height: 1.4;
  letter-spacing: normal;
  font-weight: 500;
}

/* Restore paragraph spacing inside the dropdown menus — the landing base
   collapses <p> margins which the dropdown's employer/school/location
   stack depends on for vertical rhythm. */
body.landing .w3-top p {
  margin: 8px 0;
  line-height: 1.4;
}

/* Buttons inside the navbar are w3-buttons with their own padding and
   color treatment — opt out of any landing button transitions. */
body.landing .w3-top button {
  font-family: inherit;
}

/* ---------- Settings ---------- */

.lp-settings-hero {
  background:
    radial-gradient(ellipse 60% 70% at 50% 100%, rgba(210, 247, 191, 0.45) 0%, transparent 70%),
    var(--lp-cream-deep);
  padding: clamp(72px, 9vw, 100px) var(--lp-section-pad-x) clamp(40px, 5vw, 56px);
  text-align: center;
  border-bottom: 1px solid var(--lp-line);
}
.lp-settings-hero__inner { max-width: 720px; margin: 0 auto; }
.lp-settings-hero .lp-eyebrow { color: var(--lp-green-dark); margin-bottom: 10px; }
.lp-settings-hero h1 {
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  font-weight: 800;
  color: var(--lp-ink);
}
.lp-settings-hero__lead {
  margin-top: 12px;
  font-size: 1.05rem;
  color: var(--lp-ink-muted);
}

.lp-settings {
  background: var(--lp-paper);
  padding: clamp(32px, 4vw, 56px) var(--lp-section-pad-x) clamp(60px, 6vw, 80px);
}
.lp-settings__inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 28px);
}

.lp-settings__card {
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-lg);
  box-shadow: var(--lp-shadow-sm);
  padding: clamp(24px, 3vw, 36px);
  scroll-margin-top: 100px;
}
.lp-settings__card-head {
  margin-bottom: 20px;
}
.lp-settings__card-head .lp-eyebrow {
  color: var(--lp-green-dark);
  font-size: 0.72rem;
  margin-bottom: 4px;
}
.lp-settings__card-head h2 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--lp-ink);
}
.lp-settings__card-head p {
  color: var(--lp-ink-muted);
  margin-top: 6px;
  font-size: 0.95rem;
}

.lp-settings__readonly {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--lp-cream-deep);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-sm);
  padding: 12px 16px;
  margin-bottom: 18px;
  font-size: 0.95rem;
}
.lp-settings__readonly-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lp-green-dark);
}
.lp-settings__readonly-value {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--lp-ink);
}

.lp-settings__actions {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.lp-settings__actions .lp-btn { min-width: 180px; justify-content: center; }
.lp-settings__alt {
  color: var(--lp-green-dark);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}
.lp-settings__alt:hover { text-decoration: underline; }

/* Settings alert variant */
.lp-settings__alert {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 18px;
  padding: 14px 16px;
}
.lp-settings__alert-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(1, 181, 36, 0.18);
  color: var(--lp-green-dark);
}
.lp-auth__notice--alert { background: rgba(179, 38, 30, 0.06); border-color: rgba(179, 38, 30, 0.22); border-left: 4px solid #b3261e; }
.lp-auth__notice--alert .lp-settings__alert-icon { background: rgba(179, 38, 30, 0.14); color: #b3261e; }
.lp-settings__alert p { margin: 0; line-height: 1.5; }
.lp-settings__alert p + p { margin-top: 4px; color: var(--lp-ink-muted); font-size: 0.92rem; }

/* Toggle switch */
.lp-toggle-row {
  padding: 14px 0;
  border-top: 1px solid var(--lp-line);
}
.lp-toggle-row:first-of-type { border-top: 0; padding-top: 4px; }
.lp-toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: flex-start;
  cursor: pointer;
  user-select: none;
}
.lp-toggle__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.lp-toggle__track {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: #d0d8c7;
  flex: 0 0 44px;
  transition: background var(--lp-duration) var(--lp-ease);
  margin-top: 2px;
}
.lp-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--lp-paper);
  box-shadow: 0 1px 3px rgba(25, 68, 18, 0.18);
  transition: transform var(--lp-duration) var(--lp-ease);
}
.lp-toggle__input:checked + .lp-toggle__track {
  background: var(--lp-green);
}
.lp-toggle__input:checked + .lp-toggle__track .lp-toggle__thumb {
  transform: translateX(18px);
}
.lp-toggle__input:focus-visible + .lp-toggle__track {
  box-shadow: 0 0 0 4px rgba(1, 181, 36, 0.18);
}
.lp-toggle__copy {
  display: block;
  line-height: 1.5;
}
.lp-toggle__copy strong {
  display: block;
  font-weight: 700;
  color: var(--lp-ink);
  font-size: 0.98rem;
  margin-bottom: 2px;
}
.lp-toggle__copy span {
  display: block;
  color: var(--lp-ink-muted);
  font-size: 0.88rem;
}

/* Master switch + child group */
.lp-toggle-group {
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  background: var(--lp-cream-deep);
  margin-top: 6px;
  overflow: hidden;
}
.lp-toggle-row--master {
  padding: 18px 18px;
  border-top: 0 !important;
  background: var(--lp-paper);
  border-bottom: 1px solid var(--lp-line);
}
.lp-toggle-group__children {
  padding: 4px 18px;
  transition: opacity var(--lp-duration) var(--lp-ease),
              filter var(--lp-duration) var(--lp-ease);
}
.lp-toggle-group__children[data-collapsed="true"] {
  opacity: 0.5;
  filter: grayscale(0.5);
  pointer-events: none;
}
.lp-toggle-group__children[data-collapsed="true"]::before {
  content: "Turn on Activity emails above to use these.";
  display: block;
  font-size: 0.82rem;
  color: var(--lp-ink-muted);
  font-style: italic;
  padding: 8px 0 4px;
}

/* ---------- Legal documents (terms, privacy, etc.) ---------- */

.lp-legal-hero {
  background:
    radial-gradient(ellipse 70% 80% at 50% 100%, rgba(210, 247, 191, 0.5) 0%, transparent 70%),
    var(--lp-cream-deep);
  padding: clamp(72px, 10vw, 120px) var(--lp-section-pad-x) clamp(40px, 5vw, 64px);
  text-align: center;
  border-bottom: 1px solid var(--lp-line);
}
.lp-legal-hero__inner {
  max-width: 720px;
  margin: 0 auto;
}
.lp-legal-hero .lp-eyebrow {
  color: var(--lp-green-dark);
  margin-bottom: 10px;
}
.lp-legal-hero h1 {
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  font-weight: 800;
  color: var(--lp-ink);
  line-height: 1.15;
}
.lp-legal-hero__lead {
  margin-top: 12px;
  font-size: clamp(1.05rem, 1.5vw, 1.15rem);
  color: var(--lp-ink-muted);
}
.lp-legal-hero__meta {
  margin-top: 20px;
  font-size: 0.85rem;
  color: var(--lp-ink-muted);
  letter-spacing: 0.04em;
}
.lp-legal-hero__dot { margin: 0 8px; opacity: 0.55; }

.lp-legal {
  background: var(--lp-paper);
  padding: clamp(40px, 5vw, 64px) var(--lp-section-pad-x);
}
.lp-legal__inner {
  max-width: 760px;
  margin: 0 auto;
  background: var(--lp-paper);
}
.lp-legal__intro {
  font-size: 1.05rem;
  color: var(--lp-ink-muted);
  border-left: 3px solid var(--lp-green);
  padding-left: 18px;
  margin-bottom: 32px;
}
.lp-legal__intro p { margin: 0; line-height: 1.6; }

.lp-legal__list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: legal-item;
}
.lp-legal__list > li {
  counter-increment: legal-item;
  position: relative;
  padding: 22px 0 22px 64px;
  border-bottom: 1px solid var(--lp-line);
}
.lp-legal__list > li:last-child { border-bottom: 0; }
.lp-legal__list > li::before {
  content: counter(legal-item);
  position: absolute;
  left: 0;
  top: 22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--lp-green-mint);
  color: var(--lp-green-deep);
  font-weight: 800;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
.lp-legal__list p {
  color: var(--lp-ink);
  line-height: 1.7;
  font-size: 1rem;
  margin: 0;
}
.lp-legal__list strong {
  color: var(--lp-ink);
  font-weight: 700;
}

.lp-legal__footer {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--lp-line);
  text-align: center;
  font-size: 0.9rem;
  color: var(--lp-ink-muted);
}

@media (max-width: 640px) {
  .lp-legal__list > li {
    padding-left: 0;
    padding-top: 60px;
  }
  .lp-legal__list > li::before {
    top: 16px;
    left: 0;
    width: 36px;
    height: 36px;
    font-size: 0.92rem;
  }
}

/* ---------- Auth flow (reset password, etc.) ---------- */

.lp-auth {
  position: relative;
  min-height: calc(100vh - 240px);
  padding: clamp(60px, 8vw, 100px) var(--lp-section-pad-x);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.lp-auth::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(170, 234, 140, 0.22) 0%, transparent 70%),
    var(--lp-cream);
  z-index: -1;
}
.lp-auth__inner {
  width: 100%;
  max-width: 480px;
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-lg);
  box-shadow: var(--lp-shadow-md);
  padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 40px);
  position: relative;
  overflow: hidden;
}
.lp-auth__inner::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, var(--lp-green) 0%, var(--lp-yellow) 100%);
}

.lp-auth__head {
  text-align: center;
  margin-bottom: clamp(20px, 3vw, 28px);
  padding-top: 8px;
}
.lp-auth__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--lp-green-mint);
  color: var(--lp-green-deep);
  margin: 0 auto 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lp-auth__icon--success {
  background: rgba(1, 181, 36, 0.15);
  color: var(--lp-green-dark);
}
.lp-auth__icon--alert {
  background: rgba(179, 38, 30, 0.10);
  color: #b3261e;
}
.lp-auth__head .lp-eyebrow {
  color: var(--lp-green-dark);
  margin-bottom: 6px;
}
.lp-auth__head h1 {
  font-size: clamp(1.5rem, 2.8vw, 1.95rem);
  font-weight: 800;
  color: var(--lp-ink);
  line-height: 1.2;
  margin: 4px 0 0;
}
.lp-auth__lead {
  margin-top: 10px;
  font-size: 1rem;
  color: var(--lp-ink-muted);
  line-height: 1.55;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

.lp-auth__or {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--lp-ink-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 4px 0;
}
.lp-auth__or::before,
.lp-auth__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--lp-line);
}
.lp-auth__or span { padding: 0 12px; }

.lp-auth__alt {
  margin: 18px 0 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--lp-ink-muted);
}
.lp-auth__alt a {
  color: var(--lp-green-dark);
  font-weight: 600;
  text-decoration: none;
}
.lp-auth__alt a:hover { text-decoration: underline; }

.lp-auth__notice {
  margin: 8px 0 20px;
  padding: 14px 18px;
  border-radius: var(--lp-radius-sm);
  background: var(--lp-cream-deep);
  border: 1px solid var(--lp-line);
  font-size: 0.93rem;
  color: var(--lp-ink);
  line-height: 1.55;
}
.lp-auth__notice p { margin: 0; }
.lp-auth__notice p + p { margin-top: 8px; }
.lp-auth__notice--info {
  background: rgba(1, 181, 36, 0.06);
  border-color: rgba(1, 181, 36, 0.22);
  border-left: 4px solid var(--lp-green);
  padding-left: 14px;
}
.lp-auth__notice--success {
  background: rgba(1, 181, 36, 0.08);
  border-color: rgba(1, 181, 36, 0.3);
}
.lp-auth__notice a {
  color: var(--lp-green-dark);
  font-weight: 600;
}

/* ---------- Help center ---------- */

.lp-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lp-help-hero {
  background:
    radial-gradient(ellipse 70% 80% at 50% 100%, rgba(210, 247, 191, 0.5) 0%, transparent 70%),
    var(--lp-cream-deep);
  padding: clamp(72px, 10vw, 120px) var(--lp-section-pad-x) clamp(48px, 6vw, 80px);
  text-align: center;
  border-bottom: 1px solid var(--lp-line);
}
.lp-help-hero__inner {
  max-width: 760px;
  margin: 0 auto;
}
.lp-help-hero .lp-eyebrow {
  color: var(--lp-green-dark);
  margin-bottom: 12px;
}
.lp-help-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  color: var(--lp-ink);
  line-height: 1.1;
}
.lp-help-hero__lead {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--lp-ink-muted);
  margin-top: 12px;
}

.lp-help-search {
  position: relative;
  margin: 28px auto 0;
  max-width: 520px;
  display: flex;
  align-items: center;
}
.lp-help-search__icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--lp-ink-muted);
  pointer-events: none;
}
.lp-help-search input {
  width: 100%;
  padding: 14px 18px 14px 48px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--lp-ink);
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-pill);
  box-shadow: var(--lp-shadow-sm);
  transition: border-color var(--lp-duration) var(--lp-ease),
              box-shadow var(--lp-duration) var(--lp-ease);
  -webkit-appearance: none;
  appearance: none;
}
.lp-help-search input::placeholder { color: rgba(50, 80, 41, 0.55); }
.lp-help-search input:focus,
.lp-help-search input:focus-visible {
  outline: none;
  border-color: var(--lp-green);
  box-shadow: 0 0 0 4px rgba(1, 181, 36, 0.15);
}
.lp-help-search__hint {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.82rem;
  color: var(--lp-ink-muted);
  pointer-events: none;
}

.lp-help-hero__chips {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.lp-help-hero__chips a {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--lp-radius-pill);
  background: var(--lp-paper);
  color: var(--lp-green-dark);
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid var(--lp-line);
  text-decoration: none;
  transition: background var(--lp-duration) var(--lp-ease),
              border-color var(--lp-duration) var(--lp-ease),
              color var(--lp-duration) var(--lp-ease);
}
.lp-help-hero__chips a:hover,
.lp-help-hero__chips a:focus-visible {
  background: var(--lp-green-mint);
  border-color: var(--lp-green);
  color: var(--lp-green-deep);
  outline: none;
}

/* Main grid */
.lp-help {
  background: var(--lp-paper);
  padding: clamp(40px, 5vw, 64px) var(--lp-section-pad-x);
}
.lp-help__inner {
  max-width: var(--lp-max);
  margin: 0 auto;
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  grid-template-columns: 240px 1fr;
  align-items: start;
}

@media (max-width: 900px) {
  .lp-help__inner { grid-template-columns: 1fr; }
}

/* Sticky TOC */
.lp-help__toc {
  position: sticky;
  top: 88px;
  align-self: start;
  font-size: 0.92rem;
}
.lp-help__toc-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lp-green-dark);
  margin: 0 0 12px;
}
.lp-help__toc-list,
.lp-help__toc-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.lp-help__toc-list > li { margin-bottom: 18px; }
.lp-help__toc-list > li > a {
  display: block;
  font-weight: 700;
  color: var(--lp-ink);
  text-decoration: none;
  padding: 4px 0;
  border-left: 3px solid transparent;
  padding-left: 10px;
  margin-left: -10px;
  transition: color var(--lp-duration) var(--lp-ease),
              border-color var(--lp-duration) var(--lp-ease);
}
.lp-help__toc-list > li > a:hover,
.lp-help__toc-list > li > a:focus-visible {
  color: var(--lp-green-dark);
  border-left-color: var(--lp-green);
  outline: none;
}
.lp-help__toc-list ul {
  margin-top: 6px;
  padding-left: 12px;
  border-left: 1px solid var(--lp-line);
}
.lp-help__toc-list ul li a {
  display: block;
  color: var(--lp-ink-muted);
  text-decoration: none;
  padding: 3px 0;
  font-size: 0.88rem;
  transition: color var(--lp-duration) var(--lp-ease);
}
.lp-help__toc-list ul li a:hover,
.lp-help__toc-list ul li a:focus-visible {
  color: var(--lp-green-dark);
  outline: none;
}

@media (max-width: 900px) {
  .lp-help__toc {
    position: static;
    background: var(--lp-cream-deep);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    padding: 18px 20px;
  }
}

/* Content */
.lp-help__section + .lp-help__section { margin-top: clamp(40px, 5vw, 64px); }
.lp-help__section-head { margin-bottom: 18px; }
.lp-help__section-head .lp-eyebrow {
  color: var(--lp-green-dark);
  font-size: 0.72rem;
  margin-bottom: 6px;
}
.lp-help__section-head h2 {
  font-size: clamp(1.5rem, 2.8vw, 1.9rem);
  font-weight: 800;
  color: var(--lp-ink);
}

/* Accordion item */
.lp-help__item {
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  margin-bottom: 12px;
  box-shadow: var(--lp-shadow-sm);
  transition: border-color var(--lp-duration) var(--lp-ease),
              box-shadow var(--lp-duration) var(--lp-ease);
  scroll-margin-top: 88px;
}
.lp-help__item[open] {
  border-color: rgba(1, 181, 36, 0.3);
  box-shadow: var(--lp-shadow-md);
}
.lp-help__item > summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 56px 18px 22px;
  font-weight: 700;
  color: var(--lp-ink);
  font-size: 1.02rem;
  line-height: 1.4;
  position: relative;
  border-radius: var(--lp-radius);
  user-select: none;
}
.lp-help__item > summary::-webkit-details-marker { display: none; }
.lp-help__item > summary:hover { color: var(--lp-green-dark); }
.lp-help__item > summary:focus-visible {
  outline: 2px solid var(--lp-green);
  outline-offset: 2px;
}
.lp-help__chev {
  position: absolute;
  right: 22px;
  top: 50%;
  width: 14px;
  height: 14px;
  border-right: 2px solid var(--lp-green-dark);
  border-bottom: 2px solid var(--lp-green-dark);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--lp-duration) var(--lp-ease);
}
.lp-help__item[open] .lp-help__chev {
  transform: translateY(-30%) rotate(-135deg);
}

.lp-help__answer {
  padding: 0 22px 22px;
  color: var(--lp-ink);
  line-height: 1.65;
  font-size: 0.98rem;
}
.lp-help__answer > * + * { margin-top: 12px; }
.lp-help__answer p:first-child { margin-top: 0; }
.lp-help__answer a {
  color: var(--lp-green-dark);
  font-weight: 600;
}

.lp-help__quote {
  margin: 16px 0;
  padding: 12px 18px;
  background: var(--lp-cream-deep);
  border-left: 4px solid var(--lp-green);
  border-radius: 0 var(--lp-radius-sm) var(--lp-radius-sm) 0;
  font-size: 0.94rem;
  color: var(--lp-ink-muted);
}
.lp-help__quote p { margin: 0; }
.lp-help__quote em { color: var(--lp-ink); font-style: italic; }

.lp-help__callout {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: var(--lp-radius-sm);
  font-size: 0.95rem;
  background: var(--lp-cream-deep);
  border: 1px solid var(--lp-line);
  color: var(--lp-ink);
}
.lp-help__callout--tip {
  background: rgba(1, 181, 36, 0.06);
  border-color: rgba(1, 181, 36, 0.2);
}
.lp-help__callout--tip strong {
  color: var(--lp-green-dark);
}

/* Markdown guide */
.lp-md-guide {
  display: grid;
  gap: 20px;
  margin-top: 8px;
}
.lp-md-guide__group h4 {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--lp-green-dark);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.lp-md-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-sm);
  overflow: hidden;
  background: var(--lp-cream);
}
.lp-md-table td {
  padding: 12px 16px;
  vertical-align: middle;
  border-bottom: 1px solid var(--lp-line);
  font-size: 0.92rem;
}
.lp-md-table tr:last-child td { border-bottom: 0; }
.lp-md-table td:first-child {
  width: 45%;
  background: var(--lp-paper);
  border-right: 1px solid var(--lp-line);
}
.lp-md-table code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88rem;
  background: rgba(25, 68, 18, 0.06);
  color: var(--lp-green-dark);
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-block;
  line-height: 1.5;
}
.lp-md-sample {
  background: rgba(1, 181, 36, 0.10);
  color: var(--lp-green-dark);
}
.lp-md-heading-1 { font-size: 1.2rem; font-weight: 800; color: var(--lp-ink); }
.lp-md-heading-2 { font-size: 1.05rem; font-weight: 700; color: var(--lp-ink); }
.lp-md-heading-3 { font-size: 0.95rem; font-weight: 700; color: var(--lp-ink); }

/* Bottom CTA cards */
.lp-help-cta {
  margin-top: clamp(48px, 6vw, 72px);
  padding: 0 var(--lp-section-pad-x);
}
.lp-help-cta__inner {
  max-width: var(--lp-max);
  margin: 0 auto;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 720px) {
  .lp-help-cta__inner { grid-template-columns: 1fr; }
}
.lp-help-cta__card {
  background: var(--lp-cream-deep);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  padding: clamp(24px, 3vw, 36px);
  text-align: center;
}
.lp-help-cta__card h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--lp-ink);
  margin-bottom: 8px;
}
.lp-help-cta__card p {
  color: var(--lp-ink-muted);
  margin-bottom: 18px;
}
.lp-help-cta__card--ghost {
  background: var(--lp-paper);
}

/* ---------- Footer adjustments ---------- */

body.landing footer.w3-container {
  background: var(--lp-green-deep) !important;
  color: rgba(255, 255, 255, 0.78);
  padding: 28px var(--lp-section-pad-x);
  font-size: 0.92rem;
  border-top: 1px solid rgba(252, 215, 3, 0.18);
}
body.landing footer.w3-container p {
  max-width: var(--lp-max);
  margin: 0 auto;
}
body.landing footer.w3-container a,
body.landing footer.w3-container a.w3-text-theme-yellow {
  color: var(--lp-yellow) !important;
  border-bottom: none;
  text-decoration: none;
  transition: color var(--lp-duration) var(--lp-ease);
}
body.landing footer.w3-container a:hover,
body.landing footer.w3-container a:focus-visible {
  color: var(--lp-yellow-soft) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.landing footer.w3-container .w3-right {
  color: rgba(255, 255, 255, 0.55);
}

/* ---------- Mobile-specific adjustments ---------- */

@media (max-width: 640px) {
  .lp-nav {
    gap: 8px;
    padding: 10px 16px;
  }
  .lp-nav__brand img { height: 32px; }
  .lp-signin > summary {
    padding: 8px 14px;
    font-size: 0.85rem;
  }
  .lp-signin__form {
    width: calc(100vw - 32px);
    right: -8px;
  }
  .lp-btn { padding: 11px 18px; font-size: 0.9rem; }
  .lp-hero__art { display: none; }
}

@media (max-width: 480px) {
  .lp-trust__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  body.landing * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .lp-btn:hover,
  .lp-pillar:hover,
  .lp-usecases__chips li:hover {
    transform: none;
  }
}