/* ───────────────────────────────────────────────────────────────
   DeftBid — Marketing Landing Page ("Ink" direction)
   Epic D · Content sections — how it works, features, for clients, CTA.
   ─────────────────────────────────────────────────────────────── */

/* ── Shared section head (eyebrow / title / sub) ──────────────── */
.section-head { max-width: 640px; margin: 0 auto; text-align: center; }
.section-head--left { margin: 0; text-align: left; }
.section-head__eyebrow {
  font-family: var(--font-mono, monospace); font-weight: 600; font-size: 12.5px;
  letter-spacing: var(--tracking-eyebrow, 0.16em); text-transform: uppercase;
  color: var(--bid-text, #1B4DC2); margin-bottom: 14px;
}
.section-head__title {
  font-family: var(--font-sans, 'Archivo', sans-serif); font-weight: 800;
  font-size: clamp(28px, 4.2vw, 44px); letter-spacing: var(--tracking-section, -0.03em);
  line-height: 1.05; color: var(--ink, #14171C);
}
.section-head__sub {
  font-size: 17.5px; line-height: 1.5; color: var(--muted, #586170);
  margin-top: 16px; max-width: 560px;
}
.section-head:not(.section-head--left) .section-head__sub { margin-left: auto; margin-right: auto; }

/* ── D1 · How it works (3 process cards) ──────────────────────── */
.steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px; }
.step-card {
  background: var(--card, #fff); border-radius: var(--radius-card, 22px); padding: 30px 28px;
  border: 1px solid var(--line-2, rgba(20,23,28,0.06)); box-shadow: var(--shadow-card);
}
.step-card__top { display: flex; align-items: center; justify-content: space-between; }
.step-card__tile {
  width: 50px; height: 50px; border-radius: 14px; background: rgba(45,107,240,0.10);
  display: flex; align-items: center; justify-content: center; color: var(--cobalt, #2D6BF0);
}
/* F2: the step ordinals are real page content (not inside an aria-hidden mockup),
   so `faint` #8A92A1 (3.13:1 on white) failed AA. Use `muted` #586170 (6.25:1) —
   keeps the neutral-grey meta look while meeting WCAG AA for normal text. */
.step-card__num { font-family: var(--font-mono, monospace); font-weight: 600; font-size: 14px; color: var(--muted, #586170); letter-spacing: .05em; }
.step-card__title { font-weight: 800; font-size: 21px; letter-spacing: -0.02em; color: var(--ink, #14171C); margin-top: 22px; }
.step-card__body { font-size: 15.5px; line-height: 1.55; color: var(--muted, #586170); margin-top: 10px; }

@media (max-width: 880px) {
  .steps__grid { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
}

/* ── D2 · Features (6-item grid) ──────────────────────────────── */
.features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 52px; }
.feature__tile {
  width: 48px; height: 48px; border-radius: 13px; background: var(--ink, #14171C);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.feature__title { font-weight: 700; font-size: 18px; letter-spacing: -0.015em; color: var(--ink, #14171C); margin-top: 18px; }
.feature__body { font-size: 15px; line-height: 1.55; color: var(--muted, #586170); margin-top: 8px; max-width: 320px; }

@media (max-width: 920px) { .features__grid { grid-template-columns: repeat(2, 1fr); gap: 26px; } }
@media (max-width: 600px) { .features__grid { grid-template-columns: 1fr; margin-top: 40px; } }

/* ── D3 · For clients (split + proposal card) ─────────────────── */
.clients__grid {
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(40px, 5vw, 68px); align-items: center;
}
.client-points { display: flex; flex-direction: column; gap: 22px; margin-top: 34px; }
.client-point { display: flex; gap: 15px; }
.client-point__tile {
  width: 42px; height: 42px; border-radius: 12px; background: var(--card, #fff);
  box-shadow: inset 0 0 0 1px var(--line, rgba(20,23,28,0.10));
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--cobalt, #2D6BF0);
}
.client-point__title { font-weight: 700; font-size: 16.5px; color: var(--ink, #14171C); }
.client-point__body { font-size: 14.5px; line-height: 1.5; color: var(--muted, #586170); margin-top: 3px; }
.clients__stage { position: relative; }
.clients__glow {
  position: absolute; top: -8%; right: -6%; width: 420px; height: 420px; max-width: 90%;
  border-radius: 999px; pointer-events: none;
  background: radial-gradient(circle, rgba(45,107,240,0.14), transparent 70%);
}
.clients__card { position: relative; }

@media (max-width: 940px) {
  .clients__grid { grid-template-columns: 1fr; gap: clamp(36px, 6vw, 52px); }
}

/* ── D3.5 · Pricing (#486) ────────────────────────────────────── */
/* The step-card surface vocabulary (white card / radius-card / line-2 / shadow-card),
   two-up. Figures live in index.html and are hand-synced from the app's shared
   Pricing constants — see the comment on the section itself. */
.plans__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px;
  max-width: 720px; margin: 56px auto 0;
}
.plan-card {
  background: var(--card, #fff); border-radius: var(--radius-card, 22px); padding: 30px 28px;
  border: 1px solid var(--line-2, rgba(20,23,28,0.06)); box-shadow: var(--shadow-card);
  text-align: left;
}
.plan-card__top { display: flex; align-items: center; justify-content: space-between; min-height: 26px; }
.plan-card__name { font-weight: 800; font-size: 18px; letter-spacing: -0.015em; color: var(--ink, #14171C); }
.plan-card__badge {
  font-family: var(--font-mono, monospace); font-weight: 600; font-size: 11.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--bid-text, #1B4DC2);
  background: rgba(45,107,240,0.10); border-radius: 8px; padding: 4px 8px;
}
.plan-card__price {
  font-family: var(--font-mono, monospace); font-weight: 700;
  font-size: clamp(30px, 3.6vw, 40px); letter-spacing: -0.02em;
  color: var(--ink, #14171C); margin-top: 18px;
}
.plan-card__price small { font-size: 0.45em; font-weight: 600; color: var(--muted, #586170); letter-spacing: 0; }
.plan-card__note { font-size: 14.5px; line-height: 1.5; color: var(--muted, #586170); margin-top: 6px; }
.plans__cta { display: flex; justify-content: center; margin-top: 30px; }
.plans__foot { text-align: center; font-size: 14.5px; color: var(--muted, #586170); margin-top: 18px; }

@media (max-width: 600px) { .plans__grid { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; } }

/* ── D4 · Final CTA (dark) ────────────────────────────────────── */
/* CTA sits on `ink` (#14171C) per §6 — matches the footer below and is a touch
   lighter than the hero's ink-hero. band-dark supplies the relative/overflow
   context the dot-field + glow need; this overrides only its background color. */
.cta { text-align: center; padding-block: clamp(72px, 9vw, 120px); background: var(--ink, #14171C); }
.cta__eyebrow {
  font-family: var(--font-mono, monospace); font-weight: 600; font-size: 12.5px;
  letter-spacing: var(--tracking-eyebrow, 0.16em); text-transform: uppercase;
  color: var(--on-dark, #6FA0FF); margin-bottom: 20px;
}
.cta__title {
  font-family: var(--font-sans, 'Archivo', sans-serif); font-weight: 800;
  font-size: clamp(34px, 5.4vw, 60px); letter-spacing: -0.035em; line-height: 1.0;
  color: #fff; max-width: 720px; margin-inline: auto;
}
.cta__sub {
  font-size: clamp(17px, 1.7vw, 20px); line-height: 1.5; color: rgba(255,255,255,0.7);
  max-width: 500px; margin: 20px auto 0;
}
.cta__row { display: flex; gap: 16px; margin-top: 32px; justify-content: center; flex-wrap: wrap; align-items: center; }