/* Counting Carrots website. Colors match the app (src/app.css in the app repo); headings are set in Fraunces (SIL OFL, fonts/OFL.txt). */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/fraunces-latin.woff2") format("woff2");
}

:root {
  --bg: #faf7f2;
  --card: #ffffff;
  --ink: #26221e;
  --muted: #6b645c;
  --line: #e4ddd3;
  --line-soft: #efe9e1;
  --carrot: #e8701a;
  --carrot-dark: #b9530c;
  --carrot-soft: #fdeedf;
  --carrot-glow: rgba(232, 112, 26, 0.18);
  --leaf: #2f7d32;
  --leaf-soft: #e6f3e6;
  --leaf-glow: rgba(108, 194, 74, 0.2);
  --bad: #b3261e;
  --bad-soft: #fde8e6;
  --warn: #8a5a00;
  --warn-soft: #fff4d6;
  --warn-line: #f0d48a;
  --on-accent: #ffffff;
  --soil: #2b211a;
  --soil-deep: #1d1611;
  --on-soil: #f7f0e7;
  --soil-muted: #c9b9a7;
  --shadow: rgba(38, 34, 30, 0.1);
  --shadow-strong: rgba(38, 34, 30, 0.22);
  --radius: 18px;
  --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --text: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1b1917;
    --card: #25221f;
    --ink: #ede8e2;
    --muted: #a9a097;
    --line: #3d3833;
    --line-soft: #2f2b27;
    --carrot: #ec7b2a;
    --carrot-dark: #f7a263;
    --carrot-soft: #3a2819;
    --carrot-glow: rgba(236, 123, 42, 0.16);
    --leaf: #72c276;
    --leaf-soft: #1e3120;
    --leaf-glow: rgba(114, 194, 118, 0.14);
    --bad: #f2837a;
    --bad-soft: #3b201e;
    --warn: #f2c65c;
    --warn-soft: #33290f;
    --warn-line: #5c4a1a;
    --soil: #110e0b;
    --soil-deep: #0a0807;
    --on-soil: #f3ece3;
    --soil-muted: #b3a493;
    --shadow: rgba(0, 0, 0, 0.4);
    --shadow-strong: rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1b1917;
  --card: #25221f;
  --ink: #ede8e2;
  --muted: #a9a097;
  --line: #3d3833;
  --line-soft: #2f2b27;
  --carrot: #ec7b2a;
  --carrot-dark: #f7a263;
  --carrot-soft: #3a2819;
  --carrot-glow: rgba(236, 123, 42, 0.16);
  --leaf: #72c276;
  --leaf-soft: #1e3120;
  --leaf-glow: rgba(114, 194, 118, 0.14);
  --bad: #f2837a;
  --bad-soft: #3b201e;
  --warn: #f2c65c;
  --warn-soft: #33290f;
  --warn-line: #5c4a1a;
  --soil: #110e0b;
  --soil-deep: #0a0807;
  --on-soil: #f3ece3;
  --soil-muted: #b3a493;
  --shadow: rgba(0, 0, 0, 0.4);
  --shadow-strong: rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 18px/1.55 var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; width: 100%; }
a { color: var(--carrot-dark); text-underline-offset: 3px; }
a:hover { color: var(--carrot); }
img { max-width: 100%; height: auto; }
h1, h2, h3, .brand span, .cost-brand, .big-amount, .qa summary, .window-head, .step::before, .easier-steps li::before {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 50;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); margin: 0 0 22px; text-wrap: balance; }
h2 { font-size: clamp(2rem, 4.2vw, 3rem); margin: 0 0 16px; text-wrap: balance; }
h3 { font-size: 1.25rem; margin: 0 0 8px; }
p { margin: 0 0 1em; }
.muted { color: var(--muted); }
.small { font-size: 0.9rem; }
.center { text-align: center; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--card); padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 8px; }
input:focus-visible, .button:focus-visible, a:focus-visible, summary:focus-visible, button:focus-visible { outline: 3px solid var(--carrot); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.eyebrow { margin: 0 0 12px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--carrot-dark); }

/* ---------- Header ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
@supports not (background: color-mix(in srgb, red, blue)) { .top { background: var(--bg); } }
.top-inner { display: flex; align-items: center; gap: 28px; max-width: 1160px; margin: 0 auto; padding: 14px 24px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; margin-right: auto; }
.brand span { font-size: 1.3rem; font-weight: 700; white-space: nowrap; }
.brand .logo { width: 32px; height: 32px; transition: transform 0.25s ease; }
.brand:hover .logo { transform: rotate(-10deg) scale(1.08); }
.brand:hover { color: var(--ink); }
.top-nav { display: flex; gap: 28px; }
.top-nav a { color: var(--muted); text-decoration: none; font-weight: 500; }
.top-nav a:hover { color: var(--ink); }

/* ---------- Buttons ---------- */
.button {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 14px 26px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); font: inherit; font-weight: 600; line-height: 1.25; text-decoration: none; cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}
.button:hover { border-color: var(--carrot); color: var(--ink); transform: translateY(-1px); box-shadow: 0 6px 16px -8px var(--shadow-strong); }
.button:active { transform: translateY(0); box-shadow: none; }
.button.primary { background: var(--carrot); border-color: var(--carrot); color: var(--on-accent); box-shadow: 0 10px 24px -12px rgba(232, 112, 26, 0.8); }
.button.primary:hover { background: var(--carrot-dark); border-color: var(--carrot-dark); color: var(--on-accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .button.primary:hover { background: #d0631a; border-color: #d0631a; } }
:root[data-theme="dark"] .button.primary:hover { background: #d0631a; border-color: #d0631a; }
.button.big { padding: 17px 28px; font-size: 1.1rem; width: 100%; }
.button.small-button { padding: 10px 18px; font-size: 0.95rem; border-radius: 11px; flex-direction: row; }
.button.disabled { color: var(--muted); cursor: default; }
.button.disabled:hover { border-color: var(--line); transform: none; box-shadow: none; }
.button-label { display: inline-flex; align-items: center; gap: 8px; }
.os-icon { width: 1.1em; height: 1.1em; flex: none; }
.button small { font-weight: 400; font-size: 0.78rem; opacity: 0.85; margin-top: 2px; }

/* The download buttons: three equal buttons in a row, named by the OS alone. */
.buttons.downloads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 30rem; margin: 0 0 12px; }
.downloads .button { padding: 14px 8px; }
.downloads .button small { white-space: nowrap; }
.downloads .os-icon { width: 1.2em; height: 1.2em; }
.downloads .button-prefix { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* The short caution under every group of download buttons. */
p.download-caution { color: var(--muted); font-size: 0.8rem; line-height: 1.45; max-width: 30rem; margin: 0 0 14px; }
.linux-downloads { list-style: none; padding: 0; margin: 24px 0 16px; display: grid; gap: 16px; }
.linux-downloads li { display: grid; grid-template-columns: 15rem 1fr; gap: 16px; align-items: center; }
.linux-downloads p { margin: 0; color: var(--muted); }
@media (max-width: 560px) { .linux-downloads li { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- Sections ---------- */
.section { max-width: 1160px; margin: 120px auto 0; padding: 0 24px; scroll-margin-top: 80px; }
/* A band runs the full width of the page with its own background; its content sits in .inner. */
.band { max-width: none; margin-top: 120px; padding: 96px 24px; background: var(--card); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.band > .inner { max-width: 1160px; margin: 0 auto; }
.band.dark {
  border: 0; color: var(--on-soil);
  background: radial-gradient(60% 80% at 0% 100%, rgba(232, 112, 26, 0.22) 0, transparent 60%), linear-gradient(180deg, var(--soil), var(--soil-deep));
}
.band.dark .section-title { color: #fff; }
.band.dark .section-lede, .band.dark .pricing-note { color: var(--soil-muted); }
.band.dark .eyebrow { color: #ffb677; }
.band.warm { border: 0; background: linear-gradient(180deg, var(--bg), var(--carrot-soft)); }
.band + .band { margin-top: 0; border-top: 0; }
.section-title { text-align: center; margin: 0 auto 14px; max-width: 18em; }
.section-lede { text-align: center; color: var(--muted); font-size: 1.15rem; max-width: 34em; margin: 0 auto 40px; text-wrap: pretty; }

/* ---------- Easier than you think ---------- */
.easier { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1040px; margin: 0 auto; }
.easier-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; counter-reset: easier; }
.easier-steps li { padding: 22px 24px 22px 90px; min-height: 92px; position: relative; }
/* The same big green numbers as the payday steps (.step::before). */
.easier-steps li::before {
  counter-increment: easier; content: counter(easier); position: absolute; left: 22px; top: 22px;
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--leaf); color: var(--on-accent);
  font-weight: 700; font-size: 1.35rem;
}
.easier-steps h3 { font-size: 1.2rem; margin: 0 0 4px; }
.easier-steps p { margin: 0; color: var(--muted); text-wrap: pretty; }
.easier-cost { padding: 22px 0 22px 40px; border-left: 1px solid var(--line); }
.easier-cost h3 { font-size: 1.35rem; margin: 0 0 12px; }
/* The alternatives, drawn as one till receipt with a torn bottom edge. */
/* The shadow sits on a wrapper, since the mask that tears the edge would clip it. */
.receipt-paper { margin: 0 0 8px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.08)); }
.receipt {
  --tear: 8px;
  background: var(--bg); padding: 18px 20px calc(16px + var(--tear));
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.88rem; font-variant-numeric: tabular-nums;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--tear)) 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--tear)) 100%;
}
/* A narrow receipt (small phones, and the two-column layout on tablets) tightens up so its lines don't wrap. */
.receipt-paper { container-type: inline-size; }
@container (max-width: 380px) { .receipt { padding-inline: 14px; font-size: 0.8rem; } }
@container (max-width: 300px) { .receipt { padding-inline: 12px; font-size: 0.72rem; } }
.receipt-head { margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--line); text-align: center; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.receipt-vendor { margin: 10px 0 2px; font-weight: 700; }
.receipt ul { list-style: none; padding: 0; margin: 0; }
.receipt li { display: flex; align-items: baseline; gap: 8px; padding: 2px 0 2px 12px; color: var(--muted); }
/* Dotted leaders from the item to its amount. */
.receipt li::after { content: ""; order: 1; flex: 1; border-bottom: 1px dotted var(--line); }
.receipt li b { order: 2; font-weight: 400; color: var(--ink); white-space: nowrap; }
.receipt-total { display: flex; justify-content: space-between; gap: 12px; margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--line); font-weight: 700; }
.receipt-times { margin: 2px 0 0; text-align: right; color: var(--muted); }
.receipt-year { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--ink); font-size: 1.05rem; }
/* Someone went over the yearly total in red pen. */
.circled { position: relative; }
.circled svg { position: absolute; overflow: visible; fill: none; stroke: var(--bad); stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.pen-circle { inset: -9px -12px -8px -14px; width: calc(100% + 26px); height: calc(100% + 17px); stroke-width: 2; transform: rotate(-2deg); }
.pen-circle path { vector-effect: non-scaling-stroke; }
.pen-bang { right: calc(100% + 18px); top: -11px; width: 28px; height: 38px; stroke-width: 3.5; transform: rotate(-16deg) scaleX(-1); }
/* Hangs from the circle's right side down to our price, measured from the line's right edge (the price floats inward
   now, so it can't be the anchor). It lives outside the receipt, whose mask would clip it, and bulges no more than
   12px past the column so it stays inside a phone's gutter. */
.cost-rows .cost-ours { position: relative; }
.pen-arrow {
  position: absolute; right: -10px; bottom: calc(100% - 18px); width: 52px; height: 66px; pointer-events: none;
  fill: none; stroke: var(--bad); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.pen-arrow-tall { display: none; height: 135px; }
/* Once receipt-demo.js has drawn the arrow itself (it ends at the price's top right corner wherever the price lands),
   the fixed ones above give way. */
.cost-rows.live-arrow .cost-ours .pen-arrow { display: none; }
.pen-arrow-live { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; fill: none; stroke: var(--bad); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* When our name and price can't share a line (about 337px: the two-column layout on tablets, and small phones), the
   price always gets its own line, and the taller arrow still reaches the circle. */
.cost-rows { container-type: inline-size; }
@container (max-width: 340px) {
  .cost-rows li.cost-ours { justify-content: space-between; }
  .cost-rows .cost-ours b { flex-basis: 100%; text-align: right; position: relative; }
  .cost-rows .cost-ours b .pen-arrow { right: -30px; bottom: calc(100% - 4px); }
  .pen-arrow-short { display: none; }
  .pen-arrow-tall { display: block; }
}
.pen-bang circle { fill: var(--bad); stroke: none; r: 2.2px; }
.cost-rows { list-style: none; padding: 0; margin: 0 0 14px; font-variant-numeric: tabular-nums; }
.cost-rows li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.cost-rows b { white-space: nowrap; }
.cost-rows .cost-ours { flex-wrap: wrap; justify-content: center; column-gap: 2em; row-gap: 4px; border-bottom: 0; padding-top: 14px; padding-inline: 20px; font-size: 1.15rem; color: var(--leaf); }
.cost-rows .cost-ours b { display: flex; flex-direction: column; align-items: flex-end; font-weight: 800; line-height: 1.1; }
.cost-rows .cost-amount { font-size: 3.4rem; line-height: 1; }
.cost-rows .cost-tax { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
/* Our name in the header logo's type, stacked beside a logo as tall as our price. */
.cost-rows .cost-brand { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: 700; font-size: 1.5rem; line-height: 1.05; color: var(--ink); }
.cost-rows .cost-brand .logo { width: 64px; height: 64px; }
/* Our name and price line up with the receipt's text, whose side padding narrows with the receipt (both are as wide). */
@container (max-width: 380px) { .cost-rows .cost-ours { padding-inline: 14px; } .pen-arrow { right: -16px; } }
@container (max-width: 300px) { .cost-rows .cost-ours { padding-inline: 12px; } }

/* ---------- Hero ---------- */
.hero {
  position: relative; max-width: 1160px; margin: 0 auto; padding: 56px 24px 24px;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center;
}
/* The hero's band: a warm tint with the glow, ending in a line, with the feature panel overlapping that edge. */
.hero-band {
  position: relative; overflow: hidden; padding-bottom: 96px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--carrot-soft) 55%, var(--bg)), var(--bg) 85%);
  border-bottom: 1px solid var(--line);
}
@supports not (background: color-mix(in srgb, red, blue)) { .hero-band { background: var(--carrot-soft); } }
.hero-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(55% 60% at 80% 15%, var(--carrot-glow) 0, transparent 70%),
    radial-gradient(40% 50% at 100% 85%, var(--leaf-glow) 0, transparent 70%);
}
.hero { position: relative; }
.hero h1 { max-width: 11em; }
.hero h1 em { font-style: normal; color: var(--carrot-dark); background: linear-gradient(transparent 68%, var(--carrot-soft) 68%); }
.lede { font-size: 1.3rem; line-height: 1.5; color: var(--muted); max-width: 26em; margin: 0 0 28px; text-wrap: pretty; }
.lede-price { font-weight: 800; color: var(--carrot-dark); }
.hero-note { color: var(--muted); margin: 0; max-width: 30rem; }
.hero-note .was { font-size: 0.9em; vertical-align: baseline; }
/* Under the headline, every line of text is the same size: the lede, the download caution and the note. */
.hero .lede, .hero p.download-caution, .hero-note { font-size: 1.1rem; line-height: 1.5; }

.hero-art { position: relative; display: flex; justify-content: center; padding: 28px 0 0; }
.hero-carrots {
  position: absolute; width: 150px; height: 150px; top: -40px; right: -26px; z-index: 2;
  transform: rotate(10deg); filter: drop-shadow(0 10px 14px var(--shadow-strong));
}

/* ---------- The app windows (the three examples) ---------- */
.window {
  width: 100%; max-width: 440px; border-radius: 18px; overflow: hidden;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 30px 60px -24px var(--shadow-strong), 0 2px 6px var(--shadow);
  transform: rotate(1.5deg);
  font-size: 0.92rem; font-variant-numeric: tabular-nums;
}
.window p { margin: 0; }
.window-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--bg); border-bottom: 1px solid var(--line-soft); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.window-title { margin-left: 10px; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.window-body { padding: 18px 20px 14px; }
.window-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 1.35rem; }
.tag {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 9px; border-radius: 99px;
  background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-line); font-family: var(--text);
}
.window-sub { color: var(--muted); font-size: 0.82rem; margin: 2px 0 12px !important; }
.sendlist, .formlist, .txnlist { list-style: none; margin: 0; padding: 0; }
.send-row { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.send-row:first-child { border-top: none; }
.send-mark {
  width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 2px solid var(--line); background: transparent;
  display: grid; place-items: center; color: var(--on-accent); cursor: pointer; font: inherit;
}
.send-mark:hover { border-color: var(--leaf); }
.send-mark:focus-visible { outline: 3px solid var(--carrot); outline-offset: 2px; }
.send-mark svg { width: 14px; height: 14px; visibility: hidden; }
.is-sent .send-mark svg { visibility: visible; }
.is-sent .send-mark { background: var(--leaf); border-color: var(--leaf); }
.send-mark:disabled { cursor: default; border-style: dashed; }
.send-mark:disabled:hover { border-color: var(--line); }
.send-who, .send-amount { display: flex; flex-direction: column; line-height: 1.3; }
.send-who span, .send-amount span { font-size: 0.78rem; color: var(--muted); }
.send-amount { text-align: right; }
.is-sent .send-who strong, .is-sent .send-amount strong { color: var(--muted); font-weight: 500; }
.is-sent .send-amount span { color: var(--leaf); font-weight: 600; }
.form-status { font-size: 0.8rem; color: var(--muted); text-align: right; white-space: nowrap; }
.is-sent .form-status { color: var(--leaf); font-weight: 600; }
.form-row.is-later { opacity: 0.5; }
.window-foot {
  display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px !important; padding-top: 12px; border-top: 2px solid var(--line);
  font-size: 0.9rem; color: var(--muted);
}
.window-foot strong { font-size: 1.15rem; color: var(--carrot-dark); }
.window-foot strong.is-done { color: var(--leaf); }
.window-note { text-align: center; font-size: 0.74rem; color: var(--muted); font-style: italic; padding: 8px; background: var(--bg); border-top: 1px solid var(--line-soft); }

.txn-row { display: grid; grid-template-columns: 3.4em 1fr auto; align-items: start; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.txn-row:first-child { border-top: none; }
.txn-date { color: var(--muted); font-size: 0.8rem; line-height: 1.5; white-space: nowrap; }
.txn-who { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; line-height: 1.3; min-width: 0; }
.txn-cat { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.txn-note { font-size: 0.76rem; color: var(--muted); }
.txn-amount { font-weight: 600; white-space: nowrap; }
.txn-amount.money-in { color: var(--leaf); }
/* A category in its colored tag, with the app's colors: blue for money out, green for money in, grey for a transfer,
   amber with no category yet. Each hue is mixed with the card and the ink, so the tags follow light and dark. */
.cat-tag {
  --tag: #3b7dd8;
  display: inline-block; padding: 2px 10px; border-radius: 99px; font: inherit; font-size: 0.78rem; font-weight: 600; line-height: 1.4; white-space: nowrap;
  background: color-mix(in srgb, var(--tag) 16%, var(--card)); color: color-mix(in srgb, var(--tag) 55%, var(--ink));
  border: 1px solid color-mix(in srgb, var(--tag) 32%, var(--card));
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.cat-in { --tag: #4a9a3c; }
.cat-none { --tag: #c98a12; }
.cat-xfer { background: var(--line-soft); color: var(--muted); border-color: var(--line); }
button.cat-tag { cursor: pointer; }
button.cat-tag:hover { filter: brightness(0.96); }
.tag-key { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }

/* ---------- What it does: four tiles ---------- */
.features-section { margin-top: -64px; position: relative; z-index: 1; }
.features {
  list-style: none; margin: 0; padding: 36px 36px 32px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 28px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 24px 48px -28px var(--shadow-strong), 0 1px 3px var(--shadow);
}
.feature .icon {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; margin-bottom: 16px;
  background: var(--carrot-soft); color: var(--carrot-dark);
}
.feature:nth-child(even) .icon { background: var(--leaf-soft); color: var(--leaf); }
.feature-icon { width: 24px; height: 24px; }
.feature h3 { font-size: 1.35rem; margin: 0 0 8px; }
.feature p { margin: 0; color: var(--muted); font-size: 1rem; text-wrap: pretty; }

/* ---------- Show-and-tell: a few lines beside an app window ---------- */
.show { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
.show-text h2 { max-width: 14em; }
.show-text p { max-width: 28em; font-size: 1.12rem; color: var(--muted); text-wrap: pretty; }
.show.show-top { align-items: start; }
.show.show-top .show-text { padding-top: 24px; }
.show-art { display: flex; justify-content: center; }
.show-art .window { max-width: 460px; transform: rotate(1.5deg); }
.show.flip .show-art { order: -1; }
.show.flip .show-art .window { transform: rotate(-1.5deg); }

/* ---------- Payday steps ---------- */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 56px auto 0; max-width: 1040px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.step { counter-increment: step; }
.step::before {
  content: counter(step); display: grid; place-items: center; margin-bottom: 14px;
  width: 48px; height: 48px; border-radius: 50%; background: var(--leaf); color: var(--on-accent); font-weight: 700; font-size: 1.35rem;
}
.step h3 { font-size: 1.35rem; margin: 0 0 6px; }
.step p { margin: 0; color: var(--muted); text-wrap: pretty; }
.steps.stacked { grid-template-columns: 1fr; gap: 18px; }
.steps.stacked .step { display: grid; grid-template-columns: 48px 1fr; column-gap: 18px; align-items: start; }
.steps.stacked .step::before { grid-row: span 2; margin: 0; }
.steps.stacked .step h3 { margin-top: 10px; }

/* ---------- Just you: four cards, one per way a small company pays its owner ---------- */
/* One carrot in a long empty row: the pun. The row is the section's width; the carrot stays its size on a phone. */
.solo-carrot { display: block; width: 100%; max-width: 1040px; height: 150px; margin: 0 auto 28px; }
.solo { list-style: none; padding: 0; margin: 0 auto; max-width: 1040px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.solo-card { padding: 28px 30px 26px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 3px var(--shadow); }
.solo-card h3 { font-size: 1.35rem; margin: 0 0 8px; }
.solo-card p { margin: 0; color: var(--muted); text-wrap: pretty; }

/* ---------- Pricing ---------- */
.pricing { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 920px; margin: 0 auto; scroll-margin-top: 80px; }
.plan {
  display: flex; flex-direction: column; align-items: flex-start; padding: 36px 36px 32px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 3px var(--shadow);
}
.plan.accent { background: linear-gradient(180deg, var(--carrot-soft), var(--card) 70%); border: 2px solid var(--carrot); box-shadow: 0 24px 48px -24px rgba(232, 112, 26, 0.6); }
.band.dark .plan { color: var(--ink); border-color: transparent; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7); }
.band.dark .plan.accent { border-color: var(--carrot); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.7), 0 0 0 6px rgba(232, 112, 26, 0.18); }
.plan-name { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.accent .plan-name { color: var(--carrot-dark); }
.big-price { display: flex; flex-direction: column; margin: 0 0 20px; }
.big-amount { font-size: clamp(3.2rem, 6vw, 4.6rem); line-height: 1; letter-spacing: -0.03em; }
.big-for { color: var(--muted); font-size: 1.05rem; margin-top: 8px; max-width: 18em; }
/* During a discount: the regular price, crossed out before the price charged. */
.was { font-size: 0.5em; font-weight: 500; color: var(--muted); margin-right: 4px; vertical-align: 0.3em; }
.plan .checks { margin: 0 0 24px; }
.plan .button.big { margin-top: auto; }
.plan .buttons.downloads { max-width: none; width: 100%; }
.plan p.download-caution { max-width: none; }
.plan .small { margin: 12px 0 0; }
.pricing-note { text-align: center; max-width: 40em; margin: 28px auto 0; font-size: 0.95rem; }

.checks, .crosses { padding: 0; list-style: none; margin: 0; }
.checks li, .crosses li { padding-left: 30px; position: relative; margin: 8px 0; line-height: 1.45; }
.checks li::before, .crosses li::before {
  position: absolute; left: 0; top: 0.15em; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; font-size: 0.75rem; font-weight: 800;
}
.checks li::before { content: "✓"; background: var(--leaf-soft); color: var(--leaf); }
.crosses li::before { content: "✕"; background: var(--bad-soft); color: var(--bad); }

/* ---------- Scope: does / doesn't ---------- */
.scope { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.scope-card { background: var(--card); border: 1px solid var(--line); border-top-width: 5px; border-radius: 0 0 var(--radius) var(--radius); padding: 24px 26px; box-shadow: 0 1px 3px var(--shadow); }
.scope-does { border-top-color: var(--leaf); }
.scope-doesnt { border-top-color: var(--bad); }
.scope-card h3 { font-size: 1.3rem; margin: 2px 0 14px; }
.scope .checks li, .scope .crosses li { font-size: 0.94rem; }

.caution {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--warn-soft); border-left: 5px solid var(--warn);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 24px 28px;
}
.caution h3 { font-size: 1.3rem; margin: 2px 0 8px; }
.caution p { margin: 0; }
.caution-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--warn); color: var(--warn-soft); font-weight: 800; font-size: 1.3rem; }
.caution-small { display: block; padding: 12px 16px; border-left-width: 4px; border-radius: 0 8px 8px 0; font-size: 0.88rem; margin: 16px 0 0; line-height: 1.5; }
.caution-small.full-size { font-size: inherit; margin: 0 0 16px; }

/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin: 0 auto; border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 4px; font-size: 1.2rem; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+"; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); font-family: var(--text); font-weight: 500; font-size: 1.3rem; color: var(--carrot-dark);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.qa summary:hover::after { background: var(--carrot-soft); }
.qa[open] summary::after { transform: rotate(45deg); background: var(--carrot-soft); }
.qa p { margin: 0 0 22px; padding: 0 44px 0 4px; color: var(--muted); max-width: 40em; }

/* ---------- Final call ---------- */
.cta { text-align: center; }
.cta .inner { display: flex; flex-direction: column; align-items: center; }
.cta-carrots { width: 110px; height: 110px; margin-bottom: 8px; filter: drop-shadow(0 8px 14px var(--shadow-strong)); transform: rotate(-8deg); }
.cta h2 { margin-bottom: 8px; }
.cta p { color: var(--muted); font-size: 1.15rem; margin: 0 0 24px; }
.cta .buttons.downloads { margin: 0 auto 12px; }
.cta p.download-caution { margin: 0 auto; font-size: 0.8rem; }

/* ---------- Footer ---------- */
.bottom { margin-top: 64px; color: var(--muted); font-size: 0.9rem; padding: 36px 24px 32px; border-top: 1px solid var(--line); background: var(--card); }
.is-home .bottom { margin-top: 0; }
.bottom-inner { max-width: 1160px; margin: 0 auto; }
.bottom-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 20px; }
.bottom a { color: var(--muted); text-decoration: none; }
.bottom a:hover { color: var(--ink); text-decoration: underline; }
.bottom .fine { max-width: 60em; margin: 0 0 8px; font-size: 0.82rem; }

/* ---------- Inner pages ---------- */
.narrow { max-width: 680px; margin: 48px auto 0; padding: 0 24px; }
.narrow.wide { max-width: 860px; }
.narrow h1 { margin-bottom: 12px; }
.lede-small { font-size: 1.15rem; color: var(--muted); margin: 0 0 24px; text-wrap: pretty; }
.prose h2 { font-size: 1.5rem; margin: 40px 0 10px; }
.prose p, .prose li { line-height: 1.6; }
.prose li { margin: 6px 0; }
/* The terms' warranty disclaimer and liability limits ("prominent" in terms.json): boxed and bold, so they stand out. */
.terms .prominent { border: 2px solid var(--ink); border-radius: 10px; padding: 4px 20px; margin: 32px 0; }
.terms .prominent h2 { margin-top: 18px; letter-spacing: 0.02em; }
.terms .prominent p { font-weight: 700; }
.narrow .steps { margin: 8px 0 28px; }
.narrow .steps.stacked .step h3 { font-size: 1.2rem; }
.narrow .steps.stacked .step p { font-size: 1rem; }


/* ---------- Buy ---------- */
.buy { max-width: 1160px; margin: 48px auto 0; padding: 0 24px; }
.buy-intro { max-width: 46em; }
.buy-grid { display: grid; grid-template-columns: 1.2fr 0.9fr; gap: 24px; align-items: start; margin-top: 8px; }
.buy-card { position: sticky; top: 84px; padding: 28px 28px 24px; align-items: stretch; }
.buy-card .big-amount { font-size: clamp(3rem, 5vw, 3.8rem); }
.buy-card form { margin: 4px 0 12px; }
.buy-card .small { margin: 0 0 10px; }
.buy .scope { grid-template-columns: 1fr; }

form.form-card {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 24px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 3px var(--shadow);
}
label { font-weight: 600; }
input[type="email"] { width: 100%; font: inherit; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.newsletter-card { display: flex; align-items: center; justify-content: space-between; gap: 40px; max-width: 1040px; margin: 0 auto; padding: 40px 48px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 3px var(--shadow); }
.newsletter-text { flex: 1 1 24rem; }
.newsletter-text .section-title, .newsletter-text .section-lede { text-align: left; margin-left: 0; margin-right: 0; }
.newsletter-text .section-lede { margin-bottom: 0; }
.newsletter-form { display: flex; gap: 10px; max-width: 30rem; margin: 24px 0 0; }
.newsletter-form input { flex: 1; min-width: 0; }
.optin { margin: 32px 0; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 3px var(--shadow); }
.optin h2 { margin: 0 0 6px; font-size: 1.3rem; }
.optin p { margin: 0; color: var(--muted); }
.optin .newsletter-form { margin-top: 16px; max-width: none; }
.newsletter-status { margin: 12px 0 0; padding: 12px 16px; border-radius: 10px; max-width: 34rem; }
.newsletter-status.is-ok { background: var(--leaf-soft); }
.newsletter-status.is-error { background: var(--bad-soft); color: var(--bad); }
.postmark { flex: 0 0 auto; width: 330px; max-width: 100%; height: auto; }
.stamp-paper { fill: #fff; stroke: var(--line); filter: drop-shadow(0 3px 5px var(--shadow-strong)); }
.stamp-holes circle { fill: var(--card); }
.stamp-frame { fill: var(--carrot-soft); stroke: var(--carrot); stroke-width: 1.5; }
.stamp-value { font: 700 17px var(--display); fill: var(--carrot-dark); letter-spacing: 0.1em; }
.stamp-small { font: 600 7px var(--text); fill: var(--carrot-dark); letter-spacing: 0.18em; }
.stamp-ink { fill: none; stroke: var(--bad); stroke-width: 2; opacity: 0.75; }
.stamp-ink text { stroke: none; fill: var(--bad); }
.postmark-ring-text { font: 700 8.6px var(--text); letter-spacing: 0.08em; }
.postmark-mid { font: 700 11px var(--text); letter-spacing: 0.14em; }
.postmark-waves { stroke-linecap: round; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.alert { background: var(--bad-soft); color: var(--bad); padding: 12px 16px; border-radius: 10px; }
.notice { background: var(--leaf-soft); padding: 14px 16px; border-radius: 10px; }

/* ---------- Responsive ---------- */
@media (max-width: 800px) { .newsletter-card { flex-direction: column-reverse; padding: 28px 20px; gap: 16px; } .newsletter-text .section-title, .newsletter-text .section-lede { text-align: center; } }
@media (max-width: 480px) { .newsletter-form { flex-direction: column; } .newsletter-form input { flex: none; } .postmark { width: 260px; } }
@media (max-width: 1000px) {
  .features { grid-template-columns: 1fr 1fr; }
  .show { grid-template-columns: 1fr; gap: 36px; }
  .show.flip .show-art { order: 0; }
  .buy-grid { grid-template-columns: 1fr; }
  .buy-card { position: static; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 24px; padding-top: 40px; }
  .hero h1 { max-width: none; }
  .hero-art { max-width: 460px; margin: 20px auto 0; padding-top: 32px; }
  .hero-carrots { width: 120px; height: 120px; top: -14px; right: -10px; }
  .steps { grid-template-columns: 1fr; gap: 32px; margin-top: 40px; }
  .section { margin-top: 88px; }
  .band { margin-top: 88px; padding: 72px 24px; }
  .hero-band { padding-bottom: 80px; }
  .features-section { margin-top: -48px; }
  .pricing, .scope { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .top-nav { display: none; }
  .top-inner { gap: 12px; padding: 10px 16px; }
  .brand span { font-size: 1.15rem; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .section, .hero, .narrow, .buy, .top-inner, .bottom { padding-left: 16px; padding-right: 16px; }
  .band { padding: 56px 16px; }
  .features { padding: 24px 20px; }
  .hero { padding-top: 28px; }
  .lede, .hero .lede, .hero p.download-caution, .hero-note { font-size: 1.05rem; }
  .hero-art { padding-top: 36px; margin-top: 4px; }
  .hero-carrots { width: 100px; height: 100px; top: -4px; right: -6px; }
  .window, .show-art .window, .show.flip .show-art .window { transform: none; font-size: 0.88rem; }
  .features { grid-template-columns: 1fr; gap: 28px; }
  .plan, .scope-card, .solo-card { padding: 22px 20px; }
  .solo { grid-template-columns: 1fr; }
  .easier { grid-template-columns: 1fr; }
  .easier-steps li { padding: 18px 0 18px 66px; }
  .easier-steps li::before { left: 0; top: 18px; }
  .easier-cost { padding: 28px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .caution { flex-direction: column; gap: 12px; padding: 20px; }
  .buttons.downloads { grid-template-columns: 1fr; max-width: none; }
  .downloads .button-prefix { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .qa summary { font-size: 1.05rem; }
  .qa p { padding-right: 4px; }
  .top-free { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .brand .logo, .qa summary::after, .cat-tag { transition: none; }
  .button:hover { transform: none; }
}