/* How It Works: the homepage's inset panels, dawn gradient and mark dividers. */
.hiw-page { --r: var(--ec-orange-500); background: var(--ec-bg-page); }
.hiw-page .section {
  margin: 20px 41px; padding: 48px; border: 0;
  border-radius: var(--ec-radius-xl); background: var(--ec-surface-muted);
  scroll-margin-top: 24px;
}
.hiw-page .section > .wrap { max-width: none; margin: 0; padding: 0; }
.hiw-page .section-head { margin-bottom: 32px; }
.hiw-page .section-head > div {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px 56px; align-items: end;
}
.hiw-page .section .t-eyebrow {
  grid-column: 1 / -1; display: block;
  width: 100%; margin: 0 0 12px !important; font: 10px var(--ec-font-mono);
  letter-spacing: .08em; text-transform: uppercase; color: var(--ec-text-secondary);
}
.hiw-page .section .t-eyebrow::before,
.hiw-page .section .t-eyebrow::after { content: none; }
.hiw-page .section-title {
  font-family: var(--ec-font-display); font-size: clamp(34px, 3.8vw, 60px);
  font-weight: 400; line-height: 1.02; letter-spacing: -.04em; max-width: 24ch;
}
.hiw-page .section-title .em { color: inherit; }
.hiw-page .section-lede { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ec-text-secondary); }
.hiw-page #top, .hiw-page #enterprise, .hiw-page #how-cta {
  background: url('/ds/img/gradient-dawn.png') center / cover no-repeat;
}
.hiw-page #top { margin-top: 24px; padding: 48px !important; }
.hiw-page #top .section-head { margin: 0; }
.hiw-page #top .section-head > div { grid-template-columns: 1fr; gap: 28px; }
.hiw-page #top h1 { font-size: clamp(44px, 6.6vw, 100px); max-width: 17ch !important; }
.hiw-page #top h1 .em { color: var(--ec-orange-500); }
.hiw-page #top .section-lede, .hiw-page #enterprise .section-lede { color: var(--ec-text-primary); }
.hiw-journey { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.hiw-journey a {
  display: flex; align-items: center; gap: 20px; padding: 24px;
  border: 1px solid rgba(26,26,26,.16); border-radius: var(--ec-radius-md);
  background: rgba(255,255,255,.38); color: var(--ec-text-primary);
  font: 24px var(--ec-font-display); text-decoration: none;
}
.hiw-journey a span:first-child { font: 11px var(--ec-font-mono); }
.hiw-journey a span:last-child { margin-left: auto; }
.hiw-journey a:hover { background: rgba(255,255,255,.7); }
.hiw-page .hiw-diagram { margin-top: 28px; padding: 24px; background: #fff; border: 0; border-radius: var(--ec-radius-md); }
.hiw-page .hiw-diagram > svg { min-width: 560px; }
.hiw-page .hiw-scroll-hint { display: none; }
.hiw-page #govern, .hiw-page #compatibility { background: var(--ec-bg-inverse); color: #fff; }
.hiw-page :is(#govern, #compatibility) .section-title { color: #fff; }
.hiw-page :is(#govern, #compatibility) :is(.section-lede, .hiw-caption, .t-eyebrow, .step-body p) { color: rgba(255,255,255,.75); }
.hiw-page .steps { border: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hiw-page .step { display: block; border: 0; border-radius: var(--ec-radius-md); background: #fff; padding: 28px; }
.hiw-page .step-n { width: auto; min-width: 0; padding: 0 0 20px; border: 0; font: 12px var(--ec-font-mono); overflow-wrap: anywhere; color: var(--ec-orange-700); }
.hiw-page .step-body { padding: 0; }
.hiw-page .step-body h3 { font: 28px/1.15 var(--ec-font-display); margin-bottom: 16px; }
.hiw-page .step-body p { font-size: 15px; line-height: 1.6; }
.hiw-page #compatibility .step { background: #292828; }
.hiw-page #compatibility .step-n { color: #ff9b6b; }
.hiw-page #compatibility .step-body h3, .hiw-page #compatibility .step-body h3 .em { color: #fff; }
.hiw-page #how-cta .section-head > div { grid-template-columns: 1fr; }
.hiw-page #how-cta .section-title { max-width: 24ch; }
.hiw-page #how-cta .cta-row { margin-top: 32px !important; }
@media (max-width: 1000px) {
  .hiw-page .section { padding: 32px; }
  .hiw-page .section-head > div { grid-template-columns: 1fr; gap: 24px; }
  .hiw-journey a { padding: 18px; gap: 12px; font-size: 20px; }
}
@media (max-width: 800px) {
  .hiw-page #publish .hiw-diagram > svg { width: 1000px; min-width: 1000px; max-width: none; transform: translateX(-50px); }
  .hiw-page .hiw-scroll-hint { display: block; margin: 10px 0 0; font: 11px/1.5 var(--ec-font-mono); color: var(--ec-text-secondary); }
  .hiw-page .hiw-scroll-hint span { color: var(--ec-orange-500); }
}
@media (max-width: 640px) {
  .hiw-page .section, .hiw-page #top { margin: 16px 12px; padding: 24px !important; }
  .hiw-page #top h1 { font-size: 46px; }
  .hiw-page .section-title { font-size: 36px; }
  .hiw-page .steps, .hiw-journey { grid-template-columns: 1fr; }
  .hiw-page .hiw-diagram { padding: 16px; }
  .hiw-page #publish .hiw-diagram { margin-inline: -20px; padding: 4px; }
  .hiw-page #publish .hiw-diagram > svg { transform: translateX(-205px); }
  .hiw-page .step { padding: 24px; }
}