/* ==========================================================================
   BytesFusion — AI Enterprise ERP (page-specific styles)
   Loaded after style.css. Uses the same design tokens.
   ========================================================================== */

/* ---------- Hero ---------- */
.page-hero .mock{ text-align:left; }
.page-hero .float-card{ text-align:left; }
.page-hero .tag-row{ justify-content:center; margin-top:26px; }
.hero-visual{ position:relative; max-width:1040px; margin:58px auto 0; }
.hero-visual .float-card b{ font-size:1.3rem; }

/* ---------- Cards ---------- */
.card .link-arrow{ margin-top:16px; }
.card-grid .card p{ font-size:.93rem; }

/* ---------- Tabs ---------- */
.tabs-block .tab-panel .check-list{ margin-top:22px; }
.tabs-block .split{ align-items:center; }
.tabs-block .mock-body{ padding:16px; }

/* ---------- Automation run log ---------- */
.run-log .m-main b{ font-family:var(--font-mono); font-size:.83rem; letter-spacing:-.01em; font-weight:600; }
.run-log .mock-row .m-ico{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.02em; }

/* ---------- Tables inside panels ---------- */
.tab-panel .tbl td{ white-space:nowrap; }
.tab-panel .tbl td.wrap{ white-space:normal; }

/* ---------- Meter block ---------- */
.meter-block{ display:grid; gap:9px; }
.meter-block .m-line{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:.82rem; }
.meter-block .m-line span:first-child{ color:var(--muted); }

/* ---------- Integrations note ---------- */
.int-note{ margin:46px auto 0; max-width:820px; }

/* ---------- Timeline ---------- */
.tl .tag-row{ margin-top:14px; }
.tl .tl-meta{ display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin-bottom:10px; }

/* ---------- Responsive ---------- */
@media (max-width:880px){
  .hero-visual{ margin-top:44px; }
}
@media (max-width:560px){
  .hero-visual{ margin-top:36px; }
  .page-hero .tag-row{ justify-content:center; }
  .hero-visual .float-card{ display:none; }
}

/* ---------- Real screenshot hero ---------- */
.hero-shot{ margin-top:48px; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--surface); box-shadow:0 40px 90px -50px rgba(0,0,0,.6); }
.hero-shot img{ display:block; width:100%; height:auto; }

/* ---------- Screenshot gallery ---------- */
.gal-label{ font-family:var(--font-display); font-size:1.05rem; font-weight:600; letter-spacing:-.01em; margin:0 0 18px; color:var(--muted); }
.shot-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(310px, 1fr)); gap:18px; }
.shot{ display:block; background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.shot:hover{ transform:translateY(-4px); box-shadow:0 22px 46px -28px rgba(0,0,0,.5); border-color:var(--accent); }
.shot img{ display:block; width:100%; height:auto; background:#fdfbf6; }
.shot-cap{ display:block; padding:13px 16px 15px; border-top:1px solid var(--line); }
.shot-cap b{ display:block; font-size:.95rem; font-weight:600; letter-spacing:-.01em; }
.shot-cap small{ display:block; margin-top:3px; font-size:.8rem; line-height:1.5; color:var(--muted); }
.shot-grid--detail{ grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); }
.shot--detail img{ height:250px; object-fit:contain; object-position:top center; padding:14px 14px 0; box-sizing:border-box; }
.shot--panel{ margin:0; box-shadow:0 24px 60px -40px rgba(0,0,0,.55); }
.shot--panel img{ border-radius:0; }

/* ---------- Best-for fit card ---------- */
.fit-card{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:26px 28px; }
.fit-card h4{ font-family:var(--font-display); font-size:1.05rem; font-weight:600; letter-spacing:-.01em; margin:0 0 8px; }
.fit-card p{ font-size:.9rem; line-height:1.65; color:var(--muted); margin:0 0 12px; }
.fit-card ul{ list-style:none; display:grid; gap:11px; margin:0 0 16px; padding:0; }
.fit-card li{ position:relative; padding-left:20px; font-size:.88rem; line-height:1.6; color:var(--muted); }
.fit-card li::before{ content:"×"; position:absolute; left:0; top:0; color:var(--accent); font-weight:700; }
.fit-card li b{ color:var(--text); }
.fit-card .muted{ font-size:.86rem; margin:0; }

@media (max-width:880px){
  .hero-shot{ margin-top:36px; border-radius:14px; }
  .shot-grid{ grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; }
}
@media (max-width:560px){
  .shot-grid, .shot-grid--detail{ grid-template-columns:1fr; }
  .shot--detail img{ height:230px; }
}