/* Homepage-specific styles. Shared chrome + primitives (.btn/.tag/.card/
   .section/.code-block, nav, footer) live in /components.css (base.njk).
   Design tokens come from the shared /tokens.css — see adr/0016. */

/* ---------- hero ---------- */
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: start;
}
.hero-left { display: flex; flex-direction: column; gap: 28px; }
.hero h1 {
  font-size: 72px;
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}
.hero h1 .pop { color: hsl(var(--pop)); }
.hero-sub {
  font-size: 19px;
  line-height: 1.5;
  max-width: 560px;
  color: hsl(var(--muted-on-ink));
}
.hero-sub p { margin: 0; }
.hero-sub p + p { margin-top: 14px; }
.hero-ctas {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 4px;
}
.hero .btn:not(.btn--pop) {
  color: hsl(var(--paper));
  border-color: hsl(var(--paper));
  box-shadow: 4px 4px 0 hsl(var(--paper));
}
.hero-microcopy { margin-top: -8px; }
.hero .hero-microcopy { color: hsl(var(--muted-on-ink)); }

.hero-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hero .code-block { background: hsl(var(--paper)); color: hsl(var(--ink)); }
.hero .code-block .dim,
.hero .code-block .cb-label,
.hero .code-block .cb-comment { color: hsl(var(--ink-muted)); }
/* The hero's code block is inverted to paper, so the shared .code-block .pop
   (orange text, 2.96:1 here) would fail AA. Keep the stamp as a fill with ink
   text on it (6.17:1) — no padding, so line metrics are unchanged. */
.hero .code-block .pop {
  background: hsl(var(--pop));
  color: hsl(var(--ink));
}

/* ---------- three steps ---------- */
.steps-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.step-card { display: flex; flex-direction: column; gap: 14px; }
/* Ink, not Hazard Orange: .step-card sits on paper, where orange is 2.96:1 and
   fails AA — and this is a 13px numeral, exactly the case the palette forbids. */
.step-number {
  font-family: var(--font-mono);
  font-size: 13px;
  color: hsl(var(--ink));
  font-weight: 700;
}
.step-card h3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
}
.step-card p {
  font-size: 14px;
  line-height: 1.55;
  color: hsl(var(--ink));
}
.endpoint-box {
  background: hsl(var(--ink));
  color: hsl(var(--paper));
  padding: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  /* `anywhere` rather than `break-all`: the URL only breaks when a line truly
     cannot fit, so it prefers the `/` and `?` boundaries instead of splitting
     `csp-report` down the middle on a phone. */
  overflow-wrap: anywhere;
}
.headers-box {
  background: hsl(var(--ink));
  color: hsl(var(--paper));
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
/* Inline token highlighting inside the endpoint/headers examples (was inline style=). */
.endpoint-box .dim, .headers-box .dim { color: hsl(var(--muted-on-ink)); }
.endpoint-box .pop, .headers-box .pop { color: hsl(var(--pop)); }
.status-box {
  background: hsl(var(--paper-2));
  padding: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  /* One rule width, solid ink — the system has no dashed border and no second
     stroke weight (DESIGN.md, "Shapes"). */
  border: var(--rule-width) solid hsl(var(--ink));
}
/* .status-box is a paper-2 surface, so the "next" line stays ink (orange would
   be 2.9:1 there); bold + the → glyph already single it out. */
.status-box .next { color: hsl(var(--ink)); font-weight: 700; }

/* ---------- features ---------- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.feature-card { display: flex; flex-direction: column; gap: 14px; }
.feature-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* A divider inside a surface, which is exactly the --hairline role — not ink at
   a one-off opacity. */
.feature-head .rule {
  flex: 1;
  height: 1px;
  background: hsl(var(--hairline));
}
/* Feature cards sit on paper / paper-2 — 13px orange numerals are 2.96:1. */
.feature-head .num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: hsl(var(--ink));
  font-weight: 700;
}
.feature-card h3 {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.feature-card p {
  font-size: 15px;
  line-height: 1.55;
  color: hsl(var(--ink));
}

/* ---------- explainer ---------- */
.explainer-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 64px;
  align-items: start;
}
/* Grid items default to min-width:auto, so a wide, unshrinkable descendant
   (e.g. a code sample in the guide's points) floors the track and blows the
   whole column past the viewport on mobile. Let the tracks shrink; wide code
   blocks scroll inside their own overflow-x:auto box. */
.explainer-grid > * { min-width: 0; }
.explainer-tag-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 24px;
}
.explainer-aside { position: sticky; top: 96px; }
.explainer-aside h2 {
  font-size: clamp(40px, 3.8vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}
.explainer-aside h2 .pop { color: hsl(var(--pop)); }

/* explainer on dark background: invert borders + tag + body text */
.section--dark.section--explain .tag--bordered {
  border-color: hsl(var(--paper));
  color: hsl(var(--paper));
}
.section--dark .point {
  border-top-color: hsl(var(--paper));
}
.section--dark .point:last-child {
  border-bottom-color: hsl(var(--paper));
}
.section--dark .point p {
  color: hsl(var(--muted-on-ink));
}
/* .point-list also runs on paper sections (learn.njk), where the orange numeral
   is 2.96:1. The base .point .num is therefore ink; only the ink field gets the
   stamp back, where orange measures 6.17:1. */
.section--dark .point .num {
  color: hsl(var(--pop));
}
.point-list { display: flex; flex-direction: column; }
.point {
  padding: 28px 0;
  border-top: 1.5px solid hsl(var(--ink));
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 24px;
  align-items: start;
  min-width: 0; /* shrink as a flex item of .point-list */
}
/* Same min-width:auto guard for the 1fr content cell (which may hold a code
   sample) so it can't force .point wider than its column. */
.point > * { min-width: 0; }
.point:last-child { border-bottom: 1.5px solid hsl(var(--ink)); }
.point .num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: hsl(var(--ink));
  font-weight: 700;
}
.point h3 {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.point p {
  font-size: 15px;
  line-height: 1.55;
  color: hsl(var(--ink));
}

/* ---------- differentiators ("what we get right") ---------- */
.diff-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* ---------- pricing ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.tier {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  padding: 28px;
}
.tier-name {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tier--featured .tier-name { color: hsl(var(--pop)); }
.tier-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.tier-price .amount {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.tier-price .period {
  font-family: var(--font-mono);
  font-size: 12px;
  color: hsl(var(--ink-muted));
}
/* Localized price (ADR-0021): EUR leads, the USD counterpart rides along. */
.tier-price .amount-alt {
  font-size: 26px;
  font-weight: 700;
  color: hsl(var(--ink-muted));
  letter-spacing: -0.01em;
}
.tier--featured .tier-price .amount-alt { color: hsl(var(--muted-on-ink)); }
.tier--featured .tier-price .period { color: hsl(var(--muted-on-ink)); }
.tier-note {
  font-family: var(--font-mono);
  font-size: 11px;
  color: hsl(var(--ink-muted));
  margin-top: -8px;
}
.tier--featured .tier-note { color: hsl(var(--muted-on-ink)); }
.tier-bullets {
  list-style: none;
  font-size: 14px;
  line-height: 1.6;
  flex: 1;
}
.tier-bullets li {
  display: flex;
  gap: 10px;
  padding-top: 10px;
  margin-top: 8px;
  border-top: 1px solid hsl(var(--hairline));
}
.tier-bullets li:first-child { padding-top: 0; margin-top: 0; border-top: none; }
/* Ink on the paper tiers (orange bullets there are 2.96:1); the featured tier is
   a card--accent ink field, so it keeps the orange marker at 6.17:1. */
.tier-bullets li::before {
  content: "+";
  color: hsl(var(--ink));
  font-family: var(--font-mono);
  font-weight: 700;
}
.tier--featured .tier-bullets li::before { color: hsl(var(--pop)); }
/* The hairline token is tuned for paper; on the featured tier's ink field the
   same "divider inside a surface" role is paper at low alpha. */
.tier--featured .tier-bullets li { border-top-color: hsl(var(--paper) / 0.15); }
.tier-cta {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  padding: 14px 16px;
  background: transparent;
  color: hsl(var(--ink));
  border: 1.5px solid hsl(var(--ink));
  box-shadow: 4px 4px 0 hsl(var(--ink));
  cursor: pointer;
  letter-spacing: 0.04em;
  text-align: center;
}
.tier--featured .tier-cta {
  background: hsl(var(--pop));
  border-color: hsl(var(--pop));
  box-shadow: 4px 4px 0 hsl(var(--paper));
}
.tier-badge {
  position: absolute;
  top: -14px;
  right: 20px;
  background: hsl(var(--pop));
  color: hsl(var(--ink));
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1.5px solid hsl(var(--ink));
}
/* Centred, but not 150 characters wide: hold the same measure the rest of the
   page reads at, and let the whitespace sit either side of it. */
.pricing-note {
  margin: 32px auto 0;
  max-width: 76ch;
  font-size: 14px;
  line-height: 1.6;
  color: hsl(var(--ink-muted));
  text-align: center;
}

/* ---------- responsive ---------- */

/* Tablet (720–1023): keep multi-column where it earns its space. */
@media (max-width: 1023px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .explainer-grid { grid-template-columns: 1fr; gap: 40px; }
  .explainer-aside { position: static; }
  .steps-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .tier--featured { grid-column: 1 / -1; }
}

/* Phone (<720): single column, scaled type, reduced shadows, tag-as-kicker. */
@media (max-width: 719px) {
  .hero h1 { font-size: clamp(32px, 9vw, 56px); }
  .hero-sub { font-size: 16px; }
  .explainer-aside h2 { font-size: clamp(32px, 9vw, 56px); }

  .features-grid, .pricing-grid, .diff-grid { grid-template-columns: 1fr; }
  .tier--featured { grid-column: auto; }

  .hero .btn:not(.btn--pop) { box-shadow: 3px 3px 0 hsl(var(--paper)); }
  .tier-cta { box-shadow: 3px 3px 0 hsl(var(--ink)); }
  .tier--featured .tier-cta { box-shadow: 3px 3px 0 hsl(var(--paper)); }

  .hero-right .code-block {
    font-size: 12px;
    padding: 16px;
    line-height: 1.6;
  }
  .headers-box, .endpoint-box {
    font-size: 11px;
    line-height: 1.55;
  }
}