/* Marketing landing page styles.  Public-facing — no auth required. */

body.d-welcome-page {
  margin: 0;
  background:
    radial-gradient(ellipse 1400px 900px at 50% -10%,
      rgba(140, 158, 255, 0.07) 0%, transparent 55%),
    radial-gradient(ellipse 1000px 600px at 50% 110%,
      rgba(201, 169, 110, 0.04) 0%, transparent 60%),
    var(--d-bg);
}

/* ── Top nav ─────────────────────────────────────────────────── */
.d-welcome-nav {
  position: sticky; top: 0; z-index: 10;
  background: linear-gradient(180deg,
    rgba(11, 15, 26, 0.92) 0%, rgba(11, 15, 26, 0.78) 100%);
  /* Iris hairline, not neutral white — the divider participates in the
     cool-light system instead of reading as a default border. */
  border-bottom: 1px solid rgba(140, 158, 255, 0.14);
  backdrop-filter: blur(8px);
}
.d-welcome-nav-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 14px 28px;
  display: flex; align-items: center; gap: 24px;
}
.d-welcome-brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--d-text);
}
.d-welcome-brand .d-logo.mark { width: 30px; height: 30px; margin: 0; }
.d-welcome-brand .d-wordmark { font-family: var(--font-display); letter-spacing: 0.18em; font-size: 1.0rem; }
.d-welcome-links { display: flex; gap: 22px; margin-left: 18px; }
.d-welcome-links a {
  color: var(--d-text-mute); text-decoration: none; font-size: 0.9rem;
  /* At all widths, not just under the mobile block below: between that
     block's ceiling and the width the desktop layout actually needs, these
     were breaking as "What it / does". */
  white-space: nowrap;
}
.d-welcome-links a:hover { color: var(--d-bronze-hi); }
.d-welcome-cta { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* Header and final-strip buttons.  Same reason as the links -- "Log in" was
   rendering as "Log / in" -- plus centring, which only becomes visible once
   the label stops wrapping. */
.d-welcome-cta .d-btn,
.d-welcome-final-ctas .d-btn {
  white-space: nowrap;
  justify-content: center;
}

/* Log in was .d-btn.ghost -- a played-down muted-on-border treatment.
   Returning customers use this header the most, so it wanted contrast; the
   first attempt at that was a bright iris LINE (border-color: var(--d-iris)),
   which the earlier comment claimed "does not fight the bronze primary" and
   which visibly did -- 2px of saturated iris sitting inches from a bronze
   fill is the same orange/blue clash the hub redesign named and removed.
   Same fix here: the two buttons read as sibling controls, both seated as
   cobalt-glass keycaps -- iris text on an iris-tinted plane, with the LIGHT
   in the edge glow rather than a hard line.  Bronze belongs to the primary
   action, iris to everything else; they never abut directly.
   Scoped: .d-btn.ghost elsewhere in the app must stay muted. */
.d-welcome-cta .d-btn.ghost,
.d-welcome-final-ctas .d-btn.ghost {
  background: rgba(140, 158, 255, 0.10);
  border-color: rgba(140, 158, 255, 0.30);
  box-shadow: inset 0 1px 0 rgba(176, 190, 255, 0.14);
  color: var(--d-iris-hi);
}
.d-welcome-cta .d-btn.ghost:hover,
.d-welcome-final-ctas .d-btn.ghost:hover {
  background: rgba(140, 158, 255, 0.16);
  border-color: rgba(140, 158, 255, 0.50);
  color: var(--d-iris-hi);
}
/* 900, not 720.  At 720 the links dropped to their own row only AFTER the
   desktop row had already run out of width, so every label in the band
   between broke across two lines. */
@media (max-width: 900px) {
  /* Don't hide the primary nav on phones — there is no hamburger fallback.
     Let it wrap to its own full-width, horizontally-scrollable row instead. */
  .d-welcome-nav-inner { flex-wrap: wrap; }
  .d-welcome-links { order: 3; width: 100%; margin-left: 0; gap: 16px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap;
    padding-bottom: 4px; }
  .d-welcome-links a { flex-shrink: 0; }
}

/* ── Hero ─────────────────────────────────────────────────────── */
.d-welcome-hero {
  position: relative;
  padding: 96px 28px 80px;
  text-align: center;
}
.d-welcome-hero-inner { max-width: 880px; margin: 0 auto; }
.d-welcome-hero-logo {
  width: 96px !important; height: 96px !important;
  margin: 0 auto 24px !important;
  display: block;
  filter: drop-shadow(0 6px 20px rgba(140, 158, 255, 0.25));
  animation: d-welcome-breath 6s ease-in-out infinite;
}
@keyframes d-welcome-breath {
  0%, 100% { filter: drop-shadow(0 6px 20px rgba(140, 158, 255, 0.25)) brightness(1); }
  50%      { filter: drop-shadow(0 8px 28px rgba(140, 158, 255, 0.40)) brightness(1.08); }
}
/* One heading system, not two.  The welcome hero was rebuilt at weight 640
   with a warm cream gradient and -0.03em tracking, but these shared classes
   -- which features.html, pricing.html, about.html AND welcome's own section
   headings all use -- stayed at weight 500 with the old cool blue-grey
   ramp.  The result read as a different, lighter typeface on every page
   except the hero, which is exactly how it was reported.  Same family
   throughout; only the treatment had drifted. */
.d-welcome-h1 {
  font-family: var(--font-display);
  font-weight: 640;
  font-size: clamp(2.4rem, 5.2vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.032em;
  text-wrap: balance;
  margin: 16px 0 22px;
  background: linear-gradient(180deg, #f7f4ec 0%, #ddd6c6 62%, #b3a98f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.d-welcome-lede {
  font-size: 1.06rem;
  line-height: 1.6;
  color: var(--d-text-mute);
  max-width: 620px;
  margin: 0 auto 26px;
}
.d-welcome-hero-ctas {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 18px;
}
.d-btn.lg { padding: 11px 22px; font-size: 0.95rem; }
.d-welcome-hero-meta {
  font-size: 0.82rem;
  color: var(--d-text-dim);
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.d-welcome-hero-meta .sep { color: var(--d-line); }

/* ── Generic section ─────────────────────────────────────────── */
.d-welcome-section { padding: 70px 28px; }
.d-welcome-section.alt {
  background:
    linear-gradient(180deg,
      rgba(28, 36, 64, 0.30) 0%, rgba(17, 23, 42, 0.30) 100%);
  border-top:    1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.d-welcome-section-inner { max-width: 1200px; margin: 0 auto; }
.d-welcome-h2 {
  font-family: var(--font-display);
  font-weight: 640;
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.028em;
  text-wrap: balance;
  margin: 6px 0 14px;
  background: linear-gradient(180deg, #f7f4ec 0%, #ddd6c6 68%, #b3a98f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.d-welcome-sub {
  font-size: 1.0rem; color: var(--d-text-mute);
  max-width: 620px; margin: 0 0 28px;
}

/* ── 2-col / 3-col / 4-col grids ─────────────────────────────── */
.d-welcome-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px; margin-top: 32px;
}
.d-welcome-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px; margin-top: 32px;
}
.d-welcome-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px; margin-top: 24px;
}
@media (max-width: 960px) {
  .d-welcome-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .d-welcome-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .d-welcome-grid-2, .d-welcome-grid-3, .d-welcome-grid-4 { grid-template-columns: 1fr; }
}

.d-welcome-feature, .d-welcome-tier, .d-welcome-step {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg,
    rgba(28, 36, 64, 0.55) 0%, rgba(17, 23, 42, 0.55) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--d-radius-lg);
  padding: 22px 22px 24px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30);
  transition: border-color 280ms var(--ease-soft),
              transform    280ms var(--ease-soft);
}
.d-welcome-feature:hover,
.d-welcome-tier:hover,
.d-welcome-step:hover {
  border-color: rgba(140, 158, 255, 0.30);
  transform: translateY(-2px);
}
.d-welcome-feature h3, .d-welcome-tier h3, .d-welcome-step h3 {
  font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 500;
  margin: 8px 0 6px;
  color: var(--d-text);
}
.d-welcome-feature p, .d-welcome-tier p, .d-welcome-step p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--d-text-mute);
  margin: 0;
}
.d-welcome-feature-icon {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  /* Pure iris glass, matching the hub plates.  This used to blend iris ->
     bronze inside one 42px box, which is exactly the warm/cool clash the
     hub redesign removed from .d-primary-icon / .d-launcher-icon in
     app.css: bronze is the ACTION colour, it does not belong INSIDE a plate.
     Same material, same edge weight, same specular. */
  background: rgba(140, 158, 255, 0.13);
  border: 1px solid rgba(140, 158, 255, 0.35);
  box-shadow: inset 0 1px 0 rgba(176, 190, 255, 0.16);
  color: var(--d-iris-hi);
  margin-bottom: 4px;
}
/* Inline SVG, not a font glyph: the geometric characters that used to sit
   here are absent from Inter and Fraunces, so every one fell back to a
   different system face and rendered at a different weight per machine. */
.d-welcome-feature-icon svg {
  width: 21px;
  height: 21px;
  display: block;
}
.d-welcome-step-num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--d-bronze-hi);
  letter-spacing: 0.12em;
  margin-bottom: 4px;
}
.d-welcome-tier-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  background: rgba(111, 223, 178, 0.14);
  color: var(--d-pos);
  margin-bottom: 8px;
}
.d-welcome-tier-badge.accent { background: rgba(140, 158, 255, 0.18); color: var(--d-iris-hi); }
.d-welcome-tier-badge.dev    { background: rgba(201, 169, 110, 0.18); color: var(--d-bronze-hi); }
.d-welcome-tier-badge.master { background: rgba(229, 120, 120, 0.16); color: #ffb1b1; }

/* ── Final CTA strip ─────────────────────────────────────────── */
.d-welcome-final {
  padding: 64px 28px;
  background: linear-gradient(180deg,
    rgba(28, 36, 64, 0.55) 0%, rgba(17, 23, 42, 0.55) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.d-welcome-final-inner {
  display: flex; align-items: center; gap: 28px;
}
.d-welcome-final-ctas { margin-left: auto; display: flex; gap: 10px; }
@media (max-width: 720px) {
  .d-welcome-final-inner { flex-direction: column; align-items: flex-start; }
  .d-welcome-final-ctas { margin-left: 0; }
}

/* ── Footer ──────────────────────────────────────────────────── */
.d-welcome-footer {
  padding: 16px 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  background: var(--d-bg);
}
.d-welcome-footer-inner {
  display: flex; align-items: center; gap: 18px;
  font-size: 0.8rem; color: var(--d-text-dim);
}
@media (max-width: 600px) {
  .d-welcome-footer-inner { flex-wrap: wrap; gap: 8px 14px; }
  .d-welcome-footer-inner .d-spacer { flex-basis: 100%; height: 0; }
  .d-welcome-footer a { margin-left: 0; }
}
.d-welcome-footer a { color: var(--d-text-dim); text-decoration: none; margin-left: 14px; }
.d-welcome-footer a:hover { color: var(--d-bronze-hi); }