/* Landing page */
.landing { max-width: 1080px; margin: 0 auto; padding: 0 16px 4rem; }

.landing__nav { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; }

.hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: 2rem;
  padding: 2.5rem 0 3.5rem;
}

.hero h1 { font-size: clamp(2.4rem, 7vw, 4.4rem); font-weight: 800; letter-spacing: -0.02em; }
.hero p { font-size: 1.2rem; color: var(--ink-soft); }
/* Three sample licenses, fanned out like they were tossed on a desk. */
.hero__licenses { display: grid; justify-items: center; padding: 1rem 0 2rem; text-align: left; }
.hero__licenses > .license { grid-area: 1 / 1; width: min(100%, 360px); }
.hero__licenses > .license:nth-child(1) { z-index: 3; transform: translate(-6%, 18%) rotate(-4deg); }
.hero__licenses > .license:nth-child(2) { z-index: 2; transform: translate(8%, -14%) rotate(5deg); }
.hero__licenses > .license:nth-child(3) { z-index: 1; transform: translate(-2%, -40%) rotate(-1deg); }

@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; text-align: center; }
  .hero__licenses { padding: 4rem 0 2.5rem; }
  .hero__licenses > .license { width: 84%; }
  .hero p { margin-inline: auto; }
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem 2rem;
  padding: 2rem 0 3rem;
  border-top: 2px dashed var(--line);
}

.features h3 { color: var(--accent-deep); }
.features p { margin: 0; }

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.plan { display: grid; gap: 0.4rem; align-content: start; }
.plan h3 { margin: 0; }
.plan__price { font: 700 2rem/1 var(--font-display); }
.plan__price small { font-size: 0.95rem; font-weight: 500; color: var(--ink-soft); }
.plan--current { border-color: var(--accent); box-shadow: var(--shadow-pop); }

/* Site details */
.copy-field { display: flex; gap: 0.5rem; }
.copy-field .input { font-size: 0.9rem; }

.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.8rem 0; }
.list li + li { border-top: 2px dashed var(--line); }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 0.6rem 0.5rem; text-align: left; border-bottom: 2px dashed var(--line); }
.table-wrap { overflow-x: auto; }

.menu-choices { display: grid; gap: 0.75rem; }
.menu-choices a { display: flex; justify-content: space-between; align-items: center; text-decoration: none; color: var(--ink); }
.plans > .sheet { margin-top: 0; }