* { box-sizing: border-box; } body { margin: 0; background: #f4f1eb; color: #202321; font: 16px/1.55 system-ui, sans-serif; } main { max-width: 860px; margin: auto; padding: 28px 18px 60px; } header { padding: 38px 0 22px; } h1 { max-width: 680px; font: 700 clamp(2.5rem, 7vw, 5.5rem)/.95 Georgia, serif; margin: 8px 0 20px; letter-spacing: -.05em; } h2 { font: 700 1.7rem Georgia, serif; } h3 { margin-bottom: 0; } .eyebrow { color: #a4472b; font-weight: 800; letter-spacing: .12em; font-size: .75rem; } .intro { max-width: 650px; font-size: 1.15rem; } .card { background: #fffdf8; border: 1px solid #ddd7ca; border-radius: 14px; padding: 24px; margin: 18px 0; box-shadow: 0 8px 24px #463b2b0d; } form { display: grid; gap: 14px; } label { display: grid; gap: 5px; font-weight: 700; } input, select, textarea { border: 1px solid #bdb6aa; border-radius: 7px; padding: 11px; font: inherit; background: #fff; } small, .note { color: #655f55; font-weight: 400; } fieldset { border: 1px solid #d5cfc3; border-radius: 8px; display: grid; gap: 12px; padding: 14px; } button { background: #a4472b; border: 0; border-radius: 7px; color: white; cursor: pointer; font-weight: 800; padding: 13px 18px; width: fit-content; } button:hover { background: #81351f; } .results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .results div { background: #f4f1eb; padding: 15px; border-radius: 8px; } dt { color: #655f55; font-size: .9rem; } dd { font: 700 1.6rem Georgia, serif; margin: 5px 0 0; } textarea { width: 100%; margin-bottom: 12px; } .error { color: #9c231c; font-weight: 700; } footer { color: #655f55; font-size: .88rem; margin-top: 28px; } .privacy { display: flex; align-items: center; font-weight: 400; } .privacy input { width: auto; } @media (max-width: 600px) { .results { grid-template-columns: 1fr; } .card { padding: 18px; } }
/* Docs pages (e.g. what-percentage-deposit-should-i-charge.html) add a worked
   table. `.table-wrap` gives it its own horizontal scroll on a narrow phone
   screen instead of pushing the whole page sideways. */
.table-wrap { overflow-x: auto; }
.usage-table { width: 100%; border-collapse: collapse; font: 13px/1.4 system-ui, sans-serif; margin: 8px 0 0; }
.usage-table caption { caption-side: bottom; color: #655f55; font-size: 12px; text-align: left; padding-top: 8px; }
.usage-table th, .usage-table td { border-bottom: 1px solid #ddd7ca; padding: 8px 6px; text-align: right; vertical-align: top; }
.usage-table th:first-child, .usage-table td:first-child { text-align: left; }
.shell { max-width: 860px; margin: auto; padding: 28px 18px 60px; }

/* The net-revenue figure in the "Does the deposit pay for itself?" panel. The
   sign is the whole answer, so it gets a colour as well as the +/- the script
   writes -- and the contrast is checked against the #f4f1eb result tile these
   sit on, not against the #fffdf8 card, which is what surrounds the tile. */
dd[data-direction="gain"] { color: #1f5b38; }
dd[data-direction="loss"] { color: #9c231c; }