/* =========================================================
   Migrate Digital — Resources (Coming Soon) Page Styles
   Depends on: migrate-tokens.css + home.css + services.css
   Only new styling: the inline notify form in the dark hero
   and the screen-reader-only helper (reused from about).
   ========================================================= */


/* ---------- sr-only helper (reused pattern) ---------- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}


/* ==========================================================
   SECTION RHYTHM  ·  match the 120 / 154 top/bottom cadence
   every other non-hero interior section uses (services'
   .section-build / .section-rank / .section-faq, etc.).
   Without this, .section-roadmap collapses to whatever the
   base .section pad is, which reads tight next to the hero.
   ========================================================== */

.section-roadmap {
  padding-top: 120px;
  padding-bottom: 154px;
}


/* ==========================================================
   ROADMAP PANEL  ·  default .rows has no horizontal padding
   (the row children sit flush with the panel edge), which is
   fine for the half-width .panel-service grid cells on home
   but too tight for this full-width panel. Match the inset
   that .panel-build uses on services: 40px horizontal so the
   bronze numerals don't press against the left edge.
   ========================================================== */

.panel-roadmap .rows {
  padding: var(--sp-5) var(--sp-12) var(--sp-10); /* 12 / 40 / 24 */
}


/* ==========================================================
   NOTIFY FORM  ·  single email field + bronze submit button
   inside the dark hero. Replaces the usual hero-actions button
   row; the input is the primary affordance on this page.

   Input style: transparent background + underline-only border
   so the field reads as a minimal stationery rule on the dark
   hero — matches the cta-form field treatment on other pages.
   ========================================================== */

.notify-form {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  max-width: 520px;
  margin-top: var(--sp-5); /* match .hero-actions spacing rhythm */
}

.notify-input {
  flex: 1;
  min-width: 0;                                     /* let it shrink inside the flex row */
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(250, 246, 241, 0.28);
  color: var(--cream);
  font-family: var(--body);
  font-weight: 400;
  font-size: var(--t-4);                            /* 14px */
  line-height: 1.4;
  padding: var(--sp-5) 0;                           /* 12px top/bottom, no horizontal pad (underline feel) */
  transition: border-color 180ms ease;
}

.notify-input::placeholder {
  color: var(--dark-3);
}

.notify-input:focus {
  outline: none;
  border-bottom-color: var(--bronze-hi);
}

.notify-submit {
  flex: 0 0 auto;
  white-space: nowrap;
}

.notify-note {
  display: block;
  margin-top: var(--sp-5); /* 12 */
  color: var(--dark-3);
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 960px) {

  /* Match the 80 / 100 mobile rhythm used on services /
     process / contact / about interior content sections. */
  .section-roadmap {
    padding-top: 80px;
    padding-bottom: 100px;
  }

  /* Tighten the roadmap panel padding on mobile — 40px sides
     are too generous in a narrow viewport. Matches services'
     .panel-build mobile treatment. */
  .panel-roadmap .rows {
    padding: var(--sp-5) var(--sp-10) var(--sp-10); /* 12 / 24 / 24 */
  }

}

@media (max-width: 560px) {

  /* Form stacks on narrow screens — input on top, full-width
     button below. Mirrors the form-foot pattern on mobile. */
  .notify-form {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-7);
  }
  .notify-submit {
    width: 100%;
    justify-content: center;
  }

}