/* ============================================================
   ZeroCite — landing.v2.css
   Light, sans-serif, flat. Sky-blue accent. Animated grid accents.
   Built on https-design DESIGN.md rules + dialed-up flair.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap');

:root {
  /* ---- Color tokens ---- */
  /* Light gray page bg, white surfaces, sky-blue accents */
  --background:     #f1f3f5;     /* light cool gray */
  --background-alt: #e9ecef;
  --surface:        #ffffff;     /* white cards */
  --surface-alt:    #f5f5f7;
  --border:         #e5e7eb;     /* neutral gray */
  --border-strong:  #d1d5db;
  --text-primary:   #0a0a0a;
  --text-secondary: #374151;
  --text-muted:     #6b7280;

  /* Sky-blue accent family */
  --accent:         #0ea5e9;     /* sky-500 */
  --accent-hover:   #0284c7;     /* sky-600 */
  --accent-deep:    #0369a1;     /* sky-700 — saturated bg for hero/CTA */
  --accent-bright:  #38bdf8;     /* sky-400 */
  --accent-light:   #7dd3fc;     /* sky-300 */
  --accent-soft:    #e0f2fe;     /* sky-100 */
  --accent-wash:    #f0f9ff;     /* sky-50 */
  --accent-line:    rgba(14, 165, 233, 0.10);
  --accent-line-on-blue: rgba(255, 255, 255, 0.10);

  /* ---- Type ---- */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Spacing scale (strict 4px grid) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  --radius: 8px;
  --max-width: 1280px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--background);
  color: var(--text-primary);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.5;
  font-feature-settings: 'kern', 'liga', 'cv11';
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

/* ---------- Container ---------- */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--s-6);
  padding-right: var(--s-6);
  position: relative;
}

/* ---------- Animated grid backgrounds ---------- */

.grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--accent-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--accent-line) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: 0 0;
  animation: grid-drift 28s linear infinite;
  mask-image: radial-gradient(ellipse 80% 70% at center, black 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at center, black 0%, transparent 100%);
  z-index: 0;
}

.grid-bg--tight {
  background-size: 32px 32px;
  animation-duration: 40s;
  animation-direction: reverse;
}

@keyframes grid-drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 48px 48px, 48px 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .grid-bg, .grid-bg--tight { animation: none; }
}

/* ---------- Nav ---------- */

nav {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  /* Intentionally NOT clamped to --max-width here. The nav spans the
     full viewport so the logo hugs the left edge and the actions hug
     the right edge, opening up the middle. Page body content still
     respects --max-width via .container. */
  max-width: 100%;
  margin: 0 auto;
  padding-left: var(--s-5);
  padding-right: var(--s-5);
}

.nav-logo {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.nav-logo::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--accent);
  transform: rotate(45deg);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius);
  transition: color 150ms ease, background 150ms ease;
}
.nav-link:hover { color: var(--accent); background: var(--accent-wash); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease,
              border-color 180ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
  white-space: nowrap;
  line-height: 1.4;
}

.btn-primary {
  background: var(--accent);
  color: #ffffff;
  position: relative;
}
.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--surface);
  color: var(--text-primary);
  border-color: var(--border);
}
.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-wash);
}

.btn-lg {
  font-size: 15px;
  padding: var(--s-3) var(--s-5);
}

.btn .arrow {
  display: inline-block;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Code (the [src] tag) ---------- */

code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--accent-soft);
  color: var(--accent-hover);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding-top: var(--s-24);
  padding-bottom: var(--s-20);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
}

.hero-container {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  padding-left: var(--s-6);
  padding-right: var(--s-6);
  position: relative;
  z-index: 1;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-hover);
  background: var(--accent-wash);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--radius);
  border: 1px solid var(--accent-soft);
  margin-bottom: var(--s-6);
}
.eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}

.hero h1 {
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin-bottom: var(--s-6);
}
.hero h1 .accent {
  color: var(--accent);
  position: relative;
  display: inline-block;
}
.hero h1 .accent::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 8px;
  background: var(--accent-soft);
  z-index: -1;
  border-radius: 2px;
}

.hero-sub {
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0 auto var(--s-8);
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
}

.hero-note {
  font-size: 13px;
  color: var(--text-muted);
}

/* ---------- Example card ---------- */

.example {
  max-width: 880px;
  margin: var(--s-16) auto 0;
  padding-left: var(--s-6);
  padding-right: var(--s-6);
  position: relative;
  z-index: 1;
}

.example-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-6);
  text-align: left;
  transition: border-color 200ms ease;
}
.example-card:hover { border-color: var(--accent-light); }

.example-label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: var(--s-4);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.example-label::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

.example-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--s-4);
  align-items: center;
}

.example-cell {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-4);
}

.example-arrow {
  color: var(--accent);
  font-size: 20px;
  font-weight: 500;
  animation: nudge 2.5s ease-in-out infinite;
}
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}

.example-cite {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent-hover);
  background: var(--accent-wash);
  padding: 1px 5px;
  border-radius: 4px;
}

@media (max-width: 720px) {
  .example-row { grid-template-columns: 1fr; gap: var(--s-2); }
  .example-arrow { transform: rotate(90deg); justify-self: start; padding-left: var(--s-2); animation: none; }
}

/* ---------- Sections ---------- */

section { padding-block: var(--s-20); position: relative; }
section.tight { padding-block: var(--s-16); }

.section-head {
  max-width: 720px;
  margin-bottom: var(--s-12);
  position: relative;
  z-index: 1;
}
.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-eyebrow {
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--s-3);
}

.section-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: var(--s-4);
}

.section-lede {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ---------- How it works ---------- */

.how {
  background: var(--background);
  position: relative;
  overflow: hidden;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
  position: relative;
  z-index: 1;
}

@media (max-width: 880px) {
  .steps { grid-template-columns: 1fr; }
}

.step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-6);
  transition: border-color 200ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
}
.step:hover {
  border-color: var(--accent-light);
  transform: translateY(-2px);
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent-hover);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: var(--s-4);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  transition: background 200ms ease, color 200ms ease;
}
.step:hover .step-num {
  background: var(--accent);
  color: #ffffff;
}

.step h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--s-2);
  letter-spacing: -0.01em;
}

.step p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ---------- Sources ---------- */

.sources {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.sources-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--s-6);
  position: relative;
  z-index: 1;
}

.sources-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Grid of mini cards — visually echoes the .step cards in "How it works"
   above (white surface, subtle border, rounded corners), just smaller.
   Five fit in a row on desktop; wraps on narrower screens. align-items:
   start lets a hovered card grow downward without dragging neighbors. */
.sources-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: var(--s-3);
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 980px) {
  .sources-list { grid-template-columns: repeat(2, 1fr); max-width: 560px; }
}
@media (max-width: 520px) {
  .sources-list { grid-template-columns: 1fr; }
}

.source-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-4);
  cursor: pointer;
  outline: none;
  text-align: center;
  transition:
    border-color 220ms ease,
    background 220ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms ease;
}
.source-item:hover,
.source-item:focus-visible,
.source-item:focus-within {
  border-color: var(--accent-light);
  background: var(--accent-wash);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px -12px color-mix(in srgb, var(--accent) 45%, transparent);
}

.source-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  transition: color 200ms ease;
}
.source-item:hover .source-name,
.source-item:focus-visible .source-name,
.source-item:focus-within .source-name {
  color: var(--accent-hover);
}

/* Animated reveal — grid-template-rows 0fr → 1fr animates from collapsed
   to natural content height (which max-height: auto cannot do). The
   inner child is overflow:hidden so the clip happens cleanly. */
.source-info-wrap {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 260ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 200ms ease 40ms;
}
.source-info-wrap > .source-info { overflow: hidden; min-height: 0; }

.source-item:hover .source-info-wrap,
.source-item:focus-visible .source-info-wrap,
.source-item:focus-within .source-info-wrap {
  grid-template-rows: 1fr;
  opacity: 1;
}

.source-info {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
  font-weight: 400;
  text-align: left;
  letter-spacing: 0;
  /* Top spacing only appears once the row has expanded, so the closed
     state stays a clean small card. padding-top inside the clipped
     child keeps the animation smooth. */
  padding-top: var(--s-3);
}
.source-info p { margin: 0; }
.source-info p + p { margin-top: var(--s-2); }
.source-info strong { color: var(--text-primary); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .source-item,
  .source-info-wrap { transition: none; }
}

/* ---------- Pricing ---------- */

.pricing {
  background: var(--background);
  position: relative;
  overflow: hidden;
}

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  max-width: 880px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Two-card pricing layout: Free Trial (neutral) + Pro (accent). */
.pricing-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--s-5);
  max-width: 920px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
@media (max-width: 720px) {
  .pricing-duo { grid-template-columns: 1fr; max-width: 480px; }
}

/* Shared big-format card chrome — used by both Free Trial and Pro. */
.plan--solo,
.plan--free {
  width: 100%;
  text-align: center;
  background: var(--surface);
  padding: var(--s-10) var(--s-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  border-radius: var(--radius);
  transition: border-color 200ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Pro card — accent border so it visually leads. */
.plan--solo { border: 1px solid var(--accent); }
.plan--solo:hover { transform: translateY(-2px); }
.plan--solo .plan-tag { color: var(--accent); margin-bottom: var(--s-4); }

/* Free Trial card — neutral border, picks up sky-light on hover like
   the other cards on the page. */
.plan--free { border: 1px solid var(--border); }
.plan--free:hover {
  border-color: var(--accent-light);
  transform: translateY(-2px);
}
.plan--free .plan-tag { color: var(--text-muted); margin-bottom: var(--s-4); }

/* Shared price typography. */
.plan--solo .plan-price,
.plan--free .plan-price {
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: var(--s-1);
}
.plan--solo .plan-price-suffix,
.plan--free .plan-price-suffix {
  font-size: 20px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Keep CTAs aligned across both cards even when descriptions differ
   in length — push each card's button to the bottom. */
.plan--solo .btn,
.plan--free .btn { margin-top: auto; }

.plan-line {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.55;
  margin-top: var(--s-3);
  margin-bottom: var(--s-8);
  max-width: 38ch;
}

.plan-aside {
  font-size: 14px;
  color: var(--text-muted);
}
.plan-aside a {
  color: var(--accent);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
}
.plan-aside a:hover { color: var(--accent-hover); text-decoration: underline; }
.plan-aside a .arrow {
  display: inline-block;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.plan-aside a:hover .arrow { transform: translateX(3px); }

@media (max-width: 720px) { .pricing-grid { grid-template-columns: 1fr; } }

.plan {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-8);
  display: flex;
  flex-direction: column;
  transition: border-color 200ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.plan:hover {
  border-color: var(--accent-light);
  transform: translateY(-2px);
}

.plan--featured {
  border-color: var(--accent);
  border-width: 2px;
  padding: calc(var(--s-8) - 1px);
  position: relative;
}
.plan--featured::before {
  content: "Most popular";
  position: absolute;
  top: -10px;
  left: var(--s-6);
  background: var(--accent);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--radius);
}

.plan-tag {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: var(--s-3);
}
.plan--featured .plan-tag { color: var(--accent); }

.plan h3 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin-bottom: var(--s-2);
}

.plan-price {
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: var(--s-1);
  line-height: 1;
}
.plan-price-suffix {
  font-size: 18px;
  color: var(--text-muted);
  font-weight: 500;
}
.plan-price-note {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: var(--s-6);
  margin-top: var(--s-1);
}

.plan-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: var(--s-8);
  flex-grow: 1;
}
.plan-points li {
  font-size: 14px;
  color: var(--text-secondary);
  padding-left: var(--s-6);
  position: relative;
  line-height: 1.5;
}
.plan-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--accent-soft);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230284c7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 8 7 11 12 5'/></svg>");
  background-size: 16px 16px;
  background-repeat: no-repeat;
}

/* ---------- CTA ---------- */

.cta {
  background: var(--surface);
  border-top: 1px solid var(--border);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-inner {
  position: relative;
  z-index: 1;
}

.cta h2 {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: var(--s-4);
}
.cta h2 .accent { color: var(--accent); }

.cta p {
  font-size: 17px;
  color: var(--text-secondary);
  margin-bottom: var(--s-8);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Footer ---------- */

footer {
  border-top: 1px solid var(--border);
  padding: var(--s-8) 0;
  background: var(--surface);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-4);
  font-size: 13px;
  color: var(--text-muted);
}

.footer-logo {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.footer-logo::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--accent);
  transform: rotate(45deg);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}