/* Page layouts: home sections, self-host, legal, 404. */

/* — Hero — */
.hero { padding-block: 40px 64px; }
.hero .wrap { display: grid; gap: 48px; }
.hero-copy { align-self: center; }
.hero-copy .lead { margin-top: 18px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin-top: 28px; }
.coming-soon { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-size: var(--text-14); color: var(--color-neutral-700); }
.coming-soon .status-tag { width: auto; padding-inline: 10px; }
.hero-phones { display: flex; justify-content: center; gap: 28px; }
.hero-phones .phone:nth-child(2) { display: none; }
@media (min-width: 960px) {
  .hero { padding-block: 64px 96px; }
  .hero .wrap { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; }
  .hero-phones .phone { flex: 0 0 360px; }
}
/* Two phones only where both fit at the app's own width (360px + frame), so nothing truncates. */
@media (min-width: 1240px) {
  .hero .wrap { gap: 56px; }
  .hero-phones { gap: 24px; }
  .hero-phones .phone:nth-child(2) { display: flex; margin-top: 72px; }
}

/* — Section heads — */
.section-head { max-width: 720px; margin-bottom: 40px; }
.section-head p { font-size: var(--text-17); color: var(--color-neutral-800); }

/* — How it works — */
.steps { display: grid; gap: 56px; list-style: none; counter-reset: step; }
.steps > li { display: flex; flex-direction: column; gap: 22px; }
.step-copy { display: grid; grid-template-columns: auto 1fr; gap: 0 16px; align-items: baseline; }
.step-num {
  grid-row: span 2;
  font-family: var(--font-heading); font-weight: 600; font-size: var(--num-medium); line-height: 0.9;
  color: var(--color-accent-700);
}
.step-copy h3 { font-size: 30px; margin: 0 0 6px; }
.step-copy p { margin: 0; color: var(--color-neutral-800); }
.steps .phone { align-self: center; flex: 1; }
@media (min-width: 1100px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
  .steps .phone { align-self: stretch; max-width: none; }
}

/* — Features — */
.features { display: grid; gap: 56px 48px; }
.feature { display: flex; flex-direction: column; gap: 24px; }
/* Two columns; subgrid lines up the specimens of a row even when the copy above them differs in length. */
@media (min-width: 880px) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0; }
  .feature { display: grid; grid-template-rows: subgrid; grid-row: span 2; gap: 24px; padding-bottom: 56px; }
}
.feature h3 { font-size: 30px; margin-bottom: 8px; }
.feature p { margin: 0; color: var(--color-neutral-800); }
/* Specimens in one row share a height; their content sits centered in it. */
.feature .specimen { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.feature .specimen > .status-block, .feature .specimen > .reader-card { width: 100%; }

/* — Editions — */
.editions { display: grid; gap: 40px; }
@media (min-width: 880px) { .editions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
.edition { display: flex; flex-direction: column; padding: 28px 24px; }
@media (min-width: 480px) { .edition { padding: 32px; } }
.edition-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.edition h3 { font-size: var(--text-h2); margin: 0; }
.edition .price-line { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-h5); color: var(--color-accent-700); }
.edition > p { margin: 12px 0 20px; color: var(--color-neutral-800); }
.facts { margin: 0 0 28px; border-top: 1px solid var(--color-divider); }
.facts > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--color-divider); }
.facts dt { color: var(--color-neutral-700); font-size: var(--text-15); }
.facts dd { margin: 0; font-size: var(--text-15); }
.edition .actions { margin-top: auto; }
.edition-cloud { --bp-border: var(--color-accent-400); background: var(--color-accent-100); }
.edition-cloud .facts, .edition-cloud .facts > div { border-color: rgba(29, 45, 61, 0.16); }
.edition-cloud .facts dt { color: var(--color-accent-800); }

/* — Pricing — */
.pricing { display: grid; gap: 40px; align-items: start; }
@media (min-width: 960px) { .pricing { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; } }
.pricing-points { list-style: none; border-top: 1px solid var(--color-divider); }
.pricing-points li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--color-divider); }
.pricing-points b { font-family: var(--font-heading); font-weight: 600; font-size: 22px; line-height: 1.2; color: var(--color-accent-700); }
.pricing-points p { margin: 0; }
.pricing-points strong { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 22px; line-height: 1.2; margin-bottom: 4px; }
.quantity { padding: 28px 24px; }
.quantity p { margin: 0; font-size: var(--text-17); line-height: 1.5; color: var(--color-neutral-800); }
.cta-slot { margin-top: 28px; }
.cta-slot .btn { width: 100%; }
.cta-slot p { margin: 12px 0 0; font-size: var(--text-14); color: var(--color-neutral-700); }

/* — Contact — */
.contact-mail {
  display: inline-block; margin-top: 8px; overflow-wrap: anywhere;
  font-family: var(--font-heading); font-weight: 600; font-size: clamp(30px, 7vw, 56px); line-height: 1.1;
}

/* — Inner pages (self-host, legal, 404) — */
.page-head { padding-block: 48px 32px; }
.page-head .lead { margin-top: 12px; }
.page-body { padding-bottom: 80px; }
.draft-note {
  --bp-border: var(--color-accent-900);
  margin: 0 0 40px; padding: 18px 20px;
  background: var(--color-accent-900); color: var(--color-bg);
}
.draft-note strong { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 24px; letter-spacing: 0.01em; margin-bottom: 4px; }
.draft-note p { margin: 0; font-size: var(--text-15); }
.decide { padding: 0 4px; background: var(--color-accent-100); border: 1px solid var(--color-accent-300); color: var(--color-accent-800); font-weight: 500; }
.placeholder-box { margin: 0 0 24px; padding: 16px 18px; border: 1px dashed var(--color-accent-700); background: var(--color-accent-100); color: var(--color-accent-900); font-size: var(--text-15); }
.placeholder-box p { margin: 0; }
.meta-line { font-size: var(--text-14); color: var(--color-neutral-700); }
.prose .toc { display: flex; flex-wrap: wrap; gap: 0 20px; list-style: none; margin: 0 0 32px; padding: 0; font-size: var(--text-15); }
.prose .toc li { margin: 0; }
.toc a { display: inline-flex; min-height: var(--min-hit-target); align-items: center; }

.not-found { padding-block: 80px 120px; }
.not-found .num { font-family: var(--font-heading); font-weight: 600; font-size: var(--num-hero); line-height: 0.95; color: var(--color-accent-900); }