/* Landing page only; shared tokens and base styles live in style.css. */

body.landing { display: block; padding: 0; }

.l-wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px 24px; }

.topbar { display: flex; align-items: center; justify-content: space-between; padding: 26px 0; }
.topbar a.brand { margin: 0; }
.topbar nav { display: flex; align-items: center; gap: 22px; }
.nav-link { color: var(--muted); text-decoration: none; font-size: 14px; }
.nav-link:hover { color: var(--text); }

#loggedOutNav, #loggedInNav { display: flex; align-items: center; gap: 22px; }

.pill {
  display: inline-block;
  background: var(--primary);
  color: #0a101c;
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.pill:hover { background: #fff; }
.pill.small { padding: 9px 20px; font-size: 13px; }

/* Overrides .pill's inline-block (a grid child, like .avatar, would
   otherwise wrap onto its own line) -- must come after .pill in source
   order since both are single-class selectors of equal specificity. */
.who-pill { display: inline-flex !important; align-items: center; gap: 8px; padding: 6px 16px 6px 6px; white-space: nowrap; }
.who-pill .avatar { width: 26px; height: 26px; font-size: 11px; flex-shrink: 0; }

.ghost { color: var(--text); text-decoration: none; font-size: 14px; font-weight: 500; padding: 12px 6px; }
.ghost:hover { text-decoration: underline; }

/* ---------- hero card ---------- */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  min-height: 420px;
  padding: 56px 52px;
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  background: var(--panel);
}
/* object-position: right -- the image's own baked-in logo/slogan sits at
   its right edge; cover-cropping from the right (the default "center")
   would cut that off at aspect ratios narrower than the source image, so
   anchor the crop right and let it trim empty space off the left instead. */
.hero-mountains { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 11, 20, 0.88) 0%, rgba(7, 11, 20, 0.35) 55%, rgba(7, 11, 20, 0) 100%); }
.hero-copy, .hero-mark { position: relative; z-index: 1; }

.eyebrow { margin: 0 0 14px; color: var(--muted); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.hero h1 { font-size: 42px; line-height: 1.12; letter-spacing: -0.025em; margin: 0 0 18px; }
.subtitle { color: #b4bfd0; font-size: 16px; line-height: 1.6; max-width: 520px; margin: 0 0 28px; }
.cta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.hero-mark { justify-self: end; text-align: left; }
.hero-mark .logo { width: 150px; height: 75px; color: var(--text); display: block; margin-bottom: 18px; filter: drop-shadow(0 0 24px rgba(122, 162, 255, 0.35)); }
.hero-mark ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hero-mark li { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(238, 242, 248, 0.85); }

/* ---------- sections ---------- */

.section-label { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 44px 0 16px; }

.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.qcard {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent), var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
}
.qcard h3 { font-size: 15px; margin: 14px 0 8px; display: flex; align-items: center; gap: 8px; }
.qcard p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }

.qicon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; }
.qicon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.qicon.blue { color: #7aa2ff; background: rgba(79, 140, 255, 0.14); }
.qicon.green { color: #34d399; background: rgba(52, 211, 153, 0.14); }
.qicon.violet { color: #a78bfa; background: rgba(139, 92, 246, 0.16); }
.qicon.amber { color: #fbbf24; background: rgba(251, 191, 36, 0.13); }

.badge { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 999px; background: rgba(251, 191, 36, 0.14); color: #fbbf24; }

.how .steps { list-style: none; margin: 0; padding: 22px 26px; display: grid; gap: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; }
.how .steps li { display: flex; gap: 14px; align-items: flex-start; font-size: 14px; line-height: 1.55; }
.how .num { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #0a101c; background: var(--primary); }
.how .label { color: var(--muted); }
.how .step-action { display: inline-block; margin-left: 4px; background: none; border: none; cursor: pointer; font: inherit; padding: 0; }

footer { margin-top: 48px; padding: 28px 0 32px; border-top: 1px solid var(--line); text-align: center; font-size: 12.5px; line-height: 1.6; color: var(--dim); }
footer a { color: var(--muted); }

@media (max-width: 900px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { grid-template-columns: 1fr; padding: 40px 28px; }
  .hero h1 { font-size: 34px; }
  /* Below this width the hero box gets much taller than the image's own
     wide aspect ratio; object-fit: cover would have to zoom in hard to
     fill that shape, blowing the picture's baked-in logo up huge and
     into the headline text. Showing the whole image letterboxed avoids
     that, at the cost of some empty space above/below it. */
  .hero-mountains { object-fit: contain; object-position: right bottom; }
}

@media (max-width: 560px) {
  .cards { grid-template-columns: 1fr; }
  .nav-link { display: none; }
  .hero h1 { font-size: 29px; }
}