/* nac.best: brand "Dấu duyệt" (docs/brand-guidelines.md). Flat paper and ink, seal red only for the CTA and approval
   marks, system font stacks (no webfont), no theme JavaScript. Mobile first; breakpoints at 40rem and 64rem.
   Only four colours are settings (ink, paper, seal, seal deep, set on :root by layout/theme.liquid); every other tone is
   mixed from them below, so changing a setting restyles the whole page. */

:root {
  --nac-ink: #14213D;
  --nac-paper: #FAF7F2;
  --nac-seal: #B42318;
  --nac-seal-deep: #8F1C13;
  --nac-ink-2: color-mix(in srgb, var(--nac-ink) 95%, var(--nac-paper));
  --nac-paper-2: color-mix(in srgb, var(--nac-paper) 96%, var(--nac-ink));
  --nac-seal-light: color-mix(in srgb, var(--nac-seal) 40%, var(--nac-paper));
  --nac-muted: color-mix(in srgb, var(--nac-ink) 70%, var(--nac-paper));
  --nac-muted-ink: color-mix(in srgb, var(--nac-paper) 80%, var(--nac-ink));
  --nac-line: color-mix(in srgb, var(--nac-paper) 90%, var(--nac-ink));
  --nac-field: color-mix(in srgb, var(--nac-ink) 55%, var(--nac-paper));
  --nac-white: #FFFFFF;
  --nac-ok: #1F6F43;
  --nac-ok-ink: #7FD1A8;
  --nac-focus: #2554C7;
  --nac-font-serif: ui-serif, "New York", Georgia, "Noto Serif", "Times New Roman", serif;
  --nac-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --nac-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  /* Island variables (docs/themes.md "Islands", "Styling"). */
  --nac-accent: var(--nac-seal);
  --nac-radius: 6px;
  --nac-font: var(--nac-font-sans);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5rem; }

body {
  margin: 0;
  background: var(--nac-paper);
  color: var(--nac-ink);
  font: 400 1rem/1.65 var(--nac-font-sans);
  -webkit-font-smoothing: antialiased;
  counter-reset: clause;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, p, ol, ul, figure { margin: 0; }

h1, h2 {
  font-family: var(--nac-font-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h3 { font-size: 1.25rem; line-height: 1.3; font-weight: 600; }

p { text-wrap: pretty; }

a { color: var(--nac-ink); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--nac-focus); outline-offset: 3px; }
/* Focus blue is under 3:1 on ink, so dark surfaces ring in paper. */
.site-footer :focus-visible, .section--ink :focus-visible { outline-color: var(--nac-paper); }

code { font-family: var(--nac-font-mono); font-size: 0.92em; }

.container { width: min(72rem, 100% - 2rem); margin-inline: auto; }
.container--narrow { width: min(48rem, 100% - 2rem); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 20;
  padding: 0.6rem 1rem;
  background: var(--nac-white);
  color: var(--nac-ink);
  border: 2px solid var(--nac-ink);
  border-radius: var(--nac-radius);
  font-weight: 600;
}
.skip-link:focus { top: 1rem; }

main:focus { outline: none; }

/* Buttons and links */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.4rem;
  border-radius: var(--nac-radius);
  background: var(--nac-seal);
  color: var(--nac-white);
  font: 600 1rem/1.2 var(--nac-font-sans);
  text-decoration: none;
  transition: transform 160ms ease;
}
.button:hover { background: var(--nac-seal-deep); text-decoration: none; }
.button:active { transform: translateY(1px); }
.button--small { min-height: 2.75rem; padding: 0.55rem 1rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  font-weight: 600;
  text-decoration: underline;
}
.link-arrow::after { content: "↓" / ""; margin-left: 0.4em; transition: transform 160ms ease; }
.link-arrow:hover::after { transform: translateY(2px); }

/* The approval stamp: the brand's one seal-red motif besides the CTA. */
.stamp {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border: 2px solid var(--nac-seal);
  border-radius: 4px;
  color: var(--nac-seal);
  font: 700 0.8rem/1.5 var(--nac-font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(-4deg);
  white-space: nowrap;
}
.stamp--ink { border-color: var(--nac-seal-light); color: var(--nac-seal-light); }
.stamp--muted { border-color: var(--nac-muted); color: var(--nac-muted); transform: rotate(-6deg); font-size: 1rem; }

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--nac-paper);
  border-bottom: 1px solid var(--nac-line);
}
.site-header__inner { display: flex; align-items: center; gap: 1rem; min-height: 4rem; }
.brand { display: inline-flex; padding-block: 0.4rem; margin-right: auto; }
.brand img { width: 5.5rem; height: auto; }
.site-nav { display: none; }
.site-nav ul { display: flex; gap: 1.75rem; padding: 0; list-style: none; }
.site-nav a { display: inline-block; padding-block: 0.6rem; text-decoration: none; font-weight: 500; }
.site-nav a:hover { text-decoration: underline; }
/* The header button is ink, so the hero's seal-red button stays the one red call to action on screen. */
.site-header__cta { background: var(--nac-ink); }
.site-header__cta:hover { background: var(--nac-ink-2); }
.site-header__cta-long {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (min-width: 40rem) {
  .site-header__cta-long { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; }
  .site-header__cta-short { display: none; }
}

@media (min-width: 64rem) {
  .site-nav { display: block; margin-right: 1rem; }
}

/* Hero */

.hero { padding-block: 3rem 3.5rem; border-bottom: 1px solid var(--nac-line); }
.hero__inner { display: grid; gap: 2.5rem; align-items: center; }
.eyebrow {
  margin-bottom: 0.9rem;
  color: var(--nac-muted);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero__title { font-size: 2.125rem; line-height: 1.15; }
.hero__sub { margin-top: 1.25rem; max-width: 36rem; color: var(--nac-muted); font-size: 1.0625rem; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 2rem; }

/* The approval ledger: draft, preview, release, with the seal pressed on the last line. */
.hero__visual { min-width: 0; }
.ledger {
  border: 1px solid var(--nac-line);
  border-top: 3px solid var(--nac-ink);
  border-radius: var(--nac-radius);
  background: var(--nac-white);
  overflow: hidden;
}
.ledger__head { padding: 1rem 1.25rem; border-bottom: 1px solid var(--nac-line); font-weight: 600; }
.ledger__stages { display: grid; padding: 0; list-style: none; }
.ledger__stage { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); padding: 1.1rem 1.25rem; }
.ledger__stage + .ledger__stage { border-top: 1px solid var(--nac-line); }
.ledger__no { color: var(--nac-muted); font: 600 0.875rem/1.9 var(--nac-font-sans); letter-spacing: 0.04em; }
.ledger__name { font: 600 1.25rem/1.3 var(--nac-font-serif); }
.ledger__note { margin-top: 0.25rem; color: var(--nac-muted); font-size: 0.95rem; }
.ledger__note--ok { display: flex; align-items: center; gap: 0.4rem; color: var(--nac-ok); font-weight: 600; }
.ledger__note--ok svg { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; }
.ledger__stamp { margin-top: 0.75rem; animation: seal-down 420ms cubic-bezier(0.2, 0.8, 0.2, 1) 300ms both; }
.ledger__transcript {
  display: grid;
  gap: 0.25rem;
  padding: 1rem 1.25rem;
  background: var(--nac-ink-2);
  color: var(--nac-paper);
  font: 400 0.8125rem/1.6 var(--nac-font-mono);
  list-style: none;
  overflow-wrap: anywhere;
}
.hero__caption { margin-top: 0.75rem; color: var(--nac-muted); font-size: 0.875rem; }

@keyframes seal-down {
  from { opacity: 0; transform: rotate(-4deg) scale(1.35); }
  to { opacity: 1; transform: rotate(-4deg) scale(1); }
}

@media (min-width: 64rem) {
  .hero { padding-block: 5rem 5.5rem; }
  .hero__inner { grid-template-columns: 1.05fr 1fr; gap: 4rem; }
  .hero__title { font-size: 3.25rem; }
  .hero__sub { font-size: 1.125rem; }
}

/* Sections */

.section { padding-block: 3.5rem; }
.section--deep { background: var(--nac-paper-2); }
.section--ink { background: var(--nac-ink); color: var(--nac-paper); }
.section__title { font-size: 1.75rem; line-height: 1.2; max-width: 40rem; }
.section__title--wide { max-width: 52rem; }
.section__intro { margin-top: 1rem; max-width: 40rem; color: var(--nac-muted); font-size: 1.0625rem; }
.section--ink .section__intro { color: var(--nac-muted-ink); }

/* A numbered clause: the number counts the sections that opt in, so reordering them renumbers the page. */
.section--clause { counter-increment: clause; }
.section--clause .section__title::before {
  content: counter(clause, decimal-leading-zero) / "";
  display: block;
  width: 3.5rem;
  margin-bottom: 1rem;
  padding-top: 0.6rem;
  border-top: 2px solid currentColor;
  color: var(--nac-muted);
  font: 600 0.875rem/1 var(--nac-font-sans);
  letter-spacing: 0.08em;
}
.section--ink.section--clause .section__title::before { color: var(--nac-muted-ink); }

@media (min-width: 64rem) {
  body { font-size: 1.125rem; }
  h3 { font-size: 1.375rem; }
  .section { padding-block: 5.5rem; }
  .section__title { font-size: 2.25rem; }
  .faq__question { font-size: 1.125rem; }
  .not-found .section__title { font-size: 3.25rem; }
}

.grid { display: grid; gap: 1.25rem; margin-top: 2.5rem; padding: 0; list-style: none; }
@media (min-width: 40rem) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .grid--3 > :last-child:nth-child(odd) { grid-column: auto; }
}

.pain, .feature {
  padding: 1.5rem;
  border: 1px solid var(--nac-line);
  border-radius: var(--nac-radius);
  background: var(--nac-white);
}
/* A pain card may open with a drawing, so its padding sits on the body below it. */
.pain { padding: 0; border-top: 3px solid var(--nac-ink); overflow: hidden; }
.pain__body { padding: 1.5rem; }
.pain p, .feature p, .point p, .step p, .proof__caption p { margin-top: 0.6rem; color: var(--nac-muted); }
.icon { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: round; margin-bottom: 1rem; }

/* Line drawings (snippets/illustration.liquid): 1.5px ink on a paper panel at the top of a card. Only a .illo__seal
   group is seal red, and only where a person approves. */
.art {
  display: grid;
  place-items: center;
  padding: 1.5rem 1.25rem;
  background: var(--nac-paper-2);
  border-bottom: 1px solid var(--nac-line);
}
.illo {
  width: 100%;
  max-width: 15rem;
  height: auto;
  color: var(--nac-ink);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: round;
  overflow: visible;
}
.illo * { vector-effect: non-scaling-stroke; }
.illo .illo__dot { fill: currentColor; stroke: none; }
.illo .illo__dash { stroke-dasharray: 4 4; }
.illo .illo__fill { fill: var(--nac-white); }
.illo .illo__seal { stroke: var(--nac-seal); }

/* How it works */

.steps { display: grid; gap: 1rem; margin-top: 2.5rem; padding: 0; list-style: none; counter-reset: step; }
.step {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--nac-line);
  border-radius: var(--nac-radius);
  background: var(--nac-white);
  overflow: hidden;
}
.step__body { position: relative; flex: 1; padding: 1.5rem 1.5rem 1.5rem 4.75rem; }
.step__number {
  position: absolute;
  left: 1.5rem;
  top: 1.4rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1.5px solid var(--nac-ink);
  border-radius: 50%;
  font: 600 1rem/1 var(--nac-font-sans);
}
.step--yours { border-color: var(--nac-ink); }
.step--yours .step__number { background: var(--nac-ink); color: var(--nac-paper); }
.step .stamp { margin-top: 1rem; }

@media (min-width: 64rem) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .step__body { padding: 4.5rem 1.5rem 1.75rem; }
  .step__number { top: 1.5rem; }
}

/* Console proof: drawn console cards (snippets/console-mockup.liquid), each over its caption. */

.proof > li { min-width: 0; }
.proof__item { display: grid; gap: 1.25rem; align-content: start; }
.mock {
  border: 1px solid var(--nac-line);
  border-top: 3px solid var(--nac-ink);
  border-radius: var(--nac-radius);
  background: var(--nac-white);
  font-size: 0.875rem;
  line-height: 1.5;
  overflow: hidden;
}
.mock__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--nac-line);
  font-weight: 600;
}
.mock__meta { color: var(--nac-muted); font: 400 0.8125rem/1.5 var(--nac-font-mono); overflow-wrap: anywhere; text-align: right; }
.mock__body { display: grid; gap: 0.75rem; padding: 1rem; }
.mock__status { display: flex; align-items: flex-start; gap: 0.5rem; font-weight: 600; }
.mock__status svg { flex: none; margin-top: 0.05rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; }
.mock__status--ok { color: var(--nac-ok); }
.mock__issue {
  padding: 0.65rem 0.8rem;
  border-left: 3px solid var(--nac-ink);
  background: var(--nac-paper-2);
  font: 400 0.8125rem/1.55 var(--nac-font-mono);
  overflow-wrap: anywhere;
}
.mock__issue code { font-size: 1em; font-weight: 600; }
.mock__issue span { display: block; color: var(--nac-muted); }
.mock__rows { display: grid; padding: 0; list-style: none; }
.mock__row {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
}
.mock__row + .mock__row { border-top: 1px solid var(--nac-line); }
.mock__ver { font: 600 1.0625rem/1.2 var(--nac-font-serif); }
.mock__who { color: var(--nac-muted); }
.mock__badge {
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--nac-ok) 12%, var(--nac-white));
  color: var(--nac-ok);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}
.mock__action {
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--nac-field);
  border-radius: var(--nac-radius);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}
.mock__title { font: 600 1.125rem/1.3 var(--nac-font-serif); }
.mock__facts { display: grid; gap: 0.5rem; margin: 0; }
.mock__facts div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.75rem; }
.mock__facts dt { color: var(--nac-muted); }
.mock__facts dd { margin: 0; font-weight: 600; }
.mock__buttons { display: flex; justify-content: flex-end; gap: 0.5rem; padding-top: 0.25rem; }
.mock__btn {
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--nac-field);
  border-radius: var(--nac-radius);
  font-weight: 600;
}
.mock__btn--primary { border-color: var(--nac-ink); background: var(--nac-ink); color: var(--nac-paper); }
.proof__caption { max-width: 24rem; }

/* An agent at work */

.agent { display: grid; gap: 2.5rem; }
.transcript {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--nac-muted-ink) 22%, transparent);
  border-radius: calc(var(--nac-radius) + 4px);
  background: var(--nac-ink-2);
  overflow: hidden;
}
.transcript__label {
  padding: 0.65rem 1.25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--nac-muted-ink) 22%, transparent);
  color: var(--nac-muted-ink);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.transcript__lines { display: grid; gap: 0.6rem; padding: 1.25rem; list-style: none; font: 400 0.8125rem/1.6 var(--nac-font-mono); }
.transcript__line { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 0.5rem; align-items: start; overflow-wrap: anywhere; }
.transcript__who { color: var(--nac-muted-ink); }
.transcript__line--person .transcript__who, .transcript__line--person .transcript__what { color: var(--nac-paper); font-weight: 600; }
.transcript__what code { color: var(--nac-seal-light); font-size: 1em; }
.transcript__line .stamp { grid-column: 2; justify-self: start; margin-top: 0.4rem; }

@media (min-width: 40rem) {
  .transcript__lines { font-size: 0.875rem; padding: 1.5rem; }
}

@media (min-width: 64rem) {
  .agent { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; gap: 4rem; }
}

/* Safety and control */

.points { display: grid; gap: 1.75rem; margin-top: 2.5rem; padding: 0; list-style: none; }
.point { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; padding-top: 1.75rem; border-top: 1px solid var(--nac-field); }
.point .icon { margin: 0.1rem 0 0; }

@media (min-width: 64rem) {
  .points { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3.5rem; }
}

/* FAQ */

.faq { max-width: 48rem; margin-top: 2rem; border-top: 1px solid var(--nac-line); }
.faq__item { border-bottom: 1px solid var(--nac-line); }
.faq__question {
  position: relative;
  display: block;
  padding: 1.15rem 2.5rem 1.15rem 0;
  font-weight: 600;
  font-size: 1.0625rem;
  cursor: pointer;
  list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after {
  content: "";
  position: absolute;
  right: 0.35rem;
  top: 1.45rem;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--nac-ink);
  border-bottom: 2px solid var(--nac-ink);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}
.faq__item[open] .faq__question::after { transform: translateY(0.25rem) rotate(-135deg); }
.faq__answer { padding: 0 0 1.25rem; color: var(--nac-muted); max-width: 42rem; }

/* Lead form */

.lead__inner { display: grid; gap: 2rem; }
.lead__helper { margin-top: 1rem; font-size: 0.95rem; color: var(--nac-muted); }
.lead__form {
  min-width: 0;
  padding: 1.5rem;
  border: 1px solid var(--nac-line);
  border-top: 3px solid var(--nac-ink);
  border-radius: var(--nac-radius);
  background: var(--nac-white);
}
.lead__form:empty { display: none; }

@media (min-width: 64rem) {
  .lead__inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 4rem; align-items: start; }
  .lead__form { padding: 2rem; }
}

/* Footer */

.site-footer { padding-block: 3rem 2.5rem; background: var(--nac-ink); color: var(--nac-paper); }
.site-footer a { color: var(--nac-paper); }
.site-footer__inner { display: grid; gap: 2rem; }
.site-footer__brand img { width: 5.5rem; }
.site-footer__brand p { margin-top: 0.75rem; color: var(--nac-muted-ink); }
.site-footer ul { display: grid; gap: 0.25rem; padding: 0; list-style: none; }
.site-footer li a { display: inline-block; padding-block: 0.55rem; }
.site-footer__meta { display: grid; gap: 0.35rem; color: var(--nac-muted-ink); font-size: 0.9375rem; }
.site-footer__meta a { color: var(--nac-seal-light); }

@media (min-width: 64rem) {
  .site-footer__inner { grid-template-columns: 1.4fr 1fr 1fr; align-items: start; }
}

/* 404 */

.not-found { padding-block: 5rem 6rem; }
.not-found .stamp { margin-bottom: 1.5rem; }
.not-found .section__title { font-size: 2.125rem; line-height: 1.15; }
.not-found .button { margin-top: 2rem; }

/* Motion is decoration only: none of it carries meaning, so all of it goes when the visitor asks for less. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media (forced-colors: active) {
  .button, .stamp, .lead__form, .ledger, .mock { border: 2px solid ButtonText; }
}