/* Nudge brand, "burgundy and butter" (decisions, Nov 9). Butter is the nudge: the dot and small accents,
   never a background. Warm white page, cream for soft fills, burgundy for the one primary action. */
:root {
  --page: #faf7f2;
  --deep: #4f0c22;
  --burgundy: #660033;
  --butter: #e7c27a;
  --cream: #f1e8d2;
  --ink: #22211c;
  --ink-2: #5e5a52;
  --hairline: #ebe4d6;
  --serif: "New York", ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 17px/1.6 var(--sans);
}

a { color: var(--burgundy); text-underline-offset: 3px; }
a:hover { color: var(--deep); }
a:focus-visible, .pill:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 3px; border-radius: 999px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
.doc { max-width: 720px; }

/* Nav: the wordmark with its butter dot, two links, one burgundy pill. */
header.site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 0;
}
.wordmark {
  font: 600 26px/1 var(--serif);
  color: var(--burgundy);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.wordmark .dot {
  display: inline-block;
  width: 0.24em;
  height: 0.24em;
  margin-left: 0.06em;
  border-radius: 50%;
  background: var(--butter);
  vertical-align: baseline;
}
header.site nav { display: flex; align-items: center; gap: 24px; }
header.site nav a:not(.pill) { color: var(--ink); text-decoration: none; font-size: 15px; }
header.site nav a:not(.pill):hover { color: var(--burgundy); }

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  font: 600 15px/1 var(--sans);
  text-decoration: none;
  border: 0;
}
.pill.primary { background: var(--burgundy); color: #fff; }
.pill.primary:hover { background: var(--deep); color: #fff; }
.pill.secondary { background: var(--cream); color: var(--ink); }
.pill.secondary:hover { color: var(--burgundy); }
header.site .pill { min-height: 38px; padding: 0 18px; font-size: 14px; }
/* Not a link yet: the app isn't in the App Store. */
.pill.not-yet { cursor: default; }
.pill.not-yet:hover { background: var(--burgundy); }

/* Hero: words on the left, the vinyl "n" on the right. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  padding: 40px 0 72px;
}
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 36px; padding-top: 16px; }
  header.site nav a.hide-small { display: none; }
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--deep);
  font-size: 14px;
  font-weight: 500;
}
.tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--burgundy);
}

h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.12; color: var(--ink); }
.hero h1 { font-size: clamp(42px, 6.2vw, 68px); margin: 22px 0 18px; letter-spacing: -0.02em; }
.hero .sub { font-size: 19px; color: var(--ink-2); max-width: 30em; margin: 0 0 28px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/*
 * The slot for the 3D vinyl "n" (refs/brand/landing-hero.png). Until the asset arrives it's a plain cream
 * card. To add it: put the image at site/img/hero-n.png (about 1200 x 1000, transparent or cream ground)
 * and replace the placeholder div with
 *   <img class="hero-art" src="/img/hero-n.png" alt="Nudge's vinyl n with a butter pebble" width="1200" height="1000">
 */
.hero-art {
  display: block;
  width: 100%;
  aspect-ratio: 6 / 5;
  border-radius: 28px;
  background: linear-gradient(160deg, #f6efe0 0%, var(--cream) 100%);
  box-shadow: inset 0 0 0 1px rgba(79, 12, 34, 0.05);
  object-fit: cover;
}

/* How it works */
.section { padding: 24px 0 8px; }
.section h2 { font-size: clamp(30px, 4vw, 40px); margin: 0 0 8px; }
.section .lede { color: var(--ink-2); max-width: 36em; margin: 0 0 28px; }
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.steps li {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 22px;
  padding: 22px 24px;
}
.steps h3 { font-size: 22px; margin: 0 0 8px; }
.steps h3::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--butter);
  vertical-align: middle;
}
.steps p { margin: 0; color: var(--ink-2); font-size: 16px; }

.get {
  margin: 56px 0 0;
  background: var(--cream);
  border-radius: 28px;
  padding: 32px;
}
.get h2 { margin: 0 0 10px; }
.get p { margin: 0 0 8px; color: var(--ink-2); max-width: 40em; }

/* Privacy and support: the same look, sized for reading. */
.doc h1 { font-size: clamp(36px, 5vw, 48px); margin: 24px 0 12px; letter-spacing: -0.01em; }
.doc h2 { font-size: 26px; margin: 40px 0 10px; }
.doc ul { padding-left: 1.2em; }
.doc li { margin: 6px 0; }
.doc .lede { font-size: 19px; color: var(--ink-2); }
.meta { color: var(--ink-2); font-size: 15px; }

.faq details { border-bottom: 1px solid var(--hairline); padding: 16px 0; }
.faq summary { cursor: pointer; font: 500 20px/1.35 var(--serif); }
.faq summary::marker { color: var(--burgundy); }
.faq details p { color: var(--ink-2); margin: 10px 0 0; }

footer.site {
  margin: 80px 0 0;
  padding: 24px 0 40px;
  border-top: 1px solid var(--hairline);
  color: var(--ink-2);
  font-size: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
}
footer.site a { color: var(--ink-2); }
footer.site .wordmark { font-size: 20px; margin-right: auto; }