/* ============================================================
   EduShieldID — pages/landing.css
   Marketing-page sections: section heading helpers, solutions
   grid, how-it-works steps, features grid, benefits grid, partner
   marquee, generic page hero/CTA band, about mission+stats, simple
   content pages (how-it-works/institutions/legal/faq/status),
   careers, pricing, and the contact form.
   ============================================================ */

.section-heading {
  font-size: var(--text-3xl);
  text-align: center;
  margin-bottom: var(--sp-3);
}
.section-sub {
  text-align: center;
  color: var(--clr-text-muted);
  max-width: 560px;
  margin: 0 auto var(--sp-12);
  font-size: var(--text-lg);
}

/* ── Solutions / feature-card grids (shared by home, about, features) ── */
.solutions-section,
.how-section,
.features-section {
  padding: 96px 24px;
}
.solutions-section { background: var(--clr-surface); }
.how-section { background: var(--clr-bg); }
.features-section { background: var(--clr-surface); }

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.solution-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
  /* Resting 2px low so the hover rise lands at the natural position — same
     motion, no negative translate. */
  transform: translateY(2px);
}
.solution-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(0);
}
.solution-card.featured {
  border-color: var(--clr-primary);
  box-shadow: var(--shadow-md);
}

.solution-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-5);
}
.solution-icon.blue   { background: var(--clr-primary); }
.solution-icon.green  { background: var(--clr-success); }
.solution-icon.purple { background: #7c3aed; }

.solution-title {
  font-size: var(--text-xl);
  margin-bottom: var(--sp-3);
}
.solution-title.blue-title   { color: var(--clr-primary); }
.solution-title.purple-title { color: #7c3aed; }

.solution-desc {
  color: var(--clr-text-muted);
  margin-bottom: var(--sp-4);
}
.solution-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.solution-list li {
  font-size: var(--text-sm);
  color: var(--clr-text-muted);
  padding-left: 22px;
  position: relative;
}
.solution-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clr-primary);
}
.solution-link {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--clr-text);
}
.solution-link.blue-link { color: var(--clr-primary); }

/* ── How-it-works steps ──────────────────────────────────────── */
.steps-row {
  display: flex;
  align-items: flex-start;
  gap: 0;
  overflow-x: auto;
  padding-bottom: var(--sp-2);
}
.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 150px;
  max-width: 170px;
  gap: var(--sp-2);
  padding: 0 8px;
}
.step-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--clr-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-2);
}
.step-num {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--clr-primary);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.step-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.step-desc {
  font-size: var(--text-xs);
  color: var(--clr-text-muted);
}
.step-connector {
  flex: 1;
  height: 1.5px;
  min-width: 24px;
  margin-top: 28px;
  background: repeating-linear-gradient(to right, #d1d5db 0, #d1d5db 6px, transparent 6px, transparent 12px);
}

/* ── Features grid (2-col blocks + priority card) ───────────── */
.features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.feature-block {
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.feature-block-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--sp-5);
}
.feature-block-header h3 { font-size: var(--text-lg); }

.feature-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.feature-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  color: var(--clr-text-muted);
}

.engine-note {
  display: flex;
  gap: 10px;
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--clr-text-muted);
}

.feature-block.trust {
  background: var(--clr-surface);
  border-color: var(--clr-primary);
}
.feature-block.priority {
  background: var(--clr-primary-light);
  border-color: var(--clr-primary-light);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.priority-icon { margin-bottom: var(--sp-4); }
.priority-title { font-size: var(--text-xl); margin-bottom: var(--sp-3); }
.priority-desc { color: var(--clr-text-muted); margin-bottom: var(--sp-5); }
.priority-link {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--clr-primary);
}

/* ── Benefits grid (features.html) ──────────────────────────── */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.benefit-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  text-align: center;
}
.benefit-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--sp-4);
  border-radius: 50%;
  background: var(--clr-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.benefit-title { font-weight: var(--weight-semibold); margin-bottom: var(--sp-2); }
.benefit-desc { font-size: var(--text-sm); color: var(--clr-text-muted); }

/* ── Partner institutions marquee ────────────────────────────── */
.partners-section {
  padding: 96px 24px;
  background: var(--clr-bg);
}
.partners-header { text-align: center; margin-bottom: var(--sp-10); }
.partners-eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--clr-primary);
  margin-bottom: var(--sp-3);
}
.partners-title { font-size: var(--text-3xl); margin-bottom: var(--sp-3); }
.partners-sub { color: var(--clr-text-muted); max-width: 560px; margin: 0 auto; }

.partners-marquee {
  overflow: hidden;
  margin-top: var(--sp-10);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}
.partners-track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  /* `reverse` plays the positive 0 -> 50% range backwards, giving the same
     leftward scroll the -50% version produced. The track is duplicated, so
     either direction of travel loops seamlessly. */
  animation: partnersScroll 34s linear infinite reverse;
}
@keyframes partnersScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}
.partner-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.partner-logo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--clr-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.partner-logo img { width: 100%; height: 100%; object-fit: cover; }
.partner-monogram { font-weight: var(--weight-bold); color: var(--clr-primary); }
.partner-name { font-size: var(--text-sm); color: var(--clr-text-muted); white-space: nowrap; }
.partners-empty { text-align: center; color: var(--clr-text-muted); }

/* ── Generic page hero (about / features intro) ──────────────── */
.page-hero {
  padding: 88px 24px 64px;
  text-align: center;
  background: linear-gradient(180deg, var(--clr-primary-light) 0%, var(--clr-bg) 70%);
}
.page-hero-title {
  font-size: var(--text-4xl);
  line-height: 1.2;
  max-width: 760px;
  margin: 0 auto var(--sp-5);
}
.page-hero-sub {
  font-size: var(--text-lg);
  color: var(--clr-text-muted);
  max-width: 640px;
  margin: 0 auto;
}
.page-hero .hero-ctas { justify-content: center; margin-top: var(--sp-8); margin-bottom: 0; }

/* ── About: mission + stats ───────────────────────────────────── */
.about-mission {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 64px;
  align-items: center;
}
.about-mission-copy { display: flex; flex-direction: column; }
.about-heading-left { text-align: left; margin-bottom: var(--sp-5); }
.about-body-text {
  color: var(--clr-text-muted);
  margin-bottom: var(--sp-4);
}
.about-body-text.small { font-size: var(--text-sm); }

.about-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.stat-item {
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  text-align: center;
}
/* The grid is explicitly 1fr 1fr, so spanning 2 is the same as running to
   the last line without indexing backwards from it.

   `:nth-child(odd)` qualifies it because the tile count is no longer fixed at
   three: the figures are queried and any of them can be withheld when there
   is not yet enough data to publish one (analytics/services/public_stats.py).
   An odd last tile widens to close the row; an even one leaves a tidy pair,
   which the unqualified rule got wrong for two and four. */
.stat-item:last-child:nth-child(odd) { grid-column: 1 / span 2; }
.stat-number {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--clr-primary);
  margin-bottom: var(--sp-1);
}
.stat-label {
  font-size: var(--text-xs);
  color: var(--clr-text-muted);
}
.about-stats-note {
  margin-top: var(--sp-3);
  font-size: var(--text-xs);
  color: var(--clr-text-muted);
  text-align: center;
}

/* ── Generic CTA band ─────────────────────────────────────────── */
.page-cta {
  padding: 96px 24px;
  text-align: center;
  background: var(--clr-primary);
  color: #fff;
}
.page-cta .section-heading,
.page-cta .section-sub { color: #fff; }
.page-cta .section-sub { opacity: .85; }
.page-cta-inner { max-width: 640px; margin: 0 auto; }
.page-cta-buttons {
  justify-content: center;
  margin-top: var(--sp-8);
  margin-bottom: 0;
}
.page-cta .btn-primary-lg {
  background: #fff;
  color: var(--clr-primary);
  border-color: #fff;
}
.page-cta .btn-primary-lg:hover { background: #f0f4ff; }
.page-cta-outline {
  color: #fff;
  border-color: rgba(255, 255, 255, .5);
}
.page-cta-outline:hover { border-color: #fff; color: #fff; }

/* ── Simple content pages (how-it-works, institutions, legal, faq, status) ── */
.page-section {
  max-width: 760px;
  margin: 0 auto;
  padding: 72px 24px 96px;
}
/* The hero already ends in 64px of padding; adding the section's own 72px
   plus the first h2's top margin left a ~170px void under the intro on
   /security/ and /accessibility/. */
.page-hero + .page-section { padding-top: var(--sp-8); }
.page-section h1 { margin-bottom: var(--sp-6); }
.page-section h2 { margin-top: var(--sp-8); margin-bottom: var(--sp-3); }
.page-section > h2:first-child { margin-top: 0; }
.page-section p { color: var(--clr-text-muted); }
.page-section.legal p { margin-bottom: var(--sp-5); }

.step-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  counter-reset: step;
}
.step-list li {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  color: var(--clr-text-muted);
  counter-increment: step;
}
.step-list li::before {
  content: counter(step);
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--clr-primary-light);
  color: var(--clr-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.faq-list details {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-5);
}
.faq-list summary {
  cursor: pointer;
  font-weight: var(--weight-semibold);
}
.faq-list p { margin-top: var(--sp-3); color: var(--clr-text-muted); }

.status-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-4) var(--sp-5);
  background: var(--clr-surface);
}
.status-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.status-row-label { font-weight: var(--weight-medium); }
.status-row-desc {
  font-size: var(--text-xs);
  color: var(--clr-text-muted);
}
.status-ok,
.status-down {
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  white-space: nowrap;
}
.status-ok { color: var(--clr-success); }
.status-down { color: var(--clr-danger); }
.status-ok::before,
.status-down::before {
  content: "●";
  margin-right: 6px;
}

.status-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-6);
  border: 1px solid;
  border-radius: var(--radius-md);
}
.status-banner.ok {
  background: color-mix(in srgb, var(--clr-success) 8%, transparent);
  border-color: color-mix(in srgb, var(--clr-success) 35%, transparent);
}
.status-banner.degraded {
  background: color-mix(in srgb, var(--clr-danger) 8%, transparent);
  border-color: color-mix(in srgb, var(--clr-danger) 35%, transparent);
}
.status-banner-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}
.status-banner.ok .status-banner-dot { background: var(--clr-success); }
.status-banner.degraded .status-banner-dot { background: var(--clr-danger); }
.status-banner-title { display: block; }
.status-banner-sub {
  display: block;
  font-size: var(--text-sm);
  color: var(--clr-text-muted);
  margin-top: 2px;
}
.status-checked {
  margin-top: var(--sp-5);
  font-size: var(--text-sm);
}

/* Stacked on phones: label, description and state side by side leaves the
   description a few characters wide. */
@media (max-width: 560px) {
  .status-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* ── Careers ──────────────────────────────────────────────────── */
.jobs-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.job-card { padding: 24px 28px; }

/* ── Pricing ──────────────────────────────────────────────────── */
.pricing-section { padding: 72px 24px 96px; }

.pricing-loading,
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: var(--sp-10);
}
/* `display: grid` above outranks the UA's `[hidden] { display: none }`, so
   hiding these from JS needs an explicit rule or the skeleton keeps its
   380px of layout after the real cards arrive. */
.pricing-loading[hidden],
.pricing-grid[hidden] {
  display: none;
}
.pricing-skel {
  height: 380px;
  border-radius: var(--radius-lg);
  background: linear-gradient(90deg, var(--clr-bg) 25%, #ececec 37%, var(--clr-bg) 63%);
  background-size: 400% 100%;
  animation: skeletonShimmer 1.4s ease infinite;
}
@keyframes skeletonShimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
.pricing-error {
  text-align: center;
  color: var(--clr-text-muted);
  margin-top: var(--sp-8);
}

.pricing-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  /* Grid items default to min-width:auto, so a card can refuse to shrink
     below its widest unbreakable content and push the whole grid past the
     viewport — that's the 1px overflow /pricing/ had at 320px. */
  min-width: 0;
}
.pricing-card.featured {
  border-color: var(--clr-primary);
  box-shadow: var(--shadow-lg);
  transform: scale(1.03);
}
.plan-badges-wrap { display: flex; gap: 8px; margin-bottom: var(--sp-3); }
.plan-pill {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 3px 10px;
  border-radius: var(--radius-full);
}
.plan-pill.offer   { background: var(--clr-warning-bg); color: var(--clr-warning); }
.plan-pill.popular { background: var(--clr-primary-light); color: var(--clr-primary); }
.plan-name { font-size: var(--text-xl); margin-bottom: var(--sp-2); }
.plan-tagline { color: var(--clr-text-muted); font-size: var(--text-sm); margin-bottom: var(--sp-5); }
.plan-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: var(--sp-1); }
.plan-price-was { text-decoration: line-through; color: var(--clr-text-muted); font-size: var(--text-sm); }
.plan-price-amount { font-size: var(--text-4xl); font-weight: var(--weight-bold); }
.plan-price-period { color: var(--clr-text-muted); font-size: var(--text-sm); }
.plan-quota { color: var(--clr-text-muted); font-size: var(--text-sm); margin-bottom: var(--sp-6); }
.plan-features {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-8);
  flex: 1;
}
.plan-features li {
  font-size: var(--text-sm);
  color: var(--clr-text-muted);
  padding-left: 22px;
  position: relative;
}
.plan-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--clr-success);
  font-weight: var(--weight-bold);
}
.plan-cta {
  text-align: center;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--clr-primary);
  color: #fff;
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.plan-cta:hover { background: var(--clr-primary-dark); text-decoration: none; }

/* ── Contact form ─────────────────────────────────────────────── */
.contact-section { padding: 72px 24px 96px; }
.contact-inner { max-width: 560px; }

.contact-tabs {
  display: flex;
  gap: 10px;
  margin: var(--sp-8) 0 var(--sp-8);
}
.contact-tab {
  flex: 1;
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--clr-border);
  background: var(--clr-surface);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--clr-text-muted);
  cursor: pointer;
}
.contact-tab[aria-selected="true"],
.contact-tab.active {
  background: var(--clr-primary-light);
  border-color: var(--clr-primary);
  color: var(--clr-primary);
}

.contact-form { display: flex; flex-direction: column; }
.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--sp-5);
}
.form-row label { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.form-row .optional { font-weight: var(--weight-normal); color: var(--clr-text-muted); }
.form-row input,
.form-row select,
.form-row textarea {
  padding: 10px 14px;
  border: 1px solid var(--clr-border-strong);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  background-color: var(--clr-surface);
}
.form-row select {
  padding-right: 32px;
  background-position: right 12px center;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, .15);
}
.form-row-checkbox { flex-direction: row; align-items: center; }
.form-row-checkbox label { display: flex; align-items: center; gap: 8px; font-weight: var(--weight-normal); }

.institution-fields {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
  background: var(--clr-bg);
  border-radius: var(--radius-md);
}

.contact-submit-btn { width: 100%; justify-content: center; margin-top: var(--sp-2); }
.contact-success,
.contact-error {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.contact-success { background: var(--clr-success-bg); color: var(--clr-success); }
.contact-error   { background: var(--clr-danger-bg);  color: var(--clr-danger); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .benefits-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .benefits-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .partners-track {
    gap: 40px;
    animation-duration: 24s;
  }
  .partner-logo {
    width: 48px;
    height: 48px;
  }
  .partner-name {
    font-size: var(--text-base);
  }
}

@media (max-width: 520px) {
  .partners-title {
    font-size: var(--text-2xl);
  }
  .partners-track {
    gap: 28px;
    animation-duration: 18s;
  }
  .partners-marquee {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 32px,
      #000 calc(100% - 32px),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 32px,
      #000 calc(100% - 32px),
      transparent 100%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .partners-track {
    animation: none;
  }
}

@media (max-width: 768px) {
  .page-hero {
    padding: 48px 16px 40px;
  }
  .page-hero-title {
    font-size: var(--text-2xl);
  }
  .about-mission {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .about-heading-left {
    text-align: center;
  }
  .about-cta {
    padding: 48px 16px;
  }
}

@media (max-width: 1024px) {
  .solutions-grid {
    grid-template-columns: 1fr 1fr;
  }

  .features-grid {
    grid-template-columns: 1fr 1fr;
  }
  .feature-block.priority {
    /* .features-grid is 1fr 1fr in this breakpoint. */
    grid-column: 1 / span 2;
  }
}

@media (max-width: 768px) {
  .solutions-section,
  .how-section,
  .features-section {
    padding: 48px 16px;
  }
  .section-heading {
    font-size: var(--text-2xl);
  }
  .solutions-grid {
    grid-template-columns: 1fr;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }
  /* Must be reset, not just left alone. The 1024 breakpoint above sets this
     to `1 / span 2` for its two-column grid, and that rule is still in force
     here — spanning two columns of a ONE-column grid makes the browser
     conjure an implicit second column, so the grid grew wider than the
     viewport and every block in it was squeezed into an unreadable ribbon.
     That was the cause of the horizontal overflow on /features/, and of the
     squashed side-by-side cards on / and /about/. */
  .feature-block.priority {
    grid-column: auto;
  }
  .feature-cols {
    grid-template-columns: 1fr;
  }

  .steps-row {
    flex-direction: column;
    align-items: stretch;
    overflow-x: visible;
    gap: 0;
  }
  /* Grid rather than a row of flex children: as flex, the icon, number,
     label and description each became their own column, so "Take a Selfie"
     wrapped over three lines in a ~70px column. Here the icon spans both
     rows on the left, number and label share the first row, and the
     description runs full width beneath them. */
  .step {
    display: grid;
    grid-template-columns: 56px auto 1fr;
    column-gap: 14px;
    row-gap: 4px;
    align-items: start;
    text-align: left;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    padding: 0 0 24px;
  }
  .step-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .step-num {
    grid-column: 2;
    grid-row: 1;
    align-self: baseline;
  }
  .step-label {
    grid-column: 3;
    grid-row: 1;
    align-self: baseline;
  }
  .step-desc {
    grid-column: 2 / span 2;
    grid-row: 2;
  }
  .step-connector {
    display: none;
  }
  .step:not(:last-child) {
    position: relative;
  }
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 29px;
    top: 60px;
    bottom: 0;
    width: 1.5px;
    background: repeating-linear-gradient(
      to bottom,
      #d1d5db 0,
      #d1d5db 6px,
      transparent 6px,
      transparent 12px
    );
  }
}

@media (max-width: 480px) {
  .section-heading {
    font-size: var(--text-xl);
  }
  .section-sub {
    font-size: var(--text-sm);
    margin-bottom: 32px;
  }

  .solution-card,
  .feature-block {
    padding: 20px 16px;
  }

  .priority-title {
    font-size: var(--text-base);
  }
}

@media (max-width: 1024px) {
  .pricing-loading,
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  /* Featured card first on narrow screens. Expressed by pushing the others
     back rather than pulling this one below the default order of 0. */
  .pricing-card {
    order: 1;
  }
  .pricing-card.featured {
    order: 0;
    transform: none;
  }
}

@media (max-width: 768px) {
  .pricing-section {
    padding: 40px 16px 64px;
  }
}

@media (max-width: 768px) {
  .contact-section {
    padding: 40px 16px 64px;
  }
  .contact-tabs {
    flex-direction: column;
  }
}