/* Build 173 — MDFAST Recce Pro front page (on top of the website's site.css) */
.rp-top{display:flex;flex-direction:column;gap:14px;padding:22px 0 18px}
.rp-top h1{font-size:clamp(30px,4.6vw,50px);max-width:1000px}
.rp-top h1 em{font-style:normal;color:var(--accent)}
/* ---- the hero banner ---- */
.rh{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:0;background:radial-gradient(120% 90% at 20% 10%,#1d3157 0%,#101b33 55%,#0b1326 100%);border-radius:22px;color:#e8eefb;overflow:hidden;box-shadow:0 24px 60px -24px rgba(16,27,51,.55);position:relative;min-height:520px}
.rh:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:22px 22px;pointer-events:none}
.rh-map{position:relative;padding:12px 6px 6px 10px}
.rh-map svg{width:100%;height:auto;display:block;max-height:640px}
.rh-land path{stroke:#4f74b3;stroke-width:.7;stroke-linejoin:round}
.rh-route{fill:none;stroke:#F2A65A;stroke-width:1.6;stroke-linecap:round;opacity:1;transition:opacity .6s}
.rh-route.ship{stroke:#5fd0a3;stroke-dasharray:none;stroke-width:1.4}
.rh-talk{fill:none;stroke:#9fb8e8;stroke-width:1.6;stroke-dasharray:3 5;opacity:.45}
.rh-talk.on{stroke:#F2A65A;opacity:1;animation:rhFlow .5s linear infinite}
@keyframes rhFlow{to{stroke-dashoffset:-16}}
.rh-none{fill:none;stroke:none}
.rh-node{fill:#9fb8e8;stroke:#0b1326;stroke-width:2}
.rh-city.hub .rh-node{fill:#F2A65A}
.rh-ring{fill:none;stroke:#F2A65A;stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.rh-city.hub .rh-ring{opacity:.9;animation:rhPulse 2s ease-out infinite}
.rh-city.given .rh-node{fill:#F2A65A}
.rh-city.recced .rh-ring{opacity:1;animation:rhPulse 1.6s ease-out infinite}
.rh-city.done .rh-node{fill:#34d399}
.rh-city.done .rh-ring{stroke:#34d399}
.rh-city.busy .rh-ring,.rh-city.approved .rh-ring,.rh-city.thanks .rh-ring{stroke:#34d399;animation-duration:.9s}
.rh-city.approved .rh-node,.rh-city.thanks .rh-node{fill:#34d399}
@keyframes rhPulse{0%{transform:scale(1);opacity:.95}100%{transform:scale(3.4);opacity:0}}
.rh-halo{opacity:.0;transition:opacity .4s}.rh-city.hub .rh-halo,.rh-city.given .rh-halo{opacity:1}
.rh-name{fill:#fff;font:700 13px "DM Sans",system-ui,sans-serif;paint-order:stroke;stroke:#0b1326;stroke-width:3px}
.rh-city.hub .rh-name{font-size:15px;fill:#F2A65A}
.rh-sub{fill:#9fb8e8;font:500 10px "DM Sans",system-ui,sans-serif;paint-order:stroke;stroke:#0b1326;stroke-width:3px}
.rh-k{opacity:0;transition:opacity .4s}.rh-city.recced .rh-k{opacity:1}
.rh-badge,.rh-card{opacity:0;transition:opacity .15s}
.rh-badge-bg{fill:#C4561B;stroke:#fff;stroke-width:1.2}
.rh-card rect{fill:#fff}
.rh-card.photo rect:first-child{fill:#e2e8f0}.rh-card.photo .lens{fill:#1d3157;stroke:#fff;stroke-width:1.2}.rh-card.photo rect:last-child{fill:#e2e8f0}
.rh-card.board rect:first-child{fill:#F2A65A;stroke:#fff;stroke-width:1.2}.rh-card.board .ln{fill:#fff}
.rh-card .doc-t{font:800 8.5px "DM Sans",sans-serif;fill:#C4561B}
.rh-pop{opacity:0;transform-box:fill-box;transform-origin:center}
.rh-pop .ok{fill:#16a34a;stroke:#fff;stroke-width:1.5}.rh-pop .tick{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rh-pop .thumb{font-size:15px}
.rh-toast{position:absolute;left:50%;bottom:18px;transform:translate(-50%,12px);background:#16a34a;color:#fff;font:700 15px "DM Sans",sans-serif;padding:9px 16px;border-radius:999px;opacity:0;transition:all .35s;white-space:nowrap;box-shadow:0 10px 26px -8px rgba(0,0,0,.6)}
.rh-toast.on{opacity:1;transform:translate(-50%,0)}
.rh-side{display:flex;flex-direction:column;gap:16px;padding:26px 26px 24px 8px;position:relative}
.rh-live{font:700 12px "DM Sans",sans-serif;letter-spacing:1.5px;color:#9fb8e8;display:flex;align-items:center;gap:8px}
.rh-dot{width:9px;height:9px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 0 rgba(239,68,68,.7);animation:rhLive 1.4s infinite}
@keyframes rhLive{70%{box-shadow:0 0 0 9px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
.rh-count{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rh-count div{background:rgba(255,255,255,.06);border:1px solid rgba(159,184,232,.18);border-radius:12px;padding:9px 8px;display:flex;flex-direction:column;align-items:flex-start}
.rh-count b{font:700 24px "Sora",sans-serif;color:#fff;font-variant-numeric:tabular-nums}
.rh-count span{font-size:11.5px;color:#9fb8e8}
.rh-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rh-steps li{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;position:relative;overflow:hidden;opacity:.45;transition:opacity .3s,background .3s}
.rh-steps li i{font-style:normal;font-size:19px;text-align:center}
.rh-steps li b{display:block;font-size:14.5px;color:#fff}.rh-steps li small{display:block;font-size:12px;color:#9fb8e8;line-height:1.3}
.rh-steps li em{position:absolute;left:0;bottom:0;height:3px;background:#F2A65A;width:0}
.rh-steps li.past{opacity:.75}.rh-steps li.past em{background:#34d399}
.rh-steps li.on{opacity:1;background:rgba(242,166,90,.13)}
.rh-pain{margin-top:auto;border-radius:14px;background:rgba(0,0,0,.25);border:1px solid rgba(159,184,232,.18);padding:12px 14px;display:flex;flex-direction:column;gap:6px;min-height:92px}
.rh-pain div{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.35}
.rh-pain span{flex:none}
.rh-p1 b{color:#fca5a5;font-weight:700;position:relative}
.rh-p2 b{color:#86efac;font-weight:700}
.rh-p2{opacity:0;transform:translateY(6px);transition:all .35s}
.rh-pain.go .rh-p1{animation:rhShake .5s 2}
@keyframes rhShake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.rh-pain.fix .rh-p1 b{text-decoration:line-through;text-decoration-thickness:2px;opacity:.6}
.rh-pain.fix .rh-p2{opacity:1;transform:none}
@media (max-width:900px){.rh{grid-template-columns:1fr}.rh-side{padding:4px 16px 18px}.rh-map{padding:8px 4px 0}}
@media (max-width:520px){.rh-count b{font-size:19px}.rh-count span{font-size:10.5px}.rh-steps li small{display:none}.rh-toast{font-size:13px}}
/* ---- pain → fix cards ---- */
.rp-sec{padding:46px 0 10px}
.rp-sec>h2{font-size:clamp(26px,3.4vw,36px);margin-bottom:6px}
.rp-sec>p.lead{margin-bottom:18px}
.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.pf{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 16px 14px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s}
.pf .bad{color:var(--bad);font-weight:700;display:flex;gap:8px}
.pf .good{color:var(--ok);font-weight:700;display:flex;gap:8px;border-top:1px dashed var(--line);padding-top:10px}
.pf .bad span,.pf .good span{flex:none;white-space:normal}.pf .bad span+span,.pf .good span+span{flex:1 1 auto;min-width:0}
.pf.flash{transform:translateY(-4px);box-shadow:0 16px 34px -18px rgba(196,86,27,.6);border-color:var(--accent)}
.pf.flash .bad{animation:pfBlink .45s 3}
@keyframes pfBlink{50%{opacity:.25}}
/* ---- workflow ---- */
.wf{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;counter-reset:wf}
.wf div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:6px}
.wf div:before{counter-increment:wf;content:counter(wf);width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font:700 14px "Sora",sans-serif}
.wf b{font-size:16px}.wf small{color:var(--mute);font-size:14px;line-height:1.4}
/* ---- reports ---- */
.reps{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.rep{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.rep img{width:100%;height:auto;display:block;border-bottom:1px solid var(--line);background:#fff}
.rep div{padding:12px 14px;display:flex;flex-direction:column;gap:4px}.rep small{color:var(--mute)}
.fmt{display:inline-flex;gap:6px;flex-wrap:wrap}.fmt i{font-style:normal;font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.rp-cta{margin:46px 0 30px;background:var(--ink);color:var(--paper);border-radius:20px;padding:28px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.rp-cta h2{color:#fff;font-size:clamp(22px,3vw,30px)}
.rp-cta p{margin:6px 0 0;color:#c9d3e3}
@media (max-width:520px){.rh-name{font-size:18px}.rh-city.hub .rh-name{font-size:19px}.rh-sub{display:none}}