/* ═══════════════════════════════════════════════════════════════
   SAASKART — PAGE-SPECIFIC STYLES
   Scope: Hero sections, page-level overrides, unique layouts
═══════════════════════════════════════════════════════════════ */

/* ══ SHARED HERO ══════════════════════════════════════════════ */
.page-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 2rem 80px;
  text-align: center;
  overflow: hidden;
}
.page-hero-content {
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin: 0 auto;
}
.page-hero-h1 {
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.4px;
  margin-bottom: 1.1rem;
}
.page-hero-sub {
  font-size: .975rem;
  color: var(--text2);
  max-width: 600px;
  margin: 0 auto 2.2rem;
  font-weight: 400;
  line-height: 1.75;
}
.page-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 3.5rem;
}
.page-hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  margin-top: 2.5rem;
}

/* ══ HOMEPAGE HERO ════════════════════════════════════════════ */
.hero-float-cards { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.float-card {
  position: absolute;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 200px;
}
.float-card .fc-icon { width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.float-card .fc-title { font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px; }
.float-card .fc-sub   { font-size:11px;color:var(--text3); }
.fc1 { left:3%;top:25%; }
.fc2 { right:3%;top:20%; }
.fc3 { left:5%;bottom:28%; }
.fc4 { right:5%;bottom:32%; }
@media (max-width: 1024px) { .fc1,.fc3,.fc2,.fc4 { display: none; } }

/* ══ PRICING PAGE ═════════════════════════════════════════════ */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
.pricing-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2rem;
  transition: all .3s;
  position: relative;
}
.pricing-card:hover { border-color: var(--border2); transform: translateY(-3px); }
.pricing-card.featured {
  border-color: rgba(232,53,42,.3);
  background: rgba(232,53,42,.03);
}
.pricing-label { font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text3);margin-bottom:1rem; }
.pricing-price { font-size:2.5rem;font-weight:600;color:var(--text);line-height:1;margin-bottom:.3rem; }
.pricing-price sup { font-size:1.2rem;vertical-align:super; }
.pricing-period { font-size:.8rem;color:var(--text3);margin-bottom:1.5rem; }
.pricing-divider { height:1px;background:var(--border);margin:1.5rem 0; }
.pricing-features { display:flex;flex-direction:column;gap:.7rem; }
.pricing-feature { display:flex;align-items:flex-start;gap:10px;font-size:.85rem;color:var(--text2); }
.pricing-feature-check { flex-shrink:0;color:var(--green);margin-top:2px; }
.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 14px;
  background: var(--grad1);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

/* ══ GLOSSARY PAGE ════════════════════════════════════════════ */
.glossary-alpha { display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem; }
.alpha-btn { width:36px;height:36px;border-radius:8px;background:var(--surface);border:1px solid var(--border);color:var(--text2);font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s; }
.alpha-btn:hover,.alpha-btn.active { background:rgba(232,53,42,.08);border-color:rgba(232,53,42,.25);color:var(--red); }
.glossary-group { margin-bottom:2.5rem; }
.glossary-group-letter { font-size:1.5rem;font-weight:600;color:var(--red);margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--border); }
.glossary-term { padding:1rem 1.2rem;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:.75rem; }
.glossary-term-title { font-size:.95rem;font-weight:600;color:var(--text);margin-bottom:.3rem; }
.glossary-term-def   { font-size:.85rem;color:var(--text2);line-height:1.6; }

/* ══ CAREERS PAGE ═════════════════════════════════════════════ */
.job-card { background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.6rem;display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;transition:all .3s;cursor:default; }
.job-card:hover { border-color:var(--border2);transform:translateY(-2px); }
.job-dept { font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--red);margin-bottom:.4rem; }
.job-title { font-size:1rem;font-weight:600;color:var(--text);margin-bottom:.5rem; }
.job-meta  { font-size:.8rem;color:var(--text3);display:flex;gap:1rem;flex-wrap:wrap; }
.job-right { flex-shrink:0; }

/* ══ OUR STORY PAGE ═══════════════════════════════════════════ */
.timeline { position:relative;padding-left:2rem; }
.timeline::before { content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,var(--red),var(--navy),transparent); }
.timeline-item { position:relative;padding:0 0 2.5rem 2rem; }
.timeline-dot { position:absolute;left:-2rem;top:4px;width:12px;height:12px;border-radius:50%;background:var(--grad1);transform:translateX(50%); }
.timeline-year { font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--red);margin-bottom:.4rem; }
.timeline-title { font-size:1rem;font-weight:600;color:var(--text);margin-bottom:.4rem; }
.timeline-body  { font-size:.85rem;color:var(--text2);line-height:1.65; }

/* ══ DOCUMENTATION PAGE ═══════════════════════════════════════ */
.docs-layout { display:grid;grid-template-columns:240px 1fr;gap:2rem;align-items:start; }
.docs-sidebar { background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.4rem;position:sticky;top:80px; }
.docs-sidebar-title { font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text3);margin-bottom:.8rem; }
.docs-nav-item { display:block;padding:6px 10px;border-radius:8px;font-size:.85rem;color:var(--text2);text-decoration:none;transition:all .2s;margin-bottom:.2rem; }
.docs-nav-item:hover,.docs-nav-item.active { background:rgba(232,53,42,.07);color:var(--red); }
.docs-content { background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:2rem; }
.docs-h2 { font-size:1.4rem;font-weight:600;color:var(--text);margin:2rem 0 1rem; }
.docs-h3 { font-size:1.1rem;font-weight:600;color:var(--text);margin:1.5rem 0 .7rem; }
.docs-p  { font-size:.9rem;color:var(--text2);line-height:1.75;margin-bottom:1rem; }
.docs-code { background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.2rem;font-family:var(--font-mono);font-size:.8rem;color:var(--navy);overflow-x:auto;margin:1rem 0; }

/* ══ PLACEHOLDER PAGE ═════════════════════════════════════════ */
.placeholder-hero {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 2rem 60px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 55% at 8% 18%, rgba(232,53,42,.06) 0%, transparent 58%),
    radial-gradient(ellipse 65% 50% at 92% 12%, rgba(27,42,74,.05) 0%, transparent 55%),
    linear-gradient(168deg, #fafbff 0%, #f5f7fd 45%, #ffffff 100%);
}
.placeholder-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--red-dim);
  border: 1px solid rgba(232,53,42,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  margin: 0 auto 1.5rem;
}
.placeholder-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 100px;
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.2);
  font-size: 11px;
  font-weight: 600;
  color: var(--amber);
  margin-bottom: 1.5rem;
  letter-spacing: .5px;
}
.placeholder-h1 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); font-weight: 600; margin-bottom: 1rem; letter-spacing: -.3px; }
.placeholder-sub { font-size: .975rem; color: var(--text2); max-width: 500px; margin: 0 auto 2rem; line-height: 1.75; }
.placeholder-links { display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:3rem; }
.placeholder-link { padding:.8rem 1.2rem;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);font-size:.85rem;color:var(--text2);text-decoration:none;transition:all .2s;display:flex;align-items:center;gap:8px; }
.placeholder-link:hover { border-color:var(--border2);color:var(--text);transform:translateY(-2px); }

/* ══ SUPPORT PAGE ═════════════════════════════════════════════ */
.support-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.5rem; }
.support-card { background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.8rem;text-align:center;transition:all .3s; }
.support-card:hover { border-color:var(--border2);transform:translateY(-3px); }
.support-card-icon { width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem; }
.support-card-title { font-size:1rem;font-weight:600;color:var(--text);margin-bottom:.4rem; }
.support-card-body  { font-size:.85rem;color:var(--text2);line-height:1.6; }

@media (max-width: 1024px) {
  .pricing-grid  { grid-template-columns: 1fr 1fr; }
  .docs-layout   { grid-template-columns: 1fr; }
  .docs-sidebar  { position: static; }
  .support-grid  { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .pricing-grid  { grid-template-columns: 1fr; }
  .support-grid  { grid-template-columns: 1fr; }
  .job-card      { flex-direction: column; }
}

/* ══════════════════════════════════════════════════════════════
   SPACING & ALIGNMENT FIXES — v1.1
══════════════════════════════════════════════════════════════ */

/* ── Section label centre alignment ── */
.text-center .section-label { display: block; text-align: center; }
.text-center .section-title { margin-left: auto; margin-right: auto; }

/* ── Hero content vertical rhythm ── */
.page-hero-h1 { margin-top: 0; }
.page-hero-sub { margin-top: 0; }

/* ── Fix hero section top spacing (nav is 64px) ── */
#hero { padding-top: 120px; }
@media (max-width: 768px) {
  #hero { padding-top: 100px; min-height: auto; }
}
@media (max-width: 480px) {
  #hero { padding-top: 88px; }
}

/* ── Prevent hero float cards overlapping content on tablet ── */
@media (max-width: 1100px) {
  .hero-float-cards { display: none; }
}

/* ── Dashboard frame overflow on mobile ── */
@media (max-width: 768px) {
  .dash-frame {
    margin-left: -1rem;
    margin-right: -1rem;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  .dash-body { grid-template-columns: 1fr; }
}

/* ── Profile mock card image overflow ── */
.profile-card-mock { overflow: hidden; }
.profile-mock-header { overflow: hidden; }

/* ── Stat strip alignment ── */
.stats-strip {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (max-width: 640px) {
  .stats-strip { border-radius: var(--radius); }
  .stat-item { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .stat-item:nth-child(2n) { border-right: none; }
  .stat-item:nth-last-child(-n+2) { border-bottom: none; }
}

/* ── CTA section alignment ── */
.cta-section { text-align: center; }
.cta-section .container { position: relative; z-index: 1; }

/* ── Section consistent bottom gap ── */
section + section { margin-top: 0; }

/* ── Prevent horizontal overflow globally ── */
body { overflow-x: hidden; }
.container { overflow-x: visible; }

/* ── sol-card preview items alignment ── */
.sol-card-preview { margin-top: .8rem; }
.preview-row svg { flex-shrink: 0; color: var(--red); }

/* ── Fix sia-feat alignment ── */
.sia-feat > div:last-child { flex: 1; min-width: 0; }
.sia-feat-body { word-break: break-word; }

/* ── Fix onboarding step overflow ── */
.onboard-step-label { word-break: break-word; flex: 1; min-width: 0; }

/* ── Fix badge alignment in cards ── */
.tag { line-height: 1.4; }

/* ── Fix trust compliance on tablet ── */
@media (max-width: 1024px) {
  .trust-compliance { gap: 1rem; padding: 1rem 1.5rem; }
}

/* ── Fix footer brand on mobile ── */
@media (max-width: 640px) {
  .footer-brand-sub { max-width: 100%; }
}

/* ── Fix page hero ctas overflow ── */
.page-hero-ctas { flex-wrap: wrap; }
@media (max-width: 480px) {
  .page-hero-ctas { flex-direction: column; align-items: center; }
  .page-hero-ctas .btn { width: 100%; max-width: 300px; justify-content: center; }
}

/* ── Fix sparklines container ── */
.sparkline { overflow: hidden; }

/* ── Fix intel-ai-insight alignment ── */
.intel-ai-insight > div:last-child { flex: 1; min-width: 0; }

/* ── Fix chat-recs overflow ── */
.chat-rec { overflow: hidden; }
.chat-rec > div:first-child { min-width: 0; flex: 1; }
.rec-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Fix wf-step text overflow ── */
.wf-title, .wf-body { word-break: break-word; }

/* ── Fix footer-col links ── */
.footer-col a { word-break: break-word; }

/* ── Fix ads-campaign-row overflow ── */
.ads-campaign-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; margin-right: 8px; }

/* ── Fix profile mock review name truncation ── */
.profile-mock-review-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
@media (max-width: 480px) { .profile-mock-review-name { max-width: 120px; } }

/* ── Fix sia-insights alignment ── */
.sia-insight > div:last-child { flex: 1; min-width: 0; }

/* ── Fix intent account text ── */
.intent-account-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Placeholder page mobile ── */
@media (max-width: 768px) {
  .placeholder-hero { min-height: 60vh; padding: 100px 1.2rem 50px; }
  .placeholder-h1 { font-size: clamp(1.4rem, 5vw, 2rem); }
  .placeholder-links { flex-direction: column; align-items: center; }
  .placeholder-link { width: 100%; max-width: 300px; justify-content: center; }
}

/* ── Pricing page mobile ── */
@media (max-width: 768px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
}

/* ── Support page mobile ── */
@media (max-width: 640px) {
  .support-grid { grid-template-columns: 1fr; }
}