/* AnnualDesk page CSS: only what the kit lacks. Tokens, grid, type and buttons come from /assets/system.css. */
.ui { --fx-bg: #ffffff; --fx-surface: #eef1ef; --fx-ink: #152131; --fx-muted: #4b5867; --fx-accent: #1f3a5f; --fx-accent-ink: #ffffff; --ui-font: var(--font-text); }
.rows__value, .calc__list li, .calc__fee, .calc__date, .ui-title, .bill { font-variant-numeric: normal; font-feature-settings: normal; }

/* nav: the language word leaves the bar on a phone (it is in the footer) */
@media (max-width: 639px) { .nav__actions > .nav__link { display: none; } }

/* the hero: the photograph with our order card floating on its lower left */
.hero-card { width: min(340px, calc(100% - 48px)); padding: 0; background: none; border: 0; }
.hero-card .ui-checks { width: 100%; background: #ffffff; border-radius: var(--r-md); padding: var(--s-5); box-shadow: 0 18px 40px rgba(21, 33, 49, .28); }
.hero-card .ui-check.is-done .ui-check__label::after { transform: scaleX(0); }
.hero-card .ui-check.is-done .ui-check__label { color: #152131; }
@media (max-width: 639px) { .hero-card { width: calc(100% - 32px); } }

/* the five states: rows on the left, the state's landscape on the right */
.rows .rows__name small { display: block; font-weight: 400; color: var(--muted); font-size: var(--t-small); line-height: 1.5; margin-top: 2px; }
.rows--plain .rows__name { font-weight: 400; }
.rows--compact > li { padding-block: var(--s-3); }
.rows--links > li { padding: 0; }
.rows--links .rows__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-5); padding-block: var(--s-5); color: inherit; text-decoration: none; }
.rows--links > li:first-child .rows__row { padding-top: 0; }
.rows--links .rows__row:hover .rows__name { color: var(--accent); }
#states [data-peek-to].is-on .rows__name { color: var(--accent); }
.states-frame { position: relative; border-radius: var(--r-lg); overflow: hidden; height: 520px; }
.states-frame .frame__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.states-frame .frame__img[hidden] { display: none; }
@media (max-width: 1023px) { .states-frame { height: auto; aspect-ratio: 3 / 2; margin-top: var(--s-7); } }
.fine { margin-top: var(--s-6); max-width: 56ch; }

/* the price section's sample bill */
.prices-visual { background: var(--surface); border-radius: var(--r-lg); display: grid; place-items: center; padding: var(--s-9) var(--s-7); }
.bill { width: min(420px, 100%); background: #ffffff; color: #152131; border-radius: var(--r-md); padding: var(--s-7); box-shadow: 0 18px 40px rgba(21, 33, 49, .16); display: grid; gap: var(--s-4); font-size: 16px; line-height: 1.5; }
.bill__head { display: flex; justify-content: space-between; margin: 0; font-weight: 600; }
.bill__head span:last-child { font-weight: 400; color: #4b5867; }
.bill__rows { list-style: none; margin: 0; padding: 0; display: grid; }
.bill__rows li { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; border-top: 1px solid rgba(21, 33, 49, .12); }
.bill__rows li span:last-child { white-space: nowrap; }
.bill__total { font-weight: 600; font-size: 18px; color: #1f3a5f; }
.bill__note { margin: 0; font-size: 14px; color: #4b5867; }
@media (max-width: 639px) { .prices-visual { padding: var(--s-7) var(--s-4); margin-top: var(--s-7); } .bill { padding: var(--s-5); } }

/* the pinned chapter's third picture: the email we send */
.mo-pc__visual--ui { background: var(--surface); display: grid; place-items: center; aspect-ratio: 4 / 3; padding: var(--s-6); }
.mail { width: min(420px, 100%); background: #ffffff; color: #152131; border-radius: var(--r-md); padding: var(--s-6); display: grid; gap: var(--s-3); font-size: 15px; line-height: 1.5; box-shadow: 0 18px 40px rgba(21, 33, 49, .14); }
.mail__head { display: flex; justify-content: space-between; gap: var(--s-4); font-weight: 600; }
.mail__time { font-weight: 400; color: #4b5867; }
.mail__subject, .mail__body { margin: 0; }
.mail__subject { font-weight: 600; }
.mail__file { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); background: #eef1ef; border-radius: var(--r-sm); font-size: 14px; }
.mail__file svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
@media (max-width: 639px) { .mo-pc__visual--ui { aspect-ratio: auto; } }

/* the deadline calculator, in the oxblood band */
.calc { display: grid; gap: var(--s-7); margin-top: var(--s-7); }
.calc__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.calc__fields .field:first-child { grid-column: 1 / -1; }
.ground-inverse .field :is(input, select) { background: var(--p-inv-surface); color: var(--ink); border-color: color-mix(in oklab, var(--ink) 35%, transparent); }

/* inner pages read as documents: sections take their content's height */
main > .section.section--auto { min-height: 0; height: auto; padding-block: var(--s-9); }
main > .section.section--auto.page-head { padding-top: calc(var(--nav) + var(--s-9)); padding-bottom: var(--s-7); }
main > .section.section--auto.section--article { padding-top: var(--s-5); }
.page-head h1 { font: var(--display-weight) var(--t-h2)/1.05 var(--font-display); letter-spacing: var(--display-tracking); margin: 0 0 var(--s-5); max-width: 18ch; color: var(--ink); }
.page-head .t-lead { max-width: 52ch; }
.page-head .btn-row { margin-top: var(--s-7); }
.crumbs { font-size: var(--t-small); color: var(--muted); margin: 0 0 var(--s-5); }
.crumbs a { color: inherit; }
.glance { background: var(--surface); border-radius: var(--r-lg); padding: var(--s-7); display: grid; gap: var(--s-4); }
.glance__h { font: 500 var(--t-card)/1.3 var(--font-display); margin: 0; }
.glance p { margin: 0; }
.side { position: sticky; top: calc(var(--nav) + var(--s-6)); }
.prose { font-size: 17px; line-height: 1.65; max-width: 68ch; }
.prose h2 { font: 500 var(--t-card)/1.3 var(--font-display); margin: var(--s-8) 0 var(--s-4); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol { margin: 0 0 var(--s-5); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li { margin-bottom: var(--s-2); }
.links-row { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); }
.table { width: 100%; border-collapse: collapse; margin: 0 0 var(--s-6); font-size: 16px; }
.table th { text-align: left; font-weight: 500; color: var(--muted); font-size: var(--t-small); padding: 0 var(--s-4) var(--s-3) 0; }
.table td { padding: var(--s-3) var(--s-4) var(--s-3) 0; border-top: 1px solid var(--line); vertical-align: top; }
.table td:last-child, .table th:last-child { padding-right: 0; }
@media (max-width: 1023px) { .side { position: static; margin-top: var(--s-8); } }

/* a state page's head: its landscape with the at-a-glance card over the lower edge */
.state-hero { position: relative; }
.state-hero__photo { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; }
.state-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.glance--float { position: relative; margin: -96px var(--s-6) 0; background: #ffffff; box-shadow: 0 18px 40px rgba(21, 33, 49, .16); }
@media (max-width: 1023px) { .state-hero { margin-top: var(--s-8); } .glance--float { margin: -48px var(--s-4) 0; } }

/* the order form */
.order-form { background: var(--surface); border-radius: var(--r-lg); padding: var(--s-7); }
.order-form .field--check, .order-form .field:has(textarea), .order-form .btn-row, .order-form .form__status, .order-form > p { grid-column: 1 / -1; }
.order-steps { margin-top: var(--s-7); }
.field--check .check { display: grid; grid-template-columns: 20px 1fr; gap: var(--s-3); font-weight: 400; font-size: 15px; line-height: 1.5; align-items: start; }
.field--check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--p-action); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 639px) { .order-form { padding: var(--s-5); } }
@media (max-width: 639px) {
  .hero-card { display: none; }
  .states-frame { display: none; }
}

/* closing band: one plain action, sized to its words, never squeezed by the band's height */
.closing__cta > .close-btn { flex: none; align-self: flex-start; height: 60px; padding-inline: 30px 26px; gap: 14px;
  font: 500 19px/1 var(--font-display); letter-spacing: -0.01em; border-radius: 999px; }
.closing__cta > .close-btn .m-arrow { width: 15px; height: 15px; stroke-width: 1.6; }
.ground-inverse .closing__cta > .close-btn { background: var(--p-inv-ink); color: var(--p-accent); }
@media (hover: hover) and (pointer: fine) { .ground-inverse .closing__cta > .close-btn:hover { background: #fff; } }
.closing__cta > .close-btn:focus-visible { outline: 2px solid var(--p-inv-ink); outline-offset: 3px; }
@media (max-width: 639px) { .closing__cta > .close-btn { align-self: stretch; justify-content: space-between; height: 54px; font-size: 18px; } }

/* wide tables in guides: smaller type on a phone, and the table scrolls inside the prose column rather than the page */
@media (max-width: 639px) {
  .prose .table { font-size: 15px; }
  .prose .table:has(th:nth-child(4)) { display: block; overflow-x: auto; }
  .prose .table:has(th:nth-child(4)) :is(td, th) { min-width: 7.5em; }
}
.table .cell-note { display: block; margin-top: 4px; font-size: var(--t-small); color: var(--muted); line-height: 1.4; }

/* ---------------------------------------------------------------- State House direction (chosen 2026-11-12) */
h1 { font-variation-settings: "opsz" 72; }
.hero__kicker .dot { background: #c9a24a; }

/* hero: one large capitol, a second one tucked over its corner */
.a-hero { overflow: visible; background: none; }
.a-hero > img { border-radius: 2px; }
.a-inset { position: absolute; left: -56px; bottom: -36px; width: 44%; margin: 0; padding: 8px; background: var(--p-bg); }
.a-inset img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 1023px) { .a-inset { left: 12px; bottom: -28px; width: 46%; } }

/* the five state houses: one big, four small */
.a-caps { padding-block: var(--s-10) var(--s-9); }
.caps-grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-5); margin-top: var(--s-7); }
.caps-small { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.cap { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.cap__img { display: block; overflow: hidden; background: var(--p-surface); }
.cap__img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.cap--big .cap__img img { aspect-ratio: 16 / 11; }
.cap__name { margin-top: var(--s-3); font: 500 20px/1.2 var(--font-display); }
.cap--big .cap__name { font-size: 30px; }
.cap__line { color: var(--p-muted); font-size: 14px; margin-top: 2px; }
@media (hover: hover) { .cap:hover .cap__img img { transform: scale(1.03); } .cap:hover .cap__name { text-decoration: underline; text-underline-offset: 4px; } }
.cap:focus-visible { outline: 2px solid var(--p-action); outline-offset: 4px; }
@media (max-width: 1023px) { .caps-grid { grid-template-columns: 1fr; } }

/* a quiet band before the questions */
.a-band { background: var(--p-surface); padding-block: var(--s-9); }
.a-band .wrap.a-band__inner { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-8); align-items: center; }
.a-band__inner img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.a-band__line { font: 500 clamp(26px, 2vw + 12px, 40px)/1.15 var(--font-display); max-width: 18ch; margin: 0; }
@media (max-width: 1023px) { .a-band__inner { grid-template-columns: 1fr; gap: var(--s-6); } }


/* ---------- calls to order (conversion) ---------- */
.cta-box { background: var(--surface); padding: var(--s-6) var(--s-6) var(--s-5); margin: var(--s-7) 0; display: grid; gap: var(--s-4); justify-items: start; border-radius: 2px; }
.prose .cta-box p, .prose .cta-box ul { margin: 0; }
.cta-box__h { font: 500 22px/1.25 var(--font-display); color: var(--ink); letter-spacing: -0.01em; }
.cta-box > p:not(.cta-box__h) { max-width: 58ch; }
.trust, .prose .trust { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: 14px; line-height: 1.4; color: var(--ink); }
.trust li, .prose .trust li { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.trust svg { width: 15px; height: 15px; flex: none; color: var(--p-action); }
.ground-inverse .trust svg { color: var(--p-gold); }
.trust--long { flex-direction: column; gap: var(--s-3); margin-top: var(--s-5); font-size: 15px; }
.trust--long li { align-items: flex-start; }
.trust--long svg { margin-top: 3px; }
.side-cta .trust { flex-direction: column; gap: var(--s-2); }
.page-head .trust { margin-top: var(--s-5); }
.countdown { margin: var(--s-5) 0 0; font-weight: 600; color: var(--ink); max-width: 46ch; }
.pick, .prose .pick { list-style: none; padding: 0; margin: 0; width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--s-2); }
.prose .pick li { margin: 0; }
.pick__a { display: flex; justify-content: space-between; gap: var(--s-4); padding: 14px 16px; background: var(--bg); color: var(--ink); text-decoration: none; font-weight: 500; border-radius: 2px; transition: background .15s, color .15s; }
.pick__a span:last-child { font-variant-numeric: tabular-nums; }
.pick__a:hover, .pick__a:focus-visible { background: var(--p-action); color: #fff; }
.calc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-5); }
.calc-panel .btn--primary { background: var(--p-action); color: #fff; }
.calc-panel .btn--primary:hover { background: #152131; }

/* ---------- GEO pages: byline, 50-state table, blog list ---------- */
.byline { margin: var(--s-4) 0 0; font-size: 14px; color: var(--muted); }
.byline .link { color: var(--ink); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--s-4) 0; }
.table--wide { min-width: 1080px; font-size: 14px; }
.table--wide th[scope="row"] { white-space: nowrap; }
.table--wide td, .table--wide th { vertical-align: top; }
.table--wide tr:target { background: var(--surface); }
.pill-link { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--p-action); text-decoration: none; white-space: nowrap; }
.pill-link:hover { text-decoration: underline; }
.post-list, .prose .post-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.prose .post-list li { margin: 0; }
.post-list__a { display: grid; gap: 4px; padding: var(--s-4) var(--s-5); background: var(--surface); color: var(--ink); text-decoration: none; border-radius: 2px; transition: background .15s; }
.post-list__a:hover { background: #d3dbd7; }
.post-list__h { font: 500 20px/1.3 var(--font-display); }
.post-list__d { font-size: 15px; line-height: 1.5; }
.post-list__m { font-size: 13px; color: var(--muted); }
.table-scroll .table tbody th[scope="row"], .table-scroll .table td { vertical-align: top; padding-top: 14px; }
.table-scroll .table td:nth-child(2) { white-space: normal; }