/* Wider screens. Phone rules live in base, figs and parts; these only add. */

@media (min-width: 560px) {
  .actions .btn-rani,
  .actions .btn-line {
    flex: 0 0 auto;
  }
}

@media (min-width: 768px) {
  :root {
    --gutter: 28px;
    --header: 68px;
  }

  .show-small {
    display: none;
  }

  .hide-small {
    display: inline;
  }

  .link-demo {
    display: inline;
  }

  .band {
    padding: 80px 0;
  }

  .hero {
    padding: 40px 0 64px;
  }

  .sec-head {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: end;
    gap: 40px;
    margin-bottom: 40px;
  }

  /* Tablet hero: the screen and the phone side by side under the words. */
  .fig-hero {
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 24px;
  }

  .fig-hero .phone {
    order: 0;
  }

  .fig-hero figcaption {
    grid-column: 1 / -1;
  }

  .app-body {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .app-msg {
    display: block;
  }

  .day-stop {
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: start;
  }

  .day-fig {
    grid-column: 2;
  }

  .stories {
    grid-template-columns: 1fr 1fr;
  }

  .features {
    grid-template-columns: 1fr 1fr;
    gap: 32px 36px;
  }

  .plan {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px 32px;
    align-items: start;
  }

  .plan-top,
  .p-m,
  .p-y,
  .plan-basis,
  .plan .btn {
    grid-column: 1;
  }

  .plan-limits,
  .plan-list {
    grid-column: 2;
  }

  .plan-limits {
    grid-row: 1 / span 2;
  }

  .data-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 40px;
    align-items: start;
  }

  .data-grid .sec-head {
    grid-template-columns: 1fr;
    margin-bottom: 0;
  }

  .datafacts {
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
  }

  .faq {
    grid-template-columns: 1fr 1fr;
    gap: 36px 48px;
  }

  .post {
    grid-template-columns: 170px minmax(0, 1fr);
  }

  .closing-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 48px;
  }

  .formpage-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 48px;
    align-items: start;
  }

  .slip {
    padding: 36px 32px 28px;
  }

  .pricing-aside {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 28px;
    align-items: end;
  }

  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1.6fr;
    gap: 32px;
  }
}

@media (min-width: 1024px) {
  .nav-wide {
    display: block;
  }

  .nav-small {
    display: none;
  }

  .nav-wide ul {
    display: flex;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .nav-wide a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 4px 12px;
    border-radius: 999px;
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
  }

  .nav-wide a:hover {
    background: rgba(27, 20, 24, 0.06);
  }

  .nav-wide a[aria-current="page"] {
    box-shadow: inset 0 -2px 0 var(--rani);
    border-radius: 0;
  }

  .header-row {
    gap: 20px;
  }

  .logo {
    margin-right: 12px;
  }

  .nav-wide {
    margin-right: auto;
  }

  .header-actions {
    gap: 18px;
  }

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

  .features-grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 48px;
  }

  .plans {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: stretch;
  }

  .plan {
    display: flex;
    align-items: stretch;
  }

  .plan .btn {
    margin-top: 4px;
  }

  .trial ol {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    border-left: 0;
    border-top: 2px solid var(--ink);
    padding: 18px 0 0;
    gap: 20px;
  }

  .trial li::before {
    left: 0;
    top: -26px;
  }

  .day-stop {
    grid-template-columns: 220px minmax(0, 1fr) 340px;
    gap: 24px 36px;
    padding: 28px 0 30px;
  }

  .day-fig {
    grid-column: 3;
    width: 100%;
  }

  .day-time {
    font-size: 2.75rem;
    white-space: nowrap;
  }
}

/* Desktop hero: the words above the distributor's screen on the left, the shop's phone standing
   the full height on the right and overlapping the screen's edge, so the whole width is one picture. */
@media (min-width: 1100px) {
  .hero {
    padding: 48px 0 32px;
  }

  .hero-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 0;
  }

  .hero-words {
    grid-column: 1 / 9;
    grid-row: 1;
    padding-bottom: 40px;
  }

  .fig-hero {
    display: contents;
  }

  .fig-hero .phone {
    grid-column: 9 / 13;
    grid-row: 1 / 3;
    align-self: start;
    justify-self: end;
    width: 340px;
    margin: 4px 0 0;
    z-index: 2;
  }

  .fig-hero .app {
    grid-column: 1 / 9;
    grid-row: 2;
    margin-right: -56px;
  }

  .fig-hero figcaption {
    grid-column: 1 / 9;
    grid-row: 3;
    padding: 14px 0 20px;
    margin: 0;
  }

  .app-body {
    grid-template-columns: 210px 250px minmax(0, 1fr);
    min-height: 360px;
  }

  .app-list {
    display: block;
  }

  .actions .btn {
    min-height: 54px;
    padding: 12px 26px;
    font-size: 1.125rem;
  }
}

@media (min-width: 1280px) {
  .hero h1 {
    font-size: clamp(4.5rem, 5.4vw, 6.25rem);
  }

  .fig-hero .phone {
    width: 360px;
  }

  .app {
    font-size: 14px;
  }

  .app-body {
    grid-template-columns: 230px 280px minmax(0, 1fr);
  }
}

/* Very wide screens: let the page breathe instead of floating in the middle. */
@media (min-width: 1600px) {
  .wrap {
    max-width: 1520px;
  }
}