/* ==========================================================================
   pages/inner.css — Shared layout for secondary pages
   (platform, solutions, about, contact, 404).
   ========================================================================== */

/* --- Page hero (smaller than the home hero) ------------------------------ */
.page-hero { padding-block: var(--space-2xl) var(--space-xl); }
.page-hero .eyebrow { display: block; margin-bottom: var(--space-s); }
.page-hero h1 { font-size: var(--step-4); max-width: 18ch; margin-bottom: var(--space-m); }
.page-hero p { font-size: var(--step-1); color: var(--text-muted); max-width: 56ch; }

/* --- Solution rows ------------------------------------------------------- */
.solution {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-xl);
  align-items: center; padding-block: var(--space-xl);
  border-top: 1px solid var(--line);
}
.solution:nth-child(even) .solution__media { order: -1; }
.solution__media {
  aspect-ratio: 4 / 3; border-radius: var(--radius-l);
  background: linear-gradient(135deg, var(--pine), var(--pine-deep));
  display: grid; place-items: center; color: var(--mist);
  font-family: var(--font-mono); letter-spacing: 0.1em; font-size: 0.8rem;
}
.solution h3 { font-size: var(--step-2); margin-bottom: var(--space-s); }
.solution p { color: var(--text-muted); margin-bottom: var(--space-m); }
.solution ul { display: flex; flex-direction: column; gap: var(--space-2xs); }
.solution li { padding-left: 1.5rem; position: relative; font-size: var(--step--1); }
.solution li::before { content: "→"; position: absolute; left: 0; color: var(--signal); }
@media (max-width: 820px) {
  .solution { grid-template-columns: 1fr; gap: var(--space-m); }
  .solution:nth-child(even) .solution__media { order: 0; }
}

/* --- Prose / about ------------------------------------------------------- */
.prose { max-width: 68ch; }
.prose p { margin-bottom: var(--space-m); color: var(--text-muted); }
.prose h2 { font-size: var(--step-2); margin-block: var(--space-l) var(--space-s); }

/* --- Contact layout ------------------------------------------------------ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: start; }
.contact-aside dl { display: grid; gap: var(--space-m); margin-top: var(--space-l); }
.contact-aside dt { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.2rem; }
.contact-aside dd { font-size: var(--step-1); font-family: var(--font-display); }
.form-success { display: none; padding: var(--space-l); border: 1px solid var(--pine); border-radius: var(--radius-l); background: color-mix(in srgb, var(--pine) 8%, transparent); }
.form-success[data-show="true"] { display: block; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; gap: var(--space-xl); } }

/* --- 404 ----------------------------------------------------------------- */
.error-page { min-height: 60vh; display: grid; place-items: center; text-align: center; }
.error-page .code { font-family: var(--font-mono); font-size: var(--step-2); color: var(--signal); letter-spacing: 0.1em; }