/* ==========================================================================
   Modern Solution Design™ — page-specific styles
   Extends style.css (global tokens: --primary-color, --space-*, --text-*, etc.)
   Prefix: msd- (Modern Solution Design) to avoid collisions with other pages
   ========================================================================== */

:root{
  --msd-ink: #0b1330;
  --msd-line: #e4e9f2;
  --msd-panel: #ffffff;
  --msd-panel-tint: #f6f9fc;
  --msd-radius-sm: 10px;
  --msd-radius: 16px;
  --msd-radius-lg: 22px;
  --msd-good: #10b981;
  --msd-warn: #f59e0b;
}

/* ---------- Hero ---------- */
.msd-hero{
  padding: 96px 0 72px;
  background:
    radial-gradient(1100px 480px at 82% -10%, rgba(12,132,192,0.14), transparent 60%),
    linear-gradient(180deg, #f3f8fc 0%, #ffffff 65%);
  border-bottom: 1px solid var(--msd-line);
  overflow: hidden;
}

.msd-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-weight:600;
  font-size: var(--text-sm);
  letter-spacing:.04em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: var(--space-lg);
}

.msd-hero-grid{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-2xl);
  align-items:center;
}

.msd-hero h1{
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height:1.15;
  margin-bottom: var(--space-lg);
  color: var(--msd-ink);
}

.msd-hero h1 .msd-accent{ color: var(--primary-color); }

.msd-hero-lede{
  font-size: var(--text-lg);
  color: var(--gray-color);
  max-width: 620px;
  margin-bottom: var(--space-md);
}

.msd-hero-sub{
  font-size: var(--text-base);
  color: var(--gray-color);
  max-width: 620px;
  margin-bottom: var(--space-xl);
}

.msd-hero-sub strong{ color: var(--msd-ink); }

.msd-tagline{
  font-family:'Poppins', sans-serif;
  font-weight:600;
  font-size: var(--text-xl);
  color: var(--msd-ink);
  margin: 0 0 var(--space-lg);
}

.msd-tagline .divider{ color: var(--primary-color); margin: 0 .4em; }

.msd-hero-cta{
  display:flex;
  flex-wrap:wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.msd-hero-points{
  display:flex;
  flex-wrap:wrap;
  gap: var(--space-md) var(--space-lg);
}

.msd-hero-points .key-point{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-weight:500;
  font-size: var(--text-sm);
  color: var(--msd-ink);
}

.msd-hero-points i{ color: var(--secondary-color); }

/* Signature: the "WYSIWYG" screen mock in the hero */
.msd-hero-visual{ position:relative; }

.msd-screen{
  background: var(--msd-panel);
  border: 1px solid var(--msd-line);
  border-radius: var(--msd-radius-lg);
  box-shadow: var(--shadow-lg);
  overflow:hidden;
}

.msd-screen-bar{
  display:flex;
  align-items:center;
  gap:6px;
  padding: 12px 16px;
  background: var(--msd-panel-tint);
  border-bottom: 1px solid var(--msd-line);
}

.msd-screen-bar span{
  width:9px; height:9px; border-radius:50%;
  background: var(--border-color);
}

.msd-screen-bar .label{
  margin-left:10px;
  font-size: var(--text-xs);
  color: var(--gray-color);
  font-family:'Montserrat',sans-serif;
}

.msd-screen-body{ padding: var(--space-lg); }

.msd-employee-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--msd-line);
  border-radius: var(--msd-radius);
  margin-bottom: var(--space-md);
}

.msd-avatar{
  width:44px; height:44px; border-radius:50%;
  background: var(--primary-light);
  color: var(--primary-dark);
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
  flex-shrink:0;
}

.msd-employee-meta{ flex:1; }
.msd-employee-meta .name{ font-weight:600; color: var(--msd-ink); font-size: var(--text-base); }
.msd-employee-meta .role{ font-size: var(--text-xs); color: var(--gray-color); }

.msd-salary{ text-align:right; }
.msd-salary .amount{ font-weight:700; font-size: var(--text-lg); color: var(--msd-ink); }
.msd-salary .delta{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size: var(--text-xs);
  font-weight:600;
  color: var(--msd-warn);
  background: #fff7e6;
  padding: 2px 8px;
  border-radius: 999px;
  margin-top:4px;
}

.msd-chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.msd-chip{
  font-size: var(--text-xs);
  color: var(--gray-color);
  background: var(--msd-panel-tint);
  border: 1px solid var(--msd-line);
  padding: 4px 10px;
  border-radius: 999px;
}

/* ---------- AI summary strip (crawlable answer paragraph) ---------- */
.msd-ai-summary{
  background: var(--dark-color);
  padding: var(--space-lg) 0;
}
.msd-ai-summary p{
  color:#cbd5e1;
  font-size: var(--text-sm);
  text-align:center;
  max-width:900px;
  margin:0 auto;
}

/* ---------- Problem / Why section ---------- */
.msd-problem{
  background: var(--light-color);
}

.msd-problem-grid{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-2xl);
  align-items:center;
}

.msd-problem-list{ list-style:none; }
.msd-problem-list li{
  display:flex;
  align-items:flex-start;
  gap:.7rem;
  padding: 10px 0;
  border-bottom: 1px dashed var(--msd-line);
  color: var(--gray-color);
}
.msd-problem-list li:last-child{ border-bottom:none; }
.msd-problem-list i{ color:#ef4444; margin-top:4px; }

.msd-problem-callout{
  background: var(--msd-panel);
  border-left: 4px solid var(--primary-color);
  border-radius: 0 var(--msd-radius) var(--msd-radius) 0;
  padding: var(--space-xl);
  box-shadow: var(--shadow);
  font-size: var(--text-lg);
  color: var(--msd-ink);
  font-family:'Poppins',sans-serif;
  font-weight:500;
}

/* ---------- Philosophy ---------- */
.msd-philosophy-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
}

.msd-philosophy-card{
  background: var(--lighter-color);
  border: 1px solid var(--border-color);
  border-radius: var(--msd-radius);
  padding: var(--space-xl);
}

.msd-philosophy-card h3{
  display:flex;
  align-items:center;
  gap:.6rem;
  color: var(--primary-dark);
  margin-bottom: var(--space-md);
  font-size: var(--text-xl);
}

.msd-philosophy-card h3 i{ color: var(--primary-color); }

.msd-flow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 8px;
  margin-top: var(--space-md);
  font-weight:600;
  font-size: var(--text-sm);
  color: var(--msd-ink);
}
.msd-flow span.tag{
  background: var(--primary-light);
  color: var(--primary-dark);
  padding: 6px 12px;
  border-radius: 999px;
}
.msd-flow i{ color: var(--gray-color); }

.msd-tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top: var(--space-md);
}
.msd-tag-row span{
  font-size: var(--text-xs);
  font-weight:600;
  background: var(--msd-panel-tint);
  border: 1px solid var(--msd-line);
  color: var(--gray-color);
  padding: 5px 10px;
  border-radius: 999px;
}

/* ---------- Consult grid (reuses .service-card look via custom class) ---------- */
.msd-consult-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}

.msd-consult-card{
  background: var(--lighter-color);
  border: 1px solid var(--border-color);
  border-radius: var(--msd-radius);
  padding: var(--space-xl);
  height:100%;
  transition: var(--transition);
}
.msd-consult-card:hover{
  transform: translateY(-5px);
  border-color: var(--primary-color);
  box-shadow: var(--shadow-lg);
}
.msd-consult-icon{
  width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
  border-radius: var(--msd-radius-sm);
  background: var(--primary-light);
  color: var(--primary-color);
  font-size: var(--text-xl);
  margin-bottom: var(--space-md);
}
.msd-consult-card h3{ font-size: var(--text-lg); margin-bottom: var(--space-sm); color: var(--msd-ink); }
.msd-consult-card ul{ list-style:none; margin-top: var(--space-sm); }
.msd-consult-card ul li{
  font-size: var(--text-sm);
  color: var(--gray-color);
  padding: 4px 0 4px 1.1rem;
  position:relative;
}
.msd-consult-card ul li::before{
  content:"";
  position:absolute;
  left:0; top:13px;
  width:5px; height:5px;
  border-radius:50%;
  background: var(--primary-color);
}

/* ---------- Principles ---------- */
.msd-principles-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap: var(--space-lg);
}
.msd-principle{
  padding: var(--space-lg);
  border-radius: var(--msd-radius);
  background: var(--msd-panel-tint);
  border: 1px solid var(--msd-line);
}
.msd-principle .num{
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size: var(--text-sm);
  color: var(--primary-color);
  letter-spacing:.05em;
}
.msd-principle h4{ margin: 6px 0 6px; font-size: var(--text-base); color: var(--msd-ink); }
.msd-principle p{ font-size: var(--text-sm); color: var(--gray-color); }

/* ---------- Payroll intelligence demo (interactive signature element) ---------- */
.msd-demo{
  background: var(--lighter-color);
}
.msd-demo-wrap{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}
.msd-demo-note{
  text-align:center;
  color: var(--gray-color);
  max-width: 700px;
  margin: 0 auto var(--space-xl);
  font-size: var(--text-sm);
}

.msd-payroll{
  background: var(--msd-panel-tint);
  border: 1px solid var(--msd-line);
  border-radius: var(--msd-radius-lg);
  padding: var(--space-xl);
}

.msd-payroll-row{
  background: var(--lighter-color);
  border: 1px solid var(--msd-line);
  border-radius: var(--msd-radius);
  margin-bottom: var(--space-md);
  overflow:hidden;
}

.msd-payroll-row:last-child{ margin-bottom:0; }

.msd-payroll-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--space-md);
  background:none;
  border:none;
  padding: var(--space-md) var(--space-lg);
  cursor:pointer;
  text-align:left;
  font-family:inherit;
}

.msd-payroll-toggle:hover{ background: var(--primary-light); }

.msd-payroll-left{ display:flex; align-items:center; gap:.9rem; }

.msd-payroll-toggle .msd-avatar{ width:40px; height:40px; font-size: var(--text-sm); }

.msd-payroll-name .name{ font-weight:600; color: var(--msd-ink); display:block; }
.msd-payroll-name .role{ font-size: var(--text-xs); color: var(--gray-color); }

.msd-payroll-right{ display:flex; align-items:center; gap: var(--space-lg); }

.msd-payroll-right .amount{ font-weight:700; color: var(--msd-ink); }

.msd-payroll-right .delta{
  font-size: var(--text-xs);
  font-weight:700;
  padding: 3px 10px;
  border-radius: 999px;
}
.msd-payroll-right .delta.up{ color:#b45309; background:#fff7e6; }
.msd-payroll-right .delta.flat{ color: var(--gray-color); background: var(--msd-panel-tint); }

.msd-payroll-toggle i.chev{ color: var(--gray-color); transition: var(--transition-fast); }
.msd-payroll-row.open .msd-payroll-toggle i.chev{ transform: rotate(180deg); color: var(--primary-color); }

.msd-payroll-detail{
  max-height:0;
  overflow:hidden;
  transition: max-height .35s ease;
  background: var(--lighter-color);
  border-top: 1px solid transparent;
}
.msd-payroll-row.open .msd-payroll-detail{
  max-height: 420px;
  border-top: 1px solid var(--msd-line);
}

.msd-payroll-detail-inner{
  padding: var(--space-lg);
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
  gap: var(--space-md);
}

.msd-detail-item .label{
  font-size: var(--text-xs);
  text-transform:uppercase;
  letter-spacing:.04em;
  color: var(--gray-color);
  margin-bottom:2px;
}
.msd-detail-item .value{ font-weight:600; color: var(--msd-ink); font-size: var(--text-sm); }
.msd-detail-item .value.warn{ color: var(--msd-warn); }

.msd-detail-explain{
  grid-column: 1 / -1;
  background: #fff7e6;
  border: 1px solid #fde7b3;
  border-radius: var(--msd-radius-sm);
  padding: var(--space-md);
  font-size: var(--text-sm);
  color:#7a4d00;
  display:flex;
  gap:.6rem;
  align-items:flex-start;
}
.msd-detail-explain i{ margin-top:2px; }

/* ---------- Web vs mobile split (construction example) ---------- */
.msd-split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}

.msd-split-panel{
  border-radius: var(--msd-radius);
  padding: var(--space-xl);
  border: 1px solid var(--msd-line);
}

.msd-split-panel.web{ background: var(--msd-panel-tint); }
.msd-split-panel.mobile{ background: var(--dark-color); color:#e2e8f0; }

.msd-split-head{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-bottom: var(--space-md);
  font-family:'Poppins',sans-serif;
  font-weight:600;
  font-size: var(--text-lg);
}
.msd-split-panel.web .msd-split-head{ color: var(--primary-dark); }
.msd-split-panel.mobile .msd-split-head{ color:#fff; }
.msd-split-panel.mobile .msd-split-head i{ color: var(--secondary-color); }
.msd-split-panel.web .msd-split-head i{ color: var(--primary-color); }

.msd-split-panel ul{ list-style:none; }
.msd-split-panel ul li{
  padding: 7px 0 7px 1.3rem;
  position:relative;
  font-size: var(--text-sm);
}
.msd-split-panel.web ul li{ color: var(--gray-color); }
.msd-split-panel.mobile ul li{ color:#cbd5e1; }
.msd-split-panel ul li::before{
  content:"\f00c";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;
  left:0; top:8px;
  font-size:11px;
}
.msd-split-panel.web ul li::before{ color: var(--primary-color); }
.msd-split-panel.mobile ul li::before{ color: var(--secondary-color); }

/* ---------- AI attendance feature grid ---------- */
.msd-feature-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap: var(--space-md);
}
.msd-feature{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding: var(--space-md);
  border: 1px solid var(--msd-line);
  border-radius: var(--msd-radius-sm);
  background: var(--lighter-color);
  font-weight:500;
  font-size: var(--text-sm);
  color: var(--msd-ink);
}
.msd-feature i{
  color: var(--primary-color);
  font-size: var(--text-lg);
  width:28px;
  text-align:center;
}

/* ---------- Audience chips ---------- */
.msd-audience{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}
.msd-audience span{
  background: var(--lighter-color);
  border: 1px solid var(--border-color);
  color: var(--msd-ink);
  font-weight:500;
  font-size: var(--text-sm);
  padding: 9px 16px;
  border-radius: 999px;
  transition: var(--transition-fast);
}
.msd-audience span:hover{
  border-color: var(--primary-color);
  color: var(--primary-color);
  transform: translateY(-2px);
}

/* ---------- Engagement models ---------- */
.msd-engage-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap: var(--space-md);
}
.msd-engage{
  display:flex;
  align-items:flex-start;
  gap:.7rem;
  padding: var(--space-md) var(--space-lg);
  background: var(--msd-panel-tint);
  border-radius: var(--msd-radius-sm);
  font-size: var(--text-sm);
  font-weight:500;
  color: var(--msd-ink);
}
.msd-engage i{ color: var(--secondary-color); margin-top:3px; }

/* ---------- Methodology / SDI checkpoints ---------- */
.msd-sdi{
  background: var(--dark-color);
  color:#e2e8f0;
}
.msd-sdi .section-subtitle{ color:#7dd3fc; }
.msd-sdi .section-header h2{ color:#fff; }
.msd-sdi .section-description{ color:#94a3b8; }

.msd-sdi-badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 8px 16px;
  border-radius: 999px;
  font-weight:600;
  font-size: var(--text-sm);
  color:#fff;
  margin-bottom: var(--space-xl);
}
.msd-sdi-badge i{ color: var(--accent-color); }

.msd-checkpoint-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: var(--space-md);
}
.msd-checkpoint{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--msd-radius-sm);
  padding: var(--space-md) var(--space-lg);
  display:flex;
  align-items:center;
  gap:.8rem;
}
.msd-checkpoint .n{
  font-family:'Poppins',sans-serif;
  font-weight:700;
  color: var(--secondary-color);
  font-size: var(--text-sm);
  min-width: 26px;
}
.msd-checkpoint span.label{ font-size: var(--text-sm); font-weight:500; }

.msd-sdi-stats{
  display:flex;
  flex-wrap:wrap;
  gap: var(--space-2xl);
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(255,255,255,0.12);
}
.msd-sdi-stats .stat{ min-width:140px; }
.msd-sdi-stats .stat-number{ font-size: var(--text-3xl); font-weight:700; color:#fff; }
.msd-sdi-stats .stat-label{ font-size: var(--text-sm); color:#94a3b8; }

/* ---------- Looking ahead / book ---------- */
.msd-ahead{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items:center;
}
.msd-ahead-list{ list-style:none; }
.msd-ahead-list li{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding: 9px 0;
  border-bottom: 1px dashed var(--msd-line);
  color: var(--gray-color);
  font-size: var(--text-sm);
}
.msd-ahead-list li:last-child{ border-bottom:none; }
.msd-ahead-list i{ color: var(--primary-color); }

.msd-book-card{
  background: linear-gradient(160deg, var(--primary-color), var(--primary-dark));
  color:#fff;
  border-radius: var(--msd-radius-lg);
  padding: var(--space-2xl);
  text-align:center;
}
.msd-book-card i{ font-size: var(--text-4xl); margin-bottom: var(--space-md); opacity:.9; }
.msd-book-card h3{ font-size: var(--text-xl); margin-bottom: var(--space-sm); }
.msd-book-card p{ color: rgba(255,255,255,0.85); font-size: var(--text-sm); }

/* ---------- Comparison strip (this service vs traditional dev/UX) ---------- */
.msd-compare{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-lg);
}
.msd-compare-col{
  border-radius: var(--msd-radius);
  padding: var(--space-lg);
  border: 1px solid var(--msd-line);
  background: var(--lighter-color);
}
.msd-compare-col.is-us{
  border-color: var(--primary-color);
  background: var(--primary-light);
}
.msd-compare-col h4{
  font-size: var(--text-sm);
  text-transform:uppercase;
  letter-spacing:.04em;
  color: var(--gray-color);
  margin-bottom: var(--space-md);
}
.msd-compare-col.is-us h4{ color: var(--primary-dark); }
.msd-compare-col p{ font-size: var(--text-sm); color: var(--gray-color); }
.msd-compare-col.is-us p{ color: var(--msd-ink); font-weight:500; }

/* ---------- FAQ ---------- */
.msd-faq-item{
  border-bottom: 1px solid var(--msd-line);
  padding: var(--space-lg) 0;
}
.msd-faq-item h3{ font-size: var(--text-lg); color: var(--msd-ink); margin-bottom: var(--space-sm); }
.msd-faq-item p{ color: var(--gray-color); }

/* ---------- Responsive ---------- */
@media (max-width: 992px){
  .msd-hero-grid{ grid-template-columns: 1fr; }
  .msd-hero-visual{ order:-1; max-width: 460px; margin: 0 auto var(--space-xl); }
  .msd-problem-grid{ grid-template-columns: 1fr; }
  .msd-philosophy-grid{ grid-template-columns: 1fr; }
  .msd-split{ grid-template-columns: 1fr; }
  .msd-ahead{ grid-template-columns: 1fr; }
  .msd-compare{ grid-template-columns: 1fr; }
}

@media (max-width: 576px){
  .msd-hero{ padding: 64px 0 48px; }
  .msd-hero-cta{ flex-direction:column; align-items:stretch; }
  .msd-hero-cta .btn{ width:100%; }
  .msd-payroll-right{ gap: var(--space-sm); }
  .msd-payroll-right .amount{ font-size: var(--text-sm); }
  .msd-demo{ padding: var(--space-xl) 0; }
}