@import url("assets/brand/palette.css");

:root {
  --nl-font-display: "Outfit", system-ui, -apple-system, sans-serif;
  --nl-font-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --nl-font-code: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --wrap: 1120px;
  --radius: 24px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--nl-harbour-900);
  color: #fff;
  font: 400 1rem/1.65 var(--nl-font-body);
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

h1, h2, h3 {
  font-family: var(--nl-font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.96;
  margin: 0;
}

p { margin: 0; }

a { color: var(--nl-flare-400); }

code, .code { font-family: var(--nl-font-code); font-weight: 400; }

.tabular { font-variant-numeric: tabular-nums; }

/* ---------- header ---------- */

header.site {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(2, 37, 43, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--nl-harbour-800);
}

header.site .wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 68px;
}

.brand { display: inline-flex; align-items: center; }
.brand img { height: 26px; width: auto; display: block; }

nav.site { margin-left: auto; display: flex; gap: 28px; flex-wrap: wrap; }

nav.site a {
  color: var(--nl-harbour-200);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
}

nav.site a:hover { color: #fff; }

/* Below the breakpoint the nav drops under the lockup as one scrolling row.
   Wrapping instead cost three stacked lines of header before the hero. */
@media (max-width: 760px) {
  header.site .wrap { flex-wrap: wrap; gap: 0; min-height: 0; padding-top: 14px; padding-bottom: 12px; }
  nav.site {
    margin: 12px 0 0;
    width: 100%;
    flex-wrap: nowrap;
    gap: 22px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  nav.site::-webkit-scrollbar { display: none; }
  nav.site a { white-space: nowrap; }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
}

.nl-btn-primary {
  background: var(--nl-gradient-sunrise);
  color: #fff;
  font: 700 1rem/1 var(--nl-font-display);
  padding: 0.95rem 1.7rem;
  border-radius: 999px;
  border: 0;
}

.nl-btn-primary:hover { filter: brightness(1.06); }

.nl-btn-secondary {
  background: transparent;
  color: inherit;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  padding: 0.85rem 1.5rem;
  font: 600 1rem/1 var(--nl-font-body);
}

.nl-btn-secondary:hover { background: rgba(255, 255, 255, 0.08); }

.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--nl-harbour-900) url("assets/brand/hero-ground.jpg") center/cover no-repeat;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--nl-scrim-bottom), var(--nl-scrim-left);
}

/* Kept short on purpose: the screenshots directly below are the pitch, and a
   tall hero pushes them past the fold. */
.hero .wrap {
  position: relative;
  z-index: 1;
  padding-top: 56px;
  padding-bottom: 40px;
}

.hero h1 {
  font-size: clamp(2.3rem, 4.6vw, 3.4rem);
  max-width: 18ch;
  margin-bottom: 18px;
}

.hero .badge { margin-bottom: 18px; }
.hero .cta-row { margin-top: 22px; }

/* On a phone, every extra row of hero is a row the real screenshots below
   don't get. Drop the badge and the second button, and tighten the pad. */
@media (max-width: 600px) {
  .hero .wrap { padding-top: 32px; padding-bottom: 28px; }
  .hero .badge { display: none; }
  .hero .cta-row .nl-btn-secondary { display: none; }
  .hero + #screens { padding-top: 32px; padding-bottom: 40px; }
  .hero + #screens .screens { margin-top: 18px; }
}

/* .ticket and .qr are shared with the mail cards on the /how page. */
.ticket {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 22px 0;
  padding: 12px 14px;
  border: 1px solid var(--nl-neutral-haze);
  border-radius: 10px;
  background: #fff;
}

.qr { width: 76px; height: 76px; flex: none; color: var(--nl-neutral-ink); display: block; }

.ticket .admit { min-width: 0; }
.ticket .admit b { display: block; color: var(--nl-neutral-ink); font-size: 0.92rem; }
.ticket .admit span { color: var(--nl-neutral-muted); font-size: 0.82rem; }

.lede {
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  color: var(--nl-neutral-muted-soft);
  max-width: 56ch;
}

.lede + .lede { margin-top: 16px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font: 600 0.85rem/1 var(--nl-font-body);
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 28px;
}

.badge i {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--nl-signal-on-time);
  display: block;
}

/* ---------- sections ---------- */

section { padding: 104px 0; border-top: 1px solid var(--nl-harbour-800); }

/* Right under the hero: the screenshots are the pitch, so they get the least
   distance from the top of the page, not the most. Bottom padding is trimmed
   too — the strip is a condensed preview, not a section that needs room of
   its own. */
.hero + #screens { padding-top: 48px; padding-bottom: 56px; border-top: 0; }

/* The generic section h2 is sized for a headline; #screens only needs a
   label over the strip. */
.hero + #screens h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); max-width: none; }

.eyebrow {
  font: 600 0.8rem/1 var(--nl-font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nl-ember-400);
  display: block;
  margin-bottom: 18px;
}

section h2 { font-size: clamp(2rem, 4.5vw, 3.1rem); max-width: 18ch; }

.sub {
  color: var(--nl-neutral-muted-soft);
  margin-top: 18px;
  max-width: 62ch;
  font-size: 1.05rem;
}

/* ---------- pillars (why) ---------- */

.pillars { margin-top: 56px; }

.pillar {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 20px 56px;
  padding: 40px 0;
  border-top: 1px solid var(--nl-harbour-800);
}

.pillar:last-child { border-bottom: 1px solid var(--nl-harbour-800); }
.pillar h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); max-width: 18ch; }
.pillar p { color: var(--nl-neutral-muted-soft); }
.pillar p + p { margin-top: 16px; }

@media (max-width: 760px) {
  .pillar { grid-template-columns: 1fr; gap: 16px; padding: 32px 0; }
}

/* ---------- assistant demo (chat mock + the screen it's reading from) ---------- */

.assistant-demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  margin: 48px 0 40px;
}

/* A light card on the dark page, same language as the forwarded-mail cards:
   it reads as an app surface, not more site furniture. */
.chat-mock {
  background: var(--nl-neutral-white);
  color: var(--nl-neutral-ink);
  border-radius: 20px;
  padding: 22px 22px 18px;
  box-shadow: 0 26px 50px rgba(2, 37, 43, 0.55);
}

.chat-thread { display: flex; flex-direction: column; gap: 14px; }

.chat-msg { display: flex; align-items: flex-end; gap: 10px; max-width: 88%; }
.chat-msg.user { align-self: flex-end; justify-content: flex-end; }
.chat-msg.assistant { align-self: flex-start; }

.chat-bubble { margin: 0; font-size: 0.94rem; line-height: 1.45; }

.chat-msg.user .chat-bubble {
  background: var(--nl-neutral-mist);
  border-radius: 16px 16px 4px 16px;
  padding: 0.6rem 0.9rem;
}

.chat-msg.assistant .chat-bubble {
  color: var(--nl-neutral-ink-soft);
  padding: 0.3rem 0;
}

.chat-avatar {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--nl-harbour-800);
  color: var(--nl-harbour-200);
}

.chat-avatar svg { width: 17px; height: 17px; }

/* Decorative only — nothing here submits or navigates. */
.chat-input {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--nl-neutral-mist);
  border: 1px solid var(--nl-neutral-haze);
  border-radius: 999px;
  padding: 8px 8px 8px 18px;
}

.chat-input span:first-child {
  flex: 1;
  /* 3.85:1 against the bar's #F2F7F8 as --nl-neutral-muted. It is decorative
     and aria-hidden, but it is still visible text. */
  color: #5C6D74;
  font-size: 0.88rem;
}

.chat-send {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--nl-harbour-800);
  color: #fff;
}

.chat-send svg { width: 15px; height: 15px; }

.assistant-shot { max-width: 280px; margin: 0 auto; }

@media (max-width: 760px) {
  .assistant-demo { grid-template-columns: minmax(0, 1fr); gap: 32px; margin: 40px 0 32px; }
  .assistant-shot { max-width: 240px; }
}

/* ---------- forwarded mail cascade ---------- */

/* Light cards on the dark page, so they read as mail lifted out of an inbox
   rather than as more site furniture. Two lanes, each a stack, offset from one
   another — one column left half the width empty. */

.forward { margin-top: 64px; border-top: 1px solid var(--nl-harbour-800); padding-top: 52px; }

.forward-head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 20px 56px;
  align-items: end;
}

.forward h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); max-width: 16ch; }
.forward .sub { margin-top: 0; max-width: none; }

@media (max-width: 900px) {
  .forward-head { grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
}

.cascade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
  margin-top: 48px;
  padding-bottom: 8px;
}

.lane { display: flex; flex-direction: column; min-width: 0; }
.lane:nth-child(2) { margin-top: 56px; }

.mail {
  min-width: 0;
  background: var(--nl-neutral-mist);
  color: var(--nl-neutral-ink);
  border-radius: 14px;
  box-shadow: 0 26px 50px rgba(2, 37, 43, 0.55);
  overflow: hidden;
  transition: transform 0.18s ease;
}

.lane .mail + .mail { margin-top: -16px; }
.lane .mail:nth-child(1) { z-index: 3; transform: rotate(-0.5deg); }
.lane .mail:nth-child(2) { z-index: 2; transform: rotate(0.45deg); }
.lane .mail:nth-child(3) { z-index: 1; transform: rotate(-0.35deg); }

@media (hover: hover) {
  .mail:hover { transform: rotate(0deg) translateY(-5px); z-index: 4; }
}

.mail-top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 30px 22px 0;
}

.mail .subject {
  font-family: var(--nl-font-body);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--nl-neutral-ink);
}

.mail .tag {
  flex: none;
  margin-left: auto;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nl-neutral-muted);
  border: 1px solid var(--nl-neutral-haze);
  border-radius: 5px;
  padding: 3px 7px;
  line-height: 1.2;
}

.mail-head { display: flex; align-items: center; gap: 11px; padding: 16px 22px 0; }

.mail .avatar {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font: 600 0.95rem/1 var(--nl-font-body);
  background: var(--nl-harbour-600);
}

.mail .avatar.a1 { background: #2E6FF0; }
.mail .avatar.a2 { background: #B8422C; }
.mail .avatar.a3 { background: #4B7F52; }
.mail .avatar.a4 { background: #7A4FB5; }
.mail .avatar.a5 { background: #B5762A; }

.mail .who { min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.mail .from {
  color: var(--nl-neutral-ink);
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --nl-neutral-muted (#6E7F86) is a dark-ground token; on the mail card's
   #F2F7F8 it is 3.85:1 and fails WCAG 1.4.3 AA. #5C6D74 is 4.99:1 and still
   reads as the secondary tone next to --nl-neutral-ink. */
.mail .from .addr { color: #5C6D74; font-weight: 400; }
.mail .to { color: #5C6D74; font-size: 0.82rem; }

.mail .when {
  margin-left: auto;
  flex: none;
  align-self: flex-start;
  color: var(--nl-neutral-muted);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mail .when svg { width: 15px; height: 15px; color: var(--nl-neutral-haze); }

.mail-body { padding: 16px 22px 0; }

/* Scoped to .mail on purpose: on /how the cascade lives inside a
   <section class="doc">, and `.doc p` / `.doc p strong` are the same
   specificity but declared later, so they won and painted the mail body
   #B3C0C5 (1.72:1) and its <strong> #fff on a near-white card. */
.mail .mail-body p {
  color: var(--nl-neutral-ink-soft);
  font-size: 0.92rem;
  line-height: 1.6;
}

.mail .mail-body p + p { margin-top: 8px; }
.mail .mail-body strong { color: var(--nl-neutral-ink); font-weight: 600; }

.mail .attach {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 16px 22px 0;
  padding: 7px 13px 7px 10px;
  border: 1px solid var(--nl-neutral-haze);
  border-radius: 8px;
  background: #fff;
  color: var(--nl-neutral-ink-soft);
  font-size: 0.84rem;
}

.mail .attach svg { width: 15px; height: 15px; flex: none; color: var(--nl-neutral-muted); }

.became {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 13px 22px;
  background: var(--nl-harbour-900);
  color: var(--nl-harbour-200);
  font-size: 0.87rem;
  line-height: 1.35;
}

.became svg { width: 15px; height: 15px; flex: none; }
.became b { color: #fff; font-weight: 600; }

.mail.ghost {
  background: transparent;
  border: 1px dashed var(--nl-harbour-700);
  box-shadow: none;
  color: var(--nl-neutral-muted-soft);
  padding: 26px 24px;
}

.mail.ghost p { font-size: 0.98rem; line-height: 1.6; }
.mail.ghost strong { color: #fff; font-weight: 600; font-family: var(--nl-font-display); }

@media (max-width: 900px) {
  .cascade { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lane:nth-child(2) { margin-top: -16px; }
  .lane .mail:nth-child(n) { transform: none; }
  .mail:hover { transform: translateY(-5px); }
}

@media (max-width: 480px) {
  .mail-top, .mail-head, .mail-body { padding-left: 18px; padding-right: 18px; }
  .mail .attach { margin-left: 18px; margin-right: 18px; }
  .became { padding-left: 18px; padding-right: 18px; }
  .mail .tag { display: none; }
}

/* The #hands-off cascade is a phone-only preview of the same demo that lives
   in full on /how (site/how.html) — reused markup, shown at one width only.
   The "see it on /how" link does the opposite: it's how desktop users reach
   the cascade, so it only needs to exist once the cascade itself is hidden. */
#hands-off .cascade { display: none; }

@media (max-width: 760px) {
  #hands-off .cascade { display: grid; }
  #hands-off .hands-off-link { display: none; }
}

/* ---------- features ---------- */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 56px;
}

.feature {
  background: var(--nl-harbour-800);
  border: 1px solid var(--nl-harbour-700);
  border-radius: var(--radius);
  padding: 32px 28px;
}

.feature .icon { width: 26px; height: 26px; color: var(--nl-harbour-200); margin-bottom: 20px; display: block; }
.feature h3 { font-size: 1.35rem; margin-bottom: 12px; }
.feature p { color: var(--nl-neutral-muted-soft); font-size: 0.98rem; }

/* ---------- screens ---------- */

/* A tight, all-six-fit grid rather than the old card-sized columns: this is a
   compact preview of the app, not a section in its own right. */
.screens {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.hero + #screens .screens { margin-top: 20px; }

figure.screen { margin: 0; }

/* No border, radius or plate: the screenshots carry a phone body of their own,
   and any of the three would draw a second rectangle around its rounded
   corners. */
figure.screen img {
  width: 100%;
  height: auto;
  display: block;
}

figure.screen figcaption {
  color: var(--nl-neutral-muted-soft);
  font-size: 0.78rem;
  margin-top: 8px;
  line-height: 1.4;
}

/* Phone: a snap-scroll strip inside its own overflow container — the page
   body never scrolls sideways, only this element does. Screens sit at just
   under half the viewport so two peek at once, bled out to the screen edge
   and re-padded to line back up with the rest of the page. The grid above
   760px is untouched. */
@media (max-width: 760px) {
  .screens {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -24px;
    margin-right: -24px;
    padding: 0 24px 4px;
    /* Without this, "start" snapping treats the container's own padding as
       scrollable slack and rests past it on load, leaving the first slide
       (phone frame and caption both) flush against the screen edge instead
       of sitting in the 24px gutter. This tells the snap algorithm the
       padding is part of the safe area, not something to scroll past. */
    scroll-padding-inline: 24px;
  }
  .screens::-webkit-scrollbar { display: none; }

  figure.screen { flex: 0 0 42vw; scroll-snap-align: start; }
  figure.screen figcaption { font-size: 0.72rem; margin-top: 6px; }
}

/* ---------- steps ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 20px;
  margin-top: 56px;
  counter-reset: step;
}

.step {
  border-top: 2px solid var(--nl-harbour-700);
  padding-top: 26px;
}

.step .num {
  font: 400 0.9rem/1 var(--nl-font-code);
  color: var(--nl-harbour-300);
  display: block;
  margin-bottom: 14px;
}

.step h3 { font-size: 1.25rem; margin-bottom: 10px; }
.step p { color: var(--nl-neutral-muted-soft); font-size: 0.96rem; }

/* ---------- note / pricing ---------- */

.note {
  background: var(--nl-harbour-800);
  border: 1px solid var(--nl-harbour-700);
  border-radius: var(--radius);
  padding: 32px;
  margin-top: 40px;
  color: var(--nl-neutral-muted-soft);
  max-width: 62ch;
}

.note strong { color: #fff; display: block; margin-bottom: 8px; font-size: 1.1rem; }

/* ---------- plans (pricing) ---------- */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 48px;
  align-items: stretch;
  max-width: 960px;
}

.plan {
  display: flex;
  flex-direction: column;
  background: var(--nl-harbour-800);
  border: 1px solid var(--nl-harbour-700);
  border-radius: var(--radius);
  padding: 36px 32px;
}

.plan .tag-best {
  display: inline-block;
  align-self: flex-start;
  background: var(--nl-ember-500);
  color: #fff;
  font: 600 0.75rem/1 var(--nl-font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.plan .tag-best.is-placeholder { visibility: hidden; }

.plan.featured { border-color: var(--nl-ember-500); }

.plan h3 {
  font: 600 0.9rem/1 var(--nl-font-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nl-harbour-200);
}

.plan .price {
  font: 700 clamp(2.4rem, 5vw, 3.1rem)/1 var(--nl-font-display);
  letter-spacing: -0.03em;
  color: #fff;
  margin-top: 14px;
}

.plan .price span {
  font: 500 1rem/1 var(--nl-font-body);
  color: var(--nl-neutral-muted-soft);
}

.plan .runrate { margin-top: 10px; color: var(--nl-neutral-muted-soft); font-size: 0.94rem; min-height: 3.3em; }

.plan .btn { margin-top: auto; width: 100%; }

.plan ul {
  flex: 1 0 auto;
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  border-top: 1px solid var(--nl-harbour-700);
  padding-top: 24px;
}

.plan li {
  display: flex;
  gap: 10px;
  color: var(--nl-neutral-muted-soft);
  font-size: 0.94rem;
  padding: 7px 0;
}

.plan li svg { width: 18px; height: 18px; flex: none; color: var(--nl-signal-on-time); margin-top: 2px; }

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

footer.site {
  border-top: 1px solid var(--nl-harbour-800);
  padding: 48px 0;
  color: var(--nl-neutral-muted);
  font-size: 0.92rem;
}

footer.site .wrap { display: flex; align-items: center; gap: 20px 32px; flex-wrap: wrap; }
footer.site img { height: 22px; width: auto; display: block; }
footer.site nav { display: flex; gap: 24px; margin-left: auto; flex-wrap: wrap; }
footer.site nav a { color: var(--nl-harbour-200); text-decoration: none; }
footer.site nav a:hover { color: #fff; }

/* Companies Act trading disclosure: its own row under the footer nav. */
footer.site .tradingdisclosure {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--nl-neutral-muted);
  opacity: 0.8;
  max-width: 72ch;
}

/* ---------- long-form pages ---------- */

.pagehead { padding: 96px 0 8px; }
.pagehead .wrap { max-width: 900px; }
.pagehead h1 { font-size: clamp(2.4rem, 6vw, 4rem); max-width: 17ch; margin-bottom: 24px; }
.pagehead .lede { max-width: 62ch; }

.doc { padding: 80px 0; }
.doc .wrap { max-width: 900px; }
.doc h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); max-width: 24ch; }
.doc h3 { font-size: 1.2rem; margin-top: 44px; }
.doc p { color: var(--nl-neutral-muted-soft); margin-top: 20px; max-width: 68ch; }
.doc p strong, .doc li strong { color: #fff; font-weight: 600; }
.doc ul { margin: 20px 0 0; padding-left: 22px; max-width: 68ch; }
.doc ul li { color: var(--nl-neutral-muted-soft); margin: 10px 0; }
.doc .note { margin-top: 44px; max-width: none; }

.doc .footnote {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--nl-harbour-800);
  color: var(--nl-neutral-muted);
  font-size: 0.94rem;
}

/* ---------- legal pages ---------- */

.legal { padding: 88px 0 104px; border: 0; }
.legal .wrap { max-width: 760px; }
.legal h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin-bottom: 20px; }
.legal h2 { font-size: 1.5rem; margin: 52px 0 14px; max-width: none; }
.legal h3 { font-size: 1.1rem; margin: 32px 0 10px; }
.legal p, .legal li { color: var(--nl-neutral-muted-soft); }
.legal p { margin: 14px 0; }
.legal ul { margin: 14px 0; padding-left: 22px; }
.legal li { margin: 8px 0; }
.legal .updated {
  font-family: var(--nl-font-code);
  font-size: 0.9rem;
  color: var(--nl-harbour-300);
}
.legal table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 0.95rem; }
.legal th, .legal td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--nl-harbour-800);
  vertical-align: top;
  color: var(--nl-neutral-muted-soft);
}
.legal th { color: #fff; font-weight: 600; }

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- accessibility helpers ---------- */

/* Visible only to assistive technology. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* WCAG 2.4.1: every page repeats the same six-link nav before its content. */
.skip-link {
  position: absolute;
  top: 8px;
  left: -9999px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--nl-neutral-white);
  color: var(--nl-neutral-ink);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus { left: 8px; }

/* The screenshot strip is a scroll container at <=760px, and at 400% zoom on a
   desktop window too (WCAG 1.4.10). Only Chrome makes such a container
   keyboard-focusable on its own, so without tabindex a keyboard user in
   Firefox or Safari cannot reach screenshots three to six. */
.screens:focus-visible {
  outline: 3px solid var(--nl-harbour-300);
  outline-offset: 6px;
  border-radius: 4px;
}

/* ---------- the assistant example ---------- */

.assistant-example { margin: 0; display: flex; flex-direction: column; }
.assistant-example .chat-mock { flex: 1; }

.assistant-example figcaption {
  margin-top: 14px;
  color: var(--nl-neutral-muted-soft);
  font-size: 0.86rem;
}