/* Tallywater. The app's own palette, PRD-0011 section 3.4, values and
   contrast ratios copied from App/Tallywater/App/DesignTokens.swift so the
   site and the binary cannot drift apart. */
:root{
  --paper:#F2EDE3; --paper-2:#E6DECF; --slab:#EDE6D9;
  --ink:#1E2328;        /* 13.57:1 on paper */
  --ink-soft:#5A626B;   /* 5.30:1 */
  --confirmed:#3B6B4F;  /* 5.29:1 */
  --tape:#B03D05;       /* 5.12:1, the one accent */
  --rule:#B9AE97;
  --measure:34rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 1.0625rem/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  text-rendering:optimizeLegibility;
}
.wrap{max-width:var(--measure); margin:0 auto; padding:0 1.25rem}
a{color:var(--tape); text-underline-offset:.18em}
a:focus-visible,button:focus-visible{outline:2px solid var(--tape); outline-offset:3px}

/* The mark: a tally of five, same figure as the app icon. */
.mark{display:block; width:56px; height:56px}

header.site{padding:2.5rem 0 1.25rem}
.eyebrow{
  font:600 .75rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 .5rem;
}
h1{font-size:clamp(2rem,7vw,2.75rem); line-height:1.1; letter-spacing:-.02em; margin:.25rem 0 .75rem}
h2{font-size:1.375rem; line-height:1.25; margin:2.5rem 0 .5rem}
h3{font-size:1.0625rem; margin:1.5rem 0 .35rem}
p,li{max-width:34rem}
.lede{font-size:1.1875rem; color:var(--ink)}
.muted{color:var(--ink-soft)}
/* The one line under the status: a shade smaller than the lede so it
   reads as a footnote to the offer, not part of it. */
.terms-note{font-size:.9375rem}

/* The ruled record: the site's one structural motif. */
.record{list-style:none; padding:0; margin:1.5rem 0}
.record li{
  display:flex; gap:.75rem; align-items:baseline;
  padding:.75rem 0; border-bottom:1px solid var(--rule);
}
.record li::before{
  content:"✓" / ""; color:var(--confirmed); font-weight:700; flex:none; width:1.1em;
}
.record li.open::before{content:"✓" / ""; color:var(--tape)}
.record li.open{font-weight:600}

.status{
  display:inline-block; margin:1.5rem 0 .5rem; padding:.7rem 1.25rem;
  border:1px solid var(--rule); border-radius:999px;
  font:600 .9375rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.06em; color:var(--ink-soft);
}
.cta{
  display:inline-block; margin:1.5rem 0 .5rem; padding:.85rem 1.5rem;
  background:var(--tape); color:var(--paper); text-decoration:none;
  border-radius:999px; font-weight:600; min-height:44px;
}
.waters{width:100%; border-collapse:collapse; margin:1rem 0; font-size:.9375rem}
.waters th,.waters td{text-align:left; padding:.6rem .5rem; border-bottom:1px solid var(--rule)}
.waters th{font:600 .75rem/1 ui-monospace,Menlo,monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft)}
.waters td:nth-child(n+2){font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

footer.site{margin:4rem 0 3rem; padding-top:1.25rem; border-top:1px solid var(--rule); font-size:.9375rem}
footer.site a{color:var(--ink)}

/* Legal pages read as documents, not as marketing. */
.doc h2{font-size:1.125rem; margin-top:2rem}
.doc table{width:100%; border-collapse:collapse; margin:1rem 0; font-size:.9375rem}
.doc th,.doc td{text-align:left; vertical-align:top; padding:.55rem .5rem; border-bottom:1px solid var(--rule)}
.doc th{font-weight:600}
.back{display:inline-block; margin:2rem 0 0; font-size:.9375rem}