/* The landing's widths stylesheet (ARCH_LANDING_PAGE_1885), linked after landing.css (and landing_sections.css) on every
   landing page: THE ROW, the one-line price and contact, the mockup's 960 px and 560 px blocks and the reduced-motion
   block, the cascade's order kept. */
/* THE ROW (DESIGN CODE §6.10 (7), DECIDED 28): wider than the text column, the viewport's function - equal columns at a
   320 px floor, 16 px between them, no row gap (it opens between every track of a card's subgrid: a card's 16 px bottom
   margin closes a row); a row of exactly four follows the host grid by the viewport - four from 1280 px, two from 768 px
   to 1279 px (2 + 2, never 3 + 1), below that the floor (two to 688 px, then one) */
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  column-gap: 16px;
  row-gap: 0;
  margin: 48px calc((100% - min(1360px, 100vw - 32px)) / 2) 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1280px) {
  .plans:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 768px) and (max-width: 1279.98px) {
  .plans:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the price and «/ month» on one line in every card; the address and the number never break inside */
.price { flex-wrap: nowrap; }

.sales a { white-space: nowrap; }

@media (max-width: 960px) {
  .wrap,
  main:not(#main) { padding-inline: 20px; }
  .nav .links { display: none; }
  h1 { font-size: 38px; }
  h2 { font-size: 29px; }
  #main > section { padding: 72px 0; }
  #main > .hero { padding: 40px 0 72px; }
  .hero-grid,
  .split,
  .proof { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .asks li { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ask-q { font-size: 18.5px; }
  .agent { margin-top: 56px; }
  .track { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 44px; padding-left: 34px; }
  .track::before { top: 6px; right: auto; bottom: 6px; left: 7px; width: 1px; height: auto; }
  .track li { padding-top: 0; }
  .track li::before { top: 3px; left: -34px; }
  .previews-row { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .faq { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .quote--big blockquote { font-size: 21px; }
  #main > .start { padding: 0 0 72px; }
  .panel { padding: 36px 24px; }
  .win-body { padding: 16px; }
  /* the phone density of the cards and the legal pages' column (HOSTED_LANDING_MOBILE) */
  .plan-link { min-height: 2.75rem; }
  .plan { padding: 0.875rem 1rem; border-radius: 0.875rem; }
  .plan h3 { font-size: 1.125rem; }
  main:not(#main) { min-height: 0; padding-block: 2rem 2.5rem; }
}

@media (max-width: 560px) {
  .nav .btn { display: none; }
  h1 { font-size: 34px; }
  .lead { font-size: 16.5px; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .btn,
  .plan-link { transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
}