/* Reorder point calculator page — blue split hero with the tool beside the headline */
.rp-page { --rp-ink:#0b1f3a; --rp-blue:#0453a7; --rp-sky:#e8f1fc; --rp-line:#d6e4f5; --rp-muted:#4b5d75; color:var(--rp-ink); }
.rp-page p { color:var(--rp-muted); line-height:1.75; }
.rp-wrap { max-width:1180px; margin:0 auto; padding:0 16px; }
.rp-hero { background:linear-gradient(160deg,#f4f8fe 0%,#fff 60%); padding:28px 0 64px; border-bottom:1px solid var(--rp-line); }
.rp-hero-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:start; }
.rp-eyebrow { display:inline-flex; gap:8px; align-items:center; background:var(--rp-sky); color:var(--rp-blue); font-weight:700; font-size:.78rem; padding:6px 12px; border-radius:999px; margin-bottom:18px; }
.rp-h1 { font-size:clamp(2rem,4vw,2.9rem); font-weight:900; line-height:1.15; letter-spacing:-.5px; margin:0 0 18px; color:var(--rp-ink); }
.rp-lead { font-size:1.06rem; margin:0 0 14px; }
.rp-ctas { display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 14px; }
.rp-btn { display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:10px; font-weight:700; text-decoration:none; transition:transform .15s, box-shadow .15s; }
.rp-btn:hover { transform:translateY(-2px); }
.rp-btn-main { background:var(--rp-blue); color:#fff; box-shadow:0 6px 18px rgba(4,83,167,.25); }
.rp-btn-main:hover { color:#fff; }
.rp-btn-alt { background:#fff; color:var(--rp-blue); border:2px solid var(--rp-blue); }
.rp-btn-alt:hover { color:var(--rp-blue); }
.rp-note { font-size:.86rem; color:#64748b; }

.rp-tool { background:#fff; border:1px solid var(--rp-line); border-radius:18px; box-shadow:0 18px 40px rgba(11,31,58,.08); padding:26px; }
.rp-tool h2 { font-size:1.15rem; font-weight:800; margin:0 0 4px; color:var(--rp-ink); }
.rp-tool-sub { font-size:.88rem; margin:0 0 18px; }
.rp-fields { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.rp-field label { display:block; font-size:.8rem; font-weight:700; color:var(--rp-ink); margin-bottom:6px; }
.rp-field label small { font-weight:500; color:#64748b; }
.rp-input { display:flex; border:1.5px solid var(--rp-line); border-radius:10px; overflow:hidden; background:#fbfdff; }
.rp-input:focus-within { border-color:var(--rp-blue); box-shadow:0 0 0 3px rgba(4,83,167,.12); }
.rp-input input { flex:1; min-width:0; border:0; background:transparent; padding:11px 12px; font-size:1rem; outline:none; }
.rp-input span { padding:11px 12px; font-size:.8rem; color:#64748b; background:#f1f6fc; }
.rp-go { width:100%; margin-top:18px; border:0; background:var(--rp-blue); color:#fff; font-weight:800; padding:14px; border-radius:10px; cursor:pointer; font-size:1rem; }
.rp-go:hover { background:#1768be; }
.rp-err { color:#b91c1c; font-size:.85rem; margin-top:10px; display:none; }
.rp-out { margin-top:20px; display:none; }
.rp-out.show { display:block; }
.rp-big { display:flex; align-items:baseline; gap:10px; padding:16px 18px; border-radius:12px; background:var(--rp-sky); }
.rp-big strong { font-size:2.4rem; font-weight:900; color:var(--rp-blue); line-height:1; }
.rp-big span { font-weight:600; color:var(--rp-ink); }
.rp-mini { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.rp-mini div { border:1px solid var(--rp-line); border-radius:10px; padding:10px 12px; }
.rp-mini b { display:block; font-size:1.25rem; color:var(--rp-ink); }
.rp-mini small { color:#64748b; font-size:.78rem; }
.rp-gauge { margin-top:14px; }
.rp-gauge-bar { position:relative; height:14px; border-radius:999px; background:linear-gradient(90deg,#fecaca 0%,#fde68a 35%,#bbf7d0 70%); }
.rp-gauge-mark { position:absolute; top:-5px; width:4px; height:24px; background:var(--rp-ink); border-radius:2px; transform:translateX(-2px); }
.rp-gauge-legend { display:flex; justify-content:space-between; font-size:.74rem; color:#64748b; margin-top:6px; }
.rp-msg { margin-top:12px; padding:12px 14px; border-radius:10px; font-size:.9rem; line-height:1.6; }
.rp-msg.ok { background:#f0fdf4; color:#166534; }
.rp-msg.warn { background:#fff7ed; color:#9a3412; }
.rp-msg.bad { background:#fef2f2; color:#991b1b; }
.rp-math { margin-top:12px; font-size:.82rem; color:#475569; background:#f8fafc; border:1px dashed var(--rp-line); border-radius:8px; padding:9px 12px; }

.rp-sec { padding:64px 0; }
.rp-sec.alt { background:#f7faff; border-top:1px solid var(--rp-line); border-bottom:1px solid var(--rp-line); }
.rp-h2 { font-size:clamp(1.45rem,2.6vw,1.9rem); font-weight:850; margin:0 0 14px; color:var(--rp-ink); }
.rp-narrow { max-width:780px; }
.rp-steps { counter-reset:rp; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:28px; }
.rp-step { position:relative; background:#fff; border:1px solid var(--rp-line); border-radius:14px; padding:22px 18px 18px; }
.rp-step::before { counter-increment:rp; content:counter(rp); position:absolute; top:-14px; left:18px; width:30px; height:30px; border-radius:50%; background:var(--rp-blue); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:.9rem; }
.rp-step h3 { font-size:1rem; font-weight:800; margin:6px 0 8px; color:var(--rp-ink); }
.rp-step p { font-size:.92rem; margin:0; }
.rp-example { display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; }
.rp-ledger { background:#0b1f3a; color:#dbe7f7; border-radius:16px; padding:26px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92rem; }
.rp-ledger div { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(219,231,247,.15); }
.rp-ledger div:last-child { border:0; color:#fff; font-weight:800; font-size:1.05rem; }
.rp-duo { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:26px; }
.rp-card { background:#fff; border:1px solid var(--rp-line); border-radius:14px; padding:24px; }
.rp-card h3 { font-size:1.08rem; font-weight:800; margin:0 0 10px; color:var(--rp-ink); }
.rp-card i { color:var(--rp-blue); margin-right:8px; }
.rp-tips { list-style:none; padding:0; margin:22px 0 0; display:grid; gap:12px; }
.rp-tips li { background:#fff; border-left:4px solid var(--rp-blue); border-radius:8px; padding:14px 16px; color:var(--rp-muted); line-height:1.7; }
.rp-tips b { color:var(--rp-ink); }
.rp-band { background:linear-gradient(120deg,#0453a7,#0b6fd8); border-radius:20px; padding:44px; color:#fff; display:grid; grid-template-columns:1.4fr 1fr; gap:30px; align-items:center; }
.rp-band h2 { color:#fff; font-size:clamp(1.4rem,2.6vw,1.85rem); font-weight:850; margin:0 0 10px; }
.rp-band p { color:#dbeafe; margin:0; }
.rp-band .rp-ctas { justify-content:flex-end; margin:0; }
.rp-band .rp-btn-main { background:#fff; color:var(--rp-blue); }
.rp-band .rp-btn-alt { background:transparent; color:#fff; border-color:#fff; }
.rp-faq details { background:#fff; border:1px solid var(--rp-line); border-radius:12px; margin-bottom:12px; }
.rp-faq summary { cursor:pointer; padding:18px 20px; font-weight:750; color:var(--rp-ink); list-style:none; display:flex; justify-content:space-between; gap:12px; }
.rp-faq summary::-webkit-details-marker { display:none; }
.rp-faq summary::after { content:"+"; color:var(--rp-blue); font-weight:900; }
.rp-faq details[open] summary::after { content:"−"; }
.rp-faq details p { padding:0 20px 18px; margin:0; }
.rp-related { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:20px; }
.rp-related a { display:block; background:#fff; border:1px solid var(--rp-line); border-radius:12px; padding:16px; text-decoration:none; color:var(--rp-ink); font-weight:700; font-size:.92rem; }
.rp-related a:hover { border-color:var(--rp-blue); color:var(--rp-blue); }
.rp-related a span { display:block; font-weight:500; color:#64748b; font-size:.8rem; margin-top:4px; }

@media (max-width:991px) {
  .rp-hero-grid, .rp-example, .rp-band { grid-template-columns:1fr; }
  .rp-steps { grid-template-columns:1fr 1fr; }
  .rp-related { grid-template-columns:1fr 1fr; }
  .rp-band .rp-ctas { justify-content:flex-start; }
}
@media (max-width:575px) {
  .rp-fields, .rp-steps, .rp-duo, .rp-mini, .rp-related { grid-template-columns:1fr; }
  .rp-band { padding:28px 20px; }
  .rp-sec { padding:48px 0; }
}