/*
 * Elglide — redesigned static homepage
 * Brand tokens kept close to the existing marketing site (--brand-primary
 * #0d6efd) so the redesign reads as the same product, just clearer.
 */

:root {
  --primary: #0d6efd;
  --primary-dark: #0a58ca;
  --primary-light: #e8f1ff;
  --ink: #12161c;
  --ink-soft: #3d4552;
  --muted: #6b7480;
  --bg: #ffffff;
  --bg-soft: #f6f8fb;
  --bg-soft-2: #eef2f7;
  --border: #e6e9ee;
  --success: #16a34a;
  --danger: #d64545;
  --radius: 12px;
  --radius-sm: 8px;
  --shell-max: 72rem;
  --shell-pad: 1.25rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Grid/flex items default to a content-based min-width, which lets long
   unbreakable rows (e.g. the hero diagram) force their track wider than
   the viewport. Reset so tracks can actually shrink on small screens. */
.hero-grid > *,
.hybrid-grid > *,
.footer-grid > *,
.cta-inner > * {
  min-width: 0;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }

h1, h2, h3, h4 { line-height: 1.2; margin: 0; color: var(--ink); }
p { margin: 0; color: var(--ink-soft); }
ul, ol { margin: 0; padding: 0; list-style: none; }
svg { display: block; }

.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding-left: var(--shell-pad);
  padding-right: var(--shell-pad);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--primary);
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: 0 0 var(--radius-sm) 0;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* ── Buttons ─────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 0.7rem 1.3rem;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); color: #fff; }

.btn-outline { background: #fff; color: var(--ink); border-color: var(--border); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }

.btn-lg { padding: 0.85rem 1.6rem; font-size: 1rem; }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.9rem; }
.btn-block { width: 100%; }

.link-arrow { font-weight: 600; font-size: 0.95rem; }

/* ── Header ──────────────────────────────────────────────────────── */

.site-header {
  border-bottom: 1px solid var(--border);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
  gap: 1rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
}

/* The wordmark uses assets/elglide-logo.png — the same mark pilot and the
   other landing pages carry — rather than the design source's inline SVG, so
   the site and the product don't show two different logos. 28px square with
   6px corners is the shared convention (see README, "Brand consistency"). */
.logo-mark { width: 28px; height: 28px; border-radius: 6px; object-fit: contain; flex: 0 0 auto; }
.logo-mark svg { width: 100%; height: 100%; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.nav-link {
  font-size: 0.95rem;
  color: var(--ink-soft);
  font-weight: 500;
}
.nav-link:hover { color: var(--primary); }
.nav-link.quiet { color: var(--muted); }

.nav-auth {
  display: flex;
  align-items: center;
  margin-left: 0.5rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--border);
}

.auth-combo {
  display: flex;
  align-items: stretch;
  background: var(--bg-soft-2);
  border-radius: 999px;
  padding: 3px;
}
.auth-combo a {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
}
.auth-combo-signin { color: var(--ink-soft); }
.auth-combo-signin:hover { color: var(--ink); }
.auth-combo-register { background: var(--primary); color: #fff; }
.auth-combo-register:hover { background: var(--primary-dark); color: #fff; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 16px;
  height: 2px;
  margin: 0 auto;
  background: var(--ink);
}

/* ── Hero ────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: min(calc(100vh - 65px), 600px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 70% at 18% 0%, rgba(20, 58, 122, 0.85) 0%, transparent 55%),
    linear-gradient(160deg, #060a16 0%, #0a1230 45%, #0a1a3d 75%, #0d1f4a 100%);
  padding: 3.5rem 0 4.5rem;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-grid-lines {
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 55% 45%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 65% at 55% 45%, #000 30%, transparent 78%);
  animation: heroGridDrift 24s linear infinite;
}

.hero-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(140, 190, 255, 0.4) 1px, transparent 1.4px);
  background-size: 26px 26px;
  opacity: 0.55;
  animation: heroDotsDrift 70s linear infinite;
}

.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
}
.hero-glow-a {
  width: 34rem; height: 34rem;
  top: -12%; left: -10%;
  background: radial-gradient(circle, #0d6efd 0%, transparent 70%);
  animation: heroDriftA 22s ease-in-out infinite;
}
.hero-glow-b {
  width: 26rem; height: 26rem;
  bottom: -16%; right: -6%;
  background: radial-gradient(circle, #22d3ee 0%, transparent 70%);
  opacity: 0.5;
  animation: heroDriftB 26s ease-in-out infinite;
}
.hero-glow-c {
  width: 22rem; height: 22rem;
  top: 30%; right: 18%;
  background: radial-gradient(circle, #7c6cf0 0%, transparent 70%);
  opacity: 0.32;
  animation: heroDriftC 18s ease-in-out infinite;
}

.hero-streak {
  position: absolute;
  left: -25%;
  width: 30%;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(150, 200, 255, 0.9), transparent);
  opacity: 0;
  animation: heroStreak linear infinite;
}
.hero-streak-1 { top: 16%; animation-duration: 9s; animation-delay: 0s; }
.hero-streak-2 { top: 40%; animation-duration: 12s; animation-delay: 3.5s; }
.hero-streak-3 { top: 66%; animation-duration: 10s; animation-delay: 7s; }
.hero-streak-4 { top: 84%; animation-duration: 13s; animation-delay: 1.5s; }

@keyframes heroGridDrift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 56px 56px, 56px 56px; }
}
@keyframes heroDotsDrift {
  from { background-position: 0 0; }
  to { background-position: -520px 260px; }
}
@keyframes heroDriftA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(4%, 6%) scale(1.08); }
}
@keyframes heroDriftB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-5%, -5%) scale(1.1); }
}
@keyframes heroDriftC {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-6%, 5%); }
}
@keyframes heroStreak {
  0% { transform: translateX(0%); opacity: 0; }
  8% { opacity: 0.85; }
  92% { opacity: 0.5; }
  100% { transform: translateX(430%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-grid-lines, .hero-dots, .hero-glow, .hero-streak { animation: none; }
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3rem;
  align-items: center;
}

.eyebrow {
  color: var(--primary);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.9rem;
}
.hero h1 {
  font-size: clamp(2.3rem, 4.5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 1.1rem;
  color: #fff;
}

/* "Glide your data home." must hold ONE line while the hero is two-column —
   at the design's 3.4rem it overflowed the copy column and broke after
   "data". The vw term and the cap are tuned so the line fits the narrower
   column at every width from the 881px breakpoint up; below that the hero
   stacks, the cap no longer applies, and the rule above governs. */
@media (min-width: 881px) {
  .hero h1 {
    font-size: clamp(2.3rem, 4.1vw, 3.05rem);
    white-space: nowrap;
  }
}

.hero-sub {
  font-size: 1.1rem;
  max-width: 34rem;
  margin-bottom: 1.75rem;
  color: rgba(255, 255, 255, 0.78);
}
.hero-sub strong { color: #fff; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 1.5rem;
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.62);
}
.hero-trust li { position: relative; padding-left: 1.1rem; }
.hero-trust li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
}

.hero-scroll-cue {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  animation: heroScrollBounce 2.2s ease-in-out infinite;
}
.hero-scroll-cue:hover { color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.hero-scroll-cue svg { width: 16px; height: 16px; }
@keyframes heroScrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue { animation: none; }
}

/* ── Hero diagram ────────────────────────────────────────────────── */

.hero-visual { display: flex; justify-content: center; }

/* Every size inside the diagram is expressed in em off this one font-size,
   so a narrow hero column shrinks the whole diagram uniformly instead of
   rewrapping "Direct connection" and the source chips onto two lines. The
   widest thing a column has to hold is the "MODERN DATA STACK" label, which
   needs ~7.3x the base size; with padding, arrows and gaps the diagram needs
   ~30x. The clamps below solve for that from the column's actual width:
   here, stacked, the diagram spans the shell (100vw - 2 * --shell-pad). */
.diagram {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 1em;
  padding: 1.75em 1.25em;
  box-shadow: 0 30px 70px rgba(2, 8, 23, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 60px rgba(13, 110, 253, 0.25);
  display: flex;
  align-items: center;
  gap: 0.5em;
  width: 100%;
  font-size: clamp(0.6rem, calc(3.3vw - 1.3px), 1rem);
}

/* Two-column hero: the diagram gets 0.95 of the 2fr grid inside the shell,
   less the 3rem gap — about 0.475 * (min(100vw, --shell-max) - 88px). */
@media (min-width: 881px) {
  .diagram { font-size: clamp(0.8rem, calc(1.58vw - 1.4px), 1rem); }
}

.diagram-col {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  flex: 1;
  min-width: 0;
}

.diagram-label {
  font-size: 0.72em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  margin-bottom: 0.21em;
}

.diagram-chip {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 0.64em;
  padding: 0.58em 0.77em;
  font-size: 0.78em;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
}

.diagram-chip-brand {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.diagram-chip-ghost {
  background: #fff;
  border-style: dashed;
  color: var(--ink-soft);
}

.diagram-label-fit { white-space: nowrap; font-size: 0.66em; letter-spacing: 0.02em; }

/* Middle column: one box listing the connection modes. */
.diagram-engine {
  border: 1px solid var(--primary);
  border-radius: 0.625em;
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

.diagram-engine-list {
  display: flex;
  flex-direction: column;
  gap: 0.28em;
  padding: 0.6em 0.5em;
}

.diagram-engine-list span {
  font-size: 0.75em;
  font-weight: 600;
  color: #fff;
  text-align: center;
}

/* Right column: featured destination badge. */
.diagram-chip-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.51em;
}

.diagram-chip-logo svg { width: 1.2em; height: 1.2em; flex: 0 0 auto; }

.diagram-chip-featured {
  background: #fff;
  border-color: #29b5e8;
  box-shadow: 0 0 0 3px rgba(41, 181, 232, 0.14);
  color: var(--ink);
}

.diagram-note {
  font-size: 0.72em;
  color: var(--muted);
  margin-top: 0.21em;
  text-align: center;
}

.diagram-arrow { flex: 0 0 auto; width: 1.25em; opacity: 0.7; }

/* ── Hybrid model spotlight ──────────────────────────────────────── */

.hybrid { background: var(--bg-soft); border-bottom: 1px solid var(--border); }

.hybrid-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
}

.hybrid-copy p { font-size: 1.02rem; margin: 0.9rem 0 1.5rem; max-width: 32rem; }
.hybrid-copy h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: -0.01em; }
.hybrid-copy .hero-actions { margin-top: 1.5rem; flex-direction: column; align-items: flex-start; gap: 0.9rem; }

.hybrid-alt-link { font-size: 0.9rem; }

.hybrid-footnote { font-size: 0.85rem; color: var(--muted); margin-top: 1.5rem; }

.hybrid-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.cloud-box {
  background: var(--primary);
  border-radius: 16px;
  padding: 1.35rem 1.5rem;
  width: 100%;
  max-width: 22rem;
  box-shadow: 0 20px 40px rgba(13, 110, 253, 0.25);
}
.cloud-label {
  display: block;
  color: rgba(255,255,255,0.85);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.5rem;
}
.cloud-line { color: #fff; font-size: 0.92rem; font-weight: 600; }
.cloud-sub { color: rgba(255,255,255,0.78); font-size: 0.78rem; margin-top: 0.15rem; }

/* The one link that crosses the firewall — it points OUT, and it is the only
   place on the homepage that names the transport. */
.hybrid-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0;
}
.hybrid-link svg { width: 20px; height: 20px; }
.hybrid-mtls {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary-dark);
  background: var(--primary-light);
  border: 1px solid #bcd4fb;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  white-space: nowrap;
}

/* Firewall: a dashed rule with the claim under it. Ochre, so it reads as a
   boundary rather than as more Elglide chrome. */
.firewall {
  width: 100%;
  max-width: 22rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0 0.35rem;
}
.firewall::before, .firewall::after { content: ""; height: 0; border-top: 2px dashed #e2b678; }
.firewall-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #b45309;
  background: #fdf6ec;
  border: 1px solid #e2b678;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  white-space: nowrap;
}
.firewall-note {
  font-size: 0.72rem;
  color: #b45309;
  font-weight: 600;
  text-align: center;
}

/* ── Sections ────────────────────────────────────────────────────── */

.section { padding: 5rem 0; }
.section-alt { background: var(--bg-soft); }

/* 38rem left "safely" and "sync." stranded on a second line — both headings
   overran the box by under 30px at full size. 40rem clears them; the lead
   paragraph keeps the old measure so body line length is unchanged. */
.section-head { max-width: 40rem; margin-bottom: 3rem; }
.section-head h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 0.6rem; letter-spacing: -0.01em; }
.section-head p { font-size: 1.05rem; max-width: 38rem; }

/* ── Feature grid ────────────────────────────────────────────────── */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.feature-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  background: #fff;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.feature-card:hover { box-shadow: 0 12px 28px rgba(16,24,40,0.08); transform: translateY(-2px); }

.feature-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
}
.feature-icon svg { width: 22px; height: 22px; stroke: var(--primary); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.feature-card h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.feature-card p { font-size: 0.93rem; }

/* ── Steps ───────────────────────────────────────────────────────── */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  counter-reset: step;
}

.step { position: relative; padding-top: 0.25rem; }

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.step h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.step p { font-size: 0.93rem; }

/* ── Security section ────────────────────────────────────────────── */

/* Copy-only band: the architecture diagram lives once, in the hybrid
   section. The bullets go two-up so the band doesn't read as half empty. */
.security-copy { max-width: 46rem; }
.security-copy h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 1rem; letter-spacing: -0.01em; }
.security-copy > p { font-size: 1.05rem; margin-bottom: 1.5rem; max-width: 32rem; }

.check-list, .check-list-sm { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; }
.check-list li, .check-list-sm li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.98rem;
  color: var(--ink-soft);
}
.check-list-sm li { font-size: 0.9rem; }
.security-copy .check-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 2rem;
}
.check-list li::before, .check-list-sm li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e7f6ec;
  border: 1px solid #bce6c9;
}
.check-list li::after, .check-list-sm li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.58em;
  width: 6px;
  height: 3px;
  border-left: 2px solid var(--success);
  border-bottom: 2px solid var(--success);
  transform: rotate(-45deg);
}

.perimeter-box {
  border: 2px dashed #bcd4fb;
  border-radius: 16px;
  padding: 2.4rem 1.5rem 1.5rem;
  position: relative;
  background: var(--primary-light);
  width: 100%;
  max-width: 22rem;
  margin-top: 0.9rem;
}
.perimeter-label {
  position: absolute;
  top: -0.7rem;
  left: 1.25rem;
  background: var(--bg-soft);
  padding: 0.15rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--primary-dark);
  border-radius: 999px;
  border: 1px solid #bcd4fb;
}
.perimeter-inner { display: flex; flex-direction: column; gap: 0.55rem; }
.perimeter-chip {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.9rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
}
.perimeter-chip-brand { background: var(--primary); color: #fff; border-color: var(--primary); }
.chip-sub {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted);
  margin-top: 0.1rem;
}
.perimeter-chip-brand .chip-sub { color: rgba(255,255,255,0.8); }

/* Data-path arrows. These stay INSIDE the perimeter box on purpose — the
   asymmetry against the single outbound link is the whole argument. */
.flow-step {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: var(--primary);
}
.flow-step svg { width: 15px; height: 15px; opacity: 0.7; }
.flow-step span { font-size: 0.68rem; font-weight: 600; color: var(--muted); }

/* ── Why Elglide ─────────────────────────────────────────────────── */

.why-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.why-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  background: #fff;
}
.why-card h3 { font-size: 1.05rem; margin-bottom: 0.6rem; }
.why-card p { font-size: 0.93rem; }

.vs-tablewrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  overflow-x: auto;
}

.vs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  min-width: 42rem;
}

.vs-table th {
  text-align: left;
  padding: 0.9rem 1.25rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.vs-table th.vs-elglide-col { color: var(--primary-dark); }

.vs-table td {
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--border);
  color: var(--ink-soft);
  vertical-align: top;
}
.vs-table td:first-child { font-weight: 600; color: var(--ink); white-space: nowrap; }

.vs-table tr:last-child td { border-bottom: 0; }

.vs-group {
  background: var(--bg-soft);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  white-space: nowrap;
}

.vs-yes-cell { background: var(--primary-light); }

.vs-mark { font-weight: 800; margin-right: 0.4rem; }
.vs-yes { color: var(--success); }
.vs-no { color: var(--danger); }

/* Column names quoted in the comparison table — home.css styles no code
   elsewhere, so this stays scoped to the table that uses them. */
.vs-table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--bg-soft-2);
  border-radius: 4px;
  padding: 0.05em 0.3em;
  white-space: nowrap;
}

.vs-note {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.25rem;
}

.vs-disclaimer {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 1.25rem;
  max-width: 48rem;
}

.why-cta { margin-top: 2rem; }

/* ── Pricing ─────────────────────────────────────────────────────── */

.flat-price-card {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 16px 40px rgba(16, 24, 40, 0.08);
  overflow: hidden;
}

.flat-price-left {
  padding: 2.5rem;
}

.flat-price-right {
  padding: 2.5rem;
  background: var(--bg-soft);
  border-left: 1px solid var(--border);
}

.price-note { font-size: 0.85rem; color: var(--muted); font-weight: 600; margin-bottom: 0.5rem; }

.flat-amount {
  font-size: 3rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}
.flat-amount span { display: block; font-size: 1rem; font-weight: 500; color: var(--muted); margin-top: 0.25rem; }

.flat-sub { font-size: 1rem; max-width: 26rem; margin-bottom: 1.5rem; }

.flat-price-right h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); margin-bottom: 1.1rem; }

.check-list-sm { margin-bottom: 0; }

.free-tier-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}
.free-tier-icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.free-tier-icon svg { width: 15px; height: 15px; }
.free-tier-headline { color: #fff; font-size: 1.15rem; font-weight: 700; }

.row-def-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.row-def-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  background: #fff;
}
.row-def-card h4 { font-size: 1rem; margin: 0.6rem 0 0.5rem; color: var(--ink); }
.row-def-card p { font-size: 0.9rem; }
.row-def-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--bg-soft-2);
  color: var(--muted);
}
.row-def-tag-free { background: #dcfce7; color: #15803d; }

.autoreload-note {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  background: var(--primary-light);
  border: 1px solid #bcd4fb;
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-top: 1.5rem;
}
.autoreload-note svg { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 0.15rem; }
.autoreload-note p { font-size: 0.93rem; color: var(--ink-soft); }

.addons {
  text-align: center;
  margin-top: 2rem;
}
.addons p { font-size: 0.95rem; margin-bottom: 0.4rem; }
.addons .link-arrow { font-size: 0.95rem; }

/* ── CTA band ────────────────────────────────────────────────────── */

.cta-band {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  padding: 3.5rem 0;
}
.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.cta-band h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 1.9rem); margin-bottom: 0.5rem; }
.cta-band p { color: rgba(255,255,255,0.85); font-size: 1rem; }
.cta-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; }
.cta-band .btn-primary { background: #fff; color: var(--primary-dark); }
.cta-band .btn-primary:hover { background: #eef2f7; }

/* ── Footer ──────────────────────────────────────────────────────── */

.site-footer { background: var(--ink); padding: 3.5rem 0 1.5rem; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 2rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-brand .wordmark { color: #fff; margin-bottom: 0.75rem; }
.footer-brand p { color: rgba(255,255,255,0.55); font-size: 0.9rem; max-width: 16rem; }

.footer-col { display: flex; flex-direction: column; gap: 0.65rem; }
.footer-col h4 { color: rgba(255,255,255,0.9); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.35rem; }
.footer-col a { color: rgba(255,255,255,0.6); font-size: 0.9rem; }
.footer-col a:hover { color: #fff; }

.footer-bottom { padding-top: 1.5rem; }
.footer-bottom p { color: rgba(255,255,255,0.45); font-size: 0.85rem; }

/* ── Responsive ──────────────────────────────────────────────────── */

/* The hero holds its two columns further down than the other grids: the
   diagram scales with the column (see .diagram) rather than rewrapping, so
   it stays beside the headline to 881px. Below that it stacks BELOW the
   copy — never above it, which is what the headline is for. */
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
  .hybrid-grid { grid-template-columns: 1fr; }
  .security-copy .check-list { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .why-cards { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 2.5rem; }
  .flat-price-card { grid-template-columns: 1fr; }
  .flat-price-right { border-left: 0; border-top: 1px solid var(--border); }
  .row-def-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .nav-toggle { display: flex; }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 1.25rem 1.5rem;
    gap: 0.9rem;
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .nav-auth { border-left: none; padding-left: 0; margin-left: 0; margin-top: 0.5rem; }
  .feature-grid { grid-template-columns: 1fr; }
  .flat-price-left, .flat-price-right { padding: 1.75rem; }
  .flat-amount { font-size: 2.4rem; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
}