/* The palette comes from the iOS app's Theme.swift so the two read as one
   product. Neutrals carry a cool bias toward the accent rather than sitting
   at pure grey. */
:root {
  --ink:        #12131A;
  --ink-2:      #3A3F4D;
  --muted:      #6B7080;
  --faint:      #9AA0AE;
  --rule:       #D2D6E0;
  --rule-soft:  #E6E9F0;
  --paper:      #FFFFFF;
  --ground:     #F4F5F9;
  --ground-2:   #EAEDF4;
  --accent:     #1F6BFF;
  --accent-ink: #1550C8;
  --accent-wash:#EAF1FF;
  --seal:       #1F8A4D;
  --seal-wash:  #E3F6EA;

  --shadow: 0 1px 2px rgba(18,19,26,.05), 0 12px 28px -18px rgba(18,19,26,.28);

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Instrument Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --doc: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --ink:        #F2F3F7;
  --ink-2:      #C6CAD6;
  --muted:      #8D93A3;
  --faint:      #6A7080;
  --rule:       #2E3340;
  --rule-soft:  #232733;
  --paper:      #171A22;
  --ground:     #0F1116;
  --ground-2:   #14171F;
  --accent:     #6E9BFF;
  --accent-ink: #A6C1FF;
  --accent-wash:#18213A;
  --seal:       #5FCB8C;
  --seal-wash:  #12281C;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 30px -18px rgba(0,0,0,.7);
  }
}

  :root[data-theme="dark"] {
  --ink:        #F2F3F7;
  --ink-2:      #C6CAD6;
  --muted:      #8D93A3;
  --faint:      #6A7080;
  --rule:       #2E3340;
  --rule-soft:  #232733;
  --paper:      #171A22;
  --ground:     #0F1116;
  --ground-2:   #14171F;
  --accent:     #6E9BFF;
  --accent-ink: #A6C1FF;
  --accent-wash:#18213A;
  --seal:       #5FCB8C;
  --seal-wash:  #12281C;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 30px -18px rgba(0,0,0,.7);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(1120px, 100% - 3rem); margin-inline: auto; }
.narrow { max-width: 62ch; }

h1, h2, h3 { font-family: var(--display); text-wrap: balance; margin: 0; line-height: 1.08; }
h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 700; letter-spacing: -.03em; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 700; letter-spacing: -.022em; }
h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -.012em; }
p { margin: 0; }
a { color: inherit; }

.kicker {
  font-family: var(--doc);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--muted);
}

section { padding-block: clamp(4.5rem, 9vw, 8rem); }

/* ── masthead ───────────────────────────────────────────────────────── */

header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule-soft);
}
.masthead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .9rem;
}
.brand { display: flex; align-items: center; gap: .6rem; font-family: var(--display); font-weight: 700; letter-spacing: -.02em; font-size: 1.12rem; }
/* Two files rather than a filter: the mark is navy inside a light blue ring,
   and filtering it to white on the dark theme would throw away the two-tone it
   is built on. The dark variant lifts both blues instead, keeping the
   relationship that makes it read as a bird inside a ring. */
.brand img { display: block; }
.masthead nav { display: flex; gap: 1.6rem; font-size: .93rem; color: var(--ink-2); }
.masthead nav a { text-decoration: none; }
.masthead nav a:hover { color: var(--accent); }
@media (max-width: 720px) { .masthead nav { display: none; } }

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

.hero { padding-block: clamp(4rem, 10vw, 7.5rem) clamp(3rem, 6vw, 5rem); }
.hero h1 { max-width: 15ch; }
.hero .lede { margin-top: 1.6rem; max-width: 54ch; font-size: 1.2rem; color: var(--ink-2); }
.hero .lede em { font-style: normal; color: var(--ink); font-weight: 500; }

.cta-row { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--accent); color: #fff;
  font-family: var(--body); font-weight: 600; font-size: .98rem;
  padding: .85rem 1.5rem; border-radius: 999px;
  text-decoration: none; border: 0;
  transition: background .18s ease, transform .18s ease;
}
.btn:hover { background: var(--accent-ink); }
.btn:focus-visible, a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.note { font-size: .93rem; color: var(--muted); }

/* ── the two sides ──────────────────────────────────────────────────── */

/* The centrepiece: one month, read from both ends of the same relationship.
   The ruled ground and tabular figures borrow from the recibo de salarios,
   which is the document that turns this work into a job. */
.ledger {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: var(--shadow);
  overflow: hidden;
  background-image: repeating-linear-gradient(
    to bottom, transparent 0 39px, var(--rule-soft) 39px 40px
  );
}
.ledger-head {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  align-items: baseline; justify-content: space-between;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.ledger-head strong { font-family: var(--display); font-weight: 600; font-size: 1.05rem; }

.sides { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 780px) { .sides { grid-template-columns: 1fr; } }
.side { padding: 1.5rem; }
.side + .side { border-left: 1px solid var(--rule); }
@media (max-width: 780px) {
  .side + .side { border-left: 0; border-top: 1px solid var(--rule); }
}
.side header { position: static; background: none; border: 0; backdrop-filter: none; margin-bottom: 1.1rem; }
.side h3 { margin-bottom: .2rem; }
.side .who { font-size: .9rem; color: var(--muted); }

.lines { display: flex; flex-direction: column; gap: .55rem; margin-top: 1.2rem; }
.line { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .95rem; }
.line span:first-child { color: var(--ink-2); }
.line span:last-child { font-family: var(--doc); font-variant-numeric: tabular-nums; white-space: nowrap; }
.line.total {
  border-top: 1px solid var(--rule); padding-top: .6rem; margin-top: .3rem;
  font-weight: 600;
}
.line.total span:first-child { color: var(--ink); }

.stamp {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: 1.3rem; padding: .35rem .7rem;
  border-radius: 4px; background: var(--seal-wash); color: var(--seal);
  font-family: var(--doc); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
}

.ledger-foot {
  padding: .9rem 1.5rem; border-top: 1px solid var(--rule);
  background: var(--paper); font-size: .88rem; color: var(--muted);
}

/* ── obligations ────────────────────────────────────────────────────── */

.band { background: var(--ground-2); border-block: 1px solid var(--rule-soft); }

.duties { display: grid; gap: 0; margin-top: 3rem; border-top: 1px solid var(--rule); }
.duty {
  display: grid; grid-template-columns: 3.5rem 1fr minmax(0, 22rem);
  gap: 1.5rem; align-items: start;
  padding-block: 1.7rem; border-bottom: 1px solid var(--rule);
}
@media (max-width: 820px) {
  .duty { grid-template-columns: 2.5rem 1fr; }
  .duty .duty-note { grid-column: 2; }
}
.duty-num {
  font-family: var(--doc); font-size: .85rem; color: var(--accent);
  padding-top: .25rem;
}
.duty h3 { margin-bottom: .35rem; }
.duty p { color: var(--ink-2); font-size: .97rem; }
.duty-note { color: var(--muted); font-size: .9rem; }
.duty-note cite { font-style: normal; font-family: var(--doc); font-size: .82rem; color: var(--faint); display: block; margin-top: .3rem; }

/* ── features ───────────────────────────────────────────────────────── */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; margin-top: 3rem; }
.card { background: var(--paper); padding: 1.6rem 1.5rem; }
.card h3 { margin-bottom: .45rem; }
.card p { color: var(--ink-2); font-size: .95rem; }

/* ── status ─────────────────────────────────────────────────────────── */

.status { display: flex; flex-wrap: wrap; gap: 2rem 3.5rem; margin-top: 2.5rem; }
.status div { min-width: 12rem; }
.status dt { font-family: var(--doc); font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.status dd { margin: .35rem 0 0; font-family: var(--display); font-weight: 600; font-size: 1.05rem; }

/* ── footer ─────────────────────────────────────────────────────────── */

footer { border-top: 1px solid var(--rule-soft); padding-block: 3rem 4rem; color: var(--muted); font-size: .9rem; }
.foot-grid { display: flex; flex-wrap: wrap; gap: 2rem 4rem; justify-content: space-between; }
footer a { text-decoration: none; }
footer a:hover { color: var(--accent); }
.legal { max-width: 46ch; }
.legal cite { font-style: normal; display: block; margin-top: .5rem; font-family: var(--doc); font-size: .8rem; color: var(--faint); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── legal documents ──────────────────────────────────────────────────── */

/* Long-form text, set to be read rather than skimmed: one column at a
   comfortable measure, numbered clauses that can be cited, and the same ruled
   vocabulary as the rest of the site so it does not feel bolted on. */
.doc { padding-block: clamp(3rem, 7vw, 5rem) 5rem; }
.doc-head { border-bottom: 1px solid var(--rule); padding-bottom: 2rem; margin-bottom: 3rem; }
.doc-head h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); max-width: 18ch; }
.doc-head .meta { margin-top: 1.2rem; display: flex; flex-wrap: wrap; gap: .4rem 2rem; }
.doc-head .meta span { font-family: var(--doc); font-size: .8rem; color: var(--muted); }

.doc-body { max-width: 68ch; }
.doc-body h2 {
  font-size: 1.35rem; margin-top: 3rem; padding-top: 1.6rem;
  border-top: 1px solid var(--rule-soft); display: flex; gap: .9rem; align-items: baseline;
}
.doc-body h2 .n { font-family: var(--doc); font-size: .85rem; color: var(--accent); flex: none; }
.doc-body h3 { margin-top: 1.8rem; font-size: 1.02rem; }
.doc-body p { margin-top: .9rem; color: var(--ink-2); }
.doc-body ul { margin: .9rem 0 0; padding-left: 1.1rem; color: var(--ink-2); }
.doc-body li { margin-top: .5rem; }
.doc-body li::marker { color: var(--faint); }
.doc-body strong { color: var(--ink); font-weight: 600; }
.doc-body a { color: var(--accent); }

/* A definition table for the things a reader looks up rather than reads. */
.doc-table { width: 100%; border-collapse: collapse; margin-top: 1.4rem; font-size: .93rem; }
.doc-table th, .doc-table td { text-align: left; vertical-align: top; padding: .7rem .9rem .7rem 0; border-bottom: 1px solid var(--rule-soft); }
.doc-table th { font-family: var(--doc); font-weight: 500; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.doc-table td { color: var(--ink-2); }
.doc-table td:first-child { color: var(--ink); font-weight: 500; padding-right: 1.5rem; }
.table-scroll { overflow-x: auto; }

/* Said once, at the top, where it belongs. */
.disclaimer {
  border: 1px solid var(--rule); border-left: 3px solid var(--accent);
  background: var(--paper); border-radius: 4px;
  padding: 1.1rem 1.3rem; margin-bottom: 2.5rem;
  font-size: .94rem; color: var(--ink-2);
}

.doc-nav { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
.doc-nav a {
  font-size: .88rem; text-decoration: none; color: var(--ink-2);
  border: 1px solid var(--rule); border-radius: 999px; padding: .35rem .9rem;
}
.doc-nav a:hover, .doc-nav a[aria-current="page"] { border-color: var(--accent); color: var(--accent); }