.offline-page {
  --offline-panel: #112335;
  --offline-border: #365064;
  --offline-link: #add8f5;
}

.offline-page main {
  padding-block: clamp(26px, 5vw, 62px) clamp(34px, 5vw, 60px);
}

.offline-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  grid-template-areas: "product signup" "privacy signup";
  grid-template-rows: auto 1fr;
  column-gap: clamp(26px, 5vw, 72px);
  row-gap: 24px;
  align-items: start;
}

.offline-intro .resource-hero {
  grid-area: product;
  padding: 13px 0 0;
}

.offline-intro .resource-hero h1 {
  margin: 0 0 19px;
  max-width: 13ch;
}

.offline-intro .resource-hero .lead {
  max-width: 40ch;
  margin-bottom: 0;
}

.offline-local h2,
.offline-contents > h2 {
  font-size: clamp(1.35rem, 2.5vw, 1.8rem);
  line-height: 1.25;
}

.offline-local {
  grid-area: privacy;
}

.offline-local h2 {
  margin: 0 0 8px;
}

.offline-local h2 + p {
  margin: 0;
  max-width: 54ch;
  color: var(--muted);
  line-height: 1.7;
}

.offline-signup {
  grid-area: signup;
  margin: 0;
  border-top-color: var(--accent);
}

.offline-signup h2 {
  margin-bottom: 10px;
}

.offline-signup p {
  margin: 0 0 17px;
}

.offline-signup .offline-price {
  color: var(--ink);
}

.offline-price strong {
  font-size: 1.38rem;
  font-variant-numeric: tabular-nums;
}

.offline-signup form {
  display: grid;
  gap: 8px;
}

.offline-signup label {
  font-weight: 650;
}

.offline-signup input {
  width: 100%;
  min-height: 48px;
  padding: 9px 12px;
  border: 1px solid #7b9bb3;
  border-radius: 5px;
  background: #09131e;
  color: var(--ink);
  font: inherit;
}

.offline-signup input[aria-invalid="true"] {
  border-color: #ffb8ac;
}

.offline-signup :is(input, button, a):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

.offline-signup button {
  margin-top: 5px;
  width: 100%;
  cursor: pointer;
}

.offline-signup button[aria-disabled="true"] {
  cursor: wait;
}

.offline-signup .offline-error {
  color: #ffb8ac;
  margin: 0;
}

.offline-signup #offline-status {
  color: var(--ink);
  margin: 12px 0 0;
}

.offline-signup :is(.offline-error, #offline-status):empty {
  margin: 0;
  height: 0;
  overflow: hidden;
}

.offline-signup .offline-privacy {
  font-size: .9rem;
  margin: 13px 0 0;
}

.offline-contents {
  margin-top: clamp(30px, 5vw, 54px);
}

.offline-contents > h2 {
  margin: 0 0 16px;
}

.offline-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2.4vw, 26px);
}

.offline-items .resource-section {
  margin: 0;
  padding: clamp(16px, 2.4vw, 26px);
  border: 1px solid var(--offline-border);
  background: var(--offline-panel);
}

.offline-items h3 {
  margin: 0 0 6px;
  font-size: 1.12rem;
  color: var(--offline-link);
}

.offline-items p {
  margin: 0;
}

@media (max-width: 760px) {
  .offline-intro {
    grid-template-areas: "product" "signup" "privacy";
    grid-template-rows: auto;
  }

  .offline-intro,
  .offline-items {
    grid-template-columns: minmax(0, 1fr);
  }

  .offline-intro .resource-hero {
    padding-top: 0;
  }

  .offline-intro .resource-hero h1 {
    max-width: 15ch;
  }
}

.offline-intro .resource-hero .offline-emphasis {
  color: var(--accent);
}