/* ============================================================================
   Plansy — public landing page ("/", signed-out visitors only).

   Loaded alongside variables.css + base.css ONLY, never components/layout/
   pages.css. The landing page is the one screen with no app chrome, no forms
   and no data on it, and the app's component classes are all sized for dense
   product UI — .auth-card in particular is hard-capped at 440px, which is
   exactly right for a login box and exactly wrong for a hero. So this file
   owns its own type scale and its own components under an .lp- prefix, and
   inherits only the design tokens, the self-hosted font, the reset, the
   ambient background and the skip link from the two files above it.

   Everything here is CSS-only: the app's CSP is style-src 'self' with no
   'unsafe-inline' (see App\Security\Headers), so there are no inline style
   attributes and no scripted reveals anywhere on this page. Scroll-triggered
   animation is done with animation-timeline: view() behind an @supports
   guard, which degrades to "simply visible" in browsers without it.
   ========================================================================= */

.lp {
  /* ---- Landing-local type scale. Deliberately much larger than the app's
     --text-* ramp: this is the only page whose job is to be read from across
     a room rather than worked in. ---- */
  --lp-display: clamp(2.75rem, 1.1rem + 6.6vw, 6.25rem);
  --lp-h2: clamp(2.1rem, 1.15rem + 3.8vw, 4rem);
  --lp-h3: clamp(1.45rem, 1.15rem + 1.5vw, 2.15rem);
  --lp-lead: clamp(1.18rem, 1rem + 1vw, 1.65rem);
  --lp-body: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  --lp-small: clamp(0.9rem, 0.86rem + 0.2vw, 1rem);

  --lp-max: 1180px;
  --lp-gutter: clamp(20px, 5vw, 64px);
  --lp-rule: color-mix(in srgb, var(--color-text) 14%, transparent);
  --lp-rule-soft: color-mix(in srgb, var(--color-text) 8%, transparent);

  display: block;
  max-width: var(--lp-max);
  margin: 0 auto;
  padding: 0 var(--lp-gutter) clamp(48px, 8vw, 120px);
  font-size: var(--lp-body);
  line-height: var(--leading-relaxed);
}

/* Element-level resets for base.css's margins/colours, written through
   :where() so they carry zero specificity — every .lp- class below can then
   set its own margin without an !important arms race against `.lp p`. */
:where(.lp) :where(p) { margin: 0; color: var(--color-text-muted); }
:where(.lp) :where(h1, h2, h3) { margin: 0; text-wrap: balance; }
.lp .icon { width: 22px; height: 22px; flex-shrink: 0; }

/* Shared section rhythm — one generous, consistent vertical beat rather than
   per-section one-offs. */
.lp-section { padding-block: clamp(56px, 9vw, 132px); }
.lp-section + .lp-section { border-top: 1px solid var(--lp-rule-soft); }

/* ---------------------------------------------------------------- eyebrow */
.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--lp-small);
  font-weight: var(--weight-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  background: var(--color-accent-subtle);
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
}

.lp-eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: var(--glow-accent-sm);
}

/* =================================================================== HERO */
.lp-hero {
  position: relative;
  padding-block: clamp(40px, 7vw, 88px) clamp(56px, 9vw, 120px);
}

.lp-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  margin-bottom: clamp(32px, 5vw, 56px);
}

.lp-brand img {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  box-shadow: 0 2px 10px rgba(21, 24, 43, 0.2), var(--glow-accent-sm);
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .lp-brand span {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.lp-title {
  font-size: var(--lp-display);
  font-weight: var(--weight-bold);
  letter-spacing: -0.045em;
  line-height: 0.94;
  margin: clamp(20px, 2.4vw, 30px) 0 clamp(28px, 3.6vw, 46px);
}

/* The turn in the sentence gets the accent gradient — one emphasis per page,
   on the clause that carries the whole pitch. */
.lp-title em {
  display: block;
  font-style: normal;
  color: var(--color-accent-text);
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .lp-title em {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* The headline runs full-bleed; the lead and the call to action sit side by
   side underneath it. Stacking all three vertically pushed the Log in button
   below the fold on a laptop and left the entire right half of the hero
   empty — this band uses that width and buys back ~250px of height. */
.lp-hero-band {
  display: grid;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

@media (min-width: 900px) {
  .lp-hero-band { grid-template-columns: minmax(0, 1fr) minmax(300px, 430px); }
}

.lp-lead {
  font-size: var(--lp-lead);
  line-height: 1.45;
  font-weight: var(--weight-regular);
  max-width: 40ch;
}

.lp-hero-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.lp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.lp-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: clamp(14px, 1.4vw, 19px) clamp(26px, 2.6vw, 38px);
  border-radius: var(--radius-pill);
  font-size: clamp(1rem, 0.94rem + 0.34vw, 1.2rem);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform var(--duration-base) var(--ease-spring),
              box-shadow var(--duration-base) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

.lp-btn:hover { transform: translateY(-2px); }
.lp-btn:active { transform: translateY(0); }

.lp-btn-primary {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--color-accent) 42%, transparent), var(--glow-accent);
}
.lp-btn-primary:hover { background: var(--color-accent-hover); }
.lp-btn-primary:focus-visible { box-shadow: var(--shadow-focus), var(--glow-accent); }

.lp-btn-ghost {
  color: var(--color-text);
  border-color: var(--color-border-strong);
  background: var(--glass-bg-lite);
}
.lp-btn-ghost:hover {
  border-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-border-strong));
  box-shadow: var(--glow-accent-sm);
}

.lp-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: 46ch;
  width: 100%;
  font-size: var(--lp-small);
  color: var(--color-text-muted);
  background: var(--color-accent-subtle);
  border: 1px solid color-mix(in srgb, var(--color-accent) 22%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}

.lp-note .icon { width: 20px; height: 20px; color: var(--color-accent-text); margin-top: 1px; }

/* ============================================================ HOW IT WORKS */
.lp-section-head { max-width: 46ch; margin-bottom: clamp(40px, 6vw, 76px); }

.lp-section-head h2 {
  font-size: var(--lp-h2);
  font-weight: var(--weight-bold);
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: var(--space-4) 0 var(--space-5);
}

.lp-section-head p { font-size: var(--lp-lead); line-height: 1.45; }

.lp-steps { counter-reset: none; }

.lp-step {
  display: grid;
  grid-template-columns: clamp(74px, 9vw, 150px) minmax(0, 1fr);
  gap: clamp(18px, 3.5vw, 56px);
  padding-block: clamp(32px, 4.5vw, 60px);
  border-top: 1px solid var(--lp-rule);
}

.lp-step:last-child { border-bottom: 1px solid var(--lp-rule); }

/* Oversized ghost numeral. Outlined rather than filled so it reads as a
   typographic landmark instead of competing with the step's own heading. */
.lp-step-num {
  font-size: clamp(2.7rem, 1.8rem + 3.6vw, 5.4rem);
  font-weight: var(--weight-bold);
  letter-spacing: -0.05em;
  line-height: 0.85;
  color: color-mix(in srgb, var(--color-accent) 34%, transparent);
  font-variant-numeric: tabular-nums;
}

@supports (-webkit-text-stroke: 1px currentColor) {
  .lp-step-num {
    color: transparent;
    -webkit-text-stroke: 1.6px color-mix(in srgb, var(--color-accent) 62%, transparent);
    transition: -webkit-text-stroke-color var(--duration-base) var(--ease-standard);
  }
  .lp-step:hover .lp-step-num { -webkit-text-stroke-color: var(--color-accent); }
}

.lp-step-body h3 {
  font-size: var(--lp-h3);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: var(--space-4);
}

.lp-step-body p { max-width: 62ch; font-size: var(--lp-body); }

.lp-step-points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-5);
}

.lp-step-points li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--lp-small);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
}

.lp-step-points .icon { width: 16px; height: 16px; color: var(--color-accent-text); }

@media (max-width: 640px) {
  .lp-step { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ================================================================ FEATURES */
.lp-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}

.lp-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: clamp(24px, 2.6vw, 38px);
  background: var(--glass-bg-lite);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-spring),
              box-shadow var(--duration-base) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

.lp-feature:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border-strong));
  box-shadow: var(--glass-shadow-lg), var(--glow-accent-sm);
}

/* A soft accent wash bleeding in from the top-left corner, revealed on
   hover — depth without another border or another shadow. */
.lp-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at 0% 0%,
              color-mix(in srgb, var(--color-accent) 15%, transparent), transparent 68%);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
  pointer-events: none;
}
.lp-feature:hover::before { opacity: 1; }

.lp-feature > * { position: relative; }

.lp-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--color-accent-subtle);
  color: var(--color-accent-text);
  border: 1px solid color-mix(in srgb, var(--color-accent) 24%, transparent);
}
.lp-feature-icon .icon { width: 25px; height: 25px; }

.lp-feature h3 {
  font-size: clamp(1.18rem, 1.05rem + 0.5vw, 1.45rem);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
}

.lp-feature p { font-size: var(--lp-body); line-height: 1.55; }

/* Two of the ten tiles run double-width, so the grid reads as a composed
   layout rather than a uniform waffle. 10 tiles + 2 double spans = 12 units
   = four clean rows of three on desktop. */
@media (min-width: 960px) {
  .lp-feature-wide { grid-column: span 2; }
  .lp-feature-wide h3 { font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.8rem); }
  .lp-feature-wide p { max-width: 58ch; }
}

/* ============================================================== PRINCIPLES */
.lp-principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(28px, 4vw, 56px);
}

.lp-principle { border-top: 2px solid var(--color-accent); padding-top: clamp(20px, 2.4vw, 30px); }

.lp-principle h3 {
  font-size: clamp(1.3rem, 1.1rem + 0.85vw, 1.75rem);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: var(--space-3);
}

.lp-principle p { font-size: var(--lp-body); }

/* ================================================================== CLOSER */
.lp-closer {
  text-align: center;
  margin-top: clamp(24px, 4vw, 56px);
  padding: clamp(48px, 7vw, 100px) clamp(24px, 4vw, 64px);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--glass-shadow-lg);
}

.lp-closer h2 {
  font-size: var(--lp-h2);
  font-weight: var(--weight-bold);
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin-bottom: var(--space-5);
}

.lp-closer p {
  font-size: var(--lp-lead);
  line-height: 1.45;
  max-width: 44ch;
  margin: 0 auto clamp(32px, 4vw, 44px);
}

.lp-closer .lp-actions { justify-content: center; margin-bottom: 0; }

/* ================================================================== FOOTER */
.lp-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-top: clamp(40px, 5vw, 64px);
  margin-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--lp-rule-soft);
}

.lp-signature {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.lp-signature img {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.lp-signature strong {
  display: block;
  font-size: var(--lp-small);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.lp-signature p { font-size: var(--lp-small); margin: 2px 0 0; }

.lp-footer-link {
  font-size: var(--lp-small);
  font-weight: var(--weight-semibold);
  color: var(--color-accent-text);
  text-decoration: none;
}
.lp-footer-link:hover { text-decoration: underline; }

/* ================================================================== MOTION */
/* One orchestrated entrance for the hero — staggered, and only on the
   above-the-fold block, so the page settles once instead of twitching. */
@keyframes lp-rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .lp-hero .lp-brand,
  .lp-hero .lp-eyebrow,
  .lp-hero .lp-title,
  .lp-hero .lp-lead,
  .lp-hero .lp-actions,
  .lp-hero .lp-note {
    animation: lp-rise 620ms var(--ease-standard) both;
  }
  .lp-hero .lp-brand { animation-delay: 0ms; }
  .lp-hero .lp-eyebrow { animation-delay: 70ms; }
  .lp-hero .lp-title { animation-delay: 140ms; }
  .lp-hero .lp-lead { animation-delay: 210ms; }
  .lp-hero .lp-actions { animation-delay: 280ms; }
  .lp-hero .lp-note { animation-delay: 350ms; }
}

/* Scroll-triggered reveal for everything below the fold. Scoped entirely
   inside @supports: browsers without scroll-driven animations (Firefox and
   Safari at time of writing) never see the opacity:0 start state and simply
   render the sections normally. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lp-step,
    .lp-feature,
    .lp-principle,
    .lp-closer,
    .lp-section-head {
      animation: lp-rise linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }
  }
}