/* Stubtally (laborforceone.com) v1.1 "ledger" design system: white paper, bank-note green ink, a highlighter for the
   line that matters. Serif headlines in sentence case (Roboto Serif), Inclusive Sans for reading, Courier Prime for
   figures. References: Wise (the fee broken down line by line, in the open), Gusto (calm serif headlines for payroll),
   TurboTax (one step at a time with a running total). Own front end, not derived from any sister site. */
@font-face { font-family: "Roboto Serif"; src: url("/assets/fonts/roboto-serif-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Serif"; src: url("/assets/fonts/roboto-serif-latin-wght-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Inclusive Sans"; src: url("/assets/fonts/inclusive-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("/assets/fonts/courier-prime-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("/assets/fonts/courier-prime-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --bg: #ffffff;
  --tint: #f1f6f2;
  --tint-2: #e2ece5;
  --line: #cfdcd3;
  --line-2: #a9bdb0;
  --ink: #0d2620;
  --ink-2: #3a4f47;
  --ink-3: #5c6e67;
  --go: #0b5d44;
  --go-hi: #10805d;
  --go-dk: #073f2e;
  --mark: #f6ee7a;
  --mark-2: #fbf6c4;
  --ok: #0b5d44;
  --ok-bg: #e2f1e8;
  --bad: #b42318;
  --bad-bg: #fdecea;
  --warn: #7a5200;
  --warn-bg: #fff6d6;
  --night: #0a2019;
  --serif: "Roboto Serif", Georgia, "Times New Roman", serif;
  --body: "Inclusive Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Courier Prime", "Courier New", monospace;
  --r: 3px;
  --r-lg: 14px;
  --lift: 0 1px 2px rgba(13, 38, 32, .06), 0 18px 40px -24px rgba(13, 38, 32, .35);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.62 var(--body); }
img, svg { max-width: 100%; }
a { color: var(--go); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--go-dk); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--go-hi); outline-offset: 2px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 50; }
.skip:focus { left: 1rem; }
.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
mark, .hl { background: linear-gradient(transparent 12%, var(--mark) 12%, var(--mark) 88%, transparent 88%); color: inherit; padding: 0 .12em; }

/* type: serif, sentence case */
.display { font: 650 clamp(2.5rem, 6.4vw, 4.4rem)/1.04 var(--serif); letter-spacing: -.028em; margin: 1rem auto 1.2rem; max-width: 16ch; }
.display em { font-style: italic; font-weight: 500; color: var(--go); }
.h1 { font: 650 clamp(2rem, 4.6vw, 3rem)/1.08 var(--serif); letter-spacing: -.022em; margin: .35rem 0 .8rem; }
.h2 { font: 650 clamp(1.65rem, 3.4vw, 2.35rem)/1.12 var(--serif); letter-spacing: -.018em; margin: .3rem 0 1.1rem; max-width: 24ch; }
.h2 em, .h1 em { font-style: italic; font-weight: 500; }
.h3 { font: 650 1.3rem/1.25 var(--serif); letter-spacing: -.01em; margin: 2.2rem 0 .9rem; }
.eyebrow { display: inline-flex; align-items: center; gap: .55rem; font: 400 .92rem/1.3 var(--mono); color: var(--go); margin: 0; }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; flex: none; }
.eyebrow--lt { color: #9fe0c3; }
.lede { font-size: 1.2rem; color: var(--ink-2); max-width: 38rem; margin: 0 0 1.4rem; }
.lede--sm { font-size: 1.08rem; }
.hint { display: block; font-size: .86rem; color: var(--ink-3); margin-top: .25rem; font-weight: 400; }
.note { font-size: .95rem; color: var(--ink-2); max-width: 46rem; }
.fine { font-size: .85rem; color: var(--ink-3); max-width: 46rem; }
.cite { font: 400 .84rem/1.3 var(--mono); color: var(--ink-3); white-space: nowrap; }
.link { font-weight: 600; }
.more { font-weight: 700; text-decoration: none; color: var(--go); border-bottom: 2px solid var(--mark); padding-bottom: 1px; }
.more:hover { border-bottom-color: var(--go); color: var(--go-dk); }

/* buttons: square-shouldered, green ink */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .65rem 1.3rem; border-radius: var(--r);
  font: 700 1rem/1.15 var(--body); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; }
.btn--go { background: var(--go); color: #fff; border-color: var(--go); }
.btn--go::after { content: "\2192"; font-weight: 400; }
.btn--go:hover { background: var(--go-dk); border-color: var(--go-dk); color: #fff; text-decoration: none; }
.btn--line { background: var(--tint); color: var(--go-dk); border-color: var(--line); }
.btn--line:hover { background: var(--tint-2); border-color: var(--line-2); color: var(--go-dk); text-decoration: none; }
.btn--ghost { background: transparent; color: var(--bad); border-color: transparent; text-decoration: underline; text-underline-offset: .2em; }
.btn--ghost:hover { background: var(--bad-bg); color: var(--bad); }
.btn--lg { min-height: 56px; padding: .85rem 1.6rem; font-size: 1.08rem; }
.btn--sm { min-height: 36px; padding: .35rem .8rem; font-size: .9rem; }
.btn--sm.btn--go::after { content: none; }
.btn--block { width: 100%; }

/* header: white bar, quiet text links, one green action */
.top { background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--line); position: relative; z-index: 10; }
.top__in { display: flex; align-items: center; gap: 1.4rem; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; margin-right: auto; }
.brand:hover { color: var(--ink); }
.brand__card { width: 30px; height: 30px; flex: none; }
.brand__word { font: 680 1.5rem/1 var(--serif); letter-spacing: -.02em; }
.brand__word i { font-style: italic; font-weight: 500; color: var(--go); }
.tabs { display: none; gap: .3rem; }
.tabs a { padding: .5rem .8rem; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .98rem; border-radius: var(--r); }
.tabs a:hover { color: var(--ink); background: var(--tint); }
.tabs a[aria-current="page"] { color: var(--go-dk); box-shadow: inset 0 -2px 0 var(--go); border-radius: 0; }
.top__go { display: none; }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; font-weight: 700; padding: .55rem .95rem; border: 1.5px solid var(--line-2); border-radius: var(--r); color: var(--go-dk); }
.menu summary::-webkit-details-marker { display: none; }
.menu__nav { position: absolute; right: 0; top: calc(100% + 10px); background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--lift);
  display: flex; flex-direction: column; min-width: 240px; padding: .4rem; }
.menu__nav a { padding: .7rem .9rem; color: var(--ink); text-decoration: none; font-weight: 600; border-radius: 6px; }
.menu__nav a:hover, .menu__nav a[aria-current="page"] { background: var(--tint); }
@media (min-width: 920px) {
  .tabs { display: flex; }
  .top__go { display: inline-flex; }
  .menu { display: none; }
}

/* phones: a slim bottom action bar */
.bar { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -18px rgba(13, 38, 32, .5); z-index: 20; }
body.has-bar { padding-bottom: 78px; }
@media (min-width: 920px) { .bar { display: none; } body.has-bar { padding-bottom: 0; } }

/* home: centred hero */
.hero { padding: 3.2rem 0 2.6rem; text-align: center; }
.hero .lede { margin-left: auto; margin-right: auto; }
.hero__tag { display: inline-flex; align-items: center; gap: .5rem; font: 400 .9rem/1.2 var(--mono); color: var(--go-dk); background: var(--tint); border: 1px solid var(--line);
  border-radius: 999px; padding: .4rem .9rem; margin: 0; }
.hero__tag b { width: 8px; height: 8px; border-radius: 50%; background: var(--go-hi); }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.6rem; margin: 0 0 1rem; }
.hero__note { font-size: .92rem; color: var(--ink-3); max-width: 34rem; margin: 0 auto; }
@media (min-width: 980px) { .hero { padding: 5rem 0 3.2rem; } }

/* home: the exhibit, a week lined up against its stub */
.exhibit { background: linear-gradient(var(--bg) 0 64px, var(--tint) 64px); padding: 0 0 4rem; }
.exhibit__doc { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--lift); overflow: hidden; }
.exhibit__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1.2rem; padding: 1rem 1.4rem; border-bottom: 1px solid var(--line); }
.exhibit__title { font: 650 1.05rem/1.3 var(--serif); margin: 0; }
.exhibit__meta { font: 400 .9rem/1.3 var(--mono); color: var(--ink-3); margin: 0; }
.exhibit__body { display: grid; }
.exhibit__days { padding: 1.2rem 1.4rem; border-bottom: 1px solid var(--line); }
.exhibit__k { font: 400 .86rem/1.2 var(--mono); color: var(--ink-3); margin: 0 0 .7rem; }
.daystrip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.daystrip li { border: 1px solid var(--line); border-radius: 8px; padding: .5rem .2rem .45rem; text-align: center; background: var(--tint); min-width: 0; }
.daystrip .d { display: block; font-size: .78rem; font-weight: 700; color: var(--ink-3); }
.daystrip .h { display: block; font: 700 1.05rem/1.3 var(--mono); }
.daystrip .is-off { background: #fff; color: var(--ink-3); }
.daystrip .is-mark { background: var(--mark-2); border-color: #d9cd4a; }
.daystrip .x { display: block; font-size: .7rem; color: var(--warn); font-weight: 700; }
.exhibit__sum { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 1rem; border-top: 1px dashed var(--line-2); padding-top: .9rem; }
.exhibit__sum p { margin: 0; }
.exhibit__sum span { display: block; font-size: .84rem; color: var(--ink-3); }
.exhibit__sum strong { font: 700 1.5rem/1.2 var(--mono); }
.exhibit__lines { padding: 1.2rem 1.4rem; }
.exhibit__note { display: flex; gap: .8rem; align-items: flex-start; margin: 1rem 0 0; padding: .9rem 1rem; background: var(--mark-2); border-radius: 10px; font-size: .95rem; }
.exhibit__note b { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font: 700 .85rem/1 var(--mono); }
.exhibit__cap { text-align: center; font-size: .9rem; color: var(--ink-2); margin: 1.1rem auto 0; max-width: 46rem; }
@media (min-width: 900px) {
  .exhibit__body { grid-template-columns: .9fr 1.1fr; }
  .exhibit__days { border-bottom: 0; border-right: 1px solid var(--line); padding: 1.6rem; }
  .exhibit__lines { padding: 1.6rem; }
}

/* home: the six checks as a rulebook index */
.index { padding: 4.5rem 0; }
.index__grid { display: grid; gap: 1.6rem; }
.index__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.index__list li { display: grid; gap: .2rem 2rem; padding: 1.15rem 0; border-bottom: 1px solid var(--line); }
.index__list h3 { font: 650 1.2rem/1.3 var(--serif); margin: 0; }
.index__list p { margin: 0; color: var(--ink-2); }
.index__cite { font: 400 .86rem/1.4 var(--mono); color: var(--go); }
@media (min-width: 760px) { .index__list li { grid-template-columns: 11rem 1fr; } .index__list li > div { grid-column: 2; } .index__cite { grid-row: 1 / span 2; padding-top: .25rem; } }
@media (min-width: 980px) { .index__grid { grid-template-columns: .8fr 1.6fr; gap: 4rem; } .index__head { position: sticky; top: 1.5rem; align-self: start; } }

/* home: what you need, three columns joined by a line */
.need { padding: 4.2rem 0; background: var(--tint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.need__head { text-align: center; margin-bottom: 2.2rem; }
.need__head .h2 { margin-left: auto; margin-right: auto; }
.need__head .lede { margin: 0 auto; }
.need__row { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; position: relative; }
.need__row li { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.4rem 1.3rem; position: relative; }
.need__ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--ok-bg); color: var(--go); margin-bottom: .8rem; }
.need__ico svg { width: 24px; height: 24px; }
.need__row h3 { font: 650 1.15rem/1.3 var(--serif); margin: 0 0 .35rem; }
.need__row p { margin: 0; color: var(--ink-2); }
@media (min-width: 860px) {
  .need__row { grid-template-columns: repeat(3, 1fr); gap: 2.2rem; }
  .need__row li:not(:last-child)::after { content: ""; position: absolute; top: 2.75rem; right: -2.2rem; width: 2.2rem; border-top: 2px dotted var(--line-2); }
}

/* home: Tally Book */
.bookband { padding: 4.5rem 0; }
.bookband__grid { display: grid; gap: 2.4rem; align-items: center; }
.bookband__list { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.bookband__list li { padding: .55rem 0 .55rem 1.9rem; position: relative; border-top: 1px solid var(--line); }
.bookband__list li::before { content: ""; position: absolute; left: .2rem; top: .95rem; width: 12px; height: 7px; border-left: 2px solid var(--go); border-bottom: 2px solid var(--go); transform: rotate(-45deg); }
.mockbook { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--lift); padding: 1.1rem 1.2rem; }
.mockbook__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 1px solid var(--line); padding-bottom: .6rem; margin-bottom: .2rem; }
.mockbook__head p { margin: 0; }
.mockbook__t { font: 650 1.1rem/1.2 var(--serif); }
.mockbook__k { font: 400 .82rem/1.2 var(--mono); color: var(--ink-3); }
.mockbook ol { list-style: none; margin: 0; padding: 0; }
.mockbook li { display: grid; grid-template-columns: 1fr auto auto; gap: .8rem; align-items: center; padding: .6rem 0; border-bottom: 1px dashed var(--line); font-size: .95rem; }
.mockbook li:last-child { border-bottom: 0; }
.mockbook .h { font-family: var(--mono); color: var(--ink-2); }
.mockbook__foot { display: flex; justify-content: space-between; gap: 1rem; background: var(--tint); border-radius: 8px; padding: .6rem .8rem; margin-top: .6rem; font-size: .9rem; }
.mockbook__foot b { font-family: var(--mono); }
.mockbook__cap { font-size: .85rem; color: var(--ink-3); margin: .7rem 0 0; }
@media (min-width: 900px) { .bookband__grid { grid-template-columns: 1fr 1fr; gap: 4.5rem; } }

/* the time card (result pages): a clean ledger card */
.card { position: relative; margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1rem 1.1rem .9rem; min-width: 0; }
.card__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; padding-bottom: .55rem; margin-bottom: .2rem; border-bottom: 1px solid var(--line); }
.card__title { font: 650 1.1rem/1.2 var(--serif); }
.card__meta { font: 400 .88rem/1.3 var(--mono); color: var(--ink-3); }
.card__t { width: 100%; border-collapse: collapse; font-size: .95rem; }
.card__t th, .card__t td { padding: .4rem .3rem; border-bottom: 1px solid var(--tint-2); text-align: left; }
.card__t thead th { font: 400 .8rem/1.2 var(--mono); color: var(--ink-3); border-bottom: 1px solid var(--line-2); }
.card__t tbody th { font-weight: 600; white-space: nowrap; }
.card__t tfoot th, .card__t tfoot td { border-bottom: 0; border-top: 1.5px solid var(--ink); font-weight: 700; padding-top: .55rem; }
.card__t .num { text-align: right; }
.punch { font-family: var(--mono); white-space: nowrap; }
.is-off th, .card__off { color: var(--ink-3); }
.card__off { font-family: var(--mono); }
.card__paid { font: 700 .72rem/1 var(--body); color: var(--warn); background: var(--mark-2); padding: .18rem .35rem; border-radius: 3px; white-space: nowrap; }

/* the verdict: a badge, not a rubber stamp */
.stamp { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .1rem; padding: .7rem 1.1rem .65rem; border-radius: 12px; border: 1px solid currentColor;
  color: var(--ink-2); background: #fff; line-height: 1.1; }
.stamp__word { font: 650 1.25rem/1.15 var(--serif); }
.stamp__amt { font: 700 1.05rem/1.2 var(--mono); }
.stamp--short { color: var(--bad); background: var(--bad-bg); }
.stamp--match { color: var(--ok); background: var(--ok-bg); }
.stamp--over, .stamp--check { color: var(--warn); background: var(--warn-bg); }
.stamp--nostub { color: var(--ink-2); background: var(--tint); }

/* worked vs paid: two big figures */
.pair { display: grid; grid-template-columns: 1fr 1fr; margin-top: 1.1rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; overflow: hidden; }
.pair__side { padding: .9rem 1.1rem; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.pair__side--stub { border-left: 1px solid var(--line); background: var(--tint); }
.pair__k { font-size: .86rem; color: var(--ink-3); }
.pair__v { font: 700 clamp(1.35rem, 4vw, 1.9rem)/1.15 var(--mono); overflow-wrap: anywhere; }
.pair__s { font-size: .86rem; color: var(--ink-2); }
.pair--big .pair__v { font-size: clamp(1.45rem, 5vw, 2.3rem); }

/* plans */
.plans { padding: 4.5rem 0; background: var(--tint); border-top: 1px solid var(--line); }
.plans__head { text-align: center; }
.plans__head .h2 { margin-left: auto; margin-right: auto; }
.plans--page { padding-top: 1rem; background: transparent; border-top: 0; }
.preview { background: var(--warn-bg); border: 1px solid #e6cf7d; border-radius: 10px; padding: .9rem 1.1rem; max-width: 52rem; margin-left: auto; margin-right: auto; }
.plans--page .preview { margin-left: 0; }
.plans__grid { display: grid; gap: 16px; margin: 1.8rem 0; }
.plan { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.6rem 1.4rem 1.4rem; display: flex; flex-direction: column; }
.plan--main { border: 2px solid var(--go); box-shadow: var(--lift); }
.plan__tag { position: absolute; top: 0; right: 1.2rem; transform: translateY(-50%); margin: 0; background: var(--mark); color: var(--ink); font: 700 .8rem/1 var(--body); padding: .4rem .65rem; border-radius: 999px; }
.plan__name { font: 650 1.3rem/1.2 var(--serif); margin: 0 0 .7rem; }
.plan__price { margin: 0; font-size: 1rem; color: var(--ink-2); }
.plan__price span { font: 700 2.3rem/1 var(--mono); color: var(--ink); margin-right: .25rem; }
.plan__alt { margin: .35rem 0 0; font-size: .92rem; color: var(--ink-2); }
.plan__list { list-style: none; padding: 0; margin: 1.1rem 0 1.3rem; flex: 1; border-top: 1px solid var(--line); }
.plan__list li { margin: 0; padding: .45rem 0 .45rem 1.6rem; position: relative; border-bottom: 1px solid var(--tint-2); }
.plan__list li::before { content: ""; position: absolute; left: .15rem; top: .85rem; width: 10px; height: 6px; border-left: 2px solid var(--go); border-bottom: 2px solid var(--go); transform: rotate(-45deg); }
.plan__state { margin: 0; text-align: center; font: 700 .95rem/1.2 var(--body); background: var(--ok-bg); color: var(--ok); border-radius: var(--r); padding: .8rem; }
@media (min-width: 900px) { .plans__grid { grid-template-columns: 1fr 1.1fr 1fr; align-items: stretch; } }

/* questions */
.faq { padding: 4.5rem 0 5rem; }
.faq__grid { max-width: 780px; margin: 0 auto; }
.faq__grid .h2 { text-align: center; margin-left: auto; margin-right: auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; font: 600 1.08rem/1.35 var(--body); padding: 1.05rem 2.4rem 1.05rem 0; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: .5rem; top: 1.35rem; width: 9px; height: 9px; border-right: 2px solid var(--go); border-bottom: 2px solid var(--go); transform: rotate(45deg); }
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.55rem; }
.faq details p { margin: 0 0 1.1rem; color: var(--ink-2); }

/* page heads, prose */
.pagehead { padding: 2.6rem 0 1.8rem; border-bottom: 1px solid var(--line); background: var(--tint); }
.pagehead--result { background: var(--tint); }
.result__head { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; justify-content: space-between; align-items: flex-end; }
.prose { padding: 2.4rem 24px 3.5rem; max-width: 820px; margin: 0 auto; }
.prose h2 { font: 650 1.5rem/1.2 var(--serif); letter-spacing: -.01em; margin: 2.4rem 0 .7rem; }
.prose li { margin: .45rem 0; }
.toc { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.toc a { font-size: .9rem; font-weight: 600; text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: .3rem .85rem; color: var(--go-dk); background: #fff; }
.toc a:hover { background: var(--tint); }
.msg { padding: 3.5rem 24px 4.5rem; max-width: 760px; }
.msg .btn { margin: .3rem .4rem .3rem 0; }

/* the price at the point of use */
.priceline { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: baseline; font-size: .95rem; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; padding: .7rem 1rem; margin: 1.2rem 0; max-width: 54rem; }
.priceline__tag { font: 700 .78rem/1 var(--body); color: var(--ink); background: var(--mark); border-radius: 999px; padding: .28rem .55rem; }

/* the form */
.alert { background: var(--bad-bg); border: 1px solid var(--bad); border-radius: 10px; padding: .85rem 1.1rem; margin: 1.4rem 0 0; }
.alert p { margin: 0 0 .3rem; }
.alert ul { margin: 0; padding-left: 1.2rem; }
.sheet { padding-top: 1.6rem; padding-bottom: 3.5rem; }
.sec { border: 0; padding: 0; margin: 0 0 2.4rem; min-width: 0; }
.sec__h { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; font: 650 1.4rem/1.2 var(--serif); padding: 0; margin-bottom: 1rem; }
.sec__n { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--go); color: #fff; font: 700 1rem/1 var(--mono); }
.sec__opt { font: 400 .92rem/1.2 var(--body); color: var(--ink-3); }
.fields { display: grid; gap: 1rem 1.4rem; }
@media (min-width: 760px) { .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.field { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .95rem; min-width: 0; }
input[type="text"], input[type="date"], input[type="time"], select {
  width: 100%; min-height: 48px; padding: .5rem .75rem; font: 400 1.05rem/1.2 var(--body); color: var(--ink); background: #fff;
  border: 1.5px solid var(--line-2); border-radius: 8px; }
input[type="time"], .day input { font-family: var(--mono); }
input:focus, select:focus { border-color: var(--go); outline: 3px solid rgba(16, 128, 93, .22); outline-offset: 0; }
input[aria-invalid="true"] { border-color: var(--bad); background: #fff8f7; }
.err { display: block; color: var(--bad); font-size: .88rem; font-weight: 600; }
.seg { display: inline-flex; border: 1.5px solid var(--line-2); border-radius: 8px; overflow: hidden; align-self: flex-start; background: #fff; }
.seg a, .seg span { padding: .6rem 1rem; text-decoration: none; color: var(--ink-2); font-weight: 600; }
.seg .seg__on { background: var(--go); color: #fff; }
.days { background: var(--tint); border: 1px solid var(--line); border-radius: var(--r-lg); padding: .9rem; margin-bottom: 1rem; }
.days__wk { font: 650 1.05rem/1 var(--serif); margin: .2rem 0 .7rem; }
.days__head { display: none; }
.day { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .6rem; padding: .75rem 0; border-top: 1px solid var(--line); }
.day__name { grid-column: 1 / -1; font-weight: 700; display: flex; justify-content: space-between; }
.day__h { grid-column: 1 / -1; font: 700 1rem/1 var(--mono); color: var(--go); text-align: left; }
.day .err { grid-column: 1 / -1; }
.day--err { background: var(--bad-bg); margin: 0 -.9rem; padding: .75rem .9rem; }
.bonus { margin-top: 1rem; max-width: 30rem; }
.day label { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.day__lbl { font-size: .8rem; font-weight: 600; color: var(--ink-3); }
@media (min-width: 760px) {
  .days__head { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr .6fr; gap: .6rem; font: 400 .8rem/1.2 var(--mono); color: var(--ink-3); padding: 0 0 .4rem; }
  .day { grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr .6fr; align-items: center; }
  .day__name { grid-column: auto; }
  .day__lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .day__h { grid-column: auto; text-align: right; }
}
.stubgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.1rem;
  border-top: 6px solid var(--go); }
.field--key input { border-color: var(--go); font-weight: 700; background: var(--mark-2); }
@media (min-width: 900px) { .stubgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; border-top: 1px solid var(--line); padding-top: 1.4rem; }
.submit__live { margin: 0; font: 700 1rem/1.3 var(--mono); color: var(--go-dk); }

/* result */
.result { padding-top: 1.8rem; padding-bottom: 3.5rem; }
.result__line { font-size: 1.15rem; margin: 0 0 1rem; }
.saved { display: inline-block; background: var(--ok-bg); color: var(--ok); font-weight: 700; padding: .35rem .75rem; border-radius: 999px; margin: 0; }
.lines { width: 100%; border-collapse: separate; border-spacing: 0; margin: 1.4rem 0 .6rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; font-size: .98rem; }
.lines th, .lines td { padding: .65rem .8rem; border-bottom: 1px solid var(--tint-2); text-align: left; }
.lines tbody tr:last-child th, .lines tbody tr:last-child td { border-bottom: 0; }
.lines td.num, .lines th.num { text-align: right; font-family: var(--mono); }
.lines thead th { background: var(--tint); color: var(--ink-3); font: 400 .82rem/1.2 var(--mono); border-bottom: 1px solid var(--line); }
.lines .is-bad td, .lines .is-bad th { background: var(--mark-2); }
.lines .is-bad td:last-child { color: var(--bad); font-weight: 700; }
.lines .is-bad th::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); margin-right: .5rem; vertical-align: middle; }
.lines--sm { font-size: .9rem; }
.lines tfoot th, .lines tfoot td { border-top: 1.5px solid var(--ink); border-bottom: 0; font-weight: 700; }
/* phones: each line of the comparison stacks, so the difference is never off screen (review TLB-1) */
@media (max-width: 600px) {
  .lines--stack, .lines--stack tbody, .lines--stack tr, .lines--stack th, .lines--stack td { display: block; }
  .lines--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lines--stack tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
  .lines--stack tbody tr:last-child { border-bottom: 0; }
  .lines--stack th[scope="row"] { grid-column: 1 / -1; border-bottom: 0; padding-bottom: .1rem; font-weight: 700; }
  .lines--stack td { border-bottom: 0; padding: .15rem .8rem .7rem; text-align: left !important; font-size: .95rem; overflow-wrap: anywhere; min-width: 0; }
  .lines--stack td::before { content: attr(data-k); display: block; font: 400 .74rem/1.25 var(--body); color: var(--ink-3); }
}
.flags { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.flag { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .95rem 1.15rem; box-shadow: inset 4px 0 0 var(--line-2); }
.flag--money { background: #fffafa; box-shadow: inset 4px 0 0 var(--bad); }
.flag h3 { font: 650 1.08rem/1.3 var(--serif); margin: 0 0 .25rem; }
.flag p { margin: 0 0 .3rem; color: var(--ink-2); }
.flag__cite { font: 400 .84rem/1.3 var(--mono); color: var(--go); }
.flags--print li { margin: .4rem 0; }
.weeks { display: grid; gap: 1.4rem; }
.weeks__one { display: grid; gap: 1rem; align-items: start; min-width: 0; }
@media (min-width: 900px) { .weeks__one { grid-template-columns: 1.3fr 1fr; } }
.calc { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: .4rem 1.1rem; }
.calc div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--tint-2); }
.calc div:last-child { border-bottom: 0; }
.calc dt { color: var(--ink-2); }
.calc dd { margin: 0; font: 700 1rem/1.4 var(--mono); white-space: nowrap; }
.calc__sum { border-top: 1.5px solid var(--ink); }
.calc__sum dt { font-weight: 700; color: var(--ink); }
.calc--wide { max-width: 640px; }
.ask { margin-top: 2.2rem; background: var(--tint); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0 1.4rem 1.1rem; }
.ask .h3 { margin-top: 1.3rem; }
.ask li { margin: .45rem 0; }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin: 2rem 0 .5rem; }
.actions__save { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; }
.actions form { margin: 0; }

/* book */
.keybox { margin-top: 1rem; background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--mark); border-radius: 10px; padding: .95rem 1.15rem; max-width: 54rem; }
.keybox p { margin: 0 0 .4rem; }
.keybox__link { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.keybox code { font: 700 1rem/1.3 var(--mono); background: var(--tint); padding: .3rem .5rem; border-radius: 4px; overflow-wrap: anywhere; }
.book { padding-top: 1.6rem; padding-bottom: 3.5rem; }
.book__bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin-bottom: 1rem; }
.empty { padding: 2rem; text-align: center; border: 1px dashed var(--line-2); border-radius: var(--r-lg); }
.scrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.ledger { width: 100%; min-width: 640px; border-collapse: collapse; background: #fff; border: 1px solid var(--line); }
.ledger th, .ledger td { padding: .65rem .75rem; border-bottom: 1px solid var(--tint-2); text-align: left; }
.ledger td.num, .ledger th.num { text-align: right; font-family: var(--mono); }
.ledger thead th { background: var(--tint); color: var(--ink-3); font: 400 .8rem/1.2 var(--mono); border-bottom: 1px solid var(--line); }
.ledger__lbl { display: block; font-size: .82rem; color: var(--ink-3); font-weight: 400; }
.chip { display: inline-block; font: 700 .8rem/1 var(--body); padding: .32rem .6rem; border-radius: 999px; white-space: nowrap; }
.chip--short { background: var(--bad-bg); color: var(--bad); }
.chip--match { background: var(--ok-bg); color: var(--ok); }
.chip--over, .chip--check { background: var(--warn-bg); color: var(--warn); }
.chip--nostub { background: var(--tint); color: var(--ink-2); }
.years { display: grid; gap: 1rem; }
@media (min-width: 760px) { .years { grid-template-columns: repeat(2, 1fr); } }
.yr { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: .6rem 1.1rem; }
.yr__y { font: 650 1.6rem/1 var(--serif); padding: .3rem 0 .5rem; }
.yr div { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-top: 1px solid var(--tint-2); }
.yr dd { margin: 0; font: 700 1rem/1.4 var(--mono); }
.danger { margin-top: 2.6rem; border-top: 1px solid var(--line); padding-top: .4rem; }
.check { display: flex; gap: .6rem; align-items: flex-start; margin: 0 0 1rem; }
.check input { width: 22px; height: 22px; margin-top: .15rem; accent-color: var(--go); }

/* print sheet */
.sheetp { padding-top: 1.6rem; padding-bottom: 3rem; max-width: 900px; }
.sheetp__brand { font: 400 .9rem/1 var(--mono); color: var(--go); margin: 0; }
.sheetp__head { border-bottom: 1.5px solid var(--ink); padding-bottom: .6rem; }
@media print {
  .top, .foot, .bar, .noprint, .skip { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .sheetp { padding: 0; }
  .scrollx { overflow: visible; }
  .lines { border-radius: 0; }
  .lines thead th { background: #fff; color: #000; border-bottom: 2px solid #000; }
  a { color: #000; text-decoration: none; }
}

/* footer */
.foot { background: var(--night); color: #cfe0d7; padding: 3.2rem 0 1.3rem; }
.foot a { color: #fff; }
.foot__grid { display: grid; gap: 1.6rem; }
.foot__word { font: 650 1.7rem/1 var(--serif); letter-spacing: -.02em; color: #fff; margin: 0 0 .7rem; }
.foot__word i { font-style: italic; font-weight: 500; color: #9fe0c3; }
.foot__lead p:last-child { max-width: 30rem; }
.foot__h { font: 400 .86rem/1 var(--mono); color: #9fe0c3; margin: .3rem 0 .8rem; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin: .45rem 0; }
.indep { font-size: .86rem; color: #b5cbbf; border-top: 1px solid #22423a; border-bottom: 1px solid #22423a; padding: 1rem 0; margin: 2rem 0 1rem; max-width: 64rem; }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; font-size: .88rem; color: #9fb8ac; }
@media (min-width: 900px) { .foot__grid { grid-template-columns: 1.6fr 1fr 1fr; } }

@media (max-width: 520px) {
  .c-unp { display: none; }
}
@media (max-width: 420px) {
  .wrap { padding: 0 16px; }
  .prose, .msg { padding-left: 16px; padding-right: 16px; }
  .card { padding: .85rem .7rem; }
  .card__t { font-size: .86rem; }
  .card__t th, .card__t td { padding: .34rem .2rem; }
  .pair__side { padding: .75rem .75rem; }
  .exhibit__top, .exhibit__days, .exhibit__lines { padding-left: 1rem; padding-right: 1rem; }
  .daystrip { gap: 4px; }
  .daystrip .h { font-size: .92rem; }
  .daystrip .x { font-size: .62rem; }
}
@media (prefers-reduced-motion: no-preference) { .btn, .tabs a, .more { transition: background-color .15s, color .15s, border-color .15s; } }
.exhibit__verdict { margin-top: 1rem; }
.need__head .h2, .plans__head .h2 { max-width: 30ch; }
.hero__tag { text-align: left; }

/* ---------- v1.2.0: AdEngine banner (adengine.us) ----------
   One labelled slot between the main content and the dark footer, on home, rules, pricing and about only (the controllers
   opt in). The label and the reserved height are on the <ins>, so when tag.js (or ae-size.js) hides a slot it cannot fill,
   the label and the space go with it. 110px = 16px label + 4px gap + 90px banner; 270px on phones (300x250). Those pages
   already end with 3.5rem or more of white space and the footer has no top margin, so the slot's only spacing is the 48px
   below the banner, on the <ins>. display stays in this file and is never !important: tag.js hides with style.display. */
.ae-slot { padding: 0 24px; }
.ae-slot ins.adengine { display: block; max-width: 728px; min-height: 110px; margin: 0 auto 48px; text-align: center; text-decoration: none; }
.ae-slot ins.adengine::before { content: "Advertisement"; display: block; margin-bottom: 4px; font: 400 11px/16px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ae-slot ins.adengine a { display: inline-block; vertical-align: top; }
.ae-slot:has(> ins.adengine[style*="none"]) { display: none; }
@media (max-width: 767px) { .ae-slot ins.adengine { max-width: 300px; min-height: 270px; margin-bottom: 40px; } }
@media (max-width: 420px) { .ae-slot { padding: 0 16px; } }
@media print { .ae-slot { display: none; } }