/* /why-hosting — "why us" page. Loaded via it.extraCss only on this route, so
   nothing here touches any other page. Uses the semantic design tokens from
   tokens.css, so light and dark themes both work without a second ruleset: the
   navy stat panel and the gold CTA are fixed-surface (same in both themes) with
   their own on-surface text; the reason/FAQ cards use --surface-raised +
   --text-default, which already theme-branch. RTL is the site default; all
   directional spacing uses logical properties. */

.wh-hero {
  padding-block: var(--space-8) var(--space-6);
  text-align: start;
}
.wh-hero-inner { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.wh-h1 { max-width: 20ch; }
.wh-lead { font-size: 1.15rem; color: var(--text-muted); max-width: 42ch; line-height: var(--lh-normal); margin: 0; }
.wh-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-block-start: var(--space-2); }

.wh-ghost { color: var(--link); font-weight: var(--fw-semibold); }
.wh-ghost::after { content: ' \2190'; }
.wh-ghost:hover { text-decoration: underline; }

/* Honest capability stat strip — a navy panel, gold numbers. */
.wh-stats {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  background: var(--surface-inset);
  color: var(--text-on-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-block: var(--space-6);
}
.wh-stat { display: flex; flex-direction: column; gap: var(--space-1); text-align: center; }
.wh-stat-value { font-size: 1.6rem; font-weight: var(--fw-bold); color: var(--star-gold); line-height: var(--lh-tight); }
.wh-stat-label { font-size: var(--fs-eyebrow); color: var(--muted-blue); max-width: none; }

.wh-what { margin-block: var(--space-6); }
.wh-what p { margin-block: var(--space-3) 0; color: var(--text-default); line-height: var(--lh-normal); }

/* Why us — the heart of the page. */
.wh-why { margin-block: var(--space-8); }
.wh-why-head { margin-block-start: var(--space-1); }
.wh-reasons {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin-block-start: var(--space-6);
}
.wh-reason {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-2);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wh-reason:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(10, 26, 47, 0.12); }
.wh-reason-title { color: var(--text-default); }
.wh-reason-body { color: var(--text-muted); line-height: var(--lh-normal); margin: 0; }

/* Works-with strip. */
.wh-works { margin-block: var(--space-8); text-align: center; }
.wh-works-head { font-size: var(--fs-h3card); margin-block-end: var(--space-6); }
.wh-marks {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--space-4) var(--space-8);
}
.wh-mark { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--text-muted); }
.wh-mark-glyph { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; }
.wh-mark-glyph svg, .wh-mark-glyph img { width: 32px; height: auto; max-height: 32px; }
.wh-mark-label { font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold); }

/* FAQ accordion. */
.wh-faq { margin-block: var(--space-6); }
.wh-faq-item { border-block-end: 1px solid var(--border-subtle); padding-block: var(--space-3); }
.wh-faq-item:last-of-type { border-block-end: 0; }
.wh-faq-item summary {
  cursor: pointer; font-weight: var(--fw-semibold); color: var(--text-default);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
}
.wh-faq-item summary::-webkit-details-marker { display: none; }
.wh-faq-item summary::after { content: '+'; color: var(--link); font-weight: var(--fw-bold); }
.wh-faq-item[open] summary::after { content: '\2212'; }
.wh-faq-item p { margin-block: var(--space-2) 0; color: var(--text-muted); line-height: var(--lh-normal); }

/* CTA band — the "sun cresting" gold gradient, dark ink text. */
.wh-cta {
  background: linear-gradient(135deg, var(--cta-gold), var(--cta-amber));
  color: var(--cta-ink);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  margin-block: var(--space-8);
  text-align: center;
  display: flex; flex-direction: column; gap: var(--space-3); align-items: center;
}
.wh-cta-head { color: var(--cta-ink); margin: 0; }
.wh-cta-sub { color: var(--cta-ink); opacity: 0.85; margin: 0; max-width: 40ch; }
.wh-cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: center; margin-block-start: var(--space-2); }
.wh-ghost-light { color: var(--cta-ink); }

@media (max-width: 40rem) {
  .wh-stats { padding: var(--space-4); }
  .wh-stat-value { font-size: 1.35rem; }
  .wh-cta { padding: var(--space-6) var(--space-4); }
}