/* Followly bookkeeping site. Design plan, and the build follows it.
 1. Treatment: warm professional. Approachable enough to feel like a firm you would ring, exact
    enough that every number on the page is checkable. Colour and shape do the warming; the
    figures stay in a tabular mono so nothing about the price is fuzzy.
 2. Palette, one light theme, painted explicitly: Ink #12233B text, Paper #F6F7F4 ground,
    Cream #FBF7EE second warm ground, Reconciled #1E7A55 accent, Deep #124A36 for the hero band,
    Reconciled tint #E8F3EC, Mist #DCE3DD hairlines, Slate #5B6B7A secondary text.
 3. Rhythm comes from alternating band backgrounds, not from rules. Two hairlines survive, under
    the header and above the footer, where a Paper band meets a Paper band.
 4. Type roles: Plus Jakarta Sans 700 for headings and the wordmark, Source Sans 3 for running
    text and for every label and eyebrow, IBM Plex Mono with tabular numerals for price figures
    and tier limits only. Nothing else is set in mono.
 5. Scale is fixed at 14 16 18 22 28 36 48. Running text stops at 65ch so it stays readable.
 6. Shape: 14px cards with a soft shadow, 10px buttons, a 16px calculator that is the one lifted
    object on the page. White is reserved for the calculator and the small mocks.
 7. Content still carries the subject: real units on the slider, the pack shown as its contents,
    a sample weekly note, six line icons drawn to match the work they label.
 8. Logo: a rounded square in Reconciled green holding a tick whose right tail runs out into a
    ledger line. The mark is the reconciliation, drawn once.
 9. Mobile first. One column throughout, a sticky primary CTA on phones, and the landing page
    calculator above the fold at 390px wide. The site carries no photographs: the work is shown
    in words, in the mocks and in the line icons.
10. Accessibility: every text and surface pair checked at 4.5:1 or better, visible focus ring,
    motion respected, decorative SVG hidden from the accessibility tree, nothing carried by
    colour alone.
*/

:root {
  --ink: #12233B;
  --paper: #F6F7F4;
  --cream: #FBF7EE;
  --reconciled: #1E7A55;
  --deep: #124A36;
  --tint: #E8F3EC;
  --mist: #DCE3DD;
  --slate: #5B6B7A;
  --card: #FFFFFF;

  /* Text on the Deep band. 9.4:1 and 6.6:1 against #124A36. */
  --on-deep: #F6F7F4;
  --on-deep-dim: #C5D8CE;

  --display: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --s1: 0.5rem;
  --s2: 0.875rem;
  --s3: 1.25rem;
  --s4: 2rem;
  --s5: 3rem;
  --s6: 4.5rem;

  --r-sm: 8px;
  --r-btn: 10px;
  --r-card: 14px;
  --r-calc: 16px;

  --shadow-card: 0 1px 2px rgba(18, 35, 59, 0.04), 0 6px 18px rgba(18, 35, 59, 0.06);
  --shadow-lift: 0 2px 4px rgba(18, 35, 59, 0.05), 0 14px 34px rgba(18, 35, 59, 0.10);

  --wrap: 1120px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.55;
  font-synthesis-weight: none;
}

img, svg { max-width: 100%; }

[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.125rem; }

p { margin: 0; max-width: 65ch; }

a { color: var(--reconciled); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--reconciled);
  outline-offset: 3px;
  border-radius: 2px;
}

.band-deep a:focus-visible,
.band-deep button:focus-visible { outline-color: var(--on-deep); }

/* Layout ------------------------------------------------------------------ */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s3);
}

.band { padding-block: var(--s5); }

.band-paper { background: var(--paper); }
.band-cream { background: var(--cream); }
.band-tint { background: var(--tint); }

.band-deep {
  background: var(--deep);
  color: var(--on-deep);
}

.band-deep h1,
.band-deep h2,
.band-deep h3 { color: var(--on-deep); }

.band-deep .lede,
.band-deep .small,
.band-deep p { color: var(--on-deep-dim); }

.band-deep .eyebrow { color: var(--on-deep-dim); }

/*
 * Bands are separated by their background, never by a rule. The only hairlines on the site are
 * under the header and above the footer, where a Paper band meets a Paper band and the colour
 * change cannot do the work. Both are declared on those two elements.
 */

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  align-items: flex-start;
}

.stack-tight { gap: var(--s1); }
.stack-wide { gap: var(--s4); }

.eyebrow {
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0;
}

.lede {
  font-size: 1.125rem;
  color: var(--slate);
}

.small { font-size: 0.875rem; color: var(--slate); }

/* Figures a reader compares stay tabular, in the body face unless they are a price. */
.num { font-variant-numeric: tabular-nums; }

.figures {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* Header ------------------------------------------------------------------ */

.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--mist);
  padding-block: var(--s2);
}

.header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--ink);
}

.brand-word {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: 0.9375rem;
}

.site-nav a {
  color: var(--slate);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}

.site-nav a:hover { color: var(--ink); border-bottom-color: var(--mist); }

.site-nav .btn { padding: 0.5rem 0.9375rem; font-size: 0.9375rem; }
.site-nav .btn:hover { border-bottom-color: transparent; }

/* The header button is a desktop affordance. On phones the sticky bar carries it. */
.header-cta { display: none; }

@media (min-width: 900px) {
  .header-cta { display: inline-flex; }
}

/* Buttons ----------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.8125rem 1.375rem;
  border-radius: var(--r-btn);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.btn-primary {
  background: var(--reconciled);
  color: #FFFFFF;
  border-color: var(--reconciled);
}

.btn-primary:hover { background: #176244; border-color: #176244; }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.btn-secondary:hover { background: var(--tint); border-color: var(--reconciled); }

/* Inside the Deep hero the primary button inverts, so it still reads as the one thing to press. */
.band-deep .btn-primary {
  background: var(--on-deep);
  color: var(--deep);
  border-color: var(--on-deep);
}

.band-deep .btn-primary:hover { background: #FFFFFF; border-color: #FFFFFF; }

.band-deep .btn-secondary {
  color: var(--on-deep);
  border-color: rgba(246, 247, 244, 0.55);
  background: transparent;
}

.band-deep .btn-secondary:hover {
  background: rgba(246, 247, 244, 0.12);
  border-color: var(--on-deep);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
}

/* Hero -------------------------------------------------------------------- */

/*
 * A single-column text band. The copy is held to the same measure the body
 * paragraphs use, so the headline does not run the full width of the wrap.
 */
.hero .stack { max-width: 65ch; }

/* Proof strip ------------------------------------------------------------- */

.proof { padding-block: var(--s3); }

.proof-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--ink);
}

/* Columns ----------------------------------------------------------------- */

.cols {
  display: grid;
  gap: var(--s3);
  grid-template-columns: 1fr;
  width: 100%;
}

@media (min-width: 720px) {
  .cols { gap: var(--s4); }
  .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.col {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.col p { max-width: 42ch; }

/* A card is the default shape for anything grouped. */
.card {
  background: var(--card);
  border: 1px solid var(--mist);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: var(--s3);
}

@media (min-width: 720px) { .card { padding: var(--s4) var(--s3); } }

.card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--tint);
  color: var(--reconciled);
  margin-bottom: var(--s1);
}

/* Icons ------------------------------------------------------------------- */

.icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Calculator -------------------------------------------------------------- */

.calc {
  background: var(--card);
  border: 1px solid var(--mist);
  border-radius: var(--r-calc);
  box-shadow: var(--shadow-lift);
  padding: var(--s3);
  width: 100%;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

@media (min-width: 720px) {
  .calc { padding: var(--s4); }
}

.calc-field {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.calc-field label {
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}

.calc-input-row {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.calc-number {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.375rem;
  width: 7ch;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--slate);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
}

.calc-unit { font-size: 0.875rem; color: var(--slate); }

.calc-range {
  width: 100%;
  accent-color: var(--reconciled);
  height: 1.75rem;
}

.calc-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  color: var(--slate);
}

.calc-out {
  background: var(--tint);
  border-radius: var(--r-card);
  padding: var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.calc-tier {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--reconciled);
}

.calc-price {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
}

.calc-price-sub {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
  color: var(--slate);
}

.calc-upfront { font-size: 0.875rem; color: var(--ink); max-width: 46ch; }

/*
 * The Australian Consumer Law qualifier sits inside the upfront paragraph, not after it. A
 * paragraph is the unit check-copy.mjs tests for the qualifier, and the slot beside it has to stay
 * byte-identical to calcDisplay().upfront for check-prices.mjs. display:block gives it its own
 * line, so it reads as a standing note and not as the tail of the offer sentence.
 */
.calc-acl { display: block; margin-top: 0.35rem; color: var(--slate); }

.calc-note { font-size: 0.875rem; color: var(--slate); max-width: 52ch; }

/* Tiers ------------------------------------------------------------------- */

.tiers {
  display: grid;
  gap: var(--s3);
  grid-template-columns: 1fr;
  width: 100%;
}

@media (min-width: 640px) { .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tiers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.tier {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  background: var(--card);
  border: 1px solid var(--mist);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: var(--s3);
}

.tier-featured {
  border-color: var(--reconciled);
  box-shadow: var(--shadow-lift);
}

.tier-name {
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 700;
}

.tier-limit {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  color: var(--slate);
}

.tier-price {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.75rem;
  font-weight: 600;
  margin-top: var(--s1);
}

.tier-ex {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  color: var(--slate);
}

.tier-flag {
  align-self: flex-start;
  font-family: var(--body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--reconciled);
  background: var(--tint);
  border-radius: 999px;
  padding: 0.2rem 0.625rem;
}

.tier .btn { margin-top: auto; padding-top: 0.6875rem; padding-bottom: 0.6875rem; }

/* Lists ------------------------------------------------------------------- */

.icon-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  max-width: 62ch;
  width: 100%;
}

.icon-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.icon-list .icon { color: var(--reconciled); margin-top: 0.15rem; }

.icon-list-close {
  font-size: 0.9375rem;
  color: var(--slate);
  padding-left: calc(24px + 0.75rem);
  max-width: 62ch;
}

.dashes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  max-width: 62ch;
}

.dashes li {
  position: relative;
  padding-left: 1.75rem;
}

.dashes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75rem;
  width: 1rem;
  height: 0;
  border-top: 2px solid var(--slate);
}

.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  max-width: 66ch;
}

.ticks li {
  position: relative;
  padding-left: 1.75rem;
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.3rem;
  width: 0.45rem;
  height: 0.85rem;
  border-right: 2px solid var(--reconciled);
  border-bottom: 2px solid var(--reconciled);
  transform: rotate(45deg);
}

/* Cadence ----------------------------------------------------------------- */

.rhythm {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
  width: 100%;
}

@media (min-width: 720px) { .rhythm { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.rhythm .card {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.rhythm h3 { font-size: 1.0625rem; }
.rhythm p { font-size: 0.9375rem; color: var(--slate); }

/* Mock pack and weekly note ----------------------------------------------- */

.mock {
  border: 1px solid var(--mist);
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--shadow-card);
  padding: var(--s3);
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  font-size: 0.875rem;
}

.mock-head {
  font-family: var(--body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  border-bottom: 1px solid var(--mist);
  padding-bottom: var(--s1);
}

.mock-row {
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
}

.mock-row span:last-child { color: var(--slate); }

.mock ol {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* Steps ------------------------------------------------------------------- */

.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s3);
  grid-template-columns: 1fr;
  width: 100%;
}

@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.steps li {
  counter-increment: step;
  background: var(--card);
  border: 1px solid var(--mist);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  color: var(--reconciled);
}

.steps p { font-size: 0.9375rem; color: var(--slate); max-width: 40ch; }

/* Offer ------------------------------------------------------------------- */

.offer {
  background: var(--card);
  border: 1px solid var(--mist);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: var(--s4) var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  width: 100%;
}

@media (min-width: 720px) { .offer { padding: var(--s4); } }

.offer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s2);
  width: 100%;
}

@media (min-width: 640px) { .offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .offer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.offer-item {
  background: var(--tint);
  border-radius: var(--r-sm);
  padding: var(--s2);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.offer-item strong {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.25rem;
}

/* Table ------------------------------------------------------------------- */

.table-scroll {
  width: 100%;
  overflow-x: auto;
  background: var(--card);
  border: 1px solid var(--mist);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: var(--s3);
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px;
  font-size: 0.9375rem;
}

th, td {
  text-align: left;
  padding: var(--s2) var(--s2) var(--s2) 0;
  border-bottom: 1px solid var(--mist);
  vertical-align: top;
}

th {
  font-family: var(--body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}

td.n {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

table caption {
  text-align: left;
  padding-bottom: var(--s2);
  color: var(--slate);
  font-size: 0.875rem;
}

/* FAQ --------------------------------------------------------------------- */

.faq {
  width: 100%;
  max-width: 78ch;
  background: var(--card);
  border: 1px solid var(--mist);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 0 var(--s3);
}

.faq details { border-bottom: 1px solid var(--mist); }
.faq details:last-child { border-bottom: 0; }

.faq summary {
  cursor: pointer;
  padding: var(--s2) 2rem var(--s2) 0;
  font-weight: 600;
  font-size: 1.0625rem;
  position: relative;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  position: absolute;
  right: 0.5rem;
  top: 1.35rem;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--reconciled);
  border-bottom: 2px solid var(--reconciled);
  transform: rotate(45deg);
  transition: transform 120ms ease;
}

.faq details[open] summary::after { transform: rotate(225deg); top: 1.55rem; }

.faq details p {
  padding: 0 0 var(--s3);
  color: var(--slate);
}

.faq details p + p { padding-top: 0; }

/* Footer ------------------------------------------------------------------ */

.site-footer {
  background: var(--paper);
  border-top: 1px solid var(--mist);
  padding-block: var(--s4);
  font-size: 0.875rem;
  color: var(--slate);
}

.footer-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3) var(--s4);
  align-items: start;
}

@media (min-width: 720px) {
  .footer-row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.site-footer a { color: var(--slate); }
.site-footer a:hover { color: var(--ink); }

.footer-credit { font-size: 0.8125rem; }

/* Sticky mobile CTA -------------------------------------------------------- */

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--paper);
  border-top: 1px solid var(--mist);
  padding: 0.625rem var(--s3);
  z-index: 20;
  display: none;
}

.sticky-cta .btn { width: 100%; }

@media (max-width: 719px) {
  .sticky-cta { display: block; }
  body.has-sticky { padding-bottom: 4.75rem; }
}

/* Landing page ------------------------------------------------------------ */

.lp-header {
  background: var(--paper);
  border-bottom: 1px solid var(--mist);
  padding-block: var(--s2);
}

.lp-hero { padding-block: var(--s3); }
.lp-hero h1 { font-size: 1.75rem; }
.lp-band { padding-block: var(--s4); }
.lp-calc { padding-block: var(--s3) var(--s4); }

@media (min-width: 720px) {
  .lp-hero { padding-block: var(--s4); }
  .lp-hero h1 { font-size: 2.25rem; }
}

/* Legal pages ------------------------------------------------------------- */

.prose {
  max-width: 68ch;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.prose h2 { font-size: 1.375rem; margin-top: var(--s3); }

.prose ul {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  max-width: 65ch;
}

/* Type scale at wider viewports ------------------------------------------- */

@media (min-width: 720px) {
  h1 { font-size: 3rem; }
  h2 { font-size: 2.25rem; }
  .lede { font-size: 1.375rem; }
  .calc-price { font-size: 3rem; }
  .band { padding-block: var(--s6); }
  .proof { padding-block: var(--s3); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}