/* =============================================================================
   Laser Map Studio — marketing site design system
   =============================================================================
   One stylesheet for the five public pages (home, pricing, guide, about,
   sign in). Implements docs/design_handoff_marketing_site/README.md.

   Everything is scoped to `body.mkt-page` / `.mkt-*` so none of it leaks into
   the studio app, which still runs on the Bootstrap defaults in app.css.

   Rules the design system enforces, so don't reintroduce them piecemeal:
     - Terracotta (--brand-secondary-600) is the ONE primary action per view.
     - Green (--brand-primary-500) is brand and structure, never an action.
     - Separation on dark comes from a 1px --brand-neutral-700 border, not a
       shadow. Shadows belong only to things that genuinely float.
     - Hover changes colour only. No transform, no shadow growth, no scale.
     - No gradient text, no gradient buttons. The nav/footer tan gradient is
       the only gradient in the system.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Page - */

body.mkt-page {
  background: var(--brand-neutral-900);
  color: var(--brand-neutral-300);
  font-family: var(--brand-font-sans);
  font-size: 1rem;
  line-height: var(--brand-leading-relaxed);
  letter-spacing: var(--brand-letter-spacing);
}

/* `clip` rather than `hidden`: `hidden` creates a scroll container and breaks
   the Guide's sticky contents rail. */
body.mkt-page .mkt {
  overflow: clip;

  /* Distance from the viewport edge to the content column. Equals the 64px
     page gutter at 1280px and tracks the centred .mkt-wrap above that, so
     full-bleed blocks (split heroes, page headers) keep their copy on the same
     left edge as the sections below them instead of drifting outward. */
  --mkt-edge: max(64px, calc(50vw - 576px));
}

.mkt-wrap {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 64px;
}

/* 96px between page sections. */
.mkt-section {
  padding-top: 96px;
}

.mkt-section--last {
  padding-bottom: 96px;
}

/* ---------------------------------------------------------- 2. Typography - */

.mkt h1,
.mkt h2,
.mkt h3,
.mkt .mkt-h1,
.mkt .mkt-h2,
.mkt .mkt-h3 {
  font-family: var(--brand-font-headline);
  font-weight: 800;
  font-variation-settings: "opsz" 50, "SOFT" 50;
  color: var(--brand-neutral-50);
  margin: 0;
}

.mkt h1 {
  font-size: 56px;
  line-height: 1.1;
}

/* Split (copy beside photo) heroes run one step down from the full-bleed hero. */
.mkt .mkt-h1--split {
  font-size: 52px;
}

.mkt h2 {
  font-size: 36px;
  line-height: 1.2;
}

/* Sub-section heading — an h2 living inside a card or the Guide's body column. */
.mkt .mkt-h2--sub {
  font-size: 32px;
  line-height: 1.2;
}

.mkt h3 {
  font-size: 20px;
  line-height: 1.3;
}

.mkt p {
  margin: 0;
}

.mkt-lead {
  font-size: 20px;
  line-height: 1.6;
  color: var(--brand-neutral-200);
}

.mkt-copy {
  font-size: 16px;
  color: var(--brand-neutral-300);
  max-width: 66ch;
}

.mkt-copy--sm {
  font-size: 15.5px;
}

.mkt-note {
  font-size: 14.5px;
  color: var(--brand-neutral-400);
}

.mkt-caption {
  font-size: 14px;
  line-height: 1.6;
  color: var(--brand-neutral-400);
}

.mkt a {
  color: var(--brand-secondary-500);
  text-decoration: none;
  transition: color var(--brand-transition-base);
}

.mkt a:hover {
  color: var(--brand-secondary-400);
}

/* ------------------------------------------------------------- 3. Buttons - */

.mkt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--brand-font-headline);
  font-weight: 800;
  font-variation-settings: "opsz" 50, "SOFT" 50;
  font-size: 16px;
  line-height: 1.2;
  padding: 12px 24px;
  border-radius: 8px;
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--brand-transition-base),
    border-color var(--brand-transition-base), color var(--brand-transition-base);
}

/* Hero-scale button. */
.mkt-btn--lg {
  font-size: 17px;
  padding: 14px 26px;
}

.mkt-btn--block {
  width: 100%;
}

.mkt-btn--primary,
.mkt a.mkt-btn--primary {
  background: var(--brand-secondary-600);
  color: #fff;
}

.mkt-btn--primary:hover,
.mkt a.mkt-btn--primary:hover {
  background: var(--brand-secondary-700);
  color: #fff;
}

.mkt-btn--secondary,
.mkt a.mkt-btn--secondary {
  background: transparent;
  color: var(--brand-neutral-200);
  border-color: var(--brand-neutral-600);
}

.mkt-btn--secondary:hover,
.mkt a.mkt-btn--secondary:hover {
  border-color: var(--brand-neutral-400);
  color: var(--brand-neutral-200);
}

/* Auth buttons are green — signing in is brand, not the paid action. */
.mkt-btn--auth,
.mkt a.mkt-btn--auth {
  background: var(--brand-primary-500);
  color: #fff;
}

.mkt-btn--auth:hover,
.mkt a.mkt-btn--auth:hover {
  background: var(--brand-primary-600);
  color: #fff;
}

/* Text link with a trailing arrow. */
.mkt-textlink,
.mkt a.mkt-textlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--brand-font-headline);
  font-weight: 800;
  font-variation-settings: "opsz" 50, "SOFT" 50;
  font-size: 16px;
  color: var(--brand-secondary-500);
}

.mkt-textlink:hover,
.mkt a.mkt-textlink:hover {
  color: var(--brand-secondary-400);
}

.mkt-btn-row {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

/* ------------------------------------------ 4. Surfaces: cards and panels - */

.mkt-card {
  background: var(--brand-neutral-850);
  border: 1px solid var(--brand-neutral-700);
  border-radius: 12px;
  padding: 26px;
}

/* Section-scale surface — the wide panels that close a page. */
.mkt-panel {
  background: var(--brand-neutral-850);
  border: 1px solid var(--brand-neutral-700);
  border-radius: 16px;
  padding: 48px;
}

.mkt-panel--roomy {
  padding: 56px;
}

.mkt-card-title {
  font-family: var(--brand-font-headline);
  font-weight: 800;
  font-variation-settings: "opsz" 50, "SOFT" 50;
  font-size: 19px;
  line-height: 1.3;
  color: var(--brand-secondary-400);
  margin-bottom: 8px;
}

/* Work card — the finished object, caption below the photo, never in a scrim. */
.mkt-work-card {
  background: var(--brand-neutral-850);
  border: 1px solid var(--brand-neutral-700);
  border-radius: 12px;
  overflow: hidden;
}

.mkt-work-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.mkt-work-card__body {
  padding: 16px 18px;
}

.mkt-work-card__title {
  font-family: var(--brand-font-headline);
  font-weight: 800;
  font-variation-settings: "opsz" 50, "SOFT" 50;
  font-size: 20px;
  line-height: 1.3;
  color: var(--brand-neutral-50);
}

.mkt-work-card__meta {
  font-size: 14px;
  color: var(--brand-neutral-400);
  margin-top: 2px;
}

/* Screen capture — 16:10, cropped to the control being described. */
.mkt-shot {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top left;
  border-radius: 12px;
  border: 1px solid var(--brand-neutral-700);
  display: block;
}

.mkt-shot--sm {
  border-radius: 8px;
}

/* -------------------------------------------------------- 5. Grids / rows - */

.mkt-grid {
  display: grid;
  gap: 24px;
}

.mkt-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mkt-grid--2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Sibling groups space with gap, never margins between cards. */
.mkt-grid--steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
}

.mkt-grid--faq {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
}

.mkt-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

/* ----------------------------------------------------------- 6. Spec rows - */
/* Replaces checkmark lists: each row is a fact and its consequence. */

.mkt-specs {
  border-top: 1px solid var(--brand-neutral-800);
}

.mkt-spec {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--brand-neutral-800);
}

.mkt-spec:last-child {
  border-bottom: 0;
}

.mkt-spec > i {
  color: var(--brand-primary-400);
  font-size: 18px;
  line-height: 1.6;
  flex-shrink: 0;
}

.mkt-spec__fact {
  font-size: 16px;
  color: var(--brand-neutral-200);
}

.mkt-spec__why {
  font-size: 14px;
  color: var(--brand-neutral-400);
}

/* Compact variant — one-line facts inside the pricing cards. */
.mkt-spec--compact {
  gap: 12px;
  padding: 14px 0;
  font-size: 15.5px;
  color: var(--brand-neutral-200);
  align-items: baseline;
}

.mkt-spec--compact > i {
  font-size: 17px;
}

/* ------------------------------------------------- 7. Badges, step numbers - */

.mkt-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
}

.mkt-pill--included {
  background: rgb(74 124 89 / 0.18);
  border: 1px solid var(--brand-primary-500);
  color: var(--brand-primary-300);
}

.mkt-pill--beta {
  background: rgb(212 165 116 / 0.16);
  border: 1px solid var(--brand-warning);
  color: var(--brand-warning-light);
}

.mkt-pill--action {
  background: rgb(193 122 95 / 0.16);
  border: 1px solid var(--brand-secondary-600);
  color: var(--brand-secondary-500);
}

.mkt-pill--neutral {
  background: var(--brand-neutral-800);
  border: 1px solid var(--brand-neutral-700);
  color: var(--brand-neutral-400);
  font-size: 12.5px;
  padding: 3px 10px;
}

/* Step numbers are green: they are structure, not action. */
.mkt-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-primary-500);
  color: #fff;
  font-family: var(--brand-font-headline);
  font-weight: 800;
  font-variation-settings: "opsz" 50, "SOFT" 50;
  font-size: 18px;
  flex-shrink: 0;
}

.mkt-step-num--sm {
  width: 30px;
  height: 30px;
  font-size: 16px;
}

/* The one exception: step 3 of the Guide is the moment a credit is spent. */
.mkt-step-num--spend {
  background: var(--brand-secondary-600);
}

/* --------------------------------------------------------- 8. Stat tiles - */

.mkt-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.mkt-stat {
  background: var(--brand-neutral-850);
  border: 1px solid var(--brand-neutral-700);
  border-radius: 12px;
  padding: 24px 28px;
  text-align: center;
  min-width: 170px;
  flex: 1;
}

.mkt-stat__value {
  font-family: var(--brand-font-headline);
  font-weight: 800;
  font-variation-settings: "opsz" 50, "SOFT" 50;
  font-size: 40px;
  line-height: 1.1;
  color: var(--brand-secondary-400);
}

.mkt-stat__label {
  font-size: 14px;
  color: var(--brand-neutral-400);
}

/* Big price numeral with its unit baseline-aligned beside it. */
.mkt-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
}

.mkt-price__value {
  font-family: var(--brand-font-headline);
  font-weight: 800;
  font-variation-settings: "opsz" 50, "SOFT" 50;
  font-size: 56px;
  line-height: 1;
  color: var(--brand-secondary-400);
}

.mkt-price__unit {
  font-size: 16px;
  color: var(--brand-neutral-400);
}

/* ------------------------------------------------------------- 9. Heroes - */

/* Full-bleed photo hero (home). */
.mkt-hero {
  position: relative;
}

.mkt-hero__img {
  width: 100%;
  height: 620px;
  object-fit: cover;
  display: block;
}

.mkt-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgb(16 14 12 / 0.92) 0%,
    rgb(16 14 12 / 0.78) 34%,
    rgb(16 14 12 / 0) 62%
  );
}

/* Shares the 1280/64px wrap so hero copy stays aligned with the sections
   below it on wide screens. */
.mkt-hero__inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 64px;
}

.mkt-hero__copy {
  max-width: 540px;
}

.mkt-hero__credit {
  position: absolute;
  right: 24px;
  bottom: 20px;
  font-size: 13px;
  color: rgb(232 229 224 / 0.6);
}

/* Split hero — copy one side, photo the other (pricing, about). */
.mkt-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;
}

.mkt-split--even {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.mkt-split__copy {
  padding: 80px 56px 80px var(--mkt-edge);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mkt-split__photo {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  display: block;
}

/* Header block for pages with no photo hero (the Guide). The rule spans the
   full width; the copy stays on the content column. */
.mkt-pagehead {
  padding: 72px var(--mkt-edge) 48px;
  border-bottom: 1px solid var(--brand-neutral-700);
}

/* ------------------------------------------------ 10. Guide: rail + table - */

.mkt-guide {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  padding-top: 56px;
}

.mkt-guide__body {
  min-width: 0;
}

.mkt-rail {
  position: sticky;
  top: 24px;
  min-width: 0;
}

.mkt-rail__label {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-neutral-500);
  margin-bottom: 14px;
}

.mkt-rail__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 1px solid var(--brand-neutral-700);
}

.mkt-rail__list a,
.mkt .mkt-rail__list a {
  padding: 7px 0 7px 16px;
  font-size: 15px;
  color: var(--brand-neutral-400);
  border-left: 2px solid transparent;
  margin-left: -1px;
}

.mkt-rail__list a:hover,
.mkt .mkt-rail__list a:hover {
  color: var(--brand-neutral-200);
}

.mkt-rail__list a.is-active,
.mkt .mkt-rail__list a.is-active {
  color: var(--brand-secondary-400);
  border-left-color: var(--brand-secondary-600);
}

.mkt-rail__cta {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--brand-neutral-700);
}

/* Anchor targets clear the sticky rail offset. */
.mkt-guide__body h2[id] {
  scroll-margin-top: 24px;
}

/* Alternating step cards. */
.mkt-step-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  background: var(--brand-neutral-850);
  border: 1px solid var(--brand-neutral-700);
  border-radius: 12px;
  padding: 28px;
}

.mkt-step-card__head {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.mkt-step-card__head h3 {
  font-size: 22px;
}

/* Settings table: Setting / Try / Because. */
.mkt-table {
  background: var(--brand-neutral-850);
  border: 1px solid var(--brand-neutral-700);
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
  border-collapse: collapse;
}

.mkt-table thead th {
  background: var(--brand-neutral-800);
  font-family: var(--brand-font-sans);
  font-weight: var(--brand-font-normal);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-neutral-400);
  padding: 12px 20px;
  text-align: left;
}

.mkt-table tbody td {
  border-top: 1px solid var(--brand-neutral-800);
  padding: 14px 20px;
  font-size: 15px;
  vertical-align: top;
}

.mkt-table td:nth-child(1) {
  color: var(--brand-neutral-200);
  width: 30%;
}

.mkt-table td:nth-child(2) {
  color: var(--brand-secondary-400);
  width: 20%;
}

.mkt-table td:nth-child(3) {
  color: var(--brand-neutral-400);
}

/* Label / explanation rows ("When something looks wrong"). */
.mkt-deflist {
  border-top: 1px solid var(--brand-neutral-800);
}

.mkt-deflist__row {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--brand-neutral-800);
}

.mkt-deflist__row:last-child {
  border-bottom: 0;
}

.mkt-deflist__term {
  min-width: 230px;
  flex-shrink: 0;
  font-family: var(--brand-font-headline);
  font-weight: 800;
  font-variation-settings: "opsz" 50, "SOFT" 50;
  font-size: 16px;
  color: var(--brand-secondary-400);
}

/* Informational callout. */
.mkt-callout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--brand-neutral-850);
  border: 1px solid var(--brand-neutral-700);
  border-radius: 16px;
  padding: 32px 40px;
}

.mkt-callout > i {
  color: var(--brand-warning);
  font-size: 20px;
  line-height: 1.6;
  flex-shrink: 0;
}

/* ----------------------------------------------------------- 11. Sign in - */

.mkt-signin {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
}

.mkt-signin__copy {
  padding: 64px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
}

/* The lockup is a link home, but it reads as the wordmark, not as a link —
   so it opts out of the inline-link colour. */
.mkt-signin__brand,
.mkt a.mkt-signin__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
  font-family: var(--brand-font-headline);
  font-weight: 800;
  font-variation-settings: "opsz" 50, "SOFT" 50;
  font-size: 19px;
  color: var(--brand-neutral-50);
}

.mkt a.mkt-signin__brand:hover {
  color: var(--brand-secondary-400);
}

.mkt-signin__brand img {
  height: 34px;
  background: hsl(39 20% 94%);
  padding: 4px;
  border-radius: 8px;
  display: block;
}

.mkt-signin__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
  max-width: 340px;
}

.mkt-signin__links {
  display: flex;
  gap: 20px;
  font-size: 14px;
  flex-wrap: wrap;
}

.mkt-signin__links a,
.mkt .mkt-signin__links a {
  color: var(--brand-neutral-400);
}

.mkt-signin__links a:hover,
.mkt .mkt-signin__links a:hover {
  color: var(--brand-neutral-200);
}

.mkt-signin__photo {
  position: relative;
}

.mkt-signin__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mkt-signin__photo figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 32px 24px;
  background: linear-gradient(to top, rgb(16 14 12 / 0.85), transparent);
  font-size: 14px;
  color: var(--brand-neutral-200);
}

/* ---------------------------------------------------- 12. Nav (public) - */

.mkt-nav {
  background: linear-gradient(135deg, hsl(33 25% 35%) 0%, hsl(25 20% 30%) 100%);
  padding: 12px 32px;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Every child needs this or the wordmark and button wrap at narrow widths. */
.mkt-nav > *,
.mkt-nav__links > * {
  white-space: nowrap;
  flex-shrink: 0;
}

.mkt-nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.mkt-nav__brand img {
  height: 30px;
  background: hsl(39 20% 94%);
  padding: 4px;
  border-radius: 8px;
  display: block;
}

.mkt-nav__wordmark {
  font-family: var(--brand-font-headline);
  font-weight: 800;
  font-variation-settings: "opsz" 50, "SOFT" 50;
  font-size: 18px;
  color: var(--brand-neutral-50);
}

.mkt-nav__spacer {
  flex: 1 1 auto;
  min-width: 0;
}

.mkt-nav__links {
  display: flex;
  align-items: center;
  gap: 20px;
}

.mkt-nav__links a {
  font-size: 15px;
  color: var(--brand-neutral-200);
  text-decoration: none;
  transition: color var(--brand-transition-base);
}

.mkt-nav__links a:hover {
  color: var(--brand-primary-300);
}

.mkt-nav__links a.is-active {
  color: var(--brand-primary-300);
}

.mkt-nav__cta {
  font-size: 15px;
  padding: 8px 18px;
}

.mkt-nav__toggle {
  display: none;
  background: transparent;
  border: 1px solid hsl(33 18% 52%);
  border-radius: 8px;
  color: var(--brand-neutral-50);
  font-size: 20px;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
}

/* ----------------------------------------------------------- 13. Footer - */
/* The gradient and link colours live in site_footer.css and are shared with
   the studio app; only the marketing attribution line needs tightening. */

body.mkt-page .site-footer {
  margin-top: 0;
}

/* --------------------------------------------------------- 14. Responsive - */

@media (max-width: 1100px) {
  .mkt-guide {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 40px;
  }

  .mkt-deflist__term {
    min-width: 180px;
  }
}

@media (max-width: 968px) {
  body.mkt-page .mkt {
    --mkt-edge: 24px;
  }

  .mkt-wrap {
    padding-inline: 24px;
  }

  .mkt-section {
    padding-top: 64px;
  }

  .mkt-section--last {
    padding-bottom: 64px;
  }

  .mkt h1 {
    font-size: 40px;
  }

  .mkt .mkt-h1--split {
    font-size: 36px;
  }

  .mkt h2 {
    font-size: 30px;
  }

  .mkt .mkt-h2--sub {
    font-size: 26px;
  }

  .mkt-lead {
    font-size: 18px;
  }

  /* Split heroes stack, copy above photo. */
  .mkt-split,
  .mkt-split--even {
    grid-template-columns: minmax(0, 1fr);
  }

  .mkt-split__copy {
    padding: 56px 24px;
    order: -1;
  }

  .mkt-split__photo {
    min-height: 320px;
    max-height: 420px;
  }

  .mkt-hero__img {
    height: 560px;
  }

  /* The 90deg scrim clears its copy at 1280 but not on a phone, where the copy
     spans the full width. Narrow viewports get a vertical scrim instead —
     dense behind the copy, easing off at the bottom so the object still reads. */
  .mkt-hero__scrim {
    background: linear-gradient(
      180deg,
      rgb(16 14 12 / 0.92) 0%,
      rgb(16 14 12 / 0.86) 55%,
      rgb(16 14 12 / 0.45) 100%
    );
  }

  .mkt-hero__inner {
    align-items: flex-start;
    padding-top: 40px;
    padding-inline: 24px;
  }

  .mkt-grid--3,
  .mkt-grid--2,
  .mkt-grid--steps,
  .mkt-grid--faq,
  .mkt-step-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .mkt-grid--steps {
    gap: 32px;
  }

  /* Photo first inside a step card regardless of source order. */
  .mkt-step-card > .mkt-step-card__media {
    order: -1;
  }

  .mkt-panel {
    padding: 32px 24px;
  }

  .mkt-panel--roomy {
    padding: 40px 24px;
  }

  .mkt-pagehead {
    padding: 56px 24px 32px;
  }

  /* Rail becomes a horizontal scroller above the content. */
  .mkt-guide {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding-top: 32px;
  }

  .mkt-rail {
    position: static;
  }

  .mkt-rail__list {
    flex-direction: row;
    overflow-x: auto;
    border-left: 0;
    border-bottom: 1px solid var(--brand-neutral-700);
    gap: 4px;
    scrollbar-width: thin;
  }

  .mkt-rail__list a,
  .mkt .mkt-rail__list a {
    padding: 8px 12px;
    margin-left: 0;
    border-left: 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }

  .mkt-rail__list a.is-active,
  .mkt .mkt-rail__list a.is-active {
    border-left-color: transparent;
    border-bottom-color: var(--brand-secondary-600);
  }

  .mkt-signin {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .mkt-signin__copy {
    padding: 40px 24px;
    gap: 32px;
  }

  .mkt-signin__photo {
    min-height: 320px;
    order: -1;
  }

  /* Wide content scrolls inside its own container; the page never does. */
  .mkt-scroll-x {
    overflow-x: auto;
  }

  .mkt-table {
    min-width: 620px;
  }

  .mkt-deflist__row {
    flex-direction: column;
    gap: 6px;
  }

  .mkt-nav {
    flex-wrap: wrap;
    padding: 12px 20px;
  }

  .mkt-nav__toggle {
    display: block;
    order: 3;
  }

  .mkt-nav__links {
    display: none;
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-top: 12px;
  }

  .mkt-nav__links.is-open {
    display: flex;
  }

  .mkt-nav__links a {
    padding: 8px 0;
  }

  .mkt-nav__cta {
    width: 100%;
    justify-content: flex-start;
    margin-top: 8px;
  }
}

@media (max-width: 640px) {
  .mkt h1 {
    font-size: 32px;
  }

  .mkt .mkt-h1--split {
    font-size: 30px;
  }

  .mkt h2 {
    font-size: 26px;
  }

  .mkt-hero__img {
    height: 540px;
  }

  .mkt-hero__credit {
    position: static;
    display: block;
    padding: 10px 24px 0;
    color: var(--brand-neutral-400);
  }

  .mkt-stats {
    flex-direction: column;
  }

  .mkt-btn-row .mkt-btn {
    width: 100%;
  }
}