/* ============================================================
   Gatekeeper by HoneyWired — Design System
   ============================================================ */

:root {
  --bg: #FAF7F2;
  --bg-alt: #F5EFE6;
  --ink: #1A1915;
  --muted: #57534E;
  --faint: #A8A29E;
  --line: #E7E5E4;
  --line-soft: #F5F5F4;
  --accent: #D4963B;
  --burgundy: #6E1A2E;
  --forest: #3F5A4E;
  --shopify: #008060;
  --mint: #E8EEE9;
  --cream: #F5EFE6;
  --warning-bg: #FFF8EC;
  --warning-ink: #8B5A1E;
  --danger: #991B1B;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--ink); }
a:hover { opacity: 0.8; }

.container {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 32px;
}

.container--wide {
  max-width: 1120px;
}

/* ---------- Draft banner (remove when legal finalized) ---------- */
.draft-banner {
  background: var(--warning-bg);
  border-bottom: 1px solid #F0D9A8;
  padding: 10px 0;
  font-size: 12px;
  text-align: center;
  color: var(--warning-ink);
}

/* ---------- Top bar ---------- */
.topbar {
  border-bottom: 1px solid rgba(231, 229, 228, 0.6);
  padding: 18px 0;
  background: rgba(250, 247, 242, 0.85);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.logo__mark {
  width: 28px;
  height: 28px;
  background: var(--ink);
  border-radius: 6px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.logo__mark::after {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--accent);
  border-radius: 2px;
}
.logo__name {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
}
.logo__tagline {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-top: 3px;
}
.nav {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-left: auto;
}
.nav a {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  transition: color 120ms;
}
.nav a:hover { color: var(--ink); opacity: 1; }
.nav a.active { color: var(--ink); font-weight: 500; }
.topbar .btn-install {
  margin-left: 24px;
  background: var(--ink);
  color: white;
  padding: 8px 14px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 120ms;
}
.topbar .btn-install:hover { opacity: 0.9; color: white; }

/* The hamburger only exists below the breakpoint; on desktop the nav is
   already a row and a button would be one more thing to click. */
.nav-toggle { display: none; }

/* Logo, Install and the hamburger share row one; the links live behind the
   hamburger and push nothing around until they are asked for. */
@media (max-width: 760px) {
  /* Row gap is 0: the collapsed nav is still a wrapped flex line, and a row
     gap would leave its height behind on every closed bar. */
  .topbar { padding: 12px 0; }
  .topbar__inner { flex-wrap: wrap; gap: 0 12px; }
  .topbar .logo { margin-right: auto; }
  .topbar .btn-install { margin-left: 0; }

  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    order: 2; flex: none;
    width: 38px; height: 38px;
    padding: 0;
    background: transparent; color: var(--ink);
    border: 1px solid var(--line); border-radius: 6px;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle:hover { background: var(--bg-alt); }
  .nav-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

  /* Three bars that fold into an X. The middle one fades; the outer two
     rotate about the center they already sit either side of. */
  .nav-bars { position: relative; width: 17px; height: 12px; display: block; }
  .nav-bars i {
    position: absolute; left: 0; width: 100%; height: 1.5px;
    background: currentColor; border-radius: 2px;
    transition: transform 0.22s ease, opacity 0.16s ease;
  }
  .nav-bars i:nth-child(1) { top: 0; }
  .nav-bars i:nth-child(2) { top: 5.25px; }
  .nav-bars i:nth-child(3) { top: 10.5px; }
  .nav-toggle[aria-expanded="true"] .nav-bars i:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-bars i:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-bars i:nth-child(3) { transform: translateY(-5.25px) rotate(-45deg); }

  .nav {
    order: 3; width: 100%; margin-left: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    max-height: 0; overflow: hidden;
    transition: max-height 0.26s ease;
  }
  .nav[data-open="true"] { max-height: 70vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .nav a {
    display: block; padding: 13px 2px;
    font-size: 15px; border-top: 1px solid var(--line);
  }
  .nav a:first-child { margin-top: 12px; }
  .nav a:last-child { padding-bottom: 4px; }
}

/* Below 390px the full label no longer fits beside the logo and the
   hamburger, and the page's 32px gutter is not the topbar's to give up.
   "on Shopify" stays for screen readers; only the eye loses it. */
@media (max-width: 389px) {
  .btn-install__more {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav, .nav-bars i { transition: none; }
}

/* ---------- Type ---------- */
.eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin-bottom: 16px;
  font-weight: 500;
}
h1 { font-family: 'Fraunces', serif; font-weight: 380; letter-spacing: -0.025em; }
h2 { font-family: 'Fraunces', serif; font-weight: 400; letter-spacing: -0.02em; }
h3 { font-family: 'Fraunces', serif; font-weight: 500; letter-spacing: -0.01em; }

/* ---------- Hero ---------- */
.hero {
  padding: 96px 0 48px;
}
.hero--bordered {
  border-bottom: 1px solid var(--line);
}
.hero h1 {
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.05;
  margin: 0 0 24px;
  max-width: 18ch;
}
.hero h1 em {
  font-style: italic;
  color: var(--burgundy);
  font-weight: 400;
}
.hero p.lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 52ch;
  margin: 0 0 32px;
}
.hero__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 120ms, opacity 120ms;
}
.btn:hover { transform: translateY(-1px); opacity: 0.92; }
.btn:active { transform: translateY(0); }
.btn--primary {
  background: var(--ink);
  color: white;
}
.btn--secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn--secondary:hover { border-color: var(--ink); }
.btn--shopify {
  background: var(--shopify);
  color: white;
}

/* ---------- Sections ---------- */
section.content {
  padding: 72px 0;
  border-bottom: 1px solid var(--line);
}
section.content:last-of-type { border-bottom: none; }

section.content h2 {
  font-size: 32px;
  margin: 0 0 20px;
  line-height: 1.15;
}
section.content > p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 16px;
  max-width: 64ch;
}
section.content > p.muted {
  color: var(--muted);
}
section.content h3 {
  font-size: 20px;
  margin: 32px 0 12px;
}
section.content h4 {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin: 20px 0 8px;
}

/* ---------- Legal doc formatting ---------- */
.legal-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 0 96px;
}
.legal-body h2 {
  font-size: 26px;
  margin: 56px 0 16px;
  padding-top: 8px;
  line-height: 1.2;
}
.legal-body h2:first-of-type { margin-top: 16px; }
.legal-body h3 {
  font-size: 18px;
  margin: 32px 0 10px;
}
.legal-body h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 24px 0 8px;
  color: var(--ink);
}
.legal-body p {
  font-size: 15px;
  line-height: 1.72;
  margin: 12px 0;
  color: var(--ink);
}
.legal-body ul, .legal-body ol {
  padding-left: 24px;
  margin: 12px 0;
}
.legal-body li {
  font-size: 15px;
  line-height: 1.72;
  margin: 6px 0;
  color: var(--ink);
}
.legal-body strong {
  font-weight: 600;
}
.legal-body em {
  font-style: italic;
  color: var(--muted);
}
.legal-body .legal-meta {
  padding: 16px 20px;
  background: var(--cream);
  border-radius: 8px;
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 40px;
}
.legal-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 14px;
}
.legal-body table th {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 500;
  text-align: left;
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--line);
}
.legal-body table td {
  padding: 14px 12px 14px 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  line-height: 1.55;
}
.legal-body table td:first-child {
  font-weight: 500;
}

/* ---------- Footer ---------- */
footer {
  padding: 64px 0 48px;
  border-top: 1px solid var(--line);
  margin-top: 48px;
  background: var(--bg-alt);
}
footer .container {
  max-width: 1120px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.footer-col h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin: 0 0 16px;
  font-weight: 500;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-col li {
  margin-bottom: 10px;
}
.footer-col a {
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  transition: color 120ms;
}
.footer-col a:hover { color: var(--burgundy); opacity: 1; }
.footer-about p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  max-width: 40ch;
}
.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid rgba(110, 26, 46, 0.1);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-bottom p {
  font-size: 11px;
  color: var(--muted);
  margin: 0;
}
.footer-bottom .updated {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--faint);
}

/* ---------- Subtle animation ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero h1 { animation: rise 800ms cubic-bezier(0.2, 0.8, 0.3, 1) both; }
  .hero p.lede { animation: rise 800ms 120ms cubic-bezier(0.2, 0.8, 0.3, 1) both; }
  .hero__cta { animation: rise 800ms 240ms cubic-bezier(0.2, 0.8, 0.3, 1) both; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}