/* Build 197 — MDFAST ID Card Platform front page (id.mdfast.in), on top of the website's site.css. The shared parts come from the Recce Pro page (same MDFAST look). */

.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 ---- */
@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(200,16,46,.6);border-color:var(--accent)}
.pf.flash .bad{animation:pfBlink .45s 3}
@keyframes pfBlink{50%{opacity:.25}}
/* ---- 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:#AFC2EA}
@media (max-width:520px){.rh-name{font-size:18px}.rh-city.hub .rh-name{font-size:19px}.rh-sub{display:none}}

/* ---- build 179: professional — Pantone 186 C red, 123 C yellow, 2766 C indigo; 3D depth, no text shadows ---- */
body.recce-look h1,body.recce-look h2,body.recce-look h3,body.recce-look .hero h1,body.recce-look .rp-cta h2{text-shadow:none!important}
body.recce-look .kicker{color:#C8102E;font-weight:700;letter-spacing:1.2px}
body.recce-look .rp-top h1{color:#141B4D}
body.recce-look .rp-top h1 em{color:#C8102E;background:none;padding:0}
body.recce-look .btn.orange{background:#C8102E;border-color:#C8102E;color:#fff}
body.recce-look .btn.ghost{border-color:#141B4D;color:#141B4D}
body.recce-look .nav .btn.small{background:#141B4D;color:#fff;border-color:#141B4D}
/* pain → fix cards: one quiet card style, no emoji */
.pf{border:1px solid #E3E6EF;border-radius:14px;box-shadow:0 1px 0 #fff inset,0 14px 30px -18px rgba(20,27,77,.35)}
.pf .bad,.pf .good{font-weight:600;align-items:flex-start}
.pf .bad{color:#3A3F55}.pf .good{color:#141B4D;border-top:1px solid #E3E6EF}
.pf .bad span:first-child,.pf .good span:first-child{font:700 10px var(--fh,"Montserrat"),sans-serif;letter-spacing:.6px;text-transform:uppercase;padding:3px 6px;border-radius:5px;margin-top:2px}
.pf .bad span:first-child{background:#FBE7EA;color:#C8102E}.pf .good span:first-child{background:#141B4D;color:#FFC72C}
.pf.flash{transform:translateY(-3px);border-color:#C8102E;box-shadow:0 18px 34px -18px rgba(20,27,77,.45)}
.pf.flash .bad{animation:none}
.rep{border:1px solid #E3E6EF;box-shadow:0 1px 0 #fff inset,0 16px 34px -18px rgba(20,27,77,.35)}
.fmt i{background:#EEF0F7;color:#141B4D;border:1px solid #DCE0EC}
/* pricing: three plain cards, a coloured top edge, line icons */
.rp-call .cc-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:6px 0 12px}
.cc{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:20px 22px;border-radius:14px;text-decoration:none;color:#141B4D;background:#fff;border:1px solid #E3E6EF;border-top:4px solid #141B4D;box-shadow:0 1px 0 #fff inset,0 18px 34px -20px rgba(20,27,77,.45);transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s,box-shadow .3s}
.cc:hover{transform:translateY(-3px);box-shadow:0 24px 40px -20px rgba(20,27,77,.5)}
.cc svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cc b{font:700 20px var(--fh,"Montserrat"),sans-serif}.cc small{font-size:15px;color:#5A607A}
.cc.call{border-top-color:#C8102E}.cc.call svg{color:#C8102E}.cc.wa{border-top-color:#FFC72C}.cc.wa svg{color:#B88A00}.cc.demo svg{color:#141B4D}
.rp-cta{background:#141B4D;box-shadow:0 26px 50px -26px rgba(20,27,77,.7)}
.rp-cta h2{color:#fff}.rp-cta p{color:#C9D3E8}
body.recce-look .rp-cta .btn.orange{background:#FFC72C;color:#141B4D;border-color:#FFC72C}
@media (prefers-reduced-motion:reduce){.rh,.rh:hover{transform:none}}
@media (max-width:900px){.rh{transform:none}}
body.recce-look::after{display:none}
/* ---- build 181: balanced layout — equal columns, even spacing, a level map panel ---- */
.rp-top{padding:26px 0 22px;gap:16px}
.rp-top .hero-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center}
.rp-top .hero-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.rp-sec{padding:64px 0 0}
.rp-sec>h2{margin-bottom:8px}.rp-sec>p.lead{margin:0 0 24px;max-width:780px}
.pf-grid,.reps,.rp-call .cc-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pf{height:100%;padding:18px 18px 16px}
.pf .bad{min-height:3.2em}
.rep{height:100%}.rep div{flex:1}
.rep img{aspect-ratio:760/537;object-fit:cover}
.cc{height:100%}
.rp-call .soft{margin-top:14px}
.rp-cta{margin:64px 0 40px;padding:30px 34px}
body.recce-look::before{opacity:.18}
@media (max-width:980px){.pf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.reps,.rp-call .cc-row{gap:14px}.cc{padding:16px}.cc b{font-size:18px}.rp-top .hero-row{grid-template-columns:1fr}.rp-top .hero-btns{justify-content:flex-start}}
@media (max-width:640px){.pf-grid,.reps,.rp-call .cc-row{grid-template-columns:1fr}.rp-sec{padding-top:44px}.rp-cta{padding:24px 20px}}

/* ---------------- build 197: the ID Card Platform page ---------------- */
:root { --ind: #141B4D; --red: #C8102E; --yel: #FFC72C; }
.idh { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: 26px 0 18px; }
.idh h1 { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.08; color: var(--ind); margin: 8px 0 14px; }
.idh h1 em { font-style: normal; color: var(--red); }
.idh .lead { font-size: 18px; line-height: 1.55; color: #3A3F55; max-width: 620px; }
.idh .hero-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.id-trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; font-size: 14.5px; color: #3A3F55; }
.id-trust span::before { content: "✓"; color: #12855e; font-weight: 800; margin-right: 6px; }
/* hero: Excel rows become cards */
.idx { position: relative; background: radial-gradient(120% 100% at 80% 0%, #2a3576 0%, #141B4D 55%, #0d1238 100%); border-radius: 24px; padding: 22px; min-height: 430px; overflow: hidden; color: #E8EEFB; box-shadow: 0 34px 60px -30px rgba(20,27,77,.65); transform: perspective(1600px) rotateX(3deg); transition: transform .8s; }
.idx:hover { transform: perspective(1600px) rotateX(0deg); }
.idx::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; }
.idx-sheet { position: relative; z-index: 1; background: #fff; color: #1e293b; border-radius: 10px; width: 62%; font-size: 12.5px; box-shadow: 0 14px 30px -14px rgba(0,0,0,.6); overflow: hidden; }
.idx-sheet .h, .idx-sheet .r { display: grid; grid-template-columns: 34px 1.6fr .7fr .6fr 50px; }
.idx-sheet .h span { background: #141B4D; color: #fff; font-weight: 700; padding: 6px; }
.idx-sheet .r span { padding: 5px 6px; border-top: 1px solid #e3e5ee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idx-sheet .r.on { background: #FFF3CD; box-shadow: inset 3px 0 0 #C8102E; }
.idx-tag { position: relative; z-index: 1; display: inline-block; margin: 0 0 8px; font: 700 11px Montserrat, sans-serif; letter-spacing: .8px; text-transform: uppercase; color: #FFC72C; }
.idx-fan { position: absolute; right: 18px; bottom: 26px; width: 200px; height: 300px; z-index: 2; perspective: 900px; }
.idx-card { position: absolute; left: 30px; top: 0; width: 150px; height: 238px; border-radius: 9px; background: #fff; box-shadow: 0 22px 40px -18px rgba(0,0,0,.7); transition: transform .7s cubic-bezier(.2,.9,.3,1.2), opacity .5s; overflow: hidden; }
.idx-card svg { width: 100%; height: 100%; display: block; }
.idx-flow { position: absolute; z-index: 1; left: 58%; top: 46%; font-size: 30px; color: #FFC72C; animation: idxFf 1.6s linear infinite; }
@keyframes idxFf { 0% { transform: translateX(-10px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateX(40px); opacity: 0; } }
.idx-stat { position: absolute; z-index: 3; left: 22px; bottom: 22px; display: flex; gap: 10px; }
.idx-stat b { display: block; font: 800 26px Montserrat, sans-serif; color: #fff; } .idx-stat small { color: #AFC2EA; font-size: 12.5px; }
.idx-stat > div { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 8px 12px; }
/* who it is for */
.who { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.who > div { background: #fff; border: 1px solid #E3E6EF; border-radius: 18px; padding: 22px; box-shadow: 0 16px 34px -20px rgba(20,27,77,.35); position: relative; overflow: hidden; }
.who > div::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--red); } .who > div.b2b::before { background: var(--ind); }
.who .tag { display: inline-block; font: 800 11px Montserrat, sans-serif; letter-spacing: 1px; padding: 4px 9px; border-radius: 6px; background: #FBE7EA; color: var(--red); } .who .b2b .tag { background: #E8EBF7; color: var(--ind); }
.who h3 { font-size: 22px; color: var(--ind); margin: 10px 0 4px; } .who p { color: #3A3F55; margin: 0 0 10px; }
.who ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; } .who li { padding-left: 24px; position: relative; color: #1e293b; } .who li::before { content: "✓"; position: absolute; left: 0; color: #12855e; font-weight: 800; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; } .chips i { font-style: normal; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: #F1F3F9; color: var(--ind); border: 1px solid #DCE0EC; }
/* how it works */
.steps4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: s; }
.steps4 > div { background: #fff; border: 1px solid #E3E6EF; border-radius: 16px; padding: 18px; position: relative; }
.steps4 > div::before { counter-increment: s; content: counter(s); width: 36px; height: 36px; border-radius: 50%; background: var(--ind); color: var(--yel); font: 800 16px Montserrat, sans-serif; display: grid; place-items: center; margin-bottom: 10px; }
.steps4 b { font-size: 17px; color: var(--ind); display: block; margin-bottom: 4px; } .steps4 small { color: #3A3F55; font-size: 14.5px; line-height: 1.5; }
/* sizes + layouts */
.sizes { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.sz { background: #fff; border: 1px solid #E3E6EF; border-radius: 16px; padding: 14px 16px 12px; display: grid; justify-items: center; gap: 4px; flex: 1 1 150px; }
.sz b { color: var(--ind); font-size: 15.5px; } .sz small { color: #64748b; font-size: 13px; text-align: center; }
.lays { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.lay { background: #fff; border: 1px solid #E3E6EF; border-radius: 16px; padding: 14px; display: grid; gap: 6px; justify-items: center; text-align: center; }
.lay svg { width: 100%; height: 150px; } .lay b { color: var(--ind); font-size: 15px; } .lay small { color: #64748b; font-size: 13px; }
/* features */
.feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ft { background: #fff; border: 1px solid #E3E6EF; border-radius: 14px; padding: 16px; display: grid; grid-template-columns: 44px 1fr; gap: 2px 12px; align-items: start; }
.ft span { grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; background: #F1F3F9; display: grid; place-items: center; font-size: 22px; }
.ft b { color: var(--ind); font-size: 15.5px; } .ft small { color: #3A3F55; font-size: 14px; line-height: 1.45; }
/* privacy band */
.priv { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; background: #F1F3F9; border: 1px solid #DCE0EC; border-radius: 18px; padding: 20px 22px; }
.priv .ic { width: 64px; height: 64px; border-radius: 18px; background: var(--ind); color: var(--yel); display: grid; place-items: center; font-size: 30px; }
.priv b { color: var(--ind); font-size: 18px; } .priv p { margin: 4px 0 0; color: #3A3F55; }
/* plans */
.plans3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.pl { background: #fff; border: 1px solid #E3E6EF; border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 8px; position: relative; box-shadow: 0 16px 34px -22px rgba(20,27,77,.35); }
.pl.pop { border: 2px solid var(--red); } .pl.pop::after { content: "Most chosen"; position: absolute; top: -12px; right: 16px; background: var(--red); color: #fff; font: 700 12px Montserrat, sans-serif; padding: 4px 10px; border-radius: 999px; }
.pl .who2 { font-size: 13.5px; color: #64748b; } .pl h3 { color: var(--ind); font-size: 21px; margin: 0; }
.pl .price { font: 800 30px Montserrat, sans-serif; color: var(--ind); } .pl .price small { font-size: 14px; font-weight: 600; color: #64748b; } .pl .yr { font-size: 13.5px; color: #12855e; font-weight: 600; }
.pl ul { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 6px; font-size: 14.5px; } .pl li { padding-left: 22px; position: relative; } .pl li::before { content: "✓"; position: absolute; left: 0; color: #12855e; font-weight: 800; }
.pl .btn { margin-top: auto; }
.faq details { background: #fff; border: 1px solid #E3E6EF; border-radius: 12px; padding: 12px 16px; margin-bottom: 8px; } .faq summary { font-weight: 700; color: var(--ind); cursor: pointer; font-size: 16px; } .faq p { margin: 8px 0 0; color: #3A3F55; }
@media (max-width: 900px) { .idh { grid-template-columns: 1fr; } .who, .steps4 { grid-template-columns: 1fr; } .lays { grid-template-columns: repeat(2, 1fr); } .feats { grid-template-columns: 1fr; } .idx { min-height: 380px; } .idx-sheet { width: 100%; } .idx-fan { position: relative; right: auto; bottom: auto; margin: 14px auto 0; height: 250px; width: 200px; } .idx-flow { display: none; } .idx-stat { position: relative; left: 0; bottom: 0; margin-top: 12px; } }
@media (prefers-reduced-motion: reduce) { .idx-flow, .idx-card { animation: none !important; transition: none !important; } }