/* ==========================================================================
   landing.css — styles for the marketing landing page (index.html) ONLY.

   Editorial redesign: four-section landing (hero / "Three CLIs" band /
   three tiers / pricing band) per docs/design-handoff. Loads AFTER
   css/main.css and builds on its design tokens (--ca-*): the palette
   (including the brand ramp overridden at runtime by brand.js), typography
   (Source Serif 4 display, Public Sans body, IBM Plex Mono labels), spacing
   and radii all come from main.css, so the landing automatically tracks
   brand + light/dark theme changes. Course pages must NOT load this file.

   Conventions:
   - Every selector here is prefixed .ca-land (or scoped under body.ca-land)
     so nothing can leak into course-page styles.
   - Colors come from tokens ONLY — never a per-theme override per element;
     both themes work because main.css swaps the tokens wholesale.
   - Flat design: no shadows; surfaces are separated by 1px hairline borders.
   ========================================================================== */

/* The landing is a single-column document, not the sidebar app shell. */
body.ca-land {
  display: block;
}

/* Shared centered wrapper for the band / tiers / pricing sections. */
.ca-land-wrap {
  max-width: 960px;
  margin: 0 auto;
}

/* ---------- Header ---------------------------------------------------------
   Sticky, hairline bottom border, opaque page background (design shows no
   translucency/blur — flat editorial chrome). */
.ca-land-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--ca-bg);
  border-bottom: 1px solid var(--ca-border);
}
.ca-land-header-inner {
  padding: var(--ca-space-4) 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ca-space-4);
  flex-wrap: wrap;
}

/* Brand lockup: 26×26 rounded-square indigo mark + 15px/700 wordmark. */
.ca-land-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ca-text);
}
.ca-land-logo {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--ca-brand);
  color: var(--ca-brand-contrast); /* chevron stroke = currentColor */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.ca-land-logo svg { display: block; }
.ca-land-brand-name {
  font-weight: 700;
  font-size: 0.9375rem; /* 15px */
  letter-spacing: -0.01em;
}

/* Nav links: 13.5px / 500. */
.ca-land-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.ca-land-nav > a {
  color: var(--ca-text-muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.84375rem; /* 13.5px */
}
.ca-land-nav > a:hover { color: var(--ca-brand-strong); }

/* Sun/moon theme toggle (icon injected/synced by src/js/theme.js). */
.ca-land-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-sm);
  background: var(--ca-bg-sunken);
  color: var(--ca-text);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.ca-land-theme-toggle:hover {
  border-color: var(--ca-border-strong);
  color: var(--ca-brand-strong);
}
.ca-land-theme-toggle svg { display: block; }

/* Auth slot: an empty slot (pre-auth-script) collapses to nothing. */
.ca-land-auth { display: inline-flex; align-items: center; gap: var(--ca-space-2); }
.ca-land-auth:empty { display: none; }

/* Placeholder CTA pill: 1.5px indigo border, indigo text, 8px radius. */
.ca-land-auth-cta {
  padding: var(--ca-space-2) var(--ca-space-4);
  border: 1.5px solid var(--ca-brand);
  border-radius: var(--ca-radius-sm);
  color: var(--ca-brand);
  background: transparent;
  font-weight: 600;
  font-size: 0.84375rem; /* 13.5px */
}
.ca-land-auth-cta:hover:not(:disabled) {
  background: var(--ca-brand-soft);
  border-color: var(--ca-brand);
  color: var(--ca-brand-strong);
}

/* ---------- 1. Hero --------------------------------------------------------
   Centered column, max-width 840px. Type spec from the handoff:
   eyebrow  IBM Plex Mono 11.5px / 600 / uppercase / 0.14em / indigo
            (that IS main.css's .ca-eyebrow — reused, just centered)
   H1       Source Serif 4, 700, 54px/1.12, -0.015em (fluid below 54px)
   body     18.5px/1.6 muted
   footnote 13.5px faint */
.ca-land-hero {
  max-width: 840px;
  margin: 0 auto;
  padding: 88px var(--ca-space-6) 72px;
  text-align: center;
}
.ca-land-hero-eyebrow { margin-bottom: 18px; }
.ca-land-hero h1 {
  font-size: clamp(2.25rem, 6vw, 3.375rem); /* caps at 54px */
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}
.ca-land-hero-sub {
  font-size: 1.15625rem; /* 18.5px */
  line-height: 1.6;
  color: var(--ca-text-muted);
  max-width: 660px;
  margin: 22px auto 32px;
}
.ca-land-cta-row {
  display: flex;
  justify-content: center;
  gap: var(--ca-space-3);
  flex-wrap: wrap;
}
.ca-land-cta { padding: 13px 26px; font-size: 0.9375rem; }
.ca-land-hero-note {
  margin: 28px 0 0;
  font-size: 0.84375rem; /* 13.5px */
  color: var(--ca-text-faint);
}
.ca-land-hero-note a { color: var(--ca-brand); }

/* ---------- 2. "Three CLIs" band -------------------------------------------
   Full-width light band (band token), hairline top/bottom borders, white
   cards (12px radius) with 17px/700 serif titles. */
.ca-land-band {
  padding: 64px var(--ca-space-6);
  background: var(--ca-band);
  border-top: 1px solid var(--ca-border);
  border-bottom: 1px solid var(--ca-border);
}
.ca-land-band h2 {
  font-size: 1.875rem; /* 30px */
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  border-bottom: none; /* section h2, not the underlined article h2 */
  padding-bottom: 0;
}
.ca-land-band-lede {
  font-size: 0.96875rem; /* 15.5px */
  line-height: 1.65;
  color: var(--ca-text-muted);
  max-width: 700px;
  margin: 0 0 36px;
}

/* Shared responsive 3-up grid (band cards + tier cards). */
.ca-land-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 880px) {
  .ca-land-grid { grid-template-columns: 1fr; }
}

.ca-land-feature {
  background: var(--ca-bg-elevated);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-lg);
  padding: 22px 22px 24px;
}
.ca-land-feature h3 {
  font-size: 1.0625rem; /* 17px */
  font-weight: 700;
  margin: 0 0 var(--ca-space-2);
}
.ca-land-feature p {
  margin: 0;
  font-size: 0.875rem; /* 14px */
  line-height: 1.6;
  color: var(--ca-text-muted);
}

/* ---------- 3. Three-tier cards --------------------------------------------
   Public / Free account / Premium. The middle card is "featured": indigo
   border + brand-tint background. */
.ca-land-tiers { padding: 64px var(--ca-space-6); }

.ca-land-tier {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--ca-bg-elevated);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-lg);
  padding: 24px 22px;
}
.ca-land-tier--featured {
  border-color: var(--ca-brand);
  background: var(--ca-brand-tint);
}
.ca-land-tier-kicker {
  margin: 0 0 10px;
  font-family: var(--ca-font-mono);
  font-size: 0.6875rem; /* 11px */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ca-brand);
}
.ca-land-tier h3 {
  margin: 0 0 10px;
  font-size: 1.1875rem; /* 19px */
  font-weight: 700;
}
.ca-land-tier-desc {
  margin: 0 0 18px;
  font-size: 0.875rem; /* 14px */
  line-height: 1.6;
  color: var(--ca-text-muted);
  flex: 1; /* pushes the CTA to a common baseline across cards */
}
.ca-land-tier-cta {
  padding: 9px var(--ca-space-4);
  border-radius: 7px;
  font-size: 0.84375rem; /* 13.5px */
}

/* ---------- 4. Pricing band -------------------------------------------------
   Tinted-indigo full-width band: flex row with the price line on the left
   and the CTA pair on the right. */
.ca-land-pricing {
  padding: 44px var(--ca-space-6);
  background: var(--ca-brand-tint);
  border-top: 1px solid var(--ca-brand-tint-border);
}
.ca-land-pricing-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.ca-land-pricing-copy { flex: 1; min-width: 280px; }
.ca-land-pricing-copy h2 {
  font-size: 1.5rem; /* 24px */
  margin: 0 0 var(--ca-space-2);
  border-bottom: none;
  padding-bottom: 0;
}
.ca-land-pricing-copy p {
  margin: 0;
  font-size: 0.90625rem; /* 14.5px */
  line-height: 1.6;
  color: var(--ca-text-muted);
  max-width: 52ch;
}
.ca-land-pricing-ctas {
  display: flex;
  gap: var(--ca-space-3);
  flex-wrap: wrap;
}

/* ---------- Footer ----------------------------------------------------------
   Quiet legal footer: 12.5px, muted. */
.ca-land-footer {
  padding: 28px var(--ca-space-6) 32px;
}
.ca-land-footer p {
  margin: 0 0 var(--ca-space-2);
  font-size: 0.78125rem; /* 12.5px */
  line-height: 1.6;
  color: var(--ca-text-faint);
}
.ca-land-footer p:last-child { margin-bottom: 0; }
.ca-land-footer a { color: var(--ca-text-muted); }
.ca-land-footer a:hover { color: var(--ca-brand-strong); }

/* ---------- Small screens --------------------------------------------------- */
@media (max-width: 600px) {
  .ca-land-header-inner { padding: var(--ca-space-3) var(--ca-space-4); }
  .ca-land-hero { padding: 56px var(--ca-space-4) 48px; }
  .ca-land-band, .ca-land-tiers { padding: 44px var(--ca-space-4); }
  .ca-land-pricing { padding: 36px var(--ca-space-4); }
  .ca-land-footer { padding: 24px var(--ca-space-4) 28px; }
  .ca-land-cta-row .ca-land-cta { width: 100%; justify-content: center; }
  .ca-land-pricing-ctas { width: 100%; }
  .ca-land-pricing-ctas .ca-land-cta { width: 100%; justify-content: center; }
}

/* Respect reduced-motion: nothing here animates beyond main.css's standard
   link/button color transitions. */