/* ---------- Secondary page hero ---------- */

.phero {
  padding-block: clamp(56px, 8vw, 108px) clamp(48px, 6vw, 88px);
}

.phero__inner {
  display: grid;
  /* The copy column carries headlines up to ~24 characters a line at --step-page.
     Narrower than this and the authored line breaks wrap into orphans. */
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

.phero__title {
  font-size: var(--step-page);
  line-height: 1;
  letter-spacing: -0.04em;
  /* Any line that still has to wrap breaks evenly rather than leaving one word. */
  text-wrap: balance;
}

.phero__lede {
  margin-top: clamp(18px, 2.2vw, 28px);
  max-width: 44ch;
  font-size: var(--step-lede);
  line-height: 1.6;
}

.phero__aside {
  position: relative;
  min-height: clamp(240px, 32vw, 380px);
}

.phero__aside .minifield {
  position: absolute;
  inset: 0;
  height: 100%;
}

@media (max-width: 860px) {
  .phero__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .phero__aside {
    min-height: 220px;
    order: -1;
  }
}

/* ---------- Split ---------- */

.split {
  padding-block: var(--section);
  border-top: 1px solid var(--rule);
}

.split__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}

.split--reverse .split__media {
  order: -1;
}

.split__list {
  display: grid;
  gap: 14px;
  margin-top: clamp(24px, 3vw, 34px);
}

.split__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  color: var(--body);
  font-size: var(--step-ui);
  line-height: 1.6;
}

.split__list strong {
  color: var(--navy);
}

.split__marker {
  width: 9px;
  height: 9px;
  margin-top: 8px;
  border-radius: 50%;
  border: 2px solid var(--brand);
}

.split__media {
  position: relative;
  min-height: clamp(260px, 30vw, 400px);
}

.split__media .minifield {
  position: absolute;
  inset: 0;
  height: 100%;
}

@media (max-width: 860px) {
  .split__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .split--reverse .split__media {
    order: 0;
  }

  .split__media {
    min-height: 230px;
  }
}

/* ---------- Flow ---------- */

.flow {
  padding-block: var(--section);
  border-top: 1px solid var(--rule);
}

.flow__head {
  max-width: 46rem;
  margin-bottom: clamp(40px, 5vw, 68px);
}

.flow__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
}

.flowstep {
  position: relative;
  padding-top: 30px;
}

.flowstep__rail {
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rule);
}

.flowstep__rail::before {
  content: '';
  position: absolute;
  left: 0;
  top: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand);
}

.flowstep__index {
  display: block;
  color: var(--brand);
  font-size: var(--step-tag);
  font-weight: 700;
  letter-spacing: 0.12em;
}

.flowstep__title {
  margin-top: 10px;
  font-size: var(--step-title);
  letter-spacing: -0.02em;
}

.flowstep__body {
  margin-top: 10px;
  color: var(--body);
  font-size: var(--step-ui);
  line-height: 1.62;
}

@media (max-width: 820px) {
  .flow__steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

/* ---------- Q&A ---------- */

.qa {
  padding-block: var(--section);
  border-top: 1px solid var(--rule);
}

.qa__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.qaitem {
  border-top: 1px solid var(--rule);
}

.qaitem:last-child {
  border-bottom: 1px solid var(--rule);
}

.qaitem__heading {
  margin: 0;
  font-size: inherit;
}

.qaitem__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 2px;
  text-align: left;
  color: var(--navy);
  font-size: var(--step-intro);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.qaitem__trigger:hover {
  color: var(--brand-press);
}

.qaitem__icon {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
}

.qaitem__icon::before,
.qaitem__icon::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  border-radius: var(--r-sm);
  background: var(--brand);
  transition: transform 0.32s var(--ease-out);
}

.qaitem__icon::after {
  transform: rotate(90deg);
}

.qaitem.is-open .qaitem__icon::after {
  transform: rotate(0deg);
}

.qaitem__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease-out);
}

.qaitem.is-open .qaitem__panel {
  grid-template-rows: 1fr;
}

.qaitem__inner {
  overflow: hidden;
}

.qaitem__inner p {
  padding-bottom: 22px;
  max-width: 58ch;
  color: var(--body);
  font-size: var(--step-ui);
  line-height: 1.65;
}

@media (max-width: 860px) {
  .qa__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Hub cards ---------- */

.hub {
  padding-block: 0 var(--section);
}

.hub__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.hubcard {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: clamp(26px, 3vw, 40px) clamp(22px, 2.4vw, 32px);
  background: #fff;
  transition: background 0.25s var(--ease);
}

.hubcard:hover {
  background: var(--surface-quiet);
}

.hubcard__label {
  color: var(--navy);
  font-size: var(--step-title);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.hubcard__body {
  color: var(--body);
  font-size: var(--step-ui);
  line-height: 1.6;
}

.hubcard__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  color: var(--brand-press);
  font-size: var(--step-small);
  font-weight: 700;
}

.hubcard:hover .hubcard__link svg {
  transform: translateX(3px);
}

.hubcard__link svg {
  transition: transform 0.28s var(--ease-out);
}

@media (max-width: 900px) {
  .hub__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .hub__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Prose / about ---------- */

.prose {
  padding-block: var(--section);
  border-top: 1px solid var(--rule);
}

.prose__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.5fr) minmax(0, 1.5fr);
  gap: clamp(24px, 5vw, 72px);
}

.prose__body {
  display: grid;
  gap: 20px;
  max-width: 62ch;
}

.prose__lead {
  color: var(--navy);
  font-size: var(--step-section);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.prose__body p {
  font-size: var(--step-intro);
  line-height: 1.68;
}

@media (max-width: 780px) {
  .prose__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Team / membership / jobs ---------- */

.team,
.membership,
.jobs,
.statuspage,
.blogindex {
  padding-block: var(--section);
  border-top: 1px solid var(--rule);
}

.team__note {
  margin-top: 26px;
  color: var(--muted);
  font-size: var(--step-ui);
}

.membership__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.membership__tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(28px, 3vw, 44px);
  border-radius: var(--r-md);
  background: var(--navy-panel);
  color: #fff;
}

.jobs__empty {
  display: grid;
  justify-items: start;
  gap: 22px;
  margin-top: clamp(28px, 3vw, 44px);
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--surface-quiet);
  max-width: 62ch;
}

.jobs__empty p {
  font-size: var(--step-ui);
  line-height: 1.65;
}

@media (max-width: 780px) {
  .membership__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Blog ---------- */

.blogindex__list {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}

.postcard a {
  display: grid;
  gap: 8px;
  padding: clamp(26px, 3vw, 40px) 0;
  background: #fff;
  transition: background 0.25s var(--ease);
}

.postcard a:hover {
  background: var(--surface-quiet);
}

.postcard__meta {
  color: var(--muted);
  font-size: var(--step-tag);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.postcard__title {
  max-width: 24ch;
  font-size: var(--step-section);
  line-height: 1.08;
}

.postcard__excerpt {
  max-width: 62ch;
  color: var(--body);
  font-size: var(--step-ui);
  line-height: 1.62;
}

.postcard__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  color: var(--brand-press);
  font-size: var(--step-small);
  font-weight: 700;
}

.blogindex__note {
  margin-top: 26px;
  color: var(--muted);
  font-size: var(--step-small);
}

.article {
  padding-block: clamp(48px, 7vw, 96px) var(--section);
}

.article__inner {
  max-width: 74ch;
}

.article__meta {
  color: var(--brand-press);
  font-size: var(--step-tag);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.article__title {
  margin-top: 16px;
  font-size: var(--step-display);
  line-height: 1.02;
}

.article__excerpt {
  margin-top: 20px;
  font-size: var(--step-lede);
  line-height: 1.6;
}

.article__body {
  margin-top: clamp(32px, 4vw, 52px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--rule);
}

.article__body h2 {
  margin-top: 38px;
  font-size: var(--step-title);
  letter-spacing: -0.02em;
}

.article__body p {
  margin-top: 18px;
  font-size: var(--step-intro);
  line-height: 1.75;
}

.article__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}

/* ---------- Contact / demo ---------- */

.contact {
  padding-block: clamp(48px, 7vw, 96px) var(--section);
}

.contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.contact__list {
  display: grid;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 34px);
}

.contact__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  color: var(--body);
  font-size: var(--step-ui);
}

.contact__list span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--brand);
}

.contact__routes {
  display: grid;
  gap: 1px;
  margin-top: clamp(28px, 3vw, 40px);
  background: var(--rule);
  border-block: 1px solid var(--rule);
}

.contact__routes > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 0;
  background: #fff;
}

.contact__routes dt {
  color: var(--navy);
  font-size: var(--step-ui);
  font-weight: 700;
}

.contact__routes dd {
  margin: 0;
}

.contact__routes a {
  color: var(--brand-press);
  font-size: var(--step-ui);
  font-weight: 700;
}

.contact__routes a:hover {
  color: var(--brand-hover);
}

.contact__note {
  margin-top: 22px;
  color: var(--muted);
  font-size: var(--step-micro);
}

.contact__form {
  padding: clamp(26px, 3vw, 40px);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--surface-quiet);
  box-shadow: var(--shadow-soft);
}

.form__title {
  font-size: var(--step-title);
  letter-spacing: -0.02em;
}

.form__actions {
  display: grid;
  gap: 14px;
  justify-items: start;
}

.form__actions .form__note a {
  color: var(--brand-press);
  font-weight: 700;
}

.field__optional {
  color: var(--muted);
  font-weight: 400;
}

@media (max-width: 860px) {
  .contact__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Status ---------- */

.statuspage__panel {
  display: grid;
  gap: 8px;
  margin-top: clamp(28px, 3vw, 40px);
  padding: clamp(26px, 3vw, 40px);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--surface-quiet);
  max-width: 62ch;
}

.statuspage__label {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: var(--step-tag);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.statuspage__label::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--brand);
}

.statuspage__value {
  color: var(--navy);
  font-size: var(--step-title);
  font-weight: 800;
}

.statuspage__note {
  color: var(--body);
  font-size: var(--step-small);
  line-height: 1.6;
}

.statuspage__note code {
  padding: 2px 5px;
  border-radius: var(--r-sm);
  background: var(--rule-soft);
  font-size: 0.92em;
}

.statuspage__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* ---------- Documents ---------- */

.doc {
  padding-block: clamp(48px, 7vw, 92px) var(--section);
}

.doc__inner {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  max-width: 78ch;
}

.doc__title {
  font-size: var(--step-section);
  line-height: 1.06;
}

.doc__lede {
  margin-top: 16px;
  font-size: var(--step-lede);
}

.doc__notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  margin-top: 22px;
  padding: 15px 17px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--surface-quiet);
  color: var(--navy);
  font-size: var(--step-small);
  line-height: 1.6;
}

.doc__notice::before {
  content: '';
  width: 7px;
  height: 7px;
  margin-top: 0.55em;
  border-radius: 50%;
  border: 1.5px solid var(--brand);
}

.doc__body {
  display: grid;
  gap: 34px;
}

.doc__section h2,
.doc__section h3 {
  font-size: var(--step-title);
  letter-spacing: -0.02em;
}

.doc__section p {
  margin-top: 12px;
  font-size: var(--step-ui);
  line-height: 1.7;
}

.doc__section a {
  color: var(--brand-press);
  font-weight: 700;
  border-bottom: 1px solid transparent;
}

.doc__section a:hover {
  border-bottom-color: currentColor;
}

.doc__section ul {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.doc__section li {
  padding-left: 16px;
  position: relative;
  font-size: var(--step-ui);
}

.doc__section li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
}

/* ---------- Page-level frontier reuse ---------- */

.frontier--page {
  border-top: 1px solid var(--rule);
}