/* ===== Modern Mobile Number Calculator UI ===== */
:root{
  --mnc-green:#16a34a;
  --mnc-green-d:#15803d;
  --mnc-green-dd:#166534;
  --mnc-ink:#0f172a;
  --mnc-body:#475569;
  --mnc-muted:#94a3b8;
  --mnc-line:#e7ebf0;
  --mnc-bg:#f6f8f9;
  --mnc-radius:18px;
  --mnc-shadow:0 10px 30px -12px rgba(15,23,42,.15);
  --mnc-shadow-sm:0 4px 14px -6px rgba(15,23,42,.12);
}
.mnc-wrap{font-family:'Helvetica Neue Custom','Helvetica Neue',Helvetica,Arial,sans-serif;color:var(--mnc-body);}
.mnc-wrap h1,.mnc-wrap h2,.mnc-wrap h3,.mnc-wrap h4{color:var(--mnc-ink);}

/* Hero heading */
.mnc-hero{text-align:center;max-width:760px;margin:0 auto 34px;}
.mnc-hero .badge-pill{display:inline-flex;align-items:center;gap:7px;background:#eafaf0;color:var(--mnc-green-d);font-weight:700;font-size:13px;letter-spacing:.4px;text-transform:uppercase;padding:7px 16px;border-radius:999px;border:1px solid #cdeed7;margin-bottom:16px;}
.mnc-hero h1{font-size:40px;font-weight:700;line-height:1.15;margin:0 0 14px;letter-spacing:-.5px;}
.mnc-hero h1 span{background:linear-gradient(120deg,var(--mnc-green) 0%,var(--mnc-green-dd) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.mnc-hero p{font-size:17px;line-height:1.65;color:var(--mnc-body);margin:0;}

/* Form card */
.mnc-box{background:#fff;border:1px solid var(--mnc-line);border-radius:22px;padding:34px 32px;margin-bottom:34px;box-shadow:var(--mnc-shadow);}
.mnc-box .box-head{text-align:center;margin-bottom:26px;}
.mnc-box .box-head h3{margin:0 0 6px;font-size:22px;font-weight:700;color:var(--mnc-ink);}
.mnc-box .box-head p{margin:0;color:var(--mnc-muted);font-size:14.5px;}
.mnc-field{margin-bottom:20px;}
.mnc-field label{display:block;font-weight:600;color:var(--mnc-ink);font-size:14px;margin-bottom:8px;}
.mnc-field label .req{color:var(--mnc-green);}
.mnc-box .form-control{height:54px;font-size:16px;border:1.5px solid var(--mnc-line);border-radius:13px;background:#fbfcfd;color:var(--mnc-ink);box-shadow:none;transition:border-color .18s,box-shadow .18s,background .18s;padding:0 16px;}
.mnc-box .form-control:focus{border-color:var(--mnc-green);background:#fff;box-shadow:0 0 0 4px rgba(22,163,74,.12);}
.mnc-box .form-control::placeholder{color:#b6c0cc;}

/* Toggle-style checkboxes */
.mnc-check{display:flex;align-items:center;gap:12px;background:#fbfcfd;border:1.5px solid var(--mnc-line);border-radius:13px;padding:14px 16px;margin-bottom:12px;cursor:pointer;transition:border-color .18s,background .18s;}
.mnc-check:hover{border-color:#cdeed7;}
.mnc-check label{font-weight:600;cursor:pointer;margin:0;color:var(--mnc-ink);font-size:14.5px;flex:1;}
.mnc-check input{width:20px;height:20px;accent-color:var(--mnc-green);cursor:pointer;margin:0;flex:0 0 auto;}
.mnc-error{color:#dc2626;font-weight:600;display:none;margin-top:16px;background:#fef2f2;border:1px solid #fecaca;border-radius:12px;padding:12px 16px;font-size:14.5px;}

/* Primary button */
.mnc-submit{width:100%;height:56px;font-size:17px;font-weight:700;color:#fff;border:0;border-radius:14px;margin-top:8px;cursor:pointer;background:linear-gradient(120deg,var(--mnc-green) 0%,var(--mnc-green-dd) 100%);box-shadow:0 12px 24px -10px rgba(22,163,74,.7);transition:transform .15s,box-shadow .15s,filter .15s;}
.mnc-submit:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 18px 30px -12px rgba(22,163,74,.75);}
.mnc-submit:active{transform:translateY(0);}

#mnc_result{display:none;}

/* Generic card */
.mnc-card{background:#fff;border:1px solid var(--mnc-line);border-radius:var(--mnc-radius);padding:26px;margin-bottom:22px;box-shadow:var(--mnc-shadow-sm);}
.mnc-card h3{margin:0 0 20px;font-size:19px;font-weight:700;color:var(--mnc-ink);display:flex;align-items:center;gap:8px;}

/* Stat tiles */
.mnc-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;text-align:center;}
.mnc-stat{background:linear-gradient(180deg,#f8faf9 0%,#eef4f0 100%);border:1px solid var(--mnc-line);border-radius:14px;padding:18px 8px;transition:transform .15s,box-shadow .15s;}
.mnc-stat:hover{transform:translateY(-3px);box-shadow:var(--mnc-shadow-sm);}
.mnc-stat .lbl{margin:0;color:var(--mnc-muted);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.mnc-stat .val{margin:8px 0 0;font-size:34px;font-weight:700;color:var(--mnc-green-d);line-height:1;}
.mnc-stat .sub{display:block;font-size:12px;color:var(--mnc-muted);margin-top:4px;font-weight:400;}

/* Score hero */
.mnc-score{position:relative;overflow:hidden;background:linear-gradient(135deg,#14532d 0%,#16a34a 55%,#22c55e 100%);border-radius:24px;padding:38px 24px;color:#fff;text-align:center;margin-bottom:24px;box-shadow:0 22px 44px -20px rgba(20,83,45,.8);}
.mnc-score:before{content:"";position:absolute;top:-60px;right:-40px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.10);}
.mnc-score:after{content:"";position:absolute;bottom:-70px;left:-30px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.07);}
.mnc-score h3{position:relative;margin:0 0 4px;font-size:14px;text-transform:uppercase;color:#dcfce7;letter-spacing:2px;font-weight:700;}
.mnc-score .total{position:relative;font-size:68px;font-weight:700;line-height:1;margin:14px 0;letter-spacing:-1px;}
.mnc-score .total small{font-size:22px;color:#bbf7d0;font-weight:600;}
.mnc-score .band{position:relative;font-size:18px;font-weight:700;margin:0;}
.mnc-chips{position:relative;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:22px;}
.mnc-chips span{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);padding:8px 15px;border-radius:12px;font-size:13.5px;backdrop-filter:blur(4px);}

/* Verdict */
.mnc-verdict{border-radius:16px;border:1.5px solid;padding:24px;margin-bottom:22px;box-shadow:var(--mnc-shadow-sm);}
.mnc-verdict .head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:14px;}
.mnc-verdict .head h4{margin:0;font-size:24px;font-weight:700;}
.mnc-tag{background:rgba(255,255,255,.9);padding:5px 14px;border-radius:999px;font-size:12.5px;font-weight:700;border:1px solid;letter-spacing:.3px;}
.v-verygood{background:#f0fdf4;border-color:#86efac;color:#166534;}
.v-good{background:#eff6ff;border-color:#93c5fd;color:#1e40af;}
.v-bad{background:#fef2f2;border-color:#fca5a5;color:#b91c1c;}
.v-neutral{background:#fffbeb;border-color:#fcd34d;color:#b45309;}
.mnc-inner{background:rgba(255,255,255,.7);border-radius:12px;padding:13px 16px;margin-top:14px;border-left:4px solid;}

/* Match rows */
.mnc-match{padding:16px 18px;border-radius:14px;margin-bottom:12px;font-size:15.5px;font-weight:600;border:1px solid;}
.mnc-match.ok{background:#f0fdf4;border-color:#bbf7d0;color:#15803d;}
.mnc-match.no{background:#fef2f2;border-color:#fecaca;color:#dc2626;}
.mnc-match.info{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8;}
.mnc-match.warn{background:#fff7ed;border-color:#fed7aa;color:#c2410c;}

/* Lists */
.mnc-list{background:#fffbeb;border:1px solid #fde68a;border-left:4px solid #f59e0b;border-radius:14px;padding:18px 18px 18px 22px;margin-bottom:22px;}
.mnc-list p{margin:0 0 10px;font-weight:700;color:#b45309;}
.mnc-list ul{margin:0;padding-left:20px;}
.mnc-list li{margin-bottom:6px;line-height:1.55;}
.mnc-list.pink{background:#fdf2f8;border-color:#fbcfe8;border-left-color:#ec4899;}
.mnc-list.pink p{color:#be185d;}

/* Combination cards */
.mnc-combo{border-radius:16px;border:1.5px solid;padding:18px 20px;margin-bottom:14px;box-shadow:var(--mnc-shadow-sm);}
.mnc-combo .top{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.mnc-combo .pair{font-size:32px;font-weight:700;letter-spacing:4px;margin:0;}
.mnc-combo .impact{font-size:12.5px;font-weight:700;opacity:.85;display:block;margin-top:4px;text-align:right;}
.mnc-combo .desc{margin:12px 0 0;color:var(--mnc-body);line-height:1.6;}

/* Lo Shu grid */
.mnc-grid{display:grid;grid-template-columns:repeat(3,96px);gap:10px;margin:0 auto 22px;justify-content:center;}
.mnc-cell{width:96px;height:96px;display:flex;align-items:center;justify-content:center;font-size:23px;font-weight:700;border-radius:16px;background:#eff6ff;color:var(--mnc-ink);border:1.5px solid #e2e8f0;transition:transform .15s;}
.mnc-cell:hover{transform:scale(1.04);}
.mnc-cell.lucky{background:linear-gradient(160deg,#22c55e,#16a34a);color:#fff;border-color:transparent;}
.mnc-cell.enemy{background:linear-gradient(160deg,#f87171,#ef4444);color:#fff;border-color:transparent;}
.mnc-cell.miss{border:2px dashed #f1bcbc;}
.mnc-cell.one{box-shadow:inset 0 0 0 3px #a855f7;}
.mnc-cell.many{box-shadow:inset 0 0 0 4px #d4a933;}
.mnc-legend{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;font-size:13px;border-top:1px solid var(--mnc-line);padding-top:18px;color:var(--mnc-body);}
.mnc-legend div{display:flex;align-items:center;gap:7px;}
.mnc-legend i{width:16px;height:16px;display:inline-block;border-radius:5px;}
.mnc-pill{background:#f0fdf4;border:1px solid #86efac;color:#166534;border-radius:999px;padding:5px 14px;font-weight:700;}

/* Premium block */
.mnc-premium{background:rgba(255,255,255,.65);border-radius:14px;border-left:4px solid;padding:16px 18px;margin-top:16px;}
.mnc-premium p{margin:0;font-size:14.5px;line-height:1.65;}
.mnc-premium span{color:var(--mnc-body);}
.mnc-note{font-size:13px;color:var(--mnc-muted);margin-top:24px;line-height:1.6;}

/* Content sections */
.mnc-wrap h2.heading-line{margin-top:44px;}
.mnc-wrap > p{font-size:16px;line-height:1.85;color:var(--mnc-body);margin-bottom:18px;}

/* "How it works" icon list */
.mnc-hiw{list-style:none;padding:0;margin:0 0 24px;}
.mnc-hiw li{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--mnc-line);border-radius:14px;padding:18px 20px;margin-bottom:14px;line-height:1.85;box-shadow:var(--mnc-shadow-sm);transition:transform .15s,box-shadow .15s;}
.mnc-hiw li:hover{transform:translateY(-2px);box-shadow:var(--mnc-shadow);}
.mnc-hiw li div{color:var(--mnc-body);font-size:15.5px;}
.mnc-hiw li strong{color:var(--mnc-ink);font-weight:700;}
.mnc-hiw-ic{flex:0 0 auto;width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;box-shadow:var(--mnc-shadow-sm);}
.mnc-hiw-ic.c1{background:linear-gradient(160deg,#22c55e,#16a34a);}
.mnc-hiw-ic.c2{background:linear-gradient(160deg,#60a5fa,#2563eb);}
.mnc-hiw-ic.c3{background:linear-gradient(160deg,#fbbf24,#f59e0b);}
.mnc-hiw-ic.c4{background:linear-gradient(160deg,#f87171,#ef4444);}
.mnc-hiw-ic.c5{background:linear-gradient(160deg,#c084fc,#9333ea);}

/* Deep dive accordion */
.mnc-deep{text-align:left;padding:30px;border-radius:22px;background:#fff;border:1px solid var(--mnc-line);margin-top:44px;box-shadow:var(--mnc-shadow-sm);}
.mnc-deep h3{color:var(--mnc-ink);margin:0 0 22px;font-size:24px;font-weight:700;}
.mnc-deep details{background:#f8faf9;border-radius:14px;border:1px solid var(--mnc-line);padding:4px;margin-bottom:14px;transition:box-shadow .18s;}
.mnc-deep details[open]{box-shadow:var(--mnc-shadow-sm);}
.mnc-deep summary{font-weight:700;font-size:17px;color:var(--mnc-green-d);cursor:pointer;padding:16px;outline:none;list-style:none;display:flex;align-items:center;}
.mnc-deep summary::-webkit-details-marker{display:none;}
.mnc-deep summary:before{content:"+";display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;background:#eafaf0;color:var(--mnc-green-d);margin-right:12px;font-size:20px;line-height:1;flex:0 0 auto;transition:transform .2s;}
.mnc-deep details[open] summary:before{content:"\2212";}
.mnc-deep-body{padding:6px 18px 18px;color:var(--mnc-body);line-height:1.65;}
.mnc-eg{background:#f0fdf4;padding:16px;border-radius:12px;margin:16px 0;border-left:4px solid var(--mnc-green);}

/* CTAs */
.mnc-btn{display:inline-block;color:#fff !important;padding:12px 22px;border-radius:12px;text-decoration:none;font-weight:700;margin-right:10px;margin-top:8px;transition:transform .15s,box-shadow .15s;box-shadow:var(--mnc-shadow-sm);}
.mnc-btn:hover{transform:translateY(-2px);color:#fff;text-decoration:none;}
.mnc-btn.wa{background:#25D366;}
.mnc-btn.book{background:#f97316;}
.mnc-btn.basics{background:#2563eb;}

/* What we do */
.mnc-wwd{background:linear-gradient(180deg,#f0fdf4 0%,#f7fdf9 100%);border:1px solid #cdeed7;border-radius:24px;padding:34px 26px;margin-top:16px;color:var(--mnc-body);text-align:left;}
.mnc-wwd-card{background:#fff;border:1px solid #cdeed7;border-radius:18px;padding:26px;margin-bottom:26px;box-shadow:var(--mnc-shadow-sm);}
.mnc-wwd-title{color:var(--mnc-ink);font-size:21px;border-bottom:1px solid #cdeed7;padding-bottom:12px;margin:0 0 20px;}
.mnc-wwd-list{list-style:none;padding:0;margin:0;font-size:15.5px;line-height:1.8;}
.mnc-wwd-row{display:flex;flex-wrap:wrap;gap:22px;}
.mnc-wwd-half{flex:1 1 300px;background:#fff;padding:24px;border-radius:16px;border:1px solid var(--mnc-line);box-shadow:var(--mnc-shadow-sm);}
.mnc-wwd-half h4{color:var(--mnc-green-dd);margin-top:0;font-size:18px;}
.mnc-wwd-grid{display:flex;flex-wrap:wrap;gap:10px;}
.mnc-wwd-grid span{flex:1 1 21%;background:#f0fdf4;color:var(--mnc-green-dd);padding:8px;border-radius:10px;font-weight:700;text-align:center;border:1px solid #d6f2e0;}
.mnc-wwd-place{padding-left:20px;font-size:15px;margin:0;line-height:1.7;}
.mnc-wwd-place span{font-weight:700;}

@media (max-width:767px){
  .mnc-hero h1{font-size:30px;}
  .mnc-hero p{font-size:15.5px;}
  .mnc-box{padding:24px 20px;}
  .mnc-stats{grid-template-columns:repeat(2,1fr);}
  .mnc-stat .val{font-size:28px;}
  .mnc-score{padding:30px 18px;}
  .mnc-score .total{font-size:52px;}
  .mnc-grid{grid-template-columns:repeat(3,1fr);width:100%;}
  .mnc-cell{width:100%;height:74px;font-size:19px;border-radius:13px;}
  .mnc-combo .pair{font-size:26px;}
  .mnc-verdict .head h4{font-size:20px;}
}
