/* Nzendo marketing site.
   Brand tokens mirror apps/web/src/styles.css so the site and the app read as
   one product. Self-hosted font: no request to Google, so visitor IPs are not
   handed to a third party. */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('assets/jakarta.woff2') format('woff2');
  /* Variable font: one file covers the whole weight range. */
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --primary: #c2705b;
  --primary-dark: #a85a46;
  --primary-deep: #8f4a3a;
  --primary-light: #d4917e;
  --primary-surface: #faf1ed;
  --ink: #2d3436;
  --muted: #6b6560;
  --bg: #fffcfa;
  --surface: #fff;
  --border: #ece2dd;
  /* Foreground for filled buttons. A token because the fill inverts in dark
     mode, where white would fail against the lighter terracotta. */
  --on-primary: #fff;
  --btn-fill: var(--primary-dark);
  --btn-fill-hover: var(--primary-deep);
  --radius: 14px;
  --radius-pill: 999px;
  --maxw: 1080px;
}

/* The app ships a dark theme, so the site follows the reader's system setting
   rather than staying stubbornly light. Values mirror the app's
   [data-theme="dark"] block. The app has a manual toggle; the site cannot,
   because its content security policy allows no scripts, so the OS preference
   is the whole mechanism. */
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #d4917e;
    --primary-dark: #d4917e;
    --primary-deep: #e8c4b6;
    --primary-light: #e8c4b6;
    --primary-surface: #2b201c;
    --ink: #dfe6e9;
    --muted: #a5a5a5;
    --bg: #121212;
    --surface: #1e1e1e;
    --border: #333;
    /* Dark text on the lighter terracotta: white on #d4917e is 2.3:1. */
    --on-primary: #121212;
    --btn-fill: var(--primary);
    --btn-fill-hover: var(--primary-light);
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation: none !important;
    transition: none !important;
  }
}

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont,
    'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.25rem;
}

a {
  color: var(--primary-dark);
}

/* Keyboard focus must stay visible: this is the only affordance for
   non-pointer users. */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Beta notice.
   Only present on environments built with beta = true (scripts/build-site.sh).
   It sits above the sticky header and scrolls away with the page: the point is
   to set expectations on arrival, not to follow the reader down every screen.
   The surface token already inverts for dark mode, so this needs no second
   colour block. */
.beta-strip {
  background: var(--primary-surface);
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

.beta-strip p {
  margin: 0;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  color: var(--ink);
}

/* The tag flows inline with the sentence rather than sitting beside it as a
   flex sibling. Once the text wraps to several lines, as it does on a phone, a
   centred sibling floats halfway down the strip with nothing beside it. */
.beta-tag {
  display: inline-block;
  margin-right: 0.55rem;
  vertical-align: 1px;
  background: var(--btn-fill);
  color: var(--on-primary);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
  font-size: 1.15rem;
}

.brand img {
  width: 30px;
  height: 30px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Scoped to plain nav links. Without :not(.btn) this rule (specificity 0-1-1)
   beats .btn-primary (0-1-0) and paints the header call to action's label
   muted grey on terracotta, at 1.15:1. */
.nav a:not(.btn) {
  text-decoration: none;
  color: var(--muted);
  font-weight: 500;
  font-size: 0.95rem;
}

.nav a:not(.btn):hover {
  color: var(--primary-dark);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.8rem 1.4rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

/* Fill and foreground both come from tokens so the button inverts correctly in
   dark mode. In light mode this is --primary-dark rather than --primary:
   white on #C2705B is only 3.64:1 and fails WCAG AA at this text size, and
   this is the site's main call to action. #A85A46 reaches 4.98:1. */
.btn-primary {
  background: var(--btn-fill);
  color: var(--on-primary);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--primary) 28%, transparent);
}

.btn-primary:hover {
  background: var(--btn-fill-hover);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--border);
}

.btn-ghost:hover {
  border-color: var(--primary);
  color: var(--primary-dark);
}

/* Hero */
.hero {
  padding: 4.5rem 0 3rem;
}

.hero .wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3rem;
  align-items: center;
}

h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}

.lede {
  font-size: 1.12rem;
  color: var(--muted);
  margin: 0 0 1.75rem;
  max-width: 34rem;
}

.hero-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}

.hero-note {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Device frame */
.device {
  justify-self: center;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 9 / 19;
  border-radius: 38px;
  border: 10px solid #1c1917;
  background: var(--surface);
  box-shadow: 0 30px 60px rgba(45, 52, 54, 0.22);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.device-top {
  background: var(--primary-surface);
  padding: 1.5rem 1.1rem 1.1rem;
  border-bottom: 1px solid var(--border);
}

.device-eyebrow {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--primary-dark);
  font-weight: 700;
  margin: 0 0 0.3rem;
}

.device-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
}

.device-body {
  padding: 0.9rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.tile {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem 0.7rem;
  background: var(--surface);
}

.tile-time {
  font-size: 0.68rem;
  color: var(--primary-dark);
  font-weight: 700;
}

.tile-name {
  font-size: 0.82rem;
  font-weight: 600;
}

.tile-sub {
  font-size: 0.7rem;
  color: var(--muted);
}

.tile.flag {
  background: var(--primary-surface);
  border-color: var(--primary-light);
}

/* Sections */
section {
  padding: 3.25rem 0;
  /* The header is sticky, so an anchor jump would otherwise land with the
     heading hidden underneath it. */
  scroll-margin-top: 76px;
}

.section-title {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: -0.015em;
  margin: 0 0 0.6rem;
}

.section-lede {
  color: var(--muted);
  margin: 0 0 2rem;
  max-width: 42rem;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.1rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem;
}

.card h3 {
  margin: 0.6rem 0 0.4rem;
  font-size: 1.05rem;
}

.card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.93rem;
}

/* Material Symbols Outlined glyphs, inlined as SVG rather than pulled from
   Google Fonts like the app does: the site loads no third-party assets, and
   four icons do not justify an icon font. Same glyphs the app already uses for
   these concepts (bolt, group, cloud_off, payments), so the two look alike. */
.card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--primary-surface);
  color: var(--primary-dark);
  display: grid;
  place-items: center;
}

.card-icon-svg {
  width: 24px;
  height: 24px;
}

/* Philosophy strip */
.strip {
  background: var(--primary-surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.principle h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}

.principle p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

/* Pricing */
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.1rem;
  align-items: start;
}

.plan {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  position: relative;
}

.plan.featured {
  border-color: var(--primary);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--primary) 14%, transparent);
}

.plan-badge {
  position: absolute;
  top: -11px;
  left: 1.5rem;
  background: var(--btn-fill);
  color: var(--on-primary);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
}

.plan h3 {
  margin: 0 0 0.15rem;
  font-size: 1.15rem;
}

.price {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.price span {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
}

.plan ul {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.plan li {
  font-size: 0.9rem;
  padding-left: 1.4rem;
  position: relative;
  color: var(--ink);
}

.plan li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 700;
}

.pricing-note {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Store badges */
.stores {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  align-items: stretch;
  margin-top: 1.1rem;
}

.store {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1rem;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--surface);
  text-decoration: none;
  color: var(--ink);
  min-width: 168px;
}

.store:hover {
  border-color: var(--primary);
}

.store-sub {
  display: block;
  font-size: 0.62rem;
  color: var(--muted);
  line-height: 1.2;
}

.store-name {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.2;
}

.store.disabled {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

.store-glyph {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--ink);
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 2.25rem 0;
  background: var(--surface);
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.footer-links {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
}

.footer-links a:hover {
  color: var(--primary-dark);
}

.copyright {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0;
}

/* Prose pages */
.prose {
  max-width: 44rem;
  padding: 3rem 0 4rem;
}

.prose h1 {
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
}

.prose h2 {
  margin: 2.25rem 0 0.5rem;
  font-size: 1.2rem;
}

.prose p {
  color: var(--muted);
}

.prose strong {
  color: var(--ink);
}

@media (max-width: 860px) {
  .hero .wrap {
    grid-template-columns: 1fr;
  }
  .device {
    display: none;
  }
  .nav a:not(.btn) {
    display: none;
  }
  .hero {
    padding: 3rem 0 2rem;
  }
}