/* =========================================================================
   YourLegal.app Global styles
   Design language: modern app-company aesthetic (Condor-inspired)
   Signature: acid-lime green + ink black + dark navy contrast bands
   ========================================================================= */

:root {
  --lime: #c2f23b;
  --lime-deep: #aee01f;
  --ink: #0b0c0e;
  --navy: #0a1020;
  --navy-soft: #111a2e;
  --paper: #f5f6f2;
  --line: #e7e8e2;
  --muted: #5b6168;
}

* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

html { scroll-behavior: smooth; }

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #ffffff;
}

h1, h2, h3, h4, .font-display {
  font-family: "Space Grotesk", "Inter", sans-serif;
  letter-spacing: -0.02em;
}

/* ---- Layout helpers ---------------------------------------------------- */
.container-x { max-width: 1400px; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 768px) { .container-x { padding-inline: 2rem; } }

.section { padding-block: 5rem; }
@media (min-width: 768px) { .section { padding-block: 7rem; } }

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 600; font-size: 0.95rem; line-height: 1;
  padding: 0.95rem 1.5rem; border-radius: 999px;
  transition: transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
  white-space: nowrap; cursor: pointer; border: 1px solid transparent;
}
.btn:hover { transform: translateY(-2px); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; box-shadow: 0 12px 30px -12px rgba(0,0,0,.5); }
.btn-lime { background: var(--lime); color: var(--ink); }
.btn-lime:hover { background: var(--lime-deep); box-shadow: 0 12px 30px -12px rgba(174,224,31,.7); }
.btn-light { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-light:hover { border-color: var(--ink); }
.btn-outline-dark { background: transparent; color: var(--ink); border-color: rgba(11,12,14,.25); }
.btn-outline-dark:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.btn-ghost-light:hover { background: #fff; color: var(--ink); }

/* ---- App store badges -------------------------------------------------- */
.store-badge {
  display: inline-flex; align-items: center; gap: .65rem;
  background: var(--ink); color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: .9rem; padding: .6rem 1.15rem;
  transition: transform .18s ease, box-shadow .18s ease;
}
.store-badge:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -16px rgba(0,0,0,.55); }
.store-badge svg { width: 26px; height: 26px; flex: none; }
.store-badge__text { display: flex; flex-direction: column; line-height: 1; text-align: left; }
.store-badge__top { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; opacity: .82; }
.store-badge__big { font-family: "Space Grotesk", sans-serif; font-size: 1.18rem; font-weight: 600; margin-top: 3px; }

/* ---- Eyebrow / labels -------------------------------------------------- */
.eyebrow {
  font-family: "Space Grotesk", sans-serif;
  text-transform: uppercase; letter-spacing: .18em;
  font-size: .72rem; font-weight: 600;
}

/* ---- Pill chips -------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--line);
  font-size: .9rem; font-weight: 500;
}

/* ---- Cards ------------------------------------------------------------- */
.card {
  background: #fff; border: 1px solid var(--line);
  border-radius: 1.5rem; padding: 2rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -28px rgba(0,0,0,.25); border-color: #d8dad2; }

/* ---- Nav --------------------------------------------------------------- */
.nav-link { font-size: .95rem; font-weight: 500; color: #2b2f35; transition: color .15s ease; }
.nav-link:hover { color: var(--ink); }
.nav-shadow { box-shadow: 0 1px 0 rgba(0,0,0,.06); }

/* ---- Phone mockup ------------------------------------------------------ */
.phone {
  position: relative;
  width: 300px; height: 620px;
  background: #0b0c0e;
  border-radius: 44px;
  padding: 12px;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.55), inset 0 0 0 2px rgba(255,255,255,.06);
}
.phone__notch {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 26px; background: #0b0c0e; border-radius: 999px; z-index: 5;
}
.phone__screen {
  width: 100%; height: 100%; border-radius: 34px; overflow: hidden;
  background: linear-gradient(180deg, #11161f 0%, #0a0e15 100%);
  position: relative;
}
.panic-btn {
  width: 150px; height: 150px; border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #d7ff52, var(--lime) 55%, var(--lime-deep));
  color: var(--ink); display: grid; place-content: center; text-align: center;
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  box-shadow: 0 0 0 0 rgba(194,242,59,.55);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(194,242,59,.55); }
  70%  { box-shadow: 0 0 0 28px rgba(194,242,59,0); }
  100% { box-shadow: 0 0 0 0 rgba(194,242,59,0); }
}

/* ---- Marquee / trust bar ---------------------------------------------- */
.dashed-path { stroke-dasharray: 6 8; }

/* ---- Step accordions (details/summary) -------------------------------- */
details.acc { padding: 1.25rem 1.5rem; }
details.acc > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1.25rem;
  outline: none;
}
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary::marker { content: ""; }
.acc__chevron { transition: transform .25s ease; flex: none; color: var(--muted); }
details.acc[open] .acc__chevron { transform: rotate(180deg); color: var(--ink); }
.acc__title { transition: color .15s ease; }
details.acc:hover .acc__title { color: var(--branddeep); }
.acc__body {
  overflow: hidden;
  animation: accOpen .28s ease;
}
@keyframes accOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.why-callout {
  border-left: 3px solid var(--lime);
  background: var(--paper);
  border-radius: .75rem;
  padding: 1rem 1.15rem;
}

/* ---- Journal filter tabs ---------------------------------------------- */
[data-filter] {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--line); border-radius: 9999px;
  padding: .55rem 1.1rem; font-weight: 600; font-size: .9rem;
  background: #fff; color: var(--ink); cursor: pointer;
  transition: all .18s ease; white-space: nowrap;
}
[data-filter]:hover { border-color: var(--ink); }
[data-filter].is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---- Reveal on scroll -------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---- Misc -------------------------------------------------------------- */
.bg-paper { background: var(--paper); }
.bg-navy  { background: var(--navy); }
.text-muted { color: var(--muted); }
.divider { height: 1px; background: var(--line); }

.grid-texture {
  background-image:
    linear-gradient(rgba(11,12,14,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,12,14,.04) 1px, transparent 1px);
  background-size: 56px 56px;
}
.grid-texture-dark {
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
}