/* LeoFolio Owner Payroll page (leofolio-patch-003-r7). Navy / gold / ivory tokens only. */
.op-planner{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:24px;align-items:start}
.op-form{display:grid;gap:14px;padding:22px;border:1px solid #E7DECF;border-radius:20px;background:#fff;box-shadow:0 12px 30px rgba(14,30,51,.06)}
.op-field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:#0E1E33}
.op-field input,.op-field select{font:inherit;font-weight:400;font-size:15px;padding:10px 12px;border:1px solid #CFC8BD;border-radius:11px;background:#fff;color:#0E1E33;width:100%;box-sizing:border-box;min-width:0}
.op-field small{font-weight:400;font-size:12.5px;line-height:1.5;color:#5B6470}
.op-field small a{color:#806331}
.op-money{position:relative;display:block}
.op-money b{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#70757A}
.op-money input{padding-left:26px}
.op-check{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;color:#1f2937}
.op-check input{margin-top:3px;flex:none}
.op-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.op-actions .prl-btn{border:0;cursor:pointer;font:inherit}
.op-error{margin:0;padding:10px 12px;border-radius:10px;background:#FBEDEE;color:#8A1C24;font-size:13px;font-weight:600}
.op-result{min-width:0}
.op-totals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.op-total{padding:14px;border:1px solid #E7DECF;border-radius:14px;background:#FBF7F1}
.op-total span{display:block;font-size:12px;color:#5B6470;font-weight:600}
.op-total strong{display:block;margin-top:4px;font-size:18px;color:#0E1E33}
.op-table-wrap{overflow-x:auto;border:1px solid #E7DECF;border-radius:14px;background:#fff}
.op-table{width:100%;border-collapse:collapse;font-size:13px;min-width:640px}
.op-table th,.op-table td{padding:9px 10px;border-bottom:1px solid #F1EBE1;text-align:right;white-space:nowrap}
.op-table th:first-child,.op-table td:first-child{text-align:left}
.op-table th{font-size:12px;color:#5B6470;background:#FBF7F1}
.op-table tfoot td{font-weight:800;color:#0E1E33}
.op-subhead{margin:18px 0 8px;font:800 18px/1.2 'Bricolage Grotesque',sans-serif;color:#0E1E33}
.op-deadlines{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.op-deadlines li{display:flex;gap:12px;font-size:14px;color:#1f2937}
.op-deadlines strong{min-width:150px;color:#0E1E33}
.op-pass-grid{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:24px;align-items:start}
.op-status{margin:0;font-size:13px;font-weight:700;color:#0E1E33}
.op-passes{display:grid;gap:12px}
.op-pass-card{padding:18px 20px;border:1px solid #EAD3AA;border-radius:18px;background:linear-gradient(135deg,#FBF4E8,#F7EAD6)}
.op-pass-card h3{margin:0 0 6px;font:800 19px/1.2 'Bricolage Grotesque',sans-serif;color:#0E1E33}
.op-pass-card p{margin:4px 0;font-size:13.5px;line-height:1.55;color:#1f2937}
.op-pass-card a{display:inline-block;margin-top:8px;font-weight:800;color:#0E1E33}
@media (max-width:900px){.op-planner,.op-pass-grid{grid-template-columns:1fr}.op-totals{grid-template-columns:repeat(2,minmax(0,1fr))}}
.op-actions .prl-btn-secondary{background:#fff;color:#0E1E33;border:1.5px solid #0E1E33}
.op-actions .prl-btn-secondary:hover,.op-actions .prl-btn-secondary:focus-visible{background:#0E1E33;color:#FBF7F1}
/* r10: what the pass covers, beside the purchase form */
.op-pass-side{display:grid;gap:18px}
.op-pass-side .op-passes:empty{display:none}
.op-ticket{position:relative;padding:26px 28px 24px;border-radius:20px;background:#0E1E33;color:#E5E9EF;box-shadow:0 30px 60px rgba(14,30,51,.22);overflow:hidden}
.op-ticket::after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;border:1px solid rgba(200,165,104,.28)}
.op-ticket-top{display:flex;justify-content:space-between;gap:12px;align-items:baseline;font:700 13px/1.2 'DM Sans',sans-serif;color:#C8A568}
.op-ticket-years{padding:5px 10px;border:1px solid rgba(200,165,104,.5);border-radius:999px;color:#F6F1E9;white-space:nowrap}
.op-ticket-price{display:flex;align-items:baseline;gap:12px;margin:14px 0 18px;padding-bottom:18px;border-bottom:1px dashed rgba(229,233,239,.25)}
.op-ticket-price strong{font:800 56px/1 'Bricolage Grotesque',sans-serif;color:#FFFFFF;letter-spacing:-.03em}
.op-ticket-price span{font-size:15px;color:#C9D1DC}
.op-ticket-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.op-ticket-list li{position:relative;padding-left:24px;font-size:15px;line-height:1.55;color:#C9D1DC}
.op-ticket-list li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:9px;border-radius:50%;background:#C8A568}
.op-ticket-list strong{color:#FFFFFF}
.op-ticket-math{margin-top:20px;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.06)}
.op-ticket-math span{display:block;font-size:12.5px;font-weight:700;color:#C8A568;margin-bottom:6px}
.op-ticket-math p{margin:0;font:500 14px/1.7 'JetBrains Mono',ui-monospace,monospace;color:#E5E9EF}
.op-ticket-math b{color:#FFFFFF}
.op-pass-steps{margin:0;padding:0 0 0 22px;display:grid;gap:8px;font-size:15px;line-height:1.55;color:#4B5563}
.op-pass-steps li::marker{font-weight:800;color:#0E1E33}

/* ------------------------------------------------------------------
   leofolio-patch-003-r14: Owner Payroll hero, a simpler layout to the
   owner's reference: copy and two offers on the left, one Pay Run
   summary and the owner's statement on the right, four points below.
   Figures are a real Pay Run from LeoFolio's 2026 engine for a
   fictional one-person S corporation (Texas, $5,000 a month, March).
   ------------------------------------------------------------------ */
.oh-hero { position: relative; overflow: hidden; color: #F6F1E9; background: linear-gradient(90deg, #0E1E33 0%, rgba(14,30,51,.97) 34%, rgba(14,30,51,.80) 58%, rgba(14,30,51,.55) 100%), url("/assets/images/hero-poster.webp") right 18% center / cover no-repeat, #0E1E33; padding: calc(66px + clamp(28px, 3.6vw, 60px)) 0 0; }
.oh-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(180deg, transparent, rgba(11,24,40,.92)); pointer-events: none; }
.oh-grid, .oh-features { position: relative; z-index: 1; width: min(1560px, 100%); margin: 0 auto; padding: 0 clamp(20px, 5vw, 84px); }
.oh-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.oh-label { display: flex; align-items: center; gap: 14px; margin: 0 0 26px; font: 600 14px/1.2 'DM Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #E5E9EF; }
.oh-label::before { content: ""; width: 48px; height: 2px; background: #C8A568; }
.oh-hero h1 { margin: 0; font-size: clamp(40px, 3.85vw, 68px); line-height: 1.04; font-weight: 800; letter-spacing: -.03em; color: #FFFFFF; }
.oh-hero h1 .oh-l { display: block; white-space: nowrap; }
.oh-gold { color: #D7B470; }
.oh-sub { margin: 26px 0 0; max-width: 40ch; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.6; color: #C9D1DC; }
.oh-actions { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 38px; }
.oh-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 80px; padding: 14px 40px; border-radius: 999px; text-decoration: none; text-align: center; transition: background-color .15s, box-shadow .15s; }
.oh-btn span { font: 700 19px/1.2 'DM Sans', sans-serif; }
.oh-btn b { display: inline-flex; align-items: center; gap: 6px; font: 800 17px/1.2 'DM Sans', sans-serif; }
.oh-btn-gold { background: #C8A568; color: #0E1E33; box-shadow: 0 16px 34px rgba(200,165,104,.28); }
.oh-btn-gold:hover, .oh-btn-gold:focus-visible { background: #D7B67A; }
.oh-btn-line { color: #FFFFFF; border: 1.5px solid rgba(255,255,255,.75); }
.oh-btn-line span { font-weight: 600; }
.oh-btn-line:hover, .oh-btn-line:focus-visible { background: rgba(255,255,255,.07); }
.oh-btn:focus-visible { outline: 3px solid rgba(200,165,104,.75); outline-offset: 3px; }
.oh-checks { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 34px 0 0; padding: 0; list-style: none; font-size: 18px; color: #E5E9EF; }
.oh-checks li { display: flex; align-items: center; gap: 12px; }
.oh-checks li::before { content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%; background: #C8A568 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 15px no-repeat; }

.oh-visual { position: relative; container-type: inline-size; padding: 0 0 9% 0; }
.oh-visual * { --u: clamp(0.62px, calc(100cqw / 820), 1.15px); }
.oh-laptop { width: 100%; transform: perspective(2200px) rotateY(-9deg); transform-origin: 20% 50%; }
.oh-screen { background: #F7F8FA; border: calc(12 * var(--u)) solid #121821; border-radius: calc(22 * var(--u)); overflow: hidden; box-shadow: 0 40px 80px rgba(0,0,0,.5); }
.oh-base { height: calc(16 * var(--u)); margin: 0 -6%; border-radius: 0 0 calc(18 * var(--u)) calc(18 * var(--u)); background: linear-gradient(180deg, #3B424D, #151A21); box-shadow: 0 26px 40px rgba(0,0,0,.45); }
.oh-app-top { display: flex; align-items: center; gap: calc(28 * var(--u)); padding: calc(12 * var(--u)) calc(20 * var(--u)); background: #0E1E33; }
.oh-app-logo { font: 800 calc(17 * var(--u))/1 'Bricolage Grotesque', sans-serif; color: #FFFFFF; }
.oh-app-logo b { color: #D7B470; }
.oh-steps { display: flex; gap: calc(22 * var(--u)); margin: 0 auto; padding: 0; list-style: none; }
.oh-steps li { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(10.5 * var(--u)); color: #AEB8C6; }
.oh-steps i { display: grid; place-items: center; width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: 50%; border: 1px solid rgba(255,255,255,.35); font: 700 calc(9.5 * var(--u))/1 'DM Sans', sans-serif; font-style: normal; }
.oh-steps .is-on { color: #FFFFFF; font-weight: 700; }
.oh-steps .is-on i { background: #C8A568; border-color: #C8A568; color: #0E1E33; }
.oh-app-body { padding: calc(20 * var(--u)) calc(24 * var(--u)) calc(26 * var(--u)); color: #0E1E33; }
.oh-app-head { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(12 * var(--u)); }
.oh-app-head strong { display: block; font: 700 calc(20 * var(--u))/1.2 'DM Sans', sans-serif; }
.oh-app-head span { display: block; margin-top: calc(4 * var(--u)); font-size: calc(11.5 * var(--u)); color: #6B7280; }
.oh-paydate { text-align: right; }
.oh-paydate b { display: block; font-size: calc(13 * var(--u)); }
.oh-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(10 * var(--u)); margin-top: calc(18 * var(--u)); }
.oh-stats > div { padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(14 * var(--u)); border: 1px solid #E5E7EB; border-radius: calc(10 * var(--u)); background: #FFFFFF; }
.oh-stats span { display: block; font-size: calc(10.5 * var(--u)); color: #6B7280; }
.oh-stats b { display: block; margin-top: calc(6 * var(--u)); font: 700 calc(17 * var(--u))/1.1 'DM Sans', sans-serif; color: #0E1E33; }
.oh-stats .is-total { background: #FBF1DD; border-color: #EAD3AA; }
.oh-table { margin-top: calc(16 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); border: 1px solid #E5E7EB; border-radius: calc(10 * var(--u)); background: #FFFFFF; }
.oh-table strong { display: block; margin-bottom: calc(8 * var(--u)); font-size: calc(12.5 * var(--u)); }
.oh-tr { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: calc(8 * var(--u)); padding: calc(7 * var(--u)) 0; font-size: calc(11 * var(--u)); }
.oh-tr span + span { text-align: right; }
.oh-th { border-bottom: 1px solid #EEF0F3; font-size: calc(9.5 * var(--u)); font-weight: 700; color: #6B7280; }
.oh-paper { position: absolute; right: -4%; bottom: -12%; width: 37%; padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(18 * var(--u)); border-radius: calc(6 * var(--u)); background: #FDFDFC; color: #0E1E33; box-shadow: 0 30px 60px rgba(0,0,0,.45); transform: rotate(4deg); transform-origin: 50% 100%; }
.oh-paper p { margin: 0; }
.oh-paper-co { font: 800 calc(14 * var(--u))/1.2 'Bricolage Grotesque', sans-serif; }
.oh-paper-title { margin-top: calc(4 * var(--u)) !important; font: 700 calc(13 * var(--u))/1.2 'DM Sans', sans-serif; color: #4B5563; }
.oh-paper-meta { display: flex; justify-content: space-between; gap: calc(10 * var(--u)); margin-top: calc(12 * var(--u)); font-size: calc(9.5 * var(--u)); line-height: 1.4; color: #4B5563; }
.oh-paper-meta b { display: block; color: #0E1E33; font-size: calc(10.5 * var(--u)); }
.oh-paper-meta span { display: block; font-size: calc(8.5 * var(--u)); color: #9CA3AF; }
.oh-paper-meta > div + div { text-align: right; }
.oh-paper-rows { margin-top: calc(10 * var(--u)); }
.oh-pr { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: calc(6 * var(--u)); padding: calc(4 * var(--u)) 0; font-size: calc(10 * var(--u)); }
.oh-pr span + span { text-align: right; font-variant-numeric: tabular-nums; }
.oh-ph { margin-top: calc(6 * var(--u)); padding-top: calc(6 * var(--u)); border-top: 1px solid #E5E7EB; font-weight: 700; font-size: calc(9.5 * var(--u)); color: #0E1E33; }
.oh-net { margin-top: calc(6 * var(--u)); padding-top: calc(7 * var(--u)); border-top: 1.5px solid #0E1E33; font-weight: 800; font-size: calc(11 * var(--u)); }

.oh-features { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(32px, 3.6vw, 56px) !important; padding-top: clamp(28px, 3vw, 40px) !important; padding-bottom: clamp(40px, 5vw, 64px) !important; }
.oh-features::before { content: ""; position: absolute; top: 0; left: clamp(20px, 5vw, 84px); right: clamp(20px, 5vw, 84px); height: 1px; background: rgba(255,255,255,.12); }
.oh-features li { display: flex; gap: 18px; align-items: flex-start; padding: 0 24px; font-size: 15.5px; line-height: 1.55; color: #C9D1DC; }
.oh-features li:first-child { padding-left: 0; }
.oh-features li + li { border-left: 1px solid rgba(255,255,255,.12); }
.oh-features strong { display: block; margin-bottom: 6px; font-size: 18px; color: #FFFFFF; }
.oh-ficon { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; border: 1.5px solid rgba(200,165,104,.8); color: #D7B470; }
.oh-ficon svg { width: 27px; height: 27px; }

@media (min-width: 1181px) and (max-width: 1500px) {
  .oh-btn { padding: 12px 26px; min-height: 72px; }
  .oh-btn span { font-size: 17px; }
  .oh-btn b { font-size: 15.5px; }
  .oh-actions { gap: 12px; }
  .oh-checks { gap: 12px 26px; font-size: 16.5px; }
}
@media (max-width: 1180px) {
  .oh-grid { grid-template-columns: 1fr; }
  .oh-visual { max-width: 760px; width: 100%; margin: 8px auto 0; }
  .oh-features { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .oh-features li:nth-child(3) { padding-left: 0; border-left: 0; }
  .oh-hero h1 .oh-l { white-space: normal; }
}
@media (max-width: 640px) {
  .oh-hero { background: linear-gradient(180deg, #0E1E33 0%, rgba(14,30,51,.92) 100%), url("/assets/images/hero-poster.webp") right center / cover no-repeat, #0E1E33; }
  .oh-btn { width: 100%; min-height: 76px; }
  .oh-hero h1 .oh-l { display: inline; }
  .oh-checks { font-size: 16px; gap: 10px 22px; }
  .oh-visual * { --u: 0.62px; }
  .oh-laptop { width: 100%; transform: none; }
  .oh-paper { position: relative; right: auto; bottom: auto; width: 88%; margin: -6% 0 0 auto; transform: rotate(2deg); }
  .oh-features { grid-template-columns: 1fr; }
  .oh-features li, .oh-features li + li { padding: 0; border-left: 0; }
}