/* spanops.app product site. Tokens and the header/button/table/theme-switch components come from
   the Sanrad kit (sanrad-ui.css); this file lays the page out and draws the hero mock-up. */
.hidden { display: none !important; }
.logo-dark { display: none; }
html[data-theme="dark"] .logo-light { display: none; }
html[data-theme="dark"] .logo-dark { display: inline; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .logo-light { display: none; }
  html:not([data-theme]) .logo-dark { display: inline; }
}
html { scroll-behavior: smooth; }
body.home { margin: 0; background: var(--canvas); color: var(--ink); overflow-x: hidden; }
.site-header .btn { white-space: nowrap; }
.section, .hero, .strip, .final { scroll-margin-top: 64px; }
.brand-logo { height: 30px; width: auto; }

/* header */
.site-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 10px clamp(16px, 4vw, 48px);
  background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-header .spacer { flex: 1; }
.site-nav { display: flex; gap: 18px; margin-left: 18px; }
.site-nav a { color: var(--ink-soft); text-decoration: none; font-size: var(--text-sm); font-weight: 500; }
.site-nav a:hover { color: var(--ink); }
@media (max-width: 860px) { .site-nav { display: none; } }
/* phones: one slim row (the theme follows the device; it can be set in the portal) */
@media (max-width: 640px) {
  .site-header { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .site-header .theme-switch { display: none; }
  .site-header .brand-logo { height: 24px; }
  .site-header .btn { padding-left: 10px; padding-right: 10px; }
}

main { display: block; }
.section, .hero, .strip, .final { width: 100%; max-width: 1160px; margin: 0 auto; padding: clamp(40px, 7vw, 88px) clamp(16px, 4vw, 48px); box-sizing: border-box; }
h1, h2, h3 { margin: 0; line-height: 1.15; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.section-lead { color: var(--ink-soft); font-size: 1.05rem; max-width: 64ch; margin: 10px 0 28px; }

/* hero */
.hero { display: grid; gap: 36px; align-items: center; grid-template-columns: minmax(0, 1fr); padding-top: clamp(32px, 6vw, 72px); }
@media (min-width: 960px) { .hero { grid-template-columns: minmax(0, 1fr) minmax(380px, 560px); } }
.eyebrow { color: var(--brand-dark); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: var(--text-xs); margin: 0 0 12px; }
.hero h1 { font-size: clamp(2rem, 4.6vw, 3.3rem); letter-spacing: -.01em; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--ink-soft); max-width: 56ch; margin: 18px 0 26px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-row.center { justify-content: center; margin-top: 24px; }
.btn-lg { padding: 12px 22px; font-size: 1rem; }
.fine { color: var(--ink-faint); font-size: var(--text-sm); margin-top: 14px; }
.fine a { color: var(--brand-dark); }

/* the dashboard mock-up (inline SVG; the colours follow the theme) */
.hero-visual { min-width: 0; }
.mock { width: 100%; height: auto; filter: drop-shadow(var(--shadow-lg)); }
.mock-frame { fill: var(--surface); stroke: var(--line); }
.mock-bar { fill: var(--brand-tint); }
.mock-dot { fill: var(--brand); opacity: .55; }
.mock-title { fill: var(--ink-soft); font: 600 12px var(--font); }
.mock-h { fill: var(--ink); font: 700 15px var(--font); }
.mock-sub { fill: var(--ink-faint); font: 500 11px var(--font); }
.mock-row rect:first-child { fill: var(--surface); stroke: var(--line); }
.mock-ic { fill: var(--brand-tint); }
.mock-t { fill: var(--ink); font: 600 12px var(--font); }
.mock-s { fill: var(--ink-soft); font: 400 10.5px var(--font); }
.mock-c { fill: var(--brand-dark); font: 600 11px var(--font); }
.mock-chip { fill: var(--brand-tint); }
.mock-track { fill: var(--line); }
.mock-fill { fill: var(--brand); }
.mock-div { stroke: var(--line); }
.ok { fill: var(--color-success, #2e9e5b); }
.warn { fill: var(--color-warning, #d99a1b); }
.bad { fill: var(--color-danger, #c0392b); }
.mock-tag > rect:first-child { fill: var(--surface); stroke: var(--brand); stroke-width: 1.5; }
.mock-tag .qr { fill: #fff; stroke: var(--line); }
.mock-tag .qr-cells rect { fill: #16202b; }
.mock-code { fill: var(--ink); font: 700 12px var(--font-mono); letter-spacing: .04em; }

/* scale strip */
.strip { padding-top: 0; }
.strip-metric { text-align: center; font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 600; margin: 0 0 18px; }
.badges { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.badges li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; font-size: var(--text-sm); color: var(--ink-soft); display: flex; gap: 10px; align-items: center; }
.badges li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; }

/* three columns, steps */
.cols-3 { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); margin: 0; }
.card h3 { font-size: 1.1rem; margin: 10px 0 8px; }
.card p { margin: 0; color: var(--ink-soft); }
.ic { width: 40px; height: 40px; border-radius: 10px; background: var(--brand-tint); color: var(--brand-dark); display: grid; place-items: center; }
.ic svg { width: 22px; height: 22px; }
/* full-bleed band without horizontal overflow: the shadow paints the surface out to the edges */
.alt { background: var(--surface); box-shadow: 0 0 0 100vmax var(--surface); clip-path: inset(0 -100vmax); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); counter-reset: step; }
.steps li { position: relative; padding: 22px 22px 22px 70px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--canvas); }
.steps .num { position: absolute; left: 20px; top: 20px; width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; font-weight: 700; }
.steps h3 { font-size: 1.1rem; margin: 2px 0 8px; }
.steps p { margin: 0; color: var(--ink-soft); }

/* pricing */
.currency { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-pill); overflow: hidden; margin-bottom: 16px; }
.currency button { border: 0; background: var(--surface); color: var(--ink-soft); padding: 8px 16px; font: inherit; font-size: var(--text-sm); cursor: pointer; }
.currency button.is-on { background: var(--brand); color: var(--brand-ink); }
.pricing-table table { width: 100%; }
.pricing-table td, .pricing-table th { vertical-align: top; }
.pricing-table .price-cell { white-space: nowrap; font-weight: 600; }
.pricing-table .cur { font-size: var(--text-micro); color: var(--ink-faint); margin-left: 6px; }
.pricing-table tr[data-currency] { display: none; }
.pricing-table[data-show="INR"] tr[data-currency="INR"], .pricing-table[data-show="USD"] tr[data-currency="USD"], .pricing-table tr[data-currency="all"] { display: table-row; }

/* final + footer */
.final { text-align: center; }
.final h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
.final p { color: var(--ink-soft); font-size: 1.1rem; margin: 12px 0 24px; }
.final .btn { margin: 4px; }
.site-footer { border-top: 1px solid var(--line); background: var(--surface); padding: 28px clamp(16px, 4vw, 48px); display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; }
.foot-brand img { height: 26px; width: auto; }
.foot-brand p { margin: 6px 0 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.foot-links a { color: var(--ink-soft); text-decoration: none; font-size: var(--text-sm); }
.foot-links a:hover { color: var(--ink); }

/* downloads: one tile per platform */
.downloads .section-head { max-width: 760px; }
.dl-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 28px; }
.dl-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 28px 20px; }
.dl-tile h2 { margin: 4px 0 0; font-size: 1.3rem; }
.dl-tile .btn { margin-top: 6px; }
.dl-tile .btn.is-disabled { opacity: .55; pointer-events: none; }
.dl-version { margin: 0; font-weight: 600; }
.dl-sha { word-break: break-all; margin: 0; }
.dl-sha code { font-size: .72rem; }
.os-icon { width: 72px; height: 72px; color: var(--brand); }
.os-icon svg { width: 100%; height: 100%; }
.downloads .table-wrap { margin-top: 24px; }