/* Nuri brand tokens. Shared by the landing page and the legal pages so the two
   can't drift apart.

   The palette is taken from the app itself, not from the icon:
   - #F16383 is the app's accent — 65 occurrences across the codebase, and it is
     the FAB, the tab bar, the selected date, every primary button.
   - The purple-to-orange sweep is sampled from the "Next up" card on the home
     screen. It is the app's one piece of showmanship, so the site borrows it.
   The icon's blue-to-indigo survives as a secondary accent only. */
:root {
  --coral: #F16383;
  --coral-deep: #D94467;
  /* Text-safe coral. --coral-deep is 3.1:1 on the feature bands and 4.0:1 on
     the legal pages, both under the 4.5:1 AA floor for text this size. This is
     the lightest coral that clears it everywhere, measured against the darkest
     point of each band (base gradient with that band's own accent composited
     over it) and against the legal pages' #FFF7F9. Worst case 4.9:1.
     Re-check if the band accents are ever made more saturated — that is what
     pushed the previous value, #A82C4B, back under the line.
     Use for coral *text*; --coral stays for fills, borders and icons. */
  --coral-ink: #932340;
  --coral-soft: #FDEFF3;

  --purple: #B36BFA;
  --magenta: #DD5FA4;
  --orange: #F7956E;

  /* The app's hero gradient, angle matched to the card it came from. */
  --grad-hero: linear-gradient(100deg, #B36BFA 0%, #DD5FA4 48%, #F7956E 100%);
  --grad-coral: linear-gradient(135deg, #F16383 0%, #F7956E 100%);

  /* Kept from the app icon, used sparingly. */
  --indigo: #6864E6;
  --blue: #1F73F4;

  --ink: #14151A;
  --body: #4B5166;
  --muted: #7A8096;
  --line: #E7E8ED;
  --bg: #FFFFFF;

  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 28px;
  --radius-xl: 40px;

  --shadow-sm: 0 1px 2px rgba(20, 21, 26, .05), 0 4px 12px rgba(20, 21, 26, .05);
  --shadow: 0 2px 4px rgba(20, 21, 26, .04), 0 12px 32px rgba(20, 21, 26, .08);
  --shadow-lg: 0 24px 64px rgba(20, 21, 26, .18);
  --glow: 0 10px 40px -10px rgba(241, 99, 131, .55);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

/* The brand mark: the app's "N" in the app's own gradient. */
.mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--grad-hero);
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -.02em;
  flex-shrink: 0;
}

.wordmark {
  color: var(--ink);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.02em;
}

/* Visible focus everywhere. The generated bundle shipped none, which left the
   page unusable by keyboard. */
:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
  border-radius: 4px;
}


/* ===========================================================================
   Shared page chrome — nav, footer, buttons, container.
   Lives here rather than in landing.css because /privacy and /terms use the
   same header and footer as the homepage, and only brand.css is loaded by
   every page. Landing-only styling stays in landing.css.
   =========================================================================== */

.container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 1.5rem; }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: #fff; color: var(--ink); font-weight: 600;
  padding: .7rem 1.1rem; border-radius: var(--radius-sm); box-shadow: var(--shadow);
  text-decoration: none; transition: top .15s ease;
}
.skip:focus { top: 1rem; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font: inherit; font-weight: 650; font-size: 1rem;
  padding: .9rem 1.7rem; border-radius: 999px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, background-color .2s ease;
}
.btn-primary { background: var(--grad-coral); color: #fff; box-shadow: var(--glow); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 48px -12px rgba(241, 99, 131, .7); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: .6; cursor: progress; transform: none; }

.btn-ghost {
  background: rgba(255, 255, 255, .72); color: var(--ink);
  border-color: rgba(20, 21, 26, .08);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.btn-ghost:hover { background: #fff; }

.btn-link {
  display: inline-flex; align-items: center; gap: .45rem;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-weight: 650; color: var(--ink); text-decoration: none;
}
.btn-link .arrow { transition: transform .2s ease; }
.btn-link:hover .arrow { transform: translateX(4px); }

/* ---------- nav ---------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .5);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* Set by landing.js once the page has scrolled past the hero fold. */
.nav.is-stuck {
  background: rgba(255, 255, 255, .82);
  border-bottom-color: rgba(20, 21, 26, .07);
  box-shadow: 0 1px 24px rgba(20, 21, 26, .06);
}
.nav .container { display: flex; align-items: center; gap: 1.5rem; height: 70px; }
.nav .brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; margin-right: auto; }
.nav-links { display: flex; gap: 2rem; }
.nav-links a { color: var(--body); text-decoration: none; font-weight: 550; font-size: .98rem; position: relative; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 2px;
  background: var(--grad-coral); border-radius: 2px; transition: right .25s ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { right: 0; }
.nav .btn { padding: .6rem 1.35rem; font-size: .95rem; }

@media (max-width: 760px) { .nav-links { display: none; } }

/* ---------- footer ---------- */

.footer {
  background: rgba(255, 255, 255, .55);
  border-top: 1px solid rgba(255, 255, 255, .8);
  padding: 2.5rem 0;
  font-size: .92rem;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.footer .brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.footer .tagline { color: var(--muted); }
.footer-bottom {
  margin-top: 1.75rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(20, 21, 26, .08);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .5rem 1.5rem; color: var(--muted);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
/* These were plain text in the old generated bundle — no anchor at all, so
   /privacy and /terms were unreachable from the site. */
.footer-legal a { color: var(--muted); text-decoration: none; border-bottom: 1px solid rgba(122, 128, 150, .35); }
.footer-legal a:hover { color: var(--ink); border-bottom-color: var(--coral); }