/* Wish site pages: Coming soon, Support, Privacy, Terms, Copyright (English and /es/ Spanish), in Next's look.
   Loaded after app.css, so the header, eyebrow and buttons look exactly like the share page.
   Every color, size, font, radius and timing comes from tokens.css (--nx-*, --web-*). No hardcoded design values. */

/* The footer sits at the bottom of short pages and after the text on long ones. */
body.site {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
}
body.site .landing { min-height: 0; grid-row: 1 / 3; }

.site-icon { display: block; margin-bottom: var(--nx-space-sm); border-radius: var(--web-landing-icon-radius); }
.site-icon img {
  display: block;
  width: var(--web-site-icon-size);
  height: var(--web-site-icon-size);
  border-radius: var(--web-landing-icon-radius);
  box-shadow: var(--nx-shadow-card);
}

/* ------------------------------------------------------------ long text */

.doc {
  width: 100%;
  max-width: var(--web-doc-max-width);
  display: grid;
  align-content: start;
  gap: var(--nx-space-md);
  padding-bottom: var(--nx-space-xxxl);
  overflow-wrap: break-word;
}
.doc h2 {
  font: var(--nx-font-title);
  letter-spacing: var(--nx-font-title-tracking);
  font-variation-settings: var(--nx-font-title-variation);
  text-wrap: balance;
  margin-top: var(--nx-space-xxl);
}
.doc h3 { font: var(--nx-font-label); margin: var(--nx-space-sm) 0 0; }
.doc p, .doc li, .doc dd { font: var(--nx-font-body); }
.doc ul, .doc ol { margin: 0; padding-left: var(--nx-space-xxl); display: grid; gap: var(--nx-space-sm); }
.doc a { text-underline-offset: var(--web-link-underline-offset); text-decoration-color: var(--nx-color-purple); }
.doc .lede { color: var(--nx-color-ink-secondary); }
.doc .small { font: var(--nx-font-caption); color: var(--nx-color-ink-secondary); }
.doc code { font: inherit; font-weight: inherit; }

/* Two-column tables (what, how long), on a white card. They fit a phone, so no sideways scrolling. */
.doc table {
  width: 100%;
  border-collapse: collapse;
  background: var(--nx-color-card);
  border-radius: var(--nx-radius-row);
  box-shadow: var(--nx-shadow-pill);
  overflow: hidden;
}
.doc th, .doc td {
  font: var(--nx-font-detail);
  text-align: left;
  vertical-align: top;
  padding: var(--nx-space-md) var(--nx-space-lg);
  border-bottom: var(--nx-size-border) solid var(--nx-color-hairline);
}
.doc tr:last-child td { border-bottom: 0; }
.doc th { font: var(--nx-font-label); color: var(--nx-color-ink-secondary); }

/* Wider facts (each company that processes data): one white card per row instead of a wide table. */
.rows { display: grid; gap: var(--nx-space-md); }
.row {
  display: grid;
  gap: var(--nx-space-sm);
  padding: var(--nx-space-xl);
  border-radius: var(--nx-radius-row);
  background: var(--nx-color-card);
  box-shadow: var(--nx-shadow-pill);
}
.row h3 { margin: 0; }
.row dl { margin: 0; display: grid; gap: var(--nx-space-sm); }
.row dt { font: var(--nx-font-label); color: var(--nx-color-ink-secondary); }
.row dd { margin: 0; font: var(--nx-font-detail); }

/* Questions and answers on the Support page. */
.faq { display: grid; gap: var(--nx-space-sm); }
.faq details {
  border-radius: var(--nx-radius-row);
  background: var(--nx-color-card);
  box-shadow: var(--nx-shadow-pill);
  padding: var(--nx-space-lg) var(--nx-space-xl);
}
.faq summary { font: var(--nx-font-label); cursor: pointer; }
.faq details[open] summary { margin-bottom: var(--nx-space-sm); }
.faq details p { font: var(--nx-font-detail); color: var(--nx-color-ink-secondary); }
.faq details p + p { margin-top: var(--nx-space-sm); }

.contact {
  display: grid;
  justify-items: center;
  gap: var(--nx-space-sm);
  padding: var(--nx-space-xxl) var(--nx-space-xl);
  border-radius: var(--nx-radius-sheet);
  background: var(--nx-color-card);
  box-shadow: var(--nx-shadow-card);
  text-align: center;
}
.contact .address {
  font: var(--nx-font-title);
  letter-spacing: var(--nx-font-title-tracking);
  font-variation-settings: var(--nx-font-title-variation);
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ drafts
   Everything with class "draft" or "draft-note" comes out before launch: search the pages for
   [LAWYER], [FILL] and [CHECK]. They are visible on purpose, so nobody publishes a page with one left in. */

.draft-banner {
  display: grid;
  gap: var(--nx-space-xs);
  padding: var(--nx-space-lg) var(--nx-space-xl);
  border: var(--nx-size-focus-ring) solid var(--nx-color-red);
  border-radius: var(--nx-radius-row);
  background: var(--nx-color-card);
  font: var(--nx-font-caption);
  color: var(--nx-color-ink-secondary);
}
.doc .draft-banner p { font: var(--nx-font-detail); }
.draft-banner strong { color: var(--nx-color-ink); }

.draft-note {
  padding: var(--nx-space-md) var(--nx-space-lg);
  border-left: var(--nx-size-focus-ring) solid var(--nx-color-red);
  border-radius: var(--nx-radius-sm);
  background: var(--nx-color-track);
  font: var(--nx-font-detail);
  color: var(--nx-color-ink-secondary);
}
.draft-note > strong:first-child { font: var(--nx-font-label); color: var(--nx-color-ink); }

mark.draft {
  background: var(--nx-color-track);
  color: var(--nx-color-ink);
  border-radius: var(--nx-radius-xs);
  padding: 0 var(--nx-space-xs);
  text-decoration: underline var(--nx-color-red) var(--nx-size-focus-ring);
  text-underline-offset: var(--web-link-underline-offset);
}

/* ------------------------------------------------------------ footer */

.site-footer {
  max-width: var(--web-page-max-width);
  width: 100%;
  margin: 0 auto;
  padding: var(--nx-space-xl) var(--nx-space-xl) calc(var(--nx-space-xl) + env(safe-area-inset-bottom));
}
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--nx-space-xs) var(--nx-space-xl);
  padding-top: var(--nx-space-lg);
  border-top: var(--nx-size-border) solid var(--nx-color-hairline);
}
.site-footer a {
  padding: var(--nx-space-sm) 0;
  font: var(--nx-font-caption);
  color: var(--nx-color-ink-secondary);
  text-decoration: none;
  transition: color var(--nx-motion-hover-duration) var(--nx-motion-hover-easing);
}
.site-footer a:hover, .site-footer a[aria-current="page"] { color: var(--nx-color-ink); }
.site-footer a[aria-current="page"] { font-weight: bolder; }