/* Attendry Payroll CZ landing page (I1, PROD-219) — reuses shared section
   classes from partners/partners.css (.p-section, .benefit-grid,
   .benefit-card, .become-steps) so this page needs only what's genuinely
   new: the hero layout, the payslip mockup, and the FAQ accordion. */

.mzdy-hero { padding: 56px 0 48px; }
.mzdy-hero-inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.mzdy-hero h1 { font-size: 42px; line-height: 1.15; margin: 0 0 16px; letter-spacing: -0.02em; }
.mzdy-hero-sub { font-size: 17px; color: var(--attendry-muted); margin: 0 0 24px; max-width: 54ch; }
.mzdy-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.mzdy-hero-note { font-size: 13px; color: var(--attendry-muted); margin: 12px 0 0; }

.mzdy-hero-visual { display: flex; flex-direction: column; gap: 18px; }
.mzdy-flow-wrap { padding: 6px 0 0; }

.payslip-card {
  background: var(--attendry-surface);
  border: 1px solid var(--attendry-line);
  border-radius: var(--radius-panel);
  padding: 18px 20px;
  box-shadow: 0 16px 40px -24px rgba(6, 23, 42, 0.25);
}
.payslip-card-label { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--attendry-muted); margin: 0 0 8px; }
.payslip-card-name { font-size: 15px; font-weight: 700; margin: 0 0 12px; }
.payslip-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--attendry-line); font-size: 13px; font-variant-numeric: tabular-nums; }
.payslip-row:first-of-type { border-top: none; }
.payslip-row span:first-child { color: var(--attendry-muted); }
.payslip-row-net { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--attendry-line); font-weight: 800; }
.payslip-row-net span:first-child { color: var(--attendry-text); }
.payslip-row-net span:last-child { color: var(--attendry-teal-700); font-size: 16px; }

.mzdy-split-grid { grid-template-columns: repeat(2, 1fr); }
.mzdy-check-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--attendry-muted); }
.mzdy-check-list li { padding-left: 20px; position: relative; }
.mzdy-check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--attendry-teal-700); font-weight: 700; }

.mzdy-feature-grid { grid-template-columns: repeat(4, 1fr); }
.mzdy-security-grid { grid-template-columns: repeat(5, 1fr); }

.mzdy-payslip-section { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: center; }
.mzdy-fine-note { font-size: 12px; color: var(--attendry-muted); margin: 0; }

.mzdy-filings-note { max-width: 72ch; }

.mzdy-enterprise-note { max-width: 640px; margin: 0 auto; text-align: center; }
.mzdy-enterprise-note .btn { margin-top: 4px; }

.mzdy-faq { max-width: 760px; margin: 0 auto; }
.mzdy-faq h2 { text-align: center; margin: 0 0 28px; font-size: 28px; letter-spacing: -0.01em; }
.mzdy-faq-item {
  background: var(--attendry-surface);
  border: 1px solid var(--attendry-line);
  border-radius: var(--radius-card);
  padding: 4px 20px;
  margin-bottom: 12px;
}
.mzdy-faq-item summary { cursor: pointer; padding: 16px 0; font-weight: 650; list-style: none; }
.mzdy-faq-item summary::-webkit-details-marker { display: none; }
.mzdy-faq-item summary::after { content: "+"; float: right; color: var(--attendry-blue-700); font-weight: 700; }
.mzdy-faq-item[open] summary::after { content: "−"; }
.mzdy-faq-item p { margin: 0 0 16px; font-size: 14px; color: var(--attendry-muted); }

@media (max-width: 860px) {
  .mzdy-hero-inner { grid-template-columns: 1fr; }
  .mzdy-hero h1 { font-size: 32px; }
  .mzdy-split-grid { grid-template-columns: 1fr; }
  .mzdy-feature-grid { grid-template-columns: repeat(2, 1fr); }
  .mzdy-security-grid { grid-template-columns: repeat(2, 1fr); }
  .mzdy-payslip-section { grid-template-columns: 1fr; }
}