/* PostBuy site. No web fonts, no scripts, no third-party requests of any
   kind: a privacy policy that phones Google Fonts on load would be telling the
   reader one thing and doing another. The homepage's Plus Jakarta Sans is
   served from this same origin (fonts/), never fetched from Google. */

@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400; font-display: swap; src: url(fonts/PlusJakartaSans-Regular.ttf) format("truetype"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-display: swap; src: url(fonts/PlusJakartaSans-SemiBold.ttf) format("truetype"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-display: swap; src: url(fonts/PlusJakartaSans-Bold.ttf) format("truetype"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 800; font-display: swap; src: url(fonts/PlusJakartaSans-ExtraBold.ttf) format("truetype"); }

:root {
  --ground: #ffffff;
  --card: #f4f6f4;
  --ink: #0f1a15;
  --muted: #4f5853;
  --rule: #e3e7e4;
  --green: #0a7340;
  --todo: #ffe9a8;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0b100d;
    --card: #141e18;
    --ink: #eaf0ec;
    --muted: #a3afa8;
    --rule: #22302a;
    --green: #3edc8c;
    --todo: #5a4a12;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 44rem; margin: 0 auto; padding: 0 20px; }

header.site { padding: 20px 0 8px; }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wordmark { font-weight: 800; font-size: 1.4rem; letter-spacing: -0.04em; color: var(--ink); text-decoration: none; }
.wordmark span { color: var(--green); }
nav a { color: var(--muted); text-decoration: none; margin-left: 18px; font-size: 0.95rem; font-weight: 600; }
nav a:hover, nav a[aria-current="page"] { color: var(--ink); }

h1 { font-size: 2rem; line-height: 1.2; letter-spacing: -0.03em; margin: 28px 0 6px; }
h2 { font-size: 1.25rem; line-height: 1.3; margin: 40px 0 8px; letter-spacing: -0.01em; }
h3 { font-size: 1.02rem; margin: 22px 0 4px; }
p, li { max-width: 40rem; }
.updated { color: var(--muted); margin: 0 0 24px; font-size: 0.95rem; }

a { color: var(--green); text-underline-offset: 2px; }

.summary {
  background: var(--card);
  border-radius: 20px;
  padding: 18px 22px;
  margin: 8px 0 8px;
}
.summary h2 { margin-top: 0; font-size: 1.05rem; }
.summary ul { margin: 6px 0 0; padding-left: 1.2rem; }

/* Homepage */
.flush { margin: 0; }
body.home { font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* The stage is dark in both themes, like the app's own intro: a panel the
   product is shown on, not part of the reading surface. */
.stage {
  position: relative; overflow: hidden; color: #eaf0ec;
  background: linear-gradient(160deg, #0f1a15 0%, #0a3220 100%);
  border-radius: 0 0 44px 44px;
}
.stage::before { content: ""; position: absolute; right: -140px; top: -140px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(21,192,106,.38), rgba(21,192,106,0) 70%); }
.stage::after { content: ""; position: absolute; left: -110px; bottom: -130px; width: 320px; height: 320px; border-radius: 50%; border: 30px solid rgba(21,192,106,.12); }
.stage-in { position: relative; z-index: 1; max-width: 66rem; margin: 0 auto; padding: 22px 20px 56px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.stage .wordmark { color: #eaf0ec; }
.stage .wordmark span { color: #3edc8c; }
.stage nav a { color: #a3afa8; }
.stage nav a:hover { color: #fff; }
.stage-grid > * { min-width: 0; }
.stage-grid { display: grid; gap: 40px; margin-top: 44px; align-items: center; }
.stage h1 { font-size: 2.5rem; line-height: 1.06; letter-spacing: -0.04em; margin: 8px 0 16px; color: #fff; }
.stage .eyebrow { color: #3edc8c; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; margin: 0; }
.stage .lead { font-size: 1.08rem; color: #b9c5be; max-width: 34rem; margin: 0 0 18px; }
.status { display: inline-block; background: rgba(255,255,255,.1); border-radius: 999px; padding: 7px 15px; font-size: 0.88rem; color: #d5dfd9; margin: 0; }
.stage-art { max-width: 26rem; width: 100%; }

.journey { display: flex; align-items: flex-start; margin-bottom: 22px; }
.j-step { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 78px; }
.j-icon { width: 50px; height: 50px; border-radius: 17px; display: flex; align-items: center; justify-content: center; }
.j-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.j-green { background: #def5e8; color: #0a7340; }
.j-amber { background: #fdefd3; color: #8a5a00; }
.j-red { background: #fde1dd; color: #b32a1c; }
.j-label { font-size: 0.6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #a3afa8; text-align: center; }
.j-dash { flex: 1; height: 0; margin: 25px 2px 0; border-top: 2px dashed rgba(21,192,106,.5); }

.card { display: block; background: #f4f6f4; color: #0f1a15; border-radius: 20px; padding: 13px 16px 14px; box-shadow: 0 14px 30px rgba(0,0,0,.3); max-width: 21rem; }
.card b { display: block; font-size: 1rem; margin: 8px 0 12px; }
.tilt-a { transform: rotate(-1.2deg); }
.tilt-b { transform: rotate(.9deg); margin: 10px 0 0 28px; }
.pill { display: inline-block; border-radius: 999px; padding: 4px 11px; font-size: .68rem; font-weight: 700; letter-spacing: .03em; }
.pill-amber { background: #fdefd3; color: #8a5a00; }
.pill-red { background: #fde1dd; color: #b32a1c; }
.bar { display: block; height: 8px; border-radius: 99px; background: #e3e7e4; overflow: hidden; }
.fill { display: block; height: 100%; border-radius: 99px; }
.fill.amber { background: #f5a524; }
.fill.red { background: #f04438; }
.w55 { width: 55%; }
.w71 { width: 71%; }
.caption { font-size: .75rem; color: #7f8c85; margin: 12px 0 0 4px; }

@media (min-width: 52rem) {
  .stage-grid { grid-template-columns: 1.15fr .85fr; gap: 56px; margin-top: 64px; }
  .stage h1 { font-size: 3.6rem; }
  .stage .lead { font-size: 1.2rem; }
  .stage-in { padding-bottom: 72px; }
}
@media (prefers-reduced-motion: no-preference) {
  .stage-copy > *, .stage-art > * { animation: rise .8s cubic-bezier(.2,.7,.2,1) both; }
  .stage-copy > :nth-child(2) { animation-delay: .08s; }
  .stage-copy > :nth-child(3) { animation-delay: .16s; }
  .stage-copy > :nth-child(4) { animation-delay: .24s; }
  .stage-art > :nth-child(2) { animation-delay: .2s; }
  .stage-art > :nth-child(3) { animation-delay: .32s; }
  .fill { transform-origin: left; animation: grow 1.2s .5s cubic-bezier(.2,.7,.2,1) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes grow { from { transform: scaleX(0); } }
.steps { list-style: none; counter-reset: step; padding: 0; margin: 12px 0; display: grid; gap: 12px; }
.steps li { counter-increment: step; background: var(--card); border-radius: 20px; padding: 16px 18px 16px 60px; position: relative; max-width: none; }
.steps li::before { content: counter(step); position: absolute; left: 18px; top: 16px; width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: var(--ground); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }
.steps strong { display: block; }
.steps span { color: var(--muted); }
.plain { padding-left: 1.2rem; }

/* The Gmail scope is one unbroken 45-character URL; without this it runs off
   the edge of a phone. */
code { font-size: 0.9em; overflow-wrap: anywhere; }

.table-wrap { overflow-x: auto; margin: 12px 0; border: 1px solid var(--rule); border-radius: 14px; }
table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: 0.93rem; }
th, td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--rule); }
th { background: var(--card); font-weight: 700; }
tr:last-child td { border-bottom: 0; }

.notice {
  border-left: 4px solid var(--green);
  background: var(--card);
  padding: 12px 16px;
  border-radius: 0 12px 12px 0;
  margin: 14px 0;
}

/* Anything still to be filled in. Loud on purpose: a placeholder that reaches
   a published page is a legal document with a hole in it. */
mark.todo { background: var(--todo); color: inherit; padding: 0 4px; border-radius: 4px; }

footer.site { border-top: 1px solid var(--rule); margin-top: 56px; padding: 22px 0 48px; color: var(--muted); font-size: 0.9rem; }
footer.site a { color: var(--muted); }

@media (max-width: 480px) {
  h1 { font-size: 1.6rem; }
  .stage h1 { font-size: 2.2rem; }
  nav a { margin-left: 12px; }
}