/* =====================================================
   THE MARKETING SPEC — BUILD_PROMPT_marketing_site.md §1 (design
   2026-10-13). The site says what the app does, in the app's
   words, at the app's sizes, in the app's colours: a marketing page
   is a product screen with more whitespace.

   Type   The nine-step ladder is the body. Marketing adds two
          display steps and nothing else — Display 44 (phone 32) and
          Section 32 (phone 26), plus the Lede at 18 (17) — switched at
          one breakpoint, 640. No clamp(): a fluid size is nothing but
          sizes between the steps. Arabic sets at 0 tracking.
   Radius One, 6 px (--radius-*); rounded-full for pills and avatars.
   Colour Tokens only. Two backgrounds per page: stone-50, sapphire-600.
   Hover  Colour only.
   ===================================================== */
html {
  background-color: var(--color-neutral-50);
}

.marketing-body {
  font-family: 'Readex Pro', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-neutral-800);
  background: var(--color-neutral-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.nq-mk-display,
.nq-mk-section-title {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}

.nq-mk-display {
  font-size: 32px;
  line-height: 1.1;
}

.nq-mk-section-title {
  font-size: 26px;
  line-height: 1.15;
}

.nq-mk-lede {
  font-size: 17px;
  line-height: 1.5;
  text-wrap: pretty;
}

@media (min-width: 640px) {
  .nq-mk-display { font-size: 44px; }
  .nq-mk-section-title { font-size: 32px; }
  .nq-mk-lede { font-size: 18px; }
}

/* Latin tightens the display steps; Arabic never tracks — it breaks the
   joins between letters. */
:lang(ar) .nq-mk-display,
:lang(ar) .nq-mk-section-title,
:lang(ar) .nq-mk-lede {
  letter-spacing: 0;
}

/* The product button (components/buttons.css) at the site's size: 16/600,
   44 tall, 0 20 (§1.4). Ghost is a sapphire-200 edge that fills sapphire-50
   on hover. Saffron is a button on sapphire chrome and nowhere else. */
.marketing-body .nq-btn {
  min-height: 44px;
  padding: 0 20px;
  font-size: 16px;
}

.marketing-body .nq-btn--sm {
  min-height: 36px;
  padding: 0 14px;
  font-size: 14px;
}

.marketing-body .nq-btn--ghost {
  background: transparent;
  border-color: var(--color-primary-200);
  color: var(--color-primary-600);
}

.marketing-body .nq-btn--ghost:hover {
  background: var(--color-primary-50);
  color: var(--color-primary-700);
}

.nq-btn--saffron {
  background: var(--color-secondary-400);
  color: var(--color-neutral-900);
}

.nq-btn--saffron:hover {
  background: var(--color-secondary-500);
}

/* =====================================================
   PAGE BANDS — side gutters 20 on a phone, 40 from 640; content
   no wider than the 1440 frame it was drawn in.
   ===================================================== */
.nq-mk-wrap {
  max-width: 1360px;
  margin-inline: auto;
}

.nq-mk-band {
  padding: 48px 20px;
}

@media (min-width: 640px) {
  .nq-mk-band {
    padding: 72px 40px;
  }
}

.nq-mk-sub {
  max-width: 620px;
  margin: 12px 0 40px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--color-neutral-600);
}

/* =====================================================
   PAGES WITHOUT A BAND — pricing, Talk to us (§6, §7). The title
   block, then the page's body, under the white header.
   ===================================================== */
/* Capped at 1360 and centred beyond, like every band (the 1440 frame less
   its 40 px gutters); the title block's own measure is 760. */
.nq-mk-page__top,
.nq-mk-page__body,
.nq-mk-page__shot {
  max-width: 1440px;
  margin-inline: auto;
}

.nq-mk-page__top {
  padding: 32px 20px 0;
}

.nq-mk-page__top > * {
  max-width: 760px;
}

.nq-mk-page__top .nq-mk-display {
  margin-block-end: 18px;
  color: var(--color-neutral-800);
}

.nq-mk-page__top .nq-mk-lede {
  margin: 0;
  color: var(--color-neutral-600);
}

.nq-mk-page__body {
  padding: 32px 20px 48px;
}

@media (min-width: 640px) {
  .nq-mk-page__top {
    padding: 56px 40px 0;
  }

  .nq-mk-page__body {
    padding: 40px 40px 72px;
  }
}

.nq-mk-fine {
  margin: 0;
  font-size: 14px;
  color: var(--color-neutral-500);
}

/* Pricing's facts list — the page's only table: a 240 px label column,
   15/400, hairlines. */
.nq-mk-facts {
  max-width: 720px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--color-neutral-200);
}

.nq-mk-facts li {
  display: grid;
  gap: 2px;
  padding: 14px 0;
  border-block-end: 1px solid var(--color-neutral-200);
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-neutral-600);
}

.nq-mk-facts b {
  font-weight: 600;
  color: var(--color-neutral-800);
}

@media (min-width: 640px) {
  .nq-mk-facts li {
    grid-template-columns: 240px 1fr;
    gap: 24px;
    padding: 18px 0;
  }
}

/* «Everything is included» — a white card, because it is a list the eye
   should hold as one object. Two columns, one on a phone. */
.nq-mk-included {
  max-width: 720px;
  margin-block-start: 32px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-card);
}

.nq-mk-included h2 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-neutral-800);
}

.nq-mk-included ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-neutral-600);
}

.nq-mk-included li {
  padding: 4px 0;
  break-inside: avoid;
}

@media (min-width: 640px) {
  .nq-mk-included ul {
    columns: 2;
    column-gap: 24px;
  }
}

.nq-mk-pricing__cta {
  display: grid;
  justify-items: start;
  gap: 12px;
  margin-block-start: 28px;
}

@media (min-width: 640px) {
  .nq-mk-pricing__cta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-block-start: 32px;
  }
}

/* =====================================================
   TALK TO US — §7 (7a). One form: labels 14/500 above, inputs
   16/400 at 44 (the iOS zoom floor), 6 px, a stone-200 edge; focus is
   a sapphire-600 edge and a 3 px sapphire ring. Two columns from 640,
   720 wide at most. Chips, never selects.
   ===================================================== */
.nq-mk-form {
  display: grid;
  gap: 20px 24px;
  max-width: 720px;
}

@media (min-width: 640px) {
  .nq-mk-form {
    grid-template-columns: 1fr 1fr;
  }
}

.nq-mk-field {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.nq-mk-field--full,
.nq-mk-form > .cf-turnstile {
  grid-column: 1 / -1;
}

.nq-mk-field > label,
.nq-mk-field > legend {
  padding: 0;
  margin-block-end: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-neutral-800);
}

.nq-mk-field > label i {
  font-style: normal;
  font-weight: 400;
  color: var(--color-neutral-500);
}

.nq-mk-field input[type="text"],
.nq-mk-field input[type="email"],
.nq-mk-field input[type="tel"],
.nq-mk-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-input);
  background: #ffffff;
  color: var(--color-neutral-800);
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
}

.nq-mk-field textarea {
  min-height: 96px;
  padding: 10px 12px;
  line-height: 1.5;
  resize: vertical;
}

.nq-mk-field input::placeholder,
.nq-mk-field textarea::placeholder {
  color: var(--color-neutral-500);
}

.nq-mk-field input:focus,
.nq-mk-field textarea:focus {
  border-color: var(--color-primary-600);
  outline: 3px solid rgb(12 74 110 / 0.2);
  outline-offset: 0;
}

.nq-mk-field [aria-invalid="true"] {
  border-color: var(--color-error-dark);
}

.nq-mk-field__error,
.nq-mk-form__error {
  margin: 0;
  font-size: 14px;
  color: var(--color-error-dark);
}

/* +965, fixed, before eight digits — a left-to-right island in Arabic. */
.nq-mk-phone {
  position: relative;
  display: flex;
  align-items: center;
}

.nq-mk-phone__cc {
  position: absolute;
  inset-inline-start: 12px;
  padding-inline-end: 8px;
  border-inline-end: 1px solid var(--color-neutral-200);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-neutral-800);
  pointer-events: none;
}

.nq-mk-field .nq-mk-phone input {
  padding-inline-start: 70px;
  text-align: start;
}

.nq-mk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nq-mk-chip {
  position: relative;
  cursor: pointer;
}

.nq-mk-chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.nq-mk-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-chip);
  background: #ffffff;
  color: var(--color-neutral-800);
  font-size: 15px;
  font-weight: 500;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}

.nq-mk-chip:hover span {
  border-color: var(--color-primary-200);
}

.nq-mk-chip input:checked + span {
  border-color: var(--color-primary-600);
  background: var(--color-primary-50);
  color: var(--color-primary-600);
}

.nq-mk-chip input:focus-visible + span {
  outline: 3px solid rgb(12 74 110 / 0.2);
}

/* The button says the thing chosen: «Book a demo», or «Send» for something
   else. Without :has() it always reads Book a demo. */
.nq-mk-form__send {
  display: grid;
  justify-items: start;
  gap: 10px;
}

@media (min-width: 640px) {
  .nq-mk-form__send {
    display: flex;
    align-items: center;
    gap: 16px;
  }
}

.nq-mk-submit__send,
.nq-mk-form:has(#talk_topic_other:checked) .nq-mk-submit__demo {
  display: none;
}

.nq-mk-form:has(#talk_topic_other:checked) .nq-mk-submit__send {
  display: inline;
}

/* Sent (§7.3): the form, replaced in place by one white card. */
.nq-mk-sent {
  max-width: 560px;
  padding: 32px;
  background: #ffffff;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-card);
}

.nq-mk-sent h2 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-neutral-800);
}

.nq-mk-sent p {
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-neutral-600);
}

.nq-mk-sent b {
  font-weight: 600;
  color: var(--color-neutral-800);
  unicode-bidi: isolate;
}

.nq-mk-sent a {
  color: var(--color-primary-600);
}

/* =====================================================
   HOME — §4 hero (4a), the value lines, What noqat runs, the CTA band
   ===================================================== */
.nq-mk-hero {
  overflow: hidden;
  padding: 40px 20px 0;
  background: var(--color-primary-600);
  color: #ffffff;
}

.nq-mk-hero__copy {
  padding-block-end: 32px;
}

.nq-mk-hero .nq-mk-display {
  margin-block-end: 18px;
}

.nq-mk-hero .nq-mk-lede {
  max-width: 520px;
  margin: 0 0 28px;
  color: var(--color-primary-50);
}

@media (min-width: 1024px) {
  .nq-mk-hero {
    padding: 64px 40px 0;
  }

  .nq-mk-hero__inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: end;
    max-width: 1360px;
    min-height: 456px;
    margin-inline: auto;
  }

  .nq-mk-hero__copy {
    padding-block-end: 72px;
  }
}

/* The capture's frame: white, a 1 px sapphire-200 edge on three sides, 6 px
   top corners, a 36 px title row naming the screen. Its foot runs past the
   band's bottom edge, which cuts it at about 64 % of its height — the negative
   margin is that 36 %, as a share of the column's width (13 px of the title
   row plus the image's height). */
.nq-mk-shot {
  margin: 0 0 calc(-13px - 33.6%);
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--color-primary-200);
  border-block-end: 0;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  color: var(--color-neutral-800);
}

.nq-mk-shot__bar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 14px;
  border-block-end: 1px solid var(--color-neutral-200);
  background: var(--color-neutral-50);
  font-size: 12px;
  font-weight: 400;
  color: var(--color-neutral-500);
}

.nq-mk-shot__bar b {
  font-weight: 600;
  color: var(--color-neutral-600);
}

/* Phone: the board's first two lanes — the left 58 % of the capture (the
   right 58 % in Arabic, where an over-wide block overflows to the left). */
.nq-mk-shot__img {
  display: block;
  width: 172%;
  max-width: none;
  height: auto;
}

@media (min-width: 1024px) {
  .nq-mk-shot {
    align-self: end;
    margin-block-end: calc(-13px - 19.5%);
  }

  .nq-mk-shot__img {
    width: 100%;
  }
}

.nq-mk-values__grid {
  display: grid;
  gap: 24px;
}

@media (min-width: 640px) {
  .nq-mk-values__grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

@media (min-width: 1024px) {
  .nq-mk-values__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.nq-mk-value {
  padding-block-start: 16px;
  border-block-start: 1px solid var(--color-neutral-200);
}

.nq-mk-value h3,
.nq-mk-run h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-neutral-800);
}

.nq-mk-value p,
.nq-mk-run p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-neutral-600);
}

.nq-mk-runs {
  padding-block-start: 0;
}

.nq-mk-runs .nq-mk-section-title {
  color: var(--color-neutral-800);
}

.nq-mk-runs__list {
  border-block-start: 1px solid var(--color-neutral-200);
}

.nq-mk-run {
  display: grid;
  gap: 4px;
  padding: 18px 0;
  border-block-end: 1px solid var(--color-neutral-200);
}

.nq-mk-run h3 {
  margin: 0;
}

.nq-mk-run p {
  max-width: 640px;
}

.nq-mk-run a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  justify-self: start;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-primary-600);
  text-decoration: none;
  white-space: nowrap;
  transition: color 150ms ease-out;
}

.nq-mk-run a:hover {
  color: var(--color-primary-700);
}

@media (min-width: 1024px) {
  .nq-mk-run {
    grid-template-columns: 260px 1fr auto;
    gap: 24px;
    align-items: baseline;
    padding: 22px 0;
  }

  .nq-mk-run a {
    min-height: 0;
  }
}

.nq-mk-cta {
  padding: 48px 20px;
  background: var(--color-primary-600);
  color: #ffffff;
  text-align: center;
}

.nq-mk-cta .nq-mk-section-title {
  margin-block-end: 8px;
}

.nq-mk-cta p {
  max-width: 560px;
  margin: 0 auto 28px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--color-primary-50);
}

@media (min-width: 640px) {
  .nq-mk-cta {
    padding: 72px 40px;
  }
}

/* =====================================================
   PART B — the product pages, «All features» and About (owner,
   2026-10-14; the Part A system, no design frame). The title block,
   one real capture, value lines, the other places, the CTA band.
   ===================================================== */
.nq-mk-page__top .nq-btn {
  margin-block-start: 28px;
}

.nq-mk-page__shot {
  padding: 32px 20px 0;
}

@media (min-width: 640px) {
  .nq-mk-page__shot {
    padding: 40px 40px 0;
  }
}

/* A capture that no band cuts: the same frame, closed on all four sides,
   never wider than the capture was taken (1180). */
.nq-mk-shot.nq-mk-shot--whole {
  max-width: 1180px;
  margin: 0;
  border-block-end: 1px solid var(--color-primary-200);
  border-radius: var(--radius-card);
}

/* A phone screen keeps a phone's width. */
.nq-mk-shot.nq-mk-shot--phone {
  max-width: 390px;
}

.nq-mk-alarm__inner,
.nq-mk-lines-band__split {
  display: grid;
  gap: 28px;
}

@media (min-width: 1024px) {
  .nq-mk-lines-band__split {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 64px;
    align-items: start;
  }

  .nq-mk-lines-band__split .nq-mk-lines {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .nq-mk-alarm__inner {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 64px;
    align-items: center;
  }
}

/* A places list straight under its title (no sub-line, unlike the home page). */
.nq-mk-runs .nq-mk-section-title + .nq-mk-runs__list {
  margin-block-start: 24px;
}

/* The first band under the title block sits closer than a band under a band. */
.nq-mk-page__top + .nq-mk-band,
.nq-mk-page__shot + .nq-mk-band {
  padding-block-start: 32px;
}

@media (min-width: 640px) {
  .nq-mk-page__top + .nq-mk-band,
  .nq-mk-page__shot + .nq-mk-band {
    padding-block-start: 56px;
  }
}

.nq-mk-lines {
  display: grid;
  gap: 24px;
}

@media (min-width: 640px) {
  .nq-mk-lines {
    grid-template-columns: 1fr 1fr;
    gap: 32px 40px;
  }
}

@media (min-width: 1024px) {
  .nq-mk-lines {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* The order alarm on the counter page (§4): a section title and the lede. */
.nq-mk-alarm {
  padding-block-end: 0;
}

.nq-mk-alarm .nq-mk-section-title {
  margin-block-end: 12px;
}

.nq-mk-alarm .nq-mk-lede {
  max-width: 760px;
  margin: 0;
  color: var(--color-neutral-600);
}

.nq-mk-alarm + .nq-mk-band {
  padding-block-start: 40px;
}

.nq-mk-works-with {
  padding-block-start: 0;
}

.nq-mk-works-with .nq-mk-section-title {
  margin-block-end: 24px;
}

/* =====================================================
   HELP CENTRE — §2.4 (Part B). The marketing header and footer; the
   guides as a side index from 1024 up and a list above the article
   below it; the open guide marked by colour and weight, never a glyph.
   ===================================================== */
.nq-docs {
  max-width: 1440px;
  margin-inline: auto;
  padding: 24px 20px 56px;
}

@media (min-width: 640px) {
  .nq-docs {
    padding: 40px 40px 72px;
  }
}

.nq-docs__index {
  margin-block-end: 28px;
  padding-block-end: 12px;
  border-block-end: 1px solid var(--color-neutral-200);
}

.nq-docs__index ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nq-docs__home,
.nq-docs__index li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  text-decoration: none;
  transition: color 150ms ease-out;
}

.nq-docs__home {
  font-weight: 600;
  color: var(--color-neutral-800);
}

.nq-docs__index li a {
  font-weight: 500;
  color: var(--color-neutral-600);
}

.nq-docs__home:hover,
.nq-docs__index li a:hover {
  color: var(--color-primary-600);
}

.nq-docs__index a[aria-current="page"] {
  font-weight: 600;
  color: var(--color-primary-600);
}

@media (min-width: 1024px) {
  .nq-docs {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 64px;
    align-items: start;
  }

  /* Under the 64 px header, with the article scrolling past it. */
  .nq-docs__index {
    position: sticky;
    top: 88px;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .nq-docs__index ul {
    display: grid;
  }
}

.nq-docs__article {
  min-width: 0;
  max-width: 760px;
}

.nq-docs__article > .nq-mk-section-title {
  margin-block-end: 12px;
}

.nq-docs__article > .nq-mk-lede {
  margin: 0 0 32px;
  color: var(--color-neutral-600);
}

/* The guide itself. Long words — a code URL, an API key's name — wrap rather
   than push the page sideways on a phone (audit B4). */
.nq-prose {
  overflow-wrap: anywhere;
}

.nq-prose ul {
  list-style: disc;
}

.nq-prose ol {
  list-style: decimal;
}

.nq-prose hr {
  margin: 32px 0;
  border: 0;
  border-block-start: 1px solid var(--color-neutral-200);
}

.nq-prose strong {
  font-weight: 600;
  color: var(--color-neutral-800);
}

.nq-prose code {
  font-size: 14px;
}

.nq-prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* The index: every guide a row, named by its title. */
.nq-docs-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--color-neutral-200);
}

.nq-docs-list li {
  padding: 12px 0 16px;
  border-block-end: 1px solid var(--color-neutral-200);
}

.nq-docs-list h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.nq-docs-list h2 a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-primary-600);
  text-decoration: none;
  transition: color 150ms ease-out;
}

.nq-docs-list h2 a:hover {
  color: var(--color-primary-700);
}

.nq-docs-list p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-neutral-600);
}

@media (min-width: 1024px) {
  .nq-docs-list li {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 24px;
    align-items: baseline;
    padding: 10px 0;
  }
}

/* =====================================================
   SITE CHROME — the room the fixed header takes, and the footer
   (BUILD_PROMPT_marketing_site.md §2.5). The header itself is
   components/site_header.css: the owner and onboarding layouts
   render it too.
   ===================================================== */
.marketing-body:not(.hotwire-native) main#main-content {
  padding-top: 56px;
}

@media (min-width: 640px) {
  .marketing-body:not(.hotwire-native) main#main-content {
    padding-top: 64px;
  }
}

/* The page's own colour under a 1 px stone-200 rule — white is for cards. */
.nq-footer {
  border-block-start: 1px solid var(--color-neutral-200);
  background: var(--color-neutral-50);
  color: var(--color-neutral-600);
  font-size: 14px;
}

.nq-footer__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: 40px 20px 28px;
}

.nq-footer__brand {
  grid-column: 1 / -1;
}

@media (min-width: 1024px) {
  .nq-footer__top {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    padding: 48px 40px 32px;
  }

  .nq-footer__brand {
    grid-column: auto;
  }
}

.nq-footer__wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block-end: 4px;
  color: var(--color-primary-600);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.nq-footer__line {
  max-width: 300px;
  margin: 0;
  font-size: 14px;
  color: var(--color-neutral-600);
}

.nq-footer__col h2 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutral-800);
}

.nq-footer__col ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 24 px tall at the least (WCAG 2.5.8) without changing the 8 px rhythm. */
.nq-footer__col a,
.nq-footer__bottom a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--color-neutral-600);
  text-decoration: none;
  transition: color 150ms ease-out;
}

.nq-footer__col a:hover,
.nq-footer__bottom a:hover {
  color: var(--color-primary-600);
}

.nq-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 20px 24px;
  border-block-start: 1px solid var(--color-neutral-200);
  color: var(--color-neutral-500);
}

@media (min-width: 640px) {
  .nq-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    padding: 16px 40px 28px;
  }
}

/* =====================================================
   LEGACY PAGE FRAME — what the owner-only What's New page still uses
   (nq-section, nq-container), and the help-centre prose. Part B rebuilt
   the feature, About and help-centre pages without them. Held to the
   Part A spec: ladder sizes, one radius, tokens only, hover a colour.
   ===================================================== */
.nq-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.nq-container-narrow {
  max-width: 800px;
}

.nq-section {
  padding: 80px 0;
}

/* A page that opens on its section, straight under the header. */
.nq-section--first {
  padding-block-start: 24px;
}

/* The Section step (32, phone 26) and the Lede (18, phone 17). */
.nq-section-title {
  margin: 0 0 16px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-neutral-800);
}

.nq-section-subtitle {
  font-size: 17px;
  line-height: 1.5;
  color: var(--color-neutral-600);
}

@media (min-width: 640px) {
  .nq-section-title { font-size: 32px; }
  .nq-section-subtitle { font-size: 18px; }
}

.nq-prose {
  color: var(--color-neutral-700);
  line-height: 1.8;
}

.nq-prose h2 {
  margin: 40px 0 16px;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-neutral-800);
}

.nq-prose h2:first-child {
  margin-top: 0;
}

.nq-prose h3 {
  margin: 32px 0 12px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-neutral-800);
}

.nq-prose p {
  margin-bottom: 16px;
}

.nq-prose a {
  color: var(--color-primary-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.nq-prose a:hover {
  color: var(--color-primary-700);
}

.nq-prose ul,
.nq-prose ol {
  margin-bottom: 16px;
  padding-inline-start: 24px;
}

.nq-prose li {
  margin-bottom: 8px;
}

:lang(ar) .nq-section-title {
  letter-spacing: 0;
}

/* =====================================================
   ANIMATIONS
   ===================================================== */
/* Scroll reveal — an entrance that runs once, so the animation rule decides
   it (design follow-ups r2 1.3): 200 ms, opacity 0→1 with an 8 px rise,
   ease-out, and no stagger — siblings arrive together. Elements are visible
   by default and hidden only once JS is ready. */
.animate-on-scroll {
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.js-animations-ready .animate-on-scroll:not(.animate-in) {
  opacity: 0;
  transform: translateY(8px);
}

.animate-on-scroll.animate-in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll { transition: none; }
  .js-animations-ready .animate-on-scroll:not(.animate-in) {
    opacity: 1;
    transform: none;
  }
}

/* =====================================================
   AUTH PAGES (Magic Link, Login)
   ===================================================== */
.nq-auth-section {
  min-height: calc(100vh - 64px); /* the fixed header */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-neutral-50);
  padding: 32px 16px;
}

.nq-auth-container {
  width: 100%;
  max-width: 420px;
}

.nq-auth-card {
  background: #ffffff;
  border-radius: var(--radius-card);
  padding: 40px 32px;
}

.nq-auth-logo {
  text-align: center;
  margin-bottom: 32px;
}

/* The wordmark on the owner sign-in pages: sapphire on light, the dot a
   class on the saffron token (D5). */
.nq-auth-wordmark {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary-600);
}

.nq-auth-header {
  text-align: center;
  margin-bottom: 32px;
}

.nq-auth-title {
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-neutral-800);
  margin: 0 0 8px;
}

.nq-auth-subtitle {
  font-size: 15px;
  color: var(--color-neutral-600);
  margin: 0;
  line-height: 1.6;
}

/* Auth Alerts */
.nq-auth-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-card);
  margin-bottom: 24px;
  font-size: 14px;
  line-height: 1.5;
}

.nq-auth-alert--error {
  background-color: var(--color-error-light);
  border: 1px solid var(--color-error-200);
  color: var(--color-error-dark);
}

.nq-auth-alert--success {
  background-color: var(--color-success-light);
  border: 1px solid var(--color-success-light);
  color: var(--color-success-dark);
}

.nq-auth-alert-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-block-start: 1px;
}

/* Auth Form */
.nq-auth-form {
  margin-bottom: 24px;
}

.nq-auth-field {
  margin-bottom: 20px;
}

.nq-auth-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-neutral-700);
  margin-bottom: 8px;
}

.nq-auth-input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  font-size: 16px;
  color: var(--color-neutral-800);
  background-color: #ffffff;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-input);
  transition: border-color 150ms ease-out;
  box-sizing: border-box;
}

.nq-auth-input:focus {
  border-color: var(--color-primary-600);
  outline: 3px solid rgb(12 74 110 / 0.2);
  outline-offset: 0;
}

.nq-auth-input::placeholder {
  color: var(--color-neutral-500);
}

.nq-auth-hint {
  font-size: 12px;
  color: var(--color-neutral-500);
  margin: 8px 0 0;
}

/* Auth Submit Button */
.nq-auth-submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.nq-auth-btn-icon {
  width: 20px;
  height: 20px;
}

/* Auth Alternative Links */
.nq-auth-alt {
  text-align: center;
}

.nq-auth-alt-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-primary-600);
  text-decoration: none;
  transition: color 150ms ease-out;
}

.nq-auth-alt-link:hover {
  color: var(--color-primary-700);
}

/* Auth Info Box */
.nq-auth-info {
  display: flex;
  gap: 12px;
  padding: 16px;
  background-color: var(--color-primary-50);
  border-radius: var(--radius-card);
  margin-top: 24px;
}

.nq-auth-info-icon {
  width: 20px;
  height: 20px;
  color: var(--color-primary-600);
  flex-shrink: 0;
  margin-block-start: 2px;
}

.nq-auth-info-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutral-800);
  margin: 0 0 4px;
}

.nq-auth-info-text {
  font-size: 14px;
  color: var(--color-neutral-600);
  margin: 0;
  line-height: 1.5;
}

/* Auth Resend Section */
.nq-auth-resend {
  background-color: var(--color-neutral-50);
  border-radius: var(--radius-card);
  padding: 20px;
  margin-bottom: 24px;
}

.nq-auth-resend-text {
  font-size: 14px;
  color: var(--color-neutral-600);
  text-align: center;
  margin: 0 0 16px;
}

/* No [dir="rtl"] row-reverse here: a flex row already follows the
   document's direction, so reversing it again flipped the alerts back to
   left-to-right (audit D6). */