/* ====================================================================
   NoteBrain Landing Page - design system
   Sixth fork (TCGBrain -> StarBrain -> ComicBrain -> CoinBrain ->
   StampBrain -> NoteBrain). Tokens from the app's src/config/theme.ts,
   which is Tailwind green-600 with a notably YELLOW-green light stop.

   Measured on white:
     colorPrimaryTint   #dcfce7   1.15:1  graphics
     colorPrimaryMuted  #bbf7d0   1.40:1  graphics
     colorPrimaryLight  #8feb87   1.84:1  graphics (the app's gradient start)
     colorPrimary       #16a34a   3.30:1  GRAPHICS / LARGE TEXT ONLY
     colorSecondary     #15803d   5.10:1  <- passes AA, carries body text
     colorInfo          #166534   7.12:1  <- passes AA comfortably

   NOT the same green as StampBrain. That app is emerald (#10B981, a
   blue-leaning green); this is grass green with a #8feb87 highlight that
   is visibly yellow. They are adjacent in the portfolio, so the
   separation is carried by the light stop and by composition, not by
   assuming "green" is one hue.

   ONE IMPORTANT DIFFERENCE FROM STAMPBRAIN: colorInfo here is GREEN, not
   a neutral. The dark CTA floor therefore comes from text.primary
   (#101828, gray-900) rather than colorInfo - using colorInfo would have
   left the card a flat single-hue green with nothing to ground it.
   ==================================================================== */

:root {
  /* ===== Brand (app theme.ts) ===== */
  --brand-50:  #f0fdf4;   /* green-50, one step above colorPrimaryTint */
  --brand-100: #dcfce7;   /* colorPrimaryTint */
  --brand-200: #bbf7d0;   /* colorPrimaryMuted */
  --brand-300: #8feb87;   /* colorPrimaryLight - graphics only, 1.84:1 */
  --brand-500: #16a34a;   /* colorPrimary - 3.30:1, GRAPHICS / LARGE ONLY */
  --brand-700: #15803d;   /* colorSecondary, 5.10:1 - carries text */
  --brand-900: #166534;   /* colorInfo, 7.12:1 */
  --deep-900:  #101828;   /* text.primary gray-900, CTA card floor, 17.4:1 */

  /* Alias kept so the ported rules below read unchanged. --brand-600 has to be
     a genuinely distinct step or every gradient using it flattens to a solid
     fill. The app ships only two mid greens (colorPrimary and colorSecondary)
     and both are already spoken for as 500 and 700, so this one step IS
     derived - the midpoint of the two. Graphics only at 4.02:1. */
  --brand-600: #159244;   /* derived mid-green, 4.02:1 - graphics / large */
  --brand-800: var(--brand-700);

  /* ===== CTA (the app's own gradient direction: bright green into deep green) ===== */
  --cta-from: #15803d;    /* colorSecondary, 5.10:1 behind white */
  --cta-to:   #166534;    /* colorInfo, 7.12:1 behind white */
  --cta-from-hover: #136c34;  /* hover DARKENS - a lighter green drops under AA */
  --cta-to-hover:   #10502a;

  /* ===== Ink (app gray ramp) ===== */
  --ink-900: #101828;
  --ink-700: #344054;
  --ink-600: #475467;
  --ink-500: #667085;
  --ink-300: #d0d5dd;
  --ink-200: #e4e7ec;
  --ink-100: #f2f4f7;

  /* ===== Status ===== */
  --success: #1fb356;
  --success-dark: #12833c;
  --error: #d92d20;
  --warning: #ff9500;

  /* ===== Surfaces ===== */
  --white: #ffffff;
  --canvas: #ffffff;
  --wash: #f4fdf5;        /* palest green; the store creative reads ~#3ac35d */
  --surface: #ffffff;
  --surface-2: #f9fefa;

  /* ===== Semantic ===== */
  --text: var(--ink-900);
  --text-body: var(--ink-600);
  --text-mute: var(--ink-500);

  --border: #dcf0dd;
  --border-strong: #bfe3c1;
  --border-brand: rgba(143, 235, 135, 0.34);

  /* ===== Elevation — soft, layered, never a single flat blur ===== */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 6px 16px -6px rgba(16, 24, 40, 0.08);
  --shadow-md: 0 2px 4px rgba(16, 24, 40, 0.04), 0 14px 34px -12px rgba(16, 24, 40, 0.16);
  --shadow-lg: 0 4px 8px rgba(16, 24, 40, 0.04), 0 30px 60px -22px rgba(16, 24, 40, 0.26);
  --shadow-brand: 0 14px 34px -12px rgba(22, 163, 74, 0.45);
  --shadow-cta: 0 14px 30px -10px rgba(21, 128, 61, 0.45), 0 0 0 4px rgba(143, 235, 135, 0.14);

  /* ===== Radii (app borderRadius) ===== */
  --radius-btn: 12px;
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 999px;

  /* ===== Layout ===== */
  --section: clamp(76px, 9vw, 124px);
  --container: 1200px;

  /* ===== Motion ===== */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--canvas);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
}

/* Atmosphere — a soft green wash, the light version of the store creative.
   Fixed so long scrolls keep the light source consistent. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(900px 640px at 82% -8%, rgba(143, 235, 135, 0.20), transparent 62%),
    radial-gradient(760px 560px at -6% 22%, rgba(22, 163, 74, 0.10), transparent 60%),
    radial-gradient(820px 620px at 50% 108%, rgba(31, 179, 86, 0.06), transparent 62%),
    var(--wash);
  z-index: 0;
  pointer-events: none;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.25s var(--ease-out); }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { list-style: none; }

::selection { background: var(--brand-200); color: var(--brand-900); }

/* Visible keyboard focus — never remove without an equivalent replacement */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--brand-800);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn:focus-visible, .store-btn:focus-visible, .nav-cta:focus-visible { outline-offset: 3px; }

/* Anchor targets clear the fixed navbar when arrived at from another page
   (in-page links get the same offset from script.js). */
section[id], header[id] { scroll-margin-top: 92px; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 1;
}

/* Skip link — visible only on keyboard focus */
.skip-link {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--brand-900);
  color: var(--white);
  font-weight: 700;
  border-radius: 0 0 var(--radius-btn) var(--radius-btn);
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 0; }

/* Screen-reader-only helper for labels that must exist but not show */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ===== Typography ===== */
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.025em; line-height: 1.14; color: var(--text); }
.display {
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.04;
}
.accent { color: var(--brand-800); }
/* Value/market accent — the app's success green, darkened for text legibility */
.accent-alt { color: var(--success-dark); }

/* Eyebrow — carries the app icon's scan-bracket motif */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-800);
  padding: 8px 15px 8px 12px;
  border: 1px solid var(--border-brand);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow-xs);
  backdrop-filter: blur(10px);
}
.eyebrow svg { width: 15px; height: 15px; flex-shrink: 0; }
.eyebrow.alt {
  color: var(--success-dark);
  border-color: rgba(31, 179, 86, 0.3);
  background: rgba(255, 255, 255, 0.9);
}

.section-intro {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}
.section-intro .eyebrow { margin-bottom: 20px; }
.section-intro h2 {
  font-size: clamp(1.95rem, 3.8vw, 2.75rem);
  font-weight: 800;
  margin-bottom: 16px;
}
.section-intro p { font-size: 1.06rem; color: var(--text-body); }

/* Section rule — a hairline that fades out, used instead of hard dividers */
.hairline {
  height: 1px;
  border: 0;
  background: linear-gradient(to right, transparent, var(--border-strong) 18%, var(--border-strong) 82%, transparent);
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  font-size: 0.97rem;
  padding: 15px 28px;
  border-radius: var(--radius-btn);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out),
              background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out),
              color 0.25s var(--ease-out);
  white-space: nowrap;
  border: 1px solid transparent;
  font-family: inherit;
  line-height: 1.2;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Primary — the app's own brand gradient: colorPrimary into colorInfo, haloed
   in the gradient-start #8feb87. Both stops clear 4.5:1 behind white label
   text; hover darkens because a lighter green would fall under AA. */
.btn-primary {
  background: linear-gradient(160deg, var(--cta-from) 0%, var(--cta-to) 100%);
  color: var(--white);
  border-color: var(--cta-to);
  box-shadow: var(--shadow-cta), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-primary:hover {
  background: linear-gradient(160deg, var(--cta-from-hover) 0%, var(--cta-to-hover) 100%);
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -12px rgba(21, 128, 61, 0.5), 0 0 0 5px rgba(143, 235, 135, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: rgba(255, 255, 255, 0.9);
  color: var(--brand-900);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-xs);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  border-color: var(--brand-500);
  color: var(--brand-800);
  background: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:active { transform: translateY(0); }

/* ===== Store buttons ===== */
.store-buttons { display: flex; flex-wrap: wrap; gap: 14px; }
.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 12px 22px;
  background: var(--brand-900);
  border: 1px solid var(--brand-900);
  border-radius: var(--radius-btn);
  color: var(--white);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), background-color 0.25s var(--ease-out);
  box-shadow: 0 10px 26px -12px rgba(22, 101, 52, 0.6);
}
.store-btn:hover { background: #15803d; transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(22, 101, 52, 0.65); }
.store-btn svg { width: 26px; height: 26px; flex-shrink: 0; }
.store-btn-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.store-btn-text small { font-size: 0.66rem; letter-spacing: 0.04em; opacity: 0.85; }
.store-btn-text strong { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }

/* Not-yet-live store: rendered as a real disabled control, never a dead link */
.store-btn.is-pending {
  background: var(--white);
  color: var(--ink-500);
  border: 1px dashed var(--border-strong);
  box-shadow: none;
  cursor: default;
}
.store-btn.is-pending:hover { transform: none; background: var(--white); box-shadow: none; }
.store-btn.is-pending svg { opacity: 0.55; }
.store-btn.is-pending .store-btn-text strong { color: var(--ink-600); }
.store-pending-tag {
  margin-left: 4px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-800);
  background: var(--brand-50);
  border: 1px solid var(--border-brand);
  border-radius: var(--radius-full);
  padding: 4px 8px;
  align-self: center;
}

/* ===== Navbar ===== */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 14px 0;
  transition: background-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.navbar.scrolled {
  /* High opacity on purpose: this is a light page, so a thinner veil lets
     body text read straight through the bar. */
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--border);
  box-shadow: 0 6px 24px -18px rgba(16, 24, 40, 0.5);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.14rem;
  letter-spacing: -0.03em;
  color: var(--brand-900);
}
.nav-logo img {
  width: 40px; height: 40px;
  border-radius: 11px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  background: var(--white);
}
.nav-logo span span { color: var(--brand-800); }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { font-size: 0.92rem; font-weight: 600; color: var(--ink-600); }
.nav-links a:hover { color: var(--brand-800); }
.nav-cta { padding: 11px 20px; font-size: 0.88rem; }
/* The link rule above out-specifies .btn-primary, which would leave the CTA
   with dark ink on its fill. Restate the colour at matching specificity. */
.nav-links a.btn-primary,
.nav-links a.btn-primary:hover { color: var(--white); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav-toggle span {
  width: 22px; height: 2px;
  background: var(--brand-900);
  border-radius: 2px;
  transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}

/* ===== Scan-bracket motif =====
   The app icon frames cards in four corner brackets. Reused here as the
   page's signature device: around the hero phone and on section art. */
.brackets { position: absolute; inset: 0; pointer-events: none; }
.brackets span {
  position: absolute;
  width: 42px; height: 42px;
  border: 3px solid var(--brand-500);
  border-radius: 4px;
}
.brackets span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 14px; }
.brackets span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 14px; }
.brackets span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 14px; }
.brackets span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 14px; }

/* ===== Phone frame — real app screens, our own bezel ===== */
/* ===== Screen frame — real app screens, our own bezel =====
   NoteBrain's store creative lets the phone bleed off the canvas, so every
   crop is the TOP of a screen rather than a whole one. The frame is therefore
   open at the bottom: rounded top, square bottom, and the image fades out —
   which reads as "the screen continues" instead of pretending to be a whole
   device. (TCGBrain's crops were full-height, so it used a closed frame.) */
.phone-frame {
  position: relative;
  border-radius: 40px 40px 6px 6px;
  padding: 7px 7px 0;
  background: linear-gradient(160deg, #faf8f3 0%, #e2dccb 46%, #bdb59c 100%);
  box-shadow:
    0 2px 4px rgba(16, 24, 40, 0.06),
    0 34px 64px -26px rgba(22, 101, 52, 0.45),
    0 0 0 1px rgba(16, 24, 40, 0.05);
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
}
.phone-frame img {
  width: 100%;
  border-radius: 34px 34px 0 0;
  display: block;
  background: var(--white);
}

/* ===== Footer ===== */
.footer {
  padding: 74px 0 30px;
  background: var(--white);
  border-top: 1px solid var(--border);
  position: relative;
  z-index: 1;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 56px;
  margin-bottom: 44px;
}
.footer-brand .nav-logo { margin-bottom: 16px; }
.footer-brand p {
  color: var(--text-mute);
  font-size: 0.9rem;
  line-height: 1.65;
  max-width: 380px;
}
.footer-col h3 {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--brand-900);
  margin-bottom: 18px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col a { font-size: 0.92rem; color: var(--text-mute); }
.footer-col a:hover { color: var(--brand-800); }
.footer-legal {
  font-size: 0.78rem;
  color: var(--ink-500);
  line-height: 1.6;
  padding-top: 26px;
  border-top: 1px solid var(--border);
  max-width: 900px;
}
.footer-bottom {
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  color: var(--text-mute);
  font-size: 0.85rem;
}
.footer-bottom a { color: var(--brand-800); font-weight: 600; }
.footer-bottom a:hover { text-decoration: underline; }

/* ===== Reveal on scroll ===== */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
}
.reveal-stagger.in > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0.04s; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 0.12s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 0.20s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 0.28s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 0.36s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 0.44s; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: 0.52s; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: 0.60s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
}

/* ===== Legal / long-form pages ===== */
.legal { padding: 132px 0 80px; max-width: 800px; margin: 0 auto; }
.legal h1 {
  font-size: clamp(2rem, 4vw, 2.7rem);
  font-weight: 800;
  margin-bottom: 12px;
  letter-spacing: -0.03em;
}
.legal .legal-meta {
  color: var(--text-mute);
  font-size: 0.9rem;
  margin-bottom: 36px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.legal h2 { font-size: 1.32rem; font-weight: 700; margin: 36px 0 12px; }
.legal h3 { font-size: 1.05rem; font-weight: 700; margin: 24px 0 8px; color: var(--ink-700); }
.legal p, .legal li { color: var(--text-body); font-size: 1rem; line-height: 1.78; margin-bottom: 12px; }
.legal ul, .legal ol { margin: 0 0 16px 22px; }
.legal ul { list-style: disc; }
.legal ol { list-style: decimal; }
.legal a { color: var(--brand-800); font-weight: 600; }
.legal a:hover { text-decoration: underline; }
.legal strong { color: var(--ink-900); font-weight: 700; }
.legal hr { margin: 34px 0; }
.legal-note {
  background: var(--brand-50);
  border: 1px solid var(--border-brand);
  border-left: 4px solid var(--brand-500);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  margin: 26px 0;
}
.legal-note p:last-child { margin-bottom: 0; }

/* ===== Responsive base ===== */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .nav-links {
    display: none;
    position: fixed;
    top: 70px; left: 16px; right: 16px;
    flex-direction: column;
    align-items: stretch;
    padding: 22px;
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-lg);
    gap: 16px;
  }
  .nav-links.open { display: flex; }
  .nav-toggle { display: flex; }
  .nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
  .nav-cta { width: 100%; justify-content: center; padding: 13px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .legal { padding: 112px 0 64px; }
}

@media (max-width: 420px) {
  .container { padding: 0 16px; }
  .nav-logo { font-size: 1.04rem; gap: 8px; }
  .nav-logo img { width: 34px; height: 34px; border-radius: 9px; }
  .display { font-size: 2.15rem; }
  .section-intro { margin-bottom: 40px; }
  .section-intro h2 { font-size: 1.68rem; }
  .section-intro p { font-size: 0.98rem; }
  .btn { padding: 13px 22px; font-size: 0.92rem; }
}

@media (min-width: 1600px) { :root { --container: 1300px; } }
@media (min-width: 1920px) { :root { --container: 1400px; } body { font-size: 17px; } }