/* Walkaway's own look: a yard sign that holds the answer, a ledger of inputs, a closing-statement
   receipt. Only the kit's tokens and base reset are borrowed; no kit layout is used. */
.mono, .receipt td, .gain, .grid-table td { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
h1, h2, h3, .brand, .sign .big { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; }
body { background: var(--bg); }
.wrap { width: min(100% - 2rem, 72rem); margin-inline: auto; }
.muted { color: var(--ink-2); }

/* The bar and the suite's tabs. */
.bar { background: var(--ink); color: var(--bg); }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 52px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--bg); text-decoration: none; font-size: 1.35rem; text-transform: uppercase; letter-spacing: 0.02em; }
.brand img { background: var(--bg); border-radius: 4px; padding: 2px; }
.bar .theme-toggle { color: var(--bg); border-color: var(--bg); min-width: 44px; min-height: 44px; }
.tabs { background: var(--ink); border-bottom: 4px solid var(--brand); }
.tabs ul { list-style: none; margin: 0; padding: 0 0 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.tabs li { flex: none; }
.tabs a { display: block; padding: 10px 14px 8px; color: var(--bg); text-decoration: none; font-weight: 700; font-size: var(--step--1); border-radius: 6px 6px 0 0; white-space: nowrap; }
.tabs a:hover { background: rgba(255, 255, 255, 0.12); }
.tabs a[aria-current="page"] { background: var(--brand); color: var(--brand-ink); }

/* The lot: pitch, sign and ledger. */
.lot { padding: var(--s5) 0 var(--s6); background:
  linear-gradient(to bottom, transparent calc(100% - 18px), color-mix(in srgb, var(--accent) 28%, var(--bg)) calc(100% - 18px)); }
.lot .wrap { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); grid-template-areas: "pitch" "sign" "ledger"; }
.pitch { grid-area: pitch; }
.sign-wrap { grid-area: sign; }
.ledger { grid-area: ledger; }
@media (min-width: 880px) {
  .lot .wrap { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); grid-template-areas: "pitch sign" "ledger sign"; column-gap: var(--s6); align-items: start; }
  .sign-wrap { position: sticky; top: var(--s4); }
}
.kicker { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand-text); margin: 0 0 var(--s2); }
.pitch h1 { font-size: clamp(2rem, 6.4vw, 3.9rem); line-height: 0.98; margin: 0; text-transform: uppercase; }
.pitch .promise { font-size: var(--step-1); max-width: 34ch; margin: var(--s3) 0 0; }

/* The sign: a panel hung from a post, the answer in the display face. */
.sign-wrap { display: grid; justify-items: center; }
.sign { position: relative; width: 100%; max-width: 30rem; background: var(--brand); color: var(--brand-ink); border: 4px solid var(--ink); border-radius: 8px; box-shadow: 8px 8px 0 var(--ink); padding: var(--s4) var(--s4) var(--s4); text-align: center; margin-top: 26px; }
.sign::before, .sign::after { content: ""; position: absolute; top: -30px; width: 6px; height: 28px; background: var(--ink); }
.sign::before { left: 22%; } .sign::after { right: 22%; }
.sign .label { display: block; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--step--1); }
.sign .big { display: block; font-size: clamp(2.6rem, 11vw, 4.4rem); line-height: 1.05; margin: var(--s2) 0; word-break: break-word; }
.sign .why { margin: 0 auto var(--s3); max-width: 34ch; font-size: var(--step--1); }
.sign .btn { background: var(--bg); color: var(--ink); border: 3px solid var(--ink); font-weight: 700; min-height: 48px; padding-inline: var(--s5); box-shadow: 3px 3px 0 var(--ink); }
.sign .btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.sign .disclose { font-size: var(--step--1); margin: var(--s3) auto 0; max-width: 34ch; opacity: 0.92; }
.sign .seeall { display: inline-block; color: var(--brand-ink); font-size: var(--step--1); margin-top: var(--s2); min-height: 44px; line-height: 44px; }
.post { width: 14px; height: 54px; background: var(--ink); border-radius: 0 0 3px 3px; }
@media (max-width: 879px) { .post { display: none; } }

/* The ledger: big inputs, then adjustments behind chips. */
.ledger { background: var(--surface); border: 3px solid var(--ink); border-radius: 8px; box-shadow: 6px 6px 0 var(--ink); padding: var(--s4); }
.ledger .main { display: grid; gap: var(--s3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ledger .main .wide { grid-column: 1 / -1; }
.field { display: grid; gap: 4px; font-weight: 700; font-size: var(--step--1); }
.field small { font-weight: 400; color: var(--ink-2); }
.input { width: 100%; min-height: 48px; border: 2px solid var(--ink); border-radius: 6px; background: var(--bg); color: var(--ink); font: inherit; font-weight: 400; padding: 8px 10px; }
.big-input .input { font-family: var(--font-mono); font-size: 1.35rem; min-height: 56px; }
.with-unit { position: relative; display: block; }
.with-unit > span { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-2); font-family: var(--font-mono); pointer-events: none; }
.with-unit.pct > span { left: auto; right: 10px; }
.with-unit .input { padding-left: 24px; }
.with-unit.pct .input { padding-left: 10px; padding-right: 26px; }
.grid2 { display: grid; gap: var(--s3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 360px) { .grid2, .ledger .main { grid-template-columns: minmax(0, 1fr); } }
.adjust { margin-top: var(--s4); border-top: 2px dashed var(--line-strong); padding-top: var(--s3); display: grid; gap: var(--s2); }
.adjust details { border: 2px solid var(--ink); border-radius: 6px; background: var(--bg); }
.adjust summary { cursor: pointer; padding: 10px 12px; font-weight: 700; min-height: 44px; display: flex; align-items: center; justify-content: space-between; list-style: none; }
.adjust summary::-webkit-details-marker { display: none; }
.adjust summary::after { content: "+"; font-family: var(--font-mono); font-size: 1.2rem; }
.adjust details[open] summary::after { content: "\2212"; }
.adjust details > div { padding: 0 12px 12px; display: grid; gap: var(--s3); }
.taxlines { display: grid; gap: var(--s3); }
.taxlines:empty { display: none; }
.note { font-size: var(--step--1); color: var(--ink-2); margin: var(--s3) 0 0; }

/* Where the price goes. */
.split { margin: 0 0 var(--s4); }
.split .barline { display: flex; height: 34px; border: 3px solid var(--ink); border-radius: 6px; overflow: hidden; background: var(--surface); }
.split .barline span { display: block; height: 100%; min-width: 0; }
.split ul { list-style: none; padding: 0; margin: var(--s2) 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--step--1); }
.split li::before { content: ""; display: inline-block; width: 12px; height: 12px; border: 2px solid var(--ink); margin-right: 6px; vertical-align: -1px; background: var(--c); }
.c-pay { --c: var(--ink-2); background: var(--ink-2); }
.c-agent { --c: var(--brand); background: var(--brand); }
.c-tax { --c: #d9822b; background: #d9822b; }
.c-fee { --c: #b9a99c; background: #b9a99c; }
.c-keep { --c: var(--accent); background: var(--accent); }

/* The receipt: the closing statement on paper with a torn edge. */
.section { padding: var(--s6) 0; }
.section h2 { font-size: clamp(1.6rem, 4.5vw, 2.4rem); text-transform: uppercase; margin: 0 0 var(--s3); line-height: 1.05; }
.sheet-head { display: flex; justify-content: space-between; align-items: end; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s4); }
.sheet-head h2 { margin: 0; }
.btn-ink { background: var(--ink); color: var(--bg); border: 3px solid var(--ink); font-weight: 700; min-height: 48px; padding-inline: var(--s4); border-radius: 6px; }
.receipt { --tear: 12px; position: relative; background: #fffdf9; color: #1c1a1f; border-inline: 3px solid var(--ink); padding: calc(var(--tear) + var(--s3)) var(--s4); max-width: 52rem; margin-inline: auto;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--tear) * 2) var(--tear) repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(var(--tear) * 2) var(--tear) repeat-x, linear-gradient(#000 0 0) center / 100% calc(100% - var(--tear) * 2) no-repeat;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--tear) * 2) var(--tear) repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(var(--tear) * 2) var(--tear) repeat-x, linear-gradient(#000 0 0) center / 100% calc(100% - var(--tear) * 2) no-repeat; }
.receipt .stamp { text-align: center; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--step--1); border-bottom: 2px dashed #8a7f78; padding-bottom: var(--s3); margin-bottom: var(--s3); color: #4f4540; }
.receipt table { width: 100%; border-collapse: collapse; }
.receipt th, .receipt td { padding: 8px 0; text-align: right; vertical-align: top; border-bottom: 1px dotted #b3a79e; }
.receipt th[scope="row"] { text-align: left; font-weight: 700; padding-right: var(--s3); }
.receipt th small { display: block; font-weight: 400; color: #5d534d; font-size: var(--step--1); }
.receipt thead th { font-family: var(--font-mono); font-weight: 400; color: #5d534d; font-size: var(--step--1); }
.receipt td { padding-left: var(--s3); white-space: nowrap; }
.receipt .total th, .receipt .total td { border-top: 3px double #1c1a1f; border-bottom: 0; font-size: var(--step-1); color: #155f36; padding-top: 12px; }
.receipt .total td { font-family: var(--font-display); }
@media (max-width: 520px) {
  .receipt { padding-inline: var(--s3); }
  .receipt table.multi thead { display: none; }
  .receipt table.multi tr { display: block; border-bottom: 1px dotted #b3a79e; padding: 6px 0; }
  .receipt table.multi th, .receipt table.multi td { display: flex; justify-content: space-between; border: 0; padding: 2px 0; }
  .receipt table.multi th { display: block; }
  .receipt table.multi td::before { content: attr(data-label); color: #5d534d; font-family: var(--font-body); }
}
.disclose-ink { color: var(--ink-2); font-size: var(--step--1); margin: var(--s3) auto 0; max-width: 52rem; }
.sources { font-size: var(--step--1); color: var(--ink-2); padding-left: 1.2rem; max-width: 52rem; margin: var(--s3) auto 0; }

/* The rest of the suite, as cards. */
.suite { background: var(--ink); color: var(--bg); }
.suite h2 { color: var(--bg); }
.cards { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.cards a { display: block; height: 100%; background: var(--bg); color: var(--ink); border: 3px solid var(--bg); border-radius: 8px; padding: var(--s4); text-decoration: none; box-shadow: 5px 5px 0 var(--brand); }
.cards a:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--brand); }
.cards b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; text-transform: uppercase; margin-bottom: 4px; }
.cards span { font-size: var(--step--1); color: var(--ink-2); }

.statelist { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--s2); margin-top: var(--s4); }
.statelist a { display: block; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 6px; background: var(--surface); text-decoration: none; font-weight: 700; color: var(--ink); min-height: 44px; }
.statelist a:hover { background: var(--brand); color: var(--brand-ink); }
.narrow { max-width: 46rem; }
.guide h3 { font-size: 1.2rem; text-transform: uppercase; margin: var(--s5) 0 var(--s2); }
.guide p, .guide li { max-width: 68ch; }
.ratelist { display: grid; gap: var(--s4); padding-left: 1.2rem; }
.ratelist blockquote { margin: var(--s2) 0 0; padding-left: var(--s3); border-left: 3px solid var(--accent); color: var(--ink-2); font-size: var(--step--1); }
.ratestrip { margin: var(--s3) 0 0; padding: 10px 14px; background: var(--surface); border: 2px solid var(--ink); border-left: 10px solid var(--brand); border-radius: 6px; max-width: 60ch; font-size: var(--step--1); }

/* The commission grid. */
.grid-wrap { overflow-x: auto; max-width: 100%; }
.grid-table { border-collapse: collapse; width: 100%; min-width: 0; background: var(--surface); border: 3px solid var(--ink); }
.grid-table th, .grid-table td { border: 1px solid var(--line-strong); padding: 8px 6px; text-align: right; font-size: var(--step--1); }
.grid-table thead th, .grid-table tbody th { font-family: var(--font-mono); font-weight: 400; background: var(--bg); text-align: center; }
.grid-table td.on { background: var(--brand); color: var(--brand-ink); font-weight: 700; }
.gain { background: var(--brand-soft); padding: var(--s3) var(--s4); border-radius: 6px; border: 2px solid var(--ink); }
.facts { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: var(--s4) 0; }
.facts div { border: 3px solid var(--ink); border-radius: 8px; background: var(--surface); padding: var(--s3) var(--s4); }
.facts b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.8rem; }

:root[data-theme="dark"] .sign .btn, :root[data-theme="dark"] .ledger, :root[data-theme="dark"] .input { border-color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bar, :root:not([data-theme="light"]) .tabs { background: #0d1012; } }
:root[data-theme="dark"] .bar, :root[data-theme="dark"] .tabs { background: #0d1012; }
:root[data-theme="dark"] .bar, :root[data-theme="dark"] .brand { color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand, :root:not([data-theme="light"]) .tabs a, :root:not([data-theme="light"]) .bar .theme-toggle { color: var(--ink); } :root:not([data-theme="light"]) .suite { background: #0d1012; color: var(--ink); } :root:not([data-theme="light"]) .suite h2 { color: var(--ink); } }
:root[data-theme="dark"] .tabs a, :root[data-theme="dark"] .bar .theme-toggle { color: var(--ink); }
:root[data-theme="dark"] .suite { background: #0d1012; color: var(--ink); }
:root[data-theme="dark"] .suite h2 { color: var(--ink); }

@media print {
  .bar, .tabs, .skip-link, .ledger, .sign .btn, .sign .seeall, .btn-ink, .suite, #states, #rates, .guide, footer, .theme-toggle, .post { display: none !important; }
  .lot { padding: 0; background: none; }
  .sign { box-shadow: none; border-width: 1px; background: #fff; color: #000; max-width: none; }
  .receipt { -webkit-mask: none; mask: none; border: 1px solid #000; }
  body { background: #fff; color: #000; }
}

/* Phone fixes: full-width money inputs, a quieter theme button, no duplicate rate lists. */
.bar .theme-toggle { background: transparent; border: 2px solid currentColor; border-radius: 6px; }
@media (max-width: 520px) {
  .ledger .main { grid-template-columns: minmax(0, 1fr); }
  .big-input .input { font-size: 1.2rem; }
  html[data-state=""] .pitch .ratestrip { display: none; }
  .pitch .promise { font-size: var(--step-0); }
}
html:not([data-state=""]) #sources { display: none; }