/* =============================================================
   BizlumoAI — landing.css
   Shared by the problem-focused landing pages
   (/employee-attendance-software, /face-recognition-attendance-system,
   /payroll-software-india). Loaded after site.css; everything here is
   lp- prefixed except the WhatsApp float, which mirrors the block the
   other public pages carry inline.
   ============================================================= */

/* ── READABILITY ─────────────────────────────────── */
/* site.css sets card copy at 14px in --text-3, which is fine for the
   homepage's short blurbs but too dim and small for pages people are
   meant to read top to bottom. Everything under body.lp gets large,
   bright, plain type: no italic serif accents, no tiny mono labels,
   no all-caps. The homepage is untouched. */
.lp { --lp-body: #dfe2ee; }
.lp section { padding-top: 72px; padding-bottom: 72px; }

/* Section heading: title, then one plain sentence under it. */
.lp-head { max-width: 760px; margin-bottom: 36px; }
.lp-head h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.15; letter-spacing: -0.02em; }
.lp-head p { font-size: 19px; line-height: 1.6; color: var(--lp-body); margin-top: 12px; }

.lp .page-head .eyebrow { font-size: 13px; letter-spacing: 0.12em; }
.lp .page-head h1 { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.12; }
.lp .page-head .lede { font-size: 20px; line-height: 1.6; color: var(--lp-body); max-width: 600px; }
.lp .hero-note { font-size: 15px; color: var(--lp-body); }
.lp .btn-lg { font-size: 17px; padding: 16px 28px; }

.lp .problems-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .lp .problems-grid { grid-template-columns: 1fr; } }
.lp .problem-card { padding: 32px; gap: 10px; }
.lp .problem-title,
.lp .feat-title,
.lp .howit-title,
.lp .pillar-title,
.lp .lp-step-title { font-size: 21px; line-height: 1.3; letter-spacing: -0.01em; }
.lp .problem-body,
.lp .feat-body,
.lp .howit-body,
.lp .pillar-body,
.lp .lp-step-body { font-size: 17px; line-height: 1.65; color: var(--lp-body); }
.lp .feat-body a,
.lp .howit-body a { display: inline-block; margin-top: 8px; color: var(--cyan); font-weight: 500; }

/* Plain "1", "2", "3" badges instead of small mono "/01" labels. */
.lp-num {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--cyan);
  color: var(--ink);
  display: grid; place-items: center;
  font-family: var(--display); font-size: 17px; font-weight: 700;
  margin-bottom: 6px;
}

.lp .compare-table { font-size: 17px; }
.lp .compare-table thead th { font-size: 15px; text-transform: none; letter-spacing: 0; }
.lp .compare-table th, .lp .compare-table td { padding: 18px 20px; }
.lp .compare-table td { color: var(--lp-body); line-height: 1.55; }
.lp .compare-table tbody td:first-child { color: var(--text); font-weight: 600; }
.lp .compare-table td.us { color: #fff; font-weight: 600; }
.lp .compare-note { font-size: 16px; line-height: 1.6; color: var(--lp-body); font-family: var(--body); letter-spacing: 0; }
.lp .compare-note a { color: var(--cyan); }

.lp .faq-q { font-size: 20px; }
.lp .faq-a { font-size: 17px; line-height: 1.65; color: var(--lp-body); }
.lp .faq-a a { color: var(--cyan); }

.lp .cta-final h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.15; }

/* ── HERO ────────────────────────────────────────── */
.lp-hero { padding-bottom: 72px; }
.lp-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 980px) { .lp-hero-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ── HERO VISUAL — illustrative product panel ────── */
.lp-visual {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7), 0 0 60px -20px rgba(0, 217, 255, 0.25);
}
.lp-visual-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.lp-visual-title { font-family: var(--display); font-size: 17px; font-weight: 600; color: var(--text); }
.lp-visual-sub { font-size: 14px; color: var(--text-2); }

.lp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
@media (max-width: 480px) { .lp-stats { grid-template-columns: repeat(2, 1fr); } }
.lp-stat { background: var(--ink-3); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.lp-stat-label { font-size: 13px; color: var(--text-2); }
.lp-stat-value { font-family: var(--display); font-size: 28px; font-weight: 700; line-height: 1.2; margin-top: 4px; }

.lp-rows { display: flex; flex-direction: column; }
.lp-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
}
.lp-row-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0, 217, 255, 0.1);
  color: var(--cyan);
  display: grid; place-items: center;
  font-family: var(--display); font-size: 13px; font-weight: 600;
}
.lp-row-main { flex: 1; min-width: 0; }
.lp-row-name { font-size: 16px; font-weight: 600; color: var(--text); }
.lp-row-meta { font-size: 14px; color: #dfe2ee; }
.lp-row-end { font-size: 14px; font-weight: 600; color: var(--green); white-space: nowrap; }

.lp-cam {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: radial-gradient(ellipse at 50% 40%, #1f2a4a 0%, var(--ink) 75%);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--cyan);
  overflow: hidden;
  margin-bottom: 16px;
}
.lp-cam::after {
  content: '';
  position: absolute;
  left: 12%; right: 12%; top: 50%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  animation: lp-scan 2.6s ease-in-out infinite;
}
@keyframes lp-scan {
  0%, 100% { transform: translateY(-60px); opacity: 0.2; }
  50%      { transform: translateY(60px);  opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) { .lp-cam::after { animation: none; } }
.lp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.lp-chip {
  font-size: 14px;
  font-weight: 500;
  color: var(--green);
  background: rgba(20, 209, 138, 0.1);
  border-radius: 999px;
  padding: 6px 14px;
}

.lp-hero h1 { max-width: 900px; }
.lp-hero h1 em {
  font-style: italic;
  font-family: 'Georgia', serif;
  font-weight: 400;
  color: var(--cream);
}
.lp-hero .hero-cta { margin: 32px 0 0; }
.lp-hero .hero-note { margin-top: 16px; }

/* ── "WHICH ONE FITS" TABLE ──────────────────────── */
.lp-fit-table { min-width: 640px; }
.lp-fit-table td { vertical-align: top; line-height: 1.55; color: var(--text-2); }

/* ── NUMBERED STEPS ──────────────────────────────── */
.lp-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  counter-reset: lp-step;
}
@media (max-width: 900px) { .lp-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .lp-steps { grid-template-columns: 1fr; } }
.lp-step {
  counter-increment: lp-step;
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.lp-step::before {
  content: counter(lp-step);
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--cyan);
  color: var(--ink);
  display: grid; place-items: center;
  font-family: var(--display); font-size: 17px; font-weight: 700;
  margin-bottom: 16px;
}
.lp-step-title {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.lp-step-body { font-size: 14px; color: var(--text-3); line-height: 1.6; }

/* ── PRICING STRIP ───────────────────────────────── */
.lp-price-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  background: var(--ink-2);
  border: 1px solid var(--cyan);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.lp-price-strip h2 { font-size: clamp(24px, 3vw, 32px); line-height: 1.2; margin-bottom: 10px; }
.lp-price-strip p { font-size: 18px; color: #dfe2ee; line-height: 1.6; max-width: 640px; }
.lp-price-strip a:not(.btn) { color: var(--cyan); }

/* ── RELATED PAGES ───────────────────────────────── */
.lp-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .lp-related { grid-template-columns: 1fr; } }
a.lp-related-card { text-decoration: none; }
.lp-related-card .feat-body { margin-bottom: 0; }
.lp-related-more {
  font-size: 16px;
  font-weight: 500;
  color: var(--cyan);
  margin-top: auto;
  padding-top: 12px;
}

/* ── FLOATING WHATSAPP ICON — Help & support ─────── */
.wa-float-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 900;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25d366;
  border-radius: 50%;
  box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.45);
  transition: transform .15s ease, box-shadow .15s ease;
}
.wa-float-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 26px -4px rgba(0, 0, 0, 0.55);
}
.wa-float-btn[hidden] { display: none; }
@media (max-width: 768px) {
  .wa-float-btn { right: 14px; bottom: 14px; width: 50px; height: 50px; }
  .wa-float-btn svg { width: 26px; height: 26px; }
}

/* ── COMPARE TABLE CELLS ─────────────────────────── */
/* site.css draws "no" and "partial" answers small and dim, which makes
   the other tools' columns hard to read. Same size for every answer. */
.lp .compare-yes,
.lp .compare-no,
.lp .compare-partial { font-size: 16px; font-weight: 500; }
.lp .compare-no { color: var(--text-2); }

/* ── SETUP GUIDES (/setup-*, /setup-guides) ───────── */
/* Generated by demo-videos/tooling/setup-pages.mjs. Pictures are frames
   from the demo videos; each step is text beside its picture. */
.setup-hero { max-width: 860px; }
.setup-hero .eyebrow a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.setup-ready { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.setup-ready > div { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px 28px; }
.setup-ready h3 { font-size: 20px; margin-bottom: 12px; }
.setup-ready ul { list-style: none; display: grid; gap: 10px; }
.setup-ready li { font-size: 18px; color: var(--lp-body); padding-left: 30px; position: relative; }
.setup-ready li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.setup-index { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 40px; padding: 0; list-style: none; counter-reset: s; }
.setup-index li { counter-increment: s; }
.setup-index a { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; color: var(--text); padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; }
.setup-index a::before { content: counter(s); font-weight: 700; color: var(--cyan); }
.setup-index a:hover { border-color: var(--cyan); }
.setup-steps { display: grid; gap: 48px; }
.setup-step { display: grid; grid-template-columns: 1fr 1.25fr; gap: 36px; align-items: center; scroll-margin-top: 90px; }
.setup-step:nth-child(even) .setup-step-pic { order: -1; }
.setup-step-num { font-size: 15px; font-weight: 700; color: var(--cyan); letter-spacing: .02em; margin-bottom: 6px; }
.setup-step h3 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; margin-bottom: 12px; }
.setup-step p { font-size: 18px; line-height: 1.65; color: var(--lp-body); }
.setup-step p b { color: #fff; }
.setup-step-more { display: inline-block; margin-top: 12px; font-size: 16px; color: var(--cyan); }
.setup-step-pic { width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.setup-other { margin-top: 28px; font-size: 18px; color: var(--lp-body); }
.lp-related + .setup-other a { color: var(--cyan); font-weight: 600; text-decoration: none; }
.lp-related + .setup-other a:hover { text-decoration: underline; }
.setup-video { position: relative; display: block; max-width: 960px; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.setup-video button { all: unset; cursor: pointer; display: block; width: 100%; height: 100%; }
.setup-video img, .setup-video iframe { width: 100%; height: 100%; display: block; border: 0; object-fit: cover; }
.setup-play { position: absolute; left: 50%; top: 50%; width: 92px; height: 64px; transform: translate(-50%, -50%); border-radius: 16px; background: rgba(255,0,0,.9); box-shadow: 0 10px 30px rgba(0,0,0,.5); transition: transform .15s; }
.setup-play::after { content: ""; position: absolute; left: 37px; top: 20px; border-style: solid; border-width: 12px 0 12px 21px; border-color: transparent transparent transparent #fff; }
.setup-video:hover .setup-play { transform: translate(-50%, -50%) scale(1.08); }
.setup-video-sec { scroll-margin-top: 72px; }
.setup-video-yt { margin-top: 14px; font-size: 17px; color: var(--lp-body); }
.setup-video-yt a { color: var(--cyan); }
.setup-hub { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.setup-hub-card { display: block; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 28px; text-decoration: none; color: var(--text); transition: border-color .15s, transform .15s; }
.setup-hub-card:hover { border-color: var(--cyan); transform: translateY(-2px); }
.setup-hub-label { font-size: 14px; font-weight: 700; color: var(--amber); margin-bottom: 6px; }
.setup-hub-title { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.setup-hub-body { font-size: 17px; line-height: 1.6; color: var(--lp-body); }
.setup-hub-steps { margin-top: 12px; font-size: 16px; font-weight: 700; color: var(--cyan); }
@media (max-width: 860px) {
  .setup-ready, .setup-hub { grid-template-columns: 1fr; }
  .setup-step { grid-template-columns: 1fr; gap: 18px; }
  .setup-step:nth-child(even) .setup-step-pic { order: 0; }
}

/* ── RESOURCES PAGE (/resources/) ─────────────────── */
.res-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.res-tile { display: flex; flex-direction: column; gap: 8px; padding: 24px; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius-lg); text-decoration: none; color: var(--text); transition: border-color .15s, transform .15s; }
.res-tile:hover { border-color: var(--cyan); transform: translateY(-2px); }
.res-tile-icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; color: var(--cyan); background: rgba(0,217,255,.1); margin-bottom: 6px; }
.res-tile-title { font-size: 21px; font-weight: 700; }
.res-tile-body { font-size: 16px; line-height: 1.55; color: var(--lp-body); }
.res-links { display: flex; flex-wrap: wrap; gap: 10px; }
.res-links a { font-size: 17px; color: var(--text); padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; }
.res-links a:hover { border-color: var(--cyan); color: #fff; }
.res-blog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.res-blog-all { font-size: 18px; color: var(--cyan); }
.res-post { display: flex; flex-direction: column; gap: 10px; background: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: var(--text); padding-bottom: 18px; transition: border-color .15s; }
.res-post:hover { border-color: var(--cyan); }
.res-post img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.res-post-title { font-size: 18px; font-weight: 700; line-height: 1.35; padding: 0 18px; }
.res-post-meta { font-size: 15px; color: var(--text-2); padding: 0 18px; }
@media (max-width: 960px) { .res-tiles { grid-template-columns: repeat(2, 1fr); } .res-blog { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .res-tiles, .res-blog { grid-template-columns: 1fr; } }
/* WhatsApp chat line under the questions (shown once a support number is set) */
.setup-other[data-wa] a { color: #25d366; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(37,211,102,.4); }
.setup-other[data-wa] a:hover { border-bottom-color: #25d366; }
.btn.btn-wa { border-color: rgba(37,211,102,.55); color: var(--text); /* was #fff: invisible on the white light-theme button */ }
.btn.btn-wa::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #25d366; margin-right: 10px; box-shadow: 0 0 0 4px rgba(37,211,102,.2); }
.btn.btn-wa:hover { background: rgba(37,211,102,.12); border-color: #25d366; }
.btn.btn-wa[hidden] { display: none; }

/* ── SALARY SLIP / SALARY SHEET TOOLS (/salary-slip-format, /salary-sheet-format-excel) ── */
.slip-paper { background: #fff; color: #111; border-radius: var(--radius-lg); padding: 22px; max-width: 760px; margin: 0 auto; box-shadow: 0 24px 60px rgba(0,0,0,.45); font-size: 14px; }
.slip-paper .slip-co { font-size: 20px; font-weight: 700; text-align: center; }
.slip-paper .slip-ad { text-align: center; font-size: 13px; color: #333; }
.slip-paper .slip-tt { text-align: center; font-weight: 700; margin: 8px 0 12px; }
.slip-paper table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.slip-paper th, .slip-paper td { border: 1px solid #9aa5b1; padding: 6px 8px; text-align: left; vertical-align: top; color: #111; }
.slip-paper th { background: #f2f5f9; font-weight: 600; }
.slip-paper .hd th { background: #e8eef7; }
.slip-paper .r { text-align: right; }
.slip-paper .slip-net { font-size: 17px; font-weight: 700; }
.slip-paper .slip-sign { display: flex; justify-content: space-between; gap: 24px; margin-top: 36px; font-size: 13px; }
.slip-paper .slip-sign div { border-top: 1px solid #333; padding-top: 4px; width: 40%; }
.slip-paper .slip-sign div:last-child { text-align: right; }
.slip-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.slip-scroll .slip-paper { min-width: 560px; }

.dl-table td a { color: var(--cyan); font-weight: 600; text-decoration: none; white-space: nowrap; }
.dl-table td a:hover { text-decoration: underline; }
.dl-table td { font-size: 17px; }

.mk-grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 900px) { .mk-grid { grid-template-columns: 1fr; } }
.mk-form { display: grid; gap: 14px; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; }
.mk-form h3 { margin: 8px 0 0; font-size: 18px; }
.mk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mk-field { display: grid; gap: 6px; }
.mk-field label { font-size: 15px; color: var(--text-2); font-weight: 500; }
.mk-input { width: 100%; background: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); font: inherit; font-size: 16px; padding: 10px 12px; outline: none; }
.mk-input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,217,255,.18); }
.mk-note { font-size: 15px; color: var(--text-2); }

@media print {
  body.mk-printing * { visibility: hidden !important; }
  body.mk-printing #mkSlip, body.mk-printing #mkSlip * { visibility: visible !important; }
  body.mk-printing #mkSlip { position: absolute; left: 0; top: 0; width: 100%; max-width: none; box-shadow: none; padding: 0; }
  body.mk-printing { background: #fff !important; }
}

/* ── LIGHT THEME (landing pages) — see the THEME block in site.css ── */
[data-theme="light"] .lp { --lp-body: #33475f; }
[data-theme="light"] .lp .compare-table td.us { color: var(--text); }
[data-theme="light"] .lp-row-meta,
[data-theme="light"] .lp-price-strip p { color: var(--text-2); }
[data-theme="light"] .lp-visual { box-shadow: 0 30px 60px -30px rgba(30, 45, 66, 0.3), 0 0 0 1px var(--line); }
[data-theme="light"] .setup-step p b { color: var(--text); }
[data-theme="light"] .res-links a:hover { color: var(--text); }
[data-theme="light"] .wa-float-btn { box-shadow: 0 6px 18px -4px rgba(30, 45, 66, 0.3); }
[data-theme="light"] .slip-paper { box-shadow: 0 0 0 1px var(--line), 0 20px 40px -24px rgba(30, 45, 66, 0.3); }
[data-theme="light"] .lp-cam { background: radial-gradient(ellipse at 50% 40%, #dff6fb 0%, var(--ink-2) 75%); }
[data-theme="light"] .lp section { padding-top: 56px; padding-bottom: 56px; }
@media (max-width: 768px) { [data-theme="light"] .lp section { padding-top: 44px; padding-bottom: 44px; } }
[data-theme="light"] .lp .page-head .eyebrow { font-size: 13.5px; }

/* Section length rule (see site.css): desktop only */
@media (min-width: 1025px) {
  .lp .compare-table th, .lp .compare-table td { padding: 12px 18px; }
  .setup-hub { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .setup-hub-card { padding: 20px 22px; }
  .setup-hub-title { font-size: 20px; }
}

/* Resources hub: centred heading (no picture beside it), compact setup-guide cards */
.res-hub-head { padding-bottom: 28px; }
.res-hub-head .setup-hero { max-width: 780px; margin: 0 auto; text-align: center; }
.res-hub-head .eyebrow { display: flex; justify-content: center; }
.res-hub-head .lede { margin-left: auto; margin-right: auto; }
@media (min-width: 1200px) { .setup-hub { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px) {
  .setup-hub { grid-template-columns: 1fr 1fr; gap: 10px; }
  .setup-hub-card { padding: 14px 14px 13px; }
  .setup-hub-title { font-size: 16px; line-height: 1.3; margin-bottom: 4px; }
  .setup-hub-body { display: none; }      /* the full summary is on each guide page */
  .setup-hub-steps { margin-top: 6px; font-size: 14px; }
}
/* Resources hub cards: tablet 2 across, small laptop 3, desktop 4; shorter text */
@media (min-width: 601px) and (max-width: 899px) { .setup-hub { grid-template-columns: 1fr 1fr; gap: 14px; } .setup-hub-card { padding: 18px 20px; } .setup-hub-title { font-size: 19px; } }
@media (min-width: 900px) and (max-width: 1199px) { .setup-hub { grid-template-columns: repeat(3, 1fr); gap: 14px; } .setup-hub-card { padding: 18px 20px; } .setup-hub-title { font-size: 19px; } }
@media (min-width: 601px) { .setup-hub-body { font-size: 15.5px; line-height: 1.5; } .setup-hub-steps { margin-top: 10px; } }