/* Common reusable section components (Dec 2025) */
:root {
  --brand-primary: #0ea5e9;
  --brand-secondary: #0284c7;
  --brand-accent: #16a34a;
  --surface: #ffffff;
  --surface-alt: #f8fafc;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e5e7eb;
}

/* Section wrappers */
.section { padding: 3rem 0; }
.section--light { background: var(--surface-alt); }
.section--dark { background: #0f172a; color: #e2e8f0; }
.section--gradient { background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); }
.section--banner { background: var(--brand-primary); color: #ffffff; }
.section--contrast { background: #fcfcfd; }
.section--band { background: #f8fafc; }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.card--pad-sm { padding: .85rem 1rem; }
.card--pad-md { padding: 1rem 1.25rem; }
.card--pad-lg { padding: 1.5rem; }
.card--hover { transition: transform .2s ease, box-shadow .2s ease; }
.card--hover:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); }

/* Grid utilities */
.grid { display: grid; gap: 1rem; }
.grid--tiles-sm { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid--tiles-md { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--tiles-lg { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* Chips */
.chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; }
.chip { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: .65rem .9rem; display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.chip i { color: var(--brand-primary); }

/* Split */
.split { display: flex; gap: 1rem; flex-wrap: wrap; }
.split > * { flex: 1 1 320px; }

/* Carousel (simple, CSS-only) */
.carousel { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.carousel::-webkit-scrollbar { height: 8px; }
.carousel::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.carousel-item { scroll-snap-align: start; min-width: 260px; }

/* Icon badge */
.icon-badge { width: 36px; height: 36px; border-radius: 999px; background: #eff6ff; color: var(--brand-primary); display: flex; align-items: center; justify-content: center; font-size: 1rem; }

/* Banners */
.banner { border-radius: 16px; padding: 1.75rem; box-shadow: 0 8px 24px rgba(0,0,0,0.08); }

/* Animations */
.fade-in { animation: fadeIn .4s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ===== Merged page section styles (Task + Timesheet) ===== */
/* Typography helpers */
.paragraph-sub-heading { font-weight: 700; font-size: 1.25rem; line-height: 2.275rem; }

/* Icon dot utility (legacy support) */
.ic-black { color: black; background-color: black !important; margin-left: 12px !important; }

/* Band wrappers shared across pages */
.intro-band,
.workflow-band,
.features-band,
.matter-band,
.impl-band,
.ux-band,
.clarity-callout,
.rt-benefits-band { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem; }
.intro-band { padding: 1.75rem; box-shadow: none; }
.rt-benefits-band.no-border { border: none; }

/* Chips (aliases for common component) */
.intro-chips,
.workflow-chips,
.rt-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; }
.intro-chip,
.workflow-chip,
.rt-chip { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: .6rem .9rem; display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.intro-chip i,
.rt-chip i { color: var(--brand-primary); }
.workflow-chip i { color: var(--brand-accent); }

/* Workflow cards */
.workflow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.workflow-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.25rem; }
.workflow-title { font-weight: 700; }

/* Feature stripes */
.feature-stripes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .75rem; }
.feature-stripe { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: .9rem 1rem; display: flex; align-items: center; gap: .75rem; }
.feature-icon { width: 36px; height: 36px; border-radius: 999px; background: #eff6ff; color: var(--brand-primary); display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.feature-text { font-weight: 600; }

/* Business needs (tiles) */
.matter-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .75rem; }
.matter-tile { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: .85rem 1rem; display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.tile-icon { width: 34px; height: 34px; border-radius: 999px; background: #f0f9ff; color: var(--brand-secondary); display: flex; align-items: center; justify-content: center; }

/* Implementing steps (timeline-like) */
.impl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .9rem; }
.impl-step { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: .9rem 1rem .9rem 2.5rem; font-weight: 600; }
.impl-step::before { content: attr(data-step); position: absolute; left: .8rem; top: .8rem; width: 28px; height: 28px; border-radius: 999px; background: #eff6ff; color: var(--brand-primary); display: flex; align-items: center; justify-content: center; font-weight: 700; }

/* Slightly increase spacing between step bubble and content within cloud implementation */
.cloud-implementation .impl-step { padding-left: 3.15rem; }

/* Attendance getting started: spacing + heading refinement */
.attendance-getting-started .impl-step { padding-left: 3.15rem; }
.attendance-getting-started .impl-step h3 { margin: 0 0 .25rem; font-weight: 700; }
.attendance-getting-started .impl-band .paragraph-heading { line-height: 1.25; letter-spacing: .2px; margin-bottom: .25rem; }
.attendance-getting-started .impl-band .paragraph { margin-top: .5rem !important; color: #334155; max-width: 70ch; }

/* Task implementing section: add space between bubble and text */
.implementing .impl-step { padding-left: 2.85rem; }

/* Payroll implementation: add space between bubble and text */
.payroll-implementation .impl-step { padding-left: 2.85rem; }

/* Payslip delivery: add space between bubble and text */
.payslip-delivery .impl-step { padding-left: 2.85rem; }

/* Pune implementation: add space between bubble and text */
.pune-impl .impl-step { padding-left: 2.85rem; }

/* Invoicing page: add spacing between step bubble and content */
.invoicing-setup .impl-step { padding-left: 2.85rem; }

/* UX tiles */
.ux-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .75rem; }
.ux-tile { background: var(--surface); border: none; border-radius: 10px; padding: .85rem 1rem; display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.ux-tile i { color: var(--brand-primary); }

/* Distinct styling for Attendance Why section */
.attendance-why .ux-band { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem; }
.attendance-why .paragraph-heading { font-weight: 800; letter-spacing: .2px; }
.attendance-why .paragraph { color: #334155; }
.attendance-why .ux-tiles { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .9rem; }
.attendance-why .ux-tile { background: #ffffff; border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.attendance-why .ux-tile h3 { margin: 0 0 .25rem; font-weight: 700; }
.attendance-why .ux-tile p { margin: 0; color: #475569; }
.attendance-why .ux-tile.animate-in { transition: transform .2s ease, box-shadow .2s ease; }
.attendance-why .ux-tile.animate-in:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.10); }

@media (max-width: 576px) {
  .attendance-why .ux-band { padding: 1.25rem; }
  .attendance-why .ux-tiles { grid-template-columns: 1fr; }
}

/* Pune benefits: mobile responsiveness for benefits stripes */
@media (max-width: 576px) {
  .pune-benefits .benefits-stripes { grid-template-columns: 1fr; gap: .75rem; }
  .pune-benefits .benefit-stripe { grid-template-columns: 40px 1fr; }
  .pune-benefits .benefit-title,
  .pune-benefits .benefit-desc { overflow-wrap: anywhere; word-break: break-word; }
}
@media (max-width: 360px) {
  .pune-benefits .benefit-stripe { grid-template-columns: 36px 1fr; }
  .pune-benefits .benefit-icon { width: 36px; height: 36px; font-size: 1rem; }
}

/* Pune advantages: mobile responsiveness for benefits stripes */
@media (max-width: 576px) {
  .pune-advantages .benefits-stripes { grid-template-columns: 1fr; gap: .75rem; }
  .pune-advantages .benefit-stripe { grid-template-columns: 40px 1fr; }
  .pune-advantages .benefit-title,
  .pune-advantages .benefit-desc { overflow-wrap: anywhere; word-break: break-word; }
}
@media (max-width: 360px) {
  .pune-advantages .benefit-stripe { grid-template-columns: 36px 1fr; }
  .pune-advantages .benefit-icon { width: 36px; height: 36px; font-size: 1rem; }
}

/* Clarity callout */
.callout-row { display: grid; grid-template-columns: 56px 1fr; gap: 1rem; }
.callout-icon { width: 56px; height: 56px; border-radius: 12px; background: #eff6ff; color: var(--brand-primary); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }

/* Benefits stripes (icon list) */
.benefits-stripes { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: .5rem; }
.benefit-stripe { display: grid; grid-template-columns: 44px 1fr; align-items: start; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--border); }
.benefit-stripe:last-child { border-bottom: none; }
.benefit-icon { width: 40px; height: 40px; border-radius: 999px; background: #eff6ff; color: var(--brand-primary); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.benefit-title { margin: 0; font-weight: 700; grid-column: 2; }
.benefit-desc { margin: .15rem 0 0; color: #334155; grid-column: 2; }

/* Mobile responsiveness for Benefits stripes */
@media (max-width: 576px) {
  .rt-benefits .benefits-stripes { grid-template-columns: 1fr; gap: .75rem; }
  .rt-benefits .benefit-stripe { grid-template-columns: 40px 1fr; padding: .75rem 0; }
  .rt-benefits .benefit-title,
  .rt-benefits .benefit-desc { overflow-wrap: anywhere; word-break: break-word; }
}
@media (max-width: 360px) {
  .rt-benefits .benefit-stripe { grid-template-columns: 36px 1fr; }
  .rt-benefits .benefit-icon { width: 36px; height: 36px; font-size: 1rem; }
}

/* Invoicing benefits: mobile responsiveness fix for overflow */
@media (max-width: 576px) {
  .invoicing-benefits .benefits-stripes { grid-template-columns: 1fr; gap: .75rem; }
  .invoicing-benefits .benefit-stripe { grid-template-columns: 40px 1fr; }
  .invoicing-benefits .benefit-title,
  .invoicing-benefits .benefit-desc { overflow-wrap: anywhere; word-break: break-word; }
}
@media (max-width: 360px) {
  .invoicing-benefits .benefit-stripe { grid-template-columns: 36px 1fr; }
  .invoicing-benefits .benefit-icon { width: 36px; height: 36px; font-size: 1rem; }
}

/* Responsive fix: task benefits inside clarity callout */
.task-benefits .benefits-stripes { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
@media (max-width: 480px) {
  .task-benefits .benefits-stripes { grid-template-columns: 1fr; }
}

/* Utilities + animations */
.no-border { border: none !important; }
.img-placeholder { display: flex; align-items: center; justify-content: center; background: var(--surface); border: 2px dashed #cbd5e1; color: var(--muted); border-radius: 12px; min-height: 180px; font-weight: 700; }
.img-placeholder.small { min-height: 120px; }
.fade-in-up { animation: fadeInUp .6s ease both; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.subtle-pulse { animation: subtlePulse 7s ease-in-out infinite; }
@keyframes subtlePulse { 0% { transform: scale(0.98); } 50% { transform: scale(1.02); } 100% { transform: scale(0.98); } }

/* Micro-interactions */
.feature-stripe:hover,
.matter-tile:hover,
.ux-tile:hover { transform: translateY(-2px); transition: transform .2s ease; }
.feature-icon,
.tile-icon,
.callout-icon { animation: subtlePulse 7s ease-in-out infinite; }

/* Supporting: outline split cards */
.supporting-band { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem; }
.outline-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.25rem; }
.support-list { display: grid; gap: .5rem; }
.support-item { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.support-item i { color: var(--brand-accent); }

/* ERP Modules carousel */
.erp-carousel .band { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem; }
.erp-carousel .track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; }
.erp-carousel .card { scroll-snap-align: start; min-width: 280px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: .75rem; }
.erp-carousel .card .icon { width: 40px; height: 40px; border-radius: 999px; background: #eff6ff; color: var(--brand-primary); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.erp-carousel .card .title { font-weight: 700; margin: 0; }
.erp-carousel .card .desc { margin: 0; color: #334155; }

/* Aliases for legacy classes used in pages */
.animate-in { animation: fadeInUp .6s ease both; }
.features-section .feature-stripe:hover,
.matter-tiles .matter-tile:hover,
.user-experience .ux-tile:hover,
.outline-card:hover { transform: translateY(-2px); transition: transform .2s ease; }

/* ===== Attendance Pune page — feature stripes polish (scoped) ===== */
.attendance-features .feature-stripes { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
.attendance-features .feature-stripe { padding: 1rem 1.25rem; border-radius: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.attendance-features .feature-stripe:hover { transform: translateY(-2px); border-color: rgba(2, 132, 199, .35); box-shadow: 0 6px 16px rgba(2, 132, 199, .12); }
.attendance-features .feature-icon { width: 42px; height: 42px; border-radius: 999px; background: #eff6ff; color: var(--brand-primary); font-size: 1.15rem; flex: 0 0 42px; }
.attendance-features .feature-text h3 { margin: 0; font-weight: 700; font-size: 1.1rem; }
.attendance-features .feature-text p { margin: .25rem 0 0; color: #475569; font-weight: 400; line-height: 1.55rem; }

/* ===== Interlinks band (scoped styles) ===== */
.interlinks-band { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem; }
.interlinks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.interlink-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.06); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; text-decoration: none; color: inherit; }
.interlink-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(2,132,199,0.12); border-color: rgba(2,132,199,0.35); }
.interlink-thumb { width: 100%; height: 240px; background: #eef2ff; }
.interlink-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.interlink-thumb img { object-position: center; }
.interlink-content { padding: 1rem 1rem 1.1rem; }
.interlink-badge { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .02em; background: #eff6ff; color: var(--brand-primary); border: 1px solid #e0f2fe; border-radius: 999px; padding: .2rem .6rem; }
.interlink-title { margin: .5rem 0 0; font-weight: 800; font-size: 1.05rem; line-height: 1.45rem; color: var(--text); }
.interlink-subtitle { margin: .25rem 0 0; color: #475569; }

/* Responsive sizing for interlink images */
@media (max-width: 768px) {
  .interlink-thumb { height: 200px; }
}
@media (max-width: 480px) {
  .interlink-thumb { height: 180px; }
}