/* ==========================================================================
   Billfold hub
   --------------------------------------------------------------------------
   One stylesheet. No framework, no build step, no network requests of any
   kind: fonts are the platform faces, icons are inlined Phosphor paths.

   Colour system
     The hub is deliberately achromatic. Eleven apps each carry their own hue
     and the parent brand would fight all of them, so the frame is ink and
     paper and the only colour on the page belongs to the apps themselves.
     Brand hues arrive per card as --brand / --brand-dark and resolve to
     --tile. Every pair below is measured by check-contrast.mjs.

   Shape system
     --r    12px  panels, cards, buttons, inputs
     --r-sm  8px  icon wells and small marks
     Nothing else. No pills, no sharp corners mixed in.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  --bg: #f4f5f7;
  --surface: #fcfcfd;
  --surface-2: #eaecf0;
  --text: #14161a;
  --muted: #52565e;
  --line: #d7dae0;
  --line-strong: #52565e;
  --accent: #14161a;
  --on-accent: #fcfcfd;
  /* Glyph colour inside a brand-coloured chip. Light-scheme brand hues are
     dark, so the glyph is paper; dark-scheme brand hues are light, so it flips. */
  --on-tile: #fcfcfd;

  --r: 12px;
  --r-sm: 8px;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --gutter: clamp(1rem, 4vw, 2rem);
  --section: clamp(3.25rem, 7vw, 5.5rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1013;
    --surface: #181b20;
    --surface-2: #1f232a;
    --text: #eceef1;
    --muted: #a3a8b2;
    --line: #2c313a;
    --line-strong: #a3a8b2;
    --accent: #eceef1;
    --on-accent: #0e1013;
    --on-tile: #0e1013;
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.25rem, 6.2vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.033em;
}

h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.35rem);
  letter-spacing: -0.028em;
}

h3 {
  font-size: clamp(1.15rem, 2vw, 1.35rem);
}

h4 {
  font-size: 1.0625rem;
}

p,
ul,
ol,
dl {
  margin: 0 0 1rem;
}

ul,
ol {
  padding-left: 1.25rem;
}

li {
  margin-bottom: 0.4rem;
}

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

a {
  color: var(--text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

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

strong {
  font-weight: 650;
}

code,
kbd {
  font-family: var(--mono);
  font-size: 0.9em;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2rem 0;
}

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

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

::selection {
  background: var(--text);
  color: var(--bg);
}

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */

.wrap {
  width: min(100%, 68rem);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.prose {
  max-width: 66ch;
}

.lead {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  color: var(--muted);
  max-width: 42ch;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -6rem;
  z-index: 10;
  background: var(--accent);
  color: var(--on-accent);
  padding: 0.7rem 1rem;
  border-radius: var(--r);
  font-weight: 600;
  text-decoration: none;
  transition: top 160ms var(--ease);
}

.skip-link:focus {
  top: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition: none;
  }
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Header and footer
   -------------------------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  min-height: 68px;
  padding-block: 0.75rem;
}

.wordmark {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  margin-right: auto;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav li {
  margin: 0;
}

.site-nav a {
  color: var(--muted);
  font-size: 0.9375rem;
  text-decoration: none;
  padding-block: 0.25rem;
}

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

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  font-size: 0.9375rem;
  color: var(--muted);
}

.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 48em) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

.footer-grid h2 {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.75rem;
}

.footer-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-grid li {
  margin-bottom: 0.4rem;
}

.footer-grid a {
  color: var(--muted);
}

.footer-grid a:hover {
  color: var(--text);
}

.footer-note {
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.7rem 1.25rem;
  border-radius: var(--r);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 140ms var(--ease), background-color 140ms var(--ease);
}

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
}

.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}

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

.btn:active {
  transform: translateY(0) scale(0.985);
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }

  .btn:hover,
  .btn:active {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  padding-top: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: var(--section);
}

.hero-grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: end;
}

@media (min-width: 56em) {
  .hero-grid {
    grid-template-columns: 1.2fr 0.8fr;
  }
}

.hero h1 {
  max-width: 14ch;
}

.hero .lead {
  margin-bottom: 1.5rem;
}

/* --------------------------------------------------------------------------
   Section headers
   -------------------------------------------------------------------------- */

.section-head {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 52ch;
}

.section-head p {
  color: var(--muted);
  margin: 0.75rem 0 0;
}

/* --------------------------------------------------------------------------
   App index: bento of ten, exact cell count at every breakpoint
   1 column below 40em, 2 columns to 64em (5 rows), 4 columns above
   (two double-width tiles fill 12 units in 3 rows)
   -------------------------------------------------------------------------- */

.app-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 40em) {
  .app-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64em) {
  .app-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .app-card.is-wide {
    grid-column: span 2;
  }
}

.app-card {
  --tile: var(--brand);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text);
  text-decoration: none;
  transition: transform 160ms var(--ease), border-color 160ms var(--ease);
}

@media (prefers-color-scheme: dark) {
  .app-card {
    --tile: var(--brand-dark);
  }
}

/* The brand hue arrives as a filled chip behind the glyph, so each app is
   identifiable at a glance without a coloured stripe along the card edge. */
.icon-well {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  background: var(--tile);
  color: var(--on-tile);
  margin-bottom: 0.25rem;
}

.icon-well .icon {
  width: 24px;
  height: 24px;
}

.app-card:hover {
  transform: translateY(-2px);
  border-color: var(--tile);
}

.app-card:active {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .app-card {
    transition: border-color 160ms linear;
  }

  .app-card:hover,
  .app-card:active {
    transform: none;
  }
}

.app-card h3 {
  color: var(--tile);
  letter-spacing: -0.02em;
}

.app-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.app-card .go {
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}

.app-card:hover .go {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------
   ZestPOS panel
   -------------------------------------------------------------------------- */

.pos {
  --tile: var(--brand);
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

@media (prefers-color-scheme: dark) {
  .pos {
    --tile: var(--brand-dark);
  }
}

@media (min-width: 56em) {
  .pos {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.pos .icon-well {
  width: 52px;
  height: 52px;
  margin-bottom: 1rem;
}

.pos .icon-well .icon {
  width: 30px;
  height: 30px;
}

.pos h2 {
  color: var(--tile);
}

.pos-lead {
  color: var(--muted);
  margin: 0.75rem 0 1.5rem;
}

.pos dl {
  margin: 0;
}

.pos dt {
  font-weight: 650;
  margin-top: 1.25rem;
}

.pos dt:first-of-type {
  margin-top: 0;
}

.pos dd {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   Commitments: hairline list, dividers only between rows
   -------------------------------------------------------------------------- */

.rows {
  display: grid;
  gap: 0;
}

.rows > div {
  display: grid;
  gap: 0.5rem 2.5rem;
  padding-block: clamp(1.5rem, 3vw, 2rem);
}

@media (min-width: 56em) {
  .rows > div {
    grid-template-columns: 18rem 1fr;
  }
}

.rows > div + div {
  border-top: 1px solid var(--line);
}

.rows p {
  margin: 0;
  color: var(--muted);
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   Callout
   -------------------------------------------------------------------------- */

.callout {
  background: var(--surface-2);
  border-radius: var(--r);
  padding: clamp(1.75rem, 4vw, 3rem);
}

.callout p {
  color: var(--muted);
  max-width: 58ch;
  margin-top: 0.9rem;
}

.callout .btn {
  margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   Legal and support link grid: 1 / 2 / 4 columns, four items, no empty cells
   -------------------------------------------------------------------------- */

.link-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 40em) {
  .link-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64em) {
  .link-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.link-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text);
  text-decoration: none;
  transition: border-color 160ms var(--ease);
}

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

.link-card .icon {
  width: 26px;
  height: 26px;
  color: var(--muted);
}

.link-card h3 {
  font-size: 1.0625rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.link-card:hover h3 {
  text-decoration-thickness: 2px;
}

.link-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Document pages: privacy, terms, delete account, support
   -------------------------------------------------------------------------- */

.doc {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding-block: clamp(2.5rem, 5vw, 4rem) var(--section);
}

@media (min-width: 64em) {
  .doc.has-toc {
    grid-template-columns: 15rem 1fr;
    align-items: start;
  }

  .doc.has-toc .toc {
    position: sticky;
    top: 2rem;
  }

  .doc.has-toc .doc-head {
    grid-column: 1 / -1;
  }
}

.doc-head h1 {
  max-width: 18ch;
}

.doc-head .lead {
  margin: 1rem 0 0;
  max-width: 58ch;
}

.updated {
  display: block;
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.toc h2 {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

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

.toc li {
  margin-bottom: 0.5rem;
  counter-increment: toc;
  font-size: 0.9375rem;
}

.toc li::before {
  content: counter(toc) ". ";
  color: var(--muted);
}

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

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

.doc-body {
  max-width: 68ch;
}

.doc-body > section {
  margin-bottom: clamp(2.25rem, 4vw, 3rem);
}

.doc-body > section:last-child {
  margin-bottom: 0;
}

.doc-body h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  margin-bottom: 0.85rem;
  scroll-margin-top: 1.5rem;
}

.doc-body h3 {
  font-size: 1.0625rem;
  margin: 1.75rem 0 0.6rem;
}

.doc-body p,
.doc-body li {
  color: var(--muted);
}

.doc-body strong {
  color: var(--text);
}

.doc-body a {
  color: var(--text);
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  margin-bottom: 1.5rem;
}

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

.panel h3 {
  margin-top: 0;
}

/* Ordered steps used on the delete-account page. */
.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0;
}

.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 2.75rem;
  margin-bottom: 1.75rem;
}

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

.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.875rem;
  font-weight: 700;
}

.steps h3 {
  margin: 0 0 0.4rem;
  line-height: 1.35;
}

.steps p {
  margin-bottom: 0;
}

.path {
  font-family: var(--mono);
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--surface-2);
  padding: 0.15rem 0.4rem;
  border-radius: var(--r-sm);
}

/* Contact rows on the support page. */
.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-list > li {
  display: grid;
  gap: 0.25rem 2rem;
  padding-block: 1.1rem;
  margin: 0;
}

@media (min-width: 40em) {
  .contact-list > li {
    grid-template-columns: 9rem 1fr;
    align-items: baseline;
  }
}

.contact-list > li + li {
  border-top: 1px solid var(--line);
}

.contact-list dfn,
.contact-list .label {
  font-style: normal;
  font-weight: 650;
  color: var(--text);
}

.contact-list p {
  margin: 0;
}