/* ===========================================================================
   Northwest Falls: homepage
   ---------------------------------------------------------------------------
   Three rules, and every decision below follows from one of them.

   1. PHOTOGRAPHY CARRIES THE PAGE, NOT BOXES.
      The previous version was a grid of bordered cards containing paragraphs,
      which is what a settings screen looks like. Full-bleed images at the top,
      middle and end give the page a rhythm you feel while scrolling rather
      than read. The chrome is monochrome so the images are the only colour.

   2. ONE IDEA PER SCREEN.
      Sections are tall and mostly empty. If a section needs a paragraph to
      explain it, it is doing two things and should be two sections, or it
      should be cut. Nothing here is longer than two sentences.

   3. TYPE IS THE INTERFACE.
      Headlines run to 6rem and body text stays at 15px. That gap is what makes
      a page feel considered instead of dense. There is no comfortable middle
      size for filler to hide in, deliberately.

   Consumes tokens.css. No hex values here.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Shell
   --------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--space-8);
}
.wrap--narrow { max-width: 760px; }
.wrap--wide   { max-width: var(--page-wide); }

/* Deliberately large. The old page ran at 128px and still felt crowded,
   because the sections inside it were crowded. */
.sec { padding-block: 200px; }
.sec--tight { padding-block: 120px; }

/* ---------------------------------------------------------------------------
   Nav
   Transparent over the hero photograph, solid once you leave it.
   --------------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-sticky);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-slow) var(--ease-out),
              border-color var(--dur-slow) var(--ease-out),
              backdrop-filter var(--dur-slow) var(--ease-out);
}
.nav.is-stuck {
  background: var(--surface-overlay);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom-color: var(--border-subtle);
}

.nav__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-6);
  height: 74px;
  width: 100%;
  max-width: var(--page-wide);
  margin-inline: auto;
  padding-inline: var(--space-8);
}

.nav__brand { display: inline-flex; align-items: center; gap: var(--space-3); }
.nav__wordmark {
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.nav__links { display: flex; justify-content: center; gap: var(--space-8); }
.nav__link {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__link:hover { color: var(--text-primary); }

.nav__actions { display: flex; align-items: center; gap: var(--space-5); }
.nav__signin { font-size: var(--text-sm); color: var(--text-secondary); }
.nav__signin:hover { color: var(--text-primary); }

.nav__burger {
  display: none;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}
.nav__burger:hover { background: var(--surface-2); color: var(--text-primary); }

/* Over the hero the nav sits on a photograph, so it needs light text in both
   themes until it detaches. */
.nav:not(.is-stuck) .nav__wordmark,
.nav:not(.is-stuck) .nav__link,
.nav:not(.is-stuck) .nav__signin,
.nav:not(.is-stuck) .nav__burger { color: rgba(255, 252, 246, 0.78); }
.nav:not(.is-stuck) .nav__link:hover,
.nav:not(.is-stuck) .nav__signin:hover { color: #fffcf6; }
.nav:not(.is-stuck) .logo-mark--light { display: none; }
.nav:not(.is-stuck) .logo-mark--dark  { display: inline-block; }

/* ---------------------------------------------------------------------------
   Display type
   --------------------------------------------------------------------------- */
.display {
  font-size: clamp(2.75rem, 7.2vw, 6rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.045em;
  margin: 0;
}
.display__soft { color: var(--text-tertiary); }
.display--center { text-align: center; }

/* On a photograph. Tertiary grey disappears against an image, so the soft line
   becomes a translucent white instead of a theme colour. */
.on-photo, .on-photo .display { color: #fffcf6; }
.on-photo .display__soft { color: rgba(255, 252, 246, 0.6); }

/* ---------------------------------------------------------------------------
   Full-bleed photograph
   One component for the hero, the mid-page band and the closing panel.
   --------------------------------------------------------------------------- */
.shot {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg-deep);
}
.shot__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.shot__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.30) 34%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0.88) 100%),
    radial-gradient(120% 80% at 50% 40%, transparent 20%, rgba(0,0,0,0.45) 100%);
}
.shot__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --- Hero ------------------------------------------------------------------ */
.hero { min-height: 92vh; min-height: 92svh; display: flex; align-items: flex-end; }
.hero .shot__inner {
  width: 100%;
  padding-block: 180px 120px;
}
.hero__lede {
  margin-top: var(--space-8);
  max-width: 46ch;
  font-size: var(--text-lg);
  line-height: 1.55;
  color: rgba(255, 252, 246, 0.72);
  letter-spacing: -0.01em;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-12);
}

/* The hero CTA sits on a photograph in both themes, so it cannot use the
   theme's inverted pair or it turns black-on-dark in light mode. */
.hero__cta .btn--primary {
  background: #fffcf6;
  color: #0a0908;
}
.hero__cta .btn--primary:hover { background: rgba(255, 252, 246, 0.86); }
.hero__cta .btn--secondary {
  border-color: rgba(255, 252, 246, 0.34);
  color: #fffcf6;
  background: transparent;
}
.hero__cta .btn--secondary:hover {
  background: rgba(255, 252, 246, 0.1);
  border-color: rgba(255, 252, 246, 0.55);
}

/* --- Mid-page band --------------------------------------------------------- */
.band { min-height: 62vh; display: flex; align-items: center; }
.band .shot__inner { width: 100%; padding-block: 140px; text-align: center; align-items: center; }
.band__line {
  font-size: clamp(1.6rem, 3.6vw, 3rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: #fffcf6;
  max-width: 20ch;
  text-wrap: balance;
}
.band__note {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: rgba(255, 252, 246, 0.55);
}

/* --- Closing panel --------------------------------------------------------- */
.close { min-height: 78vh; display: flex; align-items: center; }
.close .shot__inner { width: 100%; padding-block: 160px; align-items: center; text-align: center; }
.close .btn { margin-top: var(--space-12); }
.close .btn--primary { background: #fffcf6; color: #0a0908; }
.close .btn--primary:hover { background: rgba(255, 252, 246, 0.86); }

/* ---------------------------------------------------------------------------
   Story
   The founder note. The emotional beat of the page, so it gets a whole screen
   and no decoration at all.
   --------------------------------------------------------------------------- */
.story__open {
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin-bottom: var(--space-12);
}
.story__body { display: flex; flex-direction: column; gap: var(--space-6); }
.story__body p {
  font-size: var(--text-lg);
  line-height: 1.65;
  letter-spacing: -0.012em;
  color: var(--text-secondary);
}
.story__by {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-12);
  font-size: var(--text-sm);
  color: var(--text-quaternary);
}
.story__by img { width: 32px; height: 32px; border-radius: var(--radius-pill); object-fit: cover; }

/* ---------------------------------------------------------------------------
   Section head. Kicker, then a large title, then nothing.
   --------------------------------------------------------------------------- */
.sec__head { margin-bottom: 96px; max-width: 30ch; }
.sec__head--center { margin-inline: auto; text-align: center; max-width: 24ch; }

.kicker {
  display: block;
  margin-bottom: var(--space-6);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-quaternary);
}

.sec__title {
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.04em;
  margin: 0;
}
.sec__lede {
  margin-top: var(--space-6);
  font-size: var(--text-md);
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 44ch;
}
.sec__head--center .sec__lede { margin-inline: auto; }
.sec__lede a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 4px; }

.sec__note {
  margin-top: var(--space-12);
  font-size: var(--text-sm);
  color: var(--text-quaternary);
  line-height: 1.7;
  max-width: 58ch;
}
.sec__note a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------------------
   Trio: three things, one line each, with a fragment of real interface.
   No borders. Space does the separating.
   --------------------------------------------------------------------------- */
.trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-16);
}
.trio__item { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.trio__n {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-quaternary);
  letter-spacing: 0.1em;
}
.trio__title {
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.03em;
}
.trio__body {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 30ch;
}
.trio__art { margin-top: var(--space-4); }

/* ---------------------------------------------------------------------------
   Interface fragments
   --------------------------------------------------------------------------- */
.stack { display: flex; flex-direction: column; gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); overflow: hidden; }
.stack__row {
  display: flex; align-items: baseline; gap: var(--space-3);
  background: var(--bg);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.stack__row b { color: var(--text-secondary); font-family: var(--font-mono); font-weight: 400; }
.stack__row span { margin-left: auto; color: var(--text-quaternary); }
.stack__row--now { background: var(--surface-2); color: var(--text-primary); }
.stack__row--now b { color: var(--text-primary); }

.wall { display: flex; flex-direction: column; gap: var(--space-1); font-family: var(--font-mono); font-size: var(--text-xs); }
.wall__row {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-xs);
  color: var(--text-quaternary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wall__row--bad { text-decoration: line-through; opacity: 0.6; }
.wall__row--good {
  margin-top: var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: var(--font-sans);
}

.meter { display: flex; flex-direction: column; gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); overflow: hidden; }
.meter__row {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.meter__row b { font-family: var(--font-mono); font-weight: 400; color: var(--text-secondary); }
.meter__row--warn b { color: var(--warning); }

/* ---------------------------------------------------------------------------
   North Link demo
   --------------------------------------------------------------------------- */
.link-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 96px var(--space-8);
  border-block: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: clamp(1.1rem, 3.4vw, 2.25rem);
  letter-spacing: -0.04em;
}
.link-demo__scheme { color: var(--text-quaternary); }
.link-demo__slug { color: var(--text-primary); }
.link-demo__caret {
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  background: var(--text-primary);
  animation: nw-caret 1.05s steps(2, start) infinite;
}
@keyframes nw-caret { to { opacity: 0; } }

/* ---------------------------------------------------------------------------
   Rail: the hairline grid, used only where things really are a list.
   --------------------------------------------------------------------------- */
.rail {
  display: grid;
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.rail--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rail--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rail--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.rail__cell {
  background: var(--bg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
a.rail__cell { transition: background var(--dur-fast) var(--ease-out); }
a.rail__cell:hover { background: var(--surface-2); }

.rail__k {
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.rail__v {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  line-height: 1.6;
}
.rail__mail {
  margin-top: auto;
  padding-top: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

/* Long-form body copy, used on about. */
.prose { display: flex; flex-direction: column; gap: var(--space-6); }
.prose p { font-size: var(--text-md); line-height: 1.75; color: var(--text-secondary); max-width: 64ch; }

/* ---------------------------------------------------------------------------
   Pricing
   --------------------------------------------------------------------------- */
.billing {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin-bottom: 72px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
}
.billing button {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 34px;
  padding-inline: var(--space-6);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.billing button[aria-pressed="true"] { background: var(--surface-3); color: var(--text-primary); }
.billing button span { font-size: var(--text-xs); color: var(--text-quaternary); }

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.plans--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-6); }

.plan {
  position: relative;
  background: var(--bg);
  padding: var(--space-10);
  display: flex;
  flex-direction: column;
}
.plan--featured { background: var(--surface-1); }

.plan__badge {
  position: absolute;
  top: var(--space-10); right: var(--space-10);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-quaternary);
}
.plan__name { font-size: var(--text-sm); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); }
.plan__price { display: flex; align-items: baseline; gap: var(--space-2); margin-top: var(--space-8); }
.plan__amount {
  font-size: clamp(2.25rem, 4vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1;
}
.plan__period { font-size: var(--text-sm); color: var(--text-quaternary); }
.plan__annual { min-height: 18px; margin-top: var(--space-2); font-size: var(--text-xs); color: var(--text-quaternary); }

.plan__quota {
  margin-top: var(--space-6);
  padding-block: var(--space-5);
  border-block: 1px solid var(--border-subtle);
  font-size: var(--text-lg);
  font-weight: 400;
  letter-spacing: -0.03em;
}

.plan__cta { margin-top: var(--space-8); }

.plan__features { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.plan__features li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  line-height: 1.5;
}
.plan__features li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.58em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--text-quaternary);
}

/* ---------------------------------------------------------------------------
   FAQ
   Its own page now. Six long answers at the bottom of a homepage was the
   single largest block of text on the site, and a homepage is not a reference
   document. It is linked from pricing, where the questions actually occur.
   --------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--border-subtle); }
.faq__item { border-bottom: 1px solid var(--border-subtle); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  width: 100%;
  padding: var(--space-8) 0;
  text-align: left;
  font-size: var(--text-lg);
  font-weight: 400;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}
.faq__q i {
  flex: none;
  font-size: 12px;
  color: var(--text-quaternary);
  transition: transform var(--dur-med) var(--ease-out);
}
.faq__item.is-open .faq__q i { transform: rotate(45deg); }

/* Grid rows from 0fr to 1fr animates the height without measuring it in JS. */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p {
  padding-bottom: var(--space-8);
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: 62ch;
}

/* ---------------------------------------------------------------------------
   Reveal on scroll. Slower and smaller than a typical entrance: this should
   read as the page settling, not as things flying in.
   --------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-revealed { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------------
   Mobile menu, injected by home.js
   --------------------------------------------------------------------------- */
.menu__item {
  display: block;
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-md);
  color: var(--text-secondary);
}
.menu__item:hover { background: var(--surface-2); color: var(--text-primary); }

/* ===========================================================================
   Responsive
   =========================================================================== */

@media (max-width: 1080px) {
  .sec { padding-block: 140px; }
  .sec--tight { padding-block: 96px; }
  .trio { gap: var(--space-10); }
  .plans { grid-template-columns: 1fr; }
  .rail--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan { padding: var(--space-8); }
  .plan__badge { top: var(--space-8); right: var(--space-8); }
}

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__burger { display: inline-flex; }
  .nav__signin { display: none; }
  .nav__inner { height: 66px; padding-inline: var(--space-6); }

  .wrap { padding-inline: var(--space-6); }
  .trio { grid-template-columns: 1fr; gap: var(--space-16); }
  .sec__head { margin-bottom: 64px; max-width: none; }
  .link-demo { padding-block: 64px; }
}

@media (max-width: 680px) {
  .sec { padding-block: 104px; }
  .sec--tight { padding-block: 72px; }

  .hero { min-height: 88vh; }
  .hero .shot__inner { padding-block: 140px 88px; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
  .band, .close { min-height: 0; }
  .band .shot__inner { padding-block: 96px; }
  .close .shot__inner { padding-block: 104px; }

  .rail--2, .rail--3, .rail--4, .plans--2 { grid-template-columns: 1fr; }
  .rail__cell { padding: var(--space-6); }
  .story__open { margin-bottom: var(--space-8); }

  .billing { width: 100%; margin-bottom: var(--space-10); }
  .billing button { flex: 1; justify-content: center; padding-inline: var(--space-2); }
}