/* Tallystick Accountants — concept site. The whole site is a ledger: 1px rules, row numbers, tabular figures, one green. */

@font-face { font-family: 'Inter Tight'; src: url('fonts/intertight.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/plexmono.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/plexmono-medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
/* Metric-matched fallbacks (computed from the font tables) keep the swap from shifting layout. */
@font-face { font-family: 'Inter Tight Fallback'; src: local('Arial'), local('Helvetica'), local('Liberation Sans'); size-adjust: 95.7%; ascent-override: 101.3%; descent-override: 25.2%; line-gap-override: 0%; }
@font-face { font-family: 'Plex Fallback'; src: local('Courier New'), local('Liberation Mono'); size-adjust: 100%; ascent-override: 102.5%; descent-override: 27.5%; line-gap-override: 0%; }

:root {
	--paper: #FBFBF8;
	--paper-2: #F1F2EC;
	--rule: #D9DAD3;
	--ink: #1E2022;
	--grey: #5C6063;
	--green: #0B7A4B;
	--green-2: #E3F1E9;
	--sans: 'Inter Tight', 'Inter Tight Fallback', Arial, sans-serif;
	--mono: 'IBM Plex Mono', 'Plex Fallback', ui-monospace, monospace;
	--gut: 30px;
	--bar: 48px;
	color-scheme: light;
}
@media (min-width: 900px) { :root { --gut: 44px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar) + 12px); overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.5; font-synthesis: none; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
table { border-collapse: collapse; }
code { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--paper); padding: 10px 16px; }
.skip:focus { top: 8px; }
.wide { display: none; }
@media (min-width: 620px) { .wide { display: inline; } }

.lab { font-family: var(--mono); font-weight: 500; font-size: .8125rem; color: var(--green); }
.small { font-size: .9375rem; color: var(--grey); }
.h2 { font-weight: 600; font-size: clamp(2.1rem, 5vw, 4rem); line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; background: var(--green); color: #fff; border: 1px solid var(--green); text-decoration: none; font-weight: 600; cursor: pointer; transition: background-color .12s, color .12s; }
.btn:hover { background: var(--ink); border-color: var(--ink); }
.btn--line { background: none; color: var(--ink); border-color: var(--ink); }
.btn--line:hover { color: #fff; }

.concept { min-height: 30px; display: flex; align-items: center; justify-content: center; padding: 4px 16px; background: var(--ink); color: var(--paper); font-size: .8125rem; }
.concept a { text-decoration: none; }
.concept a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- The formula bar is the call to action, and it stays with you ---- */
.fx { position: sticky; top: 0; z-index: 30; height: var(--bar); display: flex; align-items: stretch; background: var(--paper); border-bottom: 1px solid var(--ink); font-family: var(--mono); font-size: .875rem; }
.fx__name { display: flex; align-items: center; gap: 7px; padding: 0 12px; color: var(--green); font-family: var(--sans); font-weight: 700; font-size: 1.0625rem; letter-spacing: -.01em; text-decoration: none; border-right: 1px solid var(--rule); }
.fx__name svg { width: 20px; height: 20px; flex: none; }
.fx__name span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.fx__ref { display: none; align-items: center; justify-content: center; width: 64px; border-right: 1px solid var(--rule); }
.fx__fn { display: flex; align-items: center; padding: 0 9px; color: var(--grey); font-style: italic; }
.fx__f { flex: 1; min-width: 0; display: flex; align-items: center; white-space: nowrap; overflow: hidden; }
.fx__go { flex: none; display: flex; align-items: center; padding: 0 12px; background: var(--green); color: #fff; font-family: var(--sans); font-weight: 600; font-size: .9375rem; text-decoration: none; }
.fx__go:hover { background: var(--ink); }
@media (min-width: 760px) { .fx__name span { position: static; width: auto; height: auto; clip-path: none; } .fx__ref { display: flex; } .fx__go { padding: 0 20px; } .fx { font-size: .9375rem; } }

.cols { display: grid; grid-template-columns: var(--gut) repeat(12, minmax(0, 1fr)); height: 24px; background: var(--paper-2); border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: .75rem; color: var(--grey); }
.cols b { display: grid; place-items: center; font-weight: 400; border-left: 1px solid var(--rule); }
@media (max-width: 759px) { .cols { grid-template-columns: var(--gut) repeat(4, minmax(0, 1fr)); } .cols b:nth-of-type(n + 5) { display: none; } }

/* ---- The sheet: row numbers in the gutter, column lines behind everything ---- */
.sheet { counter-reset: row; background: repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px calc((100vw - var(--gut)) / 4)) var(--gut) 0 / 100% 100% no-repeat; }
@media (min-width: 760px) { .sheet { background-image: repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px calc((100vw - var(--gut)) / 12)); } }
.r, .box { position: relative; counter-increment: row; margin-left: var(--gut); padding: clamp(30px, 5vw, 64px) 14px; border-bottom: 1px solid var(--rule); background: rgb(251 251 248 / .86); }
.r::before, .box::before { content: counter(row); position: absolute; left: calc(var(--gut) * -1); top: 0; bottom: 0; width: var(--gut); padding-top: 8px; background: var(--paper-2); border-right: 1px solid var(--rule); font-family: var(--mono); font-size: .75rem; text-align: center; color: var(--grey); }
@media (min-width: 760px) { .r, .box { padding-inline: calc((100vw - var(--gut)) / 12); } }

/* ---- The selected cell ---- */
.sel { position: absolute; z-index: 10; left: 0; top: 0; width: 0; height: 0; border: 2px solid var(--green); pointer-events: none; opacity: 0; transition: transform .14s cubic-bezier(.2, .8, .2, 1), width .14s cubic-bezier(.2, .8, .2, 1), height .14s cubic-bezier(.2, .8, .2, 1), opacity .14s; }
.sel::after { content: ''; position: absolute; right: -5px; bottom: -5px; width: 8px; height: 8px; background: var(--green); border: 1px solid var(--paper); }

/* ---- Hero ---- */
.hero { padding-block: clamp(36px, 7vw, 90px) clamp(26px, 4vw, 50px); }
.tag { font-family: var(--mono); font-size: .875rem; color: var(--green); }
.hero__title { margin-top: 12px; font-weight: 600; font-size: clamp(3.1rem, 11.4vw, 10rem); line-height: .95; letter-spacing: -.04em; text-wrap: balance; }
.hero__title span { display: block; color: var(--green); }
.hero2 { display: grid; gap: 22px; }
.hero__lede { max-width: 34em; font-size: 1.25rem; line-height: 1.4; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 900px) { .hero2 { grid-template-columns: 7fr 5fr; align-items: end; } .hero__cta { justify-content: flex-end; } }

.due { display: grid; gap: 10px; }
.due h2 { font-weight: 500; }
.due__list li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: .9375rem; }
.due__list li:first-child { border-top: 1px solid var(--ink); }
.due__list li > :last-child { text-align: right; }
.due__list b { font-weight: 500; color: var(--green); }

/* ---- The shoebox squares up as you scroll ---- */
.box { padding-block: 40px; }
.box__head .h2 { margin-top: 6px; }
.led { border-collapse: separate; border-spacing: 0; width: 100%; margin-top: 20px; font-family: var(--mono); font-size: .875rem; background: var(--paper); }
.led th, .led td { padding: 8px 6px; border-bottom: 1px solid var(--rule); text-align: left; font-weight: 400; vertical-align: top; }
.led thead th { border-bottom: 1px solid var(--ink); color: var(--grey); font-size: .8125rem; }
.led tfoot th, .led tfoot td { border-top: 2px solid var(--ink); border-bottom: 3px double var(--ink); font-weight: 500; font-size: 1.0625rem; }
.led .n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.led tfoot .n { color: var(--green); }
.box__after { margin-top: 16px; font-weight: 600; color: var(--green); }
.js.can-move .box { height: 300vh; padding-block: 0; }
.js.can-move .box__stage { position: sticky; top: var(--bar); height: calc(100svh - var(--bar)); display: flex; flex-direction: column; justify-content: center; }
.js.can-move .led tbody td { position: relative; }
.js.can-move .led tbody tr { will-change: transform; background: var(--paper); }
.js.can-move .led tbody tr.is-loose { box-shadow: 0 6px 16px rgb(30 32 34 / .16); outline: 1px solid var(--rule); }
.js.can-move .led tbody tr.is-loose td:last-child { color: transparent; }
.js.can-move .led thead, .js.can-move .led tfoot { transition: opacity .3s; }
.js.can-move .box.is-messy .led thead, .js.can-move .box.is-messy .led tfoot, .js.can-move .box.is-messy .box__after { opacity: 0; }
.box__after { transition: opacity .3s; }
@media (min-width: 900px) { .box__stage .led, .box__after { max-width: 640px; margin-inline: auto; } .box__head { text-align: center; } .box__after { text-align: center; } }

/* ---- Fee sheet ---- */
.fees .h2 { margin-top: 6px; }
.sheetform { max-width: 760px; margin-top: 24px; }
.seg { display: inline-flex; border: 1px solid var(--ink); }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; min-height: 46px; padding: 0 14px; font-weight: 600; }
.seg input:checked + span { background: var(--ink); color: var(--paper); }
.seg input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
.led--fees { font-family: var(--sans); font-size: 1rem; }
.led--fees td { padding: 11px 6px; }
.led--fees .n { font-family: var(--mono); }
.led--fees small { display: block; color: var(--grey); font-size: .875rem; }
.what { font-weight: 500; }
.tick { display: flex; gap: 11px; align-items: flex-start; font-weight: 500; cursor: pointer; }
.tick input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--green); }
.staff { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.step { display: inline-flex; align-items: center; border: 1px solid var(--ink); font-family: var(--mono); }
.step button { width: 44px; height: 44px; background: none; border: 0; cursor: pointer; font-size: 1.2rem; }
.step button:hover { background: var(--green-2); }
.step output { min-width: 34px; text-align: center; }
.total { font-size: 2.1rem !important; line-height: 1.1; }
.led code { font-size: .9375rem; color: var(--grey); }
.sheetform .small { margin-top: 10px; }

/* ---- Partners and awkward questions ---- */
.who .h2, .qa .h2 { margin-top: 6px; }
.who__list, .qa__list { display: grid; margin-top: 24px; border-top: 1px solid var(--ink); }
.who__list > div, .qa__list > div { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.who dt { font-weight: 600; font-size: 1.75rem; letter-spacing: -.02em; }
.qa dt { font-weight: 600; font-size: 1.1875rem; }
.kudos { display: grid; gap: 10px; margin: 26px 0 8px; font-size: 1.1875rem; }
.kudos q { quotes: '“' '”'; }
.kudos span { display: block; font-family: var(--mono); font-size: .875rem; color: var(--green); }
@media (min-width: 760px) { .who__list, .qa__list { grid-template-columns: 1fr 1fr; column-gap: 32px; } .kudos { grid-template-columns: 1fr 1fr; gap: 32px; } }

/* ---- Pick a cell ---- */
.book .h2 { margin-top: 6px; }
.slots { margin-top: 22px; max-width: 760px; }
.grid { display: grid; grid-template-columns: 52px repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-left: 1px solid var(--rule); font-family: var(--mono); font-size: .8125rem; background: var(--paper); }
.grid > * { min-height: 46px; display: grid; place-items: center; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.grid .hd { background: var(--paper-2); color: var(--grey); line-height: 1.15; text-align: center; padding: 4px 2px; }
.grid button { width: 100%; padding: 0; background: var(--green-2); border-width: 0 1px 1px 0; border-style: solid; border-color: var(--rule); color: var(--green); font-weight: 500; cursor: pointer; transition: background-color .1s, color .1s; }
.grid button:hover { background: var(--green); color: #fff; }
.grid button[aria-pressed="true"] { background: var(--green); color: #fff; box-shadow: inset 0 0 0 2px var(--ink); }
.grid .no { color: #8B8E8F; background-image: linear-gradient(135deg, transparent 49%, var(--rule) 49% 51%, transparent 51%); }
.slots__read { min-height: 3em; margin-top: 12px; }
.slots__who { display: grid; gap: 12px; margin: 8px 0 16px; }
.field label { display: block; margin-bottom: 3px; font-weight: 500; }
.field label span { color: var(--grey); font-weight: 400; }
.field input { width: 100%; min-height: 50px; padding: 0 12px; background: #fff; border: 1px solid var(--ink); border-radius: 0; }
.field input[aria-invalid="true"] { border: 2px solid #A32515; }
@media (min-width: 760px) { .slots__who { grid-template-columns: 1fr 1fr; } .field--wide, .slots__who .btn { grid-column: 1 / -1; } }
.done { margin-top: 20px; }
.done:focus { outline: 0; }
.done code { color: var(--green); }
.done p { margin-top: 8px; }
.done .btn { margin-top: 16px; }
.ring { margin-top: 18px; }
.ring a { font-family: var(--mono); font-weight: 500; color: var(--green); }
html:not(.js) .grid, html:not(.js) .slots__read { display: none; }

.foot { padding: 44px 16px 30px calc(var(--gut) + 14px); border-top: 1px solid var(--ink); background: var(--ink); color: var(--paper); }
.foot__mark { font-weight: 600; font-size: clamp(3rem, 15.5vw, 14rem); line-height: 1; letter-spacing: -.045em; }
.foot dl { display: grid; gap: 12px; margin-top: 24px; }
.foot dt { font-family: var(--mono); font-size: .8125rem; color: #9CD7BA; }
.foot__concept { margin-top: 24px; padding-top: 12px; border-top: 1px solid #55595B; font-size: .9375rem; }
@media (min-width: 760px) { .foot dl { grid-template-columns: repeat(4, 1fr); } }

.note-call { position: fixed; inset: 0; z-index: 60; display: none; place-items: center; padding: 16px; background: rgb(30 32 34 / .6); }
.note-call.is-open, .note-call:target { display: grid; }
.note-call__card { width: min(100%, 430px); padding: 24px; background: var(--paper); border: 1px solid var(--ink); }
.note-call__card p + p { margin-top: 8px; }
.note-call__title { font-weight: 600; font-size: 1.8rem; line-height: 1.1; letter-spacing: -.02em; }
.note-call__num { font-family: var(--mono); font-weight: 500; font-size: 1.4rem; color: var(--green); }
.note-call .btn { margin-top: 16px; }
.has-modal { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}