/* ==========================================================================
   Upkit — shared stylesheet, below-the-fold part.
   Loaded without blocking render (media="print" + onload swap, with a
   <noscript> fallback). The tokens, reset, typography, header and heroes it
   relies on are in the critical stylesheet, which every page inlines first,
   so this file must come after it in the cascade and never redefine those
   rules.
   ========================================================================== */

/* ==========================================================================
   Card grid
   ========================================================================== */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  list-style: none;
}

.card-grid--2,
.card-grid--3,
.card-grid--4 {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .card-grid--2,
  .card-grid--3,
  .card-grid--4 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .card-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .card-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Cards must fill their grid cell so every card in a row is the same height,
   however long its copy runs. Grid items already stretch; the card inside
   them has to be told to take that full height. */
.card-grid > li {
  display: flex;
}

.card-grid > li > .card {
  flex: 1;
}

.card {
  padding: 2rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #fff;
  text-align: center;
  transition: border-color 0.3s ease;
}

.card:hover {
  border-color: rgba(0, 128, 128, 0.2);
}

/* Cards read as title + body, left-aligned, as the Website 2.0 frames draw
   them; no icon tiles. */
.card--left {
  text-align: left;
}

.card__title {
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.card__body {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* A card title with a Plus tag: title left, tag right; on narrow screens the
   tag drops under the title. */
.card__title--tagged {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

@media (max-width: 639px) {
  .card__title--tagged {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* The step number that opens a "Set up in under two minutes" card title. */
.card__step {
  margin-right: 0.5rem;
}

/* ==========================================================================
   Feature list — the Features page's two-column list of feature titles and
   one-line descriptions (no card borders, as drawn).
   ========================================================================== */
.feature-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem 3rem;
  list-style: none;
}

@media (min-width: 768px) {
  .feature-list {
    grid-template-columns: 1fr 1fr;
  }
}

.feature-list__title {
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
}

.feature-list__title .plus-tag {
  margin-left: 0.5rem;
}

.feature-list__body {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* ==========================================================================
   Article — one continuous page of grouped content on the plain background:
   FAQ (question groups), Support (platform sub-headings) and About (prose
   and feature-list cards). Consolidated from faq.css (.faq-group) and
   support.css (.support-body / .support-subheading), which were the same
   pattern under two names. Long lines, but not the full container at
   1440px; groups 4rem apart; a group's prose keeps the section lead's
   left-aligned 42rem measure.
   ========================================================================== */
.article-body {
  max-width: 64rem;
}

.article-group + .article-group {
  margin-top: 4rem;
}

.article-group__title {
  color: var(--ink);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

.article-subheading {
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 2rem 0 0.75rem;
}

.article-subheading:first-child {
  margin-top: 0;
}

.article-group .section__lead {
  margin-inline: 0;
  max-width: 42rem;
}

.section__lead + .feature-list,
.feature-list + .section__lead,
.section__lead + .store-buttons {
  margin-top: 1.5rem;
}

/* ==========================================================================
   Split row — text beside app screens, two columns from 768px, one column
   (text first, then screens) below. `--media-left` swaps the sides on
   desktop only.
   ========================================================================== */
.split {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

.split + .split {
  margin-top: 5rem;
}

.split__media {
  display: flex;
  justify-content: center;
}

.split__text .section__lead {
  margin-inline: 0;
}

@media (min-width: 768px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }

  .split__media {
    justify-content: flex-end;
  }

  .split--media-left .split__media {
    order: -1;
    justify-content: flex-start;
  }
}

/* ---- Bullet list (prose lists in text columns and on Support) ---- */
.bullet-list {
  list-style: disc;
  padding-left: 1.25rem;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.bullet-list li + li {
  margin-top: 0.5rem;
}

.bullet-list--lg {
  color: var(--ink);
  font-size: 1.0625rem;
}

.bullet-list a {
  color: var(--teal);
  text-decoration: none;
}

.bullet-list a:hover,
.bullet-list a:focus-visible {
  text-decoration: underline;
}

.section__title + .bullet-list,
.section__lead + .bullet-list {
  margin-top: 1.5rem;
}

/* ---- Footnote — the small muted line that qualifies a sentence marked
   with * or **, at the end of its text column ---- */
.footnote {
  margin-top: 1.25rem;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.6;
}

/* ==========================================================================
   FAQ list — every question with its answer in view, a hairline between
   items and none under the last one.
   ========================================================================== */
.faq-list {
  list-style: none;
}

.faq-item {
  padding-block: 1.25rem;
}

.faq-item + .faq-item {
  border-top: 1px solid var(--border);
}

.faq-item:first-child {
  padding-top: 0;
}

.faq-item:last-child {
  padding-bottom: 0;
}

.faq-item__question {
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

.faq-item__answer {
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.75;
}

/* Inline prose links, matching .section__note a and .legal-content__blocks a. */
.faq-item__answer a {
  color: var(--teal);
  text-decoration: none;
}

.faq-item__answer a:hover,
.faq-item__answer a:focus-visible {
  text-decoration: underline;
}

.faq-more {
  margin-top: 2rem;
}

/* ==========================================================================
   Download CTA
   ========================================================================== */
.cta {
  position: relative;
  overflow: hidden;
}

.cta__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, var(--teal), var(--teal-mid), var(--teal-deep));
}

.cta__blob {
  position: absolute;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.04);
  filter: blur(64px);
}

.cta__blob--1 {
  top: 0;
  right: 0;
  width: 400px;
  height: 400px;
}

.cta__blob--2 {
  bottom: 0;
  left: 0;
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, 0.03);
}

.cta__inner {
  position: relative;
  padding-block: 6rem;
  text-align: center;
}

.cta__title {
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 2rem;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--bg-section);
  border-top: 1px solid var(--border-hairline);
}

.site-footer__inner {
  padding-block: 4rem;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

@media (min-width: 640px) {
  .site-footer__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }
}

.site-footer__heading {
  color: var(--ink);
  margin-bottom: 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.site-footer__links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color 0.2s ease;
}

.site-footer__links a:hover {
  color: var(--teal);
}