/* Paid Up's own parts on top of the kit: the state picker, the facts strip, numbered steps with form
   labels, and a letter that prints on its own. */
.site-header nav a { margin-inline: var(--s2); }
.disclose { margin: 0; }
.state-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s2); }
.state-btn {
  display: grid; justify-items: center; gap: var(--s1); padding: var(--s4) var(--s2);
  background: var(--brand); color: var(--brand-ink); border-radius: var(--radius);
  text-decoration: none; border: 3px solid var(--brand);
}
.state-btn b { font: 700 var(--step-3)/1 var(--font-display); letter-spacing: 0.02em; }
.state-btn span { font-size: var(--step--1); }
.state-btn small { font-size: 0.75rem; opacity: 0.85; }
.state-btn:hover, .state-btn:focus-visible { background: var(--bg); color: var(--brand-text); border-color: var(--accent); text-decoration: underline; }
.state-grid + p { margin-top: var(--s4); }
.section.after-hero { padding-top: var(--s5); }
.jump { margin-top: var(--s4); }
@media (max-width: 560px) {
  .state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .state-grid .state-btn:last-child { grid-column: span 2; }
}
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: var(--s3) 0 0; border: 3px solid var(--ink); border-radius: var(--radius); }
.facts div { padding: var(--s3); border-inline-start: 1px solid var(--line-strong); }
.facts div:first-child { border-inline-start: 0; }
.facts dt { font: 700 var(--step--1)/1.2 var(--font-body); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
.facts dd { margin: var(--s1) 0 0; font-weight: 700; }
@media (max-width: 560px) {
  .facts { grid-template-columns: 1fr; }
  .facts div { border-inline-start: 0; border-top: 1px solid var(--line-strong); }
  .facts div:first-child { border-top: 0; }
}
.big-steps > li h3 { font: 700 var(--step-1)/1.25 var(--font-display); margin: 0 0 var(--s1); }
.big-steps > li p { margin: 0 0 var(--s4); }
.form-tag {
  display: inline-block; vertical-align: middle; margin-inline-start: var(--s1); padding: 0.1em 0.5em;
  font: 700 var(--step--1)/1.4 var(--font-body); border: 2px solid var(--accent); border-radius: var(--radius-s);
  color: var(--ink); background: color-mix(in oklab, var(--accent) 16%, var(--bg));
}
.src { font-size: var(--step--1); }
.cta-box { margin: var(--s6) 0; padding: var(--s5); border: 3px solid var(--brand); border-radius: var(--radius); background: var(--brand-soft); }
.cta-box h2 { margin-top: 0; }
.sources { padding-inline-start: 1.2em; }
.sources li { margin-bottom: var(--s2); overflow-wrap: anywhere; }
.letter-flow { display: grid; gap: var(--s5); }
.letter-form { display: grid; gap: var(--s3); }
.letter-form textarea { resize: vertical; font: inherit; }
.letter { background: #ffffff; color: #14212b; padding: var(--s6) var(--s5); border: 1px solid var(--line-strong); border-radius: var(--radius-s); font-size: 1rem; line-height: 1.55; }
.letter p { margin: 0 0 var(--s3); white-space: pre-line; }
.letter .l-date { text-align: end; }
.letter .l-re { font-weight: 700; }
.letter .l-sign { margin-top: var(--s5); }
.letter .l-name { margin-top: var(--s6); font-weight: 700; margin-bottom: 0; }
@media print {
  .no-print, .site-header, footer, .skip-link { display: none !important; }
  body { background: #ffffff; }
  .letter { border: 0; padding: 0; }
}
.steps.big-steps, .section .steps { grid-template-columns: minmax(0, 1fr); }
.steps .form-tag { color: var(--ink); }
.notice.disclose { color: var(--ink); }
@media (min-width: 640px) {
  .letter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .letter-form .field:last-child { grid-column: span 2; }
}
.answer { font-size: var(--step-1); max-width: 62ch; }
.calc { display: grid; gap: var(--s4); margin-bottom: var(--s5); }
.calc-in { display: grid; gap: var(--s3); }
.calc-out { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2) var(--s4); margin: 0; }
.calc-out dt { color: var(--ink-2); }
.calc-out dd { margin: 0; font-weight: 700; text-align: end; }
.faq h3 { font: 700 var(--step-0)/1.3 var(--font-display); margin: var(--s4) 0 var(--s1); }
.faq p { margin: 0; }
.guide-list { padding-inline-start: 1.2em; }
.guide-list li { margin-bottom: var(--s2); }
@media (min-width: 640px) { .calc-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .calc-out { grid-template-columns: minmax(0, 1fr); } .calc-out dd { text-align: start; margin-bottom: var(--s2); } }