/* LeoFolio r9 page system (leofolio-patch-003-r9).
   Shared by the home, pricing, owner, solution and My Payroll pages.
   Navy for ink and the hero, gold for the one action that matters, ivory for the page, white for documents. */
:root {
  --r9-navy: #0E1E33;
  --r9-navy-2: #16294A;
  --r9-gold: #C8A568;
  --r9-gold-ink: #806331;
  --r9-ivory: #FBF7F1;
  --r9-paper: #FFFFFF;
  --r9-line: #E7DECF;
  --r9-text: #1F2937;
  --r9-muted: #4B5563;
  --r9-soft: #F3ECE0;
  --r9-radius: 14px;
}
.r9 { background: var(--r9-ivory); color: var(--r9-text); font-family: 'DM Sans', system-ui, sans-serif; font-size: 17px; line-height: 1.6; }
.r9 *, .r9 *::before, .r9 *::after { box-sizing: border-box; }
.r9-shell { width: min(1180px, 100%); margin: 0 auto; padding: 0 24px; }
:where(.r9) h1, :where(.r9) h2, :where(.r9) h3 { font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif; color: var(--r9-navy); margin: 0; letter-spacing: -0.022em; }
:where(.r9) h1 { font-size: clamp(40px, 5.4vw, 70px); line-height: 1.02; font-weight: 800; }
:where(.r9) h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.06; font-weight: 800; }
:where(.r9) h3 { font-size: 21px; line-height: 1.25; font-weight: 750; letter-spacing: -0.01em; }
:where(.r9) p { margin: 0; }
:where(.r9) a { color: inherit; }
.r9-section { padding: clamp(64px, 8vw, 112px) 0; }
.r9-section + .r9-section { border-top: 1px solid var(--r9-line); }
.r9-white { background: var(--r9-paper); }
.r9-head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 52px); }
.r9-head p { margin-top: 16px; font-size: 18.5px; color: var(--r9-muted); max-width: 62ch; }
.r9-kicker { display: inline-block; margin-bottom: 14px; font-size: 14px; font-weight: 700; color: var(--r9-gold-ink); }
.r9-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px; border-radius: 999px; font: 700 16px/1 'DM Sans', system-ui, sans-serif; text-decoration: none; cursor: pointer; border: 0; transition: background-color .15s, color .15s, box-shadow .15s; }
.r9-btn-primary { background: var(--r9-gold); color: var(--r9-navy); box-shadow: 0 10px 24px rgba(200,165,104,.32); }
.r9-btn-primary:hover, .r9-btn-primary:focus-visible { background: #D7B67A; }
.r9-btn-ghost { background: transparent; color: inherit; border: 1.5px solid currentColor; }
.r9-btn-ghost:hover, .r9-btn-ghost:focus-visible { background: rgba(200,165,104,.14); }
.r9-btn:focus-visible, .r9 a:focus-visible, .r9 summary:focus-visible { outline: 3px solid rgba(200,165,104,.75); outline-offset: 3px; }
.r9-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.r9-link { font-weight: 700; color: var(--r9-gold-ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.r9-link:hover { color: var(--r9-navy); }
.r9-note { font-size: 13.5px; line-height: 1.55; color: var(--r9-muted); }

/* Hero: words on the left, the actual pay run on the right. */
.r9-hero { position: relative; background: radial-gradient(1200px 520px at 85% -10%, rgba(200,165,104,.18), transparent 60%), var(--r9-navy); color: #F6F1E9; padding: calc(66px + clamp(28px, 4vw, 48px)) 0 clamp(64px, 8vw, 104px); overflow: hidden; }
.r9-hero h1 { color: #FFFFFF; font-size: clamp(40px, 5vw, 66px); }
.r9-hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.r9-hero-label { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; font-size: 15px; font-weight: 600; color: #E9D8B4; }
.r9-hero-label::before { content: ""; width: 28px; height: 2px; background: var(--r9-gold); }
.r9-hero-sub { margin-top: 22px; font-size: clamp(18px, 1.6vw, 20.5px); line-height: 1.55; color: #D9DEE6; max-width: 54ch; }
.r9-hero-sub strong { color: #FFFFFF; font-weight: 700; }
.r9-hero .r9-btn-ghost { color: #F6F1E9; }
.r9-assure { display: grid; gap: 8px; margin: 30px 0 0; padding: 0; list-style: none; font-size: 15px; color: #C9D1DC; }
.r9-assure li { display: flex; gap: 10px; align-items: flex-start; }
.r9-assure li::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 4px; border-radius: 50%; background: var(--r9-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1E33' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat; }

/* The product panel: a real pay run, figures from LeoFolio's 2026 engine. */
.r9-run { position: relative; background: var(--r9-paper); color: var(--r9-text); border-radius: 18px; box-shadow: 0 40px 80px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06); overflow: hidden; font-size: 14px; }
.r9-run-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 18px 20px 14px; border-bottom: 1px solid #EEF0F3; }
.r9-run-top strong { display: block; font: 750 16px/1.25 'Bricolage Grotesque', sans-serif; color: var(--r9-navy); }
.r9-run-top span { font-size: 12.5px; color: #6B7280; }
.r9-pill { flex: none; padding: 5px 10px; border-radius: 999px; background: #EEF2F7; color: var(--r9-navy); font-size: 12px; font-weight: 700; white-space: nowrap; }
.r9-pill-ok { background: #FBF1DD; color: #6B5228; }
.r9-run table { width: 100%; border-collapse: collapse; }
.r9-run th { padding: 10px 20px 6px; text-align: left; font-size: 11.5px; font-weight: 700; color: #6B7280; }
.r9-run td { padding: 9px 20px; border-top: 1px solid #F1F2F4; vertical-align: middle; }
.r9-run th:nth-child(n+2), .r9-run td:nth-child(n+2) { text-align: right; }
.r9-run .r9-num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--r9-navy); white-space: nowrap; }
.r9-person { display: flex; align-items: center; gap: 10px; }
.r9-person b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #EEF2F7; color: var(--r9-navy); font-size: 11.5px; font-weight: 700; flex: none; }
.r9-person small { display: block; color: #6B7280; font-size: 12px; }
.r9-run-totals { display: grid; grid-template-columns: repeat(3, 1fr); background: #FAFBFC; border-top: 1px solid #EEF0F3; }
.r9-run-totals div { padding: 12px 20px; }
.r9-run-totals div + div { border-left: 1px solid #EEF0F3; }
.r9-run-totals span { display: block; font-size: 11.5px; color: #6B7280; font-weight: 600; }
.r9-run-totals strong { font: 700 16px/1.3 'JetBrains Mono', ui-monospace, monospace; color: var(--r9-navy); font-variant-numeric: tabular-nums; }
.r9-run-totals .r9-net strong { color: #9A7535; }
.r9-run-due { padding: 14px 20px 16px; border-top: 1px solid #EEF0F3; }
.r9-run-due h3 { font: 700 13px/1.3 'DM Sans', sans-serif; color: var(--r9-navy); letter-spacing: 0; margin-bottom: 8px; }
.r9-run-due ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.r9-run-due li { display: grid; grid-template-columns: 1fr auto; gap: 10px; font-size: 12.5px; color: var(--r9-muted); }
.r9-run-due li span:last-child { font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--r9-navy); font-variant-numeric: tabular-nums; }
.r9-run-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; background: var(--r9-navy); color: #E5E9EF; font-size: 12.5px; }
.r9-run-foot b { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: var(--r9-gold); color: var(--r9-navy); font-size: 13px; }
.r9-run-doc { position: absolute; width: 160px; right: -26px; bottom: 92px; transform: rotate(5deg); border-radius: 6px; box-shadow: 0 18px 36px rgba(0,0,0,.35); border: 1px solid rgba(14,30,51,.15); background: #fff; display: none; }
.r9-run-wrap { position: relative; }
.r9-run-caption { margin-top: 14px; font-size: 13px; color: #AAB4C2; }
@media (prefers-reduced-motion: no-preference) {
  .r9-run tbody tr { animation: r9-row .5s ease-out both; }
  .r9-run tbody tr:nth-child(2) { animation-delay: .18s; }
  .r9-run tbody tr:nth-child(3) { animation-delay: .36s; }
  .r9-run-totals { animation: r9-row .5s ease-out .62s both; }
  .r9-run-due { animation: r9-row .5s ease-out .84s both; }
  .r9-run-foot b { animation: r9-ready .6s ease-out 1.1s both; }
}
@keyframes r9-row { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes r9-ready { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* Doors: three people, three starting points. One band, not three floating cards. */
.r9-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--r9-line); border-radius: 20px; background: var(--r9-paper); overflow: hidden; }
.r9-door { display: flex; flex-direction: column; gap: 12px; padding: 32px 30px 30px; text-decoration: none; color: inherit; transition: background-color .15s; }
.r9-door + .r9-door { border-left: 1px solid var(--r9-line); }
.r9-door:hover, .r9-door:focus-visible { background: #FFFCF6; }
.r9-door-who { font: 750 22px/1.2 'Bricolage Grotesque', sans-serif; color: var(--r9-navy); letter-spacing: -0.01em; }
.r9-door p { color: var(--r9-muted); font-size: 16px; }
.r9-door-price { margin-top: auto; padding-top: 14px; font-size: 15px; color: var(--r9-navy); }
.r9-door-price strong { font: 800 28px/1 'Bricolage Grotesque', sans-serif; margin-right: 6px; }
.r9-door-go { font-weight: 700; color: var(--r9-gold-ink); }
.r9-door:hover .r9-door-go { text-decoration: underline; text-underline-offset: 4px; }
.r9-door-alt { font-size: 14px; color: var(--r9-muted); }
.r9-door-alt a { color: var(--r9-gold-ink); font-weight: 700; }

/* Steps: a real sequence, so numbered. */
.r9-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: r9step; }
.r9-step { position: relative; padding: 0 28px 0 0; }
.r9-step + .r9-step { padding-left: 28px; border-left: 1px solid var(--r9-line); }
.r9-step::before { counter-increment: r9step; content: counter(r9step); display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 18px; border-radius: 50%; background: var(--r9-navy); color: #F6F1E9; font: 750 17px/1 'Bricolage Grotesque', sans-serif; }
.r9-step h3 { margin-bottom: 10px; }
.r9-step p { color: var(--r9-muted); font-size: 16px; }
.r9-step small { display: block; margin-top: 14px; font-size: 13.5px; color: var(--r9-gold-ink); font-weight: 700; }

/* Documents: what you walk away with, shown as the real files. */
.r9-docs { display: grid; grid-template-columns: 1fr 1.25fr 1.25fr; grid-template-rows: auto auto; gap: 22px; align-items: start; }
.r9-doc { margin: 0; }
.r9-doc img { display: block; width: 100%; height: auto; border-radius: 10px; background: #fff; border: 1px solid rgba(14,30,51,.10); box-shadow: 0 22px 44px rgba(14,30,51,.10); }
.r9-doc figcaption { margin-top: 12px; font-size: 15px; color: var(--r9-muted); }
.r9-doc figcaption strong { display: block; color: var(--r9-navy); font-size: 16px; margin-bottom: 2px; }
.r9-doc-tall { grid-row: span 2; }
.r9-docs-more { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 15px; color: var(--r9-muted); }
.r9-docs-more span { display: inline-flex; gap: 8px; align-items: center; }
.r9-docs-more span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--r9-gold); }

/* Yearly cost: bars to scale. */
.r9-cost { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.r9-bars { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.r9-bar { display: grid; grid-template-columns: 190px 1fr; gap: 14px; align-items: center; }
.r9-bar-name { font-size: 15px; color: var(--r9-text); line-height: 1.3; }
.r9-bar-name small { display: block; color: var(--r9-muted); font-size: 12.5px; }
.r9-bar-track { position: relative; height: 38px; }
.r9-bar-fill { height: 100%; border-radius: 0 8px 8px 0; background: #D6DCE4; min-width: 4px; }
.r9-bar-lf .r9-bar-fill { background: var(--r9-gold); }
.r9-bar-value { position: absolute; top: 50%; transform: translateY(-50%); padding-left: 10px; font: 700 15px/1 'JetBrains Mono', ui-monospace, monospace; color: var(--r9-navy); white-space: nowrap; font-variant-numeric: tabular-nums; }
.r9-cost-note { margin-top: 26px; }

/* Proof and boundaries. */
.r9-proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 48px; }
.r9-proof div { padding-top: 18px; border-top: 2px solid var(--r9-navy); }
.r9-proof h3 { font-size: 19px; margin-bottom: 8px; }
.r9-proof p { color: var(--r9-muted); font-size: 16px; }
.r9-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--r9-line); border-radius: 20px; overflow: hidden; background: var(--r9-paper); }
.r9-split > div { padding: 30px 32px; }
.r9-split > div + div { border-left: 1px solid var(--r9-line); background: #FFFCF6; }
.r9-split h3 { margin-bottom: 14px; }
.r9-split ul { margin: 0; padding: 0 0 0 20px; display: grid; gap: 8px; color: var(--r9-muted); font-size: 16px; }

/* Places: every state and province, compact. */
.r9-places { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px; }
.r9-places h3 { font-size: 17px; margin-bottom: 14px; }
.r9-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.r9-chips a { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; padding: 7px 10px; border: 1px solid var(--r9-line); border-radius: 8px; background: var(--r9-paper); font-size: 13.5px; font-weight: 700; color: var(--r9-navy); text-decoration: none; }
.r9-chips a:hover, .r9-chips a:focus-visible { border-color: var(--r9-gold); background: #FFFCF6; }

/* FAQ */
.r9-faq { max-width: 860px; }
.r9-faq details { border-bottom: 1px solid var(--r9-line); }
.r9-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; font: 700 18px/1.35 'DM Sans', sans-serif; color: var(--r9-navy); }
.r9-faq summary::-webkit-details-marker { display: none; }
.r9-faq summary::after { content: "+"; flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--r9-soft); font-weight: 700; }
.r9-faq details[open] summary::after { content: "−"; }
.r9-faq details p { padding: 0 0 22px; color: var(--r9-muted); font-size: 16.5px; max-width: 70ch; }

/* Closing band */
.r9-close { background: var(--r9-navy); color: #E5E9EF; padding: clamp(64px, 8vw, 104px) 0; }
.r9-close h2 { color: #FFFFFF; max-width: 18ch; }
.r9-close p { margin-top: 16px; font-size: 18.5px; max-width: 56ch; color: #C9D1DC; }
.r9-close .r9-btn-ghost { color: #F6F1E9; }

/* Comparison table (pricing) */
.r9-table-wrap { overflow-x: auto; border: 1px solid var(--r9-line); border-radius: 16px; background: var(--r9-paper); }
.r9-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 15px; }
.r9-table th, .r9-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid #F1EBE1; vertical-align: top; }
.r9-table thead th { background: #FBF7F1; font-size: 13px; color: var(--r9-muted); font-weight: 700; }
.r9-table td.r9-num, .r9-table th.r9-num { text-align: right; font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.r9-table tr.r9-us td { background: #FFFAF0; }
.r9-table tr.r9-us td:first-child { font-weight: 800; color: var(--r9-navy); }
.r9-table caption { caption-side: bottom; padding: 14px 18px; text-align: left; font-size: 13px; color: var(--r9-muted); }

/* Plans (pricing) */
.r9-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.r9-plan { display: flex; flex-direction: column; padding: 30px 28px; border: 1px solid var(--r9-line); border-radius: 20px; background: var(--r9-paper); }
.r9-plan-main { border: 2px solid var(--r9-navy); box-shadow: 0 24px 48px rgba(14,30,51,.10); }
.r9-plan h3 { font-size: 20px; }
.r9-plan-for { margin-top: 6px; color: var(--r9-muted); font-size: 15px; }
.r9-plan-price { margin: 22px 0 6px; font: 800 48px/1 'Bricolage Grotesque', sans-serif; color: var(--r9-navy); letter-spacing: -0.03em; }
.r9-plan-price small { display: block; margin-top: 10px; font: 600 15px/1.2 'DM Sans', sans-serif; color: var(--r9-muted); letter-spacing: 0; }
.r9-plan ul { margin: 20px 0 26px; padding: 0; list-style: none; display: grid; gap: 9px; font-size: 15.5px; }
.r9-plan li { display: flex; gap: 10px; }
.r9-plan li::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 4px; border-radius: 50%; background: var(--r9-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF7F1' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat; }
.r9-plan .r9-btn { margin-top: auto; width: 100%; }
.r9-plan-main .r9-btn { background: var(--r9-navy); color: #fff; box-shadow: none; }
.r9-plan-main .r9-btn:hover { background: var(--r9-navy-2); }

/* Calculator (pricing) */
.r9-calc { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px; padding: 30px; border-radius: 20px; background: var(--r9-paper); border: 1px solid var(--r9-line); }
.r9-calc label { display: grid; gap: 8px; font-size: 14px; font-weight: 700; color: var(--r9-navy); margin-bottom: 18px; }
.r9-calc select, .r9-calc input { font: 400 16px/1.2 'DM Sans', sans-serif; padding: 12px 14px; border: 1px solid #CFC8BD; border-radius: 12px; background: #fff; color: var(--r9-navy); width: 100%; }
.r9-calc output { display: block; }
.r9-calc-total { font: 800 54px/1 'Bricolage Grotesque', sans-serif; color: var(--r9-navy); letter-spacing: -0.03em; }
.r9-calc-total small { font: 600 16px/1.2 'DM Sans', sans-serif; color: var(--r9-muted); letter-spacing: 0; }

@media (max-width: 960px) {
  .r9-hero-grid, .r9-cost, .r9-places, .r9-calc { grid-template-columns: 1fr; }
  .r9-doors, .r9-steps, .r9-plans { grid-template-columns: 1fr; }
  .r9-door + .r9-door { border-left: 0; border-top: 1px solid var(--r9-line); }
  .r9-step, .r9-step + .r9-step { padding: 0; border-left: 0; }
  .r9-step + .r9-step { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--r9-line); }
  .r9-docs { grid-template-columns: 1fr 1fr; }
  .r9-doc-tall { grid-row: auto; grid-column: span 2; max-width: 420px; }
  .r9-proof, .r9-split { grid-template-columns: 1fr; }
  .r9-split > div + div { border-left: 0; border-top: 1px solid var(--r9-line); }
}
@media (max-width: 560px) {
  .r9 { font-size: 16px; }
  .r9-shell { padding: 0 16px; }
  .r9-bar { grid-template-columns: 1fr; gap: 6px; }
  .r9-docs { grid-template-columns: 1fr; }
  .r9-doc-tall { grid-column: auto; }
  .r9-run { font-size: 13px; }
  .r9-run th, .r9-run td { padding-left: 12px; padding-right: 12px; }
  .r9-run td:nth-child(2), .r9-run th:nth-child(2) { display: none; }
  .r9-run-totals div { padding: 10px 12px; }
  .r9-run-totals strong { font-size: 14px; }
  .r9-run-foot { flex-direction: column; align-items: flex-start; }
  .r9-actions .r9-btn { width: 100%; }
}

.r9-first { padding-top: calc(66px + clamp(40px, 6vw, 80px)); }

/* Owner Payroll: a year at a glance (the page's one visual idea). */
.r9-year { background: var(--r9-paper); color: var(--r9-text); border-radius: 18px; box-shadow: 0 40px 80px rgba(0,0,0,.35); overflow: hidden; }
.r9-year-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 18px 20px 12px; border-bottom: 1px solid #EEF0F3; }
.r9-year-top strong { font: 750 17px/1.2 'Bricolage Grotesque', sans-serif; color: var(--r9-navy); }
.r9-year-top span { font-size: 12.5px; color: #6B7280; }
.r9-months { display: grid; grid-template-columns: repeat(4, 1fr); }
.r9-month { position: relative; padding: 12px 14px 14px; border-right: 1px solid #F1F2F4; border-bottom: 1px solid #F1F2F4; min-height: 92px; }
.r9-month:nth-child(4n) { border-right: 0; }
.r9-month b { display: block; font-size: 12px; color: #6B7280; font-weight: 700; }
.r9-month .r9-pay { display: block; margin-top: 4px; font: 700 15px/1.2 'JetBrains Mono', ui-monospace, monospace; color: var(--r9-navy); font-variant-numeric: tabular-nums; }
.r9-month small { display: block; margin-top: 4px; font-size: 11.5px; color: #6B7280; line-height: 1.35; }
.r9-month .r9-due { display: inline-block; margin-top: 6px; padding: 3px 7px; border-radius: 6px; background: #FBF1DD; color: #6B5228; font-size: 11px; font-weight: 700; }
.r9-year-sum { display: grid; grid-template-columns: repeat(3, 1fr); background: #FAFBFC; }
.r9-year-sum div { padding: 12px 16px; }
.r9-year-sum div + div { border-left: 1px solid #EEF0F3; }
.r9-year-sum span { display: block; font-size: 11.5px; color: #6B7280; font-weight: 600; }
.r9-year-sum strong { font: 700 16px/1.3 'JetBrains Mono', ui-monospace, monospace; color: var(--r9-navy); font-variant-numeric: tabular-nums; }
.r9-year-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; background: var(--r9-navy); color: #E5E9EF; font-size: 12.5px; }
.r9-year-foot b { padding: 9px 14px; border-radius: 999px; background: var(--r9-gold); color: var(--r9-navy); font-size: 13px; white-space: nowrap; }
.op-sample { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: #FBF1DD; color: #6B5228; font-size: 14px; font-weight: 600; }
.r9-owner .op-planner { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
.r9-owner .op-form .r9-btn { min-height: 46px; }
@media (max-width: 560px) {
  .r9-months { grid-template-columns: repeat(3, 1fr); }
  .r9-month:nth-child(4n) { border-right: 1px solid #F1F2F4; }
  .r9-month:nth-child(3n) { border-right: 0; }
  .r9-year-sum { grid-template-columns: 1fr; }
  .r9-year-sum div + div { border-left: 0; border-top: 1px solid #EEF0F3; }
  .r9-year-foot { flex-direction: column; align-items: flex-start; }
}

/* Hero document stack for solution pages: the real files, slightly fanned. */
.r9-stack { position: relative; min-height: 460px; }
.r9-stack img { position: absolute; height: auto; border-radius: 10px; background: #fff; box-shadow: 0 34px 70px rgba(0,0,0,.38); border: 1px solid rgba(255,255,255,.08); }
.r9-stack-back { width: 82%; right: 0; top: 0; transform: rotate(3deg); opacity: .96; }
.r9-stack-front { width: 54%; left: 2%; top: 60px; transform: rotate(-3deg); }
.r9-stack-front.r9-stack-wide { width: 78%; top: 120px; }
@media (max-width: 960px) { .r9-stack { min-height: 0; aspect-ratio: 4 / 3; } }
.r9-fit-note { margin: 18px 0 0; max-width: 72ch; }
/* r10: centered closing band (pricing). */
.r9-close-center { text-align: center; }
.r9-close-center h2, .r9-close-center p { margin-left: auto; margin-right: auto; }
.r9-close-center .r9-actions { justify-content: center; }