/* 1099Calc — Apple-clean design system (prototype) */

:root {
  --ink:        #0A0A0A;
  --ink-soft:   #27272A;
  --muted:      #71717A;
  --line:       #E4E4E7;
  --line-soft:  #F4F4F5;
  --bg:         #FAFAFA;
  --surface:    #F4F4F5;
  --green:      #16A34A;
  --green-ink:  #15803D;
  --green-mist: rgba(22,163,74,0.10);
  --radius-lg:  20px;
  --radius-md:  12px;
  --radius-sm:  8px;
  --shadow-sm:  0 1px 2px rgba(10,10,10,.04), 0 1px 1px rgba(10,10,10,.03);
  --shadow-md:  0 8px 24px rgba(10,10,10,.06), 0 2px 6px rgba(10,10,10,.04);
  --font:       -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-num:   "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --max:        1120px;
  --gutter:     clamp(20px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Atmosphere: two faint radial washes behind all content. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(22,163,74,0.05), transparent 380px),
    radial-gradient(circle at 88% 18%, rgba(10,10,10,0.025), transparent 460px);
}
main, .foot { position: relative; z-index: 1; }

h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.025em; color: var(--ink); margin: 0; }
h1 { font-weight: 800; font-size: clamp(40px, 5.5vw, 72px); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
h2 { font-weight: 700; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; }
h3 { font-weight: 700; font-size: 18px; line-height: 1.3; }

p { margin: 0; }

a { color: var(--green-ink); text-decoration: none; }
a:hover { color: var(--green); }

/* Inline jargon gloss — native <abbr title> + dotted underline + help cursor.
   Browsers expose the title on mouse hover and to screen readers; mobile users
   long-press to reveal. Kept native (no JS popover) for accessibility + zero LCP cost. */
abbr[title] {
  text-decoration: underline dotted;
  -webkit-text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--muted);
  cursor: help;
  /* Inherit weight/color from parent — wrapped term shouldn't shout */
}
/* Inside an anchor (e.g., "safe harbor" inside a TOC card link), let the link color win */
a abbr[title] { text-decoration-color: currentColor; }

.skip-link {
  position: absolute; left: -9999px; top: -9999px;
  background: var(--ink); color: #fff;
  padding: 10px 16px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600;
  z-index: 100;
}
.skip-link:focus { left: 16px; top: 16px; color: #fff; }

:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }

/* ---------- nav ---------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--gutter);
  background: rgba(255,255,255,0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line-soft);
}

.nav__brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.nav__mark { display: inline-block; width: 28px; height: 28px; border-radius: 8px; overflow: hidden; }
.nav__mark svg { display: block; width: 100%; height: 100%; }
.nav__name { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.nav__name--accent { color: var(--green); }

.nav__links { display: flex; gap: 20px; }
.nav__links a { color: var(--ink-soft); font-size: 14px; font-weight: 500; padding: 10px 6px; }
.nav__links a:hover { color: var(--ink); }
@media (max-width: 600px) { .nav__links { display: none; } }

/* ---------- layout ---------- */

main { display: block; }

.hero,
.calc,
.explain,
.cluster {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---------- hero ---------- */

.hero {
  padding-top: clamp(72px, 10vw, 144px);
  padding-bottom: clamp(48px, 6vw, 80px);
  text-align: center;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 600;
  color: var(--green);
  margin-bottom: 20px;
}

.hero h1 { max-width: 18ch; margin-left: auto; margin-right: auto; }

.lede {
  max-width: 620px;
  margin: 24px auto 0;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- calculator ---------- */

.calc {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: clamp(80px, 10vw, 128px);
}
.calc__inputs  { order: 2; }
.calc__result  { order: 1; }
@media (min-width: 900px) {
  .calc { grid-template-columns: 1.1fr 0.9fr; gap: 32px; align-items: start; }
  .calc__inputs { order: 1; }
  .calc__result { order: 2; }
}

.calc__inputs,
.calc__result {
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 40px);
}
.calc__inputs {
  background: var(--surface);
  border: 1px solid var(--line);
}
.calc__result {
  background: #fff;
  border: 1px solid var(--line);
}

.calc__title { margin-bottom: 28px; }

.field { margin-bottom: 20px; }
.field:last-child { margin-bottom: 0; }

.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 8px;
  letter-spacing: -0.005em;
}

.optional {
  font-weight: 400;
  color: var(--muted);
  font-size: 12px;
  margin-left: 4px;
}

.input-money,
select,
.field input[type="number"] {
  width: 100%;
  font-family: var(--font);
  font-size: 17px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* Strip browser-default number-input spinners — they look noisy on mobile and aren't useful on touch. */
input[type="number"] {
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input-money {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
}
.input-money span { color: var(--muted); font-weight: 500; }
.input-money input,
.input-money input[type="number"] {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 12px 0;
  outline: none;
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  width: 100%;
}

select { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230A0A0A' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

.input-money:focus-within,
select:focus-visible,
.field > input:focus-visible {
  border-color: var(--green);
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
/* Inner money-input keeps no inner focus ring — wrapper owns the focus visual. */
.input-money input:focus-visible { outline: none; box-shadow: none; }
/* Mouse focus on inputs keeps the soft ring without harsh outline */
.input-money:focus-within:not(:has(:focus-visible)),
select:focus:not(:focus-visible),
.field > input:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 0 0 0 4px rgba(22,163,74,0.12);
}
/* Money-wrapper owns the soft ring; inner input never shows its own. */
.input-money input:focus:not(:focus-visible) { box-shadow: none; }

.hint { margin-top: 6px; font-size: 12px; color: var(--muted); }

/* ---------- result card ---------- */

.calc__result { position: sticky; top: 80px; }

.result__label {
  font-size: 13px;
  letter-spacing: -0.005em;
  color: var(--muted);
  font-weight: 600;
}

.result__total {
  font-family: var(--font-num);
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 700;
  letter-spacing: -0.035em;
  margin: 8px 0 4px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.result__currency { color: var(--ink); font-weight: 600; font-size: 0.62em; letter-spacing: -0.02em; }
#result-total { transition: color .12s ease; }
#result-total.is-tweening { color: var(--green-ink); }

.result__sub {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 28px;
}

.breakdown__group-label { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 12px; }
.breakdown { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.breakdown > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.breakdown dt { color: var(--ink-soft); font-size: 14px; }
.breakdown dd { margin: 0; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 500; font-size: 15px; color: var(--ink-soft); }

.quarterly {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.quarterly__label { font-size: 14px; color: var(--ink); font-weight: 600; }
.quarterly__value {
  margin: 0;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--green);
  line-height: 1;
}

.schedule { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.schedule__title { font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 14px; }
.schedule__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.schedule__list li { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--ink-soft); }
.schedule__list li span:last-child { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }

.result__footnote { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--muted); }

/* ---------- explainer ---------- */

.explain {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding-top: clamp(64px, 8vw, 96px);
  padding-bottom: clamp(64px, 8vw, 96px);
  border-top: 1px solid var(--line-soft);
}
@media (min-width: 800px) { .explain { grid-template-columns: 1fr 1fr; gap: 64px; } }
.explain__col p { margin-top: 16px; color: var(--ink-soft); line-height: 1.6; max-width: 56ch; }

/* ---------- cluster ---------- */

.cluster {
  padding-top: clamp(64px, 8vw, 96px);
  padding-bottom: clamp(96px, 12vw, 144px);
  border-top: 1px solid var(--line-soft);
}
.cluster h2 { margin-bottom: 32px; }
.cluster__grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.cluster__grid a {
  display: block;
  padding: 24px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--ink);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cluster__grid a:hover { border-color: var(--green); transform: translateY(-1px); }
.cluster__grid h3 { margin-bottom: 6px; }
.cluster__grid p { font-size: 14px; color: var(--muted); }

/* ---------- secondary-calcs grid: 3×2 with break-even featured ---------- */

.more__grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  grid-template-areas: "be" "qe" "md" "ho" "qbi";
}
.more__grid > li[data-area="be"]  { grid-area: be; }
.more__grid > li[data-area="qe"]  { grid-area: qe; }
.more__grid > li[data-area="md"]  { grid-area: md; }
.more__grid > li[data-area="ho"]  { grid-area: ho; }
.more__grid > li[data-area="qbi"] { grid-area: qbi; }
.more__grid > li > a { display: block; height: 100%; }

@media (min-width: 640px) {
  .more__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "be be"
      "qe md"
      "ho qbi";
  }
}
@media (min-width: 960px) {
  .more__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-areas:
      "be qe md"
      "be ho qbi";
  }
}

.more__grid > li.featured > a {
  background: linear-gradient(180deg, var(--green-mist), var(--bg));
  border-color: var(--green);
  padding: clamp(24px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: flex-start;
}
.more__grid > li.featured > a:hover { border-color: var(--green-ink); box-shadow: var(--shadow-sm); }
.more__grid > li.featured h3 {
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.more__grid > li.featured p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 36ch;
}
.more__badge {
  align-self: flex-start;
  background: var(--green);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}

/* ---------- guide / faq / more (shared head) ---------- */

.guide,
.faq,
.more {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  padding-top: clamp(64px, 8vw, 96px);
  padding-bottom: clamp(64px, 8vw, 96px);
  border-top: 1px solid var(--line-soft);
}

.guide__head { text-align: center; max-width: 720px; margin: 0 auto clamp(40px, 5vw, 64px); }
.guide__head .eyebrow { color: var(--green); margin-bottom: 12px; }
.guide__head h2 { margin-bottom: 16px; }
.guide__head .lede { margin: 0 auto; color: var(--muted); font-size: clamp(16px, 1.3vw, 18px); }

.guide__toc { margin-bottom: clamp(48px, 6vw, 72px); }

/* ---------- guide articles ---------- */

.guide-article {
  padding: clamp(40px, 5vw, 64px) 0;
  border-top: 1px solid var(--line-soft);
  max-width: 720px;
  margin: 0 auto;
}
.guide-article:first-of-type { border-top: 1px solid var(--line); }
.guide-article h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}
.guide-article p { color: var(--ink-soft); line-height: 1.65; max-width: 64ch; margin-bottom: 16px; }
.guide-article p:last-child { margin-bottom: 0; }
.guide-article ul {
  margin: 16px 0;
  padding-left: 22px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.guide-article ul li { margin-bottom: 10px; }
.guide-article ul li:last-child { margin-bottom: 0; }
.guide-article strong { color: var(--ink); font-weight: 700; }

/* ---------- mini calcs ---------- */

.calc-mini {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 32px);
  margin-bottom: 20px;
  scroll-margin-top: 80px;
}
.calc-mini:last-of-type { margin-bottom: 0; }
.calc-mini h3 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.calc-mini__sub {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 20px;
  max-width: 64ch;
}
.calc-mini__sub strong { color: var(--ink); font-weight: 700; }
.calc-mini__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: end;
}
@media (min-width: 700px) {
  .calc-mini__grid {
    grid-template-columns: 1fr auto;
    gap: 24px;
  }
  #calc-qbi .calc-mini__grid {
    grid-template-columns: 1fr 1fr auto;
  }
}
.calc-mini__result {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 20px;
  text-align: right;
  min-width: 160px;
}
.calc-mini__result .result__label { font-size: 11px; margin-bottom: 4px; }
.calc-mini__result .quarterly__value { font-size: 28px; line-height: 1; }
.calc-mini__schedule {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}
.calc-mini__hint {
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  max-width: 64ch;
}
.calc-mini__hint em { color: var(--ink-soft); font-style: normal; font-weight: 600; }
.calc-mini__hint--warn { color: var(--green-ink); font-weight: 500; }

/* ---------- faq ---------- */

.faq__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 36px);
  counter-reset: faq;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.faq__item {
  padding-bottom: clamp(28px, 3vw, 36px);
  border-bottom: 1px solid var(--line-soft);
}
.faq__item:last-child { border-bottom: none; padding-bottom: 0; }
.faq__item h3 {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.5vw, 19px);
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 10px;
  letter-spacing: -0.015em;
}
.faq__item p {
  color: var(--ink-soft);
  line-height: 1.6;
  font-size: 15px;
  max-width: 64ch;
}
.faq__item em { color: var(--ink-soft); font-style: italic; }

/* ---------- A2HS chip (mobile only) ---------- */

.a2hs {
  position: fixed;
  bottom: max(16px, env(safe-area-inset-bottom));
  left: 16px;
  right: 16px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 16px;
  padding: 12px 14px 12px 12px;
  display: none;
  align-items: center;
  gap: 12px;
  box-shadow: 0 12px 32px rgba(10,10,10,0.18), 0 2px 6px rgba(10,10,10,0.10);
  z-index: 80;
  animation: a2hsRise .35s ease-out;
}
.a2hs:not([hidden]) { display: flex; }
@media (min-width: 700px) { .a2hs:not([hidden]) { display: none; } }
@keyframes a2hsRise {
  from { transform: translateY(140%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.a2hs__mark {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border-radius: 8px;
  overflow: hidden;
  display: block;
  background: var(--bg);
}
.a2hs__mark svg { display: block; width: 100%; height: 100%; }
.a2hs__body { flex: 1; min-width: 0; line-height: 1.3; }
.a2hs__title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
  color: var(--bg);
}
.a2hs__hint {
  font-size: 12px;
  color: rgba(250,250,250,0.78);
  line-height: 1.4;
}
.a2hs__hint svg { vertical-align: -3px; margin: 0 1px; }
.a2hs__cta {
  flex: 0 0 auto;
  background: var(--green);
  color: var(--bg);
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  font: 600 13px/1 var(--font-display);
  cursor: pointer;
  letter-spacing: -0.01em;
}
.a2hs__cta:active { background: var(--green-ink); }
.a2hs__close {
  position: absolute;
  top: 4px; right: 6px;
  background: transparent;
  border: none;
  color: rgba(250,250,250,0.6);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
}
.a2hs__close:hover { color: var(--bg); }

/* ---------- mobile polish ---------- */

@media (max-width: 600px) {
  .nav { padding: 10px var(--gutter); }
  .nav__name { font-size: 16px; }
  .hero { padding-top: clamp(48px, 12vw, 88px); padding-bottom: clamp(32px, 6vw, 56px); }
  .hero h1 { max-width: 14ch; }
  .calc__inputs, .calc__result { padding: 22px; }
  .calc__result { position: static; }
  .calc-mini { padding: 18px; }
  .calc-mini__result { width: 100%; text-align: left; }
  .guide-article ul { padding-left: 18px; }
  body { font-size: 16px; }
  .lede { font-size: 16px; }
  /* Leave room for the A2HS chip */
  main { padding-bottom: 80px; }
}

/* ---------- footer ---------- */

.foot {
  border-top: 1px solid var(--line-soft);
  padding: 32px var(--gutter);
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

/* ─── W-2 vs 1099 comparison panel ────────────────────────────────────────── */
.compare-wrap {
  max-width: var(--max);
  margin: 0 auto clamp(80px, 10vw, 128px);
  padding: 0 var(--gutter);
}
.compare {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--radius-lg);
  padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 56px);
}
.compare::after {
  content: "";
  position: absolute;
  right: -100px; top: -100px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(22,163,74,0.18), transparent 70%);
  pointer-events: none;
}
.compare__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 700;
  color: #4ADE80;
  margin-bottom: 12px;
}
.compare__h {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--bg);
  margin: 0 0 12px;
  text-wrap: balance;
  max-width: 22ch;
}
.compare__h-base { font-variant-numeric: tabular-nums; }
.compare__h-equiv {
  font-style: normal;
  color: #4ADE80;
  font-variant-numeric: tabular-nums;
}
.compare__lede {
  color: rgba(250,250,250,0.7);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.55;
  max-width: 56ch;
  margin: 0 0 clamp(28px, 4vw, 40px);
}
.compare__bars {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 40px);
  position: relative;
  z-index: 1;
}
@media (min-width: 760px) { .compare__bars { grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); } }
.compare__bar { display: flex; flex-direction: column; gap: 10px; }
.compare__bar-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(250,250,250,0.7);
}
.compare__stack {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.compare__seg {
  padding: 13px 18px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 14px;
  line-height: 1.3;
}
.compare__seg:last-child { border-bottom: 0; }
.compare__seg .k { color: rgba(250,250,250,0.78); }
.compare__seg .v {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--bg);
}
.compare__seg--ghost .k,
.compare__seg--ghost .v { color: rgba(250,250,250,0.32); }
.compare__seg--headline {
  background: rgba(255,255,255,0.06);
  padding: 18px;
}
.compare__seg--headline .k {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(250,250,250,0.85);
}
.compare__seg--headline .v {
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.compare__seg--headline-green {
  background: var(--green);
}
.compare__seg--headline-green .k,
.compare__seg--headline-green .v { color: var(--ink); }
.compare__total {
  margin-top: 12px;
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
}
.compare__total .k { font-size: 13px; color: rgba(250,250,250,0.7); font-weight: 600; }
.compare__total .v {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--bg);
}
.compare__total--accent .v { color: #4ADE80; }
.compare__foot {
  margin: clamp(24px, 3vw, 32px) 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(250,250,250,0.55);
  max-width: 70ch;
}
.compare__foot a { color: rgba(250,250,250,0.78); text-decoration: underline; text-underline-offset: 3px; }
.compare__foot em { font-style: italic; color: rgba(250,250,250,0.7); }

/* ─── Warn-styled hint variant for break-even disclaimer ──────────────────── */
.calc-mini__hint--warn {
  margin-top: 0.5rem;
  padding: 0.6rem 0.85rem;
  background: #FEFCE8;
  border-left: 3px solid #CA8A04;
  color: #422006;
  font-size: 0.825rem;
  line-height: 1.55;
}
.calc-mini__hint--warn a {
  color: #422006;
  text-decoration: underline;
}

/* ─── Footer expansion ───────────────────────────────────────────────────── */
.foot__copy,
.foot__disclaimer,
.foot__updated {
  margin: 0.15rem 0;
}
.foot__updated {
  font-size: 0.8rem;
  color: #71717A;
}
.foot__updated time { font-variant-numeric: tabular-nums; }
.foot__legal {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  justify-content: center;
}
.foot__legal a {
  color: #71717A;
  text-decoration: none;
  font-size: 0.825rem;
  padding: 0.2rem 0;
}
.foot__legal a:hover {
  color: #16A34A;
}

/* ─── Legal-page wrapper (reading width) ─────────────────────────────────── */
.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
  line-height: 1.7;
  color: #18181B;
}
.legal h1 {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 2rem;
  font-weight: 800;
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
}
.legal .legal__effective {
  color: #71717A;
  font-size: 0.875rem;
  margin: 0 0 2rem;
}
.legal h2 {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 2rem 0 0.6rem;
}
.legal p, .legal li {
  font-size: 0.95rem;
}
.legal ul, .legal ol {
  padding-left: 1.5rem;
}

/* ─── Affiliate CTA slot — recommendation card, not a banner ─────────────── */

/* Component is intentionally calm: surface card + ink button. Sized to feel
   contextual inside guide articles or after the result card, not adjacent
   to the AdSense slots. Slots ship hidden; activate by removing the
   `hidden` attribute and filling href + product copy. */
.cta-slot {
  max-width: var(--max);
  margin: clamp(28px, 4vw, 48px) auto;
  padding: 22px clamp(20px, 3vw, 28px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: grid;
  gap: 10px;
  position: relative;
}
.cta-slot__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.cta-slot__headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.cta-slot__body {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
}
.cta-slot__cta {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--radius-sm);
  font: 600 14px/1 var(--font-display);
  letter-spacing: -0.01em;
  margin-top: 4px;
}
.cta-slot__cta:hover { background: var(--green-ink); color: var(--bg); }
.cta-slot__disclosure {
  font-size: 11px;
  color: var(--muted);
  margin: 0;
}

/* Inline variant: lives inside a guide article, no outer margin. */
.cta-slot--inline {
  margin: 20px 0;
}

/* ─── Print stylesheet — clean one-pager when user hits Cmd-P ────────────── */

.print-only { display: none; }

@media print {
  @page { size: auto; margin: 14mm 14mm 16mm; }

  /* Force a clean white surface; nuke fixed backdrops, atmosphere washes,
     ink panels — anything that hurts cost-per-page in a B&W printer. */
  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
    line-height: 1.45;
  }
  body::before { display: none !important; }

  /* Hide screen chrome + interactive bits + ad slots. */
  .nav__links,
  .skip-link,
  .a2hs,
  .foot__legal,
  ins.adsbygoogle,
  .adsbygoogle,
  .cta-slot { display: none !important; }

  /* Drop the page sections that don't belong on a tax estimate printout. */
  .hero,
  .explain,
  #more,
  .calc-mini,
  #guide,
  #faq,
  .compare-wrap { display: none !important; }

  /* Keep only a slim wordmark header. */
  .nav {
    position: static !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid #000 !important;
    padding: 0 0 6mm;
    margin-bottom: 8mm;
  }
  .nav__brand { color: #000 !important; }
  .nav__name--accent { color: #000 !important; }

  /* The calc — single column, no fills, no shadows. */
  .calc {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
  }
  .calc__inputs,
  .calc__result {
    background: #fff !important;
    border: 1px solid #000 !important;
    border-radius: 0 !important;
    padding: 6mm !important;
    margin: 0 0 6mm !important;
    box-shadow: none !important;
    position: static !important;
    page-break-inside: avoid;
  }
  .calc__title { margin-bottom: 4mm !important; }
  .field { margin-bottom: 3mm !important; }
  /* Print the input value as plain text so the page reflects what the user typed. */
  .input-money,
  select,
  .field input[type="number"] {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    color: #000 !important;
    font-weight: 600;
  }

  /* Result card — keep the hierarchy but flatten the chrome. */
  .result__label,
  .breakdown__group-label,
  .schedule__title { color: #000 !important; }
  .result__total { font-size: 32pt !important; }
  .quarterly__value { color: #000 !important; }

  /* The W-2 panel doesn't add to the printed estimate — hidden via .compare-wrap. */

  /* Show the print attribution (hidden on screen). */
  .print-only { display: block !important; }
  .print-source {
    margin-top: 4mm;
    padding-top: 3mm;
    border-top: 1px solid #000;
    font-size: 9pt;
    color: #000;
  }

  /* Slim footer line. */
  .foot {
    padding: 4mm 0 0 !important;
    border-top: 1px solid #000 !important;
    text-align: left !important;
    font-size: 9pt !important;
    color: #000 !important;
  }
  .foot__disclaimer { display: none !important; }

  /* Hyperlinks: keep them but inline the URL so the printed sheet is self-contained. */
  a { color: #000 !important; text-decoration: none !important; }

  /* Avoid awkward breaks inside the result block. */
  .breakdown,
  .quarterly,
  .schedule { page-break-inside: avoid; }
}

/* Sources / accuracy trust block (guides + main page) */
.sources{margin:1.5rem 0;padding:.9rem 1.1rem;border:1px solid #E5E5E5;border-left:3px solid #16A34A;border-radius:.4rem;background:#FAFAFA;font-size:.82rem;line-height:1.6;color:#525252}
.sources p{margin:0}
.sources a{color:#15803D;text-decoration:underline}
/* Related guides block at the end of each guide */
.guide-related{margin:2.5rem 0 1rem;padding-top:1.25rem;border-top:1px solid #E5E5E5}
.guide-related h2{font-size:1.05rem;margin:0 0 .6rem}
.guide-related ul{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:.4rem}
.guide-related a{color:#15803D;text-decoration:none;font-weight:600}
.guide-related a:hover{text-decoration:underline}
.guide-related__back{display:inline-block;font-weight:700}