/* Stash site. Plain CSS, no build step, no scripts.
   Palette "non-photo blue": the light-blue pencil designers sketch in before inking. A deep teal
   on a cool white, with the yellow spark from the icon. Fields (the privacy band, the contact
   card, the footer) are teal in light mode and a deep teal with light ink in dark mode.
   Display type is Bricolage Grotesque, served from this site (assets/fonts, SIL OFL 1.1);
   running text is the system face. The landing hero's app screens are in app-ui.css. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;

  --ground: #f4f7f8;
  --ink: #10191e;
  --ink-2: #44525a;
  --tile: #e8eef0;
  --tile-2: #dde6e9;
  --brand: #0b5f73;
  --brand-ink: #ffffff;
  --link: #0a586b;
  --spark: #ffc857;
  --rule: #76858c;
  --field: #0b5f73;
  --field-ink: #ffffff;
  --field-ink-2: #cfe3e9;
  --focus: var(--brand);

  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --display: "Bricolage Grotesque", var(--font);

  /* Five sizes, no more. */
  --t-display: clamp(44px, 6.2vw, 96px);
  --t-title: clamp(30px, 3.4vw, 48px);
  --t-lead: clamp(20px, 1.6vw, 24px);
  --t-body: 18px;
  --t-small: 15px;

  --margin: clamp(16px, 3vw, 40px);
  --gap: clamp(16px, 2vw, 32px);
  --section: clamp(88px, 10vw, 160px);
  --r: 14px;
  --measure: 68ch;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0c1215;
    --ink: #e6eef1;
    --ink-2: #a6b6bd;
    --tile: #1a252b;
    --tile-2: #212e35;
    --brand: #4ea2b7;
    --brand-ink: #071a20;
    --link: #7cc6d9;
    --rule: #62737b;
    --field: #11404d;
    --field-ink: #e6eef1;
    --field-ink-2: #b9cfd6;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.6;
  overflow-x: clip;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-thickness 0.15s ease, color 0.15s ease;
}

a:hover {
  text-decoration-thickness: 3px;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--brand);
  color: var(--brand-ink);
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.1;
  font-weight: 650;
  text-wrap: balance;
}

h1,
h2 {
  font-family: var(--display);
  letter-spacing: -0.015em;
}

p,
ul,
ol {
  margin: 0;
}

.skip {
  position: absolute;
  left: var(--margin);
  top: -100px;
  background: var(--ink);
  color: var(--ground);
  padding: 8px 14px;
  border-radius: var(--r);
  z-index: 10;
}

.skip:focus {
  top: 12px;
}

.wrap {
  padding-inline: var(--margin);
  max-width: 1520px;
  margin-inline: auto;
}

/* Fields: full colour bands. Links, focus rings and buttons inside take the field's ink. */
.field {
  --link: var(--field-ink);
  --focus: var(--field-ink);
  background: var(--field);
  color: var(--field-ink);
}

.field ::selection {
  background: var(--field-ink);
  color: var(--field);
}

/* ── Bar ─────────────────────────────────────────── */

.bar {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  padding-block: 14px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--ink);
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.wordmark img {
  width: 34px;
  height: 34px;
}

.bar nav ul {
  display: flex;
  gap: clamp(8px, 2vw, 24px);
  list-style: none;
  padding: 0;
}

.bar nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 4px;
  color: var(--ink);
  font-size: var(--t-small);
  font-weight: 600;
  text-decoration: none;
}

.bar nav a:hover,
.bar nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: var(--brand);
}

/* ── Buttons ─────────────────────────────────────── */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 24px;
  border-radius: var(--r);
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 650;
  font-size: var(--t-body);
  text-decoration: none;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(0) scale(0.98);
}

.field .button {
  background: var(--field-ink);
  color: var(--field);
}

/* ── Load sequence ───────────────────────────────── */
/* Titles are painted from the first frame; the parts around them arrive. */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* For scroll entrances: never fully hidden, so a page caught mid-scroll still reads. */
@keyframes lift {
  from {
    opacity: 0.45;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.bar > *,
.hero-copy > :not(h1),
.page-head > :not(h1) {
  animation: rise 0.6s var(--ease) both;
}

.bar > :nth-child(2),
.hero-copy > :nth-child(2),
.page-head > :nth-child(2) {
  animation-delay: 0.06s;
}

.hero-copy > :nth-child(3),
.page-head > :nth-child(3) {
  animation-delay: 0.12s;
}

.page-head > :nth-child(4) {
  animation-delay: 0.18s;
}

/* ── Landing hero ────────────────────────────────── */

.hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: center;
  padding-block: clamp(24px, 4vw, 64px) clamp(64px, 8vw, 128px);
}

.hero-copy {
  grid-column: 1 / 7;
  grid-row: 1;
}

.hero h1 {
  font-size: var(--t-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.98;
}

.hero .lede {
  margin-top: 32px;
  max-width: 34rem;
  font-size: var(--t-lead);
  line-height: 1.45;
}

.soon {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 36px;
  font-size: var(--t-body);
  font-weight: 650;
}

.soon::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--spark);
}

.soon span {
  color: var(--ink-2);
  font-weight: 400;
}

.hero-ui {
  grid-column: 7 / 13;
  grid-row: 1;
  justify-self: end;
  width: min(100%, 41vw, 640px);
}

/* ── Landing sections ────────────────────────────── */

.section {
  padding-block: var(--section);
}

.section-title {
  font-size: var(--t-title);
}

.split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 32px;
}

.split > h2 {
  grid-column: 1 / 5;
  font-size: var(--t-title);
  align-self: start;
}

.split > .split-body {
  grid-column: 5 / 13;
}

.does {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px var(--gap);
  list-style: none;
  padding: 0;
}

.does h3 {
  font-size: var(--t-lead);
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.does p {
  max-width: 42ch;
}

.band .facts {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 20px;
  font-size: var(--t-lead);
  line-height: 1.45;
  max-width: 44ch;
}

.band .facts li {
  padding-left: 1.3em;
  position: relative;
}

.band .facts li::before,
.prose ul > li::before,
.contact-help li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.5em;
  height: 0.54em;
  border-radius: 0.12em;
  background: var(--brand);
  transform: rotate(-6deg);
}

.band .facts li::before {
  background: var(--spark);
  top: 0.42em;
}

.band .more {
  margin-top: 36px;
  font-weight: 650;
}

.pages-head {
  font-size: var(--t-title);
  margin-bottom: 40px;
}

.pages {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 8px;
}

.pages a {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) auto;
  column-gap: var(--gap);
  align-items: baseline;
  padding: 26px clamp(20px, 2.4vw, 32px);
  border-radius: var(--r);
  background: var(--tile);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.pages a:hover {
  background: var(--tile-2);
}

.pages .name {
  font-family: var(--display);
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.pages .what {
  color: var(--ink-2);
  max-width: 52ch;
}

.pages .go {
  color: var(--brand);
  font-size: var(--t-lead);
  font-weight: 650;
  transition: transform 0.15s ease;
}

.pages a:hover .go {
  transform: translateX(4px);
}

/* ── Document pages ──────────────────────────────── */

.page-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 28px;
  padding-block: clamp(40px, 7vw, 104px) clamp(48px, 6vw, 88px);
}

.page-head h1 {
  grid-column: 1 / 12;
  font-size: var(--t-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.98;
}

.page-head .meta {
  grid-column: 10 / 13;
  grid-row: 2;
  font-size: var(--t-small);
  color: var(--ink-2);
  padding: 0.35em 24px 0;
}

.page-head .lede {
  grid-column: 1 / 9;
  grid-row: 2;
  font-size: var(--t-lead);
  line-height: 1.45;
  max-width: 46ch;
}

.page-head .quick {
  grid-column: 1 / 9;
  grid-row: 3;
  max-width: 52ch;
  margin-top: -8px;
}

.doc {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 40px;
  padding-bottom: var(--section);
}

.toc {
  grid-column: 10 / 13;
  grid-row: 1;
  align-self: start;
  position: sticky;
  top: 24px;
  padding: 20px 24px;
  border-radius: var(--r);
  background: var(--tile);
  font-size: var(--t-small);
  line-height: 1.4;
}

.toc h2 {
  font-family: var(--font);
  font-size: var(--t-small);
  font-weight: 650;
  letter-spacing: 0;
  color: var(--ink-2);
  margin-bottom: 8px;
}

.toc ol {
  list-style: none;
  padding: 0;
}

.toc a {
  display: block;
  padding-block: 6px;
  color: var(--ink);
  text-decoration: none;
}

.toc a:hover {
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-decoration-thickness: 3px;
}

.prose {
  grid-column: 1 / 9;
  grid-row: 1;
  max-width: var(--measure);
}

.prose > section + section {
  margin-top: 64px;
}

.prose h2,
.faq .prose h3 {
  font-family: var(--display);
  font-size: var(--t-lead);
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-bottom: 16px;
  scroll-margin-top: 24px;
}

.prose h3 {
  font-size: var(--t-body);
  line-height: 1.4;
  margin: 32px 0 8px;
  scroll-margin-top: 24px;
}

.prose > section {
  scroll-margin-top: 24px;
}

.prose p + p,
.prose p + ul,
.prose p + ol,
.prose ul + p,
.prose ol + p,
.prose ul + ul,
.prose .table + p,
.prose p + .table,
.prose p + .note,
.prose .note + p,
.prose ol + .note,
.prose ul + .note {
  margin-top: 16px;
}

.prose ul,
.prose ol {
  padding-left: 1.4em;
}

.prose li + li {
  margin-top: 8px;
}

.prose ul {
  list-style: none;
}

.prose ul > li {
  position: relative;
}

.prose ul > li::before,
.contact-help li::before {
  left: -1.3em;
}

.prose ol > li::marker {
  font-weight: 700;
  color: var(--brand);
}

.prose strong {
  font-weight: 650;
}

.note {
  padding: 20px 24px;
  border-radius: var(--r);
  background: var(--tile);
}

.basis {
  margin-top: 12px;
  color: var(--ink-2);
  font-size: var(--t-small);
}

.ph {
  background: var(--spark);
  color: #10191e;
  padding: 0 0.25em;
  border-radius: 4px;
  font-weight: 650;
}

/* Real tables keep their lines. */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.45;
}

.table th,
.table td {
  text-align: left;
  vertical-align: top;
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--rule);
}

.table th {
  font-weight: 700;
}

.table thead th {
  font-size: var(--t-small);
  color: var(--ink-2);
}

/* ── Delete account: the two ways in ─────────────── */

.routes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  padding-bottom: clamp(56px, 7vw, 96px);
}

.route {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--r);
  background: var(--tile);
}

.route h2 {
  font-size: var(--t-lead);
  letter-spacing: -0.015em;
}

.route p {
  max-width: 44ch;
}

.route .button,
.route .route-link {
  margin-top: auto;
}

.route .route-link {
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.routes .aside {
  grid-column: 1 / -1;
  color: var(--ink-2);
}

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

.contact {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 32px;
  padding-bottom: var(--section);
}

.contact-card {
  grid-column: 1 / 8;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: clamp(28px, 4vw, 56px);
  border-radius: var(--r);
}

.contact-card h2 {
  font-size: var(--t-lead);
  letter-spacing: -0.01em;
}

.contact-card .address {
  font-family: var(--display);
  font-size: clamp(24px, 3.2vw, 44px);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.1;
  overflow-wrap: normal;
}

.contact-card .button {
  margin-top: 12px;
}

.contact-card .reply {
  color: var(--field-ink-2);
  font-size: var(--t-small);
}

.contact-help {
  grid-column: 8 / 13;
  align-self: start;
  padding-top: clamp(28px, 4vw, 56px);
  padding-left: clamp(0px, 2vw, 24px);
}

.contact-help h2 {
  font-size: var(--t-lead);
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}

.contact-help ul {
  padding-left: 1.4em;
  list-style: none;
}

.contact-help li {
  position: relative;
}

.contact-help li + li {
  margin-top: 8px;
}

.contact-help p {
  margin-top: 16px;
  color: var(--ink-2);
}

.faq {
  padding-bottom: var(--section);
}

.faq > h2 {
  margin-bottom: clamp(32px, 4vw, 56px);
}

.faq .doc {
  padding-bottom: 0;
}

.faq .prose > section + section {
  margin-top: 56px;
}

/* ── Footer ──────────────────────────────────────── */

.foot {
  padding-block: clamp(48px, 6vw, 80px) 28px;
}

.foot-in {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 32px;
  font-size: var(--t-small);
  line-height: 1.5;
}

.foot-brand {
  grid-column: 1 / 6;
}

.foot-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.foot-name img {
  width: 36px;
  height: 36px;
}

.foot-brand p + p {
  margin-top: 14px;
  max-width: 36ch;
  color: var(--field-ink-2);
}

.foot-nav {
  grid-column: 7 / 10;
}

.foot-nav ul {
  list-style: none;
  padding: 0;
}

.foot-nav a,
.foot-contact a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  font-weight: 600;
  text-decoration: none;
}

.foot-nav a:hover,
.foot-contact a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.foot-contact {
  grid-column: 10 / 13;
}

.foot-contact p:first-child {
  color: var(--field-ink-2);
}

.foot-copy {
  grid-column: 1 / -1;
  color: var(--field-ink-2);
}

/* ── 404 ─────────────────────────────────────────── */

.lost {
  padding-block: clamp(40px, 7vw, 104px) var(--section);
}

.lost h1 {
  font-size: var(--t-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.98;
}

.lost .lede {
  margin-top: 28px;
  max-width: 40ch;
  font-size: var(--t-lead);
  line-height: 1.45;
}

.lost .pages {
  margin-top: clamp(40px, 5vw, 64px);
}

/* ── Smaller screens ─────────────────────────────── */

@media (max-width: 1100px) {
  .hero-copy {
    grid-column: 1 / 8;
  }

  .hero-ui {
    grid-column: 8 / 13;
    width: 100%;
  }
}

@media (max-width: 1024px) {
  .split > h2,
  .split > .split-body {
    grid-column: 1 / -1;
  }

  .page-head {
    display: block;
  }

  .page-head .meta {
    margin-top: 20px;
    padding: 0;
  }

  .page-head .lede {
    margin-top: 8px;
  }

  .page-head .quick {
    margin-top: 16px;
  }

  .toc {
    grid-column: 1 / -1;
    grid-row: 1;
    position: static;
  }

  .toc ol {
    columns: 2;
    column-gap: var(--gap);
  }

  .toc li {
    break-inside: avoid;
  }

  .prose {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .contact-card,
  .contact-help {
    grid-column: 1 / -1;
  }

  .contact-help {
    padding: 0;
  }

  .foot-brand {
    grid-column: 1 / -1;
  }

  .foot-nav {
    grid-column: 1 / 7;
  }

  .foot-contact {
    grid-column: 7 / 13;
  }
}

@media (max-width: 760px) {
  :root {
    --t-body: 17px;
  }

  .wordmark {
    font-size: 22px;
  }

  .wordmark img {
    width: 30px;
    height: 30px;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 48px;
    padding-top: 24px;
  }

  .hero-copy,
  .hero-ui {
    grid-column: 1;
  }

  .hero-ui {
    grid-row: 2;
    justify-self: center;
    width: min(85vw, 420px);
  }

  .hero h1,
  .page-head h1,
  .lost h1 {
    font-size: clamp(40px, 11vw, 60px);
  }

  .hero .lede {
    margin-top: 22px;
  }

  .soon {
    margin-top: 28px;
  }

  .does {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .pages a {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 6px;
    padding: 20px;
  }

  .pages .what {
    grid-row: 2;
  }

  .pages .go {
    grid-column: 2;
    grid-row: 1;
  }

  .page-head {
    padding-top: 32px;
  }

  .doc {
    display: block;
  }

  .toc {
    margin-bottom: 48px;
  }

  .toc ol {
    columns: 1;
  }

  .prose > section + section {
    margin-top: 52px;
  }

  .routes {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .table thead {
    display: none;
  }

  .table,
  .table tbody,
  .table tr,
  .table th,
  .table td {
    display: block;
  }

  .table tr {
    padding-block: 12px;
    border-bottom: 1px solid var(--rule);
  }

  .table th,
  .table td {
    border: 0;
    padding: 2px 0;
  }

  .table td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 650;
  }

  .foot-nav,
  .foot-contact {
    grid-column: 1 / -1;
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section-title,
    .split > h2,
    .pages-head,
    .does > li,
    .band .facts li,
    .pages li,
    .contact-card,
    .contact-help,
    .route,
    .prose > section,
    .foot-in > * {
      animation: lift linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 140px;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media print {
  *,
  *::before,
  *::after {
    animation: none !important;
  }

  :root {
    --ground: #fff;
    --ink: #000;
    --ink-2: #333;
    --link: #000;
    --brand: #000;
    --tile: #fff;
    --rule: #999;
  }

  .bar nav,
  .toc,
  .hero-ui,
  .band,
  .foot,
  .skip {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }

  .page-head,
  .doc,
  .contact,
  .routes {
    display: block;
  }

  .prose ul {
    list-style: disc;
  }

  .prose ul > li::before,
  .contact-help li::before {
    display: none;
  }

  .prose a[href^="http"]::after,
  .prose a[href^="/"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
  }

  .field {
    background: none;
    color: #000;
    --link: #000;
    --field-ink-2: #333;
    padding: 0;
  }
}