/**
 * The content pages: support, privacy, terms, deleting your account.
 *
 * These carry the pages people arrive at with a problem or a question, often
 * having been sent here by a store listing or a reviewer. So the job is not
 * decoration — it is making a long document navigable without hiding any of it.
 *
 * **Nothing collapses.** A `<details>` accordion is the obvious way to make an
 * FAQ scannable, and it is the wrong tool here twice over: expanding one shifts
 * everything below it, which is exactly the moving-text problem this audience
 * came about, and collapsed content cannot be found with the browser's own find.
 * Everything stays open, and a jump list does the scanning instead.
 */

/* ---------- Page head ----------------------------------------------------- */

/**
 * The title area, as the homepage's hero rather than a boxed plate: a
 * full-width band on the raised surface, flush under the site header, ending
 * in the settling edge (`.settling-divider-out`). The floating card it
 * replaced gave every page a boxed feel the homepage never had.
 */
.page-hero {
  background: var(--raised);
  /* Flush under the site header: cancels main's own top padding. */
  margin-top: calc(-1 * var(--space-xl));
  padding: var(--space-xl) 0 var(--space-md);
}

.page-head {
  margin: 0;
}

/**
 * The settling lines from the app icon: four strokes, wavy at the top and
 * straight at the bottom, depicting the benefit rather than symbolising reading.
 *
 * Drawn as a *mask* rather than a background image, so the shape comes from the
 * data URI and the colour comes from `--decorative` — a token. A background
 * image would have to carry a hex value baked into it, which would be one page
 * picking a colour, and wrong on eight of the nine tints.
 *
 * Behind `@supports` because without mask support the same rule would paint a
 * solid rectangle where the mark should be. Falling back to no ornament is the
 * right failure; falling back to a grey block is not.
 */
/**
 * The hero's settling underline, on every page's title: one stroke, wavy on
 * the left and flat by the right end, drawn as a mask under the h1 so the
 * colour is a token. This replaced the four-stroke letterhead, which was the
 * icon's own composition at a width the icon never has — the same reasoning
 * that retired it from the hero. Without mask support the right failure is
 * no ornament, not a grey block.
 */
@supports ((-webkit-mask-image: url('')) or (mask-image: url(''))) {
  .page-head h1::after {
    content: '';
    display: block;
    width: min(100%, calc(14rem * var(--scale)));
    height: calc(1.4rem * var(--scale));
    margin-top: var(--space-xs);
    background-color: var(--decorative);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 32' fill='none' stroke='%23000' stroke-width='8' stroke-linecap='round'%3E%3Cpath d='M8 16 q18 -12 36 0 q18 10 36 0 q18 -7 36 0 q18 5 36 0 q18 -3 36 0 q18 2 36 0 h84'/%3E%3C/svg%3E")
      no-repeat left center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 32' fill='none' stroke='%23000' stroke-width='8' stroke-linecap='round'%3E%3Cpath d='M8 16 q18 -12 36 0 q18 10 36 0 q18 -7 36 0 q18 5 36 0 q18 -3 36 0 q18 2 36 0 h84'/%3E%3C/svg%3E")
      no-repeat left center / contain;
  }
}

.page-head .eyebrow {
  margin-bottom: var(--space-sm);
}

.page-head h1 {
  margin-bottom: var(--space-md);
  font-size: calc(2.375rem * var(--scale));
  line-height: calc(1.15 * var(--leading));
  max-width: 20ch;
}

@media (max-width: 40rem) {
  .page-head h1 {
    font-size: calc(1.875rem * var(--scale));
  }
}

.page-head .lead {
  margin-bottom: 0;
  max-width: 58ch;
}

/**
 * Who and when, for the legal pages.
 *
 * A description list rather than a paragraph of line breaks: these are pairs,
 * and a screen reader announcing "Last updated, then the date" is worth more
 * than the markup saving.
 */
.meta {
  display: grid;
  gap: var(--space-sm) var(--space-base);
  grid-template-columns: auto 1fr;
  margin: var(--space-lg) 0 0;
  font-size: calc(0.9375rem * var(--scale));
}

.meta dt {
  margin: 0;
  font-weight: 600;
  color: var(--ink-muted);
}

.meta dd {
  margin: 0;
  color: var(--ink-soft);
}

/* ---------- Jump list ----------------------------------------------------- */

/**
 * A quiet strip, not a second panel.
 *
 * It was a raised, bordered, rounded box — which is exactly what the title block
 * above it now is, so the two stacked up as a pair of near-identical plates and
 * the header stopped being the one deliberate thing at the top of the page. A
 * jump list is utility furniture. Rules above and below are enough to group it.
 */
.toc {
  border-block: 1px solid var(--border);
  padding: var(--space-sm) 0 var(--space-md);
  margin-bottom: var(--space-xl);
}

.toc h2 {
  margin: 0 0 var(--space-sm);
  font-size: calc(0.875rem * var(--scale));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: calc(var(--tracking) * 1em + 0.06em);
  color: var(--ink-muted);
}

.toc ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.toc li {
  margin: 0;
}

.toc a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  color: var(--ink-soft);
}

/* ---------- Sections ------------------------------------------------------ */

/**
 * Room for the header that is not there.
 *
 * Nothing on this site is sticky, but a jump link that lands a heading hard
 * against the top edge reads as though the page has scrolled too far.
 */
.section {
  scroll-margin-top: var(--space-lg);
  margin-bottom: var(--space-xxl);
}

.section > h2 {
  margin-top: 0;
  padding-bottom: var(--space-sm);
  border-bottom: 3px solid var(--border);
}

/* A heading with a mark beside it keeps the heading's rule, under the pair. */
.section > .mark-head {
  border-bottom: 3px solid var(--border);
  padding-bottom: var(--space-sm);
}

/* ---------- Question and answer ------------------------------------------- */

.qa {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border);
}

.qa:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.qa h3 {
  margin-top: 0;
  margin-bottom: var(--space-sm);
  font-size: calc(1.1875rem * var(--scale));
}

.qa p:last-child {
  margin-bottom: 0;
}

/* ---------- Contact ------------------------------------------------------- */

.contact {
  border: 2px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
  background: var(--ground);
}

.contact h2 {
  margin-top: 0;
  margin-bottom: var(--space-sm);
  font-size: calc(1.3125rem * var(--scale));
}

.contact p:last-child {
  margin-bottom: 0;
}

.contact-address {
  font-size: calc(1.25rem * var(--scale));
  font-weight: 650;
  word-break: break-word;
}

/* ---------- Lists --------------------------------------------------------- */

/**
 * `role="list"` is not redundant.
 *
 * Removing the marker with `list-style: none` also removes the list semantics in
 * Safari with VoiceOver, so "list of eight items" silently becomes eight loose
 * paragraphs. The role puts it back.
 */
.checklist,
.plain-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-base);
}

.checklist li,
.plain-list li {
  position: relative;
  padding-left: 1.75em;
  margin-bottom: var(--space-sm);
}

.checklist li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-ink);
  font-weight: 700;
}

.plain-list li::before {
  content: '';
  position: absolute;
  left: 0.35em;
  top: 0.62em;
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: var(--decorative);
}

/**
 * Numbered steps.
 *
 * A counter rather than the browser's own numbering, so the digit can be sized
 * and spaced against text that the reader may have scaled to double.
 */
.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 3rem;
  margin-bottom: var(--space-base);
  min-height: 2rem;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -0.1em;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-ink);
  color: var(--ground);
  font-weight: 700;
  font-size: calc(0.9375rem * var(--scale));
}

.steps li:last-child {
  margin-bottom: 0;
}

/* ---------- Two-column contrast ------------------------------------------- */

.two-up {
  display: grid;
  gap: var(--space-base);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin-bottom: var(--space-lg);
  align-items: start;
}

.two-up > div {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  background: var(--raised);
}

.two-up h3 {
  margin-top: 0;
  margin-bottom: var(--space-md);
  font-size: calc(1.125rem * var(--scale));
}

.two-up ul:last-child,
.two-up p:last-child {
  margin-bottom: 0;
}

/* ---------- The hue sweep (how-it-works) ----------------------------------- */

/**
 * The sample pins its own tint through `data-tint`, so with JavaScript off the
 * section is a true illustration rather than a dead slider — the controls ship
 * `hidden` and `scripts/hue-sweep.js` reveals them. Once it runs, the script
 * walks `--hue-demo-ground` through the wheel, which wins over the fallback.
 */
.hue-demo {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-base);
  background: var(--raised);
  margin-bottom: var(--space-lg);
}

.hue-demo-page {
  background: var(--hue-demo-ground, var(--ground));
  color: var(--ink);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.hue-demo-page p {
  margin: 0;
  line-height: calc(1.6 * var(--leading));
  color: inherit;
}

.hue-demo-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-base);
  padding-top: var(--space-base);
}

.hue-demo-hint {
  flex-basis: 100%;
  margin: 0;
  font-size: calc(0.8125rem * var(--scale));
  line-height: calc(1.4 * var(--leading));
  color: var(--ink-muted);
}

.hue-demo-controls label {
  font-weight: 600;
}

.hue-demo-controls input[type='range'] {
  flex: 1 1 12rem;
  min-height: var(--touch);
  accent-color: var(--accent-ink);
}

.hue-demo-controls output {
  min-width: 3.5ch;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}