/* Shared shell for the pages that are not the landing page: contact, brands,
   and the legal documents. One stylesheet so they cannot drift apart.

   The header and footer are lifted from the landing page so a member never
   feels they have left the site. The landing versions animate in on
   body.is-ready, which script.js sets. These pages do not load script.js, so
   the same elements are simply visible from the first paint. */
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Medium.otf") format("opentype");
  font-weight: 500;
  font-display: swap;
}

:root {
  --ivory: #faf9f7;
  --paper: #ffffff;
  --ink: #2c2c2a;
  --soft: #4a463f;
  --muted: #9b9890;
  --border: #eaeaea;
  --eucalyptus: #a7b8ab;
  --deep: #4a6e62;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: "Satoshi", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--deep);
}

.shell {
  max-width: 780px;
  margin: 0 auto;
  /* Top padding clears the fixed header, which is 66px tall sitting 18px down. */
  padding: 132px 24px 60px;
}

.shell.wide {
  max-width: 1080px;
}

@media (max-width: 720px) {
  .shell {
    padding: 108px 20px 48px;
  }
}

/* ── Header, matching the landing page ─────────────────────────────────── */

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 2000;
  padding: 12px 17px;
  border-radius: 24px;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 10px 30px rgba(32, 34, 31, 0.16);
  font: 500 13px/1 "Satoshi", "Helvetica Neue", Arial, sans-serif;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.25s var(--ease);
}

.skip-link:focus {
  outline: none;
  transform: translateY(0);
}

.site-header {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 800;
  width: min(1180px, calc(100% - 40px));
  min-height: 66px;
  padding: 7px 8px 7px 28px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  transform: translateX(-50%);
  border: 1px solid rgba(234, 234, 234, 0.78);
  border-radius: 33px;
  background: rgba(255, 254, 250, 0.82);
  box-shadow: 0 14px 38px rgba(32, 34, 31, 0.08);
  backdrop-filter: blur(24px) saturate(135%);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
  transition: background 0.35s ease, box-shadow 0.35s ease;
}

.wordmark {
  justify-self: start;
  width: max-content;
  height: 100%;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.wordmark-mark {
  height: 26px;
  width: auto;
  margin-right: 17px;
  flex: none;
  display: inline-block;
  vertical-align: middle;
}

.wordmark-type {
  height: 13px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  transition: opacity 0.25s ease;
}

.wordmark:hover .wordmark-type {
  opacity: 0.72;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 34px;
}

.site-nav a {
  position: relative;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--soft);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.25s ease;
}

.site-nav a:hover,
.site-nav a.is-active {
  color: var(--ink);
}

.site-nav a.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  width: 18px;
  height: 2px;
  margin: auto;
  border-radius: 1px;
  background: var(--eucalyptus);
}

.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
}

.header-social {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-right: 20px;
}

.header-social a,
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--soft);
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}

.header-social a:hover,
.header-social a:focus-visible,
.footer-social a:hover,
.footer-social a:focus-visible {
  color: var(--ink);
  transform: translateY(-1px);
}

.header-social svg,
.footer-social svg {
  display: block;
}

.header-cta {
  min-width: 128px;
  height: 50px;
  padding: 0 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13.5px;
  text-decoration: none;
  transition: transform 0.3s var(--ease), background 0.3s ease;
}

.header-cta:hover {
  transform: translateY(-2px);
  background: var(--deep);
}

@media (max-width: 900px) {
  .site-nav {
    display: none;
  }

  .site-header {
    grid-template-columns: 1fr auto;
  }
}

@media (max-width: 720px) {
  .site-header {
    top: 12px;
    width: calc(100% - 24px);
    min-height: 56px;
    padding: 6px 6px 6px 20px;
    border-radius: 28px;
  }

  .header-social {
    display: none;
  }

  .site-header .wordmark {
    height: 44px;
    min-height: 44px;
  }

  .site-header .wordmark-mark {
    height: 22px;
    margin-right: 14px;
  }

  .site-header .wordmark-type {
    height: 11px;
  }

  .header-cta {
    min-width: 112px;
    height: 44px;
    padding: 0 16px;
    font-size: 12px;
  }
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--deep);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing:.04em;
}

h1 {
  margin: 0 0 14px;
  font-size: clamp(32px, 5vw, 46px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.lede {
  margin: 0 0 8px;
  max-width: 60ch;
  color: var(--soft);
  font-size: 17px;
  line-height: 1.62;
}

h2 {
  margin: 40px 0 10px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
}

h3 {
  margin: 26px 0 8px;
  font-size: 15.5px;
  font-weight: 500;
}

p,
li {
  font-size: 15px;
  color: var(--soft);
}

ul,
ol {
  padding-left: 22px;
}

li {
  margin-bottom: 6px;
}

strong {
  color: var(--ink);
  font-weight: 500;
}

.meta {
  margin: 0 0 34px;
  color: var(--muted);
  font-size: 13px;
}

/* A panel for anything that is a statement rather than prose: the entity
   block, a summary, a contact route. */
.panel {
  margin: 26px 0;
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--paper);
}

.panel h3:first-child,
.panel h2:first-child {
  margin-top: 0;
}

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

.grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 820px) {
  .grid3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .grid2,
  .grid3 {
    grid-template-columns: 1fr;
  }
}

.card {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--paper);
}

.card h3 {
  margin: 0 0 6px;
}

.card p {
  margin: 0;
  font-size: 14.5px;
}

.card a {
  font-size: 14.5px;
}

/* ── Article ───────────────────────────────────────────────────────────────
   A read, a post or a circle rendered by the API at /r/, /p/ and /c/. Those
   pages are served from this same domain, so they link this stylesheet rather
   than carrying a second copy of the design. The header and footer are then
   literally the same ones as everywhere else, not a careful imitation. */

.article {
  padding-top: 108px;
}

@media (max-width: 720px) {
  .article {
    padding-top: 86px;
  }
}

/* The hero runs wider than the text. A photograph confined to the reading
   measure reads as an illustration; run wider, it reads as the opening. */
.article-hero {
  max-width: 1080px;
  margin: 0 auto 46px;
  padding: 0 24px;
}

.article-hero img,
.article-hero .standin {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  border-radius: 24px;
  background: #efede7;
}

.article-hero .standin {
  display: grid;
  place-items: center;
  gap: 16px;
  border: 1px solid var(--border);
  background: linear-gradient(160deg, #edf0ec, #e2e8e3);
}

.article-hero .standin .sm {
  width: 40px;
  height: auto;
  aspect-ratio: auto;
  border-radius: 0;
  background: none;
}

.article-hero .standin .sw {
  width: min(210px, 46%);
  height: auto;
  aspect-ratio: auto;
  border-radius: 0;
  background: none;
}

/* 68 characters. Longer than that and the eye loses the start of the next
   line; shorter and a paragraph turns into a column of fragments. */
.article-body {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px 20px;
}

.article-body .eyebrow {
  margin-bottom: 16px;
}

.article-body h1 {
  margin: 0 0 18px;
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.018em;
}

/* The standfirst carries the weight under the title, so it is set larger and
   darker than body copy and given room before the byline. */
.standfirst {
  margin: 0 0 30px;
  color: var(--soft);
  font-size: clamp(17px, 2.1vw, 19.5px);
  line-height: 1.58;
}

.byline {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 40px;
  padding: 15px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
}

.byline .who {
  color: var(--ink);
  font-weight: 500;
}

.byline .sep {
  opacity: 0.5;
}

.byline time {
  color: var(--muted);
}

.prose p {
  margin: 0 0 26px;
  font-size: 17.5px;
  line-height: 1.78;
  color: var(--ink);
}

/* The opening paragraph sets the pace, so it runs a little larger. No drop
   cap: at this width one would collide with the line beside it. */
.prose p:first-child {
  font-size: 18.5px;
}

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

.article-foot {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

.share {
  margin: 48px 0 40px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

.share-label {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing:0.04em;
}

.share-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.share-row a,
.share-row button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 17px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--paper);
  color: var(--soft);
  font: 400 13px/1 "Satoshi", "Helvetica Neue", Arial, sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s var(--ease);
}

.share-row a:hover,
.share-row button:hover {
  border-color: var(--eucalyptus);
  color: var(--ink);
  transform: translateY(-1px);
}

.share-row .primary {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.share-row .primary:hover {
  border-color: var(--deep);
  background: var(--deep);
  color: var(--paper);
}

.share-row svg {
  width: 15px;
  height: 15px;
  display: block;
}

/* The invitation to open the app sits on its own panel at the end, so it is
   an offer rather than an interruption partway down the piece. */
.opencard {
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--paper);
  text-align: center;
}

.opencard h3 {
  margin: 0 0 6px;
  font-size: 17px;
}

.opencard p {
  margin: 0 0 20px;
  font-size: 14.5px;
}

.opencard .btn {
  width: 100%;
  max-width: 320px;
}

.opencard .alt {
  display: block;
  margin-top: 14px;
  color: var(--muted);
  font-size: 12.5px;
  text-decoration: none;
}

.opencard .alt:hover {
  color: var(--ink);
}

/* ── Support ───────────────────────────────────────────────────────────── */

/* Ten sections is too many to scroll blind, so the page opens with its own
   shortcuts. Not a table of contents: these are destinations, not a summary. */
.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 30px 0 4px;
}

.jump a {
  padding: 8px 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--paper);
  color: var(--soft);
  font-size: 13px;
  text-decoration: none;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.jump a:hover {
  border-color: var(--eucalyptus);
  color: var(--ink);
}

.jump a:first-child {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.jump a:first-child:hover {
  background: var(--deep);
  border-color: var(--deep);
}

/* An answer is closed until it is wanted. A page of open answers is a wall,
   and a wall is what stops someone finding the one line they came for. */
.q {
  border-bottom: 1px solid var(--border);
}

.q summary {
  padding: 16px 34px 16px 0;
  position: relative;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s ease;
}

.q summary::-webkit-details-marker {
  display: none;
}

.q summary:hover {
  color: var(--deep);
}

.q summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 6px;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease);
}

.q[open] summary::after {
  margin-top: -2px;
  transform: rotate(-135deg);
}

.q p {
  margin: 0 0 18px;
  padding-right: 34px;
}

/* The heading that opens a group of answers sits closer to them than a
   normal h2 would, so the group reads as one block. */
h2 + .q {
  border-top: 1px solid var(--border);
}

/* ── Ticket form ───────────────────────────────────────────────────────── */

.ticket {
  margin-top: 22px;
}

.ticket .grid2 {
  gap: 0 18px;
}

.req {
  margin-left: 6px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: none;
}

.submitrow {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.submitrow .formmsg {
  margin-top: 0;
}

.btn[disabled] {
  opacity: 0.5;
  cursor: default;
  transform: none;
}

#t-ref {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

/* ── Contact ───────────────────────────────────────────────────────────── */

.contact-grid {
  margin-top: 38px;
}

.contact-grid .card {
  display: flex;
  flex-direction: column;
  padding: 26px 26px 24px;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.contact-grid .card:hover {
  border-color: var(--eucalyptus);
  transform: translateY(-2px);
}

.contact-grid .card p {
  flex: 1;
  margin-bottom: 18px;
}

.card-link {
  align-self: flex-start;
  color: var(--ink);
  font-size: 14.5px;
  text-decoration: none;
  border-bottom: 1px solid var(--eucalyptus);
  padding-bottom: 2px;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.card-link:hover {
  color: var(--deep);
  border-color: var(--deep);
}

.note {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.lede.small {
  margin-bottom: 4px;
  font-size: 15px;
}

/* A definition list in all but name. The address stays in a fixed left
   column so the four routes line up and can be scanned in one pass. */
.rows {
  margin-top: 26px;
  border-top: 1px solid var(--border);
}

.row {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 12px 32px;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
}

.row-key {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}

.row-key a {
  color: var(--ink);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.25s ease;
}

.row-key a:hover {
  color: var(--deep);
}

.tag {
  padding: 4px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--paper);
  color: var(--deep);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.row-body p {
  margin: 0;
}

@media (max-width: 680px) {
  .row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .row-key {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
}

/* The first thing on the contact page is a redirect, because most people who
   land there want support and would otherwise email the wrong address. */
.panel.lead {
  margin: 34px 0 8px;
  border-color: var(--eucalyptus);
}

.panel.lead h3 {
  margin-top: 0;
}

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

.panel.entity {
  margin-top: 40px;
}

.panel.entity h3 {
  color: var(--ink);
}

.panel.entity p {
  margin-bottom: 0;
  font-size: 14px;
}

/* Contents list at the top of a long document. A twenty-section policy is
   unusable without one. */
.toc {
  margin: 30px 0 8px;
  padding: 22px 26px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--paper);
  column-count: 2;
  column-gap: 30px;
}

@media (max-width: 620px) {
  .toc {
    column-count: 1;
  }
}

.toc a {
  display: block;
  padding: 3px 0;
  color: var(--soft);
  font-size: 13.5px;
  text-decoration: none;
  break-inside: avoid;
}

.toc a:hover {
  color: var(--ink);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font: 500 14.5px/1 "Satoshi", "Helvetica Neue", Arial, sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s var(--ease);
}

.btn:hover {
  background: var(--deep);
  transform: translateY(-1px);
}

.btn.ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink);
}

.btn.ghost:hover {
  border-color: var(--eucalyptus);
  background: var(--paper);
}

label {
  display: block;
  margin-bottom: 7px;
  color: var(--soft);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

input,
textarea,
select {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--paper);
  color: inherit;
  font: inherit;
  font-size: 15px;
}

textarea {
  min-height: 130px;
  resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--eucalyptus);
  outline-offset: 1px;
}

.field {
  margin-bottom: 16px;
}

.hint {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}

.formmsg {
  margin-top: 12px;
  min-height: 1.2em;
  font-size: 13.5px;
  color: var(--muted);
}

.formmsg.err {
  color: #8c3a32;
}

.formmsg.ok {
  color: var(--deep);
}

/* ── Footer, matching the landing page ─────────────────────────────────── */

/* Same box as .site-header, and the same inner padding, so the wordmark in
   the footer sits directly below the wordmark in the header and the social
   row lines up with the call to action. Anything else reads as a near miss. */
.pagefoot {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 0 8px 26px 28px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  color: var(--soft);
  font-size: 11px;
}

.pagefoot .wordmark {
  min-height: 0;
  align-self: center;
}

.pagefoot .wordmark-mark {
  height: 22px;
  margin-right: 14px;
}

.pagefoot .wordmark-type {
  height: 10px;
}

.pagefoot > p {
  margin: 0;
  color: var(--soft);
  font-size: 11px;
  text-align: center;
}

.footer-meta {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 18px;
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* The legal line gets a row of its own across the footer, rather than
   sharing the right-hand cell with the social icons, where it was cramped. */
.footer-fine {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(234, 234, 234, 0.9);
}

.fine-c {
  white-space: nowrap;
}

/* A group, so a separator can only ever sit between two links: a dot at the
   start of a wrapped row reads as a typo. */
.fine-links {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  white-space: nowrap;
}

.fine-links a {
  position: relative;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.25s ease;
}

.fine-links a + a::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 50%;
  width: 2px;
  height: 2px;
  margin-top: -1px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}

.fine-links a:hover,
.fine-links a[aria-current="page"] {
  color: var(--ink);
}

@media (max-width: 720px) {
  .pagefoot {
    width: calc(100% - 24px);
    padding: 0 6px 22px 20px;
    grid-template-columns: 1fr auto;
  }

  .pagefoot > p {
    display: none;
  }

  .footer-fine {
    justify-content: center;
    gap: 8px 16px;
    padding-top: 14px;
  }

  .fine-links {
    gap: 16px;
  }

  .fine-links a + a::before {
    left: -9px;
  }
}