/* ==========================================================================
   The landing page — hero on the left, sign-in on the right

   Its own stylesheet because nothing here is reused: the rest of the site is
   a header, a content column and a footer, and this page is a full-bleed
   two-panel screen that exists to get someone signed in.

   Every colour comes from a brand token, so the owner's palette repaints this
   page along with everything else. There are no literal colours below except
   white-on-navy alphas, which are deliberately relative to whatever navy is.
   ========================================================================== */

.lp {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--bg);
}
@media (min-width: 1000px) {
  .lp { grid-template-columns: 1.05fr 1fr; }
}

/* ---------------- left: the hero ---------------- */
.lp__hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 32px 24px 40px;
  background: var(--navy);
  color: #fff;
  isolation: isolate;
}
@media (min-width: 640px)  { .lp__hero { padding: 48px 40px; } }
@media (min-width: 1000px) { .lp__hero { padding: 56px 56px 48px; } }

/* The cursor spotlight. Driven by two custom properties that landing.js
   writes, so the movement costs no layout and no re-render. */
.lp__spot {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .6;
  background: radial-gradient(
    600px circle at var(--spot-x, 50%) var(--spot-y, 40%),
    color-mix(in srgb, var(--cobalt) 30%, transparent),
    transparent 60%);
  transition: background-position .2s ease-out;
}
/* No color-mix (older Safari): a plain tint rather than nothing at all. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .lp__spot {
    background: radial-gradient(600px circle at var(--spot-x, 50%) var(--spot-y, 40%),
                rgba(255, 255, 255, .14), transparent 60%);
  }
}

.lp__grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .14;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .55) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .55) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at top left, #000, transparent 70%);
          mask-image: radial-gradient(ellipse at top left, #000, transparent 70%);
}

.lp__orb {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(60px);
}
.lp__orb--a {
  inset-inline-end: -96px; top: -96px;
  width: 384px; height: 384px; opacity: .3;
  background: radial-gradient(circle, var(--cobalt), transparent 70%);
  animation: lp-float-slow 7s ease-in-out infinite;
}
.lp__orb--b {
  inset-inline-start: -80px; bottom: -128px;
  width: 320px; height: 320px; opacity: .2;
  background: radial-gradient(circle, var(--sky), transparent 70%);
  animation: lp-float-slower 9s ease-in-out infinite;
}

.lp-brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -.02em;
  animation: lp-fade-down .6s cubic-bezier(.16, 1, .3, 1) both;
}
.lp-brand__mark {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--cobalt);
  box-shadow: 0 10px 24px -8px var(--cobalt);
  font-size: .9375rem;
  font-weight: 800;
  /* Always white: the badge's own background is the brand colour, and in the
     light hero the surrounding text colour is navy, which it would otherwise
     inherit and lose to the badge at about 2:1. */
  color: #fff;
}

.lp-mid { position: relative; max-width: 36rem; }

.lp-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(6px);
  font-size: .75rem;
  font-weight: 600;
  animation: lp-fade-up .6s cubic-bezier(.16, 1, .3, 1) both;
}
.lp-badge svg { width: 14px; height: 14px; color: var(--sky); }

.lp-h1 {
  margin: 24px 0 0;
  font-size: clamp(2.125rem, 6vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  font-weight: 800;
  color: #fff;
}
/* Each word fades up in turn. The delay is set inline per word by build.py
   rather than with nth-child, so the headline can be any length. */
.lp-h1 span {
  display: inline-block;
  margin-inline-end: .25em;
  animation: lp-fade-up .7s cubic-bezier(.16, 1, .3, 1) both;
}
.lp-h1 .lp-shimmer {
  margin-inline-end: .1em;
  background: linear-gradient(100deg,
    var(--sky) 20%, #fff 45%, var(--sky) 70%);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: lp-fade-up .7s cubic-bezier(.16, 1, .3, 1) both,
             lp-shimmer 6s linear 1s infinite;
}

.lp-sub {
  margin: 20px 0 0;
  max-width: 30rem;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .72);
  animation: lp-fade-up .6s cubic-bezier(.16, 1, .3, 1) .45s both;
}
@media (min-width: 640px) { .lp-sub { font-size: 1.0625rem; } }

.lp-stats {
  margin: 30px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  animation: lp-fade-up .6s cubic-bezier(.16, 1, .3, 1) .55s both;
}
.lp-stat__n {
  font-size: clamp(1.25rem, 3.4vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.lp-stat__l {
  margin-top: 2px;
  font-size: .75rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, .6);
}

/* The illustration. Tilts toward the pointer; landing.js sets the angles. */
.lp-art {
  position: relative;
  margin-top: 8px;
  perspective: 900px;
  animation: lp-fade-up .8s cubic-bezier(.16, 1, .3, 1) .5s both;
}
.lp-art__inner {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7);
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .25s ease-out;
  background: color-mix(in srgb, var(--navy) 70%, #000);
}
.lp-art svg { display: block; width: 100%; height: auto; }
@media (max-width: 639px) { .lp-art { display: none; } }

.lp-foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: .75rem;
  color: rgba(255, 255, 255, .55);
}
.lp-foot__sec { display: inline-flex; align-items: center; gap: 6px; }
.lp-foot__sec svg { width: 14px; height: 14px; color: var(--sky); }

/* ---------------- right: the sign-in panel ---------------- */
.lp__panel {
  position: relative;
  display: grid;
  place-items: center;
  padding: 40px 24px 56px;
  background: var(--bg);
  overflow: hidden;
}
@media (min-width: 640px) { .lp__panel { padding: 56px 40px; } }

.lp__panel::before {           /* the ambient glow, decorative */
  content: "";
  position: absolute;
  inset-inline-end: -160px;
  top: 30%;
  width: 384px; height: 384px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cobalt), transparent 70%);
  opacity: .07;
  filter: blur(60px);
  pointer-events: none;
  animation: lp-breathe 8s ease-in-out infinite;
}

.lp-form-wrap { position: relative; width: 100%; max-width: 27rem; }

/* role toggle */
.lp-roles {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 28px;
  padding: 6px;
  border-radius: 14px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
}
.lp-roles__thumb {
  position: absolute;
  inset-block: 6px;
  inset-inline-start: 6px;
  width: calc(50% - 6px);
  border-radius: 10px;
  background: var(--blue-btn);
  box-shadow: 0 8px 18px -8px var(--blue-btn);
  transition: transform .32s cubic-bezier(.34, 1.4, .5, 1);
}
.lp-roles[data-role="landlord"] .lp-roles__thumb { transform: translateX(100%); }

.lp-role {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 8px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--body);
  font: inherit;
  font-weight: 700;
  font-size: .875rem;
  cursor: pointer;
  transition: color 160ms var(--ease-out);
}
.lp-role svg { width: 16px; height: 16px; }
.lp-role[aria-selected="true"] { color: #fff; }
.lp-role:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.lp-copy h2 {
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: -.02em;
  color: var(--heading);
}
.lp-copy p { margin: 6px 0 0; font-size: .875rem; color: var(--muted); }
.lp-copy { animation: lp-fade-up .35s ease-out both; }

.lp-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.lp-perks li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--blue-soft);
  /* Not --blue-deep: that is a fixed brand navy, and on the dark theme the
     tint behind it is a translucent blue over a dark page, which left this
     text at 1.65:1. --blue-ink is redefined per theme for exactly this. */
  color: var(--blue-ink);
  font-size: .75rem;
  font-weight: 600;
}
.lp-perks svg { width: 12px; height: 12px; color: var(--blue); }

.lp-form { margin-top: 26px; display: grid; gap: 16px; }

.lp-field label {
  display: block;
  margin-bottom: 6px;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--heading);
}
.lp-field__box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
.lp-field__box:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-soft);
}
.lp-field__box svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.lp-field input {
  flex: 1;
  min-width: 0;
  padding: 12px 0;
  border: 0;
  background: none;
  color: var(--heading);
  font: inherit;
  font-size: .9375rem;
}
.lp-field input:focus { outline: none; }

.lp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: .875rem;
}
.lp-row label { display: inline-flex; align-items: center; gap: 8px; color: var(--body); cursor: pointer; }
.lp-row a { color: var(--blue); font-weight: 600; }

.lp-submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: 12px;
  background: var(--blue-btn);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: .9375rem;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 12px 24px -12px var(--blue-btn);
  transition: transform .18s, box-shadow .18s;
}
@media (hover: hover) and (pointer: fine) {
  .lp-submit:hover:not(:disabled) { box-shadow: 0 16px 30px -12px var(--blue-btn);}
}
.lp-submit:disabled { opacity: .7; cursor: default; }
.lp-submit svg { width: 16px; height: 16px; transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .lp-submit:hover:not(:disabled) svg { transform: translateX(3px);}
}
.lp-submit__sheen {
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .lp-submit:hover:not(:disabled) .lp-submit__sheen {
  transform: translateX(100%);
  transition: transform .7s;}
}
.lp-spin {
  width: 16px; height: 16px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: lp-spin .7s linear infinite;
}

.lp-div {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
  font-size: .75rem;
  color: var(--muted);
}
.lp-div::before, .lp-div::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.lp-alt {
  display: block;
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--heading);
  font: inherit;
  font-weight: 700;
  font-size: .9375rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
@media (hover: hover) and (pointer: fine) {
  .lp-alt:hover { background: var(--bg-alt); transform: translateY(-1px);}
}

.lp-terms { margin: 22px 0 0; text-align: center; font-size: .75rem; color: var(--muted); }
.lp-terms a { color: var(--blue); font-weight: 600; }

.lp-msg {
  margin: 0;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: .875rem;
  font-weight: 600;
}
.lp-msg--bad { background: var(--danger-bg); color: var(--danger-ink); }
.lp-msg--ok  { background: var(--ok-bg); color: var(--ok-ink); }

/* ---------------- the marquee band ---------------- */
.lp-marquee {
  grid-column: 1 / -1;
  display: flex;
  gap: 0;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  background: var(--bg-alt);
  overflow: hidden;
  /* Decorative repetition — one copy is announced, see landing.js. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.lp-marquee__track {
  display: flex;
  flex: none;
  align-items: center;
  gap: 40px;
  padding-inline-end: 40px;
  animation: lp-marquee 28s linear infinite;
}
.lp-marquee span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--muted);
}
.lp-marquee span::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--blue);
  flex: none;
}
@media (hover: hover) and (pointer: fine) {
  .lp-marquee:hover .lp-marquee__track { animation-play-state: paused;}
}

/* ---------------- animations ---------------- */
@keyframes lp-float-slow   { 0%, 100% { transform: translateY(0) rotate(0); }
                             50%      { transform: translateY(-14px) rotate(2deg); } }
@keyframes lp-float-slower { 0%, 100% { transform: translateY(0); }
                             50%      { transform: translateY(10px); } }
@keyframes lp-shimmer      { 0% { background-position: 200% center; }
                             100% { background-position: -200% center; } }
@keyframes lp-fade-up      { from { opacity: 0; transform: translateY(18px); }
                             to   { opacity: 1; transform: none; } }
@keyframes lp-fade-down    { from { opacity: 0; transform: translateY(-12px); }
                             to   { opacity: 1; transform: none; } }
@keyframes lp-spin         { to { transform: rotate(360deg); } }
@keyframes lp-breathe      { 0%, 100% { transform: scale(1); }
                             50%      { transform: scale(1.12); } }
@keyframes lp-marquee      { from { transform: translateX(0); }
                             to   { transform: translateX(-100%); } }

/* Someone who has asked for less motion gets the page, not the performance.
   Everything still arrives in its final state — nothing is hidden by an
   animation that no longer runs. */
@media (prefers-reduced-motion: reduce) {
  .lp-brand, .lp-badge, .lp-h1 span, .lp-sub, .lp-stats, .lp-art, .lp-copy {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .lp__orb--a, .lp__orb--b, .lp__panel::before,
  .lp-marquee__track, .lp-h1 .lp-shimmer { animation: none !important; }
  .lp-h1 .lp-shimmer { color: var(--sky); background: none; -webkit-text-fill-color: currentColor; }
  .lp__spot { display: none; }
  .lp-art__inner { transform: none !important; }
}

/* The third entrance. Quieter than the two above it on purpose: contractors
   are a small share of the traffic, and giving them equal billing would turn
   a two-way question into a three-way one for everybody else. */
.lp-trade {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: none;
  color: var(--body);
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
@media (hover: hover) and (pointer: fine) {
  .lp-trade:hover { background: var(--bg-alt); border-color: var(--blue);}
}
.lp-trade > svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.lp-trade > svg:last-child { margin-inline-start: auto; }
.lp-trade span { display: block; min-width: 0; }
.lp-trade strong { display: block; font-size: .8125rem; color: var(--heading); }
.lp-trade small { display: block; font-size: .75rem; color: var(--muted); }

/* ==========================================================================
   The light hero

   The left panel has two looks, chosen by the agency (and, on "follow the
   theme", by the visitor): the navy it started with, and a pale one. The look
   is resolved to a single attribute, data-hero-look, so everything below keys
   on that and nothing here has to reason about three settings across the four
   theme states.

   The pale look is fixed-pale: it does not go dark with the page, because it is
   the agency's explicit choice. So its text is the brand's navy rather than
   the theme's heading colour — the heading colour turns near-white in the dark
   theme, which on a pale panel would vanish.
   ========================================================================== */
.lp-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; }

:root[data-hero-look="light"] .lp__hero {
  /* A solid colour under the gradient: it is what shows if the gradient does
     not paint, and it is the colour that text contrast is measured against. */
  background-color: var(--cloud);
  background-image: linear-gradient(155deg, var(--sky) 0%, var(--cloud) 70%);
  color: var(--navy);
}
:root[data-hero-look="light"] .lp-brand { color: var(--navy); }
:root[data-hero-look="light"] .lp-badge {
  border-color: color-mix(in srgb, var(--navy) 26%, transparent);
  background: rgba(255, 255, 255, .7);
  color: var(--navy);
}
:root[data-hero-look="light"] .lp-badge svg { color: var(--cobalt); }
:root[data-hero-look="light"] .lp-h1 { color: var(--navy); }
:root[data-hero-look="light"] .lp-h1 .lp-shimmer {
  background: linear-gradient(100deg, var(--cobalt) 20%, var(--navy) 55%, var(--cobalt) 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
}
:root[data-hero-look="light"] .lp-sub { color: color-mix(in srgb, var(--navy) 86%, #fff); }
:root[data-hero-look="light"] .lp-stat__n { color: var(--navy); }
:root[data-hero-look="light"] .lp-stat__l { color: color-mix(in srgb, var(--navy) 80%, #fff); }
:root[data-hero-look="light"] .lp-foot { color: color-mix(in srgb, var(--navy) 80%, #fff); }
:root[data-hero-look="light"] .lp-foot__sec svg { color: var(--cobalt); }
:root[data-hero-look="light"] .lp__grid {
  opacity: .3;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--navy) 30%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--navy) 30%, transparent) 1px, transparent 1px);
}
:root[data-hero-look="light"] .lp__orb--a { opacity: .32; }
:root[data-hero-look="light"] .lp__orb--b { opacity: .45; }
:root[data-hero-look="light"] .lp__spot { opacity: .5; }
:root[data-hero-look="light"] .lp-art__inner {
  background: #fff;
  border-color: color-mix(in srgb, var(--navy) 18%, transparent);
  box-shadow: 0 24px 50px -28px color-mix(in srgb, var(--navy) 60%, transparent);
  --art-sky: var(--sky);
  --art-sky-end: #ffffff;
  --art-bldg: #ffffff;
  --art-line: var(--cobalt);
  --art-win: var(--cobalt);
  --art-door: var(--navy);
}
@media (prefers-reduced-motion: reduce) {
  :root[data-hero-look="light"] .lp-h1 .lp-shimmer { color: var(--navy); -webkit-text-fill-color: currentColor; }
}